@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/archivo-latin-wdth-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --paper:#EEF1F5;--panel:#E1E6EE;--ink:#0E1424;--slate:#56617A;--rule:#C6CEDB;
  --violet:#5B3DF5;--violet-deep:#4329D6;--deep:#0E1424;--card:#fff;--head-bg:rgba(238,241,245,.94);--cast-a:#d7deea;--cast-b:#c0c9db;--tape:#FFC83D;--tape-ink:#4a3600;
  --gutter:clamp(16px,4vw,48px);--max:1320px;
  --stretch-wide:125%;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 "Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;font-stretch:100%}
img{max-width:100%;height:auto;display:block}
a{color:var(--violet-deep);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--violet)}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--deep);color:#fff;padding:8px 14px;z-index:100}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

h1,h2,h3,h4{font-weight:800;font-stretch:var(--stretch-wide);letter-spacing:-.02em;line-height:1.02;margin:0}
h1{font-size:clamp(2.6rem,7vw,6.2rem);line-height:.95;letter-spacing:-.035em}
h2{font-size:clamp(1.7rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.12}
p{margin:0 0 1em;max-width:62ch}
.lead{font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.4;font-stretch:110%;font-weight:500;max-width:34ch}
.small{font-size:.9rem;color:var(--slate)}
.muted{color:var(--slate)}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:var(--head-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
.mark{white-space:nowrap;font-weight:800;font-stretch:125%;letter-spacing:-.02em;font-size:1.15rem;color:var(--ink);text-decoration:none}
.site-head nav{display:flex;gap:6px}
.site-head nav a{padding:8px 10px;text-decoration:none;color:var(--ink);font-weight:600;font-stretch:112%;border-radius:6px}
.site-head nav a:hover{background:var(--panel)}
.site-head nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--violet)}

/* hero */
.hero{padding:clamp(32px,6vw,80px) 0 clamp(40px,6vw,88px);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(24px,3vw,48px);align-items:end}
.hero h1{font-size:clamp(2.8rem,6.4vw,5.8rem)}
.hero h1{margin:0 0 .35em;margin-left:-.04em}
.hero .lead{margin-bottom:1em}
.hero .sub{max-width:46ch;color:var(--slate)}
.triptych{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.2vw,16px);align-items:end}
.triptych a{display:block;box-shadow:0 18px 40px -22px rgba(14,20,36,.55)}
.triptych a:nth-child(1){margin-bottom:56px}
.triptych a:nth-child(2){margin-bottom:28px}
.triptych img{width:100%;aspect-ratio:2/3;object-fit:cover}
.triptych figcaption{display:none}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.triptych a:nth-child(n){margin-bottom:0}}

/* sections */
section{padding:clamp(48px,7vw,104px) 0}
.band-dark{background:var(--deep);color:#EAEEF6}
.band-dark .muted,.band-dark .small{color:#9AA5BE}
.band-dark a{color:#B9ACFF}
.band-panel{background:var(--panel)}
.sec-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,4vw,64px);align-items:start;margin-bottom:clamp(24px,4vw,48px)}
.sec-head p{margin:0}
@media (max-width:820px){.sec-head{grid-template-columns:1fr}}

/* work rows (home) */
.rows{display:grid;gap:clamp(48px,8vw,112px)}
.row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,4vw,56px);align-items:center}
.row:nth-child(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.row:nth-child(even) .row-img{order:2}
.row-img{display:block;overflow:hidden;background:var(--panel)}
.row-img img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s}
.row-img:hover img{transform:scale(1.025)}
.row h3{margin-bottom:.5em;font-size:clamp(1.5rem,2.8vw,2.3rem)}
.role{font-weight:600;color:var(--ink);font-stretch:108%;margin-bottom:.6em}
.more{font-weight:700;font-stretch:112%}
@media (max-width:820px){.row,.row:nth-child(even){grid-template-columns:1fr}.row:nth-child(even) .row-img{order:0}}

/* three claims */
.claims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.claim h3{font-size:clamp(1.8rem,3vw,2.6rem);margin-bottom:.4em}
@media (max-width:900px){.claims{grid-template-columns:1fr}}

/* video */
.video{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;margin:0}
.video img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.video .play{position:absolute;inset:0;display:grid;place-items:center;background:none;border:0;cursor:pointer;color:#fff;padding:0}
.video .play span{width:84px;height:84px;border-radius:50%;background:rgba(14,20,36,.7);border:2px solid #fff;display:grid;place-items:center;transition:transform .2s,background .2s}
.video .play:hover span{transform:scale(1.07);background:var(--violet)}
.video .play svg{margin-left:5px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-cap{margin:10px 0 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.92rem;color:var(--slate)}
.band-dark .video-cap{color:#9AA5BE}
.video.is-pending .pending-tag{position:absolute;left:12px;top:12px}
.video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.5vw,32px)}
@media (max-width:760px){.video-grid{grid-template-columns:1fr}}

/* placeholder slots */
.slot,.pending-tag{--tape-edge:#B88A00}
.slot{position:relative;border:2px dashed var(--tape-edge);color:var(--tape-ink);padding:18px 20px;margin:0;display:flex;flex-direction:column;gap:6px;justify-content:center;min-height:150px;
  background:repeating-linear-gradient(135deg,#F6E5A8 0 12px,#EFD88C 12px 24px)}
.slot b{font-weight:800;font-stretch:112%;font-size:.95rem}
.slot span{font-size:.92rem;line-height:1.45;max-width:52ch}
.slot em{font-style:normal;font-size:.8rem;color:#6d5200}
.slot.tall{min-height:320px}
.slot.wide{min-height:160px}
.video-grid .slot.wide{aspect-ratio:16/9;min-height:0}
.keyart{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(12px,2vw,24px);align-items:start}
.keyart-poster{position:sticky;top:84px}
.keyart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
.keyart-grid .span2{grid-column:1/-1}
@media (max-width:820px){.keyart{grid-template-columns:1fr}.keyart-poster{position:static}}
.pending-tag{display:inline-block;background:var(--tape);color:var(--tape-ink);font-weight:700;font-size:.78rem;padding:3px 10px;border-radius:99px}
.ph-inline{background:var(--tape);color:var(--tape-ink);padding:0 6px;border-radius:3px;font-weight:600}
.hide-slots .slot,.hide-slots .pending-tag,.hide-slots .slot-row,.hide-slots .video.is-pending,.hide-slots .ph-only{display:none!important}
.slot-toggle{position:fixed;right:14px;bottom:14px;z-index:60;background:var(--tape);color:var(--tape-ink);border:2px solid #B88A00;border-radius:99px;padding:8px 14px;font:700 .82rem "Archivo",sans-serif;cursor:pointer;box-shadow:0 6px 20px -8px rgba(0,0,0,.5)}

/* project page */
.p-hero{position:relative;background:var(--deep);color:#fff}
.p-hero img.bg{width:100%;height:clamp(240px,42vw,560px);object-fit:cover;object-position:center 30%;opacity:.95}
.p-title{padding:clamp(28px,5vw,64px) 0 clamp(20px,3vw,40px)}
.p-title .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,4vw,64px);align-items:end}
.p-title h1{font-size:clamp(2.4rem,6vw,5.2rem)}
.p-title .kick{font-weight:600;font-stretch:112%;color:var(--slate);margin:0 0 .6em;font-size:1.05rem}
@media (max-width:820px){.p-title .wrap{grid-template-columns:1fr}}
.facts{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:.96rem;border-top:2px solid var(--ink);padding-top:12px}
.facts dt{font-weight:700;font-stretch:108%}
.facts dd{margin:0;color:var(--ink)}
.facts>div{display:contents}
.intro{padding:clamp(8px,2vw,24px) 0 clamp(32px,5vw,64px)}
.intro .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,4vw,64px)}
.intro .lead{max-width:30ch}
@media (max-width:820px){.intro .wrap{grid-template-columns:1fr}}
.block{padding:clamp(32px,5vw,72px) 0;border-top:1px solid var(--rule)}
.block.band-dark{border-top:0}
.block .sec-head h2{max-width:14ch}

/* galleries */
.fig{margin:0}
.fig img{width:100%;cursor:zoom-in;background:var(--panel)}
.fig figcaption{font-size:.88rem;color:var(--slate);margin-top:8px;line-height:1.4}
.band-dark .fig figcaption{color:#9AA5BE}
.rowj{display:flex;gap:clamp(8px,1.4vw,16px);align-items:flex-start}
.rowj .fig{flex:1 1 0;min-width:0}
.mosaic{column-count:3;column-gap:clamp(10px,1.6vw,18px)}
.mosaic .fig{break-inside:avoid;margin-bottom:clamp(10px,1.6vw,18px)}
@media (max-width:820px){.mosaic{column-count:2}.rowj{flex-wrap:wrap}.rowj .fig{flex:1 1 40%}}
@media (max-width:480px){.mosaic{column-count:1}}
.stack{display:grid;gap:clamp(12px,2vw,24px)}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
@media (max-width:760px){.duo,.trio{grid-template-columns:1fr}}
.cast{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:clamp(8px,1.4vw,16px)}
.cast .fig{background:linear-gradient(180deg,var(--cast-a),var(--cast-b));padding:14px 10px 0;display:flex;flex-direction:column}
.cast .fig img{height:300px;object-fit:contain;object-position:bottom;background:none;cursor:zoom-in}
.cast .fig figcaption{padding:8px 0 10px;text-align:center;margin:0;font-weight:600;color:var(--ink)}
.cast.dark .fig{background:linear-gradient(180deg,#1b2340,#10172c)}
.cast.dark .fig figcaption{color:#dfe5f4}
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:clamp(10px,1.6vw,20px);align-items:center}
.logos .fig{background:var(--card);padding:22px;display:grid;place-items:center;min-height:130px}
.logos .fig.dk{background:var(--deep)}
.logos .fig img{max-height:100px;width:auto;object-fit:contain;background:none;cursor:zoom-in}
.mascots{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px}
.mascots .fig img{aspect-ratio:1;object-fit:contain;background:#fff;padding:10px}
.tl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.8vw,24px);counter-reset:s}
.tl a{display:block;text-decoration:none;color:inherit}
.tl img{width:100%;aspect-ratio:2/3;object-fit:cover}
.tl h3{margin:12px 0 4px}
.tl p{font-size:.92rem;margin:0;color:var(--slate)}
@media (max-width:860px){.tl{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tag{display:inline-block;font-size:.78rem;font-weight:700;padding:2px 10px;border-radius:99px;border:1.5px solid currentColor;margin:0 6px 6px 0}
.ai-tag{color:var(--violet-deep)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2vw,24px)}
.steps .fig figcaption{font-weight:700;color:var(--ink);font-size:.95rem}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

/* work page */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(24px,4vw,40px);padding:0;list-style:none}
.filters button{font:600 .95rem "Archivo",sans-serif;font-stretch:108%;padding:8px 16px;border-radius:99px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--deep);color:#fff}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.5vw,48px) clamp(16px,2.5vw,32px)}
.tile{display:block;text-decoration:none;color:inherit}
.tile .ti{overflow:hidden;background:var(--panel)}
.tile img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s}
.tile:hover img{transform:scale(1.03)}
.tile h3{margin:14px 0 4px}
.tile p{margin:0;color:var(--slate);font-size:.98rem}
.tile[hidden]{display:none}
@media (max-width:700px){.work-grid{grid-template-columns:1fr}}

/* footer */
.site-foot{background:var(--deep);color:#C8D0E2;padding:clamp(40px,6vw,80px) 0 40px}
.site-foot .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,4fr);gap:clamp(20px,4vw,64px)}
.site-foot h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.8rem);margin-bottom:.4em;max-width:16ch}
.site-foot a{color:#fff}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-foot .small{color:#8F9AB4;margin-top:32px;grid-column:1/-1}
@media (max-width:760px){.site-foot .wrap{grid-template-columns:1fr}}
.next{display:grid;gap:6px;text-decoration:none;color:inherit}
.next .small{margin:0}
.next h3{font-size:clamp(1.6rem,3.6vw,3rem)}

/* lightbox */
dialog.lb{border:0;padding:0;background:transparent;max-width:96vw;max-height:94vh;overflow:visible}
dialog.lb::backdrop{background:rgba(8,12,24,.92)}
dialog.lb img{max-width:96vw;max-height:88vh;object-fit:contain;margin:0 auto;background:none}
dialog.lb p{color:#dfe5f4;text-align:center;margin:10px auto 0;font-size:.95rem}
dialog.lb button{position:fixed;right:16px;top:12px;background:#fff;color:var(--ink);border:0;border-radius:99px;padding:8px 16px;font:700 .9rem "Archivo",sans-serif;cursor:pointer}

@media (max-width:560px){.cast .fig img{height:230px}.site-head .wrap{gap:8px}.site-head nav a{padding:8px 7px}.mark{font-size:1.02rem}}

/* season trailer */
.block.trailer{padding-block:clamp(36px,6vw,80px)}
.trailer .trailer-stage{max-width:none}
.trailer .video{box-shadow:0 18px 50px rgba(0,0,0,.45)}
.trailer .video .play span{width:112px;height:112px}
.trailer .video .play svg{width:40px;height:40px}
@media (max-width:760px){.trailer .video .play span{width:72px;height:72px}.trailer .video .play svg{width:26px;height:26px}}

/* verb navigation and cards */
.site-head nav a.v{font-weight:800}
.site-head nav a:not(.v){font-weight:500;color:var(--slate)}
.site-head nav a.v + a:not(.v){margin-left:10px;position:relative}
.verbs-sec{padding-block:clamp(40px,6vw,88px)}
.verbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.5vw,56px)}
.verb{display:flex;flex-direction:column;gap:16px;border-top:4px solid var(--ink);padding-top:18px}
.verb h2{font-size:clamp(2rem,3.6vw,3.2rem);margin:0}
.verb h2 a{color:var(--ink);text-decoration:none}
.verb h2 a:hover{color:var(--violet)}
.verb p{margin:0}
.verb-media{display:grid;gap:10px;margin-top:auto}
.verb-media.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.verb-media.two{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center}
.verb-media img{width:100%;height:auto;display:block}
.verb-media.three img{aspect-ratio:2/3;object-fit:cover}
.verb-media.two img{background:var(--deep);padding:14px;aspect-ratio:16/9;object-fit:contain}
.verb .more{align-self:flex-start}
.verb-media .slot{min-height:190px}
@media (max-width:900px){.verbs{grid-template-columns:1fr}}
.script-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.script-card h3{margin:14px 0 4px}
.script-card p{margin:0 0 12px;color:var(--slate)}
.script-logo{background:var(--panel);padding:20px;display:grid;place-items:center;aspect-ratio:16/9}
.script-logo img{max-width:70%;max-height:100%;width:auto;height:auto;object-fit:contain}
@media (max-width:900px){.script-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.script-grid{grid-template-columns:1fr}}
@media (max-width:640px){.site-head .wrap{flex-wrap:wrap;height:auto;padding-block:8px;row-gap:2px}.site-head nav{width:100%;justify-content:space-between;gap:0;overflow-x:auto}.site-head nav a{white-space:nowrap}.site-head nav a.v + a:not(.v){margin-left:0}}
.script-card p{min-height:2.9em}.verb-media.three img{aspect-ratio:3/4}
@media (max-width:640px){.site-head nav a{font-size:.9rem;padding:8px 5px}.site-head nav{overflow:visible}}

/* gameplay promos */
.promo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.5vw,32px)}
@media (max-width:980px){.promo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.promo-grid{grid-template-columns:1fr}}
.promo{margin:0}
.promo-stage{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.promo-stage video{width:100%;height:100%;display:block;object-fit:cover}
.promo-snd{position:absolute;right:10px;top:10px;background:var(--tape);color:var(--ink);border:0;border-radius:999px;padding:7px 14px;font:700 .82rem/1 inherit;font-family:inherit;cursor:pointer}
.promo-snd:focus-visible{outline:3px solid #fff;outline-offset:2px}
.promo figcaption{display:grid;gap:3px;margin-top:10px;font-size:.92rem;color:var(--slate)}
.promo figcaption b{color:var(--ink);font-size:1rem}
.promo figcaption em{font-style:normal;font-size:.8rem;color:var(--violet);font-weight:600}
.band-dark .promo figcaption{color:#9AA5BE}
.band-dark .promo figcaption b{color:#fff}
.band-dark .promo figcaption em{color:var(--tape)}

/* before / after compare */
.ba-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px) clamp(14px,2vw,28px);align-items:start}
.ba{margin:0}
.ba-stage{position:relative;overflow:hidden;background:var(--deep);touch-action:pan-y;--pos:50%;user-select:none}
.ba-stage img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-stage .ba-top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-stage .ba-top img{position:absolute;inset:0}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px rgba(14,20,36,.35);pointer-events:none}
.ba-line::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(14,20,36,.45),inset 0 0 0 3px var(--violet)}
.ba-stage input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba-stage input:focus-visible+.ba-line::after{box-shadow:0 0 0 3px var(--violet),0 2px 10px rgba(14,20,36,.45)}
.ba-tag{position:absolute;top:10px;padding:3px 10px;border-radius:99px;font:700 .78rem "Archivo",sans-serif;background:rgba(14,20,36,.78);color:#fff;pointer-events:none}
.ba-tag.l{left:10px}.ba-tag.r{right:10px;background:var(--tape);color:var(--tape-ink)}
.ba figcaption{margin-top:8px;font-size:.9rem;color:var(--slate);line-height:1.4}
.ba.side .ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--deep)}
.ba.side .ba-pair div{position:relative;background:var(--deep)}
.ba.side .ba-pair img{display:block;width:100%;height:auto;cursor:zoom-in}

/* native hosted video */
.vid{margin:0}
.vid video{display:block;width:100%;aspect-ratio:16/9;background:#000;object-fit:contain}
.vid figcaption{margin-top:10px;display:grid;gap:2px;font-size:.92rem;color:var(--slate)}
.vid figcaption b{color:var(--ink);font-weight:700}
.band-dark .vid figcaption{color:#9AA5BE}.band-dark .vid figcaption b{color:#fff}
.vid-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.vid-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.vid-grid2 .slot{aspect-ratio:auto;min-height:0;height:100%}
.vid-grid2 .slot.wide{aspect-ratio:auto}

/* icon sheets */
.isheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:clamp(8px,1.2vw,14px)}
.isheet figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 8px;background:var(--card);text-align:center}
.isheet img{width:100%;height:84px;object-fit:contain;background:none;cursor:zoom-in}
.isheet figcaption{font-size:.74rem;line-height:1.25;color:var(--slate)}
.isheet.dk figure{background:#1b2340}.isheet.dk figcaption{color:#aab4cf}
.isheet.lg{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.isheet.lg img{height:120px}
.isheet.map{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.isheet.map img{height:104px}
.isheet.flags img{height:150px}
.ui-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,18px)}
.ui-grid .fig img{aspect-ratio:16/9;object-fit:cover;background:var(--deep)}
.sb-set{margin-bottom:clamp(22px,3.5vw,44px)}
.sb-set h3{font-size:1.15rem;margin:0 0 12px;font-stretch:112%}
.sb-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.4vw,16px)}
.sb-row .fig img{aspect-ratio:16/9;object-fit:cover;object-position:top;background:#fff;border:1px solid var(--rule)}
.band-dark .sb-set h3{color:#fff}
.pipe{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(16px,2.5vw,32px);align-items:start}
@media (max-width:980px){.vid-grid3,.ui-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pipe{grid-template-columns:1fr}}
@media (max-width:640px){.ba-grid,.vid-grid3,.vid-grid2,.ui-grid{grid-template-columns:1fr}.sb-row{grid-template-columns:1fr 1fr}.isheet{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}.isheet.lg{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.isheet.map{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}
.ba-stage>img{position:absolute;inset:0}
.sub-h{font-size:1.1rem;font-stretch:112%;margin:clamp(22px,3vw,36px) 0 12px}
.sub-h:first-child{margin-top:0}
.ba-grid.ba-tall{margin-top:clamp(20px,3vw,40px);max-width:880px}
.print-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,20px)}
.print-grid .fig{background:var(--paper);padding:10px 10px 12px}
.print-grid .fig img{aspect-ratio:1/1;object-fit:contain;background:none}
.print-grid .fig figcaption{text-align:center;margin-top:6px}
@media (max-width:980px){.print-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.print-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ai-note{border-top:1px solid var(--rule);background:var(--panel)}
.ai-note .wrap{display:flex;gap:14px 18px;align-items:baseline;flex-wrap:wrap;padding-block:14px}
.ai-note b{background:var(--deep);color:#fff;font:700 .8rem "Archivo",sans-serif;padding:3px 11px;border-radius:99px;white-space:nowrap}
.ai-note span{max-width:78ch;font-size:.98rem}
.ai-note-inline{margin:0 0 clamp(18px,2.5vw,28px);padding:12px 16px;border-left:4px solid var(--violet);background:var(--card);font-size:1rem;max-width:78ch}

/* role-page banner (placeholder until photo + art are ready) */
.p-banner{background:var(--deep)}
.p-banner-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;height:clamp(150px,16vw,220px)}
.p-banner .slot{min-height:0;height:100%;margin:0;border-radius:0;border-width:0 0 0 0;outline:2px dashed var(--tape-edge);outline-offset:-10px;justify-content:center;padding:22px 28px}
.p-banner .slot span{font-size:.85rem;line-height:1.35}
@media (max-width:640px){.p-banner-in{height:auto;grid-template-columns:1fr}.p-banner .slot{min-height:110px}}

/* ---- story-led structure (2026-10-30) ---- */
.hero-short{padding-bottom:clamp(24px,4vw,48px)}
.role-banners{padding:0 0 clamp(28px,4vw,56px)}
.role-banners .wrap{display:grid;gap:10px}
.rb{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:stretch;background:var(--panel);color:inherit;text-decoration:none;height:clamp(120px,12vw,160px);overflow:hidden}
.rb-img{overflow:hidden;background:var(--deep)}
.rb-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.rb:hover .rb-img img{transform:scale(1.04)}
.rb-txt{padding:clamp(14px,2vw,24px) clamp(16px,2.6vw,36px);display:flex;flex-direction:column;justify-content:center}
.rb-txt h2{font-size:clamp(1.4rem,2.6vw,2.1rem);margin:0 0 .25em}
.rb-txt p{margin:0;max-width:56ch;color:var(--slate)}
.rb:hover h2{color:var(--violet)}
@media (max-width:700px){.rb{grid-template-columns:1fr;height:auto}.rb-img{aspect-ratio:3/1}}
.stories{padding-top:0}
.lts{font-size:clamp(2rem,5vw,3.8rem)}
.st-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
@media (max-width:980px){.st-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.st-grid{grid-template-columns:1fr}}
.st{display:block;color:inherit;text-decoration:none}
.st-img{position:relative;overflow:hidden;background:var(--deep);aspect-ratio:16/10}
.st-img>img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.st:hover .st-img>img{transform:scale(1.04)}
.st-logo{position:absolute;left:12px;bottom:12px;width:min(42%,170px);filter:drop-shadow(0 2px 8px rgba(0,0,0,.55))}
.st-logo img{width:100%;height:auto}
.st h3{margin:14px 0 4px}
.st p{margin:0 0 8px;color:var(--slate);font-size:.98rem}
.story-title{padding-bottom:clamp(16px,2.4vw,28px)}
.story-title .lead{margin-top:.5em}
.story-trailer{padding-top:clamp(20px,3vw,40px)}
.story-card{padding:clamp(28px,4vw,56px) 0;border-bottom:1px solid var(--rule)}
.sc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,48px)}
.sc h2{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--violet);margin:0 0 .7em;font-stretch:112%}
.sc p{margin:0;font-size:1.06rem;line-height:1.5}
@media (max-width:820px){.sc-grid{grid-template-columns:1fr}}
.pipeline{list-style:none;counter-reset:st;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.pipeline li{counter-increment:st;border-top:2px solid var(--ink);padding-top:12px}
.pipeline li b{display:block;font-size:1.15rem;margin-bottom:.3em}
.pipeline li b::before{content:counter(st,decimal-leading-zero) "  ";color:var(--violet)}
.pipeline li span{color:var(--slate)}
@media (max-width:820px){.pipeline{grid-template-columns:1fr}}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--rule);margin-bottom:clamp(24px,3vw,40px)}
.stat{background:var(--paper);padding:clamp(16px,2.4vw,28px)}
.stat b{display:block;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1;font-stretch:115%;color:var(--violet)}
.stat span{display:block;margin-top:.5em;color:var(--slate)}
@media (max-width:700px){.stats{grid-template-columns:1fr 1fr}}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
@media (max-width:900px){.quotes{grid-template-columns:1fr}}
.quotes blockquote{margin:0;background:var(--paper);padding:clamp(16px,2vw,24px);border-left:4px solid var(--tape)}
.quotes p{margin:0 0 .6em;font-size:1.08rem;line-height:1.45}
.quotes cite{font-style:normal;font-weight:600;font-size:.9rem;color:var(--slate)}
@media (max-width:640px){.site-head nav a[href="index.html#stories"]{display:none}}

/* ---- studio theme (dark, immersive). Set class="studio" on <html>. ---- */
html.studio{--paper:#0b0a24;--panel:#15123a;--ink:#EEF0FA;--slate:#AEB4D0;--rule:#2b2760;--deep:#07061a;--card:#1b1846;
  --violet:#9B86FF;--violet-deep:#B3A4FF;--head-bg:rgba(9,8,28,.82);--cast-a:#221e52;--cast-b:#16133b;color-scheme:dark}
html.studio .mascots .fig img{background:#fff}

/* ---- home world (studio theme). Everything is sized in cqw (1% of the world's width) so text, cards and the painted art scale together.
   The world caps at 2560px wide; past that the art stays put and the sides are dark. ---- */
html.studio{--acc:#C44BFF;--acc2:#6F7CFF;--acc-line:rgba(170,90,255,.6);--violet:#B26BFF;--violet-deep:#CB8CFF}
.world{position:relative;overflow:hidden;overflow:clip;background:var(--paper);container-type:inline-size;max-width:2560px;margin:0 auto;--edge:5.6cqw}
.world-bg{position:absolute;inset:0;pointer-events:none}
.wb{position:absolute;left:0;width:100%;height:56.25cqw;object-fit:cover}
.wb1{top:0}.wb2{top:56.25cqw}.wb3{top:112.5cqw}.wb4{top:168.75cqw}
.world-bg::after{content:"";position:absolute;left:0;right:0;top:225cqw;bottom:0;background:var(--paper)}
.world-bg::before{content:"";position:absolute;inset:0;z-index:1;background:
 linear-gradient(180deg,transparent 52cqw,rgba(11,10,36,.5) 56.25cqw,transparent 60cqw),
 linear-gradient(180deg,transparent 108cqw,rgba(11,10,36,.55) 112.5cqw,transparent 117cqw),
 linear-gradient(180deg,transparent 164cqw,rgba(11,10,36,.55) 168.75cqw,transparent 173cqw);background-repeat:no-repeat}
.world>section{position:relative;z-index:2;padding:0}
.w-roles{padding:0}
.world .in{padding:0 var(--edge)}
/* header floats over the art on the home page */
html.studio body.is-home .site-head{position:fixed;left:0;right:0;top:0;background:rgba(8,6,26,.42);border-bottom:1px solid rgba(190,120,255,.35);backdrop-filter:blur(10px)}
/* hero: fixed height that ends just under the painted posters */
.w-hero{height:46cqw}
.w-intro{position:absolute;left:var(--edge);top:max(84px,10.8cqw);width:27cqw}
.w-intro h1{font-size:6.1cqw;line-height:.9;color:#fff;margin:0;text-shadow:0 2px 24px rgba(5,4,20,.6)}
.w-bar{display:block;width:3.4cqw;height:max(4px,.32cqw);border-radius:3px;background:linear-gradient(90deg,#D946FF,#8B4BFF);margin:1.5cqw 0 1.4cqw}
.w-intro .lead{color:#fff;font-size:max(15px,1.42cqw);line-height:1.38;max-width:none;margin:0 0 .9em;text-shadow:0 1px 14px rgba(5,4,20,.75)}
.w-intro .sub{color:#D3D2F0;font-size:max(13px,.92cqw);line-height:1.5;margin:0;text-shadow:0 1px 10px rgba(5,4,20,.85)}
/* hero screen: lines up with the screen painted into HomeBack1b (x 899-2083, y 287-953 of 2560x1440) */
.w-art{position:absolute;left:0;top:0;width:100%;height:56.25cqw;pointer-events:none}
.w-art-img{display:none}
.w-screen{position:absolute;left:35.12%;top:19.93%;width:46.25%;height:46.25%;border-radius:.8cqw;overflow:hidden;background:#0b0820;pointer-events:auto;
 box-shadow:0 0 0 max(1px,.08cqw) rgba(236,170,255,.75),0 0 1.4cqw rgba(200,90,255,.55),0 1.2cqw 3cqw rgba(4,2,20,.55)}
.ws-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ws-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:max(8px,.7cqw);border:0;padding:0;background:radial-gradient(ellipse at center,rgba(10,4,32,.45),rgba(10,4,32,0) 60%);color:#fff;cursor:pointer;font:800 max(16px,1.45cqw)/1.1 "Archivo",sans-serif;font-stretch:110%}
.ws-btn{display:grid;place-items:center;width:max(56px,5.2cqw);height:max(56px,5.2cqw);border-radius:50%;background:linear-gradient(135deg,#E040FF,#8B4BFF);border:2px solid rgba(255,255,255,.85);box-shadow:0 0 24px rgba(200,90,255,.6),0 6px 20px rgba(4,2,20,.5);transition:transform .25s,box-shadow .25s}
.ws-btn svg{width:42%;height:42%;margin-left:8%}
.ws-pop{display:flex;align-items:center;gap:.45em;text-shadow:0 2px 12px rgba(5,2,20,.9)}
.ws-pop img{width:1.25em;height:auto;filter:drop-shadow(0 2px 6px rgba(5,2,20,.8))}
.ws-play small{font-weight:600;font-size:max(11px,.75cqw);letter-spacing:.12em;text-transform:uppercase;color:#E6D8FF;text-shadow:0 1px 8px rgba(5,2,20,.9)}
.ws-play:hover .ws-btn,.ws-play:focus-visible .ws-btn{transform:scale(1.08);box-shadow:0 0 36px rgba(230,120,255,.85),0 6px 20px rgba(4,2,20,.5)}
.ws-play:focus{outline:none}.ws-play:focus-visible .ws-btn{outline:2px solid #fff;outline-offset:4px}
.ws-pause{position:absolute;right:max(10px,.9cqw);bottom:max(10px,.9cqw);width:max(34px,2.4cqw);height:max(34px,2.4cqw);border-radius:50%;border:1.5px solid rgba(255,255,255,.7);background:rgba(10,6,30,.55);cursor:pointer;display:grid;place-items:center;padding:0}
.ws-pause .i-pause{width:36%;height:40%;border-left:3px solid #fff;border-right:3px solid #fff;box-sizing:border-box}
.ws-pause[aria-pressed="true"] .i-pause{width:0;height:0;border:0;border-left:solid #fff;border-left-width:max(9px,.7cqw);border-top:max(6px,.45cqw) solid transparent;border-bottom:max(6px,.45cqw) solid transparent;margin-left:3px}
.ws-tag{position:absolute;left:max(12px,1.1cqw);bottom:max(10px,.9cqw);margin:0;color:#fff;font-size:max(12px,.85cqw);font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.ws-tag b{color:#F3B6FF}
.ws-tag span{display:block;margin-top:.3em;font-size:.82em;font-weight:500;letter-spacing:.02em;text-transform:none;color:#E6DDFB}
.ws-end-c{margin:-.4em 0 .5em;color:#CFC6EE;font-size:max(12px,.85cqw)}
.w-screen.is-full .ws-play,.w-screen.is-full .ws-pause,.w-screen.is-full .ws-tag,.w-screen.is-end .ws-play,.w-screen.is-end .ws-pause,.w-screen.is-end .ws-tag{display:none}
.w-screen.no-loop .ws-pause{display:none}
.ws-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:max(10px,.8cqw);background:rgba(12,6,36,.82);backdrop-filter:blur(4px);text-align:center}
.ws-end[hidden]{display:none}
.ws-end-k{margin:0 0 .5em;color:#E6D8FF;font-size:max(12px,.85cqw);letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.ws-end a{color:#fff;font:800 max(17px,1.5cqw)/1.2 "Archivo",sans-serif;font-stretch:110%;text-decoration:none;border-bottom:2px solid rgba(224,64,255,.7);padding-bottom:.15em}
.ws-end a:hover{color:#F3B6FF;border-color:#F3B6FF}
.ws-replay{margin-top:.6em;background:none;border:1.5px solid rgba(255,255,255,.6);border-radius:999px;color:#fff;padding:.4em 1.2em;font:600 max(13px,.85cqw) "Archivo",sans-serif;cursor:pointer}
.ws-replay:hover{border-color:#fff}
/* row labels in the stories grid */
.st-grid .st-row{grid-column:1/-1;margin:max(10px,1cqw) 0 0;font-size:max(13px,.9cqw);letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#E2C6FF;display:flex;align-items:center;gap:1em}
.st-grid .st-row::after{content:"";flex:1;height:1px;background:var(--acc-line)}
html:not(.studio) .st-grid .st-row{color:var(--ink)}
html.studio .st .st-what{color:#E6E1FA;font-weight:500}
/* featured Quest tile spans the row */
@media (min-width:981px){.st-grid .st-feat{grid-column:1/-1;display:grid;grid-template-columns:2fr 1fr;align-items:center}
 .st-feat .st-img{grid-row:1/4;aspect-ratio:16/7.4}
 html.studio .st-feat h3{font-size:max(26px,2.1cqw);margin:0 0 .3em;align-self:end}
 html.studio .st-feat p{font-size:max(16px,1.15cqw);align-self:start}
 .st-feat .st-img{grid-row:1/5}
 .st-feat .st-more{align-self:start}}
/* role cards: straddle the seam, end before the painted city */
.w-roles .rc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5cqw}
.rc{display:flex;flex-direction:column;text-decoration:none;color:#fff;background:rgba(14,10,46,.74);border:2px solid var(--acc-line);border-radius:8px;overflow:hidden;backdrop-filter:blur(6px);box-shadow:0 18px 40px rgba(3,2,16,.45);transition:border-color .25s,transform .25s,box-shadow .25s}
.rc:hover{border-color:#D07BFF;transform:translateY(-3px);color:#fff;box-shadow:0 18px 40px rgba(3,2,16,.45),0 0 22px rgba(190,90,255,.35)}
.rc-img{aspect-ratio:16/7.2;overflow:hidden}
.rc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.rc:hover .rc-img img{transform:scale(1.04)}
.rc-txt{padding:1.1cqw 1.4cqw 1.4cqw}
.rc-txt h2{display:flex;align-items:center;gap:.5em;font-size:max(20px,1.75cqw);margin:0 0 .4em;color:#fff}
.rc-ic{width:1.45em;height:1.45em;flex:none;display:block;margin:-.1em 0}
.rc-txt p{margin:0;color:#D0D2EE;font-size:max(14px,.95cqw);line-height:1.5}
/* story heading sits beside the painted city */
.world .w-stories{padding:max(16px,2.8cqw) 0 max(60px,7cqw)}
.w-story-head{display:flex;align-items:center;gap:2.4cqw;margin:0 0 2cqw}
.w-stories .lts{font-size:max(34px,4.5cqw);line-height:.98;color:#fff;margin:0;text-shadow:0 2px 24px rgba(5,4,20,.7)}
.grad{background:linear-gradient(90deg,#E040FF 0%,#9D5BFF 45%,#4F8BFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.pmi{margin:0;padding-left:2.4cqw;border-left:2px solid var(--acc-line);font-size:max(18px,1.75cqw);font-weight:600;font-stretch:110%;color:#E2E1F6;max-width:none;white-space:nowrap;line-height:1.3}
.pmi span{display:block}
html.studio .st{background:rgba(14,10,46,.8);border:2px solid var(--acc-line);border-radius:8px;overflow:hidden;backdrop-filter:blur(6px);transition:border-color .25s,box-shadow .25s}
html.studio .st:hover{border-color:#D07BFF;box-shadow:0 0 22px rgba(190,90,255,.35)}
html.studio .st h3,html.studio .st p{padding:0 max(14px,1.3cqw)}
html.studio .st h3{color:#fff;margin-top:max(12px,1cqw)}
html.studio .st p{color:#C9CCE8}
.world .st-grid{gap:1.5cqw}
.st-more{display:inline-block;padding:0 max(14px,1.3cqw) max(14px,1.2cqw);font-weight:700;color:#E35BFF}
.st:hover .st-more{color:#F08CFF}
html:not(.studio) .st-more{padding:0;color:var(--ink)}

@media (max-width:900px){
 html.studio body.is-home .site-head{position:sticky}
 .world{--edge:16px}
 .world-bg{display:none}
 .w-hero{height:auto}
 .w-intro{position:static;width:auto;padding:28px var(--edge) 8px}
 .w-intro h1{font-size:clamp(3rem,15vw,4.6rem)}
 .w-bar{width:48px;margin:16px 0}
 .w-intro .lead{font-size:1.15rem}
 .w-art{display:block;margin-top:12px;position:relative;height:auto}
 .w-art-img{display:block;width:100%;height:auto}
 .w-screen{border-radius:6px}
 .ws-play{font-size:13px;gap:5px}
 .ws-btn{width:42px;height:42px}
 .ws-play small{display:none}
 .ws-tag{display:none}
 .w-roles .rc-grid{grid-template-columns:1fr;gap:14px}
 .w-roles{padding-top:6px}
 .rc-txt{padding:14px 16px 18px}
 .w-stories{background:url(../img/bg/home2-900.webp) center top/cover no-repeat;padding-top:48px}
 .w-story-head{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:22px}
 .w-stories .lts{font-size:clamp(2rem,10vw,3rem)}
 .pmi{white-space:normal;padding-left:12px}
 .world .st-grid{gap:16px}
}
/* home header lines up with the art's edges */
html.studio body.is-home .site-head .wrap{max-width:2560px;padding:0 max(16px,calc(min(100vw,2560px)*.056))}
/* ultrawide: feather the art's left and right edges into the dark */
@media (min-width:2561px){.world-bg{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}}
/* story page header: a strip of the environment behind the title */
html.studio .story-title,html.studio .p-title{background:linear-gradient(180deg,rgba(11,10,36,.35),rgba(11,10,36,.85) 70%,var(--paper)),url(../img/bg/home4-1440.webp) center 35%/cover no-repeat}
@media (max-width:900px){html.studio .story-title,html.studio .p-title{background-image:linear-gradient(180deg,rgba(11,10,36,.35),rgba(11,10,36,.85) 70%,var(--paper)),url(../img/bg/home4-900.webp)}}
/* Quest, Seasons 1-3 page */
.season-jump{padding:clamp(16px,2.4vw,32px) 0;border-bottom:1px solid var(--rule)}
.season-jump .wrap{display:flex;gap:clamp(12px,2vw,28px);flex-wrap:wrap}
.season-jump a{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:700;font-stretch:110%}
.season-jump img{width:56px;height:auto;border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.season-jump a:hover{color:var(--violet)}
.season-head{padding:clamp(48px,7vw,104px) 0 clamp(20px,3vw,40px);border-top:2px solid var(--acc-line,var(--rule))}
.sh-top{display:grid;grid-template-columns:minmax(120px,240px) minmax(0,1fr);gap:clamp(18px,3vw,48px);align-items:center;margin-bottom:clamp(20px,3vw,40px)}
.sh-logo img{width:100%;height:auto}
.season-head h2{font-size:clamp(2.4rem,6vw,5rem);margin:0}
.season-head .kick{font-weight:600;font-stretch:112%;color:var(--slate);margin:0 0 .4em}
.season-head .lead{margin:.4em 0 0}
.sc-mini h3{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--violet);margin:0 0 .6em;font-stretch:112%}
.sc-mini p{font-size:1rem}
@media (max-width:700px){.sh-top{grid-template-columns:1fr}.sh-logo{max-width:200px}}
/* role cards: icon in its own column, heading and text share one left edge */
.rc-txt{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:max(12px,1.1cqw);align-items:start}
.rc-txt .rc-ic{width:max(40px,3.3cqw);height:max(40px,3.3cqw);margin:0}
.rc-txt h2{margin:.05em 0 .3em}
/* Quest brief: big, bold, left-aligned statement under the title */
.brief{padding:clamp(28px,4vw,56px) 0 clamp(8px,1.5vw,20px)}
.brief-k{margin:0 0 .6em;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--violet)}
.brief-t{margin:0;max-width:30ch;font:800 clamp(1.7rem,3.4vw,3.1rem)/1.12 "Archivo",sans-serif;font-stretch:108%;color:var(--ink);text-wrap:balance}
html.studio .brief-t{color:#fff}
html.studio .brief-k{color:#E35BFF}
.sc .slot{margin-top:10px}

/* ---- story page template (2026-11-04): compact title, story card first, facts strip after ---- */
.story-title.compact{padding:clamp(18px,2.4vw,32px) 0 clamp(10px,1.4vw,18px)}
.story-title.compact .wrap{display:block}
.story-title.compact h1{font-size:clamp(2rem,3.6vw,3.2rem);line-height:1}
.story-title.compact .kick{margin:0 0 .35em;font-size:.95rem}
.story-title.compact .lead{font-size:clamp(1.02rem,1.3vw,1.2rem);max-width:60ch;margin:.45em 0 0}
.brief{padding:clamp(6px,1vw,12px) 0 clamp(4px,.8vw,10px)}
.brief-t{font-size:clamp(1.05rem,1.45vw,1.35rem);line-height:1.35;max-width:68ch;font-weight:700}
.story-card{padding:clamp(16px,2vw,28px) 0}
.sc-grid{gap:clamp(16px,2vw,32px)}
/* story card: each part is its own card, wide image on top, heading and text below */
.story-card .sc-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.story-card .sc{display:flex;flex-direction:column;background:rgba(14,10,46,.8);border:2px solid var(--acc-line);border-radius:10px;overflow:hidden}
html:not(.studio) .story-card .sc{background:var(--panel)}
.sc-img{width:100%;aspect-ratio:2.4/1;border-radius:0;overflow:hidden;border:0;border-bottom:2px solid var(--acc-line);background:var(--deep)}
.sc-img img{width:100%;height:100%;object-fit:cover;display:block}
.sc .sc-txt{padding:clamp(12px,1.2vw,18px) clamp(14px,1.4vw,20px) clamp(14px,1.4vw,20px)}
.sc h2{margin:0 0 .5em}
@media (max-width:900px){.story-card .sc-grid{grid-template-columns:1fr}.sc-img{aspect-ratio:3/1}}
.story-vids{padding:clamp(20px,3vw,40px) 0}
.story-vids .vid-grid2 .slot.vslot{aspect-ratio:16/9;min-height:0;height:auto}
.facts-strip{padding:clamp(14px,2vw,24px) 0}
.facts.strip{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 28px}
.facts.strip>div{display:block}
.facts.strip dt{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--violet);margin-bottom:.2em}
html.studio .facts{border-top-color:var(--acc-line)}
/* no-AI badge */
.noai-note .wrap{display:flex;align-items:center;gap:14px}
.noai{width:40px;height:40px;flex:none;color:#E35BFF}
html:not(.studio) .noai{color:var(--violet)}
/* portraits */
.about-photo{width:100%;height:auto;border-radius:12px;display:block;margin:0 0 18px}
.foot-intro{display:flex;align-items:center;gap:clamp(16px,2vw,28px)}
.foot-face{width:clamp(96px,9vw,136px);height:clamp(96px,9vw,136px);border-radius:50%;object-fit:cover;display:block;flex:none;border:2px solid var(--acc-line)}
@media (max-width:600px){.foot-intro{flex-direction:column;align-items:flex-start}}

/* "How I ran a season" stage icons */
.pipeline li{position:relative}
.pl-ic{display:block;width:40px;height:40px;color:#C44BFF;margin:2px 0 10px}
html:not(.studio) .pl-ic{color:var(--violet)}
@media (min-width:901px) and (max-height:900px){.sc-img{aspect-ratio:3.4/1}.story-title.compact{padding:14px 0 8px}.story-title.compact h1{font-size:clamp(1.9rem,3vw,2.8rem)}.brief{padding:2px 0 4px}.story-card{padding:12px 0 18px}.sc .sc-txt{padding:10px 16px 14px}.sc h2{margin-bottom:.35em}}
/* one big pair of quote marks framing the whole quotes grid */
.quotes-frame{position:relative;padding:clamp(34px,4vw,56px) clamp(10px,2vw,28px)}
.quotes-frame::before,.quotes-frame::after{position:absolute;font:900 clamp(90px,10vw,150px)/1 Georgia,"Times New Roman",serif;color:var(--tape,#FFC83D);pointer-events:none}
.quotes-frame::before{content:"\201C";left:-6px;top:-18px}
.quotes-frame::after{content:"\201D";right:-6px;bottom:-78px}
.vid-solo{max-width:900px}
.sc-img.whole{background:#06050f}.sc-img.whole img{object-fit:contain}
.vid-solo.sm{max-width:640px}

/* ---- Change log 10 (2026-11-05) ---- */
/* No AI used badge, top left of a section */
.sec-noai{display:inline-flex;align-items:center;gap:10px;margin:0 0 clamp(14px,2vw,22px);padding:6px 14px 6px 6px;border-radius:999px;background:rgba(227,91,255,.12);border:1.5px solid rgba(227,91,255,.55);font-weight:800;font-stretch:112%;letter-spacing:.06em;text-transform:uppercase;font-size:.92rem;line-height:1}
.sec-noai .noai{width:30px;height:30px}
html:not(.studio) .sec-noai{background:rgba(106,53,217,.08);border-color:rgba(106,53,217,.45)}
/* tight character rows: one height, width follows the character */
.tcast{display:flex;flex-wrap:wrap;gap:clamp(8px,1.4vw,16px);--h:300px}
.tcast .fig{flex:0 0 auto;margin:0;background:linear-gradient(180deg,var(--cast-a),var(--cast-b));padding:14px 14px 0;display:flex;flex-direction:column;max-width:100%}
.tcast.dark .fig{background:linear-gradient(180deg,#1b2340,#10172c)}
.tcast .tc-crop{position:relative;height:var(--h);width:calc(var(--h) * var(--r));max-width:100%;overflow:hidden}
.tcast .tc-crop img{position:absolute;max-width:none;height:auto;background:none;cursor:zoom-in}
.tcast .fig figcaption{padding:8px 0 10px;text-align:center;margin:0;font-weight:600;color:var(--ink)}
.tcast.dark .fig figcaption{color:#dfe5f4}
@media (max-width:820px){.tcast{--h:210px!important}}
@media (max-width:480px){.tcast{--h:170px!important}}
/* silent looping clips */
.vid.loop video{pointer-events:none}
/* season heads without the logo */
.sh-top.no-logo{grid-template-columns:1fr}
.keyart-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){.keyart-grid.three{grid-template-columns:1fr}}
/* smaller season posters on I make */
.posters-sm{max-width:760px}
/* Cubie */
.cubie{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(16px,3vw,40px);align-items:center}
.cubie-art .fig img{background:none}
@media (max-width:820px){.cubie{grid-template-columns:1fr}.cubie-art{max-width:300px}}
/* script page with the logo on top */
.script-page{position:relative}
.script-logo-over{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:56%;z-index:2;pointer-events:none}
.script-logo-over img{width:100%;height:auto;background:none;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.script-page .slot{padding-top:clamp(70px,9vw,110px)}
/* director web */
.dweb{width:100%;height:auto;display:block}
.dweb .wl line{stroke:var(--violet);stroke-width:2;opacity:.45}
.dweb .wn rect{fill:var(--card);stroke:var(--violet);stroke-opacity:.5;stroke-width:1.5}
.dweb text{text-anchor:middle;fill:var(--ink);font-family:inherit}
.dweb .wt{font-weight:800;font-size:17px}
.dweb .wd{font-size:13.5px;fill:var(--slate)}
.dweb .wc{fill:var(--violet)}
.dweb .wct{fill:#fff;font-weight:800;font-size:19px}
.dweb .wcs{fill:#fff;font-size:13.5px;opacity:.9}
.dweb-list{display:none;list-style:none;margin:0;padding:0;gap:10px}
.dweb-list li{padding:12px 14px;border-left:4px solid var(--violet);background:var(--card)}
.dweb-list b{display:block}
@media (max-width:760px){.dweb{display:none}.dweb-list{display:grid}}
/* ---- Change log 12 ---- */
.loop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,20px)}
.loop-grid .vid video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;display:block}
@media (max-width:820px){.loop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.loop-grid{grid-template-columns:1fr}}
.ab-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,20px);align-items:start}
@media (max-width:820px){.ab-row{grid-template-columns:1fr}}
.cubie-art .tcast{justify-content:center}
/* ---- Change log 13 ---- */
.tcast .tc-crop{height:calc(var(--h) * var(--s,1));width:calc(var(--h) * var(--s,1) * var(--r));align-self:center;margin-top:auto}
.vid-solo.center{margin-left:auto;margin-right:auto}
.popv{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#0b0820;container-type:inline-size;
 box-shadow:0 0 0 1px rgba(236,170,255,.6),0 0 22px rgba(200,90,255,.4),0 16px 40px rgba(4,2,20,.5)}
.popv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.popv .ws-play{font-size:clamp(17px,3.2cqw,30px)}
.popv .ws-btn{width:clamp(56px,10cqw,96px);height:clamp(56px,10cqw,96px)}
.popv .ws-play small{font-size:clamp(11px,1.5cqw,14px)}
.popv .ws-tag{font-size:clamp(11px,1.6cqw,15px);left:16px;bottom:14px}
.popv.is-full .ws-play,.popv.is-full .ws-tag{display:none}
.facts-strip.top{padding-top:0}
.mosaic.sm{column-count:4}
@media (max-width:820px){.mosaic.sm{column-count:2}}
.fig-narrow{max-width:760px;margin-left:auto;margin-right:auto}
.intro-l{min-width:0}
.dweb-wrap{margin-top:clamp(20px,3vw,40px);max-width:560px}
.dweb-k{font-weight:800;font-stretch:112%;letter-spacing:.08em;text-transform:uppercase;font-size:.85rem;color:var(--slate);margin:0 0 6px}
.dweb.c .wt{font-size:15px}.dweb.c .wd{font-size:12.5px}.dweb.c .wct{font-size:18px}.dweb.c .wcs{font-size:12.5px}
/* script pages */
.script-sheet img{width:100%;height:auto;display:block;background:#fff;box-shadow:0 10px 28px rgba(0,0,0,.35)}
.script-page .script-logo-over{top:-14px}
.s2s{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:clamp(14px,2vw,28px);align-items:stretch}
.s2s + .s2s{margin-top:clamp(28px,4vw,52px)}
.s2s-script{position:relative;min-height:320px;display:flex;flex-direction:column}
.s2s-k{margin:0 0 8px;font-weight:800;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.s2s-in{flex:1;overflow-y:auto;background:#fff;border-radius:8px;box-shadow:inset 0 0 0 1px var(--rule);max-height:520px}
.s2s-in img{width:100%;height:auto;display:block;border-bottom:1px solid #e5e5e5;cursor:zoom-in}
@media (max-width:820px){.s2s{grid-template-columns:1fr}.s2s-in{max-height:420px}}
.s2s-in .pg[hidden]{display:none}
.s2s-in .pg img{border-bottom:0}
.pager-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:10px}
.pager-nav button{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--violet);background:transparent;color:var(--ink);font-size:20px;cursor:pointer;line-height:1}
.pager-nav button:hover:not(:disabled){background:var(--violet);color:#fff}
.pager-nav button:disabled{opacity:.3;cursor:default}
.pg-n{font-size:.9rem;color:var(--slate);min-width:7em;text-align:center}
/* No AI badge sits under the section title, right above the work */
.sec-head + .sec-noai{margin-top:calc(-1 * clamp(10px,2vw,28px))}
/* verb pages: no banner; optional photo behind the title, left */
.p-top{position:relative}
.p-top.has-photo .p-photo{position:absolute;left:0;top:0;bottom:0;width:min(60%,900px);z-index:0;pointer-events:none;
 -webkit-mask-image:linear-gradient(90deg,#000 55%,transparent);mask-image:linear-gradient(90deg,#000 55%,transparent)}
.p-top.has-photo .p-photo img{width:100%;height:100%;object-fit:cover;opacity:.55}
.p-top.has-photo .p-title,.p-top.has-photo .intro{position:relative;z-index:1}
/* scripts: one row of small pages with the logo in the middle */
.script-grid.row5{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.6vw,20px)}
@media (max-width:820px){.script-grid.row5{grid-template-columns:repeat(2,minmax(0,1fr))}}
.script-link{display:block;color:inherit;text-decoration:none}
.script-grid.row5 .script-page{position:relative}
.script-logo-mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:78%;z-index:2;pointer-events:none}
.script-logo-mid img{width:100%;height:auto;background:none;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.script-grid.row5 .script-sheet img{filter:brightness(.92);transition:filter .2s,transform .2s}
.script-link:hover .script-sheet img{filter:brightness(1);transform:translateY(-3px)}
.script-open{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:2;white-space:nowrap;font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--violet);padding:5px 10px;border-radius:999px}
.script-grid.row5 h3{font-size:1rem;margin:.6em 0 .1em}.script-grid.row5 p{font-size:.85rem;margin:0}
.script-grid.row5 .script-sheet img{aspect-ratio:8.5/11;height:auto;object-fit:cover;object-position:top}
/* AI labels (2026-11-05): AI-assisted pill matches No AI used, in cyan */
.sec-yesai{background:rgba(54,214,231,.12);border-color:rgba(54,214,231,.6)}
.sec-yesai .noai{color:#36D6E7}
html:not(.studio) .sec-yesai{background:rgba(0,140,160,.08);border-color:rgba(0,140,160,.5)}
html:not(.studio) .sec-yesai .noai{color:#008CA0}
.sec-noai.sm{font-size:.72rem;padding:4px 10px 4px 4px;gap:7px;margin:0 10px 0 0;vertical-align:middle}
.sec-noai.sm .noai{width:22px;height:22px}
.ai-note .sec-noai{margin:0}
.ai-note .wrap{align-items:center}
.ai-how{font-weight:700;color:var(--violet);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.ai-how::after{content:" \2192"}
.ai-key{position:relative;z-index:2;padding:max(18px,2.4cqw) 0 0}
.sec-yesai svg{overflow:visible}
.world .ai-key .in{margin:max(16px,1.5cqw) var(--edge) 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,28px);border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(9,8,28,.55);backdrop-filter:blur(6px)}
.ai-key-t{margin:0;max-width:68ch;font-size:1rem;line-height:1.5}
.ai-key-b{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.ai-key .sec-noai,.ai-key-b .sec-noai{margin:0}
/* script panel stops at the bottom of the video beside it (JS sets the height; 2026-11-05) */
.s2s{align-items:start}
.s2s-script{min-height:0}
.s2s-in{flex:none}
.ai-u{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:#E35BFF}
/* ---- Script panel v2 (Nick, 2026-11-06): label above, video and panel level top and bottom, real script text ---- */
@font-face{font-family:"Script Mono";src:url(../fonts/liberation-mono-regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Script Mono";src:url(../fonts/liberation-mono-bold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Script Mono";src:url(../fonts/liberation-mono-italic.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}
.s2s{grid-template-areas:". k" "v b";row-gap:10px;align-items:start}
.s2s-k{grid-area:k;margin:0;color:#B3A4FF}
.s2s-v{grid-area:v;min-width:0}
.s2s-v video,.vid-round video{border-radius:18px;display:block;width:100%;background:#000}
.s2s-box{grid-area:b;position:relative;height:380px;min-width:0;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,rgba(92,52,200,.34),rgba(36,16,96,.55));border:1px solid rgba(179,164,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 44px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.s2s .s2s-in{position:absolute;inset:0;max-height:none;background:none;box-shadow:none;border-radius:0;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain;
  padding:26px 48px 34px 28px;font-family:"Script Mono","Courier Prime","Courier New",monospace;font-size:15px;line-height:1.6;color:#D6CCFF;
  -webkit-mask-image:linear-gradient(transparent 0,#000 22px,#000 calc(100% - 30px),transparent 100%);mask-image:linear-gradient(transparent 0,#000 22px,#000 calc(100% - 30px),transparent 100%)}
.s2s .s2s-in::-webkit-scrollbar{display:none}
.s2s .s2s-in:focus-visible{outline:none}
.s2s-box:focus-within{border-color:rgba(179,164,255,.6)}
.sp p{margin:0}
.sp .sp-h{margin:0 0 1.1em;font-weight:700;color:#fff;letter-spacing:.03em}
.sp .sp-a{margin:0 0 1.1em;color:#C9BDF9}
.sp .sp-d{margin:0 0 1.1em;padding:0 6% 0 14%;color:#ECE6FF}
.sp .sp-c{padding-left:18%;font-weight:700;color:#fff;letter-spacing:.06em}
.sp .sp-p{padding-left:9%;font-style:italic;color:#A595EE}
.s2s-bar{position:absolute;top:16px;bottom:16px;right:8px;width:22px;cursor:pointer;touch-action:none}
.s2s-bar::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;border-radius:4px;background:rgba(179,164,255,.2)}
.s2s-dot{position:absolute;left:50%;top:0;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#C4B8FF;
  box-shadow:0 0 0 4px rgba(179,164,255,.18),0 0 14px rgba(179,164,255,.7);transition:box-shadow .2s,background .2s;will-change:transform}
.s2s-bar:hover .s2s-dot,.s2s-bar.drag .s2s-dot{background:#fff;box-shadow:0 0 0 6px rgba(179,164,255,.25),0 0 18px rgba(196,184,255,.9)}
@media (max-width:820px){
  .s2s{grid-template-columns:1fr;grid-template-areas:"v" "k" "b"}
  .s2s-box{height:min(62vh,420px)}
  .s2s .s2s-in{font-size:13.5px;padding:20px 40px 28px 18px}
  .sp .sp-d{padding:0 2% 0 8%}.sp .sp-c{padding-left:14%}
}
/* Section headers (Nick, 2026-11-06): paragraph sits close to the title, reads wide, split by the thin purple line
   used on the home page ("Let me tell you a story" | The challenge...). Home page uses its own header and is unchanged. */
.sec-head{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.sec-head > h1,.sec-head > h2{flex:none;margin:0}
.sec-head > p{flex:1 1 auto;max-width:86ch;padding-left:clamp(18px,2.4vw,34px);border-left:2px solid var(--acc-line,rgba(91,61,245,.55));line-height:1.55}
@media (max-width:820px){.sec-head{flex-direction:column;align-items:flex-start;gap:12px}.sec-head > p{padding-left:14px}}
.work-grid.row3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.work-grid.row3{grid-template-columns:1fr}}
.block .sec-head > h2{max-width:min(50%,20ch);flex:0 1 auto;text-wrap:balance}
@media (max-width:820px){.block .sec-head > h2{max-width:none}}
/* Script panel a little darker (Nick, 2026-11-06) */
.s2s-box{background:linear-gradient(160deg,rgba(58,30,140,.5),rgba(20,8,62,.78))}
/* Director chart, full width on I direct */
.dweb-block .dweb{max-width:1100px;margin:0 auto}
/* Voice direction players */
.vcard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.vcard{display:flex;align-items:center;gap:clamp(14px,2vw,24px);padding:clamp(16px,2vw,24px);border-radius:18px;
  background:linear-gradient(160deg,rgba(58,30,140,.5),rgba(20,8,62,.78));border:1px solid rgba(179,164,255,.26);box-shadow:0 18px 44px rgba(0,0,0,.3)}
.vc-face{flex:none;width:clamp(84px,9vw,120px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 35%,#5a3fd0,#22125e);border:2px solid rgba(179,164,255,.45)}
.vc-face img{width:100%;height:100%;object-fit:cover;object-position:50% 6%;transform:scale(1.9);transform-origin:50% 12%}
.vc-main{flex:1;min-width:0}
.vc-k{margin:0;font-weight:800;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#B3A4FF}
.vc-main h3{margin:2px 0 10px;font-size:clamp(1.3rem,2vw,1.7rem)}
.vc-row{display:flex;align-items:center;gap:12px}
.vc-play{flex:none;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:#14082e;background:#C4B8FF;box-shadow:0 0 0 5px rgba(179,164,255,.18),0 0 18px rgba(179,164,255,.55);transition:transform .15s,background .15s}
.vc-play:hover{background:#fff;transform:scale(1.06)}
.vc-play svg{width:20px;height:20px}.vc-play .i-pause{display:none}
.vcard.playing .vc-play .i-play{display:none}.vcard.playing .vc-play .i-pause{display:block}
.vc-wave{position:relative;flex:1;height:48px;cursor:pointer;touch-action:none}
.vc-wave svg{position:absolute;inset:0;width:100%;height:100%}
.vc-base svg{fill:rgba(179,164,255,.3)}
.vc-fill{position:absolute;inset:0;clip-path:inset(0 100% 0 0)}
.vc-fill svg{fill:#E2DAFF}
.vc-wave:focus-visible{outline:2px solid #C4B8FF;outline-offset:4px;border-radius:4px}
.vc-t{flex:none;font-variant-numeric:tabular-nums;font-size:.9rem;color:#C9BDF9;min-width:3.2em;text-align:right}
.vc-cap{margin:10px 0 0;font-size:.92rem;color:#B9AEE6}
@media (max-width:900px){.vcard-grid{grid-template-columns:1fr}}
/* Maya: face sits left of center in the art; move her focal point to the middle of the circle */
.vc-maya img{object-position:50% 0;transform-origin:36% 30%;transform:translate(14%,20%) scale(2.05)}
/* Verb page photo band (Nick, 2026-11-06): photo right, fading into solid dark behind the title on the left */
.vhero{position:relative;overflow:hidden;background:var(--paper);min-height:clamp(380px,38vw,600px);display:flex;align-items:center}
.vh-img{position:absolute;top:0;right:0;bottom:0;width:70%}
.vh-img img{width:100%;height:100%;object-fit:cover;display:block}
.vh-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--paper) 0%,color-mix(in srgb,var(--paper) 88%,transparent) 14%,color-mix(in srgb,var(--paper) 35%,transparent) 36%,transparent 58%),
             linear-gradient(0deg,var(--paper) 0%,transparent 26%),linear-gradient(180deg,color-mix(in srgb,var(--paper) 55%,transparent) 0%,transparent 18%)}
.vh-in{position:relative;z-index:1;width:100%;padding-block:clamp(40px,6vw,90px)}
.vh-in .kick{font-weight:600;font-stretch:112%;color:#C9BDF9;margin:0 0 .6em;font-size:1.05rem}
.vh-in h1{font-size:clamp(2.6rem,7vw,6rem);margin:0;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.vh-in .lead{max-width:24ch;margin:.6em 0 0;text-shadow:0 1px 16px rgba(0,0,0,.6)}
.vh-after{padding-top:clamp(20px,3vw,40px)}
.vh-after .intro-l .facts{margin-top:0}
@media (max-width:820px){
  .vhero{display:block;min-height:0}
  .vh-img{position:relative;width:100%;height:auto;aspect-ratio:16/10}
  .vh-img::after{background:linear-gradient(0deg,var(--paper) 0%,transparent 45%)}
  .vh-in{margin-top:-90px;padding-block:0 24px}
}
.vhero.vh-write .vh-img::after{background:linear-gradient(90deg,var(--paper) 0%,color-mix(in srgb,var(--paper) 92%,transparent) 20%,color-mix(in srgb,var(--paper) 55%,transparent) 40%,transparent 62%),linear-gradient(0deg,var(--paper) 0%,transparent 26%),linear-gradient(180deg,color-mix(in srgb,var(--paper) 55%,transparent) 0%,transparent 18%)}
@media (max-width:820px){.vhero.vh-write .vh-img::after{background:linear-gradient(0deg,var(--paper) 0%,transparent 45%),linear-gradient(90deg,color-mix(in srgb,var(--paper) 70%,transparent),transparent 45%)}}
.vhero{padding:0}
@media (max-width:820px){.vh-img{aspect-ratio:4/3}.vh-in{margin-top:-64px}}
/* Shorter photo band (Nick, 2026-11-06) */
.vhero{min-height:clamp(300px,27vw,430px)}
.vh-in{padding-block:clamp(28px,3.5vw,56px)}
.vh-in h1{font-size:clamp(2.4rem,6vw,5rem)}
.vh-after{padding-top:clamp(12px,2vw,28px)}
@media (max-width:820px){.vh-img{aspect-ratio:16/10}.vh-in{margin-top:-56px;padding-block:0 16px}}
/* Home tiles (CL34) */
.st-apex-academy .st-logo{width:min(30%,120px)}
.st-ph{position:absolute;inset:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:16px;border:2px dashed #b8860b;border-radius:8px;background:#FFC83D;color:#4a3600}
.st-ph b{font-size:1.05rem}.st-ph span{font-size:.85rem}
/* Rounded corners on every video on the site (Nick, CL34). The home hero screen sits in a painted frame and stays square. */
.vid video,.popv,.story-vids video,.vid-solo video,.pipe video{border-radius:18px;overflow:hidden}
.loop-grid .vid video{border-radius:14px}
.promo-stage{border-radius:18px;overflow:hidden}
/* lightbox prev/next */
dialog.lb .lb-prev,dialog.lb .lb-next{display:none;top:50%;transform:translateY(-50%);right:auto;width:52px;height:52px;padding:0;border-radius:50%;font-size:2rem;line-height:1;background:rgba(255,255,255,.92)}
dialog.lb .lb-prev{left:16px}dialog.lb .lb-next{right:16px;left:auto}
dialog.lb.multi .lb-prev,dialog.lb.multi .lb-next{display:block}
/* ---- CL34 ---- */
/* project tiles: season count tag */
.tile .ti{position:relative}
.tile-tag{position:absolute;top:12px;right:12px;z-index:1;padding:6px 12px;border-radius:999px;background:#C44BFF;color:#fff;font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 4px 14px rgba(0,0,0,.4)}
/* yellow to-do tag over videos Nick still has to finish */
.todo-wrap{position:relative}
.todo-tag{position:absolute;top:14px;left:14px;right:14px;z-index:3;padding:12px 16px;border-radius:10px;background:#FFC83D;color:#3a2a00;border:2px dashed #8a6400;font-size:1rem;line-height:1.35;box-shadow:0 8px 24px rgba(0,0,0,.45);pointer-events:none}
html.hide-slots .todo-tag,body.hide-slots .todo-tag{display:none}
/* artist assignment board: close-up 3/4, board links 1/4, same height */
.ab-split{display:grid;grid-template-columns:3fr 1fr;gap:clamp(12px,1.6vw,20px);align-items:stretch}
.ab-split .ab-main{margin:0}.ab-split .ab-main img{width:100%;height:auto;display:block;border-radius:12px;cursor:zoom-in}
.ab-links{display:grid;grid-template-rows:repeat(3,1fr);gap:clamp(10px,1.2vw,16px);min-height:0}
.ab-link{position:relative;margin:0;border-radius:12px;overflow:hidden;min-height:0;border:1px solid rgba(179,164,255,.3);cursor:zoom-in}
.ab-link img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .3s}
.ab-link:hover img{transform:scale(1.05)}
.ab-link figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:22px 12px 10px;background:linear-gradient(transparent,rgba(9,8,28,.92));color:#fff;font-weight:800;pointer-events:none}
.ab-link figcaption span{display:block;font-weight:600;font-size:.8rem;color:#C4B8FF}
@media (max-width:820px){.ab-split{grid-template-columns:1fr}.ab-links{grid-template-rows:none;grid-template-columns:repeat(3,1fr)}.ab-link{aspect-ratio:3/4}}
/* director chart: energy flowing out along each line, soft pulse at the center */
.dweb .wf line{stroke:#E2B8FF;stroke-width:3;stroke-dasharray:6 94;stroke-linecap:round;animation:wflow 2.4s linear infinite;opacity:.9}
.dweb .wf line:nth-child(3n+2){animation-delay:-.8s}.dweb .wf line:nth-child(3n){animation-delay:-1.6s}
@keyframes wflow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.dweb .wpulse{fill:none;stroke:#C44BFF;stroke-width:3;transform-box:fill-box;transform-origin:center;animation:wpulse 3s ease-out infinite}
.dweb .wpulse.w2{animation-delay:1.5s}
@keyframes wpulse{from{transform:scale(1);opacity:.7}to{transform:scale(1.9);opacity:0}}
.dweb .wn rect{transition:stroke-opacity .2s,fill .2s}
.dweb .wn:hover rect{stroke-opacity:1;fill:#2a1c66}
@media (prefers-reduced-motion:reduce){.dweb .wf line,.dweb .wpulse{animation:none}.dweb .wf{display:none}}
.arc-note{max-width:86ch;margin:0 0 clamp(16px,2vw,24px);padding-left:clamp(18px,2.4vw,34px);border-left:2px solid var(--acc-line,rgba(91,61,245,.55));line-height:1.6}
.s2s-box.s2s-ph{display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:#B9AEE6}
.vid-grid2 > .slot.vslot{aspect-ratio:16/9;min-height:0;height:auto}
.block.thanks{padding-block:clamp(24px,3vw,40px)}
.block.thanks p{max-width:70ch;margin:0;font-size:1.05rem;color:#C9BDF9;font-style:italic}
.s2s-v .slot.vslot{aspect-ratio:16/9;min-height:0;height:auto}
.s2s:has(.s2s-ph){align-items:stretch}.s2s-box.s2s-ph{height:auto}
/* ---- I make, CL34 ---- */
.ba-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ba-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ba-grid + .ba-grid{margin-top:clamp(18px,2.6vw,34px)}
@media (max-width:820px){.ba-grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ba-grid.c2,.ba-grid.c3{grid-template-columns:1fr}}
/* logos a bit larger, exploration smaller and denser */
.logos-lg .logos{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.logos-lg .logos .fig{min-height:170px;padding:26px}
.logos-lg .logos .fig img{max-height:132px}
.lx-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.2vw,14px)}
.lx-grid .fig{margin:0}.lx-grid .fig img{aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.lx-grid figcaption{font-size:.8rem;margin-top:5px;color:var(--slate)}
@media (max-width:820px){.lx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Cubie: art plus two tutorials side by side */
.cubie.two{grid-template-columns:minmax(0,3fr) minmax(0,9fr)}
@media (max-width:820px){.cubie.two{grid-template-columns:1fr}}
/* storyboard decks */
.deck-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
@media (max-width:1100px){.deck-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.deck-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.deck h3{font-size:1rem;margin:12px 0 2px}.deck span{font-size:.8rem;color:var(--slate)}
.deck-stack{position:relative;aspect-ratio:3/4}
.deck-stack img{position:absolute;inset:6% 6% 0 6%;width:88%;height:88%;object-fit:cover;object-position:top;background:#fff;border-radius:6px;box-shadow:0 8px 22px rgba(0,0,0,.45);transition:transform .3s}
.deck-stack img.dk0{z-index:3;cursor:zoom-in}
.deck-stack img.dk1{z-index:2;transform:rotate(-6deg) translate(-6%,2%);pointer-events:none}
.deck-stack img.dk2{z-index:1;transform:rotate(6deg) translate(6%,3%);pointer-events:none}
.deck-stack:hover img.dk1{transform:rotate(-10deg) translate(-12%,2%)}
.deck-stack:hover img.dk2{transform:rotate(10deg) translate(12%,3%)}
.deck-stack img[hidden]{display:none}
/* board to screen */
.bf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.8vw,22px)}
.bf{margin:0}.bf-pair{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.bf-pair img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:#fff;cursor:zoom-in}
.bf figcaption{font-size:.85rem;margin-top:6px;color:var(--slate)}
@media (max-width:820px){.bf-grid{grid-template-columns:1fr}}
/* icons denser */
.isheet.sm{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}.isheet.sm img{height:72px}
.isheet.xs{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}.isheet.xs img{height:48px}
.isheet.map.sm{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}.isheet.map.sm img{height:82px}
.isheet.sm.flags img{height:96px}
.ic-cols{display:grid;grid-template-columns:3fr 2fr;gap:clamp(14px,2vw,28px)}
@media (max-width:820px){.ic-cols{grid-template-columns:1fr}}
.block h4{font-size:.95rem;margin:clamp(14px,2vw,22px) 0 8px;color:var(--slate);font-weight:700}
/* print: best four big, the rest six to a row */
.print-grid.top4{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:clamp(12px,1.8vw,22px)}
.print-grid.dense{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,1.2vw,14px)}
.print-grid.dense .fig figcaption{font-size:.78rem}
@media (max-width:980px){.print-grid.dense{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.print-grid.top4{grid-template-columns:repeat(2,minmax(0,1fr))}.print-grid.dense{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* illustration */
.sam-hero{margin:0}.sam-hero img{border-radius:12px}
.sam-note{max-width:86ch;margin:10px 0 clamp(14px,2vw,22px)}
.bus-slot{margin-bottom:clamp(18px,2.6vw,30px)}
.sc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.2vw,14px)}
.sc-grid .fig{margin:0}.sc-grid .fig img{aspect-ratio:16/10;object-fit:cover;border-radius:6px}
@media (max-width:820px){.sc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.char-row{display:grid;grid-template-columns:1fr 180px;gap:clamp(10px,1.4vw,18px);align-items:stretch}
.char-row .ego-slot{min-height:0;height:100%}
@media (max-width:820px){.char-row{grid-template-columns:1fr}}
.sc-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
@media (max-width:980px){.sc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.sc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.char-row .tcast{flex-wrap:nowrap}
.ui-grid.g5{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.2vw,14px)}
.ui-grid.g5 .vid figcaption span{display:none}
.ui-grid.g5 .slot.vslot{aspect-ratio:auto;min-height:0}
@media (max-width:980px){.ui-grid.g5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.ui-grid.g5{grid-template-columns:repeat(2,minmax(0,1fr))}}
.logos-lg > div > .logos{grid-template-columns:repeat(4,minmax(0,1fr))}
.vid-feature{max-width:960px;margin:0 auto clamp(18px,2.6vw,32px)}
.vid-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
@media (max-width:820px){.vid-grid3{grid-template-columns:1fr}}
.char-row{grid-template-columns:minmax(0,1fr) 150px}.char-row .ego-slot{padding:14px}
/* Quest story parts (CL34): 01 challenge, 02 solution, 03 impact */
.part{padding:clamp(36px,5vw,64px) 0 clamp(4px,1vw,10px);border-top:1px solid var(--rule)}
.part .wrap{display:flex;align-items:baseline;gap:clamp(12px,1.6vw,20px)}
.part-n{font-weight:900;font-stretch:125%;font-size:clamp(1.2rem,2vw,1.6rem);color:#C44BFF;letter-spacing:.06em}
.part h2{margin:0;font-size:clamp(2.2rem,5vw,4rem);background:linear-gradient(90deg,#fff,#CBB8FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.part + .block{border-top:0;padding-top:clamp(16px,2vw,28px)}
.print-grid.e7{grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(8px,1.2vw,14px)}
.print-grid.e7 .fig figcaption{font-size:.78rem}
@media (max-width:980px){.print-grid.e7{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.print-grid.e7{grid-template-columns:repeat(2,minmax(0,1fr))}}
.one-row .tcast{flex-wrap:nowrap}
.c-explode{margin:0}.c-explode img{width:100%;border-radius:12px}
.block .vid-solo{margin-inline:auto}
/* ---- Starforce, CL35 ---- */
.sf-logo-hero{display:grid;place-items:center;padding:clamp(20px,4vw,48px) 0}
.sf-logo-hero img{width:min(760px,90%);height:auto;filter:drop-shadow(0 12px 30px rgba(0,0,0,.45))}
.crew-row{display:grid;grid-template-columns:1fr 170px;gap:clamp(10px,1.4vw,18px);align-items:stretch}
.crew-row .bubbles-slot{min-height:0;height:100%}
@media (max-width:820px){.crew-row{grid-template-columns:1fr}}
.explorer{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(14px,2vw,28px);align-items:start}
.ex-hero{margin:0}.ex-hero img{border-radius:14px}
.ex-themes .sub-h{margin-top:0}
.ex-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1.2vw,14px)}
.ex-grid .fig{margin:0}.ex-grid .fig img{aspect-ratio:4/3;object-fit:contain;background:var(--card);border-radius:8px;padding:6px}
.ex-grid .fig figcaption{font-size:.8rem}
.ex-grid .ex-slot{min-height:0;aspect-ratio:4/3;padding:12px}
@media (max-width:820px){.explorer{grid-template-columns:1fr}}
.sf-pack{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,24px);align-items:stretch}
.sf-pack .slip-slot{min-height:220px}
@media (max-width:820px){.sf-pack{grid-template-columns:1fr}}
.pitch-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(18px,3vw,40px);align-items:center}
.pitch-split p{margin:0 0 1em;max-width:60ch}
@media (max-width:820px){.pitch-split{grid-template-columns:1fr}}
.todo-inline{display:inline-block;margin:0 0 clamp(12px,1.8vw,20px);padding:12px 16px;border-radius:10px;background:#FFC83D;color:#3a2a00;border:2px dashed #8a6400;font-size:1rem}
html.hide-slots .todo-inline{display:none}
/* layered storyboard row */
.layer-row{position:relative;height:clamp(240px,30vw,420px);margin:0 0 10px}
.layer-row .lr{position:absolute;top:0;margin:0;width:46%;left:calc(var(--i) * 18%);z-index:calc(10 - var(--i));transition:transform .3s,box-shadow .3s;cursor:pointer}
.layer-row .lr img{width:100%;height:auto;max-height:clamp(240px,30vw,420px);object-fit:contain;background:#fff;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.layer-row .lr:hover{transform:translateY(-6px)}
.layer-row .lr.front{z-index:20;transform:translateY(-10px) scale(1.02)}
.layer-row .lr.front img{cursor:zoom-in;box-shadow:0 18px 44px rgba(0,0,0,.6)}
/* ---- Independent, CL35 ---- */
.yt-split{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(16px,2.6vw,36px);align-items:center}
.yt{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 18px 44px rgba(0,0,0,.45)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-txt h3{font-size:clamp(1.6rem,2.6vw,2.2rem);margin:.2em 0 .4em}
.yt-txt .sec-noai{margin:6px 0 10px}
@media (max-width:820px){.yt-split{grid-template-columns:1fr}}
.mercs-row{display:grid;grid-template-columns:3fr 1fr;gap:clamp(10px,1.6vw,20px);align-items:stretch}
.mercs-row .mercs-slot{min-height:0;height:100%}
@media (max-width:820px){.mercs-row{grid-template-columns:1fr}}
/* sketchbook */
.sketchbook{position:relative;max-width:980px;margin:0 auto;padding:clamp(18px,2.4vw,30px) clamp(18px,2.4vw,30px) 14px clamp(40px,4.4vw,58px);
  background:linear-gradient(#f7f1e3,#efe6d2);border-radius:6px 16px 16px 6px;box-shadow:0 2px 0 #d8ccb2,0 4px 0 #cfc2a6,0 22px 50px rgba(0,0,0,.5)}
.sk-rings{position:absolute;left:12px;top:18px;bottom:18px;width:18px;background:radial-gradient(circle at 9px 9px,#2b2b33 5px,#9b9ba6 6px,#5c5c66 8px,transparent 9px) 0 0/18px 34px repeat-y}
.sk-pages{position:relative;aspect-ratio:16/10;perspective:1400px}
.sk-page{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .35s;display:grid;place-items:center}
.sk-page.on{opacity:1;z-index:1}
.sk-page img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 2px 8px rgba(0,0,0,.25);cursor:zoom-in}
.sketchbook.flip .sk-page.on{animation:skflip .45s ease-out}
@keyframes skflip{from{transform:rotateY(-12deg);transform-origin:left center;opacity:.2}to{transform:none;opacity:1}}
.sk-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:12px;color:#5b4a2a;font-weight:700}
.sk-nav button{width:42px;height:42px;border-radius:50%;border:2px solid #5b4a2a;background:transparent;color:#5b4a2a;font-size:1.6rem;line-height:1;cursor:pointer}
.sk-nav button:hover{background:#5b4a2a;color:#f7f1e3}
@media (prefers-reduced-motion:reduce){.sketchbook.flip .sk-page.on{animation:none}}
.layer-row{height:auto;aspect-ratio:1/0.33}.layer-row .lr img{max-height:none}
.yt-txt h2{font-size:clamp(2rem,3.4vw,3rem);margin:.15em 0 .4em;line-height:1.02}
.ba-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}@media (max-width:820px){.ba-grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.print-grid.dense.g5{grid-template-columns:repeat(5,minmax(0,1fr))}@media (max-width:640px){.print-grid.dense.g5{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ui-grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.isheet.sf-icons{grid-template-columns:repeat(7,minmax(0,1fr))}
@media (max-width:820px){.ui-grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.isheet.sf-icons{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Season sections (CL37) */
.sz-pack{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(12px,2vw,24px);align-items:center}
.sz-pack > .fig{margin:0}
.sz-pack .row,.sz-pack > div:last-child{min-width:0}
.sz-art{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:clamp(10px,1.6vw,18px);align-items:stretch}
.sz-poster{margin:0}.sz-poster img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.sz-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,18px)}
.sz-tiles .fig{margin:0}.sz-tiles .fig img{aspect-ratio:16/10;object-fit:cover;border-radius:6px;height:100%}
@media (max-width:820px){.sz-pack,.sz-art{grid-template-columns:1fr}.sz-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.sz-poster{max-width:280px}}
.sf-scenes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.2vw,14px)}
.sf-scenes .fig{margin:0}.sf-scenes .fig img{aspect-ratio:16/10;object-fit:cover;border-radius:6px}
@media (max-width:820px){.sf-scenes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sf-logo-hero{padding:clamp(12px,2.4vw,30px) 0 clamp(16px,2.6vw,32px)}
.promo-wide .promo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.promo-wide .promo-grid{grid-template-columns:1fr}}
.pitch-vids{display:grid;gap:clamp(14px,2vw,24px)}
.yt-play{position:absolute;inset:0;padding:0;border:0;background:#000;cursor:pointer;display:block;width:100%;height:100%}
.yt-play img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9;transition:opacity .2s}
.yt-play:hover img{opacity:1}
.yt-btn{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#C44BFF,#6F7CFF);box-shadow:0 0 0 6px rgba(255,255,255,.18),0 12px 30px rgba(0,0,0,.5);transition:transform .2s}
.yt-btn svg{width:38px;height:38px;margin-left:4px}
.yt-play:hover .yt-btn{transform:scale(1.07)}
/* small "made by me" reminders on I make (CL43) */
.sec-tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 clamp(14px,2vw,22px)}
.sec-head + .sec-tags{margin-top:calc(-1 * clamp(10px,2vw,28px))}
.sec-tags .sec-noai{margin:0}
.made-by{display:inline-flex;align-items:center;gap:7px;font-size:.92rem;color:#C9BDF9;font-weight:600}
.made-by svg{width:16px;height:16px;color:#C44BFF}
html:not(.studio) .made-by{color:var(--slate)}
.print-grid.sf2{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:clamp(10px,1.6vw,18px)}
.print-grid.sf2 .fig img{aspect-ratio:16/10}
.print-grid.sfpass{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:640px){.print-grid.sf2{grid-template-columns:1fr}.print-grid.sfpass{grid-template-columns:repeat(2,minmax(0,1fr))}}
.print-grid.sfpass{max-width:860px}
/* Illustration scenes: alternating rows of 3 and 5 (CL45) */
.sc-row{display:grid;gap:clamp(10px,1.4vw,16px);margin-bottom:clamp(10px,1.4vw,16px)}
.sc-row.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.sc-row.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.sc-row .fig{margin:0}.sc-row .fig img{aspect-ratio:16/10;object-fit:cover;border-radius:8px}
@media (max-width:820px){.sc-row.c3,.sc-row.c5{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* scenes at full aspect ratio (CL47) */
.sc-row{display:flex;gap:clamp(10px,1.4vw,16px);margin-bottom:clamp(10px,1.4vw,16px);align-items:flex-start}
.sc-row .fig{flex:var(--r) 1 0;min-width:0;margin:0}
.sc-row .fig img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:8px;display:block}
@media (max-width:820px){.sc-row{flex-wrap:wrap}.sc-row .fig{flex:1 1 45%}}
/* ---- Change log 49: popcorn play treatment on the Sword of Powerful cover ---- */
.yt.popv{border-radius:18px}
.yt-play .ws-play{pointer-events:none}
.yt-play .ws-play img{width:1.25em;height:auto;opacity:1}
.yt-play:hover .ws-btn{transform:scale(1.08);box-shadow:0 0 36px rgba(230,120,255,.85),0 6px 20px rgba(4,2,20,.5)}
.yt-play:focus-visible .ws-btn{outline:2px solid #fff;outline-offset:4px}
/* ---- Change log 50: painting from imagination (I direct) ---- */
.imag-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,4vw,56px);align-items:center}
.imag-txt p{margin:0 0 1em;max-width:62ch}
.imag-q{margin:0;padding:clamp(18px,2.4vw,30px) clamp(20px,2.6vw,34px);border-left:4px solid #E040FF;background:rgba(139,75,255,.12);border-radius:0 16px 16px 0}
.imag-q p{margin:0 0 .8em;font:600 clamp(1.15rem,1.7vw,1.45rem)/1.45 "Archivo",sans-serif;color:#fff}
.imag-q cite{font-style:normal;font-size:.9rem;color:#CFC6EE}
@media (max-width:820px){.imag-split{grid-template-columns:1fr}}
/* ---- Change log 52 ---- */
/* Next story: a real button */
.next-block{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(40px,6vw,80px)}
a.next{display:inline-flex;align-items:center;gap:clamp(16px,2.4vw,32px);padding:clamp(14px,1.6vw,20px) clamp(18px,2vw,26px) clamp(14px,1.6vw,20px) clamp(24px,2.6vw,34px);
 border:2px solid rgba(224,64,255,.75);border-radius:999px;background:linear-gradient(135deg,rgba(224,64,255,.16),rgba(139,75,255,.22));
 box-shadow:0 0 0 1px rgba(236,170,255,.15),0 10px 30px rgba(4,2,20,.35);text-decoration:none;color:#fff;transition:transform .2s,box-shadow .2s,background .2s}
a.next:hover,a.next:focus-visible{transform:translateY(-2px);background:linear-gradient(135deg,rgba(224,64,255,.3),rgba(139,75,255,.36));box-shadow:0 0 26px rgba(224,64,255,.45),0 12px 34px rgba(4,2,20,.45);color:#fff}
.next-txt{display:grid;gap:2px}
.next-k{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#E6D8FF}
.next-t{font:800 clamp(1.3rem,2.4vw,2rem)/1.15 "Archivo",sans-serif;font-stretch:112%}
.next-arrow{display:grid;place-items:center;width:clamp(44px,4vw,56px);height:clamp(44px,4vw,56px);border-radius:50%;background:linear-gradient(135deg,#E040FF,#8B4BFF);color:#fff;flex:none;transition:transform .2s}
.next-arrow svg{width:52%;height:52%}
a.next:hover .next-arrow{transform:translateX(4px)}
/* Seasons: poster, big box, small boxes */
.sz-pack3{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(0,3.6fr) minmax(0,4.1fr);gap:clamp(12px,1.8vw,22px);align-items:center}
.sz-pack3 .fig{margin:0}
.sz-pack3 .sz-poster img{width:100%;height:auto;object-fit:contain;border-radius:8px}
.sz-pack3 .sz-big img{width:100%;height:auto;object-fit:contain}
.sz-small{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1.2vw,14px)}
.sz-small .fig img{width:100%;height:auto;object-fit:contain}
.sz-small:has(> :nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){.sz-pack3{grid-template-columns:1fr 1.4fr}.sz-small{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Seasons: compact header with a three-step journey */
.season-head.sh2{padding:clamp(36px,4.5vw,64px) 0 clamp(8px,1.2vw,16px)}
.sh2-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:clamp(18px,3vw,44px);align-items:center}
.sh2 h2{font-size:clamp(2.2rem,4.6vw,3.8rem);margin:0}
.sh2 .lead{font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.45;margin:.5em 0 0}
.journey{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,40px);position:relative}
.jstep{position:relative;padding:clamp(14px,1.4vw,18px) clamp(14px,1.4vw,18px) clamp(12px,1.2vw,16px);border:2px solid rgba(157,91,255,.55);border-radius:14px;background:rgba(20,12,52,.72)}
html:not(.studio) .jstep{background:var(--card)}
.jstep h3{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:#C9A6FF;margin:0 0 .45em;font-stretch:112%}
.jstep p{margin:0;font-size:.92rem;line-height:1.5}
.jnum{position:absolute;top:-14px;left:14px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:800 .8rem/1 "Archivo",sans-serif;color:#fff;background:linear-gradient(135deg,#E040FF,#8B4BFF);box-shadow:0 0 0 3px var(--deep,#0b0820)}
.jstep:not(:last-child)::after{content:"";position:absolute;top:50%;right:calc(-1 * clamp(22px,3vw,40px));width:clamp(22px,3vw,40px);border-top:3px dotted #E040FF;transform:translateY(-50%)}
.jstep:not(:last-child)::before{content:"";position:absolute;top:50%;right:calc(-1 * clamp(22px,3vw,40px) - 2px);border:6px solid transparent;border-left-color:#E040FF;transform:translate(100%,-50%);z-index:1}
@media (max-width:980px){.sh2-grid{grid-template-columns:1fr}}
@media (max-width:700px){.journey{grid-template-columns:1fr;gap:28px}.jstep:not(:last-child)::after{top:auto;bottom:-28px;right:auto;left:30px;width:0;height:28px;border-top:0;border-left:3px dotted #E040FF;transform:none}.jstep:not(:last-child)::before{display:none}}
/* Starforce crew, waist up */
.crew-waist{display:flex;justify-content:center;align-items:flex-end;gap:clamp(8px,1.2vw,16px)}
.cw{margin:0;flex:0 1 var(--w);min-width:0;display:flex;flex-direction:column;align-items:center}
.cw-frame{width:100%;aspect-ratio:var(--ar);border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#3a2a86,#22185a);border:2px solid rgba(236,170,255,.45);display:flex;align-items:flex-end;justify-content:center}
.cw-frame img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;display:block}
.cw figcaption{margin-top:8px;font-weight:700;font-size:.95rem}
@media (max-width:700px){.crew-waist{flex-wrap:wrap}.cw{flex-basis:30%}}
/* Pitching for motion: smaller videos */
.pitch-vids2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px);max-width:900px}
@media (max-width:700px){.pitch-vids2{grid-template-columns:1fr}}
.sf-kit{max-width:560px;margin:0 auto}
.sf-kit .fig img{width:100%;height:auto;object-fit:contain}
.sec-head h2 .grad{display:inline}
.season-head.sh2 + .block{padding-top:clamp(18px,2.4vw,34px)}
.c-explode{max-width:1100px;margin-left:auto;margin-right:auto}
/* CL52b: poster left, slip box over the episode boxes on the right */
.sz-pack4{display:grid;gap:clamp(12px,1.6vw,20px);align-items:stretch}
.sz-pack4 .fig{margin:0}
.sz-pack4 .sz-poster{height:100%}
.sz-pack4 .sz-poster img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block}
.sz-right{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,20px);min-width:0}
.sz-right .sz-big img{width:100%;height:auto;display:block}
.sz-right .sc-row{margin-bottom:0}
@media (max-width:820px){.sz-pack4{grid-template-columns:1fr !important}.sz-pack4 .sz-poster{max-width:340px;height:auto}.sz-pack4 .sz-poster img{height:auto}}
/* CL52b: poster and slip box side by side, episode boxes underneath (Nick's earlier layout) */
.sz-pack5 .sz-top{display:grid;gap:clamp(10px,1.4vw,16px);margin-bottom:clamp(10px,1.4vw,16px)}
.sz-pack5 .fig{margin:0}
.sz-pack5 .sz-top img{width:100%;height:auto;display:block}
.sz-pack5 .sz-poster img{border-radius:8px}
.sz-pack5 .sc-row{margin-bottom:0}
.sz-pack5 .sz-row{margin:0 auto}
/* CL53: Starforce crew boxes all the same size */
.crew-waist .cw{flex:1 1 0}
.crew-waist .cw-frame{aspect-ratio:1/1.05}
.crew-waist .cw-frame img{width:92%;height:94%;object-fit:contain;object-position:50% 100%}
/* Explorer upgrade clip spans the side grid */
.ex-vid{grid-column:1/-1}
.ex-vid .vid{margin:0}
.ex-vid video{border-radius:10px;width:100%;display:block}
.ex-left{display:grid;gap:clamp(12px,1.6vw,20px)}
.slot.mm-hero{min-height:clamp(280px,36vw,520px)}
/* CL57: MERCS phone app gameplay in a phone frame beside the board */
.mercs-play{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(16px,2.4vw,32px);align-items:center;margin-top:clamp(12px,2vw,24px)}
.mercs-play .fig{margin:0}
.phone{margin:0}
.phone-frame{border-radius:34px;padding:10px;background:linear-gradient(160deg,#2a2f3a,#0c0e14);box-shadow:0 0 0 2px #3a4152,0 18px 44px rgba(0,0,0,.5);max-width:300px;margin:0 auto}
.phone-frame video{display:block;width:100%;aspect-ratio:540/968;border-radius:26px;background:#000}
.phone figcaption{max-width:300px;margin:10px auto 0}
.phone figcaption b{display:block}.phone figcaption span{font-size:.9rem;color:var(--slate)}
@media (max-width:820px){.mercs-play{grid-template-columns:1fr}}
.mercs-row{grid-template-columns:1fr}
.phone-vid{max-width:340px;margin:0 auto;border-radius:18px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.45)}
.phone-vid video{display:block;width:100%;aspect-ratio:720/1280}
.phone figcaption{max-width:340px}
/* CL59: landscape app video, full width above the board */
.mercs-play{grid-template-columns:1fr}
.phone-vid{max-width:none;border-radius:14px}
.phone-vid video{aspect-ratio:16/9}
.phone figcaption{max-width:none;margin-top:10px}
/* ---- CL62: Independent games ---- */
.gz-hero{margin:0 0 clamp(14px,2vw,24px)}.gz-hero img{border-radius:12px}
.sub-p{margin:-.4em 0 clamp(10px,1.4vw,16px);max-width:70ch}
.gz-rooms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,20px)}
.gz-rooms .fig{margin:0}.gz-rooms img{border-radius:14px}
.gz-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:clamp(14px,2vw,28px);align-items:center;margin-top:clamp(16px,2.4vw,32px)}
.gz-row .fig{margin:0}.gz-xp{display:grid;gap:10px;justify-items:center}.gz-xp img{width:min(130px,100%);height:auto}
/* card spread: rounded like real cards, fanned with perspective */
.cardfan{display:flex;justify-content:center;perspective:1400px;padding:clamp(10px,2vw,30px) 0 clamp(20px,3vw,40px);margin-bottom:clamp(8px,1.4vw,16px)}
.cf{margin:0 calc(-1 * clamp(10px,1.6vw,26px));flex:0 1 clamp(110px,13.5vw,190px);transform:rotateY(calc(var(--i) * -6deg)) rotate(calc(var(--i) * 3.2deg)) translateY(calc(var(--i) * var(--i) * 4px));transform-origin:50% 120%;transition:transform .25s ease,z-index 0s;position:relative;z-index:1}
.cf img{display:block;width:100%;height:auto;border-radius:7%/5%;box-shadow:0 10px 24px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.12)}
.cf:hover{transform:translateY(-18px) scale(1.12);z-index:5}
@media (max-width:820px){.cardfan{flex-wrap:wrap;gap:10px}.cf{margin:0;flex-basis:30%;transform:none}}
.mm-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);gap:clamp(14px,2.4vw,32px);align-items:center}
.mm-logo{width:100%;height:auto}.mm-hero{margin:0}.mm-hero img{border-radius:12px}
.mm-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,24px);margin:clamp(14px,2vw,24px) 0}
.mm-board .fig{margin:0}.mm-board img{border-radius:12px}
.mm-portraits{display:flex;gap:clamp(14px,2.4vw,32px);justify-content:center}.mm-portraits .fig{margin:0;width:clamp(110px,14vw,180px);text-align:center}.mm-portraits img{border-radius:50%}
@media (max-width:820px){.mm-top,.mm-board,.gz-rooms,.gz-row{grid-template-columns:1fr}}
/* CL64 independent page condensed */
.gz-a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,2.2vw,28px);align-items:start;margin-top:clamp(8px,1.2vw,14px)}
.gz-a .fig{margin:0}.gz-a .fig img{border-radius:12px}
.gz-a .phone-vid{max-width:none;border-radius:12px}.gz-a .phone-vid video{aspect-ratio:16/9}
.gz-a .phone figcaption{max-width:none;margin-top:8px}
.gz-b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,2.2vw,28px);align-items:start;margin-top:clamp(18px,2.4vw,30px)}
.gz-b .sub-h,.gz-side .sub-h,.mm-fan .sub-h,.mm-mercs .sub-h{margin-top:0}
.gz-b .gz-rooms{gap:clamp(8px,1vw,12px)}.gz-b .gz-rooms img{border-radius:10px}
.gz-c{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,2.2vw,28px);align-items:start;margin-top:clamp(18px,2.4vw,30px)}
.gz-c .fig{margin:0}.gz-c .fig img{border-radius:10px}
.gz-ports{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.gz-ports img{width:100%;height:auto;border-radius:8px;display:block}
.gz-side .gz-xp{display:flex;align-items:center;gap:12px;justify-items:initial;margin-top:clamp(14px,2vw,22px)}.gz-side .gz-xp img{width:72px;height:auto}.gz-side .gz-xp p{margin:0;max-width:16em}
.cardfan.cf-sm{padding:6px 0 clamp(14px,2vw,22px);margin-bottom:0;justify-content:flex-start;padding-left:clamp(10px,1.4vw,18px)}
.cf-sm .cf{flex:0 0 clamp(70px,7.2vw,104px);margin:0 calc(-1 * clamp(6px,.8vw,12px));transform:rotateY(calc(var(--i) * -5deg)) rotate(calc(var(--i) * 3deg)) translateY(calc(var(--i) * var(--i) * 3px))}
.cf-sm .cf:hover{transform:translateY(-24px) scale(2);z-index:20}
.cf-sm .cf img{box-shadow:0 6px 14px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.12)}
.mm-a{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) minmax(0,1.08fr);gap:clamp(10px,1.4vw,18px);align-items:center;margin-top:clamp(8px,1.2vw,14px)}
.mm-a .fig{margin:0}.mm-a img{border-radius:10px}.mm-a .mm-logo{border-radius:0}
.mm-stack{display:grid;gap:clamp(10px,1.4vw,18px)}
.mm-cap{margin:10px 0 0}
.mm-fans{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(10px,1.6vw,20px) clamp(18px,3vw,40px);margin-top:clamp(18px,2.4vw,30px)}
.mm-fan .sub-p{margin-bottom:4px}
.mm-mercs{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);margin-top:clamp(8px,1.4vw,16px)}
.mm-mercs .mm-portraits{justify-content:flex-start}.mm-mercs .mm-portraits .fig{width:clamp(70px,7vw,96px)}
@media (max-width:820px){.gz-a,.gz-b,.gz-c,.mm-a,.mm-fans{grid-template-columns:1fr}.mm-mercs{flex-direction:column;align-items:flex-start}.cf-sm .cf:hover{transform:scale(1.4)}}
.cardfan.cf-sm{justify-content:center;padding-left:0}
.gz-c{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.cf-sm .cf{flex-basis:clamp(64px,6.5vw,94px)}
.cf-sm .cf:hover{transform:translateY(-24px) scale(2.2)}
.mm-a{grid-template-columns:minmax(0,.8fr) minmax(0,2fr) minmax(0,1.08fr)}
/* CL65 Daddy, I Think I Saw an Elephant */
.el-spreads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.6vw,20px);margin-top:clamp(10px,1.6vw,20px)}
.el-spreads .fig{margin:0}.el-spreads img{border-radius:10px}
@media (max-width:820px){.el-spreads{grid-template-columns:1fr}}
/* CL66 I direct header photo: taller band so face and the board art both show */
.vhero.vh-direct{min-height:clamp(380px,36vw,560px)}
/* CL67 I direct header: show (almost) the whole photo; text sits over the empty wall at top left */
.vhero.vh-direct{min-height:clamp(420px,48vw,700px);align-items:flex-start}
.vhero.vh-direct .vh-img{width:100%}
.vhero.vh-direct .vh-img::after{background:
  radial-gradient(ellipse 52% 62% at 4% 22%,color-mix(in srgb,var(--paper) 88%,transparent) 0%,color-mix(in srgb,var(--paper) 60%,transparent) 45%,transparent 100%),
  linear-gradient(0deg,var(--paper) 0%,transparent 16%),
  linear-gradient(180deg,color-mix(in srgb,var(--paper) 45%,transparent) 0%,transparent 12%)}
.vhero.vh-direct .vh-in{padding-block:clamp(40px,5vw,80px) 0}
.vhero.vh-direct .vh-in h1{font-size:clamp(2.8rem,7.4vw,6.6rem)}
.vhero.vh-direct .vh-in .lead{max-width:22ch;font-size:clamp(1.1rem,1.6vw,1.5rem)}
@media (max-width:820px){
  .vhero.vh-direct{min-height:0}
  .vhero.vh-direct .vh-img{aspect-ratio:16/9}
  .vhero.vh-direct .vh-img::after{background:linear-gradient(0deg,var(--paper) 0%,transparent 40%)}
  .vhero.vh-direct .vh-in{padding-block:0 24px}
}
@media (max-width:820px){.vhero.vh-direct .vh-in{margin-top:-28px}}
/* CL68 I direct header: same treatment as I write / I make (photo right, purple bleeding in from the left), but the photo scaled down to show the whole scene */
.vhero.vh-direct{min-height:clamp(340px,33vw,480px);align-items:center}
.vhero.vh-direct .vh-img{width:auto;left:auto;height:100%;aspect-ratio:1672/941;max-width:72%}
.vhero.vh-direct .vh-img::after{background:linear-gradient(90deg,var(--paper) 0%,color-mix(in srgb,var(--paper) 80%,transparent) 10%,color-mix(in srgb,var(--paper) 30%,transparent) 28%,transparent 46%),
  linear-gradient(0deg,var(--paper) 0%,transparent 20%),linear-gradient(180deg,color-mix(in srgb,var(--paper) 50%,transparent) 0%,transparent 14%)}
.vhero.vh-direct .vh-in{padding-block:clamp(28px,3.5vw,56px)}
.vhero.vh-direct .vh-in h1{font-size:clamp(2.6rem,7vw,6rem)}
.vhero.vh-direct .vh-in .lead{max-width:24ch;font-size:inherit}
@media (max-width:820px){
  .vhero.vh-direct{min-height:0}
  .vhero.vh-direct .vh-img{width:100%;height:auto;max-width:none;aspect-ratio:16/9}
  .vhero.vh-direct .vh-img::after{background:linear-gradient(0deg,var(--paper) 0%,transparent 40%)}
  .vhero.vh-direct .vh-in{padding-block:0 24px;margin-top:-28px}
}
.vhero.vh-direct .vh-in .lead{font-size:clamp(1.2rem,2vw,1.5rem)}
.vhero.vh-direct{min-height:clamp(340px,34vw,500px)}
/* CL69 I direct: same band height, photo zoomed in and pushed further left with a long, gradual bleed */
.vhero.vh-direct .vh-img{width:80%;max-width:none;aspect-ratio:auto;height:auto;top:0;bottom:0;left:auto;right:0}
.vhero.vh-direct .vh-img::after{background:linear-gradient(90deg,var(--paper) 0%,color-mix(in srgb,var(--paper) 90%,transparent) 8%,color-mix(in srgb,var(--paper) 70%,transparent) 20%,color-mix(in srgb,var(--paper) 40%,transparent) 34%,color-mix(in srgb,var(--paper) 15%,transparent) 46%,transparent 58%),
  linear-gradient(0deg,var(--paper) 0%,transparent 20%),linear-gradient(180deg,color-mix(in srgb,var(--paper) 50%,transparent) 0%,transparent 14%)}
@media (max-width:820px){.vhero.vh-direct .vh-img{width:100%;height:auto;aspect-ratio:16/9}.vhero.vh-direct .vh-img::after{background:linear-gradient(0deg,var(--paper) 0%,transparent 40%)}}
/* CL70 I direct: a touch smaller, bleed reaches further right */
.vhero.vh-direct .vh-img{width:74%}
.vhero.vh-direct .vh-img::after{background:linear-gradient(90deg,var(--paper) 0%,color-mix(in srgb,var(--paper) 92%,transparent) 10%,color-mix(in srgb,var(--paper) 74%,transparent) 24%,color-mix(in srgb,var(--paper) 46%,transparent) 38%,color-mix(in srgb,var(--paper) 20%,transparent) 52%,transparent 68%),
  linear-gradient(0deg,var(--paper) 0%,transparent 20%),linear-gradient(180deg,color-mix(in srgb,var(--paper) 50%,transparent) 0%,transparent 14%)}
@media (max-width:820px){.vhero.vh-direct .vh-img{width:100%}.vhero.vh-direct .vh-img::after{background:linear-gradient(0deg,var(--paper) 0%,transparent 40%)}}
/* CL73 */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sec-head.has-logo h2{max-width:none;margin:0}
.sec-head.has-logo .sec-logo{display:block;width:auto;height:auto;max-width:100%;max-height:clamp(110px,13vw,190px)}
.mm-a{grid-template-columns:minmax(0,2fr) minmax(0,1.08fr)}
/* card fans: slightly bigger base; hover zoom lives on the image only, so the card's hit area never moves (no flicker between neighbours) */
.cf-sm .cf{flex-basis:clamp(72px,7.4vw,108px);cursor:zoom-in}
.cf-sm .cf:hover{transform:rotateY(calc(var(--i) * -5deg)) rotate(calc(var(--i) * 3deg)) translateY(calc(var(--i) * var(--i) * 3px));z-index:20}
.cf-sm .cf img{pointer-events:none;transform-origin:50% 85%;transition:transform .22s ease}
.cf-sm .cf:hover img{transform:translateY(-14%) scale(2.1)}
@media (max-width:820px){.cf-sm .cf:hover{transform:none}.cf-sm .cf:hover img{transform:scale(1.35)}}
/* CL76 Monster Mercs 3D board loop */
.mm-3d{max-width:1040px;margin:clamp(16px,2.4vw,30px) auto 0}
.mm-3d .vid video{width:100%;aspect-ratio:16/9;display:block;border-radius:14px;background:#0b0a24}
/* CL78 big-logo side header (Monster Mercs): logo column runs past the intro, first artwork sits to its right */
.sec-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.35fr);gap:clamp(18px,3vw,44px);align-items:start}
.sec-side .ss-l h2{margin:0 0 clamp(12px,1.6vw,20px)}
.sec-side .side-logo{display:block;width:100%;height:auto;max-width:380px}
.sec-side .ss-p{margin:0 0 clamp(14px,2vw,24px)}
.sec-side .mm-a{margin-top:0}
@media (max-width:820px){.sec-side{grid-template-columns:1fr}.sec-side .side-logo{max-width:240px}}
.mm-3d{max-width:760px}

/* CL84: Apex Academy. Compact logo, then the poster and the box at one height. Dialogue quote. SEL videos. */
.ap-logo{margin:clamp(28px,4vw,52px) 0 clamp(14px,2vw,22px);max-width:300px}
.ap-logo img{width:100%;height:auto;display:block}
.ap-pack{display:grid;gap:clamp(12px,2vw,24px);align-items:stretch}
.ap-pack .fig{margin:0}
.ap-pack img{width:100%;height:100%;object-fit:contain;display:block}
.q-dialog p{margin:0 0 .9em}
.q-dialog p:last-child{margin-bottom:0}
.q-dialog cite{display:block;margin-top:.25em}
#sel .sel-p{max-width:68ch;margin:0 0 16px}
#sel .vid-grid2{max-width:1000px}
@media (max-width:640px){.ap-pack{grid-template-columns:1fr!important}}

/* CL85: Apex Academy "Building Apex Academy": script sample beside the logo exploration, then logo, poster and box. */
.ap-build{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:clamp(20px,3vw,44px);align-items:start}
.ap-build .ap-lx .sub-h{margin-top:0}
.ap-build .ap-lx .lx-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.ap-build .ap-script p{min-height:0}
@media (max-width:820px){.ap-build{grid-template-columns:1fr}.ap-build .ap-script{max-width:340px}.ap-build .ap-lx .lx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* CL86: The Hub process loop */
.h-proc{max-width:1100px}

/* CL87: Apex box keeps its floor background; the logo sits in the empty top-right corner of the box image. */
.ap-box{position:relative;height:100%}
.ap-box .fig{height:100%}
.ap-box .ap-logo{position:absolute;top:4%;right:3%;width:24%;max-width:none;margin:0;pointer-events:none}
.ap-box .ap-logo img{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
#build .ap-pack{margin-top:clamp(28px,4vw,52px)}

/* CL91: About, Experience and Software side by side */
.xp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px);align-items:start}
.xp-grid .sec-head{margin-bottom:14px}
.about-bio{font-size:1.05rem;line-height:1.55;margin:18px 0 0;color:var(--ink,#eae6ff)}
@media (max-width:820px){.xp-grid{grid-template-columns:1fr}}

/* CL92: I make characters, larger and allowed to wrap */
.char-row{display:block}
.char-row .tcast{flex-wrap:nowrap;justify-content:center}
@media (max-width:1300px){.char-row .tcast{flex-wrap:wrap}}

/* CL94: sketchbook as a two-page book with a page turn */
.skbook{max-width:1240px;margin:0 auto;outline:none}
.skb-book{position:relative;aspect-ratio:3/2;perspective:2600px;margin:0 auto}
.skb-slot{position:absolute;top:0;bottom:0;width:50%}
.skb-l{left:0}.skb-r{right:0}
.skb-book::before{content:"";position:absolute;inset:-14px -16px -18px;border-radius:14px;background:#2a1f17;box-shadow:0 26px 50px rgba(0,0,0,.45);z-index:-1;transition:opacity .4s}
.skbook.closed .skb-book::before{left:calc(50% - 16px)}
.skb-book::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:rgba(0,0,0,.25);pointer-events:none;z-index:4}
.skbook.closed .skb-book::after{display:none}
.skp{position:absolute;inset:0;user-select:none}
.skp-bg{display:block;width:100%;height:100%;object-fit:cover}
.skh{position:absolute;cursor:zoom-in;opacity:0;transform-origin:50% 50%}
.skh:focus-visible{opacity:1;outline:3px solid var(--acc,#8b4bff);outline-offset:2px;background:transparent}
.skv{position:absolute;object-fit:cover;mix-blend-mode:multiply;border-radius:2px}
.skb-leaf{position:absolute;top:0;bottom:0;width:50%;display:none;transform-style:preserve-3d;z-index:5;pointer-events:none}
.skb-leaf.on{display:block}
.skb-leaf.fwd{right:0;transform-origin:0 50%}
.skb-leaf.back{left:0;transform-origin:100% 50%}
.skb-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.skb-back{transform:rotateY(180deg)}
.skb-face::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 30%,transparent 70%,rgba(0,0,0,.12));opacity:var(--sh,0);pointer-events:none}
.skb-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:22px;color:#e9dcc4;font-weight:700}
.skb-nav button{width:46px;height:46px;border-radius:50%;border:2px solid #e9dcc4;background:transparent;color:#e9dcc4;font-size:1.7rem;line-height:1;cursor:pointer}
.skb-nav button:hover{background:#e9dcc4;color:#2a1f17}
.skb-nav button:disabled{opacity:.3;cursor:default;background:transparent;color:#e9dcc4}
.skb-count{min-width:9em;text-align:center;font-size:.95rem}
@media (max-width:760px){
  .skb-book{aspect-ratio:3/4;max-width:520px}
  .skb-slot{width:100%}.skb-l{display:none}
  .skb-book::after{display:none}.skbook.closed .skb-book::before{left:-16px}
  .skb-leaf{width:100%}.skb-leaf.fwd{right:0}.skb-leaf.back{left:0;transform-origin:0 50%}
}

/* CL97: Starforce Explorer themes */
.ex-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ex-themeset{margin-top:clamp(22px,3vw,40px)}
.ex-themeset .sub-h{margin:0 0 8px}
.ex-tgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.2vw,14px);margin-top:12px}
.ex-tgrid .fig{margin:0}.ex-tgrid .fig figcaption{font-size:.8rem}
.ex-pieces{max-width:560px;margin:clamp(14px,2vw,22px) auto 0}
.ex-pieces .fig img{background:#fff;border-radius:8px}
@media (max-width:820px){.ex-tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.skv.skv-n{mix-blend-mode:normal}

/* CL99: two-page sketchbook art: no crease line while that spread is open */
.skbook.flat .skb-book::after{display:none}

/* CL104: phone fixes. One-row cast strips wrap instead of pushing the page sideways; the MERCS board/side column stacks. */
@media (max-width:820px){
  .one-row .tcast{flex-wrap:wrap;justify-content:center}
  .gz-c{grid-template-columns:1fr}
  .gz-side .gz-xp{flex-wrap:wrap}
}

/* CL105: phones: the home video takes most of the hero art, shifted left, instead of sitting small in the middle */
@media (max-width:900px){
  .w-screen{left:4%;top:10%;width:80%;height:80%}
  .ws-btn{width:56px;height:56px}
  .ws-play{font-size:15px}
}

/* ---- CL106: mobile pass 2 ---- */
/* home link: a house icon beside the name (all sizes) */
.mark{display:inline-flex;align-items:center;gap:.45em}
.home-ic{width:1.15em;height:1.15em;flex:none;color:#E6D8FF;transition:color .2s}
.mark:hover .home-ic,.mark:focus-visible .home-ic{color:#E040FF}
.ex-ai-note{margin:0 0 6px;font-size:.92rem;color:var(--slate,#b9b2d8);font-style:italic}
/* popcorn buttons: instant feedback while the trailer loads */
.ws-play.is-loading .ws-btn svg{opacity:0}
.ws-play.is-loading .ws-btn{position:relative}
.ws-play.is-loading .ws-btn::after{content:"";position:absolute;inset:26%;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:wsspin .8s linear infinite}
@keyframes wsspin{to{transform:rotate(360deg)}}
/* sticky "Next story" for phones (built by site.js) */
.next-dock{display:none}
@media (max-width:900px){
  /* home hero: a taller crop of the art so the viewer and the popcorn read; the trailer sits in the painted screen */
  .w-screen{left:4.54%;top:9.21%;width:68.05%;height:52.44%}
  .ws-btn{width:48px;height:48px}
  .ws-play{font-size:13px}
  .next-dock{display:flex;position:fixed;left:0;right:0;margin:0 auto;width:max-content;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:60;transform:translateY(140%);opacity:0;
    align-items:center;gap:12px;padding:8px 8px 8px 18px;border-radius:999px;border:2px solid rgba(224,64,255,.8);background:rgba(20,10,52,.92);backdrop-filter:blur(8px);
    box-shadow:0 8px 26px rgba(4,2,20,.55),0 0 18px rgba(224,64,255,.3);color:#fff;text-decoration:none;max-width:calc(100vw - 32px);transition:transform .3s,opacity .3s}
  .next-dock.on{transform:none;opacity:1}
  .next-dock .next-k{font-size:.66rem}
  .next-dock .next-t{font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .next-dock .next-arrow{width:36px;height:36px}
  /* Starforce crew: two rows of three */
  .crew-waist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end}
  .crew-waist .cw{flex:none;width:100%}
  /* Monster Mercs logo centered */
  .sec-side .side-logo{margin-left:auto;margin-right:auto}
  /* About: photo right under the subheader */
  .about-grid{grid-template-columns:1fr!important}
  .about-grid > div:last-child{order:-1}
  .about-grid .about-bio{margin-bottom:6px}
  /* Unlock impact card: keep Dr. Dillpickle's head in frame */
  .sc-img img[src*="u_hug"]{object-position:50% 12%!important}
}
@media (max-width:640px){
  /* I direct: Notes to the team first when the videos stack */
  .vg-flip > :last-child{order:-1}
  /* I write: shorter script windows, so there is always page to scroll above or below */
  .s2s-in{max-height:min(300px,42vh)}
  /* I make: the second logo set two across instead of four tiny ones */
  .logos-lg > div > .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logos-lg .logos .fig{min-height:110px;padding:16px}
  .logos-lg .logos .fig img{max-height:84px}
}