/* ═══════════════════════════════════════════════════════════════════════
   wedding-black-tie-card-ivory-engraved — "Ivory Engraved" invitation card
   Ivory paper + antique gold · engraved serif · Cormorant Garamond + Jost
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #e3d9c8;              /* warm desk tone */
  --bg-deep: #d6cbb6;
  --card: #fbf8f1;            /* ivory paper */
  --card-edge: #f4efe3;
  --ink: #221d16;             /* warm near-black */
  --ink-soft: #3d3629;
  --muted: #7a7162;
  --gold: #a9844f;            /* antique gold */
  --gold-bright: #c9a86a;
  --gold-deep: #7d5f33;
  --line: rgba(34, 29, 22, 0.16);
  --line-gold: rgba(169, 132, 79, 0.5);
  --danger: #a3432f;
  --shadow: 0 24px 60px rgba(60, 45, 25, 0.28);
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-ui: "Jost", ui-sans-serif, system-ui, sans-serif;
}

/* ── base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 110% 70% at 50% -14%, rgba(255, 255, 255, 0.5), transparent 55%),
    radial-gradient(ellipse 90% 65% at 50% 118%, rgba(125, 95, 51, 0.1), transparent 62%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
[hidden] { display: none !important; }

::selection { background: var(--gold); color: #fff; }

/* ── single-viewport shell (JS on) ────────────────────────────────────── */
html.js .app {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  overflow: hidden;
}

html.js .panel { display: none; }
html.js .panels {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
html.js .panel.is-active {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* hero panels (the card) centre their content when there's room */
html.js .panel.hero-panel.is-active { display: flex; }
html.js .panel.hero-panel.is-active > * { margin: auto; }

/* ── no-JS fallback: everything stacked, page scrolls ─────────────────── */
html:not(.js) .app { display: block; height: auto; }
html:not(.js) .panel { display: block; }
html:not(.js) .tabs, html:not(.js) .tabs-wrap { display: none; }
html:not(.js) .panel.is-active { overflow: visible; }

/* ── masthead ─────────────────────────────────────────────────────────── */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px clamp(14px, 3vw, 28px);
  background: rgba(251, 248, 241, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  border-bottom: 1px solid var(--line-gold);
  box-shadow: 0 2px 14px rgba(60, 45, 25, 0.12);
  position: relative;
  z-index: 5;
}

.masthead__brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.masthead__mark { display: inline-flex; flex: none; opacity: 0.95; }
.masthead__text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.masthead__top { font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-deep); }
.masthead__name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.masthead__name i { color: var(--gold-deep); font-style: italic; padding: 0 2px; }

.masthead__actions { display: flex; align-items: center; gap: 8px; flex: none; }

.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-gold);
  background: rgba(169, 132, 79, 0.06);
  color: var(--ink);
  font: 500 12.5px var(--font-ui);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.chip-btn:hover { background: rgba(169, 132, 79, 0.14); border-color: var(--gold); }
.chip-btn:active { transform: translateY(1px); }
.chip-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.chip-btn.is-done { border-color: #7fae8a; color: #2f5c3a; }

/* ── tabs (wrapped: narrow screens get ‹ › scroll arrows) ──────────────── */
.tabs-wrap {
  display: flex;
  align-items: stretch;
  min-width: 0;              /* grid item: let the rail scroll instead of blowing up the layout width */
  background: rgba(251, 248, 241, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(34, 29, 22, 0.08);
}
.tabs {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 6px;
  padding: 8px clamp(14px, 3vw, 28px);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

/* prev/next arrows — shown only while the tab strip overflows */
.tabs-arrow {
  flex: none;
  align-self: stretch;
  width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--gold-deep);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.tabs-arrow:hover { background: rgba(169, 132, 79, 0.12); color: var(--ink); }
.tabs-arrow:active { background: rgba(169, 132, 79, 0.2); }
.tabs-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.tabs-arrow:disabled { color: rgba(125, 95, 51, 0.25); cursor: default; }
.tabs-arrow:disabled:hover { background: transparent; color: rgba(125, 95, 51, 0.25); }

/* The ‹ › steppers live in .tabs-wrap flanking the strip on phones;
   desktop keeps the plain scrollable bar. */
.tabs-step { display: none; border-radius: 50%; width: 36px; align-self: center; height: 36px; margin: 0 2px; font-size: 26px; }
@media (max-width: 700px) {
  .tabs-step { display: inline-flex; }
  .tabs-step[disabled] { opacity: .45; pointer-events: none; }
}

.tab {
  appearance: none;
  flex: none;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font: 500 12.5px var(--font-ui);
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.tab:hover { color: var(--ink); }
.tab.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  font-weight: 600;
}
.tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── panels & inner ───────────────────────────────────────────────────── */
.panels { min-width: 0; }

.panel-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(20px, 4vh, 40px) clamp(16px, 4vw, 32px) 56px;
}

.section-head { margin-bottom: 24px; }
.kicker {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.section-head h2 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(28px, 4.6vw, 40px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: 0.005em;
}
.lede { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 52ch; }
.lede strong { color: var(--gold-deep); font-weight: 500; }

/* ── the invitation card ──────────────────────────────────────────────── */
.card {
  position: relative;
  max-width: 660px;
  width: 100%;
  margin: auto;
  padding: clamp(30px, 5.5vh, 54px) clamp(24px, 5vw, 56px) clamp(26px, 4.5vh, 42px);
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(255, 255, 255, 0.85), transparent 55%),
    repeating-linear-gradient(0deg, rgba(125, 95, 51, 0.012) 0 1px, transparent 1px 3px),
    var(--card);
  border: 1px solid var(--line-gold);
  box-shadow: var(--shadow);
  color: var(--ink);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vh, 16px);
}
/* fine inner hairline — the "engraved plate" ring */
.card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(169, 132, 79, 0.4);
  pointer-events: none;
}

html.js:not(.no-motion) .card { animation: card-rise 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@keyframes card-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* corner flourishes (fine "engraved" brackets) */
.card__corner {
  position: absolute;
  width: 15px;
  height: 15px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.9;
}
.card__corner::before, .card__corner::after {
  content: "";
  position: absolute;
  background: var(--gold);
}
.card__corner::before { width: 15px; height: 1px; }
.card__corner::after  { width: 1px; height: 15px; }
.card__corner--tl { top: 18px; left: 18px; }
.card__corner--tr { top: 18px; right: 18px; }
.card__corner--bl { bottom: 18px; left: 18px; }
.card__corner--br { bottom: 18px; right: 18px; }
.card__corner--tl::before, .card__corner--tl::after { left: 0; top: 0; }
.card__corner--tr::before, .card__corner--tr::after { right: 0; top: 0; }
.card__corner--bl::before, .card__corner--bl::after { left: 0; bottom: 0; }
.card__corner--br::before, .card__corner--br::after { right: 0; bottom: 0; }

.card > * { position: relative; z-index: 1; }

.card__greeting {
  margin: 0 0 2px;
  padding: 6px 16px;
  border: 1px dashed rgba(169, 132, 79, 0.65);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--gold-deep);
  background: rgba(169, 132, 79, 0.07);
}
.card__greeting b { font-weight: 600; color: var(--ink); }

.card__seal { margin: 2px 0 0; }

.card__hosts {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(15px, 2.6vw, 19px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.card__with {
  display: inline-block;
  font-style: italic;
  font-size: 0.78em;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--muted);
  padding: 2px 0;
}

.card__request {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(14px, 2.4vw, 17px);
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.card__names {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.12em;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 7.4vw, 3.6rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ink);
}
.honoree + .honoree::before { content: " & "; color: var(--gold-deep); font-style: italic; letter-spacing: 0.04em; }

.card__amp {
  display: inline-block;
  font-style: italic;
  font-weight: 500;
  font-size: 0.58em;
  line-height: 1;
  color: var(--gold-deep);
  padding: 0 0.35em;
  transform: translateY(-0.08em);
}

.card__ornament {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(300px, 78%);
  color: var(--gold);
}
.card__ornament span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.card__ornament i { font-style: normal; font-size: 8px; }

.card__date {
  margin: 0;
  font-size: clamp(13px, 2.3vw, 16px);
  line-height: 1.7;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.card__date em {
  display: block;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.card__place {
  margin: 0;
  font-size: clamp(12.5px, 2.1vw, 14.5px);
  line-height: 1.65;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.card__place .card__place-note { color: var(--muted); }

.card__dress {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(260px, 74%);
  margin: 2px 0;
}
.card__dress span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.card__dress p {
  margin: 0;
  padding: 6px 18px;
  border: 1px solid var(--line-gold);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em; /* optically re-centre the tracked caps */
  text-transform: uppercase;
  color: var(--gold-deep);
  background: rgba(169, 132, 79, 0.06);
  white-space: nowrap;
}

.card__reply {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(13px, 2.2vw, 15.5px);
  line-height: 1.6;
  color: var(--muted);
}

/* twin round "locket" portraits on the card, one per honoree, placed
   above the names (optional — delete the .card__photos div in index.html
   to hide them entirely) */
.card__photos {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(20px, 4.5vw, 34px);
  margin: 4px 0 0;
}
.card__photo { margin: 0; }
.card__photo img {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--card);
  box-shadow: 0 0 0 2px var(--gold), 0 8px 20px rgba(60, 45, 25, 0.28);
  background: var(--card);
  cursor: zoom-in;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card__photo img:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--gold-bright), 0 12px 26px rgba(60, 45, 25, 0.32); }
.card__photo img:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.card__photo figcaption {
  margin-top: 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: var(--gold-deep);
}

/* ── reveal-on-scroll (gated: html.no-motion / reduced-motion disable) ── */
[data-reveal] { opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease, transform 0.6s ease; }
html.js .panel.is-active [data-reveal].is-visible,
html.no-motion [data-reveal],
html:not(.js) [data-reveal] { opacity: 1; transform: none; }

/* ── countdown tiles (ceremony) ───────────────────────────────────────── */
.countdown-tiles {
  margin: 0 0 28px;
  padding: 18px;
  border: 1px solid var(--line-gold);
  border-radius: 14px;
  background: rgba(251, 248, 241, 0.7);
  box-shadow: 0 6px 22px rgba(60, 45, 25, 0.08);
  text-align: center;
}
.countdown-tiles__label {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.tiles { display: flex; justify-content: center; gap: 10px; }
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 62px;
  padding: 10px 8px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
}
.tile-num {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.8vw, 32px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--gold-deep);
}
.tile-cap { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.countdown-tiles__here { margin: 12px 0 0; font-family: var(--font-display); font-style: italic; color: var(--gold-deep); }

/* ── timeline ─────────────────────────────────────────────────────────── */
.block-title {
  margin: 30px 0 12px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.timeline { position: relative; padding-left: 26px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, var(--gold), rgba(169, 132, 79, 0.25));
}
.timeline-item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  font-size: 14.5px;
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: -22.5px;
  top: 15px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--bg);
}
.timeline-item__time {
  flex: none;
  width: 78px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--gold-deep);
}
.timeline-item__text { color: var(--ink); }

/* ── venue cards ──────────────────────────────────────────────────────── */
.event-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .event-list { grid-template-columns: 1fr; } }

.event-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 6px 22px rgba(60, 45, 25, 0.08);
}
.event-item__chip {
  align-self: flex-start;
  margin-bottom: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-gold);
  color: var(--gold-deep);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.event-item__title { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 500; }
.event-item__when { margin: 2px 0 0; font-size: 13px; font-weight: 500; color: var(--gold-deep); }
.event-item__addr { margin: 0; font-size: 12.5px; color: var(--muted); }
.event-item__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ── notes ────────────────────────────────────────────────────────────── */
.notes {
  margin-top: 26px;
  padding: 16px 18px;
  border: 1px dashed rgba(169, 132, 79, 0.6);
  border-radius: 14px;
  background: rgba(169, 132, 79, 0.07);
}
.note { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.note:last-child { margin-bottom: 0; }
.note strong { color: var(--gold-deep); font-weight: 600; }

/* ── forms (RSVP + injected guestbook) ────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group label { font-size: 12.5px; font-weight: 500; letter-spacing: 0.03em; }
.form-group label small { font-weight: 400; color: var(--muted); }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font: 400 15px var(--font-ui);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group textarea { resize: vertical; min-height: 72px; }
.form-group input::placeholder, .form-group textarea::placeholder { color: #a49a88; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(169, 132, 79, 0.2);
}
.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a7162' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

.form-hint { margin: -6px 0 16px; font-size: 12.5px; color: var(--muted); }

.error { display: block; color: var(--danger); font-size: 12.5px; }

/* decline state: hide party-size & meals, show the miss-you note */
.rsvp-extras { transition: opacity 0.25s; }
.rsvp-form.is-declining .rsvp-extras { display: none; }
.declined-note {
  display: none;
  margin: 0 0 14px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(169, 132, 79, 0.5);
  background: rgba(169, 132, 79, 0.08);
  font-size: 13.5px;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-deep);
}
.rsvp-form.is-declining .declined-note { display: block; }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 500 14.5px var(--font-ui);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s, border-color 0.2s, color 0.2s;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn--primary { background: var(--gold); color: #fff; box-shadow: 0 10px 26px rgba(125, 95, 51, 0.35); }
.btn--primary:hover { background: var(--gold-bright); }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-deep); }
.btn--block { width: 100%; }
.btn:disabled { opacity: 0.6; cursor: wait; }

/* loading node (driven by the platform script) */
.loading { display: none; text-align: center; color: var(--muted); font-size: 13px; padding: 10px 0 0; }

/* RSVP deadline countdown (platform-driven .count-*) */
.rsvp-countdown {
  margin: -6px 0 22px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px dashed rgba(169, 132, 79, 0.6);
  background: rgba(169, 132, 79, 0.07);
  text-align: center;
  font-size: 13.5px;
}
.rsvp-countdown__label { margin: 0 0 4px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-deep); }
.rsvp-countdown__nums { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted); }
.rsvp-countdown__nums span { color: var(--gold-deep); font-size: 17px; }

/* ── guestbook (Style A: platform injects form + list into .guestbook-body) ── */
.guestbook-section #guestbookForm .form-group { margin-bottom: 14px; }
.guestbook-section #guestbookForm button[type="submit"] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px auto 0;
  padding: 12px 26px;
  border-radius: 999px;
  border: none;
  background: var(--gold) !important;
  color: #fff !important;
  font: 500 14.5px var(--font-ui);
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(125, 95, 51, 0.3);
}
.guestbook-section #guestbookForm button[type="submit"]:hover { background: var(--gold-bright) !important; }

/* injected message list — neutralise the engine's inline scroll box */
.guestbook-section #comments-container {
  margin-top: 28px !important;
  border-top: 1px solid var(--line) !important;
  max-height: none !important;
  overflow: visible !important;
}
.guestbook-section .guestbook-entry {
  padding: 14px 16px;
  margin-top: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 4px 16px rgba(60, 45, 25, 0.06);
}
.guestbook-section .guestbook-entry h5 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.guestbook-section .guestbook-entry p { margin: 0 0 4px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.guestbook-section .guestbook-entry small { color: var(--muted); font-size: 12px; }

.guestbook-section .more-guestbook-wrap { text-align: center; margin-top: 18px; }
.guestbook-section #load-more {
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: 500 14px var(--font-ui);
  cursor: pointer;
}
.guestbook-section #load-more:hover { border-color: var(--gold); color: var(--gold-deep); }

/* thank-you / closed states injected by the platform scripts */
.thank-you-message { text-align: center; padding: 26px 12px; }
.thank-you-message h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 28px; font-weight: 500; }
.thank-you-message p { margin: 4px 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* ── gallery (photos — optional panel; delete the section to hide it) ── */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 760px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

.gallery-item {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line-gold);
  background: var(--card);
  box-shadow: 0 6px 22px rgba(60, 45, 25, 0.1);
  cursor: zoom-in;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.gallery-item img {
  width: 100%; height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--card);
}
.gallery-item:hover, .gallery-item:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(60, 45, 25, 0.2);
  border-color: var(--gold);
}
/* focus ring on the clickable image itself (kept inside the rounded frame) */
.gallery-item img:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.gallery-item figcaption {
  padding: 10px 12px 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15.5px;
  color: var(--gold-deep);
}

/* ── full-screen photo viewer (lightbox, built by main.js) ───────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: clamp(14px, 4vw, 40px);
  background: rgba(24, 19, 12, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lightbox__figure {
  margin: 0;
  max-width: min(900px, 86vw);
  text-align: center;
}
.lightbox__img {
  max-width: 100%;
  max-height: 72vh;
  margin: 0 auto;
  border-radius: 10px;
  border: 2px solid var(--gold);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  background: var(--card);
  cursor: zoom-in;
}
/* zoomed: show the photo at its real size, scrolled within the viewer */
.lightbox.is-zoomed { display: block; overflow: auto; }
.lightbox.is-zoomed .lightbox__figure { max-width: none; padding: clamp(14px, 4vw, 40px) 40px; }
.lightbox.is-zoomed .lightbox__img {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}
.lightbox.is-zoomed .lightbox__nav { display: none; }
.lightbox__caption {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--card-edge);
}
.lightbox__nav {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(251, 248, 241, 0.35);
  background: rgba(251, 248, 241, 0.08);
  color: var(--card);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.lightbox__nav:hover { background: rgba(169, 132, 79, 0.4); border-color: var(--gold-bright); }
.lightbox__nav:active { transform: translateY(1px); }
.lightbox__nav:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.lightbox__close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(251, 248, 241, 0.35);
  background: rgba(251, 248, 241, 0.08);
  color: var(--card);
  font-size: 20px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.lightbox__close:hover { background: rgba(169, 132, 79, 0.4); border-color: var(--gold-bright); }
.lightbox__close:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

@media (max-width: 640px) {
  .lightbox { gap: 6px; padding: 12px; }
  .lightbox__nav { width: 38px; height: 38px; }
}

/* ── optional official flyer / banner (Celebration) ─────────────────────
   A wide framed slot for hosts who already have a designed flyer or poster
   (e.g. the companion wedding-black-tie-flyer-obsidian-gala template) —
   display it so guests can confirm they're in the right place with the
   right link. Clicking it opens the same full-screen viewer as the photos
   (with zoom). Delete this <figure> to hide the feature. */
.banner-flyer {
  margin: 30px auto 0;
  max-width: 660px;
  text-align: center;
}
.banner-flyer img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 3;
  object-fit: cover;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--line-gold);
  border-radius: 8px;
  box-shadow: 0 14px 30px -22px rgba(60, 45, 25, 0.5);
  cursor: zoom-in;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.banner-flyer img:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 18px 36px -22px rgba(60, 45, 25, 0.55); }
.banner-flyer img:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.banner-flyer figcaption {
  margin-top: 9px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(13.5px, 3vw, 15.5px);
  color: var(--gold-deep);
}

/* ── 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 in index.html to hide the feature. */
.film-card {
  margin-top: clamp(30px, 5vmin, 44px);
  text-align: center;
}
.film-card .block-title { margin: 0 0 4px; }
.film-frame {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: clamp(14px, 3vmin, 20px) auto 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  background: var(--card-edge); /* mat behind the poster / while loading */
  border: 1px solid var(--line-gold);
  box-shadow: 0 16px 34px -24px rgba(60, 45, 25, 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(--gold-deep);
  background: radial-gradient(circle at 32% 28%, #fffdf6, var(--card) 60%, #efe3c8);
  border: 1px solid var(--gold);
  box-shadow: 0 12px 28px -12px rgba(60, 45, 25, 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); outline-offset: 3px; }
.film-hint {
  position: absolute; left: 50%; bottom: 14px;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(34, 29, 22, 0.62);
  color: var(--card);
  font-size: 10px; font-weight: 500; 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(--muted);
  font-size: 13.5px; font-style: italic; text-align: center;
  background: var(--card-edge);
}
.film-external {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.film-external:hover { color: var(--gold); border-color: var(--gold-bright); }
.film-external[hidden] { display: none; }
@keyframes film-pulse {
  0%, 100% { box-shadow: 0 12px 28px -12px rgba(60, 45, 25, 0.65), 0 0 0 0 rgba(169, 132, 79, 0.35); }
  50% { box-shadow: 0 12px 28px -12px rgba(60, 45, 25, 0.65), 0 0 0 14px rgba(169, 132, 79, 0); }
}

/* ── optional free page (repeatable free blocks) ────────────────────────
   The Free Page panel ships hidden — the platform removes the whole
   .panel-free section when the host has no free blocks, so its tab
   disappears with it. Each .free-block is one repeatable block: title,
   free text and an OPTIONAL photo (the block works fine without it —
   the .free-media wrapper is dropped when the image is empty). */
.free-blocks {
  display: grid;
  gap: 18px;
}
.free-block {
  padding: clamp(22px, 4vmin, 34px);
  border-radius: 14px;
  border: 1px solid var(--line-gold);
  background: var(--card);
  box-shadow: 0 6px 22px rgba(60, 45, 25, 0.08);
}
.free-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.free-media {
  margin: 0 0 14px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line-gold);
  cursor: zoom-in;
}
.free-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--card);
}
.free-media img:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.free-content {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(16px, 2.4vw, 18.5px);
  line-height: 1.7;
  color: var(--ink-soft);
}

/* ── footer brand placeholder ───────────────────────────────────────────
   The platform swaps the mark/text with the host's brand. No-JS: a plain
   closing line at the end of the stacked document. JS shell: hidden where
   it starts (after </main>), then initFooter() tucks it into the last
   existing panel so it reads as the invitation's closing brand line — even
   when RSVP / Guestbook are stripped. */
.footer-brand {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--gold-deep);
}
.footer-brand-mark { font-style: normal; font-size: 9px; color: var(--gold); padding-right: 7px; }
html:not(.js) .footer-brand { display: block; padding: 26px 18px 42px; text-align: center; }
html.js .footer-brand { display: none; }
html.js .panel .footer-brand {
  display: block;
  margin-top: clamp(28px, 5vmin, 42px);
  padding-top: 16px;
  border-top: 1px solid var(--line);
  text-align: center;
}

/* ── foot ─────────────────────────────────────────────────────────────── */
.foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px clamp(14px, 3vw, 28px);
  background: rgba(251, 248, 241, 0.9);
  color: var(--muted);
  border-top: 1px solid rgba(34, 29, 22, 0.08);
  font-size: 12px;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.foot::-webkit-scrollbar { display: none; }
.foot__dot { opacity: 0.5; }

/* ── full-width powered-by brand strip ──────────────────────────────────
   A slim, full-width credit line pinned at the very bottom of the app
   shell (and at the end of the stacked document without JS). The engine
   swaps the literal brand token inside .link-footer for the platform
   name at render; the cockpit's Free Powered By field overrides the line. */
html:not(.js) .powered-by {
  width: 100%;
  text-align: center;
  padding: 14px 16px 22px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
html.js .powered-by {
  width: 100%;
  text-align: center;
  padding: 5px 14px;
  border-top: 1px solid var(--line);
  background: rgba(251, 248, 241, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.powered-by .link-footer { color: var(--gold-deep); }

/* ── focus visibility (global) ────────────────────────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ── short screens: reclaim vertical space ────────────────────────────── */
@media (max-height: 620px) {
  .masthead { padding-top: 6px; padding-bottom: 6px; }
  .masthead__top { display: none; }
  .foot { display: none; }
}
@media (max-width: 480px) {
  .chip-btn { padding: 8px 10px; }
  .chip-btn__label { 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;
  }
}
html.no-motion *, html.no-motion *::before, html.no-motion *::after {
  animation: none !important;
  transition: none !important;
}

/* ── print: flatten to readable pages ─────────────────────────────────── */
@media print {
  html.js .app { height: auto; display: block; overflow: visible; }
  html.js .panel { display: block !important; overflow: visible !important; }
  html.js .panel.hero-panel.is-active { display: block !important; }
  .masthead__actions, .tabs, .tabs-wrap, .foot, .powered-by, .no-print { display: none !important; }
  body { background: #fff; }
  .panel-inner { max-width: none; padding: 12px; }
  .card {
    box-shadow: none;
    border: 1px solid #a9844f;
    background: #fff;
    page-break-inside: avoid;
  }
  .card__corner { display: none; }
  .card__with { color: #666; }
  .card__request, .card__reply { color: #444; }
  .card__date { color: #333; }
  .card__date em, .card__place span { color: #555; }
  .countdown-tiles, .timeline-item, .event-item, .notes, .gallery-item { page-break-inside: avoid; }
  .lightbox { display: none !important; }
  .film-frame iframe { display: none; } /* a playing video can't print — the poster prints instead */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}