/* ═══════════════════════════════════════════════════════════════════════
   EVER & ALWAYS — Milestone Anniversary Card · styles.css
   Heartfelt stationery: cream paper, blush envelope, wine + gold ink.

   House UX: natural scrolling. Sections are full-viewport "scenes" stacked
   in normal document flow — no app shell, no wheel/touch hijacking. A fixed
   header (desktop section pills · mobile burger sheet), a floating dock and
   a scroll-spy are added by main.js; all of that chrome is sized from the
   --header-h / --dock-h tokens so nothing ever drifts.
   ─────────────────────────────────────────────────────────────────────────
   Conventions:
     · Geometry flows from tokens: --header-h locks the header height, the
       cover cap and every anchor offset derive from it.
     · Without JS the document reads as a plain stacked page; the dock,
       burger, pills and progress bar simply don't appear.
     · prefers-reduced-motion and @media print are supported. Print restores
       everything the empty-state audit visually hid (.is-empty).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
  --paper: #faf6ee;
  --paper-deep: #f3ebda;
  --card: #fffdf7;
  --ink: #4a3440;
  --muted: #8a6f7c;
  --wine: #6b3f52;
  --rose: #d98d96;
  --blush: #eec4c8;
  --blush-deep: #e2aab1;
  --gold: #b98f4a;
  --gold-soft: rgba(185, 143, 74, 0.42);
  --gold-line: rgba(185, 143, 74, 0.4);
  --hairline: rgba(107, 63, 82, 0.16);
  --danger: #b23a48;

  /* Geometry tokens — the header height is LOCKED here and enforced on the
     real header below; the cover cap and anchor offsets derive from it. */
  --header-h: calc(54px + env(safe-area-inset-top, 0px));
  --dock-h: 58px;

  /* Cover sizing unit: fluid with the viewport's smaller edge but FROZEN
     once that edge passes ~650px, so mid-size phones and desktops stop
     scaling and never lose cover content. */
  --su: min(1vmin, 6.5px);

  --font-display: 'Butler', Georgia, 'Times New Roman', serif;
  --font-script: 'Astagina', 'Snell Roundhand', 'Segoe Script', 'Brush Script MT', cursive;
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --radius: 14px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

/* Shared platform fonts (serve when hosted in template/creative/shared/;
   every stack below has a full system fallback, so nothing breaks if these
   are absent in a standalone copy). */
@font-face {
  font-family: 'Astagina';
  src: url('../../../../shared/fonts/AstaginaSignature.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Butler';
  src: url('../../../../shared/fonts/Butler_Black.otf') format('opentype');
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'Butler';
  src: url('../../../../shared/fonts/Butler_Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../../../shared/fonts/montserrat-latin/montserrat-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../../../../shared/fonts/montserrat-latin/montserrat-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* ── Base / reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth; /* anchor jumps glide; reduced-motion turns it off */
  /* Anchor/deep-link jumps land their target just below the fixed header. */
  scroll-padding-top: calc(var(--header-h) + 10px);
}
body {
  margin: 0;
  padding-top: var(--header-h); /* clear the fixed header */
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(238, 196, 200, 0.35), transparent 60%),
    var(--paper);
  overflow-x: hidden;
}
img, svg { max-width: 100%; vertical-align: middle; }
button { font: inherit; }
[hidden] { display: none !important; } /* keep the hidden attr reliable next to display-* utilities */

/* Empty-state audit utility: visually hidden only — kept in the DOM and
   restored in print (see the @media print block at the end). */
.is-empty { display: none !important; }

/* Cover-fit trim utility: decorations hidden by initCoverFit() so the
   invite card always fits one screen. Nothing is removed from the DOM;
   print restores every trimmed layer. */
.fit-hidden { display: none !important; }

/* Last-resort squeeze when even the trimmed cover spills a few pixels:
   shave breathing room instead of letting content clip. */
.cover-squeeze .stage { padding-top: 10px; padding-bottom: 10px; }
.cover-squeeze .invite-card { padding-top: clamp(18px, calc(var(--su) * 4), 36px); padding-bottom: clamp(14px, calc(var(--su) * 3), 30px); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}
:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }
::selection { background: rgba(217, 141, 150, 0.35); }

.skip-link {
  position: fixed;
  top: calc(-60px + var(--safe-t));
  left: 12px;
  z-index: 300;
  padding: 10px 16px;
  background: var(--wine);
  color: var(--paper);
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: var(--safe-t); }

/* Custom scrollbars wherever a region may internally scroll — on-palette:
   a slim wine-on-cream bar. (Firefox uses the scrollbar-color shorthand.) */
.mobile-menu__scroller, .panel-cover {
  scrollbar-width: thin;
  scrollbar-color: var(--blush-deep) transparent;
}
.mobile-menu__scroller::-webkit-scrollbar, .panel-cover::-webkit-scrollbar { width: 8px; }
.mobile-menu__scroller::-webkit-scrollbar-track, .panel-cover::-webkit-scrollbar-track { background: transparent; }
.mobile-menu__scroller::-webkit-scrollbar-thumb, .panel-cover::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--blush-deep), var(--gold-soft));
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* ═════════════════════════════════════════════════════════════════════════
   SCENES — every section is its own full-viewport "scene" in normal flow.
   Tall content simply grows; the whole page scrolls natively.
   ═════════════════════════════════════════════════════════════════════════ */
.panel {
  position: relative;
  /* Every section is a full-viewport "scene": taller ones simply grow;
     shorter ones breathe across the whole viewport, and late sections can
     always scroll far enough to land exactly below the header. */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  display: flex;
  flex-direction: column;
  padding: clamp(24px, calc(var(--su) * 5), 48px) 18px clamp(40px, calc(var(--su) * 6), 64px);
  /* Anchor/deep-link offsets come ONLY from html's scroll-padding-top
     (derived from --header-h); no scroll-margin here, or the two would add
     up and overshoot the header. */
}
.panel-inner { max-width: 720px; margin: auto; /* vertical centre when slack */ }

/* COVER = exactly one screen. Capped below the header, vertically centred,
   fully visible at load. Internal scroll is a last-resort valve only.
   (The generic .panel min-height above equals this cap; the explicit cap
   here keeps the contract readable.) */
.panel-cover {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  padding-top: 0; padding-bottom: 0;
  overflow-y: auto;   /* safety valve for extreme viewports / huge type */
  overflow-x: hidden;
}
.stage {
  position: relative;
  width: 100%;
  margin: auto; /* keeps the composition centred when the valve scrolls */
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(20px, calc(var(--su) * 6), 64px) clamp(14px, calc(var(--su) * 3), 36px);
  isolation: isolate;
}

/* Continue cue pinned to the bottom of the one-screen cover */
.scroll-cue {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  margin-bottom: clamp(6px, calc(var(--su) * 1.6), 14px);
  border: 1px solid var(--gold-soft);
  border-radius: 50%;
  color: var(--wine);
  background: rgba(255, 253, 247, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: cue-bob 2.8s ease-in-out infinite;
}
.scroll-cue svg { width: 20px; height: 20px; }
.scroll-cue:hover { background: var(--wine); color: var(--paper); }
@keyframes cue-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* ── Fixed header ──────────────────────────────────────────────────────── */
.app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--header-h);            /* LOCKED to the token … */
  padding: var(--safe-t) clamp(14px, 3vw, 28px) 0; /* … safe area included in it */
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.app-header.is-scrolled {
  background: rgba(250, 246, 238, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--hairline);
  box-shadow: 0 12px 30px -22px rgba(74, 52, 64, 0.55);
}
.head-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.head-monogram {
  font-family: var(--font-script);
  font-size: 22px;
  line-height: var(--header-h); /* vertically centres within the locked bar */
  color: var(--wine);
}
.head-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Desktop section pills — built by main.js from the live DOM */
.topnav { display: none; }

.head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.head-btn {
  display: none;
  align-items: center; gap: 6px;
  border: 1px solid var(--gold-soft); border-radius: 999px;
  background: transparent; color: var(--wine);
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  padding: 6px 12px; cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
html.js .head-btn { display: inline-flex; }
.head-btn svg { width: 15px; height: 15px; }
.head-btn:hover { background: var(--wine); color: var(--paper); }

/* Burger — mobile JS chrome only (hidden without JS, hidden on desktop) */
.nav-burger {
  display: none;
}
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  width: 40px; height: 38px;
  padding: 9px 10px;
  border: 1px solid var(--gold-soft);
  border-radius: 10px;
  background: rgba(255, 253, 247, 0.7);
  color: var(--wine);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.burger-bar {
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
html.js .nav-burger { display: inline-flex; }
.nav-burger[aria-expanded="true"] .burger-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .burger-bar:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .burger-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Scroll progress — a whisper-thin gold line filling along the header's
   bottom edge as guests read. JS chrome: never shown without JS. */
.scroll-progress {
  display: none;
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--gold), var(--rose) 70%, var(--blush-deep));
  pointer-events: none;
}
html.js .scroll-progress { display: block; }

/* Desktop nav pills (≥820px): labelled buttons, active follows the spy */
@media (min-width: 820px) {
  .topnav {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .topnav::-webkit-scrollbar { display: none; }
  .nav-burger, html.js .nav-burger { display: none; }
}
.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 700 11px/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.nav-pill svg { width: 14px; height: 14px; flex: none; }
.nav-pill:hover { color: var(--wine); background: rgba(238, 196, 200, 0.28); }
.nav-pill.is-active {
  background: linear-gradient(135deg, #7d4a60, var(--wine));
  color: var(--paper);
}
.nav-pill:focus-visible { outline-offset: 2px; }

/* ── Mobile menu: slide-down sheet over a dimmed backdrop (<820px) ─────── */
.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(56, 37, 47, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s var(--ease);
}
.menu-backdrop.is-open { opacity: 1; pointer-events: auto; }

.mobile-menu {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  z-index: 96;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 30px 50px -28px rgba(74, 52, 64, 0.55);
  transform: translateY(-12px);
  opacity: 0;
  transition: transform 0.28s var(--ease), opacity 0.28s var(--ease);
}
.mobile-menu.is-open { transform: translateY(0); opacity: 1; }
.mobile-menu__scroller {
  max-height: min(62vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px clamp(14px, 4vw, 24px) calc(12px + var(--safe-b));
}
.mobile-menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.menu-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font: 600 14px/1.2 var(--font-sans);
  letter-spacing: 0.04em;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.menu-row svg { width: 17px; height: 17px; flex: none; color: var(--gold); }
.menu-row .menu-num {
  margin-left: auto;
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--muted);
}
.menu-row:hover { background: rgba(238, 196, 200, 0.22); border-color: var(--hairline); }
.menu-row.is-current {
  background: linear-gradient(135deg, #7d4a60, var(--wine));
  color: var(--paper);
}
.menu-row.is-current svg { color: var(--blush); }
.menu-row.is-current .menu-num { color: rgba(250, 246, 238, 0.75); }

/* ── Cover: envelope + card composition ────────────────────────────────── */
.envelope {
  position: absolute; z-index: -1;
  top: 50%; left: 50%;
  width: min(100%, 620px);
  height: min(94%, 760px);
  transform: translate(-50%, -50%) rotate(-5deg);
  border-radius: 10px;
  background: linear-gradient(165deg, #f6dde0 0%, var(--blush) 48%, var(--blush-deep) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(107, 63, 82, 0.14),
    0 34px 64px -34px rgba(74, 52, 64, 0.45);
}
.env-flap {
  position: absolute; inset: 0 0 auto 0;
  height: 46%;
  background: linear-gradient(200deg, #fbe9ec 0%, var(--blush) 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.env-pocket-line {
  position: absolute; left: 0; right: 0; bottom: 0; top: 46%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(107, 63, 82, 0.1) 100%);
  border-top: 1px solid rgba(107, 63, 82, 0.16);
}
.env-seal {
  position: absolute; left: 50%; bottom: 7%;
  transform: translateX(-50%);
  width: clamp(56px, calc(var(--su) * 12), 76px); height: clamp(56px, calc(var(--su) * 12), 76px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 28%, #d9b877, var(--gold) 55%, #966f33);
  color: var(--paper);
  box-shadow: 0 10px 22px -10px rgba(74, 52, 64, 0.55);
}
.env-seal-mono {
  font-family: var(--font-script);
  font-size: clamp(20px, calc(var(--su) * 4.6), 28px);
  line-height: 1;
}

/* ── Cover: optional soft photo backdrop behind the envelope ───────────── */
.stage-photo {
  position: absolute; inset: 0;
  z-index: -2;
  overflow: hidden;
}
.stage-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.9;
  filter: saturate(0.75);
}
.stage-photo::after {
  content: "";
  position: absolute; inset: 0;
  /* Click-through so a guest tapping the backdrop opens the viewer
     (the img below it carries data-lightbox). Visual only. */
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(250, 246, 238, 0.88) 0%, rgba(250, 246, 238, 0.6) 45%, rgba(238, 196, 200, 0.55) 100%);
}

/* ── Cover: optional couple photo inside the card ──────────────────────── */
.card-photo {
  width: min(78%, 400px);
  margin: 0 auto calc(var(--su) * 2.6);
  padding: 5px;
  background: var(--card);
  border: 1px solid var(--gold-soft);
  border-radius: 3px;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.6),
    0 0 0 5px var(--gold-soft),
    0 16px 30px -20px rgba(74, 52, 64, 0.45);
}
.card-photo img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 2px;
  background: var(--paper-deep); /* soft tone while loading / if the file is missing */
}

.invite-card {
  position: relative; z-index: 1;
  width: min(92%, 520px);
  margin: auto; /* centres; the cover's safety valve scrolls it if ever needed */
  padding: clamp(30px, calc(var(--su) * 7), 60px) clamp(20px, calc(var(--su) * 4.6), 46px) clamp(26px, calc(var(--su) * 6), 52px);
  text-align: center;
  background: linear-gradient(180deg, #fffdf8 0%, var(--card) 60%, #fdf8ec 100%);
  border-radius: 7px;
  box-shadow:
    0 0 0 1px var(--gold-soft),
    0 0 0 7px rgba(255, 255, 255, 0.55),
    0 0 0 8px var(--gold-soft),
    0 30px 60px -32px rgba(74, 52, 64, 0.5);
  transform: rotate(1.2deg);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
@media (hover: hover) {
  .invite-card:hover {
    transform: rotate(0deg) translateY(-4px);
    box-shadow:
      0 0 0 1px var(--gold-soft),
      0 0 0 7px rgba(255, 255, 255, 0.55),
      0 0 0 8px var(--gold-soft),
      0 36px 64px -30px rgba(74, 52, 64, 0.55);
  }
}

.flourish {
  width: min(200px, 70%);
  height: auto;
  color: var(--gold);
  margin-bottom: calc(var(--su) * 3);
}
.flourish-bottom { margin: calc(var(--su) * 3.4) 0 0; transform: rotate(180deg); }

.card-eyebrow {
  margin: 0;
  font-size: clamp(9px, calc(var(--su) * 2.1), 11px);
  font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold);
}

.card-headline-wrap {
  height: clamp(56px, calc(var(--su) * 14), 104px);
  display: flex; align-items: center; justify-content: center;
  margin-top: calc(var(--su) * 1.6);
}
.card-headline {
  margin: 0;
  font-size: clamp(40px, calc(var(--su) * 11), 72px);
  line-height: 1.05;
  font-weight: 400;
  color: var(--wine);
  white-space: nowrap;
}
.card-headline:focus { outline: none; }

.card-rule {
  width: min(180px, 64%);
  height: 1px;
  margin: calc(var(--su) * 2.6) auto;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}

.card-sub {
  margin: 0 auto;
  max-width: 26em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(14px, calc(var(--su) * 3.4), 18px);
  line-height: 1.5;
  color: var(--ink);
}
.card-year {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 1.22em;
  color: var(--gold);
  white-space: nowrap;
}

.card-names {
  margin: calc(var(--su) * 3.4) 0 0;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(24px, calc(var(--su) * 6.4), 38px);
  line-height: 1.15;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.card-names .amp {
  font-family: var(--font-script); font-weight: 400;
  color: var(--rose);
  font-size: 0.92em;
  padding: 0 0.08em;
}

.card-tag {
  margin: calc(var(--su) * 2.8) auto 0;
  max-width: 26em;
  font-size: clamp(11.5px, calc(var(--su) * 2.7), 13.5px);
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
  line-height: 1.6;
}
.card-tag .time-line { white-space: nowrap; }
.card-venue {
  margin: 4px 0 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(13px, calc(var(--su) * 3), 15.5px);
  color: var(--wine);
  overflow-wrap: anywhere;
}

/* ── Shared panel typography ───────────────────────────────────────────── */
.panel-inner { padding: clamp(20px, calc(var(--su) * 5), 52px) clamp(18px, 4vw, 32px) clamp(28px, calc(var(--su) * 5.5), 56px); }
.panel-head { text-align: center; margin-bottom: clamp(20px, calc(var(--su) * 4), 34px); }
.eyebrow {
  margin: 0 0 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--gold);
}
.panel-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(30px, calc(var(--su) * 7.4), 46px);
  line-height: 1.1;
  color: var(--wine);
}
.panel-title:focus { outline: none; }
.rule {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: clamp(14px, calc(var(--su) * 3), 22px) auto;
  color: var(--gold); font-size: 13px;
}
.rule::before, .rule::after {
  content: "";
  height: 1px; width: min(120px, 22vw);
  background: linear-gradient(90deg, transparent, var(--gold-soft));
}
.rule::after { background: linear-gradient(90deg, var(--gold-soft), transparent); }
.lede {
  margin: 0 auto; max-width: 34em;
  font-size: clamp(14px, 2.6vw, 16.5px);
  line-height: 1.75;
  color: var(--muted);
}

/* ── Details: stationery info list ─────────────────────────────────────── */
.info-list {
  margin: 0; padding: 0;
  border-top: 1px solid var(--hairline);
}
.info-row {
  padding: clamp(14px, calc(var(--su) * 3), 20px) 2px;
  border-bottom: 1px solid var(--hairline);
}
.info-row dt {
  margin-bottom: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold);
}
.info-row dd {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(15px, 2.7vw, 18px);
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* ── Details: Add to Calendar (.ics export lives in main.js) ───────────── */
.calendar-cta {
  margin: clamp(18px, calc(var(--su) * 3.4), 26px) auto 0;
  text-align: center;
}
.cal-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px;
  font: 700 12px/1 var(--font-sans);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wine);
  background: rgba(255, 253, 247, 0.85);
  border: 1px solid var(--gold);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(185, 143, 74, 0.65);
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.cal-btn svg { width: 16px; height: 16px; }
.cal-btn:hover {
  background: var(--wine); color: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(107, 63, 82, 0.7);
}
.cal-btn:disabled { filter: grayscale(0.6) brightness(0.9); cursor: default; transform: none; }
.cal-hint {
  margin: 8px 0 0;
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--muted);
}

/* ── Details: RSVP countdown (revealed by JS only when a deadline exists) ─ */
.rsvp-countdown {
  margin: clamp(22px, calc(var(--su) * 4), 32px) auto 0;
  text-align: center;
}
.countdown-label {
  margin: 0 0 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold);
}
.countdown-blocks { display: flex; justify-content: center; gap: clamp(8px, 2vw, 14px); }
.count-block {
  min-width: clamp(56px, 14vw, 76px);
  padding: 10px 6px;
  border: 1px solid var(--gold-soft); border-radius: 10px;
  background: var(--card);
}
.count-block div {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(20px, 4.6vw, 28px);
  color: var(--wine); line-height: 1.1;
}
.count-block span {
  display: block; margin-top: 2px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
}

/* ── Details: note card ────────────────────────────────────────────────── */
.note-card {
  margin: clamp(20px, calc(var(--su) * 4), 30px) auto 0;
  max-width: 30em;
  padding: clamp(16px, calc(var(--su) * 3.4), 24px);
  text-align: center;
  border: 1px dashed var(--gold-soft);
  border-radius: var(--radius);
  background: rgba(238, 196, 200, 0.22);
}
.note-label {
  margin: 0 0 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--rose);
}
.note-text { margin: 0; font-size: clamp(13.5px, 2.5vw, 15.5px); line-height: 1.7; color: var(--muted); }

/* ── Details: "Our story in pictures" gallery ──────────────────────────── */
.story-gallery {
  margin-top: clamp(28px, calc(var(--su) * 5.5), 44px);
  text-align: center;
}
.gallery-label {
  margin: 0;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--rose);
}
.gallery-label::before, .gallery-label::after {
  content: "✦";
  color: var(--gold);
  font-size: 11px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 3vw, 28px);
  margin-top: clamp(18px, 3vw, 26px);
}
.gallery-item { margin: 0; }
.gallery-item img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  padding: 5px;
  background: var(--card);
  border: 1px solid var(--gold-soft);
  border-radius: 4px;
  box-shadow: 0 12px 26px -20px rgba(74, 52, 64, 0.45);
}
.gallery-item figcaption {
  margin-top: 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(12.5px, 2.4vw, 14.5px);
  color: var(--wine);
}

/* ── Details: official flyer / banner (optional) ──────────────────────────
   A wide framed image slot for hosts who already have a designed flyer or
   poster for the event. Clicking it opens the zoomable viewer. */
.banner-flyer {
  margin: clamp(26px, calc(var(--su) * 5), 40px) auto 0;
  max-width: 660px;
  text-align: center;
}
.banner-flyer img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 8 / 3;
  object-fit: cover;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--gold-soft);
  border-radius: 6px;
  box-shadow: 0 14px 30px -22px rgba(74, 52, 64, 0.5);
}
.banner-flyer figcaption {
  margin-top: 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(12.5px, 2.4vw, 14.5px);
  color: var(--wine);
}

/* ── Details: optional film feature (video URL) ───────────────────────────
   A poster + play button. Tapping play opens the video full-size in the
   zoomable lightbox (main.js) — an embed for YouTube/Vimeo links, a native
   player for direct files like the shipped placeholder.mp4. Nothing loads
   until the guest taps. With MEDIA_LIGHTBOX = false the video plays inline
   in the frame instead. */
.film-card {
  margin-top: clamp(28px, calc(var(--su) * 5.5), 44px);
  text-align: center;
}
/* No video URL configured — the feature is hidden entirely (set by main.js). */
.film-card.is-hidden { display: none; }
.film-frame {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: clamp(16px, 3vw, 24px) auto 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  background: var(--paper-deep); /* mat behind the poster / while loading */
  border: 1px solid var(--gold-soft);
  box-shadow: 0 16px 34px -24px rgba(74, 52, 64, 0.5);
}
.film-open {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 0; border: 0; background: none;
  cursor: pointer;
}
.film-open img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.film-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(56px, 12vw, 72px); height: clamp(56px, 12vw, 72px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--wine);
  background: radial-gradient(circle at 32% 28%, #fdf3ea, var(--card) 60%, #f3e3c0);
  border: 1px solid var(--gold-soft);
  box-shadow: 0 12px 28px -12px rgba(74, 52, 64, 0.65);
  animation: film-pulse 2.6s ease-in-out infinite;
  transition: transform 0.25s var(--ease);
}
.film-play svg { width: 26px; height: 26px; margin-left: 3px; }
.film-open:hover .film-play { transform: translate(-50%, -50%) scale(1.08); }
.film-open:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.film-hint {
  position: absolute; left: 50%; bottom: 14px;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(74, 52, 64, 0.62);
  color: #fdf3ea;
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  pointer-events: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.film-frame iframe,
.film-frame video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  background: #241a20;
}
.film-note {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 20px;
  font-size: 13.5px; font-style: italic;
  color: var(--muted);
}
.film-external {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--wine);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-soft);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.film-external:hover { color: var(--gold); border-color: var(--gold); }
.film-external[hidden] { display: none; }
@keyframes film-pulse {
  0%, 100% { box-shadow: 0 12px 28px -12px rgba(74, 52, 64, 0.65), 0 0 0 0 rgba(185, 143, 74, 0.35); }
  50% { box-shadow: 0 12px 28px -12px rgba(74, 52, 64, 0.65), 0 0 0 14px rgba(185, 143, 74, 0); }
}

/* ── Brand footer + powered-by (end of the document, plain flow) ───────── */
.app-footer {
  padding: clamp(24px, calc(var(--su) * 5), 44px) 18px 0;
  text-align: center;
}
.footer-brand {
  margin: 0;
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
}
.footer-brand-name {
  font-family: var(--font-script);
  font-size: 1.3em;
  text-transform: none; letter-spacing: 0.02em;
  color: var(--wine);
}
.powered-by {
  width: 100%;
  text-align: center;
  padding: 16px 16px calc(20px + var(--safe-b));
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
}
.powered-by .link-footer { color: var(--wine); }
/* Reserve room for the floating dock, so end-of-page content is never
   covered by fixed chrome (§nothing-cut-off). */
body.has-dock .powered-by { padding-bottom: calc(var(--dock-h) + 48px + var(--safe-b)); }

/* ── Free page (optional "In Our Words", host-filled; repeatable) ──────── */
.free-blocks {
  display: grid;
  gap: clamp(30px, 5vw, 48px);
}
.free-block { margin: 0; text-align: center; }
.free-title {
  margin: 0 0 clamp(12px, 2.4vw, 18px);
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(24px, 5vw, 36px);
  line-height: 1.15;
  color: var(--wine);
  overflow-wrap: anywhere;
}
.free-title:focus { outline: none; }
.free-media {
  margin: 0 auto clamp(14px, 2.6vw, 20px);
  max-width: 560px;
}
.free-media img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  padding: 5px;
  background: var(--card);
  border: 1px solid var(--gold-soft);
  border-radius: 4px;
  box-shadow: 0 12px 26px -20px rgba(74, 52, 64, 0.45);
}
.free-content {
  margin: 0 auto;
  max-width: 30em;
  text-align: left;
  font-size: clamp(14px, 2.6vw, 16.5px);
  line-height: 1.75;
  color: var(--muted);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* ═════════════════════════════════════════════════════════════════════════
   DOCK — floating stationery pill with icon shortcuts; built by main.js
   from the sections that exist, so deleted sections lose their entry.
   Horizontally scrollable (hidden scrollbar) if there are many pages.
   ═════════════════════════════════════════════════════════════════════════ */
.dock {
  position: fixed;
  left: 50%;
  bottom: calc(12px + var(--safe-b));
  transform: translateX(-50%);
  z-index: 85;
  display: flex;
  align-items: stretch;
  gap: 2px;
  max-width: calc(100vw - 20px);
  padding: 6px 8px;
  background: rgba(250, 246, 238, 0.92);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow:
    0 22px 44px -22px rgba(74, 52, 64, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.dock::-webkit-scrollbar { display: none; }
body:not(.has-dock) .dock { display: none; }
.dock button {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 52px;
  height: 46px;
  padding: 5px 7px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.22s var(--ease), background-color 0.22s var(--ease), transform 0.22s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.dock button svg { width: 19px; height: 19px; flex: none; }
.dock button:hover { color: var(--wine); background: rgba(238, 196, 200, 0.3); }
.dock button:active { transform: scale(0.94); }
.dock button.is-current {
  color: var(--paper);
  background: linear-gradient(135deg, #7d4a60, var(--wine));
}
.dock__label {
  font-family: var(--font-sans);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ═════════════════════════════════════════════════════════════════════════
   TOAST — quiet confirmations (Add to Calendar, …)
   ═════════════════════════════════════════════════════════════════════════ */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(84px + var(--safe-b));
  transform: translateX(-50%) translateY(14px);
  z-index: 150;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--wine);
  color: var(--paper);
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  max-width: calc(100vw - 32px);
  text-align: center;
}
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═════════════════════════════════════════════════════════════════════════
   LIGHTBOX — click-to-open originals with zoom & pan.
   Every content photo AND the film open here: images zoom (wheel, pinch,
   double-tap, ± buttons) and pan while zoomed; videos play as an embed with
   an "open original" link. Closes via Escape / backdrop / ×.
   Markup is built by main.js only when clickable media exists.
   ═════════════════════════════════════════════════════════════════════════ */

/* Click affordances — only when the lightbox feature is ON. html.lb-off
   (MEDIA_LIGHTBOX = false) removes every trace: media renders inline only. */
html.js:not(.lb-off) .card-photo img,
html.js:not(.lb-off) .gallery-item img,
html.js:not(.lb-off) .banner-flyer img,
html.js:not(.lb-off) .free-media img,
html.js:not(.lb-off) .stage-photo img { cursor: zoom-in; }

html.js:not(.lb-off) .card-photo,
html.js:not(.lb-off) .gallery-item,
html.js:not(.lb-off) .banner-flyer,
html.js:not(.lb-off) .free-media { position: relative; }
html.js:not(.lb-off) .card-photo::after,
html.js:not(.lb-off) .gallery-item::after,
html.js:not(.lb-off) .banner-flyer::after,
html.js:not(.lb-off) .free-media::after {
  content: "";
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255, 253, 247, 0.94)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b3f52' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3Cpath d='M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E")
    center / 16px no-repeat;
  border: 1px solid var(--gold-soft);
  box-shadow: 0 4px 12px -4px rgba(74, 52, 64, 0.45);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  pointer-events: none;
}
html.js:not(.lb-off) .card-photo:hover::after,
html.js:not(.lb-off) .card-photo:focus-within::after,
html.js:not(.lb-off) .gallery-item:hover::after,
html.js:not(.lb-off) .gallery-item:focus-within::after,
html.js:not(.lb-off) .banner-flyer:hover::after,
html.js:not(.lb-off) .banner-flyer:focus-within::after,
html.js:not(.lb-off) .free-media:hover::after,
html.js:not(.lb-off) .free-media:focus-within::after {
  opacity: 1;
  transform: none;
}

.lightbox {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex;
  align-items: center; justify-content: center;
  padding: calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b));
  background: rgba(56, 37, 47, 0.93);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.lightbox[hidden] { display: none; }
body.lb-open { overflow: hidden; } /* lock the document behind the open lightbox */

.lightbox-stage {
  position: relative;
  width: 100%;
  max-width: 960px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: lb-zoom-in 0.28s var(--ease);
}
@keyframes lb-zoom-in {
  from { transform: scale(0.94); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.lightbox-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  touch-action: none;
  overflow: hidden;
  border-radius: 10px;
}
.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 72vh; max-height: 72dvh;
  width: auto; height: auto;
  border: 6px solid var(--card);
  border-radius: 8px;
  background: var(--paper-deep); /* mat while loading / if the file is missing */
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.75);
  cursor: zoom-in;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
  transition: transform 0.18s var(--ease);
}
.lightbox-frame.is-zoomed .lightbox-img { cursor: grab; }
.lightbox-frame.is-zoomed .lightbox-img:active { cursor: grabbing; }
.lightbox-frame.is-panning .lightbox-img { transition: none; }
.lightbox-video {
  width: min(880px, 92vw);
  aspect-ratio: 16 / 9;
  max-height: 72vh; max-height: 72dvh;
}
.lightbox-video iframe,
.lightbox-video video {
  width: 100%; height: 100%;
  border: 0;
  border-radius: 10px;
  background: #000;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85);
}
.lightbox-caption {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; letter-spacing: 0.03em;
  color: #f7ead9;
  text-align: center;
  overflow-wrap: anywhere;
}
.lightbox-counter {
  margin: 0;
  font-size: 10px; font-weight: 700; letter-spacing: 0.26em;
  color: rgba(247, 234, 217, 0.6);
}
.lightbox-unavailable {
  display: flex; align-items: center; justify-content: center;
  width: min(72vw, 520px); height: min(46vh, 360px);
  border: 6px solid var(--card); border-radius: 8px;
  background: var(--paper-deep);
  color: var(--muted);
  font-size: 14px; font-style: italic;
  text-align: center;
  padding: 16px;
}

.lb-btn {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(247, 234, 217, 0.5);
  background: rgba(255, 253, 247, 0.94);
  color: var(--wine);
  cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
.lb-btn svg { width: 20px; height: 20px; }
.lb-btn:hover { transform: scale(1.06); background: #fff; }
.lb-close { top: calc(12px + var(--safe-t)); right: calc(12px + var(--safe-r)); font-size: 24px; line-height: 1; }
.lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 10px; top: 50%; transform: translateY(-50%); }
.lb-prev:hover, .lb-next:hover { transform: translateY(-50%) scale(1.06); }

/* Zoom tools + "open original" link (images) */
.lightbox-tools {
  position: absolute;
  left: calc(12px + var(--safe-l));
  bottom: calc(12px + var(--safe-b));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lightbox-tools[hidden] { display: none; }
.lb-tool {
  min-width: 42px; height: 42px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(247, 234, 217, 0.5);
  background: rgba(255, 253, 247, 0.94);
  color: var(--wine);
  font: 700 12px/1 var(--font-sans);
  letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
.lb-tool svg { width: 17px; height: 17px; }
.lb-tool:hover { transform: scale(1.05); background: #fff; }
.lb-tool[disabled] { opacity: 0.4; cursor: default; }
.lb-original {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(247, 234, 217, 0.5);
  background: rgba(255, 253, 247, 0.94);
  color: var(--wine);
  font: 700 11px/1 var(--font-sans);
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
}
.lb-original:hover { background: #fff; }
.lightbox-original-row {
  position: absolute;
  right: calc(12px + var(--safe-r));
  bottom: calc(12px + var(--safe-b));
  z-index: 3;
}
.lightbox-original-row[hidden] { display: none; }

.lightbox :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Narrow screens: prev/next drop below the photo so they never cover it. */
@media (max-width: 520px) {
  .lightbox { padding-left: 10px; padding-right: 10px; }
  .lightbox-img { max-height: 60vh; max-height: 60dvh; }
  .lightbox-video { width: 94vw; max-height: 60vh; max-height: 60dvh; }
  .lb-prev, .lb-next { position: static; transform: none; width: 42px; height: 42px; }
  .lb-prev:hover, .lb-next:hover { transform: scale(1.06); }
  .lightbox-stage { gap: 10px; justify-content: center; }
  .lightbox-tools { left: 8px; bottom: calc(8px + var(--safe-b)); }
  .lightbox-tools .lb-tool span.pct { display: none; }
  .lightbox-original-row { right: 8px; bottom: calc(8px + var(--safe-b)); }
}

/* ── Forms (RSVP + injected guestbook share .form-control) ─────────────── */
form, .form-group { margin: 0; }
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--wine);
}
.form-control {
  width: 100%;
  padding: 11px 14px;
  font: 500 15px/1.4 var(--font-sans);
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--gold-soft);
  border-radius: 10px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
  appearance: none;
  -webkit-appearance: none;
}
.form-control::placeholder { color: rgba(74, 52, 64, 0.35); }
.form-control:focus {
  outline: none;
  border-color: var(--wine);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(107, 63, 82, 0.12);
}
textarea.form-control { resize: vertical; min-height: 64px; }
select.form-control {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b3f52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}

.error {
  display: block;
  min-height: 1.1em;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--danger);
}

/* Attending = "No": gently dim the guest count (visual UX only — the
   platform still owns validation + submission). */
.form-group.is-dimmed {
  opacity: 0.45;
  filter: grayscale(0.5);
  transition: opacity 0.25s var(--ease), filter 0.25s var(--ease);
}

#submit-button {
  display: block; width: 100%;
  margin-top: 6px;
  padding: 14px 22px;
  font: 700 14px/1 var(--font-sans);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper);
  background: linear-gradient(135deg, #7d4a60 0%, var(--wine) 55%, #59324a 100%);
  border: 0; border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 26px -14px rgba(107, 63, 82, 0.7);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s var(--ease);
}
#submit-button:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(107, 63, 82, 0.75); }
#submit-button:disabled { filter: grayscale(0.6) brightness(0.85); cursor: default; transform: none; }
.loading {
  text-align: center;
  margin-top: 12px;
  font-size: 13px; letter-spacing: 0.08em;
  color: var(--wine);
}
.rsvp-hint {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12px; line-height: 1.55;
  color: var(--muted);
}

/* ── Guestbook: injected platform markup (style via its own selectors) ─── */
#guestbookForm { margin-bottom: 8px; }
.guestbook-body { padding-bottom: 4px; }
#guestbookForm .form-group { margin-bottom: 14px; }
#guestbookForm .form-control { margin-bottom: 0; }
.guestbook-chapta { margin: 4px 0 12px; }
.guestbook-chapta > div { margin-inline: auto; }

#comments-container.guestbook-wrap {
  margin-top: 26px;
  border-top: 1px solid var(--hairline);
  padding-top: 8px;
}
.guestbook-entry {
  padding: 16px 2px;
  border-bottom: 1px solid var(--hairline);
}
.guestbook-entry:last-child { border-bottom: 0; }
.guestbook-entry h5 {
  margin: 0 0 4px;
  font-family: var(--font-display); font-weight: 900;
  font-size: 16px; color: var(--wine);
}
.guestbook-entry p { margin: 0 0 4px; font-size: 14.5px; line-height: 1.65; color: var(--ink); overflow-wrap: anywhere; }
.guestbook-entry small { font-size: 11px; letter-spacing: 0.08em; color: var(--muted); }

.more-guestbook-wrap { text-align: center; margin-top: 16px; }
#load-more {
  padding: 10px 24px;
  font: 700 12px/1 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wine);
  background: transparent;
  border: 1px solid var(--gold-soft); border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
#load-more:hover { background: var(--wine); color: var(--paper); }
.loading-guestbook {
  text-align: center; margin: 10px 0;
  font-size: 13px; color: var(--wine);
}

/* Injected guestbook "Send message" button. The platform's markup uses
   Bootstrap-ish utility classes (.btn .badge-pill .bg-kundangan .d-flex
   .mx-auto) that this template does not ship, so without these scoped rules
   the submit button would render as a bare inline element. Restyle it to the
   template's wine pill so the injected form matches the RSVP design. */
#guestbookForm .d-flex { display: flex; justify-content: center; }
#guestbookForm .btn {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 6px;
  padding: 13px 30px;
  font: 700 13px/1 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper);
  background: linear-gradient(135deg, #7d4a60 0%, var(--wine) 55%, #59324a 100%);
  border: 0; border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 26px -14px rgba(107, 63, 82, 0.7);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s var(--ease);
}
#guestbookForm .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(107, 63, 82, 0.75); }
#guestbookForm .btn:disabled { filter: grayscale(0.6) brightness(0.85); cursor: default; transform: none; }
#guestbookForm .btn .ph { font-size: 16px; }

/* ── Motion preferences ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
  .invite-card, .invite-card:hover { transform: none; }
  #submit-button:hover, .head-btn:hover, #load-more:hover, .cal-btn:hover { transform: none; }
  .film-play { animation: none; }
  .scroll-cue { animation: none; }
  html { scroll-behavior: auto; }
}

/* ── Print: the full stacked invitation, everything restored ────────────── */
@media print {
  @page { margin: 12mm; }
  body { padding-top: 0; background: #fff; color: #222; }
  .app-header, .dock, .mobile-menu, .menu-backdrop, .scroll-progress,
  .js-print, .powered-by, .toast, .skip-link, .scroll-cue { display: none !important; }
  .panel { padding: 0 0 24px; break-before: page; }
  .panel-cover { break-before: auto; max-height: none; overflow: visible; }
  .stage { min-height: 0; padding: 12px; }
  .envelope, .stage-photo { display: none; }
  .lightbox { display: none !important; }
  .film-frame iframe, .film-frame video { display: none; } /* playing media can't print — the poster prints instead */
  .invite-card { transform: none; width: 100%; }
  .panel-inner { max-width: none; }
  /* The empty-state audit and the cover-fit trim only ever VISUALLY hid
     things: print restores everything. */
  .is-empty, .fit-hidden { display: revert !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: inherit; }
}

/* ── Small screens ─────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .card-photo { width: min(86%, 380px); }
  .envelope { height: min(96%, 640px); }
  .head-btn span { display: none; } /* icon-only print button on phones */
  .head-title { display: none; }   /* monogram carries the brand */
}