/* convey · skins/v2-paper/skin.css
   V2 "paper": the quiet version. White page, hairlines, Inter 400 and
   500 only, 18px body, square corners, no card borders, no glow. Built
   against World B: prototype-v5/index.html + skin.css (see that file
   for the source values copied below: --ink #111, --grey #6f6f6f,
   --line #e6e6e6, --blue #2966F3, 18px/1.45 body, tight heading
   tracking). Numbers are Inter at the same weight as everything else,
   not a mono face; that is V1's trait, not this one.

   Light theme only: skins/v2-paper/skin.json carries only "fonts" (no
   "hasDark" key), so build.py never sets data-has-dark on <body> and the
   dark toggle in the menu panel stays hidden (engine.css already gates
   it on [data-has-dark]). Nothing below declares a dark palette on
   purpose.

   Per ENGINE-README.md, a skin is free to write any CSS, not only the
   documented variables; a handful of rules below override engine.css
   selectors directly where the shared primitive (a hardcoded border-
   radius, a pill button, a tinted card fill) does not match this skin's
   restraint. Each is called out. See README.md for the full variable
   list and the reasoning behind the one red; see NEEDS.md for the
   engine gaps this skin works around (two of them in loader.js, not
   here) and for what the full QA sweep's fix list already resolved
   upstream before this file's "Polish round" section below was written.
*/
/* Fonts load from skin.json ("fonts") through a non-blocking link in base.html, never an @import here: an @import blocks the first frame until Google answers. */

:root {
  /* the ten (CONTRACT.md / ENGINE-README.md) */
  --bg: #ffffff;
  --ink: #111111;
  --ink-soft: #6f6f6f;
  --accent: #2966f3; /* the one flat accent: bullets, hover states, the referee's recorded number. No glow, never a shadow. */
  --rule: #e6e6e6;
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* no mono face in V2; every number is Inter 400, same as the prose around it */
  --radius: 0; /* square corners everywhere; a few engine.css selectors hardcode a radius instead of reading this, zeroed below */
  --weight-display: 400; /* headings and numbers sit at the same weight as body copy */

  /* extras engine.css reads, with safe fallbacks if left alone */
  --weight-body: 400;
  --case-display: none;
  --tracking-display: -0.03em;
  --tracking-body: -0.005em;
  --card: #f3f3f1; /* menu-toggle hover, media placeholders, form field fill: a hint of tint, never a border */
  --card-2: #f7f7f5;
  --focus-ring: var(--accent);
  --good: #ff5a3c; /* the one red. Reused, not reinvented: the live dot, the wordmark's period (below) and the eye mark's pupil (mark.svg) are the same dot. See marks/RECOMMENDATION.md. */
}

/* ---------- base type: 18px body, tighter line-height than the engine default ---------- */
body {
  font-size: 18px;
  line-height: 1.45;
}

/* ---------- the uppercase micro-label family: 13px / weight 500. Everything else on the page is 400. ----------
   Selectors here match engine.css's own prefixes exactly (`.board
   .board-head`, not bare `.board-head`; `.wcard .wcard-nums .k`, not
   `.wcard .k`; etc.), not just engine's class names. Several of these
   are more specific than they look in engine.css (three classes deep in
   a couple of cases), and a shorter version of the same selector loses
   the cascade silently despite matching - the exact `:has()` footgun
   found earlier in this file, found again here by measuring computed
   font-size directly rather than assuming a listed selector had taken
   effect (it had not, for five of these, until matched to engine's
   actual prefix). */
.eyebrow,
.type-small,
.board .board-head,
.board .tile .k,
.board .tab-grid .tab-label,
.wcard .wcard-nums .k,
.people-card .people-role,
.site-form label,
.archive-row summary .archive-sub,
.site-footer .foot-h,
.menu-panel nav a,
.menu-panel .panel-sub a,
.btn {
  font-size: 13px;
  font-weight: 500;
}

/* ---------- no load-time color flash on .btn / .menu-panel / .menu-toggle / .skip-link ----------
   engine.css puts a `transition` on each of these four selectors'
   unconditional base rule, and all four are matched by static markup
   (present in the HTML from the first parse, not added by JS later).
   Measured directly (Playwright, computed styles at t+0/100/300ms
   after `load`): the browser treats the stylesheet's first application
   to these elements as a style CHANGE from the UA default (an <a>'s
   default link-blue text and transparent fill, an unpositioned
   .skip-link, .menu-panel's implicit opacity:1) to the authored
   resting state, and because a `transition` is part of that same
   change, it animates instead of snapping - a real, visible flash
   (confirmed: the primary CTA pill renders pale with a blue border and
   blue text for roughly a quarter second before settling to solid
   black; the menu panel briefly shows faint, readable nav text in the
   corner before fading to opacity 0). Confirmed shared, not specific to
   this skin, by reproducing it identically against skins/_default.
   engine.js's OWN reveal system (the [data-reveal-ready="true"] .rv
   rule in engine.css) already avoids exactly this trap by gating its
   transition behind an attribute JS adds after the fact; these four did
   not get the same treatment, and a skin cannot add that gate without
   editing engine.css or engine.js, both out of bounds here. Removing
   the transition outright is also simply correct for this skin: World
   B's own buttons and panels do not fade on state change at all
   (prototype-v5 defines no hover-transition CSS whatsoever), so this is
   fidelity to source, not just a bug workaround. */
.btn,
.menu-panel,
.menu-toggle,
.skip-link {
  transition: none;
}

/* ---------- square corners where engine.css hardcodes a radius instead of reading --radius ---------- */
.btn,
.menu-panel,
.board .tab-grid img,
.site-form input,
.site-form select,
.site-form textarea,
.skip-link {
  border-radius: 0;
}

/* ---------- the button: solid black (the one other place black appears, besides the film frame below); no color shift on press, just a touch of fade ---------- */
.btn.solid:hover {
  background: var(--ink);
  border-color: var(--ink);
  opacity: 0.85;
}
/* the secondary hero action ("See the work", "All work", "How we work"...)
   reads as an underlined word, not a second pill: World B never shows
   two bordered buttons side by side (prototype-v5's own secondary link,
   .lnk, is exactly this). */
.btn:not(.solid) {
  height: auto;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: none;
  text-transform: none;
  letter-spacing: var(--tracking-body);
}
.btn:not(.solid):hover {
  background: none;
  color: var(--accent);
  border-color: var(--accent);
}

/* the secondary action after a hero's URL form (home, /read): a
   different markup path than the two-button hero above (no .hero-
   actions, no .btn at all here; see templates/sections/hero.html's
   {% if section.form %} branch) but the same quiet, underlined-word
   treatment, so the two patterns read as one visual language rather
   than two. The class name is the template's own ("link-arrow"); the
   trailing arrow is the one bit of decoration its name asks for, static
   per this skin's no-glow rule (no hover slide). */
.hero-secondary {
  margin-top: 2px;
}
.hero-secondary .link-arrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.hero-secondary .link-arrow::after {
  content: " \2192";
}
.hero-secondary .link-arrow:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ---------- the wordmark: room for the mark glyph loader.js injects, and the one red period ---------- */
.wordmark {
  gap: 8px;
}
.wordmark i {
  color: var(--good);
}
.wordmark .mk {
  color: var(--ink);
  flex: 0 0 auto;
}

/* ---------- hero: a quieter display size than the engine default (prototype-v5's own clamp), type first, nothing printed over a store ---------- */
.type-hero {
  font-size: clamp(38px, 5.6vw, 80px);
}

/* the bakery's (or any brand's) desktop film, when a hero sets film_url:
   a hairline 16:9 frame, black fill (the film frame is the other place
   black appears), a centered 135%-width crop on phones so a 16:9 source
   still reads as a cropped 4:3 rather than letterboxing. No object-fit
   on <video>, per CONTRACT.md; the crop is done by sizing the video
   itself inside an overflow:hidden frame, same as prototype-v5. */
.hero-media {
  max-width: none;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
  background: #000;
}
.hero-media video {
  top: 50%;
  width: 135%;
  left: -17.5%;
  transform: translateY(-50%);
}
@media (min-width: 700px) {
  .hero-media {
    aspect-ratio: 16 / 9;
  }
  .hero-media video {
    width: 100%;
    left: 0;
  }
}

/* ---------- the board: pure white and unframed per tile (engine.css already gives tiles no border of their own; this only removes the tinted --card wash the outer wrapper would otherwise show) ---------- */
.board {
  background: var(--bg);
}
.board .tile .v {
  font-variant-numeric: tabular-nums;
}

/* ---------- the referee's big numbers: tabular alignment, same as the board and the cards (engine.css's .type-mono utility already carries this; .referee-num does not use that utility class, so it is added here) ---------- */
.sec-referee .referee-num {
  font-variant-numeric: tabular-nums;
}

/* ---------- cards (work index, about): no card borders. The image is the only edge; the 16px grid gap is the only separation. ---------- */
.wcard,
.people-card {
  background: none;
  border: 0;
}

/* the launch films on /work (assets/film/clip-*.mp4) are full phone-
   screen recordings, 720x1560 (confirmed directly: video.videoWidth /
   videoHeight, not assumed). engine.css's .wcard-media is a 4:3 box,
   which is for a landscape/desktop asset; cropped to 4:3 a portrait
   720x1560 film shows only its top ~34% (measured: a 344px-wide card
   renders the video's own box at width:100%/height:auto per CONTRACT's
   no-object-fit rule, i.e. 344x746, inside a 344x258 4:3 window), which
   on these specific clips is the status bar and the very top of the
   page, not the store. Scoped to :has(video) rather than the whole
   class, so a future image-only work card (no current one exists) is
   not forced into a portrait frame it was never shot for; desktop hero
   films (hero-sa.mp4, hero-rb.mp4, via .hero-media above) are a
   different, landscape asset and are unaffected by this rule.

   Selector note: `.wcard .wcard-media:has(video)`, matching engine.css's
   own `.wcard .wcard-media` prefix, not just `.wcard-media:has(video)`.
   :has()'s specificity is *replaced by* the specificity of its argument
   (here, `video`, a single type selector), not added on top of it, so a
   bare `.wcard-media:has(video)` is (0,1,1), LOWER than engine.css's
   (0,2,0) and silently loses the cascade despite matching (confirmed
   empirically: computed aspect-ratio stayed 4/3 until this prefix was
   added). */
.wcard .wcard-media:has(video) {
  aspect-ratio: 9 / 19.5; /* matches the 720x1560 source films exactly */
}

/* ========================================================================
   Polish round, from the full QA sweep (final/qa/QA-v2-paper.md). Items
   below are numbered to match the coordinator's fix list. Each is this
   skin's job per that list's "owner" column; nothing here touches
   engine/, templates/ or content/.
   ======================================================================== */

/* ---------- 1. the footer wordmark: always lowercase "convey.", never caps ----------
   templates/base.html's .foot-bottom wraps the wordmark span, and
   engine.css sets `.foot-bottom { text-transform: uppercase }` for the
   legal line beside it ("FORWARD DEPLOYED LABS LLC..."). The wordmark
   inherits that transform and renders "CONVEY." even though its text is
   lowercase. The header and menu-panel wordmarks sit outside any
   uppercase ancestor and were already correct; only this one needed
   resetting. */
.foot-bottom .wordmark {
  text-transform: none;
}

/* .foot-h (the footer's h3; was h5, moved for A6's heading-order fix)
   needed no rule here after all: engine.css grew its own `.site-footer
   h5, .site-footer .foot-h { font-size: 11px; ...; color: var(--ink-
   soft); font-weight: var(--weight-body); }` between this skin's first
   draft and this polish pass, and every value in it already reads
   through this skin's own tokens correctly. The only two properties
   this skin wants different (13px, weight 500, not 11px/400) are set
   below, in the micro-label family, matched to engine's actual
   `.site-footer .foot-h` prefix so they actually win the cascade. */

/* ---------- 2. form accessibility: border, placeholder, success color, real focus ring ----------
   Measured in the sweep: field border #e6e6e6 on #f3f3f1 = 1.12:1 (needs
   3:1); WebKit's default placeholder grey = 2.12:1 (needs 4.5:1); the
   success message in --good, #ff5a3c on white = 3.10:1 (needs 4.5:1);
   engine.css's `.site-form input { outline: none }` is more specific
   than the shared `:focus-visible` rule, so focus was a 1px border
   change only. All four fixed here, all four re-measured below (see the
   report's contrast table). */
.site-form input,
.site-form select,
.site-form textarea {
  border-color: var(--ink-soft); /* #6f6f6f on #f3f3f1: 4.52:1, clears the 3:1 field-boundary bar with real margin */
}
.site-form input::placeholder,
.site-form select::placeholder,
.site-form textarea::placeholder {
  color: #595959; /* computed for 4.5:1+ against --card; --ink-soft alone is only 4.52:1 (too tight a margin to trust) and --ink reads as real typed text, not a hint */
  opacity: 1; /* some engines dim placeholder color further by default on top of its own color; reset so the computed value above is the real one */
}
.site-form input:focus-visible,
.site-form select:focus-visible,
.site-form textarea:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
.site-form .form-status[data-state="ok"] {
  color: var(--ink); /* not --good: #ff5a3c on white is 3.10:1, under A1's 4.5:1 for text. --good keeps its 3:1-passing use on the live dot, a graphic, not this text. */
}

/* ---------- 3. tap targets and phone text size ----------
   The sweep counted 10 to 21 interactive elements under 44px tall per
   route on the phone (footer links at 16px, the secondary hero action /
   archive and FAQ rows at 22 to 23px) and 15 to 44 text elements under
   14px per route (this skin's own 13px micro-label family plus
   engine.css's 12.5/12/11/10.5px notes, caveats, labels and table
   headers). Text: bumped to 14px, phone only (desktop was never flagged
   and this skin's uniform 13px label system stays as designed there).
   Tap area: footer links and the underlined secondary-link pattern get
   real padding or an invisible expanded hit zone rather than visually
   inflating a 13 to 14px word into a 44px button. */
@media (max-width: 699px) {
  .eyebrow,
  .type-small,
  .board .board-head,
  .board .tile .k,
  .board .tile .why,
  .board .tab-grid .tab-label,
  .wcard .wcard-nums .k,
  .people-card .people-role,
  .site-form label,
  .site-form .form-notice,
  .archive-row summary .archive-sub,
  .archive-row .archive-detail p,
  .site-footer .foot-h,
  .site-footer li,
  .site-footer .foot-bottom,
  .menu-panel nav a,
  .menu-panel .panel-sub a,
  .btn,
  .hero-note,
  .sec-proof .proof-caveat,
  .sec-before-after .ba-states .lab,
  .sec-before-after .ba-caveat,
  .sec-table th,
  .sec-table .table-caveat {
    font-size: 14px;
  }
  /* .tile .w / .wcard-nums .w / .ba-k are excluded on purpose: the
     window line is meant to read as quieter than the number and label
     above it (see item 8 below), and 12px already clears 4.5:1 in this
     skin's --ink-soft; WCAG asks for contrast, not a point size floor. */
}
.site-footer li a {
  display: inline-block;
  padding: 11px 0; /* ~44px total with the 14px line above: real tap height, not just line-height */
}
/* the underlined secondary-link pattern (.btn:not(.solid) and
   .hero-secondary .link-arrow) stays visually small by design - that is
   the whole point of reading as a quiet word, not a button - so the
   extra 44px of tap height is added as an invisible hit zone instead of
   padding, which would push the text away from its underline. */
.btn:not(.solid),
.hero-secondary .link-arrow {
  position: relative;
}
.btn:not(.solid)::before,
.hero-secondary .link-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 44px;
  transform: translateY(-50%);
}
.faq-item summary {
  min-height: 44px;
  align-items: center;
  padding: 10px 0;
}
.archive-row summary {
  min-height: 44px; /* already padded 18px top/bottom; this is a backstop, not a visible change */
}
/* The header wordmark link (31px tall) was not named in the sweep's
   ranked list, but "links and buttons" was asked for generically and
   this is the one other real link under 44px (the footer and menu-panel
   wordmarks are <span>, not links; only the header one is clickable).
   Same invisible-hit-zone technique, same reason: the mark itself stays
   small by design. */
.site-header .wordmark {
  position: relative;
}
.site-header .wordmark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -4px;
  right: -4px;
  height: 44px;
  transform: translateY(-50%);
}

/* ---------- 4. archive images: max-width:480px (engine.css) overflows a 350px phone column when a row is opened ---------- */
.archive-row .archive-detail img {
  max-width: 100%;
}

/* ---------- 5. no empty-looking media boxes ----------
   Work cards without a film or image now render no .wcard-media box at
   all (templates/sections/cards.html's media block is conditional on
   film_url or img_url; confirmed nothing renders when both are empty,
   so "the kids' brand" and "Your store, here." need no skin treatment).
   The About people cards are different: .people-media always renders,
   and without a portrait (both Dale and Doug today) it holds
   .people-initial, a real letter, not literally empty - but at
   --card-2's very light fill (#f7f7f5, barely off white) a single large
   letter in a 4:3 box reads as "nothing here" at a glance. Framed with a
   hairline instead of left pale and borderless, same language as every
   other placeholder/frame in this skin (the hero film, the work cards'
   edge), signaling "a photo goes here" on purpose rather than looking
   unfinished. Scoped to :has(), so a real portrait (plain .people-media
   img, no border) is unaffected. */
.people-media:has(.people-initial) {
  border: 1px solid var(--rule);
}

/* ---------- 6. no synthesized bold ----------
   .item-list .item h3 ("Measurement", "Funnel", "Monday"...) is a real
   <h3> with no .type-display class and no font-weight of its own, so it
   renders at the browser's bold (700) default; only Inter 400 and 500
   are loaded, so WebKit synthesizes the missing weight. Set to this
   skin's one display weight, same as every other heading on the site,
   rather than loading a third font weight for one list. */
.item-list .item h3 {
  font-weight: var(--weight-display);
}

/* ---------- 7. hero orphans and the empty band under every hero ----------
   text-wrap: balance keeps a headline's last line from stranding one
   short word ("outcome.", "over.", "effect."); supported in this
   skin's target WebKit (confirmed: webkit-2311 reports version 26.5).
   The empty band (134 to 355px between the hero's last element and the
   next section) comes from engine.css's .sec-hero min-height (72vh,
   92vh on home) with content top-aligned and no matching bottom
   padding; own by the engine per the sweep, but nothing stops a skin
   from overriding it, and this skin's restraint is better served by a
   hero sized to its own (short, type-only) content than by reserving
   most of a viewport for it regardless of what is actually there. */
.type-display,
.hero-sub {
  text-wrap: balance;
}
.sec-hero {
  min-height: 0;
  padding-bottom: var(--space-section-tight);
}


body[data-route="/"] .sec-hero {
  min-height: 0;
  justify-content: flex-start;
  gap: 28px;
}

/* ---------- 8. the window lines (.tile .w, .wcard-nums .w, .ba-k): already on-grammar ----------
   engine.css's own rule (`.tile .w, .wcard-nums .w, .ba-k { font-size:
   12px; color: var(--ink-soft); ... }`) already matches this skin's
   muted/quiet register exactly: --ink-soft is #6f6f6f, 5.04:1 on white,
   clearing 4.5:1 with room to spare, and all three elements carry
   `.type-mono` in their templates, which this skin's --font-mono already
   redirects to Inter (see the top of this file), so there is no mono
   face to override and no color or size left to set. Nothing added. */

/* World D. V2's accessibility and layout fixes above remain the base. */
:root {
  --bg:#FBFBF6; --ink:#1A1F2E; --ink-soft:#4F5666; --accent:#2966F3;
  --accent-text:#1A4AD4; --coral:#FF6B5C; --coral-text:#A8341F; --deep:#041029;
  --rule:rgba(41,102,243,.16); --card:#F4F4EC; --card-2:#EFF0E8;
  --sticky-y:#FFE57F; --sticky-c:#FFC9C2; --sticky-b:#D6E1FF;
  --good:#12A150; --radius:0; --gutter:24px;
  --font-display:"Plus Jakarta Sans",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"Special Elite",ui-monospace,monospace;
  --font-hand:"Caveat",cursive; --weight-display:800;
  --tracking-display:-.035em; --tracking-body:0;
  --space-section:36px; --space-section-tight:28px;
  --ease:cubic-bezier(.22,1,.36,1);
}
body {font-size:18px;line-height:1.5;background:transparent;overflow-x:visible;}
body::before {content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-color:var(--bg);background-image:linear-gradient(to bottom,transparent 31px,rgba(41,102,243,.07) 31px,rgba(41,102,243,.07) 32px);background-size:100% 32px;}
body::after {content:"";position:fixed;top:0;bottom:0;left:10px;width:1px;background:rgba(255,107,92,.35);pointer-events:none;z-index:-1;}
h1,h2,h3 {text-wrap:balance;} p {text-wrap:pretty;}
.type-hero {font-size:clamp(48px,5vw,72px);line-height:1;}
.type-h2 {font-size:clamp(36px,3.6vw,54px);line-height:1.04;}
.type-h3 {font-size:28px;line-height:1.12;}
.eyebrow,.type-small,.board .board-head,.board .tile .k,.board .tab-grid .tab-label,.wcard .wcard-nums .k,.site-footer .foot-h {font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;line-height:1.4;}
.eyebrow {margin-bottom:16px;}
.sec {overflow:visible;}
.sec-head {margin-bottom:22px;}
.sec h2 {margin-bottom:22px;}
.sec-head h2 {margin-bottom:0;}
.site-header {height:56px;padding:6px var(--gutter);align-items:center;background:var(--bg);}
.site-header .wordmark {font-family:var(--font-display);font-size:24px;font-weight:800;transform:rotate(-2deg);}
.wordmark .mk {display:inline-flex;width:32px;height:28px;}
.wordmark .mk svg {width:100%;height:100%;overflow:visible;}
.wordmark .dial-mark {transform-origin:32px 22px;}
.wordmark:hover .dial-mark {animation:dial-turn .7s ease;}
.btn.solid {background:var(--coral);color:var(--deep);border:1px solid var(--deep);font-family:var(--font-body);font-size:14px;font-weight:700;text-transform:none;letter-spacing:0;min-height:48px;}
.btn.solid:hover {background:var(--deep);color:var(--bg);opacity:1;}
.site-header .cta-pill {min-height:44px;height:44px;white-space:nowrap;}
.site-form input,.site-form select,.site-form textarea {background:var(--bg);border:1px solid var(--ink-soft);font-size:16px;min-height:48px;}
.site-form input::placeholder,.site-form textarea::placeholder {color:var(--ink-soft);}
.site-form .form-status[data-state="ok"] {color:var(--ink);}
.hero-note,.site-form .form-notice,.people-card .people-role,.ba-brand {font-family:var(--font-hand);font-size:20px;line-height:1.2;letter-spacing:0;text-transform:none;}
.hero-secondary .link-arrow {font-size:15px;line-height:1.4;}
.hero-secondary {margin-top:10px;}
.site-form .form-status:empty {margin:0;}
.read-form {position:relative;margin-top:18px;max-width:100%;}
.read-form::before {content:"";position:absolute;inset:-10px;background:var(--sticky-y);z-index:-1;transform:rotate(-.6deg);box-shadow:2px 3px 0 rgba(26,31,46,.1);}
.read-form::after {content:"";position:absolute;top:-18px;right:22px;width:70px;height:18px;transform:rotate(3deg);background:rgba(255,107,92,.35);pointer-events:none;}
.read-form .field-row {gap:8px;}
.read-form .field-row input {width:0;min-width:150px;}
.site-form .form-notice {margin-top:10px;color:var(--ink-soft);}
body[data-route="/"] .sec-hero {display:grid;grid-template-columns:1fr min(var(--container),100%) 1fr;min-height:0;gap:0;padding-top:56px;padding-bottom:48px;align-items:center;}
body[data-route="/"] .sec-hero > .wrap {grid-column:2;grid-row:1;width:100%;padding-right:calc(min(44%,500px) + 24px);}
.sec-hero .hero-sub {font-size:21px;line-height:1.4;margin:18px 0;max-width:640px;}
.sec-hero .hero-note {margin:12px 0;}
body[data-route="/"] .hero-object {grid-column:2;grid-row:1;justify-self:end;align-self:center;width:min(44%,500px);aspect-ratio:5/4;}
.hero-object {position:relative;--eye-paper:var(--bg);--eye-ink:var(--ink);--eye-blue:var(--accent);--eye-coral:var(--coral);--eye-deep:var(--deep);}
.hero-object,.hero-object * {pointer-events:none!important;}
.hero-object svg,.hero-object canvas {width:100%;height:100%;}
.hero-object::after {content:"";position:absolute;right:4%;top:3%;height:18px;width:80px;background:rgba(255,230,130,.72);transform:rotate(18deg);}
.peeking-eye {width:150px;height:120px;position:absolute;right:var(--gutter);top:32px;}
body:not([data-route="/"]) .sec-hero {min-height:0;padding:36px var(--gutter) 32px;}
body:not([data-route="/"]) .sec-hero h1,body:not([data-route="/"]) .sec-hero .hero-sub {max-width:calc(100% - 175px);}
body[data-route="/read"] .sec-hero .read-form {max-width:700px;}
.sec-statement .wrap {position:relative;max-width:900px;}
#shift .wrap {background:var(--sticky-b);padding:28px 32px;transform:rotate(-.4deg);box-shadow:3px 4px 0 rgba(26,31,46,.08);}
#shift .wrap::before {content:"";position:absolute;top:-8px;left:40%;width:100px;height:20px;background:rgba(255,107,92,.4);transform:rotate(-3deg);}
.sec-proof .proof-tile {grid-template-columns:auto 1fr;align-items:center;gap:48px;}
.sec-proof .proof-value {position:relative;font-family:var(--font-display);font-size:clamp(110px,13vw,190px);font-weight:800;}
.sec-proof .proof-value::before {content:"";position:absolute;inset:40% -6px 0;background:rgba(41,102,243,.18);transform:rotate(-3deg);z-index:-1;}
.sec-proof .proof-caveat {border:0;padding-top:0;font-size:13px;margin-top:14px;}
.brain-flow {display:block;width:100%;height:240px;pointer-events:none;}
.sec-brain .brain-items {display:grid;grid-template-columns:repeat(5,1fr);gap:16px;background:none;border:0;}
.sec-brain .brain-items li {position:relative;background:var(--sticky-y);padding:20px 16px;min-height:100px;font-size:17px;font-weight:700;transform:rotate(-1.5deg);box-shadow:3px 4px 0 rgba(26,31,46,.09);}
.sec-brain .brain-items li:nth-child(2n) {background:var(--sticky-b);transform:rotate(1deg);}
.sec-brain .brain-items li:nth-child(3n) {background:var(--sticky-c);}
.sec-brain .brain-items li::before {width:10px;height:10px;background:var(--accent-text);}
.board {background:transparent;border:0;overflow:visible;}
.board .board-head {padding:0 0 16px;border:0;}
.board .live-dot {box-shadow:0 0 0 5px var(--deep);margin:0 12px 0 5px;background:var(--good);animation:live-pulse 2s infinite;}
.board .tiles {gap:16px;background:none;}
.board .tile {background:var(--card);border:1px solid var(--ink-soft);padding:20px;box-shadow:2px 3px 0 rgba(26,31,46,.08);}
.board .tile .v {font-family:var(--font-display);font-weight:800;color:var(--accent-text);font-size:42px;line-height:1.05;}
.board .tile .k {letter-spacing:.05em;}
.board .tile .why,.board .tab-grid figcaption {font-size:14px;}
.w,.tile .w,.wcard-nums .w,.ba-k {font-family:var(--font-mono);font-size:13px!important;line-height:1.45;color:var(--ink-soft);}
.board .tab-grid {display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;background:none;border:0;margin-top:20px;padding:4px 0 12px;}
.board .tab-grid figure {flex:0 0 calc((100% - 32px)/3);scroll-snap-align:start;background:var(--bg);border:1px solid var(--rule);padding:12px;}
.board .tab-grid img {height:145px;width:100%;object-fit:contain;background:var(--card-2);}
.sec-referee .referee-grid {gap:40px;margin-top:26px;}
.referee-claim,.referee-recorded {position:relative;padding:16px 16px 20px 115px;min-height:230px;}
.sec-referee .referee-num {font-family:var(--font-display);font-size:clamp(80px,10vw,130px);font-weight:800;margin:12px 0;}
.sec-referee .referee-claim .referee-num {color:var(--coral-text);}
.sec-referee .referee-recorded .referee-num {color:var(--accent-text);}
.referee-bar {position:absolute;left:12px;bottom:0;width:72px;height:calc(var(--bar-ratio)*220px);background:var(--accent);border:2px solid var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .8s var(--ease);}
.referee-claim .referee-bar {background:repeating-linear-gradient(-45deg,var(--coral) 0 7px,var(--bg) 7px 10px);}
.bars-in .referee-bar {transform:scaleY(1);}
.sec-referee > .wrap > p {margin-top:24px;max-width:760px;}
.sec-before-after .ba-rows {display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border:0;}
.sec-before-after .ba-row {position:relative;display:flex;flex-direction:column;padding:22px;background:var(--bg);border:1px solid var(--rule);box-shadow:3px 4px 0 rgba(26,31,46,.08);transform:rotate(-1deg);}
.sec-before-after .ba-row:nth-child(2) {transform:rotate(1deg);}
.ba-row::before,.io-col::after,.wcard::before,.people-card::before {content:"";position:absolute;top:-8px;left:35%;width:60px;height:18px;background:rgba(255,230,130,.8);transform:rotate(-3deg);pointer-events:none;}
.sec-before-after .ba-brand {font-size:28px;}
.sec-before-after .ba-states {grid-template-columns:1fr;gap:12px;}
.sec-before-after .ba-num {color:var(--accent-text);font-family:var(--font-display);font-weight:800;}
.sec-before-after .ba-caveat {font-size:13px;}
.io-grid {gap:24px;}
.io-col {position:relative;background:var(--card);border:1px solid var(--rule);padding:22px 24px;}
.io-col p {margin-top:12px;}
.io-col ul {font-size:16px;}
.io-col li::before {width:9px;height:5px;top:9px;border-left:2px solid var(--accent-text);border-bottom:2px solid var(--accent-text);border-radius:0;transform:rotate(-45deg);background:none;}
.io-capacity {border:0;padding:0;font-size:16px;}
.sec-terms ul {grid-template-columns:repeat(3,1fr);border:0;padding:0;gap:20px;}
.sec-terms li {padding:18px;border:2px solid var(--ink-soft);font-family:var(--font-mono);font-size:16px;line-height:1.5;transform:rotate(-.5deg);}
.sec-terms li::before {display:none;}
.item-list {gap:20px;}
.item-list .item {position:relative;background:var(--card);border:1px solid var(--rule);padding:20px;}
.item-list .item h3 {font-size:22px;font-weight:800;margin-bottom:10px;}
.item-list .item p {font-size:16px;}
#method .item,#rhythm .item {padding-top:64px;}
.phase-number {position:absolute;top:14px;left:20px;display:grid;place-items:center;width:34px;height:34px;border:2px dashed var(--accent-text);border-radius:50%;font-family:var(--font-mono);font-size:18px;}
#rhythm .phase-number {animation:phase-pulse 4s infinite;}
#rhythm .item:nth-child(2) .phase-number {animation-delay:1s;} #rhythm .item:nth-child(3) .phase-number {animation-delay:2s;} #rhythm .item:nth-child(4) .phase-number {animation-delay:3s;}
.wcard {position:relative;overflow:visible;background:var(--card);border:1px solid var(--ink-soft);}
.wcard .wcard-media {display:none;}
.wcard .wcard-brand {font-size:23px;}
.wcard .wcard-body {padding:20px;}
.wcard .wcard-nums {gap:12px;}
.wcard .wcard-nums .v {font-family:var(--font-display);font-weight:800;font-size:24px;color:var(--accent-text);line-height:1.2;}
.wcard .wcard-nums .k {font-size:13px;}
.people-card {position:relative;background:var(--bg);border:1px solid var(--rule);padding:12px;overflow:visible;}
.people-card .people-media {height:120px;aspect-ratio:auto;background:var(--sticky-b);border:1px dashed var(--ink-soft);}
.people-card .people-body {padding:18px 8px 4px;}
.people-card .people-name {font-weight:800;}
.archive-list {border:0;}
.archive-row {border:1px solid var(--rule);padding:0 18px;margin:0 0 12px;background:var(--card);}
.archive-row summary {font-size:18px;}
.archive-row summary .archive-sub,.archive-row .archive-detail p {font-size:14px;}
.sec-table table {background:var(--bg);font-size:15px;}
.sec-table th {font-size:13px;}
.sec-table th:last-child {background:var(--sticky-b);}
.sec-table .table-caveat {font-size:13px;}
.sec-ask .ask-inner {position:relative;max-width:100%;padding-right:300px;min-height:240px;}
.phone-art {position:absolute;right:0;top:0;width:260px;height:230px;pointer-events:none;}
.phone-art svg {width:100%;height:100%;overflow:visible;}
.sec-ask:focus-within .phone-handset {transform:translateY(-12px);}
.phone-handset {transition:transform .3s var(--ease);}
.phone-ring {opacity:0;}
.sec-ask:focus-within .phone-ring {opacity:1;animation:live-pulse .7s infinite;}
body:not([data-route="/"]):not([data-route="/contact"]) .phone-art {width:140px;height:130px;}
body[data-route="/contact"] .sec-ask .ask-inner {padding-right:280px;}
body[data-route="/contact"] .site-form form {display:grid;grid-template-columns:1fr 1fr;gap:12px;}
body[data-route="/contact"] .site-form .field {margin:0;}
body[data-route="/contact"] .site-form .field:has(textarea),body[data-route="/contact"] .form-notice,body[data-route="/contact"] .form-status {grid-column:1/-1;}
.site-footer {position:relative;background:var(--deep);color:var(--bg);border:0;margin-top:36px;padding-top:40px;padding-bottom:36px;}
.site-footer .foot-h,.site-footer .foot-bottom {color:var(--bg);font-size:13px;}
.site-footer .foot-lines {font-size:24px;}
.site-footer .wordmark {font-family:var(--font-display);font-weight:800;}
.site-footer .wordmark .mk {width:44px;height:44px;}
.site-footer a:hover {color:var(--sticky-y);}
.menu-toggle,.motion-toggle {position:fixed;bottom:16px;width:48px;height:48px;background:var(--bg);border:1px solid var(--ink);border-radius:50%;box-shadow:2px 3px 0 rgba(26,31,46,.15);z-index:999;}
.motion-toggle {left:16px;display:grid;place-items:center;}
.motion-toggle svg {width:22px;height:22px;}
.menu-panel {background:var(--bg);border:1px solid var(--ink);}
.menu-panel > a {font-family:var(--font-display);font-weight:700;}
.loader {background:var(--bg);color:var(--ink);}
.loader-dial {width:120px;height:120px;animation:dial-turn .7s ease-in-out;}
.carousel-nav {display:none;}
.tab-grid + .carousel-nav {display:flex;}
.carousel-nav {justify-content:center;align-items:center;gap:16px;margin-top:12px;}
.carousel-nav button {width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--ink-soft);background:var(--bg);}
.carousel-nav button:disabled {opacity:.35;cursor:default;}
.carousel-nav svg {width:20px;height:20px;}
.carousel-dots {display:flex;gap:6px;}
.carousel-dots i {width:6px;height:6px;border-radius:50%;background:var(--ink-soft);opacity:.3;}
.carousel-dots i.active {opacity:1;background:var(--accent-text);}
html[data-motion="paused"] *,html[data-motion="paused"] *::before,html[data-motion="paused"] *::after {animation-play-state:paused!important;}
html[data-motion="paused"] .referee-bar {transition:none;transform:scaleY(1);}
html[data-motion="paused"] .rv {transition:none!important;}
body:is([data-route="/privacy"],[data-route="/terms"],[data-route="/security"]) .sec {max-width:744px;}
@keyframes dial-turn {0%{transform:rotate(0)}55%{transform:rotate(120deg)}100%{transform:rotate(0)}}
@keyframes live-pulse {50%{opacity:.55}}
@keyframes phase-pulse {0%,25%{background:var(--sticky-b)}26%,100%{background:transparent}}
@keyframes phone-wiggle {0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
.sec-ask:focus-within .phone-art svg {animation:phone-wiggle .6s ease-in-out infinite;}
@media (min-width:768px) {:root {--gutter:32px;}}
@media (min-width:1360px) and (pointer:fine) {body::after{left:72px;}body::before{background-image:radial-gradient(circle at 24px 64px,var(--card-2) 0 6px,var(--ink-soft) 6px 7px,transparent 7px),linear-gradient(to bottom,transparent 31px,rgba(41,102,243,.07) 31px,rgba(41,102,243,.07) 32px);background-size:48px 160px,100% 32px;background-repeat:repeat-y,repeat;}}
@media (min-width:900px) and (max-width:1279px) {body[data-route="/"] .sec-hero{padding-top:24px;}body[data-route="/"] .hero-object{width:min(40%,420px);}body[data-route="/"] .sec-hero>.wrap{padding-right:calc(min(40%,420px) + 24px);}.read-form .field-row{flex-wrap:wrap;}.read-form .field-row input{flex-basis:calc(50% - 8px);}.read-form .field-row button{flex-basis:100%;}}
@media (max-width:899px) {
  :root {--space-section:28px;--space-section-tight:24px;}
  body {font-size:16px;}
  .type-h2 {font-size:32px;line-height:1.08;}
  .type-h3 {font-size:24px;}
  .type-hero {font-size:clamp(32px,9.4vw,36px);}
  .sec-head {display:block;margin-bottom:18px;}
  .sec-head p {margin-top:12px;}
  .hero-note,.site-form .form-notice {font-size:18px;line-height:1.2;}
  body[data-route="/"] .sec-hero {display:flex;flex-direction:column;padding:16px var(--gutter);gap:8px;}
  body[data-route="/"] .sec-hero>.wrap {display:contents;padding:0;}
  body[data-route="/"] .sec-hero h1 {order:1;}
  body[data-route="/"] .hero-sub {order:2;font-size:16px;line-height:1.4;margin:0;}
  body[data-route="/"] .hero-object {order:3;width:100%;max-width:342px;height:clamp(120px,calc(100svh - 700px),190px);aspect-ratio:auto;align-self:center;}
  body[data-route="/"] .hero-note {order:4;margin:0;}
  body[data-route="/"] .read-form {order:5;margin:0;width:100%;}
  body[data-route="/"] .hero-secondary {order:6;margin:0;}
  .read-form::before {inset:-3px -8px;}
  .read-form::after {width:45px;height:12px;top:-8px;right:4px;}
  .read-form .field-row {flex-direction:column;gap:8px;}
  .read-form .field-row input {width:100%;min-width:0;min-height:48px;}
  .read-form .field-row button {width:100%;}
  .site-form .form-notice {margin-top:8px;}
  .hero-object::after {width:45px;height:12px;top:0;right:0;}
  body:not([data-route="/"]) .sec-hero {padding-top:20px;padding-bottom:24px;gap:12px;}
  body:not([data-route="/"]) .sec-hero h1,body:not([data-route="/"]) .sec-hero .hero-sub {max-width:100%;}
  body:not([data-route="/"]) .sec-hero .hero-sub {font-size:16px;margin:12px 0;}
  .peeking-eye {position:relative;right:auto;top:auto;width:96px;height:77px;margin:0 0 0 auto;}
  #shift .wrap {padding:22px 20px;}
  .sec-proof .proof-tile {grid-template-columns:1fr;gap:16px;}
  .sec-proof .proof-value {font-size:clamp(80px,26vw,112px);}
  .brain-flow {height:150px;}
  .sec-brain .brain-items li {min-height:100px;font-size:20px;}
  .notebook-track,.sec-brain .brain-items,.board .tiles,.sec-before-after .ba-rows,.io-grid,.card-grid,.archive-list {display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:12px 8px 18px;margin-left:-8px;margin-right:-8px;scroll-padding-left:8px;background:none;border:0;}
  .notebook-track > * {flex:0 0 calc(100% - 24px);scroll-snap-align:start;min-width:0;}
  .board .tab-grid figure {flex-basis:calc(100% - 24px);}
  .board .tile {min-height:212px;padding:16px;}
  .board .tile .v {font-size:38px;margin:8px 0;}
  .board .tab-grid {margin-top:12px;}
  .board .tab-grid img {height:100px;}
  .board .tab-grid figcaption {font-size:13px;}
  .board .tab-grid figure {padding:10px;}
  .carousel-nav {display:flex;}
  .sec-referee .referee-grid {grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;align-items:stretch;}
  .referee-claim,.referee-recorded {padding:0 0 125px;min-height:245px;}
  .sec-referee .referee-num {font-size:62px;line-height:1;margin:8px 0;}
  .sec-referee .type-small {font-size:13px;letter-spacing:0;}
  .referee-bar {left:0;bottom:0;width:100%;height:calc(var(--bar-ratio)*115px);}
  .sec-referee .w {font-size:13px;}
  .sec-before-after .ba-row {transform:none!important;}
  .sec-terms ul {grid-template-columns:1fr;gap:12px;}
  .sec-terms li {font-size:15px;padding:14px;}
  .sec-ask .ask-inner,body[data-route="/contact"] .sec-ask .ask-inner {padding:0;min-height:0;}
  .phone-art,body:not([data-route="/"]):not([data-route="/contact"]) .phone-art {position:relative;width:160px;height:140px;margin:0 0 10px auto;}
  body[data-route="/contact"] .site-form form {grid-template-columns:1fr;}
  .sec-ask .read-form {margin-top:20px;}
  .site-footer .foot-lines {font-size:20px;}
  .site-footer {padding-bottom:76px;}
  .people-card .people-media {height:90px;}
  .archive-row {margin-bottom:0;}
  .archive-row summary {grid-template-columns:1fr;font-size:17px;}
}
@media (max-width:380px) {.type-hero{font-size:32px;}.site-header{height:52px;}.site-header .wordmark{font-size:22px;}.site-header .wordmark .mk{width:26px;}}
@media (prefers-reduced-motion:reduce) {*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}.referee-bar{transform:scaleY(1);}}

/* Content stays intact even when a value is a sentence rather than a number. */
body:not([data-route="/"]) .sec-proof .proof-value {font-size:clamp(48px,7vw,100px);max-width:520px;overflow-wrap:break-word;text-wrap:balance;}
body:not([data-route="/"]) .sec-proof .proof-tile {grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.faq-item {padding:4px 0;}
.faq-item summary {font-size:17px;line-height:1.3;}
.sec-people h2,.sec-terms h2 {max-width:100%;}
@media (min-width:980px) {
  .wcard .wcard-body {padding:12px 14px;}
  .wcard .wcard-brand {font-size:22px;}
  .wcard .wcard-nums {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;}
  .wcard .wcard-nums .v {font-size:18px;}
  .wcard .wcard-nums .k {font-family:var(--font-body);font-size:13px;letter-spacing:0;line-height:1.2;text-transform:none;}
  .wcard .wcard-nums .w {font-family:var(--font-body);font-size:13px;line-height:1.2;margin-top:3px;}
  .wcard .wcard-nums > div:last-child:nth-child(3) {grid-column:1/-1;}
}
@media (max-width:899px) {
  .sec {padding-top:24px;padding-bottom:24px;}
  .sec-brain .sec-head p {font-size:15px;line-height:1.4;}
  .brain-flow {height:120px;}
  .sec-brain .brain-items li {font-size:18px;padding:16px;min-height:110px;line-height:1.4;}
  .board .tile .why {font-size:13px;line-height:1.4;}
  .sec-before-after .ba-row {padding:16px;gap:10px;}
  .sec-before-after .ba-states {font-size:15px;line-height:1.4;gap:8px;}
  .sec-before-after .ba-num {font-size:28px;line-height:1.2;}
  .sec-before-after .ba-caveat {font-size:13px;line-height:1.4;}
  .io-col {padding:18px;}
  .io-col ul,.io-col p {font-size:15px;line-height:1.4;}
  .io-col ul {gap:6px;}
  .item-list.notebook-track .item {flex-basis:calc(100% - 24px);}
  .item-list .item p {line-height:1.4;}
  body:not([data-route="/"]) .sec-proof .proof-tile {grid-template-columns:1fr;}
  body:not([data-route="/"]) .sec-proof .proof-value {font-size:64px;line-height:1.02;}
  body[data-route="/contact"] .site-form form {grid-template-columns:1fr 1fr;gap:10px;}
  body[data-route="/contact"] .site-form label {font-size:13px;letter-spacing:0;line-height:1.3;}
  body[data-route="/contact"] .site-form input,body[data-route="/contact"] .site-form select {min-height:44px;padding:10px;}
  body[data-route="/contact"] .site-form textarea {min-height:80px;}
  body[data-route="/contact"] .phone-art {position:absolute;top:0;right:0;width:96px;height:84px;}
  body[data-route="/contact"] .sec-ask h2 {padding-right:90px;}
  .sec-table .table-wrap {overflow-x:auto;}
  #compare table {display:table;min-width:720px;}
  #compare thead {display:table-header-group;}
  #compare tbody {display:table-row-group;}
  #compare tr {display:table-row;}
  #compare th,#compare td {display:table-cell;}
  #compare td::before {display:none;}
}

.hero-object:empty {background: url("data:image/svg+xml,%3Csvg%20class%3D%22eye-poster%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%20-18%20500%20418%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20d%3D%22M52%20137L89%2096L126%2068L163%2048L199%2034L236%2025L273%2022L310%2025L347%2034L383%2053L420%2082%22%20style%3D%22fill%3Anone%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.5%22%20stroke-opacity%3D%22.32%22/%3E%3Cdefs%3E%3CclipPath%20id%3D%22eyeap%22%3E%3Cpath%20d%3D%22M20%20233L39%20189L58%20159L78%20137L97%20119L116%20104L135%2091L154%2081L173%2073L193%2067L212%2062L231%2059L250%2058L269%2058L288%2060L308%2063L327%2068L346%2074L365%2083L384%2094L403%20107L423%20124L442%20145L461%20173L480%20216L480%20216L461%20242L442%20262L423%20279L403%20294L384%20306L365%20316L346%20325L327%20332L308%20337L288%20341L269%20344L250%20345L231%20346L212%20344L193%20342L173%20338L154%20332L135%20325L116%20316L97%20305L78%20292L58%20277L39%20257L20%20233Z%22/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath%20d%3D%22M20%20233L39%20189L58%20159L78%20137L97%20119L116%20104L135%2091L154%2081L173%2073L193%2067L212%2062L231%2059L250%2058L269%2058L288%2060L308%2063L327%2068L346%2074L365%2083L384%2094L403%20107L423%20124L442%20145L461%20173L480%20216L480%20216L461%20242L442%20262L423%20279L403%20294L384%20306L365%20316L346%20325L327%20332L308%20337L288%20341L269%20344L250%20345L231%20346L212%20344L193%20342L173%20338L154%20332L135%20325L116%20316L97%20305L78%20292L58%20277L39%20257L20%20233Z%22%20style%3D%22fill%3A%23FBFBF6%22/%3E%3Cg%20clip-path%3D%22url%28%23eyeap%29%22%3E%3Cpath%20d%3D%22M112%20208L113%20196L116%20183L122%20171L131%20159L144%20148L160%20139L181%20131L204%20125L230%20120L259%20117L287%20116L315%20116L343%20118L367%20123L390%20129L410%20138L429%20149L446%20162L458%20176L465%20190L468%20204L469%20215L467%20223L462%20230L450%20235L435%20239L419%20242L402%20244L385%20247L367%20251L350%20257L333%20263L316%20269L298%20275L281%20279L264%20280L247%20279L229%20275L212%20269L195%20263L177%20258L159%20252L144%20246L133%20240L124%20232L117%20225L113%20217L112%20211Z%22%20style%3D%22fill%3Anone%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M381%20248L382%20255L385%20264L390%20271L400%20277L410%20281L421%20281L433%20279L443%20274L452%20265L459%20255L462%20246L463%20237L462%20231L462%20230%22%20style%3D%22fill%3Anone%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.5%22/%3E%3Cpath%20d%3D%22M333%20263L338%20273L344%20285L346%20298L348%20307%22%20style%3D%22fill%3Anone%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.5%22/%3E%3Cpath%20d%3D%22M362%20252L366%20263L370%20278L372%20292L373%20304%22%20style%3D%22fill%3Anone%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.5%22/%3E%3Cpath%20d%3D%22M296%20119L300%20130L305%20144L304%20157L296%20169L288%20180L288%20192L294%20203L300%20212%22%20style%3D%22fill%3Anone%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.5%22%20stroke-opacity%3D%22.7%22/%3E%3Cpath%20d%3D%22M195%20234L208%20229L227%20222L248%20218L272%20215L297%20213L323%20207L350%20199L370%20193%22%20style%3D%22fill%3Anone%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.5%22%20stroke-opacity%3D%22.7%22/%3E%3Cpath%20d%3D%22M351%20123L349%20134L347%20149L349%20159L359%20164L368%20169L370%20178L368%20192L366%20202%22%20style%3D%22fill%3Anone%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.5%22%20stroke-opacity%3D%22.7%22/%3E%3Cpath%20d%3D%22M140%20156L153%20156L172%20157L186%20162L197%20173L203%20186L201%20197L191%20208L182%20215%22%20style%3D%22fill%3Anone%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.5%22%20stroke-opacity%3D%22.7%22/%3E%3Cpath%20d%3D%22M204%20129L209%20138L217%20151L225%20157L234%20156L242%20155L248%20162L253%20176L256%20186%22%20style%3D%22fill%3Anone%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.5%22%20stroke-opacity%3D%22.7%22/%3E%3Cpath%20d%3D%22M410%20142L407%20151L403%20164L404%20173L413%20178L423%20183L428%20194L431%20208L432%20219%22%20style%3D%22fill%3Anone%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.5%22%20stroke-opacity%3D%22.7%22/%3E%3Cpath%20d%3D%22M241%20267L247%20262L255%20255L267%20251L283%20250L300%20249L316%20245L331%20239L342%20234%22%20style%3D%22fill%3Anone%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.5%22%20stroke-opacity%3D%22.7%22/%3E%3Cpath%20d%3D%22M127%20193L134%20195L143%20199L152%20205L160%20214L167%20223L166%20232L158%20239L152%20245%22%20style%3D%22fill%3Anone%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.5%22%20stroke-opacity%3D%22.7%22/%3E%3Cpath%20d%3D%22M397%20252L408%20257L421%20261L435%20259L447%20256%22%20style%3D%22fill%3Anone%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.2%22%20stroke-opacity%3D%22.6%22/%3E%3Cpath%20d%3D%22M394%20265L404%20269L417%20272L434%20271L447%20269%22%20style%3D%22fill%3Anone%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.2%22%20stroke-opacity%3D%22.6%22/%3E%3Cpath%20d%3D%22M26%20258L113%20210M26%20258L125%20231M46%20241L113%20210M46%20241L125%20231M40%20224L113%20210M40%20224L125%20231M53%20206L113%20210M53%20206L125%20231M33%20189L113%20210M33%20189L125%20231M40%20172L113%20210M40%20172L133%20175M401%20213L425%20215M425%20215L448%20229M345%20209L367%20195M319%20202L345%20209M428%20240L448%20229M448%20229L467%20209M133%20175L153%20187M133%20175L152%20147M238%20125L257%20141M212%20124L238%20125M247%20257L262%20275M262%20275L283%20255M209%20174L217%20151M209%20174L234%20176M210%20209L232%20201M186%20204L210%20209M192%20241L220%20232M167%20221L192%20241M146%20210L167%20221M167%20221L186%20204M288%20217L308%20234M265%20240L288%20217M376%20226L396%20239M369%20248L376%20226M183%20173L209%20174M153%20187L183%20173M283%20255L312%20265M312%20265L339%20240M435%20174L451%20191M409%20189L435%20174M257%20141L266%20164M257%20141L273%20119M369%20248L396%20239M396%20239L428%20240M153%20187L186%20204M186%20204L209%20174M307%20118L332%20123M332%20123L353%20141M217%20265L247%20257M192%20241L217%20265M451%20191L467%20209M425%20215L451%20191M232%20201L254%20194M234%20176L254%20194M217%20151L234%20176M217%20151L238%20125M367%20195L388%20178M341%20183L367%20195M266%20164L288%20171M288%20171L298%20145M179%20144L212%20124M212%20124L257%20141M125%20231L146%20210M113%20210L146%20210M234%20176L266%20164M210%20209L234%20176M388%20178L409%20189M401%20213L409%20189M353%20141L371%20124M353%20141L367%20161M152%20147L179%20144M152%20147L183%20173M298%20145L307%20118M298%20145L325%20166M325%20166L341%20183M288%20171L325%20166M339%20240L369%20248M345%20209L369%20248M391%20145L416%20149M416%20149L435%20174M319%20202L341%20183M287%20194L319%20202M247%20257L265%20240M247%20257L283%20255M265%20240L283%20255M250%20218L265%20240M308%20234L339%20240M339%20240L376%20226M273%20119L307%20118M307%20118L325%20166M113%20210L125%20231M113%20210L133%20175M283%20255L308%20234M308%20234L319%20202M250%20218L283%20255M283%20255L339%20240M367%20161L388%20178M388%20178L401%20213M179%20144L217%20151M179%20144L209%20174M238%20125L273%20119M273%20119L298%20145M367%20161L391%20145M341%20183L367%20161M210%20209L220%20232M220%20232L250%20218M401%20213L428%20240M428%20240L467%20209M341%20183L353%20141M341%20183L388%20178M153%20187L167%20221M113%20210L153%20187M156%20246L167%20221M125%20231L156%20246M425%20215L467%20209M435%20174L467%20209M376%20226L401%20213M367%20195L401%20213M371%20124L391%20145M353%20141L391%20145M254%20194L266%20164M266%20164L287%20194M232%20201L250%20218M250%20218L288%20217M125%20231L167%20221M125%20231L153%20187M254%20194L287%20194M250%20218L287%20194M332%20123L371%20124M371%20124L416%20149M220%20232L232%20201M209%20174L232%20201M457%20212L467%20209M425%20215L457%20212M448%20229L457%20212M376%20226L457%20212M435%20174L457%20212M396%20239L457%20212M367%20195L457%20212M409%20189L457%20212M369%20248L457%20212M416%20149L457%20212M388%20178L457%20212M367%20161L457%20212M428%20240L457%20212M401%20213L457%20212M391%20145L457%20212%22%20style%3D%22fill%3Anone%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.2%22%20stroke-opacity%3D%22.5%22/%3E%3Ccircle%20cx%3D%22457%22%20cy%3D%22212%22%20r%3D%225%22%20style%3D%22fill%3A%23FF6B5C%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.5%22/%3E%3Cpath%20d%3D%22M26%20258h0M46%20241h0M40%20224h0M53%20206h0M33%20189h0M40%20172h0M425%20215h0M345%20209h0M448%20229h0M133%20175h0M238%20125h0M262%20275h0M209%20174h0M210%20209h0M192%20241h0M167%20221h0M288%20217h0M376%20226h0M183%20173h0M312%20265h0M435%20174h0M257%20141h0M396%20239h0M186%20204h0M332%20123h0M217%20265h0M451%20191h0M254%20194h0M217%20151h0M367%20195h0M288%20171h0M212%20124h0M146%20210h0M234%20176h0M409%20189h0M353%20141h0M152%20147h0M298%20145h0M325%20166h0M369%20248h0M416%20149h0M319%20202h0M247%20257h0M265%20240h0M339%20240h0M307%20118h0M113%20210h0M308%20234h0M283%20255h0M388%20178h0M179%20144h0M273%20119h0M367%20161h0M220%20232h0M428%20240h0M341%20183h0M153%20187h0M156%20246h0M467%20209h0M401%20213h0M391%20145h0M266%20164h0M250%20218h0M125%20231h0M287%20194h0M371%20124h0M232%20201h0%22%20style%3D%22fill%3Anone%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%224.2%22%20stroke-linecap%3D%22round%22%20stroke-opacity%3D%22.6%22/%3E%3Ccircle%20cx%3D%22135%22%20cy%3D%22216%22%20r%3D%223.6%22%20style%3D%22fill%3A%232966F3%22/%3E%3Ccircle%20cx%3D%22354%22%20cy%3D%22198%22%20r%3D%223.6%22%20style%3D%22fill%3A%23FF6B5C%22/%3E%3Ccircle%20cx%3D%22250%22%20cy%3D%22216%22%20r%3D%2281%22%20style%3D%22fill%3A%232966F3%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%222.5%22/%3E%3Ccircle%20cx%3D%22299%22%20cy%3D%22238%22%20r%3D%2210%22%20style%3D%22fill%3A%23041029%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.4%22/%3E%3Ccircle%20cx%3D%22303%22%20cy%3D%22209%22%20r%3D%2210%22%20style%3D%22fill%3A%23041029%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.4%22/%3E%3Ccircle%20cx%3D%22291%22%20cy%3D%22182%22%20r%3D%2210%22%20style%3D%22fill%3A%23041029%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.4%22/%3E%3Ccircle%20cx%3D%22267%22%20cy%3D%22166%22%20r%3D%2210%22%20style%3D%22fill%3A%23041029%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.4%22/%3E%3Ccircle%20cx%3D%22238%22%20cy%3D%22164%22%20r%3D%2210%22%20style%3D%22fill%3A%23041029%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.4%22/%3E%3Ccircle%20cx%3D%22212%22%20cy%3D%22179%22%20r%3D%2210%22%20style%3D%22fill%3A%23041029%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.4%22/%3E%3Ccircle%20cx%3D%22198%22%20cy%3D%22204%22%20r%3D%2210%22%20style%3D%22fill%3A%23041029%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.4%22/%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22233%22%20r%3D%2210%22%20style%3D%22fill%3A%23041029%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.4%22/%3E%3Ccircle%20cx%3D%22216%22%20cy%3D%22257%22%20r%3D%2210%22%20style%3D%22fill%3A%23041029%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.4%22/%3E%3Ccircle%20cx%3D%22243%22%20cy%3D%22269%22%20r%3D%2210%22%20style%3D%22fill%3A%23041029%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.4%22/%3E%3Ccircle%20cx%3D%22250%22%20cy%3D%22216%22%20r%3D%2224%22%20style%3D%22fill%3A%23FF6B5C%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%222.5%22/%3E%3Ccircle%20cx%3D%22242%22%20cy%3D%22207%22%20r%3D%225%22%20fill%3D%22white%22%20fill-opacity%3D%22.9%22/%3E%3Cpath%20d%3D%22M290%20278L272%20297%22%20style%3D%22fill%3Anone%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22/%3E%3C/g%3E%3Cpath%20d%3D%22M20%20233L78%20137L135%2091L193%2067L250%2058L308%2063L365%2083L423%20124L480%20216%22%20style%3D%22fill%3Anone%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%223.4%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M84%20114L117%2087L149%2068L181%2055L213%2046L245%2042L278%2043L310%2047L342%2057L374%2072L406%2094%22%20style%3D%22fill%3Anone%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%221.7%22%20stroke-opacity%3D%22.8%22/%3E%3Cpath%20d%3D%22M20%20233L78%20292L135%20325L193%20342L250%20345L308%20337L365%20316L423%20279L480%20216%22%20style%3D%22fill%3Anone%3Bstroke%3A%231A1F2E%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22/%3E%3C/svg%3E") center / contain no-repeat;}

/* User's October 14 header and footer lockup corrections. */
.site-header {height:auto;min-height:64px;gap:20px;}
.header-nav {display:flex;align-items:center;justify-content:center;gap:20px;}
.header-nav a {display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;font-family:var(--font-body);font-size:14px;font-weight:500;text-decoration:none;}
.header-nav a:hover,.header-nav a[aria-current="page"] {color:var(--accent-text);text-decoration:underline;text-underline-offset:5px;}
.site-footer .footer-lockup {display:inline-flex;flex-direction:column;align-items:center;gap:2px;font-size:32px;line-height:1.15;}
.site-footer .footer-lockup .mk {width:72px;height:72px;color:inherit;}
.site-footer .brand-word {display:block;transform:rotate(-3deg);}
.site-footer .brand-word i {color:var(--coral);}
@media (max-width:899px) {
 .site-header {display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:4px var(--gutter);}
 .site-header .wordmark {grid-column:1;grid-row:1;}
 .site-header .cta-pill {grid-column:2;grid-row:1;}
 .header-nav {grid-column:1/-1;grid-row:2;justify-content:space-between;gap:8px;}
 .header-nav a {font-size:13px;min-height:44px;}
 body[data-route="/"] .sec-hero {padding-top:12px;padding-bottom:12px;gap:6px;}
 body[data-route="/"] .type-hero {font-size:32px;}
 body[data-route="/"] .hero-object {height:clamp(108px,calc(100svh - 700px),178px);}
 body[data-route="/"] .read-form .field-row {gap:6px;}
 body[data-route="/"] .read-form .field-row input,body[data-route="/"] .read-form .field-row button {min-height:44px;}
}
.site-footer .foot-lines p {color:var(--bg);}
.site-footer .foot-lines .rv {opacity:1;transform:none;}
@media (max-width:359px) {.header-nav{gap:4px;}.header-nav a{font-size:12px;}}

/* The original team portraits, shown as blue notebook sketches until flipped. */
.people-card .portrait-media {height:auto;aspect-ratio:4/5;border:0;background:#e8f0ff;overflow:hidden;}
.portrait-flip {display:block;position:relative;width:100%;aspect-ratio:4/5;border:1px solid var(--rule);padding:0;cursor:pointer;background:#e8f0ff;perspective:900px;}
.portrait-flip-inner {display:block;position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s ease;}
.portrait-flip.is-flipped .portrait-flip-inner {transform:rotateY(180deg);}
.portrait-face {display:block;position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;}
.portrait-face img {display:block;width:100%;height:100%;object-fit:cover;}
.portrait-front {background:#dce9ff;}
.portrait-front img {filter:grayscale(1) sepia(1) saturate(6) hue-rotate(174deg) contrast(1.25);mix-blend-mode:multiply;}
.portrait-back {transform:rotateY(180deg);}
.portrait-flip:focus-visible::after {content:"";position:absolute;inset:4px;border:3px solid var(--accent);z-index:5;pointer-events:none;}
@media (prefers-reduced-motion:reduce) {.portrait-flip-inner{transition:none;}.portrait-flip.is-flipped .portrait-front {visibility:hidden;}}

/* Source-faithful board tour: the chart pixels are real, anonymized OS captures. */
.board-tour {margin-top:28px;}
.board-tour-head {display:block;margin-bottom:14px;}
.board-tour-head h3 {margin:0;}
.board-tour-head p {max-width:700px;margin:0;font-size:14px;line-height:1.45;}
.board-tour-head p::after {content:" Drag the image to inspect the page.";}
.board-tabs {display:flex;gap:6px;overflow-x:auto;padding:3px 2px 10px;scrollbar-width:thin;}
.board-tabs button {flex:0 0 auto;min-height:44px;padding:7px 12px;border:1px solid var(--rule);background:var(--bg);color:var(--ink);font-family:var(--font-mono);font-size:12px;cursor:pointer;}
.board-tabs button[aria-pressed="true"] {border-color:var(--ink);background:var(--ink);color:var(--bg);}
.board-tabs button:focus-visible {outline:3px solid var(--accent);outline-offset:2px;}
.board-frame {position:relative;margin:0;overflow-x:auto;border:2px solid var(--ink);background:#0d1017;}
.board-frame:focus-visible {outline:3px solid var(--accent);outline-offset:3px;}
.board-frame img {display:block;width:100%;height:auto;min-width:790px;clip-path:inset(0 0 0 0);transition:clip-path 1.2s var(--ease);}
.board-tour.is-armed .board-frame img {clip-path:inset(0 100% 0 0);}
.board-frame figcaption {position:sticky;left:0;width:max-content;max-width:100%;padding:7px 12px;background:var(--ink);color:var(--bg);font-family:var(--font-mono);font-size:13px;}
.sec-archive .archive-lead {max-width:800px;margin:22px 0 26px;border:1px solid var(--ink);background:#0d1017;}
.archive-lead img {display:block;width:100%;height:auto;}
.archive-lead figcaption {padding:10px 14px;background:var(--bg);font-size:14px;line-height:1.45;}
@media (max-width:899px) {
  .board-tour-head {display:block;}
  .board-tour-head p {margin-top:8px;}
  .board-frame img {min-width:800px;}
  .sec-archive .archive-list,.sec-archive .archive-list.notebook-track {display:block;overflow:visible;margin:0;padding:0;scroll-snap-type:none;}
  .sec-archive .archive-row {display:block;width:100%;margin:0 0 10px;}
  .sec-archive .archive-lead {margin:16px 0 22px;}
}
@media (prefers-reduced-motion:reduce) {.board-tour.is-armed .board-frame img {clip-path:none;}.board-frame img {transition:none;}}
html[data-motion="paused"] .board-tour.is-armed .board-frame img {clip-path:none;}
html[data-motion="paused"] .board-frame img {transition:none;}
@media (max-width:899px) {
  body[data-route="/"] .hero-object {width:min(100%,clamp(138px,calc(100svh + 80vw - 776px),320px));height:auto;aspect-ratio:5/4;max-width:320px;touch-action:pan-y;}
}
@media (max-width:359px) and (max-height:700px) {
  body[data-route="/"] .sec-hero {padding-top:10px;gap:5px;}
}
@media (max-width:899px) and (max-height:810px) {
  body[data-route="/"] .motion-toggle,
  body[data-route="/"] .menu-toggle {top:calc(50svh + 20px);bottom:auto;}
}

/* ==========================================================================
   v5 LAUNCH (Oct 15): Doug's v4-eye, with the paper off, the brain in place of
   the eye (hero + a rider that travels down the side), and World C's motion.
   Everything below overrides the v4 skin above; delete this block to get v4 back.
   ========================================================================== */

/* 1. The paper comes off: no ruled lines, no red margin, no punch holes, no eye poster. */
body::before { background-image: none !important; }
body::after { display: none !important; }

/* 2. The brain, drawn in Doug's illustration language (ink line, hatch, the board's network inside). */
.bn { --bn-ink: var(--ink); --bn-fill: var(--sticky-b); --bn-deep: #B9C8FA; --bn-coral: var(--coral); --bn-blue: var(--accent); --bn-yellow: var(--sticky-y); --bn-paper: var(--bg); width: 100%; height: 100%; overflow: visible; display: block; }
.bn-fill { fill: var(--bn-fill); }
.bn-line { fill: none; stroke: var(--bn-ink); stroke-width: 3.6; stroke-linejoin: round; }
.bn-sketch { fill: none; stroke: var(--bn-ink); stroke-width: 1.2; opacity: .32; }
.bn-fold path { fill: none; stroke: var(--bn-ink); stroke-width: 2.3; stroke-linecap: round; opacity: .8; }
.bn-cere { fill: var(--bn-deep); stroke: var(--bn-ink); stroke-width: 3; }
.bn-stem { fill: var(--bn-deep); stroke: var(--bn-ink); stroke-width: 3; }
.bn-hatchline { stroke: var(--bn-ink); stroke-width: 1.1; }
.bn-shade { opacity: .34; }
.bn-shadow { opacity: .5; }
.bn-edge { stroke: var(--bn-ink); stroke-width: 1.4; opacity: .45; stroke-dasharray: 3 5; }
.bn-node { fill: var(--bn-paper); stroke: var(--bn-ink); stroke-width: 2; }
.bn-hot { stroke-width: 2.4; transform-box: fill-box; transform-origin: center; }
.bn-hot.coral { fill: var(--bn-coral); }
.bn-hot.blue { fill: var(--bn-blue); }
.bn-hot.yellow { fill: var(--bn-yellow); }
.bn-spark path { fill: none; stroke: var(--bn-coral); stroke-width: 5; stroke-linecap: round; }
html[data-motion="playing"] .bn-edge { animation: bn-flow 2.8s linear infinite; animation-delay: var(--d); }
html[data-motion="playing"] .bn-hot { animation: bn-pulse 2.4s ease-in-out infinite; animation-delay: var(--d); }
html[data-motion="playing"] .bn-spark { animation: bn-spark 2.6s ease-in-out infinite; }
html[data-motion="playing"] .bn-spark.r { animation-delay: 1.3s; }
html[data-motion="playing"] .bn-hero { animation: bn-float 6.5s ease-in-out infinite; }
@keyframes bn-flow { to { stroke-dashoffset: -16; } }
@keyframes bn-pulse { 50% { transform: scale(1.45); } }
@keyframes bn-spark { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes bn-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-1.5deg); } }

/* 3. The rider: a smaller brain in the right-hand gutter that travels down the page as you scroll.
      Only where the gutter is wide enough to hold it without touching the text. */
.brain-rider { position: fixed; top: 0; right: 24px; width: 120px; z-index: 40; pointer-events: none; opacity: 0; transition: opacity .45s var(--ease); will-change: transform; }
.brain-rider.on { opacity: 1; }
.brain-rider .bn-shadow { display: none; }
@media (max-width: 1023px) { .brain-rider { display: none; } }
@media print { .brain-rider { display: none; } }

/* 4. World C: headlines rise word by word out of a mask. */
h1.lines .lw, h2.lines .lw { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .03em .14em; margin: -.06em -.03em -.14em; }
.lines .li { display: inline-block; transform: translateY(110%); transition: transform .95s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.lines.lines-in .li { transform: none; }
html[data-motion="paused"] .lines .li { transform: none; transition: none; }

/* 5. World C: text-roll hover on the header links and solid buttons. */
.rolls .tr { display: inline-block; position: relative; overflow: hidden; vertical-align: top; line-height: 1.25; }
.rolls .tr > span { display: inline-block; transition: transform .4s var(--ease); }
.rolls .tr::after { content: attr(data-t); position: absolute; left: 0; top: 100%; white-space: nowrap; transition: transform .4s var(--ease); }
.rolls:hover .tr > span, .rolls:focus-visible .tr > span, .rolls:hover .tr::after, .rolls:focus-visible .tr::after { transform: translateY(-100%); }
html[data-motion="paused"] .rolls .tr > span, html[data-motion="paused"] .rolls .tr::after { transition: none; }

/* 6. World C: a 3D ring of real board pages (client branding hidden), turning as you scroll past. */
.board-ring { --w: clamp(220px, 23vw, 330px); position: relative; height: clamp(280px, 30vw, 420px); margin: 24px 0 0; perspective: 1600px; perspective-origin: 50% 38%; overflow: hidden; overflow: clip; }
.ring-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.ring { position: relative; width: var(--w); aspect-ratio: 640 / 390; transform-style: preserve-3d; transform: rotateX(-7deg); }
.ring-card { position: absolute; inset: 0; margin: 0; transform: rotateY(calc(var(--i) * 36deg)) translateZ(calc(var(--w) * 1.58)); background: #0f1218; border: 2px solid var(--ink); box-shadow: 4px 6px 0 rgba(26, 31, 46, .12); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ring-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ring-card picture { display: block; width: 100%; height: 100%; }
/* Dale's brain behind the ring, in his own colors (same .bn art as the hero version): a backdrop whose dome rises above the cards.
   The stem and ground shadow are left out and the bottom is cropped so only the brain itself shows; the cards cover the rest. */
.ring-brain { position: absolute; left: 50%; top: 0; height: 100%; aspect-ratio: 7 / 6; transform: translateX(-50%); z-index: 0; pointer-events: none; clip-path: inset(0 0 26% 0); }
.ring-brain .bn { height: 100%; }
.ring-brain .bn-stem, .ring-brain .bn-shadow, .ring-brain .bn-spark { display: none; }
.ring-brain .bn, .ring-brain .bn * { animation: none !important; }
html[data-motion="playing"] body.ring-in-view .ring-brain .bn { animation: ring-brain-float 7s ease-in-out infinite !important; }
@keyframes ring-brain-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.ring-stage { z-index: 1; }
body.ring-in-view .brain-rider, body.ring-in-view .brain-rider.on { opacity: 0; }
/* Phones: a bigger ring, full-bleed, readable without a pinch (front card ~230px rendered). Depth comes from perspective on the stage. */
@media (max-width: 640px) {
  .board-ring { --w: 168px; height: 236px; margin: 2px -48px 0; }
  .ring-stage { perspective: 900px; perspective-origin: 50% 50%; transform: translateY(-22px); }
  /* One screen at 390x844: the stat tour tightens so the ring fits under it. */
  #board .board-head { padding-bottom: 6px; }
  #board .tile { min-height: 0; padding: 12px 14px; }
  #board .tile .v { font-size: 32px; margin: 4px 0; }
  #board .tile .why { font-size: 13px; line-height: 1.3; }
  #board .carousel-nav { margin-top: 6px; }
  #board .board-ring { margin-top: 2px; }
  #board .sec-head { margin-bottom: 10px; }
  #board .sec-head h2 { font-size: 30px; }
  #board .sec-head p { font-size: 15px; line-height: 1.35; }
  #board { padding-bottom: 16px; }
}

/* 7. The footer: one big closing line and the ask, then the small print at small-print size. */
.site-footer .foot-lines { font-size: 16px; }
.site-footer .foot-lines p:first-child { font-family: var(--font-display); font-weight: 800; letter-spacing: -.035em; font-size: clamp(32px, 4.3vw, 62px); line-height: 1.04; max-width: 21ch; margin: 0 0 28px; color: var(--bg); }
.site-footer .foot-lines p:not(:first-child) { font-family: var(--font-body); font-weight: 400; letter-spacing: 0; font-size: 16px; line-height: 1.55; max-width: 62ch; margin: 0 0 8px; opacity: .86; }
.site-footer .foot-lines p:last-child { font-size: 13px; opacity: .7; margin-top: 18px; }
.foot-pill { display: inline-flex; align-items: center; gap: 10px; background: var(--coral); color: var(--deep); border: 2px solid var(--bg); border-radius: 999px; padding: 15px 28px; font-family: var(--font-body); font-weight: 700; font-size: 17px; text-decoration: none; margin: 0 0 40px; transform: rotate(-3deg); box-shadow: 4px 5px 0 rgba(0, 0, 0, .28); transition: transform .3s var(--ease); }
.foot-pill:hover, .foot-pill:focus-visible { transform: rotate(0) scale(1.04); color: var(--deep); }

/* 8. Phones: the menu button carries navigation, so the five header links come off. */
@media (max-width: 760px) {
  .header-nav { display: none; }
  .site-footer { padding-bottom: 96px; }
}

/* 9. From the UX review (Oct 15). */
/* Work cards: the films are not in this build (they show the real stores, held until each brand says yes in writing),
   so the empty media boxes come off and the cards read as text. */
.wcard .wcard-media:has(video[poster=""]) { display: none; }
/* Phones: room above the fixed pause and menu buttons wherever a page ends on a form or a short block. */
@media (max-width: 640px) {
  .read-form { margin-bottom: 28px; }
  main .page > section:last-of-type, .sec-ask { padding-bottom: 72px; }
}
/* Between phone and desktop the five header links may wrap rather than overflow. */
.header-nav { flex-wrap: wrap; row-gap: 6px; }

/* 10. From the QA sweep (Oct 15). */
/* B1: the menu's links are direct children of <nav class="menu-panel">, so style them as a list. */
.menu-panel > a { display: flex; justify-content: space-between; align-items: center; min-height: 44px; border-bottom: 1px solid var(--rule); padding: 10px 0 8px; font-size: 13px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; }
.menu-panel > a[aria-current="page"] { color: var(--ink-soft); }
.menu-panel > a[href="/read"] { color: var(--coral-text); font-weight: 700; }
/* H2: cards inside a swipe track are never held back by the scroll reveal. */
.notebook-track .rv { opacity: 1 !important; transform: none !important; }
/* M1: a long proof phrase may not push its grid track wider than a 320px screen. */
.sec-proof .proof-value { min-width: 0; overflow-wrap: anywhere; }
/* L2: secondary links reach a 44px tap target. */
.hero-secondary .link-arrow, .hero-actions a { min-height: 44px; display: inline-flex; align-items: center; }
/* B4 + H1: on phones the pause and menu buttons move up into a sticky header bar, so they never sit on a form,
   a button or a footer link. The header's own CTA steps aside there: every page's hero carries one. */
@media (max-width: 640px) {
  .menu-panel > a { font-size: 14px; }
  .site-header { position: sticky; top: 0; z-index: 60; background: var(--bg); box-shadow: 0 1px 0 rgba(26, 31, 46, .08); padding-right: 124px; min-height: 56px; }
  .site-header > .cta-pill { display: none; }
  .menu-toggle, .motion-toggle, body[data-route="/"] .motion-toggle, body[data-route="/"] .menu-toggle { top: 6px; bottom: auto; width: 44px; height: 44px; box-shadow: none; }
  .menu-toggle, body[data-route="/"] .menu-toggle { right: 12px; left: auto; }
  .motion-toggle, body[data-route="/"] .motion-toggle { right: 64px; left: auto; }
  .site-footer { padding-bottom: 40px; }
  main .page > section:last-of-type, .sec-ask { padding-bottom: 40px; }
  .read-form { margin-bottom: 16px; }
}


/* 12. The menu rolls out from the side (Oct 16). Static layer first; the jet and panel edge are animated next.
   Animation hooks:
     panel      .menu-panel[data-menu-panel]   data-open="true|false"; slide = --panel-x (104% closed, 0% open)
     panel edge .menu-edge[data-panel-edge]    --edge-glow (0..1), the ink line down the panel's left side
     scrim      .menu-scrim
     art layer  .menu-fleet (fixed, pointer-events:none, bottom of the panel) > svg.fleet-svg, viewBox 0 0 360 150
                [data-fleet-deck] [data-fleet-catapult] [data-fleet-marshal] [data-fleet-arm=left|right] [data-fleet-cart]
                [data-fleet-jet] (translate 224 93, nose points left) [data-fleet-steam] [data-fleet-contrail] (pathLength=1)
                --fleet-steam, --fleet-trail set opacity of steam and contrail
     handles    window.conveyMenu, and a "convey:menu" event ({detail:{open}}) on open and close. */
:root { --panel-w: min(85vw, 380px); --fleet-h: 150px; }
.menu-panel[data-menu-panel] {
  position: fixed; top: 0; right: 0; bottom: auto; left: auto;
  width: var(--panel-w); height: 100vh; height: 100dvh; max-height: none;
  display: flex; flex-direction: column;
  padding: 14px 22px calc(var(--fleet-h) + 14px);
  border: 0; border-left: 2px solid var(--ink); border-radius: 0;
  background: var(--bg); color: var(--ink);
  box-shadow: -12px 0 0 rgba(26, 31, 46, .06);
  overflow-y: auto; overscroll-behavior: contain;
  z-index: 1001; opacity: 1; pointer-events: auto; transform-origin: 100% 50%;
  transform: translateX(var(--panel-x, 0%));
  visibility: visible;
  transition: transform .1s var(--ease);
}
.menu-panel[data-menu-panel]:not([data-open="true"]) {
  --panel-x: 104%; visibility: hidden; pointer-events: none;
  transition: transform .2s var(--ease), visibility 0s linear .2s;
}
.menu-panel[data-menu-panel][data-open="true"] { --panel-x: 0%; }
.menu-edge { position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--ink); opacity: var(--edge-glow, 1); pointer-events: none; }
.menu-panel .panel-head { display: flex; align-items: center; margin: 0; min-height: 56px; padding-right: 52px; }
.menu-panel .panel-head .wordmark { font-size: 24px; }
.menu-panel .menu-close { position: absolute; top: 6px; right: 12px; bottom: auto; width: 44px; height: 44px; font-size: 30px; opacity: .85; display: grid; place-items: center; }
.menu-panel > a.menu-cta {
  display: flex; justify-content: center; align-items: center; gap: 10px; box-sizing: border-box;
  min-height: 56px; margin: 6px 0 14px; padding: 0 20px; width: 100%;
  background: var(--coral); color: var(--deep); border: 2px solid var(--ink);
  box-shadow: 3px 4px 0 var(--ink);
  font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: 0; text-transform: none;
}
.menu-panel > a.menu-cta:hover, .menu-panel > a.menu-cta:focus-visible { transform: translate(1px, 1px); box-shadow: 2px 3px 0 var(--ink); color: var(--deep); }
.menu-panel > a:not(.menu-cta) { min-height: 48px; font-size: 15px; }
.menu-panel .panel-sub { margin: auto 0 0; padding-top: 18px; gap: 18px; }
.menu-panel .panel-sub a { display: inline-flex; align-items: center; min-height: 44px; }
.menu-scrim { position: fixed; inset: 0; z-index: 998; background: rgba(26, 31, 46, .38); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s var(--ease), visibility 0s linear .2s; }
.menu-panel[data-open="true"] ~ .menu-scrim { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .1s var(--ease); }
.menu-fleet { position: fixed; right: 0; bottom: 0; width: var(--panel-w); height: var(--fleet-h); z-index: 1002; pointer-events: none; visibility: hidden;
  transform: translateX(104%); transition: transform .2s var(--ease), visibility 0s linear .2s; }
.menu-panel[data-open="true"] ~ .menu-fleet { visibility: visible; transform: none; transition: transform .1s var(--ease); }
.menu-fleet *, .menu-fleet svg { pointer-events: none; }
.fleet-svg { display: block; width: 100%; height: 100%; overflow: visible; }
[data-fleet-steam] { opacity: var(--fleet-steam, .9); }
[data-fleet-contrail] { opacity: var(--fleet-trail, 1); }

/* Pencil scene (graphite art). Built by hero.js [v5:menu-pencil] and shown only once every layer has decoded
   (.menu-fleet[data-fleet-art="pencil"]); until then, and if any image fails, the line-art SVG above stays. Stage is the same
   360 x 150 box, anchored bottom right, scaled by --fs (set by JS, max 1) so the band never exceeds --fleet-h.
   Default state here IS the reduced-motion still frame: jet parked, marshal arm up, no steam, no afterburner.
     Hooks: img.pc-scene, span.pc-steam, span.pc-marshal (img.pc-a idle + img.pc-b signal), span.pc-jet, svg.pc-strokes (4 paths)
     jet box 120 x 63; overlays: [data-pencil-glint] canopy flick, [data-pencil-burner] afterburner (nozzle at 84,50 in the jet box) */
.menu-fleet .fleet-pencil { display: none; position: absolute; right: 0; bottom: 0; width: 360px; height: 150px; transform-origin: 100% 100%; transform: scale(var(--fs, 1)); pointer-events: none; }
.menu-fleet[data-fleet-art="pencil"] .fleet-pencil { display: block; }
.menu-fleet[data-fleet-art="pencil"] .fleet-svg { display: none; }
.menu-fleet .fleet-pencil img { position: absolute; display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.menu-fleet .pc-scene { left: 0; top: 40px; width: 360px; height: 110px; }
.menu-fleet .pc-steam { position: absolute; left: 216px; top: 100px; width: 46px; height: 48.5px; opacity: 0; transform-origin: 50% 70%; }
.menu-fleet .pc-steam img { left: 0; top: 0; width: 46px; height: 48.5px; }
.menu-fleet .pc-marshal { position: absolute; left: 286px; top: 104px; width: 42px; height: 46px; }
.menu-fleet .pc-marshal img { left: 0; top: 0; width: 42px; height: 46px; }
.menu-fleet .pc-marshal .pc-a { opacity: 0; }
.menu-fleet .pc-jet { position: absolute; left: 0; top: 0; width: 120px; height: 63px; transform: translate(169px, 87.1px) scale(.8); transform-origin: 50% 50%; will-change: transform; }
.menu-fleet .pc-jet img { left: 0; top: 0; width: 120px; height: 63px; }
.menu-fleet .pc-jet svg { position: absolute; left: 0; top: 0; width: 120px; height: 63px; overflow: visible; }
.menu-fleet [data-pencil-glint] { opacity: .6; }
.menu-fleet [data-pencil-burner] { opacity: 0; transform-origin: 0 0; transform: translate(84px, 50px); }
.menu-fleet .pc-strokes { position: absolute; left: 0; top: 0; width: 360px; height: 150px; overflow: visible; fill: none; }
.menu-fleet .pc-strokes path { stroke: #4A4F5A; stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 1 1; opacity: 0; }
/* Short screens have no room under the links for the deck: it steps aside rather than crowd them. */
@media (max-height: 620px) { :root { --fleet-h: 0px; } .menu-fleet { display: none; } }
@media (prefers-reduced-motion: reduce) { .menu-panel[data-menu-panel], .menu-scrim, .menu-fleet { transition: none !important; } }
html[data-motion="paused"] .menu-panel[data-menu-panel], html[data-motion="paused"] .menu-scrim, html[data-motion="paused"] .menu-fleet { transition: none !important; }