:root{--fs-xs:.625rem;--fs-sm:.75rem;--fs-base:.95rem;--fs-lg:1.125rem;--fs-xl:clamp(1.35rem,2vw,1.6rem);--fs-2xl:clamp(1.55rem,2.8vw,2.1rem);--fs-3xl:clamp(1.8rem,4.2vw,2.8rem);--fs-4xl:clamp(2.6rem,6vw,4rem);--bg:#0a0a0a;--card:#111;--line:rgba(255,255,255,.08);--fg:#f2f2f2;--mid:#8a8a8a;--low:#555;--btn:#dfe7f8;
--logo:"Inter",system-ui,sans-serif;--logo-w:300;--logo-case:none;--logo-track:-.03em;--logo-scale:.9;--body:"Inter",system-ui,-apple-system,sans-serif}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0a0a0a}}
:root[data-theme="dark"]{--bg:#0a0a0a}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--btn);outline-offset:3px}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:18px clamp(20px,5vw,64px);transition:background .3s,backdrop-filter .3s}
.nav.solid{background:rgba(10,10,10,.75);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{font-family:var(--logo);font-weight:var(--logo-w);text-transform:var(--logo-case);letter-spacing:var(--logo-track);font-size:1.5rem;line-height:1}
.menu{display:flex;align-items:center;gap:4px;padding:5px;border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.35);backdrop-filter:blur(10px)}
.menu a{font-size:var(--fs-sm);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);padding:9px 16px;border-radius:10px;transition:color .2s,background .2s}
.menu a:hover{color:var(--fg)}
.menu a.on{color:#000;background:var(--btn)}
.burger{display:none;background:none;border:0;width:40px;height:40px;cursor:pointer}
.burger span{display:block;height:1.5px;background:var(--fg);margin:7px 8px;transition:transform .3s,opacity .3s}
body.open .burger span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
body.open .burger span:nth-child(2){opacity:0}
body.open .burger span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}

/* PAGES */
.page{display:block;min-height:100svh}
@keyframes in{from{opacity:0}to{opacity:1}}
.wrap{width:min(90%,1120px);margin:0 auto;padding:clamp(110px,14vw,150px) 0 clamp(80px,10vw,120px)}
.eyebrow{font-size:var(--fs-sm);letter-spacing:.25em;text-transform:uppercase;color:var(--low);margin-bottom:10px}
.h1{font-weight:200;font-size:var(--fs-4xl);line-height:1.05;letter-spacing:-.02em}
.lead{color:var(--mid);max-width:56ch;margin-top:18px;line-height:1.65;font-size:var(--fs-base)}
.akas{color:var(--low);max-width:56ch;margin-top:clamp(44px,6vw,72px);line-height:1.6;font-size:var(--fs-sm)}
.rule{width:28px;height:1px;background:var(--low);margin:36px 0}
.link{font-size:var(--fs-sm);letter-spacing:.2em;text-transform:uppercase;color:var(--mid);border-bottom:1px solid var(--low);padding-bottom:4px;display:inline-block}
.link:hover{color:var(--fg);border-color:var(--fg)}

/* HOME (Gossip Goblin style) */
.hero{position:relative;height:100svh;min-height:580px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero .bg{position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 45%,#3a2a4a 0%,#12101a 55%,#000 100%)}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(to bottom,transparent,#000)}
.hero-inner{position:relative;z-index:2;width:min(88%,720px);text-align:center}
.logo{font-family:var(--logo);font-weight:var(--logo-w);text-transform:var(--logo-case);letter-spacing:var(--logo-track);line-height:.95;font-size:calc(clamp(5rem,22vw,12rem) * var(--logo-scale));text-shadow:0 4px 30px rgba(0,0,0,.45)}
.logo small{display:block;font-size:.22em;letter-spacing:.42em;text-transform:uppercase;margin-top:.3em;padding-left:.42em;font-weight:300;color:rgba(255,255,255,.75)}
.cta{display:inline-block;margin-top:clamp(28px,5vw,48px);border:1.5px solid var(--btn);color:var(--btn);padding:clamp(13px,1.8vw,16px) clamp(28px,4vw,40px);font-weight:500;font-size:var(--fs-lg);letter-spacing:.1em;text-transform:uppercase;background:rgba(0,0,0,.15);transition:background .2s}
.cta:hover{background:rgba(223,231,248,.14)}
.cue{position:absolute;bottom:26px;left:50%;z-index:2;transform:translateX(-50%);width:1px;height:44px;background:linear-gradient(var(--fg),transparent);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.2}50%{opacity:.9}}
.home-body{background:#000}
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:22px 0}
.track{display:flex;gap:56px;width:max-content;animation:scroll 40s linear infinite}
.track a{font-weight:200;font-size:var(--fs-3xl);color:var(--low);white-space:nowrap;transition:color .2s}
.track a:hover{color:var(--fg)}
@keyframes scroll{to{transform:translateX(-50%)}}
.socials{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(20px,5vw,40px);padding:clamp(36px,3.6vw,52px) 20px clamp(28px,3vw,44px)}
.socials a{width:32px;height:32px;display:grid;place-items:center}
.socials a:hover{opacity:.6}
.socials svg{width:100%;height:100%;fill:var(--fg)}
.about{width:min(90%,1120px);margin:0 auto}
.about p{max-width:52ch}
.about p{font-size:var(--fs-lg);line-height:1.65;margin-bottom:1.3em;font-weight:300}
.signup{width:min(88%,560px);margin:clamp(48px,5vw,72px) auto 0;padding-bottom:clamp(48px,6.7vw,96px);text-align:center;scroll-margin-top:calc(var(--navh,96px) + 60px)}
.signup h2{font-weight:400;font-size:var(--fs-xl);margin-bottom:32px}
.signup input{width:100%;padding:22px 26px;font-size:var(--fs-base);border:1px solid #ccc;background:#fff;color:#000}
.signup button{width:100%;margin-top:24px;padding:22px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--btn);color:#000;border:0;border-radius:8px;cursor:pointer}

/* ORIGINALS */
.show{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(56px,8vw,96px)}
.show:nth-child(even) .poster{order:2}
.poster{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.6);filter:grayscale(.85) brightness(.95);transition:filter .6s}
.show:hover .poster,.card:hover .thumb{filter:grayscale(0) brightness(1)}
.menu a.homeb{display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;line-height:1}
.menu a.homeb,.menu a.homeb.on{color:var(--mid);background:none}
.menu a.homeb:hover,.menu a.homeb.on:hover{color:var(--fg)}
.menu a.homeb svg{width:14px;height:14px;display:block;fill:currentColor}
.poster video,.thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.poster img.yt,.thumb img.yt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.poster .ph,.thumb .ph{position:absolute;inset:0;display:grid;place-items:center;font-weight:200;font-size:var(--fs-xl);color:rgba(255,255,255,.55);text-align:center;padding:20px}
.badge{position:absolute;top:12px;left:12px;z-index:2;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;background:rgba(0,0,0,.7);border:1px solid var(--line);padding:5px 10px;border-radius:8px;color:var(--mid)}
.show h3{font-weight:300;font-size:var(--fs-2xl);margin-bottom:14px}
.show p{color:var(--mid);line-height:1.7;font-size:var(--fs-base);margin-bottom:22px;max-width:52ch}

/* WORK */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:36px 0 40px}
.filters button{background:none;border:1px solid var(--line);color:var(--mid);font-size:var(--fs-sm);letter-spacing:.16em;text-transform:uppercase;padding:10px 18px;border-radius:10px;cursor:pointer}
.filters button.on{background:var(--btn);color:#000;border-color:var(--btn)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:transform .3s,border-color .3s}
.card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.2)}
.thumb{position:relative;aspect-ratio:16/9;filter:grayscale(.85) brightness(.95);transition:filter .5s}
.thumb .ph{font-size:var(--fs-lg)}
.meta{padding:16px 16px 18px;display:grid;grid-template-columns:1fr auto;gap:2px 10px}
.meta .c{font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--low)}
.meta .y{font-size:var(--fs-sm);color:var(--mid)}
.meta .t{grid-column:1/-1;font-size:var(--fs-base);margin-top:6px}
.meta .s{grid-column:1/-1;font-size:var(--fs-sm);color:var(--low)}

/* ABOUT */
.banner{background:#000;display:grid;place-items:center;color:var(--low);font-weight:200;font-size:1.2rem;border-bottom:1px solid var(--line)}
.quote{font-weight:200;font-size:var(--fs-2xl);line-height:1.4;max-width:30ch}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,220px));gap:20px;margin-top:28px}
.person .pic{aspect-ratio:1;border-radius:12px;border:1px solid var(--line);background:linear-gradient(160deg,#1c1c1c,#0d0d0d);display:grid;place-items:center;font-family:var(--logo);font-weight:var(--logo-w);font-size:3.2rem;color:#333}
.person h4{font-weight:400;font-size:var(--fs-base);margin-top:12px;text-align:center}
.person span{display:block;text-align:center;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--low);margin-top:4px}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(64px,9vw,100px)}
.values div{border:1px solid var(--line);border-radius:10px;padding:22px;background:var(--card)}
.values b{display:block;font-weight:500;font-size:var(--fs-base);margin-bottom:6px}
.values span{color:var(--low);font-size:var(--fs-sm)}

/* CONTACT */
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.routes a{display:block;border:1px solid var(--line);border-radius:10px;padding:24px;background:var(--card);text-decoration:none;color:inherit;transition:border-color .2s,background .2s}
.routes a:hover{border-color:rgba(223,231,248,.45);background:#141414}
.routes b{display:block;font-weight:500;font-size:var(--fs-base);margin-bottom:8px}
.routes span{display:block;color:var(--low);font-size:var(--fs-sm);line-height:1.65}
.routes em{display:block;margin-top:18px;font-style:normal;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--btn)}
.form{max-width:620px;margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form label{display:block;font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--low);margin-bottom:8px}
.form .full{grid-column:1/-1}
.form input,.form select,.form textarea{width:100%;background:#050505;border:1px solid var(--line);border-radius:8px;padding:13px 14px;font-size:var(--fs-base);transition:border-color .2s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:rgba(223,231,248,.5)}
.form textarea{min-height:130px;resize:vertical}
.submit{grid-column:1/-1;background:var(--btn);color:#000;border:0;border-radius:8px;padding:16px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:var(--fs-sm);cursor:pointer}
.note{grid-column:1/-1;text-align:center;font-size:var(--fs-sm);color:var(--mid)}

footer{border-top:1px solid var(--line);padding:40px clamp(20px,5vw,64px);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;color:var(--low);font-size:var(--fs-sm)}
footer nav{display:flex;gap:22px;flex-wrap:wrap}
footer nav a:hover{color:var(--fg)}


@media (max-width:860px){
.burger{display:block}
.menu{position:fixed;inset:0;flex-direction:column;justify-content:center;align-items:center;gap:10px;border:0;border-radius:0;background:rgba(0,0,0,.94);opacity:0;pointer-events:none;transition:opacity .3s}
body.open .menu{opacity:1;pointer-events:auto}
.menu a{font-size:var(--fs-sm);letter-spacing:.1em;padding:14px 28px}
.burger{position:relative;z-index:60}
.show,.values{grid-template-columns:1fr}
.show:nth-child(even) .poster{order:0}
.grid{grid-template-columns:repeat(2,1fr)}
.form{grid-template-columns:1fr}
}
@media (max-width:540px){.grid{grid-template-columns:1fr}}
@media (max-width:860px){
.hero{height:auto;min-height:0;aspect-ratio:9/13;max-height:88svh}
}
@media (prefers-reduced-motion:reduce){.track,.cue{animation:none}.page.on{animation:none}}

/* ---- Refinement pass ---- */
.eyebrow{letter-spacing:.32em}
.wrap{padding-top:clamp(120px,15vw,160px)}
.h1{font-weight:200}
.lead{font-weight:300}
.pill,.submit,.signup button,.signup input{border-radius:14px}
.pill{display:inline-block;margin-top:28px;padding:18px 44px;border:1px solid var(--line);background:#101010;color:var(--fg);font-size:var(--fs-sm);letter-spacing:.3em;text-transform:uppercase;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:border-color .2s}
.pill:hover{border-color:rgba(255,255,255,.3)}
.submit{background:#101010;color:var(--fg);border:1px solid var(--line);letter-spacing:.3em;padding:18px}
.submit:hover{border-color:rgba(255,255,255,.3)}

.statement,.own,.make{width:min(90%,1120px);margin:0 auto}
.statement{padding:clamp(72px,8.9vw,128px) 0 clamp(36px,3.6vw,52px);border-top:1px solid var(--line)}
.statement h2{font-weight:200;font-size:var(--fs-4xl);line-height:1.12;letter-spacing:-.02em;max-width:18ch}
.statement h2 span{display:block;color:var(--low)}
.statement p{color:var(--mid);font-weight:300;line-height:1.7;margin-top:36px;max-width:52ch;letter-spacing:.01em}
.own{padding:clamp(52px,5.8vw,84px) 0}
.own h2{font-weight:200;font-size:var(--fs-3xl);margin-bottom:36px}
.own-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.own-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.own-card .thumb{aspect-ratio:16/9}
.own-card:hover .thumb{filter:grayscale(0) brightness(1)}
.own-card .meta{padding:20px 22px 24px;display:block}
.own-card .meta .t{display:block;font-size:var(--fs-base);font-weight:300;margin-top:10px}
.make{text-align:center;padding:clamp(72px,7.8vw,112px) 0;border-top:1px solid var(--line)}
.make h2{font-weight:200;font-size:var(--fs-3xl);letter-spacing:-.02em}

footer{flex-direction:column;justify-content:center;text-align:center;gap:26px;padding:56px 20px 64px;margin:0 auto;width:min(90%,1120px)}
.foot-brand{color:var(--low);font-size:var(--fs-xl)}
footer nav{justify-content:center;gap:26px}
footer nav a{font-size:var(--fs-sm);letter-spacing:.2em;text-transform:uppercase}
footer span{font-size:var(--fs-sm);letter-spacing:.06em}

.card,.poster{border-radius:16px}
.meta{padding:20px 20px 24px}
.meta .t{font-weight:300;font-size:var(--fs-base)}

@media (max-width:860px){
.nav{padding:16px 22px}
.nav.solid,body.open .nav{background:rgba(10,10,10,.92);border-bottom:1px solid var(--line)}
.menu{position:absolute;inset:auto;top:100%;left:0;right:0;bottom:auto;height:auto;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:14px;padding:14px 22px 26px;background:rgba(10,10,10,.97);border-bottom:1px solid var(--line);transform:translateY(-8px);transition:opacity .25s,transform .25s}
body.open .menu{transform:none}
.menu a{font-size:var(--fs-sm);letter-spacing:.24em;padding:17px 22px;border:1px solid var(--line);background:#101010;border-radius:10px;color:var(--mid)}
.menu a.on{background:#1a1a1a;color:var(--fg)}
/* Originals become stacked cards on mobile */
  .show{gap:0;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:28px}
.show .poster{border:0;border-radius:0;box-shadow:none}
.show>div:last-child{padding:22px 22px 26px}
.show h3{font-size:var(--fs-2xl)}
.own-list{grid-template-columns:1fr}
.grid{grid-template-columns:1fr}
.values{grid-template-columns:1fr}
.routes{grid-template-columns:1fr}
.form{grid-template-columns:1fr 1fr;gap:18px 14px}
footer nav{gap:18px}
}
@media (max-width:420px){.form{grid-template-columns:1fr}}

/* ---- Type scale matched to reference ---- */
:root{--mid:#6f6f6f;--low:#3f3f3f;--label:#3a3a3a;--field:#0d0d0d}
body{font-weight:300}
.nav{padding:26px clamp(20px,5vw,64px)}
.menu a{font-size:var(--fs-sm);font-weight:400;letter-spacing:.22em;color:#6a6a6a}
.menu a.on{background:none;color:#fff;font-weight:500}
.eyebrow{font-size:var(--fs-sm);font-weight:400;letter-spacing:.38em;color:var(--label);margin-bottom:22px}
.h1{font-weight:200;font-size:var(--fs-4xl);letter-spacing:-.01em;color:#e6e6e6}
.lead{font-weight:300;font-size:var(--fs-base);line-height:1.6;color:var(--mid);margin-top:26px}
.rule{width:28px;height:1px;background:#2a2a2a;margin:44px 0}
.show h3{font-weight:300;font-size:var(--fs-2xl);letter-spacing:-.01em;color:#e6e6e6;margin:14px 0 20px}
.show p{font-weight:300;font-size:var(--fs-base);line-height:1.65;color:var(--mid)}
.show .eyebrow{margin-bottom:8px}
.badge{font-size:var(--fs-xs);font-weight:400;letter-spacing:.3em;color:#8a8a8a;background:rgba(14,14,14,.85);border:1px solid #1e1e1e;padding:9px 16px;top:16px;left:16px}
.link{font-size:var(--fs-sm);font-weight:400;letter-spacing:.3em;color:#6a6a6a;border-color:#2a2a2a}
.filters{margin:40px 0 48px;gap:12px}
.filters button{font-size:var(--fs-sm);font-weight:400;letter-spacing:.24em;padding:14px 26px;border-color:#1e1e1e;background:#0d0d0d;color:#6a6a6a;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.filters button.on{background:#0d0d0d;color:#e6e6e6;border-color:#2a2a2a}
.card,.own-card{background:#0d0d0d;border-color:#1c1c1c;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.meta{padding:22px 24px 26px}
.meta .c{font-size:var(--fs-xs);font-weight:400;letter-spacing:.34em;color:var(--label)}
.meta .y{font-size:var(--fs-sm);font-weight:400;color:#8a8a8a}
.meta .t{font-weight:300;font-size:var(--fs-lg);color:#e6e6e6;margin-top:12px}
.meta .s{font-size:var(--fs-sm);font-weight:300;color:#4a4a4a;margin-top:4px}
.own-card .meta .c{color:var(--label)}
.quote{font-weight:200;font-size:var(--fs-2xl);line-height:1.4;color:#b8b8b8}
.people h4{font-weight:300;color:#e6e6e6}
.person span{font-size:var(--fs-xs);letter-spacing:.3em;color:var(--label)}
.values div{background:#0d0d0d;border-color:#1c1c1c;border-radius:14px}
.values b{font-weight:400;color:#e6e6e6}
.values span{color:var(--mid);font-weight:300}
.form label{font-size:var(--fs-xs);font-weight:400;letter-spacing:.32em;color:var(--label);margin-bottom:12px}
.form input,.form select,.form textarea{background:var(--field);border:1px solid #171717;border-radius:14px;padding:19px 18px;font-size:var(--fs-base);font-weight:300;color:#e6e6e6;box-shadow:inset 0 2px 8px rgba(0,0,0,.6)}
.form select{color:#8a8a8a}
.submit{background:none;border:0;box-shadow:none;color:#5a5a5a;font-size:var(--fs-sm);font-weight:400;letter-spacing:.34em;padding:24px 0 10px}
.submit:hover{color:#e6e6e6}
.note{font-size:var(--fs-sm);font-weight:300;color:#d0d0d0;letter-spacing:.01em}
.statement h2,.own h2,.make h2{color:#e6e6e6}
.statement p{color:var(--mid)}
.own .eyebrow{margin-bottom:18px}
.pill{font-size:var(--fs-sm);font-weight:400;letter-spacing:.34em;background:#0d0d0d;border-color:#1c1c1c;color:#9a9a9a;padding:22px 52px}
.track a{font-weight:200;color:#3f3f3f}
.about p{font-weight:300;color:var(--mid);font-size:var(--fs-base);line-height:1.7;letter-spacing:.01em;margin-bottom:1.4em}
.signup h2{font-weight:300;color:#e6e6e6}
footer{color:#3f3f3f}
footer nav a{font-size:var(--fs-sm);font-weight:400;letter-spacing:.28em;color:#4a4a4a}
.foot-brand{color:#3a3a3a}
@media (max-width:860px){
.nav{padding:34px 22px}
.menu{top:100%;padding:16px 22px 28px}
.menu a{font-size:var(--fs-sm);letter-spacing:.3em;padding:19px 24px;background:#0d0d0d;border-color:#1c1c1c;color:#6a6a6a;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.menu a.on{background:#111;color:#e6e6e6}
.wrap{padding-top:150px}
.show>div:last-child{padding:26px 22px 30px}
}

/* ---- Brand + nav (no hamburger) ---- */
.brand{display:flex;align-items:center;gap:12px;text-transform:none;letter-spacing:0}
.brand .mark{height:44px;width:44px;display:block;color:#e6e6e6}
.wordmark{display:flex;flex-direction:column;line-height:1.15;font-family:var(--body)}
.wordmark b{font-weight:400;font-size:var(--fs-base);letter-spacing:.06em;color:#e6e6e6}
.wordmark small{font-size:var(--fs-xs);font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:#a0a0a0;margin-top:3px}
.brand{text-shadow:0 1px 10px rgba(0,0,0,.6)}
.brand .mark{filter:drop-shadow(0 1px 6px rgba(0,0,0,.6))}
.slogan{margin-top:clamp(18px,3vw,26px);font-size:clamp(.66rem,1.8vw,.85rem);font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:#d8d8d8;text-shadow:0 2px 14px rgba(0,0,0,.7);padding:0 10px}
.logo{text-shadow:0 4px 30px rgba(0,0,0,.6)}
.burger{display:none!important}
.menu{background:#0d0d0d;border-color:#1c1c1c;box-shadow:0 8px 24px rgba(0,0,0,.5)}
@media (max-width:860px){
.nav{padding:18px 16px;flex-direction:column;align-items:stretch;gap:12px;background:linear-gradient(rgba(10,10,10,.85),rgba(10,10,10,0))}
.nav.solid{background:rgba(10,10,10,.92)}
.brand .mark{height:38px}
.wordmark b{font-size:var(--fs-base)}
.wordmark small{font-size:var(--fs-xs);letter-spacing:.26em}
.menu{position:static;inset:auto;transform:none;opacity:1;pointer-events:auto;flex-direction:row;justify-content:space-between;align-items:center;gap:2px;padding:4px;border:1px solid #1c1c1c;border-radius:14px;background:#0d0d0d;width:100%;overflow-x:auto;transition:none}
.menu a{flex:1;text-align:center;font-size:var(--fs-xs);letter-spacing:.14em;padding:11px 6px;border:0;background:none;box-shadow:none;border-radius:10px;color:#6a6a6a;white-space:nowrap}
.menu a.on{background:#151515;color:#e6e6e6}
.wrap{padding-top:170px}
.hero-inner{padding-top:70px}
}

/* ---- Motion & polish ---- */
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
.menu{position:relative;isolation:isolate}
.menu::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:-1;
  background:conic-gradient(from var(--a),transparent 0 72%,rgba(160,160,160,.06) 82%,rgba(175,175,175,.55) 90%,rgba(160,160,160,.06) 96%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:beam 7s linear infinite}
@keyframes beam{to{--a:360deg}}
.cta{position:relative;overflow:hidden;border-radius:10px}
.bc{text-transform:none!important;letter-spacing:inherit}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s ease}
.cta:hover::after{transform:translateX(120%)}
.hero .grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.hero .logo,.hero .slogan,.hero .cta{opacity:0;transform:translateY(16px);animation:rise 1.1s cubic-bezier(.2,.7,.2,1) forwards}
.hero .logo{animation-delay:.25s;filter:blur(8px);animation-name:riseblur}
.hero .slogan{animation-delay:.7s}
.hero .cta{animation-delay:1s}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes riseblur{to{opacity:1;transform:none;filter:blur(0)}}
.card,.own-card,.show,.values div{position:relative;overflow:hidden}
.card::before,.own-card::before,.show::before,.values div::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.09),transparent 45%)}
.card:hover::before,.own-card:hover::before,.show:hover::before,.values div:hover::before{opacity:1}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.nav.solid .menu::before{animation-duration:9s}
@media (prefers-reduced-motion:reduce){
.menu::before,.hero .logo,.hero .slogan,.hero .cta{animation:none;opacity:1;transform:none;filter:none}
.reveal{opacity:1;transform:none;transition:none}
}

.next{margin-top:clamp(48px,7vw,72px);border-top:1px solid var(--line);padding-top:36px}
.next ol{list-style:none;counter-reset:n;display:grid;gap:0}
.next li{counter-increment:n;display:grid;grid-template-columns:2.4rem 1fr auto;align-items:baseline;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.next li::before{content:counter(n,decimal-leading-zero);font-size:var(--fs-sm);letter-spacing:.2em;color:var(--label)}
.next li span{font-weight:300;font-size:var(--fs-lg);color:#e6e6e6}
.next li em{font-style:normal;font-size:var(--fs-sm);letter-spacing:.3em;text-transform:uppercase;color:var(--mid)}
.next li:first-child em{color:#e6e6e6}
@media (max-width:540px){.next li{grid-template-columns:2rem 1fr}.next li em{grid-column:2}}

/* ---- In development timeline ---- */
.timeline{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin:clamp(40px,6vw,64px) 0 clamp(20px,4vw,40px);padding-top:18px}
.timeline::before{content:"";position:absolute;left:0;right:0;top:22px;height:1px;background:linear-gradient(90deg,#e6e6e6 0,#2a2a2a 22%,#2a2a2a 100%)}
.tl{position:relative;padding-top:22px}
.tl i{position:absolute;top:-1px;left:0;width:9px;height:9px;border-radius:50%;background:#2a2a2a;border:1px solid #3a3a3a}
.tl.now i{background:#e6e6e6;border-color:#e6e6e6;box-shadow:0 0 0 6px rgba(230,230,230,.08),0 0 24px rgba(230,230,230,.35)}
.tl b{display:block;font-weight:400;font-size:var(--fs-sm);letter-spacing:.3em;color:var(--label)}
.tl span{display:block;font-weight:300;font-size:var(--fs-base);color:#e6e6e6;margin-top:8px;line-height:1.3}
.tl em{display:block;font-style:normal;font-size:var(--fs-xs);letter-spacing:.28em;text-transform:uppercase;color:var(--mid);margin-top:8px}
.tl.now em{color:#e6e6e6}
@media (max-width:860px){
.timeline{grid-template-columns:1fr;gap:0;padding-top:0;padding-left:26px}
.timeline::before{left:4px;right:auto;top:6px;bottom:6px;width:1px;height:auto;background:linear-gradient(#e6e6e6 0,#2a2a2a 22%,#2a2a2a 100%)}
.tl{padding:16px 0}
.tl i{left:-26px;top:20px}
.menu a{font-size:var(--fs-xs);letter-spacing:.1em;padding:11px 4px}
}

/* ---- Watch + trailers ---- */
.back{display:inline-block;font-size:var(--fs-sm);letter-spacing:.3em;text-transform:uppercase;color:var(--mid);margin-bottom:28px}
.back::before{content:"\2190";margin-right:10px}
.back:hover{color:#e6e6e6}
.player-card{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,.8fr);gap:0;margin-top:36px;background:#0d0d0d;border:1px solid #1c1c1c;border-radius:20px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.player{position:relative;aspect-ratio:16/9;background:#000}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.soon{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:14px;background:radial-gradient(70% 70% at 50% 40%,#16161c,#050505 80%)}
.soon span{font-weight:200;font-size:var(--fs-3xl);color:#e6e6e6}
.soon.art{background-size:cover;background-position:center;display:block}
.soon.art .badge{position:absolute;top:18px;left:18px;font-size:var(--fs-xs);font-weight:400;color:#8a8a8a}
.soon em{font-style:normal;font-size:var(--fs-sm);letter-spacing:.34em;text-transform:uppercase;color:var(--mid)}
.wside{padding:32px 30px;border-left:1px solid #1c1c1c;display:flex;flex-direction:column}
.wside p{font-weight:300;color:var(--mid);line-height:1.7;font-size:var(--fs-base);margin-top:6px;flex:1}
.pill.yt,.pill.dev{align-self:flex-start;margin-top:28px;padding:14px 26px;font-size:var(--fs-sm);white-space:nowrap;max-width:100%}
/* Per-video figures for the episode on screen (filled from /api/subs) */
.wside .wstats{flex:none;display:flex;gap:0 clamp(28px,3vw,40px);margin-top:22px;padding-top:22px;border-top:1px solid #1c1c1c}
.wstats[hidden]{display:none}
.wstat b{display:block;font-family:var(--logo);font-weight:var(--logo-w);letter-spacing:var(--logo-track);font-size:var(--fs-xl);line-height:1.1;color:#e6e6e6;font-variant-numeric:tabular-nums}
.wstat span{display:block;margin-top:9px;font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--low);line-height:1}
@media (min-width:861px) and (max-width:1100px){.pill.yt,.pill.dev{padding:14px 18px;letter-spacing:.2em}}
/* Mailing-list signup shown on unreleased episodes */
.wnotify{margin-top:26px;padding-top:22px;border-top:1px solid #1c1c1c}
.wnotify[hidden]{display:none}
.wside .wnotify p{flex:none}
.wnotify-h{font-size:var(--fs-sm);font-weight:300;color:#d0d0d0;line-height:1.55;margin:0 0 14px}
.wnotify input{width:100%;padding:13px 15px;font-size:var(--fs-sm);color:var(--fg);background:#080808;border:1px solid #2a2a2a;border-radius:12px}
.wnotify input::placeholder{color:#6a6a6a}
.wnotify button{width:100%;margin-top:10px;padding:13px;font-weight:600;font-size:var(--fs-sm);letter-spacing:.14em;text-transform:uppercase;background:var(--btn);color:#000;border:0;border-radius:12px;cursor:pointer}
.wnotify button[disabled]{opacity:.6;cursor:default}
.wnotify .note{margin-top:10px;text-align:start}
.eps{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.eps .eyebrow{margin:0 18px 0 6px}
.eps button{background:#0d0d0d;border:1px solid #1c1c1c;color:#6a6a6a;border-radius:10px;padding:13px 22px;font-size:var(--fs-sm);font-weight:300;cursor:pointer;transition:color .2s,border-color .2s;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.eps button:hover{color:#e6e6e6;border-color:#2a2a2a}
.eps button.on{color:#e6e6e6;background:#151515;border-color:#2e2e2e}
.eps button.tr{border-style:dashed}
.thumb .play{position:absolute;z-index:2;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.45);backdrop-filter:blur(6px)}
.thumb .play::after{content:"";position:absolute;left:22px;top:18px;border-left:14px solid #e6e6e6;border-top:9px solid transparent;border-bottom:9px solid transparent}
@media (max-width:860px){.player-card{grid-template-columns:1fr}.wside{border-left:0;border-top:1px solid #1c1c1c;padding:24px 22px}.eps .eyebrow{width:100%;margin:0 0 6px 6px}}

/* ---- Beam: longer, plus soft wash inside the bar ---- */
.menu::before{background:conic-gradient(from var(--a),transparent 0 58%,rgba(170,170,170,.05) 70%,rgba(185,185,185,.5) 86%,rgba(170,170,170,.08) 95%,transparent 100%);animation-duration:9s}
.menu::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:conic-gradient(from var(--a),transparent 0 62%,rgba(190,190,190,.10) 86%,transparent 100%);filter:blur(16px);opacity:.9;animation:beam 9s linear infinite}
@media (prefers-reduced-motion:reduce){.menu::after{animation:none;opacity:0}}

.banner{background-size:contain;background-repeat:no-repeat;background-position:50% 50%;position:relative;aspect-ratio:4912/1344;height:auto}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,10,.55),rgba(10,10,10,.1) 35%,var(--bg))}
.person .pic{background-size:cover;background-position:50% 30%;font-size:0}

/* ---- Mobile polish pass ---- */
.lbl-short{display:none}
@media (max-width:860px){
.lbl-long{display:none}
.lbl-short{display:inline}
.menu{flex-wrap:wrap;justify-content:center;gap:2px 0;padding:5px 6px;border-radius:14px;overflow:visible}
.menu a{flex:0 0 auto;font-size:var(--fs-xs);letter-spacing:.1em;padding:10px 12px}
.menu a.homeb{padding:10px 11px}
.wrap{padding-top:calc(var(--navh,160px) + 22px)}
.hero-inner{padding-top:34px}
.grid{grid-template-columns:repeat(2,1fr);gap:14px}
.filters{gap:8px}
.filters button{font-size:var(--fs-sm);letter-spacing:.14em;padding:10px 14px;box-shadow:none}
.signup{padding-bottom:clamp(48px,7vw,64px)}
.signup input{padding:16px 18px;font-size:var(--fs-base)}
.signup button{padding:16px;margin-top:16px}
footer{padding:40px 20px 44px;gap:20px}
}
@media (max-width:420px){
.menu a{font-size:var(--fs-xs);letter-spacing:.08em;padding:10px 10px}
}
.link.soon{opacity:.4;pointer-events:none}
/* Originals + In development: the whole card is the link (Watch now stretches over it) */
.show .link:not(.soon)::after{content:"";position:absolute;inset:0;z-index:4}
.show:hover .link:not(.soon){color:var(--fg);border-color:var(--fg)}
.show[id]{scroll-margin-top:calc(var(--navh,96px) + 28px)}

/* ---- Legal pages (privacy, terms) ---- */
.legal{max-width:68ch;margin-top:clamp(28px,4vw,40px)}
.legal p,.legal li{color:var(--mid);line-height:1.75;font-size:var(--fs-base)}
.legal p{margin:0 0 16px}
.legal h2{font-weight:400;font-size:var(--fs-xl);color:#e6e6e6;margin:clamp(38px,5vw,54px) 0 14px;letter-spacing:-.01em}
.legal h3{font-weight:500;font-size:var(--fs-base);color:#d2d2d2;margin:26px 0 10px}
.legal ul{margin:0 0 16px;padding-inline-start:22px}
.legal li{margin-bottom:9px}
.legal a{color:#e6e6e6;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--low);text-underline-offset:3px}
.legal a:hover{text-decoration-color:#e6e6e6}
.legal .upd{color:var(--low);font-size:var(--fs-sm);letter-spacing:.04em;margin-bottom:clamp(30px,4vw,42px)}
.legal .enonly{border:1px solid var(--line);border-radius:10px;padding:16px 18px;background:#0d0d0d;color:var(--low);font-size:var(--fs-sm);line-height:1.6;margin:0 0 clamp(30px,4vw,42px)}

/* ---- Festival laurels: "Award winner" row (2) over "Official selection" row (4), same laurel size ---- */
.laurels{max-width:1100px;margin:clamp(56px,8vw,90px) auto 0;padding:0 clamp(18px,4vw,32px);text-align:center}
.laurels .lx{font-size:var(--fs-xs);letter-spacing:.34em;text-transform:uppercase;opacity:.5;margin:0 0 clamp(20px,2.2vw,28px)}
.laurels .lgrp+.lgrp{margin-top:clamp(34px,3.8vw,48px)}
.laurels{--lh:min(113px,calc((90vw - 120px) / 6.16))}
.laurels .lrow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(14px,2.2vw,32px) clamp(16px,2.6vw,40px);margin:0 auto}
.laurels .lrow img{display:block;height:var(--lh);width:auto;max-width:none}
.laurels .lrow img.wide{height:calc(var(--lh) * .84)}
.laurels .lcert{display:block;border-radius:12px;transition:opacity .2s,transform .2s}
.laurels .lcert:hover{opacity:.78;transform:translateY(-2px)}
.laurels .lcert:focus-visible{outline:1px solid rgba(255,255,255,.6);outline-offset:6px}
.laurels .lf{margin:clamp(26px,2.8vw,34px) 0 0;font-size:var(--fs-sm);letter-spacing:.22em;text-transform:uppercase;opacity:.38}
.home-laurels{width:min(90%,1120px);max-width:none;margin:0 auto;padding:clamp(36px,4.4vw,56px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.certbtn{display:inline-block;margin-top:clamp(22px,2.6vw,30px);padding:12px 24px;border:1px solid #2a2a2a;border-radius:999px;color:#cfcfcf;text-decoration:none;font-size:var(--fs-xs);letter-spacing:.22em;text-transform:uppercase;transition:border-color .2s,color .2s}
.certbtn:hover{border-color:#5a5a5a;color:#fff}
/* certificate pop-up */
.certs{margin:auto;border:0;padding:0;background:transparent;color:inherit;width:min(92vw,1000px);max-width:none;max-height:none}
.certs::backdrop{background:rgba(0,0,0,.84)}
.certs-in{background:#0b0b0b;border:1px solid #1f1f1f;border-radius:14px;padding:clamp(16px,2.4vw,28px);max-height:88vh;overflow:auto;text-align:center}
.certs-hd{display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:calc(-1 * clamp(16px,2.4vw,28px));z-index:2;margin:calc(-1 * clamp(16px,2.4vw,28px)) calc(-1 * clamp(16px,2.4vw,28px)) clamp(14px,1.8vw,20px);padding:clamp(16px,2.4vw,28px);background:#0b0b0b;border-bottom:1px solid #1a1a1a}
.certs-hd h2{margin:0;font-weight:400;font-size:var(--fs-xs);letter-spacing:.26em;text-transform:uppercase;color:#bdbdbd;text-align:start}
.certs-x{flex:none;padding:9px 18px;border:1px solid #2a2a2a;border-radius:999px;background:none;color:#cfcfcf;font:inherit;font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,color .2s}
.certs-x:hover{border-color:#5a5a5a;color:#fff}
.certs figure{margin:0}
.certs figure+figure{margin-top:28px}
.certs figure img{display:block;width:100%;height:auto;border-radius:6px}
.certs figcaption{margin-top:14px;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:#8a8a8a}
html:has(dialog.certs[open]){overflow:hidden}
@media (max-width:860px){
.laurels{--lh:min(100px,calc((90vw - 16px) / 3.08))}
.laurels .lrow{gap:18px 16px}
.laurels .lf{font-size:var(--fs-xs);letter-spacing:.16em}
}
.gbox{display:block;width:fit-content;margin:clamp(40px,4.4vw,56px) auto 0;padding:22px 40px;border:1px solid #1c1c1c;border-radius:14px;background:#0d0d0d;color:#9a9a9a;text-decoration:none;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.5);transition:border-color .2s,color .2s}
.gbox b{display:block;font-weight:400;font-size:var(--fs-sm);letter-spacing:.24em;text-transform:uppercase;color:#e6e6e6}
.gbox span{display:block;margin-top:8px;font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:#6a6a6a}
.gbox:hover{border-color:#3a3a3a;color:#e6e6e6}

/* ---- Home about text: one centred column under the laurels ---- */
.about p:last-child{margin-bottom:0}
.about .inl{color:#e6e6e6;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--low);text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.about .inl:hover{color:#fff;text-decoration-color:#e6e6e6}
.about-wrap{width:min(90%,1120px);margin:clamp(48px,5.6vw,72px) auto 0}
.about-wrap .about{width:auto;max-width:62ch;margin:0 auto}
.about-wrap .about p{max-width:none}
@media (max-width:860px){
.signup{margin-top:40px}
}

/* ---- Responsive hardening ---- */
/* Desktop nav between tablet-landscape and small laptop: keep items on one line */
@media (min-width:861px) and (max-width:1180px){
.menu a{white-space:nowrap;font-size:var(--fs-sm);letter-spacing:.14em;padding:9px 12px}
}
@media (min-width:861px) and (max-width:1100px){
.lbl-long{display:none}
.lbl-short{display:inline}
}
@media (max-width:860px){
/* Hero: always full width. Portrait keeps the tall crop, capped to the screen. */
  .hero{aspect-ratio:auto;width:100%;height:min(calc(100vw * 13 / 9),88svh);min-height:0;max-height:none}
/* Bigger tap targets, same look */
  .menu a{padding:12px 12px}
.menu a.homeb{padding:12px 11px}
.link{padding:8px 0 4px}
.back{padding:10px 0;margin-bottom:18px}
footer nav{gap:6px 18px}
footer nav a{display:inline-block;padding:8px 0}
.wordmark small{font-size:var(--fs-xs)}
}
@media (max-width:420px){.menu a{padding:12px 10px}}
/* Phone held sideways: fill the screen, shrink the wordmark to fit */
@media (max-width:860px) and (orientation:landscape){
.hero{height:100svh}
.hero-inner{padding-top:100px}
  .logo{font-size:calc(clamp(3.5rem,24svh,7rem) * var(--logo-scale))}
  .slogan{margin-top:12px}
.cue{display:none}
}

/* ---- Type scale: 8 steps, phone body at 16px ---- */
@media (max-width:860px){:root{--fs-base:1rem}}
.oa-band{display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,56px);flex-wrap:wrap;
  margin:clamp(56px,8vw,88px) 0 0;padding:clamp(32px,4vw,44px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.oa-band.oa-first{margin-top:clamp(28px,4vw,40px)}
.oa-band.oa-first + .quote{margin-top:clamp(44px,6vw,64px)}
.oa-band.oa-last{margin-top:clamp(64px,9vw,100px)}
.oa-band .oa-copy{flex:1 1 320px;min-width:0}
.oa-band .oa-copy p{color:var(--mid);line-height:1.7;margin:10px 0 0;max-width:46ch}
.oa-band img{height:clamp(26px,3.4vw,34px);width:auto;flex:0 0 auto;opacity:.9}
.oa-hero{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 6px}
.oa-hero a{display:inline-flex;line-height:0}
.oa-hero img{height:clamp(24px,3vw,30px);width:auto}
.oa-hero span{font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--mid)}
.gsteps{counter-reset:g;margin:clamp(48px,6vw,72px) 0 0}
.gstep{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,40px);padding:clamp(28px,4vw,38px) 0;border-top:1px solid var(--line)}
.gstep:last-child{border-bottom:1px solid var(--line)}
.gstep .gn{font-size:var(--fs-sm);color:var(--mid);letter-spacing:.14em;padding-top:4px}
.gstep .gn:before{counter-increment:g;content:counter(g,decimal-leading-zero)}
.gstep h3{font-weight:300;font-size:var(--fs-lg);margin:0 0 10px}
.gstep p{color:var(--mid);line-height:1.75;margin:0;max-width:62ch}
.gstep p+p{margin-top:12px}
.gshot{margin:26px 0 0;max-width:820px}
.gshot img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:10px;background:#0f0f11}
.gshot.narrow{max-width:360px}
.gcaps{list-style:none;counter-reset:c;margin:18px 0 0;padding:0;max-width:62ch}
.gcaps li{counter-increment:c;position:relative;padding-left:34px;color:var(--mid);font-size:var(--fs-sm);line-height:1.7;margin-bottom:9px}
.gcaps li:before{content:counter(c);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:#ff2d9b;color:#fff;font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.gcaps b{color:var(--fg);font-weight:400}
.pstage{margin:18px 0 20px}
.pstage .pbar{display:flex;gap:6px;margin-bottom:10px}
.pstage .pbar i{flex:1;height:3px;border-radius:2px;background:#232326}
.pstage .pbar i.done{background:#6a6a6f}
.pstage .pbar i.now{background:#ff2d9b}
.pstage .plab{font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--mid)}
.pstage .plab b{color:#ff2d9b;font-weight:500}
.ytsub{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 0 clamp(26px,4vw,38px);border-bottom:1px solid var(--line)}
.ytsub .ytsub-h{font-size:var(--fs-sm);letter-spacing:.14em;text-transform:uppercase;color:var(--mid);margin:0}
.ytcard{display:flex;align-items:center;gap:18px;max-width:100%;min-width:min(480px,100%);padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.ytcard{position:relative;overflow:hidden;isolation:isolate}
.ytcard .ytch,.ytcard .ytbtn,.ytcard .ytcol{position:relative;z-index:1}
.ytcol{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px}
.ytcount{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--mid);line-height:1}
.ytcount[hidden]{display:none}

/* CHANNEL STATS STRIP */
.statrow{width:min(90%,1120px);margin:clamp(34px,5vw,54px) auto 0;display:flex;justify-content:center;align-items:stretch}
.stat[hidden]{display:none}
.stat[hidden]+.stat::before{content:none}
.statrow[hidden]{display:none}
/* Two groups: combined social audience on one side, YouTube-only figures on the
   other, each captioned with where its numbers come from. */
.statgrp{display:flex;flex-direction:column;justify-content:flex-start;padding-inline:clamp(18px,3.4vw,44px)}
.statgrp[hidden]{display:none}
.statgrp+.statgrp{border-inline-start:1px solid var(--line)}
.statgrp .stats{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.grp-src{margin:0 0 clamp(12px,1.5vw,18px);text-align:center;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:#4c4c4c;line-height:1.3;white-space:nowrap}
.stat{padding:4px clamp(8px,2vw,24px);text-align:center;position:relative}
.stat+.stat::before{content:"";position:absolute;inset-block:14%;inset-inline-start:0;width:1px;background:var(--line)}
.stat-n{display:block;font-family:var(--logo);font-weight:var(--logo-w);letter-spacing:var(--logo-track);font-size:var(--fs-2xl);line-height:1.1;font-variant-numeric:tabular-nums}
.stat-l{display:block;margin-top:10px;font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--low);line-height:1}
.about .statrow,.wrap .statrow{width:100%}
#statrow-home{margin-top:clamp(28px,2.8vw,40px);margin-bottom:clamp(36px,3.9vw,56px)}
#statrow-about{margin-top:clamp(46px,5vw,73px)}
@media (max-width:520px){.stat{padding:4px 6px}.stat-l{letter-spacing:.12em}.stat-n{font-size:clamp(1.1rem,5.9vw,var(--fs-2xl))}}
/* Four stats will not sit in one row on a phone: fall back to a 2x2 block.
   Dividers come off because a hidden cell would leave one stranded. */
@media (max-width:620px){
.statrow{flex-direction:column;align-items:stretch}
.statgrp{padding-inline:0}
.statgrp+.statgrp{border-inline-start:0;border-top:1px solid var(--line);margin-top:clamp(22px,5vw,30px);padding-top:clamp(22px,5vw,30px)}
}

/* per-card view/like counts */
.meta .st{grid-column:1/-1;margin-top:8px;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--low);line-height:1}
.meta .st:empty{display:none}
.ytplay{position:absolute;z-index:0;pointer-events:none;right:140px;top:50%;height:170%;aspect-ratio:480/328;transform:translateY(-50%);opacity:.4;transition:opacity .4s ease}
.ytplay img{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none}
.ytplay .on{opacity:0;transition:opacity .4s ease}
.ytcard:hover .ytplay{opacity:1}
.ytcard:hover .ytplay .on{opacity:1}
.ytch{display:flex;align-items:center;gap:12px;color:#e6e6e6;text-decoration:none;margin-right:auto}
.ytch .mark{height:44px;width:44px;display:block;color:#e6e6e6;flex:none;transition:color .2s}
.ytch:hover .mark,.ytch:hover .wordmark b{color:#fff}
.ytbtn{flex:none;display:inline-block;border:1.5px solid var(--btn);color:var(--btn);border-radius:10px;padding:10px 18px;font-size:var(--fs-sm);font-weight:500;letter-spacing:.1em;text-transform:uppercase;background:rgba(0,0,0,.15);transition:background .2s;text-decoration:none}
.ytbtn:hover{background:rgba(223,231,248,.14)}
.ytcard{text-align:left}
.ytch .wordmark b{white-space:nowrap}
@media (max-width:860px){.ytch .mark{height:38px;width:38px}.ytcard{gap:12px;padding:10px 12px}.ytbtn{padding:10px 14px}}
@media (max-width:600px){.ytcard{flex-wrap:wrap;min-width:0;width:100%;gap:12px}.ytcol{flex:1 1 100%}.ytbtn{width:100%;text-align:center}.ytplay{right:-14px;top:-18px;height:80px;transform:none}}
.gtrouble{max-width:62ch;margin-top:24px}
.gtrouble p{color:var(--mid);line-height:1.75;margin:0 0 14px}
.gtrouble p.lead{color:var(--fg);margin-bottom:18px}
.gtakes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px);margin:clamp(28px,4vw,40px) 0 0}
.gtake{min-width:0}
.gtake video{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--line);background:#000}
.gtake .tk{display:flex;align-items:baseline;gap:10px;margin:14px 0 8px}
.gtake .tk b{font-size:var(--fs-sm);letter-spacing:.02em;color:var(--fg);font-weight:600}
.gtake .tk span{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--low)}
.gtake p{color:var(--mid);line-height:1.7;margin:0 0 10px;font-size:var(--fs-sm)}
@media (max-width:860px){.gtakes{grid-template-columns:1fr;gap:34px}}
.arena{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:clamp(18px,2.6vw,26px);margin:clamp(26px,3.6vw,34px) 0 0}
.arena-h{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.arena-h p{margin:0;font-size:var(--fs-lg);font-weight:600;color:var(--fg);letter-spacing:-.01em}
.arena-h a{display:inline-flex;line-height:0;opacity:.95}
.arena-h img{height:20px;width:auto}
.arena-g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,28px)}
.arena-c h4{margin:0 0 10px;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--mid);font-weight:500}
.arena-c ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.arena-c li{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.arena-c li .ar{width:18px;flex:none;font-size:var(--fs-xs);color:var(--low);font-variant-numeric:tabular-nums}
.arena-c li svg{width:15px;height:15px;flex:none;fill:var(--mid)}
.arena-c li b{font-weight:500;color:var(--fg);font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arena-c li .am{color:var(--low);font-size:var(--fs-xs);white-space:nowrap}
.arena-c li .as{margin-left:auto;flex:none;color:var(--mid);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.arena-c li:first-child b{color:#ff2d9b}
.arena-c li:first-child svg{fill:#ff2d9b}
.arena-f{margin:16px 0 0;font-size:var(--fs-xs);color:var(--low);line-height:1.6}
.arena-f a{color:var(--mid);text-decoration:underline;text-underline-offset:2px}
@media (max-width:720px){.arena-g{grid-template-columns:1fr;gap:20px}.arena-c li .am{display:none}}
.gfaq{max-width:72ch;margin-top:clamp(28px,4vw,40px);border-top:1px solid var(--line)}
.gfaq details{border-bottom:1px solid var(--line)}
.gfaq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;color:var(--fg);font-size:var(--fs-base);font-weight:400;line-height:1.5}
.gfaq summary::-webkit-details-marker{display:none}
.gfaq summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;border-right:1.5px solid var(--mid);border-bottom:1.5px solid var(--mid);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.gfaq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.gfaq summary:hover{color:#fff}
.gfaq .a{padding:0 0 22px}
.gfaq .a p{color:var(--mid);line-height:1.75;margin:0 0 12px;font-size:var(--fs-sm)}
.gfaq .a p:last-child{margin-bottom:0}
.gprompt{margin:22px 0 0;padding:18px 20px;border:1px solid var(--line);border-radius:10px;background:#0f0f11;white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;line-height:1.7;color:var(--mid);max-width:820px;overflow-x:auto}
.disclose{max-width:62ch;margin:clamp(40px,5vw,56px) auto 0;text-align:center;color:var(--mid);font-size:var(--fs-sm);line-height:1.7}
.fan-note{max-width:62ch;margin:40px auto 0;text-align:center;color:var(--mid);line-height:1.7}
.about-laurels{max-width:none;margin:clamp(53px,5.6vw,81px) 0 0;padding:clamp(40px,5vw,56px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.about-laurels.al-top{margin-top:0;padding-top:clamp(28px,4vw,40px);border-top:none}
.about-laurels.al-top + .quote,.about-laurels.al-top + .ab-intro{margin-top:clamp(44px,6vw,64px)}
/* About: intro and filmmaker sit in the centre of the page, like the homepage text */
.ab-intro{max-width:640px;margin-left:auto;margin-right:auto}
.ab-intro .quote{max-width:none;text-align:center;text-wrap:balance}
.ab-intro .lead{max-width:none}
.ab-person{text-align:center}
.ab-person .people{grid-template-columns:minmax(180px,220px);justify-content:center}

/* ---- Eight-item menu: even rows at every width, no orphan item ---- */
@media (max-width:700px){
.menu a{padding:12px 9px;letter-spacing:.07em}
.menu a.homeb{padding:12px 9px}
}
@media (max-width:560px){
.menu{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:2px}
.menu a{flex:none;padding:12px 2px;letter-spacing:.06em;font-size:clamp(.5rem,2.45vw,.7rem)}
.menu a.homeb{padding:12px 2px}
}
/* Nothing in the bar ever breaks across lines */
.menu a,.wordmark b,.wordmark small{white-space:nowrap}
/* Small laptop / tablet landscape: compact brand so the bar clears it */
@media (min-width:861px) and (max-width:1150px){
.wordmark small{display:none}
.wordmark b{font-size:var(--fs-sm)}
.brand .mark{height:36px;width:36px}
.menu a{font-size:var(--fs-xs);letter-spacing:.1em;padding:10px 9px}
.menu a.homeb{padding:10px 9px}
.lbl-long{display:none}
.lbl-short{display:inline}
}
/* Laptop: full brand, tighter bar */
@media (min-width:1151px) and (max-width:1340px){
.menu a{font-size:var(--fs-xs);letter-spacing:.11em;padding:10px 11px}
.menu a.homeb{padding:10px 11px}
.lbl-long{display:none}
.lbl-short{display:inline}
}

/* =====================================================================
   LANGUAGES. Every page exists in 25 languages (see build.py / i18n_lib.py).
   These rules make the same layout hold in scripts and lengths English
   never tested: Arabic mirrors, CJK/Thai/Devanagari get their own fonts,
   tracking is switched off where it breaks letterforms, and prose is
   allowed to wrap anywhere so no string can push out of its box.
   ===================================================================== */

/* ---- Footer language picker ---- */
.langpick{display:block;width:100%;max-width:920px;margin:0 auto;text-align:center;font-size:var(--fs-sm);letter-spacing:.06em;color:var(--mid)}
.langpick summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border:1px solid var(--line);border-radius:10px;color:var(--mid);background:#0d0d0d;transition:color .2s,border-color .2s;user-select:none;letter-spacing:.06em}
.langpick summary::-webkit-details-marker{display:none}
.langpick summary:hover,.langpick[open] summary{color:var(--fg);border-color:#2a2a2a}
.lp-globe{width:14px;height:14px;border:1.4px solid currentColor;border-radius:50%;position:relative;flex:none;box-sizing:border-box}
.lp-globe::before{content:"";position:absolute;inset:-1.4px;border-radius:50%;border:1.4px solid currentColor;transform:scaleX(.42)}
.lp-globe::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.4px solid currentColor}
.langpick ul{list-style:none;width:100%;margin:14px auto 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px 12px;text-align:start}
.langpick li a{display:block;padding:8px 10px;border-radius:8px;color:var(--mid);letter-spacing:0;transition:color .2s,background .2s}
.langpick li a:hover{color:var(--fg);background:#101010}
.langpick li a.on{color:var(--fg)}
@media (max-width:600px){.langpick ul{grid-template-columns:repeat(2,1fr)}}

/* ---- Fonts per script (Google Fonts serves only the glyph ranges a page uses) ---- */
html[lang="ja"]{--body:"Inter","Noto Sans JP",system-ui,-apple-system,sans-serif}
html[lang="ko"]{--body:"Inter","Noto Sans KR",system-ui,-apple-system,sans-serif}
html[lang="zh-Hans"]{--body:"Inter","Noto Sans SC",system-ui,-apple-system,sans-serif}
html[lang="zh-Hant"]{--body:"Inter","Noto Sans TC",system-ui,-apple-system,sans-serif}
html[lang="ar"]{--body:"Inter","Noto Sans Arabic",system-ui,-apple-system,sans-serif}
html[lang="hi"]{--body:"Inter","Noto Sans Devanagari",system-ui,-apple-system,sans-serif}
html[lang="th"]{--body:"Inter","Noto Sans Thai",system-ui,-apple-system,sans-serif}

/* Tracking breaks joined Arabic and looks wrong on CJK, Thai and Devanagari; uppercase does nothing there */
html[lang="ar"] *,html[lang="ja"] *,html[lang="ko"] *,html[lang^="zh"] *,html[lang="th"] *,html[lang="hi"] *{letter-spacing:0!important}
/* Tall scripts need room above and below the x-height, especially in tight headings */
html[lang="th"] :is(h1,h2,h3,h4,.h1,.h2,.lead,p,li,button,a),html[lang="hi"] :is(h1,h2,h3,h4,.h1,.h2,.lead,p,li,button,a),html[lang="ar"] :is(h1,h2,h3,h4,.h1,.h2){line-height:1.35}
html[lang="ja"] :is(h1,h2,h3,.h1,.h2),html[lang="ko"] :is(h1,h2,h3,.h1,.h2),html[lang^="zh"] :is(h1,h2,h3,.h1,.h2){line-height:1.25}
/* No string may escape its box, whatever the language */
p,li,dd,blockquote,h1,h2,h3,h4,.lead,.a,.meta span,.plab,.eyebrow,.badge,.note,.quote,.statement,.disclose,.fan-note,.ytsub-h,.langpick,footer span{overflow-wrap:anywhere}
html[lang="de"] :is(p,li,.lead),html[lang="nl"] :is(p,li,.lead),html[lang="fi"] :is(p,li,.lead),html[lang="sv"] :is(p,li,.lead),html[lang="no"] :is(p,li,.lead),html[lang="da"] :is(p,li,.lead){hyphens:auto}
/* Corner badges grow with their text but never past the card */
.badge{max-width:calc(100% - 24px);white-space:normal;line-height:1.35}

/* ---- Right-to-left (Arabic). dir="rtl" on <html> mirrors flex and grid; these are the few hand-placed things ---- */
[dir="rtl"] .badge{left:auto;right:12px}
[dir="rtl"] .soon.art .badge{left:auto;right:18px}
[dir="rtl"] .back::before{content:"\2192";margin-right:0;margin-left:10px}
[dir="rtl"] .wside{border-left:0;border-right:1px solid #1c1c1c}
[dir="rtl"] .gcaps li{padding-left:0;padding-right:34px}
[dir="rtl"] .gcaps li:before{left:auto;right:0}
[dir="rtl"] .ytplay{right:auto;left:140px}
[dir="rtl"] .ytch{margin-right:0;margin-left:auto}
[dir="rtl"] .ytcard{text-align:right}
[dir="rtl"] .arena-c li .as{margin-left:0;margin-right:auto}
[dir="rtl"] .gfaq summary::after{right:auto;left:8px}
[dir="rtl"] .logo small{padding-left:0;padding-right:.42em}
[dir="rtl"] .timeline::before{background:linear-gradient(270deg,#e6e6e6 0,#2a2a2a 22%,#2a2a2a 100%)}
@media (max-width:860px){
[dir="rtl"] .wside{border-right:0}
[dir="rtl"] .timeline{padding-left:0;padding-right:26px}
[dir="rtl"] .timeline::before{left:auto;right:4px;background:linear-gradient(#e6e6e6 0,#2a2a2a 22%,#2a2a2a 100%)}
[dir="rtl"] .tl i{left:auto;right:-26px}
}
@media (max-width:600px){
[dir="rtl"] .ytplay{right:auto;left:-14px}
}
/* ---- Header clears the hero ----------------------------------------------
   The nav is position:fixed and used to sit on top of the video, so whether
   the logo was legible depended on which frame happened to be playing. The
   hero now starts below the nav instead, leaving the brand and the menu on
   solid background. Heights come down by the same amount so the first screen
   is still exactly one viewport and everything below shifts with it. */
.hero{margin-top:var(--navh,96px);height:calc(100svh - var(--navh,96px))}
.hero-inner{padding-top:0}
@media (max-width:860px){
.hero{height:min(calc(100vw * 13 / 9),calc(88svh - var(--navh,160px)))}
}
@media (max-width:860px) and (orientation:landscape){
.hero{height:calc(100svh - var(--navh,96px))}
}
/* ---- Video playback: stand the blur down -------------------------------
   .nav.solid and .menu are fixed and carry backdrop-filter, so the compositor
   re-blurs whatever sits behind them on every painted frame. With a video
   running underneath that is every frame of the video, which is what makes
   playback stutter on anything but a fast machine. While something is
   playing the blur comes off and the panels go near-opaque instead, which
   looks near enough identical and costs nothing. */
html.vplay .nav.solid,html.vplay .menu{backdrop-filter:none;-webkit-backdrop-filter:none}
html.vplay .nav.solid{background:rgba(10,10,10,.94)}
html.vplay .menu{background:rgba(12,12,12,.9)}