/* ═══════════════════════════════════════════════════════════════════════
   THE PRIVATE LAUNCH — Product Launch Card (Kundangan template)
   Category: Product Launch (Corporate)

   Design language: an elegant envelope-and-card invitation. Warm linen
   paper, a cream card with a gold "liner" border, Fraunces serif display
   type, a wax-seal monogram. Feels like a private letter, not a poster.

   Layout model (progressive enhancement):
   - Default (no JS): normal top-to-bottom page flow, all panels visible.
   - html.js.shell (JS ready + booted OK): 100dvh shell; only the active
     panel scrolls internally.
   - prefers-reduced-motion: entrance + envelope animations off.
   - @media print: light, ink-friendly, one panel per page.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  --paper: #f1ebdd;
  --paper-deep: #e7dfc9;
  --card: #fffdf6;
  --ink: #38301f;
  --ink-soft: rgba(56, 48, 31, 0.78);
  --ink-dim: rgba(56, 48, 31, 0.52);
  --line: rgba(56, 48, 31, 0.14);
  --line-strong: rgba(56, 48, 31, 0.26);
  --gold: #b08d3e;
  --gold-soft: #c9ab63;
  --gold-deep: #8f6f2c;
  --danger: #b3402e;
  --grad: linear-gradient(120deg, #c9ab63 0%, #9a7b33 100%);
  --radius: 18px;
  --radius-lg: 26px;
  --font-display: "Fraunces", "Georgia", "Times New Roman", ui-serif, serif;
  --font-body: "Karla", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --shadow: 0 26px 60px -28px rgba(90, 68, 28, 0.45);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ── Reset & base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  /* subtle linen weave */
  background-image:
    radial-gradient(rgba(120, 96, 50, 0.055) 0.6px, transparent 0.6px),
    radial-gradient(rgba(120, 96, 50, 0.045) 0.6px, transparent 0.6px);
  background-size: 22px 22px, 22px 22px;
  background-position: 0 0, 11px 11px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
svg { display: block; }

[hidden] { display: none !important; }

::selection { background: rgba(176, 141, 62, 0.32); }

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

/* ── Skip link ──────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--card);
  font-weight: 600;
  font-size: 14px;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

/* ── Shell ──────────────────────────────────────────────────────────── */
.stage {
  display: flex;
  flex-direction: column;
  min-height: 100vh;            /* fallback */
  min-height: 100dvh;
}

.shell-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: calc(13px + env(safe-area-inset-top, 0px)) clamp(16px, 4vw, 32px) 13px;
  border-bottom: 1px solid var(--line);
  background: rgba(241, 235, 221, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  position: relative;
  z-index: 5;
}

.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; font-size: 15.5px; letter-spacing: 0.01em; }
.brand-mark { color: var(--gold-deep); display: inline-flex; }

.head-actions { display: flex; align-items: center; gap: 12px; }
.head-chip {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
}

.shell-viewport { flex: 1 1 auto; min-height: 0; }

.shell-nav {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  padding: 10px clamp(12px, 3vw, 24px) calc(10px + var(--safe-b));
  border-top: 1px solid var(--line);
  background: rgba(241, 235, 221, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  position: relative;
  z-index: 5;
}

.nav-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 72px;
  padding: 8px 12px 6px;
  border-radius: 14px;
  color: var(--ink-dim);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-item:hover { color: var(--ink-soft); background: rgba(56, 48, 31, 0.06); }
.nav-item.is-current { color: var(--ink); font-weight: 600; }
.nav-item.is-current .nav-ico { stroke: var(--gold-deep); }
.nav-item.is-orphan { display: none; }

/* Orphaned CTAs (data-scroll-to pointing at a panel the host removed,
   e.g. the gallery or RSVP when switched off) are dropped too. */
.is-orphan { display: none !important; }

/* ── Panels: default (no JS) = normal flow ─────────────────────────── */
.panel { position: relative; }

html.no-js .panel + .panel { border-top: 1px solid var(--line); }

/* ── Panels: JS shell = one active scrolling panel ─────────────────── */
html.js.shell .stage { height: 100vh; height: 100dvh; overflow: hidden; }
html.js.shell .shell-viewport { overflow: hidden; }
html.js.shell .panel { display: none; }
html.js.shell .panel.is-active {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 48, 31, 0.3) transparent;
}
html.js.shell .panel.is-active::-webkit-scrollbar { width: 10px; }
html.js.shell .panel.is-active::-webkit-scrollbar-thumb {
  background: rgba(56, 48, 31, 0.25);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: content-box;
}

.panel-inner {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(28px, 6vh, 56px) clamp(18px, 4vw, 32px) calc(clamp(36px, 7vh, 72px) + 24px);
}
html.js.shell .panel.is-active .panel-inner { padding-bottom: calc(clamp(36px, 7vh, 72px) + 24px); }

/* ── The card ───────────────────────────────────────────────────────── */
.card {
  position: relative;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(28px, 6vw, 54px) clamp(24px, 6vw, 56px);
  text-align: center;
}
/* gold liner border, like the inner lining of an envelope */
.card::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(176, 141, 62, 0.45);
  border-radius: calc(var(--radius-lg) - 9px);
  pointer-events: none;
}

/* ── Panel 1 · cover ────────────────────────────────────────────────── */
.cover-stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 560px;
  padding: clamp(36px, 7vh, 72px) clamp(18px, 4vw, 32px);
}

/* Optional photo backdrop behind the envelope & card (CSS cream-washes it
   so the stationery + ink text stay readable). Clicking the photo opens the
   full-screen viewer — the cream wash is applied to the block, never to the
   file itself, so the original photo shows true in the viewer. Swap the src
   or delete this block to hide it. */
.cover-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.cover-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
html.js .cover-photo img { cursor: zoom-in; }
html.js .cover-photo img:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: -6px;
}
.cover-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 110% at 50% 28%, rgba(241, 235, 221, 0.93) 0%, rgba(241, 235, 221, 0.8) 48%, rgba(56, 48, 31, 0.42) 100%);
}

/* envelope silhouette behind the card */
.cover-envelope {
  position: absolute;
  left: 50%;
  top: calc(50% + 10px);
  transform: translate(-50%, -50%);
  width: min(96%, 600px);
  height: min(78%, 480px);
  border-radius: 22px;
  background: var(--paper-deep);
  box-shadow: 0 30px 70px -34px rgba(90, 68, 28, 0.55);
}
.cover-envelope::before {   /* flap */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(165deg, #efe8d6 0%, #e3d9bf 100%);
  clip-path: polygon(0 0, 100% 0, 50% 46%);
}
.cover-envelope::after {    /* flap fold line */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 46%;
  height: 1px;
  background: rgba(56, 48, 31, 0.16);
}

.card-cover { z-index: 1; }

/* Gentle trigger for the optional cover backdrop photo. The photo sits
   mostly behind the envelope & card, so this chip makes the "click to view
   full size" feature discoverable. It opens the same full-screen viewer;
   main.js drops it automatically if the .cover-photo block is deleted. */
html.js .cover-photo-open {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 3vh, 26px);
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(176, 141, 62, 0.55);
  background: rgba(253, 248, 234, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--gold-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 10px 24px -14px rgba(90, 68, 28, 0.6);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
html.js .cover-photo-open svg { width: 14px; height: 14px; }
html.js .cover-photo-open:hover {
  transform: translateX(-50%) translateY(-2px);
  background: #fffdf6;
  color: var(--gold);
}
/* Without JS there is no viewer — the chip would be a dead button. */
html:not(.js) .cover-photo-open { display: none; }

.seal {
  width: 58px;
  height: 58px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: #fdf8ea;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.25), transparent 40%),
    var(--grad);
  box-shadow: 0 10px 22px -8px rgba(143, 111, 44, 0.7), inset 0 0 0 3px rgba(255, 253, 246, 0.35);
}

.card-kicker {
  font-size: 12.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 700;
  margin-bottom: 18px;
}

.card-title { margin-bottom: 20px; }
.card-title-main {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 6.5vw, 2.9rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.card-title-product {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.6rem, 9vw, 4rem);
  line-height: 1;
  color: var(--gold-deep);
}

.flourish { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 4px 0 22px; }
.flourish-line { width: 64px; height: 1px; background: var(--line-strong); }
.flourish-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

.card-date { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; color: var(--ink); }
.card-sub { color: var(--ink-soft); font-size: 14.5px; margin: 10px auto 26px; max-width: 340px; }
.card-meta { color: var(--ink-dim); font-size: 13px; margin-top: 18px; }

.seat-chip {
  margin-top: 16px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* ── Panel 2 · the letter ───────────────────────────────────────────── */
.card-letter { text-align: left; }
.card-letter-greeting {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 4.5vw, 1.7rem);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 16px;
}
.card-letter-body { color: var(--ink-soft); font-size: 15.5px; }
.card-letter-body p { margin-bottom: 14px; }
.card-letter-body strong { color: var(--ink); font-weight: 600; }
.card-letter-body .product-name { color: var(--gold-deep); font-style: italic; }

.card-details {
  margin: 26px 0 24px;
  border-top: 1px solid var(--line);
}
.detail-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line);
}
.detail-label {
  flex: 0 0 auto;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 700;
  padding-top: 3px;
}
.detail-value { font-size: 15px; font-weight: 600; color: var(--ink); text-align: right; }

.card-letter-close {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--ink);
  margin-bottom: 10px;
}
.card-signature { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 26px; }
.card-signature .brand-name { color: var(--gold-deep); font-style: italic; }

.card-head { margin-bottom: 24px; }
.card-eyebrow {
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 700;
  margin-bottom: 8px;
}
.card-title-sm {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  font-weight: 500;
  line-height: 1.15;
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn:disabled { opacity: 0.6; cursor: default; }

.btn-primary {
  background: var(--grad);
  color: #fdf8ea;
  box-shadow: 0 14px 30px -12px rgba(143, 111, 44, 0.65);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(143, 111, 44, 0.75); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink-soft);
  font-size: 13.5px;
  padding: 9px 18px;
}
.btn-ghost:hover { background: rgba(56, 48, 31, 0.06); color: var(--ink); }

.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-block { width: min(100%, 400px); }

/* Stacked card CTAs (e.g. the letter's "See the highlights" + "Confirm
   your seat"). */
.card-ctas {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.card-letter .card-ctas { margin-top: 0; } /* the signature above already breathes */

/* ── RSVP form (light card) ─────────────────────────────────────────── */
#rsvp-form { text-align: left; }

.field { margin-bottom: 20px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

label, .field-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 8px;
}
.opt { color: var(--ink-dim); font-weight: 400; font-size: 12px; }

.control {
  width: 100%;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: #fffdf4;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.control::placeholder { color: var(--ink-dim); }
.control:hover { border-color: rgba(56, 48, 31, 0.4); }
.control:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(176, 141, 62, 0.25);
  background: #fff;
}
textarea.control { resize: vertical; min-height: 64px; }

select.control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b5d3e' 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 14px center;
  padding-right: 40px;
}
select.control option { background: #fffdf4; color: var(--ink); }

.control-narrow { max-width: 140px; }

.error { display: none; color: var(--danger); font-size: 13px; margin-top: 6px; line-height: 1.4; }
.error:not(:empty) { display: block; }

.field-hint { font-size: 13px; color: var(--ink-dim); margin: -6px 0 20px; }

/* attending segmented switch (JS enhancement; native select otherwise) */
.attending-switch { display: none; grid-template-columns: 1fr 1fr; gap: 10px; }
.switch-opt {
  padding: 13px 10px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-soft);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.switch-opt:hover { background: rgba(56, 48, 31, 0.06); }
.switch-opt.is-on {
  background: var(--grad);
  border-color: transparent;
  color: #fdf8ea;
  box-shadow: 0 10px 22px -10px rgba(143, 111, 44, 0.7);
}

.field-note { font-size: 13px; color: var(--ink-dim); margin-top: 8px; }
.field-note-no { display: none; }
.rsvp-form.is-not-attending .field-note-no { display: block; }
.rsvp-form.is-not-attending .guests-field { opacity: 0.55; }

html.js.shell .attending-native { display: none; }
html.js.shell .attending-switch { display: grid; }

.guests-field { max-width: 360px; }

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

/* .loading — visibility is managed by the platform (rsvp_user.js) */
.loading {
  font-size: 13.5px;
  color: var(--ink-dim);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(56, 48, 31, 0.18);
  border-top-color: var(--gold-deep);
  animation: spin 0.8s linear infinite;
}

/* thank-you state (platform swaps the form content) */
.rsvp-wrap .thank-you-message { text-align: center; padding: 20px 8px 12px; }
.rsvp-wrap .thank-you-message h3 { font-family: var(--font-display); font-size: 1.7rem; margin-bottom: 10px; }
.rsvp-wrap .thank-you-message p { color: var(--ink-soft); margin: 6px 0; }
.rsvp-wrap .thank-you-message small { color: var(--ink-dim); }

/* RSVP deadline (host-set countdown rendered by rsvp_user.js) */
.rsvp-deadline {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-display);
}
.rsvp-deadline-label { font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); font-weight: 700; }
.rsvp-deadline-digits { font-size: 1.35rem; font-weight: 600; color: var(--gold-deep); font-variant-numeric: tabular-nums; }
.rsvp-deadline-digits .rsvp-unit { font-size: 0.8em; color: var(--ink-dim); margin: 0 8px 0 2px; }
.rsvp-deadline-digits .rsvp-unit:last-child { margin-right: 0; }

/* ── Guestbook (mount point + injected markup styling) ─────────────── */
.guestbook-body { text-align: left; }

.guestbook-section .form-group { margin-bottom: 18px; }
.guestbook-section .form-group label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.guestbook-section .form-control {
  width: 100%;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: #fffdf4;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}
.guestbook-section .form-control::placeholder { color: var(--ink-dim); }
.guestbook-section .form-control:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(176, 141, 62, 0.25);
  background: #fff;
}
.guestbook-section textarea.form-control { resize: vertical; min-height: 90px; }

/* injected submit button utilities (scoped so we don't fight platform CSS) */
.guestbook-section .d-flex { display: flex; justify-content: center; }
.guestbook-section .d-inline-flex { display: inline-flex; align-items: center; }
.guestbook-section .mx-auto { margin-left: auto; margin-right: auto; }
.guestbook-section .mt-2 { margin-top: 0.5rem; }
.guestbook-section .px-3 { padding-left: 1rem; padding-right: 1rem; }
.guestbook-section .btn.badge-pill {
  background: var(--grad);
  color: #fdf8ea;
  border: 0;
  border-radius: 999px;
  padding: 13px 22px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 12px 26px -12px rgba(143, 111, 44, 0.65);
}
.guestbook-section .btn.badge-pill:hover { transform: translateY(-2px); }
.guestbook-section .ph { vertical-align: -0.125em; margin-right: 6px; }

.guestbook-section .guestbook-chapta {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  margin: 0 auto 18px;
  max-width: 304px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.guestbook-section .loading-guestbook { text-align: center; color: var(--ink-dim); font-size: 13.5px; padding: 8px; }

.guestbook-section #comments-container {
  border-top: 1px solid var(--line) !important;
  margin-top: 24px !important;
  max-height: none !important;
}
.guestbook-section .guestbook-entry {
  padding: 18px 2px;
  border-bottom: 1px solid var(--line);
}
.guestbook-section .guestbook-entry:last-child { border-bottom: 0; }
.guestbook-section .guestbook-entry h5 { margin: 0 0 4px; font-size: 15.5px; font-weight: 700; }
.guestbook-section .guestbook-entry p { margin: 0 0 6px; color: var(--ink-soft); overflow-wrap: anywhere; }
.guestbook-section .guestbook-entry small { color: var(--ink-dim); font-size: 12px; }

.guestbook-section .more-guestbook-wrap { text-align: center; margin-top: 18px; }
.guestbook-section #load-more {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 10px 24px;
  font-size: 14px;
  cursor: pointer;
}
.guestbook-section #load-more:hover { background: rgba(56, 48, 31, 0.06); color: var(--ink); }

.guestbook-section .thank-you-message { text-align: center; padding: 18px 8px; }
.guestbook-section .thank-you-message h4 { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 8px; }
.guestbook-section .thank-you-message p { color: var(--ink-soft); margin: 0; }

.text-center { text-align: center; }

/* ── Panel 3 · Highlights (optional photo gallery) ──────────────────
   .gallery-grid of .gallery-item photos. Every slot shows a visible
   placeholder from assets/img/ until the host swaps in a real photo.
   The gold hairline matches the card's "liner" border language. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.gallery-item { margin: 0; }
.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  padding: 4px;
  background: #fdf8ea;
  border: 1px solid rgba(176, 141, 62, 0.45);
  border-radius: 10px;
  box-shadow: 0 12px 26px -16px rgba(90, 68, 28, 0.55);
}
.gallery-item figcaption {
  margin-top: 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  color: var(--gold-deep);
}
/* A lone photo reads full-width instead of half the grid. */
.gallery-grid .gallery-item:only-child { grid-column: 1 / -1; }
.gallery-grid .gallery-item:only-child img { aspect-ratio: 16 / 9; }

/* ── Panel 2 · official flyer / banner (optional) ────────────────────
   A wide framed image slot in the letter for hosts who already have a
   designed flyer or poster for the launch — display it so guests can
   confirm they’re in the right place with the correct link. Same gold
   hairline + cream mat language as the gallery photos; clicking it opens
   the same full-screen viewer. Delete the block to hide the feature. */
.banner-flyer {
  margin: clamp(24px, 4.5vmin, 34px) auto 0;
  max-width: 620px;
  text-align: center;
}
.banner-flyer img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 3;
  object-fit: cover;
  padding: 4px;
  background: #fdf8ea;
  border: 1px solid rgba(176, 141, 62, 0.45);
  border-radius: 10px;
  box-shadow: 0 12px 26px -16px rgba(90, 68, 28, 0.55);
}
.banner-flyer figcaption {
  margin-top: 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 15px;
  color: var(--gold-deep);
}
/* Small “view full size” badge on hover / keyboard focus — same as the
   gallery photos, so the flyer reads as clickable too. */
html.js .banner-flyer { position: relative; }
html.js .banner-flyer::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(253, 248, 234, 0.95)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f6f2c' 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(176, 141, 62, 0.45);
  box-shadow: 0 4px 12px -4px rgba(90, 68, 28, 0.4);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
html.js .banner-flyer:hover::after,
html.js .banner-flyer:focus-within::after {
  opacity: 1;
  transform: none;
}

/* ── Brand footer (placeholder) ──────────────────────────────────────
   No-JS: a plain closing line at the end of the stacked document. JS:
   hidden where it starts (after </main>), then initFooter() tucks it into
   the last existing panel so it reads as the invitation’s closing line —
   even when RSVP / Guestbook are stripped. */
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 var(--line);
}
.footer-brand {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.footer-brand-name {
  font-family: var(--font-display);
  font-size: 1.35em;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--gold-deep);
}

/* ── Full-width powered-by brand line (class .powered-by) ─────────
   Static platform footer strip; never bound to an editor morph. A flex
   strip directly above the bottom nav in the JS shell; a plain closing
   bar at the end of the stacked document without JS. */
.powered-by {
  flex: 0 0 auto;
  width: 100%;
  text-align: center;
  padding: 8px 16px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: rgba(241, 235, 221, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.powered-by p { margin: 0; }
.powered-by a { color: inherit; text-decoration: none; }
.powered-by a:hover { color: var(--gold-deep); }
html:not(.js) .powered-by { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ── Photo viewer (lightbox) ─────────────────────────────────────────
   Click any gallery photo to view it full-screen. The viewer markup is
   built by main.js only when photo slots exist, so hiding the gallery
   removes the viewer too — no orphaned UI, no platform contract. */
html.js .gallery-item img { cursor: zoom-in; }

/* 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 { position: relative; }
html.js .gallery-item::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(253, 248, 234, 0.95)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f6f2c' 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(176, 141, 62, 0.45);
  box-shadow: 0 4px 12px -4px rgba(90, 68, 28, 0.4);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
html.js .gallery-item:hover::after,
html.js .gallery-item:focus-within::after {
  opacity: 1;
  transform: none;
}

/* ── Panel 3 · optional film feature (video URL embed) ───────────────
   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 — fast, and consent-friendly. Delete the
   .film-card block to hide the feature; an empty URL shows a gentle
   hint instead of a dead button. */
.film-card {
  margin-top: clamp(30px, 5.5vmin, 44px);
  text-align: center;
}
.film-label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 17px;
  color: var(--gold-deep);
  margin-bottom: 4px;
}
.film-frame {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 16px auto 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  background: var(--paper-deep); /* mat behind the poster / while loading */
  border: 1px solid rgba(176, 141, 62, 0.45);
  box-shadow: 0 16px 34px -24px rgba(90, 68, 28, 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: #fdf8ea;
  background: radial-gradient(circle at 32% 28%, #d9bd7d, var(--gold-deep) 62%, #7c6226);
  border: 1px solid rgba(253, 248, 234, 0.6);
  box-shadow: 0 12px 28px -12px rgba(90, 68, 28, 0.7), 0 0 0 0 rgba(176, 141, 62, 0.4);
  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); outline-offset: 3px; }
.film-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(56, 48, 31, 0.62);
  color: #fdf8ea;
  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: #000;
}
.film-note {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 18px;
  color: var(--ink-dim);
  font-size: 13.5px;
  font-style: italic;
  text-align: center;
  background: var(--paper-deep);
}
.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(--gold-deep);
  border-bottom: 1px solid rgba(176, 141, 62, 0.5);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s 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(90, 68, 28, 0.7), 0 0 0 0 rgba(176, 141, 62, 0.4); }
  50% { box-shadow: 0 12px 28px -12px rgba(90, 68, 28, 0.7), 0 0 0 14px rgba(176, 141, 62, 0); }
}

/* ── Panel 6 · free page (optional) ───────────────────────────────
   Repeatable blocks of free title + free text + an OPTIONAL photo each
   (the editor clones .free-block per block). Leaving every block empty
   makes the platform remove this whole panel at render, so the bottom
   nav tab drops too (main.js orphan logic). Clicking a free photo opens
   the same full-screen viewer; the gold hairline matches the card's
   "liner" border language. */
.free-blocks {
  margin-top: 26px;
  display: grid;
  gap: 18px;
}
.free-block {
  text-align: left;
  padding: clamp(18px, 3.5vw, 24px);
  border: 1px solid rgba(176, 141, 62, 0.35);
  border-radius: 16px;
  background: #fdf8ea;
}
.free-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3.5vw, 1.35rem);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
}
.free-content {
  color: var(--ink-soft);
  font-size: 15px;
  white-space: pre-line; /* keep the host's line breaks from the editor */
}
.free-content p { margin-bottom: 12px; }
.free-content p:last-child { margin-bottom: 0; }
.free-figure { margin: 18px 0 0; }
.free-figure .free-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  padding: 4px;
  background: #fdf8ea;
  border: 1px solid rgba(176, 141, 62, 0.45);
  border-radius: 10px;
  box-shadow: 0 12px 26px -16px rgba(90, 68, 28, 0.55);
}
html.js .free-figure .free-img { cursor: zoom-in; }
.free-figure .free-cap {
  margin-top: 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  color: var(--gold-deep);
}
/* small "view full size" badge on hover / keyboard focus — same as the
   gallery photos, so a free-page photo reads as clickable too. */
html.js .free-figure { position: relative; }
html.js .free-figure::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(253, 248, 234, 0.95)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f6f2c' 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(176, 141, 62, 0.45);
  box-shadow: 0 4px 12px -4px rgba(90, 68, 28, 0.4);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
html.js .free-figure:hover::after,
html.js .free-figure: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(45, 37, 23, 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(--card);
  border-radius: 12px;
  background: var(--paper); /* mat while loading / if the file is missing */
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.75);
}
.photo-viewer figcaption {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 17px;
  color: #e9d5a3;
}
.photo-viewer .pv-unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(72vw, 520px);
  height: min(46vh, 360px);
  padding: 20px;
  border: 6px solid var(--card);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 14px;
  font-style: italic;
  text-align: center;
}

.pv-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(253, 248, 234, 0.5);
  background: rgba(253, 248, 234, 0.95);
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.pv-btn:hover { transform: scale(1.06); background: #fff; }
.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-zoom  { bottom: calc(14px + env(safe-area-inset-bottom)); right: calc(14px + env(safe-area-inset-right)); }
.pv-prev:hover, .pv-next:hover { transform: translateY(-50%) scale(1.06); }
.pv-zoom svg { width: 20px; height: 20px; }
.photo-viewer :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Zoom: click the photo or the magnifier button to inspect it at full
   size — the figure becomes a scrollable pane and the arrows scroll it
   instead of switching photos. Clicking the photo again unzooms. */
html.js .photo-viewer img { cursor: zoom-in; }
.photo-viewer.is-zoomed .pv-prev,
.photo-viewer.is-zoomed .pv-next,
.photo-viewer.is-zoomed figcaption { display: none; }
.photo-viewer.is-zoomed figure {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  overflow: auto;
  margin: 0;
  padding: 18px;
  -webkit-overflow-scrolling: touch;
}
.photo-viewer.is-zoomed img {
  max-width: none;
  max-height: none;
  min-width: 100%;
  width: auto;
  height: auto;
  border-width: 4px;
  cursor: zoom-out;
}

/* 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)); }
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .card { padding: clamp(24px, 7vw, 40px) clamp(20px, 6vw, 32px); }
  .field-row { grid-template-columns: 1fr; }
  .nav-item { min-width: 56px; padding: 8px 8px 6px; }
  .head-chip { display: none; }
}

/* Tight bottom nav on small phones: drop the icons so the text labels
   (Cover / Letter / Highlights / RSVP / Guestbook) always fit on one
   line and stay tappable. */
@media (max-width: 430px) {
  .nav-item { min-width: 0; flex: 1 1 0; padding: 10px 2px 8px; font-size: 10px; letter-spacing: 0; }
  .nav-label { white-space: nowrap; }
  .nav-ico { display: none; }
}

@media (max-width: 400px) {
  .attending-switch { grid-template-columns: 1fr; }
  .detail-row { flex-direction: column; gap: 2px; }
  .detail-value { text-align: left; }
  .gallery-grid { grid-template-columns: 1fr; } /* big, readable photos on tiny screens */
}

/* ── Motion preferences ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .btn-primary:hover { transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes card-in {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  /* The cover envelope is centered with translate(-50%, -50%), so its
     entrance keyframes must keep that offset or the silhouette jumps to
     the stage centre (top-left corner there) and gets clipped. */
  @keyframes envelope-in {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)) scale(0.985); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
  /* gentle entrance for the active card (shell only) */
  html.js.shell .panel.is-active .card { animation: card-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
  html.js.shell .panel.is-active .cover-envelope { animation: envelope-in 0.5s 0.06s cubic-bezier(0.22, 1, 0.36, 1) both; }
  html.js.shell .shell-viewport { scroll-behavior: smooth; }
}

/* ── Print: light, ink-friendly, one card per page ─────────────────── */
@media print {
  @page { margin: 14mm 12mm; }

  html, body { height: auto; background: #fff !important; }

  .skip-link, .shell-head, .shell-nav, .powered-by, .cover-envelope, .cover-photo, .cover-photo-open, .photo-viewer, .seat-chip, .loading { display: none !important; }

  .stage { display: block !important; min-height: 0 !important; height: auto !important; overflow: visible !important; }
  .shell-viewport { overflow: visible !important; }

  html.js.shell .panel { display: block !important; height: auto !important; overflow: visible !important; }
  html.js.shell .panel.is-active { height: auto !important; overflow: visible !important; }
  .panel { break-after: page; }
  .panel:last-child { break-after: auto; }

  .panel-inner { max-width: 100%; padding: 0; }

  body, .card, .control, .switch-opt, .guestbook-section .form-control {
    background: #fff !important;
    color: #111 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .card { border: 1px solid #d9d9d9 !important; padding: 18mm; break-inside: avoid; }
  .card::before { border-color: #c9b98a !important; }

  .cover-stage { min-height: 0 !important; padding: 0 !important; display: block !important; }

  .card-title-product, .seal, .brand-mark, .card-letter-body .product-name,
  .card-signature .brand-name, .rsvp-deadline-digits { color: #5c4a1e !important; }
  .seal { background: #5c4a1e !important; color: #fff !important; box-shadow: none !important; }

  .card-sub, .card-meta, .card-letter-body, .card-signature, .field-hint, .field-note,
  .opt, .guestbook-section .guestbook-entry p, .guestbook-section .guestbook-entry small {
    color: #333 !important;
  }
  .card-eyebrow, .card-kicker { color: #5c4a1e !important; }
  .detail-label { color: #555 !important; }

  select.control { background-image: none !important; padding-right: 15px !important; }

  .rsvp-actions, .card-details, .guestbook-section .guestbook-form { break-inside: avoid; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item img, .cover-photo img, .banner-flyer img, .film-open img {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .gallery-item::after, .banner-flyer::after { display: none !important; }
  .film-frame iframe, .film-note { display: none !important; } /* a playing video can’t print — the poster prints instead */
}


/* ── Guestbook (platform-injected form + message list) ─────────────── */
/* Complements the existing .guestbook-section rules with the injected
   markup's own selectors; the form mounts inside the template's .card,
   so no extra card shell is added here. */
.guestbook-body .guestbook-form { text-align: left; }

.guestbook-body #guestbookForm { margin: 0; }

.guestbook-body #guestbookForm .form-group { margin-bottom: 18px; }
.guestbook-body #guestbookForm .form-group label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.guestbook-body #guestbookForm .form-control {
  width: 100%;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: #fffdf4;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}
.guestbook-body #guestbookForm .form-control::placeholder { color: var(--ink-dim); }
.guestbook-body #guestbookForm .form-control:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(176, 141, 62, 0.25);
  background: #fff;
}
.guestbook-body #guestbookForm .error {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--danger);
}

.guestbook-body #guestbookForm .guestbook-chapta {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  margin: 0 auto 18px;
  max-width: 304px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.guestbook-body .loading-guestbook {
  text-align: center;
  color: var(--ink-dim);
  font-size: 13.5px;
  padding: 8px;
}

/* !important beats Bootstrap .bg-kundangan / .text-white / .px-3 */
.guestbook-body #guestbookForm button[type="submit"] {
  background: var(--grad) !important;
  color: #fdf8ea !important;
  border: 0;
  border-radius: 999px;
  padding: 13px 22px !important;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 12px 26px -12px rgba(143, 111, 44, 0.65);
}
.guestbook-body #guestbookForm button[type="submit"]:hover { transform: translateY(-2px); }

#comments-container.guestbook-wrap {
  border-top: 1px solid var(--line) !important;
  margin-top: 24px !important;
  max-height: none !important;
  padding-top: 18px;
}

.guestbook-entry { padding: 18px 2px; border-bottom: 1px solid var(--line); text-align: left; }
.guestbook-entry:last-child { border-bottom: 0; }
.guestbook-entry h5 { margin: 0 0 4px; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.guestbook-entry p { margin: 0 0 6px; color: var(--ink-soft); overflow-wrap: anywhere; }
.guestbook-entry small { color: var(--ink-dim); font-size: 12px; }

.more-guestbook-wrap { text-align: center; margin-top: 18px; }
#load-more {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 10px 24px;
  font-size: 14px;
  cursor: pointer;
}
#load-more:hover { background: rgba(56, 48, 31, 0.06); color: var(--ink); }