:root{--paper:#fff;--panel:#f1f4f7;--ink:#0b0d10;--ink-2:#4f5966;--rule:#cfd7df;--amber:#ffd23f;--red:#e3261f;--teal:#0fa892;--blue:#3b82f6;
--display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;--body:"Literata",Georgia,serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#000;--panel:#11161c;--ink:#fff;--ink-2:#a3adb9;--rule:#27313d;--teal:#19e6c8;--red:#ff2e2e;--blue:#5b9bff;color-scheme:dark}}
:root[data-theme="dark"]{--paper:#000;--panel:#11161c;--ink:#fff;--ink-2:#a3adb9;--rule:#27313d;--teal:#19e6c8;--red:#ff2e2e;--blue:#5b9bff;color-scheme:dark}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}a:hover{color:var(--red)}
img{max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px))}
main.wrap>*{min-width:0}main.wrap{display:grid;gap:44px;padding-top:18px;padding-bottom:64px}

/* top bar */
.top{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:2px solid var(--ink);display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;padding:10px max(16px,env(safe-area-inset-left,0px));padding-top:max(10px,env(safe-area-inset-top,0px))}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-family:var(--display);font-weight:900;font-size:24px;letter-spacing:.02em;text-transform:uppercase}
.brand img{display:block;width:28px;height:28px}
.top nav{display:flex;flex-wrap:wrap;gap:4px 16px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.top nav a{text-decoration:none;color:var(--ink-2);padding:3px 0;border-bottom:2px solid transparent}
.top nav a[aria-current]{color:var(--ink);border-bottom-color:var(--amber)}
@media (max-width:760px){.top{position:static}.top nav{gap:2px 12px;font-size:11px}}
.crumbs{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-2)}
.crumbs a{text-decoration:none}

/* type */
.eyebrow,.meta{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:0}
h1{font-family:var(--display);font-weight:900;font-size:clamp(42px,11vw,128px);overflow-wrap:anywhere;line-height:.84;margin:6px 0 10px;text-transform:uppercase;text-wrap:balance}
h1.ft{font-size:clamp(40px,7vw,88px)}
h1 .stripe{display:inline-block;width:.42em;height:.62em;margin-left:.08em;background:repeating-linear-gradient(-45deg,var(--amber) 0 8px,#0b0d10 8px 16px)}
h2{font-family:var(--display);font-weight:800;font-size:clamp(30px,4.4vw,48px);line-height:.95;margin:0;text-transform:uppercase;text-wrap:balance}
h3{font-family:var(--display);font-weight:800;font-size:26px;line-height:1;text-transform:uppercase;margin:0}
.lede{margin:0;max-width:70ch;font-size:18px;color:var(--ink-2);text-wrap:pretty}
.hero{display:grid;gap:4px}
.sec{display:grid;gap:14px}
.sechead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;border-top:3px solid var(--ink);padding-top:10px}
.sechead p{margin:0;font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.btn{display:inline-block;font-family:var(--mono);font-size:13px;text-decoration:none;background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);padding:8px 14px;margin:4px 6px 0 0}
.btn.ghost{background:transparent;color:var(--ink)}.btn:hover{color:var(--amber)}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,272px),1fr));gap:22px 18px}
.grid.eps{grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr))}
.grid.one{grid-template-columns:minmax(0,820px)}
.card{display:grid;gap:5px;align-content:start;text-decoration:none;color:inherit;min-width:0}
.card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1.5px solid var(--ink);background:var(--panel)}
.card b{font-family:var(--display);font-weight:800;font-size:23px;line-height:1.02;text-transform:uppercase}
.card.big b{font-size:28px}
.card .line{font-size:14.5px;line-height:1.42;color:var(--ink-2)}
.card .meta{border-left:6px solid var(--c,var(--amber));padding-left:7px}
.card:hover b{color:var(--red)}
.progs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr));gap:26px 20px}
.prog{display:grid;gap:6px;text-decoration:none;color:inherit;border-top:8px solid var(--c);padding-top:10px}
.prog img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1.5px solid var(--ink)}
.prog b{font-family:var(--display);font-weight:900;font-size:clamp(34px,5vw,54px);line-height:.9;text-transform:uppercase}
.prog .line{color:var(--ink-2);max-width:62ch}
.prog.wide{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:8px 22px;align-items:start}
.prog.wide img{grid-row:1/4}
@media (max-width:760px){.prog.wide{grid-template-columns:1fr}.prog.wide img{grid-row:auto}}

/* family band and characters */
.family-band{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px 34px;align-items:center;background:var(--panel);border:2px solid var(--ink);padding:18px}
.family-band .fam{background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(59,130,246,.12) 31px 32px),repeating-linear-gradient(90deg,transparent 0 31px,rgba(59,130,246,.12) 31px 32px),#f7f9fb;border:1.5px solid var(--ink)}
.family-band .fam img{display:block;width:100%}
.family-band h2{margin:6px 0 8px}.family-band p{margin:0 0 8px;max-width:58ch}
@media (max-width:860px){.family-band{grid-template-columns:1fr}}
.chars{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:24px 18px}
.char{min-width:0;display:grid;gap:6px;align-content:start;border-top:6px solid var(--c);padding-top:8px}
.char .fig{background:repeating-linear-gradient(0deg,transparent 0 23px,rgba(59,130,246,.10) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,rgba(59,130,246,.10) 23px 24px),#f7f9fb;border:1.5px solid var(--ink);display:flex;align-items:flex-end;justify-content:center;aspect-ratio:3/4;overflow:hidden;padding:10px}
.char .fig{min-width:0}.char .fig img{max-height:100%;max-width:100%;min-width:0;width:auto;height:auto;object-fit:contain}
.chars:has(.char.turn){grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr))}
.char.turn .fig{aspect-ratio:2.6/1}
.char p{margin:0;font-size:14.5px;line-height:1.45}.char .spec{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.char .in{font-size:13px;color:var(--ink-2)}
.minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}
.mini{display:grid;gap:4px;text-decoration:none;font-family:var(--mono);font-size:11px;text-align:center}
.mini img{width:100%;aspect-ratio:3/4;object-fit:contain;background:#f7f9fb;border:1.5px solid var(--ink);padding:6px}

/* bay, steps */
.bay p{max-width:72ch;margin:0 0 8px}.bay ul{margin:0;padding-left:20px;max-width:80ch}.bay li{margin:4px 0}
.steps{margin:0;padding-left:22px;max-width:84ch}.steps li{margin:6px 0}

/* process */
.strips{display:grid;gap:12px}
.strip{display:grid;gap:5px;text-decoration:none;color:inherit}
.strip .imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.strip img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--rule);background:var(--panel)}
.strip:hover .meta{color:var(--red)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:18px}
.gallery figure{margin:0;display:grid;gap:5px}
.gallery img{display:block;width:100%;height:auto;border:1px solid var(--rule);background:var(--panel)}
.gallery figcaption{font-size:14px;line-height:1.35}.gallery figcaption span{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-2)}

/* film page */
.filmpage{display:grid;gap:12px}
.filmpage video,.filmpage .still{display:block;width:100%;background:#000;border:1.5px solid var(--ink);aspect-ratio:16/9}
.logline{font-size:clamp(19px,2.3vw,24px);line-height:1.38;margin:4px 0;max-width:62ch;text-wrap:pretty}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0;margin:0;border-top:2px solid var(--ink)}
.facts div{padding:8px 12px 8px 0;border-bottom:1px solid var(--rule)}
.facts dt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}.facts dd{margin:2px 0 0;font-size:15px}
.note{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
details{border-top:1px solid var(--rule);padding-top:8px}
summary{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);cursor:pointer;padding:4px 0}

/* markdown and docs (kept from the first build) */
.md{max-width:80ch}.md h1{font-size:clamp(32px,5vw,52px)}.md h2{font-size:28px;margin-top:22px}.md h3{font-size:20px;margin-top:16px}
.md table{border-collapse:collapse;width:100%;font-size:14px;margin:10px 0;display:block;overflow-x:auto}
.md th,.md td{border-bottom:1px solid var(--rule);padding:6px 8px;text-align:left;vertical-align:top}
.md th{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.md code,.md pre{font-family:var(--mono);font-size:.88em}.md pre{background:var(--panel);padding:12px;overflow:auto;white-space:pre-wrap}
.md blockquote{margin:0;padding-left:14px;border-left:3px solid var(--red);color:var(--ink-2)}
.doclist{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.doclist li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;padding:9px 0;border-bottom:1px solid var(--rule)}
.doclist .d{font-size:14px;color:var(--ink-2);grid-column:1}.doclist .f{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);grid-row:1/3;grid-column:2;align-self:center}
pre.prompt{font-family:var(--mono);font-size:12.5px;line-height:1.55;background:var(--panel);padding:16px;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}

.foot{border-top:2px solid var(--ink);padding:18px 0 calc(28px + env(safe-area-inset-bottom,0px));font-size:14px;color:var(--ink-2)}
.foot p{margin:0 0 6px;max-width:90ch}

/* case studies */
.caselist{display:grid;gap:0;border-top:1px solid var(--rule)}
.caserow{display:grid;grid-template-columns:56px 1fr 220px;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--rule);text-decoration:none}
.caserow .num{font-family:var(--display);font-weight:900;font-size:40px;line-height:1;color:var(--c)}
.caserow .txt{display:grid;gap:4px;min-width:0}.caserow b{font-family:var(--display);font-weight:800;font-size:24px;line-height:1.05;text-transform:uppercase}
.caserow .q{font-size:17px}.caserow .t{color:var(--ink-2);font-size:15px}.caserow .t em{font-style:normal;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);background:var(--c);padding:1px 5px;margin-right:4px;color:#0b0d10}
.caserow img{width:220px;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--rule);background:var(--panel)}
.caserow:hover b{color:var(--red)}
@media (max-width:720px){.caserow{grid-template-columns:40px 1fr}.caserow .num{font-size:28px}.caserow img{grid-column:2;width:100%}}
.case{display:grid;gap:36px}
.casehero{border-left:6px solid var(--c);padding-left:18px}
.question{font-family:var(--display);font-weight:800;font-size:clamp(26px,4.4vw,44px);line-height:1.05;margin:6px 0 12px;max-width:26ch;text-wrap:balance}
.casemap{display:flex;flex-wrap:wrap;gap:4px}
.casemap a{font-family:var(--mono);font-size:12px;text-decoration:none;padding:5px 7px;border:1px solid var(--rule);border-bottom:4px solid var(--c);min-width:34px;text-align:center}
.casemap a[aria-current]{background:var(--c);color:#0b0d10;font-weight:600}
.casebody{display:grid;gap:36px;max-width:820px}
.block h2,.sheetsteps h2{font-family:var(--display);font-weight:800;font-size:28px;text-transform:uppercase;margin:0 0 12px;line-height:1}
.block ol,.block ul{margin:0;padding-left:1.3em;display:grid;gap:10px;font-size:17px}
.method li::marker{font-family:var(--mono);color:var(--ink-2)}
.teach{background:var(--panel);border-top:6px solid var(--c);padding:22px 24px}
.teach ol li{font-size:18px}.teach ol li::marker{font-family:var(--display);font-weight:900;color:var(--ink)}
.teach .vs{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--rule);color:var(--ink-2)}.teach .vs b{color:var(--ink)}
.fixes{list-style:none;padding:0!important;gap:0!important;border-top:1px solid var(--rule)}
.fixes li{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:16px}
.fixes .pb::before{content:"Problem";display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.fixes .fx::before{content:"Change";display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal)}
@media (max-width:620px){.fixes li{grid-template-columns:1fr;gap:6px}}
.block .note{margin:0 0 12px;color:var(--ink-2)}
.ba{display:grid;align-items:start;grid-template-columns:1fr 1fr;gap:16px}
.ba figure:first-child figcaption::before{content:"First · "}.ba figure:last-child figcaption::before{content:"Last · "}
@media (max-width:620px){.ba{grid-template-columns:1fr}}
.case figure{margin:0;display:grid;gap:5px;min-width:0}
.case figure img{display:block;width:100%;height:auto;border:1px solid var(--rule);background:var(--panel);cursor:zoom-in}
.case figcaption{font-size:14px;line-height:1.35}.case figcaption span{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-2)}
.sheetsteps{display:grid;gap:28px}
.step{display:grid;gap:12px;border-top:1px solid var(--rule);padding-top:14px}
.stephead{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.stephead .sn{font-family:var(--mono);font-size:12px;background:var(--c);color:#0b0d10;padding:2px 7px}
.stephead b{font-size:18px}.stephead>span:last-child{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.stepgrid{display:grid;align-items:start;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:16px}
.step details summary{font-family:var(--mono);font-size:13px;cursor:pointer;padding:8px 0}
.step details[open] summary{margin-bottom:10px}
.carry{border-left:4px solid var(--c);padding-left:16px}.carry p{font-size:18px;margin:0}
.casenav{position:sticky;bottom:0;z-index:5;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:-40px}
.casenav a{background:var(--paper);padding:10px 14px;text-decoration:none;display:grid;gap:2px;min-width:0}
.casenav a.n{text-align:right}.casenav span{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.casenav b{font-family:var(--display);font-weight:800;font-size:19px;text-transform:uppercase;line-height:1.05;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.92);display:grid;grid-template-columns:56px 1fr 56px;grid-template-rows:1fr auto;align-items:center;padding:16px}
.lb[hidden]{display:none}
.lb img{grid-column:2;max-width:100%;max-height:calc(100vh - 90px);margin:auto;display:block}
.lb p{grid-column:1/-1;color:#fff;font-family:var(--mono);font-size:13px;text-align:center;margin:8px 0 0}
.lb button{background:none;border:1px solid #666;color:#fff;font-family:var(--mono);font-size:20px;height:48px;cursor:pointer}
.lb .lbx{position:absolute;top:12px;right:12px;font-size:13px;padding:0 12px;height:36px}

/* ---------------- cameos: the cast around the films */
.card,.chan .shot,.player,.card.try .shot{position:relative}
.cam{position:absolute;z-index:4;top:0;display:block;background-repeat:no-repeat;background-position:0 0;transform:translateY(calc(var(--ay,1) * -100%)) scaleX(var(--fx,1));cursor:pointer;outline-offset:4px}
.cam.run{animation-name:camrun;animation-iteration-count:infinite}
@keyframes camrun{from{background-position-x:0%}to{background-position-x:100%}}
.cam.flip{--fx:-1}.cam.tl{left:5%}.cam.tr{right:5%}
.cam.l{top:100%;right:calc(100% + 6px)}.cam.r{top:100%;left:calc(100% + 6px)}
.cam.f{top:var(--floor);margin-left:calc(var(--cam) * -.2)}
.cam .say{position:absolute;bottom:calc(100% - 4px);left:50%;transform:translateX(-50%) scaleX(var(--fx,1));width:max-content;max-width:210px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:14px;padding:6px 10px;font:600 13px/1.3 var(--body);text-align:left;opacity:0;pointer-events:none;transition:opacity .2s;box-shadow:3px 3px 0 var(--ink)}
.cam .say::after{content:"";position:absolute;top:100%;left:50%;margin-left:-7px;border:7px solid transparent;border-top-color:var(--ink)}
.cam .say.on{opacity:1}
.cam.tr .say,.cam.r .say,.cam.tl .say,.cam.l .say{left:auto;right:-10px;transform:scaleX(var(--fx,1))}
.cam.tr .say::after,.cam.r .say::after,.cam.tl .say::after,.cam.l .say::after{left:auto;right:24px}
.grid.cams{row-gap:92px;padding-top:70px;--cam:clamp(84px,9vw,112px)}
.grid.cams .card .cam .say{max-width:180px}
.tid{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;background:var(--ink);color:var(--paper);padding:1px 6px;margin-right:4px;text-transform:uppercase}
.tid::before{content:"";display:inline-block;width:9px;height:9px;margin-right:5px;vertical-align:-1px;border-radius:50%;background:conic-gradient(var(--amber) 0 25%,#0b0d10 0 50%,var(--amber) 0 75%,#0b0d10 0)}
.more{margin:0;font-family:var(--mono);font-size:13px}

/* the bay: the intro */
.bayhero{position:relative;border:2px solid var(--ink);background:
 linear-gradient(transparent calc(100% - 1px),rgba(59,130,246,.18) 0) 0 0/100% 40px,
 linear-gradient(90deg,transparent calc(100% - 1px),rgba(59,130,246,.18) 0) 0 0/40px 100%,var(--panel);
 overflow:hidden;display:grid;margin-top:6px}
.baycopy{position:relative;z-index:2;padding:26px 26px 0;max-width:760px}
.baycopy h1{margin-top:4px}
.baycopy .lede{color:var(--ink);font-size:clamp(18px,2.2vw,22px)}
.quote{margin:10px 0 14px;font-family:var(--mono);font-size:13px;color:var(--ink-2);border-left:4px solid var(--red);padding-left:10px;max-width:60ch}
.baystage{position:relative;height:calc(var(--cam) * 1.42);--floor:84%;margin-top:4px}
.baystage::before{content:"";position:absolute;left:0;right:0;top:var(--floor);bottom:0;background:repeating-linear-gradient(90deg,rgba(11,13,16,.08) 0 1px,transparent 1px 48px),linear-gradient(#e5eaf0,#dde3ea);border-top:2px solid var(--ink)}
:root[data-theme="dark"] .baystage::before{background:#1a2129}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .baystage::before{background:#1a2129}}
.baystage .rule{position:absolute;left:12px;bottom:calc(100% - var(--floor));width:10px;height:calc(var(--cam) * 1.1);background:repeating-linear-gradient(0deg,var(--ink) 0 2px,transparent 2px 12px);border-right:2px solid var(--ink)}
.crate{position:absolute;top:calc(var(--floor) - var(--cam) * .3);width:calc(var(--cam) * .48);height:calc(var(--cam) * .3);background:#c99a5b;border:2px solid var(--ink);box-shadow:inset 0 0 0 5px #b3864b}
.tgt{position:absolute;width:26px;height:26px;border-radius:50%;border:2px solid #0b0d10;background:conic-gradient(var(--amber) 0 25%,#0b0d10 0 50%,var(--amber) 0 75%,#0b0d10 0);z-index:1}
@media (max-width:640px){.baycopy{padding:18px 16px 0}.tgt{width:18px;height:18px}.baystage{height:calc(var(--cam) * 1.6)}}

/* try it */
.tries{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:84px 18px;padding-top:58px;--cam:clamp(80px,8vw,104px)}
.tries.all{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.card.try .shot{display:block;border:2px solid var(--ink);background:var(--panel)}
.card.try .shot img{border:0;aspect-ratio:16/10;object-fit:cover;object-position:top}
.card.try .go{position:absolute;right:8px;bottom:8px;font-family:var(--mono);font-size:12px;background:var(--amber);color:#0b0d10;border:2px solid #0b0d10;padding:3px 9px}
.card.try:hover .shot{outline:3px solid var(--amber)}
.card.try .meta{border-left:0;padding-left:0}

/* channels */
.chans{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr));gap:76px 26px;padding-top:56px;--cam:clamp(84px,9vw,118px)}
.chan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:end;text-decoration:none;color:inherit;border-bottom:8px solid var(--c);padding-bottom:12px}
.chan .shot{display:block}.chan .shot img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border:1.5px solid var(--ink)}
.chan .txt{display:grid;gap:4px}.chan b{font-family:var(--display);font-weight:900;font-size:clamp(28px,3.6vw,44px);line-height:.92;text-transform:uppercase}
.chan .line{color:var(--ink-2)}.chan .meta{border:0}.chan:hover b{color:var(--red)}
@media (max-width:520px){.chan{grid-template-columns:1fr}}

/* the player: the cast watches with you */
.player{--cam:clamp(92px,15vw,190px);margin:calc(var(--cam) * .5) auto calc(var(--cam) * .3);width:min(100%,940px)}
.player video,.player .still{display:block;width:100%}
.filmpage .player video{border:2px solid var(--ink)}
@media (max-width:1180px){.player .cam.l{top:0;right:auto;left:3%}.player .cam.r{top:0;left:auto;right:3%}.player{margin-top:calc(var(--cam) * 1.02)}}
.instr{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:10px}
.instr li{border:2px solid var(--ink);padding:10px 12px;display:grid;gap:2px;background:var(--panel)}
.instr b{font-family:var(--display);font-weight:800;font-size:22px;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.cam{animation:none!important}}
.cam.f.lo .say{left:-8px;transform:none}.cam.f.hi .say{left:auto;right:-8px;transform:none}
.cam.f.lo .say::after{left:22px}.cam.f.hi .say::after{left:auto;right:22px}
@media (max-width:640px){.tgt{display:none}.cam .say{max-width:170px;font-size:12px}
 .grid.cams,.tries,.chans{row-gap:30px;padding-top:0}
 .grid.cams .card:has(>.cam),.tries .card:has(>.cam),.chan:has(.cam){margin-top:calc(var(--cam) * .64)}}

/* production notes as a guided read */
.notes{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start;border-top:3px solid var(--ink);padding-top:14px}
.guide{position:sticky;top:84px}
.gbox{display:grid;gap:8px}
.gsay{margin:0;background:var(--paper);border:2px solid var(--ink);border-radius:16px;padding:10px 12px;font:600 15px/1.35 var(--body);box-shadow:3px 3px 0 var(--ink);position:relative;min-height:3.2em}
.gsay::after{content:"";position:absolute;top:100%;left:34px;border:9px solid transparent;border-top-color:var(--ink)}
.gsay.pop{animation:pop .25s ease-out}@keyframes pop{from{transform:scale(.94);opacity:.4}to{transform:none;opacity:1}}
.stand{position:relative;height:calc(var(--cam) * 1.12);border-bottom:2px solid var(--ink)}
.cam.gs{top:100%;left:24px;cursor:default}
.ncontent{display:grid;gap:22px;min-width:0;max-width:900px}
.ncontent>.eyebrow{margin-bottom:-10px}
.ntoc{display:flex;flex-wrap:wrap;gap:6px}
.ntoc a{font-family:var(--mono);font-size:12px;text-decoration:none;border:1.5px solid var(--ink);padding:4px 8px}
.ntoc a:hover{background:var(--amber);color:#0b0d10}
.nsec{display:grid;gap:12px;scroll-margin-top:80px;border-left:4px solid transparent;padding-left:14px;margin-left:-18px}
.nsec.cur{border-left-color:var(--amber)}
.nsec h2{font-family:var(--display);font-weight:800;font-size:clamp(26px,3vw,34px);text-transform:uppercase;line-height:1;margin:0}
.nsec p,.nsec li{max-width:72ch}.nsec ul{padding-left:1.2em;margin:0}
.gline{font-family:var(--mono);font-size:13px;color:var(--ink-2);margin:0}
.notes.js .gline{display:none}
.beats{display:grid;gap:14px}
.beat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;align-items:start;border-top:1px solid var(--rule);padding-top:14px}
.beat:not(:has(.pics)){grid-template-columns:1fr}
.beat .pics{display:grid;gap:8px}
.beat .btxt{margin:0;display:grid;gap:8px;font-size:15.5px}
.beat dl.btxt div{display:grid;gap:1px}.beat dt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}.beat dd{margin:0}
.beat .btxt p{margin:0}
.moment{display:grid;gap:4px;text-decoration:none;color:inherit;position:relative}
.moment img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border:1.5px solid var(--ink);background:#000}
.moment:not(.sheet)::before{content:"";position:absolute;left:10px;top:10px;width:30px;height:30px;border-radius:50%;background:var(--amber);border:2px solid #0b0d10;z-index:1}
.moment:not(.sheet)::after{content:"";position:absolute;left:22px;top:19px;border:7px solid transparent;border-left:10px solid #0b0d10;border-right:0;z-index:2}
.moment span{font-size:13.5px;line-height:1.35}.moment b{font-family:var(--mono);font-size:12px;background:var(--ink);color:var(--paper);padding:1px 5px;margin-right:4px}
.moment:hover img{outline:3px solid var(--amber)}
.moment.sheet img{object-fit:contain;background:var(--panel)}
.sheets{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:12px}
.bigtable summary{font-family:var(--mono);font-size:13px;cursor:pointer;padding:6px 0}
.ncontent table{border-collapse:collapse;font-size:14px;display:block;overflow-x:auto}.ncontent td,.ncontent th{border:1px solid var(--rule);padding:5px 8px;vertical-align:top;text-align:left}
@media (max-width:900px){
 .notes{grid-template-columns:1fr;--cam:84px}
 .guide{position:fixed;left:8px;bottom:8px;top:auto;z-index:15;width:min(80vw,340px);pointer-events:none;opacity:0;transform:translateY(20px);transition:.25s}
 .notes.inview .guide{opacity:1;transform:none}
 .gbox{grid-template-columns:auto 1fr;align-items:end}
 .stand{order:-1;width:70px;height:calc(var(--cam) * 1.05);border:0}.cam.gs{left:8px}
 .gsay{font-size:13px;padding:8px 10px;pointer-events:auto}.gsay::after{top:auto;bottom:10px;left:-16px;border-top-color:transparent;border-right-color:var(--ink)}
 .ncontent{padding-bottom:110px}.nsec{margin-left:0;padding-left:10px}
 .beat{grid-template-columns:1fr}}
.nsec.nintro{display:block;border:0;padding:0;margin:0 0 -10px}
.explain{margin:4px 0 0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start;background:var(--panel);border-left:6px solid var(--amber);padding:12px}
.explain .eximgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr));gap:8px}
.explain figcaption{font-size:15px;line-height:1.45}.explain figcaption b{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
@media (max-width:700px){.explain{grid-template-columns:1fr}}