/* ENTRYPOINT — layout: nav, hero, section labels, footer */

/* ── NAV ───────────────────────────────────────────────── */
/* The home is one page and the nav points at anchors. Without this, an anchored
   section lands underneath the fixed bar. */
section[id] { scroll-margin-top: 56px; }

/* .site-nav, not `nav`: the footer is a nav element too, and it must not inherit
   position:fixed or the blur. A class rather than `body > nav` says what the
   element IS instead of where it sits — and a class selector is the only kind
   cascade-dump.py can see. */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px;
  height: 56px;
  background: var(--t-nav-bg);
  border-bottom: 1px solid var(--t-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav-logo { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.nav-logo img { height: 20px; object-fit: contain; filter: invert(1); } /* black logo, dark site */

/* The links are words, not buttons: no divider, no box, no hover fill. Spacing
   comes from the group's gap, not from padding that would draw a cell around
   each word. The 56px height only aligns them and gives a click target. */
.nav-center { display: flex; align-items: center; gap: 28px; }
.nav-link {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-fg-2);
  cursor: pointer;
  height: 56px;
  white-space: nowrap;
  display: flex; align-items: center;
  transition: color 0.15s;
}
/* No .active state: on a single page there is no "current page" link. */
.nav-link:hover { color: var(--t-fg); }

/* ── HERO ──────────────────────────────────────────────── */
.hero {
  min-height: calc(100vh - 56px);
  display: grid;
  /* The visible width of the hero terminal — the clamp WITHOUT the bleed, that
     is, from the window's left edge to the edge of the screen, which is what
     the eye reads as "the terminal". It lives here, and not on the window,
     because two things measure themselves against it: the window itself (in
     terminal.css, which adds the bleed back) and the panel column below. The
     numbers are explained where the window is built. */
  --hero-term-w: clamp(420px, calc(42.35vw - 14px), 748px);
  /* The panel is two thirds of the terminal, at every width: the window
     overhangs it by the remaining third and reads as coming from outside the
     column, instead of sitting in it. Following the terminal is also what makes
     the column fluid — a fixed 420px stayed frozen from 1025px to 1615px while
     everything around it grew. */
  grid-template-columns: 1fr calc(var(--hero-term-w) * 2 / 3);
  border-bottom: 1px solid var(--t-border);
  /* The terminal overflows the column to the left, over the text, where it has
     to stay visible; its shadow spills past the right edge of the screen, where
     it has to be cut or the page gains a horizontal scrollbar. `clip` on one
     axis is what lets the other stay `visible` — `hidden` would force it to
     `auto` and turn the section into a scroll container. */
  overflow: visible;
  overflow-x: clip;
}
.hero-left {
  padding: 64px 48px 64px 48px;
  /* Above 1280px the type stops growing (the ceiling is in responsive.css) and
     the text would stay pinned to the left edge while the screen widens — the
     surplus all turning into a gap in the middle. Here the block follows half
     of what the screen gains: the calculation gives 48px at 1376px and less
     below it, so the floor keeps today's padding up to there — and 200px at
     1680px, where the ceiling stops it: past that the margin would stop reading
     as composition and start reading as a page out of place. */
  padding-left: clamp(48px, calc(50vw - 640px), 200px);
  display: flex;
  flex-direction: column;
  /* center, not space-between: with a single child, space-between behaves like
     flex-start and the text sticks to the top with a large gap below. */
  justify-content: center;
  border-right: 1px solid var(--t-border);
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 5.5vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--t-fg);
  margin-bottom: 36px;
}
.hero-body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--t-fg-2);
  max-width: 440px;
  margin-bottom: 48px;
}
.hero-actions { display: flex; gap: 10px; align-items: center; margin-bottom: 64px; }


/* Hero right — technical grid panel */
.hero-right {
  background: var(--t-bg-2);
  border-left: 1px solid var(--t-border);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
}

/* Grid lines */
.hero-right::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--t-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--t-border) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.5;
  pointer-events: none;
}

/* ── SECTION LABEL ─────────────────────────────────────── */
.section-label {
  font-family: var(--font-display);
  font-weight: 400;   /* pinned: the element is an <h2>, which defaults to bold */
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-fg-3);
  margin-bottom: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-label::after { content: ''; flex: 1; height: 1px; background: var(--t-border); }

/* ── HOME CLOSING BLOCK ────────────────────────────────── */
/* Same breathing room as the other sections, but no border-bottom: it is the
   last one in <main> and the footer's top border already separates them — two
   lines 1px apart would read as one thick line. */
.apply-cta { padding: 80px 48px; }
/* .hero-actions arrives with the margin of where it was defined, which would
   leave a 64px gap before the footer. That is the only reason for this rule.
   (A sibling rule capping .apply-body at 620px lived here too, for the single
   line of body copy this block used to carry. The line was cut, so the rule
   went with it — .apply-body still exists, but only on /apply.) */
.apply-cta .hero-actions { margin-bottom: 0; }
/* The headline used to hand off to that body line, so 20px below it was a gap
   between two texts. With the body gone it is the gap between the headline and
   the button, and 20px reads as the button being attached to the question
   rather than answering it. */
.apply-cta .apply-title { margin-bottom: 36px; }

/* ── FOOTER ────────────────────────────────────────────── */
footer {
  padding: 32px 40px;
  border-top: 1px solid var(--t-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-logo img { height: 18px; object-fit: contain; filter: invert(1); }
.footer-copy {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--t-fg-3);
}
.footer-links { display: flex; align-items: center; gap: 20px; }
.footer-link {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-fg-3);
  cursor: pointer;
  transition: color 0.15s;
}
.footer-link:hover { color: var(--t-fg); }

.section-label--spaced { margin-bottom: 32px; }