/* ============================================================
   ARCANA — LORE (/lore)
   "The illuminated grimoire": an illustrated, scroll-driven read.
   Loaded from lore.html's {% block head %}, after tokens.css + style.css.

   Illustration slots are `.lore-plate`. Every plate has two states — art
   present (an <img> in a button that opens the lightbox) and art pending
   (`.is-empty`, an engraved cartouche). Both are designed states: the page
   must look finished with no lore art on disk.
   ============================================================ */

/* ---- Scroll-reveal ------------------------------------------
   Only armed once lore.js has set .lore-js on <html>, so a JS failure
   leaves the whole page visible rather than blank. */
.lore-js [data-lore-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1);
}
.lore-js [data-lore-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ============================================================
   PLATES — the shared illustration frame
   ============================================================ */
.lore-plate {
  margin: 0;
  --plate-ar: 4 / 5;
}
.lore-plate-frame {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: var(--plate-ar);
  overflow: hidden;
  border: 0;
  padding: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, var(--ink-700), var(--ink-900));
  box-shadow:
    inset 0 0 0 1px var(--rule),
    inset 0 -60px 80px -40px rgba(0, 0, 0, .85),
    0 10px 34px rgba(0, 0, 0, .5);
}
/* Inner hairline — the engraved second rule of a printed plate. */
.lore-plate-frame::after {
  content: '';
  position: absolute;
  inset: 7px;
  border: 0.4px solid color-mix(in srgb, var(--gold-300) 13%, transparent);
  border-radius: 2px;
  pointer-events: none;
  transition: border-color var(--transition);
}
.lore-plate-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Art arrives from many generators; grading it down to a warm, dim register
     on rest is what keeps forty plates reading as one deck. Hover lifts it. */
  filter: saturate(.72) contrast(1.06) brightness(.82) sepia(.12);
  transform: scale(1.015);
  transition: filter .6s ease, transform .9s cubic-bezier(.2, .7, .3, 1);
}

/* Interactive plate (art present) */
.lore-plate-btn {
  cursor: zoom-in;
  background: none;
}
.lore-plate-btn:hover img,
.lore-plate-btn:focus-visible img {
  filter: saturate(1) contrast(1.04) brightness(1) sepia(0);
  transform: scale(1.06);
}
.lore-plate-btn:hover::after,
.lore-plate-btn:focus-visible::after {
  border-color: color-mix(in srgb, var(--gold-300) 42%, transparent);
}

/* Gold glint sweeping the glass on hover */
.lore-plate-glint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 38%,
    color-mix(in srgb, var(--gold-100) 22%, transparent) 50%,
    transparent 62%);
  transform: translateX(-120%);
  opacity: 0;
}
.lore-plate-btn:hover .lore-plate-glint {
  animation: lore-glint 1.1s ease-out;
}
@keyframes lore-glint {
  0%   { transform: translateX(-120%); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translateX(120%);  opacity: 0; }
}

/* Pending plate (art not yet generated) */
.lore-plate-empty {
  display: grid;
  place-content: center;
  gap: .5rem;
  text-align: center;
  background:
    radial-gradient(60% 55% at 50% 45%,
      color-mix(in srgb, var(--gold-300) 7%, transparent) 0%, transparent 70%),
    linear-gradient(160deg, var(--ink-700), var(--ink-900));
}
.lore-plate-orn {
  font-size: 1.5rem;
  color: color-mix(in srgb, var(--gold-300) 55%, transparent);
  text-shadow: 0 0 18px color-mix(in srgb, var(--gold-300) 35%, transparent);
}
.lore-plate-slug {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--parchment) 26%, transparent);
}
.lore-plate-cap {
  margin-top: .55rem;
  font-family: var(--font-accent);
  font-size: var(--step--1);
  font-style: italic;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--parchment-dim) 78%, transparent);
}

/* Per-slot aspect ratios */
.lore-plate--tl    { --plate-ar: 16 / 9; }
.lore-plate.lore-plate--tl .lore-plate-frame img {
  object-fit: contain;
  transform: none;
}
.lore-plate--wide  { --plate-ar: 16 / 10; }
.lore-plate--suit  { --plate-ar: 3 / 4; }
.lore-plate--rung  { --plate-ar: 1 / 1; }
.lore-plate--motif { --plate-ar: 4 / 3; }

/* ============================================================
   HERO — full-bleed atmospheric plate
   ============================================================ */
.lore-hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-7) var(--space-4);
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;   /* the whole cover is an entry point (lore.js) */
}
/* Animated cover: a breathing glow behind slowly turning astrolabe rings. */
.lore-hero-orbits {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.lore-hero-glow {
  position: absolute;
  width: min(46rem, 92vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--gold-300) 13%, transparent) 0%, transparent 62%);
  animation: lore-breathe 7s ease-in-out infinite;
}
.lore-hero-ring {
  position: absolute;
  border-radius: 50%;
  aspect-ratio: 1;
  border: 1px dashed color-mix(in srgb, var(--gold-300) 20%, transparent);
}
.lore-hero-ring--1 { width: min(38rem, 86vw); animation: lore-rotate 120s linear infinite; }
.lore-hero-ring--2 {
  width: min(26rem, 62vw);
  border-style: solid;
  border-color: color-mix(in srgb, var(--gold-300) 12%, transparent);
  animation: lore-rotate 90s linear infinite reverse;
}
@keyframes lore-rotate { to { transform: rotate(360deg); } }
@keyframes lore-breathe {
  0%, 100% { opacity: .55; transform: scale(.97); }
  50%      { opacity: .95; transform: scale(1.04); }
}
/* Cover entrance — the title block rises in on load. */
@keyframes lore-enter {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.lore-hero .page-arch-eyebrow { animation: lore-enter .9s .1s both cubic-bezier(.2, .7, .3, 1); }
.lore-hero .lore-lede { animation: lore-enter 1s .5s both cubic-bezier(.2, .7, .3, 1); }
.lore-hero-plate {
  position: absolute;
  inset: -8% 0 0;
  z-index: -2;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center 40%;
  filter: saturate(.6) brightness(.5) contrast(1.05);
  will-change: transform;
}
.lore-hero-plate.is-empty {
  background: radial-gradient(70% 60% at 50% 35%,
    color-mix(in srgb, var(--gold-300) 9%, transparent) 0%, transparent 72%);
  filter: none;
}
.lore-hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(75% 60% at 50% 42%, transparent 0%, var(--ink-900) 100%),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink-900) 55%, transparent) 0%, transparent 30%, var(--ink-900) 96%);
}
.lore-hero-inner {
  max-width: 48rem;
  position: relative;
}
.lore-lede {
  max-width: 46rem;
  margin: 1rem auto 0;
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.75;
  color: var(--text-body);
}
.lore-lede::first-letter { color: var(--gold-lt); }
/* Cover title: a gilt gradient that shimmers, rising in on load. */
.lore-hero .page-arch-title {
  background: linear-gradient(100deg,
    var(--gold-400) 0%, var(--gold-100) 25%, var(--gold-200) 50%,
    var(--gold-100) 70%, var(--gold-300) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation:
    lore-enter 1s .3s both cubic-bezier(.2, .7, .3, 1),
    lore-shimmer 7s 1.3s linear infinite;
}
/* Title-page fleuron, beneath the book's title. */
.lore-hero .page-arch-title::after {
  content: "\2767";
  display: block;
  margin: .85rem auto 0;
  font-size: 1.15rem;
  line-height: 1;
  color: color-mix(in srgb, var(--gold-300) 66%, transparent);
  -webkit-text-fill-color: currentColor;  /* opt out of the title's clipped fill */
  font-variant-emoji: text;
}

.lore-hero-scroll {
  position: absolute;
  bottom: var(--space-5);
  left: 0; right: 0;
  margin: 0 auto;
  width: max-content;
  z-index: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: var(--caps-4-size);
  font-weight: var(--caps-4-weight);
  letter-spacing: var(--caps-4-track);
  text-transform: uppercase;
  color: var(--gold);
  animation: lore-enter 1s .8s both cubic-bezier(.2, .7, .3, 1);
}
.lore-hero-arrow {
  animation: lore-bob 2.6s ease-in-out infinite;
  font-size: 1rem;
}
@keyframes lore-bob {
  0%, 100% { transform: translateY(0);   opacity: .55; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* ============================================================
   THE READ — a Contents rail beside the bound volume
   ============================================================ */
.lore-read {
  max-width: 72rem;
  margin: var(--space-5) auto;
  padding: 0 var(--space-4);
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 1120px) {
  .lore-read { grid-template-columns: minmax(0, 1fr); padding: 0 var(--space-3); }
  .lore-rail { display: none; }
}

/* ---- Contents rail: sticky scroll-spy + reading-progress thread ---- */
.lore-rail {
  position: sticky;
  top: 96px;
  align-self: start;
  padding-top: var(--space-5);
}
.lore-rail-title {
  margin: 0 0 1.1rem;
  padding-left: 28px;
  font-family: var(--font-display);
  font-size: var(--caps-3-size);
  font-weight: var(--caps-3-weight);
  letter-spacing: var(--caps-3-track);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gold-200) 60%, transparent);
}
.lore-rail-track { position: relative; padding-left: 28px; }
/* The faint full-height track… */
.lore-rail-track::before {
  content: '';
  position: absolute;
  left: 0; top: .3rem; bottom: .3rem;
  width: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--gold-300) 16%, transparent);
}
/* …and the gold thread that fills to your reading position (lore.js). */
.lore-rail-progress {
  position: absolute;
  left: 0; top: .3rem;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: linear-gradient(var(--gold-200), var(--gold-300));
  box-shadow: 0 0 8px color-mix(in srgb, var(--gold-200) 50%, transparent);
  transition: height .15s linear;
}
.lore-rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
.lore-rail-link {
  display: grid;
  grid-template-columns: 1.5rem auto;
  align-items: baseline;
  gap: .6rem;
  /* Inactive chapters read as "available": muted parchment at ~6:1 (WCAG AA),
     leaving the brightest gold (--gold-pale, ~15.9:1) to mark the current one. */
  color: color-mix(in srgb, var(--parchment-dim) 80%, transparent);
  transition: color var(--transition);
}
.lore-rail-num {
  font-family: var(--font-display);
  font-size: .82rem;
  color: color-mix(in srgb, var(--gold-300) 82%, transparent);
}
.lore-rail-label {
  font-family: var(--font-display);
  /* Enlarged from the tiny --caps-5 scaffolding size so the Contents entries
     read as navigable chapter names, not fine print. */
  font-size: .72rem;
  font-weight: var(--caps-5-weight);
  letter-spacing: var(--caps-5-track);
  text-transform: uppercase;
}
.lore-rail-link:hover { color: var(--gold-lt); }
.lore-rail-link.is-current { color: var(--gold-pale); }
.lore-rail-link.is-current .lore-rail-num { color: var(--gold-pale); }

/* ============================================================
   PAGE SHELL & SECTION HEADS
   ============================================================ */
/* The reading area is an open, bound volume. A leather COVER (.lore-book)
   cradles the LEAVES (.lore-page): the cover gives the tome its thickness and
   rests it on the starfield, while the leaves carry the page-curl shading, the
   gutter valley where the two pages meet, stacked fore-edges, chapter openers,
   a drop-cap and corner folios. The two-page illusion (spine + curl) renders
   only on the wide layout; narrower screens fold the tome to a single leaf. */
.lore-book {
  position: relative;
  margin: 0;
  padding: 5px 6px 7px;                    /* the cover's slim "square" around the leaves */
  border-radius: 8px 9px 9px 7px;
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--gold-600) 26%, #14100a) 0%,
      #120e08 42%, #0b0806 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--gold-200) 11%, transparent), /* light on the cover's top lip */
    inset 0 0 0 1px rgba(0, 0, 0, .5),
    inset 0 -2px 5px rgba(0, 0, 0, .55),
    0 5px 15px rgba(0, 0, 0, .5),
    0 34px 74px -30px rgba(0, 0, 0, .9);    /* the tome's shadow on the desk */
}
/* A soft sheen down the cover. */
.lore-book::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 30% 0%,
      color-mix(in srgb, var(--gold-300) 10%, transparent) 0%, transparent 55%);
  mix-blend-mode: overlay;
  opacity: .5;
}

.lore-page {
  position: relative;
  isolation: isolate;
  margin: 0;
  /* Side margins hold the reading column to a comfortable measure while keeping
     the tome trim and elegant rather than sprawling across the canvas. Vertical
     padding unchanged. */
  padding: var(--space-6) clamp(var(--space-4), 6vw, 5.5rem) var(--space-5);
  border-radius: 2px 3px 3px 2px;
  border: 1px solid color-mix(in srgb, var(--gold-500) 26%, transparent);
  /* The leaf: an even warm-ink paper tone with lightly lit fore-edges. Only a
     whisper of warmth lifts the very top — kept close to the base tone so the
     leaf reads as one uniform surface rather than a lit-top-to-dark-bottom
     wash that competes with the text. No centre shadow, so the timeline's gold
     thread reads cleanly down the middle. */
  background:
    linear-gradient(to right,
      rgba(246, 231, 178, .05) 0%, rgba(0, 0, 0, 0) 20%,
      rgba(0, 0, 0, 0) 80%, rgba(246, 231, 178, .05) 100%),
    radial-gradient(150% 100% at 50% -8%,
      color-mix(in srgb, var(--ink-800) 90%, var(--gold-600)) 0%,
      var(--ink-800) 42%),
    var(--ink-800);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--gold-200) 6%, transparent),
    inset 0 0 48px rgba(0, 0, 0, .22);
}
/* The gutter — the shadowed valley where the leaves meet, flanked by the soft
   highlights of the pages curving back up, with a hair-thin gilt crease at its
   floor. Wide layout only; hidden when the tome folds to a single leaf. */
.lore-page::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 96px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: -1;
  display: none;
  background:
    linear-gradient(to right, transparent 0%,
      rgba(0, 0, 0, .14) 28%, rgba(0, 0, 0, .42) 47%, rgba(0, 0, 0, .5) 50%,
      rgba(0, 0, 0, .42) 53%, rgba(0, 0, 0, .14) 72%, transparent 100%),
    linear-gradient(to right, transparent 22%,
      color-mix(in srgb, var(--gold-100) 9%, transparent) 35%, transparent 45%,
      transparent 55%,
      color-mix(in srgb, var(--gold-100) 9%, transparent) 65%, transparent 78%),
    linear-gradient(to right, transparent calc(50% - .5px),
      color-mix(in srgb, var(--gold-400) 30%, transparent) 50%,
      transparent calc(50% + .5px));
}
/* Stacked fore-edges — the visible thickness of the leaves at the outer
   margins: a lit band grading into shadow, striated one line per page. */
.lore-page::after {
  content: '';
  position: absolute;
  inset: 10px;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--gold-100) 9%, transparent) 0,
      rgba(0, 0, 0, .35) 6px, transparent 7px) left / 7px 100% no-repeat,
    repeating-linear-gradient(to bottom,
      color-mix(in srgb, var(--gold-100) 8%, transparent) 0 1px,
      rgba(0, 0, 0, .18) 1px 3px) left / 6px 100% no-repeat,
    linear-gradient(to left,
      color-mix(in srgb, var(--gold-100) 9%, transparent) 0,
      rgba(0, 0, 0, .35) 6px, transparent 7px) right / 7px 100% no-repeat,
    repeating-linear-gradient(to bottom,
      color-mix(in srgb, var(--gold-100) 8%, transparent) 0 1px,
      rgba(0, 0, 0, .18) 1px 3px) right / 6px 100% no-repeat;
}
/* The centre gutter shadow is intentionally left hidden so the leaf reads even
   down the middle and the timeline shows only its gold thread. */

.lore-section {
  position: relative;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-2);
}
.lore-section:target { scroll-margin-top: 96px; }

/* Running head at the top of the leaf. */
.lore-runhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--caps-5-size);
  font-weight: var(--caps-5-weight);
  letter-spacing: .32em;
  text-transform: uppercase;
  /* Lifted to ~5.6:1 on the leaf (WCAG AA) — was a near-invisible ~2:1. */
  color: color-mix(in srgb, var(--parchment-dim) 78%, transparent);
}

/* ---- Chapter opener ------------------------------------------ */
.lore-section-head {
  position: relative;
  text-align: center;
  max-width: 44rem;
  margin: 0 auto var(--space-4);
  padding-top: var(--space-2);
}
/* Astrolabe: a slowly-turning dashed ring with a soft glow, behind the title. */
.lore-section-rings {
  position: absolute;
  top: 4.6rem; left: 50%;
  width: 17rem; height: 17rem;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--gold-300) 18%, transparent);
  background: radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb, var(--gold-300) 9%, transparent) 0%, transparent 70%);
  animation: lore-spin 100s linear infinite;
}
.lore-section-rings::after {
  content: '';
  position: absolute;
  inset: 2.4rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--gold-300) 10%, transparent);
}
@keyframes lore-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.lore-section-num {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--caps-3-size);
  font-weight: var(--caps-3-weight);
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--gold-warm);
  margin-bottom: 1rem;
}
.lore-section-num::before { content: "Chapter "; }
/* Gilt-leaf chapter title: a slow shimmer travels its gold gradient. */
.lore-section-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: .02em;
  margin: 0;
  background: linear-gradient(100deg,
    var(--gold-400) 0%, var(--gold-100) 24%, var(--gold-200) 48%,
    var(--gold-100) 68%, var(--gold-300) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: lore-shimmer 7s linear infinite;
}
@keyframes lore-shimmer { to { background-position: 200% center; } }

/* The rule-and-fleuron under the chapter title. */
.lore-head-orn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  margin: var(--space-3) 0;
  color: var(--gold-warm);
}
.lore-head-rule {
  width: 4rem; height: 1px;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--gold-warm) 80%, transparent));
}
.lore-head-orn .lore-head-rule:last-child {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--gold-warm) 80%, transparent), transparent);
}
.lore-head-star { font-size: .7rem; opacity: .75; }
.lore-head-fleur {
  font-size: 1.25rem;
  color: var(--gold-lt);
  font-variant-emoji: text;
}
.lore-section-sub {
  position: relative;
  z-index: 1;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0;
}

/* Chapter tailpiece: a fleuron over a numbered rule. */
.lore-chapter-end {
  text-align: center;
  margin-top: var(--space-5);
}
.lore-chapter-end-fleur {
  display: block;
  font-size: 1.3rem;
  color: color-mix(in srgb, var(--gold-300) 75%, transparent);
  font-variant-emoji: text;
}
.lore-chapter-end-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  margin-top: var(--space-3);
}
.lore-chapter-end-rule > span:first-child,
.lore-chapter-end-rule > span:last-child {
  width: 2.75rem; height: 1px;
  background: color-mix(in srgb, var(--parchment) 26%, transparent);
}
.lore-chapter-end-num {
  font-family: var(--font-display);
  font-size: var(--caps-5-size);
  letter-spacing: .3em;
  color: color-mix(in srgb, var(--parchment) 46%, transparent);
}
.lore-subhead {
  font-family: var(--font-accent);
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--text);
  text-align: center;
  margin: var(--space-6) 0 var(--space-4);
}
.lore-subhead::after {
  content: '';
  display: block;
  width: 34px; height: 1px;
  margin: .7rem auto 0;
  background: var(--rule-hover);
}

/* ============================================================
   I · HISTORY — alternating leaves around a living reading thread
   Adapted from A Short History.dc.html.
   ============================================================ */
/* Draw the chapter head's subtitle down toward the first era so the timeline
   opens right under it, keeping the composition dense at the top. */
#history .lore-section-head { margin-bottom: var(--space-2); }
.lore-history-timeline {
  position: relative;
  /* Pulled in tight under the chapter head so the first era rises to meet the
     subtitle instead of opening a void beneath it. The top padding is the room
     the first era's spine date-pill needs to clear the subtitle — keep it. */
  margin-top: 0;
  padding: 1.5rem 0 1rem;
}
/* Spine crown — a small gilt star seats the centred chapter head directly atop
   the timeline's central thread. It shares the column's centre-line with the
   head's flourish, so the eye follows one continuous axis from the title down
   onto the thread, and reads the left/right entries as branching off it rather
   than as a jarring reset from a centred intro to an asymmetric split. */
.lore-history-timeline::before {
  content: "\2726";
  position: absolute;
  top: -.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: .72rem;
  line-height: 1;
  color: color-mix(in srgb, var(--gold-300) 66%, transparent);
  text-shadow: 0 0 10px color-mix(in srgb, var(--gold-200) 35%, transparent);
}
.lore-history-thread,
.lore-history-thread-fill {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  width: 1px;
  transform: translateX(-50%);
  pointer-events: none;
}
/* Emerges crisply from just beneath the crown (a short soft-in), holds full
   strength down the run, then fades out at the tail. */
.lore-history-thread {
  bottom: 0;
  background: linear-gradient(to bottom,
    transparent,
    color-mix(in srgb, var(--gold-300) 29%, transparent) 1.5%,
    color-mix(in srgb, var(--gold-300) 29%, transparent) 95%,
    transparent);
}
.lore-history-thread-fill {
  height: 0;
  width: 2px;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--gold-200) 0%, transparent),
    color-mix(in srgb, var(--gold-200) 92%, transparent));
  box-shadow: 0 0 14px color-mix(in srgb, var(--gold-200) 45%, transparent);
  transition: height .12s linear;
}
.lore-history-eras {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}
.lore-history-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.25rem minmax(0, 1fr);
  grid-template-areas: "media node copy";
  /* Top-align the pair: the plate's top edge meets the copy's first line so the
     image and text read as one deliberate unit, not two floated blocks. (The
     node stays centred on the entry via its own align-self: stretch.) */
  align-items: start;
  /* Tightened so consecutive eras read as one continuous, composed column
     rather than isolated blocks floating in dead space — the inter-entry gap
     was large enough (relative to each entry's height) to make the timeline
     feel thin for the canvas. */
  margin: 0 0 clamp(2.25rem, 4.2vw, 3.4rem);
}
.lore-history-entry.is-reversed {
  grid-template-areas: "copy node media";
}
.lore-history-entry:last-child { margin-bottom: 0; }

.lore-history-media {
  grid-area: media;
  min-width: 0;
  /* Gutter trimmed so the plate grows inward toward the centre thread. This
     enlarges the art (width, and height with it via --plate-ar) without taking
     any width from the copy column, so the text's line length is unchanged. */
  padding-right: clamp(.35rem, .9vw, .7rem);
}
.lore-history-entry.is-reversed .lore-history-media {
  padding-right: 0;
  padding-left: clamp(.35rem, .9vw, .7rem);
}
.lore-history-media .lore-plate {
  width: 100%;
  /* Anchor the column: the plate fills its half rather than floating small
     against the outer margin. */
  max-width: none;
  margin: 0;
  opacity: .78;
  transform: translateY(4px);
  transition: opacity .55s ease, transform .65s cubic-bezier(.2, .7, .3, 1);
}
.lore-history-entry.is-reversed .lore-history-media .lore-plate {
  margin-right: auto;
  margin-left: 0;
}
/* 4:3 rather than a letterbox. At 307px wide the plate stands 235px tall, which
   brings the art up to the height of the copy beside it instead of leaving a
   band of dead column under every entry. */
.lore-history-media .lore-plate--tl { --plate-ar: 4 / 3; }
.lore-history-media .lore-plate-cap {
  margin-top: .75rem;
  text-align: center;
}
/* A period-appropriate engraved plate: squared corners and a double gilt rule
   (outer border + inner ::after keyline) over a faint parchment mat — the
   language of a printed book-plate, of-a-piece with the tome's ruled border,
   in place of the generic thin rounded frame. */
.lore-plate--history .lore-plate-frame {
  border: 1px solid color-mix(in srgb, var(--gold-400) 52%, transparent);
  border-radius: 1px;
  padding: 8px;
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--parchment) 5%, transparent),
      color-mix(in srgb, var(--parchment) 1.5%, transparent) 60%);
  box-shadow:
    inset 0 0 0 1px var(--rule),
    inset 0 -60px 80px -40px rgba(0, 0, 0, .78),
    0 20px 50px rgba(0, 0, 0, .5);
}
.lore-plate--history .lore-plate-frame::after {
  inset: 5px;
  border-radius: 0;
  border-color: color-mix(in srgb, var(--gold-300) 32%, transparent);
}
/* Square the art to sit flush inside the ruled mat, and fill it. The `--tl`
   default is `contain`, which suited a run of uniformly 16:9 plates; the art on
   disk is now mixed (some 16:9, some 4:3), so `contain` pillarboxes one group
   and letterboxes the other — either way the art renders smaller than its slot.
   `cover` fills the mat edge to edge at one consistent size, and restoring the
   transform gives these plates back the resting/hover zoom every other plate
   has (the `--tl` rule zeroes it, which `contain` needed and `cover` doesn't). */
.lore-plate.lore-plate--history .lore-plate-frame img {
  border-radius: 0;
  object-fit: cover;
  /* Cropping to the mat can cut a subject that sits off-centre; `focus` in
     lore_data.py sets --plate-pos on the figure to steer it. */
  object-position: var(--plate-pos, 50% 50%);
  transform: scale(1.015);
}

.lore-history-node-wrap {
  grid-area: node;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Seat the station at the TOP of the entry — level with the era's date and the
     plate's top edge — so each node reads as the point on the axis where that era
     begins, not as a decorative dot floating mid-entry. */
  align-self: start;
  padding-top: .2rem;
}
.lore-history-node {
  position: relative;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border: 1px solid color-mix(in srgb, var(--gold-300) 52%, transparent);
  border-radius: 50%;
  background: var(--ink-800);
  color: color-mix(in srgb, var(--gold-300) 54%, transparent);
  font-size: .5rem;
  line-height: 1;
  box-shadow: none;
  transition: background .45s ease, box-shadow .45s ease, border-color .45s ease,
    color .45s ease, transform .45s ease;
}
/* The year, printed on the spine just above its node — this is what makes the
   central rule legible as a chronological axis rather than a column divider. It
   sits in the gap between entries (clear space either side) over a faint ink
   cartouche so it stays readable if it grazes a plate corner. Decorative: the
   real, screen-reader date lives in .lore-history-date. */
.lore-history-node::after {
  content: attr(data-era);
  position: absolute;
  bottom: calc(100% + .5rem);
  left: 50%;
  transform: translateX(-50%);
  padding: .18em .6em;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gold-warm) 62%, transparent);
  background: color-mix(in srgb, var(--ink-900, #0c0b14) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold-300) 22%, transparent);
  border-radius: 999px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .55);
  backdrop-filter: blur(3px);
  transition: color .45s ease, border-color .45s ease, box-shadow .45s ease,
    transform .45s ease;
}
.lore-history-entry.is-lit .lore-history-node {
  border-color: var(--gold-200);
  background: radial-gradient(circle,
    color-mix(in srgb, var(--gold-200) 42%, transparent),
    rgba(16, 15, 24, .88));
  color: var(--gold-pale);
  box-shadow: 0 0 16px 3px color-mix(in srgb, var(--gold-200) 45%, transparent);
  transform: scale(1.3);
}
.lore-history-entry.is-current .lore-history-node {
  border-color: var(--gold-pale);
  box-shadow: 0 0 21px 4px color-mix(in srgb, var(--gold-200) 50%, transparent);
  transform: scale(1.42);
}
/* The year on the spine tracks its node's state — dim ahead of the reading line,
   gilt once the axis has filled past it, brightest at the current station. */
.lore-history-entry.is-lit .lore-history-node::after {
  color: var(--gold-lt);
  border-color: color-mix(in srgb, var(--gold-300) 40%, transparent);
}
.lore-history-entry.is-current .lore-history-node::after {
  color: var(--gold-pale);
  border-color: color-mix(in srgb, var(--gold-200) 55%, transparent);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .55),
    0 0 16px color-mix(in srgb, var(--gold-200) 28%, transparent);
}
/* The node's scale transform would drag the year label with it; counter-scale so
   the printed year holds steady while its dot pulses. */
.lore-history-entry.is-lit .lore-history-node::after { transform: translateX(-50%) scale(.77); }
.lore-history-entry.is-current .lore-history-node::after { transform: translateX(-50%) scale(.704); }

.lore-history-copy {
  grid-area: copy;
  min-width: 0;
  max-width: 27rem;
  padding-left: clamp(.85rem, 2vw, 1.6rem);
  text-align: left;
  opacity: .68;
  transform: translateX(-4px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
}
.lore-history-entry.is-reversed .lore-history-copy {
  justify-self: end;
  padding-right: clamp(.85rem, 2vw, 1.6rem);
  padding-left: 0;
  text-align: right;
  transform: translateX(4px);
}
/* On desktop the era's date is printed on the spine (node::after), so the copy's
   own date is redundant ink — kept in the DOM, but visually hidden, so screen
   readers and the mobile rail (which restores it below) still get it. */
.lore-history-date {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.lore-history-title {
  margin: 0 0 .8rem;
  font-family: var(--font-accent);
  font-size: clamp(1.55rem, 2.8vw, 2rem);
  font-weight: 500;
  line-height: 1.08;
  color: var(--gold-lt);
  text-wrap: balance;
}
.lore-history-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--text-body);
}
.lore-history-entry:first-child .lore-history-text::first-letter {
  float: left;
  margin: .09em .12em 0 0;
  font-family: var(--font-accent);
  font-size: 3.55em;
  font-weight: 600;
  line-height: .72;
  color: var(--gold-lt);
  text-shadow: 0 0 22px color-mix(in srgb, var(--gold-300) 30%, transparent);
}
.lore-history-entry.is-lit .lore-history-date { color: var(--gold-lt); }
.lore-history-entry.is-current .lore-history-copy {
  opacity: 1;
  transform: none;
}
.lore-history-entry.is-current .lore-history-media .lore-plate {
  opacity: 1;
  transform: none;
}
.lore-history-entry.is-current .lore-plate--history .lore-plate-frame {
  border-color: color-mix(in srgb, var(--gold-200) 48%, transparent);
  box-shadow:
    inset 0 0 0 1px var(--rule),
    inset 0 -60px 80px -40px rgba(0, 0, 0, .78),
    0 20px 50px rgba(0, 0, 0, .5),
    0 0 32px color-mix(in srgb, var(--gold-300) 12%, transparent);
}

@media (max-width: 780px) {
  .lore-history-timeline {
    margin-top: var(--space-3);
    padding-left: .15rem;
  }
  .lore-history-thread,
  .lore-history-thread-fill { left: .55rem; }
  .lore-history-entry,
  .lore-history-entry.is-reversed {
    grid-template-columns: 1.2rem minmax(0, 1fr);
    grid-template-areas:
      "node media"
      "node copy";
    gap: 1rem .8rem;
    margin-bottom: var(--space-5);
  }
  .lore-history-node-wrap {
    align-items: flex-start;
    padding-top: .7rem;
  }
  /* The spine is a thin left rail here, not a centred axis, so drop the
     printed-on-spine year and bring the date back inline above each title. */
  .lore-history-node::after { content: none; }
  .lore-history-date {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 .6rem;
    padding: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    display: block;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--gold-warm) 58%, transparent);
  }
  .lore-history-media,
  .lore-history-entry.is-reversed .lore-history-media {
    padding: 0;
  }
  .lore-history-media .lore-plate,
  .lore-history-entry.is-reversed .lore-history-media .lore-plate {
    max-width: none;
    margin: 0;
  }
  /* The 4:3 desktop plate answers a two-column balance problem — art too short
     for the copy beside it. Stacked, there is nothing to balance against, and a
     full-width 4:3 would eat most of the viewport before the text. Stay wide. */
  .lore-history-media .lore-plate--tl { --plate-ar: 16 / 10; }
  .lore-history-copy,
  .lore-history-entry.is-reversed .lore-history-copy {
    justify-self: stretch;
    max-width: none;
    padding: 0 0 var(--space-2);
    text-align: left;
    transform: none;
  }
  .lore-history-title { font-size: clamp(1.5rem, 8vw, 1.9rem); }
}

/* ============================================================
   II · DECK STRUCTURE — two illustrated panels
   ============================================================ */
.lore-parts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.lore-part {
  background: var(--bg2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.lore-part:hover {
  border-color: var(--rule-hover);
  background: var(--surface);
  transform: translateY(-3px);
}
.lore-part-body { padding-top: var(--space-4); }
.lore-part-count {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-warm);
  margin: 0 0 .35rem;
}
.lore-part-glyph {
  font-size: 1.05rem;
  color: var(--gold);
}
.lore-part-name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  color: var(--gold-lt);
  margin: 0 0 .75rem;
}
.lore-part-text {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--text-body);
  margin: 0;
}

/* ============================================================
   III · SUITS — illustrated elemental tiles
   ============================================================ */
/* Single column: in the narrow reading measure a 2-up grid starved each tile's
   text to ~5rem. One suit per row lets the image sit beside a full-width copy. */
.lore-suits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* two per row: Wands + Cups, then Swords + Pentacles */
  gap: var(--space-4);
}
.lore-suit {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;              /* stacked: plate above, body below */
  gap: var(--space-4);
  background: var(--bg2);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--suit-accent);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.lore-suit:hover {
  background: var(--surface);
  border-color: var(--rule-hover);
  border-top-color: var(--suit-accent);
  transform: translateY(-3px);
}
/* The tile takes its element's colour as it lights up. */
.lore-suit:hover .lore-plate-frame::after {
  border-color: color-mix(in srgb, var(--suit-accent) 55%, transparent);
}
.lore-suit:hover .lore-plate-frame img {
  filter: saturate(1) brightness(1) contrast(1.04);
  transform: scale(1.05);
}
.lore-suit:hover .lore-suit-glyph {
  opacity: 1;
  text-shadow: 0 0 22px color-mix(in srgb, var(--suit-accent) 60%, transparent);
}
.lore-suit-body { position: relative; }
.lore-suit-glyph {
  position: absolute;
  top: -.15rem; right: 0;
  font-size: 1.5rem;
  color: var(--suit-accent);
  opacity: .7;
  transition: opacity var(--transition), text-shadow var(--transition);
}
.lore-suit-head {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin-bottom: .4rem;
}
.lore-suit-name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--text);
  margin: 0;
}
.lore-suit-el {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--suit-accent);
  margin: 0;
}
.lore-suit-domain {
  font-family: var(--font-accent);
  font-size: var(--step-0);
  font-style: italic;
  letter-spacing: .03em;
  color: var(--text-dim);
  margin: 0 0 .7rem;
}
.lore-suit-text {
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: 1.7;
  color: var(--text-body);
  margin: 0 0 var(--space-3);
}
.lore-suit-link {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--suit-accent);
}
.lore-suit-link:hover { color: var(--gold-pale); }
/* Cap the portrait plate in the stacked 2-up card so the two rows keep an even
   vertical rhythm (no effect in the horizontal single-column layout below). */
.lore-suit .lore-plate { max-width: 11rem; margin-inline: auto; }

/* ============================================================
   IV · NUMEROLOGY LADDER — pick a rank, read its stage
   ============================================================ */
/* The page measure is only ~682px — too narrow to run the picker down one side
   and still leave the plate and its prose room. Side by side, a 14rem rail left
   the plate at 120px, half the size of every other illustration on the page, and
   the prose beside it at a 30-character measure. So the ladder takes section V's
   shape instead: the picker is a strip across the top and the panel spans the
   full measure beneath it, which buys the plate the same 18rem the motif detail
   gets — the two sections' panels line up as you scroll between them. */
.lore-ladder {
  display: grid;
  gap: var(--space-4);
}
/* Hint, then the pip band, then the court band. */
.lore-ladder-picker {
  display: grid;
  gap: var(--space-2);
}
.lore-ladder-hint {
  font-family: var(--font-display);
  font-size: var(--caps-5-size);
  font-weight: var(--caps-5-weight);
  letter-spacing: var(--caps-5-track);
  text-transform: uppercase;
  color: var(--gold-warm);
  margin: 0;   /* the picker's grid gap owns this spacing now */
}
/* Two bands of hairline-ruled cells: the ten pips, then the four courts. */
.lore-rungs {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.lore-rungs--courts { grid-template-columns: repeat(4, 1fr); }
.lore-rung {
  display: grid;
  /* Numeral over rank, centred: a ten-cell band gives each rung ~56px of
     content, which the widest label ("Seven") clears but a side-by-side numeral
     would not. */
  justify-items: center;
  gap: .2rem;
  padding: .7rem .3rem;
  background: var(--bg2);
  border: 0;
  /* The selected marker rides the top edge now that the band runs across. */
  border-top: 2px solid transparent;
  text-align: center;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.lore-rung:hover { background: var(--surface); }
.lore-rung[aria-selected="true"] {
  background: var(--surface2);
  border-top-color: var(--gold);
}
.lore-rung-numeral {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--gold-warm);
}
.lore-rung[aria-selected="true"] .lore-rung-numeral { color: var(--gold-pale); }
.lore-rung-rank {
  font-family: var(--font-accent);
  font-size: var(--step-0);
  color: var(--text-dim);
}
.lore-rung[aria-selected="true"] .lore-rung-rank { color: var(--gold-lt); }

.lore-ladder-panel {
  background: var(--bg2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  /* Grid, because the fourteen cards stack in one cell — see below. */
  display: grid;
}
/* All fourteen cards share one grid cell, so the panel is always as tall as the
   wordiest rank and never resizes when you pick another — the ranks differ by
   up to ~90px of copy, which would otherwise shunt the page on every click.
   Sizing from the content this way needs no magic number to keep in step with
   the copy in lore_data.py. */
.lore-ladder-card {
  grid-area: 1 / 1;
  display: grid;
  /* Same split as .lore-motif-detail, so the plate and the prose hold the same
     line in both chapters. */
  grid-template-columns: 18rem 1fr;
  gap: var(--space-5);
  align-items: center;
}
/* Inactive cards keep holding the cell open, so `visibility` rather than the
   UA's `display: none` — still out of the a11y tree, still no tab stops. */
.lore-ladder-card[hidden] { visibility: hidden; }
/* `display: grid` on this would otherwise beat the UA's [hidden] rule. */
.lore-motif-detail[hidden] { display: none; }

/* Cross-fade between ranks (lore.js toggles .is-swapping around the swap). */
.lore-ladder-card,
.lore-motif-detail {
  opacity: 1;
  transition: opacity .3s ease;
}
.lore-ladder-panel.is-swapping .lore-ladder-card,
.lore-motif-panel.is-swapping .lore-motif-detail { opacity: 0; }

/* Folio line — the rank label, an engraved rule, and the rank's numeral set
   out at the right margin, the way a printed page carries its running head.
   `order` is what puts the ::after rule between the two: the numeral is a real
   element (so it can hold text) and would otherwise sit before it. */
.lore-ladder-rank {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-warm);
  margin: 0 0 .5rem;
}
.lore-ladder-rank::after {
  content: '';
  order: 1;
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--gold-300) 34%, transparent), transparent 92%);
}
.lore-ladder-mark {
  order: 2;
  font-family: var(--font-display);
  font-size: var(--step-0);
  letter-spacing: .1em;
  color: color-mix(in srgb, var(--gold-300) 58%, transparent);
}
.lore-ladder-title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  color: var(--gold-lt);
  margin: 0 0 .7rem;
}
/* The lead — the one line that defines the stage, set a step above the body so
   it reads first. */
.lore-ladder-body {
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
}
/* The expansion beneath it: smaller and dimmer, so the lead stays the way in. */
.lore-ladder-detail {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--text-dim);
  margin: .85rem 0 0;
}

/* ============================================================
   V · SYMBOLS — motif grid + detail plate
   ============================================================ */
.lore-motifs {
  display: grid;
  gap: var(--space-4);
}
.lore-motif-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}
.lore-motif {
  display: grid;
  justify-items: center;
  gap: .45rem;
  padding: var(--space-3) .5rem;
  background: var(--bg2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.lore-motif:hover {
  background: var(--surface);
  border-color: var(--rule-hover);
  transform: translateY(-2px);
}
.lore-motif[aria-selected="true"] {
  background: var(--surface2);
  border-color: color-mix(in srgb, var(--gold-300) 55%, transparent);
}
/* Belt and braces with the U+FE0E selectors in lore_data.py: these glyphs must
   render as gold text, never as colour emoji. */
.lore-motif-glyph,
.lore-motif-mark,
.lore-suit-glyph,
.lore-part-glyph { font-variant-emoji: text; }
.lore-motif-glyph {
  font-size: 1.45rem;
  line-height: 1;
  color: var(--gold);
  transition: text-shadow var(--transition);
}
.lore-motif[aria-selected="true"] .lore-motif-glyph {
  color: var(--gold-pale);
  text-shadow: 0 0 18px color-mix(in srgb, var(--gold-300) 55%, transparent);
}
.lore-motif-name {
  font-family: var(--font-accent);
  font-size: var(--step--1);
  text-align: center;
  color: var(--text-dim);
}
.lore-motif[aria-selected="true"] .lore-motif-name { color: var(--gold-lt); }

.lore-motif-panel {
  background: var(--bg2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.lore-motif-detail {
  display: grid;
  grid-template-columns: 18rem 1fr;
  gap: var(--space-5);
  align-items: center;
}
.lore-motif-body { position: relative; }
.lore-motif-mark {
  display: block;
  font-size: 2rem;
  color: var(--gold);
  opacity: .8;
  margin-bottom: .5rem;
}
.lore-motif-title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  color: var(--gold-lt);
  margin: 0 0 .6rem;
}
.lore-motif-text {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--text-body);
  margin: 0;
}

/* Colour language ---------------------------------------------------- */
.lore-colors-intro {
  max-width: 40rem;
  margin: 0 auto var(--space-4);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--text-dim);
}
.lore-colors {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 44rem;
}
.lore-color {
  display: grid;
  grid-template-columns: 1.25rem 6rem 1fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: background var(--transition);
}
.lore-color:hover {
  background: color-mix(in srgb, var(--swatch) 9%, transparent);
}
.lore-color-swatch {
  width: 1.1rem; height: 1.1rem;
  border-radius: 50%;
  background: var(--swatch);
  border: 1px solid color-mix(in srgb, var(--parchment) 30%, transparent);
  box-shadow: inset 0 0 4px rgba(0, 0, 0, .4);
  transition: box-shadow var(--transition);
}
.lore-color:hover .lore-color-swatch {
  box-shadow: 0 0 14px color-mix(in srgb, var(--swatch) 70%, transparent);
}
.lore-color-name {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-lt);
}
.lore-color-text {
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--text-dim);
}

/* ============================================================
   CLOSING BAND
   ============================================================ */
.lore-ethos {
  position: relative;
  isolation: isolate;
  padding: var(--space-7) var(--space-4);
  text-align: center;
  border-top: 1px solid var(--rule);
  background-image: var(--ethos-img);
  background-size: cover;
  background-position: center 55%;
  background-attachment: fixed;
}
.lore-ethos.is-empty { background-image: none; }
.lore-ethos-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 70% at 50% 50%,
      color-mix(in srgb, var(--ink-900) 78%, transparent) 0%, var(--ink-900) 100%);
}
.lore-ethos.is-empty .lore-ethos-veil {
  background: radial-gradient(60% 60% at 50% 45%,
    color-mix(in srgb, var(--gold-300) 6%, transparent) 0%, transparent 70%);
}
.lore-ethos-inner { max-width: 40rem; margin: 0 auto; }
.lore-ethos-glyph {
  display: block;
  font-size: 1.4rem;
  color: var(--gold);
  margin-bottom: var(--space-3);
}
.lore-ethos-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-2);
  color: var(--gold-lt);
  margin: 0 0 var(--space-4);
}
.lore-ethos-text {
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.8;
  color: var(--text);
  margin: 0 0 var(--space-4);
}
.lore-ethos-cta { margin-top: var(--space-2); }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lore-lightbox {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: color-mix(in srgb, var(--ink-900) 92%, transparent);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .28s ease;
}
.lore-lightbox[hidden] { display: none; }
.lore-lightbox.is-open { opacity: 1; }
.lore-lb-figure {
  margin: 0;
  max-width: min(92vw, 62rem);
  text-align: center;
}
.lore-lb-figure img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--gold-300) 28%, transparent);
  box-shadow: var(--shadow-lg);
}
.lore-lb-figure figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--step-0);
  color: var(--text-dim);
}
.lore-lb-close {
  position: absolute;
  z-index: 2;
  top: calc(60px + var(--space-4)); right: var(--space-4);
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--bg2);
  color: var(--gold-lt);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.lore-lb-close:hover { border-color: var(--rule-hover); color: var(--gold-pale); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .lore-ladder-card,
  .lore-motif-detail { grid-template-columns: 14rem 1fr; gap: var(--space-4); }
}
@media (max-width: 780px) {
  .lore-hero { min-height: 62vh; padding: var(--space-6) var(--space-3) var(--space-5); }
  .lore-book { margin: 0; padding: 4px 4px 5px; }
  .lore-page { padding: var(--space-5) var(--space-3) var(--space-4); }
  .lore-runhead { font-size: .5rem; letter-spacing: .24em; }
  .lore-section { margin-bottom: var(--space-6); }
  .lore-parts,
  .lore-suits { grid-template-columns: 1fr; }
  .lore-suit { grid-template-columns: 9rem 1fr; }
  .lore-motif-grid { grid-template-columns: repeat(2, 1fr); }
  .lore-motif-detail,
  .lore-ladder-card { grid-template-columns: 1fr; }
  .lore-ladder-card .lore-plate { max-width: 14rem; margin-inline: auto; }
  /* The pip band folds to two rows of five; the courts keep their own four
     (restated, or the rule above would leave a dead fifth cell). */
  .lore-rungs { grid-template-columns: repeat(5, 1fr); }
  .lore-rungs--courts { grid-template-columns: repeat(4, 1fr); }
  .lore-color { grid-template-columns: 1.25rem 5rem 1fr; column-gap: var(--space-2); }
  .lore-ethos { background-attachment: scroll; padding: var(--space-6) var(--space-3); }
}
@media (max-width: 460px) {
  .lore-suit { grid-template-columns: 1fr; }
  /* Five cells across a ~330px column leaves ~58px of content each — the
     smaller label keeps the widest rank ("Seven", 29px here) well clear. */
  .lore-rung { padding: .55rem .2rem; }
  .lore-rung-rank { font-size: var(--step--1); }
}

/* ============================================================
   REDUCED MOTION — keep the reveals, drop the movement
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .lore-js [data-lore-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .lore-hero-arrow,
  .lore-hero-glow,
  .lore-hero-ring,
  .lore-hero .page-arch-eyebrow,
  .lore-hero .page-arch-title,
  .lore-hero .lore-lede,
  .lore-hero-scroll,
  .lore-section-rings,
  .lore-section-title { animation: none; }
  .lore-plate-btn:hover .lore-plate-glint { animation: none; }
  .lore-plate-frame img { transition: filter .3s ease; }
  .lore-plate-btn:hover img { transform: scale(1.015); }
  .lore-ethos { background-attachment: scroll; }
  .lore-history-thread-fill,
  .lore-history-node,
  .lore-history-date,
  .lore-history-copy,
  .lore-history-media .lore-plate { transition: none; }
}