/* Familie Westinga — archival genealogy, modernized.
   Palette grounded in old Groningen records: aged paper, iron-gall ink,
   an oxblood wax-seal accent, sepia labels, hairline ledger rules. */
:root{
  --paper:#efe9db;
  --surface:#faf7ef;
  --ink:#23282e;
  --muted:#5f6169;
  --seal:#7a2e2a;      /* oxblood — links & accents */
  --seal-dark:#5e211e;
  --sepia:#8a6a3c;     /* eyebrow labels */
  --rule:#d8d1bf;
  --rule-soft:#e6e0d1;
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:46rem;
}
*{box-sizing:border-box}
html{scroll-padding-top:6.5rem}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:1.06rem;line-height:1.62;
  -webkit-text-size-adjust:100%;
}
a{color:var(--seal);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--seal);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--surface);padding:.6rem 1rem;z-index:60}
.skip:focus{left:.5rem;top:.5rem}

/* ---------- Header ---------- */
.site{position:sticky;top:0;z-index:50;background:rgba(239,233,219,.94);
  backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;gap:1rem;max-width:72rem;margin:0 auto;
  padding:.55rem 1rem}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-mark{width:2.1rem;height:2.1rem;flex:0 0 auto;display:grid;place-items:center;
  border:1.5px solid var(--seal);color:var(--seal);border-radius:50%;
  font-family:var(--serif);font-weight:700;font-size:1.05rem;
  background:radial-gradient(circle at 30% 25%,#fff6ec,transparent 70%)}
.brand-txt{display:flex;flex-direction:column;line-height:1.1}
.brand-txt b{font-size:1.02rem;letter-spacing:.01em}
.brand-txt small{font-family:var(--sans);font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--sepia)}
.nav{margin-left:auto;display:flex;gap:.25rem;font-family:var(--sans);font-size:.92rem}
.nav a{color:var(--ink);padding:.4rem .6rem;border-radius:.35rem}
.nav a:hover{background:var(--rule-soft);text-decoration:none;color:var(--seal-dark)}
.menu-btn{display:none;margin-left:auto;font-family:var(--sans);font-size:.85rem;
  background:var(--surface);border:1px solid var(--rule);border-radius:.4rem;
  padding:.4rem .7rem;color:var(--ink);cursor:pointer}

/* ---------- Search ---------- */
.search-wrap{position:relative;max-width:72rem;margin:0 auto;padding:0 1rem .55rem}
#q{width:100%;font-family:var(--sans);font-size:.98rem;padding:.6rem .9rem;
  color:var(--ink);background:var(--surface);border:1px solid var(--rule);
  border-radius:.55rem}
#q::placeholder{color:#8a8578}
.results{position:absolute;left:1rem;right:1rem;top:100%;z-index:55;
  background:var(--surface);border:1px solid var(--rule);border-top:none;
  border-radius:0 0 .55rem .55rem;max-height:60vh;overflow:auto;
  box-shadow:0 12px 30px -12px rgba(40,30,20,.35)}
.results .meta{font-family:var(--sans);font-size:.74rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--sepia);padding:.55rem .9rem;border-bottom:1px solid var(--rule-soft)}
.results a{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.5rem .9rem;color:var(--ink);border-bottom:1px solid var(--rule-soft)}
.results a:last-child{border-bottom:none}
.results a:hover{background:var(--rule-soft);text-decoration:none}
.results a b{font-weight:600}
.results a span{font-family:var(--sans);font-size:.78rem;color:var(--muted);white-space:nowrap}
.results .empty{padding:.8rem .9rem;color:var(--muted);font-family:var(--sans);font-size:.9rem}

/* ---------- Page content ---------- */
.page{max-width:var(--wrap);margin:0 auto;padding:2rem 1.15rem 1rem}
.page h1{font-size:1.9rem;line-height:1.15;margin:.2rem 0 1rem;letter-spacing:.005em}
.page h2{font-size:1.15rem;font-family:var(--sans);font-weight:600;letter-spacing:.02em;
  color:var(--seal-dark);margin:2rem 0 .4rem;padding-bottom:.3rem;
  border-bottom:1px solid var(--rule)}
.page h3{font-size:1.05rem;margin:1.4rem 0 .3rem}
.page p{margin:.55rem 0}
.page b{font-weight:600}
hr{border:none}
hr.rule{height:0;border-top:1px solid var(--rule);margin:1.4rem 0}
.page hr{border-top:1px solid var(--rule-soft);margin:1.2rem 0}
.navlink{font-family:var(--sans);font-size:.85rem;white-space:nowrap}

/* person / feature photos */
img.photo{float:right;max-width:min(40%,220px);height:auto;margin:.2rem 0 1rem 1.2rem;
  border:1px solid var(--rule);padding:4px;background:#fff;border-radius:2px;
  box-shadow:0 6px 16px -10px rgba(40,30,20,.5)}
a:has(> img.photo){display:inline}

/* indentation levels from the source, made responsive */
.il1{margin-left:1.1rem}
.il2{margin-left:2.2rem}
.il3{margin-left:3.1rem}
.il4{margin-left:3.8rem}
.il5{margin-left:4.4rem}

/* index tables (name / surname lists) */
.page table{width:100%;border-collapse:collapse;font-size:.98rem;margin:.6rem 0}
.page td{padding:.2rem .5rem;vertical-align:top;border-bottom:1px solid var(--rule-soft)}

/* ---------- Footer ---------- */
.site-footer{max-width:var(--wrap);margin:2.5rem auto 0;padding:1.6rem 1.15rem 3rem;
  border-top:1px solid var(--rule);font-family:var(--sans);font-size:.85rem;color:var(--muted)}
.site-footer a{color:var(--seal)}

/* ---------- Responsive ---------- */
@media (max-width:720px){
  .menu-btn{display:block}
  .nav{position:absolute;top:100%;right:.5rem;left:.5rem;flex-direction:column;
    gap:0;background:var(--surface);border:1px solid var(--rule);border-radius:.55rem;
    padding:.3rem;margin:0;display:none;box-shadow:0 12px 30px -12px rgba(40,30,20,.35)}
  .nav.open{display:flex}
  .nav a{padding:.7rem .8rem;border-radius:.4rem}
  img.photo{float:none;display:block;max-width:70%;margin:.6rem auto 1.2rem}
  .il1,.il2,.il3,.il4,.il5{margin-left:.9rem}
  .page h1{font-size:1.6rem}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}