/* ============================================================
   October Nights Press, vintage Halloween / book-fair theme
   Dark edition: near-black page, parchment cards, saturated orange
   ============================================================ */

:root {
  --void:         #170f0a;
  --void-2:       #211610;
  --paper:        #f3e3bd;
  --paper-line:   #cdae72;
  --void-line:    rgba(240, 225, 190, 0.16);
  --ink:          #ede0bf;
  --ink-soft:     #b89f74;
  --paper-ink:    #1d1309;
  --paper-ink-soft: #55402c;
  --pumpkin:      #e2560c;
  --pumpkin-dark: #a83c07;
  --pumpkin-deep: #5c2004;
  --mustard:      #d9a233;
  --plum:         #3a1240;
  --plum-dark:    #1f0a24;
  --teal:         #0f4038;
  --teal-bright:  #3fae9a;
  --red:          #7c130b;
  --shadow:       rgba(0, 0, 0, 0.55);

  /* legacy aliases, kept so inline references stay correct */
  --cream:        #ede0bf;
  --cream-card:   #f3e3bd;
  --cream-line:   #cdae72;

  --font-display: 'Rye', system-ui, serif;
  --font-spooky:  'Butcherman', var(--font-display);
  --font-body:    'Vollkorn', Georgia, 'Times New Roman', serif;
  --font-label:   'Special Elite', var(--font-body);

  --container: 1160px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.15; margin: 0 0 .5em; letter-spacing: .01em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }

/* ---------- night texture background ---------- */
body {
  background-color: var(--void);
  background-image:
    radial-gradient(ellipse at 15% 0%, rgba(226, 86, 12, 0.16), transparent 45%),
    radial-gradient(ellipse at 85% 25%, rgba(120, 40, 150, 0.15), transparent 45%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.5), transparent 60%),
    radial-gradient(circle, rgba(243, 227, 189, 0.045) 1px, transparent 1.3px);
  background-size: auto, auto, auto, 3px 3px;
}

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

/* ---------- vintage headline helpers ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pumpkin);
  border-top: 1px solid var(--pumpkin);
  border-bottom: 1px solid var(--pumpkin);
  padding: 3px 0;
  margin-bottom: 14px;
}
.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--ink);
  text-shadow: 0 0 22px rgba(226, 86, 12, 0.4), 0 2px 0 rgba(0, 0, 0, 0.6);
}
.section-lede {
  max-width: 640px;
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: relative;
  background: var(--pumpkin);
  background-image: linear-gradient(180deg, var(--pumpkin) 0%, var(--pumpkin-deep) 100%);
  padding-bottom: 14px;
  z-index: 50;
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 16px;
  background-image: radial-gradient(circle at 12px 0, transparent 12px, var(--pumpkin-deep) 13px);
  background-size: 24px 16px;
  background-repeat: repeat-x;
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.brand img { width: 46px; height: 46px; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: .02em;
}
.brand-text span {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.nav-links a {
  font-family: var(--font-label);
  font-size: 14px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background .15s ease;
  white-space: nowrap;
}
.nav-links a:hover,
.nav-links a.active { background: rgba(0, 0, 0, 0.3); }
.nav-cta {
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--void);
  color: var(--ink) !important;
  padding: 9px 16px !important;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .5);
}
.nav-cta:hover { background: var(--plum-dark); }
.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--ink);
  color: var(--ink);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 18px;
  cursor: pointer;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-label);
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--pumpkin);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--void);
}
.btn-primary:hover { box-shadow: 4px 5px 0 var(--void); }
.btn-ghost {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper-ink); }
.btn-plum {
  background: var(--plum);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--void);
}
.btn-plum:hover { box-shadow: 4px 5px 0 var(--void); }
.btn-small { padding: 8px 16px; font-size: 12px; }
.btn-block { width: 100%; justify-content: center; }

/* buttons placed inside a paper card need dark-on-light treatment */
.book-card .btn-ghost, .appear-card .btn-ghost {
  border-color: var(--paper-ink);
  color: var(--paper-ink);
}
.book-card .btn-ghost:hover, .appear-card .btn-ghost:hover {
  background: var(--paper-ink);
  color: var(--paper);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding: 64px 0 56px;
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 48px;
  align-items: start;
}
.hero-art { padding-top: 8px; }
.hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  color: var(--ink);
  text-shadow: 0 0 26px rgba(226, 86, 12, 0.45), 0 2px 0 rgba(0, 0, 0, 0.6);
}
.hero .tagline {
  font-family: var(--font-label);
  color: var(--pumpkin);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 14px;
  margin-bottom: 18px;
}
.hero p.lede {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 52ch;
}
.hero-actions { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.hero-art {
  position: relative;
  display: flex;
  justify-content: center;
}
.hero-portrait {
  position: relative;
  width: min(340px, 100%);
}

/* ---------- spooky backdrop frame (night scene behind cutout photos) ---------- */
.spooky-frame {
  position: relative;
  z-index: 0; /* contains the img's z-index so it can't leak above sibling elements like .hero-badge */
  border-radius: 6px;
  overflow: hidden;
  border: 6px solid var(--paper);
  box-shadow: 0 18px 0 -6px rgba(0, 0, 0, .35), 8px 12px 30px var(--shadow);
  background:
    radial-gradient(circle at 15% 85%, rgba(226, 86, 12, .18), transparent 55%),
    linear-gradient(180deg, #2c1a3a 0%, #1b0f24 45%, #0f0810 100%);
}
.spooky-frame::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cpath fill='%23130a19' d='M50 25 Q42 10 20 12 Q30 18 32 25 Q20 20 5 25 Q20 30 32 27 Q28 35 15 40 Q30 42 42 30 Q50 40 58 30 Q70 42 85 40 Q72 35 68 27 Q80 30 95 25 Q80 20 68 25 Q70 18 80 12 Q58 10 50 25 Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cpath fill='%23130a19' d='M50 25 Q42 10 20 12 Q30 18 32 25 Q20 20 5 25 Q20 30 32 27 Q28 35 15 40 Q30 42 42 30 Q50 40 58 30 Q70 42 85 40 Q72 35 68 27 Q80 30 95 25 Q80 20 68 25 Q70 18 80 12 Q58 10 50 25 Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 60% 15%, 22% 34%;
  background-size: 36px 18px, 22px 11px;
  opacity: .85;
  pointer-events: none;
}
/* CRT scanline + vignette overlay */
.spooky-frame::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%);
  background-position: 0 0, center;
  background-size: 100% 3px, 100% 100%;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.spooky-frame img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  filter: drop-shadow(1px 0 0 rgba(255, 40, 80, .22)) drop-shadow(-1px 0 0 rgba(40, 220, 255, .18));
}

@media (prefers-reduced-motion: no-preference) {
  .spooky-frame::after { animation: crt-scan 6s linear infinite, crt-flicker 5.5s ease-in-out infinite; }
  .spooky-frame { animation: crt-glitch 9s ease-in-out infinite; }
}
@keyframes crt-scan {
  0%   { background-position: 0 0, center; }
  100% { background-position: 0 300px, center; }
}
@keyframes crt-flicker {
  0%, 41%, 44%, 71%, 74%, 100% { opacity: 1; }
  42% { opacity: .88; }
  43% { opacity: 1; }
  72% { opacity: .92; }
  73% { opacity: 1; }
}
@keyframes crt-glitch {
  0%, 96%, 100% { transform: translateX(0); filter: none; }
  97% { transform: translateX(-3px); filter: hue-rotate(8deg); }
  98% { transform: translateX(2px); filter: hue-rotate(-6deg); }
  99% { transform: translateX(0); filter: none; }
}
.hero-badge {
  position: absolute;
  z-index: 2;
  bottom: -18px;
  left: -28px;
  width: 118px;
  background: var(--mustard);
  border: 3px solid var(--void);
  border-radius: 50%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotate(-9deg);
  font-family: var(--font-label);
  font-size: 11.5px;
  line-height: 1.25;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--paper-ink);
  box-shadow: 3px 4px 0 var(--shadow);
}

/* ============================================================
   RIBBON / STRIPE
   ============================================================ */
.stripe {
  background: var(--plum);
  background-image: linear-gradient(180deg, var(--plum) 0%, var(--plum-dark) 100%);
  color: var(--ink);
  padding: 14px 0;
}
.stripe .container {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
}
.stripe span { opacity: .92; }
.stripe strong { color: var(--mustard); }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: 64px 0; }
.section-head { margin-bottom: 36px; }
.section-alt { background: var(--void-2); border-top: 1px dashed var(--void-line); border-bottom: 1px dashed var(--void-line); }

/* ============================================================
   CARDS, book / anthology "ticket" style
   ============================================================ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
}
.book-card {
  background: var(--paper);
  color: var(--paper-ink);
  border: 2px solid var(--void);
  border-radius: 8px;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.45);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.book-card:hover {
  transform: translate(-2px, -4px);
  box-shadow: 9px 10px 0 rgba(0, 0, 0, 0.55);
}
.book-cover {
  position: relative;
  aspect-ratio: 2 / 3;
  background: linear-gradient(160deg, var(--mustard), var(--pumpkin));
  overflow: hidden;
  border-bottom: 2px solid var(--void);
}
.book-cover img { width: 100%; height: 100%; object-fit: cover; }
.book-cover.placeholder { display: flex; align-items: center; justify-content: center; padding: 18px; }
.book-cover.placeholder span {
  font-family: var(--font-spooky);
  color: rgba(243, 227, 189, .9);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
  font-size: 1.6rem;
  text-align: center;
  line-height: 1.2;
}
.tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--void);
  color: var(--mustard);
  font-family: var(--font-label);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 3px;
}
.tag-plum { background: var(--plum); color: var(--ink); }
.tag-red { background: var(--red); color: var(--ink); }
.book-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.book-body h3 { font-size: 1.28rem; color: var(--plum-dark); margin-bottom: 2px; }
.book-meta {
  font-family: var(--font-label);
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pumpkin-dark);
}
.book-body p.blurb { font-size: .95rem; color: var(--paper-ink-soft); flex: 1; }
.book-rating { font-size: .85rem; font-weight: 600; color: var(--pumpkin-dark); }
.book-rating span { font-weight: 400; color: var(--paper-ink-soft); }
.book-body .btn { margin-top: 8px; align-self: flex-start; }

/* ============================================================
   VINTAGE DIVIDER
   ============================================================ */
.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--pumpkin);
  margin: 8px 0 30px;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--pumpkin) 0 6px, transparent 6px 11px);
}
.divider span { font-family: var(--font-display); font-size: 1.4rem; }

/* ============================================================
   TIMELINE / CONVENTIONS
   ============================================================ */
.con-list { display: flex; flex-direction: column; gap: 0; border-top: 2px dashed var(--void-line); }
.con-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px 4px;
  border-bottom: 2px dashed var(--void-line);
}
.con-date {
  font-family: var(--font-label);
  color: var(--pumpkin);
  font-size: 1rem;
  letter-spacing: .03em;
}
.con-name { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); }
.con-loc { font-size: .9rem; color: var(--ink-soft); }
.con-badge {
  font-family: var(--font-label);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--teal-bright);
  border: 1px solid var(--teal-bright);
  border-radius: 3px;
  padding: 5px 10px;
  white-space: nowrap;
}

/* ============================================================
   PODCAST / APPEARANCE CARDS
   ============================================================ */
.appear-card {
  background: var(--paper);
  color: var(--paper-ink);
  border: 2px solid var(--void);
  border-radius: 8px;
  padding: 24px 26px;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.45);
}
.appear-card h3 { color: var(--plum-dark); font-size: 1.4rem; margin-bottom: 6px;}
.ep-list { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.ep-list li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: .96rem;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--paper-line);
}
.ep-list li:last-child { border-bottom: none; padding-bottom: 0;}
.ep-tag {
  font-family: var(--font-label);
  font-size: 11px;
  color: var(--pumpkin-dark);
  white-space: nowrap;
}

/* ============================================================
   PULL QUOTE / BADGE ROW
   ============================================================ */
.badge-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  border: 1.5px solid var(--void);
  border-radius: 30px;
  padding: 8px 16px;
  font-family: var(--font-label);
  font-size: 12.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--paper-ink);
}

/* ============================================================
   AI DISCLAIMER BANNER
   ============================================================ */
.ai-banner {
  background: var(--void-2);
  border-top: 2px solid var(--pumpkin);
  border-bottom: 2px solid var(--pumpkin);
  padding: 20px 0;
}
.ai-banner p {
  margin: 0 auto;
  max-width: 700px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--void);
  color: var(--ink);
  padding: 52px 0 26px;
  margin-top: 40px;
  border-top: 1px solid rgba(226, 86, 12, 0.25);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(237, 224, 191, .12);
}
.footer-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 12px;}
.footer-brand img { width: 40px; }
.footer-brand strong { font-family: var(--font-display); font-size: 1.3rem; }
.site-footer h4 {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mustard);
  margin-bottom: 14px;
}
.site-footer ul { display: flex; flex-direction: column; gap: 9px; }
.site-footer a { color: var(--ink); text-decoration: none; opacity: .8; font-size: .95rem; }
.site-footer a:hover { opacity: 1; text-decoration: underline; color: var(--mustard); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 22px;
  font-size: .82rem;
  opacity: .6;
  font-family: var(--font-label);
}

/* ============================================================
   PAGE HERO (interior pages)
   ============================================================ */
.page-hero {
  padding: 52px 0 40px;
  text-align: center;
}
.page-hero .section-lede { margin: 0 auto; text-align: center; }

/* ============================================================
   TWO COL LAYOUT (Screen page etc)
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 52px;
  align-items: start;
}
img.poster {
  width: 100%;
  border-radius: 8px;
  border: 4px solid var(--void);
  box-shadow: 8px 10px 0 rgba(0, 0, 0, .5);
}
.split.reverse { grid-template-columns: 1.2fr .8fr; }
.split.reverse .poster-col { order: 2; }

.callout-box {
  background: var(--paper);
  border-left: 5px solid var(--pumpkin);
  padding: 18px 22px;
  border-radius: 4px;
  margin: 22px 0;
  font-size: .96rem;
  color: var(--paper-ink-soft);
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
  .split, .split.reverse { grid-template-columns: 1fr; }
  .split.reverse .poster-col { order: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .con-row { grid-template-columns: 1fr; gap: 4px; }
  .con-badge { justify-self: start; }
}
@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; align-items:center; justify-content:center; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--pumpkin-deep);
    flex-direction: column;
    align-items: stretch;
    padding: 10px 20px 20px;
    gap: 2px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 8px; }
  .nav-cta { text-align: center; margin-top: 8px; }
  .footer-grid { grid-template-columns: 1fr; }
}