:root{
  --ground:#EDEBE5; --panel:#F7F6F2; --panel-2:#E3E1D9;
  --ink:#16222A; --ink-2:#4C5D66; --ink-3:#7C8A91;
  --rule:#D3D0C7; --rule-strong:#B6B2A6;
  --accent:#8E2456; --accent-2:#B0396C; --accent-wash:#F3E3EB;
  --ochre:#9A6B18; --terra:#A8442B;
  --r-feudal:#7C8A91; --r-venice:#B08322; --r-habsburg:#3E5A66; --r-napo:#9184A8;
  --r-italy:#4E7A55; --r-german:#4A4340; --r-yugo:#A8442B; --r-croatia:#1F5C6B;
  --r-modern:#3F6B52;
  --band-label:#F5F3EE;
  --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:#E886B0; --accent-2:#F0A8C8; --accent-wash:#331A26;
  --ochre:#D2A24A; --terra:#D97A5F;
  /* The regimes this family actually lived under. This block previously
     carried Norman, Plantagenet, Tudor, Stuart, Georgian, Colony and
     Federation - copied wholesale from the D'Arcy archive and never
     retargeted - which left every Croatian band inheriting its LIGHT value
     onto a near-black ground. Matches the Defranceschi archive exactly. */
  --r-feudal:#8FA0A8; --r-venice:#D2A24A; --r-habsburg:#6E96A6; --r-napo:#A99DC0;
  --r-italy:#77A87E; --r-german:#857C77; --r-yugo:#C86A50; --r-croatia:#4E9DAF;
  --r-modern:#77A87E;
  --band-label:#10171E;
}}
:root[data-theme="dark"]{
  /* The explicit-toggle twin of the media query above. It carried the same
     D'Arcy palette and has to move with it, or the toggle disagrees with the
     system setting. */
  --ground:#101820; --panel:#17212A; --panel-2:#1E2A34;
  --ink:#E8E6DF; --ink-2:#A6B4BC; --ink-3:#74858E;
  --rule:#2A3841; --rule-strong:#3F515C;
  --accent:#E886B0; --accent-2:#F0A8C8; --accent-wash:#331A26;
  --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;
  --r-modern:#77A87E;
  --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}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.g2,.g3,.g4{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}
section.blk h2{font-size:clamp(24px,3vw,34px)}
section.blk > .dek{margin-top:10px}
/* PARAGRAPHS NEED AIR, AND `p{margin:0}` MEANT THEY ONLY GOT IT WHEN THE AUTHOR
   REMEMBERED. Every prose <p> on this site is a direct child of section.blk,
   and spacing was being supplied one paragraph at a time by an inline
   style="margin-top:1.2rem" — so wherever it was left off, two paragraphs ran
   together into a wall of words. Asked for on 22 September 2026, at a phone
   width, where the wall is worst. This gives every paragraph that FOLLOWS
   another one a default gap; the inline styles are more specific and still
   win, so nothing that was already spaced moves. */
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}
}
.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)}
.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}
.filters .count{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-left:auto}
.armfig .dr{font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--ink-3);margin-top:10px;
  padding-top:10px;border-top:1px solid var(--rule)}
.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}
.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}
.kid.line{border-color:var(--accent);color:var(--accent);background:var(--accent-wash);font-weight:600}
.kid.line i{color:var(--accent)}
.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.kv{border-left-color:var(--r-croatia)} .hc.istria{border-left-color:var(--r-venice)}
.hc.dalmatia{border-left-color:var(--r-yugo)}
.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}
.srclist{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.srcrow .meta{font-family:var(--sans);font-size:12px;color:var(--ink-3);margin-top:5px;
  display:flex;flex-wrap:wrap;gap:4px 14px}

/* ---- diaspora ---- */
.cluster{background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--accent);
  border-radius:3px;padding:24px 26px;margin-top:20px}
.cluster h3{font-size:27px;line-height:1.15}
.cluster .hdr{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin-top:8px;
  font-family:var(--sans);font-size:12px;color:var(--ink-3)}
.cluster .hdr b{color:var(--accent);font-weight:600}
.cluster .wh{font-family:var(--sans);font-size:13px;color:var(--ink-2);line-height:1.6;margin-top:12px}
.cluster ul{margin:14px 0 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.cluster li{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--ink-2);
  padding-left:16px;position:relative}
.cluster li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--rule-strong)}
.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 .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)}
.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){
  .stat .n{font-size:32px}.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;
}
a.wholink:hover{
  border-bottom-color:var(--accent,#9a3b26);
  background:color-mix(in srgb,var(--accent,#9a3b26) 8%,transparent);
}

/* 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}}
/* `.grid three` had NO RULE AT ALL until 21 September 2026, on eight pages.
   `.grid{display:grid}` with no template is one column, so every trio of stat
   panels on this site — /kosina/, /senj-1943/, /sources/, /pictures/, /name/,
   /frontier/, /people/ and every family page — rendered as three tall rows
   stacked down the screen. It looked deliberate, which is why it lasted. */
/* THREE ACROSS AT EVERY WIDTH, including a phone. 22 September 2026: the first
   fix gave this class a rule at all, and the rule it gave collapsed to two
   columns at 820px and one at 560px — which turned three short statistics into
   three full-width slabs a reader had to scroll past one at a time. Three
   numbers side by side IS the comparison; stacking them destroys the thing the
   row exists to show. So the columns hold and the BOX shrinks instead: less
   gap, less padding, a smaller numeral and a smaller label. Keep stat labels
   to a few words — at 375px each column is about 90px wide. */
.grid.three{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:700px){
  .grid.three{gap:8px}
  .grid.three .stat{padding:12px 10px 13px}
  .grid.three .stat .n{font-size:27px}
  .grid.three .stat .l{font-size:11px;line-height:1.35;margin-top:6px;overflow-wrap:anywhere}
}
@media (max-width:400px){
  .grid.three{gap:6px}
  .grid.three .stat{padding:10px 8px 11px}
  .grid.three .stat .n{font-size:23px}
  .grid.three .stat .l{font-size:10.5px}
}
.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{position:relative;margin:0 0 10px;border-radius:14px;overflow:hidden;
  background:var(--panel-2)}
.fhero .cap{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-end;padding:30px clamp(20px,4vw,46px) 30px;
  background:linear-gradient(90deg,rgba(24,18,12,.86) 0%,rgba(24,18,12,.62) 38%,rgba(24,18,12,.12) 78%,transparent 100%)}
.fhero .kick{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:#E3C489}
.fhero .sub{font-family:var(--sans);font-size:15px;color:#E4DACB;margin-top:12px;
  max-width:56ch;line-height:1.6}
@media(max-width:640px){.fhero .cap{background:linear-gradient(to top,rgba(24,18,12,.9),rgba(24,18,12,.5) 60%,rgba(24,18,12,.2))}}

/* 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 generation spine, as this archive marks it up -------------------
   The inherited .gen is a two-column grid expecting .rail and .body children.
   This site's spine is a simple vertical run with a dot drawn by ::before, so
   the grid has to be turned off or every paragraph becomes a squeezed column. */
.spine{position:relative;display:block;padding-left:42px;margin:22px 0 26px}
.spine::before{content:"";position:absolute;left:13px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(transparent,var(--ochre) 12%,var(--accent));border-radius:2px}
.spine .gen{display:block;position:relative;margin:0 0 22px;padding:0}
.spine .gen::before{content:"";position:absolute;left:-35px;top:7px;width:12px;height:12px;
  border-radius:50%;background:var(--ground);border:2px solid var(--accent);z-index:1}
.spine .gen.undoc::before{border-color:var(--ink-3);border-style:dashed}
.spine .gen > div,.spine .gen > p{max-width:78ch}
.spine .gen .yr{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);margin-right:10px;
  font-variant-numeric:tabular-nums}
.spine .gen .who{font-weight:600;color:var(--ink)}
.spine .gen .whr{color:var(--ink-2);font-size:15px}
.spine .gen .lab{margin-top:4px}
@media (max-width:600px){
  .spine{padding-left:28px}
  .spine::before{left:7px}
  .spine .gen::before{left:-27px}
}

/* ─────────────────────────────────────────────────────────────────────────
   The Blažević Archive — components this archive adds to the shared sheet.
   Everything below uses the existing variables so the two sites stay one
   brand. Nothing above this line is modified.
   ───────────────────────────────────────────────────────────────────────── */

/* Call-to-action row under the opening statement. There is no .btn in the
   shared sheet — only .findbtn and .linkbtn — so it is defined here, in the
   same terms. */
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.6rem}
.btn{display:inline-block;font-family:var(--sans);font-size:12.5px;line-height:1;
  font-weight:600;letter-spacing:.02em;text-decoration:none;border-radius:3px;
  padding:12px 16px;background:var(--accent);color:#FBF8F1;border:1px solid var(--accent);
  transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--accent-2);border-color:var(--accent-2);color:#FBF8F1}
.btn.ghost{background:transparent;color:var(--accent);border-color:var(--rule-strong)}
.btn.ghost:hover{background:var(--accent-wash);border-color:var(--accent);color:var(--accent)}

/* Key/value tables — the workhorse of every person and summary page */
table.kv{width:100%;border-collapse:collapse;margin-top:6px}
table.kv th{width:11.5rem;text-align:left;vertical-align:top;font-family:var(--sans);
  font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-2);
  padding:10px 16px 10px 0;border-top:1px solid var(--rule)}
table.kv td{vertical-align:top;padding:10px 0;border-top:1px solid var(--rule);
  font-size:15.5px;line-height:1.55}
table.kv tr:first-child th,table.kv tr:first-child td{border-top:none}
table.kv.tight th{width:8rem;font-size:11.5px;padding:6px 12px 6px 0}
table.kv.tight td{padding:6px 0;font-size:14px}
table.kv th.warn{color:var(--terra)}

/* The register: long, scannable, sortable-looking lists of people */
table.reg{width:100%;border-collapse:collapse;margin-top:10px;font-size:14.5px}
table.reg thead th{text-align:left;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  padding:0 14px 8px 0;border-bottom:1px solid var(--rule-strong)}
table.reg td{padding:8px 14px 8px 0;border-bottom:1px solid var(--rule);vertical-align:top}
table.reg tbody tr:hover{background:var(--panel)}
/* Long unbreakable strings (note file names, URLs) in a register table forced the whole page
   wider than a phone: 471px of table in a 375px viewport on /people/georgi-uroda/. Let them break. */
table.reg td,table.reg th{overflow-wrap:anywhere;word-break:break-word}
/* On a phone a wide data table scrolls inside itself instead of widening the page: /worklist/,
   /found/, /searched/ and /sources/ were 388–634px wide in a 375px viewport. */
@media (max-width:600px){
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  code,.mono{overflow-wrap:anywhere;word-break:break-word}
}
.tblwrap{overflow-x:auto}

/* Two- and three-column lists that stay readable when a name is long */
ul.cols{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:6px 26px;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));font-size:14.5px}
ul.cols li{padding:3px 0;line-height:1.45}
ul.plain{list-style:none;padding:0;margin:10px 0 0;font-size:15px}
ul.plain li{padding:4px 0;line-height:1.5;border-bottom:1px solid var(--rule)}
ul.plain li:last-child{border-bottom:none}

/* Generation blocks on the spine page */
.genblk{margin-top:1.8rem;padding-top:1.1rem;border-top:1px solid var(--rule)}
.genblk h3{font-family:var(--serif);font-size:21px;font-weight:500;margin:0}

/* One open question */
.qa{border-left:2px solid var(--rule-strong);padding-left:20px}
.qa h2{margin-top:.3rem}

/* A caution, inline */
.warn{color:var(--terra);font-family:var(--sans);font-size:13px;line-height:1.5;margin-top:6px}
th.warn{color:var(--terra)}

/* The spine list */
ol.spine{list-style:none;padding:0;margin:1rem 0 0;counter-reset:none}
ol.spine li{display:flex;gap:16px;align-items:baseline;padding:9px 0;
  border-top:1px solid var(--rule)}
ol.spine li:first-child{border-top:none}
ol.spine .g{font-family:var(--mono);font-size:11px;color:var(--ink-3);min-width:2.2rem;
  letter-spacing:.06em}
ol.spine .yrs{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);white-space:nowrap}
ol.spine .pl{font-family:var(--sans);font-size:12.5px;color:var(--ink-3)}
ol.spine.big li{align-items:flex-start;padding:14px 0}
ol.spine.big .yrs{margin-left:10px}
ol.spine li.weak{background:linear-gradient(90deg,var(--accent-wash),transparent 65%)}/* Events on a person page. Named .eventlog, because the shared
   sheet already uses .evlist for a multi-column grid and these need to stack. */
ul.eventlog{list-style:none;padding:0;margin:10px 0 0}
ul.eventlog li{padding:12px 0;border-top:1px solid var(--rule)}
ul.eventlog li:first-child{border-top:none}
ul.eventlog .lab{display:inline-block;margin-right:10px}

/* A source string: long, ugly, and worth showing verbatim */
.src{font-family:var(--mono);font-size:11.5px;line-height:1.55;color:var(--ink-2);
  word-break:break-word;margin-top:5px}
ul.srclist{list-style:none;padding:0}

/* Small inline marker beside a name in the register */
.tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent-wash);background:var(--accent-wash);
  border-radius:2px;padding:1px 5px;margin-left:8px;vertical-align:2px}

blockquote.note{margin:14px 0 0}

@media(max-width:640px){
  table.kv th{width:auto;display:block;padding-bottom:0;border-top:none}
  table.kv td{display:block;padding-top:2px}
  table.kv tr{display:block;border-top:1px solid var(--rule);padding:8px 0}
  table.kv tr:first-child{border-top:none}
  ol.spine li{flex-wrap:wrap;gap:6px 12px}
}

/* A document reproduced on its own page */
figure.doc{margin:1.4rem 0 0;padding:0}
figure.doc img{width:100%;max-width:760px;height:auto;display:block;border:1px solid var(--rule);
  border-radius:3px;background:var(--panel)}
figure.doc figcaption{font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--ink-3);
  margin-top:10px;max-width:60ch}

/* The photo strip on a person's page */
.photos{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  margin-top:1rem}
.photos figure{margin:0}
.photos img{width:100%;height:auto;display:block;border:1px solid var(--rule);border-radius:3px;
  background:var(--panel)}
.photos figcaption{font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--ink-3);
  margin-top:7px}

/* A non-image media item (a PDF) standing in the photo grid */
a.pdf{display:flex;align-items:center;justify-content:center;text-align:center;min-height:150px;
  padding:16px;border:1px dashed var(--rule-strong);border-radius:3px;background:var(--panel);
  font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--accent);text-decoration:none}
a.pdf:hover{border-color:var(--accent);background:var(--accent-wash)}

/* Inline bar, for comparing two counts in a table row */
.bar{display:inline-block;height:9px;border-radius:1px;vertical-align:middle;margin-right:7px;
  min-width:0}
.bar.cro{background:var(--accent)}
.bar.aus{background:var(--ochre)}

/* Kin lists on a person page */
ul.kin{list-style:none;padding:0;margin:8px 0 0;font-size:14.5px}
ul.kin li{padding:5px 0;line-height:1.45;border-bottom:1px solid var(--rule)}
ul.kin li:last-child{border-bottom:none}
ul.kin .yrs{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-left:8px}

/* The register's finder: search box and filter chips */
.finder{margin-bottom:1.2rem}
.srch{display:block}
.srch input{width:100%;max-width:34rem;font-family:var(--sans);font-size:15px;padding:11px 14px;
  border:1px solid var(--rule-strong);border-radius:3px;background:var(--panel);color:var(--ink);
  margin-top:6px}
.srch input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.chip{font-family:var(--sans);font-size:12px;line-height:1;padding:8px 11px;border-radius:999px;
  border:1px solid var(--rule-strong);background:var(--panel);color:var(--ink-2);cursor:pointer;
  transition:background .12s,border-color .12s,color .12s}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#FBF8F1}
.count{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:12px}

/* A correction, shown on the person's own page rather than buried in prose */
.fix{border-left:3px solid var(--ochre);padding:2px 0 4px 20px}
.fix.disputed{border-left-color:var(--terra)}
.fix.upgraded{border-left-color:var(--r-modern)}
.fix h2{font-size:22px}

/* Hero credit line — kept adjacent to the image on purpose */
.credit{font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--ink-3);
  margin:10px 2px 0;max-width:74ch}
.credit a{color:var(--ink-3);text-decoration:underline}
.credit a:hover{color:var(--accent)}
figure.hero{margin:0}

/* This archive's hero carries a real landscape rather than an abstract ground,
   so it is darkened a little less than the shared default and the caption
   gradient is deepened to keep the text legible without flattening the image. */
.hero img{opacity:.74;filter:saturate(.96)}
.hero .cap{background:linear-gradient(to top,rgba(8,22,28,.92),rgba(8,22,28,.55) 42%,transparent)}

/* On a narrow screen the caption is taller than the image, so overlaying it
   clips the headline. Stack instead: picture above, caption below on the same
   dark ground, which keeps the light type legible and reads as intentional. */
@media(max-width:700px){
  figure.hero{display:block}
  .hero img{height:clamp(190px,52vw,300px);opacity:.86}
  .hero .cap{position:static;background:#0d2f39;padding:20px 20px 24px}
  .hero h1{font-size:clamp(26px,7.4vw,34px);max-width:none}
  .hero .sub{font-size:14px}
  .hero .kick{font-size:10px;letter-spacing:.14em;line-height:1.5;display:block}
}

/* auto-linked person names, added by wholink.js */
a.wholink{border-bottom:1px dotted var(--accent);text-decoration:none;color:inherit}
a.wholink:hover{border-bottom-style:solid;color:var(--accent)}


/* 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 letter draft holds long URLs and addresses; on /errands/ one of them pushed the page to 675px on a phone */
.er-draft,.er-draft p,.er-row{overflow-wrap:anywhere;word-break:break-word}