/* jyoungel.com 2.0 — shared stylesheet
   J. Young El monochrome design system. Figtree only. Weights 400 and 500.
   No shadows on cards, no section borders, no glows, no animated backgrounds. */

@font-face{
  font-family:"Figtree";
  src:url("fonts/figtree-variable.woff2") format("woff2-variations"),url("fonts/figtree-variable.woff2") format("woff2");
  font-weight:300 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Figtree";
  src:url("fonts/figtree-italic-variable.woff2") format("woff2-variations"),url("fonts/figtree-italic-variable.woff2") format("woff2");
  font-weight:300 900;font-style:italic;font-display:swap;
}

:root{
  --font-sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --text-display-xl:56px;--text-display:40px;--text-title:28px;--text-heading:20px;
  --text-body-lg:17px;--text-body:14px;--text-label:12px;--text-caption:11px;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;
  --space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
  --radius-sm:4px;--radius-md:8px;
  --width-grid:1120px;--width-reading:640px;--gutter:24px;--nav-height:64px;--wordmark-h:43px;
  --ease:cubic-bezier(.4,0,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --duration-fast:150ms;--duration-normal:300ms;

  --bg:#FFFFFF;--surface:#F4F4F4;--ink:#303030;--action:#000000;
  --body:#3C3C3C;--muted:#5E5E5E;--hairline:rgba(48,48,48,.16);--glyph:var(--ink);
  --btn-primary-bg:var(--action);--btn-primary-ink:#FFFFFF;
  --btn-secondary-bg:#FFFFFF;--btn-secondary-ink:var(--ink);--btn-secondary-border:rgba(48,48,48,.16);
}
[data-mode="dark"]{
  --bg:#000000;--surface:#1A1A1A;--ink:#FFFFFF;--action:#FFFFFF;
  --body:#D1D1D1;--muted:#919191;--hairline:rgba(255,255,255,.20);--glyph:var(--ink);
  --btn-primary-bg:var(--action);--btn-primary-ink:#303030;
  --btn-secondary-bg:rgba(255,255,255,.10);--btn-secondary-ink:#FFFFFF;--btn-secondary-border:rgba(255,255,255,.30);
  background:var(--bg);color:var(--body);
}
[data-mode="dark-surface"]{
  --bg:#1A1A1A;--surface:#262626;--ink:#FFFFFF;--action:#FFFFFF;
  --body:#D1D1D1;--muted:#919191;--hairline:rgba(255,255,255,.20);--glyph:var(--ink);
  --btn-primary-bg:var(--action);--btn-primary-ink:#303030;
  --btn-secondary-bg:rgba(255,255,255,.10);--btn-secondary-ink:#FFFFFF;--btn-secondary-border:rgba(255,255,255,.30);
  background:var(--bg);color:var(--body);
}
[data-mode="light"]{background:var(--bg);color:var(--body)}
[data-mode="surface"]{background:var(--surface);color:var(--body)}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{overflow-x:hidden;overflow-x:clip;margin:0;font-family:var(--font-sans);font-size:var(--text-body);line-height:1.5;background:#000;color:var(--body);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-weight:500;color:var(--ink);margin:0}
p{margin:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:var(--space-4);top:-60px;z-index:100;background:#fff;color:#303030;padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);font-weight:500;text-decoration:none;transition:top var(--duration-fast) var(--ease)}
.skip:focus{top:var(--space-4)}

/* ---------- type ---------- */
.eyebrow{font-size:var(--text-label);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--space-4)}
.h-hero{font-size:var(--text-display-xl);line-height:1.1;letter-spacing:-.02em}
.h-panel{font-size:var(--text-display);line-height:1.1;letter-spacing:-.02em}
.h-title{font-size:var(--text-title);line-height:1.25;letter-spacing:-.01em}
.lead{font-size:var(--text-body-lg);line-height:1.5;color:var(--body)}
.lines>p+p{margin-top:var(--space-4)}
.link{color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;cursor:pointer}
.link:hover{text-decoration-thickness:2px}
.arrow{color:var(--glyph)}

/* ---------- buttons: the twin pair ---------- */
.btn-row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--space-3);width:fit-content}
.btn{display:inline-flex;align-items:center;justify-content:center;min-width:130px;height:40px;padding:0 24px;font:500 var(--text-body)/1 var(--font-sans);border-radius:var(--radius-sm);text-decoration:none;cursor:pointer;border:1px solid transparent;white-space:nowrap;transition:opacity var(--duration-fast) var(--ease)}
.btn:hover{opacity:.84}
.btn-primary{background:var(--btn-primary-bg);color:var(--btn-primary-ink)}
.btn-secondary{background:var(--btn-secondary-bg);color:var(--btn-secondary-ink);border-color:var(--btn-secondary-border)}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav-height);z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);color:#fff;transition:background var(--duration-normal) var(--ease)}
.nav.solid{background:rgba(0,0,0,.92)}
.nav .brand img{height:var(--wordmark-h);width:auto}
.nav ul{display:flex;gap:var(--space-6);list-style:none;margin:0;padding:0;align-items:center}
.nav ul a{text-decoration:none;font-weight:500;color:#fff;opacity:.86}
.nav ul a:hover{opacity:1}
.nav .btn{--btn-secondary-bg:rgba(255,255,255,.10);--btn-secondary-ink:#fff;--btn-secondary-border:rgba(255,255,255,.30)}
/* ---------- nav items as soft pills (Tesla pattern) ---------- */
.nav ul{gap:var(--space-1)}
.nav ul a:not(.btn),.nav .menu-btn{all:unset;box-sizing:border-box;cursor:pointer;font:500 var(--text-body)/1 var(--font-sans);color:#fff;padding:10px 14px;border-radius:var(--radius-sm);transition:background var(--duration-fast) var(--ease),color var(--duration-normal) var(--ease)}
.nav ul a:not(.btn):hover,.nav .menu-btn:hover,.nav .menu-btn[aria-expanded="true"]{background:rgba(255,255,255,.12)}
.nav ul a:not(.btn):focus-visible,.nav .menu-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.nav .btn{margin-left:var(--space-3)}
.nav .wm-dark{display:none}

/* header goes solid black while the panel is open (dark, like the menu, operator 2026-10-15) */
body.mega-open .nav{background:#000}

/* the full-width panel that drops from under the header */
.mega{position:fixed;left:0;right:0;top:0;z-index:49;background:#000;color:#D1D1D1;padding:calc(var(--nav-height) + var(--space-7)) var(--gutter) var(--space-8);
  transform:translateY(-100%);visibility:hidden;transition:transform 420ms var(--ease-out),visibility 0s linear 420ms}
body.mega-open .mega{transform:none;visibility:visible;transition:transform 420ms var(--ease-out),visibility 0s}
.mega-inner{width:min(100%,var(--width-grid));margin-inline:auto;display:grid;grid-template-columns:1fr auto;gap:var(--space-8)}
.mega-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6) var(--space-5)}
.mega-card{text-align:center}
.mega-title{color:#919191;margin:0 0 var(--space-4)}
.mega-thumb{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;background:#1A1A1A;border-radius:var(--radius-md);margin-bottom:var(--space-4);text-decoration:none;overflow:hidden}
.mega-thumb img{width:100%;height:100%;object-fit:cover}
.mega-name{font-size:var(--text-heading);font-weight:500;color:#fff}
.mega-name a{color:inherit;text-decoration:none}
.mega-name a:hover{text-decoration:underline;text-underline-offset:4px}
.mega-links{margin-top:var(--space-2);display:flex;gap:var(--space-4);justify-content:center}
.mega-links a{color:#919191;font-weight:400;text-decoration:underline;text-underline-offset:3px}
.mega-links a:hover{color:#fff;text-decoration-thickness:2px}
.mega-list{list-style:none;margin:0;padding:0 0 0 var(--space-8);border-left:1px solid rgba(255,255,255,.2);display:grid;gap:var(--space-4);align-content:start;min-width:220px}
.mega-list a{color:#fff;font-weight:500;text-decoration:none}
.mega .fill{color:#919191!important}
.mega-knoxx .mega-links a{color:#C13541}  /* KNOXX keeps its own red, same as the KNOXX section */
.mega-knoxx .mega-links a:hover{color:#E04A57}
.mega-list a:hover{text-decoration:underline;text-underline-offset:3px}
.mega-scrim{position:fixed;inset:0;z-index:48;background:rgba(0,0,0,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity 300ms var(--ease),visibility 0s linear 300ms}
body.mega-open .mega-scrim{opacity:1;visibility:visible;transition:opacity 300ms var(--ease),visibility 0s}
@media (max-width:860px){.mega,.mega-scrim{display:none}}
/* ---------- phones: no orphan words (Jesse, 2026-10-15). Hero beats balance their lines; all other text
   uses "pretty" wrapping, which keeps a last line from holding a single word. ---------- */
@media (max-width:860px){
  p,li,h1,h2,h3,figcaption,blockquote{text-wrap:pretty}
  .band p,.band h1,.h-hero,.h-panel{text-wrap:balance}
}

/* ---------- phones: Tesla-style "Menu" button and full-screen panel, dark version (2026-10-15) ---------- */
.m-btn,.m-panel{display:none}
@media (max-width:860px){
  .nav>nav{display:none}
  .m-btn{all:unset;display:inline-flex;align-items:center;box-sizing:border-box;cursor:pointer;font:500 var(--text-body)/1 var(--font-sans);color:#fff;
    padding:10px 16px;border-radius:var(--radius-sm);background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .m-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .m-panel{display:flex;flex-direction:column;position:fixed;inset:0;z-index:60;background:#000;color:#fff;overflow-y:auto;overscroll-behavior:contain;
    padding:0 var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom,0px));opacity:0;transform:translateX(24px);transition:opacity 260ms var(--ease-out),transform 320ms var(--ease-out)}
  .m-panel[hidden]{display:none}
  .m-panel.open{opacity:1;transform:none}
  .m-top{display:flex;align-items:center;justify-content:space-between;height:var(--nav-height);flex:none}
  .m-top .brand img{height:var(--wordmark-h);width:auto;display:block}
  .m-close{all:unset;box-sizing:border-box;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius-sm);color:#fff}
  .m-close:hover,.m-close:focus-visible{background:rgba(255,255,255,.12)}
  .m-close svg{width:24px;height:24px}
  .m-list{display:flex;flex-direction:column;margin-top:var(--space-4)}
  .m-row{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:space-between;width:100%;
    padding:14px 12px;margin:0 -12px;width:calc(100% + 24px);border-radius:var(--radius-sm);font:500 20px/1.2 var(--font-sans);color:#fff}
  .m-row:hover,.m-row:focus-visible{background:rgba(255,255,255,.08)}
  .m-chev{font-size:24px;line-height:1;color:#919191;transition:transform 260ms var(--ease-out)}
  .m-sub[aria-expanded="true"] .m-chev{transform:rotate(90deg)}
  .m-worlds{padding:var(--space-2) 0 var(--space-5)}
  .m-worlds .eyebrow{color:#919191;margin-bottom:var(--space-3)}
  .m-cards{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
  .m-card{display:block;text-decoration:none;color:#fff;font-weight:500;text-align:center}
  .m-card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-md);margin-bottom:var(--space-2)}
  .m-knoxx span{color:#C13541}
  .m-foot{margin-top:auto;padding-top:var(--space-7)}
  .m-foot .btn{width:100%;--btn-primary-bg:#fff;--btn-primary-ink:#303030}
  body.m-open{overflow:hidden}
}

/* ---------- layout ---------- */
.wrap{width:min(100% - 2*var(--gutter),var(--width-grid));margin-inline:auto}
.panel{padding:var(--space-10) 0}
@media (max-width:720px){
  :root{--text-display-xl:34px;--text-display:28px}
  .panel{padding:var(--space-9) 0}
}

/* ---------- hero ---------- */
/* #080808 is the video's own background (Jesse, 2026-10-15), so the page around and under it matches */
.hero-scrub{position:relative;height:2200vh;background:#080808}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#080808}
.stage .poster,.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 30%}
.stage .poster{background:#080808 center/cover no-repeat;background-position:70% 30%}
.stage video{opacity:0;transition:opacity 600ms var(--ease);will-change:transform;transform:translateZ(0)}
.stage.video-ready video{opacity:1}
/* tiny halftone dot screen over the hero video so it reads less "smooth".
   Operator's call 2026-10-15: an exception to the design system's sub-brand-only texture rule. */
.stage .halftone,.hero-static .halftone,.knoxx-art .halftone{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,.42) 0,rgba(0,0,0,.42) .6px,rgba(0,0,0,0) .95px);
  background-size:3px 3px}
.stage .panel-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,#080808 0%,#080808 30%,rgba(8,8,8,0) 54%)}
.ring{position:absolute;right:var(--space-6);bottom:var(--space-6);width:28px;height:28px;color:rgba(255,255,255,.55);transition:opacity 400ms var(--ease)}
.stage.video-ready .ring,.stage.video-failed .ring{opacity:0}

.band{position:absolute;left:max(var(--space-7),calc((100vw - var(--width-grid))/2));top:50%;transform:translateY(-50%);width:min(40vw,520px);color:#fff;opacity:0;--k:0;pointer-events:none}
.band.live{pointer-events:auto}
.band p{color:#D1D1D1}
.band .h-hero,.band .h-panel{color:#fff}
.band .btn-primary{--btn-primary-bg:#fff;--btn-primary-ink:#303030}
.band .btn-secondary{--btn-secondary-bg:rgba(255,255,255,.10);--btn-secondary-ink:#fff;--btn-secondary-border:rgba(255,255,255,.30)}

/* Every beat assembles fully the moment it appears (class-triggered, not tied to scroll position),
   so stopping mid-scroll never leaves a line half built. Words rise in reading order,
   then the smaller lines, then the buttons. Scrolling back up reverses it. */
.band{width:min(44vw,600px)}
.band>*+*{margin-top:var(--space-6)}          /* space between groups */
.band .grp>*+*{margin-top:var(--space-2)}     /* space inside a group */
.band .sub>*+*{margin-top:var(--space-1)}
.band .lead{color:#D1D1D1}
.w{display:inline-block;opacity:0;transform:translateY(22px);transition:opacity 520ms var(--ease-out),transform 620ms var(--ease-out);transition-delay:calc(var(--i,0)*45ms)}
.band.on .w{opacity:1;transform:none}
.band .sub,.band .btn-row,.band .cue,.band .logos-link{opacity:0;transform:translateY(10px);transition:opacity 520ms var(--ease-out),transform 620ms var(--ease-out);transition-delay:calc(var(--n,8)*45ms + 160ms)}
.band.on .sub,.band.on .btn-row,.band.on .cue,.band.on .logos-link{opacity:1;transform:none}

/* THE WORLD METHOD: italic by operator call (2026-10-14), a one-line exception to the qualifier-only italic rule */
.method{font-style:italic}

/* the scroll cue under the first beat; fades out as soon as scrolling starts */
.band .cue{font-size:var(--text-label);font-weight:500;color:#919191}
.band.on .cue.gone{opacity:0}
.cue .arrow{display:inline-block;color:#919191;margin-left:4px}

/* name drop: 4 across with generous space; the whole beat rolls upward with the scroll
   (JS sets --roll), so the grid can be as long as the list. Each logo lights as it rises into view. */
.band-logos{top:0;bottom:0;transform:none;width:min(calc(56vw - 160px),620px);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 82%,transparent 100%)}
.band-logos .roll{position:absolute;left:0;right:0;top:0;transform:translateY(var(--roll,60vh));will-change:transform}
.band-logos .roll>*+*{margin-top:var(--space-8)}
.logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-7) var(--space-6)}
.logos li{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;border:1px dashed rgba(255,255,255,.22);border-radius:var(--radius-sm);opacity:0;transform:translateY(14px);transition:opacity 500ms var(--ease-out),transform 600ms var(--ease-out)}
.logos li.lit{opacity:1;transform:none}
.logos li span{font-size:var(--text-label);color:#919191;font-weight:500;text-align:center;padding:0 var(--space-2)}
.logos li img{width:100%;height:100%;object-fit:contain;padding:12%}
.logos li.has-logo{border-color:transparent}  /* real logos float free; only the waiting text tiles keep the dashed outline */
.band-logos .logos-link{display:block;color:#D1D1D1;opacity:1;transform:none;margin:var(--space-7) 0 0}
.band-logos .grp .sub,.band-logos .logos-link{margin-left:4px}  /* both small lines sit 4px in from the heading's edge */
/* "Tag along…" is the line itself as a link to the signup form */
.band .tag-link{color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px;cursor:pointer;transition-delay:80ms}
.band .tag-link:hover{text-decoration-thickness:3px}
.band .h-panel.sub{color:#fff}
/* a delayed second beat inside a small line ("Just kidding...") */
.band .late{opacity:0;transition:opacity 500ms var(--ease-out);transition-delay:0ms}
.band.on .late{opacity:1;transition-delay:1400ms}
.band.on .late.later{transition-delay:2600ms}   /* "(Keep scrolling)" lands a beat after "Just kidding..." */
/* styled like the first beat's "Scroll down ↓" cue */
.band .keep{font-size:var(--text-label);font-weight:500;color:#919191;margin-top:var(--space-3)}
.band .keep .arrow{display:inline-block;color:#919191;margin-left:4px}

.hero-static{display:none;position:relative;min-height:100vh;min-height:100svh;background:#080808;color:#fff;overflow:hidden}
.hero-static .bg{position:absolute;inset:0;background:#080808 url("hero-ending-1200.jpg") 77% 15%/cover no-repeat}
.hero-static .shade{position:absolute;inset:0;background:linear-gradient(to top,#080808 0%,#080808 46%,rgba(8,8,8,.55) 70%,rgba(8,8,8,0) 100%)}
.hero-static .copy{position:relative;padding:calc(var(--nav-height) + 38vh) var(--gutter) var(--space-8);max-width:620px}
.hero-static .copy>*+*{margin-top:var(--space-4)}
.hero-static p{color:#D1D1D1}
.hero-static .h-hero{color:#fff}
.hero-static .btn-primary{--btn-primary-bg:#fff;--btn-primary-ink:#303030}
.hero-static .btn-secondary{--btn-secondary-bg:rgba(255,255,255,.10);--btn-secondary-ink:#fff;--btn-secondary-border:rgba(255,255,255,.30)}
.hero-static .divider-space{height:var(--space-4)}

/* Phones and portrait tablets: the scroll hero stays (2026-10-15). The tall video is pinned to the top at full width
   so the face stays clear; every line sits at the bottom over a scrim. Must match PHONE in home.js. */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse){
  /* smaller head with head room (2026-10-15): the video is sized by screen height, centred, dropped below the nav,
     and fades out at its bottom and sides into the black so its edges never show */
  /* head size: 75svh (Jesse, 2026-10-16; split between 70svh and a staged 80svh), never wider than the screen.
     The edges, top included, fade into the #080808 behind so the box never shows. */
  .stage .poster,.stage video{inset:auto;left:50%;top:calc(var(--nav-height) + 2svh);height:min(75svh,calc(100vw * 1080 / 608));width:auto;aspect-ratio:608/1080;transform:translateX(-50%);
    object-fit:cover;object-position:center top;background-position:center top;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 62%,transparent 100%),linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
    -webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 62%,transparent 100%),linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);mask-composite:intersect}
  /* phones: the hero follows the video's own background, read live from the frame by home.js into --hb ("r,g,b").
     Jesse measured #101010 (dark start) to #121212 (face lit). The PAGE matches the VIDEO — never re-grade the video. */
  .hero-scrub{--hb:16,16,16}
  .hero-scrub,.stage{background:rgb(var(--hb))}
  .stage .poster{background-color:rgb(var(--hb))}
  .stage .panel-scrim{background:linear-gradient(to top,rgb(var(--hb)) 0%,rgb(var(--hb)) 14%,rgba(var(--hb),.75) 26%,rgba(var(--hb),0) 40%)}
  .band{left:var(--gutter);right:var(--gutter);width:auto;top:auto;bottom:calc(var(--space-8) + env(safe-area-inset-bottom,0px));transform:none}
  .band>*+*{margin-top:var(--space-4)}
  /* every hero line centred on phones (Jesse, 2026-10-15) */
  .band{text-align:center}
  .band .btn-row{margin-inline:auto}
  .band-logos .grp .sub,.band-logos .logos-link{margin-left:0}
  .band .h-panel{font-size:24px;line-height:1.25}
  /* name drop: the logo grid rolls up the whole screen, over a darker wash so the logos read across the face */
  /* the beat spans the full width so its dark wash (::before) reaches both screen edges; the logos keep the gutter */
  .band-logos{top:0;bottom:0;left:0;right:0;width:auto}
  .band-logos .roll{left:var(--gutter);right:var(--gutter)}
  .band-logos::before{content:"";position:fixed;inset:0;z-index:-1;background:rgba(var(--hb),.88)}   /* darkened from .72 (Jesse, 2026-10-15) so the logos read better */
  .logos{grid-template-columns:1fr;gap:var(--space-4);width:min(100%,200px);margin-inline:auto}   /* one column on phones (Jesse, 2026-10-15; was 2) */
  /* a longer hero on phones: 2800vh keeps the other beats' pace, plus room for the name drop's extra scroll
     (SLOW in home.js: 2800 × (0.83 + 0.17 × 2.2) ≈ 3370) so the logo roll moves at about half finger speed */
  .hero-scrub{height:3370vh}
}

/* The two still-hero gates (was five). Must match GATES in home.js character for character. */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 560px){.hero-scrub{display:none}.hero-static{display:block}}
@media (prefers-reduced-motion: reduce){.hero-scrub{display:none}.hero-static{display:block}}
@media (max-height:560px){.ring{display:none}}

/* ---------- 5.1 feature card ---------- */
.feature{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-8);align-items:start}
.feature .lines p{font-size:var(--text-body-lg)}
.feature ul{list-style:none;padding:0;margin:var(--space-4) 0;display:grid;gap:var(--space-3)}
.feature li{display:grid;grid-template-columns:20px 1fr;align-items:baseline;font-size:var(--text-body-lg);color:var(--body)}
.signup{background:var(--surface);border-radius:var(--radius-md);padding:var(--space-7) var(--space-6)}
.signup label{display:block;font-weight:500;color:var(--ink);margin-bottom:var(--space-2)}
.field{display:grid;gap:var(--space-3)}
.field input{height:44px;padding:0 var(--space-4);border-radius:var(--radius-sm);border:1px solid var(--hairline);background:var(--bg);color:var(--ink);font:400 16px var(--font-sans)}
.field input:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.field .btn{width:100%}
.micro{font-size:var(--text-caption);color:var(--muted);margin-top:var(--space-3)}
.form-done{display:none;font-size:var(--text-body-lg);color:var(--ink);font-weight:500}
form.done .field,form.done .micro{display:none}
form.done .form-done{display:block}
/* the success key (final-icons.js) draws in once the form flips to done */
.form-done .ico{display:block;width:150px;height:150px;margin:0 auto var(--space-4);overflow:visible}
/* the Seedance key loop: soft round edges so its own dark grid melts into the section */
.form-done .key-vid{display:block;width:200px;height:200px;margin:0 auto var(--space-3);object-fit:cover;
  -webkit-mask-image:radial-gradient(closest-side,#000 84%,transparent 100%);mask-image:radial-gradient(closest-side,#000 84%,transparent 100%);
  opacity:0;transform:scale(.92);transition:opacity 500ms var(--ease-out),transform 600ms var(--ease-out)}
form.drawn .form-done .key-vid{opacity:1;transform:none}
form:not(.drawn) .form-done .ico .ln{stroke-dashoffset:1;transition:none}
.ico .ln.nd{stroke-dasharray:none;transition:opacity 400ms var(--ease-out) 250ms}
form:not(.drawn) .form-done .ico .ln.nd{opacity:0}
.err{color:var(--ink);font-size:var(--text-label);margin-top:var(--space-2);min-height:1em}
@media (max-width:860px){.feature{grid-template-columns:1fr;gap:var(--space-7)}}

/* ---------- 5.2 collabs ---------- */
.collabs{padding:var(--space-8) 0}
.collabs .label{font-size:var(--text-label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:var(--space-5)}
.collabs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-7);align-items:baseline}
.collabs li{font-size:var(--text-heading);font-weight:500;color:var(--ink);letter-spacing:-.01em}

/* ---------- 5.3 problem ---------- */
.problem .col{max-width:var(--width-reading)}
#story,#start{scroll-margin-top:var(--nav-height)}
/* the 4-act story video: a 9:16 box on the left that pins while the text scrolls on the right.
   The box is as tall as the screen allows (minus the nav and a little air) and never wider than its column. */
.story-pin{display:none}
@media (min-width:861px){
  .problem .story-split{display:grid;grid-template-columns:1fr 2fr;gap:var(--space-8);align-items:start}  /* video 1/3, text 2/3 */
  /* --sh is the board's height (column-width bound or screen-height bound); --off centres it between the nav's
     bottom edge and the screen's bottom edge */
  .story-pin{--sh:min(calc((min(100vw - 2 * var(--gutter), var(--width-grid)) - var(--space-8)) / 3 * 16 / 9), calc(100vh - var(--nav-height) - 2 * var(--space-5)));
    --off:calc((100vh - var(--nav-height) - var(--sh)) / 2);
    display:block;position:sticky;top:calc(var(--nav-height) + var(--off));margin-top:calc(var(--off) - var(--space-10))}  /* starts at the same height it pins at, so the whole frame is on screen from the first moment */
  .story-stage{position:relative;aspect-ratio:9/16;width:min(100%, calc((100vh - var(--nav-height) - 2 * var(--space-5)) * 9 / 16));margin-inline:auto;overflow:hidden;border-radius:var(--radius-md);background:transparent;
    translate:calc((var(--space-8) - (100vw - min(100vw - 2 * var(--gutter), var(--width-grid))) / 2) / 2) 0}  /* centred between the screen's left edge and the text, not hugging the text */
  /* the section is painted with the video's background colour (story-video.js), so text goes near-black
     to stay readable on every board colour, coral included */
  .problem.tinted{background:#FFFFFF}   /* v5's first board is white */
  /* intro (2026-10-16, Jesse): no zoom, no fade. The video box scrolls in with the header, locks into its spot and
     holds on frame one until Phase 2 starts rising. clip, not hidden, so the box still pins. */
  .problem.tinted{overflow:clip}
  .problem.tinted .col{position:relative;z-index:1}
  /* the stack: each block locks under the one before (tops set by story-video.js, 48px apart); the marks between them
     carry the scroll room, and the stack's bottom padding holds the finished list for a moment before it all moves on */
  .problem.tinted .wm-lock{position:sticky;top:var(--nav-height)}
  .problem.tinted .wm-mark{margin-top:30vh}
  .problem.tinted .wm-end{height:30vh}   /* a real spacer: sticky blocks ignore their container's padding */
  .problem.tinted .wm-stack{display:flex;flex-direction:column}   /* flex: margins add up instead of collapsing, so the release offsets in story-video.js stay exact */
  .problem.tinted .story-stage{border-radius:0;-webkit-mask-image:radial-gradient(closest-side,#000 82%,transparent 100%);mask-image:radial-gradient(closest-side,#000 82%,transparent 100%)}  /* soft edges: no box line between the video and the painted section */
  .problem.tinted .eyebrow{color:#2A2A2A}
  .problem.tinted .lines p{color:#141414}
  .problem.tinted .h-panel,.problem.tinted strong{color:#000}
  .story-stage .story-poster,.story-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
  .story-stage .story-poster{background:#FFFFFF url("problem-act0.jpg") center/cover no-repeat}   /* v5 opens on the white board */
  /* Act 1 lift, set by story-video.js: the frame slides up, and its bottom edge fades out while it's lifted */
  .story-stage .story-poster,.story-stage video{transform:translate3d(0,calc(var(--lift,0px) * -1),0);-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--lift-fade,0px)),transparent 100%);mask-image:linear-gradient(to bottom,#000 calc(100% - var(--lift-fade,0px)),transparent 100%)}
  .story-stage video{opacity:0;transition:opacity 500ms var(--ease)}
  .story-stage.video-ready video{opacity:1}
  .problem .col{width:auto;margin-left:0}  /* the box stops pinning when the text column ends, so it scrolls away with the button */
}
/* phones and reduced motion: the four boards show as stills above their lines */
.story-still{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center;border-radius:var(--radius-md);margin:var(--space-6) 0 var(--space-5)}
@media (min-width:861px){.story-still{display:none}}
@media (min-width:861px) and (prefers-reduced-motion: reduce){.story-pin{display:none}.problem .story-split{grid-template-columns:1fr}.problem .col{width:50%;margin-left:auto;padding-top:0}.story-still{display:block;max-width:420px}}
.problem .h-panel{margin-bottom:var(--space-7)}
.problem .lines p{font-size:var(--text-heading);line-height:1.4;color:var(--body)}
.problem .lines>*+*{margin-top:var(--space-7)}
@media (max-width:860px){.problem .lines>.story-still+*{margin-top:0}}
@media (min-width:861px) and (prefers-reduced-motion: reduce){.problem .lines>.story-still+*{margin-top:0}}  /* doubled 2026-10-15: room for this section's own scroll video later */
.problem .hl{display:block}
.problem .hl+.hl{margin-top:var(--space-4)}
.problem strong{color:var(--ink);font-weight:500}
.problem .example-h{margin:var(--space-10) 0 var(--space-7)}
.problem .wm-stack .example-h{margin:var(--space-8) 0 0}   /* in the stack its mark adds 48px, so the gap stays about the same on phones */
@media (min-width:861px){.problem.tinted .wm-stack .example-h{margin:0}}   /* desktop: the mark carries the scroll room */
.problem .story-btn{margin-top:var(--space-7)}
/* WORLD Method phase subheads (2026-10-16, Jesse: make them stand out): bigger, ink, an arrow in front,
   the phase name bold, and the tagline pulled up close underneath so each phase reads as one unit */
/* the headline's second line is a subtitle: smaller, lighter and quieter than "The WORLD Method" (Jesse) */
.problem .hl-sub{font-size:var(--text-heading);font-weight:400;line-height:1.4;letter-spacing:0;color:var(--body)}
.problem .hl+.hl-sub{margin-top:var(--space-3)}
.problem.tinted .hl-sub{color:#141414}
.problem .lines .phase-h{font-size:var(--text-title);line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.problem .lines .phase-h strong{font-weight:700}
.problem .lines .phase-h .arrow{display:inline-block;margin-right:var(--space-2);color:inherit}
.problem .lines .phase-h+p{margin-top:var(--space-3)}
/* the WORLD Method stack's pieces: the header and each phase are their own blocks, with a zero-height mark before each
   phase. The marks give the 48px between blocks (desktop swaps that for scroll room, see .problem.tinted above) */
.wm-mark{display:block;height:0;margin-top:var(--space-7)}
.wm-end{display:block;height:0}
.problem .wm-head .h-panel{margin-bottom:0}
.problem.tinted .lines .phase-h{color:#000}

/* ---------- 5.4 doors ---------- */
.doors-head{margin-bottom:var(--space-7)}
.doors{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
.door{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);border-radius:var(--radius-md);background:var(--surface);color:var(--body);cursor:pointer;border:1px solid transparent;transition:background var(--duration-normal) var(--ease),color var(--duration-normal) var(--ease),border-color var(--duration-normal) var(--ease)}
.door .num{font-size:var(--text-title);font-weight:500;color:var(--ink);line-height:1}
.door h3{font-size:var(--text-heading);line-height:1.25}
.door p{font-size:var(--text-body);line-height:1.5}
.door strong{font-weight:500;color:var(--ink)}
.door:hover{border-color:var(--hairline)}
.door[aria-pressed="true"]{background:#000;color:#D1D1D1}
.door[aria-pressed="true"] h3,.door[aria-pressed="true"] .num,.door[aria-pressed="true"] strong{color:#fff}
.door:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.answer{margin-top:var(--space-7);min-height:5.5em}
.answer .pick{font-size:var(--text-heading);color:var(--ink);font-weight:500;max-width:46ch}
.answer .hint{font-size:var(--text-body-lg);color:var(--muted)}
.answer .go{display:inline-block;margin-top:var(--space-4)}
.answer .all{display:none}
@media (max-width:980px){.doors{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.doors{grid-template-columns:1fr}}

/* ---------- 5.5 about (portrait panel) ---------- */
.about{position:relative;overflow:hidden;background:#000;color:#D1D1D1}
.about .bg{position:absolute;inset:0;background:#000 url("hero-ending.jpg") 78% 30%/cover no-repeat}
.about .scrim{position:absolute;inset:0;background:linear-gradient(to right,#000 0%,#000 38%,rgba(0,0,0,0) 62%)}
.about .wrap{position:relative}
.about .col{max-width:480px}
.about .h-panel{color:#fff;margin-bottom:var(--space-6)}
.about .lines p{font-size:var(--text-body-lg);color:#D1D1D1}
.about .lines p.pair{margin-top:var(--space-4)}
.about .lines p.pair+p.pair2{margin-top:0}
.about .btn{margin-top:var(--space-7)}
@media (max-width:860px){
  .about .bg{background-position:85% 0%;background-size:auto 60%;background-repeat:no-repeat;opacity:.5}
  .about .scrim{background:linear-gradient(to bottom,rgba(0,0,0,.2) 0%,#000 45%)}
  .about .col{max-width:none;padding-top:28vh}
}

/* ---------- 5.6 knoxx ---------- */
/* KNOXX: off-black with KNOXX red (#C13541) on the headline and link, operator's call 2026-10-15 */
.knoxx{position:relative;overflow:hidden;min-height:min(78vh,720px);display:flex;align-items:center;background:#141414}
.knoxx .h-panel{color:#C13541}
.knoxx .lines p{color:#D1D1D1}
.knoxx .link{color:#C13541}
.knoxx .link .arrow{color:#C13541}
.knoxx .wrap{position:relative;z-index:1}
.knoxx-copy{max-width:min(46%,520px)}
.knoxx-copy .h-panel{margin-bottom:var(--space-6)}
.knoxx-logo{display:block;width:160px;height:auto;margin:0 0 var(--space-2) -8px}  /* native size: the source file is only 160px wide */
.knoxx .lines p{font-size:var(--text-body-lg)}
.knoxx .lines p+p{margin-top:var(--space-3)}
.knoxx .link{display:inline-block;margin-top:var(--space-5);font-size:var(--text-body-lg)}
.knoxx-pin{display:contents}
@media (max-width:860px){.knoxx-pin{display:block}}
@media (max-width:860px) and (prefers-reduced-motion: reduce){.knoxx-pin{height:auto!important}.knoxx-art{position:relative!important;height:56vw!important;max-height:420px!important}}
.knoxx-art{position:absolute;top:0;bottom:0;right:0;width:80%;background:#141414 url("knoxx-bo2.jpg") 70% center/cover no-repeat}
.knoxx-art::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to right,#141414 0%,rgba(20,20,20,.9) 22%,rgba(20,20,20,.55) 40%,rgba(20,20,20,0) 62%)}  /* scrim reaches further right, behind the copy */
/* KNOXX scene: positioned by home.js to match the cover crop; drifts like a handheld camera */
.knoxx-art{overflow:hidden}
.knoxx-scene{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:60% 50%;animation:handheld 11s ease-in-out infinite}
.knoxx-scene>*{position:absolute;inset:0;width:100%;height:100%;display:block}
.knoxx-still,.knoxx-loop{object-fit:cover}
.knoxx-loop{opacity:0;transition:opacity 700ms var(--ease)}
.knoxx-loop.ready{opacity:1}
/* once the Seedance loop is playing it carries the sway, light pulses and embers itself, so the code versions stand down */
.knoxx-scene.vfx{animation:none;transform:none}
.knoxx-scene.vfx .kg,.knoxx-scene.vfx .knoxx-embers{display:none}
@keyframes handheld{
  0%,100%{transform:scale(1.045) translate(0,0) rotate(0deg)}
  18%{transform:scale(1.045) translate(-.35%,.22%) rotate(-.14deg)}
  41%{transform:scale(1.045) translate(.28%,-.18%) rotate(.1deg)}
  63%{transform:scale(1.045) translate(-.18%,-.3%) rotate(-.06deg)}
  82%{transform:scale(1.045) translate(.24%,.2%) rotate(.12deg)}}
/* light pulses, blended onto the art at the ring, the blue neon arc, the light bars and his neck cables */
.kg{mix-blend-mode:screen;pointer-events:none;opacity:0}
.kg-ring{background:radial-gradient(circle at 38.5% 49%,rgba(255,170,40,.55) 0,rgba(255,120,20,.25) 14%,rgba(255,90,0,0) 27%);animation:pulseA 4.2s ease-in-out infinite}
.kg-neon{background:radial-gradient(ellipse 14% 9% at 69% 5%,rgba(60,170,255,.7),rgba(60,170,255,0));animation:pulseB 5.3s ease-in-out infinite}
.kg-bars{background:radial-gradient(ellipse 5% 12% at 88% 17%,rgba(80,190,255,.8),rgba(80,190,255,0));animation:flicker 2.6s steps(1,end) infinite}
.kg-neck{background:radial-gradient(ellipse 9% 13% at 77% 66%,rgba(255,120,30,.6),rgba(255,120,30,0));animation:pulseA 3.1s ease-in-out infinite reverse}
@keyframes pulseA{0%,100%{opacity:.25}50%{opacity:.85}}
@keyframes pulseB{0%,100%{opacity:.2}40%{opacity:.75}70%{opacity:.4}}
@keyframes flicker{0%{opacity:.5}12%{opacity:.85}20%{opacity:.4}34%{opacity:.9}61%{opacity:.55}78%{opacity:.95}90%{opacity:.45}}
/* entrance: the art powers on (fades up from dark, settles from a slight zoom), then the copy steps in, then the lights */
.knoxx.anim .knoxx-art{opacity:0;filter:brightness(.2) saturate(.6);transform:scale(1.06);transition:opacity 900ms var(--ease-out),filter 1400ms var(--ease-out),transform 1600ms var(--ease-out)}
.knoxx.anim.is-in .knoxx-art{opacity:1;filter:none;transform:none}
.knoxx.anim .kg,.knoxx.anim .knoxx-embers{visibility:hidden}
.knoxx.anim.lit .kg,.knoxx.anim.lit .knoxx-embers{visibility:visible}
.knoxx.anim .knoxx-copy [data-reveal]{transition-duration:800ms}
.knoxx.anim .knoxx-logo[data-reveal]{transform:translateY(18px) scale(.9)}
.knoxx.anim .knoxx-logo[data-reveal].in{transform:none}
@media (prefers-reduced-motion: reduce){.knoxx-scene{animation:none}.knoxx-loop,.kg,.knoxx-embers{display:none}}
@media (max-width:860px){
  .knoxx{display:block;min-height:0;padding-top:0}
  /* phones (2026-10-15): the art starts a full screen tall, pinned under the nav, and shrinks to the banner as the
     copy scrolls up beneath it (height set by home.js). The pin is one screen tall, so the shrink ends exactly as the
     art reaches banner size, then both scroll away together. */
  .knoxx{overflow:clip}   /* clip, not hidden: a hidden overflow would stop the art from pinning */
  .knoxx-pin{height:calc(100vh - var(--nav-height));height:calc(100svh - var(--nav-height))}
  .knoxx-art{position:sticky;top:var(--nav-height);width:100%;height:100%;max-height:none;background-position:62% center}
  .knoxx-art::before{background:linear-gradient(to top,#141414 0%,rgba(20,20,20,0) 45%)}
  .knoxx-copy{max-width:none;padding-top:var(--space-6)}
}
/* desktop (2026-10-16, Jesse: intro the same way as phones): the section pins one screen tall under the nav. The art
   starts full screen with no scrim, then narrows into its right-hand 80% as you scroll (--kx 0 to 1, set by
   home.js), and after that the copy scrolls in one piece at a time. .kx-pin is added by home.js, so without JS the
   section keeps its plain layout. --kx-range is the extra scroll the whole intro takes. */
@media (min-width:861px) and (prefers-reduced-motion: no-preference){
  .knoxx.kx-pin{--kx-range:150vh;display:block;min-height:0;padding-block:0;overflow:clip;height:calc(100vh - var(--nav-height) + var(--kx-range))}
  .knoxx.kx-pin .knoxx-pin{display:block;position:sticky;top:var(--nav-height);height:calc(100vh - var(--nav-height))}
  .knoxx.kx-pin .knoxx-art{width:calc(100% - 20% * var(--kx,0))}
  /* the scrim is always solid at the art's left edge and its stops widen with --kx, so the edge is soft the whole
     way (fading its opacity instead left a hard line until the end) */
  .knoxx.kx-pin .knoxx-art::before{background:linear-gradient(to right,#141414 0%,rgba(20,20,20,.9) calc(22% * var(--kx,0)),rgba(20,20,20,.55) calc(40% * var(--kx,0)),rgba(20,20,20,0) calc(62% * var(--kx,0)))}
  .knoxx.kx-pin .wrap{position:sticky;top:var(--nav-height);height:calc(100vh - var(--nav-height));margin-top:calc(var(--nav-height) - 100vh);display:flex;align-items:center}
}

/* ---------- 5.7 reviews ---------- */
.reviews .h-panel{margin-bottom:var(--space-7)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.quote{background:var(--surface);border-radius:var(--radius-md);padding:var(--space-6);display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-6);min-height:220px}
.quote p{font-size:var(--text-body-lg);color:var(--ink)}
.quote .who{font-size:var(--text-label);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:500}
.fill{color:var(--muted)!important;font-weight:400}
@media (max-width:860px){.quotes{grid-template-columns:1fr}}

/* ---------- 5.7 articles: a slider of 5:7 cards (thumbnail, date, title, Read →).
   Three full cards sit exactly inside the content width; the cards beyond them are cut off at the screen edges.
   Phones show one card with the next one peeking in. ---------- */
.articles{--width-slider:1320px}  /* the slider gets a wider lane than the page grid so the cards can be bigger */
.articles .slider-head{width:min(100% - 2*var(--gutter),var(--width-slider))}
.slider-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-7)}
.slider-head .h-panel{margin-bottom:0}
.slide-btns{display:flex;gap:var(--space-3);flex:none}
.slide-btn{width:52px;height:52px;border-radius:50%;border:0;background:var(--btn-primary-bg);color:var(--btn-primary-ink);font-size:20px;line-height:1;display:grid;place-items:center;cursor:pointer;transition:opacity var(--duration-fast) var(--ease),transform var(--duration-fast) var(--ease)}
.slide-btn:hover:not(:disabled){transform:scale(1.06)}
.slide-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.slide-btn:disabled{opacity:.18;cursor:default}
.essay-track{--edge:max(var(--gutter), (100% - var(--width-slider)) / 2);list-style:none;margin:0;padding:0 var(--edge) var(--space-3);scroll-padding-inline:var(--edge);display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * var(--space-5)) / 3);gap:var(--space-5);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}
.essay-track::-webkit-scrollbar{display:none}
@media (hover:hover) and (pointer:fine){.essay-track{cursor:grab}}
.essay-track.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.essay-track.dragging .essay{pointer-events:none}
.essay-track img{-webkit-user-drag:none;user-select:none}
.essay-track>li{scroll-snap-align:start;display:flex}
.essay{display:flex;flex-direction:column;width:100%;aspect-ratio:5/7;background:var(--surface);border-radius:var(--radius-md);overflow:hidden;text-decoration:none;color:var(--ink)}
.essay-thumb{display:block;aspect-ratio:16/9;background:#E6E6E6;overflow:hidden}
.essay-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--duration-normal) var(--ease-out)}
.essay:hover .essay-thumb img{transform:scale(1.03)}
.essay-thumb-text{display:flex;flex-direction:column;justify-content:center;gap:var(--space-3);padding:var(--space-5);background:#000;color:#fff}
.essay-thumb-text .k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#919191}
.essay-thumb-text .t{font-size:26px;font-weight:600;line-height:1.1;letter-spacing:-.01em}
.essay-body{display:flex;flex-direction:column;flex:1;padding:var(--space-6) var(--space-5) var(--space-6)}
.essay-meta{font-size:var(--text-label);color:var(--muted)}
.essay-title{margin:var(--space-4) 0 var(--space-6);font-size:clamp(26px, 2.3vw, 32px);font-weight:500;line-height:1.18;letter-spacing:-.015em}
.essay-go{margin-top:auto;font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.essay-go .arrow{display:inline-block;margin-left:4px;text-decoration:none;transition:transform var(--duration-fast) var(--ease)}
.essay:hover .essay-go .arrow{transform:translateX(4px)}
.essay:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:860px){.slide-btn{width:44px;height:44px;font-size:18px}.essay-track{grid-auto-columns:86%}}
/* cards animate in as they slide into view and off as they slide out on the left:
   each rises from a soft blur into focus while its thumbnail wipes up; leaving cards drift left, shrink and blur out.
   home.js adds .anim (only when motion is allowed), then toggles .in / .left per card. --d staggers a batch. */
.essay-track.anim>li{opacity:0;transform:translateY(36px) scale(.965);filter:blur(10px);transition:opacity 560ms var(--ease-out),transform 720ms var(--ease-out),filter 560ms var(--ease-out);transition-delay:var(--d,0ms)}
.essay-track.anim>li.left{transform:translateX(-36px) scale(.94)}
.essay-track.anim>li.in{opacity:1;transform:none;filter:blur(0)}
.essay-track.anim .essay-thumb img{clip-path:inset(100% 0 0 0);transform:scale(1.14);transition:clip-path 820ms var(--ease-out),transform 900ms var(--ease-out);transition-delay:calc(var(--d,0ms) + 90ms)}
.essay-track.anim>li.in .essay-thumb img{clip-path:inset(0 0 0 0);transform:scale(1)}
.essay-track.anim.dragging>li{transition-delay:0ms}

/* ---------- 5.9 final ---------- */
/* ---------- legal pages (privacy.html, cookies.html): plain reading column on white ---------- */
.legal-nav{background:#000}
.legal-nav .back{color:#fff;text-decoration:none;font-weight:500;opacity:.86}
.legal-nav .back:hover{opacity:1}
.legal{padding:calc(var(--nav-height) + var(--space-9)) 0 var(--space-9)}
.legal .wrap{width:min(100% - 2*var(--gutter),var(--width-reading))}
.legal h1{font-size:var(--text-display);line-height:1.1;letter-spacing:-.02em;color:var(--ink);margin:0 0 var(--space-3)}
.legal .updated{color:var(--muted);font-size:var(--text-label);margin:0 0 var(--space-8)}
.legal h2{font-size:var(--text-title);line-height:1.25;letter-spacing:-.01em;color:var(--ink);margin:var(--space-8) 0 var(--space-4)}
.legal p,.legal li{font-size:var(--text-body-lg);line-height:1.6;color:var(--body)}
.legal p{margin:0 0 var(--space-4)}
.legal ul{margin:0 0 var(--space-4);padding-left:1.2em}
.legal li+li{margin-top:var(--space-2)}
.legal a{color:var(--ink);text-underline-offset:3px}
.legal strong{color:var(--ink);font-weight:600}
.legal-foot .bottom{margin-top:0}

/* ---------- essays archive (essays.html): Tesla Learn grid on white (2026-10-15).
   Big title, 3 columns with 24px gaps, 16:9 picture, title held to 2 lines, small grey date. ---------- */
.archive{padding:calc(var(--nav-height) + var(--space-8)) 0 var(--space-9)}
.archive h1{font-size:var(--text-display);line-height:1.1;letter-spacing:-.02em;margin:0 0 var(--space-7)}
.arc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8) var(--space-5)}   /* 64px between rows (Jesse wanted more room than Tesla's 24px), 24px between columns */
.arc-card{display:block;text-decoration:none;color:var(--ink)}
.arc-thumb{display:block;aspect-ratio:16/9;border-radius:var(--radius-sm);overflow:hidden;background:var(--surface)}
.arc-thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-normal) var(--ease-out)}
.arc-card:hover .arc-thumb img{transform:scale(1.03)}
.arc-cover{display:flex;flex-direction:column;justify-content:center;gap:var(--space-2);height:100%;padding:var(--space-5);background:#000;color:#fff}
.arc-cover .k{font-size:var(--text-caption);letter-spacing:.06em;text-transform:uppercase;color:#919191}
.arc-cover .t{font-size:22px;font-weight:500;line-height:1.15;letter-spacing:-.01em}
.arc-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:var(--space-5);font-size:var(--text-body-lg);font-weight:500;line-height:1.3}
.arc-card:hover .arc-title{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.arc-date{display:block;margin-top:var(--space-2);font-size:var(--text-label);color:var(--muted)}
.arc-card:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:var(--radius-sm)}
@media (max-width:860px){.arc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.arc-grid{grid-template-columns:1fr;gap:var(--space-7)}}

/* ---------- essay pages (essays/*.html): Tesla Learn article pattern on white (2026-10-15).
   One 640px column: ‹ All essays, title, date, lead image, body, one signup, references. ---------- */
.post{padding:calc(var(--nav-height) + var(--space-8)) 0 var(--space-9)}
/* Tesla's proportions: a wider centred column for the title, headings and images (878px at Tesla, 808px here),
   with body text stopped at the 640px reading width and left-aligned with the images (Jesse, 2026-10-15) */
.post .wrap{width:min(100% - 2*var(--gutter),808px)}
.post-body>:not(figure):not(h2){max-width:var(--width-reading)}
.post-back{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-label);font-weight:500;color:var(--muted);text-decoration:none;margin-bottom:var(--space-5)}
.post-back:hover{color:var(--ink)}
.post h1{font-size:var(--text-display);line-height:1.1;letter-spacing:-.02em;margin:0 0 var(--space-3);text-wrap:balance}
.post-meta{font-size:var(--text-label);color:var(--muted)}
.post-lead{margin:var(--space-6) 0 var(--space-8)}
.post-meta+.post-body{margin-top:var(--space-8)}   /* an essay with no lead image (essay 6) */
.post figure{margin:var(--space-7) 0}
.post figure img{width:100%;height:auto;border-radius:var(--radius-sm);background:var(--surface)}
/* a YouTube video inside an essay: same width and corners as the images, 16:9 */
.post figure.post-video iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:var(--radius-sm);background:#000}
.post figcaption{margin-top:var(--space-3);font-size:var(--text-label);line-height:1.5;color:var(--muted)}
.post-body p,.post-body li{font-size:var(--text-body-lg);line-height:1.6;color:var(--body)}
.post-body p{margin:0 0 var(--space-4)}
.post-body ul{margin:0 0 var(--space-4);padding-left:1.2em}
.post-body li+li{margin-top:var(--space-2)}
.post-body h2{font-size:var(--text-title);line-height:1.25;letter-spacing:-.01em;margin:var(--space-8) 0 var(--space-4)}
.post-body h3{font-size:var(--text-heading);line-height:1.3;margin:var(--space-6) 0 var(--space-3)}
.post-body strong{color:var(--ink);font-weight:600}
.post-body a{color:var(--ink);font-weight:500;text-underline-offset:3px}
.post-body a:hover{text-decoration-thickness:2px}
/* quoted lines (Kit's quote blocks): a hairline on the left, like Kit's own */
.post-body blockquote{margin:var(--space-5) 0;padding:var(--space-1) 0 var(--space-1) var(--space-5);border-left:3px solid var(--hairline)}
.post-body blockquote p:last-child{margin-bottom:0}
/* inline code: skill names, file endings, slash commands */
.post-body code{font:400 .88em/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:var(--surface);color:var(--ink);padding:.1em .35em;border-radius:var(--radius-sm)}
.post-body code strong{font-weight:600}
.post-body .big{font-size:var(--text-heading);line-height:1.4;color:var(--ink);font-weight:500}
.post-sign{margin-top:var(--space-6)}
/* paste-ready prompts: grey block with a Copy button */
.prompt{position:relative;margin:0 0 var(--space-5);background:var(--surface);border-radius:var(--radius-md)}
.prompt pre{margin:0;padding:var(--space-6) var(--space-5) var(--space-5);white-space:pre-wrap;overflow-wrap:anywhere;font:400 14px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink)}
.prompt .copy{all:unset;position:absolute;top:var(--space-2);right:var(--space-2);cursor:pointer;font:500 var(--text-label)/1 var(--font-sans);color:var(--ink);padding:8px 12px;border-radius:var(--radius-sm);background:#fff}
.prompt .copy:hover{background:#E6E6E6}
.prompt .copy:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.post-refs{margin-top:var(--space-8)}
.post-refs h2{font-size:var(--text-body);font-weight:500;color:var(--ink);margin:0 0 var(--space-3)}
.post-refs ol{margin:0;padding-left:1.2em}
.post-refs li{font-size:var(--text-label);line-height:1.5;color:var(--muted)}
.final{text-align:center}
/* final section as a scroll stage. Default (no JS, phones, reduced motion): every beat shows, stacked. */
.final-stage{padding:var(--space-10) 0}
.final-beats>*+*{margin-top:var(--space-5)}
.final-next{display:none}
.final-beat{text-wrap:balance}
/* small "Scroll down ↓" under the first closing beat, styled like the hero's cue (2026-10-15) */
.final-cue{display:block;margin-top:var(--space-4);font-size:var(--text-label);font-weight:500;letter-spacing:0;line-height:1.4;color:#919191}
.final-cue .arrow{display:inline-block;margin-left:4px;color:#919191}
/* closing-section icons (built by final-icons.js): white hairlines, black faces, drawn in when their line shows */
.final-beat .ico{display:block;width:180px;height:180px;margin:0 auto var(--space-5);overflow:visible}
.ico .ln{fill:#000;stroke:#fff;stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 650ms var(--ease-out);transition-delay:calc(min(var(--i,0),30) * 7ms)}  /* quick draw-in so the loop takes over sooner */
.ico polyline.ln,.ico path.ln,.ico ellipse.ln{fill:none}
/* accent fills, shared with the Problem-section palette */
.ico .ln.a-or{fill:#F2994A}.ico .ln.a-li{fill:#CFEE7B}.ico .ln.a-co{fill:#FD6D53}.ico .ln.a-sk{fill:#C9DCF7}.ico .ln.a-sa{fill:#E7DBC4}
.final-scroll.live .final-beat:not(.on) .ico .ln{stroke-dashoffset:1;transition-duration:300ms;transition-delay:0ms}
/* idle loops */
.ico .bob{animation:icoBob 3.2s ease-in-out infinite}
.ico .bob.f2{animation-delay:-1.1s}.ico .bob.f3{animation-delay:-2.2s}
@keyframes icoBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.ico .pulse{transform-origin:100px 100px;animation:icoPulse 3.6s ease-in-out infinite}
/* orbit rings: each slowly turns (alternating directions) and breathes in tilt, like a gyroscope */
.ico .spin{transform-origin:100px 100px;animation:icoSpin 36s linear infinite}
.ico .spin.s1{animation-duration:44s;animation-direction:reverse}
.ico .spin.s2{animation-duration:52s}
.ico .tilt{transform-origin:100px 100px;animation:icoTilt 6s ease-in-out infinite}
.ico .tilt.t1{animation-delay:-2s}.ico .tilt.t2{animation-delay:-4s}
@keyframes icoSpin{to{transform:rotate(360deg)}}
@keyframes icoTilt{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.45)}}
@keyframes icoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.ico .rise{animation:icoRise 3.6s ease-in-out infinite}
.ico .rise.s2{animation-delay:-.5s}.ico .rise.s3{animation-delay:-1s}
@keyframes icoRise{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.ico .hop{animation:icoHop 2.4s cubic-bezier(.3,0,.3,1) infinite}
.ico .hop.h1{animation-delay:.18s}.ico .hop.h2{animation-delay:.36s}.ico .hop.h3{animation-delay:.54s}.ico .hop.h4{animation-delay:.72s}
@keyframes icoHop{0%,40%,100%{transform:translateY(0)}20%{transform:translateY(-12px)}}
@media (prefers-reduced-motion: reduce){.ico .bob,.ico .pulse,.ico .rise,.ico .hop,.ico .spin,.ico .tilt{animation:none}.ico animateMotion{display:none}}
#start{scroll-margin-top:0}
/* home.js adds .live on wide screens with motion allowed */
.final-scroll.live{height:420vh}
.final-scroll.live .final-stage{position:sticky;top:0;height:100vh;padding:var(--nav-height) 0 0;display:flex;align-items:center}
.final-scroll.live .final-stage>.wrap{width:min(100% - 2*var(--gutter),var(--width-grid))}
.final-scroll.live .final-beats{position:relative;min-height:calc(3.5em + 204px);font-size:var(--text-display)}
.final-scroll.live .final-beats>*+*{margin-top:0}
.final-scroll.live .final-beat{position:absolute;left:0;right:0;top:50%;margin:0;opacity:0;transform:translateY(calc(-50% + 18px));transition:opacity 520ms var(--ease-out),transform 620ms var(--ease-out)}
.final-scroll.live .final-beat.on{opacity:1;transform:translateY(-50%)}
.final-scroll.live .final-beat.past{opacity:0;transform:translateY(calc(-50% - 18px))}
/* down arrow: jumps to the next line; gently bobs; fades out on the last line */
.final-scroll.live .final-next{display:grid;place-items:center;margin:var(--space-6) auto 0;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;cursor:pointer;transition:opacity var(--duration-normal) var(--ease),border-color var(--duration-fast) var(--ease),background var(--duration-fast) var(--ease)}
.final-next svg{width:20px;height:20px;animation:nextBob 1.8s var(--ease) infinite}
.final-next:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.final-next:focus-visible{outline:2px solid #fff;outline-offset:3px}
.final-scroll.live .final-next.done{opacity:0;pointer-events:none}
@keyframes nextBob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
/* faint grid behind a dark section, fading out toward the edges (matches the audit pages) */
.pattern-section{position:relative;overflow:hidden}
.pattern-section svg.grid-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.pattern-section::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 0%,rgba(0,0,0,.5) 22%,rgba(0,0,0,.92) 70%)}
.pattern-section>.wrap{position:relative;z-index:2}
@media (max-width:720px){.pattern-section::after{background:radial-gradient(ellipse at center,rgba(0,0,0,0) 0%,rgba(0,0,0,.2) 22%,rgba(0,0,0,.5) 70%)}}
.final .col{max-width:920px;margin-inline:auto}
.final .lead{margin-top:var(--space-5)}
.final form{max-width:440px;margin:var(--space-7) auto 0}
.final .field{grid-template-columns:1fr auto}
.final .field .btn{width:auto}
.final .field input{background:#1A1A1A;border-color:rgba(255,255,255,.2);color:#fff}
@media (max-width:560px){.final .field{grid-template-columns:1fr}.final .field .btn{width:100%}}

/* ---------- footer ---------- */
.footer{padding:var(--space-9) 0 var(--space-6)}
.footer .top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--space-7)}
.footer img{height:var(--wordmark-h);width:auto;margin-left:-6px}
.footer h2{font-size:var(--text-label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--space-4)}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.footer ul a{text-decoration:none;color:#D1D1D1}
.footer ul a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer .social{margin-top:var(--space-5);display:flex;flex-wrap:wrap;gap:var(--space-5)}
/* each icon wears its own brand colour (Jesse's call 2026-10-15); X's mark is black, so it uses X's white version on this dark footer.
   Instagram's gradient lives in the icon's own SVG. */
.footer .social a{color:#D1D1D1;display:inline-flex;transition:filter .2s,transform .2s}
.footer .social a[aria-label="LinkedIn"]{color:#0A66C2}
.footer .social a[aria-label="Facebook"]{color:#0866FF}
.footer .social a[aria-label="X"]{color:#fff}
.footer .social a:hover,.footer .social a:focus-visible{filter:brightness(1.2);transform:translateY(-1px);text-decoration:none}
.footer .social svg{width:22px;height:22px;fill:currentColor;display:block}
.footer .bottom{margin-top:var(--space-9);padding-top:var(--space-5);display:flex;flex-wrap:wrap;gap:var(--space-5);justify-content:space-between;color:var(--muted);font-size:var(--text-label)}
.footer .bottom nav{display:flex;gap:var(--space-5)}
.footer .bottom a{text-decoration:none}
.footer .bottom a:hover{color:#fff}
@media (max-width:860px){.footer .top{grid-template-columns:1fr 1fr}
  .footer .social{display:grid;grid-template-columns:repeat(2,max-content);gap:var(--space-5) var(--space-6)}}   /* 2×2 on phones, so X never drops to its own row */

/* ---------- reveals ---------- */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}
.no-js [data-reveal]{opacity:1;transform:none}

/* ---------- reduced motion, complete ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .answer .all{display:block}
  .answer .live-pick{display:none}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}