/* Odd Pebble Studio. One stylesheet, no build step. Pebble Serif, a renamed subset of Source Serif 4, is self-hosted (SIL OFL 1.1, see /fonts/OFL.txt). */
/* Bump ?v= on /style.css in every page head when this file changes; Pages caches it for 4 hours. */
/* The look: a workbench at night. Dark ink bench, one warm lamp, and every app keeps its own art direction in its plate and scene. */
@font-face{font-family:"Pebble Serif";src:url(/fonts/pebble-serif.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;
  --bg:#0e1014;--surface:#161920;--sunk:#1b1f27;--raise:#20252e;
  --fg:#f2ede4;--muted:#aca596;--line:#2a2f39;--grid:rgba(242,237,228,.035);
  --accent:#f2a66f;--accent-ink:#1a120c;--accent-soft:rgba(242,166,111,.12);
  --paper:#f6f1e7;--paper-ink:#1d1a16;--paper-muted:#5b544b;--paper-line:#e2d9ca;--paper-accent:#a3461f;
  --band:#0a0b0e;--band-fg:#f2ede4;--band-muted:#aca596;--band-line:#23272f;--band-accent:#f2a66f;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 18px 40px -20px rgba(0,0,0,.7);
  --serif:"Pebble Serif",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --wide:74rem;--read:40rem;--gutter:clamp(1rem,4.5vw,2.5rem);
  --ease:cubic-bezier(.2,.7,.2,1);
  /* older names kept for /unspool/today/today.css */
  --card:var(--surface)
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;display:flex;flex-direction:column;min-height:100vh;overflow-x:clip}
main{flex:1}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
::selection{background:var(--accent);color:var(--accent-ink)}

a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:var(--gutter);top:-4rem;background:var(--fg);color:var(--bg);padding:.5rem .9rem;border-radius:8px;z-index:30}
.skip:focus{top:.75rem}

h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.15;letter-spacing:-.01em;font-optical-sizing:auto;text-wrap:balance;margin:0}
h1{font-size:clamp(2.25rem,1.6rem + 2.6vw,3.5rem)}
h2{font-size:clamp(1.45rem,1.25rem + .8vw,1.85rem);margin:3rem 0 .75rem}
h3{font-size:1.2rem;font-weight:600;margin:1.9rem 0 .35rem}
p,ul,ol,dl{margin:0 0 1rem}
li{margin-bottom:.4rem}
strong{font-weight:600}
.lead{font-size:clamp(1.12rem,1.02rem + .45vw,1.32rem);line-height:1.55;color:var(--muted);text-wrap:pretty}
.meta{color:var(--muted);font-size:.9375rem}
.eyebrow,.label{font:600 .72rem/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0 0 1.1rem}
.label .n{color:var(--muted);margin-right:.9em;font-variant-numeric:tabular-nums}

/* layout */
.wrap{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}
.read{max-width:var(--read)}
.page{padding:clamp(2.5rem,6vw,4.5rem) 0 4.5rem}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 70%,transparent);-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s ease,background-color .3s ease}
.site-header.scrolled{border-bottom-color:var(--line);background:color-mix(in srgb,var(--bg) 86%,transparent)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem 1.5rem;padding-top:1rem;padding-bottom:1rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;color:var(--fg);text-decoration:none;font-family:var(--serif);font-size:1.2rem;font-weight:600;letter-spacing:-.005em}
.brand svg{width:1.6rem;height:1.6rem;flex:none;overflow:visible}
.brand .pebble{transform-box:fill-box;transform-origin:center;transition:transform .5s var(--ease)}
.brand:hover .pebble{transform:rotate(-14deg) scale(1.06)}
.pebble{fill:var(--accent)}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1.6rem;font-size:.95rem;font-weight:500}
.site-nav a{position:relative;color:var(--muted);text-decoration:none;padding:.3rem 0}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.site-nav a:hover{color:var(--fg)}
.site-nav a:hover::after,.site-nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.site-nav a[aria-current]{color:var(--fg)}
.site-nav .nav-cta{color:var(--fg);padding:.42rem 1rem;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s ease,color .2s ease}
.site-nav .nav-cta::after{display:none}
.site-nav .nav-cta:hover{box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent)}

/* footer */
.site-footer{background:var(--band);color:var(--band-muted);font-size:.9375rem;border-top:1px solid var(--band-line)}
.site-footer .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);gap:2.5rem 3rem;padding-top:clamp(3rem,7vw,4.5rem);padding-bottom:2rem}
.site-footer p{margin:0 0 .35rem}
.site-footer a{color:var(--band-muted);text-decoration:none}
.site-footer a:hover{color:var(--band-fg);text-decoration:underline}
.site-footer .brand{color:var(--band-fg);margin-bottom:1rem}
.site-footer .pebble{fill:var(--band-accent)}
.foot-note{max-width:24rem}
.foot-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr);gap:1.5rem 2rem}
.foot-cols h2{font-family:var(--sans);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--band-fg);margin:0 0 1rem}
.foot-cols ul{list-style:none;padding:0;margin:0}
.foot-cols li{margin:0 0 .55rem}
.foot-legal{grid-column:1/-1;border-top:1px solid var(--band-line);padding-top:1.5rem;margin:1rem 0 0!important;font-size:.875rem}
.site-footer .foot-note p:last-child{font-size:.875rem;margin-top:.75rem}

/* buttons */
.button,.badge{position:relative;display:inline-flex;align-items:center;gap:.55rem;min-height:2.85rem;padding:.65rem 1.35rem;border-radius:999px;font-weight:600;font-size:1rem;text-decoration:none;line-height:1.2;transition:transform .2s var(--ease),background-color .2s ease,box-shadow .2s ease,color .2s ease}
.button{background:var(--fg);color:var(--bg)}
.button:hover{transform:translateY(-1px);background:var(--accent);color:var(--accent-ink)}
.button.quiet{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.button.quiet:hover{box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent)}
.button .arr{display:inline-block;transition:transform .25s var(--ease)}
.button:hover .arr{transform:translateX(3px)}
.badge{background:var(--fg);color:var(--bg);border-radius:12px}
.badge:hover{transform:translateY(-1px)}
.cta{display:flex;flex-wrap:wrap;gap:.75rem;margin:2.25rem 0 0}
.arrow{font-weight:600;text-decoration:none;white-space:nowrap}
.arrow::after{content:"\2192";display:inline-block;margin-left:.45rem;transition:transform .2s ease}
.arrow:hover::after{transform:translateX(4px)}

/* reveal on scroll (only once site.js has run) */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-reveal="2"]{transition-delay:.08s}.js [data-reveal="3"]{transition-delay:.16s}.js [data-reveal="4"]{transition-delay:.24s}.js [data-reveal="5"]{transition-delay:.32s}.js [data-reveal="6"]{transition-delay:.4s}

/* ===== home hero: the orbit ===== */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:
  radial-gradient(42rem 30rem at 72% 46%,rgba(242,166,111,.10),transparent 70%),
  linear-gradient(var(--grid) 1px,transparent 1px) 0 0/48px 48px,
  linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/48px 48px,var(--bg)}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:8rem;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:center;gap:2rem 3rem;padding-top:clamp(2.5rem,6vw,4.5rem);padding-bottom:clamp(3rem,6vw,5rem);min-height:min(48rem,calc(100vh - 4rem))}
.hero h1{font-size:clamp(2.7rem,1.25rem + 4.9vw,5.4rem);font-weight:600;line-height:.98;letter-spacing:-.035em;margin:0 0 1.6rem}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lead{max-width:33rem}
.hero-copy > *{animation:rise 1s var(--ease) both}
.hero-copy > :nth-child(2){animation-delay:.08s}.hero-copy > :nth-child(3){animation-delay:.18s}.hero-copy > :nth-child(4){animation-delay:.28s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.orbit-wrap{position:relative;animation:fade 1.4s .2s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.orbit{display:block;width:100%;height:auto;max-width:40rem;margin:0 auto;overflow:visible}
.orbit .ring{fill:none;stroke:var(--line);stroke-width:1}
.orbit .ring-dash{stroke:#3a404c;stroke-dasharray:2 7}
.orbit .ring-text{font:600 9.6px var(--sans);letter-spacing:.24em;fill:#8f897d;text-transform:uppercase}
.orbit .spin{transform-origin:300px 280px;animation:spin 120s linear infinite}
.orbit .spin.rev{animation-duration:80s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit .halo{transform-origin:300px 280px;animation:breathe 6s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.12);opacity:.7}}
.orbit .core{transform-origin:300px 280px;transition:transform .6s var(--ease)}
.orbit-wrap:hover .core{transform:rotate(-8deg)}
.orbit .thread{fill:none;stroke:#363c48;stroke-width:1.1;transition:stroke .4s ease,stroke-width .4s ease,opacity .4s ease}
.orbit .particle{fill:var(--c)}
.orbit .node rect.pill{fill:#151820;stroke:#2f3541;stroke-width:1;transition:stroke .4s ease,fill .4s ease}
.orbit .node text{font:600 17px var(--sans);fill:var(--fg);letter-spacing:-.005em}
.orbit .node text.sub{font:500 11.5px var(--sans);fill:#9d9688;letter-spacing:.02em}
.orbit .node .tick{fill:none;stroke-width:1.4;opacity:0;transition:opacity .4s ease}
.orbit a.node:focus{outline:none}
.orbit a.node:focus-visible rect.pill{stroke:var(--fg);stroke-width:2}
.orbit .node{transition:opacity .4s ease;cursor:pointer}
.orbit g.node{cursor:default}
/* one app lit at a time: by hover, focus, or the slow tour in site.js */
.orbit[data-active] .thread{opacity:.35}
.orbit[data-active] .node{opacity:.55}
.orbit[data-active="moonbite"] .t-moonbite,.orbit[data-active="feastline"] .t-feastline,.orbit[data-active="little-doors"] .t-little-doors,.orbit[data-active="unspool"] .t-unspool,.orbit[data-active="mouthful"] .t-mouthful,.orbit[data-active="breakerline"] .t-breakerline{opacity:1;stroke:var(--c);stroke-width:1.8}
.orbit[data-active="moonbite"] .n-moonbite,.orbit[data-active="feastline"] .n-feastline,.orbit[data-active="little-doors"] .n-little-doors,.orbit[data-active="unspool"] .n-unspool,.orbit[data-active="mouthful"] .n-mouthful,.orbit[data-active="breakerline"] .n-breakerline{opacity:1}
.orbit[data-active="moonbite"] .n-moonbite rect.pill,.orbit[data-active="feastline"] .n-feastline rect.pill,.orbit[data-active="little-doors"] .n-little-doors rect.pill,.orbit[data-active="unspool"] .n-unspool rect.pill,.orbit[data-active="mouthful"] .n-mouthful rect.pill,.orbit[data-active="breakerline"] .n-breakerline rect.pill{stroke:var(--c);fill:#1b1f28}
.t-moonbite,.n-moonbite{--c:#f2cd6b}.t-feastline,.n-feastline{--c:#ee8a45}.t-little-doors,.n-little-doors{--c:#e5574b}.t-unspool,.n-unspool{--c:#5fb0e6}.t-mouthful,.n-mouthful{--c:#8fa8ff}.t-breakerline,.n-breakerline{--c:#ffb547}
.orbit-caption{min-height:3.2em;margin:.4rem auto 0;max-width:30rem;text-align:center;font-size:.95rem;color:var(--muted);transition:opacity .35s ease}
.orbit-caption b{color:var(--fg);font-weight:600}
.orbit-caption.swap{opacity:0}

/* ledger strip */
.ledger{border-bottom:1px solid var(--line)}
.ledger dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0}
.ledger dl > div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:.4rem;padding:2rem 1.5rem;border-left:1px solid var(--line)}
.ledger dl > div:first-child{border-left:0;padding-left:0}
.ledger dt{color:var(--muted);font-size:.9375rem}
.ledger dd{margin:0;font-family:var(--serif);font-size:clamp(2.2rem,1.6rem + 2vw,3.3rem);line-height:1;letter-spacing:-.02em;overflow:hidden}
.ledger dd span{display:inline-block}
.js .ledger dd span{transform:translateY(105%);transition:transform 1s var(--ease)}
.js .ledger .in dd span{transform:none}
.js .ledger .in > div:nth-child(2) dd span{transition-delay:.1s}.js .ledger .in > div:nth-child(3) dd span{transition-delay:.2s}.js .ledger .in > div:nth-child(4) dd span{transition-delay:.3s}

/* sections */
.section{padding:clamp(4.5rem,10vw,7.5rem) 0}
.section h2,.statement-band h2,.outro h2{font-size:clamp(1.9rem,1.25rem + 2.4vw,3.2rem);line-height:1.05;letter-spacing:-.025em;margin:0}
.section-head{max-width:44rem;margin-bottom:clamp(2.5rem,5vw,3.75rem)}
.section-head .lead{margin:1.1rem 0 0}
.section-head.row{max-width:none;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:1.5rem 4rem}
.prose p{font-size:1.15rem;line-height:1.7;color:var(--muted)}
.prose p:first-child{color:var(--fg)}
#vision,#values,#about,#apps,#mission{scroll-margin-top:5rem}

/* ===== app plates: one per app, each in its own art direction ===== */
.plates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;list-style:none;padding:0;margin:0}
.plate{position:relative;display:flex;flex-direction:column;margin:0;border-radius:18px;overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.plate:hover,.plate:focus-within{transform:translateY(-5px);box-shadow:0 24px 50px -26px var(--glow,rgba(0,0,0,.8))}
.plate .scene{aspect-ratio:16/10}
.plate-body{display:flex;flex-direction:column;gap:.35rem;padding:1.3rem 1.4rem 1.45rem;flex:1}
.plate-kind{font:600 .68rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;margin:0;color:var(--k)}
.plate h3,.plate h2{font-family:var(--serif);font-size:1.6rem;font-weight:600;letter-spacing:-.015em;margin:0;line-height:1.1}
.plate h3 a,.plate h2 a{color:inherit;text-decoration:none}
.plate h3 a::after,.plate h2 a::after{content:"";position:absolute;inset:0;z-index:1}
.plate a:focus-visible{outline:none}
.plate:has(h3 a:focus-visible),.plate:has(h2 a:focus-visible){outline:2px solid var(--fg);outline-offset:4px}
.plate-line{margin:0;opacity:.88;font-size:.98rem;line-height:1.5}
.plate-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:auto;padding-top:.9rem}
.plate-tag{margin:0;font-size:.8rem;font-weight:600;letter-spacing:.02em}
.plate-go{font-size:1.15rem;line-height:1;transition:transform .35s var(--ease)}
.plate:hover .plate-go{transform:translateX(5px)}
.plate .more{position:relative;z-index:2;font-size:.85rem;font-weight:600;color:inherit;text-underline-offset:.2em}

.plate-moonbite{background:#17143a;color:#f3eeff;--k:#f2cd6b;--glow:rgba(120,95,230,.6)}
.plate-moonbite .plate-tag{color:#f2cd6b}
.plate-feastline{background:#fbf3e4;color:#3a2416;--k:#a74716;--glow:rgba(238,138,69,.5);border-radius:6px}
.plate-feastline .plate-body{border-top:2px dashed #e3cfb2}
.plate-feastline .plate-tag{font-family:var(--mono);font-size:.78rem;color:#7a4a2a}
.plate-little-doors{background:#a92f26;color:#fff4e6;--k:#ffd37a;--glow:rgba(229,87,75,.55);border-radius:10px}
.plate-little-doors .plate-tag{color:#ffd37a}
.plate-unspool{background:#efe6d6;color:#232838;--k:#b5401f;--glow:rgba(95,176,230,.45);border-radius:14px}
.plate-unspool::after{content:"";position:absolute;inset:7px;border:1.5px dashed rgba(35,40,56,.28);border-radius:10px;pointer-events:none}
.plate-unspool .plate-tag{color:#2c5f86}
.plate-mouthful{background:#e3804c;color:#2a140a;--k:#4a1d08;--glow:rgba(143,168,255,.45);border-radius:4px;border:6px dotted var(--bg)}
.plate-mouthful .plate-tag{color:#2a140a}
.plate-breakerline{background:#1d2b4f;color:#efe6d2;--k:#f2c230;--glow:rgba(255,181,71,.45);border-radius:10px}
.plate-breakerline::after{content:"";position:absolute;inset:6px;border:1.5px solid rgba(239,230,210,.55);border-radius:6px;pointer-events:none;background:
  radial-gradient(circle,#b8893a 2.2px,transparent 2.8px) 3px 3px/ calc(100% - 6px) calc(100% - 6px) no-repeat,
  radial-gradient(circle,#b8893a 2.2px,transparent 2.8px) calc(100% - 3px) 3px/ 8px 8px no-repeat}
.plate-breakerline .plate-tag{color:#f2c230}

/* ===== scenes ===== */
.scene{position:relative;overflow:hidden;isolation:isolate}
.scene svg{display:block;width:100%;height:100%}
.js .scene:not(.is-live) *,.js .scene:not(.is-live)::before,.js .scene:not(.is-live)::after{animation-play-state:paused!important}

/* Moonbite: moonlit water, a line in, the bobber breathing */
.scene-moonbite{background:#17143a}
.star{animation:twinkle 4s ease-in-out infinite}
.star:nth-of-type(2n){animation-delay:-1.3s;animation-duration:5.2s}
.star:nth-of-type(3n){animation-delay:-2.6s;animation-duration:3.4s}
@keyframes twinkle{50%{opacity:.25}}
.mb-glint{animation:glint 3.6s ease-in-out infinite}
.mb-glint:nth-child(2n){animation-delay:-1.2s}.mb-glint:nth-child(3n){animation-delay:-2.1s}
@keyframes glint{50%{opacity:.25;transform:translateX(4px)}}
.mb-swell{fill:none;stroke:#5a4fa0;stroke-width:1;stroke-dasharray:14 22;animation:swell 9s linear infinite}
.mb-swell:nth-of-type(2){animation-duration:13s;stroke-dasharray:8 30}
@keyframes swell{to{stroke-dashoffset:-144}}
.mb-bob{animation:bob 2.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(2.4px)}}
.mb-ripple{fill:none;stroke:#e9e2ff;stroke-width:.8;transform-box:fill-box;transform-origin:center;animation:ripple 2.6s ease-out infinite}
.mb-ripple + .mb-ripple{animation-delay:1.3s}
@keyframes ripple{from{transform:scale(1);opacity:.8}to{transform:scale(4.2);opacity:0}}
.mb-gold{animation:legend 8s ease-in-out infinite}
@keyframes legend{0%,55%,100%{opacity:0}72%{opacity:1}}
.plate-moonbite:hover .mb-gold{animation-duration:3s}

/* Feastline: a kitchen ticket on the rail, counting down */
.scene-feastline{background:#2a1a12;display:flex;justify-content:center;align-items:flex-start;padding-top:1.4rem}
.scene-feastline::before{content:"";position:absolute;left:0;right:0;top:.9rem;height:.55rem;background:linear-gradient(#cfc7bd,#8c847b 60%,#5d564f);box-shadow:0 2px 3px rgba(0,0,0,.4)}
.fl-ticket{position:relative;width:min(78%,15.5rem);background:#fffaf0;color:#2c1c12;font:500 .66rem/1.35 var(--mono);padding:.9rem .9rem 1rem;transform-origin:50% -.6rem;animation:sway 6s ease-in-out infinite alternate;box-shadow:0 10px 18px -10px rgba(0,0,0,.6);
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 6px) no-repeat,conic-gradient(from 135deg at 50% 100%,#000 90deg,#0000 0) bottom/10px 6px repeat-x;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - 6px) no-repeat,conic-gradient(from 135deg at 50% 100%,#000 90deg,#0000 0) bottom/10px 6px repeat-x}
.fl-back{position:absolute;top:1.3rem;left:50%;width:min(70%,13.5rem);height:62%;background:#efe4d0;transform:translateX(-62%) rotate(-5deg);transform-origin:50% 0;animation:none;opacity:.85}
.scene-feastline::after{content:"";position:absolute;top:.75rem;left:50%;width:1.6rem;height:1.05rem;margin-left:-.8rem;border-radius:3px;background:linear-gradient(#e5ded4,#9a928a);box-shadow:0 2px 3px rgba(0,0,0,.35)}
@keyframes sway{from{transform:rotate(-1.6deg)}to{transform:rotate(1.4deg)}}
.fl-head{margin:0 0 .45rem;letter-spacing:.08em;color:#8a6a52;font-size:.58rem}
.fl-next{margin:0;font-weight:700;letter-spacing:.06em;font-size:.58rem;color:#b5501b}
.fl-next b{display:block;font:600 .95rem/1.2 var(--sans);letter-spacing:0;color:#2c1c12;margin-top:.1rem}
.fl-clock{display:flex;align-items:flex-start;margin:.3rem 0 .55rem;font:600 1.55rem/1 var(--mono);color:#c06a1f;font-variant-numeric:tabular-nums;height:1em;overflow:hidden}
.fl-digit{display:inline-flex;flex-direction:column;height:1em;overflow:hidden}
.fl-digit > span{display:flex;flex-direction:column;line-height:1}
.fl-digit i{display:block;height:1em;font-style:normal}
.fl-tens span{animation:tick6 60s steps(6) infinite}
.fl-ones span{animation:tick10 10s steps(10) infinite}
@keyframes tick6{to{transform:translateY(-6em)}}
@keyframes tick10{to{transform:translateY(-10em)}}
.fl-lines{list-style:none;padding:.45rem 0 0;margin:0;border-top:1px dashed #d7c6ae}
.fl-lines li{display:flex;gap:.6rem;margin:0 0 .18rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:print 9s steps(1) infinite}
.fl-lines time{color:#8a6a52;min-width:2.9em}
.fl-lines li:nth-child(2){animation-name:print2}.fl-lines li:nth-child(3){animation-name:print3}.fl-lines li:nth-child(4){animation-name:print4}
@keyframes print{0%{opacity:1}}
@keyframes print2{0%,8%{opacity:0}9%,100%{opacity:1}}
@keyframes print3{0%,16%{opacity:0}17%,100%{opacity:1}}
@keyframes print4{0%,24%{opacity:0}25%,100%{opacity:1}}

/* Little Doors: a printed calendar, doors opening in date order */
.scene-doors{background:#1f2a55;display:grid;place-items:center;padding:1.1rem}
.scene-doors::before{content:"";position:absolute;inset:0;background:radial-gradient(1.2px 1.2px at 12% 18%,#fff 98%,transparent),radial-gradient(1px 1px at 34% 8%,#fff 98%,transparent),radial-gradient(1.4px 1.4px at 66% 14%,#fff 98%,transparent),radial-gradient(1px 1px at 86% 26%,#fff 98%,transparent),radial-gradient(1.2px 1.2px at 52% 4%,#fff 98%,transparent),radial-gradient(1px 1px at 8% 80%,#fff 98%,transparent),radial-gradient(1.2px 1.2px at 94% 86%,#fff 98%,transparent);opacity:.7;animation:snow 12s linear infinite}
@keyframes snow{to{transform:translateY(12px)}}
.ld-board{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.38rem;width:min(92%,19rem);padding:.6rem;background:#f7efe0;border-radius:4px;box-shadow:0 0 0 3px #c8372d,0 12px 22px -12px rgba(0,0,0,.7)}
.ld-cell{position:relative;aspect-ratio:3/4;perspective:260px;border-radius:2px;background:radial-gradient(circle at 50% 60%,#ffe7a6,#ffbf4d 70%);box-shadow:inset 0 0 0 1px rgba(90,40,10,.25)}
.ld-cell::before{content:"";position:absolute;left:30%;top:38%;width:40%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 60% 62%,#d6452f 0 34%,transparent 35%),radial-gradient(circle at 45% 45%,#6b4027 0 52%,transparent 53%)}
.ld-cell:nth-child(3n)::before{border-radius:0;width:44%;left:28%;top:30%;aspect-ratio:4/5;background:#2f6b4f;clip-path:polygon(50% 0,100% 80%,60% 80%,60% 100%,40% 100%,40% 80%,0 80%)}
.ld-door{position:absolute;inset:0;display:grid;place-items:center;background:#f3e6cf;border-radius:2px;box-shadow:inset 0 0 0 1px #d9c3a0;transform-origin:left center;font:600 .78rem/1 var(--serif);color:#c8372d;text-shadow:.6px .4px 0 rgba(47,107,79,.55);backface-visibility:hidden;animation:door 14s var(--ease) infinite;animation-delay:var(--d,0s)}
@keyframes door{0%,4%{transform:rotateY(0)}9%,66%{transform:rotateY(-112deg)}74%,100%{transform:rotateY(0)}}
/* opening order follows the printed numbers, like the real thing */
.ld-cell:nth-child(1) .ld-door{--d:1.8s}.ld-cell:nth-child(2) .ld-door{--d:4.8s}.ld-cell:nth-child(3) .ld-door{--d:.6s}.ld-cell:nth-child(4) .ld-door{--d:6s}.ld-cell:nth-child(5) .ld-door{--d:3s}.ld-cell:nth-child(6) .ld-door{--d:0s}
.ld-cell:nth-child(7) .ld-door{--d:3.6s}.ld-cell:nth-child(8) .ld-door{--d:2.4s}.ld-cell:nth-child(9) .ld-door{--d:5.4s}.ld-cell:nth-child(10) .ld-door{--d:1.2s}.ld-cell:nth-child(11) .ld-door{--d:4.2s}.ld-cell:nth-child(12) .ld-door{--d:6.6s}
.ld-door.big{font-size:.95rem}

/* Unspool: stitched threads drawn in, then pulled out one by one, and the shop lights up */
.scene-unspool{background:#efe6d6}
.us-thread{animation:pull 12s var(--ease) infinite;animation-delay:var(--d)}
.us-thread path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.us-thread .body{stroke-width:9;stroke-dasharray:1;animation:draw 12s var(--ease) infinite;animation-delay:var(--d)}
.us-thread .stitch{stroke:#fff;stroke-opacity:.6;stroke-width:1.6;stroke-dasharray:3 4;animation:stitch 12s linear infinite;animation-delay:var(--d)}
@keyframes stitch{0%,7%{opacity:0}11%,100%{opacity:1}}
@keyframes draw{0%{stroke-dashoffset:1}9%,100%{stroke-dashoffset:0}}
@keyframes pull{0%,24%{transform:none;opacity:1}33%,92%{transform:translate(var(--dx),var(--dy));opacity:0}100%{transform:none;opacity:0}}
.us-1{--d:0s;--dx:-60px;--dy:-30px}.us-2{--d:.8s;--dx:70px;--dy:-24px}.us-3{--d:1.6s;--dx:-50px;--dy:40px}.us-4{--d:2.4s;--dx:60px;--dy:36px}
.us-window{fill:#4a4258;animation:lamp 12s ease infinite}
@keyframes lamp{0%,40%{fill:#4a4258}50%,88%{fill:#ffcf6a}96%,100%{fill:#4a4258}}
.us-glow{opacity:0;animation:lampglow 12s ease infinite}
@keyframes lampglow{0%,40%{opacity:0}50%,88%{opacity:1}96%,100%{opacity:0}}

/* Mouthful: one word, ten languages, on a stamp; letter tiles riding underneath */
.scene-mouthful{background:#f8ecdb;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem}
.mf-stamp{position:relative;width:min(62%,12.5rem);aspect-ratio:5/3;background:#fffaf2;border:5px dotted #f8ecdb;outline:1px solid #e9cdb0;outline-offset:-10px;display:grid;place-items:center;box-shadow:0 8px 16px -10px rgba(80,30,5,.45);perspective:400px}
.mf-word{grid-area:1/1;display:flex;flex-direction:column;align-items:center;gap:.15rem;opacity:0;animation:flip 20s var(--ease) infinite;animation-delay:var(--d)}
.mf-word:first-child{opacity:1}
.mf-word b{font:600 clamp(1.15rem,.9rem + 1vw,1.5rem)/1.1 var(--serif);color:#c55a2a;white-space:nowrap}
.mf-word small{font:600 .55rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#7b5a45}
@keyframes flip{0%{opacity:0;transform:rotateX(80deg)}2%,9%{opacity:1;transform:none}11%,100%{opacity:0;transform:rotateX(-80deg)}}
.mf-word:nth-child(2){--d:2s}.mf-word:nth-child(3){--d:4s}.mf-word:nth-child(4){--d:6s}.mf-word:nth-child(5){--d:8s}.mf-word:nth-child(6){--d:10s}.mf-word:nth-child(7){--d:12s}.mf-word:nth-child(8){--d:14s}.mf-word:nth-child(9){--d:16s}.mf-word:nth-child(10){--d:18s}
.js .mf-word:first-child{opacity:0}
.mf-mark{position:absolute;right:-1.5rem;top:-1.5rem;width:2.9rem;height:2.9rem;color:#4a6fd1;animation:thump 2s ease-out infinite}
@keyframes thump{0%{transform:scale(1.25) rotate(-8deg);opacity:0}10%{transform:scale(1) rotate(-14deg);opacity:.7}80%{opacity:.7}100%{opacity:0;transform:scale(1) rotate(-14deg)}}
.mf-tiles{display:flex;gap:.22rem}
.mf-tiles i{display:grid;place-items:center;width:1.45rem;height:1.6rem;border-radius:3px;background:#fffaf2;box-shadow:0 2px 0 #d9b48f,0 0 0 1px #ead2b6;font:600 .8rem/1 var(--serif);font-style:normal;color:#3b1d10;animation:tile 2.4s ease-in-out infinite;animation-delay:calc(var(--i) * .12s)}
.mf-tiles i:nth-child(1){--i:0}.mf-tiles i:nth-child(2){--i:1}.mf-tiles i:nth-child(3){--i:2}.mf-tiles i:nth-child(4){--i:3}.mf-tiles i:nth-child(5){--i:4}.mf-tiles i:nth-child(6){--i:5}.mf-tiles i:nth-child(7){--i:6}.mf-tiles i:nth-child(8){--i:7}
@keyframes tile{0%,60%,100%{transform:none}30%{transform:translateY(-5px)}}

/* Breakerline: the breakwater at night, one white flash every five seconds (Fl W 5s) */
.scene-breakerline{background:#0b1622}
.bl-beam{transform-box:fill-box;transform-origin:0 50%;animation:beam 5s linear infinite}
@keyframes beam{0%{transform:scaleX(1);opacity:.9}25%{transform:scaleX(.02);opacity:1}50%{transform:scaleX(-1);opacity:.35}75%{transform:scaleX(-.02);opacity:.1}100%{transform:scaleX(1);opacity:.9}}
.bl-flash{transform-box:fill-box;transform-origin:center;animation:flash 5s linear infinite}
@keyframes flash{0%,18%,32%,100%{opacity:.35;transform:scale(1)}25%{opacity:1;transform:scale(1.6)}}
.bl-swell{fill:none;stroke:#2b5560;stroke-width:1;stroke-dasharray:20 28;animation:swell 11s linear infinite}
.bl-swell:nth-of-type(2){animation-duration:15s;stroke-dasharray:10 36;animation-direction:reverse}
.bl-foam{fill:#cfe6e0;animation:foam 3.2s ease-in-out infinite}
.bl-foam:nth-of-type(2n){animation-delay:-1.1s}.bl-foam:nth-of-type(3n){animation-delay:-2s}
@keyframes foam{0%,100%{opacity:.15}50%{opacity:.85}}
.bl-plate text{font:700 9px var(--sans);fill:#1d2b4f;letter-spacing:.04em}

/* ===== studio + rules ===== */
.rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 4rem;list-style:none;padding:0;margin:0;counter-reset:r}
.rules li{position:relative;counter-increment:r;display:grid;grid-template-columns:3.4rem 1fr;gap:0 1rem;padding:1.6rem 0 1.7rem;margin:0}
.rules li::before{content:counter(r,decimal-leading-zero);font:500 1.7rem/1 var(--serif);color:var(--muted);transition:color .3s ease;font-variant-numeric:lining-nums tabular-nums}
.rules li::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.rules li > span{position:absolute;left:0;top:0;height:1px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease);z-index:1}
.rules li:hover > span,.rules li.in > span{transform:scaleX(1)}
.rules li.in > span{transform:scaleX(.18)}
.rules li:hover > span{transform:scaleX(1)}
.rules li:hover::before{color:var(--accent)}
.rules h3{font-size:1.4rem;font-weight:500;margin:0 0 .45rem}
.rules p{grid-column:2;color:var(--muted);margin:0}

/* vision and mission */
.statement-band{position:relative;padding:clamp(4.5rem,10vw,7.5rem) 0;background:var(--band);border-top:1px solid var(--band-line);border-bottom:1px solid var(--band-line);overflow:hidden}
.statement-band::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(242,166,111,.07) 50%,transparent 70%) -60% 0/60% 100% no-repeat;animation:lampsweep 14s ease-in-out infinite}
@keyframes lampsweep{50%{background-position:160% 0}}
.vm{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 4rem}
.vm article{border-top:1px solid var(--band-line);padding-top:2rem;scroll-margin-top:5rem}
.statement{font-family:var(--serif);font-size:clamp(1.45rem,1.1rem + 1.3vw,2.15rem);line-height:1.28;letter-spacing:-.012em;margin:0;text-wrap:pretty}

/* how we work: a thread that pulls through the four steps as you scroll */
.process{position:relative}
.process-thread{display:block;width:100%;height:auto;margin:0 0 1.5rem;overflow:visible}
.process-thread path{fill:none;stroke-linecap:round}
.process-thread .base{stroke:var(--line);stroke-width:1.5;stroke-dasharray:3 6}
.process-thread .live{stroke:var(--accent);stroke-width:2.2;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,1))}
.process-thread .bead{fill:var(--accent)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;list-style:none;padding:0;margin:0;counter-reset:s}
.steps li{counter-increment:s;margin:0;opacity:1;transition:opacity .5s ease}
.js .process .steps li:not(.lit){opacity:.42}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font:500 .95rem/1 var(--serif);color:var(--accent);margin-bottom:1rem;font-variant-numeric:lining-nums tabular-nums}
.steps h3{font-size:1.4rem;font-weight:500;margin:0 0 .5rem}
.steps p{color:var(--muted);margin:0}

/* closing */
.outro{padding:clamp(4.5rem,10vw,7rem) 0}
.outro .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:2rem 3rem}
.outro .label{color:var(--accent);margin:0 0 1.1rem;font-size:.72rem}
.outro p:not(.label){color:var(--muted);margin:1rem 0 0;font-size:1.1rem;max-width:32rem}
.mail{position:relative;display:inline-block;font:500 clamp(1.25rem,.9rem + 1.6vw,2.1rem)/1.2 var(--serif);color:var(--fg);text-decoration:none;padding-bottom:.25rem;word-break:break-word}
.mail::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(.25);transform-origin:left;transition:transform .6s var(--ease)}
.mail:hover::after,.mail:focus-visible::after{transform:scaleX(1)}
.mail:hover{color:var(--accent)}

/* ===== app pages ===== */
.app-band{position:relative;overflow:hidden;background:var(--b);color:var(--t);border-bottom:1px solid var(--line)}
.app-band-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:2rem 3.5rem;padding-top:clamp(2.5rem,6vw,4.5rem);padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.app-band .label{color:var(--k)}
.app-title{display:flex;align-items:center;gap:1.1rem;margin:0 0 1rem}
.app-title .icon{width:4.6rem;height:4.6rem;border-radius:22.5%;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 14px 30px -14px rgba(0,0,0,.6);flex:none}
.app-band h1{font-size:clamp(2.6rem,1.6rem + 3.4vw,4.4rem);font-weight:600;letter-spacing:-.03em;line-height:1}
.app-band .lead{color:var(--t);opacity:.85;margin:0}
.app-band .actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin:1.6rem 0 0}
.app-band .actions .meta{margin:0;color:var(--t);opacity:.8}
.app-band .button{background:var(--t);color:var(--b)}
.app-band .button:hover{background:var(--k);color:var(--b)}
.app-band-copy > *{animation:rise 1s var(--ease) both}
.app-band-copy > :nth-child(2){animation-delay:.08s}.app-band-copy > :nth-child(3){animation-delay:.16s}.app-band-copy > :nth-child(4){animation-delay:.24s}
.app-band .scene{aspect-ratio:16/11;border-radius:16px;box-shadow:0 30px 60px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.06);animation:rise 1.1s .15s var(--ease) both}
.app-band .scene-feastline,.app-band .scene-unspool,.app-band .scene-mouthful{box-shadow:0 30px 60px -34px rgba(60,30,10,.55),0 0 0 1px rgba(0,0,0,.06)}
.app-band .scene .fl-ticket{font-size:.8rem}
.app-band .scene .ld-board{width:min(92%,26rem)}
.app-band .scene .ld-door{font-size:1rem}
.app-band .scene .mf-tiles i{width:1.9rem;height:2.1rem;font-size:1.05rem}
.band-moonbite{--b:#17143a;--t:#f3eeff;--k:#f2cd6b}
.band-feastline{--b:#fbf3e4;--t:#3a2416;--k:#a74716}
.band-little-doors{--b:#1f2a55;--t:#fff4e6;--k:#ffd37a}
.band-unspool{--b:#efe6d6;--t:#232838;--k:#b5401f}
.band-mouthful{--b:#f8ecdb;--t:#2a140a;--k:#a8471f}
.band-feastline .scene,.band-unspool .scene,.band-mouthful .scene{outline:1px solid rgba(0,0,0,.06)}
.page-body{padding-top:clamp(2.5rem,6vw,4rem);padding-bottom:4.5rem}
.shots{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(12.5rem,15rem);gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:.25rem var(--gutter) 1.25rem;margin:0 calc(var(--gutter) * -1) 1.5rem;scrollbar-width:thin;overscroll-behavior-x:contain}
.shots figure{margin:0;scroll-snap-align:start}
.shots img{width:100%;border-radius:1.6rem;box-shadow:0 0 0 1px var(--line),var(--shadow);background:var(--sunk);transition:transform .5s var(--ease)}
.shots figure:hover img{transform:translateY(-4px)}
.js .shots figure{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .shots.in figure{opacity:1;transform:none}
.js .shots.in figure:nth-child(2){transition-delay:.1s}.js .shots.in figure:nth-child(3){transition-delay:.2s}.js .shots.in figure:nth-child(4){transition-delay:.3s}
.shots figcaption{font-size:.875rem;color:var(--muted);margin-top:.7rem;line-height:1.45}
.features{list-style:none;padding:0;margin:0 0 1rem}
.features li{position:relative;padding:.85rem 0 .85rem 1.6rem;border-top:1px solid var(--line);margin:0}
.features li:last-child{border-bottom:1px solid var(--line)}
.features li::before{content:"";position:absolute;left:.15rem;top:1.45rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--accent)}
.related{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0;margin:3rem 0 0}
.related li{margin:0}
.related a{display:inline-block;padding:.5rem 1rem;border:1px solid var(--line);border-radius:999px;color:var(--fg);text-decoration:none;font-size:.9375rem;background:var(--surface);transition:border-color .2s ease,transform .2s var(--ease)}
.related a:hover{border-color:var(--accent);transform:translateY(-1px)}
.app-moonbite{--accent:#f2cd6b}.app-feastline{--accent:#ee8a45}.app-little-doors{--accent:#ff8a7a}.app-unspool{--accent:#6cc0f0}.app-mouthful{--accent:#f39a66}

/* page intros (work, about) */
.page-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:linear-gradient(var(--grid) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/48px 48px,var(--bg)}
.page-hero .wrap{padding-top:clamp(3.5rem,9vw,7rem);padding-bottom:clamp(3rem,7vw,5rem)}
.page-hero h1{font-size:clamp(2.6rem,1.4rem + 4.4vw,4.9rem);font-weight:600;line-height:1.02;letter-spacing:-.03em;margin-bottom:1.5rem;max-width:54rem}
.page-hero .lead{max-width:38rem}
.page-hero .wrap > *{animation:rise 1s var(--ease) both}
.page-hero .wrap > :nth-child(2){animation-delay:.08s}.page-hero .wrap > :nth-child(3){animation-delay:.16s}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 3rem;list-style:none;padding:0;margin:0}
.pillars li{border-top:1px solid var(--line);padding:1.6rem 0 0;margin:0}
.pillars h3{font-size:1.4rem;font-weight:500;margin:0 0 .5rem}
.pillars p{color:var(--muted);margin:0}

/* ===== documents: privacy, support, terms, press. Printed sheets laid on the bench ===== */
.doc{--fg:var(--paper-ink);--muted:var(--paper-muted);--line:var(--paper-line);--surface:#fffcf6;--sunk:#efe8db;--accent:var(--paper-accent);--accent-soft:rgba(163,70,31,.09);
  color-scheme:light;position:relative;background:var(--paper);color:var(--fg);max-width:48rem;padding:clamp(1.75rem,5vw,3.75rem) clamp(1.25rem,5vw,4rem) clamp(2rem,5vw,3.5rem);border-radius:6px;box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 30px 60px -30px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.2);animation:sheet .9s var(--ease) both}
.doc ::selection{background:var(--paper-accent);color:#fff}
@keyframes sheet{from{opacity:0;transform:translateY(26px) rotate(-.4deg)}to{opacity:1;transform:none}}
.page:has(.doc){background:linear-gradient(var(--grid) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/48px 48px}
.doc h1{margin-bottom:.6rem}
.doc .lead{margin:1rem 0 0}
.doc .eyebrow{color:var(--paper-accent)}
.doc h2{padding-top:2.25rem;border-top:1px solid var(--line);margin-top:2.75rem;scroll-margin-top:5.5rem}
.doc h2:first-of-type{border-top:0;padding-top:0}
.doc h3{scroll-margin-top:5.5rem}
.doc a{color:var(--paper-accent)}
.doc :focus-visible{outline-color:var(--paper-accent)}
.toc{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:1.75rem 0 0}
.toc li{margin:0}
.toc a{display:inline-block;padding:.35rem .85rem;border-radius:999px;background:var(--sunk);color:var(--fg);text-decoration:none;font-size:.9375rem;transition:background-color .2s ease}
.toc a:hover{background:var(--line)}
.app-head{display:flex;align-items:center;gap:.85rem}
.app-head img{width:2.5rem;height:2.5rem;border-radius:22.5%;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.5rem 1.6rem;margin:1.25rem 0 1.5rem}
.card h2{margin-top:0}
.doc .related a{background:var(--surface)}

/* press */
.facts{display:grid;grid-template-columns:minmax(7rem,max-content) 1fr;gap:0;margin:0}
.facts dt,.facts dd{padding:.6rem 0;border-top:1px solid var(--line);margin:0}
.facts dt:first-of-type,.facts dt:first-of-type + dd{border-top:0}
.facts dt{color:var(--muted);padding-right:1.25rem;font-size:.9375rem;padding-top:.68rem}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));gap:1.5rem}
.gallery figure{margin:0}
.gallery img{width:100%;border-radius:1.4rem;box-shadow:0 0 0 1px var(--line),var(--shadow)}
.gallery figcaption{color:var(--muted);font-size:.875rem;margin-top:.6rem;line-height:1.45}
.press-icon{width:10rem;border-radius:22.5%;box-shadow:0 0 0 1px var(--line),var(--shadow)}

/* ===== responsive ===== */
@media (max-width:64rem){
  .plates{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:52rem){
  .hero-grid,.split,.vm,.app-band-grid,.outro .wrap{grid-template-columns:1fr}
  .hero-grid{min-height:0}
  .ledger dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ledger dl > div{padding:1.5rem 1rem}
  .ledger dl > div:nth-child(odd){border-left:0;padding-left:0}
  .ledger dl > div:nth-child(n+3){border-top:1px solid var(--line)}
  .rules{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr;gap:1.5rem}
  .site-footer .wrap{grid-template-columns:1fr}
  .process-thread{display:none}
  .steps{grid-template-columns:1fr;gap:0;border-left:1px dashed var(--line);margin-left:.4rem}
  .steps li{position:relative;padding:0 0 2rem 1.6rem}
  .steps li::after{content:"";position:absolute;left:-5px;top:.15rem;width:9px;height:9px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--accent);transition:background-color .4s ease}
  .steps li.lit::after,html:not(.js) .steps li::after{background:var(--accent)}
}
@media (max-width:40rem){
  .plates{grid-template-columns:1fr}
  .orbit .node text{font-size:21px}
  .orbit .node text.sub{display:none}
  .orbit .node text.nm{transform:translateY(8px)}
  .orbit .ring-text{font-size:11px}
  .orbit-caption{font-size:.9rem}
}
@media (max-width:36rem){
  .foot-cols{grid-template-columns:1fr 1fr}
  .site-nav .nav-cta{display:none}
}
@media (max-width:30rem){
  .site-header .wrap{padding-top:.85rem;padding-bottom:.7rem}
  .site-nav{width:100%;gap:.25rem 1.15rem}
  .facts{grid-template-columns:1fr}
  .facts dt{padding-bottom:0;border-top:1px solid var(--line)!important}
  .facts dd{border-top:0;padding-top:.15rem}
  .facts dt:first-of-type{border-top:0!important}
  .rules li{grid-template-columns:2.6rem 1fr}
  .app-title .icon{width:3.6rem;height:3.6rem}
}

/* ===== reduced motion: everything holds still in a good pose ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-reveal],.js .shots figure,.js .ledger dd span{opacity:1;transform:none}
  .js .process .steps li:not(.lit){opacity:1}
  .orbit .particle{display:none}
  .js .mf-word:first-child{opacity:1}
  .ld-cell:nth-child(6) .ld-door,.ld-cell:nth-child(3) .ld-door,.ld-cell:nth-child(10) .ld-door{transform:rotateY(-112deg)}
  .mb-gold{opacity:.8}
  .us-window{fill:#ffcf6a}.us-glow{opacity:1}
  .rules li.in > span{transform:scaleX(.18)}
}

/* Tapescript, Spokenpost, Gapfill plates */
.scene-icon{display:grid;place-items:center}
.scene-icon img{width:96px;height:96px;border-radius:22%;box-shadow:0 14px 30px -12px rgba(0,0,0,.6)}
.plate-tapescript{background:#1b1f27;color:#f1ece4;--k:#f2a66f;--glow:rgba(242,166,111,.45)}
.plate-tapescript .plate-tag{color:#f2a66f}
.plate-tapescript .scene{background:#242a35}
.plate-spokenpost{background:#fff3c4;color:#2b2410;--k:#8a5a00;--glow:rgba(240,190,60,.5);border-radius:10px}
.plate-spokenpost .scene{background:#f6dd7a}
.plate-spokenpost .plate-tag{color:#6b4700}
.plate-gapfill{background:#e9f0ea;color:#1c2a22;--k:#2d6a4f;--glow:rgba(70,150,110,.45);border-radius:12px}
.plate-gapfill .plate-tag{color:#2d6a4f}
.scene-gapfill{background:#d6e4da;display:flex;flex-direction:column;justify-content:center;gap:.5rem;padding:1.2rem 1.6rem}
.gf-block{display:block;padding:.35rem .7rem;border-radius:7px;font:600 .78rem/1.3 var(--sans)}
.gf-meet{background:#b9c8bf;color:#1c2a22}
.gf-task{background:#2d6a4f;color:#fff;padding-block:.75rem}
.gf-b{width:60%}