:root{
  --ground:#F2F0EA; --panel:#FBFAF6; --panel-2:#E6E6DE;
  --ink:#1B1F26; --ink-2:#4A525E; --ink-3:#7E8792;
  --rule:#D6D8D2; --rule-strong:#B6BAB6;
  --accent:#23507D; --accent-2:#2F6BA3; --accent-wash:#E2EAF3;
  --ochre:#A8802C; --terra:#7A4A2B;
  --r-norman:#7E8792; --r-plantagenet:#6B5E86; --r-tudor:#8C6A3F; --r-stuart:#4A5A63;
  --r-georgian:#A8802C; --r-colony:#7A4A2B; --r-federation:#23507D; --r-modern:#41715B;
  --band-label:#F1F0EA;
  --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:#0F1620; --panel:#161F2B; --panel-2:#1D2836;
  --ink:#E6E8E4; --ink-2:#A4AFBC; --ink-3:#72808E;
  --rule:#26323F; --rule-strong:#3A4A5A;
  --accent:#78B0DC; --accent-2:#9BC8EA; --accent-wash:#17293A;
  --ochre:#D2A24A; --terra:#C58A62;
  --r-norman:#98A3AE; --r-plantagenet:#A093BC; --r-tudor:#C09A67; --r-stuart:#7E93A1;
  --r-georgian:#D2A24A; --r-colony:#C58A62; --r-federation:#78B0DC; --r-modern:#6FA98C;
  --band-label:#0F1720;
}}
:root[data-theme="dark"]{
  --ground:#0F1620; --panel:#161F2B; --panel-2:#1D2836;
  --ink:#E6E8E4; --ink-2:#A4AFBC; --ink-3:#72808E;
  --rule:#26323F; --rule-strong:#3A4A5A;
  --accent:#78B0DC; --accent-2:#9BC8EA; --accent-wash:#17293A;
  --ochre:#D2A24A; --terra:#C58A62;
  --r-norman:#98A3AE; --r-plantagenet:#A093BC; --r-tudor:#C09A67; --r-stuart:#7E93A1;
  --r-georgian:#D2A24A; --r-colony:#C58A62; --r-federation:#78B0DC; --r-modern:#6FA98C;
  --band-label:#0F1720;
}
*{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}
.sans{font-family:var(--sans)}
.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;display:flex;flex-direction:column;gap: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}
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}
.chip.sup{border-color:var(--ink-3);color:var(--ink-3);border-style:dashed;text-decoration:line-through}
.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}
.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}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;font-family:var(--sans);font-size:11.5px;color:var(--ink-2)}
.legend i{display:inline-block;width:13px;height:13px;border-radius:2px;margin-right:7px;vertical-align:-2px}
.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{margin:0;background:var(--panel);border:1px solid var(--rule);border-radius:3px;
  padding:18px 18px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.armfig svg{display:block;align-self:center}
.armfig .bl{font-family:var(--serif);font-size:16px;font-style:italic;line-height:1.45;color:var(--ink)}
.armfig .at{font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink-2);margin-top:9px}
.armfig .vd{margin-top:11px}
.flags{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
.flag{background:var(--panel);border:1px solid var(--rule);border-radius:3px;padding:12px 13px 14px}
.flag svg{display:block;border:1px solid var(--rule-strong)}
.flag .n{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink);margin-top:10px}
.flag .y{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:3px}
.flag .w{font-family:var(--sans);font-size:11.5px;color:var(--ink-2);margin-top:7px;line-height:1.45}
.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}}
.armfig .chg{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.armfig .chg li{font-family:var(--mono);font-size:11px;color:var(--ink-3);padding-left:14px;position:relative}
.armfig .chg li::before{content:"·";position:absolute;left:4px;color:var(--terra)}
.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}
.genkids{margin-left:28px;padding-left:22px;border-left:1.5px solid var(--rule-strong);margin-top:6px}
@media (max-width:600px){.genkids{margin-left:8px;padding-left:12px}}
.ambig{background:var(--panel);border:1px solid var(--rule);border-left:2px solid var(--ochre);
  border-radius:3px;padding:14px 16px}
.ambig .q{font-family:var(--serif);font-size:16px;color:var(--ink)}
.ambig ul{margin:10px 0 0;padding-left:18px;font-family:var(--sans);font-size:12.5px;color:var(--ink-2);line-height:1.6}
.ped{margin:0}
.pedcouple{display:flex;flex-wrap:wrap;align-items:stretch}
.ped .pp{flex:1;min-width:190px;background:var(--panel);border:1px solid var(--rule-strong);border-radius:2px;
  padding:10px 13px;font-family:var(--serif);font-size:17px;line-height:1.25;color:var(--ink)}
.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}
.ped .pjoin{width:20px;flex:0 0 20px;align-self:center;height:1.5px;background:var(--rule-strong)}
.pmar{color:var(--ochre);margin-top:7px;padding-left:2px}
.pedkids{margin-top:10px;margin-left:20px;padding-left:18px;border-left:1.5px solid var(--rule)}
.pedkid{margin-top:8px}
.ped .pk{font-family:var(--serif);font-size:15px;color:var(--ink);background:var(--ground);
  border:1px solid var(--rule);border-radius:2px;padding:7px 11px;display:inline-block;min-width:200px}
.ped .pn{display:block;font-family:var(--sans);font-size:11px;color:var(--ink-3);margin-top:5px;line-height:1.45;max-width:52ch}
.pednest{margin-top:10px;margin-left:14px}
@media (max-width:620px){.ped .pjoin{display:none}.pedcouple{gap:7px}.pedkids{margin-left:6px;padding-left:10px}}
.qz{border-left:2px solid var(--terra);padding-left:22px}
.qz .qit{font-family:var(--serif);font-size:19px;font-style:italic;line-height:1.5;color:var(--ink);max-width:60ch}
.qz .qen{font-family:var(--serif);font-size:16px;line-height:1.55;color:var(--ink-2);margin-top:10px;max-width:62ch}
.qz .qwhy{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--ink-3);margin-top:12px;max-width:80ch;
  padding-top:10px;border-top:1px solid var(--rule)}

/* ---- 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}

dialog.lb{border:0;padding:0;background:transparent;max-width:min(1180px,94vw);max-height:94vh;color:var(--ink)}
dialog.lb::backdrop{background:rgba(10,14,18,.88)}
.lb-in{background:var(--panel);border:1px solid var(--rule-strong);border-radius:3px;
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.85fr);max-height:94vh}
@media (max-width:820px){.lb-in{grid-template-columns:1fr;overflow:auto}}
.lb-img{background:var(--panel-2);display:flex;align-items:center;justify-content:center;
  padding:14px;min-height:0;overflow:auto}
.lb-img img{max-width:100%;max-height:86vh;object-fit:contain;display:block}
.lb-txt{padding:24px 26px;overflow:auto;display:flex;flex-direction:column;gap:12px;
  border-left:1px solid var(--rule)}
@media (max-width:820px){.lb-txt{border-left:0;border-top:1px solid var(--rule)}}
.lb-txt h3{font-family:var(--serif);font-size:23px;line-height:1.2}
.lb-txt p{font-family:var(--sans);font-size:14px;line-height:1.65;color:var(--ink-2)}
.lb-close{position:absolute;top:10px;right:14px;background:var(--panel);border:1px solid var(--rule-strong);
  color:var(--ink-2);font-family:var(--sans);font-size:12px;padding:5px 11px;border-radius:2px;cursor:pointer}
.lb-nav{display:flex;gap:8px;margin-top:auto;padding-top:10px}
.lb-nav button{background:var(--panel-2);border:1px solid var(--rule-strong);color:var(--ink-2);
  font-family:var(--sans);font-size:12px;padding:7px 13px;border-radius:2px;cursor:pointer}
.lb-nav button:hover{border-color:var(--accent);color:var(--accent)}

/* ---- 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{font-family:var(--sans);font-size:12.5px;border:1px solid var(--rule);background:var(--ground);
  border-radius:2px;padding:5px 10px;color:var(--ink-2)}
.kid.line{border-color:var(--accent);color:var(--accent);background:var(--accent-wash);font-weight:600}
.kid i{font-style:normal;color:var(--ink-3);font-size:11px;margin-left:6px}
.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}

/* ---- namesakes ---- */
.figs{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-top:26px}
.fig{background:var(--panel);border:1px solid var(--rule);border-radius:3px;overflow:hidden;
  display:flex;flex-direction:column}
.fig .art{background:var(--panel-2);border-bottom:1px solid var(--rule);cursor:zoom-in;
  display:block;width:100%;padding:0;border-left:0;border-right:0;border-top:0}
.fig .art img{display:block;width:100%;height:auto;max-height:340px;object-fit:contain;
  background:var(--panel-2);padding:14px}
.fig .in{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.fig h3{font-size:23px;line-height:1.18}
.fig .who{font-family:var(--sans);font-size:11.5px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:4px 12px}
.fig p{font-family:var(--sans);font-size:13.5px;line-height:1.62;color:var(--ink-2)}
.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}

/* ---- household explorer ---- */
.exp{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:22px;
  align-items:start;margin-top:24px}
@media (max-width:960px){.exp{grid-template-columns:1fr}}
.controls{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:end;
  background:var(--panel);border:1px solid var(--rule);border-radius:3px;padding:16px 18px}
.ctl{display:flex;flex-direction:column;gap:6px}
.ctl label{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}
.ctl input[type=search],.ctl select{font-family:var(--sans);font-size:13px;padding:7px 10px;
  background:var(--ground);color:var(--ink);border:1px solid var(--rule-strong);border-radius:2px;min-width:170px}
.ctl input[type=range]{width:230px;accent-color:var(--accent)}
.yearout{font-family:var(--mono);font-size:12.5px;color:var(--accent);min-width:96px}
.hcards{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));
  max-height:70vh;overflow:auto;padding:2px 4px 6px 2px}
.hc{background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--rule-strong);
  border-radius:2px;padding:11px 13px;text-align:left;cursor:pointer;font:inherit;color:inherit;
  display:flex;flex-direction:column;gap:4px;transition:.14s}
.hc:hover{border-color:var(--accent);border-left-color:var(--accent)}
.hc[aria-current="true"]{border-color:var(--accent);border-left-color:var(--accent);
  background:var(--accent-wash)}
.hc .f{font-family:var(--sans);font-size:12.5px;font-weight:600;line-height:1.3;color:var(--ink)}
.hc .m{font-family:var(--sans);font-size:12px;color:var(--ink-2);line-height:1.3}
.hc .w{font-family:var(--mono);font-size:11px;color:var(--ink-3);display:flex;gap:9px;flex-wrap:wrap}
.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.tyrol{border-left-color:var(--r-habsburg)}
.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)}
.linkrow{display:flex;flex-direction:column;gap:6px}
.linkbtn{font-family:var(--sans);font-size:12px;text-align:left;background:var(--ground);
  border:1px solid var(--rule-strong);border-radius:2px;padding:8px 11px;cursor:pointer;color:var(--ink-2)}
.linkbtn:hover{border-color:var(--accent);color:var(--accent)}
.linkbtn b{display:block;font-weight:600;color:var(--ink);font-size:12.5px}
.empty{font-family:var(--sans);font-size:13px;color:var(--ink-3);padding:26px 4px}

/* ---- search ---- */
.searchbox{position:relative}
.searchbox input{width:100%;font-family:var(--sans);font-size:17px;padding:15px 18px;
  background:var(--panel);color:var(--ink);border:1px solid var(--rule-strong);border-radius:3px}
.searchbox input::placeholder{color:var(--ink-3)}
.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}
.searchhint{font-family:var(--sans);font-size:12.5px;color:var(--ink-3);margin-top:10px}
.kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--rule-strong);
  border-bottom-width:2px;border-radius:3px;padding:1px 5px;color:var(--ink-2);background:var(--panel)}

/* ---- the register of the dead ---- */
.lifebars{display:flex;flex-direction:column;gap:3px;margin-top:18px}
.lifebar{display:grid;grid-template-columns:190px minmax(0,1fr) 62px;gap:12px;align-items:center;
  font-family:var(--sans);font-size:12.5px}
.lifebar .nm{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lifebar .track{height:11px;background:var(--panel-2);border-radius:2px;position:relative;overflow:hidden}
.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)}
.lifebar .ag{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);text-align:right}
@media (max-width:640px){.lifebar{grid-template-columns:130px minmax(0,1fr) 50px}}
.bigstat{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:22px}
.bigstat div{background:var(--panel);border:1px solid var(--rule);border-radius:3px;padding:16px 18px}
.bigstat b{display:block;font-family:var(--serif);font-size:38px;line-height:1;color:var(--accent);
  font-variant-numeric:tabular-nums}
.bigstat span{display:block;font-family:var(--sans);font-size:12px;color:var(--ink-2);margin-top:8px;line-height:1.45}

/* ---- 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}

/* ---- the name machine ---- */
.namebox{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:8px}
.namebox input{font-family:var(--serif);font-size:26px;padding:12px 16px;min-width:260px;flex:1;
  background:var(--panel);color:var(--ink);border:1px solid var(--rule-strong);border-radius:3px}
.namebox input::placeholder{color:var(--ink-3);font-style:italic}
.suggest{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.suggest button{font-family:var(--sans);font-size:12px;padding:5px 11px;border:1px solid var(--rule);
  background:var(--panel);color:var(--ink-2);border-radius:2px;cursor:pointer}
.suggest button:hover{border-color:var(--accent);color:var(--accent)}
.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}
.nomatch{font-family:var(--sans);font-size:14px;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--rule);border-left:3px solid var(--ochre);border-radius:3px;padding:18px 20px;margin-top:24px}

/* ---- 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, a real menu on a phone ---- */
.navbox{flex:1 1 auto;min-width:0}
.navbox > summary{display:none}
.navbox > nav{display:flex}
/* 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}
  .opener{padding:34px 0 28px}
}

/* ---- sources ---- */
.srcblock{margin-top:44px;padding-top:22px;border-top:1px solid var(--rule-strong)}
.srcblock .lab{margin-bottom:12px}
.srclist{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.srcitem{background:var(--panel);border:1px solid var(--rule);border-left:2px solid var(--accent);
  border-radius:2px;padding:11px 13px;font-family:var(--sans);font-size:12.5px;line-height:1.5}
.srcitem a{font-weight:600;color:var(--ink);text-decoration:none;display:block}
.srcitem a:hover{color:var(--accent)}
.srcitem span{display:block;color:var(--ink-3);font-size:11.5px;margin-top:3px}
.srcfull{display:flex;flex-direction:column;gap:0}
.srcrow{padding:22px 0;border-bottom:1px solid var(--rule);scroll-margin-top:120px}
.srcrow:target{background:var(--accent-wash);border-left:3px solid var(--accent);
  padding-left:16px;margin-left:-19px}
.srcrow h3{font-size:23px;line-height:1.2}
.srcrow .meta{font-family:var(--sans);font-size:12px;color:var(--ink-3);margin-top:5px;
  display:flex;flex-wrap:wrap;gap:4px 14px}
.srcrow p{font-family:var(--sans);font-size:13.5px;line-height:1.62;color:var(--ink-2);margin-top:11px;max-width:74ch}
.srcrow .refs{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.srcrow .refs code{font-family:var(--mono);font-size:11px;background:var(--panel);border:1px solid var(--rule);
  border-radius:2px;padding:3px 8px;color:var(--ink-2)}
.srcrow .cav{font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink-3);
  border-left:2px solid var(--ochre);padding-left:14px;margin-top:12px;max-width:70ch}

/* ---- 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, timeline ---------- */

/* Opening statement */
.opener{padding:54px 0 40px}
.opener .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--terra)}
.opener h1{font-size:clamp(30px,4.6vw,52px);line-height:1.06;margin-top:16px;max-width:19ch}
.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}

/* Clickable numbers */
.statgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));margin-top:26px}
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}
.chap{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0;border-top:1px solid var(--rule)}
@media(max-width:700px){.chap{grid-template-columns:54px minmax(0,1fr)}}
.chap .cn{padding:30px 0 34px;font-family:var(--mono);font-size:12px;color:var(--ink-3);
  position:relative;font-variant-numeric:tabular-nums}
.chap .cn .yr{display:block;font-family:var(--serif);font-size:26px;color:var(--terra);line-height:1;
  margin-bottom:6px}
.chap .cb{padding:30px 0 34px 22px;border-left:1px solid var(--rule)}
.chap h3{font-size:clamp(21px,2.6vw,28px);line-height:1.2}
.chap .cw{font-family:var(--sans);font-size:14.5px;line-height:1.62;color:var(--ink-2);
  max-width:64ch;margin-top:12px}
.chap .cq{font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.5;color:var(--ink);
  border-left:2px solid var(--terra);padding-left:16px;margin-top:16px;max-width:58ch}
.chap .cl{font-family:var(--mono);font-size:11.5px;margin-top:16px;display:flex;flex-wrap:wrap;gap:6px 18px}

/* Atlas */
#atlas{height:min(70vh,620px);border:1px solid var(--rule-strong);border-radius:3px;
  background:var(--panel-2)}
.atlas-key{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;font-family:var(--sans);
  font-size:12.5px;color:var(--ink-2)}
.atlas-key i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:7px;
  vertical-align:-1px;border:1px solid rgba(0,0,0,.25)}
.leaflet-popup-content{font-family:var(--sans);font-size:13px;line-height:1.5}
.leaflet-popup-content b{font-size:14px}

/* Tree */
.treewrap{overflow:auto;border:1px solid var(--rule);border-radius:3px;background:var(--panel);
  padding:20px}
.tnode{display:inline-flex;flex-direction:column;gap:2px;border:1px solid var(--rule-strong);
  border-radius:3px;padding:8px 12px;background:var(--ground);min-width:150px;
  text-decoration:none;color:inherit;transition:border-color .15s}
.tnode:hover{border-color:var(--accent)}
.tnode .tn{font-size:15px;line-height:1.2;color:var(--ink)}
.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)}
.tkids{display:flex;gap:14px;margin-left:26px;padding-left:20px;border-left:1px solid var(--rule);
  flex-direction:column;margin-top:8px}
.tbranch{margin-top:8px}
.tbranch > .tnode{margin-left:0}
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:" ▾"}

/* Ribbon timeline */
.ribbon{position:relative;overflow-x:auto;border:1px solid var(--rule);border-radius:3px;
  background:var(--panel);padding:0}
.ribbon-in{position:relative;height:330px;min-width:1500px}
.rb-axis{position:absolute;left:0;right:0;top:158px;height:2px;background:var(--rule-strong)}
.rb-tick{position:absolute;top:150px;width:1px;height:18px;background:var(--rule-strong)}
.rb-tick span{position:absolute;top:20px;left:-18px;width:56px;text-align:center;
  font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
.rb-ev{position:absolute;width:180px;font-family:var(--sans);font-size:11.5px;line-height:1.35}
.rb-ev .d{width:9px;height:9px;border-radius:50%;background:var(--terra);position:absolute;
  left:0;border:2px solid var(--ground)}
.rb-ev b{display:block;color:var(--ink);font-weight:600;font-size:12px}
.rb-ev span{color:var(--ink-2)}
.rb-ev.up{bottom:180px;padding-left:15px}
.rb-ev.up .d{bottom:-24px}
.rb-ev.dn{top:180px;padding-left:15px}
.rb-ev.dn .d{top:-19px;background:var(--accent)}
.rb-ev.dn b{color:var(--ink-2);font-weight:500}

/* ---- mobile: nothing may push the page sideways ---- */
.srcrow .refs code{max-width:100%;overflow-wrap:anywhere;word-break:break-word}
.srcrow .meta span{overflow-wrap:anywhere;min-width:0}
.srcrow h3,.srcrow h3 a{overflow-wrap:anywhere}
.srcrow .meta{flex-wrap:wrap}
@media (max-width:520px){
  .srcrow h3{font-size:19px}
  .srcrow .refs code{font-size:10.5px}
  .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}
  .chap .cn{padding:22px 0 24px}
  .chap .cb{padding:22px 0 24px 14px}
  .chap .cn .yr{font-size:20px}
  .atlas-key{font-size:11.5px;gap:6px 14px}
  #atlas{height:min(62vh,460px)}
  .treewrap{padding:12px}
  .tkids{margin-left:8px;padding-left:12px}
  .tnode{min-width:0;padding:7px 10px}
}

/* ---- On this page: a jump list built from the section headings -------- */
#onthispage { margin: 0 0 30px }
.toc {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--card);
  padding: 12px 16px;
  border-radius: 3px;
}
.toc > summary {
  cursor: pointer;
  list-style: none;
  font: 600 11px/1.4 var(--sans);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--dim);
}
.toc > summary::-webkit-details-marker { display: none }
.toc > summary::after { content: " ▾"; opacity: .55 }
.toc[open] > summary::after { content: " ▴" }
.toc > nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 4px 26px;
  margin-top: 12px;
}
.toc > nav a {
  display: block;
  padding: 5px 0;
  font: 15px/1.35 var(--serif);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.toc > nav a:hover { border-bottom-color: var(--accent); color: var(--accent) }
main section > h2 { scroll-margin-top: 18px }
@media (max-width: 700px) {
  .toc > nav { grid-template-columns: 1fr; gap: 0 }
  .toc > nav a { padding: 8px 0; border-bottom: 1px solid var(--rule) }
  .toc > nav a:last-child { border-bottom: 0 }
}

/* 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; }
.banner img {
  display: block; width: 100%; height: auto;
  max-height: 300px; object-fit: cover; object-position: center;
  border-radius: 2px;
}
@media (max-width: 700px) { .banner img { max-height: 190px; } }


/* ---------- 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}
  .burger .bars{width:15px;height:11px;position:relative;display:inline-block}
  .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}
}
/* the old open-by-default nav is retired */
.navbox{display:none!important}
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}
#onthispage .toc > summary{font-family:var(--sans);font-size:12px;color:var(--ink-3);
  cursor:pointer;list-style:none;padding:6px 0}
#onthispage .toc[open] > summary{color:var(--ink-2)}

/* ---------- home: colour and pictures --------------------------------- */
.hero{position:relative;display:grid;margin:0 0 8px;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,var(--accent) 0%,#123f4b 55%,#0d2f39 100%)}
/* Image and caption share one grid cell, so the banner grows when the words
   need more room than the picture. Absolutely positioning the caption clipped
   the eyebrow off the top of the frame on a phone. */
.hero img{grid-area:1/1;width:100%;height:100%;min-height:clamp(260px,42vw,470px);
  object-fit:cover;display:block}
.hero .cap{grid-area:1/1;position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  padding:30px clamp(18px,4vw,44px) 28px;
  /* The siblings scrim from the left, because their hero is one scene. This one
     is a triptych that reads left to right — England, the quay, Queensland — and
     a left scrim erases the English panel the caption underneath is about. So it
     scrims from the bottom instead: same treatment, different painting. */
  background:linear-gradient(to top,rgba(8,22,28,.93) 0%,rgba(8,22,28,.82) 30%,
             rgba(8,22,28,.52) 55%,rgba(8,22,28,.16) 80%,transparent 100%)}
@media(max-width:640px){
  .hero .cap{background:linear-gradient(to top,rgba(8,22,28,.94) 0%,rgba(8,22,28,.84) 42%,
             rgba(8,22,28,.52) 74%,rgba(8,22,28,.2) 100%);padding:24px 20px 22px}
  .hero img{min-height:clamp(300px,78vw,420px)}
  .hero h1{font-size:clamp(26px,7.6vw,36px);max-width:20ch}
  .hero .sub{font-size:13.5px;margin-top:10px}
}
.hero .kick{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:#EBC98A;text-shadow:0 1px 2px rgba(8,22,28,.6)}
.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{margin-top:44px;padding:26px clamp(16px,3vw,32px) 30px;border-radius:16px;
  background:var(--panel);border:1px solid var(--rule)}
.feat > h2{font-size:clamp(24px,3.4vw,34px)}
.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(240px,34vw,420px);object-fit:cover;display:block}
.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 h1{color:#FBF7EF;font-size:clamp(30px,5vw,56px);line-height:1.05;
  margin-top:10px;max-width:17ch}
.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}
.spine-key{font-family:var(--sans);font-size:12.5px;color:var(--ink-3);margin-top:6px}
@media (max-width:600px){
  .spine{padding-left:28px}
  .spine::before{left:7px}
  .spine .gen::before{left:-27px}
}

/* ---- People finder (added with the search on /people) -------------------- */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fchip{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.04em;
       padding:.3rem .6rem;border:1px solid var(--rule-strong);border-radius:999px;
       background:transparent;color:var(--ink-3);cursor:pointer;line-height:1.6}
.fchip:hover{border-color:var(--accent);color:var(--accent)}
.fchip.on{border-color:var(--accent);color:var(--accent);background:var(--accent-wash)}
#q:focus{outline:2px solid var(--accent);outline-offset:1px}
.pcard[hidden],.pgroup[hidden]{display:none!important}

/* ---- Frontispiece (the crossing) ---------------------------------------- */
/* Full-bleed plate. Unused since the homepage panorama moved into .hero on
   10 September 2026 — kept because the next commissioned picture will want it.
   The 100vw bleed is wider than the content box once a scrollbar exists, so clip
   at the root as well as the body or the page gains 8px of side-scroll. */
html,body{overflow-x:clip}
.bleed{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw}
.platewrap{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
           background:var(--ink-0,#0f1420)}
.plate{display:block;width:100%;height:auto;aspect-ratio:3168/1344;object-fit:cover}
@media (max-width:720px){
  /* the panorama is 2.36:1 — too thin on a phone. Crop toward the quay. */
  .plate{aspect-ratio:16/10;object-position:56% center}
}
.cap .dim{color:var(--ink-3);font-style:italic}

/* ---- Auto-linked person names (wholink.js) ------------------------------- */
a.wholink{color:inherit;text-decoration:none;
  border-bottom:1px dotted var(--rule-strong);text-underline-offset:0}
a.wholink:hover,a.wholink:focus-visible{color:var(--accent);border-bottom-color:var(--accent)}
.prow[hidden],.plgroup[hidden]{display:none!important}

/* ---- pedigree chart on person pages ----
   Ported from the sibling archives so the six read the same way. The left
   border of a card says how the RELATIONSHIP is known: solid accent = written
   in a record; dotted = family tree, untested; dashed and struck = family tree
   and above a rejected graft. */
.ptree{margin:0 0 1.6rem;padding:1.1rem 1.1rem .9rem;border:1px solid var(--rule);
  border-radius:4px;background:var(--panel)}
.ptree .tier{position:relative}
.ptree .lab{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);margin:.2rem 0 .5rem}
.ptree .row{display:flex;flex-wrap:wrap;gap:.55rem;align-items:stretch}
.ptree .node{display:flex;flex-direction:column;gap:.1rem;min-width:10rem;max-width:17rem;
  padding:.5rem .65rem;border:1px solid var(--rule);border-radius:3px;
  text-decoration:none;color:inherit;background:var(--paper)}
.ptree a.node:hover{border-color:var(--accent)}
.ptree a.node:hover .nm{color:var(--accent)}
.ptree .node.me{border-width:2px;border-color:var(--ink);background:var(--panel)}
.ptree .node.small{min-width:8.5rem;padding:.4rem .55rem}
.ptree .nm{font-family:var(--sans);font-size:14px;font-weight:600;line-height:1.25;color:var(--ink)}
.ptree .dt{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.ptree .mar{font-family:var(--sans);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.ptree .via{font-family:var(--sans);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-top:.2rem;line-height:1.35}
.ptree .node.via-register{border-left:3px solid var(--accent)}
.ptree .via-register .via{color:var(--accent);text-transform:none;letter-spacing:.02em;font-size:10.5px}
.ptree .node.via-tree{border-left:3px dotted var(--ink-3)}
.ptree .node.gone{border-left-style:dashed;opacity:.8}
.ptree .node.gone .nm{text-decoration:line-through;text-decoration-thickness:1px}
.ptree .node.gone .via{font-style:italic}
.ptree .via.gen{color:var(--accent);font-weight:600}
.ptree .drop{height:.95rem;margin-left:1.5rem;border-left:1px solid var(--rule-strong)}
.ptree .sibs{margin-top:1rem;padding-top:.8rem;border-top:1px dashed var(--rule)}
.ptree figcaption{margin-top:1rem;padding-top:.7rem;border-top:1px solid var(--rule);
  font-family:var(--sans);font-size:11.5px;color:var(--ink-2)}
.ptree .key{display:inline-flex;align-items:center;gap:.4rem;margin-right:1.1rem;white-space:nowrap}
.ptree .sw{width:.9rem;height:0;border-top:3px solid var(--accent);display:inline-block}
.ptree .sw.tree{border-top-style:dotted;border-top-color:var(--ink-3)}
.ptree .sw.gone{border-top-style:dashed;border-top-color:var(--ink-3)}
.ptree .warn{margin:.55rem 0 0;line-height:1.55;max-width:82ch}
@media(max-width:640px){
  .ptree .node{min-width:0;flex:1 1 46%}
  .ptree{padding:.8rem .8rem .7rem}
}

/* ---- timeline: the state, behind the family ----
   These finally use the --r-* regime tokens defined at the top of this file,
   which were declared when the site was built and then sat unused for weeks. */
.tlwrap{border:1px solid var(--rule);border-radius:4px;background:var(--panel);padding:14px 14px 6px}
.tlbands{display:flex;flex-direction:column;gap:4px}
.tllane{position:relative;height:30px}
.tlband{position:absolute;top:0;bottom:0;border-radius:3px;padding:0 10px;overflow:hidden;
  display:flex;gap:.5rem;align-items:center;min-width:0}
.tlname{font-family:var(--sans);font-size:11.5px;font-weight:600;color:#fff;line-height:1.2}
.tlyears{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.82);white-space:nowrap}
.tlaxis{position:relative;height:20px;margin-top:6px}
.tltick{position:absolute;transform:translateX(-50%);font-family:var(--mono);font-size:10.5px;
  color:var(--ink-3)}
.tllegend{display:flex;gap:.65rem;align-items:flex-start}
.tlsw{flex:0 0 auto;width:14px;height:14px;border-radius:3px;margin-top:3px}
.tlrow{display:flex;gap:.9rem;align-items:baseline;padding:.5rem 0 .5rem .9rem;
  border-left:3px solid var(--rule);border-bottom:1px solid var(--rule)}
.tlrow.key{border-left-width:3px;background:var(--panel)}
.tly{flex:0 0 3.4rem;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tlrow.key .tly{color:var(--ink)}
.tlwhat{color:var(--ink-2);line-height:1.5}
.r-georgian{background:var(--r-georgian)} .tlrow.r-georgian{border-left-color:var(--r-georgian);background:none}
.r-colony{background:var(--r-colony)} .tlrow.r-colony{border-left-color:var(--r-colony);background:none}
.r-federation{background:var(--r-federation)} .tlrow.r-federation{border-left-color:var(--r-federation);background:none}
.r-modern{background:var(--r-modern)} .tlrow.r-modern{border-left-color:var(--r-modern);background:none}
.tlrow.key{box-shadow:inset 0 0 0 1px var(--rule)}
@media(max-width:640px){
  .tlname{font-size:10px}.tlyears{display:none}
  .tlrow{flex-direction:column;gap:.15rem}
  .tly{flex:none}
}