/* =========================================================================
   Creepy Compendium — site.css
   Single shared stylesheet for v1 of creepycompendium.com
   Palette: Eldritch Archive
   Type:    Cormorant Garamond (display) + Inter (body/UI)
   ========================================================================= */

/* -- 1. CUSTOM PROPERTIES ------------------------------------------------- */
:root {
  /* Palette — Eldritch Archive */
  --void-plum:       #1C1520;  /* page background */
  --void-plum-soft:  #2A1F30;  /* card / panel background */
  --void-plum-edge:  #3A2D44;  /* hairlines, dividers */
  --hexmark-purple:  #7B3FA0;  /* primary CTA, brand accent */
  --hexmark-bright:  #8E4FB5;  /* hover state */
  --ember-amber:     #C4773B;  /* DISPLAY ONLY — 18px+ */
  --ember-glow:      #EFA66D;  /* SMALL TEXT — 12-17px, AAA contrast on void */
  --veryn-teal:      #4A8C84;  /* technical / informational accent */
  --parchment:       #EDE4D8;  /* primary on-dark text */
  --parchment-dim:   rgba(237, 228, 216, 0.85);
  --parchment-mute:  rgba(237, 228, 216, 0.6);
  --parchment-faint: rgba(237, 228, 216, 0.4);
  --bloodmoss-red:   #9B2335;  /* error / destructive only */

  /* Spacing scale (4px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* Layout */
  --max-w:       1200px;
  --max-w-prose: 760px;
  --radius-sm:   3px;
  --radius:      4px;

  /* Type */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Motion */
  --t-fast: 0.15s ease;
  --t:      0.25s ease;
}

/* -- 2. RESET ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--void-plum);
  color: var(--parchment);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea { font: inherit; color: inherit; }

/* -- 3. TYPOGRAPHY -------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ember-glow);
  margin-bottom: var(--s-4);
}

.display-xl {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 500;
  line-height: 1.10;
  letter-spacing: -0.01em;
  color: var(--parchment);
  text-wrap: balance;
  margin-bottom: var(--s-6);
  padding-bottom: 0.08em; /* descender room — Cormorant has long g/y/p */
}
.display-xl em { font-style: italic; color: var(--ember-amber); font-weight: 500; }

.display-l {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  line-height: 1.22;
  color: var(--parchment);
  text-wrap: balance;
  margin-bottom: var(--s-5);
  padding-bottom: 0.06em;
}
.display-l em { font-style: italic; color: var(--ember-amber); }

.display-m {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 600;
  line-height: 1.25;
  color: var(--parchment);
  text-wrap: balance;
  margin-bottom: var(--s-4);
}
.display-m em { font-style: italic; color: var(--ember-amber); font-weight: 500; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--parchment);
  line-height: 1.2;
  font-weight: 600;
}
h2 { font-size: 36px; line-height: 1.15; margin-bottom: var(--s-4); }
h3 { font-size: 24px; margin-bottom: var(--s-3); color: var(--veryn-teal); }
h4 { font-size: 18px; margin-bottom: var(--s-2); }
h1 em, h2 em, h3 em, h4 em { font-style: italic; color: var(--ember-amber); font-weight: inherit; }

p { margin-bottom: var(--s-4); color: var(--parchment-dim); }

.lede {
  font-size: 19px;
  line-height: 1.5;
  color: rgba(237, 228, 216, 0.92);
  font-weight: 300;
  margin-bottom: var(--s-6);
  max-width: 640px;
}

blockquote {
  font-family: var(--font-display);
  font-size: 27px;
  font-style: italic;
  line-height: 1.35;
  color: var(--parchment);
  border-left: 2px solid var(--ember-amber);
  padding: var(--s-3) 0 var(--s-3) var(--s-6);
  margin: var(--s-7) 0;
}
blockquote cite {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--veryn-teal);
  margin-top: var(--s-4);
}

.dropcap::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 5.4em;
  float: left;
  line-height: 0.85;
  margin: 8px 14px 0 0;
  color: var(--ember-amber);
}

.caption {
  font-size: 13px;
  color: var(--parchment-mute);
  font-style: italic;
  line-height: 1.5;
}
.meta {
  font-size: 13px;
  color: var(--parchment-mute);
  letter-spacing: 0.04em;
}

.site-nav__links a[aria-current="page"] {
  color: var(--ember-glow);
  border-bottom: 1px solid currentColor;
}

/* -- 4. LAYOUT ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.container-narrow { max-width: var(--max-w-prose); }

section { padding-block: var(--s-7); }
section.section-tight { padding-block: var(--s-6); }

hr {
  border: none;
  border-top: 1px solid rgba(196, 119, 59, 0.22);
  margin: var(--s-7) 0;
}

/* -- 5. NAV --------------------------------------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(28, 21, 32, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--void-plum-edge);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--s-7);
  padding-block: var(--s-4);
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.site-nav__wordmark {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--parchment);
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.site-nav__wordmark em { font-style: italic; color: var(--ember-amber); }
.site-nav__links {
  display: flex;
  gap: var(--s-5);
  font-size: 14px;
  font-weight: 500;
  color: rgba(237, 228, 216, 0.85);
  flex-grow: 1;
  list-style: none;
}
.site-nav__links a:hover,
.site-nav__links a.is-active { color: var(--ember-glow); }
.site-nav__cta {
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  background: var(--ember-amber);
  color: var(--void-plum);
  border-radius: var(--radius-sm);
  letter-spacing: 0.04em;
  transition: background var(--t-fast);
}
.site-nav__cta:hover { background: var(--ember-glow); }
.site-nav__toggle { display: none; }

/* -- 6. BUTTONS ----------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 13px 24px;
  border-radius: var(--radius);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  border: 1px solid transparent;
}
.btn--primary {
  background: var(--hexmark-purple);
  color: var(--parchment);
}
.btn--primary:hover { background: var(--hexmark-bright); }

.btn--secondary {
  background: transparent;
  border-color: var(--ember-glow);
  color: var(--ember-glow);
}
.btn--secondary:hover { background: rgba(239, 166, 109, 0.08); }

.btn--ember {
  background: var(--ember-amber);
  color: var(--void-plum);
}
.btn--ember:hover { background: var(--ember-glow); }

.btn--lg { padding: 16px 32px; font-size: 15px; }

/* -- 7. CARDS / PANELS ---------------------------------------------------- */
.card {
  background: var(--void-plum-soft);
  border: 1px solid rgba(196, 119, 59, 0.18);
  border-radius: var(--radius);
  padding: var(--s-6);
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
  display: flex;
  flex-direction: column;
}
.card:hover {
  border-color: var(--ember-glow);
  background: rgba(42, 31, 48, 0.7);
  transform: translateY(-6px);
  box-shadow: 0 18px 44px -10px rgba(239, 166, 109, 0.34);
}
.card h3 { color: var(--parchment); margin-bottom: var(--s-2); }
.card .meta { margin-bottom: var(--s-4); }
.card__cover {
  width: 100%;
  aspect-ratio: 2 / 3;
  background: linear-gradient(135deg, var(--void-plum-soft) 0%, var(--hexmark-purple) 50%, var(--void-plum-soft) 100%);
  border-radius: var(--radius-sm);
  margin-bottom: var(--s-5);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--parchment-mute);
}
.card__cover img { width: 100%; height: 100%; object-fit: cover; }
.card__cover .material-symbols-outlined { font-size: 64px; opacity: 0.5; }
.card__cover--square { aspect-ratio: 1 / 1; }

/* Cover placeholder — matches the .coming-soon dashed amber treatment.
   Apply when no real cover image exists yet. Renders a centered meta strap
   (e.g. "Cover · Coming 2026") instead of an icon. Works on both
   .card__cover (2:3 portrait) and .hero--featured__cover (also 2:3). */
.card__cover--placeholder,
.hero--featured__cover--placeholder {
  background: transparent;
  border: 1px dashed rgba(196, 119, 59, 0.4);
  box-shadow: none;
}
.card__cover--placeholder .meta,
.hero--featured__cover--placeholder .meta {
  color: var(--ember-glow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 11px;
  margin: 0;
  text-align: center;
}

.card-link {
  display: block;
  background: var(--void-plum-soft);
  border: 1px solid var(--void-plum-edge);
  border-radius: var(--radius);
  padding: var(--s-6);
  transition: border-color var(--t), background var(--t), transform var(--t), box-shadow var(--t);
  color: inherit;
}

/* Inner link inside a .card wrapper (used when the card body contains its
   own anchor, e.g. the Chronicles card on about.html links to chronicles.html
   via the title block but the body keeps an Amazon prequel link separate). */
.card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.card__link h3 { color: var(--parchment); }
.card:hover .card__link h3 { color: var(--ember-glow); }
.card-link:hover {
  border-color: var(--ember-glow);
  background: rgba(42, 31, 48, 0.7);
  transform: translateY(-6px);
  box-shadow: 0 18px 44px -10px rgba(239, 166, 109, 0.34);
}
.card-link h3 { color: var(--ember-glow); }
.card-link h3 .arrow { display: inline-block; transition: transform var(--t); }
.card-link:hover h3 .arrow { transform: translateX(4px); }

/* Inline section sigil used in card-grid contexts — sized like the old
   Material Symbol icon (32px) but uses the same bespoke SVG language as
   the section dividers. Inherits color from the parent so it lights up
   ember-glow by default and can recolour on hover. */
.card-sigil {
  display: block;
  width: 32px;
  height: 32px;
  color: var(--ember-glow);
  margin-bottom: var(--s-3);
  flex-shrink: 0;
  transition: color var(--t), transform var(--t);
}
.card:hover .card-sigil,
.card-link:hover .card-sigil {
  color: var(--ember-amber);
  transform: translateY(-2px);
}

/* -- 8. GRID -------------------------------------------------------------- */
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* Forced 2x2 quadrant — never collapses to 3+1. Single column under 720px. */
.grid--quad { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) {
  .grid--quad { grid-template-columns: 1fr; }
}

/* -- 9. HERO -------------------------------------------------------------- */
.hero {
  padding-block: var(--s-7) var(--s-6);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top right, rgba(123, 63, 160, 0.18), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(74, 140, 132, 0.10), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.hero > .container { position: relative; z-index: 1; }
.hero__cta-row {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-4);
}

.hero--featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  align-items: center;
  padding-block: var(--s-5);
}
.hero--featured__cover {
  aspect-ratio: 2 / 3;
  background: var(--void-plum-soft);
  border: 1px solid var(--void-plum-edge);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
.hero--featured__cover img { width: 100%; height: 100%; object-fit: cover; }
/* Aspect-ratio modifiers for cover variants. Default (no modifier) = 2:3
   novel/book proportions. */
.hero--featured__cover--rulebook { aspect-ratio: 17 / 22; }  /* US Letter portrait */
.hero--featured__cover--album    { aspect-ratio: 1 / 1; }    /* Square album cover */

/* -- 10. NEWSLETTER FORM -------------------------------------------------- */
.newsletter {
  background: var(--void-plum-soft);
  border-top: 1px solid var(--void-plum-edge);
  border-bottom: 1px solid var(--void-plum-edge);
}
.newsletter__inner { max-width: 640px; margin-inline: auto; text-align: center; }
.newsletter__form {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-6);
  flex-wrap: wrap;
  justify-content: center;
}
.newsletter__input {
  flex: 1;
  min-width: 240px;
  padding: 14px 18px;
  background: var(--void-plum);
  border: 1px solid var(--void-plum-edge);
  border-radius: var(--radius);
  color: var(--parchment);
  font-size: 15px;
  transition: border-color var(--t-fast);
}
.newsletter__input:focus {
  outline: none;
  border-color: var(--ember-glow);
}
.newsletter__input::placeholder { color: var(--parchment-faint); }
.newsletter__note {
  font-size: 12px;
  color: var(--parchment-mute);
  margin-top: var(--s-4);
}

/* Kit form alerts — sits below the input/button row inside .newsletter__form.
   Hidden when empty so it doesn't add layout when there's nothing to say. */
.newsletter__form .formkit-alert {
  flex: 1 0 100%;
  margin: var(--s-3) 0 0;
  padding: var(--s-3);
  border-radius: var(--radius);
  font-size: 13px;
  text-align: center;
  list-style: none;
}
.newsletter__form .formkit-alert:empty { display: none; }
.newsletter__form .formkit-alert-error {
  background: rgba(155, 35, 53, 0.15);
  border: 1px solid var(--bloodmoss-red);
  color: var(--parchment);
}
.newsletter__form .formkit-alert-success {
  background: rgba(74, 140, 132, 0.15);
  border: 1px solid var(--veryn-teal);
  color: var(--parchment);
}

/* Kit-required "Built with Kit" badge — must stay visible per free-plan ToS,
   and Kit's JS expects [data-element="powered-by"] inside the form. Styled
   small and dim to sit unobtrusively below the input + button. */
.newsletter__form .formkit-powered-by-convertkit-container {
  flex: 1 0 100%;
  text-align: center;
  margin-top: var(--s-2);
}
.newsletter__form .formkit-powered-by-convertkit {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--parchment-faint);
  text-decoration: none;
  transition: color var(--t-fast);
}
.newsletter__form .formkit-powered-by-convertkit:hover {
  color: var(--parchment-mute);
}

/* -- 11. FOOTER ----------------------------------------------------------- */
.site-footer {
  background: var(--void-plum-soft);
  border-top: 1px solid var(--void-plum-edge);
  padding-block: var(--s-7) var(--s-6);
  margin-top: var(--s-9);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--s-7);
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.site-footer__brand .wordmark {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}
.site-footer__brand .wordmark em { font-style: italic; color: var(--ember-amber); }
.site-footer__brand p {
  font-size: 14px;
  margin-top: var(--s-3);
  max-width: 360px;
}
.site-footer h4 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ember-glow);
  margin-bottom: var(--s-4);
}
.site-footer__nav { list-style: none; display: flex; flex-direction: column; gap: var(--s-2); font-size: 14px; }
.site-footer__nav a { color: var(--parchment-dim); }
.site-footer__nav a:hover { color: var(--ember-glow); }
.site-footer__socials { display: flex; gap: var(--s-3); }
.site-footer__socials a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--void-plum-edge);
  border-radius: var(--radius-sm);
  color: var(--parchment-dim);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.site-footer__socials a:hover {
  border-color: var(--ember-glow);
  color: var(--ember-glow);
}
.site-footer__socials svg { width: 18px; height: 18px; }
.site-footer__legal {
  width: 100%;
  max-width: var(--max-w);
  margin: var(--s-7) auto 0;
  padding: var(--s-5) var(--s-5) 0;
  border-top: 1px solid var(--void-plum-edge);
  font-size: 12px;
  color: var(--parchment-mute);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* -- 11b. ALBUM CARDS (Crescendo) ---------------------------------------- */
.album-card {
  display: flex;
  flex-direction: column;
  background: var(--void-plum-soft);
  border: 1px solid var(--void-plum-edge);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.album-card:hover {
  border-color: rgba(239, 166, 109, 0.55);
  transform: translateY(-6px);
  box-shadow: 0 18px 44px -10px rgba(239, 166, 109, 0.32);
}
.album-card__cover {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: linear-gradient(135deg, var(--void-plum-soft), var(--hexmark-purple), var(--void-plum-soft));
}
.album-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t);
}
.album-card:hover .album-card__cover img { transform: scale(1.03); }
.album-card__body {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--s-2);
}
.album-card__artist {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--veryn-teal);
  margin: 0;
}
.album-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--parchment);
  margin: 0;
}
.album-card__meta {
  font-size: 12px;
  color: var(--parchment-mute);
  margin: 0;
}
.album-card__genres {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: var(--s-1) 0 0;
}
.album-card__genre {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--veryn-teal);
  border: 1px solid var(--void-plum-edge);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  background: transparent;
  line-height: 1.4;
}
.album-card__cta {
  margin-top: auto;
  padding-top: var(--s-4);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ember-glow);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.album-card__cta:hover { color: var(--ember-amber); }
.album-card__player {
  margin-top: var(--s-4);
  border-radius: var(--radius);
  overflow: hidden;
}
.album-card__player iframe {
  display: block;
  border-radius: var(--radius);
}
/* Reset button styles to match the old anchor block */
.album-card__cover--playable {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--radius);
}
.album-card__cover--playable img {
  display: block;
  width: 100%;
  height: auto;
  transition: filter var(--t);
}
.album-card__cover--playable:hover img,
.album-card__cover--playable:focus-visible img {
  filter: brightness(0.55);
}

/* Play-button overlay — appears on hover/focus */
.album-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  display: grid;
  place-items: center;
  padding-left: 4px;          /* optical centering of the triangle */
  font-size: 22px;
  color: var(--void-plum);
  background: var(--ember-glow);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity var(--t), transform var(--t);
  pointer-events: none;
}
.album-card__cover--playable:hover .album-card__play,
.album-card__cover--playable:focus-visible .album-card__play {
  opacity: 1;
  transform: scale(1);
}

/* The iframe that replaces the cover after click */
.album-card__player {
  border-radius: var(--radius);
  overflow: hidden;
}
.album-card__player iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--radius);
}
.album-card__player-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(28, 21, 32, 0.78);
  color: var(--parchment);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--t), background var(--t);
}
.album-card__player-close:hover,
.album-card__player-close:focus-visible {
  opacity: 1;
  background: var(--void-plum);
}

/* Coming-soon card variant for crowdfunding + codex placeholders */
.coming-soon {
  background: var(--void-plum-soft);
  border: 1px dashed rgba(196, 119, 59, 0.4);
  border-radius: var(--radius);
  padding: var(--s-7) var(--s-6);
  text-align: center;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.coming-soon:hover {
  border-color: rgba(239, 166, 109, 0.8);
  transform: translateY(-6px);
  box-shadow: 0 18px 44px -10px rgba(239, 166, 109, 0.32);
}
.coming-soon h3 { color: var(--parchment); margin-bottom: var(--s-3); }
.coming-soon .meta { color: var(--ember-glow); margin-bottom: var(--s-4); letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; }
.coming-soon p { max-width: 520px; margin: 0 auto var(--s-5); }

/* "What you're backing" label + checklist inside a .coming-soon card */
.backing-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember-glow);
  margin: var(--s-6) auto var(--s-3);
  text-align: center;
}
.backing-list {
  list-style: none;
  padding: 0;
  margin: 0 auto var(--s-6);
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  text-align: left;
}
.backing-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  color: var(--parchment-dim);
  font-size: 15px;
  line-height: 1.5;
}
.backing-list li::before {
  content: "✓";
  color: var(--ember-glow);
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 1px;
}

/* -- 11.7 SECTION DIVIDERS — small Veryn glyphs between sections ---------- */
/* Inline SVG glyph centered between two faint horizontal gradient lines.
   Glyph SVG uses fill="currentColor" so colour inherits from .divider. */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4) 0;
  color: var(--ember-glow);
  clear: both; /* defensive — clear any floats escaping from above */
}
.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  max-width: 180px;
  background: linear-gradient(90deg, transparent, var(--void-plum-edge), transparent);
}
.divider__glyph {
  width: 28px;
  height: 28px;
  margin: 0 var(--s-4);
  opacity: 0.75;
  flex-shrink: 0;
}

/* -- 11.6 EMBER PARTICLES — atmospheric drift via tsParticles ------------- */
/* Particle canvas sits behind body content via z-index: -1. Site-nav
   (z-index 100) and .hero (own stacking context) already paint above. */
#ember-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
@media (prefers-reduced-motion: reduce) {
  #ember-particles { display: none; }
}

/* -- 11.3 REVEAL-ON-SCROLL — CSS scroll-driven, zero JS ------------------- */
/* Uses animation-timeline: view() to fade-rise elements as they enter the
   viewport. Modern browsers (Chrome 115+, Safari 26+, Firefox forthcoming)
   support natively. Browsers without support skip the animation entirely
   and elements appear normally — graceful degradation, no FOIC. */
@supports (animation-timeline: view()) {
  .card,
  .card-link,
  .album-card,
  .coming-soon,
  .hero--featured {
    animation: reveal-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
  @media (prefers-reduced-motion: reduce) {
    .card,
    .card-link,
    .album-card,
    .coming-soon,
    .hero--featured {
      animation: none;
    }
  }
}

@keyframes reveal-rise {
  /* Uses standalone `translate` property (not `transform`) so that hover
     states applying `transform: translateY(-Npx)` aren't overridden by
     animation-fill-mode: both holding transform: translateY(0). */
  from { opacity: 0; translate: 0 24px; }
  to   { opacity: 1; translate: 0 0; }
}

/* -- 11.4 EMBER-BREATHE — pulsing glow on display em italics -------------- */
/* Slow ember-amber text-shadow pulse on the prominent italicised words.
   Applied only to display headings + lede (not body em) so the effect
   stays ceremonial, not chaotic. */
@keyframes ember-breathe {
  0%, 100% {
    text-shadow:
      0 0 0 rgba(255, 216, 160, 0),
      0 0 0 rgba(255, 216, 160, 0);
  }
  50% {
    text-shadow:
      0 0 22px rgba(255, 216, 160, 0.65),
      0 0 50px rgba(255, 216, 160, 0.28);
  }
}

.display-xl em,
.display-l em,
.display-m em,
.lede em,
blockquote em {
  animation: ember-breathe 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .display-xl em,
  .display-l em,
  .display-m em,
  .lede em,
  blockquote em {
    animation: none;
  }
}

/* -- 11.5 DROP CAPS ------------------------------------------------------- */
/* Black-bg chroma-key: inline SVG feColorMatrix sets alpha = 6×(R+G+B).
   Pure black pixels become alpha=0 (transparent); anything brighter
   clamps to 1 (opaque). Works regardless of stacking context, unlike
   mix-blend-mode. When transparent PNGs land, remove the filter line —
   same wiring still works. */
.has-dropcap {
  /* Establish a block formatting context so the floated dropcap doesn't
     leak past the paragraph into following content (e.g. dividers below). */
  display: flow-root;
}

.dropcap {
  float: left;
  height: 3lh;
  width: auto;
  /* Negative margins compensate for the transparent padding baked into
     the MidJourney images — letter sits flush with body text top, and
     body text tucks close to the right edge of the visible glyph. */
  margin: -0.1lh 0 -0.15lh -0.2lh;
  shape-outside: margin-box;
  shape-margin: 0.1em;
  border: 0;
  display: block;
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='k' color-interpolation-filters='sRGB'><feColorMatrix values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  6 6 6 0 0'/></filter></svg>#k");
}

/* -- 12. UTILITIES -------------------------------------------------------- */
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.text-amber { color: var(--ember-amber); }
.text-glow { color: var(--ember-glow); }
.text-teal { color: var(--veryn-teal); }
.divider-amber { border-top-color: rgba(196, 119, 59, 0.22); }
.flex { display: flex; }
.gap-3 { gap: var(--s-3); }
.flex-wrap { flex-wrap: wrap; }

/* -- 13. RESPONSIVE ------------------------------------------------------- */
@media (max-width: 880px) {
  .hero--featured { grid-template-columns: 1fr; gap: var(--s-5); padding-block: var(--s-4); }
  .site-footer__inner { grid-template-columns: 1fr; gap: var(--s-6); }
  .site-nav__inner { gap: var(--s-4); }
  .site-nav__links { gap: var(--s-4); font-size: 13px; }
  section { padding-block: var(--s-6); }
  section.section-tight { padding-block: var(--s-5); }
  .hero { padding-block: var(--s-6) var(--s-5); }
  .divider { padding: var(--s-3) 0; }
}

@media (max-width: 640px) {
  .site-nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--void-plum);
    flex-direction: column;
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--void-plum-edge);
  }
  .site-nav__links.is-open { display: flex; }
  .site-nav__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: var(--s-3);
  }
  .site-nav__toggle .material-symbols-outlined { font-size: 28px; color: var(--parchment); }
  .newsletter__form { flex-direction: column; }
  .newsletter__input { min-width: 0; }
  .site-footer__legal { flex-direction: column; }
}

/* -- 9b. HERO BACKGROUND IMAGES (in-situ preview pass) ----------------- */
.hero.hero--bg {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.hero.hero--bg::before {
  background:
    linear-gradient(180deg, rgba(28, 21, 32, 0.55) 0%, rgba(28, 21, 32, 0.78) 100%);
}
.hero--home         { background-image: url('../images/heroes/hero-home.jpg'); }
.hero--codex        { background-image: url('../images/heroes/hero-codex.jpg'); }
.hero--chronicle    { background-image: url('../images/heroes/hero-chronicle.jpg'); }
.hero--crescendo    { background-image: url('../images/heroes/hero-crescendo.jpg'); }
.hero--about        { background-image: url('../images/heroes/hero-about.jpg'); }
.hero--crowdfunding { background-image: url('../images/heroes/hero-crowdfunding.jpg'); }

/* -- 11c. ALBUM-CARD COVER PLACEHOLDER + COMPILATION TAG ----------------- */
/* Album-card cover variant used when no cover image exists yet — dashed
   amber border + centered meta strap, matching the chronicles placeholder
   pattern. Still works as a click-to-load Spotify trigger. */
.album-card__cover--placeholder {
  background: transparent;
  border: 1px dashed rgba(196, 119, 59, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.album-card__cover--placeholder .meta {
  color: var(--ember-glow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 11px;
  margin: 0;
  text-align: center;
}

/* Small "Compilation" pill added to .album-card__meta on Various Artists releases. */
.album-card__comp-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ember-glow);
  border: 1px solid rgba(239, 166, 109, 0.4);
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: middle;
}

/* -- 11d. ECHO INDEX FILTER BAR ------------------------------------------ */
/* Collapsible filter row above the album grid. Outer <details> wrapper is
   sticky and holds the "Filters" toggle summary; inner .filter-bar contains
   Year + Label chips and Artist + Genre dropdowns. Cards hide via .is-hidden
   when their data-* attributes don't match. */
.filter-collapse {
  position: sticky;
  top: 62px; /* sits just under the sticky site-nav */
  z-index: 50;
  background: var(--void-plum);
  border-top: 1px solid var(--void-plum-edge);
  border-bottom: 1px solid var(--void-plum-edge);
  margin: 0 calc(-1 * var(--s-5)) var(--s-7);
}
.filter-collapse__summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-3) var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  user-select: none;
  transition: background var(--t-fast);
}
.filter-collapse__summary::-webkit-details-marker { display: none; }
.filter-collapse__summary::marker { content: ''; }
.filter-collapse__summary:hover { background: rgba(239, 166, 109, 0.04); }
.filter-collapse__icon::before {
  content: '▸';
  display: inline-block;
  font-size: 11px;
  color: var(--ember-glow);
  transition: transform var(--t);
}
.filter-collapse[open] .filter-collapse__icon::before {
  transform: rotate(90deg);
}
.filter-collapse__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember-glow);
}
.filter-collapse__status {
  font-size: 12px;
  color: var(--parchment-mute);
  letter-spacing: 0.02em;
}
.filter-collapse__status:not(:empty)::before {
  content: '·';
  margin: 0 8px 0 4px;
  color: var(--parchment-faint);
}
/* Amber tint on status text when filters are active */
.filter-collapse[data-has-filters="true"] .filter-collapse__status {
  color: var(--ember-glow);
  font-weight: 500;
}

/* Inner .filter-bar — no longer sticky/bordered (the wrapper handles that) */
.filter-bar {
  background: transparent;
  border-top: 1px solid var(--void-plum-edge);
  padding: var(--s-4) var(--s-5);
}
.filter-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-5);
}
.filter-bar__group {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.filter-bar__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember-glow);
  white-space: nowrap;
}
.filter-bar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.filter-chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border: 1px solid var(--void-plum-edge);
  border-radius: 999px;
  color: var(--parchment-dim);
  cursor: pointer;
  user-select: none;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.filter-chip input { position: absolute; opacity: 0; pointer-events: none; }
.filter-chip:hover { border-color: var(--ember-glow); color: var(--parchment); }
.filter-chip:has(input:checked) {
  background: var(--ember-glow);
  border-color: var(--ember-glow);
  color: var(--void-plum);
}

/* Dropdown (Artist / Genre) */
.filter-dropdown {
  position: relative;
}
.filter-dropdown summary {
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  padding: 5px 14px 5px 12px;
  border: 1px solid var(--void-plum-edge);
  border-radius: 4px;
  color: var(--parchment-dim);
  white-space: nowrap;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.filter-dropdown summary::-webkit-details-marker { display: none; }
.filter-dropdown summary::after {
  content: "▾";
  margin-left: 6px;
  font-size: 10px;
  opacity: 0.7;
}
.filter-dropdown[open] summary,
.filter-dropdown summary:hover { border-color: var(--ember-glow); color: var(--parchment); }
.filter-dropdown__count:not(:empty) {
  display: inline-block;
  margin-left: 6px;
  font-weight: 600;
  color: var(--ember-glow);
}
.filter-dropdown__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  background: var(--void-plum-soft);
  border: 1px solid var(--void-plum-edge);
  border-radius: var(--radius);
  padding: var(--s-3);
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 12px 32px -6px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.filter-dropdown__option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--parchment-dim);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 3px;
  transition: background var(--t-fast), color var(--t-fast);
}
.filter-dropdown__option:hover { background: rgba(239, 166, 109, 0.08); color: var(--parchment); }
.filter-dropdown__option input { accent-color: var(--ember-glow); }

/* Clear button + counter */
.filter-bar__clear {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--parchment-mute);
  background: transparent;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.filter-bar__clear:hover {
  color: var(--bloodmoss-red);
  border-color: rgba(155, 35, 53, 0.4);
}
.filter-bar__count {
  font-size: 12px;
  color: var(--parchment-mute);
  letter-spacing: 0.04em;
  margin-left: auto;
}

/* Hidden state + empty-results message */
.album-card.is-hidden { display: none; }
.filter-bar__empty {
  width: 100%;
  margin: var(--s-4) 0 0;
  padding: var(--s-3);
  text-align: center;
  color: var(--parchment-mute);
  font-size: 13px;
}
.filter-bar__empty-clear {
  background: none;
  border: none;
  color: var(--ember-glow);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.filter-bar__empty[hidden] { display: none; }

@media (max-width: 720px) {
  .filter-bar { top: 56px; padding-block: var(--s-3); }
  .filter-bar__inner { gap: var(--s-3); }
  .filter-bar__count { margin-left: 0; width: 100%; }
}