/* ============================================================
   THE DARKROOM — production
   Two worlds, one room: [data-theme="night"] is the darkroom,
   [data-theme="day"] is the same line strung out in golden hour.
   body background-color is driven per-frame by JS (the hour
   moves with scroll, inside the active world).
   ============================================================ */
:root{
  --font-display:"Fraunces",Georgia,serif;
  --font-body:"Newsreader",Georgia,serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --font-pencil:"Caveat",cursive;
  --measure:42rem;
}
html[data-theme="night"]{
  --text:#F4EDE1; --text-soft:#BCAB97; --text-faint:#7E6F5E;
  --accent:#E89B4B; --accent-2:#FFC382; --pencil:#E0603C;
  --line:rgba(244,237,225,.12);
  --card:rgba(34,26,20,.82); --card-2:#2C211A;
  --bg-fallback:#211711;
  --veil:rgba(12,8,5,.86);
  --grain-op:.07;
  --pool-1:rgba(232,155,75,.13); --pool-2:rgba(224,96,60,.07);
  --nav-scrim:rgba(24,16,11,.82); --nav-scrim-0:rgba(24,16,11,0);
}
html[data-theme="day"]{
  --text:#2B2420; --text-soft:#5A4F45; --text-faint:#8A7A66;
  --accent:#B97F35; --accent-2:#A87832; --pencil:#C24A28;
  --line:rgba(43,36,32,.16);
  --card:rgba(244,237,225,.78); --card-2:#EDE2CC;
  --bg-fallback:#F4EDE1;
  --veil:rgba(43,30,18,.55);
  --grain-op:.05;
  --pool-1:rgba(255,214,150,.30); --pool-2:rgba(232,176,96,.16);
  --nav-scrim:rgba(244,237,225,.86); --nav-scrim-0:rgba(244,237,225,0);
}

*,*::before,*::after{ box-sizing:border-box; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--bg-fallback);
  color:var(--text);
  font-family:var(--font-body);
  font-size:1.1rem; line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--accent); color:var(--bg-fallback); }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:2px; }
img{ display:block; max-width:100%; height:auto; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; padding:0; }
kbd{ font-family:var(--font-mono); font-size:.92em; }

/* theme switch: colour properties ease for the flip (body bg is JS-lerped) */
.theming, .theming *{
  transition:color .35s ease, border-color .35s ease, background-color .35s ease !important;
}

/* skip link */
.skip{
  position:fixed; top:-100px; left:18px; z-index:200;
  font-family:var(--font-mono); font-size:.8rem;
  background:var(--card-2); color:var(--text);
  padding:.6rem 1rem; border-radius:6px; text-decoration:none;
  transition:top .2s;
}
.skip:focus-visible{ top:14px; }

/* atmosphere */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(95vmax 70vmax at 82% -8%, var(--pool-1), transparent 60%),
    radial-gradient(80vmax 65vmax at -10% 110%, var(--pool-2), transparent 55%);
}
.grain{
  position:fixed; inset:0; z-index:40; pointer-events:none;
  opacity:var(--grain-op); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
#gl{ position:fixed; inset:0; z-index:0; width:100%; height:100%; display:block; }

main{ position:relative; z-index:10; }

/* ============ NAV ============ */
nav.top{
  position:fixed; top:0; left:0; right:0; z-index:80;
  padding-bottom:1.5rem; pointer-events:none;
  background:linear-gradient(180deg, var(--nav-scrim) 0%, var(--nav-scrim) 38%, var(--nav-scrim-0) 100%);
}
.top__in{
  pointer-events:auto;
  display:flex; align-items:center; gap:1.6rem;
  padding:.95rem 2rem;
  font-family:var(--font-mono); font-size:.8rem;
}
.brand{
  font-family:var(--font-display); font-size:1.1rem; font-weight:600;
  text-decoration:none; margin-right:auto;
}
.brand .dot{ color:var(--accent); }
.top__link{ color:var(--text-soft); text-decoration:none; transition:color .25s; }
.top__link:hover{ color:var(--accent); }
.top__btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:30px; border-radius:6px;
  color:var(--text-soft); transition:color .25s, background-color .25s;
}
.top__btn:hover{ color:var(--accent); background:var(--card); }
.top__btn .ico{ width:17px; height:17px; }
html[data-theme="night"] .ico--moon{ display:none; }
html[data-theme="day"] .ico--sun{ display:none; }

/* ============ HERO ============ */
.hero{
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding:14vh 7vw 8vh; position:relative;
}
.hero__grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:4rem;
  align-items:center; max-width:1240px; margin:0 auto; width:100%;
}
.eyebrow{
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.16em;
  color:var(--accent); margin:0 0 1.3rem;
}
.hero h1{
  font-family:var(--font-display); font-weight:560;
  font-size:clamp(2.9rem,5.8vw,5.2rem); line-height:1.04;
  letter-spacing:-.01em; margin:0 0 1.3rem;
}
.hero h1 em{ font-style:italic; color:var(--accent-2); }
html[data-theme="day"] .hero h1 em{ color:var(--accent); }
.typeline{
  font-family:var(--font-mono); font-size:.92rem; color:var(--text-soft);
  min-height:1.6em; margin:0 0 2.2rem;
}
.caret{
  display:inline-block; width:.55em; border-bottom:2px solid var(--accent);
  transform:translateY(-2px); animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }
.hero__cta{ display:flex; gap:1.1rem; flex-wrap:wrap; align-items:center; }
.btn{
  font-family:var(--font-mono); font-size:.85rem; text-decoration:none;
  padding:.8rem 1.5rem; border-radius:999px; display:inline-flex; align-items:center;
  transition:background-color .25s, color .25s, border-color .25s;
}
.btn--amber{ background:var(--accent); color:var(--bg-fallback); }
.btn--amber:hover{ background:var(--accent-2); }
html[data-theme="night"] .btn--amber{ color:#181210; }
html[data-theme="day"] .btn--amber{ color:#F8F2E5; }
.btn--ghost{ border:1px solid var(--line); color:var(--text-soft); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }
.hero__cue{
  position:absolute; bottom:3.4vh; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.3em;
  color:var(--text-faint); animation:cue 2.6s ease-in-out infinite;
}
@keyframes cue{ 50%{ transform:translate(-50%,6px); opacity:.5; } }

/* status board */
.status{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  font-family:var(--font-mono); font-size:.84rem;
  backdrop-filter:blur(5px);
  box-shadow:0 30px 60px rgba(0,0,0,.25);
  max-width:430px; justify-self:end; width:100%;
}
html[data-theme="day"] .status{ box-shadow:0 24px 50px rgba(90,60,30,.16); }
.status__bar{
  display:flex; align-items:center; gap:.45rem; padding:.65rem .9rem;
  border-bottom:1px solid var(--line); color:var(--text-faint); font-size:.74rem;
}
.status__bar i{ width:9px; height:9px; border-radius:50%; background:var(--card-2); border:1px solid var(--line); }
.status__bar i:first-child{ background:var(--pencil); border-color:transparent; }
.status__rows{ padding:1rem 1.1rem 1.15rem; display:grid; gap:.55rem; }
.status__row{ display:grid; grid-template-columns:8em 1fr; gap:1em; }
.status__row span{ color:var(--text-faint); }
.status__row b{ font-weight:500; }
.pulse i{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#7CB069; margin-right:.55em;
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{ 50%{ opacity:.3; } }

/* ============ THE LINE ============ */
.line-track{ height:460vh; position:relative; }
.line-pin{ position:sticky; top:0; height:100vh; pointer-events:none; }
.line-pin .label{ position:absolute; top:13vh; left:7vw; margin:0; }
.line-hint{
  position:absolute; top:calc(13vh + 2em); left:7vw;
  font-family:var(--font-mono); font-size:.78rem; color:var(--text-faint); margin:0;
}
.line-cap{
  position:absolute; bottom:9vh; left:50%; transform:translateX(-50%);
  text-align:center; width:min(640px,86vw);
}
.line-cap .idx{
  font-family:var(--font-mono); font-size:.74rem; color:var(--accent);
  letter-spacing:.2em; display:block; margin-bottom:.6rem; min-height:1.2em;
}
.line-cap .txt{
  font-family:var(--font-body); font-style:italic;
  font-size:clamp(1.2rem,2.2vw,1.6rem);
  transition:opacity .45s ease; display:block;
}

/* ============ FILM STRIP ============ */
.stripwrap{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; padding:.7rem 0; position:relative; z-index:10;
  background:var(--card);
}
.strip{ display:flex; gap:.55rem; width:max-content; animation:filmroll var(--dur,60s) linear infinite; }
.strip__seq{ display:flex; gap:.55rem; flex:0 0 auto; }
.stripwrap:hover .strip{ animation-play-state:paused; }
/* --shift is set by JS to exactly one sequence width (incl. gap) for a seamless loop */
@keyframes filmroll{ to{ transform:translateX(var(--shift,-50%)); } }
.strip .cell{
  width:104px; height:70px; flex:0 0 auto; overflow:hidden;
  border-radius:3px; position:relative;
}
.strip .cell::before, .strip .cell::after{
  content:""; position:absolute; left:0; right:0; height:7px; z-index:2;
  background-image:radial-gradient(circle at 7px 50%, var(--bg-fallback) 2.4px, transparent 2.6px);
  background-size:14px 7px;
}
.strip .cell::before{ top:0; } .strip .cell::after{ bottom:0; }
.strip .cell img{ width:100%; height:100%; object-fit:cover; }

/* ============ SECTIONS ============ */
.section{ padding:16vh 7vw; max-width:1240px; margin:0 auto; position:relative; }
.label{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.14em;
  color:var(--accent); margin:0 0 1rem;
}
.title{
  font-family:var(--font-display); font-weight:560;
  font-size:clamp(2rem,3.6vw,3rem); line-height:1.12;
  letter-spacing:-.01em; margin:0 0 1.2rem;
}
.title em{ font-style:italic; color:var(--accent-2); }
html[data-theme="day"] .title em{ color:var(--accent); }
.subtitle{ color:var(--text-soft); max-width:var(--measure); margin:0 0 2.4rem; }
.subtitle--center{ margin-left:auto; margin-right:auto; }

/* ============ CONTACT SHEET ============ */
.filters{ display:flex; gap:.7rem; margin-bottom:2.6rem; }
.chip{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em;
  border:1px solid var(--line); border-radius:999px; padding:.5rem 1.15rem;
  color:var(--text-soft); transition:all .25s;
}
.chip:hover{ border-color:var(--accent); color:var(--accent); }
.chip.on{ background:var(--accent); border-color:var(--accent); color:var(--bg-fallback); }
html[data-theme="night"] .chip.on{ color:#181210; }
html[data-theme="day"] .chip.on{ color:#F8F2E5; }

/* JS distributes prints into .sheet__col wrappers (shortest column
   first) so they read row-by-row; --cols is read by gallery.js */
.sheet{ --cols:3; display:grid; grid-template-columns:repeat(var(--cols),1fr); gap:0 1.8rem; align-items:start; }
.sheet__col{ min-width:0; }
.print{
  margin:0 0 2rem; position:relative; cursor:pointer;
  transform:rotate(var(--tilt,0deg)) translateY(26px); opacity:0;
  transition:transform .8s cubic-bezier(.2,.7,.2,1), opacity .8s ease;
}
.print.shown{ transform:rotate(var(--tilt,0deg)) translateY(0); opacity:1; }
.print.hide{ display:none; }
.print__imgwrap{
  position:relative; overflow:hidden; border-radius:3px;
  background:var(--card-2);
  box-shadow:0 14px 34px rgba(0,0,0,.3);
}
html[data-theme="day"] .print__imgwrap{ box-shadow:0 14px 30px rgba(90,60,30,.18); }
.print .ph{ width:100%; }
html[data-theme="night"] .print .ph{
  filter:sepia(.55) brightness(.34) contrast(.92);
  transition:filter 1.5s ease;
}
html[data-theme="night"] .print.developed .ph{ filter:none; }
.print__bath{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(201,124,51,.5), rgba(110,55,22,.62));
  mix-blend-mode:multiply; opacity:1; transition:opacity 1.7s ease;
}
html[data-theme="night"] .print.developed .print__bath{ opacity:0; }
html[data-theme="day"] .print .ph{ filter:none; }
html[data-theme="day"] .print__bath{ opacity:0; transition:none; }
.print:hover .print__imgwrap{ outline:1px solid var(--accent); outline-offset:3px; }
.print .mark{
  position:absolute; inset:-4% -5% auto; width:110%; height:104%;
  pointer-events:none; overflow:visible;
}
.print .mark path{
  fill:none; stroke:var(--pencil); stroke-width:3px; stroke-linecap:round;
  opacity:.9;
}
.print .mark text{
  font-family:var(--font-pencil); font-size:34px; fill:var(--pencil);
}
.print__meta{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.04em;
  color:var(--text-faint); margin-top:.7rem;
}
.print__meta b{ color:var(--accent); font-weight:500; }

/* ============ WHY ============ */
.interlude{ text-align:left; }
.manifesto{ max-width:760px; margin:0 auto; padding:6vh 0 0; }
.interlude .label{ text-align:left; max-width:760px; margin-left:auto; margin-right:auto; }
#manifesto{
  font-size:clamp(1.45rem,2.6vw,2.05rem); line-height:1.62; margin:0;
}
#manifesto .w{ color:var(--text); opacity:.16; transition:opacity .45s ease; }
#manifesto .w.on{ opacity:1; }
.distilled{
  margin:18vh auto 4vh; text-align:center;
  font-family:var(--font-display); font-style:italic; font-weight:480;
  font-size:clamp(1.7rem,3vw,2.5rem); color:var(--accent-2);
}
html[data-theme="day"] .distilled{ color:var(--accent-2); }

/* ============ ABOUT ============ */
.about{ display:grid; grid-template-columns:1.05fr .95fr; gap:5rem; align-items:start; }
.about__text p{ color:var(--text-soft); max-width:34em; margin:0 0 1.2rem; }
.about__text .title{ font-size:clamp(1.9rem,3.2vw,2.6rem); }
.gear{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  font-family:var(--font-mono); font-size:.84rem; overflow:hidden; margin-top:3.6rem;
  backdrop-filter:blur(5px);
}
.gear__bar{
  padding:.62rem 1rem; border-bottom:1px solid var(--line);
  color:var(--accent); font-size:.76rem;
}
.gear__rows{ padding:1rem 1.1rem 1.15rem; display:grid; gap:.55rem; }
.gear__row{ display:grid; grid-template-columns:6.4em 1fr; gap:1em; }
.gear__row span{ color:var(--text-faint); }
.gear__row b{ font-weight:500; }

/* ============ CONTACT ============ */
.contact{ text-align:center; }
.contact .label{ text-align:center; }
.copybtn{
  font-family:var(--font-mono); font-size:.95rem;
  border:1px solid var(--line); border-radius:999px;
  padding:.9rem 1.8rem; display:inline-flex; gap:1.2rem; align-items:baseline;
  transition:border-color .3s, background-color .3s;
}
.copybtn:hover{ border-color:var(--accent); background:var(--card); }
.copybtn .hint{ font-size:.68rem; letter-spacing:.14em; color:var(--text-faint); }
.socials{ display:flex; gap:2.2rem; justify-content:center; margin-top:2.4rem; font-family:var(--font-mono); font-size:.8rem; }
.socials a{ color:var(--text-soft); text-decoration:none; transition:color .25s; }
.socials a:hover{ color:var(--accent); }
.ps{
  font-family:var(--font-pencil); font-size:1.4rem; color:var(--pencil);
  margin-top:3.2rem; transform:rotate(-1.2deg);
}

/* ============ FOOTER ============ */
footer{
  position:relative; z-index:10;
  padding:2.6rem 7vw 3rem; display:flex; justify-content:space-between;
  align-items:center; gap:1rem; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:.74rem; color:var(--text-faint);
  border-top:1px solid var(--line);
}
footer a{ color:var(--text-faint); }
footer a:hover{ color:var(--accent); }
footer .lang i{ font-style:normal; margin:0 .3em; }
footer .lang button{ color:var(--text-faint); }
footer .lang button[aria-pressed="true"]{ color:var(--accent); }

/* ============ LIGHTBOX ============ */
.lb{
  position:fixed; inset:0; z-index:120; background:var(--veil);
  display:none; align-items:center; justify-content:center; padding:4vmin;
  backdrop-filter:blur(6px);
}
.lb.on{ display:flex; }
.lb__card{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);
  gap:0; max-width:1040px; width:100%; max-height:88vh;
  background:var(--card-2); border:1px solid var(--line); border-radius:10px;
  overflow:hidden;
}
.lb__imgwrap{ background:#0E0A07; display:flex; align-items:center; justify-content:center; min-height:0; }
.lb__imgwrap img{ width:100%; height:100%; max-height:88vh; object-fit:contain; }
.lb__panel{ padding:1.8rem 1.7rem; overflow-y:auto; }
.lb__cat{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.2em; color:var(--accent);
}
.lb__title{ font-family:var(--font-display); font-weight:560; font-size:1.6rem; margin:.5rem 0 .2rem; }
.lb__loc{ font-family:var(--font-mono); font-size:.76rem; color:var(--text-faint); margin:0 0 1.3rem; }
.lb__exif{
  display:grid; grid-template-columns:1fr 1fr; gap:.5rem 1.2rem;
  font-family:var(--font-mono); font-size:.78rem;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:1rem 0; margin-bottom:1.3rem;
}
.lb__exif div{ display:flex; justify-content:space-between; gap:.6rem; }
.lb__exif span{ color:var(--text-faint); }
.lb__story .memory{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); margin:0 0 .5rem;
}
.lb__story .lead{ font-family:var(--font-display); font-style:italic; font-size:1.12rem; margin:0 0 .6rem; }
.lb__story .text{ color:var(--text-soft); font-size:.98rem; margin:0; }
.lb__nav{
  font-family:var(--font-display); font-size:2.4rem; color:var(--text-soft);
  padding:0 1.6vmin; transition:color .25s; z-index:2;
}
.lb__nav:hover{ color:var(--accent); }
.lb__close{
  position:absolute; top:18px; right:22px;
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.12em;
  color:var(--text-soft); border:1px solid var(--line); border-radius:6px; padding:.4rem .7rem;
}
.lb__close:hover{ color:var(--accent); border-color:var(--accent); }
.lb__count{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:.74rem; color:var(--text-faint); letter-spacing:.18em;
}
html[data-theme="day"] .lb__imgwrap{ background:#E8DCC4; }
html[data-theme="day"] .lb__card{ background:#F6EFE1; }

/* ============ COMMAND PALETTE ============ */
.veil{
  position:fixed; inset:0; z-index:150; background:var(--veil);
  display:none; align-items:flex-start; justify-content:center; padding-top:16vh;
  backdrop-filter:blur(6px);
}
.veil.on{ display:flex; }
.palette{
  width:min(560px,92vw); background:var(--card-2);
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.4);
}
#cmd-input{
  width:100%; background:none; border:none; outline:none;
  color:var(--text); font-family:var(--font-mono); font-size:.95rem;
  padding:1.05rem 1.2rem; border-bottom:1px solid var(--line);
}
#cmd-input::placeholder{ color:var(--text-faint); }
#cmd-list{
  list-style:none; margin:0; padding:.45rem; max-height:46vh; overflow-y:auto;
}
#cmd-list li{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-family:var(--font-mono); font-size:.84rem;
  padding:.65rem .8rem; border-radius:7px; cursor:pointer; color:var(--text-soft);
}
#cmd-list li.sel{ background:var(--card); color:var(--text); }
#cmd-list li .tag{ font-size:.66rem; letter-spacing:.12em; color:var(--text-faint); }
#cmd-list li.empty{ color:var(--text-faint); }
.palette__foot{
  display:flex; gap:1.6rem; padding:.6rem 1.2rem;
  border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.68rem; color:var(--text-faint);
}
.palette__foot kbd{
  border:1px solid var(--line); border-radius:4px; padding:.05rem .35rem; margin-right:.45em;
}

/* ============ REVEALS ============ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .85s ease var(--d,0ms), transform .85s cubic-bezier(.2,.7,.2,1) var(--d,0ms); }
.reveal.in{ opacity:1; transform:none; }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  .caret,.pulse i,.hero__cue,.strip{ animation:none !important; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .print{ transition:none; }
  html[data-theme="night"] .print .ph{ transition:none; }
  .print__bath{ transition:none; }
}

/* ============ RESPONSIVE ============ */
/* dynamic viewport units where supported — stops the mobile URL bar fighting 100vh */
@supports (height: 100svh){
  .hero{ min-height:100svh; }
  .line-pin{ height:100svh; }
}

/* no command palette on touch devices */
@media (hover: none) and (pointer: coarse){
  #cmdk-btn, #cmdk-btn2{ display:none; }
}

@media (max-width: 980px){
  .hero__grid{ grid-template-columns:1fr; gap:3rem; }
  .status{ justify-self:start; }
  .sheet{ --cols:2; }
  .about{ grid-template-columns:1fr; gap:2.5rem; }
  .gear{ margin-top:0; }
  .lb__card{ grid-template-columns:1fr; overflow-y:auto; }
  .lb__imgwrap img{ max-height:46vh; }
}
@media (max-width: 700px){
  nav.top{
    background:var(--card);
    backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
    border-bottom:1px solid var(--line);
    padding-bottom:0;
  }
  .top__in{
    padding:.7rem 1.05rem; gap:1rem;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .top__in::-webkit-scrollbar{ display:none; }
  .top__link{ font-size:.74rem; flex:0 0 auto; }
  .top__btn{ min-width:38px; height:34px; }

  .hero{ padding:15vh 6vw 11vh; }
  .hero h1{ font-size:clamp(2.35rem,10.5vw,2.9rem); }
  .typeline{ font-size:.84rem; }
  .status{ font-size:.8rem; }
  .status__row{ grid-template-columns:7em 1fr; }

  .line-pin .label{ left:6vw; right:6vw; }
  .line-hint{ left:6vw; right:6vw; }
  .line-cap{ bottom:7vh; }

  .sheet{ --cols:1; }
  .print{ margin-bottom:2.6rem; }
  .section{ padding:13vh 6vw; }
  .filters{ flex-wrap:wrap; }
  .chip{ padding:.6rem 1.2rem; }

  .socials{ gap:1.6rem; flex-wrap:wrap; }
  footer{ justify-content:center; text-align:center; }

  /* lightbox: full-screen sheet, controls overlaid instead of squeezing the card */
  .lb{ padding:0; }
  .lb__card{ max-height:100%; height:100%; border-radius:0; border:none; grid-template-rows:auto 1fr; }
  .lb__imgwrap img{ max-height:44vh; }
  .lb__panel{ padding:1.4rem 1.3rem 5.6rem; }
  .lb__nav{
    position:absolute; bottom:14px; z-index:5; width:48px; height:48px;
    display:flex; align-items:center; justify-content:center; padding:0;
    font-size:1.9rem; line-height:1;
    background:var(--card-2); border:1px solid var(--line); border-radius:999px;
  }
  .lb__prev{ left:16px; }
  .lb__next{ right:16px; }
  .lb__close{ top:12px; right:14px; background:var(--card-2); }
  .lb__count{ bottom:30px; }
}