/* ═══════════════════════════════════════════════════════════════════════
   FLYER-SCREEN — Save the Date, one screen · styles.css
   A bold poster-style invitation. Deep charcoal + warm gold palette,
   condensed poster type (Bebas Neue) with a clean geometric body (Jost).
   ─────────────────────────────────────────────────────────────────────────
   Conventions:
     · The whole shell is gated behind html.js — no-JS visitors get a normal
       stacked, scrollable document.
     · Only the ACTIVE panel scrolls (100dvh app shell).
     · prefers-reduced-motion and @media print are supported.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
  --paper: #17130f;
  --paper-2: #201a14;
  --paper-3: #2a2118;
  --ink: #f5f1e8;
  --ink-soft: #d8d2c6;
  --muted: #a89f90;
  --line: rgba(245, 241, 232, 0.16);
  --accent: #d9b45b;
  --accent-soft: #e9cf8f;
  --accent-line: rgba(217, 180, 91, 0.32);
  --error: #ff8f7a;

  --font-display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --font-sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

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

/* ── Base / reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
}
img, svg { max-width: 100%; vertical-align: middle; }
button { font: inherit; }
.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(--accent-soft); outline-offset: 3px; }
::selection { background: rgba(217, 180, 91, 0.35); }

/* ── No-JS fallback: ordinary stacked document, everything readable ────── */
.app { min-height: 100vh; }
.shell-head, .shell-nav, .shell-nav-wrap { display: none; }
.shell-body { display: block; }
.panel { padding: 24px 18px 48px; }
.panel-inner { max-width: 640px; margin: 0 auto; }
.poster { position: relative; min-height: 70vh; }

/* ── JS shell: single-viewport 100dvh app, only the active panel scrolls ── */
html.js body {
  height: 100vh; height: 100dvh;
  overflow: hidden;
}
html.js .app {
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--paper-3) 0%, var(--paper-2) 48%, var(--paper) 100%);
}
html.js .shell-head {
  display: flex; align-items: center; gap: 10px;
  flex: 0 0 auto;
  padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
  border-bottom: 1px solid var(--line);
  background: rgba(18, 14, 10, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
html.js .shell-body {
  flex: 1 1 auto; min-height: 0; position: relative;
}
html.js .panel {
  position: absolute; inset: 0;
  display: none;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
html.js .panel::-webkit-scrollbar { width: 8px; }
html.js .panel::-webkit-scrollbar-thumb { background: rgba(217, 180, 91, 0.45); border-radius: 4px; }
html.js .panel::-webkit-scrollbar-track { background: transparent; }
html.js .panel.is-active { display: block; }
html.js .shell-nav-wrap {
  display: flex; align-items: center; gap: 2px;
  flex: 0 0 auto;
  position: relative;
  padding: 8px calc(4px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(4px + env(safe-area-inset-left));
  border-top: 1px solid var(--line);
  background: rgba(18, 14, 10, 0.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
html.js .shell-nav {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  flex: 1 1 auto; min-width: 0;
  /* Seven tabs can exceed narrow screens: scroll sideways instead of
     clipping. "safe center" keeps the row centered when it fits and
     left-aligned (scrollable) when it doesn't. */
  justify-content: safe center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
html.js .shell-nav::-webkit-scrollbar { display: none; }
/* When the tab bar overflows, gentle gold fades at both edges hint that
   more sections are reachable by swiping. main.js toggles .is-scrollable. */
html.js .shell-nav.is-scrollable::before,
html.js .shell-nav.is-scrollable::after {
  content: "";
  position: absolute; top: 6px; bottom: 6px;
  width: 34px;
  z-index: 2;
  pointer-events: none;
}
html.js .shell-nav.is-scrollable::before {
  left: 0;
  background: linear-gradient(90deg, rgba(18, 14, 10, 0.95), transparent);
}
html.js .shell-nav.is-scrollable::after {
  right: 0;
  background: linear-gradient(270deg, rgba(18, 14, 10, 0.95), transparent);
}

/* Prev / next scroll buttons on the tab bar. main.js reveals them only
   when the tab row actually overflows (and hides each one at its end), so
   every section stays one tap away on narrow screens. */
.nav-scroll {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--accent-line); border-radius: 50%;
  background: rgba(23, 19, 15, 0.85);
  color: var(--accent-soft);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav-scroll svg { width: 16px; height: 16px; }
.nav-scroll:hover { background: var(--accent); border-color: var(--accent); color: #1a140d; }
.nav-scroll[hidden] { display: none; }
@media (max-width: 380px) {
  .nav-scroll { width: 30px; height: 30px; }
}

/* ── Photo off-switch: <html data-photos="off"> hides every photo feature.
   In the JS shell main.js removes the Gallery panel entirely (so the tab bar
   rebuilds with no orphan tabs); these rules cover the no-JS stacked
   fallback and act as a belt-and-braces guard. */
html[data-photos="off"] .poster-photo,
html[data-photos="off"] .poster-photo-open,
html[data-photos="off"] .panel-gallery {
  display: none !important;
}

/* ── App header ────────────────────────────────────────────────────────── */
.head-brand { display: inline-flex; align-items: center; }
.head-monogram {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--accent);
  line-height: 1;
}
.head-amp {
  font-family: var(--font-sans);
  font-weight: 300;
  font-style: italic;
  font-size: 11px;
  color: var(--accent-soft);
  padding: 0 2px;
}
.head-title {
  flex: 1 1 auto; min-width: 0;
  font-size: 11px; font-weight: 500; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.head-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--accent-soft);
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em;
  padding: 6px 12px; cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.head-btn svg { width: 15px; height: 15px; }
.head-btn:hover { background: var(--accent); border-color: var(--accent); color: #1a140d; }

/* ── Cover: the full cover page (poster) ───────────────────────────────── */
.poster {
  position: relative;
  /* Leave room below for the .footer-brand line so it peeks into the cover
     viewport (a flyer-brand touch) without covering the poster itself. */
  min-height: calc(100% - 56px);
  display: flex;
  overflow: hidden;
  isolation: isolate;
}

/* OPTIONAL cover photo: full-bleed backdrop with a dark charcoal overlay
   so the gold/cream text stays readable. Delete .poster-photo from
   index.html to restore the flat charcoal poster. */
.poster-photo {
  position: absolute; inset: 0;
  z-index: -3;
}
.poster-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.poster-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 8, 6, 0.62) 0%,
    rgba(10, 8, 6, 0.72) 46%,
    rgba(10, 8, 6, 0.9) 100%);
}

.poster-inner {
  position: relative; z-index: 1;
  width: 100%;
  margin: auto;
  padding: clamp(24px, 5vmin, 52px) clamp(20px, 5vmin, 56px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(8px, 1.8vmin, 16px);
  text-align: center;
}

.poster-guest {
  margin: 0 0 2px;
  font-size: clamp(13px, 3vmin, 16px);
  font-style: italic;
  color: var(--accent-soft);
}

.poster-kicker {
  margin: 0;
  font-size: clamp(10px, 2.4vmin, 13px);
  font-weight: 500; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--muted);
}

.poster-names {
  margin: 0;
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: center;
  gap: 0.16em 0.3em;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(52px, 12vmin, 108px);
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
}
.poster-names .name { line-height: 1; }
.poster-names .amp {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.42em;
  letter-spacing: 0;
  color: var(--accent);
  align-self: center;
  text-transform: none;
}

.poster-meta {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: clamp(2px, 1vmin, 8px);
  font-size: clamp(11px, 2.6vmin, 14px);
  font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--accent-soft);
}
.poster-meta-sep { opacity: 0.55; }

/* ── Countdown (on the cover) ──────────────────────────────────────────── */
.countdown { text-align: center; margin-top: clamp(6px, 1.6vmin, 14px); }

.countdown__label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.countdown__grid {
  display: flex;
  justify-content: center;
  gap: clamp(6px, 1.6vmin, 10px);
}

.tile {
  min-width: clamp(52px, 13vmin, 66px);
  padding: 9px 6px;
  border: 1px solid var(--accent-line);
  border-radius: 12px;
  background: rgba(245, 241, 232, 0.05);
}

.tile span {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(24px, 5.5vmin, 32px);
  line-height: 1;
  color: var(--accent-soft);
}

.tile i {
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Cover entry point ─────────────────────────────────────────────────── */
.poster-cta {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px;
  margin-top: clamp(8px, 2vmin, 16px);
  padding: 12px 24px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: #1a140d;
  font: 500 12px/1 var(--font-sans);
  letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 12px 30px -12px rgba(217, 180, 91, 0.65);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.poster-cta svg { width: 15px; height: 15px; }
.poster-cta:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
.poster-cta:active { transform: scale(0.98); }

/* Cover photo chip — opens the backdrop photo full-size in the lightbox.
   Gentle gold pill that sits under the CTA. Hidden by JS when no backdrop
   photo exists. */
.poster-photo-open {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(23, 19, 15, 0.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  color: var(--ink-soft);
  font: 500 10px/1 var(--font-sans);
  letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.poster-photo-open svg { width: 14px; height: 14px; flex: none; }
.poster-photo-open:hover { background: var(--accent); border-color: var(--accent); color: #1a140d; }

/* ── Footer brand placeholder ──────────────────────────────────────────── */
.footer-brand {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  font-size: 10px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--muted); text-align: center;
  border-top: 1px solid rgba(245, 241, 232, 0.12);
  background: rgba(10, 8, 6, 0.35);
}
.footer-brand-mark { color: var(--accent); font-size: 12px; }

/* ── Powered-by brand strip (full-width, above the tab bar) ──────────────
   Static platform HTML: the engine swaps the literal brand token at render;
   never a host-editable morph. */
.powered-by {
  flex: 0 0 auto;
  text-align: center;
  padding: 9px 16px calc(9px + env(safe-area-inset-bottom));
  font-size: 10px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid rgba(245, 241, 232, 0.12);
  background: rgba(10, 8, 6, 0.35);
}
.powered-by .link-footer { color: var(--accent-soft); text-decoration: none; }

/* ── Shared panel typography ───────────────────────────────────────────── */
.panel-inner { max-width: 640px; margin: 0 auto; padding: clamp(28px, 5vmin, 52px) clamp(18px, 4vmin, 32px) clamp(36px, 6vmin, 60px); }
.panel-head { text-align: center; margin-bottom: clamp(22px, 4vmin, 34px); }
.eyebrow {
  margin: 0 0 6px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--accent);
}
.panel-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(36px, 8vmin, 52px);
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
}
.panel-title:focus { outline: none; }
.rule {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: clamp(14px, 3vmin, 22px) auto;
  color: var(--accent); font-size: 12px;
}
.rule::before, .rule::after {
  content: "";
  height: 1px; width: min(110px, 20vw);
  background: linear-gradient(90deg, transparent, var(--accent-line));
}
.rule::after { background: linear-gradient(90deg, var(--accent-line), transparent); }
.lede {
  margin: 0 auto; max-width: 32em;
  font-size: clamp(14px, 3.2vmin, 16px);
  line-height: 1.7;
  color: var(--muted);
}

/* ── Details: info grid ────────────────────────────────────────────────── */
.info-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 2.4vmin, 16px);
  margin: 0; padding: 0;
}
.info-tile {
  padding: clamp(14px, 3vmin, 20px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(245, 241, 232, 0.04);
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.info-tile:hover { transform: translateY(-2px); background: rgba(245, 241, 232, 0.07); border-color: var(--accent-line); }
.info-tile[hidden] { display: none; } /* tile without a value (empty dd removed by the engine) */
.info-tile dt {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  font-size: 10px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--accent);
}
.info-tile dt svg { width: 17px; height: 17px; flex: none; }
.info-tile dd {
  margin: 0;
  font-size: clamp(14px, 3.2vmin, 16px);
  line-height: 1.5;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

/* ── Details: actions (directions / calendar / copy link) ──────────────── */
.actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px;
  margin-top: clamp(20px, 4vmin, 28px);
}
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  appearance: none;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #1a140d;
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 11px 18px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:hover { background: var(--accent-soft); border-color: var(--accent-soft); }
.btn:active { transform: scale(0.98); }
.btn svg { width: 14px; height: 14px; }
.btn--ghost {
  background: transparent;
  color: var(--ink);
}
.btn--ghost:hover { background: var(--accent); color: #1a140d; }

/* ── Details: note card ────────────────────────────────────────────────── */
.note-card {
  margin: clamp(20px, 4vmin, 28px) auto 0;
  max-width: 30em;
  padding: clamp(16px, 3.4vmin, 22px);
  text-align: center;
  border: 1px dashed var(--accent-line);
  border-radius: var(--radius);
  background: rgba(217, 180, 91, 0.07);
}
.note-label {
  margin: 0 0 6px;
  font-size: 10px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--accent);
}
.note-text { margin: 0; font-size: clamp(13.5px, 3.1vmin, 15.5px); line-height: 1.65; color: var(--ink-soft); }

/* ── Gallery: photo grid ───────────────────────────────────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 2.4vmin, 16px);
}
.gallery-item {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  /* Warm fallback underneath each photo so a slot never looks broken while
     the (placeholder) image loads — or if it ever fails. */
  background:
    radial-gradient(circle at 50% 38%, rgba(217, 180, 91, 0.2), transparent 62%),
    linear-gradient(165deg, var(--paper-3) 0%, var(--paper-2) 62%, var(--paper) 100%);
}
.gallery-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.gallery-open img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--ease);
}
.gallery-item:hover .gallery-open img { transform: scale(1.06); }
.gallery-item:focus-within { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
.gallery-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 30px 12px 10px;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  text-align: center;
  color: var(--ink);
  background: linear-gradient(180deg, transparent, rgba(10, 8, 6, 0.85));
  pointer-events: none;
  overflow-wrap: anywhere;
}

/* ── Video: optional embed ─────────────────────────────────────────────── */
.film-figure { margin: 0; }
.film-embed {
  position: relative;
  width: 100%;
  /* Cap by height so a tall phone screen never inflates the video; the
     16/9 ratio is preserved (width caps first on phones). */
  max-width: calc(56vh * 16 / 9);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.7);
  /* Warm fallback while the embed loads — nothing ever looks broken. */
  background:
    radial-gradient(circle at 50% 40%, rgba(217, 180, 91, 0.18), transparent 60%),
    linear-gradient(165deg, var(--paper-3) 0%, var(--paper-2) 62%, var(--paper) 100%);
}
.film-embed iframe,
.film-embed video {
  display: block;
  width: 100%; height: 100%;
  border: 0;
  object-fit: cover;
}
.film-cap {
  margin: 12px 0 0;
  text-align: center;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.film-open {
  margin: 14px 0 0;
  text-align: center;
}
.film-open a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 42px;
  padding: 9px 16px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-soft); text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.film-open a:hover { background: var(--accent); border-color: var(--accent); color: #1a140d; }

/* ── The Flyer: optional flyer/banner showcase ─────────────────────────── */
/* Reuses .gallery-item's frame + caption styling; just centered and capped
   in width so a flyer reads like a flyer. */
.flyer-figure {
  max-width: 400px;
  margin: 0 auto;
}

/* ── Free Page: host-filled repeatable blocks ────────────────────────────
   Each .free-block is one block: a free title, free text (line breaks are
   kept via white-space: pre-line) and an OPTIONAL photo. The render engine
   removes the whole section when no blocks are filled (or the host toggles
   the Free Page switch off), so the tab and menu entry vanish with it. */
.free-blocks {
  display: flex; flex-direction: column;
  gap: clamp(16px, 3.6vmin, 24px);
  margin-top: clamp(8px, 2vmin, 14px);
}
.free-block {
  padding: clamp(18px, 4vmin, 26px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(245, 241, 232, 0.04);
}
.free-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 6vmin, 34px);
  line-height: 1.05;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.free-title:focus { outline: none; }
.free-content {
  margin: 12px 0 0;
  font-size: clamp(14px, 3.2vmin, 15.5px);
  line-height: 1.7;
  color: var(--ink-soft);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.free-figure {
  margin: 16px 0 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  /* Warm fallback underneath each photo so a slot never looks broken. */
  background:
    radial-gradient(circle at 50% 38%, rgba(217, 180, 91, 0.2), transparent 62%),
    linear-gradient(165deg, var(--paper-3) 0%, var(--paper-2) 62%, var(--paper) 100%);
}
.free-figure .gallery-open { aspect-ratio: 4 / 3; }
.free-cap {
  margin: 10px 0 0;
  text-align: center;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}

/* ── RSVP countdown-inline (platform contract: .count-day/hour/minute/second) ── */
.countdown-inline {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3px;
  font-size: 15px;
  color: var(--ink-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: 9px 18px;
  margin-top: clamp(14px, 3vmin, 22px);
}
.countdown-inline span:first-child {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  color: var(--muted);
  margin-right: 8px;
}
.countdown-inline .count-day,
.countdown-inline .count-hour,
.countdown-inline .count-minute,
.countdown-inline .count-second {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--accent-soft);
}
.countdown-inline i { font-style: normal; font-size: 10px; letter-spacing: 0.1em; color: var(--muted); }

/* ── 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: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
}
.form-control {
  width: 100%;
  padding: 11px 14px;
  font: 400 15px/1.4 var(--font-sans);
  color: var(--ink);
  background: rgba(245, 241, 232, 0.06);
  border: 1px solid var(--line);
  border-radius: 12px;
  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: #6f665a; }
.form-control:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(245, 241, 232, 0.09);
  box-shadow: 0 0 0 3px rgba(217, 180, 91, 0.2);
}
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='%23d9b45b' 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;
}
select.form-control option { color: var(--paper); background: var(--ink); }

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

/* 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: 500 13px/1 var(--font-sans);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #1a140d;
  background: linear-gradient(135deg, #f2d692 0%, var(--accent) 55%, #c89e45 100%);
  border: 0; border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 26px -12px rgba(217, 180, 91, 0.65);
  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 -12px rgba(217, 180, 91, 0.7); }
#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(--accent-soft);
}
.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(--line);
  padding-top: 8px;
}
.guestbook-entry {
  padding: 16px 2px;
  border-bottom: 1px solid rgba(245, 241, 232, 0.12);
}
.guestbook-entry:last-child { border-bottom: 0; }
.guestbook-entry h5 {
  margin: 0 0 4px;
  font-family: var(--font-display); font-weight: 400;
  font-size: 19px; letter-spacing: 0.03em;
  color: var(--accent-soft);
}
.guestbook-entry p { margin: 0 0 4px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); 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: 500 12px/1 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-soft);
  background: transparent;
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
#load-more:hover { background: var(--accent); border-color: var(--accent); color: #1a140d; }
.loading-guestbook {
  text-align: center; margin: 10px 0;
  font-size: 13px; color: var(--accent-soft);
}

/* ── Bottom section tabs ───────────────────────────────────────────────── */
.nav-tab {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px;
  padding: 8px 13px;
  border: 0; border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.nav-tab svg { width: 15px; height: 15px; flex: none; }
.nav-tab[aria-selected="true"] {
  background: linear-gradient(135deg, #f2d692, var(--accent));
  color: #1a140d;
}
.nav-tab:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }

/* ── Full-screen menu overlay (opened by the header "Menu" button) ─────── */
.menu-overlay {
  position: fixed; inset: 0;
  z-index: 90;
  display: flex; flex-direction: column;
  overflow-y: auto;
  visibility: hidden; opacity: 0;
  background: linear-gradient(180deg, rgba(16, 13, 10, 0.98), rgba(23, 19, 15, 0.99));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: opacity 0.28s var(--ease), visibility 0.28s;
}
.menu-overlay.is-open { visibility: visible; opacity: 1; }
.menu-overlay-inner {
  width: 100%; max-width: 560px;
  margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top)) clamp(18px, 5vmin, 32px) calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
  min-height: 100%;
}
.menu-overlay-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: clamp(20px, 5vmin, 34px);
}
.menu-overlay-brand {
  font-family: var(--font-display);
  font-size: 28px; line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
.menu-overlay-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent;
  color: var(--accent-soft); font-size: 15px;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.menu-overlay-close:hover { background: var(--accent); border-color: var(--accent); color: #1a140d; }
.menu-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.menu-item {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  min-height: 52px;
  padding: 14px 18px;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(245, 241, 232, 0.045);
  color: var(--ink);
  font: 500 13px/1.2 var(--font-sans);
  letter-spacing: 0.14em; text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.menu-item svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.menu-item:hover, .menu-item:focus-visible {
  background: var(--accent); border-color: var(--accent); color: #1a140d;
}
.menu-item:hover svg, .menu-item:focus-visible svg { color: #1a140d; }
.menu-overlay-foot {
  margin-top: auto;
  padding-top: 28px;
  text-align: center;
  font-size: 10px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--muted);
}

/* ── Lightbox: full-screen photo viewer (built by main.js from the grid) ── */
.lightbox {
  position: fixed; inset: 0;
  z-index: 100;
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column;
  padding: 20px;
  overflow: hidden;
  background: rgba(8, 6, 5, 0.94);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: min(92vw, 880px);
  max-height: 76vh;
  width: auto; height: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 34px 90px -30px rgba(0, 0, 0, 0.85);
  cursor: zoom-in;
  transition: transform 0.25s var(--ease);
}
/* Zoom state: the photo scales 2× and the viewer becomes a scrollable
   pane so guests can pan around — click the photo (or the zoom button)
   to toggle, click the dark backdrop to close. */
.lightbox.is-zoomed {
  align-items: flex-start; justify-content: flex-start;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.lightbox.is-zoomed img {
  max-width: none; max-height: none;
  transform: scale(2);
  transform-origin: 0 0;
  align-self: flex-start;
  cursor: zoom-out;
}
.lightbox-cap,
.lightbox-hint,
.lightbox-original { align-self: center; }
.lightbox-cap {
  margin: 14px 0 0;
  font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-soft);
  text-align: center;
}
.lightbox-hint {
  margin: 8px 0 0;
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245, 241, 232, 0.55);
  text-align: center;
}
.lightbox-original {
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-soft); text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.lightbox-original:hover { background: var(--accent); border-color: var(--accent); color: #1a140d; }
.lightbox-close,
.lightbox-prev,
.lightbox-next,
.lightbox-zoom {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line); border-radius: 50%;
  background: rgba(23, 19, 15, 0.75);
  color: var(--accent-soft);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover, .lightbox-zoom:hover {
  background: var(--accent); border-color: var(--accent); color: #1a140d;
}
.lightbox-close { top: calc(14px + env(safe-area-inset-top)); right: 14px; }
.lightbox-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lightbox-zoom { bottom: calc(14px + env(safe-area-inset-bottom)); right: 14px; }
.lightbox-zoom svg { width: 19px; height: 19px; }
.lightbox-prev.is-hidden, .lightbox-next.is-hidden { display: none; }
@media (max-width: 560px) {
  .lightbox-prev { left: 6px; }
  .lightbox-next { right: 6px; }
}

/* ── Toast ─────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 20px);
  background: var(--accent);
  color: #1a140d;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 120;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ── Reveal (progressive enhancement) ──────────────────────────────────── */
html.js .panel.is-active .panel-inner {
  animation: rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── 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;
  }
  .info-tile:hover { transform: none; }
  #submit-button:hover, .head-btn:hover, #load-more:hover, .poster-cta:hover { transform: none; }
}

/* ── Print: full stacked flyer (cover → details → gallery → video → flyer → RSVP → guestbook) ── */
@media print {
  @page { margin: 12mm; }
  html.js body { height: auto; overflow: visible; }
  html.js .app { height: auto; display: block; background: #fff; }
  html.js .shell-head, html.js .shell-nav, html.js .shell-nav-wrap, .js-print, .lightbox, .toast { display: none !important; }
  .menu-overlay, .poster-photo-open, .poster-cta { display: none !important; }
  .film-embed { display: none; }
  html.js .shell-body { display: block; }
  html.js .panel {
    position: static; display: block !important;
    height: auto; overflow: visible;
    padding: 0 0 24px;
  }
  html.js .panel[data-panel]:not([data-panel="cover"]) { break-before: page; }
  .poster { min-height: 88vh; border: 1px solid rgba(217, 180, 91, 0.4); border-radius: var(--radius); }
  .gallery-item { break-inside: avoid; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .panel-inner { max-width: none; }
  .form-control, #submit-button { border-width: 1px; }
  body { background: #fff; color: #222; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: inherit; }
}

/* ── Small screens: keep tabs compact ──────────────────────────────────── */
@media (max-width: 380px) {
  .nav-tab { padding: 7px 9px; font-size: 10px; gap: 4px; }
  .info-grid { gap: 8px; }
  .info-tile { padding: 12px; }
  .gallery-grid { gap: 8px; }
  .gallery-cap { font-size: 10px; letter-spacing: 0.12em; }
}

/* ── Short screens: keep the cover poster compact so it never needs to scroll ── */
@media (max-height: 660px) {
  html.js .poster-inner { gap: 6px; padding-top: 14px; padding-bottom: 14px; }
  .poster-names { font-size: clamp(40px, 11vmin, 72px); }
  .countdown { margin-top: 2px; }
  .tile { min-width: 48px; padding: 7px 4px; }
  .tile span { font-size: 22px; }
}

/* Wider screens: denser 3-up gallery (photos still open full-screen). */
@media (min-width: 720px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}