/*
Theme Name: Midhusa Legacy
Theme URI: https://midhusa.com
Author: Midhusa's Family
Description: A WordPress-only living legacy website for Midhusa with age-based themes, secure passcode upload, public/private visibility, and image SEO.
Version: 13.0.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: Private
Text Domain: midhusa-legacy
*/

/* ════════════════════════════════════════
   RESET
════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { min-height: 100vh; overflow-x: hidden; transition: background 0.7s ease; }
button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; height: auto; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { border-radius: 3px; }

/* ════════════════════════════════════════
   CHILDHOOD THEME (default)
════════════════════════════════════════ */
body,
body.childhood {
  --bg: linear-gradient(160deg,#fff0f7 0%,#fff8ee 50%,#f5eeff 100%);
  --bg-solid: #fff4fb;
  --card: rgba(255,255,255,0.92);
  --card-border: rgba(240,140,180,0.22);
  --accent: #e8679a;
  --accent-light: #ffeef5;
  --text: #3d1f35;
  --muted: #b07890;
  --nav-bg: rgba(255,255,255,0.95);
  --tag-bg: #ffeef5; --tag-c: #c0507a;
  --section-bg: rgba(255,240,248,0.7);
  font-family: 'Nunito', sans-serif;
  background: var(--bg);
  color: var(--text);
}
body.childhood ::-webkit-scrollbar-thumb { background: #e8679a; }

/* ════════════════════════════════════════
   TEENAGE THEME
════════════════════════════════════════ */
body.teenage {
  --bg: linear-gradient(135deg,#0c0b1a 0%,#110e2a 50%,#081520 100%);
  --bg-solid: #0e0c20;
  --card: rgba(255,255,255,0.07);
  --card-border: rgba(140,120,240,0.22);
  --accent: #9b8fee;
  --accent-light: rgba(155,143,238,0.14);
  --text: #e4dcff;
  --muted: #7868a8;
  --nav-bg: rgba(15,12,30,0.95);
  --tag-bg: rgba(155,143,238,0.15); --tag-c: #c0b4f8;
  --section-bg: rgba(255,255,255,0.03);
  font-family: 'Jost', sans-serif;
  background: var(--bg);
  color: var(--text);
}
body.teenage ::-webkit-scrollbar-thumb { background: #9b8fee; }

/* ════════════════════════════════════════
   ADULT THEME
════════════════════════════════════════ */
body.adult {
  --bg: linear-gradient(150deg,#faf7f2 0%,#f5f0e8 50%,#faf8f4 100%);
  --bg-solid: #faf7f2;
  --card: rgba(255,255,255,0.94);
  --card-border: rgba(180,145,90,0.2);
  --accent: #b8905a;
  --accent-light: #fdf5ea;
  --text: #2e2418;
  --muted: #9b8870;
  --nav-bg: rgba(250,247,242,0.97);
  --tag-bg: #fdf5ea; --tag-c: #8b6830;
  --section-bg: rgba(250,245,236,0.7);
  font-family: 'Jost', sans-serif;
  background: var(--bg);
  color: var(--text);
}
body.adult ::-webkit-scrollbar-thumb { background: #b8905a; }


/* ════════════════════════════════════════
   TOPBAR
════════════════════════════════════════ */
.topbar {
  position: sticky; top: 0; z-index: 200;
  background: var(--nav-bg);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 0.5px solid var(--card-border);
  padding: 0 16px; height: 56px;
  display: flex; align-items: center; gap: 0;
  z-index: 200;
}
.topbar-logo { display: flex; align-items: center; gap: 8px; margin-right: 12px; flex-shrink: 0; }
.logo-emoji { font-size: 20px; }
.logo-text { font-size: 15px; font-weight: 800; color: var(--accent); }

/* Hamburger */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 6px;
  margin-left: auto; flex-shrink: 0;
}
.hamburger span { display: block; width: 22px; height: 2px; background: var(--muted); border-radius: 2px; transition: all 0.3s; }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

.topbar-tabs {
  display: flex; gap: 0; flex: 1;
  overflow-x: auto; scrollbar-width: none;
}
.topbar-tabs::-webkit-scrollbar { display: none; }

.tab {
  padding: 0 12px; height: 56px;
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; color: var(--muted);
  border: none; border-bottom: 2.5px solid transparent;
  background: transparent; cursor: pointer; white-space: nowrap;
  transition: all 0.2s; font-family: inherit; letter-spacing: 0.02em;
}
.tab:hover { color: var(--accent); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.topbar-actions { display: flex; gap: 5px; align-items: center; flex-shrink: 0; margin-left: auto; }
.theme-switcher { display: flex; gap: 3px; }
.ts-btn {
  padding: 4px 9px; border-radius: 20px; font-size: 10px; font-weight: 700;
  border: 1px solid var(--card-border); background: transparent;
  color: var(--muted); cursor: pointer; transition: all 0.2s; font-family: inherit;
}
.ts-btn:hover, .ts-btn.active { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }

.gravity-toggle, .motion-toggle {
  padding: 4px 9px; border-radius: 20px; font-size: 10px; font-weight: 700;
  border: 1px solid var(--card-border); background: transparent;
  color: var(--muted); cursor: pointer; transition: all 0.2s; font-family: inherit;
  white-space: nowrap;
}
.gravity-toggle:hover, .motion-toggle:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
.gravity-toggle.on, .motion-toggle.on { background: var(--accent); border-color: var(--accent); color: white; }

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
.hero {
  position: relative; z-index: 1;
  padding: 36px 28px 28px;
  display: grid; grid-template-columns: 1fr auto;
  gap: 20px; align-items: center;
  max-width: 1100px; margin: 0 auto;
}
.hero-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.hero-name { font-size: clamp(30px,5vw,54px); font-weight: 300; line-height: 1.08; color: var(--text); }
body.childhood .hero-name { font-family: 'Fredoka One', cursive; font-weight: 400; font-size: clamp(26px,4vw,44px); }
body.teenage .hero-name { font-family: 'Cormorant Garamond', serif; font-style: italic; }
body.adult   .hero-name { font-family: 'Playfair Display', serif; font-weight: 400; }
.hero-sub { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.7; max-width: 540px; }
.hero-stats { display: flex; gap: 20px; margin-top: 18px; flex-wrap: wrap; }
.hstat { text-align: center; }
.hstat-num { font-size: 24px; font-weight: 800; color: var(--accent); line-height: 1; }
.hstat-lbl { font-size: 10px; color: var(--muted); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; }
.hero-badge {
  width: 100px; height: 100px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 8px var(--accent-light);
  flex-shrink: 0; animation: badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse { 0%,100%{box-shadow:0 0 0 8px var(--accent-light);}50%{box-shadow:0 0 0 14px var(--accent-light);} }
.badge-emoji { font-size: 34px; }
.badge-lbl { font-size: 9px; font-weight: 700; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; }

/* ════════════════════════════════════════
   SECTIONS
════════════════════════════════════════ */
.main-content { position: relative; z-index: 1; }
.section { max-width: 1100px; margin: 0 auto; padding: 0 28px 44px; display: none; }
.section.active { display: block; animation: sIn 0.35s ease both; }
@keyframes sIn { from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);} }

.section-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 22px; padding-bottom: 12px;
  border-bottom: 0.5px solid var(--card-border); flex-wrap: wrap;
}
.sh-icon { font-size: 20px; }
.sh-title { font-size: 18px; font-weight: 700; color: var(--text); flex: 1; min-width: 120px; }
body.adult  .sh-title,
body.teenage .sh-title { font-family: 'Playfair Display', serif; font-weight: 400; }
.sh-count { font-size: 11px; color: var(--muted); font-weight: 600; }
.add-btn {
  padding: 6px 14px; border-radius: 20px; font-size: 11px; font-weight: 700;
  border: 1px solid var(--accent); background: var(--accent-light);
  color: var(--accent); cursor: pointer; font-family: inherit;
  transition: all 0.2s; white-space: nowrap;
}
.add-btn:hover { background: var(--accent); color: white; }

/* ════════════════════════════════════════
   PHOTO GRID
════════════════════════════════════════ */
.filter-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.filter-pill {
  padding: 5px 13px; border-radius: 20px; font-size: 11px; font-weight: 700;
  border: 1px solid var(--card-border); background: transparent;
  color: var(--muted); cursor: pointer; transition: all 0.2s; font-family: inherit;
}
.filter-pill.active { background: var(--accent); border-color: var(--accent); color: white; }
.filter-pill:hover:not(.active) { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px,1fr));
  gap: 12px;
}
.photo-card {
  border-radius: 13px; overflow: hidden; cursor: pointer;
  border: 0.5px solid var(--card-border); background: var(--card);
  transition: transform 0.25s, box-shadow 0.25s;
  animation: cIn 0.4s ease both;
}
.photo-card:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(0,0,0,0.14); }
@keyframes cIn { from{opacity:0;transform:scale(0.95);}to{opacity:1;transform:scale(1);} }
.photo-thumb {
  aspect-ratio: 4/3; width: 100%;
  display: flex; align-items: center; justify-content: center; font-size: 44px;
  position: relative;
}
.photo-thumb::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,transparent 60%,rgba(0,0,0,0.22) 100%);
}
.photo-info { padding: 9px 11px; }
.photo-title { font-size: 11px; font-weight: 700; color: var(--text); margin-bottom: 4px; line-height: 1.35; }
.photo-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 3px; }
.photo-date { font-size: 10px; color: var(--muted); font-weight: 600; }
.photo-tag {
  font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 10px;
  background: var(--tag-bg); color: var(--tag-c);
  letter-spacing: 0.04em; text-transform: uppercase;
}

/* ════════════════════════════════════════
   TIMELINE
════════════════════════════════════════ */
.tl-year-group { margin-bottom: 28px; }
.tl-year-label {
  font-size: 12px; font-weight: 800; color: var(--accent);
  letter-spacing: 0.08em; margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}
.tl-year-label::after { content: ''; flex: 1; height: 1px; background: var(--card-border); }
.tl-entries { display: flex; flex-direction: column; gap: 8px; }
.tl-entry {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 14px; border-radius: 13px;
  background: var(--card); border: 0.5px solid var(--card-border);
  cursor: pointer; transition: all 0.2s;
}
.tl-entry:hover { border-color: var(--accent); transform: translateX(4px); }
.tl-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--accent-light); border: 1px solid var(--card-border);
  display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.tl-body { flex: 1; min-width: 0; }
.tl-title { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.tl-desc  { font-size: 11px; color: var(--muted); line-height: 1.55; }
.tl-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.tl-date  { font-size: 10px; color: var(--muted); font-weight: 600; }

/* ════════════════════════════════════════
   LETTERS VAULT
════════════════════════════════════════ */
.letters-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 14px; }
.letter-card {
  border-radius: 15px; padding: 18px; cursor: pointer;
  transition: all 0.28s; position: relative; overflow: hidden; border: 1.5px solid;
}
.letter-card.sealed {
  background: linear-gradient(135deg,#fff8e8,#fdf0cc);
  border-color: #d4a830; box-shadow: 0 5px 20px rgba(180,140,0,0.14);
}
.letter-card.opened {
  background: var(--card); border-color: var(--accent);
  box-shadow: 0 5px 20px rgba(0,0,0,0.07);
}
.letter-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,0.15); }
.letter-age-circle {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; margin-bottom: 10px;
}
.letter-card.sealed .letter-age-circle { background: #ffefc0; border: 2px solid #d4a830; color: #7a5000; }
.letter-card.opened .letter-age-circle { background: var(--accent-light); border: 2px solid var(--accent); color: var(--accent); }
.letter-from { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 5px; }
.letter-card.sealed .letter-from { color: #9a7020; }
.letter-card.opened .letter-from { color: var(--accent); }
.letter-title { font-size: 13px; font-weight: 700; margin-bottom: 4px; line-height: 1.4; }
.letter-card.sealed .letter-title { color: #3a2010; font-family: 'Dancing Script', cursive; font-size: 15px; }
.letter-card.opened .letter-title { color: var(--text); }
.letter-status { font-size: 10px; font-weight: 600; }
.letter-card.sealed .letter-status { color: #9a7020; }
.letter-card.opened .letter-status { color: var(--muted); }
.wax-seal-el {
  position: absolute; bottom: 12px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  animation: waxP 2.5s ease-in-out infinite;
}
@keyframes waxP { 0%,100%{box-shadow:0 2px 8px rgba(180,0,0,0.3);}50%{box-shadow:0 2px 18px rgba(220,0,0,0.7);} }
.write-letter-cta {
  border: 2px dashed var(--card-border); border-radius: 15px;
  padding: 22px; text-align: center; cursor: pointer;
  transition: all 0.25s; display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.write-letter-cta:hover { border-color: var(--accent); background: var(--accent-light); }
.wl-icon { font-size: 26px; }
.wl-t { font-size: 13px; font-weight: 700; color: var(--text); }
.wl-s { font-size: 11px; color: var(--muted); }

/* ════════════════════════════════════════
   TRAVEL
════════════════════════════════════════ */
.travel-map-wrap {
  background: var(--section-bg); border: 0.5px solid var(--card-border);
  border-radius: 14px; padding: 18px; margin-bottom: 22px;
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: start;
}
.map-visual {
  width: 100%; height: 150px; border-radius: 10px;
  background: linear-gradient(135deg,#d4c890,#c8b870,#bfa850);
  position: relative; overflow: hidden;
}
.map-visual::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='150'%3E%3Cpath d='M30 55 Q60 28 95 46 Q120 60 130 42 L145 38 Q165 52 158 70 Q150 88 130 82 Q110 95 90 85 Q65 98 45 88 Q22 76 30 55Z' fill='%23a89840' opacity='0.55'/%3E%3Cpath d='M170 26 Q200 13 230 30 Q250 20 275 36 L280 58 Q268 76 242 66 Q218 80 198 68 Q175 56 170 26Z' fill='%23a89840' opacity='0.5'/%3E%3Cpath d='M300 38 Q330 23 360 42 L392 68 Q378 84 355 75 Q332 88 312 75 Q293 65 300 38Z' fill='%23a89840' opacity='0.45'/%3E%3C/svg%3E") no-repeat center/cover;
}
.map-pin-dot { position: absolute; cursor: pointer; transition: transform 0.2s; display: flex; flex-direction: column; align-items: center; }
.map-pin-dot:hover { transform: scale(1.3); }
.pin-emoji { font-size: 17px; animation: pinB 2s ease-in-out infinite; }
@keyframes pinB { 0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);} }
.pin-lbl { font-size: 8px; font-weight: 700; background: rgba(0,0,0,0.68); color: white; padding: 1px 5px; border-radius: 3px; white-space: nowrap; margin-top: 1px; }
.travel-stats-col { display: flex; flex-direction: column; gap: 8px; min-width: 110px; }
.t-stat { background: var(--card); border: 0.5px solid var(--card-border); border-radius: 9px; padding: 9px 12px; text-align: center; }
.t-stat-num { font-size: 20px; font-weight: 800; color: var(--accent); }
.t-stat-lbl { font-size: 9px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.travel-entries { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 12px; }
.trip-card { border-radius: 13px; overflow: hidden; cursor: pointer; border: 0.5px solid var(--card-border); background: var(--card); transition: all 0.25s; }
.trip-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.trip-cover { height: 85px; display: flex; align-items: center; justify-content: center; font-size: 38px; }
.trip-body { padding: 10px 12px; }
.trip-name { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.trip-meta { font-size: 10px; color: var(--muted); }

/* ════════════════════════════════════════
   WRITINGS
════════════════════════════════════════ */
.writings-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 14px; }
.writing-card { background: var(--card); border: 0.5px solid var(--card-border); border-radius: 13px; padding: 18px; cursor: pointer; transition: all 0.25s; }
.writing-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.writing-type { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 7px; }
.writing-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 9px; line-height: 1.35; }
body.teenage .writing-title, body.adult .writing-title { font-family: 'Playfair Display', serif; font-weight: 400; font-style: italic; }
.writing-excerpt { font-size: 12px; color: var(--muted); line-height: 1.75; border-left: 2px solid var(--accent); padding-left: 10px; font-style: italic; }
body.teenage .writing-excerpt, body.adult .writing-excerpt { font-family: 'Cormorant Garamond', serif; font-size: 13px; }
.writing-footer { margin-top: 11px; display: flex; justify-content: space-between; align-items: center; }
.writing-date { font-size: 10px; color: var(--muted); font-weight: 600; }

/* ════════════════════════════════════════
   AI HIGHLIGHTS
════════════════════════════════════════ */
.age-progression { background: var(--section-bg); border: 0.5px solid var(--card-border); border-radius: 13px; padding: 18px; margin-bottom: 20px; }
.ap-title { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 14px; }
.ap-row { display: flex; align-items: center; }
.ap-node { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; transition: all 0.2s; }
.ap-node:hover .ap-circle { border-color: var(--accent); transform: scale(1.1); }
.ap-circle { width: 46px; height: 46px; border-radius: 50%; background: var(--accent-light); border: 2px solid var(--card-border); display: flex; align-items: center; justify-content: center; font-size: 20px; transition: all 0.2s; }
.ap-circle.has-photo { border-color: var(--accent); }
.ap-label { font-size: 9px; color: var(--muted); font-weight: 600; }
.ap-line { flex: 0.3; height: 1.5px; background: var(--card-border); margin-bottom: 18px; }
.highlights-hero { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 14px; }
.highlight-reel { border-radius: 12px; overflow: hidden; border: 0.5px solid var(--card-border); background: var(--card); cursor: pointer; transition: all 0.25s; }
.highlight-reel:hover { transform: scale(1.03); border-color: var(--accent); }
.reel-thumb { height: 95px; display: flex; align-items: center; justify-content: center; font-size: 38px; position: relative; }
.reel-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.2); opacity: 0; transition: opacity 0.2s; }
.highlight-reel:hover .reel-play { opacity: 1; }
.play-icon { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.reel-info { padding: 9px 11px; }
.reel-title { font-size: 11px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.reel-sub { font-size: 10px; color: var(--muted); }

/* ════════════════════════════════════════
   V4.0 - LIVE AGE COUNTER
════════════════════════════════════════ */
.age-counter-wrap { margin-bottom: 24px; padding: 0 28px; max-width: 1100px; margin-left: auto; margin-right: auto; position: relative; z-index: 10; }
.age-counter { background: var(--card); border: 0.5px solid var(--card-border); border-radius: 18px; padding: 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.age-counter-icon { font-size: 42px; }
.age-counter-digits { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.age-digit-group { text-align: center; min-width: 45px; }
.age-digit-num { font-size: 28px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.age-digit-num.tick { animation: popTick 0.3s ease-out; }
@keyframes popTick { 0% { transform: scale(1.2); color: var(--text); } 100% { transform: scale(1); } }
.age-digit-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em; }
.age-counter-sep { color: var(--card-border); font-size: 24px; font-weight: 300; padding-bottom: 15px; }
.age-counter-message { flex: 1; min-width: 200px; padding-left: 10px; }
.age-counter-headline { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.age-counter-sub { font-size: 12px; color: var(--muted); }
.age-counter-milestone { display: inline-block; background: var(--accent-light); color: var(--accent); padding: 4px 8px; border-radius: 8px; font-size: 11px; font-weight: 700; margin-top: 8px; }
.age-ring-wrap { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.age-ring-svg { transform: rotate(-90deg); }
.age-ring-bg { fill: none; stroke: var(--card-border); stroke-width: 6; }
.age-ring-fill { fill: none; stroke: var(--accent); stroke-width: 6; stroke-dasharray: 176; stroke-linecap: round; transition: stroke-dashoffset 1s ease-out; }
.age-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.age-ring-label strong { font-size: 12px; color: var(--accent); }
.age-ring-label span { font-size: 7px; color: var(--muted); text-transform: uppercase; }

/* ════════════════════════════════════════
   V4.0 - SLAM BOOK (COMPLETE & 3D)
════════════════════════════════════════ */
/* 1. Slam Book Cover & Wrap (3D FLIP) */
.slambook-wrap { perspective: 1500px; display: flex; justify-content: center; margin: 20px 0 40px; }
.slambook { width: 280px; height: 380px; position: relative; transform-style: preserve-3d; transition: transform 0.6s; cursor: pointer; }
.slambook:hover { transform: rotateY(-5deg) scale(1.02); }

.slambook-cover { 
    position: absolute; inset: 0; background: var(--card); 
    border: 1px solid var(--card-border); border-radius: 4px 20px 20px 4px; 
    box-shadow: inset 4px 0 10px rgba(0,0,0,0.05), 10px 10px 30px rgba(0,0,0,0.15); 
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    text-align: center; padding: 20px; overflow: hidden;
    transform-origin: left center; 
    transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.5s 0.3s ease; 
}

.slambook.is-open .slambook-cover {
    transform: rotateY(-160deg); 
    opacity: 0; 
    pointer-events: none;
}

.slambook-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 24px; background: var(--accent); writing-mode: vertical-rl; text-align: center; color: #fff; font-size: 10px; font-weight: bold; letter-spacing: 2px; display: flex; align-items: center; justify-content: center; border-radius: 3px 0 0 3px; box-shadow: inset -2px 0 5px rgba(0,0,0,0.2); }
.slambook-sticker { position: absolute; font-size: 24px; animation: floatSticker 3s ease-in-out infinite alternate; }
@keyframes floatSticker { 0% { transform: translateY(0) rotate(-5deg); } 100% { transform: translateY(-5px) rotate(5deg); } }
.slambook-cover-inner { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding-left: 15px; }
.slambook-title { font-size: 26px; font-weight: 800; color: var(--text); margin-bottom: 5px; line-height: 1.2; font-family: 'Fredoka One', cursive; margin-top: 15px; }
.slambook-subtitle { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.slambook-cover-emoji { font-size: 60px; margin: 30px 0; }
.slambook-cover-footer { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.slambook-count { font-size: 12px; font-weight: 600; color: var(--accent); }
.slambook-open-btn { padding: 8px 20px; background: var(--accent); color: #fff; border: none; border-radius: 20px; font-weight: 700; cursor: pointer; font-size: 13px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: transform 0.2s; }
.slambook-open-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.2); }

/* 2. Slam Book Opened Grid (The inner pages) */
.slambook-pages { display: none; background: var(--card); border-radius: 20px; padding: 24px; border: 0.5px solid var(--card-border); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.slambook-pages.open { display: block; animation: cIn 0.5s ease both; }
.slambook-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; border-bottom: 1px solid var(--card-border); padding-bottom: 15px; }
.slambook-toolbar-title { font-size: 18px; font-weight: 700; color: var(--text); flex: 1; }
.sb-view-btns { display: flex; background: var(--section-bg); border: 1px solid var(--card-border); border-radius: 8px; overflow: hidden; }
.sb-view-btn { background: transparent; border: none; padding: 6px 14px; font-size: 16px; cursor: pointer; color: var(--muted); transition: all 0.2s; }
.sb-view-btn.active { background: var(--accent-light); color: var(--accent); }
.sbpages-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.sbpages-grid.list-view { grid-template-columns: 1fr; }

/* 3. Slam Book Cards (The Photos/Tiles) */
.sbpage-card { background: var(--bg-solid); border-radius: 12px; overflow: hidden; border: 1px solid var(--card-border); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.sbpage-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 10px 25px rgba(0,0,0,0.08); }
.sbpage-card.polaroid { background: #fff; padding: 12px 12px 24px; border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,0.08); border: none; }
.sbpage-card.list-card { display: flex; flex-direction: row; align-items: center; padding: 14px; gap: 18px; }
.sbpage-card.list-card .sb-media { width: 90px; height: 90px; border-radius: 8px; flex-shrink: 0; }
.sb-media { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 48px; position: relative; border-radius: 8px 8px 0 0; }
.polaroid .sb-media { border-radius: 4px; }
.sb-video-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; }
.sb-play-btn { width: 44px; height: 44px; background: rgba(255,255,255,0.85); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--accent); }
.sb-media-label { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.9); padding: 4px 10px; border-radius: 12px; font-size: 10px; font-weight: bold; color: var(--text); }
.sb-info { padding: 14px; }
.sb-caption { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 6px; }
.sb-date-tag { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.sb-tag-pill { background: var(--tag-bg); color: var(--tag-c); padding: 3px 8px; border-radius: 8px; font-weight: bold; font-size: 9px; }
.sb-handnote { font-family: 'Dancing Script', cursive; font-size: 18px; color: var(--accent); line-height: 1.3; margin-top: 12px; border-top: 1px dashed var(--card-border); padding-top: 10px; }
.sb-add-page { border: 2px dashed var(--card-border); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 220px; cursor: pointer; color: var(--muted); transition: all 0.2s; background: var(--section-bg); }
.sb-add-page:hover { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
.sb-add-icon { font-size: 36px; }
.sb-add-text { font-weight: 700; font-size: 15px; }
.sb-add-sub { font-size: 11px; }

/* ════════════════════════════════════════
   MODALS
════════════════════════════════════════ */
.modal-overlay, .sbmodal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.52);
  z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 14px; opacity: 0; pointer-events: none; transition: opacity 0.3s;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.modal-overlay.open, .sbmodal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box, .sbmodal-box {
  background: var(--bg-solid); border: 1px solid var(--card-border);
  border-radius: 18px; padding: 28px; max-width: 460px; width: 100%;
  transform: scale(0.9) translateY(20px); transition: all 0.3s;
  box-shadow: 0 28px 70px rgba(0,0,0,0.22); position: relative;
  max-height: 90vh; overflow-y: auto;
}
.modal-overlay.open .modal-box, .sbmodal-overlay.open .sbmodal-box { transform: scale(1) translateY(0); }
.modal-close, .sbmodal-close { position: absolute; top: 18px; right: 20px; background: none; border: none; color: var(--muted); font-size: 22px; cursor: pointer; transition: color 0.2s; }
.modal-close:hover, .sbmodal-close:hover { color: var(--accent); }
.modal-title, .sbmodal-title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.modal-sub, .sbmodal-sub { font-size: 13px; color: var(--muted); margin-bottom: 20px; line-height: 1.65; }

/* Form Fields */
.form-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); display: block; margin-bottom: 6px; }
.form-select, .form-input, .form-textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--card-border); background: var(--accent-light);
  color: var(--text); font-family: inherit; font-size: 14px;
  outline: none; transition: border-color 0.2s, background 0.2s; margin-bottom: 16px;
}
.form-textarea { font-style: italic; resize: vertical; line-height: 1.7; min-height: 80px; }
.form-select:focus, .form-input:focus, .form-textarea:focus { border-color: var(--accent); background: var(--bg-solid); box-shadow: 0 0 0 3px rgba(232, 103, 154, 0.15); }

/* Slam Book Specific Form Elements */
.sb-type-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.sb-type-btn { padding: 10px 18px; background: var(--bg-solid); border: 1px solid var(--card-border); border-radius: 20px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--muted); transition: all 0.2s; font-family: inherit; }
.sb-type-btn.selected { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
.sb-emoji-picker { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.sb-emoji-opt { font-size: 28px; background: transparent; border: 2px solid transparent; border-radius: 50%; padding: 6px; cursor: pointer; transition: transform 0.2s; }
.sb-emoji-opt:hover { transform: scale(1.15); }
.sb-emoji-opt.selected { background: var(--accent-light); border-color: var(--accent); }

/* Modal Buttons */
.modal-btns { display: flex; gap: 10px; margin-top: 10px; }
.mbtn-cancel { flex: 1; padding: 12px; border-radius: 10px; border: 1px solid var(--card-border); background: transparent; color: var(--muted); cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; transition: all 0.2s; }
.mbtn-cancel:hover { border-color: var(--accent); color: var(--accent); }
.mbtn-primary { flex: 2; padding: 12px; border-radius: 10px; border: none; background: var(--accent); color: white; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; transition: opacity 0.2s, transform 0.2s; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.mbtn-primary:hover { opacity: 0.9; transform: translateY(-1px); }

/* ════════════════════════════════════════
   LIGHTBOXES
════════════════════════════════════════ */
.lightbox, .sb-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.88); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 14px; opacity: 0; pointer-events: none; transition: opacity 0.3s; backdrop-filter: blur(8px); }
.lightbox.open, .sb-lightbox.open { opacity: 1; pointer-events: all; }

/* Standard Lightbox */
.lb-content { background: var(--bg-solid); border-radius: 18px; padding: 24px; max-width: 480px; width: 100%; text-align: center; transform: scale(0.9); transition: all 0.3s; position: relative; }
.lightbox.open .lb-content { transform: scale(1); }
.lb-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--muted); font-size: 22px; cursor: pointer; }
.lb-emoji { font-size: 68px; margin-bottom: 12px; display: block; animation: lbF 3s ease-in-out infinite; }
@keyframes lbF { 0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);} }
.lb-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.lb-date  { font-size: 11px; color: var(--muted); margin-bottom: 10px; }
.lb-desc  { font-size: 13px; color: var(--muted); line-height: 1.7; }

/* Slam Book Lightbox */
.sb-lb-inner { background: var(--bg-solid); padding: 30px 20px 40px; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.4); text-align: center; max-width: 500px; width: 90%; position: relative; transform: scale(0.9); transition: all 0.3s; }
.sb-lightbox.open .sb-lb-inner { transform: scale(1) rotate(-1deg); }
.sb-lb-close { position: absolute; top: -45px; right: 0; background: none; border: none; color: #fff; font-size: 34px; cursor: pointer; transition: color 0.2s; }
.sb-lb-close:hover { color: var(--accent); }
.sb-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.15); border: none; color: #fff; font-size: 32px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; transition: background 0.2s, transform 0.2s; backdrop-filter: blur(4px); }
.sb-lb-nav:hover { background: var(--accent); transform: translateY(-50%) scale(1.1); }
.sb-lb-prev { left: -70px; }
.sb-lb-next { right: -70px; }
.sb-lb-media { display: block; font-size: 120px; background: var(--card); border: 1px solid var(--card-border); padding: 40px; border-radius: 12px; margin-bottom: 24px; box-shadow: inset 0 0 20px rgba(0,0,0,0.03); }
.sb-lb-caption { font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 12px; font-family: 'Fredoka One', cursive; }
.sb-lb-note { font-family: 'Dancing Script', cursive; font-size: 26px; color: var(--accent); line-height: 1.3; margin-bottom: 20px; }
.sb-lb-meta { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }


/* ════════════════════════════════════════
   TOAST
════════════════════════════════════════ */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--text); color: var(--accent-light); font-size: 12px; font-weight: 700; padding: 10px 22px; border-radius: 22px; z-index: 3000; transition: transform 0.4s cubic-bezier(.2,.8,.3,1); pointer-events: none; white-space: nowrap; font-family: inherit; box-shadow: 0 6px 24px rgba(0,0,0,0.2); }
.toast.show { transform: translateX(-50%) translateY(0); }


/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
.site-footer { position: relative; z-index: 1; text-align: center; padding: 18px 16px; font-size: 12px; color: var(--muted); border-top: 0.5px solid var(--card-border); }

/* ════════════════════════════════════════
   MOBILE
════════════════════════════════════════ */
@media (max-width: 768px) {
  .hamburger { display: flex; }
  .topbar-tabs, .topbar-actions {
    display: none; flex-direction: column;
    position: fixed; top: 56px; left: 0; right: 0;
    background: var(--nav-bg); border-bottom: 1px solid var(--card-border);
    padding: 10px 14px; gap: 6px; z-index: 190;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  }
  .topbar-tabs.open, .topbar-actions.open { display: flex; }
  .tab { height: 44px; width: 100%; justify-content: flex-start; padding: 0 12px; border-bottom: none; border-left: 3px solid transparent; }
  .tab.active { border-left-color: var(--accent); border-bottom: none; }
  .theme-switcher { width: 100%; }
  .ts-btn { flex: 1; text-align: center; }
  .hero { grid-template-columns: 1fr; padding: 18px 14px; gap: 14px; }
  .hero-badge { width: 80px; height: 80px; margin: 0 auto; }
  .badge-emoji { font-size: 28px; }
  .section { padding: 0 12px 32px; }
  .photo-grid { grid-template-columns: repeat(2,1fr); gap: 9px; }
  .letters-grid, .writings-grid { grid-template-columns: 1fr; }
  .travel-map-wrap { grid-template-columns: 1fr; }
  .travel-stats-col { flex-direction: row; flex-wrap: wrap; }
  .highlights-hero { grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); }
  .ap-circle { width: 36px; height: 36px; font-size: 16px; }
  .section-header { flex-wrap: wrap; }
  
  /* Mobile Adjustments for Age Counter & Slam Book */
  .age-counter { justify-content: center; text-align: center; }
  .age-counter-digits { justify-content: center; }
  .age-counter-message { text-align: center; padding-left: 0; margin-top: 10px; }
  .age-counter-sep { display: none; }
  .sb-lb-nav { top: auto; bottom: -60px; transform: none; font-size: 24px; padding: 10px; width: 44px; height: 44px; background: rgba(255,255,255,0.2); }
  .sb-lb-prev { left: 25%; }
  .sb-lb-next { right: 25%; }
  .slambook-toolbar-title { font-size: 15px; }
}

@media (max-width: 400px) {
  .photo-grid, .sbpages-grid { grid-template-columns: 1fr; }
  .ts-btn span { display: none; }
}

/* ════════════════════════════════════════
   V6 PERFECT PATCHES: responsive UI, SEO form, lightbox, age motion
════════════════════════════════════════ */
html[data-life-stage="storybook"] body.childhood,
body.midhusa-stage-storybook {
  --motion-name: storybookCardFloat;
}
html[data-life-stage="canvas"] body.teenage,
body.midhusa-stage-canvas {
  --motion-name: canvasSlidePop;
}
html[data-life-stage="professional"] body.adult,
body.midhusa-stage-professional {
  --motion-name: professionalFadeLift;
}

.topbar {
  position: sticky;
  top: 0;
  width: 100%;
}

.topbar-tabs, .topbar-actions { min-width: 0; }
.tab, .ts-btn, .motion-toggle { touch-action: manipulation; }

.photo-card {
  width: 100%;
  display: block;
  padding: 0;
  text-align: left;
  color: inherit;
  font: inherit;
}
.photo-card:focus-visible,
.lb-nav:focus-visible,
.lb-close:focus-visible,
.add-btn:focus-visible,
.tab:focus-visible,
.motion-toggle:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px 12px 0 0;
}
.photo-emoji {
  position: relative;
  z-index: 1;
}
.visibility-chip {
  font-size: 8px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: rgba(0,0,0,.06);
  color: var(--muted);
}
.visibility-public { background: rgba(17,153,142,.12); color: #11998e; }
.visibility-family { background: rgba(155,143,238,.16); color: #7767d8; }
.visibility-private { background: rgba(80,80,80,.12); color: #666; }
.empty-state {
  grid-column: 1 / -1;
  padding: 28px;
  border-radius: 18px;
  border: 1px dashed var(--card-border);
  background: var(--card);
  color: var(--muted);
  text-align: center;
}

.modal-box-wide { max-width: 620px; }
.passcode-card,
.visibility-box {
  border: 1px solid var(--card-border);
  background: var(--card);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}
.form-error {
  color: #d32f2f;
  font-size: 13px;
  margin-top: -8px;
  margin-bottom: 10px;
}
.full-btn { width: 100%; }
.tiny-note {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
  margin-top: -8px;
  margin-bottom: 12px;
}
.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.file-upload-zone {
  border: 2px dashed var(--accent);
  padding: 22px;
  text-align: center;
  border-radius: 16px;
  cursor: pointer;
  margin-bottom: 16px;
  background: var(--accent-light);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.file-upload-zone:hover { transform: translateY(-2px); background: var(--bg-solid); }
.fuz-icon { font-size: 32px; margin-bottom: 4px; }
.fuz-text { color: var(--accent); font-weight: 800; }
.fuz-help { margin-top: 4px; font-size: 11px; color: var(--muted); line-height: 1.5; }
.seo-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.seo-check input { margin-top: 2px; }
.sticky-actions {
  position: sticky;
  bottom: -28px;
  background: var(--bg-solid);
  padding-top: 12px;
  padding-bottom: 6px;
  border-top: 1px solid var(--card-border);
}

.lightbox {
  padding: clamp(10px, 2vw, 28px);
}
.lb-content {
  width: min(1120px, 96vw);
  max-width: 1120px;
  max-height: 94vh;
  overflow: hidden auto;
  padding: clamp(14px, 2vw, 24px);
}
.lb-img-wrap {
  width: 100%;
  min-height: 220px;
  max-height: 76vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.04);
  border-radius: 16px;
  margin-bottom: 18px;
  overflow: hidden;
}
#lb-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 76vh;
  object-fit: contain;
  display: block;
  border-radius: 14px;
}
.lb-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.56);
  color: #fff;
  font-size: 38px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2010;
  transition: transform .2s ease, background .2s ease;
}
.lb-nav:hover { background: var(--accent); transform: translateY(-50%) scale(1.06); }
.lb-prev { left: clamp(12px, 3vw, 34px); }
.lb-next { right: clamp(12px, 3vw, 34px); }
.lb-public-link {
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  margin-top: 12px;
}
.lb-public-link:hover { text-decoration: underline; }

.motion-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--nav-bg);
  border-top: 0.5px solid var(--card-border);
  padding: 10px 14px;
  display: none;
  z-index: 250;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.motion-bar.visible { display: flex; }
.motion-info { font-size: 12px; color: var(--muted); flex: 1; min-width: 180px; }
.age-motion-particle {
  position: fixed;
  pointer-events: none;
  z-index: 80;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.12));
  animation: storybookParticle 5s ease-out forwards;
}
.age-motion-particle.canvas { animation-name: canvasParticle; }
.age-motion-particle.professional { animation-name: professionalParticle; }
body.motion-on .section.active .photo-card,
body.motion-on .section.active .tl-entry,
body.motion-on .section.active .letter-card,
body.motion-on .section.active .trip-card,
body.motion-on .section.active .writing-card,
body.motion-on .section.active .highlight-reel,
body.motion-on .section.active .sbpage-card {
  animation-name: var(--motion-name);
  animation-duration: 1.4s;
  animation-timing-function: ease;
  animation-fill-mode: both;
}
@keyframes storybookParticle {
  0% { opacity: 0; transform: translateY(20px) scale(.7) rotate(0); }
  18% { opacity: .95; }
  100% { opacity: 0; transform: translateY(-140px) scale(1.35) rotate(28deg); }
}
@keyframes canvasParticle {
  0% { opacity: 0; transform: translateX(-20px) scale(.8) rotate(-12deg); }
  20% { opacity: .95; }
  100% { opacity: 0; transform: translateX(110px) translateY(-90px) scale(1.15) rotate(18deg); }
}
@keyframes professionalParticle {
  0% { opacity: 0; transform: translateY(12px) scale(.95); }
  35% { opacity: .65; }
  100% { opacity: 0; transform: translateY(-70px) scale(1.04); }
}
@keyframes storybookCardFloat {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-8px) scale(1.015); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes canvasSlidePop {
  0% { transform: translateX(0) rotate(0); }
  42% { transform: translateX(8px) rotate(.8deg); }
  100% { transform: translateX(0) rotate(0); }
}
@keyframes professionalFadeLift {
  0% { opacity: 1; transform: translateY(0); }
  50% { opacity: .86; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}

.memory-single,
.memory-archive {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 34px auto;
  padding: 0 22px 42px;
}
.memory-single-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  padding: clamp(18px, 4vw, 38px);
  box-shadow: 0 24px 70px rgba(0,0,0,.08);
}
.memory-single-image {
  width: 100%;
  max-height: 74vh;
  object-fit: contain;
  border-radius: 18px;
  background: rgba(0,0,0,.04);
  margin-bottom: 24px;
}
.memory-single-title {
  font-size: clamp(28px, 4vw, 54px);
  line-height: 1.05;
  margin-bottom: 12px;
}
.memory-single-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 20px;
}
.memory-single-content {
  color: var(--text);
  font-size: 17px;
  line-height: 1.8;
}
.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.archive-card {
  text-decoration: none;
  color: inherit;
}

@media (max-width: 980px) {
  .topbar { height: auto; min-height: 56px; }
  .topbar-tabs { flex: 1 1 auto; }
  .tab { padding-inline: 9px; }
  .ts-btn span { display: none; }
}

@media (max-width: 768px) {
  .topbar-tabs.open { top: 56px; }
  .topbar-actions.open { top: calc(56px + 318px); border-top: 1px solid var(--card-border); }
  .topbar-actions.open .motion-toggle { width: 100%; justify-content: center; padding: 10px; }
  .form-grid-2 { grid-template-columns: 1fr; gap: 0; }
  .modal-box, .sbmodal-box { padding: 22px 16px; max-height: 92vh; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .photo-title { font-size: 12px; }
  .lb-content { width: 100vw; max-height: 100vh; border-radius: 0; }
  .lb-img-wrap { min-height: 180px; max-height: 66vh; }
  #lb-img { max-height: 66vh; }
  .lb-nav {
    top: auto;
    bottom: 18px;
    transform: none;
    width: 46px;
    height: 46px;
    font-size: 32px;
  }
  .lb-nav:hover { transform: scale(1.04); }
  .lb-prev { left: 18px; }
  .lb-next { right: 18px; }
  .motion-info { min-width: 100%; }
  .motion-bar { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}

@media (max-width: 430px) {
  .photo-grid { grid-template-columns: 1fr; }
  .age-counter-digits { gap: 6px; }
  .age-digit-num { font-size: 20px; }
  .hero-stats { gap: 12px; }
  .modal-btns { flex-direction: column; }
  .sticky-actions { bottom: -22px; }
}

/* ════════════════════════════════════════
   V7 PRO PATCH: DOB 2024-11-08, live media, travel, links, responsive polish
════════════════════════════════════════ */
.age-counter {
  position: relative;
  overflow: hidden;
}
.age-counter::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.78), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(var(--accent-rgb, 232,103,154),.12), transparent 22%);
}
.age-counter > * { position: relative; z-index: 1; }
.age-counter-icon {
  width: 66px;
  height: 66px;
  min-width: 66px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-light);
  border: 1px solid var(--card-border);
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  overflow: hidden;
  line-height: 1;
}
.age-counter-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}
.age-counter-icon:not([data-avatar="1"]) {
  font-size: 38px;
}
.age-counter-digits {
  flex: 0 1 auto;
}
.age-counter-message {
  min-width: min(260px, 100%);
}

.metadata-box,
.link-box,
.letter-privacy-box,
.travel-upload-card {
  border: 1px solid var(--card-border);
  background: var(--card);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}
.metadata-box .tiny-note,
.link-box .tiny-note,
.letter-privacy-box .tiny-note { margin-bottom: 0; }

.letter-card {
  position: relative;
  overflow: hidden;
}
.letter-card::after {
  content: attr(data-visibility);
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  background: var(--accent-light);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 4px 8px;
}
.letter-locked .letter-desc {
  color: var(--muted);
}
.letter-open .letter-desc {
  color: var(--text);
}

.trip-card {
  min-height: 168px;
  display: flex;
  flex-direction: column;
}
.dynamic-trip-cover {
  height: 112px;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  background: var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dynamic-trip-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.dynamic-trip-info {
  padding: 12px;
}
.dynamic-trip-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 4px;
}
.dynamic-trip-meta {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.travel-empty-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
}
.travel-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.lb-video-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 18px;
  display: none;
}
.lb-video-wrap iframe,
.lb-video-wrap video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}
.lb-link-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 10px 0 4px;
}
.lb-link-row a,
.public-link-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 8px 12px;
  background: var(--accent-light);
  color: var(--accent);
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid var(--card-border);
}
.lb-link-row a:hover,
.public-link-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.memory-single-video,
.memory-single-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 22px;
}
.memory-single-video video,
.memory-single-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.memory-single-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.memory-single-location {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  margin-top: 10px;
}
.archive-video-thumb,
.archive-link-thumb {
  width: 100%;
  height: 100%;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  background: var(--accent-light);
}

/* Keep age-based motion always elegant; no heavy gravity layout shifts. */
body.motion-on .age-counter-icon {
  animation: ageAvatarPulse 3.2s ease-in-out infinite;
}
html[data-life-stage="storybook"] body.motion-on .age-counter {
  animation: storybookGlow 5s ease-in-out infinite;
}
html[data-life-stage="canvas"] body.motion-on .age-counter {
  animation: canvasGlow 4.2s ease-in-out infinite;
}
html[data-life-stage="professional"] body.motion-on .age-counter {
  animation: professionalGlow 6s ease-in-out infinite;
}
@keyframes ageAvatarPulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.03); }
}
@keyframes storybookGlow {
  0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,.05); }
  50% { box-shadow: 0 18px 45px rgba(232,103,154,.16); }
}
@keyframes canvasGlow {
  0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,.05); }
  50% { box-shadow: 0 18px 45px rgba(112,81,255,.16); }
}
@keyframes professionalGlow {
  0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,.05); }
  50% { box-shadow: 0 18px 45px rgba(0,0,0,.10); }
}

@media (max-width: 1024px) {
  .age-counter-wrap { padding-inline: 18px; }
  .age-counter { align-items: flex-start; gap: 16px; }
  .travel-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .age-counter {
    display: grid;
    grid-template-columns: 58px 1fr;
    padding: 16px;
  }
  .age-counter-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 18px;
  }
  .age-counter-digits,
  .age-counter-message,
  .age-ring-wrap {
    grid-column: 1 / -1;
  }
  .age-counter-digits {
    justify-content: space-between;
    gap: 6px;
    width: 100%;
  }
  .age-digit-group { min-width: 36px; }
  .age-counter-sep { display: none; }
  .age-counter-headline { font-size: 15px; }
  .age-counter-sub { font-size: 11px; }
  .travel-stat-grid { grid-template-columns: 1fr; }
  .lb-video-wrap { border-radius: 12px; }
  .lb-link-row { justify-content: stretch; }
  .lb-link-row a { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 390px) {
  .age-counter-wrap { padding-inline: 10px; }
  .age-counter { padding: 14px; }
  .age-digit-num { font-size: 18px; }
  .age-digit-lbl { font-size: 8px; }
  .modal-title, .sbmodal-title { padding-right: 28px; }
}

/* ════════════════════════════════════════
   V8 PRO POLISH: large age portrait, fixed lightbox story panel,
   public visibility UX, smart timeline, future time-lapse chapters
════════════════════════════════════════ */

/* Version marker for WordPress theme list */

.age-counter-v8 {
  display: grid !important;
  grid-template-columns: auto minmax(360px, 1fr) minmax(220px, .72fr) auto;
  align-items: center !important;
  gap: clamp(16px, 2.5vw, 28px) !important;
  padding: clamp(18px, 2.4vw, 30px) !important;
  border-radius: 30px !important;
  border: 1px solid rgba(255,255,255,.74) !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.92), transparent 28%),
    radial-gradient(circle at 86% 16%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,.96), color-mix(in srgb, var(--accent-light) 55%, white)) !important;
  box-shadow: 0 22px 70px rgba(119, 44, 92, .13), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
body.teenage .age-counter-v8 {
  background: linear-gradient(135deg, rgba(24,18,52,.86), rgba(80,52,120,.44)) !important;
  border-color: rgba(190,175,255,.25) !important;
  box-shadow: 0 22px 80px rgba(80,70,210,.18) !important;
}
body.adult .age-counter-v8 {
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(250,245,236,.94)) !important;
  border-color: rgba(184,144,90,.24) !important;
  box-shadow: 0 24px 70px rgba(75,52,23,.10) !important;
}
.age-avatar-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(92px, 10vw, 128px);
  min-width: clamp(92px, 10vw, 128px);
  aspect-ratio: 1;
}
.age-avatar-glow {
  position: absolute;
  inset: -8px;
  border-radius: 34px;
  background: conic-gradient(from 140deg, var(--accent), #ffd6e8, #fff, var(--accent));
  filter: blur(0.2px);
  opacity: .78;
  animation: avatarHalo 7s linear infinite;
}
.age-counter-v8 .age-counter-icon {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  border-radius: 32px !important;
  border: 5px solid rgba(255,255,255,.9) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,.12) !important;
  font-size: clamp(48px, 7vw, 78px) !important;
  background: var(--accent-light) !important;
}
.age-counter-v8 .age-counter-icon img { border-radius: 26px !important; object-fit: cover !important; }
.age-avatar-label {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 900;
  color: #fff;
  background: var(--accent);
  border: 2px solid rgba(255,255,255,.9);
  padding: 4px 9px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
@keyframes avatarHalo { to { transform: rotate(360deg); } }
.age-main-panel { min-width: 0; }
.age-stage-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.age-stage-pill,
.age-next-unlock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.age-stage-pill { background: var(--accent); color: #fff; box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 28%, transparent); }
.age-next-unlock { background: rgba(255,255,255,.72); color: var(--muted); border: 1px solid var(--card-border); }
.age-counter-v8 .age-counter-digits {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(48px, 1fr));
  gap: clamp(7px, 1.2vw, 14px) !important;
  width: 100%;
}
.age-counter-v8 .age-counter-sep { display: none !important; }
.age-counter-v8 .age-digit-group {
  min-width: 0 !important;
  padding: 10px 8px;
  border-radius: 18px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
body.teenage .age-counter-v8 .age-digit-group { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }
.age-counter-v8 .age-digit-num { font-size: clamp(22px, 3.2vw, 38px) !important; line-height: 1; }
.age-counter-v8 .age-digit-lbl { font-size: 9px !important; margin-top: 5px; }
.age-chapter-track {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.chapter-node {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.62);
  border: 1px solid var(--card-border);
  white-space: nowrap;
}
.chapter-node.locked { opacity: .58; filter: grayscale(.2); }
.chapter-node.locked::after { content: " 🔒"; }
.chapter-node.active { color: var(--accent); background: var(--accent-light); opacity: 1; }
.chapter-node.active::after { content: ""; }
.chapter-line { height: 2px; min-width: 24px; flex: 1; background: linear-gradient(90deg, var(--accent), transparent); opacity: .32; }
.age-counter-v8 .age-counter-message { padding-left: 0 !important; min-width: 0 !important; }
.age-counter-v8 .age-counter-headline { font-size: clamp(16px, 2vw, 22px) !important; }
.age-counter-v8 .age-counter-sub { font-size: 12px !important; }
.age-counter-v8 .age-ring-wrap { justify-self: end; }
.age-counter-v8 .age-ring-svg { width: 76px; height: 76px; }
.age-counter-v8 .age-ring-bg,
.age-counter-v8 .age-ring-fill { fill: none; stroke-width: 6; }
.age-counter-v8 .age-ring-bg { stroke: rgba(0,0,0,.08); }
.age-counter-v8 .age-ring-fill { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 188.5; stroke-dashoffset: 188.5; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .45s ease; }
.age-counter-v8 .age-ring-label { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; line-height: 1.05; }
.age-counter-v8 .age-ring-label strong { font-size: 14px; color: var(--accent); }
.age-counter-v8 .age-ring-label span { font-size: 8px; color: var(--muted); text-transform: uppercase; font-weight: 900; }

/* Public visibility should be understandable at a glance */
.visibility-chip { text-transform: uppercase; }
.visibility-public { background: #eafff4 !important; color: #128457 !important; }
.visibility-family { background: #fff7df !important; color: #a66b00 !important; }
.visibility-private { background: #fff0f0 !important; color: #a33 !important; }
.visibility-video { background: #eef1ff !important; color: #4e5bd4 !important; }

/* Lightbox: no blank right side; image and story are intentionally balanced */
.lightbox { background: rgba(31, 14, 28, .72) !important; backdrop-filter: blur(18px) saturate(1.2) !important; }
.lb-content-v8 {
  width: min(1220px, 96vw) !important;
  max-width: 1220px !important;
  max-height: 94vh !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  background: color-mix(in srgb, var(--bg-solid) 88%, white) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: 0 30px 100px rgba(0,0,0,.32) !important;
  text-align: left !important;
}
.lb-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 390px);
  min-height: min(760px, 88vh);
}
.lb-media-pane {
  min-width: 0;
  min-height: min(720px, 88vh);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 2vw, 22px);
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.82), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent-light) 76%, white), rgba(255,255,255,.72));
}
body.teenage .lb-media-pane { background: radial-gradient(circle at 18% 12%, rgba(155,143,238,.22), transparent 30%), #0d0b20; }
.lb-info-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 3vw, 36px);
  border-left: 1px solid var(--card-border);
  background: rgba(255,255,255,.48);
  overflow-y: auto;
}
body.teenage .lb-info-pane { background: rgba(255,255,255,.04); }
.lb-kicker {
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.lb-content-v8 .lb-close {
  top: 16px !important;
  right: 18px !important;
  z-index: 5;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255,255,255,.8) !important;
  display: grid;
  place-items: center;
}
.lb-content-v8 .lb-img-wrap {
  width: 100% !important;
  height: 100% !important;
  min-height: min(650px, 78vh) !important;
  max-height: none !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: 22px !important;
}
.lb-content-v8 #lb-img {
  max-width: 100% !important;
  max-height: min(820px, 82vh) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 22px !important;
  box-shadow: 0 16px 45px rgba(0,0,0,.18);
}
.lb-video-wrap {
  width: 100%;
  min-height: min(650px, 78vh);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-video-wrap iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 22px; box-shadow: 0 16px 45px rgba(0,0,0,.18); }
.lb-content-v8 .lb-emoji {
  width: min(460px, 70vw);
  height: min(460px, 70vw);
  border-radius: 40px;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.62);
  border: 1px solid var(--card-border);
  font-size: clamp(72px, 16vw, 150px) !important;
  margin: 0 !important;
}
.lb-content-v8 .lb-title { font-size: clamp(24px, 3vw, 36px) !important; line-height: 1.05; margin: 0 !important; }
.lb-content-v8 .lb-date { font-size: 13px !important; line-height: 1.5; margin: 0 !important; }
.lb-content-v8 .lb-desc { font-size: 15px !important; color: var(--text) !important; line-height: 1.75 !important; }
.lb-meta-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.lb-meta-chips span,
.lb-link-row a,
.lb-public-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
  background: var(--accent-light);
  color: var(--accent);
  border: 1px solid var(--card-border);
}
.lb-link-row { gap: 8px; flex-wrap: wrap; }
.lb-tip { margin-top: auto; color: var(--muted); font-size: 12px; line-height: 1.5; }
.lb-nav { box-shadow: 0 16px 40px rgba(0,0,0,.24); }

/* Modern timeline inspired by smart photo apps */
.tl-modern-entries { gap: 14px !important; }
.tl-modern-card {
  display: grid !important;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center !important;
  text-align: left;
  gap: 16px !important;
  padding: 12px !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.82), var(--card)) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.06);
  width: 100%;
  border: 1px solid var(--card-border) !important;
}
.tl-media {
  width: 92px;
  height: 92px;
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 32px;
}
.tl-media img { width: 100%; height: 100%; object-fit: cover; }
.tl-modern-card .tl-title { font-size: 16px !important; }
.tl-modern-card .tl-desc { font-size: 13px !important; }
.tl-chip-row { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.tl-chip { border-radius: 999px; padding: 4px 8px; background: var(--accent-light); color: var(--accent); font-size: 10px; font-weight: 900; }
.tl-modern-card .tl-right { align-self: start; padding-top: 6px; }

.trip-card-v8 { border-radius: 24px !important; box-shadow: 0 12px 36px rgba(0,0,0,.08); }
.trip-card-v8 .dynamic-trip-cover { height: 150px; border-radius: 24px 24px 0 0; }
.trip-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; color: var(--muted); font-size: 11px; font-weight: 800; }
.trip-gps { border-radius: 999px; background: #eafff4; color: #128457; padding: 4px 8px; }
.trip-gps.manual { background: #fff7df; color: #a66b00; }

.future-chapter-card {
  grid-column: 1 / -1;
  min-height: 320px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: clamp(30px, 6vw, 70px);
  border: 1px solid var(--card-border);
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,.76), var(--section-bg));
  box-shadow: 0 18px 60px rgba(0,0,0,.08);
  overflow: hidden;
  position: relative;
}
.future-chapter-card::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 1px dashed var(--card-border);
  animation: avatarHalo 16s linear infinite;
}
.future-chapter-card > * { position: relative; z-index: 1; }
.future-chapter-orbit {
  width: 96px;
  height: 96px;
  border-radius: 30px;
  display: grid;
  place-items: center;
  background: var(--accent-light);
  border: 1px solid var(--card-border);
  margin-bottom: 18px;
  font-size: 42px;
  color: var(--accent);
}
.future-chapter-kicker { color: var(--accent); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .16em; }
.future-chapter-card h3 { font-size: clamp(28px, 5vw, 48px); margin: 10px 0; font-family: 'Playfair Display', serif; font-weight: 500; }
.future-chapter-card p { max-width: 620px; color: var(--muted); line-height: 1.7; }
.future-chapter-meta { margin-top: 18px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.future-chapter-meta span { padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.62); border: 1px solid var(--card-border); font-size: 12px; font-weight: 900; color: var(--muted); }
.ts-btn.is-locked::after { content: "🔒"; margin-left: 4px; font-size: 10px; }
body.future-theme-preview .section.active { border-style: dashed; }

.highlight-smart .reel-thumb img { width: 100%; height: 100%; object-fit: cover; }
.highlight-smart .reel-thumb span { font-size: 44px; }

@media (max-width: 1120px) {
  .age-counter-v8 { grid-template-columns: auto minmax(0,1fr); }
  .age-counter-v8 .age-counter-message,
  .age-counter-v8 .age-ring-wrap { grid-column: 2; justify-self: start; }
  .lb-shell { grid-template-columns: 1fr; max-height: 94vh; overflow: auto; }
  .lb-info-pane { border-left: 0; border-top: 1px solid var(--card-border); }
  .lb-media-pane { min-height: min(560px, 62vh); }
  .lb-content-v8 .lb-img-wrap { min-height: min(520px, 60vh) !important; }
}
@media (max-width: 760px) {
  .age-counter-v8 { grid-template-columns: 1fr !important; justify-items: center; text-align: center; }
  .age-avatar-frame { width: 118px; }
  .age-counter-v8 .age-main-panel,
  .age-counter-v8 .age-counter-message,
  .age-counter-v8 .age-ring-wrap { grid-column: 1 !important; justify-self: center; width: 100%; }
  .age-counter-v8 .age-counter-digits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .age-stage-row, .age-chapter-track { justify-content: center; }
  .age-chapter-track { flex-wrap: wrap; }
  .chapter-line { display: none; }
  .lb-content-v8 { width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; }
  .lb-shell { min-height: 100dvh; }
  .lb-media-pane { min-height: 58dvh; padding: 10px; }
  .lb-info-pane { padding: 18px; }
  .lb-content-v8 .lb-img-wrap { min-height: 54dvh !important; }
  .lb-content-v8 #lb-img { max-height: 54dvh !important; }
  .tl-modern-card { grid-template-columns: 72px minmax(0,1fr) !important; }
  .tl-media { width: 72px; height: 72px; border-radius: 18px; }
  .tl-modern-card .tl-right { grid-column: 2; justify-self: start; padding: 0; }
}
@media (max-width: 430px) {
  .age-counter-v8 .age-counter-digits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .age-avatar-frame { width: 104px; }
  .future-chapter-card { padding: 26px 18px; border-radius: 24px; }
}


/* ════════════════════════════════════════
   V9 PRO POLISH: logo, age bar, public reactions, stronger responsive viewer
════════════════════════════════════════ */
.topbar-logo-v9 {
  gap: 10px !important;
  min-width: 172px;
}
.logo-mark {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 30% 25%, #fff 0 15%, transparent 16%),
    conic-gradient(from 150deg, #ff5f9c, #ffd6e8, #fff1a8, #ff8ebd, #ff5f9c);
  box-shadow: 0 12px 26px rgba(232, 103, 154, .24), inset 0 1px 0 rgba(255,255,255,.86);
  border: 1px solid rgba(255,255,255,.9);
}
.logo-mark::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 12px;
  background: rgba(255,255,255,.76);
  z-index: -1;
}
.logo-mark .logo-emoji {
  position: absolute;
  right: -7px;
  top: -7px;
  font-size: 16px !important;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.16));
}
.logo-mark i {
  font-style: normal;
  font-weight: 1000;
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
}
.logo-wordmark { display: grid; line-height: 1.05; }
.logo-wordmark .logo-text {
  font-size: 17px !important;
  letter-spacing: -.02em;
  background: linear-gradient(90deg, var(--accent), #ff8ebd, #9b8fee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.logo-tagline {
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 900;
  opacity: .75;
}
body.motion-on .logo-mark { animation: v9LogoPulse 3.8s ease-in-out infinite; }
@keyframes v9LogoPulse { 0%,100%{ transform: translateY(0) rotate(0deg);} 50%{ transform: translateY(-2px) rotate(-2deg);} }

/* Larger, premium age-bar portrait/GIF area */
.age-counter-v8 {
  grid-template-columns: minmax(150px, 210px) minmax(360px, 1fr) minmax(220px,.58fr) auto !important;
  padding: clamp(20px, 2.8vw, 34px) !important;
  overflow: hidden;
}
.age-counter-v8::after {
  content: "";
  position: absolute;
  inset: auto 8% -34px auto;
  width: 240px;
  height: 110px;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 28%, transparent), transparent 68%);
  filter: blur(8px);
  pointer-events: none;
  opacity: .8;
}
.age-avatar-frame {
  width: clamp(148px, 15vw, 210px) !important;
  min-width: clamp(148px, 15vw, 210px) !important;
  border-radius: 40px;
}
.age-counter-v8 .age-counter-icon {
  border-radius: 40px !important;
  border-width: 6px !important;
  overflow: hidden;
}
.age-counter-v8 .age-counter-icon img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  border-radius: 34px !important;
  object-position: center center;
}
.age-avatar-glow { inset: -10px !important; border-radius: 46px !important; }
.age-avatar-label { bottom: -10px !important; padding: 5px 12px !important; }
.age-main-panel { align-self: stretch; display: grid; align-content: center; }
.age-counter-v8 .age-digit-group {
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease;
}
.age-counter-v8 .age-digit-group:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(232,103,154,.12), inset 0 1px 0 rgba(255,255,255,.9);
}

/* Public reactions */
.lb-reaction-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.lb-react-btn {
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,.66);
  color: var(--text);
  border-radius: 999px;
  padding: 9px 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(0,0,0,.05);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.lb-react-btn:hover,
.lb-react-btn.active {
  transform: translateY(-2px);
  background: var(--accent-light);
  border-color: color-mix(in srgb, var(--accent) 34%, white);
  color: var(--accent);
}
.lb-desc:empty::after {
  content: "A saved Midhusa memory. Add a caption in the upload form or WordPress memory editor to make this story panel richer.";
  color: var(--muted);
  font-style: italic;
}
.lb-info-pane {
  min-height: 100%;
  background:
    radial-gradient(circle at 95% 0%, rgba(255,255,255,.92), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,.38)) !important;
}
.lb-media-pane {
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.82), transparent 28%),
    radial-gradient(circle at 82% 82%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent-light) 78%, white), rgba(255,255,255,.80)) !important;
}
.lb-content-v8 #lb-img {
  display: block;
  margin: auto;
}
body.teenage .lb-info-pane { background: linear-gradient(180deg, rgba(24,18,52,.92), rgba(24,18,52,.78)) !important; }
body.adult .lb-info-pane { background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(250,245,236,.78)) !important; }

/* Make public/family/private chips clear in admin-front UI */
.visibility-chip.visibility-public::before,
.visibility-public::before { content: "🌍 "; }
.visibility-chip.visibility-family::before,
.visibility-family::before { content: "👪 "; }
.visibility-chip.visibility-private::before,
.visibility-private::before { content: "🔒 "; }
.lb-meta-chips .visibility-public::before,
.lb-meta-chips .visibility-family::before,
.lb-meta-chips .visibility-private::before { content: ""; }

@media (max-width: 1120px) {
  .age-counter-v8 { grid-template-columns: minmax(138px, 180px) minmax(0,1fr) !important; }
  .age-avatar-frame { width: clamp(136px, 20vw, 180px) !important; min-width: clamp(136px, 20vw, 180px) !important; }
}
@media (max-width: 760px) {
  .topbar-logo-v9 { min-width: 0; }
  .logo-tagline { display: none; }
  .age-avatar-frame { width: 148px !important; min-width: 148px !important; }
  .age-counter-v8 .age-counter-message { max-width: 360px; }
  .hero-stats { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lb-reaction-row { justify-content: center; }
}
@media (max-width: 430px) {
  .logo-mark { width: 36px; height: 36px; border-radius: 14px; }
  .logo-wordmark .logo-text { font-size: 15px !important; }
  .age-avatar-frame { width: 132px !important; min-width: 132px !important; }
}


/* =========================================================
   V10 Mobile + Video + Social + Professional Logo polish
   ========================================================= */
.topbar{min-height:58px;gap:12px;}
.topbar-logo-v10{display:flex;align-items:center;gap:12px;min-width:205px;text-decoration:none;}
.logo-bloom{position:relative;width:48px;height:48px;display:grid;place-items:center;filter:drop-shadow(0 10px 20px rgba(226,95,146,.28));}
.bloom-petal{position:absolute;width:25px;height:25px;border-radius:18px 18px 18px 5px;background:linear-gradient(145deg,#fff,#ff8fc2 62%,#ff5a9a);box-shadow:inset 0 1px 0 rgba(255,255,255,.75);}
.bloom-petal.p1{transform:translateY(-12px) rotate(45deg)}.bloom-petal.p2{transform:translateX(12px) rotate(135deg)}.bloom-petal.p3{transform:translateY(12px) rotate(225deg)}.bloom-petal.p4{transform:translateX(-12px) rotate(315deg)}
.bloom-center{position:relative;z-index:2;width:29px;height:29px;border-radius:999px;background:radial-gradient(circle at 30% 30%,#fff8c8,#ffca48 48%,#ff72aa 100%);display:grid;place-items:center;font-size:15px;color:#84224b;border:2px solid rgba(255,255,255,.88);}
.bloom-spark{position:absolute;right:-4px;top:-4px;color:#ff5d9d;font-size:14px;animation:midhusaTwinkle 1.9s ease-in-out infinite;}
.logo-wordmark{display:flex;flex-direction:column;line-height:1.05}.logo-text{font-weight:950;letter-spacing:-.035em;font-size:18px;background:linear-gradient(90deg,#ff5a9a,#9b5cff,#ffb84a);-webkit-background-clip:text;background-clip:text;color:transparent}.logo-tagline{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#8c6d7e;font-weight:800;margin-top:3px;}
@keyframes midhusaTwinkle{0%,100%{opacity:.45;transform:scale(.85) rotate(0)}50%{opacity:1;transform:scale(1.25) rotate(22deg)}}
.hero-social-row,.midhusa-social-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
.social-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 13px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(236,117,164,.22);color:var(--text);text-decoration:none;font-size:12px;font-weight:900;box-shadow:0 12px 28px rgba(120,40,80,.08);transition:transform .2s ease,box-shadow .2s ease,background .2s ease;}
.social-chip:hover{transform:translateY(-2px);background:#fff;box-shadow:0 18px 34px rgba(120,40,80,.14);}
.social-icon{width:24px;height:24px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#ffb84a);color:#fff;font-weight:950;font-size:12px;}
.social-linkedin .social-icon{font-family:Arial,sans-serif}.social-youtube .social-icon{background:#ff2b55}.social-instagram .social-icon{background:linear-gradient(135deg,#7c3aed,#ff4f95,#ffb84a)}.social-twitter .social-icon{background:#111}.social-linkedin .social-icon{background:#0a66c2}
.contact-shell{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:stretch;}
.contact-card{position:relative;overflow:hidden;border-radius:32px;background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(255,240,249,.78));border:1px solid rgba(255,125,176,.22);box-shadow:0 28px 70px rgba(160,65,115,.11);padding:28px;}
.contact-card:before{content:"";position:absolute;inset:-40% auto auto -12%;width:260px;height:260px;border-radius:999px;background:radial-gradient(circle,rgba(255,117,172,.2),transparent 68%);pointer-events:none;}
.contact-main h3,.contact-card h3{font-size:clamp(22px,3vw,34px);margin:0 0 10px;color:var(--text);letter-spacing:-.03em}.contact-card p{color:#8a5f75;line-height:1.75;margin:0 0 18px;max-width:760px}.contact-orb{width:72px;height:72px;border-radius:24px;background:linear-gradient(135deg,#fff,#ffd6e8,#ffc65a);display:grid;place-items:center;font-size:34px;box-shadow:0 18px 40px rgba(255,100,160,.18);margin-bottom:18px;}
.contact-actions,.contact-social-grid{display:flex;gap:12px;flex-wrap:wrap}.contact-link{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:12px 16px;text-decoration:none;font-weight:900;background:#fff;color:#5b3347;border:1px solid rgba(255,128,176,.28);box-shadow:0 12px 24px rgba(120,40,80,.08)}.contact-link.primary{background:linear-gradient(135deg,var(--accent),#ffb84a);color:#fff}.contact-location{margin-top:20px;color:#8a5f75;font-weight:800}.contact-social-grid{margin-top:12px;}
.lb-video-wrap video,.lb-video-wrap iframe,.memory-single-embed iframe,.memory-single-video video{width:100%;height:min(76vh,720px);border:0;border-radius:22px;background:#000;object-fit:contain;display:block}.lb-video-wrap{width:100%;height:100%;display:grid;place-items:center;background:#0b0710;border-radius:24px;overflow:hidden}.lb-link-row a{word-break:break-word;}
.form-input[type=url]{word-break:break-all;}

@media (max-width:1100px){.topbar{left:10px;right:10px;top:10px;border-radius:26px;padding:10px 12px;}.topbar-logo-v10{min-width:auto}.logo-tagline{display:none}.topbar-tabs{gap:5px}.tab{padding:9px 10px}.theme-switcher{max-width:280px;overflow-x:auto}.age-counter{grid-template-columns:1fr!important}.age-ring-wrap{justify-self:start}.contact-shell{grid-template-columns:1fr}}
@media (max-width:900px){body{overflow-x:hidden}.topbar{position:sticky;top:8px;display:flex;justify-content:space-between;z-index:100}.hamburger{display:flex!important}.topbar-tabs,.topbar-actions{display:none;position:absolute;left:10px;right:10px;top:calc(100% + 8px);background:rgba(255,255,255,.96);backdrop-filter:blur(18px);border:1px solid rgba(255,128,176,.22);box-shadow:0 24px 60px rgba(120,40,80,.16);border-radius:24px;padding:12px}.topbar-tabs.open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.topbar-actions.open{display:flex;top:calc(100% + 220px);align-items:stretch;flex-direction:column}.tab{width:100%;justify-content:center}.theme-switcher{max-width:none;display:grid;grid-template-columns:1fr;gap:8px}.hero{grid-template-columns:1fr!important;padding:24px 18px}.hero-badge{justify-self:start}.hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));}.hero-social-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.photo-grid,.writings-grid,.highlights-hero,.sbpages-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.travel-map-wrap{grid-template-columns:1fr!important}.modal-box{width:min(96vw,720px);max-height:88vh;padding:20px}.modal-box-wide{width:min(96vw,780px)}.lightbox-inner{grid-template-columns:1fr!important;width:96vw;height:auto;max-height:92vh;overflow:auto}.lb-stage{min-height:52vh}.lb-info-panel{max-height:none}.lb-prev,.lb-next{width:44px;height:44px}.age-counter-digits{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.age-counter-sep{display:none!important}.age-avatar-frame{width:100%;min-height:120px}.age-counter-icon img{width:96px!important;height:96px!important}.contact-actions,.contact-social-grid{display:grid;grid-template-columns:1fr 1fr}.social-chip{justify-content:center}}
@media (max-width:640px){.topbar{border-radius:20px;padding:9px}.logo-bloom{width:42px;height:42px}.bloom-petal{width:22px;height:22px}.logo-text{font-size:16px}.topbar-tabs.open{grid-template-columns:1fr}.topbar-actions.open{top:calc(100% + 390px)}.age-counter-wrap{padding:10px}.age-counter{border-radius:26px!important;padding:14px!important}.age-main-panel{min-width:0}.age-counter-digits{grid-template-columns:repeat(2,minmax(0,1fr));}.age-digit-num{font-size:clamp(24px,11vw,42px)!important}.age-chapter-track{display:grid;grid-template-columns:1fr;gap:7px}.chapter-line{display:none}.hero{margin:16px 10px;border-radius:30px}.hero-name{font-size:clamp(42px,17vw,74px)}.hero-stats,.hero-social-row,.contact-actions,.contact-social-grid{grid-template-columns:1fr}.photo-grid,.writings-grid,.highlights-hero,.sbpages-grid{grid-template-columns:1fr!important}.section{padding:16px 12px}.section-header{align-items:flex-start;gap:10px}.sh-count,.add-btn{margin-left:0}.form-grid-2{grid-template-columns:1fr!important}.file-upload-zone{min-height:135px}.lb-stage{min-height:44vh;border-radius:20px}.lb-info-panel{padding:18px}.lb-title{font-size:22px}.lb-video-wrap video,.lb-video-wrap iframe{height:48vh}.contact-card{border-radius:26px;padding:22px}.social-chip{width:100%;}.motion-bar{left:10px;right:10px;bottom:10px;display:grid;grid-template-columns:1fr}.motion-info{grid-column:1/-1;text-align:center}.map-visual{min-height:260px}.memory-card,.photo-card{break-inside:avoid}}
@media (max-width:390px){.age-counter-digits{grid-template-columns:1fr}.hero-stats{gap:8px}.hstat{padding:12px}.modal-box{padding:16px}.tab{font-size:12px}.contact-link{justify-content:center}}
@media (hover:none){.social-chip:hover,.contact-link:hover{transform:none}.photo-card:hover,.memory-card:hover{transform:none!important}}


/* V10.1 contact form, footer socials and universal screen hardening */
.contact-shell{grid-template-columns:minmax(0,1.05fr) minmax(260px,.75fr) minmax(280px,.9fr)}
.contact-form{display:grid;gap:12px;position:relative;z-index:1}.contact-form .form-input,.contact-form .form-textarea{width:100%;background:rgba(255,255,255,.86)}.contact-submit{width:100%;justify-content:center}.site-footer{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;text-align:center}.site-footer-social{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px;width:100%}.site-footer-social a{border-radius:999px;padding:7px 10px;background:rgba(255,255,255,.72);border:1px solid rgba(255,128,176,.20);text-decoration:none;color:var(--text);font-weight:850;font-size:12px}.memory-single-video video,.memory-single-embed iframe{aspect-ratio:16/9;height:auto;max-height:78vh}.modal-overlay.open{padding:12px}.modal-box{overscroll-behavior:contain}.topbar-logo-v10 .logo-text{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width:1200px){.contact-shell{grid-template-columns:1fr 1fr}.contact-form-card{grid-column:1/-1}}@media (max-width:780px){.contact-shell{grid-template-columns:1fr}.topbar-logo-v10{gap:9px}.contact-form-card{grid-column:auto}.modal-box{max-width:96vw}.memory-single{padding-inline:10px}.memory-single-card{border-radius:24px;padding:16px}.memory-single-title{font-size:clamp(28px,9vw,42px)}}@media (max-width:480px){.logo-bloom{width:38px;height:38px}.bloom-petal{width:19px;height:19px}.bloom-center{width:25px;height:25px}.topbar-logo-v10 .logo-text{font-size:14px;max-width:96px}.hero-social-row,.contact-social-grid{grid-template-columns:1fr!important}.social-label{overflow:hidden;text-overflow:ellipsis}.lb-prev,.lb-next{opacity:.88}.age-counter-message{text-align:left}.site-footer{padding:18px 12px}}

.contact-form{position:relative;z-index:1;margin-top:20px;display:grid;gap:12px;background:rgba(255,255,255,.58);border:1px solid rgba(255,128,176,.22);border-radius:24px;padding:16px;}
.contact-form .form-input,.contact-form .form-textarea{background:#fff;border:1px solid rgba(255,128,176,.28);}
.contact-honey{position:absolute!important;left:-9999px!important;opacity:0!important;height:1px!important;width:1px!important;}
.contact-submit{justify-self:start;min-width:160px;}
@media (max-width:640px){.contact-submit{width:100%;}.contact-form{padding:12px;border-radius:20px}}
.contact-form-card{grid-column:1/-1;}
.contact-form-card .contact-form{max-width:880px;}


/* ════════════════════════════════════════
   V12 HOTFIX: cache-safe UX, media/news tab, fast premium motion
════════════════════════════════════════ */
.topbar-logo-v10 {
  position: relative;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,235,246,.78));
  box-shadow: 0 10px 30px rgba(210, 74, 132, .10);
}
.logo-bloom {
  width: 46px;
  height: 46px;
  filter: drop-shadow(0 10px 18px rgba(224, 83, 143, .22));
}
.logo-bloom::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 999px;
  background: conic-gradient(from 120deg, rgba(255,128,176,.0), rgba(255,128,176,.38), rgba(255,210,85,.34), rgba(160,226,255,.28), rgba(255,128,176,.0));
  animation: logoAuraSpin 4s linear infinite;
  z-index: -1;
}
.logo-wordmark .logo-text {
  font-weight: 950;
  letter-spacing: -.03em;
  background: linear-gradient(90deg, #e85f99, #9d65ff, #e85f99);
  background-size: 180% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: wordmarkShine 2.4s ease-in-out infinite;
}
.logo-tagline {
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(120,72,104,.62);
  font-weight: 900;
}
@keyframes logoAuraSpin { to { transform: rotate(360deg); } }
@keyframes wordmarkShine { 0%,100%{background-position:0% center} 50%{background-position:100% center} }

.media-board-intro {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 20px;
  border: 1px solid var(--card-border);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,238,247,.76));
  box-shadow: 0 24px 70px rgba(150, 46, 103, .10);
  margin-bottom: 18px;
}
.media-orb {
  width: 64px;
  height: 64px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  font-size: 28px;
  color: #fff;
  background: radial-gradient(circle at 30% 20%, #fff 0 6%, #ff7aaf 7% 45%, #9b65ff 100%);
  box-shadow: 0 18px 38px rgba(232, 95, 153, .28);
  animation: quickFloat 1.8s ease-in-out infinite;
}
.media-board-intro h3 { font-size: clamp(18px, 2.6vw, 26px); margin-bottom: 6px; color: var(--text); }
.media-board-intro p { color: var(--muted); line-height: 1.6; font-size: 14px; }
.media-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.media-card {
  border: 1px solid var(--card-border);
  border-radius: 26px;
  overflow: hidden;
  background: var(--card);
  cursor: pointer;
  box-shadow: 0 22px 58px rgba(120, 40, 80, .10);
  transform-origin: center;
  animation: fastPop .34s cubic-bezier(.22,1,.36,1) both;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.media-card:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 30px 80px rgba(180, 55, 110, .16); border-color: rgba(232,95,153,.40); }
.media-thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #ffe6f0, #f0e8ff); }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.media-card:hover .media-thumb img { transform: scale(1.06); }
.media-emoji { font-size: 46px; }
.media-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: var(--accent);
  font-size: 11px;
  font-weight: 950;
  box-shadow: 0 10px 22px rgba(120,40,80,.12);
}
.media-body { padding: 17px; }
.media-date { color: var(--accent); font-size: 11px; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 8px; }
.media-body h3 { font-size: 18px; line-height: 1.2; margin-bottom: 9px; color: var(--text); }
.media-body p { font-size: 13px; line-height: 1.55; color: var(--muted); }
.media-meta { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.media-meta span, .media-meta a {
  text-decoration: none;
  border-radius: 999px;
  padding: 6px 9px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}
@keyframes fastPop { from { opacity: 0; transform: translateY(12px) scale(.96) rotate(-.5deg); } to { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@keyframes quickFloat { 0%,100%{ transform: translateY(0) rotate(-2deg); } 50%{ transform: translateY(-6px) rotate(2deg); } }
.photo-card, .tl-modern-card, .trip-card-v8, .letter-card, .writing-card, .highlight-reel, .sbpage-card { animation-duration: .34s !important; }
.age-motion-particle { will-change: transform, opacity; filter: drop-shadow(0 8px 14px rgba(232,95,153,.22)); }
body.motion-on .photo-card:nth-child(3n+1) { animation-name: fastPop, tinyGlow; animation-duration: .34s, 1.8s; animation-iteration-count: 1, infinite; }
@keyframes tinyGlow { 0%,100%{ box-shadow: 0 15px 40px rgba(120,40,80,.10);} 50%{ box-shadow: 0 18px 54px rgba(232,95,153,.20);} }

@media (max-width: 1040px) { .media-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .media-board { grid-template-columns: 1fr; }
  .media-board-intro { grid-template-columns: 1fr; padding: 16px; border-radius: 22px; }
  .media-orb { width: 56px; height: 56px; border-radius: 20px; }
  .topbar-logo-v10 { max-width: 68vw; }
  .logo-tagline { display: none; }
  .modal-overlay.open { align-items: flex-start; overflow-y: auto; }
  .modal-box { margin: 10px 0 24px; }
  .file-upload-zone { cursor: pointer; }
}

/* ═══════════════════════════════════════════════════════════════════════
   V13 — clean memory titles, lightweight motion, subscriber UI and
   universal responsive polish. Loaded last so it safely overrides legacy
   animation/layout rules without changing saved content.
═══════════════════════════════════════════════════════════════════════ */

/* Performance: v13 uses lightweight transform/opacity motion only. */
html { scroll-padding-top: 96px; }
body {
  position: relative;
  isolation: isolate;
  background-attachment: scroll !important;
}
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -2;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(2px);
  opacity: .42;
}
body::before {
  width: min(44vw, 620px);
  aspect-ratio: 1;
  left: -18vw;
  top: 18vh;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 67%);
}
body::after {
  width: min(38vw, 540px);
  aspect-ratio: 1;
  right: -14vw;
  top: 58vh;
  background: radial-gradient(circle, rgba(255,205,92,.16), transparent 68%);
}

/* Fast reveal animation: opacity and transform only. */
.reveal-ready {
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(.985);
  transition:
    opacity .32s ease-out var(--reveal-delay, 0ms),
    transform .38s cubic-bezier(.2,.75,.25,1) var(--reveal-delay, 0ms);
}
.reveal-ready.is-revealed { opacity: 1; transform: translate3d(0,0,0) scale(1); }
.photo-card,
.tl-modern-card,
.trip-card-v8,
.letter-card,
.writing-card,
.media-card,
.highlight-reel,
.contact-card,
.subscribe-shell { animation: none !important; }
body.motion-on .photo-card:nth-child(3n+1) { animation: none !important; }

/* Storybook surface system */
body.childhood {
  --v13-surface: rgba(255,255,255,.92);
  --v13-soft: rgba(255,240,247,.82);
  --v13-outline: rgba(222,94,145,.18);
  --v13-shadow: 0 18px 52px rgba(112,45,82,.11);
  background:
    radial-gradient(circle at 8% 12%, rgba(255,201,225,.34), transparent 23%),
    radial-gradient(circle at 92% 24%, rgba(255,228,161,.27), transparent 20%),
    linear-gradient(150deg,#fff8fb 0%,#fffaf2 52%,#f8f2ff 100%) !important;
}
body.teenage {
  --v13-surface: rgba(25,20,51,.88);
  --v13-soft: rgba(155,143,238,.12);
  --v13-outline: rgba(155,143,238,.23);
  --v13-shadow: 0 22px 62px rgba(0,0,0,.28);
}
body.adult {
  --v13-surface: rgba(255,255,255,.94);
  --v13-soft: rgba(240,234,223,.78);
  --v13-outline: rgba(114,95,72,.16);
  --v13-shadow: 0 20px 56px rgba(70,54,36,.10);
}

/* Professional bloom logo: more emblem-like, less like a plain letter. */
.topbar-logo-v10 {
  flex: 0 0 auto;
  min-width: 188px;
  padding: 5px 12px 5px 5px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  background: color-mix(in srgb, var(--v13-surface) 88%, transparent);
  backdrop-filter: blur(18px);
}
.logo-bloom { width: 44px; height: 44px; }
.logo-bloom::before { animation-duration: 8s !important; opacity: .7; }
.logo-wordmark .logo-text { animation: none !important; font-size: 18px; }
.bloom-spark { animation-duration: 2.8s !important; }

/* Main navigation remains usable with ten tabs. */
.topbar {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  max-width: 1540px;
  margin-inline: auto;
}
.topbar-tabs {
  min-width: 0;
  display: flex;
  justify-content: center;
  gap: 4px;
}
.topbar-tabs .tab { white-space: nowrap; min-height: 42px; }
.topbar-actions { flex: 0 0 auto; }

/* Modern card gallery */
.photo-grid,
.archive-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(14px, 1.7vw, 24px);
}
.photo-card,
.archive-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--v13-outline, var(--card-border));
  background: var(--v13-surface, var(--card));
  box-shadow: var(--v13-shadow, 0 18px 50px rgba(0,0,0,.08));
  text-align: left;
  text-decoration: none;
  color: var(--text);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.photo-card:hover,
.archive-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  box-shadow: 0 24px 64px color-mix(in srgb, var(--accent) 15%, transparent);
}
.photo-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--accent-light);
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.photo-card:hover .photo-thumb img { transform: scale(1.035); }
.photo-info { padding: 15px 16px 17px; min-width: 0; }
.photo-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.65em;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 950;
  letter-spacing: -.018em;
  overflow-wrap: anywhere;
}
.photo-meta { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 10px; }
.photo-date { color: var(--muted); font-size: 11px; font-weight: 850; }
.photo-tag,
.visibility-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archive-play-badge {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%,-50%);
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(22,16,27,.74);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 34px rgba(0,0,0,.24);
}

/* Timeline designed as a fast, readable story feed. */
.tl-modern-group { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 18px; margin-bottom: 26px; }
.tl-year-label {
  position: sticky;
  top: 104px;
  align-self: start;
  width: 74px;
  padding: 10px 8px;
  border-radius: 18px;
  text-align: center;
  font-size: 15px;
  font-weight: 950;
  color: var(--accent);
  background: var(--v13-surface);
  border: 1px solid var(--v13-outline);
  box-shadow: 0 12px 28px rgba(90,30,62,.08);
}
.tl-modern-entries { display: grid; gap: 12px; }
.tl-modern-card {
  width: 100%;
  display: grid;
  grid-template-columns: 92px minmax(0,1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--v13-outline);
  border-radius: 24px;
  background: var(--v13-surface);
  box-shadow: 0 14px 36px rgba(90,30,62,.075);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.tl-modern-card:hover { transform: translateX(3px); border-color: color-mix(in srgb, var(--accent) 32%, transparent); }
.tl-media { width: 92px; aspect-ratio: 1; border-radius: 18px; overflow: hidden; display: grid; place-items: center; background: var(--accent-light); font-size: 28px; }
.tl-media img { width: 100%; height: 100%; object-fit: cover; }
.tl-body { min-width: 0; }
.tl-title { font-weight: 950; font-size: 16px; overflow-wrap: anywhere; }
.tl-desc { color: var(--muted); margin-top: 5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tl-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.tl-chip { border-radius: 999px; padding: 5px 9px; background: var(--accent-light); color: var(--accent); font-size: 10px; font-weight: 900; }
.tl-right { display: grid; justify-items: end; gap: 8px; min-width: 92px; }
.tl-date { color: var(--muted); font-size: 11px; font-weight: 850; }
.tl-open { color: var(--accent); font-size: 11px; font-weight: 950; }

/* Upload experience */
.smart-title-card,
.public-seo-guide {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  margin: 16px 0 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-light) 82%, white), rgba(255,255,255,.72));
}
.smart-title-card p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.smart-title-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg,var(--accent),#ffbd5f);
  color: #fff;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 25%, transparent);
}
.form-optional { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.file-upload-zone {
  border: 1.5px dashed color-mix(in srgb, var(--accent) 48%, transparent) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.9), color-mix(in srgb, var(--accent-light) 58%, white)) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.file-upload-zone:hover { transform: translateY(-2px); border-color: var(--accent) !important; box-shadow: 0 18px 44px color-mix(in srgb, var(--accent) 13%, transparent); }
.fuz-text { overflow-wrap: anywhere; }
.metadata-box,
.visibility-box {
  border-radius: 22px !important;
  border: 1px solid var(--v13-outline) !important;
  background: color-mix(in srgb, var(--v13-surface) 86%, var(--accent-light)) !important;
}
.public-seo-guide { grid-template-columns: 1fr; gap: 3px; margin: 12px 0 0; }
.public-seo-guide span { color: var(--muted); font-size: 11px; }
.notify-check { margin: 14px 0; padding: 13px 14px; border-radius: 16px; background: rgba(238,255,247,.78); border: 1px solid rgba(35,170,104,.18); }
.modal-box-wide { width: min(900px, calc(100vw - 28px)); }
.sticky-actions { position: sticky; bottom: -1px; z-index: 3; margin: 22px -2px -2px; padding: 13px; border-radius: 18px; background: rgba(255,255,255,.9); backdrop-filter: blur(18px); box-shadow: 0 -12px 32px rgba(80,30,56,.07); }

/* Lightbox: media never leaves a blank desktop half; story stays readable. */
.lightbox.open { padding: clamp(8px, 2vw, 24px); }
.lb-content-v8 {
  width: min(1320px, 100%);
  max-height: calc(100dvh - 32px);
  border-radius: 30px;
  overflow: hidden;
  background: var(--v13-surface);
  border: 1px solid var(--v13-outline);
  box-shadow: 0 34px 110px rgba(52,20,39,.24);
}
.lb-shell { display: grid !important; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .72fr); min-height: min(760px, calc(100dvh - 40px)); max-height: calc(100dvh - 40px); }
.lb-media-pane {
  min-width: 0;
  min-height: 0;
  display: grid !important;
  place-items: center;
  padding: clamp(12px, 2vw, 26px);
  overflow: hidden;
}
.lb-img-wrap { width: 100%; height: 100%; min-height: 0; align-items: center; justify-content: center; }
.lb-img-wrap img,
#lb-img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: calc(100dvh - 92px) !important; object-fit: contain !important; border-radius: 20px; }
.lb-video-wrap { width: 100%; min-height: min(620px, 70dvh); border-radius: 20px !important; }
.lb-video-wrap video,
.lb-video-wrap iframe { width: 100%; height: min(72dvh, 720px) !important; max-height: 72dvh; border-radius: 20px !important; object-fit: contain; }
.lb-info-pane { min-width: 0; overflow-y: auto; padding: clamp(22px,3vw,42px) !important; }
.lb-title { font-size: clamp(24px,3vw,42px) !important; line-height: 1.08 !important; overflow-wrap: anywhere; }
.lb-desc { font-size: 15px; line-height: 1.75; margin-top: 18px; white-space: pre-wrap; }
.lb-meta-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-link-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-link-row a,
.lb-public-link { max-width: 100%; overflow-wrap: anywhere; }
.lb-tip { margin-top: 18px; padding: 12px; border-radius: 14px; background: var(--accent-light); color: var(--muted); font-size: 11px; line-height: 1.45; }
.lb-close { z-index: 10; }
.lb-nav { z-index: 9; width: 48px; height: 48px; background: rgba(34,27,34,.70); color: #fff; backdrop-filter: blur(12px); }

/* Subscribe */
.subscribe-shell {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr);
  overflow: hidden;
  border: 1px solid var(--v13-outline);
  border-radius: 34px;
  background:
    radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 34%),
    var(--v13-surface);
  box-shadow: var(--v13-shadow);
}
.subscribe-story,
.subscribe-form { padding: clamp(24px,4vw,48px); }
.subscribe-story { display: flex; flex-direction: column; justify-content: center; }
.subscribe-bloom { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 26px; font-size: 34px; background: linear-gradient(135deg,#fff,#ffd7e8,#ffe59f); box-shadow: 0 18px 44px rgba(217,74,133,.16); }
.subscribe-kicker { margin-top: 20px; color: var(--accent); font-size: 11px; font-weight: 950; text-transform: uppercase; letter-spacing: .14em; }
.subscribe-story h3 { margin-top: 8px; font-size: clamp(24px,3.4vw,42px); line-height: 1.1; letter-spacing: -.035em; }
.subscribe-story p { margin-top: 14px; color: var(--muted); line-height: 1.7; }
.subscribe-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.subscribe-points span { padding: 8px 11px; border-radius: 999px; background: var(--accent-light); color: var(--accent); font-size: 11px; font-weight: 900; }
.subscribe-form { display: grid; align-content: center; gap: 9px; background: color-mix(in srgb, var(--accent-light) 45%, transparent); border-left: 1px solid var(--v13-outline); }
.subscribe-honey { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.subscribe-button { width: 100%; justify-content: center; min-height: 48px; margin-top: 6px; }
.subscribe-button:disabled { opacity: .65; cursor: wait; }

/* Floating page controls */
.page-scroll-controls {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 70;
  display: grid;
  gap: 8px;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.page-scroll-controls.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.page-scroll-btn {
  width: 46px;
  height: 46px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 17px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg,var(--accent),color-mix(in srgb, var(--accent) 65%, #7d5cff));
  box-shadow: 0 15px 34px color-mix(in srgb, var(--accent) 28%, transparent);
  cursor: pointer;
  font-weight: 950;
  transition: transform .18s ease, opacity .18s ease;
}
.page-scroll-btn:hover { transform: translateY(-2px); }
.page-scroll-controls.near-bottom .scroll-down { opacity: .35; pointer-events: none; }
body.teenage .page-scroll-btn { border-radius: 13px; transform: rotate(-2deg); }
body.adult .page-scroll-btn { border-radius: 999px; background: #2e2a24; }

/* Single public memory/watch page */
.memory-single,
.memory-archive { width: min(1400px, calc(100% - 28px)); margin: 112px auto 60px; }
.memory-single-card {
  padding: 0 !important;
  border-radius: 34px !important;
  overflow: hidden;
  border: 1px solid var(--v13-outline);
  background: var(--v13-surface);
  box-shadow: var(--v13-shadow);
}
.memory-single-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(330px,.75fr); min-height: 620px; }
.memory-single-stage { display: grid; place-items: center; min-width: 0; padding: clamp(14px,2.2vw,30px); background: linear-gradient(145deg,var(--accent-light),rgba(255,255,255,.75)); }
.memory-single-stage img { width: 100%; height: 100%; max-height: 78dvh; object-fit: contain; border-radius: 22px; }
.memory-single-stage .memory-single-video,
.memory-single-stage .memory-single-embed { width: 100%; }
.memory-single-story { padding: clamp(26px,4vw,52px); min-width: 0; }
.memory-kicker { margin: 0 0 9px !important; color: var(--accent); font-size: 11px; font-weight: 950; letter-spacing: .15em; text-transform: uppercase; }
.memory-single-title { margin: 0; font-size: clamp(30px,4vw,52px); line-height: 1.05; letter-spacing: -.04em; overflow-wrap: anywhere; }
.memory-single-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.memory-single-location { margin-top: 15px; color: var(--muted); font-weight: 850; }
.memory-single-content { margin-top: 22px; font-size: 16px; line-height: 1.8; color: var(--text); }
.memory-single-reactions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.memory-vote-btn { border: 1px solid var(--v13-outline); border-radius: 999px; padding: 10px 15px; background: var(--v13-surface); color: var(--text); font-weight: 950; cursor: pointer; }
.memory-vote-btn.active { color: var(--accent); background: var(--accent-light); border-color: color-mix(in srgb,var(--accent) 36%,transparent); }
.memory-single-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.memory-related { margin-top: 34px; }
.memory-archive-hero { padding: clamp(24px,5vw,62px); margin-bottom: 28px; border-radius: 34px; border: 1px solid var(--v13-outline); background: var(--v13-surface); box-shadow: var(--v13-shadow); }
.memory-archive-hero h1 { margin: 0; font-size: clamp(34px,5vw,66px); line-height: 1; letter-spacing: -.045em; }
.memory-archive-hero p:last-child { max-width: 760px; margin-top: 16px; color: var(--muted); line-height: 1.7; }
.memory-pagination { margin-top: 30px; }
.memory-pagination .nav-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.memory-pagination a,
.memory-pagination span { padding: 9px 13px; border-radius: 12px; background: var(--v13-surface); border: 1px solid var(--v13-outline); color: var(--text); text-decoration: none; }

/* Motion particles remain decorative but are limited by JS. */
.age-motion-particle { pointer-events: none; will-change: transform, opacity; opacity: .8; }
.motion-bar { backdrop-filter: blur(18px); }

/* Responsive strategy */
@media (max-width: 1320px) {
  .photo-grid,
  .archive-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .topbar { grid-template-columns: auto minmax(0,1fr) auto; }
  .topbar-tabs .tab { padding-inline: 8px; font-size: 11px; }
  .topbar-tabs .tab span { display: none; }
}

@media (max-width: 1100px) {
  .topbar { display: flex; }
  .hamburger { display: flex !important; margin-left: auto; }
  .topbar-tabs,
  .topbar-actions {
    display: none !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-height: min(70dvh,620px);
    overflow-y: auto;
    padding: 12px !important;
    border-radius: 22px !important;
    background: var(--nav-bg) !important;
    border: 1px solid var(--v13-outline) !important;
    box-shadow: 0 22px 60px rgba(60,24,44,.18) !important;
    backdrop-filter: blur(20px);
  }
  .topbar-tabs { top: calc(100% + 8px) !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 7px !important; }
  .topbar-tabs.open { display: grid !important; }
  .topbar-tabs .tab { display: flex; justify-content: flex-start; gap: 8px; width: 100%; padding: 11px 12px; }
  .topbar-tabs .tab span { display: inline; }
  .topbar-actions { top: calc(100% + min(70dvh, 630px)) !important; }
  .topbar-actions.open { display: flex !important; }
  .lb-shell,
  .memory-single-layout { grid-template-columns: 1fr; }
  .lb-shell { overflow-y: auto; }
  .lb-media-pane { min-height: min(62dvh,640px); }
  .lb-info-pane { overflow: visible; }
  .subscribe-shell { grid-template-columns: 1fr; }
  .subscribe-form { border-left: 0; border-top: 1px solid var(--v13-outline); }
}

@media (max-width: 820px) {
  .photo-grid,
  .archive-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tl-modern-group { grid-template-columns: 1fr; gap: 10px; }
  .tl-year-label { position: static; width: max-content; }
  .tl-modern-card { grid-template-columns: 76px minmax(0,1fr); }
  .tl-media { width: 76px; }
  .tl-right { grid-column: 2; justify-items: start; display: flex; align-items: center; flex-wrap: wrap; min-width: 0; }
  .lb-content-v8 { max-height: calc(100dvh - 12px); border-radius: 22px; }
  .lb-shell { max-height: calc(100dvh - 12px); }
  .lb-media-pane { min-height: 52dvh; padding: 10px; }
  .lb-img-wrap img,
  #lb-img { max-height: 54dvh !important; }
  .lb-video-wrap { min-height: 48dvh; }
  .lb-video-wrap video,
  .lb-video-wrap iframe { height: 50dvh !important; }
  .memory-single,
  .memory-archive { margin-top: 92px; }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 78px; }
  body::before,
  body::after { opacity: .24; }
  .topbar { left: 8px !important; right: 8px !important; top: 8px !important; min-height: 56px; padding: 8px !important; }
  .topbar-logo-v10 { min-width: 0; max-width: calc(100vw - 120px); }
  .logo-wordmark .logo-text { font-size: 15px; }
  .logo-tagline { display: none; }
  .topbar-tabs { grid-template-columns: 1fr !important; max-height: 64dvh; }
  .topbar-actions { top: calc(100% + 64dvh + 18px) !important; }
  .photo-grid,
  .archive-grid { grid-template-columns: 1fr; gap: 14px; }
  .photo-card,
  .archive-card { display: grid; grid-template-columns: 128px minmax(0,1fr); min-height: 126px; border-radius: 20px; }
  .photo-thumb { height: 100%; aspect-ratio: auto; min-height: 126px; }
  .photo-info { display: flex; flex-direction: column; justify-content: center; padding: 14px; }
  .photo-title { min-height: 0; -webkit-line-clamp: 3; font-size: 15px; }
  .section { padding-inline: 10px !important; }
  .section-header { display: flex; flex-wrap: wrap; }
  .add-btn { width: 100%; justify-content: center; }
  .form-grid-2 { grid-template-columns: 1fr !important; }
  .modal-overlay.open { padding: 7px !important; }
  .modal-box { width: 100% !important; max-width: 100% !important; max-height: calc(100dvh - 14px) !important; border-radius: 22px !important; padding: 18px !important; }
  .sticky-actions { display: grid; grid-template-columns: 1fr; }
  .sticky-actions button { width: 100%; }
  .tl-modern-card { grid-template-columns: 66px minmax(0,1fr); gap: 11px; padding: 10px; border-radius: 20px; }
  .tl-media { width: 66px; border-radius: 15px; }
  .tl-desc { -webkit-line-clamp: 2; font-size: 12px; }
  .lb-content-v8 { width: 100%; }
  .lb-media-pane { min-height: 44dvh; }
  .lb-info-pane { padding: 20px 18px 28px !important; }
  .lb-title { font-size: 25px !important; }
  .lb-nav { width: 42px; height: 42px; top: 42dvh !important; }
  .lb-prev { left: 12px !important; }
  .lb-next { right: 12px !important; }
  .subscribe-story,
  .subscribe-form { padding: 22px 18px; }
  .subscribe-shell { border-radius: 24px; }
  .subscribe-points { display: grid; }
  .page-scroll-controls { right: 9px; bottom: max(12px,env(safe-area-inset-bottom)); gap: 6px; }
  .page-scroll-btn { width: 42px; height: 42px; border-radius: 15px; }
  .motion-bar { left: 8px !important; right: 58px !important; bottom: 8px !important; }
  .memory-single,
  .memory-archive { width: calc(100% - 16px); margin-top: 82px; }
  .memory-single-card,
  .memory-archive-hero { border-radius: 24px !important; }
  .memory-single-stage { min-height: 42dvh; padding: 10px; }
  .memory-single-story { padding: 22px 18px; }
  .memory-single-title { font-size: clamp(29px,10vw,40px); }
  .memory-single-actions > * { width: 100%; justify-content: center; text-align: center; }
}

@media (max-width: 420px) {
  .photo-card,
  .archive-card { grid-template-columns: 108px minmax(0,1fr); min-height: 112px; }
  .photo-thumb { min-height: 112px; }
  .photo-info { padding: 11px; }
  .photo-meta { gap: 5px; }
  .photo-tag,
  .visibility-chip { font-size: 9px !important; padding: 4px 7px !important; }
  .tl-open { display: none; }
  .smart-title-card { grid-template-columns: 1fr; }
  .lb-meta-chips span { max-width: 100%; overflow-wrap: anywhere; }
}

@media (hover: none) {
  .photo-card:hover,
  .archive-card:hover,
  .tl-modern-card:hover,
  .file-upload-zone:hover,
  .page-scroll-btn:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal-ready { opacity: 1 !important; transform: none !important; }
  .age-motion-particle { display: none !important; }
}

/* V13 final mobile navigation and always-available page controls */
.page-scroll-controls.at-top .scroll-up,
.page-scroll-controls.near-bottom .scroll-down {
  opacity: .32;
  pointer-events: none;
  transform: scale(.92);
}
.page-scroll-btn[aria-disabled="true"] { cursor: default; }

@media (max-width: 1100px) {
  .topbar-actions.open {
    display: flex !important;
    position: fixed !important;
    top: auto !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: 1005 !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .topbar-actions.open .theme-switcher {
    display: flex !important;
    flex: 1 1 auto;
    min-width: 0;
  }
  .topbar-actions.open .ts-btn { flex: 1 1 0; justify-content: center; }
  .topbar-actions.open .motion-toggle { flex: 0 0 auto; }
  .topbar-tabs.open { padding-bottom: 84px !important; }
}

@media (max-width: 640px) {
  .topbar-actions.open {
    flex-direction: column;
    align-items: stretch;
    padding: 10px !important;
  }
  .topbar-actions.open .theme-switcher { width: 100%; }
  .topbar-actions.open .motion-toggle { width: 100%; justify-content: center; }
  .topbar-tabs.open { padding-bottom: 132px !important; }
}