/* DeepFall comic-bright visual reskin. Content and links remain unchanged. */
:root {
  --df-bg: #09050f;
  --df-panel: #171022;
  --df-panel-2: #241334;
  --df-ink: #050307;
  --df-paper: #fff7e8;
  --df-text: #fffaf2;
  --df-muted: #d9cee2;
  --df-purple: #6f28a8;
  --df-purple-hot: #9f43de;
  --df-pink: #ff3ea5;
  --df-teal: #55e9d4;
  --df-yellow: #ffd36a;
  --df-line: #070409;
  --df-shadow: 8px 8px 0 #050307;
  --df-font: "Trebuchet MS", "Arial Nova", Arial, sans-serif;
  --df-display: Impact, Haettenschweiler, "Arial Black", "Trebuchet MS", sans-serif;
}

html { scroll-behavior: smooth; background: var(--df-bg) !important; }
html, body {
  color: var(--df-text) !important;
  font-family: var(--df-font) !important;
}
body {
  background:
    linear-gradient(rgba(9,5,15,.76), rgba(9,5,15,.94)),
    url("deepfall-comic-background.svg") center top / cover fixed,
    var(--df-bg) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: radial-gradient(rgba(255,255,255,.12) 1.2px, transparent 1.2px);
  background-size: 13px 13px;
  opacity: .25;
}

.site-header {
  background: rgba(12, 5, 20, .96) !important;
  border-bottom: 5px solid var(--df-ink) !important;
  box-shadow: 0 5px 0 var(--df-pink), 0 10px 0 var(--df-teal) !important;
  backdrop-filter: blur(12px) saturate(1.2) !important;
}
.site-header-inner { max-width: 1280px !important; }
.site-header .brand, .brand {
  font-family: var(--df-display) !important;
  color: var(--df-paper) !important;
  font-size: 1.35rem !important;
  letter-spacing: .045em !important;
  font-style: italic;
  transform: skew(-6deg);
  text-shadow: 3px 3px 0 var(--df-pink), 6px 6px 0 var(--df-ink) !important;
}
.site-header .nav-links a, .nav-links a {
  font-family: var(--df-display) !important;
  color: var(--df-paper) !important;
  letter-spacing: .06em !important;
  font-size: .84rem !important;
  text-shadow: 2px 2px 0 var(--df-ink) !important;
  padding: 8px 11px !important;
  border: 3px solid transparent !important;
  transition: transform .14s ease, color .14s ease, background .14s ease !important;
}
.site-header .nav-links a:hover, .nav-links a:hover {
  color: var(--df-ink) !important;
  background: var(--df-teal) !important;
  border-color: var(--df-ink) !important;
  transform: rotate(-2deg) translateY(-2px);
  box-shadow: 4px 4px 0 var(--df-pink);
  text-shadow: none !important;
}

h1, h2, h3, h4,
.listen-panel h2, .listen-panel h3 {
  font-family: var(--df-display) !important;
  font-weight: 900 !important;
}
h1, .hero h1, .site-hero h1 {
  color: var(--df-paper) !important;
  letter-spacing: -.025em !important;
  font-style: italic;
  -webkit-text-stroke: 2px var(--df-ink);
  text-shadow: 5px 5px 0 var(--df-teal), 10px 10px 0 var(--df-pink), 15px 15px 0 var(--df-ink) !important;
}
h2 {
  color: var(--df-paper) !important;
  -webkit-text-stroke: 1.5px var(--df-ink);
  text-shadow: 4px 4px 0 var(--df-pink), 8px 8px 0 var(--df-ink) !important;
}
h3 { color: var(--df-paper) !important; }
p { font-family: var(--df-font) !important; }

.hero, .site-hero {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(23,6,38,.20), rgba(7,3,12,.88)),
    url("deepfall-comic-background.svg") center / cover !important;
  border-bottom: 6px solid var(--df-ink) !important;
  box-shadow: 0 8px 0 var(--df-pink) !important;
}
.hero::after, .site-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 15%, rgba(255,62,165,.26), transparent 30rem);
  mix-blend-mode: screen;
}
.hero > *, .site-hero > * { position: relative; z-index: 1; }
.hero-overlay { background: linear-gradient(to bottom, rgba(7,3,12,.08), rgba(7,3,12,.88)) !important; }
.kicker, .eyebrow {
  display: inline-block;
  color: var(--df-ink) !important;
  background: var(--df-yellow);
  border: 3px solid var(--df-ink);
  box-shadow: 4px 4px 0 var(--df-pink);
  padding: 7px 13px;
  letter-spacing: .10em !important;
  transform: rotate(-1deg);
  font-family: var(--df-display) !important;
  text-shadow: none !important;
}
.hero-text, .intro, .site-tagline, .tagline { color: var(--df-paper) !important; }

.button, .top-links a, .era-nav a, .listen-option {
  border-radius: 0 !important;
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
  border: 4px solid var(--df-ink) !important;
  box-shadow: 6px 6px 0 var(--df-ink) !important;
  font-family: var(--df-display) !important;
  letter-spacing: .06em !important;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease !important;
}
.button:hover, .top-links a:hover, .era-nav a:hover, .listen-option:hover {
  transform: translate(-2px,-2px) rotate(-1deg) !important;
  box-shadow: 9px 9px 0 var(--df-ink) !important;
}
.primary { color: var(--df-ink) !important; background: var(--df-teal) !important; }
.secondary { color: var(--df-paper) !important; background: var(--df-pink) !important; }
.top-links a, .era-nav a { color: var(--df-ink) !important; background: var(--df-teal) !important; }
.top-links a:nth-child(even), .era-nav a:nth-child(even) { background: var(--df-yellow) !important; }

.lower { background: transparent !important; }
.divider { height: 6px !important; background: var(--df-pink) !important; box-shadow: 0 6px 0 var(--df-teal), 0 12px 0 var(--df-ink); }
.deepfall-logo {
  width: min(700px, 92vw) !important;
  border: 6px solid var(--df-ink) !important;
  box-shadow: 12px 12px 0 var(--df-pink), 20px 20px 0 var(--df-teal) !important;
  transform: rotate(-1deg);
}
.listen-panel {
  background: rgba(24,13,35,.94) !important;
  border: 5px solid var(--df-ink) !important;
  border-radius: 0 !important;
  box-shadow: 9px 9px 0 var(--df-pink), 15px 15px 0 var(--df-teal) !important;
}
.listen-panel h2 { color: var(--df-teal) !important; }
.listen-panel h3 { color: var(--df-yellow) !important; }
.listen-panel iframe { border-radius: 0 !important; border: 3px solid var(--df-ink) !important; }
.listen-option { background: var(--df-paper) !important; color: var(--df-ink) !important; }
.listen-option:nth-child(3n+2) { background: var(--df-teal) !important; }
.listen-option:nth-child(3n) { background: var(--df-yellow) !important; }
.rss-note, .rss-copy-status { color: var(--df-muted) !important; }

.cards { gap: 22px !important; }
.card {
  background: var(--df-panel) !important;
  border: 5px solid var(--df-ink) !important;
  border-radius: 0 !important;
  box-shadow: var(--df-shadow) !important;
  clip-path: polygon(0 0, 95% 0, 100% 12%, 100% 100%, 5% 100%, 0 88%);
}
.card:nth-child(3n+1) { border-top-color: var(--df-pink) !important; }
.card:nth-child(3n+2) { border-top-color: var(--df-teal) !important; }
.card:nth-child(3n) { border-top-color: var(--df-yellow) !important; }
.card:hover { transform: translate(-3px,-3px) rotate(-1deg) !important; background: var(--df-panel-2) !important; box-shadow: 12px 12px 0 var(--df-ink) !important; }
.card span { color: var(--df-teal) !important; font-family: var(--df-display) !important; letter-spacing: .08em !important; }
.card strong { color: var(--df-paper) !important; font-family: var(--df-display) !important; }

.section-heading { margin-bottom: 52px !important; }
.feature-card, .directory-grid article, .era, .villain-card, .ideology {
  background: var(--df-panel) !important;
  border: 5px solid var(--df-ink) !important;
  border-radius: 0 !important;
  box-shadow: var(--df-shadow) !important;
}
.feature-card { overflow: visible !important; }
.feature-card img, .villain-image { border: 4px solid var(--df-ink) !important; filter: saturate(1.12) contrast(1.04) !important; }
.feature-card:nth-of-type(3n+1) { box-shadow: 9px 9px 0 var(--df-pink) !important; }
.feature-card:nth-of-type(3n+2) { box-shadow: 9px 9px 0 var(--df-teal) !important; }
.feature-card:nth-of-type(3n) { box-shadow: 9px 9px 0 var(--df-yellow) !important; }
.card-copy h3, .villain-copy h3 {
  color: var(--df-paper) !important;
  -webkit-text-stroke: 1px var(--df-ink);
  text-shadow: 3px 3px 0 var(--df-pink) !important;
}
.tag, .subtitle { color: var(--df-teal) !important; font-family: var(--df-display) !important; letter-spacing: .06em !important; }
.card-copy p:not(.tag), .directory-grid p, .villain-copy p, .ideology p { color: var(--df-muted) !important; }
.directory-grid article:nth-child(3n+1), .villain-card:nth-child(3n+1) { box-shadow: 8px 8px 0 var(--df-pink) !important; }
.directory-grid article:nth-child(3n+2), .villain-card:nth-child(3n+2) { box-shadow: 8px 8px 0 var(--df-teal) !important; }
.directory-grid article:nth-child(3n), .villain-card:nth-child(3n) { box-shadow: 8px 8px 0 var(--df-yellow) !important; }

.site-hero { width: min(1420px, calc(100% - 28px)) !important; margin-top: 22px !important; }
.era { padding: clamp(22px,3vw,40px) !important; margin: 38px auto !important; }
.era::before { border: 3px dashed rgba(255,255,255,.18) !important; }
.ornament { color: var(--df-pink) !important; font-size: 1.2rem; }
.villain-grid { gap: 22px !important; }
.villain-copy h4 { color: var(--df-yellow) !important; font-family: var(--df-display) !important; letter-spacing: .06em; text-transform: uppercase; }
.ideology h3 { color: var(--df-teal) !important; }

footer { background: #08040d !important; color: var(--df-muted) !important; border-top: 5px solid var(--df-ink) !important; box-shadow: inset 0 6px 0 var(--df-pink), inset 0 12px 0 var(--df-teal); }

@media (max-width: 900px) {
  h1, .hero h1, .site-hero h1 { -webkit-text-stroke: 1px var(--df-ink); text-shadow: 3px 3px 0 var(--df-teal), 6px 6px 0 var(--df-pink), 9px 9px 0 var(--df-ink) !important; }
  .feature-card, .feature-card:nth-of-type(even), .feature-card.wide-card { margin-bottom: 42px !important; }
  .villain-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 620px) {
  .site-header .brand, .brand { font-size: 1.05rem !important; }
  .site-header .nav-links a, .nav-links a { font-size: .68rem !important; padding: 5px 6px !important; }
  .hero, .site-hero { padding-left: 15px !important; padding-right: 15px !important; }
  .deepfall-logo { box-shadow: 7px 7px 0 var(--df-pink), 12px 12px 0 var(--df-teal) !important; }
  .villain-grid { grid-template-columns: 1fr !important; }
  .button { min-width: min(270px, 90vw) !important; }
}