/* ============ Familopedia — Heirloom Editorial tokens ============ */
:root{
  --paper:#F5F2E9; --paper-2:#ECE7D8; --card:#FBF9F2;
  --ink:#2C2A22; --ink-soft:#6E6A5B; --ink-faint:#8F8A78;
  --fern:#3E6B4F; --fern-soft:#DCE7DC; --ochre:#A87F35; --ochre-soft:#F0E4C8;
  --line:rgba(44,42,34,.16); --line-soft:rgba(44,42,34,.08);
  --gen-ruth:#8A6F4D; --gen-diana:#7B5FA0; --gen-karmel:#3E6B4F; --gen-abby:#B5623D; --gen-myles:#2F7D74; --gen-brigham:#4E6E8A;
  --good:#3E6B4F; --warn:#A87F35; --shadow:0 1px 2px rgba(44,42,34,.06),0 8px 28px rgba(44,42,34,.07);
}
@media (prefers-color-scheme: dark){:root{
  --paper:#1F1E19; --paper-2:#181712; --card:#282720;
  --ink:#ECE8DA; --ink-soft:#ABA694; --ink-faint:#847F6E;
  --fern:#8FBF9E; --fern-soft:#2E3B31; --ochre:#D2A855; --ochre-soft:#3A3323;
  --line:rgba(236,232,218,.18); --line-soft:rgba(236,232,218,.09);
  --gen-ruth:#C9A469; --gen-diana:#B79BD4; --gen-karmel:#8FBF9E; --gen-abby:#DE9070; --gen-myles:#6FBDB2; --gen-brigham:#8FAECB;
  --good:#8FBF9E; --warn:#D2A855; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.35);
}}
:root[data-theme="dark"]{
  --paper:#1F1E19; --paper-2:#181712; --card:#282720;
  --ink:#ECE8DA; --ink-soft:#ABA694; --ink-faint:#847F6E;
  --fern:#8FBF9E; --fern-soft:#2E3B31; --ochre:#D2A855; --ochre-soft:#3A3323;
  --line:rgba(236,232,218,.18); --line-soft:rgba(236,232,218,.09);
  --gen-ruth:#C9A469; --gen-diana:#B79BD4; --gen-karmel:#8FBF9E; --gen-abby:#DE9070; --gen-myles:#6FBDB2; --gen-brigham:#8FAECB;
  --good:#8FBF9E; --warn:#D2A855; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.35);
}
:root[data-theme="light"]{
  --paper:#F5F2E9; --paper-2:#ECE7D8; --card:#FBF9F2;
  --ink:#2C2A22; --ink-soft:#6E6A5B; --ink-faint:#8F8A78;
  --fern:#3E6B4F; --fern-soft:#DCE7DC; --ochre:#A87F35; --ochre-soft:#F0E4C8;
  --line:rgba(44,42,34,.16); --line-soft:rgba(44,42,34,.08);
  --gen-ruth:#8A6F4D; --gen-diana:#7B5FA0; --gen-karmel:#3E6B4F; --gen-abby:#B5623D; --gen-myles:#2F7D74; --gen-brigham:#4E6E8A;
  --good:#3E6B4F; --warn:#A87F35; --shadow:0 1px 2px rgba(44,42,34,.06),0 8px 28px rgba(44,42,34,.07);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:Seravek,"Avenir Next",Avenir,"Gill Sans","Segoe UI",system-ui,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.serif,h1,h2,h3{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(30px,4vw,44px);line-height:1.12;margin:0;text-wrap:balance}
h2{font-size:24px;line-height:1.2;margin:0;text-wrap:balance}
h3{font-size:18px;line-height:1.3;margin:0}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:where(button,a):focus-visible{outline:2px solid var(--fern);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.eyebrow{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.eyebrow .dot{color:var(--ochre)}
.muted{color:var(--ink-soft)} .faint{color:var(--ink-faint)}
.small{font-size:13.5px} .tnum{font-variant-numeric:tabular-nums}
.hand{font-family:"Snell Roundhand","Apple Chancery","Segoe Script",cursive}

/* ---- app chrome ---- */
.chrome{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.chrome-in{max-width:1240px;margin:0 auto;padding:12px 28px;display:flex;align-items:center;gap:22px}
.wordmark{display:flex;align-items:center;gap:10px;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-size:20px;font-weight:600;letter-spacing:.005em;white-space:nowrap}
.wordmark svg{flex:none}
.tabs{display:flex;gap:2px;margin-left:8px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:7px 13px;border-radius:999px;font-size:14px;color:var(--ink-soft);white-space:nowrap;text-decoration:none}
.tab:hover{color:var(--ink)}
.tab.on{background:var(--fern-soft);color:var(--fern);font-weight:600}
.chrome-right{display:flex;align-items:center;gap:12px;margin-left:auto}
.privacy-pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--fern);background:var(--fern-soft);border-radius:999px;padding:5px 12px;white-space:nowrap}
.privacy-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--fern)}

/* ---- layout ---- */
.wrap{max-width:1240px;margin:0 auto;padding:36px 28px 80px}
.grid{display:grid;gap:22px}
.card{background:var(--card);border:1px solid var(--line-soft);border-radius:14px;box-shadow:var(--shadow)}
.card-pad{padding:22px 24px}
.hairline{border:none;border-top:1px solid var(--line);margin:0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 14px}
.sec-head .more{font-size:13.5px;color:var(--fern);font-weight:600;text-decoration:none;white-space:nowrap}

/* ---- people ---- */
.avatar{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:var(--paper);background:var(--ink-soft);flex:none;letter-spacing:.02em}
.avatar.sm{width:30px;height:30px;font-size:11px}
.avatar.lg{width:64px;height:64px;font-size:22px}
.av-ruth{background:var(--gen-ruth)}.av-diana{background:var(--gen-diana)}.av-karmel{background:var(--gen-karmel)}.av-abby{background:var(--gen-abby)}.av-myles{background:var(--gen-myles)}.av-brigham{background:var(--gen-brigham)}.av-rich{background:#5E5A48}
.av-stack{display:flex}.av-stack .avatar{margin-left:-9px;border:2px solid var(--card)}.av-stack .avatar:first-child{margin-left:0}

/* ---- chips, badges, buttons ---- */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;border:1px solid var(--line);border-radius:999px;padding:4px 11px;color:var(--ink-soft);background:transparent}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;border-radius:5px;padding:3px 8px}
.b-confirmed{background:var(--fern-soft);color:var(--fern)}
.b-suggested{background:var(--ochre-soft);color:var(--ochre)}
.b-approx{background:transparent;color:var(--ink-faint);border:1px dashed var(--line)}
.b-private{background:var(--paper-2);color:var(--ink-soft)}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:10px;padding:10px 18px;font-size:14.5px;font-weight:600;text-decoration:none}
.btn-primary{background:var(--fern);color:var(--paper)}
:root[data-theme="dark"] .btn-primary,:root:not([data-theme="light"]) .btn-primary{color:var(--paper)}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn:hover{filter:brightness(1.05)}

/* ---- photo placeholders (duotone, no external images) ---- */
.ph{position:relative;border-radius:10px;overflow:hidden;display:flex;align-items:flex-end;min-height:120px;color:#F7F4EA}
.ph::before{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 90% at 20% 10%,rgba(255,255,255,.28),transparent 55%),
  radial-gradient(100% 100% at 85% 90%,rgba(0,0,0,.25),transparent 60%)}
.ph .cap{position:relative;padding:10px 12px;font-size:12px;letter-spacing:.03em;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.ph-fern{background:linear-gradient(135deg,#5F8468,#2E4A38)}
.ph-plum{background:linear-gradient(135deg,#9B87AE,#544369)}
.ph-clay{background:linear-gradient(135deg,#C88A66,#7A462F)}
.ph-sepia{background:linear-gradient(135deg,#B29975,#6B5334)}
.ph-slate{background:linear-gradient(135deg,#7E97AB,#3D5468)}
.ph-moss{background:linear-gradient(135deg,#8FA76D,#4C5E33)}

/* ---- horizontal timeline strip ---- */
.strip{overflow-x:auto;padding-bottom:10px}
.strip::-webkit-scrollbar{height:8px}
.strip::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.strip-in{position:relative;display:flex;align-items:stretch;gap:0;min-width:max-content}

/* event card used on timelines */
.ev{width:198px;flex:none;background:var(--card);border:1px solid var(--line-soft);border-radius:12px;padding:13px 14px 12px;box-shadow:var(--shadow)}
.ev .yr{font-size:11.5px;letter-spacing:.1em;font-weight:700;color:var(--fern);text-transform:uppercase}
.ev h4{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-size:16.5px;line-height:1.25;margin:5px 0 5px;font-weight:600}
.ev p{font-size:12.8px;color:var(--ink-soft);line-height:1.45}
.ev .meta{display:flex;gap:8px;align-items:center;margin-top:9px;font-size:11.5px;color:var(--ink-faint)}
.ev.approx{border-style:dashed;box-shadow:none}

.mock-note{margin-top:56px;text-align:center;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}

/* ---- print ---- */
@page{size:letter;margin:0.45in}
@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  html{background:var(--paper)}
  .chrome{position:static;backdrop-filter:none;background:var(--paper)}
  .wrap{padding:24px 0 30px;max-width:none}
  .strip{overflow:visible;padding-bottom:0}
  .strip-in{flex-wrap:wrap;row-gap:26px;min-width:0}
  .decade{display:none}
  .shelf{flex-wrap:wrap;overflow:visible}
  .card,.ev,.ph,section{break-inside:avoid}
  .mock-note{margin-top:30px}
}

/* ---- app shell ---- */
.tab{cursor:pointer}
#view{min-height:60vh}
.crumb{font-size:13px;color:var(--ink-soft)}
.crumb a{text-decoration:none;color:inherit}
.crumb a:hover{color:var(--ink)}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:11px 20px;border-radius:999px;font-size:14px;font-weight:600;z-index:100;box-shadow:var(--shadow);opacity:0;transition:opacity .25s}
.toast.show{opacity:1}
.picker-veil{position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 40%,transparent);backdrop-filter:blur(6px);z-index:90;display:flex;align-items:center;justify-content:center;padding:20px}
.picker{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:34px 38px;max-width:520px;width:100%;text-align:center}
.picker-people{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:22px}
.picker-p{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 14px;border-radius:12px;border:1px solid var(--line-soft);cursor:pointer;min-width:92px}
.picker-p:hover{background:var(--paper-2)}
.field{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 14px;font:inherit;font-size:14.5px;background:var(--paper);color:var(--ink)}
.field::placeholder{color:var(--ink-faint)}
textarea.field{min-height:90px;resize:vertical}
select.field{width:auto}
.modal-veil{position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 40%,transparent);z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:8vh 20px}
.modal{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:26px 28px;max-width:560px;width:100%}
.empty-hint{border:1.5px dashed var(--line);border-radius:12px;padding:22px;text-align:center;color:var(--ink-soft);font-size:14px}