:root{
  --ground:#EFECE6; --panel:#F8F6F2; --panel-2:#E5E1D8;
  --ink:#1C1A17; --ink-2:#55504A; --ink-3:#847D74;
  --rule:#D8D3C8; --rule-strong:#BAB3A6;
  --accent:#9A4B2B; --accent-2:#B25A35; --accent-wash:#F3E5DD;
  --ochre:#A07C2E; --terra:#3E5A63;
  --r-feudal:#847D74; --r-venice:#A07C2E; --r-habsburg:#3E5A63; --r-napo:#7C6E96;
  --r-italy:#4E7A55; --r-german:#4A4340; --r-yugo:#8A2B16; --r-croatia:#3E5A63;
  --band-label:#F5F2EC;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --maxw:1080px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#101820; --panel:#17212A; --panel-2:#1E2A34;
  --ink:#E8E6DF; --ink-2:#A6B4BC; --ink-3:#74858E;
  --rule:#2A3841; --rule-strong:#3F515C;
  --accent:#E0946F; --accent-2:#EFB495; --accent-wash:#33201A;
  --ochre:#D2A24A; --terra:#D97A5F;
  --r-feudal:#8FA0A8; --r-venice:#D2A24A; --r-habsburg:#6E96A6; --r-napo:#A99DC0;
  --r-italy:#77A87E; --r-german:#857C77; --r-yugo:#C86A50; --r-croatia:#4E9DAF;
  --band-label:#10171E;
}}
:root[data-theme="dark"]{
  --ground:#101820; --panel:#17212A; --panel-2:#1E2A34;
  --ink:#E8E6DF; --ink-2:#A6B4BC; --ink-3:#74858E;
  --rule:#2A3841; --rule-strong:#3F515C;
  --accent:#E0946F; --accent-2:#EFB495; --accent-wash:#33201A;
  --ochre:#D2A24A; --terra:#D97A5F;
  --r-feudal:#8FA0A8; --r-venice:#D2A24A; --r-habsburg:#6E96A6; --r-napo:#A99DC0;
  --r-italy:#77A87E; --r-german:#857C77; --r-yugo:#C86A50; --r-croatia:#4E9DAF;
  --band-label:#10171E;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--serif);
  font-size:19px;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{text-wrap:balance;margin:0;font-weight:500;letter-spacing:-.01em}
p{margin:0}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:.06em}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:2px}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.lab{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.mono{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.dek{font-family:var(--sans);font-size:15px;line-height:1.62;color:var(--ink-2);max-width:76ch}
.cap{font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink-3);margin-top:12px;max-width:92ch}
.prose{max-width:80ch}
/* Spacing belongs between BLOCK children, not between everything. As a flex
   column this class made an inline <a> or <strong> inside a <p class="prose">
   its own flex item, so a sentence came apart one fragment to a line. The
   Defranceschi archive worked this out first; the other six now match it. */
.prose>*+*{margin-top:16px}
p.prose{display:block}
p.prose+p.prose{margin-top:16px}

.prose h3{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin-top:14px}
.scroll{overflow-x:auto;padding-bottom:6px}
.panel{background:var(--panel);border:1px solid var(--rule);border-radius:3px;padding:20px 22px}
.grid{display:grid;gap:14px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.g3{grid-template-columns:1fr}}
table{border-collapse:collapse;width:100%;font-family:var(--sans);font-size:13.5px}
th{text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);padding:0 16px 9px 0;border-bottom:1px solid var(--rule-strong);white-space:nowrap}
td{padding:10px 16px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-2);line-height:1.5}

/* Tables on a phone. Column widths on this site are written as inline rem
   values chosen for a desktop column — 14rem for a label, 8rem for a count —
   and on a 390px screen that fixed 22rem leaves the column carrying the actual
   sentence about nine characters wide, one or two words a line. Below 600px
   the content decides instead, and the gutters come in. Inline styles can only
   be beaten with !important, which is what it is for. */
@media (max-width:600px){
  table th[style*="width"],
  table td[style*="width"]{width:auto!important;min-width:0!important}
  th{padding-right:10px}
  td{padding:9px 10px 9px 0}
  table{font-size:13px}
}
td:first-child{color:var(--ink);font-weight:500}
td.m,th.m{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.chip{display:inline-block;font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.04em;
  padding:3px 9px;border-radius:2px;border:1px solid var(--rule-strong);color:var(--ink-2)}
.chip.doc{border-color:var(--accent);color:var(--accent);background:var(--accent-wash)}
.chip.inf{border-color:var(--ochre);color:var(--ochre)}
.chip.lore{border-color:var(--rule-strong);color:var(--ink-3);border-style:dashed}
.note{border-left:2px solid var(--ochre);padding:2px 0 2px 18px;font-family:var(--sans);
  font-size:14.5px;line-height:1.62;color:var(--ink-2);max-width:82ch}

/* ---- chrome ---- */
header.site{border-bottom:1px solid var(--rule-strong);background:var(--panel);
  position:sticky;top:0;z-index:20}
.sitein{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 26px;padding-top:14px;padding-bottom:14px}
.brand{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink);text-decoration:none;
  letter-spacing:-.01em;white-space:nowrap}
header.site nav{display:flex;flex-wrap:wrap;gap:4px 16px}
header.site nav a{font-family:var(--sans);font-size:12.5px;color:var(--ink-2);text-decoration:none;
  padding:2px 0;border-bottom:1.5px solid transparent}
header.site nav a:hover{color:var(--ink)}
header.site nav a.on{color:var(--ink);border-bottom-color:var(--terra)}
main{padding:0 0 90px}
.pagehead{padding:56px 0 34px;border-bottom:1px solid var(--rule);margin-bottom:38px}
.pagehead h1{font-size:clamp(36px,5.6vw,62px);line-height:1.04;margin-top:14px}
.lead{margin-top:20px;font-size:17.5px;max-width:72ch}
footer.site{border-top:1px solid var(--rule-strong);padding:34px 0 60px;background:var(--panel)}
.foot{font-family:var(--sans);font-size:12.5px;line-height:1.65;color:var(--ink-2);max-width:92ch}
.foot.dim{color:var(--ink-3);margin-top:10px}
section.blk{padding:44px 0;border-bottom:1px solid var(--rule)}
section.blk:last-child{border-bottom:0}
/* PARAGRAPHS NEED AIR, AND `p{margin:0}` MEANT THEY ONLY GOT IT WHEN THE AUTHOR
   REMEMBERED. All eight archives set `p{margin:0}` and then supply the gap one
   paragraph at a time with an inline style="margin-top" — 5,122 of them across
   the estate — so wherever it was left off, two paragraphs run together into a
   wall of words. Worst at a phone width, which is where it was reported, on
   22 September 2026. Written for the Blazevic archive that day and carried to
   the other seven once the effect had been counted rather than assumed.

   HOW FAR IT REACHES, corrected, and the correction is the useful part.
   The selectors match DIRECT children of section.blk only, so a paragraph
   inside a component's own wrapper is untouched. Counted properly across all
   eight archives: 1,780 newly spaced pairs on 1,007 of 19,283 built pages.
   Roughly a fifth of those are paragraph-to-paragraph; the rest are the note,
   list and table pairs, which is why the note-heavy archives move most —
   D'Arcy 569 pairs on 368 pages, Blazevic 647 on 342, Mazza 248 on 227.

   THE FIGURE THIS FILE FIRST CARRIED WAS 211 PAIRS ON 68 PAGES, and seven
   archives took the change on it. It counted `section.blk > p + p` and stopped
   — one of the sixteen selectors below — so it described four per cent of the
   rule it was justifying. An earlier count said 7,405 by searching whole
   sections instead of direct children. Twelve times high, then eight times
   low, both from counting against a DESCRIPTION of the rule rather than the
   rule. The D'Arcy session measured its own build against all sixteen and
   found the gap; its 571 and this sweep's 569 agree.

   Nothing that was already spaced moves: the inline styles are more specific
   and still win. This only fills in what was never set. */
section.blk > p + p,
section.blk > p + ul,
section.blk > p + ol,
section.blk > ul + p,
section.blk > ol + p,
section.blk > .grid + p,
section.blk > table + p,
section.blk > blockquote + p,
section.blk > figure + p,
section.blk > details + p,
section.blk > .note + p,
section.blk > p + .note,
section.blk > p + blockquote,
section.blk > p + table,
section.blk > p + .grid,
section.blk > .note + .note{margin-top:1.15rem}
@media (max-width:620px){
  section.blk > p + p,
  section.blk > p + ul,
  section.blk > p + ol,
  section.blk > ul + p,
  section.blk > ol + p,
  section.blk > .grid + p,
  section.blk > table + p,
  section.blk > blockquote + p,
  section.blk > figure + p,
  section.blk > details + p,
  section.blk > .note + p,
  section.blk > p + .note,
  section.blk > p + blockquote,
  section.blk > p + table,
  section.blk > p + .grid,
  section.blk > .note + .note{margin-top:1.35rem}
}
section.blk h2{font-size:clamp(24px,3vw,34px)}
section.blk > .dek{margin-top:10px}
.stack{display:flex;flex-direction:column;gap:34px}
.cardlink{display:block;text-decoration:none;color:inherit;background:var(--panel);
  border:1px solid var(--rule);border-radius:3px;padding:18px 20px;transition:border-color .15s}
.cardlink:hover{border-color:var(--accent)}
.cardlink .nm{font-size:23px;line-height:1.15;font-weight:500;color:var(--ink)}
.cardlink .alt{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:5px}
.cardlink .txt{font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--ink-2);margin-top:10px}
.meta{display:flex;flex-wrap:wrap;gap:6px 22px;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.meta b{font-weight:500;color:var(--ink-2)}
.rec{display:grid;grid-template-columns:minmax(120px,auto) 1fr auto;gap:0;font-family:var(--sans);font-size:13.5px}
.rec > div{padding:9px 14px 9px 0;border-bottom:1px solid var(--rule)}
.rec .k{color:var(--ink-3);font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;padding-top:12px}
.rec .v{color:var(--ink)}
.rec .w{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap;text-align:right;padding-right:0}
.evlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:7px 24px;margin-top:22px;
  font-family:var(--sans);font-size:12.5px;color:var(--ink-2)}
.evlist b{font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--terra);margin-right:9px;
  font-variant-numeric:tabular-nums}
.armfig .at{font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink-2);margin-top:9px}
.flags{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
.stat{background:var(--panel);border:1px solid var(--rule);border-radius:3px;padding:18px 18px 20px}
.stat .n{font-family:var(--serif);font-size:40px;line-height:1;font-weight:500;color:var(--terra);
  font-variant-numeric:tabular-nums}
.stat .l{font-family:var(--sans);font-size:12.5px;line-height:1.45;color:var(--ink-2);margin-top:10px}
.linerow{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:10px 34px;
  padding-bottom:30px;border-bottom:1px solid var(--rule)}
.linerow:last-child{border-bottom:0;padding-bottom:0}
@media (max-width:760px){.linerow{grid-template-columns:1fr}}
.filters{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:22px}
.filters label{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);display:flex;gap:8px;align-items:center}
.filters select{font-family:var(--sans);font-size:13px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--ink);background:var(--panel);border:1px solid var(--rule-strong);
  border-radius:2px;padding:5px 8px}
.filters .count{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-left:auto}
.qrow{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:12px 34px;
  padding-bottom:28px;border-bottom:1px solid var(--rule)}
.qrow:last-child{border-bottom:0;padding-bottom:0}
.qq{font-size:21px;line-height:1.2;margin-bottom:12px}
.qw{font-family:var(--sans);font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:78ch}
.qn{font-family:var(--sans);font-size:13.5px;line-height:1.58;color:var(--ink-3);margin-top:12px;max-width:78ch}
.qn b{color:var(--terra);font-weight:600}
.ab{font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--ink-2);margin-top:12px}
@media (max-width:760px){.qrow{grid-template-columns:1fr}}
.house{margin:0;background:var(--panel);border:1px solid var(--rule);border-radius:3px;padding:20px 20px 16px}
.house .parents{display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
.house .par{flex:1;min-width:180px;font-family:var(--serif);font-size:18px;line-height:1.25;color:var(--ink);
  padding:10px 14px;border:1px solid var(--rule-strong);border-radius:2px;background:var(--ground)}
.house .pl{display:block;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.house .join{width:26px;align-self:center;height:1.5px;background:var(--rule-strong);flex:0 0 26px}
.house .drop{width:1.5px;height:20px;background:var(--rule-strong);margin:0 auto}
.house .kids{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  border-top:1.5px solid var(--rule-strong);padding-top:16px;position:relative}
.house .kid{border:1px solid var(--rule);border-radius:2px;padding:8px 11px;background:var(--ground);
  min-width:112px;position:relative}
.house .kid::before{content:"";position:absolute;top:-16px;left:50%;width:1.5px;height:16px;background:var(--rule-strong)}
.house .kid.short{border-color:var(--terra);border-style:dashed}
.house .kn{font-family:var(--serif);font-size:14.5px;line-height:1.2;color:var(--ink)}
.house .ky{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:4px;font-variant-numeric:tabular-nums}
.house .kid.short .ky{color:var(--terra)}
.house figcaption{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:16px;padding-top:12px;
  border-top:1px solid var(--rule);font-size:11.5px;color:var(--ink-3)}
@media (max-width:560px){.house .join{display:none}.house .parents{gap:8px}}
.gen{position:relative}
.gen .genbox{background:var(--panel);border:1px solid var(--rule-strong);border-radius:3px;padding:14px 16px}
.gen .gp{font-family:var(--serif);font-size:19px;line-height:1.3;color:var(--ink)}
.gen .gp .amp{color:var(--ink-3);margin:0 9px;font-style:italic}
.gen .gmeta{color:var(--ink-3);margin-top:6px}
.gen .gkids{display:flex;flex-wrap:wrap;gap:5px 8px;margin-top:11px;padding-top:10px;border-top:1px solid var(--rule)}
.gen .gkids span{font-family:var(--sans);font-size:11.5px;color:var(--ink-2);background:var(--ground);
  border:1px solid var(--rule);border-radius:2px;padding:2px 7px}
.gen .via{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-family:var(--sans);font-size:12.5px;
  color:var(--ink-2);margin:14px 0 10px;padding-left:2px}
.gen .via b{color:var(--ink);font-weight:500}
.ped .pl{display:block;font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.ped .py{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:4px;
  font-variant-numeric:tabular-nums}

/* ---- plates: the family's own paper ---- */
.plates{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.plate{background:var(--panel);border:1px solid var(--rule);border-radius:3px;overflow:hidden;
  display:flex;flex-direction:column;text-align:left;padding:0;cursor:zoom-in;
  font:inherit;color:inherit;transition:border-color .18s,transform .18s}
.plate:hover{border-color:var(--rule-strong);transform:translateY(-2px)}
.plate .shot{background:var(--panel-2);display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  object-position:top center;border-bottom:1px solid var(--rule)}
.plate.tall .shot{aspect-ratio:3/4;height:auto}
.plate .meta{padding:12px 14px 14px;display:flex;flex-direction:column;gap:5px}
.plate .t{font-family:var(--sans);font-size:13px;font-weight:600;line-height:1.35;color:var(--ink)}
.plate .h{font-family:var(--sans);font-size:10.5px;letter-spacing:.05em;color:var(--ink-3)}
.plate .zoomhint{font-family:var(--sans);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);opacity:0;transition:opacity .18s}
.plate:hover .zoomhint,.plate:focus-visible .zoomhint{opacity:1}

/* ---- the spine ---- */
.spine{display:flex;flex-direction:column;gap:0;margin-top:8px}
.gen{display:grid;grid-template-columns:78px minmax(0,1fr);gap:0}
.gen .rail{position:relative;display:flex;justify-content:center}
.gen .rail::before{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--rule-strong)}
.gen:first-child .rail::before{top:34px}
.gen:last-child .rail::before{bottom:calc(100% - 34px)}
.gen .dot{position:relative;margin-top:26px;width:13px;height:13px;border-radius:50%;
  background:var(--ground);border:2px solid var(--accent);z-index:1}
.gen.living .dot{border-color:var(--rule-strong);border-style:dashed}
.gen.family .dot{border-color:var(--ochre)}
.gen .body{padding:16px 0 30px;border-bottom:1px solid var(--rule)}
.gen:last-child .body{border-bottom:0}
.gen h3{font-size:26px;line-height:1.2}
.gen .lat{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-top:3px}
.gen .facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-family:var(--sans);
  font-size:12.5px;color:var(--ink-2)}
.gen .facts b{font-weight:600;color:var(--ink-3);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;margin-right:6px}
.house{margin-top:16px;background:var(--panel);border:1px solid var(--rule);border-radius:3px;padding:14px 16px}
.house .hl{font-family:var(--sans);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:10px}
.kids{display:flex;flex-wrap:wrap;gap:7px}
.kid.line{border-color:var(--accent);color:var(--accent);background:var(--accent-wash);font-weight:600}
.kid.line i{color:var(--accent)}

/* ---- filter bar ---- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 26px}
.filters button{font-family:var(--sans);font-size:12px;letter-spacing:.03em;padding:7px 14px;
  border:1px solid var(--rule-strong);background:var(--panel);color:var(--ink-2);
  border-radius:2px;cursor:pointer;transition:.15s}
.filters button:hover{border-color:var(--accent);color:var(--accent)}
.filters button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--ground)}
.count{font-family:var(--mono);font-size:12px;color:var(--ink-3);align-self:center;margin-left:6px}
.fig .in{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.fig .who{font-family:var(--sans);font-size:11.5px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:4px 12px}
.fig .src{font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--ink-3);
  border-top:1px solid var(--rule);padding-top:10px;margin-top:auto}
.field{display:inline-block;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);background:var(--accent-wash);
  border:1px solid var(--accent);border-radius:2px;padding:2px 8px}
.hc.linked::after{content:"linked";font-family:var(--sans);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent)}
.detail{background:var(--panel);border:1px solid var(--rule);border-radius:3px;padding:20px 22px;
  position:sticky;top:112px;display:flex;flex-direction:column;gap:12px;max-height:78vh;overflow:auto}
.detail h3{font-size:24px;line-height:1.15}
.detail .sub{font-family:var(--sans);font-size:13px;color:var(--ink-2)}
.detail .stats{display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.empty{font-family:var(--sans);font-size:13px;color:var(--ink-3);padding:26px 4px}
.hits{display:flex;flex-direction:column;gap:1px;margin-top:20px;
  border-top:1px solid var(--rule);max-height:none}
.hit{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;padding:12px 4px;
  border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;align-items:baseline}
.hit:hover{background:var(--panel)}
.hit .k{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.hit .t{font-family:var(--sans);font-size:14.5px;font-weight:500;color:var(--ink);line-height:1.35}
.hit .s{font-family:var(--sans);font-size:12.5px;color:var(--ink-2);line-height:1.45;margin-top:2px}
.hit mark{background:var(--accent-wash);color:var(--accent);padding:0 2px;border-radius:2px}
.lifebar .nm{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lifebar .span{position:absolute;top:0;bottom:0;background:var(--accent);border-radius:2px;min-width:2px}
.lifebar.inf .span{background:var(--terra)}
.lifebar.ch .span{background:var(--ochre)}

/* ---- gazetteer ---- */
.bars{display:flex;flex-direction:column;gap:7px;margin-top:20px}
.bar{display:grid;grid-template-columns:160px minmax(0,1fr) 44px;gap:12px;align-items:center;
  font-family:var(--sans);font-size:13px}
.bar .l{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .t{height:16px;background:var(--panel-2);border-radius:2px;overflow:hidden}
.bar .f{height:100%;background:var(--accent);border-radius:2px}
.bar.hi .f{background:var(--terra)}
.bar .v{font-family:var(--mono);font-size:12px;color:var(--ink-3);text-align:right}
@media (max-width:600px){.bar{grid-template-columns:110px minmax(0,1fr) 38px}}
.one{background:var(--panel);border:1px solid var(--terra);border-left-width:3px;border-radius:3px;
  padding:22px 24px;margin-top:26px}
.one h3{font-size:26px;line-height:1.2}
.one p{font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--ink-2);margin-top:10px}
.forms{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-top:26px}
.form{background:var(--panel);border:1px solid var(--rule);border-radius:3px;padding:16px 18px;
  border-top:3px solid var(--rule-strong)}
.form .lang{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.form .val{font-family:var(--serif);font-size:26px;line-height:1.15;margin-top:8px;color:var(--ink)}
.form .when{font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--ink-2);margin-top:10px;
  padding-top:9px;border-top:1px solid var(--rule)}
.form.latin{border-top-color:var(--ochre)} .form.italian{border-top-color:var(--r-venice)}
.form.venetian{border-top-color:var(--r-venice)} .form.croatian{border-top-color:var(--r-croatia)}
.form.german{border-top-color:var(--r-habsburg)} .form.english{border-top-color:var(--r-italy)}
.form .val.none{color:var(--ink-3);font-size:20px;font-style:italic}

/* ---- grouped navigation ---- */
nav.grouped{display:flex;flex-wrap:wrap;gap:4px 22px;align-items:baseline}
nav.grouped .grp{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 11px}
nav.grouped .gl{font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);opacity:.75;margin-right:1px}
nav.grouped a{font-family:var(--sans);font-size:13px;color:var(--ink-2);text-decoration:none;
  padding:2px 0;border-bottom:1.5px solid transparent}
nav.grouped a:hover{color:var(--accent)}
nav.grouped a.on{color:var(--ink);border-bottom-color:var(--terra)}/* ---- navigation: always open on desktop{flex:1 1 auto;min-width:0}
/* no-JS safety: if the script never runs, the nav is simply open. */
@media (max-width:900px){
  .sitein{gap:0;padding-top:11px;padding-bottom:11px;align-items:center;
    justify-content:space-between;flex-wrap:nowrap}
  .brand{font-size:16.5px;line-height:1.2}
  .navbox{flex:0 0 auto}
  .navbox > summary{display:inline-flex;align-items:center;gap:9px;list-style:none;cursor:pointer;
    font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink);
    border:1px solid var(--rule-strong);border-radius:3px;padding:7px 13px;background:var(--ground);
    -webkit-tap-highlight-color:transparent}
  .navbox > summary::-webkit-details-marker{display:none}
  .navbox > summary .bars{width:15px;height:11px;position:relative;display:inline-block}
  .navbox > summary .bars::before,.navbox > summary .bars::after{content:"";position:absolute;
    left:0;right:0;height:1.5px;background:var(--ink)}
  .navbox > summary .bars::before{top:0;box-shadow:0 4.75px 0 var(--ink)}
  .navbox > summary .bars::after{bottom:0}
  .navbox[open] > summary{border-color:var(--accent);color:var(--accent)}
  .navbox[open] > summary .bars::before,.navbox[open] > summary .bars::after{background:var(--accent)}
  .navbox[open] > summary .bars::before{box-shadow:0 4.75px 0 var(--accent)}
  .navbox > nav{display:none}
  .navbox[open] > nav{display:block;position:absolute;left:0;right:0;z-index:40;
    background:var(--panel);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule-strong);
    padding:6px 20px 20px;max-height:72vh;overflow-y:auto;
    box-shadow:0 18px 32px rgba(0,0,0,.16)}
  header.site{position:relative}
  nav.grouped{display:block}
  nav.grouped .grp{display:flex;flex-wrap:wrap;gap:2px 20px;align-items:baseline;
    padding:12px 0 8px;border-bottom:1px solid var(--rule)}
  nav.grouped .grp:last-child{border-bottom:0}
  nav.grouped .gl{display:block;flex:0 0 100%;margin-bottom:5px;font-size:9.5px;color:var(--ink-3)}
  nav.grouped a{display:inline-block;font-size:15.5px;line-height:1.5;padding:5px 0;border-bottom:0}
  nav.grouped a.on{color:var(--terra);font-weight:600}
}
@media (max-width:520px){
  .wrap{padding:0 18px}
  body{font-size:17.5px}
}
.srcblock .lab{margin-bottom:12px}
.srcrow .meta{font-family:var(--sans);font-size:12px;color:var(--ink-3);margin-top:5px;
  display:flex;flex-wrap:wrap;gap:4px 14px}
.cluster .read{font-family:var(--sans);font-size:13.5px;line-height:1.65;color:var(--ink);
  margin-top:16px;padding-top:14px;border-top:1px solid var(--rule);max-width:74ch}/* ---------- rebuild 2026-09: home, story, atlas, tree{padding:54px 0 40px}
.opener .lede{font-family:var(--sans);font-size:16.5px;line-height:1.62;color:var(--ink-2);
  max-width:62ch;margin-top:20px}
.opener .lede b{color:var(--ink);font-weight:600}

/* Three doors */
.doors{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:34px}
@media(max-width:820px){.doors{grid-template-columns:1fr}}
.door{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;
  background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--accent);
  border-radius:3px;padding:20px 20px 22px;transition:border-color .15s,transform .15s}
.door:hover{border-color:var(--accent);transform:translateY(-2px)}
.door:nth-child(2){border-left-color:var(--terra)}
.door:nth-child(3){border-left-color:var(--ochre)}
.door .dn{font-size:23px;line-height:1.15;color:var(--ink)}
.door .dd{font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--ink-2)}
.door .go{font-family:var(--mono);font-size:11.5px;color:var(--accent);margin-top:auto;padding-top:10px}
a.stat{display:block;text-decoration:none;color:inherit;transition:border-color .15s,background .15s}
a.stat:hover{border-color:var(--accent);background:var(--panel-2)}
a.stat .go{font-family:var(--mono);font-size:10.5px;color:var(--accent);margin-top:10px;opacity:0}
a.stat:hover .go{opacity:1}
@media(hover:none){a.stat .go{opacity:1}}

/* Findings strip */
.finds{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-top:24px}
.find{display:block;text-decoration:none;color:inherit;background:var(--panel);
  border:1px solid var(--rule);border-radius:3px;padding:16px 18px 18px;transition:border-color .15s}
.find:hover{border-color:var(--accent)}
.find .fw{font-family:var(--mono);font-size:11px;color:var(--terra);letter-spacing:.06em}
.find .fh{font-size:19px;line-height:1.2;margin-top:7px;color:var(--ink)}
.find .ft{font-family:var(--sans);font-size:12.8px;line-height:1.55;color:var(--ink-2);margin-top:9px}

/* Story walk */
.walk{margin-top:10px}

/* Atlas */
#atlas{height:min(70vh,620px);border:1px solid var(--rule-strong);border-radius:3px;
  background:var(--panel-2)}
.tnode .td{font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.tnode.doc{border-left:3px solid var(--accent)}
.tnode.inf{border-left:3px dashed var(--ochre)}
.tnode.lore{border-left:3px dotted var(--ink-3)}
details.tb > summary{list-style:none;cursor:pointer;display:inline-block}
details.tb > summary::-webkit-details-marker{display:none}
details.tb > summary .tnode::after{content:" ▸";color:var(--ink-3);font-size:11px}
details.tb[open] > summary .tnode::after{content:" ▾"}
.rb-ev.up{bottom:180px;padding-left:15px}
.rb-ev.up .d{bottom:-24px}
.srcrow .meta span{overflow-wrap:anywhere;min-width:0}
.srcrow .meta{flex-wrap:wrap}
@media (max-width:520px){
  .filters{gap:8px 10px}
  .filters button{font-size:11.5px}
  .stat .n{font-size:32px}
  .door .dn,.cardlink .nm{font-size:20px}
  .find .fh{font-size:17.5px}
  section.blk{padding:30px 0}
  .pagehead{padding:34px 0 22px;margin-bottom:26px}
  #atlas{height:min(62vh,460px)}
}

/* ---- On this page: a jump list built from the section headings -------- */
#onthispage { margin: 0 0 30px }
main section > h2 { scroll-margin-top: 18px }

/* person links injected by wholink.js */
a.wholink{
  color:inherit;
  text-decoration:none;
  border-bottom:1px dotted var(--rule,#c9c2b6);
  transition:border-color .15s,background .15s;
}

/* Home-page banner — used only when an image has been placed at /art/banner.webp */
.banner { margin: 0 0 30px; }


/* ---------- slim header, dropdown menus ------------------------------- */
header.site{position:sticky;top:0;z-index:60;background:var(--panel);
  border-bottom:1px solid var(--rule-strong);box-shadow:0 1px 0 rgba(0,0,0,.03)}
.sitein{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding-top:10px!important;padding-bottom:10px!important;flex-wrap:nowrap!important}
.brand{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.01em;
  color:var(--ink);text-decoration:none;white-space:nowrap}
.brand em{font-style:italic;font-weight:400;color:var(--accent)}
header.site nav.topnav{display:flex;align-items:center;gap:1px;flex-wrap:nowrap}
.topnav details.menu{position:relative}
.topnav summary{list-style:none;cursor:pointer;font-family:var(--sans);font-size:12.5px;
  color:var(--ink-2);padding:6px 9px;border-radius:999px;white-space:nowrap;
  border:1px solid transparent}
.topnav summary::-webkit-details-marker{display:none}
.topnav summary::after{content:"";display:inline-block;margin-left:6px;width:5px;height:5px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.55}
.topnav summary:hover{color:var(--ink);background:var(--panel-2)}
.topnav details[open] summary{color:var(--accent);background:var(--accent-wash);border-color:var(--rule)}
.topnav .panel{position:absolute;top:calc(100% + 8px);left:0;min-width:210px;z-index:70;
  background:var(--panel);border:1px solid var(--rule-strong);border-radius:12px;
  box-shadow:0 18px 44px rgba(10,20,26,.16);padding:8px;display:flex;flex-direction:column}
.topnav .panel a{font-family:var(--sans);font-size:13.5px;color:var(--ink-2);text-decoration:none;
  padding:7px 11px;border-radius:8px;white-space:nowrap}
.topnav .panel a:hover{background:var(--accent-wash);color:var(--accent)}
.topnav .panel a.on{color:var(--ink);font-weight:600;background:var(--panel-2)}
.findbtn{display:inline-block;font-family:var(--sans);font-size:12.5px;line-height:1;
  text-decoration:none;margin-left:10px;color:#fff!important;background:var(--accent);
  padding:8px 15px;border-radius:999px;white-space:nowrap}
.findbtn:hover{background:var(--accent-2)}
.burger{display:none!important;align-items:center;gap:9px;font-family:var(--sans);font-size:13px;
  background:none;border:1px solid var(--rule-strong);border-radius:999px;padding:7px 14px;
  color:var(--ink);cursor:pointer}
.drawer{border-top:1px solid var(--rule);background:var(--panel);padding:16px 0 22px;max-height:70vh;overflow:auto}
.drawer .dgrp{padding:10px 0;border-bottom:1px solid var(--rule)}
.drawer .dgrp:last-child{border-bottom:0}
.drawer .gl{display:block;font-family:var(--sans);font-size:9.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.drawer a{display:inline-block;font-family:var(--sans);font-size:14px;color:var(--ink-2);
  text-decoration:none;padding:5px 12px 5px 0}
.drawer a.on{color:var(--accent);font-weight:600}
@media (max-width:1180px){
  header.site nav.topnav{display:none!important}
  .burger{display:inline-flex!important}
  /* Two different things are called .bars in this sheet: a stacked chart
     .bars{display:flex;flex-direction:column;gap:7px;margin-top:20px}
   and the three lines inside the menu button. The burger rule overrode the
   display and the size and never the MARGIN, so on every phone in the
   estate the icon sat 20px below the word next to it. Reset it here; the
   chart keeps its own spacing. */
  .burger .bars{width:15px;height:11px;position:relative;display:inline-block;
    margin:0;flex:none;align-self:center}
  .burger .bars::before,.burger .bars::after{content:"";position:absolute;left:0;right:0;
    height:1.5px;background:var(--ink)}
  .burger .bars::before{top:0;box-shadow:0 4.75px 0 var(--ink)}
  .burger .bars::after{bottom:0}
}
nav.grouped{display:none!important}

/* the on-this-page box never opens itself any more */
#onthispage{margin:22px 0 0;order:9}
body.is-home #onthispage{display:none}

/* ---------- home: colour and pictures --------------------------------- */
.hero{position:relative;margin:0 0 8px;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,var(--accent) 0%,#123f4b 55%,#0d2f39 100%)}
.hero img{width:100%;height:clamp(260px,42vw,470px);object-fit:cover;display:block;
  opacity:.62;filter:saturate(.92)}
.hero .cap{position:absolute;left:0;right:0;bottom:0;padding:26px clamp(18px,4vw,44px) 24px;
  background:linear-gradient(to top,rgba(8,22,28,.86),rgba(8,22,28,.34) 55%,transparent)}
.hero .kick{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:#EBC98A}
.hero h1{color:#FBF8F1;font-size:clamp(30px,5.2vw,58px);line-height:1.06;margin-top:8px;max-width:16ch}
.hero .sub{font-family:var(--sans);font-size:15px;color:#D6E3E7;margin-top:12px;max-width:62ch}
.feat .dek{margin-top:8px}

/* ─────────────────────────────────────────────────────────────
   Compatibility: the Falco pages were written against the older
   stylesheet. These map the legacy classes onto the new tokens so
   every existing page inherits the archive look without a rewrite.
   ───────────────────────────────────────────────────────────── */
.card{background:var(--panel);border:1px solid var(--rule);border-radius:3px;
  padding:20px 22px}
.lede{font-family:var(--sans);font-size:16.5px;line-height:1.62;color:var(--ink-2);
  max-width:76ch;margin-top:4px}
.small{font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.grid.two{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:600px){.grid.two{grid-template-columns:1fr}}
.chip.doc{color:var(--terra);border-color:var(--terra)}
.chip.dis{color:var(--accent);border-color:var(--accent)}
h2{font-size:clamp(23px,2.9vw,32px);margin-top:34px}
h3{font-size:20px}
.card h3{margin-bottom:.3rem}
blockquote{margin:22px 0;padding:2px 0 2px 18px;border-left:3px solid var(--ochre);
  color:var(--ink-2);font-style:italic}
blockquote .small{font-style:normal;display:block;margin-top:8px}
ul,ol{margin:12px 0;padding-left:22px}
li{margin:5px 0}

/* the hero, for pages that have a painting to lead with */
.fhero{position:relative;margin:0 0 10px;border-radius:14px;overflow:hidden;
  background:var(--panel-2)}
.fhero img{width:100%;height:clamp(260px,32vw,470px);object-fit:cover;
  object-position:50% 42%;display:block}
/* The Mazza hero is a 3:1 panorama whose subject — Chianalea and the castle —
   sits on the LEFT, where the Falco hero's left-to-right scrim would bury it.
   So the scrim is anchored to the bottom instead: the whole strait stays
   visible, and the type still has something dark to sit on. */
.fhero .cap{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-end;padding:30px clamp(20px,4vw,46px) 28px;
  background:linear-gradient(to top,rgba(18,24,30,.90) 0%,rgba(18,24,30,.72) 26%,
    rgba(18,24,30,.34) 52%,rgba(18,24,30,.10) 74%,transparent 100%)}
.fhero .kick{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:#E3C489}
.fhero h1{color:#FBF7EF;font-size:clamp(30px,5vw,56px);line-height:1.05;
  margin-top:10px;max-width:20ch;text-shadow:0 1px 24px rgba(10,14,18,.55)}
.fhero .sub{font-family:var(--sans);font-size:15px;color:#DFE6E9;margin-top:12px;
  max-width:64ch;line-height:1.6;text-shadow:0 1px 14px rgba(10,14,18,.6)}


/* the generation spine keeps working under the new tokens */
.spine::before{background:linear-gradient(transparent,var(--ochre) 12%,var(--terra))}
.gen::before{background:var(--ground);border-color:var(--terra)}
.gen.undoc::before{border-color:var(--accent)}
.plate{border-color:var(--rule)}
.plate img{border-bottom-color:var(--rule)}


/* The ladder's own two colours. --ochre and --ink-3 are page-furniture tones
   and sit at 3.3-4.4:1 on the panel, which is under the line for 10px
   uppercase, so the two levels that used them get dedicated values instead —
   checked against all four light papers and all three dark ones. */
:root{ --ev-inferred:#7A5200; --ev-family:#5F584A; }
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ev-inferred:#E0B45C; --ev-family:#B0A796;
}}
:root[data-theme="dark"]{ --ev-inferred:#E0B45C; --ev-family:#B0A796; }

/* ---- the shared evidence ladder --------------------------------------- *
 * Five levels, one meaning across all seven archives. Colour carries the
 * level; the word carries it too, so the chips are still readable in
 * monochrome and to anyone who does not separate these hues.              */
.ev{
  display:inline-block;font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;padding:2px 8px;border-radius:3px;
  border:1px solid currentColor;white-space:nowrap;vertical-align:.08em;
}
.ev-documented{color:var(--accent);background:var(--accent-wash)}
.ev-probable{color:var(--accent);background:transparent}
.ev-inferred{color:var(--ev-inferred);background:transparent}
.ev-family{color:var(--ev-family);border-style:dashed;background:transparent}
.ev-disputed{color:var(--terra);background:transparent}

/* The construct Booyzen invented and the others borrow: state the thing a
   reader will assume, and say plainly that the archive does not assert it. */
.notclaimed{
  border-left:3px solid var(--terra);background:var(--panel);
  padding:12px 16px;margin:18px 0;
}
.notclaimed .lab{
  font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--terra);display:block;margin-bottom:4px;
}

.ladder{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin-top:18px;align-items:baseline}
.ladder dt{margin:0}
.ladder dd{margin:0;color:var(--ink-2)}
@media (max-width:560px){.ladder{grid-template-columns:1fr;gap:4px 0}.ladder dd{margin-bottom:10px}}

/* ---- the ring of sibling archives ------------------------------------- */
.ring{border-top:2px solid var(--rule-strong);margin-top:56px;padding-top:26px}
.ring h2{font-family:var(--serif);font-size:26px;font-weight:600;margin:0 0 6px}
.ring > p{color:var(--ink-2);max-width:62ch;margin:0 0 20px}
.ring ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.ring li{--ring-accent:var(--ring-l);
  border:1px solid var(--rule);border-left:4px solid var(--ring-accent);border-radius:4px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ring li{--ring-accent:var(--ring-d)}}
:root[data-theme="dark"] .ring li{--ring-accent:var(--ring-d)}
.ring li a{display:block;padding:13px 15px;text-decoration:none;color:inherit}
.ring li a:hover{background:var(--panel-2)}
.ring .rn{display:block;font-family:var(--serif);font-size:19px;font-weight:600;
  color:var(--ring-accent);line-height:1.2}
.ring .rw{display:block;font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:4px 0 7px}
.ring .rl{display:block;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.ring .rs{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:8px}
.ring .rkids{margin-top:18px;font-size:14.5px;color:var(--ink-2)}

/* ---- the shared search box -------------------------------------------- */
.ksearch input{
  width:100%;font-family:var(--sans);font-size:19px;padding:12px 14px;
  border:2px solid var(--rule-strong);border-radius:4px;background:var(--panel);
  color:var(--ink);
}
.ksearch input:focus{outline:none;border-color:var(--accent)}
.ksearch input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* A card's title is a page-level section semantically — a reader navigating by
   heading needs it at h2 — but it must not be sized like one. This reproduces
   exactly what the h3 rendered at, so promoting the level changed nothing on
   the page. Measured from the built page, not guessed. */
.ct{font-size:20px;line-height:1.62;margin:0 0 .3rem;font-weight:500}