/* ============================================================
   NocturnalFiction.com — Design System
   Single source of truth for all pages.
   All values use CSS custom properties — no hardcoded hex/px.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,300;1,9..144,400;1,9..144,500&family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* INK SCALE — dark surfaces */
  --ink-deep:  #0a0612;
  --ink-soft:  #120a1f;
  --ink-rise:  #1c1230;
  --ink-line:  #2a1d44;

  /* PAPER SCALE — text on dark */
  --paper:      #f4ebe1;
  --paper-mute: #b8a8c4;
  --paper-dim:  #7a6d8a;

  /* ACCENTS — brand */
  --accent:      #d4a5ff;
  --accent-tint: 212, 165, 255;  /* rgba components matching --accent */
  --accent-warm: #f5b8c9;
  --accent-deep: #7c4dff;

  /* GENRE SIGNATURES */
  --g-paranormal:   #c9a5ff;
  --g-contemporary: #e89b9b;
  --g-scifi:        #7dd3fc;
  --g-dark:         #d4636b;
  --g-historical:   #d4a574;

  /* SAGA DEFAULTS — overridden by [data-saga="x"] scoping */
  --saga-color: var(--accent);
  --saga-tint:  var(--accent-tint);

  /* TYPOGRAPHY */
  --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* SPACING SCALE */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* LAYOUT */
  --measure:        65ch;
  --content-max:    1200px;
  --content-narrow: 720px;
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;

  /* MOTION */
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med:  320ms;
  --dur-slow: 600ms;
}

/* ============================================================
   BASE RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--ink-deep);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  background-image:
    radial-gradient(ellipse at top, rgba(124, 77, 255, 0.08), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(212, 99, 107, 0.04), transparent 50%);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--accent-deep); color: var(--paper); }

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.container        { max-width: var(--content-max);    margin: 0 auto; padding: 0 var(--space-5); }
.container-narrow { max-width: var(--content-narrow); margin: 0 auto; padding: 0 var(--space-5); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--paper-dim);
}

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink-line), transparent);
  border: none;
  margin: var(--space-8) 0;
}

/* ============================================================
   AGE BANNER
   ============================================================ */
.age-banner {
  background: var(--ink-rise);
  border-bottom: 1px solid var(--ink-line);
  padding: var(--space-3) var(--space-5);
  text-align: center;
  font-size: 0.8rem;
  color: var(--paper-mute);
  position: relative;
}
.age-banner.hidden { display: none; }
.age-banner__close {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--paper-dim);
  padding: var(--space-2);
  line-height: 1;
}
.age-banner__close:hover { color: var(--paper-mute); }

/* ============================================================
   SITE HEADER
   ============================================================ */
.site-header {
  padding: var(--space-7) 0 var(--space-6);
  border-bottom: 1px solid var(--ink-line);
}
.site-header--launch {
  padding: var(--space-4) 0;
}
.site-header__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.site-header--launch .site-header__inner {
  align-items: center;
  gap: var(--space-5);
}
.wordmark {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--paper);
  line-height: 1;
}
.wordmark a { color: inherit; }
.brand-mark {
  display: inline-block;
  vertical-align: middle;
  color: var(--accent);
  flex-shrink: 0;
}
.brand-mark--header {
  width: clamp(3rem, 5vw, 4rem);
  height: clamp(1.2rem, 2vw, 1.5rem);
}
.brand-mark--hero     { width: clamp(5rem, 8vw, 7rem); height: clamp(2rem, 3.2vw, 2.8rem); }
.brand-mark--standalone { width: 2rem; height: 0.8rem; }
.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  color: inherit;
}
.wordmark--launch {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--paper);
  line-height: 1;
  text-decoration: none;
}
.wordmark__dot { color: var(--accent); }
.tagline {
  font-size: 0.85rem;
  color: var(--paper-dim);
  font-style: italic;
  font-family: var(--font-display);
  margin-top: var(--space-2);
}
.site-nav {
  display: flex;
  gap: var(--space-5);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--paper-mute);
}
.site-header--launch .site-nav {
  gap: var(--space-4);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
}
.site-nav a {
  position: relative;
  padding: var(--space-2) 0;
  transition: color var(--dur-fast) var(--ease);
}
.site-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transition: right var(--dur-med) var(--ease);
}
.site-nav a:hover { color: var(--accent); }
.site-nav a:hover::after { right: 0; }


/* ============================================================
   HERO — homepage
   ============================================================ */
.hero {
  padding: var(--space-9) 0 var(--space-7);
  text-align: center;
}
.hero__eyebrow { margin-bottom: var(--space-5); color: var(--accent); }
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--paper);
  margin-bottom: var(--space-5);
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.hero__title em { font-style: italic; font-weight: 300; color: var(--accent); }
.hero__sub {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 300;
  font-style: italic;
  color: var(--paper-mute);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ============================================================
   GENRE TILES — replacing emoji genre buttons
   ============================================================ */
.genres { padding: var(--space-7) 0; }
.genres__heading { text-align: center; margin-bottom: var(--space-6); }
.genres__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}

.genre-tile {
  position: relative;
  padding: var(--space-5) var(--space-4);
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  transition: all var(--dur-med) var(--ease);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 200px;
  cursor: pointer;
  min-width: 0;
}
.genre-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 100%, var(--tile-color), transparent 70%);
  opacity: 0.08;
  transition: opacity var(--dur-med) var(--ease);
  pointer-events: none;
}
.genre-tile::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--tile-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease);
}
.genre-tile:hover { transform: translateY(-4px); border-color: var(--tile-color); }
.genre-tile:hover::before { opacity: 0.2; }
.genre-tile:hover::after  { transform: scaleX(1); }

.genre-tile[data-genre="paranormal"]   { --tile-color: var(--g-paranormal); }
.genre-tile[data-genre="contemporary"] { --tile-color: var(--g-contemporary); }
.genre-tile[data-genre="scifi"]        { --tile-color: var(--g-scifi); }
.genre-tile[data-genre="dark"]         { --tile-color: var(--g-dark); }
.genre-tile[data-genre="historical"]   { --tile-color: var(--g-historical); }

.genre-tile__number {
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--paper-dim);
  letter-spacing: 0.1em;
}
.genre-tile__name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--paper);
  margin: var(--space-3) 0 var(--space-2);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.genre-tile:has(.genre-tile__count) .genre-tile__name {
  min-height: 3.1em;
  display: flex;
  align-items: flex-start;
}
.genre-tile__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--tile-color);
  font-weight: 400;
  line-height: 1.4;
  opacity: 0.85;
  text-wrap: balance;
}
.genre-tile__count {
  font-size: 0.7rem;
  color: var(--paper-dim);
  margin-top: var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* ============================================================
   FILTER BAR
   ============================================================ */
.filter-bar {
  margin: var(--space-7) 0 var(--space-6);
  border-top: 1px solid var(--ink-line);
  padding: var(--space-4) 0 var(--space-3);
}
.filter-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.filter-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.filter-group__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--paper-dim);
  font-weight: 500;
  white-space: nowrap;
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: 0.8rem;
  color: var(--paper-mute);
  border-radius: 100px;
  border: 1px solid transparent;
  transition: all var(--dur-fast) var(--ease);
  cursor: pointer;
  background: none;
  font-family: var(--font-body);
}
.filter-pill:hover { color: var(--paper); }
.filter-pill.active {
  background: var(--ink-rise);
  color: var(--paper);
  border-color: var(--ink-line);
}
.filter-pill.active::before {
  content: '●';
  margin-right: var(--space-1);
  color: var(--accent);
  font-size: 0.6rem;
  line-height: 1;
}

/* Mobile: stack filter groups */
@media (max-width: 600px) {
  .filter-bar__inner { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}

/* ============================================================
   FEATURED STORY — homepage hero card
   ============================================================ */
.featured { margin-bottom: var(--space-7); }
.featured__card {
  background: linear-gradient(135deg, var(--ink-soft), var(--ink-rise));
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-7);
  align-items: center;
  position: relative;
  overflow: hidden;
}
@media (max-width: 800px) {
  .featured__card { grid-template-columns: 1fr; padding: var(--space-5); gap: var(--space-5); }
}
.featured__card::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 60%; height: 200%;
  background: radial-gradient(circle, var(--featured-color, var(--accent)), transparent 60%);
  opacity: 0.1;
  pointer-events: none;
}
.featured__card[data-genre="paranormal"]   { --featured-color: var(--g-paranormal); }
.featured__card[data-genre="contemporary"] { --featured-color: var(--g-contemporary); }
.featured__card[data-genre="scifi"]        { --featured-color: var(--g-scifi); }
.featured__card[data-genre="dark"]         { --featured-color: var(--g-dark); }
.featured__card[data-genre="historical"]   { --featured-color: var(--g-historical); }

.featured__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--featured-color, var(--accent));
  margin-bottom: var(--space-4);
}
.featured__label::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--featured-color, var(--accent));
}
.featured__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
  color: var(--paper);
}
.featured__hook {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 300;
  color: var(--paper-mute);
  line-height: 1.5;
  margin-bottom: var(--space-5);
  max-width: 50ch;
}
.featured__meta {
  display: flex;
  gap: var(--space-4);
  font-size: 0.75rem;
  color: var(--paper-dim);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.featured__meta span:not(:last-child)::after {
  content: '·';
  margin-left: var(--space-4);
  color: var(--ink-line);
}
.featured__cta {
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  color: var(--featured-color, var(--accent));
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--featured-color, var(--accent));
  transition: all var(--dur-fast) var(--ease);
}
.featured__cta:hover { gap: var(--space-3); }
.featured__excerpt {
  font-family: var(--font-display);
  color: var(--paper-mute);
  font-size: 0.95rem;
  line-height: 1.7;
  padding-left: var(--space-5);
  border-left: 2px solid var(--featured-color, var(--accent));
  font-style: italic;
}
.featured__excerpt-attribution {
  display: block;
  margin-top: var(--space-3);
  font-size: 0.7rem;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--paper-dim);
}
@media (max-width: 800px) {
  .featured__excerpt {
    padding-left: 0;
    border-left: none;
    padding-top: var(--space-4);
    border-top: 1px solid var(--ink-line);
    font-size: 0.9rem;
  }
}

/* ============================================================
   STORIES SECTION + CARDS
   ============================================================ */
.stories-section { padding: var(--space-7) 0 var(--space-9); }
[data-genre-page] .container { padding-bottom: var(--space-9); }

.section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  gap: var(--space-5);
  flex-wrap: wrap;
}
.section-heading__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.section-heading__count {
  font-size: 0.8rem;
  color: var(--paper-dim);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) { .story-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .story-grid { grid-template-columns: 1fr; } }

.story-card {
  position: relative;
  padding: var(--space-5);
  border-left: 2px solid var(--card-color, var(--ink-line));
  background: linear-gradient(90deg, rgba(28, 18, 48, 0.3), transparent);
  transition: all var(--dur-med) var(--ease);
  display: flex;
  flex-direction: column;
  min-height: 280px;
  cursor: pointer;
}
.story-card:hover {
  background: linear-gradient(90deg, rgba(28, 18, 48, 0.7), rgba(28, 18, 48, 0.1));
  transform: translateX(4px);
}
.story-card[data-genre="paranormal"]   { --card-color: var(--g-paranormal); }
.story-card[data-genre="contemporary"] { --card-color: var(--g-contemporary); }
.story-card[data-genre="scifi"]        { --card-color: var(--g-scifi); }
.story-card[data-genre="dark"]         { --card-color: var(--g-dark); }
.story-card[data-genre="historical"]   { --card-color: var(--g-historical); }

.story-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.story-card__genre   { color: var(--card-color); font-weight: 600; }
.story-card__divider { color: var(--ink-line); }
.story-card__pairing { color: var(--paper-dim); }
.story-card__new {
  margin-left: auto;
  font-size: 0.6rem;
  padding: 2px var(--space-2);
  background: var(--accent-warm);
  color: var(--ink-deep);
  border-radius: 2px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.story-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
  color: var(--paper);
  transition: color var(--dur-fast) var(--ease);
}
.story-card:hover .story-card__title { color: var(--card-color); }
.story-card__hook {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--paper-mute);
  margin-bottom: var(--space-4);
  flex-grow: 1;
}
.story-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--paper-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding-top: var(--space-4);
  border-top: 1px solid var(--ink-line);
  margin-top: auto;
}
.story-card__read {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--card-color);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  transition: gap var(--dur-fast) var(--ease);
}
.story-card:hover .story-card__read { gap: var(--space-2); }

/* ============================================================
   AFFILIATE BLOCK — "Readers Also Love"
   ============================================================ */
.affiliate-block {
  padding: var(--space-8) 0;
  background: var(--ink-soft);
  border-top: 1px solid var(--ink-line);
  margin-top: var(--space-8);
}
.affiliate-block__heading { text-align: center; margin-bottom: var(--space-6); }
.affiliate-block__heading h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 500;
  margin-bottom: var(--space-2);
}
.affiliate-block__heading p {
  color: var(--paper-mute);
  font-size: 0.9rem;
  font-style: italic;
  font-family: var(--font-display);
}
.affiliate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-5);
  max-width: 900px;
  margin: 0 auto;
}
.affiliate-card {
  text-align: center;
  font-size: 0.85rem;
  transition: transform var(--dur-med) var(--ease);
  cursor: pointer;
}
.affiliate-card:hover { transform: translateY(-4px); }
.affiliate-card:hover .affiliate-card__cover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--cover-color, var(--accent));
}
.affiliate-card:hover .affiliate-card__title { color: var(--cover-color, var(--accent)); }

.affiliate-card[data-mood="dark"]        { --cover-color: var(--g-dark);        --cover-tone: #2a0f12; }
.affiliate-card[data-mood="paranormal"]  { --cover-color: var(--g-paranormal);  --cover-tone: #1f1430; }
.affiliate-card[data-mood="contemporary"]{ --cover-color: var(--g-contemporary);--cover-tone: #2a1a20; }
.affiliate-card[data-mood="scifi"]       { --cover-color: var(--g-scifi);       --cover-tone: #0e1a28; }
.affiliate-card[data-mood="historical"]  { --cover-color: var(--g-historical);  --cover-tone: #251a10; }

.affiliate-card__cover {
  width: 100%;
  aspect-ratio: 2/3;
  position: relative;
  border-radius: 2px;
  margin-bottom: var(--space-4);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  transition: box-shadow var(--dur-med) var(--ease);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.04), transparent 50%),
    linear-gradient(160deg, var(--cover-tone, var(--ink-rise)) 0%, var(--ink-deep) 100%);
}
.affiliate-card__cover img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.affiliate-card__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-4) var(--space-3);
  text-align: center;
}
.affiliate-card__cover:has(img) .affiliate-card__fallback { display: none; }
.affiliate-card__fallback-top {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--cover-color);
  opacity: 0.7;
}
.affiliate-card__fallback-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--paper);
  letter-spacing: -0.01em;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-1);
}
.affiliate-card__fallback-rule {
  width: 30px; height: 1px;
  background: var(--cover-color);
  margin: 0 auto;
  opacity: 0.5;
}
.affiliate-card__fallback-author {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.7rem;
  color: var(--paper-mute);
  margin-top: var(--space-2);
}
.affiliate-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--paper);
  margin-bottom: var(--space-1);
  transition: color var(--dur-fast) var(--ease);
  line-height: 1.2;
}
.affiliate-card__author {
  color: var(--paper-dim);
  font-size: 0.75rem;
  font-style: italic;
  font-family: var(--font-display);
}

/* ============================================================
   SITE FOOTER
   ============================================================ */
.site-footer {
  padding: var(--space-7) 0 var(--space-6);
  border-top: 1px solid var(--ink-line);
  background: var(--ink-deep);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}
.site-footer__nav {
  display: flex;
  gap: var(--space-5);
  font-size: 0.8rem;
  color: var(--paper-mute);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  flex-wrap: wrap;
  justify-content: center;
}
.site-footer__nav a:hover { color: var(--accent); }
.site-footer__warning {
  color: var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.85rem;
}
.site-footer__masthead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.8rem;
  color: var(--paper-dim);
  text-align: center;
  margin-top: var(--space-4);
}
.site-footer__masthead a {
  color: var(--paper-mute);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.site-footer__masthead a:hover { border-bottom-color: var(--accent); }
.site-footer__legal {
  font-size: 0.75rem;
  color: var(--paper-dim);
  text-align: center;
  max-width: 600px;
  line-height: 1.6;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumbs {
  padding: var(--space-5) 0;
  font-size: 0.8rem;
  color: var(--paper-dim);
  display: flex;
  gap: var(--space-2);
  align-items: center;
  letter-spacing: 0.05em;
  flex-wrap: wrap;
}
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs__sep     { color: var(--ink-line); }
.breadcrumbs__current { color: var(--paper-mute); }

/* ============================================================
   GENRE LANDING PAGE
   ============================================================ */
.genre-header {
  padding: var(--space-7) 0 var(--space-6);
  text-align: center;
}
.genre-header__eyebrow {
  display: inline-block;
  color: var(--genre-color, var(--accent));
  margin-bottom: var(--space-4);
}
.genre-header__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-5);
}
.genre-header__title em {
  font-style: italic;
  color: var(--genre-color, var(--accent));
  font-weight: 300;
}

/* Genre color via data attribute on <main> */
[data-genre-page="paranormal"]   { --genre-color: var(--g-paranormal);   --accent: var(--g-paranormal); }
[data-genre-page="contemporary"] { --genre-color: var(--g-contemporary); --accent: var(--g-contemporary); }
[data-genre-page="scifi"]        { --genre-color: var(--g-scifi);        --accent: var(--g-scifi); }
[data-genre-page="dark"]         { --genre-color: var(--g-dark);         --accent: var(--g-dark); }
[data-genre-page="historical"]   { --genre-color: var(--g-historical);   --accent: var(--g-historical); }

.genre-intro {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-8);
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--paper-mute);
  box-sizing: content-box;
}
@media (max-width: 600px) {
  .genre-intro { padding: var(--space-5) var(--space-5) var(--space-7); box-sizing: border-box; }
}
.genre-intro p { margin-bottom: var(--space-5); }
.genre-intro p:first-of-type {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--paper);
  line-height: 1.65;
}
.genre-intro p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: 400;
  line-height: 0.85;
  float: left;
  margin: 0.1em 0.15em 0 0;
  color: var(--genre-color, var(--accent));
}
@media (max-width: 600px) {
  .genre-intro p:first-of-type::first-letter { font-size: 3.4rem; margin: 0.08em 0.12em 0 0; }
}

/* ============================================================
   STORY PAGE
   ============================================================ */
.story-page { padding: var(--space-6) 0 var(--space-8); }

/* Genre color on story pages via data-story-genre on <main> */
[data-story-genre="paranormal"]   { --story-color: var(--g-paranormal);   --accent: var(--g-paranormal); }
[data-story-genre="contemporary"] { --story-color: var(--g-contemporary); --accent: var(--g-contemporary); }
[data-story-genre="scifi"]        { --story-color: var(--g-scifi);        --accent: var(--g-scifi); }
[data-story-genre="dark"]         { --story-color: var(--g-dark);         --accent: var(--g-dark); }
[data-story-genre="historical"]   { --story-color: var(--g-historical);   --accent: var(--g-historical); }

/* ============================================================
   SAGA SCOPING — accent + saga color cascade
   After genre rules so saga wins when both appear on same element.
   ============================================================ */
[data-saga="approach"] {
  --accent:      #7eb3d4;
  --accent-tint: 126, 179, 212;
  --saga-color:  #7eb3d4;
  --saga-tint:   126, 179, 212;
}

/* Genre label demotes to neutral when story is inside a saga */
.story-page[data-saga] .story-page__genre { color: var(--paper-dim); }

/* ============================================================
   SAGA STATUS
   ============================================================ */

/* Design-reference sagas get quieter sigil treatment */
[data-saga-status="design-reference"] .saga-card__sigil,
[data-saga-status="design-reference"] .saga-hero__sigil-mark {
  opacity: 0.7;
}

/* Status pill — appears on saga cards and saga hub pages */
.saga-status-label {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--ink-line);
  border-radius: 100px;
  color: var(--paper-dim);
}
.saga-status-label--design {
  color: var(--paper-mute);
  border-color: var(--paper-dim);
}
.saga-status-label--active {
  color: var(--saga-color);
  border-color: var(--saga-color);
}

.story-page__header {
  max-width: var(--content-narrow);
  margin: 0 auto var(--space-7);
  text-align: center;
  padding: var(--space-6) 0;
}
.story-page__genre {
  display: inline-block;
  margin-bottom: var(--space-4);
  color: var(--story-color, var(--accent));
}
.story-page__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-5);
}
.story-page__meta {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  font-size: 0.75rem;
  color: var(--paper-dim);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  flex-wrap: wrap;
}
.story-page__meta span:not(:last-child)::after {
  content: '·';
  margin-left: var(--space-4);
  color: var(--ink-line);
}
.story-page__meta a {
  color: inherit;
  transition: color var(--dur-fast) var(--ease);
}
.story-page__meta a:hover {
  color: var(--story-color, var(--accent));
}
.story-page__ornament {
  text-align: center;
  margin: var(--space-6) 0;
  color: var(--paper-dim);
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 1em;
  clear: both;
}
.dinkus-discs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  clear: both;
}
.dinkus-discs__disc {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--paper-dim);
}
.dinkus-discs__disc--center {
  width: 8px;
  height: 8px;
  background: var(--paper-mute);
}

.story-page__byline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--paper-dim);
  margin-top: var(--space-2);
  margin-bottom: var(--space-5);
  text-align: center;
  max-width: var(--content-narrow);
  margin-left: auto;
  margin-right: auto;
}
.story-page__byline a {
  color: var(--paper-mute);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.story-page__byline a:hover { border-bottom-color: var(--accent); }
.story-page__signature {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--paper-mute);
  text-align: center;
  margin: var(--space-7) 0 var(--space-5);
}
.story-body {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: 0 var(--space-6);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--paper);
  font-weight: 400;
  box-sizing: content-box;
}
@media (max-width: 600px) {
  .story-body { padding: 0 var(--space-5); box-sizing: border-box; font-size: 1.05rem; }
  .story-body p:first-of-type::first-letter { font-size: 3.8rem; }
}
.story-body p { margin-bottom: var(--space-5); }
.story-body p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 500;
  line-height: 0.85;
  float: left;
  margin: 0.08em 0.12em 0 0;
  color: var(--story-color, var(--accent));
  font-style: normal;
}

/* ============================================================
   STORY CTA + SHARE
   ============================================================ */
.story-cta {
  max-width: var(--content-narrow);
  margin: var(--space-8) auto;
  padding: var(--space-6);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--ink-soft), transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.story-cta__text {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--paper-mute);
  font-size: 1rem;
}
.story-cta__link {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--accent);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: gap var(--dur-fast) var(--ease);
}
.story-cta__link:hover { gap: var(--space-3); }

.share {
  max-width: var(--content-narrow);
  margin: var(--space-7) auto;
  text-align: center;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.share__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--paper-dim);
  margin-right: var(--space-2);
}
.share__btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--ink-line);
  border-radius: 100px;
  font-size: 0.8rem;
  color: var(--paper-mute);
  transition: all var(--dur-fast) var(--ease);
}
.share__btn:hover { border-color: var(--accent); color: var(--accent); }
/* Copy link — reset <button> to match <a> buttons */
.share__btn--copy {
  background: none;
  cursor: pointer;
  font-family: inherit;
  line-height: inherit;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  padding: var(--space-4) var(--space-6);
  background: var(--accent);
  color: var(--ink-deep);
  border-radius: 100px;
  transition: all var(--dur-fast) var(--ease);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.btn-primary:hover {
  background: var(--paper);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(var(--accent-tint), 0.3);
}
.btn-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.btn-quiet {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--paper-dim);
  padding: var(--space-2);
  transition: color var(--dur-fast) var(--ease);
}
.btn-quiet:hover { color: var(--paper-mute); }
.btn-quiet:focus-visible { outline: 2px solid var(--paper-dim); outline-offset: 3px; border-radius: 2px; }

/* ============================================================
   AGE GATE MODAL
   ============================================================ */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background:
    radial-gradient(ellipse at center, rgba(124, 77, 255, 0.08), transparent 50%),
    radial-gradient(ellipse at center, transparent 30%, rgba(10, 6, 18, 0.85) 70%, rgba(10, 6, 18, 0.96) 100%),
    rgba(10, 6, 18, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: gateIn 0.4s var(--ease);
}
.age-gate.is-hidden { display: none; }
@keyframes gateIn { from { opacity: 0; } to { opacity: 1; } }

.age-gate__card {
  max-width: 460px;
  width: 100%;
  background: linear-gradient(180deg, var(--ink-soft), var(--ink-deep));
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-7);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(var(--accent-tint), 0.06);
  animation: gateCardIn 0.5s var(--ease) 0.1s both;
}
@keyframes gateCardIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.age-gate__card::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.age-gate__card::after {
  content: '';
  position: absolute;
  top: -40%; left: -20%;
  width: 140%; height: 80%;
  background: radial-gradient(ellipse, rgba(124, 77, 255, 0.15), transparent 60%);
  pointer-events: none;
}
.age-gate__ornament {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.4em;
  color: var(--accent);
  margin-bottom: var(--space-4);
  opacity: 0.7;
  position: relative;
}
.age-gate__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin-bottom: var(--space-3);
  position: relative;
}
.age-gate__title em { font-style: italic; font-weight: 300; color: var(--accent); }
.age-gate__eyebrow { margin-bottom: var(--space-5); color: var(--paper-dim); position: relative; }
.age-gate__copy {
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.65;
  color: var(--paper-mute);
  margin: 0 auto var(--space-7);
  max-width: 36ch;
  position: relative;
}
.age-gate__actions { display: flex; flex-direction: column; gap: var(--space-4); position: relative; }
.age-gate__legal {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--ink-line);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--paper-dim);
  position: relative;
}

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  z-index: 90;
  max-width: 640px;
  width: calc(100% - var(--space-6));
  background: rgba(18, 10, 31, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-5);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  animation: cookieIn 0.5s var(--ease) 0.3s both;
}
@keyframes cookieIn {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.cookie-banner.is-hidden { display: none; }
.cookie-banner__text { font-size: 0.8rem; color: var(--paper-mute); line-height: 1.5; flex: 1; }
.cookie-banner__text a {
  color: var(--accent);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.cookie-banner__text a:hover { border-bottom-color: var(--accent); }
.cookie-banner__btn {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--accent);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--ink-line);
  border-radius: 100px;
  transition: all var(--dur-fast) var(--ease);
  flex-shrink: 0;
}
.cookie-banner__btn:hover { border-color: var(--accent); background: rgba(var(--accent-tint), 0.08); }

@media (max-width: 600px) {
  .cookie-banner { flex-direction: column; align-items: stretch; text-align: center; gap: var(--space-3); }
  .age-gate__card { padding: var(--space-7) var(--space-5); }
}

/* ============================================================
   SAGA PAGE — hub components
   ============================================================ */

/* section-heading extensions used on saga hub pages */
.section-heading__eyebrow {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--paper-dim);
  margin-bottom: var(--space-3);
}
.section-heading__title em { font-style: italic; font-weight: 300; color: var(--paper-mute); }
.section-heading__desc {
  width: 100%;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--paper-mute);
  margin-top: var(--space-3);
}
.section-heading__desc em { color: var(--paper); }

@keyframes serialPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* SAGA HERO */
.saga-hero {
  padding: var(--space-7) 0 var(--space-6);
  border-bottom: 1px solid var(--ink-line);
}
.saga-hero__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (max-width: 900px) {
  .saga-hero__inner { grid-template-columns: 1fr; gap: var(--space-6); }
}
.saga-hero__prose { min-width: 0; }
.saga-hero__sigil {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.saga-hero__sigil-mark { width: 32px; height: 32px; color: var(--saga-color); }
.saga-hero__eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--saga-color);
}
.saga-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-4);
}
.saga-hero__title em { font-style: italic; color: var(--saga-color); font-weight: 300; }
.saga-hero__intro {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--paper-mute);
  max-width: 50ch;
}
.saga-hero__intro p { margin-bottom: var(--space-4); }
.saga-hero__intro p:last-child { margin-bottom: 0; }
.saga-hero__intro em { color: var(--paper); font-style: italic; }
.saga-hero__intro a {
  color: var(--saga-color);
  font-style: italic;
  border-bottom: 1px solid rgba(var(--saga-tint), 0.4);
  transition: border-color var(--dur-fast) var(--ease);
}
.saga-hero__intro a:hover { border-bottom-color: var(--saga-color); }
.saga-hero__meta {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-5);
  flex-wrap: wrap;
  align-items: center;
}

/* SAGA JUMP — anchor pills in hero meta */
.saga-jump {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--paper-mute);
  letter-spacing: 0.05em;
  transition: all var(--dur-fast) var(--ease);
}
.saga-jump strong { font-weight: 600; color: var(--paper); margin-right: var(--space-1); }
.saga-jump__arrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--saga-color);
  margin-left: var(--space-1);
  transition: transform var(--dur-fast) var(--ease);
}
.saga-jump:hover { border-color: var(--saga-color); background: rgba(var(--saga-tint), 0.06); }
.saga-jump:hover .saga-jump__arrow { transform: translateY(2px); }
@media (max-width: 600px) {
  .saga-jump { font-size: 0.75rem; padding: var(--space-2) var(--space-3); }
}

/* SAGA MAP — stylized SVG alongside hero prose */
.saga-map {
  position: relative;
  aspect-ratio: 1;
  background: radial-gradient(ellipse at center, rgba(var(--saga-tint), 0.04), transparent 70%);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  overflow: hidden;
}
.saga-map__svg { width: 100%; height: 100%; display: block; }
.saga-map__caption {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-5);
  right: var(--space-5);
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.8rem;
  color: var(--paper-dim);
  letter-spacing: 0.05em;
}
.saga-map svg text {
  font-family: var(--font-body);
  font-size: 7.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--paper-mute);
}
.saga-map svg text.saga-map__system-label { fill: var(--paper); font-size: 8.5px; }
.saga-map svg .saga-map__orbit {
  fill: none;
  stroke: var(--ink-line);
  stroke-width: 0.4;
  stroke-dasharray: 1 2;
  opacity: 0.7;
}
.saga-map svg .saga-map__orbit--outer { opacity: 0.5; }
.saga-map svg .saga-map__star { fill: #d8c98b; }
.saga-map svg .saga-map__star-glow { fill: #d8c98b; opacity: 0.18; }
.saga-map svg .saga-map__planet { fill: var(--paper-dim); }
.saga-map svg .saga-map__planet--major { fill: var(--paper); }
.saga-map svg .saga-map__approach { fill: var(--saga-color); }
.saga-map svg .saga-map__approach-halo { fill: none; stroke: var(--saga-color); stroke-width: 0.5; }
.saga-map svg .saga-map__approach-halo--outer { opacity: 0.25; }
.saga-map svg .saga-map__approach-halo--inner { opacity: 0.5; }
.saga-map svg .saga-map__approach-trail {
  fill: none;
  stroke: var(--saga-color);
  stroke-width: 0.4;
  stroke-dasharray: 2 2;
  opacity: 0.4;
}

/* SAGA SECTION — generic container for factions, characters, standalones */
.saga-section {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-7) var(--space-5);
}
.saga-section__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--ink-line);
}
.saga-section__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.saga-section__title em { font-style: italic; color: var(--paper-mute); font-weight: 300; }
.saga-section__count { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--paper-dim); }
.saga-section__empty { padding: var(--space-5) 0; max-width: 60ch; }
.saga-section__empty p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--paper-mute);
}

/* FACTION ENTRIES — encyclopedia-style reference with sigil */
.faction-list { display: flex; flex-direction: column; }
.faction-entry {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--ink-line);
}
.faction-entry:last-child { border-bottom: none; padding-bottom: var(--space-3); }
.faction-entry:first-child { padding-top: var(--space-3); }
.faction-entry__sigil {
  width: 44px;
  height: 44px;
  color: var(--faction-color, var(--saga-color));
  grid-row: span 2;
  align-self: start;
  margin-top: 4px;
}
.faction-entry__header { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.faction-entry__name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; letter-spacing: -0.01em; color: var(--paper); }
.faction-entry__name em { font-style: italic; }
.faction-entry__role { font-family: var(--font-display); font-style: italic; font-size: 0.95rem; color: var(--faction-color, var(--paper-mute)); font-weight: 300; }
.faction-entry__org { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--paper-dim); font-weight: 400; text-transform: uppercase; }
.faction-entry__desc { font-family: var(--font-display); font-style: italic; font-size: 1.02rem; line-height: 1.65; color: var(--paper-mute); max-width: 65ch; }
.faction-entry__desc em { color: var(--paper); font-style: normal; font-weight: 500; }
@media (max-width: 600px) {
  .faction-entry { grid-template-columns: 36px 1fr; gap: var(--space-3); padding: var(--space-5) 0; }
  .faction-entry__sigil { width: 30px; height: 30px; }
  .faction-entry__name { font-size: 1.15rem; }
  .faction-entry__desc { font-size: 0.95rem; }
}

/* CHARACTER ROSTER */
.character-roster { display: flex; flex-direction: column; }
.character-entry { padding: var(--space-5) 0; border-bottom: 1px solid var(--ink-line); }
.character-entry:last-child { border-bottom: none; padding-bottom: var(--space-3); }
.character-entry:first-child { padding-top: var(--space-3); }
.character-entry__header { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); flex-wrap: wrap; }
.character-entry__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; color: var(--paper); }
.character-entry__tag { font-family: var(--font-display); font-style: italic; font-size: 0.9rem; color: var(--paper-mute); font-weight: 300; }
.character-entry__tag::before { content: '— '; color: var(--paper-dim); }
.character-entry__bio { font-family: var(--font-display); font-style: italic; font-size: 1rem; line-height: 1.65; color: var(--paper-mute); max-width: 70ch; }
.character-entry__refs { margin-top: var(--space-3); font-family: var(--font-display); font-style: italic; font-size: 0.88rem; color: var(--paper-dim); }
.character-entry__refs::before { content: '— Appears across '; }
.character-entry__refs a {
  color: var(--saga-color);
  border-bottom: 1px dotted rgba(var(--saga-tint), 0.5);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.character-entry__refs a:hover { color: var(--paper); border-bottom: 1px solid var(--saga-color); }
@media (max-width: 600px) {
  .character-entry__name { font-size: 1.1rem; }
  .character-entry__bio { font-size: 0.95rem; }
}

/* SAGA SECTIONS — spacing and dividers between major zones */
.saga-factions,
.saga-serials,
.saga-lore { padding: var(--space-9) 0; }
.saga-factions + .saga-serials,
.saga-serials + .saga-lore { border-top: 1px solid var(--ink-line); }

/* SERIAL CARDS */
.serial-cards { display: flex; flex-direction: column; gap: var(--space-5); max-width: 720px; }
.serial-card {
  display: block;
  position: relative;
  padding: var(--space-6);
  background: rgba(var(--saga-tint), 0.04);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  transition: all var(--dur-med) var(--ease);
}
.serial-card--active { cursor: pointer; }
.serial-card--active:hover {
  border-color: var(--saga-color);
  background: rgba(var(--saga-tint), 0.08);
  transform: translateY(-2px);
}
.serial-card--upcoming { opacity: 0.55; background: transparent; }
/* Stretched link — CTA covers entire card; saga pill stays above via z-index */
.serial-card--active .serial-card__cta a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}
.serial-card .serial-promo__saga-ref { position: relative; z-index: 1; }
.serial-card__status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--saga-color);
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
}
.serial-card--upcoming .serial-card__status { color: var(--paper-dim); }
.serial-card__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--saga-color);
  box-shadow: 0 0 0 3px rgba(var(--saga-tint), 0.2);
  flex-shrink: 0;
  animation: serialPulse 2.4s ease-in-out infinite;
}
.serial-card__inner { display: flex; flex-direction: column; gap: var(--space-3); }
.serial-card__heading { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.serial-card__eyebrow { font-family: var(--font-body); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--paper-dim); }
.serial-card__title { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 500; letter-spacing: -0.01em; color: var(--paper); line-height: 1.1; }
.serial-card__title em { font-style: italic; color: var(--saga-color); font-weight: 300; }
.serial-card__hook { font-family: var(--font-display); font-style: italic; font-size: 1rem; line-height: 1.65; color: var(--paper-mute); }
.serial-card__meta { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: 0.78rem; color: var(--paper-dim); font-family: var(--font-body); }
.serial-card__meta-item:not(:last-child)::after { content: ' · '; margin-left: var(--space-4); color: var(--ink-line); }
.serial-card__cta { font-family: var(--font-display); font-style: italic; font-size: 0.95rem; color: var(--saga-color); margin-top: var(--space-2); }
.serial-card__cta a { color: inherit; text-decoration: none; }

/* LORE / HISTORY */
.section-heading--lore { text-align: center; margin-bottom: var(--space-7); }
.lore-prose { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.75; color: var(--paper-mute); }
.lore-prose p { margin-bottom: var(--space-5); }
.lore-prose p:last-child { color: var(--paper); font-style: italic; }
.lore-prose em { color: var(--paper); font-style: italic; }

/* SAGA FOOTER NAV */
.saga-footer-nav { padding: var(--space-7) 0 var(--space-9); text-align: center; }
.saga-back-link { font-family: var(--font-display); font-style: italic; font-size: 0.9rem; color: var(--paper-dim); transition: color var(--dur-fast) var(--ease); }
.saga-back-link:hover { color: var(--saga-color); }

/* ============================================================
   SERIAL HUB + CHAPTER PAGE — shared serial components
   ============================================================ */

/* --serial-color inherits from saga accent for saga-backed serials */
[data-serial] { --serial-color: var(--saga-color, #e89bb5); }

/* Saga eyebrow — cross-link pill from serial/chapter back to saga */
.saga-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(var(--saga-tint), 0.08);
  border: 1px solid rgba(var(--saga-tint), 0.2);
  border-radius: 100px;
  color: var(--saga-color);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
  margin-bottom: var(--space-4);
}
.saga-eyebrow:hover { background: rgba(var(--saga-tint), 0.15); gap: var(--space-3); }
.saga-eyebrow__mark { width: 12px; height: 12px; color: var(--saga-color); }

/* Serial CTAs */
.serial-cta-primary {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--serial-color);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--serial-color);
  transition: gap var(--dur-fast) var(--ease);
}
.serial-cta-primary:hover { gap: var(--space-3); }
.serial-cta-secondary {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--paper-dim);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: color var(--dur-fast) var(--ease);
}
.serial-cta-secondary:hover { color: var(--paper-mute); }

/* SERIES HERO — centered, single-column */
.series-hero {
  padding: var(--space-7) 0 var(--space-6);
  border-bottom: 1px solid var(--ink-line);
}
.series-hero__inner {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: 0 var(--space-5);
  text-align: center;
}
.series-hero__dinkus {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-5);
  color: var(--serial-color);
  opacity: 0.9;
}
.series-hero__dinkus svg { width: 80px; height: 80px; }
@media (max-width: 600px) { .series-hero__dinkus svg { width: 64px; height: 64px; } }
.series-hero__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-4);
  color: var(--serial-color);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.25em;
}
.series-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-4);
}
.series-hero__title em { font-style: italic; color: var(--serial-color); font-weight: 300; }
.series-hero__synopsis {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--paper-mute);
  line-height: 1.65;
  max-width: 60ch;
  margin: 0 auto var(--space-5);
}
.series-hero__meta {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--paper-dim);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.series-hero__meta span:not(:last-child)::after { content: '·'; margin-left: var(--space-4); color: var(--ink-line); }
.series-hero__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  align-items: center;
}

/* CHAPTER LIST — manuscript margin numbering */
.chapter-list {
  max-width: var(--content-narrow);
  margin: var(--space-7) auto;
  padding: 0 var(--space-5);
}
.chapter-list__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--ink-line);
}
.chapter-list__title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; letter-spacing: -0.01em; }
.chapter-list__count { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--paper-dim); }

.chapter-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-4) 0;
  transition: all var(--dur-fast) var(--ease);
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--ink-line);
}
.chapter-row:hover { background: linear-gradient(90deg, rgba(var(--saga-tint), 0.04), transparent); padding-left: var(--space-3); }
.chapter-row:hover .chapter-row__num { color: var(--serial-color); }
.chapter-row:hover .chapter-row__title { color: var(--serial-color); }
.chapter-row__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.6rem;
  font-weight: 300;
  color: var(--paper-dim);
  line-height: 1;
  letter-spacing: -0.02em;
  transition: color var(--dur-fast) var(--ease);
  text-align: right;
  padding-right: var(--space-2);
}
.chapter-row--latest .chapter-row__num { color: var(--serial-color); }
.chapter-row__body { min-width: 0; }
.chapter-row__title-row { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: 2px; flex-wrap: wrap; }
.chapter-row__title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; letter-spacing: -0.01em; color: var(--paper); line-height: 1.2; transition: color var(--dur-fast) var(--ease); }
.chapter-row__title-dinkus { display: inline-flex; width: 14px; height: 14px; color: var(--serial-color); }
.chapter-row__meta { font-size: 0.7rem; color: var(--paper-dim); text-transform: uppercase; letter-spacing: 0.12em; }
.chapter-row__latest-label { font-family: var(--font-display); font-style: italic; font-size: 0.85rem; color: var(--serial-color); align-self: center; }
.chapter-row__arrow { font-family: var(--font-display); font-style: italic; color: var(--paper-dim); font-size: 0.9rem; align-self: center; transition: all var(--dur-fast) var(--ease); }
.chapter-row:hover .chapter-row__arrow { color: var(--serial-color); transform: translateX(2px); }

/* SERIES FUNNEL — cross-sell into related saga content */
.series-funnel {
  max-width: var(--content-max);
  margin: var(--space-8) auto var(--space-7);
  padding: 0 var(--space-5);
}

/* CHAPTER STRIP — quick prev/next nav at top and bottom of chapter */
.chapter-strip {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: 0.78rem;
  color: var(--paper-mute);
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  margin-bottom: var(--space-5);
}
.chapter-strip__nav { font-family: var(--font-display); font-style: italic; color: var(--paper-mute); transition: color var(--dur-fast) var(--ease); }
.chapter-strip__nav:hover { color: var(--serial-color); }
.chapter-strip__nav--disabled { color: var(--paper-dim); pointer-events: none; opacity: 0.5; }
.chapter-strip__center {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.7rem;
  color: var(--paper-dim);
}
.chapter-strip__center a { color: var(--serial-color); }
.chapter-strip__center a:hover { text-decoration: underline; }

/* CHAPTER EYEBROW — sigil + serial name + chapter number */
.chapter-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--serial-color);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  margin-bottom: var(--space-4);
}
.chapter-eyebrow .dinkus { width: 14px; height: 14px; }
.chapter-eyebrow a { color: inherit; border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) var(--ease); }
.chapter-eyebrow a:hover { border-bottom-color: var(--serial-color); }

/* STORY SO FAR — collapsible catch-up for returning readers */
.story-so-far {
  max-width: var(--content-narrow);
  margin: 0 auto var(--space-6);
  padding: 0 var(--space-5);
}
.story-so-far__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: all var(--dur-fast) var(--ease);
  font-family: inherit;
}
.story-so-far__toggle:hover { border-color: var(--serial-color); }
.story-so-far__icon { color: var(--serial-color); font-family: var(--font-display); font-style: italic; transition: transform var(--dur-fast) var(--ease); }
.story-so-far[open] .story-so-far__icon { transform: rotate(90deg); }
.story-so-far__label { font-family: var(--font-display); font-style: italic; color: var(--paper); font-size: 0.95rem; flex: 1; }
.story-so-far__hint { font-size: 0.7rem; color: var(--paper-dim); text-transform: uppercase; letter-spacing: 0.15em; }
.story-so-far__body { padding: var(--space-5) var(--space-2); font-family: var(--font-display); font-size: 0.95rem; font-style: italic; color: var(--paper-mute); line-height: 1.7; }
.story-so-far__body p { margin-bottom: var(--space-3); }
.story-so-far__body p:last-child { margin-bottom: 0; }
.story-so-far__body strong { color: var(--paper); font-style: normal; font-weight: 500; }

/* NEXT CHAPTER CTA — cliffhanger prompt at end of each chapter */
.next-chapter {
  max-width: var(--content-narrow);
  margin: var(--space-8) auto;
  padding: var(--space-7);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(var(--saga-tint), 0.06), transparent);
  position: relative;
  overflow: hidden;
}
.next-chapter::before {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 50%; height: 200%;
  background: radial-gradient(circle, var(--serial-color), transparent 60%);
  opacity: 0.06;
  pointer-events: none;
}
.next-chapter__dinkus { position: absolute; top: var(--space-5); right: var(--space-5); width: 32px; height: 32px; color: var(--serial-color); opacity: 0.7; }
.next-chapter__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.25em; color: var(--serial-color); font-weight: 600; margin-bottom: var(--space-3); position: relative; padding-right: 40px; }
.next-chapter__title { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: var(--space-4); position: relative; }
.next-chapter__title em { font-style: italic; font-weight: 300; color: var(--serial-color); }
.next-chapter__hook { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--paper-mute); line-height: 1.6; max-width: 55ch; margin-bottom: var(--space-5); position: relative; }
.next-chapter__action {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--serial-color);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--serial-color);
  transition: gap var(--dur-fast) var(--ease);
  position: relative;
}
.next-chapter__action:hover { gap: var(--space-3); }
.next-chapter--waiting { background: var(--ink-soft); }
.next-chapter--waiting .next-chapter__hook { font-style: normal; font-family: var(--font-body); font-size: 0.9rem; }

/* Chapter page drop cap picks up serial accent */
.chapter-page .story-body p:first-of-type::first-letter { color: var(--serial-color); }

/* ============================================================
   HOMEPAGE — "Now Serializing" serial promo
   ============================================================ */
.serial-promo {
  padding: var(--space-6) 0 var(--space-7);
}
.serial-promo__heading {
  text-align: center;
  margin-bottom: var(--space-5);
}
.serial-promo__card {
  position: relative;
  cursor: pointer;
  background: linear-gradient(135deg, var(--ink-soft), var(--ink-rise));
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  overflow: hidden;
}
.serial-promo__card::before {
  content: '';
  position: absolute;
  top: -30%; right: -10%;
  width: 50%; height: 160%;
  background: radial-gradient(circle, var(--serial-color), transparent 60%);
  opacity: 0.08;
  pointer-events: none;
}
.serial-promo__dinkus {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 56px;
  height: 56px;
  color: var(--serial-color);
  opacity: 0.85;
}
@media (max-width: 700px) {
  .serial-promo__dinkus { width: 40px; height: 40px; top: var(--space-4); right: var(--space-4); }
}
.serial-promo__top {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  position: relative;
  padding-right: 70px;
}
.serial-promo__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--serial-color);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.serial-promo__label::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--serial-color);
  border-radius: 50%;
  animation: serialPulse 2.4s ease-in-out infinite;
}
.serial-promo__status {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--paper-mute);
}
.serial-promo__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: var(--space-3);
  position: relative;
  color: var(--paper);
}
.serial-promo__title em { font-style: italic; font-weight: 300; color: var(--serial-color); }
.serial-promo__synopsis {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 300;
  color: var(--paper-mute);
  line-height: 1.6;
  max-width: 65ch;
  margin-bottom: var(--space-4);
  position: relative;
}
.serial-promo__saga-ref {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  padding: var(--space-2) var(--space-3);
  background: rgba(var(--saga-tint), 0.06);
  border: 1px solid rgba(var(--saga-tint), 0.18);
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: var(--paper-mute);
  position: relative;
  transition: background var(--dur-fast) var(--ease);
  text-decoration: none;
}
.serial-promo__saga-ref:hover { background: rgba(var(--saga-tint), 0.1); }
.serial-promo__saga-ref em { font-style: italic; color: var(--paper-dim); }
.serial-promo__saga-ref a {
  color: var(--saga-color);
  font-style: italic;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.serial-promo__saga-ref a:hover { border-bottom-color: var(--saga-color); }
.serial-promo__saga-mark {
  width: 16px; height: 16px;
  color: var(--saga-color);
  display: inline-flex;
}
.chapter-spine {
  display: flex;
  align-items: center;
  gap: 0;
  margin: var(--space-5) 0;
  padding: var(--space-6) 0 var(--space-4);
  position: relative;
}
.chapter-spine__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--paper-dim);
  flex-shrink: 0;
  margin-right: var(--space-4);
}
.chapter-spine__track {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.chapter-tick {
  flex: 1;
  height: 24px;
  position: relative;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
}
.chapter-tick::before {
  content: '';
  width: 100%;
  height: 3px;
  background: var(--ink-line);
  border-radius: 2px;
  transition: all var(--dur-fast) var(--ease);
}
.chapter-tick--read::before    { background: var(--paper-dim); }
.chapter-tick--current::before { background: var(--serial-color); height: 6px; box-shadow: 0 0 12px var(--serial-color); }
.chapter-tick--read,
.chapter-tick--current         { cursor: pointer; }
.chapter-tick--read:hover::before,
.chapter-tick--current:hover::before { background: var(--paper); height: 5px; }
.chapter-tick__num {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  color: var(--paper-dim);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
  white-space: nowrap;
  pointer-events: none;
}
.chapter-tick:hover .chapter-tick__num,
.chapter-tick--current .chapter-tick__num { opacity: 1; color: var(--serial-color); }
.chapter-tick:hover { z-index: 2; }
.chapter-tick--current { z-index: 3; }
.chapter-spine__mobile { display: none; }
@media (max-width: 700px) {
  .chapter-spine { flex-direction: column; align-items: stretch; gap: var(--space-3); padding: var(--space-4) 0; }
  .chapter-spine__label { margin-right: 0; margin-bottom: var(--space-1); }
  .chapter-spine__track { display: none; }
  .chapter-spine__mobile { display: block; width: 100%; position: relative; }
  .chapter-spine__bar { position: relative; width: 100%; height: 4px; background: var(--ink-line); border-radius: 2px; overflow: visible; }
  .chapter-spine__bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--paper-dim); border-radius: 2px; }
  .chapter-spine__current { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; border-radius: 50%; background: var(--serial-color); box-shadow: 0 0 0 4px rgba(var(--accent-tint), 0.2), 0 0 16px var(--serial-color); }
  .chapter-spine__mobile-label { margin-top: var(--space-3); font-size: 0.75rem; color: var(--serial-color); letter-spacing: 0.05em; }
  .chapter-spine__mobile-label-secondary { color: var(--paper-dim); }
}
.serial-promo__actions {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}
/* Hide "start from the beginning" when only one chapter is out */
.serial-promo[data-chapters-released="1"] .serial-cta-secondary { display: none; }
/* Elements within the promo card that must stay independently clickable */
.serial-promo__card .serial-promo__saga-ref,
.serial-promo__card .chapter-tick--current,
.serial-promo__card .serial-cta-secondary { position: relative; z-index: 1; }

/* ============================================================
   STORY CARD — feature (editor's pick) variant
   ============================================================ */
.story-card--feature {
  grid-column: span 2;
  padding: var(--space-6);
  background: linear-gradient(105deg, rgba(28, 18, 48, 0.7), rgba(28, 18, 48, 0.2));
  border-left-width: 3px;
  position: relative;
}
.story-card__editors-pick {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--card-color, var(--accent));
  opacity: 0.85;
}
.story-card--feature .story-card__title {
  font-size: clamp(1.8rem, 2.5vw, 2.2rem);
  margin-bottom: var(--space-4);
  margin-top: var(--space-3);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.story-card--feature .story-card__hook {
  font-size: 1.15rem;
  line-height: 1.55;
  max-width: 60ch;
  margin-bottom: var(--space-5);
}
.story-card__meta--feature { justify-content: space-between; }
.story-card__meta-left  { display: flex; align-items: center; gap: var(--space-3); }
.story-card__meta-right { display: flex; align-items: center; gap: var(--space-3); }
.story-card__meta-right .story-card__new { margin-left: 0; }
.story-card--feature .story-card__meta { margin-bottom: var(--space-3); }
.story-card--feature .story-card__footer { padding-top: var(--space-5); }
.story-card--feature .story-card__read { font-size: 1rem; }
@media (max-width: 900px) {
  .story-card--feature { grid-column: span 2; }
}
@media (max-width: 600px) {
  .story-card--feature { grid-column: span 1; padding: var(--space-5); }
  .story-card--feature::after { position: static; display: block; margin-bottom: var(--space-3); }
  .story-card--feature .story-card__title { font-size: 1.5rem; margin-top: 0; }
  .story-card--feature .story-card__hook { font-size: 1rem; }
}

/* ============================================================
   404 PAGE
   ============================================================ */
.not-found__hero {
  text-align: center;
  padding: var(--space-9) var(--space-5) var(--space-8);
  max-width: var(--content-narrow);
  margin: 0 auto;
}
.not-found__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: var(--space-3) 0 var(--space-5);
}
.not-found__sub {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--paper-mute);
  font-size: 1.05rem;
  margin: 0 auto var(--space-6);
  max-width: 44ch;
}
.not-found__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--accent);
  transition: gap var(--dur-fast) var(--ease);
}
.not-found__cta:hover { gap: var(--space-3); }
.not-found__stories,
.not-found__genres {
  padding: var(--space-7) 0;
  border-top: 1px solid var(--ink-line);
}
.not-found__section-head {
  text-align: center;
  margin-bottom: var(--space-6);
}

/* ============================================================
   READ NEXT — 3-column same-genre recommendations
   ============================================================ */
.read-next {
  padding: var(--space-8) 0;
  border-top: 1px solid var(--ink-line);
}
.read-next__heading {
  text-align: center;
  margin-bottom: var(--space-6);
}
.read-next__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) {
  .read-next__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .read-next__grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .chapter-row { grid-template-columns: 60px 1fr; gap: var(--space-3); padding: var(--space-3) 0; }
  .chapter-row__arrow, .chapter-row__latest-label { display: none; }
  .chapter-row__num { font-size: 1.8rem; }
  .chapter-row__title { font-size: 1.05rem; }
  .chapter-strip { flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3); }
  .chapter-strip__center { width: 100%; justify-content: center; order: -1; }
}

/* ============================================================
   SAGAS INDEX PAGE
   ============================================================ */
.sagas-index {
  padding: var(--space-7) 0 var(--space-8);
  border-bottom: 1px solid var(--ink-line);
}
.sagas-index__inner {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: 0 var(--space-5);
  text-align: center;
}
.sagas-index__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--paper-mute);
  margin-bottom: var(--space-4);
}
.sagas-index__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
  color: var(--paper);
}
.sagas-index__title em { font-style: italic; color: var(--paper-mute); font-weight: 300; }
.sagas-index__intro {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--paper-mute);
  line-height: 1.6;
  max-width: 55ch;
  margin: 0 auto;
}

/* Sagas grid: 2-up on desktop, 1-up below tablet */
.sagas-grid {
  max-width: var(--content-max);
  margin: var(--space-7) auto var(--space-9);
  padding: 0 var(--space-5);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-6);
}

/* Saga card — each card scopes its own color via data-saga */
.saga-card {
  position: relative;
  padding: var(--space-6);
  background: linear-gradient(150deg, rgba(var(--saga-tint), 0.06), rgba(var(--saga-tint), 0.015));
  border: 1px solid rgba(var(--saga-tint), 0.2);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.saga-card:hover {
  transform: translateY(-3px);
  border-color: var(--saga-color);
}
.saga-card::before {
  content: '';
  position: absolute;
  top: -30%; right: -10%;
  width: 50%; height: 160%;
  background: radial-gradient(circle, var(--saga-color), transparent 60%);
  opacity: 0.08;
  pointer-events: none;
}
.saga-card .saga-status-label {
  align-self: flex-start;
  position: relative;
}
.saga-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  position: relative;
}
.saga-card__sigil {
  width: 48px;
  height: 48px;
  color: var(--saga-color);
  flex-shrink: 0;
}
.saga-card__eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--saga-color);
}
.saga-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 1.9rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-top: 2px;
  color: var(--paper);
}
.saga-card__title em { font-style: italic; color: var(--saga-color); font-weight: 300; }
.saga-card__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--paper-mute);
  position: relative;
}
.saga-card__meta {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--paper-dim);
  flex-wrap: wrap;
  position: relative;
}
.saga-card__meta span:not(:last-child)::after {
  content: '·';
  margin-left: var(--space-3);
  color: var(--ink-line);
}
.saga-card__cta {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--saga-color);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(var(--saga-tint), 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.saga-card__cta-arrow { transition: transform var(--dur-fast) var(--ease); }
.saga-card:hover .saga-card__cta-arrow { transform: translateX(3px); }

/* Design-reference cards: muted, non-interactive feel */
.saga-card[data-saga-status="design-reference"] {
  opacity: 0.65;
  pointer-events: none;
}

/* ============================================
   NEWSLETTER SUBSCRIBE — Buttondown native form
   Matches story-cta band language: bordered, gradient, narrow measure.
   Serial variant (--serial) tints toward the saga accent.
   ============================================ */
.nf-subscribe {
  max-width: var(--content-narrow);
  margin: var(--space-8) auto;
  padding: 0 var(--space-5);
}
.nf-subscribe__inner {
  padding: var(--space-7) var(--space-6);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--ink-soft), transparent);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.nf-subscribe__inner::before {
  content: '';
  position: absolute;
  top: -60%; right: -10%;
  width: 50%; height: 200%;
  background: radial-gradient(circle, var(--accent), transparent 60%);
  opacity: 0.07;
  pointer-events: none;
}
.nf-subscribe__eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: var(--space-3);
}
.nf-subscribe__heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--paper);
  margin-bottom: var(--space-3);
}
.nf-subscribe__copy {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.02rem;
  font-weight: 300;
  color: var(--paper-mute);
  line-height: 1.55;
  max-width: 48ch;
  margin: 0 auto var(--space-5);
}
.nf-subscribe__copy em { color: var(--accent); font-style: italic; }
.nf-subscribe__form {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
}
.nf-subscribe__label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.nf-subscribe__input {
  flex: 1 1 240px;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--paper);
  background: var(--ink-deep);
  border: 1px solid var(--ink-line);
  border-radius: 100px;
  transition: border-color var(--dur-fast) var(--ease);
}
.nf-subscribe__input::placeholder { color: var(--paper-dim); }
.nf-subscribe__input:focus {
  outline: none;
  border-color: var(--accent);
}
.nf-subscribe__btn {
  flex: 0 0 auto;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-deep);
  background: var(--accent);
  border-radius: 100px;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nf-subscribe__btn:hover {
  background: var(--paper);
  transform: translateY(-1px);
}
.nf-subscribe__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.nf-subscribe__status {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--accent);
  margin-top: var(--space-4);
  min-height: 1.2em;
}
.nf-subscribe__status--error { color: var(--accent-warm); }
.nf-subscribe__fineprint {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--paper-dim);
  margin-top: var(--space-4);
}

/* Serial variant — tints the band toward the saga accent */
.nf-subscribe--serial .nf-subscribe__inner::before { background: radial-gradient(circle, var(--saga-color, var(--accent)), transparent 60%); }
.nf-subscribe--serial .nf-subscribe__eyebrow,
.nf-subscribe--serial .nf-subscribe__copy em,
.nf-subscribe--serial .nf-subscribe__status { color: var(--saga-color, var(--accent)); }
.nf-subscribe--serial .nf-subscribe__input:focus { border-color: var(--saga-color, var(--accent)); }
.nf-subscribe--serial .nf-subscribe__btn { background: var(--saga-color, var(--accent)); }
.nf-subscribe--serial .nf-subscribe__btn:hover { background: var(--paper); }