:root{
    --bg:#ffffff;--panel:#eef3fc;--ink:#0a1f44;--muted:#586a86;
    --red:#c8102e;--red-soft:#e23a52;--blue:#1a3a8f;--blue-soft:#3f6fd0;
    --line:rgba(10,31,68,0.14);--hair:rgba(10,31,68,0.08);
  }
  *{box-sizing:border-box;}
  body{margin:0;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    line-height:1.6;-webkit-font-smoothing:antialiased;}
  .serif{font-family:"Didot","Bodoni 72","Hoefler Text",Georgia,"Times New Roman",serif;}
  .wrap{width:100%;max-width:40rem;margin:0 auto;padding:0 1.5rem;}
  .flagbar{height:5px;background:linear-gradient(90deg,var(--red) 0 33.3%,#ffffff 33.3% 66.6%,var(--blue) 66.6% 100%);}
  .stage{flex:1;display:flex;flex-direction:column;justify-content:flex-start;padding:3rem 0 3rem;text-align:center;
    background:radial-gradient(120% 60% at 50% -8%, #eaf0ff 0%, var(--bg) 60%);}
  .emblem{width:88px;height:88px;margin:0 auto 0.6rem;filter:drop-shadow(0 3px 8px rgba(10,31,68,0.22));}
  h1{font-family:"Didot","Bodoni 72","Hoefler Text",Georgia,serif;font-weight:500;
    font-size:clamp(3rem,15vw,8.5rem);line-height:0.95;letter-spacing:0.03em;margin:0.2rem 0 0;
    background:linear-gradient(180deg,#26489e 0%,#16357a 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
  .tag{font-size:clamp(0.95rem,2.4vw,1.15rem);color:var(--ink);font-weight:600;letter-spacing:0.02em;margin:1.1rem auto 0;max-width:34ch;}
  .way{font-style:italic;font-size:clamp(1.05rem,3vw,1.45rem);color:var(--red);margin:0.35rem auto 0;letter-spacing:0.01em;}
  .ventures{display:flex;flex-direction:column;gap:0.9rem;margin:2.6rem 0 0;text-align:left;}
  .venture{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;text-decoration:none;color:var(--ink);
    background:#fff;border:1px solid var(--hair);border-left:4px solid var(--red);border-radius:10px;padding:1.1rem 0.9rem;min-height:7.5rem;
    box-shadow:0 4px 14px rgba(10,31,68,0.06);transition:border-color .25s,transform .2s,box-shadow .2s;}
  .venture:hover,.venture:focus-visible{transform:translateY(-1px);box-shadow:0 8px 20px rgba(10,31,68,0.10);outline:none;}
  .venture .name{display:block;font-family:"Didot",Georgia,serif;font-size:1.3rem;color:var(--blue);}
  .vtext{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.15rem;}
  .vname{font-family:"Didot",Georgia,serif;font-weight:800;font-size:0.92rem;color:var(--blue);line-height:1.1;}
  .venture .desc{font-size:0.84rem;line-height:1.3;color:var(--muted);}
  .venture .arrow{color:var(--red);font-size:1.2rem;flex-shrink:0;font-weight:700;}
  .soon{border-left-color:var(--line);opacity:0.7;box-shadow:none;}
  .soon .arrow{color:var(--muted);}
  .soon .tagpill{font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:0.15rem 0.5rem;}
  footer{border-top:1px solid var(--hair);padding:1.8rem 0;text-align:center;font-size:0.75rem;letter-spacing:0.06em;color:var(--muted);}
  footer a{color:var(--blue);text-decoration:none;font-weight:600;}
  footer a:hover{text-decoration:underline;}
  :focus-visible{outline:2px solid var(--blue);outline-offset:3px;}

  .wordC{height:0.82em;width:auto;vertical-align:baseline;margin-right:0.01em;filter:drop-shadow(0 2px 4px rgba(10,31,68,0.18));}

  @media(max-width:560px){.wrap{padding-left:1.7rem;padding-right:1.7rem;}}

  .hero-logo{display:block;width:100%;max-width:23rem;height:auto;margin:0 auto 0.2rem;}

  .crest-mark{margin-top:auto;align-self:flex-end;padding-top:2.5rem;
    margin-right:clamp(1rem,4vw,2.5rem);line-height:0;}
  .crest{width:clamp(96px,15vw,168px);height:auto;display:block;}
  @media(prefers-reduced-motion:no-preference){.crest{transition:opacity .2s ease;}}
  .vlogo-wrap{flex:0 0 94px;display:flex;align-items:center;justify-content:center;}
  .vlogo{max-width:94px;max-height:66px;width:auto;height:auto;object-fit:contain;display:block;}
  .vlogo.big{max-height:82px;}
  .cvlogo{height:62px;width:auto;display:block;filter:drop-shadow(0 1px 2px rgba(10,31,68,0.18));}
  .crlogo{height:52px;width:auto;display:block;}

/* ── shared page furniture, used by the home page and /family-businesses ── */
.pagehead{padding:1.6rem 0 0;}
.pagehead .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.markline{display:flex;align-items:center;gap:0.55rem;text-decoration:none;color:var(--ink);}
.markline img{height:44px;width:auto;display:block;}
.navlink{font-size:0.78rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:700;
  color:var(--blue);text-decoration:none;white-space:nowrap;}
.navlink:hover{text-decoration:underline;}
.navlink .chev{color:var(--red);}

/* Reading column for prose sections. Narrower than .wrap on purpose: 40rem of
   centred body copy is a long line to track back from. */
.read{width:100%;max-width:36rem;margin:0 auto;padding:0 1.5rem;text-align:left;}
.section{margin:2rem 0 0;}
.section:first-of-type{margin-top:1.8rem;}
.eyebrow{font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;font-weight:700;
  color:var(--red);margin:0 0 0.5rem;}
.section h2{font-family:"Didot","Bodoni 72","Hoefler Text",Georgia,serif;font-weight:500;
  font-size:clamp(1.55rem,5vw,2.1rem);line-height:1.15;letter-spacing:0.01em;color:var(--blue);margin:0 0 0.7rem;}
.section p{margin:0 0 0.85rem;color:#26364f;}
.section p:last-child{margin-bottom:0;}
.rule{height:1px;background:var(--hair);border:0;margin:1.9rem auto 0;max-width:36rem;}
.motto{font-family:"Didot","Bodoni 72","Hoefler Text",Georgia,serif;font-style:italic;
  color:var(--blue);font-size:1.05rem;letter-spacing:0.04em;text-align:center;margin:0;}
.motto .dot{color:var(--red);padding:0 0.35rem;}
.sourcenote{font-size:0.76rem;line-height:1.5;color:var(--muted);}
.sourcenote a{color:var(--blue);}

/* The falcon off the Courtien Rentals mark, standing in for the old CR
   monogram on the businesses cards. Wide and shallow, so it takes the full
   94px of the slot and the landscape height cap never binds. */
.vlogo.falcon{max-width:94px;max-height:66px;}

/* ── home page ─────────────────────────────────────────────────────────── */
.stage.home{justify-content:flex-start;padding-top:2rem;}
.hero-crest{width:100%;max-width:30rem;margin:0 auto;padding:0 1.5rem;text-align:center;}
.hero-crest img{display:block;width:100%;max-width:11rem;height:auto;margin:0 auto;}
.motto{margin:1rem 0 0;}
.motto-en{font-size:0.74rem;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--muted);margin:1rem 0 0;text-align:center;}
.motto-en .dot{color:var(--red);padding:0 0.3rem;}
.bigline{font-weight:700;color:var(--blue);text-decoration:none;}
.bigline:hover{text-decoration:underline;}
.bigline .chev{color:var(--red);}

/* ── menu ──────────────────────────────────────────────────────────────── */
.menu{position:relative;}
.menu-btn{display:flex;flex-direction:column;justify-content:center;gap:4px;
  width:42px;height:42px;padding:0 9px;background:none;border:1px solid var(--line);
  border-radius:8px;cursor:pointer;}
.menu-btn span{display:block;height:2px;border-radius:2px;background:var(--blue);
  transition:transform .18s ease,opacity .18s ease;}
.menu-btn span:nth-child(2){background:var(--red);}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.menu-panel{position:absolute;right:0;top:calc(100% + 0.5rem);z-index:20;min-width:15rem;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 10px 30px rgba(10,31,68,0.14);padding:0.4rem;text-align:left;}
.menu-panel a{display:block;padding:0.7rem 0.8rem;border-radius:7px;text-decoration:none;
  color:var(--ink);font-weight:600;font-size:0.94rem;}
.menu-panel a:hover,.menu-panel a:focus-visible{background:var(--panel);color:var(--blue);}
.menu-panel a .sub{display:block;font-weight:400;font-size:0.78rem;color:var(--muted);margin-top:0.1rem;}
.menu-panel hr{border:0;border-top:1px solid var(--hair);margin:0.35rem 0.5rem;}

/* ── family tree ───────────────────────────────────────────────────────── */
.tree{list-style:none;margin:1.6rem 0 0;padding:0;}
.tree > li{position:relative;padding-top:2.3rem;text-align:center;}
.tree > li:first-child{padding-top:0;}
.tree > li:not(:first-child)::before{content:"";position:absolute;top:0.75rem;left:50%;
  width:1px;height:1.1rem;background:var(--line);}
.gplace{font-size:0.66rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--red);
  font-weight:700;margin:0 0 0.35rem;}
.gnames{font-family:"Didot","Bodoni 72","Hoefler Text",Georgia,serif;font-weight:500;
  font-size:clamp(1.05rem,3.6vw,1.3rem);line-height:1.25;color:var(--blue);margin:0;}
.gnames .amp{color:var(--muted);font-style:italic;font-size:0.8em;padding:0 0.15em;}
.gdates{font-size:0.78rem;color:var(--muted);margin:0.2rem 0 0;letter-spacing:0.02em;}
.gnote{font-size:0.83rem;line-height:1.45;color:#26364f;margin:0.45rem auto 0;max-width:28rem;}
/* the three sons, and any other sibling row */
.branch{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0.7rem;
  justify-content:center;text-align:left;}
.branch li{flex:1 1 12rem;max-width:15rem;background:#fff;border:1px solid var(--hair);
  border-top:3px solid var(--red);border-radius:8px;padding:0.8rem 0.75rem;
  box-shadow:0 3px 10px rgba(10,31,68,0.05);}
.branch .bname{font-family:"Didot","Bodoni 72",Georgia,serif;font-weight:700;font-size:0.95rem;
  color:var(--blue);display:block;line-height:1.2;}
.branch .bdates{font-size:0.75rem;color:var(--muted);display:block;margin-top:0.1rem;}
.branch .bnote{font-size:0.78rem;line-height:1.4;color:#26364f;display:block;margin-top:0.35rem;}
.branch li.main{border-top-color:var(--blue);}
/* a plain run of given names, for a generation shown without detail */
.names-run{font-size:0.88rem;line-height:1.7;color:#26364f;margin:0.5rem auto 0;max-width:30rem;}
.living{font-size:0.83rem;color:var(--muted);font-style:italic;margin:0.5rem auto 0;max-width:28rem;}
/* homepage preview */
.treemini{list-style:none;margin:1rem 0 0;padding:0;}
.treemini li{position:relative;padding:0.45rem 0 0.45rem 1.1rem;font-size:0.9rem;color:#26364f;}
.treemini li::before{content:"";position:absolute;left:0.25rem;top:0;bottom:0;width:1px;
  background:var(--line);}
.treemini li:first-child::before{top:50%;}
.treemini li:last-child::before{bottom:50%;}
.treemini li::after{content:"";position:absolute;left:0;top:calc(50% - 2.5px);width:5px;height:5px;
  border-radius:50%;background:var(--red);}
.treemini .tname{font-weight:700;color:var(--blue);}
.treemini .tplace{color:var(--muted);}

/* The crest as a sign-off on inner pages: centred, and a way back home. */
.crest-mark.is-centred{align-self:center;margin-right:0;padding-top:3rem;}
.crest-mark.is-centred .crest{width:clamp(130px,22vw,210px);}
.crest-mark a{display:inline-block;border-radius:6px;transition:opacity .18s ease;}
.crest-mark a:hover,.crest-mark a:focus-visible{opacity:0.82;}

/* Inner page titles */
.pagetitle{font-family:"Didot","Bodoni 72","Hoefler Text",Georgia,serif;font-weight:500;
  font-size:clamp(1.9rem,6.5vw,2.9rem);line-height:1.1;letter-spacing:0.01em;
  color:var(--blue);margin:0;text-align:center;}

/* ── interactive tree ──────────────────────────────────────────────────── */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.treewrap{width:100%;max-width:62rem;margin:1.6rem auto 0;padding:0 1.25rem;text-align:left;}
.treebar{display:flex;flex-wrap:wrap;gap:0.6rem;align-items:center;justify-content:space-between;
  margin:0 0 1rem;}
.tsearchwrap{flex:1 1 15rem;}
#tsearch{width:100%;padding:0.6rem 0.8rem;font:inherit;font-size:0.9rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:8px;}
#tsearch:focus{outline:2px solid var(--blue);outline-offset:1px;}
.tbtns{display:flex;gap:0.4rem;}
.tbtn{font:inherit;font-size:0.76rem;letter-spacing:0.06em;font-weight:700;color:var(--blue);
  background:#fff;border:1px solid var(--line);border-radius:7px;padding:0.55rem 0.7rem;cursor:pointer;}
.tbtn:hover{background:var(--panel);}
.treegrid{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;align-items:start;}
@media(min-width:56rem){.treegrid{grid-template-columns:minmax(0,1fr) 20rem;}
  .pdetail{position:sticky;top:1.25rem;}}

.ptree,.pkids{list-style:none;margin:0;padding:0;}
/* The descent list. Rebuilt 2026-09-23: it had been a column of fat cards,
   about four people to a phone screen, with three word-tags on every row and a
   new indent step for the toggle. Now it is one line a person. */
.pkids{margin-left:0.55rem;padding-left:0.7rem;border-left:1px solid var(--hair);}
.pbranch.collapsed > .pkids{display:none;}
.prow{display:flex;align-items:baseline;gap:0.3rem;margin:0;}

.ptoggle{flex:0 0 1.15rem;height:1.15rem;align-self:center;font:inherit;font-size:0.62rem;
  font-weight:700;color:var(--blue);background:#fff;border:1px solid var(--line);
  border-radius:50%;cursor:pointer;line-height:1;padding:0;}
.ptoggle:hover{background:var(--panel);border-color:var(--blue-soft);}
.ptoggle.empty{flex-basis:0.5rem;border:0;background:none;cursor:default;}
.pbranch.collapsed > .prow > .ptoggle{background:var(--panel);}

.pnode{flex:1;min-width:0;text-align:left;font:inherit;cursor:pointer;
  background:none;border:0;border-left:2px solid transparent;border-radius:5px;
  padding:0.2rem 0.4rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 0.45rem;
  transition:background .12s,border-color .12s,opacity .15s;}
.pnode:hover{background:var(--panel);}
.pnode.is-main{border-left-color:var(--red);}
.pnode.is-selected{background:var(--panel);border-left-color:var(--blue);}
.pnode.is-private .pname{font-style:italic;}
.pnode.is-dim{opacity:0.3;}
.pnode.is-hit{border-left-color:var(--blue);background:#fff8e1;}

.pname{font-family:"Didot","Bodoni 72",Georgia,serif;font-weight:700;
  font-size:0.9rem;color:var(--blue);line-height:1.35;}
.pmeta{font-size:0.75rem;color:var(--muted);line-height:1.35;}
.pdot-sep{opacity:0.5;}

/* the three word-tags, as dots. The key under the list names them. */
.pdots{display:inline-flex;gap:0.2rem;align-items:center;}
.pdot{width:7px;height:7px;border-radius:50%;display:inline-block;}
.d-seen{background:var(--blue);}
.d-doc{background:#3f9c6a;}
.d-claim{background:#d8b64a;}
.d-mil{background:var(--red);}

.pdetail{background:#fff;border:1px solid var(--hair);border-top:3px solid var(--red);
  border-radius:10px;padding:1rem 1.05rem;box-shadow:0 4px 16px rgba(10,31,68,0.07);}
.dcrumbs{font-size:0.72rem;color:var(--muted);margin:0 0 0.5rem;line-height:1.7;}
.dcrumbs a{color:var(--blue);text-decoration:none;}
.dcrumbs a:hover{text-decoration:underline;}
.dcrumbs .sep{padding:0 0.3rem;color:var(--line);}
.dname{font-family:"Didot","Bodoni 72",Georgia,serif;font-weight:500;font-size:1.25rem;
  color:var(--blue);margin:0 0 0.6rem;line-height:1.2;}
.dfacts{display:grid;grid-template-columns:auto 1fr;gap:0.2rem 0.7rem;margin:0 0 0.7rem;font-size:0.82rem;}
.dfacts dt{color:var(--muted);}
.dfacts dd{margin:0;color:#26364f;}
.dnote{font-size:0.85rem;line-height:1.5;color:#26364f;margin:0 0 0.7rem;}
.dkids{font-size:0.82rem;line-height:1.6;color:#26364f;margin:0 0 0.7rem;}
.dkids a{color:var(--blue);}
.dlabel{display:inline-block;font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;
  font-weight:700;color:var(--red);margin-right:0.35rem;}
.dsrc{font-size:0.78rem;line-height:1.5;color:var(--muted);margin:0;padding-top:0.6rem;
  border-top:1px solid var(--hair);}
.dsrc-thin .dlabel{color:var(--muted);}
.tlegend{font-size:0.72rem;color:var(--muted);margin:1.2rem 0 0;line-height:2;}

/* ── add-a-member form ─────────────────────────────────────────────────── */
.cform{margin:1rem 0 0;display:flex;flex-direction:column;gap:0.75rem;text-align:left;}
.cform label{display:block;font-size:0.78rem;font-weight:700;letter-spacing:0.04em;color:var(--ink);}
.cform .req{color:var(--red);margin-left:0.15rem;}
.cform input[type=text],.cform input[type=email],.cform textarea{width:100%;margin-top:0.3rem;
  padding:0.6rem 0.7rem;font:inherit;font-size:0.9rem;font-weight:400;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:8px;}
.cform textarea{resize:vertical;}
.cform input:focus,.cform textarea:focus{outline:2px solid var(--blue);outline-offset:1px;}
.cform .row{display:flex;flex-wrap:wrap;gap:0.75rem;}
.cform .row > label{flex:1 1 12rem;}
.cform .check{display:flex;gap:0.5rem;align-items:flex-start;font-weight:400;font-size:0.8rem;
  line-height:1.5;color:var(--muted);}
.cform .check input{margin-top:0.2rem;flex:0 0 auto;}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.submit{align-self:flex-start;font:inherit;font-size:0.9rem;font-weight:700;color:#fff;
  background:var(--red);border:0;border-radius:8px;padding:0.75rem 1.4rem;cursor:pointer;
  transition:background .15s;}
.submit:hover{background:#a80d26;}
.submit[disabled]{opacity:0.55;cursor:default;}
.formnote{font-size:0.82rem;margin:0;min-height:1.2em;}
.formnote.ok{color:#1a5c33;}
.formnote.bad{color:var(--red);}
.formdump{width:100%;margin-top:0.6rem;padding:0.7rem;font:inherit;font-size:0.8rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);background:var(--panel);
  border:1px solid var(--line);border-radius:8px;resize:vertical;}

/* ── the traditional tree ──────────────────────────────────────────────── */
.ftwrap{width:100%;max-width:60rem;margin:1.6rem auto 0;padding:0 1.25rem;}
.ftree{background:linear-gradient(180deg,#fbfcff 0%,#fff 60%);
  border:1px solid var(--hair);border-radius:12px;padding:1.4rem 0 1.6rem;
  box-shadow:0 6px 22px rgba(10,31,68,0.06);}
.fstage{display:flex;flex-direction:column;align-items:center;}
.ftrail{font-size:0.72rem;color:var(--muted);margin:0 0 1rem;text-align:center;line-height:2;
  padding:0 1rem;}
.flink{font:inherit;font-size:0.72rem;color:var(--blue);background:none;border:0;padding:0;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.flink:hover{color:var(--red);}
.fsep{padding:0 0.35rem;color:var(--line);}
.frow{display:flex;justify-content:center;width:100%;}
.frow-up{padding:0 1rem;}
/* the stem that drops out of a parent card onto the bracket below it */
.fstem{width:1px;height:1.4rem;background:var(--line);flex:0 0 auto;}

/* ── cards ── */
.fcard{font:inherit;text-align:center;cursor:pointer;background:#fff;
  border:1px solid var(--line);border-radius:9px;padding:0.6rem 0.55rem;
  display:flex;flex-direction:column;justify-content:center;height:100%;
  transition:border-color .15s,box-shadow .15s;}
.fcard:hover{border-color:var(--blue);box-shadow:0 4px 14px rgba(10,31,68,0.1);}
.fname{display:block;font-family:"Didot","Bodoni 72",Georgia,serif;font-weight:700;
  color:var(--blue);line-height:1.15;font-size:0.9rem;}
.fspouse{display:block;font-size:0.7rem;color:var(--muted);margin-top:0.15rem;line-height:1.3;}
.fdates{display:block;font-size:0.71rem;color:var(--muted);margin-top:0.15rem;}
.fcount{display:inline-block;font-size:0.56rem;letter-spacing:0.09em;text-transform:uppercase;
  font-weight:700;color:var(--red);background:#fae7ea;border-radius:999px;
  padding:0.1rem 0.4rem;margin:0.35rem auto 0;white-space:nowrap;}
.fcard.is-private{border-style:dashed;background:var(--panel);}
.fparent{width:14rem;}
.ffocus{border:2px solid var(--blue);box-shadow:0 6px 20px rgba(10,31,68,0.13);}
.ffocus .fname{font-size:1rem;}
.fsib{opacity:0.78;}
.fsib:hover{opacity:1;}

/* ── the bracket: one bus across, one stem up into each card ── */
.fscroll{position:relative;width:100%;overflow-x:auto;overflow-y:hidden;
  padding:0 1rem 0.4rem;scrollbar-width:thin;
  /* snap to whole cards, so a row never comes to rest showing half a name */
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;}
.fsibs{position:relative;display:flex;align-items:stretch;gap:0.5rem;
  padding:1.4rem var(--pad,0) 0;width:max-content;margin:0;}
/* the bus stops at the centre of the first and last card, and clears the
   padding that lets an end card reach the middle of the screen */
.fsibs::before{content:"";position:absolute;top:0;height:1px;background:var(--line);
  left:calc(var(--pad,0px) + 5rem);right:calc(var(--pad,0px) + 5rem);}
.fsibs.single::before{display:none;}
.fcell{position:relative;width:10rem;flex:0 0 10rem;display:flex;
  scroll-snap-align:center;}
.fcell::before{content:"";position:absolute;top:-1.4rem;left:50%;width:1px;height:1.4rem;
  background:var(--line);}
.fcell > .fcard{width:100%;}
.fkids .fcell{width:9rem;flex-basis:9rem;}
.fkids::before{left:calc(var(--pad,0px) + 4.5rem);right:calc(var(--pad,0px) + 4.5rem);}

/* Fades, so a row that runs off the edge says so. They sit on a wrapper that
   does NOT scroll: an absolutely positioned child of a scroll container
   scrolls along with the content, which is why the first attempt never
   covered anything. */
.fshade{position:relative;width:100%;}
.fshade::after,.fshade::before{content:"";position:absolute;top:0;bottom:0;width:2.75rem;
  pointer-events:none;opacity:0;transition:opacity .2s;z-index:2;}
.fshade::before{left:0;background:linear-gradient(90deg,#fdfdff 40%,rgba(253,253,255,0));}
.fshade::after{right:0;background:linear-gradient(270deg,#fdfdff 40%,rgba(253,253,255,0));}
.fshade.can-left::before{opacity:1;}
.fshade.can-right::after{opacity:1;}

.fend{font-size:0.8rem;color:var(--muted);margin:1.2rem 0 0;font-style:italic;}
.fthint{font-size:0.78rem;color:var(--muted);text-align:center;margin:0.9rem 0 0;}
.listlead{font-size:0.78rem;letter-spacing:0.08em;text-transform:uppercase;font-weight:700;
  color:var(--muted);margin:2.6rem 0 0.9rem;text-align:center;}

@media(max-width:34rem){
  .ftree{padding:1.1rem 0 1.3rem;}
  .fcard{padding:0.5rem 0.45rem;}
  .fname{font-size:0.82rem;}
  .fspouse,.fdates{font-size:0.66rem;}
  .fparent{width:11.5rem;}
  .ffocus .fname{font-size:0.9rem;}
  .fcell{width:8.5rem;flex-basis:8.5rem;}
  .fsibs::before{left:calc(var(--pad,0px) + 4.25rem);right:calc(var(--pad,0px) + 4.25rem);}
  .fkids .fcell{width:7.75rem;flex-basis:7.75rem;}
  .fkids::before{left:calc(var(--pad,0px) + 3.875rem);right:calc(var(--pad,0px) + 3.875rem);}
  .fcount{font-size:0.52rem;}
}

/* ── sources ───────────────────────────────────────────────────────────── */
.srclist{margin:0.9rem 0 0;}
.srclist dt{font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:700;
  color:var(--red);margin:1.1rem 0 0.3rem;}
.srclist dt:first-child{margin-top:0;}
.srclist dd{margin:0;font-size:0.85rem;line-height:1.55;color:#26364f;}
.srclist dd a{color:var(--blue);word-break:break-word;}
.srcnote{font-size:0.8rem;line-height:1.5;color:var(--muted);margin:1.4rem 0 0;font-style:italic;}

/* On a phone the cards were wrapping to five lines each, which made one
   family fill the screen. Tighter boxes and a slightly smaller face fit a
   generation in without shrinking the names past reading. */
@media(max-width:34rem){
  .ftree{padding:1.1rem 0.6rem 1.3rem;}
  .fcard{padding:0.5rem 0.5rem;border-radius:8px;}
  .fname{font-size:0.82rem;}
  .fspouse,.fdates{font-size:0.68rem;}
  .fparent{width:11.5rem;}
  .ffocus{width:11.5rem;}
  .ffocus .fname{font-size:0.92rem;}
  .fsib{width:8.5rem;}
  .fchild{width:8rem;}
  .fkids::before{left:4rem;right:4rem;}
  .fcount{font-size:0.54rem;}
}

/* Formal citation list on the sources page */
.cites{margin:0.9rem 0 0;padding:0 0 0 1.2rem;}
.cites li{margin:0 0 0.9rem;font-size:0.85rem;line-height:1.55;color:#26364f;}
.cites li::marker{color:var(--red);font-weight:700;}
.cites em{color:var(--muted);font-style:italic;}
.cites a{color:var(--blue);word-break:break-word;}

/* The homepage summary, folded away by default */
.srcfold{margin:0.9rem 0 0;border:1px solid var(--hair);border-radius:9px;background:#fff;}
.srcfold summary{cursor:pointer;padding:0.7rem 0.85rem;font-size:0.8rem;font-weight:700;
  letter-spacing:0.04em;color:var(--blue);list-style:none;}
.srcfold summary::-webkit-details-marker{display:none;}
.srcfold summary::after{content:"+";float:right;color:var(--red);font-weight:700;}
.srcfold[open] summary::after{content:"–";}
.srcfold summary:hover{background:var(--panel);border-radius:8px;}
.srcfold .srclist{padding:0 0.85rem 0.9rem;margin-top:0;}

/* the way from the tree through to a person's own page */
.fmore{margin:0.9rem 0 0;text-align:center;font-size:0.82rem;}
.fmore a{color:var(--blue);font-weight:700;text-decoration:none;}
.fmore a:hover{text-decoration:underline;}
.dmore{margin:0 0 0.8rem;font-size:0.82rem;}
/* person pages */
.personfacts{margin:1rem 0 1.2rem;font-size:0.88rem;}
.personnote{font-size:0.95rem;line-height:1.6;color:#26364f;margin:0 0 1rem;}
.pagetitle + .personfacts{margin-top:1.1rem;}
.bigmail{color:var(--blue);font-weight:700;word-break:break-word;}

/* ── document gallery ──────────────────────────────────────────────────── */
.docwrap{width:100%;max-width:62rem;margin:1.4rem auto 0;padding:0 1.25rem;}
.docgrid{display:grid;grid-template-columns:1fr;gap:1.6rem;}
@media(min-width:44rem){.docgrid{grid-template-columns:1fr 1fr;}}
.doc{margin:0;background:#fff;border:1px solid var(--hair);border-radius:10px;
  overflow:hidden;box-shadow:0 4px 16px rgba(10,31,68,0.07);}
.doc img{display:block;width:100%;height:auto;background:var(--panel);
  border-bottom:1px solid var(--hair);}
.doc a:focus-visible img{outline:2px solid var(--blue);outline-offset:-2px;}
.doc figcaption{padding:0.9rem 1rem 1rem;}
.dtitle{font-family:"Didot","Bodoni 72",Georgia,serif;font-weight:700;font-size:1rem;
  color:var(--blue);margin:0;line-height:1.2;}
.dwhen{font-size:0.76rem;letter-spacing:0.04em;color:var(--red);font-weight:700;
  margin:0.25rem 0 0;text-transform:uppercase;}
.dshows{font-size:0.85rem;line-height:1.5;color:#26364f;margin:0.5rem 0 0;}
.dcite{font-size:0.74rem;line-height:1.45;color:var(--muted);margin:0.6rem 0 0;
  padding-top:0.5rem;border-top:1px solid var(--hair);}
.dcite a{color:var(--blue);}
.docempty{font-size:0.9rem;color:var(--muted);font-style:italic;text-align:center;
  padding:2.5rem 1rem;border:1px dashed var(--line);border-radius:10px;}
.t-seen{color:#12406e;background:#e3edf7;}

/* the evidence case, on the pages a whole line hangs from */
.evlabel{font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:700;
  color:var(--red);margin:1.3rem 0 0.5rem;}
.evlist{margin:0;padding:0 0 0 1.2rem;}
.evlist li{margin:0 0 0.7rem;font-size:0.88rem;line-height:1.55;color:#26364f;}
.evlist li::marker{color:var(--blue);font-weight:700;}
.evagainst{font-size:0.88rem;line-height:1.55;color:#26364f;margin:0;padding:0.8rem 0.9rem;
  background:#fdf6e8;border-left:3px solid #c8a34a;border-radius:0 8px 8px 0;}
/* a full citation list on a person's page */
.citelist{margin:0.9rem 0 0;padding:0 0 0 1.2rem;}
.citelist li{margin:0 0 1.1rem;}
.citelist li::marker{color:var(--red);font-weight:700;}
.ctitle{font-weight:700;font-size:0.88rem;color:var(--blue);margin:0;}
.cref{font-size:0.78rem;color:var(--muted);margin:0.15rem 0 0;}
.cquote{font-size:0.86rem;line-height:1.5;color:#26364f;margin:0.4rem 0 0;padding-left:0.7rem;
  border-left:2px solid var(--line);font-style:italic;}
.cnote{font-size:0.8rem;line-height:1.45;color:var(--muted);margin:0.35rem 0 0;}
/* a citation arrived at from a person's page */
.cites li:target{background:#fff8e1;outline:2px solid #e0c060;outline-offset:6px;border-radius:4px;}

/* ---- navigation added 2026-09-23 ------------------------------------- */

/* jump nav on the sources page. Forty-four citations in seven sections is a
   long scroll to land in blind. */
.jump{display:flex;flex-wrap:wrap;gap:0.4rem;align-items:center;margin:1rem 0 0;}
.jump .jlabel{font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;
  font-weight:700;color:var(--muted);margin-right:0.2rem;}
.jump a{font-size:0.78rem;color:var(--blue);text-decoration:none;
  border:1px solid var(--line);border-radius:999px;padding:0.24rem 0.68rem;
  background:#fff;white-space:nowrap;}
.jump a:hover,.jump a:focus-visible{background:var(--panel);border-color:var(--blue-soft);}

/* the way back out of a citation: who it is used by */
.usedon{margin:0.45rem 0 0;font-size:0.78rem;color:var(--muted);line-height:1.6;}
.usedon .ulabel{font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;
  font-weight:700;color:var(--muted);margin-right:0.35rem;}
.usedon a{color:var(--blue);text-decoration:none;border-bottom:1px solid var(--hair);}
.usedon a:hover{border-bottom-color:var(--blue);}

/* the flat list of everyone */
.gengroup{margin:1.6rem 0 0;}
.genhead{font-size:0.95rem;margin:0 0 0.5rem;font-weight:700;color:var(--ink);}
.genhead .gnum{display:inline-block;font-size:0.62rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--red);font-weight:700;margin-right:0.5rem;}
.plist{list-style:none;margin:0;padding:0;
  border-top:1px solid var(--hair);}
.plist li{border-bottom:1px solid var(--hair);padding:0.5rem 0;
  display:flex;flex-wrap:wrap;gap:0.15rem 0.7rem;align-items:baseline;}
.plist a{color:var(--blue);text-decoration:none;font-weight:600;font-size:0.92rem;}
.plist a:hover{text-decoration:underline;}
.plist .pmeta{font-size:0.75rem;color:var(--muted);}

/* a person named in the prose, linked to their page. Quiet on purpose: a page
   of blue would read as a link farm rather than a family history. */
.pl{color:inherit;text-decoration:none;border-bottom:1px solid rgba(26,58,143,0.35);}
.pl:hover,.pl:focus-visible{color:var(--blue);border-bottom-color:var(--blue);}
/* which person a document is about */
.dwho{margin:0.4rem 0 0;font-size:0.78rem;color:var(--muted);}
.dwho a{color:var(--blue);text-decoration:none;border-bottom:1px solid var(--hair);}
.dwho a:hover{border-bottom-color:var(--blue);}
.dsibs{margin-top:0.35rem;}
.dsrclink{white-space:nowrap;color:var(--blue);text-decoration:none;
  border-bottom:1px solid var(--hair);}
.dsrclink:hover{border-bottom-color:var(--blue);}
.credit{font-size:0.78rem;color:var(--muted);line-height:1.6;margin:0;}
.dkids-none{color:var(--muted);}

/* ---- print, and "save as PDF" ---------------------------------------
   Asked for so the tree can be kept on paper or filed as a PDF. The browser's
   own print-to-PDF is used rather than a bundled library: it always prints what
   is on the site today, where a generated file goes stale the moment a record
   is added. */
@media print {
  /* Letter/A4 with a generous margin, because the text column was running the
     full width of the sheet and a 190mm measure is not readable. */
  @page { margin: 20mm 22mm 18mm; }

  html, body, .stage, .home, .read, .wrap, .treegrid, .itree, section {
    background:#fff !important; background-image:none !important; color:#000 !important; }
  html, body { font-size:10.5pt; line-height:1.5; }
  * { -webkit-print-color-adjust:exact; print-color-adjust:exact; box-shadow:none !important; }

  .flagbar, .topbar, .pagehead, .pagehead nav, .menu, .menu-panel, .menu-btn,
  .jump, .tsearchwrap, .tbtns, .treebar, .ftbar, .fthint, .fshade, .ftree,
  .pdetail, .crest-mark, footer, .srcfold summary, .bigline .chev,
  .ptoggle, .dmore, .fmore, .pdfbtn, .noprint { display:none !important; }

  /* the on-screen page title and its Save button are chrome, not content:
     the document has its own title page */
  .printdoc main > .wrap { display:none !important; }

  .treegrid { display:block !important; }
  .treewrap { max-height:none !important; overflow:visible !important; }
  .pbranch.collapsed > .pkids { display:block !important; }
  .pkids { display:block !important; }

  .pnode { border:0 !important; background:none !important; padding:2px 0 !important;
           color:#000 !important; width:auto !important; }
  .pname { font-weight:700; }
  .pspouse, .pmeta, .pdates { color:#333 !important; }
  .pdots, .ptags, .ptag, .pdot { display:none !important; }

  /* keep a single entry whole, never a branch: a branch holds its descendants */
  .prow, .cites li, .citelist li, .doc, .plist li, .dfacts,
  .evlist li, .pt-card { page-break-inside:avoid; break-inside:avoid; }
  .pbranch, .pkids, .gengroup, .ptree li, .pblock { page-break-inside:auto; break-inside:auto; }
  h1, h2, h3, .genhead, .eyebrow { page-break-after:avoid; break-after:avoid; }
  h2, h3 { page-break-before:auto; }

  details, .srcfold { display:block !important; }
  details > *, .srcfold .srclist { display:block !important; }

  a { color:#000 !important; text-decoration:none !important; border-bottom:0 !important; }
  .pl, .usedon a, .dwho a, .dsrclink { border-bottom:0 !important; }

  /* one centred measure for the whole document */
  .read, .wrap { max-width:none !important; padding:0 !important; margin:0 auto !important; }
  .printdoc .read { max-width:150mm !important; }
  img { max-width:100% !important; }
  .docgrid { display:block !important; }
  .doc { margin:0 0 10mm !important; }
  .printonly { display:block !important; }
}
.printonly { display:none; }

/* the button that opens the print dialog */
.pdfbtn{display:inline-flex;align-items:center;gap:0.4rem;font:inherit;font-size:0.8rem;
  font-weight:700;color:var(--blue);background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:0.4rem 0.85rem;cursor:pointer;}
.pdfbtn:hover{background:var(--panel);border-color:var(--blue-soft);}
@media print { .printhead{margin:0 0 6mm;} .printhead h2{margin:0 0 2mm;}
  .printhead p{margin:0;font-size:9.5pt;color:#333;} }
.tlegend .pdot{margin-right:0.2rem;vertical-align:0.05em;}
/* long names and date ranges must be able to break onto their own line rather
   than push the row off the side of a phone */
.pname,.pmeta{min-width:0;overflow-wrap:break-word;}
.pnode{width:100%;}
@media(max-width:26rem){
  .pkids{margin-left:0.3rem;padding-left:0.45rem;}
  .pname{font-size:0.86rem;}
  .pmeta{font-size:0.72rem;}
}

/* the descent outline on the whole-record page */
.outline{margin:0.9rem 0 0;}
.oline{margin:0.12rem 0;line-height:1.4;}
.oname{font-weight:700;color:var(--ink);}
.oname a{color:var(--blue);text-decoration:none;}
.ometa{color:var(--muted);font-size:0.85em;}
.oname + .ometa::before{content:" \2014 ";color:var(--line);}
.oline.ometa{font-style:italic;}
.printdoc .pblock{margin:1.4rem 0 0;padding-top:0.9rem;border-top:1px solid var(--hair);}
.printdoc .pblock h3{font-family:"Didot","Bodoni 72",Georgia,serif;font-size:1.05rem;
  color:var(--blue);margin:0 0 0.5rem;}






/* ---- the printed family tree ----------------------------------------
   Boxes joined by drawn rules. An SVG chart nine generations deep will not
   paginate, and an indented run of text is not what anyone means by a family
   tree; this does both. */
.ptree{margin:1rem 0 0;font-size:0.82rem;}
.ptree ul{list-style:none;margin:0;padding:0 0 0 9mm;}
.ptree > ul{padding-left:0;}
.ptree li{position:relative;padding-left:8mm;}
.ptree > ul > li{padding-left:0;}
/* the spine down each set of brothers and sisters, stopping at the last */
.ptree ul ul > li::before{content:"";position:absolute;left:0;top:0;bottom:0;
  border-left:1px solid var(--line);}
.ptree ul ul > li:last-child::before{bottom:auto;height:5.2mm;}
/* the elbow into each card */
.ptree ul ul > li::after{content:"";position:absolute;left:0;top:5.2mm;width:6mm;
  border-top:1px solid var(--line);}

.pt-card{display:block;border:1px solid var(--line);border-left:3px solid var(--line);
  border-radius:5px;padding:1.6mm 2.6mm;margin:1.4mm 0;background:#fff;
  break-inside:avoid;page-break-inside:avoid;}
.pt-card.is-main{border-left-color:var(--red);}
.pt-card.is-ghost{border-style:dashed;border-left-color:var(--line);background:none;}
.pt-card.is-living{border-left-color:var(--blue-soft);}
.pt-name{display:block;font-family:"Didot","Bodoni 72",Georgia,serif;font-weight:700;
  font-size:1.02em;color:var(--blue);line-height:1.25;}
.pt-name a{color:inherit;text-decoration:none;}
.pt-sp,.pt-dt,.pt-pl{display:inline;font-size:0.86em;color:var(--muted);}
.pt-sp::after,.pt-dt::after{content:" \00b7 ";opacity:0.55;}
.pt-pl{font-style:italic;}
.pt-card.is-ghost .pt-name{font-family:inherit;font-weight:400;font-size:0.9em;
  color:var(--muted);font-style:italic;}

@media print{
  .ptree{font-size:8.6pt;}
  .ptree ul{padding-left:4.5mm;}
  .ptree li{padding-left:4.5mm;}
  .ptree ul ul > li::after{width:3.4mm;}
  .ptree ul ul > li:last-child::before{height:4.4mm;}
  .ptree ul ul > li::after{top:4.4mm;}
  .pt-card{margin:1mm 0;padding:1.2mm 2mm;}
  .ptree li{break-inside:auto;page-break-inside:auto;}
  .pt-name a{color:#000 !important;}
}

/* full screen for the chart */
.ftbar{display:flex;justify-content:center;max-width:62rem;margin:0.75rem auto 0;
  padding:0 1.25rem;}
.ftwrap.is-fullscreen{position:fixed;inset:0;z-index:200;background:#fff;
  overflow:auto;padding:0.75rem 0 1.5rem;margin:0;max-width:none;
  -webkit-overflow-scrolling:touch;}
.ftwrap.is-fullscreen .ftbar{position:sticky;bottom:0;z-index:2;background:#fff;
  padding:0.6rem 1rem;max-width:none;margin:0;
  box-shadow:0 -6px 14px rgba(255,255,255,0.9);}
.ftwrap.is-fullscreen .ftree{min-height:70vh;}
body.has-fullscreen{overflow:hidden;}
@media print{ .ftbar{display:none !important;} }

/* ---- the printed document: title page and part openers ----------------- */
.printdoc .titleblock{text-align:center;}
.printdoc .titleblock img{width:46mm;height:auto;margin:0 auto;display:block;}
.printdoc .titleblock h1{font-family:"Didot","Bodoni 72",Georgia,serif;font-size:34pt;
  font-weight:400;color:var(--blue);margin:8mm 0 3mm;line-height:1.08;letter-spacing:0.01em;}
.printdoc .titleblock .rule-sm{width:28mm;height:1px;background:var(--red);margin:5mm auto;border:0;}
.printdoc .titleblock p{margin:0 auto 2mm;max-width:105mm;}
.printdoc .titleblock .small{font-size:9pt;color:var(--muted);}

.printdoc .part{text-align:center;margin:0;}
.printdoc .part .eyebrow{color:var(--red);}
.printdoc .part h2{font-family:"Didot","Bodoni 72",Georgia,serif;font-weight:400;
  font-size:22pt;color:var(--blue);margin:2mm 0 3mm;}
.printdoc .part p{max-width:110mm;margin:0 auto;color:var(--muted);}

.printdoc .pblock{margin:0;padding:6mm 0 0;border-top:1px solid var(--hair);}
.printdoc .pblock + .pblock{margin-top:6mm;}
.printdoc .pblock h3{font-family:"Didot","Bodoni 72",Georgia,serif;font-size:13pt;
  font-weight:400;color:var(--blue);margin:0 0 2.5mm;}

@media print{
  /* the title page owns page one, and every part starts on a fresh sheet */
  .printdoc .titleblock{display:flex !important;flex-direction:column;justify-content:center;
    min-height:200mm;page-break-after:always;break-after:page;}
  .printdoc .part{page-break-before:always;break-before:page;padding-top:22mm;
    page-break-after:avoid;break-after:avoid;}
  .printdoc .part.first{page-break-before:avoid;break-before:avoid;}
  .printdoc .titleblock h1{font-size:32pt;}
  .printdoc .pblock{padding-top:5mm;}
  .printdoc .pblock + .pblock{margin-top:5mm;}
}
/* no dangling separator after the last thing in a card */
.pt-card > span:last-child::after{content:none;}

/* The descent list must never widen the page.
   `grid-template-columns:1fr` is minmax(AUTO,1fr), and auto means min-content, so
   the track refused to shrink below the widest row; expanding a deep branch then
   pushed the document past the viewport and the phone zoomed the whole page out
   to fit. minmax(0,1fr) lets it shrink, and the list scrolls sideways on its own
   if a row still will not fit. */
.itree{min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.pnode{min-width:0;}
.pname,.pmeta{overflow-wrap:anywhere;}
.stage{overflow-x:clip;}