/* ════════════════════════════════════════════════════
   ACCIDENTALLYINTERESTING.COM — style.css
   "Case File" — dark analog/VHS + militaristic case-file aesthetic
   ════════════════════════════════════════════════════ */

:root {
  --bg:             #0b0c09;
  --paper:          #191a13;
  --paper-hi:       #21231a;
  --olive:          #9db05c;
  --olive-dim:      #798a44;
  --olive-faint:    rgba(157,176,92,0.08);
  --hazard:         #f0c419;
  --stamp-red:      #c0392b;
  --text-primary:   #e7e6d8;
  --text-secondary: #a3a58c;
  --text-muted:     #55583f;
  --border:         1px solid rgba(157,176,92,0.22);
  --glow-olive:     0 0 4px #9db05c, 0 0 14px rgba(157,176,92,0.5), 0 0 30px rgba(157,176,92,0.18);
  --glow-text:      0 0 6px #9db05c, 0 0 18px rgba(157,176,92,0.4);
  --font-display:   'Bebas Neue', sans-serif;
  --font-stencil:   'Black Ops One', sans-serif;
  --font-type:      'Special Elite', monospace;
  --font-crt:       'VT323', monospace;
  --radius:         2px;
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scrollbar-width: thin; scrollbar-color: var(--olive) #101208; }

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 15% 15%, rgba(157,176,92,0.05) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 75%, rgba(192,57,43,0.04) 0%, transparent 55%);
  color: var(--text-primary);
  font-family: var(--font-type);
  font-size: 15px;
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
}

#scanline { position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0.28;
  background: repeating-linear-gradient(to bottom, transparent 0px, transparent 2px, rgba(0,0,0,0.14) 2px, rgba(0,0,0,0.14) 4px); }

#grain { position: fixed; inset: -50px; z-index: 9997; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
  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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 1.4s steps(4) infinite; }
@keyframes grainShift { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-2%)} 75%{transform:translate(-2%,-3%)} 100%{transform:translate(0,0)} }

#page { max-width: 760px; margin: 0 auto; padding: 0 20px 60px; }

/* ── HEADER ── */
header { padding: 44px 0 26px; text-align: center; position: relative; }

.rec-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-crt); font-size: 1rem; letter-spacing: 0.12em;
  color: var(--text-muted); margin-bottom: 18px;
}
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--stamp-red); box-shadow: 0 0 6px var(--stamp-red);
  animation: recBlink 1.6s ease-in-out infinite; }
@keyframes recBlink { 0%,100%{opacity:1} 50%{opacity:0.2} }
#counter { color: var(--olive-dim); }

.title-wrap { position: relative; display: inline-block; }

.site-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 10vw, 5rem);
  letter-spacing: 0.05em;
  color: var(--olive);
  text-shadow: var(--glow-text);
  line-height: 0.95;
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.site-title::before, .site-title::after {
  content: 'ACCIDENTALLY INTERESTING';
  position: absolute; left: 0; top: 0; width: 100%;
  clip-path: inset(0 0 0 0);
}
.site-title::before { color: #ff2b6d; opacity: 0.45; animation: glitchA 5s infinite linear; z-index: -1; }
.site-title::after  { color: #22e0ff; opacity: 0.35; animation: glitchB 6.5s infinite linear; z-index: -1; }
@keyframes glitchA {
  0%, 92%, 100% { transform: translate(0,0); clip-path: inset(0 0 0 0); }
  93% { transform: translate(-3px,1px); clip-path: inset(10% 0 60% 0); }
  95% { transform: translate(2px,-1px); clip-path: inset(60% 0 5% 0); }
  97% { transform: translate(-1px,0); clip-path: inset(30% 0 40% 0); }
}
@keyframes glitchB {
  0%, 90%, 100% { transform: translate(0,0); clip-path: inset(0 0 0 0); }
  91% { transform: translate(3px,-1px); clip-path: inset(70% 0 5% 0); }
  94% { transform: translate(-2px,1px); clip-path: inset(5% 0 70% 0); }
  98% { transform: translate(1px,0); clip-path: inset(40% 0 30% 0); }
}

/* CLASSIFIED stamp */
.stamp {
  position: absolute; top: -6px; right: -18px; transform: rotate(-11deg);
  font-family: var(--font-stencil); font-size: 0.8rem; letter-spacing: 0.08em;
  color: var(--stamp-red); border: 3px solid var(--stamp-red); border-radius: 4px;
  padding: 5px 10px; opacity: 0.85; mix-blend-mode: screen;
  box-shadow: 0 0 0 1px rgba(192,57,43,0.2) inset;
}
@media (max-width: 560px) { .stamp { position: static; display: inline-block; margin-top: 14px; transform: rotate(-4deg); } }

.tagline {
  font-family: var(--font-crt);
  font-size: 1.15rem;
  letter-spacing: 0.15em;
  color: var(--text-secondary);
  margin-top: 12px;
  min-height: 1.4em;
}
.tagline .cur { color: var(--olive); animation: blink 1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── NAV — folder tabs ── */
nav#main-nav {
  display: flex; justify-content: center; gap: 4px; flex-wrap: wrap;
  padding: 0; margin: 30px 0 26px; border-bottom: 2px solid rgba(157,176,92,0.3);
}
nav#main-nav a {
  font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-secondary); text-decoration: none;
  padding: 9px 18px 8px; border: 1px solid rgba(157,176,92,0.2); border-bottom: none;
  border-radius: 6px 6px 0 0; background: var(--paper-hi);
  transition: 0.2s ease; position: relative; top: 1px;
}
nav#main-nav a:hover, nav#main-nav a.active {
  color: var(--olive); border-color: rgba(157,176,92,0.6); text-shadow: var(--glow-text);
  background: var(--paper); border-bottom: 2px solid var(--paper);
}

/* ── HAZARD DIVIDER ── */
.hazard-divider {
  height: 6px; margin: 34px 0 24px; border-radius: 2px;
  background: repeating-linear-gradient(135deg, var(--hazard) 0 10px, #1a1a14 10px 20px);
  opacity: 0.55;
}

section { margin-bottom: 10px; }
.section-label {
  font-family: var(--font-crt); font-size: 1.05rem; letter-spacing: 0.2em;
  color: var(--olive-dim); text-transform: uppercase; margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.section-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(157,176,92,0.35), transparent); }

.section-label-lg { font-size: 1.6rem; }

.body-text { color: var(--text-secondary); margin-bottom: 10px; }
.body-text strong { color: var(--text-primary); }

.redacted {
  background: #0a0a0a; color: #0a0a0a; border-radius: 2px; padding: 0 4px;
  user-select: none; cursor: help; box-shadow: inset 0 0 0 1px rgba(157,176,92,0.15);
}
.redacted:hover { color: rgba(231,230,216,0.5); }

/* ── CASE CARD ── */
.tape-card {
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
}
.tape-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(157,176,92,0.5), transparent);
}
.tape-card .rivet { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: rgba(157,176,92,0.4); box-shadow: 0 0 3px rgba(157,176,92,0.3); }
.tape-card .rivet.tl { top: 8px; left: 8px; } .tape-card .rivet.tr { top: 8px; right: 8px; }
.tape-card .rivet.bl { bottom: 8px; left: 8px; } .tape-card .rivet.br { bottom: 8px; right: 8px; }

.tape-card.tag-eyes-only::after {
  content: 'EYES ONLY';
  position: absolute; top: -8px; right: 18px;
  background: rgba(192,57,43,0.16);
  color: var(--stamp-red);
  font-family: var(--font-stencil);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  padding: 4px 10px 6px;
  transform: rotate(3deg);
  border-radius: 1px;
  border: 1px solid rgba(192,57,43,0.4);
}

.ep-meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; margin-bottom: 8px; }
.ep-num { font-family: var(--font-crt); font-size: 1.1rem; color: #22e0ff; }
.ep-date, .ep-runtime { font-family: var(--font-crt); font-size: 1rem; color: var(--text-muted); }

.ep-hosts { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-crt); font-size: 1rem; color: var(--text-muted); }
.dogtag { width: 11px; height: 15px; border-radius: 3px; border: 1px solid var(--olive-dim); position: relative; display: inline-block; }
.dogtag::before { content: ''; position: absolute; top: -4px; left: 50%; transform: translateX(-50%); width: 6px; height: 4px; border: 1px solid var(--olive-dim); border-bottom: none; border-radius: 3px 3px 0 0; }

.ep-title {
  font-family: var(--font-display); font-size: 1.8rem; letter-spacing: 0.02em;
  color: var(--text-primary); text-shadow: 0 0 12px rgba(157,176,92,0.15); margin-bottom: 4px;
}
.ep-sub { font-family: var(--font-crt); font-size: 1rem; letter-spacing: 0.06em; color: var(--olive-dim); margin-bottom: 14px; }

.cassette {
  display: flex; align-items: center; gap: 14px; background: #000; border: 1px solid rgba(157,176,92,0.3);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px;
}
.reel { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--olive-dim); position: relative; flex-shrink: 0; animation: spin 3s linear infinite; }
.reel::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--olive-dim); opacity: 0.4; }
@keyframes spin { to { transform: rotate(360deg); } }
.cassette-label { font-family: var(--font-crt); font-size: 0.95rem; color: var(--text-secondary); letter-spacing: 0.08em; flex: 1; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; padding: 10px 22px; border-radius: var(--radius); border: 1px solid var(--olive);
  color: var(--olive); background: linear-gradient(180deg, rgba(157,176,92,0.14) 0%, rgba(157,176,92,0.03) 100%);
  transition: 0.2s ease;
}
.btn:hover { box-shadow: var(--glow-olive); text-shadow: var(--glow-text); background: linear-gradient(180deg, rgba(157,176,92,0.24) 0%, rgba(157,176,92,0.06) 100%); }

/* ── UPCOMING LIST ── */
.file-list { display: flex; flex-direction: column; gap: 8px; }
.file-row {
  display: flex; align-items: center; gap: 14px; background: var(--paper-hi); border: 1px solid rgba(157,176,92,0.14);
  border-left: 3px solid var(--hazard); border-radius: var(--radius); padding: 12px 16px; transition: 0.2s ease;
}
.file-row:hover { border-color: rgba(157,176,92,0.4); border-left-color: var(--hazard); }
.file-tag { font-family: var(--font-crt); font-size: 0.95rem; color: var(--text-muted); letter-spacing: 0.08em; white-space: nowrap; }
.file-status {
  margin-left: auto; font-family: var(--font-stencil); font-size: 0.6rem; letter-spacing: 0.08em;
  padding: 3px 9px; border: 1px solid rgba(157,176,92,0.3); border-radius: 2px; color: var(--olive-dim); white-space: nowrap;
}
.file-name { font-family: var(--font-type); font-size: 0.92rem; color: var(--text-secondary); }

/* ── GENERIC CASE-FILE CONTENT CARD (donate, about, etc.) ── */
.file-card {
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  position: relative;
  margin-bottom: 14px;
}
.file-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(157,176,92,0.5), transparent);
}
.file-card h3 {
  font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.03em;
  color: var(--text-primary); margin-bottom: 6px;
}
.file-card p { color: var(--text-secondary); font-size: 0.92rem; margin-bottom: 10px; }
.file-card a.btn { margin-top: 2px; }

/* ── V4V ── */
#v4v { text-align: center; }
.v4v-quote { font-style: italic; color: var(--text-primary); border-left: 2px solid rgba(157,176,92,0.4); padding-left: 14px; text-align: left; margin-bottom: 18px; }
.v4v-grid { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 20px; }
.v4v-item { flex: 1 1 150px; background: var(--paper); border: var(--border); border-radius: var(--radius); padding: 14px; }
.v4v-item h3 { font-family: var(--font-display); font-size: 1.2rem; color: var(--olive); letter-spacing: 0.05em; margin-bottom: 6px; }
.v4v-item p { font-size: 0.85rem; color: var(--text-secondary); }
.v4v-item .btn { margin-top: 10px; }
.v4v-section { text-align: center; }
.text-link { color: var(--olive); text-decoration: underline; text-decoration-color: rgba(157,176,92,0.35); }

/* ── FOOTER ── */
footer { border-top: var(--border); padding-top: 22px; text-align: center; margin-top: 30px; }
.footer-coords { font-family: var(--font-crt); font-size: 0.85rem; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 10px; }
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.footer-links a { font-family: var(--font-crt); font-size: 1rem; color: var(--text-secondary); text-decoration: none; padding: 4px 14px; border-right: 1px solid var(--text-muted); }
.footer-links a:last-child { border-right: none; }
.footer-links a:hover { color: var(--olive); text-shadow: var(--glow-text); }
.footer-copy { font-family: var(--font-crt); font-size: 0.95rem; letter-spacing: 0.08em; color: var(--text-muted); }

@media (max-width: 480px) {
  .cassette { flex-direction: column; align-items: flex-start; }
}

/* ════════════════════════════════════════════════════
   EPISODES — listing + detail pages
   ════════════════════════════════════════════════════ */

.feed-empty {
  font-family: var(--font-crt);
  font-size: 1.05rem;
  color: var(--text-muted);
  padding: 10px 0;
}

.excerpt { color: var(--text-secondary); font-size: 0.92rem; margin-bottom: 14px; }

/* ── Audio Player ── */
.audio-player {
  display: flex; align-items: center; gap: 12px;
  background: #000; border: 1px solid rgba(157,176,92,0.3);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px;
}
.audio-play-btn {
  flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: rgba(157,176,92,0.08); border: 1px solid rgba(157,176,92,0.4); border-radius: 50%;
  color: var(--olive); font-size: 0.8rem; cursor: pointer; transition: 0.2s ease;
}
.audio-play-btn:hover { background: rgba(157,176,92,0.18); box-shadow: var(--glow-olive); }
.audio-track {
  flex: 1; height: 8px; background: #000; border: 1px solid rgba(157,176,92,0.3);
  border-radius: 4px; position: relative; cursor: pointer; overflow: hidden;
}
.audio-progress { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--olive); box-shadow: var(--glow-olive); border-radius: 4px; }
.audio-time { flex-shrink: 0; font-family: var(--font-crt); font-size: 0.9rem; color: var(--text-muted); white-space: nowrap; }

.audio-download-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
  font-family: var(--font-crt); font-size: 0.95rem; letter-spacing: 0.04em;
  color: var(--text-secondary); text-decoration: none;
  border: 1px solid rgba(157,176,92,0.25); padding: 6px 12px; border-radius: var(--radius);
  transition: 0.2s ease;
}
.audio-download-link:hover { color: var(--olive); border-color: rgba(157,176,92,0.5); text-shadow: var(--glow-text); background: var(--olive-faint); }

.audio-pending {
  font-family: var(--font-crt); font-size: 0.95rem; letter-spacing: 0.06em;
  color: var(--text-muted); border: 1px dashed rgba(157,176,92,0.3);
  padding: 10px; border-radius: var(--radius); text-align: center; margin-bottom: 14px;
}

/* ── Rendered Markdown (synopsis + show notes) ── */
.markdown-body { font-size: 0.94rem; color: var(--text-secondary); line-height: 1.75; }

.markdown-body h1, .markdown-body h2, .markdown-body h3 {
  font-family: var(--font-display); color: var(--olive); text-shadow: var(--glow-text);
  letter-spacing: 0.03em; margin: 20px 0 8px;
}
.markdown-body h1 { font-size: 1.4rem; }
.markdown-body h2 { font-size: 1.2rem; }
.markdown-body h3 { font-size: 1.05rem; color: var(--olive-dim); text-shadow: none; }

.markdown-body p, .markdown-body ul, .markdown-body ol { margin-bottom: 10px; }
.markdown-body ul, .markdown-body ol { padding-left: 22px; }
.markdown-body li { margin-bottom: 4px; }

.markdown-body strong { color: var(--text-primary); }
.markdown-body em { color: var(--olive-dim); font-style: italic; }

.markdown-body a { color: var(--olive); text-decoration: underline; text-decoration-color: rgba(157,176,92,0.35); }
.markdown-body a:hover { text-shadow: var(--glow-text); }

.markdown-body blockquote {
  border-left: 2px solid rgba(157,176,92,0.4); padding-left: 12px; margin: 10px 0;
  color: var(--text-primary); font-style: italic;
}

.markdown-body hr { border: none; border-top: 1px solid rgba(157,176,92,0.18); margin: 18px 0; }

.markdown-body code {
  font-family: var(--font-crt); background: rgba(157,176,92,0.08);
  padding: 1px 6px; border-radius: 2px; font-size: 1em;
}

/* ── Episode Prev/Next Nav ── */
.episode-nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap; padding: 20px 0 6px;
}