/* ============================================================
   layout.css — sticky header, the full-viewport narrative stage
   (sticky canvas + alternating scrims + beats that swap sides),
   the static "plugs in" close, footer. Left-aligned, asymmetric,
   generous negative space, hairline rules as structure.
   ============================================================ */

/* ---- Shared container ---- */
.header-inner,
.plugs-inner,
.footer-inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============================ HEADER ============================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-med) var(--ease-out),
              background-color var(--dur-med) var(--ease-out);
}
.site-header.is-scrolled {
  border-bottom-color: var(--hair);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.1) blur(6px);
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-24);
}

.wordmark {
  font-family: var(--font-display);
  font-size: var(--t-22);
  letter-spacing: -0.01em;
  color: var(--ink);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--s-16), 2.5vw, var(--s-40));
}

.nav-link {
  font-family: var(--font-body);
  font-size: var(--t-15);
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-link:hover { color: var(--ink); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  font-family: var(--font-body);
  font-size: var(--t-15);
  font-weight: 500;
  line-height: 1;
  padding: var(--s-12) var(--s-16);
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn-lg { padding: var(--s-16) var(--s-24); }

/* Primary CTA — one of the three sanctioned uses of --accent */
.btn-primary {
  background: var(--accent);
  color: var(--ink); /* ink on orange: 6.9:1 — white on this orange fails AA */
}
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 90%, var(--ink)); }

/* Secondary — quiet, NOT orange (accent discipline) */
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hair);
}
.btn-ghost:hover { border-color: var(--ink); }

/* Text link with arrow (hero secondary) */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  font-size: var(--t-15);
  color: var(--ink);
}
.link-arrow .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.link-arrow:hover { color: var(--accent-ink); }
.link-arrow:hover .arrow-down { transform: translateY(3px); }

/* ============= NARRATIVE (full-viewport morphing mass) ==============
   One sticky, full-viewport canvas pins for the whole narrative. The
   text column is pulled up over it with a negative margin. Each beat
   declares which side its FORM occupies (data-side); the copy takes
   the other half. Two paper scrims (one per side) crossfade so the
   reading half is always legible and the form half always clear. */
.narrative { position: relative; }

.narrative-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  width: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.narrative-stage .morph-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* scrim L: paper on the left (copy left, form right) */
.narrative-stage::before,
.narrative-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
}
.narrative-stage::before {
  background: linear-gradient(
    90deg,
    var(--paper) 0%,
    color-mix(in srgb, var(--paper) 88%, transparent) 30%,
    color-mix(in srgb, var(--paper) 45%, transparent) 46%,
    transparent 60%
  );
}
/* scrim R: paper on the right (copy right, form left) */
.narrative-stage::after {
  background: linear-gradient(
    270deg,
    var(--paper) 0%,
    color-mix(in srgb, var(--paper) 88%, transparent) 30%,
    color-mix(in srgb, var(--paper) 45%, transparent) 46%,
    transparent 60%
  );
}
.narrative-stage[data-side="right"]::before { opacity: 1; }
.narrative-stage[data-side="left"]::after  { opacity: 1; }
/* centre beats (divider, verify, tail): no directional scrim */

.narrative-text {
  position: relative;
  z-index: 2;
  margin-top: -100svh;      /* overlay the sticky stage */
  pointer-events: none;     /* clicks fall through except on controls */
}
.narrative-text a,
.narrative-text .cta-row,
.narrative-text .verify-card { pointer-events: auto; }

/* A beat is a two-column grid the height of the viewport. Its copy
   stacks in ONE column (left by default) so every line shares an edge;
   the other column stays empty for the mass. */
.beat {
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s-40);
  align-content: center;
  padding-block: 10vh;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.beat > * { grid-column: 1; max-width: 42ch; }
.beat > .eyebrow,
.beat > .label { max-width: none; }
.beat[data-side="left"] > * { grid-column: 2; }
.beat[data-side="center"] > * {
  grid-column: 1 / -1;
  justify-self: center;
  text-align: center;
}
.beat-hero { min-height: calc(100svh - var(--header-h)); }

/* ---- beat typography spacing ---- */
.hero-title { margin-top: var(--s-24); max-width: 18ch; }
.subhead { margin-top: var(--s-24); max-width: 46ch; }
.cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-24);
  margin-top: var(--s-40);
}
.ambient-caption {
  font-family: var(--font-mono);
  font-size: var(--t-13);
  color: var(--muted);
  margin-top: var(--s-64);
  letter-spacing: 0.02em;
  max-width: 46ch;
}

.act-title { margin-top: var(--s-16); }
.beat .body { margin-top: var(--s-24); }

.caption {
  margin-top: var(--s-40);
  padding-top: var(--s-16);
  border-top: 1px solid var(--hair);
  display: inline-block;
}
.caption::before {
  content: "› ";
  color: var(--faint);
}

/* Active section marker — the third sanctioned use of --accent.
   The engine toggles .is-active on the beat under the viewport centre. */
.beat.is-active .label,
.beat.is-active .eyebrow { color: var(--accent-ink); }
.beat.is-active .caption::before { color: var(--accent); }
.label, .eyebrow { transition: color var(--dur-med) var(--ease-out); }

/* ---- divider: one quiet sentence, no form; a soft paper halo keeps
   it legible while the mass is in flight behind it ---- */
.beat-divider {
  min-height: 72svh;
  position: relative;
  padding-block: 6vh;
}
.beat-divider::before {
  content: "";
  position: absolute;
  inset: 0;
  grid-column: 1 / -1;
  background: radial-gradient(
    ellipse 70% 60% at 50% 50%,
    color-mix(in srgb, var(--paper) 92%, transparent) 0%,
    color-mix(in srgb, var(--paper) 70%, transparent) 45%,
    transparent 75%
  );
  pointer-events: none;
}
.divider-statement {
  position: relative;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 26ch;
  text-wrap: balance;
}

/* ---- verify: the ✓ converges in the upper viewport, the card sits
   beneath it ---- */
.beat-verify {
  min-height: 100svh;
  align-content: end;
  padding-top: 32svh;
  padding-bottom: 7svh;
}
.verify-card {
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius);
  padding: clamp(var(--s-40), 4.5vw, var(--s-64));
  max-width: 640px;
  width: 100%;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 4%, transparent);
}
.verify-card .act-title { margin-top: var(--s-16); }
.verify-card .body { margin-top: var(--s-24); margin-inline: auto; }
.verify-card .btn { margin-top: var(--s-40); }

/* runway for the mass to recede before the quiet close */
.beat-tail { min-height: 40svh; padding-block: 0; }

/* ==================== HOW IT PLUGS IN (static, calm) =============== */
.plugs {
  position: relative;
  z-index: 3;
  background: var(--paper);
  border-top: var(--hairline);
  padding-block: var(--s-96) var(--section-rhythm);
}
.plugs-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s-64) var(--s-96);
  align-items: end;
}
.plugs-copy .body { margin-top: var(--s-24); }
.roadmap {
  font-family: var(--font-mono);
  font-size: var(--t-13);
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-top: var(--s-40);
  padding-top: var(--s-16);
  border-top: 1px solid var(--hair);
  display: inline-block;
}
.snippet {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-15);
  line-height: 1.8;
  color: var(--ink);
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius);
  padding: var(--s-24) var(--s-40);
  overflow-x: auto;
  font-variant-numeric: tabular-nums;
}
.snippet-prompt { color: var(--muted); user-select: none; }

/* ============================ FOOTER =========================== */
.site-footer {
  position: relative;
  z-index: 3;
  background: var(--paper);
  border-top: var(--hairline);
  padding-block: var(--s-64);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-24) var(--s-40);
}
.footer-brand {
  font-family: var(--font-mono);
  font-size: var(--t-15);
  color: var(--ink);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-24);
}
.footer-links a {
  font-size: var(--t-15);
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-links a:hover { color: var(--ink); }
.fineprint {
  flex-basis: 100%;
  font-size: var(--t-13);
  color: var(--muted);
  line-height: 1.7;
  margin-top: var(--s-16);
  padding-top: var(--s-24);
  border-top: 1px solid var(--hair);
}

/* ============================================================
   RESPONSIVE — no horizontal scroll 320–1920.
   ≤980px: the mass becomes a BAND in the upper viewport and every
   beat's copy sits in the lower half under a vertical paper scrim.
   ============================================================ */
@media (max-width: 980px) {
  /* Band layout: the sticky stage is gone. Each beat carries its own small
     canvas (inserted by the engine) in normal flow above its copy, so the
     copy never scrolls over a form and sections take their natural height. */
  .narrative-stage { display: none; }
  .narrative-text { margin-top: 0; }

  .beat {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    align-content: start;
    padding-block: var(--s-40) var(--s-64);
    border-top: var(--hairline);
  }
  .beat-hero { border-top: 0; padding-top: var(--s-24); }
  .beat > *,
  .beat[data-side="left"] > * { grid-column: 1; max-width: 100%; }
  .beat[data-side="center"] > * { justify-self: stretch; text-align: left; }
  .beat-canvas {
    display: block;
    width: 100%;
    height: clamp(200px, 38svh, 320px);
    margin-bottom: var(--s-24);
  }
  .hero-title { max-width: 12ch; }

  .beat-divider { min-height: 0; padding-block: var(--s-64); border-top: 0; }
  .beat-divider::before { display: none; }
  .divider-statement { text-align: center; margin-inline: auto; }

  .beat-verify { min-height: 0; padding-top: var(--s-40); padding-bottom: var(--s-64); }
  .verify-card { padding: var(--s-24); text-align: center; }
  .verify-card .act-title { text-align: center; }
  .beat-tail { display: none; }

  .plugs-inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-40); }
}

@media (max-width: 560px) {
  .nav { gap: var(--s-16); }
  .nav .nav-link { display: none; }
  .nav .btn-ghost { display: inline-flex; }

  .cta-row { gap: var(--s-16); align-items: flex-start; flex-direction: column; }
  .ambient-caption { margin-top: var(--s-40); }
  .snippet { padding: var(--s-16) var(--s-24); font-size: var(--t-13); }
}