:root{
  --bg:#f6f4ef; --panel:#fff; --ink:#232019; --muted:#8a8272;
  --line:#e3ddd0; --accent:#7c4a12; --accent-soft:#f0e7d8; --link:#9a5a1b;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.55 "Iowan Old Style","Palatino Linotype",Georgia,serif;
}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted)}

header{
  position:sticky;top:0;z-index:5;display:flex;gap:1.4rem;align-items:center;
  padding:.6rem 1.2rem;background:#fffdf8;border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.brand{font-weight:700;font-size:1.15rem;color:var(--accent)}
header nav{margin-left:auto;display:flex;gap:1rem;font-size:.92rem}
#searchform{flex:1;min-width:240px;max-width:520px;position:relative}
#q{
  width:100%;padding:.5rem .8rem;border:1px solid var(--line);border-radius:7px;
  background:var(--panel);font:inherit;
}
#q:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}

main{max-width:1080px;margin:1.4rem auto;padding:0 1.2rem}
footer{max-width:1080px;margin:2rem auto 3rem;padding:0 1.2rem;color:var(--muted);font-size:.85rem}

h1{font-size:1.7rem;margin:.2rem 0}
h2{font-size:1.05rem;letter-spacing:.03em;text-transform:uppercase;color:var(--accent);
   border-bottom:1px solid var(--line);padding-bottom:.25rem;margin:2rem 0 .8rem}
h3{font-size:1rem;margin:1.2rem 0 .3rem}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:1rem 1.2rem;margin:.6rem 0}
.grid{display:grid;gap:1rem}
@media(min-width:720px){.grid.two{grid-template-columns:1fr 1fr}}

.searchlist a{display:block;padding:.35rem .5rem;border-radius:6px}
.searchlist a:hover{background:var(--accent-soft);text-decoration:none}
.searchlist .yrs{color:var(--muted);font-size:.85rem}

.person-head{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:baseline}
.person-head .vit{color:var(--muted)}
.pill{display:inline-block;padding:.05rem .5rem;border-radius:20px;background:var(--accent-soft);
  color:var(--accent);font-size:.75rem;vertical-align:middle;margin-left:.4rem}

table{border-collapse:collapse;width:100%;font-size:.94rem}
td,th{text-align:left;vertical-align:top;padding:.3rem .6rem;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em}

.timeline{list-style:none;padding:0;margin:0}
.timeline li{padding:.5rem 0;border-bottom:1px solid var(--line)}
.timeline .when{font-weight:700;color:var(--accent)}
.timeline .what{margin-left:.4rem}
.timeline .detail{display:block;color:#4a4436;white-space:pre-wrap;margin-top:.25rem;font-size:.92rem}

.note{white-space:pre-wrap;background:#fffdf8;border-left:3px solid var(--accent-soft);
  padding:.5rem .8rem;margin:.5rem 0;font-size:.95rem}

.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}
.media-grid figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.media-grid img{width:100%;height:150px;object-fit:cover;display:block;background:#eee}
.media-grid figcaption{padding:.35rem .5rem;font-size:.78rem;color:var(--muted)}
.media-grid .missing{height:150px;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:.8rem;text-align:center;padding:.5rem}

.cite{margin:.3rem 0;padding-left:.6rem;border-left:2px solid var(--line)}
.cite .src{font-weight:600}
.cite .det{color:#4a4436;font-size:.92rem}
.surety{font-size:.72rem;color:var(--muted)}

.kv{display:grid;grid-template-columns:9rem 1fr;gap:.2rem .8rem}
.kv dt{color:var(--muted)}
.badge{font-size:.72rem;padding:.05rem .4rem;border:1px solid var(--line);border-radius:5px;color:var(--muted)}
.crumb{font-size:.85rem;color:var(--muted);margin-bottom:.6rem}
ul.people{columns:2;margin:.3rem 0}
@media(max-width:640px){ul.people{columns:1}}

/* pedigree */
.ped-ctl{font-size:.8rem;text-transform:none;letter-spacing:0;margin-left:.8rem}
.ped-ctl button{
  font:inherit;font-size:.8rem;border:1px solid var(--line);background:var(--panel);
  color:var(--ink);border-radius:5px;padding:.05rem .5rem;margin-right:.2rem;cursor:pointer;
}
.ped-ctl button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.ped-scroll{overflow-x:auto;overflow-y:hidden}
.ped-canvas{position:relative;margin:.4rem 0}
.ped-lines{position:absolute;inset:0;pointer-events:none}
.ped-lines polyline{fill:none;stroke:var(--line);stroke-width:1.5}
.pbox{
  position:absolute;display:flex;flex-direction:column;justify-content:center;
  padding:.15rem .5rem;border:1px solid var(--line);border-left:4px solid var(--muted);
  border-radius:6px;background:var(--panel);overflow:hidden;line-height:1.15;
}
.pbox:hover{text-decoration:none;border-color:var(--accent);box-shadow:0 1px 6px rgba(0,0,0,.08)}
.pbox .pn{font-weight:600;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbox .pd{font-size:.72rem;color:var(--muted)}
.pbox.root{border-left-color:var(--accent);background:var(--accent-soft)}
.pbox.f{border-left-color:#5b7aa8}
.pbox.m{border-left-color:#a8607f}

/* editing */
.editbtn{font:inherit;font-size:.78rem;border:1px solid var(--line);background:var(--panel);
  color:var(--accent);border-radius:5px;padding:.05rem .55rem;margin-left:.5rem;cursor:pointer}
.editbtn:hover{background:var(--accent-soft)}
.editform{max-width:820px}
.editform h2{margin-top:0}
.efield{display:flex;flex-direction:column;gap:.2rem;margin:.5rem 0}
.efield>span{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.efield input,.efield textarea,.efield select{
  font:inherit;padding:.4rem .55rem;border:1px solid var(--line);border-radius:6px;
  background:#fffdf8;width:100%}
.efield textarea{resize:vertical;line-height:1.5}
.drow{display:flex;gap:.4rem}
.drow select{flex:0 0 7rem}
.drow input{flex:1}
.ebar{display:flex;align-items:center;gap:.8rem;margin-top:1rem;flex-wrap:wrap}
.ebar button{font:inherit;padding:.4rem 1rem;border-radius:6px;border:1px solid var(--accent);
  background:var(--accent);color:#fff;cursor:pointer}
.ebar button[data-cancel]{background:var(--panel);color:var(--ink);border-color:var(--line)}
.ebar button:disabled{opacity:.6}

.update-toast{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);
  background:var(--accent);color:#fff;padding:.6rem 1rem;border-radius:8px;
  box-shadow:0 2px 12px rgba(0,0,0,.25);font-size:.9rem;z-index:20}
.update-toast button{margin-left:.6rem;font:inherit;background:#fff;color:var(--accent);
  border:0;border-radius:5px;padding:.15rem .6rem;cursor:pointer}