/* ============ MIDNIGHT REELS FILM FESTIVAL — shared styles ============ */

:root{
  --black: #0a0607;
  --maroon-deep: #2b0912;
  --maroon-mid: #4a1020;
  --card: #120b0d;
  --card-border: rgba(255,61,110,0.28);
  --pink: #ff3d6e;
  --pink-glow: rgba(255,61,110,0.55);
  --mint: #6fe3c4;
  --cream: #f2ece1;
  --cream-dim: #b9aea3;
  --tape-beige: #e9dfc6;
  --gold: #f2dd8f;
  --line: rgba(242,236,225,0.12);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(ellipse 120% 50% at 50% 0%, var(--maroon-mid) 0%, var(--maroon-deep) 32%, var(--black) 68%),
    var(--black);
  background-attachment:fixed;
  color:var(--cream);
  font-family:'Zilla Slab', Georgia, serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:200;
  opacity:0.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

.wrap{max-width:680px; margin:0 auto; padding:0 24px;}
a{color:inherit;}
img{max-width:100%; display:block;}

.eyebrow{
  font-family:'Space Mono', monospace;
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-size:12px;
  font-weight:700;
  color:var(--mint);
}
.display{
  font-family:'Anton', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:0.94;
  color:var(--cream);
  text-shadow:0 0 12px var(--pink-glow), 0 0 26px rgba(255,61,110,0.3);
}

/* ---------- NAV ---------- */
nav.sitenav{
  position:sticky; top:0; z-index:100;
  background:rgba(8,4,5,0.86);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
nav.sitenav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px;
  max-width:680px;
  flex-wrap:wrap; gap:10px;
}
nav.sitenav .brand{
  font-family:'Anton', sans-serif;
  text-transform:uppercase;
  font-size:15px;
  letter-spacing:0.02em;
  color:var(--cream);
  text-decoration:none;
  text-shadow:0 0 8px var(--pink-glow);
  white-space:nowrap;
}
nav.sitenav .brand span{color:var(--pink);}
nav.sitenav .links{
  display:flex; align-items:center; gap:16px;
  font-family:'Space Mono', monospace;
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
}
nav.sitenav .links a{
  color:var(--cream-dim);
  text-decoration:none;
  padding:4px 0;
  border-bottom:1px solid transparent;
}
nav.sitenav .links a:hover, nav.sitenav .links a.current{
  color:var(--mint);
  border-bottom-color:var(--mint);
}

/* ---------- HERO ---------- */
header.hero{ position:relative; padding:48px 0 56px; text-align:center; overflow:hidden; }
.hero-inner{position:relative; z-index:2;}
.top-bar{
  display:flex; justify-content:space-between; align-items:center;
  font-family:'Space Mono', monospace;
  font-size:11px; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--cream-dim);
  margin-bottom:34px;
}
.top-bar .rec{color:var(--pink);}
.top-bar .rec::before{ content:"●"; margin-right:6px; animation:blink 1.6s infinite; }
@keyframes blink{0%,45%{opacity:1;}50%,95%{opacity:0.15;}100%{opacity:1;}}
.presents-mark{
  font-family:'Space Mono', monospace;
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--cream-dim);
  margin-bottom:6px;
}
.present-pill{
  display:inline-block;
  font-family:'Space Mono', monospace;
  font-size:11px; letter-spacing:0.3em;
  color:var(--mint);
  border:1px solid rgba(111,227,196,0.35);
  padding:4px 14px;
  border-radius:999px;
  margin-bottom:22px;
}
h1.title{ font-size:clamp(44px, 13vw, 72px); margin:0 0 6px; }
h1.title .sub{
  display:block;
  font-size:clamp(24px, 7vw, 36px);
  color:var(--pink);
  text-shadow:0 0 16px var(--pink-glow), 0 0 36px rgba(255,61,110,0.4);
}
.tagline{
  font-style:italic;
  font-size:18px;
  color:var(--cream);
  max-width:440px;
  margin:20px auto 8px;
  line-height:1.5;
}
.status-line{
  font-family:'Space Mono', monospace;
  font-size:12px; letter-spacing:0.08em;
  color:var(--cream-dim);
  margin-top:16px;
  line-height:1.9;
}
.status-line .dot{color:var(--mint); margin:0 8px;}

.period-tag{
  display:inline-block;
  font-family:'Space Mono', monospace;
  font-size:11px; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--mint);
  border:1px solid rgba(111,227,196,0.35);
  padding:5px 14px;
  border-radius:999px;
  margin-top:6px;
}
.period-tag.gold{ color:var(--gold); border-color:rgba(242,221,143,0.4); margin-left:8px; }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Anton', sans-serif;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-size:16px;
  color:var(--cream);
  background:rgba(255,61,110,0.08);
  border:1px solid var(--pink);
  box-shadow:0 0 18px rgba(255,61,110,0.35), inset 0 0 12px rgba(255,61,110,0.12);
  border-radius:999px;
  padding:14px 28px;
  text-decoration:none;
  cursor:pointer;
  margin-top:26px;
}
.btn:hover{background:rgba(255,61,110,0.16);}
.btn .play{font-size:12px;}

.btn-ghost{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Space Mono', monospace;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--mint);
  background:transparent;
  border:1px solid rgba(111,227,196,0.4);
  border-radius:999px;
  padding:10px 20px;
  text-decoration:none;
  margin-top:14px;
}

.btn-external{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Anton', sans-serif;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-size:15px;
  color:var(--black);
  background:var(--mint);
  border:1px solid var(--mint);
  box-shadow:0 0 18px rgba(111,227,196,0.3);
  border-radius:999px;
  padding:14px 26px;
  text-decoration:none;
  cursor:pointer;
}
.btn-external:hover{filter:brightness(1.08);}

/* ---------- SECTION SHELL ---------- */
section{padding:56px 0;}
.section-head{text-align:center; margin-bottom:30px;}
.section-head .eyebrow{display:block; margin-bottom:10px;}
.section-head h2{font-size:clamp(28px, 8.5vw, 40px); margin:0;}
.section-body{
  text-align:center;
  color:var(--cream-dim);
  font-size:16px;
  line-height:1.7;
  max-width:480px;
  margin:0 auto;
}
.divider{
  width:64px; height:2px; background:var(--pink);
  box-shadow:0 0 8px var(--pink-glow);
  margin:14px auto 0;
}
hr.rule{border:none; border-top:1px solid var(--line); margin:0;}

.pullquote{
  font-family:'Zilla Slab', serif;
  font-style:italic;
  font-size:20px;
  line-height:1.6;
  color:var(--cream);
  text-align:center;
  max-width:480px;
  margin:0 auto;
}
.pullquote::before{content:"“"; color:var(--pink); font-family:'Anton',sans-serif; font-size:24px; margin-right:2px;}
.pullquote::after{content:"”"; color:var(--pink); font-family:'Anton',sans-serif; font-size:24px; margin-left:2px;}

/* ---------- LIST CARDS (why submit / guidelines) ---------- */
.list-cards{ display:flex; flex-direction:column; gap:14px; margin-top:28px; }
.list-card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:18px 20px;
  display:flex; gap:14px; align-items:flex-start;
}
.list-card .mark{
  font-family:'Space Mono', monospace;
  color:var(--pink);
  font-size:13px;
  font-weight:700;
  margin-top:3px;
  min-width:20px;
}
.list-card h4{
  font-family:'Anton', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.02em;
  font-size:16px;
  margin:0 0 4px;
  color:var(--cream);
}
.list-card p{ margin:0; color:var(--cream-dim); font-size:14.5px; line-height:1.6; }

/* ---------- TEASER CARDS (link out to Showcase / Winners) ---------- */
.teaser-grid{ display:flex; flex-direction:column; gap:16px; margin-top:30px; }
.teaser-card{
  display:block;
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:22px;
  text-decoration:none;
  transition:border-color 0.15s, transform 0.15s;
}
.teaser-card:hover{ border-color:var(--pink); transform:translateY(-2px); }
.teaser-card .eyebrow{ display:block; margin-bottom:8px; }
.teaser-card h3{
  font-family:'Anton', sans-serif; text-transform:uppercase; font-size:22px;
  margin:0 0 8px; color:var(--cream); text-shadow:0 0 10px var(--pink-glow);
}
.teaser-card p{ margin:0 0 10px; color:var(--cream-dim); font-size:14.5px; line-height:1.6; }
.teaser-card .go{
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:0.1em;
  color:var(--mint); text-transform:uppercase;
}

/* ---------- THE MIDNIGHT REEL (annual award intro, on home) ---------- */
.reel-banner{
  text-align:center;
  max-width:480px;
  margin:30px auto 0;
  padding:22px 22px;
  border:1px solid rgba(242,221,143,0.4);
  border-radius:14px;
  background:linear-gradient(160deg, rgba(242,221,143,0.07), transparent 65%);
}
.reel-banner .trophy{ font-size:26px; display:block; margin-bottom:10px; color:var(--gold); }
.reel-banner h3{
  font-family:'Anton', sans-serif; text-transform:uppercase; font-size:20px;
  margin:0 0 10px; color:var(--gold); text-shadow:0 0 10px rgba(242,221,143,0.5);
}
.reel-banner p{ margin:0; color:var(--cream); font-size:14.5px; line-height:1.65; }

/* ---------- DATES GRID ---------- */
.dates-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
  margin-top:30px; text-align:center;
}
.dates-grid .date-item .d{ font-family:'Space Mono', monospace; font-weight:700; font-size:14px; color:var(--pink); }
.dates-grid .date-item .l{
  font-family:'Space Mono', monospace; font-size:9.5px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--cream-dim); margin-top:6px;
}
.dates-grid .date-item::before{ content:"—"; display:block; color:rgba(255,61,110,0.4); margin-bottom:8px; font-size:11px; }

/* ---------- SUBMIT FORM ---------- */
.submit-form{ display:flex; flex-direction:column; gap:12px; margin-top:26px; }
.submit-form input{
  background:rgba(255,255,255,0.03);
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px 16px;
  color:var(--cream);
  font-family:'Zilla Slab', serif;
  font-size:15px;
}
.submit-form input::placeholder{color:var(--cream-dim);}
.submit-form input:focus{outline:2px solid var(--pink); outline-offset:2px;}
.submit-form button{
  font-family:'Anton', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.04em;
  font-size:15px;
  color:var(--cream);
  background:rgba(255,61,110,0.1);
  border:1px solid var(--pink);
  box-shadow:0 0 16px rgba(255,61,110,0.3);
  border-radius:999px;
  padding:14px;
  cursor:pointer;
}
.submit-form button:hover{background:rgba(255,61,110,0.18);}
.form-note{
  font-family:'Space Mono', monospace; font-size:10.5px; color:var(--cream-dim);
  text-align:center; margin-top:10px;
}
.submit-actions{ display:flex; flex-direction:column; gap:12px; align-items:center; margin-top:8px; }

/* ---------- TAPE STICKER ---------- */
.tape-sticker{
  display:inline-block;
  background:var(--tape-beige);
  color:#1a1010;
  font-family:'Permanent Marker', cursive;
  font-size:13px;
  padding:6px 14px;
  border-radius:3px;
  transform:rotate(-2deg);
}

/* ---------- WINNERS: compact rows (monthly / craft) ---------- */
.category-list{ display:flex; flex-direction:column; gap:10px; margin-top:26px; }
.category-row{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 18px;
}
.category-row .cat-name{
  font-family:'Anton', sans-serif; text-transform:uppercase; letter-spacing:0.02em;
  font-size:14px; color:var(--cream);
}
.category-row .cat-winner{
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:0.03em;
  color:var(--cream-dim); text-align:right; white-space:nowrap;
}
.category-row .cat-winner.tba{ font-style:italic; opacity:0.7; }

.subsection-head{ text-align:center; margin:44px 0 4px; }
.subsection-head .eyebrow{ display:block; margin-bottom:8px; }
.subsection-head h3{
  font-family:'Anton', sans-serif; text-transform:uppercase; font-size:21px;
  margin:0; color:var(--cream);
}
.subsection-note{
  text-align:center; color:var(--cream-dim); font-size:13.5px; line-height:1.6;
  max-width:440px; margin:8px auto 0;
}

/* ---------- WINNERS: award seal cards (annual, top tier) ---------- */
.award-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:30px; }
@media(min-width:600px){ .award-grid{grid-template-columns:1fr 1fr;} }
.award-card{
  background:var(--card);
  border:1px solid rgba(242,221,143,0.35);
  border-radius:14px;
  padding:24px 20px;
  position:relative;
  overflow:hidden;
  background-image:linear-gradient(160deg, rgba(242,221,143,0.06), transparent 60%);
}
.award-card::before{
  content:"";
  position:absolute; top:-30px; right:-30px;
  width:90px; height:90px; border-radius:50%;
  background:radial-gradient(circle, rgba(242,221,143,0.28) 0%, transparent 70%);
}
.award-card .trophy{ font-size:20px; color:var(--gold); margin-bottom:10px; display:block; }
.award-card .cat-name{
  font-family:'Anton', sans-serif; text-transform:uppercase; font-size:18px;
  letter-spacing:0.02em; color:var(--cream); margin-bottom:12px;
  text-shadow:0 0 8px rgba(242,221,143,0.4);
}
.award-card .winner-slate{
  background:rgba(255,255,255,0.02);
  border:1px dashed rgba(242,221,143,0.35);
  border-radius:8px;
  padding:16px;
  text-align:center;
}
.award-card .winner-name{
  font-family:'Space Mono', monospace; font-size:12px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--cream-dim);
}
.award-card .winner-film{ font-style:italic; color:var(--cream-dim); font-size:13px; margin-top:4px; }

/* ---------- SHOWCASE: PREVIEW / TV WIDGET ---------- */
.tv{
  position:relative;
  background:#050303;
  border:1px solid rgba(255,61,110,0.25);
  border-radius:18px;
  padding:20px 18px 16px;
  box-shadow:0 0 40px rgba(255,61,110,0.12), inset 0 0 60px rgba(0,0,0,0.6);
  margin-top:30px;
}
.tv-screen{
  position:relative; aspect-ratio:4/3; border-radius:8px; overflow:hidden;
  background:#020101; display:flex; align-items:center; justify-content:center; text-align:center;
}
.tv-screen .static{
  position:absolute; inset:0; opacity:0.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:staticmove 0.4s steps(4) infinite;
  mix-blend-mode:screen;
}
@keyframes staticmove{0%{transform:translate(0,0);}100%{transform:translate(-3%,2%);}}
.tv-content{position:relative; z-index:2; padding:20px;}
.tv-content .ch-label{ font-family:'Space Mono', monospace; color:var(--mint); font-size:12px; letter-spacing:0.15em; margin-bottom:10px; }
.tv-content .ch-title{
  font-family:'Anton', sans-serif; text-transform:uppercase; font-size:26px; color:var(--cream);
  text-shadow:0 0 10px var(--pink-glow); margin-bottom:8px;
}
.tv-content .ch-tagline{font-style:italic; color:var(--cream-dim); font-size:14px;}
.tv-footer{
  display:flex; justify-content:space-between; align-items:center;
  font-family:'Space Mono', monospace; font-size:10px; letter-spacing:0.15em; text-transform:uppercase;
  color:rgba(242,236,225,0.35); padding:10px 4px 0;
}
.channel-list{display:flex; flex-direction:column; gap:10px; margin-top:18px;}
.channel-btn{
  display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--line);
  border-radius:10px;
  padding:13px 16px;
  font-family:'Space Mono', monospace;
  letter-spacing:0.05em;
  color:var(--cream-dim);
  cursor:pointer;
  text-align:left;
  width:100%;
  font-size:13px;
  transition:border-color 0.15s, color 0.15s, background 0.15s;
}
.channel-btn .ch-num{color:var(--mint); font-weight:700; min-width:44px;}
.channel-btn.active{border-color:var(--pink); color:var(--cream); background:rgba(255,61,110,0.06);}
.channel-btn.active .ch-num{color:var(--pink);}
.channel-btn:hover{color:var(--cream);}
.rec-note{
  text-align:center; font-family:'Space Mono', monospace;
  font-size:11px; letter-spacing:0.1em; color:rgba(242,236,225,0.4);
  margin-top:16px;
}

/* ---------- SHOWCASE: PLAYLIST PLAYER ---------- */
.playlist-frame{
  margin-top:30px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--card-border);
  background:var(--card);
}
.playlist-frame iframe{
  width:100%; aspect-ratio:16/9; border:none; display:block;
}
.playlist-frame .slate{
  aspect-ratio:16/9;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 8px), #0d0708;
  border:1px dashed rgba(255,61,110,0.3);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
.playlist-frame .slate .icon{font-size:28px; color:var(--pink); margin-bottom:8px; opacity:0.8;}
.playlist-frame .slate .slate-label{
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--cream-dim);
}

/* ---------- SHOWCASE: FILM / LINEUP CARDS ---------- */
.lineup-grid{margin-top:30px;}
@media(min-width:640px){ .lineup-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;} }
.lineup-card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:26px 22px;
  margin-bottom:20px;
}
@media(min-width:640px){ .lineup-card{margin-bottom:0;} }
.lineup-card .slate{
  aspect-ratio:16/9;
  border-radius:8px;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 8px), #0d0708;
  border:1px dashed rgba(255,61,110,0.3);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  margin-bottom:16px;
}
.lineup-card .slate .icon{font-size:28px; color:var(--pink); margin-bottom:8px; opacity:0.8;}
.lineup-card .slate .slate-label{
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--cream-dim);
}
.lineup-card iframe{
  width:100%; aspect-ratio:16/9; border-radius:8px; border:none; margin-bottom:16px; display:block;
}
.lineup-card .ch-tag{
  font-family:'Space Mono', monospace; font-size:11px; color:var(--mint); letter-spacing:0.12em; margin-bottom:8px;
}
.lineup-card h3{
  font-family:'Anton', sans-serif; text-transform:uppercase; font-size:24px;
  margin:0 0 8px; line-height:1.05; text-shadow:0 0 10px var(--pink-glow);
}
.lineup-card p{ color:var(--cream-dim); font-style:italic; font-size:14.5px; line-height:1.6; margin:0 0 14px; }

/* ---------- FOOTER ---------- */
footer{padding:48px 0 60px; text-align:center;}
footer .fmg{
  font-family:'Space Mono', monospace;
  font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--cream-dim);
}
footer .fmg span{color:var(--mint);}
footer .foot-links{
  margin-top:14px;
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  font-family:'Space Mono', monospace;
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
}
footer .foot-links a{color:var(--cream-dim); text-decoration:none;}
footer .foot-links a:hover{color:var(--mint);}
footer .legal{
  margin-top:14px;
  font-family:'Space Mono', monospace;
  font-size:10px;
  color:rgba(242,236,225,0.3);
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important;}
  html{scroll-behavior:auto;}
}
:focus-visible{outline:2px solid var(--mint); outline-offset:3px;}