/* =========================================================================
   The Family Website — styles.css
   Timeless / legacy / royal. Roman architecture in a modern key:
   quartz & stone, White · Navy · Gold. Responsive, mobile-first drawer nav.
   Re-skin the whole site from the variables in :root.
   ========================================================================= */

:root {
  color-scheme: light;

  /* Stone / quartz whites */
  --bg: #f4f1ea;          /* warm quartz */
  --bg-elev: #fbfaf5;     /* polished stone / near-white */
  --bg-white: #ffffff;
  --bg-sunk: #ebe6da;
  --stone-veined: #efeada;

  /* Navy ink */
  --ink: #17203a;
  --ink-soft: #454d68;
  --ink-faint: #8b8f9e;

  /* Lines */
  --line: #e4dfd0;
  --line-strong: #cdc6b2;

  /* Royal navy */
  --navy: #1c2c52;
  --navy-deep: #131f3c;
  --navy-tint: #e7eaf2;

  /* Gold */
  --gold: #b28a3c;
  --gold-bright: #c9a24a;
  --gold-soft: #f3ecd8;
  --gold-line: #d8c48f;

  /* Semantic */
  --accent: var(--navy);
  --accent-deep: var(--navy-deep);
  --accent-soft: var(--navy-tint);
  --danger: #9d3b2c;

  --shadow-sm: 0 1px 2px rgba(23,32,58,.06), 0 1px 3px rgba(23,32,58,.07);
  --shadow-md: 0 6px 20px rgba(23,32,58,.10);
  --shadow-lg: 0 24px 60px rgba(19,31,60,.24);

  /* Display serif (Roman/engraved feel) with a robust offline fallback */
  --serif: "Cormorant Garamond", "EB Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius: 12px;
  --radius-sm: 8px;
  --maxw: 1180px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 .4em; letter-spacing: .3px; }
h1 { font-weight: 700; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--gold); }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.hidden { display: none !important; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.muted { color: var(--ink-faint); }
.eyebrow { text-transform: uppercase; letter-spacing: .28em; font-size: .7rem; font-weight: 700; color: var(--gold); }
hr.rule-gold { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line), transparent); margin: 26px 0; }

/* Engraved gold rule ornament */
.ornament { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--gold); }
.ornament::before, .ornament::after { content: ""; height: 1px; width: 46px; background: var(--gold-line); }
.ornament .diamond { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }

/* ---- Crest / monogram ------------------------------------------------- */
.crest {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: var(--gold-bright); font-family: var(--serif); font-weight: 700;
  font-size: 1.2rem; box-shadow: inset 0 0 0 2px var(--navy), inset 0 0 0 3px var(--gold);
  letter-spacing: 0; flex: none;
}

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--ink);
  padding: .62em 1.2em; border-radius: 4px; font-size: .9rem; font-weight: 600;
  letter-spacing: .02em; transition: transform .06s ease, box-shadow .15s, background .15s, color .15s, border-color .15s;
}
.btn:hover { text-decoration: none; box-shadow: var(--shadow-sm); border-color: var(--gold-line); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-deep); color: #fff; }
.btn-gold { background: var(--gold); border-color: var(--gold); color: #23324f; }
.btn-gold:hover { background: var(--gold-bright); color: #23324f; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-outline { background: transparent; border-color: var(--gold); color: var(--navy); }
.btn-sm { padding: .38em .85em; font-size: .82rem; }
.icon-btn { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }

/* =========================================================================
   PUBLIC LANDING (index.html before unlock) — a monument entrance
   ========================================================================= */
.public {
  min-height: 100dvh; display: flex; flex-direction: column; position: relative;
  background:
    radial-gradient(1100px 520px at 50% -8%, #fff, transparent 60%),
    radial-gradient(900px 500px at 90% 110%, var(--gold-soft), transparent 55%),
    var(--bg);
}
.public::before { /* faint fluted-column texture, like carved stone */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(90deg, rgba(23,32,58,.025) 0 2px, transparent 2px 26px);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.public-header { padding: 22px 0; position: relative; z-index: 2; }
.public-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; letter-spacing: .02em; }
.hero { flex: 1; display: grid; place-items: center; text-align: center; padding: 30px 0 70px; position: relative; z-index: 2; }
.hero .inner { max-width: 760px; }
.hero h1 { font-size: clamp(2.6rem, 7vw, 5rem); margin-bottom: .12em; letter-spacing: .01em; }
.hero .lede { font-size: clamp(1.05rem, 2.3vw, 1.3rem); color: var(--ink-soft); margin: 1.4em auto; max-width: 54ch; line-height: 1.8; }
.hero .surnames { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin: 26px 0 8px; font-family: var(--serif); font-size: 1.15rem; color: var(--navy); }
.hero .surnames span { position: relative; padding: 0 4px; letter-spacing: .12em; }
.hero .surnames span + span::before { content: "·"; position: absolute; left: -14px; color: var(--gold); }
.hero .cta-row { margin-top: 30px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.public-footer { padding: 26px 0; color: var(--ink-faint); font-size: .82rem; text-align: center; position: relative; z-index: 2; }

/* Unlock gate modal */
.gate-backdrop { position: fixed; inset: 0; background: rgba(19,31,60,.55); backdrop-filter: blur(5px);
  display: grid; place-items: center; padding: 20px; z-index: 100; }
.gate-card { width: 100%; max-width: 410px; background: var(--bg-elev); border: 1px solid var(--line);
  border-top: 3px solid var(--gold); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 34px; text-align: center; }
.gate-card .crest { width: 58px; height: 58px; font-size: 1.5rem; margin: 0 auto 16px; }
.gate-card h2 { font-size: 1.6rem; margin-bottom: .1em; }
.gate-card p { color: var(--ink-soft); font-size: .92rem; margin-top: 0; }
.gate-form { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.gate-form input { padding: .82em 1em; border-radius: 4px; border: 1px solid var(--line-strong); background: var(--bg-white); color: var(--ink); font-size: 1rem; }
.gate-form input:focus { border-color: var(--gold); outline: none; }
.gate-error { color: var(--danger); font-size: .88rem; min-height: 1.2em; }

/* =========================================================================
   INTERNAL APP (after unlock)
   ========================================================================= */
.app { display: none; }
.app.active { display: block; }

.topbar { position: sticky; top: 0; z-index: 50; background: var(--navy); color: #eef1f7;
  border-bottom: 2px solid var(--gold); }
.topbar .wrap { display: flex; align-items: center; gap: 14px; height: 64px; }
.topbar .brand { font-size: 1.15rem; color: #fff; }
.topbar .crest { width: 36px; height: 36px; font-size: 1rem; box-shadow: inset 0 0 0 2px var(--navy), inset 0 0 0 3px var(--gold-bright); }
.topbar .brand-name { color: #fff; }
.nav { display: flex; gap: 2px; margin-left: 10px; flex: 1; }
.nav a { padding: .5em .9em; border-radius: 4px; color: #c8cee0; font-weight: 600; font-size: .88rem; white-space: nowrap;
  letter-spacing: .02em; position: relative; }
.nav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav a.active { color: #fff; }
.nav a.active::after { content: ""; position: absolute; left: .9em; right: .9em; bottom: -2px; height: 2px; background: var(--gold-bright); }
.topbar-tools { display: flex; align-items: center; gap: 6px; }
.topbar .icon-btn { color: #dfe4f0; }
.topbar .icon-btn:hover { background: rgba(255,255,255,.1); }
.menu-btn { display: none; }

.search-box { position: relative; }
.search-box input { width: 190px; padding: .5em .9em .5em 2.1em; border-radius: 4px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08); color: #fff; font-size: .88rem; }
.search-box input::placeholder { color: #aab2c8; }
.search-box input:focus { border-color: var(--gold-bright); outline: none; background: rgba(255,255,255,.14); }
.search-box .s-ico { position: absolute; left: .7em; top: 50%; transform: translateY(-50%); color: #aab2c8; font-size: .85rem; }
.search-results { position: absolute; top: 120%; right: 0; width: 320px; max-height: 60vh; overflow-y: auto;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; z-index: 60; }
.search-results a { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: var(--radius-sm); color: var(--ink); }
.search-results a:hover { background: var(--bg-sunk); text-decoration: none; color: var(--ink); }

/* Mobile drawer */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(19,31,60,.5); backdrop-filter: blur(3px); z-index: 89; opacity: 0; pointer-events: none; transition: opacity .25s; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; left: 0; height: 100dvh; width: 268px; background: var(--navy); color: #eef1f7;
  z-index: 90; transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column;
  border-right: 2px solid var(--gold); }
.drawer.open { transform: none; }
.drawer .drawer-head { padding: 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.12); }
.drawer .drawer-head .brand { color: #fff; font-size: 1.15rem; }
.drawer nav { display: flex; flex-direction: column; padding: 12px; gap: 2px; }
.drawer nav a { padding: .85em 1em; border-radius: 6px; color: #cbd1e2; font-weight: 600; display: flex; align-items: center; gap: 12px; }
.drawer nav a:hover, .drawer nav a.active { background: rgba(255,255,255,.09); color: #fff; }
.drawer nav a .di { color: var(--gold-bright); width: 22px; text-align: center; }
.drawer .drawer-foot { margin-top: auto; padding: 16px; border-top: 1px solid rgba(255,255,255,.12); }

.view { padding: 34px 0 90px; animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.view-head { margin-bottom: 26px; }
.view-head .eyebrow { display: block; margin-bottom: 6px; }
.view-head h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 0; }
.view-head p { margin: .35em 0 0; color: var(--ink-soft); }

/* ---- Avatars ---------------------------------------------------------- */
.avatar { position: relative; border-radius: 50%; object-fit: cover; background: var(--bg-sunk); flex: none;
  display: grid; place-items: center; color: var(--navy); font-weight: 700; overflow: hidden; font-family: var(--serif);
  border: 1px solid var(--line); box-shadow: inset 0 0 0 2px var(--bg-elev), inset 0 0 0 3px var(--gold-line); }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar.sq { border-radius: var(--radius-sm); }
.avatar.plain { box-shadow: none; }

/* =========================================================================
   FAMILY TREE
   ========================================================================= */
.tree-stage { position: relative; height: min(74vh, 780px); border: 1px solid var(--line-strong); border-radius: var(--radius);
  overflow: hidden; touch-action: none; cursor: grab; user-select: none;
  background:
    radial-gradient(circle at 1px 1px, rgba(23,32,58,.07) 1px, transparent 0) 0 0 / 28px 28px, var(--bg-elev); }
.tree-stage.grabbing { cursor: grabbing; }
.tree-canvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.tree-links { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.tree-links path { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.tree-links path.spouse { stroke: var(--gold); stroke-width: 2.5; }

.node { position: absolute; width: 150px; background: var(--bg-white); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 12px 10px 10px; text-align: center; cursor: pointer;
  transition: box-shadow .15s, border-color .15s, transform .1s; }
.node::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold-line), transparent); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.node:hover { box-shadow: var(--shadow-md); border-color: var(--gold-line); transform: translateY(-2px); }
.node.selected { border-color: var(--navy); box-shadow: 0 0 0 2px var(--gold-soft), var(--shadow-md); }
.node.deceased .avatar { filter: grayscale(.25); }
.node .avatar { width: 62px; height: 62px; margin: 0 auto 8px; font-size: 1.2rem; }
.node .n-name { font-family: var(--serif); font-size: 1.02rem; font-weight: 600; line-height: 1.15; color: var(--ink); }
.node .n-dates { font-size: .74rem; color: var(--ink-faint); margin-top: 3px; }
.node .n-deceased-mark { color: var(--gold); }

.tree-controls { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 5; }
.tree-controls .icon-btn { background: var(--bg-white); box-shadow: var(--shadow-sm); border: 1px solid var(--line); color: var(--navy); font-size: 1.1rem; }
.tree-legend { position: absolute; left: 12px; bottom: 12px; background: color-mix(in srgb, var(--bg-white) 92%, transparent);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; font-size: .76rem; display: flex; gap: 14px; color: var(--ink-soft); }
.tree-legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 18px; height: 3px; border-radius: 2px; display: inline-block; }

/* Slide-in person panel */
.person-panel { position: fixed; top: 0; right: 0; height: 100dvh; width: min(410px, 92vw); background: var(--bg-elev);
  border-left: 3px solid var(--gold); box-shadow: var(--shadow-lg); z-index: 80; transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1); overflow-y: auto; }
.person-panel.open { transform: none; }
.person-panel .pp-head { padding: 26px 22px 18px; text-align: center; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--navy-tint), transparent); }
.person-panel .pp-head .avatar { width: 100px; height: 100px; margin: 0 auto 12px; font-size: 1.9rem; }
.person-panel .pp-head h2 { margin: 0; font-size: 1.5rem; }
.person-panel .pp-close { position: absolute; top: 12px; right: 12px; }
.person-panel .pp-body { padding: 20px 22px 34px; }
.pp-body h4 { text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; color: var(--gold); font-family: var(--sans); margin: 20px 0 8px; }
.pp-body .kv { display: grid; grid-template-columns: 92px 1fr; gap: 6px 12px; font-size: .9rem; }
.pp-body .kv dt { color: var(--ink-faint); }
.pp-body .kv dd { margin: 0; }

/* =========================================================================
   DIRECTORY / CARDS
   ========================================================================= */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.p-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 18px;
  display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: var(--shadow-sm);
  transition: transform .12s, box-shadow .15s, border-color .15s; color: var(--ink); position: relative; }
.p-card::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 2px; background: var(--gold-line); }
.p-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; border-color: var(--gold-line); color: var(--ink); }
.p-card .avatar { width: 88px; height: 88px; font-size: 1.6rem; margin-bottom: 12px; }
.p-card .pc-name { font-family: var(--serif); font-size: 1.14rem; font-weight: 600; }
.p-card .pc-sub { color: var(--ink-faint); font-size: .84rem; margin-top: 2px; }
.p-card .pc-tag { margin-top: 10px; font-size: .72rem; background: var(--navy-tint); color: var(--navy); padding: .25em .7em; border-radius: 999px; font-weight: 600; }

.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.chip { border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--ink-soft); padding: .38em .95em;
  border-radius: 999px; font-size: .84rem; cursor: pointer; transition: all .12s; }
.chip:hover { border-color: var(--gold-line); }
.chip.active { background: var(--navy); border-color: var(--navy); color: #fff; }

/* =========================================================================
   PERSON DETAIL PAGE
   ========================================================================= */
.back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; font-weight: 600; color: var(--ink-soft); }
.profile-hero { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; background: var(--bg-elev);
  border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); margin-bottom: 26px; }
.profile-hero .avatar { width: 150px; height: 150px; font-size: 2.8rem; }
.profile-hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin: .06em 0 .1em; }
.profile-hero .subtitle { color: var(--ink-soft); font-size: 1.06rem; }
.profile-hero .badges { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.badge { font-size: .76rem; background: var(--bg-sunk); color: var(--ink-soft); padding: .32em .85em; border-radius: 999px; }
.badge.living { background: var(--navy-tint); color: var(--navy); }
.badge.deceased { background: var(--gold-soft); color: var(--gold); }

.profile-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start; }
.panel { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); margin-bottom: 24px; }
.panel h3 { font-size: 1.3rem; display: flex; align-items: center; gap: 8px; margin-bottom: .5em; }
.panel h3 .ico { color: var(--gold); font-size: .9em; }
.panel p { color: var(--ink-soft); }
.relation-list { display: flex; flex-direction: column; gap: 8px; }
.relation-list a { display: flex; align-items: center; gap: 10px; color: var(--ink); padding: 6px; border-radius: var(--radius-sm); }
.relation-list a:hover { background: var(--bg-sunk); text-decoration: none; color: var(--ink); }
.relation-list .avatar { width: 42px; height: 42px; font-size: .85rem; }
.relation-role { font-size: .74rem; color: var(--ink-faint); }

dl.facts { display: grid; grid-template-columns: 130px 1fr; gap: 9px 14px; margin: 0; font-size: .93rem; }
dl.facts dt { color: var(--ink-faint); }
dl.facts dd { margin: 0; }
.social-links { display: flex; flex-wrap: wrap; gap: 8px; }
.social-links a { background: var(--bg-sunk); padding: .42em .85em; border-radius: 4px; font-size: .84rem; font-weight: 600; color: var(--navy); }
.social-links a:hover { background: var(--gold-soft); color: var(--navy); }

.mini-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.mini-gallery img, .mini-gallery .ph-fallback { aspect-ratio: 1; border-radius: var(--radius-sm); object-fit: cover; cursor: pointer; width: 100%; }

/* =========================================================================
   GALLERY
   ========================================================================= */
.gallery-grid { columns: 4 220px; column-gap: 14px; }
.gallery-grid figure { break-inside: avoid; margin: 0 0 14px; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-elev); cursor: pointer; box-shadow: var(--shadow-sm); position: relative; }
.gallery-grid figure:hover .g-info { opacity: 1; }
.gallery-grid img, .gallery-grid .ph-fallback { width: 100%; display: block; }
.g-info { position: absolute; inset: auto 0 0 0; padding: 28px 12px 10px; color: #fff;
  background: linear-gradient(transparent, rgba(15,22,45,.82)); font-size: .82rem; opacity: 0; transition: opacity .2s; }
.g-info strong { display: block; font-family: var(--serif); font-size: 1rem; }
.ph-fallback { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--bg-sunk), var(--navy-tint)); display: grid; place-items: center;
  color: var(--ink-faint); font-size: .8rem; text-align: center; padding: 10px; width: 100%; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(12,16,30,.92); z-index: 120; display: none; grid-template-rows: 1fr auto; place-items: center; padding: 24px; }
.lightbox.open { display: grid; }
.lightbox img { max-height: 80vh; max-width: 92vw; border-radius: 6px; box-shadow: var(--shadow-lg); }
.lightbox .lb-caption { color: #eef1f7; max-width: 720px; text-align: center; margin-top: 16px; }
.lightbox .lb-caption h4 { color: #fff; margin: 0 0 4px; font-size: 1.3rem; }
.lightbox .lb-caption .lb-people { margin-top: 10px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.lightbox .lb-caption .lb-people a { color: var(--gold-bright); font-size: .85rem; }
.lightbox .lb-close { position: fixed; top: 18px; right: 18px; color: #fff; background: rgba(255,255,255,.14); }

/* =========================================================================
   TIMELINE
   ========================================================================= */
.timeline { position: relative; max-width: 820px; margin: 0 auto; padding-left: 42px; }
.timeline::before { content: ""; position: absolute; left: 14px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--gold-line), var(--line-strong)); }
.tl-item { position: relative; margin-bottom: 26px; }
.tl-item::before { content: ""; position: absolute; left: -34px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg-elev); border: 3px solid var(--navy); }
.tl-item.type-birth::before { border-color: var(--navy); }
.tl-item.type-death::before { border-color: var(--gold); }
.tl-item.type-marriage::before { border-color: var(--gold-bright); }
.tl-item.type-event::before { border-color: var(--danger); }
.tl-item.type-photo::before { border-color: var(--ink-faint); }
.tl-year { font-family: var(--serif); font-size: .84rem; color: var(--gold); font-weight: 700; letter-spacing: .05em; }
.tl-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 16px; box-shadow: var(--shadow-sm); margin-top: 4px; }
.tl-card h4 { margin: 0 0 2px; font-size: 1.05rem; }
.tl-card p { margin: 0; color: var(--ink-soft); font-size: .9rem; }
.tl-filters { justify-content: center; }

/* =========================================================================
   EVENTS
   ========================================================================= */
.event-card { display: grid; grid-template-columns: 150px 1fr; background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); margin-bottom: 18px; color: var(--ink);
  transition: transform .12s, box-shadow .15s, border-color .15s; }
.event-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; color: var(--ink); border-color: var(--gold-line); }
.event-card .ev-date { background: var(--navy); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px; text-align: center; }
.event-card .ev-date .m { text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; color: var(--gold-bright); }
.event-card .ev-date .d { font-family: var(--serif); font-size: 2.6rem; line-height: 1; margin: 2px 0; }
.event-card .ev-date .y { font-size: .82rem; opacity: .85; }
.event-card.past .ev-date { background: linear-gradient(160deg, #2b3a5e, var(--navy-deep)); }
.event-card .ev-body { padding: 18px 20px; }
.event-card .ev-body h3 { margin: 0 0 4px; font-size: 1.35rem; }
.event-card .ev-type { font-size: .72rem; color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.event-card .ev-meta { display: flex; gap: 16px; flex-wrap: wrap; color: var(--ink-faint); font-size: .85rem; margin: 8px 0; }
.event-card .ev-people { display: flex; margin-top: 12px; }
.event-card .ev-people .avatar { width: 34px; height: 34px; font-size: .72rem; margin-left: -8px; box-shadow: 0 0 0 2px var(--bg-elev); }
.event-card .ev-people .avatar:first-child { margin-left: 0; }
.event-card .ev-thumbs { display: flex; gap: 6px; margin-top: 12px; }
.event-card .ev-thumbs img, .event-card .ev-thumbs .ph-fallback { width: 60px; height: 46px; border-radius: 5px; object-fit: cover; }
.section-label { font-family: var(--serif); font-size: 1.5rem; margin: 34px 0 16px; display: flex; align-items: center; gap: 14px; color: var(--navy); }
.section-label::after { content: ""; flex: 1; height: 1px; background: var(--gold-line); }

/* Event detail */
.event-hero { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); margin-bottom: 24px; box-shadow: var(--shadow-sm); }
.event-hero .eh-banner { background: linear-gradient(150deg, var(--navy), var(--navy-deep)); color: #fff; padding: 34px; position: relative; }
.event-hero .eh-banner::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 24px); pointer-events: none; }
.event-hero .eh-type { color: var(--gold-bright); text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; font-weight: 700; }
.event-hero h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.8rem); margin: .1em 0 .3em; }
.event-hero .eh-meta { display: flex; gap: 22px; flex-wrap: wrap; color: #cdd4e6; font-size: .95rem; }
.event-hero .eh-meta b { color: #fff; font-weight: 600; }
.itinerary { position: relative; padding-left: 34px; margin: 6px 0 0; }
.itinerary::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--gold-line); }
.itin-item { position: relative; margin-bottom: 18px; }
.itin-item::before { content: ""; position: absolute; left: -30px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg-elev); border: 3px solid var(--gold); }
.itin-time { font-family: var(--serif); font-weight: 700; color: var(--navy); }
.itin-item h4 { margin: 2px 0; }
.itin-item p { margin: 0; color: var(--ink-soft); font-size: .92rem; }
.event-gallery { columns: 3 200px; column-gap: 12px; }
.event-gallery figure { break-inside: avoid; margin: 0 0 12px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); cursor: pointer; box-shadow: var(--shadow-sm); }

/* =========================================================================
   MAP
   ========================================================================= */
#map { height: min(70vh, 640px); border-radius: var(--radius); border: 1px solid var(--line-strong); z-index: 1; }
.map-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.map-legend label { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; cursor: pointer; }
.map-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: var(--shadow-sm); }
.map-fallback { padding: 44px; text-align: center; color: var(--ink-faint); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.leaflet-popup-content { font-family: var(--sans); }
.leaflet-popup-content a { color: var(--navy); font-weight: 600; }
.map-photo-pop img { width: 180px; border-radius: 4px; margin-bottom: 6px; }

/* =========================================================================
   ABOUT
   ========================================================================= */
.about-hero { text-align: center; padding: 20px 0 10px; }
.about-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.about-lede { max-width: 62ch; margin: 18px auto; text-align: center; font-size: 1.12rem; color: var(--ink-soft); line-height: 1.9; }
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 34px 0; border-top: 2px solid var(--gold-line); border-bottom: 2px solid var(--gold-line); }
.pillar { text-align: center; padding: 26px 18px; border-right: 1px solid var(--line); position: relative; }
.pillar:last-child { border-right: none; }
.pillar .p-name { font-family: var(--serif); font-size: 1.5rem; color: var(--navy); letter-spacing: .06em; }
.pillar .p-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; color: var(--gold); margin-top: 4px; }
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin-top: 20px; }
.value-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.value-card .v-ico { font-size: 1.7rem; }
.value-card h3 { margin: .3em 0 .2em; font-size: 1.2rem; }
.value-card p { color: var(--ink-soft); margin: 0; font-size: .93rem; }
.legacy-quote { text-align: center; font-family: var(--serif); font-size: clamp(1.3rem, 3vw, 1.9rem); color: var(--navy);
  max-width: 40ch; margin: 40px auto; line-height: 1.5; position: relative; font-style: italic; }
.legacy-quote::before, .legacy-quote::after { color: var(--gold); font-size: 1.4em; }
.legacy-quote::before { content: "“"; } .legacy-quote::after { content: "”"; }

/* =========================================================================
   CONTACT / INFO
   ========================================================================= */
.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: start; }
.resource-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); margin-bottom: 16px; display: flex; gap: 16px; align-items: center; }
.resource-card .r-ico { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; font-size: 1.5rem; background: var(--navy-tint); flex: none; }
.resource-card.wa .r-ico { background: #dcf8e8; }
.resource-card .r-body { flex: 1; min-width: 0; }
.resource-card h3 { margin: 0 0 2px; font-size: 1.15rem; }
.resource-card p { margin: 0; color: var(--ink-soft); font-size: .88rem; }
.resource-card .r-actions { display: flex; gap: 8px; align-items: center; }
.qr-box { text-align: center; }
.qr-box img { width: 128px; height: 128px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 6px; }
.qr-modal { position: fixed; inset: 0; background: rgba(19,31,60,.6); z-index: 120; display: none; place-items: center; padding: 20px; }
.qr-modal.open { display: grid; }
.qr-modal .qr-card { background: #fff; border-radius: var(--radius); padding: 28px; text-align: center; max-width: 320px; box-shadow: var(--shadow-lg); }
.qr-modal .qr-card img { width: 240px; height: 240px; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--ink-faint); }
.empty-state .es-ico { font-size: 2.4rem; opacity: .6; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 900px) {
  .profile-grid { grid-template-columns: 1fr; }
  .profile-hero { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .search-box { display: none; }
  .topbar .brand-name { font-size: 1.05rem; }
}
@media (max-width: 560px) {
  .gallery-grid { columns: 2 140px; }
  .event-gallery { columns: 2 150px; }
  .event-card { grid-template-columns: 1fr; }
  .event-card .ev-date { flex-direction: row; gap: 8px; padding: 10px; }
  .event-card .ev-date .d { font-size: 1.5rem; }
  dl.facts { grid-template-columns: 100px 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .pillar { border-right: none; border-bottom: 1px solid var(--line); }
  .pillar:last-child { border-bottom: none; }
}

/* Print (nice for a person page) */
@media print {
  .topbar, .drawer, .drawer-backdrop, .tree-controls, .person-panel, .back-link, .btn { display: none !important; }
  body { background: #fff; }
  .panel, .profile-hero { box-shadow: none; border-color: #ccc; }
}