/* HackOmics — front page.
   Prose is set in the system serif; the sans is kept for the wordmark and the
   hanging terms, so the two voices stay distinct. No web fonts, no external
   assets. The column is deliberately left-weighted rather than centred, and the
   definition terms hang out into the left gutter at wide widths. */

:root {
  --bg:        #fbf9f5;   /* warm paper, not white */
  --bg-sunk:   #f2efe7;
  --fg:        #1b1a17;
  --fg-muted:  #4e4a42;
  --rule:      #ddd6c8;
  --accent:    #0f6f66;
  --accent-fg: #0b524b;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
           Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #14150f;
    --bg-sunk:   #1b1c15;
    --fg:        #ebe7dc;
    --fg-muted:  #aaa595;
    --rule:      #33352a;
    --accent:    #5fd0bb;
    --accent-fg: #5fd0bb;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.55;
}

h1, h2 { line-height: 1.15; text-wrap: balance; margin: 0; }
p, dd { margin: 0; text-wrap: pretty; }

/* The shell centres once it hits its max width; without that it stays pinned to
   the left edge of the glass and on a wide monitor reads as broken CSS rather
   than as composition. The asymmetry lives INSIDE the shell instead: a deep left
   padding against a shallow right one, the hanging terms, the rule in the
   gutter, and four different measures. Centring the block leaves all of it
   exactly where it was relative to the shell. */
.shell {
  max-width: 68rem;
  margin-inline: auto;
  padding-left: clamp(1.25rem, 7vw, 7.5rem);
  padding-right: 1.25rem;
}

/* ---- header ---- */

.site-header { padding-block: 2.25rem 0; }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.mark { display: inline-flex; color: var(--accent); }

.wordmark-text b { font-weight: 700; color: var(--accent-fg); }

.wordmark:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 3px;
}

/* ---- hero ---- */

.hero { padding-block: 4rem 3.5rem; }

.hero h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.125rem, 5.6vw, 3.5rem);
  letter-spacing: -0.015em;
  max-width: 15ch;
}

.lede {
  margin-top: 1.5rem;
  max-width: 30rem;         /* narrower than the heading, on purpose */
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
  line-height: 1.5;
  color: var(--fg-muted);
}

/* ---- section labels ---- */

h2 {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-fg);
  margin-bottom: 1.75rem;
}

/* ---- what we build: hanging terms ---- */

.build { padding-block: 1rem 3rem; }

.build dl { margin: 0; display: grid; gap: 0; }

.build dt {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--fg);
  margin-bottom: 0.375rem;
  padding-top: 0.125rem;
}

.build dd {
  margin: 0;
  max-width: 33rem;
  color: var(--fg-muted);
}

/* Stacked, a term must sit tighter to its own description than the groups sit
   to each other, or it reads as detached. The row gap does the opposite, so the
   spacing is carried on the dd until the columns take over. */
.build dd:not(:last-of-type) { margin-bottom: 1.875rem; }

/* ---- the off-grid rule ----
   Short, accent-coloured, and hung out into the left gutter so it sits clear of
   the text column. A hairline in --rule read as an accident; this reads as a
   decision, which is the whole point of it. */

.offgrid {
  border: 0;
  border-top: 2px solid var(--accent);
  height: 0;
  width: 3.5rem;
  margin: 0 0 3.25rem;
  margin-left: -0.75rem;
  opacity: 0.85;
}

/* ---- how we work ---- */

.how { padding-bottom: 3.5rem; }

.how p {
  max-width: 27rem;         /* a third measure, tighter again */
  color: var(--fg-muted);
}

.how p + p { margin-top: 1.25rem; }

/* ---- footer ---- */

.contact { margin-bottom: 0.5rem; }

/* The page's only anchor besides the wordmark, so it gets the same visible
   focus ring; this must not be where keyboard focus goes missing. */
.site-footer a {
  color: var(--accent-fg);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.site-footer a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.site-footer {
  padding-block: 2rem 3.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--fg-muted);
  max-width: 36rem;
}

/* ---- wide: terms hang into the gutter beside their descriptions ---- */

@media (min-width: 54rem) {
  .build dl {
    grid-template-columns: 7rem minmax(0, 33rem);
    column-gap: 2.5rem;
    row-gap: 2.25rem;
    align-items: baseline;
  }
  .build dt { margin-bottom: 0; text-align: right; }
  .build dd:not(:last-of-type) { margin-bottom: 0; }
  /* Hung into the gutter and crossing back over the text edge. Not flush to
     the viewport: touching the edge reads as overflow, not as a choice. */
  .offgrid { margin-left: calc(-1 * clamp(1.25rem, 3.5vw, 4rem)); width: 5.5rem; }
  .hero { padding-block: 5.5rem 4.5rem; }
}