/* ==========================================================================
   farewell-heartfelt-card — styles
   A personal, letter-style invitation card.
   Warm ivory paper, sepia ink, a wax-sealed envelope, and serif lettering.
   All colours are CSS variables so the design can be re-themed in one place.
   ========================================================================== */

:root {
  /* Palette — stationery: ivory paper, sepia ink, wax seal */
  --paper:        #f7f1e5;   /* ivory card                */
  --paper-deep:   #efe5d0;   /* aged ivory                */
  --ink:          #3a2f26;   /* sepia brown ink           */
  --ink-soft:     #57483a;
  --gold:         #b98a3e;   /* muted antique gold        */
  --gold-bright:  #d3a855;
  --seal:         #9c3d24;   /* wax-seal garnet           */
  --line:         rgba(58, 47, 38, 0.18);
  --danger:       #9c2f1c;

  --serif-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --serif-body:    "Lora", Georgia, "Times New Roman", serif;

  --max-letter: 34rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 520ms;
}

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--serif-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; }

/* ==========================================================================
   Shell — single viewport, only the active panel scrolls internally
   ========================================================================== */
.shell {
  height: 100vh;               /* fallback */
  height: 100dvh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--paper);
}

/* ---------- Panels (progressive enhancement) ---------- */
.panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  scrollbar-width: thin;
  scrollbar-color: rgba(185, 138, 62, 0.55) transparent;
}

.panel.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  z-index: 2;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s;
}

/* No-JS fallback: everything visible, normal document flow */
.no-js .panel {
  position: static;
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  height: auto;
  overflow: visible;
  padding-bottom: 4rem;
}

.no-js .panel-nav { display: none; }

.panel-inner {
  width: 100%;
  max-width: var(--max-letter);
  margin: 0 auto;
  padding: clamp(3rem, 9vh, 5rem) clamp(1.5rem, 6vw, 2.5rem) clamp(4rem, 12vh, 6rem);
}

/* paper texture behind the letter */
.letter-panel, .memories-panel, .rsvp-wrap, .guestbook-section {
  background:
    radial-gradient(140% 90% at 12% 0%, rgba(255, 255, 255, 0.6), transparent 45%),
    radial-gradient(120% 80% at 95% 100%, rgba(201, 160, 90, 0.14), transparent 50%),
    var(--paper);
}

/* ---------- Shared type ---------- */
.eyebrow {
  margin: 0 0 0.9rem;
  font-family: var(--serif-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--seal);
}

.panel h2 {
  font-family: var(--serif-display);
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  line-height: 1.1;
  color: var(--ink);
}

.ornament {
  width: 140px;
  height: 14px;
  color: var(--gold);
}
.ornament-line { stroke: currentColor; stroke-width: 1; }
.ornament-diamond { fill: none; stroke: currentColor; stroke-width: 1.2; }

/* ==========================================================================
   Cover — the sealed envelope
   ========================================================================== */
.cover-panel {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(255, 255, 255, 0.5), transparent 50%),
    linear-gradient(170deg, #e9dcc2 0%, var(--paper-deep) 55%, #e2d3b6 100%);
}

.cover-inner {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: max(2.5rem, env(safe-area-inset-top)) 1.5rem max(2.5rem, env(safe-area-inset-bottom));
  /* Let taps on the empty cover fall through to the photo backdrop so the
     photo opens in the viewer; interactive elements stay clickable. */
  pointer-events: none;
}
.cover-inner button, .cover-inner a { pointer-events: auto; }

/* ---------- Optional photo backdrop behind the envelope ----------
   Ships with a warm placeholder (assets/img/placeholder-cover.svg).
   Replace `src` with your own photo or delete .cover-photo-wrap to hide.
   Cream-washed so the envelope and text stay readable. */
.cover-photo-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.cover-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) brightness(1.06);
}
/* The backdrop photo is part of the full-screen viewer — show it is
   clickable (JS only, so a no-JS visitor sees nothing misleading). */
html.js .cover-photo-wrap img { cursor: zoom-in; }
html.js .cover-photo-wrap img:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -6px; }
.cover-photo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 100% at 50% 18%, rgba(247, 241, 229, 0.86) 0%, rgba(247, 241, 229, 0.52) 46%, rgba(233, 220, 194, 0.74) 100%);
  /* Let clicks pass through the wash to the photo below, so the cover
     backdrop stays clickable in the full-screen viewer. */
  pointer-events: none;
}

/* ---------- Envelope illustration ---------- */
.envelope {
  width: min(240px, 62vw);
  height: auto;
  margin: 0 0 1.6rem;
  filter: drop-shadow(0 14px 22px rgba(58, 47, 38, 0.28));
}
.env-body { fill: #fbf6ea; stroke: var(--line); stroke-width: 1.5; }
.env-flap { stroke: var(--line); stroke-width: 1.5; }
.env-front { fill: #f2e8d4; stroke: var(--line); stroke-width: 1.5; }
.env-seal {
  fill: var(--seal);
  stroke: #7d2e1a;
  stroke-width: 1;
}
.env-seal-text {
  font-family: var(--serif-display);
  font-size: 20px;
  font-weight: 700;
  fill: #f6e9d2;
  letter-spacing: 0.04em;
}

.guest-greeting {
  display: none;
  margin: 0 0 0.7rem;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink-soft);
}
.js .guest-greeting.is-visible { display: block; }

.cover-title {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 10vw, 3.9rem);
  line-height: 1;
  margin: 0.4rem 0 0.7rem;
  color: var(--ink);
}

.cover-sub {
  margin: 0 0 1.5rem;
  font-style: italic;
  font-size: 1.02rem;
  color: var(--ink-soft);
}

.cover-meta {
  margin-bottom: 2rem;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.cover-meta p { margin: 0.2rem 0; }
.event-date { font-weight: 600; }

/* ---------- CTA ---------- */
.nav-next {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.9rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  color: var(--ink);
  font-family: var(--serif-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.nav-next:hover { background: var(--seal); border-color: var(--seal); color: #fbf3e3; }
.nav-next:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ==========================================================================
   The Letter
   ========================================================================== */
.letter-panel .panel-inner {
  font-size: 1.06rem;
  color: var(--ink);
}

.letter-date {
  margin: 0 0 2.2rem;
  text-align: right;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.letter-salutation {
  margin: 0 0 1.1rem;
  font-family: var(--serif-display);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--ink);
}

.letter-body p { margin: 0 0 1.1rem; }
.letter-body p:first-of-type::first-letter {
  float: left;
  font-family: var(--serif-display);
  font-size: 3rem;
  line-height: 0.9;
  padding: 0.2rem 0.55rem 0 0;
  color: var(--seal);
}

.letter-signoff {
  margin: 1.8rem 0 0.2rem;
  font-style: italic;
  color: var(--ink-soft);
}

.signature-name {
  margin: 0;
  font-family: var(--serif-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--seal);
  /* hand-written feel */
  transform: rotate(-1.2deg);
  transform-origin: left center;
}

.letter-ps {
  margin-top: 2.4rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--ink-soft);
}

/* ==========================================================================
   Memories — optional photo gallery panel
   Ships with warm placeholders (assets/img/placeholder-memory-*.svg);
   replace `src` on any #gallery-photo-* or delete the section to hide.
   ========================================================================== */
.memories-panel .panel-inner > .eyebrow { text-align: center; }
.memories-title { text-align: center; }
.memories-description {
  margin: 0.8rem auto 0;
  max-width: 30rem;
  text-align: center;
  color: var(--ink-soft);
}

.memory-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 3.5vw, 1.6rem);
  margin-top: 2.2rem;
}

.gallery-item { margin: 0; }
.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  padding: 5px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 16px 32px -24px rgba(58, 47, 38, 0.6);
}
.gallery-item figcaption {
  margin-top: 0.6rem;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.35;
  color: var(--ink-soft);
}

/* ==========================================================================
   Photo viewer (lightbox) — built by main.js only while photo slots exist
   ========================================================================== */
html.js .gallery-item img { cursor: zoom-in; }
html.js .gallery-item { position: relative; }

/* small "view full size" badge on hover / keyboard focus — shows the photo
   is clickable. Purely visual; without JS (no viewer) it never appears. */
html.js .gallery-item::after,
html.js .banner-flyer::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(247, 241, 229, 0.94)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a2f26' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E")
    center / 16px no-repeat;
  border: 1px solid var(--line);
  box-shadow: 0 4px 12px -4px rgba(58, 47, 38, 0.5);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  pointer-events: none;
}
html.js .gallery-item:hover::after,
html.js .gallery-item:focus-within::after,
html.js .banner-flyer:hover::after,
html.js .banner-flyer:focus-within::after {
  opacity: 1;
  transform: none;
}

.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: rgba(38, 30, 24, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.photo-viewer.is-open { display: flex; }
.photo-viewer figure {
  margin: 0;
  max-width: min(92vw, 900px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.photo-viewer img {
  display: block;
  max-width: 100%;
  max-height: 76vh;
  max-height: 76dvh;
  width: auto;
  height: auto;
  border: 6px solid var(--paper);
  border-radius: 8px;
  background: var(--paper-deep); /* mat while loading / if the file is missing */
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.75);
}
.photo-viewer figcaption {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 1.1rem;
  color: #f3ead6;
}
.photo-viewer .pv-unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(72vw, 520px);
  height: min(46vh, 360px);
  border: 6px solid var(--paper);
  border-radius: 8px;
  background: var(--paper-deep);
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-style: italic;
}

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

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

/* ==========================================================================
   Official flyer / banner (optional)
   A wide framed image slot for hosts who already have a designed flyer or
   poster for the gathering — display it so guests can confirm they're in
   the right place. Clicking it opens the same full-screen viewer as the
   gallery photos. Delete the <figure class="banner-flyer"> block to hide.
   ========================================================================== */
.banner-flyer {
  margin: 2rem auto 0;
  max-width: 40rem;
  text-align: center;
}
.banner-flyer img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 3;
  object-fit: cover;
  padding: 6px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 16px 32px -24px rgba(58, 47, 38, 0.6);
}
.banner-flyer figcaption {
  margin-top: 0.6rem;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--ink-soft);
}

/* ==========================================================================
   Film — optional video feature (URL embed)
   Paste any video URL (YouTube, Vimeo, or any embeddable link) into
   data-video-url on .film-card. Guests tap play and the video lazy-loads
   into this frame — nothing loads before then. Leave the URL empty to show
   a gentle hint; delete the block to hide the feature entirely.
   ========================================================================== */
.film-card {
  margin-top: clamp(2.2rem, 6vh, 3rem);
  padding-top: clamp(1.6rem, 4vh, 2.2rem);
  border-top: 1px dashed var(--line);
  text-align: center;
}
.film-label {
  margin: 0;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-soft);
}
.film-frame {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 1rem auto 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: var(--paper-deep); /* mat behind the poster / while loading */
  border: 1px solid var(--line);
  box-shadow: 0 18px 36px -26px rgba(58, 47, 38, 0.55);
}
.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(--seal);
  background: radial-gradient(circle at 32% 28%, #fdfaf2, var(--paper) 60%, var(--paper-deep));
  border: 1px solid var(--gold);
  box-shadow: 0 12px 28px -12px rgba(58, 47, 38, 0.6);
  animation: film-pulse 2.6s ease-in-out infinite;
  transition: transform 0.25s var(--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(58, 47, 38, 0.62);
  color: #fbf3e3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.film-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.film-note {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 18px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-style: italic;
  text-align: center;
  background: var(--paper-deep);
}
.film-external {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--seal);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.film-external:hover { color: var(--gold); border-color: var(--gold); }
.film-external[hidden] { display: none; }
@keyframes film-pulse {
  0%, 100% { box-shadow: 0 12px 28px -12px rgba(58, 47, 38, 0.6), 0 0 0 0 rgba(185, 138, 62, 0.35); }
  50% { box-shadow: 0 12px 28px -12px rgba(58, 47, 38, 0.6), 0 0 0 14px rgba(185, 138, 62, 0); }
}

/* ==========================================================================
   Free Page — optional host's own notes (repeatable blocks)
   A panel of free blocks the host fills in the cockpit's Free Page section:
   each block has a title, free text and an OPTIONAL photo (leave the image
   empty — the block still works without it; the empty frame is removed).
   Leave all blocks empty (or delete the section) to hide the page — the tab
   bar rebuilds itself without it.
   ========================================================================== */
.free-panel { background: var(--paper); text-align: center; }
.free-page-title { text-align: center; }
.free-page-lede {
  margin: 0.8rem auto 0;
  max-width: 30rem;
  color: var(--ink-soft);
}

.free-blocks {
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 4vh, 2.4rem);
  margin-top: clamp(1.8rem, 5vh, 2.6rem);
}
.free-block {
  padding: clamp(1.3rem, 3.5vw, 1.9rem);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: left;
}
.free-title {
  margin: 0 0 0.7rem;
  font-family: var(--serif-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
.free-content {
  font-size: 1.02rem;
  color: var(--ink-soft);
}
.free-content p { margin: 0 0 0.8rem; }
.free-content p:last-child { margin-bottom: 0; }

.free-figure {
  margin: 1.1rem 0 0;
  text-align: center;
}
.free-figure img {
  display: block;
  width: 100%;
  max-width: 26rem;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  margin: 0 auto;
  padding: 5px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 16px 32px -24px rgba(58, 47, 38, 0.6);
}
html.js .free-figure img { cursor: zoom-in; }
html.js .free-figure img:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -6px; }

/* ==========================================================================
   Details
   ========================================================================== */
.details-panel { background: var(--paper); }

.detail-list {
  margin-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.detail-item {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
}
.detail-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--seal);
  padding-top: 0.3rem;
}
.detail-value {
  margin: 0;
  font-family: var(--serif-display);
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--ink);
}
.detail-item .detail-value + .detail-value {
  grid-column: 2;
  margin-top: 0.15rem;
  font-size: 0.98rem;
  font-family: var(--serif-body);
  color: var(--ink-soft);
}

.rsvp-deadline-note, .map-hint {
  margin: 1.5rem 0 0;
  color: var(--ink-soft);
}
.map-hint { font-style: italic; }

/* ==========================================================================
   RSVP
   ========================================================================== */
.rsvp-head { text-align: center; }
.rsvp-description { margin: 0.8rem auto 0; max-width: 30rem; color: var(--ink-soft); }

/* countdown — numbers are filled by the platform's rsvp script */
.countdown {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin: 1.8rem auto 0;
  max-width: 28rem;
}
.count-box {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.8rem 0.3rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: center;
}
.count-box > div {
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 2rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.count-label {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--seal);
}

/* ---------- Form ---------- */
.rsvp-form {
  margin-top: 2.2rem;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 40px -30px rgba(58, 47, 38, 0.5);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group { margin-bottom: 1.1rem; }

.form-group label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.form-group label small { font-weight: 400; color: #8d7d68; }

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: 0.98rem;
  color: var(--ink);
  background: #fdfaf2;
  border: 1px solid rgba(58, 47, 38, 0.25);
  border-radius: 10px;
  transition: border-color 150ms, box-shadow 150ms;
}
.form-group textarea { resize: vertical; min-height: 3.2rem; }

.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(185, 138, 62, 0.25);
}

.form-group .error {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--danger);
}

.field-hint, .contact-hint {
  margin: -0.4rem 0 1.1rem;
  font-size: 0.82rem;
  color: #8d7d68;
}
.contact-hint { margin: -0.3rem 0 1.1rem; }

/* gentle note shown when the guest selects "can't make it" */
.rsvp-note-decline {
  display: none;
  margin: -0.4rem 0 1.1rem;
  padding: 0.7rem 0.95rem;
  font-size: 0.9rem;
  font-style: italic;
  color: #7a4329;
  background: #f4e6d2;
  border-radius: 10px;
}
.rsvp-note-decline.is-visible { display: block; }

#submit-button {
  display: block;
  width: 100%;
  padding: 0.9rem 1.5rem;
  border: none;
  border-radius: 999px;
  background: var(--seal);
  color: #fbf3e3;
  font-family: var(--serif-display);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 180ms var(--ease), transform 180ms var(--ease);
}
#submit-button:hover { background: #7d2e1a; }
#submit-button:focus-visible { outline: 3px solid rgba(185, 138, 62, 0.6); outline-offset: 2px; }
#submit-button:disabled { opacity: 0.6; cursor: wait; }

.loading {
  margin-top: 0.8rem;
  text-align: center;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--seal);
}

/* thank-you / RSVP-closed state injected by the platform script */
.thank-you-message {
  padding: 2.5rem 1rem;
  text-align: center;
}
.thank-you-message h3 {
  margin: 0 0 0.9rem;
  font-family: var(--serif-display);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--ink);
}
.thank-you-message p {
  margin: 0.4rem auto;
  max-width: 28rem;
  color: var(--ink-soft);
}
.thank-you-message small {
  display: block;
  margin-top: 1.2rem;
  font-size: 0.85rem;
  color: #8d7d68;
}

/* ==========================================================================
   Guestbook — platform injects the form/list; style the injected classes
   ========================================================================== */
.guestbook-head { text-align: center; }
.guestbook-description { margin: 0.8rem auto 0; max-width: 30rem; color: var(--ink-soft); }

.guestbook-body { margin-top: 2rem; }

.guestbook-body #guestbookForm {
  padding: clamp(1.4rem, 4vw, 2.2rem);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.guestbook-body .form-control {
  width: 100%;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.8rem;
  font: inherit;
  font-size: 0.98rem;
  color: var(--ink);
  background: #fdfaf2;
  border: 1px solid rgba(58, 47, 38, 0.25);
  border-radius: 10px;
}
.guestbook-body .form-control:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(185, 138, 62, 0.25);
}

.guestbook-body .error {
  display: block;
  margin: -0.4rem 0 0.8rem;
  font-size: 0.8rem;
  color: var(--danger);
}

.guestbook-body .guestbook-chapta { margin: 0.8rem 0; }

.guestbook-body #guestbookForm button {
  width: 100%;
  padding: 0.9rem 1.5rem;
  border: none;
  border-radius: 999px;
  background: var(--seal);
  color: #fbf3e3;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.guestbook-body #guestbookForm button:hover { background: #7d2e1a; }
.guestbook-body .loading-guestbook { margin-top: 0.8rem; text-align: center; font-size: 0.9rem; font-style: italic; color: var(--seal); }

/* injected message list */
.guestbook-wrap { margin-top: 1.6rem; }

.guestbook-entry {
  padding: 1.1rem 1.3rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 0 12px 12px 0;
}
.guestbook-entry + .guestbook-entry { margin-top: 0.9rem; }
.guestbook-entry h5 {
  margin: 0 0 0.3rem;
  font-family: var(--serif-display);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--ink);
}
.guestbook-entry p { margin: 0; color: var(--ink-soft); }
.guestbook-entry small {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8d7d68;
}

.more-guestbook-wrap { margin-top: 1.1rem; text-align: center; }
.more-guestbook-wrap #load-more {
  padding: 0.65rem 1.5rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.more-guestbook-wrap #load-more:hover { background: var(--gold); color: var(--paper); }

/* ==========================================================================
   Closing
   ========================================================================== */
.closing-panel {
  background:
    radial-gradient(140% 90% at 12% 0%, rgba(255, 255, 255, 0.6), transparent 45%),
    radial-gradient(120% 80% at 95% 100%, rgba(201, 160, 90, 0.14), transparent 50%),
    var(--paper);
  text-align: center;
}

.closing-panel .ornament { margin: 0 auto 1.3rem; }

.closing-paragraph {
  margin: 1.4rem auto 0;
  max-width: 30rem;
  font-size: 1.06rem;
  color: var(--ink-soft);
}

.hosts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin: 2rem auto 0;
  max-width: 30rem;
}
.host {
  flex: 1 1 12rem;
  padding: 1.1rem 1rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.host-name {
  display: block;
  font-family: var(--serif-display);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--ink);
}
.host-role {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--seal);
}

.closing-note {
  margin: 2rem 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8d7d68;
}

/* ==========================================================================
   Brand footer (placeholder)
   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 line —
   even when RSVP / Guestbook are stripped by the platform.
   ========================================================================== */
html:not(.js) .app-footer { display: block; padding: 1.6rem 1.5rem 2.6rem; text-align: center; }
html.js .app-footer { display: none; }
html.js .panel .app-footer {
  display: block;
  margin-top: clamp(2rem, 5vh, 3rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.footer-brand {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8d7d68;
}
.footer-brand-name {
  font-family: var(--serif-display);
  font-size: 1.35em;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--seal);
}

/* ==========================================================================
   Powered-by — full-width brand strip (platform credit)
   A slim, full-width credit line pinned between the stage and the tab bar in
   the JS shell (and at the end of the stacked document without JS). The
   engine swaps the brand link at render; the cockpit's Free Powered By field
   can override the whole line.
   ========================================================================== */
html:not(.js) .powered-by {
  width: 100%;
  text-align: center;
  padding: 14px 16px 22px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8d7d68;
}
html.js .powered-by {
  flex: 0 0 auto;
  width: 100%;
  text-align: center;
  padding: 6px 14px;
  border-top: 1px solid rgba(211, 168, 85, 0.25);
  background: rgba(247, 241, 229, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8d7d68;
  z-index: 21;
}
.powered-by a {
  color: var(--seal);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.powered-by a:hover { color: var(--gold); border-color: var(--gold); }
.powered-by a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* ==========================================================================
   Panel navigation — text tabs (icon + label), built by main.js from
   whatever panels actually exist. Scrollable on small screens.
   ========================================================================== */
.panel-nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.45rem 0.75rem calc(0.45rem + env(safe-area-inset-bottom));
  background: var(--ink);
  border-top: 1px solid rgba(211, 168, 85, 0.25);
  z-index: 20;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.panel-nav::-webkit-scrollbar { display: none; }

.nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.85rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(247, 241, 229, 0.74);
  font-family: var(--serif-body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.nav-tab svg { width: 14px; height: 14px; flex: none; opacity: 0.9; }
.nav-tab:hover { color: var(--paper); background: rgba(211, 168, 85, 0.16); }
.nav-tab[aria-selected="true"], .nav-tab.is-current {
  background: var(--gold);
  color: var(--ink);
}
.nav-tab:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--gold);
  color: var(--ink);
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  transition: top 150ms;
}
.skip-link:focus { top: 0; }

/* ==========================================================================
   Accessibility: 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;
  }
  .panel { transform: none; }
}

/* ==========================================================================
   Small screens
   ========================================================================== */
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .detail-item { grid-template-columns: 1fr; gap: 0.15rem; }
  .detail-label { padding-top: 0; }
  .signature-name { transform: none; }
  .memory-gallery { grid-template-columns: repeat(2, 1fr); }
  /* Tabs: left-aligned + scrollable so all labels stay reachable on a
     phone without anything being clipped or shrunk to illegibility. */
  .panel-nav { justify-content: flex-start; }
  .nav-tab { padding: 0.5rem 0.7rem; font-size: 0.78rem; gap: 0.3rem; }
}

/* ==========================================================================
   Print — every panel prints as its own page, nav hidden
   ========================================================================== */
@media print {
  @page { size: A4 portrait; margin: 14mm; }

  html, body { height: auto; overflow: visible; background: #fff; }

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

  .panel {
    position: static;
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    height: auto;
    overflow: visible;
    padding: 0 0 1.5rem;
    break-after: page;
    transition: none;
  }
  .panel:last-child { break-after: auto; }

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

  .panel-nav, .skip-link, .guest-greeting, .powered-by { display: none !important; }
  .cover-photo-wrap { display: none !important; }  /* keep the printed cover as the envelope */
  .photo-viewer { display: none !important; }
  .film-frame iframe { display: none; }  /* a playing video can't print — the poster prints instead */
  .app-footer { display: block !important; padding: 1.6rem 0 0; }

  .cover-panel { min-height: 22cm; }

  body, .letter-panel, .memories-panel, .rsvp-wrap, .guestbook-section, .closing-panel { background: #fff; }

  .detail-item { break-inside: avoid; }
  .gallery-item { break-inside: avoid; }
  .guestbook-entry { break-inside: avoid; }

  a { color: inherit; }
}