:root{
  --paper:#f7f1e6; --paper-2:#efe6d6; --ink:#2a2420; --ink-soft:#5d5347;
  --accent:#9a5b34; --accent-2:#b98a4b; --line:#d9ccb4; --shadow:rgba(60,44,24,.10);
  --no:#3a6ea5; --se:#b98a4b; --fi:#3a9aa5; --navh:56px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"EB Garamond",Georgia,serif;font-size:20px;line-height:1.7;
  background-image:radial-gradient(circle at 15% 0%,#fdf8ee 0,transparent 55%),radial-gradient(circle at 100% 100%,#f1e7d4 0,transparent 50%);
  background-attachment:fixed;}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,.brand{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.15}
.kicker{font-family:"Fraunces",serif;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin:0 0 .6em;font-weight:600}
.ornament{color:var(--accent-2);font-size:1.5rem;text-align:center;margin:1.4rem 0}

/* Sticky top nav */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1rem;
  height:var(--navh);padding:0 1rem;background:rgba(247,241,230,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.brand{font-size:1rem;white-space:nowrap;color:var(--ink)}
.chapnav{flex:1;display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:none}
.chapnav::-webkit-scrollbar{display:none}
.chapnav a{font-family:"Fraunces",serif;font-size:.82rem;color:var(--ink-soft);
  padding:.35rem .6rem;border-radius:7px;white-space:nowrap}
.chapnav a:hover{background:var(--paper-2);text-decoration:none}
.chapnav a.active{background:var(--accent);color:#fff}
.print-btn{font-family:"Fraunces",serif;font-size:.8rem;border:1px solid var(--line);
  background:var(--paper-2);color:var(--ink);padding:.4rem .7rem;border-radius:999px;cursor:pointer;white-space:nowrap}

/* Layout */
main{max-width:720px;margin:0 auto;padding:0 1.4rem}
.section{scroll-margin-top:calc(var(--navh) + 12px);padding:3rem 0;border-top:1px solid var(--line)}
.section-head{text-align:center;margin-bottom:1.8rem}
.section-head h2{font-size:clamp(1.9rem,5.5vw,2.8rem);margin:.1em 0}
.lifespan{color:var(--ink-soft);font-style:italic;margin:.3em 0 0}
.narration{margin:1rem auto 0;text-align:center}
.narration figcaption{font-family:"Fraunces",serif;font-size:.8rem;color:var(--accent);margin-bottom:.4rem}
.narration audio{width:min(420px,90%);height:38px}

/* Hero */
.hero{text-align:center;padding:3.5rem 0 2.5rem;border:0}
.hero h1{font-size:clamp(2.6rem,8vw,4.4rem);margin:.1em 0 .15em}
.hero-sub{font-size:1.2rem;font-style:italic;color:var(--ink-soft);margin:0}
.hero-intro{text-align:left;max-width:600px;margin:1.8rem auto 1.4rem}
.scroll-cue{font-family:"Fraunces",serif;font-size:.85rem;letter-spacing:.08em}

/* Prose */
.prose{font-size:1.06rem}
.prose>p:first-of-type::first-letter{font-family:"Fraunces",serif;float:left;font-size:3.3em;line-height:.82;padding:.06em .12em 0 0;color:var(--accent);font-weight:600}
.prose p{margin:0 0 1.15em}
.prose h2{font-size:1.45rem;margin:2rem 0 .6rem}
.prose h3{font-size:1.16rem;margin:1.5rem 0 .45rem;color:var(--accent)}
.prose hr{border:0;text-align:center;margin:2rem 0}
.prose hr::before{content:"❦";color:var(--accent-2)}
.prose blockquote{margin:1.5rem 0;padding:.4rem 0 .4rem 1.3rem;border-left:3px solid var(--accent-2);font-style:italic;color:var(--ink-soft)}
.prose ul{margin:0 0 1.15em;padding-left:1.3em}

/* Photos */
.photo{margin:2rem 0;text-align:center}
.photo img{max-width:100%;border-radius:6px;box-shadow:0 6px 22px var(--shadow);background:#fff;padding:.5rem}
.photo figcaption{font-style:italic;color:var(--ink-soft);font-size:.9rem;margin-top:.6rem}

/* Sources */
.sources{margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.85rem;color:var(--ink-soft)}
.sources h3{font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.sources a{word-break:break-word}

/* Family tree */
.tree-section .tree{margin:1.4rem 0}
.tlegend-row{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1.4rem}
.tkey{font-family:"Fraunces",serif;font-size:.78rem;padding:.3rem .8rem;border-radius:999px;background:#fff;border:1px solid var(--line);border-left-width:5px}
.tband{margin:0 0 1rem;text-align:center}
.tband-label{font-family:"Fraunces",serif;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.45rem}
.trow{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.tnode{position:relative;background:#fff;border:1px solid var(--line);border-top:4px solid var(--line);
  border-radius:9px;padding:.45rem .7rem;min-width:118px;display:flex;flex-direction:column;align-items:flex-start}
.tflag{font-size:.85rem;line-height:1}
.tname{font-family:"Fraunces",serif;font-weight:600;font-size:.96rem;line-height:1.15}
.tsub{color:var(--ink-soft);font-style:italic;font-size:.78rem}
.tnode.nat-no{border-top-color:var(--no)}
.tnode.nat-se{border-top-color:var(--se)}
.tnode.nat-fi{border-top-color:var(--fi)}
.tnode.nat-dk{border-top-color:#a33}
.tnode.nat-sefi{border-top-color:var(--fi);background:linear-gradient(90deg,#fff 60%,#eef7f7)}
.tkey.nat-no{border-left-color:var(--no)}.tkey.nat-se{border-left-color:var(--se)}
.tnode.is-star{background:#f3e3cf;border-color:var(--accent-2);box-shadow:0 3px 12px var(--shadow)}
.tnode.is-star .tname{font-size:1.08rem}
.tband-aside{margin:1.4rem auto;padding:.9rem;border:1px dashed var(--line);border-radius:12px;max-width:600px;background:rgba(255,255,255,.4)}
.tband:not(.tband-aside):not(:last-child)::after{content:"⋮";display:block;color:var(--accent-2);margin:.15rem 0}
.tnote{font-size:.82rem;color:var(--ink-soft);font-style:italic;margin:.5rem 0 0}
.tfoot{font-size:.8rem;color:var(--ink-soft);font-style:italic;border-top:1px solid var(--line);padding-top:1rem;margin-top:1.4rem}

.bookfoot{text-align:center;color:var(--ink-soft);font-style:italic;font-size:.85rem;padding:2.5rem 0 3.5rem}

@media (max-width:600px){
  body{font-size:18px}
  .brand{display:none}
}

@media print{
  .topbar,.scroll-cue,.no-print{display:none !important}
  body{background:#fff;font-size:11.5pt}
  body::before,body::after{display:none}
  main{max-width:none}
  .section{break-inside:auto;border-top:0}
  .hero{break-after:page}
  .section{break-before:page}
  a{color:var(--ink);text-decoration:none}
  .prose>p:first-of-type::first-letter{color:var(--ink)}
  .photo img{box-shadow:none}
}