/* ==========================================================================
   Alternate layout -- modelled on sethring.com.
   Scoped entirely to .alt-page so the main HUD design is untouched.

   Palette sampled directly from static/images/UDJ_TFR.jpg:
     #282e38 shadow  #45586d slate  #537994 mid  #6a849f steel
     #8aa2bb haze    #b0c6d6 pale   #81bdcf rift-glow (the accent)
   ========================================================================== */

.alt-page {
  --alt-bg: #0e141c;
  --alt-bg-2: #131b25;
  --alt-surface: rgba(28, 40, 54, 0.66);
  --alt-border: #2b3c4d;
  --alt-primary: #81bdcf;         /* the rift glow */
  --alt-primary-bright: #a8dbe8;
  --alt-warm: #b5714e;            /* Jack's coat -- the one warm note */
  --alt-heading: #eaf3f8;
  --alt-text: #c0d2e0;
  --alt-text-muted: #7d94a8;

  --alt-display: 'Oswald', 'Outfit', sans-serif;
  --alt-body: 'Inter', system-ui, sans-serif;

  /* Snow storm controls -- see the .hero__snow block for what each does. */
  --snow-speed: 8s;
  --snow-opacity: 0.9;
  --snow-scale: 1;

  /* Per-section accent. Series bands and lore pages override it; everything
     else (blog, posts) inherits this default so --band is always resolvable. */
  --band: var(--alt-primary);

  /* Seth tracks letter-spacing proportionally to type size rather than using
     one fixed value -- this ratio reproduces that. */
  --alt-track: 0.032em;

  background: var(--alt-bg);
  color: var(--alt-text);
  font-family: var(--alt-body);
}

/* The alt page runs full-bleed, so drop the container and the standard
   main padding that base.html would otherwise impose. */
.alt-page .alt-root { max-width: none; margin: 0; padding: 0; }
.alt-page main { padding: 0; }

/* Transparent header floating over the hero, as on sethring.com. */
.alt-page .navbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: transparent;
  backdrop-filter: none;
  border-bottom: none;
  box-shadow: none;
  z-index: 50;
}
.alt-page .navbar .nav-brand {
  color: var(--alt-heading);
  font-family: var(--alt-display);
  font-weight: 600;
  letter-spacing: 0.18em;
}

.alt-page .nav-links {
  gap: 2.5rem;
  font-family: var(--alt-display);
  font-size: 0.82rem;
}

.alt-page .nav-links a {
  color: var(--alt-heading);
  letter-spacing: 0.16em;
  padding-bottom: 3px;
}

/* Drop the [ bracket ] decorations for a quiet underline on hover. */
.alt-page .nav-links a::before { content: none; }
.alt-page .nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  height: 1px;
  background: var(--alt-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
}
.alt-page .nav-links a:hover { color: var(--alt-primary-bright); text-shadow: none; }
.alt-page .nav-links a:hover::after { transform: scaleX(1); }

.alt-page .hamburger span { background-color: var(--alt-heading); }

@media (max-width: 768px) {
  .alt-page .nav-links { background: var(--alt-bg); border-bottom-color: var(--alt-primary); }
}

.alt-page footer {
  border-top: 1px solid var(--alt-border);
  background: var(--alt-bg);
  margin-top: 4rem;
}
.alt-page footer .container {
  padding: 2.5rem 2rem;
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--alt-text-muted);
}
.alt-page footer p { margin: 0; }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.hero__layers { position: absolute; inset: 0; z-index: -1; }
.hero__layers > * { position: absolute; inset: 0; }

/* The 48x77 blurred copy, scaled up. Because it is the same artwork, the
   colour bleeding off every edge matches the focal plane exactly -- no
   hand-picked fill colour can do that when the art has a vertical gradient. */
.hero__bg {
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center 30%;
  transform: scale(1.18);
  filter: blur(1.5px) saturate(0.85);
}

/* Darken for text legibility, weighted to the left where the copy sits. */
.hero__scrim {
  background:
    linear-gradient(90deg, rgba(10, 16, 23, 0.94) 0%, rgba(10, 16, 23, 0.78) 38%,
                           rgba(10, 16, 23, 0.32) 66%, rgba(10, 16, 23, 0.55) 100%),
    linear-gradient(180deg, rgba(10, 16, 23, 0.85) 0%, transparent 28%,
                            transparent 62%, rgba(10, 16, 23, 0.92) 100%);
}

/* Sharp artwork, held to the right so the portrait crop keeps Jack and the
   rift in frame while the copy occupies the left.

   The layer is right-anchored and sized to the art's own 5:8 ratio, so
   `cover` fills it without cropping or distortion. Its left edge is then
   masked to a soft fade -- without this the artwork ends on a hard vertical
   line against the backdrop. Replace the mask width if a wider render lands. */
.hero__focal {
  left: auto;
  width: min(64%, calc(100svh * 0.625));
  background-image: var(--hero-focal);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
  will-change: transform;
}

.hero__vignette {
  background: radial-gradient(120% 90% at 60% 45%, transparent 38%, rgba(8, 12, 18, 0.72) 100%);
}

/* ===== SNOW =============================================================
   Replaces sethring.com's tsParticles dependency with pure CSS.

   Each radial-gradient paints ONE flake inside its own tile; background-size
   sets the tile, and the tile repeats across the hero. The keyframe slides
   each tile down by exactly its own height, so the loop is seamless, while
   the differing sideways offsets read as wind.

   Three depth planes. Because every layer covers the same distance in the
   same time, a bigger tile travels further per second -- so the near plane
   is automatically the fastest as well as the largest and sparsest.

   THREE KNOBS, all on .alt-page below:
     --snow-speed    lower = faster        (8s is a brisk storm, 24s a drift)
     --snow-opacity  overall intensity
     --snow-scale    multiplies every tile: SMALLER value = denser snow
   ======================================================================== */
.hero__snow {
  background-image:
    /* far plane -- fine and dense */
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1.3px 1.3px at 63% 44%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(1.6px 1.6px at 34% 77%, rgba(255,255,255,0.50), transparent 60%),
    /* mid plane */
    radial-gradient(2.6px 2.6px at 24% 36%, rgba(255,255,255,0.72), transparent 62%),
    radial-gradient(2.3px 2.3px at 79% 12%, rgba(255,255,255,0.64), transparent 62%),
    radial-gradient(2.8px 2.8px at 52% 66%, rgba(255,255,255,0.68), transparent 62%),
    /* near plane -- fat, fast, sparse */
    radial-gradient(4.4px 4.4px at 42% 22%, rgba(255,255,255,0.90), transparent 66%),
    radial-gradient(3.8px 3.8px at 88% 57%, rgba(255,255,255,0.82), transparent 66%),
    radial-gradient(4.8px 4.8px at 8% 72%, rgba(255,255,255,0.78), transparent 66%);
  background-size:
    calc(280px * var(--snow-scale)) calc(280px * var(--snow-scale)),
    calc(280px * var(--snow-scale)) calc(280px * var(--snow-scale)),
    calc(280px * var(--snow-scale)) calc(280px * var(--snow-scale)),
    calc(440px * var(--snow-scale)) calc(440px * var(--snow-scale)),
    calc(440px * var(--snow-scale)) calc(440px * var(--snow-scale)),
    calc(440px * var(--snow-scale)) calc(440px * var(--snow-scale)),
    calc(680px * var(--snow-scale)) calc(680px * var(--snow-scale)),
    calc(680px * var(--snow-scale)) calc(680px * var(--snow-scale)),
    calc(680px * var(--snow-scale)) calc(680px * var(--snow-scale));
  animation: snowdrift var(--snow-speed) linear infinite;
  opacity: var(--snow-opacity);
}

@keyframes snowdrift {
  from {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  to {
    background-position:
      calc(-70px  * var(--snow-scale)) calc(280px * var(--snow-scale)),
      calc(45px   * var(--snow-scale)) calc(280px * var(--snow-scale)),
      calc(-20px  * var(--snow-scale)) calc(280px * var(--snow-scale)),
      calc(-150px * var(--snow-scale)) calc(440px * var(--snow-scale)),
      calc(95px   * var(--snow-scale)) calc(440px * var(--snow-scale)),
      calc(-60px  * var(--snow-scale)) calc(440px * var(--snow-scale)),
      calc(-260px * var(--snow-scale)) calc(680px * var(--snow-scale)),
      calc(185px  * var(--snow-scale)) calc(680px * var(--snow-scale)),
      calc(-110px * var(--snow-scale)) calc(680px * var(--snow-scale));
  }
}

.hero__inner {
  position: relative;
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 2rem;
  width: 100%;
}

.hero__eyebrow {
  font-family: var(--alt-display);
  font-size: 0.8rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--alt-primary);
  margin: 0 0 1.25rem;
}

.hero__title {
  font-family: var(--alt-display);
  font-weight: 600;
  font-size: clamp(3.2rem, 11vw, 7.5rem);
  line-height: 0.94;
  letter-spacing: var(--alt-track);
  text-transform: uppercase;
  color: var(--alt-heading);
  margin: 0;
  text-shadow: 0 6px 40px rgba(8, 12, 18, 0.85);
}

.hero__sub {
  font-family: var(--alt-display);
  font-weight: 400;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--alt-primary-bright);
  margin: 0.75rem 0 0;
}

.hero__blurb {
  max-width: 30rem;
  margin: 1.75rem 0 0;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--alt-text);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }

.hero__scroll {
  position: absolute;
  bottom: 2.25rem; left: 50%;
  translate: -50% 0;
  width: 26px; height: 42px;
  border: 2px solid rgba(234, 243, 248, 0.45);
  border-radius: 14px;
}
.hero__scroll span {
  position: absolute; top: 8px; left: 50%;
  translate: -50% 0;
  width: 3px; height: 7px;
  border-radius: 2px;
  background: var(--alt-primary);
  animation: scrollpip 1.9s ease-in-out infinite;
}
@keyframes scrollpip {
  0%, 100% { opacity: 0; transform: translateY(0); }
  35%      { opacity: 1; }
  70%      { opacity: 0; transform: translateY(13px); }
}

/* Portrait artwork cannot sit beside the copy on narrow screens -- drop it
   behind the text and lean on the scrim instead. */
@media (max-width: 900px) {
  .hero { min-height: 92vh; }
  .hero__focal {
    left: 0;
    width: auto;
    background-size: cover;
    background-position: 62% center;
    opacity: 0.5;
    -webkit-mask-image: none;
            mask-image: none;
  }
  /* Heavier than desktop: the copy sits directly over the brightest part of
     the art here, rather than beside it. */
  .hero__scrim {
    background: linear-gradient(180deg, rgba(10,16,23,0.93) 0%, rgba(10,16,23,0.76) 45%, rgba(10,16,23,0.97) 100%);
  }
  .hero__blurb { max-width: none; }
  .alt-page .nav-brand { font-size: 1.05rem; letter-spacing: 1px; }

  /* --- Mobile text panel ------------------------------------------------
     On phones the copy sits directly on top of the artwork rather than
     beside it, and the art's bright snow/glow areas swallow white text. A
     scrim alone cannot fix this without dimming the whole image, so the
     copy gets its own frosted panel: the blur lifts text off the detail
     underneath while the art stays visible around it. */
  .hero__inner {
    width: auto;
    margin: 0 1rem;
    padding: 2rem 1.5rem;
    background: linear-gradient(180deg, rgba(9, 14, 20, 0.62), rgba(9, 14, 20, 0.80));
    -webkit-backdrop-filter: blur(7px) saturate(0.9);
            backdrop-filter: blur(7px) saturate(0.9);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-top: 2px solid var(--band);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  }

  /* Lift the type itself as well, so it holds up even where the panel sits
     over the brightest part of the art. */
  .hero__title { text-shadow: 0 2px 18px rgba(6, 10, 15, 0.9); }
  .hero__blurb { color: var(--alt-text); text-shadow: 0 1px 10px rgba(6, 10, 15, 0.85); }
  .hero__sub,
  .hero__eyebrow { text-shadow: 0 1px 10px rgba(6, 10, 15, 0.85); }

  /* The shorter heroes carry less copy, so they need less panel. */
  .hero--short .hero__inner,
  .hero--compact .hero__inner { padding: 1.75rem 1.25rem; }
}

/* --------------------------------------------------------------------------
   SECTIONS
   -------------------------------------------------------------------------- */
.alt-section {
  max-width: 1290px;
  margin: 0 auto;
  padding: 6rem 2rem;
}

.alt-heading {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  justify-content: center;
  font-family: var(--alt-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--alt-heading);
  margin: 0 0 3.5rem;
}
.alt-heading::before,
.alt-heading::after {
  content: '';
  height: 1px;
  flex: 1;
  max-width: 9rem;
  background: linear-gradient(90deg, transparent, var(--alt-border));
}
.alt-heading::after { background: linear-gradient(90deg, var(--alt-border), transparent); }
.alt-heading--left { justify-content: flex-start; margin-bottom: 2rem; }
.alt-heading--left::before { display: none; }

.alt-center { text-align: center; margin-top: 3rem; }
.alt-empty { text-align: center; color: var(--alt-text-muted); }

/* --------------------------------------------------------------------------
   SERIES BANDS -- one accent per series
   -------------------------------------------------------------------------- */
.series-band {
  --band: var(--alt-primary);
  --band-bg: #16232e;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  padding: 3rem;
  margin-bottom: 4rem;
  background: var(--band-bg);
  border: 1px solid var(--alt-border);
  border-left: 3px solid var(--band);
  overflow: hidden;
}

/* The first three are sampled from their series' cover art, so the band and
   the cover beside it read as one piece. The rest are generic fallbacks for
   series that have not pinned an accent in books.json. */
.series-band--frost   { --band: #81bdcf; --band-bg: #16232e; }  /* UDJ: icy rift */
.series-band--abyssal { --band: #4a95e7; --band-bg: #101f2e; }  /* Monster Soul: slime blue on deep navy */
.series-band--gilded  { --band: #c9b993; --band-bg: #0d2a2d; }  /* Card Summoner: filigree gold on card teal */

.series-band--ember   { --band: #c9724a; --band-bg: #241a17; }
.series-band--verdant { --band: #7fa86a; --band-bg: #18231a; }
.series-band--arcane  { --band: #9b7fc4; --band-bg: #1e1a2a; }

/* Faint diagonal texture, echoing Seth's has-bg-texture blocks. */
.series-band__texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background:
    radial-gradient(80% 60% at 90% 0%, color-mix(in srgb, var(--band) 14%, transparent), transparent 70%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.014) 0 2px, transparent 2px 9px);
}

.series-band > *:not(.series-band__texture) { position: relative; }

.series-band__label {
  font-family: var(--alt-display);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--band);
  margin: 0 0 0.6rem;
}

.series-band__title {
  font-family: var(--alt-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--alt-heading);
  margin: 0 0 1rem;
}

.series-band__desc {
  color: var(--alt-text-muted);
  line-height: 1.75;
  margin: 0;
  white-space: pre-line;
}

.series-band__count {
  font-family: var(--alt-display);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--band);
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--alt-border);
}

.series-band__books {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* Below this the side-by-side split leaves too little room for the book grid,
   so the band stacks and the covers get the full width instead. */
@media (min-width: 640px) {
  .series-band__books { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
}

@media (min-width: 1100px) {
  .series-band { grid-template-columns: 21rem minmax(0, 1fr); gap: 3.5rem; padding: 3.5rem; }
  .series-band--flip .series-band__intro { order: 2; }
  .series-band--flip { grid-template-columns: minmax(0, 1fr) 21rem; }
}

/* --------------------------------------------------------------------------
   BOOK CARDS -- true 2:3, matching the existing cover assets
   -------------------------------------------------------------------------- */
.alt-book { display: flex; flex-direction: column; }

.alt-book__coverwrap {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 1px solid var(--alt-border);
  background: #0b1118;
  margin-bottom: 1rem;
}

.alt-book__cover {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.alt-book:hover .alt-book__cover { transform: scale(1.06); }

.alt-book__status {
  position: absolute;
  top: 0.75rem; left: 0.75rem;
  font-family: var(--alt-display);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 9px;
  color: #0b1118;
  background: var(--band, var(--alt-primary));
}
.alt-book__status[data-status*="draft"],
.alt-book__status[data-status*="progress"] { background: var(--alt-warm); color: #fff; }

.alt-book__title {
  font-family: var(--alt-display);
  font-weight: 500;
  font-size: 1.12rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--alt-heading);
  margin: 0 0 0.2rem;
}

.alt-book__vol {
  font-family: var(--alt-display);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--alt-text-muted);
  margin: 0 0 0.85rem;
}

.alt-book__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }

.alt-tag {
  font-family: var(--alt-display);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  color: var(--band, var(--alt-primary));
  border: 1px solid color-mix(in srgb, var(--band, var(--alt-primary)) 45%, transparent);
}

.alt-book__blurbwrap { flex-grow: 1; margin-bottom: 1rem; }

.alt-book__blurb {
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--alt-text-muted);
}
.alt-book__blurb :first-child { margin-top: 0; }

.alt-page .blurb-expand-btn {
  font-family: var(--alt-display);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--band, var(--alt-primary));
}

.alt-book__links { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.alt-btn {
  display: inline-block;
  font-family: var(--alt-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.85rem 1.9rem;
  color: var(--alt-heading);
  border: 1px solid color-mix(in srgb, var(--alt-heading) 40%, transparent);
  background: transparent;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.alt-btn:hover {
  color: #0b1118;
  background: var(--alt-heading);
  border-color: var(--alt-heading);
  text-shadow: none;
}

.alt-btn--solid {
  color: #0b1118;
  background: var(--alt-primary);
  border-color: var(--alt-primary);
}
.alt-btn--solid:hover { background: var(--alt-primary-bright); border-color: var(--alt-primary-bright); color: #0b1118; }

.alt-btn--sm { padding: 0.6rem 1.15rem; font-size: 0.7rem; letter-spacing: 0.12em; }

/* --------------------------------------------------------------------------
   ABOUT
   -------------------------------------------------------------------------- */
/* Single centred column -- no portrait. Held to a comfortable reading measure
   so the text does not run the full 1290px content width. */
.alt-about__body {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}

.alt-about__body p { line-height: 1.85; color: var(--alt-text-muted); }
.alt-about__body strong { color: var(--alt-primary); font-weight: 600; }

.alt-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}
.alt-stat {
  text-align: center;
  padding: 1.1rem 0.5rem;
  border: 1px solid var(--alt-border);
  background: var(--alt-surface);
}
.alt-stat__v {
  display: block;
  font-family: var(--alt-display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--alt-primary);
}
.alt-stat__l {
  display: block;
  font-family: var(--alt-display);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--alt-text-muted);
  margin-top: 0.35rem;
}

/* --------------------------------------------------------------------------
   POSTS
   -------------------------------------------------------------------------- */
.alt-posts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .alt-posts { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
}

.alt-post {
  display: block;
  padding: 2rem;
  background: var(--alt-surface);
  border: 1px solid var(--alt-border);
  border-top: 2px solid var(--alt-primary);
  transition: background 0.25s ease, transform 0.25s ease;
}
.alt-post:hover { background: #1a2836; transform: translateY(-3px); text-shadow: none; }

.alt-post__date {
  font-family: var(--alt-display);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--alt-primary);
}
.alt-post__title {
  font-family: var(--alt-display);
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--alt-heading);
  margin: 0.6rem 0 0.7rem;
}
.alt-post__blurb { font-size: 0.9rem; line-height: 1.7; color: var(--alt-text-muted); margin: 0 0 1.1rem; }
.alt-post__more {
  font-family: var(--alt-display);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--alt-primary);
}

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */
.alt-cta {
  position: relative;
  padding: 6rem 2rem;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(10,16,23,0.9), rgba(10,16,23,0.97)),
    linear-gradient(135deg, #1d3040, #10202c);
  border-top: 1px solid var(--alt-border);
  border-bottom: 1px solid var(--alt-border);
}
.alt-cta__inner { max-width: 46rem; margin: 0 auto; }
.alt-cta__title {
  font-family: var(--alt-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 5vw, 3rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--alt-heading);
  margin: 0 0 1rem;
}
.alt-cta p { color: var(--alt-text-muted); margin: 0 auto; max-width: 34rem; }
.alt-cta .hero__actions { justify-content: center; }

/* ==========================================================================
   LORE ARCHIVE (Story Forge wiki)
   Reuses the hero, headings and buttons above; adds only what a reference
   page needs. --band is set per series so the wiki matches its book series.
   ========================================================================== */
.lore-page { --band: var(--alt-primary); }
.lore-page--frost   { --band: #81bdcf; }
.lore-page--abyssal { --band: #4a95e7; }
.lore-page--gilded  { --band: #c9b993; }
.lore-page--ember   { --band: #c9724a; }
.lore-page--verdant { --band: #7fa86a; }
.lore-page--arcane  { --band: #9b7fc4; }

/* Compact hero variant -- the lore should not sit below the fold. */
.hero--compact { min-height: 56vh; min-height: 56svh; }
.hero--compact .hero__inner { padding-top: 4rem; }

/* Shorter still, for the blog index and individual posts, where the reader
   came for the words rather than the artwork. */
.hero--short { min-height: 44vh; min-height: 44svh; }
.hero--short .hero__inner { padding-top: 4rem; padding-bottom: 1rem; }

/* Centred, even scrim -- no artwork on one side to balance against here. */
.hero__scrim--even {
  background:
    linear-gradient(180deg, rgba(10,16,23,0.88) 0%, rgba(10,16,23,0.62) 45%,
                            rgba(10,16,23,0.96) 100%);
}

.hero__inner--center { text-align: center; }
.hero__title--sm { font-size: clamp(2.2rem, 6.5vw, 4.2rem); }
.hero__blurb--center { margin-left: auto; margin-right: auto; max-width: 34rem; }
.hero__inner--center .hero__eyebrow { color: var(--band); }

/* --- Progression control --- */
.lore-controls-section { padding-top: 3rem; padding-bottom: 0; }

.lore-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.25rem;
  padding: 1.75rem;
  background: var(--alt-surface);
  border: 1px solid var(--alt-border);
  border-left: 3px solid var(--band);
}

.lore-controls__field { flex: 1 1 18rem; }

.lore-controls__label {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--alt-display);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--band);
}

.lore-select {
  width: 100%;
  padding: 0.8rem 0.9rem;
  font-family: var(--alt-body);
  font-size: 0.95rem;
  color: var(--alt-text);
  background: var(--alt-bg);
  border: 1px solid var(--alt-border);
  outline: none;
  transition: border-color 0.2s ease;
}
.lore-select:focus-visible { border-color: var(--band); }

/* --- Collapsible category groups --- */
.lore-section { padding-top: 3rem; padding-bottom: 0; }
.lore-section:last-of-type { padding-bottom: 5rem; }

.lore-group__summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--alt-border);
}
.lore-group__summary::-webkit-details-marker { display: none; }

.lore-group__title {
  font-family: var(--alt-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--alt-heading);
}

.lore-group__count {
  font-family: var(--alt-display);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  padding: 2px 9px;
  color: var(--band);
  border: 1px solid color-mix(in srgb, var(--band) 45%, transparent);
  border-radius: 999px;
}

/* Chevron rotates when the group opens. */
.lore-group__chevron {
  margin-left: auto;
  width: 9px; height: 9px;
  border-right: 2px solid var(--band);
  border-bottom: 2px solid var(--band);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}
.lore-group[open] .lore-group__chevron { transform: rotate(-135deg); }

.lore-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}
@media (min-width: 780px) {
  .lore-grid { grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); }
}

.lore-card {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  background: var(--alt-surface);
  border: 1px solid var(--alt-border);
  border-top: 2px solid var(--band);
  transition: background 0.25s ease, transform 0.25s ease;
}
.lore-card:hover { background: #1a2836; transform: translateY(-2px); }

.lore-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--alt-border);
}

.lore-card__name {
  margin: 0;
  font-family: var(--alt-display);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--alt-heading);
}

.lore-card__badge {
  flex-shrink: 0;
  font-family: var(--alt-display);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 9px;
  color: var(--band);
  border: 1px solid color-mix(in srgb, var(--band) 45%, transparent);
}

.lore-empty {
  text-align: center;
  max-width: 34rem;
  margin: 0 auto;
  padding: 3.5rem 2rem;
  border: 1px dashed var(--alt-border);
}
.lore-empty h2 {
  font-family: var(--alt-display);
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--alt-heading);
  margin: 0 0 0.75rem;
}
.lore-empty p { color: var(--alt-text-muted); margin: 0; }

/* --- Rendered lore markdown ---------------------------------------------
   Story Forge entries are prose followed by stat blocks. Each stat line
   comes through as its own <p>, so paragraphs are tightened and the <hr>
   that follows a [LABEL] line is drawn as a short accent rule. */
.markdown-content { font-size: 0.92rem; line-height: 1.75; color: var(--alt-text-muted); }

.markdown-content p { margin: 0 0 0.5rem; }
.markdown-content p:last-child { margin-bottom: 0; }

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4 {
  font-family: var(--alt-display);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--alt-heading);
  margin: 1.5rem 0 0.6rem;
}
.markdown-content h1 { font-size: 1.1rem; }
.markdown-content h2 { font-size: 1rem; }
.markdown-content h3,
.markdown-content h4 { font-size: 0.9rem; }

.markdown-content hr {
  border: 0;
  height: 1px;
  width: 3.5rem;
  background: var(--band);
  opacity: 0.6;
  margin: 0.35rem 0 0.85rem;
}

.markdown-content strong { color: var(--alt-text); font-weight: 600; }
.markdown-content em { color: var(--alt-text); }
.markdown-content a { color: var(--band); }
.markdown-content a:hover { text-shadow: none; text-decoration: underline; }

.markdown-content ul,
.markdown-content ol { margin: 0 0 0.9rem; padding-left: 1.2rem; }
.markdown-content li { margin-bottom: 0.3rem; }
.markdown-content li::marker { color: var(--band); }

.markdown-content code {
  font-family: var(--font-mono, monospace);
  font-size: 0.85em;
  padding: 1px 5px;
  color: var(--band);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--alt-border);
}
.markdown-content pre {
  padding: 1rem;
  overflow-x: auto;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--alt-border);
}
.markdown-content pre code { border: 0; padding: 0; background: none; }

.markdown-content blockquote {
  margin: 0 0 0.9rem;
  padding-left: 1rem;
  border-left: 2px solid var(--band);
  color: var(--alt-text-muted);
  font-style: italic;
}

.markdown-content table { width: 100%; border-collapse: collapse; margin-bottom: 0.9rem; }
.markdown-content th,
.markdown-content td { padding: 0.4rem 0.6rem; border: 1px solid var(--alt-border); text-align: left; }
.markdown-content th { color: var(--band); font-family: var(--alt-display); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem; }

/* ==========================================================================
   BOOKSHELF (/books)
   Every book in one flat grid. Each card carries its series accent class, so
   --band resolves per card rather than per band as it does on the homepage.
   ========================================================================== */
.shelf-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 640px) {
  .shelf-grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
}

.shelf-book {
  padding: 1.25rem;
  background: var(--alt-surface);
  border: 1px solid var(--alt-border);
  border-top: 2px solid var(--band);
}

.shelf-book__series {
  margin: 0 0 0.35rem;
  font-family: var(--alt-display);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--band);
}

/* ==========================================================================
   BLOG
   The index reuses .alt-posts / .alt-post from the home layout. Posts need
   their own prose scale: .markdown-content above is tuned for the lore stat
   blocks, which are far tighter than running text.
   ========================================================================== */
.alt-article {
  max-width: 44rem;   /* ~70 characters per line */
  margin: 0 auto;
}

.markdown-content--article {
  font-size: 1.04rem;
  line-height: 1.85;
  color: var(--alt-text);
}

.markdown-content--article > p { margin: 0 0 1.5rem; }

.markdown-content--article h1,
.markdown-content--article h2,
.markdown-content--article h3,
.markdown-content--article h4 {
  letter-spacing: 0.08em;
  margin: 2.75rem 0 1rem;
}
.markdown-content--article h1 { font-size: 1.7rem; }
.markdown-content--article h2 { font-size: 1.4rem; }
.markdown-content--article h3 { font-size: 1.15rem; }
.markdown-content--article h4 { font-size: 1rem; }

/* First heading should not push away from the hero. */
.markdown-content--article > :first-child { margin-top: 0; }

.markdown-content--article ul,
.markdown-content--article ol { margin: 0 0 1.5rem; padding-left: 1.4rem; }
.markdown-content--article li { margin-bottom: 0.6rem; }

.markdown-content--article blockquote {
  margin: 0 0 1.5rem;
  padding: 0.4rem 0 0.4rem 1.5rem;
  border-left: 2px solid var(--band);
  font-size: 1.1rem;
}

.markdown-content--article hr {
  width: 100%;
  max-width: 6rem;
  margin: 2.5rem auto;
  height: 1px;
}

.markdown-content--article img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2rem 0;
  border: 1px solid var(--alt-border);
}

.markdown-content--article pre { margin: 0 0 1.5rem; }

.alt-article__nav {
  display: flex;
  justify-content: center;
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--alt-border);
}

/* --------------------------------------------------------------------------
   Reduced motion -- kill parallax, snow and hover drift.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__snow { animation: none; }
  .hero__scroll span { animation: none; opacity: 1; }
  .parallax { transform: none !important; }
  .alt-book__cover, .alt-post { transition: none; }
  .lore-card, .lore-group__chevron { transition: none; }
}