:root{--terra:#b5532d;--olive:#5f6b3a;--sea:#1f5f7a;--cream:#fbf5ea;--ink:#2d2620;--gold:#d9a441}
*{box-sizing:border-box}body{margin:0;font-family:Lato,system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.6}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;color:var(--sea);line-height:1.2}a{color:var(--terra)}
.top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:.8rem 1.5rem;background:#fff;border-bottom:4px solid var(--gold);position:sticky;top:0;z-index:5}
.brand{font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:700;color:var(--terra);text-decoration:none}.brand span{color:var(--olive);font-size:1rem}
nav a{margin-left:1rem;text-decoration:none;color:var(--ink);font-weight:700}nav a.cta{background:var(--terra);color:#fff;padding:.4rem .9rem;border-radius:20px}
#nav,.burger{display:none}
.hero{background:linear-gradient(rgba(20,40,60,.45),rgba(20,40,60,.55)),url('/hero.svg') center/cover;color:#fff;text-align:center;padding:6rem 1rem}
.hero h1{color:#fff;font-size:clamp(2.2rem,6vw,4rem);margin:.2rem 0}.eyebrow{letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:700}
.dates{font-size:1.4rem}.lead{font-size:1.2rem;margin-bottom:2rem}
.btn{display:inline-block;background:var(--terra);color:#fff;border:0;padding:.75rem 1.5rem;border-radius:30px;font-weight:700;text-decoration:none;cursor:pointer;font-size:1rem}
.btn.ghost{background:transparent;border:2px solid currentColor;color:inherit}.hero .btn.ghost{color:#fff}
.wrap{max-width:1100px;margin:0 auto;padding:2.5rem 1.25rem}.narrow{max-width:680px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem}
.card{background:#fff;border-radius:14px;padding:1.4rem;box-shadow:0 4px 14px rgba(0,0,0,.07);border-top:5px solid var(--olive)}
.band{background:var(--sea);color:#fff}.band h2{color:var(--gold)}
.badge{display:inline-block;background:var(--gold);color:var(--ink);font-family:Lato,sans-serif;font-size:.75rem;padding:.15rem .6rem;border-radius:12px;vertical-align:middle;text-transform:uppercase;letter-spacing:.05em}
.timeline .day{border-left:4px solid var(--gold);padding:.3rem 1.2rem 1rem;margin-left:.5rem}.timeline .hl{border-color:var(--terra);background:#fff;border-radius:0 12px 12px 0}
.form label{display:block;margin:.8rem 0;font-weight:700}.form input:not([type=checkbox]),.form select,.form textarea{display:block;width:100%;padding:.6rem;border:1px solid #cbbfa8;border-radius:8px;font:inherit;margin-top:.25rem;background:#fff}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}fieldset{border:1px solid #cbbfa8;border-radius:8px;margin:1rem 0}.cb{font-weight:400!important}
.ok{background:#e4efd8;padding:1rem;border-radius:8px}.err{background:#f7dcd3;padding:1rem;border-radius:8px}
.table{overflow-x:auto}table{border-collapse:collapse;width:100%;background:#fff}th,td{padding:.6rem;border-bottom:1px solid #eadfcb;text-align:left;vertical-align:top}th{background:var(--olive);color:#fff}
.chip{display:inline-block;background:var(--cream);border:1px solid var(--gold);border-radius:10px;padding:0 .5rem;font-size:.8rem;margin:1px}
.small{font-size:.85rem;opacity:.8}.stats{display:flex;flex-wrap:wrap;gap:1rem;margin:1rem 0}.stats div{background:#fff;padding:1rem;border-radius:12px;min-width:140px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.06)}.stats b{display:block;font-size:2rem;color:var(--terra)}
button.link{background:none;border:0;color:var(--terra);cursor:pointer;text-decoration:underline}
footer{text-align:center;padding:0 1rem 2rem;font-size:.9rem}.tiles{height:18px;margin-bottom:1rem;background:repeating-linear-gradient(90deg,var(--sea) 0 18px,var(--gold) 18px 36px,var(--terra) 36px 54px,#fff 54px 72px)}
@media(max-width:760px){.burger{display:block;font-size:1.6rem;cursor:pointer}nav{display:none;width:100%}#nav:checked~nav{display:flex;flex-direction:column}nav a{margin:.5rem 0}.row{grid-template-columns:1fr}}
/* family tree */
.tree-wrap{overflow-x:auto;padding:1rem 0 2rem}
.tree ul{position:relative;padding-top:20px;display:flex;justify-content:center;margin:0;padding-left:0}
.tree li{list-style:none;position:relative;padding:20px 6px 0;text-align:center}
.tree li::before,.tree li::after{content:'';position:absolute;top:0;right:50%;border-top:2px solid var(--gold);width:50%;height:20px}
.tree li::after{right:auto;left:50%;border-left:2px solid var(--gold)}
.tree li:only-child::before,.tree li:only-child::after{display:none}.tree li:only-child{padding-top:0}
.tree li:first-child::before,.tree li:last-child::after{border:0 none}
.tree li:last-child::before{border-right:2px solid var(--gold);border-radius:0 6px 0 0}.tree li:first-child::after{border-radius:6px 0 0 0}
.tree ul ul::before{content:'';position:absolute;top:0;left:50%;border-left:2px solid var(--gold);height:20px}
.tree>ul{padding-top:0}
.node{display:inline-block;background:#fff;border:2px solid var(--olive);border-radius:12px;padding:.5rem .8rem;min-width:110px;box-shadow:0 2px 8px rgba(0,0,0,.07)}
.node b{display:block;color:var(--sea);font-family:'Playfair Display',serif}.node .small{display:block}
.node.root{background:var(--sea);color:#fff;border-color:var(--sea)}.node.root b{color:var(--gold)}
.node.couple b+b{margin-top:.2rem}.late{font-style:italic;color:#7a6a58}
@media(max-width:760px){.tree ul{flex-direction:column;align-items:center;padding-top:10px}.tree li{padding:10px 0 0}.tree li::before,.tree li::after,.tree ul ul::before{display:none}.tree ul ul{border-left:2px solid var(--gold);margin-left:1rem}}
[hidden]{display:none!important}.card.narrow{margin-left:auto;margin-right:auto}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}
.gallery figure{margin:0;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.gallery img{width:100%;height:150px;object-fit:cover;display:block}.gallery figcaption{padding:.4rem .6rem;font-size:.85rem}
.node img.av{width:44px;height:44px;border-radius:50%;object-fit:cover;display:block;margin:0 auto .3rem;border:2px solid var(--gold)}
.thumb{width:70px;height:50px;object-fit:cover;border-radius:6px}
.node.clickable{cursor:pointer}.node.clickable:hover{border-color:var(--terra)}
tr.pending-row{background:#fff6e5}
/* person-graph tree */
.tree-origin{text-align:center;background:var(--sea);color:var(--gold);font-family:'Playfair Display',serif;border-radius:12px;padding:.6rem 1rem;max-width:420px;margin:0 auto 1rem}
.gens{display:flex;flex-direction:column;gap:.4rem}
.gen+.gen::before{content:'';display:block;width:2px;height:18px;background:var(--gold);margin:0 auto .4rem}
.gen-h{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:#7a6a58;text-align:center;margin:.2rem 0 .5rem}
.gen-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem}
.unit{display:flex;align-items:center;gap:.3rem;padding:.3rem;border-radius:14px}.unit.couple{background:rgba(201,162,39,.12);border:1px dashed var(--gold)}
.amp{font-family:'Playfair Display',serif;color:var(--gold);font-size:1.3rem}
.node.person{width:150px;text-align:center;padding:.5rem}.node.person .rel{color:#7a6a58;font-style:italic}
.node.deceased{background:#f7f3ec;border-color:#a99a86}.mem{color:#7a6a58;font-style:italic}
.node.pending{border-style:dashed;opacity:.85}.pend{color:var(--terra)}
.av.ph{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto .3rem;background:var(--olive);color:#fff;font-weight:700}
.av.big{width:110px;height:110px;border-radius:50%;object-fit:cover;border:3px solid var(--gold)}.av.sm{width:32px;height:32px;border-radius:50%;object-fit:cover;vertical-align:middle}
.pdetail{text-align:center}.pbtns{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:.8rem}
select[multiple]{min-height:6rem}
@media(max-width:760px){.node.person{width:44vw;max-width:170px}.unit.couple .node.person{width:36vw}}
.stemma{float:right;margin:0 0 .6rem 1rem;max-width:150px;text-align:center}.stemma img{width:110px;height:auto;display:block;margin:0 auto}.stemma figcaption{font-size:.78rem;color:#7a6a58;line-height:1.3}.stemma .credit{font-size:.68rem}@media(max-width:500px){.stemma{float:none;margin:0 auto 1rem}}
/* zoomable tree canvas */
.tv-tools{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-bottom:.5rem}.tv-tools input{flex:1;min-width:140px;padding:.55rem .7rem;border:1px solid #cbbfa8;border-radius:8px;font-size:1rem}
.tvb{min-width:44px;height:44px;border-radius:10px;border:2px solid var(--olive);background:#fff;color:var(--sea);font-size:1.2rem;font-weight:700;cursor:pointer;padding:0 .7rem}
.tv{position:relative;height:min(72vh,760px);min-height:380px;overflow:hidden;background:#fbf8f2;border:1px solid #e6dccb;border-radius:14px;touch-action:none;cursor:grab;user-select:none}
.tv-c{position:absolute;left:0;top:0;transform-origin:0 0}.tv-lines{position:absolute;left:0;top:0;pointer-events:none}
.tv-lines path,.tv-lines line{fill:none;stroke:var(--gold);stroke-width:2.5}.tv-lines line.sp{stroke-width:3}
.cv-card{position:absolute;width:156px;height:150px}.cv-card .node.person{width:156px;height:150px;overflow:hidden;box-sizing:border-box;margin:0}
.gen-lbl{position:absolute;left:4px;transform:translateY(-100%);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#a99a86;white-space:nowrap}
.node.hit{outline:4px solid var(--terra);outline-offset:2px}.tv-hint{margin-top:.3rem}
#tree.tree-wrap{overflow:visible;padding:0}
/* v3: toasts, spinners, comboboxes, status steps, messages */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:999;max-width:92vw;padding:.8rem 1.2rem;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.18);font-weight:700}
.toast.ok{background:#2f6b3a;color:#fff}.toast.err{background:#a3341b;color:#fff}.toast[hidden]{display:none}
.spin{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}@keyframes sp{to{transform:rotate(360deg)}}
button[disabled]{opacity:.7;cursor:wait}
.combo-l{display:flex;flex-direction:column;margin:.4rem 0;font-weight:700}.combo-lbl{margin-bottom:.25rem}
.combo{position:relative;font-weight:400}.combo-box{display:flex;align-items:center}
.combo-in{flex:1;padding:.65rem .7rem;border:1px solid #cbbfa8;border-radius:8px;font-size:16px;width:100%}
.combo-x{margin-left:-2.2rem;border:0;background:none;font-size:1.3rem;color:#888;width:2rem;height:2rem;cursor:pointer}
.combo-list{position:absolute;z-index:50;left:0;right:0;top:100%;max-height:min(50vh,280px);overflow:auto;background:#fff;border:1px solid #cbbfa8;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.12);-webkit-overflow-scrolling:touch}
.combo-o{padding:.75rem .8rem;border-bottom:1px solid #f0e9dc;cursor:pointer}.combo-o:hover{background:#fbf5ea}.combo-o.add{color:var(--terra);font-weight:700}.combo-o.none{color:#888;cursor:default}
.combo-new{margin-top:.3rem;color:var(--sea)}.chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.3rem}
.chipx{background:#efe6d3;border-radius:16px;padding:.25rem .3rem .25rem .7rem;font-size:.9rem}.chipx button{border:0;background:none;font-size:1.1rem;cursor:pointer;padding:0 .3rem}
.help{display:block;font-weight:400;color:#6d6252;margin-top:.2rem}
.steps{list-style:none;padding:0}.steps li{padding:.3rem 0}.steps .done::before{content:"✓ ";color:#2f6b3a;font-weight:700}.steps .wait::before{content:"⏳ "}
.msgs{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.msg{margin:0;background:#fbf5ea;border-left:4px solid var(--gold);padding:.8rem 1rem;border-radius:8px}.msg footer{font-size:.85rem;color:#6d6252;margin-top:.4rem}
.btn.sm{padding:.3rem .8rem;font-size:.85rem}.plink{margin-top:.4rem;padding-top:.3rem;border-top:1px dashed #e0d5c0}
.flash{animation:fl 1.6s}@keyframes fl{0%,60%{box-shadow:0 0 0 4px var(--terra)}100%{box-shadow:none}}
.tv.locked{touch-action:pan-y;cursor:default}.nee{font-style:italic}
@media(max-width:760px){.tv{height:62vh;min-height:320px}.tv-tools .addRel{width:100%}}
.arms{margin:0 auto .6rem;text-align:center}.arms img{width:150px;height:auto;display:block;margin:0 auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}.arms figcaption{font-size:.85rem;letter-spacing:.06em;opacity:.9;margin-top:.2rem}
@media(max-width:500px){.arms img{width:110px}}