/* ===================================================================
   OBSCURA — Vintage Camera Emporium
   A 90s-revival mockup. CRT filter + glitch + beveled OS chrome.
   =================================================================== */

:root{
  --bg:        #0c0a09;
  --bg-2:      #15110d;
  --panel:     #1c1712;
  --paper:     #e9dcc1;
  --ink:       #2c2114;
  --cream:     #f1e6cd;
  --cream-dim: #ad9d7c;
  --amber:     #ffb03c;
  --amber-hi:  #ffe2a6;
  --amber-lo:  #7a4710;
  --green:     #4cf2a0;
  --cyan:      #4fd6e6;
  --magenta:   #ff2f80;
  --grid-line: rgba(255,176,60,.10);

  --mono: 'Space Mono', ui-monospace, 'Courier New', monospace;
  --term: 'VT323', 'Space Mono', monospace;
  --pixel:'Press Start 2P', monospace;
  --lh-pixel: 1.1;  /* tight line-height for Press Start 2P display headings */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--cream);
  font-family:var(--mono);
  font-size:16px;
  line-height:1.5;
  overflow-x:hidden;
  cursor:crosshair;
}
body.is-booting{ overflow:hidden; }

a{ color:inherit; text-decoration:none; }
img,svg{ display:block; }
::selection{ background:var(--magenta); color:#000; }

/* ====================== BOOT / LOADER ====================== */
.boot{
  position:fixed; inset:0; z-index:9999;
  background:radial-gradient(120% 120% at 50% 40%, #061008 0%, #020402 70%, #000 100%);
  display:grid; place-items:center;
  font-family:var(--term);
  color:var(--green);
  transition:opacity .5s ease, visibility .5s;
}
.boot.is-done{ opacity:0; visibility:hidden; }
.boot__inner{ width:min(620px,86vw); }
.boot__log{
  font-size:21px; line-height:1.35; margin:0 0 18px;
  white-space:pre-wrap; text-shadow:0 0 8px rgba(76,242,160,.55);
  min-height:230px;
}
.boot__log b{ color:var(--amber); }
.boot__bar{
  height:18px; border:1px solid var(--green);
  background:#020; padding:2px; box-shadow:0 0 12px rgba(76,242,160,.3);
}
.boot__bar span{
  display:block; height:100%; width:0%;
  background:repeating-linear-gradient(90deg,var(--green) 0 8px,transparent 8px 12px);
  transition:width .12s linear;
}
.boot__hint{ font-size:18px; opacity:.6; margin-top:14px; letter-spacing:1px; }

/* ====================== CRT FILTER ====================== */
.crt{ position:fixed; inset:0; z-index:9000; pointer-events:none; }
.crt > *{ position:absolute; inset:0; }
.crt__scanlines{
  background:repeating-linear-gradient(
    to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.28) 2px 4px);
  mix-blend-mode:multiply; opacity:.7;
  animation:scan 8s linear infinite;
}
.crt__grain{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  opacity:.07; animation:grain .4s steps(2) infinite;
}
.crt__glow{
  background:radial-gradient(120% 90% at 50% 45%, rgba(255,176,60,.05), transparent 60%);
  mix-blend-mode:screen;
}
.crt__vignette{
  background:radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
}
.crt__flicker{ background:rgba(120,255,200,.02); animation:flicker .15s steps(2) infinite; }
.crt__bezel{
  border-radius:18px;
  box-shadow:inset 0 0 90px 14px rgba(0,0,0,.7), inset 0 0 0 2px rgba(0,0,0,.9);
}
body.crt-off .crt{ display:none; }

@keyframes scan{ from{ background-position:0 0; } to{ background-position:0 4px; } }
@keyframes grain{ 0%{transform:translate(0,0)} 50%{transform:translate(-2%,1%)} 100%{transform:translate(1%,-1%)} }
@keyframes flicker{ 0%{opacity:.5} 100%{opacity:1} }

/* ====================== WINDOW / OS CHROME ====================== */
.window{
  max-width:1180px; margin:14px auto; background:var(--bg);
  border:2px solid #000;
  box-shadow:3px 3px 0 #000, 0 0 0 2px var(--amber-lo), 0 30px 80px rgba(0,0,0,.6);
}
.titlebar{
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(90deg,var(--amber-lo),#2a1605);
  color:var(--amber-hi); font-family:var(--mono); font-weight:700; font-size:13px;
  padding:5px 8px; border-bottom:2px solid #000; letter-spacing:.5px;
}
.titlebar__btns{ display:flex; gap:4px; }
.tb-btn{
  width:20px; height:18px; display:grid; place-items:center; font-style:normal;
  font-size:11px; background:var(--amber); color:#1a120a;
  border-top:2px solid var(--amber-hi); border-left:2px solid var(--amber-hi);
  border-right:2px solid #000; border-bottom:2px solid #000;
}
.tb-btn--x{ background:var(--magenta); color:#fff; }

.menubar{
  display:flex; align-items:center; gap:14px;
  background:#cdbf9b; color:#1a140c; font-size:13px; font-weight:700;
  padding:4px 10px; border-bottom:2px solid #000;
}
.menubar__item u{ text-underline-offset:2px; }
.menubar__url{
  margin-left:auto; background:#fff; color:#222; font-weight:400;
  padding:2px 8px; border:2px inset #888; max-width:340px; overflow:hidden;
  white-space:nowrap; text-overflow:ellipsis; font-size:12px;
}
.menubar__rec{ display:flex; align-items:center; gap:5px; color:#a01030; font-size:12px; }
.menubar__rec i{ width:9px; height:9px; border-radius:50%; background:#e0203a; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:.15 } }

/* ====================== TICKER ====================== */
.ticker{
  background:var(--magenta); color:#0a0a0a; border-bottom:2px solid #000;
  overflow:hidden; white-space:nowrap; font-weight:700; font-size:14px;
}
.ticker__track{ display:inline-flex; animation:marq 24s linear infinite; }
.ticker__track span{ padding:5px 0; }
@keyframes marq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ====================== NAV ====================== */
.nav{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 22px; background:var(--bg-2); border-bottom:2px solid var(--amber-lo);
  position:sticky; top:0; z-index:50; transition:opacity .3s ease;
}
/* recede the sticky nav while #develop is pinned so it can't paint a band
   across the signature moment (CRT overlay at z-9000 still sits on top) */
.in-darkroom .nav{ opacity:0; pointer-events:none; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand__mark{ color:var(--amber); font-size:22px; animation:spin 6s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.brand__name{ font-family:var(--pixel); font-size:18px; color:var(--cream); letter-spacing:1px; }
.nav__links{ display:flex; gap:8px; flex-wrap:wrap; }
.navlink{
  font-family:var(--term); font-size:21px; padding:2px 12px; color:var(--cream-dim);
  border:1px solid transparent; transition:.15s; letter-spacing:1px;
}
.navlink:hover{ color:#000; background:var(--amber); border-color:#000; box-shadow:2px 2px 0 #000; }
.navlink--cart{ color:var(--green); border-color:var(--green); }
.navlink--cart b{ color:var(--amber); }

/* ====================== BUTTONS ====================== */
.btn{
  display:inline-block; font-family:var(--mono); font-weight:700; font-size:14px;
  padding:11px 20px; color:#1a120a; background:var(--amber); letter-spacing:1px;
  border-top:3px solid var(--amber-hi); border-left:3px solid var(--amber-hi);
  border-right:3px solid var(--amber-lo); border-bottom:3px solid var(--amber-lo);
  box-shadow:3px 3px 0 #000; transition:transform .08s, box-shadow .08s; cursor:pointer;
}
.btn:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 #000; }
.btn:active{
  transform:translate(2px,2px); box-shadow:1px 1px 0 #000;
  border-top:3px solid var(--amber-lo); border-left:3px solid var(--amber-lo);
  border-right:3px solid var(--amber-hi); border-bottom:3px solid var(--amber-hi);
}
.btn--big{ font-size:16px; padding:14px 26px; }
.btn--ghost{ background:transparent; color:var(--cyan); border-color:var(--cyan); box-shadow:3px 3px 0 #000; }
.btn--ghost:hover{ background:var(--cyan); color:#000; }
.btn--ink{ background:var(--ink); color:var(--paper); border-color:#000; margin-top:14px; }

/* ====================== GLITCH TEXT ====================== */
.glitch{ position:relative; display:inline-block; }
.glitch::before,.glitch::after{
  content:attr(data-text); position:absolute; inset:0; pointer-events:none;
  clip-path:inset(0 0 0 0);
}
.glitch::before{ color:var(--magenta); transform:translate(0); mix-blend-mode:screen; }
.glitch::after{ color:var(--cyan); transform:translate(0); mix-blend-mode:screen; }
.glitch:hover::before{ animation:gl-a .5s steps(2) infinite; }
.glitch:hover::after{ animation:gl-b .5s steps(2) infinite; }
@keyframes gl-a{ 0%{transform:translate(-3px,1px)} 50%{transform:translate(2px,-1px)} 100%{transform:translate(-1px,2px)} }
@keyframes gl-b{ 0%{transform:translate(3px,-1px)} 50%{transform:translate(-2px,1px)} 100%{transform:translate(1px,-2px)} }

/* ====================== HERO ====================== */
.hero{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:20px;
  padding:60px 34px 70px; background:var(--bg-2);
  border-bottom:2px solid var(--amber-lo);
}
.hero__grid{
  position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(110% 80% at 50% 50%, #000 30%, transparent 75%);
}
.hero__stars{ position:absolute; inset:0; pointer-events:none; }
.hero__stars i{ position:absolute; width:2px; height:2px; background:var(--cream); opacity:.5; animation:tw 3s steps(2) infinite; }
@keyframes tw{ 50%{ opacity:.05 } }

.hero__copy{ position:relative; z-index:2; }
.hero__eyebrow{ font-family:var(--term); font-size:20px; color:var(--green); letter-spacing:2px; margin:0 0 6px; }
.hero__title{
  font-family:var(--pixel); font-size:clamp(30px,5.4vw,62px); line-height:var(--lh-pixel);
  margin:0 0 18px; color:var(--cream); text-shadow:4px 4px 0 var(--amber-lo);
}
.hero__sub{
  font-size:17px; color:var(--cream-dim); max-width:46ch; min-height:3.2em;
  margin:0 0 26px; border-left:3px solid var(--magenta); padding-left:12px;
}
.hero__sub .caret{ color:var(--amber); animation:blink 1s steps(1) infinite; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px; }
.hero__meta{ font-family:var(--term); font-size:18px; color:var(--cream-dim); letter-spacing:1px; }

.hero__cam{ position:relative; z-index:2; display:grid; place-items:center; }
.cam--hero{ width:min(460px,86%); height:auto; display:block; cursor:pointer;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.6)) drop-shadow(0 2px 4px rgba(0,0,0,.5));
  animation:bob 5s ease-in-out infinite; }
@keyframes bob{ 50%{ transform:translateY(-10px) rotate(-1deg) } }
.hero__cam-tag{ font-family:var(--term); font-size:18px; color:var(--amber); margin-top:6px; letter-spacing:2px; }

/* camera svg styling */
.cam .body{ fill:#241c14; stroke:var(--cream); stroke-width:2.5; }
.cam .dial{ fill:#100c08; stroke:var(--amber); stroke-width:2; }
.cam .lens{ fill:none; stroke:var(--cream); stroke-width:2.5; }
.cam .glass{ fill:var(--cyan); stroke:var(--cream); stroke-width:2; opacity:.85; }
.cam .dot{ fill:var(--cream); }
.cam .led{ fill:var(--magenta); }
.cam .blink{ animation:lensblink 4s steps(1) infinite; }
@keyframes lensblink{ 92%{ fill:var(--magenta) } }

/* ====================== STRIP DIVIDER ====================== */
.strip{ background:var(--amber); color:#1a120a; overflow:hidden; white-space:nowrap; border-bottom:2px solid #000; }
.strip__track{ display:inline-flex; font-family:var(--term); font-size:22px; letter-spacing:2px; animation:marq 30s linear infinite; }
.strip__track span{ padding:6px 26px; }

/* ====================== SECTION HEAD ====================== */
.section-head{ padding:46px 34px 8px; }
.section-head__title{
  font-family:var(--pixel); font-size:clamp(18px,3vw,30px); color:var(--amber);
  margin:0 0 8px; text-shadow:3px 3px 0 #000;
}
.section-head__note{ font-family:var(--term); font-size:19px; color:var(--cream-dim); margin:0; letter-spacing:1px; }

/* ====================== SHOP GRID ====================== */
.grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  padding:22px 34px 50px;
}
.card{
  position:relative; background:var(--panel); border:2px solid #000;
  box-shadow:4px 4px 0 #000; padding:16px; transition:.18s;
  opacity:0; transform:translateY(26px);
}
.card.in{ opacity:1; transform:none; }
.card:hover{ transform:translate(-2px,-3px); box-shadow:7px 8px 0 var(--amber-lo); }
.card__tag{
  position:absolute; top:10px; right:10px; font-family:var(--term); font-size:16px;
  background:var(--green); color:#001; padding:1px 8px; border:1px solid #000; letter-spacing:1px;
}
.card__tag--rare{ background:var(--magenta); color:#fff; }
.card__shot{
  background:repeating-linear-gradient(45deg,#181310 0 10px,#1d1712 10px 20px);
  border:2px inset #3a2e1f; padding:14px; margin-bottom:14px; aspect-ratio:16/11;
  display:grid; place-items:center; overflow:hidden;
}
.card__shot .cam{ width:78%; transition:transform .2s; }
.card:hover .card__shot .cam{ transform:scale(1.06) rotate(-2deg); }
.card__name{ font-family:var(--term); font-size:26px; color:var(--cream); margin:0; line-height:1; }
.card__meta{ font-size:14px; color:#c3b389; margin:4px 0 12px; letter-spacing:.5px; }
.card__row{ display:flex; justify-content:space-between; align-items:center; }
.card__price{ font-family:var(--pixel); font-size:15px; color:var(--amber); }
.card__add{ font-size:12px; padding:9px 14px; }

/* glitch flash on card image */
.card.glitching .card__shot{ animation:cardglitch .35s steps(2) 2; }
@keyframes cardglitch{ 0%{filter:hue-rotate(0) saturate(1)} 50%{filter:hue-rotate(90deg) saturate(3) contrast(1.4); transform:translateX(3px)} 100%{filter:none} }

/* ====================== WHY / PAPER ====================== */
.why{ padding:30px 34px 56px; }
.paper{
  background:var(--paper); color:var(--ink); border:2px solid #000;
  box-shadow:6px 6px 0 #000; padding:0 0 26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='1' cy='1' r='.6' fill='%23000' opacity='0.05'/%3E%3C/svg%3E");
}
.paper__head{
  display:flex; justify-content:space-between; background:var(--ink); color:var(--paper);
  font-family:var(--mono); font-weight:700; font-size:13px; padding:8px 18px; letter-spacing:1px;
}
.paper__cols{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:26px; padding:26px 26px 0; }
.paper__col h3{ font-family:var(--mono); font-size:15px; margin:18px 0 6px; letter-spacing:.5px; border-bottom:2px solid var(--ink); display:inline-block; }
.paper__col h3:first-child{ margin-top:0; }
.paper__col p{ font-size:14px; line-height:1.6; margin:0; }
.paper__col em{ font-style:italic; background:rgba(0,0,0,.07); }
.paper__col--mid{ display:flex; flex-direction:column; }
.halftone{
  flex:1; min-height:170px; border:2px solid var(--ink);
  background:
    radial-gradient(circle at 30% 30%, #000 0 1px, transparent 2px) 0 0/8px 8px,
    radial-gradient(circle at 30% 30%, #000 0 1px, transparent 2px) 4px 4px/8px 8px,
    linear-gradient(135deg, #d9c79f, #b89a63);
}
.paper__cap{ font-style:italic; font-size:12px; margin-top:8px; opacity:.8; }

/* ====================== STATS ====================== */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:#000;
  border-top:2px solid #000; border-bottom:2px solid #000;
}
.stat{ background:var(--bg-2); padding:30px 16px; text-align:center; }
.stat__num{ display:block; font-family:var(--pixel); font-size:clamp(20px,3vw,34px); color:var(--green); text-shadow:0 0 12px rgba(76,242,160,.4); }
.stat__label{ display:block; font-family:var(--term); font-size:17px; color:var(--cream-dim); margin-top:8px; letter-spacing:1px; }
.stat--visitor{ background:#0a0f0c; }
.odometer{
  display:inline-block; font-family:var(--mono); font-weight:700; font-size:clamp(20px,3vw,30px);
  letter-spacing:6px; color:var(--amber); background:#000; padding:6px 10px;
  border:2px inset #443; box-shadow:0 0 14px rgba(255,176,60,.25);
}

/* ====================== GUESTBOOK ====================== */
.gbform{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:14px 34px 10px; max-width:820px;
}
.field{ display:flex; flex-direction:column; gap:5px; }
.field span{ font-family:var(--term); font-size:18px; color:var(--amber); letter-spacing:1px; }
.field--wide{ grid-column:1 / -1; }
.field input{
  font-family:var(--mono); font-size:14px; padding:11px 12px; color:var(--cream);
  background:#0a0807; border:2px inset #3a2e1f; outline:none;
}
.field input:focus{ border-color:var(--amber); box-shadow:0 0 0 2px rgba(255,176,60,.3); }
.gbform .btn{ grid-column:1 / -1; justify-self:start; }
.gbform__ok{ grid-column:1/-1; color:var(--green); font-family:var(--term); font-size:20px; margin:0; }

.gbwall{ list-style:none; margin:6px 0 0; padding:6px 34px 50px; max-width:820px; }
.gbwall li{ font-size:13px; padding:8px 0; border-bottom:1px dashed #3a2e1f; color:var(--cream-dim); }
.gbwall b{ color:var(--cyan); }
.gbwall span{ color:#cf9b4a; font-size:11px; } /* lifted from --amber-lo for 4.5:1 contrast */

/* ====================== FOOTER ====================== */
.footer{ background:#0a0807; border-top:2px solid var(--amber-lo); }
.footer__cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:24px; padding:36px 34px; }
.footer h4{ font-family:var(--term); font-size:19px; color:var(--amber); margin:0 0 10px; letter-spacing:2px; }
.footer p{ font-size:13px; color:var(--cream-dim); line-height:1.7; }
.footer__cols .brand__name{ font-size:15px; color:var(--cream); display:inline-block; margin-bottom:10px; }
.footer a{ display:block; font-size:13px; color:var(--cream-dim); padding:3px 0; }
.footer a:hover{ color:var(--amber); }
.footer__badges{ display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start; }
.badge{ font-family:var(--mono); font-size:11px; font-weight:700; padding:5px 9px; background:#000; color:var(--green); border:1px solid var(--green); }
.badge--blue{ background:linear-gradient(#3a5fd0,#16236a); color:#fff; border-color:#9bb4ff; }
.webring{ font-family:var(--term); font-size:18px; color:var(--magenta); width:100%; }
.badge--maker{ background:var(--amber); color:#1a120a; border-color:var(--amber-hi); }

/* ---- colophon / build log (craft notes + hire CTA) ---- */
.colophon{ padding-bottom:34px; }
.colophon__sheet{ max-width:760px; margin:0 auto; padding:24px 26px; background:var(--bg-2);
  border:2px solid var(--amber-lo); box-shadow:4px 4px 0 #000; }
.colophon__list{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:12px; }
.colophon__list li{ font-family:var(--mono); font-size:14px; line-height:1.6; color:var(--cream-dim);
  padding-left:22px; position:relative; }
.colophon__list li::before{ content:'▸'; position:absolute; left:0; top:0; color:var(--amber); }
.colophon__list b{ color:var(--cream); }
.colophon__cta{ display:inline-block; }
.colophon__sig{ margin:18px 0 0; font-family:var(--term); font-size:18px; letter-spacing:1px; color:var(--cream-dim); }
/* inline links inside the colophon notes + footer bar (disclosure lines) */
.colophon__list a, .footer__bar a{ text-decoration:underline; color:var(--amber); }
.colophon__list a:hover, .footer__bar a:hover{ color:var(--cream); }
.footer__bar{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  border-top:2px solid #000; padding:12px 34px; font-size:11px; color:var(--cream-dim); letter-spacing:.5px;
}
.footer__const{ color:var(--amber); animation:blink 1.4s steps(1) infinite; }

/* ====================== CRT TOGGLE + TOAST ====================== */
.crt-toggle{
  position:fixed; bottom:16px; right:16px; z-index:9350;
  font-family:var(--mono); font-weight:700; font-size:12px; cursor:pointer;
  display:flex; align-items:center; gap:7px; padding:8px 12px; color:var(--cream);
  background:var(--panel); border:2px solid var(--amber-lo); box-shadow:3px 3px 0 #000;
}
.crt-toggle__led{ width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }
body.crt-off .crt-toggle__led{ background:#444; box-shadow:none; }
.crt-toggle:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; }

.toast{
  position:fixed; bottom:16px; left:50%; transform:translate(-50%,140%);
  z-index:9500; font-family:var(--term); font-size:20px; letter-spacing:1px;
  background:var(--green); color:#001; padding:8px 18px; border:2px solid #000;
  box-shadow:3px 3px 0 #000; transition:transform .3s cubic-bezier(.2,1.3,.4,1);
}
.toast.show{ transform:translate(-50%,0); }

/* ====================== RESPONSIVE ====================== */
@media (max-width:880px){
  .hero{ grid-template-columns:1fr; text-align:center; padding:46px 22px 50px; }
  .hero__sub{ margin-inline:auto; }
  .hero__cta{ justify-content:center; }
  .hero__cam{ order:-1; }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .paper__cols{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .gbform{ grid-template-columns:1fr; }
  .footer__cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width:540px){
  .grid{ grid-template-columns:1fr; }
  .nav{ flex-direction:column; gap:10px; }
  .menubar__url{ display:none; }
  .footer__cols{ grid-template-columns:1fr; }
}

/* ====================== REDUCED MOTION ====================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  .ticker__track,.strip__track{ animation:none; }
  .card{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ===================================================================
   v2 — CART · QUICK-VIEW · FILM-STOCK · RETICLE · POLISH
   =================================================================== */

/* ---- film-stock global grade ----
   Applied as a FIXED full-viewport backdrop-filter overlay rather than a
   filter on the (tall, scrolling) .window. A filter on .window re-rasterises
   the whole page every scroll frame; a fixed overlay only re-composites the
   viewport — identical look, without the scroll-jank cliff. z-index 8000 sits
   above all content (≤50) and below the CRT/cursor/controls (≥9000). */
.grade{ position:fixed; inset:0; z-index:8000; pointer-events:none;
  transition:backdrop-filter .35s ease, -webkit-backdrop-filter .35s ease; }
body[data-film="gold"]     .grade{ -webkit-backdrop-filter:sepia(.30) saturate(1.5) contrast(1.04) brightness(1.03) hue-rotate(-6deg); backdrop-filter:sepia(.30) saturate(1.5) contrast(1.04) brightness(1.03) hue-rotate(-6deg); }
body[data-film="bw"]       .grade{ -webkit-backdrop-filter:grayscale(1) contrast(1.14) brightness(1.03); backdrop-filter:grayscale(1) contrast(1.14) brightness(1.03); }
body[data-film="tungsten"] .grade{ -webkit-backdrop-filter:saturate(1.5) contrast(1.07) hue-rotate(9deg) brightness(.98); backdrop-filter:saturate(1.5) contrast(1.07) hue-rotate(9deg) brightness(.98); }
body[data-film="lomo"]     .grade{ -webkit-backdrop-filter:saturate(1.75) contrast(1.32) brightness(1.02); backdrop-filter:saturate(1.75) contrast(1.32) brightness(1.02); }
body[data-film="gold"]     .crt__glow{ background:radial-gradient(120% 90% at 50% 45%, rgba(255,184,84,.12), transparent 60%); }
body[data-film="tungsten"] .crt__glow{ background:radial-gradient(120% 90% at 50% 45%, rgba(90,180,255,.10), transparent 55%),
                                                  radial-gradient(60% 50% at 50% 40%, rgba(255,47,128,.06), transparent 70%); }
body[data-film="lomo"]     .crt__vignette{ background:radial-gradient(110% 110% at 50% 50%, transparent 38%, rgba(0,0,0,.78) 100%); }
body[data-film="bw"]       .crt__glow{ background:radial-gradient(120% 90% at 50% 45%, rgba(220,220,220,.05), transparent 60%); }

/* ---- film-advance scroll progress ---- */
.filmbar{ position:fixed; top:0; left:0; right:0; height:7px; z-index:9100; pointer-events:none; background:#0a0807; box-shadow:0 1px 0 #000; }
.filmbar span{ position:absolute; inset:0; transform-origin:left; transform:scaleX(0); background:var(--amber); will-change:transform; }
.filmbar::after{ content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg, rgba(0,0,0,.85) 0 3px, transparent 3px 11px); }

/* ---- focus-reticle cursor ---- */
.reticle{ position:fixed; top:0; left:0; width:40px; height:40px; z-index:9800; pointer-events:none; opacity:0; transition:opacity .2s, width .12s, height .12s; will-change:transform; }
body.has-reticle .reticle{ opacity:1; }
.reticle b{ position:absolute; width:9px; height:9px; border:2px solid var(--amber); }
.reticle b:nth-child(1){ left:0; top:0; border-right:0; border-bottom:0; }
.reticle b:nth-child(2){ right:0; top:0; border-left:0; border-bottom:0; }
.reticle b:nth-child(3){ left:0; bottom:0; border-right:0; border-top:0; }
.reticle b:nth-child(4){ right:0; bottom:0; border-left:0; border-top:0; }
.reticle i{ position:absolute; left:50%; top:50%; width:3px; height:3px; background:var(--magenta); border-radius:50%; transform:translate(-50%,-50%); }
.reticle.lock{ width:52px; height:52px; }
.reticle.lock b{ border-color:var(--green); }
.reticle.snap{ width:30px; height:30px; }
body.has-reticle, body.has-reticle *{ cursor:none !important; }
body.has-reticle input, body.has-reticle textarea{ cursor:text !important; }

/* ---- film-stock selector ---- */
.filmsel{ position:fixed; bottom:16px; left:16px; z-index:9200; font-family:var(--mono); }
.filmsel__btn{ display:flex; align-items:center; gap:7px; font:700 12px var(--mono); color:var(--cream); cursor:pointer; letter-spacing:1px;
  background:var(--panel); border:2px solid var(--amber-lo); box-shadow:3px 3px 0 #000; padding:8px 12px; }
.filmsel__btn b{ color:var(--amber); }
.filmsel__dot{ width:9px; height:9px; border-radius:50%; background:var(--magenta); box-shadow:0 0 8px var(--magenta); animation:blink 1.6s steps(1) infinite; }
.filmsel__menu{ list-style:none; margin:0 0 6px; padding:4px; position:absolute; bottom:100%; left:0; min-width:196px;
  background:var(--panel); border:2px solid var(--amber-lo); box-shadow:4px 4px 0 #000;
  opacity:0; visibility:hidden; transform:translateY(6px); pointer-events:none;
  transition:opacity .16s, transform .16s, visibility 0s .16s; }
.filmsel__menu.open{ opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition:opacity .16s, transform .16s, visibility 0s; }
.filmsel__menu li{ font:700 12px var(--mono); color:var(--cream-dim); padding:9px 10px; cursor:pointer; letter-spacing:.5px; outline:none; }
.filmsel__menu li:hover, .filmsel__menu li:focus-visible{ color:#000; background:var(--amber); }
.filmsel__menu li.is-active{ color:var(--green); }
.filmsel__menu li.is-active::before{ content:'▸ '; }

/* ---- shutter flash (film switch / easter egg) ---- */
.shutterflash{ position:fixed; inset:0; z-index:9700; pointer-events:none; background:#fff; mix-blend-mode:overlay; }

/* ---- fly-to-cart clone ---- */
.fly{ pointer-events:none; will-change:transform; filter:drop-shadow(0 4px 8px rgba(0,0,0,.5)); }

/* ---- card → quick view affordance ---- */
.card{ cursor:pointer; }
.card:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; }
.card__shot{ position:relative; }
.card__view{ position:absolute; inset:0; display:grid; place-items:center; gap:0; font:400 22px var(--term);
  letter-spacing:2px; color:var(--cream); background:rgba(10,8,7,.58); opacity:0; transition:opacity .18s; }
.card:hover .card__view, .card:focus-visible .card__view{ opacity:1; }

/* ---- overlay shell (cart + modal) ---- */
body.ovl-open{ overflow:hidden; }
.cartwrap, .modalwrap{ position:fixed; inset:0; z-index:9400; }
.cartwrap[hidden], .modalwrap[hidden]{ display:none; }
.ovl-backdrop{ position:absolute; inset:0; background:rgba(4,3,2,.74); opacity:0; transition:opacity .3s; }
.cartwrap.show .ovl-backdrop, .modalwrap.show .ovl-backdrop{ opacity:1; }
.ovl-x{ width:24px; height:22px; cursor:pointer; font:700 12px var(--mono); color:#fff; background:var(--magenta);
  border-top:2px solid #ffd0e2; border-left:2px solid #ffd0e2; border-right:2px solid #000; border-bottom:2px solid #000; }

/* ---- cart drawer ---- */
.cart{ position:absolute; top:0; right:0; height:100%; width:min(430px,92vw); display:flex; flex-direction:column;
  background:var(--bg-2); border-left:3px solid var(--amber-lo); box-shadow:-10px 0 50px rgba(0,0,0,.6);
  transform:translateX(102%); transition:transform .34s cubic-bezier(.4,0,.1,1); outline:none; }
.cartwrap.show .cart{ transform:none; }
.cart__bar{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; letter-spacing:1px;
  background:linear-gradient(90deg,var(--amber-lo),#2a1605); color:var(--amber-hi); font:700 14px var(--mono); border-bottom:2px solid #000; }
.cart__items{ list-style:none; margin:0; padding:8px 12px; overflow-y:auto; flex:1; }
.citem{ display:grid; grid-template-columns:54px 1fr auto auto; align-items:center; gap:10px; padding:11px 0; border-bottom:1px dashed #3a2e1f; }
.citem__shot{ width:54px; height:42px; overflow:hidden; display:grid; place-items:center; border:1px solid #3a2e1f;
  background:repeating-linear-gradient(45deg,#181310 0 8px,#1d1712 8px 16px); }
.citem__shot .cam{ width:82%; }
.citem__info b{ display:block; font:400 20px var(--term); color:var(--cream); line-height:1.05; }
.citem__info span{ font-size:12px; color:var(--amber); }
.citem__qty{ display:flex; align-items:center; gap:6px; }
.citem__qty button{ width:22px; height:22px; cursor:pointer; font:700 14px var(--mono); color:#1a120a; background:var(--amber);
  border-top:2px solid var(--amber-hi); border-left:2px solid var(--amber-hi); border-right:2px solid var(--amber-lo); border-bottom:2px solid var(--amber-lo); }
.citem__qty button:active{ transform:translate(1px,1px); }
.citem__qty span{ min-width:18px; text-align:center; color:var(--cream); font-weight:700; }
.citem__rm{ width:22px; height:22px; cursor:pointer; font:700 11px var(--mono); color:var(--cream-dim); background:transparent; border:1px solid #3a2e1f; }
.citem__rm:hover{ color:#fff; background:var(--magenta); border-color:#000; }
.cart__empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; color:var(--cream-dim); padding:24px; }
.cart__empty[hidden]{ display:none; }
.cart__empty-big{ font:400 30px var(--term); color:var(--amber); letter-spacing:2px; margin:0; }
.cart__empty p{ margin:0; font-size:13px; }
.cart__foot{ border-top:2px solid var(--amber-lo); padding:14px; background:#0a0807; }
.cart__foot[hidden]{ display:none; }
.cart__line{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.cart__line span{ font:400 19px var(--term); color:var(--cream-dim); letter-spacing:1px; }
.cart__line b{ font:700 16px var(--mono); color:var(--amber); }
.cart__line--ship b{ color:var(--green); }
.cart__checkout{ width:100%; margin-top:8px; }
.cart__note{ color:var(--green); font:400 19px var(--term); text-align:center; margin:10px 0 0; min-height:1.1em; }

/* ---- quick-view modal ---- */
.modal{ position:absolute; top:50%; left:50%; width:min(860px,94vw); max-height:90vh; overflow:hidden;
  display:flex; flex-direction:column; background:var(--bg-2); border:2px solid #000;
  box-shadow:6px 6px 0 #000, 0 0 0 2px var(--amber-lo); outline:none;
  transform:translate(-50%,-46%) scale(.96); opacity:0; transition:transform .28s cubic-bezier(.2,1.2,.4,1), opacity .28s; }
.modalwrap.show .modal{ transform:translate(-50%,-50%) scale(1); opacity:1; }
.modal__bar{ flex:none; display:flex; justify-content:space-between; align-items:center; padding:8px 12px; background:#cdbf9b; color:#1a140c; font:700 13px var(--mono); border-bottom:2px solid #000; }
/* body scrolls between the fixed bar + nav; image is a sticky vitrine panel.
   minmax(0,..) on BOTH tracks prevents the aspect-ratio grid-blowout. */
.modal__body{ flex:1 1 auto; min-height:0; overflow-y:auto; display:grid; grid-template-columns:minmax(0,288px) minmax(0,1fr); }
.modal__shot{ position:sticky; top:0; align-self:start; min-width:0; aspect-ratio:4/5;
  display:grid; place-items:center; padding:26px 22px; border-right:2px solid #000;
  background:radial-gradient(circle at 50% 40%, #251b13 0%, #0c0907 74%); }
.modal__shot .cam{ width:82%; max-width:208px; filter:drop-shadow(4px 6px 0 rgba(0,0,0,.5)); }
.modal__info{ min-width:0; padding:22px 22px 26px; }
.modal__tag{ display:inline-block; font:400 17px var(--term); background:var(--green); color:#001; padding:0 8px; border:1px solid #000; letter-spacing:1px; }
.modal__tag--rare{ background:var(--magenta); color:#fff; }
.modal__info h3{ font:400 36px var(--term); color:var(--cream); margin:8px 0 2px; line-height:1; }
.modal__fmt{ font-size:12px; color:var(--amber); letter-spacing:1px; margin:0 0 14px; }
.spec{ width:100%; border-collapse:collapse; margin:0 0 14px; }
.spec tbody{ display:grid; grid-template-columns:1fr 1fr; gap:0 22px; }
.spec tr{ display:flex; justify-content:space-between; gap:10px; align-items:baseline; padding:4px 0; border-bottom:1px dashed #3a2e1f; }
.spec th{ text-align:left; font-size:11px; font-weight:400; color:var(--cream-dim); white-space:nowrap; }
.spec td{ text-align:right; font-size:12px; color:var(--cream); }
.modal__story{ font-size:13px; color:var(--cream-dim); line-height:1.6; margin:0 0 16px; border-left:3px solid var(--magenta); padding-left:10px; }
.modal__buy{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  border-top:2px solid #2a2018; padding-top:14px; }
.modal__price{ font-family:var(--pixel); font-size:22px; color:var(--amber); }
.modal__nav{ flex:none; display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-top:2px solid #000; background:#0a0807; }
.modal__nav button{ font:700 12px var(--mono); color:var(--cyan); background:transparent; border:2px solid var(--cyan); padding:6px 12px; cursor:pointer; box-shadow:2px 2px 0 #000; }
.modal__nav button:hover{ background:var(--cyan); color:#000; }
.modal__nav span{ font:400 18px var(--term); color:var(--cream-dim); }
@media (max-width:620px){
  .modal__body{ grid-template-columns:1fr; }
  .modal__shot{ position:static; aspect-ratio:16/10; border-right:0; border-bottom:2px solid #000; }
  .spec tbody{ grid-template-columns:1fr; }
}

/* ---- v2 reduced-motion guards ---- */
@media (prefers-reduced-motion:reduce){
  .window, .grade{ transition:none; }
  .cart, .modal, .ovl-backdrop, .card__view, .filmsel__menu{ transition:none; }
  .reticle{ transition:opacity .2s; }
}

/* ===================================================================
   v3 — REVEAL · FILTERBAR · BENCH · PEOPLE · HELP · CHECKOUT · SOUND
   =================================================================== */

/* ---- generic scroll-reveal ---- */
[data-reveal]{ opacity:0; transform:translateY(24px); transition:.6s; }
[data-reveal].in{ opacity:1; transform:none; }
/* cards manage their own snappy hover transition — don't let the generic
   .6s reveal transition leak onto hover (cards share the `.in` toggle). */
.card[data-reveal]{ transition:.18s; }

/* ---- sound mute toggle (paired with .crt-toggle) ---- */
.crt-toggle--snd{ bottom:54px; }   /* stack above the CRT control */
.crt-toggle--motion{ bottom:92px; }   /* stack above the sound control */
.crt-toggle.is-off .crt-toggle__led{ background:#444; box-shadow:none; }

/* ---- MOTION pause control (WCAG 2.2.2 Pause/Stop/Hide for the always-on chrome) ---- */
body.motion-off .ticker__track,
body.motion-off .strip__track,
body.motion-off .brand__mark,
body.motion-off .hero__stars i,
body.motion-off .menubar__rec i,
body.motion-off .filmsel__dot,
body.motion-off .footer__const,
body.motion-off .hero__sub .caret,
body.motion-off .cam--hero,
body.motion-off .crt__scanlines,
body.motion-off .crt__grain,
body.motion-off .crt__flicker,
body.motion-off .archive__hint{ animation:none !important; }

/* ---- shop filter / sort bar ---- */
.filterbar{
  position:sticky; top:54px; z-index:40;
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px;
  padding:12px 34px; margin:0; background:var(--bg-2);
  border-top:1px solid var(--amber-lo); border-bottom:2px solid var(--amber-lo);
}
.filterbar__group{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.filterbar__lbl{ font-family:var(--term); font-size:17px; color:var(--amber); letter-spacing:1px; margin-right:4px; }
.chip{
  font-family:var(--term); font-size:18px; padding:1px 12px; color:var(--cream-dim); cursor:pointer;
  background:var(--panel); border:1px solid var(--amber-lo); box-shadow:2px 2px 0 #000; letter-spacing:1px; transition:.12s;
}
.chip:hover{ color:#000; background:var(--amber); border-color:#000; }
.chip:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.chip.is-active{ color:#000; background:var(--green); border-color:#000; box-shadow:2px 2px 0 #000; }
.filterbar__sort{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.filterbar__sort select{
  font-family:var(--mono); font-weight:700; font-size:13px; padding:5px 10px; color:var(--cream); cursor:pointer;
  background:#0a0807; border:2px inset #3a2e1f; outline:none;
}
.filterbar__sort select:focus{ border-color:var(--amber); box-shadow:0 0 0 2px rgba(255,176,60,.3); }
.section-head__note b#shopCount{ color:var(--green); }

/* visually-hidden status node (announced result count / empty-state sentence) */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* live count + empty state */
.grid__empty{ grid-column:1 / -1; text-align:center; padding:50px 16px; color:var(--cream-dim);
  border:2px dashed #3a2e1f; background:repeating-linear-gradient(45deg,#141009 0 12px,#181310 12px 24px); }
.grid__empty-big{ font:400 32px var(--term); color:var(--magenta); letter-spacing:2px; margin:0 0 8px; }
.grid__empty p{ margin:0; font-size:13px; line-height:1.6; }

/* ---- card "LAST ONE" pill ---- */
.card__last{
  position:absolute; top:10px; left:10px; z-index:2; font-family:var(--term); font-size:15px;
  background:var(--magenta); color:#fff; padding:1px 8px; border:1px solid #000; letter-spacing:1px;
}

/* ---- modal richer detail block ---- */
.modal__detail{ margin:0 0 12px; }
.mbadge{ font:700 12px var(--mono); color:#001; background:var(--green); padding:5px 9px; margin:0 0 12px;
  border:1px solid #000; letter-spacing:.5px; }
.mbadge b{ display:block; font-weight:400; font-family:var(--mono); font-size:11px; color:#063; margin-top:2px; }
.mdetail__h{ font:700 12px var(--mono); color:var(--amber); letter-spacing:1px; margin:10px 0 6px; }
.cond{ list-style:none; margin:0 0 4px; padding:0; }
.cond__row{ display:flex; gap:8px; align-items:flex-start; font-size:12px; color:var(--cream); padding:3px 0;
  border-bottom:1px dashed #3a2e1f; line-height:1.4; }
.cond__mark{ flex:none; width:16px; font-weight:700; }
.cond__row--ok .cond__mark{ color:var(--green); }
.cond__row--note{ color:var(--cream-dim); }
.cond__row--note .cond__mark{ color:var(--amber); }
.mbox{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 8px; }
.mbox li{ font-size:12px; color:var(--cream-dim); padding:2px 8px; border:1px solid #3a2e1f; background:#0a0807; }
.mbox li::before{ content:'▸ '; color:var(--amber); }
.mstock{ font:700 13px var(--mono); margin:12px 0 0; letter-spacing:.5px; }
.mstock--last{ color:var(--magenta); }
.mstock--in{ color:var(--green); }
.mstock--out{ color:var(--cream-dim); }
.btn--sold{ background:#2a2018; color:var(--cream-dim); border-color:#000;
  border-top-color:#473a2c; border-left-color:#473a2c; }

/* ---- THE BENCH ---- */
.bench{ padding:8px 34px 56px; }
.bench__sheet{
  background:#cdbf9b; color:#1a140c; border:2px solid #000; box-shadow:6px 6px 0 #000; padding:8px 0 22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Ccircle cx='1' cy='1' r='.6' fill='%23000' opacity='0.06'/%3E%3C/svg%3E");
}
.bench__steps{ list-style:none; margin:0; padding:14px 26px 0; counter-reset:none; }
.bench__step{
  position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px;
  padding:18px 0; border-bottom:2px dashed rgba(0,0,0,.28);
}
.bench__step:last-child{ border-bottom:0; }
.bench__no{ font-family:var(--pixel); font-size:clamp(28px,5vw,46px); color:#1a140c; opacity:.85; line-height:1; }
.bench__body h3{ font-family:var(--mono); font-weight:700; font-size:16px; letter-spacing:.5px; margin:0 0 5px; }
.bench__body p{ font-size:13px; line-height:1.6; margin:0; max-width:62ch; }
.stamp{
  flex:none; font:700 17px var(--mono); color:#1c7a4a; letter-spacing:2px;
  border:2px dashed #1c7a4a; padding:5px 12px; border-radius:5px;
  transform:rotate(-9deg); opacity:.66; text-shadow:0 0 1px rgba(28,122,74,.4); white-space:nowrap;
}
.bench__foot{
  margin:18px 26px 0; padding:9px 14px; text-align:center; font:700 12px var(--mono); letter-spacing:1px;
  color:var(--paper); background:var(--ink); border:1px solid #000;
}

/* ---- THE PEOPLE BEHIND THE GLASS (staff badges) ---- */
.people{ padding:8px 34px 50px; }
.badges{ display:grid; grid-template-columns:1fr 1fr; gap:22px; padding:14px 0 0; }
.idbadge{
  position:relative; background:#1a1610; border:2px solid #000; box-shadow:5px 5px 0 #000;
  padding:0 0 12px; overflow:hidden;
}
.idbadge::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(125deg, rgba(255,255,255,.06) 0 30%, transparent 32%); }   /* lamination sheen */
.idbadge__top{ display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(90deg,var(--amber-lo),#2a1605); color:var(--amber-hi);
  font:700 12px var(--mono); padding:7px 12px; letter-spacing:1px; border-bottom:2px solid #000; }
.idbadge__clip{ width:26px; height:8px; background:#888; border:1px solid #000; border-radius:3px; }
.idbadge__row{ display:flex; gap:14px; padding:16px 14px 12px; }
.idbadge__photo{ flex:none; width:120px; height:96px; display:grid; place-items:center; padding:8px; overflow:hidden;
  border:2px inset #3a2e1f; background:repeating-linear-gradient(45deg,#100c08 0 9px,#15110d 9px 18px); }
.idbadge__photo .cam{ width:88%; }
.idbadge__photo img.cam{ width:100%; height:100%; padding:0; object-fit:cover; }   /* real staff photo fills the frame */
.idbadge__role{ display:block; font-family:var(--pixel); font-size:13px; color:var(--green); letter-spacing:1px; }
.idbadge__handle{ display:block; font-family:var(--term); font-size:19px; color:var(--cyan); margin:4px 0 8px; }
.idbadge__info p{ font-size:12px; color:var(--cream-dim); line-height:1.55; margin:0; }
.idbadge__stripe{ height:18px; margin:6px 14px 8px;
  background:repeating-linear-gradient(90deg,#000 0 3px,#2a2620 3px 5px,#000 5px 7px,#3a352c 7px 11px); border:1px solid #000; }
.idbadge__barcode{ height:30px; margin:0 14px;
  background:repeating-linear-gradient(90deg,#e9dcc1 0 2px,#1a1610 2px 3px,#e9dcc1 3px 4px,#1a1610 4px 7px,#e9dcc1 7px 8px,#1a1610 8px 11px); }
.people__cap{ margin:20px 0 0; text-align:center; font-family:var(--term); font-size:18px; color:var(--cream-dim); letter-spacing:1px; }

/* ---- HELP.TXT / FAQ ---- */
.help{ padding:8px 34px 50px; }
.helpfile{ background:#020a05; border:2px solid var(--green); box-shadow:5px 5px 0 #000; padding:6px 0;
  font-family:var(--term); }
.faq{ border-bottom:1px solid rgba(76,242,160,.22); }
.faq:last-child{ border-bottom:0; }
.faq summary{ list-style:none; cursor:pointer; padding:12px 18px; font-size:21px; color:var(--green);
  letter-spacing:1px; text-shadow:0 0 6px rgba(76,242,160,.35); display:flex; align-items:center; gap:10px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{ content:'[+]'; font-family:var(--mono); font-size:14px; color:var(--amber); flex:none; }
.faq[open] summary::before{ content:'[−]'; }
.faq summary:hover{ color:var(--cream); }
.faq summary:focus-visible{ outline:2px solid var(--cyan); outline-offset:-2px; }
.faq p{ margin:0; padding:0 18px 16px 46px; font-family:var(--mono); font-size:13px; line-height:1.65; color:#8fd9b4; }

/* ---- CHECKOUT (receipt + contact sheet) ---- */
.checkout{ display:flex; flex-direction:column; flex:1; min-height:0; overflow-y:auto; padding:14px; gap:14px; }
.checkout[hidden]{ display:none; }
.receipt{
  margin:0; padding:14px 12px; white-space:pre; overflow-x:auto;
  font:14px/1.45 var(--mono); color:#1a140c; background:#efe7d2; border:1px solid #000;
  background-image:repeating-linear-gradient(transparent 0 21px, rgba(0,0,0,.05) 21px 22px);
  box-shadow:inset 0 0 0 8px #efe7d2, inset 0 0 0 10px #cbbf9d;   /* tractor-feed margins */
}
.proof{ background:#0a0807; border:1px solid #000; padding:8px; }
.proof__canvas{ width:100%; height:auto; display:block; image-rendering:pixelated; }
.checkout__btns{ display:flex; gap:10px; flex-wrap:wrap; }
.checkout__btns .btn{ flex:1; text-align:center; }

/* ---- v3 responsive ---- */
@media (max-width:880px){
  .badges{ grid-template-columns:1fr; }
  .filterbar{ top:0; }
  .filterbar__sort{ margin-left:0; }
}
@media (max-width:540px){
  .bench__step{ grid-template-columns:auto 1fr; }
  .stamp{ grid-column:1 / -1; justify-self:start; }
  .idbadge__row{ flex-direction:column; align-items:center; text-align:center; }
}

/* ---- v3 reduced-motion guards ---- */
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  .chip{ transition:none; }
}

/* ===================================================================
   v4 — THE SPECIMEN (editorial) + THE DARKROOM DEVELOP (signature)
   =================================================================== */

/* ---- THE SPECIMEN ---- */
.specimen{ padding:58px 34px; background:linear-gradient(#0e0b08,#15110d); border-bottom:2px solid var(--amber-lo); }
.specimen__vitrine{ display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:center; max-width:1120px; margin:0 auto; }
.specimen__stage{ position:relative; display:grid; place-items:center; min-height:380px; padding:46px;
  background:radial-gradient(circle at 50% 42%, #241a12 0%, #0c0907 70%); border:2px solid #000;
  box-shadow:inset 0 0 70px rgba(0,0,0,.65), 6px 6px 0 #000; }
.specimen__label{ position:absolute; top:12px; left:14px; font-family:var(--term); font-size:17px; color:var(--magenta); letter-spacing:2px; }
.specimen__cam{ width:min(440px,80%); filter:drop-shadow(5px 8px 0 rgba(0,0,0,.5)); }
.specimen__cam .glass{ fill:var(--amber); opacity:.85; }
.callout{ position:absolute; font-family:var(--term); font-size:18px; line-height:1.05; color:var(--amber);
  background:rgba(8,6,5,.84); border:1px solid var(--amber-lo); padding:3px 9px; letter-spacing:1px; max-width:168px; z-index:3; }
.callout i{ display:block; font-style:normal; font-size:11px; font-family:var(--mono); color:var(--cream-dim); letter-spacing:0; margin-top:2px; }
.callout::before{ content:''; position:absolute; width:9px; height:9px; border-radius:50%; background:var(--amber); box-shadow:0 0 8px var(--amber); }
.callout::after{ content:''; position:absolute; width:24px; height:1px; background:var(--amber); top:13px; }
.callout--a{ top:12%; right:5%; } .callout--a::before{ left:-28px; top:9px; } .callout--a::after{ left:-24px; }
.callout--b{ bottom:24%; left:4%; } .callout--b::before{ right:-28px; top:9px; } .callout--b::after{ right:-24px; }
.callout--c{ bottom:7%; right:9%; } .callout--c::before{ left:-28px; top:9px; } .callout--c::after{ left:-24px; }
.specimen__eyebrow{ font-family:var(--term); font-size:20px; color:var(--green); letter-spacing:2px; margin:0 0 8px; }
.specimen__title{ font-family:var(--pixel); font-size:clamp(19px,2.9vw,32px); line-height:var(--lh-pixel); color:var(--cream); margin:0 0 18px; text-shadow:3px 3px 0 var(--amber-lo); }
.specimen__body{ font-size:15px; color:var(--cream-dim); line-height:1.7; max-width:46ch; margin:0 0 22px; border-left:3px solid var(--magenta); padding-left:13px; }

/* ---- THE DARKROOM DEVELOP ---- */
.develop{ position:relative; height:280vh; background:#080503; }
.develop__stage{ position:sticky; top:0; height:100vh; overflow:hidden; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 40%, #2a0b08 0%, #140504 52%, #070202 100%); }
.develop__stage::before{ content:''; position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(circle at 50% 38%, rgba(255,46,30,.12), transparent 58%); }
.develop__inner{ position:relative; z-index:2; text-align:center; width:min(560px,86vw); }
.develop__eyebrow{ font-family:var(--term); font-size:21px; color:#ff5a4a; letter-spacing:3px; margin:0 0 18px;
  text-shadow:0 0 10px rgba(255,46,30,.5); }
.develop__tray{ width:min(450px,78vw); aspect-ratio:5/4; margin:0 auto 24px; padding:18px;
  background:linear-gradient(#191310,#0c0806); border:2px solid #34221a;
  box-shadow:inset 0 0 36px rgba(0,0,0,.75), 0 18px 50px rgba(0,0,0,.6); }
.develop__print{ position:relative; width:100%; height:100%; overflow:hidden; display:grid; place-items:center; background:#d9cdae;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); will-change:filter;
  filter:sepia(calc(.4*(1 - var(--dev,0)))) contrast(calc(.78 + .5*var(--dev,0))) brightness(calc(1.16 - .16*var(--dev,0))); }
.develop__image{ position:absolute; inset:0; overflow:hidden; will-change:filter, opacity;
  opacity:clamp(0, calc((var(--dev,0) - .04) * 1.6), 1); filter:blur(calc((1 - var(--dev,0)) * 3px)); }
.develop__photo{ width:100%; height:100%; object-fit:cover; display:block; }
.develop__wm{ position:absolute; left:0; right:0; bottom:5%; text-align:center; z-index:2;
  font-family:var(--pixel); font-size:11px; color:rgba(247,237,212,.82); letter-spacing:1px;
  text-shadow:0 1px 3px rgba(0,0,0,.85); }
.develop__print::after{ content:''; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:calc(1.7 * var(--dev,0) * (1 - var(--dev,0))); }
.develop__wash{ position:absolute; inset:0; pointer-events:none; background:#e9dec2; opacity:calc(.92 * (1 - var(--dev,0))); }
.develop__title{ font-family:var(--pixel); font-size:clamp(16px,2.4vw,26px); color:var(--cream); margin:0 0 10px; text-shadow:2px 2px 0 #5a1408; }
.develop__cap{ font-family:var(--term); font-size:23px; letter-spacing:2px; color:var(--cream-dim); margin:0; }
.develop__cap b{ color:var(--green); }

@media (max-width:880px){
  .specimen__vitrine{ grid-template-columns:1fr; }
  .develop{ height:220vh; }
}
@media (prefers-reduced-motion:reduce){
  .develop{ height:auto; }
  /* force the print to read as fully developed regardless of JS timing */
  .develop__stage{ position:static; height:auto; min-height:78vh; padding:64px 0; --dev:1; }
}

/* ===================================================================
   v5 — real product photographs (img.cam) replace the SVG placeholders
   =================================================================== */
img.cam{ width:100%; height:100%; object-fit:contain; display:block; }
/* grid cards + cart thumbs: fill the frame (photos already carry studio margin) */
.card__shot{ padding:0; }
.card__shot img.cam{ object-fit:cover; }
.citem__shot img.cam{ object-fit:cover; }
/* quick-view vitrine: square frame, whole body shown, dark photo ground blends in */
.modal__shot{ aspect-ratio:1/1; }
.modal__shot img.cam{ max-width:none; object-fit:contain; filter:none; }
/* the specimen: a framed print sitting on the vitrine */
.specimen__cam{ width:min(470px,90%); height:auto; aspect-ratio:4/3; object-fit:cover;
  filter:none; border:3px solid #0a0807; box-shadow:6px 8px 0 rgba(0,0,0,.55); }

/* hero flash-bulb burst — anchored (in JS) to the hot shoe on the camera's top plate */
.camflash{ position:fixed; width:34px; height:34px; z-index:9650; pointer-events:none;
  transform:translate(-50%,-50%); border-radius:50%; mix-blend-mode:screen; will-change:transform,opacity;
  background:radial-gradient(circle, #ffffff 0%, rgba(255,255,248,.95) 20%, rgba(255,247,224,.55) 44%, rgba(255,240,200,0) 72%); }
.camlift{ position:fixed; inset:0; z-index:9640; pointer-events:none; background:#fff; mix-blend-mode:screen; }

/* camera-shutter (aperture iris) page transition */
.shutter{ position:fixed; inset:0; width:100%; height:100%; z-index:9750; display:none; pointer-events:none; }
.shutter.is-active{ display:block; pointer-events:auto; }   /* block stray clicks during the brief transition */
.top-sentinel{ position:absolute; top:0; left:0; width:0; height:0; overflow:hidden; }
/* in-page jump targets land clear of the 68px sticky nav */
section[id]{ scroll-margin-top:84px; }
/* visible focus ring on the shutter-nav landing target (matches card/chip/faq focus) */
:is(section,footer,h1,h2,h3)[tabindex="-1"]:focus,
.brand:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; }

/* ===================================================================
   THE ARCHIVE — draggable 35mm film roll (horizontal, momentum)
   =================================================================== */
.archive{ padding:46px 0 56px; overflow:hidden; }
.archive .section-head{ padding-left:34px; padding-right:34px; }
.archive__hint{ font-family:var(--mono); font-size:11px; color:var(--amber); border:1px solid var(--amber-lo);
  padding:1px 8px; margin-left:8px; letter-spacing:1px; white-space:nowrap; animation:hintpulse 2s ease-in-out infinite; }
@keyframes hintpulse{ 50%{ opacity:.35 } }
.filmroll{ position:relative; margin-top:22px; overflow:hidden; cursor:grab; touch-action:pan-y; user-select:none;
  background:#0d0a07; border-top:2px solid #000; border-bottom:2px solid #000; }
.filmroll.dragging{ cursor:grabbing; }
.filmroll:focus-visible{ outline:3px solid var(--cyan); outline-offset:-3px; }
.filmroll__track{ position:relative; display:flex; gap:6px; padding:26px 28px; width:max-content; background:#16100a; will-change:transform; }
/* 35mm sprocket-hole bands top & bottom, scrolling with the film */
.filmroll__track::before, .filmroll__track::after{ content:''; position:absolute; left:0; right:0; height:13px; pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0 15px, rgba(233,222,194,.88) 15px 26px); }
.filmroll__track::before{ top:6px; } .filmroll__track::after{ bottom:6px; }
.frame{ flex:none; width:300px; padding:0; border:0; background:transparent; color:inherit; cursor:inherit;
  display:flex; flex-direction:column; gap:6px; -webkit-tap-highlight-color:transparent; }
.frame__img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:#0a0807;
  border:1px solid #000; box-shadow:inset 0 0 0 2px #1a120a; transition:filter .2s; }
.frame:hover .frame__img, .frame:focus-visible .frame__img{ filter:brightness(1.12); outline:2px solid var(--amber); outline-offset:-1px; }
.frame:focus-visible{ outline:none; }
.frame__edge{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px;
  color:var(--amber); letter-spacing:1px; padding:0 2px; }
.frame__edge b{ color:var(--cream-dim); font-weight:400; }
.filmroll__fade{ position:absolute; top:0; bottom:0; width:64px; pointer-events:none; z-index:2; }
.filmroll__fade--l{ left:0; background:linear-gradient(90deg, #0d0a07, transparent); }
.filmroll__fade--r{ right:0; background:linear-gradient(270deg, #0d0a07, transparent); }
@media (max-width:620px){ .frame{ width:230px; } }
@media (prefers-reduced-motion:reduce){ .archive__hint{ animation:none; } .frame__img{ transition:none; } }