:root {
  --bg: #f6f3ed;
  --surface: #ffffff;
  --surface-2: #faf8f3;
  --text: #2c2925;
  --text-muted: #837d72;
  --text-soft: #a8a094;
  --border: #e8e2d5;
  --border-strong: #d4ccba;
  --accent: #5e6358;
  --accent-hover: #474b41;
  --drop-cap-color: #8a6f37;
  --danger: #8a4a3e;
  --danger-hover: #6d3a31;
  --focus: #c4b89c;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --shadow-sm: 0 1px 2px rgba(45, 41, 37, 0.04);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
.page-top-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}
.rubik-page {
  background: var(--bg);
  font-family: "Rubik", var(--font-sans);
}
.rubik-page h1,
.rubik-page h2,
.rubik-page h3,
.rubik-page p,
.rubik-page a,
.rubik-page button {
  font-family: "Rubik", var(--font-sans);
}
.default-app-page .topbar {
  --topbar-bg: var(--bg);
  --topbar-text: var(--text);
  --topbar-muted: var(--text-muted);
  --topbar-border: var(--border-strong);
  --topbar-link-bg: rgba(44, 41, 37, 0.045);
  --topbar-link-hover: rgba(44, 41, 37, 0.08);
  --topbar-link-active: rgba(44, 41, 37, 0.12);
  --topbar-logo-filter: brightness(0) saturate(100%);
}

a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border-strong); }
a:hover { color: var(--accent); border-bottom-color: var(--accent); }

h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: 28px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }

p { margin: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-8) 0;
}

/* ---- top bar ----
   Light cream + dark ink (matches landing header).
   Layout: flex space-between with brand on left and menu on right.
   Memorial pages override via .topbar-theme-X for per-theme palettes. */
.topbar {
  --topbar-bg: #faf6e8;
  --topbar-text: #1c1814;
  --topbar-muted: rgba(28, 24, 20, 0.66);
  --topbar-border: rgba(40, 30, 15, 0.12);
  --topbar-link-bg: rgba(255, 255, 255, 0.6);
  --topbar-link-hover: rgba(40, 30, 15, 0.06);
  --topbar-link-active: rgba(40, 30, 15, 0.12);
  --topbar-logo-filter: brightness(0) saturate(100%);
  --topbar-logo-opacity: 0.58;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  max-width: 100vw;
  min-height: 64px;
  padding: 12px 32px;
  background: var(--topbar-bg);
  color: var(--topbar-text);
  border-bottom: 1px solid var(--topbar-border);
}
.topbar-memorial {
  font-family: var(--topbar-page-font, var(--serif));
}
.topbar-theme-classic {
  --topbar-bg: #cfc5b4;
  --topbar-text: #2c2925;
  --topbar-muted: rgba(44, 41, 37, 0.66);
  --topbar-border: rgba(44, 41, 37, 0.14);
  --topbar-link-bg: rgba(44, 41, 37, 0.045);
  --topbar-link-hover: rgba(44, 41, 37, 0.08);
  --topbar-link-active: rgba(44, 41, 37, 0.12);
  --topbar-logo-filter: brightness(0) saturate(100%);
  --topbar-logo-opacity: 0.58;
}
/* atelier → Linen */
.topbar-theme-atelier {
  --topbar-bg: #faf6e8;
  --topbar-text: #1c1814;
  --topbar-muted: rgba(28, 24, 20, 0.66);
  --topbar-border: rgba(139, 111, 55, 0.18);
  --topbar-link-bg: rgba(255, 255, 255, 0.55);
  --topbar-link-hover: rgba(40, 30, 15, 0.06);
  --topbar-link-active: rgba(40, 30, 15, 0.12);
  --topbar-logo-filter: brightness(0) saturate(100%);
  --topbar-logo-opacity: 0.58;
}
/* heritage → Stone */
.topbar-theme-heritage {
  --topbar-bg: #f3eee5;
  --topbar-text: #2a2723;
  --topbar-muted: rgba(60, 50, 40, 0.66);
  --topbar-border: rgba(110, 93, 76, 0.18);
  --topbar-link-bg: rgba(255, 255, 255, 0.55);
  --topbar-link-hover: rgba(60, 50, 40, 0.06);
  --topbar-link-active: rgba(60, 50, 40, 0.12);
  --topbar-logo-filter: brightness(0) saturate(100%);
  --topbar-logo-opacity: 0.58;
}
/* nocturne → Sage */
.topbar-theme-nocturne {
  --topbar-bg: #f1f3eb;
  --topbar-text: #1f2520;
  --topbar-muted: rgba(40, 55, 40, 0.66);
  --topbar-border: rgba(90, 110, 72, 0.18);
  --topbar-link-bg: rgba(255, 255, 255, 0.55);
  --topbar-link-hover: rgba(40, 55, 40, 0.06);
  --topbar-link-active: rgba(40, 55, 40, 0.12);
  --topbar-logo-filter: brightness(0) saturate(100%);
  --topbar-logo-opacity: 0.58;
}
/* stillwater → Mist */
.topbar-theme-stillwater {
  --topbar-bg: #eef2f4;
  --topbar-text: #1f2731;
  --topbar-muted: rgba(40, 55, 75, 0.66);
  --topbar-border: rgba(60, 92, 115, 0.18);
  --topbar-link-bg: rgba(255, 255, 255, 0.55);
  --topbar-link-hover: rgba(40, 55, 75, 0.06);
  --topbar-link-active: rgba(40, 55, 75, 0.12);
  --topbar-logo-filter: brightness(0) saturate(100%);
  --topbar-logo-opacity: 0.58;
}
/* vesper → Rose */
.topbar-theme-vesper {
  --topbar-bg: #f4ece6;
  --topbar-text: #2a1f20;
  --topbar-muted: rgba(70, 40, 40, 0.66);
  --topbar-border: rgba(155, 92, 80, 0.18);
  --topbar-link-bg: rgba(255, 255, 255, 0.55);
  --topbar-link-hover: rgba(70, 40, 40, 0.06);
  --topbar-link-active: rgba(70, 40, 40, 0.12);
  --topbar-logo-filter: brightness(0) saturate(100%);
  --topbar-logo-opacity: 0.58;
}
.topbar-font-garamond { --topbar-page-font: "Cormorant Garamond", "Noto Serif Hebrew", Georgia, serif; }
.topbar-font-baskerville { --topbar-page-font: "Libre Baskerville", "Noto Serif Hebrew", Georgia, serif; }
.topbar-font-lora { --topbar-page-font: "Lora", "Noto Serif Hebrew", Georgia, serif; }
.topbar-font-source-serif { --topbar-page-font: "Source Serif 4", "Noto Serif Hebrew", Georgia, serif; }
.topbar-font-poppins { --topbar-page-font: "Poppins", "Noto Serif Hebrew", Arial, sans-serif; }
.topbar-font-verdana { --topbar-page-font: Verdana, "Noto Serif Hebrew", Arial, sans-serif; }
.topbar-font-playfair-display { --topbar-page-font: "Playfair Display", "Noto Serif Hebrew", Georgia, serif; }
.topbar-side {
  min-width: 0;
  display: inline-flex;
  align-items: center;
}
.topbar-side-left:empty { display: none; }
.topbar-menu { margin-left: auto; }
.topbar-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(44, 41, 37, 0.28);
  border-radius: 50%;
  color: #2c2925;
  background: rgba(255, 255, 255, 0.22);
}
.topbar-status svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.topbar-theme-atelier .topbar-status {
  color: #2f2a1f;
  border-color: rgba(47, 42, 31, 0.3);
  background: rgba(255, 248, 223, 0.28);
}
.topbar-theme-heritage .topbar-status {
  color: #1f3329;
  border-color: rgba(31, 51, 41, 0.28);
  background: rgba(255, 250, 240, 0.28);
}
.topbar-theme-nocturne .topbar-status {
  color: #f1ece3;
  border-color: rgba(232, 226, 213, 0.34);
  background: rgba(232, 226, 213, 0.08);
}
.topbar-theme-stillwater .topbar-status {
  color: #1f2c38;
  border-color: rgba(31, 44, 56, 0.28);
  background: rgba(251, 252, 253, 0.34);
}
.topbar-theme-vesper .topbar-status {
  color: #3a2c45;
  border-color: rgba(58, 44, 69, 0.28);
  background: rgba(250, 247, 249, 0.34);
}
.brand-lockup {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  color: var(--topbar-text);
  text-decoration: none;
  border-bottom: none;
  min-width: 0;
  line-height: 1.1;
}
.brand-lockup:hover {
  color: var(--topbar-text);
  border-bottom: none;
}
.brand-title {
  font-family: "Cormorant Garamond", "EB Garamond", "Noto Serif Hebrew", Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--topbar-text);
  white-space: nowrap;
}
.brand-subline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 10px;
  margin-left: 4px;
  border-left: 1px solid var(--topbar-border);
}
.brand-by {
  color: var(--topbar-muted);
  font-family: "Cormorant Garamond", "Noto Serif Hebrew", serif;
  font-style: italic;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}
.brand-photomyne-logo {
  display: block;
  width: auto;
  height: 14px;
  filter: var(--topbar-logo-filter);
  opacity: var(--topbar-logo-opacity);
}
.topbar-menu {
  position: relative;
  justify-self: end;
}
.topbar-menu summary {
  list-style: none;
}
.topbar-menu summary::-webkit-details-marker { display: none; }
.topbar-menu summary::marker { display: none; content: ""; }
.topbar-menu-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 36px;
  border: 1px solid var(--topbar-border);
  border-radius: 12px;
  background: var(--topbar-link-bg);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.topbar-menu-button span {
  width: 18px;
  height: 1.5px;
  border-radius: 999px;
  background: var(--topbar-text);
  opacity: 0.78;
}
.topbar-menu-button:hover,
.topbar-menu[open] .topbar-menu-button {
  background: var(--topbar-link-hover);
  border-color: color-mix(in srgb, var(--topbar-text) 26%, transparent);
}
.topbar-theme-nocturne .topbar-menu-button:hover,
.topbar-theme-nocturne .topbar-menu[open] .topbar-menu-button {
  border-color: rgba(232, 226, 213, 0.28);
}
.topbar-menu-items {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 100;
  display: grid;
  gap: 3px;
  width: 232px;
  padding: 8px;
  border: 1px solid rgba(44, 41, 37, 0.18);
  border-radius: 10px;
  background: #f7f2e8;
  font-family: "Rubik", var(--font-sans);
  box-shadow: 0 18px 42px rgba(45, 41, 37, 0.22);
}
.topbar-theme-atelier .topbar-menu-items {
  background: #fff5d3;
  border-color: rgba(104, 72, 21, 0.2);
}
.topbar-theme-heritage .topbar-menu-items {
  background: #f8f6ee;
  border-color: rgba(31, 51, 41, 0.18);
}
.topbar-theme-nocturne .topbar-menu-items {
  background: #24211e;
  border-color: rgba(232, 226, 213, 0.18);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}
.topbar-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 40px;
  padding: 9px 13px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #2c2925;
  background: transparent;
  font-family: "Rubik", var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
}
.topbar-link:hover {
  color: #1f1d1a;
  border-color: rgba(44, 41, 37, 0.16);
  background: rgba(44, 41, 37, 0.07);
}
.topbar-link.is-active,
.topbar-link-strong {
  color: #1f1d1a;
  border-color: rgba(44, 41, 37, 0.18);
  background: rgba(44, 41, 37, 0.1);
}
.topbar-link-subtle {
  color: #5d574d;
  opacity: 0.82;
}
.topbar-theme-nocturne .topbar-link {
  color: #f1ece3;
}
.topbar-theme-nocturne .topbar-link:hover {
  color: #ffffff;
  border-color: rgba(232, 226, 213, 0.18);
  background: rgba(232, 226, 213, 0.08);
}
.topbar-theme-nocturne .topbar-link.is-active,
.topbar-theme-nocturne .topbar-link-strong {
  color: #ffffff;
  border-color: rgba(232, 226, 213, 0.22);
  background: rgba(232, 226, 213, 0.12);
}
.topbar-theme-nocturne .topbar-link-subtle {
  color: rgba(232, 226, 213, 0.74);
}

/* Editorial topbar menu */
.topbar-theme-classic,
body.landing-page,
body.memorial-shell,
body.admin-shell {
  --menu-bg: #faf6ec;
  --menu-border: rgba(139, 101, 31, 0.32);
  --menu-divider: rgba(139, 101, 31, 0.18);
  --menu-accent: #8b651f;
  --menu-accent-soft: rgba(139, 101, 31, 0.08);
  --menu-accent-strong: rgba(139, 101, 31, 0.14);
  --menu-eyebrow: #8b651f;
  --menu-text: #2c2418;
  --menu-text-muted: #6e5a3c;
  --menu-shadow: 0 14px 38px rgba(74, 55, 30, 0.16);
}

/* atelier → Linen */
body.memorial-theme-atelier,
.topbar-theme-atelier {
  --menu-bg: #faf6e8;
  --menu-border: rgba(139, 111, 55, 0.28);
  --menu-divider: rgba(139, 111, 55, 0.18);
  --menu-accent: #8a6f37;
  --menu-accent-soft: rgba(139, 111, 55, 0.08);
  --menu-accent-strong: rgba(139, 111, 55, 0.14);
  --menu-eyebrow: #8a6f37;
  --menu-text: #1c1814;
  --menu-text-muted: #8a7e68;
  --menu-shadow: 0 14px 38px rgba(74, 55, 30, 0.14);
}

/* heritage → Stone */
body.memorial-theme-heritage,
.topbar-theme-heritage {
  --menu-bg: #f3eee5;
  --menu-border: rgba(110, 93, 76, 0.28);
  --menu-divider: rgba(110, 93, 76, 0.18);
  --menu-accent: #6e5d4c;
  --menu-accent-soft: rgba(110, 93, 76, 0.08);
  --menu-accent-strong: rgba(110, 93, 76, 0.14);
  --menu-eyebrow: #6e5d4c;
  --menu-text: #2a2723;
  --menu-text-muted: #8a8580;
  --menu-shadow: 0 14px 38px rgba(60, 50, 40, 0.14);
}

/* nocturne → Sage */
body.memorial-theme-nocturne,
.topbar-theme-nocturne {
  --menu-bg: #f1f3eb;
  --menu-border: rgba(90, 110, 72, 0.28);
  --menu-divider: rgba(90, 110, 72, 0.18);
  --menu-accent: #5a6e48;
  --menu-accent-soft: rgba(90, 110, 72, 0.08);
  --menu-accent-strong: rgba(90, 110, 72, 0.14);
  --menu-eyebrow: #5a6e48;
  --menu-text: #1f2520;
  --menu-text-muted: #7c8478;
  --menu-shadow: 0 14px 38px rgba(40, 55, 40, 0.14);
}

/* stillwater → Mist */
body.memorial-theme-stillwater,
.topbar-theme-stillwater {
  --menu-bg: #eef2f4;
  --menu-border: rgba(60, 92, 115, 0.28);
  --menu-divider: rgba(60, 92, 115, 0.18);
  --menu-accent: #3d5e75;
  --menu-accent-soft: rgba(60, 92, 115, 0.08);
  --menu-accent-strong: rgba(60, 92, 115, 0.14);
  --menu-eyebrow: #3d5e75;
  --menu-text: #1f2731;
  --menu-text-muted: #7d8693;
  --menu-shadow: 0 14px 38px rgba(40, 55, 75, 0.14);
}

/* vesper → Rose */
body.memorial-theme-vesper,
.topbar-theme-vesper {
  --menu-bg: #f4ece6;
  --menu-border: rgba(155, 92, 80, 0.28);
  --menu-divider: rgba(155, 92, 80, 0.18);
  --menu-accent: #9a5d52;
  --menu-accent-soft: rgba(155, 92, 80, 0.08);
  --menu-accent-strong: rgba(155, 92, 80, 0.14);
  --menu-eyebrow: #9a5d52;
  --menu-text: #2a1f20;
  --menu-text-muted: #918074;
  --menu-shadow: 0 14px 38px rgba(70, 40, 40, 0.14);
}

.topbar-menu-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 36px;
  border: 1px solid var(--menu-border, rgba(40, 30, 15, 0.18));
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  list-style: none;
  transition: background 180ms ease, border-color 180ms ease;
}

.topbar-menu-button:hover,
.topbar-menu[open] .topbar-menu-button {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(40, 30, 15, 0.32);
}

.topbar-menu-button span {
  display: block;
  width: 16px;
  height: 1.5px;
  border-radius: 999px;
  background: var(--menu-text);
  opacity: 0.85;
}

.topbar-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 100;
  width: min(320px, calc(100vw - 32px));
  min-width: 260px;
  max-width: calc(100vw - 32px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--menu-border);
  border-radius: 4px;
  background: var(--menu-bg);
  box-shadow: var(--menu-shadow);
}

.topbar-menu-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  text-align: left;
  border-bottom: 1px solid var(--menu-divider);
}

.topbar-menu-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--menu-accent-soft);
  border: 1px solid var(--menu-border);
}

.topbar-menu-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--menu-accent);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.topbar-menu-user-text {
  min-width: 0;
}

.topbar-menu-user-name {
  margin: 0 0 2px;
  color: var(--menu-text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-menu-email {
  margin: 0;
  color: var(--menu-text-muted);
  font-family: "Inter", var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-menu-section {
  position: relative;
  padding: 8px 0 4px;
}

.topbar-menu-section + .topbar-menu-section {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--menu-divider);
}

.topbar-menu-section + .topbar-menu-section::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 5px;
  height: 5px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
}

.topbar-menu-label {
  display: block;
  padding: 10px 18px 6px;
  color: var(--menu-eyebrow);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
}

.topbar-menu-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 9px 18px;
  border-top: 0;
  color: var(--menu-text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
  text-decoration: none;
  transition: background 150ms ease;
}

.topbar-menu-user + .topbar-menu-link {
  border-top: 0;
}

.topbar-menu-panel > .topbar-menu-link:first-child {
  border-top: 0;
}

.topbar-menu-link:hover,
.topbar-menu-link:focus-visible {
  background: var(--menu-accent-soft);
  outline: none;
}

.topbar-menu-link.is-active {
  background: var(--menu-accent-strong);
}

.topbar-menu-link.is-active::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 3px;
  height: 3px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--menu-accent);
}

.topbar-menu-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--menu-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.3;
}

.topbar-menu-link-muted {
  color: var(--menu-text-muted);
  font-style: italic;
}

.topbar-menu-link-muted .topbar-menu-icon {
  stroke: var(--menu-text-muted);
  opacity: 0.75;
}

.topbar-menu-link-strong {
  font-weight: 600;
}

@media (max-width: 480px) {
  .topbar-menu-panel {
    width: min(300px, calc(100vw - 28px));
    min-width: 240px;
  }

  .topbar-menu-user {
    padding: 14px 16px;
  }

  .topbar-menu-link {
    gap: 12px;
    min-height: 52px;
    padding: 10px 16px;
    font-size: 17px;
  }

  .topbar-menu-label {
    padding: 6px 16px;
  }
}

@media (max-width: 900px) {
  .topbar {
    padding: 10px 16px;
    min-height: 56px;
    gap: 8px;
  }
}

@media (max-width: 520px) {
  .brand-title {
    font-size: 18px;
  }
  .brand-photomyne-logo {
    height: 12px;
  }
  .brand-by {
    font-size: 12px;
  }
  .topbar-menu-items {
    right: -2px;
    width: min(220px, calc(100vw - 32px));
  }
  .topbar-link {
    min-height: 32px;
    padding: 7px 10px;
    font-size: 13px;
  }
}

/* user dropdown */
.user-menu { position: relative; }
.user-menu summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px 12px 3px 3px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  transition: background 120ms ease, border-color 120ms ease;
}
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary::marker { display: none; content: ""; }
.user-menu summary:hover { background: var(--surface-2); border-color: var(--text-muted); }
.user-pill .user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
  border: none;
}
.user-pill .user-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-pill .caret { font-size: 9px; color: var(--text-soft); }

.user-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 13px;
  border: 1px solid var(--border);
}

.user-menu[open] .caret { transform: rotate(180deg); transition: transform 150ms ease; }

.user-menu-items {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(45, 41, 37, 0.10);
  min-width: 180px;
  padding: 4px;
  z-index: 100;
}
.user-menu-items a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border-bottom: none;
  color: var(--text);
  font-size: 14px;
}
.user-menu-items a:hover { background: var(--surface-2); color: var(--text); }

.avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 22px;
  border: 1px solid var(--border);
}

main {
  width: 100%;
  min-width: 0;
  max-width: 820px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-6) var(--space-12);
}

.admin-page {
  font-family: "Rubik", var(--font-sans);
}
.admin-shell .btn,
.admin-shell button,
.admin-shell .file-picker-button,
.admin-shell .user-menu summary,
.admin-shell .user-menu-items,
.profile-page .btn,
.profile-page button,
.profile-page .file-picker-button {
  font-family: "Rubik", var(--font-sans);
}

/* ---- typography helpers ---- */
.muted { color: var(--text-muted); }
.soft { color: var(--text-soft); }
.empty { color: var(--text-soft); font-style: italic; }
.eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  font-weight: 500;
}

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn:hover { background: var(--surface-2); border-color: var(--text-muted); }
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-primary.has-error {
  background: var(--danger);
  border-color: var(--danger);
}
.btn-danger {
  background: transparent;
  color: var(--danger);
  border-color: transparent;
}
.btn-danger:hover { background: rgba(138, 74, 62, 0.08); border-color: transparent; color: var(--danger-hover); }
.btn-sm { padding: 4px 10px; font-size: 13px; }
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-family: inherit;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.btn-icon:hover { background: var(--surface-2); color: var(--danger); }
.btn-confirm {
  color: var(--accent);
  border-color: rgba(94, 99, 88, 0.22);
}
.btn-confirm:hover {
  background: rgba(94, 99, 88, 0.08);
  color: var(--accent-hover);
  border-color: rgba(94, 99, 88, 0.35);
}

a.btn { border-bottom: 1px solid var(--border-strong); }
a.btn:hover { color: var(--text); }

/* ---- form elements ---- */
input[type="text"],
input[type="date"],
input[type="email"],
input[type="file"],
textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
textarea { resize: vertical; }
input[type="file"] { padding: 6px; }
input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(196, 184, 156, 0.25);
}

input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }

label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 4px; font-weight: 500; }

/* ---- top actions ---- */
.top-actions {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  font-size: 13px;
}
.top-actions a {
  color: var(--text-muted);
  border-bottom: none;
}
.top-actions a:hover { color: var(--text); }
.edit-top-actions {
  justify-content: flex-end;
  margin-bottom: var(--space-4);
}
.top-actions .edit-public-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.top-actions .edit-public-link:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--text-muted);
}
.edit-bottom-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.edit-finish-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.edit-finish-card h3 {
  margin: 0 0 4px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.edit-finish-card p {
  max-width: 720px;
  margin: 0;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
}
.edit-done-button {
  white-space: nowrap;
}
.edit-share-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.edit-share-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.edit-share-url {
  min-width: 0;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.edit-bottom-action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}
.edit-bottom-action-buttons a,
.edit-share-copy {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.edit-bottom-action-buttons a:hover,
.edit-share-copy:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--text-muted);
}
.edit-share-copy.is-copied {
  color: #385d3c;
  border-color: rgba(56, 93, 60, 0.24);
}

/* ---- page header ---- */
.page-header {
  margin-bottom: var(--space-8);
}
.page-header h1 { font-size: 30px; font-weight: 600; }
.page-header .subtitle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: 14px;
}
.slug-chip {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 13px;
  background: var(--surface-2);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--text);
}
.pill {
  display: inline-block;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
}
.pill-public { color: var(--accent); border-color: rgba(94, 99, 88, 0.4); }
.pill-private { color: var(--danger); border-color: rgba(138, 74, 62, 0.4); }

/* ---- card section ---- */
.section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.edit-page .section {
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.edit-page .section-header {
  margin-bottom: var(--space-4);
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-3);
}
.edit-page .section-header > div {
  min-width: 0;
  flex: 1;
}
.edit-page .portrait-row {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
}
.edit-page .form-grid {
  gap: var(--space-3) var(--space-4);
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.section-header h2 { font-size: 17px; }
.section-header .description {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 2px;
}
.section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  color: var(--accent);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.section-icon svg {
  width: 19px;
  height: 19px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- form grid ---- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-5);
}
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
}

.field { display: block; min-width: 0; }
.field label { margin-bottom: 6px; }

/* portrait row */
.portrait-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.portrait-preview {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  object-fit: cover;
  flex-shrink: 0;
}
.portrait-preview-stack {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 284px;
  flex-shrink: 0;
}
.portrait-preview-item {
  position: relative;
  flex: 0 0 auto;
}
/* Clipping wrapper so transform: scale on the img stays inside the circle. */
.portrait-preview-clip {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(45, 41, 37, 0.12);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.portrait-preview-clip:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(45, 41, 37, 0.18);
  border-color: var(--accent);
}
.portrait-preview-clip:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(94, 99, 88, 0.25);
}
.portrait-preview-clip .portrait-preview {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: none;
  object-fit: cover;
  display: block;
  transform-origin: center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}
.portrait-preview-stack .portrait-preview {
  box-shadow: 0 2px 8px rgba(45, 41, 37, 0.12);
}
.portrait-remove-button {
  appearance: none;
  position: absolute;
  top: -3px;
  right: -3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(138, 74, 62, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--danger);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(45, 41, 37, 0.16);
}
.portrait-remove-button:hover {
  color: var(--danger-hover);
  border-color: rgba(138, 74, 62, 0.45);
  background: #fff;
}
.portrait-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.portrait-row .field { flex: 1; }

.actions-row {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

/* ---- inline rows ---- */
.inline-form {
  display: flex;
  gap: var(--space-3);
  align-items: end;
}
.inline-form .field { flex: 1; }
.inline-form .field-narrow { flex: 0 0 160px; }
.milestone-form {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) auto;
  gap: 8px var(--space-3);
  align-items: start;
}
.milestone-form .field {
  min-width: 0;
}
.milestone-form .field-narrow {
  flex: none;
}
.milestone-date-mode {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  align-items: start;
}
.milestone-date-field {
  display: grid;
  gap: 0;
}
.milestone-date-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.milestone-date-options label {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  cursor: pointer;
}
.milestone-date-options input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.milestone-date-options span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
.milestone-date-options input:checked + span {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 0 0 3px rgba(94, 99, 88, 0.11);
}
.milestone-date-options input:focus-visible + span {
  outline: 2px solid rgba(94, 99, 88, 0.28);
  outline-offset: 2px;
}
.milestone-date-field .milestone-date-hint {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.35;
}
.milestone-submit {
  align-self: start;
  margin-top: 26px;
  min-width: 76px;
  height: 44px;
}
.milestone-suggestions {
  grid-column: 2 / -1;
  margin-top: 0;
}
.suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.suggestion-chips.milestone-suggestions {
  margin-top: 0;
}
.suggestion-chips button {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 4px 9px;
  font-family: var(--font-sans);
  font-size: 12px;
  cursor: pointer;
}
.suggestion-chips button:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

/* ---- privacy row ---- */
.privacy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.privacy-row > div {
  flex: 1 1 auto;
  min-width: 0;
}
.toggle-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 14px;
  color: var(--text);
  margin: 0;
  font-weight: 500;
}
.toggle-label .hint { color: var(--text-muted); font-weight: 400; font-size: 13px; }
.privacy-public-consent {
  overflow: hidden;
  max-height: 900px;
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: rgba(138, 74, 62, 0.06);
  border: 1px solid rgba(138, 74, 62, 0.18);
  border-radius: var(--radius-sm);
  animation: privacyConsentEnter 180ms ease-out both;
}
.privacy-public-consent[hidden] { display: none; }
.privacy-public-consent.is-success {
  background: rgba(94, 99, 88, 0.08);
  border-color: rgba(94, 99, 88, 0.2);
}
.privacy-public-consent.is-fading-out {
  pointer-events: none;
  animation: privacyConsentExit 700ms ease-in-out both;
}
.privacy-public-consent.is-disabled {
  background: var(--surface-2);
  border-color: var(--border);
}
.privacy-public-consent-copy {
  display: grid;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}
.privacy-public-consent-copy strong {
  color: var(--text);
  font-weight: 600;
}
.privacy-public-consent-copy a {
  color: var(--text);
  border-bottom-color: var(--border-strong);
}
.privacy-confirm {
  margin-top: var(--space-3);
  color: var(--danger);
}
.privacy-public-consent.is-disabled .privacy-confirm { color: var(--text-muted); }
.privacy-public-success {
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-3);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
  direction: ltr;
  text-align: left;
}
.privacy-public-success[hidden] { display: none; }
.privacy-public-success strong {
  color: var(--text);
  font-weight: 600;
}
@keyframes privacyConsentEnter {
  from {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    max-height: 900px;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
    transform: translateY(0);
  }
}
@keyframes privacyConsentExit {
  from {
    opacity: 1;
    max-height: 900px;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
    transform: translateY(0);
  }
  to {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    transform: translateY(-4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .privacy-public-consent {
    animation: none;
  }
}
.edit-delete-disclosure {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.edit-delete-disclosure summary {
  width: fit-content;
  color: var(--danger);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.edit-delete-disclosure form {
  display: grid;
  gap: var(--space-3);
  max-width: 520px;
  margin-top: var(--space-3);
  padding: var(--space-4);
  border: 1px solid rgba(138, 74, 62, 0.26);
  border-radius: var(--radius-sm);
  background: rgba(138, 74, 62, 0.05);
}
.edit-delete-disclosure p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
}
.edit-delete-disclosure .btn {
  justify-self: start;
}

/* ---- theme picker ---- */
.theme-form .actions-row {
  margin-top: var(--space-5);
}
.theme-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 880px) {
  .theme-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .theme-picker { grid-template-columns: 1fr; }
}
.theme-choice {
  position: relative;
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--space-4);
  min-height: 150px;
  margin: 0;
  padding: 16px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.theme-choice:hover {
  border-color: var(--border-strong);
  box-shadow: 0 8px 24px rgba(45, 41, 37, 0.08);
  transform: translateY(-1px);
}
.theme-choice input {
  position: absolute;
  inset: 12px 12px auto auto;
  width: 16px;
  height: 16px;
}
.theme-choice:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(94, 99, 88, 0.12), 0 10px 28px rgba(45, 41, 37, 0.08);
}
.theme-choice-preview {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #f6f3ed;
}
.theme-preview-hero,
.theme-preview-line {
  display: block;
  border-radius: 999px;
}
.theme-preview-hero {
  width: 58px;
  height: 58px;
  margin: 0 auto 2px;
  background: #ffffff;
  border: 1px solid #d4ccba;
  box-shadow: 0 7px 20px rgba(45, 41, 37, 0.08);
}
.theme-preview-line {
  width: 74px;
  height: 6px;
  margin: 0 auto;
  background: #5e6358;
}
.theme-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.theme-preview-grid span {
  display: block;
  aspect-ratio: 1;
  border-radius: 4px;
  background: #ffffff;
  border: 1px solid #e8e2d5;
}
/* classic → Warm paper with brass accents */
.theme-choice-classic .theme-choice-preview {
  background: #ece4cf;
  border-color: #c0a560;
}
.theme-choice-classic .theme-preview-hero {
  background: #f5efdf;
  border-color: #8b651f;
  box-shadow: 0 12px 28px rgba(74, 55, 30, 0.14);
}
.theme-choice-classic .theme-preview-line {
  background: #8b651f;
}
.theme-choice-classic .theme-preview-grid span {
  background: #f5efdf;
  border-color: #e6dec3;
}
.theme-choice-classic .theme-preview-grid span:nth-child(2) {
  background: #8b651f;
  border-color: #8b651f;
}
/* atelier → Linen */
.theme-choice-atelier .theme-choice-preview {
  background: #efe9d4;
  border-color: #d4c7a0;
}
.theme-choice-atelier .theme-preview-hero {
  background: #faf6e8;
  border-color: #c0a560;
  box-shadow: 0 12px 28px rgba(74, 55, 30, 0.14);
}
.theme-choice-atelier .theme-preview-line {
  background: #8a6f37;
}
.theme-choice-atelier .theme-preview-grid span {
  background: #faf6e8;
  border-color: #e6dec3;
}
.theme-choice-atelier .theme-preview-grid span:nth-child(2) {
  background: #8a6f37;
  border-color: #8a6f37;
}
/* heritage → Stone */
.theme-choice-heritage .theme-choice-preview {
  background: #eae3d4;
  border-color: #c4b8a2;
}
.theme-choice-heritage .theme-preview-hero {
  background: #f3eee5;
  border-color: #b0a395;
  box-shadow: 0 12px 28px rgba(60, 50, 40, 0.14);
}
.theme-choice-heritage .theme-preview-line {
  background: #6e5d4c;
}
.theme-choice-heritage .theme-preview-grid span {
  background: #f3eee5;
  border-color: #dad2bf;
}
.theme-choice-heritage .theme-preview-grid span:nth-child(2) {
  background: #6e5d4c;
  border-color: #6e5d4c;
}
/* nocturne → Sage */
.theme-choice-nocturne .theme-choice-preview {
  background: #e1e6d6;
  border-color: #b8c3a3;
}
.theme-choice-nocturne .theme-preview-hero {
  background: #f1f3eb;
  border-color: #a5b394;
  box-shadow: 0 12px 28px rgba(40, 55, 40, 0.14);
}
.theme-choice-nocturne .theme-preview-line {
  background: #5a6e48;
}
.theme-choice-nocturne .theme-preview-grid span {
  background: #f1f3eb;
  border-color: #d4dac3;
}
.theme-choice-nocturne .theme-preview-grid span:nth-child(2) {
  background: #5a6e48;
  border-color: #5a6e48;
}
/* stillwater → Mist */
.theme-choice-stillwater .theme-choice-preview {
  background: #dce4e8;
  border-color: #b3c0c9;
}
.theme-choice-stillwater .theme-preview-hero {
  background: #eef2f4;
  border-color: #a3b4c1;
  box-shadow: 0 12px 28px rgba(40, 55, 75, 0.14);
}
.theme-choice-stillwater .theme-preview-line {
  background: #3d5e75;
}
.theme-choice-stillwater .theme-preview-grid span {
  background: #eef2f4;
  border-color: #c8d3da;
}
.theme-choice-stillwater .theme-preview-grid span:nth-child(2) {
  background: #3d5e75;
  border-color: #3d5e75;
}
/* vesper → Rose */
.theme-choice-vesper .theme-choice-preview {
  background: #ead8cf;
  border-color: #d3b6a5;
}
.theme-choice-vesper .theme-preview-hero {
  background: #f4ece6;
  border-color: #c89a92;
  box-shadow: 0 12px 28px rgba(70, 40, 40, 0.14);
}
.theme-choice-vesper .theme-preview-line {
  background: #9a5d52;
}
.theme-choice-vesper .theme-preview-grid span {
  background: #f4ece6;
  border-color: #e0c9bc;
}
.theme-choice-vesper .theme-preview-grid span:nth-child(2) {
  background: #9a5d52;
  border-color: #9a5d52;
}
.theme-choice-copy {
  display: grid;
  align-content: center;
  gap: 5px;
  padding-right: 18px;
}
.theme-choice-copy strong {
  color: var(--text);
  font-size: 15px;
}
.theme-choice-copy span {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.4;
}
.subsection-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-3);
}
.subsection-title h3 {
  color: var(--text);
  font-size: 14px;
}
.subsection-title .muted {
  font-size: 12px;
}
.separator-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-4);
}
.separator-choice {
  position: relative;
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 16px 16px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.separator-choice:hover {
  border-color: var(--border-strong);
  background: var(--surface);
}
.separator-choice input {
  position: absolute;
  inset: 12px 12px auto auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}
.separator-choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(94, 99, 88, 0.12);
}
.separator-choice:has(input:checked) .separator-choice-preview {
  opacity: 1;
}
.separator-choice:has(input:checked) .separator-choice-copy strong {
  color: var(--accent);
}
.separator-choice-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 24px 0 0;
  opacity: 0.82;
}
.separator-line {
  display: block;
  height: 1px;
  background: #b8aa96;
}
.separator-mark {
  display: block;
  width: 10px;
  height: 10px;
  background: #c49a49;
}
.separator-mark > span {
  display: none;
}
.separator-preview-dot .separator-mark {
  border-radius: 50%;
}
.separator-preview-diamond .separator-mark {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  transform: rotate(45deg);
}
.separator-preview-triple-diamond {
  gap: 10px;
}
.separator-preview-triple-diamond .separator-line {
  background: #77736a;
}
.separator-preview-triple-diamond .separator-mark {
  display: grid;
  grid-template-columns: repeat(3, 9px);
  gap: 5px;
  width: auto;
  height: auto;
  background: transparent;
}
.separator-preview-triple-diamond .separator-mark > span {
  display: block;
  width: 8px;
  height: 8px;
  border: 2px solid #56524b;
  border-radius: 1px;
  background: transparent;
  transform: rotate(45deg);
}
.separator-preview-crest {
  gap: 12px;
}
.separator-preview-crest .separator-mark {
  position: relative;
  width: 18px;
  height: 10px;
  background: transparent;
}
.separator-preview-crest .separator-mark::before,
.separator-preview-crest .separator-mark::after {
  content: "";
  position: absolute;
  top: 1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c49a49;
}
.separator-preview-crest .separator-mark::before {
  left: 0;
}
.separator-preview-crest .separator-mark::after {
  right: 0;
}
/* Trefoil — three-lobed Gothic flourish */
.separator-preview-trefoil .separator-mark {
  position: relative;
  width: 22px;
  height: 18px;
  background: transparent;
}
.separator-preview-trefoil .separator-mark::before,
.separator-preview-trefoil .separator-mark::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid #8b7240;
  background: transparent;
}
.separator-preview-trefoil .separator-mark::before {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.separator-preview-trefoil .separator-mark::after {
  bottom: 0;
  left: 0;
  box-shadow: 11px 0 0 -1.5px #8b7240, 11px 0 0 0 transparent;
}
.separator-preview-trefoil .separator-mark > span {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid #8b7240;
  background: transparent;
}

/* Fleuron — typographic flourish */
.separator-preview-fleuron .separator-mark {
  position: relative;
  width: 22px;
  height: 18px;
  font-family: "EB Garamond", "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  line-height: 1;
  color: #8b7240;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.separator-preview-fleuron .separator-mark::before {
  content: "\2766";  /* ❦ floral heart */
}

/* Compass star — eight-pointed */
.separator-preview-compass-star .separator-mark {
  position: relative;
  width: 18px;
  height: 18px;
  background: transparent;
}
.separator-preview-compass-star .separator-mark::before,
.separator-preview-compass-star .separator-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: #8b7240;
  transform: translate(-50%, -50%);
  border-radius: 1px;
}
.separator-preview-compass-star .separator-mark::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.separator-preview-compass-star .separator-mark > span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 1.4px;
  background: #8b7240;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 1px;
  box-shadow: 0 0 0 0 transparent;
}
.separator-preview-compass-star .separator-mark > span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #8b7240;
  transform: rotate(90deg);
  border-radius: 1px;
}
.separator-choice-copy {
  display: block;
  text-align: center;
}
.separator-choice-copy strong {
  color: var(--text);
  font-size: 13px;
}
@media (max-width: 640px) {
  .separator-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .separator-choice {
    padding: 12px 10px 10px;
  }
  .separator-choice-preview {
    gap: 7px;
    min-height: 38px;
    padding-right: 18px;
  }
  .separator-choice-copy strong {
    font-size: 12px;
  }
}
.font-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (max-width: 880px) {
  .font-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .font-picker { grid-template-columns: 1fr; }
}
.font-choice {
  position: relative;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 14px 16px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.font-choice:hover {
  border-color: var(--border-strong);
  background: var(--surface);
}
.font-choice input {
  position: absolute;
  inset: 12px 12px auto auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}
.font-choice-sample {
  display: block;
  color: var(--text);
  padding-right: 24px;
  font-size: 17px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.font-choice strong {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}
.font-choice:has(input:checked) .font-choice-sample,
.font-choice:has(input:checked) strong {
  color: var(--accent);
}
.font-choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(94, 99, 88, 0.12);
}
.font-preview-garamond {
  font-family: "Cormorant Garamond", "Noto Serif Hebrew", Georgia, serif;
}
.font-preview-baskerville {
  font-family: "Libre Baskerville", "Noto Serif Hebrew", Georgia, serif;
}
.font-preview-lora {
  font-family: "Lora", "Noto Serif Hebrew", Georgia, serif;
}
.font-preview-source-serif {
  font-family: "Source Serif 4", "Noto Serif Hebrew", Georgia, serif;
}
.font-preview-poppins {
  font-family: "Poppins", "Noto Serif Hebrew", Arial, sans-serif;
}
.font-preview-verdana {
  font-family: Verdana, "Noto Serif Hebrew", Arial, sans-serif;
}
.font-preview-playfair-display {
  font-family: "Playfair Display", "Noto Serif Hebrew", Georgia, serif;
}
.album-column-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
}
.album-column-choice {
  position: relative;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.album-column-choice:hover {
  border-color: var(--border-strong);
  background: var(--surface);
}
.album-column-choice input {
  position: absolute;
  inset: 12px 12px auto auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}
.album-column-choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(94, 99, 88, 0.12);
}
.album-column-choice:has(input:checked) strong {
  color: var(--accent);
}
.album-column-preview {
  display: grid;
  grid-template-columns: repeat(var(--preview-columns), minmax(0, 1fr));
  gap: 5px;
  min-height: 44px;
  padding: 0 24px 0 0;
  align-items: stretch;
}
.album-column-preview-3 { --preview-columns: 3; }
.album-column-preview-4 { --preview-columns: 4; }
.album-column-preview-5 { --preview-columns: 5; }
.album-column-preview-6 { --preview-columns: 6; }
.album-column-preview span {
  display: block;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(196, 184, 156, 0.16));
}
.album-column-choice strong {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
}
.public-album-layout-card {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.public-album-layout-card .subsection-title {
  margin-top: 0;
}
.album-columns-card {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.album-columns-card .subsection-title {
  margin-top: 0;
}
.public-album-layout-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}
.public-album-layout-choice {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.public-album-layout-choice:hover {
  border-color: var(--border-strong);
  background: var(--surface);
}
.public-album-layout-choice input {
  position: absolute;
  inset: 12px 12px auto auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}
.public-album-layout-choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(94, 99, 88, 0.12);
}
.public-album-layout-preview {
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 72px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.5);
}
.layout-tab-row,
.layout-photo-row {
  display: grid;
  gap: 5px;
}
.layout-tab-row {
  grid-template-columns: 1.2fr 1fr 1fr;
}
.layout-tab-row span {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: var(--border-strong);
}
.layout-tab-row span:first-child {
  background: var(--accent);
}
.layout-photo-row {
  grid-template-columns: repeat(3, 1fr);
}
.layout-photo-row span {
  display: block;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(196, 184, 156, 0.16));
}
.public-album-layout-preview-all {
  gap: 6px;
}
.public-album-layout-preview-all .layout-photo-row span {
  min-height: 24px;
}
.public-album-layout-copy {
  display: grid;
  align-content: center;
  gap: 4px;
  padding-right: 18px;
}
.public-album-layout-copy strong {
  color: var(--text);
  font-size: 14px;
}
.public-album-layout-copy span,
.public-album-layout-note {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.4;
}
.autosave-row {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-4);
}
.autosave-status {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  min-height: 30px;
  padding: 5px 10px;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}
.autosave-status.is-saving {
  color: var(--accent);
  border-color: rgba(94, 99, 88, 0.32);
}
.autosave-status.is-saved {
  color: var(--accent);
}
.autosave-status.has-error {
  color: var(--danger);
  border-color: rgba(138, 74, 62, 0.28);
  background: rgba(138, 74, 62, 0.07);
}

/* ---- milestones list ---- */
.list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.list-row .date {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 96px;
}
.list-row .text { flex: 1; font-size: 14px; }
.compact-list {
  margin-top: var(--space-5);
  margin-bottom: 0;
}

/* ---- visitor candles table ---- */
.visitor-candles-table-wrap {
  margin-top: var(--space-5);
  max-height: 404px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.visitor-candles-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.visitor-candles-table th,
.visitor-candles-table td {
  height: 44px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
.visitor-candles-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 38px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
.visitor-candles-table tr:last-child td {
  border-bottom: 0;
}

.feedback-note-list {
  display: grid;
  gap: var(--space-3);
}
.feedback-note {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.feedback-note-head,
.feedback-note-contact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.feedback-note-head {
  justify-content: space-between;
}
.feedback-note-head time,
.feedback-note-contact {
  color: var(--text-muted);
  font-size: 12px;
}
.feedback-note p {
  color: var(--text);
  white-space: pre-line;
  word-break: break-word;
}
.feedback-kind-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(94, 99, 88, 0.12);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.feedback-kind-badge.is-report {
  background: rgba(138, 74, 62, 0.11);
  color: var(--danger);
}
.visitor-candle-number {
  width: 44px;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
}
.visitor-candle-name {
  width: 50%;
  color: var(--text);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.visitor-candle-date {
  width: 30%;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  white-space: nowrap;
}
.visitor-candle-action {
  width: 52px;
  text-align: right;
}
.visitor-candle-action form {
  display: inline-flex;
}

.milestone-row {
  padding: 6px 10px;
  gap: var(--space-2);
}
.milestone-row .date {
  min-width: 82px;
}
.milestone-row .btn-icon {
  width: 28px;
  height: 28px;
}

@media (max-width: 640px) {
  .milestone-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px 10px;
    padding: 12px 14px;
  }
  .milestone-row .date {
    grid-column: 1 / -1;
    min-width: 0;
    line-height: 1.35;
  }
  .milestone-row .milestone-text-edit {
    grid-column: 1;
    width: 100%;
    align-items: flex-start;
  }
  .milestone-row .milestone-text-edit .js-inline-value {
    overflow: visible;
    overflow-wrap: break-word;
    text-overflow: clip;
    white-space: normal;
  }
  .milestone-row .milestone-text-edit .inline-edit-trigger {
    margin-top: 1px;
  }
  .milestone-row .js-milestone-remove-form {
    grid-column: 2;
    grid-row: 2;
  }
}

/* ---- albums ---- */
.albums-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.38)),
    var(--surface-2);
  box-shadow: 0 10px 28px rgba(45, 41, 37, 0.06);
}
.albums-toolbar .inline-form { flex: 1; }
.albums-toolbar .album-create-upload-form {
  flex: 1;
}
.album-limit-description strong {
  color: var(--text);
  font-weight: 700;
}
.album-create-upload-form .field {
  margin: 0;
}
.album-create-upload-form .field > label:first-child {
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
}
.album-create-picker {
  min-height: 54px;
  border-color: var(--border-strong);
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}
.album-create-picker .file-picker-button {
  min-width: 190px;
  background: var(--accent);
  color: #fff;
  border-right-color: rgba(255, 255, 255, 0.28);
  font-size: 14px;
  font-weight: 700;
}
.album-create-picker .file-picker-name {
  font-size: 14px;
  font-weight: 600;
}
.album-create-upload-form .upload-hint {
  margin-top: 9px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
}

.album {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.album:last-child { margin-bottom: 0; }
.album-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.album-header > form:last-child { flex: 0 0 auto; }
.album-meta { color: var(--text-soft); font-size: 12px; margin-bottom: var(--space-3); }
.photo-order-hint {
  color: var(--text-muted);
}
.photo-order-status {
  color: var(--text-muted);
  font-size: 12px;
}
.photo-order-status.has-error {
  color: var(--danger);
}
.album-title-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
}
.album-title-label {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}

.edit-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  flex: 1;
}
.edit-inline summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  cursor: text;
}
.edit-inline summary::-webkit-details-marker { display: none; }
.edit-inline summary::marker { content: ""; display: none; }
.edit-inline-text {
  min-width: 0;
  color: var(--text);
  font-family: var(--font-sans);
  overflow: hidden;
  text-overflow: ellipsis;
}
.album-title-edit .edit-inline-text {
  font-size: 15px;
  font-weight: 600;
}
.caption-edit .edit-inline-text {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.25;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-word;
}
.caption-edit.is-editing .edit-inline-text {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
  text-overflow: clip;
}
.caption-edit .edit-inline-text.placeholder {
  color: var(--text-soft);
  font-style: italic;
}
.inline-text-editor {
  position: relative;
  max-width: 100%;
  cursor: text;
}
.inline-text-editor .js-inline-value {
  outline: none;
  border-radius: 3px;
  min-width: 1.25ch;
}
.inline-text-editor .inline-edit-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.inline-text-editor .inline-edit-trigger svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.inline-text-editor:hover .inline-edit-trigger,
.inline-text-editor .inline-edit-trigger:focus-visible {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
}
.inline-text-editor .inline-edit-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(94, 99, 88, 0.16);
}
.milestone-text-edit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.milestone-text-edit .js-inline-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.album-title-edit.is-editing,
.milestone-text-edit.is-editing {
  align-items: center;
}
.album-title-edit.is-editing .inline-edit-trigger,
.milestone-text-edit.is-editing .inline-edit-trigger {
  display: none;
}
.inline-text-editor .js-inline-value[contenteditable]:not([contenteditable="false"]) {
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 -1px 0 var(--border-strong);
  cursor: text;
}
.album-title-edit.is-editing .js-inline-value,
.milestone-text-edit.is-editing .js-inline-value {
  display: block;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(94, 99, 88, 0.12);
  cursor: text;
}
.inline-text-editor.is-saving .js-inline-value {
  opacity: 0.68;
}
.inline-text-editor.has-error .js-inline-value {
  box-shadow: inset 0 -1px 0 var(--danger);
}
.inline-edit-status {
  position: absolute;
  left: 0;
  top: calc(100% + 3px);
  color: var(--danger);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  align-items: start;
  gap: var(--space-3);
}
.photo {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: opacity 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.photo.is-dragging {
  opacity: 0.48;
  transform: scale(0.98);
}
.photo-grid.is-photo-dragging .photo:not(.is-dragging) {
  transition: transform 120ms ease;
}
.photo-thumb-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-2);
  cursor: grab;
}
.photo.is-dragging .photo-thumb-frame {
  cursor: grabbing;
}
.photo-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 10px;
}
.photo-edit-footer {
  display: flex;
  align-items: center;
  min-height: 20px;
}
.photo-remove-form {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 2;
  opacity: 0.92;
  transition: opacity 120ms ease;
}
.photo:hover .photo-remove-form {
  opacity: 1;
}
.inline-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(138, 74, 62, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  color: var(--danger);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(45, 41, 37, 0.14);
}
.inline-remove:hover {
  background: #fff;
  color: var(--danger-hover);
  border-color: rgba(138, 74, 62, 0.45);
}

.add-photo {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.upload-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: start;
}
.js-photo-upload-form {
  grid-template-columns: minmax(0, 1fr);
}
.upload-form .field { min-width: 0; }
.upload-submit {
  height: 44px;
  min-width: 112px;
  margin-top: 25px;
  white-space: nowrap;
}
.file-picker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}
.file-picker:focus-within {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(196, 184, 156, 0.25);
}
.file-picker-input {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px;
  max-width: 1px;
  padding: 0 !important;
  border: 0 !important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}
.file-picker-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding: 0 14px;
  border-right: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
}
.file-picker-name {
  min-width: 0;
  padding: 0 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.album-order-section[hidden] {
  display: none;
}
.album-order-form {
  margin: 0;
}
.album-order-list {
  display: grid;
  gap: 8px;
}
.album-order-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: grab;
  user-select: none;
}
.album-order-item.is-dragging {
  opacity: 0.45;
}
.album-order-handle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 30px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: grab;
}
.album-order-handle:active { cursor: grabbing; }
.album-order-handle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--text-muted);
  opacity: 0.78;
}
.album-order-name {
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.album-order-status {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: 12px;
}
.album-order-status.has-error {
  color: var(--danger);
}

.upload-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: rgba(44, 41, 37, 0.28);
  backdrop-filter: blur(2px);
}
.upload-modal[hidden] { display: none; }
.upload-modal-panel {
  width: min(360px, calc(100vw - 48px));
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 18px 54px rgba(45, 41, 37, 0.22);
  text-align: center;
}
.upload-modal-panel strong {
  font-size: 18px;
}
.upload-modal-panel p {
  color: var(--text-muted);
  font-size: 13px;
}
.upload-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  animation: spin 850ms linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---- profile (kept simple) ---- */
.profile-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.page-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.page-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
}
.page-info { min-width: 0; }
.page-title { font-weight: 600; font-size: 16px; border-bottom: none; }
.page-title:hover { color: var(--accent); }
.page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: 13px;
}
.page-actions a,
.delete-disclosure summary {
  color: var(--text-muted);
  border-bottom: none;
  cursor: pointer;
}
.page-actions a:hover,
.delete-disclosure summary:hover {
  color: var(--text);
}
.delete-disclosure {
  position: relative;
}
.delete-disclosure summary {
  list-style: none;
}
.delete-disclosure summary::-webkit-details-marker { display: none; }
.delete-disclosure summary::marker { content: ""; display: none; }
.delete-disclosure[open] summary {
  color: var(--danger);
}
.delete-disclosure form {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 5;
  display: grid;
  grid-template-columns: 210px auto;
  gap: var(--space-2);
  align-items: center;
  width: max-content;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(45, 41, 37, 0.12);
}
.confirm-slug {
  width: 100%;
  padding: 7px 9px;
  font-size: 12px;
}
.deleted-pages-section { margin-top: var(--space-8); }

.profile-notice-modal {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: grid;
  place-items: center;
  padding: 24px;
}
.profile-notice-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(28, 26, 23, 0.54);
  cursor: pointer;
}
.profile-notice-panel {
  position: relative;
  width: min(420px, calc(100vw - 48px));
  padding: 34px 30px 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 28px 70px rgba(45, 41, 37, 0.22);
  text-align: center;
}
.profile-notice-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.profile-notice-close:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.profile-notice-eyebrow {
  margin: 0 0 8px;
  color: var(--text-soft);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.profile-notice-modal.is-error .profile-notice-eyebrow {
  color: var(--danger);
}
.profile-notice-modal.is-success .profile-notice-eyebrow {
  color: var(--accent);
}
.profile-notice-panel h2 {
  margin: 0 0 12px;
  color: var(--text);
  font-family: "Rubik", var(--font-sans);
  font-size: 24px;
  line-height: 1.2;
}
.profile-notice-message {
  margin: 0;
  color: var(--text-muted);
  font-family: "Rubik", var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
}

.profile-page {
  width: min(1240px, calc(100vw - 48px));
  margin-left: 50%;
  transform: translateX(-50%);
  font-family: "Rubik", var(--font-sans);
}
.profile-hero-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 148px;
  align-items: center;
  gap: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  box-shadow: 0 8px 28px rgba(45, 41, 37, 0.07);
}
.profile-hero-note {
  max-width: 620px;
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.45;
}
.profile-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
}
.profile-hero-mark {
  width: 136px;
  height: 136px;
  justify-self: end;
  object-fit: contain;
  opacity: 0.94;
}
.profile-hero-card h1 {
  font-family: "Rubik", var(--font-sans);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: 0;
}
.profile-dashboard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-5);
}
.profile-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.profile-section-head h2 {
  font-family: "Rubik", var(--font-sans);
  font-size: 22px;
  letter-spacing: 0;
}
.profile-section-copy {
  max-width: 620px;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}
.profile-page-list {
  display: grid;
  gap: var(--space-3);
}
.profile-page-card {
  display: grid;
  grid-template-columns: minmax(400px, 1fr) 320px 360px;
  gap: 24px;
  align-items: center;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.profile-page-card.compact {
  grid-template-columns: minmax(0, 1fr) auto;
}
.profile-page-identity {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}
.profile-page-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: "Rubik", var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
}
.profile-page-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-page-main {
  min-width: 0;
}
.profile-page-title {
  display: inline-block;
  max-width: 100%;
  font-family: "Rubik", var(--font-sans);
  font-size: 19px;
  font-weight: 600;
  border-bottom: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-page-slug {
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 12px;
}
.profile-page-meta span + span::before {
  content: "·";
  margin-right: 6px;
  color: var(--text-soft);
}
.profile-page-meta .page-status-badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 500;
  line-height: 1.35;
}
.profile-page-meta .page-status-badge.is-public {
  background: #e7f1e6;
  color: #37543b;
  border: 1px solid #c7dcc5;
}
.profile-page-meta .page-status-badge.is-private {
  background: #fff1c9;
  color: #765a13;
  border: 1px solid #ead48f;
}
.profile-page-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 7px;
  color: var(--text-soft);
  font-size: 12px;
}
.profile-page-flags a,
.profile-page-flags span {
  border-bottom: none;
  color: var(--danger);
}
.profile-stats {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  align-content: center;
  gap: 10px 18px;
  margin: 0;
  padding-left: 18px;
  border-left: 1px solid var(--border);
  color: var(--text-muted);
}
.profile-stats div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.profile-stats div:last-child {
  grid-column: 1 / -1;
}
.profile-stats dt {
  color: var(--text-soft);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0.06em;
  margin-bottom: 0;
}
.profile-stats dt::after {
  content: ":";
}
.profile-stats dd {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.profile-stats .relative-time {
  color: var(--text-muted);
  font-weight: 400;
}
.profile-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}
.profile-page-actions .btn-primary {
  min-width: 64px;
}
.js-copy-page-link.is-copied {
  border-color: var(--accent);
  color: var(--accent);
}
.profile-more summary.btn:not(.btn-danger) {
  color: var(--text);
}
.profile-more summary.btn.btn-danger {
  color: var(--danger);
  border-color: rgba(138, 74, 62, 0.24);
  border-bottom-color: rgba(138, 74, 62, 0.24);
  text-decoration: none;
}
.profile-more[open] summary.btn {
  color: var(--danger);
  border-color: var(--text-muted);
  text-decoration: none;
}
.profile-delete form {
  grid-template-columns: 1fr;
  width: 260px;
}
.profile-delete form p {
  color: var(--text-muted);
  font-size: 12px;
}

.profile-studio {
  display: grid;
  gap: 22px;
}

.profile-studio .profile-panel {
  background: #ffffff;
  border: 1px solid rgba(44, 41, 37, 0.12);
  border-radius: 14px;
  box-shadow: 0 14px 42px rgba(44, 41, 37, 0.07);
}

.profile-studio .profile-account {
  padding: 22px 24px;
}

.profile-studio .account-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}

.profile-studio .avatar-wrap {
  position: relative;
  width: 74px;
  height: 74px;
}

.profile-studio .avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  overflow: hidden;
  border-radius: 50%;
  background: #f4efe4;
  border: 1px solid rgba(44, 41, 37, 0.14);
  color: #6b5b38;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 30px;
  font-weight: 600;
}

.profile-studio .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-studio .avatar-status {
  position: absolute;
  right: 2px;
  bottom: 6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #5c8d62;
  border: 2px solid #ffffff;
}

.profile-studio .account-copy {
  min-width: 0;
}

.profile-studio .eyebrow {
  margin: 0 0 5px;
  color: #867766;
  font-family: "Inter", var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.profile-studio .account-name {
  margin: 0;
  color: #2e2b27;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.05;
}

.profile-studio .account-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: #70685e;
  font-size: 13px;
}

.profile-studio .meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c8bda9;
}

.profile-studio .account-actions {
  display: flex;
  justify-content: flex-end;
}

.profile-studio .text-link {
  color: #6f5f45;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(111, 95, 69, 0.32);
}

.profile-studio .stats-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #ffffff;
  border: 1px solid rgba(44, 41, 37, 0.12);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(44, 41, 37, 0.055);
}

.profile-studio .stat-tile {
  min-width: 0;
  padding: 18px 20px;
}

.profile-studio .stat-tile + .stat-tile {
  border-left: 1px solid rgba(44, 41, 37, 0.1);
}

.profile-studio .stat-label {
  display: block;
  color: #867766;
  font-family: "Inter", var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.profile-studio .stat-value {
  display: block;
  margin-top: 7px;
  color: #2e2b27;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
}

.profile-studio .stat-value-time {
  font-size: 24px;
  white-space: nowrap;
}

.profile-studio .stat-sub {
  margin: 7px 0 0;
  color: #786f64;
  font-size: 12px;
  line-height: 1.35;
}

.profile-studio .profile-pages {
  padding: 24px;
}

.profile-studio .pages-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.profile-studio .pages-title {
  margin: 0;
  color: #2e2b27;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
}

.profile-studio .pages-count {
  margin-left: 8px;
  color: #897f72;
  font-family: "Inter", var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.profile-studio .btn-primary-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 17px;
  border-radius: 999px;
  background: #2e2b27;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #2e2b27;
}

.profile-studio .btn-primary-pill svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.profile-studio .profile-page-list {
  display: grid;
  gap: 14px;
}

.profile-studio .page-card {
  overflow: visible;
  background: #ffffff;
  border: 1px solid rgba(44, 41, 37, 0.13);
  border-radius: 12px;
  transition: box-shadow 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.profile-studio .page-card:hover {
  border-color: rgba(44, 41, 37, 0.22);
  box-shadow: 0 14px 34px rgba(44, 41, 37, 0.08);
  transform: translateY(-1px);
}

.profile-studio .page-card-main {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px;
}

.profile-studio .page-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  overflow: hidden;
  border-radius: 10px;
  background: #f4efe4;
  border: 1px solid rgba(44, 41, 37, 0.12);
  color: #7c715f;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 30px;
  font-weight: 600;
  text-decoration: none;
}

.profile-studio .page-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-studio .page-thumb-theme {
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}

.profile-studio .page-info {
  min-width: 0;
}

.profile-studio .page-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.profile-studio .page-name {
  min-width: 0;
  color: #2e2b27;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.12;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-studio .public-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.profile-studio .public-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.profile-studio .public-pill.is-public {
  background: #edf6eb;
  color: #385d3c;
}

.profile-studio .public-pill.is-public::before {
  background: #4f8f55;
}

.profile-studio .public-pill.is-private {
  background: #f4efe6;
  color: #796a59;
}

.profile-studio .public-pill.is-private::before {
  background: #9b8f7d;
}

.profile-studio .page-slug {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 5px 0 0;
  color: #746b61;
  font-family: "Inter", var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-studio .page-slug-host {
  color: #aaa091;
}

.profile-studio .page-slug-copy {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid rgba(44, 41, 37, 0.14);
  border-radius: 999px;
  background: #fbfaf7;
  color: #6b5b38;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.profile-studio .page-slug-copy.is-copied,
.profile-studio .page-more-item.is-copied {
  color: #385d3c;
  border-color: rgba(56, 93, 60, 0.24);
}

.profile-studio .page-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.profile-studio .stat-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #746b61;
  font-size: 12px;
  line-height: 1.2;
}

.profile-studio .stat-inline svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #8b651f;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-studio .stat-inline-value {
  color: #2e2b27;
  font-weight: 700;
}

.profile-studio .stat-inline-sep {
  color: #b5aa98;
}

.profile-studio .page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.profile-studio .btn-icon,
.profile-studio .btn-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border: 1px solid rgba(44, 41, 37, 0.15);
  background: #ffffff;
  color: #3f3a34;
  text-decoration: none;
}

.profile-studio .btn-icon {
  width: 38px;
  border-radius: 50%;
}

.profile-studio .btn-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-studio .btn-edit {
  min-width: 64px;
  padding: 0 15px;
  border-radius: 999px;
  background: #2e2b27;
  border-color: #2e2b27;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.profile-studio .page-more {
  position: relative;
}

.profile-studio .page-more > summary {
  list-style: none;
  cursor: pointer;
}

.profile-studio .page-more > summary::-webkit-details-marker,
.profile-studio .page-more > summary::marker {
  display: none;
  content: "";
}

.profile-studio .page-more-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  width: 250px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid rgba(44, 41, 37, 0.14);
  border-radius: 10px;
  box-shadow: 0 16px 34px rgba(44, 41, 37, 0.16);
}

.profile-studio .page-more-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #3f3a34;
  font-family: "Inter", var(--font-sans);
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.profile-studio .page-more-item:hover {
  background: #f5f1e9;
}

.profile-studio .page-more-danger {
  color: #8a4a3e;
}

.profile-studio .delete-disclosure > summary {
  list-style: none;
}

.profile-studio .delete-disclosure > summary::-webkit-details-marker,
.profile-studio .delete-disclosure > summary::marker {
  display: none;
  content: "";
}

.profile-studio .delete-disclosure form {
  display: grid;
  gap: 9px;
  padding: 10px;
}

.profile-studio .delete-disclosure form p {
  margin: 0;
  color: #746b61;
  font-size: 12px;
  line-height: 1.35;
}

.profile-studio .page-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-top: 1px solid rgba(44, 41, 37, 0.09);
  border-radius: 0 0 12px 12px;
  background: #fbfaf7;
  color: #746b61;
  font-size: 12px;
}

.profile-studio .activity-row {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.profile-studio .activity-row strong {
  color: #2e2b27;
  font-weight: 700;
}

.profile-studio .activity-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8b651f;
}

.profile-studio .activity-empty {
  color: #9b9184;
}

.profile-studio .footer-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  color: #8b8276;
}

.profile-studio .profile-admin-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  color: #746b61;
  font-size: 13px;
}

.profile-studio .profile-admin-row a {
  color: inherit;
}

/* ---- admin pages ---- */
.admin-pages-shell main {
  max-width: 1240px;
}
.admin-pages-page .page-header {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.admin-nav,
.admin-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.admin-nav-link,
.admin-page-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.5);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.admin-nav-link:hover,
.admin-page-actions a:hover {
  border-color: rgba(94, 99, 88, 0.32);
  background: rgba(94, 99, 88, 0.08);
}
.admin-nav-link.is-active {
  border-color: rgba(94, 99, 88, 0.44);
  background: rgba(94, 99, 88, 0.12);
  color: var(--text);
}
.admin-pages-overview {
  padding: var(--space-4);
}
.admin-pages-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
}
.admin-pages-kpi {
  display: grid;
  gap: 6px;
  min-height: 104px;
  padding: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.admin-pages-kpi span,
.admin-pages-list-head span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.admin-pages-kpi strong {
  color: var(--text);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
}
.admin-pages-list-section {
  padding: var(--space-4);
}
.admin-pages-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.admin-pages-list-head h2 {
  margin: 0;
  font-size: 28px;
}
.admin-pages-list {
  display: grid;
  gap: 12px;
}
.admin-page-row {
  display: grid;
  grid-template-columns: 72px minmax(260px, 1.35fr) minmax(180px, 0.8fr) minmax(150px, 0.7fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.admin-page-thumb {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 50%;
  overflow: hidden;
  color: var(--accent);
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
}
.admin-page-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.admin-page-thumb-muted {
  text-decoration: none;
}
.admin-page-info {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.admin-page-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.admin-page-title {
  overflow: hidden;
  color: var(--text);
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-page-status {
  flex: 0 0 auto;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.admin-page-status.is-public {
  border-color: rgba(94, 99, 88, 0.28);
  color: var(--accent);
}
.admin-page-status.is-private {
  border-color: rgba(122, 47, 58, 0.28);
  color: #7a2f3a;
}
.admin-page-slug {
  margin: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-page-slug span {
  color: var(--text-soft);
}
.admin-page-owner {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.admin-page-owner img,
.admin-page-owner > span {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.admin-page-owner img {
  object-fit: cover;
}
.admin-page-owner > span {
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}
.admin-page-owner div {
  display: grid;
  min-width: 0;
}
.admin-page-owner strong,
.admin-page-owner em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-page-owner strong {
  color: var(--text);
  font-size: 13px;
}
.admin-page-owner em {
  color: var(--text-muted);
  font-size: 12px;
  font-style: normal;
}
.admin-page-metrics,
.admin-page-dates {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: 13px;
}
.admin-page-metrics strong {
  color: var(--text);
  font-weight: 700;
}
.admin-page-delete-form { display: inline; margin: 0; }
.admin-protected-badge {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(94, 99, 88, 0.24);
  border-radius: var(--radius-sm);
  background: rgba(94, 99, 88, 0.08);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.admin-audit-row {
  grid-template-columns: 72px minmax(260px, 1.3fr) minmax(170px, 0.7fr) minmax(200px, 0.8fr);
}
.admin-user-row {
  grid-template-columns: 72px minmax(260px, 1.4fr) minmax(170px, 0.7fr) minmax(160px, 0.7fr) auto;
}
.admin-blocked-row {
  grid-template-columns: 72px minmax(280px, 1.4fr) minmax(220px, 0.8fr) auto;
}
.admin-block-section {
  padding: var(--space-4);
}
.admin-flash-list {
  display: grid;
  gap: 8px;
  margin-bottom: var(--space-4);
}
.admin-flash {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}
.admin-flash-error {
  border-color: rgba(138, 58, 52, 0.32);
  color: #8a3a34;
}
.admin-flash-success {
  border-color: rgba(94, 99, 88, 0.32);
  color: var(--accent);
}
.admin-block-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.admin-block-form label {
  display: grid;
  gap: 7px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.admin-block-form input {
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: 600 16px/1.3 var(--sans);
  letter-spacing: 0;
  text-transform: none;
}
.admin-notifications-section {
  margin-bottom: var(--space-5);
}
.admin-notifications-table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.admin-notifications-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
  color: var(--text);
  font-size: 13px;
}
.admin-notifications-table th,
.admin-notifications-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.admin-notifications-table th {
  background: rgba(94, 99, 88, 0.07);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.admin-notifications-table tbody tr:last-child td {
  border-bottom: 0;
}
.admin-notification-type-cell {
  width: 260px;
}
.admin-notification-type-cell strong,
.admin-notification-type-cell code,
.admin-notification-type-cell span,
.admin-notification-count,
.admin-notification-muted {
  display: block;
}
.admin-notification-type-cell strong {
  color: var(--text);
  font-size: 15px;
}
.admin-notification-type-cell code {
  width: fit-content;
  margin-top: 4px;
  padding: 2px 6px;
  background: rgba(44, 41, 37, 0.06);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  font: 700 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.admin-notification-type-cell span {
  margin-top: 8px;
  color: var(--text-muted);
  line-height: 1.45;
}
.admin-notification-count,
.admin-notification-muted {
  margin-top: 7px;
  color: var(--text-muted);
  font-size: 12px;
}
.admin-notification-recipient-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.admin-notification-recipient-list li,
.admin-notification-remove-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.admin-notification-recipient-list strong,
.admin-notification-remove-form strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-notification-recipient-list span,
.admin-notification-remove-form em {
  color: var(--text-muted);
  font-size: 11px;
  font-style: normal;
}
.admin-notification-admin-list {
  display: grid;
  gap: 8px;
}
.admin-notification-remove-form {
  margin: 0;
}
.admin-notification-remove-form span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.admin-notification-remove-form button,
.admin-notification-add-form button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.admin-notification-remove-form button {
  color: #8a3a34;
}
.admin-notification-add-form {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto;
  gap: 8px;
  min-width: 260px;
}
.admin-notification-add-form input {
  min-height: 34px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: 600 13px/1.3 var(--sans);
}

/* ---- admin health ---- */
.admin-health-shell main {
  max-width: 1240px;
}
.admin-health-page .page-header {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.health-summary-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border-color: rgba(94, 99, 88, 0.22);
}
.health-summary-section h2 {
  margin: 4px 0 0;
  font-size: 34px;
}
.health-summary-section p {
  margin: 6px 0 0;
  color: var(--text-muted);
}
.health-summary-ok {
  background: linear-gradient(145deg, rgba(94, 99, 88, 0.12), rgba(255, 255, 255, 0.7));
}
.health-summary-warning {
  background: linear-gradient(145deg, rgba(138, 111, 55, 0.16), rgba(255, 255, 255, 0.72));
}
.health-summary-problem {
  background: linear-gradient(145deg, rgba(122, 47, 58, 0.16), rgba(255, 255, 255, 0.72));
}
.health-refresh {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.health-grid-section {
  padding: var(--space-4);
}
.health-check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.health-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 190px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.health-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.health-status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #5e6358;
  box-shadow: 0 0 0 4px rgba(94, 99, 88, 0.12);
}
.health-card-warning .health-status-dot {
  background: #8a6f37;
  box-shadow: 0 0 0 4px rgba(138, 111, 55, 0.15);
}
.health-card-problem .health-status-dot {
  background: #7a2f3a;
  box-shadow: 0 0 0 4px rgba(122, 47, 58, 0.14);
}
.health-card-status {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.health-card h2 {
  margin: 0;
  font-size: 24px;
}
.health-card-summary {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
}
.health-card-detail {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.health-card-link {
  width: fit-content;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.health-meta-list {
  display: grid;
  gap: 7px;
  margin: 4px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.health-meta-list div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px;
}
.health-meta-list dt,
.health-meta-list dd {
  margin: 0;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.health-meta-list dt {
  color: var(--text-soft);
  font-weight: 700;
  text-transform: capitalize;
}
.health-meta-list dd {
  color: var(--text-muted);
}

@media (max-width: 980px) {
  .admin-pages-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .health-check-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-page-row {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .admin-audit-row,
  .admin-user-row,
  .admin-blocked-row {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .admin-page-metrics,
  .admin-page-dates,
  .admin-page-row-actions {
    grid-column: 1 / -1;
  }
  .admin-block-form {
    grid-template-columns: 1fr;
  }

  .admin-page-row-actions {
    justify-content: flex-start;
  }

  .profile-studio .stats-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-studio .stat-tile:nth-child(3) {
    border-left: 0;
    border-top: 1px solid rgba(44, 41, 37, 0.1);
  }

  .profile-studio .stat-tile:nth-child(4) {
    border-top: 1px solid rgba(44, 41, 37, 0.1);
  }

  .profile-studio .page-card-main {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .profile-studio .page-thumb {
    width: 76px;
    height: 76px;
  }

  .profile-studio .page-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .health-summary-section {
    align-items: flex-start;
    flex-direction: column;
  }

  .health-check-grid {
    grid-template-columns: 1fr;
  }

  .health-refresh {
    width: 100%;
  }

  .health-meta-list div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .admin-pages-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-pages-list-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-page-row {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
  }

  .admin-page-thumb {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }

  .admin-page-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .admin-page-title {
    font-size: 22px;
  }

  .admin-page-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-page-row-actions a {
    flex: 1 1 auto;
    justify-content: center;
  }

  .edit-finish-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .edit-finish-card h2 {
    font-size: 24px;
  }

  .edit-done-button,
  .edit-bottom-action-buttons a,
  .edit-share-copy {
    width: 100%;
  }

  .edit-share-link {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .edit-bottom-action-buttons {
    flex-direction: column;
  }

  .profile-studio {
    gap: 16px;
  }

  .profile-studio .profile-account,
  .profile-studio .profile-pages {
    padding: 18px;
  }

  .profile-studio .account-grid {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .profile-studio .account-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .profile-studio .stats-bar {
    grid-template-columns: 1fr;
  }

  .profile-studio .stat-tile + .stat-tile,
  .profile-studio .stat-tile:nth-child(3),
  .profile-studio .stat-tile:nth-child(4) {
    border-left: 0;
    border-top: 1px solid rgba(44, 41, 37, 0.1);
  }

  .profile-studio .pages-header {
    display: grid;
  }

  .profile-studio .page-card-main {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
  }

  .profile-studio .page-thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
  }

  .profile-studio .page-header-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .profile-studio .page-name {
    font-size: 22px;
  }

  .profile-studio .page-actions {
    gap: 7px;
  }

  .profile-studio .page-card-footer {
    align-items: flex-start;
    flex-direction: column;
    padding: 12px 14px;
  }

  .profile-studio .page-more-menu {
    right: auto;
    left: 0;
  }
}

/* ---- hero / index ---- */
.hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-8) var(--space-12);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.hero-mark {
  display: block;
  width: 188px;
  height: 188px;
  object-fit: contain;
  margin: 0 auto var(--space-4);
}
.hero h1 { font-size: 32px; }
.hero p { color: var(--text-muted); margin: var(--space-3) 0 var(--space-6); }

.not-found-page {
  max-width: 620px;
  margin: var(--space-12) auto;
  padding: var(--space-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.not-found-page h1 {
  margin-top: var(--space-2);
  font-size: 28px;
}
.not-found-page .muted {
  margin-top: var(--space-3);
}

/* Google Sign-In button — follows Google brand guidelines */
.gsi-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 16px;
  background: #ffffff;
  color: #1f1f1f;
  font-family: "Roboto", "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.25px;
  border: 1px solid #747775;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  user-select: none;
}
.gsi-button:hover {
  background: #f8faff;
  border-color: #747775;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.30), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  color: #1f1f1f;
}
.gsi-button:active { background: #f1f3f5; }
.gsi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.gsi-text { line-height: 20px; }

/* ---- create page ---- */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}
.form-card label { margin: var(--space-4) 0 6px; }
.create-pricing-note {
  margin-top: var(--space-3);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}
.preview { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: 13px; }
.preview code {
  background: var(--surface-2);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: var(--text);
}
.error {
  margin-top: var(--space-3);
  background: rgba(138, 74, 62, 0.08);
  color: var(--danger);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  border: 1px solid rgba(138, 74, 62, 0.18);
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ---- public memorial page ---- */
:root {
  --serif: "Cormorant Garamond", "Noto Serif Hebrew", Georgia, serif;
  --serif-he: "Noto Serif Hebrew", "Cormorant Garamond", Georgia, serif;
}

/* classic → Warm paper with brass accents */
body.memorial-theme-classic {
  --bg: #f5efdf;
  --surface: #fbf5e5;
  --surface-2: #ece4cf;
  --text: #1f1410;
  --text-muted: #6e5a3c;
  --text-soft: #a08864;
  --border: #e6dec3;
  --border-strong: #d4ccba;
  --accent: #8b651f;
  --accent-hover: #6f4f17;
  --drop-cap-color: #8a6f37;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 246, 224, 0.7), rgba(255, 246, 224, 0) 33rem),
    linear-gradient(180deg, #f5efdf 0%, #ece4cf 52%, #f0e7d2 100%);
}
body.memorial-theme-classic .topbar {
  --topbar-bg: #f5efdf;
  --topbar-text: #1f1410;
  --topbar-muted: rgba(31, 20, 16, 0.66);
  --topbar-border: rgba(139, 101, 31, 0.18);
  --topbar-link-bg: rgba(255, 255, 255, 0.55);
  --topbar-link-hover: rgba(31, 20, 16, 0.06);
  --topbar-link-active: rgba(31, 20, 16, 0.12);
  --topbar-logo-filter: brightness(0) saturate(100%);
  --topbar-logo-opacity: 0.58;
}

/* atelier → Linen */
body.memorial-theme-atelier {
  --bg: #faf6e8;
  --surface: #fefcf3;
  --surface-2: #f3eccf;
  --text: #1c1814;
  --text-muted: #8a7e68;
  --text-soft: #a8987c;
  --border: #e6dec3;
  --border-strong: #c0a560;
  --accent: #8a6f37;
  --accent-hover: #6f5a2c;
  --drop-cap-color: #8a6f37;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 252, 246, 0.92), rgba(255, 252, 246, 0) 33rem),
    linear-gradient(180deg, #faf6e8 0%, #efe9d4 50%, #f3eccf 100%);
}
body.memorial-theme-atelier .topbar {
  --topbar-bg: #faf6e8;
  --topbar-text: #1c1814;
  --topbar-muted: rgba(28, 24, 20, 0.66);
  --topbar-border: rgba(139, 111, 55, 0.18);
  --topbar-link-bg: rgba(255, 255, 255, 0.55);
  --topbar-link-hover: rgba(40, 30, 15, 0.06);
  --topbar-link-active: rgba(40, 30, 15, 0.12);
  --topbar-logo-filter: brightness(0) saturate(100%);
  --topbar-logo-opacity: 0.58;
}

/* heritage → Stone */
body.memorial-theme-heritage {
  --bg: #f3eee5;
  --surface: #fbf8f1;
  --surface-2: #eae3d4;
  --text: #2a2723;
  --text-muted: #5e574e;
  --text-soft: #857e74;
  --border: #dad2bf;
  --border-strong: #b0a395;
  --accent: #6e5d4c;
  --accent-hover: #5a4e3f;
  --drop-cap-color: #6e5d4c;
  --danger: #7a4a4a;
  background:
    radial-gradient(circle at 50% 0%, rgba(252, 250, 245, 0.92), rgba(252, 250, 245, 0) 34rem),
    linear-gradient(180deg, #f3eee5 0%, #eae3d4 52%, #eee7d8 100%);
}
body.memorial-theme-heritage .topbar {
  --topbar-bg: #f3eee5;
  --topbar-text: #2a2723;
  --topbar-muted: rgba(60, 50, 40, 0.66);
  --topbar-border: rgba(110, 93, 76, 0.18);
  --topbar-link-bg: rgba(255, 255, 255, 0.55);
  --topbar-link-hover: rgba(60, 50, 40, 0.06);
  --topbar-link-active: rgba(60, 50, 40, 0.12);
  --topbar-logo-filter: brightness(0) saturate(100%);
  --topbar-logo-opacity: 0.58;
}

/* nocturne → Sage */
body.memorial-theme-nocturne {
  --bg: #f1f3eb;
  --surface: #fafcf6;
  --surface-2: #e8ebe0;
  --text: #1f2520;
  --text-muted: #7c8478;
  --text-soft: #9da59a;
  --border: #d4dac3;
  --border-strong: #a5b394;
  --accent: #5a6e48;
  --accent-hover: #4a5e38;
  --drop-cap-color: #5a6e48;
  --danger: #7a4a4a;
  background:
    radial-gradient(circle at 50% 0%, rgba(251, 253, 247, 0.92), rgba(251, 253, 247, 0) 34rem),
    linear-gradient(180deg, #f1f3eb 0%, #e8ebe0 52%, #ecefdf 100%);
}
body.memorial-theme-nocturne .topbar {
  --topbar-bg: #f1f3eb;
  --topbar-text: #1f2520;
  --topbar-muted: rgba(40, 55, 40, 0.66);
  --topbar-border: rgba(90, 110, 72, 0.18);
  --topbar-link-bg: rgba(255, 255, 255, 0.55);
  --topbar-link-hover: rgba(40, 55, 40, 0.06);
  --topbar-link-active: rgba(40, 55, 40, 0.12);
  --topbar-logo-filter: brightness(0) saturate(100%);
  --topbar-logo-opacity: 0.58;
}

/* stillwater → Mist */
body.memorial-theme-stillwater {
  --bg: #eef2f4;
  --surface: #fbfcfd;
  --surface-2: #e3eaee;
  --text: #1f2731;
  --text-muted: #7d8693;
  --text-soft: #9aa3ad;
  --border: #c8d3da;
  --border-strong: #a3b4c1;
  --accent: #3d5e75;
  --accent-hover: #2d4e65;
  --drop-cap-color: #3d5e75;
  --danger: #7a4a4a;
  background:
    radial-gradient(circle at 50% 0%, rgba(251, 253, 254, 0.92), rgba(251, 253, 254, 0) 34rem),
    linear-gradient(180deg, #eef2f4 0%, #dce4e8 52%, #e6edf0 100%);
}
body.memorial-theme-stillwater .topbar {
  --topbar-bg: #eef2f4;
  --topbar-text: #1f2731;
  --topbar-muted: rgba(40, 55, 75, 0.66);
  --topbar-border: rgba(60, 92, 115, 0.18);
  --topbar-link-bg: rgba(255, 255, 255, 0.55);
  --topbar-link-hover: rgba(40, 55, 75, 0.06);
  --topbar-link-active: rgba(40, 55, 75, 0.12);
  --topbar-logo-filter: brightness(0) saturate(100%);
  --topbar-logo-opacity: 0.58;
}

/* vesper → Rose */
body.memorial-theme-vesper {
  --bg: #f4ece6;
  --surface: #fbf5f0;
  --surface-2: #ead8cf;
  --text: #2a1f20;
  --text-muted: #918074;
  --text-soft: #b0a098;
  --border: #e0c9bc;
  --border-strong: #c89a92;
  --accent: #9a5d52;
  --accent-hover: #834a42;
  --drop-cap-color: #9a5d52;
  --danger: #7a3a3a;
  background:
    radial-gradient(circle at 50% 0%, rgba(254, 248, 245, 0.92), rgba(254, 248, 245, 0) 34rem),
    linear-gradient(180deg, #f4ece6 0%, #ead8cf 52%, #eee0d8 100%);
}
body.memorial-theme-vesper .topbar {
  --topbar-bg: #f4ece6;
  --topbar-text: #2a1f20;
  --topbar-muted: rgba(70, 40, 40, 0.66);
  --topbar-border: rgba(155, 92, 80, 0.18);
  --topbar-link-bg: rgba(255, 255, 255, 0.55);
  --topbar-link-hover: rgba(70, 40, 40, 0.06);
  --topbar-link-active: rgba(70, 40, 40, 0.12);
  --topbar-logo-filter: brightness(0) saturate(100%);
  --topbar-logo-opacity: 0.58;
}

.memorial-page {
  --serif: "Cormorant Garamond", "Noto Serif Hebrew", Georgia, serif;
  --serif-he: "Noto Serif Hebrew", "Cormorant Garamond", Georgia, serif;
  --memorial-font-scale: 1;
  --album-columns: 3;
  --album-grid-width: 880px;
  --album-gap: clamp(6px, 0.9vw, 13px);
  --album-item-width: calc((100% - var(--album-gap) - var(--album-gap)) / 3);
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}
body.memorial-shell main {
  flex: 0 0 auto;
  padding-bottom: 0;
}
/* Memorial entry overlay: remove this block with the page.html and app.js entry blocks to disable it. */
body.memorial-shell {
  --teaser-bg-top: #f5efdf;
  --teaser-bg-bottom: #ece4cf;
  --teaser-bg-glow: rgba(255, 235, 180, 0.22);
  --teaser-laurel-color: #8a6f37;
  --teaser-eyebrow-color: #8a6f37;
  --teaser-name-color: #1f1410;
  --teaser-nick-color: #5a4d3a;
  --teaser-years-color: #1f1410;
  --teaser-frame-bg: #ece4cf;
  --teaser-frame-border-outer: rgba(139, 111, 55, 0.32);
  --teaser-frame-border-inner: rgba(139, 111, 55, 0.32);
  --teaser-frame-shadow: rgba(74, 55, 30, 0.12);
  --teaser-rule-color: rgba(139, 111, 55, 0.45);
  --teaser-cta-color: #f5efdf;
  --teaser-cta-bg: linear-gradient(180deg, #4a3a22 0%, #2c2418 100%);
  --teaser-cta-border: rgba(139, 111, 55, 0.5);
  --teaser-photo-filter: sepia(10%) saturate(0.92);
}
body.memorial-theme-atelier {
  --teaser-bg-top: #faf6e8;
  --teaser-bg-bottom: #efe9d4;
  --teaser-bg-glow: rgba(255, 252, 246, 0.7);
  --teaser-laurel-color: #8a6f37;
  --teaser-eyebrow-color: #8a6f37;
  --teaser-name-color: #1c1814;
  --teaser-nick-color: #8a7e68;
  --teaser-years-color: #8a6f37;
  --teaser-frame-bg: #fefcf3;
  --teaser-frame-border-outer: rgba(139, 111, 55, 0.32);
  --teaser-frame-border-inner: rgba(192, 165, 96, 0.45);
  --teaser-frame-shadow: rgba(74, 55, 30, 0.14);
  --teaser-rule-color: rgba(139, 111, 55, 0.45);
  --teaser-cta-color: #fefcf3;
  --teaser-cta-bg: linear-gradient(180deg, #8a6f37 0%, #6f5a2c 100%);
  --teaser-cta-border: rgba(139, 111, 55, 0.5);
  --teaser-photo-filter: sepia(4%) saturate(0.97);
}
body.memorial-theme-heritage {
  --teaser-bg-top: #f3eee5;
  --teaser-bg-bottom: #eae3d4;
  --teaser-bg-glow: rgba(252, 250, 245, 0.7);
  --teaser-laurel-color: #6e5d4c;
  --teaser-eyebrow-color: #6e5d4c;
  --teaser-name-color: #2a2723;
  --teaser-nick-color: #8a8580;
  --teaser-years-color: #6e5d4c;
  --teaser-frame-bg: #fbf8f1;
  --teaser-frame-border-outer: rgba(110, 93, 76, 0.32);
  --teaser-frame-border-inner: rgba(176, 163, 149, 0.45);
  --teaser-frame-shadow: rgba(42, 39, 35, 0.14);
  --teaser-rule-color: rgba(110, 93, 76, 0.45);
  --teaser-cta-color: #fbf8f1;
  --teaser-cta-bg: linear-gradient(180deg, #6e5d4c 0%, #5a4e3f 100%);
  --teaser-cta-border: rgba(110, 93, 76, 0.5);
  --teaser-photo-filter: sepia(4%) saturate(0.97);
}
body.memorial-theme-nocturne {
  --teaser-bg-top: #f1f3eb;
  --teaser-bg-bottom: #e8ebe0;
  --teaser-bg-glow: rgba(251, 253, 247, 0.7);
  --teaser-laurel-color: #5a6e48;
  --teaser-eyebrow-color: #5a6e48;
  --teaser-name-color: #1f2520;
  --teaser-nick-color: #7c8478;
  --teaser-years-color: #5a6e48;
  --teaser-frame-bg: #fafcf6;
  --teaser-frame-border-outer: rgba(90, 110, 72, 0.32);
  --teaser-frame-border-inner: rgba(165, 179, 148, 0.45);
  --teaser-frame-shadow: rgba(31, 37, 32, 0.14);
  --teaser-rule-color: rgba(90, 110, 72, 0.45);
  --teaser-cta-color: #fafcf6;
  --teaser-cta-bg: linear-gradient(180deg, #5a6e48 0%, #4a5e38 100%);
  --teaser-cta-border: rgba(90, 110, 72, 0.5);
  --teaser-photo-filter: none;
}
body.memorial-theme-stillwater {
  --teaser-bg-top: #eef2f4;
  --teaser-bg-bottom: #dce4e8;
  --teaser-bg-glow: rgba(251, 253, 254, 0.7);
  --teaser-laurel-color: #3d5e75;
  --teaser-eyebrow-color: #3d5e75;
  --teaser-name-color: #1f2731;
  --teaser-nick-color: #7d8693;
  --teaser-years-color: #3d5e75;
  --teaser-frame-bg: #fbfcfd;
  --teaser-frame-border-outer: rgba(31, 44, 56, 0.28);
  --teaser-frame-border-inner: rgba(163, 180, 193, 0.45);
  --teaser-frame-shadow: rgba(31, 44, 56, 0.14);
  --teaser-rule-color: rgba(60, 92, 115, 0.45);
  --teaser-cta-color: #fbfcfd;
  --teaser-cta-bg: linear-gradient(180deg, #3d5e75 0%, #2d4e65 100%);
  --teaser-cta-border: rgba(31, 44, 56, 0.5);
  --teaser-photo-filter: none;
}
body.memorial-theme-vesper {
  --teaser-bg-top: #f4ece6;
  --teaser-bg-bottom: #ead8cf;
  --teaser-bg-glow: rgba(254, 248, 245, 0.7);
  --teaser-laurel-color: #9a5d52;
  --teaser-eyebrow-color: #9a5d52;
  --teaser-name-color: #2a1f20;
  --teaser-nick-color: #918074;
  --teaser-years-color: #9a5d52;
  --teaser-frame-bg: #fbf5f0;
  --teaser-frame-border-outer: rgba(154, 93, 82, 0.32);
  --teaser-frame-border-inner: rgba(200, 154, 146, 0.45);
  --teaser-frame-shadow: rgba(70, 40, 40, 0.14);
  --teaser-rule-color: rgba(154, 93, 82, 0.45);
  --teaser-cta-color: #fbf5f0;
  --teaser-cta-bg: linear-gradient(180deg, #9a5d52 0%, #834a42 100%);
  --teaser-cta-border: rgba(154, 93, 82, 0.5);
  --teaser-photo-filter: sepia(4%) saturate(0.97);
}
/* ============================================================
   MEMORIAL ENTRY OVERLAY — three styles (card / modern / engraved)
   Themed via --teaser-* variables; each memorial-theme-* block above
   overrides the colors. Typography inherits from page font via var(--serif).
   ============================================================ */
body.has-memorial-entry { overflow: hidden; }

.memorial-entry-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100dvh;
  overflow-y: auto;
  padding: clamp(42px, 7vh, 76px) clamp(24px, 5vw, 64px) 56px;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, var(--teaser-bg-glow), transparent 60%),
    linear-gradient(180deg, var(--teaser-bg-top) 0%, var(--teaser-bg-bottom) 100%);
  color: var(--teaser-name-color);
  transition: opacity 560ms ease, visibility 560ms ease;
}
.memorial-entry-overlay[hidden] { display: none; }
.memorial-entry-overlay.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.memorial-entry-card {
  width: min(560px, 100%);
  min-height: calc(100dvh - clamp(42px, 7vh, 76px) - 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 900ms ease, transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.memorial-entry-overlay.is-ready .memorial-entry-card {
  opacity: 1;
  transform: translateY(0);
}

/* Shared elements (base = card style) */
.memorial-entry-eyebrow {
  margin: 0 auto 28px;
  color: var(--teaser-eyebrow-color);
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.4em;
  line-height: 1.4;
  text-transform: uppercase;
}
.memorial-entry-portrait {
  position: relative;
  width: 168px;
  height: 168px;
  margin: 0 auto 28px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--teaser-frame-bg);
  box-shadow:
    0 0 0 1px var(--teaser-frame-border-outer),
    0 0 0 4px var(--teaser-bg-top),
    0 0 0 5px var(--teaser-frame-border-inner),
    0 8px 22px var(--teaser-frame-shadow);
}
.memorial-entry-portrait-slide {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease;
  transform-origin: center;
  will-change: transform, opacity;
}
.memorial-entry-portrait-slide.is-entry-active { opacity: 1; }
.memorial-entry-name {
  margin: 0;
  color: var(--teaser-name-color);
  font-family: var(--serif);
  font-size: clamp(24px, 4vw, 30px);
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
}
.memorial-entry-nickname {
  margin: 14px 0 0;
  color: var(--teaser-nick-color);
  font-family: var(--serif);
  font-size: clamp(17px, 2.2vw, 20px);
  font-style: italic;
  line-height: 1.2;
}
.memorial-entry-ornament {
  margin: 24px auto;
  color: var(--teaser-laurel-color);
}
.memorial-entry-ornament.ornament::before,
.memorial-entry-ornament.ornament::after {
  background: var(--teaser-laurel-color);
}
.memorial-entry-ornament .ornament-dot {
  background: var(--teaser-laurel-color);
}
.memorial-entry-years {
  margin: 0;
  color: var(--teaser-years-color);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.3;
}
.memorial-entry-button {
  margin-top: 40px;
  padding: 14px 32px;
  border: 0;
  border-radius: 2px;
  background: var(--teaser-cta-bg);
  color: var(--teaser-cta-color);
  font-family: var(--serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.36em;
  line-height: 1.35;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 200ms ease, transform 200ms ease;
}
.memorial-entry-button:hover { filter: brightness(1.18); }
.memorial-entry-button:focus { outline: none; }
.memorial-entry-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--teaser-cta-border);
}

/* -------- Variation 1 · Memorial Card (formal) -------- */
.entry-style-card .memorial-entry-card {
  position: relative;
  width: min(480px, 100%);
  min-height: 0;
  padding: 64px 48px 56px;
  margin: 56px auto;
  background: var(--teaser-bg-top);
  border: 1px solid var(--teaser-frame-border-outer);
  outline: 1px solid var(--teaser-frame-border-outer);
  outline-offset: 6px;
}
.entry-style-card .memorial-entry-card::before,
.entry-style-card .memorial-entry-card::after,
.entry-style-card .memorial-entry-corner {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--teaser-bg-top);
  pointer-events: none;
}
.entry-style-card .memorial-entry-card::before {
  top: -7px;
  left: -7px;
  border-top: 1.5px solid var(--teaser-laurel-color);
  border-left: 1.5px solid var(--teaser-laurel-color);
}
.entry-style-card .memorial-entry-card::after {
  bottom: -7px;
  right: -7px;
  border-bottom: 1.5px solid var(--teaser-laurel-color);
  border-right: 1.5px solid var(--teaser-laurel-color);
}
.entry-style-card .memorial-entry-corner-tr {
  top: -7px;
  right: -7px;
  border-top: 1.5px solid var(--teaser-laurel-color);
  border-right: 1.5px solid var(--teaser-laurel-color);
}
.entry-style-card .memorial-entry-corner-bl {
  bottom: -7px;
  left: -7px;
  border-bottom: 1.5px solid var(--teaser-laurel-color);
  border-left: 1.5px solid var(--teaser-laurel-color);
}

/* -------- Variation 2 · Quiet Modern -------- */
.entry-style-modern .memorial-entry-portrait {
  width: 96px;
  height: 96px;
  margin-bottom: 32px;
  box-shadow: 0 4px 14px rgba(74, 55, 30, 0.08);
}
.entry-style-modern .memorial-entry-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4em;
  color: var(--teaser-eyebrow-color);
  margin-bottom: 24px;
}
.entry-style-modern .memorial-entry-name {
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 48px);
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.05;
  text-transform: none;
  text-shadow: none;
}
.entry-style-modern .memorial-entry-nickname {
  margin-top: 8px;
}
.entry-style-modern .memorial-entry-years {
  margin-top: 18px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--teaser-years-color);
}
.entry-style-modern .memorial-entry-button {
  margin-top: 48px;
  padding: 10px 4px 8px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--teaser-name-color);
  border-radius: 0;
  color: var(--teaser-name-color);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: gap 200ms ease, color 200ms ease, border-color 200ms ease;
}
.entry-style-modern .memorial-entry-button::after {
  content: "→";
  font-size: 14px;
  letter-spacing: 0;
}
.entry-style-modern .memorial-entry-button:hover {
  gap: 16px;
  color: var(--teaser-laurel-color);
  border-bottom-color: var(--teaser-laurel-color);
  filter: none;
}

/* -------- Variation 3 · Type-Only Engraved -------- */
.entry-style-engraved .memorial-entry-card {
  max-width: 640px;
}
.entry-style-engraved .memorial-entry-eyebrow {
  margin-bottom: 36px;
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.5em;
  color: var(--teaser-eyebrow-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.entry-style-engraved .memorial-entry-eyebrow::before,
.entry-style-engraved .memorial-entry-eyebrow::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--teaser-laurel-color);
}
.entry-style-engraved .memorial-entry-name {
  font-family: var(--serif);
  font-size: clamp(56px, 9vw, 92px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 0.95;
  text-transform: none;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5),
    0 -1px 0 rgba(74, 55, 30, 0.05);
}
.entry-style-engraved .memorial-entry-nickname {
  margin-top: 18px;
  font-size: clamp(20px, 2.6vw, 24px);
}
.entry-style-engraved .memorial-entry-years {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(15px, 1.8vw, 17px);
  letter-spacing: 0.32em;
}
.entry-style-engraved .memorial-entry-button {
  margin-top: 48px;
  background: transparent;
  border: 1px solid var(--teaser-laurel-color);
  color: var(--teaser-laurel-color);
  font-family: var(--serif);
  letter-spacing: 0.36em;
  padding: 16px 36px;
}
.entry-style-engraved .memorial-entry-button:hover {
  background: var(--teaser-laurel-color);
  color: var(--teaser-bg-top);
  filter: none;
}

/* -------- Reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
  .memorial-entry-overlay,
  .memorial-entry-card,
  .memorial-entry-portrait-slide,
  .memorial-entry-button {
    transition: none !important;
  }
}

/* -------- Mobile -------- */
@media (max-width: 640px) {
  .memorial-entry-overlay {
    padding: 42px 20px 40px;
  }
  .memorial-entry-card {
    min-height: calc(100dvh - 82px);
  }
  .memorial-entry-eyebrow {
    margin-bottom: 22px;
    font-size: 11px;
    letter-spacing: 0.34em;
  }
  .memorial-entry-portrait {
    width: 132px;
    height: 132px;
    margin-bottom: 22px;
  }
  .entry-style-modern .memorial-entry-portrait {
    width: 82px;
    height: 82px;
  }
  .memorial-entry-name {
    font-size: clamp(22px, 7vw, 28px);
  }
  .entry-style-modern .memorial-entry-name {
    font-size: clamp(32px, 9vw, 40px);
  }
  .entry-style-engraved .memorial-entry-name {
    font-size: clamp(44px, 13vw, 64px);
  }
  .memorial-entry-button {
    padding: 14px 26px;
    font-size: 11px;
  }
}

/* ============================================================
   EDIT PAGE — Entry style picker
   ============================================================ */
.entry-style-form {
  margin-top: 8px;
}
.entry-style-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}
.entry-style-choice {
  position: relative;
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.entry-style-choice:hover {
  border-color: var(--border-strong);
  background: var(--surface);
}
.entry-style-choice input {
  position: absolute;
  inset: 12px 12px auto auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}
.entry-style-choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(94, 99, 88, 0.12);
}
.entry-style-preview {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  min-height: 130px;
  padding: 14px 10px;
  background: linear-gradient(180deg, #f5efdf 0%, #ece4cf 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.entry-style-preview .esp-eyebrow {
  display: block;
  width: 70%;
  height: 3px;
  background: #8a6f37;
  opacity: 0.7;
  border-radius: 1px;
}
.entry-style-preview .esp-portrait {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #d9cfb4;
  box-shadow:
    0 0 0 1px rgba(139, 111, 55, 0.4),
    0 0 0 2px #f5efdf,
    0 0 0 3px rgba(139, 111, 55, 0.3);
}
.entry-style-preview .esp-name {
  display: block;
  width: 80%;
  height: 8px;
  background: #1f1410;
  border-radius: 1px;
}
.entry-style-preview .esp-ornament {
  display: flex;
  align-items: center;
  gap: 4px;
}
.entry-style-preview .esp-ornament::before,
.entry-style-preview .esp-ornament::after {
  content: "";
  width: 20px;
  height: 1px;
  background: #8a6f37;
}
.entry-style-preview .esp-ornament {
  position: relative;
  width: 50px;
  height: 5px;
}
.entry-style-preview .esp-ornament::after {
  position: absolute;
  left: 0; right: 0;
  margin: auto;
  background: linear-gradient(90deg, transparent, #8a6f37, transparent);
  width: 50px;
}
.entry-style-preview .esp-ornament::before {
  position: absolute;
  left: 50%;
  top: 0;
  width: 4px;
  height: 4px;
  background: #8a6f37;
  transform: translateX(-50%) rotate(45deg);
}
.entry-style-preview .esp-diamond {
  display: block;
  width: 6px;
  height: 6px;
  background: #8a6f37;
  transform: rotate(45deg);
  margin: 4px 0;
}
.entry-style-preview .esp-years {
  display: block;
  width: 50%;
  height: 4px;
  background: #5a4d3a;
  opacity: 0.7;
  border-radius: 1px;
}
.entry-style-preview .esp-btn {
  display: block;
  width: 70%;
  height: 9px;
  margin-top: 4px;
  background: #2c2418;
  border-radius: 1px;
}

/* Modern preview overrides */
.entry-style-preview-modern .esp-portrait {
  width: 26px;
  height: 26px;
  box-shadow: 0 2px 4px rgba(74, 55, 30, 0.18);
}
.entry-style-preview-modern .esp-eyebrow {
  width: 50%;
  background: #8a7e68;
  height: 2px;
}
.entry-style-preview-modern .esp-name {
  height: 7px;
  background: #1f1410;
}
.entry-style-preview-modern .esp-years {
  width: 40%;
  background: #5a4d3a;
  height: 3px;
  margin-bottom: 4px;
}
.entry-style-preview-modern .esp-btn {
  width: 30%;
  height: 2px;
  background: #1f1410;
  border-radius: 0;
}

/* Engraved preview overrides */
.entry-style-preview-engraved .esp-eyebrow {
  position: relative;
  width: 80%;
  height: 3px;
  background: transparent;
}
.entry-style-preview-engraved .esp-eyebrow::before,
.entry-style-preview-engraved .esp-eyebrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 22%;
  height: 1px;
  background: #8a6f37;
}
.entry-style-preview-engraved .esp-eyebrow::before { left: 0; }
.entry-style-preview-engraved .esp-eyebrow::after { right: 0; }
.entry-style-preview-engraved .esp-eyebrow {
  background: linear-gradient(90deg, transparent 25%, #8a6f37 25%, #8a6f37 75%, transparent 75%);
  height: 2px;
}
.entry-style-preview-engraved .esp-name {
  height: 16px;
  width: 90%;
  background: #1f1410;
}
.entry-style-preview-engraved .esp-btn {
  width: 60%;
  height: 9px;
  background: transparent;
  border: 1px solid #8a6f37;
  border-radius: 1px;
}

.entry-style-copy {
  display: grid;
  align-content: center;
  gap: 4px;
  padding-right: 18px;
}
.entry-style-copy strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}
.entry-style-copy span {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.4;
}
.memorial-page.album-cols-3 {
  --album-columns: 3;
  --album-grid-width: 880px;
  --album-item-width: calc((100% - var(--album-gap) - var(--album-gap)) / 3);
}
.memorial-page.album-cols-4 {
  --album-columns: 4;
  --album-grid-width: 980px;
  --album-item-width: calc((100% - var(--album-gap) - var(--album-gap) - var(--album-gap)) / 4);
}
.memorial-page.album-cols-5 {
  --album-columns: 5;
  --album-grid-width: 1080px;
  --album-item-width: calc((100% - var(--album-gap) - var(--album-gap) - var(--album-gap) - var(--album-gap)) / 5);
}
.memorial-page.album-cols-6 {
  --album-columns: 6;
  --album-grid-width: 1120px;
  --album-item-width: calc((100% - var(--album-gap) - var(--album-gap) - var(--album-gap) - var(--album-gap) - var(--album-gap)) / 6);
}
.font-garamond {
  --serif: "Cormorant Garamond", "Noto Serif Hebrew", Georgia, serif;
  --serif-he: "Noto Serif Hebrew", "Cormorant Garamond", Georgia, serif;
}
.font-baskerville {
  --serif: "Libre Baskerville", "Noto Serif Hebrew", Georgia, serif;
  --serif-he: "Noto Serif Hebrew", "Libre Baskerville", Georgia, serif;
  --memorial-font-scale: 0.92;
}
.font-lora {
  --serif: "Lora", "Noto Serif Hebrew", Georgia, serif;
  --serif-he: "Noto Serif Hebrew", "Lora", Georgia, serif;
  --memorial-font-scale: 0.92;
}
.font-source-serif {
  --serif: "Source Serif 4", "Noto Serif Hebrew", Georgia, serif;
  --serif-he: "Noto Serif Hebrew", "Source Serif 4", Georgia, serif;
}
.font-poppins {
  --serif: "Poppins", "Noto Serif Hebrew", Arial, sans-serif;
  --serif-he: "Noto Serif Hebrew", "Poppins", Arial, sans-serif;
  --memorial-font-scale: 0.88;
}
.font-verdana {
  --serif: Verdana, "Noto Serif Hebrew", Arial, sans-serif;
  --serif-he: "Noto Serif Hebrew", Verdana, Arial, sans-serif;
  --memorial-font-scale: 0.86;
}
.font-playfair-display {
  --serif: "Playfair Display", "Noto Serif Hebrew", Georgia, serif;
  --serif-he: "Noto Serif Hebrew", "Playfair Display", Georgia, serif;
  --memorial-font-scale: 0.92;
}

.owner-bar {
  margin-bottom: var(--space-6);
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  gap: var(--space-3);
  align-items: center;
}
.owner-bar a { color: var(--text-muted); border-bottom: none; }
.owner-bar a:hover { color: var(--accent); }
.owner-bar .dot { color: var(--text-soft); }

.memorial-hero {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* atelier → Linen — soft warm cream paper with brass accents */
.memorial-page.theme-atelier .memorial-hero {
  border-radius: 8px;
  border-color: rgba(139, 111, 55, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.98), rgba(247, 242, 232, 0.94));
  box-shadow:
    0 24px 70px rgba(74, 55, 30, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.92) inset;
}
.memorial-page.theme-atelier .memorial-portrait {
  border-color: #faf6e8;
  box-shadow:
    0 18px 44px rgba(74, 55, 30, 0.18),
    0 0 0 1px rgba(139, 111, 55, 0.32);
}
.memorial-page.theme-atelier .memorial-name,
.memorial-page.theme-atelier .chapter-title {
  color: #1c1814;
}
.memorial-page.theme-atelier .chapter-subtitle,
.memorial-page.theme-atelier .memorial-years,
.memorial-page.theme-atelier .timeline-date {
  color: #8a6f37;
}
.memorial-page.theme-atelier .memorial-places,
.memorial-page.theme-atelier .memorial-nickname {
  color: #8a7e68;
}
.memorial-page.theme-atelier .ornament::before,
.memorial-page.theme-atelier .ornament::after {
  background: #c0a560;
}
.memorial-page.theme-atelier .ornament-dot {
  background: #8a6f37;
}

/* heritage → Stone — neutral stone gray with warm taupe */
.memorial-page.theme-heritage .memorial-hero {
  border-radius: 8px;
  border-color: rgba(110, 93, 76, 0.42);
  background:
    linear-gradient(180deg, rgba(252, 250, 245, 0.98), rgba(238, 232, 222, 0.94));
  box-shadow:
    0 24px 70px rgba(60, 50, 40, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.92) inset;
}
.memorial-page.theme-heritage .memorial-portrait {
  border-color: #f3eee5;
  box-shadow:
    0 18px 44px rgba(60, 50, 40, 0.18),
    0 0 0 1px rgba(110, 93, 76, 0.32);
}
.memorial-page.theme-heritage .memorial-name,
.memorial-page.theme-heritage .chapter-title {
  color: #2a2723;
}
.memorial-page.theme-heritage .chapter-subtitle,
.memorial-page.theme-heritage .memorial-years,
.memorial-page.theme-heritage .timeline-date {
  color: #6e5d4c;
}
.memorial-page.theme-heritage .memorial-places,
.memorial-page.theme-heritage .memorial-nickname {
  color: #8a8580;
}
.memorial-page.theme-heritage .ornament::before,
.memorial-page.theme-heritage .ornament::after {
  background: #b0a395;
}
.memorial-page.theme-heritage .ornament-dot {
  background: #6e5d4c;
}

/* nocturne → Sage — soft sage green with olive */
.memorial-page.theme-nocturne .memorial-hero {
  border-radius: 8px;
  border-color: rgba(90, 110, 72, 0.42);
  background:
    linear-gradient(180deg, rgba(251, 253, 247, 0.98), rgba(232, 236, 222, 0.94));
  box-shadow:
    0 24px 70px rgba(40, 55, 40, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.92) inset;
}
.memorial-page.theme-nocturne .memorial-portrait {
  border-color: #f1f3eb;
  box-shadow:
    0 18px 44px rgba(40, 55, 40, 0.18),
    0 0 0 1px rgba(90, 110, 72, 0.32);
}
.memorial-page.theme-nocturne .memorial-name,
.memorial-page.theme-nocturne .chapter-title {
  color: #1f2520;
}
.memorial-page.theme-nocturne .chapter-subtitle,
.memorial-page.theme-nocturne .memorial-years,
.memorial-page.theme-nocturne .timeline-date {
  color: #5a6e48;
}
.memorial-page.theme-nocturne .memorial-places,
.memorial-page.theme-nocturne .memorial-nickname {
  color: #7c8478;
}
.memorial-page.theme-nocturne .ornament::before,
.memorial-page.theme-nocturne .ornament::after {
  background: #a5b394;
}
.memorial-page.theme-nocturne .ornament-dot {
  background: #5a6e48;
}

/* stillwater → Mist — cool blue-gray with petrol */
.memorial-page.theme-stillwater .memorial-hero {
  border-radius: 8px;
  border-color: rgba(60, 92, 115, 0.42);
  background:
    linear-gradient(180deg, rgba(251, 253, 254, 0.98), rgba(232, 240, 244, 0.94));
  box-shadow:
    0 24px 70px rgba(40, 55, 75, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.92) inset;
}
.memorial-page.theme-stillwater .memorial-portrait {
  border-color: #eef2f4;
  box-shadow:
    0 18px 44px rgba(40, 55, 75, 0.18),
    0 0 0 1px rgba(60, 92, 115, 0.32);
}
.memorial-page.theme-stillwater .memorial-name,
.memorial-page.theme-stillwater .chapter-title {
  color: #1f2731;
}
.memorial-page.theme-stillwater .chapter-subtitle,
.memorial-page.theme-stillwater .memorial-years,
.memorial-page.theme-stillwater .timeline-date {
  color: #3d5e75;
}
.memorial-page.theme-stillwater .memorial-places,
.memorial-page.theme-stillwater .memorial-nickname {
  color: #7d8693;
}
.memorial-page.theme-stillwater .ornament::before,
.memorial-page.theme-stillwater .ornament::after {
  background: #a3b4c1;
}
.memorial-page.theme-stillwater .ornament-dot {
  background: #3d5e75;
}

/* vesper → Rose — warm rose cream with dusty terracotta */
.memorial-page.theme-vesper .memorial-hero {
  border-radius: 8px;
  border-color: rgba(155, 92, 80, 0.42);
  background:
    linear-gradient(180deg, rgba(254, 248, 245, 0.98), rgba(240, 228, 218, 0.94));
  box-shadow:
    0 24px 70px rgba(70, 40, 40, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.92) inset;
}
.memorial-page.theme-vesper .memorial-portrait {
  border-color: #f4ece6;
  box-shadow:
    0 18px 44px rgba(70, 40, 40, 0.18),
    0 0 0 1px rgba(155, 92, 80, 0.32);
}
.memorial-page.theme-vesper .memorial-name,
.memorial-page.theme-vesper .chapter-title {
  color: #2a1f20;
}
.memorial-page.theme-vesper .chapter-subtitle,
.memorial-page.theme-vesper .memorial-years,
.memorial-page.theme-vesper .timeline-date {
  color: #9a5d52;
}
.memorial-page.theme-vesper .memorial-places,
.memorial-page.theme-vesper .memorial-nickname {
  color: #918074;
}
.memorial-page.theme-vesper .ornament::before,
.memorial-page.theme-vesper .ornament::after {
  background: #c89a92;
}
.memorial-page.theme-vesper .ornament-dot {
  background: #9a5d52;
}

.memorial-portrait {
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-2);
  border: 6px solid var(--surface);
  box-shadow: 0 4px 24px rgba(45, 41, 37, 0.08), 0 0 0 1px var(--border-strong);
  margin: 0 auto var(--space-8);
}
.memorial-portrait-slideshow,
.memorial-portrait-single {
  position: relative;
  overflow: hidden;
  object-fit: initial;
}
.memorial-portrait-slide {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease-in-out;
  transform-origin: center;
  will-change: transform, opacity;
}
.memorial-portrait-slide.is-active {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .memorial-portrait-slide {
    transition: none;
  }
  .memorial-portrait-slide.is-active {
    opacity: 1;
  }
}

.memorial-name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: calc(64px * var(--memorial-font-scale));
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
  overflow-wrap: anywhere;
}
.memorial-name-he {
  font-family: var(--serif-he);
  font-weight: 300;
  font-size: calc(40px * var(--memorial-font-scale));
  line-height: 1.2;
  color: var(--text);
  margin: var(--space-2) 0 0;
  direction: rtl;
}
.memorial-nickname {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(22px * var(--memorial-font-scale));
  color: var(--text-muted);
  margin: var(--space-4) 0 0;
  font-weight: 400;
}

.memorial-years {
  margin: var(--space-6) 0 var(--space-2);
  font-size: calc(17px * var(--memorial-font-scale));
  letter-spacing: 0.18em;
  color: var(--text);
  font-weight: 400;
}
.memorial-years .dash {
  display: inline-block;
  margin: 0 14px;
  color: var(--text-soft);
}
.font-source-serif .memorial-name {
  font-size: 56px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
}
.font-source-serif .memorial-name-he {
  font-size: 36px;
  font-weight: 400;
  letter-spacing: 0;
}
.font-source-serif .memorial-nickname {
  font-size: 20px;
}
.font-source-serif .memorial-years {
  font-size: 15px;
  letter-spacing: 0.13em;
}
.memorial-aged {
  font-size: 13px;
  color: var(--text-soft);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.memorial-places {
  color: var(--text-muted);
  font-size: 15px;
  margin-top: var(--space-4);
}

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-12) 0 var(--space-10);
  color: var(--text-soft);
}
.ornament::before, .ornament::after {
  content: "";
  width: 80px;
  height: 1px;
  background: var(--border-strong);
}
.ornament-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-soft);
}
.ornament-dot > span {
  display: none;
}
.memorial-page.separator-diamond .ornament-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  transform: rotate(45deg);
}
.memorial-page.separator-triple-diamond .ornament {
  gap: 10px;
}
.memorial-page.separator-triple-diamond .ornament::before,
.memorial-page.separator-triple-diamond .ornament::after {
  width: 120px;
  background: #77736a;
}
.memorial-page.separator-triple-diamond .ornament-dot {
  display: grid;
  grid-template-columns: repeat(3, 9px);
  gap: 5px;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
}
.memorial-page.separator-triple-diamond .ornament-dot > span {
  display: block;
  width: 8px;
  height: 8px;
  border: 2px solid #56524b;
  border-radius: 1px;
  background: transparent;
  transform: rotate(45deg);
}
.memorial-page.separator-crest .ornament {
  gap: 10px;
}
.memorial-page.separator-crest .ornament-dot {
  position: relative;
  width: 22px;
  height: 10px;
  border-radius: 0;
  background: transparent;
}
.memorial-page.separator-crest .ornament-dot::before,
.memorial-page.separator-crest .ornament-dot::after {
  content: "";
  position: absolute;
  top: 1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-soft);
}
.memorial-page.separator-crest .ornament-dot::before {
  left: 1px;
}
.memorial-page.separator-crest .ornament-dot::after {
  right: 1px;
}
/* Trefoil — three-lobed Gothic flourish (public page) */
.memorial-page.separator-trefoil .ornament {
  gap: 14px;
}
.memorial-page.separator-trefoil .ornament::before,
.memorial-page.separator-trefoil .ornament::after {
  width: 96px;
  background: color-mix(in srgb, var(--accent) 44%, var(--border-strong));
}
.memorial-page.separator-trefoil .ornament-dot {
  position: relative;
  width: 28px;
  height: 22px;
  border-radius: 0;
  background: transparent;
}
.memorial-page.separator-trefoil .ornament-dot > span:nth-child(1),
.memorial-page.separator-trefoil .ornament-dot > span:nth-child(2),
.memorial-page.separator-trefoil .ornament-dot > span:nth-child(3) {
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1.6px solid var(--accent);
  border-radius: 50%;
  background: transparent;
}
.memorial-page.separator-trefoil .ornament-dot > span:nth-child(1) {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.memorial-page.separator-trefoil .ornament-dot > span:nth-child(2) {
  bottom: 0;
  left: 0;
}
.memorial-page.separator-trefoil .ornament-dot > span:nth-child(3) {
  bottom: 0;
  right: 0;
}

/* Fleuron — typographic flourish (public page) */
.memorial-page.separator-fleuron .ornament {
  gap: 16px;
}
.memorial-page.separator-fleuron .ornament::before,
.memorial-page.separator-fleuron .ornament::after {
  width: 110px;
}
.memorial-page.separator-fleuron .ornament-dot {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.memorial-page.separator-fleuron .ornament-dot::before {
  content: "\2766";  /* ❦ */
}
.memorial-page.separator-fleuron .ornament-dot > span {
  display: none;
}

/* Compass star — eight-pointed (public page) */
.memorial-page.separator-compass-star .ornament {
  gap: 14px;
}
.memorial-page.separator-compass-star .ornament::before,
.memorial-page.separator-compass-star .ornament::after {
  width: 100px;
}
.memorial-page.separator-compass-star .ornament-dot {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 0;
  background: transparent;
}
.memorial-page.separator-compass-star .ornament-dot::before,
.memorial-page.separator-compass-star .ornament-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--accent);
  border-radius: 1px;
  transform: translate(-50%, -50%);
}
.memorial-page.separator-compass-star .ornament-dot::before {
  width: 22px;
  height: 2px;
}
.memorial-page.separator-compass-star .ornament-dot::after {
  width: 22px;
  height: 2px;
  transform: translate(-50%, -50%) rotate(90deg);
}
.memorial-page.separator-compass-star .ornament-dot > span:nth-child(1),
.memorial-page.separator-compass-star .ornament-dot > span:nth-child(2) {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1.4px;
  background: var(--accent);
  border-radius: 1px;
}
.memorial-page.separator-compass-star .ornament-dot > span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}
.memorial-page.separator-compass-star .ornament-dot > span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.memorial-page.theme-atelier.separator-crest .ornament-dot::before,
.memorial-page.theme-atelier.separator-crest .ornament-dot::after {
  background: #a87920;
}
.memorial-page.theme-heritage.separator-crest .ornament-dot::before,
.memorial-page.theme-heritage.separator-crest .ornament-dot::after {
  background: #c49a49;
}
.memorial-page.theme-nocturne.separator-crest .ornament-dot::before,
.memorial-page.theme-nocturne.separator-crest .ornament-dot::after {
  background: #b58b62;
}
.memorial-page.theme-atelier.separator-triple-diamond .ornament-dot > span {
  border-color: #a87920;
}
.memorial-page.theme-heritage.separator-triple-diamond .ornament-dot > span {
  border-color: #7a2f3a;
}
.memorial-page.theme-nocturne.separator-triple-diamond .ornament-dot > span {
  border-color: #b58b62;
}

.chapter-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(32px * var(--memorial-font-scale));
  text-align: center;
  letter-spacing: 0.02em;
  color: var(--text);
  margin: 0 0 var(--space-2);
  overflow-wrap: anywhere;
}
.font-source-serif .chapter-title {
  font-size: 29px;
  letter-spacing: 0.005em;
}
.chapter-subtitle {
  text-align: center;
  color: var(--text-soft);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0 0 var(--space-8);
}

/* timeline */
.timeline {
  max-width: 560px;
  margin: 0 auto;
  position: relative;
  padding-left: 0;
}
.timeline-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--space-6);
  padding: var(--space-3) 0;
  align-items: baseline;
}
.timeline-row + .timeline-row { border-top: 1px solid var(--border); }
.timeline-date {
  font-family: var(--serif);
  font-size: calc(22px * var(--memorial-font-scale));
  font-weight: 500;
  color: var(--text);
  text-align: right;
}
.timeline-date .month-day {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-soft);
  margin-top: 2px;
}
.timeline-text {
  font-family: var(--serif);
  font-size: calc(18px * var(--memorial-font-scale));
  font-weight: 500;
  line-height: 1.55;
  color: var(--text);
}

/* album chapter */
.album-chapter {
  margin-bottom: var(--space-12);
  position: relative;
  left: 50%;
  width: min(var(--album-grid-width), calc(100vw - 48px));
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  box-sizing: border-box;
  transform: translateX(-50%);
}
.album-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--album-gap);
  width: 100%;
  max-width: none;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .memorial-page.album-cols-4,
  .memorial-page.album-cols-5,
  .memorial-page.album-cols-6 {
    --album-columns: 3;
    --album-item-width: calc((100% - var(--album-gap) - var(--album-gap)) / 3);
  }
}
.public-albums {
  position: relative;
  left: 50%;
  width: min(var(--album-grid-width), calc(100vw - 48px));
  margin: 0 0 var(--space-12);
  transform: translateX(-50%);
}
.public-albums-head {
  text-align: center;
}
.public-album-tabs {
  --public-album-tab-width: 190px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  max-width: calc((var(--public-album-tab-width) * 4) + (var(--space-3) * 3));
  margin: 0 auto var(--space-6);
  padding: 0;
  overflow: visible;
}
.public-album-tab {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 var(--public-album-tab-width);
  width: auto;
  max-width: 100%;
  min-height: 76px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.public-album-tab:hover {
  border-color: var(--border-strong);
  box-shadow: 0 8px 24px rgba(45, 41, 37, 0.08);
}
.public-album-tab.is-active {
  border-color: var(--accent);
  border-width: 2px;
  box-shadow: 0 0 0 4px rgba(94, 99, 88, 0.14), 0 12px 30px rgba(45, 41, 37, 0.1);
}
.public-album-tab-thumb {
  display: block;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-2);
}
.public-album-tab-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.public-album-tab-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.public-album-tab-name {
  overflow: hidden;
  color: var(--text);
  font-family: var(--serif);
  font-size: calc(17px * var(--memorial-font-scale));
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.public-album-tab-count {
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.public-albums .album-chapter {
  position: static;
  left: auto;
  width: 100%;
  margin-bottom: 0;
  transform: none;
}
.public-albums-enhanced .js-public-album-panel[hidden] {
  display: none;
}
.public-album-panel.is-entering {
  animation: publicAlbumFade 180ms ease both;
}
@keyframes publicAlbumFade {
  from { opacity: 0.35; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .public-album-panel.is-entering {
    animation: none;
  }
}
.memorial-page.theme-nocturne .public-album-tab {
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22);
}
.memorial-page.theme-nocturne .public-album-tab:hover,
.memorial-page.theme-nocturne .public-album-tab.is-active {
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.32);
}
@media (max-width: 640px) {
  .public-albums {
    width: calc(100vw - 32px);
  }
  .public-album-tabs {
    gap: var(--space-2);
    margin-bottom: var(--space-5);
  }
  .public-album-tab {
    flex-basis: calc(100% - 20px);
    min-height: 92px;
    padding: 14px 16px;
  }
  .public-album-tab-thumb {
    flex-basis: 62px;
    width: 62px;
    height: 62px;
  }
  .public-album-tab-name {
    font-size: 18px;
  }
}

/* full memorial slideshow */
.full-slideshow-launcher {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  left: 50%;
  width: min(880px, calc(100vw - 48px));
  margin: 0 0 var(--space-12);
  box-sizing: border-box;
  transform: translateX(-50%);
}
.btn-slideshow-launch {
  display: inline-grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  width: min(520px, 100%);
  max-width: 100%;
  min-width: 320px;
  padding: 18px 32px 18px 22px;
  background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  box-sizing: border-box;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.62) inset, 0 14px 34px rgba(45, 41, 37, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}
.full-slideshow-launcher.is-slideshow-open .btn-slideshow-launch {
  display: none;
}
.btn-slideshow-launch:hover {
  transform: translateY(-1px);
  border-color: var(--accent-hover);
  background: color-mix(in srgb, var(--surface) 86%, var(--accent) 14%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.64) inset, 0 18px 42px rgba(45, 41, 37, 0.12);
}
.btn-slideshow-launch:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}
.btn-slideshow-ornament {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  color: var(--accent);
}
.btn-slideshow-icon {
  width: 56px;
  height: 56px;
  display: block;
}
.btn-slideshow-label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.btn-slideshow-eyebrow {
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.3;
  text-transform: uppercase;
}
.btn-slideshow-title {
  color: var(--text);
  font-family: var(--serif);
  font-size: calc(23px * var(--memorial-font-scale));
  font-weight: 500;
  line-height: 1.15;
}
.full-slideshow-panel {
  width: 100%;
  max-width: 880px;
  margin: var(--space-6) auto 0;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(45, 41, 37, 0.12);
  animation: slideshowExpand 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.full-slideshow-launcher.is-slideshow-open .full-slideshow-panel {
  margin-top: 0;
}
@keyframes slideshowExpand {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.full-slideshow-bar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.full-slideshow-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.full-slideshow-control:hover,
.full-slideshow-control:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
}
.full-slideshow-control:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.full-slideshow-position {
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: center;
}
.full-slideshow-stage {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #0a0a0a;
}
.full-slideshow-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 1400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.full-slideshow-slide.is-active {
  opacity: 1;
  z-index: 2;
}
.full-slideshow-slide.is-outgoing {
  opacity: 0;
  z-index: 1;
}
.full-slideshow-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1);
  transform-origin: center;
}
.full-slideshow-photo.is-active {
  cursor: pointer;
}
.full-slideshow-photo.is-kenburns-in img {
  animation: slideshowKenBurnsIn 7600ms ease-out both;
}
.full-slideshow-photo.is-kenburns-out img {
  animation: slideshowKenBurnsOut 7600ms ease-out both;
}
.full-slideshow-photo.is-kenburns-drift img {
  animation: slideshowKenBurnsDrift 7600ms ease-out both;
}
@keyframes slideshowKenBurnsIn {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.055) translate3d(1.2%, -1%, 0); }
}
@keyframes slideshowKenBurnsOut {
  from { transform: scale(1.055) translate3d(-1%, 1%, 0); }
  to { transform: scale(1) translate3d(0, 0, 0); }
}
@keyframes slideshowKenBurnsDrift {
  from { transform: scale(1.018) translate3d(-1.2%, -0.6%, 0); }
  to { transform: scale(1.052) translate3d(1.2%, 0.8%, 0); }
}
.full-slideshow-title-slide,
.full-slideshow-transition {
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8);
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 56%),
    var(--surface);
  color: var(--text);
  text-align: center;
}
.full-slideshow-slide-name,
.full-slideshow-album-name {
  color: var(--text);
  font-family: var(--serif);
  font-size: calc(clamp(30px, 5vw, 54px) * var(--memorial-font-scale));
  font-weight: 400;
  line-height: 1.06;
  overflow-wrap: anywhere;
}
.full-slideshow-slide-years,
.full-slideshow-album-subtitle {
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}
.full-slideshow-line {
  width: 88px;
  height: 1px;
  margin: var(--space-2) auto 0;
  background: var(--border-strong);
}
.full-slideshow-caption {
  display: -webkit-box;
  min-height: 2.8em;
  max-height: 2.8em;
  margin: 12px 18px 14px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--text-muted);
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.4;
  text-align: center;
}
.full-slideshow-caption.is-empty {
  opacity: 0;
}
body.memorial-theme-nocturne .btn-slideshow-launch {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 18px 48px rgba(0, 0, 0, 0.26);
}
body.memorial-theme-nocturne .full-slideshow-panel {
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.34);
}
@media (prefers-reduced-motion: reduce) {
  .btn-slideshow-launch,
  .full-slideshow-panel,
  .full-slideshow-slide,
  .full-slideshow-photo.is-kenburns-in img,
  .full-slideshow-photo.is-kenburns-out img,
  .full-slideshow-photo.is-kenburns-drift img,
  .full-slideshow-control {
    animation: none !important;
    transition: none !important;
  }
}
@media (max-width: 640px) {
  .full-slideshow-launcher {
    left: auto;
    width: 100%;
    max-width: 100%;
    transform: none;
  }
  .btn-slideshow-launch {
    width: 100%;
    min-width: 0;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    padding: 14px 16px;
  }
  .btn-slideshow-ornament {
    width: 48px;
    height: 48px;
  }
  .btn-slideshow-icon {
    width: 44px;
    height: 44px;
  }
  .btn-slideshow-title {
    font-size: 20px;
  }
  .full-slideshow-panel {
    margin-top: var(--space-4);
  }
  .full-slideshow-stage {
    aspect-ratio: 4 / 3;
  }
  .full-slideshow-slide-name,
  .full-slideshow-album-name {
    font-size: clamp(28px, 9vw, 42px);
  }
  .full-slideshow-caption {
    font-size: 16px;
  }
}
.album-photo {
  position: relative;
  flex: 0 1 var(--album-item-width);
  min-width: 0;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(45, 41, 37, 0.04);
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.album-photo:hover { z-index: 1; }
.album-photo:hover {
  box-shadow: 0 4px 16px rgba(45, 41, 37, 0.15);
}
.album-photo-open {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  font: inherit;
  overflow: hidden;
}
.album-photo-open:focus-visible {
  outline: 3px solid rgba(196, 184, 156, 0.5);
  outline-offset: -3px;
}
.album-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  display: block;
  background: var(--surface-2);
  border-radius: 0;
}
.album-photo figcaption {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  display: block;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.96);
  text-align: left;
  line-height: 1.2;
  padding: 6px 10px;
  border: 0.5px solid rgba(255, 255, 255, 0.20);
  border-radius: 4px;
  background: rgba(20, 16, 12, 0.38);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  box-shadow: none;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.font-source-serif .album-photo figcaption {
  font-size: 11px;
  font-style: normal;
  line-height: 1.2;
}
.memorial-page.theme-atelier .album-photo,
.memorial-page.theme-atelier .candle-card {
  border-color: rgba(199, 170, 67, 0.72);
  border-radius: 8px;
  background: #fff8df;
  box-shadow: 0 12px 32px rgba(111, 82, 25, 0.1);
}
.memorial-page.theme-atelier .album-photo:hover {
  box-shadow: 0 20px 46px rgba(111, 82, 25, 0.18);
}
.memorial-page.theme-atelier .album-photo figcaption {
  background: rgba(20, 18, 16, 0.42);
  color: rgba(255, 255, 255, 0.92);
}
.memorial-page.theme-atelier .free-text-body {
  color: #2f2a1f;
}
.memorial-page.theme-atelier .candle-flame {
  background: linear-gradient(150deg, #f0c96b 0%, #c49a35 52%, #8b651f 100%);
}
.memorial-page.theme-heritage .album-photo,
.memorial-page.theme-heritage .candle-card {
  border-color: rgba(154, 174, 154, 0.78);
  border-radius: 8px;
  background: #fffaf0;
  box-shadow: 0 14px 34px rgba(31, 51, 41, 0.1);
}
.memorial-page.theme-heritage .album-photo:hover {
  box-shadow: 0 22px 50px rgba(31, 51, 41, 0.17);
}
.memorial-page.theme-heritage .album-photo figcaption {
  background: rgba(20, 18, 16, 0.42);
  color: rgba(255, 255, 255, 0.92);
}
.memorial-page.theme-heritage .free-text-body,
.memorial-page.theme-heritage .timeline-text,
.memorial-page.theme-heritage .candle-card strong {
  color: #1f3329;
}
.memorial-page.theme-heritage .candle-flame {
  background: linear-gradient(150deg, #e0b85c 0%, #c49a49 45%, #7a2f3a 100%);
}
.memorial-page.theme-heritage .btn-primary {
  background: #284b37;
  border-color: #284b37;
}
.memorial-page.theme-heritage .btn-primary:hover {
  background: #1f3329;
  border-color: #1f3329;
}
.memorial-page.theme-nocturne .album-photo,
.memorial-page.theme-nocturne .candle-card {
  border-color: rgba(90, 110, 72, 0.32);
  border-radius: 8px;
  background: #fafcf6;
  box-shadow: 0 14px 34px rgba(40, 55, 40, 0.1);
}
.memorial-page.theme-nocturne .album-photo:hover {
  box-shadow: 0 22px 50px rgba(40, 55, 40, 0.18);
}
.memorial-page.theme-nocturne .album-photo figcaption {
  background: rgba(31, 37, 32, 0.42);
  color: rgba(255, 255, 255, 0.92);
}
.memorial-page.theme-nocturne .free-text-body,
.memorial-page.theme-nocturne .timeline-text,
.memorial-page.theme-nocturne .candle-card strong {
  color: #1f2520;
}
.memorial-page.theme-nocturne .candle-card time,
.memorial-page.theme-nocturne .chapter-subtitle {
  color: #5a6e48;
}
.memorial-page.theme-nocturne .candle-flame {
  background: linear-gradient(150deg, #e5b773 0%, #b58b62 48%, #6c4932 100%);
}
.memorial-page.theme-nocturne .btn-primary {
  background: #5a6e48;
  border-color: #5a6e48;
  color: #fafcf6;
}
.memorial-page.theme-nocturne .btn-primary:hover {
  background: #4a5e38;
  border-color: #4a5e38;
  color: #fafcf6;
}
.memorial-page.theme-stillwater .album-photo,
.memorial-page.theme-stillwater .candle-card {
  border-color: rgba(147, 166, 181, 0.78);
  border-radius: 8px;
  background: #fbfcfd;
  box-shadow: 0 14px 34px rgba(31, 44, 56, 0.1);
}
.memorial-page.theme-stillwater .album-photo:hover {
  box-shadow: 0 22px 50px rgba(31, 44, 56, 0.18);
}
.memorial-page.theme-stillwater .album-photo figcaption {
  background: rgba(20, 28, 38, 0.42);
  color: rgba(255, 255, 255, 0.92);
}
.memorial-page.theme-stillwater .free-text-body,
.memorial-page.theme-stillwater .timeline-text,
.memorial-page.theme-stillwater .candle-card strong {
  color: #1f2c38;
}
.memorial-page.theme-stillwater .candle-flame-svg {
  filter: drop-shadow(0 0 6px rgba(232, 162, 90, 0.55));
}
.memorial-page.theme-stillwater .btn-primary {
  background: #3d6478;
  border-color: #3d6478;
}
.memorial-page.theme-stillwater .btn-primary:hover {
  background: #2b4d5e;
  border-color: #2b4d5e;
}
.memorial-page.theme-vesper .album-photo,
.memorial-page.theme-vesper .candle-card {
  border-color: rgba(156, 138, 165, 0.78);
  border-radius: 8px;
  background: #faf7f9;
  box-shadow: 0 14px 34px rgba(58, 44, 69, 0.1);
}
.memorial-page.theme-vesper .album-photo:hover {
  box-shadow: 0 22px 50px rgba(58, 44, 69, 0.16);
}
.memorial-page.theme-vesper .album-photo figcaption {
  background: rgba(58, 44, 69, 0.44);
  color: rgba(255, 255, 255, 0.92);
}
.memorial-page.theme-vesper .free-text-body,
.memorial-page.theme-vesper .timeline-text,
.memorial-page.theme-vesper .candle-card strong {
  color: #3a2c45;
}
.memorial-page.theme-vesper .btn-primary {
  background: #8a6c4f;
  border-color: #8a6c4f;
}
.memorial-page.theme-vesper .btn-primary:hover {
  background: #6d533c;
  border-color: #6d533c;
}
.free-text-chapter {
  max-width: 720px;
  margin: 0 auto var(--space-12);
  text-align: center;
}
.free-text-body {
  display: flow-root;
  white-space: pre-line;
  text-align: start;
  font-family: var(--serif);
  font-size: calc(22px * var(--memorial-font-scale));
  line-height: 1.65;
  color: var(--text);
}
.free-text-body::first-letter {
  float: left;
  float: inline-start;
  margin-block-start: 0.08em;
  margin-inline-end: 0.14em;
  color: var(--drop-cap-color);
  font-family: var(--serif);
  font-size: 4.35em;
  line-height: 0.82;
  font-weight: 400;
}
.free-text-body:dir(rtl)::first-letter {
  float: right;
  float: inline-start;
}
.font-source-serif .free-text-body {
  font-size: 19px;
  line-height: 1.72;
}
/* ============================================================
   CANDLES — list shell, self-contained per style variation
   ============================================================ */
.candle-list-shell {
  position: relative;
  max-width: 760px;
  margin: 0 auto var(--space-12);
  padding: 56px 48px 48px;
  background: #fdf9ef;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 36px rgba(74, 55, 30, 0.08);
  text-align: left;
  color: #1f1410;
}
.candle-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #8a6f37;
  text-align: center;
  margin: 0 0 14px;
}
.candle-heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(34px * var(--memorial-font-scale));
  color: #1f1410;
  text-align: center;
  margin: 0 0 6px;
  letter-spacing: 0;
}
.candle-counter {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(16px * var(--memorial-font-scale));
  color: #5a4d3a;
  text-align: center;
  margin: 0 0 40px;
}
.candle-counter .num {
  font-style: normal;
  color: #8a6f37;
}

.candle-list-shell .candle-form {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 0;
  margin: 0 0 6px;
  max-width: none;
  border-bottom: 1px solid rgba(40, 30, 15, 0.10);
  background: transparent;
  border-radius: 0;
}
.candle-list-shell .candle-form.is-saving { opacity: 0.85; }
.candle-form-flame {
  width: 14px;
  height: 20px;
  opacity: 0.45;
  filter: drop-shadow(0 0 4px rgba(232, 162, 90, 0.4));
  justify-self: center;
  display: inline-flex;
}
.candle-form-flame svg { width: 100%; height: 100%; display: block; }
.candle-list-shell .candle-input {
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(17px * var(--memorial-font-scale));
  color: #1f1410;
  background: transparent;
  border: 0;
  padding: 8px 0;
  height: auto;
  width: 100%;
}
.candle-list-shell .candle-input:focus { outline: none; }
.candle-list-shell .candle-input::placeholder { color: #8a7e68; font-style: italic; }
.candle-list-shell .candle-input:disabled { opacity: 0.5; }
.candle-list-shell .candle-submit {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: #8a6f37;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px 0;
  min-height: 0;
  height: auto;
  transition: color 180ms ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.candle-list-shell .candle-submit:hover { color: #1f1410; background: transparent; }
.candle-list-shell .candle-submit:disabled { opacity: 0.45; cursor: default; }
.candle-form-status {
  grid-column: 1 / -1;
  color: var(--danger);
  font-family: var(--font-sans);
  font-size: 12px;
  text-align: left;
  margin-top: 4px;
}

.candle-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: candle-num;
  display: block;
}
.candle-list[hidden] { display: none; }
.candle-row {
  counter-increment: candle-num;
  display: grid;
  grid-template-columns: 18px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(40, 30, 15, 0.10);
  animation: candle-row-fade 360ms ease-out both;
  margin: 0;
  min-height: 0;
  background: transparent;
  border-radius: 0;
  text-align: left;
  justify-items: stretch;
}
.candle-row:last-child { border-bottom: 0; }
.candle-row-num { display: none; }
.candle-row-flame {
  width: 11px;
  height: 16px;
  justify-self: center;
  filter: drop-shadow(0 0 4px rgba(232, 162, 90, 0.4));
  opacity: 0.78;
  display: inline-flex;
}
.candle-row-flame svg { width: 100%; height: 100%; display: block; }
.candle-row-name {
  font-family: var(--serif);
  font-size: calc(17px * var(--memorial-font-scale));
  font-weight: 400;
  color: #1f1410;
  letter-spacing: 0.005em;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
  line-height: 1.2;
}
.candle-row-when {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8a7e68;
}
.candle-row .candle-remove-form {
  position: static;
  opacity: 0;
  transition: opacity 160ms ease;
  top: auto;
  right: auto;
}
.candle-row.is-owned .candle-remove-form { opacity: 1; }
.candle-row .candle-remove-form button {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(139, 111, 55, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  color: rgba(94, 77, 58, 0.6);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 160ms ease;
}
.candle-row .candle-remove-form button:hover {
  background: #fff;
  color: #b04a2a;
  border-color: rgba(176, 74, 42, 0.5);
  transform: scale(1.05);
}
.candle-row .candle-remove-form button:disabled {
  opacity: 0.45;
  cursor: progress;
}
@keyframes candle-row-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* -------- Variation 2 · Editorial Index -------- */
.candle-list-style-editorial {
  max-width: 760px;
  background: #faf6ec;
  padding-left: 48px;
  padding-right: 48px;
}
.candle-list-style-editorial .candle-heading { font-size: calc(32px * var(--memorial-font-scale)); }
.candle-list-style-editorial .candle-counter { margin-bottom: 36px; }
.candle-list-style-editorial .candle-form {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  border-bottom: 2px solid #8a6f37;
  padding: 0 0 14px;
  margin-bottom: 18px;
  align-items: end;
}
.candle-list-style-editorial .candle-form-flame { display: none; }
.candle-list-style-editorial .candle-form::before {
  content: "+";
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  color: #8a6f37;
  justify-self: start;
  line-height: 1;
}
.candle-list-style-editorial .candle-input {
  font-style: normal;
  font-size: calc(18px * var(--memorial-font-scale));
  padding: 0 8px 4px;
  line-height: 1.25;
}
.candle-list-style-editorial .candle-submit {
  color: #fdf9ef;
  background: #8a6f37;
  border-radius: 2px;
  padding: 10px 18px;
  align-self: center;
  letter-spacing: 0.18em;
}
.candle-list-style-editorial .candle-submit:hover {
  background: #6f5a2c;
  color: #fdf9ef;
}
.candle-list-style-editorial .candle-row {
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  padding: 15px 0;
  border-bottom: 1px solid rgba(139, 111, 55, 0.18);
  align-items: baseline;
}
.candle-list-style-editorial .candle-row-flame { display: none; }
.candle-list-style-editorial .candle-row-num {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: calc(18px * var(--memorial-font-scale));
  font-weight: 500;
  color: #8a6f37;
  letter-spacing: 0.06em;
  line-height: 1;
}
.candle-list-style-editorial .candle-row-num::before {
  content: counter(candle-num, lower-roman) ".";
}
.candle-list-style-editorial .candle-row-name {
  min-width: 0;
  font-size: calc(18px * var(--memorial-font-scale));
  padding: 0 8px;
  line-height: 1.28;
}

/* -------- Variation 3 · Two-Column Registry -------- */
.candle-list-style-registry {
  max-width: 1020px;
  padding-left: 56px;
  padding-right: 56px;
  background: linear-gradient(180deg, #f7f1e0 0%, #f3ecd8 100%);
}
.candle-list-style-registry .candle-counter { margin-bottom: 36px; }
.candle-list-style-registry .candle-form {
  max-width: 580px;
  margin: 0 auto 36px;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(139, 111, 55, 0.32);
}
.candle-list-style-registry .candle-form-flame { display: none; }
.candle-list-style-registry .candle-submit {
  color: #fdf9ef;
  background: #1f1410;
  border-radius: 2px;
  padding: 10px 18px;
}
.candle-list-style-registry .candle-submit:hover {
  background: #000;
  color: #fdf9ef;
}
.candle-list-style-registry .candle-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  position: relative;
}
.candle-list-style-registry .candle-list::after {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(139, 111, 55, 0.32), transparent);
}
.candle-list-style-registry .candle-row {
  grid-template-columns: 14px 1fr auto auto;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dotted rgba(139, 111, 55, 0.24);
  align-items: baseline;
}
.candle-list-style-registry .candle-row-flame { width: 9px; height: 13px; }
.candle-list-style-registry .candle-row-name { font-size: calc(15px * var(--memorial-font-scale)); }
.candle-list-style-registry .candle-row-when { font-size: 9px; letter-spacing: 0.18em; }
.candle-list-style-registry .candle-row .candle-remove-form button {
  width: 18px;
  height: 18px;
  font-size: 11px;
}

/* -------- Variation 4 · Centered Ceremonial -------- */
.candle-list-style-ceremonial {
  max-width: 720px;
  padding: 72px 64px 56px;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(232, 162, 90, 0.06), transparent 60%),
    linear-gradient(180deg, #fdf9ef 0%, #f7f1e0 100%);
}
.candle-list-style-ceremonial .candle-heading { font-size: calc(40px * var(--memorial-font-scale)); }
.candle-list-style-ceremonial .candle-eyebrow { margin-bottom: 18px; }
.candle-list-style-ceremonial .candle-counter { margin-bottom: 28px; }
.candle-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 24px;
}
.candle-ornament .line {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #8a6f37, transparent);
}
.candle-ornament .diamond {
  width: 6px;
  height: 6px;
  background: #8a6f37;
  transform: rotate(45deg);
}
.candle-list-style-ceremonial .candle-form {
  max-width: 480px;
  margin: 0 auto 28px;
  grid-template-columns: 1fr auto;
  gap: 12px;
  border-bottom: 0;
  padding: 0;
}
.candle-list-style-ceremonial .candle-form-flame { display: none; }
.candle-list-style-ceremonial .candle-input {
  font-size: calc(19px * var(--memorial-font-scale));
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(139, 111, 55, 0.22);
  border-radius: 2px;
  padding: 12px 16px;
  text-align: center;
}
.candle-list-style-ceremonial .candle-input:focus {
  border-color: #8a6f37;
  background: #fff;
}
.candle-list-style-ceremonial .candle-submit {
  color: #fdf9ef;
  background: linear-gradient(180deg, #4a3a22 0%, #2c2418 100%);
  border-radius: 2px;
  padding: 14px 22px;
}
.candle-list-style-ceremonial .candle-submit:hover {
  filter: brightness(1.18);
  color: #fdf9ef;
  background: linear-gradient(180deg, #4a3a22 0%, #2c2418 100%);
}
.candle-list-style-ceremonial .candle-row {
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  padding: 16px 0;
  text-align: center;
  border-bottom: 0;
  position: relative;
  align-items: center;
}
.candle-list-style-ceremonial .candle-row + .candle-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: #8a6f37;
  opacity: 0.5;
  border-radius: 50%;
}
.candle-list-style-ceremonial .candle-row-flame { display: none; }
.candle-list-style-ceremonial .candle-row-name {
  font-size: calc(20px * var(--memorial-font-scale));
  grid-column: 1 / -1;
  text-align: center;
}
.candle-list-style-ceremonial .candle-row-when {
  grid-column: 1 / -1;
  margin-top: 2px;
  text-align: center;
  justify-self: center;
}
.candle-list-style-ceremonial .candle-row .candle-remove-form {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* -------- responsive collapse for registry on narrow viewports -------- */
@media (max-width: 720px) {
  .candle-list-style-registry .candle-list { grid-template-columns: 1fr; }
  .candle-list-style-registry .candle-list::after { display: none; }
}
@media (max-width: 600px) {
  .candle-list-shell {
    padding: 40px 22px 32px;
  }
  .candle-list-style-editorial .candle-form,
  .candle-list-style-editorial .candle-row {
    grid-template-columns: 36px 1fr auto;
  }
}

/* -------- Edit page: list-style picker -------- */
.candle-list-style-card {
  margin: var(--space-5) 0;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.candle-list-style-card .subsection-title { margin-top: 0; }
.candle-list-style-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}
.candle-list-style-choice {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.candle-list-style-choice:hover {
  border-color: var(--border-strong);
  background: var(--surface);
}
.candle-list-style-choice input {
  position: absolute;
  inset: 12px 12px auto auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}
.candle-list-style-choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(94, 99, 88, 0.12);
}
.candle-list-style-preview {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 8px;
  min-height: 72px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fdf9ef;
}
.candle-list-style-preview .clp-line {
  display: grid;
  grid-template-columns: 8px 1fr 22px;
  gap: 5px;
  align-items: center;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(139, 111, 55, 0.18);
}
.candle-list-style-preview .clp-line:last-child { border-bottom: 0; padding-bottom: 0; }
.candle-list-style-preview .clp-dot {
  width: 7px;
  height: 7px;
  background: #e8a25a;
  border-radius: 50%;
  opacity: 0.7;
  justify-self: center;
}
.candle-list-style-preview .clp-bar {
  height: 6px;
  background: linear-gradient(90deg, var(--border-strong), var(--border));
  border-radius: 1px;
}
.candle-list-style-preview .clp-tag {
  height: 4px;
  background: var(--border-strong);
  border-radius: 1px;
  opacity: 0.5;
}
.candle-list-style-preview-editorial { background: #faf6ec; }
.candle-list-style-preview-editorial .clp-dot {
  background: #8a6f37;
  opacity: 1;
  border-radius: 0;
  width: 6px;
  height: 9px;
}
.candle-list-style-preview-registry { background: linear-gradient(180deg, #f7f1e0, #f3ecd8); }
.candle-list-style-preview-registry .clp-line {
  border-bottom-style: dotted;
  grid-template-columns: 6px 1fr 14px;
  gap: 4px;
}
.candle-list-style-preview-ceremonial {
  background: linear-gradient(180deg, #fdf9ef, #f7f1e0);
}
.candle-list-style-preview-ceremonial .clp-line {
  grid-template-columns: 1fr;
  justify-items: center;
  border-bottom: 0;
  padding-bottom: 4px;
  position: relative;
}
.candle-list-style-preview-ceremonial .clp-line + .clp-line::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  background: #8a6f37;
  border-radius: 50%;
}
.candle-list-style-preview-ceremonial .clp-dot,
.candle-list-style-preview-ceremonial .clp-tag { display: none; }
.candle-list-style-preview-ceremonial .clp-bar {
  width: 60%;
  height: 5px;
  margin: 0 auto;
}
.candle-list-style-copy {
  display: grid;
  align-content: center;
  gap: 4px;
  padding-right: 18px;
}
.candle-list-style-copy strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}
.candle-list-style-copy span {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.4;
}

.candle-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
}
.candle-modal[hidden] {
  display: none;
}
.candle-modal.is-closing {
  pointer-events: none;
}
.candle-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(232, 162, 90, 0.16), transparent 18rem),
    rgba(253, 249, 239, 0.78);
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(0.95);
  -webkit-backdrop-filter: blur(14px) saturate(0.95);
  animation: candle-backdrop-enter 260ms ease-out both;
}
.candle-modal-panel {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  width: min(420px, calc(100vw - 48px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 34px 28px 30px;
  border: 1px solid rgba(154, 124, 60, 0.34);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 15%, rgba(232, 162, 90, 0.10), transparent 12rem),
    linear-gradient(180deg, rgba(255, 252, 246, 0.98), rgba(247, 242, 231, 0.97));
  text-align: center;
  box-shadow:
    0 24px 70px rgba(20, 18, 16, 0.34),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
  animation: candle-modal-enter 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.candle-modal.is-closing .candle-modal-backdrop {
  animation: candle-backdrop-exit 260ms ease-in both;
}
.candle-modal.is-closing .candle-modal-panel {
  animation: candle-modal-exit 260ms cubic-bezier(0.4, 0, 1, 1) both;
}
.candle-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(154, 124, 60, 0.26);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
  color: rgba(44, 41, 37, 0.58);
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.candle-modal-close:hover {
  color: var(--text);
  border-color: rgba(154, 124, 60, 0.42);
  background: rgba(255, 255, 255, 0.72);
  transform: scale(1.04);
}
.candle-modal-panel h2 {
  color: var(--text);
  font-family: var(--serif);
  font-size: calc(28px * var(--memorial-font-scale));
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.1;
  max-width: 100%;
  overflow-wrap: anywhere;
  animation: candle-content-enter 460ms 300ms ease-out both;
}
.candle-modal-message {
  margin: 8px 0 20px;
  color: var(--text-muted);
  font-family: var(--serif);
  font-size: calc(19px * var(--memorial-font-scale));
  font-style: italic;
  line-height: 1.35;
  max-width: 100%;
  overflow-wrap: anywhere;
  animation: candle-content-enter 460ms 330ms ease-out both;
}
.candle-modal-message span {
  color: var(--text);
  font-weight: 500;
}
.candle-modal-visual {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 86px;
  margin: 4px 0 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 162, 90, 0.16), rgba(232, 162, 90, 0) 66%);
  animation: candle-flame-rise 700ms 160ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.candle-modal-visual .candle-flame-svg {
  width: 42px;
  height: 54px;
  filter: drop-shadow(0 0 14px rgba(232, 162, 90, 0.58));
  transform-origin: 50% 70%;
  animation: candle-flame-pulse 2200ms ease-in-out infinite;
}
.candle-modal-date {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  animation: candle-content-enter 460ms 260ms ease-out both;
}
.candle-modal-thanks {
  margin-top: 12px;
  color: var(--text-muted);
  font-family: var(--serif);
  font-size: calc(17px * var(--memorial-font-scale));
  font-weight: 500;
  font-style: italic;
  line-height: 1.4;
  animation: candle-content-enter 460ms 360ms ease-out both;
}
body.memorial-theme-nocturne .candle-modal-panel {
  background:
    radial-gradient(circle at 50% 15%, rgba(90, 110, 72, 0.12), transparent 12rem),
    linear-gradient(180deg, rgba(251, 253, 247, 0.98), rgba(232, 236, 222, 0.97));
  border-color: rgba(90, 110, 72, 0.34);
  box-shadow:
    0 24px 70px rgba(40, 55, 40, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
}
body.memorial-theme-nocturne .candle-modal-close {
  background: rgba(255, 255, 255, 0.44);
  border-color: rgba(90, 110, 72, 0.28);
  color: rgba(31, 37, 32, 0.58);
}
@keyframes candle-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes candle-backdrop-exit {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes candle-modal-enter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes candle-modal-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
}
@keyframes candle-flame-rise {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.62) rotate(-6deg);
  }
  60% {
    opacity: 1;
    transform: translateY(-4px) scale(1.08) rotate(2deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}
@keyframes candle-flame-pulse {
  0%, 100% {
    transform: scale(1) rotate(-1deg);
    filter: drop-shadow(0 0 12px rgba(232, 162, 90, 0.5));
  }
  45% {
    transform: scale(1.055) rotate(1.4deg);
    filter: drop-shadow(0 0 18px rgba(232, 162, 90, 0.72));
  }
  70% {
    transform: scale(0.985) rotate(-0.6deg);
  }
}
@keyframes candle-content-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .candle-modal-visual .candle-flame-svg {
    animation: none !important;
  }
}
@media (max-width: 640px) {
  .candle-modal {
    padding: 16px;
  }
  .candle-modal-panel {
    width: min(332px, calc(100vw - 32px));
    padding: 28px 18px 24px;
  }
  .candle-modal-close {
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    font-size: 18px;
  }
  .candle-modal-visual {
    width: 62px;
    height: 70px;
    margin-bottom: 8px;
  }
  .candle-modal-visual .candle-flame-svg {
    width: 34px;
    height: 44px;
  }
  .candle-modal-date {
    margin-bottom: 10px;
    font-size: 10px;
    letter-spacing: 0.16em;
  }
  .candle-modal-panel h2 {
    font-size: calc(24px * var(--memorial-font-scale));
    line-height: 1.15;
  }
  .candle-modal-message {
    margin: 7px 0 18px;
    font-size: calc(17px * var(--memorial-font-scale));
  }
  .candle-modal-thanks {
    margin-top: 8px;
    font-size: calc(16px * var(--memorial-font-scale));
  }
}

.page-feedback {
  max-width: 920px;
  margin: calc(var(--space-8) + 72px) auto 1.5em;
  padding-top: 0;
  border-top: 0;
}
.page-feedback-question {
  margin: 0 0 var(--space-3);
  color: var(--text-soft);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
.page-feedback-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3px 10px;
  margin: 0;
  color: var(--text-soft);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
}
.page-feedback-link {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.page-feedback-link:hover {
  color: var(--accent);
  border-bottom-color: currentColor;
}
.page-feedback-sent {
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: 12px;
  text-align: center;
}
.memorial-page.theme-nocturne .page-feedback {
  border-top-color: transparent;
}

.feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 20px;
}
.feedback-modal[hidden] {
  display: none;
}
body.has-feedback-modal {
  overflow: hidden;
}
.feedback-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(16, 15, 14, 0.78);
  cursor: pointer;
  backdrop-filter: blur(12px);
}
.feedback-modal-panel {
  position: relative;
  z-index: 1;
  width: min(500px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 30px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.36),
    0 1px 0 rgba(255, 255, 255, 0.28) inset;
}
.feedback-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.feedback-modal-close:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.feedback-modal-eyebrow {
  margin-bottom: 6px;
  color: var(--text-soft);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.feedback-modal-panel h2 {
  color: var(--text);
  font-size: 22px;
  letter-spacing: 0;
}
.feedback-modal-description {
  margin: 4px 0 var(--space-5);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.45;
}
.feedback-form {
  display: grid;
  gap: 14px;
}
.feedback-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.feedback-form label {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
}
.feedback-form input,
.feedback-form textarea {
  width: 100%;
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border);
}
.feedback-form textarea {
  resize: vertical;
  min-height: 126px;
}
.feedback-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: 2px;
}
.feedback-form.is-saving .js-feedback-submit {
  opacity: 0.68;
  cursor: progress;
}
.feedback-form-status {
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}
.feedback-form-status.has-error {
  color: var(--danger);
}
body.memorial-theme-nocturne .feedback-modal-panel {
  background: #1b1917;
  border-color: rgba(95, 81, 68, 0.9);
  box-shadow:
    0 30px 88px rgba(0, 0, 0, 0.56),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
body.memorial-theme-nocturne .feedback-modal-close,
body.memorial-theme-nocturne .feedback-form input,
body.memorial-theme-nocturne .feedback-form textarea {
  background: #24211e;
}

/* ---- analytics ---- */
.analytics-shell main {
  max-width: 1180px;
}
.analytics-page .page-header {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.analytics-overview {
  padding: var(--space-4);
}
.analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
.analytics-kpi {
  display: grid;
  gap: 5px;
  min-height: 118px;
  padding: 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.analytics-kpi-primary {
  background:
    linear-gradient(145deg, rgba(94, 99, 88, 0.12), rgba(94, 99, 88, 0.04)),
    var(--surface-2);
  border-color: rgba(94, 99, 88, 0.28);
}
.analytics-kpi span,
.analytics-content-card span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.analytics-kpi strong {
  color: var(--text);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
}
.analytics-kpi em,
.analytics-content-card em {
  color: var(--text-soft);
  font-size: 12px;
  font-style: normal;
}
.analytics-chart-section {
  padding-bottom: var(--space-5);
}
.analytics-spline-card {
  position: relative;
  padding: var(--space-4) var(--space-4) var(--space-3);
  background:
    linear-gradient(180deg, rgba(250, 248, 243, 0.86), rgba(255, 255, 255, 0.72));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  color: var(--accent);
}
.analytics-chart-card {
  position: relative;
  color: var(--accent);
}
.analytics-chart-svg {
  display: block;
  width: 100%;
  height: auto;
}
.analytics-grid-line {
  stroke: var(--border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.analytics-area {
  fill: currentColor;
  fill-opacity: 0.1;
}
.analytics-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.analytics-point {
  fill: currentColor;
  stroke: var(--surface);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.analytics-tick-label {
  fill: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.analytics-peak-label {
  fill: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
}
.analytics-crosshair {
  stroke: var(--border-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.analytics-hover-dot {
  fill: currentColor;
  stroke: var(--surface);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.analytics-chart-svg [hidden],
.analytics-tooltip[hidden] {
  display: none;
}
.analytics-tooltip {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -130%);
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 11px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-sans);
  white-space: nowrap;
  pointer-events: none;
  z-index: 4;
}
.analytics-tooltip strong {
  color: var(--text);
  font-size: 13.5px;
}
.analytics-tooltip span {
  color: var(--text-muted);
  font-size: 12px;
}
.analytics-multiples-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.analytics-multiple {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-4) var(--space-2);
}
.analytics-multiple-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.analytics-multiple-head span {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex: 1;
}
.analytics-multiple-head strong {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}
.analytics-multiple-head em {
  font-style: normal;
  font-size: 12px;
  color: var(--text-soft);
}
.analytics-table-details {
  margin-top: var(--space-3);
}
.analytics-table-details summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
  width: fit-content;
}
.analytics-table-details[open] summary {
  margin-bottom: var(--space-2);
}
.analytics-table-scroll {
  max-height: 300px;
  overflow-y: auto;
}
@media (max-width: 960px) {
  .analytics-multiples-grid {
    grid-template-columns: 1fr;
  }
}
.analytics-content-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
}
.analytics-content-card {
  display: grid;
  gap: 6px;
  min-height: 112px;
  padding: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.analytics-content-card strong {
  color: var(--text);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.05;
}
.analytics-search-section {
  padding-bottom: var(--space-5);
}
.analytics-search-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.analytics-search-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}
.analytics-search-table th,
.analytics-search-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  vertical-align: top;
}
.analytics-search-table th {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.analytics-search-table tr:last-child td {
  border-bottom: 0;
}
.analytics-search-term {
  color: var(--text);
  font-weight: 600;
  max-width: 520px;
  word-break: break-word;
}
.analytics-count-cell {
  width: 88px;
  text-align: right;
  white-space: nowrap;
}
.analytics-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

/* ---- inline editing on public memorial page (owner only) ---- */
.public-title-editor {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-3);
  width: fit-content;
  max-width: 100%;
  margin: 0 auto var(--space-2);
}
.public-title-editor .js-inline-value {
  font-family: var(--serif);
  font-weight: 400;
}
.memorial-footer {
  text-align: center;
  margin: 1.5em 0 var(--space-2);
  color: var(--text);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}

/* ---- photo lightbox ---- */
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(16, 15, 14, 0.76);
  backdrop-filter: blur(18px);
}
.photo-lightbox[hidden] {
  display: none;
}
body.has-photo-lightbox {
  overflow: hidden;
}
.photo-lightbox-panel {
  position: relative;
  display: grid;
  justify-items: center;
  grid-template-rows: auto minmax(0, 1fr) auto 48px;
  gap: 16px;
  width: min(760px, calc(100vw - 48px));
  max-height: calc(100vh - 40px);
  padding: 26px 22px 20px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.10));
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.48),
    0 1px 0 rgba(255, 255, 255, 0.3) inset;
  backdrop-filter: blur(28px) saturate(1.3);
}
.photo-lightbox-heading {
  display: grid;
  justify-items: center;
  gap: 11px;
  width: min(560px, 100%);
  padding: 2px 34px 0;
}
.photo-lightbox-title {
  max-width: 100%;
  color: rgba(255, 255, 255, 0.94);
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.08;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.photo-lightbox-divider {
  display: grid;
  grid-template-columns: minmax(42px, 1fr) 7px minmax(42px, 1fr);
  align-items: center;
  gap: 10px;
  width: min(190px, 72%);
  margin: 2px 0 3px;
  color: rgba(225, 192, 133, 0.84);
}
.photo-lightbox-divider span {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}
.photo-lightbox-divider span:last-child {
  background: linear-gradient(90deg, currentColor, transparent);
}
.photo-lightbox-divider i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.photo-lightbox-meta {
  width: min(560px, 100%);
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.photo-lightbox-viewport {
  display: grid;
  place-items: center;
  width: min(560px, calc(100% - 112px));
  height: min(560px, calc(100vh - 350px));
  min-height: 260px;
  overflow: hidden;
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(10, 9, 8, 0.34), rgba(255, 255, 255, 0.07));
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.34),
    0 1px 0 rgba(255, 255, 255, 0.15) inset;
}
.photo-lightbox-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 0;
  box-shadow: none;
}
.photo-lightbox-thumbs {
  position: relative;
  width: min(316px, calc(100% - 112px));
  height: 58px;
  overflow: hidden;
  display: grid;
  align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.photo-lightbox-thumbs[hidden] {
  display: none;
}
.photo-lightbox-thumb-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  margin: 0 auto;
}
.photo-lightbox-thumb {
  appearance: none;
  display: block;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0.58;
  cursor: pointer;
  transform: scale(0.94);
  transition: opacity 140ms ease, transform 140ms ease, border-color 140ms ease;
}
.photo-lightbox-thumb:hover {
  opacity: 0.82;
  transform: scale(1);
}
.photo-lightbox-thumb:focus,
.photo-lightbox-thumb:focus-visible {
  outline: 0;
  box-shadow: none;
}
.photo-lightbox-thumb.is-active {
  border-color: rgba(225, 192, 133, 0.95);
  opacity: 1;
  transform: scale(1.08);
  box-shadow: 0 0 0 1px rgba(225, 192, 133, 0.25);
}
.photo-lightbox-thumb.is-edge {
  opacity: 0.36;
}
.photo-lightbox-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-lightbox-caption {
  width: min(560px, calc(100% - 112px));
  min-height: 48px;
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  line-height: 1.35;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.photo-lightbox-caption.is-empty {
  visibility: hidden;
}
.font-source-serif .photo-lightbox-caption {
  font-size: 16px;
  font-style: normal;
  line-height: 1.45;
}
.photo-lightbox-close {
  appearance: none;
  position: absolute;
  right: 16px;
  top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
}
.photo-lightbox-close:hover {
  background: transparent;
  color: #ffffff;
}
.photo-lightbox-close:focus,
.photo-lightbox-close:focus-visible {
  outline: 0;
  box-shadow: none;
}
.photo-lightbox-nav {
  appearance: none;
  position: absolute;
  top: calc(50% + 20px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 62px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-sans);
  font-size: 42px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
}
.photo-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.95);
}
.photo-lightbox-nav:focus,
.photo-lightbox-nav:focus-visible {
  outline: 0;
  box-shadow: none;
}
.photo-lightbox-nav:disabled {
  opacity: 0.35;
  cursor: default;
}
.photo-lightbox-prev {
  left: 18px;
}
.photo-lightbox-next {
  right: 18px;
}

/* ---- Photomyne footer ---- */
.pm-footer {
  background: var(--pm-footer-bg, #2c2925);
  color: #e8e2d5;
  padding: var(--space-12) var(--space-6) var(--space-6);
  text-align: center;
  margin-top: var(--space-12);
  font-size: 14px;
  line-height: 1.55;
}
/* Footer per theme — cream tones (paper-2) matching the new palettes */
body.memorial-shell .pm-footer {
  --pm-footer-bg: #ede5d2;
  color: #4f4a42;
  margin-top: 0;
}
body.memorial-shell .pm-footer-logo-img {
  filter: brightness(0) saturate(100%);
  opacity: 0.72;
}
/* atelier → Linen */
body.memorial-theme-atelier .pm-footer {
  --pm-footer-bg: #efe9d4;
  color: #4f4a3a;
}
/* heritage → Stone */
body.memorial-theme-heritage .pm-footer {
  --pm-footer-bg: #eae3d4;
  color: #4f4a40;
}
/* nocturne → Sage */
body.memorial-theme-nocturne .pm-footer {
  --pm-footer-bg: #e8ebe0;
  color: #3f4a3a;
}
/* stillwater → Mist */
body.memorial-theme-stillwater .pm-footer {
  --pm-footer-bg: #e3eaee;
  color: #3a4452;
}
/* vesper → Rose */
body.memorial-theme-vesper .pm-footer {
  --pm-footer-bg: #ead8cf;
  color: #4a3838;
}
body.memorial-shell .pm-footer-desc,
body.memorial-shell .pm-footer-cta {
  color: rgba(44, 41, 37, 0.72);
}
body.memorial-shell .pm-footer-stat-number {
  color: #2c2925;
}
body.memorial-shell .pm-footer-stat-label,
body.memorial-shell .pm-footer-legal a,
body.memorial-shell .pm-footer-copyright {
  color: rgba(44, 41, 37, 0.58);
}
body.memorial-shell .pm-footer-legal a:hover {
  color: #2c2925;
}
body.memorial-shell .pm-footer-legal .divider {
  color: rgba(44, 41, 37, 0.34);
}
body.memorial-theme-stillwater .pm-footer-desc,
body.memorial-theme-stillwater .pm-footer-cta {
  color: rgba(31, 44, 56, 0.72);
}
body.memorial-theme-stillwater .pm-footer-stat-number {
  color: #1f2c38;
}
body.memorial-theme-stillwater .pm-footer-stat-label,
body.memorial-theme-stillwater .pm-footer-legal a,
body.memorial-theme-stillwater .pm-footer-copyright {
  color: rgba(31, 44, 56, 0.58);
}
body.memorial-theme-stillwater .pm-footer-legal a:hover {
  color: #1f2c38;
}
body.memorial-theme-stillwater .pm-footer-legal .divider {
  color: rgba(31, 44, 56, 0.34);
}
body.memorial-theme-nocturne .pm-footer-logo-img {
  filter: none;
  opacity: 0.95;
}
body.memorial-theme-nocturne .pm-footer-desc,
body.memorial-theme-nocturne .pm-footer-cta {
  color: rgba(232, 226, 213, 0.74);
}
body.memorial-theme-nocturne .pm-footer-stat-number {
  color: #f1ece3;
}
body.memorial-theme-nocturne .pm-footer-stat-label,
body.memorial-theme-nocturne .pm-footer-legal a,
body.memorial-theme-nocturne .pm-footer-copyright {
  color: rgba(232, 226, 213, 0.56);
}
body.memorial-theme-nocturne .pm-footer-legal a:hover {
  color: #f1ece3;
}
body.memorial-theme-nocturne .pm-footer-legal .divider {
  color: rgba(232, 226, 213, 0.28);
}
.pm-footer-logo {
  display: inline-block;
  margin-bottom: var(--space-4);
  border-bottom: none;
  opacity: 0.95;
  transition: opacity 150ms ease;
}
.pm-footer-logo:hover { opacity: 1; border-bottom: none; }
.pm-footer-logo-img {
  width: 140px;
  height: auto;
  display: block;
}
.pm-footer-desc {
  max-width: 480px;
  margin: 0 auto var(--space-6);
  color: #c7bfae;
  font-size: 14px;
  line-height: 1.6;
}
.pm-footer-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-10);
  margin: var(--space-6) 0 var(--space-4);
  flex-wrap: wrap;
}
.pm-footer-stat { display: flex; flex-direction: column; align-items: center; }
.pm-footer-stat-number {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  color: #f6f3ed;
  line-height: 1.1;
}
.pm-footer-stat-label {
  font-size: 11px;
  color: #a39a86;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-top: 4px;
}
.pm-footer-cta {
  margin: var(--space-3) auto var(--space-6);
  color: #e8e2d5;
  font-size: 19px;
  font-weight: 600;
  max-width: 480px;
}
.pm-footer-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 32px;
  background: #ffffff;
  color: #ff434b;
  border: 1px solid rgba(255, 67, 75, 0.18);
  border-radius: 4px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-bottom: none;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, color 150ms ease, border-color 150ms ease;
  margin: var(--space-3) 0 var(--space-8);
}
.pm-footer-button:hover {
  background: #fff7f8;
  border-color: rgba(255, 67, 75, 0.34);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(255, 67, 75, 0.18);
  color: #ff434b;
  border-bottom: none;
}
.pm-footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 8px;
  margin: var(--space-8) auto var(--space-4);
  max-width: 720px;
  font-size: 12px;
}
.pm-footer-legal a {
  color: #a39a86;
  border-bottom: none;
  transition: color 120ms ease;
}
.pm-footer-legal a:hover { color: #e8e2d5; border-bottom: none; }
.pm-footer-legal .divider { color: #5a534a; }
.pm-footer-copyright {
  font-size: 12px;
  color: #837d72;
  margin-top: var(--space-3);
  letter-spacing: 0.04em;
}

@media (max-width: 640px) {
  .pm-footer { padding: var(--space-10) var(--space-4) var(--space-5); }
  .pm-footer-logo-img { width: 120px; }
  .pm-footer-stats { gap: var(--space-6); }
  .pm-footer-stat-number { font-size: 24px; }
}

@media (max-width: 1180px) {
  .profile-section-head {
    flex-direction: column;
    align-items: stretch;
  }
  .profile-section-head .btn {
    align-self: flex-start;
  }
  .profile-page-card {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .profile-stats {
    padding-left: 0;
    padding-top: var(--space-3);
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .profile-page-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .upload-form {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .theme-picker,
  .theme-choice {
    grid-template-columns: 1fr;
  }
  .theme-choice-preview {
    min-height: 112px;
  }
  .privacy-row {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-3);
  }
  .privacy-row > div {
    min-width: 0;
    width: 100%;
  }
  .privacy-row .toggle-label {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px 10px;
    line-height: 1.4;
  }
  .privacy-row .toggle-label input {
    flex: 0 0 auto;
    margin-top: 2px;
  }
  .privacy-row .toggle-label .hint {
    flex: 0 0 calc(100% - 32px);
    margin-left: 32px;
    font-size: 13px;
    line-height: 1.45;
  }
  .privacy-row .autosave-status {
    align-self: flex-start;
    margin-left: 32px;
  }
  .milestone-form {
    grid-template-columns: 1fr;
  }
  .milestone-date-mode {
    grid-column: 1;
  }
  .milestone-suggestions {
    grid-column: 1;
  }
  .milestone-submit {
    margin-top: 0;
    width: 100%;
  }
  .upload-submit {
    width: 100%;
    margin-top: 0;
  }
  .file-picker {
    grid-template-columns: 1fr;
  }
  .file-picker-button {
    min-height: 48px;
    border-right: 0;
    border-bottom: 1px solid var(--border-strong);
  }
  .file-picker-name {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    text-align: center;
  }
  .album-create-picker .file-picker-button {
    min-width: 0;
  }
  .page-item {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .page-actions {
    justify-content: flex-start;
  }
  .delete-disclosure form {
    left: 0;
    right: auto;
    grid-template-columns: 1fr;
    width: min(280px, calc(100vw - 48px));
  }
  .profile-page {
    width: min(100%, calc(100vw - 32px));
  }
  .profile-hero-card {
    grid-template-columns: 64px minmax(0, 1fr);
    padding: var(--space-5);
  }
  .profile-avatar { width: 64px; height: 64px; }
  .profile-hero-mark {
    grid-column: 1 / -1;
    width: 96px;
    height: 96px;
    justify-self: center;
    opacity: 0.72;
  }
  .profile-hero-card h1 { font-size: 24px; }
  .hero-mark {
    width: 148px;
    height: 148px;
  }
  .profile-section-head,
  .profile-page-card {
    grid-template-columns: 1fr;
  }
  .profile-page-card {
    gap: var(--space-3);
  }
  .profile-page-card.compact {
    grid-template-columns: 1fr;
  }
  .profile-page-identity {
    grid-template-columns: 52px minmax(0, 1fr);
  }
  .profile-page-thumb {
    width: 52px;
    height: 52px;
  }
  .profile-stats {
    gap: 8px 14px;
  }
  .analytics-kpi-grid,
  .analytics-content-grid,
  .analytics-split {
    grid-template-columns: 1fr;
  }
  .analytics-spline {
    height: 240px;
  }
  .profile-page-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .portrait-row {
    flex-direction: column;
  }
  .portrait-preview-stack {
    max-width: 100%;
  }
  .portrait-preview,
  .portrait-preview-clip,
  .portrait-preview-stack .portrait-preview {
    width: 72px;
    height: 72px;
  }
  .portrait-preview-clip .portrait-preview {
    width: 100%;
    height: 100%;
  }
  .candle-form {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  .candle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .candle-card {
    min-height: 148px;
    padding-inline: 10px;
  }
  .memorial-page {
    --album-gap: 6px;
    --album-item-width: calc((100% - var(--album-gap)) / 2);
  }
  .feedback-field-grid {
    grid-template-columns: 1fr;
  }
  .page-feedback-line {
    gap: 2px 8px;
  }
  .feedback-modal-panel {
    padding: var(--space-6) var(--space-5);
  }
  .feedback-form-actions {
    flex-direction: column-reverse;
  }
  .feedback-form-actions .btn {
    width: 100%;
  }
  .album-header {
    align-items: start;
  }
  .memorial-portrait { width: 160px; height: 160px; }
  .memorial-name { font-size: calc(44px * var(--memorial-font-scale)); }
  .memorial-name-he { font-size: calc(30px * var(--memorial-font-scale)); }
  .memorial-nickname { font-size: calc(18px * var(--memorial-font-scale)); }
  .memorial-years { font-size: calc(15px * var(--memorial-font-scale)); letter-spacing: 0.12em; }
  .font-source-serif .memorial-name { font-size: 40px; }
  .font-source-serif .memorial-name-he { font-size: 28px; }
  .font-source-serif .memorial-nickname { font-size: 17px; }
  .font-source-serif .memorial-years { font-size: 14px; letter-spacing: 0.1em; }
  .memorial-hero { padding: var(--space-10) var(--space-4); }
  .chapter-title { font-size: calc(26px * var(--memorial-font-scale)); }
  .font-source-serif .chapter-title { font-size: 24px; }
  .font-source-serif .free-text-body { font-size: 17px; line-height: 1.68; }
  .album-grid { gap: var(--album-gap); width: 100%; }
  .album-photo figcaption {
    left: 0;
    right: auto;
    bottom: 0;
    max-width: 100%;
    font-size: 10px;
    min-height: 0;
    padding: 3px 6px;
  }
  .font-source-serif .album-photo figcaption { font-size: 10px; }
  .photo-lightbox {
    padding: 16px;
  }
  .photo-lightbox-panel {
    width: calc(100vw - 24px);
    padding: 14px 10px;
  }
  .photo-lightbox-heading {
    width: calc(100% - 44px);
    padding: 0;
  }
  .photo-lightbox-title {
    font-size: 24px;
  }
  .photo-lightbox-divider {
    width: min(170px, 82%);
  }
  .photo-lightbox-viewport {
    width: calc(100% - 88px);
    height: min(470px, calc(100vh - 270px));
    min-height: 220px;
  }
  .photo-lightbox-thumbs {
    width: min(278px, calc(100% - 88px));
    height: 50px;
  }
  .photo-lightbox-thumb-list {
    gap: 6px;
  }
  .photo-lightbox-thumb {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  .photo-lightbox-image {
    width: 100%;
    height: 100%;
  }
  .photo-lightbox-nav {
    width: 34px;
    height: 58px;
    font-size: 34px;
  }
  .photo-lightbox-prev {
    left: 8px;
  }
  .photo-lightbox-next {
    right: 8px;
  }
  .timeline-row { grid-template-columns: 80px 1fr; gap: var(--space-3); }
  .timeline-date { font-size: 18px; }
  .ornament::before, .ornament::after { width: 40px; }
}

/* ===========================================================================
   LANDING PAGE — index.html
   Self-contained styles. Uses existing tokens where possible; introduces a
   few new tokens (--landing-*) for sections that don't appear elsewhere.
   =========================================================================== */

:root {
  --landing-paper: #dfe0d6;
  --landing-rule:  rgba(48, 56, 43, 0.18);
  --landing-rule-strong: rgba(48, 56, 43, 0.32);
  --landing-trust-bg: #cdd2c6;
  --landing-text-soft: #4a443c;
  --landing-text-muted: #6b7063;
  --landing-accent: #566247;
  --landing-accent-soft: rgba(86, 98, 71, 0.12);
  --landing-serif: "Cormorant Garamond", "Garamond", Georgia, serif;
}

.landing-page main {
  padding: 0;
  max-width: none;
}

/* ---- HERO ---- */
.landing-hero {
  text-align: center;
  padding: 88px 24px 56px;
  max-width: 760px;
  margin: 0 auto;
}

.landing-eyebrow {
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--landing-text-muted);
  margin-bottom: 24px;
}

.landing-mark {
  display: block;
  width: min(360px, 72vw);
  height: auto;
  object-fit: contain;
  margin: 0 auto 34px;
  mix-blend-mode: normal;
}

.landing-headline {
  font-family: var(--landing-serif);
  font-weight: 400;
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.014em;
  color: var(--text);
  margin-bottom: 22px;
}

.landing-sub {
  font-family: var(--landing-serif);
  font-style: italic;
  font-size: 21.5px;
  line-height: 1.6;
  color: #3f3932;
  max-width: 580px;
  margin: 0 auto 40px;
}

.landing-cta-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.link-secondary {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--landing-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 200ms ease, color 200ms ease;
}
.link-secondary:hover {
  border-bottom-color: var(--landing-accent);
}

/* ---- SECTIONS ---- */
.landing-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 72px 24px;
  text-align: center;
}
.landing-section-tight { padding-top: 32px; padding-bottom: 80px; }

.section-eyebrow {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--landing-accent);
  margin-bottom: 16px;
}

.section-title {
  font-family: var(--landing-serif);
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.22;
  letter-spacing: -0.008em;
  color: var(--text);
  max-width: 720px;
  margin: 0 auto 48px;
}

/* ---- VALUE GRID ---- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  text-align: left;
  max-width: 960px;
  margin: 0 auto;
}

.value-card {
  background: #ffffff;
  border: 1px solid var(--landing-rule);
  border-radius: 10px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.value-card:hover {
  transform: translateY(-2px);
  border-color: var(--landing-rule-strong);
  box-shadow: 0 1px 2px rgba(28, 24, 18, 0.04), 0 8px 24px rgba(28, 24, 18, 0.07);
}

.value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--landing-accent-soft);
  color: var(--landing-accent);
}
.value-icon svg { width: 22px; height: 22px; }

.value-card h3 {
  font-family: var(--landing-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--text);
}
.value-card p {
  font-family: var(--landing-serif);
  font-size: 16.5px;
  line-height: 1.55;
  color: #4d463e;
}

/* ---- DEMO CARD ---- */
.demo-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  text-align: left;
  background: #ffffff;
  border: 1px solid var(--landing-rule);
  border-radius: 14px;
  padding: 28px;
  max-width: 760px;
  margin: 0 auto;
  text-decoration: none;
  color: inherit;
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
  align-items: center;
}
.demo-card:hover {
  border-color: var(--landing-accent);
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(28, 24, 18, 0.04), 0 12px 28px rgba(28, 24, 18, 0.10);
}

.demo-portrait {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 8px;
  background: #ede5d2;
}

.demo-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.demo-name {
  font-family: var(--landing-serif);
  font-weight: 500;
  font-size: 30px;
  letter-spacing: -0.012em;
  line-height: 1.05;
  color: var(--text);
}
.demo-dates {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--landing-text-muted);
}
.demo-quote {
  font-family: var(--landing-serif);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--landing-text-soft);
  margin-top: 4px;
}
.demo-link {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 13px;
  font-weight: 500;
  color: var(--landing-accent);
  margin-top: 8px;
  letter-spacing: 0.02em;
}

/* ---- TRUST BAND ---- */
.trust-band {
  background: var(--landing-trust-bg);
  border-top: 1px solid var(--landing-rule);
  border-bottom: 1px solid var(--landing-rule);
  padding: 56px 24px;
  text-align: center;
}
.trust-band p {
  font-family: var(--landing-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: var(--landing-text-soft);
  max-width: 760px;
  margin: 0 auto;
}
.trust-band strong {
  font-style: normal;
  color: var(--text);
  font-weight: 600;
}

/* ---- FINAL CTA ---- */
.cta-band {
  text-align: center;
  padding: 80px 24px 96px;
  max-width: 600px;
  margin: 0 auto;
}
.cta-headline {
  font-family: var(--landing-serif);
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 36px);
  letter-spacing: -0.005em;
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1.2;
}
.cta-copy {
  max-width: 520px;
  margin: 0 auto 28px;
  color: #332e28;
  font-family: var(--landing-serif);
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 500;
  line-height: 1.45;
}
.cta-fineprint {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 12.5px;
  color: var(--landing-text-muted);
  margin-top: 22px;
  letter-spacing: 0.02em;
}

/* ---- LANDING RESPONSIVE ---- */
@media (max-width: 720px) {
  .landing-hero { padding: 56px 20px 40px; }
  .landing-mark { width: min(300px, 78vw); height: auto; margin-bottom: 26px; }
  .landing-headline { font-size: clamp(32px, 9vw, 44px); }
  .landing-sub { font-size: 17px; margin-bottom: 32px; }
  .landing-cta-row { gap: 14px; }

  .landing-section { padding: 48px 20px; }
  .section-title { margin-bottom: 32px; }

  .value-grid { gap: 12px; }
  .value-card { padding: 20px 18px; }

  .demo-card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 22px;
    text-align: center;
  }
  .demo-portrait {
    width: 160px;
    height: 200px;
    margin: 0 auto;
  }
  .demo-text { align-items: center; }

  .trust-band { padding: 40px 20px; }
  .trust-band p { font-size: 16.5px; }

  .cta-band { padding: 56px 20px 72px; }
}


/* ===========================================================================
   FIXES (May 7) — bug-fix layer for landing page + footer + memorial topbar
   =========================================================================== */

/* (1) Force the landing's display font on its headlines (landing dropped
   rubik-page from its body class so the global Rubik no longer fights us
   here, but this is a belt-and-suspenders guard). */
.landing-page .landing-headline,
.landing-page .section-title,
.landing-page .cta-headline,
.landing-page .demo-name,
.landing-page .value-card h3,
.landing-page h1,
.landing-page h2,
.landing-page h3 {
  font-family: var(--landing-serif);
  font-weight: 500;
  letter-spacing: -0.012em;
}
.landing-page .landing-headline { font-weight: 400; }

/* (2) GSI BUTTON — clean rewrite, this time with a real color (not an
   undefined --paper var that fell back to dark-on-dark and ate the text). */
.landing-page .gsi-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 46px;
  padding: 0 26px;
  font-family: var(--font-sans, "Inter", -apple-system, BlinkMacSystemFont, sans-serif);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #fbf6e8;
  background: #1c160e;
  border: 1px solid #1c160e;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(28, 22, 14, 0.10),
    0 6px 18px rgba(28, 22, 14, 0.14);
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease, color 200ms ease;
}
.landing-page .gsi-button:hover {
  background: var(--landing-accent);
  border-color: var(--landing-accent);
  color: #fbf6e8;
  transform: translateY(-1px);
  box-shadow:
    0 1px 2px rgba(28, 22, 14, 0.10),
    0 12px 28px rgba(107, 80, 38, 0.28);
}
.landing-page .gsi-button:active { transform: translateY(0); }

.landing-page .gsi-button .gsi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: #ffffff;
  border-radius: 50%;
  padding: 2px;
  overflow: hidden;
}
.landing-page .gsi-button .gsi-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

.landing-page .gsi-button .gsi-text {
  font-family: inherit;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: 1;
  display: inline-block;
}

/* (3) PHOTOMYNE FOOTER — restyle on landing + memorial pages so it stops
   stamping a dark ribbon on the cream layout. Other app pages keep the
   original dark footer (it suits them). */
body.landing-page .pm-footer,
body.memorial-theme-classic .pm-footer {
  background: #ede5d2;
  color: var(--landing-text-soft);
  border-top: 1px solid var(--landing-rule);
}
body.landing-page .pm-footer .pm-footer-logo-img,
body.memorial-theme-classic .pm-footer .pm-footer-logo-img {
  filter: brightness(0) saturate(100%);
  opacity: 0.85;
}
body.landing-page .pm-footer .pm-footer-desc,
body.landing-page .pm-footer .pm-footer-cta,
body.memorial-theme-classic .pm-footer .pm-footer-desc,
body.memorial-theme-classic .pm-footer .pm-footer-cta {
  color: var(--landing-text-soft);
  font-family: var(--landing-serif);
  font-style: normal;
}
body.landing-page .pm-footer .pm-footer-stat-number,
body.memorial-theme-classic .pm-footer .pm-footer-stat-number {
  color: var(--landing-accent);
  font-family: var(--landing-serif);
  font-weight: 500;
}
body.landing-page .pm-footer .pm-footer-stat-label,
body.memorial-theme-classic .pm-footer .pm-footer-stat-label {
  color: var(--landing-text-muted);
}
body.landing-page .pm-footer-button,
body.memorial-theme-classic .pm-footer-button {
  background: #ffffff;
  color: #ff434b;
  border: 1px solid rgba(255, 67, 75, 0.18);
  border-radius: 4px;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  padding: 12px 28px;
  height: auto;
}
body.landing-page .pm-footer-button:hover,
body.memorial-theme-classic .pm-footer-button:hover {
  background: #fff7f8;
  color: #ff434b;
  border-color: rgba(255, 67, 75, 0.34);
  box-shadow: 0 8px 22px rgba(255, 67, 75, 0.18);
}
body.landing-page .pm-footer-legal,
body.memorial-theme-classic .pm-footer-legal {
  font-family: var(--font-sans, "Inter", sans-serif);
}
body.landing-page .pm-footer-legal a,
body.memorial-theme-classic .pm-footer-legal a {
  color: var(--landing-text-muted);
}
body.landing-page .pm-footer-legal a:hover,
body.memorial-theme-classic .pm-footer-legal a:hover {
  color: var(--landing-accent);
}
body.landing-page .pm-footer-legal .divider,
body.memorial-theme-classic .pm-footer-legal .divider {
  color: var(--landing-rule-strong);
}
body.landing-page .pm-footer-copyright,
body.memorial-theme-classic .pm-footer-copyright {
  color: var(--landing-text-muted);
  font-family: var(--font-sans, "Inter", sans-serif);
}

/* Keep every memorial theme's Photomyne footer visually identical to the
   default footer. Theme-specific rules above should only change background. */
body.memorial-shell .pm-footer {
  color: var(--landing-text-soft);
  border-top: 1px solid var(--landing-rule);
}
body.memorial-shell .pm-footer-logo-img {
  filter: brightness(0) saturate(100%);
  opacity: 0.85;
}
body.memorial-shell .pm-footer-desc,
body.memorial-shell .pm-footer-cta {
  color: var(--landing-text-soft);
  font-family: var(--landing-serif);
  font-style: normal;
}
body.memorial-shell .pm-footer-stat-number {
  color: var(--landing-accent);
  font-family: var(--landing-serif);
  font-weight: 500;
}
body.memorial-shell .pm-footer-stat-label {
  color: var(--landing-text-muted);
}
body.memorial-shell .pm-footer-button {
  background: #ffffff;
  color: #ff434b;
  border: 1px solid rgba(255, 67, 75, 0.18);
  border-radius: 4px;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 28px;
  height: auto;
}
body.memorial-shell .pm-footer-button:hover {
  background: #fff7f8;
  color: #ff434b;
  border-color: rgba(255, 67, 75, 0.34);
  box-shadow: 0 8px 22px rgba(255, 67, 75, 0.18);
}
body.memorial-shell .pm-footer-legal {
  font-family: var(--font-sans, "Inter", sans-serif);
}
body.memorial-shell .pm-footer-legal a {
  color: var(--landing-text-muted);
}
body.memorial-shell .pm-footer-legal a:hover {
  color: var(--landing-accent);
}
body.memorial-shell .pm-footer-legal .divider {
  color: var(--landing-rule-strong);
}
body.memorial-shell .pm-footer-copyright {
  color: var(--landing-text-muted);
  font-family: var(--font-sans, "Inter", sans-serif);
}
body.memorial-theme-nocturne .pm-footer {
  color: #e8e2d5;
  border-top-color: rgba(232, 226, 213, 0.16);
}
body.memorial-theme-nocturne .pm-footer-logo-img {
  filter: none;
  opacity: 0.95;
}
body.memorial-theme-nocturne .pm-footer-desc,
body.memorial-theme-nocturne .pm-footer-cta {
  color: rgba(232, 226, 213, 0.74);
}
body.memorial-theme-nocturne .pm-footer-stat-number {
  color: #d0a574;
}
body.memorial-theme-nocturne .pm-footer-stat-label,
body.memorial-theme-nocturne .pm-footer-legal a,
body.memorial-theme-nocturne .pm-footer-copyright {
  color: rgba(232, 226, 213, 0.62);
}
body.memorial-theme-nocturne .pm-footer-legal a:hover {
  color: #f1ece3;
}
body.memorial-theme-nocturne .pm-footer-legal .divider {
  color: rgba(232, 226, 213, 0.28);
}

/* (4) MEMORIAL TOPBAR — when memorial page uses cream theme, the brand mark
   logo would otherwise stay white and disappear on cream. Force it dark. */
body.memorial-theme-classic .topbar .brand-photomyne-logo {
  filter: brightness(0) saturate(100%);
  opacity: 0.58;
}
body.memorial-theme-classic .topbar,
body.memorial-theme-classic .topbar a {
  color: var(--text);
}

/* ===========================================================================
   LANDING TYPOGRAPHY — strict two-font system (May 7, fix #2)
   Only Cormorant Garamond and Inter. Everything else falls back to Inter.
   Higher specificity than .rubik-page rules to win cleanly even if someone
   re-adds the body class later.
   =========================================================================== */

/* Body default → Inter. Anything not explicitly Cormorant inherits Inter. */
body.landing-page {
  font-family: var(--font-sans, "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
  color: var(--text);
  line-height: 1.55;
  background: var(--landing-paper);
}

body.landing-page main { background: var(--landing-paper); }

body.landing-page .topbar {
  --topbar-bg: #c8cec1;
  --topbar-text: #2d3429;
  --topbar-muted: rgba(45, 52, 41, 0.68);
  --topbar-border: rgba(45, 52, 41, 0.16);
  --topbar-link-bg: rgba(45, 52, 41, 0.045);
  --topbar-link-hover: rgba(45, 52, 41, 0.09);
  --topbar-link-active: rgba(45, 52, 41, 0.13);
  --topbar-logo-filter: brightness(0) saturate(100%);
  --topbar-logo-opacity: 0.58;
}

body.landing-page .pm-footer {
  background: #c8cec1;
  border-top-color: rgba(45, 52, 41, 0.16);
}

/* Inter — every UI / metadata / small-caps element */
body.landing-page .landing-eyebrow,
body.landing-page .section-eyebrow,
body.landing-page .demo-dates,
body.landing-page .demo-link,
body.landing-page .gsi-button,
body.landing-page .gsi-text,
body.landing-page .cta-fineprint,
body.landing-page .link-secondary {
  font-family: var(--font-sans, "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
}

/* Cormorant — every display / body-serif element */
body.landing-page .landing-headline,
body.landing-page .landing-sub,
body.landing-page .section-title,
body.landing-page .cta-headline,
body.landing-page .cta-copy,
body.landing-page .demo-name,
body.landing-page .demo-quote,
body.landing-page .trust-band p,
body.landing-page .value-card h3,
body.landing-page .value-card p {
  font-family: "Cormorant Garamond", "Garamond", Georgia, serif;
}

/* Tighten weight palette: 400/500 only on Cormorant; 500 only on Inter */
body.landing-page .landing-headline { font-weight: 500; }
body.landing-page .section-title    { font-weight: 500; }
body.landing-page .cta-headline     { font-weight: 500; }
body.landing-page .cta-copy         { font-weight: 500; }
body.landing-page .demo-name        { font-weight: 500; }
body.landing-page .value-card h3    { font-weight: 500; }
body.landing-page .value-card p,
body.landing-page .landing-sub,
body.landing-page .trust-band p,
body.landing-page .demo-quote       { font-weight: 400; }

body.landing-page .landing-eyebrow,
body.landing-page .section-eyebrow,
body.landing-page .demo-dates,
body.landing-page .demo-link,
body.landing-page .cta-fineprint,
body.landing-page .gsi-button       { font-weight: 500; }

/* Consistent eyebrow tracking across the page */
body.landing-page .landing-eyebrow,
body.landing-page .section-eyebrow {
  letter-spacing: 0.32em;
  font-size: 11px;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  body.landing-page .landing-sub {
    font-size: 19px;
    line-height: 1.45;
    font-weight: 500;
    color: #332e28;
  }

  body.landing-page .trust-band p {
    font-size: 20px;
    line-height: 1.48;
    font-weight: 500;
    color: #332e28;
  }

  body.landing-page .value-card h3 {
    font-size: 25px;
    line-height: 1.12;
    color: #27231f;
  }

  body.landing-page .value-card p {
    font-size: 18.5px;
    line-height: 1.52;
    font-weight: 500;
    color: #332e28;
  }
}

/* ===========================================================================
   CANDLE FLAME — v5 SVG glyph (May 8)
   Targets the new <svg class="candle-flame-svg"> in page.html.
   Independent of theme — works the same on classic/heritage/atelier/nocturne.
   =========================================================================== */

.candle-visual {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 34px;
  flex-shrink: 0;
}

.candle-flame-svg {
  width: 22px;
  height: 30px;
  display: block;
  filter: drop-shadow(0 0 6px rgba(232, 162, 90, 0.55));
}

/* Slightly stronger glow on dark themes so the flame still pops */
body.memorial-theme-nocturne .candle-flame-svg {
  filter: drop-shadow(0 0 8px rgba(255, 196, 130, 0.7));
}

/* Admin chrome (editor / profile / create / admin pages) — match landing layout:
   cream body, centered topbar (transparent), main wrapped in a card with shadow. */
body.admin-shell {
  background: #ece6da;
}
body.admin-shell .topbar {
  --topbar-bg: transparent;
  --topbar-text: #1c1814;
  --topbar-muted: rgba(28, 24, 20, 0.66);
  --topbar-border: rgba(40, 30, 15, 0.12);
  --topbar-link-bg: rgba(255, 255, 255, 0.55);
  --topbar-link-hover: rgba(40, 30, 15, 0.06);
  --topbar-link-active: rgba(40, 30, 15, 0.12);
  --topbar-logo-filter: brightness(0) saturate(100%);
  --topbar-logo-opacity: 0.58;
  --menu-bg: #faf6ec;
  --menu-border: rgba(139, 101, 31, 0.32);
  --menu-divider: rgba(139, 101, 31, 0.18);
  --menu-accent: #8b651f;
  --menu-accent-soft: rgba(139, 101, 31, 0.08);
  --menu-accent-strong: rgba(139, 101, 31, 0.14);
  --menu-eyebrow: #8b651f;
  --menu-text: #2c2418;
  --menu-text-muted: #6e5a3c;
  --menu-shadow: 0 14px 38px rgba(74, 55, 30, 0.16);
  background: transparent !important;
  border-bottom: 0 !important;
  width: 100%;
  max-width: 1180px;
  margin: 24px auto 16px;
  padding: 12px 16px !important;
  min-height: 60px !important;
  box-sizing: border-box;
}
body.admin-shell main {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto 60px;
  padding: 36px 40px 44px !important;
  background: #faf6e8 !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 50px rgba(74, 55, 30, 0.1) !important;
  box-sizing: border-box;
}
/* Override the older viewport-centering trick on .profile-page so the cards
   stay inside our stage card instead of escaping it. */
body.admin-shell .profile-page,
body.admin-shell .admin-page {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  transform: none !important;
}
@media (max-width: 900px) {
  body.admin-shell .topbar {
    width: auto;
    margin: 16px 12px 12px;
    padding: 10px 12px !important;
  }
  body.admin-shell main {
    width: auto;
    margin: 0 12px 40px;
    padding: 24px 20px 32px !important;
    border-radius: 10px !important;
  }
}

body.admin-shell .topbar-memorial {
  font-family: "Cormorant Garamond", "Noto Serif Hebrew", Georgia, serif;
}

body.admin-shell .topbar-status {
  color: #2c2925;
  border-color: rgba(44, 41, 37, 0.28);
  background: rgba(255, 255, 255, 0.22);
}

body.admin-shell .topbar .brand-photomyne-logo {
  filter: brightness(0) saturate(100%);
  opacity: 0.58;
}

body.admin-shell .pm-footer {
  background: #ede5d2;
  color: var(--landing-text-soft);
  border-top: 1px solid var(--landing-rule);
}

body.admin-shell .pm-footer-logo-img {
  filter: brightness(0) saturate(100%);
  opacity: 0.85;
}

body.admin-shell .pm-footer-desc,
body.admin-shell .pm-footer-cta {
  color: var(--landing-text-soft);
  font-family: var(--landing-serif);
  font-style: normal;
}

body.admin-shell .pm-footer-stat-number {
  color: var(--landing-accent);
  font-family: var(--landing-serif);
  font-weight: 500;
}

body.admin-shell .pm-footer-stat-label,
body.admin-shell .pm-footer-legal a,
body.admin-shell .pm-footer-copyright {
  color: var(--landing-text-muted);
}

body.admin-shell .pm-footer-legal a:hover {
  color: var(--landing-accent);
}

body.admin-shell .pm-footer-legal .divider {
  color: var(--landing-rule-strong);
}

body.admin-shell .pm-footer-button {
  background: #ffffff;
  color: #ff434b;
  border: 1px solid rgba(255, 67, 75, 0.18);
  border-radius: 4px;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 28px;
  height: auto;
}

body.admin-shell .pm-footer-button:hover {
  background: #fff7f8;
  color: #ff434b;
  border-color: rgba(255, 67, 75, 0.34);
  box-shadow: 0 8px 22px rgba(255, 67, 75, 0.18);
}

/* ============================================
   ALBUM SIDEBAR SHELL — public page
   Always shows one album at a time, sidebar + stage.
   Typography inherits from page font-style.
   Backgrounds & accents are fixed per style variation.
   ============================================ */
.album-sidebar-shell {
  position: relative;
  left: 50%;
  width: min(1180px, calc(100vw - 32px));
  margin: 0 auto var(--space-12);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 36px rgba(74, 55, 30, 0.08);
  background: #fdf9ef;
  min-height: 520px;
}
.album-sidebar {
  padding: 32px 20px;
  min-width: 0;
  border-right: 1px solid rgba(139, 101, 31, 0.22);
  background: #faf6ec;
}
.album-sidebar-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a6f37;
  padding: 0 14px 14px;
  border-bottom: 1px solid rgba(139, 101, 31, 0.22);
  margin: 0 0 14px;
}
.album-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.album-sidebar-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 8px;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  color: inherit;
  font: inherit;
  transition: background 150ms ease;
}
.album-sidebar-item:hover {
  background: rgba(139, 101, 31, 0.06);
}
.album-sidebar-item.is-active {
  background: rgba(139, 101, 31, 0.14);
}
.album-sidebar-item:focus-visible {
  outline: 2px solid rgba(139, 101, 31, 0.5);
  outline-offset: 2px;
}
.album-sidebar-thumb {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 4px;
  overflow: hidden;
  background: #e8e0c8;
  border: 1px solid rgba(139, 101, 31, 0.22);
}
.album-sidebar-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.album-sidebar-text {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.album-sidebar-name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  color: #2c2418;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.album-sidebar-item.is-active .album-sidebar-name {
  font-weight: 600;
}
.album-sidebar-count {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: #8a785a;
}
.album-sidebar-marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  justify-self: end;
  transition: background 150ms ease;
}
.album-stage {
  padding: 36px 40px 44px;
  background: #ffffff;
  min-width: 0;
}
.album-sidebar-shell .album-chapter {
  position: static;
  left: auto;
  width: 100%;
  margin: 0;
  transform: none;
}
.album-sidebar-shell .album-chapter + .album-chapter {
  margin-top: 0;
}
.album-sidebar-shell .chapter-title {
  text-align: left;
  margin-bottom: 6px;
}
.album-sidebar-shell .chapter-subtitle {
  text-align: left;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(139, 101, 31, 0.22);
}
.album-sidebar-shell .album-grid {
  justify-content: flex-start;
  padding-bottom: clamp(48px, 5vw, 72px);
}
.album-sidebar-shell .album-photo-open {
  aspect-ratio: 1 / 1;
}
.album-sidebar-shell.public-albums-enhanced .js-public-album-panel[hidden] {
  display: none;
}
.album-sidebar-shell.public-albums-enhanced .album-chapter:not(.is-active) {
  display: none;
}
.album-sidebar-shell .public-album-panel.is-entering {
  animation: publicAlbumFade 180ms ease both;
}

/* Always-show every photo caption as Liquid-Glass overlay (already styled
   via .album-photo figcaption — nothing to add here). */

/* -------- Variation 2: Minimal -------- */
.album-sidebar-shell.sidebar-style-minimal {
  grid-template-columns: 220px minmax(0, 1fr);
}
.sidebar-style-minimal .album-sidebar {
  background: #ffffff;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  padding: 36px 0;
}
.sidebar-style-minimal .album-sidebar-label {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: #8a857a;
  font-weight: 600;
  padding: 0 28px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 6px;
}
.sidebar-style-minimal .album-sidebar-list {
  gap: 0;
}
.sidebar-style-minimal .album-sidebar-item {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 12px 28px;
  border-left: 3px solid transparent;
  border-radius: 0;
}
.sidebar-style-minimal .album-sidebar-thumb,
.sidebar-style-minimal .album-sidebar-marker {
  display: none;
}
.sidebar-style-minimal .album-sidebar-text {
  display: contents;
}
.sidebar-style-minimal .album-sidebar-item:hover {
  background: #faf8f3;
  border-left-color: rgba(139, 101, 31, 0.4);
}
.sidebar-style-minimal .album-sidebar-item.is-active {
  background: #faf6ec;
  border-left-color: #8a6f37;
}
.sidebar-style-minimal .album-sidebar-name {
  font-size: 15px;
  -webkit-line-clamp: 2;
}
.sidebar-style-minimal .album-sidebar-count {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: #8a857a;
  flex-shrink: 0;
}

/* -------- Variation 3: Hairline Dividers -------- */
.sidebar-style-hairline .album-sidebar {
  background: #ffffff;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  padding: 36px 0;
}
.sidebar-style-hairline .album-sidebar-label {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: #8a857a;
  font-weight: 600;
  padding: 0 28px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 0;
}
.sidebar-style-hairline .album-sidebar-list {
  gap: 0;
}
.sidebar-style-hairline .album-sidebar-item {
  grid-template-columns: 64px minmax(0, 1fr) 8px;
  gap: 16px;
  padding: 18px 28px;
  border-radius: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.sidebar-style-hairline .album-sidebar-item:last-child {
  border-bottom: 0;
}
.sidebar-style-hairline .album-sidebar-item:hover {
  background: transparent;
}
.sidebar-style-hairline .album-sidebar-item:hover .album-sidebar-name {
  color: #8a6f37;
}
.sidebar-style-hairline .album-sidebar-item.is-active {
  background: transparent;
}
.sidebar-style-hairline .album-sidebar-item.is-active .album-sidebar-name {
  color: #5a4424;
  font-weight: 600;
}
.sidebar-style-hairline .album-sidebar-item.is-active .album-sidebar-marker {
  background: #8a6f37;
}
.sidebar-style-hairline .album-sidebar-thumb {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 0;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px rgba(139, 101, 31, 0.18);
  transition: box-shadow 200ms ease;
}
.sidebar-style-hairline .album-sidebar-item.is-active .album-sidebar-thumb {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #8a6f37;
}
.sidebar-style-hairline .album-sidebar-name {
  font-size: 17px;
  letter-spacing: -0.005em;
}
.sidebar-style-hairline .album-sidebar-count {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 12px;
  color: #8a857a;
  letter-spacing: 0.04em;
}

/* -------- Variation 4: Dark -------- */
.album-sidebar-shell.sidebar-style-dark {
  grid-template-columns: 300px minmax(0, 1fr);
}
.sidebar-style-dark .album-sidebar {
  background: #2c2418;
  color: #f5f0e3;
  padding: 30px 14px;
  border-right: 0;
}
.sidebar-style-dark .album-sidebar-label {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: #b8a36e;
  font-weight: 600;
  padding: 0 12px 16px;
  border-bottom: 1px solid rgba(184, 163, 110, 0.22);
  margin-bottom: 12px;
}
.sidebar-style-dark .album-sidebar-list {
  gap: 2px;
}
.sidebar-style-dark .album-sidebar-item {
  padding: 10px 12px;
  border-radius: 5px;
  transition: background 180ms ease;
}
.sidebar-style-dark .album-sidebar-item:hover {
  background: rgba(245, 240, 227, 0.06);
}
.sidebar-style-dark .album-sidebar-item.is-active {
  background: rgba(216, 184, 125, 0.14);
}
.sidebar-style-dark .album-sidebar-thumb {
  background: #1f1410;
  border-color: rgba(184, 163, 110, 0.22);
}
.sidebar-style-dark .album-sidebar-item.is-active .album-sidebar-thumb {
  border-color: #d8b87d;
  box-shadow: 0 0 0 1px rgba(216, 184, 125, 0.42);
}
.sidebar-style-dark .album-sidebar-name {
  color: #f5f0e3;
}
.sidebar-style-dark .album-sidebar-item.is-active .album-sidebar-name {
  color: #d8b87d;
  font-weight: 600;
}
.sidebar-style-dark .album-sidebar-count {
  font-family: var(--serif);
  font-style: italic;
  color: rgba(245, 240, 227, 0.62);
}
.sidebar-style-dark .album-sidebar-item.is-active .album-sidebar-count {
  color: rgba(216, 184, 125, 0.78);
}
.sidebar-style-dark .album-sidebar-marker {
  display: none;
}

/* Marker is hidden by default in detailed/minimal/dark — only hairline uses it */
.sidebar-style-detailed .album-sidebar-marker {
  display: none;
}

/* Responsive: collapse to single column on narrow screens */
@media (max-width: 900px) {
  .album-sidebar-shell,
  .album-sidebar-shell.sidebar-style-minimal,
  .album-sidebar-shell.sidebar-style-dark {
    grid-template-columns: 1fr;
  }
  .album-sidebar {
    border-right: 0;
    border-bottom: 1px solid rgba(139, 101, 31, 0.22);
    padding: 24px 16px;
  }
  .sidebar-style-minimal .album-sidebar,
  .sidebar-style-hairline .album-sidebar,
  .sidebar-style-dark .album-sidebar {
    padding: 24px 0;
  }
  .album-stage {
    padding: 24px 20px 32px;
  }
}
@media (max-width: 640px) {
  .album-sidebar-shell {
    width: calc(100vw - 24px);
    border-radius: 10px;
  }
  .edit-page .photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .edit-page .photo-body {
    padding: 6px 7px;
  }
}

/* ============================================
   EDIT-PAGE: sidebar style picker
   ============================================ */
.album-sidebar-style-card {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.album-sidebar-style-card .subsection-title {
  margin-top: 0;
}
.album-sidebar-style-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}
.album-sidebar-style-choice {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.album-sidebar-style-choice:hover {
  border-color: var(--border-strong);
  background: var(--surface);
}
.album-sidebar-style-choice input {
  position: absolute;
  inset: 12px 12px auto auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}
.album-sidebar-style-choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(94, 99, 88, 0.12);
}
.album-sidebar-style-preview {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 4px;
  align-items: stretch;
  min-height: 72px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.5);
}
.album-sidebar-style-preview .ssp-side {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
}
.album-sidebar-style-preview .ssp-item {
  display: block;
  background: rgba(139, 101, 31, 0.22);
  border-radius: 2px;
}
.album-sidebar-style-preview .ssp-item.ssp-item-active {
  background: var(--accent);
}
.album-sidebar-style-preview .ssp-main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 3px;
}
.album-sidebar-style-preview .ssp-main span {
  display: block;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(196, 184, 156, 0.16));
  border: 1px solid var(--border);
  border-radius: 3px;
}
.album-sidebar-style-preview-detailed {
  background: #faf6ec;
}
.album-sidebar-style-preview-minimal .ssp-side .ssp-item {
  border-radius: 0;
  background: rgba(139, 101, 31, 0.18);
  height: 8px;
  align-self: center;
}
.album-sidebar-style-preview-minimal .ssp-side .ssp-item.ssp-item-active {
  background: var(--accent);
}
.album-sidebar-style-preview-hairline {
  background: #ffffff;
}
.album-sidebar-style-preview-hairline .ssp-side .ssp-item {
  border-radius: 50%;
  width: 18px;
  height: 18px;
  justify-self: center;
  align-self: center;
}
.album-sidebar-style-preview-dark {
  background: #2c2418;
}
.album-sidebar-style-preview-dark .ssp-side .ssp-item {
  background: rgba(216, 184, 125, 0.32);
}
.album-sidebar-style-preview-dark .ssp-side .ssp-item.ssp-item-active {
  background: #d8b87d;
}
.album-sidebar-style-preview-dark .ssp-main span {
  background: rgba(245, 240, 227, 0.16);
  border-color: rgba(216, 184, 125, 0.32);
}
.album-sidebar-style-copy {
  display: grid;
  align-content: center;
  gap: 4px;
  padding-right: 18px;
}
.album-sidebar-style-copy strong {
  color: var(--text);
  font-size: 14px;
}
.album-sidebar-style-copy span {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.4;
}

/* ============================================================
   LANDING PAGE — only applied when body has .landing-page
   Cathedral · Linen Soft palette. Stage card with shadow on cream.
   Scoped strictly to body.landing-page to avoid leaking elsewhere.
   ============================================================ */

/* Hide the global topbar only on the landing page */
body.landing-page > .topbar { display: none; }

/* Palette + page background */
body.landing-page {
  background: #ece6da;
  --lp-ink: #1c1814;
  --lp-ink-soft: #5a4d3a;
  --lp-ink-muted: #8a7e68;
  --lp-brass: #8a6f37;
  --lp-paper-1: #faf6e8;
  --lp-paper-2: #efe9d4;
  --lp-paper-3: #f3eccf;
  --lp-icon-bg: #e6dec3;
  --lp-border: rgba(40, 30, 15, 0.12);
  --lp-hairline: rgba(40, 30, 15, 0.08);
}
/* Wrap content with breathing room so the cream body background shows around the stage.
   Overrides older .landing-page main rules (background #dfe0d6, max-width:none) so the
   stage sits on the correct warm cream (#ece6da) like the mockup. */
body.landing-page main {
  padding: 24px 24px 60px !important;
  background: #ece6da !important;
  max-width: none !important;
}

/* Footer — override older sage-green tinting so it sits in the warm cream family. */
body.landing-page .pm-footer {
  background: #ede5d2 !important;
  border-top: 1px solid rgba(40, 30, 15, 0.12) !important;
}
body.landing-page .pm-footer .pm-footer-stat-number {
  color: var(--lp-brass, #8a6f37) !important;
}
body.landing-page .pm-footer-legal a:hover {
  color: var(--lp-brass, #8a6f37) !important;
}

/* ----- Landing header (replaces topbar on this page) ----- */
body.landing-page .lp-header {
  max-width: 1180px;
  margin: 0 auto 16px;
  padding: 12px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
body.landing-page .lp-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--lp-ink);
}
body.landing-page .lp-brand-title {
  font-family: "Cormorant Garamond", "EB Garamond", serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.005em;
  color: var(--lp-ink);
}
body.landing-page .lp-brand-sub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 10px;
  margin-left: 4px;
  border-left: 1px solid var(--lp-border);
}
body.landing-page .lp-brand-by {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 13px;
  color: var(--lp-ink-muted);
}
body.landing-page .lp-brand-logo {
  height: 14px;
  width: auto;
  filter: brightness(0) saturate(100%);
  opacity: 0.78;
}
body.landing-page .lp-nav {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
body.landing-page .lp-nav-link {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 14px;
  color: var(--lp-ink-soft);
  text-decoration: none;
  padding: 8px 4px;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease, color 160ms ease;
}
body.landing-page .lp-nav-link:hover {
  color: var(--lp-ink);
  border-bottom-color: var(--lp-brass);
}
body.landing-page .lp-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: #fff;
  color: var(--lp-ink);
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid var(--lp-border);
  border-radius: 999px;
  text-decoration: none;
  transition: box-shadow 160ms ease, border-color 160ms ease;
}
body.landing-page .lp-nav-cta:hover {
  border-color: var(--lp-ink);
  box-shadow: 0 4px 14px rgba(40, 30, 15, 0.08);
}
body.landing-page .lp-account-menu {
  position: relative;
}
body.landing-page .lp-account-menu summary {
  list-style: none;
  cursor: pointer;
}
body.landing-page .lp-account-menu summary::-webkit-details-marker {
  display: none;
}
body.landing-page .lp-account-trigger {
  user-select: none;
}
body.landing-page .lp-account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--lp-icon-bg);
  color: var(--lp-brass);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
body.landing-page .lp-account-chevron {
  transition: transform 160ms ease;
}
body.landing-page .lp-account-menu[open] .lp-account-chevron {
  transform: rotate(180deg);
}
body.landing-page .lp-account-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 20;
  width: min(260px, calc(100vw - 32px));
  padding: 8px;
  background: #fff;
  border: 1px solid var(--lp-border);
  border-radius: 10px;
  box-shadow: 0 18px 42px rgba(40, 30, 15, 0.14);
}
body.landing-page .lp-account-user {
  display: grid;
  gap: 2px;
  padding: 10px 10px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--lp-border);
}
body.landing-page .lp-account-user strong {
  color: var(--lp-ink);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}
body.landing-page .lp-account-user span {
  color: var(--lp-ink-muted);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
body.landing-page .lp-account-panel a {
  display: block;
  padding: 10px;
  border-radius: 7px;
  color: var(--lp-ink-soft);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
body.landing-page .lp-account-panel a:hover {
  background: var(--lp-paper-2);
  color: var(--lp-ink);
}

/* ----- Stage card on cream ----- */
body.landing-page .lp-stage {
  max-width: 1180px;
  margin: 0 auto;
  background: var(--lp-paper-1);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(74, 55, 30, 0.1);
}

/* ----- Hero (Cathedral · Linen Soft) ----- */
body.landing-page .lp-hero {
  padding: 96px 32px 80px;
  text-align: center;
  background: var(--lp-paper-1);
}
body.landing-page .lp-mark {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  background: var(--lp-icon-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lp-brass);
}
body.landing-page .lp-mark svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.landing-page .lp-eyebrow {
  font-family: "Cinzel", "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.5em;
  color: var(--lp-brass);
  margin-bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  text-transform: uppercase;
}
body.landing-page .lp-eyebrow::before,
body.landing-page .lp-eyebrow::after {
  content: ""; display: inline-block;
  width: 28px; height: 1px;
  background: var(--lp-brass);
}
body.landing-page .lp-headline {
  font-family: "EB Garamond", serif;
  font-weight: 400;
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: 0;
  color: var(--lp-ink);
  max-width: 780px;
  margin: 0 auto 22px;
}
body.landing-page .lp-sub {
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: var(--lp-ink-soft);
  max-width: 580px;
  margin: 0 auto 32px;
}
body.landing-page .lp-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 36px;
}
body.landing-page .lp-line {
  width: 90px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--lp-brass), transparent);
}
body.landing-page .lp-diamond {
  width: 6px; height: 6px;
  background: var(--lp-brass);
  transform: rotate(45deg);
}
body.landing-page .lp-actions {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}
body.landing-page .lp-cta-primary,
.lp-service .lp-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--lp-ink);
  color: var(--lp-paper-1);
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid var(--lp-ink);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: filter 160ms ease;
}
body.landing-page .lp-cta-primary:hover,
.lp-service .lp-cta-primary:hover { filter: brightness(1.1); }
body.landing-page .lp-cta-secondary {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 15px;
  color: var(--lp-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--lp-brass);
  padding-bottom: 2px;
  transition: color 160ms ease;
}
body.landing-page .lp-cta-secondary:hover { color: var(--lp-brass); }

/* ----- Shared section title pattern ----- */
body.landing-page .lp-section-eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--lp-brass);
  margin-bottom: 12px;
  text-align: center;
}
body.landing-page .lp-section-title {
  font-family: "EB Garamond", serif;
  font-weight: 500;
  font-size: 38px;
  line-height: 1.15;
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
  color: var(--lp-ink);
}

/* ----- What goes inside ----- */
body.landing-page .lp-features {
  padding: 88px 64px;
  background: var(--lp-paper-2);
}
body.landing-page .lp-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
}
body.landing-page .lp-feature {
  padding: 28px;
  background: var(--lp-paper-1);
  border: 1px solid var(--lp-border);
  border-radius: 10px;
}
body.landing-page .lp-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--lp-icon-bg);
  border-radius: 8px;
  color: var(--lp-brass);
  margin-bottom: 16px;
}
body.landing-page .lp-feature-icon svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
body.landing-page .lp-feature h3 {
  font-family: "EB Garamond", serif;
  font-weight: 500;
  font-size: 19px;
  color: var(--lp-ink);
  margin-bottom: 6px;
}
body.landing-page .lp-feature p {
  font-family: "Inter", sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--lp-ink-soft);
}

/* ----- See an example ----- */
body.landing-page .lp-demo {
  padding: 80px 64px;
  background: var(--lp-paper-3);
}
body.landing-page .lp-demo-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  max-width: 820px;
  margin: 0 auto;
  align-items: center;
  padding: 32px;
  background: var(--lp-paper-1);
  border-radius: 12px;
  border: 1px solid var(--lp-border);
  text-decoration: none;
  color: var(--lp-ink);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
body.landing-page .lp-demo-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(40, 30, 15, 0.12);
}
body.landing-page .lp-demo-portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 28%;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(40, 30, 15, 0.14);
}
body.landing-page .lp-demo-name {
  font-family: "EB Garamond", serif;
  font-weight: 500;
  font-size: 24px;
  color: var(--lp-ink);
  margin-bottom: 4px;
}
body.landing-page .lp-demo-dates {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 14px;
  color: var(--lp-ink-muted);
  margin-bottom: 14px;
}
body.landing-page .lp-demo-quote {
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--lp-ink-soft);
  margin-bottom: 16px;
}
body.landing-page .lp-demo-link {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--lp-ink);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--lp-ink);
  display: inline-block;
}

/* ----- Concierge service banner ----- */
/* Shared component: also embedded on /create and /profile (lp-service-embed),
   so it carries its own copy of the landing tokens and is not scoped to body.landing-page. */
.lp-service {
  --lp-ink: #1c1814;
  --lp-ink-soft: #5a4d3a;
  --lp-brass: #8a6f37;
  --lp-paper-1: #faf6e8;
  --lp-paper-2: #efe9d4;
  --lp-paper-3: #f3eccf;
  --lp-border: rgba(40, 30, 15, 0.12);
  padding: 76px 64px;
  background: var(--lp-paper-2);
}
.lp-service .lp-service-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 40px;
  align-items: center;
  max-width: 820px;
  margin: 0 auto;
  padding: 36px 40px;
  background: var(--lp-paper-1);
  border: 1px solid var(--lp-border);
  border-radius: 12px;
}
.lp-service .lp-service-eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--lp-brass);
  margin-bottom: 12px;
}
.lp-service .lp-service-title {
  font-family: "EB Garamond", serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.15;
  color: var(--lp-ink);
  margin-bottom: 12px;
}
.lp-service .lp-service-sub {
  font-family: "EB Garamond", serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--lp-ink-soft);
  margin-bottom: 22px;
}
.lp-service .lp-service-frame {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--lp-border);
  border-radius: 12px;
  background: var(--lp-paper-3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-service .lp-service-frame svg {
  width: 64px;
  height: 64px;
  fill: none;
  stroke: var(--lp-brass);
  stroke-width: 1.2;
}
@media (max-width: 880px) {
  .lp-service { padding: 56px 24px; }
  .lp-service .lp-service-inner { grid-template-columns: 1fr; padding: 28px 24px; text-align: center; }
  .lp-service .lp-service-frame { display: none; }
  .lp-service .lp-service-title { font-size: 26px; }
}
/* Embedded variant (/create, /profile): the card alone, no outer band,
   stretched to the full width of the page column like the cards above it. */
.lp-service.lp-service-embed {
  padding: 0;
  background: transparent;
}
.lp-service.lp-service-embed .lp-service-inner { max-width: none; }
.create-page .lp-service-embed { margin-top: 22px; }

/* ----- Service page (/memorial-service) ----- */
body.landing-page .lp-svc-prose { padding: 80px 64px; background: var(--lp-paper-3); }
body.landing-page .lp-svc-prose-inner { max-width: 680px; margin: 0 auto; text-align: center; }
body.landing-page .lp-svc-prose-inner p { font-family: "EB Garamond", serif; font-size: 18px; line-height: 1.62; color: var(--lp-ink-soft); margin-bottom: 18px; }
body.landing-page .lp-svc-prose-inner p:last-child { margin-bottom: 0; }
body.landing-page .lp-svc-form-section { padding: 80px 64px; background: var(--lp-paper-1); }
body.landing-page .lp-svc-form { max-width: 480px; margin: 0 auto; }
body.landing-page .lp-svc-field { margin-bottom: 16px; text-align: left; }
body.landing-page .lp-svc-field label { display: block; font-family: "Inter", sans-serif; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--lp-ink-muted); margin-bottom: 6px; }
body.landing-page .lp-svc-field input, body.landing-page .lp-svc-field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--lp-border); border-radius: 8px; background: var(--lp-paper-2); font-family: "Inter", sans-serif; font-size: 14px; color: var(--lp-ink); }
body.landing-page .lp-svc-field textarea { min-height: 92px; resize: vertical; }
body.landing-page .lp-svc-form .lp-cta-primary { width: 100%; justify-content: center; margin-top: 8px; }
body.landing-page .lp-svc-note { font-family: "Inter", sans-serif; font-size: 14px; line-height: 1.55; color: var(--lp-ink-soft); text-align: center; margin-top: 18px; }
body.landing-page .lp-svc-field select { width: 100%; padding: 12px 14px; border: 1px solid var(--lp-border); border-radius: 8px; background: var(--lp-paper-2); font-family: "Inter", sans-serif; font-size: 14px; color: var(--lp-ink); appearance: none; }
/* peek at a real page — a soft masonry collage of full snapshots (rounded, not cropped) */
body.landing-page .lp-svc-peek { padding: 76px 40px; background: var(--lp-paper-2); }
body.landing-page .lp-svc-peek-masonry { column-count: 3; column-gap: 24px; max-width: 940px; margin: 0 auto; }
body.landing-page .lp-svc-snap { break-inside: avoid; margin: 0 0 26px; width: auto; }
body.landing-page .lp-svc-snap img { width: 100%; height: auto; display: block; border-radius: 12px; box-shadow: 0 14px 34px rgba(40, 30, 15, 0.15); }
body.landing-page .lp-svc-snap figcaption { font-family: "Inter", sans-serif; font-size: 13.5px; font-weight: 500; color: var(--lp-ink-soft); text-align: center; margin-top: 12px; }
body.landing-page .lp-svc-trustline { font-family: "Inter", sans-serif; font-size: 15px; line-height: 1.55; color: var(--lp-ink-soft); text-align: center; margin: -20px auto 30px; max-width: 560px; }
/* honeypot: off-screen, never shown to humans */
body.landing-page .lp-svc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* validation notice (token-based, no invented colors) */
body.landing-page .lp-svc-error { font-family: "Inter", sans-serif; font-size: 14px; line-height: 1.5; color: var(--lp-ink); background: var(--lp-paper-3); border: 1px solid var(--lp-border); border-radius: 8px; padding: 12px 16px; max-width: 520px; margin: 0 auto 22px; text-align: center; }

/* in-place swap: form fades out, thank-you fades in, page height stays locked */
body.landing-page .lp-svc-form-view[hidden],
body.landing-page .lp-svc-thankyou[hidden] { display: none; }
body.landing-page .lp-svc-form-view { transition: opacity .24s ease; }
body.landing-page .lp-svc-form-section.is-swapping .lp-svc-form-view { opacity: 0; }
body.landing-page .lp-svc-form-section.is-swapped { display: flex; flex-direction: column; justify-content: center; }
body.landing-page .lp-svc-form-section.is-swapped .lp-svc-thankyou { animation: lpThanksIn .34s ease both; }
@keyframes lpThanksIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* thank-you state after a successful submit */
body.landing-page .lp-svc-thankyou { text-align: center; max-width: 620px; margin: 0 auto; }
body.landing-page .lp-svc-thankyou-mark { width: 54px; height: 54px; margin: 0 auto 22px; border-radius: 50%; border: 1px solid var(--lp-brass); color: var(--lp-brass); display: flex; align-items: center; justify-content: center; }
body.landing-page .lp-svc-thankyou-mark svg { width: 26px; height: 26px; }
body.landing-page .lp-svc-thankyou-text { font-family: "EB Garamond", serif; font-size: 19px; line-height: 1.7; color: var(--lp-ink-soft); margin: 18px auto 0; max-width: 520px; }

@media (prefers-reduced-motion: reduce) {
  body.landing-page .lp-svc-form-view,
  body.landing-page .lp-svc-form-section.is-swapped .lp-svc-thankyou { transition: none; animation: none; }
}

@media (max-width: 880px) {
  body.landing-page .lp-svc-prose, body.landing-page .lp-svc-form-section, body.landing-page .lp-svc-peek { padding: 56px 24px; }
  body.landing-page .lp-svc-prose-inner p { font-size: 17px; }
  body.landing-page .lp-svc-peek-masonry { column-count: 2; }
}
@media (max-width: 560px) {
  body.landing-page .lp-svc-peek-masonry { column-count: 1; max-width: 360px; }
}

/* ----- Trust band ----- */
body.landing-page .lp-trust {
  padding: 56px 64px;
  background: var(--lp-paper-1);
  text-align: center;
}
body.landing-page .lp-trust p {
  font-family: "EB Garamond", serif;
  font-size: 18px;
  line-height: 1.55;
  color: var(--lp-ink-soft);
  max-width: 760px;
  margin: 0 auto;
}
body.landing-page .lp-trust strong {
  color: var(--lp-ink);
  font-weight: 600;
}

/* ----- Final CTA ----- */
body.landing-page .lp-cta-band {
  padding: 88px 32px;
  text-align: center;
  background: var(--lp-paper-2);
}
body.landing-page .lp-cta-band h2 {
  font-family: "EB Garamond", serif;
  font-weight: 500;
  font-size: 36px;
  margin-bottom: 22px;
  color: var(--lp-ink);
}
body.landing-page .lp-fineprint {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: var(--lp-ink-muted);
  margin-top: 16px;
}

/* ----- Responsive ----- */
@media (max-width: 880px) {
  body.landing-page main { padding: 16px 12px 48px; }
  body.landing-page .lp-header {
    padding: 8px 12px;
  }
  body.landing-page .lp-brand-title { font-size: 19px; }
  body.landing-page .lp-stage { border-radius: 10px; }
  body.landing-page .lp-hero { padding: 64px 24px 56px; }
  body.landing-page .lp-headline { font-size: 40px; }
  body.landing-page .lp-sub { font-size: 17px; }
  body.landing-page .lp-features,
  body.landing-page .lp-demo,
  body.landing-page .lp-trust,
  body.landing-page .lp-cta-band { padding: 56px 24px; }
  body.landing-page .lp-feature-grid { grid-template-columns: repeat(2, 1fr); }
  body.landing-page .lp-demo-card { grid-template-columns: 1fr; max-width: 360px; }
  body.landing-page .lp-section-title { font-size: 30px; }
}
@media (max-width: 480px) {
  body.landing-page .lp-headline { font-size: 32px; }
  body.landing-page .lp-eyebrow { font-size: 10px; letter-spacing: 0.36em; }
  body.landing-page .lp-eyebrow::before,
  body.landing-page .lp-eyebrow::after { width: 18px; }
  body.landing-page .lp-feature-grid { grid-template-columns: 1fr; }
  body.landing-page .lp-nav {
    width: 100%;
    justify-content: flex-end;
  }
  body.landing-page .lp-nav-link { display: none; }
}

/* ============================================================
   Portrait crop editor — modal
   ============================================================ */
.pe-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(45, 41, 37, 0.48);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.pe-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.pe-modal {
  width: min(360px, 100%);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(45, 41, 37, 0.32);
  overflow: hidden;
  transform: translateY(8px);
  transition: transform 180ms ease;
}
.pe-backdrop.is-open .pe-modal { transform: translateY(0); }
.pe-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.pe-modal-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.pe-modal-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}
.pe-modal-close:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.pe-modal-body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.pe-crop {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: grab;
  touch-action: none;
  user-select: none;
  position: relative;
  box-shadow:
    0 0 0 4px var(--surface),
    0 0 0 5px var(--border-strong),
    0 12px 28px rgba(45, 41, 37, 0.18);
}
.pe-crop.is-dragging { cursor: grabbing; }
.pe-crop-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  will-change: transform;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
.pe-hint {
  margin: 0;
  font-size: 12px;
  color: var(--text-soft);
  text-align: center;
}
.pe-zoom-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.pe-zoom-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.pe-zoom-input {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  outline: none;
}
.pe-zoom-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  cursor: pointer;
}
.pe-zoom-input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  cursor: pointer;
}
.pe-zoom-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--accent);
  min-width: 42px;
  text-align: end;
}
.pe-modal-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}

/* ============================================================
   Admin — unified tool-like UI (functional, neutral, compact)
   Overrides the warmer Classic chrome with a more technical look:
   neutral surface, sharper edges, real tables, small status pills.
   Mobile: table wrappers scroll inside; body never scrolls.
   ============================================================ */
body.admin-management-shell {
  background: #ececea;
  --admin-ink: #1c1c1a;
  --admin-ink-soft: #3a3a36;
  --admin-muted: #6b6b65;
  --admin-soft: #9c9c95;
  --admin-line: #dcdcd6;
  --admin-line-strong: #c2c2bb;
  --admin-surface: #ffffff;
  --admin-surface-2: #f4f4f1;
  --admin-accent: #345366;
  --admin-accent-hover: #233e4f;
  --admin-ok: #2f6f4f;
  --admin-warn: #8a5722;
  --admin-stop: #7a3a2c;
}
body.admin-management-shell .topbar {
  background: transparent !important;
  border-bottom: 0 !important;
}
body.admin-management-shell main {
  background: var(--admin-surface) !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.04) !important;
  padding: 24px 28px !important;
  color: var(--admin-ink) !important;
}
@media (max-width: 900px) {
  body.admin-management-shell main {
    padding: 18px 16px !important;
  }
}

/* ---- Admin page header (title + nav) ---- */
body.admin-management-shell .admin-page > .page-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--admin-line);
}
body.admin-management-shell .admin-page > .page-header .eyebrow {
  margin: 0 0 4px;
  color: var(--admin-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body.admin-management-shell .admin-page > .page-header h1 {
  margin: 0 0 4px;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  color: var(--admin-ink);
  line-height: 1.2;
}
body.admin-management-shell .admin-page > .page-header .description {
  margin: 0 0 10px;
  color: var(--admin-muted);
  font-size: 13px;
}

/* ---- Admin nav (single source of truth) ---- */
.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 12px;
  padding: 0;
  border: 0;
}
.admin-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--admin-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.4;
}
.admin-nav-link:hover {
  background: var(--admin-surface-2);
  color: var(--admin-ink);
}
.admin-nav-link.is-active {
  background: var(--admin-ink);
  color: var(--admin-surface);
  border-color: var(--admin-ink);
}

/* ---- KPI compact row ---- */
.admin-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin: 4px 0 18px;
  padding: 14px 16px;
  background: var(--admin-surface-2);
  border: 1px solid var(--admin-line);
  border-radius: 4px;
}
.admin-kpi {
  display: flex;
  flex-direction: column;
}
.admin-kpi-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--admin-muted);
}
.admin-kpi-value {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--admin-ink);
  line-height: 1.1;
  margin-top: 2px;
}

/* ---- Section block within admin page ---- */
body.admin-management-shell .admin-page section.section {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 18px 0 24px;
}
body.admin-management-shell .admin-page section.section + section.section {
  padding-top: 18px;
  border-top: 1px solid var(--admin-line);
}
body.admin-management-shell .admin-page section.section h2 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--admin-ink-soft);
}
body.admin-management-shell .admin-page section.section .description {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--admin-muted);
}

/* ---- Tables ---- */
.admin-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--admin-line);
  border-radius: 4px;
  background: var(--admin-surface);
  -webkit-overflow-scrolling: touch;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--admin-ink);
  min-width: 640px;
}
.admin-table th,
.admin-table td {
  padding: 8px 12px;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid var(--admin-line);
}
.admin-table th {
  background: var(--admin-surface-2);
  color: var(--admin-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--admin-line-strong);
  white-space: nowrap;
}
.admin-table tbody tr:hover {
  background: rgba(52, 83, 102, 0.03);
}
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table td .primary {
  font-weight: 600;
  color: var(--admin-ink);
}
.admin-table td .secondary {
  display: block;
  font-size: 12px;
  color: var(--admin-muted);
  margin-top: 1px;
}
.admin-table td .mono {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  color: var(--admin-muted);
}
.admin-table .col-actions {
  text-align: right;
  white-space: nowrap;
}
.admin-table .col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Status pills (small, neutral) */
.admin-status {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #e6e6e1;
  color: var(--admin-ink-soft);
  border: 1px solid var(--admin-line-strong);
  white-space: nowrap;
}
.admin-status-public { background: #dde9df; color: #2f6f4f; border-color: #b8d4be; }
.admin-status-private { background: #f0e0d8; color: #8a4a3e; border-color: #d8bba8; }
.admin-status-blocked { background: #ecd6cf; color: var(--admin-stop); border-color: #d8b2a5; }
.admin-status-external { background: #dfe6ec; color: #345366; border-color: #b9c8d4; }
.admin-status-warn { background: #f0e2c8; color: var(--admin-warn); border-color: #d6c397; }
.admin-status-ok { background: #dde9df; color: #2f6f4f; border-color: #b8d4be; }
.admin-status-disabled { background: #e6e6e1; color: var(--admin-muted); border-color: var(--admin-line-strong); }

/* Action buttons / links in tables */
.admin-action {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--admin-line-strong);
  border-radius: 3px;
  background: var(--admin-surface);
  color: var(--admin-ink);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.3;
  margin: 0 0 0 4px;
  font-family: inherit;
}
.admin-action:hover {
  background: var(--admin-surface-2);
  border-color: var(--admin-ink-soft);
  color: var(--admin-ink);
}
.admin-action-danger {
  color: var(--admin-stop);
  border-color: #d8b2a5;
}
.admin-action-danger:hover {
  background: #fdecea;
  border-color: var(--admin-stop);
  color: var(--admin-stop);
}
.admin-action-primary {
  background: var(--admin-accent);
  border-color: var(--admin-accent);
  color: #fff;
}
.admin-action-primary:hover {
  background: var(--admin-accent-hover);
  border-color: var(--admin-accent-hover);
  color: #fff;
}
.admin-action[disabled],
.admin-action.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.admin-row-actions { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.admin-row-actions form { display: inline; margin: 0; }

/* Forms inline */
.admin-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--admin-surface-2);
  border: 1px solid var(--admin-line);
  border-radius: 4px;
}
.admin-form-field { display: flex; flex-direction: column; min-width: 0; flex: 1 1 180px; }
.admin-form-field label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--admin-muted);
  margin-bottom: 3px;
}
.admin-form-field input,
.admin-form-field select,
.admin-form-field textarea {
  padding: 6px 9px;
  border: 1px solid var(--admin-line-strong);
  border-radius: 3px;
  background: var(--admin-surface);
  font-size: 13px;
  color: var(--admin-ink);
  font-family: inherit;
  min-height: 32px;
  width: 100%;
}
.admin-form-field input:focus,
.admin-form-field select:focus,
.admin-form-field textarea:focus {
  outline: none;
  border-color: var(--admin-accent);
  box-shadow: 0 0 0 2px rgba(52, 83, 102, 0.15);
}
.admin-form-actions {
  display: flex;
  gap: 6px;
  align-self: end;
}

/* Flash messages */
.admin-flash-list { margin: 0 0 12px; }
.admin-flash {
  margin: 0 0 6px;
  padding: 7px 12px;
  border-radius: 3px;
  font-size: 12.5px;
  border: 1px solid transparent;
}
.admin-flash-success { background: #dde9df; color: #2f6f4f; border-color: #b8d4be; }
.admin-flash-error { background: #fbe6e0; color: var(--admin-stop); border-color: #d8b2a5; }
.admin-flash-info { background: #dfe6ec; color: #345366; border-color: #b9c8d4; }

/* Empty state inside admin */
body.admin-management-shell .empty {
  margin: 0;
  padding: 14px 16px;
  color: var(--admin-muted);
  font-size: 13px;
  background: var(--admin-surface-2);
  border: 1px dashed var(--admin-line-strong);
  border-radius: 3px;
}

/* Slug chip used in tables */
.admin-table .slug-chip {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11.5px;
  background: var(--admin-surface-2);
  border: 1px solid var(--admin-line);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--admin-ink-soft);
}

/* Compact list (used in analytics admin scope) */
body.admin-management-shell .admin-page .list {
  border: 1px solid var(--admin-line);
  border-radius: 4px;
  background: var(--admin-surface);
}
body.admin-management-shell .admin-page .list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--admin-line);
  font-size: 13px;
}
body.admin-management-shell .admin-page .list-row:last-child { border-bottom: 0; }
body.admin-management-shell .admin-page .list-row .text { color: var(--admin-ink); }
body.admin-management-shell .admin-page .list-row .date {
  color: var(--admin-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Health status cards (compact) */
.admin-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.admin-health-card {
  padding: 12px 14px;
  background: var(--admin-surface);
  border: 1px solid var(--admin-line);
  border-radius: 4px;
}
.admin-health-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.admin-health-card-label {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--admin-ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-health-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--admin-soft);
  flex: 0 0 8px;
}
.admin-health-card-ok .admin-health-dot { background: #2f6f4f; }
.admin-health-card-warning .admin-health-dot { background: var(--admin-warn); }
.admin-health-card-problem .admin-health-dot { background: var(--admin-stop); }
.admin-health-card-status {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--admin-muted);
}
.admin-health-card-ok .admin-health-card-status { color: #2f6f4f; }
.admin-health-card-warning .admin-health-card-status { color: var(--admin-warn); }
.admin-health-card-problem .admin-health-card-status { color: var(--admin-stop); }
.admin-health-card p {
  margin: 0 0 3px;
  font-size: 13px;
  color: var(--admin-ink);
}
.admin-health-card .admin-health-card-detail {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--admin-muted);
}
.admin-health-card a {
  display: inline-block;
  margin-top: 4px;
  color: var(--admin-accent);
  font-size: 12px;
  text-decoration: none;
}
.admin-health-card a:hover { text-decoration: underline; }
.admin-health-card dl {
  margin: 6px 0 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 10px;
  font-size: 12px;
}
.admin-health-card dl dt { color: var(--admin-muted); text-transform: capitalize; }
.admin-health-card dl dd { margin: 0; color: var(--admin-ink); word-break: break-all; }

/* Health summary banner */
.admin-health-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--admin-surface-2);
  border: 1px solid var(--admin-line);
  border-radius: 4px;
  margin: 8px 0 4px;
}
.admin-health-summary-ok { border-left: 3px solid #2f6f4f; }
.admin-health-summary-warning { border-left: 3px solid var(--admin-warn); }
.admin-health-summary-problem { border-left: 3px solid var(--admin-stop); }
.admin-health-summary-text { flex: 1; }
.admin-health-summary-text .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--admin-muted);
}
.admin-health-summary-text .value {
  font-size: 16px;
  font-weight: 700;
  color: var(--admin-ink);
  margin-top: 2px;
}
.admin-health-summary-text .when {
  margin-top: 2px;
  font-size: 12px;
  color: var(--admin-muted);
}

/* Analytics admin page: keep KPI grid but compact */
body.admin-management-shell .analytics-kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
body.admin-management-shell .analytics-kpi {
  padding: 12px 14px;
}
body.admin-management-shell .analytics-kpi span {
  font-size: 10.5px;
}
body.admin-management-shell .analytics-kpi strong {
  font-size: 22px;
}

/* ---- Expandable row table ---- */
.admin-table .col-nowrap { white-space: nowrap; }
.admin-table .col-toggle {
  width: 36px;
  text-align: center;
  padding-left: 4px;
  padding-right: 8px;
}
.admin-table-expandable tbody .admin-row-summary { cursor: pointer; }
.admin-table-expandable tbody .admin-row-summary:hover { background: rgba(52, 83, 102, 0.05); }
.admin-table-expandable tbody .admin-row-summary.is-open {
  background: var(--admin-surface-2);
}
.admin-table-expandable tbody .admin-row-summary.is-open td { border-bottom-color: transparent; }
.admin-row-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--admin-line-strong);
  border-radius: 3px;
  background: var(--admin-surface);
  color: var(--admin-muted);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  line-height: 1;
  transition: transform 0.15s ease;
}
.admin-row-toggle:hover { color: var(--admin-ink); border-color: var(--admin-ink-soft); }
.admin-row-summary.is-open .admin-row-toggle { transform: rotate(180deg); }
.admin-table-expandable tbody .admin-row-detail > td {
  padding: 0 12px 14px;
  background: var(--admin-surface-2);
  border-bottom: 1px solid var(--admin-line-strong);
}
.admin-row-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 24px;
  padding: 12px 4px;
}
.admin-row-detail-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.admin-row-detail-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--admin-muted);
  margin-bottom: 2px;
}
.admin-row-detail-block .secondary { white-space: normal; }
.admin-row-detail-block .admin-row-actions { justify-content: flex-start; }

/* ---- Layout B: inner table + actions panel (admin_pages) ---- */
body.admin-management-shell .admin-row-summary .admin-row-toggle svg {
  width: 11px;
  height: 11px;
}
body.admin-management-shell .admin-table .col-page { max-width: 220px; }
body.admin-management-shell .admin-table .col-owner { max-width: 260px; }
body.admin-management-shell .admin-table .cell-truncate {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
body.admin-management-shell .admin-row-detail > td {
  background: #fbfaf6;
  padding: 14px 18px 18px;
}
body.admin-management-shell .vb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  gap: 18px;
  align-items: start;
}
body.admin-management-shell .admin-inner-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--admin-surface);
  border: 1px solid #e6e5dd;
  border-radius: 5px;
  overflow: hidden;
  font-size: 12.5px;
}
body.admin-management-shell .admin-inner-table th,
body.admin-management-shell .admin-inner-table td {
  padding: 7px 11px;
  text-align: left;
  border-bottom: 1px solid #e6e5dd;
  vertical-align: top;
  color: var(--admin-ink);
}
body.admin-management-shell .admin-inner-table tr:last-child th,
body.admin-management-shell .admin-inner-table tr:last-child td { border-bottom: 0; }
body.admin-management-shell .admin-inner-table th {
  background: #f0efe8;
  color: var(--admin-muted);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  width: 1%;
}
body.admin-management-shell .admin-inner-table .admin-age {
  color: var(--admin-muted);
  font-size: 11.5px;
  margin-left: 4px;
}
body.admin-management-shell .admin-inner-table .admin-url-wrap {
  display: inline-block;
  max-width: 100%;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: var(--admin-accent);
  text-decoration: none;
  border-bottom: 1px dashed var(--admin-line-strong);
  overflow-wrap: anywhere;
  word-break: break-all;
}
body.admin-management-shell .admin-inner-table .admin-url-wrap:hover {
  color: var(--admin-ink);
  border-color: var(--admin-ink-soft);
}
body.admin-management-shell .admin-inner-table .admin-email-wrap {
  overflow-wrap: anywhere;
  word-break: break-all;
}
body.admin-management-shell .vb-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-content: start;
  background: var(--admin-surface);
  border: 1px solid #e6e5dd;
  border-radius: 5px;
  padding: 11px;
  min-width: 220px;
}
body.admin-management-shell .vb-actions-label {
  grid-column: span 2;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--admin-muted);
  padding-bottom: 4px;
  margin-bottom: 2px;
  border-bottom: 1px solid #e6e5dd;
}
body.admin-management-shell .vb-actions .admin-action {
  justify-content: center;
  width: 100%;
  margin: 0;
}
body.admin-management-shell .vb-actions .vb-actions-span-2 { grid-column: span 2; }
body.admin-management-shell .vb-actions .admin-page-delete-form { display: block; }
body.admin-management-shell .vb-actions .admin-page-delete-form .admin-action { width: 100%; }
@media (max-width: 720px) {
  body.admin-management-shell .vb {
    grid-template-columns: minmax(0, 1fr);
  }
  body.admin-management-shell .vb-actions { min-width: 0; }
}

/* ---- Email template previews (admin_email_templates) ---- */
.admin-template-frame-wrap {
  border: 1px solid var(--admin-line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--admin-surface);
}
.admin-template-frame-head {
  padding: 7px 12px;
  border-bottom: 1px solid var(--admin-line);
  background: var(--admin-surface-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--admin-muted);
}
.admin-template-frame {
  display: block;
  width: 100%;
  height: 700px;
  border: 0;
  background: #f6f3ed;
}
.admin-template-plain {
  margin-top: 10px;
  border: 1px solid var(--admin-line);
  border-radius: 4px;
  background: var(--admin-surface);
}
.admin-template-plain summary {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--admin-ink-soft);
}
.admin-template-plain pre {
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--admin-line);
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--admin-muted);
}

/* Mobile admin nav */
@media (max-width: 720px) {
  .admin-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    margin-inline: -4px;
    padding-inline: 4px;
    scrollbar-width: thin;
  }
  .admin-nav-link { flex: 0 0 auto; }
  body.admin-management-shell .admin-page > .page-header h1 { font-size: 20px; }
}