/* ============================================================
   THE FURY OF THE STAG — a Robert Baratheon fan site
   Palette:
     --storm-black : #14110C  (night over Shipbreaker Bay)
     --iron        : #3E382E  (forged plate)
     --gold        : #C89B2E  (Baratheon field)
     --gold-bright : #E8C15A  (lightning gold)
     --parchment   : #E4D6B0  (maester's page)
     --blood       : #7E2A1C  (the Trident ran red)
   Type: Cinzel (display), EB Garamond (body)
   ============================================================ */

:root {
  --storm-black: #14110c;
  --iron: #3e382e;
  --iron-line: #55503f;
  --gold: #c89b2e;
  --gold-bright: #e8c15a;
  --parchment: #e4d6b0;
  --parchment-dim: #b9ad8c;
  --blood: #7e2a1c;
  --maxw: 62rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
/* The banner is sticky and 70px tall, so an anchor jump would otherwise land
   the target underneath it — clicking a battle on the campaign map dropped
   you below its title, and the skip link buried the top of every page.
   scroll-padding on the scrolling element fixes every anchor at once,
   including any added later, and leaves a little air above the target. */
html { scroll-padding-top: 5.75rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  background: var(--storm-black);
  color: var(--parchment);
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.7;
}

/* ---------- Banner navigation ---------- */
.banner {
  border-bottom: 1px solid var(--iron-line);
  background: linear-gradient(180deg, rgba(20,17,12,.98), rgba(20,17,12,.92));
  position: sticky;
  top: 0;
  z-index: 10;
}
.banner-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: .9rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: nowrap;
}
.sigil-mark { flex: 0 0 auto; }
.site-name {
  font-family: "Cinzel", serif;
  font-weight: 700;
  letter-spacing: .13em;
  font-size: .85rem;
  white-space: nowrap;
  color: var(--gold);
  text-transform: uppercase;
  margin-right: auto;
}
/* ---------- Banner navigation: brand link + grouped dropdowns ---------- */
.brand {
  display: flex;
  align-items: center;
  gap: .85rem;
  text-decoration: none;
  margin-right: auto;
  border-radius: 2px;
  transition: filter .2s;
}
.brand:hover { filter: brightness(1.12); }
.brand:hover .site-name { color: var(--gold-bright); }
.brand:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }
.brand .site-name { transition: color .2s; }

nav.menu { display: flex; gap: .35rem; flex-wrap: nowrap; white-space: nowrap; }

.nav-group { position: relative; }
.nav-group-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: "Cinzel", serif;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  background: none;
  border: 0;
  padding: .5rem .75rem;
  cursor: pointer;
  transition: color .2s;
}
.nav-group-btn:hover, .nav-group.open .nav-group-btn { color: var(--gold-bright); }
.nav-group-btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.nav-group.current .nav-group-btn { color: var(--gold); }
.caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  opacity: .75;
  transition: transform .2s;
}
.nav-group.open .caret { transform: rotate(180deg); }

.nav-drop {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  background: rgba(18,15,11,.985);
  border: 1px solid var(--iron-line);
  box-shadow: 0 14px 30px rgba(0,0,0,.6);
  padding: .3rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 60;
}
.nav-group.open .nav-drop,
.nav-group:hover .nav-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease;
}
nav.menu a {
  font-family: "Cinzel", serif;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--parchment-dim);
  padding: .62rem 1.1rem;
  border-left: 3px solid transparent;
  transition: color .2s, border-color .2s, background-color .2s;
}
nav.menu a:hover { color: var(--gold-bright); background: rgba(200,155,46,.08); }
nav.menu a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -2px; }
nav.menu a.active { color: var(--gold); border-left-color: var(--gold); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 6.5rem 1.25rem 5.5rem;
  border-bottom: 1px solid var(--iron-line);
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(200,155,46,.14), transparent 60%),
    radial-gradient(ellipse 100% 70% at 50% 115%, rgba(126,42,28,.18), transparent 60%),
    var(--storm-black);
}
.hero .antlers { margin: 0 auto 2rem; display: block; }
.hero h1 {
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  letter-spacing: .08em;
  color: var(--parchment);
  text-transform: uppercase;
  line-height: 1.15;   /* Thrones caps are full-em; 1.1 crowds wrapped titles */
}
.hero h1 .gold { color: var(--gold); }
.hero .motto {
  margin-top: 1.4rem;
  font-family: "Cinzel", serif;
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  letter-spacing: .55em;
  text-indent: .55em;
  color: var(--gold-bright);
  text-transform: uppercase;
  animation: flicker 4.5s ease-in-out 1;
}
.hero .sub {
  margin: 1.6rem auto 0;
  max-width: 38rem;
  color: var(--parchment-dim);
  font-style: italic;
  font-size: 1.2rem;
}
@keyframes flicker {
  0%, 100% { opacity: 1; }
  6% { opacity: .35; }
  9% { opacity: 1; }
  11% { opacity: .5; }
  14% { opacity: 1; }
}

/* Page hero (interior pages, smaller) */
.hero.small { padding: 4rem 1.25rem 3.25rem; }
.hero .eyebrow {
  font-family: "Cinzel", serif;
  font-size: .75rem;
  letter-spacing: .4em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* ---------- Layout ---------- */
main { max-width: var(--maxw); margin: 0 auto; padding: 3.5rem 1.25rem 5rem; }
section + section { margin-top: 4rem; }

h2 {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--iron-line), transparent);
}
h3 {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .08em;
  color: var(--parchment);
  margin: 1.8rem 0 .6rem;
}
p + p { margin-top: 1rem; }
em { color: var(--gold-bright); font-style: italic; }
a.inline { color: var(--gold-bright); }

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
.card {
  border: 1px solid var(--iron-line);
  padding: 1.6rem 1.4rem;
  background: linear-gradient(180deg, rgba(200,155,46,.05), transparent 55%);
  text-decoration: none;
  color: var(--parchment);
  transition: border-color .2s, transform .2s;
}
.card:hover { border-color: var(--gold); transform: translateY(-3px); }
.card:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.card .card-title {
  font-family: "Cinzel", serif;
  font-size: 1rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .6rem;
  display: block;
}
.card p { color: var(--parchment-dim); font-size: 1.02rem; }

/* ---------- Fact table ---------- */
.fact-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  font-size: 1.05rem;
}
.fact-table th, .fact-table td {
  text-align: left;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--iron-line);
  vertical-align: top;
}
.fact-table th {
  font-family: "Cinzel", serif;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  width: 12rem;
}

/* ---------- Battle timeline (chronology: order is the information) ---------- */
.timeline { margin-top: 2.5rem; position: relative; padding-left: 2.4rem; }
.timeline::before {
  content: "";
  position: absolute;
  left: .55rem;
  top: .4rem;
  bottom: .4rem;
  width: 2px;
  background: linear-gradient(180deg, var(--gold), var(--blood));
}
.battle { position: relative; padding-bottom: 3rem; }
.battle:last-child { padding-bottom: 0; }
.battle::before {
  content: "";
  position: absolute;
  left: -2.4rem;
  top: .45rem;
  width: 1.2rem;
  height: 1.2rem;
  transform: translateX(.02rem) rotate(45deg);
  background: var(--storm-black);
  border: 2px solid var(--gold);
}
.battle.defeat::before { border-color: var(--blood); }
.battle .when {
  font-family: "Cinzel", serif;
  font-size: .75rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--parchment-dim);
}
.battle h3 { margin-top: .3rem; font-size: 1.35rem; color: var(--gold-bright); }
.battle .verdict {
  display: inline-block;
  margin: .5rem 0 .8rem;
  font-family: "Cinzel", serif;
  font-size: .72rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  padding: .25rem .7rem;
  border: 1px solid var(--gold);
  color: var(--gold);
}
.battle.defeat .verdict { border-color: var(--blood); color: #c9573f; }

/* ---------- Pull quote / motto block ---------- */
.fury-block {
  margin: 3rem 0;
  padding: 2.2rem 1.5rem;
  text-align: center;
  border-top: 1px solid var(--iron-line);
  border-bottom: 1px solid var(--iron-line);
}
.fury-block .words {
  font-family: "Cinzel", serif;
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  color: var(--gold);
}
.fury-block .attribution {
  margin-top: .8rem;
  color: var(--parchment-dim);
  font-style: italic;
}

/* "Hear it from the king" — Robert's own account of a battle, tucked under
   the factual one. Styled to feel like the man himself leaning in over a
   horn of ale: warmer, first-person, set off from the record above it. */
.recollection-toggle {
  margin-top: 1.1rem;
  padding: .45rem 1.1rem;
  font-family: "Cinzel", serif;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  border: 1px solid rgba(200,155,46,.35);
  border-radius: 3px;
  cursor: pointer;
  transition: color .25s ease, background .25s ease, border-color .25s ease;
}
.recollection-toggle:hover,
.recollection-toggle:focus-visible {
  color: var(--storm-black);
  background: var(--gold);
  border-color: var(--gold-bright);
}
.recollection-toggle:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.recollection {
  margin-top: 1.2rem;
  padding: 1.3rem 1.5rem;
  border-left: 3px solid var(--gold);
  background: linear-gradient(90deg, rgba(200,155,46,.07), transparent 85%);
  border-radius: 0 4px 4px 0;
}
.recollection[hidden] { display: none; }
.recollection-label {
  margin: 0 0 .5rem;
  font-family: "Cinzel", serif;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.recollection p:not(.recollection-label) {
  margin: 0;
  font-family: "IM Fell English", Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--parchment);
}
.battle.defeat .recollection { border-left-color: var(--blood); }
.battle.defeat .recollection-label { color: #c9573f; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--iron-line);
  padding: 2.5rem 1.25rem;
  text-align: center;
  color: var(--parchment-dim);
  font-size: .95rem;
}
footer .foot-motto {
  font-family: "Cinzel", serif;
  letter-spacing: .35em;
  text-indent: .35em;
  text-transform: uppercase;
  font-size: .8rem;
  color: var(--gold);
  margin-bottom: .8rem;
}

@media (max-width: 640px) {
  .banner-inner { gap: .75rem; }
  nav.menu { gap: .9rem; }
  main { padding-top: 2.5rem; }
}

/* ---------- Family tree ---------- */
.tree-scroll {
  overflow-x: auto;
  padding: 1rem 0 2rem;
  -webkit-overflow-scrolling: touch;
}
/* width:max-content ensures the scroll container measures the full tree,
   so nothing is clipped off the left edge when the tree is wider than the page */
.tree { width: max-content; min-width: 100%; }
.tree ul {
  display: flex;
  justify-content: center;
  padding-top: 1.7rem;
  position: relative;
  list-style: none;
}
.tree li {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 1.7rem .45rem 0;
}
.tree li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 1.7rem;
  background: var(--iron-line);
}
.tree li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--iron-line);
}
.tree li:first-child::after { left: 50%; }
.tree li:last-child::after { right: 50%; }
.tree li:only-child::after { display: none; }
.tree > ul { padding-top: 0; }
.tree > ul > li { padding-top: 0; }
.tree > ul > li::before, .tree > ul > li::after { display: none; }
.tree .drop {
  width: 1px;
  height: 1.7rem;
  background: var(--iron-line);
}

/* person + couple nodes — compact */
.couple { display: flex; align-items: stretch; gap: .35rem; }
.couple .knot {
  align-self: center;
  font-family: "Cinzel", serif;
  color: var(--gold);
  font-size: .8rem;
}
.person {
  border: 1px solid var(--gold);
  background: linear-gradient(180deg, rgba(200,155,46,.08), rgba(20,17,12,.6));
  padding: .55rem .65rem;
  width: 8.4rem;
  text-align: center;
}
.person .p-name {
  display: block;
  font-family: "Cinzel", serif;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--parchment);
  line-height: 1.35;
}
.person .p-note {
  display: block;
  margin-top: .3rem;
  font-size: .78rem;
  font-style: italic;
  color: var(--parchment-dim);
  line-height: 1.35;
}
.person.royal { border-width: 2px; border-color: var(--gold-bright); }
.person.royal .p-name { color: var(--gold-bright); }
.person.spouse { border-color: var(--iron-line); background: rgba(20,17,12,.55); }
.person.lannister { border-color: var(--blood); background: linear-gradient(180deg, rgba(126,42,28,.14), rgba(20,17,12,.6)); }
.person.bastard { border-style: dashed; border-color: var(--parchment-dim); }

/* legend */
/* Legend and zoom controls share one bar above the canvas. Below the tree
   it was invisible in fullscreen; floating over the tree it covered nodes
   wherever you panned. In the toolbar it is always visible, covers nothing,
   and comes along into fullscreen because the bar sits inside #tree-wrap. */
/* The whole tree widget — toolbar and canvas — needs air between it and the
   prose above. Set on the wrap rather than the bar so the gap holds whatever
   precedes it, and reset in fullscreen where there is nothing above. */
#tree-wrap { margin-top: 3.2rem; }
#tree-wrap:fullscreen, #tree-wrap:-webkit-full-screen,
#tree-wrap.fs-fallback { margin-top: 0; }
.tree-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem 1.2rem;
  margin-bottom: 1rem;
}
.tree-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1.05rem;
  margin: 0;
  font-size: .8rem;
  line-height: 1.2;
  color: var(--parchment-dim);
}
.tree-legend .key {
  display: inline-block;
  width: 1.05rem;
  height: 1.05rem;
  margin-right: .45rem;
  vertical-align: -3px;
  border: 1px solid var(--gold);
  /* Mirror the node FILLS, not just their borders. The tree tells "other
     house" and "baseborn" apart by background — one flat and dark, one
     gold-tinted — and a key that copied only the border left them as two
     dim outlines separated by a dash pattern too small to read. Fills are
     a touch stronger here than on the cards: a 17px swatch needs more
     contrast than a 134px one to say the same thing. */
  background: linear-gradient(180deg, rgba(200,155,46,.20), rgba(20,17,12,.6));
}
.tree-legend .key.k-royal { border: 2px solid var(--gold-bright); }
.tree-legend .key.k-spouse {
  border-color: var(--iron-line);
  background: rgba(12,10,7,.92);          /* flat and empty, as on the card */
}
.tree-legend .key.k-lann {
  border-color: var(--blood);
  background: linear-gradient(180deg, rgba(126,42,28,.34), rgba(20,17,12,.6));
}
.tree-legend .key.k-bastard {
  border-style: dashed;
  border-color: var(--parchment-dim);
  /* keeps the gold wash: baseborn is still Robert's blood */
}

.scroll-hint {
  display: none;
  font-size: .85rem;
  color: var(--parchment-dim);
  font-style: italic;
  margin-bottom: .5rem;
}
@media (max-width: 1000px) {
  .scroll-hint { display: block; }
}

/* ---------- Ancestry (converging lines above the root couple) ---------- */
.tree { display: flex; flex-direction: column; align-items: center; }
.ancestry { display: flex; justify-content: center; gap: 1.6rem; }
.anc-col { display: flex; flex-direction: column; align-items: center; }
.drop.dashed {
  width: 0;
  background: none;
  border-left: 1px dashed var(--iron-line);
  height: 1.1rem;
}
.desc-label {
  font-size: .72rem;
  font-style: italic;
  color: var(--parchment-dim);
  text-align: center;
  max-width: 9.5rem;
  line-height: 1.3;
  padding: .15rem 0;
}

/* ---------- Sigil roundel (user-provided artwork) ---------- */
img.sigil-mark {
  height: 40px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 6px rgba(200,155,46,.35));
}

/* ============================================================
   MEDIEVAL DRESSING — grain, vignette, illumination, ornament
   ============================================================ */

@font-face {
  font-family: "Thrones";
  src: url("../fonts/GameOfThrones.ttf") format("truetype");
  font-display: swap;
}
/* Aged-print body type; display faces for headings */
body {
  font-family: "IM Fell English", "EB Garamond", Georgia, serif;
}

/* Candlelit vignette + film grain over everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background:
    radial-gradient(ellipse 130% 100% at 50% 40%, transparent 62%, rgba(0,0,0,.30) 100%),
    url("../images/grain.png") repeat;
}

/* Headings: engraved, letterpress depth */
.hero h1, .cine-hero h1 {
  font-family: "Cinzel Decorative", "Cinzel", serif;
  text-shadow: 0 2px 0 rgba(0,0,0,.85), 0 0 34px rgba(200,155,46,.22);
}
h2 {
  font-family: "Thrones", "Cinzel Decorative", "Cinzel", serif;
  font-weight: 400;
  text-shadow: 0 1px 0 rgba(0,0,0,.8);
}
h2::before {
  content: "❖";
  font-size: .55em;
  color: var(--gold);
  opacity: .8;
}

/* Ornamental flourish between sections */
main section + section::before {
  content: "◆ ❖ ◆";
  display: block;
  text-align: center;
  color: var(--gold);
  opacity: .45;
  letter-spacing: 1.2em;
  text-indent: 1.2em;
  font-size: .7rem;
  margin: -2.4rem 0 2.4rem;
}

/* Illuminated drop caps on the first paragraph after a heading */
main section h2 + p::first-letter,
.chapter-inner h2 + p::first-letter {
  font-family: "Cinzel Decorative", "Cinzel", serif;
  float: left;
  font-size: 3.4em;
  line-height: .82;
  padding: .08em .12em .02em 0;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(200,155,46,.35);
}

/* Panels: double frame, like bound plates */
.card, .person, .stat {
  outline: 1px solid rgba(200,155,46,.22);
  outline-offset: -6px;
}
.fury-block {
  position: relative;
  outline: 1px solid rgba(200,155,46,.18);
  outline-offset: -8px;
}
.fury-block::before, .fury-block::after {
  content: "❖";
  position: absolute;
  color: var(--gold);
  opacity: .6;
  font-size: .8rem;
  top: 50%;
  transform: translateY(-50%);
}
.fury-block::before { left: 1.1rem; }
.fury-block::after { right: 1.1rem; }

/* Tables: vellum striping */
.fact-table tr:nth-child(odd) td { background: rgba(200,155,46,.035); }

/* Links & buttons: forged edges */
.chapter .cta, nav.menu a.active {
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
}
.chapter .cta {
  outline: 1px solid rgba(200,155,46,.25);
  outline-offset: -5px;
}

/* "Show me someone at random" — sits under the stats intro. Ghosted outline
   rather than a solid fill, so it reads as a playful aside to the numbers
   above it, not a sixth call-to-action competing with them. */
.random-cta {
  display: inline-block;
  margin-top: 1.4rem;
  padding: .6rem 1.5rem;
  font-family: "Cinzel", serif;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-decoration: none;
  border: 1px solid rgba(200,155,46,.4);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(200,155,46,.06), transparent);
  transition: border-color .3s ease, color .3s ease, background .3s ease, transform .2s ease;
}
.random-cta:hover, .random-cta:focus-visible {
  color: var(--storm-black);
  background: var(--gold);
  border-color: var(--gold-bright);
  transform: translateY(-1px);
}
.random-cta:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.random-cta [data-random-label] { display: inline-block; min-width: 15ch; }
/* On the Court page the button sits under the intro line. It's centred on its
   own row and given room above the first house section, without disturbing the
   intro paragraph's own alignment. */
.court-random { display: block; width: max-content; margin: 1.7rem auto 0; }
@media (prefers-reduced-motion: reduce) {
  .random-cta { transition: color .3s ease, background .3s ease; }
  .random-cta:hover { transform: none; }
}

/* Interior page heroes: candle glow */
.hero.small {
  background:
    radial-gradient(ellipse 60% 80% at 50% 110%, rgba(200,155,46,.10), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(200,155,46,.12), transparent 60%),
    var(--storm-black);
}

/* Selection & scrollbar in house colors */
::selection { background: var(--gold); color: var(--storm-black); }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--storm-black); }
::-webkit-scrollbar-thumb {
  background: var(--iron);
  border: 2px solid var(--storm-black);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ---------- Relics (user-provided artifact imagery) ---------- */
.hero.small { position: relative; overflow: hidden; }
.hero-relic {
  position: absolute;
  right: 4%;
  bottom: -8%;
  height: 115%;
  width: auto;
  opacity: .8;
  pointer-events: none;
  filter: drop-shadow(0 0 30px rgba(200,155,46,.18));
}
.hero.small .eyebrow, .hero.small h1, .hero.small .sub { position: relative; z-index: 2; }
@media (max-width: 760px) {
  .hero-relic { opacity: .22; right: -10%; }
}

/* ---------- Thrones font on interior page titles ---------- */
.hero.small h1 {
  font-family: "Thrones", "Cinzel Decorative", "Cinzel", serif;
  font-weight: 400;
  letter-spacing: .06em;
}

/* The section flourish (main section + section::before) is written as a block,
   so any section that is itself a flex/grid container turns it into a LAYOUT
   ITEM rather than decoration — inside .stats it became a grid cell, and inside
   .chapter it became a flex item that pushed the content ~50px off centre. */
.stats::before { display: none !important; content: none !important; }
.chapter::before, .cine-hero::before { display: none !important; content: none !important; }

/* Stats: never clip the number */
.stat { min-width: 0; }
.stat .num { font-size: clamp(2rem, 4.2vw, 3.2rem); overflow-wrap: anywhere; }

/* Interior hero relics: quieter, never fighting the title */
.hero-relic { opacity: .55; }
@media (max-width: 1100px) { .hero-relic { opacity: .25; } }

/* ---------- Thrones font across all display text sitewide ---------- */
h3, .battle h3, .card .card-title, .fury-block .words {
  font-family: "Thrones", "Cinzel Decorative", "Cinzel", serif;
  font-weight: 400;
}
main section h2 + p::first-letter,
.chapter-inner h2 + p::first-letter {
  font-family: "Thrones", "Cinzel Decorative", "Cinzel", serif;
}

/* ============================================================
   Interactivity & UX layer
   ============================================================ */

/* Skip link (visible on keyboard focus) */
.skip {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 200;
  background: var(--gold);
  color: var(--storm-black);
  font-family: "Cinzel", serif;
  font-size: .8rem;
  letter-spacing: .15em;
  padding: .7rem 1.2rem;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* Page fade transitions */
body { animation: page-in .45s ease; }
@keyframes page-in { from { opacity: 0; } }
body.page-exit { opacity: 0; transition: opacity .2s ease; }
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
}

/* Forge-glow hovers */
nav.menu a:hover, a.inline:hover {
  color: var(--gold-bright);
  text-shadow: 0 0 12px rgba(232,193,90,.55);
}
.card:hover .card-title { text-shadow: 0 0 14px rgba(232,193,90,.5); }

/* Forge button (shared) */
.btn-forge {
  font-family: "Cinzel", serif;
  font-size: .8rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(200,155,46,.12), rgba(20,17,12,.4));
  border: 1px solid var(--gold);
  outline: 1px solid rgba(200,155,46,.25);
  outline-offset: -5px;
  padding: .95rem 1.7rem;
  cursor: pointer;
  transition: background .25s, color .25s, transform .15s, box-shadow .25s;
}
.btn-forge:hover {
  background: var(--gold);
  color: var(--storm-black);
  box-shadow: 0 0 24px rgba(200,155,46,.35);
  transform: translateY(-2px);
}
.btn-forge:active { transform: translateY(1px); }
.btn-forge:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

/* ---------- King's Cup ---------- */
main.no-drop section h2 + p::first-letter {
  float: none;
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  padding: 0;
  text-shadow: none;
}
.game-lede {
  text-align: center;
  font-style: italic;
  color: var(--parchment-dim);
}
.game-panel {
  margin-top: 2rem;
  border: 1px solid var(--iron-line);
  outline: 1px solid rgba(200,155,46,.18);
  outline-offset: -7px;
  padding: 2.6rem 1.6rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(200,155,46,.05), transparent 60%);
}
.cup-quote {
  position: relative;
  font-family: "IM Fell English", serif;
  font-style: italic;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  color: var(--gold-bright);
  max-width: 38rem;
  margin: 2.4rem auto 0;
  padding-top: 2.2rem;
  border-top: 1px solid var(--iron-line);
  line-height: 1.55;
}
.cup-quote::before {
  content: "The king speaks";
  position: absolute;
  top: -0.65rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--storm-black);
  padding: 0 1rem;
  font-family: "Cinzel", serif;
  font-style: normal;
  font-size: .68rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  white-space: nowrap;
}
.cup-quote.pour { animation: pour-in .5s ease; }
@keyframes pour-in {
  from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
}
.wwrd-stage { margin-top: 2rem; }
.wwrd-q {
  font-family: "Thrones", "Cinzel Decorative", serif;
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  color: var(--parchment);
  margin-bottom: 1.8rem;
}
.wwrd-answers { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.wwrd-verdict {
  font-family: "Thrones", "Cinzel Decorative", serif;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  color: var(--gold);
  text-shadow: 0 0 24px rgba(200,155,46,.3);
  margin-bottom: 1rem;
}
.wwrd-detail { color: var(--parchment-dim); max-width: 34rem; margin: 0 auto 1.8rem; }

/* ---------- Interactive family tree ---------- */
.tree-controls {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  flex: 0 0 auto;
  margin: 0;
}
.tree-controls button {
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.1rem;
  font-family: "Cinzel", serif;
  color: var(--gold);
  background: rgba(20,17,12,.7);
  border: 1px solid var(--gold);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.tree-controls button:hover { background: var(--gold); color: var(--storm-black); }
.tree-controls button:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.tree-scroll { cursor: grab; overflow: auto; max-height: 78vh; }
.tree-scroll.grabbing { cursor: grabbing; user-select: none; }
.person { cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.person:hover, .person:focus-visible {
  border-color: var(--gold-bright);
  box-shadow: 0 0 18px rgba(200,155,46,.35);
  transform: translateY(-2px);
  outline-offset: -6px;
}
#bio-panel {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, calc(100% + 2.5rem));
  visibility: hidden;
  z-index: 90;
  width: min(92vw, 34rem);
  background: linear-gradient(180deg, rgba(30,26,18,.98), rgba(20,17,12,.98));
  border: 1px solid var(--gold);
  outline: 1px solid rgba(200,155,46,.25);
  outline-offset: -6px;
  padding: 1.5rem 2.6rem 1.5rem 1.6rem;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), visibility 0s linear .35s;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
#bio-panel.open {
  transform: translate(-50%, 0);
  visibility: visible;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
#bio-panel h4 {
  font-family: "Thrones", "Cinzel Decorative", serif;
  font-size: 1.1rem;
  color: var(--gold);
  margin-bottom: .5rem;
}
#bio-panel p { color: var(--parchment-dim); font-size: 1.02rem; line-height: 1.6; }
/* The way onward. The name in the tree no longer navigates on its own, so
   this is the card's exit to the full page. Hidden for anyone in the tree
   who has no page of their own. */
#bio-panel .bio-more {
  display: inline-block;
  margin-top: 1.1rem;
  padding: .4rem .9rem;
  font-family: "Cinzel", serif;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-decoration: none;
  border: 1px solid rgba(200,155,46,.4);
  border-radius: 3px;
  transition: color .25s ease, background .25s ease, border-color .25s ease;
}
#bio-panel .bio-more:hover,
#bio-panel .bio-more:focus-visible {
  color: var(--storm-black);
  background: var(--gold);
  border-color: var(--gold-bright);
}
#bio-panel .bio-more:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
#bio-panel .bio-more[hidden] { display: none; }
#bio-panel .bio-close {
  position: absolute;
  top: .5rem;
  right: .6rem;
  background: none;
  border: none;
  color: var(--parchment-dim);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}
#bio-panel .bio-close:hover { color: var(--gold-bright); }

/* WWRD breadcrumb path */
.wwrd-path {
  font-family: "Cinzel", serif;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--parchment-dim);
  margin-bottom: 1.6rem;
}
.wwrd-path span { color: var(--gold); }
.wwrd-path .wwrd-depth { color: var(--parchment-dim); opacity: .65; }
/* Secondary "take back" action — present but never competing with the answers */
.btn-forge.wwrd-back {
  background: transparent;
  border-color: rgba(200,155,46,.32);
  color: var(--parchment-dim);
  font-size: .74rem;
  letter-spacing: .14em;
}
.btn-forge.wwrd-back:hover {
  border-color: var(--gold);
  color: var(--parchment);
}

/* ---------- Warhammer Smash ---------- */
.smash-panel { padding: 1.2rem 1.2rem 1rem; }
.smash-hud {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  margin-bottom: .8rem;
  font-family: "Cinzel", serif;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--parchment-dim);
}
.smash-hud strong { color: var(--gold); font-weight: 700; margin-left: .35rem; }
#smash {
  display: block;
  width: 100%;
  height: 400px;
  border: 1px solid var(--iron-line);
  background:
    radial-gradient(ellipse 90% 70% at 50% 110%, rgba(200,155,46,.08), transparent 60%),
    rgba(20,17,12,.5);
  cursor: pointer;
  touch-action: manipulation;
}
.smash-note {
  margin-top: .8rem;
  font-size: .9rem;
  font-style: italic;
  color: var(--parchment-dim);
  text-align: center;
}
@media (max-width: 640px) { #smash { height: 320px; } }

/* ---------- Warhammer Smash fullscreen ---------- */
.fs-btn {
  margin-left: auto;
  font-family: "Cinzel", serif;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--gold);
  padding: .35rem .8rem;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.fs-btn:hover { background: var(--gold); color: var(--storm-black); }
.fs-btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

#smash-wrap:fullscreen,
#smash-wrap:-webkit-full-screen,
#smash-wrap.fs-fallback {
  background: var(--storm-black);
  display: flex;
  flex-direction: column;
  padding: 1rem 1.2rem;
  border: none;
  outline: none;
}
#smash-wrap.fs-fallback {
  position: fixed;
  inset: 0;
  z-index: 300;
}
#smash-wrap:fullscreen #smash,
#smash-wrap:-webkit-full-screen #smash,
#smash-wrap.fs-fallback #smash {
  flex: 1;
  height: auto;
  min-height: 0;
}

/* ---------- Super Baratheon Bros ---------- */
.bros-stage { position: relative; }
#bros {
  display: block;
  width: 100%;
  height: 440px;
  border: 1px solid var(--iron-line);
  background: #0f0d09;
  cursor: pointer;
  touch-action: manipulation;
}
#bros-wrap:fullscreen #bros,
#bros-wrap:-webkit-full-screen #bros,
#bros-wrap.fs-fallback #bros { height: auto; flex: 1; min-height: 0; }
#bros-wrap:fullscreen .bros-stage,
#bros-wrap:-webkit-full-screen .bros-stage,
#bros-wrap.fs-fallback .bros-stage { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.touch-pad {
  display: none;
  position: absolute;
  bottom: 1rem;
  gap: .8rem;
}
.touch-pad.left-pad { left: 1rem; }
.touch-pad.right-pad { right: 1rem; }
.touch-pad button {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: rgba(20,17,12,.55);
  color: var(--gold-bright);
  font-size: 1.3rem;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.touch-pad button:active { background: var(--gold); color: var(--storm-black); }
@media (pointer: coarse) {
  .touch-pad { display: flex; }
}
@media (max-width: 640px) { #bros { height: 340px; } }

/* ---------- Hamburger menu ---------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 1px solid var(--gold);
  padding: .6rem .62rem;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--gold);
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-toggle:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

@media (max-width: 1199px) {
  .nav-toggle { display: flex; }
  nav.menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(20,17,12,.98);
    border-bottom: 1px solid var(--iron-line);
    padding: .4rem 0 .6rem;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }
  nav.menu.open { display: flex; }
  .nav-group { position: static; }
  /* On mobile the group heading is a label, not a control — everything shows */
  .nav-group-btn {
    width: 100%;
    justify-content: flex-start;
    pointer-events: none;
    color: var(--gold);
    font-size: .64rem;
    letter-spacing: .22em;
    padding: .95rem 1.5rem .35rem;
  }
  .nav-group-btn .caret { display: none; }
  .nav-drop {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    box-shadow: none;
    background: none;
    padding: 0;
    min-width: 0;
    transition: none;
  }
  nav.menu a {
    padding: .8rem 1.5rem .8rem 1.9rem;
    border-bottom: 1px solid rgba(85,80,63,.25);
    font-size: .85rem;
  }
  .nav-group:last-child .nav-drop a:last-child { border-bottom: none; }
}

/* ---------- Cup of the King clarity ---------- */
/* The drinking horn is the button — bare image, no forge chrome. */
.horn-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  background: none;
  border: 0;
  padding: .4rem 1rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.horn-btn img {
  height: clamp(150px, 22vw, 210px);
  width: auto;
  image-rendering: pixelated;
  transform-origin: 62% 28%;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), filter .3s;
}
.horn-btn:hover img,
.horn-btn:focus-visible img {
  transform: translateY(-6px) rotate(-6deg);
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(200,155,46,.45));
}
.horn-btn:active img { transform: translateY(-2px) rotate(-13deg); transition-duration: .1s; }
.horn-btn.pouring img { animation: horn-pour .55s ease; }
@keyframes horn-pour {
  40% { transform: translateY(-4px) rotate(-15deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
.horn-btn-label {
  font-family: "Cinzel", serif;
  font-size: .8rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-bright);
  transition: color .25s, text-shadow .25s;
}
.horn-btn:hover .horn-btn-label,
.horn-btn:focus-visible .horn-btn-label {
  color: #fff;
  text-shadow: 0 0 18px rgba(200,155,46,.65);
}
.horn-btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .horn-btn img,
  .horn-btn:hover img,
  .horn-btn:active img { transition: none; transform: none; }
  .horn-btn.pouring img { animation: none; }
}
.btn-icon {
  height: 1.3em;
  width: auto;
  vertical-align: -.3em;
  margin-right: .45em;
  image-rendering: pixelated;
}
.cup-quote.empty {
  font-size: 1.02rem;
  color: var(--parchment-dim);
}
.cup-quote.empty::before { display: none; }

/* ---------- Compact maester notes ---------- */
.maester-note {
  margin: 3.5rem auto 0;
  max-width: 36rem;
  text-align: center;
  font-size: .92rem;
  font-style: italic;
  color: var(--parchment-dim);
}

/* ---------- Tourney cards ---------- */
.tourney-grid {
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  align-items: stretch;            /* equal-height cards */
}
/* Column layout so the button can be pinned to the foot of every card,
   regardless of how long the title or description runs. */
.tourney-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 2.4rem 1.8rem;
}
.tourney-art {
  height: 110px;
  width: auto;
  image-rendering: pixelated;
  margin: 0 auto 1.4rem;
  display: block;
  filter: drop-shadow(0 0 18px rgba(200,155,46,.25));
}
.tourney-card .card-title { font-size: 1.25rem; margin-bottom: 1rem; }
.tourney-card p { margin-bottom: 1.8rem; }
.tourney-btn {
  display: inline-block;
  text-decoration: none;
  margin-top: auto;                /* pins every button to the card foot */
  align-self: center;
  min-width: 13.5rem;
  white-space: nowrap;             /* never let a label wrap to two lines */
}

@media (max-width: 460px) {
  .site-name { font-size: .72rem; letter-spacing: .1em; }
}

/* ---------- Baratheon Bros: mobile fullscreen optimisation ---------- */
/* Safe areas: keep touch pads clear of notches and home indicators */
.touch-pad { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
.touch-pad.left-pad { left: calc(1rem + env(safe-area-inset-left, 0px)); }
.touch-pad.right-pad { right: calc(1rem + env(safe-area-inset-right, 0px)); }

/* Fallback fullscreen: honest viewport height, no rubber-banding */
#bros-wrap.fs-fallback {
  height: 100dvh;
  overscroll-behavior: contain;
}

/* Bigger thumbs-friendly pads while fullscreen */
#bros-wrap:fullscreen .touch-pad button,
#bros-wrap:-webkit-full-screen .touch-pad button,
#bros-wrap.fs-fallback .touch-pad button {
  width: 4rem;
  height: 4rem;
  font-size: 1.55rem;
}

/* Reclaim vertical space on small screens in fullscreen */
@media (max-width: 760px) {
  #bros-wrap:fullscreen .smash-note,
  #bros-wrap:-webkit-full-screen .smash-note,
  #bros-wrap.fs-fallback .smash-note { display: none; }
  #bros-wrap:fullscreen,
  #bros-wrap:-webkit-full-screen,
  #bros-wrap.fs-fallback { padding: .55rem .6rem; }
  #bros-wrap:fullscreen .smash-hud,
  #bros-wrap:-webkit-full-screen .smash-hud,
  #bros-wrap.fs-fallback .smash-hud {
    gap: .4rem .9rem;
    font-size: .62rem;
    margin-bottom: .5rem;
  }
}

/* Portrait gate: on touch devices the game only plays in landscape */
.rotate-gate {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 6;
  background: rgba(15,13,9,.96);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  text-align: center;
  padding: 1rem;
}
#bros-wrap.portrait-lock .rotate-gate { display: flex; }
#bros-wrap.portrait-lock .touch-pad { display: none !important; }
.rg-icon {
  font-size: 2.8rem;
  color: var(--gold);
  display: inline-block;
  animation: rg-turn 2.4s ease-in-out infinite;
}
@keyframes rg-turn {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) { .rg-icon { animation: none; } }
.rotate-gate p {
  font-family: "Cinzel", serif;
  font-size: .82rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.rotate-gate .rg-sub {
  font-family: "IM Fell English", serif;
  font-style: italic;
  font-size: .95rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--parchment-dim);
}

/* ---------- Lineage tree fullscreen ---------- */
#tree-wrap:fullscreen,
#tree-wrap:-webkit-full-screen,
#tree-wrap.fs-fallback {
  background: var(--storm-black);
  display: flex;
  flex-direction: column;
  padding: 1rem 1.2rem;
}
#tree-wrap.fs-fallback {
  position: fixed;
  inset: 0;
  z-index: 300;
  height: 100dvh;
  overscroll-behavior: contain;
}
#tree-wrap:fullscreen .tree-scroll,
#tree-wrap:-webkit-full-screen .tree-scroll,
#tree-wrap.fs-fallback .tree-scroll {
  flex: 1;
  max-height: none;
  min-height: 0;
}
@media (max-width: 700px) {
  .tree-legend { gap: .35rem .8rem; font-size: .72rem; }
  .tree-legend .key { width: .9rem; height: .9rem; margin-right: .35rem; }
}

/* ---------- A Brawl of Ice and Fire ---------- */
.brawl-stage { position: relative; }
#brawl {
  display: block;
  width: 100%;
  height: 480px;
  border: 1px solid var(--iron-line);
  background: #0b0908;
  cursor: pointer;
  touch-action: manipulation;
}
#brawl-wrap:fullscreen #brawl,
#brawl-wrap:-webkit-full-screen #brawl,
#brawl-wrap.fs-fallback #brawl { height: auto; flex: 1; min-height: 0; }
#brawl-wrap:fullscreen .brawl-stage,
#brawl-wrap:-webkit-full-screen .brawl-stage,
#brawl-wrap.fs-fallback .brawl-stage { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#brawl-wrap.fs-fallback {
  position: fixed; inset: 0; z-index: 60; margin: 0;
  display: flex; flex-direction: column; background: #0b0908;
}
#brawl-wrap:fullscreen,
#brawl-wrap:-webkit-full-screen { display: flex; flex-direction: column; background: #0b0908; }
#brawl-wrap .touch-pad button { width: 3.2rem; height: 3.2rem; }
#brawl-wrap .touch-pad.left-pad button:nth-child(3) { margin-left: .4rem; }
@media (max-width: 640px) { #brawl { height: 360px; } }
@media (pointer: coarse) and (orientation: landscape) {
  #brawl-wrap:fullscreen .smash-note,
  #brawl-wrap:-webkit-full-screen .smash-note,
  #brawl-wrap.fs-fallback .smash-note { display: none; }
}
#brawl-wrap.portrait-lock .rotate-gate { display: flex; }
#brawl-wrap.portrait-lock .touch-pad { display: none !important; }

/* ============ The Court: character links, cards & pages ============ */

/* Inline name links — invisible until hovered, by design. Colour only on
   hover so dense prose stays clean; :focus-visible kept for keyboard users. */
.charlink {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s, text-shadow .2s;
}
.charlink:hover {
  color: var(--gold-bright);
  text-shadow: 0 0 12px rgba(232,193,90,.5);
}
.charlink:focus-visible {
  color: var(--gold-bright);
  outline: 1px solid var(--gold-bright);
  outline-offset: 2px;
}
strong .charlink, .charlink strong { font-weight: inherit; }
.card .card-title .charlink { color: inherit; }
.card .card-title .charlink:hover { color: var(--gold-bright); }

/* Medallion: a portrait when we have art, a house-tinted monogram when we don't */
.char-medallion {
  position: relative;                        /* anchors the ::after vignette */
  display: grid;
  place-items: center;
  width: 74px; height: 74px;
  flex: 0 0 auto;
  /* Rounded square, not a circle: the portraits are 1:1, and a circle
     throws away ~21% of every one of them at the corners. Percentage
     radius so the 74px and 120px medallions keep the same silhouette. */
  --medallion-radius: 12%;
  border-radius: var(--medallion-radius);
  border: 1px solid rgba(200,155,46,.55);   /* fallback for pre-color-mix browsers */
  border: 1px solid color-mix(in srgb, var(--tint, #c89b2e) 55%, transparent);
  background:
    radial-gradient(circle at 50% 34%, rgba(200,155,46,.26), transparent 68%);
  background:
    radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--tint, #c89b2e) 26%, transparent), transparent 68%),
    #14110c;
  box-shadow: inset 0 0 18px rgba(0,0,0,.65);
  overflow: hidden;
}
.char-medallion img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Square art in a square frame crops nothing, so centre is correct.
     --focus still applies if any non-square art is added later. */
  object-position: var(--focus, 50% 50%);
  /* Pulls mismatched sources toward the site's warm, low-saturation palette */
  filter: saturate(.92) contrast(1.04);
  transition: transform .35s ease, filter .35s ease;
}
/* Seats the portrait into the frame instead of letting it sit flat against
   the rim. Absolutely positioned so it never becomes a grid item. */
.char-medallion.has-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--medallion-radius);
  pointer-events: none;
  box-shadow:
    inset 0 0 14px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(200,155,46,.14);
  background: radial-gradient(ellipse at 50% 38%,
              transparent 46%, rgba(10,8,5,.5) 105%);
}
.char-card:hover .char-medallion.has-portrait img,
.char-card:focus-visible .char-medallion.has-portrait img,
.act-face:hover .char-medallion.has-portrait img {
  transform: scale(1.06);
  filter: saturate(1) contrast(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .char-medallion img { transition: none; }
  .char-card:hover .char-medallion.has-portrait img,
  .act-face:hover .char-medallion.has-portrait img { transform: none; }
}
.char-medallion.monogram span {
  font-family: "Cinzel", serif;
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: .04em;
  color: #d9bd7a;                            /* fallback for pre-color-mix browsers */
  color: color-mix(in srgb, var(--tint, #c89b2e) 72%, #f5e9d0);
  text-shadow: 0 2px 10px rgba(0,0,0,.75);
}
.char-medallion.big { width: 120px; height: 120px; float: left; margin: .3rem 1.6rem .8rem 0; }
.char-medallion.big.monogram span { font-size: 2.5rem; }

/* Index grid */
.char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 1.1rem;
  margin-top: 1.4rem;
}
.char-card {
  display: block;
  position: relative;
  padding: 1.3rem 1.2rem 1.25rem;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(180deg, rgba(28,24,18,.92), rgba(16,14,11,.92));
  border: 1px solid rgba(200,155,46,.2);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.char-card .char-medallion { margin: 0 auto .85rem; }
.char-card .card-title { display: block; text-align: center; margin-bottom: .15rem; }
.char-card-ep {
  display: block; text-align: center;
  font-family: "IM Fell English", serif; font-style: italic;
  font-size: .88rem; color: var(--gold); margin-bottom: .6rem;
}
.char-card p { font-size: .93rem; color: var(--parchment-dim); margin: 0; text-align: center; }
.char-card:hover, .char-card:focus-visible {
  border-color: rgba(200,155,46,.6);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0,0,0,.5);
}

/* --- "Who have you met?" — cards you have visited carry a small seal, and
   the medallion warms. Marking met (not dimming unmet) frames it as a
   collection filling up rather than territory withheld. Applied by met.js;
   with no JS every card is simply itself. */
.char-card.is-met {
  border-color: rgba(200,155,46,.5);
  background: linear-gradient(180deg, rgba(40,32,18,.95), rgba(22,18,12,.95));
}
.char-card.is-met::after {
  content: "";
  position: absolute; top: .7rem; right: .7rem;
  width: 1.3rem; height: 1.3rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, var(--gold-bright), var(--gold) 62%, #7a5e18 100%);
  box-shadow: 0 0 0 2px rgba(20,17,12,.9), 0 0 10px rgba(200,155,46,.5);
  /* a small stag-mark struck into the seal */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11'/%3E%3C/svg%3E") center/contain no-repeat;
}
.char-card.is-met .char-medallion {
  box-shadow: 0 0 0 1px var(--gold), 0 0 14px rgba(200,155,46,.35);
}

/* The "who have you met?" progress display the script injects at the top of
   the Court index. Big-number treatment in the same language as the debt
   counter and the stats tiles — a large gold figure over a quiet label —
   so an empty court reads as a plain "0 / 53" rather than an apologetic
   sentence in an empty box. */
.met-bar {
  display: flex; flex-direction: column; align-items: center;
  margin: 0 auto 2.2rem;
  padding: 1.4rem 1.2rem 1.5rem;
  text-align: center;
}
.met-figure {
  margin: 0;
  font-family: "Cinzel", serif; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.met-num {
  font-size: clamp(2.6rem, 7vw, 4rem);
  color: var(--gold-bright);
  text-shadow: 0 0 30px rgba(200,155,46,.25);
}
.met-of {
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  color: var(--parchment-dim);
}
.met-label {
  margin: .55rem 0 0;
  font-family: "EB Garamond", Georgia, serif; font-style: italic;
  font-size: 1rem; letter-spacing: .02em;
  color: var(--parchment-dim);
}
.met-reset {
  margin-top: 1.1rem;
  background: transparent;
  border: 1px solid rgba(200,155,46,.34);
  border-radius: 3px;
  padding: .35rem .85rem;
  font-family: "Cinzel", serif; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); cursor: pointer;
  transition: color .2s, background .2s, border-color .2s;
}
.met-reset:hover, .met-reset:focus-visible {
  color: var(--storm-black); background: var(--gold); border-color: var(--gold-bright);
}
.met-reset:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.met-reset[hidden] { display: none; }

/* Character page */
.char-crumb { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--parchment-dim); margin-bottom: .7rem; }
.char-crumb a { color: var(--gold); text-decoration: none; }
.char-crumb a:hover { color: var(--gold-bright); }
.char-body::after { content: ""; display: block; clear: both; }
.char-appears { font-size: .92rem; color: var(--parchment-dim); margin-top: 1rem; }

/* Grid, not flex. space-between equalises the GAPS, not the positions, so
   with a wide "Ormund Baratheon" on the left and a short "Bella" on the
   right the middle link was shoved off centre. A 1fr/auto/1fr grid centres
   the middle column no matter what flanks it — and because each link is
   pinned to its own column by class, it still holds on the first and last
   character pages, where prev or next is missing entirely. */
.char-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-top: 2.6rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(200,155,46,.22);
}
.char-nav .char-prev { grid-column: 1; justify-self: start; }
.char-nav .char-all  { grid-column: 2; justify-self: center; text-align: center; }
.char-nav .char-next { grid-column: 3; justify-self: end; }
.char-nav a { color: var(--parchment-dim); text-decoration: none; font-size: .9rem; transition: color .2s; }
.char-nav a:hover { color: var(--gold-bright); }
.char-nav .char-all {
  font-family: "Cinzel", serif; letter-spacing: .18em;
  text-transform: uppercase; font-size: .76rem; color: var(--gold);
}

/* Entry point on House & Court */
.court-cta {
  margin: 2.4rem auto 0;
  padding: 1.9rem 1.8rem;
  border: 1px solid rgba(200,155,46,.28);
  background: linear-gradient(180deg, rgba(30,25,18,.9), rgba(15,13,10,.9));
  text-align: center;
}
.court-cta-eyebrow {
  font-family: "Cinzel", serif; font-size: .74rem;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .4rem;
}
.court-cta h2 {
  margin: 0 0 .6rem;
  /* The global h2 is a flex row with a ::after rule set to flex:1, which is
     right for full-width section headers but fights a centred card: flex
     ignores the parent's text-align, so the heading pinned left while the
     eyebrow and paragraph centred. Centre the row and drop the stretching
     rule — the card's own border is already doing that job. */
  justify-content: center;
}
.court-cta h2::after { content: none; }
.court-cta h2 a { color: var(--gold-bright); text-decoration: none; }
.court-cta h2 a:hover { text-shadow: 0 0 20px rgba(200,155,46,.55); }
.court-cta p {
  color: var(--parchment-dim);
  max-width: 42rem;
  margin: 0 auto;
  /* avoids a lone word stranded on the last line */
  text-wrap: pretty;
}

@media (max-width: 560px) {
  .char-medallion.big { float: none; margin: 0 auto 1.2rem; }
  .char-nav { grid-template-columns: 1fr; gap: .85rem; text-align: center; }
  .char-nav .char-prev, .char-nav .char-all, .char-nav .char-next {
    grid-column: 1; justify-self: center;
  }
}

/* ---------- The campaign map (battles.html) ---------- */
/* The map is a vector file recoloured into the site palette by
   _build/maprecolour.py — sea set to the page background so the continent
   sits on the page rather than in a box, land lifted just enough to read as
   a mass, and every label and river in the site's gold. */
.warmap-figure { margin: 2.8rem 0 3.2rem; padding: 0; }
.warmap {
  position: relative;
  border: 1px solid rgba(200,155,46,.28);
  border-radius: 3px;
  background: var(--storm-black);
}
.warmap-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem 1rem;
  padding: .55rem .7rem;
  border-bottom: 1px solid rgba(200,155,46,.18);
}
.warmap-hint {
  margin: 0; font-family: "EB Garamond", Georgia, serif; font-style: italic;
  font-size: .86rem; color: var(--parchment-dim);
}
.warmap-controls { display: flex; gap: .5rem; }
.warmap-controls button {
  width: 2.3rem; height: 2.3rem; line-height: 1;
  font-family: "Cinzel", serif; font-size: 1rem;
  color: var(--gold); background: transparent;
  border: 1px solid rgba(200,155,46,.4); border-radius: 3px; cursor: pointer;
  transition: color .2s, background .2s, border-color .2s;
}
.warmap-controls button:hover, .warmap-controls button:focus-visible {
  color: var(--storm-black); background: var(--gold); border-color: var(--gold-bright);
}

.warmap-view {
  position: relative; overflow: hidden;
  height: min(78vh, 760px);
  /* pan-x/pan-y lets one finger scroll the page over the map; we take over
     only for two-finger pinch, so the map is never a touch scroll trap */
  touch-action: pan-x pan-y;
  cursor: default;
}
.warmap.is-live .warmap-view { cursor: grab; }
/* Flashes when a bare wheel is intercepted, telling the reader how to zoom
   without trapping their scroll. Fades via the show-hint class on the root. */
.warmap-zoomhint {
  position: absolute; left: 50%; bottom: 1rem;
  transform: translateX(-50%) translateY(6px);
  margin: 0; padding: .4rem .9rem;
  font-family: "Cinzel", serif; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); background: rgba(11,9,6,.86);
  border: 1px solid rgba(200,155,46,.3); border-radius: 3px;
  pointer-events: none; opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 8;
}
.warmap.show-hint .warmap-zoomhint { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .warmap-zoomhint { transition: opacity .3s ease; }
}
.warmap.is-dragging .warmap-view { cursor: grabbing; }
.warmap-canvas {
  position: absolute; top: 0; left: 0; width: 100%;
  transform-origin: 0 0;
  will-change: transform;
}
.warmap-img { display: block; width: 100%; height: auto; user-select: none; }

/* the march, over the terrain, at a constant stroke width however far in */
.warmap-route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wr-line {
  fill: none; stroke: var(--blood); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; opacity: .85;
}
.wr-coda { stroke-dasharray: 6 7; opacity: .55; }

/* Pins ride the terrain but hold their size — --pin-scale is the inverse of
   the zoom, set by the script on every frame. */
.warmap-pin {
  position: absolute;
  transform: translate(-50%, -50%) scale(var(--pin-scale, 1));
  transform-origin: center;
  display: flex; align-items: center; gap: .45rem;
  text-decoration: none; white-space: nowrap;
}
.pin-dot {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 1.55rem; height: 1.55rem;
  font-family: "Cinzel", serif; font-size: .78rem; font-weight: 700;
  color: var(--gold-bright);
  background: rgba(20,17,12,.92);
  border: 1.5px solid var(--gold); border-radius: 50%;
  box-shadow: 0 0 12px rgba(0,0,0,.7);
  transition: background .22s, color .22s;
}
.pin-text { display: flex; flex-direction: column; line-height: 1.15; }
.pin-name {
  font-family: "Cinzel", serif; font-size: .8rem; letter-spacing: .04em;
  color: var(--parchment);
  text-shadow: 0 1px 4px #14110c, 0 0 10px #14110c;
}
.pin-tell {
  font-family: "EB Garamond", Georgia, serif; font-style: italic; font-size: .76rem;
  color: var(--parchment-dim);
  text-shadow: 0 1px 4px #14110c, 0 0 10px #14110c;
}
.warmap-pin.is-coda .pin-dot { border-color: rgba(200,155,46,.55); color: var(--gold); }
.warmap-pin:hover .pin-dot, .warmap-pin:focus-visible .pin-dot {
  background: var(--gold); color: var(--storm-black);
}
.warmap-pin:hover .pin-name, .warmap-pin:focus-visible .pin-name { color: var(--gold-bright); }
.warmap-pin:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; border-radius: 3px; }
/* zoomed in, the terrain carries its own labels — ours would fight them */
.warmap.is-zoomed .pin-tell { opacity: 0; transition: opacity .2s; }

.warmap.fs-fallback {
  position: fixed; inset: 0; z-index: 320; border-radius: 0;
  height: 100dvh; display: flex; flex-direction: column;
}
.warmap.fs-fallback .warmap-view { flex: 1; height: auto; }
.warmap:fullscreen, .warmap:-webkit-full-screen { display: flex; flex-direction: column; }
.warmap:fullscreen .warmap-view, .warmap:-webkit-full-screen .warmap-view { flex: 1; height: auto; }

.warmap-cap {
  max-width: 32rem; margin: 1.2rem auto 0; text-align: center;
  font-family: "EB Garamond", Georgia, serif; font-style: italic;
  font-size: .95rem; line-height: 1.6; color: var(--parchment-dim);
}
@media (max-width: 620px) {
  .warmap-view { height: min(62vh, 520px); }
  .pin-tell { display: none; }
  .warmap-hint { font-size: .78rem; }
}

/* ---------- The six million (legacy.html) ---------- */
/* Screen-reader-only text. The ticking figure is aria-hidden, so the real
   number is announced once, here, instead of being read out every frame. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.debt {
  margin: 2.2rem 0 2.6rem;
  padding: 2rem 1.8rem 1.8rem;
  border: 1px solid rgba(200,155,46,.28);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(126,42,28,.07), transparent 55%),
    linear-gradient(180deg, rgba(30,25,18,.85), rgba(15,13,10,.85));
  text-align: center;
}
.debt-eyebrow {
  margin: 0 0 .8rem;
  font-family: "Cinzel", serif;
  font-size: .7rem;
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .85;
}
.debt-figure { margin: 0; }
.debt-num {
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 8vw, 4.6rem);
  line-height: 1;
  color: var(--gold-bright);
  /* tabular figures, or the number jitters sideways as digits change */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-shadow: 0 0 34px rgba(200,155,46,.28);
}
.debt-unit {
  margin: .6rem 0 0;
  font-family: "EB Garamond", Georgia, serif;
  font-style: italic;
  color: var(--parchment-dim);
}

.debt-ledger {
  list-style: none;
  margin: 1.9rem auto 0;
  padding: 0;
  max-width: 30rem;
  text-align: left;
}
.debt-ledger li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .15rem .8rem;
  padding: .7rem 0;
  border-top: 1px solid rgba(200,155,46,.14);
}
.ledger-who {
  font-family: "Cinzel", serif;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--parchment);
}
.ledger-sum {
  font-family: "Cinzel", serif;
  font-size: .82rem;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
/* The bar spans both columns and carries the share of the whole, so the
   three million to Casterly Rock is visibly half the page. */
.ledger-bar {
  grid-column: 1 / -1;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(200,155,46,.35));
  width: calc(var(--pct) * 1%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s cubic-bezier(.3,.7,.3,1);
}
.debt.counted .ledger-bar { transform: scaleX(1); }
.debt-ledger li:nth-child(2) .ledger-bar { transition-delay: .12s; }
.debt-ledger li:nth-child(3) .ledger-bar { transition-delay: .24s; }
.debt-ledger li:nth-child(4) .ledger-bar { transition-delay: .36s; }
.ledger-note {
  grid-column: 1 / -1;
  font-family: "EB Garamond", Georgia, serif;
  font-style: italic;
  font-size: .88rem;
  color: var(--parchment-dim);
}
/* the one that actually mattered */
.debt-ledger li:first-child .ledger-bar {
  background: linear-gradient(90deg, var(--blood), rgba(126,42,28,.4));
}
.debt-ledger li:first-child .ledger-note { color: #c9836f; }

.debt-tail {
  max-width: 34rem;
  margin: 1.6rem auto 0;
  font-family: "EB Garamond", Georgia, serif;
  font-style: italic;
  line-height: 1.7;
  color: var(--parchment-dim);
}
.debt-creep {
  margin: .9rem 0 0;
  font-family: "EB Garamond", Georgia, serif;
  font-style: italic;
  font-size: .88rem;
  color: rgba(200,155,46,.72);
}
.debt-creep .debt-since { font-variant-numeric: tabular-nums; }
.debt-creep[hidden] { display: none; }

@media (max-width: 560px) {
  .debt { padding: 1.5rem 1.1rem 1.3rem; }
  .debt-ledger li { padding: .6rem 0; }
}

/* ---------- The Trident (battles.html) ---------- */
/* A contained set piece: water canvas, two Ken Burns battle images, and six
   beats that advance on their own but can be paused or jumped between. It
   keeps to its own box so the page around it is undisturbed. */
.trident {
  margin: 2.2rem 0;
  padding: 0;
  border: 1px solid rgba(200,155,46,.26);
  border-radius: 3px;
  overflow: hidden;
  background: #0b0906;
}
.trident-stage { position: relative; }
.trident-canvas { display: none; }
.trident-kb, .trident-nav, .trident-toggle { display: none; }

.trident-beats { padding: 1.9rem 1.6rem; }
.trident-beat {
  max-width: 32rem; margin: 0 auto;
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(1.05rem, 2.1vw, 1.3rem);
  line-height: 1.7; text-align: center; color: var(--parchment);
}
.trident-beat + .trident-beat { margin-top: .9rem; }
.trident-beat.is-blow {
  font-family: "Cinzel", serif; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-bright);
}

.trident.is-live .trident-stage { height: min(64vh, 520px); min-height: 340px; }
.trident.is-live .trident-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }

.trident.is-live .trident-kb {
  display: block; position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.1s ease; z-index: 1;
}
.trident.is-live .trident-kb.is-on { opacity: .5; }
.trident-kb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.trident-kb.kb-run img { animation: tridentKB 9s ease-out forwards; }
.trident-kb[data-img="the-blow"].kb-run img { animation-name: tridentKB2; }
@keyframes tridentKB {
  from { transform: scale(1.02) translate(0, 0); }
  to   { transform: scale(1.16) translate(-3%, -2%); }
}
@keyframes tridentKB2 {
  from { transform: scale(1.16) translate(3%, 1%); }
  to   { transform: scale(1.03) translate(-2%, -1%); }
}
.trident.is-live .trident-kb::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,9,6,.55), rgba(11,9,6,.2) 40%, rgba(11,9,6,.75)),
    radial-gradient(circle at 50% 42%, transparent 45%, rgba(11,9,6,.6));
}

.trident.is-live .trident-beats {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  padding: 2.4rem 1.8rem 4rem;
}
.trident.is-live .trident-beat {
  grid-area: 1 / 1; margin: 0;
  text-shadow: 0 2px 16px #070604, 0 0 30px #070604;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  /* the whole beat is hidden until it is the active one; the words inside
     then handle the reveal, so an inactive beat never flashes its text */
  opacity: 0; pointer-events: none;
}
.trident.is-live .trident-beat.is-on { opacity: 1; }
.trident.is-live .trident-beat.is-blow { font-size: clamp(1.1rem, 2.6vw, 1.7rem); }

/* live: the plain copy is only for no-JS/reduced-motion; hide it here and
   let the per-word spans do the talking */
.trident.is-live .trident-plain { display: none; }
.trident.is-live .trident-words { display: inline; }
.trident.is-live .tw {
  display: inline-block;
  /* inline-block swallows a trailing space inside each span, so the spans no
     longer carry one — the word gap is a real margin instead, which also
     survives the fade-in transform cleanly. */
  margin-right: 0.28em;
  opacity: 0;
  transform: translateY(8px);
  filter: blur(2px);
}
.trident.is-live .tw:last-child { margin-right: 0; }
/* each word eases in after the one before it, via its --w index */
.trident.is-live .tw-run .tw {
  animation: tridentWord .5s ease forwards;
  animation-delay: calc(var(--w) * 0.165s);
}
@keyframes tridentWord {
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* not live: show the plain line, hide the span machinery */
.trident:not(.is-live) .trident-words { display: none; }

.trident.is-live .trident-nav {
  display: flex; gap: .5rem; z-index: 3;
  position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  transition: opacity .5s ease;
}
.trident-dot {
  width: 8px; height: 8px; padding: 0; border-radius: 50%;
  background: rgba(200,155,46,.28); border: none; cursor: pointer;
  transition: background .35s ease, transform .35s ease;
}
.trident-dot:hover { background: rgba(200,155,46,.6); }
.trident-dot.is-on { background: var(--gold-bright); transform: scale(1.5); }
.trident-dot:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

.trident.is-live .trident-toggle {
  display: grid; place-items: center; z-index: 3;
  position: absolute; right: .85rem; bottom: .8rem;
  width: 2.1rem; height: 2.1rem; padding: 0;
  background: rgba(11,9,6,.72); border: 1px solid rgba(200,155,46,.3);
  border-radius: 50%; cursor: pointer;
  transition: background .2s, border-color .2s, opacity .5s ease;
}
.trident-toggle:hover, .trident-toggle:focus-visible { border-color: var(--gold-bright); background: rgba(11,9,6,.9); }
.trident-toggle:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.tt-pause, .tt-pause::before, .tt-pause::after { box-sizing: border-box; }
.tt-pause { position: relative; width: 12px; height: 12px; }
.tt-pause::before, .tt-pause::after {
  content: ""; position: absolute; top: 1px; width: 3.5px; height: 10px; background: var(--gold);
}
.tt-pause::before { left: 1.5px; } .tt-pause::after { right: 1.5px; }
.trident-toggle.is-paused .tt-pause::before, .trident-toggle.is-paused .tt-pause::after { display: none; }
.trident-toggle.is-paused .tt-pause {
  width: 0; height: 0; margin-left: 3px;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  border-left: 10px solid var(--gold);
}

@media (max-width: 620px) {
  .trident.is-live .trident-stage { height: min(58vh, 440px); }
}

/* Controls fade out after a couple of idle seconds while playing (the JS adds
   controls-hidden), and return on pointer movement. They never hide while
   hovered or keyboard-focused, so they can't vanish under the cursor or leave
   a keyboard user stranded. */
.trident.controls-hidden .trident-nav,
.trident.controls-hidden .trident-toggle {
  opacity: 0;
  pointer-events: none;
}
.trident.controls-hidden:hover .trident-nav,
.trident.controls-hidden:hover .trident-toggle,
.trident.controls-hidden:focus-within .trident-nav,
.trident.controls-hidden:focus-within .trident-toggle {
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .trident.is-live .trident-nav,
  .trident.is-live .trident-toggle { transition: opacity .5s ease; }
}

/* ---------- The life spine (biography.html) ---------- */
/* A chronology whose GAPS are proportional to elapsed time, so the shape of
   Robert's life is visible before a word is read: everything crushed into two
   years of war, then fifteen years of almost nothing, then a boar. The --gap
   on each beat is computed in _build/lifespine.py; the empty stretches are
   annotated so they read as duration rather than padding. */
.spine {
  max-width: 44rem;
  margin: 0 auto 3.4rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--iron-line);
}
.spine-head { margin-bottom: .5rem; }
.spine-intro {
  margin: 0 0 2.2rem;
  font-family: "EB Garamond", Georgia, serif;
  font-style: italic;
  color: var(--parchment-dim);
}
.spine-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 2.1rem;
  position: relative;
}
/* the rule the beats hang from */
.spine-list::before {
  content: "";
  position: absolute;
  left: 5px; top: .4rem; bottom: .4rem;
  width: 1px;
  background: linear-gradient(180deg,
    transparent, rgba(200,155,46,.4) 4%, rgba(200,155,46,.4) 96%, transparent);
}
.spine-beat {
  position: relative;
  margin-top: var(--gap, 0);
}
.spine-node {
  position: absolute;
  left: -2.1rem; top: .42rem;
  width: 11px; height: 11px;
  margin-left: 0;
  border-radius: 50%;
  background: var(--storm-black);
  border: 1.5px solid var(--gold);
  transform: translateX(0);
}
.spine-beat.is-turn .spine-node {
  width: 15px; height: 15px;
  left: calc(-2.1rem - 2px); top: .3rem;
  border-color: var(--gold-bright);
  background: var(--blood);
  box-shadow: 0 0 0 3px rgba(20,17,12,1), 0 0 16px rgba(200,155,46,.45);
}
.spine-label {
  font-family: "Cinzel", serif;
  font-size: 1.02rem;
  letter-spacing: .03em;
  color: var(--parchment);
  text-decoration: none;
  /* A quiet but always-present underline. Without it these read as headings
     and nothing suggests they lead anywhere; the site's .charlink pattern
     (colour on hover only) works inside prose, where a name is discoverable,
     but not for a column of labels that look like headings. */
  border-bottom: 1px solid rgba(200,155,46,.28);
  transition: color .2s, border-color .2s;
}
a.spine-label:hover, a.spine-label:focus-visible {
  color: var(--gold-bright);
  border-bottom-color: var(--gold-bright);
}
/* Turning points are marked by their node — larger, blood-filled, haloed —
   and NOT by colouring the label. Gold-bright is the site's link colour
   (a.inline), so tinting three of thirteen labels gold made those three look
   like the only clickable ones. All thirteen link out; the node carries the
   narrative weight, the label carries interactivity. */
.spine-beat.is-turn .spine-label { color: var(--parchment); }
.spine-text {
  margin: .3rem 0 0;
  font-family: "EB Garamond", Georgia, serif;
  font-size: .97rem;
  line-height: 1.6;
  color: var(--parchment-dim);
}
/* The annotated empty stretch, sitting as a labelled break in the rule.
   This was vertical text at .74rem and half opacity, which was unreadable —
   rotated small type asks a lot for a line that carries the whole argument
   about how empty those years were. Horizontal, larger, and it interrupts
   the rule rather than running alongside it. */
.spine-span {
  position: absolute;
  left: -2.1rem;
  top: calc(var(--gap) / -2 - .7rem);
  transform: translateX(-6px);
  padding: .15rem .55rem;
  font-family: "EB Garamond", Georgia, serif;
  font-style: italic;
  font-size: .88rem;
  letter-spacing: .02em;
  color: rgba(185,173,140,.8);
  background: var(--storm-black);
  white-space: nowrap;
}
@media (max-width: 620px) {
  .spine-list { padding-left: 1.7rem; }
  .spine-node { left: -1.7rem; }
  .spine-beat.is-turn .spine-node { left: calc(-1.7rem - 2px); }
  .spine-span { left: -1.7rem; font-size: .82rem; }
  .spine-label { font-size: .95rem; }
}