/* ============================================================================
   Tenebrist Renaissance — quality layer (loads LAST, overrides by source order)
   Dark academia × Renaissance: candlelit navy/umber ground, gilt gold, ONE
   oxblood accent, ivory paper insets. Replaces the legacy blue/green "basic"
   palette and the flat color-only hovers with engraved gilt controls + real
   hover/scroll choreography. Motion is gated behind .tnbr-js (added by
   tenebrist.js only when prefers-reduced-motion: no-preference) so no-JS and
   reduced-motion render fully visible and static — keeps the test suite green.
   ========================================================================== */

:root {
  /* T0 — palette discipline: retarget the legacy off-palette tokens */
  --accent: #e4bf83;
  --accent-strong: #f3dcb2;
  --blue: #e4bf83;
  --blue-2: #caa24f;
  --success: #b9a25e;          /* "done" = tarnished gilt, not green */
  /* fused tenebrist tokens */
  --gold: #e4bf83;
  --gold-bright: #f3dcb2;
  --gold-line: rgba(228, 191, 131, 0.34);
  --gold-faint: rgba(228, 191, 131, 0.10);
  --oxblood: #6e2b2b;
  --oxblood-bright: #8f3a36;
  --oxblood-line: rgba(143, 58, 54, 0.42);
  --umber: #14100a;
  --ivory: #ece3cf;
  --candle: rgba(228, 191, 131, 0.16);
  --tnbr-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Warm the ground toward candlelit oil-paint (umber in the shadows) */
body {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(228, 191, 131, 0.05), transparent 60%),
    radial-gradient(90% 60% at 85% 8%, rgba(110, 43, 43, 0.06), transparent 55%),
    linear-gradient(180deg, #060b15 0%, #080a10 45%, var(--umber) 140%) fixed;
}

/* ---------------------------------------------------------------------------
   1. ENGRAVED GILT BUTTONS — kills the basic blue/green CSS buttons
   Real hover: lift + gold glow + a sheen that sweeps across the face.
   --------------------------------------------------------------------------- */
.action-button,
.gam-action-button {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--gold-line);
  background:
    linear-gradient(180deg, rgba(228, 191, 131, 0.10), rgba(228, 191, 131, 0.025)),
    rgba(9, 13, 22, 0.72);
  color: var(--gold-bright);
  font-weight: 650;
  letter-spacing: 0.02em;
  box-shadow:
    inset 0 1px 0 rgba(243, 220, 178, 0.14),
    inset 0 0 0 1px rgba(0, 0, 0, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.4);
  transition:
    transform 220ms var(--tnbr-ease),
    border-color 220ms var(--tnbr-ease),
    box-shadow 220ms var(--tnbr-ease),
    background-color 220ms var(--tnbr-ease);
}
/* sheen sweep */
.action-button::after,
.gam-action-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 28%, rgba(243, 220, 178, 0.28) 50%, transparent 72%);
  transform: translateX(-130%);
  pointer-events: none;
}
.tnbr-js .action-button::after,
.tnbr-js .gam-action-button::after {
  transition: transform 620ms var(--tnbr-ease);
}
.action-button:hover,
.gam-action-button:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  background:
    linear-gradient(180deg, rgba(228, 191, 131, 0.16), rgba(228, 191, 131, 0.05)),
    rgba(11, 16, 27, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(243, 220, 178, 0.2),
    0 10px 26px rgba(0, 0, 0, 0.5),
    0 6px 20px rgba(228, 191, 131, 0.16);
}
.tnbr-js .action-button:hover::after,
.tnbr-js .gam-action-button:hover::after {
  transform: translateX(130%);
}
.action-button:active,
.gam-action-button:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}
/* "done" = tarnished-gilt wax seal, never green */
.action-button.done {
  border-color: var(--gold-line);
  background: linear-gradient(180deg, rgba(185, 162, 94, 0.16), rgba(110, 43, 43, 0.10)), rgba(9, 13, 22, 0.7);
  color: var(--gold-bright);
}
.action-button.done::before {
  content: "❧";
  margin-right: 0.45em;
  color: var(--oxblood-bright);
  opacity: 0.9;
}

/* Ghost buttons → engraved hairline, gilt on hover */
.ghost-button,
.gam-ghost-button {
  position: relative;
  border: 1px solid var(--gold-faint);
  background: rgba(255, 255, 255, 0.015);
  color: var(--text-soft);
  transition:
    color 200ms var(--tnbr-ease),
    border-color 200ms var(--tnbr-ease),
    background-color 200ms var(--tnbr-ease),
    transform 200ms var(--tnbr-ease);
}
.ghost-button:hover,
.gam-ghost-button:hover {
  color: var(--gold-bright);
  border-color: var(--gold-line);
  background: rgba(228, 191, 131, 0.06);
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------------------
   2. GATE SUMMARIES — the core ritual surface, given an illuminated treatment
   --------------------------------------------------------------------------- */
details > summary {
  position: relative;
  border-radius: 10px;
  padding-left: 0.85rem;
  transition: background-color 200ms var(--tnbr-ease), padding-left 200ms var(--tnbr-ease), color 200ms var(--tnbr-ease);
}
details > summary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  bottom: 0.35em;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-line), transparent);
  opacity: 0;
  transition: opacity 220ms var(--tnbr-ease);
}
details > summary:hover {
  background: linear-gradient(90deg, rgba(228, 191, 131, 0.07), transparent 70%);
  padding-left: 1.05rem;
  color: var(--gold-bright);
}
details > summary:hover::before { opacity: 1; }
details[open] > summary::before { opacity: 0.55; }

/* ---------------------------------------------------------------------------
   3. CARDS / PANELS — lift + gilt edge on hover (no more flat rectangles)
   --------------------------------------------------------------------------- */
.tnbr-lift {
  transition: transform 260ms var(--tnbr-ease), box-shadow 260ms var(--tnbr-ease), border-color 260ms var(--tnbr-ease);
  will-change: transform;
}
.tnbr-lift:hover {
  transform: translateY(-3px);
  border-color: var(--gold-line);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42), 0 0 0 1px var(--gold-faint);
}

/* ---------------------------------------------------------------------------
   4. SCROLL REVEALS — only active when JS says motion is allowed
   --------------------------------------------------------------------------- */
.tnbr-js .tnbr-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 720ms var(--tnbr-ease), transform 720ms var(--tnbr-ease);
}
.tnbr-js .tnbr-reveal.tnbr-in {
  opacity: 1;
  transform: none;
}

/* Candlelight cursor glow (hero) — element positioned by tenebrist.js */
#tnbr-candle {
  position: fixed;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, var(--candle), transparent 68%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 600ms ease;
  mix-blend-mode: screen;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) #tnbr-candle { display: none; }
}

/* ============================================================================
   M17 — illuminated index: the sidebar nav as a numbered table of contents
   ========================================================================== */
.sidebar-nav { counter-reset: tnbr-idx; }
.sidebar-nav a {
  position: relative;
  counter-increment: tnbr-idx;
  transition: color 200ms var(--tnbr-ease);
}
/* right-aligned section numeral (engraved serif, faint gold) */
.sidebar-nav a::after {
  content: counter(tnbr-idx, upper-roman);
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif, "KaTeX_Main", Georgia, serif);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(228, 191, 131, 0.34);
  pointer-events: none;
  transition: color 200ms var(--tnbr-ease);
}
.sidebar-nav a:hover { color: var(--gold-bright); }
.sidebar-nav a:hover::after { color: rgba(228, 191, 131, 0.6); }
/* active room → gilt + a gold marker rule */
.sidebar-nav a.active { color: var(--gold-bright); }
.sidebar-nav a.active::after { color: var(--gold-bright); }
.sidebar-nav a.active::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 22%;
  bottom: 22%;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-line));
  box-shadow: 0 0 8px rgba(228, 191, 131, 0.4);
}

/* ============================================================================
   M9 — microinteractions: consistent gilt focus-visible ring (craft + a11y)
   ========================================================================== */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.tnbr-cl:focus-visible {
  outline: 2px solid var(--gold, #e4bf83);
  outline-offset: 2px;
  border-radius: 4px;
}
/* keep keyboard users' ring, but don't double-ring mouse clicks */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible) { outline: none; }

/* ============================================================================
   M3 — Torn-paper deckled seams + display-serif section subtitles
   ========================================================================== */

/* Shared deckled-edge asset: one reusable torn top+bottom clip-path.
   Scales with the element, so it serves chips AND large ivory insets (M2/M4). */
:root {
  --tnbr-deckle: polygon(
    0% 7%, 8% 1%, 16% 6%, 25% 2%, 33% 7%, 42% 2%, 50% 6%, 58% 2%, 67% 7%, 75% 2%, 84% 6%, 92% 1%, 100% 7%,
    100% 93%, 92% 99%, 84% 94%, 75% 98%, 67% 93%, 58% 98%, 50% 94%, 42% 98%, 33% 93%, 25% 98%, 16% 94%, 8% 99%, 0% 93%
  );
}

/* Reusable ivory manuscript surface with torn edges (the "paper artifact"). */
.tnbr-paper {
  background:
    radial-gradient(120% 140% at 30% 0%, #f3ecda, #e7ddc6 70%, #ddd2b6) ;
  color: #2a2417;
  -webkit-clip-path: var(--tnbr-deckle);
  clip-path: var(--tnbr-deckle);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.38);
}

/* Section eyebrow → small torn manuscript tab (ink on aged ivory). */
.section-title .eyebrow {
  display: inline-block;
  background:
    radial-gradient(120% 160% at 30% 0%, #f3ecda, #e6dcc4 75%, #d9ceb0) !important;
  color: #2c2517 !important;
  letter-spacing: 0.16em;
  font-weight: 700;
  padding: 0.32em 0.9em 0.4em;
  margin-bottom: 0.5rem;
  -webkit-clip-path: var(--tnbr-deckle);
  clip-path: var(--tnbr-deckle);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.34);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Section title → italic high-contrast serif, gilt, with swash + engraved rule. */
.section-title h3 {
  font-family: var(--serif, "KaTeX_Main", Georgia, serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.12;
  color: var(--gold-bright);
  letter-spacing: 0.01em;
  position: relative;
  margin: 0.1rem 0 0.2rem;
  text-shadow: 0 1px 10px rgba(228, 191, 131, 0.12);
}
.section-title h3::before {
  content: "\2767"; /* rotated floral heart / fleuron */
  font-style: normal;
  color: var(--gold);
  opacity: 0.78;
  margin-right: 0.5rem;
  font-size: 0.82em;
}
.section-title h3::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 0.55rem;
  max-width: 320px;
  background: linear-gradient(90deg, var(--gold-line), rgba(228, 191, 131, 0.05) 78%, transparent);
}

/* Deckled BAND seam helper for M2 cover↔content edges (ready to apply). */
.tnbr-seam-bottom { -webkit-clip-path: var(--tnbr-deckle); clip-path: var(--tnbr-deckle); }

/* ============================================================================
   M4 — Gate-interior craft: opening a gate = unsealing an illuminated leaf
   ========================================================================== */

/* The gate title row stays on the dark ground, gilt + serif, engraved rule. */
.roadmap-gate > summary { padding: 0.7rem 0.9rem; border-bottom: 1px solid transparent; }
.roadmap-gate[open] > summary {
  border-bottom: 1px solid var(--gold-line);
  background: linear-gradient(90deg, rgba(228, 191, 131, 0.06), transparent 75%);
}
.roadmap-gate > summary strong {
  font-family: var(--serif, "KaTeX_Main", Georgia, serif);
  font-style: italic;
  font-weight: 500;
  color: var(--gold-bright);
  letter-spacing: 0.01em;
}
.roadmap-gate > summary small { color: var(--gold); opacity: 0.72; letter-spacing: 0.04em; }
.roadmap-gate-status.is-open { color: var(--gold); }

/* The body becomes an aged-ivory manuscript leaf with a torn upper edge. */
.roadmap-gate[open] > .roadmap-gate-body {
  position: relative;
  margin: 0.7rem 0.4rem 0.4rem;
  padding: 1.1rem clamp(1rem, 2.2vw, 1.5rem) 1.15rem;
  background: radial-gradient(135% 130% at 22% 0%, #efe8d6, #e7ddc6 68%, #d9cdb0);
  color: #2a2417;
  border-radius: 0 0 7px 7px;
  box-shadow: inset 0 0 70px rgba(120, 92, 44, 0.14), 0 16px 34px rgba(0, 0, 0, 0.46);
}
/* torn ivory strip at the join (reuses the shared deckle) */
.roadmap-gate[open] > .roadmap-gate-body::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -7px;
  height: 15px;
  background: radial-gradient(135% 400% at 22% 100%, #efe8d6, #e3d9c0);
  -webkit-clip-path: var(--tnbr-deckle);
  clip-path: var(--tnbr-deckle);
}
/* ink the inner text; links become oxblood (readable on ivory) */
.roadmap-gate-body,
.roadmap-gate-body p,
.roadmap-gate-body li,
.roadmap-gate-body strong,
.roadmap-gate-body small,
.roadmap-gate-body pre { color: #2a2417 !important; }
.roadmap-gate-body .panel-label { color: #6b5326 !important; letter-spacing: 0.14em; }
.roadmap-gate-body a { color: #6e2b2b !important; text-decoration-color: rgba(110, 43, 43, 0.4); }
.roadmap-gate-body a:hover { color: #8f3a36 !important; }
.roadmap-gate-body pre {
  background: rgba(70, 50, 20, 0.07);
  border: 1px solid rgba(110, 84, 38, 0.22);
  border-radius: 5px;
}
/* a manuscript "margin" rule down the left of each block */
.roadmap-gate-body .roadmap-gate-block { border-left: 2px solid rgba(110, 84, 38, 0.22); padding-left: 0.7rem; }
.roadmap-gate-body .roadmap-note-fold > summary { color: #6b5326 !important; }

/* Completion → an oxblood WAX SEAL, not a button. */
.roadmap-gate > .action-button,
.roadmap-gate[open] > .roadmap-gate-body > .action-button {
  background: radial-gradient(circle at 38% 30%, #9a3b36, #6e2b2b 58%, #531f1f) !important;
  border: 1px solid rgba(143, 58, 54, 0.7) !important;
  color: #f3dcb2 !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(243, 220, 178, 0.25), 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(110, 43, 43, 0.12) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
.roadmap-gate > .action-button::before,
.roadmap-gate .roadmap-gate-body > .action-button::before {
  content: "❦ ";
  color: #f3dcb2;
  opacity: 0.85;
}
.roadmap-gate > .action-button:hover { transform: translateY(-2px); }
.roadmap-gate > .action-button.done {
  background: radial-gradient(circle at 38% 30%, #6e2b2b, #4f1e1e 60%) !important;
  color: var(--gold-bright) !important;
}

/* ============================================================================
   M2 — per-room covers: a candlelit Old-Master plate + giant engraved wordmark
   ========================================================================== */
.tnbr-cover {
  position: relative;
  margin: -0.2rem 0 1.6rem;
  min-height: clamp(300px, 42vh, 480px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  border: 1px solid var(--gold-faint);
  border-bottom: none;
  isolation: isolate;
  background-color: #060b15;
}
/* the plate */
.tnbr-cover::before {
  content: "";
  position: absolute;
  inset: -4%;
  z-index: -2;
  background-image: var(--tnbr-plate);
  background-size: cover;
  background-position: var(--tnbr-pos, 50% 32%);
  transform: translate3d(var(--tnbr-px, 0), var(--tnbr-py, 0), 0) scale(1.06);
  will-change: transform;
}
/* tenebrist legibility wash + edge vignette (cropped figures fall into shadow,
   period-correct, and hides the hard crop on a wide band). */
.tnbr-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 11, 21, 0.62) 0%, transparent 24%),
    linear-gradient(270deg, rgba(6, 11, 21, 0.5) 0%, transparent 20%),
    linear-gradient(90deg, rgba(6, 11, 21, 0.92) 0%, rgba(6, 11, 21, 0.5) 42%, rgba(6, 11, 21, 0.08) 80%),
    linear-gradient(0deg, rgba(6, 11, 21, 0.95) 2%, rgba(6, 11, 21, 0.25) 38%, transparent 66%);
}
.tnbr-cover-inner {
  position: relative;
  padding: clamp(1.1rem, 2.6vw, 2rem) clamp(1.2rem, 3vw, 2.4rem) clamp(1.1rem, 2.4vw, 1.8rem);
  max-width: 70%;
}
.tnbr-cover-eyebrow {
  display: inline-block;
  margin: 0 0 0.55rem;
  padding: 0.3em 0.85em 0.38em;
  background: radial-gradient(120% 160% at 30% 0%, #f3ecda, #e6dcc4 75%, #d9ceb0);
  color: #2c2517;
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  font-size: 0.74rem;
  -webkit-clip-path: var(--tnbr-deckle);
  clip-path: var(--tnbr-deckle);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.tnbr-cover-word {
  margin: 0;
  font-family: var(--serif, "KaTeX_Main", Georgia, serif);
  font-weight: 500;
  font-size: clamp(4rem, 14vw, 12rem);
  line-height: 0.92;
  letter-spacing: -0.015em;
  color: var(--gold-bright);
  text-shadow: 0 2px 34px rgba(0, 0, 0, 0.66), 0 0 70px rgba(228, 191, 131, 0.14);
}
.tnbr-cover-sub {
  margin: 0.6rem 0 0;
  max-width: 42ch;
  font-family: var(--serif, "KaTeX_Main", Georgia, serif);
  font-style: italic;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  color: var(--text-soft, #d4dde9);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}
.tnbr-cover-glyph {
  position: absolute;
  right: clamp(1rem, 3vw, 2.6rem);
  top: clamp(0.6rem, 2vw, 1.4rem);
  font-family: var(--serif, "KaTeX_Main", Georgia, serif);
  font-size: clamp(4rem, 11vw, 9rem);
  line-height: 1;
  color: var(--gold);
  opacity: 0.22;
  text-shadow: 0 0 40px rgba(228, 191, 131, 0.25);
}
.tnbr-embers { position: absolute; inset: 0; pointer-events: none; }
/* torn manuscript seam where the cover meets the content band (Shopify device) */
.tnbr-cover-tear {
  position: absolute;
  left: -1px; right: -1px;
  bottom: -1px;
  height: 16px;
  z-index: 2;
  background: radial-gradient(140% 380% at 50% 0%, #efe8d6, #e3d9c0 70%, #d6cab0);
  box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.4);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 38%, 95% 100%, 90% 44%, 85% 92%, 80% 40%, 75% 100%, 70% 46%, 65% 90%, 60% 42%, 55% 100%, 50% 44%, 45% 92%, 40% 40%, 35% 100%, 30% 46%, 25% 90%, 20% 42%, 15% 100%, 10% 44%, 5% 92%, 0 40%);
  clip-path: polygon(0 0, 100% 0, 100% 38%, 95% 100%, 90% 44%, 85% 92%, 80% 40%, 75% 100%, 70% 46%, 65% 90%, 60% 42%, 55% 100%, 50% 44%, 45% 92%, 40% 40%, 35% 100%, 30% 46%, 25% 90%, 20% 42%, 15% 100%, 10% 44%, 5% 92%, 0 40%);
}

@media (max-width: 720px) {
  .tnbr-cover { min-height: 230px; }
  .tnbr-cover-inner { max-width: 100%; }
  .tnbr-cover-word { font-size: clamp(3rem, 19vw, 5.5rem); }
  .tnbr-cover-glyph { opacity: 0.14; font-size: 5rem; }
}

/* ============================================================================
   M8 — hero painting↔constellation dissolve (overview; injected by tenebrist.js)
   The Orrery plate sits over the constellation canvas and dissolves on scroll
   (opacity + eroding radial mask + blur + scale), revealing the star-cloud.
   Only injected when motion is allowed; reduced-motion keeps the bare hero.
   ========================================================================== */
.hero-canvas { display: none; }
.tnbr-hero-plate {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--tnbr-plate) 50% 38% / cover no-repeat;
  opacity: var(--tnbr-hero-op, 1);
  filter: blur(var(--tnbr-hero-blur, 0px)) brightness(1.02) saturate(1);
  transform: scale(var(--tnbr-hero-scale, 1));
  transform-origin: 50% 42%;
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 var(--tnbr-hero-mask, 78%), transparent calc(var(--tnbr-hero-mask, 78%) + 16%));
  mask-image: radial-gradient(circle at 50% 42%, #000 var(--tnbr-hero-mask, 78%), transparent calc(var(--tnbr-hero-mask, 78%) + 16%));
  will-change: opacity, transform, filter;
}
/* tenebrist wash so the hero headline/CTAs stay legible over the painting */
.tnbr-hero-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 11, 21, 0.55) 0%, transparent 22%),
    linear-gradient(270deg, rgba(6, 11, 21, 0.42) 0%, transparent 18%),
    linear-gradient(90deg, rgba(6, 11, 21, 0.86) 0%, rgba(6, 11, 21, 0.42) 46%, rgba(6, 11, 21, 0.06) 82%),
    linear-gradient(0deg, rgba(6, 11, 21, 0.9) 0%, rgba(6, 11, 21, 0.2) 46%, transparent 70%);
}

/* ============================================================================
   M5 — archive constellation topic-map ("Index Stellarum"); replaces default charts
   ========================================================================== */
.chart-grid.tnbr-sky-on { display: block; }
.chart-grid.tnbr-sky-on > .chart-card { display: none; }   /* hide default donut + bars */
.tnbr-archive-sky {
  margin: 0;
  padding: 0.4rem 0.2rem 0.6rem;
  border-radius: 12px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(228, 191, 131, 0.04), transparent 60%);
}
.tnbr-archive-sky figcaption {
  font-family: var(--serif, "KaTeX_Main", Georgia, serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  color: var(--gold-bright);
  text-align: center;
  margin-bottom: 0.4rem;
}
.tnbr-archive-sky svg { width: 100%; height: auto; display: block; }
.tnbr-cl { cursor: pointer; outline: none; }
.tnbr-cl-halo { transition: stroke-width 200ms var(--tnbr-ease), fill 200ms var(--tnbr-ease); }
.tnbr-cl-name {
  font-family: var(--serif, "KaTeX_Main", Georgia, serif);
  font-style: italic;
  font-size: 15px;
  fill: var(--gold-bright);
}
.tnbr-cl-meta { font-size: 11px; letter-spacing: 0.08em; fill: rgba(228, 191, 131, 0.62); }
.tnbr-cl:hover .tnbr-cl-halo,
.tnbr-cl:focus-visible .tnbr-cl-halo { stroke-width: 2.2; fill: rgba(228, 191, 131, 0.26); }
.tnbr-cl:focus-visible { outline: none; }
/* selected-state grammar */
.tnbr-has-sel .tnbr-cl:not(.is-sel) { opacity: 0.34; transition: opacity 220ms var(--tnbr-ease); }
.tnbr-cl.is-sel .tnbr-cl-halo { stroke-width: 2.4; fill: rgba(143, 58, 54, 0.28); stroke: var(--oxblood-bright); }
.tnbr-cl.is-sel .tnbr-cl-name { fill: #fff; }