:root{
  --bg:#100D0B;
  --bg-2:#181310;
  --panel: rgba(255,255,255,0.04);
  --line: rgba(255,255,255,0.10);
  --line-strong: rgba(255,255,255,0.18);
  --text:#F3EDE4;
  --text-dim: rgba(243,237,228,0.62);
  --gold:#D4A657;
  --terracotta:#C1653D;
  --grad: linear-gradient(90deg, var(--gold), var(--terracotta));
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3{font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.01em;}
.mono{font-family:'Space Mono', monospace;}
.eyebrow{font-family:'Space Mono', monospace; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold);}
a{color:inherit;}
.wrap{max-width:1080px; margin:0 auto; padding:0 28px;}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}

nav{
  position:sticky; top:0; z-index:50;
  background:rgba(16,13,11,0.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:70px; flex-wrap:nowrap; gap:12px;}
.logo-text{font-family:'Fraunces', serif; font-size:18px; font-weight:600; text-decoration:none; white-space:nowrap;}
.nav-links{display:flex; gap:20px; font-size:14px;}
.nav-links a{opacity:0.7; text-decoration:none; transition:opacity .2s, color .2s; white-space:nowrap;}
.nav-links a.active, .nav-links a:hover{opacity:1; color:var(--gold);}

.page-head{padding:70px 0 40px;}
.page-head h1{font-size:clamp(30px,4.5vw,44px); margin:14px 0 12px;}
.page-head p{color:var(--text-dim); max-width:560px; font-size:15px;}

main{padding-bottom:100px;}

/* family members: org-chart tree */
.tree-section{width:100%; padding:0 20px;}
.tree-wrap{overflow-x:auto; padding:30px 10px 60px; -webkit-overflow-scrolling:touch;}
.tree-hint{
  display:none; text-align:center; font-size:11px; color:var(--text-dim);
  margin-top:-10px; margin-bottom:10px;
}
.tree, .tree ul, .tree li{margin:0; padding:0; list-style:none;}
.tree{text-align:center; min-width:max-content;}
.tree ul{display:flex; padding-top:30px; position:relative;}
.tree > ul{justify-content:center;}
.tree li{
  display:flex; flex-direction:column; align-items:center;
  position:relative; padding:30px 14px 0 14px;
}
.tree li::before{
  content:''; position:absolute; top:0; left:0; right:50%;
  border-top:1px solid var(--line-strong); height:30px;
}
.tree li::after{
  content:''; position:absolute; top:0; left:50%; right:0;
  border-top:1px solid var(--line-strong); height:30px;
}
.tree li:first-child::before{border:none;}
.tree li:last-child::after{border:none;}
.tree li:only-child::before, .tree li:only-child::after{display:none;}
.tree li:only-child{padding-top:0;}
.tree > ul > li{padding-top:0;}
.tree > ul > li::before, .tree > ul > li::after{display:none;}
.tree ul ul{position:relative;}
.tree ul ul::before{
  content:''; position:absolute; top:-30px; left:50%;
  border-left:1px solid var(--line-strong); height:30px;
}
/* downward arrowhead where each parent's trunk line meets its children's
   connector bar -- anchored to the trunk (always centered on the children
   row as a whole) rather than to individual couple boxes, since couples
   vary in width (single person vs. person+spouse) and per-box arrows drift
   out of alignment with the actual connector geometry. */
.tree ul ul::after{
  content:'\25BE'; position:absolute; top:-15px; left:50%; transform:translateX(-50%);
  color:var(--gold); font-size:15px; line-height:1; pointer-events:none;
}

.couple{display:inline-flex; align-items:center; gap:8px; position:relative;}
.tree-card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:16px 20px; text-decoration:none; color:var(--text);
  display:inline-flex; flex-direction:column; gap:4px; min-width:150px;
  transition:border-color .2s, transform .2s; cursor:default;
}
.tree-card:hover{border-color:var(--gold); transform:translateY(-2px);}
.tree-card.deceased{opacity:0.75; border-style:dashed;}
.tree-name{font-size:14px; font-weight:600; white-space:nowrap;}
.tree-meta{font-size:11px; color:var(--text-dim); display:flex; flex-direction:column; gap:2px;}
.tree-meta .meta-line{white-space:nowrap;}
.tree-meta .meta-line.birthday{color:var(--gold); opacity:0.8;}
.tree-meta .memory{font-style:italic;}
.marriage-tag{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  font-size:10px; color:var(--text-dim); white-space:nowrap; padding:0 2px;
}
.marriage-tag .ring{color:var(--gold); font-size:13px; line-height:1;}

/* ancestry */
.ancestry-columns{display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:30px;}
.ancestry-col h2{font-size:18px; margin-bottom:22px; padding-bottom:12px; border-bottom:1px solid var(--line-strong);}
.ancestry-line{position:relative; padding-left:26px; border-left:1px solid var(--line-strong);}
.ancestry-gen{position:relative; padding-bottom:30px;}
.ancestry-gen::before{
  content:''; position:absolute; left:-31px; top:4px; width:9px; height:9px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 3px var(--bg), 0 0 0 4px var(--line-strong);
}
.ancestry-gen .gen-tag{font-family:'Space Mono',monospace; font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.08em;}
.ancestry-gen .pair{font-size:16px; margin-top:4px;}
.ancestry-gen .pair .amp{color:var(--gold); margin:0 8px;}
.ancestry-gen .clan{font-size:12px; color:var(--text-dim); font-style:italic; margin-top:3px;}

.empty-state, .error-state{color:var(--text-dim); font-size:14px; padding:40px 0;}
.error-state{color:#E08A6A;}

footer{border-top:1px solid var(--line); padding:30px 0; background:var(--bg-2); margin-top:60px;}
footer .wrap{display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--text-dim);}

/* password gate */
#gate{
  position:fixed; inset:0; z-index:100; background:var(--bg);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px;
}
#gate .gate-box{width:100%; max-width:320px; text-align:center;}
#gate h1{font-size:22px; margin-bottom:6px;}
#gate p{color:var(--text-dim); font-size:13px; margin-bottom:22px;}
#gate input{
  width:100%; padding:12px 14px; border-radius:8px; border:1px solid var(--line-strong);
  background:var(--panel); color:var(--text); font-size:14px; margin-bottom:12px; text-align:center;
}
#gate button{
  width:100%; padding:12px 14px; border-radius:8px; border:none; cursor:pointer;
  background:var(--grad); color:#100D0B; font-weight:600; font-size:14px;
}
#gate .gate-error{color:#E08A6A; font-size:12px; margin-top:10px; min-height:16px;}
body.locked main, body.locked footer, body.locked nav{display:none;}

@media(max-width:760px){
  .ancestry-columns{grid-template-columns:1fr;}
}

@media(max-width:640px){
  nav .wrap{padding:0 16px;}
  .logo-text{font-size:16px;}
  .nav-links{gap:14px; font-size:13px;}
  .wrap{padding:0 16px;}
  .page-head{padding:40px 0 20px;}

  .tree-section{padding:0 8px;}
  .tree-hint{display:block;}
  .tree-wrap{padding:16px 6px 40px;}
  .tree-card{min-width:118px; padding:11px 14px;}
  .tree-name{font-size:12.5px; white-space:normal;}
  .tree-meta{font-size:10px;}
  .couple{gap:5px;}
  .marriage-tag{font-size:9px; padding:0;}
  .marriage-tag .ring{font-size:11px;}
}