/* ============================================================
   DEZI · 217 Days · Series Pitch
   Design system: snowline / basalt / ember · alpine-forensic
   ============================================================ */

@font-face{
  font-family:'Archivo Var';
  src:url('../fonts/archivo-var.woff2') format('woff2');
  font-weight:100 900; font-stretch:62.5% 125%; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Plex Mono';
  src:url('../fonts/plexmono-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Plex Mono';
  src:url('../fonts/plexmono-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Newsreader Var';
  src:url('../fonts/newsreader.woff2') format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Newsreader Var';
  src:url('../fonts/newsreader-italic.woff2') format('woff2');
  font-weight:200 800; font-style:italic; font-display:swap;
}

:root{
  --ink:#0c1114;
  --ink-2:#141b1f;
  --bone:#e7eae4;
  --bone-2:#d6ddd3;
  --dust:#a7b3ab;
  --haze:#8b99a1;
  --sage:#5a6b6f;
  --oxide:#b34a1e;
  --oxide-bright:#e05e20;
  --flame:#eba660;

  --display:'Archivo Var', Arial, sans-serif;
  --mono:'Plex Mono','Courier New', monospace;
  --serif:'Newsreader Var', Georgia, serif;

  --gutter:clamp(20px, 5vw, 84px);
  --hud-inset:clamp(14px, 2.2vw, 26px);
}

*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:auto;}
html,body{background:var(--ink); color:var(--bone);}
body{
  font-family:var(--serif); font-weight:340; font-size:clamp(16px,1.25vw,19px);
  line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.is-locked{overflow:hidden; height:100vh;}
img{display:block; max-width:100%;}
button{font:inherit; background:none; border:0; color:inherit; cursor:pointer;}
::selection{background:var(--oxide); color:var(--bone);}

/* ---- type roles ---- */
.display{
  font-family:var(--display); font-stretch:118%; font-weight:780;
  text-transform:uppercase; line-height:.92; letter-spacing:.005em;
}
.mono{
  font-family:var(--mono); font-weight:400; font-size:clamp(10.5px,.78vw,12.5px);
  letter-spacing:.18em; text-transform:uppercase; line-height:1.7;
}
.mono-md{font-family:var(--mono); font-size:clamp(12px,.95vw,15px); letter-spacing:.06em; line-height:1.8; text-transform:none;}
.serif-lg{
  font-family:var(--serif); font-style:italic; font-weight:330;
  font-size:clamp(20px,2.1vw,30px); line-height:1.45;
}
.eyebrow{color:var(--oxide-bright); margin-bottom:clamp(16px,2.4vh,30px);}
.on-bone .eyebrow{color:var(--oxide);}

/* film grain + vignette */
#grain{
  position:fixed; inset:-60px; z-index:90; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  animation:grain 9s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-22px,14px)}
  40%{transform:translate(14px,-20px)} 60%{transform:translate(-12px,-14px)} 80%{transform:translate(20px,12px)}
}
#vignette{
  position:fixed; inset:0; z-index:89; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 58%, rgba(6,10,12,.5) 100%);
}

/* dust canvas (Three.js) */
#dust{position:fixed; inset:0; z-index:3; pointer-events:none; opacity:0;}

/* ============================ GATE ============================ */
#gate{
  position:fixed; inset:0; z-index:200; background:var(--ink);
  display:flex; align-items:center; justify-content:center; text-align:center;
}
#gate .gate-bg{position:absolute; inset:0; object-fit:cover; width:100%; height:100%; opacity:.42; filter:saturate(.85);}
#gate::after{content:""; position:absolute; inset:0; background:radial-gradient(ellipse at center, transparent 30%, rgba(8,12,14,.92) 78%);}
.gate-inner{position:relative; z-index:2; padding:0 var(--gutter); max-width:880px;}
.gate-mark{
  width:54px; height:54px; margin:0 auto clamp(20px,3.4vh,40px); border:1px solid rgba(231,234,228,.4);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.gate-mark i{display:block; width:7px; height:18px; background:var(--bone); border-radius:4px 4px 1px 1px;
  clip-path:polygon(50% 0,100% 28%,72% 100%,28% 100%,0 28%);}
.g-title{font-size:clamp(56px,11vw,150px); margin:clamp(10px,1.6vh,18px) 0 6px;}
.g-sub{margin-bottom:clamp(20px,3.4vh,42px); color:var(--dust);}
.g-conf{color:var(--haze); font-style:italic; margin-bottom:clamp(28px,4.6vh,56px); font-size:clamp(15px,1.1vw,18px);}
.g-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.g-btn{
  font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  border:1px solid var(--bone); padding:16px 30px; color:var(--bone);
  transition:background .25s,color .25s,border-color .25s; background:rgba(12,17,20,.35); backdrop-filter:blur(2px);
}
.g-btn:hover{background:var(--bone); color:var(--ink);}
.g-btn.ghost{border-color:rgba(231,234,228,.35); color:var(--dust);}
.g-btn.ghost:hover{border-color:var(--bone); background:transparent; color:var(--bone);}
.g-hint{margin-top:clamp(22px,3.8vh,46px); color:var(--haze);}
.g-code{display:none; margin:0 auto 26px; max-width:340px;}
.g-code input{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--dust); color:var(--bone);
  font-family:var(--mono); font-size:16px; letter-spacing:.5em; text-align:center; padding:10px 0; outline:none;
}
#gate.needs-code .g-code{display:block;}

/* ============================ HUD ============================ */
#hud{position:fixed; inset:0; z-index:120; pointer-events:none; opacity:0;}
#hud > *{position:absolute; pointer-events:auto;}
.hud-tl{top:var(--hud-inset); left:var(--hud-inset);}
.hud-tr{top:var(--hud-inset); right:var(--hud-inset); display:flex; gap:10px;}
.hud-bl{bottom:calc(var(--hud-inset) + 10px); left:var(--hud-inset); pointer-events:none;}
.hud-br{bottom:calc(var(--hud-inset) + 10px); right:var(--hud-inset); text-align:right; pointer-events:none;}
.hud-chip{color:var(--dust); mix-blend-mode:difference;}
.hud-bl .mono, .hud-br .mono{display:block;}
#hudCoord{color:var(--haze); letter-spacing:.14em;}
.hud-btn{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  border:1px solid rgba(139,153,161,.55); color:var(--bone); padding:8px 14px;
  background:rgba(12,17,20,.55); backdrop-filter:blur(6px); transition:all .25s;
  mix-blend-mode:normal;
}
.hud-btn:hover{background:var(--bone); color:var(--ink); border-color:var(--bone);}
.hud-btn[aria-pressed="true"]{background:var(--oxide); border-color:var(--oxide); color:var(--bone);}
#hudRule{
  position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(139,153,161,.22); pointer-events:none;
}
#hudBar{position:absolute; left:0; top:0; bottom:0; width:100%; background:var(--oxide-bright); transform-origin:left; transform:scaleX(0);}
.hud-ticks{position:absolute; left:0; right:0; bottom:3px; height:7px; pointer-events:none;}
.hud-ticks i{position:absolute; bottom:0; width:1px; height:7px; background:rgba(139,153,161,.4);}

/* ============================ INDEX ============================ */
#index{
  position:fixed; inset:0; z-index:150; background:rgba(10,14,16,.96); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s;
}
#index.open{opacity:1; visibility:visible;}
.index-list{list-style:none; width:min(860px, 88vw); max-height:82vh; overflow-y:auto; padding:4vh 0;}
.index-list a{
  display:flex; align-items:baseline; gap:22px; text-decoration:none; color:var(--dust);
  padding:9px 6px; border-bottom:1px solid rgba(139,153,161,.14); transition:color .2s, padding-left .25s;
}
.index-list a:hover{color:var(--bone); padding-left:18px;}
.index-list a:hover .ix-name{color:var(--oxide-bright);}
.ix-num{font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--haze); min-width:34px;}
.ix-name{font-family:var(--display); font-stretch:114%; font-weight:700; text-transform:uppercase;
  font-size:clamp(17px,2.5vw,30px); line-height:1.1; transition:color .2s;}
#indexClose{position:absolute; top:var(--hud-inset); right:var(--hud-inset);}

/* ============================ SECTION SHELLS ============================ */
section{position:relative;}
.cine{min-height:100vh; min-height:100svh; display:flex; align-items:center; overflow:hidden; background:var(--ink);}
.cine-bg{position:absolute; inset:-6%; width:112%; height:112%; object-fit:cover; will-change:transform;}
.cine-shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,14,16,.55), rgba(10,14,16,.18) 38%, rgba(10,14,16,.62) 86%);}
.cine-inner{position:relative; z-index:5; width:100%; padding:14vh var(--gutter);}

.file{background:var(--bone); color:var(--ink); padding:clamp(90px,15vh,170px) var(--gutter);}
.file.on-bone{}
.file-grid{max-width:1340px; margin:0 auto;}
.h-display{font-size:clamp(34px,5.2vw,76px); max-width:18ch;}
.file .h-display{color:var(--ink);}
.lede{font-size:clamp(19px,1.7vw,26px); line-height:1.5; max-width:62ch; font-weight:360;}
.cols-2{columns:2; column-gap:56px;}
.cols-2 p{break-inside:avoid; margin-bottom:1.1em;}
@media(max-width:860px){.cols-2{columns:1;}}
hr.rule{border:0; border-top:1px solid rgba(12,17,20,.25); margin:clamp(34px,5vh,60px) 0;}
.cine hr.rule{border-top-color:rgba(231,234,228,.22);}

/* stamp + reveal primitives */
[data-reveal]{opacity:0;}
.stamp{display:inline-block;}
.redact{position:relative; display:inline; box-decoration-break:clone; -webkit-box-decoration-break:clone;}
.redact::after{
  content:""; position:absolute; inset:-1px -3px; background:var(--ink);
  transform:scaleX(var(--r,1)); transform-origin:right center;
}
.on-dark .redact::after{background:var(--bone-2);}
.caption{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--sage); margin-top:14px;}
.cine .caption{color:var(--haze);}

/* exhibit images on file pages */
.exhibit{position:relative; box-shadow:0 30px 70px -30px rgba(12,17,20,.55);}
.exhibit img{width:100%;}
.exhibit .exh-tag{
  position:absolute; top:12px; left:12px; font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; background:var(--bone); color:var(--ink); padding:6px 10px; opacity:.92;
}

/* ============================ COVER ============================ */
#cover .cine-inner{display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; min-height:100vh;}
.cov-title{font-size:clamp(64px,14.5vw,230px); letter-spacing:.01em; will-change:letter-spacing,transform;}
.cov-sub{font-size:clamp(15px,2.1vw,30px); font-stretch:108%; font-weight:620; letter-spacing:.34em; margin-top:clamp(10px,1.8vh,22px); color:var(--bone-2);}
.cov-tag{margin-top:clamp(22px,4vh,46px); color:var(--dust);}
.cov-line{margin-top:clamp(34px,6vh,70px); color:var(--haze);}
.scroll-cue{position:absolute; bottom:calc(var(--hud-inset) + 34px); left:50%; width:1px; height:54px; background:linear-gradient(var(--bone), transparent); overflow:hidden;}
.scroll-cue i{position:absolute; left:0; top:-100%; width:100%; height:100%; background:var(--oxide-bright); animation:cue 2.2s ease-in-out infinite;}
@keyframes cue{0%{top:-100%}55%{top:100%}100%{top:100%}}

/* letterbox bars */
.bars{position:fixed; left:0; right:0; height:0; background:#080c0e; z-index:85; pointer-events:none;}
#barTop{top:0;} #barBot{bottom:0;}

/* ============================ COLD OPEN ============================ */
#coldopen{height:100vh;}
.frame{position:absolute; inset:0; opacity:0;}
.frame .cine-bg{inset:-8%; width:116%; height:116%;}
.frame-cap{
  position:absolute; left:var(--gutter); bottom:18vh; z-index:6; max-width:620px;
}
.frame-cap .mono{color:var(--flame); margin-bottom:10px;}
.frame-cap p{font-size:clamp(20px,2.4vw,34px); line-height:1.35; font-style:italic; text-shadow:0 2px 30px rgba(8,12,14,.8);}
.frame:nth-child(4) .frame-cap{left:50%; bottom:auto; top:50%; transform:translate(-50%,-50%); text-align:center; max-width:760px;}

/* ============================ REFRAME ============================ */
#reframe-dark{height:100vh;}
#reframe-dark .frame-cap{bottom:auto; top:50%; transform:translateY(-50%);}
#flash{position:fixed; inset:0; background:var(--bone); z-index:140; opacity:0; pointer-events:none;}

#reframe{background:var(--bone); color:var(--ink); min-height:100vh; overflow:hidden;}
#reframe .rf-stage{height:100vh; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center; gap:4vw; padding:0 var(--gutter); max-width:1500px; margin:0 auto;}
.rf-copy .h-display{margin:18px 0 26px;}
.rf-thesis{font-size:clamp(21px,2vw,30px); line-height:1.4; font-style:italic; margin-top:30px; max-width:30ch;}
.rf-thesis b{color:var(--oxide); font-style:normal; font-weight:600;}
.rf-note{margin-top:26px; color:var(--sage); max-width:46ch; font-size:clamp(14px,1.05vw,16.5px); line-height:1.7; font-family:var(--mono); letter-spacing:.02em; text-transform:none;}
.rf-foot{margin-top:18px; color:var(--haze);}
#map{width:100%; height:min(78vh,820px);}
#map .coast{fill:none; stroke:rgba(12,17,20,.34); stroke-width:1.4;}
#map .vein{fill:none; stroke:var(--oxide); stroke-width:2.4; stroke-linecap:round;}
#map .mpoint circle{fill:var(--ink);}
#map .mpoint text{font-family:var(--mono); font-size:15px; letter-spacing:.18em; fill:var(--ink); text-transform:uppercase;}
#map .mpoint .sub{font-size:11px; fill:var(--sage); letter-spacing:.14em;}
#map .snow .ring{fill:none; stroke:var(--oxide); stroke-width:2;}
#map .snow text{font-weight:500;}
#map .grid line{stroke:rgba(12,17,20,.07); stroke-width:1;}
@media(max-width:900px){
  #reframe .rf-stage{grid-template-columns:1fr; height:auto; padding:90px var(--gutter); gap:30px;}
  #map{height:62vw;}
}

/* ============================ PITCH / generic file blocks ============================ */
.genre-box{
  border:1px solid rgba(12,17,20,.4); padding:22px 26px; margin:clamp(30px,5vh,54px) 0;
  font-family:var(--mono); font-size:clamp(12px,.95vw,14.5px); letter-spacing:.05em; line-height:1.9; max-width:760px;
}
.genre-box b{color:var(--oxide); letter-spacing:.2em; font-weight:500;}
.band{position:relative; overflow:hidden;}
.band img{width:100%; height:min(72vh,640px); object-fit:cover;}
.band .band-cap{position:absolute; left:var(--gutter); bottom:26px; right:var(--gutter); color:var(--bone); text-shadow:0 1px 18px rgba(8,12,14,.9);}

/* ============================ WHY NOW ============================ */
#whynow .cine-inner{max-width:1340px; margin:0 auto;}
.wn-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:5vw; align-items:start;}
.wn-rows{margin-top:clamp(30px,5vh,56px); border-top:1px solid rgba(231,234,228,.2);}
.wn-row{display:grid; grid-template-columns:130px 1fr; gap:26px; padding:22px 0; border-bottom:1px solid rgba(231,234,228,.2); align-items:baseline;}
.wn-row .mono{color:var(--flame);}
.wn-row p{font-size:clamp(15.5px,1.25vw,19px); line-height:1.55; color:var(--bone-2);}
.wn-big{margin-top:clamp(36px,6vh,64px); font-size:clamp(24px,3vw,44px); line-height:1.25; font-style:italic; max-width:24ch;}
.wn-big b{color:var(--oxide-bright); font-style:normal;}
.wn-file{transform:rotate(1.6deg); box-shadow:0 40px 90px -30px rgba(0,0,0,.8);}
.wn-file img{width:100%;}
@media(max-width:900px){.wn-grid{grid-template-columns:1fr;} .wn-row{grid-template-columns:92px 1fr; gap:16px;}}

/* ============================ PROMISE ============================ */
.q-list{list-style:none; margin-top:clamp(30px,5vh,52px); counter-reset:q;}
.q-list li{
  counter-increment:q; padding:26px 0; border-top:1px solid rgba(12,17,20,.25);
  display:grid; grid-template-columns:64px 1fr; gap:20px; align-items:baseline;
}
.q-list li::before{content:"Q·" counter(q); font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:var(--oxide);}
.q-list p{font-family:var(--display); font-stretch:110%; font-weight:680; text-transform:uppercase; font-size:clamp(19px,2.5vw,36px); line-height:1.12;}

/* ============================ STORY ENGINE ============================ */
#engine{height:100vh;}
#engine .cine-bg{opacity:.6;}
.eng-stage{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
.orbit{position:relative; width:min(74vmin,720px); height:min(74vmin,720px); will-change:transform;}
.orbit span{
  --a:0deg; position:absolute; top:50%; left:50%; font-family:var(--mono); font-size:clamp(10px,1.15vw,14px);
  letter-spacing:.3em; text-transform:uppercase; color:var(--bone-2); text-shadow:0 1px 14px rgba(8,12,14,.9);
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--orb,1) * min(-36vmin,-340px))) rotate(calc(var(--a) * -1));
  white-space:nowrap;
}
.eng-center{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; z-index:6;}
.eng-center .word{font-size:clamp(30px,5vw,72px); color:var(--bone);}
.eng-copy{position:absolute; left:var(--gutter); right:var(--gutter); bottom:9vh; z-index:6; display:flex; justify-content:space-between; gap:40px; align-items:flex-end;}
.eng-copy h2{font-size:clamp(24px,3.4vw,50px); max-width:13ch;}
.eng-copy p{max-width:46ch; color:var(--bone-2); font-size:clamp(14.5px,1.15vw,17.5px);}
@media(max-width:860px){.eng-copy{flex-direction:column; align-items:flex-start; bottom:6vh;}}

/* ============================ VICTIMS ============================ */
#victims{background:#0a0f12;}
.vic-wrap{max-width:1340px; margin:0 auto;}
.lights{display:flex; justify-content:space-between; gap:6px; margin:clamp(44px,7vh,80px) 0 14px;}
.light{position:relative; flex:1; height:140px; display:flex; align-items:flex-end; justify-content:center; cursor:pointer; background:none;}
.light i{
  display:block; width:10px; height:10px; border-radius:50%;
  background:var(--flame); box-shadow:0 0 14px 3px rgba(235,166,96,.55), 0 0 50px 8px rgba(235,166,96,.18);
  transition:transform .4s;
}
.light:hover i, .light.lit i{transform:scale(1.7); box-shadow:0 0 22px 6px rgba(235,166,96,.8), 0 0 90px 18px rgba(235,166,96,.3);}
.light em{
  position:absolute; bottom:42px; left:50%; transform:translateX(-50%);
  font-family:var(--serif); font-style:italic; font-size:clamp(12px,1.15vw,17px); color:var(--bone);
  white-space:nowrap; opacity:0; transition:opacity .5s;
}
.light.lit em{opacity:1;}
.lights-hint{text-align:center; color:var(--haze);}
.vic-memorial{margin:clamp(46px,8vh,90px) auto 0; max-width:760px; text-align:center;}
.vic-memorial p{font-style:italic; font-size:clamp(18px,1.7vw,25px); line-height:1.6; color:var(--bone-2);}
.vic-memorial p + p{margin-top:1.2em;}
.vic-trip{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:clamp(50px,9vh,100px);}
.vic-trip figure img{height:300px; width:100%; object-fit:cover; filter:saturate(.92);}
.vic-trip figcaption{font-family:var(--serif); font-style:italic; font-size:14.5px; color:var(--dust); margin-top:12px;}
@media(max-width:860px){
  .vic-trip{grid-template-columns:1fr;}
  .lights{flex-wrap:wrap; gap:0;}
  .light{flex:0 0 20%; height:96px;}
  .light em{display:none;}
}

/* ============================ PERPETRATORS ============================ */
#perps .cine-bg{opacity:.34; filter:saturate(.7);}
#perps .cine-inner{max-width:1240px; margin:0 auto;}
.perp-rows{margin-top:clamp(34px,6vh,60px); border-top:1px solid rgba(231,234,228,.22);}
.perp-row{display:grid; grid-template-columns:minmax(180px,.9fr) 1.6fr; gap:30px; padding:24px 0; border-bottom:1px solid rgba(231,234,228,.22); align-items:baseline;}
.perp-row h3{font-family:var(--display); font-stretch:112%; font-weight:700; text-transform:uppercase; font-size:clamp(17px,1.9vw,27px); letter-spacing:.03em;}
.perp-row p{font-family:var(--mono); font-size:clamp(11.5px,.9vw,13.5px); letter-spacing:.08em; color:var(--bone-2); line-height:1.9; text-transform:uppercase;}
.perp-vow{margin-top:clamp(30px,5vh,50px); color:var(--flame);}
@media(max-width:760px){.perp-row{grid-template-columns:1fr; gap:8px;}}

/* ============================ WORLD ============================ */
.world-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:clamp(40px,7vh,72px);}
.world-grid figure img{height:340px; width:100%; object-fit:cover;}
@media(max-width:860px){.world-grid{grid-template-columns:1fr;} .world-grid figure img{height:240px;}}

/* ============================ TIMELINE ============================ */
#timeline{background:var(--ink-2); overflow:hidden;}
.tl-pin{height:100vh; display:flex; flex-direction:column; justify-content:center; overflow:hidden;}
.tl-head{padding:0 var(--gutter); margin-bottom:5vh;}
.tl-track{display:flex; gap:clamp(26px,3.5vw,60px); padding:0 var(--gutter); will-change:transform; align-items:stretch;}
.tl-card{
  flex:0 0 auto; width:clamp(300px,30vw,430px); border-left:1px solid rgba(139,153,161,.4);
  padding:8px 0 8px 24px; display:flex; flex-direction:column; gap:16px; justify-content:flex-start;
}
.tl-card .mono{color:var(--flame);}
.tl-card p{color:var(--bone-2); font-size:clamp(15px,1.2vw,18.5px); line-height:1.55;}
.tl-card.img{width:clamp(420px,48vw,760px); border-left:0; padding-left:0; display:flex; align-items:center;}
.tl-card.img img{width:100%; height:auto; display:block;}
.tl-counter{display:flex; flex-direction:column; gap:6px; margin-top:8px;}
.tl-counter b{font-family:var(--display); font-stretch:115%; font-weight:750; text-transform:uppercase; font-size:clamp(17px,1.8vw,26px); line-height:1.15;}
.tl-counter b u{color:var(--oxide-bright); text-decoration:none;}
@media(max-width:900px){
  .tl-pin{height:auto; padding:90px 0;}
  .tl-track{flex-direction:column; padding:0 var(--gutter);}
  .tl-card,.tl-card.img{width:100%;}
  .tl-card.img img{height:auto;}
}

/* ============================ TRIAL ============================ */
#trial .cine-bg{opacity:.4;}
#trial .cine-inner{max-width:1240px; margin:0 auto;}
.trial-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:5vw; align-items:center; margin-top:clamp(30px,5vh,56px);}
.trial-grid .lede{color:var(--bone-2); font-size:clamp(17px,1.5vw,23px);}
.trial-grid .lede + .lede{margin-top:1.1em;}
.trial-fact{margin-top:clamp(26px,4vh,40px); color:var(--flame);}
@media(max-width:900px){.trial-grid{grid-template-columns:1fr;}}

/* ============================ AFTERLIFE ============================ */
#afterlife{background:var(--bone); color:var(--ink); padding:clamp(90px,15vh,170px) 0 0;}
#afterlife .file-grid{padding:0 var(--gutter);}
.aft-duo{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:clamp(40px,7vh,72px) auto 0; max-width:1340px; padding:0 var(--gutter);}
.aft-duo figure img{height:380px; width:100%; object-fit:cover;}
.aft-duo figcaption{margin-top:12px;}
#afterlife .band{margin-top:clamp(50px,9vh,100px);}
#afterlife .band img{height:min(86vh,760px);}
@media(max-width:860px){.aft-duo{grid-template-columns:1fr;} .aft-duo figure img{height:240px;}}

/* ============================ EPISODES ============================ */
.ep{height:100vh; min-height:640px;}
.ep .cine-bg{opacity:.55;}
.ep .cine-inner{max-width:1340px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:5vw; align-items:end; height:100%; padding-bottom:12vh;}
.ep-num{font-family:var(--mono); color:var(--oxide-bright); letter-spacing:.3em; font-size:12px;}
.ep h3{font-size:clamp(40px,6.5vw,96px); margin:14px 0 22px;}
.ep .syn{color:var(--bone-2); max-width:54ch; font-size:clamp(15.5px,1.3vw,19.5px);}
.ep-side{display:flex; flex-direction:column; gap:26px;}
.ep-q .mono{color:var(--flame); margin-bottom:8px;}
.ep-q p{font-style:italic; font-size:clamp(17px,1.5vw,23px); line-height:1.45;}
.ep-cliff .mono{color:var(--haze); margin-bottom:8px;}
.ep-cliff p{font-family:var(--display); font-stretch:112%; font-weight:700; text-transform:uppercase; font-size:clamp(16px,1.6vw,24px); line-height:1.2;}
@media(max-width:900px){.ep{height:auto; min-height:100svh;} .ep .cine-inner{grid-template-columns:1fr; align-content:end; gap:30px;}}
.ep-strip{background:var(--ink-2); padding:clamp(60px,9vh,100px) var(--gutter);}
.ep-strip .file-grid{max-width:1340px;}
.strip-list{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:34px; border:1px solid rgba(139,153,161,.25);}
.strip-list li{list-style:none; padding:22px; border:1px solid rgba(139,153,161,.18);}
.strip-list .mono{color:var(--oxide-bright);}
.strip-list h4{font-family:var(--display); font-stretch:110%; font-weight:680; text-transform:uppercase; font-size:clamp(14px,1.25vw,19px); margin-top:8px; line-height:1.2; color:var(--bone-2);}
@media(max-width:900px){.strip-list{grid-template-columns:1fr;}}

/* ============================ LOOK ============================ */
.look-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:clamp(40px,7vh,70px);}
.look-grid img{height:220px; width:100%; object-fit:cover;}
.cgi-box{display:grid; grid-template-columns:1fr 1fr; gap:5vw; align-items:center; margin-top:clamp(50px,8vh,90px);}
@media(max-width:900px){.look-grid{grid-template-columns:repeat(2,1fr);} .cgi-box{grid-template-columns:1fr;}}

/* ============================ ACCESS ============================ */
.acc-table{margin-top:clamp(36px,6vh,60px); border-top:1px solid rgba(12,17,20,.3);}
.acc-row{display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; padding:18px 0; border-bottom:1px solid rgba(12,17,20,.18);}
.acc-row p{font-size:clamp(15.5px,1.3vw,19px);}
.chip{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; padding:7px 12px; border:1px solid currentColor; white-space:nowrap;}
.chip.dev{color:var(--oxide);}
.chip.plan{color:var(--sage);}
.chip.asp{color:#7d8a8c;}

/* ============================ DUTY OF CARE ============================ */
#care{background:#080c0e; text-align:center;}
#care .cine-inner{max-width:980px; margin:0 auto; padding:18vh var(--gutter);}
.care-rules{list-style:none; margin:clamp(40px,7vh,70px) 0;}
.care-rules li{
  font-family:var(--display); font-stretch:112%; font-weight:700; text-transform:uppercase;
  font-size:clamp(17px,2.4vw,34px); line-height:1.25; padding:16px 0; border-bottom:1px solid rgba(231,234,228,.14);
}
.care-note{color:var(--dust); font-size:clamp(14px,1.1vw,16.5px); line-height:1.8; max-width:72ch; margin:0 auto;}

/* ============================ COMPS ============================ */
.comp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; border:1px solid rgba(12,17,20,.35); margin-top:clamp(36px,6vh,60px);}
.comp{padding:30px 26px 36px; border:1px solid rgba(12,17,20,.2); display:flex; flex-direction:column; gap:14px;}
.comp h4{font-family:var(--display); font-stretch:112%; font-weight:740; text-transform:uppercase; font-size:clamp(18px,1.7vw,25px); line-height:1.1;}
.comp .mono{color:var(--oxide);}
.comp p{font-size:clamp(14.5px,1.1vw,16.5px); color:#34403f;}
.pos-line{margin-top:clamp(36px,6vh,60px); font-style:italic; font-size:clamp(19px,2vw,29px); max-width:36ch; line-height:1.45;}
@media(max-width:900px){.comp-grid{grid-template-columns:1fr;}}

/* ============================ CLOSING ============================ */
#closing{height:100vh;}
#closing .frame-cap{left:50%; transform:translateX(-50%); text-align:center; bottom:22vh; max-width:860px;}
#closing .frame-cap p{font-size:clamp(24px,3.6vw,52px); line-height:1.2; font-style:normal; font-family:var(--display); font-stretch:114%; font-weight:760; text-transform:uppercase;}
#contact{background:#080c0e; padding:clamp(80px,13vh,150px) var(--gutter) clamp(50px,8vh,80px); text-align:center;}
.ct-mark{margin-bottom:26px;}
.ct-title{font-size:clamp(24px,3vw,42px);}
.ct-rows{margin:clamp(30px,5vh,50px) auto; max-width:520px; border-top:1px solid rgba(231,234,228,.18);}
.ct-rows div{display:flex; justify-content:space-between; gap:30px; padding:13px 4px; border-bottom:1px solid rgba(231,234,228,.18);}
.ct-rows .mono{color:var(--haze);}
.ct-rows .mono-md{color:var(--bone-2);}
.legal{color:#66737b; font-size:11.5px; line-height:1.9; max-width:760px; margin:40px auto 0; font-family:var(--mono); letter-spacing:.04em; text-transform:none;}

/* ============================ MOTION SAFETY ============================ */
.kbd-hint{position:fixed; bottom:calc(var(--hud-inset) + 26px); left:50%; transform:translateX(-50%); z-index:120; color:var(--haze); opacity:0; pointer-events:none;}
@media (prefers-reduced-motion: reduce){
  #grain{animation:none;}
  .scroll-cue i{animation:none;}
  [data-reveal]{opacity:1 !important;}
  .redact::after{transform:scaleX(0) !important;}
  html{scroll-behavior:auto !important;}
}
@media(max-width:760px){
  .hud-bl{display:none;}
  .eng-copy p{font-size:14px;}
}

/* ============================ PASSWORD LOCK (pre-gate) ============================ */
#lock{
  position:fixed; inset:0; z-index:300; background:#000;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
#lock.lock-out{opacity:0; transition:opacity .6s ease; pointer-events:none;}
.lock-inner{padding:0 var(--gutter); width:min(440px,90vw);}
.lock-mark{
  width:46px; height:46px; margin:0 auto clamp(26px,5vh,44px); border:1px solid rgba(231,234,228,.35);
  border-radius:50%; display:flex; align-items:center; justify-content:center; opacity:.8;
}
.lock-mark i{display:block; width:6px; height:15px; background:var(--bone);
  clip-path:polygon(50% 0,100% 28%,72% 100%,28% 100%,0 28%);}
.lock-label{color:#556063; display:block; margin-bottom:22px; letter-spacing:.22em;}
.lock-code{display:flex; align-items:center; gap:12px; border-bottom:1px solid #232b2e; padding-bottom:12px; transition:border-color .3s;}
.lock-code.shake{animation:lshake .4s;}
@keyframes lshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.lock-code input{
  flex:1; background:transparent; border:0; color:var(--bone); font-family:var(--mono);
  font-size:17px; letter-spacing:.3em; text-align:center; padding:6px 0; outline:none;
}
.lock-code input::placeholder{color:#333d40; letter-spacing:.3em;}
.lock-enter{
  width:38px; height:38px; flex:0 0 auto; border:1px solid #232b2e; color:#78868b;
  font-family:var(--mono); font-size:16px; border-radius:50%; transition:all .25s;
}
.lock-enter:hover{border-color:var(--bone); color:var(--bone);}
.lock-err{color:var(--oxide-bright); margin-top:18px; opacity:0; transition:opacity .25s; letter-spacing:.14em;}
.lock-err.show{opacity:1;}

/* the vault intro is hidden until unlock */
#gate.locked-hidden{opacity:0; visibility:hidden;}
#gate.gate-reveal{opacity:1; visibility:visible; transition:opacity .9s ease;}

/* ════════ MURAL - the geography ════════ */
#mural{height:100vh; min-height:560px;}
.mural-stage{position:absolute; inset:0; z-index:5; overflow:hidden;}
.scanline{
  position:absolute; top:0; bottom:0; left:-1%; width:2px;
  background:linear-gradient(180deg, transparent, var(--oxide-bright) 18%, var(--oxide-bright) 82%, transparent);
  box-shadow:0 0 22px 3px rgba(193,75,53,.45); opacity:.9;
}
.mw{
  position:absolute; left:var(--x); top:var(--y);
  font-family:var(--mono); font-size:clamp(10px,1.05vw,14.5px); letter-spacing:.32em;
  text-transform:uppercase; color:var(--bone); white-space:nowrap;
  text-shadow:0 1px 14px rgba(8,12,14,.95), 0 0 30px rgba(8,12,14,.6);
  opacity:0;
}
.mural-cap{position:absolute; left:var(--gutter); right:var(--gutter); bottom:7vh; z-index:6;}
.mural-cap p{text-shadow:0 1px 20px rgba(8,12,14,.9);}
@media(max-width:760px){ .mw{letter-spacing:.18em;} }

@media (prefers-reduced-motion: reduce){
  .mw{opacity:1 !important;}
  .scanline{display:none;}
}

/* ════════ PROMISE - negative-space fill ════════ */
#promise{overflow:hidden;}
.promise-fill{
  position:absolute; right:0; top:0; z-index:0;
  width:min(54vw,940px); height:auto;
  mix-blend-mode:multiply; opacity:.9; pointer-events:none;
}
#promise > *:not(.promise-fill){position:relative; z-index:1;}
@media(max-width:760px){ .promise-fill{display:none;} }

/* ============================================================
   DEZI ADDITIONS · archive treatment, the clock, the terrain
   ============================================================ */

/* ---- archive photo treatment: real editorial frames, evidence-graded ---- */
.arch{filter:saturate(.62) contrast(1.03) brightness(.97);}
.arch-frame{position:relative; border:1px solid rgba(231,234,228,.14); background:#0e1417;}
.on-bone .arch-frame{border-color:rgba(12,17,20,.22); background:#dfe4dc;}
.arch-frame img{width:100%; display:block;}
.arch-frame .exh-tag{
  position:absolute; top:10px; left:10px; z-index:2;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  background:rgba(8,12,14,.72); color:var(--bone-2); padding:6px 10px; backdrop-filter:blur(2px);
}
.src{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--haze); margin-top:10px;}
.on-bone .src{color:var(--sage);}

/* ---- the man: fact rows + photo strip ---- */
.man-strip{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:14px; margin-top:clamp(40px,7vh,70px); align-items:stretch;}
.man-strip figure{margin:0;}
.man-strip img{width:100%; height:300px; object-fit:cover;}
.man-strip figure:first-child img{height:300px; object-fit:cover; object-position:center 30%;}
@media(max-width:860px){.man-strip{grid-template-columns:1fr;} .man-strip img{height:240px;}}

/* ---- sealed exhibit (the footage) ---- */
.sealed{
  border:1px solid var(--oxide); padding:clamp(26px,4vh,44px) clamp(24px,3vw,44px);
  background:rgba(179,74,30,.05); max-width:760px;
}
.sealed .mono{color:var(--oxide-bright);}
.sealed p.big{font-family:var(--display); font-stretch:112%; font-weight:720; text-transform:uppercase;
  font-size:clamp(19px,2.3vw,32px); line-height:1.18; margin:14px 0 16px; color:var(--bone);}
.sealed p.note{color:var(--bone-2); font-size:clamp(14.5px,1.15vw,17px); line-height:1.65;}

/* ---- quotes duo (the reckoning) ---- */
.quote-duo{display:grid; grid-template-columns:1fr 1fr; gap:2px; border:1px solid rgba(231,234,228,.16); margin-top:clamp(36px,6vh,60px);}
.quote-duo > div{padding:clamp(24px,3.4vh,40px) clamp(22px,2.4vw,36px); border:1px solid rgba(231,234,228,.1);}
.quote-duo .mono{color:var(--haze); margin-bottom:12px;}
.quote-duo p.q{font-family:var(--serif); font-style:italic; font-size:clamp(17px,1.7vw,25px); line-height:1.45; color:var(--bone);}
@media(max-width:860px){.quote-duo{grid-template-columns:1fr;}}

/* ============================ THE CLOCK ============================ */
#clock{background:var(--ink-2); overflow:hidden;}
.clock-pin{height:100vh; min-height:660px; position:relative; display:flex; flex-direction:column; overflow:hidden;}
.clock-head{padding:clamp(20px,4vh,44px) var(--gutter) 0; position:relative; z-index:6;}
.clock-head .h-display{font-size:clamp(26px,3.6vw,54px);}
.clock-stage{position:relative; flex:1;}
#clockRing{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(84vmin,900px); height:min(84vmin,900px); will-change:transform; overflow:visible;
}
#clockRing .tk{stroke:rgba(231,234,228,.16); stroke-width:1;}
#clockRing .tk.maj{stroke:rgba(231,234,228,.44); stroke-width:1.6;}
#clockRing .tk.lit{stroke:var(--oxide-bright);}
#clockRing .tk.maj.lit{stroke:var(--oxide-bright); stroke-width:2;}
#clockRing .dlab{font-family:var(--mono); font-size:15px; letter-spacing:.14em; fill:var(--haze); text-transform:uppercase;}
#clockRing .dlab.lit{fill:var(--flame);}
#clockRing #ckArc{fill:none; stroke:var(--oxide); stroke-width:2.4; opacity:.85;}
#clockRing #ckHand{stroke:var(--bone); stroke-width:1.6;}
#clockRing #ckHub{fill:var(--bone);}
.ck-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  text-align:center; z-index:5; pointer-events:none; width:min(46vmin,480px);
}
.ck-center .mono{color:var(--haze);}
#ckNum{font-family:var(--display); font-stretch:120%; font-weight:800; text-transform:uppercase;
  font-size:clamp(64px,13vmin,150px); line-height:.9; color:var(--bone); letter-spacing:.01em;}
#ckDate{color:var(--flame); margin-top:10px;}
.ck-card{
  position:absolute; right:var(--gutter); top:50%; transform:translateY(-50%);
  width:min(340px,30vw); z-index:6;
}
.ck-card .arch-frame{margin-bottom:16px;}
.ck-card img{height:190px; object-fit:cover;}
.ck-card h3{font-family:var(--display); font-stretch:114%; font-weight:740; text-transform:uppercase;
  font-size:clamp(17px,1.5vw,24px); line-height:1.1; margin-bottom:10px; color:var(--bone);}
.ck-card p{color:var(--bone-2); font-size:clamp(13.5px,1.02vw,16px); line-height:1.6;}
.clock-cap{
  position:absolute; left:var(--gutter); bottom:clamp(20px,4vh,42px); z-index:6; max-width:520px;
}
.clock-cap p{font-family:var(--serif); font-style:italic; font-size:clamp(17px,1.7vw,25px); line-height:1.45; color:var(--bone-2);}
.clock-hint{position:absolute; left:var(--gutter); top:50%; transform:translateY(-50%); z-index:6; max-width:210px; color:var(--haze);}
.clock-list{display:none;}
@media(max-width:899px){
  .clock-pin{display:none;}
  .clock-list{display:block; padding:90px var(--gutter);}
  .clock-list .cl-item{border-left:1px solid rgba(139,153,161,.4); padding:6px 0 26px 20px; position:relative;}
  .clock-list .cl-item::before{content:""; position:absolute; left:-4px; top:12px; width:7px; height:7px; border-radius:50%; background:var(--oxide-bright);}
  .clock-list .mono{color:var(--flame);}
  .clock-list h3{font-family:var(--display); font-stretch:114%; font-weight:740; text-transform:uppercase; font-size:19px; margin:6px 0 8px; color:var(--bone);}
  .clock-list p{color:var(--bone-2); font-size:15px; line-height:1.6;}
  .clock-list img{width:100%; height:200px; object-fit:cover; margin-top:14px;}
}

/* ============================ THE TERRAIN ============================ */
#terrain{background:#0a0f12; overflow:hidden;}
.ter-pin{height:100vh; min-height:640px; position:relative; overflow:hidden;}
#terCanvas{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:pan-y;}
.ter-poster{position:absolute; inset:0; background:#0a0f12; z-index:1; overflow:hidden;}
.ter-poster img{width:100%; height:100%; object-fit:cover; opacity:.42; filter:saturate(.9);}
.ter-live .ter-poster{opacity:0; transition:opacity 1.2s ease; pointer-events:none;}
.ter-copy{position:absolute; left:var(--gutter); top:clamp(20px,5vh,52px); z-index:6; max-width:540px; pointer-events:none;}
.ter-copy .h-display{font-size:clamp(26px,3.6vw,54px);}
.ter-copy .lede{color:var(--bone-2); font-size:clamp(15px,1.25vw,19px); margin-top:16px; max-width:44ch; text-shadow:0 1px 20px rgba(8,12,14,.9);}
.ter-line{position:absolute; left:var(--gutter); bottom:clamp(20px,4vh,42px); z-index:6; max-width:560px;}
.ter-line p{font-family:var(--serif); font-style:italic; font-size:clamp(17px,1.7vw,25px); line-height:1.45; color:var(--bone-2); text-shadow:0 1px 20px rgba(8,12,14,.9);}
.ter-hint{
  position:absolute; right:var(--gutter); bottom:clamp(20px,4vh,42px); z-index:6;
  color:var(--haze); border:1px solid rgba(231,234,228,.2); padding:9px 14px; background:rgba(8,12,14,.5); backdrop-filter:blur(3px);
}
#terPins{position:absolute; inset:0; z-index:5; pointer-events:none;}
.tpin{position:absolute; transform:translate(-50%,-100%); opacity:0; transition:opacity .6s; pointer-events:auto; cursor:pointer; text-align:center;}
.tpin.on{opacity:1;}
.tpin i{
  display:block; width:9px; height:9px; margin:0 auto; border-radius:50%;
  background:var(--oxide-bright); box-shadow:0 0 12px 3px rgba(224,94,32,.55), 0 0 40px 8px rgba(224,94,32,.2);
}
.tpin.minor i{background:var(--haze); box-shadow:none; width:7px; height:7px;}
.tpin b{
  display:block; font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bone); text-shadow:0 1px 12px rgba(8,12,14,.95); margin-bottom:7px; white-space:nowrap;
}
.tpin:hover i{transform:scale(1.5);}
#terCard{
  position:absolute; left:var(--gutter); top:50%; transform:translateY(-50%); z-index:7;
  width:min(330px,74vw); background:rgba(10,15,18,.82); backdrop-filter:blur(6px);
  border:1px solid rgba(231,234,228,.18); padding:20px 22px; opacity:0; pointer-events:none; transition:opacity .4s;
}
#terCard.on{opacity:1;}
#terCard h4{font-family:var(--display); font-stretch:114%; font-weight:740; text-transform:uppercase; font-size:18px; color:var(--bone); margin-bottom:8px;}
#terCard p{color:var(--bone-2); font-size:14px; line-height:1.6;}
#terCard .mono{color:var(--flame); margin-bottom:6px;}
.ter-static{display:none; padding:0 var(--gutter) 80px;}
.ter-fallback .ter-static{display:block;}
.ter-fallback .ter-hint{display:none;}
.ter-static ul{list-style:none; max-width:760px; border-top:1px solid rgba(231,234,228,.16);}
.ter-static li{display:grid; grid-template-columns:170px 1fr; gap:20px; padding:14px 0; border-bottom:1px solid rgba(231,234,228,.12);}
.ter-static li b{font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--flame);}
.ter-static li p{color:var(--bone-2); font-size:15px;}
@media(max-width:760px){.ter-copy{max-width:76vw;} .ter-line{max-width:60vw;} .ter-static li{grid-template-columns:1fr; gap:4px;}}

/* two lights variant */
.lights.two{justify-content:center; gap:clamp(60px,18vw,260px); margin-bottom:6px;}
.lights.two .light{flex:0 0 auto; width:min(300px,38vw);}
.lights.two .light em{white-space:normal; width:280px; max-width:36vw; line-height:1.4;}
@media(max-width:860px){.lights.two .light{height:120px;} .lights.two .light em{display:block; font-size:12.5px;}}

/* memorial portraits */
.vic-duo{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:clamp(50px,9vh,100px); max-width:1080px; margin-left:auto; margin-right:auto;}
.vic-duo figure img{height:360px; width:100%; object-fit:cover; object-position:center 25%;}
.vic-duo figcaption{font-family:var(--serif); font-style:italic; font-size:15px; color:var(--dust); margin-top:12px; text-align:left;}
.vic-third{max-width:760px; margin:clamp(30px,5vh,54px) auto 0; color:var(--bone-2); font-style:italic; font-size:clamp(15px,1.3vw,19px); line-height:1.7;}
@media(max-width:860px){.vic-duo{grid-template-columns:1fr;} .vic-duo figure img{height:280px;}}

/* rainbow beat */
.rainbow-beat{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:4vw; align-items:center; margin-top:clamp(50px,8vh,90px);}
.rainbow-beat .serif-lg{max-width:30ch;}
@media(max-width:900px){.rainbow-beat{grid-template-columns:1fr;}}

/* closing lights overlay */
.close-lights{position:absolute; inset:0; z-index:4; pointer-events:none;}
.close-lights i{
  position:absolute; width:8px; height:8px; border-radius:50%; background:var(--flame);
  box-shadow:0 0 18px 5px rgba(235,166,96,.65), 0 0 80px 20px rgba(235,166,96,.22);
}
.close-lights i:nth-child(1){left:41%; top:56%;}
.close-lights i:nth-child(2){left:59%; top:52%;}

/* access chips */
.chip.obt{color:var(--oxide-bright); border-color:var(--oxide-bright); font-weight:500;}
.chip.pre{color:#a8743d;}