/* The family pages' shared look - the tokens the kinship register and the fan chart
   already use (the "artifact style" the owner asked to keep, 2026-09-13). Door 3
   styles the person page properly; this is the skeleton's minimum. */
:root{
  --paper:#F3F4F1; --ink:#1E2429; --ink-2:#4A545C; --muted:#6B747C;
  --rule:#CDD2CB; --rule-soft:#E2E6E0; --accent:#6E2F2F; --accent-soft:#F0E4E4;
  --living:#2F5D50; --band:#FBFBF9;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#15191C; --ink:#E6E4DD; --ink-2:#B9BFC4; --muted:#8E979E;
    --rule:#39424A; --rule-soft:#262D33; --accent:#D39A9A; --accent-soft:#3A2626;
    --living:#8CC7B2; --band:#1B2024;
  }
}
html{color-scheme:light dark}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:15.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
.masthead,.page,.colophon{max-width:880px;margin:0 auto;padding:0 20px}
.masthead{padding-top:22px}
.masthead .eyebrow{text-decoration:none}
.eyebrow{font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}
h1{font-family:"Fraunces","Iowan Old Style",Georgia,serif;font-weight:700;
  font-size:clamp(34px,5vw,52px);line-height:1.05;margin:8px 0 12px;text-wrap:balance}
h2{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:22px;line-height:1.15;
  margin:28px 0 8px;color:var(--accent)}
.standfirst{font-family:"Fraunces",Georgia,serif;font-size:19px;color:var(--ink-2);margin:0 0 18px}
.note{color:var(--muted)}
.years{color:var(--muted);font-variant-numeric:tabular-nums}
.living{color:var(--living);font-style:italic}
.unknown{color:var(--muted);font-style:italic}
ul.people{list-style:none;padding:0;margin:0;columns:2;column-gap:32px}
ul.people li{break-inside:avoid;padding:3px 0;border-bottom:1px solid var(--rule-soft)}
section.surname h2{margin-top:32px}
/* everyone by surname (owner, s151): a letter row, then one run-in line per surname */
.letters{display:flex;flex-wrap:wrap;gap:4px 10px;margin:0 0 14px;padding:8px 0;border-top:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule-soft);font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;font-size:14px}
.letters a{text-decoration:none;padding:0 3px}
.letters a:hover{text-decoration:underline}
.surnames{font-size:14.5px;line-height:1.5}
/* the roster (s152, after Geneanet's list): a surname heading, one line per person */
h3.letter{font-family:"Fraunces",Georgia,serif;font-size:17px;color:var(--accent);margin:14px 0 2px;scroll-margin-top:12px}
ul.roster{list-style:none;padding:0;margin:0;line-height:1.35}
ul.roster li{padding:0 0 0 20px;text-indent:-20px}
.mark{display:inline-block;width:14px;color:var(--rule);font-size:11px;text-indent:0}
.mark.on{color:#5aa469}
/* the profile, compact (owner, s152: "same on user profiles") */
.person h2{margin:16px 0 4px;font-size:19px}
.person p{margin:2px 0}
.person .standfirst{margin-bottom:6px}
.person .how-summary{margin-top:4px}
ul.spouses{list-style:none;padding:0;margin:0}
ul.spouses>li{padding:2px 0}
ul.children{list-style:none;padding:0 0 0 20px;margin:0}
ul.children li{padding:0}
.person table.facts td,.person table.facts th{padding:2px 8px 2px 0}
.person table.facts td:nth-child(2){white-space:nowrap}
.person .legend{margin-top:4px}
.person ul.people li,.person ol.people li{padding:1px 0}
ul.sources{padding-left:18px;font-size:14px;margin:0}
ul.sources li{padding:0}
ul.sources .for{color:var(--muted)}
.sexmark{display:inline-block;width:.9em;margin-right:.25em;font-size:.6em;vertical-align:.35em}
.sexmark.s1{color:#E37A9C}
.sexmark.s0{color:#6FAEE0}
.entry{margin:0;padding:3px 0;border-bottom:1px solid var(--rule-soft)}
.entry b{font-family:"Fraunces",Georgia,serif;color:var(--accent);font-size:15.5px;margin-right:8px;scroll-margin-top:12px}
.entry .years{font-size:13px}
table.facts{border-collapse:collapse;width:100%;font-size:14.5px}
table.facts th{text-align:left;font-weight:600;color:var(--muted);border-bottom:1px solid var(--rule);padding:6px 8px 6px 0}
table.facts td{padding:6px 8px 6px 0;border-bottom:1px solid var(--rule-soft);vertical-align:top}
td.how{color:var(--muted);white-space:nowrap}
td.how-on-record{color:var(--living)}
.person-head{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
.person-head.has-portrait{grid-template-columns:160px 1fr}
.portrait{width:160px;height:160px;object-fit:cover;border-radius:8px;border:1px solid var(--rule)}
.how-summary{font-family:"Fraunces",Georgia,serif;font-size:16px;color:var(--ink-2);margin:6px 0 0}
.details{font-size:13px;color:var(--muted);margin-top:2px}
.legend{font-size:13px;color:var(--muted);margin-top:10px}
.legend .how{font-weight:600}
.family-link{font-size:13px;margin-left:8px;font-weight:400}
ol.people{padding-left:22px;margin:0}
ol.people li{padding:3px 0;border-bottom:1px solid var(--rule-soft)}
ul.events{padding-left:18px}
@media (max-width:640px){.person-head.has-portrait{grid-template-columns:1fr}}
/* the in-time charts (door 4): fixed year axes at the frame edges, the SVG pans between them */
.timechart-wrap{position:relative;display:grid;grid-template-columns:52px 1fr 92px;grid-template-rows:auto 1fr;height:72vh;background:var(--band);
  border:1px solid var(--rule-soft);border-radius:8px;overflow:hidden}
.timechart-wrap .chart-head{grid-column:1/4;padding:4px 12px;font-size:13px;color:var(--muted);min-height:0;text-align:center}
.timechart-wrap .chart-head:empty{padding:0}
.timechart-wrap .chart-head a.back{margin-left:10px}
.timechart{width:100%;height:100%;display:block;cursor:grab;user-select:none}
.timechart:active{cursor:grabbing}
.timechart .grid line{stroke:var(--rule-soft);stroke-width:1;vector-effect:non-scaling-stroke}
.timechart-wrap .axis{position:relative;overflow:hidden;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;color:var(--muted)}
.timechart-wrap .axis.left{border-right:1px solid var(--rule);text-align:right}
.timechart-wrap .axis.right{border-left:1px solid var(--rule);padding-left:26px}
.timechart-wrap .tick{position:absolute;left:0;right:6px;transform:translateY(-50%)}
.timechart-wrap .axis.right .tick{left:auto;right:6px}
.timechart-wrap .births{position:absolute;left:2px;top:0;bottom:0;width:24px}
.timechart-wrap .bar{position:absolute;left:0;background:#7CC47F;opacity:.8;cursor:help}
.timechart-wrap .bar:hover{opacity:1;background:#A5E0A7}
.timechart-wrap .ylabel{position:absolute;right:4px;transform:translateY(-50%);background:var(--accent);color:var(--paper);
  padding:0 5px;border-radius:4px;font-size:12px;pointer-events:none}
html{scrollbar-gutter:stable}
body{overflow-x:hidden}
.chart-frame.wide{width:calc(100vw - 72px);margin-left:calc(50% - 50vw + 28px)}
.chart-tags{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.chart-tags .tag{position:absolute;transform:translate(-50%,-100%);white-space:nowrap;font-size:11.5px;line-height:1.2;
  padding:1px 6px;border-radius:4px;background:var(--paper);color:var(--ink);border:1px solid var(--rule);
  box-shadow:0 2px 6px rgba(0,0,0,.15)}
.chart-frame.wide .chart-help{max-width:880px;margin-left:auto;margin-right:auto}
.timechart .link{stroke:var(--rule);stroke-width:1.1;fill:none;opacity:.9}
.timechart .link.f{stroke:#E37A9C}
.timechart .link.m{stroke:#6FAEE0}
.timechart .dot{fill:var(--muted)}
.timechart .dot.f{fill:#E37A9C}
.timechart .dot.m{fill:#6FAEE0}
.timechart .dot.estimated{fill:var(--band);stroke-width:1.4;stroke:var(--muted)}
.timechart .dot.f.estimated{stroke:#E37A9C}
.timechart .dot.m.estimated{stroke:#6FAEE0}
.timechart .dot.living{stroke:var(--living);stroke-dasharray:1.5 1.2}
/* flags of the country of birth as it was then (s151): drawn over the dot when the checkbox is on */
.timechart use.flag{display:none;pointer-events:none}
.timechart.flags-on use.flag{display:inline}
.timechart use.flag.inferred{opacity:.55}
.chart-flags{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin:8px 0 0;font-size:13px;color:var(--muted)}
.chart-flags label{display:inline-flex;align-items:center;gap:6px}
.chart-flags input[type="range"]{width:90px}
.chart-flags .legend{display:flex;flex-wrap:wrap;gap:4px 14px}
.chart-flags .legend .item{display:inline-flex;align-items:center;gap:5px}
.chart-flags .legend svg{border:1px solid var(--rule-soft)}
/* the underlays (s152): red event lines and bands, soft place clouds, both behind the links and dots */
.chart-flags .toggle{display:inline-flex;align-items:center;gap:8px}
.chart-flags .swatch{display:inline-block;width:12px;height:12px;border-radius:50%;opacity:.7}
/* a "Key" beside a toggle opens a popover (s152: "hidden under a popup, so that all toggles can be on a row") */
.chart-flags details.key{position:relative}
.chart-flags details.key summary{cursor:pointer;list-style:none;font-size:12px;padding:1px 8px;border:1px solid var(--rule);border-radius:999px;color:var(--ink-2)}
.chart-flags details.key summary::-webkit-details-marker{display:none}
.chart-flags details.key[open] summary{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.chart-flags details.key .pop{position:absolute;left:0;top:calc(100% + 6px);z-index:6;min-width:240px;max-width:min(560px,80vw);padding:10px 12px;
  border-radius:8px;background:var(--paper);border:1px solid var(--rule);box-shadow:0 8px 24px rgba(0,0,0,.18);display:flex;flex-direction:column;gap:8px}
.chart-tags .cloudlabel{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font-size:11.5px;font-weight:600;opacity:.9;
  padding:0 4px;text-shadow:0 0 3px var(--band),0 0 3px var(--band)}
.timechart .underlay.events line.event{stroke:#d33;stroke-opacity:.6;vector-effect:non-scaling-stroke;stroke-width:1.2}
.timechart .underlay.events rect.span{fill:#d33;fill-opacity:.09}
.timechart .underlay .cloud{opacity:.32}
.timechart .underlay .cloud ellipse{fill:none;stroke:none}   /* anchors only: the hull is the cloud */
.timechart .underlay .cloud path.hull{stroke-width:90;stroke-linejoin:round;stroke-linecap:round}
.chart-tags .evlabel{position:absolute;transform:translateY(-100%);white-space:nowrap;font-size:11px;color:#d33;opacity:.85;padding-bottom:1px}
.timechart .dot.self{fill:var(--living)}
.timechart a.node:hover .dot{r:6}
.timechart .link.hi{stroke-width:3;opacity:1}
.timechart .dot.hi{r:4.5}
.timechart .yline{stroke:var(--ink-3,var(--muted));stroke-width:1;opacity:.7}
.timechart .births .fill{fill:#7CC47F;opacity:.75;pointer-events:none}
.timechart .births .hit{fill:transparent;cursor:help}
.timechart .births .band:hover .fill{opacity:1}
.timechart .ylabel{fill:var(--muted);font-size:14px;font-family:"IBM Plex Mono",ui-monospace,monospace;pointer-events:none}
.chart-card ul{margin:4px 0 0;padding-left:16px}
.chart-card{position:absolute;z-index:2;max-width:260px;padding:8px 12px;border-radius:8px;background:var(--paper);
  color:var(--ink);border:1px solid var(--rule);box-shadow:0 8px 24px rgba(0,0,0,.18);font-size:13.5px;line-height:1.35;pointer-events:none}
.chart-card.pinned{pointer-events:auto;z-index:3;border-color:var(--accent)}
.chart-card .choices{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:8px;font-size:13px}
.chart-card .choices a{white-space:nowrap}
.chart-card span{color:var(--muted)}
.chart-card i{color:var(--muted);font-style:normal;font-size:12px}
.chart-help{font-size:13px;color:var(--muted);margin:6px 0 0}
ol.pedigree,ol.pedigree ol{list-style:none;padding-left:18px;border-left:1px solid var(--rule-soft);margin:4px 0}
ol.pedigree>li{padding:2px 0}
/* the home page */
.home-title{text-align:center;margin:18px 0 20px}
/* compact, and pinned to the top while the page scrolls (owner, s152) */
.side-toggle{position:sticky;top:0;z-index:4;display:flex;flex-direction:column;align-items:center;gap:5px;
  margin:0 0 10px;padding:6px 0;background:var(--paper);border-bottom:1px solid var(--rule-soft);
  width:calc(100vw - 72px);margin-left:calc(50% - 50vw + 28px)}   /* the chart frame's width, so it reads as a strip */
.toggle-row{display:flex;justify-content:center;gap:8px}
.sub-group{display:inline-flex;gap:4px;padding:0 6px}
.side-toggle button{font:inherit;font-weight:600;font-size:15px;padding:4px 14px;border-radius:999px;border:1px solid var(--rule);
  background:var(--band);color:var(--ink-2);cursor:pointer;line-height:1.3}
.side-toggle button.sub{font-weight:500;font-size:13px;padding:2px 10px}
.side-toggle button.on{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.side-toggle button.partial{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.timechart a.node{cursor:pointer}
.timechart .link{vector-effect:non-scaling-stroke}
.search input{font:inherit;font-size:17px;width:100%;box-sizing:border-box;padding:10px 14px;border:1px solid var(--rule);
  border-radius:8px;background:var(--band);color:var(--ink)}
.search ul.people{columns:1;margin-top:10px}
ul.log{list-style:none;padding:0}
ul.log li{padding:4px 0;border-bottom:1px solid var(--rule-soft)}
/* the family stories (door 5, s152): reading measure, the artifact's serif voice */
.story .prose{font-family:"Fraunces","Iowan Old Style",Georgia,serif;font-size:17px;line-height:1.65;max-width:40em}
.story .prose p{margin:0 0 1em}
.story .prose p.note{font-size:.92em;color:var(--ink-2);border-left:3px solid var(--rule);padding-left:12px}
.story .prose img{max-width:100%;height:auto;border-radius:6px;border:1px solid var(--rule)}
.story .cast{margin-top:24px}
ul.stories{list-style:none;padding:0;margin:0}
ul.stories li{padding:3px 0}
ul.stories .note{font-size:13.5px;margin-left:6px}
.colophon{margin:48px auto 32px;color:var(--muted);font-size:13px;border-top:1px solid var(--rule-soft);padding-top:14px}
@media (max-width:640px){ul.people{columns:1} td.how{white-space:normal}}