/* QuirkScience site. Sticker-pop: cream paper, ink outlines, flat palette, hard block shadows. Mobile first (390 px). */
@font-face{font-family:'Bricolage Grotesque';font-weight:800;font-display:swap;src:url(/assets/fonts/bricolage-grotesque-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Rubik';font-weight:400;font-display:swap;src:url(/assets/fonts/rubik-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Rubik';font-weight:700;font-display:swap;src:url(/assets/fonts/rubik-latin-700-normal.woff2) format('woff2')}
/* canvas-only faces (the rigs letter belts, badges and the depth tape with these); loaded by script before drawing */
@font-face{font-family:'Anton';font-weight:400;font-display:block;src:url(/assets/fonts/anton-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo Black';font-weight:400;font-display:block;src:url(/assets/fonts/archivo-black-latin-400-normal.woff2) format('woff2')}

:root{
  --ink:#14121F; --cream:#FFF4DE; --tomato:#FF4B3E; --sun:#FFC53D; --sky:#7FD8FF; --cobalt:#2F5BFF;
  --mint:#2FE0A8; --grape:#7B3FF2; --bubblegum:#FF5FA8; --tangerine:#FF8A2B;
  --muted:#4A4560; --gut:16px; --max:1180px;
  --display:'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --body:'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 18px/1.55 var(--body);overflow-x:clip}
img,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--tomato)}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--ink);color:var(--cream);padding:10px 14px;border-radius:10px;font-weight:700}
.skip:focus{top:12px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.015em}
p{margin:0 0 14px}
cite{font-style:normal;font-weight:700}

/* ---------- header ---------- */
.top{max-width:var(--max);margin:0 auto;padding:12px var(--gut) 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 18px}
.brand img{height:42px;width:auto}
.nav{display:flex;flex-wrap:wrap;gap:0;width:100%;margin:0 -6px;order:3}
.nav a{flex:0 0 auto;font:700 14px/1 var(--body);text-decoration:none;padding:12px 6px;border-radius:10px;white-space:nowrap}
.nav a:hover{background:var(--sun)}

/* ---------- hero ---------- */
.hero{position:relative;max-width:var(--max);margin:0 auto;padding:0 var(--gut) 48px;display:grid}
.hero-art{position:relative;width:min(66vw,262px);aspect-ratio:1;margin:-4px auto -8px;touch-action:manipulation}
.hero-art img,.hero-art canvas{position:absolute;inset:0;width:100%;height:100%}
.qeye-still{padding:13%}
.hero h1{font-size:clamp(40px,11vw,92px);line-height:.98;margin:0 0 16px}
.lede{max-width:34em}
.cadence{display:inline-flex;flex-direction:column;gap:0;font-size:16px;line-height:1.3;font-weight:700;background:var(--sun);border:3px solid var(--ink);border-radius:12px;padding:6px 12px;box-shadow:3px 4px 0 var(--ink);transform:rotate(-1.5deg);margin:4px 0 0}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.actions .btn{flex:1 1 auto}
.hero-fly{position:absolute;top:0;bottom:0;left:50%;width:100vw;height:100%;margin-left:-50vw;pointer-events:none;z-index:3}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:12px 20px;font:700 18px/1.1 var(--body);color:var(--ink);background:var(--cream);border:3px solid var(--ink);border-radius:14px;box-shadow:4px 5px 0 var(--ink);text-decoration:none;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 7px 0 var(--ink);text-decoration:none}
.btn:active{transform:translate(3px,4px);box-shadow:1px 1px 0 var(--ink)}
.btn-red{background:var(--tomato)}

/* ---------- sections ---------- */
.sec{padding:56px 0 64px;position:relative}
.h2{font-size:clamp(38px,9.5vw,68px);line-height:1;margin:0 0 18px;text-shadow:3px 3px 0 var(--accent,var(--tomato))}
.h2-tomato{--accent:var(--tomato)} .h2-cobalt{--accent:var(--sky)} .h2-mint{--accent:var(--mint)} .h2-sun{--accent:var(--sun)}
.h3{font-size:26px;line-height:1.1;margin:0}
.sec-lede{max-width:36em}

/* video buttons: click to play, nothing from YouTube loads before that */
.yt{position:relative;display:block;width:100%;padding:6px;margin:0;border:3px solid var(--ink);border-radius:22px;background:var(--cream);box-shadow:5px 6px 0 var(--ink);cursor:pointer;color:inherit;font:inherit;transition:transform .15s,box-shadow .15s}
.yt img{width:100%;height:100%;object-fit:cover;border-radius:15px;background:#2a2640}
.yt:hover{transform:translate(-2px,-3px) rotate(0deg);box-shadow:7px 9px 0 var(--ink)}
.yt:active{transform:translate(2px,3px);box-shadow:2px 2px 0 var(--ink)}
.play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:var(--tomato);border:3px solid var(--ink);box-shadow:3px 4px 0 var(--ink);transition:transform .15s}
.play::after{content:"";position:absolute;left:25px;top:18px;border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent var(--ink)}
.yt:hover .play{transform:scale(1.08) rotate(-6deg)}
.frame{position:relative;width:100%;border:3px solid var(--ink);border-radius:22px;padding:6px;background:var(--ink);box-shadow:5px 6px 0 var(--ink)}
.frame iframe{display:block;width:100%;height:100%;border:0;border-radius:15px}

.feature{display:grid;gap:20px;margin:26px 0 44px}
.feature .yt,.feature .frame{aspect-ratio:16/9;height:auto}
.kicker{font-weight:700;color:var(--muted);margin:0 0 6px}
.feature h3{font-size:clamp(26px,6.4vw,40px);line-height:1.05;margin:0 0 12px}

.shelf-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:6px}
.shelf-nav{display:none;gap:10px}
.shelf-btn{width:48px;height:48px;border:3px solid var(--ink);border-radius:50%;background:var(--sun);box-shadow:3px 4px 0 var(--ink);cursor:pointer;position:relative;padding:0}
.shelf-btn:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--ink)}
.arrow{position:absolute;left:50%;top:50%;width:13px;height:13px;margin:-7px 0 0 -9px;border-top:4px solid var(--ink);border-right:4px solid var(--ink);transform:rotate(45deg)}
.arrow-l{transform:rotate(-135deg);margin-left:-4px}
.shorts{list-style:none;margin:0 calc(-1 * var(--gut));padding:14px var(--gut) 26px;display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
.shorts li{flex:0 0 auto;width:min(46vw,190px);scroll-snap-align:start}
.shorts .yt,.shorts .frame{aspect-ratio:9/16;height:auto}
.shorts .yt{transform:rotate(var(--r,-1.2deg))}
.shorts li:nth-child(2n) .yt{--r:1deg} .shorts li:nth-child(3n) .yt{--r:-.4deg}
.short-title{font:700 16px/1.3 var(--body);margin:14px 2px 0}
.short-note{display:inline-block;font:700 13px/1 var(--body);margin:8px 2px 0;padding:5px 8px;border:2px solid var(--ink);border-radius:8px;background:var(--sun)}
.more{display:flex;flex-wrap:wrap;gap:8px 22px;font-weight:700;margin:4px 0 0}

/* ---------- cast ---------- */
.sec-cast{background:var(--sun);border-block:4px solid var(--ink);isolation:isolate}
.sec-cast::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(circle,rgba(255,138,43,.75) 0 2.6px,transparent 3px);background-size:14px 14px;-webkit-mask-image:linear-gradient(160deg,#000 0,transparent 42%);mask-image:linear-gradient(160deg,#000 0,transparent 42%)}
.cast{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
.card{background:var(--cream);border:3px solid var(--ink);border-radius:20px;padding:6px 6px 14px;box-shadow:5px 6px 0 var(--ink);transform:rotate(var(--r,-1deg));transition:transform .18s,box-shadow .18s}
.card:nth-child(2n){--r:1.1deg} .card:nth-child(3n){--r:-.5deg} .card:nth-child(5n){--r:.6deg}
.card:hover{transform:rotate(0) translateY(-3px);box-shadow:7px 9px 0 var(--ink)}
.stage{display:block;width:100%;aspect-ratio:4/5;padding:0;margin:0;border:2.5px solid var(--ink);border-radius:14px;overflow:hidden;cursor:pointer;background:var(--bg,var(--sky));touch-action:manipulation}
.stage canvas{width:100%;height:100%}
.card[data-char=rocket]{--bg:var(--sky)} .card[data-char=sun]{--bg:var(--cobalt)} .card[data-char=gravity]{--bg:var(--mint)}
.card[data-char=moon]{--bg:#1D2766} .card[data-char=pressure]{--bg:#1C4FA0} .card[data-char=snailfish]{--bg:#26307A}
.card[data-char=everest]{--bg:var(--bubblegum)} .card[data-char=bathysphere]{--bg:#2BB8C9}
.card-name{font-size:21px;line-height:1.05;margin:12px 6px 6px}
.card-line{font-size:15px;line-height:1.4;margin:0 6px}
.card-seen{font-size:13px;line-height:1.35;color:var(--muted);margin:8px 6px 0}

/* ---------- season 2 dive ---------- */
.dive{position:relative;background:linear-gradient(#2BB8C9,#0E7E8E 12%,#1C4FA0 30%,#26307A 55%,#0C1838 80%);border-bottom:4px solid var(--ink)}
.dive-canvas{position:sticky;top:0;width:100%;height:100vh;height:100lvh;display:none}
.js .dive-canvas{display:block}
.js .dive-track{margin-top:-100vh;margin-top:-100lvh}
.dive-track{position:relative;display:flex;flex-direction:column;gap:50vh;padding:18vh var(--gut) 44vh 80px}
.stop{position:relative;width:100%;max-width:420px;background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:18px;padding:14px 16px 4px;box-shadow:5px 6px 0 var(--ink)}
.stop p{font-size:17px;line-height:1.45}
.stop-right{align-self:flex-end}
.stop-intro{max-width:520px;padding:18px 18px 6px}
.stop-intro .h2{--accent:var(--sky);font-size:clamp(34px,8.6vw,56px)}
.stop-depth{font:800 32px/1 var(--display);margin:0 0 8px!important}
.stop-src{font-size:14px!important;color:var(--muted)}
.film{max-width:440px;background:var(--fc,var(--tomato));padding:16px 18px 8px;transform:rotate(-1deg)}
.film:nth-of-type(2n){transform:rotate(1deg)}
.film .kicker{color:var(--ink)}
.film h3{font-size:clamp(26px,6.6vw,36px);line-height:1.05;margin:0 0 10px}
.film .yt,.film .frame{aspect-ratio:16/9;height:auto;margin:6px 0 14px}

/* ---------- teachers ---------- */
.teach{display:grid;gap:26px;align-items:center}
.teach-text{max-width:36em}
.mailbox{display:inline-flex;flex-direction:column;gap:2px;margin-top:8px;padding:12px 16px;background:var(--mint);border:3px solid var(--ink);border-radius:16px;box-shadow:4px 5px 0 var(--ink);transform:rotate(-1deg)}
.mailbox span{font-weight:700;font-size:15px}
.mailbox a{font:800 clamp(20px,5.6vw,26px)/1.15 var(--display);word-break:break-word}
.teach-art{margin:0;width:100%;max-width:520px;justify-self:center}
.teach-stage{aspect-ratio:4/3;border:3px solid var(--ink);border-radius:20px;overflow:hidden;background:#1D2766;box-shadow:5px 6px 0 var(--ink);transform:rotate(1deg)}
.teach-stage canvas{width:100%;height:100%}
.teach-art figcaption{font-size:14px;color:var(--muted);margin:14px 4px 0}
.fc-tomato{--fc:var(--tomato)} .fc-bubblegum{--fc:var(--bubblegum)} .fc-mint{--fc:var(--mint)} .fc-sun{--fc:var(--sun)} .fc-sky{--fc:var(--sky)}

/* ---------- work with us ---------- */
.sec-work{background:var(--sky);border-block:4px solid var(--ink)}
.bignum{position:relative;display:grid;gap:4px;max-width:640px;background:var(--cream);border:3px solid var(--ink);border-radius:22px;padding:20px 18px 10px;box-shadow:6px 7px 0 var(--ink);margin:84px 0 28px;overflow:visible}
.bignum b{display:block;font:800 clamp(64px,19vw,132px)/.9 var(--display);letter-spacing:-.03em}
.bignum p{font-size:19px;margin:0 0 12px;max-width:22em}
.sunpeek{position:absolute;right:-6px;top:-104px;width:160px;height:160px;pointer-events:none}
.facts{max-width:40em}
.facts strong{font-family:var(--display);font-weight:800;font-size:1.15em}
.small{font-size:15px;color:var(--muted)}
.work-cta{font-size:20px;font-weight:700;max-width:30em;margin-top:24px}
.work-cta a{display:inline-block;font:800 clamp(22px,6vw,30px)/1.2 var(--display)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--cream);padding:40px var(--gut) 48px;text-align:center}
.foot-mark{width:110px;height:110px;margin:0 auto 6px}
.foot-mark canvas{width:100%;height:100%}
.foot-line{font:800 22px/1.2 var(--display);margin:0 0 16px}
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;margin-bottom:12px}
.foot-nav a{padding:10px 10px;font-weight:700}
.foot-small{font-size:14px;opacity:.8}

/* ---------- plain pages (privacy, 404) ---------- */
.page{max-width:720px;margin:0 auto;padding:28px var(--gut) 72px}
.page h1{font-size:clamp(40px,10vw,64px);line-height:1;margin:16px 0 22px;text-shadow:3px 3px 0 var(--sky)}
.page h2{font-size:24px;margin:30px 0 8px}

/* ---------- wider screens ---------- */
@media (min-width:700px){
  :root{--gut:28px}
  .shelf-nav{display:flex}
  .shorts li{width:200px}
  .nav{width:auto;margin:0 0 0 auto;order:0}
  .nav a{font-size:15px;padding:12px 10px}
  .top{padding-top:18px}
  .brand img{height:48px}
}
@media (min-width:760px){
  .cast{grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 22px}
  .card-name{font-size:23px}
  .dive-track{padding-left:120px;padding-right:48px;gap:64vh}
  .stop{max-width:440px}
  .stop-right{margin-right:4%}
}
@media (min-width:900px){
  .hero{grid-template-columns:1.12fr .88fr;align-items:center;gap:24px;padding-top:24px;padding-bottom:72px}
  .hero-art{order:2;width:100%;max-width:520px;margin:0}
  .hero h1{font-size:clamp(50px,4.8vw,74px)}
  .lede{font-size:20px}
  .cadence{flex-direction:row;gap:0 .3em}
  .feature{grid-template-columns:1.5fr 1fr;align-items:center;gap:36px}
  .teach{grid-template-columns:1fr 1fr;gap:48px}
  .sec{padding:84px 0 92px}
  .bignum{padding:26px 28px 14px}
  .sunpeek{width:190px;height:190px;top:-120px;right:-30px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
.page-404{text-align:center;padding-top:12vh}
.page-404 img{margin:0 auto}

/* ---------- fix round 1 ---------- */
.motion-btn{font:700 14px/1 var(--body);color:var(--ink);background:var(--cream);border:2.5px solid var(--ink);border-radius:10px;padding:9px 11px;box-shadow:2px 3px 0 var(--ink);cursor:pointer}
.motion-btn.is-paused{background:var(--sun)}
.motion-btn:active{transform:translate(2px,3px);box-shadow:none}
.foot .motion-btn{margin:6px auto 14px;display:block;background:var(--ink);color:var(--cream);border-color:var(--cream);box-shadow:2px 3px 0 var(--cream)}
.foot .motion-btn[hidden],.motion-btn[hidden]{display:none}
.short-title a,.card-seen a,.feature h3 a{text-decoration:none}
.short-title a:hover,.card-seen a:hover,.feature h3 a:hover{text-decoration:underline}
.short-meta{font:700 13px/1 var(--body);color:var(--muted);margin:8px 2px 0}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:40px}
.cta-row p{margin:0;font-weight:700;font-size:20px}
.dive-end{position:relative;align-self:center;text-align:center;max-width:420px;background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:18px;padding:18px 18px 20px;box-shadow:5px 6px 0 var(--ink)}
.dive-end p{font:800 22px/1.2 var(--display);margin:0 0 14px}
.arrow-link{font-weight:700}
.arrow-link::after{content:" \2192"}
.work{display:grid;gap:8px 48px}
.work .h2{grid-column:1/-1}
.top3{margin:0 0 22px}
.top3 .h3{font-size:20px;margin-bottom:8px}
.top3 ol{margin:0;padding-left:1.4em}
.top3 li{margin:0 0 6px;font-size:17px}
.top3 li span{font-weight:700;white-space:nowrap}
.formats{margin:10px 0 18px;padding-left:1.2em}
.formats li{margin:0 0 8px;font-size:18px}
.who{font-weight:700;margin-top:18px}
.foot-sub{margin:4px auto 18px}
.foot-who{font-size:15px;margin:0 0 6px}
.page-sources .src-film{margin:34px 0 0;padding-top:4px;border-top:3px solid var(--ink)}
.page-sources h2 a{text-decoration:none}
.page-sources .src-meta{font:700 14px/1 var(--body);color:var(--muted)}
.src-list{padding-left:1.2em}
.src-list li{margin:0 0 14px}
.src-link{display:block;font-size:15px;color:var(--muted);margin-top:2px}
.src-note{color:var(--muted)}
@media (min-width:900px){
  .work{grid-template-columns:1.1fr .9fr;align-items:start}
  .work-offer{padding-top:84px}
}
@media (max-width:699px){
  .hero-art{width:min(46vw,178px);margin:-6px auto -4px}
  .hero h1{font-size:clamp(34px,9.6vw,44px);margin-bottom:12px}
  .lede{margin-bottom:12px}
  .actions{margin-top:16px}
}

/* film pages and hubs (written by tools/update-data.py) */
.bignum .bignum-avp{font-size:17px;color:var(--muted)}
.page-film h1,.page-hub h1{font-size:clamp(34px,8.4vw,54px);line-height:1.04;margin:14px 0 20px}
.page-film h2{margin:38px 0 10px}
.page-film h3{font-size:20px;margin:22px 0 8px}
.watch{margin:6px 0 0}
.watch .yt,.watch .frame{aspect-ratio:16/9;height:auto}
.watch.is-short{max-width:300px;margin-inline:auto}
.watch.is-short .yt,.watch.is-short .frame{aspect-ratio:9/16}
.watch-alt{text-align:center;font-weight:700;margin:16px 0 18px}
.film-meta{font:700 15px/1.5 var(--body);color:var(--muted);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);padding:10px 0;margin:0 0 6px}
.film-meta a{color:var(--ink)}
.nums{width:100%;border-collapse:collapse;margin:6px 0 4px;font-size:16px;line-height:1.4}
.nums th,.nums td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:2px solid var(--ink)}
.nums thead th{font:700 13px/1.2 var(--body);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-bottom-width:3px}
.nums tbody th{font-weight:700}
.nums-src{font-size:15px;color:var(--muted)}
.nums-src a{color:var(--muted)}
.simple{padding-left:1.2em}
.simple li{margin:0 0 10px}
.teach-facts{font-weight:400}
.ask{padding-left:1.3em}
.ask li{margin:0 0 18px}
.ask p{margin:0 0 8px}
.page-film summary{display:inline-block;cursor:pointer;font:700 15px/1.2 var(--body);padding:8px 16px;border:3px solid var(--ink);border-radius:999px;background:var(--sun);box-shadow:2px 3px 0 var(--ink)}
.page-film summary::-webkit-details-marker{display:none}
.page-film details[open]>summary{margin-bottom:10px;background:var(--sky)}
.script p{margin:0 0 8px}
.next{list-style:none;padding:0;margin:4px 0 0}
.next li{padding:12px 0;border-bottom:2px solid var(--ink)}
.next li:last-child{border-bottom:0}
.next-label{display:block;font:700 13px/1.3 var(--body);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.next a{font-weight:700}
.next-time{color:var(--muted);font-size:15px;white-space:nowrap}
.lede-sub{font-size:20px;max-width:34em}
.film-list{list-style:none;padding:0;margin:12px 0 30px;display:grid;gap:16px}
.film-link{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:center;text-decoration:none;padding:8px 12px 8px 8px;border:3px solid var(--ink);border-radius:18px;background:var(--cream);box-shadow:4px 5px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.film-link:hover{transform:translate(-2px,-3px);box-shadow:6px 8px 0 var(--ink)}
.is-long .film-link{grid-template-columns:132px 1fr}
.film-thumb img{display:block;width:100%;height:auto;border:2px solid var(--ink);border-radius:10px;background:#2a2640}
.film-name{display:block;font:800 19px/1.15 var(--display)}
.film-row-meta{display:block;font:700 13px/1.4 var(--body);color:var(--muted);margin-top:6px}
.film-row-meta span{white-space:nowrap}
.top3 .small{margin:8px 0 0}
.page-hub{max-width:1060px}
.coming{list-style:none;padding:0;margin:0 0 26px}
.coming li{padding:10px 0;border-bottom:2px solid var(--ink)}
.coming span{display:block;font-size:15px;color:var(--muted);font-weight:700}
@media (max-width:599px){
  .nums thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nums,.nums tbody,.nums tr,.nums th,.nums td{display:block}
  .nums tr{padding:12px 0;border-bottom:2px solid var(--ink)}
  .nums th,.nums td{border:0;padding:0}
  .nums td{margin-top:3px}
}
@media (min-width:700px){
  .film-list{grid-template-columns:1fr 1fr}
  .film-link{grid-template-columns:88px 1fr}
  .is-long .film-link{grid-template-columns:150px 1fr}
  .watch.is-short{max-width:340px}
}
@media (min-width:1000px){
  .page-hub .film-list{grid-template-columns:repeat(3,1fr)}
}
.nav-x{display:none}
.foot-line a{text-decoration:none}
.foot-line a:hover{text-decoration:underline}
@media (min-width:700px){ .nav-x{display:inline} }

/* home Work with us card (no audience numbers on the site) */
.pitch{padding:26px 22px 16px}
.pitch .pitch-lead{font:800 clamp(24px,5.8vw,34px)/1.12 var(--display);letter-spacing:-.01em;max-width:none;margin:0 0 14px}
.pitch p{max-width:none}

/* /about/ (written by tools/update-data.py from data/about.json) */
.page-about{max-width:1060px}
.page-about>section{margin:64px 0 0}
.page-about h2{font-size:clamp(28px,6.4vw,42px);line-height:1.05;margin:0 0 16px}
.about-hero h1{font-size:clamp(48px,13vw,92px);line-height:.95;margin:18px 0 20px;text-shadow:4px 4px 0 var(--sky)}
.about-lede{font-size:clamp(20px,4.8vw,25px);line-height:1.45;max-width:32em}
.about-story p{max-width:38em}
.about-count{display:inline-block;font:800 19px/1.25 var(--display);background:var(--sun);border:3px solid var(--ink);border-radius:14px;padding:8px 16px;box-shadow:3px 4px 0 var(--ink);transform:rotate(-1.5deg);margin:8px 0 0}
.die,.mv-card{--edge:#fff;border:3px solid var(--ink);border-radius:26px;box-shadow:0 0 0 8px var(--edge),0 0 0 11px var(--ink),8px 10px 0 11px var(--ink);transform:rotate(var(--r,0deg));transition:transform .2s}
.mv{display:grid;gap:44px;padding:12px 12px 0}
.mv-card{padding:22px 24px 28px}
.mv-mission{background:var(--sun);--r:-1.5deg}
.mv-vision{background:var(--sky);--r:1.2deg}
.mv-card h2{font:700 14px/1 var(--body);text-transform:uppercase;letter-spacing:.12em;margin:0 0 12px}
.mv-card p{font:800 clamp(28px,6.6vw,44px)/1.08 var(--display);letter-spacing:-.015em;margin:0}
.toward{padding-left:0;list-style:none;counter-reset:tw;max-width:40em}
.toward li{counter-increment:tw;position:relative;padding:12px 0 12px 54px;border-bottom:2px solid var(--ink);font-size:19px}
.toward li::before{content:counter(tw);position:absolute;left:0;top:10px;width:38px;height:38px;border:3px solid var(--ink);border-radius:50%;background:var(--mint);font:800 18px/32px var(--display);text-align:center}
.principles{list-style:none;padding:12px;margin:0;display:grid;gap:40px 34px}
.die{padding:22px 22px 18px}
.die:hover{transform:rotate(0deg) translateY(-3px)}
.die h3{font-size:23px;line-height:1.1;margin:0 0 10px}
.die p{font-size:17px;margin:0}
.c-sun{background:var(--sun)}.c-sky{background:var(--sky)}.c-mint{background:var(--mint)}.c-bubblegum{background:var(--bubblegum)}
.c-tangerine{background:var(--tangerine)}.c-tomato{background:var(--tomato)}.c-cream{background:var(--cream)}
.steps{list-style:none;padding:0;margin:0;counter-reset:st}
.steps li{counter-increment:st;position:relative;padding:4px 0 18px 66px;margin:0 0 6px}
.steps li::before{content:counter(st);position:absolute;left:0;top:0;width:48px;height:48px;border:3px solid var(--ink);border-radius:50%;background:var(--sun);box-shadow:2px 3px 0 var(--ink);font:800 22px/42px var(--display);text-align:center}
.steps h3{font-size:22px;margin:0 0 6px}
.steps p{margin:0}
.about-why p{font:800 clamp(22px,5.2vw,30px)/1.25 var(--display);letter-spacing:-.01em;max-width:30em}
.page-about>.about-work{background:var(--cobalt);color:var(--cream);border:3px solid var(--ink);border-radius:28px;padding:30px 24px 26px;box-shadow:6px 8px 0 var(--ink);text-align:center;margin:72px 0 0}
.about-work h2{color:var(--cream)}
.about-work p{font-size:20px;margin:0}
.about-work a{color:var(--cream);font-weight:700}
@media (min-width:700px){
  .mv{grid-template-columns:1fr 1fr;gap:40px}
  .principles{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
}
@media (min-width:1000px){
  .principles{grid-template-columns:repeat(3,1fr)}
}
.principles li:nth-child(7n+1){--r:-2deg}.principles li:nth-child(7n+2){--r:1.5deg}.principles li:nth-child(7n+3){--r:-1deg}
.principles li:nth-child(7n+4){--r:2deg}.principles li:nth-child(7n+5){--r:-1.5deg}.principles li:nth-child(7n+6){--r:1deg}.principles li:nth-child(7n+7){--r:-.5deg}
/* /about/ v2: eyebrow, pull quote, "Draw the Sun" (src/js/about.js), step note, viewer band */
.eyebrow{display:inline-block;font:700 14px/1 var(--body);text-transform:uppercase;letter-spacing:.12em;background:var(--mint);border:2px solid var(--ink);border-radius:999px;padding:7px 12px;margin:18px 0 0;transform:rotate(-2deg)}
.about-hero h1{max-width:11em}
.about-believe h2{font:700 14px/1 var(--body);text-transform:uppercase;letter-spacing:.12em;margin:0 0 10px}
.pull{margin:0;padding:6px 0 6px 22px;border-left:8px solid var(--tomato)}
.pull p{font:800 clamp(28px,7vw,52px)/1.05 var(--display);letter-spacing:-.02em;margin:0;max-width:16em}
.steps{max-width:46em}
.draw-sun{margin:18px 0 6px -66px;max-width:420px}
.draw-stage{position:relative;width:100%;aspect-ratio:4/5;border:3px solid var(--ink);border-radius:22px;overflow:hidden;background:var(--cobalt);box-shadow:6px 7px 0 var(--ink)}
.draw-stage canvas,.draw-still{display:block;width:100%;height:100%}
.draw-stage canvas[hidden]{display:none}
.draw-controls{display:grid;gap:10px;margin:16px 0 0}
.draw-controls[hidden]{display:none}
.draw-label{font:800 20px/1.1 var(--display)}
.draw-controls input[type=range]{width:100%;height:36px;margin:0;accent-color:var(--tomato);cursor:pointer}
.draw-ink{display:inline-flex;align-items:center;gap:10px;font-weight:700;cursor:pointer;width:max-content}
.draw-ink input{width:22px;height:22px;accent-color:var(--cobalt);margin:0}
.draw-chip{justify-self:start;font:700 15px/1.3 var(--body);background:var(--sun);border:3px solid var(--ink);border-radius:14px;padding:8px 12px;box-shadow:3px 4px 0 var(--ink);transform:rotate(-1deg);margin:4px 0 0}
.draw-chip b{font-family:var(--display);font-weight:800;font-variant-numeric:tabular-nums}
.draw-controls .motion-btn{justify-self:start}
.step-note{margin:14px 0 0;padding:12px 14px;border:2px dashed var(--ink);border-radius:14px;background:#fff;font-size:16px}
.page-about>.about-viewer{background:var(--sun);border:3px solid var(--ink);border-radius:28px;padding:24px 22px;box-shadow:6px 8px 0 var(--ink);margin:64px 0 0}
.about-viewer p{font:800 clamp(20px,4.6vw,26px)/1.3 var(--display);margin:0}
@media (min-width:700px){ .draw-sun{margin-left:0} }