/* =========================================================
   The Invite — Workshop Card (workshop-modern-card)
   A dark, editorial invitation card with registration.
   Serif greeting, ticket-style details, mint accent,
   ambient glow, print styles that flip it light.
   ========================================================= */

/* ---------- design tokens ---------- */
:root {
  --bg: #121216;
  --surface: #1b1b22;
  --surface-2: #23232c;
  --ink: #f3f0e7;
  --ink-soft: #a7a294;
  --line: rgba(243, 240, 231, 0.13);
  --line-strong: rgba(243, 240, 231, 0.32);
  --accent: #8ef0c0;
  --accent-ink: #0e1512;
  --danger: #ff8f85;
  --radius: 20px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none; }

h1, h2, h3, p, dl, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

.mono {
  font-family: var(--font-mono);
  font-size: 0.78em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -100px;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* ---------- shell: single-viewport card app (JS on) ----------
   With JS the shell locks to the viewport exactly like every other card
   template in this collection: masthead / scrollable panel area / footer /
   bottom tab bar. Only the active panel scrolls internally, so the tab
   bar stays reachable and short panels never leave a half-empty page.
   Without JS the document falls back to a normal stacked, fully readable
   page (progressive enhancement). */
.shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  background:
    radial-gradient(60% 42% at 72% 0%, rgba(142, 240, 192, 0.07), transparent 60%),
    var(--bg);
}

html.js .shell {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.masthead {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: calc(0.75rem + env(safe-area-inset-top)) clamp(1rem, 4vw, 2.5rem) 0.75rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.82rem;
}
.masthead-brand { font-weight: 700; letter-spacing: 0.01em; }
.masthead-meta { color: var(--ink-soft); }

.shell-body { min-height: 0; }

/* With JS the shell shows one panel at a time; only the active panel
   scrolls internally (native momentum scroll, same as every other card). */
html.js .panel { display: none; }
html.js .shell-body {
  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;
}

.panel {
  min-height: 0;
  scroll-behavior: smooth;
}

/* ---------- the invite card ---------- */
.invite {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(1.5rem, 6vw, 4rem) clamp(1.1rem, 5vw, 2.5rem) clamp(2rem, 6vw, 4rem);
}
.invite-head,
.invite-note,
.ticket,
.expect,
.know,
.invite-cta,
.featured-photo,
.flyer {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 4vw, 2.2rem);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}
.invite-head { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
.invite-note { border-top: 0; border-bottom: 0; border-radius: 0; box-shadow: none; }

/* Featured photo on the invitation card — a quiet, centred image inside
   the letter, between the host's note and the ticket. To hide it, remove
   the <figure class="featured-photo"> block from index.html. */
.featured-photo {
  border-top: 0;
  border-radius: 0;
  box-shadow: none;
  padding-top: 0.35rem;
  text-align: center;
}
.featured-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
}
/* The card photo is clickable too: it opens the same lightbox as the
   Gallery, where the original can be viewed large and zoomed (main.js). */
.featured-photo .gallery-trigger {
  display: block;
  width: min(100%, 440px);
  margin: 0 auto;
  border-radius: 12px;
}
.featured-photo figcaption {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0.6rem auto 0;
}

/* Optional official flyer / banner on the card — the event's artwork, so
   guests can confirm they're in the right place. Click to view it large
   (lightbox + zoom). Remove the <figure class="flyer"> block from index.html
   to hide it. */
.flyer {
  border-top: 0;
  border-bottom: 0;
  border-radius: 0;
  box-shadow: none;
  padding-top: 0.35rem;
  text-align: center;
}
.flyer .gallery-trigger { border-radius: 12px; }
.flyer-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
}
.flyer-caption {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0.6rem auto 0;
}

.kicker {
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.invite-title {
  margin-top: 0.75rem;
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 9vw, 4.2rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.invite-title em { font-style: italic; color: var(--accent); }

.invite-sub {
  margin-top: 0.9rem;
  color: var(--ink-soft);
  max-width: 46ch;
  font-size: 1.05rem;
}

.invite-note { display: grid; gap: 0.85rem; }
.invite-note p { color: #ddd9cc; }
/* Repeatable welcome-body container: the platform clones .welcome-note per
   paragraph. Mirror the parent grid rhythm so cloned rows look identical. */
.invite-note .welcome-notes { display: grid; gap: 0.85rem; }
.invite-note .welcome-note { margin: 0; }
.invite-sign {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--accent);
}

/* ticket-style details */
.ticket { margin-top: 1.1rem; padding-top: 0.25rem; padding-bottom: 0.25rem; border-style: dashed; }
.ticket-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
.ticket-row:last-child { border-bottom: 0; }
.ticket-row dt { color: var(--ink-soft); flex: 0 0 auto; }
.ticket-row dd { text-align: right; }

.expect, .know { margin-top: 1.1rem; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35); }

.sec-title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.9rem;
}
.expect-list li,
.know-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.7rem;
  color: #ddd9cc;
}
.expect-list li:last-child,
.know-list li:last-child { margin-bottom: 0; }
.expect-list li::before,
.know-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* CTA */
.invite-cta { margin-top: 1.1rem; text-align: center; }
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.7rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  border-radius: 999px;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.cta:hover { transform: translateY(-2px); filter: brightness(1.05); }
.cta-arrow { font-size: 1.2em; }
.cta-block { width: 100%; justify-content: center; }
.cta-note {
  margin: 1rem auto 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
  max-width: 42ch;
}

/* ---------- RSVP & guestbook panels ---------- */
.rsvp-wrap,
.guestbook-section {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(1.5rem, 6vw, 4rem) clamp(1.1rem, 5vw, 2.5rem) clamp(2rem, 6vw, 4rem);
}
.guestbook-section { max-width: 720px; }

.panel-head { margin-bottom: 1.75rem; }
.panel-head h2 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 6vw, 2.8rem);
  font-weight: 400;
  margin: 0.2rem 0 0.5rem;
}
.panel-intro { color: var(--ink-soft); max-width: 52ch; }

/* ---------- RSVP form ---------- */
.rsvp-form { display: grid; gap: 1.35rem; }
.rsvp-field { display: grid; gap: 0.4rem; }
.rsvp-label { font-weight: 700; font-size: 0.92rem; }
.req { color: var(--danger); }
.opt {
  color: var(--ink-soft);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.72em;
  margin-left: 0.35rem;
}
.rsvp-input {
  width: 100%;
  padding: 0.8rem 0.95rem;
  font: inherit;
  font-size: 1rem;            /* 16px minimum avoids iOS zoom-on-focus */
  color: var(--ink);
  background: var(--surface-2);
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rsvp-input::placeholder { color: var(--ink-soft); opacity: 0.7; }
.rsvp-input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(142, 240, 192, 0.25);
}
.rsvp-input[aria-invalid="true"] { border-color: var(--danger); }
textarea.rsvp-input { resize: vertical; min-height: 96px; }

.field-hint { font-size: 0.8rem; color: var(--ink-soft); }
.field-error {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--danger);
}
.field-error:not(:empty) { display: block; }

.rsvp-fieldset { border: 0; padding: 0; margin: 0; }
.rsvp-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.2rem;
}
.choice {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.choice input {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
}
.choice-body { display: grid; gap: 0.1rem; }
.choice small { color: var(--ink-soft); font-size: 0.82rem; }
.choice:focus-within { border-color: var(--accent); }
.choice:has(input:checked) {
  border-color: var(--accent);
  background: rgba(142, 240, 192, 0.12);
}

.rsvp-conditional { display: grid; gap: 1.35rem; }

.rsvp-regrets {
  padding: 1rem 1.1rem;
  border: 1.5px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.rsvp-actions { display: grid; gap: 0.75rem; }
.rsvp-footnote { font-size: 0.82rem; color: var(--ink-soft); text-align: center; }

.loading {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.8rem;
  font-weight: 650;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
/* the platform reveals .loading (jQuery .show() works too — inline style wins) */
.loading.is-active,
.loading.is-visible { display: flex; }
.loading-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid var(--line-strong);
  border-top-color: var(--ink);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- footer ---------- */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 0.7rem clamp(1rem, 4vw, 2.5rem);
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.footer-brand {
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}

/* ---------- full-width powered-by brand line ----------
   A slim full-width strip above the footer. The render engine swaps the
   literal brand token inside .link-footer for the platform name; the
   cockpit's Free Powered By field can override the whole line. */
.powered-by {
  width: 100%;
  text-align: center;
  padding: 0.6rem clamp(1rem, 4vw, 2.5rem);
  border-top: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.powered-by .link-footer { color: var(--accent); }

/* ---------- bottom tab bar ---------- */
.site-tabs {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  border-top: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: blur(8px);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── Mobile: ONE inline row — ‹ / › steppers flank the swipeable tab
   strip (main.js wraps the static tabs into .site-tabs-track). Edge
   fades hint at more tabs; the active tab auto-centres. */
.site-tabs-track {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
.nav-step { display: none; }
@media (max-width: 700px) {
  .site-tabs { position: relative; gap: 2px; padding-inline: 4px; justify-content: flex-start; }
  .tab { flex: 0 0 auto; scroll-snap-align: center; }

  .nav-step {
    display: inline-flex;
    flex: 0 0 auto;
    appearance: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
    touch-action: manipulation;
    transition: opacity .2s ease, color .15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-step svg { width: 17px; height: 17px; }
  .nav-step:hover { color: var(--ink); }
  .nav-step[disabled] { opacity: .3; cursor: default; pointer-events: none; }

  .site-tabs-track {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 6px;
    padding: 2px 6px;
    justify-content: flex-start;
  }
  .site-tabs-track::-webkit-scrollbar { display: none; }

  /* edge fades tucked beside the steppers */
  .site-tabs::before,
  .site-tabs::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    margin-bottom: env(safe-area-inset-bottom);
    width: 14px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 2;
  }
  .site-tabs::before {
    left: 42px;
    background: linear-gradient(90deg, var(--surface) 30%, transparent);
  }
  .site-tabs::after {
    right: 42px;
    background: linear-gradient(-90deg, var(--surface) 30%, transparent);
  }
  .site-tabs.is-off-left::before,
  .site-tabs.is-off-right::after { opacity: 1; }
}
.tab {
  flex: 1;
  min-height: 52px;
  padding: 0.75rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-top: 3px solid transparent;
  transition: color 0.15s ease, background 0.15s ease;
}
.tab.is-active { color: var(--ink); background: var(--surface-2); border-top-color: var(--accent); }
.tab:hover { color: var(--ink); }
.tab:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

.guestbook-body { min-height: 120px; }

/* ---------- Photos: card accent + gallery panel ---------- */
/* Gallery panel — a photo grid filled by default with themed local
   placeholders (assets/img/gallery/), so every slot shows something
   on-brand out of the box — nothing to download, nothing to 404.
   Replace the src of any <img> with your own photography, or hide the
   feature entirely: remove the whole <section data-panel="gallery">
   block from index.html and the Gallery tab disappears by itself
   (tabs self-prune from the DOM). */
.gallery-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(1.5rem, 6vw, 4rem) clamp(1.1rem, 5vw, 2.5rem) clamp(2rem, 6vw, 4rem);
}
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 560px) { .gallery-grid { grid-template-columns: 1fr 1fr; } }

.gallery-item { margin: 0; }
.gallery-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;
}
.gallery-trigger:focus-visible { outline-offset: 3px; }
.gallery-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.gallery-trigger:hover .gallery-img { transform: scale(1.03); }
.gallery-caption {
  margin: 0.55rem 0.1rem 0;
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.gallery-foot {
  margin: 1.4rem auto 0;
  max-width: 52ch;
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- Video panel (optional welcome video) ----------
   Ships with an offline-safe placeholder MP4; swap the <source> for your
   own file or replace the <video> block with the commented-out iframe
   embed (YouTube / Vimeo). Remove the whole <section data-panel="video">
   block from index.html to hide the feature — the Video tab disappears
   on its own. */
.video-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(1.5rem, 6vw, 4rem) clamp(1.1rem, 5vw, 2.5rem) clamp(2rem, 6vw, 4rem);
}
.video-slot { margin: 0; }
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: #000;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}
.video-frame video,
.video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}
.video-frame video { object-fit: contain; }
.video-caption {
  margin: 0.55rem 0.1rem 0;
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.video-foot {
  margin: 1.4rem auto 0;
  max-width: 52ch;
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-align: center;
}
.video-original {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.video-original:hover { text-decoration-thickness: 2px; }

/* ---------- Free Page (optional, host-filled) ----------
   An optional page of your own: repeatable blocks, each with a free title,
   free text and an optional photo. Ships with one sample block; the render
   engine removes the whole section when no blocks exist (or the host toggles
   the page off in the cockpit), and the Notes tab disappears with it. The
   photo is optional — leave Free Image empty and the wrapper is dropped. */
.free-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(1.5rem, 6vw, 4rem) clamp(1.1rem, 5vw, 2.5rem) clamp(2rem, 6vw, 4rem);
}
.free-blocks {
  display: grid;
  gap: clamp(1.1rem, 3vw, 1.5rem);
}
.free-block {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 4vw, 2.2rem);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  text-align: center;
}
.free-title {
  margin: 0 0 0.9rem;
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 400;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.free-title:focus { outline: none; }
.free-media {
  margin: 0 auto clamp(0.9rem, 2vw, 1.1rem);
  max-width: 560px;
}
.free-trigger { border-radius: 12px; }
.free-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
}
.free-content {
  margin: 0 auto;
  max-width: 34em;
  text-align: left;
  color: #ddd9cc;
  line-height: 1.7;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
/* When the Free Image morph is empty the render engine drops the <img>;
   hide the leftover empty button/figure so no blank photo frame shows. */
.free-media:empty,
.free-trigger:not(:has(img)) { display: none; }

/* Lightbox — opened by main.js when a gallery photo is clicked.
   Esc, backdrop click or the close button dismisses it. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(10, 10, 14, 0.92);
  backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: min(1100px, 92vw); }
.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 76vh;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  background: var(--surface);
}
.lightbox-caption {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 0.9rem auto 0;
}
.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.7rem;
  height: 2.7rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lightbox-close:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.lightbox-close svg {
  width: 1.15rem;
  height: 1.15rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}
.lightbox-zoom {
  position: absolute;
  top: 1rem;
  right: 4.5rem;
  width: 2.7rem;
  height: 2.7rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lightbox-zoom:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.lightbox-zoom svg {
  width: 1.15rem;
  height: 1.15rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}
.lightbox-hint {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 1rem auto 0;
}
/* Zoomed state: the lightbox becomes a pan/scroll viewport and the image
   renders at its natural (1:1) size, so details can be inspected up close. */
.lightbox.is-zoomed {
  display: block;
  overflow: auto;
  align-items: initial;
}
.lightbox.is-zoomed figure { margin: 0 auto; }
.lightbox.is-zoomed .lightbox-img {
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
}
body.lightbox-open { overflow: hidden; }
/* With the viewport-locked shell the active panel is the scroll
   container, so locking it keeps the page still while the lightbox
   is open. */
body.lightbox-open .panel.is-active { overflow: hidden; }

.noscript-note {
  max-width: 60ch;
  margin: 1rem auto 2rem;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* ---------- responsive ---------- */
@media (max-width: 480px) {
  .rsvp-choices { grid-template-columns: 1fr; }
  .ticket-row { flex-direction: column; gap: 0.15rem; }
  .ticket-row dd { text-align: left; }
}

/* Five tabs need a little more room on small phones — six (with the
   optional Free Page) don't fit a narrow phone at all. Instead of crushing
   the labels, let the bar scroll horizontally when it overflows. This is a
   plain overflow scroll (not a swipe carousel), so no prev/next arrow
   buttons are needed — guests just swipe/scroll the bar. */
@media (max-width: 520px) {
  .site-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .site-tabs::-webkit-scrollbar { display: none; }
  .tab {
    flex: 1 0 auto;
    padding: 0.7rem 0.85rem;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .site-footer { justify-content: center; text-align: center; }
}

/* ---------- 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;
  }
  .skip-link { transition: none; }
}

/* ---------- print: flip the dark card light ---------- */
@media print {
  @page { margin: 14mm; }
  body { background: #fff !important; color: #000; }
  html.js .shell { height: auto !important; min-height: 0 !important; display: block !important; overflow: visible !important; background: #fff !important; }
  .shell-body, html.js .shell-body { display: block !important; overflow: visible !important; }
  .masthead, .site-tabs, .site-footer, .powered-by, .skip-link { display: none !important; }
  html.js .panel { display: block !important; }
  .panel { overflow: visible !important; flex: none !important; }

  .invite { padding: 0; }
  .invite-head, .invite-note, .ticket, .expect, .know, .invite-cta,
  .featured-photo, .flyer, .free-block {
    background: #fff !important;
    border-color: #d5d5d5 !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  .featured-photo img, .flyer-img, .free-img, .video-frame { border-color: #999; }
  .featured-photo figcaption, .gallery-caption, .gallery-foot, .video-caption, .video-foot { color: #555 !important; }
  .gallery-img, .featured-photo img, .flyer-img, .free-img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .lightbox { display: none !important; }
  .invite-title em { color: #000; }
  .invite-note p, .expect-list li, .know-list li, .free-content { color: #000 !important; }
  .kicker, .sec-title, .invite-sub, .cta-note,
  .ticket-row dt, .panel-intro, .field-hint, .rsvp-footnote,
  .masthead-meta, .opt { color: #555 !important; }
  .expect-list li::before, .know-list li::before { color: #000; }
  .invite-sign { color: #000; }
  .rsvp-input { background: #fff !important; color: #000; border-color: #999; }
  .choice { background: #fff !important; border-color: #999; }
  .choice:has(input:checked) { background: #eee !important; border-color: #000; }
  .cta { background: #000 !important; color: #fff !important; }
  .loading-spinner { border-color: #999; border-top-color: #000; }
  .field-error { color: #b00 !important; }
  .rsvp-regrets { background: #fff !important; color: #555; }
}

/* ── Guestbook (platform-injected form + message list) ─────────────── */
.guestbook-body { width: 100%; }

.guestbook-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

#guestbookForm {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.25rem, 4vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
#guestbookForm .form-group { display: flex; flex-direction: column; gap: 0.45rem; }
#guestbookForm .form-group label { font-weight: 700; font-size: 0.92rem; color: var(--ink); }
#guestbookForm .form-control {
  width: 100%;
  padding: 0.8rem 0.95rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface-2);
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#guestbookForm .form-control::placeholder { color: var(--ink-soft); opacity: 0.7; }
#guestbookForm .form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(142, 240, 192, 0.25);
}
#guestbookForm textarea.form-control { resize: vertical; min-height: 96px; }
#guestbookForm .error {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--danger);
}

.guestbook-chapta { margin-top: 0.25rem; }

#guestbookForm button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 auto;
  padding: 1rem 1.7rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
  font-size: 1rem;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
#guestbookForm button[type="submit"]:hover { transform: translateY(-2px); filter: brightness(1.05); }

.loading-guestbook {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* Message list (#comments-container.guestbook-wrap) */
.guestbook-wrap {
  margin-top: 1.5rem !important;
  border-top: 1px solid var(--line) !important;
  padding-top: 1.25rem !important;
}
.guestbook-entry {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin-bottom: 0.75rem;
}
.guestbook-entry h5 { margin: 0 0 0.3rem; font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.guestbook-entry p { margin: 0 0 0.3rem; font-size: 0.92rem; color: var(--ink); overflow-wrap: anywhere; }
.guestbook-entry small { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--ink-soft); }

.more-guestbook-wrap { text-align: center; margin-top: 1rem; }
#load-more {
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.65rem 1.5rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
#load-more:hover { border-color: var(--accent); color: var(--accent); }