/* ═══════════════════════════════════════════════════════════════
   ELDEN RING — Tome I theme
   Loaded AFTER log.css. Overrides anything from the legacy
   total_lore_2.html inline style and styles the editorial cards.
   ═══════════════════════════════════════════════════════════════ */

body.theme-elden {
  /* Tome I palette — readability-first. Gold is an accent, not dominant. */
  --er-bg:        #0a0805;
  --er-bg-elev:   #14100a;
  --er-bg-card:   #0f0c08;
  --er-fg:        #ece2cc;          /* brighter, more readable */
  --er-fg-soft:   #d4c8ad;
  --er-fg-muted:  #a89b80;
  --er-fg-faint:  #5a4f3c;
  --er-gold:      #c9a227;
  --er-gold-soft: #8a7220;
  --er-gold-glow: rgba(201, 162, 39, 0.18);
  --er-blood:     #8b1f1f;
  --er-border:    rgba(201, 162, 39, 0.15);
  --er-border-hi: rgba(201, 162, 39, 0.35);

  background: var(--er-bg);
  color: var(--er-fg);
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 18px;
  line-height: 1.7;
  display: block;          /* override the legacy `display:flex` */
  min-height: 100vh;
}

/* parchment grain — fixed, subtle */
body.theme-elden::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 18% 20%, rgba(201, 162, 39, 0.05) 0%, transparent 55%),
    radial-gradient(circle at 82% 80%, rgba(139, 31, 31, 0.025) 0%, transparent 50%);
}

/* ════════════════════════════════════════════════════════════
   HERO — pure dark + real logo, NO stretched box-art bg
   ════════════════════════════════════════════════════════════ */

.er-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 40px 80px;
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* a single soft gold light, like a candle behind the logo */
.er-hero::before {
  content: '';
  position: absolute;
  top: 35%; left: 50%;
  width: 900px; height: 900px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--er-gold-glow) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.er-hero .tome-marker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.5em;
  color: var(--er-gold);
  text-transform: uppercase;
  margin-bottom: 36px;
  display: inline-flex;
  align-items: center;
  gap: 24px;
  position: relative;
  z-index: 1;
}
.er-hero .tome-marker::before,
.er-hero .tome-marker::after {
  content: '';
  width: 80px;
  height: 1px;
  background: var(--er-gold-soft);
  opacity: 0.6;
}

/* ── Real Elden Ring logo (gold marble PNG) ──────────────────────────── */
.er-logo {
  display: block;
  margin: 0 auto -8px;
  width: clamp(360px, 64vw, 820px);
  height: auto;
  position: relative;
  z-index: 1;
  filter:
    drop-shadow(0 0 48px rgba(212, 175, 55, 0.28))
    drop-shadow(0 6px 24px rgba(0, 0, 0, 0.55));
}
.er-logo-sub {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: clamp(10px, 1.2vw, 13px);
  letter-spacing: 0.45em;
  color: var(--er-gold-soft);
  margin: 14px 0 48px;
  opacity: 0.75;
  text-align: center;
  position: relative;
  z-index: 1;
}

.er-hero .hero-tagline {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 28px);
  color: var(--er-fg-soft);
  max-width: 680px;
  line-height: 1.55;
  position: relative;
  z-index: 1;
  margin-bottom: 60px;
}

.er-hero .hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  width: min(840px, 90vw);
  border-top: 1px solid var(--er-border);
  border-bottom: 1px solid var(--er-border);
  position: relative;
  z-index: 1;
}
.er-hero .hero-stats .stat {
  padding: 28px 16px;
  border-right: 1px solid var(--er-border);
  text-align: center;
}
.er-hero .hero-stats .stat:last-child { border-right: none; }
.er-hero .hero-stats .num {
  font-family: 'Cinzel', serif;
  font-size: 36px;
  font-weight: 600;
  color: var(--er-gold);
  letter-spacing: 0.02em;
  line-height: 1;
}
.er-hero .hero-stats .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--er-fg-muted);
  text-transform: uppercase;
  margin-top: 12px;
}

.er-hero .scroll-cue {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--er-fg-muted);
  text-transform: uppercase;
  z-index: 1;
  animation: cue 2.5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes cue {
  0%, 100% { opacity: 0.3; transform: translate(-50%, 0); }
  50%      { opacity: 1;   transform: translate(-50%, 8px); }
}

/* ════════════════════════════════════════════════════════════
   BODY LAYOUT — sidebar + main content
   ════════════════════════════════════════════════════════════ */

.er-app {
  display: flex;
  min-height: 100vh;
}

#sidebar {
  width: 280px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #0d0a05 0%, #0a0805 100%);
  border-right: 1px solid var(--er-border);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sbh {
  padding: 24px 22px 18px;
  border-bottom: 1px solid var(--er-border);
  flex-shrink: 0;
}
.sbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--er-gold);
  margin-bottom: 6px;
}
.sbc {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--er-fg-faint);
  letter-spacing: 0.05em;
}
.sbh a {
  display: block !important;
  margin-top: 14px !important;
  padding: 10px 14px !important;
  background: rgba(201, 162, 39, 0.05) !important;
  border: 1px solid var(--er-border) !important;
  color: var(--er-gold) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.sbh a:hover {
  background: rgba(201, 162, 39, 0.12) !important;
  border-color: var(--er-border-hi) !important;
}
#sbs {
  width: 100%;
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--er-border);
  border-radius: 0;
  color: var(--er-fg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  outline: none;
  transition: border-color 0.2s ease;
}
#sbs:focus { border-color: var(--er-gold-soft); }
#sbs::placeholder { color: var(--er-fg-faint); }

#sbl {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0 30px;
}
#sbl::-webkit-scrollbar { width: 3px; }
#sbl::-webkit-scrollbar-thumb { background: rgba(201, 162, 39, 0.18); }
#sbl::-webkit-scrollbar-track { background: transparent; }

.ncat {
  padding: 18px 22px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--clr, #d4af37);
  opacity: 0.7;
  border-top: 1px solid var(--er-border);
  margin-top: 8px;
}
.ncat:first-child { border-top: none; margin-top: 0; }

.ni {
  padding: 8px 22px 8px 28px;
  font-family: 'EB Garamond', serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--er-fg-soft);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: all 0.15s ease;
  user-select: none;
  line-height: 1.3;
}
.ni:hover, .ni.active {
  color: var(--clr, var(--er-gold));
  border-left-color: var(--clr, var(--er-gold));
  background: rgba(255, 255, 255, 0.02);
}

/* ════════════════════════════════════════════════════════════
   MAIN CONTENT — cards
   ════════════════════════════════════════════════════════════ */

#main {
  flex: 1;
  min-width: 0;
  padding: 80px 80px 120px;
  max-width: 1100px;
  margin: 0 auto;
}

/* hide the legacy hero inside main since we have our own above */
#main > .hero { display: none; }

/* section dividers (5 categories) */
.ss {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 80px 0 50px;
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, var(--er-bg) 75%, transparent);
  padding: 30px 0 18px;
  z-index: 5;
}
.ss .si2 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.ss .sl {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, currentColor, transparent);
  opacity: 0.4;
}
.ss .slbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* ──── card ──── */
.card {
  margin-bottom: 28px;
  scroll-margin-top: 80px;
  position: relative;
  border: 1px solid var(--er-border);
  background: rgba(20, 16, 10, 0.55);
  transition: border-color 0.2s ease, background 0.2s ease;
  overflow: hidden;
}
.card[open] {
  border-color: var(--er-border-hi);
  background: rgba(20, 16, 10, 0.85);
  margin-bottom: 56px;
}

/* The whole header area is the click target */
.card-summary {
  cursor: pointer;
  list-style: none;
  display: block;
  position: relative;
}
.card-summary::-webkit-details-marker { display: none; }

/* Collapsed state: thumbnail strip on the left, header on the right.
   Expanded: full-width image + full header below. */
.card:not([open]) .card-summary {
  display: grid;
  grid-template-columns: 140px 1fr 36px;
  align-items: center;
  gap: 18px;
  padding: 10px 14px 10px 10px;
  min-height: 96px;
}
.card:not([open]) .card-image {
  margin: 0 !important;
  aspect-ratio: 16/9 !important;
  width: 140px !important;
  height: auto !important;
}
.card:not([open]) .card-image img {
  filter: none !important;
  transform: none !important;
}
.card:not([open]) .ch {
  margin: 0 !important;
  padding: 0 0 0 12px !important;
  border-left: 2px solid currentColor;
  border-color: var(--er-gold-soft) !important;
}
.card:not([open]) .ch h2.cn {
  font-size: 19px !important;
  margin: 0 !important;
  letter-spacing: 0.04em !important;
}
.card:not([open]) .ch .cb {
  font-size: 9px !important;
  padding: 2px 7px !important;
  letter-spacing: 0.25em !important;
}
.card:not([open]) .ch .cs {
  font-size: 13px !important;
  margin-top: 4px !important;
  font-style: italic;
  color: var(--er-fg-muted) !important;
}

/* Expanded state — DEFAULT layout below. Wide-viewport split is set up
   further down (`@media (min-width: 1100px) details.card[open]`). */
.card[open] .card-summary {
  padding: 0;
}
.card[open] .card-image {
  margin-bottom: 24px !important;
}

/* ════════════════════════════════════════════════════════════════════
   OPEN CARD — wide split-view layout (image LEFT, prose RIGHT)
   Per user 2026-05-09 : "ce format là doit être celui de base ... avec
   un effet 3D au survol comme si le perso sortait de l'image".
   The lightbox aesthetic, baked into the inline reading experience.
   ════════════════════════════════════════════════════════════════════ */

/* The inline split-view layout is REMOVED 2026-05-09 :
   clicking a card now opens the LIGHTBOX split-view directly (the
   default reader). Inline expansion is the secondary path, reachable
   via "Read inline ↓" inside the lightbox; it uses the standard
   stacked card layout. */

/* Chevron */
.card-chevron {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  color: var(--er-gold);
  opacity: 0.5;
  transition: transform 0.25s ease, opacity 0.25s ease;
  text-align: center;
  align-self: center;
  user-select: none;
}
.card[open] .card-chevron {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 5;
  transform: rotate(180deg);
  opacity: 1;
  background: rgba(0, 0, 0, 0.55);
  width: 32px;
  height: 32px;
  line-height: 30px;
  border: 1px solid var(--er-border-hi);
}

/* ── Card image hero ──────────────────────────────────────────────────────────
   Image au-dessus de la card, GROSSE, jamais cropped. Le user a explicitement
   rejeté la version grid image-gauche (image trop petite + vide en dessous).

   Stratégie :
   - Pas d'aspect-ratio imposé → l'image garde sa forme naturelle.
   - max-height: 65vh → cap pour les portraits très hauts; aucun risque de
     coupe (object-fit: contain).
   - Ratio fluide : la card-image (le conteneur) prend l'aspect de l'image
     elle-même grâce à width auto + max-width 100%. Pas de barres noires.
   ─────────────────────────────────────────────────────────────────────────── */
.card .card-image {
  position: relative;
  margin: 0 auto 32px;
  background: transparent;            /* plus de cadre noir vide */
  text-align: center;
  line-height: 0;
}
.card .card-image img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 65vh;
  width: auto;                        /* keeps native aspect — no crop, no bars */
  height: auto;
  object-fit: contain;
  filter: brightness(0.96) contrast(1.04) saturate(0.98);
  transition: filter 0.4s ease;
  border: 1px solid var(--er-border);
}
.card:hover .card-image img {
  filter: brightness(1) contrast(1.08) saturate(1.05);
}
.card .card-image.no-img { display: none; }

/* When the card is COLLAPSED in a long list, cap the image height tighter so
   the summary view stays scannable. */
details.card:not([open]) > summary.card-summary > .card-image img {
  max-height: 320px;
}

.ch {
  padding-left: 20px;
  border-left: 3px solid;
  margin-bottom: 24px;
}
.cb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.25em;
  padding: 5px 12px;
  border-radius: 0;
  border: 1px solid;
  display: inline-block;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.cn {
  font-family: 'Cinzel', serif;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 700;
  color: #ede0c6;
  letter-spacing: 0.03em;
  line-height: 1.15;
  margin-bottom: 10px;
}
.cs {
  font-family: 'EB Garamond', serif;
  font-size: 16px;
  font-style: italic;
  color: var(--er-fg-muted);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.cd {
  background: var(--er-bg-card);
  border: 1px solid var(--er-border);
  border-radius: 0;
  padding: 36px 44px;
  border-bottom: none;
  position: relative;
}
/* subtle gold corner ornaments */
.cd::before, .cd::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  border: 1px solid var(--er-gold-soft);
  opacity: 0.6;
}
.cd::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.cd::after  { top: -1px; right: -1px; border-left: none; border-bottom: none; }

.lp {
  color: #f0e8d5;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.82;
  letter-spacing: 0.012em;
  margin-bottom: 24px;
}
.lp:last-child { margin-bottom: 0; }

/* drop cap on first paragraph */
.cd .lp:first-of-type::first-letter {
  font-family: 'Cinzel', serif;
  font-size: 3.6em;
  font-weight: 700;
  color: var(--er-gold);
  float: left;
  line-height: 0.85;
  padding: 4px 12px 0 0;
  margin-top: 4px;
}
/* Drop-cap guard: when a first paragraph opens on a quote (« " ' …), the
   ::first-letter pseudo swallows the punctuation and renders a giant floating
   guillemet. The build tags those paragraphs .nocap (see rebuild_elden) — let
   them flow as normal prose instead. Affects ~160 FR item-quote cards. */
.cd .lp.nocap:first-of-type::first-letter,
#card-lightbox .lb-body .lp.nocap:first-of-type::first-letter {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  float: none;
  line-height: inherit;
  padding: 0;
  margin: 0;
}

/* note box (gold = fait établi) and theory box (vert-de-gris = spéculation).
   Repeints sur la palette Elden Ring — plus de bleu/violet web hors-système. */
.nb {
  background: rgba(201, 162, 39, 0.05);
  border: 1px solid rgba(201, 162, 39, 0.22);
  border-radius: 0;
  padding: 16px 20px;
  margin-top: 22px;
  font-size: 15px;
  color: #c4b493;
  line-height: 1.7;
  font-family: 'EB Garamond', serif;
}
.nl {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #b8912e;
  margin-bottom: 8px;
}
.tb {
  background: rgba(95, 111, 82, 0.06);
  border: 1px solid rgba(95, 111, 82, 0.24);
  padding: 16px 20px;
  margin-top: 22px;
  font-size: 15px;
  color: #9aa886;
  line-height: 1.7;
  font-family: 'EB Garamond', serif;
}
.tl {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #7d8a6a;
  margin-bottom: 8px;
}

/* ──── sources (collapsible) ──── */
.sw { margin-top: 0; }

.stog {
  list-style: none;
  cursor: pointer;
  padding: 14px 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--er-fg-muted);
  background: var(--er-bg-card);
  border: 1px solid var(--er-border);
  border-top: none;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px;
  user-select: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.stog:hover { color: var(--er-gold); background: rgba(201, 162, 39, 0.04); }
.stog::marker, .stog::-webkit-details-marker { display: none; }
.sw[open] .stog {
  color: var(--er-gold);
  background: rgba(201, 162, 39, 0.05);
  border-bottom: 1px solid var(--er-border);
}

.si {
  border: 1px solid var(--er-border);
  border-top: none;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(0, 0, 0, 0.18);
}

.sc {
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--er-border);
  padding: 16px 18px;
  position: relative;
}
.sm {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.sn-icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.22))
          drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
}
.sb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  padding: 3px 10px;
  border-radius: 0;
  border: 1px solid;
  text-transform: uppercase;
}
.sn {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--er-fg-soft);
  letter-spacing: 0.02em;
}

.st, .stt, .stfu, .st-full {
  font-family: 'EB Garamond', Georgia, serif !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  color: #d8cfb8 !important;
  font-style: normal !important;
  font-weight: 400 !important;
  white-space: pre-wrap;
  word-break: break-word;
  letter-spacing: 0.005em;
}
.stt {
  max-height: 8.5em !important;
  overflow: hidden;
  position: relative;
}
.stg {
  position: absolute;
  bottom: 28px;
  left: 0; right: 0;
  height: 2.4em;
  background: linear-gradient(transparent, var(--er-bg-card));
  pointer-events: none;
}
.stfu { display: none; }
.stw.open .stt { max-height: 320px !important; overflow-y: auto !important; }
.stw.open .stg { display: none !important; }

.xbtn, .expand-btn {
  display: block;
  margin-top: 10px;
  padding: 6px 14px;
  background: rgba(201, 162, 39, 0.06);
  border: 1px solid var(--er-border-hi);
  color: var(--er-gold);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.15s ease;
}
.xbtn:hover, .expand-btn:hover { background: rgba(201, 162, 39, 0.14); }

/* hide legacy elements we replace */
body.theme-elden .ht,
body.theme-elden .hs2,
body.theme-elden .hst { display: none; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body.theme-elden { display: block; flex-direction: column; }
  .er-app { flex-direction: column; }
  #sidebar { width: 100%; height: auto; position: static; }
  #sbl { display: flex; flex-wrap: nowrap; overflow-x: auto; padding: 0 12px 12px; }
  .ncat { display: none; }
  .ni {
    white-space: nowrap;
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
  }
  .ni:hover, .ni.active {
    border-left-color: transparent;
    border-bottom-color: var(--clr, var(--er-gold));
  }
  #main { padding: 40px 20px 80px; }
  .er-hero { padding: 80px 20px 60px; }
  .er-hero .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .er-hero .hero-stats .stat:nth-child(2) { border-right: none; }
  .er-hero .hero-stats .stat:nth-child(-n+2) { border-bottom: 1px solid var(--er-border); }
  .cd { padding: 24px 20px; }
  .card .card-image { aspect-ratio: 4/3; }
}

/* ─────────────────────────────────────────────────────────────────────
   PROLOGUE / LORE OVERVIEW — collapsible cards, compact by default
   ───────────────────────────────────────────────────────────────────── */
.er-overview {
  max-width: 920px;
  margin: 60px auto 80px;
  padding: 0 28px;
  position: relative;
}

.overview-eyebrow {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.55em;
  color: var(--er-gold-soft);
  text-align: center;
  margin-bottom: 14px;
  text-transform: uppercase;
  /* pas d'opacity ici : elle rabaissait le contraste effectif sous le seuil
     WCAG AA (4.29:1). La couleur --er-gold-soft reste discrète à 11px. */
}

.overview-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 42px);
  letter-spacing: 0.04em;
  text-align: center;
  margin: 0 0 8px;
  background: linear-gradient(180deg, #f0d060 0%, #d4af37 45%, #a87f1a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.overview-lede {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 14.5px;
  color: var(--er-fg-muted);
  text-align: center;
  margin: 0 0 32px;
  letter-spacing: 0.03em;
}

.ov-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ov-card {
  border: 1px solid var(--er-border);
  background: rgba(20, 16, 10, 0.55);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.ov-card[open] {
  border-color: var(--er-border-hi);
  background: rgba(20, 16, 10, 0.85);
}
.ov-card[open] summary {
  border-bottom: 1px solid var(--er-border);
}

.ov-card summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 12px 18px 12px 12px;
}
.ov-card summary::-webkit-details-marker { display: none; }

.ov-card summary img {
  width: 88px;
  height: 64px;
  object-fit: cover;
  display: block;
  border: 1px solid var(--er-border);
}

.ov-summary-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ov-num {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4em;
  color: var(--er-gold);
  opacity: 0.7;
  text-transform: uppercase;
}

.ov-title {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: #f0e8d5;
}

.ov-tag {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--er-fg-muted);
  margin-top: 2px;
}

.ov-chevron {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--er-gold);
  opacity: 0.55;
  transition: transform 0.25s ease, opacity 0.25s ease;
  padding-right: 4px;
}
.ov-card[open] .ov-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.ov-body {
  padding: 18px 28px 24px;
  border-top: none;
}
.ov-body p {
  font-family: 'EB Garamond', serif;
  font-size: 16.5px;
  line-height: 1.78;
  color: #d8cfb8;
  margin: 0 0 12px;
}
.ov-body p:last-child { margin-bottom: 0; }
.ov-body strong {
  color: #f0d060;
  font-weight: 600;
  font-style: normal;
}

.ov-endings {
  list-style: none;
  padding: 0;
  margin: 8px 0 12px;
}
.ov-endings li {
  font-family: 'EB Garamond', serif;
  font-size: 15.5px;
  line-height: 1.65;
  color: #c8bf9f;
  padding: 6px 0 6px 18px;
  position: relative;
  border-left: 1px solid rgba(212, 175, 55, 0.18);
  margin-left: 4px;
}
.ov-endings li::before {
  content: "✦";
  position: absolute;
  left: -6px;
  top: 6px;
  color: var(--er-gold);
  font-size: 10px;
  background: rgba(20, 16, 10, 0.95);
  padding: 0 3px;
}
.ov-endings strong { color: #f0d060; font-weight: 600; }

.ov-coda {
  font-style: italic;
  color: var(--er-gold-soft);
  text-align: right;
  margin-top: 14px !important;
  font-size: 14.5px !important;
  opacity: 0.78;
}

@media (max-width: 640px) {
  .ov-card summary {
    grid-template-columns: 64px 1fr auto;
    gap: 12px;
  }
  .ov-card summary img { width: 64px; height: 48px; }
  .ov-title { font-size: 16px; }
  .ov-tag { font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════
   PASS 3 — UX UPGRADES
   Reading progress · theme toggle · xref links · hero shrink
   sidebar scroll-spy · lightbox · card hover preview · copy-link
   ═══════════════════════════════════════════════════════════════ */

/* ── Reading progress bar (top, gold gradient) ───────────────────── */
#reading-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, #c9a227 0%, #f0d060 50%, #c9a227 100%);
  z-index: 100;
  transition: width 0.08s linear;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
  pointer-events: none;
}

/* ── Hero compression — was 100vh, now ~72vh, content visible ──── */
.er-hero {
  min-height: 72vh !important;
  padding: 80px 40px 50px !important;
}
.er-hero .scroll-cue { bottom: 24px !important; }

/* ── Theme toggle button in nav ──────────────────────────────────── */
.nav-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--er-gold, #c9a227);
  font-size: 18px;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-left: 12px;
  line-height: 1;
}
.nav-btn:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: var(--er-gold, #c9a227);
  transform: translateY(-1px);
}

/* ── Parchment theme ─────────────────────────────────────────────── */
body.theme-parchment {
  --er-bg:        #f4ecdb;
  --er-bg-elev:   #ede2c9;
  --er-bg-card:   #f8f1e0;
  --er-fg:        #2a2418;
  --er-fg-soft:   #3d3526;
  --er-fg-muted:  #5a4f3c;
  --er-fg-faint:  #8a7d62;
  --er-gold:      #8a6914;
  --er-gold-soft: #6b5210;
  --er-gold-glow: rgba(138, 105, 20, 0.25);
  --er-border:    rgba(138, 105, 20, 0.3);
  --er-border-hi: rgba(138, 105, 20, 0.55);
  background: var(--er-bg);
  color: var(--er-fg);
}
body.theme-parchment::after {
  background-image:
    radial-gradient(circle at 18% 20%, rgba(138, 105, 20, 0.08) 0%, transparent 55%),
    radial-gradient(circle at 82% 80%, rgba(139, 31, 31, 0.04) 0%, transparent 50%);
  opacity: 0.7;
}
body.theme-parchment .card { background: rgba(255, 250, 235, 0.7); }
body.theme-parchment .card[open] { background: rgba(255, 250, 235, 0.95); }
body.theme-parchment .ov-card { background: rgba(255, 250, 235, 0.7); }
body.theme-parchment .ov-card[open] { background: rgba(255, 250, 235, 0.95); }
body.theme-parchment .stt, body.theme-parchment .st { color: #3d3526 !important; }
body.theme-parchment .lp { color: #2a2418; }

/* ── Inline cross-reference links (auto-injected) ────────────────── */
.xref {
  color: var(--er-gold);
  text-decoration: none;
  border-bottom: 1px dotted rgba(212, 175, 55, 0.45);
  font-weight: inherit;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.xref:hover {
  color: #f0d060;
  border-bottom-color: #f0d060;
}

/* ── Sidebar — single-active scroll-spy. Hover = bg only (no border). ── */
.ni {
  cursor: pointer;
  padding: 6px 22px;
  font-size: 13.5px;
  color: var(--er-fg-soft);
  transition: background 0.15s ease, color 0.15s ease;
  position: relative;
  border-left: 3px solid transparent;
}
/* Hover: faint background tint only — no border, no padding shift. */
.ni:hover {
  color: var(--er-fg);
  background: rgba(255, 255, 255, 0.025);
}
/* Active (currently-visible card): the ONLY thing with a gold left border. */
.ni.is-current {
  background: rgba(212, 175, 55, 0.16);
  border-left-color: var(--er-gold);
  color: #f0d060;
  font-weight: 600;
  padding-left: 23px;
}
.ni.is-current:hover { background: rgba(212, 175, 55, 0.22); }
/* Keyboard focus for the now-focusable category nav items (role=link). */
.ni:focus-visible {
  outline: 2px solid var(--er-gold);
  outline-offset: -2px;
  color: #f0d060;
}
.ni.hidden { display: none; }

/* ── Image lightbox: zoom + prev/next + go-to-card ──────────────── */
/* ── Card lightbox — split view : image LEFT, prose RIGHT ────────────────
   Per user 2026-05-09 : clicking the card image opens a dedicated
   fullscreen reader where the image is shown big-and-entire on the left
   and the card's prose flows on the right. Mobile = stacked.
   Per user 2026-05-10 : THIS view is the default (body.slider) — the
   page IS a slider over all cards instead of a vertical scroll. */
#card-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 4, 0.96);
  z-index: 200;
  display: none;
  backdrop-filter: blur(6px);
}
#card-lightbox.open { display: block; }

/* ════════════════════════════════════════════════════════════════════
   TOC GRID (default landing) — compact tile grid instead of long list
   Per user 2026-05-10: "il faut revoir la liste view et opter pour un
   format mieux qu'un truc full vertical c trop long"
   ════════════════════════════════════════════════════════════════════ */
body:not(.slider) main {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  padding: 20px 24px 80px;
  max-width: 1640px;
  margin: 0 auto;
}
/* Full-width rows: hero, category headers, overview, continue-reading */
body:not(.slider) main > .hero,
body:not(.slider) main > .er-overview,
body:not(.slider) main > .toc-cat-header,
body:not(.slider) main > #toc-continue {
  grid-column: 1 / -1;
  margin: 0;
}
body:not(.slider) #toc-continue {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0.04) 60%, transparent);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: #f0e8d5;
  font-family: 'EB Garamond', Georgia, serif;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  margin-bottom: 8px;
}
body:not(.slider) #toc-continue:hover {
  border-color: var(--er-gold);
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.06) 60%, transparent);
}
body:not(.slider) #toc-continue .tcr-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--er-gold);
  margin-right: 6px;
}
body:not(.slider) #toc-continue .tcr-title {
  font-size: 16px;
  font-style: italic;
  flex: 1;
}
body:not(.slider) #toc-continue .tcr-arrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  color: var(--er-gold);
}
/* Old build-generated section separators (.ss) are redundant now that
   we inject .toc-cat-header headings — hide them in the TOC grid. */
body:not(.slider) main > .ss { display: none !important; }
/* Category header injected by JS between groups */
body:not(.slider) .toc-cat-header {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--er-gold);
  padding: 28px 0 8px;
  border-bottom: 1px solid var(--er-border);
  display: flex;
  align-items: baseline;
  gap: 14px;
}
body:not(.slider) .toc-cat-header .toc-cat-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--er-fg-muted);
}
body:not(.slider) .toc-cat-header .tch-progress {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--er-fg-muted);
  opacity: 0.75;
  white-space: nowrap;
}
body:not(.slider) .toc-cat-header .tch-progress.is-complete {
  color: #f0d060;
  opacity: 1;
  font-weight: 600;
}
/* TOC tile: image top, title bottom, click → opens slider */
body:not(.slider) details.card {
  margin: 0;
  border: 1px solid var(--er-border);
  background: rgba(20, 16, 10, 0.6);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  scroll-margin-top: 80px;
}
body:not(.slider) details.card:hover {
  transform: translateY(-3px);
  border-color: var(--er-gold);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}
/* Read/bookmark corner marks defined further down (after image
   filter rules) to ensure source-order wins with same-priority
   !important declarations. See block near line 1245+. */
/* Force collapsed-tile look regardless of [open] state */
body:not(.slider) details.card > summary.card-summary {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  padding: 0 !important;
  gap: 0 !important;
  min-height: 0 !important;
}
body:not(.slider) details.card .card-image {
  width: 100% !important;
  margin: 0 !important;
  aspect-ratio: 16 / 9 !important;     /* paysage cinématique uniforme */
  height: auto !important;
  overflow: hidden;
}
body:not(.slider) details.card .card-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 28% !important;  /* recadre vers le visage */
  max-height: none !important;
  border: none !important;
  filter: brightness(0.92) contrast(1.04) saturate(0.95) !important;
  transition: filter 0.25s ease, transform 0.5s ease !important;
}
body:not(.slider) details.card:hover .card-image img {
  filter: brightness(1.05) contrast(1.08) saturate(1.05) !important;
  transform: scale(1.04) !important;
}
body:not(.slider) details.card .ch {
  padding: 12px 14px !important;
  border: none !important;
  margin: 0 !important;
  /* Locked height — perfect tile uniformity. Title clamped to 2 lines +
     subtitle clamped to 1 line ensures the content fits. */
  height: 102px;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start;
  overflow: hidden;
}
body:not(.slider) details.card .ch .cb {
  font-size: 8px !important;
  padding: 2px 6px !important;
  letter-spacing: 0.22em !important;
  margin-bottom: 6px !important;
  display: inline-block;
  align-self: flex-start;
}
body:not(.slider) details.card .ch h2.cn {
  font-size: 15px !important;
  margin: 0 0 3px !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  color: #f0e8d5 !important;
  /* Clamp to 2 lines so long titles can't bloat the tile height */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body:not(.slider) details.card .ch .cs {
  font-size: 12px !important;
  margin: 0 !important;
  color: var(--er-fg-muted) !important;
  font-style: italic;
  line-height: 1.3;
  /* Single-line subtitle keeps tiles uniform */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Hide ALL direct children of the card except the summary — only the
   tile (image + title) shows in TOC. Easier than enumerating each. */
body:not(.slider) details.card > *:not(summary):not(.card-image) {
  display: none !important;
}
body:not(.slider) details.card .card-chevron,
body:not(.slider) details.card .card-bookmark,
body:not(.slider) details.card .card-copy-link {
  display: none !important;
}
/* Replace AOS scroll animations with a tile-grid stagger fade-in */
body:not(.slider) details.card {
  opacity: 0;
  transform: translateY(8px);
  animation: tocTileIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--toc-i, 0) * 18ms);
}
@keyframes tocTileIn {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.slider) details.card {
    animation: none;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Read/bookmark visual feedback (placed AFTER the default tile
   filter rules so the more-specific .is-read selector wins on
   source-order ties) ──────────────────────────────────────────── */
body:not(.slider) details.card.is-read {
  border-color: rgba(212, 175, 55, 0.5);
}
body:not(.slider) details.card.is-read::before {
  content: '✓';
  position: absolute;
  top: 6px; right: 8px;
  z-index: 4;
  width: 22px; height: 22px;
  line-height: 22px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #f0d060;
  background: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(212, 175, 55, 0.55);
  border-radius: 50%;
  pointer-events: none;
}
body:not(.slider) details.card.is-read .card-image img {
  filter: brightness(0.78) contrast(1.04) saturate(0.85) !important;
}
body:not(.slider) details.card.is-read:hover .card-image img {
  filter: brightness(0.95) contrast(1.08) saturate(0.95) !important;
}
/* Bookmarks-only filter (?bookmarks=1): hide non-bookmarked tiles
   AND empty the category headers that would have no remaining cards. */
body.bookmarks-only:not(.slider) main details.card:not(.is-bookmarked) {
  display: none !important;
}
body.bookmarks-only:not(.slider) main {
  /* Tighter padding when fewer items */
  padding-top: 28px;
}
body.bookmarks-only:not(.slider) main::before {
  content: '★ Bookmarks only — clear filter';
  grid-column: 1 / -1;
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--er-gold);
  text-align: center;
  padding: 14px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.32);
  cursor: pointer;
  margin-bottom: 8px;
}

body:not(.slider) details.card.is-bookmarked::after {
  content: '★';
  position: absolute;
  top: 6px; left: 8px;
  z-index: 4;
  width: 22px; height: 22px;
  line-height: 22px;
  text-align: center;
  font-size: 13px;
  color: #f0d060;
  background: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(212, 175, 55, 0.55);
  border-radius: 50%;
  pointer-events: none;
}

/* TOC mobile: 2-column on narrow screens */
@media (max-width: 599px) {
  body:not(.slider) main {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 12px 14px 60px;
  }
  body:not(.slider) details.card .ch { height: 88px; padding: 10px 12px !important; }
  body:not(.slider) details.card .ch h2.cn { font-size: 13px !important; }
  body:not(.slider) details.card .ch .cs { font-size: 10.5px !important; }
}

/* Mobile slider: 44×44 minimum tap targets per Apple HIG */
@media (max-width: 899px) and (pointer: coarse) {
  body.slider #card-lightbox .lb-prev,
  body.slider #card-lightbox .lb-next,
  body.slider #card-lightbox .lb-close { width: 48px; height: 48px; }
  body.slider .lb-list-toggle { padding: 11px 14px; min-height: 44px; }
  body.slider .lb-counter { padding: 11px 12px; min-height: 44px; }
  body.slider #card-lightbox .lb-prev-title,
  body.slider #card-lightbox .lb-next-title {
    padding: 12px 14px;
    min-height: 44px;
    font-size: 12px;
  }
  body.slider .lb-bottom { height: 56px; bottom: 6px; }
}

/* (Help overlay is rendered server-side as #help-overlay — see existing
    .overlay rules. No standalone #help-modal needed.) */

/* ── Back-to-top floating button (TOC only, after 600px scroll) ─── */
#back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  background: linear-gradient(180deg, rgba(28, 22, 14, 0.95), rgba(13, 10, 7, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.55);
  color: #f0d060;
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  cursor: pointer;
  z-index: 70;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
}
#back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#back-to-top:hover {
  background: linear-gradient(180deg, rgba(38, 30, 18, 0.98), rgba(20, 15, 9, 0.98));
  color: #fff;
  border-color: var(--er-gold);
}
@media (max-width: 599px) {
  #back-to-top { right: 14px; bottom: 14px; width: 44px; height: 44px; }
  /* Lift the language pill above the back-to-top button so they don't stack
     in the same bottom-right corner on phones. */
  body.er-page .lang-toggle { bottom: 64px; }
}

/* ── Slider mode (opens on TOC click) ───────────────────────────────
   Hide vertical card list; lightbox is opaque + always shown; the page
   IS a card slider with a bottom navigation strip + responsive layout. */
body.slider main { display: none; }
/* The TOC sidebar is part of the page chrome and is irrelevant inside
   the slider — hide it so the lightbox truly fills the viewport. */
body.slider #sidebar,
body.slider .log-sidebar,
body.slider aside.log-sidebar { display: none !important; }
body.slider #card-lightbox {
  display: block;
  background: var(--er-bg, #0d0a07);
  backdrop-filter: none;
  z-index: 50;            /* below .log-nav (z=100) and search (200) */
  top: 70px;              /* matches the actual sticky-nav height (69px) */
}
/* Close (×) — always available in the reader, top-right corner.
   Per user 2026-05-31: a mouse user must have an obvious exit (× +
   backdrop click), not only the keyboard. */
body.slider #card-lightbox .lb-close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 14px;
  right: 20px;
  width: 40px;
  height: 40px;
  z-index: 8;
  font-size: 26px;
  line-height: 1;
  color: #f0d060;
  background: linear-gradient(180deg, rgba(28, 22, 14, 0.95), rgba(13, 10, 7, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.55);
  border-radius: 2px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  transition: color .15s ease, border-color .15s ease,
              background .15s ease, transform .2s ease;
}
body.slider #card-lightbox .lb-close:hover {
  color: #fff;
  border-color: var(--er-gold, #c9a227);
  background: linear-gradient(180deg, rgba(38, 30, 18, 0.98), rgba(20, 15, 9, 0.98));
  transform: rotate(90deg);
}
/* Decorative particle canvas must not eat clicks meant for the stage
   void (so clicking around the portrait closes the reader). */
body.slider #card-lightbox .lb-particles { pointer-events: none; }
/* Hide the legacy "Read inline ↓" footer button in slider — we have a
   dedicated "List view ↓" toolbar button + V key for the same action */
body.slider #card-lightbox .lb-text footer { display: none; }
body.slider #card-lightbox .lb-prev,
body.slider #card-lightbox .lb-next {
  background: rgba(8, 6, 4, 0.72);
  border-color: rgba(212, 175, 55, 0.5);
}
/* Slider content occupies the full lightbox height; the nav pills float
   over the bottom of the stage (margin built into prose-pane padding). */
body.slider #card-lightbox .lb-split {
  height: calc(100vh - 70px);
}
body.slider #card-lightbox .lb-text {
  padding: 64px 56px 72px 36px;  /* generous left padding from divider */
}

/* ── Top toolbar (desktop): counter top-right + List view top-left ──
   Both anchored to the LIGHTBOX (which is fixed), so positions never
   shift between cards regardless of image height or prose length.    */
body.slider .lb-counter,
body.slider .lb-list-toggle {
  position: absolute;
  top: 14px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(28, 22, 14, 0.95), rgba(13, 10, 7, 0.95));
  padding: 7px 14px;
  z-index: 6;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
body.slider .lb-counter {
  right: 70px;   /* leave the top-right corner for the × close button */
  font-size: 11px;
  color: #f0e8d5;
  border: 1px solid rgba(212, 175, 55, 0.55);
}
body.slider .lb-counter b {
  color: #fff; font-weight: 700;
}
body.slider .lb-counter .lbc-cat {
  color: var(--lb-cat-color, var(--er-gold, #c9a227));
  font-weight: 700;
}
body.slider .lb-list-toggle {
  right: auto; left: 20px;
  font-size: 10.5px;
  color: #f0d060;
  border: 1px solid rgba(212, 175, 55, 0.55);
  cursor: pointer;
  transition: all 0.15s ease;
}
body.slider .lb-list-toggle:hover {
  color: #fff;
  border-color: var(--er-gold);
  background: linear-gradient(180deg, rgba(38, 30, 18, 0.98), rgba(20, 15, 9, 0.98));
}

/* ── Bottom nav: two compact pills in the corners + center hint
       (per user 2026-05-10 — "ultra large" is honteux, on compresse) */
body.slider .lb-bottom {
  position: fixed;
  left: 0; right: 0; bottom: 14px;
  height: 36px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;  /* center hint never shifts */
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  background: none;
  border: none;
  z-index: 60;
  pointer-events: none;          /* clicks fall through to the stage */
}
body.slider .lb-prev-title { justify-self: start; }
body.slider .lb-next-title { justify-self: end; }
body.slider .lb-hints      { justify-self: center; }

body.slider #card-lightbox .lb-prev-title,
body.slider #card-lightbox .lb-next-title {
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(28, 22, 14, 0.95), rgba(13, 10, 7, 0.95));
  border: 1px solid rgba(212, 175, 55, 0.55);
  color: #f0e8d5;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 13px;
  font-style: italic;
  cursor: pointer;
  padding: 7px 16px;
  max-width: min(280px, 32vw);
  transition: all 0.15s ease;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}
body.slider #card-lightbox .lb-prev-title:hover,
body.slider #card-lightbox .lb-next-title:hover {
  color: #fff;
  border-color: var(--er-gold);
  background: linear-gradient(180deg, rgba(38, 30, 18, 0.98), rgba(20, 15, 9, 0.98));
}
body.slider #card-lightbox .lb-prev-title.is-edge,
body.slider #card-lightbox .lb-next-title.is-edge {
  visibility: hidden;
  border: none;
  background: transparent;
  box-shadow: none;
}
body.slider .lb-prev-title { text-align: left; }
body.slider .lb-next-title { text-align: right; }
body.slider .lb-prev-title:hover,
body.slider .lb-next-title:hover { color: var(--er-gold); }
body.slider .lb-prev-title.is-edge,
body.slider .lb-next-title.is-edge { visibility: hidden; }
body.slider .lb-hints {
  pointer-events: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--er-fg-muted, #9c8b6b);
  opacity: 0.5;
  background: rgba(13, 10, 7, 0.7);
  padding: 4px 10px;
  backdrop-filter: blur(4px);
}

/* ── Sources accordion inside slider body (cloned from the card) ──── */
body.slider #card-lightbox .lb-body details.sw {
  margin-top: 28px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  background: rgba(0, 0, 0, 0.25);
}
body.slider #card-lightbox .lb-body details.sw > summary.stog {
  padding: 12px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--er-gold);
  cursor: pointer;
}
body.slider #card-lightbox .lb-body details.sw[open] > summary.stog {
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}
body.slider #card-lightbox .lb-body details.sw .si {
  padding: 10px 16px 14px;
}
body.slider #card-lightbox .lb-body details.sw .sc {
  margin: 10px 0;
}
body.slider #card-lightbox .lb-body details.sw .st {
  font-size: 14.5px;
  line-height: 1.55;
}
body.slider #card-lightbox .lb-body .card-meta-bar,
body.slider #card-lightbox .lb-body .card-see-also,
body.slider #card-lightbox .lb-body .see-also,
body.slider #card-lightbox .lb-body .see-also-back {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid rgba(212, 175, 55, 0.14);
  font-size: 13px;
  color: var(--er-fg-muted);
}
body.slider #card-lightbox .lb-body .see-also-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--er-gold);
  margin-bottom: 8px;
}
body.slider #card-lightbox .lb-body .see-also-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
body.slider #card-lightbox .lb-body .see-also-item {
  font-style: italic;
  color: #d8cfb8;
}
body.slider #card-lightbox .lb-body .see-also-item:hover {
  color: var(--er-gold);
}

/* ── extra_cards-style .sources-block (DLC + extras) inside slider ─── */
body.slider #card-lightbox .lb-body .sources-block {
  margin-top: 28px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  background: rgba(0, 0, 0, 0.25);
  padding: 12px 16px 14px;
}
body.slider #card-lightbox .lb-body .sources-block .sources-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--er-gold);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
  margin-bottom: 10px;
}
body.slider #card-lightbox .lb-body .sources-block .sc {
  margin: 10px 0;
}
body.slider #card-lightbox .lb-body .sources-block .st {
  font-size: 14.5px;
  line-height: 1.55;
}

/* ── Category-tinted accent on the prose pane left border ─────────── */
body.slider #card-lightbox .lb-text {
  border-left-color: color-mix(in srgb, var(--lb-cat-color, #c9a227) 35%, transparent);
}

/* ── Responsive — narrow viewport (mobile/tablet) ─────────────────── */
@media (max-width: 899px) {
  body.slider #card-lightbox {
    top: 56px;
  }
  body.slider #card-lightbox .lb-split {
    height: calc(100vh - 56px);
  }
  /* Toolbar shrinks; counter wraps if needed but doesn't overlap image */
  body.slider .lb-counter {
    top: 8px; right: 8px;
    font-size: 9.5px;
    padding: 4px 8px;
  }
  body.slider .lb-list-toggle {
    top: 8px; left: 8px;
    font-size: 9px;
    padding: 4px 8px;
  }
  /* Pills get smaller and hints disappear on mobile */
  body.slider .lb-bottom {
    height: 30px;
    padding: 0 8px;
    bottom: 8px;
  }
  body.slider .lb-hints { display: none; }
  body.slider .lb-prev-title,
  body.slider .lb-next-title {
    font-size: 11px;
    padding: 4px 10px;
    max-width: 42vw;
  }
}

#card-lightbox .lb-split {
  display: grid;
  grid-template-columns: 1fr;
  width: 100vw;
  height: 100vh;
}
@media (min-width: 900px) {
  #card-lightbox .lb-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}

#card-lightbox .lb-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 56px 32px;
  min-width: 0;
  min-height: 0;
  /* Blur-fill backdrop : we paint the SAME image as a heavily-blurred,
     scaled-up background behind the foreground <img>. This way small or
     non-landscape portraits keep their native aspect (no stretching →
     no pixelation) while the empty stage space is still filled with
     ambient color from the same picture. The CSS var is set by JS on
     every showLBAt(idx). */
  position: relative;
  isolation: isolate;
}
#card-lightbox .lb-stage::before {
  content: '';
  position: absolute;
  inset: -8%;  /* slightly larger than the stage so the blur edges sit off-screen */
  background-image: var(--lb-bg-img, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(56px) saturate(1.15) brightness(0.45);
  transform: scale(1.15);  /* extra zoom so blur edges never show */
  z-index: 0;
  opacity: 0.85;
  transition: background-image 0.5s ease, opacity 0.5s ease;
  pointer-events: none;
}
#card-lightbox .lb-stage img {
  /* Native-aspect fit. We no longer force width:100% (that's what made
     300×169 thumbnails look blurry by upscaling). Instead the image is
     contained within the stage's max box, and the blurred backdrop above
     fills the empty space with ambient color. */
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 12px 48px rgba(0, 0, 0, 0.8));
  border: 1px solid rgba(212, 175, 55, 0.32);
  transition: filter 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  position: relative;
  z-index: 2;  /* above the blurred backdrop */
}
/* Hover glow removed 2026-05-10 per user — was "trop". Tilt + particles
   carry the interactivity without the saturation/light overlay. */
/* Particle canvas overlay — gold sparks trailing the cursor */
#card-lightbox .lb-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
@media (max-width: 899px) {
  #card-lightbox .lb-stage {
    padding: 56px 20px 16px;
  }
  #card-lightbox .lb-stage img { max-height: 50vh; }
}

#card-lightbox .lb-text {
  display: flex; flex-direction: column;
  padding: 64px 56px 48px 16px;
  overflow-y: auto;
  font-family: 'EB Garamond', Georgia, serif;
  color: var(--er-fg, #e8dcc0);
  border-left: 1px solid rgba(212, 175, 55, 0.18);
}
@media (max-width: 899px) {
  #card-lightbox .lb-text {
    padding: 16px 24px 80px;
    border-left: none;
    border-top: 1px solid rgba(212, 175, 55, 0.18);
  }
}
#card-lightbox .lb-text header {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--er-border, rgba(201, 162, 39, 0.18));
}
#card-lightbox .lb-cat {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
#card-lightbox .lb-title {
  font-family: 'Cinzel', serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #f0e8d5;
  margin: 0 0 6px;
  line-height: 1.15;
}
#card-lightbox .lb-sub {
  font-family: 'EB Garamond', serif;
  font-size: 15px;
  font-style: italic;
  color: var(--er-fg-soft, #c9a227);
  margin: 0;
  line-height: 1.4;
}
#card-lightbox .lb-meta {
  margin-top: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--er-fg-muted, #9c8b6b);
  opacity: 0.85;
}
#card-lightbox .lb-body {
  flex: 1;
  font-size: 16.5px;
  line-height: 1.7;
}
#card-lightbox .lb-body .lp {
  margin: 0 0 20px;
}
#card-lightbox .lb-body .boss-epigraph {
  margin: 0 0 28px;
}
#card-lightbox .lb-text footer {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--er-border);
}
#card-lightbox .lb-goto {
  display: inline-block;
  padding: 8px 18px;
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #f0d060;
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: all 0.15s ease;
}
#card-lightbox .lb-goto:hover {
  background: rgba(212, 175, 55, 0.22);
  color: #fff;
  border-color: var(--er-gold);
}

#card-lightbox button {
  background: rgba(0, 0, 0, 0.6);
  color: #f0d060;
  border: 1px solid rgba(212, 175, 55, 0.4);
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  transition: all 0.15s ease;
}
#card-lightbox button:hover {
  background: rgba(212, 175, 55, 0.18);
  border-color: var(--er-gold);
  color: #fff;
}
#card-lightbox .lb-close {
  position: absolute;
  top: 18px; right: 22px;
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  z-index: 5;
}
#card-lightbox .lb-prev,
#card-lightbox .lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
  z-index: 5;
}
#card-lightbox .lb-prev { left: 14px; }
#card-lightbox .lb-next { left: calc(50% - 28px); }
@media (max-width: 899px) {
  #card-lightbox .lb-next { left: auto; right: 14px; }
}

/* ── Clickable image cursor (replaced by 3D tilt parallax in the new
   open-card split layout — keep just the magnifier cursor for affordance) */
.card[open] .card-image,
.card[open] .card-image img {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='13' cy='13' r='8' fill='none' stroke='%23f0d060' stroke-width='2.2'/><line x1='19' y1='19' x2='27' y2='27' stroke='%23f0d060' stroke-width='2.6' stroke-linecap='round'/><circle cx='13' cy='13' r='8' fill='none' stroke='%23000' stroke-width='4' opacity='0.4'/></svg>") 13 13, zoom-in;
}
/* The old hover scale + brightness rules are replaced by the
   parallax-tilt block in the wide-viewport open card layout above. */

/* ── Card hover preview (collapsed only) ─────────────────────────── */
.card:not([open]) {
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.card:not([open]):hover {
  transform: translateX(2px);
  border-color: var(--er-border-hi);
}
.card:not([open]):hover .ch .cs {
  color: var(--er-fg) !important;
}

/* ── Copy permalink button (in expanded card top-right) ─────────── */
.card-copy-link {
  position: absolute;
  top: 14px;
  right: 60px;
  z-index: 5;
  background: rgba(0, 0, 0, 0.55);
  color: var(--er-gold);
  border: 1px solid var(--er-border-hi);
  width: 32px;
  height: 32px;
  font-size: 13px;
  cursor: pointer;
  display: none;
  line-height: 30px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  transition: all 0.15s ease;
}
.card[open] .card-copy-link { display: block; }
.card-copy-link:hover {
  color: #f0d060;
  border-color: #f0d060;
}
.card-copy-link.copied { color: #88dd88; border-color: #88dd88; }

/* ── Keyboard shortcut hint pill in sidebar header ──────────────── */
.kbd-hint {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  font-size: 9.5px;
  color: var(--er-fg-faint);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.1em;
  align-items: center;
}
.kbd {
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid var(--er-border);
  padding: 1px 5px;
  border-radius: 2px;
  color: var(--er-gold);
}

/* ── Card title is full-width clickable area in summary header ──── */
body.theme-parchment .card-summary { color: var(--er-fg); }


/* ═══════════════════════════════════════════════════════════════
   FUTURE-SITE PASS — search · TOC · last-viewed · particles
   bookmarks · skeleton · cascade · sepia · mobile drawer · badges
   ═══════════════════════════════════════════════════════════════ */

/* Top nav: density + mobile button */
.log-nav .meta { gap: 14px; align-items: center; }
.nav-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--er-fg-muted);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.15s ease;
}
.nav-link:hover { color: var(--er-gold); }
.nav-tome {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--er-gold);
}
.nav-stat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--er-fg-muted);
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid var(--er-border);
  padding: 4px 8px;
}
.nav-btn-mobile { display: none; }
@media (max-width: 900px) {
  .nav-btn-mobile { display: inline-flex; }
  .nav-link, .nav-tome, .nav-stat { display: none; }
  #sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 88vw; max-width: 360px;
    z-index: 180;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  #sidebar.is-open { transform: translateX(0); }
  .er-app { display: block; }
  .card[open] .card-summary { display: block; }
  .card:not([open]) .card-summary { grid-template-columns: 80px 1fr 28px; }
  .card:not([open]) .card-image { width: 80px !important; }
}

/* Hero ambient particles (Erdtree pollen) */
.er-hero { position: relative; }
.er-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle 1px at 20% 30%, rgba(240, 208, 96, 0.35), transparent 100%),
    radial-gradient(circle 1px at 70% 50%, rgba(240, 208, 96, 0.25), transparent 100%),
    radial-gradient(circle 1px at 35% 75%, rgba(240, 208, 96, 0.30), transparent 100%),
    radial-gradient(circle 1px at 85% 20%, rgba(240, 208, 96, 0.20), transparent 100%),
    radial-gradient(circle 1px at 55% 90%, rgba(240, 208, 96, 0.25), transparent 100%);
  background-size: 100% 100%;
  z-index: 0;
  opacity: 0.85;
  animation: er-float 24s linear infinite;
}
@keyframes er-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-100vh); }
}

/* Reading-time pill */
.read-time {
  display: inline-block;
  margin-left: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--er-fg-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--er-border);
  padding: 2px 8px;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Card-opening cascade animation */
.card[open] .cd > * {
  animation: cascade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.card[open] .cd > *:nth-child(1) { animation-delay: 0.05s; }
.card[open] .cd > *:nth-child(2) { animation-delay: 0.10s; }
.card[open] .cd > *:nth-child(3) { animation-delay: 0.15s; }
.card[open] .cd > *:nth-child(4) { animation-delay: 0.20s; }
.card[open] .cd > *:nth-child(5) { animation-delay: 0.25s; }
.card[open] .cd > *:nth-child(n+6) { animation-delay: 0.30s; }
@keyframes cascade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* See-also footer */
.see-also {
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px solid var(--er-border);
  background: rgba(212, 175, 55, 0.04);
}
.see-also-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--er-gold);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.see-also-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.see-also-item {
  font-family: 'EB Garamond', serif;
  font-size: 14px;
  color: var(--er-fg);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--er-border);
  padding: 6px 14px;
  text-decoration: none;
  transition: all 0.15s ease;
}
.see-also-item:hover {
  background: rgba(212, 175, 55, 0.16);
  color: #f0d060;
  border-color: var(--er-gold);
}

/* "Mentioned in" — graph-inverse backlinks. Subtler than See also so the
   two sections read as a hierarchy: the user's eye lands on See-also's
   curated suggestions, then can browse the wider list of backlinks below. */
.see-also.see-also-back {
  margin-top: 14px;
  background: rgba(180, 140, 90, 0.045);
  border-color: rgba(180, 140, 90, 0.28);
}
.see-also-back .see-also-title {
  color: #b48c5a;
  letter-spacing: 0.32em;
}
.see-also-count {
  color: var(--er-fg-dim, rgba(232, 220, 192, 0.55));
  font-weight: normal;
  letter-spacing: 0.2em;
  margin-left: 4px;
}
.see-also-back .see-also-item {
  font-size: 13px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.28);
}
.see-also-back .see-also-item:hover {
  border-color: #b48c5a;
  color: #d4af37;
  background: rgba(180, 140, 90, 0.12);
}
.see-also-more {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--er-fg-dim, rgba(232, 220, 192, 0.55));
  align-self: center;
  letter-spacing: 0.1em;
}

/* Bookmark star */
.card-bookmark {
  position: absolute;
  top: 14px;
  left: 18px;
  z-index: 5;
  background: rgba(0, 0, 0, 0.55);
  color: var(--er-fg-muted);
  border: 1px solid var(--er-border);
  width: 32px;
  height: 32px;
  font-size: 16px;
  cursor: pointer;
  display: none;
  line-height: 30px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  transition: all 0.15s ease;
}
.card[open] .card-bookmark { display: block; }
.card-bookmark:hover { color: var(--er-gold); border-color: var(--er-gold); }
.card-bookmark.is-bookmarked {
  color: var(--er-gold);
  border-color: var(--er-gold);
  background: rgba(212, 175, 55, 0.18);
}

/* Read indicator + bookmark mark in sidebar */
.ni { position: relative; }
.ni::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(240, 208, 96, 0.55);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.ni.is-read::after { opacity: 1; }
.ni.is-read { color: var(--er-fg-muted); }
.ni.is-bookmarked::before {
  content: "★";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--er-gold);
  font-size: 11px;
  line-height: 1;
}
.ni.is-bookmarked { padding-left: 28px; }

/* Filter chips — spaced from search input above */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px -22px 0;
  padding: 14px 22px 4px;
  border-top: 1px solid var(--er-border);
}
.chip-row::before {
  content: 'FILTER GROUPS';
  flex-basis: 100%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--er-fg-faint);
  margin-bottom: 4px;
}
.chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--er-border);
  color: var(--er-fg-muted);
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}
.chip:hover { color: var(--er-fg); border-color: var(--er-border-hi); }
.chip.is-on {
  color: #f0d060;
  border-color: var(--er-gold);
  background: rgba(212, 175, 55, 0.12);
}
.ni.is-group-hidden { display: none; }
.ncat.is-group-hidden { display: none; }

/* Overlays (search + TOC) */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(8px);
  z-index: 250;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 24px;
  animation: overlay-in 0.18s ease;
}
.overlay.open { display: flex; }
@keyframes overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.overlay-inner {
  max-width: 720px;
  width: 100%;
  background: var(--er-bg-elev);
  border: 1px solid var(--er-border-hi);
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}
.overlay-toc { max-width: 1100px; }
.overlay-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--er-border);
}
.overlay-head h2 {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  letter-spacing: 0.06em;
  color: #f0e8d5;
  margin: 0;
  flex: 1;
}
.overlay-close {
  background: transparent;
  border: 1px solid var(--er-border);
  color: var(--er-gold);
  width: 32px;
  height: 32px;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}
.overlay-close:hover { background: rgba(212, 175, 55, 0.12); }
#search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--er-fg);
  font-family: 'EB Garamond', serif;
  font-size: 22px;
  outline: none;
  padding: 6px 0;
}
#search-input::placeholder { color: var(--er-fg-faint); }
#search-results {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.sr-item {
  padding: 12px 18px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.12s ease;
}
.sr-item:hover, .sr-item.is-focus {
  background: rgba(212, 175, 55, 0.08);
}
.sr-title {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  color: #f0e8d5;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}
.sr-snippet {
  font-family: 'EB Garamond', serif;
  font-size: 13px;
  color: var(--er-fg-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sr-snippet mark {
  background: rgba(212, 175, 55, 0.3);
  color: #f0d060;
  padding: 0 2px;
}
.overlay-hint {
  padding: 10px 18px;
  border-top: 1px solid var(--er-border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--er-fg-faint);
  text-align: center;
}

/* TOC grid */
#toc-grid {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.toc-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--er-border);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: all 0.15s ease;
}
.toc-card:hover {
  background: rgba(212, 175, 55, 0.08);
  border-color: var(--er-border-hi);
}
.toc-card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border: 1px solid var(--er-border);
}
.toc-card-title {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  color: #f0e8d5;
  letter-spacing: 0.02em;
}
.toc-card-cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.25em;
  color: var(--clr, var(--er-gold));
  text-transform: uppercase;
}
.toc-card.is-bookmarked { border-color: var(--er-gold); }
.toc-card.is-read { opacity: 0.55; }

/* Last-viewed breadcrumb */
.last-viewed {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: none;
  align-items: center;
  gap: 14px;
  background: rgba(10, 8, 5, 0.92);
  border: 1px solid var(--er-border-hi);
  padding: 8px 14px;
  backdrop-filter: blur(8px);
  max-width: 90vw;
}
.last-viewed.has-items { display: flex; }
.lv-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.3em;
  color: var(--er-gold);
}
.lv-trail {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lv-trail a {
  font-family: 'EB Garamond', serif;
  font-size: 13px;
  color: var(--er-fg-soft);
  text-decoration: none;
  white-space: nowrap;
  padding: 2px 6px;
  border-bottom: 1px dotted transparent;
  transition: all 0.15s ease;
}
.lv-trail a:hover {
  color: var(--er-gold);
  border-bottom-color: var(--er-gold);
}

/* Sepia theme */
body.theme-sepia {
  --er-bg:        #2a2118;
  --er-bg-elev:   #322619;
  --er-bg-card:   #2c2218;
  --er-fg:        #e8d8b8;
  --er-fg-soft:   #d8c8a4;
  --er-fg-muted:  #b8a888;
  --er-fg-faint:  #8a7d62;
  --er-gold:      #e8c068;
  --er-gold-soft: #c89c40;
  --er-gold-glow: rgba(232, 192, 104, 0.28);
  --er-border:    rgba(232, 192, 104, 0.2);
  --er-border-hi: rgba(232, 192, 104, 0.45);
  background: var(--er-bg);
  color: var(--er-fg);
}
body.theme-sepia::after {
  background-image:
    radial-gradient(circle at 18% 20%, rgba(232, 192, 104, 0.06) 0%, transparent 55%),
    radial-gradient(circle at 82% 80%, rgba(180, 100, 50, 0.04) 0%, transparent 50%);
}


/* ═══════════════════════════════════════════════════════════════
   PHASE B — graph · theories · timeline · quote · thumbs
   ═══════════════════════════════════════════════════════════════ */

/* Hero rotating quote */
.hero-quote {
  position: relative;
  z-index: 1;
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: clamp(15px, 1.5vw, 19px);
  color: var(--er-gold-soft);
  max-width: 580px;
  text-align: center;
  margin: 0 auto 28px;
  opacity: 0;
  transition: opacity 0.8s ease;
  padding: 0 24px;
  line-height: 1.6;
  border: none;
}
.hero-quote.visible { opacity: 0.85; }
.hero-quote::before { content: '"'; opacity: 0.5; margin-right: 4px; }
.hero-quote::after  { content: '"'; opacity: 0.5; margin-left: 4px; }
.hero-quote .hq-attr {
  display: block;
  margin-top: 10px;
  font-size: 0.75em;
  font-style: normal;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--er-fg-faint);
  font-family: 'JetBrains Mono', monospace;
}

/* Sidebar thumbnails — small icon next to each .ni */
.ni {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ni-thumb {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  object-fit: cover;
  border: 1px solid var(--er-border);
  filter: saturate(0.85) brightness(0.92);
  transition: filter 0.15s ease, border-color 0.15s ease;
}
.ni:hover .ni-thumb,
.ni.is-current .ni-thumb {
  filter: none;
  border-color: var(--er-border-hi);
}
.ni-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Timeline strip — sticky under nav past hero */
.timeline-strip {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(10, 8, 5, 0.92);
  border-bottom: 1px solid var(--er-border);
  backdrop-filter: blur(8px);
  display: none;
  overflow: hidden;
}
.timeline-strip.is-visible { display: block; }
.ts-track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.ts-track::-webkit-scrollbar { display: none; }
.ts-era {
  flex: 1;
  min-width: max-content;
  padding: 10px 18px;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--er-fg-muted);
  text-decoration: none;
  text-align: center;
  border-right: 1px solid var(--er-border);
  position: relative;
  transition: color 0.15s ease, background 0.15s ease;
}
.ts-era:last-child { border-right: none; }
.ts-era:hover {
  color: var(--er-gold);
  background: rgba(212, 175, 55, 0.06);
}
.ts-era.is-active {
  color: #f0d060;
  background: rgba(212, 175, 55, 0.14);
}
.ts-era.is-active::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--er-gold);
}

/* Cross-reference graph overlay */
.overlay-graph {
  max-width: min(1240px, 96vw);
  width: 100%;
}
#graph-canvas {
  width: 100%;
  height: 70vh;
  background:
    radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.04) 0%, transparent 70%),
    #050300;
  cursor: grab;
  display: block;
}
#graph-canvas:active { cursor: grabbing; }

/* Theories list */
.overlay-theories { max-width: 920px; }
#theories-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 22px;
}
.th-item {
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid var(--er-border);
  border-left: 3px solid var(--er-gold);
  background: rgba(212, 175, 55, 0.04);
  transition: all 0.15s ease;
}
.th-item:hover {
  background: rgba(212, 175, 55, 0.08);
  border-left-color: #f0d060;
}
.th-item-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.th-item-mark {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  color: var(--er-gold);
}
.th-item-card {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--er-gold);
  text-transform: uppercase;
  text-decoration: none;
}
.th-item-card:hover { color: #f0d060; }
.th-item-card-title {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  color: #f0e8d5;
  letter-spacing: 0.04em;
}
.th-item-text {
  font-family: 'EB Garamond', serif;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--er-fg-soft);
}
.th-empty {
  padding: 60px 30px;
  text-align: center;
  color: var(--er-fg-muted);
  font-style: italic;
}

/* Hide the timeline / quote when in print or older browsers */
@media (max-width: 700px) {
  .ts-era { padding: 8px 12px; font-size: 10px; }
  .timeline-strip { display: none !important; }
}

/* ── Keyboard navigation focus ring (persistent until mouse click) ─── */
.card.is-keyfocus {
  border-color: var(--er-gold) !important;
  box-shadow:
    0 0 0 1px var(--er-gold),
    0 0 24px rgba(212, 175, 55, 0.28);
  position: relative;
  z-index: 2;
  animation: keyfocus-onset 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes keyfocus-onset {
  from { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.6),  0 0 24px rgba(212, 175, 55, 0); }
  to   { box-shadow: 0 0 0 1px var(--er-gold),         0 0 24px rgba(212, 175, 55, 0.28); }
}

/* ──── Mini read-progress bar inside the nav stat ──── */
#read-progress-stat {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding-bottom: 0;
}
.read-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: rgba(201, 162, 39, 0.12);
  position: relative;
}
.read-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--er-gold-soft, #8a7220), var(--er-gold, #c9a227));
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ──── Quick help overlay (kbd shortcuts + features primer) ──── */
.overlay-inner.overlay-help {
  max-width: 600px;
  width: 92vw;
}
.help-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 4px 20px;
  overflow-y: auto;
}
.help-section h3 {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--er-fg-soft);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--er-border);
}
.help-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 9px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 14.5px;
  color: var(--er-fg-soft);
}
.help-row kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 3px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  border: 1px solid var(--er-border-hi, rgba(201, 162, 39, 0.4));
  background: var(--er-bg-card, #0f0c08);
  color: var(--er-gold);
  border-radius: 0;
  letter-spacing: 0;
  text-transform: none;
  flex-shrink: 0;
}
.help-row .help-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--er-gold);
  border: 1px solid var(--er-border-hi, rgba(201, 162, 39, 0.4));
  padding: 4px 9px;
  flex-shrink: 0;
  white-space: nowrap;
}
.help-row .help-link {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  color: var(--er-gold);
  text-decoration: none;
  border-bottom: 1px dotted var(--er-gold-soft);
  flex-shrink: 0;
  white-space: nowrap;
  letter-spacing: 0.04em;
}
.help-row .help-link:hover {
  color: #f0d060;
  border-bottom-color: #f0d060;
}

/* ──── Per-card prev/next navigation at bottom of body ──── */
.card-nav {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--er-border, rgba(201, 162, 39, 0.18));
}
.card-nav-prev, .card-nav-next, .card-nav-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 18px;
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--er-fg-soft, #d4c8ad);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  min-width: 0;
}
.card-nav-prev:hover, .card-nav-next:hover {
  border-color: var(--er-gold-soft, #8a7220);
  background: rgba(201, 162, 39, 0.04);
  color: var(--er-fg, #ece2cc);
}
.card-nav-next { text-align: right; align-items: flex-end; }
.card-nav-prev { text-align: left; }
.cn-arrow {
  font-family: 'JetBrains Mono', monospace;
  color: var(--er-gold);
  font-size: 16px;
  margin-bottom: 2px;
}
.cn-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--er-fg-muted);
}
.cn-title {
  font-family: 'Cinzel', serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ──── Cross-reference hover preview ──── */
.xref-preview {
  position: fixed;
  width: 360px;
  max-width: 92vw;
  background: var(--er-bg-elev, #14100a);
  border: 1px solid var(--er-gold-soft, #8a7220);
  padding: 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  z-index: 920;
  opacity: 0;
  transform: translateY(-100%) translateY(-4px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  gap: 12px;
}
.xrp-img {
  width: 110px;
  flex-shrink: 0;
  object-fit: cover;
  align-self: stretch;
  background: var(--er-bg-card);
}
.xrp-body {
  flex: 1;
  min-width: 0;
  padding: 16px 18px 14px 16px;
}
/* Make the whole hover preview clickable (cursor + interaction hint) */
.xref-preview { cursor: pointer; }
.xref-preview:hover {
  border-color: var(--er-gold);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65),
              0 0 0 1px rgba(201, 162, 39, 0.18) inset;
}
.xrp-hint-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 12px;
  background: rgba(201, 162, 39, 0.10);
  border: 1px solid rgba(201, 162, 39, 0.42);
  color: #f0d060;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.xref-preview:hover .xrp-hint-btn,
.xrp-hint-btn:hover {
  background: rgba(201, 162, 39, 0.22);
  border-color: var(--er-gold);
  color: #fff;
}
.xref-preview.is-shown {
  opacity: 1;
  transform: translateY(-100%);
  pointer-events: auto;
}
.xrp-cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--er-gold, #c9a227);
  margin-bottom: 4px;
}
.xrp-title {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--er-fg, #ece2cc);
  letter-spacing: 0.04em;
  line-height: 1.25;
}
.xrp-sub {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 12px;
  color: var(--er-fg-muted);
  margin-top: 2px;
}
.xrp-snippet {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--er-fg-soft);
  margin-top: 8px;
}
.xrp-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--er-fg-muted);
  margin-top: 8px;
  text-align: right;
}

/* ──── DLC tag in hero — visible marker that the tome includes SoTE ──── */
.hero-dlc-tag {
  display: inline-flex;
  align-items: center;
  margin: 18px 0 6px;
  padding: 7px 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #b48c5a;
  border: 1px solid rgba(180, 140, 90, 0.45);
  background: linear-gradient(180deg, rgba(180, 140, 90, 0.06), rgba(180, 140, 90, 0.015));
  position: relative;
  z-index: 1;
}
.hero-dlc-tag strong {
  color: var(--er-gold, #c9a227);
  font-weight: 600;
  letter-spacing: 0.18em;
}

/* ──── Tarnished Journal overlay (reading progress, bookmarks, recent) ──── */
.overlay-inner.overlay-journal {
  max-width: 720px;
  width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
#journal-body {
  overflow-y: auto;
  padding: 4px 4px 24px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.jr-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.jr-stat-card {
  border: 1px solid var(--er-border, rgba(201, 162, 39, 0.18));
  background: rgba(201, 162, 39, 0.03);
  padding: 18px 20px;
}
.jr-stat-num {
  font-family: 'Cinzel', serif;
  font-size: 38px;
  font-weight: 700;
  color: var(--er-gold, #c9a227);
  line-height: 1;
}
.jr-stat-num .jr-stat-of {
  font-size: 18px;
  color: var(--er-fg-muted);
  margin-left: 4px;
  font-weight: 400;
}
.jr-stat-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--er-fg-muted);
  margin-top: 6px;
}
.jr-stat-pct {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--er-fg-soft);
  margin-top: 4px;
}
.jr-next {
  display: block;
  border: 1px solid var(--er-gold-soft, #8a7220);
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.06), rgba(201, 162, 39, 0.015));
  padding: 16px 20px;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.jr-next:hover {
  border-color: var(--er-gold, #c9a227);
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.1), rgba(201, 162, 39, 0.03));
}
.jr-next-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--er-fg-muted);
}
.jr-next-title {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--er-gold);
  margin-top: 6px;
}
.jr-section h3 {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--er-fg-soft);
  margin: 0 0 12px;
  border-bottom: 1px solid var(--er-border);
  padding-bottom: 8px;
}
.jr-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.jr-pill {
  display: inline-block;
  padding: 6px 12px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 14px;
  color: var(--er-fg-soft);
  border: 1px solid var(--er-border);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.012);
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.jr-pill:hover {
  color: var(--er-gold);
  border-color: var(--er-gold-soft);
  background: rgba(201, 162, 39, 0.05);
}
.jr-empty {
  color: var(--er-fg-muted);
  font-style: italic;
  font-family: 'EB Garamond', Georgia, serif;
  padding: 8px 0;
}
.jr-paths { display: flex; flex-direction: column; gap: 18px; }
.jr-path-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--er-fg, #ece2cc);
  margin-bottom: 2px;
}
.jr-path-num { color: var(--er-fg-muted); font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.jr-path-desc {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--er-fg-muted);
  margin-bottom: 8px;
}
.jr-path-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.jr-path-pill {
  display: inline-block;
  width: 20px;
  height: 6px;
  background: var(--er-bg-card, #0f0c08);
  border: 1px solid var(--er-border);
  transition: background 0.12s, transform 0.1s;
  text-decoration: none;
}
.jr-path-pill:hover { transform: scaleY(1.6); }
.jr-path-pill.is-read { background: linear-gradient(90deg, var(--er-gold-soft), var(--er-gold)); border-color: var(--er-gold-soft); }

.jr-cats { display: flex; flex-direction: column; gap: 10px; }
.jr-cat-head {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--er-fg-soft);
  margin-bottom: 4px;
  letter-spacing: 0.06em;
}
.jr-cat-num { color: var(--er-fg-muted); }
.jr-bar {
  height: 4px;
  background: var(--er-bg-card, #0f0c08);
  border: 1px solid var(--er-border);
  position: relative;
  overflow: hidden;
}
.jr-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--er-gold-soft), var(--er-gold));
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ──── Sources jump button (replaces the removed Detective panel)
   Clicks expand the card's <details class="sw"> and scroll to it. ──── */
.lp-sources-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 10px;
  padding: 1px 9px 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--er-fg-muted, #998877);
  background: transparent;
  border: 1px solid var(--er-border, rgba(201, 162, 39, 0.22));
  border-radius: 0;
  cursor: pointer;
  vertical-align: 1px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  user-select: none;
}
.lp-sources-btn::before { content: '✦'; color: var(--er-gold-soft, #8a7220); margin-right: 2px; }
.lp-sources-btn:hover {
  color: var(--er-gold);
  border-color: var(--er-gold-soft);
  background: rgba(201, 162, 39, 0.06);
}
.lp-sources-btn:hover::before { color: var(--er-gold); }
.lp { /* leave room for the button */ }

/* ──── boss-dialogue epigraph (Option C) ────────────────────────
   Used for the 14 cards with curated boss dialogue lines.
   Renders the quote at the top of the card as a distinctive
   parchment-bordered block, NOT as a regular .sc source. */
.boss-epigraph {
  margin: 22px 0 30px;
  padding: 22px 28px 18px;
  background: linear-gradient(180deg,
    rgba(201, 162, 39, 0.05) 0%,
    rgba(201, 162, 39, 0.015) 100%);
  border-left: 3px solid var(--er-gold-soft);
  border-radius: 0 4px 4px 0;
  position: relative;
}
.boss-epigraph::before {
  content: '\201C';
  position: absolute;
  top: -6px; left: 14px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 56px;
  color: var(--er-gold);
  opacity: 0.55;
  line-height: 1;
  pointer-events: none;
}
.boss-epigraph .epigraph-marker {
  margin-top: 14px;
  text-align: right;
}
.boss-epigraph .ep-label {
  color: var(--er-fg-muted);
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.boss-epigraph .ep-label::before {
  content: '\2014\00a0';
  color: var(--er-gold-soft);
  font-style: normal;
}
.boss-epigraph .ep-quote {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: var(--er-fg);
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ════════════════════════════════════════════════════════════════════
   Embedded lore video — vertical (9:16) narrated short, placed at the top
   of the OPEN card body (never in the <summary>, so its controls can't
   toggle the card). FR pages serve <card>.mp4, EN pages <card>.en.mp4.
   ════════════════════════════════════════════════════════════════════ */
.lore-video-wrap {
  margin: 4px auto 30px;
  max-width: min(360px, 86%);
  text-align: center;
  line-height: 0;
}
.lore-video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 78vh;
  background: #000;
  border: 1px solid var(--er-gold-soft, rgba(212,175,55,0.4));
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0,0,0,0.4);
}
.lore-video-cap {
  margin-top: 9px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--er-gold, #d4af37);
  opacity: 0.75;
  line-height: 1.4;
}

/* ── Pre-launch audit fixes ───────────────────────────────────────────────── */

/* [9] 3D portrait tilt — consume the --tx/--ty that log.js writes on the open
   card image (was dead: no consumer). Subtle perspective rotate. */
.card[open] .card-image { perspective: 1100px; }
.card[open] .card-image img {
  transform: rotateY(calc(var(--tx, 0) * 6deg)) rotateX(calc(var(--ty, 0) * -6deg));
  transition: transform 0.12s ease-out;
  will-change: transform;
}

/* [4] Reader (lightbox) parity: restore the signature drop-cap and bump prose
   size — the reader is the DEFAULT reading mode but used .lb-body (no drop-cap,
   smaller text) instead of .cd. */
#card-lightbox .lb-body { font-size: 18px; }
#card-lightbox .lb-body .lp { line-height: 1.8; }
#card-lightbox .lb-body .lp:first-of-type::first-letter {
  font-family: 'Cinzel', serif;
  font-size: 3.4em;
  font-weight: 700;
  color: var(--er-gold);
  float: left;
  line-height: 0.85;
  padding: 4px 12px 0 0;
  margin-top: 4px;
}

/* [10] Respect prefers-reduced-motion for the Elden-specific motion. */
@media (prefers-reduced-motion: reduce){
  .er-hero::after, .scroll-cue, .timeline-strip { animation: none !important; }
  .hero-quote { transition: none !important; }
  [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .card[open] .cd > * { animation: none !important; }
  .card[open] .card-image img { transform: none !important; transition: none !important; }
}

/* ============================================================
   Lore Hub — portes thématiques + filtrage (refonte UX)
   Remplace la liste verticale infinie par ~10 catégories ;
   on n'affiche les fiches d'une catégorie qu'une fois choisie.
   Construit sur les tokens --er-* (s'adapte dark/clair/sépia).
   ============================================================ */
.lore-hub{max-width:1080px;margin:6px auto 48px;padding:0 22px}
.lore-hub-head{text-align:center;max-width:580px;margin:4px auto 30px}
.lore-hub-head .eyebrow{font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:var(--er-gold);opacity:.78}
.lore-hub-head h2{font-family:'Cinzel',serif;font-weight:600;font-size:1.95rem;line-height:1.15;color:var(--er-fg);margin:.3em 0 .2em}
.lore-hub-head p{color:var(--er-fg-muted);font-family:'EB Garamond',serif;font-size:1.02rem;line-height:1.5;margin:.3em auto 0}

.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:14px}
.hub-tile{position:relative;display:block;width:100%;text-align:left;border:1px solid var(--er-gold-glow);border-radius:9px;overflow:hidden;background:var(--er-bg-card);min-height:160px;cursor:pointer;color:inherit;font:inherit;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.hub-tile:hover,.hub-tile:focus-visible{transform:translateY(-3px);border-color:var(--clr,var(--er-gold));box-shadow:0 12px 32px rgba(0,0,0,.45);outline:none}
.hub-tile-img{position:absolute;inset:0;background-size:cover;background-position:center top;opacity:.32;filter:grayscale(.25) contrast(1.05);transition:opacity .25s ease,transform .4s ease}
.hub-tile:hover .hub-tile-img{opacity:.46;transform:scale(1.06)}
.hub-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,6,3,.2) 0%,var(--er-bg-card) 96%);opacity:.92}
.hub-tile-icon{position:absolute;top:11px;right:14px;z-index:3;font-size:1.15rem;color:var(--clr,var(--er-gold));text-shadow:0 1px 5px rgba(0,0,0,.65)}
.hub-tile-body{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-height:160px;padding:15px 16px 14px;box-sizing:border-box}
.hub-tile-count{font-family:'EB Garamond',serif;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--clr,var(--er-gold));margin-bottom:5px;opacity:.95}
.hub-tile-name{font-family:'Cinzel',serif;font-size:1.18rem;font-weight:600;line-height:1.12;color:var(--er-fg);margin-bottom:6px}
.hub-tile-desc{font-family:'EB Garamond',serif;font-size:.84rem;line-height:1.36;color:var(--er-fg-muted)}

/* barre de retour (mode catégorie) */
.hub-back{display:none;max-width:1080px;margin:2px auto 4px;padding:0 22px;align-items:center;gap:16px;flex-wrap:wrap}
.hub-back button{background:var(--er-gold-glow);border:1px solid var(--clr,var(--er-gold));color:var(--clr,var(--er-gold));border-radius:6px;padding:8px 14px;font-family:'EB Garamond',serif;font-size:.85rem;letter-spacing:.03em;cursor:pointer;transition:background .15s ease}
.hub-back button:hover{background:rgba(201,162,39,.16)}
.hub-back .cur{font-family:'Cinzel',serif;font-size:1.2rem;color:var(--er-fg)}
.hub-back .cur b{font-weight:600;color:var(--clr,var(--er-gold))}

/* indice cliquable sur la tuile : « Ouvrir → » */
.hub-tile-go{position:relative;z-index:3;margin-top:9px;font-family:'EB Garamond',serif;font-size:.78rem;letter-spacing:.05em;color:var(--clr,var(--er-gold));opacity:.78;transition:opacity .18s ease}
.hub-tile-go em{font-style:normal;display:inline-block;transition:transform .18s ease}
.hub-tile:hover .hub-tile-go,.hub-tile:focus-visible .hub-tile-go{opacity:1}
.hub-tile:hover .hub-tile-go em{transform:translateX(4px)}

/* états */
body.cat-mode .lore-hub{display:none}
body.cat-mode .hub-back{display:flex}
body.cat-mode .er-overview{display:none}   /* vue catégorie épurée : on masque le préambule */
/* PORTE D'ENTRÉE UNIQUE : à l'arrivée (hors catégorie) on masque toute la colonne
   sidebar+lecture, pour ne laisser QUE le hub -> plus de double liste déroutante.
   Gaté par .has-hub (posé sur la page essais UNIQUEMENT) : le catalogue partage
   ce CSS + a une .er-app mais n'est pas un hub -> il doit rester visible. */
body.has-hub:not(.cat-mode) .er-app{display:none}
/* barre de retour plus lisible (vraie barre, pas un filet discret) */
.hub-back{margin:2px auto 14px;padding:11px 22px;border-top:1px solid var(--er-gold-glow);border-bottom:1px solid var(--er-gold-glow);background:linear-gradient(180deg,rgba(201,162,39,.05),transparent)}
.hub-back .cur{font-size:1.32rem}
details.card.is-hidden{display:none!important}
/* le hub + la barre de retour remplacent les anciens séparateurs de catégorie
   injectés dans la liste ; on les masque pour éviter la « liste » résiduelle. */
body.has-hub .toc-cat-header{display:none!important}

@media(max-width:620px){
  .hub-grid{grid-template-columns:1fr 1fr;gap:10px}
  .hub-tile,.hub-tile-body{min-height:130px}
  .lore-hub-head h2{font-size:1.6rem}
}

/* sous-thèmes (chips) dans la vue d'une grosse catégorie */
.hub-subchips{flex-basis:100%;display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.subchip{background:transparent;border:1px solid var(--er-gold-glow);color:var(--er-fg-muted);border-radius:20px;padding:5px 13px;font-family:'EB Garamond',serif;font-size:.83rem;cursor:pointer;transition:all .15s ease;display:inline-flex;align-items:center;gap:5px}
.subchip em{font-style:normal;font-size:.72rem;opacity:.7}
.subchip:hover{border-color:var(--clr,var(--er-gold));color:var(--er-fg)}
.subchip.on{background:var(--clr,var(--er-gold));border-color:var(--clr,var(--er-gold));color:#1a1407;font-weight:600}
.subchip.on em{opacity:.85}

/* ═══════════════════════════════════════════════════════════════════
   POLISH MOBILE (passe pré-lancement — vérifié à 390/320px réel)
   Le site était déjà responsive ; ici on durcit le tactile et le viewport.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* hero lore : tient dans l'écran visible (svh évite la coupe par la barre d'URL) */
  .er-hero { min-height: 72svh !important; }
  /* cibles tactiles >=44px : bouton menu ≡ et autres boutons de nav visibles sur mobile */
  .nav-btn, .nav-btn-mobile { width: 44px; height: 44px; font-size: 20px; }
  /* chips de filtre : zone tactile confortable */
  .subchip { padding: 9px 15px; }
  /* tap-highlight discret cohérent avec l'or */
  a, button, summary, .hub-tile, .ni { -webkit-tap-highlight-color: rgba(201,162,39,.18); }
}
/* respecte l'encoche iPhone (safe-area) pour les éléments fixes bas/haut */
@supports (padding: env(safe-area-inset-bottom)) {
  .er-page .lang-toggle { bottom: calc(18px + env(safe-area-inset-bottom)); }
}

/* ── Lecteur mobile : la barre du haut ne se chevauche plus ──
   Sur écran étroit, le compteur « 1/40 · CATÉGORIE » (nowrap) chevauchait
   « VUE LISTE ». On garde « 1/40 », on cache la catégorie longue, et on
   garantit les cibles tactiles 44px sans dépendre de pointer:coarse. */
@media (max-width: 560px) {
  body.slider .lb-counter .lbc-cat { display: none; }
  body.slider .lb-counter { right: 62px; font-size: 11px; padding: 9px 11px; }
  body.slider .lb-list-toggle { left: 14px; font-size: 10px; padding: 9px 11px; }
  body.slider #card-lightbox .lb-close { right: 14px; }
  body.slider #card-lightbox .lb-close,
  body.slider #card-lightbox .lb-prev,
  body.slider #card-lightbox .lb-next { width: 44px; height: 44px; }
}

/* ── Sourcing par affirmation — lien prose → source in-game ─────────── */
.claim-src {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--er-gold-soft, rgba(200,169,106,.55));
  transition: border-color .18s ease;
}
.claim-src:hover,
.claim-src:focus-visible {
  border-bottom: 1px solid var(--er-gold, #c8a96a);
  color: var(--er-gold, #c8a96a);
}
.sc.src-hit {
  animation: srcHit 1.6s ease-out;
}
@keyframes srcHit {
  0%   { outline: 2px solid var(--er-gold, #c8a96a); background: rgba(200,169,106,.16); }
  100% { outline: 2px solid transparent; background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .sc.src-hit { animation: none; outline: 2px solid var(--er-gold, #c8a96a); }
}
.claim-mark {
  border-bottom: none;
  font-size: .72em;
  vertical-align: super;
  opacity: .7;
  margin-left: 1px;
  color: var(--er-gold-soft, rgba(200,169,106,.7));
}
.claim-mark:hover,
.claim-mark:focus-visible { opacity: 1; border-bottom: none; }