/* ════════════════════════════════════════════════════════════════════
   legacy-room-styles.css
   The Legacy Room™ — Phase 1 (Family Room + Constitution + Griot)
   Palette and type match legacy-room-prototype: gold/black/cream.
   ════════════════════════════════════════════════════════════════════ */

:root{
  --cream:#f7efe0;
  --cream-deep:#efe4d0;
  --ink:#141414;
  --ink-soft:#3a352e;
  --gold:#C9A24A;
  --gold-deep:#a8842f;
  --navy:#14233B;
  --navy-2:#1b2f4d;
  --green:#3a8266;
  --green-deep:#2c6450;
  --red:#b5482f;
  --deep:#16120e;
  --brown:#6b4423;
  --paper:#fbf6ec;
  --line:rgba(20,20,20,.14);
  --line-soft:rgba(20,20,20,.08);
  --shadow:0 18px 50px -22px rgba(20,20,20,.35);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"DM Sans",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  min-height:100vh;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
textarea, input{font-family:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:3px}

.eyebrow{
  font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  font-weight:600;color:var(--gold-deep);
}
.eyebrow.gold{color:var(--gold-deep)}

.screen{display:none}
.screen.active{display:block;animation:fade .5s ease both}
/* Into the profile: the page rises as it fades, instead of snapping in */
@keyframes personIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#screen-person.active #person-body{animation:personIn .42s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion:reduce){#screen-person.active #person-body{animation:none}}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.btn{
  font-weight:600;font-size:.96rem;border-radius:999px;
  padding:15px 30px;transition:transform .18s ease, box-shadow .18s ease, background .18s;
  display:inline-flex;align-items:center;gap:10px;
}
.btn-primary{background:var(--ink);color:var(--paper);box-shadow:0 12px 30px -12px rgba(20,20,20,.6)}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);background:#000}
.btn-primary:disabled{opacity:.45;cursor:not-allowed}
.btn-ghost{border:1.5px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn.sm{padding:11px 20px;font-size:.88rem}

/* ============ LOADING ============ */
/* NOTE: the `display` must live on the .active selector, not the bare ID.
   A bare `#screen-loading{display:flex}` (specificity 1-0-0) outranks
   `.screen.active{display:block}` (0-2-0) AND `.screen{display:none}`
   (0-1-0), pinning the loading crest visible forever — showScreen() can
   remove `.active` but never actually hide it, so the page hangs on the
   hexagon while the login screen renders below the fold. Keep layout
   props (min-height) on the ID and the display toggle on .active. */
#screen-loading{min-height:100vh}
#screen-loading.active{display:flex;align-items:center;justify-content:center}
.loading-crest{width:44px;height:44px;color:var(--gold-deep);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ============ WELCOME / NO ROOM YET ============ */
#screen-welcome{
  min-height:100vh;
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(201,162,74,.16), transparent 55%),
    linear-gradient(180deg,#f9f2e4,#f1e6d2);
}
#screen-welcome.active{display:flex;flex-direction:column}
.welcome-frame{
  flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:8vh 24px 6vh;max-width:620px;margin:0 auto;
}
.crest{width:60px;height:60px;margin-bottom:30px;color:var(--gold-deep)}
.welcome-tm{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(2.4rem,6.5vw,4rem);line-height:1.0;
  letter-spacing:-.01em;margin:0;
}
.welcome-tm sup{font-size:.3em;vertical-align:super;color:var(--gold-deep);font-weight:500}
.welcome-status{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.2rem,3vw,1.5rem);
  color:var(--ink-soft);margin:18px 0 0;font-weight:400;
}
.welcome-sub{
  max-width:480px;margin:22px auto 0;color:var(--ink-soft);
  font-size:1rem;line-height:1.65;
}
.welcome-cta{margin-top:38px}

/* ============ CREATE ROOM FORM ============ */
#screen-create{min-height:100vh;background:var(--cream);padding:7vh 24px 8vh}
.create-wrap{max-width:520px;margin:0 auto}
.create-back{
  display:inline-flex;align-items:center;gap:6px;color:var(--ink-soft);
  font-size:.86rem;font-weight:600;margin-bottom:28px;
}
.create-back svg{width:14px;height:14px}
.create-h{
  font-family:var(--serif);font-weight:600;font-size:clamp(1.8rem,4.5vw,2.4rem);
  line-height:1.08;margin:12px 0 0;
}
.create-sub{color:var(--ink-soft);font-size:.98rem;margin:12px 0 32px;max-width:440px}
.field{margin-bottom:22px}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-soft);margin-bottom:7px;letter-spacing:.01em}
.field input{
  width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:10px;
  background:var(--paper);font-size:1rem;color:var(--ink);transition:border-color .15s;
}
.field input:focus{border-color:var(--gold-deep)}
.field .hint{font-size:.78rem;color:var(--ink-soft);margin-top:6px}
.griot-readonly{
  display:flex;align-items:center;gap:10px;padding:13px 16px;
  background:var(--paper);border:1.5px solid var(--line-soft);border-radius:10px;
  font-size:.95rem;
}
.griot-readonly .gr-badge{
  width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.8rem;flex-shrink:0;
}
.create-err{
  display:none;background:rgba(181,72,47,.08);border:1px solid rgba(181,72,47,.25);
  color:var(--red);font-size:.86rem;padding:11px 14px;border-radius:8px;margin-bottom:18px;
}

/* ============ CONSTITUTION ONBOARDING ============ */
#screen-constitution{min-height:100vh;background:var(--cream);padding:6vh 24px 10vh}
.const-ob-wrap{max-width:640px;margin:0 auto}
.const-ob-head{text-align:center;margin-bottom:8px}
.const-ob-crest{width:46px;height:46px;color:var(--gold-deep);margin-bottom:18px}
.const-ob-h{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,4.5vw,2.5rem);margin:10px 0 0}
.const-ob-tag{color:var(--ink-soft);font-size:1rem;margin:14px auto 0;max-width:480px;line-height:1.6}
.const-progress{
  display:flex;gap:6px;justify-content:center;margin:30px 0 38px;
}
.const-progress .dot{
  width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .2s;
}
.const-progress .dot.done{background:var(--gold-deep)}
.const-progress .dot.current{background:var(--ink)}
.const-q-card{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:18px;
  padding:32px 30px;box-shadow:var(--shadow);
}
.const-q-no{font-family:var(--serif);font-size:.95rem;color:var(--gold-deep);font-weight:600;letter-spacing:.04em}
.const-q-text{font-family:var(--serif);font-weight:600;font-size:clamp(1.3rem,3vw,1.6rem);margin:8px 0 18px;line-height:1.25}
.const-q-card textarea{
  width:100%;min-height:140px;padding:14px 16px;border:1.5px solid var(--line);
  border-radius:10px;background:#fff;font-size:.98rem;color:var(--ink);line-height:1.55;
  resize:vertical;transition:border-color .15s;
}
.const-q-card textarea:focus{border-color:var(--gold-deep)}
.const-q-card textarea::placeholder{color:var(--ink-soft);opacity:.62}
.const-q-nav{display:flex;justify-content:space-between;align-items:center;margin-top:24px}
.const-skip-note{font-size:.8rem;color:var(--ink-soft)}

/* ============ LIVING FAMILY ROOM ============ */
#screen-room{min-height:100vh;background:transparent}
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(20px,5vw,56px);
  background:rgba(247,239,224,.88);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-weight:600;font-size:1.3rem}
.brand svg{width:24px;height:24px;color:var(--gold-deep)}
.brand sup{font-size:.42em;color:var(--gold-deep)}
.who{display:flex;align-items:center;gap:11px;font-size:.85rem;color:var(--ink-soft)}
.who .badge{
  width:32px;height:32px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.85rem;
}
.room-wrap{max-width:880px;margin:0 auto;padding:clamp(34px,6vw,60px) clamp(20px,5vw,40px) 90px}

.trial-banner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:linear-gradient(158deg,#26211b,#15110c);color:#f3ead9;
  border-radius:14px;padding:16px 22px;margin-bottom:30px;font-size:.92rem;
}
.trial-banner b{color:var(--gold)}
.trial-banner.expired{background:rgba(181,72,47,.08);color:var(--red);border:1px solid rgba(181,72,47,.25)}

.griot-banner{
  display:grid;grid-template-columns:1fr 1fr auto;gap:18px;align-items:center;
  background:var(--paper);border:1px solid var(--line-soft);border-radius:16px;
  padding:22px 26px;margin-bottom:30px;
}
@media(max-width:680px){.griot-banner{grid-template-columns:1fr}}
.griot-k{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;display:block}
.griot-name{font-family:var(--serif);font-weight:600;font-size:1.2rem;display:block;margin-top:3px}
.griot-sub{font-size:.82rem;color:var(--ink-soft);display:block;margin-top:2px}

.room-head{margin-bottom:32px}
.room-head h1{
  font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4.5vw,2.8rem);
  line-height:1.05;margin:12px 0 0;
}
.room-head p{color:var(--ink-soft);font-size:1.02rem;margin:14px 0 0;max-width:560px}

.const-card{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;
  background:linear-gradient(158deg,#26211b,#15110c);color:#f3ead9;
  border-radius:18px;padding:28px 30px;cursor:pointer;
  transition:transform .2s ease;
}
.const-card:hover{transform:translateY(-2px)}
.const-card h2{font-family:var(--serif);font-weight:600;font-size:1.5rem;margin:6px 0 8px;color:#fff}
.const-card p{margin:0;color:rgba(243,234,217,.78);font-size:.93rem;max-width:440px}
.const-card-seal{width:42px;height:42px;color:var(--gold);opacity:.85}

.const-answers{margin-top:14px}
.const-item{display:grid;grid-template-columns:36px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line-soft)}
.const-item:first-child{padding-top:0}
.const-item:last-child{border-bottom:none}
.const-no{font-family:var(--serif);font-weight:600;color:var(--gold-deep);font-size:.95rem}
.const-item h3{margin:0 0 4px;font-size:1rem}
.const-item p{margin:0;color:var(--ink-soft);font-size:.93rem;line-height:1.55}

.ledger-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:36px;
  font-size:.85rem;color:var(--ink-soft);text-decoration:underline;
}

/* ============ PHASE 2: STEWARDSHIP ============ */
.griot-banner-actions{display:flex;gap:8px;flex-wrap:wrap}

.stewardship-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:start}
@media(max-width:760px){.stewardship-grid{grid-template-columns:1fr}}
.stewardship-col-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.stewardship-empty{
  color:var(--ink-soft);font-size:.92rem;background:var(--paper);
  border:1px solid var(--line-soft);border-radius:14px;padding:20px 22px;line-height:1.6;
}
.stewardship-footnote{
  margin-top:16px;font-size:.84rem;color:var(--ink-soft);line-height:1.6;
  font-family:var(--serif);font-style:italic;
}

.member-row{
  display:flex;align-items:center;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--line-soft);
}
.member-row:last-child{border-bottom:none}
.member-badge{
  width:36px;height:36px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.92rem;flex-shrink:0;
}
.member-badge.pending{background:var(--cream-deep);color:var(--ink-soft);border:1.5px dashed var(--line)}
.member-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.member-name{font-weight:600;font-size:.97rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.member-role{font-size:.82rem;color:var(--ink-soft)}
.invite-tag{
  font-size:.7rem;font-weight:600;color:var(--gold-deep);background:rgba(201,162,74,.14);
  padding:2px 9px;border-radius:999px;
}
.council-tag{
  font-size:.7rem;font-weight:600;color:var(--green-deep);background:rgba(58,130,102,.12);
  padding:2px 9px;border-radius:999px;
}
.council-toggle{
  display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--ink-soft);
  white-space:nowrap;cursor:pointer;
}
.member-revoke{
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);font-size:.8rem;transition:.15s;
}
.member-revoke:hover{background:rgba(181,72,47,.1);color:var(--red)}

.successor-card{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:16px;
  padding:24px 26px;
}
.successor-why{
  font-family:var(--serif);font-style:italic;color:var(--ink-soft);font-size:.95rem;
  line-height:1.55;margin:14px 0 16px;
}

.role-select{
  width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:10px;
  background:var(--paper);font-size:.96rem;color:var(--ink);font-family:inherit;
}
.passing-why-input{
  width:100%;min-height:120px;padding:14px 16px;border:1.5px solid var(--line);
  border-radius:10px;background:var(--paper);font-size:.96rem;color:var(--ink);
  line-height:1.55;resize:vertical;font-family:inherit;
}
.passing-why-input::placeholder{color:var(--ink-soft);opacity:.62}

.pass-line{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;
  background:var(--paper);border:1px solid var(--line-soft);border-radius:16px;
  padding:24px 22px;margin:26px 0 30px;
}
@media(max-width:540px){.pass-line{grid-template-columns:1fr;text-align:center}}
.pass-node{display:flex;flex-direction:column;gap:4px}
.pass-node.next{text-align:right}
@media(max-width:540px){.pass-node.next{text-align:center}}
.pass-name{font-family:var(--serif);font-weight:600;font-size:1.15rem}
.pass-arrow{width:22px;height:22px;color:var(--gold-deep);justify-self:center}

.ledger-why{
  font-family:var(--serif);font-style:italic;color:var(--ink-soft);
  font-size:.88rem;margin-top:6px;line-height:1.5;
}

/* ============ PHASE 3: LIVING HISTORY ============ */
.living-history-card{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:var(--paper);border:1.5px solid var(--gold);border-radius:18px;
  padding:26px 28px;margin:32px 0;cursor:pointer;transition:transform .2s ease;
}
.living-history-card:hover{transform:translateY(-2px)}
.living-history-card h2{font-family:var(--serif);font-weight:600;font-size:1.4rem;margin:6px 0 6px}
.living-history-card p{margin:0;color:var(--ink-soft);font-size:.92rem;max-width:420px}
.living-history-card svg{color:var(--gold-deep);flex-shrink:0}

/* ============ FEATURED MOMENT \u2014 griot-pinned spotlight ============ */
.featured-moment{
  background:var(--paper);border:1.5px solid var(--gold);border-radius:18px;
  padding:24px 26px;margin:24px 0;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;
}
.featured-moment:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.featured-moment h3{font-family:var(--serif);font-weight:600;font-size:1.3rem;margin:8px 0 10px;color:var(--ink)}
.featured-note{color:var(--ink-soft);font-style:italic;font-size:.96rem;line-height:1.6;margin:0 0 10px;max-width:560px}
.featured-by{font-size:.78rem;letter-spacing:.04em;color:var(--gold-deep);font-weight:600}

.connected-records{margin:18px 0 28px}
.crs-chips{display:flex;flex-wrap:wrap;gap:8px}
.crs-chip{
  display:inline-flex;align-items:center;gap:6px;font-size:.86rem;font-weight:600;
  color:var(--ink);background:var(--cream-deep);border:1px solid var(--line-soft);
  border-radius:999px;padding:7px 14px;
}

.history-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.history-filter{display:flex;gap:6px;flex-wrap:wrap}
.hf-btn{
  font-size:.82rem;font-weight:600;padding:8px 16px;border-radius:999px;
  border:1.5px solid var(--line);color:var(--ink-soft);transition:.15s;
}
.hf-btn.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.history-card{
  background:var(--paper);border:1px solid var(--line-soft);border-radius:14px;
  overflow:hidden;cursor:pointer;transition:transform .18s ease;
}
.history-card:hover{transform:translateY(-2px)}
.history-thumb{height:140px;background:var(--cream-deep);display:flex;align-items:center;justify-content:center;overflow:hidden}
.history-thumb img{width:100%;height:100%;object-fit:cover}
.history-thumb-icon{color:var(--gold-deep);opacity:.7}
.history-card-body{padding:14px 16px}
.history-type-tag{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep)}
.history-type-tag.legacy{margin-left:8px;text-transform:none;letter-spacing:0;font-weight:600;color:var(--ink-soft)}
.history-card-body h4{margin:6px 0 4px;font-size:.98rem}
.history-tag-count{font-size:.78rem;color:var(--ink-soft)}

.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.type-card{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:var(--paper);border:1.5px solid var(--line-soft);border-radius:16px;
  padding:30px 16px;font-weight:600;font-size:.96rem;transition:.18s;
}
.type-card:hover{border-color:var(--gold-deep);transform:translateY(-2px)}
.type-card svg{color:var(--gold-deep)}

.capture-stage{
  position:relative;background:var(--cream-deep);border-radius:16px;
  min-height:220px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;margin-bottom:16px;
}
.capture-stage video, .capture-stage img{width:100%;max-height:340px;object-fit:contain;display:block}
.capture-stage audio{width:90%}
.capture-placeholder{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--ink-soft);font-size:.88rem}
.rec-timer{
  position:absolute;top:14px;right:14px;background:rgba(20,20,20,.7);color:#fff;
  font-family:var(--sans);font-size:.8rem;font-weight:600;padding:4px 11px;border-radius:999px;
}
.doc-stage{min-height:140px}
.capture-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.file-btn{display:inline-flex;align-items:center;cursor:pointer}

.const-tag-grid{display:flex;flex-wrap:wrap;gap:8px}
.const-tag-chip{
  font-size:.84rem;font-weight:600;padding:9px 16px;border-radius:999px;
  border:1.5px solid var(--line);color:var(--ink-soft);transition:.15s;
}
.const-tag-chip.selected{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.detail-media{width:100%;border-radius:14px;margin-top:6px;max-height:480px;object-fit:contain;background:var(--cream-deep)}
.detail-doc-link{
  display:inline-flex;align-items:center;gap:8px;background:var(--paper);
  border:1.5px solid var(--line);border-radius:12px;padding:16px 20px;
  font-weight:600;color:var(--ink);text-decoration:none;
}
.detail-note{color:var(--ink-soft);font-size:.98rem;line-height:1.6;margin-top:16px;max-width:560px}



/* ============ THE ROOMS GRID (room screen) ============ */
.rooms-head{margin:42px 0 18px}
.rooms-head p{color:var(--ink-soft);font-size:.96rem;max-width:520px;margin:8px 0 0}
.rooms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.rooms-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.rooms-grid{grid-template-columns:1fr}}
.room-card{
  position:relative;text-align:left;background:var(--paper);
  border:1px solid var(--line-soft);border-radius:16px;padding:22px 22px 20px;
  font-family:inherit;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-height:172px;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.room-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:var(--shadow)}
.room-card .rc-no{position:absolute;top:18px;right:20px;font-family:var(--serif);font-size:1.05rem;color:var(--gold-deep)}
.room-card .rc-icon{width:30px;height:30px;color:var(--green);margin-bottom:8px}
.room-card h3{font-family:var(--serif);font-weight:600;font-size:1.3rem;margin:0;color:var(--ink)}
.room-card p{color:var(--ink-soft);font-size:.86rem;margin:0;flex:1;line-height:1.45}
.room-card .rc-foot{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--gold-deep);margin-top:10px}
.room-card.soon{cursor:default;opacity:.6}
.room-card.soon:hover{transform:none;border-color:var(--line-soft);box-shadow:none}
.room-card.soon .rc-icon,.room-card.soon .rc-foot{color:var(--ink-soft)}

/* ============ WISDOM ROOM (Questions Worth Keeping) ============ */
#screen-wisdom{min-height:100vh;background:var(--cream);padding:6vh 24px 10vh}
.wisdom-add{background:var(--paper);border:1px solid var(--line-soft);border-radius:14px;padding:18px 20px;margin:26px 0 16px}
.wisdom-add label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-soft);margin-bottom:8px}
.wisdom-add input{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;background:var(--cream);font-size:1rem;font-family:inherit;color:var(--ink);margin-bottom:12px}
.wisdom-add input:focus{outline:none;border-color:var(--gold-deep)}
.wisdom-starter-label{font-size:.82rem;color:var(--ink-soft);margin:6px 0 8px}
.wisdom-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.wisdom-chip{font-family:inherit;font-size:.82rem;color:var(--ink-soft);background:var(--cream-deep);border:1px solid var(--line-soft);border-radius:999px;padding:8px 14px;cursor:pointer;text-align:left;transition:.15s}
.wisdom-chip:hover{border-color:var(--gold);color:var(--ink)}
.wisdom-empty{color:var(--ink-soft);font-size:.95rem;font-style:italic;padding:8px 0}
.wisdom-entry{background:var(--paper);border:1px solid var(--line-soft);border-radius:14px;padding:20px 22px;margin-bottom:14px}
.wisdom-entry.editing{border-color:var(--gold)}
.wisdom-q{font-family:var(--serif);font-weight:600;font-size:1.25rem;margin:0 0 8px;line-height:1.25;color:var(--ink)}
.wisdom-a{margin:0;color:var(--ink-soft);font-size:.98rem;line-height:1.6;white-space:pre-line}
.wisdom-a.unanswered{font-style:italic;opacity:.7}
.wisdom-entry-actions{display:flex;gap:16px;margin-top:14px}
.wisdom-act{font-family:inherit;font-size:.82rem;font-weight:600;color:var(--gold-deep);background:none;border:none;cursor:pointer;padding:0;text-decoration:underline}
.wisdom-act.danger{color:var(--red)}
.wisdom-mini-label{display:block;font-size:.76rem;font-weight:600;color:var(--ink-soft);margin:0 0 6px}
.wisdom-edit-q{width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--cream);font-size:1.05rem;font-family:var(--serif);font-weight:600;color:var(--ink);margin-bottom:14px}
.wisdom-edit-a{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--cream);font-size:.98rem;font-family:inherit;color:var(--ink);resize:vertical;margin-bottom:14px;line-height:1.6}
.wisdom-edit-q:focus,.wisdom-edit-a:focus{outline:none;border-color:var(--gold-deep)}
.wisdom-edit-actions{display:flex;gap:10px}

/* ============ MULTI-DIMENSION TAGGING ("one archive, six lenses") ============ */
.req{font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--gold-deep);margin-left:6px}
.opt{font-size:.78rem;font-weight:400;color:var(--ink-soft);margin-left:4px;text-transform:none;letter-spacing:0}
.branch-grid{display:flex;flex-wrap:wrap;gap:8px}
.branch-chip{font-family:inherit;font-size:.86rem;color:var(--ink);background:var(--cream-deep);border:1.5px solid var(--line);border-radius:999px;padding:9px 15px;cursor:pointer;transition:.15s}
.branch-chip:hover{border-color:var(--gold)}
.branch-chip.selected{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.branch-chip.add{border-style:dashed;color:var(--gold-deep);font-weight:600;background:none}

.legacy-type-grid{display:flex;flex-wrap:wrap;gap:8px}
.legacy-type-chip{
  font-family:inherit;font-size:.86rem;color:var(--ink);background:var(--cream-deep);
  border:1.5px solid var(--line);border-radius:999px;padding:8px 14px 8px 10px;
  cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:7px;
}
.legacy-type-chip:hover{border-color:var(--gold)}
.legacy-type-chip.selected{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.legacy-type-chip.add{border-style:dashed;color:var(--gold-deep);font-weight:600;background:none}
.legacy-type-chip .ltc-icon{font-size:1.05rem;line-height:1}
.legacy-type-chip .ltc-label{line-height:1}
.ltc-section{margin-bottom:16px}
.ltc-section-label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.tagbox{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:10px;background:var(--cream);padding:8px 10px}
.tagbox:focus-within{border-color:var(--gold-deep)}
.tagbox-input{border:none;background:none;outline:none;font-family:inherit;font-size:.96rem;color:var(--ink);flex:1;min-width:160px;padding:5px 4px}
.tagbox-input.solo{border:1.5px solid var(--line);border-radius:10px;background:var(--cream);padding:12px 14px;min-width:120px;flex:0 0 auto;width:170px}
.tagbox-input.solo:focus{outline:none;border-color:var(--gold-deep)}
.tagbox-input:disabled{opacity:.5}
.tagchip{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;background:var(--cream-deep);border:1px solid var(--line-soft);border-radius:999px;padding:5px 6px 5px 12px;color:var(--ink)}
.tagchip button{border:none;background:none;cursor:pointer;font-size:1.05rem;line-height:1;color:var(--ink-soft);padding:0 4px}
.tagchip button:hover{color:var(--red)}
.timeline-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.timeline-unknown{display:inline-flex;align-items:center;gap:7px;font-size:.88rem;color:var(--ink-soft);cursor:pointer}

/* Browse-By bar on the Living History screen */
.history-browse{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 24px}
.browse-label{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--gold-deep);margin-right:6px}

/* Item-detail facets */
.detail-facets{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;margin-top:20px;font-size:.92rem;background:var(--paper);border:1px solid var(--line-soft);border-radius:12px;padding:16px 18px}
.detail-facets .fk{color:var(--ink-soft);font-weight:600}
.detail-facets .fv{color:var(--ink)}

/* ============ PEOPLE (Room one) ============ */
#screen-people,#screen-person,#screen-person-form{min-height:100vh;background:var(--cream);padding:6vh 24px 10vh}
.people-toolbar{margin:24px 0 18px}
.people-group{margin-bottom:30px}
.people-group-h{display:block;margin-bottom:12px}
.people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.person-card{
  text-align:left;background:var(--paper);border:1px solid var(--line-soft);border-radius:14px;
  padding:16px 18px;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;gap:4px;
  transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease;
}
.person-card:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:var(--shadow)}
.person-name{font-family:var(--serif);font-weight:600;font-size:1.12rem;color:var(--ink);line-height:1.2}
.person-nick{color:var(--gold-deep);font-weight:600}
.person-rel{font-size:.82rem;color:var(--ink-soft)}
.person-years-row{display:flex;gap:16px;flex-wrap:wrap}
.person-years-row .field{flex:1;min-width:130px}
.person-page-name{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4.5vw,2.8rem);line-height:1.06;margin:10px 0 0}
.person-years{font-family:var(--mono),monospace;color:var(--gold-deep);font-size:.9rem;margin:6px 0 0}
.person-rel-line{color:var(--ink-soft);font-size:1rem;margin:10px 0 0}
.facet-link{font-family:inherit;font-size:inherit;color:var(--gold-deep);background:none;border:none;padding:0;cursor:pointer;text-decoration:underline}
.facet-link:hover{color:var(--ink)}

/* ============ Inter-family connections (Steward's Desk) ============ */
.conn-row{
  display:flex;align-items:flex-start;gap:12px;justify-content:space-between;
  padding:14px 16px;border:1px solid var(--line-soft);border-radius:14px;
  margin-bottom:10px;background:var(--paper);
}
.conn-row.incoming{border-color:var(--gold);background:var(--cream-deep)}
.conn-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.conn-name{font-weight:600;color:var(--ink);font-size:.96rem;line-height:1.35}
.conn-note{font-style:italic;color:var(--ink-soft);font-size:.9rem}
.conn-sub{font-size:.8rem;color:var(--ink-soft)}
.conn-actions{display:flex;gap:8px;flex-shrink:0}
.conn-tag{
  display:inline-block;margin-left:8px;font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;font-weight:700;color:var(--green);vertical-align:middle;
}
.conn-tag.muted{color:var(--ink-soft)}

/* ============ Shared-with-us (Phase 2b, subscriber view) ============ */
.stewardship-inbound-wrap{margin-top:34px;padding-top:26px;border-top:1px solid var(--line-soft)}
.history-card.readonly{cursor:default}
.history-card.readonly:hover{transform:none;box-shadow:none}
.shared-note{color:var(--ink-soft);font-size:.9rem;line-height:1.5;margin:6px 0 0}
.shared-note-banner{
  background:var(--cream-deep);border:1px solid var(--line-soft);border-radius:12px;
  padding:10px 14px;margin:0 0 18px;font-size:.86rem;color:var(--ink-soft);
}

/* ============ Shared media (Phase 2c, cross-family viewing) ============ */
.shared-media{display:block;width:100%;border-radius:12px 12px 0 0;overflow:hidden;background:var(--cream-deep)}
.shared-media img,.shared-media video{display:block;width:100%;height:auto;max-height:320px;object-fit:cover}
audio.shared-media{width:100%;border-radius:0;padding:10px 12px;box-sizing:border-box}
.shared-doc-link{display:block;padding:14px 16px;background:var(--cream-deep);border-radius:12px 12px 0 0;color:var(--ink);font-weight:600;text-decoration:underline;font-size:.92rem}
.shared-media-missing{padding:14px 16px;background:var(--cream-deep);border-radius:12px 12px 0 0;color:var(--ink-soft);font-size:.85rem}

/* ===== Annual Reflections ===== */
.reflection-year{
  border:1px solid var(--line-soft);
  border-radius:16px;
  padding:22px 24px;
  margin:0 0 18px;
  background:rgba(255,255,255,.45);
}
.reflection-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px solid var(--line-soft);
}
.reflection-head h2{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:2rem;font-weight:600;margin:0;color:var(--gold-deep);
}
.reflection-qa{margin:0 0 14px}
.reflection-qa:last-of-type{margin-bottom:0}
.reflection-q{
  display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--gold-deep);margin-bottom:4px;
}
.reflection-a{
  margin:0;color:var(--ink-soft);font-size:1rem;line-height:1.6;white-space:normal;
}
.reflection-a.empty{color:var(--line-soft);opacity:.8}
.reflection-by{
  display:block;margin-top:16px;font-size:.78rem;font-style:italic;color:var(--ink-soft);opacity:.75;
}

/* ===== Constitution — actions row + version history ===== */
.const-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.const-actions .ledger-link{margin:0}
.const-version-meta{
  margin:0 0 14px;font-size:.84rem;color:var(--ink-soft);font-style:italic;
  padding-bottom:12px;border-bottom:1px solid var(--line-soft);
}
.const-current-badge{
  display:inline-block;vertical-align:middle;margin-left:8px;
  font-family:'DM Sans',system-ui,sans-serif;font-style:normal;
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--gold-deep);background:rgba(168,132,47,.12);
  border:1px solid rgba(168,132,47,.3);border-radius:999px;padding:3px 9px;
}

/* ============ ORIGINS & JOURNEY ============ */
.origins-empty{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.origins-section-h{display:block;font-family:var(--serif);font-size:1.45rem;font-weight:600;color:var(--ink);margin:34px 0 14px}
.origins-section-h:first-child{margin-top:4px}

/* donut */
.origins-ring{width:172px;height:172px;border-radius:50%;margin:2px auto 24px;position:relative;box-shadow:var(--shadow)}
.origins-ring-hole{position:absolute;inset:30px;border-radius:50%;background:var(--cream)}

/* regions */
.origins-regions{display:flex;flex-direction:column;gap:18px}
.origins-group{display:flex;flex-direction:column;gap:9px}
.origins-group-h{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold-deep)}
.origins-region{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:10px;row-gap:6px}
.origins-swatch{width:14px;height:14px;border-radius:4px}
.origins-region-label{font-size:.98rem;color:var(--ink)}
.origins-region-pct{font-size:.95rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.origins-bar{grid-column:2/4;height:6px;border-radius:4px;background:var(--cream-deep);overflow:hidden}
.origins-bar-fill{display:block;height:100%;border-radius:4px}
.origins-source{margin:18px 0 0;font-size:.82rem;font-style:italic;color:var(--ink-soft)}

/* migration */
.origins-journey{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px}
.origins-step{padding:11px 24px;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);min-width:170px}
.origins-step-era{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;margin-bottom:2px}
.origins-step-place{font-family:var(--serif);font-size:1.15rem;color:var(--ink)}
.origins-arrow{color:var(--gold-deep);font-size:1.25rem;line-height:1}

/* reflection */
.origins-reflection{margin:0;padding:18px 24px;border-left:3px solid var(--gold);background:var(--cream-deep);border-radius:0 12px 12px 0;font-family:var(--serif);font-size:1.12rem;line-height:1.55;color:var(--ink);font-style:italic}

.origins-edit-row{margin-top:32px}

/* form */
.origins-form-h{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold-deep);margin:28px 0 11px}
.origins-region-row,.origins-mig-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.origins-region-row input,.origins-mig-row input{
  padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;
  background:var(--paper);font-size:.96rem;color:var(--ink);transition:border-color .15s;min-width:0;
}
.origins-region-row input:focus,.origins-mig-row input:focus{border-color:var(--gold-deep);outline:none}
.origins-region-row .or-label{flex:2}
.origins-region-row .or-group{flex:2}
.origins-region-row .or-pct{flex:none;width:74px}
.origins-mig-row .om-era{flex:1}
.origins-mig-row .om-place{flex:2}
.origins-row-x{flex:none;width:38px;height:38px;border-radius:9px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink-soft);font-size:1.15rem;line-height:1;cursor:pointer;transition:.15s}
.origins-row-x:hover{border-color:var(--red);color:var(--red)}

/* ============ LIVING TREE — person as living archive ============ */
.person-family{display:flex;flex-direction:column;gap:16px;margin:26px 0 4px}
.pf-group{display:flex;flex-direction:column;gap:9px}
.pf-label{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold-deep)}
.pf-people{display:flex;flex-wrap:wrap;gap:10px}
.person-link{text-align:left;padding:10px 16px;border:1.5px solid var(--line);border-radius:12px;background:var(--paper);cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:2px}
.person-link:hover{border-color:var(--ink);transform:translateY(-1px)}
.person-link-name{font-size:.98rem;color:var(--ink)}
.person-link-rel{font-size:.8rem;color:var(--ink-soft)}

/* what they passed down */
.passed-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.passed-list li{position:relative;padding-left:28px;font-size:1.02rem;color:var(--ink);line-height:1.45}
.passed-list li::before{content:'\2713';position:absolute;left:0;top:1px;color:var(--green-deep);font-weight:700}

/* if I never meet you */
.descendant-msg{margin:32px 0;padding:24px 26px;border:1.5px solid var(--gold);border-radius:16px;background:linear-gradient(155deg,rgba(201,162,74,.10),rgba(201,162,74,.03))}
.dm-label{display:block;font-family:var(--serif);font-size:.92rem;letter-spacing:.03em;color:var(--gold-deep);font-weight:600;margin-bottom:10px}
.dm-body{margin:0;font-family:var(--serif);font-size:1.18rem;line-height:1.6;color:var(--ink);font-style:italic;white-space:pre-wrap}
.dm-empty{margin:0;font-size:.95rem;line-height:1.55;color:var(--ink-soft);font-style:italic}
.dm-edited{display:block;margin-top:12px;font-size:.78rem;color:var(--ink-soft);letter-spacing:.01em}
.dm-actions{margin-top:14px}
.dm-edit-btn{background:none;border:1px solid var(--gold);color:var(--gold-deep);font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.02em;padding:7px 15px;border-radius:999px;cursor:pointer;transition:background .15s ease,color .15s ease}
.dm-edit-btn:hover{background:var(--gold);color:#fffdf7}
.dm-versions{margin-top:16px;border-top:1px solid rgba(201,162,74,.28);padding-top:12px}
.dm-versions>summary{cursor:pointer;list-style:none;font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-deep)}
.dm-versions>summary::-webkit-details-marker{display:none}
.dm-versions>summary::before{content:"\25B8";display:inline-block;margin-right:7px;transition:transform .15s ease;color:var(--gold)}
.dm-versions[open]>summary::before{transform:rotate(90deg)}
.dm-version{margin-top:14px;padding-left:14px;border-left:2px solid rgba(201,162,74,.4)}
.dm-v-meta{display:block;font-size:.76rem;font-weight:600;color:var(--ink-soft);margin-bottom:5px}
.dm-v-body{margin:0;font-family:var(--serif);font-size:1.02rem;line-height:1.55;color:var(--ink-soft);font-style:italic;white-space:pre-wrap;opacity:.92}
.person-aka{margin:2px 0 0;font-size:.92rem;color:var(--ink-soft)}
.person-aka-k{font-weight:600;color:var(--gold-deep);letter-spacing:.01em}
.id-name-story{font-style:italic;color:var(--ink)}

/* Relationship search picker — link existing people by ID */
.rm-picker{margin:14px 0;padding:18px;border:1px solid rgba(201,162,74,.4);border-radius:16px;background:linear-gradient(180deg,#fdf8ee,#f8f0df)}
.rm-picker-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rm-picker-title{font-family:var(--serif);font-weight:600;font-size:1.2rem;color:var(--baobab-brown,#6b4423)}
.rm-picker-close{background:none;border:none;font-size:1.5rem;line-height:1;color:var(--ink-soft);cursor:pointer;padding:0 6px}
.rm-picker-sub{margin:4px 0 12px;font-size:.84rem;color:var(--ink-soft);line-height:1.45}
.rm-search{width:100%;box-sizing:border-box;padding:11px 14px;border:1px solid rgba(107,68,35,.35);border-radius:10px;background:#fffdf7;color:var(--ink);font-size:.96rem}
.rm-search:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,74,.18)}
.rm-picker-results{margin-top:10px;max-height:50vh;overflow:auto;display:flex;flex-direction:column;gap:7px}
.rm-picker-hint{font-size:.88rem;color:var(--ink-soft);padding:8px 2px;line-height:1.5}
.rm-pick-row{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;background:#fff;border:1px solid rgba(107,68,35,.16);border-radius:12px;padding:11px 13px;cursor:pointer;transition:border-color .12s ease,background .12s ease}
.rm-pick-row:hover{border-color:var(--gold);background:#fffdf6}
.rm-pick-av{flex:0 0 auto;width:38px;height:38px;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;background:rgba(201,162,74,.16);color:var(--baobab-brown,#6b4423)}
.rm-pick-av-new{background:var(--gold);color:#fffdf7;font-size:1.4rem;line-height:1}
.rm-pick-main{display:flex;flex-direction:column;gap:1px;min-width:0}
.rm-pick-name{font-weight:600;color:var(--ink)}
.rm-pick-meta{font-size:.82rem;color:var(--ink-soft)}
.rm-pick-aka{font-size:.82rem;color:var(--aged-brass,#9a7a2e)}
.rm-pick-hint-line{margin-top:3px}
.rm-pick-flag{display:inline-block;font-size:.72rem;font-weight:600;padding:1px 8px;border-radius:20px;background:rgba(107,68,35,.1);color:var(--baobab-brown,#6b4423)}
.rm-pick-flag-ok{background:rgba(58,130,102,.15);color:#2f6b53}
.rm-pick-flag-warn{background:rgba(176,108,30,.16);color:#9a5e16}
.rm-pick-create{border-style:dashed;border-color:rgba(201,162,74,.5);background:rgba(201,162,74,.06)}
.rm-pick-create:hover{background:rgba(201,162,74,.12)}

/* Heritage Portrait — original artifact paired with a labeled restoration */
.heritage-portrait{margin:8px 0 18px}
.hp-figure{margin:0;position:relative;display:inline-block;max-width:100%}
.hp-figure img{display:block;max-width:340px;width:100%;border-radius:14px;border:1px solid rgba(107,68,35,.2)}
.hp-original img{filter:none}
.hp-tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:20px;margin-bottom:8px}
.hp-tag-original{background:rgba(107,68,35,.12);color:var(--baobab-brown,#6b4423)}
.hp-tag-portrait{background:var(--gold);color:#fffdf7}
.hp-cap{margin:7px 0 0;font-size:.8rem;color:var(--ink-soft);font-style:italic}
.hp-arrow{font-size:1.4rem;color:var(--gold-deep,#a8842f);text-align:center;width:340px;max-width:100%;margin:12px 0}
.hp-portrait{margin-top:2px}
.hp-provenance{margin:8px 0 0;font-size:.8rem;font-weight:600;color:var(--aged-brass,#9a7a2e)}
.hp-disclaimer{margin:6px 0 0;max-width:340px;font-size:.78rem;line-height:1.45;color:var(--ink-soft)}
.hp-actions{display:flex;gap:8px;margin-top:10px}
.hp-create{margin-top:12px}
.hp-create-sub{margin:8px 0 0;max-width:360px;font-size:.82rem;line-height:1.45;color:var(--ink-soft)}
.hp-tag-recon{background:#b3261e;color:#fff;margin-left:6px}
.hp-portrait-recon img{border-color:rgba(179,38,30,.5)}
.hp-prov{margin:8px 0 0;max-width:340px}
.hp-prov summary{cursor:pointer;font-size:.76rem;font-weight:700;color:var(--baobab-brown,#6b4423);list-style:none;padding:3px 0}
.hp-prov summary::-webkit-details-marker{display:none}
.hp-prov summary::before{content:"\\203A ";color:var(--aged-brass,#9a7a2e)}
.hp-prov[open] summary::before{content:"\\2304 "}
.hp-prov-recon summary{color:#b3261e}
.hp-prov-dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:6px 0 0;padding:8px 0 2px 10px;border-left:2px solid rgba(201,162,74,.3)}
.hp-prov-recon .hp-prov-dl{border-left-color:rgba(179,38,30,.4)}
.hp-prov-dl dt{font-size:.7rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--aged-brass,#9a7a2e);margin:0}
.hp-prov-dl dd{font-size:.82rem;color:var(--ink,#141414);margin:0;line-height:1.4}
.hp-proc-grp{border:1px solid rgba(107,68,35,.2);border-radius:11px;padding:11px 13px;margin-bottom:10px}
.hp-proc-recon{border-color:rgba(179,38,30,.4);background:rgba(179,38,30,.04)}
.hp-proc-title{display:block;font-size:.8rem;font-weight:700;color:var(--ink,#141414);margin-bottom:2px}
.hp-proc-recon .hp-proc-title{color:#b3261e}
.hp-proc-note{display:block;font-size:.75rem;color:var(--ink-soft,#6b6157);font-style:italic;margin-bottom:7px}
.hp-proc-opt{display:flex;align-items:center;gap:7px;font-size:.86rem;color:var(--ink,#141414);padding:3px 0}
.hp-compare-wrap{margin:10px 0 4px;max-width:340px}
.hp-compare-toggle{background:none;border:1px solid rgba(107,68,35,.3);border-radius:8px;color:var(--baobab-brown,#6b4423);font:inherit;font-size:.8rem;font-weight:600;padding:6px 12px;cursor:pointer}
.hp-compare-toggle:hover{background:rgba(201,162,74,.1)}
.hp-compare{margin-top:10px}
.hp-cmp-stage{position:relative;max-width:340px;border-radius:12px;overflow:hidden;border:1px solid rgba(107,68,35,.25);user-select:none}
.hp-cmp-base{display:block;width:100%}
.hp-cmp-top{position:absolute;top:0;left:0;height:100%;width:50%;overflow:hidden}
.hp-cmp-top img{position:absolute;top:0;left:0;height:100%;max-width:none;object-fit:cover}
.hp-cmp-divider{position:absolute;top:0;left:50%;width:2px;height:100%;background:var(--gold,#C9A24A);box-shadow:0 0 0 1px rgba(255,255,255,.6);transform:translateX(-1px);pointer-events:none}
.hp-cmp-tag{position:absolute;bottom:8px;font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:rgba(20,12,4,.55);border-radius:20px;padding:2px 8px;pointer-events:none}
.hp-cmp-tag-l{left:8px}
.hp-cmp-tag-r{right:8px}
.hp-cmp-range{width:100%;max-width:340px;margin-top:8px;accent-color:var(--gold,#C9A24A);cursor:ew-resize}
@media(min-width:680px){
  .heritage-portrait.has-portrait{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap}
  .heritage-portrait.has-portrait .hp-arrow{display:flex;align-items:center;width:auto;align-self:center;transform:rotate(-90deg);margin:0}
}

/* Our Family Journey */
#screen-family-journey .fj-intro{margin:8px 0 18px}
.fj-eyebrow{display:block;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep,#a8842f)}
.fj-title{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,4vw,2.6rem);margin:8px 0 6px;color:var(--ink)}
.fj-sub{color:var(--ink-soft);font-size:1rem;line-height:1.55;max-width:600px;margin:0}
.fj-section-eyebrow{display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--aged-brass,#9a7a2e);margin-top:6px}
.fj-section-h{font-family:var(--serif);font-weight:600;font-size:1.3rem;margin:4px 0 12px;color:var(--baobab-brown,#6b4423)}
.fj-origin{margin:0 0 24px;padding:16px 18px;border:1px solid rgba(201,162,74,.34);border-radius:14px;background:rgba(201,162,74,.05)}
.fj-origin-q{display:block;font-weight:600;color:var(--ink);margin-bottom:10px}
.fj-origin-opts{display:flex;gap:8px;flex-wrap:wrap}
.fj-origin-btn{background:#fff;border:1px solid rgba(107,68,35,.3);border-radius:999px;padding:8px 15px;font:inherit;font-size:.88rem;font-weight:600;color:var(--ink-soft);cursor:pointer}
.fj-origin-btn.active{background:var(--baobab-brown,#6b4423);border-color:var(--baobab-brown,#6b4423);color:#fffdf7}
.fj-origin-help{margin:11px 0 0;font-size:.82rem;line-height:1.5;color:var(--ink-soft)}
.fj-phases{margin:0 0 28px;padding:18px 20px;border-radius:16px;background:linear-gradient(180deg,#241a12,#3a2a1c);color:#f3e7d2}
.fj-phases .fj-section-eyebrow{color:#e6c878}
.fj-phases .fj-section-h{color:#fff}
.fj-context-note{font-size:.86rem;line-height:1.55;color:#d8c6aa;margin:0 0 16px;max-width:600px}
.fj-phase-list{list-style:none;margin:0;padding:0;position:relative}
.fj-phase{position:relative;padding:0 0 18px 24px;border-left:2px solid rgba(230,200,120,.4)}
.fj-phase:last-child{border-left-color:transparent}
.fj-phase::before{content:"";position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;background:#e6c878}
.fj-phase-bridge::before{background:#fff;box-shadow:0 0 0 4px rgba(230,200,120,.3)}
.fj-phase-label{display:block;font-family:var(--serif);font-size:1.1rem;font-weight:600;color:#fff}
.fj-phase-context{display:block;font-size:.85rem;line-height:1.45;color:#d8c6aa;margin-top:2px}
.fj-phase-bridge .fj-phase-label{color:#e6c878}
.fj-layers{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 18px}
.fj-layer-chip{background:#fff;border:1px solid rgba(107,68,35,.22);border-radius:999px;padding:7px 13px;font:inherit;font-size:.85rem;font-weight:600;color:var(--ink-soft);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.fj-layer-chip.active{background:var(--gold);border-color:var(--gold);color:#fffdf7}
.fj-count{font-size:.74rem;opacity:.75;background:rgba(107,68,35,.12);border-radius:20px;padding:0 7px}
.fj-layer-chip.active .fj-count{background:rgba(255,255,255,.25)}
.fj-timeline{list-style:none;margin:0;padding:0}
.fj-event{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid rgba(107,68,35,.12)}
.fj-year{flex:0 0 auto;min-width:54px;font-family:var(--serif);font-weight:700;font-size:1.15rem;color:var(--gold-deep,#a8842f)}
.fj-event-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.fj-event-title{font-size:1rem;color:var(--ink);font-weight:600}
.fj-person-link{background:none;border:none;padding:0;font:inherit;font-weight:600;color:var(--baobab-brown,#6b4423);cursor:pointer;text-decoration:underline;text-decoration-color:rgba(201,162,74,.5);text-underline-offset:2px}
.fj-event-place{font-size:.86rem;color:var(--ink-soft)}
.fj-event-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.fj-layer-tag{font-size:.72rem;font-weight:700;color:var(--baobab-brown,#6b4423);background:rgba(201,162,74,.14);border-radius:20px;padding:1px 9px}
.fj-doc-tag{font-size:.72rem;color:var(--ink-soft);background:rgba(58,130,102,.12);border-radius:20px;padding:1px 9px}
.fj-empty{color:var(--ink-soft);font-size:.95rem;line-height:1.55;padding:14px 2px;max-width:560px}
.fj-seams{display:flex;flex-direction:column;gap:7px;margin:26px 0 0;padding:16px 0 0;border-top:1px solid rgba(107,68,35,.16)}
.fj-seam{font-size:.84rem;color:var(--ink-soft);opacity:.85}

/* Caregiver roles + confidence + Research Notes */
.pf-conf{display:inline-block;font-size:.7rem;font-weight:700;border-radius:20px;padding:1px 9px;margin-left:6px}
.pf-conf-proven{background:rgba(58,130,102,.16);color:#27604a}
.pf-conf-probable{background:rgba(201,162,74,.18);color:#8a6d1f}
.pf-conf-needs_review{background:rgba(201,162,74,.12);color:#9a7a2e}
.pf-conf-research_open{background:rgba(107,68,35,.12);color:#6b4423}
.pf-conf-disputed{background:rgba(179,38,30,.12);color:#b3261e}
.pf-conf-unknown{background:rgba(20,20,20,.08);color:var(--ink-soft,#6b6157)}
.pf-cg-edit,.pf-research-mark{background:none;border:1px dashed rgba(107,68,35,.4);border-radius:8px;color:var(--baobab-brown,#6b4423);font:inherit;font-size:.76rem;font-weight:600;padding:3px 9px;cursor:pointer;margin-left:8px}
.pf-cg-edit:hover,.pf-research-mark:hover{background:rgba(201,162,74,.1)}
.pf-research-open{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 0;margin-top:4px;border-top:1px dashed rgba(107,68,35,.18)}
.pf-research-label{font-weight:700;color:var(--ink,#141414);font-size:.9rem}
.pf-research-state{font-style:italic;color:var(--aged-brass,#9a7a2e);font-size:.88rem}
.pf-research-mark{display:inline-block;margin:6px 0 0}
.person-research{margin:18px 0 0;padding:16px 18px;border:1px solid rgba(107,68,35,.2);border-radius:14px;background:rgba(201,162,74,.04)}
.pr-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.rn-edit{background:none;border:1px solid rgba(107,68,35,.3);border-radius:8px;color:var(--baobab-brown,#6b4423);font:inherit;font-size:.78rem;font-weight:600;padding:5px 11px;cursor:pointer}
.rn-notes{color:var(--ink-walnut,#2c1a0e);font-size:.94rem;line-height:1.55;margin:0 0 12px;white-space:normal}
.rn-hyp{border-left:3px solid var(--aged-brass,#9a7a2e);background:rgba(154,122,46,.06);border-radius:0 10px 10px 0;padding:11px 14px;margin:0 0 10px}
.rn-hyp-flag{display:block;font-size:.7rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#9a7a2e}
.rn-hyp-about{display:block;font-size:.78rem;font-weight:600;color:var(--ink-soft,#6b6157);margin-top:3px}
.rn-hyp-claim{margin:5px 0 0;color:var(--ink,#141414);font-size:.92rem;line-height:1.5}
.rn-hyp-meta{font-size:.74rem;color:var(--ink-soft,#6b6157);margin-top:6px}
.rn-remove{background:none;border:none;color:#b3261e;font:inherit;font-size:.74rem;cursor:pointer;text-decoration:underline;padding:0}
.rn-doctrine{font-size:.8rem;font-style:italic;color:var(--ink-soft,#6b6157);line-height:1.5;margin:10px 0 0;padding-top:10px;border-top:1px solid rgba(107,68,35,.12)}
.rn-empty{color:var(--ink-soft,#6b6157);font-size:.88rem;line-height:1.5;margin:0}
.pf-sublabel{display:block;font-size:.78rem;color:var(--ink-soft,#6b6157);font-style:italic;margin:-2px 0 8px;max-width:440px}
.lived-evidence{margin:6px 0 0;width:100%}
.lived-evidence summary{cursor:pointer;font-size:.78rem;font-weight:700;color:var(--baobab-brown,#6b4423);list-style:none;padding:3px 0}
.lived-evidence summary::-webkit-details-marker{display:none}
.lived-evidence summary::before{content:"\\203A ";color:var(--aged-brass,#9a7a2e)}
.lived-evidence[open] summary::before{content:"\\2304 "}
.le-body{padding:8px 0 4px 12px;border-left:2px solid rgba(201,162,74,.3);margin-top:4px}
.le-h{display:block;font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--aged-brass,#9a7a2e);margin:6px 0 3px}
.le-ev-list{margin:0 0 4px;padding-left:18px}
.le-ev-list li{font-size:.86rem;color:var(--ink,#141414);line-height:1.4}
.le-ev-detail{color:var(--ink-soft,#6b6157);font-style:italic}
.le-conf-wrap{display:flex;flex-direction:column;gap:3px}
.le-conf{font-size:.86rem;color:var(--ink,#141414);font-weight:600}
.le-bio{font-size:.84rem;color:var(--aged-brass,#9a7a2e);font-style:italic}
.le-none{font-size:.84rem;color:var(--ink-soft,#6b6157)}
.hist-context{margin:0 0 24px;padding:18px 20px;border-radius:16px;background:rgba(107,68,35,.06);border:1px solid rgba(107,68,35,.18)}
.hist-context-off{background:rgba(201,162,74,.05);border-style:dashed}
.hc-offer{font-size:.86rem;color:var(--ink-soft,#6b6157);line-height:1.5;margin:6px 0 12px;max-width:600px}
.hc-frame{font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--baobab-brown,#6b4423);margin:6px 0 10px}
.hc-text{font-size:.94rem;line-height:1.6;color:var(--ink-walnut,#2c1a0e);margin:0 0 12px;max-width:620px}
.hc-disclaimer{font-size:.8rem;font-style:italic;color:var(--ink-soft,#6b6157);line-height:1.5;margin:0;padding-top:10px;border-top:1px solid rgba(107,68,35,.14);max-width:620px}
.hc-acts{display:flex;gap:8px;margin-top:12px}

/* Ancestral Origins */
.ao-panel{margin:0 0 24px;padding:18px 20px;border-radius:16px;background:linear-gradient(180deg,#21301f,#2c3a26);color:#eef2e6}
.ao-off{background:rgba(58,130,102,.06);border:1px dashed rgba(58,130,102,.4);color:inherit}
.ao-off .fj-section-eyebrow{color:var(--sage,#3a8266)}
.ao-offer{font-size:.86rem;color:var(--ink-soft,#6b6157);line-height:1.5;margin:6px 0 12px;max-width:600px}
.ao-panel .fj-section-eyebrow{color:#9fd0b6}
.ao-title{font-family:var(--serif);font-weight:600;font-size:1.35rem;margin:4px 0 4px;color:#fff}
.ao-source{font-size:.8rem;font-weight:600;color:#9fd0b6;margin:0 0 14px;letter-spacing:.02em;text-transform:uppercase}
.ao-regions{display:flex;flex-direction:column;gap:16px}
.ao-region-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid rgba(159,208,182,.25);padding-bottom:4px;margin-bottom:8px}
.ao-region-name{font-family:var(--serif);font-size:1.08rem;font-weight:600;color:#fff}
.ao-region-total{font-size:.82rem;font-weight:700;color:#9fd0b6}
.ao-entry{position:relative;display:flex;align-items:center;gap:10px;padding:5px 0}
.ao-bar{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(159,208,182,.28),rgba(159,208,182,.1));border-radius:6px;z-index:0}
.ao-entry-name{position:relative;z-index:1;flex:1;font-size:.92rem;color:#eef2e6;padding-left:8px}
.ao-entry-pct{position:relative;z-index:1;font-size:.86rem;font-weight:700;color:#fff;padding-right:8px}
.ao-comms{margin-top:18px;padding-top:14px;border-top:1px solid rgba(159,208,182,.2)}
.ao-comms-h{display:block;font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#9fd0b6;margin-bottom:9px}
.ao-comm{margin-bottom:9px}
.ao-comm-name{font-size:.94rem;font-weight:600;color:#fff}
.ao-comm-subs{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ao-comm-sub{font-size:.78rem;color:#cfe0d3;background:rgba(159,208,182,.14);border-radius:20px;padding:2px 10px}
.ao-comm-note{font-size:.78rem;font-style:italic;color:#bcccae;line-height:1.5;margin:10px 0 0}
.ao-disclaimer{font-size:.82rem;line-height:1.55;color:#d8e3cd;margin:16px 0 0;padding:11px 13px;background:rgba(0,0,0,.18);border-radius:10px;border-left:3px solid #9fd0b6}
.ao-acts{display:flex;gap:8px;margin-top:14px}
.ao-acts .hc-edit{border-color:rgba(159,208,182,.4);color:#dcebd9 ;color:#cfe0d3}

/* The Family Album */
.fa-intro{margin:0 0 18px}
.fa-title{font-family:var(--serif);font-weight:600;font-size:2rem;color:var(--baobab-brown,#6b4423);margin:4px 0 6px;line-height:1.05}
.fa-sub{font-size:.95rem;color:var(--ink-soft,#6b6157);line-height:1.55;max-width:640px;margin:0}
.fa-link,.fa-sub .fa-link{background:none;border:none;color:var(--gold-deep,#a8842f);font:inherit;font-weight:600;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px}
.fa-shelves{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.fa-shelf-btn{display:inline-flex;align-items:center;gap:7px;background:var(--paper,#fff);border:1px solid var(--line,rgba(107,68,35,.22));border-radius:999px;padding:7px 14px;font-family:var(--sans);font-size:.84rem;font-weight:600;color:#4c3e30;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.fa-shelf-btn:hover{border-color:var(--gold,#C9A24A)}
.fa-shelf-btn.is-active{background:var(--baobab-brown,#6b4423);border-color:var(--baobab-brown,#6b4423);color:#fdf8ee}
.fa-shelf-n{font-size:.72rem;font-weight:700;background:rgba(107,68,35,.1);color:var(--baobab-brown,#6b4423);border-radius:999px;padding:1px 7px;min-width:18px;text-align:center}
.fa-shelf-btn.is-active .fa-shelf-n{background:rgba(255,255,255,.22);color:#fff}
.fa-decades{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:10px 0;border-top:1px solid var(--line,rgba(107,68,35,.15));border-bottom:1px solid var(--line,rgba(107,68,35,.15))}
.fa-decade-btn{background:none;border:1px solid transparent;border-radius:8px;padding:4px 11px;font-family:var(--sans);font-size:.8rem;font-weight:600;color:var(--ink-soft,#6b6157);cursor:pointer;transition:background .15s,color .15s}
.fa-decade-btn:hover{background:rgba(201,162,74,.12)}
.fa-decade-btn.is-active{background:var(--gold,#C9A24A);color:var(--ink,#141414)}
.fa-count-line{font-size:.82rem;color:var(--ink-soft,#6b6157);margin:0 0 12px;letter-spacing:.02em}
.fa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.fa-card{display:flex;flex-direction:column;text-align:left;background:var(--paper,#fff);border:1px solid var(--line,rgba(107,68,35,.18));border-radius:14px;overflow:hidden;cursor:pointer;padding:0;transition:transform .15s,box-shadow .15s,border-color .15s;box-shadow:0 6px 16px rgba(20,12,4,.07)}
.fa-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(20,12,4,.16);border-color:var(--gold,#C9A24A)}
.fa-card-img{position:relative;display:block;width:100%;aspect-ratio:1/1;background-size:cover;background-position:center;background-color:#e9ddc7}
.fa-card-yr{position:absolute;top:8px;left:8px;font-size:.68rem;font-weight:700;color:#fff;background:rgba(20,12,4,.55);border-radius:20px;padding:2px 9px}
.fa-card-badge{position:absolute;top:8px;right:8px;font-size:.62rem;font-weight:700;letter-spacing:.03em;color:var(--ink,#141414);background:var(--gold2,#E6C878);border-radius:20px;padding:2px 8px}
.fa-card.is-restored{border-color:rgba(201,162,74,.5)}
.fa-card-cap{padding:9px 11px 11px}
.fa-card-title{display:block;font-family:var(--serif);font-size:1.02rem;font-weight:600;color:var(--ink,#141414);line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fa-card-meta{display:block;font-family:var(--sans);font-size:.74rem;color:var(--ink-soft,#6b6157);margin-top:2px}
.fa-empty{grid-column:1/-1;font-size:.92rem;color:var(--ink-soft,#6b6157);font-style:italic;padding:24px 0}
@media (max-width:520px){.fa-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:11px}.fa-title{font-size:1.6rem}}
.hc-edit{background:none;border:1px solid rgba(107,68,35,.3);border-radius:8px;color:var(--baobab-brown,#6b4423);font:inherit;font-size:.76rem;font-weight:600;padding:4px 11px;cursor:pointer}

/* The Living Archive */
.person-archive-cta{margin:8px 0 4px}
#screen-person-archive .pa-intro{margin:8px 0 18px}
.pa-eyebrow{display:block;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep,#a8842f)}
.pa-name{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,4vw,2.6rem);margin:8px 0 6px;color:var(--ink)}
.pa-sub{color:var(--ink-soft);font-size:1rem;line-height:1.55;max-width:620px;margin:0}
.pa-loading{color:var(--ink-soft);font-style:italic;padding:18px 2px}
.pa-empty{color:var(--ink-soft);font-size:.95rem;line-height:1.55;padding:14px 2px;max-width:560px}
.pa-timeline{list-style:none;margin:0;padding:0}
.pa-event{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid rgba(107,68,35,.12)}
.pa-clickable{cursor:pointer}
.pa-clickable:hover{background:rgba(201,162,74,.05)}
.pa-year{flex:0 0 auto;min-width:52px;font-family:var(--serif);font-weight:700;font-size:1.12rem;color:var(--gold-deep,#a8842f);padding-top:6px}
.pa-ic{flex:0 0 auto;width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;background:rgba(201,162,74,.12);border-radius:11px}
.pa-thumb{flex:0 0 auto;width:48px;height:48px;border-radius:11px;overflow:hidden;background:rgba(107,68,35,.1)}
.pa-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pa-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.pa-title{font-size:1rem;color:var(--ink);font-weight:600}
.pa-restored{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--gold);color:#fffdf7;border-radius:20px;padding:1px 7px;vertical-align:middle}
.pa-detail{font-size:.86rem;color:var(--ink-soft)}
.pa-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.pa-kind{font-size:.72rem;font-weight:700;color:var(--baobab-brown,#6b4423);background:rgba(201,162,74,.14);border-radius:20px;padding:1px 9px}
.pa-source{font-size:.72rem;color:var(--ink-soft);background:rgba(58,130,102,.12);border-radius:20px;padding:1px 9px}
.pa-foot{margin:22px 0 0;padding-top:14px;border-top:1px solid rgba(107,68,35,.16);font-size:.86rem;font-style:italic;color:var(--ink-soft);line-height:1.55;max-width:620px}

/* the 1870 Wall — dignity for sparse records */
.wall-1870{margin:22px 0;padding:18px 22px;border-left:3px solid var(--ink-soft);background:var(--cream-deep);border-radius:0 12px 12px 0}
.wall-tag{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-soft);margin-bottom:8px}
.wall-1870 p{margin:0;font-size:.92rem;line-height:1.55;color:var(--ink-soft)}

/* passed-down form rows */
.passed-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.passed-row .pd-val{flex:1;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);font-size:.96rem;color:var(--ink);transition:border-color .15s;min-width:0}
.passed-row .pd-val:focus{border-color:var(--gold-deep);outline:none}

/* ============ LIVING TREE — drawn ============ */
.tree-focus-head{font-size:.92rem;color:var(--ink-soft);margin:2px 0 18px}
.tree-focus-head b{color:var(--ink);font-family:var(--serif);font-weight:600}
.tree-cap{text-align:center;font-size:.82rem;font-style:italic;color:var(--ink-soft);max-width:360px;margin:0 auto 6px;padding:10px 14px;border:1px dashed var(--line);border-radius:12px;background:var(--cream-deep)}
.tree-canvas{display:flex;flex-direction:column;align-items:center;padding:8px 0 4px}
.tree-tier{display:flex;flex-direction:column;align-items:center;gap:8px}
.tree-tier-label{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--gold-deep)}
.tree-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:12px}
.tree-spine{width:2px;height:26px;background:var(--line);margin:2px 0}
.tree-union{display:flex;align-items:center;font-family:var(--serif);color:var(--gold-deep);font-size:1.1rem;padding:0 2px}
.tree-node{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  padding:12px 16px;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);
  cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s;min-width:130px;max-width:210px}
.tree-node:hover{border-color:var(--ink);transform:translateY(-2px)}
.tree-node.is-focus{border-color:var(--gold-deep);border-width:2px;background:linear-gradient(155deg,rgba(201,162,74,.12),var(--paper));box-shadow:var(--shadow)}
.tree-node-name{font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--ink);line-height:1.2}
.tree-node-nick{font-size:.82rem;color:var(--ink-soft)}
.tree-node-years{font-size:.8rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.tree-node-memory{font-size:.72rem;color:var(--gold-deep);margin-top:3px}
.tree-focus-actions{display:flex;justify-content:center;margin:24px 0 6px}
.tree-hint{text-align:center;font-size:.8rem;color:var(--ink-soft);font-style:italic;margin:4px 0 0}

/* ============ LEGACY MAP ============ */
.map-section-h{display:block;font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--ink);margin:28px 0 14px}
.map-section-h:first-child{margin-top:4px}
.map-journey{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;margin-bottom:10px}
.map-stop{padding:11px 24px;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);min-width:170px;cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:2px;align-items:center}
.map-stop:hover{border-color:var(--ink);transform:translateY(-1px)}
.map-stop-era{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.map-stop-place{font-family:var(--serif);font-size:1.12rem;color:var(--ink)}
.map-arrow{color:var(--gold-deep);font-size:1.2rem;line-height:1}
.map-places{display:flex;flex-wrap:wrap;gap:12px}
.map-place{display:flex;flex-direction:column;gap:3px;text-align:left;padding:14px 18px;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);cursor:pointer;transition:.15s;min-width:150px}
.map-place:hover{border-color:var(--ink);transform:translateY(-2px)}
.map-place-name{font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--ink)}
.map-place-count{font-size:.8rem;color:var(--ink-soft)}

/* person vitals (born/died with place) + passed-down presets */
.person-vitals{display:flex;flex-direction:column;gap:3px;margin:6px 0 4px}
.person-vitals .vital{font-size:.95rem;color:var(--ink-soft)}
.person-vitals .vital b{color:var(--ink);font-weight:600;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;margin-right:8px}
.passed-presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}

/* ============ IMPORT A TREE ============ */
.people-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 22px}
.import-drop{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:34px 24px;border:2px dashed var(--line);border-radius:16px;background:var(--paper);
  cursor:pointer;transition:border-color .15s,background .15s;color:var(--gold-deep)}
.import-drop:hover{border-color:var(--gold-deep);background:var(--cream-deep)}
.import-drop-main{font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--ink)}
.import-drop-sub{font-size:.84rem;color:var(--ink-soft)}
.import-summary{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.import-stat{flex:1;min-width:96px;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:16px 12px;border:1.5px solid var(--line-soft);border-radius:14px;background:var(--cream-deep)}
.import-num{font-family:var(--serif);font-size:1.9rem;font-weight:600;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.import-lbl{font-size:.74rem;letter-spacing:.04em;color:var(--ink-soft);text-align:center}
.import-names{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.import-chip{font-size:.84rem;color:var(--ink);background:var(--paper);border:1px solid var(--line-soft);border-radius:999px;padding:5px 11px}
.import-chip-yr{color:var(--ink-soft);font-variant-numeric:tabular-nums}
.import-chip.more{color:var(--ink-soft);background:transparent;border-style:dashed}

.import-template-line{font-size:.86rem;color:var(--ink-soft);margin:14px 2px 0;line-height:1.5}
.import-template-link{background:none;border:none;padding:0;font:inherit;color:var(--gold-deep);font-weight:600;text-decoration:underline;cursor:pointer}
.import-template-link:hover{color:var(--ink)}

/* ============ HOW THEY'RE CONNECTED (kinship + the hard truths) ============ */
.person-select{width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);font-size:1rem;color:var(--ink);transition:border-color .15s}
.person-select:focus{border-color:var(--gold-deep);outline:none}
.person-conn{display:inline-block;font-size:.85rem;color:var(--gold-deep);background:rgba(201,162,74,.12);border:1px solid rgba(201,162,74,.32);border-radius:999px;padding:5px 13px;margin:10px 0 0}
.enslaver-note{margin:18px 0 6px;padding:16px 20px;border-left:3px solid #6b4a2f;background:#ece2d4;border-radius:0 12px 12px 0}
.enslaver-tag{display:block;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:#6b4a2f;margin-bottom:7px}
.enslaver-note p{margin:0;font-size:.92rem;line-height:1.55;color:var(--ink-soft)}
.tree-node.is-enslaver{border-style:dashed;border-color:#6b4a2f;background:#ece2d4}
.tree-node-conn{font-size:.7rem;color:#6b4a2f;font-weight:600;margin-top:3px}

/* ============ SURNAME MAP ============ */
.surname-hint{font-size:.9rem;color:var(--ink-soft);line-height:1.55;margin:0 0 16px}
.surname-list{display:flex;flex-direction:column;gap:8px}
.surname-row{display:grid;grid-template-columns:1fr auto 1.5fr;align-items:center;gap:12px;padding:10px 14px;background:var(--paper);border:1px solid var(--line);border-radius:10px}
.surname-name{font-weight:600;color:var(--ink)}
.surname-count{font-size:.76rem;color:var(--ink-soft);background:rgba(0,0,0,.04);border-radius:999px;padding:2px 9px;white-space:nowrap}
.surname-branch-in{padding:9px 12px;border:1.5px solid var(--line);border-radius:8px;background:#fffdf8;font-size:.92rem;color:var(--ink);width:100%}
.surname-branch-in:focus{border-color:var(--gold-deep);outline:none}
.surname-actions{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}

/* ============ CONNECTION CONTEXT (bloodline / confidence / note) ============ */
#person-connote{width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);font-size:1rem;color:var(--ink);font-family:inherit;line-height:1.5;resize:vertical}
#person-connote:focus{border-color:var(--gold-deep);outline:none}
.person-context{margin:12px 0 4px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline}
.pc-bit{font-size:.85rem;color:var(--ink-soft)}
.pc-bit b{color:var(--ink);font-weight:600}
.pc-note{flex-basis:100%;margin:6px 0 0;font-size:.92rem;line-height:1.6;color:var(--ink-soft);font-style:italic;border-left:2px solid var(--line);padding-left:12px}

/* ============ NAME HISTORY ============ */
.surname-foot{font-size:.86rem;color:var(--ink-soft);margin:18px 0 0;text-align:center}
.surname-name-btn{background:none;border:none;padding:0;font:inherit;color:var(--gold-deep);font-weight:600;cursor:pointer;text-align:left;text-decoration:underline;text-decoration-color:rgba(201,162,74,.4);text-underline-offset:3px}
.surname-name-btn:hover{text-decoration-color:var(--gold-deep)}
.sp-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.sp-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:2.4rem;margin:0;color:var(--ink)}
.sp-side{font-size:.8rem;color:var(--gold-deep);background:rgba(201,162,74,.12);border:1px solid rgba(201,162,74,.32);border-radius:999px;padding:4px 12px}
.sp-type{font-size:.95rem;color:var(--ink-soft);margin:4px 0 20px}
.sp-type b{color:var(--ink)}
.sp-block{margin:0 0 24px}
.sp-block .eyebrow{display:block;margin-bottom:8px}
.sp-block p{margin:0;line-height:1.65;color:var(--ink-soft)}
#surname-edit-side{width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);font-size:1rem;color:var(--ink)}
#surname-edit-meaning,#surname-edit-records{width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);font-size:1rem;color:var(--ink);font-family:inherit;line-height:1.5;resize:vertical}
#surname-edit-side:focus,#surname-edit-meaning:focus,#surname-edit-records:focus{border-color:var(--gold-deep);outline:none}

/* ============ NAME HISTORY — hub sections ============ */
.sp-meaning p{font-size:1.05rem;line-height:1.7}
.sp-doclist{display:flex;flex-direction:column;gap:8px}
.sp-doc-link{color:var(--gold-deep);text-decoration:none;font-weight:600;font-size:.95rem}
.sp-doc-link:hover{text-decoration:underline}
.sp-story{margin:0 0 16px}
.sp-story-title{display:block;font-weight:600;color:var(--ink);margin-bottom:6px}
.sp-story audio,.sp-story video{width:100%;max-width:480px;border-radius:8px}
.sp-story-note{margin:6px 0 0;font-size:.92rem;line-height:1.6;color:var(--ink-soft);font-style:italic}
.sp-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.sp-photo{margin:0}
.sp-photo img{width:100%;height:140px;object-fit:cover;border-radius:10px;display:block;border:1px solid var(--line)}
.sp-photo figcaption{font-size:.78rem;color:var(--ink-soft);margin-top:5px;line-height:1.35}
#surname-edit-dna,#surname-edit-oral{width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);font-size:1rem;color:var(--ink);font-family:inherit;line-height:1.5;resize:vertical}
#surname-edit-dna:focus,#surname-edit-oral:focus{border-color:var(--gold-deep);outline:none}

/* ============ PEOPLE — search + collapsible branches ============ */
.people-search-wrap{margin:0 0 16px}
.people-search{width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:10px;background:#fffdf8;font-size:1rem;color:var(--ink)}
.people-search:focus{border-color:var(--gold-deep);outline:none}
.people-group{margin-bottom:4px}
.people-group-toggle{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;border-bottom:1px solid var(--line);padding:13px 4px;cursor:pointer;text-align:left}
.people-group-toggle .people-group-h{margin:0;flex:1}
.people-group-chev{font-size:1.15rem;color:var(--gold-deep);width:16px;text-align:center;font-weight:700;line-height:1}
.people-group-count{font-size:.76rem;color:var(--ink-soft);background:rgba(0,0,0,.05);border-radius:999px;padding:2px 10px}
.people-group .people-grid{margin-top:12px}
.people-more{font-size:.85rem;color:var(--ink-soft);text-align:center;margin:14px 0 4px}

/* ============ PERSON PHOTOS + GRIOT ============ */
.person-photo-field{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.person-photo-preview{width:96px;height:96px;border-radius:50%;overflow:hidden;background:#ece2d4;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.person-photo-preview img{width:100%;height:100%;object-fit:cover;display:block}
.person-photo-preview .pp-empty{font-size:.72rem;color:var(--ink-soft);text-align:center;padding:0 8px}
.person-photo-actions{display:flex;gap:10px;flex-wrap:wrap}
.person-portrait{width:120px;height:120px;border-radius:50%;overflow:hidden;border:3px solid var(--gold);margin:0 0 16px;background:#ece2d4}
.person-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.griot-badge{display:inline-block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--gold-deep);background:rgba(201,162,74,.12);border:1px solid rgba(201,162,74,.4);border-radius:999px;padding:5px 14px;margin:0 0 12px}
.person-card.has-thumb{display:flex;align-items:center;gap:11px;text-align:left}
.person-card-thumb{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid var(--line)}
.person-card-text{display:flex;flex-direction:column;min-width:0}

/* ============ FAMILY HOME — start with you, expand outward ============ */
.link-btn{background:none;border:none;padding:0;font:inherit;color:var(--gold-deep);text-decoration:underline;cursor:pointer}
.fh-back{background:none;border:none;color:var(--gold-deep);font-size:.9rem;font-weight:600;cursor:pointer;padding:0;margin:0 0 16px}

.fh-hero{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;background:none;border:none;cursor:pointer;margin:8px 0 24px}
.fh-hero-photo{width:104px;height:104px;border-radius:50%;overflow:hidden;border:3px solid var(--gold);background:#ece2d4;display:flex;align-items:center;justify-content:center}
.fh-hero-photo img{width:100%;height:100%;object-fit:cover}
.fh-hero-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.9rem;color:var(--ink);line-height:1.1;margin-top:6px}
.fh-hero-role{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--gold-deep)}
.fh-hero-empty{text-align:center;background:var(--paper);border:1px dashed var(--line);border-radius:14px;padding:24px 20px;margin:8px 0 24px}
.fh-hero-empty p{margin:0 0 12px;color:var(--ink-soft)}
.fh-hint{font-size:.85rem;color:var(--ink-soft);line-height:1.5;margin:10px 0 0}
.fa-initial{font-family:'Cormorant Garamond',Georgia,serif;font-size:2rem;color:var(--gold-deep)}

.fh-glance{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 28px}
.fh-stat{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 8px;text-align:center}
.fh-stat-n{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.7rem;color:var(--ink);line-height:1}
.fh-stat-l{display:block;font-size:.68rem;letter-spacing:.04em;color:var(--ink-soft);margin-top:5px;text-transform:uppercase}
@media (max-width:560px){.fh-glance{grid-template-columns:repeat(2,1fr)}}

.fh-section{margin:0 0 30px}
.fh-h{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.4rem;color:var(--ink);margin:0 0 14px;font-weight:600}

.fc-row{margin:0 0 18px}
.fc-row-label{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--gold-deep);margin-bottom:10px}
.fc-avatars{display:flex;gap:16px;overflow-x:auto;padding-bottom:4px}
.family-avatar{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px;width:74px;flex-shrink:0}
.fa-photo{width:62px;height:62px;border-radius:50%;overflow:hidden;border:2px solid var(--line);background:#ece2d4;display:flex;align-items:center;justify-content:center}
.fa-photo img{width:100%;height:100%;object-fit:cover}
.fa-photo .fa-initial{font-size:1.5rem}
.fa-name{font-size:.78rem;color:var(--ink);line-height:1.25;text-align:center}

.fh-branches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.fh-branch{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;text-align:left}
.fh-branch:hover{border-color:var(--gold)}
.fh-branch-tree{font-size:1.2rem}
.fh-branch-name{flex:1;font-weight:600;color:var(--ink)}
.fh-branch-count{font-size:.74rem;color:var(--ink-soft);background:rgba(0,0,0,.05);border-radius:999px;padding:2px 9px}

.fh-explore{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.fh-explore-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px;cursor:pointer;text-align:left}
.fh-explore-card:hover{border-color:var(--gold)}
.fhe-icon{font-size:1.4rem}
.fhe-label{font-weight:600;color:var(--ink)}
.fhe-sub{font-size:.74rem;color:var(--ink-soft)}

/* ============ SEARCH-BASED RELATIONSHIP PICKERS ============ */
.lp-selected{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.lp-selected:empty{display:none}
.lp-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(201,162,74,.14);border:1px solid rgba(201,162,74,.4);border-radius:999px;padding:5px 6px 5px 13px;font-size:.9rem;color:var(--ink)}
.lp-chip button{background:rgba(0,0,0,.06);border:none;border-radius:50%;width:20px;height:20px;cursor:pointer;color:var(--ink-soft);font-size:.9rem;line-height:1;display:flex;align-items:center;justify-content:center}
.lp-chip button:hover{background:rgba(0,0,0,.12)}
.lp-search{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:#fffdf8;font-size:.95rem;color:var(--ink)}
.lp-search:focus{border-color:var(--gold-deep);outline:none}
.lp-results{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.lp-results:empty{display:none}
.lp-result{text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:10px 13px;cursor:pointer;font-size:.92rem;color:var(--ink)}
.lp-result:hover{border-color:var(--gold);background:#fff}
.lp-nick{color:var(--ink-soft)}
.lp-none{font-size:.85rem;color:var(--ink-soft);padding:8px 2px}

/* ============ PROFILE COMPLETION METER ============ */
.profile-meter{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:0 0 22px}
.profile-meter:empty{display:none}
.pm-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.pm-name{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.25rem;color:var(--ink);line-height:1}
.pm-pct{font-size:.8rem;font-weight:700;color:var(--gold-deep);white-space:nowrap}
.pm-bar{height:8px;border-radius:999px;background:rgba(0,0,0,.07);overflow:hidden}
.pm-bar span{display:block;height:100%;background:var(--gold);border-radius:999px;transition:width .3s ease}
.pm-next{font-size:.82rem;color:var(--ink-soft);margin:9px 0 0;line-height:1.5}
.pm-done{color:var(--green,#3a8266)}

/* ============ ROOM PRIMARY ACTION + GUIDED EMPTY STATE ============ */
.room-cta{margin:6px 0 26px}
.empty-invite{text-align:center;max-width:520px;margin:14px auto 0;padding:30px 26px;background:var(--paper);border:1px solid var(--line);border-radius:16px}
.ei-lead{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.5rem;color:var(--ink);margin:0 0 18px;line-height:1.3}
.ei-examples{list-style:none;padding:0;margin:0 auto 24px;text-align:left;display:inline-block}
.ei-examples li{position:relative;padding:6px 0 6px 22px;color:var(--ink-soft);font-size:.96rem;line-height:1.5}
.ei-examples li::before{content:'\2014';position:absolute;left:0;color:var(--gold-deep)}
.ei-foot{font-size:.85rem;color:var(--ink-soft);margin:20px 0 0;line-height:1.55}

/* ============ BRANCHES — the living tree ============ */
.branch-tree{width:100%;height:auto;display:block;margin:14px auto 4px;max-width:760px}
.bt-trunk{fill:#6b4a2f}
.bt-trunk-label{fill:#4a3220;font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;font-weight:600}
.bt-limb{fill:none;stroke:#7c5a3a;stroke-width:7;stroke-linecap:round}
.bt-branch{cursor:pointer}
.bt-branch:focus{outline:none}
.bt-foliage{fill:#3a8266;transition:fill .15s}
.bt-foliage2{fill:#46916f;opacity:.85}
.bt-branch:hover .bt-foliage{fill:#46916f}
.bt-branch:focus .bt-foliage{stroke:#C9A24A;stroke-width:3}
.bt-name{fill:#fff;font-family:'Cormorant Garamond',Georgia,serif;font-size:15px;font-weight:600;pointer-events:none}
.bt-count{fill:#e6f0ea;font-size:10px;letter-spacing:.3px;pointer-events:none}
.bt-root{fill:none;stroke:#6b4a2f;stroke-width:4;stroke-linecap:round;opacity:.65}
.bt-roots{cursor:pointer}
.bt-roots-label{fill:#6b4a2f;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.bt-roots:hover .bt-roots-label{fill:#C9A24A}

.branch-jump{margin:18px 0 0;text-align:center}
.bj-label{display:block;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}
.branch-jump-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.bj-chip{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 8px 7px 15px;font-size:.9rem;color:var(--ink);cursor:pointer}
.bj-chip:hover{border-color:var(--gold)}
.bj-count{font-size:.72rem;color:var(--ink-soft);background:rgba(0,0,0,.05);border-radius:999px;padding:2px 9px}

/* ============ HERITAGE STYLES — the room takes on the family's character ============ */
/* Each style re-tints the shared palette variables, so every screen reskins at once.
   Backgrounds stay light enough that ink text never loses contrast. */
body[data-heritage="sunday-best"]{
  --cream:#f7f0e6; --cream-deep:#ece0cf; --paper:#fcf6ee;
  --ink:#2c151a; --ink-soft:#5e3d43;
  --gold:#8f3140; --gold-deep:#6f2531; --green:#b3923f; --green-deep:#8f7330;
  --line:rgba(44,21,26,.16); --line-soft:rgba(44,21,26,.08);
}
body[data-heritage="family-reunion"]{
  --cream:#fdf5e6; --cream-deep:#f6e7c9; --paper:#fffaf0;
  --ink:#283117; --ink-soft:#4c5532;
  --gold:#e0892a; --gold-deep:#bf6d14; --green:#4c9d55; --green-deep:#3a7d42;
  --line:rgba(40,49,23,.15); --line-soft:rgba(40,49,23,.08);
}
body[data-heritage="harlem"]{
  --cream:#f4ecd8; --cream-deep:#e7d9b8; --paper:#faf3e2;
  --ink:#10271e; --ink-soft:#3a5247;
  --gold:#c79a2e; --gold-deep:#a87f1e; --green:#0f5c43; --green-deep:#0a4632;
  --line:rgba(16,39,30,.18); --line-soft:rgba(16,39,30,.08);
}
body[data-heritage="gullah"]{
  --cream:#eaecec; --cream-deep:#d8ddda; --paper:#f4f5f2;
  --ink:#172a3a; --ink-soft:#42566b;
  --gold:#2f4f7a; --gold-deep:#243d5e; --green:#6f8f5a; --green-deep:#577044;
  --line:rgba(23,42,58,.16); --line-soft:rgba(23,42,58,.08);
}
body[data-heritage="hbcu"]{
  --cream:#f6f1e8; --cream-deep:#e9dec9; --paper:#fbf7ef;
  --ink:#10203f; --ink-soft:#3a4a6b;
  --gold:#a01f2e; --gold-deep:#7e1824; --green:#c6981f; --green-deep:#a37c14;
  --line:rgba(16,32,63,.16); --line-soft:rgba(16,32,63,.08);
}
body[data-heritage="quilt-kitchen"]{
  --cream:#f6efe2; --cream-deep:#ead9c4; --paper:#fdf8ee;
  --ink:#3a241c; --ink-soft:#5e4438;
  --gold:#b23b2e; --gold-deep:#8f2c21; --green:#3f6d8c; --green-deep:#315572;
  --line:rgba(58,36,28,.16); --line-soft:rgba(58,36,28,.08);
}

/* Heritage Style picker */
.heritage-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:20px}
.heritage-card{display:flex;flex-direction:column;gap:9px;text-align:left;background:var(--paper);border:1.5px solid var(--line);border-radius:16px;padding:17px;cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s}
.heritage-card:hover{transform:translateY(-2px);border-color:var(--gold)}
.heritage-card.is-current{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset}
.hc-swatches{display:flex;gap:6px}
.hc-sw{width:30px;height:30px;border-radius:8px;border:1px solid rgba(0,0,0,.12)}
.hc-name{font-family:var(--serif);font-size:1.28rem;color:var(--ink);display:flex;align-items:center;gap:8px;line-height:1.1}
.hc-badge{font-family:var(--sans);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;background:var(--gold);color:#fff;border-radius:999px;padding:3px 8px;font-weight:700}
.hc-blurb{font-size:.86rem;color:var(--ink-soft);line-height:1.45}

/* ============ BRANCH PERSONALITY ============ */
.branch-motto{font-family:var(--serif);font-size:1.55rem;font-style:italic;color:var(--gold-deep);margin:4px 0 16px;line-height:1.3;max-width:640px}
.branch-personalize{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:.85rem;color:var(--ink);cursor:pointer;margin:0 0 10px;font-weight:600;transition:border-color .15s}
.branch-personalize:hover{border-color:var(--gold)}
.bstyle-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.opt{color:var(--ink-soft);font-weight:400;font-size:.85em}

/* ============ BRANCH FEATURED TRIO ============ */
.bf-help{font-size:.86rem;color:var(--ink-soft);margin:0 0 14px;line-height:1.5}
.field select{width:100%;padding:13px 14px;border:1.5px solid var(--line-soft);border-radius:10px;background:var(--paper);font-size:1rem;color:var(--ink);font-family:var(--sans)}
.bft-band{margin:16px 0 26px}
.bft-head{display:block;margin:0 0 14px}
.bft-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.bft-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;cursor:pointer;transition:transform .15s,border-color .15s}
.bft-card:hover{transform:translateY(-2px);border-color:var(--gold)}
.bft-kicker{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);font-weight:700}
.bft-portrait{width:64px;height:64px;border-radius:50%;background-size:cover;background-position:center;background-color:var(--cream-deep);display:flex;align-items:center;justify-content:center}
.bft-mono{font-family:var(--serif);font-size:1.7rem;color:var(--gold-deep)}
.bft-img{width:100%;height:120px;border-radius:10px;background-size:cover;background-position:center;background-color:var(--cream-deep)}
.bft-storyicon{font-size:1.8rem}
.bft-name{font-family:var(--serif);font-size:1.15rem;color:var(--ink);line-height:1.2}
.bft-sub{font-size:.85rem;color:var(--ink-soft);line-height:1.4}
.bft-empty{display:block;width:100%;text-align:left;background:none;border:1px dashed var(--line);border-radius:14px;padding:16px;color:var(--ink-soft);font-size:.9rem;cursor:pointer;margin:0 0 22px;transition:border-color .15s,color .15s}
.bft-empty:hover{border-color:var(--gold);color:var(--ink)}

/* ============ TRIBUTE — celebrate a life, never gray ============ */
.tribute-banner{position:relative;overflow:hidden;border-radius:20px;padding:32px 28px;margin:0 0 24px;text-align:center;
  background:linear-gradient(135deg,var(--tb-bg1),var(--tb-bg2));color:var(--tb-ink)}
.tribute-banner[data-tone="memory"]{--tb-bg1:#f7efe0;--tb-bg2:#ecdcbd;--tb-ink:#3a2f1a;--tb-accent:#a8842f}
.tribute-banner[data-tone="rose"]{--tb-bg1:#fbeef0;--tb-bg2:#f1d3da;--tb-ink:#5a2a33;--tb-accent:#b5566b}
.tribute-banner[data-tone="service"]{--tb-bg1:#1c2a45;--tb-bg2:#101b30;--tb-ink:#ede3c8;--tb-accent:#cfa64a}
.tribute-banner[data-tone="garden"]{--tb-bg1:#fbf2d2;--tb-bg2:#e8d893;--tb-ink:#3f3a17;--tb-accent:#c0871a}
.tribute-banner[data-tone="faith"]{--tb-bg1:#f1eafa;--tb-bg2:#e0d2f0;--tb-ink:#372a4a;--tb-accent:#7c5ca8}
.tribute-banner[data-tone="celebration"]{--tb-bg1:#fdeed6;--tb-bg2:#f6d2a4;--tb-ink:#4a2f12;--tb-accent:#d77f1f}
.tb-motif{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:.13;pointer-events:none;color:var(--tb-accent)}
.tb-motif svg{width:min(420px,92%);height:92%}
.tb-kicker{position:relative;display:block;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--tb-accent)}
.tb-line{position:relative;font-family:var(--serif);font-size:1.75rem;line-height:1.32;font-style:italic;margin:12px auto 6px;max-width:560px}
.tb-span{position:relative;font-family:var(--serif);font-size:1.1rem;opacity:.85;margin:0 0 10px;letter-spacing:.04em}
.tb-detail{position:relative;font-size:.93rem;line-height:1.55;margin:6px auto 0;max-width:520px}
.tb-detail b{color:var(--tb-accent);letter-spacing:.04em}

/* ============ HERITAGE TEXTURES — each style carries its material ============ */
body[data-heritage="sunday-best"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30'%3E%3Cg fill='none' stroke='rgba(120,45,55,.07)' stroke-width='1'%3E%3Cpath d='M-30 30 A30 30 0 0 1 30 30'/%3E%3Cpath d='M0 30 A30 30 0 0 1 60 30'/%3E%3Cpath d='M30 30 A30 30 0 0 1 90 30'/%3E%3C/g%3E%3C/svg%3E");background-size:60px 30px}
body[data-heritage="family-reunion"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg fill='rgba(120,90,30,.05)'%3E%3Crect width='16' height='16'/%3E%3Crect x='16' y='16' width='16' height='16'/%3E%3C/g%3E%3C/svg%3E");background-size:32px 32px}
body[data-heritage="harlem"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='rgba(16,70,52,.07)' stroke-width='1'%3E%3Cpath d='M0 20 L20 0 L40 20'/%3E%3Cpath d='M0 40 L20 20 L40 40'/%3E%3C/g%3E%3C/svg%3E");background-size:40px 40px}
body[data-heritage="gullah"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='rgba(30,55,85,.06)'%3E%3Crect x='0' y='6' width='28' height='6'/%3E%3Crect x='0' y='28' width='28' height='6'/%3E%3Crect x='6' y='0' width='6' height='28'/%3E%3Crect x='28' y='6' width='6' height='28'/%3E%3C/g%3E%3C/svg%3E");background-size:40px 40px}
body[data-heritage="hbcu"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='rgba(16,32,63,.07)' stroke-width='1'%3E%3Cpath d='M20 2 L38 20 L20 38 L2 20 Z'/%3E%3C/g%3E%3C/svg%3E");background-size:40px 40px}
body[data-heritage="quilt-kitchen"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='rgba(120,70,40,.08)' stroke-width='1'%3E%3Crect x='0.5' y='0.5' width='47' height='47'/%3E%3Cpath d='M0 0 L48 48 M48 0 L0 48'/%3E%3Crect x='14' y='14' width='20' height='20'/%3E%3C/g%3E%3C/svg%3E");background-size:48px 48px}

/* ============ PHOTO CORNERS — album-mounted featured photographs ============ */
.bft-img{position:relative}
.bft-img::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:10px;
  background-image:
    linear-gradient(to bottom right, rgba(20,20,20,.28) 0 9px, transparent 9px),
    linear-gradient(to bottom left,  rgba(20,20,20,.28) 0 9px, transparent 9px),
    linear-gradient(to top right,    rgba(20,20,20,.28) 0 9px, transparent 9px),
    linear-gradient(to top left,     rgba(20,20,20,.28) 0 9px, transparent 9px);
  background-position:top left,top right,bottom left,bottom right;
  background-size:20px 20px;background-repeat:no-repeat}

/* ============ MEANING-FIRST PRESERVE WIZARD ============ */
.preserve-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:18px}
.preserve-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px 16px;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s}
.preserve-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:var(--shadow)}
.pcw-sym{width:30px;height:30px;color:var(--gold-deep);margin-bottom:2px}
.pcw-sym svg{width:30px;height:30px;display:block}
.pcw-label{font-family:var(--serif);font-size:1.28rem;color:var(--ink);line-height:1.1}
.pcw-sub{font-size:.82rem;color:var(--ink-soft);line-height:1.4}
.preserve-raw{margin:28px 0 0;padding-top:18px;border-top:1px solid var(--line-soft);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.prr-label{font-size:.82rem;color:var(--ink-soft)}
.preserve-raw button{background:none;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:.85rem;color:var(--ink);cursor:pointer;transition:border-color .15s}
.preserve-raw button:hover{border-color:var(--gold)}

/* ============ FAMILY CREST — the meaning-first front door ============ */
.crest{position:relative;text-align:center;padding:36px 24px 6px;margin:0 0 6px}
.crest-tree{display:inline-flex;color:var(--gold-deep);width:54px;height:54px}
.crest-tree svg{width:54px;height:54px}
.crest-eyebrow{display:block;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;margin-top:10px}
.crest-name{font-family:var(--serif);font-size:clamp(2.1rem,6vw,3rem);color:var(--ink);margin:4px 0 20px;line-height:1.04}
.crest-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 36px;margin:0 auto 24px;max-width:660px;min-height:1px}
.crest-stat{display:flex;flex-direction:column;align-items:center;min-width:78px}
.cs-n{font-family:var(--serif);font-size:2.1rem;color:var(--gold-deep);line-height:1}
.cs-l{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-top:5px}
.crest-creed{font-family:var(--serif);font-size:1.22rem;font-style:italic;color:var(--ink-soft);line-height:1.5;margin:0 auto;max-width:540px}
.crest-begin{color:var(--ink-soft);font-size:.95rem;margin:0}
.crest::after{content:'';display:block;width:64px;height:1px;background:var(--gold);opacity:.5;margin:26px auto 0}

/* ============ LEAVES & SEASONS — every life a leaf ============ */
.leaf-canopy{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:6px 0 0;padding:18px;background:var(--paper);border:1px solid var(--line-soft);border-radius:18px}
.leaf{width:30px;height:30px;border:none;padding:0;cursor:pointer;border-radius:0 100% 0 100%;transform:rotate(45deg);display:inline-flex;align-items:center;justify-content:center;transition:filter .15s,box-shadow .15s}
.leaf:hover{filter:brightness(1.08);box-shadow:0 0 0 2px var(--gold)}
.leaf-i{transform:rotate(-45deg);font-size:.62rem;font-weight:700;line-height:1}
.leaf-living{background:#3a8266}
.leaf-living .leaf-i{color:rgba(255,255,255,.92)}
.leaf-passed{background:#C9A24A}
.leaf-passed .leaf-i{color:rgba(20,20,20,.55)}
.leaf-young{background:#7bbf5a}
.leaf-young .leaf-i{color:rgba(20,20,20,.6)}
.leaf-more{font-size:.85rem;color:var(--ink-soft);margin:12px 0 0;text-align:center}
.leaf-legend{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;margin:16px 0 0;font-size:.8rem;color:var(--ink-soft)}
.leaf-legend span{display:inline-flex;align-items:center;gap:7px}
.leaf-legend .ldot{width:12px;height:12px;border-radius:0 100% 0 100%;transform:rotate(45deg);display:inline-block}
.ldot.living{background:#3a8266}
.ldot.passed{background:#C9A24A}
.ldot.young{background:#7bbf5a}
.leaf-creed{font-family:var(--serif);font-style:italic;font-size:1.12rem;color:var(--ink-soft);line-height:1.55;text-align:center;margin:18px auto 0;max-width:560px}
/* Biological Lineage — each parent clickable, with its own actions */
.pf-parents{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.pf-parent-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 11px;background:var(--paper,#fbf6ea);border:1px solid var(--line-soft,rgba(107,68,35,.14));border-radius:12px}
.pf-parent-main{display:flex;align-items:baseline;gap:9px;background:none;border:none;cursor:pointer;text-align:left;padding:0;flex:1 1 auto;min-width:0}
.pf-parent-name{font-family:var(--serif);font-size:1.06rem;color:var(--ink-walnut,#2c1a0e);font-weight:600}
.pf-parent-main:hover .pf-parent-name{text-decoration:underline;text-decoration-color:rgba(201,162,74,.6)}
.pf-parent-dates{font-size:.8rem;color:#9a7a2e;font-variant-numeric:tabular-nums;white-space:nowrap}
.pf-parent-acts{display:flex;gap:6px;flex-wrap:wrap}
.pf-act{font-size:.72rem;font-weight:600;color:var(--baobab-brown,#6b4423);background:rgba(201,162,74,.12);border:1px solid rgba(201,162,74,.3);border-radius:20px;padding:3px 11px;cursor:pointer;transition:background .14s,border-color .14s}
.pf-act:hover{background:rgba(201,162,74,.22);border-color:rgba(201,162,74,.5)}
.pf-act-danger{color:#a14a32;background:rgba(168,74,50,.08);border-color:rgba(168,74,50,.28)}
.pf-act-danger:hover{background:rgba(168,74,50,.16);border-color:rgba(168,74,50,.45)}
/* Branch leaves: lead with people you recognize, then the wider canopy */
.leaf-band-label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9a7a2e;margin:6px 0 9px}
.leaf-band-rest{margin-top:22px}
.leaf-close{margin:4px 0 2px}
.leaf-named-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.leaf-named{display:flex;align-items:center;gap:11px;text-align:left;background:var(--paper,#fbf6ea);border:1px solid var(--line-soft,rgba(107,68,35,.16));border-radius:14px;padding:10px 13px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .12s}
.leaf-named:hover{border-color:var(--gold,#C9A24A);box-shadow:0 4px 14px rgba(201,162,74,.16)}
.leaf-named:active{transform:translateY(1px)}
.ln-leaf{flex:0 0 auto;width:26px;height:26px;border:none;border-radius:0 100% 0 100%;transform:rotate(45deg);display:inline-flex;align-items:center;justify-content:center}
.ln-leaf .leaf-i{transform:rotate(-45deg)}
.ln-id{min-width:0}
.ln-id b{display:block;font-family:var(--serif);font-size:1.04rem;color:var(--ink-walnut,#2c1a0e);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ln-meta{display:flex;align-items:center;gap:7px;margin-top:1px}
.ln-rel{font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--gold,#C9A24A);border-radius:20px;padding:1px 7px}
.ln-yr{font-size:.76rem;color:#9a7a2e;font-variant-numeric:tabular-nums}
.leaf-wrap{position:relative;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center}
.leaf-pop{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(5px);min-width:144px;max-width:210px;background:#fffdf7;border:1px solid rgba(201,162,74,.42);border-radius:12px;box-shadow:0 12px 28px -8px rgba(10,6,2,.42);padding:9px 12px;text-align:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s ease,transform .14s ease;z-index:30}
.leaf-wrap:hover .leaf-pop,.leaf-wrap:focus-within .leaf-pop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.leaf-pop b{display:block;font-family:var(--serif);font-size:1rem;color:var(--ink-walnut,#2c1a0e);line-height:1.25}
.leaf-pop .lp-yr{display:block;font-size:.74rem;color:#9a7a2e;font-variant-numeric:tabular-nums;margin-top:1px}
.leaf-pop .lp-st{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#6b6157;margin-top:5px}
.leaf-pop .lp-cta{display:block;font-size:.74rem;font-weight:600;color:#a85a32;margin-top:6px}

/* ============ THE FAMILY TRUNK ============ */
.trunk-group-label{display:block;margin:32px 0 14px}
.trunk-group-label:first-child{margin-top:8px}
.trunk-empty-body{font-size:.95rem;color:var(--ink-soft);line-height:1.6;max-width:480px;margin:0 auto 22px}
.trunk-invite .ei-lead{font-size:1.6rem}

/* ============ THE FAMILY PLAYBOOK ============ */
.playbook-creed{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--gold-deep);line-height:1.55;max-width:600px;margin:14px 0 6px;padding:0 0 0 16px;border-left:2px solid var(--gold)}
.playbook-h{display:block;margin:38px 0 4px;font-size:.8rem}
.playbook-intro{color:var(--ink-soft);font-size:.92rem;line-height:1.5;margin:0 0 16px;max-width:560px}

/* ============ OUR ROOTS — there, and here ============ */
.origins-intro{color:var(--ink-soft);font-size:.92rem;line-height:1.5;margin:2px 0 16px;max-width:520px}
.origins-creed{font-family:var(--serif);font-style:italic;font-size:1.18rem;color:var(--gold-deep);line-height:1.55;text-align:center;margin:20px auto 4px;max-width:520px}
.origins-rooted{border:1.5px solid var(--green);background:rgba(58,130,102,.08);border-radius:14px;padding:12px 18px;text-align:center}
.origins-rooted-icon{font-size:1.4rem;display:block;line-height:1}
.origins-rooted-tag{display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green-deep);font-weight:700;margin-top:3px}

/* ============ BRANCHES — living stage upgrade ============ */
.branch-statbar{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;margin:4px 0 16px}
.b-stat{text-align:center;min-width:84px}
.b-stat b{display:block;font-family:var(--serif);font-size:2rem;color:var(--gold-deep);line-height:1}
.b-stat span{font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft)}
.branch-stage{position:relative;overflow:hidden;border-radius:24px;border:1px solid var(--line-soft);background:linear-gradient(180deg,#f7e7c4 0%,#f4e8d2 45%,#edefde 100%);margin:6px 0 4px}
.branch-sun{position:absolute;top:24px;right:9%;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(255,226,145,.9),rgba(255,226,145,0) 68%);pointer-events:none}
.branch-stage .branch-tree{max-width:none;margin:0;position:relative}
.bt-leaf-shape{stroke:rgba(255,255,255,.18);stroke-width:2;transition:filter .15s}
.bt-branch:hover .bt-leaf-shape{filter:brightness(1.09)}
.bt-branch:focus{outline:none}
.bt-branch:focus .bt-leaf-shape{stroke:var(--gold);stroke-width:3.5}
.branch-stage .bt-name{font-size:16px}
.branch-stage .bt-trunk-label{font-size:18px}

/* ============ BRANCH PERSONALITY CARDS ============ */
.branch-cards-h{display:block;margin:30px 0 14px}
.branch-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.bx-card{position:relative;overflow:hidden;border:none;border-radius:22px;min-height:210px;padding:0;cursor:pointer;text-align:left;background-color:var(--cream-deep);box-shadow:var(--shadow);display:block;transition:transform .15s}
.bx-card:hover{transform:translateY(-3px)}
.bx-card::before{content:'';position:absolute;inset:0;background:linear-gradient(transparent 28%,rgba(0,0,0,.74));pointer-events:none}
.bx-body{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;min-height:210px;padding:18px;gap:6px}
.bx-name{font-family:var(--serif);font-size:1.7rem;color:#fff;margin:0;line-height:1.05}
.bx-motto{color:rgba(255,255,255,.92);font-style:italic;font-family:var(--serif);font-size:1.02rem;margin:0;line-height:1.25}
.bx-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.bx-pills span{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:999px;padding:5px 10px;font-size:.72rem;font-weight:700}

/* ============ FAMILY STORIES — rooms + front porch ============ */
.stories-actions{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 8px}
.sr-h{display:block;margin:26px 0 12px}
.story-rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:0 0 8px}
.sr-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:15px;cursor:pointer;text-align:left;transition:border-color .15s,transform .15s}
.sr-card:hover{transform:translateY(-2px);border-color:var(--gold)}
.sr-card.sr-active{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset}
.sr-icon{font-size:1.5rem;line-height:1}
.sr-name{font-family:var(--serif);font-size:1.14rem;color:var(--ink);line-height:1.1}
.sr-count{font-size:.74rem;color:var(--ink-soft);font-weight:700}
.porch{background:linear-gradient(135deg,var(--green-deep),#1c2d24);border-radius:24px;padding:30px;margin:30px 0 4px;color:#f3ead9;position:relative;overflow:hidden}
.porch:after{content:'';position:absolute;right:14px;bottom:-26px;width:150px;height:150px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23f3ead9'%20stroke-width='1.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9.4%2021%20C9.2%2017%209%2014.3%2010.2%2012.4%20H13.8%20C15%2014.3%2014.8%2017%2014.6%2021%20Z'/%3E%3Cpath%20d='M9.8%2021%20H14.2'/%3E%3Cpath%20d='M12%2012.4%20V8.3'/%3E%3Cpath%20d='M12%209.4%20C9.8%207.5%206.8%207%204.1%206.9'/%3E%3Cpath%20d='M12%209.4%20C14.2%207.5%2017.2%207%2019.9%206.9'/%3E%3Cpath%20d='M12%2010.5%20C10%209.1%208%208.7%206%209'/%3E%3Cpath%20d='M12%2010.5%20C14%209.1%2016%208.7%2018%209'/%3E%3Cpath%20d='M12%208.5%20C11.2%206.9%2011.2%205.7%2012%204.3'/%3E%3Cpath%20d='M4.1%206.9%20l-1.3-.4%20M4.1%206.9%20l-.4-1.3%20M4.1%206.9%20l-1%20.7'/%3E%3Cpath%20d='M19.9%206.9%20l1.3-.4%20M19.9%206.9%20l.4-1.3%20M19.9%206.9%20l1%20.7'/%3E%3Cpath%20d='M6%209%20l-1-.8%20M18%209%20l1-.8'/%3E%3Cpath%20d='M12%204.3%20l-.8-.7%20M12%204.3%20l.8-.7'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;opacity:.18;pointer-events:none}
.porch-inner{position:relative;z-index:1}
.porch .eyebrow.gold{color:var(--gold)}
.porch-h{font-family:var(--serif);font-size:1.95rem;margin:8px 0 8px;color:#fff;line-height:1.05}
.porch-sub{color:rgba(243,234,217,.86);line-height:1.6;margin:0 0 18px;max-width:520px}
.porch-prompts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.porch-prompt{background:rgba(255,248,236,.94);border:none;border-radius:14px;padding:14px 16px;font-weight:600;color:#3d3027;text-align:left;cursor:pointer;font-family:var(--sans);font-size:.92rem;transition:transform .12s}
.porch-prompt:hover{transform:translateY(-2px)}

/* ============ LEGACY MAP — stats, journey path, place cards, pins ============ */
.map-actions{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 8px}
.map-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px;margin:18px 0 26px}
.map-stat{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:15px 10px;text-align:center}
.map-stat b{display:block;font-family:var(--serif);font-size:1.95rem;color:var(--gold-deep);line-height:1}
.map-stat span{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft);font-weight:700}
.map-journey-path{position:relative;padding:6px 0 10px;margin:0 0 8px}
.map-journey-path::before{content:'';position:absolute;left:50%;top:14px;bottom:14px;width:3px;transform:translateX(-50%);background:linear-gradient(var(--gold),#a95f3f,var(--green));border-radius:5px;opacity:.5}
.js-stop{position:relative;display:grid;grid-template-columns:1fr 54px 1fr;align-items:center;margin:13px 0}
.js-label{border:1px solid var(--line);background:var(--paper);border-radius:18px;padding:12px 15px;cursor:pointer;box-shadow:0 10px 26px rgba(52,38,20,.08)}
.js-label:hover{border-color:var(--gold)}
.js-left .js-label{grid-column:1;text-align:right}
.js-right .js-label{grid-column:3;text-align:left}
.js-dot{grid-column:2;justify-self:center;width:48px;height:48px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem;z-index:1;box-shadow:0 8px 20px rgba(0,0,0,.22)}
.js-label strong{display:block;font-family:var(--serif);font-size:1.4rem;color:var(--ink);line-height:1.05}
.js-label span{display:block;font-size:.76rem;color:var(--ink-soft);margin-top:5px;letter-spacing:.04em}
.map-places-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin:0 0 6px}
.mp-card{display:flex;flex-direction:column;gap:9px;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:18px;text-align:left;cursor:pointer;transition:transform .15s,box-shadow .15s}
.mp-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.mp-tag{align-self:flex-start;border:1px solid var(--line);background:rgba(0,0,0,.03);border-radius:999px;padding:5px 12px;font-size:.7rem;font-weight:700;color:var(--ink-soft)}
.mp-name{font-family:var(--serif);font-size:1.5rem;margin:0;color:var(--ink);line-height:1.05}
.mp-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:2px}
.mp-mini div{background:var(--cream-deep);border-radius:12px;padding:9px 4px;text-align:center;font-size:.62rem;color:var(--ink-soft);line-height:1.3}
.mp-mini b{display:block;font-size:1.05rem;color:var(--ink)}
.mp-open{font-size:.82rem;font-weight:700;color:var(--gold-deep)}
.map-pins{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px;margin:0 0 6px}
.map-pin{display:flex;align-items:center;gap:9px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px 15px;font-family:var(--serif);font-size:1.08rem;color:var(--ink);cursor:pointer;text-align:left;transition:border-color .15s,transform .12s}
.map-pin:hover{border-color:var(--gold);transform:translateY(-2px)}
.map-pin span{font-size:1.25rem}
.map-footer-note{text-align:center;margin:36px 0 4px;color:var(--ink-soft);font-family:var(--serif);font-size:1.55rem;line-height:1.25}
@media (max-width:560px){.map-stats{grid-template-columns:repeat(3,1fr)}.js-label strong{font-size:1.15rem}.map-footer-note{font-size:1.25rem}}

/* ── Land & Legacy (promoted Trunk lens) ─────────────────────────── */
.land-lens-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#241710,#3a2a1d);
  color:var(--paper);
  border:1px solid var(--line);
  border-radius:28px;
  padding:34px 32px;
  margin:6px 0 26px;
  box-shadow:var(--shadow);
}
.land-lens-hero::before{
  content:"LAND & LEGACY";
  position:absolute;right:18px;bottom:-8px;
  font-family:var(--serif);font-size:84px;font-weight:600;letter-spacing:-.02em;
  color:rgba(201,162,74,.10);white-space:nowrap;pointer-events:none;
}
.land-lens-hero .eyebrow.gold{color:var(--gold)}
.land-lens-h{font-family:var(--serif);font-size:clamp(38px,6vw,62px);line-height:.95;margin:10px 0 12px;font-weight:600;letter-spacing:-.02em}
.land-lens-sub{max-width:560px;line-height:1.6;color:#e9ddc6;margin:0 0 22px;position:relative;z-index:1}
.land-lens-actions{display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:1}
.land-lens-hero .btn-ghost{background:rgba(255,255,255,.08);color:var(--paper);border:1px solid rgba(255,255,255,.20)}
@media(max-width:560px){.land-lens-hero{padding:26px 20px}}

/* ══ LIVING TREE (preview 11 comp, on brand tokens) ════════════════ */
#screen-tree .tree-wrap{max-width:1220px}
#screen-tree .kicker{font-family:var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-deep);font-size:.66rem;font-weight:700;margin-bottom:14px}

/* hero */
#screen-tree .tree-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;margin:6px 0 34px}
#screen-tree .tree-h1{font-family:var(--serif);font-weight:600;font-size:clamp(46px,6vw,86px);line-height:.92;letter-spacing:-.03em;margin:8px 0 16px}
#screen-tree .tree-subtitle{font-family:var(--sans);font-size:1.12rem;line-height:1.6;color:var(--ink-soft);max-width:560px;margin:0 0 22px}
#screen-tree .tree-hero-actions{display:flex;flex-wrap:wrap;gap:12px}
#screen-tree .tree-quote-card{position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:32px;box-shadow:var(--shadow)}
#screen-tree .tree-quote-card::before{content:"";position:absolute;inset:auto -46px -64px auto;width:210px;height:210px;border-radius:50%;background:rgba(58,130,102,.12)}
#screen-tree .tree-quote{font-family:var(--serif);font-size:1.7rem;line-height:1.25;margin:0;position:relative;z-index:1}
#screen-tree .tree-quote small{display:block;font-family:var(--sans);font-size:.82rem;color:var(--ink-soft);margin-top:16px;letter-spacing:.04em}

/* museum 3-column */
#screen-tree .museum{display:grid;grid-template-columns:278px 1fr 300px;gap:22px;align-items:start}
#screen-tree .panel{background:var(--paper);border:1px solid var(--line);border-radius:26px;padding:22px;box-shadow:var(--shadow)}

/* centered-person panel */
#screen-tree .tree-person-card{padding:18px;border-radius:20px;background:var(--cream-deep);border:1px solid var(--line-soft);margin-bottom:16px;text-align:center}
#screen-tree .tree-portrait{display:block;width:74px;height:74px;border-radius:50%;margin:0 auto 12px;background-size:cover;background-position:center;border:2px solid var(--gold)}
#screen-tree .tree-portrait-blank{display:grid;place-items:center;font-family:var(--serif);font-size:1.9rem;color:var(--gold-deep);background:#fff7e4}
#screen-tree .tree-person-card b{font-family:var(--serif);font-size:1.4rem;font-weight:600;display:block}
#screen-tree .tree-person-sub{display:block;font-family:var(--sans);font-size:.82rem;color:var(--ink-soft);margin-top:4px}
#screen-tree .tnode-tagrow{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:12px}
#screen-tree .tnode-tag,#screen-tree .tnode-tagrow .tnode-tag{border:1px solid var(--line);background:#f2e6cf;border-radius:999px;padding:6px 10px;font-family:var(--sans);font-size:.7rem;color:#4c3e30}
#screen-tree .tree-stat{display:flex;justify-content:space-between;align-items:baseline;padding:12px 2px;border-bottom:1px solid var(--line-soft);font-family:var(--sans);font-size:.88rem;color:var(--ink-soft)}
#screen-tree .tree-stat strong{font-family:var(--serif);color:var(--ink);font-size:1.25rem}
#screen-tree .tree-open-legacy{width:100%;margin-top:18px}

/* tree stage */
#screen-tree .tree-stage{background:linear-gradient(180deg,var(--paper),rgba(247,239,224,.7));border:1px solid var(--line);border-radius:34px;box-shadow:var(--shadow);padding:24px}
#screen-tree .tree-title{text-align:center;max-width:520px;margin:0 auto 8px;font-family:var(--sans);color:var(--ink-soft);line-height:1.5;font-size:.92rem}
#screen-tree .tree-title strong{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--ink);font-weight:600;margin-bottom:6px}
#screen-tree .tree-art{position:relative;height:640px;margin-top:8px}

/* drawn scaffolding (decorative) */
#screen-tree .trunk{position:absolute;left:50%;top:33%;transform:translateX(-50%);width:54px;height:46%;background:linear-gradient(90deg,#5d3e27,#8a5f39,#4a301f);border-radius:36px 36px 16px 16px;box-shadow:inset -9px 0 22px rgba(0,0,0,.16)}
#screen-tree .branch{position:absolute;height:5px;background:rgba(109,77,50,.32);transform-origin:center;border-radius:999px}
#screen-tree .b1{left:27%;top:30%;width:210px;transform:rotate(-22deg)}
#screen-tree .b2{right:27%;top:30%;width:210px;transform:rotate(22deg)}
#screen-tree .b3{left:31%;top:44%;width:180px;transform:rotate(16deg)}
#screen-tree .b4{right:31%;top:44%;width:180px;transform:rotate(-16deg)}
#screen-tree .b5{left:42%;top:62%;width:120px;transform:rotate(-54deg)}
#screen-tree .b6{right:42%;top:62%;width:120px;transform:rotate(54deg)}
#screen-tree .leaf-cloud{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 28%,#7fae6a,var(--green) 55%,var(--green-deep) 100%);filter:drop-shadow(0 14px 20px rgba(44,100,80,.18));opacity:.9;pointer-events:none}
#screen-tree .c1{width:240px;height:175px;left:6%;top:2%}
#screen-tree .c2{width:280px;height:200px;right:5%;top:2%}
#screen-tree .c3{width:360px;height:240px;left:50%;top:6%;transform:translateX(-50%)}
#screen-tree .roots{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:500px;max-width:88%;height:90px;border-bottom:4px solid rgba(109,77,50,.26);border-radius:0 0 50% 50%;pointer-events:none}
#screen-tree .roots::before,#screen-tree .roots::after{content:"";position:absolute;bottom:18px;width:220px;height:64px;border-bottom:3px solid rgba(109,77,50,.2);border-radius:50%}
#screen-tree .roots::before{left:6px;transform:rotate(10deg)}
#screen-tree .roots::after{right:6px;transform:rotate(-10deg)}

/* people nodes — positioned by data via inline left/top % */
#screen-tree .tnode{position:absolute;transform:translate(-50%,-50%);z-index:5;background:var(--paper);border:1px solid var(--line);box-shadow:0 12px 26px rgba(20,20,20,.14);border-radius:18px;padding:11px 14px;min-width:138px;max-width:178px;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
#screen-tree .tnode:hover{border-color:var(--gold);box-shadow:0 18px 38px rgba(20,20,20,.2)}
/* Lineage breadcrumb — the "you are here" trail up the direct line */
#screen-tree .tree-trail{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px;margin:10px auto 0;max-width:760px;position:relative;z-index:8}
#screen-tree .tree-trail-here{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep,#a8842f);margin-right:4px}
#screen-tree .tree-trail-pill{display:inline-flex;align-items:baseline;gap:5px;background:rgba(247,239,224,.92);border:1px solid var(--line,rgba(107,68,35,.25));border-radius:999px;padding:5px 12px;font:inherit;font-family:var(--sans);font-size:.82rem;font-weight:600;color:#4c3e30;cursor:pointer;transition:border-color .15s,background .15s}
#screen-tree .tree-trail-pill:hover{border-color:var(--gold,#C9A24A);background:#fff}
#screen-tree .tree-trail-pill.is-current{background:var(--baobab-brown,#6b4423);border-color:var(--baobab-brown,#6b4423);color:#fdf8ee}
#screen-tree .tree-trail-yr{font-size:.68rem;font-weight:500;opacity:.7}
#screen-tree .tree-trail-sep{color:var(--gold-deep,#a8842f);font-size:1rem;line-height:1}
/* Node edit pencil — direct edit without leaving exploration */
#screen-tree .tnode-edit{position:absolute;top:6px;right:6px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(247,239,224,.95);border:1px solid var(--line,rgba(107,68,35,.25));color:var(--baobab-brown,#6b4423);font-size:.82rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s,background .15s;z-index:9}
#screen-tree .tnode:hover .tnode-edit,#screen-tree .tnode:focus-within .tnode-edit,#screen-tree .tnode-edit:focus{opacity:1}
#screen-tree .tnode-edit:hover{background:var(--gold2,#E6C878);border-color:var(--gold,#C9A24A)}
@media (hover:none){#screen-tree .tnode-edit{opacity:.85}}
#screen-tree .tnode b{font-family:var(--serif);font-size:1.06rem;font-weight:600;line-height:1.05;display:block}
#screen-tree .tnode span{display:block;font-family:var(--sans);font-size:.72rem;color:var(--ink-soft);line-height:1.4;margin-top:3px}
#screen-tree .tnode.center{z-index:7;border:2px solid var(--gold);background:#fff8e9;min-width:166px}
#screen-tree .tnode.is-enslaver{border-color:var(--red)}
#screen-tree .tnode-conn{color:var(--red)!important;font-weight:600}
#screen-tree .tnode-memory{color:var(--gold-deep)!important}

/* wisdom-leaves */
#screen-tree .wisdom-leaf{position:absolute;transform:translate(-50%,-50%);z-index:6;border-radius:999px;background:#eef4df;border:1px solid rgba(58,130,102,.3);padding:9px 14px;font-family:var(--sans);font-size:.8rem;color:#2c5042;box-shadow:0 10px 22px rgba(44,100,80,.14);max-width:230px}

/* time-rings */
#screen-tree .tree-rings{margin-top:18px;background:var(--cream-deep);border:1px solid var(--line-soft);border-radius:20px;padding:14px 18px;display:flex;gap:10px;justify-content:space-between;align-items:center;font-family:var(--sans);font-size:.78rem;color:var(--ink-soft)}
#screen-tree .tree-rings .year{font-weight:700;color:var(--gold-deep)}

/* what-this-tree-holds legend */
#screen-tree .legacy-list{display:grid;gap:11px}
#screen-tree .legacy-item{padding:14px;border-radius:16px;background:var(--cream-deep);border:1px solid var(--line-soft)}
#screen-tree .legacy-item b{font-family:var(--serif);font-size:1.05rem;display:block;margin-bottom:4px}
#screen-tree .legacy-item p{margin:0;font-family:var(--sans);color:var(--ink-soft);font-size:.8rem;line-height:1.45}

/* bottom feature grid */
#screen-tree .tree-bottom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
#screen-tree .tree-feature{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:var(--shadow)}
#screen-tree .tf-icon{font-size:1.7rem;margin-bottom:8px}
#screen-tree .tree-feature h3{font-family:var(--serif);font-size:1.4rem;font-weight:600;margin:0 0 8px}
#screen-tree .tree-feature p{font-family:var(--sans);color:var(--ink-soft);font-size:.88rem;line-height:1.5;margin:0 0 16px}
#screen-tree .tree-hint{text-align:center;font-family:var(--sans);color:var(--ink-soft);font-size:.86rem;margin-top:16px}

@media (max-width:1050px){
  #screen-tree .tree-hero,#screen-tree .museum,#screen-tree .tree-bottom-grid{grid-template-columns:1fr}
  #screen-tree .tree-art{height:560px}
  #screen-tree .wisdom-leaf{display:none}
  #screen-tree .tnode{min-width:118px;max-width:150px;padding:9px 11px}
  #screen-tree .tnode b{font-size:.96rem}
}

/* ══════════════════════════════════════════════
   ORIGINS & JOURNEY — RICH VISUAL LAYOUT
   ══════════════════════════════════════════════ */

/* Hero */
.oj-hero{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:28px;background:linear-gradient(135deg,var(--paper),var(--cream-deep));box-shadow:var(--shadow);padding:44px;display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center;margin-bottom:36px}
.oj-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(184,134,47,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(184,134,47,.07) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(90deg,transparent,black 12%,black 86%,transparent);pointer-events:none}
.oj-hero-text{position:relative;z-index:1}
.oj-h1{font-family:var(--serif);font-size:2.6rem;line-height:1.05;letter-spacing:-.03em;margin:0 0 14px;color:var(--ink)}
.oj-lead{font-size:1.05rem;line-height:1.75;color:var(--ink-soft);max-width:520px;margin:0}

/* Tree card */
.oj-tree-card{position:relative;border-radius:22px;background:linear-gradient(180deg,var(--paper),var(--cream-deep));border:1px solid var(--line);padding:28px;display:flex;align-items:center;justify-content:center;min-height:300px;overflow:hidden}
.oj-tree-markers{position:absolute;inset:0;pointer-events:none}
.oj-marker{position:absolute;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:.72rem;font-weight:700;box-shadow:0 8px 18px rgba(0,0,0,.1)}
.oj-marker.m1{left:8px;top:18px}.oj-marker.m2{right:6px;top:38px}.oj-marker.m3{left:6px;bottom:60px}.oj-marker.m4{right:10px;bottom:32px}
.oj-tree-svg{width:220px;height:220px}

/* Big quote */
.oj-quote{margin:0 0 36px;border-left:4px solid var(--gold);padding:20px 28px;font-family:var(--serif);font-size:1.9rem;line-height:1.12;background:rgba(255,250,241,.5);border-radius:0 18px 18px 0;color:var(--ink)}

/* Story path cards */
.oj-story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.oj-story-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 10px 24px rgba(52,36,17,.07)}
.oj-story-card .oj-icon{font-size:2rem;margin-bottom:12px}
.oj-story-card h3{font-family:var(--serif);font-size:1.25rem;margin:0 0 8px}
.oj-story-card p{color:var(--ink-soft);line-height:1.6;margin:0;font-size:.92rem}

/* Journey map + timeline */
.oj-journey{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch;margin-top:16px}
.oj-map{min-height:420px;border-radius:26px;border:1px solid var(--line);background:linear-gradient(135deg,var(--cream-deep),var(--paper));position:relative;overflow:hidden;box-shadow:var(--shadow)}
.oj-map::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 25%,rgba(46,91,63,.14),transparent 18%),radial-gradient(circle at 60% 48%,rgba(184,134,47,.13),transparent 20%),radial-gradient(circle at 78% 68%,rgba(155,77,47,.1),transparent 18%)}
.oj-map-path{position:absolute;left:50%;top:52px;width:4px;bottom:52px;background:linear-gradient(var(--gold),var(--green));border-radius:20px}
.oj-map-pin{position:absolute;display:flex;align-items:center;gap:9px;background:rgba(255,250,241,.92);border:1px solid var(--line);border-radius:999px;padding:9px 14px;font-weight:700;font-size:.8rem;box-shadow:0 10px 20px rgba(0,0,0,.09);white-space:nowrap;max-width:calc(50% - 10px)}
.oj-map-pin::before{content:"";width:11px;height:11px;background:var(--gold);border-radius:50%;flex-shrink:0;box-shadow:0 0 0 4px rgba(184,134,47,.18)}
.oj-timeline{display:flex;flex-direction:column;gap:12px}
.oj-stop{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:16px 18px;display:grid;grid-template-columns:58px 1fr;gap:12px;align-items:start}
.oj-stop-num{font-family:var(--serif);font-size:1.6rem;color:var(--gold);font-weight:700;line-height:1}
.oj-stop strong{display:block;margin-bottom:4px;font-size:.98rem}
.oj-stop span{color:var(--ink-soft);font-size:.84rem;line-height:1.5}

/* Inheritance cards */
.oj-inherit-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:16px}
.oj-inherit-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 8px 20px rgba(52,36,17,.06)}
.oj-inherit-card .oj-icon{font-size:1.8rem;margin-bottom:10px}
.oj-inherit-card h3{font-family:var(--serif);font-size:1.1rem;margin:0 0 6px}
.oj-inherit-card p{color:var(--ink-soft);line-height:1.55;margin:0;font-size:.82rem}

/* Stats bar */
.oj-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:16px}
.oj-stat{background:var(--deep);color:white;border-radius:18px;padding:18px 12px;text-align:center}
.oj-stat b{display:block;font-family:var(--serif);font-size:2rem;color:#f0c46b;line-height:1}
.oj-stat span{font-size:.65rem;text-transform:uppercase;letter-spacing:.14em;color:#d9c8ac;display:block;margin-top:4px}

/* Reflection blockquote (replaces old CTA section) */
.oj-reflection{margin-top:0;background:linear-gradient(135deg,var(--deep),#3c2b1b);color:white;border-radius:24px;padding:34px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.oj-reflection h2{font-family:var(--serif);font-size:1.7rem;color:white;margin:0 0 10px}
.oj-reflection p{color:#e9dcc8;line-height:1.65;max-width:600px;margin:0}

/* Section wrapper inside origins screen */
.oj-section{margin-top:38px}
.oj-kicker{color:var(--gold-deep);letter-spacing:.28em;text-transform:uppercase;font-weight:700;font-size:.68rem;margin-bottom:10px;display:block}
.oj-section-h{font-family:var(--serif);font-size:1.7rem;margin:0 0 4px;color:var(--ink)}

/* Edit button row */
.oj-edit-row{margin-top:28px;display:flex;justify-content:flex-end}

/* Responsive */
@media(max-width:880px){
  .oj-hero{grid-template-columns:1fr;padding:28px}
  .oj-h1{font-size:2rem}
  .oj-journey{grid-template-columns:1fr}
  .oj-story-grid{grid-template-columns:1fr 1fr}
  .oj-inherit-grid{grid-template-columns:1fr 1fr}
  .oj-stats{grid-template-columns:repeat(3,1fr)}
  .oj-quote{font-size:1.5rem}
}
@media(max-width:560px){
  .oj-story-grid,.oj-inherit-grid{grid-template-columns:1fr}
  .oj-stats{grid-template-columns:repeat(2,1fr)}
  .oj-quote{font-size:1.25rem}
  .oj-hero{padding:20px}
  .oj-map{min-height:280px}
  .oj-reflection{display:block}
  .oj-reflection .btn{margin-top:16px}
}

/* ══════════════════════════════════════════════
   TIMELINE HALL — RICH VISUAL LAYOUT
   ══════════════════════════════════════════════ */

/* Hero */
.tl-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:start;margin-bottom:36px}
.tl-hero-text{display:flex;flex-direction:column}
.tl-h1{font-family:var(--serif);font-size:3rem;line-height:.95;margin:10px 0 16px;letter-spacing:-.04em;color:var(--ink)}
.tl-lede{font-size:1.08rem;line-height:1.65;color:var(--ink-soft);max-width:640px;margin:0 0 20px}
.tl-quote{font-family:var(--serif);font-size:1.25rem;line-height:1.4;background:rgba(255,255,255,.3);border-left:4px solid var(--gold);padding:16px 22px;border-radius:0 16px 16px 0;margin:0 0 22px;color:var(--ink)}
.tl-actions{display:flex;gap:12px;flex-wrap:wrap}

/* Album aside */
.tl-album{background:rgba(255,250,241,.75);border:1px solid rgba(184,134,43,.23);border-radius:26px;box-shadow:var(--shadow);padding:24px;position:relative;display:flex;flex-direction:column;gap:14px}
.tl-album .featured-moment{border-radius:18px;background:linear-gradient(135deg,var(--paper),var(--cream-deep));border:1px solid var(--line);padding:20px;cursor:pointer}
.tl-album-empty-p{color:var(--ink-soft);font-size:.9rem;line-height:1.6;margin:0}
.tl-walk-btn{align-self:flex-start;margin-top:auto}

/* Stats */
.tl-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:36px}
.tl-stat{background:rgba(255,250,241,.72);border:1px solid rgba(184,134,43,.22);border-radius:20px;padding:18px;box-shadow:0 16px 36px rgba(54,38,20,.07)}
.tl-num{font-family:var(--serif);font-size:2.2rem;line-height:1;color:var(--ink)}
.tl-label{color:var(--ink-soft);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin-top:4px}

/* Section header */
.tl-section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 28px}
.tl-section-h{font-family:var(--serif);font-size:2.1rem;margin:0 0 6px;letter-spacing:-.03em}
.tl-section-sub{margin:0;color:var(--ink-soft);max-width:560px;line-height:1.55;font-size:.92rem}

/* Timeline track */
.tl-timeline{position:relative;padding:28px 0 8px}
.tl-timeline::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;background:linear-gradient(var(--gold),var(--line),var(--gold));border-radius:10px;transform:translateX(-50%)}

/* Era rows */
.tl-era{display:grid;grid-template-columns:1fr 90px 1fr;gap:20px;align-items:center;margin:0 0 28px}
.tl-era-left .tl-card{grid-column:1;grid-row:1}
.tl-era-left .tl-year{grid-column:2;grid-row:1}
.tl-era-left .tl-empty{grid-column:3;grid-row:1}
.tl-era-right .tl-empty{grid-column:1;grid-row:1}
.tl-era-right .tl-year{grid-column:2;grid-row:1}
.tl-era-right .tl-card{grid-column:3;grid-row:1}

/* Year bubble */
.tl-year{font-family:var(--serif);font-size:1.65rem;text-align:center;color:var(--gold-deep);font-weight:700;background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:14px 6px;z-index:2;line-height:1}

/* Era card */
.tl-card{background:rgba(255,250,241,.84);border:1px solid rgba(184,134,43,.24);border-radius:22px;padding:22px;box-shadow:var(--shadow);cursor:pointer;transition:transform .15s,box-shadow .15s;position:relative}
.tl-card:hover{transform:translateY(-2px);box-shadow:0 28px 60px rgba(54,38,20,.16)}
.tl-era-left .tl-card::after{content:"";position:absolute;width:15px;height:15px;border-radius:50%;background:var(--ink);border:4px solid var(--gold2);top:50%;right:-53px;transform:translateY(-50%)}
.tl-era-right .tl-card::before{content:"";position:absolute;width:15px;height:15px;border-radius:50%;background:var(--ink);border:4px solid var(--gold2);top:50%;left:-53px;transform:translateY(-50%)}
.tl-tag{display:inline-flex;border:1px solid rgba(184,134,43,.28);background:var(--cream);border-radius:999px;padding:6px 12px;font-size:.72rem;font-weight:800;color:var(--brown);margin-bottom:10px;letter-spacing:.04em;text-transform:uppercase}
.tl-card-h{font-family:var(--serif);font-size:1.45rem;margin:0 0 8px;color:var(--ink)}
.tl-card-p{margin:0 0 12px;color:var(--ink-soft);line-height:1.55;font-size:.9rem}
.tl-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.tl-pill{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:.75rem;color:var(--ink-soft);font-weight:600}

/* Undated items */
.tl-undated{margin-top:36px}
.tl-undated-h{display:block;margin-bottom:14px}

/* Bottom grid */
.tl-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
.tl-panel{background:rgba(255,250,241,.75);border:1px solid rgba(184,134,43,.22);border-radius:22px;padding:24px;box-shadow:0 16px 36px rgba(54,38,20,.07)}
.tl-panel-h{font-family:var(--serif);font-size:1.6rem;margin:8px 0 10px}
.tl-panel-p{color:var(--ink-soft);line-height:1.6;margin:0 0 18px;font-size:.92rem}
.tl-prompts{display:flex;flex-wrap:wrap;gap:10px}
.tl-prompt{border:1px solid var(--line);background:var(--cream-deep);border-radius:999px;padding:10px 14px;font-size:.8rem;color:var(--ink-soft)}

/* Responsive */
@media(max-width:880px){
  .tl-hero{grid-template-columns:1fr}
  .tl-h1{font-size:2.2rem}
  .tl-stats{grid-template-columns:1fr 1fr}
  .tl-bottom-grid{grid-template-columns:1fr}
  .tl-timeline::before{left:20px}
  .tl-era,.tl-era-left,.tl-era-right{grid-template-columns:40px 1fr;gap:12px}
  .tl-era-left .tl-card,.tl-era-right .tl-card{grid-column:2;grid-row:1}
  .tl-era-left .tl-year,.tl-era-right .tl-year{grid-column:1;grid-row:1;font-size:1rem;writing-mode:vertical-rl;padding:12px 6px}
  .tl-era-left .tl-empty,.tl-era-right .tl-empty{display:none}
  .tl-era-left .tl-card::after,.tl-era-right .tl-card::before{left:-34px!important;right:auto!important}
}
@media(max-width:560px){
  .tl-stats{grid-template-columns:1fr 1fr}
  .tl-quote{font-size:1.05rem}
}

/* ══════════════════════════════════════════════
   FINANCIAL WISDOM & ENTERPRISE — RICH LAYOUT
   ══════════════════════════════════════════════ */

/* Hero */
.fw-hero{display:grid;grid-template-columns:1.06fr .94fr;gap:32px;align-items:stretch;margin-bottom:32px}
.fw-hero-card{position:relative;overflow:hidden;border:1px solid var(--line);background:linear-gradient(135deg,var(--paper),var(--cream-deep));border-radius:30px;padding:44px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.fw-hero-card::before{content:"";position:absolute;inset:20px;border:1px solid rgba(184,133,37,.2);border-radius:22px;pointer-events:none}
.fw-hero-card>*{position:relative}
.fw-h1{font-family:var(--serif);font-size:3.4rem;line-height:.93;margin:12px 0 18px;letter-spacing:-.045em;color:var(--ink)}
.fw-lead{font-size:1.05rem;line-height:1.75;color:var(--ink-soft);max-width:620px;margin:0 0 26px}
.fw-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:auto}

/* Quote panel */
.fw-quote-panel{border-radius:30px;background:var(--deep);color:#fff;padding:32px;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:space-between;min-height:400px;position:relative;overflow:hidden}
.fw-quote-panel::before{content:"";position:absolute;inset:-80px;background:radial-gradient(circle,rgba(184,133,37,.32),transparent 42%);transform:translate(30%,-12%);pointer-events:none}
.fw-quote-panel>*{position:relative}
.fw-seal{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#d5a044,#7d4e17);font-size:30px;box-shadow:0 16px 30px rgba(0,0,0,.22)}
.fw-quote{font-family:var(--serif);font-size:2.1rem;line-height:1.1;margin:22px 0;font-weight:600;color:#fff}
.fw-sig{color:#e6d5b5;font-size:.88rem;line-height:1.65}

/* Stats */
.fw-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:32px}
.fw-stat{background:rgba(255,250,240,.78);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:0 12px 28px rgba(64,43,23,.08)}
.fw-num{font-family:var(--serif);font-size:2.1rem;font-weight:700;line-height:1;color:var(--brown)}
.fw-label{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin-top:6px}

/* Section header */
.fw-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:40px 0 16px}
.fw-h2{font-family:var(--serif);font-size:2.2rem;line-height:1;margin:0;letter-spacing:-.03em;color:var(--ink)}
.fw-small{color:var(--ink-soft);line-height:1.6;max-width:580px;margin:0;font-size:.9rem}

/* Pillars */
.fw-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:4px}
.fw-pillar{min-height:270px;border:1px solid var(--line);border-radius:26px;background:rgba(255,250,240,.86);padding:24px;box-shadow:0 12px 28px rgba(64,43,23,.08);position:relative;overflow:hidden}
.fw-pillar::after{content:"";position:absolute;right:-30px;bottom:-40px;width:130px;height:130px;border-radius:50%;background:rgba(184,133,37,.08)}
.fw-icon{width:52px;height:52px;border-radius:16px;background:#f1e1c5;display:grid;place-items:center;font-size:26px;margin-bottom:18px}
.fw-pillar-h{font-family:var(--serif);font-size:1.55rem;margin:0 0 8px;color:var(--ink)}
.fw-pillar-p{color:var(--ink-soft);line-height:1.6;margin:0;font-size:.86rem}
.fw-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.fw-tag{font-size:.72rem;border:1px solid var(--line);border-radius:999px;padding:7px 10px;background:var(--cream-deep);color:var(--brown)}

/* Principles + advisors grid */
.fw-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:20px;align-items:start}
.fw-card{border:1px solid var(--line);border-radius:26px;background:rgba(255,250,240,.9);padding:26px;box-shadow:0 12px 28px rgba(64,43,23,.08)}
.fw-principles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}
.fw-principle{border-left:4px solid var(--gold);background:var(--cream-deep);border-radius:14px;padding:14px;font-weight:700;color:var(--ink);line-height:1.45;font-size:.9rem}
.fw-principle-detail{font-weight:400;color:var(--ink-soft)}
.fw-advisors{display:grid;gap:10px;margin-top:14px}
.fw-advisor{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:start;border:1px solid var(--line);border-radius:16px;padding:12px;background:var(--cream-deep)}
.fw-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#ead6b4;color:var(--brown);font-weight:900;font-size:.75rem;text-align:center;flex-shrink:0}
.fw-advisor-label{font-weight:700;font-size:.9rem;color:var(--ink)}
.fw-advisor-detail{font-size:.8rem;color:var(--ink-soft);margin-top:2px;line-height:1.4}

/* Systems */
.fw-systems{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fw-system-card{border-radius:24px;border:1px solid var(--line);background:linear-gradient(180deg,var(--paper),var(--cream-deep));box-shadow:0 12px 28px rgba(64,43,23,.08);overflow:hidden}
.fw-system-top{height:108px;background:linear-gradient(135deg,rgba(184,133,37,.36),rgba(121,133,108,.22));display:flex;align-items:flex-end;padding:16px;font-family:var(--serif);font-size:1.55rem;font-weight:700;color:var(--ink)}
.fw-system-body{padding:18px}
.fw-check{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid rgba(217,200,172,.6);color:var(--ink-soft);font-size:.86rem;line-height:1.4}
.fw-check:last-child{border-bottom:0}
.fw-system-placeholder .fw-system-top{background:linear-gradient(135deg,rgba(184,133,37,.2),rgba(121,133,108,.12))}

/* Letter */
.fw-letter{background:var(--paper);border:1px solid var(--line);border-radius:26px;padding:34px;box-shadow:var(--shadow);position:relative}
.fw-letter::before{content:"";position:absolute;inset:16px;border:1px solid rgba(184,133,37,.16);border-radius:20px;pointer-events:none}
.fw-letter>*{position:relative}
.fw-letter-h{font-family:var(--serif);font-size:2rem;margin:0 0 12px;color:var(--ink)}
.fw-letter-p{font-family:var(--serif);font-size:1.3rem;line-height:1.5;color:#352b23;margin:0 0 18px}
.fw-letter-sig{font-family:var(--serif);font-size:1.1rem;color:var(--ink-soft);margin:0}

/* Footer */
.fw-footer-note{margin-top:36px;text-align:center;color:var(--ink-soft);font-style:italic;font-size:.9rem}

/* Responsive */
@media(max-width:980px){
  .fw-hero,.fw-grid{grid-template-columns:1fr}
  .fw-pillars,.fw-systems{grid-template-columns:repeat(2,1fr)}
  .fw-stats{grid-template-columns:repeat(3,1fr)}
  .fw-h1{font-size:2.6rem}
  .fw-quote-panel{min-height:auto}
}
@media(max-width:640px){
  .fw-hero-card,.fw-quote-panel,.fw-card,.fw-letter{padding:22px;border-radius:22px}
  .fw-pillars,.fw-systems,.fw-principles{grid-template-columns:1fr}
  .fw-stats{grid-template-columns:repeat(2,1fr)}
  .fw-h1{font-size:2rem}
  .fw-quote{font-size:1.6rem}
  .fw-h2{font-size:1.7rem}
}

/* ══════════════════════════════════════════════
   WISDOM — RICH VISUAL LAYOUT
   ══════════════════════════════════════════════ */

/* Hero */
.wis-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:stretch;margin-bottom:30px}
.wis-hero-panel{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:30px;padding:42px;background:linear-gradient(135deg,var(--paper),var(--cream-deep));box-shadow:var(--shadow);display:flex;flex-direction:column}
.wis-hero-panel::before{content:"";position:absolute;right:-80px;top:-100px;width:260px;height:260px;border-radius:50%;background:rgba(181,131,47,.12);border:1px solid rgba(181,131,47,.16);pointer-events:none}
.wis-hero-panel>*{position:relative}
.wis-h1{font-family:var(--serif);font-size:3.2rem;line-height:.93;margin:10px 0 16px;letter-spacing:-.03em;color:var(--ink)}
.wis-lead{font-size:1.05rem;line-height:1.75;color:var(--ink-soft);max-width:640px;margin:0 0 22px}
.wis-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto}

/* Quote card */
.wis-quote-card{border-radius:30px;padding:32px;background:linear-gradient(160deg,#2a1d12,#12100d);color:#fffaf0;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.wis-quote-card::after{content:"?";position:absolute;right:20px;bottom:-44px;font-family:var(--serif);font-size:210px;color:rgba(255,255,255,.05);pointer-events:none;line-height:1}
.wis-quote-card>*{position:relative}
.wis-qc-h{font-family:var(--serif);font-size:2rem;line-height:1.05;margin:0 0 16px;color:#fffaf0}
.wis-qc-p{line-height:1.7;color:#eadfce;margin:0 0 22px;font-size:.92rem}
.wis-mini-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.wis-stat{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.06);border-radius:16px;padding:14px}
.wis-stat strong{display:block;font-family:var(--serif);font-size:1.9rem;line-height:1;color:#f4cf83}
.wis-stat span{font-size:.75rem;color:#d6c6ad}

/* Two-column layout */
#screen-wisdom .room-wrap{max-width:1140px}
#screen-branches .room-wrap{max-width:1180px}
.wis-grid{display:grid;grid-template-columns:1fr 320px;gap:26px;align-items:start}
.wis-main{display:flex;flex-direction:column;gap:0}
.wis-sidebar{position:sticky;top:20px;display:flex;flex-direction:column;gap:20px}

/* Sections */
.wis-section{border:1px solid var(--line);background:rgba(255,249,239,.72);border-radius:26px;padding:26px;box-shadow:0 14px 38px rgba(47,34,18,.07);margin-bottom:22px}
.wis-section-title{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:18px}
.wis-h2{font-family:var(--serif);font-size:2rem;margin:0;line-height:1;color:var(--ink)}
.wis-section-p{margin:0;color:var(--ink-soft);font-size:.86rem;line-height:1.55;max-width:440px}

/* Add input */
.wis-input{width:100%;border:1px solid rgba(61,43,22,.2);background:var(--paper);border-radius:14px;padding:14px 16px;font-size:.98rem;margin-bottom:12px;color:var(--ink);font-family:inherit}
.wis-input:focus{border-color:var(--gold-deep);outline:none}

/* Conversation deck */
.wis-deck{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.wis-qcard{min-height:148px;border-radius:22px;padding:20px;background:var(--paper);border:1px solid var(--line);box-shadow:0 12px 28px rgba(38,27,15,.07);display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:.2s ease;position:relative;overflow:hidden}
.wis-qcard::before{content:"";position:absolute;inset:9px;border:1px solid rgba(181,131,47,.14);border-radius:16px;pointer-events:none}
.wis-qcard:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(38,27,15,.12)}
.wis-qtag{width:max-content;border-radius:999px;background:#f0dfbf;color:#6d4715;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;padding:7px 10px;margin-bottom:12px}
.wis-question{font-family:var(--serif);font-size:1.2rem;line-height:1.18;margin:0;position:relative;z-index:1;color:var(--ink)}
.wis-card-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px;position:relative;z-index:1}
.wis-pill{border:1px solid var(--line);background:var(--cream-deep);border-radius:999px;padding:7px 10px;font-size:.72rem;font-weight:700;color:var(--ink-soft)}

/* Collections */
.wis-collections{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.wis-collection{border-radius:20px;padding:20px;border:1px solid var(--line);background:linear-gradient(135deg,var(--paper),var(--cream-deep))}
.wis-coll-icon{font-size:1.8rem;margin-bottom:8px}
.wis-coll-h{font-family:var(--serif);font-size:1.4rem;margin:0 0 6px;color:var(--ink)}
.wis-coll-p{margin:0;color:var(--ink-soft);font-size:.83rem;line-height:1.55}

/* Woodbox sidebar */
.wis-woodbox{background:linear-gradient(160deg,#442b18,#1b120c);color:#fff6e8;border-radius:26px;padding:26px;box-shadow:var(--shadow);overflow:hidden;position:relative}
.wis-woodbox::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 2px,transparent 2px 12px);opacity:.6;pointer-events:none}
.wis-woodbox>*{position:relative}
.wis-wb-h{font-family:var(--serif);font-size:1.7rem;margin:0 0 10px;color:#fff6e8}
.wis-wb-p{color:#eadbc4;line-height:1.65;margin:0 0 18px;font-size:.88rem}
.wis-waiting{display:grid;gap:0}
.wis-wait-row{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.12);padding:10px 0;font-size:.88rem}
.wis-wait-row:last-child{border-bottom:0}
.wis-wait-row strong{font-family:var(--serif);font-size:1.2rem;color:#f4cf83}

/* Wisdom strip */
.wis-strip{text-align:center;border-radius:22px;padding:28px;background:#1f2a20;color:#fff9ed;box-shadow:var(--shadow)}
.wis-strip-q{font-family:var(--serif);font-size:1.6rem;line-height:1.2;margin:0 0 12px;color:#fff9ed}
.wis-strip-label{display:block;color:#d9c7a7;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase}

/* Responsive */
@media(max-width:940px){
  .wis-hero,.wis-grid{grid-template-columns:1fr}
  .wis-sidebar{position:static}
  .wis-deck{grid-template-columns:1fr}
  .wis-collections{grid-template-columns:1fr}
  .wis-h1{font-size:2.4rem}
  .wis-hero-panel{padding:28px}
}
@media(max-width:560px){
  .wis-h1{font-size:1.9rem}
  .wis-h2{font-size:1.6rem}
  .wis-qc-h{font-size:1.55rem}
}

/* ══════════════════════════════════════════════
   LEGACY MAP — RICH HERO LAYOUT
   ══════════════════════════════════════════════ */

/* Hero */
.lm-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center;margin-bottom:36px}
.lm-hero-text{display:flex;flex-direction:column}
.lm-h1{font-family:var(--serif);font-size:3.6rem;line-height:.92;margin:10px 0 16px;letter-spacing:-.03em;color:var(--ink)}
.lm-lead{font-size:1.06rem;line-height:1.72;color:var(--ink-soft);max-width:600px;margin:0 0 22px}
.lm-actions{display:flex;flex-wrap:wrap;gap:11px}
.lm-btn-light{background:rgba(255,250,240,.75);color:var(--ink);border:1px solid var(--line)}

/* Hero journey card */
.lm-journey-card{background:rgba(255,250,240,.72);border:1px solid var(--line);border-radius:30px;padding:22px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.lm-journey-card::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(184,137,47,.09));pointer-events:none}
.lm-journey-title{font-family:var(--serif);font-size:1.6rem;text-align:center;margin:0 0 18px;color:var(--ink);position:relative}
.lm-journey-empty{text-align:center;padding:20px;color:var(--ink-soft);font-size:.9rem;line-height:1.6}
.lm-journey-inner{position:relative}

/* Hero journey path */
.lm-journey-path{position:relative;padding:6px 12px 14px}
.lm-journey-path::before{content:"";position:absolute;left:50%;top:16px;bottom:20px;width:3px;transform:translateX(-50%);background:linear-gradient(var(--gold),#a95f3f,var(--green));border-radius:5px;opacity:.55}
.lm-js-stop{position:relative;display:grid;grid-template-columns:1fr 50px 1fr;align-items:center;margin:13px 0}
.lm-js-left .lm-js-label{grid-column:1;text-align:right}
.lm-js-left .lm-js-dot{grid-column:2;grid-row:1}
.lm-js-right .lm-js-dot{grid-column:2;grid-row:1}
.lm-js-right .lm-js-label{grid-column:3;text-align:left}
.lm-js-label{background:rgba(255,255,255,.58);border:1px solid var(--line);border-radius:16px;padding:12px 14px;box-shadow:0 8px 20px rgba(52,38,20,.08)}
.lm-js-label strong{display:block;font-family:var(--serif);font-size:1.2rem;line-height:1;color:var(--ink)}
.lm-js-label span{display:block;font-size:.72rem;color:var(--ink-soft);margin-top:5px}
.lm-js-dot{justify-self:center;width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.25rem;z-index:1;box-shadow:0 8px 20px rgba(0,0,0,.22)}

/* Land & Legacy banner */
.lm-land-banner{display:grid;grid-template-columns:.85fr 1.15fr;gap:22px;background:linear-gradient(135deg,rgba(31,28,23,.97),rgba(69,55,40,.94));color:#fff;border-radius:30px;padding:26px;box-shadow:var(--shadow);overflow:hidden;position:relative;margin-bottom:36px}
.lm-land-banner::before{content:"LAND \0026 LEGACY";position:absolute;right:18px;bottom:8px;font-family:var(--serif);font-size:76px;opacity:.06;white-space:nowrap;pointer-events:none;color:#fff}
.lm-land-h{font-family:var(--serif);font-size:2.2rem;color:#fff;margin:8px 0 10px;line-height:1}
.lm-land-p{color:#eadfce;line-height:1.65;margin:0;font-size:.92rem}
.lm-land-types{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:20px}
.lm-archive-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}
.lm-archive-row div{background:rgba(255,255,255,.10);border-radius:13px;padding:11px;font-size:.82rem;color:#eadfce}

/* Responsive */
@media(max-width:900px){
  .lm-hero,.lm-land-banner{grid-template-columns:1fr}
  .lm-h1{font-size:2.6rem}
  .lm-land-types{margin-top:0}
}
@media(max-width:560px){
  .lm-h1{font-size:2rem}
  .lm-archive-row{grid-template-columns:repeat(2,1fr)}
}

/* ══════════════════════════════════════════════
   HOME — ONE-VIEWPORT DOORWAY DESIGN
   ══════════════════════════════════════════════ */

/* Topbar constitution link */
.topbar-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.hm-nav-btn{background:none;border:1px solid var(--line-soft);border-radius:999px;padding:8px 14px;font-size:.78rem;font-weight:700;color:var(--ink);cursor:pointer;transition:border-color .15s}
.hm-nav-btn:hover{border-color:var(--gold)}

/* Wrap */
.hm-wrap{padding-top:0;max-width:820px}

/* Divider */
.hm-divider{height:1px;background:var(--line-soft);margin:0}

/* Sections share padding */
.hm-section{padding:58px 0}

/* ① Welcome */
.hm-welcome{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:stretch;padding:44px 0}
.hm-welcome-text{display:flex;flex-direction:column;gap:16px;background:rgba(255,248,237,.86);border:1px solid var(--line-soft);border-radius:32px;box-shadow:0 28px 90px -42px rgba(23,18,13,.45);padding:48px;position:relative;overflow:hidden}
.hm-welcome-text::before{content:"";position:absolute;inset:auto -80px -110px auto;width:340px;height:340px;background:radial-gradient(circle,rgba(201,162,74,.16),transparent 67%);pointer-events:none}
.hm-welcome-text>*{position:relative;z-index:1}
.hm-h1{font-family:var(--serif);font-size:clamp(2.8rem,6vw,5.4rem);line-height:.9;margin:8px 0 4px;letter-spacing:-.03em;color:var(--ink)}
.hm-lede{color:var(--ink-soft);font-size:1.05rem;line-height:1.6;margin:0;max-width:560px}
.hm-quote{margin:18px 0 4px;padding-left:22px;border-left:5px solid var(--gold);font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.14;color:var(--ink)}
.hm-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}

/* Griot aside — single dark card (html .griot-card) */
.hm-griot-aside{display:flex;flex-direction:column;justify-content:space-between;min-height:440px;background:linear-gradient(145deg,rgba(20,14,10,.92),rgba(14,11,8,.96)),linear-gradient(160deg,#241910,#0e0b08);border-radius:32px;padding:34px;color:#fff8ed;position:relative;overflow:hidden;box-shadow:0 28px 90px -42px rgba(23,18,13,.45)}
.hm-griot-aside::after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;border:1px solid rgba(215,179,92,.4);right:-80px;top:-60px;pointer-events:none}
.hm-griot-aside #family-crest{display:none}
.hm-griot-aside .griot-banner{display:block;background:none;border:none;box-shadow:none;padding:0;margin:0}
.hm-griot-eyebrow{display:block;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:800}
.hm-griot-name{font-family:var(--serif);font-size:clamp(2.2rem,4.5vw,3rem);line-height:1;margin:10px 0 12px;color:#fff8ed}
.hm-griot-steward{margin:0;color:rgba(255,248,237,.8);font-size:1rem}
.hm-griot-profile{display:flex;gap:13px;align-items:center;margin-top:26px}
.hm-griot-avatar{width:54px;height:54px;flex:0 0 54px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,var(--gold),#fff2ce);color:#3c2a12;display:grid;place-items:center;font-weight:800;font-size:1.05rem;border:3px solid rgba(255,255,255,.5)}
.hm-griot-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.hm-griot-pres{font-size:.9rem;line-height:1.4}
.hm-griot-pres b{color:#fff8ed}
.hm-griot-pres span{color:rgba(255,248,237,.66);font-size:.82rem}
.hm-griot-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px;position:relative;z-index:1}
.hm-glass-btn{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:#fff8ed}
.hm-glass-btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff8ed;padding:9px 14px;font-size:.78rem}
.hm-glass-btn:hover{background:rgba(255,255,255,.18)}

/* ② Immediate family */
.hm-family-section{display:flex;flex-direction:column;gap:14px}
.hm-faces{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hr-face{width:62px;height:62px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#dfc59a,#fff1d1);display:grid;place-items:center;font-weight:900;color:#55391a;border:3px solid white;box-shadow:0 8px 18px -10px rgba(0,0,0,.45);font-size:.82rem;cursor:pointer;transition:transform .12s}
.hr-face.has-photo{background:#ece2d4}
.hr-face img{width:100%;height:100%;object-fit:cover;display:block}
.hr-face:hover{transform:scale(1.06)}
.hm-add-link{background:none;border:1px dashed var(--line);border-radius:999px;padding:9px 16px;font-size:.82rem;font-weight:700;color:var(--ink-soft);cursor:pointer;align-self:flex-start;transition:border-color .15s,color .15s}
.hm-add-link:hover{border-color:var(--gold);color:var(--gold)}

/* ③ Philosophy */
.hm-philosophy{text-align:center;padding:52px 0}
.hm-phil-line{font-family:var(--serif);font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.1;color:var(--ink);margin:0 0 16px}
.hm-phil-sub{color:var(--ink-soft);font-size:.96rem;line-height:1.75;margin:0;max-width:420px;margin-left:auto;margin-right:auto}

/* ④ Rooms grid */
.hm-rooms-title{font-family:var(--serif);font-size:clamp(2rem,4vw,3.4rem);line-height:1;margin:8px 0 4px;color:var(--ink)}
.hm-rooms-sub{color:var(--ink-soft);font-size:1.05rem;line-height:1.6;margin:6px 0 0;max-width:680px}
.hm-room-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.hm-room{position:relative;overflow:hidden;min-height:148px;border:0;border-radius:22px;padding:18px 20px;cursor:pointer;color:#fff;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;text-align:left;box-shadow:0 22px 54px -36px #000;transition:transform .16s ease,box-shadow .16s ease}
.hm-room::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.62));z-index:0}
.hm-room>*{position:relative;z-index:1}
.hm-room:hover{transform:translateY(-3px);box-shadow:0 30px 64px -34px #000}
.hm-room-num{font-family:var(--serif);font-size:1.12rem;color:#f7d889;opacity:.95}
.hm-room-body{display:flex;flex-direction:column;gap:5px}
.hm-room-h{font-family:var(--serif);font-size:1.45rem;line-height:1.06;color:#fff}
.hm-room-d{color:rgba(255,255,255,.86);font-size:.82rem;line-height:1.36;max-width:34ch}
.hm-room-cta{margin-top:4px;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;font-weight:800;color:#fff}
.hm-room.rm-people{background:linear-gradient(150deg,#2f7a5b,#123f30)}
.hm-room.rm-stories{background:linear-gradient(150deg,#9a3450,#4a1422)}
.hm-room.rm-tree{background:linear-gradient(150deg,#3f7a46,#16331c)}
.hm-room.rm-map{background:linear-gradient(150deg,#3a5680,#1a2740)}
.hm-room.rm-porch{background:linear-gradient(150deg,#c07a3e,#5c3216)}
.hm-room.rm-trunk{background:linear-gradient(150deg,#6b4423,#2b1a0e)}
.hm-room.rm-playbook{background:linear-gradient(150deg,#356048,#13251b)}
.hm-room.rm-journey{background:linear-gradient(150deg,#a85f2c,#4a2810)}
.hm-room.rm-origins{background:linear-gradient(150deg,#1f7060,#0d3029)}

/* ⑤ Constitution preview */
.hm-const-preview{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px;padding:44px 0}
.hm-const-card{background:linear-gradient(155deg,#20170f,#100b07);color:#fff8ed;border-radius:28px;padding:36px}
.hm-const-card .eyebrow.gold{color:var(--gold)}
.hm-const-title{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.1rem);line-height:1;margin:10px 0 12px;color:#fff8ed}
.hm-const-sub{color:rgba(255,248,237,.8);font-size:.96rem;line-height:1.5;margin:0}
.hm-const-articles{display:grid;gap:12px;margin-top:22px}
.hm-const-article{display:block;width:100%;text-align:left;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:16px;cursor:pointer;transition:background .15s ease}
.hm-const-article:hover{background:rgba(255,255,255,.12)}
.hm-const-article b{font-family:var(--serif);font-size:1.25rem;color:#fff8ed;display:block}
.hm-const-article span{display:block;color:rgba(255,248,237,.72);font-size:.86rem;line-height:1.45;margin-top:4px}
.hm-const-breathe{background:var(--paper);border:1px solid var(--line-soft);border-radius:28px;padding:36px}
.hm-breathe-title{font-family:var(--serif);font-size:clamp(1.8rem,3.4vw,2.4rem);line-height:1.05;margin:10px 0 14px;color:var(--ink)}
.hm-breathe-p{color:var(--ink-soft);font-size:1rem;line-height:1.55;margin:0 0 12px}
.hm-breathe-p strong{color:var(--ink)}
.hm-breathe-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.hm-amend-btn{background:var(--gold);color:#24190b}
@media(max-width:920px){.hm-const-preview{grid-template-columns:1fr}}

/* ⑥ Living history */
.hm-living{display:flex;flex-direction:column;gap:16px}
.hm-living #home-featured .featured-moment{border-radius:18px;background:var(--paper);border:1px solid var(--line-soft);padding:20px;cursor:pointer}
.hm-door-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hm-door{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;background:var(--paper);border:1px solid var(--line-soft);border-radius:16px;cursor:pointer;transition:border-color .14s,transform .12s}
.hm-door:hover{border-color:var(--gold);transform:translateX(3px)}
.hm-door-label{font-family:var(--serif);font-size:1.2rem;color:var(--ink);text-align:left}
.hm-door-arrow{color:var(--gold);font-size:1.2rem;flex-shrink:0}

/* Footer */
.hm-footer{padding:28px 0 10px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}

/* Responsive */
@media(max-width:680px){
  .hm-welcome{grid-template-columns:1fr}
  .hm-room-grid{grid-template-columns:repeat(2,1fr)}
  .hm-door-row{grid-template-columns:1fr}
  .hm-h1{font-size:2.2rem}
  .hm-nav-btn{display:none}
}
@media(max-width:420px){
  .hm-room-grid{grid-template-columns:1fr 1fr}
}


/* ══════════════════════════════════════════════
   FAMILY STORIES — RICH LAYOUT
   ══════════════════════════════════════════════ */

/* Hero */
.st-hero{display:grid;grid-template-columns:1.08fr .92fr;gap:36px;align-items:center;margin-bottom:30px}
.st-hero-text{display:flex;flex-direction:column}
.st-h1{font-family:var(--serif);font-size:3.6rem;line-height:.92;margin:12px 0 18px;letter-spacing:-.04em;color:var(--ink)}
.st-lead{font-size:1.06rem;line-height:1.8;color:var(--ink-soft);max-width:620px;margin:0 0 22px}
.st-actions{display:flex;gap:12px;flex-wrap:wrap}

/* Hero card */
.st-hero-card{background:rgba(255,248,236,.84);border:1px solid var(--line);border-radius:30px;padding:26px;box-shadow:var(--shadow);position:relative;overflow:hidden;min-height:300px}
.st-hero-card::before{content:"";position:absolute;right:-65px;top:-75px;width:240px;height:240px;border:1px solid rgba(184,132,47,.22);border-radius:50%;pointer-events:none}
.st-hero-card .featured-moment{border-radius:20px;background:linear-gradient(135deg,var(--paper),var(--cream-deep));border:1px solid var(--line);padding:18px;cursor:pointer;margin-bottom:14px}
.st-hero-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:10px 4px;position:relative;z-index:1}
.st-hero-quote{font-family:var(--serif);font-size:1.55rem;line-height:1.18;color:var(--ink);margin:0}
.st-hero-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;text-align:left;width:100%}
.st-hero-list li{color:var(--ink-soft);font-size:.9rem;padding-left:18px;position:relative;line-height:1.5}
.st-hero-list li::before{content:"—";position:absolute;left:0;color:var(--gold)}
.st-hero-foot{color:var(--ink-soft);font-size:.78rem;line-height:1.6;margin:0;max-width:360px}

/* Story room category cards */
.st-section{background:rgba(255,248,236,.58);border:1px solid var(--line);border-radius:28px;padding:28px;box-shadow:0 18px 48px rgba(67,42,18,.07);margin-bottom:22px}
.st-section-title{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:18px}
.st-h2{font-family:var(--serif);font-size:2.1rem;margin:0;line-height:1;color:var(--ink)}
.st-section-p{margin:0;color:var(--ink-soft);line-height:1.6;max-width:500px;font-size:.88rem}
.st-rooms{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.st-room-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:20px;min-height:140px;transition:.18s;position:relative;overflow:hidden}
.st-room-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(67,42,18,.1)}
.st-icon{font-size:2rem;margin-bottom:12px}
.st-room-h{font-family:var(--serif);font-size:1.45rem;margin:0 0 6px;color:var(--ink)}
.st-room-p{margin:0;color:var(--ink-soft);line-height:1.5;font-size:.82rem}

/* Responsive */
@media(max-width:900px){
  .st-hero{grid-template-columns:1fr}
  .st-h1{font-size:2.6rem}
  .st-rooms{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .st-h1{font-size:2rem}
  .st-rooms{grid-template-columns:1fr}
  .st-section{padding:18px}
  .st-hero-card{padding:18px}
}

/* ══════════════════════════════════════════════
   PEOPLE SCREEN — UPGRADED VISUAL TREATMENT
   ══════════════════════════════════════════════ */

/* Hero header */
.ppl-hero{margin-bottom:28px}
.ppl-h1{font-family:var(--serif);font-size:clamp(2.4rem,6vw,3.8rem);line-height:.94;margin:14px 0 16px;letter-spacing:-.03em;color:var(--ink)}
.ppl-lead{color:var(--ink-soft);font-size:1rem;line-height:1.65;max-width:580px;margin:0 0 20px}
.ppl-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:0}

/* Griot hero — centered, larger */
.fh-hero{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;background:var(--paper);border:1px dashed var(--line);border-radius:18px;padding:28px;cursor:pointer;margin:0 0 20px;transition:border-color .15s}
.fh-hero:hover{border-color:var(--gold)}
.fh-hero-photo{width:84px;height:84px;border-radius:50%;overflow:hidden;border:3px solid var(--gold);background:#ece2d4;display:flex;align-items:center;justify-content:center}
.fh-hero-photo img{width:100%;height:100%;object-fit:cover}
.fh-hero-name{font-family:var(--serif);font-size:2rem;color:var(--ink);line-height:1;margin-top:8px}
.fh-hero-role{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold-deep)}

/* Griot hero empty state — matches screenshot exactly */
.fh-hero-empty{text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:28px 24px;margin:0 0 20px}
.fh-hero-empty p{margin:0 0 14px;color:var(--ink-soft);font-size:.96rem}
.fh-hint{font-size:.82rem;color:var(--ink-soft);line-height:1.55;margin:12px 0 0}

/* Stat glance — taller, serif numbers, matches screenshot */
.fh-glance{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 32px}
.fh-stat{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px 10px;text-align:center;box-shadow:0 10px 24px rgba(52,38,20,.06)}
.fh-stat-n{display:block;font-family:var(--serif);font-size:2rem;color:var(--ink);line-height:1;font-weight:600}
.fh-stat-l{display:block;font-size:.65rem;letter-spacing:.1em;color:var(--ink-soft);margin-top:6px;text-transform:uppercase;font-weight:700}

/* Section heading — larger serif */
.fh-h{font-family:var(--serif);font-size:1.9rem;color:var(--ink);margin:0 0 16px;font-weight:600;line-height:1}

/* Branch cards — taller, icon top-left, count top-right, matches screenshot */
.fh-branches{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.fh-branch{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 16px;cursor:pointer;text-align:left;transition:border-color .15s,transform .12s}
.fh-branch:hover{border-color:var(--gold);transform:translateY(-1px)}
.fh-branch-tree{font-size:1.25rem}
.fh-branch-name{font-weight:600;color:var(--ink);font-size:.92rem}
.fh-branch-count{font-size:.78rem;color:var(--ink-soft);background:rgba(0,0,0,.06);border-radius:999px;padding:3px 10px;font-weight:600}

/* Explore cards — icon above, label below, matches screenshot */
.fh-explore{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.fh-explore-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px 16px;cursor:pointer;text-align:left;min-height:130px;transition:border-color .15s,transform .12s}
.fh-explore-card:hover{border-color:var(--gold);transform:translateY(-2px)}
.fhe-icon{font-size:1.7rem;line-height:1}
.fhe-label{font-weight:700;color:var(--ink);font-size:.92rem;line-height:1.2}
.fhe-sub{font-size:.75rem;color:var(--gold-deep);font-weight:600}

@media(max-width:640px){
  .fh-glance{grid-template-columns:repeat(2,1fr)}
  .ppl-h1{font-size:2.2rem}
}

/* ══════════════════════════════════════════════
   FAMILY STORIES — ADDITIONAL SECTIONS
   ══════════════════════════════════════════════ */

/* Front Porch — two-column layout (screenshot 4) */
.st-porch-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;border-radius:22px;overflow:hidden;margin:22px 0;box-shadow:0 18px 48px rgba(52,38,20,.1)}
.st-porch-left{background:linear-gradient(140deg,#2f422c,#1c261b);color:#f3ead9;padding:32px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px}
.st-porch-tree{position:absolute;right:10px;bottom:-28px;font-size:120px;opacity:.18;pointer-events:none}
.st-porch-h{font-family:var(--serif);font-size:1.7rem;color:#fff;line-height:1.05;margin:0}
.st-porch-sub{color:rgba(243,234,217,.82);font-size:.88rem;line-height:1.65;margin:0}
.st-porch-prompts{background:var(--paper);padding:22px;display:flex;flex-direction:column;gap:10px}
.st-porch-prompt{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-weight:600;color:var(--ink);text-align:left;cursor:pointer;font-size:.9rem;transition:border-color .15s,transform .1s;font-family:inherit}
.st-porch-prompt:hover{border-color:var(--gold);transform:translateX(3px)}

/* Recently Preserved timeline */
.st-recent-section{margin-top:8px}
.st-timeline{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.st-timeline-row{display:grid;grid-template-columns:80px 1fr auto;gap:16px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px 18px;cursor:pointer;transition:border-color .15s}
.st-timeline-row:hover{border-color:var(--gold)}
.st-tl-year{font-family:var(--serif);font-size:1.6rem;color:var(--gold-deep);font-weight:600;line-height:1}
.st-tl-body{display:flex;flex-direction:column;gap:3px}
.st-tl-title{font-weight:700;font-size:.95rem;color:var(--ink)}
.st-tl-caption{font-size:.82rem;color:var(--ink-soft);line-height:1.4}
.st-tl-tag{background:rgba(0,0,0,.06);border-radius:999px;padding:5px 12px;font-size:.72rem;font-weight:700;color:var(--ink-soft);white-space:nowrap}

/* Family Wisdom Cards */
.st-wisdom-section{margin-top:8px}
.st-wisdom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:4px}
.st-wisdom-card{background:#111;color:#fff;border-radius:20px;padding:22px;min-height:160px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .15s}
.st-wisdom-card:hover{transform:translateY(-3px)}
.st-wisdom-mark{color:var(--gold);font-size:1.8rem;line-height:1;font-family:var(--serif)}
.st-wisdom-text{font-family:var(--serif);font-size:1.3rem;line-height:1.2;color:#fff;margin:8px 0 0;flex:1}
.st-wisdom-attr{color:#d9c8b5;font-weight:700;font-size:.78rem;display:block;margin-top:12px}

/* CTA panel */
.st-cta-panel{background:var(--paper);border:1px dashed var(--line);border-radius:24px;padding:40px 28px;text-align:center;margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:14px}
.st-cta-h{font-family:var(--serif);font-size:2.2rem;color:var(--ink);margin:0;line-height:1}
.st-cta-p{color:var(--ink-soft);font-size:.92rem;line-height:1.65;max-width:560px;margin:0}

/* Responsive */
@media(max-width:760px){
  .st-porch-wrap{grid-template-columns:1fr}
  .st-wisdom-grid{grid-template-columns:1fr}
  .st-timeline-row{grid-template-columns:60px 1fr}
  .st-tl-tag{display:none}
}
@media(max-width:540px){
  .st-wisdom-grid{grid-template-columns:1fr}
}

/* ══ BRANCHES — preview 4 "Living Branches", data-driven ═══════════ */
#screen-branches{--bx-paper:#fff8ed;--bx-ink:#17120d;--bx-gold:#c9a24a;--bx-green:#2f7a5b;--bx-green2:#5d9a72;--bx-line:rgba(23,18,13,.14);--bx-shadow:0 28px 90px -40px rgba(23,18,13,.45)}
#screen-branches .bx4-eyebrow{font-family:var(--sans);font-size:.68rem;letter-spacing:.27em;text-transform:uppercase;color:var(--bx-gold);font-weight:800}
#screen-branches .bx4-panel{background:rgba(255,248,237,.82);border:1px solid var(--bx-line);border-radius:30px;box-shadow:var(--bx-shadow)}
#screen-branches .bx4-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:stretch;margin-top:8px}
#screen-branches .bx4-intro{padding:42px}
#screen-branches .bx4-h1{font-family:var(--serif);font-size:clamp(3rem,7vw,6rem);line-height:.88;margin:14px 0;font-weight:600}
#screen-branches .bx4-lede{font-family:var(--sans);font-size:1.05rem;color:#5b5144;max-width:620px;margin:0}
#screen-branches .bx4-quote{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.12;margin:30px 0 0;padding-left:22px;border-left:5px solid var(--bx-gold)}
#screen-branches .bx4-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px}
#screen-branches .bx4-stat{background:#fffaf1;border:1px solid var(--bx-line);border-radius:18px;padding:16px}
#screen-branches .bx4-stat b{display:block;font-family:var(--serif);font-size:2rem;line-height:1}
#screen-branches .bx4-stat span{font-family:var(--sans);font-size:.77rem;color:#66594b;font-weight:700;text-transform:uppercase;letter-spacing:.08em}

#screen-branches .bx4-tree-stage{position:relative;overflow:hidden;min-height:650px;background:linear-gradient(180deg,#f7e7c4,#f4e8d2 45%,#edefde)}
#screen-branches .bx4-sun{position:absolute;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(255,226,145,.95),rgba(255,226,145,.05) 68%);top:38px;right:54px;pointer-events:none}
#screen-branches .bx4-tree{position:absolute;left:50%;bottom:-20px;width:560px;height:610px;transform:translateX(-50%)}
#screen-branches .bx4-trunk{position:absolute;left:250px;bottom:0;width:72px;height:425px;background:linear-gradient(90deg,#613b20,#8b5a32,#5a351e);border-radius:44% 44% 10% 10%;clip-path:polygon(32% 0,70% 0,82% 100%,12% 100%)}
#screen-branches .bx4-trunk-label{position:absolute;left:214px;bottom:52px;background:rgba(255,248,237,.88);border:1px solid var(--bx-line);border-radius:18px;padding:12px 18px;font-family:var(--serif);font-size:1.35rem;text-align:center}
#screen-branches .bx4-root{position:absolute;bottom:12px;left:50%;height:8px;background:#81552f;border-radius:999px;transform-origin:left center}
#screen-branches .bx4-root.r1{width:170px;transform:rotate(22deg)}
#screen-branches .bx4-root.r2{width:150px;transform:rotate(55deg)}
#screen-branches .bx4-root.r3{width:150px;transform:rotate(125deg);left:48%}
#screen-branches .bx4-root.r4{width:180px;transform:rotate(160deg);left:48%}
#screen-branches .bx4-branch{position:absolute;height:14px;background:linear-gradient(90deg,#714824,#8b5a32);border-radius:999px;transform-origin:left center}
#screen-branches .bx4-branch.b1{left:285px;bottom:360px;width:235px;transform:rotate(-19deg)}
#screen-branches .bx4-branch.b2{left:286px;bottom:300px;width:210px;transform:rotate(9deg)}
#screen-branches .bx4-branch.b3{left:286px;bottom:240px;width:250px;transform:rotate(-12deg)}
#screen-branches .bx4-branch.b4{left:254px;bottom:330px;width:230px;transform:rotate(195deg)}
#screen-branches .bx4-branch.b5{left:250px;bottom:270px;width:255px;transform:rotate(165deg)}
#screen-branches .bx4-branch.b6{left:256px;bottom:190px;width:250px;transform:rotate(190deg)}
#screen-branches .bx4-branch.b7{left:285px;bottom:160px;width:225px;transform:rotate(15deg)}
#screen-branches .bx4-leaf{position:absolute;width:118px;height:86px;background:linear-gradient(135deg,var(--bx-green2),var(--bx-green));border-radius:60% 40% 58% 42%;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;box-shadow:0 16px 28px -18px #000;transform:rotate(-8deg);border:2px solid rgba(255,255,255,.16);cursor:pointer;transition:transform .15s,box-shadow .15s}
#screen-branches .bx4-leaf:hover{box-shadow:0 22px 34px -16px #000}
#screen-branches .bx4-leaf b{display:block;font-family:var(--serif);font-size:1.2rem;line-height:1}
#screen-branches .bx4-leaf span{display:block;font-size:.72rem;font-weight:800}
#screen-branches .lf1{left:48px;bottom:294px;width:148px;height:104px;background:linear-gradient(135deg,#218266,#0f5d48)}
#screen-branches .lf2{right:22px;bottom:310px;width:132px;height:96px;background:linear-gradient(135deg,#7b1f3a,#b65f69);transform:rotate(10deg)}
#screen-branches .lf3{right:42px;bottom:135px;background:linear-gradient(135deg,#24395c,#4268a1)}
#screen-branches .lf4{left:72px;bottom:228px;background:linear-gradient(135deg,#4f7d3c,#2f7a5b);transform:rotate(10deg)}
#screen-branches .lf5{right:90px;bottom:224px;background:linear-gradient(135deg,#9a5e26,#c86f2d)}
#screen-branches .lf6{left:100px;bottom:150px;background:linear-gradient(135deg,#6854a3,#4b3a82);transform:rotate(10deg)}
#screen-branches .lf7{left:105px;bottom:408px;background:linear-gradient(135deg,#a07929,#c9a24a);color:#20170c}
#screen-branches .lf8{right:54px;bottom:452px;background:linear-gradient(135deg,#3f906d,#2f7a5b);transform:rotate(10deg)}
#screen-branches .bx4-roots-label{position:absolute;left:36px;bottom:26px;background:rgba(25,18,13,.78);color:#fff8ed;border-radius:22px;padding:18px;width:250px;max-width:60%}
#screen-branches .bx4-roots-label h3{font-family:var(--serif);font-size:1.6rem;margin:0 0 6px}
#screen-branches .bx4-roots-label p{margin:0;color:rgba(255,248,237,.78);font-size:.9rem;font-family:var(--sans)}

#screen-branches .bx4-section{margin-top:28px;padding:34px}
#screen-branches .bx4-h2{font-family:var(--serif);font-size:clamp(2rem,4vw,3.2rem);margin:8px 0 12px;font-weight:600}
#screen-branches .bx4-home-strip{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}
#screen-branches .bx4-family-card{background:#fffaf1;border:1px solid var(--bx-line);border-radius:24px;padding:24px}
#screen-branches .bx4-family-card h3{font-family:var(--serif);font-size:2rem;margin:0 0 12px}
#screen-branches .bx4-faces{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
#screen-branches .bx4-face{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#d8c2a4,#fff1d4);display:flex;align-items:center;justify-content:center;font-weight:900;color:#5b3b22;border:3px solid #fff;box-shadow:0 12px 24px -18px #000;font-family:var(--serif);font-size:1.4rem;cursor:pointer;overflow:hidden;padding:0}
#screen-branches .bx4-face img{width:100%;height:100%;object-fit:cover}
#screen-branches .bx4-faces-empty{color:#7a6c5b;font-family:var(--sans);font-size:.92rem}
#screen-branches .bx4-fc-note{color:#5b5144;margin-top:16px;font-family:var(--sans);font-size:.92rem;line-height:1.5}
#screen-branches .bx4-btn{border:0;background:var(--bx-ink);color:#fff;border-radius:999px;padding:12px 18px;font-family:var(--sans);font-weight:800;cursor:pointer;margin-top:6px}
#screen-branches .bx4-note{background:linear-gradient(155deg,#251b13,#15100b);color:#fff8ed;border-radius:24px;padding:28px}
#screen-branches .bx4-note h3{font-family:var(--serif);font-size:2rem;margin:0 0 10px}
#screen-branches .bx4-note p{color:rgba(255,248,237,.83);font-family:var(--sans);line-height:1.55;margin:0}
#screen-branches .bx4-branch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
#screen-branches .bx4-card{min-height:245px;border-radius:24px;padding:24px;color:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--bx-shadow);cursor:pointer;text-align:left;border:0}
#screen-branches .bx4-card h3{font-family:var(--serif);font-size:2rem;margin:0 0 4px}
#screen-branches .bx4-card p{color:rgba(255,255,255,.9);margin:0 0 14px;font-family:var(--sans);line-height:1.45}
#screen-branches .bx4-pills{display:flex;gap:7px;flex-wrap:wrap}
#screen-branches .bx4-pills span{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);padding:6px 10px;border-radius:999px;font-size:.72rem;font-weight:800;font-family:var(--sans)}
@media(max-width:900px){#screen-branches .bx4-hero,#screen-branches .bx4-home-strip{grid-template-columns:1fr}#screen-branches .bx4-branch-grid{grid-template-columns:1fr 1fr}#screen-branches .bx4-intro{padding:30px}}
@media(max-width:560px){#screen-branches .bx4-branch-grid{grid-template-columns:1fr}}

/* ── Legacy Map: story drawer + empty line (follows the html) ─────── */
#screen-places .map-empty-line{color:var(--ink-soft);font-family:var(--sans);font-size:.95rem;line-height:1.6;max-width:680px;margin:6px 0 8px}
#screen-places .lm-drawer{margin-top:28px;background:rgba(255,250,240,.82);border:1px solid var(--line);border-radius:32px;padding:26px;display:grid;grid-template-columns:1fr 1fr;gap:24px;box-shadow:var(--shadow)}
#screen-places .lm-drawer-h{font-family:var(--serif);font-size:clamp(2rem,3.5vw,2.8rem);line-height:1;margin:8px 0 10px;font-weight:600}
#screen-places .lm-drawer-p{font-family:var(--sans);color:var(--ink-soft);line-height:1.6;margin:0 0 18px;max-width:520px}
#screen-places .lm-mem-list{display:grid;gap:12px;align-content:start}
#screen-places .lm-mem{display:flex;gap:12px;align-items:center;background:rgba(239,227,207,.5);border:1px solid var(--line-soft);border-radius:18px;padding:12px;cursor:pointer;text-align:left;transition:border-color .15s,transform .12s}
#screen-places .lm-mem:hover{border-color:var(--gold);transform:translateY(-2px)}
#screen-places .lm-mem-ic{width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
#screen-places .lm-mem-text{display:flex;flex-direction:column;gap:3px}
#screen-places .lm-mem-text b{font-family:var(--serif);font-size:1.12rem;font-weight:600;line-height:1.05}
#screen-places .lm-mem-meta{font-family:var(--sans);font-size:.78rem;color:var(--ink-soft)}
@media(max-width:900px){#screen-places .lm-drawer{grid-template-columns:1fr}}

/* ── Timeline: featured-era photo block (matches the html album) ──── */
#screen-timeline .tl-album-photo{height:230px;border-radius:22px;background:linear-gradient(135deg,#4b321f,#c39a56 48%,#f7ecd7);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);margin:6px 0 16px}

/* ── Living Tree: html-exact canopy layout (overrides band placement) ── */
#screen-tree .tree-art{height:630px}
/* Baobab silhouette replaces the old round-canopy divs; nodes sit above it. */
#screen-tree .baobab-art{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;
  background-image:url('/baobab-tree.webp');
  background-repeat:no-repeat;
  background-position:center top;
  background-size:auto 100%;
  opacity:.7}
#screen-tree .trunk{left:50%;top:210px;transform:translateX(-50%);width:58px;height:285px;background:linear-gradient(90deg,#5d3e27,#8a5f39,#4a301f);border-radius:40px 40px 18px 18px;box-shadow:inset -10px 0 25px rgba(0,0,0,.16)}
#screen-tree .leaf-cloud{background:radial-gradient(circle at 30% 28%,#9fbe78,#5b8548 55%,#385e32 100%);filter:drop-shadow(0 14px 20px rgba(59,76,39,.18));opacity:.92}
#screen-tree .c1{width:260px;height:190px;left:18%;top:50px;right:auto}
#screen-tree .c2{width:300px;height:215px;right:17%;top:48px;left:auto}
#screen-tree .c3{width:380px;height:260px;left:50%;top:85px;transform:translateX(-50%);right:auto}
#screen-tree .branch{height:5px;background:rgba(109,77,50,.34);border-radius:999px}
#screen-tree .branch.b1{left:27%;top:220px;width:260px;transform:rotate(-22deg);right:auto}
#screen-tree .branch.b2{right:27%;top:220px;left:auto;width:260px;transform:rotate(22deg)}
#screen-tree .branch.b3{left:31%;top:320px;width:220px;transform:rotate(18deg);right:auto}
#screen-tree .branch.b4{right:31%;top:320px;left:auto;width:220px;transform:rotate(-18deg)}
#screen-tree .branch.b5{left:42%;top:430px;width:130px;transform:rotate(-54deg);right:auto}
#screen-tree .branch.b6{right:42%;top:430px;left:auto;width:130px;transform:rotate(54deg)}
#screen-tree .tnode{transform:none;left:auto;top:auto;right:auto;min-width:150px;max-width:200px}
#screen-tree .tnode:hover{transform:translateY(-4px)}
#screen-tree .tnode.n1{left:15%;top:145px}
#screen-tree .tnode.n2{right:15%;top:145px;left:auto}
#screen-tree .tnode.n3{left:24%;top:280px}
#screen-tree .tnode.n4{right:24%;top:280px;left:auto}
#screen-tree .tnode.n5{left:23%;top:500px}
#screen-tree .tnode.n6{right:23%;top:500px;left:auto}
#screen-tree .tnode.center{left:50%;top:365px;transform:translateX(-50%);min-width:190px}
#screen-tree .tnode.center:hover{transform:translateX(-50%) translateY(-4px)}
#screen-tree .wisdom-leaf{transform:none;left:auto;top:auto;right:auto}
#screen-tree .wisdom-leaf.w1{left:37%;top:110px}
#screen-tree .wisdom-leaf.w2{right:34%;top:96px;left:auto}
#screen-tree .wisdom-leaf.w3{left:54%;top:250px}
#screen-tree .roots{left:50%;bottom:16px;transform:translateX(-50%);width:520px;max-width:90%;height:100px;border-bottom:4px solid rgba(109,77,50,.28);border-radius:0 0 50% 50%}
@media(max-width:1050px){
  #screen-tree .tnode{min-width:126px;max-width:150px}
  #screen-tree .tnode.n1{left:4%}#screen-tree .tnode.n2{right:4%}
  #screen-tree .tnode.n3{left:8%}#screen-tree .tnode.n4{right:8%}
  #screen-tree .tnode.n5{left:8%}#screen-tree .tnode.n6{right:8%}
  #screen-tree .wisdom-leaf{display:none}
}

/* ── Family Steward Tools — Merge Duplicate People ── */
#screen-merge .mrg-hero{margin:18px 0 8px}
.mrg-h1{font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.4rem);line-height:1;margin:6px 0 10px;color:var(--ink)}
.mrg-lead{color:var(--ink-soft);font-size:1.02rem;line-height:1.6;max-width:660px;margin:0}
.mrg-block{background:var(--paper);border:1px solid var(--line-soft);border-radius:20px;padding:22px;margin-top:18px}
.mrg-sub{font-family:var(--serif);font-size:1.5rem;margin:0 0 6px;color:var(--ink)}
.mrg-hint{color:var(--ink-soft);font-size:.9rem;margin:0 0 12px}
.mrg-none{background:var(--paper);border:1px dashed var(--line-soft);border-radius:16px;padding:16px;margin-top:18px}
.mrg-sugg-list{display:flex;flex-wrap:wrap;gap:10px}
.mrg-sugg-card{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;background:var(--cream);border:1px solid var(--line-soft);border-radius:14px;padding:12px 14px;cursor:pointer;transition:border-color .14s,transform .14s}
.mrg-sugg-card:hover{border-color:var(--gold);transform:translateY(-1px)}
.mrg-sugg-names{font-family:var(--serif);font-size:1.05rem;color:var(--ink)}
.mrg-sugg-why{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);font-weight:700}
.mrg-pickers{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:680px){.mrg-pickers{grid-template-columns:1fr}}
.mrg-field{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--ink-soft)}
.mrg-field select{font-family:var(--sans);font-size:.95rem;padding:11px 12px;border:1px solid var(--line-soft);border-radius:12px;background:var(--cream);color:var(--ink)}
.mrg-keep-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0 14px}
@media(max-width:680px){.mrg-keep-row{grid-template-columns:1fr}}
.mrg-keep-card{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:var(--cream);border:2px solid var(--line-soft);border-radius:18px;padding:20px 16px;cursor:pointer;transition:border-color .14s,box-shadow .14s}
.mrg-keep-card:hover{border-color:var(--gold)}
.mrg-keep-card.chosen{border-color:var(--green);box-shadow:0 0 0 3px rgba(58,130,102,.16)}
.mrg-keep-face{width:64px;height:64px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,#dfc59a,#fff1d1);color:#55391a;font-weight:800;font-size:1.3rem;border:3px solid #fff}
.mrg-keep-face img{width:100%;height:100%;object-fit:cover;display:block}
.mrg-keep-name{font-family:var(--serif);font-size:1.3rem;color:var(--ink);line-height:1.1}
.mrg-griot-tag{display:inline-block;font-family:var(--sans);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;font-weight:800;color:var(--gold-deep,#a8842f);background:rgba(201,162,74,.16);border-radius:999px;padding:2px 7px;vertical-align:middle;margin-left:4px}
.mrg-keep-meta{font-size:.82rem;color:var(--ink-soft)}
.mrg-keep-pick{margin-top:4px;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--green-deep,#2c6450)}
.mrg-keep-card:not(.chosen) .mrg-keep-pick{color:var(--ink-soft)}
.mrg-confirm{border-top:1px solid var(--line-soft);padding-top:14px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.mrg-confirm-line{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.5}

/* ── Griot Settings hub ── */
#screen-griot-settings .gs-hero,#screen-griot-fix .gs-hero{margin:18px 0 8px}
.gs-h1{font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.4rem);line-height:1;margin:6px 0 10px;color:var(--ink)}
.gs-lead{color:var(--ink-soft);font-size:1.02rem;line-height:1.6;max-width:660px;margin:0}
.gs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:20px}
.gs-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;background:var(--paper);border:1px solid var(--line-soft);border-radius:18px;padding:18px 18px 16px;cursor:pointer;transition:border-color .14s,transform .14s,box-shadow .14s}
.gs-card:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 8px 22px rgba(20,16,10,.06)}
.gs-ic{font-size:1.5rem;line-height:1}
.gs-t{font-family:var(--serif);font-size:1.25rem;color:var(--ink);line-height:1.15}
.gs-d{font-size:.86rem;color:var(--ink-soft);line-height:1.45}

/* ── Family Health dashboard + stewardship queue ── */
.gs-sub{font-family:var(--serif);font-size:1.5rem;margin:0 0 4px;color:var(--ink)}
.gs-tools-head{margin:26px 0 2px}
.gs-health-head{margin:20px 0 12px}
.gs-health-sub{color:var(--ink-soft);font-size:.9rem;margin:2px 0 0}
.gs-health-loading{color:var(--ink-soft);font-size:.9rem;padding:14px 0}
.hc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:12px}
.hc-card{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;border-radius:16px;padding:16px 16px 14px;cursor:pointer;border:1px solid var(--line-soft);background:var(--paper);transition:transform .14s,border-color .14s,box-shadow .14s}
.hc-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(20,16,10,.07)}
.hc-n{font-family:var(--serif);font-size:2.2rem;line-height:1;color:var(--ink)}
.hc-t{font-family:var(--sans);font-weight:700;font-size:.96rem;color:var(--ink);margin-top:4px}
.hc-d{font-size:.78rem;color:var(--ink-soft);line-height:1.35}
.hc-warn{background:linear-gradient(180deg,#fbf2e2,#f8ecd6);border-color:rgba(201,162,74,.45)}
.hc-warn .hc-n{color:var(--gold-deep,#a8842f)}
.hc-ok{background:linear-gradient(180deg,#eef5ef,#e7f1ea);border-color:rgba(58,130,102,.32)}
.hc-ok .hc-n{color:var(--green-deep,#2c6450)}
.hc-info{background:var(--paper)}
.hc-info .hc-n{font-size:1.5rem;color:var(--ink-soft)}
/* queue rows */
.hd-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.hd-row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--paper);border:1px solid var(--line-soft);border-radius:14px;padding:11px 14px;cursor:pointer;transition:border-color .14s,background .14s}
.hd-row:hover{border-color:var(--gold);background:var(--cream)}
.hd-face{width:42px;height:42px;flex:0 0 42px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,#dfc59a,#fff1d1);color:#55391a;font-weight:800;font-size:1rem;border:2px solid #fff}
.hd-face img{width:100%;height:100%;object-fit:cover;display:block}
.hd-story{background:linear-gradient(135deg,#cdbfa0,#efe3c8);color:#5a4622;font-size:1.05rem}
.hd-row-main{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.hd-row-name{font-family:var(--serif);font-size:1.12rem;color:var(--ink);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-row-meta{font-size:.78rem;color:var(--ink-soft)}
.hd-row-go{font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--green-deep,#2c6450);flex:0 0 auto}
.hd-empty{color:var(--ink-soft);font-size:.95rem;padding:18px 2px}

/* ── Relationship-first home: Your Family ── */
#home-relationships{margin-top:14px;display:flex;flex-direction:column;gap:20px}
.hf-group{display:flex;flex-direction:column;gap:10px}
.hf-label{font-family:var(--sans);font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep,#a8842f)}
.hf-count{display:inline-block;background:rgba(201,162,74,.16);color:var(--gold-deep,#a8842f);border-radius:999px;font-size:.66rem;padding:1px 7px;margin-left:4px;vertical-align:middle}
.hf-chips{display:flex;flex-wrap:wrap;gap:14px}
.hf-chip{display:flex;flex-direction:column;align-items:center;gap:6px;width:84px;background:none;border:none;cursor:pointer;padding:2px}
.hf-chip-face{width:60px;height:60px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,#dfc59a,#fff1d1);color:#55391a;font-weight:800;font-size:1.15rem;border:3px solid #fff;box-shadow:0 3px 10px rgba(20,16,10,.1);transition:transform .14s,box-shadow .14s}
.hf-chip:hover .hf-chip-face{transform:translateY(-2px);box-shadow:0 7px 16px rgba(20,16,10,.16)}
.hf-chip-face img{width:100%;height:100%;object-fit:cover;display:block}
.hf-chip-name{font-family:var(--serif);font-size:.92rem;color:var(--ink);line-height:1.15;text-align:center;max-width:84px}
.hf-more{align-self:center;background:var(--paper);border:1px dashed var(--line-soft);border-radius:999px;padding:8px 14px;font-size:.82rem;color:var(--ink-soft);cursor:pointer;height:60px}
.hf-more:hover{border-color:var(--gold);color:var(--ink)}
.hf-extended .hf-chip-face{background:linear-gradient(135deg,#d9cdb4,#efe6d0)}
.hf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:6px;padding-top:18px;border-top:1px solid var(--line-soft)}
.hf-hint{color:var(--ink-soft);font-size:.92rem;margin:0;line-height:1.5}
.hf-empty{display:flex;flex-direction:column;align-items:flex-start;gap:12px;background:var(--paper);border:1px solid var(--line-soft);border-radius:18px;padding:20px}
.hf-empty p{margin:0;color:var(--ink-soft);line-height:1.55}

/* ── Griot Console command center ── */
.cc-greet{margin:18px 0 14px}
.cc-h1{font-family:var(--serif);font-size:clamp(2rem,4.6vw,3rem);line-height:1.02;margin:6px 0 0;color:var(--ink)}
.cc-score{border-radius:22px;padding:22px;margin-bottom:22px;border:1px solid var(--line-soft)}
.cc-ok{background:linear-gradient(180deg,#eef5ef,#e6f0e9);border-color:rgba(58,130,102,.32)}
.cc-warn{background:linear-gradient(180deg,#fbf2e2,#f7ebd5);border-color:rgba(201,162,74,.42)}
.cc-score-main{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.cc-score-label{font-family:var(--sans);font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);width:100%}
.cc-score-word{font-family:var(--serif);font-size:2rem;color:var(--ink)}
.cc-ok .cc-score-word{color:var(--green-deep,#2c6450)}
.cc-warn .cc-score-word{color:var(--gold-deep,#a8842f)}
.cc-score-pct{font-family:var(--serif);font-size:2rem;color:var(--ink-soft)}
.cc-cats{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px}
.cc-cat{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;color:var(--ink)}
.cc-cat-mark{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:.62rem;font-weight:900;color:#fff}
.cc-cat-mark.good{background:var(--green,#3a8266)}
.cc-cat-mark.attn{background:var(--gold,#C9A24A);color:#3c2a12}
.cc-tasks{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.cc-task{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--paper);border:1px solid var(--line-soft);border-radius:13px;padding:12px 14px;cursor:pointer;transition:border-color .14s,background .14s}
.cc-task:hover{border-color:var(--gold);background:var(--cream)}
.cc-task-box{width:18px;height:18px;flex:0 0 18px;border:2px solid var(--gold);border-radius:5px}
.cc-task-t{flex:1;font-size:.98rem;color:var(--ink)}
.cc-task-go{color:var(--green-deep,#2c6450);font-weight:800}
.cc-allclear{color:var(--green-deep,#2c6450);font-size:.98rem;background:#eef5ef;border:1px solid rgba(58,130,102,.3);border-radius:13px;padding:14px 16px;margin:6px 0 0}
.cc-acts{display:flex;flex-direction:column;gap:2px;margin:6px 0 10px}
.cc-act{display:flex;align-items:center;gap:11px;padding:9px 2px;border-bottom:1px solid var(--line-soft)}
.cc-act:last-child{border-bottom:none}
.cc-act-dot{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--gold)}
.cc-act-line{flex:1;font-size:.9rem;color:var(--ink-soft)}
.cc-act-date{font-size:.78rem;color:var(--ink-soft);flex:0 0 auto}
.cc-hint{color:var(--ink-soft);font-size:.9rem}
#console-activity{margin-top:26px}

/* ── Home: Branches (was Extended Family) ── */
.hf-branch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.hf-branch{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;background:linear-gradient(180deg,#fbf6ec,#f3ead7);border:1px solid var(--line-soft);border-radius:16px;padding:16px 16px 14px;cursor:pointer;transition:transform .14s,border-color .14s,box-shadow .14s}
.hf-branch:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 8px 20px rgba(20,16,10,.07)}
.hf-branch-ic{font-size:1.5rem;line-height:1}
.hf-branch-name{font-family:var(--serif);font-size:1.3rem;color:var(--ink);line-height:1.1}
.hf-branch-n{font-size:.82rem;color:var(--ink-soft)}
.hf-branch-go{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--green-deep,#2c6450);margin-top:4px}

/* ── Console: alive summary line ── */
.cc-summary{font-family:var(--serif);font-size:1.12rem;color:var(--ink-soft);line-height:1.5;margin:8px 0 0;max-width:620px}

/* ── Home: teaching empty-state invites ── */
.hf-empty-group .hf-invite{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--paper);border:1px dashed var(--line-soft);border-radius:14px;padding:13px 16px}
.hf-invite-t{font-size:.95rem;color:var(--ink-soft);line-height:1.4;flex:1;min-width:180px}
.hf-empty-group .btn.sm{flex:0 0 auto}

/* ── Frozen navigation bar ── */
.app-nav{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:200;
  display:flex;justify-content:space-between;align-items:stretch;
  width:min(640px,96vw);
  background:linear-gradient(180deg,rgba(48,31,16,.92),rgba(30,19,9,.95));
  -webkit-backdrop-filter:blur(14px) saturate(1.08);backdrop-filter:blur(14px) saturate(1.08);
  border:1px solid rgba(201,162,74,.32);border-radius:999px;padding:7px 8px;
  box-shadow:0 18px 46px -16px rgba(8,5,2,.72),inset 0 1px 0 rgba(255,232,176,.12)}
.anav-btn{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:none;border:none;cursor:pointer;padding:6px 2px;border-radius:14px;
  color:rgba(228,198,140,.8);transition:color .15s,background .15s,transform .15s}
.anav-btn:hover{color:#f3d999;background:rgba(201,162,74,.1)}
.anav-ic{line-height:1;display:inline-flex}
.anav-ic svg{width:23px;height:23px;display:block}
.anav-l{font-size:.6rem;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.anav-btn.active{color:var(--gold,#C9A24A)}
.anav-btn.active .anav-ic{transform:translateY(-1px);filter:drop-shadow(0 0 8px rgba(201,162,74,.75))}
.anav-btn.active .anav-l{color:#f6dd9b}
body.has-appnav{padding-bottom:88px}
@media(min-width:980px){.app-nav{width:min(660px,92vw)}}

/* ── Family Snapshot side panel ── */
.snap-overlay{position:fixed;inset:0;z-index:300;display:flex;justify-content:flex-end;opacity:0;pointer-events:none;transition:opacity .22s ease}
.snap-overlay.open{opacity:1;pointer-events:auto}
.snap-backdrop{position:absolute;inset:0;background:rgba(20,16,10,.42)}
.snap-panel{position:relative;width:min(420px,92vw);max-height:100vh;overflow-y:auto;background:var(--paper);box-shadow:-14px 0 40px rgba(20,16,10,.22);padding:26px 24px 32px;transform:translateX(100%);transition:transform .26s cubic-bezier(.22,.61,.36,1)}
.snap-overlay.open .snap-panel{transform:translateX(0)}
.snap-close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:1.7rem;line-height:1;color:var(--ink-soft);cursor:pointer;padding:4px 8px}
.snap-close:hover{color:var(--ink)}
.snap-head{display:flex;align-items:center;gap:16px;margin:6px 0 20px}
.snap-face{width:72px;height:72px;flex:0 0 72px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,#dfc59a,#fff1d1);color:#55391a;font-weight:800;font-size:1.5rem;border:3px solid #fff;box-shadow:0 4px 12px rgba(20,16,10,.12)}
.snap-face img{width:100%;height:100%;object-fit:cover;display:block}
.snap-name{font-family:var(--serif);font-size:1.7rem;margin:0;color:var(--ink);line-height:1.1}
.snap-griot{display:block;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep,#a8842f);margin-top:3px}
.snap-years{display:block;font-size:.86rem;color:var(--ink-soft);margin-top:2px}
.snap-rel{display:flex;flex-direction:column;gap:5px;padding:11px 0;border-top:1px solid var(--line-soft)}
.snap-rel-label{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep,#a8842f)}
.snap-rel-people{display:flex;flex-wrap:wrap;gap:6px 14px}
.snap-link{background:none;border:none;padding:0;cursor:pointer;font-family:var(--serif);font-size:1.08rem;color:var(--ink);text-align:left}
.snap-link:hover{color:var(--green-deep,#2c6450);text-decoration:underline}
.snap-empty{color:var(--ink-soft);font-size:.92rem;padding:12px 0;border-top:1px solid var(--line-soft);margin:0}
.snap-full{margin-top:20px;width:100%}
body.snap-lock{overflow:hidden}
@media(max-width:560px){
  .snap-overlay{justify-content:center;align-items:flex-end}
  .snap-panel{width:100vw;max-height:88vh;border-radius:22px 22px 0 0;transform:translateY(100%)}
  .snap-overlay.open .snap-panel{transform:translateY(0)}
}

/* ── Arrival home: welcome, constitution read, search bar, branches, griot chip ── */
.hm-welcome-arrival{max-width:760px;margin:6px auto 0;text-align:left;padding:8px 0 4px}
.hm-const-arrival{margin-top:18px}
.hm-const-read{margin-top:16px}
.hm-search-section{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.hm-search-bar{display:flex;align-items:center;gap:12px;width:100%;background:var(--paper);border:1px solid var(--line-soft);border-radius:16px;padding:15px 18px;cursor:pointer;color:var(--ink-soft);font-size:1rem;text-align:left;transition:border-color .14s,box-shadow .14s}
.hm-search-bar:hover{border-color:var(--gold);box-shadow:0 6px 18px rgba(20,16,10,.06)}
.hm-search-bar svg{width:19px;height:19px;flex:0 0 19px;color:var(--gold-deep,#a8842f)}
.hm-branches-section{display:flex;flex-direction:column;gap:6px}

/* Griot chip (replaces the black wall) */
.griot-chip{background:var(--paper)!important;color:var(--ink)!important;border:1px solid var(--line-soft);border-radius:20px;padding:20px 22px!important;display:flex;flex-direction:column;gap:14px;min-height:0!important;max-width:420px}
.griot-chip::before,.griot-chip::after{display:none!important}
.griot-chip .hm-griot-eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep,#a8842f)}
.griot-chip .chip-row{display:flex;align-items:center;gap:14px}
.griot-chip .hm-griot-avatar{width:50px;height:50px;flex:0 0 50px}
.griot-chip .chip-id{display:flex;flex-direction:column;gap:1px}
.griot-chip .hm-griot-name{font-family:var(--serif);font-size:1.5rem;color:var(--ink);line-height:1.05;margin:0}
.griot-chip .chip-role{font-size:.84rem;color:var(--ink-soft)}
.chip-console{align-self:flex-start;background:none;border:none;cursor:pointer;font-weight:800;font-size:.86rem;letter-spacing:.02em;color:var(--green-deep,#2c6450);padding:0}
.chip-console:hover{text-decoration:underline}

/* ── Search overlay ── */
.srch-overlay{position:fixed;inset:0;z-index:320;display:flex;justify-content:center;align-items:flex-start;opacity:0;pointer-events:none;transition:opacity .18s ease}
.srch-overlay.open{opacity:1;pointer-events:auto}
.srch-panel{position:relative;width:min(620px,94vw);margin-top:8vh;background:var(--paper);border-radius:20px;box-shadow:0 30px 70px rgba(20,16,10,.3);overflow:hidden;transform:translateY(-12px);transition:transform .2s ease}
.srch-overlay.open .srch-panel{transform:translateY(0)}
.srch-bar{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line-soft)}
.srch-bar svg{width:20px;height:20px;flex:0 0 20px;color:var(--gold-deep,#a8842f)}
.srch-bar input{flex:1;border:none;background:none;outline:none;font-family:var(--sans);font-size:1.08rem;color:var(--ink)}
.srch-cancel{background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:.9rem;font-weight:600}
.srch-results{max-height:60vh;overflow-y:auto;padding:8px}
.srch-group{padding:6px 4px}
.srch-label{display:block;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep,#a8842f);padding:6px 10px}
.srch-row{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;background:none;border:none;border-radius:11px;padding:11px 12px;cursor:pointer}
.srch-row:hover{background:var(--cream)}
.srch-row-name{font-family:var(--serif);font-size:1.12rem;color:var(--ink)}
.srch-row-meta{font-size:.82rem;color:var(--ink-soft)}
.srch-hint{color:var(--ink-soft);font-size:.92rem;padding:20px}

/* ── Quiet room invitations (replaces the giant gradient cards) ── */
.hm-rooms-quiet{display:flex;flex-direction:column;margin-top:18px;border-top:1px solid var(--line-soft)}

/* ════ THE HOUSE OF LEGACY — full-bleed immersive navigation (Act II) ════
   The complete estate scene IS the page: the baobab gate above, two rows of
   carved doors, and the tree-of-life medallion below. The artwork
   (legacy-house-wall.png) is portrait 2:3 (1024×1536) and is shown EDGE TO
   EDGE so the whole room fills the screen. Each archway is an invisible,
   generously-sized click target with a hover glow, positioned as a % of the
   artwork so the hotspots stay locked to the doors at any size.
   ── To cap how wide it gets on very large monitors, change the 1600px below.
      For a hard maximum at the art's native crispness, use min(100vw,1024px). */
.house2{position:relative;left:50%;transform:translateX(-50%);width:100vw;margin:0 0 12px}
.house2-wall{position:relative;overflow:hidden;line-height:0;box-shadow:0 30px 70px -22px rgba(10,6,2,.55)}
.house2-wallimg{display:block;width:100%;height:auto;-webkit-user-drag:none;user-select:none}
.house2-doors{position:absolute;inset:0}
.hd{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);height:calc(var(--h)*1%);
  background:none;border:0;border-radius:16px 16px 8px 8px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .18s ease,box-shadow .18s ease,transform .12s ease}
.hd:hover,.hd:focus-visible{outline:none;background:radial-gradient(ellipse at 50% 58%,rgba(233,202,128,.24),rgba(233,202,128,0) 70%);box-shadow:inset 0 0 0 2px rgba(233,202,128,.55),0 0 30px rgba(233,202,128,.32)}
.hd:active{transform:scale(.99)}

/* Inner-room door — a room discovered inside another room */
.inner-door{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 12px;width:100%;text-align:left;margin:16px 0 20px;padding:14px 18px;border:1px solid rgba(201,162,74,.4);border-left:4px solid var(--gold,#C9A24A);border-radius:13px;background:linear-gradient(180deg,rgba(201,162,74,.07),rgba(201,162,74,.02));cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease}
.inner-door:hover{border-color:var(--gold,#C9A24A);background:rgba(201,162,74,.11);transform:translateX(2px)}
.inner-door-k{flex-basis:100%;font-family:var(--sans);font-size:.64rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep,#a8842f)}
.inner-door-n{font-family:var(--serif);font-size:1.22rem;font-weight:600;color:var(--baobab-brown,#6b4423)}
.inner-door-d{flex:1;min-width:200px;font-family:var(--sans);font-size:.84rem;color:var(--ink-soft,#6b6157);line-height:1.4}
.inner-door-go{font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-deep,#a8842f);white-space:nowrap}
.hm-room-link{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line-soft);padding:16px 4px;cursor:pointer;transition:padding-left .16s ease,background .16s ease}
.hm-room-link:hover{padding-left:12px;background:linear-gradient(90deg,rgba(201,162,74,.07),transparent)}
.hm-rl-name{font-family:var(--serif);font-size:1.32rem;color:var(--ink);flex:0 0 auto;min-width:190px}
.hm-rl-d{font-size:.9rem;color:var(--ink-soft);flex:1}
.hm-rl-arrow{color:var(--gold-deep,#a8842f);font-size:1.2rem;font-weight:700;transition:transform .16s ease}
.hm-room-link:hover .hm-rl-arrow{transform:translateX(4px)}
@media(max-width:620px){
  .hm-room-link{flex-wrap:wrap;gap:2px 12px;padding:14px 4px}
  .hm-rl-name{min-width:0;flex:1}
  .hm-rl-d{flex:1 1 100%;order:3}
}

/* ── Concierge room invitations (override the plain-menu styling) ── */
.hm-room-link{gap:18px;padding:18px 6px;align-items:center}
.hm-rl-ic{font-size:1.5rem;line-height:1;flex:0 0 34px;width:34px;text-align:center}
.hm-rl-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.hm-rl-name{font-family:var(--serif);font-size:1.3rem;color:var(--ink);line-height:1.12;min-width:0}
.hm-rl-d{font-size:.88rem;color:var(--ink-soft)}
@media(max-width:620px){.hm-room-link{flex-wrap:nowrap}.hm-rl-d{flex:none;order:0}}

/* ══ Stewardship Journey — first-Griot onboarding ══ */
.jy-wrap{max-width:560px;margin:0 auto;padding:60px 22px 90px}
.jy-card{background:var(--paper);border:1px solid var(--line-soft);border-radius:18px;padding:40px 32px;box-shadow:0 10px 44px rgba(20,20,20,.07)}
.jy-center{text-align:center}
.jy-h1{font-family:var(--serif);font-size:2.4rem;color:var(--ink);line-height:1.08;margin:14px 0 10px}
.jy-h2{font-family:var(--serif);font-size:1.8rem;color:var(--ink);line-height:1.14;margin:6px 0 8px}
.jy-tagline{font-family:var(--serif);font-size:1.25rem;font-style:italic;color:var(--gold-deep);line-height:1.42;margin:0 auto 14px;max-width:30em}
.jy-sub{color:var(--ink-soft);font-size:.98rem;line-height:1.5;margin:0 0 22px}
.jy-center .jy-sub{margin-left:auto;margin-right:auto;max-width:32em}
.jy-confirm{font-size:1.05rem;color:var(--ink);margin:8px 0 18px}
.jy-progress{margin:0 0 22px}
.jy-step-label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
.jy-bar{height:4px;background:var(--line-soft);border-radius:4px;margin-top:8px;overflow:hidden}
.jy-bar>span{display:block;height:100%;background:var(--gold);transition:width .3s ease}
.jy-field{display:block;font-size:.85rem;color:var(--ink-soft);margin:0 0 4px}
.jy-field input{display:block;width:100%;margin-top:6px;padding:13px 14px;border:1px solid var(--line-soft);border-radius:10px;font-size:1rem;font-family:var(--sans);background:#fff;color:var(--ink);box-sizing:border-box}
.jy-err{color:#b4452f;font-size:.85rem;margin:6px 0 0}
.jy-group{margin:0 0 20px}
.jy-label{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin:0 0 8px}
.jy-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.jy-chip{background:rgba(58,130,102,.1);color:var(--green-deep);border:1px solid rgba(58,130,102,.25);border-radius:999px;padding:5px 13px;font-size:.9rem}
.jy-adder{display:flex;gap:8px}
.jy-adder input{flex:1;min-width:0;padding:11px 13px;border:1px solid var(--line-soft);border-radius:10px;font-size:.95rem;font-family:var(--sans);background:#fff;color:var(--ink)}
.jy-actions{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin-top:26px;flex-wrap:wrap}
.jy-const{list-style:none;padding:0;margin:0 0 8px}
.jy-const li{font-family:var(--serif);font-size:1.15rem;color:var(--ink);padding:12px 0;border-bottom:1px solid var(--line-soft)}
.jy-const li:last-child{border-bottom:none}
.jy-rooms{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0}
.jy-room{display:flex;align-items:center;gap:9px;text-align:left;background:#fff;border:1px solid var(--line-soft);border-radius:12px;padding:15px 14px;font-family:var(--serif);font-size:1.05rem;color:var(--ink);cursor:pointer;transition:border-color .15s,transform .15s}
.jy-room:hover{border-color:var(--gold);transform:translateY(-1px)}
.jy-room>span{font-size:1.25rem}
.jy-backlink{display:block;margin:18px auto 0;background:none;border:none;color:var(--ink-soft);font-size:.9rem;cursor:pointer}
.jy-backlink:hover{color:var(--ink)}
.btn-ghost.sm{padding:8px 14px;font-size:.85rem}
@media(max-width:560px){.jy-rooms{grid-template-columns:1fr}.jy-card{padding:30px 22px}.jy-h1{font-size:2rem}.jy-actions{justify-content:stretch}.jy-actions .btn{flex:1}}

/* Stewardship Progress card on the home */
.setup-card{background:linear-gradient(160deg,rgba(201,162,74,.09),rgba(58,130,102,.05));border:1px solid var(--line-soft);border-radius:16px;padding:26px 26px 22px}
.setup-rows{display:flex;flex-wrap:wrap;gap:9px 22px;margin:14px 0 18px}
.setup-row{display:flex;align-items:center;gap:8px;font-size:.95rem;color:var(--ink-soft)}
.setup-row.is-done{color:var(--ink)}
.setup-tick{display:inline-flex;width:20px;height:20px;align-items:center;justify-content:center;border-radius:50%;font-size:.72rem;color:#fff;background:var(--line-soft);flex:0 0 auto}
.setup-row.is-done .setup-tick{background:var(--green)}
.setup-meter{height:6px;background:var(--line-soft);border-radius:6px;overflow:hidden;margin:0 0 14px}
.setup-meter>span{display:block;height:100%;background:var(--gold);transition:width .4s ease}
.setup-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.setup-pct{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}


/* ── Enter the rooms: door labels + textile watermark ── */
.hm-rooms-quiet-section{position:relative;overflow:hidden}
.hm-rooms-quiet-section>*{position:relative;z-index:1}
.hm-rooms-quiet-section::before{content:"";position:absolute;z-index:0;top:0;bottom:0;left:0;width:320px;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc2NCcgaGVpZ2h0PSc2NCcgdmlld0JveD0nMCAwIDY0IDY0Jz48ZyBmaWxsPSdub25lJyBzdHJva2U9JyMxNDE0MTQnIHN0cm9rZS13aWR0aD0nMS4xJz48cGF0aCBkPSdNMzIgOCBMNTYgMzIgTDMyIDU2IEw4IDMyIFonLz48cGF0aCBkPSdNMzIgMjAgTDQ0IDMyIEwzMiA0NCBMMjAgMzIgWicvPjxwYXRoIGQ9J00wIDMyIEg4IE01NiAzMiBINjQgTTMyIDAgVjggTTMyIDU2IFY2NCcvPjwvZz48ZyBmaWxsPScjMTQxNDE0Jz48Y2lyY2xlIGN4PSczMicgY3k9JzMyJyByPScxLjcnLz48Y2lyY2xlIGN4PScwJyBjeT0nMCcgcj0nMS40Jy8+PGNpcmNsZSBjeD0nNjQnIGN5PScwJyByPScxLjQnLz48Y2lyY2xlIGN4PScwJyBjeT0nNjQnIHI9JzEuNCcvPjxjaXJjbGUgY3g9JzY0JyBjeT0nNjQnIHI9JzEuNCcvPjwvZz48L3N2Zz4=");
  background-size:64px 64px;background-position:left top;opacity:.08;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 38%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 38%,transparent 100%)}
.hm-rooms-intro{max-width:46em;color:var(--ink-soft);font-size:1rem;line-height:1.55;margin:0 0 26px}
.hm-rl-door{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-deep,#a8842f);font-weight:600;white-space:nowrap;flex:0 0 auto;transition:transform .16s ease,color .16s ease}
.hm-room-link:hover .hm-rl-door{transform:translateX(4px);color:var(--gold)}
@media(max-width:620px){.hm-rooms-quiet-section::before{width:160px}.hm-rl-door{font-size:.62rem;letter-spacing:.1em}}


/* ══ Heritage textile (Malian mudcloth / Nigerian Adire inspired) ══ */
:root{--legacy-textile:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc4OCcgaGVpZ2h0PSc4OCcgdmlld0JveD0nMCAwIDg4IDg4Jz48ZyBmaWxsPSdub25lJyBzdHJva2Utd2lkdGg9JzEuMyc+PHBhdGggZD0nTTQ0IDEyIEw3MiA0NCBMNDQgNzYgTDE2IDQ0IFonIHN0cm9rZT0nI2IwN2QyYScgc3Ryb2tlLW9wYWNpdHk9Jy4zMCcvPjxwYXRoIGQ9J000NCAyNiBMNTggNDQgTDQ0IDYyIEwzMCA0NCBaJyBzdHJva2U9JyMzYTgyNjYnIHN0cm9rZS1vcGFjaXR5PScuMjYnLz48cGF0aCBkPSdNMCA3IEw4IDAgTDE2IDcgTDI0IDAgTDMyIDcgTDQwIDAgTDQ4IDcgTDU2IDAgTDY0IDcgTDcyIDAgTDgwIDcgTDg4IDAnIHN0cm9rZT0nI2E4NWEzMicgc3Ryb2tlLW9wYWNpdHk9Jy4yOCcvPjxwYXRoIGQ9J00wIDgxIEw4IDg4IEwxNiA4MSBMMjQgODggTDMyIDgxIEw0MCA4OCBMNDggODEgTDU2IDg4IEw2NCA4MSBMNzIgODggTDgwIDgxIEw4OCA4OCcgc3Ryb2tlPScjYTg1YTMyJyBzdHJva2Utb3BhY2l0eT0nLjI4Jy8+PC9nPjxnPjxjaXJjbGUgY3g9JzQ0JyBjeT0nNDQnIHI9JzIuMScgZmlsbD0nI2IwN2QyYScgZmlsbC1vcGFjaXR5PScuNDInLz48Y2lyY2xlIGN4PSc4JyBjeT0nNDQnIHI9JzEuNScgZmlsbD0nIzNhODI2NicgZmlsbC1vcGFjaXR5PScuMzYnLz48Y2lyY2xlIGN4PSc4MCcgY3k9JzQ0JyByPScxLjUnIGZpbGw9JyMzYTgyNjYnIGZpbGwtb3BhY2l0eT0nLjM2Jy8+PGNpcmNsZSBjeD0nNDQnIGN5PSc4JyByPScxLjUnIGZpbGw9JyNiMDdkMmEnIGZpbGwtb3BhY2l0eT0nLjM2Jy8+PGNpcmNsZSBjeD0nNDQnIGN5PSc4MCcgcj0nMS41JyBmaWxsPScjYjA3ZDJhJyBmaWxsLW9wYWNpdHk9Jy4zNicvPjwvZz48L3N2Zz4=")}
.hm-rooms-quiet-section::before{background-image:var(--legacy-textile)}

/* ══ Two-column hero: headline left, Ancestral Memory card right ══ */
.hm-hero{position:relative;align-items:center;padding:54px 0 48px}
.hm-hero>*{position:relative;z-index:1}
.hm-hero::before{content:"";position:absolute;z-index:0;inset:-30px -40px -10px -40px;
  background-image:var(--legacy-textile);background-size:80px 80px;opacity:.07;pointer-events:none;
  -webkit-mask-image:linear-gradient(170deg,#000 0%,#000 55%,transparent 95%);
  mask-image:linear-gradient(170deg,#000 0%,#000 55%,transparent 95%)}
.hm-hero-left{display:flex;flex-direction:column;gap:16px}
.hm-hero-left .hm-lede{max-width:30em}

.hm-ancestral{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:13px;
  background:linear-gradient(157deg,#261c12 0%,#171009 78%);border-radius:26px;padding:38px 34px;
  color:#f3e9d8;box-shadow:0 34px 90px -44px rgba(20,14,8,.78);cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease}
.hm-ancestral:hover{transform:translateY(-2px);box-shadow:0 40px 100px -44px rgba(20,14,8,.85)}
.hm-ancestral::before{content:"";position:absolute;top:-130px;right:-130px;width:300px;height:300px;
  border:1px solid rgba(201,162,74,.42);border-radius:50%;pointer-events:none}
.hm-ancestral::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(201,162,74,.18) 0 6px,transparent 6px 12px)}
.hm-ancestral .eyebrow{color:var(--gold)}
.anc-h{font-family:var(--serif);font-size:2.05rem;line-height:1.06;color:#fff;margin:2px 0 2px}
.anc-body{font-size:1rem;line-height:1.55;color:#d9cdb8;margin:0}
.anc-icons{display:flex;gap:11px;margin-top:8px;flex-wrap:wrap}
.anc-icons span{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;background:rgba(255,255,255,.05);border:1px solid rgba(201,162,74,.28)}
.anc-enter{margin-top:8px;color:var(--gold);font-size:.86rem;font-weight:600;letter-spacing:.04em}
.hm-ancestral:hover .anc-enter{color:#fff}

@media(max-width:860px){
  .hm-hero{padding:34px 0 30px}
  .anc-h{font-size:1.75rem}
  .hm-ancestral{padding:30px 26px}
}

/* ── Heritage cloth runs the full home, in color ── */
/* (room textile removed — the baobab illustration is the single backdrop) */
.hm-rooms-quiet-section::before{display:none}
/* widen the Ancestral card so it reads square, icons in one row */
.hm-hero{grid-template-columns:1fr 1fr;gap:32px}
.anc-icons{flex-wrap:nowrap}
@media(max-width:860px){.hm-hero{grid-template-columns:1fr}.anc-icons{flex-wrap:wrap}}

/* ════════════════════════════════════════════════════════════════════
   THE HOUSE OF LEGACY — ONE full-page scene (tree + doors)
   The single artwork (legacy-house.png) is the whole hero: the baobab tree/
   gate on top, ten carved doors below. "Welcome home" + the Ancestral Memory
   card are overlaid on the TREE; the doors below stay clickable. ONE image,
   ONE tree, full width — no separate/duplicate tree.
   ──────────────────────────────────────────────────────────────────── */
/* dark scrim over the top (tree) band so the white welcome copy reads;
   ends above the doors, which begin ~36% down the artwork */
.house2-wall::before{
  content:"";position:absolute;top:0;left:0;right:0;height:36%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,9,4,.46) 0%,rgba(14,9,4,.24) 46%,rgba(14,9,4,0) 100%);
}
/* welcome + ancestral, overlaid on the tree at the top of the artwork */
.house2-hero{
  position:absolute;top:0;left:0;right:0;z-index:3;pointer-events:none;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(16px,3vw,44px);align-items:start;
  padding:clamp(20px,4vw,60px) clamp(20px,5vw,76px) 0;
}
.house2-hero>*{pointer-events:auto}
.house2-hero .hm-hero-left{display:flex;flex-direction:column;gap:12px}
.house2-hero .eyebrow.gold{color:var(--gold2,#E6C878)}
.house2-hero .hm-h1{color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.5)}
.house2-hero .hm-lede{color:#ece3d3;text-shadow:0 1px 14px rgba(0,0,0,.6);max-width:30em}
.house2-hero .hm-ancestral{margin:0}
@media(max-width:860px){
  .house2-hero{grid-template-columns:1fr;gap:12px;padding:clamp(12px,4vw,24px) clamp(12px,5vw,24px) 0}
  .house2-wall::before{height:28%}
}

/* ── Room NAMES on the doors (sit on each door, under its painted icon) ── */
.hd{display:flex;align-items:flex-end;justify-content:center}
.hd-name{
  pointer-events:none;text-align:center;line-height:1.04;padding:0 4% 7%;
  font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-weight:600;
  font-size:clamp(9px,1.04vw,17px);
  color:#E9C878;text-shadow:0 1px 3px rgba(0,0,0,.82),0 0 10px rgba(0,0,0,.55);
}
.hd:hover .hd-name,.hd:focus-visible .hd-name{color:#fff}

/* ── "Enter the rooms" — set on the wall just above the top row of doors ── */
.house2-rooms-head{position:absolute;top:31.5%;left:0;right:0;z-index:3;text-align:center;pointer-events:none}
.house2-rooms-head span{
  font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-weight:600;letter-spacing:.015em;
  font-size:clamp(16px,2.3vw,38px);color:#f4e6c8;
  text-shadow:0 2px 12px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.55);
}
@media(max-width:860px){
  .house2-rooms-head{top:30%}
  .house2-rooms-head span{font-size:clamp(13px,3.6vw,22px)}
}

/* ── Search bar pinned at the top of the room ── */
.hm-search-top{margin:0 0 8px;padding-top:2px}

/* ── Top-bar Griot identity: photo + name + role ── */
.griot-id{display:flex;align-items:center;gap:11px;padding:5px 8px 5px 5px;border:1px solid transparent;border-radius:999px;background:none;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.griot-id:hover,.griot-id:focus-visible{outline:none;background:rgba(201,162,74,.1);border-color:rgba(201,162,74,.4)}
.griot-id-photo{position:relative;width:42px;height:42px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  background:var(--navy,#14233B);border:2px solid var(--gold,#C9A24A);box-shadow:0 2px 8px rgba(20,14,8,.22)}
.griot-id-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.griot-id-initial{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-weight:600;font-size:1.15rem}
.griot-id-text{display:flex;flex-direction:column;line-height:1.12}
.griot-id-name{font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-size:1.04rem;color:var(--ink,#141414);font-weight:600}
.griot-id-role{font-size:.72rem;letter-spacing:.04em;color:var(--gold-deep,#a8842f);font-weight:600}
.griot-id-text{align-items:flex-start}
.griot-id-caret{color:var(--ink-soft,#6b6157);flex:0 0 auto;margin-left:1px}
@media(max-width:760px){.griot-id-text{display:none}.griot-id-caret{display:none}}

/* ── My Account modal ── */
.ga-overlay{position:fixed;inset:0;z-index:10000;background:rgba(14,9,4,.62);display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px 16px;overflow-y:auto}
.ga-overlay[hidden]{display:none}
.ga-modal{position:relative;width:100%;max-width:440px;background:var(--cream,#f7efe0);border:1px solid rgba(201,162,74,.4);border-radius:18px;box-shadow:0 30px 80px -20px rgba(8,5,2,.6);padding:24px 24px 20px;font-family:var(--sans,'DM Sans',sans-serif)}
.ga-x{position:absolute;top:12px;right:14px;background:none;border:0;font-size:1.5rem;line-height:1;color:var(--ink-soft,#6b6157);cursor:pointer;padding:4px 8px;border-radius:8px}
.ga-x:hover{background:rgba(20,14,8,.07);color:var(--ink,#141414)}
.ga-head{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.ga-photo{position:relative;width:58px;height:58px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:var(--green,#3a8266);border:2px solid var(--gold,#C9A24A)}
.ga-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ga-photo #ga-photo-initial{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-weight:600;font-size:1.5rem}
.ga-name{font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-weight:600;font-size:1.42rem;color:var(--ink,#141414);margin:0;line-height:1.1}
.ga-role{margin:2px 0 0;font-size:.74rem;letter-spacing:.05em;color:var(--gold-deep,#a8842f);font-weight:600;text-transform:uppercase}
.ga-sec{border-top:1px solid rgba(201,162,74,.28);padding-top:16px;margin-top:16px}
.ga-sec h3{font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-weight:600;font-size:1.12rem;color:var(--ink,#141414);margin:0 0 4px}
.ga-hint{font-size:.82rem;color:var(--ink-soft,#6b6157);margin:0 0 12px;line-height:1.45}
.ga-input{display:block;width:100%;box-sizing:border-box;margin-bottom:9px;padding:11px 13px;border:1px solid rgba(20,14,8,.18);border-radius:10px;background:#fff;font-size:.92rem;font-family:inherit;color:var(--ink,#141414)}
.ga-input:focus{outline:none;border-color:var(--gold,#C9A24A);box-shadow:0 0 0 3px rgba(201,162,74,.18)}
.ga-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:2px}
.ga-btn{font-family:inherit;font-weight:700;font-size:.86rem;letter-spacing:.01em;padding:10px 18px;border-radius:10px;border:1px solid rgba(201,162,74,.5);background:#fff;color:var(--ink,#141414);cursor:pointer;transition:background .15s ease,transform .1s ease}
.ga-btn:hover{background:#fbf4e4}
.ga-btn:active{transform:scale(.98)}
.ga-btn-gold{background:linear-gradient(180deg,var(--gold2,#E6C878),var(--gold,#C9A24A));border-color:var(--gold,#C9A24A);color:#2a1d05}
.ga-btn-gold:hover{filter:brightness(1.04);background:linear-gradient(180deg,var(--gold2,#E6C878),var(--gold,#C9A24A))}
.ga-status{font-size:.82rem;font-weight:600}
.ga-status.ok{color:var(--green,#3a8266)}
.ga-status.err{color:#a8341f}
.ga-sec-actions{display:flex;flex-direction:column;gap:2px}
.ga-link{text-align:left;background:none;border:0;cursor:pointer;font-family:inherit;font-size:.9rem;font-weight:600;color:var(--gold-deep,#a8842f);padding:9px 4px;border-radius:8px}
.ga-link:hover{background:rgba(201,162,74,.1)}
.ga-signout{color:#a8341f}
@media(max-width:520px){.ga-modal{padding:20px 18px 16px}}

/* ── 3-up welcome band: Welcome | Family Constitution | Ancestral ── */
.house2-hero-3{
  grid-template-columns:0.92fr 1.16fr 0.92fr;
  gap:clamp(14px,2vw,30px);
  align-items:start;
}
.house2-hero-3 .hm-hero-left .hm-lede{max-width:18em}

/* Compact Family Constitution card — cream, sits on the tree as the centerpiece */
.hm-const-hero{
  position:relative;margin-top:6px;text-align:center;
  background:linear-gradient(180deg,#fbf4e4,#f3e7cd);
  border:1px solid rgba(201,162,74,.55);border-radius:18px;
  padding:clamp(22px,1.7vw,30px) clamp(16px,1.5vw,26px) clamp(14px,1.2vw,20px);
  box-shadow:0 26px 64px -20px rgba(8,5,2,.6);
}
.hm-const-emblem{
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#141414;border:2px solid var(--gold,#C9A24A);box-shadow:0 4px 12px rgba(8,5,2,.4)}
.hm-const-emblem svg{width:26px;height:26px}
.hm-const-eyebrow{display:block;text-align:center;color:#a8842f !important;letter-spacing:.13em;margin-top:4px}
.hm-const-hero .hm-const-title{
  font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-weight:600;color:var(--ink,#141414);
  font-size:clamp(20px,1.9vw,32px);line-height:1.05;margin:.12em 0 .55em;text-align:center}
.hm-const-hero #hm-const-articles{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-bottom:.7em}
.hm-const-hero .hm-const-article{
  display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center;
  background:none;border:0;border-left:1px solid rgba(140,110,60,.24);
  padding:2px clamp(7px,.7vw,13px);cursor:pointer;font:inherit}
.hm-const-hero .hm-const-article:first-child{border-left:0}
.hm-const-hero .hm-const-article b{
  font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-weight:600;
  font-size:clamp(12px,.95vw,15.5px);color:var(--ink,#141414);line-height:1.1}
.hm-const-hero .hm-const-article span{
  font-size:clamp(9.5px,.74vw,11.5px);color:#5c4a32;line-height:1.32}
.hm-const-hero .hm-const-article:hover b{color:#a8842f}
.hm-const-read-link{
  display:inline-block;background:none;border:0;cursor:pointer;
  font-family:var(--sans,'DM Sans',sans-serif);font-weight:700;font-size:.82rem;letter-spacing:.02em;
  color:#a8842f;padding:4px 6px}
.hm-const-read-link:hover{color:#7d6020;text-decoration:underline}

/* Tablet: stack to a single readable column on the tree */
@media(max-width:980px){
  .house2-hero-3{grid-template-columns:1fr;gap:12px}
  .house2-hero-3 .hm-hero-left .hm-lede{max-width:30em}
  .hm-const-hero{margin-top:18px}
}
/* Phone: keep the constitution compact so it doesn't run onto the doors */
@media(max-width:560px){
  .hm-const-hero{padding:18px 14px 12px}
  .hm-const-hero #hm-const-articles{grid-template-columns:1fr;gap:6px}
  .hm-const-hero .hm-const-article{border-left:0;border-top:1px solid rgba(140,110,60,.18);padding-top:7px}
  .hm-const-hero .hm-const-article:first-child{border-top:0}
}


/* ══ Heritage backdrop — ornament in the margins, paper kept open ══ */
:root{
  --mudcloth:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMDAnIGhlaWdodD0nMjQwJyB2aWV3Qm94PScwIDAgMzAwIDI0MCc+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSdmJyB4MT0nMCcgeTE9JzAnIHgyPScxJyB5Mj0nMCc+PHN0b3Agb2Zmc2V0PScwJyBzdG9wLWNvbG9yPScjZjFlNmNjJyBzdG9wLW9wYWNpdHk9JzEnLz48c3RvcCBvZmZzZXQ9Jy41JyBzdG9wLWNvbG9yPScjZjFlNmNjJyBzdG9wLW9wYWNpdHk9JzAnLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48ZyBmaWxsPSdub25lJyBzdHJva2U9JyNhMDdjMmMnIHN0cm9rZS13aWR0aD0nMS41JyBzdHJva2Utb3BhY2l0eT0nLjYnPjxwYXRoIGQ9J001NSAyNSBMNzAgNDAgTDU1IDU1IEw0MCA0MCBaJy8+PHBhdGggZD0nTTU1IDMxIEw2NCA0MCBMNTUgNDkgTDQ2IDQwIFonLz48Y2lyY2xlIGN4PSc1NScgY3k9JzQwJyByPScxLjgnIGZpbGw9JyNhMDdjMmMnIHN0cm9rZT0nbm9uZScvPjxjaXJjbGUgY3g9JzExOCcgY3k9JzI4JyByPScxLjYnIGZpbGw9JyNhMDdjMmMnIHN0cm9rZT0nbm9uZScvPjxjaXJjbGUgY3g9JzExOCcgY3k9JzQwJyByPScxLjYnIGZpbGw9JyNhMDdjMmMnIHN0cm9rZT0nbm9uZScvPjxjaXJjbGUgY3g9JzExOCcgY3k9JzUyJyByPScxLjYnIGZpbGw9JyNhMDdjMmMnIHN0cm9rZT0nbm9uZScvPjxjaXJjbGUgY3g9JzEzMCcgY3k9JzI4JyByPScxLjYnIGZpbGw9JyNhMDdjMmMnIHN0cm9rZT0nbm9uZScvPjxjaXJjbGUgY3g9JzEzMCcgY3k9JzQwJyByPScxLjYnIGZpbGw9JyNhMDdjMmMnIHN0cm9rZT0nbm9uZScvPjxjaXJjbGUgY3g9JzEzMCcgY3k9JzUyJyByPScxLjYnIGZpbGw9JyNhMDdjMmMnIHN0cm9rZT0nbm9uZScvPjxjaXJjbGUgY3g9JzE0MicgY3k9JzI4JyByPScxLjYnIGZpbGw9JyNhMDdjMmMnIHN0cm9rZT0nbm9uZScvPjxjaXJjbGUgY3g9JzE0MicgY3k9JzQwJyByPScxLjYnIGZpbGw9JyNhMDdjMmMnIHN0cm9rZT0nbm9uZScvPjxjaXJjbGUgY3g9JzE0MicgY3k9JzUyJyByPScxLjYnIGZpbGw9JyNhMDdjMmMnIHN0cm9rZT0nbm9uZScvPjxwYXRoIGQ9J00xOTEgMjYgTDIxOSA1NCBNMjE5IDI2IEwxOTEgNTQnLz48Y2lyY2xlIGN4PScxOTEnIGN5PScyNicgcj0nMS41JyBmaWxsPScjYTA3YzJjJyBzdHJva2U9J25vbmUnLz48Y2lyY2xlIGN4PScyMTknIGN5PScyNicgcj0nMS41JyBmaWxsPScjYTA3YzJjJyBzdHJva2U9J25vbmUnLz48Y2lyY2xlIGN4PScxOTEnIGN5PSc1NCcgcj0nMS41JyBmaWxsPScjYTA3YzJjJyBzdHJva2U9J25vbmUnLz48Y2lyY2xlIGN4PScyMTknIGN5PSc1NCcgcj0nMS41JyBmaWxsPScjYTA3YzJjJyBzdHJva2U9J25vbmUnLz48cmVjdCB4PScyNTEnIHk9JzI2JyB3aWR0aD0nMjgnIGhlaWdodD0nMjgnLz48cmVjdCB4PScyNTcnIHk9JzMyJyB3aWR0aD0nMTYnIGhlaWdodD0nMTYnLz48cGF0aCBkPSdNNDEgMTIwIEw1NSAxMDYgTDY5IDEyMCcvPjxwYXRoIGQ9J000MSAxMjggTDU1IDExNCBMNjkgMTI4Jy8+PHBhdGggZD0nTTEzMCAxMDUgTDE0NSAxMjAgTDEzMCAxMzUgTDExNSAxMjAgWicvPjxwYXRoIGQ9J00xMzAgMTExIEwxMzkgMTIwIEwxMzAgMTI5IEwxMjEgMTIwIFonLz48Y2lyY2xlIGN4PScxMzAnIGN5PScxMjAnIHI9JzEuOCcgZmlsbD0nI2EwN2MyYycgc3Ryb2tlPSdub25lJy8+PGNpcmNsZSBjeD0nMTkzJyBjeT0nMTA4JyByPScxLjYnIGZpbGw9JyNhMDdjMmMnIHN0cm9rZT0nbm9uZScvPjxjaXJjbGUgY3g9JzE5MycgY3k9JzEyMCcgcj0nMS42JyBmaWxsPScjYTA3YzJjJyBzdHJva2U9J25vbmUnLz48Y2lyY2xlIGN4PScxOTMnIGN5PScxMzInIHI9JzEuNicgZmlsbD0nI2EwN2MyYycgc3Ryb2tlPSdub25lJy8+PGNpcmNsZSBjeD0nMjA1JyBjeT0nMTA4JyByPScxLjYnIGZpbGw9JyNhMDdjMmMnIHN0cm9rZT0nbm9uZScvPjxjaXJjbGUgY3g9JzIwNScgY3k9JzEyMCcgcj0nMS42JyBmaWxsPScjYTA3YzJjJyBzdHJva2U9J25vbmUnLz48Y2lyY2xlIGN4PScyMDUnIGN5PScxMzInIHI9JzEuNicgZmlsbD0nI2EwN2MyYycgc3Ryb2tlPSdub25lJy8+PGNpcmNsZSBjeD0nMjE3JyBjeT0nMTA4JyByPScxLjYnIGZpbGw9JyNhMDdjMmMnIHN0cm9rZT0nbm9uZScvPjxjaXJjbGUgY3g9JzIxNycgY3k9JzEyMCcgcj0nMS42JyBmaWxsPScjYTA3YzJjJyBzdHJva2U9J25vbmUnLz48Y2lyY2xlIGN4PScyMTcnIGN5PScxMzInIHI9JzEuNicgZmlsbD0nI2EwN2MyYycgc3Ryb2tlPSdub25lJy8+PHBhdGggZD0nTTI1MSAxMDYgTDI3OSAxMzQgTTI3OSAxMDYgTDI1MSAxMzQnLz48Y2lyY2xlIGN4PScyNTEnIGN5PScxMDYnIHI9JzEuNScgZmlsbD0nI2EwN2MyYycgc3Ryb2tlPSdub25lJy8+PGNpcmNsZSBjeD0nMjc5JyBjeT0nMTA2JyByPScxLjUnIGZpbGw9JyNhMDdjMmMnIHN0cm9rZT0nbm9uZScvPjxjaXJjbGUgY3g9JzI1MScgY3k9JzEzNCcgcj0nMS41JyBmaWxsPScjYTA3YzJjJyBzdHJva2U9J25vbmUnLz48Y2lyY2xlIGN4PScyNzknIGN5PScxMzQnIHI9JzEuNScgZmlsbD0nI2EwN2MyYycgc3Ryb2tlPSdub25lJy8+PHJlY3QgeD0nNDEnIHk9JzE4Nicgd2lkdGg9JzI4JyBoZWlnaHQ9JzI4Jy8+PHJlY3QgeD0nNDcnIHk9JzE5Micgd2lkdGg9JzE2JyBoZWlnaHQ9JzE2Jy8+PHBhdGggZD0nTTExNiAyMDAgTDEzMCAxODYgTDE0NCAyMDAnLz48cGF0aCBkPSdNMTE2IDIwOCBMMTMwIDE5NCBMMTQ0IDIwOCcvPjxwYXRoIGQ9J00yMDUgMTg1IEwyMjAgMjAwIEwyMDUgMjE1IEwxOTAgMjAwIFonLz48cGF0aCBkPSdNMjA1IDE5MSBMMjE0IDIwMCBMMjA1IDIwOSBMMTk2IDIwMCBaJy8+PGNpcmNsZSBjeD0nMjA1JyBjeT0nMjAwJyByPScxLjgnIGZpbGw9JyNhMDdjMmMnIHN0cm9rZT0nbm9uZScvPjxjaXJjbGUgY3g9JzI1MycgY3k9JzE4OCcgcj0nMS42JyBmaWxsPScjYTA3YzJjJyBzdHJva2U9J25vbmUnLz48Y2lyY2xlIGN4PScyNTMnIGN5PScyMDAnIHI9JzEuNicgZmlsbD0nI2EwN2MyYycgc3Ryb2tlPSdub25lJy8+PGNpcmNsZSBjeD0nMjUzJyBjeT0nMjEyJyByPScxLjYnIGZpbGw9JyNhMDdjMmMnIHN0cm9rZT0nbm9uZScvPjxjaXJjbGUgY3g9JzI2NScgY3k9JzE4OCcgcj0nMS42JyBmaWxsPScjYTA3YzJjJyBzdHJva2U9J25vbmUnLz48Y2lyY2xlIGN4PScyNjUnIGN5PScyMDAnIHI9JzEuNicgZmlsbD0nI2EwN2MyYycgc3Ryb2tlPSdub25lJy8+PGNpcmNsZSBjeD0nMjY1JyBjeT0nMjEyJyByPScxLjYnIGZpbGw9JyNhMDdjMmMnIHN0cm9rZT0nbm9uZScvPjxjaXJjbGUgY3g9JzI3NycgY3k9JzE4OCcgcj0nMS42JyBmaWxsPScjYTA3YzJjJyBzdHJva2U9J25vbmUnLz48Y2lyY2xlIGN4PScyNzcnIGN5PScyMDAnIHI9JzEuNicgZmlsbD0nI2EwN2MyYycgc3Ryb2tlPSdub25lJy8+PGNpcmNsZSBjeD0nMjc3JyBjeT0nMjEyJyByPScxLjYnIGZpbGw9JyNhMDdjMmMnIHN0cm9rZT0nbm9uZScvPjwvZz48cmVjdCB4PScwJyB5PScwJyB3aWR0aD0nMzAwJyBoZWlnaHQ9JzI0MCcgZmlsbD0ndXJsKCNmKScvPjwvc3ZnPg==");
  --baobab:url('/baobab-heritage.png');
  --africa:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMDAnIGhlaWdodD0nMzQwJyB2aWV3Qm94PScwIDAgMzAwIDM0MCc+PHBhdGggZmlsbD0nbm9uZScgc3Ryb2tlPScjNmY1NTMwJyBzdHJva2Utb3BhY2l0eT0nLjE0JyBzdHJva2Utd2lkdGg9JzInIGQ9J003MCAzMCBDMTEwIDE4IDIwMCAyMCAyMzUgMzQgQzI1NSA2MCAyNTAgOTUgMjY4IDEyMCBMMjg2IDE1MCBDMjUwIDE2NiAyNDYgMTg2IDIzNiAyMTYgQzIyMSAyNjIgMTk2IDMwMiAxNzIgMzM0IEMxNTAgMzA2IDEyMCAyNzAgMTAwIDIzNCBDNzAgMTk4IDM4IDE4MCA0MyAxNTAgQzQ3IDExMCA1NSA3MCA3MCAzMCBaJy8+PC9zdmc+");
}
#screen-room{
  background-color:#f1e6cc;
  position:relative;
}

/* ══ The room rests on one archival illustration (baobab-heritage.png):
   faded Africa map (left), engraved baobab, woven raffia, mudcloth
   border (right). Full-bleed and held in place. ══ */
#screen-room::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--baobab);
  background-size:cover;
  background-position:center 25%;
  background-repeat:no-repeat;
}
/* Reading scrim: open down the centre column so the words on the placards
   stay crisp, clear at the margins so Africa, the baobab, and the mudcloth
   border all stay vivid. */
#screen-room::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(241,230,204,0) 0%, rgba(241,230,204,0) 8%,
      rgba(244,236,214,.38) 22%, rgba(245,238,217,.46) 38%,
      rgba(245,238,217,.48) 50%, rgba(245,238,217,.46) 62%,
      rgba(244,236,214,.38) 78%, rgba(241,230,204,0) 92%,
      rgba(241,230,204,0) 100%),
    linear-gradient(180deg,
      rgba(244,236,214,.30) 0%, rgba(244,236,214,0) 15%,
      rgba(244,236,214,0) 85%, rgba(244,236,214,.30) 100%);
}
#screen-room > *{position:relative;z-index:1}

@media(max-width:860px){
  #screen-room::before{opacity:.5}
  #screen-room::after{background:rgba(245,238,217,.55)}
}

/* ── Custom room icons (replace emoji; identical on every device) ── */
.hm-rl-ic{display:flex;align-items:center;justify-content:center}
.hm-rl-ic svg{width:27px;height:27px;display:block}


/* ══════════════════════════════════════════════════════════════════
   PRESERVATION PANELS
   Bare content sections lift onto solid aged-ivory placards — archive
   labels laid on the heritage surface — so words read crisply while the
   baobab stays vivid in the margins and the gaps between panels. The
   hero keeps its own .hm-welcome-text card; we don't double-card it.
   ══════════════════════════════════════════════════════════════════ */
.room-wrap .hm-section{
  position:relative;
  background:linear-gradient(180deg,rgba(253,248,238,.975),rgba(248,240,224,.955));
  border:1px solid rgba(107,68,35,.18);
  border-radius:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 22px 46px -30px rgba(44,26,14,.55);
  padding:clamp(22px,3vw,34px) clamp(20px,3.2vw,34px);
  margin-bottom:clamp(18px,2.6vw,28px);
}
/* Branches: a quiet display case so its cards float (not a card on a card) */
.room-wrap .hm-branches-section{
  background:rgba(250,243,228,.5);
  box-shadow:none;
  border-color:rgba(107,68,35,.12);
}
/* Rooms: drop the textile side-ornament; the placard carries it now */
.hm-rooms-quiet-section::before{display:none !important}
.room-wrap .hm-rooms-quiet .hm-room-link:hover{background:rgba(107,68,35,.05);border-radius:10px}

/* ── Journey typeahead: match people already in the record, avoid duplicates ── */
.jy-adder-wrap{position:relative}
.jy-suggest{
  position:absolute;left:0;right:60px;top:calc(100% + 6px);z-index:30;
  background:var(--paper);border:1px solid var(--line-soft);border-radius:12px;
  box-shadow:0 20px 48px -18px rgba(20,20,20,.4);overflow:hidden;
}
.jy-suggest[hidden]{display:none}
.jy-suggest-item{
  display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;
  padding:10px 14px;background:none;border:none;cursor:pointer;
  border-bottom:1px solid var(--line-soft);
}
.jy-suggest-item:last-of-type{border-bottom:none}
.jy-suggest-item:hover,.jy-suggest-item:focus-visible{background:rgba(58,130,102,.09)}
.jy-si-name{font-family:var(--serif);font-size:1rem;color:var(--ink);line-height:1.2}
.jy-si-hint{font-size:.74rem;color:var(--ink-soft)}
.jy-suggest-foot{
  padding:8px 14px;font-size:.72rem;color:var(--ink-soft);
  background:rgba(20,20,20,.025);border-top:1px solid var(--line-soft);
}
@media(max-width:560px){.jy-suggest{right:0}}

/* ── Relationship-type labels (step-parent · adopted · guardian …) ── */
.rel-tag{
  display:inline-block;font-size:.68rem;letter-spacing:.03em;
  color:var(--green-deep,#2f6b53);background:rgba(58,130,102,.12);
  border:1px solid rgba(58,130,102,.2);border-radius:999px;
  padding:1px 8px;margin-top:3px;white-space:nowrap;
}
.rel-person,.pf-person{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px}
.hf-chip-tag{
  font-size:.62rem;letter-spacing:.02em;color:var(--green-deep,#2f6b53);
  background:rgba(58,130,102,.12);border-radius:999px;padding:1px 7px;white-space:nowrap;
}

/* ── Parent link chip carrying a relationship-type selector ── */
.lp-chip-parent{
  flex-direction:column;align-items:stretch;gap:6px;
  border-radius:14px;padding:9px 11px;min-width:170px;
}
.lp-chip-parent .lp-chip-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:600}
.lp-type{
  font-family:var(--sans);font-size:.82rem;color:var(--ink);
  background:#fff;border:1px solid var(--line-soft);border-radius:8px;
  padding:6px 8px;cursor:pointer;width:100%;box-sizing:border-box;
}

/* ══ OUR ROOTS — derived lineage, many lines per person ══ */
.person-roots{margin:26px 0 8px}
.roots-head{margin-bottom:14px}
.roots-eyebrow{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--ink);line-height:1.1}
.roots-sub{display:block;font-size:.9rem;color:var(--ink-soft);margin-top:4px;font-style:italic}
.roots-group{margin:0 0 16px}
.roots-group-label{
  display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--gold-deep);margin:0 0 9px;
}
.roots-chips{display:flex;flex-wrap:wrap;gap:10px}
.root-chip{
  display:flex;flex-direction:column;gap:2px;text-align:left;
  background:linear-gradient(180deg,#fdf8ee,#f7efe0);
  border:1px solid rgba(107,68,35,.2);border-radius:13px;
  padding:11px 15px;cursor:pointer;min-width:140px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s;
}
.root-chip:hover{transform:translateY(-2px);border-color:var(--gold-deep);box-shadow:0 12px 26px -16px rgba(44,26,14,.5)}
.root-country{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--green-deep,#2f6b53)}
.root-fam{font-family:var(--serif);font-size:1.06rem;color:var(--ink);line-height:1.15}
.root-count{font-size:.74rem;color:var(--ink-soft)}
.roots-household .root-chip{background:rgba(58,130,102,.07);border-color:rgba(58,130,102,.28)}

/* ══ ROOTS METADATA EDITOR ══ */
.re-overlay{position:fixed;inset:0;z-index:340;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .22s ease}
.re-overlay.open{opacity:1;pointer-events:auto}
.re-backdrop{position:absolute;inset:0;background:rgba(20,16,10,.46)}
.re-panel{position:relative;width:min(560px,94vw);max-height:92vh;overflow-y:auto;background:var(--paper);border-radius:18px;box-shadow:0 30px 80px -24px rgba(20,16,10,.5);padding:30px 28px 26px;transform:translateY(14px) scale(.98);transition:transform .26s cubic-bezier(.22,.61,.36,1)}
.re-overlay.open .re-panel{transform:none}
.re-eyebrow{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--gold-deep)}
.re-title{font-family:var(--serif);font-size:1.7rem;margin:6px 0 4px;color:var(--ink);line-height:1.1}
.re-note{font-size:.86rem;color:var(--ink-soft);margin:0 0 18px;line-height:1.5}
.re-field{margin:0 0 16px}
.re-field>label{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-soft);margin:0 0 6px}
.re-field input[type=text],.re-field textarea,.re-root-select{width:100%;box-sizing:border-box;padding:11px 13px;border:1px solid var(--line-soft);border-radius:10px;font-size:.96rem;font-family:var(--sans);background:#fff;color:var(--ink)}
.re-field textarea{resize:vertical;line-height:1.5}
.re-root-name{font-family:var(--serif);font-size:1.1rem;color:var(--ink)}
.re-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px}
.re-tags-empty{font-size:.82rem;color:var(--ink-soft);font-style:italic}
.re-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(58,130,102,.12);border:1px solid rgba(58,130,102,.28);color:var(--green-deep,#2f6b53);border-radius:999px;padding:4px 6px 4px 12px;font-size:.86rem}
.re-tag button{background:rgba(0,0,0,.06);border:none;border-radius:50%;width:18px;height:18px;cursor:pointer;color:var(--ink-soft);font-size:.85rem;line-height:1;display:flex;align-items:center;justify-content:center}
.re-suggests{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.re-suggest{font-size:.8rem;color:var(--ink-soft);background:none;border:1px dashed var(--line-soft);border-radius:999px;padding:4px 11px;cursor:pointer}
.re-suggest:hover{border-color:var(--gold-deep);color:var(--gold-deep)}
.re-icons{display:flex;flex-wrap:wrap;gap:8px}
.re-icon{display:flex;flex-direction:column;align-items:center;gap:4px;width:78px;padding:10px 4px;background:#fff;border:1.5px solid var(--line-soft);border-radius:12px;cursor:pointer;color:#6b4423;font-size:.68rem;text-align:center;transition:border-color .15s,transform .15s}
.re-icon:hover{transform:translateY(-2px)}
.re-icon.is-sel{border-color:var(--gold-deep);background:rgba(201,162,74,.12)}
.re-colors{display:flex;flex-wrap:wrap;gap:8px}
.re-color{display:inline-flex;align-items:center;gap:8px;padding:8px 13px 8px 9px;background:#fff;border:1.5px solid var(--line-soft);border-radius:999px;cursor:pointer;font-size:.84rem;color:var(--ink)}
.re-color.is-sel{border-color:var(--ink)}
.re-sw{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}
.re-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}

/* enriched root chips */
.root-chip-wrap{position:relative;display:inline-flex}
.root-ic{display:block;margin-bottom:3px}
.root-journey{font-size:.7rem;color:var(--ink-soft);margin-top:2px;letter-spacing:.02em}
.root-edit{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.85);border:1px solid var(--line-soft);display:none;align-items:center;justify-content:center;cursor:pointer;padding:0}
.root-chip-wrap:hover .root-edit{display:flex}
.roots-head{position:relative}
.roots-customize{position:absolute;top:0;right:0;font-size:.78rem;color:var(--gold-deep);background:none;border:1px solid rgba(201,162,74,.4);border-radius:999px;padding:5px 13px;cursor:pointer}
.roots-customize:hover{background:rgba(201,162,74,.1)}

/* ══ ROOTS CARDS — the branch directory, retold as journeys ══ */
.roots-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(244px,1fr));gap:18px;margin-top:10px}
.roots-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-align:left;
  background:linear-gradient(180deg,#fdf8ee,#f7efe0);
  border:1px solid rgba(107,68,35,.18);border-top:3px solid var(--rc-accent,#a8842f);
  border-radius:16px;padding:22px 22px 20px;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease}
.roots-card:hover{transform:translateY(-3px);box-shadow:0 18px 38px -20px rgba(44,26,14,.5)}
.rc-top{display:flex;align-items:center;gap:10px}
.rc-symbol{display:inline-flex;color:var(--rc-accent,#a8842f)}
.rc-country{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--rc-accent,#a8842f)}
.rc-name{font-family:var(--serif);font-size:1.5rem;line-height:1.12;color:var(--ink)}
.rc-count{font-size:.92rem;color:var(--ink-soft);font-weight:600}
.rc-journey{font-size:.84rem;color:var(--ink-soft);letter-spacing:.02em}
.rc-desc{font-size:.84rem;color:var(--ink-soft);line-height:1.5;margin-top:2px}
.rc-cta{margin-top:9px;font-size:.82rem;font-weight:700;letter-spacing:.04em;color:var(--rc-accent,#a8842f)}
.rc-edit{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.72);border:1px solid rgba(107,68,35,.2);color:#6b4423;display:none;align-items:center;justify-content:center;cursor:pointer;padding:0}
.roots-card:hover .rc-edit{display:flex}

/* ══ OUR HOME — named living units + editor ══ */
.re-row{display:flex;gap:14px}
.re-row .re-field{flex:1}
.re-opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-soft);opacity:.8}
.re-spacer{flex:1}
.he-del{color:var(--red,#a23)!important}
.he-members{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px}
.he-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(201,162,74,.14);border:1px solid rgba(201,162,74,.4);color:var(--ink);border-radius:999px;padding:5px 7px 5px 13px;font-size:.9rem}
.he-chip button{background:rgba(0,0,0,.06);border:none;border-radius:50%;width:18px;height:18px;cursor:pointer;color:var(--ink-soft);font-size:.85rem;line-height:1;display:flex;align-items:center;justify-content:center}
.he-suggest{display:flex;flex-direction:column;gap:1px;margin-top:4px}
.he-srow{text-align:left;background:#fff;border:1px solid var(--line-soft);border-bottom:none;padding:9px 13px;cursor:pointer;font-size:.92rem;color:var(--ink)}
.he-srow:first-child{border-radius:9px 9px 0 0}
.he-srow:last-child{border-bottom:1px solid var(--line-soft);border-radius:0 0 9px 9px}
.he-srow:hover{background:var(--cream)}
.he-smart{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:11px}
.he-smart-label{width:100%;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--green-deep,#2f6b53)}

.person-home{margin:26px 0 8px}
.home-current{background:linear-gradient(180deg,#fdf8ee,#f7efe0);border:1px solid rgba(107,68,35,.18);border-left:4px solid var(--gold-deep);border-radius:14px;padding:16px 18px;margin-top:6px}
.home-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.home-name{font-family:var(--serif);font-size:1.35rem;color:var(--ink)}
.home-range{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--gold-deep)}
.home-members{display:flex;flex-wrap:wrap;gap:8px}
.home-mem{background:#fff;border:1px solid var(--line-soft);border-radius:999px;padding:6px 14px;font-size:.92rem;color:var(--ink);cursor:pointer}
.home-mem:hover{border-color:var(--gold-deep)}
.home-note{margin:11px 0 0;font-size:.9rem;color:var(--ink-soft);font-style:italic;line-height:1.5}
.home-empty{display:block;width:100%;text-align:left;background:none;border:1.5px dashed rgba(107,68,35,.3);border-radius:12px;padding:14px 16px;color:var(--ink-soft);cursor:pointer;font-size:.92rem;margin-top:6px}
.home-empty:hover{border-color:var(--gold-deep);color:var(--gold-deep)}
.home-history{margin-top:16px}
.home-hist-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line-soft);padding:9px 2px;cursor:pointer}
.home-hist-row:hover .home-hist-name{color:var(--gold-deep)}
.home-hist-name{font-family:var(--serif);font-size:1.02rem;color:var(--ink)}
.home-hist-range{font-size:.8rem;color:var(--ink-soft)}

/* ══ IDENTITY — statement header, panel, chosen display ══ */
.person-display-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--gold-deep);margin-bottom:2px}
.person-display-eyebrow svg{flex:0 0 auto}
.person-role{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--gold-deep);margin:2px 0 0}
.person-statement{margin:14px 0 4px;padding:16px 20px;background:linear-gradient(180deg,rgba(253,248,238,.7),rgba(247,239,224,.5));border-left:3px solid var(--gold-deep);border-radius:0 12px 12px 0}
.ps-line{margin:0 0 6px;font-size:1rem;color:var(--ink);line-height:1.4}
.ps-line:last-of-type{margin-bottom:0}
.ps-key{display:inline-block;min-width:104px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink-soft);vertical-align:baseline}
.ps-quote{margin:12px 0 0;font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--ink);line-height:1.35}

.person-identity{margin:26px 0 8px}
.id-row{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
.id-row:last-child{border-bottom:none}
.id-row-k{flex:0 0 116px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink-soft)}
.id-row-v{flex:1;font-size:1rem;color:var(--ink)}
.id-checks{display:flex;flex-wrap:wrap;gap:6px 16px}
.id-check{font-size:.96rem;color:var(--ink)}
.id-disp-shown{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--gold-deep)}

/* identity editor */
.id-disp-grid{display:flex;flex-direction:column;gap:8px}
.id-disp{display:flex;align-items:center;gap:11px;text-align:left;width:100%;background:#fff;border:1.5px solid var(--line-soft);border-radius:11px;padding:11px 14px;cursor:pointer;color:var(--ink);font-size:.96rem}
.id-disp:hover{border-color:var(--gold-deep)}
.id-disp.is-sel{border-color:var(--gold-deep);background:rgba(201,162,74,.1)}
.id-disp-l{flex:1}
.id-disp-type{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink-soft);opacity:.75}

/* ══ RAISED BY (love leads) + BIOLOGICAL LINEAGE (quiet) ══ */
.pf-raised{display:flex;flex-wrap:wrap;gap:10px}
.pf-raised-person{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,#fdf8ee,#f7efe0);border:1px solid rgba(181,83,47,.28);border-radius:13px;padding:8px 13px}
.pf-heart{flex:0 0 auto;filter:drop-shadow(0 1px 1px rgba(181,83,47,.25))}
.pf-raised-main{display:inline-flex;align-items:baseline;gap:8px}
.pf-role{font-family:var(--serif);font-style:italic;font-size:1.02rem;color:#b5532f}
.pf-type-quiet{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);opacity:.7;border-left:1px solid var(--line-soft);padding-left:8px}
.pf-bio{margin-top:4px}
.pf-bio .pf-label{opacity:.85}
.pf-bio .pf-people{opacity:.92}

/* role input in the parent editor */
.lp-role{margin-top:6px;width:100%;box-sizing:border-box;padding:7px 10px;border:1px solid var(--line-soft);border-radius:8px;font-size:.86rem;font-family:var(--sans);background:#fff;color:var(--ink)}

/* ══ OUR HERITAGE — the archive of what was carried forward ══ */
.person-heritage{margin:26px 0 8px}
.heritage-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:8px}
.heritage-card{position:relative;background:linear-gradient(180deg,#fdfaf3,#f7efe0);border:1px solid rgba(107,68,35,.16);border-radius:14px;padding:18px 18px 16px;box-shadow:0 1px 0 rgba(255,255,255,.6) inset}
.hr-cat{display:inline-flex;align-items:center;gap:7px;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--gold-deep)}
.hr-cat svg{flex:0 0 auto}
.hr-title{font-family:var(--serif);font-size:1.22rem;line-height:1.18;color:var(--ink);margin:8px 0 6px}
.hr-desc{font-size:.92rem;color:var(--ink-soft);line-height:1.55;margin:0 0 10px}
.hr-meta{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.hr-era,.hr-conn{font-size:.72rem;letter-spacing:.04em;padding:3px 9px;border-radius:999px}
.hr-era{background:rgba(20,20,20,.05);color:var(--ink-soft)}
.hr-conn{background:rgba(58,130,102,.12);color:var(--green-deep,#2f6b53);font-weight:600}
.hr-people{display:flex;flex-wrap:wrap;gap:5px}
.hr-people button{background:#fff;border:1px solid var(--line-soft);border-radius:999px;padding:3px 10px;font-size:.78rem;color:var(--ink);cursor:pointer}
.hr-people button:hover{border-color:var(--gold-deep)}
.hr-edit{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.7);border:1px solid rgba(107,68,35,.18);display:none;align-items:center;justify-content:center;cursor:pointer;padding:0}
.heritage-card:hover .hr-edit{display:flex}

/* heritage editor */
.hr-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.hr-cat-opt{display:flex;align-items:center;gap:8px;text-align:left;background:#fff;border:1.5px solid var(--line-soft);border-radius:11px;padding:10px 11px;cursor:pointer;color:#6b4423;font-size:.82rem}
.hr-cat-opt span{color:var(--ink)}
.hr-cat-opt:hover{border-color:var(--gold-deep)}
.hr-cat-opt.is-sel{border-color:var(--gold-deep);background:rgba(201,162,74,.12)}

/* ══ THE FIVE PILLARS — profile nav + section headers ══ */
.pillar-nav{position:sticky;top:0;z-index:6;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px;padding:10px 2px;background:linear-gradient(180deg,var(--paper) 70%,rgba(251,246,236,0));backdrop-filter:blur(2px)}
.pillar-chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid rgba(107,68,35,.2);border-radius:999px;padding:7px 14px;font-size:.82rem;font-weight:600;color:var(--ink);cursor:pointer;transition:border-color .15s,transform .15s}
.pillar-chip:hover{border-color:var(--gold-deep);transform:translateY(-1px)}
.pillar-chip svg{flex:0 0 auto}
.pillar-section{scroll-margin-top:64px}
.pillar-section:empty{display:none}
.pillar-eyebrow{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-size:1.4rem;color:var(--ink);margin:30px 0 2px}
.pillar-eyebrow svg{flex:0 0 auto}
.pillar-sub{display:block;font-size:.9rem;color:var(--ink-soft);font-style:italic;margin:0 0 8px}
/* the per-pillar inner eyebrows step down so the pillar header leads */
.pillar-section .roots-eyebrow{font-size:1.18rem}

/* ══ GRIOT CONSOLE — five-pillar attention ══ */
.cc-pillars{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:6px 0 22px}
.cc-pillar{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line-soft);border-left:3px solid var(--green-deep,#2f6b53);border-radius:11px;padding:12px 14px}
.cc-pillar.attn{border-left-color:var(--gold-deep);cursor:pointer}
.cc-pillar.attn:hover{background:rgba(201,162,74,.06)}
.cc-pillar-ic{flex:0 0 auto;display:inline-flex}
.cc-pillar-body{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.cc-pillar-label{font-weight:700;font-size:.92rem;color:var(--ink)}
.cc-pillar-msg{font-size:.8rem;color:var(--ink-soft)}
.cc-pillar-mark{flex:0 0 auto;font-weight:700}
.cc-pillar.ok .cc-pillar-mark{color:var(--green-deep,#2f6b53)}
.cc-pillar.attn .cc-pillar-mark{color:var(--gold-deep)}

/* ══ LEGACY SNAPSHOT — a life in five seconds ══ */
.legacy-snapshot{margin:16px 0 8px;padding:22px 24px;background:linear-gradient(180deg,#fdf8ee,#f7efe0);border:1px solid rgba(107,68,35,.18);border-radius:18px;box-shadow:0 14px 36px -26px rgba(44,26,14,.5)}
.ls-quote{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--ink);margin:0 0 18px;line-height:1.34}
.ls-rows{display:flex;flex-direction:column}
.ls-row{display:flex;align-items:baseline;gap:13px;width:100%;text-align:left;background:none;border:none;border-top:1px solid rgba(107,68,35,.12);padding:11px 4px;cursor:pointer}
.ls-row:first-child{border-top:none}
.ls-row:hover .ls-v{color:var(--gold-deep)}
.ls-ic{flex:0 0 22px;display:inline-flex;align-items:center;justify-content:center;color:var(--gold-deep);align-self:center}
.ls-k{flex:0 0 100px;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--ink-soft)}
.ls-v{flex:1;font-size:1.06rem;color:var(--ink);line-height:1.4;transition:color .15s}
@media(max-width:520px){.ls-row{flex-wrap:wrap}.ls-k{flex-basis:100%;margin-left:35px}.ls-v{flex-basis:100%;margin-left:35px}}

/* ══ RELATIONSHIP TO VIEWER — ribbon, header, breadcrumb, badges ══ */
.rel-ribbon{display:flex;flex-direction:column;gap:3px;margin:0 0 18px;padding:15px 20px;border-radius:14px;background:linear-gradient(180deg,#f3ead9,#ece0c8);border:1px solid rgba(107,68,35,.22);border-left:4px solid var(--gold-deep)}
.rel-ribbon.rel-ancestor{border-left-color:#6b4423}
.rel-ribbon.rel-descendant{border-left-color:var(--green-deep,#2f6b53)}
.rr-kind{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--ink-soft)}
.rr-label{font-family:var(--serif);font-size:1.55rem;line-height:1.1;color:var(--ink)}
.rr-line{font-size:.85rem;font-weight:600;color:var(--gold-deep);letter-spacing:.02em}
.rr-path{font-size:.82rem;color:var(--ink-soft);margin-top:4px}
.person-rel-label{font-family:var(--serif);font-size:1.3rem;color:var(--gold-deep);margin:4px 0 0;line-height:1.15}
.rel-you-label{color:var(--green-deep,#2f6b53);font-style:italic}
.person-line-label{font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-soft);margin:5px 0 0}
.person-vital-line{font-size:.92rem;color:var(--ink-soft);margin:4px 0 0}

.rel-breadcrumb{margin:8px 0 18px;padding:18px 20px;background:rgba(253,248,238,.7);border:1px solid var(--line-soft);border-radius:14px}
.rb-eyebrow{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink-soft);margin-bottom:12px}
.rb-chain{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.rb-node{background:none;border:none;font-family:var(--serif);font-size:1.08rem;color:var(--ink);cursor:pointer;padding:3px 0;text-align:left}
.rb-node:hover{color:var(--gold-deep)}
.rb-node.rb-target{font-weight:700;color:var(--gold-deep)}
.rb-arrow{color:var(--ink-soft);opacity:.5;font-size:.9rem;line-height:1;padding-left:2px}
.rb-result{display:block;margin-top:12px;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--gold-deep)}

.rel-badge{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700;letter-spacing:.04em;color:var(--gold-deep);background:rgba(201,162,74,.12);border:1px solid rgba(201,162,74,.32);border-radius:999px;padding:3px 10px}
.rel-badge.rel-self{color:var(--green-deep,#2f6b53);background:rgba(58,130,102,.1);border-color:rgba(58,130,102,.3)}

/* ════════════════════════════════════════════════════════════
   LIVING TREE — full-bleed sacred scene (the tree IS the page)
   ════════════════════════════════════════════════════════════ */
#screen-tree .tree-room-wrap{max-width:none;width:100%;padding:0;margin:0}
#screen-tree .create-back{position:absolute;top:16px;left:18px;z-index:6}

.tree-scene{position:relative;width:100%;padding:16px 0 22px;overflow:hidden;
  background:
    linear-gradient(180deg, rgba(12,8,3,.4) 0%, rgba(18,10,4,0) 13%),
    linear-gradient(180deg, #b9722e 0%, #cf8a34 22%, #f1c95e 56%, #d59a40 76%, #4a3017 100%);}
.tree-scene-head{text-align:center;max-width:700px;margin:0 auto 4px;padding:0 20px;position:relative;z-index:5}
.tree-scene-head .tree-standing-eyebrow.gold{color:rgba(253,247,234,.82);text-shadow:0 1px 6px rgba(20,12,4,.55)}
.tree-scene-title{font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-size:clamp(2rem,4vw,3.1rem);line-height:1.05;color:#fdf7ea;margin:6px 0 8px;text-shadow:0 2px 10px rgba(20,12,4,.6),0 0 28px rgba(20,12,4,.35)}
.tree-scene-sub{color:rgba(253,247,234,.9);font-size:1rem;line-height:1.55;max-width:560px;margin:0 auto;text-shadow:0 1px 6px rgba(20,12,4,.55)}

/* the tree grows out of the warm ground — bark quieted so the family leads */
.tree-canvas{position:relative;aspect-ratio:1122/1402;height:min(78vh,1080px);width:auto;max-width:96vw;
  margin:2px auto 0;
  background:none;z-index:1}
.tree-canvas::before{content:'';position:absolute;inset:0;z-index:0;
  background:url('/baobab-color.webp') no-repeat center center;background-size:cover;
  filter:brightness(.72) saturate(.92) blur(1.3px)}
.tree-canvas::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(125% 78% at 50% 32%, rgba(18,10,4,.12) 0%, rgba(18,10,4,.34) 55%, rgba(18,10,4,.6) 100%)}
.tree-canvas .tree-living-layer{z-index:2}
.tree-canvas .wisdom-leaf{z-index:3}

/* a wider stage over the trunk so family can spread into the savanna, not pile up */
.tree-people-stage{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(1100px,164%);height:100%;z-index:5;pointer-events:none;background:none;border:0;border-radius:0;box-shadow:none;padding:0}
.tree-people-stage>*{pointer-events:auto}
.tree-people-stage .tree-vines{pointer-events:none}
#screen-tree .tree-people-stage .tnode.tn-free{min-width:142px;max-width:184px;padding:5px 12px 5px 6px}
#screen-tree .tree-people-stage .tnode.tn-free .tnode-av{width:30px;height:30px;font-size:.92rem}
#screen-tree .tree-people-stage .tnode.tn-free .tnode-body b{font-size:.92rem}
#screen-tree .tree-people-stage .tnode.tn-free .tnode-body>span{font-size:.66rem}
@media(max-width:980px){.tree-people-stage{width:100%}}
.tree-vines{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;
  fill:none;stroke:rgba(201,162,74,.5);stroke-width:1.1;stroke-linecap:round;
  filter:drop-shadow(0 0 1.5px rgba(201,162,74,.4))}
.tree-vines path{vector-effect:non-scaling-stroke}

/* ── Living Baobab: the tree grows & the camera settles when it re-centers ── */
@media (prefers-reduced-motion:no-preference){
  /* the camera settles onto the new focus */
  @keyframes treeCameraSettle{from{opacity:.5;transform:translateX(-50%) scale(.955)}to{opacity:1;transform:translateX(-50%) scale(1)}}
  .tree-anim .tree-people-stage{animation:treeCameraSettle .6s cubic-bezier(.22,.61,.36,1);transform-origin:50% 60%}
  /* branches draw outward from the trunk (pathLength=1 normalizes every vine) */
  @keyframes treeVineDraw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
  .tree-anim .tree-vines path{animation:treeVineDraw .75s ease-out .1s backwards}
  /* nodes grow into place, staggered outward by generation (backwards fill so
     hover-lift still works once the growth finishes) */
  @keyframes treeGrowFree{from{opacity:0;transform:translate(-50%,-50%) scale(.66)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
  @keyframes treeGrowCouple{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
  .tree-anim .tree-canvas .tnode.tn-free{animation:treeGrowFree .5s cubic-bezier(.34,1.28,.5,1) backwards}
  .tree-anim .tree-canvas .tnode-couple .tnode{animation:treeGrowCouple .55s cubic-bezier(.34,1.28,.5,1) backwards}
  .tree-anim .tree-canvas .tnode.tn-par,
  .tree-anim .tree-canvas .tnode.tn-kid{animation-delay:.12s}
  .tree-anim .tree-canvas .tnode.tn-gp{animation-delay:.24s}
  /* the focus settles with a soft gold breath — "here is their place" */
  @keyframes treeFocusGlow{0%{box-shadow:0 0 0 0 rgba(201,162,74,0)}35%{box-shadow:0 0 0 7px rgba(201,162,74,.16)}100%{box-shadow:0 0 0 0 rgba(201,162,74,0)}}
  .tree-anim .tree-canvas .tnode-couple .tnode.is-focus-node{animation:treeGrowCouple .55s cubic-bezier(.34,1.28,.5,1) backwards,treeFocusGlow 1.15s ease-out .2s}
  /* the lineage breadcrumb drops in as you climb */
  @keyframes treeTrailIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
  .tree-anim .tree-trail{animation:treeTrailIn .5s ease-out .15s backwards}
}

/* nodes over trunk / canopy / roots */
#screen-tree .tree-canvas .tnode{position:absolute;transform:translate(-50%,-50%);left:auto;top:auto;right:auto;z-index:5;min-width:148px;max-width:190px}
#screen-tree .tree-canvas .tnode:hover{transform:translate(-50%,-50%) translateY(-3px)}
#screen-tree .tree-canvas .tnode.center{left:50%;top:74%;transform:translate(-50%,-50%);min-width:174px;z-index:7}
#screen-tree .tree-canvas .tnode.center:hover{transform:translate(-50%,-50%) translateY(-3px)}
#screen-tree .tree-canvas .tnode.n1{left:50%;top:53%}
#screen-tree .tree-canvas .tnode.n2{left:50%;top:34%}
#screen-tree .tree-canvas .tnode.n3{left:25%;top:30%}
#screen-tree .tree-canvas .tnode.n4{left:75%;top:30%}
#screen-tree .tree-canvas .tnode.n5{left:30%;top:84%}
#screen-tree .tree-canvas .tnode.n6{left:70%;top:84%}
#screen-tree .tree-canvas .wisdom-leaf{position:absolute;transform:none;left:auto;top:auto;right:auto;z-index:6}

/* ── Household pairing: the focus stands with their spouse(s) on the trunk ── */
#screen-tree .tree-canvas .tnode-couple{position:absolute;left:50%;top:74%;
  transform:translate(-50%,-50%);z-index:7;display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:6px 10px;max-width:min(94%,560px)}
#screen-tree .tree-canvas .tnode-couple .tnode{position:relative;left:auto;top:auto;right:auto;transform:none}
#screen-tree .tree-canvas .tnode-couple .tnode:hover{transform:translateY(-3px)}
#screen-tree .tree-canvas .tnode-couple .tnode.is-focus-node{min-width:172px;max-width:222px}
#screen-tree .tree-canvas .tnode-couple .tnode.is-focus-node .tnode-av{width:42px;height:42px;font-size:1.2rem}
/* the marriage bond — a small gold link between partners */
.tnode-bond{flex:0 0 auto;align-self:center;width:18px;height:2px;border-radius:2px;position:relative;
  background:linear-gradient(90deg,rgba(201,162,74,.2),rgba(201,162,74,.85),rgba(201,162,74,.2));
  box-shadow:0 0 6px rgba(201,162,74,.45)}
.tnode-bond::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;
  transform:translate(-50%,-50%);background:radial-gradient(circle at 40% 35%,#ffe9b0,#C9A24A 70%);
  box-shadow:0 0 7px rgba(201,162,74,.6)}
#screen-tree .tree-canvas .wisdom-leaf.w1{left:34%;top:14%}
#screen-tree .tree-canvas .wisdom-leaf.w2{right:32%;top:11%}
#screen-tree .tree-canvas .wisdom-leaf.w3{left:55%;top:20%}

/* floating glass companions */
.tree-float{position:absolute;z-index:4;width:272px;background:rgba(250,243,229,.74);
  -webkit-backdrop-filter:blur(10px) saturate(1.05);backdrop-filter:blur(10px) saturate(1.05);
  border:1px solid rgba(201,162,74,.30);border-radius:20px;box-shadow:0 24px 56px -22px rgba(40,26,12,.5);padding:18px}
.tree-person-float{left:clamp(14px,3.2vw,54px);top:150px}
.tree-holds-float{right:clamp(14px,3.2vw,54px);top:150px;width:300px}
.tree-float .kicker{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep,#a8842f);font-weight:800;margin-bottom:10px}
.tree-person-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;background:rgba(255,250,238,.6);border:1px solid rgba(201,162,74,.2);border-radius:16px;padding:16px 14px;margin-bottom:12px}
.tree-person-card b{font-family:var(--serif);font-size:1.5rem;color:var(--ink);line-height:1.1}
.tree-person-card .tree-portrait{width:74px;height:74px;border-radius:50%;border:3px solid var(--gold,#C9A24A);background:#ece2d4 center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:#7a5a2a;font-family:var(--serif);font-size:1.7rem;margin-bottom:4px}
.tree-person-sub{font-size:.8rem;color:var(--ink-soft)}
.tree-stat-row{display:flex;flex-direction:column;margin-bottom:12px}
.tree-stat{display:flex;justify-content:space-between;align-items:center;padding:9px 2px;border-bottom:1px solid rgba(120,86,46,.14);font-size:.92rem;color:var(--ink-soft)}
.tree-stat strong{color:var(--gold-deep,#a8842f);font-variant-numeric:tabular-nums}
.tree-open-legacy{width:100%}
.tree-holds-float .legacy-list{display:flex;flex-direction:column;gap:9px}
.tree-holds-float .legacy-item{background:rgba(255,250,238,.55);border:1px solid rgba(201,162,74,.16);border-radius:13px;padding:9px 12px}
.tree-holds-float .legacy-item b{display:block;font-family:var(--serif);font-size:1.02rem;color:var(--ink);margin-bottom:1px}
.tree-holds-float .legacy-item p{margin:0;font-size:.77rem;line-height:1.38;color:var(--ink-soft)}

/* floating timeline rings near the roots */
.tree-rings-float{position:absolute;left:50%;transform:translateX(-50%);bottom:96px;z-index:4;display:flex;align-items:center;gap:12px;
  background:rgba(250,243,229,.66);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  border:1px solid rgba(201,162,74,.24);border-radius:999px;padding:7px 18px;box-shadow:0 14px 34px -16px rgba(40,26,12,.45)}
.tree-rings-cap{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--gold-deep,#a8842f);white-space:nowrap}
.tree-rings{display:flex;gap:13px}
.tree-rings span{font-size:.78rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.tree-rings span.year{color:var(--ink);font-weight:700}

/* museum-label panels along the bottom */
.tree-labels{position:absolute;left:0;right:0;bottom:24px;z-index:4;display:flex;justify-content:space-between;align-items:flex-end;gap:18px;padding:0 clamp(16px,4vw,70px);pointer-events:none}
.tree-label{pointer-events:auto;flex:1 1 0;max-width:300px;text-align:left;cursor:pointer;
  background:rgba(250,243,229,.64);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(201,162,74,.24);border-radius:16px;padding:13px 15px;box-shadow:0 16px 36px -18px rgba(40,26,12,.42);transition:transform .15s,border-color .15s}
.tree-label:hover{transform:translateY(-3px);border-color:rgba(201,162,74,.5)}
.tree-label.tl-mid{margin-bottom:0}
.tree-label-years{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px;padding-top:7px;border-top:1px solid rgba(201,162,74,.22)}
.tree-label-years span{font-size:.7rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.tree-label-years span.year{color:var(--gold-deep,#a8842f);font-weight:700}
.tree-label-ic{display:inline-flex;width:26px;height:26px;color:var(--gold-deep,#a8842f);margin-bottom:5px}
.tree-label-ic svg{width:100%;height:100%}
.tree-label b{display:block;font-family:var(--serif);font-size:1.12rem;color:var(--ink);line-height:1.1;margin-bottom:3px}
.tree-label-d{display:block;font-size:.74rem;line-height:1.4;color:var(--ink-soft)}
.tree-hint{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:.78rem;font-style:italic;color:var(--ink-soft);z-index:4;margin:0}

/* ── responsive: companions stop floating and stack with the tree ── */
@media (max-width:980px){
  .tree-scene{display:flex;flex-direction:column;padding:74px 0 40px}
  .tree-scene-head{order:0}
  .tree-lens{order:1}
  .tree-canvas{order:2;width:96vw;height:auto;max-width:96vw;margin-top:0}
  .tree-labels,.tree-hint{position:static;transform:none}
  .tree-labels{order:5;flex-direction:column;align-items:stretch;gap:12px;padding:18px clamp(14px,5vw,30px) 0;margin:0 auto;max-width:480px;bottom:auto}
  .tree-label{max-width:none}
  .tree-label.tl-mid{margin-bottom:0}
  .tree-hint{order:6;margin-top:10px;bottom:auto}
}

/* ── Living tree: the archive grows into canopy & roots ── */
.tree-living-layer{position:absolute;inset:0;z-index:3;pointer-events:none}
.tree-living-layer .lt{position:absolute;transform-origin:center;will-change:transform,opacity}
.lt-leaf{width:calc(16px*var(--s,1));height:calc(16px*var(--s,1));animation:lt-sway 5s ease-in-out infinite;animation-delay:var(--d,0s)}
.lt-leaf svg{width:100%;height:100%;fill:#6fa047;filter:drop-shadow(0 1px 1px rgba(40,60,20,.25))}
.lt-fruit{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ec955a,#b8431f);box-shadow:0 1px 2px rgba(60,20,10,.3);animation:lt-bob 4s ease-in-out infinite;animation-delay:var(--d,0s)}
.lt-blossom{width:13px;height:13px;border:0;padding:0;cursor:pointer;pointer-events:auto;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#fff6e9 0 20%,#f3c6d2 22% 55%,#e79bb0 57% 100%);
  box-shadow:0 0 0 2px rgba(255,250,240,.5),0 1px 3px rgba(80,30,40,.25);transition:transform .2s;
  animation:lt-bob 5s ease-in-out infinite;animation-delay:var(--d,0s)}
.lt-blossom:hover{transform:scale(1.55)}
.lt-bird{width:16px;height:16px;border:0;padding:0;background:none;cursor:pointer;pointer-events:auto;animation:lt-bird 6s ease-in-out infinite;animation-delay:var(--d,0s)}
.lt-bird svg{width:100%;height:100%;fill:#4a3826;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.lt-bird:hover svg{fill:#6b4423}
.lt-root{width:26px;height:5px;border-radius:0 0 40% 40%/0 0 100% 100%;background:linear-gradient(90deg,rgba(120,86,46,0),rgba(110,78,42,.55),rgba(120,86,46,0));opacity:.7}
.lt-light{width:7px;height:7px;border-radius:50%;background:radial-gradient(circle,#fff3c4 0 30%,rgba(255,213,120,.5) 60%,rgba(255,213,120,0) 100%);box-shadow:0 0 9px 3px rgba(255,210,120,.4);animation:lt-twinkle 4s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes lt-sway{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(6deg) translateY(-2px)}}
@keyframes lt-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes lt-bird{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes lt-twinkle{0%,100%{opacity:.35;transform:scale(.82)}50%{opacity:1;transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){.tree-living-layer .lt{animation:none!important}}

/* ── People living in the tree: portrait cards + carved signature ── */
#screen-tree .tree-canvas .tnode{display:flex;flex-direction:row;align-items:center;gap:9px;text-align:left;padding:7px 13px 7px 7px;min-width:156px;max-width:212px}
#screen-tree .tree-canvas .tnode.center{min-width:182px;max-width:232px}
.tnode-av{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:#e7dcc9 center/cover no-repeat;border:2px solid var(--gold,#C9A24A);display:flex;align-items:center;justify-content:center;color:#7a5a2a;font-family:var(--serif);font-size:1rem;font-weight:600;box-shadow:0 1px 3px rgba(60,40,15,.25);overflow:hidden}
#screen-tree .tree-canvas .tnode.center .tnode-av{width:42px;height:42px;font-size:1.2rem}
.tnode-body{display:flex;flex-direction:column;gap:1px;min-width:0}
.tnode-body b{font-family:var(--serif);line-height:1.06}
.tnode-body>span{font-size:.72rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* signature line carved into the roots — quiet, noticed after a while */
.tree-carving{position:absolute;left:50%;transform:translateX(-50%);bottom:150px;z-index:2;
  width:min(640px,88vw);text-align:center;margin:0;pointer-events:none;
  font-family:var(--serif);font-style:italic;font-size:clamp(.9rem,1.35vw,1.12rem);line-height:1.5;letter-spacing:.04em;
  color:rgba(255,249,238,.96);
  text-shadow:0 1px 3px rgba(20,12,4,.7), 0 0 16px rgba(20,12,4,.45)}

@media (max-width:980px){
  .tree-carving{position:static;transform:none;width:min(520px,90vw);margin:14px auto 0;order:3;bottom:auto}
  .tree-rings-float{bottom:auto}
}

/* ── Perspective lenses: the same tree, different stories ── */
.tree-lens{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:12px auto 0;position:relative;z-index:5;max-width:700px;padding:0 16px}
.tree-lens-btn{font-family:var(--sans);font-size:.78rem;letter-spacing:.02em;color:var(--ink-soft);
  background:rgba(250,243,229,.72);border:1px solid rgba(201,162,74,.3);border-radius:999px;padding:6px 15px;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .15s,color .15s,border-color .15s}
.tree-lens-btn:hover{border-color:rgba(201,162,74,.55)}
.tree-lens-btn.is-active{background:var(--gold-deep,#a8842f);color:#fff7e9;border-color:var(--gold-deep,#a8842f)}
/* a focused lens leaves only the matching growth in the canopy */
.tree-scene[data-lens="stories"]  .tree-living-layer .lt:not(.lt-leaf){display:none}
.tree-scene[data-lens="recipes"]  .tree-living-layer .lt:not(.lt-fruit){display:none}
.tree-scene[data-lens="prayers"]  .tree-living-layer .lt:not(.lt-light){display:none}
.tree-scene[data-lens="voices"]   .tree-living-layer .lt:not(.lt-bird){display:none}
.tree-scene[data-lens="photos"]   .tree-living-layer .lt:not(.lt-blossom){display:none}
.tree-scene[data-lens="documents"].tree-living-layer .lt:not(.lt-root){display:none}

/* ── Side panels as slide-out drawers, so the baobab has the screen ── */
.tree-scene{--drawer-w:300px}
.tree-drawer-tab{position:absolute;top:44%;z-index:9;display:inline-flex;align-items:center;
  background:rgba(250,243,229,.88);border:1px solid rgba(201,162,74,.42);color:var(--gold-deep,#a8842f);
  font-family:var(--sans);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  padding:15px 9px;cursor:pointer;writing-mode:vertical-rl;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 10px 26px -12px rgba(40,26,12,.45);
  transition:background .15s,border-color .15s,opacity .2s}
.tree-drawer-tab:hover{background:#fff;border-color:rgba(201,162,74,.72)}
.tree-drawer-tab.left{left:0;border-radius:0 13px 13px 0}
.tree-drawer-tab.right{right:0;border-radius:13px 0 0 13px;transform:rotate(180deg)}

.tree-drawer{position:absolute;top:68px;z-index:11;width:min(var(--drawer-w),88vw);max-height:80vh;overflow:auto;
  transition:transform .34s cubic-bezier(.22,.8,.24,1);box-shadow:0 30px 70px -22px rgba(30,18,6,.55)}
.tree-drawer.left{left:0;right:auto;border-radius:0 22px 22px 0;transform:translateX(calc(-100% - 26px))}
.tree-drawer.right{right:0;left:auto;border-radius:22px 0 0 22px;transform:translateX(calc(100% + 26px))}
.tree-scene[data-drawer="left"]  .tree-drawer.left{transform:translateX(0)}
.tree-scene[data-drawer="right"] .tree-drawer.right{transform:translateX(0)}
.tree-scene[data-drawer="left"]  .tree-drawer-tab.left,
.tree-scene[data-drawer="right"] .tree-drawer-tab.right{opacity:0;pointer-events:none}

.tree-scrim{position:absolute;inset:0;z-index:10;background:rgba(30,20,8,.16);opacity:0;pointer-events:none;transition:opacity .3s}
.tree-scene[data-drawer="left"] .tree-scrim,
.tree-scene[data-drawer="right"] .tree-scrim{opacity:1;pointer-events:auto}

.tree-drawer-close{position:absolute;top:9px;right:11px;width:26px;height:26px;border:0;border-radius:50%;
  background:rgba(201,162,74,.16);color:var(--ink,#141414);font-size:1.15rem;line-height:1;cursor:pointer;z-index:2}
.tree-drawer-close:hover{background:rgba(201,162,74,.34)}

@media (max-width:980px){
  .tree-drawer{top:58px;width:min(360px,86vw)}
}

/* ════════════════════════════════════════════════════════════
   TIME RINGS — a gentle arc of years at the base of the tree, with a
   focal ring on the centered person and small markers for the family
   currently standing in the tree (engine: .tree-timeline > .tl-cap +
   .tl-track[.tl-arc .tl-tick .tl-mark .tl-focus-ring]).
   ════════════════════════════════════════════════════════════ */
.tree-timeline{position:relative;z-index:4;width:min(1180px,92vw);margin:-12px auto 0;
  padding:18px clamp(20px,4vw,46px) 8px;text-align:center}
.tree-timeline .tl-cap{display:block;font-family:var(--sans);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:800;color:var(--gold,#C9A24A);margin-bottom:18px;text-shadow:0 1px 4px rgba(18,10,4,.55)}

.tl-track{position:relative;height:60px;margin:0 6px}
/* the carved gold arc */
.tl-arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.tl-arc path{fill:none;stroke:rgba(201,162,74,.6);stroke-width:2;stroke-linecap:round;
  vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 4px rgba(18,10,4,.5))}

/* year labels, riding the arc */
.tl-tick{position:absolute;top:30px;font-family:var(--sans);font-size:.72rem;color:rgba(253,247,234,.82);
  font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;text-shadow:0 1px 4px rgba(18,10,4,.6)}

/* small markers — only the people in the tree right now; click re-centers */
.tl-mark{position:absolute;top:14px;left:0;width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 38% 32%,#ffe9b0,#C9A24A 70%);
  box-shadow:0 0 0 2px rgba(255,250,235,.55),0 0 8px 1px rgba(201,162,74,.45)}
.tl-mark:hover{filter:brightness(1.15);box-shadow:0 0 0 2px #fff,0 0 13px 3px rgba(201,162,74,.72);z-index:3}

/* the focal ring on the centered person's year */
.tl-focus-ring{position:absolute;top:14px;left:0;width:46px;height:46px;padding:0;border-radius:50%;cursor:pointer;z-index:2;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,rgba(40,26,12,.55),rgba(40,26,12,.2));
  border:1.5px solid rgba(201,162,74,.85);
  box-shadow:0 0 0 4px rgba(40,26,12,.35),0 0 16px 3px rgba(201,162,74,.55),inset 0 0 10px rgba(201,162,74,.3)}
.tl-focus-ring span{font-family:var(--serif);font-size:.9rem;font-weight:600;color:#fdf3da;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;text-shadow:0 1px 3px rgba(18,10,4,.7)}
.tl-focus-ring:hover{border-color:#e8c878;box-shadow:0 0 0 4px rgba(40,26,12,.4),0 0 22px 5px rgba(201,162,74,.7),inset 0 0 12px rgba(201,162,74,.4)}

@media (max-width:980px){
  .tree-timeline{margin-top:6px;width:94vw;padding-left:14px;padding-right:14px}
  .tl-track{height:54px}
  .tl-tick{font-size:.66rem}
  .tl-mark{width:8px;height:8px}
  .tl-focus-ring{width:40px;height:40px}
  .tl-focus-ring span{font-size:.8rem}
}

/* ════════════════════════════════════════════════════════════════════
   ACCOUNT CENTER — estate-library aesthetic (parchment, brass, mahogany)
   The Griot's identity opens this. Three areas: You · The Room · Research.
   ──────────────────────────────────────────────────────────────────── */
.ac-overlay{position:fixed;inset:0;z-index:10000;background:rgba(10,6,2,.62);display:flex;padding:0}
.ac-overlay[hidden]{display:none}
.ac-shell{display:flex;flex-direction:column;width:100%;max-width:1200px;height:100%;margin:auto;background:var(--cream,#f7efe0);box-shadow:0 30px 90px rgba(8,5,2,.6);overflow:hidden}
@media(min-width:1000px){.ac-shell{height:92vh;border-radius:16px;border:1px solid rgba(201,162,74,.4)}}
.ac-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 22px;background:linear-gradient(180deg,var(--navy-2,#1b2f4d),var(--navy,#14233B));color:#eef3fa;border-bottom:2px solid var(--gold,#C9A24A);flex:0 0 auto}
.ac-title{font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-size:1.5rem;font-weight:600;letter-spacing:.03em;line-height:1.05}
.ac-title small{display:block;font-family:var(--sans,'DM Sans',sans-serif);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold2,#E6C878);font-weight:800;margin-top:2px}
.ac-close{background:none;border:1px solid rgba(233,202,128,.4);color:#f3e6c8;font-size:1.3rem;line-height:1;width:38px;height:38px;border-radius:50%;cursor:pointer;flex:0 0 auto}
.ac-close:hover{background:rgba(233,202,128,.16)}
.ac-body{display:grid;grid-template-columns:250px 1fr;flex:1 1 auto;min-height:0}
.ac-nav{background:linear-gradient(180deg,var(--navy,#14233B),#0f1b2e);overflow-y:auto;padding:12px 0}
.ac-nav-h{font-family:var(--sans,'DM Sans',sans-serif);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--gold2,#E6C878);padding:12px 20px 5px;opacity:.92}
.ac-nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-left:3px solid transparent;color:#ccd8ea;font-family:var(--sans,'DM Sans',sans-serif);font-size:.89rem;padding:9px 20px;cursor:pointer}
.ac-nav button:hover{background:rgba(255,255,255,.05)}
.ac-nav button.active{background:rgba(201,162,74,.15);border-left-color:var(--gold,#C9A24A);color:#fff;font-weight:600}
.ac-content{overflow-y:auto;padding:30px 38px 60px;background:var(--cream,#f7efe0)}
.ac-sec-head{font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-size:1.8rem;font-weight:600;color:#2a1810;margin:0 0 4px}
.ac-sec-sub{font-size:.9rem;color:var(--ink-soft,#6b6157);margin:0 0 22px;max-width:60ch;line-height:1.5}
.ac-card{background:#fffdf8;border:1px solid rgba(201,162,74,.32);border-radius:14px;padding:22px;margin-bottom:18px;box-shadow:0 10px 30px -20px rgba(20,14,8,.45)}
.ac-card h3{font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-size:1.2rem;font-weight:600;color:#2a1810;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid rgba(201,162,74,.25)}
.ac-field{margin-bottom:14px}
.ac-field label{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--gold-deep,#a8842f);margin-bottom:5px}
.ac-field input,.ac-field textarea,.ac-field select{width:100%;box-sizing:border-box;padding:11px 13px;border:1px solid rgba(20,14,8,.18);border-radius:9px;background:#fff;font-family:inherit;font-size:.92rem;color:var(--ink,#141414)}
.ac-field textarea{min-height:88px;resize:vertical;line-height:1.5}
.ac-field input:focus,.ac-field textarea:focus,.ac-field select:focus{outline:none;border-color:var(--gold,#C9A24A);box-shadow:0 0 0 3px rgba(201,162,74,.16)}
.ac-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.ac-readrow{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid rgba(201,162,74,.18);font-size:.92rem}
.ac-readrow:last-child{border-bottom:0}
.ac-readrow .k{color:var(--ink-soft,#6b6157);font-weight:600}
.ac-readrow .v{color:var(--ink,#141414);text-align:right}
.ac-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid rgba(201,162,74,.16)}
.ac-toggle:last-child{border-bottom:0}
.ac-toggle .t-l{font-size:.92rem;color:var(--ink,#141414);font-weight:600}
.ac-toggle .t-d{font-size:.78rem;color:var(--ink-soft,#6b6157);margin-top:1px}
.ac-sw{position:relative;width:44px;height:25px;flex:0 0 auto}
.ac-sw input{opacity:0;width:0;height:0;position:absolute}
.ac-sw span{position:absolute;inset:0;background:#cbb98f;border-radius:999px;transition:.18s;cursor:pointer}
.ac-sw span::before{content:"";position:absolute;width:19px;height:19px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.18s}
.ac-sw input:checked+span{background:var(--green,#3a8266)}
.ac-sw input:checked+span::before{transform:translateX(19px)}
.ac-btn{font-family:var(--sans,'DM Sans',sans-serif);font-weight:700;font-size:.86rem;padding:11px 20px;border-radius:10px;border:1px solid var(--gold,#C9A24A);background:linear-gradient(180deg,var(--gold2,#E6C878),var(--gold,#C9A24A));color:#2a1d05;cursor:pointer}
.ac-btn:hover{filter:brightness(1.05)}
.ac-btn.ghost{background:#fff;color:var(--ink,#141414)}
.ac-btn.danger{background:#fff;border-color:#c0492f;color:#a8341f}
.ac-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px}
.ac-status{font-size:.83rem;font-weight:600}
.ac-status.ok{color:var(--green,#3a8266)}.ac-status.err{color:#a8341f}
.ac-pill{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 11px;border-radius:999px}
.ac-pill.griot{background:rgba(201,162,74,.2);color:var(--gold-deep,#a8842f)}
.ac-pill.soon{background:rgba(20,35,59,.12);color:var(--navy,#14233B)}
.ac-avatar{position:relative;width:84px;height:84px;border-radius:50%;overflow:hidden;background:var(--navy,#14233B);border:3px solid var(--gold,#C9A24A);flex:0 0 auto}
.ac-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ac-avatar .ini{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-size:2rem;font-weight:600}
.ac-roadmap{margin:0;padding:0}
.ac-roadmap li{list-style:none;padding:9px 0 9px 22px;position:relative;color:var(--ink,#141414);font-size:.9rem;border-bottom:1px solid rgba(201,162,74,.14)}
.ac-roadmap li:last-child{border-bottom:0}
.ac-roadmap li::before{content:"";position:absolute;left:4px;top:14px;width:7px;height:7px;border-radius:50%;background:var(--gold,#C9A24A)}
.ac-jump{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;background:#fffdf8;border:1px solid rgba(201,162,74,.3);border-radius:12px;padding:15px 18px;cursor:pointer;font-family:inherit;margin-bottom:10px}
.ac-jump:hover{border-color:var(--gold,#C9A24A);background:#fbf4e4}
.ac-jump .j-t{font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-size:1.08rem;font-weight:600;color:#2a1810}
.ac-jump .j-d{font-size:.82rem;color:var(--ink-soft,#6b6157);margin-top:1px}
.ac-jump .j-go{color:var(--gold-deep,#a8842f);font-weight:700;font-size:1.2rem;flex:0 0 auto}
.ac-act{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(201,162,74,.15);font-size:.88rem}
.ac-act .a-e{color:var(--ink,#141414);font-weight:600}
.ac-act .a-t{color:var(--ink-soft,#6b6157);white-space:nowrap}
@media(max-width:860px){
  .ac-body{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .ac-nav{display:flex;overflow-x:auto;padding:8px;gap:4px}
  .ac-nav-h{display:none}
  .ac-nav button{width:auto;white-space:nowrap;border-left:0;border-bottom:3px solid transparent;border-radius:8px;padding:8px 12px}
  .ac-nav button.active{border-left:0;border-bottom-color:var(--gold,#C9A24A)}
  .ac-content{padding:20px 16px 50px}
  .ac-2col{grid-template-columns:1fr}
}

/* ── Legacy+ upgrade button (top bar → membership page) ── */
.hm-nav-upgrade{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans,'DM Sans',sans-serif);
  font-weight:700;font-size:.84rem;letter-spacing:.01em;text-decoration:none;color:#2a1d05;
  background:linear-gradient(180deg,var(--gold2,#E6C878),var(--gold,#C9A24A));border:1px solid var(--gold,#C9A24A);
  border-radius:999px;padding:8px 15px;box-shadow:0 6px 16px -8px rgba(168,132,47,.7);
  transition:filter .15s ease,transform .12s ease;white-space:nowrap}
.hm-nav-upgrade:hover{filter:brightness(1.06)}
.hm-nav-upgrade:active{transform:scale(.98)}
.hm-nav-upgrade .plus{font-weight:800;margin-left:-1px}
@media(max-width:600px){.hm-nav-upgrade{padding:7px 13px}}

/* ── Auth recovery notes (password reset / activation guidance) ── */
.auth-note{margin:12px 0 0;padding:10px 12px;border-radius:9px;font-size:.84rem;line-height:1.45;text-align:left}
.auth-note.ok{background:rgba(58,130,102,.12);color:var(--green-deep,#2c6450);border:1px solid rgba(58,130,102,.32)}
.auth-note.warn{background:rgba(201,162,74,.14);color:var(--gold-deep,#a8842f);border:1px solid rgba(201,162,74,.35)}

/* ════ MEMBER WELCOME (first-run onboarding) + Griot welcome editor ════ */
.mw-overlay{position:fixed;inset:0;z-index:1200;background:rgba(12,16,24,.55);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:34px 18px}
.mw-overlay[hidden]{display:none}
.mw-card{background:var(--cream,#f7efe0);max-width:760px;width:100%;border-radius:18px;border:1px solid var(--gold,#C9A24A);box-shadow:0 40px 90px -30px rgba(8,10,16,.8);overflow:hidden;position:relative;margin:auto}
.mw-x{position:absolute;top:14px;right:16px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45);color:#eef3fa;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:1.1rem;line-height:1;z-index:3}
.mw-head{background:linear-gradient(180deg,var(--navy-2,#1b2f4d),var(--navy,#14233B));color:#eef3fa;padding:30px 30px 26px;text-align:center}
.mw-crest{width:42px;height:42px;color:var(--gold2,#E6C878);margin:0 auto 10px;display:block}
.mw-eyebrow{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--gold2,#E6C878)}
.mw-title{font-family:var(--serif,'Cormorant Garamond',serif);font-weight:600;font-size:clamp(1.8rem,4vw,2.6rem);margin:.15em 0 .1em;color:#fff}
.mw-purpose{font-size:.95rem;color:#cdd8ea;max-width:46ch;margin:0 auto;line-height:1.5}
.mw-body{padding:24px 30px 28px}
.mw-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}
.mw-panel{background:var(--paper,#fbf6ec);border:1px solid var(--line,rgba(20,20,20,.14));border-radius:13px;padding:18px;margin-bottom:16px}
.mw-grid .mw-panel{margin-bottom:0}
.mw-h2{font-family:var(--serif,serif);font-weight:600;font-size:1.2rem;margin:0 0 10px;color:var(--navy,#14233B)}
.mw-row{display:flex;justify-content:space-between;gap:12px;font-size:.88rem;padding:6px 0;border-bottom:1px solid var(--line-soft,rgba(20,20,20,.08))}
.mw-row:last-child{border-bottom:0}
.mw-row .k{color:var(--ink-soft,#6b6157);font-weight:600}
.mw-row .v{color:var(--ink,#141414);font-weight:600;text-align:right}
.mw-note{background:linear-gradient(180deg,#fffaf0,#fdf3e0);border-color:var(--gold,#C9A24A)}
.mw-note-body{font-family:var(--serif,serif);font-style:italic;font-size:1.05rem;line-height:1.55;color:var(--ink,#141414);margin:0;white-space:pre-wrap}
.mw-sub{font-size:.85rem;color:var(--ink-soft,#6b6157);margin:0 0 12px}
.mw-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:1px solid var(--line,rgba(20,20,20,.14));border-radius:11px;padding:12px 14px;margin-bottom:9px;cursor:pointer;transition:border-color .14s,transform .12s}
.mw-item:hover{border-color:var(--gold,#C9A24A);transform:translateX(2px)}
.mw-check{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:2px solid var(--gold,#C9A24A);display:flex;align-items:center;justify-content:center;color:#fff}
.mw-item.done .mw-check{background:var(--green,#3a8266);border-color:var(--green,#3a8266)}
.mw-item.done .mw-it-t{color:var(--ink-soft,#6b6157);text-decoration:line-through}
.mw-it{flex:1;min-width:0}
.mw-it-t{font-weight:700;font-size:.92rem;color:var(--ink,#141414);display:block}
.mw-it-d{font-size:.8rem;color:var(--ink-soft,#6b6157);display:block;margin-top:1px}
.mw-go{flex:0 0 auto;color:var(--gold-deep,#a8842f);font-weight:700}
.mw-count-grid{display:flex;flex-wrap:wrap;gap:22px}
.mw-count b{display:block;font-family:var(--serif,serif);font-size:1.6rem;color:var(--navy,#14233B);font-weight:700;line-height:1}
.mw-count span{font-size:.78rem;color:var(--ink-soft,#6b6157)}
.mw-counts-locked{font-size:.86rem;color:var(--ink-soft,#6b6157);font-style:italic;margin:0}
.mw-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.mw-btn{font-family:var(--sans,'DM Sans',sans-serif);font-weight:700;font-size:.92rem;padding:13px 26px;border-radius:11px;cursor:pointer;border:1px solid var(--gold,#C9A24A)}
.mw-btn.primary{background:linear-gradient(180deg,var(--gold2,#E6C878),var(--gold,#C9A24A));color:#2a1d05}
.mw-btn.ghost{background:transparent;color:var(--ink-soft,#6b6157)}
@media(max-width:620px){.mw-grid{grid-template-columns:1fr}.mw-head{padding:24px 20px}.mw-body{padding:18px}}

/* ── Set-password success: send-to-member instructions ── */
.ac-pwd-success[hidden]{display:none}
.ac-pwd-card{margin-top:14px;border:1px solid var(--green,#3a8266);border-radius:12px;overflow:hidden;background:#fff}
.ac-pwd-head{background:rgba(58,130,102,.12);color:var(--green-deep,#2c6450);font-weight:700;font-size:.9rem;padding:11px 14px;border-bottom:1px solid rgba(58,130,102,.25)}
.ac-pwd-body{padding:14px}
.ac-pwd-creds{display:flex;flex-direction:column;gap:9px;margin-bottom:12px}
.ac-pwd-creds > div{display:flex;flex-direction:column;gap:3px}
.ac-pwd-creds .k{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--gold-deep,#a8842f)}
.ac-pwd-creds code,.ac-pwd-creds a{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem;color:var(--ink,#141414);word-break:break-all;background:var(--cream,#f7efe0);padding:6px 9px;border-radius:7px;border:1px solid var(--line,rgba(20,20,20,.14))}
.ac-pwd-creds a{color:var(--navy,#14233B);text-decoration:none}
.ac-pwd-instr{width:100%;box-sizing:border-box;font-family:var(--sans,'DM Sans',sans-serif);font-size:.84rem;line-height:1.5;padding:10px 12px;border:1px solid var(--line,rgba(20,20,20,.14));border-radius:9px;background:var(--paper,#fbf6ec);color:var(--ink,#141414);resize:vertical;margin-bottom:10px}
.ac-pwd-actions{display:flex;gap:9px;flex-wrap:wrap}
.ac-pwd-actions a.ac-btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.ac-pwd-note{font-size:.78rem;color:var(--ink-soft,#6b6157);margin:10px 0 0}

/* ── Invitation Dashboard (Account Center) ── */
.ac-inv-sec{margin-bottom:20px}
.ac-inv-sec-h{font-family:var(--serif,'Cormorant Garamond',serif);font-size:1.1rem;font-weight:600;color:var(--navy,#14233B);margin:0 0 9px;display:flex;align-items:center;gap:9px}
.ac-inv-sec-h .ct{font-family:var(--sans,'DM Sans',sans-serif);font-size:.7rem;font-weight:700;color:var(--ink-soft,#6b6157);background:rgba(20,35,59,.09);padding:2px 9px;border-radius:20px}
.ac-inv{background:#fff;border:1px solid var(--line,rgba(20,20,20,.14));border-radius:12px;padding:14px 16px;margin-bottom:10px}
.ac-inv-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.ac-inv-name{font-weight:700;color:var(--ink,#141414);font-size:.97rem}
.ac-inv-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-bottom:12px}
.ac-inv-meta > div{display:flex;flex-direction:column;gap:1px;min-width:0}
.ac-inv-meta .k{font-size:.63rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--gold-deep,#a8842f)}
.ac-inv-meta .v{font-size:.83rem;color:var(--ink,#141414);word-break:break-word}
.ac-inv-acts{display:flex;flex-wrap:wrap;gap:7px}
.ac-inv-acts button{font-size:.79rem;padding:7px 13px;border-radius:8px;border:1px solid var(--line,rgba(20,20,20,.16));background:var(--paper,#fbf6ec);color:var(--ink,#141414);cursor:pointer;font-weight:600;font-family:var(--sans,'DM Sans',sans-serif)}
.ac-inv-acts button:hover{border-color:var(--gold,#C9A24A)}
.ac-inv-acts button.danger:hover{border-color:#b4452f;color:#b4452f}
.ac-inv-empty{font-size:.85rem;color:var(--ink-soft,#6b6157);font-style:italic;padding:4px 0;margin:0}
.ac-badge{font-size:.69rem;font-weight:700;padding:3px 11px;border-radius:20px;white-space:nowrap}
.ac-badge.ok{background:rgba(58,130,102,.15);color:var(--green-deep,#2c6450)}
.ac-badge.gold{background:rgba(201,162,74,.18);color:var(--gold-deep,#a8842f)}
.ac-badge.navy{background:rgba(20,35,59,.1);color:var(--navy,#14233B)}
.ac-badge.mute{background:rgba(20,20,20,.08);color:var(--ink-soft,#6b6157)}
@media(max-width:520px){.ac-inv-meta{grid-template-columns:1fr}}

/* ── Invitation progress pipeline ── */
.ac-pipe{display:flex;align-items:flex-start;margin:0 0 13px}
.ac-step{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;position:relative}
.ac-dot{width:13px;height:13px;border-radius:50%;border:2px solid var(--line,rgba(20,20,20,.2));background:#fff;z-index:1}
.ac-step.on-gold .ac-dot{background:var(--gold,#C9A24A);border-color:var(--gold,#C9A24A)}
.ac-step.on-green .ac-dot{background:var(--green,#3a8266);border-color:var(--green,#3a8266)}
.ac-steplbl{font-size:.58rem;letter-spacing:.04em;text-transform:uppercase;font-weight:700;color:var(--ink-soft,#9a8f7e);text-align:center;line-height:1.15}
.ac-step.on-gold .ac-steplbl{color:var(--gold-deep,#a8842f)}
.ac-step.on-green .ac-steplbl{color:var(--green-deep,#2c6450)}
.ac-bar{position:absolute;top:5.5px;left:-50%;width:100%;height:2px;background:var(--line,rgba(20,20,20,.16));z-index:0}
.ac-bar.fill{background:var(--gold2,#E6C878)}

/* ── Invite Wizard ── */
.iw-steps{display:flex;gap:6px;justify-content:center;margin-top:12px}
.iw-steps .s{width:32px;height:4px;border-radius:3px;background:rgba(255,255,255,.25)}
.iw-steps .s.on{background:var(--gold2,#E6C878)}
.iw-field{margin-bottom:13px}
.iw-field label{display:block;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--gold-deep,#a8842f);margin-bottom:5px}
.iw-field input,.iw-field select,.iw-field textarea{width:100%;box-sizing:border-box;padding:11px 13px;border:1px solid var(--line,rgba(20,20,20,.16));border-radius:9px;font-family:var(--sans,'DM Sans',sans-serif);font-size:.92rem;background:#fff;color:var(--ink,#141414)}
.iw-field textarea{resize:vertical}
.iw-search-results{max-height:230px;overflow-y:auto;border:1px solid var(--line,rgba(20,20,20,.14));border-radius:10px}
.iw-presult{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 13px;cursor:pointer;border-bottom:1px solid var(--line-soft,rgba(20,20,20,.08))}
.iw-presult:hover{background:var(--cream,#f7efe0)}
.iw-presult:last-child{border-bottom:0}
.iw-presult .nm{font-weight:600;color:var(--ink,#141414);font-size:.9rem}
.iw-presult .rel{font-size:.74rem;color:var(--gold-deep,#a8842f);font-weight:700}
.iw-picked{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;background:rgba(58,130,102,.1);border:1px solid var(--green,#3a8266);border-radius:10px;margin-bottom:12px}
.iw-picked .nm{font-weight:700;color:var(--ink,#141414)}
.iw-picked .rel{font-size:.78rem;color:var(--green-deep,#2c6450);font-weight:700}
.iw-rev{background:var(--paper,#fbf6ec);border:1px solid var(--line,rgba(20,20,20,.14));border-radius:11px;padding:14px;margin-bottom:14px}
.iw-rev .r{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line-soft,rgba(20,20,20,.08));font-size:.88rem}
.iw-rev .r:last-child{border-bottom:0}
.iw-rev .k{color:var(--ink-soft,#6b6157);font-weight:600}
.iw-rev .v{color:var(--ink,#141414);font-weight:600;text-align:right}
.iw-note{font-size:.8rem;color:var(--ink-soft,#6b6157)}
.iw-toggle{font-size:.83rem;color:var(--gold-deep,#a8842f);font-weight:600;cursor:pointer;background:none;border:none;padding:4px 0;text-decoration:underline}
.iw-block{background:rgba(201,162,74,.12);border:1px solid var(--gold,#C9A24A);border-radius:10px;padding:13px;font-size:.86rem;color:var(--ink,#141414);margin-bottom:12px;line-height:1.5}

/* ── Tree Stage 1: unmistakable selection, calmer field, lighter breadcrumb ── */
/* Make the focus person the clear hero: gold ring + soft glow (no size change → no new overlap). */
#screen-tree .tnode.is-focus-node,
#screen-tree .tree-canvas .tnode-couple .tnode.is-focus-node,
#screen-tree .tnode.center{
  box-shadow:0 0 0 2px var(--gold,#C9A24A), 0 0 0 7px rgba(201,162,74,.22), 0 18px 40px rgba(20,20,20,.26) !important;
  border-color:var(--gold,#C9A24A) !important;
}
/* Everyone else recedes a touch so the eye lands on the focus first; full on hover. */
#screen-tree .tree-art .tnode:not(.is-focus-node):not(.center){ opacity:.82; transition:opacity .15s,border-color .15s,box-shadow .15s }
#screen-tree .tree-art .tnode:not(.is-focus-node):not(.center):hover{ opacity:1 }
/* Lighten the breadcrumb so it reads as a quiet trail, not a headline. */
#screen-tree .tree-trail-pill{ font-size:.78rem; padding:4px 11px; background:rgba(247,239,224,.78); border-color:rgba(107,68,35,.18); font-weight:500 }
#screen-tree .tree-trail-pill.is-current{ font-weight:600 }
#screen-tree .tree-trail-here{ font-size:.58rem; opacity:.7; letter-spacing:.12em }

/* ── Photo Identification ── */
.pid-tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.pid-tabs button{border:1px solid var(--line,rgba(20,20,20,.16));background:var(--paper,#fbf6ec);color:var(--ink-soft,#6b6157);font-family:var(--sans,'DM Sans',sans-serif);font-weight:700;font-size:.82rem;padding:8px 14px;border-radius:999px;cursor:pointer}
.pid-tabs button.on{background:var(--navy,#14233B);color:#fff;border-color:var(--navy,#14233B)}
.pid-list{display:flex;flex-direction:column;gap:14px}
.pid-card{display:flex;gap:14px;background:#fff;border:1px solid var(--line,rgba(20,20,20,.14));border-radius:13px;padding:13px;align-items:flex-start}
.pid-img{flex:0 0 auto;width:128px;height:128px;border-radius:10px;background:#e9ddc6 center/cover no-repeat;border:1px solid var(--line,rgba(20,20,20,.14))}
.pid-info{flex:1;min-width:0}
.pid-ttl{font-family:var(--serif,serif);font-weight:600;font-size:1.05rem;color:var(--ink,#141414);margin-bottom:8px}
.pid-tags{display:flex;flex-direction:column;gap:7px}
.pid-tag{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--cream,#f7efe0);border:1px solid var(--line,rgba(20,20,20,.12));border-radius:9px;padding:7px 11px}
.pid-tag .nm{font-weight:700;font-size:.86rem;color:var(--ink,#141414)}
.pid-tag select,.pid-form select{border:1px solid var(--line,rgba(20,20,20,.18));border-radius:7px;padding:5px 8px;font-family:var(--sans,'DM Sans',sans-serif);font-size:.8rem;background:#fff}
.pid-cf{font-size:.7rem;font-weight:700;padding:2px 9px;border-radius:999px}
.pid-cf.g{background:rgba(58,130,102,.15);color:var(--green-deep,#2c6450)}
.pid-cf.a{background:rgba(201,162,74,.18);color:var(--gold-deep,#a8842f)}
.pid-cf.r{background:rgba(180,69,47,.14);color:#a8341f}
.pid-suggs{display:flex;flex-direction:column;gap:9px;margin-bottom:8px}
.pid-sg{background:var(--cream,#f7efe0);border:1px solid var(--line,rgba(20,20,20,.12));border-radius:10px;padding:9px 12px}
.pid-sg-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pid-sg .nm{font-weight:700;font-size:.9rem;color:var(--ink,#141414)}
.pid-st{font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:999px}
.pid-st-pending{background:rgba(20,35,59,.1);color:var(--navy,#14233B)}
.pid-st-confirmed{background:rgba(58,130,102,.16);color:var(--green-deep,#2c6450)}
.pid-st-possible{background:rgba(201,162,74,.18);color:var(--gold-deep,#a8842f)}
.pid-st-rejected{background:rgba(20,20,20,.08);color:var(--ink-soft,#6b6157)}
.pid-reason{font-style:italic;font-size:.84rem;color:var(--ink,#141414);margin:6px 0 2px}
.pid-meta{font-size:.76rem;color:var(--ink-soft,#6b6157);margin:2px 0}
.pid-by{font-size:.72rem;color:var(--ink-soft,#6b6157);margin:4px 0 0}
.pid-acts{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.pid-btn{border:1px solid var(--line,rgba(20,20,20,.18));background:#fff;color:var(--ink,#141414);font-weight:700;font-size:.78rem;padding:6px 12px;border-radius:8px;cursor:pointer;font-family:var(--sans,'DM Sans',sans-serif)}
.pid-btn.ok{background:var(--green,#3a8266);border-color:var(--green,#3a8266);color:#fff}
.pid-btn.warn:hover{border-color:#b4452f;color:#b4452f}
.pid-add{margin-top:6px}
.pid-add summary{cursor:pointer;font-size:.82rem;font-weight:700;color:var(--gold-deep,#a8842f)}
.pid-form{display:flex;flex-direction:column;gap:7px;margin-top:9px}
.pid-form input,.pid-form textarea{border:1px solid var(--line,rgba(20,20,20,.18));border-radius:8px;padding:8px 10px;font-family:var(--sans,'DM Sans',sans-serif);font-size:.85rem}
.pid-results{display:flex;flex-wrap:wrap;gap:6px}
.pid-res-i{border:1px solid var(--line,rgba(20,20,20,.18));background:var(--cream,#f7efe0);border-radius:8px;padding:6px 11px;font-size:.82rem;font-weight:600;cursor:pointer}
.pid-res-i:hover{border-color:var(--gold,#C9A24A)}
.pid-note{font-size:.85rem;color:var(--ink-soft,#6b6157);font-style:italic;margin:4px 0}
@media(max-width:560px){.pid-card{flex-direction:column}.pid-img{width:100%;height:160px}}

/* ── Tree Stage 2 (slice 1): alive focus · bark branches · preservation dots ── */
/* Make the selected person unmistakably the center of the journey */
#screen-tree .tnode.is-focus-node,
#screen-tree .tnode.center{
  z-index:8;
  border:2px solid var(--gold,#C9A24A);
  background:#fff8e9;
  box-shadow:0 0 0 4px rgba(201,162,74,.22), 0 18px 44px rgba(20,20,20,.30);
  transform:translate(-50%,-50%) scale(1.12);
}
#screen-tree .tnode.center{transform:translate(-50%,-50%) scale(1.12)}
#screen-tree .tnode-couple .tnode.is-focus-node{transform:scale(1.12)}
#screen-tree .tnode.is-focus-node .tnode-av,
#screen-tree .tnode.center .tnode-av{box-shadow:0 0 0 2px var(--gold2,#E6C878)}

/* Organic bark-brown branches in place of thin chart lines */
#screen-tree .tree-vines path{
  stroke:rgba(243,228,196,.92);
  stroke-width:3.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:1;
  fill:none;
  filter:drop-shadow(0 1px 2.5px rgba(20,12,4,.8));
}
#screen-tree .tree-vines path.tree-trunk{
  stroke:rgba(232,204,150,.96);
  stroke-width:8;
  filter:drop-shadow(0 2px 5px rgba(20,12,4,.85));
}
#screen-tree .tree-scene[data-lens] .tree-vines path{filter:drop-shadow(0 1px 2.5px rgba(20,12,4,.8))}

/* Preservation dot on every card */
#screen-tree .tnode-pres{
  position:absolute;top:8px;left:8px;width:11px;height:11px;border-radius:50%;
  box-shadow:0 0 0 2px var(--paper,#fbf6ec);z-index:9;
}
#screen-tree .tnode-pres-g{background:var(--green,#3a8266)}
#screen-tree .tnode-pres-a{background:var(--gold,#C9A24A)}
#screen-tree .tnode-pres-r{background:#b4452f}

/* ── Tree Stage 2 (slice 2): Family View / Legacy View ── */
#screen-tree .lr-tvt{display:flex;justify-content:center;width:max-content;gap:0;margin:10px auto 0;background:rgba(10,14,22,.42);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:4px;position:relative;z-index:8}
#screen-tree .lr-tvt button{border:0;background:transparent;color:#e7d9bd;font-family:var(--sans);font-weight:700;font-size:.8rem;padding:7px 15px;border-radius:999px;cursor:pointer}
#screen-tree .lr-tvt button.on{background:linear-gradient(180deg,var(--gold2,#E6C878),var(--gold,#C9A24A));color:#2a1d05}
/* Stage-2 generational layout: Show-everyone control + collateral / dense cards */
#screen-tree .tree-everyone{display:flex;justify-content:center;margin:6px auto 0;position:relative;z-index:8}
#screen-tree .tree-everyone-btn{background:rgba(10,14,22,.42);border:1px solid rgba(255,255,255,.18);color:#e7d9bd;font-family:var(--sans);font-weight:700;font-size:.78rem;padding:7px 16px;border-radius:999px;cursor:pointer;transition:background .15s,border-color .15s}
#screen-tree .tree-everyone-btn:hover{border-color:var(--gold,#C9A24A);background:rgba(10,14,22,.55)}
#screen-tree .tree-everyone-btn.on{background:linear-gradient(180deg,var(--gold2,#E6C878),var(--gold,#C9A24A));color:#2a1d05;border-color:var(--gold,#C9A24A)}
#screen-tree .tnode.tn-collateral{opacity:.84;filter:saturate(.92)}
#screen-tree .tnode.tn-collateral b{font-weight:500}
#screen-tree .tnode.tn-dense{min-width:138px;max-width:176px;padding:6px 10px}
#screen-tree .tnode.tn-dense b{font-size:.88rem}
#screen-tree .tree-people-stage .tnode.tn-free .tnode-body b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#screen-tree .tnode.tn-dense .tnode-sub,#screen-tree .tnode.tn-dense .tnode-fruit{font-size:.66rem}
/* ── Stage-3 redesign: header controls, generation bands, focus emphasis ── */
#screen-tree .tree-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:10px auto 0;position:relative;z-index:8}
#screen-tree .tree-seg{display:inline-flex;background:rgba(10,14,22,.42);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:3px}
#screen-tree .tree-seg-btn{border:0;background:transparent;color:#e7d9bd;font-family:var(--sans);font-weight:700;font-size:.76rem;padding:6px 14px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}
#screen-tree .tree-seg-btn:hover{color:#fff}
#screen-tree .tree-seg-btn.on{background:linear-gradient(180deg,var(--gold2,#E6C878),var(--gold,#C9A24A));color:#2a1d05}
/* Generation BANDS — full-width rules that organise the tree into clear rows */
#screen-tree .tnode-band{position:absolute;left:0;right:0;display:flex;align-items:center;gap:12px;padding:0 3%;z-index:3;pointer-events:none}
#screen-tree .tnode-band::before,#screen-tree .tnode-band::after{content:'';flex:1;height:1.5px;background:linear-gradient(90deg,transparent,rgba(247,235,206,.5),transparent)}
#screen-tree .tnode-band-label{font-family:var(--sans);font-size:.66rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:rgba(252,244,224,.98);text-shadow:0 1px 2px rgba(20,12,4,.95),0 1px 8px rgba(20,12,4,.7);white-space:nowrap}
#screen-tree .tnode-band.tnode-band-focus::before,#screen-tree .tnode-band.tnode-band-focus::after{background:linear-gradient(90deg,transparent,rgba(201,162,74,.8),transparent);height:2.5px}
#screen-tree .tnode-band.tnode-band-focus .tnode-band-label{color:var(--gold2,#E6C878);font-size:.8rem;letter-spacing:.24em;text-shadow:0 1px 3px rgba(20,12,4,.95),0 0 18px rgba(201,162,74,.6)}
@media (max-width:640px){#screen-tree .tnode-band-label{font-size:.54rem;letter-spacing:.1em}#screen-tree .tnode-band{gap:7px}}
/* The selected person IS the trunk: larger, gold-bordered, glowing — every
   line points toward them. Ancestors gently recede by generation. */
#screen-tree .tnode.tn-ggp{opacity:.88}
#screen-tree .tnode.tn-gp{opacity:.95}
#screen-tree .tree-canvas .tnode-couple .tnode.is-focus-node{
  transform:scale(1.32);
  min-width:196px;max-width:248px;
  border:3px solid var(--gold,#C9A24A);
  background:#fff9ec;
  box-shadow:0 24px 56px rgba(20,12,4,.55),0 0 0 5px rgba(201,162,74,.32),0 0 50px rgba(201,162,74,.6);
  z-index:11;
}
#screen-tree .tree-canvas .tnode-couple .tnode.is-focus-node:hover{transform:scale(1.32) translateY(-3px)}
/* Growth state — the living archive's health, shown as a small sprout/fruit */
#screen-tree .tnode-growth{position:absolute;top:6px;left:6px;z-index:9;font-size:.86rem;line-height:1;filter:drop-shadow(0 1px 2px rgba(20,12,4,.5))}
#screen-tree .tnode.tn-dense .tnode-growth{font-size:.74rem}
#screen-tree .tree-canvas .tnode-couple .tnode.is-focus-node .tnode-growth{font-size:1rem;top:8px;left:8px}
/* Family vs Legacy are two different experiences. Family = clean relationships
   (name + relation + growth state only). Legacy = the archive blooming in the
   canopy and every card becoming a gateway to what the person left behind. */
#screen-tree .tree-scene[data-view="family"] .tree-living-layer{display:none}
/* the fruit row is hidden in Family View, shown in Legacy View */
#screen-tree .tnode-fruit{display:none}
#screen-tree .tree-scene[data-view="legacy"] .tnode .tnode-sub{display:none}
#screen-tree .tree-scene[data-view="legacy"] .tnode-fruit{display:flex;flex-direction:column;gap:3px;margin-top:6px}
#screen-tree .tnode-fruit .tf{display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-size:.72rem;font-weight:700;color:var(--baobab-brown,#5C3D1E);line-height:1.25;margin:0}
#screen-tree .tnode-fruit .tf-empty{color:var(--ink-soft);font-weight:500;font-style:italic}
/* ── Sidebar: calm controls in the margin; the centre belongs to the family ── */
#screen-tree .tree-scene{transition:padding-left .22s ease}
#screen-tree .tree-scene[data-sidebar="open"]{padding-left:250px}
#screen-tree .tree-scene[data-sidebar="closed"]{padding-left:0}
@media(max-width:860px){#screen-tree .tree-scene[data-sidebar="open"]{padding-left:0}}
#screen-tree .tree-sidebar{position:absolute;top:14px;left:16px;width:224px;max-height:calc(100% - 34px);z-index:30;
  background:rgba(18,12,6,.84);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  border:1px solid rgba(201,162,74,.3);border-radius:16px;box-shadow:0 18px 46px rgba(10,6,2,.55);
  color:#ece0c8;overflow:auto;transition:width .22s ease}
#screen-tree .tree-scene[data-sidebar="closed"] .tree-sidebar{width:32px;overflow:visible;background:rgba(18,12,6,.55)}
#screen-tree .tree-scene[data-sidebar="closed"] .tree-sidebar-inner{display:none}
#screen-tree .tree-sidebar-inner{padding:14px 14px 16px}
#screen-tree .tree-sb-brand{font-family:var(--serif);font-size:1.16rem;font-weight:600;color:#f6e9cb;margin:2px 0 8px;display:flex;align-items:center;gap:7px}
#screen-tree .tree-sb-sec{padding:9px 0;border-top:1px solid rgba(201,162,74,.18)}
#screen-tree .tree-sb-sec:first-of-type{border-top:0;padding-top:0}
#screen-tree .tree-sb-h{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;cursor:pointer;font-family:var(--sans);font-size:.6rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(230,200,120,.85);padding:3px 0;margin-bottom:6px}
#screen-tree .tree-sb-h:hover{color:rgba(245,225,160,.95)}
#screen-tree .tree-sb-caret{font-size:.95rem;line-height:1;transform:rotate(90deg);transition:transform .15s;opacity:.7}
#screen-tree .tree-sb-sec.collapsed .tree-sb-caret{transform:rotate(0deg)}
#screen-tree .tree-sb-sec.collapsed .tree-sb-body{display:none}
#screen-tree .tree-sb-sec.collapsed{padding-bottom:4px}
#screen-tree .tree-sb-sec.collapsed .tree-sb-h{margin-bottom:0}
#screen-tree .tree-sb-opt,#screen-tree .tree-sb-chk{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;color:#e7d9bd;font-family:var(--sans);font-size:.84rem;font-weight:600;padding:6px 8px;border-radius:9px;cursor:pointer;transition:background .14s}
#screen-tree .tree-sb-opt:hover,#screen-tree .tree-sb-chk:hover{background:rgba(201,162,74,.14)}
#screen-tree .tree-sb-dot{flex:0 0 auto;width:14px;height:14px;border-radius:50%;border:2px solid rgba(230,200,120,.55);box-sizing:border-box}
#screen-tree .tree-sb-opt.on .tree-sb-dot{border-color:var(--gold,#C9A24A);background:radial-gradient(circle,var(--gold2,#E6C878) 0 42%,transparent 46%)}
#screen-tree .tree-sb-opt.on,#screen-tree .tree-sb-chk.on{color:#fff5df}
#screen-tree .tree-sb-box{flex:0 0 auto;width:14px;height:14px;border-radius:4px;border:2px solid rgba(230,200,120,.55);box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-size:.7rem;line-height:1;color:#2a1d05}
#screen-tree .tree-sb-chk.on .tree-sb-box{background:linear-gradient(180deg,var(--gold2,#E6C878),var(--gold,#C9A24A));border-color:var(--gold,#C9A24A)}
#screen-tree .tree-sb-chk.on .tree-sb-box::after{content:"\2713"}
#screen-tree .tree-sidebar-collapse{position:absolute;top:9px;right:9px;width:26px;height:26px;border-radius:50%;border:1px solid rgba(201,162,74,.4);background:rgba(28,18,8,.96);color:#e7d9bd;cursor:pointer;z-index:31;display:flex;align-items:center;justify-content:center;font-size:.66rem}
#screen-tree .tree-scene[data-sidebar="closed"] .tree-sidebar-collapse{right:auto;left:3px}
#screen-tree .tree-scene[data-sidebar="closed"] .tsb-chev{display:inline-block;transform:rotate(180deg)}
/* Display toggles — pure CSS gates */
#screen-tree .tree-scene[data-show-labels="0"] .tnode-band{display:none}
#screen-tree .tree-scene[data-show-branches="0"] .tree-vines{display:none}
#screen-tree .tree-scene[data-show-badges="0"] .tnode-growth{display:none}
#screen-tree .tree-scene[data-show-photos="0"] .tnode-av{background-image:none!important}
/* Camera — drag-to-pan, scroll-to-zoom */
#screen-tree .tree-canvas{cursor:grab;will-change:transform;transform-origin:50% 50%}
#screen-tree .tree-canvas.is-grabbing{cursor:grabbing}
#screen-tree .tree-canvas .tnode{cursor:pointer}
#screen-tree .tree-sb-zoom{display:flex;gap:8px;margin-bottom:7px}
#screen-tree .tree-sb-zbtn{flex:1;height:34px;border-radius:9px;border:1px solid rgba(201,162,74,.35);background:rgba(201,162,74,.1);color:#f0e2c2;font-size:1.15rem;font-weight:700;line-height:1;cursor:pointer;transition:background .14s}
#screen-tree .tree-sb-zbtn:hover{background:rgba(201,162,74,.22)}
#screen-tree .tree-sb-act{display:block;width:100%;text-align:left;background:none;border:0;color:#e7d9bd;font-family:var(--sans);font-size:.84rem;font-weight:600;padding:6px 8px;border-radius:9px;cursor:pointer;transition:background .14s}
#screen-tree .tree-sb-act:hover{background:rgba(201,162,74,.14)}
#screen-tree .tree-sb-hint{margin:7px 2px 0;font-family:var(--sans);font-size:.66rem;line-height:1.35;color:rgba(230,216,184,.62)}
/* ── Universal Search — a Legacy Room service on every page ── */
.lr-search-bar{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));right:14px;z-index:150}
.lr-search-trigger{display:inline-flex;align-items:center;gap:9px;max-width:64vw;
  background:linear-gradient(180deg,rgba(48,31,16,.92),rgba(30,19,9,.95));
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(201,162,74,.34);border-radius:999px;padding:9px 16px 9px 13px;
  color:#e9dabb;font-family:var(--sans),sans-serif;font-size:.86rem;font-weight:600;cursor:pointer;
  box-shadow:0 8px 22px rgba(10,6,2,.4);transition:border-color .15s}
.lr-search-trigger:hover{border-color:var(--gold,#C9A24A)}
.lr-search-trigger svg{width:17px;height:17px;flex:0 0 auto;color:var(--gold2,#E6C878)}
.lr-search-ph{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:520px){.lr-search-ph{display:none}.lr-search-trigger{padding:9px 11px}}
.lr-search-overlay{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-start;justify-content:center;
  padding:0 14px;background:rgba(12,8,3,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .2s ease}
.lr-search-overlay[hidden]{display:none!important}
.lr-search-overlay:not(.open){pointer-events:none}
.lr-search-overlay.open{opacity:1}
.lrs-panel{width:min(640px,100%);margin-top:calc(8vh + env(safe-area-inset-top,0px));max-height:84vh;display:flex;flex-direction:column;
  background:var(--cream,#f7efe0);border:1px solid rgba(107,68,35,.22);border-radius:18px;overflow:hidden;
  box-shadow:0 30px 80px rgba(10,6,2,.5);transform:translateY(-10px);transition:transform .2s ease}
.lr-search-overlay.open .lrs-panel{transform:translateY(0)}
.lrs-top{display:flex;align-items:center;gap:11px;padding:14px;border-bottom:1px solid rgba(107,68,35,.16)}
.lrs-ic{width:20px;height:20px;flex:0 0 auto;color:var(--gold-deep,#a8842f)}
#lrs-input{flex:1;min-width:0;border:0;background:none;outline:none;font-family:var(--serif),serif;font-size:1.32rem;color:var(--ink,#141414)}
#lrs-input::placeholder{color:rgba(20,12,4,.4);font-family:var(--sans),sans-serif;font-size:.98rem}
.lrs-close{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:0;background:rgba(107,68,35,.1);color:#5a4632;font-size:1.2rem;line-height:1;cursor:pointer}
.lrs-close:hover{background:rgba(107,68,35,.2)}
.lrs-tabs{display:flex;gap:7px;flex-wrap:wrap;padding:11px 14px 4px}
.lrs-tabs:empty{display:none}
.lrs-tab{border:1px solid rgba(107,68,35,.22);background:#fff;border-radius:999px;padding:5px 12px;font-family:var(--sans),sans-serif;font-size:.78rem;font-weight:600;color:#5a4632;cursor:pointer}
.lrs-tab i{font-style:normal;opacity:.6;margin-left:3px}
.lrs-tab.on{background:var(--baobab-brown,#6b4423);border-color:var(--baobab-brown,#6b4423);color:#fdf8ee}
.lrs-results{overflow:auto;padding:8px 8px 14px;flex:1}
.lrs-hint{padding:22px 16px 26px;color:var(--ink-soft,#5a4632);font-family:var(--sans),sans-serif;font-size:.92rem;line-height:1.5;text-align:center}
.lrs-hint em{font-style:normal;font-weight:700;color:var(--gold-deep,#a8842f)}
.lrs-group{margin:6px 0 4px}
.lrs-group-h{display:flex;align-items:center;gap:7px;padding:8px 10px 5px;font-family:var(--sans),sans-serif;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep,#a8842f)}
.lrs-group-h span{margin-left:auto;opacity:.6;letter-spacing:0}
.lrs-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:0;border-radius:11px;padding:9px 11px;cursor:pointer;transition:background .12s}
.lrs-row:hover{background:rgba(201,162,74,.14)}
.lrs-row-ic{flex:0 0 auto;font-size:1.05rem;width:24px;text-align:center}
.lrs-row-main{display:flex;flex-direction:column;min-width:0}
.lrs-row-main b{font-family:var(--serif),serif;font-size:1.04rem;font-weight:600;color:var(--ink,#141414);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrs-row-sub{font-family:var(--sans),sans-serif;font-size:.76rem;color:var(--ink-soft,#5a4632);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrs-more{padding:6px 12px 10px;font-family:var(--sans),sans-serif;font-size:.76rem;color:var(--ink-soft,#5a4632)}
body.lrs-lock{overflow:hidden}
@keyframes lrsFlash{0%,100%{box-shadow:0 24px 56px rgba(20,12,4,.55),0 0 0 5px rgba(201,162,74,.32),0 0 50px rgba(201,162,74,.6)}45%{box-shadow:0 24px 56px rgba(20,12,4,.55),0 0 0 9px rgba(230,200,120,.9),0 0 76px rgba(230,200,120,.95)}}
#screen-tree .tnode.is-focus-node.lrs-flash{animation:lrsFlash 1.1s ease-in-out 2}
/* ── Tree sidebar: nav + tools in one calm rail ── */
#screen-tree .tree-room-wrap > .create-back{display:none}   /* Back now lives in the sidebar */
#screen-tree .tree-sb-back{display:inline-flex;align-items:center;gap:7px;background:none;border:0;color:rgba(230,216,184,.78);font-family:var(--sans);font-size:.82rem;font-weight:600;cursor:pointer;padding:2px 2px 8px;margin-bottom:2px}
#screen-tree .tree-sb-back:hover{color:#f6e9cb}
#screen-tree .tree-sb-back svg{width:14px;height:14px}
#screen-tree .tree-sb-sub{font-family:var(--sans);font-size:.72rem;color:rgba(230,216,184,.6);margin:-4px 0 8px}
#screen-tree .tree-sb-trail{margin:0 0 6px;display:flex;flex-wrap:wrap;gap:4px}
#screen-tree .tree-sb-trail .tree-trail{margin:0;gap:4px;justify-content:flex-start}
#screen-tree .tree-sb-trail .tree-trail-here{display:none}
#screen-tree .tree-sb-trail .tree-trail-pill{background:rgba(247,239,224,.1);border-color:rgba(201,162,74,.3);color:#e7d9bd;font-size:.72rem;padding:3px 8px}
#screen-tree .tree-sb-trail .tree-trail-pill.is-current{background:rgba(201,162,74,.85);border-color:rgba(201,162,74,.85);color:#1a1206}
#screen-tree .tree-sb-trail .tree-trail-yr{display:none}
#screen-tree .tree-sb-trail .tree-trail-sep{color:rgba(201,162,74,.6)}
#screen-tree .tree-sb-tools-h{font-family:var(--serif);font-size:.92rem;font-weight:600;color:rgba(246,233,203,.9);margin:6px 0 2px;padding-top:9px;border-top:1px solid rgba(201,162,74,.22)}
#screen-tree .tree-sb-nav .tree-sb-body{display:flex;flex-direction:column;gap:1px}
#screen-tree .tree-sb-link{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;color:#e7d9bd;font-family:var(--sans);font-size:.86rem;font-weight:600;padding:6px 8px;border-radius:9px;cursor:pointer;transition:background .12s}
#screen-tree .tree-sb-link span{width:18px;text-align:center;font-size:.95rem;flex:0 0 auto}
#screen-tree .tree-sb-link:hover{background:rgba(201,162,74,.14)}
#screen-tree .tree-sb-link.is-here{background:rgba(201,162,74,.2);color:#fff5df}
/* ── Baobab as calm wallpaper: even darkening so cards & branches pop ── */
#screen-tree .tree-canvas::before{filter:brightness(.56) saturate(.66) blur(2px) contrast(.92)}
#screen-tree .tree-canvas::after{background:
  linear-gradient(180deg, rgba(14,9,4,.5) 0%, rgba(14,9,4,.42) 50%, rgba(14,9,4,.56) 100%),
  radial-gradient(120% 80% at 50% 38%, rgba(18,10,4,0) 0%, rgba(18,10,4,.28) 100%)}
/* ── On the tree the bottom dock is hidden, so the timeline owns the bottom ── */
#screen-tree .tree-timeline{position:relative;z-index:6;margin-bottom:14px}
#screen-tree .tree-timeline,#screen-tree .tl-track,#screen-tree .tl-mark{pointer-events:auto}
#screen-tree .tl-mark{z-index:7;cursor:pointer}
#screen-tree .tl-mark::after{content:'';position:absolute;inset:-7px;border-radius:50%}  /* larger hit target */
/* ── True ancestry fan chart ── */
#screen-tree .tree-fan{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:min(74vh,94vw);height:min(74vh,94vw);z-index:4;pointer-events:none;overflow:visible}
#screen-tree .tree-fan .fan-wedge,#screen-tree .tree-fan .fan-center{pointer-events:auto;cursor:pointer}
#screen-tree .fan-wedge{stroke:rgba(20,12,4,.34);stroke-width:.18;transition:filter .12s}
#screen-tree .fan-wedge:hover{filter:brightness(1.06) saturate(1.06)}
#screen-tree .fan-wedge.is-expandable{stroke:rgba(20,12,4,.5);stroke-dasharray:none}
#screen-tree .fan-wedge.is-expandable:hover{filter:brightness(1.1) saturate(1.12)}
#screen-tree .fan-empty{fill:rgba(247,239,224,.04);stroke:rgba(247,239,224,.28);stroke-width:.16;stroke-dasharray:1 .8;pointer-events:none}
#screen-tree .fan-name{font-family:var(--sans,sans-serif);font-weight:700;fill:#2a1d0d;pointer-events:none}
#screen-tree .fan-yr{font-size:.74em;font-weight:500;fill:#5a4632}
#screen-tree .fan-plus{font-family:var(--sans,sans-serif);font-size:1.7px;font-weight:700;fill:rgba(40,29,13,.5);pointer-events:none}
#screen-tree .fan-center{fill:#fff7ea;stroke:var(--gold,#C9A24A);stroke-width:.9;filter:drop-shadow(0 1px 2px rgba(20,12,4,.5))}
#screen-tree .fan-center-name{font-family:var(--serif,serif);font-size:2.6px;font-weight:600;fill:#1a1206}
#screen-tree .fan-center-yr{font-family:var(--sans,sans-serif);font-size:1.8px;fill:#5a4632}
/* ── Compact cards for the Horizontal pedigree (relationships over profile detail) ── */
#screen-tree .tree-scene[data-layout="horizontal"] .tnode{min-width:92px;max-width:120px;padding:5px 8px 5px 5px;border-radius:12px;gap:6px;box-shadow:0 6px 14px rgba(20,20,20,.18)}
#screen-tree .tree-scene[data-layout="horizontal"] .tnode-av{width:26px;height:26px;font-size:.78rem;border-width:1.5px}
#screen-tree .tree-scene[data-layout="horizontal"] .tnode-body b{font-size:.74rem;line-height:1.05}
#screen-tree .tree-scene[data-layout="horizontal"] .tp-yr{font-size:.62rem}
#screen-tree .tree-scene[data-layout="horizontal"] .tp-counts{font-size:.58rem}
#screen-tree .tree-scene[data-layout="horizontal"] .tp-cta{display:none}
/* ── Progressive-disclosure branch arrow (top of each ancestor card) ── */
#screen-tree .tnode-up{position:absolute;top:-11px;left:50%;transform:translateX(-50%);width:21px;height:21px;border-radius:50%;background:rgba(48,31,16,.94);color:#f0dcb0;border:1px solid rgba(201,162,74,.62);display:flex;align-items:center;justify-content:center;font-size:.66rem;line-height:1;cursor:pointer;z-index:8;box-shadow:0 4px 10px rgba(20,12,4,.45);transition:transform .12s,background .12s,color .12s}
#screen-tree .tnode-up:hover{background:rgba(66,43,20,.99);transform:translateX(-50%) scale(1.14)}
#screen-tree .tnode-up:focus-visible{outline:2px solid var(--gold2,#E6C878);outline-offset:1px}
#screen-tree .tnode-up.is-open{color:#cdb784}
/* ── In-Laws: focus + spouse as two anchored roots, joined by a marriage bond ── */
#screen-tree .tnode.tn-rooted{z-index:6}
#screen-tree .tnode.tn-rooted.is-focus-node{min-width:168px;max-width:218px;z-index:7;border-color:var(--gold,#C9A24A);box-shadow:0 0 0 2px var(--gold2,#E6C878),0 14px 30px rgba(20,12,4,.42)}
#screen-tree .tnode.tn-rooted.is-focus-node .tnode-av{width:40px;height:40px;font-size:1.15rem}
#screen-tree .tnode.tn-spouse-root{border-color:rgba(201,162,74,.5)}
#screen-tree .tree-vines .tree-bond-line{stroke:var(--gold2,#E6C878);stroke-width:.7;opacity:.78;fill:none}
#screen-tree .tnode.tn-kin-spouse{border-style:dashed;border-color:rgba(201,162,74,.45);opacity:.92}

/* ════════════════ PERSON HUB ════════════════ */
/* A person's own world: a sticky tab bar over panels (Overview, Life Story,
   Timeline, Photos, Voice, Documents, Memories, Research, Relationships, DNA). */
#person-body .ph-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;margin:18px 0 0;padding-bottom:0;border-bottom:1px solid rgba(107,68,35,.18);position:sticky;top:0;z-index:5;background:linear-gradient(180deg,var(--cream,#f7efe0) 78%,rgba(247,239,224,0))}
#person-body .ph-tabs::-webkit-scrollbar{display:none}
#person-body .ph-tab{flex:0 0 auto;appearance:none;background:none;border:none;cursor:pointer;font-family:var(--sans,sans-serif);font-size:.86rem;font-weight:600;color:#8a7c63;padding:10px 13px 11px;border-bottom:2.5px solid transparent;white-space:nowrap;transition:color .14s,border-color .14s}
#person-body .ph-tab:hover{color:#5a4a30}
#person-body .ph-tab.active{color:var(--baobab-brown,#6b4423);border-bottom-color:var(--gold,#C9A24A)}
#person-body .ph-panels{margin-top:6px}
#person-body .ph-panel{display:none;animation:phPanelIn .32s ease both}
#person-body .ph-panel.active{display:block}
@keyframes phPanelIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
#person-body .ph-empty{text-align:center;padding:34px 18px;color:#8a7c63}
#person-body .ph-empty p{margin:0 0 14px;font-size:.95rem}
#person-body .ph-quote{font-family:var(--serif,serif);font-size:1.25rem;font-style:italic;color:var(--baobab-brown,#6b4423);line-height:1.5;margin:8px 0 18px;padding-left:14px;border-left:3px solid var(--gold,#C9A24A)}
#person-body .ph-prose{font-size:1rem;line-height:1.66;color:#3f372c;white-space:pre-wrap;margin-bottom:8px}
/* Timeline */
#person-body .ph-timeline{position:relative;margin:8px 0 4px;padding-left:8px}
#person-body .ph-tl-row{display:grid;grid-template-columns:54px 16px 1fr;align-items:start;gap:8px;padding:9px 0;position:relative}
#person-body .ph-tl-row::before{content:"";position:absolute;left:69px;top:0;bottom:0;width:2px;background:rgba(201,162,74,.28)}
#person-body .ph-tl-row:first-child::before{top:14px}
#person-body .ph-tl-row:last-child::before{bottom:auto;height:14px}
#person-body .ph-tl-year{font-family:var(--sans,sans-serif);font-size:.82rem;font-weight:700;color:#9a7a2e;text-align:right;padding-top:1px}
#person-body .ph-tl-dot{width:11px;height:11px;border-radius:50%;background:var(--gold,#C9A24A);border:2px solid var(--cream,#f7efe0);box-shadow:0 0 0 1px rgba(201,162,74,.5);margin-top:3px;z-index:1}
#person-body .ph-tl-body{display:flex;flex-direction:column;gap:1px;padding-bottom:2px}
#person-body .ph-tl-label{font-weight:600;color:#3f372c;font-size:.95rem}
#person-body .ph-tl-detail{font-size:.82rem;color:#8a7c63}
/* DNA placeholder */
#person-body .ph-dna{padding:6px 0}
#person-body .ph-dna-head{margin-bottom:14px}
#person-body .ph-dna-title{display:block;font-family:var(--serif,serif);font-size:1.2rem;font-weight:600;color:var(--baobab-brown,#6b4423)}
#person-body .ph-dna-sub{display:block;font-size:.9rem;color:#8a7c63;margin-top:3px}
#person-body .ph-dna-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
#person-body .ph-dna-card{border:1px solid rgba(107,68,35,.18);border-radius:12px;padding:18px 14px;text-align:center;font-weight:600;color:#6b4423;background:rgba(201,162,74,.06)}
#person-body .ph-soon{font-size:.85rem;color:#9a8a6e;font-style:italic}

/* ════════════════ LEGACY SCOUT ════════════════ */
#scout-body .scout-head{margin:6px 0 18px}
#scout-body .scout-title{font-family:var(--serif,serif);font-size:1.9rem;font-weight:600;color:var(--baobab-brown,#6b4423);margin:0 0 8px}
#scout-body .scout-lede{font-size:1.05rem;line-height:1.55;color:#3f372c;margin:0 0 6px}
#scout-body .scout-lede strong{color:var(--baobab-brown,#6b4423)}
#scout-body .scout-note{font-size:.88rem;font-style:italic;color:#8a7c63;margin:0}
#scout-body .scout-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
#scout-body .scout-chip{appearance:none;cursor:pointer;border:1px solid rgba(107,68,35,.22);background:#fff;border-radius:999px;padding:6px 13px;font-family:var(--sans,sans-serif);font-size:.84rem;font-weight:600;color:#6b5c44;display:inline-flex;align-items:center;gap:7px;transition:all .14s}
#scout-body .scout-chip:hover{border-color:var(--gold,#C9A24A)}
#scout-body .scout-chip.on{background:var(--baobab-brown,#6b4423);color:#f7efe0;border-color:var(--baobab-brown,#6b4423)}
#scout-body .scout-chip-n{font-size:.74rem;font-weight:700;background:rgba(201,162,74,.18);color:#9a7a2e;border-radius:20px;padding:0 7px;min-width:18px;text-align:center}
#scout-body .scout-chip.on .scout-chip-n{background:rgba(255,255,255,.22);color:#f7efe0}
#scout-body .scout-list{display:flex;flex-direction:column;gap:8px}
#scout-body .scout-row{display:flex;align-items:flex-start;gap:13px;background:#fff;border:1px solid rgba(107,68,35,.13);border-radius:14px;padding:14px 15px;box-shadow:0 2px 8px rgba(60,40,15,.05)}
#scout-body .scout-ic{flex:0 0 auto;width:34px;height:34px;border-radius:50%;margin-top:1px;background:rgba(201,162,74,.16) center/18px no-repeat;position:relative}
#scout-body .scout-ic::after{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:17px}
#scout-body .scout-ic-voice::after{content:"\1F399"}
#scout-body .scout-ic-story::after{content:"\1F4D6"}
#scout-body .scout-ic-photo::after{content:"\1F5BC"}
#scout-body .scout-ic-documents::after{content:"\1F4DC"}
#scout-body .scout-ic-recipe::after{content:"\1F372"}
#scout-body .scout-ic-dates::after{content:"\1F4C5"}
#scout-body .scout-ic-voice{background:rgba(193,75,60,.14)}
#scout-body .scout-row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#scout-body .scout-line{appearance:none;background:none;border:none;text-align:left;padding:0;cursor:pointer;font-family:var(--serif,serif);font-size:1.04rem;font-weight:600;color:var(--baobab-brown,#6b4423);line-height:1.3}
#scout-body .scout-line:hover{text-decoration:underline}
#scout-body .scout-why{font-size:.84rem;color:#8a7c63;line-height:1.4}
#scout-body .scout-act{flex:0 0 auto;align-self:center;appearance:none;cursor:pointer;border:1px solid var(--gold,#C9A24A);background:rgba(201,162,74,.1);color:#8a6a1e;border-radius:999px;padding:7px 14px;font-family:var(--sans,sans-serif);font-size:.82rem;font-weight:700;white-space:nowrap;transition:all .14s}
#scout-body .scout-act:hover{background:var(--gold,#C9A24A);color:#fff}
#scout-body .scout-more{text-align:center;color:#9a8a6e;font-size:.86rem;font-style:italic;margin:16px 0 4px}

/* ════════════════ MESSAGING ════════════════ */
#screen-messages .msg-wrap{display:flex;flex-direction:column;height:calc(100dvh - 20px);max-width:780px;margin:0 auto;padding:12px 14px 0}
#screen-messages .msg-top{display:flex;align-items:baseline;gap:12px;margin:8px 0 10px}
#screen-messages .msg-thread-title{font-family:var(--serif,serif);font-size:1.12rem;color:var(--baobab-brown,#6b4423);font-weight:600}
#screen-messages .msg-channels{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:10px;border-bottom:1px solid rgba(107,68,35,.16)}
#screen-messages .msg-channels::-webkit-scrollbar{display:none}
#screen-messages .msg-ch{flex:0 0 auto;appearance:none;cursor:pointer;border:1px solid rgba(107,68,35,.2);background:#fff;border-radius:999px;padding:7px 14px;font-family:var(--sans,sans-serif);font-size:.84rem;font-weight:600;color:#6b5c44;white-space:nowrap;transition:all .14s}
#screen-messages .msg-ch:hover{border-color:var(--gold,#C9A24A)}
#screen-messages .msg-ch.on{background:var(--baobab-brown,#6b4423);color:#f7efe0;border-color:var(--baobab-brown,#6b4423)}
#screen-messages .msg-stage{flex:1;min-height:0;position:relative;margin-top:10px}
#screen-messages .msg-list{height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:6px 2px 10px}
#screen-messages .msg-row{display:flex;align-items:flex-end;gap:8px;max-width:100%}
#screen-messages .msg-row.me{flex-direction:row-reverse}
#screen-messages .msg-av{flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;background:var(--gold2,#E6C878);color:#5a4a20;font-weight:700;font-family:var(--sans,sans-serif);font-size:.85rem;display:flex;align-items:center;justify-content:center}
#screen-messages .msg-bubble{max-width:74%;display:flex;flex-direction:column;gap:2px;padding:9px 13px;border-radius:16px;background:#fff;border:1px solid rgba(107,68,35,.12);box-shadow:0 1px 4px rgba(60,40,15,.05)}
#screen-messages .msg-row.me .msg-bubble{background:linear-gradient(135deg,#fbeec9,#f4dca0);border-color:rgba(201,162,74,.4)}
#screen-messages .msg-row.bc .msg-bubble{max-width:100%;width:100%;background:rgba(201,162,74,.08);border-color:rgba(201,162,74,.3)}
#screen-messages .msg-from{font-size:.74rem;font-weight:700;color:#9a7a2e}
#screen-messages .msg-text{font-size:.96rem;line-height:1.45;color:#2f2a22;white-space:pre-wrap;word-break:break-word}
#screen-messages .msg-when{font-size:.68rem;color:#a89878;align-self:flex-end}
#screen-messages .msg-row.me .msg-when{color:#9a7a2e}
#screen-messages .msg-empty,#screen-messages .msg-loading,#screen-messages .msg-error{text-align:center;color:#8a7c63;padding:40px 16px;font-size:.95rem}
#screen-messages .msg-error{color:#a8553f}
#screen-messages .msg-directory{position:absolute;inset:0;overflow-y:auto;padding:6px 2px}
#screen-messages .msg-dir-h{font-family:var(--serif,serif);font-size:1.05rem;font-weight:600;color:var(--baobab-brown,#6b4423);margin:4px 0 12px}
#screen-messages .msg-dir-row{display:flex;align-items:center;gap:12px;width:100%;background:#fff;border:1px solid rgba(107,68,35,.13);border-radius:12px;padding:11px 14px;margin-bottom:8px;cursor:pointer;text-align:left;transition:border-color .14s}
#screen-messages .msg-dir-row:hover{border-color:var(--gold,#C9A24A)}
#screen-messages .msg-dir-name{font-weight:600;color:#3f372c}
#screen-messages .msg-readonly{text-align:center;color:#8a7c63;font-size:.85rem;font-style:italic;padding:10px 8px}
#screen-messages .msg-composer{display:flex;align-items:flex-end;gap:9px;padding:10px 0 14px;border-top:1px solid rgba(107,68,35,.14)}
#screen-messages .msg-composer textarea{flex:1;resize:none;border:1px solid rgba(107,68,35,.22);border-radius:18px;padding:10px 14px;font-family:var(--sans,sans-serif);font-size:.96rem;line-height:1.4;color:#2f2a22;background:#fff;max-height:120px;outline:none}
#screen-messages .msg-composer textarea:focus{border-color:var(--gold,#C9A24A)}
#screen-messages .msg-send{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;background:var(--gold,#C9A24A);color:#fff;display:flex;align-items:center;justify-content:center;transition:background .14s,transform .14s}
#screen-messages .msg-send:hover{background:#b88f33;transform:scale(1.05)}
#screen-messages .msg-send svg{width:19px;height:19px}

/* ════════════════ GLOBAL HEADER (Layer 1) ════════════════ */
.app-header{position:fixed;top:0;left:0;right:0;z-index:201;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px max(14px,env(safe-area-inset-right,0px)) 8px max(14px,env(safe-area-inset-left,0px));padding-top:calc(8px + env(safe-area-inset-top,0px));background:linear-gradient(180deg,rgba(36,23,11,.96),rgba(28,18,9,.95));-webkit-backdrop-filter:blur(12px) saturate(1.05);backdrop-filter:blur(12px) saturate(1.05);border-bottom:1px solid rgba(201,162,74,.28)}
body.has-appheader{padding-top:54px}
.ah-brand{display:inline-flex;align-items:center;gap:9px;background:none;border:none;cursor:pointer;color:#f0d9a4;font-family:var(--serif,serif);font-weight:600;font-size:1.06rem;padding:4px 6px 4px 2px;border-radius:10px;letter-spacing:.01em}
.ah-brand:hover{color:#fbe9bf}
.ah-brand-mark{width:22px;height:22px;color:var(--gold,#C9A24A);flex:0 0 auto}
.ah-brand-word{white-space:nowrap}
.ah-actions{display:flex;align-items:center;gap:2px}
.ah-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:none;border:none;cursor:pointer;color:rgba(228,198,140,.82);transition:color .14s,background .14s}
.ah-btn:hover{color:#f3d999;background:rgba(201,162,74,.12)}
.ah-btn svg{width:21px;height:21px}
.ah-badge{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:#c0492f;color:#fff;font-family:var(--sans,sans-serif);font-size:.62rem;font-weight:800;line-height:16px;text-align:center;box-shadow:0 0 0 2px rgba(28,18,9,.95)}
/* Notifications dropdown */
.notif-panel{position:fixed;top:56px;right:max(10px,env(safe-area-inset-right,0px));z-index:202;width:min(340px,94vw);background:#fff;border:1px solid rgba(107,68,35,.18);border-radius:16px;box-shadow:0 24px 60px -18px rgba(20,12,4,.5);overflow:hidden}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid rgba(107,68,35,.12);font-family:var(--serif,serif);font-weight:600;color:var(--baobab-brown,#6b4423)}
.notif-close{background:none;border:none;font-size:1.3rem;line-height:1;color:#9a8a6e;cursor:pointer;padding:0 4px}
.notif-body{max-height:50vh;overflow-y:auto}
.notif-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid rgba(107,68,35,.08);padding:12px 16px;cursor:pointer;transition:background .12s}
.notif-row:hover{background:rgba(201,162,74,.07)}
.notif-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--gold,#C9A24A)}
.notif-dot-voice{background:#c14b3c}
.notif-line{font-size:.9rem;color:#3f372c;line-height:1.35}
.notif-empty{padding:26px 18px;text-align:center;color:#8a7c63;font-size:.9rem}
.notif-all{display:block;width:100%;text-align:center;background:rgba(201,162,74,.1);border:none;border-top:1px solid rgba(107,68,35,.12);color:#8a6a1e;font-family:var(--sans,sans-serif);font-weight:700;font-size:.86rem;padding:12px;cursor:pointer}
.notif-all:hover{background:rgba(201,162,74,.18)}
/* Offsets so the fixed header doesn't cover earlier sticky/full-height layouts */
body.has-appheader #person-body .ph-tabs{top:54px}
body.has-appheader #screen-messages .msg-wrap{height:calc(100dvh - 150px)}

/* ════════════════ CONTEXT SIDEBAR (Layer 3) ════════════════ */
.ws-shell{display:flex;gap:20px;align-items:flex-start;max-width:1180px;margin:0 auto;padding:0 4px}
.ws-body{flex:1;min-width:0}
.ctx-sb{flex:0 0 208px;position:sticky;top:64px;align-self:flex-start;background:#fff;border:1px solid rgba(107,68,35,.14);border-radius:16px;padding:12px 10px;box-shadow:0 4px 16px rgba(60,40,15,.05)}
.ctx-h{font-family:var(--serif,serif);font-size:1.02rem;font-weight:600;color:var(--baobab-brown,#6b4423);padding:4px 10px 10px;border-bottom:1px solid rgba(107,68,35,.1);margin-bottom:6px}
.ctx-tool{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;border-radius:10px;padding:9px 10px;cursor:pointer;font-family:var(--sans,sans-serif);font-size:.9rem;font-weight:600;color:#5a4d39;transition:background .12s,color .12s}
.ctx-tool:hover{background:rgba(201,162,74,.1);color:var(--baobab-brown,#6b4423)}
.ctx-tool.on{background:rgba(201,162,74,.16);color:var(--baobab-brown,#6b4423)}
.ctx-tool-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.ctx-ic{font-size:1rem;width:20px;text-align:center;flex:0 0 auto}
.ctx-tool.ctx-soon{cursor:default;color:#a89a82;justify-content:space-between}
.ctx-tool.ctx-soon:hover{background:none}
.ctx-soon-tag{font-size:.62rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#b09a6a;background:rgba(201,162,74,.14);border-radius:20px;padding:2px 7px;flex:0 0 auto}
@media(max-width:840px){
  .ws-shell{flex-direction:column;gap:12px}
  .ctx-sb{position:static;width:100%;flex:none;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:8px;border-radius:14px}
  .ctx-sb::-webkit-scrollbar{display:none}
  .ctx-h{display:none}
  .ctx-tool{flex:0 0 auto;white-space:nowrap;border:1px solid rgba(107,68,35,.16);padding:7px 12px}
  .ctx-tool .ctx-tool-main{flex:0 0 auto}
  .ctx-soon-tag{display:none}
  .ctx-tool.ctx-soon{opacity:.6}
}

/* ════════════════ PRIMARY NAV — header center nav + mega menus (Layer 2) ════════════════ */
/* Desktop: persistent primary nav in the header center; each item (except Home) opens a
   rich mega menu that teaches what the room holds. Mobile: header nav collapses and the
   bottom bar takes over. */
.app-header{gap:14px}
.ah-left{flex:0 0 auto}
.ah-nav{display:none;flex:1 1 auto;justify-content:center;align-items:center;gap:2px;min-width:0}
.ah-navitem{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;color:rgba(232,205,150,.86);font-family:var(--sans,sans-serif);font-weight:600;font-size:.96rem;padding:9px 15px;border-radius:10px;white-space:nowrap;transition:color .14s,background .14s}
.ah-navitem:hover{color:#f6e3b3;background:rgba(201,162,74,.12)}
.ah-navitem.active{color:var(--gold,#C9A24A)}
.ah-navitem.mega-active{color:#f6e3b3;background:rgba(201,162,74,.16)}
.ah-caret{width:11px;height:8px;opacity:.7;transition:transform .16s}
.ah-navitem.mega-active .ah-caret{transform:rotate(180deg)}
/* Mega menu panel */
.mega-backdrop{position:fixed;inset:54px 0 0;z-index:198;background:rgba(20,12,4,.32);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.mega-menu{position:fixed;top:60px;left:50%;transform:translateX(-50%) translateY(-8px);z-index:199;width:min(1080px,94vw);background:var(--cream,#f7efe0);border:1px solid rgba(201,162,74,.4);border-radius:20px;box-shadow:0 32px 80px -20px rgba(20,12,4,.62);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;max-height:calc(100vh - 80px);overflow-y:auto}
.mega-menu.open{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.mega-inner{padding:24px 26px}
.mega-inner.has-aside{display:grid;grid-template-columns:1fr 256px;gap:24px}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 18px}
.mega-item{display:flex;align-items:flex-start;gap:13px;text-align:left;background:none;border:none;border-radius:12px;padding:13px 14px;cursor:pointer;transition:background .12s}
.mega-item:hover{background:rgba(201,162,74,.1)}
.mega-ic{flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:rgba(201,162,74,.14);display:flex;align-items:center;justify-content:center;font-size:19px;margin-top:1px}
.mega-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.mega-label{font-family:var(--serif,serif);font-weight:600;font-size:1.04rem;color:var(--baobab-brown,#6b4423);display:flex;align-items:center;gap:8px;line-height:1.2}
.mega-desc{font-size:.84rem;color:#7a6c53;line-height:1.35}
.mega-item.mega-soon{cursor:default}
.mega-item.mega-soon:hover{background:none}
.mega-item.mega-soon .mega-ic{opacity:.6}
.mega-item.mega-soon .mega-label{color:#9a8a6e}
.mega-soon-tag{font-size:.6rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#b09a6a;background:rgba(201,162,74,.16);border-radius:20px;padding:2px 7px}
.mega-aside{border-left:1px solid rgba(107,68,35,.14);padding-left:22px;display:flex;flex-direction:column}
.mega-aside-h{font-family:var(--serif,serif);font-weight:600;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#9a7a2e;margin-bottom:8px}
.mega-aside-note{font-size:.86rem;color:#7a6c53;line-height:1.45;margin:0 0 14px}
.mega-aside-cta{margin-top:auto;text-align:left;background:none;border:none;cursor:pointer;color:#8a6a1e;font-weight:700;font-size:.9rem;padding:0}
.mega-aside-cta:hover{color:var(--gold,#C9A24A)}
/* Viewport switch: desktop = header nav, mobile = bottom bar */
@media(min-width:1024px){
  .ah-nav{display:flex}
  #app-nav{display:none !important}
  body.has-appnav{padding-bottom:0}
  #screen-room>.topbar{display:none}
}
@media(max-width:1023px){
  .mega-menu,.mega-backdrop{display:none !important}
}

/* ════════════════ UNIFIED HEADER — branding + merged account controls ════════════════ */
.app-header{gap:12px;min-height:54px;box-sizing:border-box}
.ah-brand{gap:11px;padding:2px 4px}
.ah-brand-logo{height:38px;width:auto;display:block;flex:0 0 auto}
.ah-brand-word{display:flex;flex-direction:column;line-height:1.04;text-align:left}
.ah-bw-eco{font-family:var(--sans,sans-serif);font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold,#C9A24A)}
.ah-bw-eco sup{font-size:.6em}
.ah-bw-app{font-family:var(--serif,serif);font-size:1.18rem;font-weight:600;color:#f0d9a4}
.ah-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.ah-pill{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid rgba(201,162,74,.32);color:rgba(234,208,150,.92);border-radius:999px;padding:6px 13px;font-family:var(--sans,sans-serif);font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .14s,color .14s,border-color .14s}
.ah-pill:hover{background:rgba(201,162,74,.12);color:#f6e3b3;border-color:rgba(201,162,74,.5)}
.ah-pill svg{width:14px;height:14px;flex:0 0 auto}
.ah-legacy{border-color:rgba(201,162,74,.5);color:var(--gold2,#E6C878)}
.ah-legacy:hover{background:rgba(201,162,74,.18)}
.ah-plus{color:var(--gold,#C9A24A);font-weight:800}
.ah-sep{width:1px;height:26px;background:rgba(201,162,74,.22);margin:0 3px;flex:0 0 auto}
.ah-profile{display:inline-flex;align-items:center;gap:9px;background:none;border:none;cursor:pointer;padding:4px 8px 4px 4px;border-radius:999px;margin-left:2px;transition:background .14s}
.ah-profile:hover{background:rgba(201,162,74,.1)}
.ah-profile-photo{position:relative;width:34px;height:34px;border-radius:50%;flex:0 0 auto;background:rgba(201,162,74,.2);border:1.5px solid rgba(201,162,74,.5);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ah-profile-photo img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.ah-profile-photo img[hidden]{display:none}
.ah-profile-initial{font-family:var(--serif,serif);font-weight:700;font-size:.95rem;color:#f0d9a4}
.ah-profile-text{display:flex;flex-direction:column;line-height:1.12;text-align:left;min-width:0}
.ah-profile-name{font-family:var(--sans,sans-serif);font-weight:700;font-size:.9rem;color:#f0d9a4;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.ah-profile-role{font-size:.66rem;color:rgba(228,198,140,.72);white-space:nowrap}
.ah-profile-caret{width:12px;height:12px;color:rgba(228,198,140,.72);flex:0 0 auto}
@media(max-width:1023px){
  .ah-pill,.ah-sep,.ah-profile-text,.ah-profile-caret{display:none}
  .ah-bw-eco{display:none}
  .ah-bw-app{font-size:1.05rem}
  .ah-brand-logo{height:32px}
}
@media(max-width:430px){ .ah-brand-word{display:none} }

/* Single header everywhere: the brand lives only in the global #app-header. Secondary
   screens keep their in-page "Back to the room" breadcrumb but drop the duplicate logo,
   so no screen ever stacks a second branded header under the unified one. */
.topbar .brand{display:none}
.topbar{min-height:0}

/* Brand tagline — subtle italic line under "Legacy Room" */
.ah-bw-tag{font-family:var(--sans,sans-serif);font-size:.575rem;font-style:italic;letter-spacing:.02em;color:rgba(228,198,140,.62);margin-top:1px;white-space:nowrap}
@media(max-width:1023px){ .ah-bw-tag{display:none} }

/* ════════════════ TODAY'S LEGACY DASHBOARD (Home) ════════════════
   Breaks out of the 820px hero column to a full-width command center.
   Warm-dark walnut cards sit on the cream estate background. */
.hm-dash{position:relative;left:50%;transform:translateX(-50%);width:min(1240px,94vw);margin-top:14px;margin-bottom:28px}
.hm-dash-head{margin:0 0 18px;text-align:left}
.hm-dash-title{font-family:var(--serif,serif);font-weight:600;font-size:clamp(1.45rem,2.6vw,2rem);color:#2c1a0e;margin:6px 0 0}
.hm-dash-grid{display:grid;grid-template-columns:0.92fr 1.28fr 1.22fr 1.02fr;gap:18px;align-items:stretch}
.hm-card{background:linear-gradient(158deg,rgba(44,26,14,.95),rgba(26,16,9,.97));border:1px solid rgba(201,162,74,.3);border-radius:18px;padding:20px;display:flex;flex-direction:column;box-shadow:0 12px 34px rgba(20,12,5,.34)}
.hm-card-head{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.hm-card-head h3{font-family:var(--serif,serif);font-weight:600;font-size:1.18rem;color:#f0e3c4;margin:0;flex:1}
.hm-card-ic{width:30px;height:30px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--gold2,#E6C878)}
.hm-card-ic svg{width:22px;height:22px}
.hm-card-all{background:none;border:none;color:var(--gold,#C9A24A);font-family:var(--sans,sans-serif);font-size:.78rem;font-weight:700;cursor:pointer;padding:2px 4px;white-space:nowrap}
.hm-card-all:hover{color:var(--gold2,#E6C878);text-decoration:underline}
/* Scout */
.hm-scout-body{flex:1}
.hm-scout-line{color:#e8dcc0;font-size:.95rem;line-height:1.5;margin:0 0 10px}
.hm-scout-line strong{color:#f6e3b3;font-weight:700}
.hm-scout-sub{color:rgba(232,220,192,.7);font-size:.85rem;margin:0}
.hm-scout-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.hm-scout-tag{font-size:.74rem;font-weight:600;color:var(--gold2,#E6C878);background:rgba(201,162,74,.12);border:1px solid rgba(201,162,74,.3);border-radius:999px;padding:3px 10px}
.hm-scout-btn{margin-top:16px;align-self:flex-start;background:none;border:1px solid rgba(201,162,74,.55);color:var(--gold2,#E6C878);font-family:var(--sans,sans-serif);font-weight:700;font-size:.85rem;border-radius:999px;padding:9px 18px;cursor:pointer;transition:background .14s}
.hm-scout-btn:hover{background:rgba(201,162,74,.16)}
/* Recent Activity */
.hm-activity-body{display:flex;flex-direction:column;gap:0}
.hm-act-row{display:flex;align-items:flex-start;gap:11px;padding:9px 0;border-bottom:1px solid rgba(201,162,74,.1)}
.hm-act-row:last-child{border-bottom:none}
.hm-act-ic{width:32px;height:32px;flex:0 0 auto;border-radius:8px;background:rgba(201,162,74,.12);display:flex;align-items:center;justify-content:center;color:var(--gold2,#E6C878)}
.hm-act-ic svg{width:18px;height:18px}
.hm-act-text{font-size:.88rem;color:#ddd0b6;line-height:1.4}
.hm-act-who{font-weight:700;color:#f0e3c4}
.hm-act-when{display:block;font-size:.74rem;color:rgba(232,220,192,.55);margin-top:1px}
/* Announcements */
.hm-announce-body{display:flex;flex-direction:column;gap:12px}
.hm-ann-row{border-left:2px solid rgba(201,162,74,.45);padding:1px 0 1px 12px}
.hm-ann-body{font-size:.9rem;color:#e8dcc0;line-height:1.4;font-weight:600}
.hm-ann-meta{font-size:.74rem;color:rgba(232,220,192,.6);margin-top:3px}
/* Quick Actions */
.hm-qa-list{display:flex;flex-direction:column;gap:0}
.hm-qa{display:flex;align-items:center;gap:11px;width:100%;background:none;border:none;border-bottom:1px solid rgba(201,162,74,.1);padding:11px 2px;cursor:pointer;text-align:left;color:#e8dcc0;font-family:var(--sans,sans-serif);font-size:.9rem;font-weight:600;transition:color .12s}
.hm-qa:last-child{border-bottom:none}
.hm-qa:hover{color:#f6e3b3}
.hm-qa-ic{width:30px;height:30px;flex:0 0 auto;border-radius:8px;background:rgba(201,162,74,.12);display:flex;align-items:center;justify-content:center;color:var(--gold2,#E6C878)}
.hm-qa-ic svg{width:17px;height:17px}
.hm-qa-label{flex:1}
.hm-qa-arrow{color:rgba(201,162,74,.6);font-size:1.2rem;font-weight:700}
.hm-empty-row{color:rgba(232,220,192,.6);font-size:.85rem;line-height:1.5;margin:6px 0}
/* Responsive 4 → 2 → 1 */
@media(max-width:1100px){ .hm-dash-grid{grid-template-columns:1fr 1fr} }
@media(max-width:640px){ .hm-dash{width:92vw}.hm-dash-grid{grid-template-columns:1fr} }

/* ════════════════ SECTION 1 · WELCOME HOME (compact hero) ════════════════
   The welcome band, lifted off the tall artwork. Self-contained cream (Constitution)
   and dark (Origins) cards read well on the cream page; base h1/lede are already dark.
   Matches the dashboard width and keeps the hero short so the dashboard sits high. */
.hm-welcome{position:relative;left:50%;transform:translateX(-50%);width:min(1240px,94vw);margin:clamp(16px,2.4vw,28px) 0 8px}
.hm-welcome-grid{display:grid;grid-template-columns:0.96fr 1.18fr 0.96fr;gap:clamp(16px,2.4vw,34px);align-items:start}
.hm-welcome .hm-hero-left{display:flex;flex-direction:column;gap:12px;padding-top:6px}
.hm-welcome .hm-h1{font-size:clamp(2.2rem,3.6vw,3.4rem);line-height:.96;margin:4px 0 2px}
.hm-welcome .hm-lede{max-width:24em;font-size:1rem}
.hm-welcome .hm-const-hero{margin-top:0}
.hm-welcome .hm-ancestral{margin:0}
@media(max-width:980px){
  .hm-welcome-grid{grid-template-columns:1fr;gap:18px}
  .hm-welcome .hm-lede{max-width:36em}
}

/* People directory lens banner (Living Family / Ancestors / Descendants views) */
.people-lens{display:flex;align-items:center;gap:12px;margin:6px 0 14px;padding:10px 14px;background:var(--cream,#f7efe0);border:1px solid var(--line-soft,rgba(201,162,74,.3));border-radius:12px}
.people-lens-name{font-family:var(--serif,serif);font-size:1.15rem;font-weight:600;color:var(--ink,#141414)}
.people-lens-count{font-size:.78rem;font-weight:700;color:var(--gold-deep,#a8842f);background:rgba(201,162,74,.16);border-radius:999px;padding:2px 10px}
.people-lens-clear{margin-left:auto;background:none;border:none;color:var(--gold-deep,#a8842f);font-weight:700;font-size:.82rem;cursor:pointer}
.people-lens-clear:hover{text-decoration:underline}

/* Grouped mega menu (Archives → "Archive" + nested "Records" sections) */
.mega-inner.has-groups{display:block}
.mega-section + .mega-section{margin-top:16px;padding-top:15px;border-top:1px solid rgba(201,162,74,.2)}
.mega-section-h{font-family:var(--sans,sans-serif);font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-deep,#a8842f);margin:0 0 10px}
.mega-menu{max-height:calc(100vh - 64px);overflow-y:auto}

/* Records category lens banner inside the Family Trunk */
.doc-lens{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:10px 14px;background:var(--cream,#f7efe0);border:1px solid var(--line-soft,rgba(201,162,74,.3));border-radius:12px}
.doc-lens-name{font-family:var(--serif,serif);font-size:1.15rem;font-weight:600;color:var(--ink,#141414)}
.doc-lens-count{font-size:.78rem;font-weight:700;color:var(--gold-deep,#a8842f);background:rgba(201,162,74,.16);border-radius:999px;padding:2px 10px}
.doc-lens-clear{margin-left:auto;background:none;border:none;color:var(--gold-deep,#a8842f);font-weight:700;font-size:.82rem;cursor:pointer}
.doc-lens-clear:hover{text-decoration:underline}

/* ════════ ORGANIZATIONS — first-class community entities ════════ */
.orgs-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:0 0 26px}
.orgs-h1{font-family:var(--serif,serif);font-size:clamp(2rem,4vw,2.8rem);color:var(--ink,#141414);margin:.1em 0 .2em;line-height:1.05}
.orgs-lede{max-width:640px;color:var(--ink-soft,#4a4036);font-size:1rem;line-height:1.55;margin:0}
.orgs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:16px}
.org-card{display:flex;align-items:center;gap:14px;text-align:left;background:var(--ink-walnut,#2c1a0e);color:#f7efe0;border:1px solid rgba(201,162,74,.28);border-radius:16px;padding:14px 16px;cursor:pointer;transition:transform .15s ease,border-color .15s ease}
.org-card:hover{transform:translateY(-2px);border-color:var(--gold,#C9A24A)}
.org-card-photo{flex:0 0 56px;width:56px;height:56px;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:rgba(201,162,74,.16)}
.org-card-photo img{width:100%;height:100%;object-fit:cover}
.org-card-emblem{font-size:1.7rem;line-height:1}
.org-card-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.org-card-name{font-family:var(--serif,serif);font-size:1.2rem;font-weight:600;line-height:1.15}
.org-card-type{font-family:var(--sans,sans-serif);font-size:.78rem;color:var(--gold2,#E6C878);opacity:.92}

/* org form */
.org-form{max-width:560px}
.org-field{display:flex;flex-direction:column;gap:6px;margin:0 0 16px}
.org-field>span{font-family:var(--sans,sans-serif);font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep,#a8842f)}
.org-field input,.org-field select,.org-field textarea{font-family:var(--sans,sans-serif);font-size:1rem;color:var(--ink,#141414);background:#fff;border:1px solid rgba(20,20,20,.18);border-radius:10px;padding:11px 13px;width:100%}
.org-field textarea{resize:vertical;line-height:1.5}
.org-field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.org-form-actions{display:flex;gap:10px;margin-top:8px}

/* org hub (profile) */
.oh-hero{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:14px 0 18px;padding:0 0 22px;border-bottom:1px solid rgba(201,162,74,.22)}
.oh-hero-photo{flex:0 0 96px;width:96px;height:96px;border-radius:18px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--ink-walnut,#2c1a0e)}
.oh-hero-photo img{width:100%;height:100%;object-fit:cover}
.org-hub-emblem{font-size:2.8rem;line-height:1}
.oh-hero-text{flex:1 1 240px;min-width:0}
.oh-name{font-family:var(--serif,serif);font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--ink,#141414);margin:.06em 0 .14em;line-height:1.05}
.oh-meta{font-family:var(--sans,sans-serif);color:var(--ink-soft,#4a4036);font-size:.92rem;margin:0}
.oh-actions{display:flex;gap:8px;flex-wrap:wrap}
.btn.sm{padding:7px 14px;font-size:.85rem}
.oh-tabs{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 20px;border-bottom:1px solid rgba(201,162,74,.2)}
.oh-tab{font-family:var(--sans,sans-serif);font-size:.9rem;font-weight:600;color:var(--ink-soft,#6a5d4d);background:none;border:none;border-bottom:2px solid transparent;padding:9px 13px;cursor:pointer;margin-bottom:-1px}
.oh-tab:hover{color:var(--ink,#141414)}
.oh-tab.on{color:var(--gold-deep,#a8842f);border-bottom-color:var(--gold,#C9A24A)}
.oh-panel{min-height:120px}
.oh-prose{font-family:var(--serif,serif);font-size:1.12rem;line-height:1.7;color:var(--ink,#141414);max-width:680px;white-space:normal}
.oh-empty{color:var(--ink-soft,#6a5d4d);font-style:italic;max-width:560px;line-height:1.55}
.oh-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.oh-person{display:flex;align-items:center;gap:10px;text-align:left;background:#fff;border:1px solid rgba(201,162,74,.28);border-radius:12px;padding:9px 11px;cursor:pointer;transition:border-color .15s ease}
.oh-person:hover{border-color:var(--gold,#C9A24A)}
.oh-person-photo{flex:0 0 40px;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--ink-walnut,#2c1a0e);color:#E6C878;font-family:var(--serif,serif);font-size:1.1rem}
.oh-person-photo img{width:100%;height:100%;object-fit:cover}
.oh-person-name{font-family:var(--sans,sans-serif);font-size:.9rem;font-weight:600;color:var(--ink,#141414);line-height:1.2}
.oh-timeline{display:flex;flex-direction:column;gap:2px;max-width:640px}
.oh-tl-row{display:flex;gap:16px;padding:11px 4px;border-bottom:1px solid rgba(201,162,74,.16)}
.oh-tl-date{flex:0 0 92px;font-family:var(--sans,sans-serif);font-weight:700;color:var(--gold-deep,#a8842f);font-size:.9rem}
.oh-tl-title{font-family:var(--serif,serif);font-size:1.08rem;color:var(--ink,#141414)}
@media(max-width:560px){.org-field-row{grid-template-columns:1fr}.oh-hero-photo{flex-basis:72px;width:72px;height:72px}}




/* ════════════════════════════════════════════════════════════════════
   HOME · ESTATE — welcome AND dashboard on one estate scene (2026-06-27)
   The estate artwork sits behind BOTH the welcome band and Today's Legacy
   Dashboard, so the dashboard is up with the welcome (Image 5), then the doors.
   ──────────────────────────────────────────────────────────────────── */
.hm-estate{
  position:relative;left:50%;margin-left:-50vw;width:100vw;
  padding:clamp(26px,3.4vw,56px) clamp(20px,5vw,72px) clamp(34px,4vw,72px);
  background:
    linear-gradient(180deg, rgba(16,10,5,.30) 0%, rgba(14,9,4,.52) 50%, rgba(11,7,3,.88) 100%),
    url('/legacy-house-gate.png');
  background-repeat:no-repeat, no-repeat;
  background-position:center top, center top;
  background-size:cover, 100% auto;
  background-attachment:scroll, scroll;
  background-color:#0f0a05;
}
/* welcome band — reset the stale 2-col grid so the 3-col grid spans full width
   (this is what was clipping the Ancestral card before) */
.hm-estate .hm-welcome{display:block;left:auto;transform:none;width:100%;max-width:1240px;margin:0 auto clamp(20px,2.6vw,36px);padding:0}
.hm-estate .hm-welcome-grid{width:100%}
.hm-estate .hm-welcome .hm-hero-left .eyebrow.gold{color:var(--gold2,#E6C878)}
.hm-estate .hm-welcome .hm-h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.5)}
.hm-estate .hm-welcome .hm-lede{color:#efe6d6;text-shadow:0 1px 14px rgba(0,0,0,.55)}
/* dashboard — up with the welcome, on the same estate (cards are already dark) */
.hm-estate .hm-dash{left:auto;transform:none;width:100%;max-width:1240px;margin:0 auto}
.hm-estate .hm-dash-head .eyebrow.gold{color:var(--gold2,#E6C878)}
.hm-estate .hm-dash-title{color:#f3e9d8;text-shadow:0 1px 12px rgba(0,0,0,.45)}
@media(max-width:860px){
  .hm-estate{background-attachment:scroll, scroll;padding-left:clamp(14px,4vw,22px);padding-right:clamp(14px,4vw,22px)}
}