/* Case-study pages (/work/no-center). Loads after tokens.css, page.css and spine.css, like music.css on /music:
   only the page base that universe.css normally provides, plus the case-study components (cs-*).
   HARU's own palette (--h-*) dresses the sections that stand for its worlds: paper, ink, signal red. */
@font-face{font-family:Manrope;src:url('/assets/Manrope-latin.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:Dream;src:url('/assets/DMSerifDisplay-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
/* Japanese uses the platform's own faces here (Hiragino on Apple devices, as in the film): the site subset
   carries only the homepage's kanji. */
:root{
  --ink:#080b10;--paper:#f3f1e9;--muted:#b6bdc9;--gutter:clamp(25px,6.8vw,140px);
  --font-ja-sys:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",YuGothic,Meiryo,"Noto Sans CJK JP","Noto Sans JP",sans-serif;
  --font-mincho:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif CJK JP","Noto Serif JP",serif;
  --font-sans:Manrope,"Manrope Fallback",var(--font-ja-sys);
  --font-ja:var(--font-ja-sys);
  --h-paper:#ECE6D8;--h-ink:#0E0D10;--h-red:#DE1218;--h-white:#FAF8F4;--h-mint:#86B7A0;--h-grid:rgba(62,128,122,.2);
  color-scheme:dark;font-family:var(--font-sans);background:var(--ink);color:var(--paper);font-synthesis:none}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--stage);color:var(--text-1);overflow-x:clip}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
ol,ul{list-style:none}
/* header base, as universe.css provides it on the homepage; spine.css layers the spine look on top */
.site-header{position:fixed;z-index:30;inset:0 0 auto;display:flex;align-items:center;gap:35px;padding:29px 3.3vw;background:linear-gradient(#07090c70,transparent);transition:background .3s;pointer-events:none}
.site-header>*{pointer-events:auto}
.brand{display:inline-flex;align-items:center;gap:11px;font-size:13px;letter-spacing:.16em;font-weight:600;white-space:nowrap}
.brand svg{width:27px;height:27px}
.site-header nav{display:flex;align-items:center;gap:32px;margin-left:auto;font-size:12px}
.site-header nav a{transition:opacity .2s}
.site-header nav a:hover{opacity:.65}
@media(max-width:900px){.site-header{padding:24px 25px;gap:22px}.site-header nav{gap:23px}.brand{font-size:11px}.brand svg{width:23px}}
@media(max-width:600px){.site-header{padding:21px 22px;gap:16px}.site-header nav{gap:18px;font-size:11px}.brand{font-size:10px;letter-spacing:.09em;gap:8px}.brand svg{width:20px;height:23px}}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-stopped{overflow:clip}
.skip-link{position:fixed;left:16px;top:-60px;z-index:var(--z-skip);padding:10px 14px;background:var(--text-1);color:#0a0d12;border-radius:var(--r-pill)}
.skip-link:focus{top:12px}
.skip-link span{margin-left:8px}
.case-page :is(a,button,input,[tabindex="0"]):focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.cs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cs-mono{font:400 .86em/1 var(--font-mono);letter-spacing:.04em;color:#ff4a4f;white-space:nowrap}
.cs-paper .cs-mono{color:var(--h-red)}
.cs-h2{max-width:15em}
.cs-h3{font:300 var(--fs-h3)/1.12 var(--font-sans);letter-spacing:-.03em;color:var(--text-1)}
.cs-h3 em{font-family:var(--font-serif);font-weight:400;letter-spacing:var(--tr-serif)}
.cs-h3+.pg-body,.cs-h3+.pg-ja{margin-top:16px}
.cs-cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin-top:14px;font:400 12px/1.6 var(--font-mono);letter-spacing:.08em;color:var(--text-3)}
.cs-num{font:400 12px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--h-red)}
.cs-textbtn{border-width:0 0 1px;border-style:solid;border-color:var(--line-3);cursor:pointer;text-align:left}
.cs-i-play{width:11px;height:11px;flex:none}
/* Section lights (page.css .pg::before, faded in by page.js once a section is lit) */
.cs-overview{--pg-light:radial-gradient(ellipse 60% 50% at 100% 0%,rgba(134,183,160,.07),transparent 70%)}
.cs-timing{--pg-light:radial-gradient(ellipse 50% 60% at 0% 100%,rgba(222,18,24,.07),transparent 70%)}
.cs-character{--pg-light:radial-gradient(ellipse 55% 45% at 100% 8%,rgba(222,18,24,.06),transparent 70%)}
.cs-ae{--pg-light:radial-gradient(ellipse 60% 50% at 0% 0%,rgba(227,203,145,.06),transparent 70%)}
.cs-blender{--pg-light:radial-gradient(ellipse 60% 50% at 100% 0%,rgba(134,183,160,.08),transparent 70%)}
.cs-comp{--pg-light:radial-gradient(ellipse 60% 50% at 0% 0%,rgba(117,191,232,.06),transparent 70%)}
.cs-split{margin-top:var(--s-7);max-width:46em}
@media (min-width:900px){.cs-split{grid-column:1/9}}
.cs-split .pg-lede+.pg-ja{margin-top:14px}

/* Hero: the film plays full bleed; the title sits off centre, the centre holds only an empty reticle. */
.cs-hero{position:relative;isolation:isolate;display:grid;align-items:end;min-height:max(640px,100svh);padding:calc(var(--header-h) + 64px) var(--gutter) clamp(40px,8vh,96px);overflow:clip;background:#050506}
.cs-hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.cs-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#050506}
.cs-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,8,.86),rgba(5,6,8,.5) 36%,rgba(5,6,8,0) 64%),linear-gradient(0deg,rgba(5,6,8,.9),rgba(5,6,8,0) 48%),linear-gradient(180deg,rgba(5,6,8,.6),rgba(5,6,8,0) 24%)}
.cs-hud{position:absolute;inset:0;pointer-events:none;font:400 11px/1.65 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(243,241,233,.66)}
.cs-hud>span{position:absolute}
.cs-hud-tl{top:calc(var(--header-h) + 18px);left:var(--gutter)}
.cs-hud-tr{top:calc(var(--header-h) + 18px);right:var(--gutter);text-align:right;font-variant-numeric:tabular-nums}
.cs-hud-tr b{font-weight:400;color:var(--text-1)}
.cs-hud-bl{bottom:20px;left:var(--gutter)}
.cs-hud-br{bottom:20px;right:var(--gutter)}
.cs-hud-center{left:50%;top:50%;width:0;height:0}
.cs-hud-center i{position:absolute;left:-26px;top:-26px;width:52px;height:52px;opacity:.85;
  background:linear-gradient(var(--h-red),var(--h-red)) 50% 0/1px 17px no-repeat,linear-gradient(var(--h-red),var(--h-red)) 50% 100%/1px 17px no-repeat,
  linear-gradient(var(--h-red),var(--h-red)) 0 50%/17px 1px no-repeat,linear-gradient(var(--h-red),var(--h-red)) 100% 50%/17px 1px no-repeat}
.cs-hud-center i::after{content:"";position:absolute;inset:15px;border:1px solid var(--h-red);border-radius:50%}
.cs-hud-center span{position:absolute;left:36px;top:-8px;white-space:nowrap;color:#ff4a4f;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.cs-hero-copy{position:relative;max-width:min(1040px,100%)}
.cs-hero-copy .slate{margin-bottom:clamp(20px,3vw,36px);color:var(--text-2)}
.cs-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .32em;font:800 clamp(72px,13.5vw,250px)/.8 var(--font-sans);letter-spacing:-.06em;text-transform:uppercase;color:var(--text-1)}
.cs-title-haru{margin-left:-.05em}
.cs-title-nc{font-weight:300;font-size:.34em;line-height:1;letter-spacing:-.02em;white-space:nowrap}
.cs-lyric{margin-top:clamp(20px,2.6vw,36px);font:500 clamp(18px,1.75vw,30px)/1.5 var(--font-mincho);letter-spacing:.14em;color:var(--text-1)}
.cs-lyric-en{margin-top:6px;font:400 clamp(17px,1.35vw,22px)/1.5 var(--font-serif);letter-spacing:-.005em;color:var(--text-2)}
.cs-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;margin-top:clamp(28px,3.4vw,44px)}
.cs-film-open{gap:12px}
.cs-hero-actions .pg-link .i{transition:transform var(--d-1) var(--ease-std)}
@media (hover:hover) and (pointer:fine){.cs-hero-actions .pg-link:hover .i{transform:translateY(2px)}}
.cs-warn{margin-top:18px;font:400 12px/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.cs-warn span{font-family:var(--font-ja);letter-spacing:.06em}
@media (max-width:899.98px){
  .cs-hud-tl,.cs-hud-bl,.cs-hud-br{display:none}
}
/* Portrait phones: the film keeps its 16:9 frame above the title instead of being cropped to a sliver of its centre. */
@media (max-width:899.98px) and (orientation:portrait){
  .cs-hero{display:block;min-height:0;padding:var(--header-h) 0 56px;background:var(--stage)}
  .cs-hero-media{position:relative;inset:auto;z-index:0;aspect-ratio:16/9}
  .cs-hero-shade{background:linear-gradient(0deg,rgba(8,11,16,.5),rgba(8,11,16,0) 42%)}
  .cs-hud-tr{top:10px;right:12px;font-size:10px}
  .cs-hud-center i{transform:scale(.7)}
  .cs-hud-center span{display:none}
  .cs-hero-copy{padding:32px var(--gutter) 0}
  .cs-title{font-size:clamp(64px,22vw,120px)}
  .cs-title-nc{font-size:.4em}
}

/* 00 Overview */
.cs-overview-grid{margin-top:var(--s-8);display:grid;gap:var(--s-8)}
.cs-overview-text .pg-lede+.pg-ja{margin-top:14px}
.cs-roles{margin-top:var(--s-7)}
.cs-roles>div+div{margin-top:14px}
.cs-roles dd{font-size:clamp(16px,1.3vw,20px)}
.cs-overview-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:var(--s-6)}
.cs-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line-1)}
.cs-facts li{padding:22px 0;border-bottom:1px solid var(--line-1)}
.cs-facts li:nth-child(odd){padding-right:20px;border-right:1px solid var(--line-1)}
.cs-facts li:nth-child(even){padding-left:20px}
.cs-facts b{display:flex;align-items:baseline;gap:6px;font:300 clamp(34px,3.5vw,60px)/1 var(--font-sans);letter-spacing:-.045em;color:var(--text-1);font-variant-numeric:tabular-nums}
.cs-facts small{font:400 13px/1 var(--font-mono);letter-spacing:.06em;color:var(--text-3)}
.cs-facts span{display:block;margin-top:12px;max-width:22em;font:400 13px/1.55 var(--font-sans);color:var(--text-3)}
@media (min-width:900px){
  .cs-overview-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:start}
  .cs-overview-text{grid-column:1/6}
  .cs-facts{grid-column:7/13}
}

/* 01 Concept: the paper world */
.pg.cs-paper{border-top-color:transparent;color:var(--h-ink);
  background-color:var(--h-paper);
  background-image:linear-gradient(var(--h-grid) 1px,transparent 1px),linear-gradient(90deg,var(--h-grid) 1px,transparent 1px),linear-gradient(rgba(62,128,122,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(62,128,122,.08) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:-1px -1px}
.cs-paper .slate{color:#6b665b}
.cs-paper .slate-n,.cs-paper .slate-name{color:var(--h-ink)}
.cs-paper .slate-rule{background:rgba(14,13,16,.35)}
.cs-paper .pg-display,.cs-paper .cs-h3{color:var(--h-ink)}
.cs-paper :is(.pg-lede,.pg-body){color:#2b2830}
.cs-paper :is(.pg-ja,[lang=ja]){color:#615c52}
.cs-paper .cs-cap{color:#6b665b}
.cs-concept-head{display:grid;gap:var(--s-7)}
.cs-concept-lede{margin-top:var(--s-6)}
.cs-concept-lede+.pg-ja{margin-top:14px;max-width:40em}
.cs-vertical{writing-mode:vertical-rl;justify-self:start;font:600 clamp(32px,3.9vw,66px)/1.12 var(--font-mincho);letter-spacing:.16em;color:var(--h-ink)!important}
.cs-vertical span{display:block}
.cs-vertical span+span{margin-block-start:.42em}
.cs-vertical em{font-style:normal;color:var(--h-red)}
.cs-concept-theme{margin-top:var(--s-8);max-width:46em;padding-left:20px;border-left:2px solid var(--h-red)}
.cs-concept-theme .pg-body{font-size:var(--fs-lede);line-height:1.65}
.cs-concept-theme .pg-ja{margin-top:12px}
.cs-contrast{margin-top:var(--s-8);display:grid;gap:var(--s-5)}
.cs-contrast-col{padding:clamp(22px,2.4vw,36px);border:1px solid rgba(14,13,16,.2);background:rgba(250,248,244,.6)}
.cs-contrast-col ul{margin-top:18px;border-top:1px solid rgba(14,13,16,.14)}
.cs-contrast-col li{padding:11px 0;border-bottom:1px solid rgba(14,13,16,.14);font:400 16px/1.45 var(--font-sans)}
.cs-contrast-col li:last-child{font:400 12px/1.6 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;opacity:.7;border-bottom:0}
.cs-contrast-col .pg-ja{margin-top:12px}
.cs-tag{font:500 12px/1.4 var(--font-mono);letter-spacing:.16em;text-transform:uppercase}
.cs-contrast-out{background:var(--h-ink);border-color:var(--h-ink);color:var(--h-paper)}
.cs-contrast-out .cs-tag{color:#ff3b41}
.cs-contrast-out ul,.cs-contrast-out li{border-color:rgba(236,230,216,.16)}
.cs-paper .cs-contrast-out .pg-ja{color:#a9a395}
@media (min-width:700px){.cs-contrast{grid-template-columns:1fr 1fr;align-items:start}.cs-contrast-out{transform:rotate(-1.4deg) translateY(10px)}}
.cs-worlds{margin-top:var(--s-9);display:grid;gap:var(--s-6)}
.cs-swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cs-swatches li{display:flex;flex-direction:column;gap:6px;min-height:180px;padding:14px;border:1px solid rgba(14,13,16,.18)}
.cs-swatches b{font:500 12px/1.3 var(--font-mono);letter-spacing:.14em}
.cs-swatches span{font:400 12px/1.3 var(--font-mono);letter-spacing:.06em;opacity:.75}
.cs-swatches p{margin-top:auto;font:400 13px/1.45 var(--font-sans)}
.sw-paper{background:var(--h-paper) linear-gradient(var(--h-grid) 1px,transparent 1px) 0 0/16px 16px;color:var(--h-ink)}
.sw-ink{background:var(--h-ink);color:var(--h-paper)}
.sw-red{background:var(--h-red);color:var(--h-white)}
.sw-white{background:var(--h-white);color:var(--h-red)}
.sw-mint{background:var(--h-mint);color:var(--h-ink);position:relative}
.sw-mint::after{content:"";position:absolute;right:14px;top:14px;width:14px;height:14px;border-radius:50%;background:var(--h-red);box-shadow:0 0 0 3px rgba(250,248,244,.7)}
.cs-sf{margin-top:var(--s-9)}
.cs-sf-head{max-width:46em}
.cs-sf-rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(80vw,600px);gap:16px;margin:var(--s-6) calc(var(--gutter) * -1) 0;padding:0 var(--gutter) 18px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:thin;scrollbar-color:rgba(14,13,16,.4) transparent}
.cs-sf-rail li{scroll-snap-align:start}
.cs-sf-rail img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid rgba(14,13,16,.25);background:#d9d2c3}
.cs-sf-rail span{display:flex;gap:10px;margin-top:10px;font:400 12px/1.5 var(--font-mono);letter-spacing:.06em;color:#4b463d}
.cs-sf-rail span b{font-weight:500;color:var(--h-red)}
@media (min-width:900px){
  .cs-concept-head{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:start}
  .cs-concept-head>div{grid-column:1/9}
  .cs-vertical{grid-column:10/13;justify-self:end}
  .cs-worlds{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:end}
  .cs-worlds-head{grid-column:1/5}
  .cs-swatches{grid-column:5/13;grid-template-columns:repeat(5,minmax(0,1fr))}
  .cs-swatches li{min-height:260px}
}

/* Signal-red band: the chorus words, carried sideways by the scroll */
.cs-band{position:relative;overflow:hidden;padding:clamp(16px,2.6vw,34px) 0;background:var(--h-red);color:var(--h-white);border-block:1px solid #b30d12}
.cs-band-track{display:flex;align-items:center;gap:.36em;width:max-content;padding-left:var(--gutter);font:800 clamp(56px,10vw,184px)/.88 var(--font-sans);letter-spacing:-.055em;text-transform:uppercase;white-space:nowrap;transform:translate3d(var(--band-x,0px),0,0);will-change:transform}
.cs-band-track i{flex:none;width:.26em;height:.26em;background:var(--h-ink);transform:rotate(45deg)}

/* 02 Music to picture */
.cs-songmap{margin-top:var(--s-8);padding:clamp(16px,2vw,28px);border:1px solid var(--line-1);background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0))}
.cs-songmap-scroll{overflow-x:auto;scrollbar-width:thin}
.cs-songmap-svg{display:block;width:100%;min-width:780px;height:auto}
.sm-grid{stroke:rgba(220,228,238,.07);stroke-width:1}
.sm-bar{transition:opacity var(--d-1) var(--ease-std)}
.sm-bar:hover{opacity:.7}
:is(.sm-bar,.sm-band,.cs-legend i).w-paper{fill:#e6dcc5;background:#e6dcc5}
:is(.sm-bar,.sm-band,.cs-legend i).w-ink{fill:#4b515e;background:#4b515e}
:is(.sm-bar,.sm-band,.cs-legend i).w-red{fill:var(--h-red);background:var(--h-red)}
:is(.sm-bar,.sm-band,.cs-legend i).w-white{fill:#fff;background:#fff}
.sm-hit{stroke:rgba(243,241,233,.42);stroke-width:1;stroke-dasharray:3 4}
.sm-label{font:400 11px var(--font-mono);letter-spacing:.08em;fill:var(--text-2)}
.sm-tick{font:400 11px var(--font-mono);letter-spacing:.06em;fill:var(--text-3)}
.cs-legend{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.cs-legend i{display:inline-block;width:10px;height:10px;margin-left:10px}
.cs-legend i:first-child{margin-left:0}
.cs-cards3{margin-top:var(--s-8);display:grid;gap:var(--s-6) var(--grid-gap)}
.cs-cards3 li{padding-top:26px;border-top:1px solid var(--line-2)}
.cs-cards3 h3{margin-top:18px;font:400 var(--fs-fact)/1.3 var(--font-sans);letter-spacing:-.015em;color:var(--text-1)}
.cs-cards3 .pg-body{margin-top:12px;font-size:15px}
@media (min-width:900px){.cs-cards3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 03 Character */
.cs-sheet-grid{margin-top:var(--s-8);display:grid;gap:var(--s-7)}
.cs-sheet-frame{position:relative;background:#dfe6ee;border:1px solid var(--line-1)}
.cs-sheet-frame img{width:100%;height:auto}
.cs-marks li{position:absolute;left:var(--x);top:var(--y);width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:var(--h-red);color:#fff;font:500 11px/24px var(--font-mono);text-align:center;box-shadow:0 0 0 4px rgba(222,18,24,.2),0 2px 10px rgba(0,0,0,.25)}
.cs-sheet-notes .pg-lede+.pg-ja{margin-top:14px}
.cs-callouts{margin-top:var(--s-6);border-top:1px solid var(--line-1)}
.cs-callouts li{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-1);font:400 15px/1.5 var(--font-sans);color:var(--text-2)}
.cs-callouts b{flex:none;width:26px;font:400 12px/1.9 var(--font-mono);letter-spacing:.06em;color:var(--h-red)}
.cs-rule-line{margin-top:var(--s-6);padding-left:16px;border-left:2px solid var(--h-red);color:var(--text-1)}
.cs-rule-line+.pg-ja{padding-left:18px}
.cs-expr{margin-top:var(--s-9);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cs-expr img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#dfe6ee}
.cs-expr span{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px;margin-top:8px;font:400 11px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.cs-expr i{font:400 12px/1.4 var(--font-ja);font-style:normal;letter-spacing:.04em;text-transform:none;color:var(--text-3)}
.cs-protocol{margin-top:var(--s-9)}
.cs-protocol-list{margin-top:var(--s-6);display:grid;gap:12px}
.cs-protocol-list li{padding:clamp(20px,2vw,28px);border:1px solid var(--line-1);background:var(--stage-2);font:400 15px/1.7 var(--font-sans);color:var(--text-2)}
.cs-protocol-list b{display:block;margin-bottom:10px;font-weight:500;font-size:16px;color:var(--text-1)}
@media (min-width:900px){
  .cs-sheet-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:start}
  .cs-sheet{grid-column:1/7}
  .cs-sheet-notes{grid-column:8/13;position:sticky;top:calc(var(--header-h) + 40px)}
  .cs-protocol-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1200px){.cs-expr{grid-template-columns:repeat(8,minmax(0,1fr))}.cs-protocol-list{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Before / after: pointer drags anywhere on the stage move the seam (case-study.js); the range input underneath
   carries keyboard and assistive-technology control. */
.cs-compare{margin-top:var(--s-9)}
.cs-compare-head{max-width:46em;margin-bottom:var(--s-6)}
.cs-compare-stage{--pos:50%;position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize}
.cs-compare-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-compare-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cs-compare-rule{position:absolute;top:0;bottom:0;left:var(--pos);width:0;pointer-events:none}
.cs-compare-rule::before{content:"";position:absolute;top:0;bottom:0;left:-.5px;width:1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.cs-compare-rule b{position:absolute;top:50%;left:-23px;width:46px;height:46px;margin-top:-23px;border:1px solid rgba(255,255,255,.92);border-radius:50%;background:rgba(8,11,16,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cs-compare-rule b::before,.cs-compare-rule b::after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-5px;border:5px solid transparent}
.cs-compare-rule b::before{left:8px;border-right-color:#fff}
.cs-compare-rule b::after{right:8px;border-left-color:#fff}
.cs-compare-stage:has(.cs-compare-range:focus-visible) .cs-compare-rule b{outline:2px solid var(--focus);outline-offset:3px}
.cs-compare-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;-webkit-appearance:none;appearance:none}
.cs-compare-stage.is-live .cs-compare-range{pointer-events:none}
.cs-compare-tag{position:absolute;top:14px;padding:6px 10px;font:400 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(8,11,16,.62);pointer-events:none}
.cs-compare-tag-l{left:14px}
.cs-compare-tag-r{right:14px}
.cs-compare-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;margin-top:12px;font:400 12px/1.5 var(--font-mono);letter-spacing:.06em;color:var(--text-3)}
.cs-compare-caption b{margin-right:10px;font-weight:400;color:var(--h-red)}
.cs-compare-shots{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(132px,1fr);gap:10px;margin-top:16px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.cs-compare-shots button{display:block;width:100%;text-align:left;opacity:.5;transition:opacity var(--d-1) var(--ease-std)}
.cs-compare-shots button[aria-pressed=true]{opacity:1}
@media (hover:hover) and (pointer:fine){.cs-compare-shots button:hover{opacity:.85}}
.cs-compare-shots img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line-1)}
.cs-compare-shots button[aria-pressed=true] img{border-color:var(--h-red)}
.cs-compare-shots span{display:flex;gap:8px;margin-top:8px;font:400 11px/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.cs-compare-shots b{font-weight:400;color:var(--text-3)}
.cs-v2v{margin-top:var(--s-9);display:grid;gap:var(--s-6)}
.cs-v2v-text .pg-body+.pg-body{margin-top:14px}
.cs-v2v-text .pg-ja{margin-top:14px}
.cs-compare-v2v{margin-top:0}
@media (min-width:900px){
  .cs-v2v{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:center}
  .cs-v2v-text{grid-column:1/5}
  .cs-compare-v2v{grid-column:5/13}
}

/* Media frames with corner ticks (the award film's projector gate, smaller) */
.cs-frame{position:relative;padding:10px;--tick:linear-gradient(var(--line-3),var(--line-3));
  background:var(--tick) 0 0/14px 1px,var(--tick) 0 0/1px 14px,var(--tick) 100% 0/14px 1px,var(--tick) 100% 0/1px 14px,var(--tick) 0 100%/14px 1px,var(--tick) 0 100%/1px 14px,var(--tick) 100% 100%/14px 1px,var(--tick) 100% 100%/1px 14px;background-repeat:no-repeat}
.cs-loop video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#000}
.cs-frame-tag{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin-top:10px;font:400 11px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.cs-media-split{margin-top:var(--s-8);display:grid;gap:var(--s-7)}
.cs-media-text .pg-lede+.pg-ja{margin-top:14px}
.cs-media-text .pg-body{margin-top:var(--s-5)}
.cs-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s-5)}
.cs-chips li{padding:8px 12px;border:1px solid var(--line-2);border-radius:var(--r-pill);font:400 12px/1 var(--font-mono);letter-spacing:.05em;color:var(--text-2)}
@media (min-width:900px){
  .cs-media-split{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:center}
  .cs-media-split>.cs-loop{grid-column:1/8}
  .cs-media-split>.cs-media-text{grid-column:9/13}
  .cs-media-split-r>.cs-media-text{grid-column:1/5;grid-row:1}
  .cs-media-split-r>.cs-loop{grid-column:6/13;grid-row:1}
}

/* Code cards: real excerpts of the build scripts ("…" marks elided lines) */
.cs-codeblock{margin-top:var(--s-9);display:grid;gap:var(--s-6)}
.cs-codeblock-text .pg-body{margin-top:16px}
.cs-codeblock-text .pg-ja{margin-top:12px}
.cs-code{min-width:0;border:1px solid var(--line-1);background:#05070a}
.cs-code figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:10px 16px;border-bottom:1px solid var(--line-1);font:400 11px/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.cs-code figcaption span:first-child{letter-spacing:.02em;text-transform:none;color:var(--text-2)}
.cs-code pre{margin:0;padding:18px 16px 20px;overflow-x:auto;font:400 12.5px/1.75 var(--font-mono);color:#c9d0d9;tab-size:4;scrollbar-width:thin}
.cs-code .k{color:#ff6b70}
.cs-code .s{color:#9fd5c3}
.cs-code .n{color:#e3cb91}
.cs-code .c{color:#6f7b8a}
.cs-code .f{color:#f3f1e9}
@media (min-width:900px){
  .cs-codeblock{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:center}
  .cs-codeblock-text{grid-column:1/5}
  .cs-codeblock .cs-code{grid-column:6/13}
  .cs-codeblock-r .cs-codeblock-text{grid-column:9/13;grid-row:1}
  .cs-codeblock-r .cs-code{grid-column:1/8;grid-row:1}
}

/* 04 After Effects */
.cs-strip{margin-top:var(--s-8);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) 12px}
.cs-strip img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line-1)}
.cs-strip p{margin-top:14px;font:500 15px/1.3 var(--font-sans);color:var(--text-1)}
.cs-strip p b{display:block;margin-bottom:6px;font:400 11px/1 var(--font-mono);letter-spacing:.14em;color:var(--h-red)}
.cs-strip span{display:block;margin-top:6px;font:400 13px/1.55 var(--font-sans);color:var(--text-3)}
@media (min-width:900px){.cs-strip{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* 05 Blender */
.cs-stats{margin-top:var(--s-6);display:flex;flex-wrap:wrap;gap:18px 36px}
.cs-stats dt{font:400 11px/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.cs-stats dd{margin-top:8px;font:300 clamp(26px,2.3vw,36px)/1.05 var(--font-sans);letter-spacing:-.025em;color:var(--text-1)}
.cs-stats small{display:block;margin-top:6px;font:400 12px/1.3 var(--font-mono);letter-spacing:.04em;color:var(--text-3)}
.cs-worldcards{margin-top:var(--s-9);display:grid;gap:var(--s-7) var(--grid-gap)}
.cs-worldcards img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line-1)}
.cs-wc-time{margin-top:16px;font:400 11px/1 var(--font-mono);letter-spacing:.14em;color:var(--h-red)}
.cs-worldcards h3{margin-top:10px;font:400 var(--fs-fact)/1.25 var(--font-sans);letter-spacing:-.015em;color:var(--text-1)}
.cs-worldcards .pg-body{margin-top:10px;font-size:15px}
.cs-watch{display:inline-flex;align-items:center;gap:10px;min-height:40px;margin-top:16px;padding:0 16px;border:1px solid var(--line-2);border-radius:var(--r-pill);font:500 13px/1 var(--font-sans);color:var(--text-1);transition:border-color var(--d-1) var(--ease-std),background-color var(--d-1) var(--ease-std),scale var(--d-0) var(--ease-std)}
@media (hover:hover) and (pointer:fine){.cs-watch:hover{border-color:var(--text-1);background:rgba(243,241,233,.06)}}
.cs-watch:active,.cs-compare-shots button:active{scale:.97}
.cs-raw{margin-top:var(--s-9)}
.cs-raw-head{max-width:46em;margin-bottom:var(--s-6)}
.cs-raw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cs-raw-grid li{background:#000}
.cs-raw-grid img{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover}
.cs-raw-grid .cs-raw-wide{grid-column:1/-1}
.cs-city{margin-top:var(--s-9);display:grid;gap:var(--s-6)}
.cs-city-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cs-city-grid li{position:relative}
.cs-city-grid img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.cs-city-grid span{position:absolute;left:10px;bottom:8px;padding:4px 7px;font:400 10px/1 var(--font-mono);letter-spacing:.14em;color:#fff;background:rgba(8,11,16,.6)}
.cs-city-text .pg-body{margin-top:16px}
.cs-city-text .pg-ja{margin-top:12px}
@media (min-width:700px){.cs-worldcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){
  .cs-raw-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cs-raw-grid .cs-raw-wide{grid-column:span 2;grid-row:span 2}
  .cs-city{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:center}
  .cs-city-grid{grid-column:1/8}
  .cs-city-text{grid-column:9/13}
}
@media (min-width:1200px){.cs-worldcards{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 06 Compositing */
.cs-timeline{margin-top:var(--s-8);padding:clamp(16px,2vw,28px);border:1px solid var(--line-1)}
.cs-timeline-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;margin-bottom:22px}
.cs-timeline-head .cs-cap{margin-top:0}
.cs-timeline-bar{display:flex;gap:2px;height:clamp(44px,5vw,64px)}
.cs-timeline-bar li{position:relative;flex:var(--f) 1 0;min-width:2px}
.cs-timeline-bar i{position:absolute;inset:0;display:block}
.tl-comp i{background:#9ba5b2}
.tl-bl i{background:var(--h-mint)}
.tl-mix i{background:repeating-linear-gradient(135deg,var(--h-mint) 0 5px,#5f6b78 5px 10px)}
.tl-ae i{background:var(--h-red)}
.cs-timeline-axis{position:relative;height:16px;margin-top:10px;font:400 11px/1 var(--font-mono);letter-spacing:.06em;color:var(--text-3)}
.cs-timeline-axis span{position:absolute;top:0;transform:translateX(-50%)}
.cs-timeline-axis span:first-child{transform:none}
.cs-timeline-legend{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:22px}
.cs-timeline-legend li{display:flex;align-items:center;gap:10px;font:400 14px/1.4 var(--font-sans);color:var(--text-2)}
.cs-timeline-legend i{flex:none;width:14px;height:14px}
.cs-timeline-legend b{font:400 13px/1 var(--font-mono);color:var(--text-1)}
.cs-tiers{margin-top:var(--s-9)}
.cs-tier-list{margin-top:var(--s-6);display:grid;gap:var(--s-7) var(--grid-gap)}
.cs-tier-list img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line-1)}
.cs-tier-n{margin-top:18px;font:800 46px/1 var(--font-sans);letter-spacing:-.04em;color:var(--h-red)}
.cs-tier-list h4{margin-top:6px;font:400 var(--fs-fact)/1.25 var(--font-sans);color:var(--text-1)}
.cs-tier-list .pg-body{margin-top:10px;font-size:15px}
.cs-comp-grid{margin-top:var(--s-9);display:grid;gap:12px}
.cs-feature{padding:clamp(22px,2.2vw,32px);border:1px solid var(--line-1);background:var(--stage-2)}
.cs-feature h3{margin-top:16px;font:400 var(--fs-fact)/1.3 var(--font-sans);letter-spacing:-.015em;color:var(--text-1)}
.cs-feature .pg-body{margin-top:12px;font-size:15px}
.cs-popout{margin-top:var(--s-9);display:grid;gap:var(--s-6)}
.cs-popout-text .pg-ja{margin-top:12px}
.cs-popout-media{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cs-popout-media img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line-1)}
.cs-loop-wide{margin-top:var(--s-9)}
@media (min-width:900px){
  .cs-tier-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cs-comp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cs-popout{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:center}
  .cs-popout-text{grid-column:1/5}
  .cs-popout-media{grid-column:5/13}
}

/* 07 Direction: the ink world */
.pg.cs-ink{background:var(--h-ink);border-top-color:rgba(236,230,216,.1)}
.cs-ink .pg-display{color:var(--h-paper)}
.cs-rulelist{margin-top:var(--s-8);display:grid;border-top:1px solid rgba(236,230,216,.14)}
.cs-rulelist li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:6px 14px;padding:26px 0;border-bottom:1px solid rgba(236,230,216,.14)}
.cs-rulelist b{grid-row:span 2;font:400 13px/1.7 var(--font-mono);letter-spacing:.12em;color:#ff3b41}
.cs-rulelist h3{font:400 var(--fs-fact)/1.3 var(--font-sans);letter-spacing:-.015em;color:var(--h-paper)}
.cs-rulelist p{font:400 15px/1.65 var(--font-sans);color:#aca797}
@media (min-width:900px){.cs-rulelist{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--grid-gap)}}

/* 08 Delivery */
.cs-delivery-grid{margin-top:var(--s-8);display:grid;gap:var(--s-7)}
.cs-spec{border-top:1px solid var(--line-1)}
.cs-spec div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-1)}
.cs-spec dt{font:400 12px/1.6 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.cs-spec dd{font:400 15px/1.5 var(--font-sans);text-align:right;color:var(--text-1)}
.cs-checks{display:grid;gap:var(--s-6)}
.cs-checks li{position:relative;padding-left:30px}
.cs-checks li::before{content:"";position:absolute;left:2px;top:6px;width:10px;height:10px;border:1px solid var(--h-mint);transform:rotate(45deg)}
.cs-checks b{font:500 16px/1.4 var(--font-sans);color:var(--text-1)}
.cs-checks p{margin-top:6px;font:400 15px/1.65 var(--font-sans);color:var(--text-2)}
@media (min-width:900px){
  .cs-delivery-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:start}
  .cs-spec{grid-column:1/6}
  .cs-checks{grid-column:7/13}
}

/* 09 Credits and the end card */
.cs-credits-grid{display:grid;gap:var(--s-7)}
.cs-credit-list>div+div{margin-top:14px}
.cs-credit-list dd{font-size:clamp(16px,1.35vw,21px)}
.cs-tools .cs-chips{margin-top:16px}
.cs-end{margin-top:var(--s-10);padding-top:var(--s-9);border-top:1px solid var(--line-1)}
.cs-end-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:var(--s-7)}
.cs-back{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:var(--s-8);font:400 12px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);transition:color var(--d-1) var(--ease-std)}
@media (hover:hover) and (pointer:fine){.cs-back:hover{color:var(--text-1)}}
@media (min-width:900px){
  .cs-credits-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:start}
  .cs-credit-list{grid-column:1/8}
  .cs-tools{grid-column:9/13}
}

/* The film: the YouTube player opens in a dialog; the iframe exists only while it is open */
.cs-film{position:fixed;inset:0;margin:auto;width:min(1280px,calc(100vw - 24px),calc((100svh - 150px) * 16 / 9));max-width:none;max-height:calc(100svh - 24px);height:fit-content;padding:0;border:1px solid var(--line-2);background:#000;color:var(--text-1);overflow:hidden}
.cs-film::backdrop{background:rgba(0,0,0,.88)}
.cs-film-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 10px 10px 18px;font:400 12px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.cs-film-head span{margin-left:10px;color:var(--text-3)}
.cs-film-close{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid var(--line-2);border-radius:50%;transition:border-color var(--d-1) var(--ease-std)}
@media (hover:hover) and (pointer:fine){.cs-film-close:hover{border-color:var(--text-1)}}
.cs-film-close .i{width:16px;height:16px}
.cs-film-frame{position:relative;aspect-ratio:16/9;background:#000}
.cs-film-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cs-film-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 24px;padding:10px 18px 12px;font:400 12px/1.5 var(--font-mono);letter-spacing:.06em;color:var(--text-3)}
.cs-film-foot a{display:inline-flex;align-items:center;gap:8px;min-height:36px;color:var(--text-1)}
.cs-film-foot .i,.cs-back .i{width:14px;height:14px}

@media print{.cs-hero-media video,.cs-loop video{display:none}.cs-band-track{transform:none}}