:root {
  --bg: #fbfaf7; --fg: #1f1d1a; --muted: #6b665e; --rule: #e2ddd3; --link: #1d4f7a;
  --card: #ffffff; --accent: #7a3e1d;
  --certain: #2f6b3a; --probable: #8a6d12; --possible: #a2551b; --unproven: #8a2b2b;
  --certain-bg: #e6f1e7; --probable-bg: #f6efd6; --possible-bg: #f8e6d8; --unproven-bg: #f5dede;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171614; --fg: #ebe7df; --muted: #a39d92; --rule: #34312c; --link: #8cbbe6;
    --card: #1f1d1a; --accent: #e0a37c;
    --certain: #8fd19a; --probable: #e6cb6b; --possible: #f0a56b; --unproven: #f08b8b;
    --certain-bg: #22342a; --probable-bg: #3a3320; --possible-bg: #3d2b1f; --unproven-bg: #3d2222;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
  font: 17px/1.55 Georgia, "Iowan Old Style", "Palatino Linotype", serif; }
a { color: var(--link); }
header.site, footer.site { padding: 12px 16px; border-bottom: 1px solid var(--rule); }
header.site { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
header.site .brand { font-weight: bold; color: var(--accent); text-decoration: none; font-size: 1.1em; }
header.site nav a { margin-left: 16px; font-family: system-ui, sans-serif; font-size: .9em; }
footer.site { border-top: 1px solid var(--rule); border-bottom: 0; color: var(--muted);
  font: 13px/1.5 system-ui, sans-serif; margin-top: 48px; }
main { max-width: 960px; margin: 0 auto; padding: 16px; }
h1 { font-size: 2em; line-height: 1.2; margin: .3em 0 .1em; }
h1.doc { font-size: 1.4em; }
h2 { font-size: 1.25em; border-bottom: 1px solid var(--rule); padding-bottom: 4px; margin-top: 1.8em; }
h3 { font-size: 1em; font-family: system-ui, sans-serif; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); }
.years { color: var(--muted); font-weight: normal; }
h1 .years { font-size: .6em; }
.pid, .line, .legend, .note, .empty, .count, .srcs, .jump { font-family: system-ui, sans-serif; font-size: .82em; color: var(--muted); }
.line { margin-top: 4px; } .line .sep { margin: 0 6px; }
.lede { font-size: 1.1em; }
.note { margin-top: 2px; }
table.facts { width: 100%; border-collapse: collapse; font-size: .92em; }
table.facts th { text-align: left; font: 600 12px system-ui, sans-serif; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--rule); padding: 6px 8px; }
table.facts td { border-bottom: 1px solid var(--rule); padding: 6px 8px; vertical-align: top; }
td.kind, span.kind { text-transform: capitalize; font-weight: 600; }
tr.refuted td { text-decoration: line-through; color: var(--muted); }
.badge { display: inline-block; font: 600 11px/1 system-ui, sans-serif; padding: 3px 6px;
  border-radius: 10px; text-transform: lowercase; vertical-align: 1px; }
.badge.c-certain { color: var(--certain); background: var(--certain-bg); }
.badge.c-probable { color: var(--probable); background: var(--probable-bg); }
.badge.c-possible { color: var(--possible); background: var(--possible-bg); }
.badge.c-unproven, .badge.c-refuted { color: var(--unproven); background: var(--unproven-bg); }
.badge.ped { color: var(--muted); border: 1px solid var(--rule); }
.pref.c-probable a, .pref.c-possible a, .pref.c-unproven a { text-decoration-style: dashed; }
.living { color: var(--muted); font-style: italic; }
.src { font-family: system-ui, sans-serif; font-size: .85em; }
.src.unpub { color: var(--muted); }
.family .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.family ul, .family ol { padding-left: 20px; }
.role { font: 600 12px system-ui, sans-serif; color: var(--muted); text-transform: uppercase; margin-right: 4px; }
ul.names { columns: 2; padding-left: 20px; }
.doclist li { margin-bottom: 4px; }
.disproved { background: var(--unproven-bg); padding: 4px 16px 12px; border-radius: 8px; }
dl.source { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; font-size: .92em; }
dl.source dt { font: 600 12px system-ui, sans-serif; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
dl.source dd { margin: 0; }
.body blockquote { border-left: 3px solid var(--rule); margin: 1em 0; padding: 0 1em; color: var(--fg); }
.body table { border-collapse: collapse; font-size: .9em; display: block; overflow-x: auto; }
.body td, .body th { border: 1px solid var(--rule); padding: 4px 8px; }
.body pre, .body code { white-space: pre-wrap; word-break: break-word; }
/* pedigree: self on the left, parents to the right, recursively */
.pedigree { overflow-x: auto; }
.ped-node { display: flex; align-items: center; gap: 12px; margin: 4px 0; }
.ped-self { min-width: 190px; padding: 6px 10px; background: var(--card); border: 1px solid var(--rule);
  border-radius: 6px; font-size: .88em; }
.ped-parents { display: flex; flex-direction: column; }
.ped-empty { color: var(--muted); font-size: .8em; padding: 6px 10px; border: 1px dashed var(--rule); border-radius: 6px; min-width: 190px; }
.ped-self:has(.pref.c-probable), .ped-self:has(.pref.c-possible), .ped-self:has(.pref.c-unproven) { border-style: dashed; }
@media (max-width: 640px) {
  .family .cols { grid-template-columns: 1fr; }
  ul.names { columns: 1; }
  table.facts thead { display: none; }
  table.facts td { display: block; border: 0; padding: 2px 0; }
  table.facts tr { display: block; border-bottom: 1px solid var(--rule); padding: 8px 0; }
}

/* family-tree SVG */
.treewrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); padding: 8px; }
.treewrap.big { max-height: 80vh; overflow: auto; }
svg.ftree { display: block; margin: 0 auto; font-family: system-ui, sans-serif; }
svg.ftree .tbox { fill: var(--bg); stroke: var(--muted); stroke-width: 1; }
svg.ftree .tbox.focus { stroke: var(--accent); stroke-width: 2.5; }
svg.ftree .tbox.weak { stroke-dasharray: 5 3; }
svg.ftree .tbox.living { fill: var(--rule); stroke: var(--rule); }
svg.ftree a:hover .tbox { stroke: var(--link); stroke-width: 2; }
svg.ftree .tname { font-size: 13px; fill: var(--fg); font-weight: 600; }
svg.ftree a .tname { fill: var(--link); }
svg.ftree .tyears, svg.ftree .tmarr { font-size: 11px; fill: var(--muted); }
svg.ftree .tline { fill: none; stroke: var(--muted); stroke-width: 1.3; }
svg.ftree .tline.weak { stroke-dasharray: 5 3; }
/* documents timeline + searches */
.doctype { font: 11px system-ui, sans-serif; color: var(--muted); text-transform: capitalize; }
.timeline td:first-child { white-space: nowrap; }
.gaplist li { margin-bottom: 6px; }
details.search { border-bottom: 1px solid var(--rule); padding: 6px 0; font-size: .92em; }
details.search summary { cursor: pointer; }
details.search .engine { font: 600 12px system-ui, sans-serif; text-transform: uppercase; color: var(--accent); }
details.search .q, details.search .r { margin: 6px 0 0 16px; }
.srclinks { font-family: system-ui, sans-serif; font-size: .9em; }

/* stories */
section.story { background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--accent);
  border-radius: 8px; padding: 4px 20px 12px; margin-top: 20px; }
section.story h2 { border: 0; margin-top: .8em; }
section.story p { font-size: 1.04em; }
.storycard { border-bottom: 1px solid var(--rule); padding-bottom: 12px; }
.storycard h2 { border: 0; margin-bottom: 0; }
.storycard h2 a { text-decoration: none; color: var(--fg); }
.storycard .who { margin-top: 2px; font-family: system-ui, sans-serif; font-size: .9em; }
section.story h2 a { color: var(--fg); text-decoration: none; }
section.story .more { font-family: system-ui, sans-serif; font-size: .92em; margin-top: 0; }
.storypage h1 { margin-bottom: 4px; }
.storypage .who { font-family: system-ui, sans-serif; font-size: .92em; margin-top: 0; }
.storybody { font-size: 1.04em; line-height: 1.6; max-width: 42em; }
.storybody h2 { margin-top: 1.4em; }
.storybody figure, .gallery figure { margin: 1.4em 0; max-width: 100%; }
.storybody figure img, .gallery figure img { display: block; max-width: 100%; height: auto;
  border: 1px solid var(--rule); border-radius: 4px; background: #fff; }
figure.diagram { overflow-x: auto; }   /* narrow screens scroll the diagram, never the page */
figure.diagram svg { display: block; width: 100%; min-width: 600px; height: auto; font-family: system-ui, sans-serif; }
figure.diagram svg text { fill: var(--fg); }
figure.diagram svg .muted { fill: var(--muted); }
figure.diagram svg .rule { stroke: var(--rule); }
/* type sizes for diagrams (an inline SVG's own <style> would leak into the whole page) */
figure.diagram svg .nm { font-size: 13.5px; font-weight: 600; } figure.diagram svg .dt { font-size: 12px; }
figure.diagram svg .lb { font-size: 13px; } figure.diagram svg .sm { font-size: 11.5px; }
figure.diagram svg .ax { font-size: 11px; } figure.diagram svg .hd { font-size: 11px; font-weight: 600; }
figure.diagram svg .ln { fill: none; stroke-width: 2; }
figure.diagram svg .g-certain { stroke: var(--certain); } figure.diagram svg .f-certain { fill: var(--certain-bg); stroke: var(--certain); }
figure.diagram svg .g-probable { stroke: var(--probable); } figure.diagram svg .f-probable { fill: var(--probable-bg); stroke: var(--probable); }
figure.diagram svg .g-possible { stroke: var(--possible); } figure.diagram svg .f-possible { fill: var(--possible-bg); stroke: var(--possible); }
figure.diagram svg .g-unproven { stroke: var(--unproven); } figure.diagram svg .f-unproven { fill: var(--unproven-bg); stroke: var(--unproven); }
figure.diagram svg .f-none { fill: var(--card); stroke: var(--rule); }
figure.diagram svg .dash { stroke-dasharray: 6 4; } figure.diagram svg .dot { stroke-dasharray: 2 4; }
figcaption { font: .88em/1.45 system-ui, sans-serif; color: var(--muted); margin-top: 6px; }
figcaption .credit { font-style: italic; } figcaption .srcs { white-space: nowrap; }
.crumbs { font-family: system-ui, sans-serif; font-size: .88em; margin-bottom: 0; }
.tag { display: inline-block; font: 600 11px system-ui, sans-serif; color: var(--muted);
  border: 1px solid var(--rule); border-radius: 10px; padding: 2px 7px; margin-left: 6px; }
.cite { font: .78em system-ui, sans-serif; white-space: nowrap; text-decoration: none; } .cite.unpub { color: var(--muted); }
.aka { font-family: system-ui, sans-serif; font-size: .9em; margin-top: -4px; }
.coverage h3 { text-transform: none; letter-spacing: 0; font-size: .95em; color: var(--accent); margin-bottom: 2px; } .coverage p { margin-top: 2px; }

.lead { font-size: 1.08em; line-height: 1.55; max-width: 46em; margin: .4em 0 1em; }