/* Omega Mega — company site. Mobile-first; desktop added with min-width only. */
@font-face{font-family:"Archivo";src:url("../fonts/archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}

:root{
  --paper:#f7f6f1; --ink:#0b0b0c; --mute:#55554f; --plate:#fff; --line:#0b0b0c;
  --lime:#d2f783; --pink:#ffaeb4; --cyan:#a3e7f4; --lav:#c9bdf6; --yellow:#f6f08a; --red:#ff6b68;
  --grid:rgba(11,11,12,.07); --shadow:#0b0b0c; --nav:rgba(247,246,241,.86);
  --pad:clamp(18px,5vw,56px); --gap:clamp(64px,11vw,150px);
  --mono:"Courier New",ui-monospace,Menlo,monospace;
}
html[data-variant="noir"]{
  --paper:#08090b; --ink:#f3f2ea; --mute:#a5a59c; --line:#f3f2ea; --grid:rgba(210,247,131,.07);
  --shadow:#d2f783; --nav:rgba(8,9,11,.82);
}
html[data-variant="holo"]{
  --paper:#efe9ff; --mute:#3c3a4a; --grid:rgba(11,11,12,.09); --nav:rgba(255,255,255,.72);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 clamp(16px,1.05vw + 12px,19px)/1.55 "Archivo",system-ui,sans-serif;overflow-x:hidden;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:44px 44px}
html[data-variant="holo"] body{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),
  repeating-linear-gradient(125deg,#ffd6f3 0,#d9d2ff 528px,#bfeaff 1056px,#c9ffd9 1488px,#fff3b8 1920px,#ffd6f3 2400px);background-size:44px 44px,44px 44px,auto}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 7px var(--lime)}
.skip{position:absolute;left:-999px;top:0;background:var(--lime);color:#0b0b0c;padding:12px 16px;z-index:100;font-weight:700}
.skip:focus{left:8px;top:8px}
.wrap{width:min(1240px,100%);margin:0 auto;padding:0 var(--pad)}

/* type */
h1,h2,h3,h4{font-stretch:125%;font-weight:900;text-transform:uppercase;letter-spacing:.012em;margin:0;text-wrap:balance}
h1{font-size:clamp(26px,8vw,96px);line-height:1.08}
h2{font-size:clamp(min(28px,7.8vw),6.6vw,84px);line-height:1.1;margin-top:28px}
h2 em{font-style:normal;background:var(--ink);color:var(--paper);padding:0 .14em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
h2 .u{text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.12em}
h2.thin,h2 .thin{font-weight:500;font-stretch:100%}
h2 i{font-style:normal;font-weight:300}
h3{font-size:clamp(19px,2.2vw,26px);line-height:1.15}
h3.sub{font-size:clamp(22px,3.4vw,40px);margin:clamp(56px,8vw,104px) 0 28px}
h4{font-size:20px;line-height:1.15}
.lede{font-size:clamp(18px,1.5vw + 12px,26px);line-height:1.4;max-width:34em;margin:34px 0 0}
.eyebrow,.bar{font:700 clamp(11px,.4vw + 10px,14px)/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;margin:0}
.eyebrow{color:var(--mute)}
.eyebrow::before{content:"";display:inline-block;width:.8em;height:.8em;background:var(--ink);border-radius:50%;margin-right:.7em;vertical-align:-.05em}
.bar{display:block;width:max-content;max-width:100%;padding:7px 12px;color:#0b0b0c;background:var(--lime)}
.bar.pink,.tag.pink{background:var(--pink)} .bar.cyan,.tag.cyan{background:var(--cyan)} .bar.lav{background:var(--lav)} .tag.lime{background:var(--lime)}
.bar.big{font:800 clamp(17px,2.4vw,30px)/1.25 "Archivo",sans-serif;font-stretch:112%;letter-spacing:0;text-transform:none;padding:20px 22px;margin-top:48px;width:auto}
.note{font-weight:600;margin:40px 0 0;max-width:40em}

/* nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--pad);
  background:var(--nav);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:2px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:900;font-stretch:125%;text-transform:uppercase;letter-spacing:.02em;font-size:15px;min-height:44px}
.brand img{width:40px;height:40px}
.tools{display:flex;gap:8px;align-items:center}
.variants{display:flex;border:2px solid var(--line)}
.variants button{all:unset;cursor:pointer;width:36px;height:40px;text-align:center;font:700 13px var(--mono)}
.variants button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.menu{all:unset;cursor:pointer;font:700 13px var(--mono);text-transform:uppercase;letter-spacing:.08em;padding:0 14px;height:44px;line-height:44px;background:var(--ink);color:var(--paper)}
.links{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;background:var(--paper);border-bottom:2px solid var(--line)}
.links.open{display:flex}
.links a{padding:15px var(--pad);text-decoration:none;font:700 14px var(--mono);text-transform:uppercase;letter-spacing:.08em;border-top:1px solid var(--grid)}
.links a:hover{background:var(--lime);color:#0b0b0c}

/* buttons */
.btn{display:inline-flex;align-items:center;min-height:52px;padding:0 24px;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:800;font-stretch:112%;
  border:2px solid var(--ink);box-shadow:6px 6px 0 var(--lime);transition:transform .25s cubic-bezier(.2,1.4,.4,1),box-shadow .25s cubic-bezier(.2,1.4,.4,1)}
.btn:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--lime)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:6px 6px 0 var(--pink)}
.btn.ghost:hover{box-shadow:3px 3px 0 var(--pink)}
.btn.xl{font-size:clamp(17px,3.6vw,38px);min-height:clamp(60px,8vw,96px);padding:0 clamp(18px,3vw,44px);overflow-wrap:anywhere}
.actions{display:flex;flex-wrap:wrap;gap:18px;margin-top:38px}

/* plates: every picture sits on white, so art cut from the deck survives any ground */
.plate{margin:0;background:var(--plate);border:2px solid var(--line);box-shadow:8px 8px 0 var(--shadow);overflow:hidden}
.plate.wide{margin-top:48px}
.plate.cap figcaption{padding:16px 18px 18px;color:#0b0b0c;font-size:16px;line-height:1.45;border-top:2px solid #0b0b0c}
.plate.cap.dark figcaption{background:#0b0b0c;color:#f7f6f1}
.plate.cap strong{display:block;font-stretch:125%;font-weight:900;text-transform:uppercase;margin-bottom:6px}
.plate.cap img{width:100%}

/* hero */
.hero{position:relative;padding-top:clamp(36px,7vw,84px);overflow:hidden}
.hero-copy{position:relative;z-index:2}
.hero h1{margin-top:28px}
/* the greeting: "Hi <name>, we are an evolutionary venture-tainment <flux>" — js/hello.js fills the name and fluxes the last word */
.hello{font-size:clamp(19px,6.4vw,80px);line-height:1.1}   /* VENTURETAINMENT is 13.65em wide: 6.4vw keeps it on one line from 297px up */
.hello .hi{display:block;max-width:30em;margin-bottom:.55em;font-size:clamp(18px,.4em,38px);font-weight:800;font-stretch:112%;
  text-transform:none;letter-spacing:0;line-height:1.3;text-wrap:pretty}
.hello .who{padding:0 .18em;background:var(--lime);color:#0b0b0c;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hello .flux{display:block}
.hello .fw2{position:relative;display:inline-block}
.hello .fw2::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.12em;background:var(--lime);transform-origin:0 50%}
.hello .fl{display:inline-block}
.hero .bar{max-width:calc(100% - 96px)}
.toyline{display:flex;gap:12px;align-items:baseline;max-width:34em;margin:20px 0 0;font-weight:800;font-stretch:112%;font-size:clamp(16px,.8vw + 12px,21px);line-height:1.35}
.toyline::before{content:"";flex:none;width:.72em;height:.72em;background:var(--lime);border:2px solid #0b0b0c;transform:translateY(.06em)}
.toytree{list-style:none;max-width:42em;margin:12px 0 0;padding:0 0 0 calc(.72em + 12px);font-size:clamp(16px,.8vw + 12px,21px);line-height:1.35}
.toytree li{position:relative}
.toytree>li{padding-left:calc(.5em + 10px);margin-top:10px}
.toytree>li::before{content:"";position:absolute;left:0;top:.42em;width:.5em;height:.5em;border:2px solid var(--ink);background:var(--lime)}
.toytree .tt{font-weight:700;font-stretch:106%}
.toytree ul{list-style:none;margin:8px 0 0;padding:0;font-size:.8em;line-height:1.45;font-weight:500;color:var(--mute)}
.toytree ul li{padding-left:1.1em;margin-top:8px}
.toytree ul li::before{content:"";position:absolute;left:0;top:.68em;width:.6em;height:2px;background:currentColor}
.toytree .tt-close strong{font-weight:900;font-stretch:112%}
.founder a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.sun{position:absolute;z-index:1;right:-48px;top:8px;width:clamp(124px,17vw,250px);animation:spin 80s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-art{margin-top:clamp(40px,6vw,72px);border-top:2px solid var(--line);border-bottom:2px solid var(--line);background:#fff;overflow:hidden}
.hero-art img{width:100%;transform:scale(1.06);transform-origin:50% 100%;will-change:transform}

/* ticker */
.ticker{overflow:hidden;background:var(--ink);color:var(--paper);border-bottom:2px solid var(--line)}
.ticker div{display:flex;width:max-content;animation:tick 34s linear infinite}
.ticker span{font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(15px,2vw,22px);padding:14px 0}
.ticker span::after{content:"✺";margin:0 1.2em;color:var(--lime)}
@keyframes tick{to{transform:translateX(-50%)}}

/* sections */
.sec{padding:var(--gap) 0 0}
.sec:last-of-type{padding-bottom:var(--gap)}
.stack{list-style:none;margin:48px 0 0;padding:0;display:grid;gap:14px}
.stack li{display:flex;gap:16px;align-items:center;padding:16px 18px;color:#0b0b0c;border:2px solid #0b0b0c;box-shadow:6px 6px 0 var(--shadow);background:var(--lime)}
.stack li.yellow{background:var(--yellow)} .stack li.cyan{background:var(--cyan)} .stack li.red{background:var(--red)}
.stack b{font-size:38px;font-weight:300;line-height:1;min-width:1ch}
.stack strong{font-stretch:125%;font-weight:900}

.steps{list-style:none;margin:44px 0 0;padding:0;display:grid;gap:0;counter-reset:s;border-top:2px solid var(--line)}
.steps li{counter-increment:s;padding:18px 0;border-bottom:2px solid var(--line);display:grid;grid-template-columns:3.2em 1fr;column-gap:8px;align-items:baseline}
.steps li::before{content:"0" counter(s);font:700 14px var(--mono);color:var(--mute);grid-row:span 2}
.steps p{margin:4px 0 0;color:var(--mute)}

.big3{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:34px}
.big3 li{display:grid;grid-template-columns:clamp(84px,28vw,110px) minmax(0,1fr);column-gap:20px;align-items:center}
.big3 li{position:relative}
.big3 strong{font-size:clamp(20px,6.4vw,92px);font-weight:900;font-stretch:125%;text-transform:uppercase;line-height:1.05;align-self:end}
.big3 li>span{color:var(--mute);align-self:start}

.trio,.quad{display:grid;gap:30px;margin-top:56px}
.trio>*,.quad>*,.stack>*,.five>*,.houses>*,.duo>*{min-width:0}
.trio p:not(.bar),.quad p:not(.bar){margin:16px 0 0}
.hint{margin:22px 0 0;font:700 12px/1.45 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.hint::before{content:"✺ ";color:var(--ink)}
.punch{font-size:clamp(22px,4vw,48px);font-weight:500;line-height:1.2;margin:64px 0 0;max-width:22em}
.punch span{font-weight:900;font-stretch:125%;text-transform:uppercase;display:block;margin-top:.3em}

/* lenticular viewer */
.lens{margin-top:52px;display:grid;gap:22px}
.lens-tabs{display:flex;flex-wrap:wrap;gap:10px}
.lens-tabs button{all:unset;cursor:pointer;min-height:44px;padding:0 14px;display:inline-flex;align-items:center;border:2px solid var(--line);font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.lens-tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.lens-stage{position:relative;aspect-ratio:692/620;border:2px solid var(--line);box-shadow:10px 10px 0 var(--pink);overflow:hidden;background:#111;touch-action:pan-y;cursor:ew-resize}
.lens-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:opacity}
.lens-stage img[data-i="0"]{opacity:1}
.lens-stage::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 2px,rgba(0,0,0,.1) 2px 4px,transparent 4px 7px)}
.lens-tag{position:absolute;left:0;bottom:0;z-index:2;background:var(--lime);color:#0b0b0c;font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.08em;padding:8px 12px}
.lens-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.lens-stage canvas[hidden]{display:none}
.lens-stage.is-yours img{visibility:hidden}
.lens-stage.is-yours::after{display:none}
.lens-empty{position:absolute;inset:0;margin:0;display:grid;place-content:center;text-align:center;padding:24px;color:#f7f6f1;font:700 13px/1.7 var(--mono);text-transform:uppercase;letter-spacing:.08em;
  background:repeating-linear-gradient(90deg,#161616 0 6px,#1f1f1f 6px 12px)}
.lens-empty[hidden]{display:none}
.lens-yours{margin-top:26px}
.lens-yours .slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.slot{position:relative;display:grid;gap:8px;cursor:pointer;font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;text-align:center}
.slot input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.slot canvas{width:100%;height:auto;aspect-ratio:1;border:2px dashed var(--line);background:
  linear-gradient(var(--ink),var(--ink)) center/2px 26px no-repeat,linear-gradient(var(--ink),var(--ink)) center/26px 2px no-repeat}
.slot.has canvas{border-style:solid;background:#111;box-shadow:5px 5px 0 var(--lime)}
.slot:focus-within canvas{outline:3px solid var(--ink);outline-offset:3px}
.modes{display:inline-flex;border:2px solid var(--line);margin-top:20px}
.modes button{all:unset;cursor:pointer;min-height:44px;padding:0 16px;display:inline-flex;align-items:center;font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.modes button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.modes button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.lens-yours .fine{margin-top:16px;color:var(--mute);font-size:14px}
.lens-ctl label{display:block;font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(18px,2.4vw,30px);line-height:1.15}
.lens-ctl p{color:var(--mute);margin:14px 0 0;font-size:16px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:14px 0 0}
input[type=range]::-webkit-slider-runnable-track{height:6px;background:var(--ink)}
input[type=range]::-moz-range-track{height:6px;background:var(--ink)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;border-radius:50%;background:var(--lime);border:3px solid var(--ink);margin-top:-14px}
input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--lime);border:3px solid var(--ink)}

.gallery{display:grid;gap:26px;margin-top:64px;grid-template-columns:1fr 1fr}
.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover}
.gallery-copy{grid-column:1/-1}
.gallery-copy p{margin:16px 0 0;max-width:30em}
.gallery-copy .btn{margin-top:14px}

.five{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,5vw - 4px,18px)}
.five li{grid-column:span 2;text-align:center}
.five li:nth-child(4){grid-column:2/span 2}
.five span{display:block;margin-top:16px;font:700 clamp(10px,3vw,12px) var(--mono);text-transform:uppercase;letter-spacing:.06em}
.five .plate{box-shadow:5px 5px 0 var(--shadow)}

.houses{display:grid;gap:22px}
.house{border:2px solid var(--line);padding:24px;background:color-mix(in srgb,var(--paper) 86%,transparent);display:flex;flex-direction:column;gap:12px}
.house p{margin:0}
.house .mark{width:72px;height:72px;object-fit:contain;background:#fff;border:2px solid var(--line);border-radius:50%}
.house .glyph{display:grid;place-items:center;font-size:40px;color:#0b0b0c;background:var(--cyan)}
.tag{margin-top:auto !important;align-self:flex-start;font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;padding:5px 9px;color:#0b0b0c}
.duo{display:grid;gap:30px}
h2+.duo{margin-top:44px}

.split{display:grid;gap:44px}
.split>*{min-width:0}
#h-fly{font-size:clamp(20px,5.6vw,54px)}
.split .plate{max-width:460px}
.num{list-style:none;counter-reset:n;margin:36px 0 0;padding:0}
.num li{counter-increment:n;padding:16px 0 16px 3.4em;position:relative;border-top:2px solid var(--line)}
.num li::before{content:"0" counter(n);position:absolute;left:0;top:18px;font:700 14px var(--mono);color:var(--mute)}
.num strong{display:block;font-stretch:125%;font-weight:900;text-transform:uppercase}

.chain{display:flex;flex-wrap:wrap;gap:10px 0;margin:36px 0 0;font:700 13px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.chain span:not(:last-child)::after{content:"→";margin:0 .8em}

.holo{margin-top:var(--gap);padding:clamp(70px,12vw,170px) 0;border-top:2px solid #0b0b0c;border-bottom:2px solid #0b0b0c;
  background:conic-gradient(from 210deg at 30% 40%,#ff9ad5,#b9a2ff,#7fe3ff,#9dffb0,#fff48a,#ffb27a,#ff9ad5);background-size:160% 160%;animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{to{background-position:100% 100%}}
.holo h2{margin:0;display:grid;gap:18px;justify-items:start;font-size:clamp(22px,4.6vw,60px)}
.holo h2 span{background:#fff;color:#0b0b0c;border:2px solid #0b0b0c;box-shadow:7px 7px 0 #0b0b0c;padding:.28em .5em;line-height:1.15}
.holo h2 span:nth-child(2){margin-left:clamp(0px,6vw,90px)}
.holo h2 span:nth-child(3){margin-left:clamp(0px,12vw,180px)}

.rows{margin:48px 0 0;border-top:2px solid var(--line)}
.rows div{padding:22px 0;border-bottom:2px solid var(--line);display:grid;gap:8px}
.rows dt{font-weight:900;font-stretch:125%;text-transform:uppercase}
.rows dd{margin:0;max-width:38em}

.founder{display:grid;gap:36px;margin-top:clamp(56px,8vw,104px);align-items:center}
.founder .plate{max-width:360px}
.founder h3{font-size:clamp(24px,3.6vw,44px);margin-top:20px}
.stats{list-style:none;margin:24px 0;padding:0;display:grid;gap:12px}
.stats b{font-size:clamp(28px,4vw,48px);font-weight:900;font-stretch:125%;margin-right:.3em;background:var(--lime);color:#0b0b0c;padding:0 .2em}

.contact{text-align:left}
.contact .lede{margin-bottom:44px}

.foot{border-top:2px solid var(--line);background:var(--ink);color:var(--paper);padding:56px 0 96px}
.foot-brand{display:flex;align-items:center;gap:12px;font-size:22px;font-stretch:125%;text-transform:uppercase}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 26px;margin:24px 0}
.foot nav a{min-height:44px;display:inline-flex;align-items:center;font:700 13px var(--mono);text-transform:uppercase;letter-spacing:.08em}
.fine{font-size:13px;opacity:.72;max-width:60em}
.ver{font-family:var(--mono);margin-left:.6em}

/* the rolling ball: scroll progress, borrowed from the deck's footer mesh */
.roll{position:fixed;left:0;right:0;bottom:0;height:22px;z-index:40;pointer-events:none;border-top:2px solid var(--line);
  background:var(--paper);background-image:linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:22px 100%}
.roll i{position:absolute;top:1px;left:0;width:18px;height:18px;border-radius:50%;background:var(--ink);will-change:transform}

/* reveals */
.reveal{opacity:0;transform:translateY(34px) rotate(-.6deg);transition:opacity .8s ease,transform .9s cubic-bezier(.2,1.2,.3,1)}
.reveal.in{opacity:1;transform:none}

/* page (privacy) */
.page{padding:clamp(40px,8vw,90px) 0 var(--gap)}
.page h1{font-size:clamp(34px,7vw,80px)}
.page h2{font-size:clamp(20px,2.6vw,30px);margin-top:44px}
.page p,.page li{max-width:40em}

@media (min-width:760px){
  h1{font-size:clamp(56px,6.5vw,96px)}
  br.m{display:none}
  .hero .bar{max-width:100%}
  .menu{display:none}
  .links{position:static;display:flex;flex-direction:row;background:none;border:0;gap:4px;margin-left:auto}
  .links a{border:0;padding:0 12px;min-height:44px;display:inline-flex;align-items:center;font-size:12px}
  .links a.cta-link{background:var(--ink);color:var(--paper)}
  .links a.cta-link:hover{background:var(--lime);color:#0b0b0c}
  .stack{max-width:780px}
  .stack li:nth-child(2){margin-left:40px} .stack li:nth-child(3){margin-left:80px} .stack li:nth-child(4){margin-left:120px}
  .steps{grid-template-columns:repeat(5,1fr);border-top:0}
  .steps li{display:block;border-bottom:0;border-top:2px solid var(--line);padding:18px 18px 0 0}
  .steps li::before{display:block;margin-bottom:10px}
  .big3{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
  .big3 li{display:block}
  .big3 .toy{margin-bottom:10px}
  .big3 strong{display:block;font-size:clamp(26px,3.4vw,46px)}
  .trio{grid-template-columns:repeat(3,1fr)}
  .quad{grid-template-columns:repeat(2,1fr)}
  .lens{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;column-gap:56px}
  .lens-tabs{grid-column:1/-1}
  .gallery{grid-template-columns:1fr 1fr 1.1fr;align-items:center;gap:36px}
  .gallery-copy{grid-column:auto}
  .five{grid-template-columns:repeat(5,1fr)}
  .five li,.five li:nth-child(4){grid-column:auto}
  .houses{grid-template-columns:repeat(3,1fr)}
  .duo{grid-template-columns:1fr 1fr}
  .rows div{grid-template-columns:16em 1fr;gap:24px}
  .founder{grid-template-columns:auto 1fr;gap:64px}
  .stats{grid-template-columns:repeat(3,1fr);gap:24px}
  .stats b{display:block;width:max-content;margin-bottom:8px}
}
@media (min-width:1100px){
  .quad{grid-template-columns:repeat(4,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sun,.ticker div,.holo{animation:none}
  .reveal{transform:none;transition:opacity .4s ease}
  .hero-art img{transform:none}
  .btn,.pick-big,.mix-tile img{transition:none}
  .tray.is-full{animation:none}
  .choice.nudge .pick.go,html.entering #note ~ *{animation:none}
}
@media (min-width:1100px){
  .split{grid-template-columns:.8fr 1.2fr;align-items:center;gap:72px}
  #h-fly{font-size:clamp(28px,2.8vw,42px)}
}

/* image library */
.lib h2{margin-top:64px}
.lib-search{margin-top:44px;max-width:760px}
.lib-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;align-items:center}
.lib-row input{flex:1 1 220px;min-width:0}
.lib input[type=text],.lib input[type=email],.lib input[type=url],.lib input[type=search],.lib select{width:100%;min-height:52px;padding:0 14px;border:2px solid var(--line);
  background:var(--plate);color:#0b0b0c;font:500 17px "Archivo",system-ui,sans-serif;border-radius:0;-webkit-appearance:none;appearance:none}
.lib button.btn{border:0;cursor:pointer;font-family:inherit;font-size:inherit}
.lib button.btn.ghost{border:2px solid var(--line)}
.lib button[disabled]{opacity:.5;cursor:progress}
.lib-grid{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px}
.lib-grid li{max-width:none;min-width:0}
.lib-card{all:unset;cursor:pointer;display:grid;gap:6px;width:100%}
.lib-card img{width:100%;aspect-ratio:1;object-fit:cover;border:2px solid var(--line);background:#111;box-shadow:6px 6px 0 var(--lime);transition:transform .15s,box-shadow .15s}
.lib-card:hover img{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--lime)}
.lib-card:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.lib-card strong{margin-top:10px;font-stretch:112%;overflow-wrap:anywhere;line-height:1.2}
.lib-card span{font:700 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--mute);overflow-wrap:anywhere}
.lib-view{margin-top:56px;display:grid;gap:26px;scroll-margin-top:84px}
.lib-view>*{min-width:0}
.lib-view .lens-stage{aspect-ratio:4/3;max-height:78vh}
.lib-view h2{margin:0;font-size:clamp(24px,3.4vw,44px);overflow-wrap:anywhere}
.lib-view h2:focus{outline:0}
.lib-label{font-size:clamp(15px,1.4vw,18px)!important;margin-top:22px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chip{font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:6px 10px;border:2px solid var(--line)}
.chip.auto{border-style:dashed}
.lib-prov{margin-top:18px;border-top:2px solid var(--line);padding-top:14px}
.lib-prov summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font:700 13px var(--mono);text-transform:uppercase;letter-spacing:.08em}
.lib-prov dl{margin:8px 0 0;display:grid;grid-template-columns:minmax(90px,max-content) minmax(0,1fr);gap:8px 16px;font-size:14px}
.lib-prov dt{font:700 11px/1.7 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.lib-prov dd{margin:0;overflow-wrap:anywhere}
.lib-prov form{display:grid;gap:12px;max-width:460px;margin-top:8px}
.lib-add{margin-top:var(--gap);border-top:2px solid var(--line);padding-top:44px}
.lib-add form{display:grid;gap:10px;max-width:620px}
.lib-add form label{font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.08em;margin-top:14px}
.lib-add .slot{margin-top:0}
.lib-check{display:flex!important;gap:12px;align-items:flex-start;font:400 16px/1.45 "Archivo",sans-serif!important;text-transform:none!important;letter-spacing:0!important}
.lib-check input{width:24px;height:24px;flex:none;margin:0;accent-color:#0b0b0c}
.lib-add .btn{justify-self:start;margin-top:14px}
.lib-mine{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.lib-mine li{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--grid);padding-bottom:10px}
.lib-mine .btn{min-height:44px;margin:0;box-shadow:none}
.lens-link{margin-top:18px}

/* ── the action step, first thing on the library page ─────────────────────── */
.lib-add.first{margin-top:40px;border:2px solid var(--line);padding:clamp(20px,4.5vw,42px);
  background:var(--paper);box-shadow:10px 10px 0 var(--cyan)}
.lib-add.first h2{margin-top:18px;font-size:clamp(28px,5.6vw,64px)}
.lib-add.first form{max-width:680px}
.add-lede{font-size:clamp(16px,.7vw + 13px,20px);line-height:1.45;max-width:40em;margin:16px 0 0}
/* The one control that matters: a file input stretched over a button-sized label,
   so a phone offers Camera / Photo Library / Files and a laptop its file picker. */
.pick-big{position:relative;display:grid;gap:7px;justify-items:center;text-align:center;cursor:pointer;
  margin-top:28px;padding:clamp(22px,5.5vw,40px) 18px;background:var(--lime);color:#0b0b0c;
  border:3px dashed var(--line);box-shadow:9px 9px 0 var(--line);transition:transform .15s,box-shadow .15s}
.pick-big input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.pick-big-txt{font:900 clamp(22px,5.4vw,42px)/1.08 "Archivo",sans-serif;font-stretch:118%;text-transform:uppercase}
.pick-big-sub{font:700 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.09em}
.pick-big:hover{transform:translate(4px,4px);box-shadow:5px 5px 0 var(--line)}
.pick-big:focus-within{outline:3px solid var(--ink);outline-offset:5px}
.pick-big.done{background:var(--cyan);border-style:solid}
.pick-count{font:700 12px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--mute);margin:14px 0 0}

/* ── mix your own: every picture in the library, three at a time ──────────── */
.lib-mix{margin-top:var(--gap)}
.lib-mix h2{margin-top:18px}
.mix-grid{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 12px}
.mix-grid li{min-width:0;max-width:none}
.mix-tile{all:unset;position:relative;cursor:pointer;display:grid;gap:6px;width:100%}
.mix-tile img{width:100%;aspect-ratio:1;object-fit:cover;border:2px solid var(--line);background:#111;transition:transform .12s,box-shadow .12s}
.mix-tile small{font:700 10px/1.35 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--mute);
  overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mix-tile:hover img{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--cyan)}
.mix-tile:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.mix-badge{position:absolute;top:-9px;left:-9px;width:34px;height:34px;display:none;place-items:center;z-index:2;
  background:var(--ink);color:var(--paper);border:2px solid var(--paper);border-radius:50%;font:900 16px/1 "Archivo",sans-serif}
.mix-tile[aria-pressed="true"] .mix-badge{display:grid}
.mix-tile[aria-pressed="true"] img{transform:translate(2px,2px);box-shadow:5px 5px 0 var(--lime)}

/* ── the tray: follows you down the page while you choose ─────────────────── */
body.has-tray{padding-bottom:clamp(140px,34vw,170px)}
.tray{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--paper);border-top:3px solid var(--line);
  box-shadow:0 -7px 0 var(--pink);padding:12px 0 calc(12px + env(safe-area-inset-bottom))}
.tray-in{display:flex;gap:14px;align-items:center}
.tray-slots{list-style:none;margin:0;padding:0;display:flex;gap:9px;flex:0 0 auto}
.tray-slot{display:grid;gap:4px;justify-items:center;max-width:none;min-width:0}
.tray-lab{font:700 8px/1.1 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--mute)}
.tray-thumb{position:relative;width:clamp(46px,12.5vw,78px)}
.tray-thumb img{width:100%;aspect-ratio:1;object-fit:cover;border:2px solid var(--line);background:#111}
.tray-x{all:unset;position:absolute;top:-8px;right:-8px;width:24px;height:24px;cursor:pointer;display:grid;place-items:center;
  background:var(--red);color:#0b0b0c;border:2px solid var(--line);border-radius:50%;font:700 12px/1 var(--mono)}
.tray-nav{display:flex;gap:5px}
.tray-nav button{all:unset;cursor:pointer;min-width:31px;min-height:28px;display:grid;place-items:center;
  border:2px solid var(--line);font:700 12px/1 var(--mono)}
.tray-nav button[disabled]{opacity:.28;cursor:default}
.tray-x:focus-visible,.tray-nav button:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.tray-go{flex:1 1 0;min-width:0;display:grid;gap:6px;justify-items:stretch}
.tray-note{margin:0;font:700 10px/1.35 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.tray .btn{min-height:42px;padding:7px 12px;font-size:13px;line-height:1.2;text-align:center;justify-content:center;
  margin:0;box-shadow:4px 4px 0 var(--shadow)}
/* Clear is the escape hatch, not a second call to action — and a full-height button
   here is what pushed the tray over a third of a phone screen. */
#tray-clear{min-height:28px;padding:0;border:0;background:none;box-shadow:none;color:var(--mute);justify-self:start;
  font:700 11px var(--mono);text-transform:uppercase;letter-spacing:.07em;text-decoration:underline}
#tray-clear:hover{transform:none;box-shadow:none;color:var(--ink)}
.tray .btn[disabled]{opacity:.42;cursor:default;transform:none;box-shadow:none}
.tray.is-full{animation:tray-nope .3s}
@keyframes tray-nope{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media (min-width:700px){
  .lib-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mix-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tray-go{flex:1 1 0;display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:flex-end}
  .tray-note{flex:1 1 180px;font-size:12px}
  .tray .btn{font-size:14px;padding:0 20px;min-height:48px}
  #tray-clear{min-height:48px;padding:0}
  body.has-tray{padding-bottom:150px}
}
@media (min-width:1100px){
  .lib-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 26px}
  .mix-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px 18px}
  .lib-view{grid-template-columns:1.25fr .75fr;align-items:start;gap:48px}
}
[hidden]{display:none!important}

/* origin comic */
.comic{margin-top:clamp(48px,8vw,96px)}
.comic h3{margin:20px 0 8px}
.comic-strip{list-style:none;margin:20px 0 0;padding:0 0 14px;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.comic-strip li{flex:0 0 min(100%,980px);scroll-snap-align:center}
.comic-strip figure{margin:0}
.comic-strip img{width:100%;border:2px solid var(--line);box-shadow:8px 8px 0 var(--pink);background:#000}
.comic-strip figcaption{margin-top:14px;font:700 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.comic-ctl{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font:700 13px var(--mono);letter-spacing:.14em}

/* ── v3 · the deck, page by page ──────────────────────────────────────────── */
button.btn{font-family:inherit;font-size:inherit;cursor:pointer}
.lens-tabs button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.slug{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.slug .bar{min-width:0}
.pg{flex:none;padding-top:7px;font:700 13px/1 var(--mono);letter-spacing:.06em;color:var(--mute)}
.pg small{font-size:inherit;opacity:.6}
h2.mid{font-size:clamp(20px,5.6vw,54px)}
/* a note to the reader, and the door it holds shut (js/gate.js). The letter keeps its own ink so it reads on every look. */
.reader h2{max-width:21em}
.letter{position:relative;margin-top:clamp(28px,4vw,44px);padding:clamp(40px,5vw,62px) clamp(20px,4vw,48px) clamp(22px,4vw,44px);color:#0b0b0c}
.letter::before{content:"";position:absolute;left:0;right:0;top:0;height:16px;border-bottom:2px solid #0b0b0c;
  background:repeating-linear-gradient(-45deg,var(--yellow) 0 12px,#0b0b0c 12px 24px)}
.letter p{font-size:clamp(17px,1.1vw + 12px,23px);line-height:1.5;max-width:36em;margin:0 0 .9em}
.letter .welcome{font-weight:800;font-stretch:112%;font-size:clamp(20px,1.6vw + 13px,31px);line-height:1.25}
/* the welcome face (js/greet.js): a ringed planet, a moon and a star orbit it on a tilted ellipse while the note is on
   screen, slipping out of sight behind it on the far side; a hover or a tap detonates it into a new face. Every orbit
   is transforms only: the tilt and squash on .sys, the turn on .orb, the radius on i, then b undoes the turn, squash
   and tilt so each satellite keeps its true shape, and s fakes the depth. Reduced motion: no orbit, no path, and the
   three sit still round the face's corners, clear of the words. */
.welcome .face-orbit{position:relative;display:inline-block;font-size:1.3em;line-height:1;margin:-.1em .36em -.1em .24em;vertical-align:-.04em}
.welcome .face{display:inline-block;position:relative;z-index:1;cursor:default}
.face-orbit .fx{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.face-orbit .sys{z-index:2}
.face-orbit .path{display:none}
.face-orbit .loop{position:absolute;width:1.8em;height:1.8em;margin:-.9em;border-radius:50%;border:.045em dashed rgba(11,11,12,.42)}
.face-orbit .orb,.face-orbit i,.face-orbit b,.face-orbit s,.face-orbit .spark{position:absolute;left:0;top:0;display:block}
.face-orbit .orb{transform:rotate(var(--rest))}
.face-orbit i{transform:translateX(var(--r))}
.face-orbit b{transform:rotate(calc(var(--rest) * -1))}
.face-orbit .planet{width:.34em;height:.34em;margin:-.17em;border-radius:50%;background:var(--lime);border:.045em solid #0b0b0c}
.face-orbit .planet::after{content:"";position:absolute;left:50%;top:50%;width:.66em;height:.19em;margin:-.095em 0 0 -.33em;border:.045em solid #0b0b0c;border-radius:50%;transform:rotate(-22deg)}
.face-orbit .moon{width:.25em;height:.25em;margin:-.125em;border-radius:50%;background:var(--pink);border:.045em solid #0b0b0c}
.face-orbit .star{width:.36em;height:.36em;margin:-.18em;background:#0b0b0c;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.face-orbit .star::after{content:"";position:absolute;inset:.065em;background:var(--cyan);clip-path:inherit}
.face-orbit .spark,.face-orbit .ring{opacity:0}
.face-orbit .spark s{width:.16em;height:.16em;margin:-.08em;border-radius:50%;border:.035em solid #0b0b0c;background:var(--c)}
.face-orbit .spark:nth-child(3n) s{border-radius:0;transform:rotate(45deg)}
.face-orbit .ring{position:absolute;width:1em;height:1em;margin:-.5em;border-radius:50%;border:.05em solid #0b0b0c}
@media (prefers-reduced-motion:no-preference){
  .face-orbit .sys,.face-orbit .path{display:block;transform:rotate(-16deg) scaleY(.36)}
  .face-orbit .loop{animation:orb-spin 30s linear infinite}
  .face-orbit .face{animation:face-bob 3.2s cubic-bezier(.45,0,.55,1) infinite}
  .face-orbit .orb{animation:orb-spin var(--p) linear var(--d) infinite}
  .face-orbit b{animation:orb-unspin var(--p) linear var(--d) infinite}
  .face-orbit .orb s{animation:orb-depth var(--p) linear var(--d) infinite}
  .face-orbit.boom .face{animation:face-pop .7s cubic-bezier(.3,1.7,.5,1)}
  .face-orbit.boom i{animation:orb-fling .95s cubic-bezier(.2,1.45,.4,1) var(--f)}
  .face-orbit.boom .spark{animation:face-spark .9s cubic-bezier(.1,.85,.3,1) .08s}
  .face-orbit.boom .ring{animation:face-ring .8s cubic-bezier(.1,.8,.3,1) .08s}
  .face-orbit.hop .face{animation:face-hop .45s cubic-bezier(.3,1.6,.5,1)}
  .face-orbit:not(.awake) *{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  .face-orbit .face{transition:opacity .18s ease}
  .face-orbit.fade .face{opacity:0}
}
@keyframes face-bob{50%{transform:translateY(-.05em) rotate(-5deg)}}
@keyframes face-pop{22%{transform:scale(.55) rotate(-14deg)}60%{transform:scale(1.22) rotate(6deg)}100%{transform:none}}
@keyframes face-hop{35%{transform:scale(.82)}70%{transform:scale(1.1)}100%{transform:none}}
@keyframes orb-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes orb-unspin{from{transform:rotate(0deg) scaleY(2.78) rotate(16deg)}to{transform:rotate(-360deg) scaleY(2.78) rotate(16deg)}}
@keyframes orb-depth{0%,100%{transform:none}25%{transform:scale(1.25)}50%{transform:none;opacity:1}64%{opacity:1}69%,81%{transform:scale(.7);opacity:0}86%{opacity:1}}
@keyframes orb-fling{30%{transform:translateX(calc(var(--r) * 2.1))}}
@keyframes face-spark{0%{transform:rotate(var(--a)) translateX(.3em) scale(.3);opacity:1}65%{opacity:1}100%{transform:rotate(var(--a)) translateX(var(--R));opacity:0}}
@keyframes face-ring{0%{transform:scale(.3);opacity:1}100%{transform:scale(2.6);opacity:0}}
.choice{display:grid;gap:18px;margin-top:clamp(24px,3vw,36px)}
.pick{display:grid;gap:16px;align-content:space-between;justify-items:start;padding:clamp(16px,2.4vw,24px) clamp(16px,2.4vw,24px) clamp(22px,2.8vw,30px);border:2px solid #0b0b0c}
.letter .pick p{margin:0;font-size:clamp(15px,.5vw + 13px,19px);font-weight:600;line-height:1.4}
.pick.bye{background:#f7f6f1}
.pick.go{background:#0b0b0c;color:#f7f6f1}
.pick .btn{font-size:clamp(17px,.9vw + 13px,23px);min-height:58px}
.pick.bye .btn{background:#fff;color:#0b0b0c;border-color:#0b0b0c;box-shadow:6px 6px 0 #0b0b0c}
.pick.bye .btn:hover{box-shadow:3px 3px 0 #0b0b0c}
.pick.go .btn{background:var(--lime);color:#0b0b0c;border-color:var(--lime);box-shadow:6px 6px 0 var(--pink)}
.pick.go .btn:hover{box-shadow:3px 3px 0 var(--pink)}
.pick .btn:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}
.nudge-msg{min-height:1.5em;margin:18px 0 0;font:700 13px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.nudge-msg:empty{margin:0;min-height:0}
.choice.nudge .pick.go{animation:nudge .62s cubic-bezier(.3,1.6,.5,1)}
@keyframes nudge{20%{transform:translateX(-7px) rotate(-.6deg)}45%{transform:translateX(6px) rotate(.5deg)}70%{transform:translateX(-3px)}}
@media (min-width:760px){ .choice{grid-template-columns:1fr 1fr} }
/* the door: everything after the note keeps its real size (so the scripts measure the real page) but sits
   folded out of sight, out of reach and out of the scroll until the reader picks a button */
html.gated main{position:relative;overflow:hidden;overflow:clip}
html.gated #note ~ *{position:absolute;left:0;right:0;top:0;visibility:hidden;pointer-events:none}
html.gated .reader{padding-bottom:var(--gap)}
html.gated #deckchip{visibility:hidden}
html.entering #note ~ *{animation:door .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes door{from{opacity:0}}
h2.long{font-size:clamp(18px,6.2vw,76px)}   /* one 17-letter word: sized so it never has to break above 390 */
.nowrap{white-space:nowrap}
.fine.src{margin-top:18px}
#p04 .observe{font-weight:700;max-width:38em;margin:28px 0 0}
#p04 .rows dd strong{font-weight:800}
.origin{max-width:38em;margin:44px 0 0}
.origin p{margin:0 0 18px}
.origin cite{font-style:normal;font-weight:800}
.origin .thesis{margin:34px 0;padding:6px 0 6px 22px;border-left:6px solid var(--lime);font-weight:800;font-stretch:108%;font-size:clamp(19px,1.4vw + 12px,27px);line-height:1.3}
.thesis span{display:block;margin-bottom:8px;font:700 clamp(11px,.4vw + 10px,14px)/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.lens-link{display:flex;flex-wrap:wrap;gap:18px}

/* 07 · nexus */
.nexus-split{margin-top:34px;align-items:center}
.nexus-split .lede:first-child{margin-top:0}
.arrows{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin:22px 0 0;font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(26px,5vw,56px);line-height:1.1}
.arrows span:not(:last-child)::after{content:"→";font-weight:300;margin:0 .3em}

/* 11 · twenty-five years */
.years{display:grid;gap:14px 48px;margin-top:40px;align-items:center}
.years-n{margin:0;font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(52px,14vw,190px);line-height:1.05}
.years-h{margin:0;font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(20px,2.6vw,34px);line-height:1.15}
.years .lede{margin-top:14px}
.fn{margin:18px 0 0;padding-left:1.4em;font-size:14px;color:var(--mute)}
.fn li{margin-top:6px;overflow-wrap:anywhere}
.fn a{font-weight:700}
.fnr{white-space:nowrap}
sup a{display:inline-block;min-width:24px;line-height:24px;text-align:center;text-decoration:none;background:var(--lime);color:#0b0b0c;font:700 11px/24px var(--mono)}

/* 12 · holagram */
.holagram h2{font-size:clamp(30px,5.4vw,72px)}
.brandrow{display:flex;flex-wrap:wrap;align-items:center;gap:20px 26px;margin-top:36px}
.brandrow .mark{width:84px;height:84px;object-fit:contain;background:#fff;border:2px solid var(--line);border-radius:50%}

/* clips: a still poster until the loop scrolls into view; a tap opens the viewer */
.clip{margin:0}
.clipbtn{all:unset;box-sizing:border-box;display:block;position:relative;width:100%;aspect-ratio:3/4;cursor:pointer;overflow:hidden;background:#111;
  border:2px solid var(--line);box-shadow:7px 7px 0 var(--shadow);transition:transform .25s cubic-bezier(.2,1.4,.4,1),box-shadow .25s cubic-bezier(.2,1.4,.4,1)}
.clipbtn video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.clipbtn:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 7px var(--lime)}
.cliphint{position:absolute;right:10px;bottom:10px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:#0b0b0c;border:2px solid #0b0b0c}
.cliphint svg{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){
  .clipbtn:hover{transform:translate(3px,3px);box-shadow:4px 4px 0 var(--shadow)}
  .clipbtn:hover .cliphint{background:var(--pink)}
}
.clip figcaption{margin-top:18px;font:700 11px/1.35 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.clip figcaption b{color:var(--ink)}
.reel{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
.reel li{min-width:0}
.motion{margin-top:64px}
.motion .fine.cap{margin-top:16px}
.motion .reel{margin-top:30px}

/* 13–16 · featured garments */
.feat{display:grid;gap:36px;margin-top:44px;align-items:start}
.feat>*{min-width:0}
.feat>.clipbtn{max-width:420px;box-shadow:10px 10px 0 var(--pink)}
.feat .lede{margin-top:0}
.feat .bar.big{margin-top:30px}
.fine.cap,.fine.tm{margin-top:22px}
.views{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:30px}
.views figure{margin:0;min-width:0}
.views img{width:100%;aspect-ratio:692/620;object-fit:cover;border:2px solid var(--line);background:#111}
.views figcaption.bar{margin-top:10px;font-size:10px;padding:5px 7px}

/* 17 · SEFF */
.seff{display:grid;gap:36px;margin-top:44px}
.seff>*{min-width:0}
.seff-mark{container-type:inline-size;display:grid;gap:14px;align-content:space-between;min-height:220px;padding:26px;background:#0b0b0c;color:#f7f6f1;border:2px solid var(--line);box-shadow:8px 8px 0 var(--lime)}
.seff-word{margin:0;font-weight:900;font-stretch:125%;font-size:clamp(48px,25cqi,132px);line-height:1.05;letter-spacing:.04em}
.seff-mark p:last-child{margin:0;font-size:16px}
.seff-mark a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.seff .lede{margin-top:0}
.trio.duo2{margin-top:36px}

/* 22–23 · the moment × the response */
.ops{display:grid;gap:14px;margin-top:48px}
.ops>div{min-width:0;padding:22px 22px 26px;border:2px solid var(--line);background:color-mix(in srgb,var(--paper) 86%,transparent);box-shadow:6px 6px 0 var(--shadow)}
.ops>div p:not(.bar){margin:14px 0 0}
.op{margin:0;align-self:center;text-align:center;font-weight:200;font-size:clamp(40px,6vw,72px);line-height:1}

/* 26–34 · the proposal */
.legal{margin:34px 0 0;max-width:46em;padding:18px 20px;border:2px dashed var(--line);font-size:15px;line-height:1.5}
.legal strong{margin-right:.4em;font:700 13px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.tblwrap{margin-top:44px;padding:0 10px 10px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tblwrap.narrow{max-width:840px}
.tbl{width:100%;border-collapse:collapse;background:var(--plate);color:#0b0b0c;border:2px solid #0b0b0c;box-shadow:8px 8px 0 var(--shadow);font-size:14px;line-height:1.4;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:11px 12px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(11,11,12,.16)}
.tbl thead th{background:var(--lime);font:700 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid #0b0b0c}
.tbl tbody th{font-weight:700}
.tbl .n{text-align:right;white-space:nowrap}
.tbl .tot th,.tbl .tot td{border-top:2px solid #0b0b0c;border-bottom:0;font-weight:900;font-stretch:112%}
.tbl .neg{color:#b3261e}
/* the revenue table stacks into one card per row on a phone */
.tbl.st{border:0;box-shadow:none;background:none}
.tbl.st thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tbl.st tbody,.tbl.st tr,.tbl.st tbody th,.tbl.st td{display:block}
.tbl.st tr{margin-bottom:22px;background:var(--plate);border:2px solid #0b0b0c;box-shadow:6px 6px 0 var(--shadow)}
.tbl.st tbody th{background:var(--lime);border-bottom:2px solid #0b0b0c;font-weight:900;font-stretch:125%;text-transform:uppercase}
.tbl.st td::before{content:attr(data-l);display:block;margin-bottom:4px;font:700 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#55554f}
.tbl.st td:last-child{border-bottom:0}
.climb{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.climb li{min-width:0;min-height:130px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:16px;color:#0b0b0c;border:2px solid #0b0b0c;box-shadow:6px 6px 0 var(--shadow);background:var(--yellow)}
.climb li:nth-child(2){background:var(--lime)} .climb li:nth-child(3){background:var(--cyan)} .climb li:nth-child(4){background:var(--pink)}
.climb small{font:700 12px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.climb b{font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(14px,calc(7vw - 7.2px),26px);line-height:1.1}
.risk{margin:40px 0 0;max-width:46em;padding:16px 18px;background:var(--red);color:#0b0b0c;border:2px solid #0b0b0c}
.risk strong{font-weight:900;font-stretch:125%;text-transform:uppercase}
.money{display:grid;gap:28px;margin-top:48px}
.money>div{min-width:0;padding:24px 24px 28px;background:var(--plate);color:#0b0b0c;border:2px solid #0b0b0c;box-shadow:8px 8px 0 var(--shadow)}
.money>div:nth-child(2){box-shadow:8px 8px 0 var(--pink)}
.amt{margin:0;font-weight:900;font-stretch:125%;font-size:clamp(56px,9vw,112px);line-height:1.05}
.money h3{margin-top:14px}
.money p:not(.amt){margin:10px 0 0}

/* 35 · team */
.team{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 18px}
.team li{min-width:0}
.team .plate{box-shadow:6px 6px 0 var(--lav)}
.team img{width:100%;aspect-ratio:3/2;object-fit:cover}
.team h3{margin-top:20px;font-size:clamp(15px,1.6vw,21px);overflow-wrap:break-word}
.role{margin:8px 0 0;font:700 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.yrs{display:inline-block;margin:10px 0 0;padding:4px 8px;background:var(--yellow);color:#0b0b0c;border:2px solid #0b0b0c;font-size:14px;line-height:1.35}

/* 37 · the ask */
.sec.ask{margin-top:var(--gap);padding:clamp(56px,9vw,120px) 0;background:var(--lime);color:#0b0b0c;border-top:2px solid #0b0b0c;border-bottom:2px solid #0b0b0c}
.ask .bar{background:#0b0b0c;color:var(--lime)}
.ask .pg{color:#0b0b0c}
.sig{margin:28px 0 0;font-size:17px}
.sig a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;overflow-wrap:anywhere}

/* the deck chip + the page-by-page index */
.foot nav button{all:unset;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;font:700 13px var(--mono);text-transform:uppercase;letter-spacing:.08em;text-decoration:underline}
.foot nav button:focus-visible{outline:3px solid var(--paper);outline-offset:3px}
.deckchip{all:unset;box-sizing:border-box;position:fixed;right:12px;bottom:calc(34px + env(safe-area-inset-bottom));z-index:45;cursor:pointer;display:inline-flex;align-items:center;
  min-height:44px;padding:0 14px;background:var(--ink);color:var(--paper);border:2px solid var(--line);box-shadow:4px 4px 0 var(--lime);
  font:700 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;transition:transform .25s cubic-bezier(.2,1.4,.4,1),box-shadow .25s cubic-bezier(.2,1.4,.4,1),opacity .3s}
.deckchip b{font-size:15px}
.deckchip:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--lime)}
.deckchip:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 7px var(--lime)}
.deckchip.off{opacity:0;pointer-events:none}
.dex{width:min(560px,calc(100% - 24px));max-width:none;max-height:min(80dvh,760px);padding:0;overflow:auto;overscroll-behavior:contain;
  background:var(--paper);color:var(--ink);border:2px solid var(--line);box-shadow:10px 10px 0 var(--lime)}
.dex::backdrop{background:rgba(11,11,12,.62)}
.dex-top{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 20px;background:var(--paper);border-bottom:2px solid var(--line)}
.dex-top h2{margin:0;font-size:clamp(16px,2vw,22px);line-height:1.15}
.dex-x{all:unset;cursor:pointer;flex:none;width:44px;height:44px;display:grid;place-items:center;font-size:28px;line-height:1;background:var(--ink);color:var(--paper)}
.dex-x:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 7px var(--lime)}
#dex-list{list-style:none;margin:0;padding:6px 0 10px}
#dex-list a{display:grid;grid-template-columns:3em 1fr;align-items:center;gap:8px;min-height:44px;padding:6px 20px;text-decoration:none;font-size:15px;line-height:1.3;border-bottom:1px solid var(--grid)}
#dex-list a b{font:700 13px var(--mono);color:var(--mute)}
#dex-list a:hover,#dex-list a[aria-current]{background:var(--lime);color:#0b0b0c}
#dex-list a[aria-current] b,#dex-list a:hover b{color:#0b0b0c}
#dex-list a:focus-visible{outline-offset:-3px;box-shadow:none}

/* the video viewer */
.vbox{position:fixed;inset:0;z-index:110;display:none;align-items:center;justify-content:center;padding:62px 12px 18px;background:rgba(8,9,11,.95);opacity:0;transition:opacity .3s ease}
.vbox.show{display:flex}
.vbox.in{opacity:1}
.vstage{margin:0;display:flex;flex-direction:column;align-items:center;max-width:100%}
.vstage video{display:block;max-width:min(100%,620px);max-height:calc(100dvh - 270px);width:auto;height:auto;background:#000;border:2px solid #f7f6f1;box-shadow:8px 8px 0 var(--lime)}
.vstage figcaption{margin-top:22px;max-width:520px;padding:0 60px;text-align:center;color:rgba(247,246,241,.8);font-size:15px;line-height:1.5}
.vno{display:block;font:700 11px var(--mono);letter-spacing:.14em;color:var(--lime)}
.vt{display:block;margin-top:6px;font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:22px;line-height:1.15;color:#f7f6f1}
.vn{display:block;margin-top:4px}
.vclose,.vnav{all:unset;box-sizing:border-box;position:absolute;width:48px;height:48px;display:grid;place-items:center;cursor:pointer;background:var(--lime);color:#0b0b0c;border:2px solid #0b0b0c;font:400 30px/1 "Archivo",sans-serif}
.vclose{top:12px;right:12px}
.vnav{bottom:18px}
.vnav.prev{left:12px}
.vnav.next{right:12px}
.vclose:hover,.vnav:hover{background:var(--pink)}
.vclose:focus-visible,.vnav:focus-visible{outline:3px solid #f7f6f1;outline-offset:3px}

@media (min-width:600px){
  .tbl.st{border:2px solid #0b0b0c;box-shadow:8px 8px 0 var(--shadow);background:var(--plate)}
  .tbl.st thead{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;display:table-header-group}
  .tbl.st tbody{display:table-row-group}
  .tbl.st tr{display:table-row;margin:0;background:none;border:0;box-shadow:none}
  .tbl.st tbody th,.tbl.st td{display:table-cell}
  .tbl.st tbody th{background:none;border-bottom:1px solid rgba(11,11,12,.16);font-weight:700;font-stretch:100%;text-transform:none}
  .tbl.st td::before{display:none}
  .tbl.st tr:last-child th,.tbl.st tr:last-child td{border-bottom:0}
}
@media (min-width:760px){
  .years{grid-template-columns:minmax(0,auto) minmax(0,1fr)}
  .years-n{max-width:min-content;font-size:clamp(84px,11vw,140px);line-height:1.1}
  .reel{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}
  .feat{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center}
  .seff{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:56px;align-items:start}
  .trio.duo2{grid-template-columns:1fr 1fr}
  .ops{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:22px}
  .tbl{font-size:16px}
  .tbl th,.tbl td{padding:13px 16px}
  .money{grid-template-columns:1fr 1fr;gap:36px}
  .team{grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 26px}
  .vbox{padding:64px 80px 24px}
  .vnav{bottom:auto;top:50%;transform:translateY(-50%)}
  .vnav.prev{left:16px}
  .vnav.next{right:16px}
  .vstage video{max-height:calc(100dvh - 200px)}
  .vstage figcaption{padding:0}
}
@media (min-width:1100px){
  .reel{grid-template-columns:repeat(4,minmax(0,1fr))}
  .climb{grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:20px}
  .climb li{min-height:160px}
  .climb li:nth-child(2){min-height:220px} .climb li:nth-child(3){min-height:280px} .climb li:nth-child(4){min-height:340px}
  .climb b{font-size:clamp(20px,2.3vw,34px)}
  .ops.three{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr)}
  h2.mid{font-size:clamp(28px,2.8vw,42px)}
  .split.holagram,.nexus-split{grid-template-columns:1.1fr .9fr}
}
@media (max-width:1099px){
  .ops.three{grid-template-columns:none}
}
@media (prefers-reduced-motion:reduce){
  .vbox,.clipbtn,.deckchip{transition:none}
}
[data-p]:focus{outline:none}

/* ---------- delight ---------- */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 10 · the toy shelf: each venture prints itself out of loose voxels, then floats like a toy */
.toy{all:unset;box-sizing:border-box;grid-row:span 2;display:block;width:100%;aspect-ratio:6/5;position:relative;cursor:pointer;perspective:800px;-webkit-tap-highlight-color:transparent}
.toy:focus-visible{outline:3px solid var(--ink);outline-offset:4px;box-shadow:0 0 0 7px var(--lime)}
html[data-variant="paper"] .toy{mix-blend-mode:multiply}           /* the blend lives on the outermost layer, or the white boxes show */
html:not([data-variant="paper"]) .toy{background:#fff;border:2px solid var(--line)}
.toy-body{position:absolute;inset:2% 6% 16%;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s cubic-bezier(.2,.9,.3,1.4)}
.toy-body img,.toy-body canvas{position:absolute;inset:0;width:100%;height:100%}
.toy-body img{object-fit:contain;transform-origin:50% 90%;transition:opacity .35s ease}
.toy-body canvas{opacity:0;transition:opacity .35s ease;pointer-events:none}
.toy.loose img{opacity:0}
.toy.loose canvas{opacity:1}
.toy:not(.loose) .toy-body img{animation:bob 3.4s ease-in-out infinite}
.toy-shadow{position:absolute;left:24%;right:24%;bottom:7%;height:9%;border-radius:50%;background:#0b0b0c;opacity:.13;transition:opacity .5s}
.toy:not(.loose) .toy-shadow{animation:shad 3.4s ease-in-out infinite}
.toy.loose .toy-shadow{opacity:.04}
.toy.hop .toy-body img{animation:hop .75s cubic-bezier(.3,.7,.4,1) both}
.toy.hop .toy-shadow{animation:hopshad .75s ease both}
@keyframes bob{50%{transform:translateY(-8%) rotate(-1.5deg)}}
@keyframes shad{50%{transform:scaleX(.78);opacity:.07}}
@keyframes hop{0%{transform:none}14%{transform:translateY(4%) scale(1.14,.84)}46%{transform:translateY(-30%) scale(.93,1.09) rotate(7deg)}72%{transform:translateY(2%) scale(1.1,.9)}86%{transform:scale(.97,1.03)}100%{transform:none}}
@keyframes hopshad{46%{transform:scaleX(.45);opacity:.05}72%{transform:scaleX(1.1);opacity:.16}}
.toy .pct{position:absolute;left:0;bottom:0;font:700 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;background:var(--lime);color:#0b0b0c;padding:4px 6px;opacity:0;transition:opacity .3s}
.toy.printing .pct{opacity:1}
.wave{white-space:nowrap}
.wave .l{display:inline-block}
.wave.go .l{animation:wv .55s cubic-bezier(.3,1.7,.5,1) both;animation-delay:calc(var(--i) * 32ms)}
@keyframes wv{40%{transform:translateY(-.24em) rotate(-5deg)}}
.boops{position:absolute;right:0;top:0;z-index:2;font:700 11px/1 var(--mono);text-transform:uppercase;background:var(--ink);color:var(--paper);padding:5px 7px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s cubic-bezier(.3,1.6,.5,1);pointer-events:none}
.boops.on{opacity:1;transform:none}
.vox{position:absolute;left:0;top:0;z-index:3;width:10px;height:10px;background:var(--lime);border:2px solid #0b0b0c;pointer-events:none}
.vox.g{background:#3ddc84}

/* 02 · dominoes: the still turns into a real 3D chain that crumbles into bits, and the scroll rebuilds it (js/domino); whole, it is the picture */
/* no plate: the slabs stand on the page itself, under a wash of stage light, their edges let into the ground */
figure.plate[data-dom]{position:relative;background:none;border:0;box-shadow:none;overflow:visible;isolation:isolate;-webkit-tap-highlight-color:transparent}
figure[data-dom]::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:-18%;bottom:-6%;pointer-events:none;
  background:radial-gradient(ellipse 44% 18% at 50% 78%,var(--dom-pool),transparent),radial-gradient(ellipse 54% 58% at 40% 44%,var(--dom-wash),transparent 74%)}   /* both fade out inside the box: no edge */
:root{--dom-wash:rgba(255,255,255,.62);--dom-pool:rgba(255,253,246,.7)}
html[data-variant="noir"]{--dom-wash:rgba(243,242,234,.13);--dom-pool:rgba(243,242,234,.11)}
figure[data-dom]>img,figure[data-dom] .dom3d{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(transparent,#000 5%,#000 92%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(transparent,#000 5%,#000 92%,transparent);
  mask-composite:intersect}
figure[data-dom] .dom3d{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .2s ease-out}
figure[data-dom].dom-live .dom3d{opacity:1}
figure[data-dom].dom-live>img{opacity:0;transition:opacity 0s .22s}   /* gone once the canvas is up over it, back at once when it goes */
figure[data-dom][data-dom=ready],figure[data-dom][data-dom=bits],figure[data-dom][data-dom=rest]{cursor:pointer}
figure[data-dom] .dom-hint{position:absolute;right:10px;top:10px;z-index:2;margin:0;padding:6px 9px;background:#0b0b0c;color:#f7f6f1;font:700 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;pointer-events:none;opacity:0;transform:translateY(-4px);transition:opacity .3s ease,transform .3s ease}
figure[data-dom] .dom-hint.on{opacity:1;transform:none}
@media (max-width:600px){figure[data-dom] .dom-hint{right:6px;top:6px;padding:4px 6px;font-size:9px}}
@media print{figure[data-dom] .dom3d,figure[data-dom] .dom-hint{display:none}figure[data-dom].dom-live>img{opacity:1}}

/* 09 · flow riders: voxel packets ride the loop; each stop says its line */
.loopfig{position:relative;overflow:visible;touch-action:pan-y}
.loopfig svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.stn{all:unset;position:absolute;transform:translate(-50%,-50%);width:15%;height:22%;min-width:44px;min-height:44px;cursor:pointer;border-radius:12px;-webkit-tap-highlight-color:transparent}
.loopfig:not(.live) .stn{display:none}
.stn:focus-visible{outline:3px solid #0b0b0c;box-shadow:0 0 0 7px var(--lime)}
.stn::before{content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border:2px solid #3ddc84;border-radius:50%;animation:ring 2.4s ease-out infinite}
.stn::after{content:"+";position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;display:grid;place-items:center;background:var(--lime);border:2px solid #0b0b0c;font:900 16px/1 "Archivo",system-ui,sans-serif;color:#0b0b0c;transition:transform .3s cubic-bezier(.3,1.8,.5,1)}
.stn:nth-of-type(2)::before{animation-delay:-.8s}
.stn:nth-of-type(3)::before{animation-delay:-1.6s}
.stn.ping::after{transform:scale(1.35) rotate(90deg)}
@keyframes ring{0%{transform:scale(.8);opacity:1}100%{transform:scale(2.4);opacity:0}}
.bubble{position:absolute;z-index:4;left:0;top:0;width:max-content;max-width:min(320px,86%);margin:0;padding:10px 14px;background:#0b0b0c;color:#f7f6f1;font-weight:700;font-size:clamp(14px,1.4vw,18px);line-height:1.3;
  border:2px solid #0b0b0c;box-shadow:5px 5px 0 var(--lime);transform:translateY(-100%) scale(.6);transform-origin:var(--ox,50%) 100%;opacity:0;pointer-events:none;transition:transform .4s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.bubble.on{transform:translateY(-100%) scale(1);opacity:1}
.loopfig .inf3d{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .6s}
.loopfig[data-infinity="ready"] .inf3d{opacity:1}
.loopfig[data-infinity="ready"]>img{opacity:0;transition:opacity .6s}
.loopfig[data-infinity="ready"] svg{display:none}
@media print{.loopfig .inf3d{display:none}.loopfig[data-infinity="ready"]>img{opacity:1;transition:none}.loopfig[data-infinity="ready"] svg{display:block}.loopfig .stn{translate:none!important}}   /* a WebGL canvas may print blank: print the picture, its riders and the stations on their spots */

/* 09 · the ride (js/infinity/ride.js; public since P7): the way in, the full-screen dialog and its HUD */
.btn.ride{margin-top:22px;margin-right:14px}
.btn.kart{margin-top:22px}   /* beside Ride the loop; at a phone's width it wraps under it, flush left (the gap is the ride button's right margin) */
.tour{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px 20px;margin-top:22px}   /* reduced motion's stepper (js/infinity/tour.js): Back, the stop's line, Next; nothing moves */
.tour .line{margin:0;font-weight:700;font-size:clamp(15px,1.4vw,18px);line-height:1.35}
.tour .btn{justify-content:center;transition:none}
@media (max-width:640px){.tour{grid-template-columns:1fr 1fr}.tour .line{grid-column:1/-1;grid-row:1;min-height:2.7em}}   /* the line on top, the two buttons under it; two lines tall so Next stays put while it changes */
dialog.coaster{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:#0b0b0c;color:#0b0b0c;touch-action:none}
dialog.coaster::backdrop{background:#0b0b0c}
html.riding{overflow:hidden}
dialog.coaster canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
dialog.coaster .vig{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse closest-side,transparent 45%,#0b0b0c 100%)}   /* the turn's edge darkening: ride.js writes its opacity (≈none in the straights); no transition, state().vignette is that value */
.hud{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;pointer-events:none;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));font:700 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.hud-info,.hud-ctl{display:flex;gap:10px;margin:0}
.hud-info{align-items:center;min-height:44px;padding:0 14px;background:#f7f6f1;border:2px solid #0b0b0c;box-shadow:4px 4px 0 var(--lime)}
.hud-info .zone{padding-left:10px;border-left:2px solid #0b0b0c}
.hud-pause,.hud-x{all:unset;box-sizing:border-box;pointer-events:auto;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;background:#f7f6f1;color:#0b0b0c;border:2px solid #0b0b0c;box-shadow:4px 4px 0 var(--lime);font:900 20px/1 var(--mono)}
.hud-pause::before{content:"";width:4px;height:16px;background:currentColor;box-shadow:8px 0 0 currentColor;margin-right:8px}
.hud-pause[aria-pressed="true"]::before{width:0;height:0;background:none;box-shadow:none;margin:0 0 0 4px;border:solid transparent;border-width:9px 0 9px 14px;border-left-color:currentColor}   /* paused: a play triangle */
.hud-pause:focus-visible,.hud-x:focus-visible{outline:3px solid #f7f6f1;outline-offset:3px;box-shadow:0 0 0 7px var(--lime)}
/* 09b · the race (js/infinity/kart.js; its name is name.js's), on the same stage: the plate's four values, the countdown, the cards (how to play, paused, the finish),
   the keys strip (a fine pointer) and the touch buttons (a touch screen). The stage keeps its own colours whatever the theme, so --ink and --paper are pinned here */
dialog.coaster.kart{--ink:#0b0b0c;--paper:#f7f6f1;--line:#0b0b0c;--mute:#55554f}
dialog.kart [hidden]{display:none!important}   /* (.btn and .hud-pause set display, which beats the attribute) */
dialog.kart .hud-info>span+span{padding-left:10px;border-left:2px solid #0b0b0c}
dialog.kart .hud-info .has{box-shadow:inset 0 -.55em 0 var(--lime)}   /* holding an item */
@media (max-width:560px){dialog.kart .hud-info{display:grid;grid-template-columns:auto auto;gap:6px 0;padding:6px 12px}dialog.kart .hud-info>.place,dialog.kart .hud-info>.time{padding:0 10px 0 0;border:0}}   /* two by two beside the buttons (the .vh separators sit between, so not nth-child) */
dialog.kart .count{position:absolute;left:0;right:0;top:30%;margin:0;text-align:center;pointer-events:none;font:900 clamp(72px,18vw,170px)/1 "Archivo",system-ui,sans-serif;font-stretch:125%;
  color:#f7f6f1;-webkit-text-stroke:3px #0b0b0c;paint-order:stroke fill;text-shadow:6px 6px 0 #0b0b0c}
dialog.kart .count.go{color:var(--lime);animation:bic-go .6s ease-out forwards}
dialog.kart.carded .count{visibility:hidden}   /* (paused in the countdown: the digit does not show through the card's dimmer) */
dialog.kart canvas{outline:none}   /* (it takes focus when a card goes, for keyboard and reader users, but is no control: no ring) */
@keyframes bic-go{to{opacity:0;transform:scale(1.25)}}
dialog.kart .hud{z-index:1}   /* above the cards' dimmer: the ✕ and pause stay clickable while a card is up */
dialog.kart .cards{position:absolute;inset:0;display:grid;place-items:center;padding:calc(max(12px,env(safe-area-inset-top)) + 60px) 16px max(16px,env(safe-area-inset-bottom));pointer-events:none}   /* (the top clears the HUD row) */
dialog.kart.carded .cards{pointer-events:auto;background:rgba(11,11,12,.45)}
dialog.kart .card{box-sizing:border-box;width:min(92vw,520px);max-height:100%;overflow:auto;padding:22px 24px 26px;background:#f7f6f1;color:#0b0b0c;border:2px solid #0b0b0c;box-shadow:8px 8px 0 var(--lime);font-size:16px;line-height:1.45}   /* scrolls inside when the screen is short */
dialog.kart .card h2{margin:0 0 10px;font:900 clamp(24px,5vw,40px)/1.05 "Archivo",system-ui,sans-serif;font-stretch:125%}
dialog.kart .card p{margin:0 0 12px}
dialog.kart .goal{font-weight:700;font-size:18px}
dialog.kart .keylist{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px;font-size:15px}
dialog.kart .keylist b{display:inline-block;margin-right:2px;padding:0 6px;background:#fff;border:2px solid #0b0b0c;font:700 13px/1.6 var(--mono)}
dialog.kart .touchline,dialog.kart .tip{font-size:14px;color:#55554f}
dialog.kart .btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px}
dialog.kart .card .btn{min-height:48px;padding:0 18px;font-family:inherit;font-size:16px;cursor:pointer}
@media (max-height:720px){dialog.kart .card{padding:16px 18px 18px;line-height:1.35}dialog.kart .card h2{font-size:22px;margin-bottom:8px}dialog.kart .card p{margin-bottom:8px}dialog.kart .keylist{gap:3px;margin-bottom:8px}dialog.kart .btns{gap:10px;margin-top:12px}dialog.kart .card .btn{padding:0 14px}}   /* a short phone (the race's long name): the how-to card fits without scrolling */
dialog.kart .result{font:700 15px var(--mono)}
dialog.kart .fresh{display:inline-block;padding:4px 10px;background:var(--lime);border:2px solid #0b0b0c;font:700 13px var(--mono);text-transform:uppercase;letter-spacing:.06em}
dialog.kart .standings{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;font-size:15px}
dialog.kart .standings li{display:grid;grid-template-columns:3em 1fr auto;gap:8px;align-items:center;padding:6px 10px;border:2px solid #0b0b0c}
dialog.kart .standings .you{background:var(--lime)}
dialog.kart .standings span{font:700 13px var(--mono)}
dialog.kart .keys{position:absolute;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);box-sizing:border-box;width:max-content;max-width:calc(100% - 32px);margin:0;padding:8px 12px;
  background:#f7f6f1;border:2px solid #0b0b0c;box-shadow:4px 4px 0 var(--lime);font:700 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em;text-align:center;pointer-events:none}
dialog.kart .pads{display:none;position:absolute;left:0;right:0;bottom:0;justify-content:space-between;align-items:flex-end;pointer-events:none;
  padding:0 max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
dialog.kart .steer,dialog.kart .acts{display:flex;gap:12px}
dialog.kart .pads button{all:unset;box-sizing:border-box;pointer-events:auto;min-width:64px;height:64px;padding:0 10px;display:grid;place-items:center;background:rgba(247,246,241,.92);color:#0b0b0c;
  border:2px solid #0b0b0c;box-shadow:4px 4px 0 var(--lime);font:900 17px/1 var(--mono);letter-spacing:.04em;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
dialog.kart .pads .left,dialog.kart .pads .right{font-size:24px}
dialog.kart .pads .on{background:var(--lime);transform:translate(3px,3px);box-shadow:1px 1px 0 #0b0b0c}
@media (hover:none) and (pointer:coarse){dialog.kart .pads{display:flex}dialog.kart .keys{display:none}}
html.touch dialog.kart .pads{display:flex}
html.touch dialog.kart .keys{display:none}
html dialog.kart.carded .pads,html dialog.kart.carded .keys{display:none}   /* a card is up: its buttons, not these */
@media print{.btn.ride,.btn.kart,.tour,dialog.coaster{display:none}}

/* 39 · the close: a conversation that types itself out while the headline evolves with it */
.morph{display:flex;flex-direction:column;justify-content:flex-end}
.morph .mi{display:block}
.morph .w{display:inline-block;white-space:nowrap}
.morph .l{display:inline-block;transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .3s}
.morph .l.out{transform:translateY(-.5em) rotate(-12deg) scale(.4);opacity:0}
.morph .l.in{animation:lin .55s cubic-bezier(.3,1.7,.5,1) both;animation-delay:calc(var(--i) * 28ms)}
@keyframes lin{0%{transform:translateY(.45em) scale(.3);opacity:0}100%{transform:none;opacity:1}}
#h-p39:focus{outline:none;box-shadow:none}
.chat{position:relative;display:grid;gap:12px;max-width:720px}
.msg{margin:0;max-width:84%;padding:12px 16px;border:2px solid var(--line);font-size:clamp(16px,1vw + 12px,20px);line-height:1.4;transform-origin:0 100%}
.msg.us{justify-self:start;background:var(--plate);color:#0b0b0c;box-shadow:5px 5px 0 var(--lime)}
.msg.you{justify-self:end;background:var(--ink);color:var(--paper);transform-origin:100% 100%;box-shadow:-5px 5px 0 var(--pink)}
.chat .wait{opacity:0}
.chat .pop{animation:pop .45s cubic-bezier(.3,1.6,.5,1) both}
.typing{position:absolute;left:0;display:flex;gap:6px;padding:14px 16px;background:var(--plate);border:2px solid var(--line);box-shadow:5px 5px 0 var(--lime);animation:pop .3s cubic-bezier(.3,1.6,.5,1) both;transform-origin:0 100%}
.typing i{width:8px;height:8px;background:#0b0b0c;animation:tdot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{30%{transform:translateY(-5px)}60%{transform:none}}
@keyframes pop{0%{transform:scale(.4) translateY(10px);opacity:0}100%{transform:none;opacity:1}}
.replies{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end;margin-top:10px;transform-origin:100% 100%}
.reply{all:unset;box-sizing:border-box;cursor:pointer;min-height:44px;display:inline-flex;flex-wrap:wrap;align-items:center;column-gap:.5em;padding:8px 16px;border:2px solid var(--line);
  font:700 13px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em;background:var(--paper);color:var(--ink);text-decoration:none}
.reply.main{min-height:56px;padding:10px 20px;font-size:clamp(13px,.5vw + 11px,16px);background:var(--lime);color:#0b0b0c;box-shadow:5px 5px 0 var(--ink);transition:transform .25s cubic-bezier(.2,1.4,.4,1),box-shadow .25s cubic-bezier(.2,1.4,.4,1)}
.reply.main:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.reply.main span{white-space:nowrap}
.reply:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 7px var(--lime)}

/* Ω · one more thing: "become the Omega <word>". js/finale.js rolls the word in its reel and keeps the button's email subject in step */
.fin .slug .pg{font-size:clamp(30px,4vw,48px)}
.fin h2{max-width:13em}
.fin h2 em{background:var(--lime);color:#0b0b0c}
.fin .lede{max-width:28em}
.fin-ask{margin:clamp(56px,8vw,104px) 0 0;max-width:15em;font:900 clamp(24px,4.6vw,60px)/1.3 "Archivo",sans-serif;font-stretch:125%;text-transform:uppercase;letter-spacing:.012em}
.fin-word{all:unset;box-sizing:border-box;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fin-word:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 7px var(--lime)}
/* the reel is an inline-block, so it is as wide as its widest word and never changes width as it rolls; the margin clears its shadow off the comma */
.fin-reel{display:inline-block;vertical-align:bottom;height:1.3em;overflow:hidden;border:2px solid #0b0b0c;box-shadow:6px 6px 0 var(--shadow);margin:0 calc(.1em + 6px) 6px .1em;transition:opacity .4s ease}
.fin-reel-in{display:block;transition:transform .7s cubic-bezier(.3,1.45,.45,1)}
.fin-reel-in span{display:block;height:1.3em;padding:0 .2em;text-align:center;color:#0b0b0c}
.fin-reel-in span:nth-child(4n+1){background:var(--lime)}
.fin-reel-in span:nth-child(4n+2){background:var(--pink)}
.fin-reel-in span:nth-child(4n+3){background:var(--cyan)}
.fin-reel-in span:nth-child(4n+4){background:var(--lav)}
.fin .btn.xl{margin-top:clamp(24px,3vw,36px)}
.fin-hint{margin:16px 0 0;font:700 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}

@media (prefers-reduced-motion:reduce){
  .toy:not(.loose) .toy-body img,.toy:not(.loose) .toy-shadow,.toy.hop .toy-body img,.toy.hop .toy-shadow,.stn::before,.wave.go .l{animation:none}
  .toy-body,.bubble,.reply.main,.fin-reel-in{transition:none}
}