:root{
  --ground:#EDE2C8; --panel:#F8F1DE; --panel-2:#E5D9BC;
  /* --ink-3 IS PINNED BY CONTRAST, NOT BY TASTE. It was #7C8A91, a nicer
     grey that measured 2.99:1 on this ground and 3.29:1 on --panel where
     WCAG AA asks 4.5:1 for body text. axe found 59 failing elements on a
     single surname page and every one of them was this variable — captions,
     table headers, footnotes, the .lab labels. #5C6A71 measures 4.69 and
     5.17. Dark mode had the same fault more quietly: #74858E passed on
     --ground at 4.68 and failed on --panel at 4.26, so it was legible on the
     page and not in the boxes. Both now carry headroom. If either is
     lightened for looks, run the audit again first. */
  --ink:#201A12; --ink-2:#4A4132; --ink-3:#6E6047;
  --rule:#D9C9A0; --rule-strong:#CBB98D;
  /* ---- THE UNION PALETTE, PHASE 3 STEP ONE ----------------------------
     The Flags Atlas and this atlas were built separately and turned out to
     be the same design language with different saturation. Measured:

         paper   #ede2c8  there   #EDEBE5  here
         teal    #204b5c  there   #1F5C6B  here     <- four hex digits apart
         ground  #14171b  there   #101820  here     (dark)

     What the flags have that this did not is a SECOND and THIRD accent —
     a brick red and a brass — and they are most of why that site reads as
     warmer. They are added here rather than invented, so the two sides stop
     drifting while the rest of the union is done.

     THEY MUST NOT COLLIDE WITH THE ACCESS CLASSES, and that is the whole
     constraint on colour in this project. free/account/index/mixed/paid/
     catalogue/onsite/unsurveyed colour every dot on the map and a reader
     learns them; they are vocabulary, not decoration. Brick and brass are
     for CHROME — eyebrows, rules, emphasis — and never for a dot. */
  /* #8D6227, not the Flags Atlas's own #A9762F. That value measures 3.31:1
     on this paper — below the 4.5 AA floor — and I wrote «4.52, over the
     floor» into this file from memory before measuring it. The same mistake
     this project shipped 59 unreadable elements with. Darkened until it
     clears: 4.51 on --ground, 4.97 on --panel. The dark-mode value needed no
     change at 7.62. */
  --brass:#7E5A20; --brick:#9C3B28;
  --accent:#204B5C; --accent-2:#2E6B7E; --accent-wash:#DCE6E8;
  --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-ottoman:#6E5A3C;
  --r-poland:#A03A55; --r-prussia:#2F3E46; --r-russia:#7A4A2B; --r-soviet:#8C2F2F;
  --r-czech:#3E6B8A; --r-hungary:#6B8F3A; --r-romania:#8A6A3C; --r-ukraine:#3D6EA8;
  --r-lithuania:#4E7A6B; --r-germany:#6E6560;
  --r-twosicilies:#9A5B2E; --r-britain:#3C5A8A; --r-dutch:#C4762A;
  --r-southafrica:#2E7D5B; --r-australia:#8E6F1E; --r-spain:#A8322E; --r-argentina:#4A8FB5;
  --r-uk:#44567E; --r-england:#8A3C3C; --r-ireland:#2E6E4E; --r-scotland:#6A4F8C;
  --r-france:#1E6E8C; --r-sweden:#C7A03A; --r-baltic:#4F7E72; --r-slovenia:#3F7A5E;
  --r-bosnia:#7A6A4A; --r-serbia:#8E3A44; --r-canada:#B05C3C;
  --r-belgium:#9A3E8C;
  --r-netherlands:#E8902B; --r-denmark:#B03A3A; --r-norway:#1E7A6E;
  --r-finland:#5A6FB5; --r-portugal:#4E8A3C;
  --band-label:#F8F1DE;
  --serif:"Fraunces","EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3","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:#14171B; --panel:#1C2027; --panel-2:#232830;
  --ink:#ECE1C4; --ink-2:#B5AC94; --ink-3:#9A9280;
  /* The flag atlas's own dark values for the same two accents, so a reader
     moving between the flag pages and the rest sees one palette. */
  --brass:#D1A154; --brick:#D3644A;
  --rule:#33393F; --rule-strong:#48505A;
  --accent:#6FA3B8; --accent-2:#8FBCCF; --accent-wash:#17303A;
  --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-ottoman:#A08A62;
  --r-poland:#C9647E; --r-prussia:#6E8794; --r-russia:#A87C57; --r-soviet:#C85F5F;
  --r-czech:#6E9CBA; --r-hungary:#96BE63; --r-romania:#B89A6C; --r-ukraine:#6E9AD4;
  --r-lithuania:#79A895; --r-germany:#9A918B;
  --r-twosicilies:#C08A5C; --r-britain:#7592C0; --r-dutch:#E0A063;
  --r-southafrica:#5FAE8B; --r-australia:#BFA054; --r-spain:#D2665F; --r-argentina:#7EBBDA;
  --r-uk:#7F8DBA; --r-england:#C07070; --r-ireland:#5FA882; --r-scotland:#A088C4;
  --r-france:#5AA4C0; --r-sweden:#E0BF66; --r-baltic:#82B0A4; --r-slovenia:#74AE92;
  --r-bosnia:#AE9E7C; --r-serbia:#C46E78; --r-canada:#DE8E6E;
  --r-belgium:#C77ABA;
  --r-netherlands:#F2B267; --r-denmark:#D97676; --r-norway:#59B3A6;
  --r-finland:#8E9DD6; --r-portugal:#85BE71;
  --band-label:#1C2027;
}}
:root[data-theme="dark"]{
  --ground:#14171B; --panel:#1C2027; --panel-2:#232830;
  --ink:#ECE1C4; --ink-2:#B5AC94; --ink-3:#9A9280;
  /* The flag atlas's own dark values for the same two accents, so a reader
     moving between the flag pages and the rest sees one palette. */
  --brass:#D1A154; --brick:#D3644A;
  --rule:#33393F; --rule-strong:#48505A;
  --accent:#6FA3B8; --accent-2:#8FBCCF; --accent-wash:#17303A;
  --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-ottoman:#A08A62;
  --r-poland:#C9647E; --r-prussia:#6E8794; --r-russia:#A87C57; --r-soviet:#C85F5F;
  --r-czech:#6E9CBA; --r-hungary:#96BE63; --r-romania:#B89A6C; --r-ukraine:#6E9AD4;
  --r-lithuania:#79A895; --r-germany:#9A918B;
  --r-twosicilies:#C08A5C; --r-britain:#7592C0; --r-dutch:#E0A063;
  --r-southafrica:#5FAE8B; --r-australia:#BFA054; --r-spain:#D2665F; --r-argentina:#7EBBDA;
  --r-uk:#7F8DBA; --r-england:#C07070; --r-ireland:#5FA882; --r-scotland:#A088C4;
  --r-france:#5AA4C0; --r-sweden:#E0BF66; --r-baltic:#82B0A4; --r-slovenia:#74AE92;
  --r-bosnia:#AE9E7C; --r-serbia:#C46E78; --r-canada:#DE8E6E;
  --r-belgium:#C77ABA;
  --r-netherlands:#F2B267; --r-denmark:#D97676; --r-norway:#59B3A6;
  --r-finland:#8E9DD6; --r-portugal:#85BE71;
  --band-label:#1C2027;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
/* THE PAIRING, WHICH IS THE REST OF THE ANSWER. The flags atlas sets
   `body { font-family: "Source Sans 3"; font-size: 16px }` and keeps Fraunces
   for its headings alone. This sheet set the BODY to Fraunces at 19px, so
   every paragraph, table cell and caption on the site was set in a display
   serif at reading size — which is why it read as a book about records rather
   than an atlas of them, however the colours were tuned.
   Sans for the body, serif for the voice. 17px rather than the flags atlas's
   16: this site has far more prose in it, and 19 was large enough that a
   table of volumes ran out of room. */
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.58;-webkit-font-smoothing:antialiased}
/* 500 WAS THE «BORING». David, three times over: the branding still is not
   the flags atlas. I answered with palette twice — warmer ground, corrected
   brass — and the palette was never the difference. The flags atlas sets its
   headings BOLD; this sheet set every heading on the site to weight 500, and
   Fraunces at 500 is a genteel book face where at 700 it is the heavy slab
   that makes «Flags Atlas» read the way it does. One number.
   h3/h4 stay lighter: they are labels within a page, not its voice. */
/* EXPLICIT, because they no longer inherit it. While the body was serif
   these could say nothing about their face and still be Fraunces; the moment
   the body went sans they would have gone sans with it, and the one part of
   the page that is supposed to be the display serif would have quietly
   stopped being one. */
h1,h2{font-family:var(--serif);text-wrap:balance;margin:0;font-weight:700;
  letter-spacing:-.02em}
h3,h4{font-family:var(--serif);text-wrap:balance;margin:0;font-weight:600;
  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}
/* THE EYEBROW IN BRASS. This is the smallest change that carries most of what
   David was reacting to in the Flags Atlas — «FAMILY RESEARCH · WORLD FLAGS
   ATLAS» in gold above a serif title is the first thing a reader sees there,
   and here the same line sat in --ink-3, the same muted grey as a caption.
   An eyebrow is a signpost, not a footnote.

   CONTRAST MEASURED, AND THE FIRST ATTEMPT FAILED IT. I wrote the Flags
   Atlas's own #A9762F in here with a comment claiming 4.52:1, from memory,
   without running the numbers. It is 3.31:1 on this paper — below the AA
   floor — which is precisely the fault that put 59 unreadable elements on
   every page of this site earlier today, committed by the same hand that had
   just fixed them. --brass is #8D6227 now: 4.51 light, 7.62 dark. */
.lab{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass)}
.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}/* was display:flex;gap:16px, which made an inline <strong> inside a <p class="prose"> its own   flex item, so bold words broke onto their own line. Spacing now applies between block   children only, leaving inline markup alone. */.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}
/* Rounded, the way the flags atlas sets its crown tags — «Habsburg»,
   «Ottoman», «Venice». A square chip reads as a table cell; a pill reads as
   a label somebody attached. */
.chip{border-radius:999px;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}
/* THE FLAG BESIDE THE TITLE. The flags atlas reads lighter than the rest of
   this site not because of its palette — its stylesheet holds two hex values
   and shares every token with this one — but because every card on it carries
   a drawn flag. These pages carried none. Sized off the heading so it scales
   with it, and floored so it stays legible where the heading is small. */
.pagehead-title{display:flex;align-items:center;gap:clamp(12px,1.6vw,20px)}
.pagehead-title h1{margin-top:0}
.pagehead-flag{flex:none;display:block;width:clamp(48px,6vw,78px);line-height:0;
  border:1px solid var(--rule);border-radius:2px;overflow:hidden;
  box-shadow:0 1px 0 rgba(0,0,0,.05)}
.pagehead-flag svg{width:100%;height:auto;display:block}
.pagehead-flag:hover{border-color:var(--accent)}
.pagehead-flagged h1{margin-top:0}
/* THE COLOUR THAT WAS ALREADY IN THE DATA. flag-index.json carries a `color`
   for every one of its 210 countries — #a4302a for Croatia, #1e2f96 for
   Slovenia, #6a3f8f for Serbia — and the flags atlas draws the top stripe of
   each card from it. That is most of why that page reads as colourful while
   this one reads as beige: the colour is per country and it was sitting in a
   file this side never opened. A page about Croatian ground now closes its
   header with Croatia's red. Falls back to the ordinary rule where there is
   no flag, so nothing depends on it. */
.pagehead-flagged{border-bottom:3px solid var(--edge,var(--rule))}
.pagehead-flag{border-color:var(--edge,var(--rule))}
@media(max-width:600px){
  .pagehead-title{gap:11px}
  .pagehead-flag{width:42px}
}
.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}
/* a child identified to a dossier by record id, not by name — the only ones
   that open the blood chart, so they are the only ones that look clickable */
a.kid.named{text-decoration:none;color:inherit;border-style:solid;
  border-bottom-width:2px;border-bottom-color:var(--accent);cursor:pointer}
a.kid.named:hover,a.kid.named:focus-visible{background:var(--accent-wash);border-color:var(--accent)}
.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}
.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}

/* ---- 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{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}
  .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)}
.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)}

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

/* ---- 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 ------------------------------- */
/* THE MENU OPENED BEHIND THE SEARCH BOX. David: «menu sits behind the search
   box?» — «Every place» and «Countries» were being drawn under it, unreachable.
   z-index:60 with the dropdown at 70 looks like it should win against nothing,
   and does: a sticky header WITH a z-index makes its own stacking context, so
   that 70 is sealed inside a box whose whole value is 60. The map's search bar
   sits at 1100 in the root context, and 1100 beats 60 however high the child
   climbs. The header has to outrank it as a whole, so it does — except in
   fullscreen, where the map is the window and a header floating over it would
   be the opposite bug. body.ra-fs-on already marks that state. */
header.site{position:sticky;top:0;z-index:1300;background:var(--panel);
  border-bottom:1px solid var(--rule-strong);box-shadow:0 1px 0 rgba(0,0,0,.03)}
body.ra-fs-on header.site{z-index:10}
.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)}
/* A DIRECT NAV LINK, dressed exactly like a disclosure minus its arrow.
   The Flags section has one front door, so its menu item is the door rather
   than a disclosure holding a single item. It has to sit at the same size,
   colour, padding and radius as its neighbours or it reads as something
   bolted on — which, being 245 pages copied in from another site, it must
   not. No ::after arrow, because there is nothing to open. */
.topnav .menulink{font-family:var(--sans);font-size:12.5px;color:var(--ink-2);
  padding:6px 9px;border-radius:999px;white-space:nowrap;text-decoration:none;
  border:1px solid transparent;display:inline-block;line-height:1.35}
.topnav .menulink:hover{color:var(--ink);background:var(--panel-2)}
.topnav .menulink.on{color:var(--ink);border-color:var(--rule-strong)}
.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)}
/* THE MAP'S FOUR TOOLS, IN A ROW. This span had no rule of its own at all, so
   the buttons the map moves into it were inline-blocks taking whatever width
   was left and wrapping into a 2x2 block on a phone — which is what David
   photographed. A flex row that does not wrap keeps them one control, and
   `flex:0 0 auto` stops the header squeezing them instead of wrapping itself. */
.site-tools{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  flex-wrap:nowrap}
.site-tools:empty{display:none}

/* Square now that it carries no word, so the row has room for the map's four
   tool buttons instead of wrapping them into a 2x2 block. 38px matches
   --ra-ctl, which is what those buttons measure. */
.burger{display:none!important;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:13px;
  background:none;border:1px solid var(--rule-strong);border-radius:999px;
  width:38px;height:38px;padding:0;flex:0 0 auto;
  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}
#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;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{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}


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

/* ---- PAPER ---------------------------------------------------------------
   A PLACE'S SOURCES COULD NOT LEAVE THE SCREEN. The whole point of a place
   page is that it is a list of things to go and do — write to this archive,
   open that film, the registers before 1797 are in Venice — and people
   doing that work sit in reading rooms with no wifi, or take a page to a
   relative who does not use a computer. Printed, it came out with a sticky
   navigation bar across the top, an ad slot, a cookie strip, and every link
   as blue text whose destination had vanished.

   So: the chrome goes, the links print their own URLs, and a table is not
   allowed to break across a page in the middle of a row. This is in the
   shared stylesheet rather than on one page because every page here is a
   list of somewhere to look.

   `@page` margins rather than body padding: a browser will happily print a
   two-column layout into a 12 mm gutter otherwise. */
@page { margin: 16mm 14mm; }

@media print {
  :root { --ground:#fff; --panel:#fff; --ink:#000; --ink-2:#222; --ink-3:#555; }
  html, body { background:#fff !important; color:#000;
               font-size:10.5pt; line-height:1.45; }

  /* Everything that is a control rather than a fact. */
  header.site, footer.site, .topnav, .burger, .drawer, .adbox, .adslot,
  .ksearch, .ra-bar, .at-map, .ra-foot, .ra-help, .skip,
  ins.adsbygoogle, .fc-consent-root { display:none !important; }

  /* The panel is the map's answer and the map itself is gone, so it stops
     being a scrolling column and becomes the page. */
  .at-wrap { display:block !important; }
  .at-panel { height:auto !important; max-height:none !important;
              overflow:visible !important; border:0 !important; padding:0 !important;
              position:static !important; box-shadow:none !important; }

  main, .wrap, .one { max-width:none !important; width:auto !important;
                      margin-left:0 !important; margin-right:0 !important; }
  a { color:#000; text-decoration:underline; }

  /* THE DESTINATION IS THE POINT. A printed «FamilySearch» that does not say
     where it goes is worse than useless to somebody typing it back in.
     In-page anchors and javascript: links are left alone — printing «#top»
     after a word is noise. */
  main a[href^="http"]::after { content:" \2039" attr(href) "\203A";
    font-family:var(--mono); font-size:8pt; color:#444; word-break:break-all; }

  h1, h2, h3 { break-after:avoid-page; }
  tr, li, .one, .vols li { break-inside:avoid; }
  table { break-inside:auto; }
  thead { display:table-header-group; }

  /* Where this came from, on every sheet that leaves the building. */
  .pagehead::after {
    content:"Record Atlas \2014 recordatlas.org";
    display:block; margin-top:8px;
    font-family:var(--mono); font-size:8pt; color:#555;
  }
}