/* =====================================================================
   CAMPBELL CONTENT STUDIO — "The Room Takes the Screen"
   The house is black and colorless. Each film brings its own light.
   Rules: type never sits on the picture; grain never sits on the type;
   Bodoni never below 28px; one off-system move per film.
   ===================================================================== */

/* Fallback faces sized to the web fonts (measured: Bodoni Moda is ~111% of Times New Roman, Archivo ~98% of Arial), so the swap barely reflows the page. */
@font-face{font-family:"Bodoni Fallback";src:local("Times New Roman"),local("TimesNewRomanPSMT"),local("Liberation Serif");size-adjust:111%;ascent-override:101%;descent-override:36%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans");size-adjust:98.3%;ascent-override:89.3%;descent-override:21.4%;line-gap-override:0%}
@font-face{font-family:"Archivo Narrow Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans");size-adjust:79%;ascent-override:111%;descent-override:26.6%;line-gap-override:0%}

:root{
  --black:#000000;      /* Projection Black, page              */
  --gate:#0b0b0b;       /* Gate, frame bed + raised surfaces    */
  --hairline:#2a2a2a;   /* Hairline, rules only, never text     */
  --ash:#9a948b;        /* Ash, labels, 7.0:1 on black          */
  --silver:#b8b3aa;     /* Silver Nitrate, body, 10.1:1         */
  --screen:#f3efe7;     /* Screen White, titles, 18.3:1         */
  /* film accents: each film owns one; none is used site-wide */
  --wish:#f0646a;       /* Blow Out The Candles, Velvet Red 6.7:1 */
  --storm:#a6c1ee;      /* THE DUEL, Storm Light 11.5:1          */
  --magenta:#ff5cb0;    /* Neon Run, Harbor Magenta 7.4:1        */
  --cyan:#4fe0ee;       /* Neon Run, second voice 13.2:1         */
  --marigold:#f0a02c;   /* Seven Candles, Marigold 9.8:1         */

  --serif:"Bodoni Moda","Bodoni Fallback",Didot,"Bodoni 72",Georgia,serif;
  --sans:"Archivo","Archivo Fallback","Helvetica Neue",Arial,sans-serif;
  --sans-narrow:"Archivo","Archivo Narrow Fallback","Arial Narrow",Arial,sans-serif;
  --jp:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;

  --gutter:clamp(16px,4.6vw,72px);
  --colgap:clamp(16px,2vw,32px);
  --section:clamp(76px,12vw,184px);

  --ease-gate:cubic-bezier(.7,0,.2,1);
  --ease-out:cubic-bezier(.16,.7,.12,1);

  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{background:var(--black);color:var(--screen);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
body{background:var(--black);color:var(--screen);font-family:var(--sans);font-stretch:100%;font-weight:400;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
@media (min-width:900px){ body{font-size:17px} }
img,svg,video{display:block;max-width:100%}
a{color:inherit}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
html.locked,html.locked body{overflow:hidden}

/* Page grain sits BEHIND all content (z-index:-1), so glyphs are never textured. */
.page{position:relative;z-index:1;overflow-x:clip}
.page::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--noise);background-size:240px;opacity:.045}

:focus-visible{outline:2px solid var(--screen);outline-offset:4px}
.skip{position:absolute;left:12px;top:-80px;background:var(--screen);color:#000;padding:12px 16px;z-index:60;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
[tabindex="-1"]:focus{outline:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- type system ---------- */
/* Bodoni at 64px and up: optical size follows the size (opsz auto), weight 400. */
.display{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;letter-spacing:-.02em;line-height:.96}
/* Bodoni from 28 to 56px: optical size pinned to 28 + weight 500, so hairlines stay crisp at 1x. */
.serif-m{font-family:var(--serif);font-weight:500;font-variation-settings:"opsz" 28;letter-spacing:-.005em;line-height:1.15}
.display em,.it{font-style:italic}
h1,h2,h3,.tagline{text-wrap:balance}
.logline,.synopsis{text-wrap:pretty}
.kw{margin-right:-.07em}
.billing{font-family:var(--sans-narrow);font-stretch:72%;font-weight:560;font-size:.8125rem;line-height:1.45;letter-spacing:.14em;text-transform:uppercase;text-wrap:balance}
.jp{font-family:var(--jp);font-weight:500;letter-spacing:.06em}

.wrap{width:100%;max-width:1600px;margin-inline:auto;padding-inline:var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--colgap)}
.grid > *{grid-column:1 / -1}

/* print-style section index:  01 — Films ─────────── 4 titles */
.idx{display:flex;align-items:center;gap:16px;color:var(--ash)}
.idx::after{content:"";order:2;flex:1;height:1px;background:var(--hairline)}
.idx .count{order:3}
@media (max-width:359px){ .idx .count{display:none} }

.textlink{color:var(--screen);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;text-decoration-color:var(--ash);transition:text-decoration-color .4s;display:inline-block;padding-block:6px}
.textlink:hover{text-decoration-color:var(--screen)}
.ext,.arrow{font-family:var(--sans);font-stretch:100%;letter-spacing:0}
/* links inside running text stay inline (no line-box jumps); padding only grows the tap area */
.textlink.inl{display:inline;padding-block:8px}
@media (max-width:899px){ .textlink.inl{padding-block:14px} }
@media (max-width:899px){ .textlink{padding-block:10px} }

/* ---------- nav ---------- */
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-block:14px;min-height:76px}
.wordmark{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:44px;color:var(--screen)}
.wm-main{font-family:var(--serif);font-weight:500;font-variation-settings:"opsz" 28;font-size:1.75rem;letter-spacing:-.01em;line-height:1}
.wm-rule{width:1px;height:22px;background:var(--hairline)}
.wm-sub{font-size:.75rem;letter-spacing:.22em;color:var(--silver);line-height:1.2;white-space:nowrap}
.nav-links{display:none;gap:30px;align-items:center}
.nav-links a{text-decoration:none;color:var(--silver);transition:color .4s;display:inline-flex;align-items:center;min-height:44px}
.nav-links a:hover{color:var(--screen)}
.nav-links a.btn-sm{color:#000;margin-left:6px}
.nav-links a.btn-sm:hover{color:var(--screen)}
.nav-right{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.btn-sm,.menu-btn,.nav-links a{white-space:nowrap}
.btn-sm{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;background:var(--screen);color:#000;text-decoration:none;border:1px solid var(--screen);transition:background .5s var(--ease-out),color .5s var(--ease-out)}
.btn-sm:hover{background:transparent;color:var(--screen)}
.menu-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 4px 0 12px;color:var(--screen);text-decoration:none}
@media (max-width:899px){
  .wordmark{flex-direction:column;align-items:flex-start;gap:5px}
  .wm-rule{display:none}
  .btn-sm{padding:0 14px}
}
@media (max-width:359px){ .nav{gap:8px} .wm-sub{letter-spacing:.14em} .nav-right{gap:4px} .nav-right .btn-sm{display:none} .nav-right .menu-btn{padding:0 2px 0 8px} }
@media (min-width:900px){
  .nav{padding-block:16px}
  .nav-links{display:flex}
  .nav-right{display:none}
  .wm-main{font-size:2rem}
}

/* full-screen phone menu (native <dialog>, opened with showModal) */
.menu-panel{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#000;color:var(--screen);overflow-y:auto}
.menu-panel[open]{display:flex;flex-direction:column}
.menu-panel::backdrop{background:#000}
.mp-top{display:flex;justify-content:space-between;align-items:center;padding-block:14px;border-bottom:1px solid var(--hairline)}
.mp-top .wordmark{flex-direction:column;align-items:flex-start;gap:5px}
.mp-list{padding-block:28px}
.mp-list a{display:block;padding:10px 0;text-decoration:none;font-size:2.25rem;line-height:1.2}
.mp-foot{margin-top:auto;padding-block:24px 32px;border-top:1px solid var(--hairline);display:flex;flex-wrap:wrap;gap:0 22px}
.mp-foot a{color:var(--silver);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}

/* ---------- letterbox frame ---------- */
.frame{position:relative;aspect-ratio:2.39 / 1;overflow:hidden;background:var(--gate);outline:1px solid #1a1a1a;outline-offset:-1px}
.frame picture,.frame img,.frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.grain-in{position:absolute;inset:-50%;pointer-events:none;background-image:var(--noise);background-size:200px;opacity:.13}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-5%,3%)}33%{transform:translate(4%,-6%)}50%{transform:translate(-2%,7%)}67%{transform:translate(6%,2%)}83%{transform:translate(-7%,-3%)}100%{transform:translate(1%,5%)}}
.bleed{margin-inline:calc(var(--gutter) * -1)}
@media (min-width:900px){ .bleed{margin-inline:0} }
@media (max-width:899px){ .frame{aspect-ratio:16 / 9} }

/* play control: the whole frame is the link; a solid black chip marks it */
.play{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;justify-content:flex-start;text-decoration:none;color:var(--screen)}
.chip{display:inline-flex;align-items:center;gap:12px;min-height:48px;background:#000;color:var(--screen);padding:0 20px 0 18px;transition:background .5s var(--ease-out),color .5s var(--ease-out)}
.tri{flex:none;width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.play:hover .chip{background:var(--screen);color:#000}
.play:focus-visible{outline:2px solid var(--screen);outline-offset:-3px}
.play:focus-visible .chip{background:var(--screen);color:#000}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 24px;text-decoration:none;border:1px solid var(--screen);font-family:var(--sans-narrow);font-stretch:72%;font-weight:600;font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;transition:background .5s var(--ease-out),color .5s var(--ease-out)}
.btn--solid{background:var(--screen);color:#000}
.btn--solid:hover{background:transparent;color:var(--screen)}
.btn--line{color:var(--screen)}
.btn--line:hover{background:var(--screen);color:#000}

/* =============== HERO =============== */
.hero{display:flex;flex-direction:column}
.hero-lockup{padding-top:clamp(18px,1.6vw,26px);row-gap:22px;align-items:end}
.hero h1{font-size:clamp(2.85rem,6.1vw,6.1rem);line-height:.93;letter-spacing:-.024em}
.hero h1 em{display:block}
.hero-side p{color:var(--silver);max-width:30em}
.ctas{display:flex;gap:10px;margin-top:22px}
.ctas .btn{flex:1 1 0;padding:0 12px}
@media (min-width:900px){
  .hero h1{grid-column:1 / span 8}
  .hero-side{grid-column:9 / -1;padding-bottom:4px}
  .ctas .btn{flex:0 0 auto;padding:0 24px}
}
@media (min-width:900px) and (max-width:1279px){ .ctas{flex-wrap:wrap} .ctas .btn{flex:1 1 auto;padding:0 16px} }
@media (max-width:899px){ .hero h1{font-variation-settings:"opsz" 40;font-weight:450} }
@media (max-width:359px){ .ctas{flex-direction:column} }
.hero-screen{margin-top:clamp(24px,2.2vw,32px)}
@media (max-width:899px){ .hero-screen{order:-1;margin-top:0} .hero-frame{aspect-ratio:4 / 3} }
.hero-frame video{background:var(--gate);object-position:50% 36%}
.sound-toggle{position:absolute;right:0;bottom:0;z-index:3;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;min-width:8.5rem;padding:0 16px 0 14px;background:#000;color:var(--screen);transition:background .5s var(--ease-out),color .5s var(--ease-out)}
.sound-toggle[hidden]{display:none}
.sound-toggle:focus-visible{background:var(--screen);color:#000;outline:2px solid #000;outline-offset:-5px}
@media (hover:hover){ .sound-toggle:hover{background:var(--screen);color:#000} }
.sound-toggle svg{width:16px;height:16px;flex:none}
.sound-toggle[data-state="off"] .ico-on,.sound-toggle[data-state="on"] .ico-off{display:none}
.hero-frame .grain-in{animation:grain 1s steps(6) infinite}
.hero.paused .hero-frame .grain-in{animation-play-state:paused}
@media (max-width:599px){ .hero-frame .grain-in{animation:none} }

/* slate: the reel's edit decision list, synced to the video */
.slate{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(14px,1.6vw,24px);padding-top:12px;align-items:start}
.cutlist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(14px,1.6vw,24px)}
.cut{--acc:var(--screen);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:9px;align-content:start;text-decoration:none;color:var(--ash);padding-bottom:8px;min-height:44px;transition:color .6s}
.cut .track{grid-column:1 / -1;height:2px;background:var(--hairline);position:relative;overflow:hidden;margin-top:6px}
.cut .track i{position:absolute;inset:0;background:var(--acc);transform:scaleX(0);transform-origin:left}
.cut.is-on{color:var(--screen)}
.cut .rt{font-variant-numeric:tabular-nums}
.cut:hover .cut-t{text-decoration:underline;text-underline-offset:4px}
.slate-meta{display:flex;align-items:flex-start;gap:14px}
.tcb{display:grid;row-gap:9px;text-align:right;color:var(--ash);padding-top:6px}
.tcb .tc{color:var(--silver);font-variant-numeric:tabular-nums}
.tcb .now{display:none}
.reel-toggle{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;min-width:9.25rem;padding:0 14px;border:1px solid var(--hairline);color:var(--screen);transition:border-color .4s,background .4s,color .4s;white-space:nowrap}
.reel-toggle:hover{border-color:var(--screen)}
.reel-toggle[hidden]{display:none}
.reel-toggle .ico{position:relative;width:10px;height:12px;flex:none}
.reel-toggle .ico::before,.reel-toggle .ico::after{content:"";position:absolute;top:0;bottom:0;width:3px;background:currentColor}
.reel-toggle .ico::before{left:0}
.reel-toggle .ico::after{right:0}
.reel-toggle[data-state="paused"] .ico::before{width:0;height:0;background:none;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.reel-toggle[data-state="paused"] .ico::after{display:none}
@media (max-width:899px){
  .slate{grid-template-columns:minmax(0,1fr);padding-top:0}
  .cutlist{column-gap:6px}
  .cut{min-height:44px;padding:0;row-gap:0;align-content:center}
  .cut .track{margin:0}
  .cut-t,.cut .rt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .slate-meta{justify-content:space-between;align-items:center;gap:12px}
  .tcb{display:flex;flex:1;justify-content:space-between;align-items:center;gap:12px;text-align:left;padding-top:0}
  .tcb .reelnote{display:none}
  .tcb .now{display:block}
  .tcb .now{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tcb .now b{font-weight:560;color:var(--screen)}
  .tcb .tc{white-space:nowrap}
  .reel-toggle{padding:0 12px;min-width:0;flex:none}
  .slate-meta{min-height:44px}
}
@media (max-width:599px){ .tcb .tc{display:none} }
@media (min-width:900px) and (max-width:1339px){
  .slate{grid-template-columns:minmax(0,1fr)}
  .slate-meta{justify-content:flex-end;align-items:center}
  .tcb{display:flex;gap:18px;padding-top:0}
}

/* facts strip: what the studio is, with no audience numbers */
.facts{margin-top:clamp(32px,4.4vw,64px)}
.facts-grid{display:grid;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.fact{display:grid;grid-template-columns:6.4em minmax(0,1fr);column-gap:14px;padding:16px 0}
.fact + .fact{border-top:1px solid var(--hairline)}
.fact dt{grid-row:1 / span 2;color:var(--ash);padding-top:.5em}
.fact .v{font-size:1.75rem;line-height:1.12;color:var(--screen);text-wrap:balance}
.fact .v em{font-style:italic}
.fact .n{color:var(--silver);font-size:.9375rem;line-height:1.45;margin-top:6px}
@media (min-width:600px) and (max-width:899px){
  .facts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact{display:flex;flex-direction:column;gap:6px;padding:18px 16px 18px 0}
  .fact dt{padding-top:0}
  .fact .n{margin-top:0}
  .fact + .fact{border-top:0}
  .fact:nth-child(2n){padding-left:16px;border-left:1px solid var(--hairline)}
  .fact:nth-child(n+3){border-top:1px solid var(--hairline)}
}
@media (min-width:900px){
  .facts-grid{grid-template-columns:1fr 1.5fr 1fr 1.3fr;grid-template-rows:auto auto auto}
  .fact{display:grid;grid-template-columns:1fr;grid-template-rows:subgrid;grid-row:span 3;row-gap:8px;padding:24px 24px 26px}
  .fact:first-child{padding-left:0}
  .fact + .fact{border-top:0;border-left:1px solid var(--hairline)}
  .fact dt{grid-row:auto;padding-top:0}
  .fact .v{font-size:clamp(1.75rem,2.3vw,2.25rem);margin-top:4px}
  .fact .n{margin-top:0}
}

/* =============== SECTIONS =============== */
.sec{padding-top:var(--section)}
#films{padding-top:clamp(76px,12vw,184px)}
.sec-head{row-gap:18px;margin-bottom:clamp(30px,6vw,96px)}
.sec-head h2{font-size:clamp(3.2rem,7.4vw,7.4rem);margin-top:clamp(14px,1.6vw,22px);letter-spacing:-.026em}
@media (max-width:599px){ .idx .count--long{display:none} }
.sec-head .dek{color:var(--silver);max-width:28em}
@media (max-width:899px){ .sec-head h2{font-variation-settings:"opsz" 40;font-weight:450} }
@media (min-width:900px){
  .sec-head{align-items:end}
  .sec-head h2{grid-column:1 / span 8}
  .sec-head .dek{grid-column:9 / -1;padding-bottom:12px}
}

/* =============== FILMS: the slate =============== */
.film{position:relative;--accent:var(--screen);scroll-margin-top:24px}
.film + .film{margin-top:clamp(80px,10vw,168px)}
.film-body{position:relative;row-gap:26px;padding-top:24px}
/* screen spill: the frame's light falls on the floor beneath it (kept very dark) */
.film-body::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:0;right:0;top:0;height:min(100%,440px);background:radial-gradient(60% 78% at 50% 0%,var(--spill),transparent 82%)}
@media (max-width:899px){
  /* on phones: a full-bleed mood band (holds up on OLED at low brightness) */
  .film-body{margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);padding-bottom:8px}
  .film-body::before{height:100%;background:linear-gradient(180deg,var(--spill) 0,transparent 92%)}
}
.film-no{color:var(--accent)}
.film-title{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;line-height:.98;letter-spacing:-.02em;margin:12px 0 0}
.tagline,.film .sub{display:block;font-family:var(--serif);font-style:italic;font-weight:500;font-variation-settings:"opsz" 28;font-size:clamp(1.75rem,2.1vw,2rem);line-height:1.2;letter-spacing:-.005em;margin-top:14px}
.tagline{color:var(--screen)}
.logline{color:var(--screen);max-width:30em;margin-top:18px;font-size:1.0625rem;line-height:1.5}
.synopsis{color:var(--silver);max-width:34em;margin-top:12px}
.credits{border-top:1px solid var(--hairline);padding-top:18px}
.rt-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--hairline)}
.rt-row dt{color:var(--ash)}
.rt-row dd{font-size:2.5rem;line-height:1;font-variant-numeric:lining-nums;color:var(--accent);letter-spacing:0;text-transform:none}
.cr{display:grid;grid-template-columns:7.5em minmax(0,1fr);column-gap:16px}
.cr + .cr{margin-top:9px}
.cr dt{color:var(--ash)}
.cr dd{color:var(--screen);font-size:.9375rem;line-height:1.45;letter-spacing:.1em;text-wrap:balance}
.cr dd .jp{text-transform:none}
.dubs{color:var(--ash);font-size:.875rem;line-height:1.5;margin-top:16px;max-width:34em}
.film-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin-top:18px}
.film-links .textlink{font-size:.9375rem}

.film--candles{--accent:var(--wish);--spill:#2e080d}
.film--candles .film-title{font-style:italic;font-size:clamp(3.2rem,6.6vw,6.6rem)}
.film--duel{--accent:var(--storm);--spill:#0b1324}
.film--duel .film-title{font-size:clamp(2.6rem,4.3vw,4.3rem);letter-spacing:.18em;font-weight:500;margin-right:-.18em}
.film--duel .sub{color:var(--storm);letter-spacing:-.005em}
.film--neon{--accent:var(--magenta);--spill:#1e081f}
.film--neon .film-title,.film--seven .film-title{font-size:clamp(2.8rem,4.4vw,4.4rem)}
.film--neon .sub{color:var(--cyan)}
.film--seven{--accent:var(--marigold);--spill:#241004}
.film--seven .sub{color:var(--marigold)}
@media (max-width:899px){
  .film-title{font-variation-settings:"opsz" 40;font-weight:450}
  .film--duel .film-title{font-weight:500}
}
@media (max-width:389px){ .film--duel .film-title{letter-spacing:.12em;margin-right:-.12em} }
/* THE DUEL: a single bolt of storm light runs down the engraved title's rule */
.film--duel .bolt{display:block;width:clamp(56px,6vw,88px);height:1px;margin-top:18px;background:linear-gradient(90deg,var(--storm),transparent)}
/* Neon Run's one off-system move: a vertical neon kana sign beside the title */
.title-row{display:flex;align-items:flex-start;gap:clamp(14px,1.6vw,22px)}
.kana{writing-mode:vertical-rl;font-family:var(--jp);font-weight:700;color:var(--magenta);border:1px solid var(--magenta);padding:8px 4px;font-size:clamp(1.3rem,1.7vw,1.6rem);line-height:1;letter-spacing:.12em;margin-top:12px;flex:none}
/* Seven Candles' one off-system move: the band credit set between rules */
.band{display:flex;align-items:center;gap:12px;color:var(--marigold);margin-top:16px}
.band::before,.band::after{content:"";width:28px;height:1px;background:currentColor}

.film .frame img{transition:transform 2.4s var(--ease-out)}
.film .frame:hover img{transform:scale(1.03)}

.subhead{display:flex;align-items:center;gap:16px;color:var(--ash);margin:clamp(88px,11vw,176px) 0 clamp(28px,4vw,56px)}
.subhead::after{content:"";flex:1;height:1px;background:var(--hairline)}
.pair{display:grid;gap:clamp(80px,10vw,140px)}
.pair .film + .film{margin-top:0}

@media (min-width:900px){
  .film--candles .head{grid-column:1 / span 7}
  .film--candles .side{grid-column:9 / -1;align-self:end}
  .film--duel .film-body > :first-child{grid-column:1 / span 7}
  .film--duel .film-body > :last-child{grid-column:9 / -1;align-self:end}
  /* the music-video pair: stills, heads and credit blocks share rows, so both runtimes sit level */
  .pair{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;column-gap:var(--colgap);row-gap:0}
  .pair .film{display:grid;grid-template-rows:subgrid;grid-row:span 3}
  .pair .film-body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;grid-row:span 2;row-gap:0}
  .pair .film-body > * + *{margin-top:24px}
}
@media (min-width:1280px){
  .film--duel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--colgap);align-items:end}
  .film--duel .frame{grid-column:1 / span 8}
  .film--duel .film-body{grid-column:9 / -1;padding-top:0;display:block}
  .film--duel .film-body::before{display:none}
  .film--duel::after{content:"";position:absolute;z-index:-1;left:0;width:66%;top:100%;height:300px;pointer-events:none;background:radial-gradient(60% 75% at 50% 0%,var(--spill),transparent 80%)}
  .film--duel .film-body > * + *{margin-top:26px}
}

/* =============== INSIDE ACC =============== */
.eps{display:grid;gap:26px}
.ep{position:relative}
.ep-card{display:grid;grid-template-columns:44% minmax(0,1fr);gap:14px;align-items:start;text-decoration:none;color:var(--screen)}
.ep-card:focus-visible{outline-offset:6px}
.ep .thumb{position:relative;aspect-ratio:16 / 9;overflow:hidden;background:var(--gate);outline:1px solid #1d1d1d;outline-offset:-1px}
.ep .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 2.4s var(--ease-out)}
.ep-card:hover .thumb img{transform:scale(1.03)}
.ep-cat{color:var(--ash)}
.ep :is(h3,h4){text-wrap:balance;font-family:var(--sans);font-weight:500;font-size:1rem;line-height:1.38;color:var(--screen);margin-top:6px}
.ep-card:hover :is(h3,h4){text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.ep-cue{display:flex;align-items:center;gap:8px;color:var(--screen);margin-top:12px}
.ep-cue .tri{border-left-width:7px;border-top-width:5px;border-bottom-width:5px}
.ep-card:hover .ep-cue{text-decoration:underline;text-underline-offset:4px}
.ep .watch{color:var(--silver);font-size:.875rem;text-decoration:underline;text-decoration-color:var(--hairline);text-underline-offset:4px;display:inline-block;line-height:44px}
.ep .watch:hover{color:var(--screen);text-decoration-color:var(--screen)}
@media (max-width:899px){ .ep .watch{margin-left:calc(44% + 14px)} }
@media (max-width:599px){ .ep-cue{display:none} .ep-cat::before{content:"";display:inline-block;margin-right:8px;border-left:7px solid var(--screen);border-top:5px solid transparent;border-bottom:5px solid transparent;vertical-align:0} }
@media (min-width:900px){
  .eps{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--colgap)}
  .ep-card{grid-template-columns:1fr;gap:16px}
  .ep :is(h3,h4){font-size:1.0625rem}
  .ep{display:flex;flex-direction:column;align-items:flex-start}
  .ep-card{align-self:stretch}
  .ep .watch{margin-top:auto;padding-top:2px}
}

/* =============== THE STUDIO: credits roll + channels =============== */
.presents{color:var(--ash);text-align:center;margin:clamp(40px,6vw,88px) 0 clamp(28px,4vw,52px)}
.roll{display:grid;row-gap:22px;text-align:center}
.roll div{display:grid;gap:6px}
.roll dt{color:var(--ash)}
.roll dd{font-size:clamp(1.75rem,2.6vw,2.5rem);line-height:1.12;color:var(--screen);text-wrap:balance}
.roll dd .it{font-style:italic}
@media (min-width:900px){
  .roll{row-gap:14px}
  .roll div{grid-template-columns:1fr 1fr;column-gap:40px;align-items:baseline}
  .roll dt{text-align:right}
  .roll dd{text-align:left}
}
.channels{margin-top:clamp(64px,8vw,120px)}
.chan{border-top:1px solid var(--hairline);padding-top:22px;display:grid;gap:22px;align-content:start}
.chan-text{display:grid;gap:18px;align-content:start}
.chan .billing.lbl{color:var(--screen)}
.chan h3{font-size:clamp(2.2rem,3.4vw,3.2rem);line-height:1.02;margin-top:8px}
.chan p{color:var(--silver);max-width:32em}
.chan .textlink{text-decoration-color:var(--screen)}
.chan .pic{position:relative;aspect-ratio:16 / 9;overflow:hidden;background:var(--gate);outline:1px solid #1a1a1a;outline-offset:-1px}
.chan .pic img,.chan .pic picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:899px){
  .chan h3{font-variation-settings:"opsz" 28;font-weight:500}
  .roll .dup{display:none}
  .roll{row-gap:18px}
}
@media (min-width:900px){
  .chan{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--colgap);align-items:center}
}

/* =============== WATCH IN YOUR LANGUAGE =============== */
.lang{row-gap:36px}
.lang h2{font-size:clamp(2.6rem,4.6vw,4.6rem);letter-spacing:-.02em;margin:22px 0 22px}
.lang .copy p{color:var(--silver)}
.lang .copy p + p{margin-top:12px}
.lang .copy .api{color:var(--ash);font-size:.9375rem}
.lang .copy .api .textlink{color:var(--silver)}
.yt-mark{display:inline-block;vertical-align:-2px;width:20px;height:14px;margin-right:8px;border:1px solid var(--ash);border-radius:3px;position:relative}
.yt-mark::after{content:"";position:absolute;left:7px;top:3px;border-left:6px solid var(--ash);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}
.nums{display:flex;gap:clamp(28px,4vw,56px);align-items:flex-end;margin-top:30px;padding-top:24px;border-top:1px solid var(--hairline)}
.num{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;line-height:.82;letter-spacing:-.04em;color:var(--screen)}
.num--big{font-size:clamp(6rem,11vw,11rem)}
.num--mid{font-size:clamp(4rem,6vw,6rem)}
.num + .billing{margin-top:14px;color:var(--ash);max-width:14em}
.lang .copy .num{color:var(--screen)}
.lang .copy .num + .billing{color:var(--ash)}
.burn{position:relative;aspect-ratio:16 / 9;overflow:hidden;background:var(--gate);outline:1px solid #1a1a1a;outline-offset:-1px}
.burn picture,.burn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.subbox{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);display:grid;z-index:3;width:max-content;max-width:92%}
.subbox span{grid-area:1 / 1;justify-self:center;background:#000;color:var(--screen);font-family:var(--sans);font-weight:500;font-size:clamp(1rem,1.5vw,1.375rem);line-height:1.35;padding:4px 12px 5px;opacity:0;transition:opacity .7s var(--ease-out);text-align:center}
.subbox span.on{opacity:1}
.subbox span[lang="ja"],.subs .line[lang="ja"]{font-family:var(--jp);font-weight:500}
.subs{margin-top:22px;border-top:1px solid var(--hairline)}
.subs li{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--hairline)}
.subs .billing{color:var(--ash);transition:color .6s}
.subs .line{font-family:var(--sans);font-size:1.0625rem;line-height:1.4;color:var(--screen)}
.subs li.on .billing{color:var(--screen)}
.subs li:has(> .sub-pick){display:block;padding:0}
.sub-pick{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:baseline;width:100%;min-height:44px;padding:11px 0}
.sub-pick:hover .billing{color:var(--screen)}
.caption{color:var(--ash);margin-top:12px}
@media (max-width:899px){ .lang h2{font-variation-settings:"opsz" 36;font-weight:450} .burn{margin-inline:calc(var(--gutter) * -1)} .subs li,.sub-pick{padding:8px 0} }
@media (min-width:900px){
  .lang .copy{grid-column:1 / span 5}
  .lang .media{grid-column:7 / -1;padding-top:30px}
}

/* =============== WORK WITH ME =============== */
.work h2{font-size:clamp(4rem,12vw,11rem);line-height:.9;letter-spacing:-.035em;margin:24px 0 clamp(40px,6vw,88px)}
@media (max-width:899px){ .work h2{font-variation-settings:"opsz" 40;font-weight:450} }
.lanes{display:grid;gap:34px}
.lane{border-top:1px solid var(--hairline);padding-top:20px}
.lane .billing{color:var(--ash)}
.lane h3{font-size:clamp(1.75rem,2.1vw,2rem);margin:10px 0 12px}
.lane p{color:var(--silver)}
.lane .textlink{margin-top:10px}
.kit{margin-top:clamp(64px,8vw,120px);row-gap:28px;border-top:1px solid var(--hairline);padding-top:clamp(26px,3vw,40px)}
.kit .lbl{color:var(--ash)}
.kit h3{font-size:clamp(1.9rem,2.8vw,2.6rem);margin-top:14px;line-height:1.12}
.kit p{color:var(--silver);margin-top:16px;max-width:30em}
.kit .lbl{max-width:none}
.kit .cr{grid-template-columns:8.5em minmax(0,1fr)}
.kit .cr + .cr{margin-top:14px}
.kit .cr dd{letter-spacing:0;text-transform:none;font-family:var(--sans);font-stretch:100%;font-weight:400;font-size:1rem;color:var(--screen);line-height:1.5;text-wrap:pretty}
.kit .credits{padding-top:20px}
.kit .draft{color:var(--ash);font-size:.875rem;margin-top:14px}
@media (max-width:899px){ .kit .cr{grid-template-columns:7.2em minmax(0,1fr)} .kit .cr dd{font-size:.9375rem} }
@media (max-width:359px){ .kit .cr{grid-template-columns:minmax(0,1fr);row-gap:4px} }
@media (min-width:900px){
  .lanes{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--colgap)}
  .lane{display:flex;flex-direction:column;align-items:flex-start}
  .lane h3 + p{flex-grow:1}
  .kit .credits{border-top:0;padding-top:16px}
  .kit .kit-l{grid-column:1 / span 5}
  .kit .kit-r{grid-column:7 / -1}
}
.cta-row{display:grid;gap:18px;margin-top:clamp(56px,7vw,104px);padding-top:clamp(28px,4vw,44px);border-top:1px solid var(--hairline);align-items:start}
.cta-row .btn{min-height:60px;padding:0 32px;font-size:.9375rem}
.cta-mail .addr{font-size:clamp(1.0625rem,5.6vw,1.25rem);font-weight:500;color:var(--screen);line-height:1.3;overflow-wrap:anywhere}
.cta-mail .micro{color:var(--silver);font-size:.9375rem;margin-top:6px;max-width:26em}
.socials{display:grid;margin-top:22px}
.socials a{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;min-width:0;min-height:44px;text-decoration:none;color:var(--silver);font-size:.9375rem}
.socials a:hover{color:var(--screen)}
.socials b{font-family:var(--sans-narrow);font-stretch:72%;font-weight:600;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);min-width:8.6em}
@media (min-width:900px){
  .cta-row{grid-template-columns:auto 1fr;column-gap:48px;align-items:center}
  .socials{display:flex;flex-wrap:wrap;gap:0 44px;margin-top:36px;padding-top:6px;border-top:1px solid var(--hairline)}
  .socials b{min-width:0}
}

/* =============== FOOTER: end credits =============== */
.foot{padding-top:var(--section);padding-bottom:36px}
.foot-mark{font-size:clamp(2.75rem,7.6vw,7.4rem);letter-spacing:-.03em;line-height:.95;padding-bottom:clamp(28px,4vw,48px);border-bottom:1px solid var(--hairline)}
@media (max-width:899px){ .foot-mark{font-variation-settings:"opsz" 40;font-weight:450} }
.foot-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"studio legal" "follow follow" "contact contact";gap:28px var(--colgap);padding-top:28px}
.foot-cols .fc-studio{grid-area:studio}.foot-cols .fc-follow{grid-area:follow}.foot-cols .fc-contact{grid-area:contact}.foot-cols .fc-legal{grid-area:legal}
.foot-cols h2{color:var(--ash);margin-bottom:6px}
.foot-cols a{display:inline-flex;align-items:center;min-height:40px;color:var(--silver);text-decoration:none;font-size:.9375rem;line-height:1.4;overflow-wrap:anywhere}
.foot-cols a:hover{color:var(--screen);text-decoration:underline;text-underline-offset:4px}
@media (max-width:899px){ .foot-cols a{min-height:44px} }
.foot-base{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 28px;margin-top:36px;padding-top:20px;border-top:1px solid var(--hairline);color:var(--ash)}
.foot-note{color:var(--ash);font-size:.875rem;max-width:44em}
.foot-also{color:var(--ash);font-size:.875rem}
.foot-also a{color:var(--silver);text-underline-offset:3px;display:inline-block;padding-block:12px}
.foot-note a{color:var(--silver);text-underline-offset:3px;padding-block:12px}
@media (max-width:899px){ .foot-note a{padding-block:15px} }
@media (min-width:900px){ .foot-cols{grid-template-columns:1fr 1.4fr 1.2fr 1fr;grid-template-areas:"studio follow contact legal"} }

/* =============== SCREENING ROOM (click-to-load player) =============== */
.room{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:clamp(12px,3vw,40px) var(--gutter);border:0;background:transparent;color:var(--screen);overflow:auto}
.room[open]{display:flex;align-items:center;align-items:safe center;justify-content:center}
.room::backdrop{background:#000}
.room-inner{width:min(100%,1600px,calc((100vh - 150px) * 16 / 9));width:min(100%,1600px,calc((100dvh - 150px) * 16 / 9))}
.room-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:12px}
.room-title{color:var(--ash);min-width:0}
.room-title b{color:var(--screen);font-weight:560}
.room-close{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1px solid var(--screen);flex:none;transition:background .4s,color .4s}
.room-close:hover{background:var(--screen);color:#000}
.room-frame{position:relative;aspect-ratio:16 / 9;background:#000;outline:1px solid #1a1a1a;outline-offset:-1px}
.room-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.room-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 20px;padding-top:8px;color:var(--ash);font-size:.875rem}
.room-foot a{color:var(--silver);display:inline-block;line-height:44px}
@media (hover:none){ .room-foot .kbd{display:none} }
@media (max-height:500px){ .room{padding-block:8px} .room-bar{padding-bottom:8px} .room-foot{padding-top:4px} .room-foot > span{display:none} .room-inner{width:min(100%,calc((100vh - 120px) * 16 / 9));width:min(100%,calc((100dvh - 120px) * 16 / 9))} }

/* =============== LEGAL PAGES =============== */
.legal{padding-block:clamp(40px,8vw,120px) clamp(20px,4vw,48px)}
.legal::before{content:"Legal";display:flex;align-items:center;gap:16px;color:var(--ash);font-family:var(--sans-narrow);font-stretch:72%;font-weight:560;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;padding-bottom:clamp(20px,3vw,36px);border-bottom:1px solid var(--hairline);margin-bottom:clamp(28px,4vw,56px)}
.legal h1{font-family:var(--serif);font-optical-sizing:auto;font-weight:400;font-size:clamp(3.5rem,7vw,6rem);line-height:.96;letter-spacing:-.024em;color:var(--screen)}
.legal h1 + p{color:var(--ash);font-size:.9375rem;margin:18px 0 clamp(32px,4vw,56px)}
.legal h2{font-family:var(--sans);font-weight:600;font-size:1.25rem;line-height:1.3;color:var(--screen);margin:2.4em 0 .7em}
.legal p,.legal li{color:var(--silver);line-height:1.65;max-width:68ch}
.legal p + p,.legal p + ul,.legal ul + p{margin-top:1em}
.legal ul{list-style:disc;padding-left:1.3em}
.legal li + li{margin-top:.55em}
.legal li::marker{color:var(--ash)}
.legal b{color:var(--screen);font-weight:600}
.legal a{color:var(--screen);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:var(--ash);padding-block:.55em}
.legal a:hover{text-decoration-color:var(--screen)}
@media (max-width:899px){ .legal a{padding-block:14px} }
@media (min-width:900px){
  .legal h2{font-size:1.375rem}
  .legal > :not(h1):not(h1 + p){margin-left:calc((100% + var(--colgap)) / 12 * 3)}
  .legal h1 + p{margin-top:22px}
}

/* =============== MOTION: slow fades, gate-opening frames =============== */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity 1.3s var(--ease-out),transform 1.3s var(--ease-out);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
.js .gate{clip-path:inset(50% 0 50% 0);transition:clip-path 1.5s var(--ease-gate);transition-delay:var(--d,0s)}
.js .gate.in{clip-path:inset(0 0 0 0)}
.js .reveal:focus-within{opacity:1;transform:none;transition:none}
.js .gate:focus-within{clip-path:none;transition:none}
/* printing or saving as PDF shows everything, scrolled into view or not */
@media print{ .js .reveal,.js .gate{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important} }

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js .gate{opacity:1;transform:none;clip-path:none;transition:none}
  .grain-in,.hero-frame .grain-in{animation:none}
  .film .frame img,.ep .thumb img{transition:none;transform:none!important}
  .subbox span,.cut,.subs .billing{transition:none}
  .chip,.btn,.btn-sm,.reel-toggle,.sound-toggle,.room-close{transition:none}
}