/* stuubzzz.studio — shared stylesheet (one file for every page).
   Tokens match the course deck (deck-engine/css/deck.css) so the site, the slides and the logo read as one brand.
   Emitted by _src/build.py to /assets/site.css with a content hash in the query string. */

/* ------------------------------------------------------------------ fallback faces
   Local fonts scaled to the metrics of the web fonts, so the text does not re-wrap when the web fonts arrive.
   The unicode-range keeps arrows and bullets (not in the web fonts) on the plain system font. */
@font-face{font-family:"SG Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:600 700;size-adjust:101%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215}
@font-face{font-family:"SG Fallback";src:local("Arial"),local("ArialMT");font-weight:400 500;size-adjust:108%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215}
@font-face{font-family:"PS Fallback";src:local("Arial"),local("ArialMT");font-weight:400 500;size-adjust:102.5%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215}
@font-face{font-family:"PS Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:600 700;size-adjust:97%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215}
@font-face{font-family:"PM Fallback";src:local("Consolas");font-weight:400 500;size-adjust:109.1%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215}
@font-face{font-family:"PM Fallback";src:local("Consolas Bold"),local("Consolas-Bold");font-weight:600 700;size-adjust:109.1%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215}

/* ------------------------------------------------------------------ tokens */
:root{
  --ink:#0A0A0D; --ink-1:#101015; --ink-2:#16161D; --ink-3:#1E1E27;
  --bone:#F2EDE3; --bone-dim:#ABA69D; --bone-mute:#959085;
  --line:rgba(242,237,227,.10); --line-2:rgba(242,237,227,.18);
  --volt:#FAEE4B; --gold:#F7C74A; --mag:#EA55AB; --cyan:#3FE3D1; --violet:#A080FA;
  --ok:#5EDB7F; --warn:#FFB23F; --bad:#FF5C6C;
  --on-accent:#0B0B0E;
  --c:var(--volt);                 /* local accent: set --c on a block to recolour its kicker, chips, glow */
  --r:18px; --r-sm:10px; --r-lg:26px;
  --maxw:1180px; --gut:28px; --nav-h:68px;
  --ff-disp:"Space Grotesk","SG Fallback",system-ui,sans-serif;
  --ff-body:"IBM Plex Sans","PS Fallback",system-ui,sans-serif;
  --ff-mono:"IBM Plex Mono","PM Fallback",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --grad:linear-gradient(92deg,#FAEE4B 0%,#F7C74A 38%,#E3409F 100%);
  --grad-c:linear-gradient(92deg,#3FE3D1,#8B5CF6 62%,#E3409F);
}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);color-scheme:dark;scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 18px)}
body{
  color:var(--bone);font:400 1rem/1.62 var(--ff-body);
  -webkit-font-smoothing:antialiased;overflow-x:clip;min-height:100vh;
}
body{display:flex;flex-direction:column}
main{flex:1 0 auto}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
b,strong{font-weight:600}
::selection{background:var(--volt);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--volt);outline-offset:3px;border-radius:4px}
.wrap{width:min(var(--maxw),100% - var(--gut)*2);margin-inline:auto}
.wrap--narrow{width:min(860px,100% - var(--gut)*2);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--volt);color:var(--on-accent);padding:.7em 1em;border-radius:8px;font:500 .85rem var(--ff-mono)}
.skip:focus{top:12px}

/* ------------------------------------------------------------------ ambient background */
.ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ambient .grid{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(242,237,227,.10) 1.1px,transparent 1.4px);background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 0%,#000 10%,transparent 78%);
          mask-image:radial-gradient(ellipse 85% 70% at 50% 0%,#000 10%,transparent 78%);
}
.ambient .orb{position:absolute;border-radius:50%;will-change:transform}
.ambient .orb-a{width:74vmax;height:74vmax;right:-28vmax;top:-34vmax;background:radial-gradient(closest-side,rgba(227,64,159,.23),transparent 72%);animation:drift-a 38s ease-in-out infinite alternate}
.ambient .orb-b{width:80vmax;height:80vmax;left:-36vmax;top:34vh;background:radial-gradient(closest-side,rgba(139,92,246,.20),transparent 72%);animation:drift-b 46s ease-in-out infinite alternate}
.ambient .orb-c{width:46vmax;height:46vmax;right:6vmax;bottom:-26vmax;background:radial-gradient(closest-side,rgba(63,227,209,.11),transparent 72%);animation:drift-a 52s ease-in-out infinite alternate-reverse}
.ambient .vig{position:absolute;inset:0;background:radial-gradient(ellipse 120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55))}
@keyframes drift-a{to{transform:translate3d(-7vmax,6vmax,0) scale(1.08)}}
@keyframes drift-b{to{transform:translate3d(9vmax,-5vmax,0) scale(.94)}}
/* calmer dose on the services pages: same tokens, lower volume */
.calm .ambient .orb-a{opacity:.62}.calm .ambient .orb-b{opacity:.55}.calm .ambient .orb-c{opacity:.5}
body::before{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;
  background:url(/assets/brand/grain.png?v=73f350bb);opacity:.055;mix-blend-mode:overlay;
}
@media(max-width:700px){body::before{display:none}}

/* scroll progress, drawn like a playhead (progressive enhancement, no JS) */
.progress{display:none}
@supports (animation-timeline:scroll()){
  .progress{display:block;position:fixed;left:0;top:0;height:2px;width:100%;z-index:60;transform-origin:0 50%;transform:scaleX(0);
    background:linear-gradient(90deg,var(--cyan),var(--volt) 60%,var(--mag));
    animation:grow linear both;animation-timeline:scroll(root)}
  @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* ------------------------------------------------------------------ type */
h1,h2,h3,h4{font-family:var(--ff-disp);font-weight:700;letter-spacing:-.03em;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(2.6rem,6.4vw,5.3rem);line-height:.97;letter-spacing:-.04em}
h2{font-size:clamp(1.95rem,4vw,3.25rem)}
h3{font-size:clamp(1.18rem,1.7vw,1.42rem);font-weight:600;letter-spacing:-.015em;line-height:1.16}
h4{font-size:1.02rem;font-weight:600;letter-spacing:-.01em;line-height:1.25}
p{text-wrap:pretty}
.lead{color:var(--bone-dim);font-size:clamp(1.06rem,1.45vw,1.3rem);line-height:1.5;max-width:58ch}
.lead b,.lead strong{color:var(--bone);font-weight:500}
.dim{color:var(--bone-dim)} .mute{color:var(--bone-mute)} .mono{font-family:var(--ff-mono)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.grad-c{background:var(--grad-c);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.mk{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--c) 38%,transparent) 62%);padding-inline:.06em}
em.hl{font-style:normal;color:var(--c)}
.link{color:var(--c);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--c) 45%,transparent);text-underline-offset:.22em;text-decoration-thickness:1px}
.link:hover{text-decoration-color:currentColor}

/* kicker: mono eyebrow with a lit dot (the deck's .kicker) */
.eyebrow{
  display:inline-flex;align-items:center;gap:.8em;
  font:500 .74rem/1.2 var(--ff-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--c);
}
.eyebrow::before{content:"";width:.62em;height:.62em;border-radius:50%;background:currentColor;box-shadow:0 0 14px currentColor;flex:none}
.eyebrow.plain::before{display:none}

/* outlined display numerals (module numbers, prices) */
.outline{
  font:700 clamp(4.4rem,11vw,9.5rem)/.82 var(--ff-disp);letter-spacing:-.05em;color:transparent;
  -webkit-text-stroke:1.5px color-mix(in srgb,var(--c) 62%,transparent);
  filter:drop-shadow(0 0 26px color-mix(in srgb,var(--c) 38%,transparent));
}

/* ------------------------------------------------------------------ buttons + chips */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;overflow:hidden;
  font:500 .86rem/1 var(--ff-mono);letter-spacing:.03em;white-space:nowrap;
  padding:1em 1.5em;min-height:46px;border-radius:var(--r-sm);border:1px solid transparent;
  transition:transform .18s var(--ease),background-color .18s,border-color .18s,color .18s,box-shadow .25s;
}
.btn .arw{transition:transform .2s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn:active{transform:scale(.975)}
.btn--primary{background:var(--volt);color:var(--on-accent);font-weight:600;box-shadow:0 0 0 0 rgba(250,238,75,0)}
.btn--primary:hover{box-shadow:0 0 34px -6px rgba(250,238,75,.6)}
.btn--primary::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);transition:transform .6s var(--ease)}
.btn--primary:hover::after{transform:translateX(120%)}
.btn--mag{background:var(--mag);color:var(--on-accent);font-weight:600}
.btn--mag:hover{box-shadow:0 0 34px -6px rgba(227,64,159,.7)}
.btn--ghost{border-color:var(--line-2);color:var(--bone);background:rgba(242,237,227,.03)}
.btn--ghost:hover{border-color:var(--c);color:var(--c)}
.btn--lg{padding:1.15em 1.9em;font-size:.94rem;min-height:52px}
.btn--sm{padding:.7em 1.1em;min-height:40px;font-size:.8rem}
.btn[aria-disabled=true]{opacity:.6;pointer-events:none}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{max-width:100%}
@media(max-width:560px){.cta-row .btn{flex:1 1 100%;white-space:normal;text-align:center;line-height:1.25}}
@media(max-width:560px){.btn{white-space:normal;text-align:center;line-height:1.25}}
.cta-row .note{font:400 .76rem var(--ff-mono);color:var(--bone-mute)}

.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:.5em;font:500 .78rem/1 var(--ff-mono);letter-spacing:.02em;color:var(--bone);
  padding:.62em 1em;border-radius:100px;border:1px solid color-mix(in srgb,var(--c) 45%,transparent);
  background:color-mix(in srgb,var(--c) 9%,transparent);white-space:nowrap;
}
.chip.solid{background:var(--c);border-color:var(--c);color:var(--on-accent);font-weight:600}
.chip.quiet{border-color:var(--line-2);background:rgba(242,237,227,.03);color:var(--bone-dim)}
@media(max-width:480px){.chip{white-space:normal;line-height:1.3}}

/* ------------------------------------------------------------------ header / nav */
header.nav{
  position:sticky;top:0;z-index:50;height:var(--nav-h);
  background:rgba(10,10,13,.74);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:100%}
.brand{display:inline-flex;align-items:center;gap:.72em;flex:none}
.brand img{height:40px;width:59px;filter:drop-shadow(0 0 14px rgba(227,64,159,.42));transition:transform .4s var(--spring)}
.brand:hover img{transform:rotate(-4deg) scale(1.06)}
.brand b{font:700 1.04rem/1 var(--ff-disp);letter-spacing:.06em}
.brand span{font:400 .66rem/1 var(--ff-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--bone-mute)}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2.3vw,30px)}
.nav-links a:not(.btn){
  position:relative;display:inline-flex;align-items:center;gap:.5em;min-height:44px;
  font:500 .82rem/1 var(--ff-mono);letter-spacing:.02em;color:var(--bone-dim);white-space:nowrap;transition:color .15s;
}
.nav-links a:not(.btn):hover{color:var(--bone)}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;border-radius:2px;background:var(--volt);box-shadow:0 0 12px var(--volt);transform:scaleX(0);transform-origin:0 50%;transition:transform .25s var(--ease)}
.nav-links a[aria-current=page]{color:var(--bone)}
.nav-links a[aria-current=page]::after,.nav-links a:not(.btn):hover::after{transform:scaleX(1)}
.tag-new{font:600 .56rem/1 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-accent);background:var(--volt);padding:.34em .5em;border-radius:4px}
.nav-cta{flex:none}
/* mobile menu: a <details> inside the sticky header, works without JS */
.mmenu{display:none}
.mmenu summary{list-style:none;display:grid;place-items:center;width:46px;height:46px;border-radius:10px;border:1px solid var(--line-2);cursor:pointer}
.mmenu summary::-webkit-details-marker{display:none}
.mmenu .bars,.mmenu .bars::before,.mmenu .bars::after{display:block;width:18px;height:2px;border-radius:2px;background:var(--bone);transition:transform .25s var(--ease),opacity .2s}
.mmenu .bars{position:relative}
.mmenu .bars::before,.mmenu .bars::after{content:"";position:absolute;left:0}
.mmenu .bars::before{top:-6px}.mmenu .bars::after{top:6px}
.mmenu[open] .bars{background:transparent}
.mmenu[open] .bars::before{transform:translateY(6px) rotate(45deg)}
.mmenu[open] .bars::after{transform:translateY(-6px) rotate(-45deg)}
.mmenu-panel{
  position:absolute;left:0;right:0;top:var(--nav-h);padding:14px var(--gut) 26px;
  background:#0A0A0D;border-bottom:1px solid var(--line);display:grid;gap:2px;
  max-height:calc(100dvh - var(--nav-h));overflow:auto;
}
.mmenu-panel a:not(.btn){display:flex;align-items:center;justify-content:space-between;min-height:56px;font:600 1.4rem/1 var(--ff-disp);letter-spacing:-.02em;border-bottom:1px solid var(--line)}
.mmenu-panel a[aria-current=page]{color:var(--volt)}
.mmenu-panel .btn{margin-top:16px}
@media(max-width:900px){.brand span{display:none}}
@media(max-width:800px){
  .nav-links,.nav-cta{display:none}
  .mmenu{display:block}
}

/* ------------------------------------------------------------------ sections */
section{position:relative;padding-block:clamp(64px,9.5vw,132px)}
section.tight{padding-block:clamp(48px,6.5vw,88px)}
section.flush{padding-block:0}
.sec-head{max-width:760px;margin-bottom:clamp(30px,4.4vw,56px)}
.sec-head .eyebrow{margin-bottom:18px}
.sec-head p{color:var(--bone-dim);margin-top:16px;font-size:1.06rem;max-width:62ch}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center p{margin-inline:auto}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------------------------ surfaces */
.card{
  position:relative;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  padding:clamp(22px,2.6vw,32px);
  box-shadow:inset 0 1px 0 rgba(242,237,227,.05),0 34px 70px -42px rgba(0,0,0,.9);
  transition:transform .3s var(--ease),border-color .25s,box-shadow .3s;
}
.card.lit{border-color:color-mix(in srgb,var(--c) 52%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 16%,transparent),0 0 80px -28px color-mix(in srgb,var(--c) 60%,transparent),0 34px 70px -42px rgba(0,0,0,.9)}
a.card:hover,.card.hov:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 55%,transparent)}
/* pointer spotlight (site.js sets --mx/--my on hover-capable devices) */
.card.spot::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--c) 16%,transparent),transparent 62%);
}
.card.spot:hover::before{opacity:1}
.card > *{position:relative}
.card h3{margin-bottom:10px}
.card p{color:var(--bone-dim);font-size:.96rem}
.card .k{font:500 .72rem var(--ff-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.ico{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--c);color:var(--on-accent);box-shadow:0 0 36px -8px var(--c);margin-bottom:18px;flex:none}
.ico svg{width:24px;height:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* window frame for media (the deck's .win) */
.win{border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:#0D0D11;box-shadow:0 50px 100px -50px rgba(0,0,0,.95),0 0 90px -40px color-mix(in srgb,var(--c) 55%,transparent)}
.win-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#17171D;border-bottom:1px solid var(--line);font:400 .7rem/1 var(--ff-mono);letter-spacing:.06em;color:var(--bone-mute);text-transform:uppercase}
.win-bar .dots{display:inline-flex;gap:6px;flex:none}
.win-bar .dots i{width:9px;height:9px;border-radius:50%;background:#33333d}
.win-bar .dots i:nth-child(1){background:#FF5C6C}.win-bar .dots i:nth-child(2){background:#FFB23F}.win-bar .dots i:nth-child(3){background:#5EDB7F}
.win-bar .sp{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win-body{position:relative}
.win-body img,.win-body video{width:100%;height:auto;display:block}
.frame{display:block;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line-2);background:var(--ink-2)}
.frame img,.frame video{width:100%;height:100%;object-fit:cover;display:block}
figure figcaption,.cap{font:400 .74rem/1.5 var(--ff-mono);color:var(--bone-mute);letter-spacing:.03em;margin-top:10px}

/* ------------------------------------------------------------------ hero */
.hero{padding-block:clamp(44px,6.5vw,92px) clamp(36px,5vw,64px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(30px,4.6vw,64px);align-items:center}
.hero .eyebrow{margin-bottom:22px}
.hero h1{max-width:15ch}
.hero .lead{margin-top:26px}
.hero .chips{margin-top:26px}
.hero .cta-row{margin-top:32px}
/* course on sale: "Start Part 1, free" and "Buy the full course" on one row under the lead, the price note under them */
.hero-buy .btn--lg{padding-inline:1.6em}
.hero-buy .note{flex-basis:100%}
.hero .hero-buy + .chips{margin-top:24px}
.hero--solo h1{max-width:18ch}
/* optional picture collage beside a text-only hero (does nothing unless the page has a .hero-peek block) */
.hero--solo .wrap{position:relative}
.hero-peek{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:absolute;right:0;top:64px;width:min(36%,410px);transform:rotate(2deg)}
.hero-peek .frame{aspect-ratio:16/10}
.hero-peek .frame:nth-child(even){translate:0 18px}
@media(max-width:1100px){.hero-peek{display:none}}
.hero h1 small{display:block;margin-top:.55em;font:500 clamp(1.05rem,1.7vw,1.4rem)/1.25 var(--ff-disp);letter-spacing:-.01em;color:var(--bone-dim);max-width:26ch}
.byline{margin-top:16px;font:400 .8rem var(--ff-mono);color:var(--bone-mute)}
.byline a{color:var(--bone-dim);text-decoration:underline;text-underline-offset:.2em}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:rgba(10,10,13,.5)}
.facts > div{padding:16px 18px;border-left:1px solid var(--line);border-top:1px solid var(--line);margin:-1px 0 0 -1px}
.facts dt{font:500 .68rem var(--ff-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-mute)}
.facts dd{margin-top:6px;font-size:.95rem;color:var(--bone)}
@media(max-width:900px){.facts{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.facts{grid-template-columns:1fr}}
@media(max-width:940px){.hero-grid{grid-template-columns:minmax(0,1fr)}.hero h1{max-width:18ch}}
.hero-grid > *,.split > *,.clips > *,.dial > *,.price-grid > *,.lanes > *,.parts > *,.work > *,.menu > *,.post-grid > *,.flag > *{min-width:0}
/* "identically." — three drifting renders lock into one */
.lock{position:relative;display:inline-block}
.js .lock::before,.js .lock::after{content:attr(data-text);content:attr(data-text) / "";position:absolute;inset:0;pointer-events:none;-webkit-text-fill-color:currentColor;opacity:0}
.js .lock::before{color:var(--cyan);animation:lock-a 1.1s .25s var(--ease) both}
.js .lock::after{color:var(--mag);animation:lock-b 1.1s .25s var(--ease) both}
@keyframes lock-a{0%{opacity:.75;transform:translate(-14px,5px);filter:blur(2px)}100%{opacity:0;transform:none;filter:none}}
@keyframes lock-b{0%{opacity:.75;transform:translate(12px,-7px);filter:blur(2px)}100%{opacity:0;transform:none;filter:none}}

/* viewer: the hero reel, scrubbed by the timeline underneath */
.viewer{--c:var(--mag)}
.viewer-screen{position:relative;aspect-ratio:16/9;background:#050507}
.viewer-screen video,.viewer-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.viewer-tag{position:absolute;left:12px;bottom:12px;font:500 .68rem/1 var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bone);background:rgba(10,10,13,.72);border:1px solid var(--line-2);padding:.6em .8em;border-radius:6px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.viewer-toggle{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(10,10,13,.72);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .2s,color .2s}
.viewer-toggle:hover{border-color:var(--volt);color:var(--volt)}
.viewer-toggle svg{width:14px;height:14px}
.viewer-toggle .i-play{display:none}
.viewer.paused .viewer-toggle .i-play{display:block}.viewer.paused .viewer-toggle .i-pause{display:none}
.tl{padding:16px 16px 14px;background:linear-gradient(180deg,#121217,#0D0D11)}
.track{position:relative;display:flex;gap:4px;height:54px;padding:6px;border-radius:9px;border:1px solid var(--line);background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),var(--line) calc(25% - 1px) 25%)}
.seg{
  position:relative;flex:var(--w,1) 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:0 10px;text-align:left;
  border-radius:6px;border:1px solid color-mix(in srgb,var(--sc,var(--volt)) 42%,transparent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--sc,var(--volt)) 26%,transparent),color-mix(in srgb,var(--sc,var(--volt)) 7%,transparent));
  font:500 .66rem/1 var(--ff-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--bone);white-space:nowrap;overflow:hidden;
  transition:border-color .2s,background-color .2s,filter .2s;
}
.seg small{font-size:.58rem;color:var(--bone-dim);letter-spacing:.06em}
.seg:nth-child(4n+1){--sc:var(--volt)}.seg:nth-child(4n+2){--sc:var(--cyan)}.seg:nth-child(4n+3){--sc:var(--mag)}.seg:nth-child(4n+4){--sc:var(--violet)}
button.seg:hover,.seg.on{border-color:var(--sc,var(--volt));filter:brightness(1.35)}
.playhead{position:absolute;top:-4px;bottom:-4px;left:calc(6px + (100% - 12px) * var(--p,0));width:2px;margin-left:-1px;background:var(--volt);box-shadow:0 0 14px 1px rgba(250,238,75,.8);pointer-events:none}
.playhead::before{content:"";position:absolute;top:-5px;left:-4px;width:10px;height:10px;border-radius:2px;background:var(--volt);transform:rotate(45deg)}
.track.auto .playhead{animation:sweep 9s linear infinite}
@keyframes sweep{from{left:6px}to{left:calc(100% - 6px)}}
.ticks{display:flex;justify-content:space-between;margin-top:9px;font:400 .68rem/1 var(--ff-mono);color:var(--bone-mute)}
.tl-top{display:flex;justify-content:space-between;gap:14px;margin-bottom:12px;font:400 .68rem/1.3 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--bone-mute)}
.tl-top b{color:var(--volt);font-weight:500}
@media(min-width:941px) and (max-width:1100px){.viewer .tl-top{font-size:.64rem;letter-spacing:.04em}}
/* decorative timeline (1-on-1, commissions, process) */
.timeline{margin-top:clamp(36px,5vw,60px);--c:var(--volt)}
.timeline .tl{border-radius:0 0 var(--r) var(--r)}
.seg .short{display:none}
@media(max-width:560px){
  .seg{padding:0 7px;font-size:.58rem}.seg small{display:none}
  .seg .full{display:none}.seg .short{display:inline}
  .tl-top{flex-direction:column;gap:6px}
}

/* ------------------------------------------------------------------ ticker */
.ticker{border-block:1px solid var(--line);padding:16px 0;overflow:hidden;background:rgba(10,10,13,.5);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker ul{display:flex;gap:42px;width:max-content;animation:marquee 46s linear infinite}
.ticker:hover ul{animation-play-state:paused}
.ticker li{display:flex;align-items:center;gap:42px;font:500 .78rem/1 var(--ff-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim);white-space:nowrap}
.ticker li::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--mag);box-shadow:0 0 10px var(--mag)}
.ticker li:nth-child(3n+1)::after{background:var(--volt);box-shadow:0 0 10px var(--volt)}
.ticker li:nth-child(3n+2)::after{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ------------------------------------------------------------------ lanes (home) */
.lanes{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.lane{display:flex;flex-direction:column;gap:18px;padding:clamp(24px,3vw,38px);min-height:100%}
.lane h3{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:700;letter-spacing:-.03em}
.lane ul{display:grid;gap:2px;margin-top:4px}
.lane li a{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line);transition:padding .25s var(--ease)}
.lane li a:hover{padding-left:8px}
.lane li a:hover .n{color:var(--c)}
.lane .n{font:600 1.02rem var(--ff-disp);letter-spacing:-.01em;transition:color .2s}
.lane .p{font:500 .8rem var(--ff-mono);color:var(--c);white-space:nowrap}
.lane small{grid-column:1/-1;font:400 .78rem var(--ff-mono);color:var(--bone-mute);letter-spacing:.01em}
@media(max-width:860px){.lanes{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ course band + part cards */
.parts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.part{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.4vw,30px);overflow:hidden}
.part .outline{position:absolute;right:-6px;top:-14px;font-size:clamp(6rem,11vw,9.5rem);opacity:.5;pointer-events:none}
.part .badges{display:flex;gap:8px;flex-wrap:wrap}
.part h3{font-size:clamp(1.45rem,2.3vw,1.9rem);font-weight:700;letter-spacing:-.03em;margin:0}
.part .sub{font:500 .78rem var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c)}
.part ul{display:grid;gap:9px;margin-top:4px}
.part li{position:relative;padding-left:24px;color:var(--bone-dim);font-size:.95rem}
.part li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:3px;background:var(--c);box-shadow:0 0 12px var(--c)}
.part .meta{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font:400 .76rem var(--ff-mono);color:var(--bone-mute);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.part .meta b{color:var(--bone);font-weight:500}
@media(max-width:960px){.parts{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ numbered statements (the two walls, who it's for) */
.walls{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px)}
.wall{position:relative;padding-top:18px;border-top:1px solid var(--line-2)}
.wall .outline{display:block;margin-bottom:14px;font-size:clamp(3.6rem,7vw,6rem)}
.wall .num{font:500 .74rem var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.wall h3{font-size:clamp(1.4rem,2.2vw,1.8rem);font-weight:700;letter-spacing:-.03em;margin:12px 0 12px}
.wall p{color:var(--bone-dim)}
.wall .fix{margin-top:18px;padding:16px 18px;border-radius:var(--r-sm);border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 7%,transparent);color:var(--bone);font-size:.95rem}
.wall .fix b{color:var(--ok);font:500 .74rem var(--ff-mono);letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:6px}
@media(max-width:760px){.walls{grid-template-columns:1fr}}
.rows{display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(20px,3vw,44px)}
.rows > *{padding:22px 0 24px;border-top:1px solid var(--line-2);transition:border-color .25s}
.rows > *:hover{border-top-color:var(--c)}
.rows .k{font:500 .74rem var(--ff-mono);letter-spacing:.1em;color:var(--c)}
.rows h3{margin:10px 0 8px;font-size:1.12rem}
.rows p{color:var(--bone-dim);font-size:.93rem}
@media(max-width:860px){.rows{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.rows{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ flagship */
.flag{display:grid;grid-template-columns:1.1fr .9fr;overflow:hidden;padding:0;--c:var(--gold)}
.flag-l{padding:clamp(26px,3.6vw,48px)}
.flag-l .price{font:500 1rem var(--ff-mono);color:var(--gold);margin:10px 0 4px}
.flag-l .price b{font:700 clamp(2rem,3.4vw,2.8rem)/1 var(--ff-disp);letter-spacing:-.03em;color:var(--bone);margin-left:.2em}
.checks{display:grid;gap:11px;margin:22px 0 26px}
.checks li{position:relative;padding-left:28px;color:var(--bone-dim);font-size:.97rem}
.checks li::before{content:"→";position:absolute;left:0;color:var(--c);font-family:var(--ff-mono)}
.checks li b{color:var(--bone);font-weight:500}
.out{border-left:2px solid var(--c);padding-left:16px;margin-bottom:26px;color:var(--bone)}
.flag-r{border-left:1px solid var(--line);padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;justify-content:center;gap:14px;background:rgba(10,10,13,.4)}
/* character sheet: five views of one identity, with a scan line passing over them */
.sheet{display:block;transition:transform .35s var(--ease)}
.sheet:hover{transform:translateY(-4px)}
.sheet .win-body{overflow:hidden}
.sheet .scan{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--gold);box-shadow:0 0 18px 2px rgba(247,199,74,.85);animation:scan 7.5s linear infinite}
@keyframes scan{from{left:0}to{left:100%}}
.sheet .labs{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);background:#121217}
.sheet .labs span{padding:10px 0;text-align:center;font:500 .72rem var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--bone-mute);animation:lab 7.5s linear infinite;animation-delay:calc(var(--n) * 1.5s)}
.sheet .labs span:nth-child(1){--n:0}.sheet .labs span:nth-child(2){--n:1}.sheet .labs span:nth-child(3){--n:2}.sheet .labs span:nth-child(4){--n:3}.sheet .labs span:nth-child(5){--n:4}
@keyframes lab{0%,20%{color:var(--gold)}20.01%,100%{color:var(--bone-mute)}}
@media(max-width:880px){.flag{grid-template-columns:1fr}.flag-r{border-left:0;border-top:1px solid var(--line)}}

/* range input, styled as a scrubber */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--c) var(--fill,0%),#6A6873 var(--fill,0%))}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:#6A6873}
input[type=range]::-moz-range-progress{height:6px;border-radius:6px;background:var(--c)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:var(--bone);border:4px solid var(--c);box-shadow:0 0 18px color-mix(in srgb,var(--c) 70%,transparent)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--bone);border:4px solid var(--c);box-shadow:0 0 18px color-mix(in srgb,var(--c) 70%,transparent)}

/* ------------------------------------------------------------------ work / product cards */
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.work-card{display:flex;flex-direction:column;padding:0;overflow:hidden}
.work-card .shot{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink-2)}
.work-card .shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.work-card:hover .shot img{transform:scale(1.06)}
.work-card .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,10,13,.85))}
.work-card .shot .chip{position:absolute;left:14px;bottom:12px;z-index:1;background:rgba(10,10,13,.7)}
.work-card .body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.work-card .body p{flex:1}
.work-card .go{font:500 .8rem var(--ff-mono);color:var(--c);display:inline-flex;gap:.5em;align-items:center}
.work-card:hover .go .arw{transform:translateX(4px)}
.go .arw{transition:transform .2s var(--ease)}
@media(max-width:960px){.work{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.work{grid-template-columns:1fr}}
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mosaic .frame{aspect-ratio:16/10}
.mosaic .frame.tall{grid-row:span 2;aspect-ratio:auto}
@media(max-width:760px){.mosaic{grid-template-columns:repeat(2,1fr)}}

/* ------------------------------------------------------------------ ladder (ways to work) */
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.tier .t-eye{font:500 .72rem var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.tier h3{margin:10px 0 4px;font-size:1.35rem;font-weight:700}
.tier .t-sub{color:var(--bone-mute);font-size:.86rem;margin-bottom:16px}
.row{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line)}
a.row{transition:padding .25s var(--ease)}
a.row:hover{padding-left:6px}
a.row:hover .r-name{color:var(--c)}
.row .r-name{font-size:.94rem;color:var(--bone);transition:color .2s}
.row .r-name small{display:block;color:var(--bone-mute);font:400 .74rem var(--ff-mono);margin-top:4px}
.row .r-price{font:500 .82rem var(--ff-mono);color:var(--c);white-space:nowrap}
.flagtag{display:inline-block;font:600 .58rem var(--ff-mono);letter-spacing:.1em;color:var(--on-accent);background:var(--c);border-radius:4px;padding:2px 6px;margin-left:0;vertical-align:middle;text-transform:uppercase}
@media(max-width:940px){.ladder{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-block:1px solid var(--line)}
.stat{padding:clamp(20px,2.6vw,32px) clamp(14px,2vw,26px);border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat .v{font:700 clamp(2.1rem,4.4vw,3.6rem)/1 var(--ff-disp);letter-spacing:-.04em;font-variant-numeric:tabular-nums;display:block}
.stat .l{display:block;margin-top:10px;color:var(--bone-dim);font-size:.9rem}
@media(max-width:820px){.stats{grid-template-columns:1fr 1fr}.stat:nth-child(3){border-left:0}.stat:nth-child(n+3){border-top:1px solid var(--line)}}

/* ------------------------------------------------------------------ steps drawn on a track */
.steps{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:0;position:relative;padding-top:30px}
.steps::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--line-2);border-radius:2px}
.steps::after{content:"";position:absolute;left:0;top:9px;height:2px;width:100%;background:linear-gradient(90deg,var(--volt),var(--mag));border-radius:2px;transform:scaleX(0);transform-origin:0 50%;transition:transform 1.6s var(--ease) .2s;box-shadow:0 0 14px rgba(250,238,75,.5)}
.steps.in::after,html:not(.js) .steps::after{transform:scaleX(1)}
.step{position:relative;padding:0 22px 0 0}
.step::before{content:"";position:absolute;left:0;top:-28px;width:16px;height:16px;border-radius:4px;transform:rotate(45deg);background:var(--ink);border:2px solid var(--volt);box-shadow:0 0 14px rgba(250,238,75,.5)}
.step .sn{font:500 .76rem var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--volt)}
.step h3{margin:12px 0 8px;font-size:1.14rem}
.step p{color:var(--bone-dim);font-size:.92rem}
@media(max-width:820px){
  .steps{grid-template-columns:1fr;padding-top:0;padding-left:34px;gap:26px}
  .steps::before{left:8px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .steps::after{left:8px;top:0;width:2px;height:100%;transform:scaleY(0);transform-origin:50% 0;background:linear-gradient(180deg,var(--volt),var(--mag))}
  .steps.in::after,html:not(.js) .steps::after{transform:scaleY(1)}
  .step::before{left:-33px;top:4px}
}

/* ------------------------------------------------------------------ faq */
.faq{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;cursor:pointer;padding:22px 2px;display:flex;justify-content:space-between;align-items:center;gap:20px;font:600 clamp(1.02rem,1.5vw,1.16rem)/1.3 var(--ff-disp);letter-spacing:-.015em;transition:color .2s}
.faq summary:hover{color:var(--c)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);font:400 1rem/1 var(--ff-mono);color:var(--c);transition:transform .3s var(--spring),background-color .2s}
.faq details[open] summary .ic{transform:rotate(45deg);background:color-mix(in srgb,var(--c) 14%,transparent)}
.faq details p{color:var(--bone-dim);padding:0 2px 24px;max-width:74ch}
.faq details p a{color:var(--c);text-decoration:underline;text-underline-offset:.2em;text-decoration-color:color-mix(in srgb,var(--c) 45%,transparent)}

/* ------------------------------------------------------------------ callouts */
.cta-band{position:relative;text-align:center;padding:clamp(40px,6vw,76px) clamp(22px,4vw,56px);border-radius:var(--r-lg);overflow:hidden;border:1px solid transparent;
  background:linear-gradient(var(--ink-1),var(--ink-1)) padding-box,conic-gradient(from var(--a,0deg),rgba(242,237,227,.12),var(--volt) 12%,var(--mag) 22%,rgba(242,237,227,.12) 34%) border-box}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(620px 320px at 20% 0%,rgba(227,64,159,.18),transparent 65%),radial-gradient(520px 300px at 90% 100%,rgba(63,227,209,.10),transparent 65%);pointer-events:none}
.cta-band > *{position:relative}
.cta-band h2{max-width:20ch;margin:16px auto 0}
.cta-band p{color:var(--bone-dim);margin:18px auto 30px;max-width:52ch}
.cta-band .cta-row,.cta-band .chips{justify-content:center}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@media(prefers-reduced-motion:no-preference){.cta-band{animation:spin 9s linear infinite}}
@keyframes spin{to{--a:360deg}}
.band{padding:clamp(24px,3.4vw,40px)}
.band ul{display:grid;gap:12px;margin-top:18px}
.band li{position:relative;padding-left:28px;color:var(--bone-dim)}
.band li::before{content:"→";position:absolute;left:0;color:var(--c);font-family:var(--ff-mono)}
.band li b{color:var(--bone);font-weight:500}
.band a:not(.btn){color:var(--c);text-decoration:underline;text-underline-offset:.2em;text-decoration-color:color-mix(in srgb,var(--c) 45%,transparent)}
.proof-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
@media(min-width:1000px){
  .band--split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);column-gap:clamp(28px,5vw,72px);align-items:center}
  .band--split > .eyebrow{grid-column:1/-1}
  .band--split .proof-row{flex-direction:column;align-items:flex-start;margin-top:0}
}
.quote{font:600 clamp(1.5rem,3.2vw,2.5rem)/1.12 var(--ff-disp);letter-spacing:-.03em;text-wrap:balance}
.quote cite{display:block;margin-top:16px;font:400 .76rem var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--bone-mute);font-style:normal}

/* ------------------------------------------------------------------ commissions menu */
.menu{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.item{display:flex;flex-direction:column;padding:0;overflow:hidden}
.item .shot{aspect-ratio:21/9;overflow:hidden;background:var(--ink-2);border-bottom:1px solid var(--line)}
.item .shot img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.item:hover .shot img{transform:scale(1.05)}
.item .body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.item-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.item h3{font-size:1.32rem;font-weight:700;margin:0}
.item .price{font:500 .92rem var(--ff-mono);color:var(--c);white-space:nowrap}
.item p{margin-bottom:18px}
.item p b{color:var(--bone);font-weight:500}
.spec{border-top:1px solid var(--line);padding-top:16px;margin-bottom:22px;display:grid;gap:9px}
.spec div{font:400 .78rem/1.5 var(--ff-mono);color:var(--bone-dim);display:grid;grid-template-columns:84px 1fr;gap:12px}
.spec div b{color:var(--c);font-weight:500}
.item .btn{margin-top:auto}
@media(max-width:780px){.menu{grid-template-columns:1fr}}
.vs{display:grid;grid-template-columns:1fr 1fr;padding:0;overflow:hidden}
.vs > div{padding:clamp(24px,3vw,36px)}
.vs > div + div{border-left:1px solid var(--line)}
.vs h3{margin:12px 0 10px;font-size:1.3rem}
.vs .rule{margin-top:18px;font:500 .8rem var(--ff-mono);color:var(--bone)}
.vs a{color:var(--c);text-decoration:underline;text-underline-offset:.2em}
@media(max-width:720px){.vs{grid-template-columns:1fr}.vs > div + div{border-left:0;border-top:1px solid var(--line)}}

/* ------------------------------------------------------------------ course page */
/* node graph hero */
.graph{--c:var(--violet)}
.graph svg{display:block;width:100%;height:auto}
.graph .wire{fill:none;stroke-width:3;stroke-linecap:round;opacity:.9}
.graph .flow{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-dasharray:3 22;opacity:.75;animation:flow 1.1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-25}}
.graph .node rect.b{fill:#232329;stroke:rgba(242,237,227,.14)}
.graph .node rect.h{fill:#2d2d36}
.graph .node text{font:500 14px var(--ff-body);fill:var(--bone)}
.graph .node text.s{font-size:12.5px;fill:var(--bone-dim)}
.graph .node .pin{stroke:#0D0D11;stroke-width:1.5}
.graph .node{animation:node-on 7s linear infinite;animation-delay:calc(var(--i) * 1s)}
@keyframes node-on{0%,8%{filter:none}10%,22%{filter:drop-shadow(0 0 10px rgba(94,219,127,.85))}26%,100%{filter:none}}
.graph .node rect.b{animation:node-stroke 7s linear infinite;animation-delay:calc(var(--i) * 1s)}
@keyframes node-stroke{0%,8%{stroke:rgba(242,237,227,.14)}10%,22%{stroke:#5EDB7F}26%,100%{stroke:rgba(242,237,227,.14)}}
.mascot{width:clamp(74px,9vw,118px);height:auto;filter:drop-shadow(0 12px 22px rgba(0,0,0,.6));animation:bob 5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(-3deg)}}
.hero-art{position:relative}
.hero-art .mascot{position:absolute;right:0;bottom:-6px;z-index:2}
@media(max-width:900px){.page-404 .mascot{display:none}}
.hero-art figcaption{padding-right:clamp(90px,11vw,134px);min-height:3.4em}
.page-course .hero-grid{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)}
@media(max-width:940px){.page-course .hero-grid{grid-template-columns:minmax(0,1fr)}}

/* slide film strip */
.strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--gut) 22px;scrollbar-width:thin;scrollbar-color:var(--ink-3) transparent;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.strip::-webkit-scrollbar{height:8px}.strip::-webkit-scrollbar-thumb{background:var(--ink-3);border-radius:8px}
.slide{flex:0 0 clamp(270px,34vw,440px);scroll-snap-align:center;display:block;text-align:left}
.slide .frame{aspect-ratio:16/9;transition:transform .35s var(--ease),border-color .25s,box-shadow .35s}
.slide:hover .frame,.slide:focus-visible .frame{transform:translateY(-5px) rotate(-.6deg);border-color:var(--c);box-shadow:0 26px 50px -28px color-mix(in srgb,var(--c) 70%,transparent)}
.slide .cap{display:flex;justify-content:space-between;gap:10px}
.slide .cap b{color:var(--c);font-weight:500;white-space:nowrap;flex:none}
dialog.lightbox{margin:auto;padding:0;border:1px solid var(--line-2);border-radius:var(--r);background:#0D0D11;color:var(--bone);max-width:min(1280px,94vw);width:94vw;width:min(94vw,1280px,calc((100dvh - 110px) * 16 / 9));overflow:hidden}
dialog.lightbox::backdrop{background:rgba(5,5,8,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog.lightbox img{width:100%;height:auto}
dialog.lightbox .bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;font:400 .78rem var(--ff-mono);color:var(--bone-dim)}
dialog.lightbox .bar div{display:flex;gap:8px}
dialog.lightbox button{min-width:42px;height:42px;border-radius:9px;border:1px solid var(--line-2);font:500 .9rem var(--ff-mono)}
dialog.lightbox button:hover{border-color:var(--volt);color:var(--volt)}
html:has(dialog.lightbox[open]){overflow:hidden}

/* curriculum: three tracks of modules */
.track-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.track-head h3{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:700;letter-spacing:-.03em}
.track-head .meta{font:400 .78rem var(--ff-mono);color:var(--bone-mute)}
.curr{display:grid;gap:clamp(40px,6vw,72px)}
.mods{border-top:1px solid var(--line-2)}
.mods details{border-bottom:1px solid var(--line-2)}
.mods summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:3.2rem 1fr auto;gap:14px;align-items:center;padding:17px 2px;transition:background-color .2s}
.mods summary::-webkit-details-marker{display:none}
.mods summary:hover h4{color:var(--c)}
.mods .no{font:500 .78rem var(--ff-mono);color:var(--c);letter-spacing:.06em}
.mods h4{font:600 clamp(1.02rem,1.5vw,1.2rem)/1.2 var(--ff-disp);transition:color .2s}
.mods .ic{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);font:400 .95rem/1 var(--ff-mono);color:var(--c);transition:transform .3s var(--spring)}
.mods details[open] .ic{transform:rotate(45deg)}
.mods .in{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(18px,3vw,40px);padding:2px 2px 24px calc(3.2rem + 14px)}
.mods .in p{color:var(--bone-dim);font-size:.96rem}
.mods .in ul{display:grid;gap:8px}
.mods .in li{position:relative;padding-left:24px;font-size:.92rem;color:var(--bone)}
.mods .in li::before{content:"";position:absolute;left:0;top:.42em;width:13px;height:8px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg) scale(.8)}
.mods .in .lab{font:500 .7rem var(--ff-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-mute);margin-bottom:10px}
@media(max-width:760px){.mods summary{grid-template-columns:2.6rem 1fr auto}.mods .in{grid-template-columns:1fr;padding-left:2px}}

/* dial: step through real course frames with a slider */
.dial{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(22px,4vw,52px);align-items:center}
.dial-stage{position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2);background:var(--ink-2);box-shadow:0 0 90px -40px var(--c)}
.dial-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.dial-stage img.on{opacity:1}
.dial-read{display:flex;align-items:baseline;gap:14px;margin:18px 0 6px}
.dial-read .lab{font:500 .82rem var(--ff-mono);letter-spacing:.06em;color:var(--bone-dim)}
.dial-read output{font:700 clamp(2.4rem,5vw,3.8rem)/1 var(--ff-disp);letter-spacing:-.04em;color:var(--c);font-variant-numeric:tabular-nums}
.dial-cap{min-height:4.6em;color:var(--bone-dim);margin-top:10px}
.dial-cap b{color:var(--bone)}
.dial-ticks{display:flex;justify-content:space-between;font:400 .7rem var(--ff-mono);color:var(--bone-mute);margin-top:2px}
html:not(.js) [data-dial] input[type=range],html:not(.js) .dial-ticks,html:not(.js) .viewer-tag,html:not(.js) .viewer-toggle{display:none}
@media(max-width:820px){.dial{grid-template-columns:1fr}.dial-stage{max-width:460px}}

/* fit table + tier picker */
.tabs{display:inline-flex;gap:6px;padding:6px;border-radius:14px;border:1px solid var(--line-2);background:rgba(10,10,13,.6);flex-wrap:wrap}
.tabs button{padding:.7em 1.2em;min-height:44px;border-radius:9px;font:500 .86rem var(--ff-mono);color:var(--bone-dim);transition:background-color .2s,color .2s}
.tabs button:hover{color:var(--bone)}
.tabs button[aria-selected=true]{background:var(--tc,var(--volt));color:var(--on-accent);font-weight:600;box-shadow:0 0 26px -6px var(--tc,var(--volt))}
html:not(.js) [data-tabs] [role=tabpanel][hidden]{display:block}
html:not(.js) [data-tabs] [role=tablist]{display:none}
.lane-out{margin-top:20px;display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
.lane-out h3{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:700;color:var(--tc,var(--volt));letter-spacing:-.03em}
.lane-out .facts{display:grid;grid-template-columns:1fr;gap:0;align-content:start;border:0;border-radius:0;background:none;overflow:visible}
.lane-out .facts div{display:flex;justify-content:space-between;gap:14px;padding:12px 0;margin:0;border-left:0;border-top:1px solid var(--line);font:400 .86rem var(--ff-mono);color:var(--bone-dim)}
.lane-out .facts b{color:var(--bone);font-weight:500;text-align:right}
@media(max-width:760px){.lane-out{grid-template-columns:1fr}}
.tbl-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line)}
table.fit{width:100%;border-collapse:collapse;min-width:560px;font-size:.93rem}
table.fit caption{caption-side:bottom;text-align:left;padding:12px 16px;font:400 .76rem var(--ff-mono);color:var(--bone-mute)}
table.fit th,table.fit td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)}
table.fit thead th{font:500 .72rem var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--bone-mute);background:rgba(242,237,227,.03)}
table.fit tbody th{font:700 1.02rem var(--ff-disp)}
table.fit tr:last-child td,table.fit tr:last-child th{border-bottom:0}
table.fit tr.on{background:color-mix(in srgb,var(--volt) 7%,transparent)}
.pill{display:inline-block;font:600 .72rem var(--ff-mono);letter-spacing:.06em;padding:.4em .8em;border-radius:100px;color:var(--on-accent);background:var(--pc)}
.pill.y{--pc:var(--ok)}.pill.s{--pc:var(--warn)}.pill.n{--pc:var(--bad)}
@media(max-width:620px){
  table.fit{min-width:0;font-size:.8rem}
  table.fit th,table.fit td{padding:10px 5px}
  table.fit thead th{font-size:.6rem;letter-spacing:.03em}
  table.fit tbody th{font-size:.92rem;white-space:nowrap}
  table.fit .pill{padding:.35em .5em;font-size:.62rem;letter-spacing:.02em}
}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:.88rem;color:var(--bone-dim)}
.legend span{display:inline-flex;gap:8px;align-items:center}

/* pricing */
.price-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:22px;align-items:stretch}
.plan{display:flex;flex-direction:column;gap:16px;padding:clamp(24px,3.2vw,40px)}
.plan h3{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700;letter-spacing:-.03em;margin:0}
.plan .amount{font:700 clamp(2.6rem,5.4vw,4.2rem)/1 var(--ff-disp);letter-spacing:-.045em}
.plan .amount small{font:400 .82rem var(--ff-mono);letter-spacing:.02em;color:var(--bone-mute);margin-left:.6em}
.plan .amount.tba{font-size:clamp(1.7rem,3.2vw,2.4rem);letter-spacing:-.03em}
.plan ul{display:grid;gap:10px}
.plan li{position:relative;padding-left:26px;color:var(--bone-dim);font-size:.96rem}
.plan li::before{content:"";position:absolute;left:1px;top:.42em;width:13px;height:8px;border-left:2px solid var(--c);border-bottom:2px solid var(--c);transform:rotate(-45deg) scale(.85)}
.plan li b{color:var(--bone);font-weight:500}
.plan .cta-row{margin-top:auto;padding-top:10px}
.plan .fine{font:400 .76rem/1.5 var(--ff-mono);color:var(--bone-mute)}
@media(max-width:880px){.price-grid{grid-template-columns:1fr}}
.dl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dl a{display:flex;flex-direction:column;gap:8px}
.dl .ext{font:600 .66rem var(--ff-mono);letter-spacing:.1em;color:var(--on-accent);background:var(--c);padding:.32em .6em;border-radius:4px;align-self:flex-start}
.dl small{font:400 .74rem var(--ff-mono);color:var(--bone-mute)}
@media(max-width:820px){.dl{grid-template-columns:1fr}}
.clips{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.clips{grid-template-columns:1fr}}
.clip .win-body{aspect-ratio:16/9;background:#050507}
.clip video{width:100%;height:100%;object-fit:cover}
.clip h3,.clip h4{margin:14px 0 6px;font-size:1.02rem;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.clip p{color:var(--bone-dim);font-size:.92rem}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,200px));gap:14px;justify-content:center}
.duo .frame{aspect-ratio:9/16}
.builds{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:980px){.builds{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.builds{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ blog */
.crumbs{font:400 .74rem var(--ff-mono);color:var(--bone-mute);letter-spacing:.05em;margin-bottom:22px;display:flex;flex-wrap:wrap;gap:.6em}
.crumbs a{display:inline-flex;align-items:center;min-height:32px}
.crumbs a:hover{color:var(--volt)}
.crumbs span{display:inline-flex;align-items:center;min-height:32px}
.bhero{padding-block:clamp(44px,6vw,84px) clamp(20px,3vw,34px)}
.bhero h1{font-size:clamp(2.3rem,5.2vw,4.1rem);max-width:18ch}
.bhero p{color:var(--bone-dim);max-width:62ch;margin-top:18px;font-size:1.06rem}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post-card{display:flex;flex-direction:column;padding:0;overflow:hidden}
.post-card .thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink-2);border-bottom:1px solid var(--line)}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.post-card:hover .thumb img{transform:scale(1.05)}
.post-card .pc{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-card .tags{font:500 .68rem var(--ff-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--c)}
.post-card{position:relative}
.post-card .h3{font-size:1.1rem;line-height:1.24;margin:0;font-weight:600;letter-spacing:-.015em}
.post-card .h3 a{transition:color .2s}
.post-card .h3 a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.post-card:hover .h3 a,.post-card .h3 a:focus-visible{color:var(--c)}
.post-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 55%,transparent)}
.post-card p{font-size:.92rem;flex:1}
.post-card .meta{font:400 .72rem var(--ff-mono);color:var(--bone-mute)}
.post-card.feature{grid-column:1/-1;flex-direction:row}
.post-card.feature .thumb{flex:1.15;aspect-ratio:auto;min-height:280px;border-bottom:0;border-right:1px solid var(--line)}
.post-card.feature .pc{flex:1;justify-content:center;padding:clamp(24px,3.4vw,44px)}
.post-card.feature .h3{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:700;letter-spacing:-.03em;line-height:1.08}
@media(max-width:980px){.post-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.post-grid{grid-template-columns:1fr}.post-card.feature{flex-direction:column}.post-card.feature .thumb{min-height:0;aspect-ratio:16/9;border-right:0;border-bottom:1px solid var(--line)}}

article.post{width:min(780px,100% - var(--gut)*2);margin-inline:auto;padding-top:clamp(36px,5vw,64px)}
article.post h1{font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.02}
article.post .meta{font:400 .76rem var(--ff-mono);color:var(--bone-mute);letter-spacing:.04em;margin:20px 0 32px;display:flex;gap:8px 18px;flex-wrap:wrap}
article.post .meta a{color:var(--volt);text-decoration:underline;text-underline-offset:.2em;text-decoration-color:rgba(250,238,75,.45)}
.prose{font-size:1.04rem;line-height:1.7}
.prose > * + *{margin-top:1.15em}
.prose h2{font-size:clamp(1.5rem,2.6vw,2.05rem);margin-top:2em;line-height:1.1}
.prose h3{margin-top:1.6em;font-size:1.22rem}
.prose .lead{font-size:clamp(1.12rem,1.6vw,1.3rem);max-width:none;color:var(--bone)}
.prose ul,.prose ol{padding-left:1.35em;display:grid;grid-template-columns:minmax(0,1fr);gap:.5em}
.prose li{min-width:0}.prose li>pre{margin-top:.6em}
.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose li::marker{color:var(--volt)}
.prose a:not(.btn){color:var(--volt);text-decoration:underline;text-underline-offset:.2em;text-decoration-color:rgba(250,238,75,.45)}
.prose a:not(.btn):hover{text-decoration-color:currentColor}
.prose code{font:400 .86em var(--ff-mono);background:var(--ink-2);border:1px solid var(--line);border-radius:5px;padding:.12em .42em;color:var(--volt)}
.prose :not(pre) > code{overflow-wrap:anywhere}
.prose,.card,.faq,td,dd{overflow-wrap:break-word}
.prose pre{background:#0D0D11;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:18px 20px;overflow-x:auto}
.prose pre code{background:none;border:0;padding:0;color:var(--bone);font-size:.88rem;line-height:1.6}
/* class="wrap" on a pre that holds prose (a prompt, a log line): wrap instead of scrolling sideways.
   The second rule undoes the width and centring that the layout class .wrap would give the block. */
.prose pre.wrap,.prose pre.wrap code{white-space:pre-wrap;overflow-wrap:anywhere}
.prose pre.wrap{width:auto;margin-inline:0}
@media(max-width:480px){
  .prose pre{padding:14px 12px}
  .prose pre code{font-size:.8rem}
}
.prose table{width:100%;border-collapse:collapse;font-size:.94rem;display:block;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm)}
.prose th,.prose td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font:500 .72rem var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--volt);background:rgba(242,237,227,.03)}
.prose th code{letter-spacing:0}
.prose tr:last-child td{border-bottom:0}
/* build.py wraps every table of a post in .tbl-scroll: the wrapper scrolls, the table stays a real table */
.prose .tbl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm)}
.prose .tbl-scroll > table{display:table;border:0;border-radius:0;overflow:visible}
.prose caption{caption-side:bottom;text-align:left;padding:10px 14px;border-top:1px solid var(--line);font:400 .76rem/1.5 var(--ff-mono);color:var(--bone-mute)}
.prose td code,.prose th code{overflow-wrap:break-word}
.prose table.keycol td:first-child code{white-space:nowrap}
.prose blockquote{border-left:2px solid var(--mag);padding-left:18px;color:var(--bone-dim)}
.prose details{border-bottom:1px solid var(--line-2);margin-top:0}
.prose details:first-of-type{border-top:1px solid var(--line-2)}
.prose summary{list-style:none;cursor:pointer;padding:18px 2px;display:flex;justify-content:space-between;align-items:center;gap:20px;font:600 1.04rem/1.3 var(--ff-disp)}
.prose summary::-webkit-details-marker{display:none}
.prose summary .ic{font-family:var(--ff-mono);color:var(--volt);flex:none;transition:transform .3s var(--spring)}
.prose details[open] summary .ic{transform:rotate(45deg)}
.prose details p{color:var(--bone-dim);padding:0 2px 20px;margin:0;font-size:.98rem}
.keyfacts{--c:var(--cyan);padding:22px 24px;margin-top:1.6em}
.keyfacts .eyebrow{margin-bottom:12px}
.keyfacts ul{list-style:none;padding:0;display:grid;gap:9px}
.keyfacts li{position:relative;padding-left:24px;font-size:.97rem}
.keyfacts li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;border-radius:2px;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.toc{font:400 .82rem/1.5 var(--ff-mono);color:var(--bone-dim);border-left:2px solid var(--line-2);padding-left:16px;display:grid;gap:6px}
.toc b{color:var(--bone-mute);letter-spacing:.12em;text-transform:uppercase;font-size:.7rem;font-weight:500}
.toc a{color:var(--bone-dim);text-decoration:none!important}
.toc a:hover{color:var(--volt)}
.video{position:relative;display:block;width:100%;aspect-ratio:16/9;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--ink-1);margin:0 0 30px;box-shadow:0 0 90px -46px var(--mag)}
.video img{width:100%;height:100%;object-fit:cover;opacity:.86;transition:opacity .3s,transform .7s var(--ease)}
.video:hover img{opacity:1;transform:scale(1.03)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video .play{position:absolute;inset:0;display:grid;place-items:center}
.video .play span{width:78px;height:54px;border-radius:14px;background:var(--volt);display:grid;place-items:center;box-shadow:0 0 40px -6px var(--volt);transition:transform .3s var(--spring)}
.video:hover .play span{transform:scale(1.1)}
.video .play span::after{content:"";border-left:20px solid var(--on-accent);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.video:has(img[src*="/assets/covers/"]) .play span{translate:0 -62%}
.video .vcap{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;background:linear-gradient(transparent,rgba(10,10,13,.92) 45%);font:500 .72rem var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;text-align:left}
@media(max-width:700px){.video img[src*="/assets/covers/"] ~ .vcap{display:none}}
.post-fig img{width:100%;border-radius:var(--r-sm);border:1px solid var(--line-2)}
.post-fig a{display:block;text-decoration:none;cursor:zoom-in}
.post-fig.portrait img{max-width:420px;display:block;margin-inline:auto}
.views{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.views div{display:flex;flex-direction:column;gap:6px;font-size:.82rem;color:var(--bone-dim)}
.views img{width:100%;aspect-ratio:1/2.6;object-fit:cover;object-position:top;border-radius:6px;border:1px solid var(--line-2)}
.views div:last-child img{object-position:50% 12%}
.views b{font:500 .7rem var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--volt)}
@media(max-width:700px){.views{grid-template-columns:repeat(2,1fr)}}
.post-cta{margin-top:56px;padding:clamp(24px,3.4vw,36px)}
.post-cta .cta-title{font:700 clamp(1.4rem,2.4vw,1.8rem)/1.1 var(--ff-disp);letter-spacing:-.03em;color:var(--bone);margin:12px 0 8px}
.post-cta p{margin-bottom:22px}
.author{display:flex;gap:16px;align-items:center;margin-top:44px;padding-top:24px;border-top:1px solid var(--line-2);color:var(--bone-dim);font-size:.93rem}
.author img{width:60px;height:60px;border-radius:14px;flex:none}
.author b{color:var(--bone);display:block;font-family:var(--ff-disp);font-size:1.02rem}
.author a{color:var(--volt);text-decoration:underline;text-underline-offset:.2em;text-decoration-color:rgba(250,238,75,.45)}
.related{margin-top:clamp(48px,6vw,80px)}
.related h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:20px}
/* hover states for text links and small controls that had none (kept after the rules they refine) */
.byline a:hover{color:var(--volt)}
.vs a{text-decoration-color:color-mix(in srgb,var(--c) 45%,transparent)}
.band a:not(.btn):hover,.vs a:hover{text-decoration-color:currentColor}
.prose .toc a{color:var(--bone-dim)}
.prose .toc a:hover{color:var(--volt)}
.prose summary{transition:color .2s}
.prose summary:hover{color:var(--volt)}
.author a:hover,article.post .meta a:hover{text-decoration-color:currentColor}
a.chip{transition:border-color .2s,color .2s}
a.chip:hover{border-color:var(--volt);color:var(--bone)}
a.rv:hover .win{border-color:var(--c)}
.win video:focus-visible,.frame video:focus-visible{outline-offset:-4px}

/* glossary */
.gloss-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.gloss-group{margin-top:clamp(36px,5vw,60px)}
.gloss-group > h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:18px}
.terms{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.term{padding:22px 24px}
.term h3{font-size:1.18rem;margin-bottom:8px}
.term .photo{margin-top:10px;color:var(--volt);font-style:italic;font-size:.93rem}
.term .rem{margin-top:8px;font:400 .78rem/1.5 var(--ff-mono);color:var(--bone-mute)}
.term:target{border-color:var(--volt);box-shadow:0 0 0 1px color-mix(in srgb,var(--volt) 30%,transparent),0 0 60px -28px var(--volt)}
@media(max-width:820px){.terms{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ footer */
footer{border-top:1px solid var(--line);margin-top:clamp(40px,6vw,80px);padding-block:clamp(36px,5vw,60px) 28px;background:linear-gradient(180deg,transparent,rgba(10,10,13,.7))}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.foot-brand p{color:var(--bone-dim);font-size:.92rem;max-width:34ch;margin-top:14px}
.foot-col b{display:block;font:500 .7rem var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-mute);margin-bottom:12px}
.foot-col a{display:flex;align-items:center;min-height:36px;font-size:.93rem;color:var(--bone-dim);transition:color .15s}
.foot-col a:hover{color:var(--volt)}
.foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:34px;padding-top:20px;border-top:1px solid var(--line);font:400 .74rem var(--ff-mono);color:var(--bone-mute)}
.foot-base a{text-decoration:underline;text-underline-offset:.2em}
.foot-base a:hover{color:var(--volt)}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* ------------------------------------------------------------------ motion */
@media(prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
  .js .rv.pop{transform:scale(.94)}
  .js .rv.left{transform:translateX(-34px)}
  .js .rv.right{transform:translateX(34px)}
  .js .rv.wipe{transform:none;clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease),opacity .4s}
  .js .rv.in{opacity:1;transform:none}
  .js .rv.wipe.in{clip-path:inset(0)}
  .js .rv[id]{transform:none}
  .js .card.hov.rv.in{transition:opacity .8s var(--ease) calc(var(--i,0) * 80ms),transform .8s var(--ease) calc(var(--i,0) * 80ms),border-color .25s,box-shadow .3s}
  .js .card.hov.rv.in:hover{transform:translateY(-4px);transition:transform .3s var(--ease),border-color .25s,box-shadow .3s}
}
@media(prefers-reduced-motion:no-preference) and (max-width:700px),(prefers-reduced-motion:no-preference) and (hover:none){.js .rv.left:not(.in),.js .rv.right:not(.in){transform:translateY(26px)}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .ticker ul{flex-wrap:wrap;justify-content:center;width:auto;row-gap:14px}
  .ticker li[aria-hidden=true]{display:none}
  .track.auto .playhead{left:62%}
}
/* the "Pause animations" switch in the footer (site.js toggles html.still); the scroll-driven progress bar keeps running */
html.still *:not(.progress),html.still *::before,html.still *::after{animation-play-state:paused!important}
[data-still]{text-decoration:underline;text-underline-offset:.2em;min-height:24px}
@media(prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}

/* print: a clean readable page */
/* ---- phones: findings of the phone-layout review ---- */
@media(max-width:800px){
  header.nav .nav-cta{display:inline-flex;margin-left:auto;padding:.6em .8em;font-size:.78rem}
  .nav-in{gap:10px}
  .mmenu-panel{background:#0A0A0D}
  html:has(.mmenu[open]){overflow:hidden}
}
@media(max-width:480px){header.nav .brand b{display:none}}
@media(max-width:340px){header.nav .nav-cta{display:none}}   /* 320 px phones: the button is in the menu */
@media(max-width:560px){
  .hero-grid > div:first-child{display:flex;flex-direction:column;align-items:flex-start}
  .hero .cta-row{order:1;width:100%;margin-top:24px}
  .hero .chips{order:2;margin-top:20px}
  .hero .byline{order:3}
  .proof-row .chip{display:inline-block;white-space:normal;line-height:1.4;border-radius:16px}
}
@media(max-width:400px){.tabs{display:flex}.tabs button{flex:1 1 0;padding:.7em .4em}}
.track-head .meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.track-head .meta .nw{white-space:nowrap}
@media(pointer:coarse){
  input[type=range]{height:44px}
  .crumbs a,.crumbs span{min-height:40px}
  .foot-col a{min-height:44px}
  .toc{gap:0}
  .toc a{display:flex;align-items:center;min-height:40px}
  .gloss-nav .chip{min-height:40px}
}

/* ---- a sideways-scrolling table or code block shows a glowing edge on the side that has more ---- */
.prose .tbl-scroll,.prose pre{background-color:#0D0D11;background-image:linear-gradient(90deg,#0D0D11 45%,rgba(13,13,17,0)),linear-gradient(270deg,#0D0D11 45%,rgba(13,13,17,0)),linear-gradient(90deg,rgba(250,238,75,.34),rgba(250,238,75,0)),linear-gradient(270deg,rgba(250,238,75,.34),rgba(250,238,75,0));background-position:left center,right center,left center,right center;background-size:44px 100%,44px 100%,16px 100%,16px 100%;background-repeat:no-repeat;background-attachment:local,local,scroll,scroll}

/* ---- phones: no text under 12 px ---- */
@media(max-width:700px){
  .eyebrow,.cap,figure figcaption,.crumbs,.foot-base,.foot-col b,.win-bar,.viewer-tag,.tl-top,.ticks,.dial-ticks,.facts dt,.wall .num,.wall .fix b,
  .rows .k,.card .k,span.k,.row .r-name small,.lane small,.dl small,.dl .ext,.cta-row .note,.track-head .meta,.part .meta,.plan .fine,.term .rem,.step .sn,
  .mods .in .lab,.mods .no,.sheet .labs span,.tier .t-eye,.post-card .tags,.post-card .meta,.prose th,.toc b,.views b,.video .vcap,.spec div,article.post .meta{font-size:.75rem}
  .tag-new,.flagtag{font-size:.75rem;letter-spacing:.04em}
  .prose th code,.cap code,.prose caption code{font-size:1em}
  .sheet .labs span,.win-bar,.tl-top,.viewer-tag{letter-spacing:.03em}
  .ticks{gap:10px;line-height:1.3}
  .seg{padding:0 4px;letter-spacing:0;font-size:.75rem}
  table.fit thead th{font-size:.75rem;letter-spacing:0;line-height:1.3}
  table.fit .pill{font-size:.75rem;letter-spacing:0;padding:.3em .38em}
  .pill{font-size:.75rem}
}
@media(max-width:400px){.seg{padding:0 2px}}
@media(max-width:350px){.seg{font-size:.62rem}}   /* 320 px phones only: the four timeline words do not fit at 12 px */
@media print{
  .ambient,header.nav,footer,.progress,body::before,.cta-band,.ticker{display:none!important}
  html,body{background:#fff;color:#111}
  .js .rv{opacity:1!important;transform:none!important;clip-path:none!important}
}