/* Filmstrip layout — responsive 35mm with perf-nav to pages */
*{box-sizing:border-box} html,body{height:100%} body{margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:#0b0b0b; color:#eee;}
img{display:block; max-width:100%; height:auto}
button{font:inherit; cursor:pointer;}

:root{
  --rail-h: 48vh;          /* strip height on desktop */
  --perf: 18px;            /* perf hole size */
  --perf-gap: 26px;        /* space between holes */
  --film:#141414;          /* film base */
  --film-edge:#0a0a0a;
  --perf-color:#0a0a0a;    /* transparent illusion (dark bg) */
  --accent:#ff6a00;        /* highlight */
}

.hdr, .ftr{ position:fixed; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:linear-gradient(#0d0d0d,#0a0a0a); border-bottom:1px solid #000; z-index:10 }
.hdr{ top:0 } .ftr{ bottom:0; border-top:1px solid #000; border-bottom:none }
.wordmark{ height:20px; filter:invert(90%) contrast(110%) }
.menu{ background:#151515; color:#eee; border:1px solid #222; border-radius:8px; padding:6px 10px }

/* Filmstrip container */
.rail{ position:fixed; inset:60px 0 54px; display:grid; align-items:center; overflow:hidden }

.strip{ position:relative; height:var(--rail-h); }
.film{
  height:100%;
  background:
    /* edges */
    linear-gradient(to right, var(--film-edge) 0 14px, transparent 14px calc(100% - 14px), var(--film-edge) calc(100% - 14px) 100%),
    /* center emulsion */
    linear-gradient(#121212,#0e0e0e);
  border-top:2px solid #000; border-bottom:2px solid #000;
  box-shadow: inset 0 8px 20px rgba(0,0,0,.6), inset 0 -8px 20px rgba(0,0,0,.6);
  position:relative;
}

/* Perforations, spaced along the strip */
.perf{ position:absolute; top:50%; transform:translateY(-50%); width:var(--perf); height:var(--perf); border-radius:2px;
  background: radial-gradient(closest-side, #000 0 30%, #0000 32%), var(--perf-color);
  border:1px solid #000; box-shadow: inset 0 0 4px #000, 0 1px 0 rgba(255,255,255,.06);
}
/* Place 4 perfs aligned to 4 frames */
.perf-0{ left:10% } .perf-1{ left:35% } .perf-2{ left:60% } .perf-3{ left:85% }
.perf:hover{ outline:2px solid var(--accent) }

/* Frames (pages) overlayed above strip */
.frame{
  position:absolute; left:50%; transform:translateX(-50%);
  width:min(900px, 88vw);
  background:rgba(12,12,12,.9);
  border:1px solid #1a1a1a; border-radius:12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 0 0 1px #000;
  padding:18px; display:none;
}
.frame.is-active{ display:block; }

/* Typography / UI */
h1,h2{ margin:0 0 6px; letter-spacing:.06em; font-weight:900 }
.tag{ color:#bbb; margin:0 0 12px }
.cta{ padding:10px 14px; border-radius:999px; border:1px solid #333; background:#161616; color:#eee }
.cta:hover{ border-color:#444 }

.products{ list-style:none; padding:0; margin:8px 0; display:grid; gap:10px }
.product{ display:grid; grid-template-columns:120px 1fr; gap:12px; align-items:center; background:#0f0f0f; border:1px solid #1a1a1a; border-radius:10px; padding:10px }
.product .price{ color:#ffb366; font-weight:800 }
.btn{ padding:8px 12px; border:1px solid #333; border-radius:8px; background:#151515; color:#999 }
.grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px }
figure{ margin:0; background:#0d0d0d; border:1px solid #1a1a1a; border-radius:8px; overflow:hidden }
figcaption{ padding:6px 8px; color:#aaa; font-size:12px }

/* Footer dots */
.crumbs{ display:flex; gap:8px }
.dot{ width:10px; height:10px; border-radius:50%; background:#2a2a2a; border:1px solid #000 }
.dot.is-active{ background:var(--accent); box-shadow:0 0 6px var(--accent) }

/* Mobile: vertical strip */
@media (max-width: 900px){
  :root{ --rail-h: 34vh; }
  .rail{ inset:54px 0 54px }
  .frame{ width:92vw }
  .grid{ grid-template-columns: 1fr 1fr }
}
@media (max-width: 620px){
  .strip{ height: 28vh }
  .grid{ grid-template-columns: 1fr }
  /* On small screens, align frames closer and perf positions adapt via JS centers */
}