:root {
    --ink: #070812;
    --panel: #0d1220;
    --panel-2: #12182a;
    --gold: #05d9e8;
    --gold-2: #7af0ff;
    --blood: #ff2a6d;
    --blood-2: #ff6b9d;
    --cream: #e8f4ff;
    --muted: #9bb4c9;
    --line: rgba(5, 217, 232, 0.42);
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    --teal: #05d9e8;
    --teal-2: #7af0ff;
    --violet: #d929f7;
    --copper: #ffd319;
    --forest: #3d9691;
    --steel: #8aa4c8;
    --rose: #ff2a6d;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  background: #05060c;
  color: var(--cream);
  font-family: "Inter", system-ui, sans-serif;
  overflow: hidden;
}

.viewport {
  width: 100vw;
  position: relative;
  /* The stage keeps its 1920x1080 layout box and is scaled down to fit, so the
     box itself always spills past small viewports. Clip it here rather than
     letting the document pick up a horizontal scrollbar. */
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at 50% 110%, rgba(155, 28, 36, 0.28), transparent 55%),
    #05060c;
}

  .stage {
    width: 1920px;
    height: 1080px;
    /* Pinned to the viewport centre and scaled about its own top-left corner;
       the trailing translate in the JS transform pulls it back by half its
       scaled size, which centres it at any zoom level. */
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: top left;
    background: var(--ink);
    box-shadow: var(--shadow);
  }

  .slide {
    position: absolute;
    inset: 0;
    display: none;
    padding: 56px 80px 100px;
    background:
      radial-gradient(1000px 520px at 8% -8%, rgba(212, 180, 90, 0.18), transparent 52%),
      radial-gradient(820px 560px at 108% 118%, rgba(155, 28, 36, 0.28), transparent 55%),
      radial-gradient(640px 420px at 96% 0%, rgba(42, 120, 118, 0.14), transparent 50%),
      linear-gradient(165deg, #0a1020 0%, #070812 48%, #120818 100%);
    overflow: hidden;
  }
  .slide.active {
    display: flex;
    flex-direction: column;
    animation: primer-slide-in 240ms ease-out both;
  }
  /* The photo cross-fades in place while the words drift in from the side the
     reader came from, so the direction of travel is legible at a glance. */
  .slide.active .content {
    animation: primer-content-in 380ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .slide.active[data-direction="back"] .content {
    animation-name: primer-content-in-back;
  }

  @keyframes primer-slide-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes primer-content-in {
    from { opacity: 0; transform: translateX(34px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes primer-content-in-back {
    from { opacity: 0; transform: translateX(-34px); }
    to { opacity: 1; transform: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .slide.active,
    .slide.active .content { animation: none; }
  }
  .slide.tint-fade {
    background:
      radial-gradient(900px 500px at 10% 0%, rgba(58, 168, 160, 0.18), transparent 50%),
      radial-gradient(700px 500px at 100% 100%, rgba(165, 107, 219, 0.16), transparent 50%),
      linear-gradient(165deg, #08141c 0%, #070812 100%);
  }
  .slide.tint-blight {
    background:
      radial-gradient(900px 500px at 90% 110%, rgba(70, 140, 50, 0.16), transparent 50%),
      radial-gradient(700px 400px at 0% 0%, rgba(155, 28, 36, 0.22), transparent 50%),
      linear-gradient(165deg, #101018 0%, #070812 100%);
  }
  .slide.tint-faith {
    background:
      radial-gradient(900px 500px at 50% -10%, rgba(240, 215, 140, 0.16), transparent 50%),
      radial-gradient(700px 400px at 100% 100%, rgba(155, 28, 36, 0.14), transparent 50%),
      linear-gradient(165deg, #0c1424 0%, #070812 100%);
  }

  .slide::before, .slide::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 3;
  }
  .slide::before {
    inset: 18px;
    border: 1px solid var(--line);
    box-shadow:
      inset 0 0 0 1px rgba(0,0,0,0.45),
      0 0 40px rgba(155, 28, 36, 0.12);
  }
  .slide::after {
    inset: 26px;
    border: 1px solid rgba(212, 180, 90, 0.16);
  }

  .slide.bleed { padding: 0; }
  .slide.bleed::before { inset: 18px; border-color: rgba(232, 208, 138, 0.35); }
  .slide.bleed::after { display: none; }

  .bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
  }
  .veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(180deg, rgba(8,6,5,0.28) 0%, rgba(8,6,5,0.55) 48%, rgba(8,6,5,0.88) 100%);
  }
  .veil.heavy {
    background:
      linear-gradient(90deg, rgba(8,6,5,0.86) 0%, rgba(8,6,5,0.55) 48%, rgba(8,6,5,0.22) 100%);
  }
  .veil.bottom {
    background:
      linear-gradient(180deg, rgba(8,6,5,0.2) 0%, rgba(8,6,5,0.35) 40%, rgba(8,6,5,0.92) 100%);
  }

  .content {
    position: relative;
    z-index: 4;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .kicker {
    font-family: Orbitron, sans-serif;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold);
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .kicker::before {
    content: "";
    width: 36px;
    height: 3px;
    background: linear-gradient(90deg, var(--blood-2), var(--gold));
    flex-shrink: 0;
  }
  h1 {
    font-family: Orbitron, sans-serif;
    font-weight: 800;
    font-size: 86px;
    line-height: 0.95;
    color: var(--gold-2);
    text-shadow: 0 2px 0 rgba(0,0,0,0.5);
  }
  h2 {
    font-family: Orbitron, sans-serif;
    font-weight: 700;
    font-size: 58px;
    line-height: 1.05;
    color: var(--gold-2);
    margin-bottom: 28px;
  }
  .lede {
    font-size: 30px;
    line-height: 1.35;
    color: var(--cream);
    max-width: 58ch;
  }
  .muted { color: var(--muted); }
  .gold { color: var(--gold-2); }

  .rule {
    width: 140px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
    margin: 22px 0 28px;
  }

  .grid {
    display: grid;
    gap: 20px;
    flex: 1;
    min-height: 0;
    align-content: stretch;
  }
  .grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  .grid.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

  .card {
    --accent: var(--gold);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 42%),
      linear-gradient(180deg, #10182a 0%, #0a1020 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, #000);
    border-top: 4px solid var(--accent);
    /* The bottom padding reserves the strip the accent bar is pinned into. */
    padding: 24px 26px 36px;
    box-shadow: 0 14px 32px rgba(0,0,0,0.32);
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 0;
    overflow: hidden;
  }
  .card::before {
    content: "";
    position: absolute;
    right: -50px;
    bottom: -70px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent), transparent 68%);
    opacity: 0.28;
    pointer-events: none;
  }
  .card.c-blood { --accent: var(--blood-2); }
  .card.c-gold { --accent: var(--gold); }
  .card.c-copper { --accent: var(--copper); }
  .card.c-forest { --accent: var(--forest); }
  .card.c-teal { --accent: var(--teal); }
  .card.c-violet { --accent: var(--violet); }
  .card.c-steel { --accent: var(--steel); }
  .card.c-rose { --accent: var(--rose); }
  /* Pinned rather than pushed down with margin-top:auto, which collapsed onto
     the last line of text whenever a grid row left the card no slack. */
  .card::after {
    content: "";
    position: absolute;
    left: 26px;
    bottom: 20px;
    width: 52px;
    height: 3px;
    background: var(--accent);
    opacity: 0.85;
  }
  .card h3 {
    font-family: Orbitron, sans-serif;
    font-size: 26px;
    color: var(--accent);
    margin-bottom: 10px;
    letter-spacing: 0.04em;
  }
  .card p, .card li {
    font-size: 22px;
    line-height: 1.4;
    color: var(--cream);
  }
  .grid.cols-4 .card p,
  .grid.cols-4 .card li {
    font-size: 20px;
    line-height: 1.42;
  }
  .grid.cols-4 .card h3 {
    font-size: 23px;
  }
  .grid.cols-3 .card ul,
  .grid.cols-4 .card ul {
    text-align: left;
    width: 100%;
    padding-left: 1.1em;
  }
  .card.has-art ul {
    margin-bottom: 12px;
  }
  .card ul { padding-left: 1.1em; }
  .card li + li { margin-top: 8px; }
  .card .mark {
    position: absolute;
    right: 10px;
    bottom: -28px;
    font-family: Orbitron, sans-serif;
    font-size: 210px;
    font-weight: 800;
    color: var(--accent);
    opacity: 0.14;
    line-height: 1;
    pointer-events: none;
    z-index: 0;
  }
  .card h3, .card p, .card ul, .card .tag, .card .tiny, .card .num {
    position: relative;
    z-index: 1;
  }
  .card.has-art { padding-bottom: 0; }
  .card.has-art::after { display: none; }
.card.has-art .card-art {
  display: block;
  width: calc(100% + 52px);
  margin: 16px -26px 0;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: cover;
  object-position: center 40%;
}

.card.has-icon {
  align-items: center;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 32px;
}

.card.has-icon .primer-stat-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
  margin: 0 auto 10px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
}

.card.has-icon h3 {
  display: block;
  margin-bottom: 8px;
  font-size: 20px;
  line-height: 1.15;
}

.card.has-icon p {
  font-size: 18px;
  line-height: 1.32;
}
  .card .tag {
    display: inline-flex;
    align-items: center;
    font-family: Orbitron, sans-serif;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #1a100c;
    background: var(--accent);
    padding: 4px 10px;
    margin-bottom: 12px;
    width: fit-content;
    font-weight: 700;
  }

  .quote {
    font-size: 32px;
    font-style: italic;
    line-height: 1.35;
    color: var(--gold-2);
    max-width: 28ch;
  }
  .quote cite {
    display: block;
    margin-top: 16px;
    font-style: normal;
    font-family: Orbitron, sans-serif;
    font-size: 16px;
    letter-spacing: 0.16em;
    color: var(--gold);
  }

  .formula {
    font-family: "Share Tech Mono", ui-monospace, monospace;
    font-size: 42px;
    letter-spacing: 0.02em;
    color: var(--gold-2);
    background: linear-gradient(90deg, rgba(155, 28, 36, 0.55), rgba(0,0,0,0.62));
    border: 1px solid var(--gold);
    border-left: 6px solid var(--blood-2);
    padding: 22px 32px;
    display: inline-block;
    align-self: flex-start;
    backdrop-filter: blur(6px);
    box-shadow: 0 12px 40px rgba(155, 28, 36, 0.25);
  }

  .tn-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 24px;
    background: rgba(20, 14, 12, 0.45);
  }
  .tn-table th, .tn-table td {
    padding: 11px 16px;
    border-bottom: 1px solid rgba(212,180,90,0.16);
    text-align: left;
  }
  .tn-table th { color: var(--gold); font-family: Orbitron, sans-serif; font-weight: 700; background: rgba(212, 180, 90, 0.1); }
  .tn-table td:last-child, .tn-table th:last-child { text-align: right; font-family: "Share Tech Mono", ui-monospace, monospace; color: var(--gold-2); }
  .tn-table tr:nth-child(3) td { background: rgba(212, 180, 90, 0.12); color: var(--gold-2); }

  .map-wrap {
    flex: 1;
    display: flex;
    gap: 28px;
    min-height: 0;
    align-items: stretch;
  }
  .map-card {
    flex: 0 1 auto;
    height: 100%;
    background: #cbb89a;
    border: 1px solid var(--line);
    overflow: hidden;
  }
  .map-card img {
    height: 100%;
    width: auto;
    display: block;
  }
  .legend {
    flex: 1 1 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }
  .legend p {
    font-size: 21px;
    line-height: 1.38;
    margin-bottom: 12px;
    color: var(--cream);
    background: #1c1612;
    border-left: 4px solid var(--gold);
    padding: 14px 16px;
  }
  .legend p:nth-child(1) { border-left-color: var(--copper); }
  .legend p:nth-child(2) { border-left-color: var(--rose); }
  .legend p:nth-child(3) { border-left-color: var(--violet); }
  .legend p:nth-child(4) { border-left-color: var(--teal); }
  .legend b { color: var(--gold-2); font-weight: 700; }

  .chrome {
    position: absolute;
    left: 88px;
    right: 88px;
    bottom: 28px;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: Orbitron, sans-serif;
    font-size: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(232, 208, 138, 0.7);
    pointer-events: none;
  }
  .chrome .keys {
    font-family: "Share Tech Mono", ui-monospace, monospace;
    letter-spacing: 0.08em;
    text-transform: none;
  }
  .progress {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 6px;
    background: rgba(20, 12, 10, 0.8);
    z-index: 7;
  }
  .progress > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--blood-2), var(--gold), var(--teal));
    width: 0%;
    box-shadow: 0 0 12px rgba(224, 90, 72, 0.55);
  }

  .overlay {
    position: absolute;
    inset: 0;
    background: rgba(5,4,3,0.82);
    z-index: 20;
    display: none;
    place-items: center;
    padding: 80px;
  }
  .overlay.show { display: grid; }
  .overlay .box {
    width: min(1100px, 90%);
    background: #16110d;
    border: 1px solid var(--gold);
    padding: 40px 48px;
  }
  .overlay h3 { font-family: Orbitron, sans-serif; color: var(--gold-2); font-size: 36px; margin-bottom: 18px; }
  .overlay p, .overlay li { font-size: 24px; line-height: 1.4; }
  .overlay kbd {
    font-family: "Share Tech Mono", ui-monospace, monospace;
    font-size: 18px;
    border: 1px solid var(--line);
    padding: 2px 8px;
    color: var(--gold-2);
  }

  .toc {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px 24px;
    font-size: 20px;
  }
  .toc button {
    all: unset;
    cursor: pointer;
    color: var(--cream);
    padding: 8px 4px;
    border-bottom: 1px solid rgba(201,162,74,0.12);
  }
  .toc button:hover { color: var(--gold-2); }

  .tiny { font-size: 18px; color: var(--muted); }
  .split {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 36px;
    align-items: stretch;
    flex: 1;
    min-height: 0;
  }

  .num {
    font-family: Orbitron, sans-serif;
    color: var(--accent, var(--gold));
    font-size: 48px;
    line-height: 1;
    margin-bottom: 8px;
  }

  .pill {
    display: inline-block;
    border: 1px solid var(--line);
    padding: 4px 10px;
    font-family: Orbitron, sans-serif;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    margin-right: 8px;
    margin-bottom: 8px;
  }

.primer-toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 44px;
  padding: 0 1rem;
  background: rgba(5, 4, 3, 0.94);
  border-bottom: 1px solid rgba(212, 180, 90, 0.28);
  font-family: Orbitron, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232, 208, 138, 0.82);
}

.primer-toolbar a {
  color: inherit;
  text-decoration: none;
}

.primer-toolbar a:hover {
  color: var(--gold-2);
}

.primer-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.primer-toolbar__btn {
  all: unset;
  cursor: pointer;
  color: inherit;
}

/* Toolbar controls fill the bar height so they stay tap-sized on touch screens. */
.primer-toolbar a,
.primer-toolbar__btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.primer-toolbar__btn:hover {
  color: var(--gold-2);
}

.viewport {
  margin-top: 44px;
  height: calc(100vh - 44px);
}

/* Narrow screens: the toolbar's three groups no longer fit on one 44px row, so
   drop the centre title and tighten the rest instead of letting them wrap. */
@media (max-width: 640px) {
  .primer-toolbar {
    gap: 0.5rem;
    padding: 0 0.65rem;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
  }

  .primer-toolbar > span {
    display: none;
  }

  .primer-toolbar__actions {
    gap: 0.85rem;
    margin-left: auto;
  }

}

/* Shown only on narrow portrait screens, where the scaled-to-fit slide ends up
   too small to read comfortably. */
.primer-rotate-hint {
  display: none;
}

@media (max-width: 820px) and (orientation: portrait) {
  .primer-rotate-hint {
    display: block;
    position: fixed;
    top: 44px;
    left: 0;
    right: 0;
    z-index: 25;
    padding: 0.5rem 0.9rem;
    background: rgba(5, 4, 3, 0.94);
    border-bottom: 1px solid rgba(212, 180, 90, 0.22);
    font-family: Orbitron, sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(232, 208, 138, 0.75);
  }

  /* Make room for the hint so it never covers the slide. */
  .viewport {
    margin-top: calc(44px + 2.05rem);
    height: calc(100vh - 44px - 2.05rem);
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Paging arrows. They sit in the viewport rather than the stage so they keep a
   real 56px tap target however far the slide is scaled down. */
.primer-nav {
  all: unset;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  display: grid;
  place-items: center;
  width: 56px;
  height: 96px;
  cursor: pointer;
  color: rgba(232, 208, 138, 0.55);
  font-size: 38px;
  line-height: 1;
  background: linear-gradient(90deg, rgba(5, 4, 3, 0.55), transparent);
  transition: color 160ms ease, background-color 160ms ease, opacity 160ms ease;
}

.primer-nav--prev { left: 0; }
.primer-nav--next {
  right: 0;
  background: linear-gradient(270deg, rgba(5, 4, 3, 0.55), transparent);
}

.primer-nav:hover { color: var(--gold-2); }
.primer-nav:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -6px;
  color: var(--gold-2);
}

.primer-nav[disabled] {
  opacity: 0.18;
  cursor: default;
  pointer-events: none;
}

/* Pointer-only screens get out of the reader's way until the mouse moves in;
   touch screens keep them visible, since there is no hover to reveal them. */
@media (hover: hover) {
  .primer-nav { opacity: 0.35; }
  .viewport:hover .primer-nav { opacity: 1; }
  .primer-nav:focus-visible { opacity: 1; }
}

.overlay .box { position: relative; }

.overlay__close {
  all: unset;
  position: absolute;
  top: 10px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  font-size: 30px;
  line-height: 1;
  color: rgba(232, 208, 138, 0.7);
}

.overlay__close:hover { color: var(--gold-2); }
.overlay__close:focus-visible { outline: 1px solid var(--gold); }

.toc button:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 2px;
  color: var(--gold-2);
}

.toc button[aria-current="true"] {
  color: var(--gold-2);
  border-bottom-color: var(--gold);
}

.primer-toolbar__btn:focus-visible,
.primer-toolbar a:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 2px;
  color: var(--gold-2);
}

/* Narrow toolbars already drop the centre title; below this the four action
   controls stop fitting too, so the arrows carry navigation instead. */
@media (max-width: 520px) {
  #help-btn { display: none; }
}

@media (max-width: 640px) {
  .primer-nav {
    width: 44px;
    height: 80px;
    font-size: 30px;
  }
}

/* Portrait phones letterbox the slide into a band with dead space above and
   below it. Drop the arrows into that space rather than over the content. */
@media (max-width: 820px) and (orientation: portrait) {
  .primer-nav {
    top: auto;
    bottom: 20px;
    transform: none;
    width: 76px;
    height: 52px;
    background: rgba(5, 4, 3, 0.72);
    border: 1px solid rgba(212, 180, 90, 0.3);
    color: rgba(232, 208, 138, 0.85);
  }

  .primer-nav--prev { left: 20px; }
  .primer-nav--next { right: 20px; }
}

/* A slate-and-ash cast for the slide about rank, caste and ownership, so it
   reads colder than the gold-lit slides around it. */
.slide.tint-stone {
  background:
    radial-gradient(900px 520px at 12% -6%, rgba(138, 164, 200, 0.14), transparent 52%),
    radial-gradient(760px 460px at 100% 108%, rgba(155, 28, 36, 0.18), transparent 52%),
    linear-gradient(165deg, #1d1c1a 0%, #131211 52%, #16130f 100%);
}

/* The existing veils are directional gradients, which leave one edge bright.
   Slides whose text fills the whole frame need an even wash instead. */
.veil.deep {
  background:
    radial-gradient(1400px 900px at 50% 50%, rgba(8, 6, 5, 0.72), rgba(6, 5, 4, 0.94) 78%),
    rgba(8, 6, 5, 0.42);
}

/* Timeline: two rows of four stops, each stop carrying its own rail segment so
   the line survives however the row wraps. */
.timeline {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 26px;
  align-content: space-evenly;
}
.timeline > div {
  position: relative;
  padding-top: 30px;
}
/* The rail. The last stop in each row stops the line at its own dot rather
   than running it off into the gap. */
.timeline > div::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  right: -26px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(212, 180, 90, 0.35));
}
.timeline > div:nth-child(4n)::before {
  right: auto;
  width: 10px;
}
.timeline > div::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 12px;
  height: 12px;
  background: var(--blood-2);
  box-shadow: 0 0 0 3px rgba(8, 6, 5, 0.85), 0 0 14px rgba(224, 90, 72, 0.6);
  transform: rotate(45deg);
}
.timeline .when {
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--gold-2);
  margin-bottom: 6px;
}
.timeline .what {
  font-family: Orbitron, sans-serif;
  font-size: 21px;
  line-height: 1.15;
  color: var(--cream);
  margin-bottom: 8px;
}
.timeline p {
  font-size: 19px;
  line-height: 1.36;
  color: var(--muted);
}

/* Ten polities will not fit as cards, so they run as two columns of the same
   accented strips the map legend uses. */
.nations {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 26px;
  align-content: center;
}
.nations p {
  font-size: 22px;
  line-height: 1.36;
  color: var(--cream);
  background: #1c1612;
  border-left: 4px solid var(--gold);
  padding: 15px 18px;
}
.nations b {
  color: var(--gold-2);
  font-weight: 700;
}
.nations .a-copper { border-left-color: var(--copper); }
.nations .a-rose { border-left-color: var(--rose); }
.nations .a-violet { border-left-color: var(--violet); }
.nations .a-teal { border-left-color: var(--teal); }
.nations .a-gold { border-left-color: var(--gold); }
.nations .a-forest { border-left-color: var(--forest); }
.nations .a-steel { border-left-color: var(--steel); }
.nations .a-blood { border-left-color: var(--blood-2); }

/* Nine age names wrap ragged as inline pills, so lay them out as a block of
   nine and drop the inline margins the grid gap replaces. */
.pill-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.pill-grid .pill {
  margin: 0;
  text-align: center;
}
.pill.is-now {
  color: var(--gold-2);
  border-color: var(--gold-2);
  background: rgba(212, 180, 90, 0.14);
}