/* ============================================================================
   adventureceo.com: site styles on top of the scroll-craft engine
   ----------------------------------------------------------------------------
   The engine stylesheet (/engine/scrollcraft.css) is the mechanism and is never
   edited. This file themes it (tokens) and styles our own markup.

   Grammar: "Split and sweep" (see BRIEF.md section 3).
   - Before the sweep the page is split: ABUNDANT on a hangar-black ground on the
     left, SCARCE on a paper ground on the right, divider in the middle.
   - After the sweep the paper side has won: one column beside a margin rail.
   Two grounds, one accent hue (signal orange) in two lightnesses, one per ground.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  --hangar: #0E1116;
  --hangar-2: #161B22;
  --paper: #F7F4EC;
  --paper-2: #EEE9DD;
  --ink: #0E1116;
  --ink-soft-paper: #3E4A56;   /* blueprint-tinted, never flat grey */
  --ink-on-dark: #F7F4EC;
  --ink-soft-dark: #AEB6BF;
  --blueprint: #1E3A52;
  --orange: #E8501B;           /* fills and accents on the dark ground */
  --orange-deep: #B3390C;      /* text and focus on paper: clears 4.5:1 */

  --sc-font-display: "Geist", system-ui, sans-serif;
  --sc-font-text: "Geist", system-ui, sans-serif;
  --sc-font-mono: "Geist Mono", ui-monospace, monospace;

  /* The brand's own radius (0.125rem on the old site). One scale, held. */
  --sc-r-sm: 2px; --sc-r-md: 2px; --sc-r-lg: 2px;

  --rail-w: 14rem;
  --bar-h: 3.5rem;
  --doc-measure: 44rem;
  --doc-wide: 70rem;

  /* Paper is the default ground: most of the page lives on it. */
  --sc-canvas: var(--paper);
  --sc-surface: var(--paper-2);
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--ink-soft-paper);
  --sc-accent: var(--orange-deep);
  --sc-accent-ink: var(--paper);
  --sc-shadow-color: 40 20% 30%;
  --hairline: color-mix(in oklab, var(--blueprint) 28%, transparent);
}

/* Grounds. Restate `color` with the tokens: text inherits the computed colour,
   so redefining --sc-ink alone would leave bone type on paper (taste.md). */
.ground-dark {
  --sc-canvas: var(--hangar);
  --sc-surface: var(--hangar-2);
  --sc-ink: var(--ink-on-dark);
  --sc-ink-soft: var(--ink-soft-dark);
  --sc-accent: var(--orange);
  --sc-accent-ink: var(--hangar);
  --sc-shadow-color: 220 40% 2%;
  --hairline: color-mix(in oklab, var(--ink-on-dark) 16%, transparent);
  background: var(--sc-canvas);
  color: var(--sc-ink);
}
.ground-paper {
  --sc-canvas: var(--paper);
  --sc-surface: var(--paper-2);
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--ink-soft-paper);
  --sc-accent: var(--orange-deep);
  --sc-accent-ink: var(--paper);
  --hairline: color-mix(in oklab, var(--blueprint) 28%, transparent);
  background: var(--sc-canvas);
  color: var(--sc-ink);
}

body { background: var(--paper); color: var(--ink); }

/* ------------------------------------------------------------ utilities -- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: var(--sc-4); top: var(--sc-4); z-index: 100;
  padding: var(--sc-2) var(--sc-4); background: var(--orange); color: var(--hangar);
  transform: translateY(-200%); transition: transform var(--sc-d-fast) var(--sc-ease-out);
}
.skip:focus { transform: none; }
/* Things that only make sense once page JavaScript has run (the animated stage). */
html:not(.js) .js-only { display: none !important; }

.label {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin: 0;
}

/* --------------------------------------------------------------- buttons -- */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0 var(--sc-5);
  background: var(--orange); color: var(--hangar);
  border: 1px solid transparent; border-radius: var(--sc-r-sm);
  font-family: var(--sc-font-text); font-weight: 600; font-size: var(--sc-t-sm);
  letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: var(--sc-e1);
  transition: background-color var(--sc-d-fast) var(--sc-ease-out),
              transform 120ms var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: color-mix(in oklab, var(--orange) 88%, white); box-shadow: var(--sc-e2); }
}
.button:active { transform: translateY(1px); }
.button:disabled { opacity: 0.55; cursor: progress; }
.button--quiet {
  background: transparent; color: var(--sc-ink); border-color: var(--hairline); box-shadow: none;
}
.link { color: var(--sc-accent); text-decoration: underline; text-underline-offset: 0.22em; }

/* ================================================================== RAIL ==
   One nav element, three presentations:
   - split: a cap riding the divider (home, before the sweep)
   - margin: a fixed left column (home after the sweep, studio, speaking)
   - bar: a top bar on phones, in either mode                               */
.rail {
  position: fixed; z-index: var(--sc-z-chrome);
  font-size: var(--sc-t-sm);
  /* Opacity only: the split cap and the margin rail sit in different places, and
     animating the position between them reads as the menu sliding off screen. */
  transition: opacity var(--sc-d-base) var(--sc-ease-out);
}
.rail__mark { display: inline-flex; align-items: center; gap: var(--sc-2); text-decoration: none; color: inherit; }
.rail__mark img { width: auto; height: 1.9rem; }
/* White mark on the dark cap and phone bar, black mark on the paper margin rail. */
.rail .logo--on-paper { display: none; }
@media (min-width: 861px) {
  .rail[data-mode="margin"] .logo--on-dark { display: none; }
  .rail[data-mode="margin"] .logo--on-paper { display: block; height: 3.2rem; }
}
.rail__links { list-style: none; margin: 0; padding: 0; }
.rail__links a { text-decoration: none; color: inherit; }
@media (hover: hover) and (pointer: fine) {
  .rail__links a:hover { text-decoration: underline; text-underline-offset: 0.22em; }
}
.rail__links a[aria-current="page"] { color: var(--sc-accent); }
.rail__chapter { min-height: 1.2em; }
.rail__toggle { display: none; }

/* margin mode (desktop) */
@media (min-width: 861px) {
  .rail[data-mode="margin"] {
    inset: 0 auto 0 0; width: var(--rail-w);
    display: flex; flex-direction: column; gap: var(--sc-6);
    padding: var(--sc-6) var(--sc-5);
    background: var(--paper); color: var(--ink);
    --sc-ink-soft: var(--ink-soft-paper); --sc-accent: var(--orange-deep);
    border-right: 1px solid color-mix(in oklab, var(--blueprint) 30%, transparent);
  }
  .rail[data-mode="margin"] .rail__links { display: grid; gap: var(--sc-3); }
  .rail[data-mode="margin"] .rail__cta { margin-top: auto; }
  /* One line, always: a wrapped CTA reads as broken. */
  .rail[data-mode="margin"] .rail__cta .button { width: 100%; padding: 0 var(--sc-3); font-size: 0.8rem; }

  /* split mode: a cap centred on the divider. Links collapse behind "Contents". */
  .rail[data-mode="split"] {
    top: var(--sc-4); left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: var(--sc-4);
    padding: var(--sc-2) var(--sc-2) var(--sc-2) var(--sc-4);
    background: var(--hangar); color: var(--ink-on-dark);
    --sc-ink-soft: var(--ink-soft-dark); --sc-accent: var(--orange);
    border: 1px solid color-mix(in oklab, var(--ink-on-dark) 18%, transparent);
    border-radius: var(--sc-r-sm); box-shadow: var(--sc-e2);
  }
  .rail[data-mode="split"] .rail__chapter { display: none; }
  .rail[data-mode="split"] .rail__toggle { display: inline-flex; }
  .rail[data-mode="split"] .rail__nav {
    position: absolute; top: calc(100% + var(--sc-2)); left: 50%; transform: translateX(-50%);
    min-width: 15rem; padding: var(--sc-4); background: var(--hangar);
    border: 1px solid color-mix(in oklab, var(--ink-on-dark) 18%, transparent);
    border-radius: var(--sc-r-sm); box-shadow: var(--sc-e3);
  }
  .rail[data-mode="split"] .rail__links { display: grid; gap: var(--sc-3); }
  .rail[data-mode="split"]:not(.is-open) .rail__nav { display: none; }
  .rail[data-mode="split"] .rail__cta .button { min-height: 2.5rem; }
  /* Without JavaScript the toggle cannot work, so the list is simply shown. */
  html:not(.js) .rail[data-mode="split"] .rail__nav { display: block; position: static; transform: none; box-shadow: none; border: 0; padding: 0; background: none; }
  html:not(.js) .rail[data-mode="split"] .rail__links { display: flex; gap: var(--sc-4); }

  .has-margin-rail .doc { margin-left: var(--rail-w); }
}

/* phones: one top bar in every mode */
@media (max-width: 860px) {
  .rail {
    inset: 0 0 auto 0; height: var(--bar-h);
    display: flex; align-items: center; gap: var(--sc-3);
    padding: 0 var(--sc-gutter);
    background: var(--hangar); color: var(--ink-on-dark);
    --sc-ink-soft: var(--ink-soft-dark); --sc-accent: var(--orange);
    border-bottom: 1px solid color-mix(in oklab, var(--ink-on-dark) 14%, transparent);
  }
  .rail__chapter { display: none; }
  .rail__mark { margin-right: auto; }
  .rail__toggle { display: inline-flex; }
  .rail__cta .button { min-height: 2.5rem; padding: 0 var(--sc-4); }
  .rail__nav {
    position: absolute; inset: var(--bar-h) 0 auto 0;
    padding: var(--sc-5) var(--sc-gutter) var(--sc-6); background: var(--hangar);
    border-bottom: 1px solid color-mix(in oklab, var(--ink-on-dark) 14%, transparent);
  }
  .rail:not(.is-open) .rail__nav { display: none; }
  .rail__links { display: grid; gap: var(--sc-4); font-size: var(--sc-t-base); }
  html:not(.js) .rail { position: static; height: auto; flex-wrap: wrap; padding-block: var(--sc-3); }
  html:not(.js) .rail__nav { display: block; position: static; padding: 0; border: 0; }
  html:not(.js) .rail__links { display: flex; flex-wrap: wrap; gap: var(--sc-3); }
  .doc { padding-top: var(--bar-h); }
  html:not(.js) .doc { padding-top: 0; }
}
.rail__toggle {
  align-items: center; min-height: 2.5rem; padding: 0 var(--sc-3);
  background: none; color: inherit; border: 1px solid color-mix(in oklab, currentColor 30%, transparent);
  border-radius: var(--sc-r-sm); cursor: pointer; font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase;
}

/* ================================================================= SPLIT ==
   The two grounds side by side. Each split section paints both halves, so
   consecutive split acts read as one continuous division.                  */
.split { background: linear-gradient(90deg, var(--hangar) 0 50%, var(--paper) 50% 100%); position: relative; }
.split__stage { display: grid; grid-template-columns: 1fr 1fr; }
/* Never set `position` on a stage the engine pins: .sc-stage makes it sticky, and a
   same-specificity rule later in the cascade silently unpins it (the act then
   scrolls away while its cues play to nobody). Only stages the engine has NOT
   claimed (JavaScript off) need an anchor for their absolute children. */
.split__stage:not(.sc-stage) { position: relative; }
.split__half { position: relative; overflow: clip; }
.split__half--abundant {
  --sc-canvas: var(--hangar); --sc-ink: var(--ink-on-dark); --sc-ink-soft: var(--ink-soft-dark);
  --sc-accent: var(--orange); background: var(--hangar); color: var(--ink-on-dark);
}
.split__half--scarce {
  --sc-canvas: var(--paper); --sc-ink: var(--ink); --sc-ink-soft: var(--ink-soft-paper);
  --sc-accent: var(--orange-deep); background: var(--paper); color: var(--ink);
}
.divider {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; z-index: 30;
  background: color-mix(in oklab, var(--blueprint) 70%, var(--paper));
  pointer-events: none;
}
.side-label {
  position: absolute; top: calc(var(--sc-4) + 3.5rem); z-index: 31;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide);
  text-transform: uppercase; margin: 0; pointer-events: none;
}
.side-label--abundant { right: calc(50% + var(--sc-4)); color: var(--ink-soft-dark); }
.side-label--scarce { left: calc(50% + var(--sc-4)); color: var(--ink-soft-paper); }

@media (max-width: 860px) {
  .split { background: linear-gradient(180deg, var(--hangar) 0 50%, var(--paper) 50% 100%); }
  .split__stage { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .divider { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
  .side-label--abundant { right: auto; left: var(--sc-gutter); top: calc(var(--bar-h) + var(--sc-3)); }
  .side-label--scarce { left: var(--sc-gutter); top: calc(50% + var(--sc-3)); }
}

/* ================================================================== HERO == */
.hero .split__stage { height: 100vh; height: 100svh; }
.hero .layer {
  position: absolute; inset: -8% -4%; width: 108%; height: 116%; max-width: none;
  object-fit: cover; pointer-events: none;
}
.hero .layer--far { z-index: 0; }
.hero .layer--near { z-index: 2; }
.hero .layer--haze {
  z-index: 1; inset: 0; width: 100%; height: 100%;
  background: radial-gradient(90% 60% at 30% 70%, color-mix(in oklab, #7d8da3 14%, transparent), transparent 70%);
}
.hero .layer--fg { z-index: 3; }
/* The scarce half carries the one clip, so its stage media fills that half only. */
.hero .split__half--scarce { background: #0b0a09; color: var(--ink-on-dark); --sc-canvas: #0b0a09; --sc-ink: var(--ink-on-dark); --sc-ink-soft: var(--ink-soft-dark); --sc-accent: var(--orange); }
/* The hero band is deeper than the engine default: the real plates carry specular
   highlights (rule edge, bracket edges, lamp interior) exactly where the two
   headline lines sit, so the band holds ~80% canvas through the type zone and
   releases above it. Measured on the composited page by the harness. */
.hero__scrim {
  z-index: 4;
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 90%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 80%, transparent) 48%,
    color-mix(in oklab, var(--sc-canvas) 45%, transparent) 64%,
    transparent 80%);
}
/* Both hero halves are dark, so the scarce side label takes the dark-ground ink here. */
.hero .side-label--scarce { color: var(--ink-soft-dark); }
/* One real <h1> across both halves: a two-column grid inside the heading, so
   agents and screen readers get a single heading while each sentence sits in
   its own half. The rest of the hero copy lives under the scarce half. */
.hero__copy {
  position: absolute; inset: 0; z-index: 20; color: var(--ink-on-dark);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto;
  padding-bottom: clamp(3rem, 10vh, 7rem);
}
.hero__title { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.hero__line {
  display: block; padding: 0 var(--sc-gutter); align-self: end;
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(2.4rem, 1.2rem + 3.6vw, 5rem);
  line-height: var(--sc-leading-none); letter-spacing: var(--sc-track-tight);
  text-wrap: balance; max-width: calc(13ch + 2 * var(--sc-gutter)); color: var(--ink-on-dark);
}
.hero__rest { grid-column: 2; grid-row: 3; display: grid; gap: var(--sc-4); padding: var(--sc-5) var(--sc-gutter) 0; }
.hero__sub { max-width: 40ch; color: color-mix(in oklab, var(--ink-on-dark) 88%, var(--hangar)); margin: 0; font-size: var(--sc-t-lg); line-height: 1.44; }
.hero__markets { margin: 0; color: var(--ink-soft-dark); }
.hero__markets span + span::before { content: " · "; }
.hero__cta { justify-self: start; }
@media (max-width: 860px) {
  .hero__copy { grid-template-columns: 1fr; grid-template-rows: 1fr auto 1fr auto auto; padding-bottom: var(--sc-5); }
  .hero__title { grid-row: 2 / span 3; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .hero__line { font-size: clamp(2rem, 1rem + 5.4vw, 2.6rem); max-width: none; }
  /* margin, not padding: the line box must end inside the abundant half, or the
     harness grades it against the scarce half's bulb halation just below the seam */
  .hero__line--a { grid-row: 1; margin-bottom: var(--sc-5); }
  .hero__line--b { grid-row: 3; }
  .hero__rest { grid-column: 1; grid-row: 5; padding-top: var(--sc-3); gap: var(--sc-3); }
  .hero__sub { font-size: var(--sc-t-base); }
  .hero__markets { display: none; }  /* four text elements max in a phone hero */
}

/* ============================================================== ARGUMENT == */
.argument .split__stage { height: 100vh; height: 100svh; }
.argument__stack { position: absolute; inset: 0; padding: calc(var(--sc-9) + 1rem) var(--sc-gutter) var(--sc-8); }
.argument__stack > * { position: absolute; left: var(--sc-gutter); right: clamp(var(--sc-gutter), 6vw, 6rem); top: 56%; translate: 0 -50%; margin: 0; }
/* The heading holds at the top while the four paragraphs cross over beneath it. */
.argument__stack > .argument__title { top: calc(var(--sc-8) + 2.5rem); translate: none; }
.argument__title { font-size: var(--sc-t-2xl); font-weight: 600; max-width: 18ch; }
.argument__para { font-size: var(--sc-t-lg); line-height: 1.5; max-width: 40ch; color: var(--sc-ink); text-wrap: pretty; }
.argument__para strong { color: var(--orange); font-weight: 600; }
.pull {
  position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); top: 50%; translate: 0 -50%;
  margin: 0;
}
.pull__big {
  font-family: var(--sc-font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(2.2rem, 1rem + 3.4vw, 4.6rem); line-height: 0.96; letter-spacing: -0.03em; margin: 0;
}
.pull__big span { display: block; }
.pull__big span:last-child { color: var(--orange-deep); }
.pull__foot { margin-top: var(--sc-5); max-width: 32ch; }
@media (max-width: 860px) {
  .argument__stack { padding: var(--sc-6) var(--sc-gutter); }
  /* Phones: the heading sits under the bar; the crossing paragraphs sit below it. */
  .argument__stack > * { top: calc(var(--bar-h) + 7rem); translate: none; right: var(--sc-gutter); }
  .argument__stack > .argument__title { top: calc(var(--bar-h) + var(--sc-5)); }
  .argument__title { font-size: var(--sc-t-xl); }
  .argument__para { font-size: var(--sc-t-sm); line-height: 1.5; }
  .pull { top: 55%; }
  .pull__big { font-size: clamp(1.8rem, 1rem + 5vw, 2.6rem); }
}

/* =============================================================== SILENCE == */
.silence { min-height: 80vh; min-height: 80svh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.silence__text {
  grid-column: 1; justify-self: end; text-align: right;
  max-width: 34ch; margin: 0; padding-right: clamp(var(--sc-5), 4vw, var(--sc-8));
  color: var(--ink-on-dark); font-size: var(--sc-t-lg); line-height: 1.5;
}
.silence .divider { background: color-mix(in oklab, var(--blueprint) 70%, var(--paper)); }
@media (max-width: 860px) {
  .silence { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; min-height: 90svh; }
  .silence__text { grid-row: 1; justify-self: start; text-align: left; align-self: end; padding: 0 var(--sc-gutter) var(--sc-6); }
}

/* ============================================================= MIGRATION ==
   The peak. Items from the chosen industry start on the scarce side and the
   abundant ones travel across the divider, one at a time; then the paper side
   sweeps the page. Geometry comes from two hidden "ghost" layouts (start and
   end); home.js moves the visible items between them from the act's progress. */
.migration .split__stage { height: 100vh; height: 100svh; }
.migration__head {
  position: absolute; z-index: 25; left: calc(50% + var(--sc-gutter) * 0.6); right: var(--sc-gutter);
  top: calc(var(--sc-8) + 1.5rem); color: var(--ink);
}
.migration__title { font-size: var(--sc-t-xl); font-weight: 600; max-width: 22ch; margin: 0; }
.migration__intro { margin: var(--sc-3) 0 0; max-width: 46ch; color: var(--ink-soft-paper); font-size: var(--sc-t-sm); }
.picker { display: flex; flex-wrap: wrap; gap: var(--sc-2); margin-top: var(--sc-4); }
.picker__btn {
  min-height: 2.5rem; padding: 0 var(--sc-3); cursor: pointer;
  background: transparent; color: var(--ink); border: 1px solid color-mix(in oklab, var(--blueprint) 45%, transparent);
  border-radius: var(--sc-r-sm); font-size: var(--sc-t-sm);
  transition: background-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out);
}
.picker__btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.picker__btn:active { transform: translateY(1px); }

.migration__voice {
  position: absolute; z-index: 25; left: var(--sc-gutter); right: calc(50% + var(--sc-gutter) * 0.6);
  top: calc(var(--sc-8) + 1.5rem); margin: 0; color: var(--ink-soft-dark); font-size: var(--sc-t-sm);
  max-width: 40ch;
}
.migration__voice b { display: block; font-weight: 500; color: var(--ink-on-dark); margin-bottom: var(--sc-2); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: var(--sc-track-wide); text-transform: uppercase; }

/* ghost layouts: invisible, only measured */
.bins { position: absolute; inset: 0; pointer-events: none; }
.bin { position: absolute; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-3); }
.bin--ghost { visibility: hidden; }
.bin--abundant { left: var(--sc-gutter); right: calc(50% + var(--sc-gutter) * 0.6); bottom: var(--sc-8); }
.bin--scarce { left: calc(50% + var(--sc-gutter) * 0.6); right: var(--sc-gutter); bottom: var(--sc-8); }
.item {
  font-size: var(--sc-t-base); line-height: 1.4; padding: var(--sc-3) var(--sc-4);
  border-left: 1px solid color-mix(in oklab, var(--blueprint) 55%, transparent);
  max-width: 34rem;
}
.item--abundant { font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); text-transform: uppercase; letter-spacing: 0.04em; }
/* visible movers, absolutely placed by home.js */
.movers { position: absolute; inset: 0; z-index: 26; pointer-events: none; list-style: none; margin: 0; padding: 0; }
.mover { position: absolute; left: 0; top: 0; margin: 0; will-change: transform; color: var(--ink); }
.mover.is-abundant { transition: color 240ms var(--sc-ease-out); }
.mover.is-over { color: var(--ink-on-dark); border-left-color: color-mix(in oklab, var(--ink-on-dark) 30%, transparent); }

/* the sweep: the paper ground takes the page; the abundant side leaves left */
.sweep-paper {
  position: absolute; inset: 0; z-index: 24; background: var(--paper); pointer-events: none;
  clip-path: inset(0 0 0 calc(50% * (1 - var(--sweep, 0))));
}
.migration .split__half--abundant { transform: translateX(calc(-100% * var(--sweep, 0))); }
/* Everything that belongs to the abundant side leaves with it. The movers use the
   `translate` property so it stacks on the per-frame `transform` home.js writes. */
.migration .mover.is-over { translate: calc(-50vw * var(--sweep, 0)) 0; opacity: calc(1 - var(--sweep, 0)); }
.migration__voice, .migration .side-label { opacity: calc(1 - var(--sweep, 0) * 1.6); }
.migration .divider { transform: translateX(calc(-50vw * var(--sweep, 0) + var(--rail-w) * var(--sweep, 0))); }
.migration__after {
  position: absolute; z-index: 27; left: calc(var(--rail-w) + var(--sc-gutter)); right: var(--sc-gutter);
  top: 50%; translate: 0 -50%; margin: 0; opacity: var(--after, 0);
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-2xl);
  line-height: 1.02; letter-spacing: var(--sc-track-snug); max-width: 20ch; color: var(--ink);
}

/* The accessible, agent-readable source: all three industries as plain content.
   Visible as a normal section without JavaScript; visually hidden (but still read
   by screen readers and present in the HTML) when the animated stage runs. */
.industries { padding: var(--sc-section) var(--sc-gutter); display: grid; gap: var(--sc-8); background: var(--paper); color: var(--ink); }
.industries__head { max-width: var(--doc-measure); }
.industry { display: grid; gap: var(--sc-4); max-width: var(--doc-wide); }
.industry h3 { margin: 0; font-size: var(--sc-t-xl); font-weight: 600; }
.industry__voice { margin: 0; max-width: 60ch; color: var(--ink-soft-paper); }
.industry__lists { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--sc-6); }
.industry__lists h4 { margin: 0 0 var(--sc-2); }
.industry__lists ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--sc-2); }
html.js .migration .industries { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 860px) {
  /* Phones: heading and picker run across the top of the dark half; the abundant
     items gather at the bottom of the dark half, the scarce ones on the paper half.
     The voice line and side labels are dropped here (the voice is in the content). */
  .migration__head { left: var(--sc-gutter); right: var(--sc-gutter); top: calc(var(--bar-h) + var(--sc-4)); color: var(--ink-on-dark); }
  .migration__title { font-size: var(--sc-t-lg); max-width: none; }
  .migration__intro, .migration__voice, .migration .side-label { display: none; }
  .picker { margin-top: var(--sc-3); gap: var(--sc-2); }
  .picker__btn { min-height: 2.25rem; padding: 0 var(--sc-2); font-size: var(--sc-t-xs); color: var(--ink-on-dark); border-color: color-mix(in oklab, var(--ink-on-dark) 35%, transparent); }
  .picker__btn[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
  .bin--abundant { left: var(--sc-gutter); right: var(--sc-gutter); bottom: calc(50% + var(--sc-3)); gap: var(--sc-1); }
  .bin--scarce { left: var(--sc-gutter); right: var(--sc-gutter); bottom: var(--sc-4); gap: var(--sc-1); }
  .item { padding: var(--sc-1) var(--sc-3); font-size: var(--sc-t-sm); line-height: 1.35; }
  .item--abundant { font-size: var(--sc-t-xs); }
  .sweep-paper { clip-path: inset(calc(50% * (1 - var(--sweep, 0))) 0 0 0); }
  .migration .split__half--abundant { transform: translateY(calc(-100% * var(--sweep, 0))); }
  .migration .divider { transform: translateY(calc(-50svh * var(--sweep, 0))); }
  .migration .mover.is-over { translate: 0 calc(-50svh * var(--sweep, 0)); }
  /* On phones the heading lives on the dark half, so it leaves with it. */
  .migration__head { translate: 0 calc(-50svh * var(--sweep, 0)); opacity: calc(1 - var(--sweep, 0) * 1.6); }
  .migration__after { left: var(--sc-gutter); font-size: var(--sc-t-xl); }
  .industry__lists { grid-template-columns: 1fr; }
}

/* =================================================================== DOC ==
   After the sweep: one column on paper beside the margin rail.             */
.doc { position: relative; }
.chapter { padding: var(--sc-section) var(--sc-gutter); }
.chapter + .chapter { border-top: 1px solid var(--hairline); }
.chapter__inner { max-width: var(--doc-wide); }
.chapter h2 {
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-2xl);
  line-height: 1.02; letter-spacing: var(--sc-track-snug); margin: 0; max-width: 20ch; text-wrap: balance;
}
.chapter h3 { font-size: var(--sc-t-lg); font-weight: 600; margin: 0; letter-spacing: var(--sc-track-snug); }
.prose { max-width: var(--doc-measure); }
.prose p { margin: 0; text-wrap: pretty; }
.prose > * + * { margin-top: var(--sc-4); }
/* The mono credential line (MBA, city) sits a step further from the prose above it (owner note, 2026-09-30). */
.prose p.label { margin-top: var(--sc-6); }
.prose .lede { font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink); }
.chapter__head { display: grid; gap: var(--sc-5); margin-bottom: var(--sc-8); }
.dim { color: var(--sc-ink-soft); }

/* protocol */
.principles { display: grid; gap: var(--sc-7); }
.principle { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: var(--sc-6); padding-top: var(--sc-5); border-top: 1px solid var(--hairline); }
.principle__body { margin: 0; max-width: 52ch; }
.principle__tags { list-style: none; margin: var(--sc-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-4); }
.protocol__spread { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sc-8); align-items: start; }
.protocol__figure { margin: 0; position: sticky; top: var(--sc-8); }
.protocol__figure img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; box-shadow: var(--sc-e2); }
@media (max-width: 860px) {
  .principle { grid-template-columns: 1fr; gap: var(--sc-3); }
  .protocol__spread { grid-template-columns: 1fr; }
  .protocol__figure { position: static; max-width: 22rem; }
}

/* offer: a ledger, not a card grid */
.ledger { display: grid; }
.ledger__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--sc-7); padding: var(--sc-6) 0; border-top: 1px solid var(--hairline); }
.ledger__row:last-child { border-bottom: 1px solid var(--hairline); }
.ledger__name { display: grid; gap: var(--sc-3); align-content: start; }
.ledger__detail ul { margin: var(--sc-3) 0 0; padding-left: 1.1em; display: grid; gap: var(--sc-2); }
.ledger__detail p { margin: 0; }
.ledger__best { margin-top: var(--sc-4) !important; color: var(--sc-ink-soft); }
.anchor-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-5); margin-top: var(--sc-7); }
.anchor-line p { margin: 0; font-size: var(--sc-t-lg); font-weight: 600; }
@media (max-width: 860px) { .ledger__row { grid-template-columns: 1fr; gap: var(--sc-4); } }

/* person */
.person { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--sc-8); align-items: start; }
.person__figure { margin: 0; position: sticky; top: var(--sc-8); }
.person__frame { overflow: hidden; box-shadow: var(--sc-e2); }
.person__frame img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; scale: 1.06; }
.person__figure figcaption { margin-top: var(--sc-3); }
.identity { font-size: var(--sc-t-lg); line-height: 1.45; font-weight: 500; border-left: 2px solid var(--orange); padding-left: var(--sc-4); margin: 0; }
.facts { list-style: none; margin: var(--sc-6) 0 0; padding: var(--sc-5) 0 0; border-top: 1px solid var(--hairline); display: grid; gap: var(--sc-2); }
@media (max-width: 860px) {
  .person { grid-template-columns: 1fr; gap: var(--sc-6); }
  .person__figure { position: static; max-width: 18rem; }
}

/* testimonials */
.quotes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sc-7) var(--sc-6); }
.quote { margin: 0; display: grid; gap: var(--sc-4); align-content: start; }
.quote:nth-child(1) { grid-column: 1 / span 7; }
.quote:nth-child(2) { grid-column: 6 / span 7; }
.quote:nth-child(3) { grid-column: 1 / span 8; }
.quote blockquote { margin: 0; font-size: var(--sc-t-lg); line-height: 1.5; text-wrap: pretty; }
.quote figcaption { display: grid; gap: var(--sc-1); }
.quote__name { font-weight: 600; }
@media (max-width: 860px) { .quote:nth-child(n) { grid-column: 1 / -1; } }

/* book + form */
.book { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: var(--sc-8); align-items: start; }
.book__cover { margin: 0; }
.book__cover img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: var(--sc-e3); }
.book__subtitle { font-size: var(--sc-t-lg); color: var(--sc-ink-soft); margin: var(--sc-3) 0 0; max-width: 36ch; }
.book__inside { margin: var(--sc-3) 0 0; padding-left: 1.1em; display: grid; gap: var(--sc-2); }
.signup {
  margin-top: var(--sc-7); padding: var(--sc-6); background: var(--hangar); color: var(--ink-on-dark);
  --sc-ink: var(--ink-on-dark); --sc-ink-soft: var(--ink-soft-dark); --sc-accent: var(--orange); --hairline: color-mix(in oklab, var(--ink-on-dark) 16%, transparent);
  box-shadow: var(--sc-e2), var(--sc-edge);
}
.signup h3 { font-size: var(--sc-t-xl); }
.signup p { margin: var(--sc-3) 0 0; max-width: 56ch; color: var(--sc-ink-soft); }
.form { margin-top: var(--sc-5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4); max-width: 40rem; }
.field { display: grid; gap: var(--sc-2); }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: var(--sc-t-sm); color: var(--ink-on-dark); }
.field input {
  min-height: 3rem; padding: 0 var(--sc-3); border-radius: var(--sc-r-sm);
  background: color-mix(in oklab, var(--hangar) 70%, black); color: var(--ink-on-dark);
  border: 1px solid color-mix(in oklab, var(--ink-on-dark) 28%, transparent);
}
.field input:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.field input[aria-invalid="true"] { border-color: var(--orange); }
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__verify { grid-column: 1 / -1; min-height: 65px; }
.form__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4); }
.form__status { grid-column: 1 / -1; margin: 0; min-height: 1.5em; color: var(--ink-on-dark); }
.form__status[data-tone="error"] { color: #FFB199; }
.form__fine { grid-column: 1 / -1; font-size: var(--sc-t-sm); }
@media (max-width: 860px) {
  .book { grid-template-columns: 1fr; gap: var(--sc-6); }
  .book__cover { max-width: 14rem; }
  .form { grid-template-columns: 1fr; }
  .signup { padding: var(--sc-5); }
}

/* faq */
.faq { display: grid; max-width: var(--doc-wide); }
.faq details { border-top: 1px solid var(--hairline); }
.faq details:last-child { border-bottom: 1px solid var(--hairline); }
.faq summary {
  display: flex; justify-content: space-between; gap: var(--sc-4); align-items: baseline;
  padding: var(--sc-5) 0; cursor: pointer; list-style: none; font-weight: 600; font-size: var(--sc-t-lg);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sc-font-mono); color: var(--sc-accent); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 var(--sc-5); max-width: 64ch; }

/* speaking door */
.door { display: grid; gap: var(--sc-4); max-width: var(--doc-measure); }
.door p { margin: 0; }

/* close */
.close .sc-stage { display: grid; align-content: center; }
.close__block { padding: 0 var(--sc-gutter); display: grid; gap: var(--sc-4); max-width: calc(var(--doc-measure) + 2 * var(--sc-gutter)); }
.close__title { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-3xl); line-height: 0.98; letter-spacing: var(--sc-track-tight); margin: 0; max-width: 16ch; text-wrap: balance; }
.close__block p { margin: 0; max-width: 56ch; }
.close__block .button { justify-self: start; margin-top: var(--sc-3); }
.footer {
  position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: var(--sc-5);
  display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
}
.footer a { color: inherit; }
.footer--page { position: static; padding: var(--sc-6) var(--sc-gutter); border-top: 1px solid var(--hairline); }
@media (max-width: 860px) {
  .close__title { font-size: var(--sc-t-2xl); }
  .footer { position: static; margin-top: var(--sc-7); padding: 0 var(--sc-gutter); }
}

/* ======================================================= STUDIO / SPEAKING ==
   Pages that open already swept: margin rail and one column.               */
.page-title { padding: calc(var(--sc-section) * 0.8) var(--sc-gutter) var(--sc-section); }
.page-title__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sc-8); align-items: end; max-width: var(--doc-wide); }
/* Two lines at most (taste floor): one step down from the hero size, wider column. */
.page-title h1 {
  font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-3xl);
  line-height: 0.94; letter-spacing: var(--sc-track-tight); margin: var(--sc-4) 0 0; text-wrap: balance;
}
.page-title__lede { font-size: var(--sc-t-lg); line-height: 1.5; margin: var(--sc-5) 0 0; max-width: 44ch; }
.page-title__media { margin: 0; position: relative; overflow: hidden; box-shadow: var(--sc-e3); }
.page-title__media img { width: 100%; height: auto; object-fit: cover; }
.page-title__media .media-back { aspect-ratio: 3 / 4; scale: 1.08; }
.page-title__media .media-front { position: absolute; inset: auto 8% 8% auto; width: 58%; box-shadow: var(--sc-e3); }
.quote-line { margin: var(--sc-6) 0 0; padding-left: var(--sc-4); border-left: 2px solid var(--orange); max-width: 46ch; }
.quote-line p { margin: 0; font-size: var(--sc-t-lg); line-height: 1.45; }
.quote-line footer { margin-top: var(--sc-2); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.topics { display: grid; }
.topic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--sc-7); padding: var(--sc-6) 0; border-top: 1px solid var(--hairline); }
.topic:last-child { border-bottom: 1px solid var(--hairline); }
.topic p { margin: 0; }
.topic__sub { color: var(--sc-ink-soft); margin-top: var(--sc-2) !important; }
.topic__formats { margin-top: var(--sc-3) !important; }
@media (max-width: 860px) {
  .page-title__grid { grid-template-columns: 1fr; gap: var(--sc-6); }
  .page-title h1 { font-size: var(--sc-t-3xl); }
  .topic { grid-template-columns: 1fr; gap: var(--sc-3); }
}

/* =============================================================== UTILITY == */
.utility__main { padding: calc(var(--sc-section) * 0.8) var(--sc-gutter); max-width: calc(var(--doc-measure) + 2 * var(--sc-gutter)); display: grid; gap: var(--sc-4); }
.utility__main h1 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-2xl); line-height: 1.02; letter-spacing: var(--sc-track-snug); margin: 0; }
.utility__main p { margin: 0; }
/* The unsubscribe confirm page is rendered by the function with inline fallback
   styles; these win once this stylesheet loads. */
body.utility { max-width: none !important; margin: 0 !important; padding: 0 !important; font-family: var(--sc-font-text) !important; }

/* ======================================================== REDUCED MOTION == */
@media (prefers-reduced-motion: reduce) {
  .rail, .button, .picker__btn { transition: none; }
  .person__frame img, .page-title__media .media-back { scale: 1; }
}