/* ════════════════════════════════════════════════════════════════════
   business-networking-common-ground-card — styles.css

   Design language: the invitation as a printed card. Warm paper ground,
   a centred ivory sheet with a hairline double frame, a crest monogram,
   "cordially invites you", an italic serif welcome line. Instrument Serif
   (display) + Inter (body/UI), one cobalt accent. The flyer for the same
   event is the bold poster; this card is the calm, personal invitation.

   Shell contract:
     - Default (no JS): normal stacked document flow.
     - html.shell-on (added by main.js): single-viewport 100dvh shell where
       only the active panel scrolls internally.
   ════════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  --paper:      #f2efe7;   /* warm paper ground */
  --paper-2:    #eae6da;
  --card:       #fffdf8;
  --ink:        #1b1e23;   /* near-black, warm */
  --ink-2:      #454b54;
  --ink-3:      #767d87;
  --line:       rgba(27, 30, 35, .16);
  --line-soft:  rgba(27, 30, 35, .08);
  --accent:     #1e4fe0;   /* cobalt */
  --accent-deep:#163bb0;
  --accent-soft:#e9eefb;
  --accent-ink: #12308f;
  --danger:     #b3382a;
  --ok:         #1e7a46;

  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius:   16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow:   0 24px 60px -34px rgba(27, 30, 35, .45);
  --shadow-btn: 0 10px 22px -12px rgba(30, 79, 224, .55);
  --topbar-h: 56px;
  --navbar-h: 64px;
}

/* ── Fonts (bundled locally so the template stays self-contained) ──── */
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif_400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif_italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

@font-face { font-family: "Inter"; src: url("../fonts/inter_400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter_500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter_600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter_700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font: 400 clamp(15px, 1.6vw, 17px)/1.65 var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[hidden] { display: none !important; }

img { max-width: 100%; height: auto; }

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

a { color: var(--accent-deep); text-underline-offset: 3px; }
a:hover { color: var(--accent); }

button { font: inherit; color: inherit; }

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

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

.muted { color: var(--ink-3); }

/* ── Skip link ──────────────────────────────────────────────────────── */
.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* ── Shell ────────────────────────────────────────────────────────────
   Default (html:not(.shell-on)): normal document flow — every panel is
   stacked and the page scrolls as a whole. This is the no-JS fallback. */
.shell { min-height: 100dvh; }

html:not(.shell-on) .shell-topbar,
html:not(.shell-on) .shell-nav { display: none; } /* clean scroll in no-JS mode */

/* JS enabled: fixed single-viewport shell, only active panel scrolls. */
html.shell-on .shell {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  height: 100vh; /* fallback for older browsers */
  min-height: 0;
  overflow: hidden;
}

html.shell-on .panels {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

html.shell-on .panel {
  flex: 0 0 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ── Top bar ────────────────────────────────────────────────────────── */
.shell-topbar {
  flex: 0 0 auto;
  height: var(--topbar-h);
  background: var(--card);
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
  padding-top: env(safe-area-inset-top);
  z-index: 20;
}

.topbar-inner {
  max-width: 1080px;
  height: 100%;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 40px);
  display: flex;
  align-items: center;
  gap: 16px;
}
.topbar-brand {
  font-family: var(--font-display);
  font-size: clamp(17px, 2.4vw, 21px);
  letter-spacing: .01em;
  color: var(--ink);
  white-space: nowrap;
}
/* the brand is fed from the event title by the engine (combination); if that
   is empty too, drop the span so the top bar keeps its rhythm */
.topbar-brand:empty { display: none; }
.brand-edition {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  font-size: .55em;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-left: .35em;
}
.topbar-progress {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.page-count { color: var(--ink); }
.topbar-cta {
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent-deep);
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  transition: background .2s ease, color .2s ease;
  white-space: nowrap;
}
.topbar-cta:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.js-rsvp-cta.is-hidden { display: none; }

/* ── Card sheet ───────────────────────────────────────────────────────
   The card is a centred ivory sheet with a hairline double frame, like a
   printed invitation laid on a linen table. */
.panel-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding:
    clamp(24px, 5vw, 56px)
    clamp(16px, 4vw, 48px)
    calc(clamp(24px, 5vw, 48px) + var(--navbar-h));
}

.card-sheet {
  max-width: 780px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: clamp(26px, 6vw, 64px) clamp(20px, 6vw, 58px);
  position: relative;
}

/* the inner hairline frame */
.card-sheet::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--line-soft);
  border-radius: calc(var(--radius) - 8px);
  pointer-events: none;
}

.panel-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

.panel-head { margin-bottom: clamp(24px, 4vw, 40px); }
/* Empty-state guard: when every bound field in a panel heading was left
   empty the engine deletes those elements, so hide the leftover wrapper
   instead of showing a bare gap above the panel body. */
header.panel-head:not(:has(> *)) { display: none; }
.panel-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -.01em;
}
.panel-desc {
  margin-top: 12px;
  max-width: 60ch;
  color: var(--ink-2);
}

.panel-note {
  margin-top: clamp(20px, 3vw, 30px);
  font-size: .92em;
  color: var(--ink-3);
  border-top: 1px solid var(--line-soft);
  padding-top: 16px;
}

/* ── Cover / card face ──────────────────────────────────────────────── */
.cover-inner { display: flex; flex-direction: column; }
.cover-sheet { text-align: center; }

.crest {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(20px, 3vw, 30px);
}
.crest-ring {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.crest-inner {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--card);
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: .05em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cover-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

.cover-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 7.5vw, 68px);
  line-height: 1;
  letter-spacing: -.015em;
  margin-top: 10px;
}

.cover-title::after {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  margin: 20px auto 0;
}

.cover-pleasure {
  margin-top: 16px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2.6vw, 23px);
  color: var(--ink-2);
}

.cover-greeting {
  margin-top: clamp(22px, 3.5vw, 34px);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 22px);
  color: var(--ink);
}

.cover-meta {
  margin-top: clamp(22px, 3.5vw, 34px);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.5vw, 28px);
  padding: 20px 0 0;
  text-align: left;
}
.meta-item dt {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.meta-item dd {
  font-weight: 500;
  color: var(--ink);
  line-height: 1.5;
  font-size: .95em;
}
/* the venue's city sits on its own line without a <br>, so hiding an empty
   city leaves no stray line break in the cover meta */
.event-city { display: block; }

.cover-rsvp-line {
  margin-top: 22px;
  font-size: .95em;
  color: var(--ink-2);
}
.cover-rsvp-line strong { color: var(--ink); }

.private-note {
  margin-top: 14px;
  font-size: .9em;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: inline-block;
  text-align: left;
}

.cover-actions {
  margin-top: clamp(24px, 3.5vw, 34px);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
/* Empty-state guard: when the host leaves every cover button label empty,
   remove the (empty) action row instead of leaving a dead gap on the card. */
.cover-actions:not(:has(> *)) { display: none; }

.cover-admit {
  margin-top: 26px;
  font-size: .85em;
  color: var(--ink-3);
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

/* ── Agenda (card, condensed) ───────────────────────────────────────── */
.agenda {
  border-top: 1px solid var(--line);
}
.agenda-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: clamp(12px, 2.5vw, 24px);
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}
.agenda-time {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.6vw, 24px);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.agenda-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.agenda-detail {
  margin-top: 3px;
  font-size: .92em;
  color: var(--ink-2);
}

/* ── The room ───────────────────────────────────────────────────────── */
.room-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.room-chips li {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  background: var(--card);
  transition: border-color .2s ease, color .2s ease;
}
.room-chips li:hover { border-color: var(--accent); color: var(--accent-deep); }

.host-grid {
  margin-top: clamp(26px, 4vw, 40px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2.4vw, 22px);
}
.host-card {
  text-align: center;
  padding: 20px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border: 2px solid var(--card);
}
.avatar-lg { width: 54px; height: 54px; font-size: 15px; }
.host-name {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
}
.host-role {
  margin-top: 4px;
  font-size: .85em;
  color: var(--ink-3);
}

/* ── Free page (optional, host-filled) ────────────────────────────────────
   One repeatable block per entry: a title, free text and an OPTIONAL photo
   (reuses the gallery's .photo-open / .photo-img wiring, so the photo zooms
   in the same lightbox). The panel ships hidden — the render engine removes
   the whole section when no blocks exist (or the host toggles the Free Page
   section off), so the navigation pill main.js builds from this panel
   disappears with it. */
.free-blocks {
  display: grid;
  gap: clamp(28px, 4vw, 44px);
}
.free-block {
  text-align: center;
}
.free-figure {
  margin: 0 auto clamp(14px, 2.5vw, 22px);
  max-width: 560px;
}
.free-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 auto clamp(10px, 2vw, 14px);
  max-width: 30ch;
  overflow-wrap: anywhere;
}
.free-title:focus { outline: none; }
.free-content {
  margin: 0 auto;
  max-width: 60ch;
  text-align: left;
  font-size: .98em;
  line-height: 1.7;
  color: var(--ink-2);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* ── RSVP ───────────────────────────────────────────────────────────── */
.reg-includes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 22px;
  margin-bottom: clamp(20px, 3vw, 30px);
}
.reg-includes li {
  position: relative;
  padding-left: 30px;
  color: var(--ink-2);
  font-size: .95em;
}
.reg-includes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* countdown (hidden until the platform injects rsvpDeadline) */
.rsvp-countdown {
  margin-bottom: clamp(22px, 3.5vw, 36px);
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 16px 20px;
}
.rsvp-countdown-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 10px;
}
.rsvp-countdown-grid {
  display: flex;
  gap: 18px;
}
.count-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
}
.count-box span {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.count-box small {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .8;
  margin-top: 4px;
}

/* conversation-goals picker (outside the form — no inputs) */
.goals-picker {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 18px 20px 16px;
  margin-bottom: 22px;
}
.goals-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.goals-label .muted { font-weight: 400; font-size: .92em; }
.goals-chips {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.goal-chip {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-2);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.goal-chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.goal-chip.is-selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.goals-hint {
  margin-top: 12px;
  font-size: .86em;
  color: var(--ink-3);
}

/* form */
.rsvp-form {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: clamp(18px, 3vw, 28px);
}
.rsvp-form-display {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 20px;
}
.form-group { min-width: 0; }
.form-group-wide { grid-column: 1 / -1; }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 7px;
}
.form-group .req { color: var(--accent); font-style: normal; }
.form-control {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--card);
}
.form-control::placeholder { color: var(--ink-3); opacity: .8; }
select.form-control { appearance: none; cursor: pointer; }
.form-control-narrow { max-width: 140px; }
.form-helper {
  margin-top: 6px;
  font-size: .85em;
  color: var(--ink-3);
}

/* validation errors — filled by the platform's rsvp_user.js */
.error {
  display: block;
  margin-top: 5px;
  font-size: .85em;
  font-weight: 500;
  color: var(--danger);
}
.error:empty { display: none; }

/* attending = no → soften the fields that only matter if attending */
.rsvp-form.not-attending .party-size,
.rsvp-form.not-attending .form-group:has(#meal_preference) {
  opacity: .45;
  filter: grayscale(.4);
  transition: opacity .25s ease, filter .25s ease;
}

/* submit + loading */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 15px/1.2 var(--font-sans);
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: 14px 26px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover { background: var(--accent-deep); color: #fff; }
.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-outline:hover { border-color: var(--ink); color: var(--ink); }
.btn-block { width: 100%; }

#rsvp-form .loading,
.loading-guestbook {
  text-align: center;
  font-size: .9em;
  font-weight: 500;
  color: var(--ink-3);
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
#rsvp-form .loading::before,
.loading-guestbook::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.rsvp-footnote { border-top-color: var(--line); }

/* thank-you / RSVP-closed states injected by the platform */
.thank-you-message h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 34px);
}
.thank-you-message p { color: var(--ink-2); margin-top: 6px; }

/* ── Guest book ─────────────────────────────────────────────────────── */
.guestbook-hint {
  font-size: .92em;
  color: var(--ink-3);
  margin-bottom: 20px;
  padding: 12px 16px;
  background: var(--paper);
  border-radius: var(--radius-sm);
}

/* the platform replaces .guestbook-body with its live form + list;
   style its markup so it inherits the family look */
.guestbook-body .form-group { margin-bottom: 16px; }
.guestbook-body #guestbookForm { max-width: 640px; }
#guestbookForm button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 15px/1.2 var(--font-sans);
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 26px;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: background .18s ease, transform .18s ease;
}
#guestbookForm button[type="submit"]:hover { background: var(--accent-deep); transform: translateY(-1px); }
#guestbookForm .ph-send { display: none; } /* icon font not bundled */

.guestbook-wrap { margin-top: 26px; }
.guestbook-entry {
  border-top: 1px solid var(--line-soft);
  padding: 14px 0;
}
.guestbook-entry h5 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.guestbook-entry p { font-size: .95em; color: var(--ink-2); margin-top: 4px; }
.guestbook-entry small { font-size: .82em; color: var(--ink-3); }

/* injected guestbook list footer: #load-more + its wrapper (platform markup) */
.more-guestbook-wrap {
  margin-top: 22px;
  text-align: center;
}
#load-more {
  font: 600 14px/1.2 var(--font-sans);
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 22px;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
#load-more:hover { border-color: var(--accent); color: var(--accent); }

/* ── Gallery (optional photo panel) ──────────────────────────────────
   Each slot ships a branded SVG placeholder (assets/img/gallery/*.svg)
   so the panel reads as a real gallery out of the box; hosts swap the
   <img src> (+ optional data-full) for their own photography, or delete
   the whole .gallery-section to hide the feature. The images display by
   default — no lazy loading, so nothing is ever empty. */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 2.4vw, 22px);
}
.photo-item { min-width: 0; }
.photo-feature { grid-column: 1 / -1; }

.photo-figure { margin: 0; }
.photo-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  cursor: zoom-in;
  overflow: hidden;
  position: relative;
}
.photo-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.photo-feature .photo-img { aspect-ratio: 16 / 9; }
.photo-open:hover .photo-img { transform: scale(1.03); }

/* zoom hint chip (corners glyph, drawn as a data-URI so no icon font) */
.photo-open::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(27, 30, 35, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6.5 2.5h-4v4M9.5 2.5h4v4M6.5 13.5h-4v-4M9.5 13.5h4v-4'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.photo-open:hover::after,
.photo-open:focus-visible::after { opacity: 1; }

.photo-cap {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.photo-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.photo-desc { font-size: .92em; color: var(--ink-2); }

/* ── Gallery: optional recap film (video URL embed) ──────────────────
   A poster + play button; tapping opens the lightbox player. The video
   loads only when the guest taps (lazy), and the lightbox adds an "open
   original" link for the source URL. Delete .video-section to hide it. */
.video-section {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: clamp(22px, 3.5vw, 34px);
  border-top: 1px solid var(--line-soft);
}
.video-label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.15;
}
.video-sub {
  margin-top: 6px;
  max-width: 58ch;
  color: var(--ink-2);
}
.video-card { margin-top: clamp(16px, 2.5vw, 22px); }
.video-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--ink);
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.video-poster {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  opacity: .9;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
}
.video-open:hover .video-poster { transform: scale(1.02); opacity: 1; }
.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 253, 248, .94);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .55);
  transition: transform .25s ease, background .25s ease;
}
.video-play svg { width: 26px; height: 26px; margin-left: 3px; }
.video-open:hover .video-play { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.video-open:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.video-hint {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(27, 30, 35, .7);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  white-space: nowrap;
}
.video-cap {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Lightbox (gallery zoom) ───────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
}
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(27, 30, 35, .86);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.lightbox-stage {
  position: relative;
  width: 100%;
  max-width: min(1000px, 100%);
  text-align: center;
}
.lightbox-media { position: relative; }
.lightbox-img {
  display: block;
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6);
}
.lightbox-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #0e1013;
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6);
}
.lightbox-video-note {
  color: #e8e4da;
  border: 1px dashed rgba(255, 255, 255, .3);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .06);
  padding: clamp(20px, 4vw, 36px);
  text-align: center;
  font-size: .95em;
}
.lightbox-caption {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  color: #e8e4da;
  font-size: .95em;
}
.lightbox-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #a9c0ff;
  flex: 0 0 auto;
}
.lightbox-original {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  text-decoration: none;
  box-shadow: var(--shadow-btn);
  transition: background .18s ease, transform .18s ease;
}
.lightbox-original:hover { background: var(--accent-deep); color: #fff; transform: translateY(-1px); }
.lightbox-original[hidden] { display: none; }
.lightbox-close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: var(--ink);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease, transform .18s ease;
}
.lightbox-close:hover { background: var(--accent-deep); transform: rotate(90deg); }

/* ── Cover: optional flyer / banner (poster for the same event) ──────
   A framed image below the card face. Hosts whose event already has a
   flyer/banner can show it here so guests confirm they are in the right
   place with the right link. Reuses the gallery's .photo-open wiring, so
   it zooms in the same lightbox; delete .flyer-section to hide it. */
.flyer-section {
  margin-top: clamp(24px, 4vw, 44px);
}
.flyer-sheet { text-align: center; }
.flyer-sheet .panel-desc { margin-left: auto; margin-right: auto; }
.flyer-open {
  cursor: zoom-in;
  margin-top: clamp(14px, 2.5vw, 22px);
}
.flyer-img {
  aspect-ratio: 16 / 9;
  object-fit: contain; /* a portrait poster or a wide banner both fit, letterboxed */
  background: var(--paper-2);
}

/* ── Details (dl rows) ──────────────────────────────────────────────── */
.detail-list { border-top: 1px solid var(--line); }
.detail-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: clamp(14px, 3vw, 28px);
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}
.detail-row dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 4px;
}
.detail-row dd {
  font-size: .95em;
  color: var(--ink-2);
  line-height: 1.6;
}
.detail-row .venue-address { color: var(--ink); font-weight: 500; }
.detail-sub {
  display: block;
  margin-top: 6px;
  font-size: .88em;
  color: var(--ink-3);
}
.detail-row .organizer-name { font-weight: 600; color: var(--ink); }

/* footer */
.shell-footer {
  margin-top: clamp(26px, 4vw, 40px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.footer-mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: .04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.shell-footer p { font-size: .9em; color: var(--ink-3); }
.shell-footer .footer-brand { color: var(--ink-2); font-weight: 500; }
.shell-footer .footer-organizer { font-weight: 600; color: var(--ink); }
.shell-footer .footer-copyright { margin-top: 4px; font-size: .82em; }
.shell-footer .back-to-top {
  font-size: .9em;
  color: var(--ink-3);
  text-underline-offset: 3px;
}
.shell-footer .back-to-top:hover { color: var(--accent); }

/* ── Full-width powered-by brand strip ────────────────────────────────────
   A slim, full-width footer line above the section navigation in the JS
   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 can override the line. */
html:not(.shell-on) .powered-by {
  width: 100%;
  text-align: center;
  padding: 18px 16px 26px;
  border-top: 1px solid var(--line-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
html.shell-on .powered-by {
  flex: 0 0 auto;
  width: 100%;
  text-align: center;
  padding: 6px 14px;
  border-top: 1px solid var(--line-soft);
  background: var(--card);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.powered-by .link-footer { color: var(--accent-deep); }

/* ── Panel navigation ───────────────────────────────────────────────── */
.shell-nav {
  flex: 0 0 auto;
  height: var(--navbar-h);
  background: var(--card);
  border-top: 1px solid var(--line-soft);
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 20;
}
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
}
.nav-btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
.nav-btn:disabled { opacity: .3; cursor: default; }
.nav-prev { left: max(14px, env(safe-area-inset-left)); }
.nav-next { right: max(14px, env(safe-area-inset-right)); }

.nav-dots {
  margin: 0 auto;
  max-width: calc(100% - 128px);
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 6px 4px;
}
.nav-dots::-webkit-scrollbar { display: none; }
.dot {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink-2);
  font: 600 12.5px/1.2 var(--font-sans);
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.dot:hover { border-color: var(--accent); color: var(--accent-deep); }
.dot.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-btn);
}

/* ── Responsive tweaks ──────────────────────────────────────────────── */
@media (max-width: 820px) {
  .card-sheet { padding: 30px 18px 40px; }
  .card-sheet::before { inset: 6px; }
  .cover-meta { grid-template-columns: 1fr; gap: 12px; }
  .host-grid { grid-template-columns: 1fr; }
  .reg-includes { grid-template-columns: 1fr; }
  .rsvp-form-display { grid-template-columns: 1fr; }
  .form-group-wide { grid-column: auto; }
  .detail-row { grid-template-columns: 1fr; gap: 4px; }
  .photo-grid { grid-template-columns: 1fr; }
  .lightbox-close { top: -10px; right: -6px; }
  .nav-dots { max-width: calc(100% - 96px); gap: 4px; }
  .dot { min-height: 40px; padding: 7px 11px; font-size: 11.5px; }
  .video-play { width: 58px; height: 58px; }
  .video-play svg { width: 22px; height: 22px; }
}

/* small phones: keep the top bar to brand + CTA only */
@media (max-width: 560px) {
  .topbar-progress { display: none; }
}
@media (max-width: 420px) {
  .topbar-inner { gap: 8px; padding: 0 12px; }
  .brand-edition { display: none; }
  .topbar-cta { font-size: 12px; padding: 8px 12px; }
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
  html.shell-on .panels { transition: none; }
  .skip-link { transition: none; }
}

/* ── Print: every panel becomes its own page, chrome suppressed ─────── */
@media print {
  html.shell-on .shell { height: auto; overflow: visible; display: block; }
  html.shell-on .panels { transform: none !important; display: block; }
  html.shell-on .panel { height: auto !important; overflow: visible !important; page-break-after: always; }
  html:not(.shell-on) .panel { page-break-after: always; }
  .panel-inner { max-width: none; padding: 24px; }
  .shell-topbar, .shell-nav, .skip-link, .lightbox, .powered-by { display: none !important; }
  body { background: #fff; }
  .card-sheet { box-shadow: none; border-color: #bbb; page-break-inside: avoid; }
  .btn { border: 1px solid #999; box-shadow: none; }
  .btn-primary, .goal-chip.is-selected, .rsvp-countdown { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .photo-item { page-break-inside: avoid; break-inside: avoid; }
  a { color: inherit; }
}