/* MARSX shared case shell. Extracted from case-sasa-burn-your-fear.html and
   owned here for every case page migration.
   Anti-Slop · macrostructure: media-first editorial split · theme: studied-DNA (source: https://www.rethinkideas.com/work/ikea-u-up) · tone: restrained cinematic · contrast: pass (40-41) · mobile: pass (34, 49, 50-57) */
/* Pre-emit critique: P5 H5 E4 S5 R5 V4 */

:root{
  --bg:#0C0A09;
  --bg-raise:#161211;
  --bg-deep:#070505;
  --ink:#EDE8E3;
  --ink-dim:#95897F;
  --ink-faint:#857A72;
  --accent:#CB441E;
  --line:rgba(237,232,227,.14);
  --font-display:'Clash Display',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.19,1,.22,1);
  --dur-base:.5s;
  --dur-slow:1s;
  --gutter:clamp(20px,4vw,72px);
  --maxw:1680px;
  /* Footage-safe player chrome: constant across themes, hero footage stays dark */
  --player-ink:#F5F1EA;
  --player-line:rgba(245,241,234,.5);
  --player-scrim:rgba(7,5,5,.55);
  --player-track:rgba(245,241,234,.26);
  --player-buffer:rgba(245,241,234,.45);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--accent);color:var(--bg-deep)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}

.grain{
  position:fixed;inset:-60%;z-index:80;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(8) infinite;
}
@keyframes grain{0%,100%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-4%)}75%{transform:translate(-2%,-2%)}}

#loader{
  position:fixed;inset:0;z-index:100;background:var(--bg-deep);
  display:flex;align-items:center;justify-content:center;
  transition:transform .9s var(--ease);
}
#loader.done{transform:translateY(-101%)}
.loader-mark{display:flex;overflow:hidden}
.loader-mark img{height:clamp(40px,6vw,84px);width:auto;display:block;transform:translateY(110%);animation:rise .9s var(--ease) forwards}
@keyframes rise{to{transform:translateY(0)}}
html:not(.js) #loader{display:none}
@media (prefers-reduced-motion:reduce){#loader{display:none}}

nav{position:absolute;top:0;left:0;right:0;z-index:85;display:flex;align-items:center;justify-content:space-between;padding:24px var(--gutter);mix-blend-mode:difference}
.wordmark{display:inline-flex}
.wordmark img{height:22px;width:auto;display:block}
.back-link{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62);transition:color var(--dur-base) var(--ease)}
.back-link:hover{color:#fff}

.cursor{position:fixed;top:0;left:0;z-index:90;pointer-events:none;border-radius:50%}
.cursor{width:6px;height:6px;background:var(--accent);margin:-3px 0 0 -3px}
@media (pointer:coarse){.cursor{display:none}}

.case-hero{position:relative;height:100svh;min-height:640px;display:flex;align-items:flex-end;overflow:hidden;background:var(--bg-deep)}
.case-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,var(--bg) 0%,rgba(12,10,9,.38) 40%,rgba(12,10,9,.05) 70%),
             linear-gradient(to bottom,rgba(12,10,9,.55) 0%,rgba(12,10,9,0) 30%);
  transition:opacity var(--dur-base) var(--ease);
}
.case-hero.is-playing::after{opacity:0}
.ch-inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(48px,8vh,110px);transition:opacity var(--dur-base) var(--ease)}
.case-hero.is-playing .ch-inner{opacity:0;pointer-events:none}
h1{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:clamp(52px,10vw,168px);line-height:1;letter-spacing:-.01em}
h1 .l{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
h1 .l i{display:block;font-style:normal;transform:translateY(112%);transition:transform 1.1s var(--ease)}
h1 .l:nth-child(2) i{transition-delay:.1s}
body.loaded h1 .l i{transform:translateY(0)}
h1 .out i{color:transparent;-webkit-text-stroke:1.5px var(--ink)}

.hero-play{
  position:absolute;inset:0;z-index:3;display:grid;place-content:center;justify-items:center;
  gap:18px;padding:var(--gutter);text-align:center;
}
.play-film{
  display:grid;place-items:center;width:96px;height:96px;padding:0;
  border:1px solid var(--player-line);border-radius:50%;
  background:var(--player-scrim);color:var(--player-ink);cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:border-color var(--dur-base) var(--ease),color var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);
}
.play-film svg{width:30px;height:30px;margin-left:4px}
.play-film:not(:disabled):hover{border-color:var(--accent);color:var(--accent);transform:scale(1.05)}
.play-film:not(:disabled):active{transform:scale(.97)}
.play-film:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.play-film:disabled{cursor:wait;opacity:.72;transform:none}
.play-film-status{
  max-width:34ch;padding:.625rem .875rem;border:1px solid var(--player-line);
  background:var(--player-scrim);color:var(--player-ink);font-family:var(--font-mono);
  font-size:12px;line-height:1.5;
}
.play-film-status:empty{display:none}

.player-bar{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:flex;align-items:center;gap:12px;
  padding:18px var(--gutter) 22px;
  background:linear-gradient(to top,var(--player-scrim) 0%,transparent 100%);
  transition:opacity .35s var(--ease);
}
.case-hero.controls-idle .player-bar{opacity:0;pointer-events:none}
.pb-btn{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;padding:0;border:0;background:none;color:var(--player-ink);cursor:pointer;transition:color var(--dur-base) var(--ease)}
/* Hidden controls (e.g. preview mode has no mute) must actually leave the bar */
.pb-btn[hidden]{display:none}
.pb-btn:hover{color:var(--accent)}
.pb-btn:active{transform:translateY(1px)}
.pb-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pb-btn svg{width:20px;height:20px}
.pb-btn svg[hidden]{display:none}
.pb-time{flex-shrink:0;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--player-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.pb-seek{position:relative;flex:1;min-width:80px;height:44px;cursor:pointer;touch-action:none}
.pb-seek::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);background:var(--player-track)}
.pb-buffer,.pb-progress{position:absolute;left:0;top:50%;height:2px;transform:translateY(-50%);width:0;pointer-events:none}
.pb-buffer{background:var(--player-buffer)}
.pb-progress{background:var(--accent)}
.pb-handle{position:absolute;top:50%;left:0;width:12px;height:12px;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%);opacity:0;transition:opacity .2s var(--ease);pointer-events:none}
.pb-seek:hover .pb-handle,.pb-seek:focus-visible .pb-handle,.pb-seek.scrubbing .pb-handle{opacity:1}
.pb-seek:focus-visible{outline:2px solid var(--accent);outline-offset:-8px}
.case-hero:fullscreen{height:100vh;min-height:0}
.case-hero:fullscreen video{object-fit:contain;background:var(--bg-deep)}

.overview{padding:clamp(88px,11vw,176px) 0 clamp(112px,14vw,208px)}
.overview-head{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr);
  gap:clamp(40px,7vw,128px);align-items:end;
}
.overview-client{
  margin-bottom:16px;color:var(--accent);font-family:var(--font-mono);
  font-size:12px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;
}
.overview-title{
  min-width:0;font-family:var(--font-display);font-size:clamp(42px,4.4vw,58px);
  font-weight:600;line-height:1;letter-spacing:-.01em;text-transform:uppercase;
  overflow-wrap:anywhere;
}
.overview-category{
  padding-bottom:6px;color:var(--ink-dim);font-family:var(--font-mono);
  font-size:12px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;
}
.overview-link,.info-link{
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;
  transition:color var(--dur-base) var(--ease),text-decoration-color var(--dur-base) var(--ease);
}
.overview-link:hover,.info-link:hover{color:var(--accent);text-decoration-color:currentColor}
.info-link{display:inline-flex;align-items:baseline;gap:8px}
.overview-rule{height:1px;margin:clamp(40px,5vw,72px) 0;background:var(--line)}
.overview-grid{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr);
  gap:clamp(40px,7vw,128px);align-items:start;
}
.overview-narrative{
  max-width:58ch;font-family:var(--font-mono);font-size:16px;line-height:25.6px;
  letter-spacing:-.015em;
}
.overview-narrative p + p{margin-top:25.6px}
.overview-narrative em{color:var(--accent);font-style:normal}
.project-info{min-width:0}
.project-info h3{
  margin-bottom:20px;color:var(--ink-dim);font-family:var(--font-mono);
  font-size:12px;font-weight:400;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;
}
.project-info dl{border-bottom:1px solid var(--line)}
.project-info-row{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:16px;padding:16px 0;border-top:1px solid var(--line);
}
.project-info dt{
  color:var(--ink-dim);font-family:var(--font-mono);font-size:11px;
  line-height:1.45;letter-spacing:.12em;text-transform:uppercase;
}
.project-info dd{font-size:16px;line-height:1.45;overflow-wrap:anywhere}

.next{background:var(--bg-raise);padding:clamp(70px,11vh,140px) 0;border-top:1px solid var(--line);transition:background var(--dur-slow) var(--ease)}
.next-bar{display:flex;align-items:center;justify-content:space-between;gap:24px}
.next .tag{transition:color var(--dur-base) var(--ease)}
.next-all{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);transition:color var(--dur-base) var(--ease)}
.next:hover{background:var(--accent)}
.next:hover .tag,.next:hover .next-all{color:var(--bg-deep)}
.next-project{display:block}
.next-title{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:clamp(38px,6.5vw,104px);line-height:.98;letter-spacing:-.01em;margin-top:18px;transition:color var(--dur-base) var(--ease),transform var(--dur-slow) var(--ease)}
.next-project:hover .next-title{color:var(--bg-deep);transform:translateX(18px)}

footer{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding:30px var(--gutter);font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
footer a:hover{color:var(--ink)}

html.js [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
html.js [data-reveal].in{opacity:1;transform:none}

@media (max-width:900px){
  .overview-head,.overview-grid{grid-template-columns:minmax(0,1fr)}
  .overview-head{gap:24px}
  .overview-grid{gap:64px}
  .overview-title{font-size:clamp(34px,10vw,42px)}
  .overview-category{padding-bottom:0}
  .project-info{max-width:58ch}
  .player-bar{gap:8px}
  .pb-seek{min-width:56px}
  .pb-dur{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .grain{animation:none}
  h1 .l i{transition:none;transform:none}
  html.js [data-reveal]{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ============ LIGHT THEME ============ */
/* Same system as the home page: tokens flip, the reel stays a lit screen,
   the loading screen stays dark because it carries the white mark, and the
   fixed nav gets a solid surface so it reads on both grounds. */
[data-theme="light"]{
  --bg:#F3EFE8;
  --bg-raise:#E9E3D9;
  --bg-deep:#FCFAF6;
  --ink:#171310;
  --ink-dim:#5F574D;
  --ink-faint:#A79D91;
  --line:rgba(23,19,16,.16);
}
[data-theme="light"] #loader{background:#0C0A09}
[data-theme="light"] .grain{opacity:.03}
[data-theme="light"] nav{
  background:color-mix(in srgb,var(--bg) 93%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  mix-blend-mode:normal;
  border-bottom:1px solid var(--line);
}
.nav-right{display:flex;align-items:center;gap:28px}
.theme-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:#fff;background:none;border:none;cursor:pointer;padding:0;
  transition:color var(--dur-base) var(--ease);
}
.theme-btn svg{display:block;width:20px;height:20px;flex:0 0 20px}
.theme-btn .theme-sun{display:block}
.theme-btn .theme-moon{display:none}
[data-theme="light"] .theme-btn .theme-sun{display:none}
[data-theme="light"] .theme-btn .theme-moon{display:block}
/* Case hero internals stay dark over footage */
[data-theme="light"] .case-hero h1 .l i{color:#F5F1EA}
[data-theme="light"] .case-hero h1 .out i{-webkit-text-stroke-color:#F5F1EA}
[data-theme="light"] .back-link{color:var(--ink)}
[data-theme="light"] .back-link:hover{color:var(--accent)}

/* ============ SHARED OPTIONAL MODULES ============ */
/* Supporting-media chapters after the overview. One shell-owned scaffold per
   module type; assets/case-extras.css keeps the detail treatments on top.
   Chapters number themselves in DOM order via counters. */
body{counter-reset:case-mod}

.case-module{
  counter-increment:case-mod;
  padding:clamp(64px,9vw,136px) 0;
  border-top:1px solid var(--line);
}
.chapter-head{
  display:flex;align-items:baseline;gap:20px;
  margin-bottom:clamp(24px,3vw,44px);
}
.chapter-head::before{
  content:counter(case-mod,decimal-leading-zero);
  flex-shrink:0;color:var(--accent);font-family:var(--font-mono);
  font-size:11px;letter-spacing:.18em;
}
.chapter-head h2{
  min-width:0;font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  font-size:clamp(26px,3.2vw,44px);line-height:1;letter-spacing:-.01em;
}

.stills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,28px)}
.still{position:relative;min-width:0;margin:0;overflow:hidden;border-radius:3px;background:var(--bg-raise);aspect-ratio:16/10}
.still img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slow) var(--ease),filter var(--dur-base) var(--ease);filter:brightness(.96)}
.still:hover img{transform:scale(1.04);filter:brightness(1.05)}
.still figcaption{
  position:absolute;left:12px;bottom:12px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  background:rgba(7,5,5,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  padding:6px 10px;border-radius:2px;
}

.media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,28px)}
.media-link{
  display:flex;min-width:0;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:4px;background:var(--bg-raise);
  transition:transform var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease);
}
.media-link:hover{transform:translateY(-4px);border-color:var(--accent)}

.extra-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2vw,32px)}
.extra-card{min-width:0}
.iframe-wrap{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:4px;background:var(--bg-raise)}
.iframe-wrap iframe,.iframe-wrap video{position:absolute;inset:0;width:100%;height:100%;border:0}
.iframe-wrap video{display:block;object-fit:contain;background:#000}
.native-video video{width:100%;aspect-ratio:16/9;display:block;object-fit:contain;border-radius:4px;background:#000}

.kv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2vw,32px)}
.kv-item{min-width:0;margin:0}

.bank-title{font-size:clamp(34px,10vw,168px)}

@media (max-width:900px){
  .media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stills{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .extra-grid,.media-grid,.kv-grid,.stills{grid-template-columns:1fr}
}