/* ============================================================
   THE B-MOVIE VAULT — grindhouse drive-in archive
   ============================================================ */

:root{
  --bg:        #120c0b;
  --bg-2:      #1b1311;
  --panel:     #221715;
  --ink:       #ece0c8;      /* aged cream */
  --ink-dim:   #a8967c;
  --ink-faint: #6f5f4d;
  --blood:     #d8362a;
  --blood-lit: #ff5140;
  --marquee:   #f6c24a;      /* amber bulb */
  --marquee-d: #b9842a;
  --line:      rgba(236,224,200,.12);
  --frame:     #0c0807;
  --shadow:    0 18px 40px -18px rgba(0,0,0,.9);
  --maxw:      1480px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Oswald",sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* film grain overlay */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:9000;
  opacity:.05; mix-blend-mode:overlay;
  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)'/%3E%3C/svg%3E");
}
/* vignette */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:8999;
  background:radial-gradient(120% 90% at 50% 25%,transparent 55%,rgba(0,0,0,.55) 100%);
}

a{color:inherit;text-decoration:none;}
img{display:block;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,56px);}

/* ----------------------------------------------------------
   Top bar
   ---------------------------------------------------------- */
.topbar{
  position:sticky; top:0; z-index:100;
  background:linear-gradient(180deg,rgba(18,12,11,.97),rgba(18,12,11,.86));
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  display:flex; align-items:center; gap:clamp(12px,3vw,28px);
  padding:12px clamp(16px,4vw,56px);
  max-width:var(--maxw); margin:0 auto;
}
.brand{
  font-family:"Ultra",serif; font-size:18px; letter-spacing:.01em;
  color:var(--marquee); white-space:nowrap;
  text-shadow:0 1px 0 #000;
}
.brand .dot{color:var(--blood);}
.search{
  flex:1; position:relative; max-width:520px;
}
.search input{
  width:100%; background:var(--frame); border:1px solid var(--line);
  color:var(--ink); font-family:"Oswald"; font-weight:300; font-size:15px;
  letter-spacing:.04em; padding:10px 14px 10px 38px; border-radius:2px;
  outline:none; transition:border-color .2s,box-shadow .2s;
}
.search input:focus{border-color:var(--marquee);box-shadow:0 0 0 3px rgba(246,194,74,.12);}
.search input::placeholder{color:var(--ink-faint);text-transform:uppercase;letter-spacing:.12em;font-size:12px;}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--ink-faint);}
.count{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-dim); white-space:nowrap;
}
.count b{color:var(--ink);font-weight:500;}
@media(max-width:720px){ .count{display:none;} }

/* ----------------------------------------------------------
   Hero
   ---------------------------------------------------------- */
.hero{
  position:relative; text-align:center;
  padding:clamp(48px,9vw,120px) 16px clamp(36px,6vw,72px);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(80% 120% at 50% -10%,rgba(216,54,42,.20),transparent 60%),
    repeating-linear-gradient(90deg,transparent 0 38px,rgba(0,0,0,.18) 38px 40px);
}
.hero .kicker{
  font-size:12px; letter-spacing:.5em; text-transform:uppercase;
  color:var(--marquee); margin-bottom:18px;
}
.hero h1{
  font-family:"Ultra",serif; font-weight:400; margin:0;
  font-size:clamp(44px,11vw,150px); line-height:.86;
  color:var(--ink);
  text-shadow:
    4px 4px 0 var(--blood),
    8px 8px 0 rgba(0,0,0,.6);
  letter-spacing:.005em;
}
.hero .tag{
  margin-top:24px; font-size:clamp(13px,1.6vw,17px);
  letter-spacing:.28em; text-transform:uppercase; color:var(--ink-dim);
}
/* marquee bulbs */
.bulbs{display:flex;justify-content:center;gap:14px;margin:30px 0 4px;}
.bulbs i{
  width:9px;height:9px;border-radius:50%;
  background:var(--marquee);
  box-shadow:0 0 8px 2px rgba(246,194,74,.6);
  animation:flick 2.4s infinite steps(1);
}
.bulbs i:nth-child(2n){animation-delay:.4s;background:var(--blood-lit);box-shadow:0 0 8px 2px rgba(255,81,64,.6);}
.bulbs i:nth-child(3n){animation-delay:.9s;}
.bulbs i:nth-child(5n){animation-delay:1.4s;}
@keyframes flick{0%,92%{opacity:1}93%,100%{opacity:.25}}

/* ----------------------------------------------------------
   A-Z rail
   ---------------------------------------------------------- */
.azbar{
  position:sticky; top:57px; z-index:90;
  background:rgba(18,12,11,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  padding:9px 0;
}
.azbar-inner{
  display:flex; flex-wrap:wrap; gap:3px; justify-content:center;
  max-width:var(--maxw); margin:0 auto; padding:0 16px;
}
.azbar a{
  font-size:13px; letter-spacing:.05em; font-weight:500;
  width:26px; height:26px; display:grid; place-items:center;
  color:var(--ink-dim); border-radius:2px; transition:.15s;
}
.azbar a:hover{color:var(--frame);background:var(--marquee);}

/* ----------------------------------------------------------
   Letter sections + grid
   ---------------------------------------------------------- */
.letter-head{
  display:flex; align-items:baseline; gap:18px;
  margin:clamp(30px,5vw,56px) 0 22px;
  padding-bottom:10px; border-bottom:1px solid var(--line);
}
.letter-head h2{
  font-family:"Ultra",serif; font-weight:400; margin:0;
  font-size:clamp(40px,7vw,84px); line-height:.8;
  color:var(--blood);
  text-shadow:2px 2px 0 rgba(0,0,0,.6);
}
.letter-head span{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:clamp(14px,2vw,26px);
}
@media(max-width:520px){ .grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;} }

.card{display:block;position:relative;transition:transform .2s;}
.card:hover{transform:translateY(-4px);}
.poster{
  position:relative; aspect-ratio:2/3; overflow:hidden;
  background:var(--frame); border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.poster img{
  width:100%; height:100%; object-fit:cover; object-position:50% 18%;
  filter:saturate(.92) contrast(1.02);
  transition:transform .5s ease, filter .3s;
}
.card:hover .poster img{transform:scale(1.06);filter:saturate(1.1) contrast(1.05);}
.poster::after{ /* sheen + bottom fade */
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(8,5,4,.85));
  pointer-events:none;
}
.sheets{
  position:absolute; top:8px; right:8px; z-index:2;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  background:var(--blood); color:#fff; padding:3px 7px; border-radius:1px;
  box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.card-title{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:10px 11px 12px;
  font-size:14px; line-height:1.12; font-weight:500; letter-spacing:.01em;
  color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}
.card:hover .card-title{color:var(--marquee);}

.noresults{
  display:none; text-align:center; padding:80px 20px;
  color:var(--ink-dim); letter-spacing:.2em; text-transform:uppercase; font-size:14px;
}

/* ----------------------------------------------------------
   Footer
   ---------------------------------------------------------- */
.foot{
  margin-top:70px; padding:40px 0 60px; border-top:1px solid var(--line);
  text-align:center; color:var(--ink-faint);
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
}
.foot b{color:var(--marquee);}

/* ----------------------------------------------------------
   FILM (detail) PAGE
   ---------------------------------------------------------- */
.film-nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 0; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-dim);
}
.film-nav a{transition:color .15s;} .film-nav a:hover{color:var(--marquee);}
.film-nav .back{color:var(--ink);}
.film-nav .arrow{display:inline-flex;align-items:center;gap:8px;max-width:40%;}
.film-nav .arrow.tx{justify-content:flex-end;text-align:right;}
.film-nav .arrow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media(max-width:640px){ .film-nav .arrow span{display:none;} }

.film-head{
  text-align:center; padding:clamp(20px,5vw,56px) 0 clamp(28px,5vw,52px);
}
.film-head .kicker{font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--marquee);margin-bottom:18px;}
.film-head h1{
  font-family:"Ultra",serif; font-weight:400; margin:0;
  font-size:clamp(34px,8vw,96px); line-height:.9; color:var(--ink);
  text-shadow:3px 3px 0 var(--blood),6px 6px 0 rgba(0,0,0,.55);
}
.film-head .meta{margin-top:22px;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-dim);}

/* Film synopsis + director credit */
.film-info{
  max-width:680px; margin:0 auto clamp(28px,4vw,52px);
  padding:0 clamp(16px,4vw,56px);
  text-align:center;
}
.film-synopsis{
  font-size:clamp(15px,1.8vw,17px); line-height:1.7; font-weight:300;
  color:var(--ink-dim); letter-spacing:.01em; margin:0 0 14px;
  font-family:"Oswald",sans-serif;
}
.film-director{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint); margin:0;
  border-top:1px solid var(--line); padding-top:14px;
}

.sheet-grid{
  display:grid; gap:clamp(18px,3vw,38px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  justify-items:center; padding-bottom:30px;
}
.sheet-grid.solo{grid-template-columns:minmax(0,560px);justify-content:center;}
.sheet{
  cursor:zoom-in; width:100%; position:relative;
  border:1px solid var(--line); background:var(--frame);
  box-shadow:var(--shadow); transition:transform .25s,box-shadow .25s;
}
.sheet:hover{transform:translateY(-5px);box-shadow:0 26px 50px -20px rgba(0,0,0,.95);}
.sheet img{width:100%;height:auto;}
.sheet .no{
  position:absolute; bottom:8px; left:8px;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  background:rgba(12,8,7,.8); color:var(--marquee); padding:3px 8px; border:1px solid var(--line);
}

/* lightbox */
.lb{
  position:fixed; inset:0; z-index:10000; display:none;
  background:rgba(6,3,3,.96); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; padding:24px;
}
.lb.open{display:flex;}
.lb img{max-width:94vw;max-height:90vh;width:auto;height:auto;box-shadow:0 30px 80px rgba(0,0,0,.8);border:1px solid var(--line);}
.lb-btn{
  position:absolute; background:none; border:none; color:var(--ink);
  font-size:40px; cursor:pointer; padding:16px; line-height:1;
  font-family:"Oswald"; opacity:.7; transition:.15s;
}
.lb-btn:hover{opacity:1;color:var(--marquee);}
.lb-close{top:10px;right:14px;font-size:34px;}
.lb-prev{left:6px;top:50%;transform:translateY(-50%);}
.lb-next{right:6px;top:50%;transform:translateY(-50%);}
.lb-cap{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);}