:root {
  --paper: #EBE3D0;
  --paper-card: #F5F0E4;
  --ink: #24303D;
  --ink-soft: #4A5561;
  --slate: #5C6672;
  --wine: #7A2E2E;
  --brass: #9C7A3C;
  --brass-deep: #6B5127;
  --line: #C9BFA4;
  --font-display: 'Fraunces', serif;
  --font-body: 'Source Serif 4', serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
}

a { color: inherit; }

/* Grade badges are links to the definitions on /sourcing-method/#grades —
   a reader meets PROVEN as a coloured pill long before they meet the page
   that defines it. The five classes are styled below as if they were spans;
   this rule is the whole difference. */
a.badge-proven, a.badge-probable, a.badge-possible,
a.badge-unproven, a.badge-disproven { text-decoration: none; }

.nav-toggle-checkbox {
  display: none;
}
.nav-toggle-label {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 15px;
  cursor: pointer;
}
.nav-toggle-label span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--ink);
}
.nav-toggle-checkbox:checked ~ .nav-toggle-label span {
  background: var(--wine);
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 0.5px solid var(--line);
  font-family: var(--font-mono);
  font-size: 13px;
}
.site-header .site-title-lockup {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-decoration: none;
  line-height: 1.2;
}
.site-header .site-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.site-header .site-title-lockup:hover .site-title { color: var(--wine); }
.site-header .site-tagline {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--slate);
}
.site-header nav a { margin-left: 1.5rem; text-decoration: none; }
.site-header nav a:hover { color: var(--wine); }

.nav-dropdown {
  display: inline-block;
  position: relative;
  margin-left: 1.5rem;
}
.nav-dropdown-toggle {
  margin-left: 0 !important;
}
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--paper-card);
  border: 0.5px solid var(--line);
  border-radius: 4px;
  padding: 14px 0 8px;
  min-width: 300px;
  box-shadow: 0 6px 18px rgba(36, 48, 61, 0.14);
  z-index: 10;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  display: block;
}
.nav-dropdown-menu a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-left: 0 !important;
  padding: 6px 16px;
  white-space: nowrap;
  color: var(--ink-soft);
}
.nav-dropdown-menu a:hover {
  color: var(--wine);
  background: var(--paper);
}
.nav-child-note {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--slate);
}
.nav-dropdown-menu a:hover .nav-child-note { color: var(--brass); }

.nav-dd-checkbox,
.nav-dd-label { display: none; }

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 2rem 4rem;
  zoom: 120%;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--wine);
  margin-bottom: 14px;
}

/* ============================================================
   PAGE MASTHEAD
   Rendered by base.njk from front matter (eyebrow / headline /
   subhead). The meta strip states no facts of its own: the set
   name comes from site.nav, the source count is counted from the
   page's own citation blocks at build time.
   ============================================================ */

.page-head {
  border-top: 2px solid var(--ink);
  border-bottom: 0.5px solid var(--line);
  padding: 22px 0 20px;
  margin-bottom: 46px;
}
.page-head .eyebrow {
  color: var(--brass-deep);
  margin-bottom: 18px;
}
.page-head h1 { margin-bottom: 18px; }
.page-head .subhead { margin-bottom: 0; }

.page-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 22px 0 0;
  max-width: none;
}
.page-meta .page-meta-set { color: var(--brass-deep); }
/* hang the separator at the end of the first line rather than the start of
   the second. No nowrap here: at ~380px the source phrase is wider than the
   column, and nowrap pushes it off the screen. */
.page-meta span:not(:last-child)::after {
  content: "\00B7";
  color: var(--line);
  margin: 0 0.55em 0 0.7em;
}

h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.15;
  color: var(--ink);
  max-width: 560px;
  margin: 0 0 16px;
}

.subhead {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 560px;
  margin-bottom: 36px;
}

/* Source tally — a credibility line naming how many citations back this
   page, on ancestor-profile pages only. Deliberately brass, not wine, so
   it can't be mistaken for a grade badge. See TODO item 8b3. */
.source-tally {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--slate);
  margin: -22px 0 32px;
}
.source-tally strong {
  color: var(--brass-deep);
  font-weight: 500;
}

.chain-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 8px 0 28px;
}
@media (max-width: 640px) {
  .chain-grid { grid-template-columns: 1fr; }
}

.chain-card {
  background: var(--paper-card);
  border: 0.5px solid var(--line);
  border-radius: 4px;
  padding: 18px 20px;
}
.chain-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.chain-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  margin: 0;
  color: var(--ink);
}
.badge-proven {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--paper-card);
  background: var(--wine);
  border: 1px solid var(--wine);
  border-radius: 20px;
  padding: 3px 10px;
}
.chain-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

/* Opt-in variant: chain-cards used as primary calls to action.
   Applied per-instance; does not affect cards elsewhere on the site. */
.chain-card.is-primary {
  border-left: 2px solid var(--brass);
  background: var(--paper-card);
}
.chain-card.is-primary:hover {
  border-color: var(--brass);
}
.chain-card.is-primary h3 {
  font-size: 17px;
}
.chain-card.is-primary .citation a {
  color: var(--wine);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
}
.chain-card.is-primary .citation a:hover {
  border-bottom-color: var(--wine);
}
.citation {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--slate);
}

/* --- source cards: the site's signature element, 210 of them ---
   Scoped to p.citation so the <div class="citation"> link footers
   inside .chain-card keep their plain treatment. */
main p.citation {
  background: var(--paper-card);
  border-left: 2px solid var(--brass);
  padding: 13px 18px 14px;
  margin: 0 0 30px;
  max-width: 660px;
}
main p.citation::before {
  content: "SOURCES";
  display: block;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--brass-deep);
  margin-bottom: 6px;
}

.closing-note {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 560px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 0.5px solid var(--line);
}

.site-footer {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate);
  padding: 2rem;
  text-align: center;
  border-top: 0.5px solid var(--line);
  zoom: 120%;
}

.convergence-diagram { width: 100%; height: auto; margin: 8px 0 32px; }

.pullquote {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  max-width: 560px;
  margin: 4px 0 18px;
  padding: 2px 0 2px 20px;
  border-left: 2px solid var(--brass);
}

.diagram-scroll {
  overflow-x: auto;
  margin: 10px 0 8px;
  padding-bottom: 4px;
}
.descent-diagram {
  display: block;
  width: 100%;
  min-width: 640px;
  height: auto;
}
.diagram-note {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--slate);
  margin: 0 0 34px;
}

/* Homepage diagram: a wide version for desktop, a stacked version for phones.
   The wide one keeps the 640px min-width and scrolls; the narrow one is built
   to fit a phone at close to 1:1, so it never needs horizontal scrolling. */
.diagram-narrow {
  display: none;
  width: 100%;
  height: auto;
}
@media (max-width: 640px) {
  .diagram-wide { display: none; }
  .diagram-narrow { display: block; }
}

.spine {
  position: relative;
  padding-left: 28px;
  margin: 8px 0 40px;
}
.spine::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
}
.spine-item {
  position: relative;
  padding-bottom: 30px;
}
.spine-item:last-child { padding-bottom: 0; }
.spine-item::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brass);
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--line);
}
.spine-item-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.spine-item h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  margin: 0;
  color: var(--ink);
}
.gen-dates {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate);
  margin-bottom: 8px;
}
.spine-item p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 8px;
}

/* --- spine strip: the same rail, laid on its side -----------
   Where this person sits on their line, at the top of every
   profile page in _data/spines.js. .spine above is this idea at
   full length, one card per generation; this is one box per
   generation, the current subject picked out, and it is rendered
   by _includes/spine-strip.njk rather than written per page.
   Eight boxes have to fit a 696px column, so a box is a label
   and a year and nothing else. */
.spine-strip, .reach-strip { margin: 0 0 36px; }
.spine-strip-head, .reach-strip-head {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 10px;
}
.spine-strip-head a, .reach-strip-head a { color: var(--brass-deep); }
.spine-strip-steps, .reach-strip-steps {
  display: flex;
  align-items: stretch;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
  /* Eight boxes fit the column at the desktop width and stop fitting somewhere
     under it. They wrap rather than scroll: scrolling hid the current box
     entirely on a phone whenever the subject was late in the line, which is
     the one box the strip exists to show. Wrapped, the order still reads
     left-to-right and top-to-bottom, and nothing is off-screen. */
  flex-wrap: wrap;
}
.spine-strip-step, .reach-strip-step {
  flex: 1 1 0;
  min-width: 76px;
}
/* On a phone the strip is three boxes to a row, fixed rather than growing:
   left to themselves the boxes on a short last row stretch to fill it, and a
   generation sequence whose last two boxes are half again as wide as the six
   above them reads as though the last two mattered more. */
@media (max-width: 640px) {
  .spine-strip-step { flex: 0 1 calc(33.333% - 4px); }
  /* The reach strip is four boxes: two to a row on a phone. */
  .reach-strip-step { flex: 0 1 calc(50% - 3px); }
}
.spine-strip-step > a,
.spine-strip-step.is-here,
.reach-strip-step > a,
.reach-strip-step.is-here {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 8px 10px;
  border: 0.5px solid var(--line);
  border-radius: 3px;
  background: var(--paper-card);
  text-decoration: none;
}
.spine-strip-step > a, .reach-strip-step > a { height: 100%; }
.spine-strip-step > a:hover, .reach-strip-step > a:hover { border-color: var(--brass); }
.spine-strip-step.is-here, .reach-strip-step.is-here {
  background: var(--wine);
  border-color: var(--wine);
}
.ss-name {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
.ss-note {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--slate);
}
.spine-strip-step.is-here .ss-name, .reach-strip-step.is-here .ss-name { color: var(--paper-card); }
.spine-strip-step.is-here .ss-note, .reach-strip-step.is-here .ss-note { color: rgba(245, 240, 228, 0.72); }
/* the grade dot has to survive the wine ground of the current box, where a
   wine Proven dot would be invisible — the fill/outline distinction is what
   carries the grade, so it is the fill that gets recoloured, not dropped. */
.spine-strip-step.is-here .ss-dot.is-proven, .reach-strip-step.is-here .ss-dot.is-proven {
  background: var(--paper-card); border-color: var(--paper-card);
}
.spine-strip-step.is-here .ss-dot.is-probable, .reach-strip-step.is-here .ss-dot.is-probable {
  background: #c9a765; border-color: #e0c58f;
}
.spine-strip-step.is-here .ss-dot.is-possible,
.spine-strip-step.is-here .ss-dot.is-unproven,
.spine-strip-step.is-here .ss-dot.is-disproven,
.reach-strip-step.is-here .ss-dot.is-possible,
.reach-strip-step.is-here .ss-dot.is-unproven,
.reach-strip-step.is-here .ss-dot.is-disproven {
  border-color: rgba(245, 240, 228, 0.75);
}
.badge-probable {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--brass-deep);
  background: rgba(156, 122, 60, 0.18);
  border: 1px solid var(--brass);
  border-radius: 20px;
  padding: 3px 10px;
}
.badge-possible {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--slate);
  background: transparent;
  border: 1px solid var(--slate);
  border-radius: 20px;
  padding: 3px 10px;
}
.badge-unproven {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 20px;
  padding: 3px 10px;
}
.badge-disproven {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--slate);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 3px 10px;
  text-decoration: line-through;
  opacity: 0.7;
}

main h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
  margin: 44px 0 14px;
}
/* a short brass mark above each top-level section heading */
main > h2::before {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background: var(--brass);
  margin-bottom: 15px;
}
main p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 660px;
  margin: 0 0 16px;
}

/* --- documents: the paper itself ----------------------------
   The first raster images on this site. A document is evidence
   rather than decoration, so it gets the column's full width and
   a caption written like a claim: what it is, what to look at,
   and what has been altered. Which documents may be shown at all
   is a licensing question, answered at /sourcing-method/#documents.
   There is one resolution of each — what the agency delivered — so
   the image links to itself rather than to a larger copy that does
   not exist. That is not a lightbox and needs no script: on a phone,
   where the column renders a 1000px form at about a third of that,
   it hands the reader the browser's own viewer and pinch-zoom, which
   is the difference between evidence and a grey rectangle. */
figure.document { margin: 10px 0 30px; }
/* the direct child only: this is the image's own link. Unscoped, it also
   caught the PROVEN badge and the closing link inside the caption, and a
   badge laid out as a block stretches the full width of the column. */
figure.document > a { display: block; }
figure.document img {
  display: block;
  width: 100%;
  height: auto;
  border: 0.5px solid var(--line);
  border-radius: 2px;
  background: var(--paper-card);
}
figure.document figcaption { margin-top: 13px; }
figure.document figcaption p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--slate);
  max-width: none;
  margin: 0 0 9px;
}
figure.document figcaption p:last-child { margin: 0; }
figure.document figcaption .doc-what { color: var(--ink); }
figure.document figcaption .badge-proven,
figure.document figcaption .badge-probable,
figure.document figcaption .badge-possible,
figure.document figcaption .badge-unproven,
figure.document figcaption .badge-disproven { margin-left: 5px; }

.grade-list { margin: 8px 0 32px; }
.grade-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 0.5px solid var(--line);
}
.grade-row:first-child { padding-top: 0; }
.grade-row:last-child { border-bottom: none; }
.grade-row .badge-proven,
.grade-row .badge-probable,
.grade-row .badge-possible,
.grade-row .badge-unproven,
.grade-row .badge-disproven,
.grade-row .year-tag {
  flex-shrink: 0;
  margin-top: 2px;
  min-width: 88px;
  text-align: center;
}
.year-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--wine);
}
.grade-row p { margin: 0; max-width: none; }

/* Terms — the glossary at /terms/. Same two-column shape as .grade-row, with
   a wider left column: a term is longer than a badge and shorter than a
   sentence. Stacks on phones, where 220px of term column would leave the
   definition reading in a gutter. */
.term-list { margin: 8px 0 40px; }
.term-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 0.5px solid var(--line);
}
.term-row:first-child { padding-top: 0; }
.term-row:last-child { border-bottom: none; }
.term-name {
  flex: 0 0 220px;
  margin-top: 1px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--wine);
  line-height: 1.35;
}
.term-name em { font-style: italic; }
.term-row p { margin: 0; max-width: none; }
@media (max-width: 700px) {
  .term-row { flex-direction: column; gap: 6px; }
  .term-name { flex: none; }
}

/* Glossed terms in running prose. The dotted rule is the whole affordance —
   browsers give abbr[title] no consistent styling of their own, and without
   it a hover that answers a question is a hover nobody knows to try. */
abbr[title] {
  text-decoration: underline dotted var(--brass);
  text-underline-offset: 3px;
  cursor: help;
}

main table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 32px;
  font-family: var(--font-mono);
  font-size: 12px;
}
main th, main td {
  text-align: left;
  padding: 7px 12px 7px 0;
  border-bottom: 0.5px solid var(--line);
  color: var(--ink-soft);
}
main th {
  color: var(--ink);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}
main tr:last-child td { border-bottom: none; }
main td.trough, main td.trough ~ td { color: var(--wine); font-weight: 500; }

.descent-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin: 16px 0 8px;
}
@media (max-width: 640px) {
  .descent-charts { grid-template-columns: 1fr; }
}
.descent-column h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 0.5px solid var(--line);
}
.descent-row {
  padding: 9px 0;
  border-bottom: 0.5px dotted var(--line);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.descent-row:last-child { border-bottom: none; }
.descent-row strong {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}
.descent-row .yr {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--brass);
}
.descent-row.meet { color: var(--wine); }
.descent-row.meet strong { color: var(--wine); }

/* Reading path — a guided route through the site for first-time visitors.
   Sits at the foot of the pages in the sequence; distinct from gen-nav,
   which moves generation to generation within one family line. On a page
   that is also a member of a nav-set, .path-nav-set carries those peer
   links too — one nav block, two rows, see path-nav.njk. */
.path-nav {
  margin-top: 40px;
  padding: 16px 18px;
  border: 0.5px solid var(--line);
  border-left: 2px solid var(--brass);
  border-radius: 4px;
  background: var(--paper-card);
}
.path-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.path-nav-where {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}
.path-nav-where strong {
  color: var(--brass-deep);
  font-weight: 500;
}
.path-nav-next {
  display: block;
  text-decoration: none;
  text-align: right;
  flex: 1 1 0;
  min-width: 0;
}
.path-nav-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 3px;
}
.path-nav-name {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  color: var(--wine);
}
.path-nav-next:hover .path-nav-name {
  border-bottom: 1px solid var(--wine);
}

/* --- reading path: previous link and terminus ------------- */
.path-nav-prev {
  display: block;
  text-decoration: none;
  text-align: left;
  flex: 1 1 0;
  min-width: 0;
}
.path-nav-prev:hover .path-nav-name {
  border-bottom: 1px solid var(--wine);
}
.path-nav-prev.is-empty,
.path-nav-next.is-empty {
  flex: 1 1 0;
  min-width: 0;
}

/* --- reading path: peer navigation within the page's nav-set, when it
   has one — see path-nav.njk. Sits above the path-nav-row, inside the
   same .path-nav block. ------------------------------------------- */
.path-nav-set {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 0.5px dotted var(--line);
}
.path-nav-set-link {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  text-decoration: none;
  flex: 1 1 0;
  min-width: 0;
}
.path-nav-set-link.is-next { text-align: right; }
.path-nav-set-link:hover { color: var(--wine); }
.path-nav-set-label {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
  text-decoration: none;
}
a.path-nav-set-label:hover { color: var(--wine); }

.path-end {
  margin-top: 24px;
  padding: 22px 24px;
  border: 0.5px solid var(--line);
  border-left: 2px solid var(--brass);
  border-radius: 4px;
  background: var(--paper-card);
}
.path-end-head {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  margin: 0 0 10px;
}
.path-end > p:not(.path-end-head) {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 14px;
  max-width: none;
}
.path-end-doors { margin: 0; padding-left: 18px; }
.path-end-doors li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
}
@media (max-width: 640px) {
  .path-nav-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .path-nav-prev, .path-nav-next { text-align: left; width: 100%; }
  .path-nav-prev.is-empty, .path-nav-next.is-empty { display: none; }
  .path-nav-set { flex-direction: column; align-items: flex-start; gap: 6px; }
  .path-nav-set-link.is-next { text-align: left; }
}

.gen-nav,
.set-nav {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 0.5px solid var(--line);
}
.gen-nav-cell {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  text-decoration: none;
  padding: 10px 14px;
  border: 0.5px solid var(--line);
  border-radius: 4px;
  background: var(--paper-card);
}
.gen-nav-cell:hover { border-color: var(--brass); }
.gen-nav-cell.is-next { text-align: right; }
.gen-nav-cell.is-empty {
  background: none;
  border-color: transparent;
  pointer-events: none;
}
.gen-nav-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 3px;
}
.gen-nav-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink);
}
.gen-nav-cell:hover .gen-nav-name { color: var(--wine); }
.gen-nav-line {
  flex: 0 1 auto;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate);
  text-decoration: none;
  white-space: nowrap;
  padding: 0 4px;
}
.gen-nav-line:hover { color: var(--wine); }

/* set-nav: the middle slot as a plain label, where a set has no overview page */
.gen-nav-line.is-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  text-align: center;
  text-decoration: none;
}
@media (max-width: 640px) {
  .gen-nav,
  .set-nav { flex-wrap: wrap; }
  .gen-nav-cell { flex: 1 1 100%; text-align: left !important; }
  .gen-nav-cell.is-empty { display: none; }
  .gen-nav-line { flex: 1 1 100%; text-align: center; padding: 4px 0; }
}

.index-filter {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  background: var(--paper-card);
  border: 0.5px solid var(--line);
  border-radius: 4px;
  padding: 10px 14px;
  width: 100%;
  max-width: 340px;
  margin: 4px 0 8px;
}
.index-filter:focus {
  outline: none;
  border-color: var(--brass);
}
.index-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate);
  margin: 0 0 24px;
}
.index-letter {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--wine);
  margin: 28px 0 6px;
  padding-bottom: 6px;
  border-bottom: 0.5px solid var(--line);
}
.index-entry {
  padding: 8px 0;
  border-bottom: 0.5px dotted var(--line);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.index-entry:last-child { border-bottom: none; }
.index-name {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}
.index-dates {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--brass);
  margin-left: 6px;
}
.index-note { display: block; font-size: 13px; }
.index-links {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--slate);
}
.index-links a { color: var(--slate); }
.index-links a:hover { color: var(--wine); }
.index-empty {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--slate);
  padding: 20px 0;
}

.correction-list .chain-card { margin-bottom: 20px; max-width: none; }
.correction-list .chain-card:last-child { margin-bottom: 0; }
.correction-list .chain-card-head { flex-wrap: wrap; gap: 8px; }

@media (max-width: 640px) {
  .site-header {
    flex-wrap: wrap;
  }
  .nav-toggle-label {
    display: flex;
  }
  .site-header nav {
    display: none;
    width: 100%;
    flex-direction: column;
    order: 3;
    margin-top: 1.25rem;
  }
  .nav-toggle-checkbox:checked ~ nav {
    display: flex;
  }
  .site-header nav a {
    margin-left: 0 !important;
    padding: 12px 0;
    border-bottom: 0.5px solid var(--line);
  }
  .nav-dropdown {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
    position: relative !important;
  }
  .nav-dropdown-toggle {
    display: block;
    padding: 12px 44px 12px 0 !important;
    border-bottom: 0.5px solid var(--line);
    pointer-events: none;
  }
  .nav-dd-label {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    cursor: pointer;
  }
  .nav-dd-label::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--ink);
    border-bottom: 1.5px solid var(--ink);
    transform: translateY(-70%) rotate(45deg);
  }
  .nav-dd-checkbox:checked ~ .nav-dd-label::after {
    transform: translateY(-20%) rotate(-135deg);
    border-color: var(--wine);
  }
  .nav-dropdown-menu {
    display: none !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    box-shadow: none !important;
    border: none !important;
    background: none !important;
    padding: 4px 0 8px 18px !important;
    min-width: 0 !important;
    z-index: auto !important;
  }
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu {
    display: none !important;
  }
  .nav-dd-checkbox:checked ~ .nav-dropdown-menu {
    display: block !important;
  }
  .nav-dropdown-menu a {
    padding: 10px 0 !important;
    border-bottom: none !important;
    color: var(--slate);
    white-space: normal !important;
  }
  .nav-child-note { font-size: 10px; }
}
/* ============================================================
   THE TIMELINE  —  append to style.css
   Uses the existing parchment / ink / wine / brass variables.
   If style.css doesn't define these as custom properties yet,
   swap the var() calls for the literal hex values already in use.
   ============================================================ */

/* --- density control ------------------------------------- */
.tl-density{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  margin:2rem 0 0.5rem;
}
.tl-density-label{
  font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase;
  color:#6b6252; margin-right:6px;
}
.tl-density button{
  font-family:inherit; font-size:0.9rem;
  padding:6px 14px; cursor:pointer;
  background:transparent; color:#6b6252;
  border:1px solid #c9bb9a; border-radius:2px;
}
.tl-density button:hover{ border-color:#6d1f2a; color:#6d1f2a; }
.tl-density button.is-active{
  background:#6d1f2a; border-color:#6d1f2a; color:#f2e8d5;
}
.tl-density button:focus-visible{ outline:2px solid #a8863f; outline-offset:2px; }

.tl-count{
  font-size:0.85rem; color:#6b6252; margin:0 0 2.25rem;
  font-variant-numeric:tabular-nums;
}

/* --- grade filter ---------------------------------------- */
.tl-grades{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:0.9rem 0; margin:0 0 2rem;
  border-top:1px solid #d9cdb0; border-bottom:1px solid #d9cdb0;
}
.tl-grades-label{
  font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase;
  color:#6b6252; margin-right:6px;
}
.tl-grade{
  display:inline-flex; align-items:center; gap:0.45rem;
  font-family:inherit; font-size:0.85rem;
  padding:5px 12px; cursor:pointer;
  background:transparent; color:#6b6252;
  border:1px solid #c9bb9a; border-radius:2px;
}
.tl-grade:hover{ border-color:#6d1f2a; color:#6d1f2a; }
.tl-grade:focus-visible{ outline:2px solid #a8863f; outline-offset:2px; }
/* switched off: struck through and faded, echoing the Disproven badge */
.tl-grade:not(.is-on){
  opacity:0.45; text-decoration:line-through;
}
.tl-grade.is-on{
  background:rgba(168,134,63,0.10);
  border-color:#a8863f; color:#2b241d;
}

/* --- thread filter ---------------------------------------- */
.tl-threads{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:0 0 0.9rem; margin:-1.4rem 0 1rem;
  border-bottom:1px solid #d9cdb0;
}
.tl-threads-label{
  font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase;
  color:#6b6252; margin-right:6px;
}
.tl-thread{
  font-family:inherit; font-size:0.85rem;
  padding:5px 12px; cursor:pointer;
  background:transparent; color:#6b6252;
  border:1px solid #c9bb9a; border-radius:2px;
}
.tl-thread:hover{ border-color:#6d1f2a; color:#6d1f2a; }
.tl-thread:focus-visible{ outline:2px solid #a8863f; outline-offset:2px; }
.tl-thread.is-on{
  background:#6d1f2a; border-color:#6d1f2a; color:#f2e8d5;
}
.tl-thread-blurb{
  font-size:0.9rem; line-height:1.5; color:#4a4136;
  max-width:46rem; margin:0 0 1.75rem;
  padding-left:0.9rem; border-left:3px solid #a8863f;
}
/* threading dims the chronology rather than hiding it: the point is to see
   where a descent sits among everything else, not to read it in isolation */
.tl-threading [data-tier]:not(.tl-thread-on){ opacity:0.22; }
.tl-threading .tl-thread-on .tl-title{ color:#6d1f2a; }
.tl-threading .tl-thread-on .tl-dot{
  box-shadow:0 0 0 3px rgba(168,134,63,0.45);
}

/* --- grade dots ------------------------------------------ */
/* .ss-dot is the spine strip's dot (see the SPINE STRIP block above). It is
   the same five states as the timeline's and shares these rules so the two
   cannot drift; only its behaviour on the wine "current" box is overridden
   there. Editing a colour here changes both. */
.tl-dot, .ss-dot{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  border:2px solid #6b6252; background:transparent; flex:none;
}
.tl-dot.is-proven,   .ss-dot.is-proven   { background:#6d1f2a; border-color:#6d1f2a; }
.tl-dot.is-probable, .ss-dot.is-probable { background:#c9a765; border-color:#a8863f; }
.tl-dot.is-possible, .ss-dot.is-possible { background:transparent; border-color:#a8863f; border-style:dashed; }
.tl-dot.is-unproven, .ss-dot.is-unproven { background:transparent; border-color:#9c9384; }
.tl-dot.is-disproven,.ss-dot.is-disproven{ background:transparent; border-color:#9c9384; opacity:0.5; }

/* --- rail heads ------------------------------------------ */
.tl-railheads{
  display:grid; grid-template-columns:1fr 58px 1fr;
  margin-bottom:0.25rem;
}
.tl-rh-left, .tl-rh-right{
  font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
  color:#a8863f; border-bottom:1px solid #a8863f; padding-bottom:7px;
}
.tl-rh-left{ text-align:right; }
.tl-rh-right{ text-align:left; }

/* --- the two rails --------------------------------------- */
.tl-rails{ position:relative; }
.tl-rails::before{
  content:''; position:absolute; left:50%; top:0; bottom:0;
  width:1px; background:#c9bb9a; transform:translateX(-50%);
}

.tl-row{
  display:grid; grid-template-columns:1fr 58px 1fr;
  align-items:start;
}
.tl-cell{ padding:0.85rem 0; }
.tl-left { text-align:right; padding-right:1.35rem; }
.tl-right{ text-align:left;  padding-left:1.35rem; }
.tl-blank{ visibility:hidden; }

.tl-node{
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:1.15rem; position:relative; z-index:2;
}
.tl-node .tl-dot{ background-color:#f2e8d5; }
.tl-node .tl-dot.is-proven  { background-color:#6d1f2a; }
.tl-node .tl-dot.is-probable{ background-color:#c9a765; }

/* --- entry typography ------------------------------------ */
.tl-yr{
  display:block; font-size:0.82rem; letter-spacing:0.05em;
  color:#6d1f2a; margin-bottom:2px; font-variant-numeric:tabular-nums;
}
.tl-title{ display:block; font-weight:600; line-height:1.35; }
.tl-note{
  display:block; font-size:0.94rem; color:#6b6252;
  line-height:1.55; margin-top:3px;
}
.tl-src{
  display:inline-block; margin-top:5px;
  font-size:0.76rem; letter-spacing:0.06em; text-transform:uppercase;
  color:#a8863f; text-decoration:none;
  border-bottom:1px solid transparent;
}
.tl-src:hover{ color:#6d1f2a; border-bottom-color:#6d1f2a; }

/* --- bridge (shared ancestress) cards -------------------- */
.tl-bridge{ padding:1.4rem 0; }
.tl-bridge-card{
  position:relative; z-index:1; text-align:center;
  padding:1.25rem 1.75rem;
  /* opaque parchment base under the brass wash, so the centre spine
     line does not show through the card */
  background:
    linear-gradient(180deg, rgba(168,134,63,0.10), rgba(168,134,63,0.02)),
    #f2e8d5;
  border-top:1px solid #a8863f; border-bottom:1px solid #a8863f;
}
.tl-bridge-card::before{
  content:''; position:absolute; left:50%; top:0; z-index:2;
  transform:translate(-50%,-50%);
  width:13px; height:13px; border-radius:50%;
  background:#6d1f2a; border:2px solid #f2e8d5;
  box-shadow:0 0 0 2px #a8863f;
}
.tl-bridge-card .tl-title{
  font-size:1.15rem; font-style:italic; color:#4a141c;
}
.tl-bridge-card .tl-note{ max-width:34rem; margin:0.4rem auto 0; }

/* --- the merge marker ------------------------------------ */
.tl-merge{
  text-align:center; padding:3rem 1rem 1rem;
  margin-top:1rem;
}
.tl-merge h2{
  font-style:italic; color:#6d1f2a;
  margin:0.3rem 0 0.5rem;
}
.tl-merge p{ max-width:32rem; margin:0 auto; color:#6b6252; }

/* --- post-1912 single column ----------------------------- */
.tl-single{
  max-width:38rem; margin:0 auto;
  border-left:1px solid #c9bb9a;
  padding-left:0;
}
.tl-single-row{
  position:relative; padding:1rem 0 1rem 1.6rem;
}
.tl-single-row > .tl-dot{
  position:absolute; left:-5px; top:1.35rem;
  background-color:#f2e8d5;
}
.tl-single-row > .tl-dot.is-proven  { background-color:#6d1f2a; }
.tl-single-row > .tl-dot.is-probable{ background-color:#c9a765; }

/* --- density hiding -------------------------------------- */
.tl-hidden{ display:none !important; }

/* --- mobile ---------------------------------------------- */
@media (max-width: 760px){
  .tl-railheads{ grid-template-columns:1fr; gap:0; }
  .tl-rh-left, .tl-rh-right{ text-align:left; }
  .tl-rh-left{ margin-bottom:0.5rem; }
  .tl-rails::before{ left:0; transform:none; }
  .tl-row{ grid-template-columns:1fr; }
  .tl-cell{ padding-left:1.4rem; padding-right:0; text-align:left; }
  .tl-blank{ display:none; }
  .tl-node{
    position:absolute; left:0; transform:translateX(-50%);
    padding-top:0;
  }
  .tl-row{ position:relative; }
  .tl-bridge-card{ text-align:left; }
  .tl-bridge-card .tl-note{ margin-left:0; }
  .tl-single{ margin-left:0; }
}

@media (prefers-reduced-motion: reduce){
  .tl-density button{ transition:none; }
  .tl-thread{ transition:none; }
}

/* ============================================================
   ADD THIS ONE RULE to style.css — anywhere after .chain-card.
   Lets a chain-card in a .chain-grid span both columns, so the
   homepage can carry two half-width entry points plus one full
   -width overview card without orphaning a third item.
   ============================================================ */

.chain-card.is-wide { grid-column: 1 / -1; }

@media (prefers-reduced-motion: reduce){
  .tl-density button{ transition:none; }
  .tl-thread{ transition:none; }
}


/* ============================================================
   BACK TO TOP
   Floating button, lower right. Hidden until the reader has
   scrolled; inherits the site's own palette variables.
   ============================================================ */

.to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 60;

  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;

  background: var(--paper-card);
  color: var(--wine);
  border: 0.5px solid var(--line);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(36, 48, 61, 0.10);
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s,
              background-color .18s ease, color .18s ease, border-color .18s ease;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.to-top:hover {
  background: var(--wine);
  color: var(--paper-card);
  border-color: var(--wine);
}

.to-top:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

.to-top:active { transform: translateY(1px); }

@media (max-width: 640px) {
  .to-top { right: 16px; bottom: 16px; width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity .01s, visibility .01s; }
}

@media print { .to-top { display: none; } }

/* ============================================================
   OPEN QUESTIONS — cost/effort tags
   Append to style.css. Uses the site's own palette variables.
   Reuses .chain-card, .chain-card-head, .correction-list,
   .closing-note from the Corrections page — no new structural
   classes, only the tag itself is new.
   ============================================================ */

.oq-tag {
  display: inline-block;
  font-family: var(--mono, ui-monospace, 'SF Mono', Menlo, monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--line);
  white-space: nowrap;
}

/* in the subhead legend, sitting inline with prose */
.subhead .oq-tag {
  font-size: 10.5px;
  padding: 2px 8px;
  margin: 0 1px;
}

.oq-tag--cheap {
  background: rgba(109, 31, 42, 0.07);
  border-color: var(--wine);
  color: var(--wine);
}

.oq-tag--request {
  background: rgba(168, 134, 63, 0.14);
  border-color: var(--brass);
  color: #7a601f;
}

.oq-tag--wall {
  background: var(--paper-card, #fdfaf3);
  border-color: var(--line);
  color: var(--ink-soft, #6b6252);
}

@media (max-width: 640px) {
  .chain-card-head { flex-wrap: wrap; gap: 8px; }
  /* The longest card tags — "A record identified, not yet pulled" — measured
     341px at 11px inside a 303px column, and ran off the page at 380px wide.
     Shrink them here, and drop the nowrap so no future tag can overflow
     either. The subhead legend tags are narrower and are left alone. */
  .chain-card-head .oq-tag {
    font-size: 9.5px;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    white-space: normal;
    max-width: 100%;
  }
}

/* --- answered entries -------------------------------------- */
.oq-closed-title {
  text-decoration: line-through;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1.5px;
  color: var(--ink-soft, #6b6252);
}

.oq-tag--closed {
  background: rgba(109, 31, 42, 0.07);
  border-color: var(--wine);
  color: var(--wine);
  font-weight: 600;
}
/* ============================================================
   THE CONVERGENCE — page furniture (item 8b1)
   Two components only. The two "family cards" reuse .chain-grid
   and .chain-card unchanged, so they need nothing here.
   ============================================================ */

/* --- the geographic spine, under the masthead -------------- */
.conv-spine {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0 16px;
  margin: 0 0 34px;
  padding: 20px 0;
  border-bottom: 0.5px solid var(--line);
}
.conv-spine-stop { text-align: center; }
.conv-spine-place {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
  color: var(--ink);
}
.conv-spine-note {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 6px;
}
.conv-spine-arrow {
  color: var(--line);
  font-size: 16px;
  line-height: 1;
}

/* --- the marriages band: year large, label under ----------- */
.marriages-band {
  background: var(--wine);
  border-radius: 3px;
  padding: 20px 24px 24px;
  margin: 30px 0 36px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 20px;
}
.mb-head {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 240, 228, 0.6);
}
.mb-year {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.1;
  color: var(--paper-card);
}
.mb-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.6;
  color: rgba(245, 240, 228, 0.8);
  margin-top: 7px;
}
/* the 1826 marriage, where the two descents already meet */
.mb-item.is-meet .mb-year { color: var(--brass); }

@media (max-width: 640px) {
  .conv-spine {
    grid-template-columns: 1fr;
    gap: 14px 0;
  }
  .conv-spine-arrow { display: none; }
  .marriages-band { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------
   THE PEDIGREE PAGE
   One SVG: the two surname spines and the eight ancestresses above
   them. Class names are deliberately `ped-*` and NOT `spine-strip*`
   — check-spine.js counts `class="spine-strip"` across the built
   site and fails any page outside spines.js that carries one.
   Grade dots reuse the timeline/strip colours exactly (#6d1f2a
   Proven, #c9a765 Probable) so one grade is one colour site-wide.
   --------------------------------------------------------------- */
.ped-figure, .route-figure { margin: 32px 0 28px; }
/* The prose column is ~700px and the diagram is drawn at 900. Above 980px the
   figure breaks out of the column and centres itself, so a desktop reader sees
   the whole thing at once. Below that it stays in the column and scrolls
   sideways inside .diagram-scroll — no 100vw arithmetic, which counts the
   scrollbar and pushed the whole page sideways on a phone. */
@media (min-width: 980px) {
  .ped-figure, .route-figure { width: 900px; margin-left: 50%; transform: translateX(-50%); }
}
.ped-svg, .route-svg {
  display: block; width: 100%; height: auto; max-width: 900px; margin: 0 auto;
  /* Below this the labels stop being readable, so the figure scrolls sideways
     inside .diagram-scroll rather than shrinking to 3px type on a phone. */
  min-width: 820px;
}
.ped-figure figcaption, .route-figure figcaption {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.7;
  color: var(--slate); text-align: center; margin-top: 14px;
}
/* The pedigree-collapse curve on the shrinking-pool page: a plain SVG line
   chart at the column's width, generated by scripts/collapse-curve.py from the
   same twelve rows as the table beneath it. */
.collapse-figure { margin: 24px 0 28px; }
.collapse-svg {
  display: block; width: 100%; height: auto;
  /* Below this the axis labels stop being readable, so the chart scrolls
     sideways inside .diagram-scroll on a phone, as the table under it does. */
  min-width: 560px;
}
.collapse-figure figcaption {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.7;
  color: var(--slate); margin-top: 10px;
}
.ped-key { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; }
.ped-key--pr { background: #6d1f2a; }
.ped-key--pb { background: #c9a765; }

.ped-box { fill: var(--paper-card); stroke: var(--line); stroke-width: 1; }
.ped-box--anc { fill: #F5F0E4; }
.ped-box--node { fill: var(--wine); stroke: var(--wine); }
.ped-svg a:hover .ped-box { stroke: var(--brass); stroke-width: 1.6; }
.route-svg a:hover text { text-decoration: underline; }

.ped-name { font-family: var(--font-display); font-size: 13px; font-weight: 600; fill: var(--ink); }
.ped-sub  { font-family: var(--font-body); font-size: 10.5px; font-style: italic; fill: var(--slate); }
.ped-gen  { font-family: var(--font-mono); font-size: 9.5px; fill: var(--brass-deep); letter-spacing: .01em; }
.ped-spn  { font-family: var(--font-display); font-size: 12px; font-weight: 600; fill: var(--ink); }
.ped-spy  { font-family: var(--font-mono); font-size: 10px; fill: var(--slate); }
.ped-cap, .ped-colhead {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  fill: var(--brass-deep); text-transform: uppercase;
}
.ped-trunklab { font-family: var(--font-mono); font-size: 9.5px; fill: var(--slate); }
.ped-nodeyr { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; fill: var(--paper-card); }
.ped-nodenm { font-family: var(--font-display); font-size: 12.5px; font-weight: 600; fill: var(--paper-card); }

.ped-thread { stroke: var(--line); stroke-width: 1; }
.ped-trunk  { stroke: var(--brass); stroke-width: 1.4; stroke-dasharray: 4 4; }
.ped-join   { stroke: var(--wine); stroke-width: 1.4; fill: none; }
.ped-svg a { text-decoration: none; }

@media (max-width: 860px) {
  .ped-figure figcaption::after {
    content: 'Scroll the diagram sideways to read it.';
    display: block; margin-top: 6px; font-style: italic;
  }
}

/* A table inside .diagram-scroll must keep its natural width and scroll, not
   squeeze. Both six-column tables on the shrinking-pool page were pushing the
   whole page sideways at phone width before this — the collapse table already
   was, before the grade column was added to its neighbour. */
.diagram-scroll > table { min-width: 520px; margin: 12px 0; }

/* ============================================================
   PAGE INDEX — /updates/ and /corrections/
   ------------------------------------------------------------
   These two pages are short in entries and very long in prose:
   59 updates and 36 corrections, but a median entry of ~1,400
   characters, so ~12,000 and ~9,300 words respectively. The
   problem was never how many there are, it was that a reader
   could not see WHAT happened without reading the whole account
   of it. This is the skimmable layer; nothing is hidden, so
   find-in-page and a JS-less reader both still get everything.
   ============================================================ */
.page-index {
  border-top: 1px solid #d9cdb0;
  border-bottom: 1px solid #d9cdb0;
  margin: 0 0 2.5rem;
  padding: 0.4rem 0 0.6rem;
}
.page-index ol { list-style: none; margin: 0; padding: 0; }
.page-index li {
  display: flex; align-items: baseline; gap: 0.7rem;
  padding: 4px 0;
  border-bottom: 1px solid rgba(217,205,176,0.55);
}
.page-index li:last-child { border-bottom: 0; }
.page-index .pi-date {
  flex: 0 0 5.4rem;
  font-size: 0.78rem; color: #6b6252;
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}
.page-index .pi-title { flex: 1 1 auto; font-size: 0.92rem; line-height: 1.4; }
.page-index .pi-title a { text-decoration: none; border-bottom: 1px solid transparent; }
.page-index .pi-title a:hover { color: #6d1f2a; border-bottom-color: #6d1f2a; }
.page-index .pi-tag {
  flex: 0 0 auto;
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: #6b6252; white-space: nowrap;
}
/* the index counts, so it says what it is counting */
.page-index-count {
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #6b6252; margin: 0 0 0.6rem;
  font-variant-numeric: tabular-nums;
}
/* a filtered-out entry leaves the index and the body together */
.is-filtered-out { display: none !important; }

/* the card a reader has just jumped to, so the anchor lands visibly */
.chain-card:target {
  box-shadow: -4px 0 0 #a8863f;
  padding-left: 1rem;
  transition: box-shadow 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .chain-card:target { transition: none; }
}

/* Narrow: the row wraps to two lines. The title leads and the date and tag
   drop beneath it — the other way round put "WITHDRAWN" at the head of 33 of
   the 36 corrections rows, which is the least informative word on the page
   leading every line of an index meant for scanning. */
@media (max-width: 560px) {
  .page-index li { flex-wrap: wrap; gap: 0.15rem 0.7rem; padding: 7px 0; }
  .page-index .pi-title { flex: 1 1 100%; order: 1; }
  .page-index .pi-date { flex: 0 0 auto; order: 2; }
  .page-index .pi-tag { order: 3; }
}

/* The updates filter is single-select, so it borrows .tl-thread (filled when
   on) and not .tl-grade (struck through when off). A struck-through "New
   pages" reads as "there are none", which is the opposite of what it does.
   It sits under the masthead rather than under another filter strip, so it
   carries its own top rule and spacing instead of the timeline's negative
   margin. */
.updates-filter {
  border-top: 1px solid #d9cdb0;
  padding: 0.9rem 0;
  margin: 0 0 1.5rem;
}