/* Mo Pai Archive — ink, paper, and cinnabar. */

:root {
  --paper:      #faf7f2;
  --paper-2:    #f2ede4;
  --ink:        #17151a;
  --ink-soft:   #4a4550;
  --ink-faint:  #7d7686;
  --rule:       #ddd5c8;
  --rule-soft:  #e9e2d6;
  --cinnabar:   #a8321f;
  --cinnabar-2: #c9553d;
  --jade:       #2f6b5a;
  --gold:       #8a6a1f;
  --slate:      #4a5b78;
  --card:       #ffffff;
  --shadow:     0 1px 2px rgba(23,21,26,.05), 0 6px 20px rgba(23,21,26,.05);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* One frame for every page. Header, content and footer all use --maxw, so the
     page never changes width as you move around the site. --measure is the
     reading column: long-form prose is capped at it and centred inside the
     frame, because a 72rem line of 18px serif is about 105 characters and
     unreadable. Grids, cards and tables fill the frame. */
  --maxw: 72rem;
  --measure: 47rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #14131a;
    --paper-2:    #1b1a22;
    --ink:        #ece7f0;
    --ink-soft:   #b3adbd;
    --ink-faint:  #857f92;
    --rule:       #2e2c39;
    --rule-soft:  #262430;
    --cinnabar:   #e5705a;
    --cinnabar-2: #f08d78;
    --jade:       #6fc0a5;
    --gold:       #d3ac54;
    --slate:      #90a8cf;
    --card:       #1c1b24;
    --shadow:     0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.68;
  overflow-wrap: break-word;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--cinnabar); color: #fff; padding: .6rem 1rem; z-index: 100;
}
.skip:focus { left: 0; }

a { color: var(--cinnabar); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--cinnabar-2); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }

/* Reading pages — anything carrying a long-form prose column — sit in a centred
   column of --measure inside the frame. Everything on such a page is capped
   together (page head, prose, related books, pager), so the column has one left
   edge rather than a stack of differing ones. Pages without prose — the level
   grid, the body map, the shelves, the indexes — fill the frame.

   :has() is the whole mechanism. Where it is unsupported the .prose cap below
   still applies on its own, which degrades to a left-aligned reading column
   rather than to full-width text. */
.prose { max-width: var(--measure); }
main:has(.prose) > * { max-width: var(--measure); margin-inline: auto; }

/* Leading paragraphs are display type: they get the reading measure even on the
   grid pages, where the content beneath them is full width. */
.lede { max-width: var(--measure); }

/* ------------------------------------------------------------------ header */

header.site {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: saturate(140%) blur(8px);
}
header.site .bar {
  max-width: var(--maxw);
  display: flex; align-items: center; gap: 1.25rem;
  padding-top: .7rem; padding-bottom: .7rem;
  flex-wrap: wrap;
}
/* Wide screens: the panel is not a box, so the nav and the search remain direct
   flex children of the bar and lay out exactly as they did before the menu
   button existed. */
.navpanel { display: contents; }

.navtoggle {
  display: none; margin-left: auto; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; padding: 0; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 6px;
  background: var(--card); color: var(--ink);
}
.navtoggle:hover { border-color: var(--cinnabar); color: var(--cinnabar); }
.navtoggle:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 2px; }
.navtoggle .iconclose { display: none; }
.navtoggle[aria-expanded="true"] .iconopen { display: none; }
.navtoggle[aria-expanded="true"] .iconclose { display: block; }

.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
/* The mark carries its own plate and corner radius, so all the CSS owes it is a
   size. Width follows the artwork's aspect; the width/height attributes on the
   element hold the space before it loads. */
.brand .glyph { height: 2rem; width: auto; display: block; }
.brandtext { display: flex; flex-direction: column; line-height: 1.1; }
.brandtext b { font-size: 1.05rem; letter-spacing: .01em; }
.brandtext small { font-size: .68rem; color: var(--ink-faint); font-family: var(--sans); letter-spacing: .08em; text-transform: uppercase; }

header.site nav { display: flex; gap: .1rem; flex-wrap: wrap; margin-left: auto; }
header.site nav a {
  font-family: var(--sans); font-size: .8rem; color: var(--ink-soft);
  text-decoration: none; padding: .35rem .55rem; border-radius: 4px;
}
header.site nav a:hover { background: var(--paper-2); color: var(--ink); }
header.site nav a.on { color: var(--cinnabar); font-weight: 600; }

.search input {
  font-family: var(--sans); font-size: .8rem;
  padding: .38rem .7rem; border: 1px solid var(--rule);
  border-radius: 999px; background: var(--card); color: var(--ink);
  /* One width in both states. The bar wraps by design, and just above the
     breakpoint there is no slack left for a wider box, so growing this on
     focus dropped the whole form onto a second row. */
  width: 9rem;
}
.search input:focus { outline: 2px solid var(--cinnabar); outline-offset: 1px; }

/* -------------------------------------------------------------------- main */

main { padding: 2.5rem 1.25rem 4rem; }

h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.12; margin: 0 0 .6rem; letter-spacing: -.015em; }
h2 { font-size: 1.42rem; line-height: 1.25; margin: 2.6rem 0 .8rem; letter-spacing: -.01em; }
h3 { font-size: 1.05rem; margin: 1.6rem 0 .4rem; }

.kicker {
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cinnabar);
  margin: 0 0 .5rem;
}
.lede { font-size: 1.16rem; color: var(--ink-soft); margin: 0 0 .8rem; line-height: 1.6; }
.lede.sub { font-size: 1rem; }
.muted { color: var(--ink-faint); font-size: .9rem; }
.note { font-family: var(--sans); font-size: .82rem; color: var(--ink-faint); border-left: 2px solid var(--rule); padding-left: .8rem; }
.note.genuine { border-left-color: var(--jade); }
.cn { font-family: var(--serif); color: var(--ink-faint); font-size: .9em; }
.cn.big { font-size: 1.1rem; margin: 0 0 .5rem; }

.pagehead { margin-bottom: 2rem; }
.pagehead.level { display: flex; gap: 1.5rem; align-items: flex-start; }
.lvlmark {
  flex: none; width: 4.5rem; height: 4.5rem; border-radius: 8px;
  background: var(--cinnabar); color: #fff;
  display: grid; place-items: center;
  font-size: 2rem; font-weight: 700; font-family: var(--sans);
  box-shadow: var(--shadow);
}

.crumbs { font-family: var(--sans); font-size: .78rem; color: var(--ink-faint); margin-bottom: 1.4rem; }
.crumbs a { color: var(--ink-faint); }
.crumbs .sep { opacity: .6; margin: 0 .15rem; }
.crumbs [aria-current="page"] { color: var(--ink-soft); }

/* -------------------------------------------------------------------- hero */

.hero { padding: 1rem 0 2.5rem; border-bottom: 1px solid var(--rule); margin-bottom: 2.5rem; }
.hero h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); }

/* The ripple field. public/hero.js inserts the canvas; without scripting there
   is nothing here at all and the hero is unchanged, so every rule below is
   written to be inert until that element exists.

   The canvas is pushed out to the frame's edge — the wrap's 1.25rem of padding
   and a little of main's top padding — so the water runs to the margin rather
   than sitting in a box, and everything else in the hero is lifted above it. */
.hero { position: relative; }
.hero > :not(canvas) { position: relative; z-index: 1; }

.hero canvas.ripple {
  position: absolute; z-index: 0;
  left: -1.25rem; top: -1.6rem;
  width: calc(100% + 2.5rem); height: calc(100% + 1.6rem);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
  /* Dissolved at the edges, and thinnest over the left-hand column where the
     heading and the two ledes actually sit. The field is decoration; the
     sentences are not. */
  -webkit-mask-image:
    radial-gradient(120% 118% at 82% 6%, #000 8%, rgba(0,0,0,.62) 46%, transparent 86%),
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 14%, #000 46%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(120% 118% at 82% 6%, #000 8%, rgba(0,0,0,.62) 46%, transparent 86%),
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 14%, #000 46%);
  mask-composite: intersect;
}
.hero.rippled canvas.ripple { opacity: 1; }

/* Nothing to fade in when the reader has asked for stillness: the single frame
   the script draws should simply be there. */
@media (prefers-reduced-motion: reduce) {
  .hero canvas.ripple { transition: none; }
}

/* On a phone the text runs the full width, so the field steps back to a wash
   behind it rather than competing with it. */
@media (max-width: 48rem) {
  .hero canvas.ripple {
    -webkit-mask-image: radial-gradient(130% 100% at 70% 0%, #000 0%, rgba(0,0,0,.5) 45%, transparent 82%);
    mask-image: radial-gradient(130% 100% at 70% 0%, #000 0%, rgba(0,0,0,.5) 45%, transparent 82%);
    opacity: 0;
  }
  .hero.rippled canvas.ripple { opacity: .72; }
}
.slogan {
  font-family: var(--sans); font-size: .82rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint);
  margin: .4rem 0 1.2rem;
}
.cta { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; }
.btn {
  font-family: var(--sans); font-size: .85rem; font-weight: 500;
  padding: .6rem 1.1rem; border: 1px solid var(--rule); border-radius: 6px;
  text-decoration: none; color: var(--ink); background: var(--card);
}
.btn:hover { border-color: var(--cinnabar); color: var(--cinnabar); }
.btn.primary { background: var(--cinnabar); border-color: var(--cinnabar); color: #fff; }
.btn.primary:hover { background: var(--cinnabar-2); border-color: var(--cinnabar-2); color: #fff; }

.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; margin-bottom: 1rem; }
.stat { background: var(--card); padding: 1.1rem 1rem; text-align: center; }
.stat b { display: block; font-family: var(--sans); font-size: 2rem; font-weight: 700; color: var(--cinnabar); line-height: 1; }
.stat span { display: block; font-family: var(--sans); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-top: .4rem; }

.block { margin-top: 2.5rem; }
.intro { color: var(--ink-soft); }

/* ------------------------------------------------------------------ badges */

.badge {
  font-family: var(--sans); font-size: .64rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .2rem .5rem; border-radius: 3px; white-space: nowrap;
  border: 1px solid currentColor;
}
.badge.s-documented    { color: var(--jade); }
.badge.s-attested      { color: var(--slate); }
.badge.s-fragmentary   { color: var(--gold); }
.badge.s-reconstructed { color: var(--ink-faint); }

.statusgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .9rem; }
.statuscard {
  display: block; background: var(--card); border: 1px solid var(--rule);
  border-radius: 8px; padding: 1rem 1.1rem;
  text-decoration: none; color: var(--ink);
  transition: border-color .12s ease, transform .12s ease;
}
a.statuscard:hover { transform: translateY(-1px); color: var(--ink); }
.statuscard p, .statuscard .blurb { display: block; margin: .5rem 0 0; font-size: .92rem; color: var(--ink-soft); }
.statushead { display: flex; align-items: center; gap: .6rem; justify-content: space-between; }
.statushead .count { font-family: var(--sans); font-size: .74rem; color: var(--ink-faint); }
.statuscard.s-documented    { border-left: 3px solid var(--jade); }
.statuscard.s-attested      { border-left: 3px solid var(--slate); }
.statuscard.s-fragmentary   { border-left: 3px solid var(--gold); }
.statuscard.s-reconstructed { border-left: 3px solid var(--rule); }

/* ------------------------------------------------------------------- cards */

.card {
  display: block; background: var(--card); border: 1px solid var(--rule);
  border-radius: 8px; padding: 1rem 1.1rem; text-decoration: none; color: var(--ink);
  transition: border-color .12s ease, transform .12s ease;
}
.card:hover { border-color: var(--cinnabar); transform: translateY(-1px); color: var(--ink); }
.card .tag { display: block; font-family: var(--sans); font-size: .82rem; color: var(--ink-soft); margin-top: .3rem; line-height: 1.45; }
.card .meta { display: block; font-family: var(--sans); font-size: .7rem; color: var(--ink-faint); margin-top: .6rem; letter-spacing: .05em; text-transform: uppercase; }
.card .sec { display: block; font-family: var(--sans); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cinnabar); margin-bottom: .3rem; }

/* Three across on desktop, and fixed rather than auto-fit: at the full 72rem
   frame auto-fit takes a fourth column, which drops the cards below a
   comfortable measure and makes a six-article section read as two ragged rows. */
.cardgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.bandgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .9rem; }
.card.band .range { font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .1em; color: var(--cinnabar); display: block; }
.card.band strong { display: block; margin-top: .2rem; }
.card.band .editorial { display: inline-block; margin-top: .7rem; font-family: var(--sans); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--rule); padding: .12rem .4rem; border-radius: 3px; }
.card.band .editorial.genuine { color: var(--jade); border-color: var(--jade); }

.levelgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .7rem; }
.card.lvl { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: .8rem; align-items: start; padding: .8rem .9rem; }
.card.lvl .num {
  font-family: var(--sans); font-size: 1.25rem; font-weight: 700;
  color: var(--cinnabar); line-height: 1.2; text-align: right;
}
.card.lvl .body strong { display: block; line-height: 1.3; }
.card.lvl .body .cn { display: block; font-size: .78rem; }
.card.lvl .body .tag { font-size: .78rem; margin-top: .25rem; }

/* ----------------------------------------------------------------- filters */

.filters { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; margin-bottom: .6rem; }
.flabel { font-family: var(--sans); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-right: .3rem; min-width: 3.4rem; }
.chip {
  font-family: var(--sans); font-size: .76rem; text-decoration: none;
  padding: .28rem .68rem; border: 1px solid var(--rule); border-radius: 999px;
  color: var(--ink-soft); background: var(--card);
}
.chip:hover { border-color: var(--cinnabar); color: var(--cinnabar); }
.chip.on { background: var(--cinnabar); border-color: var(--cinnabar); color: #fff; }
.resultcount { font-family: var(--sans); font-size: .8rem; color: var(--ink-faint); margin: 1.2rem 0 0; }

.bandsection { margin-top: 2.6rem; }
.bandhead { border-top: 2px solid var(--ink); padding-top: .8rem; margin-bottom: 1.1rem; }
.bandhead h2 { margin: 0 0 .3rem; }
.bandhead h2 a { color: var(--ink); text-decoration: none; }
.bandhead h2 a:hover { color: var(--cinnabar); }
.bandhead .range { font-family: var(--sans); font-size: .8rem; color: var(--ink-faint); font-weight: 400; }
.bandhead p { margin: 0; font-size: .92rem; color: var(--ink-soft); max-width: 46rem; }

.twocol { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.2rem 2rem; margin: 2rem 0; }
.twocol h2 { margin: 0 0 .3rem; font-size: .78rem; font-family: var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cinnabar); }
.twocol p { margin: 0; font-size: .95rem; color: var(--ink-soft); }

/* -------------------------------------------------------------- level meta */

.metarow { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule-soft); }
.metabit { font-family: var(--sans); font-size: .8rem; color: var(--ink-soft); max-width: 28rem; }
.metabit b { display: block; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }

/* ------------------------------------------------------------------- prose */

.prose p { margin: 0 0 1.1rem; }
.prose h2 { border-top: 1px solid var(--rule-soft); padding-top: 1.6rem; }
.prose h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
main ul, main ol { padding-left: 1.3rem; }
main li { margin-bottom: .55rem; }

blockquote {
  margin: 1.8rem 0; padding: .2rem 0 .2rem 1.4rem;
  border-left: 3px solid var(--cinnabar); font-style: italic; color: var(--ink-soft);
}
blockquote p { margin: 0; }
blockquote cite { display: block; margin-top: .5rem; font-style: normal; font-family: var(--sans); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }

.callout {
  margin: 1.8rem 0; padding: 1.1rem 1.3rem;
  background: var(--card); border: 1px solid var(--rule);
  border-left: 3px solid var(--slate); border-radius: 6px;
}
.callout h3 { margin: 0 0 .4rem; font-family: var(--sans); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.callout p { margin: 0 0 .7rem; font-size: .96rem; }
.callout p:last-child { margin-bottom: 0; }
.callout.t-warn { border-left-color: var(--cinnabar); }
.callout.t-warn h3 { color: var(--cinnabar); }
.callout.t-key { border-left-color: var(--gold); }
.callout.t-key h3 { color: var(--gold); }
.callout.big p { font-size: 1.02rem; }

/* Article video. The source is 4:3 and low resolution — it is 1980s broadcast
   television — so the player is capped rather than stretched across the column,
   and the frame is matted in ink so the letterboxing reads as deliberate. */
figure.video { margin: 2rem 0; }
figure.video video {
  display: block; width: 100%; height: auto; max-height: 70vh;
  aspect-ratio: 4 / 3; background: #000;
  border: 1px solid var(--rule); border-radius: 6px; box-shadow: var(--shadow);
}
figure.video figcaption {
  margin-top: .7rem; font-family: var(--sans); font-size: .84rem;
  line-height: 1.55; color: var(--ink-faint);
  border-left: 2px solid var(--rule); padding-left: .8rem;
}
figure.video figcaption a { color: var(--ink-soft); }

/* YouTube embed. The 4:3 broadcast source pillarboxes inside the player's 16:9
   frame, which is the player's business rather than ours. */
figure.video .ytframe {
  position: relative; aspect-ratio: 16 / 9; background: #000;
  border: 1px solid var(--rule); border-radius: 6px; box-shadow: var(--shadow);
  overflow: hidden;
}
figure.video .ytframe iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
figure.video .ytlink {
  display: inline-block; margin-top: .35rem; color: var(--cinnabar);
  font-weight: 500; text-decoration: none; white-space: nowrap;
}
figure.video .ytlink:hover { text-decoration: underline; }

/* The /videos page. Players are the widest thing on it, so each entry is capped
   at the reading measure and the section runs as a single column — a grid of
   video players is a page nobody watches anything on. */
.videogroup > .intro { max-width: var(--measure); }
.videoitem {
  max-width: var(--measure);
  padding-top: 1.6rem; margin-top: 1.6rem;
  border-top: 1px solid var(--rule-soft);
}
.videogroup .videoitem:first-of-type { border-top: 0; padding-top: .4rem; margin-top: .8rem; }
.videoitem h3 { margin: 0 0 .15rem; font-size: 1.12rem; font-family: var(--serif); }
.videoitem h3 a { color: var(--ink); text-decoration: none; }
.videoitem h3 a:hover { color: var(--cinnabar); }
.videocredit {
  margin: 0; font-family: var(--sans); font-size: .74rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint);
}
.videoitem figure.video { margin: 1rem 0 1.1rem; }
.videoitem p { font-size: .95rem; }
.videoitem .note { margin-top: .8rem; }

.tablewrap { overflow-x: auto; margin: 1.6rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; font-family: var(--sans); }
th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
th { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); border-bottom: 1px solid var(--rule); }

.sources { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.sources h2, .sources h3 { font-family: var(--sans); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .6rem; border: 0; padding: 0; }
.sources ul { padding-left: 1.1rem; }
.sources li { font-size: .86rem; color: var(--ink-soft); }

.pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); font-family: var(--sans); font-size: .84rem; }
.pager a { text-decoration: none; }
.pager .mid { color: var(--ink-faint); }

/* ------------------------------------------------- people / timeline / etc */

.peoplelist { display: grid; gap: 1.2rem; }
.person { background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 1.3rem 1.4rem; }
.person h2 { margin: 0; font-size: 1.25rem; }
.person .role { font-family: var(--sans); font-size: .76rem; letter-spacing: .05em; color: var(--ink-faint); margin: .2rem 0 .8rem; text-transform: uppercase; }
.person p { font-size: .96rem; margin: 0 0 .6rem; }
.more { font-family: var(--sans); font-size: .82rem; }

.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--rule); }
.timeline li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: 0 0 1.8rem 1.5rem; position: relative; }
.timeline li::before {
  content: ''; position: absolute; left: -6px; top: .55rem;
  width: 10px; height: 10px; border-radius: 50%; background: var(--rule); border: 2px solid var(--paper);
}
.timeline li.tl-event::before { background: var(--cinnabar); }
.timeline li.tl-source::before { background: var(--gold); }
.timeline li.tl-lineage::before { background: var(--jade); }
.timeline li.tl-community::before { background: var(--slate); }
.timeline .year { font-family: var(--sans); font-size: .78rem; font-weight: 600; color: var(--cinnabar); letter-spacing: .03em; padding-top: .25rem; }
.timeline h2, .timeline h3 { margin: 0 0 .25rem; font-size: 1.02rem; letter-spacing: 0; }
.timeline h2 a.anchor { color: var(--ink); text-decoration: none; }
.timeline h2 a.anchor:hover { color: var(--cinnabar); text-decoration: underline; }
.timeline p { margin: 0; font-size: .93rem; color: var(--ink-soft); }

.glossary { margin: 0; }
.gitem { padding: .9rem 0; border-bottom: 1px solid var(--rule-soft); }
.gitem dt { font-weight: 700; font-size: 1.02rem; }
.gitem dd { margin: .25rem 0 0; font-size: .94rem; color: var(--ink-soft); }

.sourcekeys, .biblio { padding-left: 0; list-style: none; }
.sourcekeys li, .biblio li { padding: .7rem 0; border-bottom: 1px solid var(--rule-soft); font-size: .94rem; }
code { font-family: var(--mono); font-size: .82em; background: var(--paper-2); padding: .1rem .35rem; border-radius: 3px; }

/* ------------------------------------------------------------------ search */

.bigsearch { display: flex; gap: .5rem; margin-bottom: 2rem; }
.bigsearch input {
  flex: 1; font-family: var(--sans); font-size: .95rem; padding: .7rem 1rem;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--card); color: var(--ink);
}
.bigsearch input:focus { outline: 2px solid var(--cinnabar); outline-offset: 1px; }
.bigsearch button { font-family: var(--sans); font-size: .88rem; padding: .7rem 1.3rem; border: 0; border-radius: 6px; background: var(--cinnabar); color: #fff; cursor: pointer; }

.results { list-style: none; padding: 0; }
.results li { margin-bottom: .6rem; }
.results a { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: .8rem; align-items: baseline; padding: .8rem 1rem; background: var(--card); border: 1px solid var(--rule); border-radius: 6px; text-decoration: none; color: var(--ink); }
.results a:hover { border-color: var(--cinnabar); }
.results .kind { font-family: var(--sans); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.results .tag { display: block; font-family: var(--sans); font-size: .82rem; color: var(--ink-soft); margin-top: .2rem; }
.empty { color: var(--ink-faint); font-style: italic; }

.results.plain a { grid-template-columns: 5.5rem 1fr; }

/* --------------------------------------------------------------- body map */

/* Two views side by side where there is room, stacked where there is not. */
.bodymaps { display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: 1.5rem; margin: 2.2rem 0; }
.bodymaps .bodymap { margin: 0; }

.bodymap { margin: 2.2rem 0; }
.bodymap svg {
  display: block; width: 100%; max-width: 32rem; height: auto; margin: 0 auto;
  font-family: var(--sans);
}
.bodymap figcaption {
  font-family: var(--sans); font-size: .78rem; color: var(--ink-faint);
  text-align: center; max-width: 34rem; margin: .6rem auto 0; line-height: 1.5;
}
.bodymap figcaption b { color: var(--ink-soft); }

.bodymap .body { fill: none; stroke: var(--ink-faint); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.bodymap .orbit path { fill: none; stroke-width: 2; stroke-linecap: round; }
.bodymap .du, .bodymap .legend line.du { stroke: var(--cinnabar); }
.bodymap .ren, .bodymap .legend line.ren { stroke: var(--slate); }

.bodymap .leader { stroke: var(--rule); stroke-width: 1; }
.bodymap .pt.field { fill: var(--paper); stroke: var(--cinnabar); stroke-width: 2; }
.bodymap .pt.core { fill: var(--cinnabar); stroke: none; }
.bodymap .pt.node { fill: var(--paper); stroke: var(--gold); stroke-width: 1.75; }
.bodymap text.lbl { fill: var(--ink); font-size: 12px; }
.bodymap text.sub { fill: var(--ink-faint); font-size: 10px; letter-spacing: .04em; }

.bodymap a { text-decoration: none; }
.bodymap a:hover .pt.field, .bodymap a:hover .pt.node { stroke: var(--cinnabar-2); }
.bodymap a:hover text.lbl { fill: var(--cinnabar); }
.bodymap a:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 2px; }

.bodymap .pt.field.on, .bodymap .pt.node.on { stroke: var(--cinnabar); stroke-width: 3; }
.bodymap text.lbl.on { fill: var(--cinnabar); font-weight: 700; }
.bodymap .leader.on { stroke: var(--cinnabar); }

.bodymap .legend line { stroke-width: 3; stroke-linecap: round; }
.bodymap .legend text { fill: var(--ink-faint); font-size: 11px; }

/* ------------------------------------------------------------- dan tien */

.centregrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .9rem; }
.card.centre .cn { display: block; font-size: .85rem; margin-top: .1rem; }
.card.centre .treasure {
  display: block; font-family: var(--sans); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cinnabar); margin-top: .5rem;
}
.card.centre .badge { margin-top: .7rem; display: inline-block; }

.centrehead .cn.big { margin-bottom: .8rem; }
.factrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.2rem 2rem; margin: 1.6rem 0; padding: 1.2rem 0; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
.factrow h2 { margin: 0 0 .3rem; font-size: .72rem; font-family: var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--cinnabar); border: 0; padding: 0; }
.factrow p, .factrow ul { margin: 0; font-size: .93rem; color: var(--ink-soft); }
.factrow ul { padding-left: 1.1rem; }
.factrow li { margin-bottom: .3rem; }

.structures td .cn { font-size: .88em; }
.structures .kind { font-family: var(--sans); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.structures tr:target { background: var(--paper-2); }
.structures .named { color: var(--jade); }
.structures .unnamed { color: var(--ink-faint); }

/* ------------------------------------------------------------------- books */

.bookgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: .9rem; }

.card.book {
  display: grid; grid-template-columns: 7rem 1fr; gap: 1.1rem;
  background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
  padding: 1.1rem 1.2rem;
}
.card.book:hover { border-color: var(--rule); transform: none; }
.card.book h3 { margin: 0 0 .2rem; font-size: 1.02rem; line-height: 1.3; }
.card.book h3 a { color: var(--ink); text-decoration: none; }
.card.book h3 a:hover { color: var(--cinnabar); }
.card.book .tag { margin-top: .5rem; }
.bookbody { min-width: 0; } /* long titles must wrap, not widen the grid track */
.coverlink { display: block; text-decoration: none; }

.cover {
  display: block; width: 7rem; height: auto; border-radius: 3px;
  box-shadow: var(--shadow); background: var(--paper-2);
}
.cover.placeholder {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 7rem; min-height: 10rem; padding: .8rem .7rem;
  background: linear-gradient(160deg, var(--paper-2), var(--card));
  border: 1px solid var(--rule); border-left: 4px solid var(--cinnabar);
  border-radius: 3px; box-shadow: var(--shadow);
}
.cover.placeholder b { font-size: .82rem; line-height: 1.25; font-weight: 600; }
.cover.placeholder i { font-family: var(--sans); font-style: normal; font-size: .66rem; color: var(--ink-faint); }

.byline { font-family: var(--sans); font-size: .76rem; color: var(--ink-faint); margin: 0; }
.buyrow { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .9rem 0 0; }
.btn.amazon { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn.amazon:hover { background: var(--cinnabar); border-color: var(--cinnabar); color: #fff; }
.essential {
  font-family: var(--sans); font-size: .64rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--jade); border: 1px solid currentColor;
  padding: .2rem .5rem; border-radius: 3px;
}

.shelf .intro { max-width: 46rem; }
.pagehead.bookhead { display: flex; gap: 2rem; align-items: flex-start; }
.pagehead.bookhead .coverwrap { flex: none; }
.pagehead.bookhead .cover, .pagehead.bookhead .cover.placeholder { width: 10rem; min-height: 14rem; }
.bookdetail .byline { font-size: .88rem; margin-bottom: .4rem; }
.relatedbooks { border-top: 1px solid var(--rule); padding-top: 1.2rem; }

.adunit {
  margin: 2rem 0; padding: 1rem; text-align: center;
  border: 1px dashed var(--rule); border-radius: 8px; background: var(--paper-2);
}
.adlabel {
  display: block; font-family: var(--sans); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: .6rem;
}
/* ------------------------------------------------------------------- share */

/* Screen-reader-only text. Each share control is an icon, so the name a screen
   reader announces has to live somewhere; this is it. */
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

.share {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem;
  margin: 3rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--rule);
}
.sharelabel {
  margin: 0; font-family: var(--sans); font-size: .65rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}
.sharelist { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.sharebtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; padding: 0; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--card); color: var(--ink-soft); text-decoration: none;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.sharebtn:hover { color: var(--cinnabar); border-color: var(--cinnabar); background: var(--paper-2); }
.sharebtn:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 2px; }
.sharebtn .icon { display: block; }

/* Copying needs the clipboard API, so the button is only offered where scripts
   run. The links either side of it work regardless. */
.copyitem { display: none; }
html.js .copyitem { display: block; }

.sharenote {
  margin: 0; font-family: var(--sans); font-size: .72rem; color: var(--jade);
}

/* ------------------------------------------------------------------ footer */

footer.site { border-top: 1px solid var(--rule); background: var(--paper-2); padding: 2rem 0 2.4rem; margin-top: 4rem; }
footer.site .wrap { max-width: var(--maxw); }
/* The note runs the full frame rather than the reading measure: it is a
   standing notice, not prose to be read a line at a time. */
footer.site p { font-size: .88rem; color: var(--ink-soft); max-width: none; }
.footnote p { margin: 0 0 .6rem; }
.footnote p:last-child { margin-bottom: 0; }

/* Seven columns, one per hub, fixed rather than auto-fit so the map keeps the
   same shape as the site's own structure instead of reflowing by label length.
   minmax(0,1fr) rather than 1fr: without it a long label sets a floor on the
   track and the seven stop being equal. */
.footgrid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1.3rem 1rem; margin-top: 1.8rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
}
.footcol h2 {
  margin: 0 0 .45rem; font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink); line-height: 1.3;
}
.footcol h2 a { color: inherit; text-decoration: none; }
.footcol h2 a:hover { color: var(--cinnabar); }
.footcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .28rem; }
.footcol li { margin: 0; }
.footcol a, .footcol button {
  font-family: var(--sans); font-size: .72rem; line-height: 1.4;
  color: var(--ink-faint); text-decoration: none;
}
/* Signing out changes state, so it is a form. It should still read as one more
   entry in the list rather than as a control. */
.footcol form { margin: 0; }
.footcol button {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font: inherit;
  font-family: var(--sans); font-size: .72rem; color: var(--ink-faint);
}
.footcol ul a:hover, .footcol button:hover {
  color: var(--cinnabar); text-decoration: underline; text-underline-offset: 2px;
}

.footbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem;
  margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid var(--rule);
}
.footbar .brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); }
.footbar .copy { margin: 0; font-family: var(--sans); font-size: .78rem; color: var(--ink-faint); }
.footbar .copy a { color: inherit; text-decoration: none; }
.footbar .copy a:hover { color: var(--cinnabar); }
.footbar .copy .sep { margin: 0 .25rem; opacity: .5; }
.footbar .online {
  margin: 0 0 0 auto; display: flex; align-items: center; gap: .45rem;
  font-family: var(--sans); font-size: .78rem; color: var(--ink-faint); white-space: nowrap;
}
.footbar .online .dot {
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--jade);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jade) 22%, transparent);
}

/* Seven equal columns need the full frame. Below it the map folds rather than
   squeezing, because a column narrower than its longest label is unreadable. */
@media (max-width: 68rem) {
  .footgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .footgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem .9rem; }
  .footbar .online { margin-left: 0; }
}

/* -------------------------------------------------- menu: phone and tablet */

/* Ten navigation items plus a search box stop fitting on one line well before
   a phone. The breakpoint is the point at which they wrap, not a device. */
@media (max-width: 68rem) {
  .cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .navtoggle { display: inline-flex; }

  /* Scripting available: the panel is a drawer the button opens. Without it the
     class is never added, this rule never matches, and the navigation simply
     stays where it is — visible, wrapped onto its own lines. */
  html.js .navpanel { display: none; flex-basis: 100%; }
  html.js .navpanel.open {
    display: flex; flex-direction: column; gap: .5rem;
    padding: .4rem 0 .6rem; border-top: 1px solid var(--rule-soft); margin-top: .5rem;
  }

  header.site nav { flex-direction: column; align-items: stretch; gap: .1rem; margin-left: 0; }
  header.site nav a { padding: .55rem .7rem; border-radius: 6px; font-size: .9rem; }
  header.site nav a.on { background: var(--paper-2); }

  .search { display: block; }
  .search input, .search input:focus { width: 100%; }
}

@media (max-width: 640px) {
  body { font-size: 17px; }
  .cardgrid { grid-template-columns: 1fr; }
  .pagehead.level, .pagehead.bookhead { flex-direction: column; gap: 1rem; }
  .card.book { grid-template-columns: 1fr; }
  .bookgrid { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 1fr; gap: .2rem; }
  .results a { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- practice */

.elementlist { display: grid; gap: 1rem; }
.element { background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 1.1rem 1.3rem; }
.element > header { display: flex; gap: 1rem; align-items: start; margin-bottom: .7rem; }
.element h3 { margin: 0; font-size: 1.12rem; }
.element .tag { display: block; font-family: var(--sans); font-size: .86rem; color: var(--ink-soft); margin-top: .2rem; }
.element p { font-size: .96rem; }
.elementnum {
  flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--cinnabar); color: #fff;
  font-family: var(--sans); font-weight: 700; font-size: .9rem;
}
.element .sources { margin-top: 1.2rem; padding-top: .9rem; }

.progression { width: 100%; border-collapse: collapse; font-size: .92rem; }
.progression th, .progression td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.progression th { font-family: var(--sans); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.progression td:first-child { white-space: nowrap; }
.progression td:first-child a { text-decoration: none; font-family: var(--sans); font-size: .82rem; }
.progression td:first-child b { font-size: 1.3rem; color: var(--cinnabar); }

.documentlist { display: grid; gap: 1rem; }
.document { background: var(--card); border: 1px solid var(--rule); border-left: 3px solid var(--gold); border-radius: 8px; padding: 1.1rem 1.3rem; }
.document h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
.document > .meta { margin-bottom: .7rem; }
.provenance { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: .9rem 0 0; font-size: .9rem; }
.provenance dt {
  font-family: var(--sans); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); padding-top: .2rem; white-space: nowrap;
}
.provenance dd { margin: 0; color: var(--ink-soft); }

/* The curriculum, stage by stage. Same card as an element, keyed gold rather
   than cinnabar so the two lists stay tellable apart while scrolling. */
.stagelist { display: grid; gap: 1rem; }
.stage {
  background: var(--card); border: 1px solid var(--rule);
  border-left: 3px solid var(--gold); border-radius: 8px; padding: 1.1rem 1.3rem;
}
.stage > header { display: flex; gap: 1rem; align-items: baseline; margin-bottom: .7rem; }
.stage h3 { margin: 0; font-size: 1.12rem; }
.stage .tag { display: block; font-family: var(--sans); font-size: .88rem; color: var(--ink-soft); margin-top: .2rem; }
.stage p { font-size: .96rem; }
.stagelabel {
  flex: none; font-family: var(--sans); font-weight: 700; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold);
  border: 1px solid currentColor; border-radius: 3px; padding: .2rem .5rem; white-space: nowrap;
}
.stagefacts { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 1rem 0 0; font-size: .9rem; }
.stagefacts dt {
  font-family: var(--sans); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); padding-top: .2rem; white-space: nowrap;
}
.stagefacts dd { margin: 0; color: var(--ink-soft); }
.stagenote {
  margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid var(--rule-soft);
  font-size: .9rem; color: var(--ink-soft);
}

/* What the documents say about their own casualties. */
.testimony { display: grid; gap: .8rem; margin: 1.4rem 0; }
.witness {
  margin: 0; padding: .9rem 1.2rem; background: var(--paper-2);
  border-left: 3px solid var(--cinnabar); border-radius: 0 6px 6px 0;
}
.witness p { margin: 0; font-size: .95rem; }
.witness cite {
  display: block; margin-top: .5rem; font-style: normal; font-family: var(--sans);
  font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint);
}
.problemlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .8rem; margin: 1.4rem 0; }
.problem { background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: .9rem 1.1rem; }
.problem h3 { margin: 0 0 .35rem; font-size: .96rem; color: var(--cinnabar); }
.problem p { margin: 0; font-size: .9rem; color: var(--ink-soft); }

.disagreements { margin: 1.2rem 0 0; }
.disagreements dt {
  font-family: var(--sans); font-weight: 700; font-size: .92rem;
  margin-top: 1.1rem; padding-top: .8rem; border-top: 1px solid var(--rule-soft);
}
.disagreements dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.disagreements dd { margin: .3rem 0 0; color: var(--ink-soft); font-size: .95rem; }

/* ------------------------------------------------- practice illustrations */

.practicefig { margin: 1.6rem 0; }
.practicefig svg { display: block; width: 100%; height: auto; max-width: 34rem; margin: 0 auto; }
.practicefig figcaption {
  max-width: 34rem; margin: .7rem auto 0; font-family: var(--sans);
  font-size: .8rem; line-height: 1.5; color: var(--ink-faint); text-align: center;
}
.element .practicefig, .stage .practicefig { margin: 1.4rem 0 .4rem; }

/* Body parts are closed outlines filled with the paper colour, so a limb drawn
   later occludes one drawn earlier. The fill has to follow the theme or it
   shows as a white patch on a dark page. */
.practicefig .part { stroke: var(--ink-faint); fill: var(--paper); }
/* A trunk is filled by one pair of halves and outlined by another. CSS beats a
   presentation attribute, so the fill pair has to be told not to stroke here
   too, or the seam it exists to avoid comes straight back down the midline. */
.practicefig .part.fillonly { stroke: none; }
.practicefig .part.far { stroke: var(--rule); }
.practicefig .edge { stroke: var(--ink-faint); }
.practicefig .face, .practicefig .navel { stroke: var(--ink-faint); }

.practicefig .ground { stroke: var(--ink-faint); }
.practicefig .ground .hatch { stroke: var(--rule); }
.practicefig .sky { stroke: var(--gold); }

.practicefig .yang, .practicefig .rotation { color: var(--cinnabar); }
.practicefig .yin { color: var(--slate); }
.practicefig .burst { stroke: var(--cinnabar); }

.practicefig .field { stroke: var(--cinnabar); fill: var(--paper); }
.practicefig .core { fill: var(--cinnabar); }
.practicefig .ring { stroke: var(--cinnabar); }
.practicefig .node { stroke: var(--gold); fill: var(--paper); }
.practicefig .leader, .practicefig .frame, .practicefig .axis { stroke: var(--rule); }

.practicefig .cords { stroke: var(--ink-faint); }
.practicefig .cutmark { stroke: var(--cinnabar); }
.practicefig .breathline { stroke: var(--cinnabar); }
.practicefig .lung .frame { stroke: var(--rule); }
.practicefig .lung .fillbar { fill: var(--slate); }

.practicefig text.lbl { fill: var(--ink); }
.practicefig text.sub, .practicefig text.tick { fill: var(--ink-faint); }

.lang {
  font-family: var(--sans); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--rule); border-radius: 3px; padding: .05rem .35rem; color: var(--ink-faint);
}

@media (max-width: 640px) {
  .provenance, .stagefacts { grid-template-columns: 1fr; gap: .1rem; }
  .provenance dt, .stagefacts dt { padding-top: .5rem; }
  .stage > header { flex-direction: column; gap: .5rem; }
  .stagelabel { align-self: start; }
}