/* =====================================================================
   business-corporate-holiday-card-champagne-crest
   Champagne & crest corporate holiday invitation card.

   Design language: a fine invitation — ivory card stock with a double
   gold foil rule and a four-point crest, presented on a deep evergreen
   "envelope" backdrop. Refined serif (Cormorant
   Garamond) + geometric small caps (Jost). Same single-viewport shell
   and platform integration as the companion flyer template.

   Palette is driven by CSS custom properties at the top — recolor the
   whole template by editing those values.
   ===================================================================== */

:root {
  --envelope-950: #081a13;     /* shell background */
  --envelope-900: #0d271e;
  --envelope-800: #143a2c;
  --ivory: #faf5e9;            /* card stock */
  --ivory-2: #f3ecd9;
  --ink: #1e3a2c;              /* headings/text on ivory */
  --ink-soft: #4c6355;         /* secondary text on ivory */
  --gold-300: #e6cf8e;         /* accents on the envelope */
  --gold-500: #b18a33;         /* foil gold on ivory */
  --gold-600: #96722a;
  --coral: #a3402c;            /* validation on ivory */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Jost", "Segoe UI", Helvetica, Arial, sans-serif;
  --radius: 6px;
  --shell-pad: clamp(18px, 4.5vw, 44px);
}

/* ---------- reset & base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--envelope-950);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
dd { margin: 0; }

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; border-radius: 4px; }

/* ---------- utilities ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ivory);
  color: var(--envelope-950);
  font-weight: 700;
  border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* =====================================================================
   SHELL — progressive enhancement
   Without JS everything is a normal stacked page that scrolls.
   With .js it becomes a single-viewport app: 100dvh shell, absolutely
   positioned panels, only the active panel scrolls.
   ===================================================================== */

.shell { min-height: 100vh; }

.panel { display: block; }

.panel-scroll {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: var(--shell-pad) var(--shell-pad) 48px;
}

/* ---- app mode ---- */

.js body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.js .shell {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.js .panels {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.js .panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(230, 207, 142, 0.4) transparent;
  padding: 0 0 104px;                    /* clearance for the bottom nav */
  visibility: hidden;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s;
}

.js .panel::-webkit-scrollbar { width: 10px; }
.js .panel::-webkit-scrollbar-thumb {
  background: rgba(230, 207, 142, 0.35);
  border-radius: 8px;
  border: 3px solid var(--envelope-950);
}

.js .panel.is-active {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.js .panel-scroll { min-height: 100%; }

/* Cover centers the card vertically; falls back to scroll on short screens. */
.js .cover-scroll {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* =====================================================================
   COVER BACKDROP PHOTO (optional)
   A full-bleed photo behind the invitation card. A placeholder ships by
   default; delete the .cover-photo block in index.html to disable the
   feature entirely. The evergreen tint keeps the ivory card readable
   and the palette intact no matter which photo is used.
   ===================================================================== */

.panel-cover { position: relative; }   /* containing block in no-JS mode */

.cover-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--envelope-950);
}

.cover-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 26, 19, 0.62), rgba(8, 26, 19, 0.45) 45%, rgba(8, 26, 19, 0.8)),
    radial-gradient(120% 90% at 50% 18%, rgba(8, 26, 19, 0.25), rgba(8, 26, 19, 0.85));
}

.cover-scroll { position: relative; z-index: 1; }

/* =====================================================================
   GALLERY (optional photo panel)
   A responsive grid of framed photo tiles. Placeholders ship by default;
   delete the #gallery <section> in index.html to disable the feature.
   ===================================================================== */

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 8px;
}

@media (min-width: 640px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; }
}

.gallery-item {
  margin: 0;
  background: var(--ivory-2);
  border: 1px solid rgba(177, 138, 51, 0.55);
  outline: 1px solid rgba(177, 138, 51, 0.35);
  outline-offset: 4px;
  border-radius: var(--radius);
  overflow: hidden;
  break-inside: avoid;
}

.gallery-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--ivory-2);
  transition: transform 0.25s ease;
}

.gallery-item:hover img { transform: scale(1.015); }

.gallery-caption {
  padding: 11px 14px 13px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gold-600);
}

/* =====================================================================
   THE CARD FRAME (foil double rule on ivory)
   ===================================================================== */

.card-frame {
  background: linear-gradient(180deg, var(--ivory), var(--ivory-2));
  border: 1px solid rgba(177, 138, 51, 0.55);
  outline: 1px solid rgba(177, 138, 51, 0.35);
  outline-offset: 6px;
  border-radius: var(--radius);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
  padding: clamp(26px, 6vw, 56px);
  color: var(--ink);
  break-inside: avoid;
}

/* =====================================================================
   TYPOGRAPHY
   ===================================================================== */

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-600);
}

.event-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(2.1rem, 6.5vw, 3.6rem);
  line-height: 1.08;
  color: var(--ink);
}

.section-title,
.rsvp-title,
.guestbook-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: 1.1;
  color: var(--ink);
}

.event-description {
  margin-top: 18px;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.4vw, 1.22rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.guest-greeting {
  margin-top: 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.08rem;
  color: var(--gold-600);
}

.event-host {
  margin-top: 28px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- crest ---------- */

.crest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: var(--gold-600);
}

.crest-badge {
  width: 62px;
  height: 62px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crest-badge svg { width: 32px; height: 32px; }

.crest-name {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-600);
}

/* =====================================================================
   DETAIL LIST (label / value rows with foil rules)
   ===================================================================== */

.detail-list {
  margin-top: 26px;
  border-bottom: 1px solid rgba(177, 138, 51, 0.4);
}

.detail-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 18px;
  padding: 13px 2px;
  border-top: 1px solid rgba(177, 138, 51, 0.4);
}

.detail-row dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-600);
  padding-top: 2px;
}

.detail-row dd {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-align: right;
}

/* =====================================================================
   BUTTONS
   ===================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 30px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.btn:active { transform: scale(0.98); }

.btn-primary {
  color: var(--envelope-950);
  background: linear-gradient(135deg, #d9bb6d, var(--gold-500));
  box-shadow: 0 10px 22px rgba(150, 114, 42, 0.3), inset 0 0 0 1px rgba(255, 250, 235, 0.35);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(150, 114, 42, 0.36), inset 0 0 0 1px rgba(255, 250, 235, 0.5);
}

.btn-text {
  min-height: 44px;
  padding: 10px 18px;
  color: var(--gold-600);
  background: transparent;
  border: 1px solid transparent;
}
.btn-text:hover { background: rgba(177, 138, 51, 0.08); }

.card-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 26px;
}

/* ---------- panel advance CTA ---------- */

.panel-advance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: max-content;
  margin: 44px auto 0;
  padding: 12px 22px;
  border: 1px solid rgba(230, 207, 142, 0.45);
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-300);
  transition: background-color 0.18s ease;
}
.panel-advance:hover { background: rgba(230, 207, 142, 0.08); }

.advance-chevron { width: 16px; height: 16px; }

/* =====================================================================
   SECTION HEADS (details / rsvp / guestbook)
   ===================================================================== */

.card-head,
.rsvp-head,
.guestbook-head {
  text-align: center;
  margin-bottom: 26px;
}

.rsvp-description,
.guestbook-description,
.gallery-description,
.free-intro {
  margin-top: 10px;
  font-size: 0.98rem;
  color: var(--ink-soft);
}

/* =====================================================================
   DETAILS / AGENDA
   ===================================================================== */

.agenda-title {
  margin-top: 30px;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: 1.5rem;
  text-align: center;
  color: var(--ink);
}

.event-agenda {
  margin-top: 16px;
  border-top: 1px solid rgba(177, 138, 51, 0.4);
}

.agenda-item {
  display: flex;
  gap: 18px;
  padding: 13px 2px;
  border-bottom: 1px solid rgba(177, 138, 51, 0.4);
}

.agenda-time {
  flex: 0 0 92px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--gold-600);
  padding-top: 2px;
}

.agenda-text { color: var(--ink); }

.event-notes {
  margin-top: 26px;
  font-size: 0.96rem;
  color: var(--ink-soft);
  text-align: center;
}

/* =====================================================================
   RSVP FORM (light-on-ivory)
   ===================================================================== */

.rsvp-form { margin-top: 6px; }

.rsvp-form-display {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-row { display: grid; gap: 16px; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label,
.attending-fieldset legend {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-600);
}

.label-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group select,
.form-group textarea,
.guestbook-body input[type="text"],
.guestbook-body input[type="email"],
.guestbook-body textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
  background: #fffdf5;
  border: 1px solid #d8cba4;
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-group textarea,
.guestbook-body textarea { min-height: 96px; resize: vertical; }

.form-group input::placeholder,
.form-group textarea::placeholder,
.guestbook-body input::placeholder,
.guestbook-body textarea::placeholder { color: #a99f83; }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.guestbook-body input:focus,
.guestbook-body textarea:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(177, 138, 51, 0.18);
}

.form-group select,
.guestbook-body select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%2396722a' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 38px;
}

.error {
  min-height: 1.2em;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--coral);
}
.error:empty { display: none; }

.form-hint { font-size: 0.86rem; color: var(--ink-soft); }

/* ---------- attending segmented control ---------- */

.attending-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.attending-fieldset legend { margin-bottom: 8px; }

.attending-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.attending-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid #d8cba4;
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.attending-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--gold-600);
}

.attending-btn.is-selected {
  background: rgba(177, 138, 51, 0.12);
  border-color: var(--gold-500);
}
.attending-btn.is-selected .attending-dot {
  background: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(177, 138, 51, 0.22);
}

/* When the guest declines, guest-count and meal fields collapse.
   The inputs stay enabled so the platform still serializes the form. */
.rsvp-guest-fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.is-declining .rsvp-guest-fields { display: none; }

/* ---------- guest stepper ---------- */

.stepper { display: inline-flex; align-items: center; gap: 10px; }

.stepper input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
  width: 64px;
  text-align: center;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.stepper-btn {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 1px solid #d8cba4;
  background: transparent;
  color: var(--gold-600);
  font-size: 1.4rem;
  line-height: 1;
  transition: background-color 0.15s ease;
}
.stepper-btn:hover { background: rgba(177, 138, 51, 0.1); }

/* ---------- submit & loading ---------- */

#submit-button {
  display: block;
  width: 100%;
  min-height: 54px;
  margin-top: 10px;
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--envelope-950);
  background: linear-gradient(135deg, #d9bb6d, var(--gold-500));
  box-shadow: 0 10px 22px rgba(150, 114, 42, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
#submit-button:hover { transform: translateY(-1px); }
#submit-button:disabled { opacity: 0.6; cursor: not-allowed; }

.loading {
  margin-top: 12px;
  text-align: center;
  font-weight: 600;
  color: var(--gold-600);
}

/* ---------- RSVP deadline countdown (dark inset panel on ivory) ---------- */

.rsvp-deadline {
  display: none;
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--ivory);
}
html.rsvp-deadline-live .rsvp-deadline { display: block; }

.rsvp-deadline-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: 8px;
}

.count-wrap { display: flex; gap: 8px; justify-content: center; }

.count-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.count-day, .count-hour, .count-minute, .count-second {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.1;
  color: var(--gold-300);
}

.count-unit {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 245, 233, 0.65);
}

/* =====================================================================
   GUESTBOOK (mount styling for platform-injected markup)
   ===================================================================== */

.guestbook-body { margin-top: 6px; }

.guestbook-body #guestbookForm {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 30px;
}

.guestbook-body button[type="submit"] {
  align-self: center;
  min-height: 48px;
  padding: 12px 34px;
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  color: var(--envelope-950);
  background: linear-gradient(135deg, #d9bb6d, var(--gold-500));
  box-shadow: 0 10px 22px rgba(150, 114, 42, 0.3);
}

.guestbook-body .error { color: var(--coral); }

.guestbook-chapta { display: flex; justify-content: center; }

.loading-guestbook { text-align: center; font-weight: 600; color: var(--gold-600); }

.guestbook-wrap { display: flex; flex-direction: column; gap: 14px; }

/* Platform-injected list wrapper (Style A mount). Entries are styled
   individually; this gives them breathing room between messages. */
#comments-container { display: flex; flex-direction: column; gap: 14px; }

.guestbook-entry {
  padding: 16px 18px;
  background: #fffdf5;
  border: 1px solid rgba(177, 138, 51, 0.45);
  border-radius: var(--radius);
  overflow-wrap: break-word;
}

.guestbook-entry h5 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink);
}

.guestbook-entry p {
  margin-top: 6px;
  font-size: 0.98rem;
  color: var(--ink-soft);
  overflow-wrap: break-word;
}

.guestbook-entry small {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gold-600);
}

.more-guestbook-wrap { text-align: center; margin-top: 18px; }

#load-more {
  min-height: 44px;
  padding: 10px 26px;
  border-radius: 999px;
  border: 1px solid var(--gold-500);
  color: var(--gold-600);
  font-weight: 600;
}
#load-more:hover { background: rgba(177, 138, 51, 0.08); }

/* =====================================================================
   BOTTOM NAVIGATION
   ===================================================================== */

.panel-nav {
  flex: 0 0 auto;
  z-index: 6;
  display: flex;
  justify-content: center;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(8, 26, 19, 0), rgba(8, 26, 19, 0.94) 34%);
}

.panel-nav-list { display: flex; gap: 4px; align-items: flex-end; }

.panel-nav-item { list-style: none; }

.panel-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 60px;
  min-height: 48px;
  padding: 8px 10px 6px;
  border-radius: 12px;
  color: #9db4a6;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.panel-nav-btn svg { width: 20px; height: 20px; }

.panel-nav-btn:hover { color: var(--ivory); }

.panel-nav-btn.is-active {
  color: var(--gold-300);
  background: rgba(230, 207, 142, 0.1);
}

.panel-nav-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (max-width: 420px) {
  .panel-nav-label { font-size: 9px; letter-spacing: 0.1em; }
  .panel-nav-btn { min-width: 0; padding: 8px 6px 6px; }
  .panel-nav-list { gap: 2px; }
  .panel-nav { padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
}

/* =====================================================================
   NO-JS FALLBACK
   The shell needs JS for the panel app; without it the stacked page must
   still be usable: show the attending select, hide JS-only widgets.
   ===================================================================== */

.no-js .attending-btn { display: none; }
.no-js .panel-nav { display: none; }
.no-js #attending {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  min-height: 48px;
  padding: 11px 14px;
  font-size: 1rem;
  color: var(--ink);
  background: #fffdf5;
  border: 1px solid #d8cba4;
  border-radius: 8px;
}
.no-js .panel-advance { display: none; }

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .panel { transform: none; }
  .film-play { animation: none; }
}
/* =====================================================================
   PRINT
   All panels print as stacked pages; nav and effects are hidden.
   ===================================================================== */

@media print {
  @page { margin: 12mm; }

  html, body { background: #ffffff !important; }
  body { color: #111; }

  .js body,
  .js .shell { height: auto !important; overflow: visible !important; }

  .js .panel {
    position: static !important;
    inset: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    overflow: visible !important;
    padding: 0 !important;
    transition: none !important;
  }

  .panel + .panel { break-before: page; }

  .panel-scroll { max-width: none; padding: 6mm 0; }
  .cover-scroll { justify-content: flex-start; }

  .panel-nav,
  .skip-link,
  .panel-advance,
  .rsvp-deadline,
  .photo-viewer,
  .powered-by { display: none !important; }

  .card-actions { display: none; }

  .card-frame {
    box-shadow: none;
    outline-offset: 4px;
  }

  .form-group input[type="text"],
  .form-group input[type="email"],
  .form-group input[type="tel"],
  .form-group input[type="number"],
  .form-group select,
  .form-group textarea,
  .guestbook-body input,
  .guestbook-body textarea {
    background: #ffffff !important;
    color: #111 !important;
    border-color: #999 !important;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* =====================================================================
   BANNER / FLYER (optional, in the details card)
   A wide framed slot for hosts who already have a designed flyer or
   poster for the celebration — guests confirm they're in the right
   place with the right link. Clicking it opens the full-screen photo
   viewer (main.js). Delete the .banner-flyer block in index.html to
   hide the feature.
   ===================================================================== */

.banner-flyer {
  margin: clamp(28px, 5vmin, 44px) auto 0;
  max-width: 680px;
  text-align: center;
}

.banner-flyer img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 3;
  object-fit: cover;
  padding: 6px;
  background: var(--ivory-2);
  border: 1px solid rgba(177, 138, 51, 0.55);
  outline: 1px solid rgba(177, 138, 51, 0.35);
  outline-offset: 4px;
  border-radius: var(--radius);
  box-shadow: 0 14px 30px -22px rgba(8, 26, 19, 0.5);
}

.banner-flyer figcaption {
  margin-top: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-600);
}

/* =====================================================================
   FILM CARD (optional video feature, in the details card)
   A poster + play button that lazy-loads an <iframe> from the URL in
   data-video-url (YouTube / Vimeo / any embeddable URL) — nothing loads
   until the guest taps play. Delete the .film-card block in index.html
   to hide the feature entirely; leave data-video-url empty to show a
   gentle hint instead of a dead button.
   ===================================================================== */

.film-card {
  margin-top: clamp(30px, 5.5vmin, 46px);
  text-align: center;
}

.film-frame {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 18px auto 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ivory-2);
  border: 1px solid rgba(177, 138, 51, 0.55);
  box-shadow: 0 16px 34px -24px rgba(8, 26, 19, 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, 12vmin, 72px);
  height: clamp(56px, 12vmin, 72px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--envelope-950);
  background: radial-gradient(circle at 32% 28%, #e9d7a3, var(--gold-500) 62%, var(--gold-600));
  border: 1px solid rgba(255, 250, 235, 0.6);
  box-shadow: 0 12px 28px -12px rgba(8, 26, 19, 0.65);
  animation: film-pulse 2.6s ease-in-out infinite;
  transition: transform 0.25s 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-500); outline-offset: 3px; }

.film-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(8, 26, 19, 0.66);
  color: var(--ivory);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.film-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.film-note {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 18px;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  text-align: center;
  background: var(--ivory-2);
}

.film-external {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-600);
  text-decoration: none;
  border-bottom: 1px solid rgba(177, 138, 51, 0.5);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.film-external:hover { color: var(--gold-500); border-color: var(--gold-500); }
.film-external[hidden] { display: none; }

@keyframes film-pulse {
  0%, 100% { box-shadow: 0 12px 28px -12px rgba(8, 26, 19, 0.65), 0 0 0 0 rgba(177, 138, 51, 0.4); }
  50% { box-shadow: 0 12px 28px -12px rgba(8, 26, 19, 0.65), 0 0 0 14px rgba(177, 138, 51, 0); }
}

/* =====================================================================
   FULL-SCREEN PHOTO VIEWER (lightbox)
   Every photo slot marked [data-lightbox] — cover backdrop, gallery
   tiles, official flyer — opens full size in this viewer with prev/next,
   Esc/arrows/swipe and a focus trap. Built by main.js only when such a
   slot exists, so hiding a photo feature never leaves orphaned UI.
   ===================================================================== */

html.js .cover-photo img,
html.js .gallery-item img,
html.js .banner-flyer img,
html.js .free-media img { cursor: zoom-in; }

/* The decorative gradient over the cover photo must not swallow clicks. */
.cover-photo::after { pointer-events: none; }

html.js .gallery-item,
html.js .banner-flyer { position: relative; }

/* Small "view full size" badge on hover / keyboard focus — shows the photo
   is clickable. Purely visual; without JS (no viewer) it never appears. */
html.js .gallery-item::after,
html.js .banner-flyer::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(250, 245, 233, 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='%2396722a' 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%3C/svg%3E")
    center / 16px no-repeat;
  border: 1px solid rgba(177, 138, 51, 0.55);
  box-shadow: 0 4px 12px -4px rgba(8, 26, 19, 0.45);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
html.js .gallery-item:hover::after,
html.js .gallery-item:focus-within::after,
html.js .banner-flyer:hover::after,
html.js .banner-flyer:focus-within::after {
  opacity: 1;
  transform: none;
}

.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: rgba(8, 26, 19, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.photo-viewer.is-open { display: flex; }

.photo-viewer figure {
  margin: 0;
  max-width: min(92vw, 960px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.photo-viewer img {
  display: block;
  max-width: 100%;
  max-height: 76vh;
  max-height: 76dvh;
  width: auto;
  height: auto;
  border: 6px solid var(--ivory-2);
  border-radius: var(--radius);
  background: var(--envelope-800);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.75);
}

.photo-viewer figcaption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  color: var(--gold-300);
}

.photo-viewer .pv-unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(72vw, 520px);
  height: min(46vh, 360px);
  border: 6px solid var(--ivory-2);
  border-radius: var(--radius);
  background: var(--envelope-800);
  color: var(--gold-300);
  font-size: 14px;
  font-style: italic;
}

.pv-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(250, 245, 233, 0.5);
  background: rgba(250, 245, 233, 0.94);
  color: var(--gold-600);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.pv-btn:hover { transform: scale(1.06); background: var(--ivory); }
.pv-close { top: calc(14px + env(safe-area-inset-top)); right: calc(14px + env(safe-area-inset-right)); }
.pv-prev  { left: 12px;  top: 50%; transform: translateY(-50%); }
.pv-next  { right: 12px; top: 50%; transform: translateY(-50%); }
.pv-prev:hover, .pv-next:hover { transform: translateY(-50%) scale(1.06); }
.photo-viewer :focus-visible { outline: 2px solid var(--gold-300); outline-offset: 3px; }

/* Narrow screens: prev/next drop below the photo so they never cover it. */
@media (max-width: 520px) {
  .photo-viewer { flex-direction: column; gap: 10px; }
  .photo-viewer img { max-height: 62vh; max-height: 62dvh; }
  .pv-prev, .pv-next { position: static; transform: none; }
  .pv-prev:hover, .pv-next:hover { transform: scale(1.06); }
  .pv-prev, .pv-next { width: 40px; height: 40px; }
  .photo-viewer figure { flex: 1 1 auto; justify-content: center; }
  .photo-viewer .pv-close { top: calc(10px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); }
}

/* =====================================================================
   FREE PAGE (optional "Notes" panel)
   Repeatable free blocks: the platform clones .free-block per host entry,
   each with a title, free text and an OPTIONAL photo. When the host has
   added no blocks (or toggles the Free Page section off) the whole
   .panel-free section is removed and its nav entry disappears with it.
   The .free-media figure collapses via :empty when a block has no photo,
   so a text-only block reads cleanly.
   ===================================================================== */

.free-blocks {
  display: grid;
  gap: clamp(26px, 5vmin, 40px);
  margin-top: 8px;
}

.free-block { margin: 0; text-align: center; }

.free-title {
  margin: 0 0 clamp(12px, 2.6vmin, 18px);
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  line-height: 1.2;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.free-media {
  margin: 0 auto clamp(14px, 3vmin, 20px);
  max-width: 560px;
  background: var(--ivory-2);
  border: 1px solid rgba(177, 138, 51, 0.55);
  outline: 1px solid rgba(177, 138, 51, 0.35);
  outline-offset: 4px;
  border-radius: var(--radius);
  overflow: hidden;
}

/* Text-only block: the engine removes the img, leaving an empty figure. */
.free-media:empty { display: none; }

.free-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.free-media:hover img { transform: scale(1.015); }
html.js .free-media img { cursor: zoom-in; }

.free-content {
  margin: 0 auto;
  max-width: 34em;
  text-align: left;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--ink-soft);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* =====================================================================
   POWERED-BY BRAND LINE (full-width footer div, exact class .powered-by)
   "Powered by Kundangi" — the platform swaps the literal "Kundangi" token
   inside .link-footer at render, and the cockpit's Free Powered By field
   can override the whole line. It is not part of the free page and stays
   visible even when the free page is hidden. Sits full-width between the
   panels and the bottom nav in the JS shell; a plain closing bar at the
   end of the stacked document without JS.
   ===================================================================== */

html:not(.js) .powered-by {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px 16px 24px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(250, 245, 233, 0.55);
}

html.js .powered-by {
  flex: 0 0 auto;
  width: 100%;
  text-align: center;
  padding: 7px 14px 9px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(250, 245, 233, 0.5);
}

.powered-by .link-footer {
  font-family: var(--font-display);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 1.25em;
  color: var(--gold-300);
}

/* =====================================================================
   BRAND FOOTER (placeholder)
   A closing brand line after </main>. No-JS: shown at the end of the
   stacked document. JS shell: hidden where it starts, then main.js tucks
   it into the last existing panel — so it reads as the invitation's
   closing line even when RSVP / Guestbook are stripped by the platform.
   Replace the text with your own brand.
   ===================================================================== */

html:not(.js) .app-footer {
  display: block;
  padding: 26px 18px 42px;
  text-align: center;
}

html.js .app-footer { display: none; }

html.js .panel .app-footer {
  display: block;
  margin-top: clamp(30px, 6vmin, 48px);
  padding-top: 18px;
  border-top: 1px solid rgba(177, 138, 51, 0.35);
  text-align: center;
}

.footer-brand {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.footer-brand-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.35em;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--gold-600);
}