/* ==========================================================================
   THE MIDNIGHT HOUR — station stylesheet
   Design language: 1990s late-night AM radio. Tuner dials, case-file
   dossiers, cassette tape logs, CRT static. Every structural device below
   is borrowed from the show's own world.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Courier+Prime:wght@400;700&display=swap');

:root{
  /* --- palette --- */
  --void:       #0a0c11;
  --panel:      #14171f;
  --panel-2:    #1a1e28;
  --bone:       #e8e2d0;
  --bone-dim:   #b6ae9c;
  --amber:      #e2a33d;
  --amber-dim:  #9c7433;
  --blood:      #8f2027;
  --blood-brt:  #d1483f;
  --muted:      #5c6472;
  --line:       rgba(232,226,208,0.14);
  --line-brt:   rgba(226,163,61,0.35);

  /* --- type --- */
  --f-display: 'Special Elite', 'Courier New', monospace;
  --f-body: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono: 'Courier Prime', 'Courier New', monospace;

  --container: 1080px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4{ margin:0; font-family: var(--f-display); font-weight:400; letter-spacing: .01em; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background: var(--blood); color: var(--bone); }

:focus-visible{
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}

/* --- atmosphere: grain + scanlines, fixed, non-interactive --- */
body::before{
  content:"";
  position: fixed; inset:0;
  pointer-events:none;
  z-index: 500;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%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");
}
body::after{
  content:"";
  position: fixed; inset:0;
  pointer-events:none;
  z-index: 501;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.0) 0px,
    rgba(0,0,0,0.0) 2px,
    rgba(0,0,0,0.12) 3px
  );
  opacity:.35;
}

.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ==========================================================================
   NAV — the console
   ========================================================================== */
.station-bar{
  position: sticky; top:0; z-index: 300;
  background: rgba(10,12,17,0.88);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.station-bar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:40px; width:40px; object-fit:contain; filter: drop-shadow(0 0 6px rgba(226,163,61,.25)); }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text .call-letters{ font-family: var(--f-display); font-size: 1rem; letter-spacing:.08em; color:var(--bone); }
.brand-text .freq{ font-family: var(--f-mono); font-size:.68rem; color: var(--amber); letter-spacing:.14em; display:flex; align-items:center; gap:6px; }
.on-air-dot{
  width:7px; height:7px; border-radius:50%; background: var(--blood-brt);
  box-shadow: 0 0 6px 1px var(--blood-brt);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.station-nav{ display:flex; align-items:center; gap: 2px; }
.station-nav a{
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-dim);
  padding: 8px 14px;
  border-radius: 2px;
  transition: color .15s ease, background .15s ease;
  position: relative;
}
.station-nav a:hover{ color: var(--amber); background: rgba(226,163,61,.06); }
.station-nav a.active{ color: var(--amber); }
.station-nav a.active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:3px; height:1px; background: var(--amber);
}

.nav-toggle{
  display:none; background:none; border:1px solid var(--line); color: var(--bone);
  width:40px; height:40px; border-radius:2px; cursor:pointer; font-family: var(--f-mono);
}

@media (max-width: 760px){
  .nav-toggle{ display:block; }
  .station-nav{
    position:absolute; top:76px; left:0; right:0;
    flex-direction:column; align-items:stretch;
    background: rgba(10,12,17,.98);
    border-bottom: 1px solid var(--line);
    max-height:0; overflow:hidden;
  }
  .station-nav.open{ max-height: 400px; }
  .station-nav a{ padding: 14px 24px; border-top: 1px solid var(--line); }
}

/* ==========================================================================
   HERO — the tuner dial
   ========================================================================== */
.hero{
  position:relative;
  padding: 72px 0 56px;
  overflow:hidden;
  border-bottom: 1px solid var(--line);
}
.hero-glow{
  position:absolute; inset: -20% -10% auto -10%; height:70%;
  background: radial-gradient(ellipse at 50% 0%, rgba(226,163,61,.10), transparent 60%);
  pointer-events:none;
}
.eyebrow{
  font-family: var(--f-mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color: var(--amber); display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background: var(--amber-dim); }

.hero h1{
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1.02;
  color: var(--bone);
  text-shadow: 0 0 24px rgba(226,163,61,.18);
  max-width: 14ch;
}
.hero-sub{
  margin-top:22px;
  max-width: 62ch;
  color: var(--bone-dim);
  font-size: 1.05rem;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top: 32px; }

.btn{
  font-family: var(--f-mono); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  padding: 13px 22px; border-radius:2px; border:1px solid var(--line-brt);
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  background: transparent; color: var(--bone);
}
.btn:hover{ transform: translateY(-1px); border-color: var(--amber); }
.btn-primary{ background: var(--blood); border-color: var(--blood); color:#fff; }
.btn-primary:hover{ background: var(--blood-brt); border-color: var(--blood-brt); box-shadow: 0 0 22px rgba(209,72,63,.35); }
.btn-amber{ border-color: var(--amber-dim); color: var(--amber); }
.btn-amber:hover{ background: rgba(226,163,61,.08); box-shadow: 0 0 18px rgba(226,163,61,.18); }
.btn-ghost{ color: var(--bone-dim); }

/* the dial strip */
.dial{
  margin-top: 52px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border-radius: 3px;
  padding: 22px 26px 18px;
  position: relative;
}
.dial-readout{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family: var(--f-mono); color: var(--muted); font-size:.72rem; letter-spacing:.1em;
  margin-bottom: 14px; text-transform:uppercase;
}
.dial-readout .now{ color: var(--amber); }
.dial-track{
  position:relative; height: 46px;
  background: repeating-linear-gradient(
    to right, transparent, transparent 19px, var(--line) 19px, var(--line) 20px
  );
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.dial-numbers{
  display:flex; justify-content:space-between;
  font-family: var(--f-mono); font-size:.68rem; color: var(--muted); margin-top:8px;
}
.dial-needle{
  position:absolute; top:-6px; bottom:-6px; width:2px; background: var(--blood-brt);
  box-shadow: 0 0 10px 2px rgba(209,72,63,.7);
  left: 8%;
  animation: seek 3.6s cubic-bezier(.65,0,.35,1) 1 both;
}
.dial-needle::before{
  content:""; position:absolute; top:-5px; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:6px solid var(--blood-brt);
}
@keyframes seek{
  0%{ left:2%; }
  55%{ left:82%; }
  70%{ left:57%; }
  100%{ left:71.5%; }
}
.on-air-tag{
  position:absolute; right:20px; top:18px;
  font-family: var(--f-mono); font-size:.66rem; letter-spacing:.18em;
  border:1px solid var(--blood-brt); color: var(--blood-brt); padding:5px 10px; border-radius:2px;
  opacity:0; animation: flicker-in 0.6s steps(1) 2.2s 1 forwards;
}
@keyframes flicker-in{
  0%{ opacity:0; } 20%{ opacity:1; } 32%{ opacity:0; } 45%{ opacity:1; } 100%{ opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .dial-needle{ animation:none; left:71.5%; }
  .on-air-tag{ animation:none; opacity:1; }
  .on-air-dot{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ==========================================================================
   SECTIONS — generic
   ========================================================================== */
.section{ padding: 88px 0; border-bottom: 1px solid var(--line); }
.section:last-of-type{ border-bottom:none; }
.section-head{ margin-bottom: 46px; max-width: 62ch; }
.section-head h2{ font-size: clamp(1.7rem, 3.4vw, 2.4rem); color: var(--bone); }
.section-head p{ color: var(--bone-dim); margin-top:14px; }

.tick-label{
  font-family: var(--f-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color: var(--amber); margin-bottom: 12px; display:block;
}

/* ==========================================================================
   CAST — dossier cards
   ========================================================================== */
.dossier{
  border: 1px solid var(--line);
  background: var(--panel);
  margin-bottom: 26px;
  position: relative;
  overflow:hidden;
}
.dossier::before{
  content: attr(data-tab);
  position:absolute; top:0; left:24px;
  font-family: var(--f-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--void); background: var(--amber);
  padding: 4px 10px 3px;
  border-radius: 0 0 2px 2px;
}
.dossier-grid{
  display:grid; grid-template-columns: 200px 1fr; gap: 0;
}
.dossier-photo{
  padding: 40px 24px 24px;
  border-right: 1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:14px;
  background: var(--panel-2);
}
.dossier-photo img{
  width:150px; height:150px; object-fit:cover; border-radius:2px;
  filter: grayscale(.25) contrast(1.05);
  border: 1px solid var(--line);
}
.dossier-photo .work-link{
  font-family: var(--f-mono); font-size:.68rem; letter-spacing:.06em; color: var(--amber);
  text-align:center; border-bottom: 1px dashed var(--amber-dim); padding-bottom:2px;
}
.dossier-photo .work-link:hover{ color:var(--bone); border-color: var(--bone); }
.dossier-body{ padding: 40px 30px 30px; }
.dossier-body .role{ font-family: var(--f-display); font-size:1.3rem; color:var(--bone); margin-bottom:2px; }
.dossier-body .actor{ font-family: var(--f-mono); font-size:.76rem; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px; display:block; }
.dossier-body p{ color: var(--bone-dim); font-size:.96rem; }
.dossier-body p:last-child{ margin-bottom:0; }

.dossier-redacted .dossier-body p{ font-family: var(--f-mono); color:var(--muted); font-style:italic; }

@media (max-width: 640px){
  .dossier-grid{ grid-template-columns: 1fr; }
  .dossier-photo{ border-right:none; border-bottom:1px solid var(--line); flex-direction:row; justify-content:flex-start; padding-top:30px; }
  .dossier-photo img{ width:88px; height:88px; }
}

/* ==========================================================================
   AUTHOR
   ========================================================================== */
.author-grid{
  display:grid; grid-template-columns: 260px 1fr; gap: 48px; align-items:start;
}
.author-photo{ position:relative; }
.author-photo img{ border:1px solid var(--line); filter: grayscale(.2) contrast(1.05); }
.author-photo .frame-tag{
  font-family: var(--f-mono); font-size:.62rem; letter-spacing:.12em; color: var(--muted);
  margin-top:10px; text-transform:uppercase;
}
.author-body p{ color: var(--bone-dim); }
.author-body strong{ color: var(--bone); font-weight:600; }
@media (max-width: 720px){ .author-grid{ grid-template-columns: 1fr; max-width:320px; } }

/* ==========================================================================
   LISTEN — platform grid
   ========================================================================== */
.platform-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:14px;
}
.platform-card{
  border:1px solid var(--line); background: var(--panel);
  padding: 22px 22px 20px; display:flex; align-items:center; justify-content:space-between;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.platform-card:hover{ border-color: var(--amber-dim); background: var(--panel-2); transform: translateY(-2px); }
.platform-card .name{ font-family: var(--f-display); font-size:1.05rem; color: var(--bone); }
.platform-card .go{ font-family: var(--f-mono); color: var(--amber); font-size:.85rem; }

/* ==========================================================================
   EPISODES — tape log
   ========================================================================== */
.season-tabs{ display:flex; gap:10px; margin-bottom:40px; }
.season-tab{
  font-family: var(--f-mono); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  padding: 10px 18px; border:1px solid var(--line); color: var(--bone-dim); cursor:pointer; background:transparent;
}
.season-tab.active{ color: var(--void); background: var(--amber); border-color: var(--amber); }

.season-panel{ display:none; }
.season-panel.active{ display:block; }

.tape{
  border:1px solid var(--line); background: var(--panel);
  margin-bottom:16px;
}
.tape-head{
  display:grid; grid-template-columns: 64px 96px 1fr auto; align-items:center; gap:18px;
  padding: 18px 22px;
}
.tape-num{ font-family: var(--f-mono); color: var(--amber); font-size:1rem; }
.tape-thumb{ width:96px; height:64px; object-fit:cover; border:1px solid var(--line); }
.tape-title{ font-family: var(--f-display); font-size:1.05rem; color: var(--bone); }
.tape-toggle{
  font-family: var(--f-mono); font-size:.68rem; color: var(--muted); letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line); padding:7px 12px; background:none; cursor:pointer; white-space:nowrap;
}
.tape-toggle:hover{ color: var(--amber); border-color: var(--amber-dim); }
.tape-body{ padding: 0 22px 24px 22px; display:none; }
.tape-body.open{ display:block; }
.tape-body p{ color: var(--bone-dim); font-size:.95rem; }
.tape-credits{
  font-family: var(--f-mono); font-size:.82rem; color: var(--bone-dim); line-height:1.9;
  border-top: 1px dashed var(--line); padding-top:16px; margin-top:16px;
}
.tape-credits .lbl{ color: var(--muted); }
.tape-credits .grp{ color: var(--amber); text-transform:uppercase; letter-spacing:.1em; font-size:.7rem; display:block; margin: 14px 0 6px; }

@media (max-width: 620px){
  .tape-head{ grid-template-columns: 40px 72px 1fr; }
  .tape-toggle{ grid-column: 1 / -1; justify-self:start; margin-top:6px; }
  .tape-thumb{ width:72px; height:48px; }
}

/* ==========================================================================
   FOOTER — sign-off
   ========================================================================== */
.footer{ padding: 56px 0 40px; }
.footer .wrap{ display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between; }
.footer-brand{ font-family: var(--f-display); color: var(--bone-dim); font-size:.95rem; }
.footer-links{ display:flex; gap:22px; }
.footer-links a{ font-family: var(--f-mono); font-size:.76rem; letter-spacing:.08em; color: var(--bone-dim); text-transform:uppercase; }
.footer-links a:hover{ color: var(--amber); }
.footer-fine{ font-family: var(--f-mono); font-size:.7rem; color: var(--muted); margin-top:22px; line-height:1.8; }

/* --- credits disclosure (episodes page) --- */
.tape-body{ display:block; padding: 0 22px 24px 22px; }
.tape-body > p{ margin-bottom: 14px; }
details.credits-disclosure{ border-top: 1px dashed var(--line); padding-top: 14px; }
details.credits-disclosure summary{
  cursor:pointer; list-style:none;
  font-family: var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--amber); padding: 4px 0;
}
details.credits-disclosure summary::-webkit-details-marker{ display:none; }
details.credits-disclosure summary::before{ content:"+ "; }
details.credits-disclosure[open] summary::before{ content:"– "; }
details.credits-disclosure[open] summary{ margin-bottom:10px; }

/* page intro block used on inner pages */
.page-hero{ padding: 56px 0 44px; border-bottom:1px solid var(--line); }
.page-hero h1{ font-size: clamp(2.1rem,4.4vw,3rem); }
.page-hero p{ color: var(--bone-dim); margin-top:14px; max-width:60ch; }