@import url('https://fonts.googleapis.com/css2?family=Charmonman:wght@400;700&family=Sarabun:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   ตระกูลสุวรรณไตรย์ — design tokens
   Palette drawn from the family's own materials: สุวรรณ (gold) temple leaf,
   teak house pillars, and the indigo of Isaan mudmee cotton.
   Signature motif: concentric "tree-ring" circles — a trunk cut open to
   count its years, standing in for generations of the family line.
   ========================================================================== */
:root{
  --cream:        #F6F0E2;
  --cream-deep:   #ECE1C8;
  --paper:        #FBF7EE;
  --ink:          #382919;
  --ink-soft:     #6E5A45;
  --gold:         #AE7F26;
  --gold-deep:    #8A631B;
  --gold-soft:    #E7CD8E;
  --indigo:       #253F52;
  --indigo-soft:  #4C6E86;
  --green:        #4B6043;
  --line:         rgba(56,41,25,0.16);
  --shadow:       0 6px 20px rgba(56,41,25,0.10);
  --radius:       14px;
  --font-display: 'Charmonman', cursive;
  --font-body:    'Sarabun', sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
}
a{ color:var(--indigo); text-decoration:none; }
a:hover{ color:var(--gold-deep); text-decoration:underline; }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:3px solid var(--gold); outline-offset:2px;
}
img{ max-width:100%; display:block; }
.container{ max-width:1080px; margin:0 auto; padding:0 24px; }

h1,h2,h3{ font-family:var(--font-display); color:var(--ink); margin:0 0 .4em; font-weight:700; }
h1{ font-size:3rem; line-height:1.15; }
h2{ font-size:2rem; }
h3{ font-size:1.4rem; }
p{ margin:0 0 1em; }
.eyebrow{
  display:inline-block; font-family:var(--font-body); font-weight:600; font-size:.8rem;
  letter-spacing:.08em; color:var(--gold-deep); text-transform:uppercase;
  border-bottom:2px solid var(--gold-soft); padding-bottom:4px; margin-bottom:14px;
}

/* ---------------- header / nav ---------------- */
.site-header{
  background:var(--paper); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px; gap:20px; flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:1.6rem; color:var(--ink); }
.brand .ring{ width:34px; height:34px; flex:none; object-fit:contain; border-radius:50%; }
.site-nav{ display:flex; gap:22px; flex-wrap:wrap; font-weight:500; }
.site-nav a{ color:var(--ink-soft); }
.site-nav a:hover{ color:var(--gold-deep); }
.nav-search{ display:flex; gap:8px; }
.nav-search input{
  border:1px solid var(--line); background:var(--cream); border-radius:999px;
  padding:8px 14px; font-family:var(--font-body); font-size:.9rem; width:180px;
}
.nav-search button{
  border:0; background:var(--gold); color:var(--paper); border-radius:999px;
  padding:8px 16px; font-weight:600; cursor:pointer;
}
.nav-search button:hover{ background:var(--gold-deep); }

.notif-bell{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; font-size:1.1rem; text-decoration:none;
  flex:none;
}
.notif-bell:hover{ background:var(--cream-deep); text-decoration:none; }
.notif-badge{
  position:absolute; top:-2px; right:-2px; min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:#c0392b; color:#fff; font-size:.62rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; line-height:1;
}

.font-size-toggle{ display:flex; gap:3px; align-items:center; }
.font-size-toggle button{
  border:1px solid var(--line); background:var(--paper); color:var(--ink-soft);
  width:30px; height:30px; border-radius:7px; cursor:pointer; line-height:1; padding:0;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-body);
}
.font-size-toggle button:hover{ background:var(--cream-deep); color:var(--ink); border-color:var(--gold-soft); }
.font-size-toggle #fontDec{ font-size:.72rem; }
.font-size-toggle #fontReset{ font-size:.85rem; font-weight:600; }
.font-size-toggle #fontInc{ font-size:1.05rem; }
.font-size-toggle button span{ font-size:.62em; vertical-align:top; margin-right:1px; }

/* Mobile menu toggle — pure CSS (checkbox hack), no JS needed */
.nav-toggle-checkbox{ display:none; }
.nav-toggle-btn{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; border-radius:8px; cursor:pointer; flex:none;
  border:1px solid var(--line); background:var(--cream);
}
.nav-toggle-btn span{ display:block; width:18px; height:2px; margin:0 auto; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.nav-toggle-checkbox:checked ~ .nav-toggle-btn span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle-checkbox:checked ~ .nav-toggle-btn span:nth-child(2){ opacity:0; }
.nav-toggle-checkbox:checked ~ .nav-toggle-btn span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:880px){
  .site-header .container{ position:relative; }
  .brand{ order:1; }
  .notif-bell{ order:2; margin-left:auto; }
  .font-size-toggle{ order:3; margin-left:8px; margin-right:8px; }
  .nav-toggle-btn{ display:flex; order:4; margin-left:0; }
  .site-nav, .nav-search{
    display:none; order:5; width:100%;
    flex-direction:column; align-items:stretch; gap:2px;
  }
  .site-nav a{
    padding:12px 6px; border-bottom:1px solid var(--line); color:var(--ink);
  }
  .nav-search{ margin-top:10px; margin-bottom:6px; }
  .nav-search input{ flex:1; width:auto; }
  .nav-toggle-checkbox:checked ~ .site-nav,
  .nav-toggle-checkbox:checked ~ .nav-search{ display:flex; }
}

/* ---------------- hero ---------------- */
.hero{
  position:relative; overflow:hidden; padding:70px 0 56px;
  background:
    radial-gradient(circle at 82% 20%, rgba(174,127,38,.14), transparent 55%),
    var(--cream);
  border-bottom:1px solid var(--line);
}
.hero-rings{
  position:absolute; right:-90px; top:-90px; width:420px; height:420px; opacity:.55;
}
.hero-inner{ position:relative; max-width:640px; }
.hero .stats-row{ display:flex; gap:28px; flex-wrap:wrap; margin:26px 0 30px; }
.stat{ }
.stat .n{ font-family:var(--font-display); font-size:2rem; color:var(--gold-deep); display:block; }
.stat .label{ font-size:.85rem; color:var(--ink-soft); }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------------- homepage article hero slideshow ---------------- */
.hero-slideshow{
  position:relative; height:56vh; min-height:360px; max-height:560px;
  overflow:hidden; background:var(--ink);
}
.hero-slides{ position:relative; width:100%; height:100%; }
.hero-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; visibility:hidden; transition:opacity .7s ease; display:flex; align-items:flex-end;
  text-decoration:none;
}
.hero-slide.active{ opacity:1; visibility:visible; }
.hero-slide::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,14,8,.88) 0%, rgba(20,14,8,.35) 55%, rgba(20,14,8,.05) 100%);
}
.hero-slide-overlay{
  position:relative; z-index:1; padding:40px 32px; max-width:640px; color:#fff;
}
.hero-slide-overlay h2{ color:#fff; font-size:1.9rem; margin:.2em 0; }
.hero-slide-overlay p{ color:#EDE3CC; font-size:.98rem; margin:0; }
.hero-slide-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:44px; height:44px;
  border-radius:50%; border:0; background:rgba(255,255,255,.18); color:#fff; font-size:1.6rem;
  line-height:1; cursor:pointer;
}
.hero-slide-nav:hover{ background:rgba(255,255,255,.32); }
.hero-slide-prev{ left:18px; }
.hero-slide-next{ right:18px; }
.hero-slide-dots{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; gap:8px;
}
.hero-dot{
  width:9px; height:9px; border-radius:50%; border:0; background:rgba(255,255,255,.45); cursor:pointer; padding:0;
}
.hero-dot.active{ background:#fff; width:22px; border-radius:5px; transition:width .2s ease; }
@media (max-width:640px){
  .hero-slideshow{ height:64vh; min-height:320px; }
  .hero-slide-overlay{ padding:26px 20px; }
  .hero-slide-overlay h2{ font-size:1.4rem; }
  .hero-slide-nav{ width:36px; height:36px; font-size:1.3rem; }
}
@media (prefers-reduced-motion: reduce){
  .hero-slide{ transition:none; }
}

.btn{
  display:inline-block; padding:12px 24px; border-radius:999px; font-weight:600;
  border:1px solid transparent; cursor:pointer; font-family:var(--font-body); font-size:.95rem;
}
.btn-primary{ background:var(--gold); color:var(--paper); }
.btn-primary:hover{ background:var(--gold-deep); color:var(--paper); text-decoration:none; }
.btn-outline{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--paper); text-decoration:none; }

/* ---------------- sections ---------------- */
section.page-section{ padding:56px 0; }
.section-head{ max-width:640px; margin-bottom:30px; }
.divider{
  border:0; height:10px; margin:0;
  background:center / 140px repeat-x
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='10'%3E%3Cpath d='M0 5 Q 17.5 -3 35 5 T 70 5 T 105 5 T 140 5' stroke='%23AE7F26' stroke-width='1.4' fill='none' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---------------- person cards ---------------- */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
.person-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; display:flex; gap:12px; align-items:flex-start;
  box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease;
}
.person-card:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(56,41,25,.15); text-decoration:none; }
.avatar{
  position:relative; flex:none; width:48px; height:48px; border-radius:50%;
  background:linear-gradient(160deg,var(--gold-soft),var(--gold));
  color:var(--paper); font-family:var(--font-display); font-size:1.3rem;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--paper); box-shadow:0 0 0 2px var(--gold-soft);
}
.avatar svg{ width:58%; height:58%; }
.avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.avatar.sex-m{ background:linear-gradient(160deg,var(--indigo-soft),var(--indigo)); box-shadow:0 0 0 2px var(--indigo-soft); }
.avatar.sex-f{ background:linear-gradient(160deg,var(--gold-soft),var(--gold)); box-shadow:0 0 0 2px var(--gold-soft); }
.avatar.sex-u{ background:linear-gradient(160deg,#cfc2a8,#a99b7e); box-shadow:0 0 0 2px var(--line); }
.avatar.deceased{ background:linear-gradient(160deg,#cfc2a8,#a99b7e); box-shadow:0 0 0 2px var(--line); }
/* A small black mourning bow (โบว์ดำ), pinned at the corner of the avatar — the
   traditional Thai way of marking someone who has passed away — without
   covering the photo/icon itself. */
.mourning-bow{
  position:absolute; bottom:-10%; right:-12%; width:46%; height:50%;
  min-width:16px; min-height:17px; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.4));
  pointer-events:none;
}
.person-card .name{ font-weight:600; color:var(--ink); display:block; }
.person-card .meta{ font-size:.82rem; color:var(--ink-soft); }
.tag-count{
  display:inline-block; margin-top:6px; font-size:.72rem; font-weight:600;
  color:var(--gold-deep); background:var(--gold-soft); border-radius:999px; padding:2px 10px;
}

/* ---------------- stats table / lists ---------------- */
.stat-list{ list-style:none; margin:0; padding:0; }
.stat-list li{
  display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px dashed var(--line);
  font-size:.95rem;
}
.stat-list .n{ color:var(--gold-deep); font-weight:700; }

/* ---------------- stats page: KPI cards ---------------- */
.kpi-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:18px;
  margin-top:8px;
}
.kpi-card{
  position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 20px; box-shadow:var(--shadow); overflow:hidden;
}
.kpi-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--accent, var(--gold));
}
.kpi-card.kpi-gold{   --accent: var(--gold); }
.kpi-card.kpi-indigo{ --accent: var(--indigo); }
.kpi-card.kpi-green{  --accent: var(--green); }
.kpi-card.kpi-ink{    --accent: var(--ink-soft); }
.kpi-icon{ font-size:1.5rem; display:block; margin-bottom:10px; }
.kpi-n{
  font-family:var(--font-display); font-size:2.4rem; line-height:1; color:var(--ink);
  display:block; margin-bottom:6px;
}
.kpi-label{ font-size:.85rem; color:var(--ink-soft); display:block; }

/* ---------------- stats page: highlight banner ---------------- */
.stat-banner{
  margin-top:24px; padding:16px 22px; background:var(--cream-deep); border:1px solid var(--line);
  border-radius:var(--radius); font-size:.95rem; color:var(--ink);
}
.stat-banner .meta{ display:inline-block; margin-left:6px; }

/* ---------------- stats page: bar chart panels ---------------- */
.stat-panel{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; box-shadow:var(--shadow);
}
.stat-panel h3{ margin-bottom:16px; }
.bar-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.bar-row{
  display:grid; grid-template-columns:110px 1fr 34px; align-items:center; gap:10px;
  text-decoration:none; color:inherit;
}
a.bar-row:hover .bar-label{ color:var(--gold-deep); text-decoration:underline; }
.bar-label{ font-size:.85rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-track{ background:var(--cream-deep); border-radius:999px; height:9px; overflow:hidden; }
.bar-fill{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--gold-soft),var(--gold)); }
.bar-fill-alt{ background:linear-gradient(90deg,var(--indigo-soft),var(--indigo)); }
.bar-n{ font-size:.82rem; color:var(--ink-soft); text-align:right; font-variant-numeric:tabular-nums; }

/* ---------------- stats page: mini secondary stats ---------------- */
.mini-stat{
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:16px; text-align:center; box-shadow:var(--shadow);
}
.mini-n{ font-family:var(--font-display); font-size:1.6rem; color:var(--gold-deep); display:block; }
.mini-label{ font-size:.78rem; color:var(--ink-soft); display:block; margin-top:2px; }

@media (max-width:640px){
  .bar-row{ grid-template-columns:88px 1fr 30px; }
}

/* ---------------- family tree page ---------------- */
.tree-wrap{ overflow-x:auto; padding:10px 0 40px; }
.gen-row{ display:flex; justify-content:center; gap:22px; flex-wrap:wrap; position:relative; margin:0 auto 6px; max-width:1000px; }
.gen-label{ text-align:center; font-size:.78rem; letter-spacing:.08em; color:var(--ink-soft); text-transform:uppercase; margin:26px 0 10px; }
.connector{ width:2px; height:26px; background:var(--gold-soft); margin:0 auto; }
.node{
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:10px 14px; min-width:150px; text-align:center; box-shadow:var(--shadow);
}
.node.focus{ border:2px solid var(--gold); box-shadow:0 0 0 5px var(--gold-soft); }
.node .avatar{ margin:0 auto 8px; }
.node-row{ display:flex; align-items:center; gap:10px; justify-content:center; flex-wrap:wrap; }
.plus-link{ font-size:.8rem; color:var(--indigo-soft); display:block; margin-top:4px; }
.empty-slot{
  border:1px dashed var(--line); border-radius:12px; min-width:150px; padding:14px;
  text-align:center; color:var(--ink-soft); font-size:.82rem;
}

/* ---------------- person profile ---------------- */
.profile-head{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; display:flex; gap:22px; align-items:center; box-shadow:var(--shadow); flex-wrap:wrap;
}
.profile-head .avatar{ width:88px; height:88px; font-size:2.4rem; }
.profile-vitals{ display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:10px; font-size:.92rem; color:var(--ink-soft); }
.profile-vitals b{ color:var(--ink); }
.relation-block{ margin-top:36px; }
.note-box{
  background:var(--cream-deep); border-left:4px solid var(--gold); border-radius:8px;
  padding:18px 20px; font-size:.95rem; color:var(--ink);
}

/* ---------------- news + gallery cards ---------------- */
.news-card{
  display:block; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease;
}
.news-card:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(56,41,25,.15); text-decoration:none; }
.news-card-img{
  height:160px; background-size:cover; background-position:center; background-color:var(--cream-deep);
}
.news-card-img--empty{
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display);
  font-size:1.3rem; color:var(--gold-soft);
}
.news-card-body{ padding:16px 18px; }
.read-more{ display:inline-block; margin-top:8px; color:var(--gold-deep); font-size:.85rem; font-weight:600; }
.news-card:hover .read-more{ text-decoration:underline; }
.news-card-body h3{ color:var(--ink); }

.photo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.photo-grid-item{
  position:relative; display:block; border-radius:10px; overflow:hidden; aspect-ratio:1/1;
  border:1px solid var(--line); background:var(--cream-deep); cursor:zoom-in;
}
.photo-grid-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-caption{
  position:absolute; left:0; right:0; bottom:0; padding:6px 8px; font-size:.72rem;
  background:linear-gradient(transparent, rgba(0,0,0,.6)); color:#fff;
}

/* ---------------- rich text editor + rendered content ---------------- */
.rte{ border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.rte-toolbar{ display:flex; gap:4px; flex-wrap:wrap; background:var(--cream-deep); padding:6px; border-bottom:1px solid var(--line); }
.rte-toolbar button{
  border:1px solid var(--line); background:var(--paper); border-radius:6px; padding:5px 10px;
  font-size:.82rem; cursor:pointer; font-family:var(--font-body);
}
.rte-toolbar button:hover{ background:var(--gold-soft); }
.rte-area{ min-height:180px; padding:14px; background:var(--paper); line-height:1.7; }
.rte-area:focus{ outline:none; }
.rte-content{ line-height:1.8; }
.rte-content p{ margin:0 0 1em; }
.rte-content h2, .rte-content h3, .rte-content h4{ font-family:var(--font-display); margin-top:1.2em; }
.rte-content ul, .rte-content ol{ padding-left:1.4em; margin:0 0 1em; }
.rte-content img{ max-width:100%; border-radius:10px; margin:12px 0; }
.rte-content blockquote{ border-left:3px solid var(--gold); margin:1em 0; padding:4px 16px; color:var(--ink-soft); }

/* ---------------- CMS admin forms ---------------- */
.admin-switch{ display:flex; gap:14px; margin-bottom:26px; flex-wrap:wrap; }
.admin-switch a{ font-weight:600; color:var(--ink-soft); }
.admin-switch a.active{ color:var(--gold-deep); border-bottom:2px solid var(--gold); padding-bottom:4px; }
.form-field{ display:block; margin-bottom:14px; }
.form-field input[type=text], .form-field input[type=date], .form-field input[type=email],
.form-field textarea, .form-field select{
  width:100%; padding:9px; border-radius:8px; border:1px solid var(--line); font-family:var(--font-body); font-size:.95rem;
}
.thumb-sm{ width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.status-pill{ display:inline-block; font-size:.72rem; font-weight:600; border-radius:999px; padding:2px 10px; }
.status-pill.draft{ background:var(--cream-deep); color:var(--ink-soft); }
.status-pill.published{ background:var(--gold-soft); color:var(--gold-deep); }


/* ---------------- footer ---------------- */
.site-footer{ border-top:1px solid var(--line); padding:44px 0 24px; color:var(--ink-soft); font-size:.88rem; background:var(--paper); }
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:28px; margin-bottom:32px;
}
.footer-brand p{ margin:0; line-height:1.7; }
.footer-col h4{
  font-family:var(--font-body); font-size:.78rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink); margin:0 0 12px;
}
.footer-col nav{ display:flex; flex-direction:column; gap:8px; }
.footer-col nav a{ color:var(--ink-soft); }
.footer-col nav a:hover{ color:var(--gold-deep); }
.footer-line-link{ display:inline-flex; align-items:center; gap:7px; color:#06C755 !important; font-weight:600; }
.footer-line-link:hover{ text-decoration:underline; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding-top:20px; border-top:1px solid var(--line); font-size:.8rem;
}
.footer-top-link{ color:var(--ink-soft); white-space:nowrap; }
.footer-top-link:hover{ color:var(--gold-deep); }
@media (max-width:860px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .footer-grid{ grid-template-columns:1fr; gap:24px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* ---------------- search / small utility ---------------- */
.search-hero{ display:flex; gap:10px; max-width:480px; }
.search-hero input{
  flex:1; border:1px solid var(--line); border-radius:999px; padding:12px 18px;
  font-family:var(--font-body); font-size:1rem; background:var(--paper);
}
.no-results{ color:var(--ink-soft); }

/* ---------------- interactive family tree ---------------- */
.tree-toolbar{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  flex-wrap:wrap; margin-bottom:14px;
}
.tree-search-wrap{ position:relative; flex:1; min-width:220px; max-width:380px; }
.tree-search-wrap input{
  width:100%; border:1px solid var(--line); border-radius:999px; padding:10px 16px;
  font-family:var(--font-body); font-size:.92rem; background:var(--paper);
}
.tree-search-results{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow); max-height:320px; overflow-y:auto; padding:6px;
}
.tree-search-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  border:0; background:none; padding:8px 10px; border-radius:8px; cursor:pointer;
  font-family:var(--font-body);
}
.tree-search-item:hover{ background:var(--cream-deep); }
.tree-search-item .avatar{ width:32px; height:32px; font-size:.95rem; }
.tree-search-empty{ padding:10px; color:var(--ink-soft); font-size:.85rem; }
.tree-zoom-controls{ display:flex; gap:6px; }
.tree-zoom-controls button{
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
  width:38px; height:38px; border-radius:10px; font-size:1.1rem; cursor:pointer;
}
.tree-zoom-controls #treeZoomReset{ width:auto; padding:0 14px; font-size:.85rem; }
.tree-zoom-controls button:hover{ background:var(--cream-deep); }

.tree-viewport{
  position:relative; overflow:hidden; width:100%; height:72vh; min-height:480px;
  border:1px solid var(--line); border-radius:var(--radius); cursor:grab;
  background-color:var(--cream);
  background-image:radial-gradient(var(--line) 1px, transparent 1px);
  background-size:26px 26px; touch-action:none;
}
.tree-viewport.grabbing{ cursor:grabbing; }
.tree-canvas{ position:absolute; left:0; top:0; transform-origin:0 0; }
.tree-lines{ position:absolute; left:-6000px; top:-6000px; width:12000px; height:12000px; pointer-events:none; }
.ftree-link{ fill:none; stroke:#C7BDA8; stroke-width:2; stroke-linecap:round; }
.ftree-link-spouse{ stroke:#C7BDA8; stroke-width:2; stroke-linecap:round; }
.ftree-couple-badge circle:first-child{ fill:var(--paper); stroke:#C7BDA8; stroke-width:1.5; }
.ftree-couple-badge circle:not(:first-child){ fill:#C7BDA8; }
.tree-nodes{ position:absolute; left:0; top:0; }

.ftree-node{
  position:absolute; width:168px; min-height:76px; box-sizing:border-box;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:10px 12px; box-shadow:var(--shadow); display:flex; align-items:center; gap:10px;
  cursor:pointer; user-select:none;
}
.ftree-node .avatar{ width:38px; height:38px; font-size:1.05rem; flex:none; }
.ftree-node .name{
  font-weight:600; font-size:.88rem; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis; word-break:break-word;
}
.ftree-node .meta{ font-size:.74rem; color:var(--ink-soft); display:block; }
.ftree-node.is-focus{ border:2px solid var(--gold); box-shadow:0 0 0 5px var(--gold-soft); }
.ftree-node.node-sex-m:not(.is-focus){ border-color:var(--indigo-soft); }
.ftree-node.node-sex-f:not(.is-focus){ border-color:var(--gold); }
.ftree-node.is-masked{ opacity:.82; }

.ftree-toggle-host{ position:absolute; width:24px; height:24px; z-index:5; }
.ftree-toggle{
  width:24px; height:24px; border-radius:50%; border:1px solid var(--gold);
  background:var(--paper); color:var(--gold-deep); font-size:.95rem; line-height:1;
  cursor:pointer; box-shadow:var(--shadow);
}
.ftree-toggle:hover{ background:var(--gold); color:var(--paper); }

.tree-loading{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(246,240,226,.7); font-weight:600; color:var(--ink-soft); z-index:10;
}
.tree-loading[hidden]{ display:none; }

@media (max-width:640px){
  h1{ font-size:2.1rem; }
  .hero-rings{ display:none; }
  .profile-head{ flex-direction:column; align-items:flex-start; }
  .tree-viewport{ height:62vh; min-height:380px; }
  .tree-search-wrap{ max-width:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; }
}

/* ---------------- image lightbox ---------------- */
.avatar-lightbox-trigger{ display:inline-flex; cursor:zoom-in; border-radius:50%; }
.avatar-lightbox-trigger:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }
.lightbox-overlay{
  position:fixed; inset:0; z-index:1000; background:rgba(20,16,12,.88);
  display:none; align-items:center; justify-content:center;
}
.lightbox-overlay.open{ display:flex; }
.lightbox-stage{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  overflow:hidden; touch-action:none;
}
.lightbox-stage.grabbing{ cursor:grabbing; }
.lightbox-img{
  max-width:88vw; max-height:88vh; border-radius:8px; box-shadow:0 10px 40px rgba(0,0,0,.5);
  transition:transform .05s linear; user-select:none; -webkit-user-drag:none;
}
.lightbox-close{
  position:absolute; top:18px; right:22px; z-index:2; width:44px; height:44px; border-radius:50%;
  border:0; background:rgba(255,255,255,.15); color:#fff; font-size:1.8rem; line-height:1; cursor:pointer;
}
.lightbox-close:hover{ background:rgba(255,255,255,.28); }
.lightbox-zoom-controls{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; gap:2px; background:rgba(255,255,255,.12); border-radius:999px; padding:4px;
}
.lightbox-zoom-controls button{
  border:0; background:transparent; color:#fff; width:42px; height:38px; border-radius:999px;
  font-size:1.1rem; cursor:pointer;
}
.lightbox-zoom-controls button:hover{ background:rgba(255,255,255,.2); }
.lightbox-zoom-controls button[data-zoom="reset"]{ width:auto; padding:0 12px; font-size:.8rem; }