/* =====================================================================
   THE JOHNSON FAMILY — shared stylesheet
   "A day at the beach in Port Antonio" 🌴
   Caribbean island theme: ocean teal leads, coral plays, sunshine warms,
   everything rests on sand. Edit the variables below to re-tune colors.
   ===================================================================== */

:root {
  /* the sand */
  --cream:        #fef9ee;   /* warm sand (page background) */
  --cream-soft:   #fdeecd;   /* deeper sand (alternating bands) */
  --white:        #ffffff;

  /* the sea */
  --green:        #0a9ea6;   /* caribbean teal — the lead color */
  --green-dark:   #073b4c;   /* deep ocean */
  --sky:          #c9f0f2;   /* shallow-water sky */

  /* the fun */
  --gold:         #ffb703;   /* sunshine */
  --gold-soft:    #ffd166;   /* soft morning sun */
  --coral:        #ff6f59;   /* coral reef */
  --burgundy:     #ef476f;   /* hibiscus */
  --palm:         #06d6a0;   /* palm leaf */

  /* the words */
  --ink:          #16394a;   /* deep-sea ink */
  --ink-soft:     #46687a;

  --line:         #f3ddab;   /* sandy borders */
  --shadow:       0 18px 40px -22px rgba(7, 59, 76, 0.35);

  --serif:  "Pacifico", "Brush Script MT", cursive;          /* beach-sign script */
  --sans:   "Quicksand", "Avenir Next", "Trebuchet MS", sans-serif;

  --maxw: 1120px;

  /* the waves (SVG used under heroes & banners) */
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%23fef9ee' d='M0,56 C180,88 360,20 560,36 C760,52 900,92 1100,72 C1260,56 1360,40 1440,52 L1440,90 L0,90 Z'/%3E%3C/svg%3E");
  --wave-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%23fdeecd' d='M0,56 C180,88 360,20 560,36 C760,52 900,92 1100,72 C1260,56 1360,40 1440,52 L1440,90 L0,90 Z'/%3E%3C/svg%3E");
}

/* ---------- reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* hidden must always win — otherwise a class like .btn (display:inline-block)
   overrides the browser's [hidden] rule and shows things that should be gone */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--green); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--coral); }

h1, h2 { font-family: var(--serif); font-weight: 400; line-height: 1.3; color: var(--green-dark); }
h3, h4 { font-family: var(--sans); font-weight: 700; line-height: 1.25; color: var(--green-dark); }
h1 { font-size: clamp(2.3rem, 5.5vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); }
h3 { font-size: 1.35rem; }
p  { color: var(--ink-soft); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
section { padding: 90px 0; }

/* ---------- decorative bits ---------- */
.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .26em;
  font-size: .74rem;
  color: var(--coral);
  font-weight: 700;
  margin-bottom: 14px;
}
.divider {
  width: 84px; height: 3px; border-radius: 2px; background: var(--gold);
  margin: 22px auto; position: relative;
}
.divider::before, .divider::after {
  content: ""; position: absolute; top: 50%; width: 8px; height: 8px;
  border-radius: 50%; transform: translateY(-50%);
}
.divider::before { left: -18px; background: var(--green); }
.divider::after { right: -18px; background: var(--coral); }
.divider.left { margin-left: 0; }

.section-head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.section-head p { font-size: 1.1rem; }

/* ---------- buttons (relaxed pills) ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .8rem;
  padding: 14px 32px;
  border-radius: 999px;
  border: 2px solid var(--green);
  background: var(--green);
  color: #fff;
  cursor: pointer;
  transition: all .25s ease;
  box-shadow: 0 8px 20px -10px rgba(10, 158, 166, .65);
}
.btn:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; transform: translateY(-2px); }
.btn.ghost { background: transparent; color: var(--green); box-shadow: none; }
.btn.ghost:hover { background: var(--green); color: #fff; }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--green-dark); box-shadow: 0 8px 20px -10px rgba(255, 183, 3, .7); }
.btn.gold:hover { background: var(--coral); border-color: var(--coral); color: #fff; }

/* ---------- header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(254, 249, 238, .93);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand .crest {
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--gold);
  background: radial-gradient(circle at 30% 25%, #14b8c4, #0a7f8a);
  display: grid; place-items: center;
  font-family: var(--serif); color: #fff;
  font-size: 1.15rem; padding-top: 4px;
}
.brand .name {
  font-family: var(--serif); font-size: 1.35rem;
  color: var(--green-dark); line-height: 1.15;
}
.brand .name small {
  display: block; font-family: var(--sans); font-size: .56rem;
  letter-spacing: .32em; text-transform: uppercase; color: var(--coral);
  margin-top: 3px; font-weight: 700;
}
.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; flex-wrap: wrap; }
.nav-links a {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-soft); font-weight: 700; position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 3px; width: 0;
  border-radius: 2px; background: var(--gold); transition: width .25s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--green-dark); }
.nav-links a.active::after, .nav-links a:hover::after { width: 100%; }

.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  width: 32px; height: 32px;
}
.nav-toggle span {
  display: block; height: 3px; width: 24px; border-radius: 2px;
  background: var(--green); margin: 4px auto; transition: .3s;
}

.nav-user { display: flex; align-items: center; gap: 12px; margin-left: 6px; }
.nav-user .hi {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--coral); font-weight: 700;
}
.logout-btn {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--green-dark); background: transparent;
  border: 2px solid var(--line); border-radius: 999px; padding: 7px 16px; cursor: pointer;
  transition: all .2s ease;
}
.logout-btn:hover { border-color: var(--burgundy); color: var(--burgundy); }
@media (min-width: 881px) {
  .nav-links { gap: 20px; }
  .nav-links a { font-size: .74rem; letter-spacing: .08em; }
}
@media (max-width: 880px) {
  .nav-user { flex-direction: column; gap: 8px; width: 100%; padding: 12px 0; }
}

/* ---------- ocean hero ---------- */
.hero {
  position: relative; text-align: center; color: #fff;
  padding: 0; overflow: hidden;
}
.hero-inner {
  min-height: 78vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 80px 24px 130px;
  background:
    radial-gradient(circle at 80% 8%, rgba(255, 209, 102, .35), transparent 42%),
    linear-gradient(rgba(7, 59, 76, .55), rgba(7, 59, 76, .66)),
    url("../assets/bg-beach-palms.jpg") center 35% / cover no-repeat,
    radial-gradient(circle at 30% 25%, #17b9c5, #073b4c 82%);
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 70px;
  background: var(--wave) bottom / 100% 100% no-repeat; pointer-events: none;
}
.hero h1 { color: #fff; text-shadow: 0 3px 14px rgba(7, 59, 76, .45); }
.hero .eyebrow { color: var(--gold-soft); }
.hero p { color: #eafcfd; font-size: 1.18rem; max-width: 600px; margin: 18px auto 32px; }
.hero .divider { background: var(--gold-soft); }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.hero .btn.ghost { color: #fff; border-color: rgba(255,255,255,.85); }
.hero .btn.ghost:hover { background: #fff; color: var(--green-dark); }

/* hero with featured video (the patriarch) */
.hero-split {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
  max-width: var(--maxw); margin: 0 auto; text-align: left; width: 100%;
}
.hero-split .divider { margin-left: 0; }
.hero-split p { margin-left: 0; }
.hero-split .hero-actions { justify-content: flex-start; }
.hero-video-frame {
  background: rgba(255,255,255,.12); border: 2px solid var(--gold-soft);
  padding: 12px; box-shadow: 0 30px 70px -20px rgba(4, 34, 44, .7); border-radius: 18px;
}
.hero-video-frame video { width: 100%; display: block; border-radius: 10px; }
.hero-video-frame figcaption {
  font-family: var(--serif); text-align: center; color: var(--gold-soft);
  font-size: .98rem; padding: 14px 6px 6px;
}
@media (max-width: 880px) {
  .hero-split { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .hero-split .divider { margin-left: auto; }
  .hero-split .hero-actions { justify-content: center; }
}

/* page banner (interior pages) */
.banner {
  position: relative; text-align: center; color: #fff; padding: 86px 24px 130px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 10%, rgba(255, 209, 102, .32), transparent 40%),
    linear-gradient(rgba(7, 59, 76, .58), rgba(7, 59, 76, .68)),
    url("../assets/bg-beach-palms.jpg") center 38% / cover no-repeat,
    radial-gradient(circle at 65% 30%, #17b9c5, #073b4c 85%);
}
.banner::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 60px;
  background: var(--wave) bottom / 100% 100% no-repeat; pointer-events: none;
}
.banner h1 { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.3rem); text-shadow: 0 3px 14px rgba(7,59,76,.45); }
.banner .eyebrow { color: var(--gold-soft); }
.banner p { color: #eafcfd; max-width: 560px; margin: 14px auto 0; }
.banner .divider { background: var(--gold-soft); }

/* ---------- generic cards / grid ---------- */
.grid { display: grid; gap: 28px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--white); border: 2px solid var(--line);
  border-radius: 18px; padding: 34px; box-shadow: var(--shadow);
}
.card h3 { margin-bottom: 10px; }

.feature {
  text-align: center; background: var(--white); border: 2px solid var(--line);
  border-radius: 18px; padding: 40px 28px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.feature:hover { transform: translateY(-6px) rotate(-.5deg); box-shadow: var(--shadow); border-color: var(--gold); }
.feature .ico {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--sky); border: 2px solid var(--gold-soft);
  display: grid; place-items: center; font-size: 1.7rem;
}

/* ---------- framed photo (postcard look) ---------- */
.frame {
  background: var(--white); padding: 12px; border: 2px solid var(--line);
  box-shadow: var(--shadow); border-radius: 14px;
}
.frame .mat {
  border: 2px dashed var(--gold-soft); border-radius: 8px; padding: 6px; height: 100%;
}

/* photo placeholder tiles */
.photo {
  aspect-ratio: 4 / 3; border-radius: 8px; position: relative; overflow: hidden;
  display: grid; place-items: center; color: #fff;
  font-family: var(--serif); font-size: 1.05rem; letter-spacing: .02em;
  cursor: pointer; transition: transform .35s ease;
}
.photo span { position: relative; z-index: 2; text-shadow: 0 2px 6px rgba(7,59,76,.55); padding: 0 10px; text-align: center; }
.photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(7,59,76,.55), rgba(7,59,76,0) 60%);
}
.photo:hover { transform: scale(1.04) rotate(.6deg); }

/* ---------- gallery ---------- */
.filters { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.filters button {
  font-family: var(--sans); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  background: var(--white); border: 2px solid var(--line); color: var(--ink-soft);
  padding: 9px 22px; border-radius: 999px; cursor: pointer; transition: all .2s ease; font-weight: 700;
}
.filters button:hover { border-color: var(--gold); color: var(--green-dark); }
.filters button.active { background: var(--green); border-color: var(--green); color: #fff; }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gallery .frame { padding: 8px; }
.gallery .frame .mat { padding: 4px; }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(7, 39, 50, .92); place-items: center; padding: 30px;
}
.lightbox.open { display: grid; }
.lightbox figure {
  max-width: 640px; width: 100%; background: var(--white); padding: 16px;
  border: 2px solid var(--gold-soft); border-radius: 16px; box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
.lightbox .photo { aspect-ratio: 4/3; font-size: 1.5rem; }
.lightbox figcaption {
  font-family: var(--serif); font-size: 1.15rem; color: var(--green-dark);
  text-align: center; padding: 16px 8px 6px;
}
.lightbox .close {
  position: absolute; top: 22px; right: 28px; background: none; border: none;
  color: #fff; font-size: 2.4rem; cursor: pointer; line-height: 1;
}

/* =====================================================================
   FAMILY TREE — vertical descendant chart
   Generations flow top→bottom and indent to the right, so the chart
   never runs off the side of the screen. Each generation gets its own
   colour down the spine, from deep ocean to hibiscus.
   ===================================================================== */
.tree { padding: 8px 0; }

/* ---- toolbar: search + expand/collapse + count ---- */
.tree-tools {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--white); border: 2px solid var(--line); border-radius: 18px;
  padding: 14px 18px; margin-bottom: 10px; box-shadow: var(--shadow);
}
.tree-search-wrap { position: relative; flex: 1 1 240px; }
.tree-search-wrap::before {
  content: "🔎"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: .9rem; pointer-events: none; opacity: .75;
}
#tree-search {
  width: 100%; font-family: var(--sans); font-size: .95rem; font-weight: 600; color: var(--ink);
  padding: 11px 16px 11px 38px; border: 2px solid var(--line); border-radius: 999px;
  background: var(--cream);
}
#tree-search:focus { outline: none; border-color: var(--green); background: var(--white); }
#tree-search::placeholder { color: #8fb0bd; font-weight: 500; }
.tree-btn {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: var(--green-dark); background: var(--sky);
  border: 2px solid transparent; border-radius: 999px; padding: 9px 16px; cursor: pointer;
  transition: all .2s ease; white-space: nowrap;
}
.tree-btn:hover { background: var(--green); color: #fff; }
#tree-stats {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: var(--coral); white-space: nowrap;
}
#tree-search-note { font-size: .8rem; color: var(--green); font-weight: 700; min-height: 1em; flex-basis: 100%; }
#tree-search-note:empty { display: none; }

/* ---- generation legend ---- */
.tree-legend { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-bottom: 26px; }
.ft-leg {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-soft);
}
.ft-leg i { width: 12px; height: 12px; border-radius: 50%; background: var(--g); display: inline-block; }

/* ---- generation colours ---- */
.ft-node[data-gen="1"], .ft-leg[data-gen="1"] { --g: #073b4c; }
.ft-node[data-gen="2"], .ft-leg[data-gen="2"] { --g: #0a9ea6; }
.ft-node[data-gen="3"], .ft-leg[data-gen="3"] { --g: #06d6a0; }
.ft-node[data-gen="4"], .ft-leg[data-gen="4"] { --g: #e9a300; }
.ft-node[data-gen="5"], .ft-leg[data-gen="5"] { --g: #ff6f59; }
.ft-node[data-gen="6"], .ft-leg[data-gen="6"] { --g: #ef476f; }

/* ---- the chart ---- */
.ft-node { position: relative; }
.ft-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; flex-wrap: wrap; }

/* children indent under a coloured spine */
.ft-kids {
  margin-left: 15px; padding-left: 26px;
  border-left: 2px solid var(--g);
  position: relative;
}
.ft-node.is-collapsed > .ft-kids { display: none; }
/* the little elbow joining a child to the spine */
.ft-kids > .ft-node > .ft-row::before {
  content: ""; position: absolute; left: -26px; top: 50%; width: 20px; height: 2px;
  background: var(--g); border-radius: 2px;
}
.ft-kids > .ft-node > .ft-row { position: relative; }

/* ---- expand / collapse control ---- */
.ft-toggle {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--g); background: var(--white); color: var(--g);
  font-size: .8rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: all .2s ease; padding: 0;
}
.ft-toggle:hover { background: var(--g); color: #fff; }
.ft-toggle span { display: block; transition: transform .25s ease; }
.ft-node.is-collapsed > .ft-row > .ft-toggle span { transform: rotate(-90deg); }
.ft-toggle.is-leaf {
  border-style: none; background: none; color: var(--g); cursor: default;
  font-size: 1.4rem; opacity: .5;
}
.ft-toggle.is-leaf:hover { background: none; color: var(--g); }

/* ---- the person card ---- */
.ft-unit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ft-card {
  display: flex; align-items: center; gap: 11px; text-align: left;
  background: linear-gradient(170deg, #ffffff 60%, #fdf4e2 100%);
  border: 2px solid var(--line); border-left: 5px solid var(--g);
  border-radius: 14px; padding: 9px 16px 9px 11px; cursor: pointer;
  font-family: var(--sans); min-width: 210px;
  box-shadow: 0 8px 18px -12px rgba(7, 59, 76, .5);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ft-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold); border-left-color: var(--g);
  box-shadow: 0 14px 26px -12px rgba(7, 59, 76, .55);
}
.ft-av {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  background: var(--g); color: #fff;
  display: grid; place-items: center;
  font-size: .82rem; font-weight: 700; letter-spacing: .02em;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 2px var(--g), 0 4px 10px -4px rgba(7,59,76,.5);
  background-size: cover; background-position: center;
}
.ft-av.has-photo { color: transparent; font-size: 0; }
.ft-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ft-name { font-weight: 700; color: var(--green-dark); font-size: .95rem; line-height: 1.25; }

/* ---- bloodline colouring: burgundy = family blood, blue = married in
        or raised in the family. Just the name — quiet, not a label. ---- */
.ft-card.is-blood      .ft-name { color: #9d2449; }
.ft-card.is-married-in .ft-name { color: #1c6e9c; }

/* the three views — the others fade back rather than disappear,
   so the tree stays whole and nobody is removed from it */
.tree.view-blood   .ft-card.is-married-in,
.tree.view-married .ft-card.is-blood { opacity: .16; filter: saturate(.2); }
.tree.view-blood   .ft-card.is-married-in:hover,
.tree.view-married .ft-card.is-blood:hover { opacity: .5; }
.tree.view-blood .ft-with, .tree.view-married .ft-with { opacity: .3; }

/* toggle */
.blood-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: center; margin: 0 0 22px;
}
.blood-seg {
  display: inline-flex; background: var(--white);
  border: 2px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px;
}
.blood-seg button {
  font-family: var(--sans); font-size: .64rem; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 700; color: var(--ink-soft);
  background: none; border: 0; border-radius: 999px; padding: 6px 13px;
  cursor: pointer; transition: all .18s ease; display: inline-flex; align-items: center; gap: 5px;
}
.blood-seg button:hover { color: var(--green-dark); }
.blood-seg button.on { background: var(--green); color: #fff; }
.blood-seg button i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.blood-seg button[data-view="blood"] i   { background: #9d2449; }
.blood-seg button[data-view="married"] i { background: #1c6e9c; }
#blood-counts { font-size: .66rem; letter-spacing: .06em; color: var(--ink-soft); font-weight: 700; }
.ft-meta { font-size: .7rem; color: var(--ink-soft); font-weight: 600; letter-spacing: .02em; }
/* people still missing details get a soft dashed edge — a gentle to-do */
.ft-card.is-partial { border-style: dashed; border-left-style: solid; background: var(--white); }
.ft-card.is-partial .ft-meta { color: #a08a5c; font-style: italic; }

/* ---- "with <partner>" — heads a second family for the same person ---- */
.ft-with {
  display: inline-flex; align-items: center; gap: 5px; line-height: 1;
  background: color-mix(in srgb, var(--g) 10%, white);
  border: 1.5px dashed var(--g); border-radius: 999px;
  padding: 4px 11px 4px 8px; margin-right: 2px;
}
.ft-with-lbl {
  font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--g);
}
.ft-node.is-union > .ft-row > .ft-unit { flex-wrap: nowrap; }
@media (max-width: 640px) {
  .ft-node.is-union > .ft-row > .ft-unit { flex-wrap: wrap; }
  .ft-with { padding: 3px 9px 3px 6px; }
}

/* ---- marriage join ---- */
.ft-join { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.ft-join-mark { font-size: .95rem; }
.ft-join-yr { font-size: .58rem; color: var(--coral); font-weight: 700; letter-spacing: .04em; margin-top: 2px; }

/* ---- child count chip ---- */
.ft-count {
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  color: var(--g); background: color-mix(in srgb, var(--g) 12%, white);
  border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
.ft-node.is-collapsed > .ft-row > .ft-count { background: var(--g); color: #fff; }

/* ---- search states ---- */
.ft-node.ft-hidden { display: none; }
.ft-node.ft-hit > .ft-row > .ft-unit > .ft-card {
  border-color: var(--gold); background: #fff8e4;
  box-shadow: 0 0 0 3px rgba(255, 183, 3, .35), 0 14px 26px -12px rgba(7, 59, 76, .5);
}

@media (max-width: 640px) {
  .ft-kids { margin-left: 8px; padding-left: 16px; }
  .ft-kids > .ft-node > .ft-row::before { left: -16px; width: 11px; }
  .ft-card { min-width: 0; flex: 1 1 auto; padding: 8px 12px 8px 9px; }
  .ft-name { font-size: .88rem; }
  .ft-av { width: 36px; height: 36px; font-size: .72rem; }
  .ft-count { display: none; }
  .tree-tools { padding: 12px; }
}

/* profile modal */
.profile-modal {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(7, 39, 50, .9); place-items: center; padding: 30px;
}
.profile-modal.open { display: grid; }
.profile-modal .pm-card {
  background: var(--white); border: 2px solid var(--gold-soft); border-radius: 22px;
  max-width: 420px; width: 100%; padding: 36px 32px; text-align: center; box-shadow: 0 30px 60px rgba(0,0,0,.5);
  position: relative;
}
.profile-modal .pm-avatar {
  width: 96px; height: 96px; margin: 0 auto 18px;
  border-radius: 55% 45% 52% 48% / 50% 55% 45% 50%;
  display: grid; place-items: center; color: #fff; font-family: var(--sans);
  font-size: 1.9rem; font-weight: 700; border: 3px solid var(--gold-soft);
}
.profile-modal .pm-name { font-size: 1.5rem; margin-bottom: 2px; font-family: var(--serif); font-weight: 400; }
.profile-modal .pm-maiden { font-style: italic; color: var(--ink-soft); }
.profile-modal .pm-years { color: var(--coral); letter-spacing: .1em; font-size: .82rem; font-weight: 700; margin: 6px 0 16px; }
.profile-modal .pm-bio { color: var(--ink-soft); line-height: 1.6; }
.profile-modal .pm-close {
  position: absolute; top: 12px; right: 18px; background: none; border: none;
  font-size: 1.8rem; color: var(--ink-soft); cursor: pointer; line-height: 1;
}

/* ---------- timeline (history) ---------- */
.timeline { max-width: 760px; margin: 0 auto; position: relative; padding-left: 30px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--gold-soft); }
.tl-item { position: relative; padding: 0 0 38px 28px; }
.tl-item::before {
  content: ""; position: absolute; left: -30px; top: 4px; width: 15px; height: 15px;
  border-radius: 50%; background: var(--cream); border: 4px solid var(--coral);
}
.tl-item .yr { font-family: var(--serif); color: var(--coral); font-size: 1.25rem; }
.tl-item h3 { font-size: 1.15rem; margin: 2px 0 4px; }

/* ---------- events ---------- */
.countdown { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin: 28px 0 6px; }
.cd-box {
  background: rgba(255,255,255,.16); border: 2px solid var(--gold-soft); border-radius: 16px;
  padding: 16px 22px; min-width: 92px;
}
.cd-box .num { font-family: var(--sans); font-weight: 700; font-size: 2.4rem; line-height: 1.2; color: #fff; }
.cd-box .lbl { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft); margin-top: 6px; font-weight: 700; }

.event-row {
  display: flex; gap: 24px; align-items: center; background: var(--white);
  border: 2px solid var(--line); border-radius: 18px; padding: 22px 26px; box-shadow: var(--shadow);
}
.event-row .date {
  flex-shrink: 0; text-align: center; width: 78px; border-right: 2px dashed var(--line); padding-right: 18px;
}
.event-row .date .d { font-family: var(--sans); font-weight: 700; font-size: 2.1rem; color: var(--green); line-height: 1.1; }
.event-row .date .m { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--coral); font-weight: 700; }
.event-row .info h3 { font-size: 1.2rem; }
.event-row .info p { margin-top: 2px; font-size: .95rem; }

/* forms */
.form { max-width: 560px; margin: 0 auto; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--ink);
  padding: 13px 18px; border: 2px solid var(--line); border-radius: 14px; background: var(--white);
  transition: border-color .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); }
.form-note { text-align: center; margin-top: 14px; min-height: 1.4em; color: var(--green); font-weight: 700; }

/* ---------- blog ---------- */
.post {
  background: var(--white); border: 2px solid var(--line); border-radius: 18px;
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.post .thumb { aspect-ratio: 16/10; color: #fff; display: grid; place-items: center; font-family: var(--serif); font-size: 1.15rem; }
.post .body { padding: 24px 26px 28px; }
.post .meta { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--coral); margin-bottom: 8px; font-weight: 700; }
.post h3 { margin-bottom: 8px; }
.post .read { margin-top: 14px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }

/* celebration list */
.celebrate { list-style: none; }
.celebrate li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0; border-bottom: 2px dashed var(--line);
}
.celebrate li:last-child { border-bottom: 0; }
.celebrate .who { font-family: var(--sans); font-weight: 700; font-size: 1.08rem; color: var(--green-dark); }
.celebrate .occ { font-size: .76rem; color: var(--coral); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.celebrate .when { font-size: .9rem; color: var(--ink-soft); font-weight: 600; }

/* ---------- quote / band ---------- */
.band { background: var(--cream-soft); }
.quote { text-align: center; max-width: 760px; margin: 0 auto; }
.quote p { font-family: var(--serif); font-size: clamp(1.3rem, 2.8vw, 1.8rem); color: var(--green); line-height: 1.6; }
.quote cite { display: block; margin-top: 18px; font-family: var(--sans); font-style: normal; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; color: var(--coral); font-weight: 700; }

/* ---------- footer ---------- */
.site-footer { background: var(--green-dark); color: #d7f3f5; padding: 64px 0 28px; position: relative; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.site-footer h4 { color: var(--gold-soft); margin-bottom: 14px; font-size: 1.1rem; }
.site-footer a { color: #9fe0e4; }
.site-footer a:hover { color: var(--gold-soft); }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 9px; font-size: .92rem; }
.footer-bottom { border-top: 2px dashed rgba(255,209,102,.3); padding-top: 22px; text-align: center; font-size: .82rem; color: rgba(215,243,245,.65); }
.footer-bottom .crest {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border: 2px solid var(--gold-soft); border-radius: 50%; color: var(--gold-soft);
  font-family: var(--serif); margin-bottom: 12px; padding-top: 3px;
}

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 880px) {
  .grid.cols-3, .grid.cols-2, .gallery, .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links {
    position: fixed; inset: 76px 0 auto 0; flex-direction: column; gap: 0;
    background: var(--cream); border-bottom: 2px solid var(--line);
    max-height: 0; overflow: hidden; transition: max-height .3s ease; padding: 0;
  }
  .nav-links.open { max-height: 560px; padding: 10px 0; }
  .nav-links li { width: 100%; text-align: center; }
  .nav-links a { display: block; padding: 14px 0; }
  .nav-toggle { display: block; }
}
@media (max-width: 560px) {
  section { padding: 64px 0; }
  .grid.cols-3, .grid.cols-2, .gallery, .footer-grid { grid-template-columns: 1fr; }
  .event-row { flex-direction: column; text-align: center; }
  .event-row .date { border-right: 0; border-bottom: 2px dashed var(--line); padding: 0 0 14px; width: 100%; }
}

/* =====================================================================
   ISLAND LANDING — welcome + sign-in blended into one relaxed shore 🌊
   ===================================================================== */
.landing-sea {
  position: relative; min-height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: 64px 24px 150px;
  color: #fff; text-align: center;
  background:
    linear-gradient(180deg, rgba(7, 59, 76, .55) 0%, rgba(7, 59, 76, .30) 34%, rgba(7, 59, 76, .38) 66%, rgba(7, 59, 76, .78) 100%),
    url("../assets/bg-landing-palms.jpg") center / cover no-repeat,
    linear-gradient(180deg, #58cdd6 0%, #0a7f96 70%, #073b4c 100%);
}
.landing-sea::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 80px;
  background: var(--wave) bottom / 100% 100% no-repeat; pointer-events: none;
}

.landing-inner { max-width: 660px; margin: 0 auto; position: relative; z-index: 2; }
.landing-brand { justify-content: center; display: flex; margin-bottom: 26px; }
.landing-brand .crest { width: 52px; height: 52px; font-size: 1.4rem; background: rgba(255,255,255,.18); border-color: var(--gold-soft); }
.landing-brand .name { color: #fff; font-size: 1.5rem; }
.landing-brand .name small { color: var(--gold-soft); }

.landing-eyebrow {
  text-transform: uppercase; letter-spacing: .24em; font-size: .76rem;
  color: var(--gold-soft); font-weight: 700; margin-bottom: 14px;
  text-shadow: 0 1px 8px rgba(7,59,76,.9);
}
.landing-sea h1 { color: #fff; font-size: clamp(2.4rem, 6vw, 3.8rem); text-shadow: 0 4px 18px rgba(7,59,76,.5); }
.landing-lead { color: #f0fdfe; font-size: 1.14rem; margin: 20px auto 26px; max-width: 560px; text-shadow: 0 1px 10px rgba(7,59,76,.85); }
.landing-lead strong { color: var(--gold-soft); }

.landing-list {
  list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px;
  margin: 0 auto 34px; max-width: 600px; text-align: left;
}
.landing-list li { color: #f0fdfe; font-size: .98rem; text-shadow: 0 1px 8px rgba(7,59,76,.9); }
.landing-list strong { color: #fff; }
@media (max-width: 620px) { .landing-list { grid-template-columns: 1fr; max-width: 340px; } }

/* the sign-in — no card, no walls, just toes in the sand */
.landing-signin { max-width: 420px; margin: 0 auto; }
.signin-invite {
  font-family: var(--serif); font-size: 1.5rem; color: #fff; margin-bottom: 20px;
  text-shadow: 0 3px 12px rgba(7,59,76,.45);
}
.landing-signin input {
  width: 100%; font-family: var(--sans); font-size: 1.05rem; font-weight: 600;
  color: var(--green-dark); text-align: center;
  padding: 15px 22px; margin-bottom: 14px;
  border: 2px solid rgba(255,255,255,.55); border-radius: 999px;
  background: rgba(255,255,255,.92);
  transition: border-color .2s ease, transform .2s ease;
}
.landing-signin input::placeholder { color: #7aa1b0; font-weight: 500; }
.landing-signin input:focus { outline: none; border-color: var(--gold); transform: scale(1.02); }
.landing-signin .btn { width: 100%; font-size: .92rem; padding: 16px 32px; }
.landing-signin .form-note { color: #fff; }
.login-help { font-size: .86rem; color: rgba(240,253,254,.85); margin-top: 18px; }
.login-help strong { color: var(--gold-soft); }

/* ---- "get the app" — right on the front page, above the sign-in wall ---- */
.landing-app {
  max-width: 520px; margin: 40px auto 0; padding: 24px 26px 22px;
  background: rgba(7, 59, 76, .42);
  border: 2px dashed rgba(255, 209, 102, .55);
  border-radius: 22px;
  backdrop-filter: blur(3px);
}
.landing-app-title {
  font-family: var(--serif); font-size: 1.3rem; color: #fff;
  text-shadow: 0 2px 10px rgba(7,59,76,.6); margin-bottom: 8px;
}
.landing-app-lead {
  font-size: .92rem; color: #eafcfd; margin-bottom: 16px;
  text-shadow: 0 1px 8px rgba(7,59,76,.85);
}
.landing-app-lead em { color: var(--gold-soft); font-style: normal; font-weight: 700; }
.landing-app-btn { width: 100%; margin-bottom: 16px; }
.landing-app-ways { display: grid; gap: 10px; text-align: left; }
.landing-app-way {
  background: rgba(255,255,255,.14); border-radius: 12px; padding: 10px 14px;
  font-size: .85rem; color: #f0fdfe; line-height: 1.5;
}
.landing-app-way strong { color: #fff; }
.law-badge {
  display: inline-block; margin-right: 8px;
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: var(--green-dark); background: var(--gold-soft);
  border-radius: 999px; padding: 3px 9px;
}
.landing-app .ios-share {
  width: 18px; height: 18px; border-color: var(--gold-soft); color: #fff;
  vertical-align: middle; font-size: .7rem;
}
.landing-app-note {
  font-size: .8rem; color: rgba(240,253,254,.82); margin-top: 14px;
  text-shadow: 0 1px 8px rgba(7,59,76,.85);
}

/* =====================================================================
   BIRTHDAYS, CALENDAR & HOME
   ===================================================================== */
.birthday-banner {
  background: linear-gradient(90deg, var(--gold-soft), #ffe3a9 45%, var(--gold-soft));
  color: var(--green-dark); text-align: center; padding: 14px 20px;
  font-size: 1rem; font-weight: 600;
}
.birthday-banner .bb-emoji { font-size: 1.2rem; }
.birthday-banner strong { color: var(--green-dark); }
.birthday-banner .bb-sub { display: inline-block; color: #8a6d1f; margin-left: 6px; }

.calendar-wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start; }
.calendar {
  background: var(--white); border: 2px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow); padding: 22px;
}
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-title { font-family: var(--serif); font-size: 1.3rem; color: var(--green-dark); }
.cal-nav {
  background: var(--sky); border: 2px solid transparent; border-radius: 50%;
  width: 36px; height: 36px; cursor: pointer; font-size: 1.2rem; color: var(--green-dark);
  transition: all .2s ease;
}
.cal-nav:hover { background: var(--green); color: #fff; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow {
  text-align: center; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green); font-weight: 700; padding-bottom: 6px;
}
.cal-cell {
  aspect-ratio: 1 / 1; border: 2px solid transparent; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: .9rem; color: var(--ink-soft); position: relative; font-weight: 600;
}
.cal-cell.empty { border: 0; }
.cal-cell.has-event { background: #fff3d0; border-color: var(--gold-soft); cursor: default; }
.cal-cell.today { outline: 3px solid var(--green); font-weight: 700; color: var(--green-dark); }
.cal-num { line-height: 1; }
.cal-dot { font-size: .8rem; margin-top: 2px; }
.celebrate-panel {
  background: var(--white); border: 2px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow); padding: 24px 26px;
}
.celebrate-panel h3 { margin-bottom: 10px; }
.cal-empty { color: var(--ink-soft); font-style: italic; }
@media (max-width: 820px) { .calendar-wrap { grid-template-columns: 1fr; } }

.feature-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   RECIPES
   ===================================================================== */
.recipe-grid { grid-template-columns: repeat(3, 1fr); }
.recipe-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.recipe-thumb {
  aspect-ratio: 16 / 9; display: grid; place-items: center; font-size: 3rem;
  color: #fff;
}
.recipe-card .meta,
.recipe-card h3, .recipe-card p, .recipe-card details, .recipe-card .btn { margin-left: 26px; margin-right: 26px; }
.recipe-card .meta { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--coral); font-weight: 700; margin-top: 22px; }
.recipe-card h3 { margin: 6px 26px 8px; }
.recipe-card p { margin-bottom: 14px; }
.recipe-card details { margin-bottom: 24px; }
.recipe-card summary {
  cursor: pointer; font-weight: 700; color: var(--green); font-size: .82rem;
  letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px;
}
.recipe-card details[open] summary { color: var(--coral); }
.recipe-card details p { font-size: .92rem; margin-bottom: 8px; }
.recipe-add { align-items: flex-start; }
.recipe-add .btn { margin-bottom: 26px; }
@media (max-width: 880px) { .recipe-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .recipe-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   MEMORIAL — a Caribbean sunset, gentle and warm 🌅
   ===================================================================== */
.memorial-banner {
  background:
    linear-gradient(180deg, rgba(53, 80, 112, .5), rgba(109, 89, 122, .48) 60%, rgba(181, 101, 118, .5)),
    url("../assets/bg-sunrise.jpg") center 55% / cover no-repeat,
    linear-gradient(180deg, #355070 0%, #6d597a 55%, #b56576 100%);
}
.memorial-grid { grid-template-columns: repeat(3, 1fr); }
.memorial-card {
  background: var(--white); border: 2px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow); padding: 30px 26px 28px; text-align: center; position: relative;
}
.memorial-card .candle { font-size: 1.6rem; display: block; margin-bottom: 10px; }
.memorial-photo {
  width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 16px;
  background-size: cover; background-position: center; border: 4px solid var(--gold-soft);
}
.memorial-photo.placeholder {
  display: grid; place-items: center; color: #fff;
  font-family: var(--serif); font-size: 2rem; padding-top: 6px;
}
.memorial-card h3 { margin-bottom: 2px; }
.memorial-card .lifespan { color: #b56576; letter-spacing: .06em; font-size: .82rem; font-weight: 700; margin-bottom: 12px; }
.memorial-card p { font-size: .95rem; font-style: italic; }
.candle-note { text-align: center; margin-top: 48px; }
.candle-note p { font-family: var(--serif); font-size: 1.4rem; color: #6d597a; }
@media (max-width: 880px) { .memorial-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .memorial-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   FAMILY CHAT
   ===================================================================== */
.chat {
  background: var(--white); border: 2px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow); overflow: hidden;
}
.chat-log {
  height: 440px; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 14px;
  background: linear-gradient(180deg, var(--sky) 0%, var(--cream) 30%);
}
.chat-empty { text-align: center; color: var(--ink-soft); font-style: italic; margin: auto; }
.chat-msg { display: flex; gap: 10px; align-items: flex-end; max-width: 82%; }
.chat-msg.mine { flex-direction: row-reverse; align-self: flex-end; }
.chat-av {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color: #fff; display: grid; place-items: center; font-family: var(--sans);
  font-weight: 700; font-size: .85rem; border: 2px solid var(--gold-soft);
}
.chat-msg.mine .chat-av { background: linear-gradient(135deg, var(--gold), var(--coral)); }
.chat-bubble {
  background: var(--white); border: 2px solid var(--line); border-radius: 18px;
  padding: 9px 15px; display: flex; flex-direction: column;
}
.chat-msg.mine .chat-bubble { background: #d9f6f2; border-color: #9fe0d8; }
.chat-name { font-size: .72rem; font-weight: 700; color: var(--green); letter-spacing: .03em; margin-bottom: 2px; }
.chat-text { color: var(--ink); line-height: 1.45; word-break: break-word; }
.chat-time { font-size: .66rem; color: var(--ink-soft); margin-top: 4px; align-self: flex-end; }
.chat-form { display: flex; gap: 10px; padding: 16px; border-top: 2px solid var(--line); background: var(--white); }
.chat-form input {
  flex: 1; font-family: var(--sans); font-size: 1rem; padding: 12px 18px;
  border: 2px solid var(--line); border-radius: 999px; background: var(--white);
}
.chat-form input:focus { outline: none; border-color: var(--green); }
.chat-emoji {
  display: flex; gap: 6px; padding: 10px 16px 0; background: var(--white);
  border-top: 2px solid var(--line); overflow-x: auto;
}
.chat-emoji button {
  background: var(--sky); border: 2px solid transparent; border-radius: 999px;
  font-size: 1.15rem; padding: 6px 12px; cursor: pointer; transition: transform .15s ease, border-color .15s ease;
}
.chat-emoji button:hover { transform: scale(1.18); border-color: var(--gold); }
.chat-note {
  margin-top: 20px; background: var(--cream-soft); border: 2px dashed var(--gold-soft);
  border-radius: 16px; padding: 16px 20px;
}
.chat-note p { font-size: .9rem; color: var(--ink-soft); }

/* =====================================================================
   DONATE
   ===================================================================== */
.donate-grid { grid-template-columns: 1fr 1fr; }
.donate-card { text-align: center; }
.donate-logo {
  display: inline-block; font-weight: 800; letter-spacing: .02em; color: #fff;
  padding: 10px 24px; border-radius: 999px; font-size: 1.05rem; margin-bottom: 16px;
}
.donate-logo.zelle { background: #6d1ed4; }
.donate-logo.cashapp { background: #00c244; }
.donate-handle {
  background: var(--cream-soft); border: 2px dashed var(--gold); border-radius: 14px;
  padding: 12px 14px; margin: 8px 0 10px;
}
.donate-handle .lbl { display: block; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--coral); font-weight: 700; margin-bottom: 4px; }
.donate-handle strong { font-size: 1.05rem; color: var(--green-dark); word-break: break-all; }
.donate-tip { font-size: .86rem; }
.donate-thanks { text-align: center; margin-top: 40px; }
.donate-thanks p { font-family: var(--serif); font-size: 1.2rem; color: var(--green); }
.donate-thanks .donate-edit { font-family: var(--sans); font-size: .84rem; color: var(--ink-soft); margin-top: 14px; }
.donate-edit code { background: var(--cream-soft); padding: 2px 8px; border-radius: 6px; }
@media (max-width: 560px) { .donate-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   PHOTO UPLOADS
   ===================================================================== */
.uploads-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.uploads-empty { text-align: center; color: var(--ink-soft); font-style: italic; grid-column: 1 / -1; }

/* modern photo card — the photo itself is the only "card"; the caption
   sits directly on the page background, no box around it */
.upload-card { background: none; }
.upload-card-photo {
  position: relative; border-radius: 16px; overflow: hidden;
  box-shadow: 0 10px 26px -14px rgba(7, 59, 76, .45);
  transition: transform .22s ease, box-shadow .22s ease;
}
.upload-card:hover .upload-card-photo { transform: translateY(-4px); box-shadow: 0 18px 34px -14px rgba(7, 59, 76, .55); }
.upload-card-photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.upload-card figcaption { padding: 12px 4px 0; text-align: left; background: none; }
.upload-card figcaption strong {
  display: block; font-family: var(--sans); font-size: .96rem; color: var(--green-dark); font-weight: 700;
  line-height: 1.35;
}
.upload-card figcaption span { display: block; font-size: .72rem; color: var(--ink-soft); margin-top: 4px; }
.upload-actions { display: flex; gap: 8px; margin-top: 10px; }
.upload-dl, .upload-del {
  background: none; border: 1.5px solid var(--line); border-radius: 999px;
  font-family: var(--sans); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700; padding: 5px 14px; cursor: pointer; transition: all .2s ease;
}
.upload-dl { color: var(--green); }
.upload-dl:hover { border-color: var(--green); background: var(--sky); }
.upload-dl:disabled { opacity: .6; cursor: default; }
.upload-del { color: var(--ink-soft); }
.upload-del:hover { border-color: var(--burgundy); color: var(--burgundy); }
@media (max-width: 880px) { .uploads-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .uploads-grid { grid-template-columns: 1fr; } }

/* album tag — floats on the photo itself, top-left */
.upload-album-tag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: #fff; background: rgba(7, 59, 76, .68);
  backdrop-filter: blur(3px);
  border-radius: 999px; padding: 4px 11px;
}

/* album filter bar above the live-upload grid (mirrors .filters) */
.upload-filters { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.upload-filters button {
  font-family: var(--sans); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
  background: var(--white); border: 2px solid var(--line); color: var(--ink-soft);
  padding: 9px 18px; border-radius: 999px; cursor: pointer; transition: all .2s ease; font-weight: 700;
}
.upload-filters button:hover { border-color: var(--gold); color: var(--green-dark); }
.upload-filters button.active { background: var(--green); border-color: var(--green); color: #fff; }
.upload-filters .uf-count { opacity: .75; font-weight: 600; }

/* ---- album picker: scroll-wheel modal ---- */
.album-modal {
  position: fixed; inset: 0; z-index: 105; display: none;
  background: rgba(7, 39, 50, .55); place-items: center; padding: 24px;
}
.album-modal.open { display: grid; }
.album-modal-card {
  background: var(--white); border: 2px solid var(--gold-soft); border-radius: 20px;
  max-width: 360px; width: 100%; padding: 30px 28px 26px; text-align: center;
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
.album-modal-card h3 { margin-bottom: 4px; }
.album-modal-sub { font-size: .86rem; color: var(--ink-soft); margin-bottom: 18px; }

.wheel-mask {
  position: relative; height: 132px; overflow: hidden; margin: 0 auto 18px;
  border-radius: 14px; background: var(--cream);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 104px, transparent 132px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 104px, transparent 132px);
}
.wheel {
  height: 132px; overflow-y: scroll; scroll-snap-type: y mandatory;
  padding: 44px 0; -webkit-overflow-scrolling: touch;
}
.wheel::-webkit-scrollbar { display: none; }
.wheel-row {
  height: 44px; display: flex; align-items: center; justify-content: center;
  scroll-snap-align: center; font-family: var(--sans); font-weight: 600; font-size: .92rem;
  color: var(--ink-soft); transition: color .15s ease, font-size .15s ease, font-weight .15s ease;
}
.wheel-row.is-center { color: var(--green-dark); font-weight: 700; font-size: 1.05rem; }
.wheel-highlight {
  position: absolute; left: 8px; right: 8px; top: 44px; height: 44px;
  border-top: 2px solid var(--gold-soft); border-bottom: 2px solid var(--gold-soft);
  pointer-events: none;
}

.album-caption-input {
  width: 100%; font-family: var(--sans); font-size: .95rem; color: var(--ink);
  padding: 12px 16px; border: 2px solid var(--line); border-radius: 999px;
  background: var(--cream); margin-bottom: 20px; text-align: center;
}
.album-caption-input:focus { outline: none; border-color: var(--green); }
.album-modal-actions { display: flex; gap: 10px; justify-content: center; }
.album-modal-actions .btn { flex: 1; padding: 12px 16px; font-size: .74rem; }

/* =====================================================================
   APP CHROME — tab bar, more sheet, install
   ===================================================================== */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: none; justify-content: space-around; align-items: stretch;
  background: rgba(7, 59, 76, .97);
  backdrop-filter: blur(10px);
  border-top: 3px solid var(--gold);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 4px 8px; color: rgba(215,243,245,.66); font-size: .6rem;
  letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  border-top: 3px solid transparent; margin-top: -3px; transition: color .2s ease;
}
.tab .tab-ico { font-size: 1.3rem; line-height: 1; position: relative; }
.tab.active { color: var(--gold-soft); border-top-color: var(--gold-soft); }
.tab:hover { color: #fff; }

/* install-help modal (reachable from the More menu inside the app) */
.help-modal {
  position: fixed; inset: 0; z-index: 110; display: none;
  background: rgba(7, 39, 50, .55); place-items: center; padding: 24px;
}
.help-modal.open { display: grid; }
.help-card {
  background: var(--white); border: 2px solid var(--gold-soft); border-radius: 20px;
  max-width: 400px; width: 100%; padding: 28px 26px 26px; position: relative;
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
.help-card h3 { margin-bottom: 4px; }
.help-sub { font-size: .86rem; color: var(--ink-soft); margin-bottom: 18px; }
.help-way {
  background: var(--cream); border-radius: 12px; padding: 12px 14px;
  font-size: .88rem; color: var(--ink-soft); line-height: 1.55; margin-bottom: 10px;
}
.help-way strong { color: var(--green-dark); }
.help-close {
  position: absolute; top: 10px; right: 16px; background: none; border: 0;
  font-size: 1.8rem; color: var(--ink-soft); cursor: pointer; line-height: 1;
}

/* push-notification opt-in button + foreground toast */
.push-btn.is-on { border-color: var(--palm); color: var(--palm); }
.push-toast {
  position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 20px);
  z-index: 120; max-width: 90vw;
  background: var(--green-dark); color: #fff; font-family: var(--sans);
  font-size: .9rem; font-weight: 600; padding: 12px 20px; border-radius: 999px;
  box-shadow: 0 14px 30px -10px rgba(7,59,76,.6);
  opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
.push-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* new-activity badge — a coral dot on the Chat / Photos tab & nav link */
.tab.has-badge .tab-ico::after,
.nav-links a.has-badge::before {
  content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: var(--coral); box-shadow: 0 0 0 2px var(--green-dark);
}
.tab.has-badge .tab-ico::after { top: -3px; right: -8px; }
.nav-links a.has-badge { position: relative; }
.nav-links a.has-badge::before {
  top: -2px; right: -12px; box-shadow: 0 0 0 2px var(--cream);
}
@media (max-width: 880px) {
  .tabbar { display: flex; }
  body.has-tabbar { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0)); }
  body.has-tabbar .install-pill { bottom: calc(78px + env(safe-area-inset-bottom, 0)); }
}

.more-sheet {
  position: fixed; inset: 0; z-index: 95; display: none;
  background: rgba(7, 39, 50, .55);
}
.more-sheet.open { display: block; }
.more-card {
  position: absolute; left: 0; right: 0;
  bottom: calc(58px + env(safe-area-inset-bottom, 0));
  background: var(--cream); border-radius: 24px 24px 0 0;
  padding: 14px 22px calc(20px + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -18px 50px rgba(0,0,0,.35);
  animation: sheet-up .28s ease;
}
@keyframes sheet-up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.more-grab { width: 42px; height: 5px; border-radius: 3px; background: var(--gold-soft); margin: 0 auto 12px; }
.more-card h3 { margin-bottom: 8px; }
.more-link {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 13px 4px; border: 0; border-bottom: 2px dashed var(--line);
  background: none; text-align: left; cursor: pointer;
  font-family: var(--sans); font-size: 1rem; font-weight: 700; color: var(--ink);
}
.more-link:last-child { border-bottom: 0; }
.more-link.active { color: var(--coral); }
.more-ico { width: 30px; text-align: center; font-size: 1.15rem; }
.more-logout { color: var(--burgundy); }

.install-pill {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 90;
  font-family: var(--sans); font-weight: 700; font-size: .88rem; letter-spacing: .02em;
  background: var(--coral); color: #fff; border: 2px solid var(--gold-soft);
  border-radius: 999px; padding: 13px 26px; cursor: pointer;
  box-shadow: 0 12px 30px -8px rgba(7,59,76,.5);
  animation: pill-in .5s ease;
}
.install-pill:hover { background: var(--burgundy); }
@keyframes pill-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.app-install-grid .card h3 { margin-bottom: 14px; }
.install-steps { margin: 0 0 0 20px; display: grid; gap: 9px; color: var(--ink-soft); }
.install-steps strong { color: var(--green-dark); }
.ios-share {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border: 2px solid var(--gold); border-radius: 6px; color: var(--green); font-size: .8rem;
}