/* =====================================================================
   PROJECT CASE POP-UP ("How we made this")
   Full-screen overlay with its own scroll container. Built by case.js.
   ===================================================================== */

/* reel bar: two actions side by side */
.reel-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.reel-actions .btn[hidden]{ display:none; }
@media(max-width:860px){
  .reel-actions{ flex:1 1 100%; flex-wrap:nowrap; }
  .reel-actions .btn{ flex:1 1 0; justify-content:center; padding:14px 8px; font-size:11px; letter-spacing:.04em; white-space:nowrap; }
}

html.case-lock, html.case-lock body{ overflow:hidden; }

.case{
  position:fixed; inset:0; z-index:180; background:var(--paper); color:var(--ink);
  visibility:hidden; clip-path:inset(0 0 100% 0);
  transition:clip-path .8s cubic-bezier(.76,0,.18,1), visibility 0s linear .8s;
}
.case[hidden]{ display:none; }
.case.open{ visibility:visible; clip-path:inset(0 0 0 0); transition:clip-path .8s cubic-bezier(.76,0,.18,1); }
.case.instant{ transition:none !important; }

.case-scroll{
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}

/* top bar */
.case-bar{
  position:absolute; left:0; right:0; top:0; z-index:6;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 24px; padding-top:calc(14px + env(safe-area-inset-top, 0px));
  background:linear-gradient(to bottom, rgba(8,9,10,.85), rgba(8,9,10,0));
  pointer-events:none;
}
.case-file{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
  display:flex; align-items:center; gap:10px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.case-file i{ width:7px; height:7px; border-radius:50%; background:var(--tally); flex:none; animation:pulse 1.6s ease-in-out infinite; }
.case-close{
  pointer-events:auto; width:44px; height:44px; flex:none; display:grid; place-items:center;
  background:rgba(8,9,10,.55); border:1px solid rgba(242,244,240,.35); color:var(--ink); cursor:pointer;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:background .2s, border-color .2s, transform .2s;
}
.case-close svg{ width:18px; height:18px; stroke:currentColor; stroke-width:1.6; fill:none; }
.case-close:hover, .case-close:focus-visible{ background:var(--tally); border-color:var(--tally); color:#08090A; }
.case-close:active{ transform:scale(.94); }
.case-prog{ position:absolute; left:0; top:0; height:2px; width:100%; background:var(--tally); transform-origin:left; transform:scaleX(0); }

/* shared bits */
.c-mono{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.c-kick{ color:var(--tally); display:flex; align-items:center; gap:10px; }
.c-kick::before{ content:""; width:22px; height:1px; background:currentColor; }
.c-wrap{ max-width:1240px; margin:0 auto; padding-left:32px; padding-right:32px; }

/* reveal on scroll */
.rv{ opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0s); }
.rv.in{ opacity:1; transform:none; }

/* ---------- HERO (crew photo) ---------- */
.c-hero{ position:relative; min-height:100vh; min-height:100svh; overflow:hidden; display:flex; align-items:flex-end; background:#000; }
.c-hero-media{ position:absolute; inset:0 0 18% 0; will-change:transform; transform:scale(1.04); }
.c-hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
.c-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, var(--paper) 0%, var(--paper) 20%, rgba(8,9,10,.78) 40%, rgba(8,9,10,.08) 64%, rgba(8,9,10,.45) 100%);
}
.c-hero-in{ position:relative; z-index:2; width:100%; padding-top:96px; padding-bottom:clamp(36px, 6vh, 64px); }
.c-title{
  font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.005em;
  font-size:clamp(60px, 9.4vw, 152px); line-height:.86; margin:14px 0 clamp(20px, 3vh, 32px);
}
.c-title .ln{ display:block; overflow:hidden; padding-top:.04em; }
.c-title .wd{ display:inline-block; white-space:nowrap; }
.c-title .ch{ display:inline-block; transform:translateY(105%); transition:transform 1s cubic-bezier(.2,.8,.2,1); transition-delay:calc(.35s + var(--i) * 26ms); }
.c-title .ln + .ln{ color:var(--tally); }
.case.ready .c-title .ch{ transform:none; }

.c-hero-grid{ display:grid; grid-template-columns:minmax(0, 1.25fr) auto; gap:24px clamp(32px, 6vw, 96px); align-items:end; border-top:1px solid rgba(242,244,240,.18); padding-top:22px; }
.c-brief{ font-size:clamp(16px, 1.3vw, 19px); line-height:1.55; color:#D5D9D3; max-width:58ch; }
.c-meta{ display:flex; flex-wrap:wrap; gap:10px 32px; margin-top:16px; }
.c-meta div{ display:flex; gap:10px; align-items:baseline; }
.c-meta dt{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel); }
.c-meta dd{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.c-stats{ display:flex; gap:clamp(20px, 3.4vw, 52px); }
.c-stat b{ display:block; font-family:var(--display); font-weight:400; font-size:clamp(44px, 4.6vw, 72px); line-height:.9; font-variant-numeric:tabular-nums; }
.c-stat span{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel); }

/* ---------- section heads ---------- */
.c-steps, .c-bts{ padding-top:clamp(56px, 10vh, 104px); }
.c-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px 32px; flex-wrap:wrap; margin-bottom:clamp(20px, 3.5vh, 32px); }
.c-h{ font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(44px, 5.6vw, 88px); line-height:.88; width:100%; margin-top:10px; }
.c-h em{ font-style:normal; color:var(--tally); }

/* ---------- STEPS ---------- */
.c-step-grid{ list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(12px, 1.6vw, 24px); counter-reset:none; }
.c-step-ph{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--frame); margin-bottom:16px; }
.c-step-ph img{ position:absolute; left:0; top:-8%; width:100%; height:116%; object-fit:cover; transform:translate3d(0, var(--py, 0px), 0) scale(1.12); transition:transform 1.4s cubic-bezier(.2,.7,.2,1), filter .5s ease; filter:grayscale(.35) brightness(.85); }
.c-step.in .c-step-ph img{ transform:translate3d(0, var(--py, 0px), 0) scale(1); }
.c-step:hover .c-step-ph img{ filter:none; }
.c-step-ph::after{ content:""; position:absolute; inset:0; background:var(--tally); transform-origin:bottom; transform:scaleY(1); transition:transform .9s cubic-bezier(.76,0,.18,1); transition-delay:var(--d, 0s); }
.c-step.in .c-step-ph::after{ transform:scaleY(0); }
.c-step-n{ position:absolute; left:12px; bottom:10px; z-index:2; font-family:var(--display); font-size:44px; line-height:1; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.5); }
.c-step h3{ font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(26px, 2.2vw, 34px); line-height:1; margin-bottom:6px; }
.c-step p{ color:#B9BEB8; font-size:15px; line-height:1.5; }

.c-vf{ position:absolute; width:14px; height:14px; border:0 solid rgba(242,244,240,.8); z-index:2; }
.c-vf.tl{ top:10px; left:10px; border-top-width:1px; border-left-width:1px; }
.c-vf.tr{ top:10px; right:10px; border-top-width:1px; border-right-width:1px; }
.c-vf.bl{ bottom:10px; left:10px; border-bottom-width:1px; border-left-width:1px; }
.c-vf.br{ bottom:10px; right:10px; border-bottom-width:1px; border-right-width:1px; }
.c-step-ph .c-vf.bl{ display:none; }

/* ---------- BTS CLIPS ---------- */
.c-bts .c-head{ flex-direction:column; align-items:flex-start; }
.c-trip{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(8px, 1.6vw, 24px); }
.c-clip{ position:relative; aspect-ratio:9/16; max-height:72vh; overflow:hidden; background:var(--frame); }
.c-clip img, .c-clip video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.c-clip video{ opacity:0; transition:opacity .5s ease; }
.c-clip video.on{ opacity:1; }
.c-clip::after{ content:""; position:absolute; inset:0; background:#000; opacity:0; pointer-events:none; transition:opacity .12s linear; }
.c-clip.cut::after{ opacity:.85; transition:none; }
.c-rec{
  position:absolute; top:10px; left:10px; right:10px; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:6px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.c-rec b{ font-weight:400; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.c-rec b::before{ content:""; width:6px; height:6px; border-radius:50%; background:#ff3b30; animation:pulse 1.2s ease-in-out infinite; }
.c-clip .c-vf.tl, .c-clip .c-vf.tr{ display:none; }

/* ---------- OUTRO ---------- */
.c-out{ padding-top:clamp(56px, 10vh, 104px); padding-bottom:calc(clamp(48px, 9vh, 96px) + env(safe-area-inset-bottom, 0px)); }
.c-film{ position:relative; display:block; width:100%; aspect-ratio:2.39/1; overflow:hidden; background:#000; border:0; padding:0; cursor:pointer; color:#fff; text-align:left; }
.c-film img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.04); opacity:.7; transition:transform 1.2s cubic-bezier(.2,.7,.2,1), opacity .4s; }
.c-film::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(8,9,10,.85), rgba(8,9,10,.1) 60%); }
.c-film:hover img, .c-film:focus-visible img{ transform:scale(1); opacity:.95; }
.c-film:focus-visible{ outline:2px solid var(--tally); outline-offset:3px; }
.c-film-txt{ position:absolute; left:clamp(18px, 3vw, 40px); bottom:clamp(16px, 3vw, 36px); z-index:2; display:flex; flex-direction:column; gap:8px; }
.c-film-h{ font-family:var(--display); font-size:clamp(40px, 6vw, 96px); line-height:.88; text-transform:uppercase; }
.c-film-play{
  position:absolute; right:clamp(18px, 3vw, 40px); bottom:clamp(16px, 3vw, 36px); z-index:2; width:76px; height:76px; border-radius:50%;
  border:1px solid rgba(255,255,255,.8); display:grid; place-items:center; transition:background .2s, border-color .2s, transform .2s, color .2s;
}
.c-film-play svg{ width:22px; height:22px; fill:currentColor; margin-left:4px; }
.c-film:hover .c-film-play, .c-film:focus-visible .c-film-play{ background:var(--tally); border-color:var(--tally); color:#08090A; transform:scale(1.06); }
.c-out-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }
.case .btn:focus-visible, .case-close:focus-visible{ outline:2px solid var(--tally); outline-offset:3px; }


/* desktop: crew photo fills the right side so every face stays visible */
@media(min-width:1100px){
  .c-hero{ min-height:0; height:100vh; height:100svh; max-height:1000px; align-items:center; }
  .c-hero::after{ display:none; }
  /* photo fills the whole right side, top to bottom: no empty band above or below.
     It starts 200px under the copy, where the left-edge fade hides the overlap. */
  .c-hero-media{
    inset:0 0 0 calc(max(632px, calc(50vw - 620px + 632px)) - 200px);
    translate:none; transform:none; width:auto; height:auto; aspect-ratio:auto;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 22%); mask-image:linear-gradient(90deg, transparent 0, #000 22%);
  }
  .c-hero-media img{ object-position:var(--pos, 50% 40%); }
  .c-hero-media::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(8,9,10,.7), rgba(8,9,10,0) 26%), linear-gradient(to bottom, rgba(8,9,10,.55), rgba(8,9,10,0) 18%); }
  .c-hud-rec{ top:84px; right:32px; }
  .c-hud-cam{ right:32px; bottom:16px; }
  .c-hero-in{ padding-top:64px; padding-bottom:40px; }
  .c-hero-in > *{ max-width:min(600px, 40vw); }
  .c-title{ font-size:clamp(60px, 6.2vw, 104px); }
  .c-hero-grid{ grid-template-columns:1fr; gap:22px; }
}

/* ---------- TABLET / PHONE ---------- */
/* tablet & phone: photo block on top, copy underneath (no text over faces) */
@media(max-width:1099px){
  .c-hero{ display:block; min-height:0; background:var(--paper); }
  .c-hero::after{ display:none; }
  .c-hero-media{ position:relative; inset:auto; aspect-ratio:var(--ar, 1.3); overflow:hidden; }
  .c-hero-media img{ object-position:50% 62%; }
  .c-hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, var(--paper) 0%, rgba(8,9,10,0) 34%), linear-gradient(to bottom, rgba(8,9,10,.6), rgba(8,9,10,0) 22%); }
  .c-hero-in{ margin-top:-56px; padding-top:0; }
}
@media(max-width:960px){
  .c-step-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:28px; }
  .c-hero-grid{ grid-template-columns:1fr; }
}
@media(max-width:760px){
  .c-wrap{ padding-left:20px; padding-right:20px; }
  .case-bar{ padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top, 0px)); }
  .case-file{ font-size:11px; letter-spacing:.12em; }
  .c-hero-media{ aspect-ratio:1.25; }
  .c-hero-media img{ object-position:62% 50%; }
  .c-hero-in{ margin-top:-40px; }
  .c-kick{ font-size:11px; letter-spacing:.12em; }
  .c-title{ font-size:clamp(54px, 17vw, 88px); }
  .c-hero-grid{ padding-top:16px; gap:18px; }
  .c-brief{ font-size:15px; }
  .c-meta{ gap:6px 20px; margin-top:12px; }
  .c-stats{ justify-content:space-between; }
  .c-stat b{ font-size:40px; }
  .c-step-grid{ gap:24px 12px; }
  .c-step-ph{ margin-bottom:10px; }
  .c-step-n{ font-size:32px; left:10px; bottom:6px; }
  .c-step h3{ font-size:22px; }
  .c-step p{ font-size:13px; line-height:1.45; }
  .c-rec{ top:8px; left:8px; right:8px; font-size:11px; letter-spacing:.06em; }
  .c-rec .c-tc{ display:none; }
  .c-film{ aspect-ratio:16/10; }
  .c-film-play{ width:56px; height:56px; }
  .c-out-actions .btn{ flex:1 1 100%; justify-content:center; }
}

@media(prefers-reduced-motion: reduce){
  .case, .case.open{ transition:none; }
  .rv, .c-step-ph img, .c-title .ch{ transition:none !important; opacity:1; transform:none !important; }
  .c-step-ph::after{ display:none; }
  .c-rec b::before, .case-file i{ animation:none; }
}

/* =====================================================================
   v46: viewfinder HUD, ticker, tilt, magnetic play, photo strip, viewer
   ===================================================================== */
.c-hero-media img{ filter:contrast(1.06) saturate(1.06); }
/* photo wipes in from the right when the case opens */
.c-hero-media{ clip-path:inset(0 0 0 100%); transition:clip-path 1.1s cubic-bezier(.76,0,.18,1) .15s; }
.case.ready .c-hero-media{ clip-path:inset(0 0 0 0); }

.c-hud{ position:absolute; inset:0; z-index:2; pointer-events:none; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.55); opacity:0; transition:opacity .6s ease 1s; }
.case.ready .c-hud{ opacity:1; }
.c-hud-rec{ position:absolute; top:84px; right:28px; display:flex; align-items:center; gap:8px; }
.c-hud-rec i{ width:8px; height:8px; border-radius:50%; background:#ff3b30; animation:pulse 1.2s ease-in-out infinite; }
.c-hud-rec b{ font-weight:400; font-variant-numeric:tabular-nums; }
.c-hud-cam{ position:absolute; right:28px; bottom:24px; opacity:.8; }
.c-hud-grid{ position:absolute; inset:14% 10%; opacity:.22;
  background:
    linear-gradient(#fff,#fff) 33.33% 0/1px 100% no-repeat,
    linear-gradient(#fff,#fff) 66.66% 0/1px 100% no-repeat,
    linear-gradient(#fff,#fff) 0 33.33%/100% 1px no-repeat,
    linear-gradient(#fff,#fff) 0 66.66%/100% 1px no-repeat; }
.c-af{ position:absolute; left:0; top:0; width:84px; height:84px; margin:-42px 0 0 -42px; will-change:transform; }
.c-af i{ position:absolute; width:16px; height:16px; border:0 solid rgba(255,255,255,.95); transition:all .35s cubic-bezier(.2,.8,.2,1); }
.c-af i:nth-child(1){ left:0; top:0; border-top-width:2px; border-left-width:2px; }
.c-af i:nth-child(2){ right:0; top:0; border-top-width:2px; border-right-width:2px; }
.c-af i:nth-child(3){ left:0; bottom:0; border-bottom-width:2px; border-left-width:2px; }
.c-af i:nth-child(4){ right:0; bottom:0; border-bottom-width:2px; border-right-width:2px; }
.c-af em{ position:absolute; left:0; top:calc(100% + 6px); font-style:normal; font-size:11px; white-space:nowrap; opacity:.85; transition:color .3s; }
.c-af.lock i{ border-color:var(--tally); }
.c-af.lock i:nth-child(1){ left:10px; top:10px; } .c-af.lock i:nth-child(2){ right:10px; top:10px; }
.c-af.lock i:nth-child(3){ left:10px; bottom:10px; } .c-af.lock i:nth-child(4){ right:10px; bottom:10px; }
.c-af.lock em{ color:var(--tally); }
@media(min-width:1100px){ .c-hero-media{ cursor:none; } }
@media(max-width:1099px){ .c-hud-rec{ top:72px; right:20px; } .c-hud-cam{ display:none; } .c-hud{ font-size:11px; } .c-af{ width:64px; height:64px; margin:-32px 0 0 -32px; } }

/* ticker */
.c-marq{ overflow:hidden; border-top:1px solid var(--frame-2); border-bottom:1px solid var(--frame-2); padding:14px 0; margin-top:clamp(28px, 5vh, 56px); }
.c-marq-track{ display:flex; align-items:center; gap:28px; width:max-content; will-change:transform; }
.c-marq-track span{ font-family:var(--display); font-size:clamp(34px, 4.4vw, 64px); line-height:1; text-transform:uppercase; white-space:nowrap; }
.c-marq-track span:nth-of-type(even){ color:transparent; -webkit-text-stroke:1px rgba(242,244,240,.55); }
.c-marq-track i{ width:12px; height:12px; flex:none; background:var(--tally); transform:rotate(45deg); }

/* steps: 3D tilt + glare on desktop */
.c-step-grid{ perspective:900px; }
.c-step-ph{ transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition:transform .5s cubic-bezier(.2,.8,.2,1); transform-style:preserve-3d; }
.c-step-ph.tilt{ transition:transform .08s linear; }
.c-step-ph::before{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.22), rgba(255,255,255,0) 55%); }
.c-step-ph.tilt::before{ opacity:1; }

/* film: magnetic play button */
.c-film-play{ transition:background .2s, border-color .2s, transform .2s, color .2s, translate .35s cubic-bezier(.2,.8,.2,1); }

/* photo strip (contact sheet) */
.c-gal{ padding-top:clamp(56px, 10vh, 104px); }
.c-gal .c-head{ align-items:flex-end; }
.c-gal-nav{ display:flex; align-items:center; gap:12px; }
.c-gal-btn{ width:44px; height:44px; display:grid; place-items:center; background:transparent; border:1px solid #3A423C; color:var(--ink); cursor:pointer; transition:background .2s, border-color .2s, color .2s; }
.c-gal-btn svg{ width:18px; height:18px; stroke:currentColor; stroke-width:1.6; fill:none; }
.c-gal-btn:hover, .c-gal-btn:focus-visible{ background:var(--tally); border-color:var(--tally); color:#08090A; }
.c-gal-count{ color:var(--steel); font-variant-numeric:tabular-nums; }
.c-gal-count b{ color:var(--ink); font-weight:400; }
.c-strip{
  position:relative; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; cursor:grab;
  padding:26px max(32px, calc(50% - 620px + 32px)); background:#050606;
  border-top:1px solid var(--frame-2); border-bottom:1px solid var(--frame-2);
  /* sprocket holes along both edges */
  background-image:
    repeating-linear-gradient(90deg, rgba(242,244,240,.16) 0 10px, transparent 10px 26px),
    repeating-linear-gradient(90deg, rgba(242,244,240,.16) 0 10px, transparent 10px 26px);
  background-size:100% 7px, 100% 7px; background-position:0 9px, 0 calc(100% - 9px); background-repeat:no-repeat;
  background-attachment:local;
}
.c-strip::-webkit-scrollbar{ display:none; }
.c-strip.drag{ cursor:grabbing; scroll-snap-type:none; }
.c-strip.drag .c-frame-btn{ pointer-events:none; }
.c-strip-track{ list-style:none; display:flex; gap:14px; width:max-content; }
.c-frame{ position:relative; flex:none; width:clamp(220px, 24vw, 340px); scroll-snap-align:start; transform:rotateY(calc(var(--sk, 0) * -8deg)) scale(calc(1 - var(--sk, 0) * var(--sk, 0) * .06)); transition:opacity .9s ease, transform .2s linear; }
.c-frame.wide{ width:clamp(360px, 42vw, 600px); }
.c-strip{ perspective:1200px; }
.c-frame-btn{ display:block; width:100%; aspect-ratio:4/5; padding:0; border:0; background:var(--frame); cursor:zoom-in; overflow:hidden; }
.c-frame.wide .c-frame-btn{ aspect-ratio:3/2; }
.c-frame-btn img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .4s; filter:grayscale(.25); }
.c-frame-btn:hover img, .c-frame-btn:focus-visible img{ transform:scale(1.05); filter:none; }
.c-frame-btn:focus-visible{ outline:2px solid var(--tally); outline-offset:3px; }
.c-frame-n{ position:absolute; left:0; top:-20px; font-size:11px; color:#E7A93A; letter-spacing:.1em; }
.c-frame-cap{ display:block; margin-top:10px; font-size:11px; color:var(--steel); letter-spacing:.12em; }

/* full-screen photo viewer */
.c-view{ position:absolute; inset:0; z-index:8; background:rgba(5,6,6,.96); display:grid; place-items:center; padding:64px 72px; opacity:0; visibility:hidden; transition:opacity .3s, visibility 0s linear .3s; }
.c-view.open{ opacity:1; visibility:visible; transition:opacity .3s; }
.c-view-fig{ max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:12px; }
.c-view-fig img{ max-width:100%; max-height:calc(100vh - 160px); max-height:calc(100svh - 160px); object-fit:contain; opacity:0; transform:scale(.97); transition:opacity .35s, transform .5s cubic-bezier(.2,.8,.2,1); }
.c-view-fig img.in{ opacity:1; transform:none; }
.c-view-fig figcaption{ font-size:11px; color:var(--steel); letter-spacing:.14em; text-transform:uppercase; }
.c-view-x{ position:absolute; top:calc(14px + env(safe-area-inset-top, 0px)); right:24px; }
.c-view-nav{ position:absolute; top:50%; margin-top:-24px; width:48px; height:48px; display:grid; place-items:center; background:rgba(8,9,10,.6); border:1px solid rgba(242,244,240,.35); color:var(--ink); cursor:pointer; }
.c-view-nav svg{ width:20px; height:20px; stroke:currentColor; stroke-width:1.6; fill:none; }
.c-view-nav.prev{ left:16px; } .c-view-nav.next{ right:16px; }
.c-view-nav:hover, .c-view-nav:focus-visible{ background:var(--tally); border-color:var(--tally); color:#08090A; }

@media(max-width:760px){
  .c-marq{ padding:10px 0; }
  .c-strip{ padding:24px 20px; }
  .c-frame{ width:68vw; }
  .c-frame.wide{ width:86vw; }
  .c-gal-nav{ width:100%; justify-content:space-between; }
  .c-view{ padding:56px 12px 72px; }
  .c-view-nav{ top:auto; bottom:calc(14px + env(safe-area-inset-bottom, 0px)); margin-top:0; }
}
@media(prefers-reduced-motion: reduce){
  .c-hero-media{ clip-path:none; transition:none; }
  .c-hud{ transition:none; }
  .c-af{ display:none; }
  .c-hud-rec i{ animation:none; }
  .c-frame{ transform:none !important; }
}
.c-brief, .c-meta, .c-stats{ text-shadow:0 1px 14px rgba(8,9,10,.9); }
/* snap keeps the first frame aligned with the page margin instead of the strip edge */
.c-strip{ scroll-padding-inline:max(32px, calc(50% - 620px + 32px)); }
.c-view{ background:rgba(5,6,6,.985); }
@media(max-width:1099px){ .c-hero{ padding-top:calc(60px + env(safe-area-inset-top, 0px)); } }
@media(max-width:760px){ .c-strip{ scroll-padding-inline:20px; } }

/* ===================== v48 polish ===================== */
/* step photos are buttons that open the viewer */
button.c-step-ph{ display:block; width:100%; padding:0; border:0; color:inherit; cursor:zoom-in; font:inherit; }
button.c-step-ph:focus-visible{ outline:2px solid var(--tally); outline-offset:3px; }
.c-step-ph::selection{ background:none; }
@media(hover:none){ button.c-step-ph:active img{ transform:scale(.98); transition-duration:.12s; } }

/* small labels: 11px floor for legibility */
.c-meta dt, .c-stat span, .c-frame-cap, .c-frame-n{ font-size:11px; }

/* next case */
.c-next{
  position:relative; display:grid; grid-template-columns:minmax(0, 220px) 1fr auto; align-items:center; gap:clamp(16px, 3vw, 40px);
  width:100%; margin-top:clamp(40px, 7vh, 72px); padding:16px; text-align:left; cursor:pointer; color:var(--ink);
  background:var(--frame); border:1px solid var(--frame-2); transition:border-color .25s, background .25s;
}
.c-next:hover, .c-next:focus-visible{ border-color:var(--tally); background:#0D110E; }
.c-next:focus-visible{ outline:2px solid var(--tally); outline-offset:3px; }
.c-next-ph{ display:block; aspect-ratio:16/10; overflow:hidden; background:#000; }
.c-next-ph img{ width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.2,1); }
.c-next:hover .c-next-ph img{ transform:scale(1.06); }
.c-next-tx{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.c-next-h{ font-family:var(--display); font-size:clamp(32px, 4vw, 60px); line-height:.9; text-transform:uppercase; }
.c-next-arrow{ width:56px; height:56px; border:1px solid rgba(242,244,240,.4); display:grid; place-items:center; transition:background .25s, border-color .25s, color .25s, transform .3s cubic-bezier(.2,.8,.2,1); }
.c-next-arrow svg{ width:22px; height:22px; stroke:currentColor; stroke-width:1.6; fill:none; }
.c-next:hover .c-next-arrow{ background:var(--tally); border-color:var(--tally); color:#08090A; transform:translateX(4px); }
@media(max-width:760px){
  .c-next{ grid-template-columns:96px 1fr auto; padding:10px; gap:14px; }
  .c-next-h{ font-size:28px; }
  .c-next-arrow{ width:44px; height:44px; }
}

/* switching cases: quick dip so the swap reads as a cut */
.case-scroll{ transition:opacity .3s ease, transform .3s ease; }
.case.swap .case-scroll{ opacity:0; transform:translateY(12px); }
@media(prefers-reduced-motion: reduce){ .case-scroll{ transition:none; } .case.swap .case-scroll{ transform:none; } }

/* long titles (e.g. "Relay of the Gods") step down so each line stays on one line */
.c-title.long{ font-size:clamp(50px, 5.4vw, 88px); }
@media(max-width:760px){ .c-title.long{ font-size:clamp(46px, 13.5vw, 64px); } }