/* Dangerous List — consolidated stylesheet for Hugo.
   Generated from the design system. Drop into static/css/ (or paste into custom.css).
   Font URLs point at /fonts/ (Hugo static root). Pair with atmosphere.css for the living bg. */


/* ===== tokens/fonts.css ===== */
/* Dangerous List — webfonts (self-hosted woff2, latin subset)
   Playfair Display: gothic-elegant display/headings.
   Inter: clean body + UI. Self-hosted to keep the site's cookieless/no-3rd-party posture. */

@font-face {
  font-family: 'Playfair Display';
  src: url('/fonts/playfair-display-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('/fonts/playfair-display-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('/fonts/playfair-display-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('/fonts/playfair-display-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('/fonts/playfair-display-700-italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}


/* ===== tokens/colors.css ===== */
/* Dangerous List — Colour tokens
   Direction: "Sexy Horror". Near-black grounds, warm off-white text, crimson as the
   single brand accent. Never pure #000 (halation); never red body text (accent only).
   All foreground/background pairs meet WCAG AA. */

:root {
  /* ---- Base palette ---- */
  --dl-black:            #0d0d0d;  /* page ground — near-black, not pure */
  --dl-surface:          #1a1a1a;  /* cards, panels */
  --dl-surface-alt:      #1e1e1e;  /* alternating table rows */
  --dl-surface-hover:    #222222;  /* card / panel hover */
  --dl-border:           #2a2a2a;  /* subtle dividers */
  --dl-border-warm:      #3a2a2a;  /* warmed border on hover / pills */

  --dl-crimson:          #8b0000;  /* brand crimson — primary */
  --dl-crimson-hover:    #a01010;  /* brighter on interaction */
  --dl-crimson-link:     #ee5555;  /* readable crimson — AA on bg (5.6) + cards (5.0) */
  --dl-crimson-link-hi:  #ff8a8a;  /* link hover — AA 8.6 / 7.7 */

  --dl-bone:             #e8e0d5;  /* warm off-white — primary text */
  --dl-ash:              #9a9090;  /* muted warm grey — metadata, dates */

  --dl-amber:            #ffc107;  /* warning amber — gap indicator text */
  --dl-amber-bg:         #5a4000;  /* amber chip ground */

  --dl-pill-bg:          #241b1b;  /* tag pill ground (dim oxblood) */
  --dl-pill-text:        #d9b8b8;  /* tag pill text (dusty rose) */

  --dl-white:            #ffffff;  /* text on crimson badges/buttons */

  /* ---- Atmosphere extensions (the "artistic" uplift) ---- */
  --dl-void:             #080808;  /* deepest edge — vignette falloff */
  --dl-oxblood:          #1c0f0f;  /* warm shadowed surface base */
  --dl-wine:             #3a1414;  /* mid oxblood — card spine, deep accents */
  --dl-ember:            #c8453b;  /* heated crimson — glow cores, active flourish */

  /* ---- Semantic aliases ---- */
  --color-bg:            var(--dl-black);
  --color-surface:       var(--dl-surface);
  --color-surface-alt:   var(--dl-surface-alt);
  --color-surface-hover: var(--dl-surface-hover);
  --color-border:        var(--dl-border);
  --color-border-hover:  var(--dl-border-warm);

  --color-accent:        var(--dl-crimson);
  --color-accent-hover:  var(--dl-crimson-hover);
  --color-link:          var(--dl-crimson-link);
  --color-link-hover:    var(--dl-crimson-link-hi);

  --text-body:           var(--dl-bone);
  --text-muted:          var(--dl-ash);
  --text-on-accent:      var(--dl-white);

  --color-new-badge:     var(--dl-crimson);
  --color-nsfw-badge:    var(--dl-crimson);
  --color-gap-bg:        var(--dl-amber-bg);
  --color-gap-text:      var(--dl-amber);

  /* glow used on hero + card hover (crimson, semi-transparent) */
  --glow-crimson:        rgba(139, 0, 0, 0.30);
  --glow-crimson-soft:   rgba(139, 0, 0, 0.22);
  --glow-crimson-strong: rgba(160, 16, 16, 0.45);  /* hover/focus bloom */
  --glow-ember:          rgba(200, 69, 59, 0.35);  /* heated core */

  /* atmospheric layering gradients */
  --grad-surface:        linear-gradient(160deg, #1e1818 0%, #161313 60%, #141111 100%);
  --grad-surface-hover:  linear-gradient(160deg, #241c1c 0%, #1a1515 60%, #171313 100%);
  --grad-spine:          linear-gradient(180deg, var(--dl-ember) 0%, var(--dl-crimson) 45%, var(--dl-wine) 100%);
  --grad-vignette:       radial-gradient(120% 90% at 50% 18%, transparent 30%, rgba(8,8,8,0.55) 78%, var(--dl-void) 100%);
  --grad-hero-bloom:     radial-gradient(50% 80% at 50% 0%, var(--glow-crimson-strong), var(--glow-crimson-soft) 35%, transparent 68%);
}


/* ===== tokens/typography.css ===== */
/* Dangerous List — Typography tokens
   Playfair Display (700/900) for headings — gothic elegance.
   Inter (300/400/500/600) for body + UI.
   Courier/monospace for episode numbers — an archival, clinical counterpoint. */

:root {
  /* ---- Families ---- */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    'Courier New', Courier, monospace;

  /* ---- Weights ---- */
  --fw-light:     300;  /* @kind font */ /* metadata, dates */
  --fw-regular:   400;  /* @kind font */ /* body copy */
  --fw-medium:    500;  /* @kind font */
  --fw-semibold:  600;  /* @kind font */ /* buttons, nav, counts */
  --fw-bold:      700;  /* @kind font */ /* headings */
  --fw-black:     900;  /* @kind font */ /* hero display */

  /* ---- Type scale (rem) ---- */
  --fs-xs:    0.72rem;  /* pills, micro-badges */
  --fs-sm:    0.85rem;  /* meta, table cells, captions */
  --fs-base:  1rem;     /* body */
  --fs-md:    1.05rem;  /* lead paragraphs, taglines */
  --fs-lg:    1.2rem;   /* card titles */
  --fs-xl:    1.7rem;   /* section titles */
  --fs-2xl:   2.4rem;   /* series page title */
  --fs-3xl:   3.2rem;   /* hero display */

  /* ---- Line heights ---- */
  --lh-tight: 1.2;   /* @kind font */ /* headings */
  --lh-snug:  1.45;  /* @kind font */
  --lh-body:  1.6;   /* @kind font */ /* body copy */
  --lh-loose: 1.75;  /* @kind font */ /* long-form editorial */

  /* ---- Letter spacing ---- */
  --ls-hero:  0.5px;  /* @kind font */
  --ls-label: 0.5px;  /* @kind font */ /* uppercase labels */

  /* ---- Semantic aliases ---- */
  --text-display-font:   var(--font-heading);
  --text-display-weight: var(--fw-bold);
  --text-heading-font:   var(--font-heading);
  --text-body-font:      var(--font-body);
  --text-meta-weight:    var(--fw-light);
  --text-num-font:       var(--font-mono);
}


/* ===== tokens/spacing.css ===== */
/* Dangerous List — Spacing, radii, borders, shadow & motion tokens
   Distilled from the production mockup (rem-based rhythm, restrained radii,
   crimson-tinted lift shadow, calm 0.18s ease transitions). */

:root {
  /* ---- Spacing scale (rem) ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.7rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ---- Layout ---- */
  --container-max: 1100px;
  --container-pad: 1.25rem;
  --header-height: 60px;

  /* ---- Radii ---- */
  --radius-sm:   4px;   /* buttons, gap chip */
  --radius-md:   6px;   /* cards, panels */
  --radius-pill: 999px; /* tag pills, chips, badges */

  /* ---- Borders ---- */
  --border-width:      1px;
  --border-accent:     3px;  /* @kind spacing */ /* crimson left rail */
  --border-hairline:   1px solid var(--color-border);  /* @kind other */

  /* ---- Shadows (crimson-tinted lift, no soft neutral drop shadows) ---- */
  --shadow-card-hover: 0 4px 20px var(--glow-crimson);
  --shadow-hero-glow:  0 0 120px 40px var(--glow-crimson-soft);

  /* ---- Blur (sticky header glass) ---- */
  --blur-glass: blur(6px);  /* @kind other */

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */
  --dur-fast:   0.12s;  /* @kind other */
  --dur-base:   0.18s;  /* @kind other */ /* hover lift, colour transitions */
  --dur-slow:   0.3s;   /* @kind other */
}


/* === COMPONENT STYLES (lifted from each injected CSS block) === */

/* ----- Button ----- */
.dl-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: var(--fw-semibold);
  border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; line-height: 1;
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.dl-btn:active { transform: translateY(1px); }

/* Shared keyboard focus ring so the design system owns the focus state across all
   interactive controls, rather than each leaning on the (removable) UA default.
   :focus-visible keeps it keyboard-only, so mouse clicks don't show the ring. */
.dl-btn:focus-visible,
.dl-chip:focus-visible,
.dl-header__nav a:focus-visible,
.dl-nsfw-toggle:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.dl-btn--md { padding: 0.65rem 1.4rem; font-size: 0.95rem; }
.dl-btn--sm { padding: 0.4rem 0.9rem; font-size: 0.82rem; }
.dl-btn--lg { padding: 0.8rem 1.8rem; font-size: 1.05rem; }
.dl-btn--primary { background: var(--color-accent); color: var(--text-on-accent); }
.dl-btn--primary:hover { background: var(--color-accent-hover); color: var(--text-on-accent); box-shadow: 0 6px 30px var(--glow-crimson-strong); transform: translateY(-1px); }
.dl-btn--outline { border-color: var(--color-border); color: var(--text-body); background: transparent; }
.dl-btn--outline:hover { border-color: var(--color-link); color: var(--color-link-hover); }
.dl-btn--ghost { color: var(--text-muted); background: transparent; }
.dl-btn--ghost:hover { color: var(--color-link-hover); }
.dl-btn[disabled], .dl-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }


/* ----- TagPill ----- */
.dl-pill {
  display: inline-flex; align-items: center; gap: 0.32rem;
  font-family: var(--font-body); font-size: var(--fs-xs); line-height: 1.4;
  padding: 0.22rem 0.6rem; border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(58,20,20,0.55), rgba(36,18,18,0.55));
  color: #e0b9b9; border: 1px solid rgba(90,45,45,0.7); white-space: nowrap;
}
.dl-pill__emoji { font-size: 0.85em; }


/* ----- Badge ----- */
.dl-badge {
  display: inline-flex; align-items: center;
  font-family: var(--font-body); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label); line-height: 1;
  border-radius: var(--radius-pill);
}
.dl-badge--new, .dl-badge--nsfw {
  font-size: 0.66rem; padding: 0.15rem 0.5rem;
  background: var(--color-accent); color: var(--text-on-accent);
}
.dl-badge--nsfw-inline { font-size: 0.62rem; padding: 0.1rem 0.4rem; }
.dl-badge--gap {
  font-size: 0.68rem; font-weight: var(--fw-semibold); letter-spacing: normal;
  padding: 0.1rem 0.45rem; border-radius: var(--radius-sm);
  background: var(--color-gap-bg); color: var(--color-gap-text);
}


/* ----- FilterChip ----- */
.dl-chip {
  font-family: var(--font-body); font-size: 0.8rem; line-height: 1;
  padding: 0.3rem 0.7rem; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border); color: var(--text-muted);
  background: transparent; cursor: pointer;
  transition: color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard);
}
.dl-chip:hover { color: var(--color-link-hover); border-color: var(--color-link); }
.dl-chip--active { background: var(--color-accent); color: var(--text-on-accent); border-color: var(--color-accent); }
.dl-chip--active:hover { color: var(--text-on-accent); }


/* ----- Search + discovery controls ----- */
/* Search box stands alone and centred; all tag chips + toggles sit centred
   beneath it (see tag-filter.html). */
.dl-search-row { display: flex; justify-content: center; margin-bottom: 1.1rem; }
.dl-search {
  width: 100%; max-width: 34rem;
  font-family: var(--font-body); font-size: 1.05rem; line-height: 1.3;
  padding: 0.8rem 1.35rem; border-radius: var(--radius-pill);
  /* Warm oxblood ground + warm border so it sits in the page palette instead of
     reading as a plain black box; kept dark enough that the muted placeholder
     still clears WCAG AA (~6:1). */
  border: 1px solid var(--color-border-hover); background: var(--dl-oxblood);
  color: var(--text-body); text-align: center;
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.dl-search::placeholder { color: var(--text-muted); }
.dl-search:hover { border-color: var(--color-link); }
.dl-search:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--glow-crimson, rgba(139,0,0,0.25)); }
.dl-chip--toggle { white-space: nowrap; }
/* Centred, wrapping row of chips/toggles below the search box. */
.dl-filters { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; margin: 0 0 1.5rem; }
/* Tag-chip collapse: the least-used tags are hidden until the "Show all tags"
   label toggles this (visually hidden, keyboard-accessible) checkbox - a no-JS
   disclosure mirroring the NSFW reveal. */
.dl-tags-expand {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.dl-chip--extra { display: none; }
.dl-tags-expand:checked ~ .dl-chip--extra { display: inline-flex; }
.dl-chip--more { cursor: pointer; }
.dl-chip--more .dl-more__hide { display: none; }
.dl-tags-expand:checked ~ .dl-chip--more .dl-more__show { display: none; }
.dl-tags-expand:checked ~ .dl-chip--more .dl-more__hide { display: inline; }
.dl-tags-expand:focus-visible ~ .dl-chip--more { outline: 2px solid var(--color-link); outline-offset: 2px; }
.dl-filters__count { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--text-muted); margin: 0.7rem 0 0; text-align: center; }

/* One-shot badge: muted, so it reads as a category, not an alert like NEW. */
.dl-card__badges { position: absolute; top: 1.15rem; right: 1.2rem; display: flex; gap: 0.4rem; align-items: center; }
.dl-badge--new { box-shadow: 0 0 14px var(--glow-crimson-strong); }
.dl-badge--oneshot {
  font-size: 0.62rem; padding: 0.15rem 0.5rem;
  /* Outlined + readable: muted-on-surface was near-invisible on mobile. */
  background: rgba(13, 13, 13, 0.65); color: var(--text-body);
  border: 1px solid var(--text-muted);
}


/* ----- NsfwToggle ----- */
.dl-nsfw-toggle {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: var(--text-muted); font-family: var(--font-body); font-size: 0.85rem;
  cursor: pointer; user-select: none;
  transition: color var(--dur-base) var(--ease-standard);
}
.dl-nsfw-toggle:hover { color: var(--color-link-hover); }
.dl-nsfw-toggle__box {
  width: 15px; height: 15px; border: 1px solid var(--color-border);
  border-radius: 3px; display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.dl-nsfw-toggle__box--on { background: var(--color-accent); border-color: var(--color-accent); }
.dl-nsfw-toggle__box--on::after { content: "✓"; color: #fff; font-size: 11px; line-height: 1; }


/* ----- SeriesCard ----- */
.dl-card {
  position: relative; display: block; cursor: pointer; text-decoration: none; color: inherit;
  background: var(--grad-surface);
  border: 1px solid rgba(70,42,42,0.55);
  border-radius: 10px;
  padding: 1.5rem 1.5rem 1.4rem 1.7rem; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 1px 2px rgba(0,0,0,0.5);
  transition: transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.dl-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--grad-spine); box-shadow: 0 0 12px var(--glow-crimson);
  transition: box-shadow var(--dur-base) var(--ease-standard), width var(--dur-base) var(--ease-standard);
}
.dl-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(238,85,85,0.07) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform 0.7s var(--ease-standard);
}
.dl-card:hover {
  transform: translateY(-5px); border-color: rgba(150,60,60,0.7);
  background: var(--grad-surface-hover);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 16px 40px rgba(139,0,0,0.32);
}
.dl-card:hover::before { width: 4px; box-shadow: 0 0 20px var(--glow-crimson-strong); }
.dl-card:hover::after { transform: translateX(120%); }
.dl-card__title {
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: 1.32rem; line-height: 1.22; margin: 0 0 0.85rem; padding-right: 2.5rem;
  color: var(--text-body); transition: color var(--dur-base) var(--ease-standard);
}
.dl-card:hover .dl-card__title { color: var(--color-link-hover); }
.dl-card__pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dl-card__meta {
  display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-muted);
}
.dl-card__dot { color: var(--color-accent); }
.dl-card__badge { position: absolute; top: 1.15rem; right: 1.2rem; box-shadow: 0 0 14px var(--glow-crimson-strong); }


/* ----- EpisodeTable ----- */
/* Scrolls the table on narrow viewports rather than forcing horizontal scroll on
   the whole page (Source/Date cells are nowrap; long titles push the width out). */
.dl-table-wrap { overflow-x: auto; }
.dl-episodes { width: 100%; border-collapse: collapse; font-family: var(--font-body); }
.dl-episodes th {
  text-align: left; font-family: var(--font-mono); font-size: 0.68rem; font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-muted);
  padding: 0.6rem 0.85rem; border-bottom: 1px solid rgba(80,45,45,0.5);
}
.dl-episodes td { padding: 0.95rem 0.85rem; border-bottom: 1px solid rgba(30,22,22,0.9); vertical-align: top; }
.dl-episodes tbody tr { transition: background var(--dur-base) var(--ease-standard); }
.dl-episodes tbody tr:hover td { background: rgba(40,20,20,0.4); }
.dl-episodes a { color: var(--text-body); text-decoration: none; }
.dl-episodes a:hover { color: var(--color-link-hover); }
.dl-ep__num { font-family: var(--font-mono); font-size: 1.05rem; color: var(--color-link); width: 3.2rem; }
.dl-ep__sub { font-family: var(--font-heading); font-style: italic; color: var(--text-muted); font-size: 0.92rem; margin-top: 0.2rem; }
/* Source links (Patreon / YouTube). Selector carries `.dl-episodes a` so it
   beats the generic `.dl-episodes a` colour and reads clearly as a link. */
.dl-ep__sources { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.dl-episodes a.dl-ep__src { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-link); text-decoration: none; white-space: nowrap; }
.dl-episodes a.dl-ep__src:hover { color: var(--color-link-hover); }
.dl-ep__date { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-muted); text-align: right; white-space: nowrap; }
.dl-ep__nsfw { margin-left: 0.45rem; vertical-align: middle; }
.dl-ep__meta { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); margin-top: 0.25rem; letter-spacing: 0.02em; text-transform: uppercase; }


/* ----- SiteHeader ----- */
.dl-header {
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(180deg, rgba(8,8,8,0.92), rgba(8,8,8,0.6) 70%, transparent);
  backdrop-filter: var(--blur-glass);
  border-bottom: 1px solid rgba(80,40,40,0.35);
}
.dl-header__inner {
  max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad);
  height: var(--header-height); display: flex; align-items: center; justify-content: space-between;
}
.dl-header__brand { display: flex; align-items: baseline; gap: 0.55rem; text-decoration: none; font-family: var(--font-heading); }
.dl-header__brand .mark { font-weight: var(--fw-black); font-size: 1.3rem; color: var(--text-body); }
.dl-header__nav { display: flex; align-items: center; gap: 1.6rem; }
.dl-header__nav a {
  position: relative; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-muted); text-decoration: none; padding: 0.3rem 0;
  transition: color var(--dur-base) var(--ease-standard);
}
.dl-header__nav a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0; background: var(--color-link); transition: width var(--dur-base) var(--ease-standard); }
.dl-header__nav a:hover { color: var(--color-link-hover); }
.dl-header__nav a:hover::after { width: 100%; }
/* Series is the primary internal destination - render it as a crimson pill so it
   stands out from the plain nav links rather than reading as just another item. */
.dl-header__nav a.dl-header__nav-cta {
  color: var(--color-link); border: 1px solid var(--color-border-hover);
  border-radius: var(--radius-pill); padding: 0.32rem 0.9rem;
  transition: color var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.dl-header__nav a.dl-header__nav-cta::after { display: none; }
.dl-header__nav a.dl-header__nav-cta:hover {
  color: var(--text-on-accent); background: var(--color-accent); border-color: var(--color-accent);
}


/* ----- Hero ----- */
.dl-hero { position: relative; text-align: center; padding: 7rem 0 4.5rem; }
.dl-hero::before {
  content: ""; position: absolute; left: 50%; top: -8%; width: 120%; height: 120%;
  transform: translateX(-50%); background: var(--grad-hero-bloom); z-index: 0; pointer-events: none;
}
.dl-hero__inner { position: relative; z-index: 1; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.dl-hero__eyebrow {
  display: flex; align-items: center; gap: 1rem; justify-content: center;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--color-link); margin: 0 0 1.5rem;
}
.dl-hero__eyebrow::before, .dl-hero__eyebrow::after { content: ""; height: 1px; width: 56px; background: linear-gradient(90deg, transparent, rgba(238,85,85,0.6)); }
.dl-hero__eyebrow::before { background: linear-gradient(90deg, rgba(238,85,85,0.6), transparent); }
.dl-hero__title {
  font-family: var(--font-heading); font-weight: var(--fw-black);
  font-size: clamp(3.4rem, 9vw, 6.8rem); line-height: 0.92; letter-spacing: -0.015em; margin: 0;
  text-shadow: 0 0 60px rgba(139,0,0,0.5);
}
.dl-hero__tagline {
  font-family: var(--font-heading); font-style: italic; font-weight: var(--fw-regular);
  font-size: clamp(1.1rem, 2.1vw, 1.65rem); line-height: 1.5; color: #cdbfb6;
  max-width: 620px; margin: 1.7rem auto 0; text-wrap: balance;
}
.dl-hero__tagline b, .dl-hero__tagline em { font-weight: var(--fw-bold); font-style: italic; color: var(--color-link); }
.dl-hero__ornament { display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin: 2.3rem 0; }
.dl-hero__ornament::before, .dl-hero__ornament::after { content: ""; height: 1px; width: 90px; background: linear-gradient(90deg, transparent, rgba(154,144,144,0.4)); }
.dl-hero__ornament::after { background: linear-gradient(90deg, rgba(154,144,144,0.4), transparent); }
.dl-hero__ornament span { color: var(--color-accent); text-shadow: 0 0 10px var(--glow-ember); }
.dl-hero__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }


/* ----- SiteFooter ----- */
.dl-footer {
  border-top: 1px solid rgba(70,40,40,0.4); padding: 3rem 0;
  color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.6; text-align: center;
}
.dl-footer__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.dl-footer__disclaimer { max-width: 680px; margin: 0 auto; }
.dl-footer a { color: var(--color-link); text-decoration: none; }
.dl-footer a:hover { color: var(--color-link-hover); text-decoration: underline; }
.dl-footer__links { margin-top: 0.8rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
/* Underline so in-text links aren't distinguished by colour alone (WCAG). */
.dl-footer__links a { text-decoration: underline; }
.dl-footer__sep { color: var(--color-accent); margin: 0 0.5rem; }