/* 35mm cine 4‑perf filmstrip site — responsive */
*{box-sizing:border-box} html,body{height:100%} body{margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:#0a0a0a; color:#eee}
img{display:block; max-width:100%; height:auto}
button{font:inherit; cursor:pointer}

:root{
  --accent:#ff8c00;
  --panel:#0f0f0f;
  --border:#1b1b1b;
}

.hdr,.ftr{ position:fixed; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:10px 14px; z-index:10;
  background:linear-gradient(#0e0e0e,#090909); border-bottom:1px solid #000 }
.ftr{ bottom:0; border-top:1px solid #000; border-bottom:none }
.wordmark{ height:20px; filter:invert(90%) contrast(110%) }
.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) }
.keys{ color:#9a9a9a; font-size:12px }

.strip-wrap{ position:fixed; left:0; right:0; top:52px; height:200px; display:grid; place-items:center; pointer-events:auto }
.filmstrip{ width:min(96vw, 1400px); height:auto; display:block }

.frames{ position:fixed; left:0; right:0; top:260px; bottom:48px; overflow:auto; padding:12px; }
.frame{ display:none; background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.5), inset 0 0 0 1px #000; padding:18px; max-width:1100px; margin:0 auto }
.frame.is-active{ display:block }

h1,h2{ margin:0 0 8px; letter-spacing:.06em; font-weight:900 }
.tag{ margin:0 0 12px; color:#bdbdbd }
.cta,.btn{ padding:10px 14px; border-radius:10px; border:1px solid #333; background:#161616; color:#eee }
.cta:hover,.btn:hover{ border-color:#444 }
.muted{ color:#b3b3b3 }

.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:#ffc280; font-weight:800 }
.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 }

/* Mobile layout */
@media (max-width: 900px){
  .strip-wrap{ height:160px }
  .frames{ top:220px }
  .grid{ grid-template-columns: 1fr 1fr }
  .product{ grid-template-columns: 1fr }
}
@media (max-width: 620px){
  .strip-wrap{ height:140px }
  .frames{ top:200px }
  .grid{ grid-template-columns: 1fr }
}