/* ============================================================
   raices.css — page-specific styles for the family tree page
   Reuses css/style.css design tokens (--paper, --ink, --teal, --clay…)
   ============================================================ */

.topnav nav a.current{color:var(--teal-strong); border-color:var(--teal-strong);}

/* ---------- hero ---------- */
.raices-hero{
  max-width:860px; margin:0 auto; padding:56px 32px 40px; text-align:left;
}
.raices-hero .eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); margin:0 0 14px; display:flex; align-items:center; gap:10px;
}
.raices-hero .eyebrow::before{content:""; width:26px; height:1px; background:var(--teal); display:inline-block;}
.raices-hero h1{font-size:clamp(2.1rem,5vw,3.2rem); font-weight:600; line-height:1.05; margin-bottom:18px;}
.raices-hero .lede{font-size:1.02rem; line-height:1.7; color:var(--ink-soft); max-width:70ch; margin:0;}
@media (max-width:760px){ .raices-hero{padding:40px 20px 32px;} }

/* ---------- root tree ---------- */
.root-tree{max-width:1080px; margin:0 auto 40px; padding:0 32px;}
@media (max-width:760px){ .root-tree{padding:0 20px;} }

.connector{
  width:2px; height:36px; margin:0 auto;
  background:repeating-linear-gradient(var(--ink-soft) 0 6px, transparent 6px 11px);
  opacity:.45;
}

.tree-row{display:flex; flex-wrap:wrap; gap:22px; justify-content:center;}
.tree-row.origins{max-width:820px; margin:0 auto;}
.tree-row.siblings{gap:16px;}

.origin-card{
  flex:1 1 300px; background:var(--paper-3); border:1px solid var(--line); border-radius:6px;
  padding:16px 18px;
}
.origin-card .tag{display:block; color:var(--clay-strong); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px;}
.origin-card p{font-size:.86rem; line-height:1.55; color:var(--ink-2); margin:0;}

.person-card{
  background:var(--paper-3); border:1px solid var(--line); border-radius:8px;
  padding:22px 24px; flex:1 1 380px; max-width:480px;
}
.person-card.union{max-width:640px; flex-basis:640px;}
.person-card h3{font-size:1.1rem; font-weight:600; margin-bottom:8px;}
.person-card h3 .amp{color:var(--clay-strong); font-style:italic; font-weight:400; margin:0 4px;}
.person-card p{font-size:.88rem; line-height:1.6; color:var(--ink-2); margin:0 0 6px;}
.person-card p:last-child{margin-bottom:0;}
.person-card .dates{color:var(--ink-soft); font-size:.74rem; letter-spacing:.03em; margin-bottom:10px;}
.person-card .dates .sep{margin:0 6px; opacity:.6;}
.person-card a.jump{color:var(--teal-strong); text-decoration:none; border-bottom:1px solid var(--teal-strong);}

.person-card.small{
  flex:0 1 180px; max-width:180px; text-align:center; padding:18px 14px;
}
.person-card.small h3{font-size:.92rem; margin-bottom:4px;}
.person-card.small .medallion{margin:0 auto 12px;}
.person-card.small p.tiny{font-size:.74rem; color:var(--ink-soft); line-height:1.4;}
.person-card.small p.mono{font-family:'IBM Plex Mono',monospace; font-size:.7rem; color:var(--ink-soft); margin-bottom:4px;}

.tree-row.grandparents .person-card,
.tree-row.parents .person-card,
.tree-row.own-family .person-card{flex-basis:460px;}

.medallion-pair{display:flex; gap:10px; margin-bottom:14px;}
.medallion{
  width:74px; height:74px; border-radius:50%; overflow:hidden; border:2px solid var(--paper); box-shadow:0 0 0 1px var(--line);
  flex-shrink:0; background:var(--paper-2);
}
.medallion img{width:100%; height:100%; object-fit:cover; display:block;}
.medallion.placeholder{
  display:flex; align-items:center; justify-content:center; border:1.5px dashed var(--ink-soft);
}
.medallion.placeholder .ph-icon{font-size:1.1rem; color:var(--ink-soft); opacity:.55;}
.person-card.small .medallion{width:64px; height:64px;}

@media (max-width:640px){
  .tree-row{flex-direction:column; align-items:stretch;}
  .tree-row.siblings{flex-direction:row; flex-wrap:wrap; justify-content:center;}
  .person-card, .person-card.union{max-width:100%; flex-basis:auto;}
}

/* ---------- memoir pull-quote ---------- */
.memoir-quote{
  max-width:760px; margin:64px auto; padding:0 32px;
}
.memoir-quote blockquote{
  margin:0; padding:32px 34px; border-left:3px solid var(--clay-strong);
  background:var(--paper-3); border-radius:0 8px 8px 0;
}
.memoir-quote p.mono{font-size:.72rem; color:var(--clay-strong); letter-spacing:.06em; text-transform:uppercase; margin:0 0 12px;}
.memoir-quote .quote-text{font-family:'Fraunces',Georgia,serif; font-size:1.15rem; line-height:1.6; color:var(--ink); margin:0 0 14px; font-style:italic;}
.memoir-quote .attrib{font-size:.76rem; color:var(--ink-soft); margin:0;}
@media (max-width:760px){ .memoir-quote{padding:0 20px; margin:48px auto;} .memoir-quote blockquote{padding:24px 22px;} }

/* ---------- accordion ---------- */
.accordion{max-width:1080px; margin:0 auto 56px; padding:0 32px;}
@media (max-width:760px){ .accordion{padding:0 20px;} }

.accordion-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:var(--paper-3); border:1px solid var(--line); border-radius:8px;
  padding:16px 22px; cursor:pointer; font-family:'Fraunces',serif; font-size:1.05rem; font-weight:600;
  color:var(--ink); text-align:left;
}
.accordion-toggle .chev{font-family:'IBM Plex Mono',monospace; transition:transform .25s ease; color:var(--teal-strong); font-size:1.2rem;}
.accordion-toggle[aria-expanded="true"] .chev{transform:rotate(180deg);}
.accordion-toggle:hover{border-color:var(--teal-strong);}

.accordion-panel{
  overflow:hidden; max-height:0; transition:max-height .35s ease;
}
.accordion-panel.open{max-height:4000px;}
.accordion-panel > .sibling-grid{padding-top:20px;}

.sibling-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px;}
.sibling-card{
  background:var(--paper-3); border:1px solid var(--line); border-radius:6px; padding:16px 18px;
}
.sibling-card.featured{border-color:var(--teal); background:color-mix(in srgb, var(--teal) 6%, var(--paper-3));}
.sibling-card h4{font-family:'Fraunces',serif; font-size:.94rem; font-weight:600; margin:0 0 6px; color:var(--ink);}
.sibling-card h4 .deceased-mark{font-weight:400; font-size:.82em; color:var(--ink-soft); margin-left:2px;}
.sibling-card p{font-size:.82rem; line-height:1.5; color:var(--ink-2); margin:0 0 4px;}
.sibling-card p.tbd{color:var(--ink-soft); font-style:italic; font-size:.78rem; margin:0;}
.sibling-card p.tiny{font-size:.74rem; color:var(--ink-soft);}

.sibling-card .sc-head{display:flex; align-items:center; gap:10px; margin-bottom:6px;}
.sibling-card .sc-head h4{margin:0;}
.sibling-card .medallion-sm{
  width:38px; height:38px; border-radius:50%; overflow:hidden; flex-shrink:0;
  border:1.5px solid var(--paper); box-shadow:0 0 0 1px var(--line);
}
.sibling-card .medallion-sm img{width:100%; height:100%; object-fit:cover; display:block;}

.cousins-head{
  margin:26px 0 8px; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--clay-strong);
}
.cousins-list{font-size:.86rem; line-height:1.6; color:var(--ink-soft); margin:0;}
.cousins-list .cousin-photo{
  display:inline-block; width:22px; height:22px; border-radius:50%; overflow:hidden;
  vertical-align:middle; margin:0 4px 0 0; box-shadow:0 0 0 1px var(--line);
}
.cousins-list .cousin-photo img{width:100%; height:100%; object-fit:cover; display:block;}