/* ==========================================================================
   farewell-tribute-poster — styles
   A cinematic tribute poster for a farewell gathering.
   Warm, editorial, print-friendly. All colours are CSS variables so the
   host/admin can re-theme in one place.
   ========================================================================== */

:root {
  /* Palette — warm ember & gold on deep ink, cream paper */
  --ink:          #14110e;   /* near-black warm brown  */
  --ink-soft:     #2a241e;
  --paper:        #f6f0e4;   /* warm cream             */
  --paper-deep:   #efe6d3;
  --gold:         #c9a24b;   /* muted antique gold     */
  --gold-bright:  #e3c477;
  --ember:        #b4552f;   /* terracotta accent      */
  --text-on-dark: #f2e9d8;
  --text-muted:   #a99a83;   /* muted gold-brown on cream */
  --danger:       #a03c2c;

  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --max-wide:  56rem;
  --max-narrow: 40rem;

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

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  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;               /* allow internal scrolling */
  overflow: hidden;
  background: var(--ink);
}

/* ---------- Panels (progressive enhancement) ---------- */
.panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0;
  opacity: 0;
  transform: translateY(16px);
  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(201, 162, 75, 0.5) 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; }

/* No-JS: the whole invitation stacks as a normal scrolling document
   (the shell must not clip it at one viewport height) */
.no-js .shell { height: auto; overflow: visible; display: block; }
.no-js .stage { overflow: visible; min-height: 0; }
.no-js .app-footer { display: block; }

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

.panel-inner--narrow { max-width: var(--max-narrow); }

/* ---------- Shared type ---------- */
.eyebrow {
  margin: 0 0 1rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ember);
}

.panel h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 6vw, 2.9rem);
  line-height: 1.08;
  font-weight: 600;
  color: var(--ink);
}

.panel h3 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
}

/* Decorative ornament (line + diamond) */
.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
   ========================================================================== */
.cover-panel {
  color: var(--text-on-dark);
  background: linear-gradient(165deg, #2b2118 0%, #14110e 60%, #0d0b09 100%);
}

.cover-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* the hero photo is a clickable link (opens the lightbox); the scrims and
   grain still sit above it so the cover text always reads */
.cover-photo-link {
  position: absolute;
  inset: 0;
  display: block;
}
html.js .cover-photo-link { cursor: zoom-in; }
html.js .cover-photo-link:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -4px; }

.cover-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  /* elegant warm grade */
  filter: saturate(0.85) contrast(1.05) sepia(0.12);
}

/* gradient fallback when no photo is bound: a warm dusk sky */
.cover-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 75% 10%, rgba(196, 122, 62, 0.55), transparent 55%),
    radial-gradient(90% 70% at 15% 85%, rgba(180, 85, 47, 0.45), transparent 60%),
    linear-gradient(165deg, #4a3322 0%, #20170f 55%, #120e0b 100%);
}

.cover-scrim { position: absolute; inset: 0; pointer-events: none; }
.cover-scrim--top {
  background: linear-gradient(to bottom, rgba(12, 9, 7, 0.55), transparent 32%);
}
.cover-scrim--bottom {
  background: linear-gradient(to top, rgba(12, 9, 7, 0.9) 0%, rgba(12, 9, 7, 0.45) 38%, transparent 70%);
}

/* subtle film grain */
.cover-grain {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.cover-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: max(2rem, env(safe-area-inset-top)) 1.5rem max(2rem, env(safe-area-inset-bottom));
  padding-top: 3.5rem;
  padding-bottom: 4.5rem;
}

.guest-greeting {
  display: none;
  margin: 0 0 1.6rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--gold-bright);
}
.js .guest-greeting.is-visible { display: block; }

.cover-eyebrow { color: var(--gold-bright); }

.event-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.9rem, 11vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
  margin: 0.2rem 0 0.6rem;
}

.honoree-name {
  margin: 0.4rem 0 1.1rem;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 4vw, 1.7rem);
  font-style: italic;
  color: var(--text-on-dark);
  opacity: 0.92;
}
.honoree-name-main { color: var(--gold-bright); }

.cover-content .ornament { margin: 0.4rem 0 1rem; }

.event-date {
  margin: 0 0 0.9rem;
  font-size: clamp(0.92rem, 3vw, 1.05rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.cover-tagline {
  max-width: 30rem;
  margin: 0 0 2.2rem;
  font-size: 1.02rem;
  color: rgba(242, 233, 216, 0.82);
}

/* ---------- Primary CTA ---------- */
.nav-next {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.7rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(20, 17, 14, 0.35);
  backdrop-filter: blur(4px);
  color: var(--gold-bright);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease);
}
.nav-next svg { width: 14px; height: 14px; }
.nav-next:hover { background: var(--gold); color: var(--ink); }
.nav-next:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

/* ==========================================================================
   Tribute panel
   ========================================================================== */
.tribute-panel, .details-panel, .closing-panel { background: var(--paper); }

.tribute-paragraph {
  margin-top: 1.6rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 3.4vw, 1.35rem);
  line-height: 1.65;
  color: #3d352b;
}
.tribute-paragraph p + p { margin-top: 1rem; }

.tribute-quote {
  margin: 2.8rem 0;
  padding: 2rem 0.75rem;
  text-align: center;
  border-top: 1px solid rgba(20, 17, 14, 0.14);
  border-bottom: 1px solid rgba(20, 17, 14, 0.14);
}
.tribute-quote-ornament {
  margin: 0 auto 1.1rem;
}
.tribute-quote-text {
  margin: 0 auto;
  max-width: 30rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.25rem, 3.8vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink);
}
.tribute-quote-source {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
}

.moments-title {
  margin: 2.4rem 0 1.2rem;
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--ink);
}

.moments {
  border-top: 1px solid rgba(20, 17, 14, 0.14);
}
.moment {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.2rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(20, 17, 14, 0.14);
}
.moment-year {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--ember);
}
.moment-text {
  margin: 0.15rem 0 0;
  color: #3d352b;
}

/* ==========================================================================
   Details panel
   ========================================================================== */
.detail-list {
  margin-top: 1.8rem;
  border-top: 1px solid rgba(20, 17, 14, 0.14);
}
.detail-item {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1.2rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid rgba(20, 17, 14, 0.14);
}
.detail-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ember);
  padding-top: 0.35rem;
}
.detail-value {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 3.2vw, 1.35rem);
  line-height: 1.4;
  color: var(--ink);
}
.detail-item .detail-value + .detail-value { grid-column: 2; margin-top: 0.2rem; font-size: 0.98rem; color: #5a4f40; }

.rsvp-deadline-note, .map-hint {
  margin: 1.6rem 0 0;
  font-size: 0.98rem;
  color: #5a4f40;
}
.map-hint { font-style: italic; }

/* ==========================================================================
   RSVP panel
   ========================================================================== */
.rsvp-wrap { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%); }

.rsvp-head { text-align: center; }
.rsvp-description { margin: 0.9rem auto 0; max-width: 34rem; color: #5a4f40; }

/* countdown — numbers are filled by the platform's rsvp script */
.countdown {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  margin: 2rem auto 0;
  max-width: 30rem;
}
.count-box {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.9rem 0.4rem;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(20, 17, 14, 0.12);
  border-radius: 12px;
  text-align: center;
}
.count-box > div {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.count-label {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ember);
}

/* ---------- Form ---------- */
.rsvp-form {
  margin-top: 2.4rem;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(20, 17, 14, 0.1);
  border-radius: 18px;
  box-shadow: 0 18px 40px -28px rgba(20, 17, 14, 0.55);
}

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

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

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

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.72rem 0.9rem;
  font: inherit;
  font-size: 0.98rem;
  color: var(--ink);
  background: #fffdf8;
  border: 1px solid rgba(20, 17, 14, 0.22);
  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(201, 162, 75, 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.15rem;
  font-size: 0.8rem;
  color: #8a7a63;
}
.contact-hint { margin: -0.3rem 0 1.15rem; }

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

#submit-button {
  display: block;
  width: 100%;
  padding: 0.95rem 1.5rem;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 180ms var(--ease), transform 180ms var(--ease);
}
#submit-button:hover { background: var(--ember); }
#submit-button:focus-visible { outline: 3px solid rgba(201, 162, 75, 0.6); outline-offset: 2px; }
#submit-button:disabled { opacity: 0.6; cursor: wait; }

.loading {
  margin-top: 0.8rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--ember);
}

/* 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);
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--ink);
}
.thank-you-message p {
  margin: 0.4rem auto;
  max-width: 28rem;
  color: #5a4f40;
}
.thank-you-message small {
  display: block;
  margin-top: 1.2rem;
  font-size: 0.85rem;
  color: #8a7a63;
}

/* ==========================================================================
   Guestbook — platform injects the form/list; style the injected classes
   ========================================================================== */
.guestbook-section { background: linear-gradient(180deg, var(--paper-deep) 0%, var(--paper) 100%); }

.guestbook-head { text-align: center; }
.guestbook-description { margin: 0.9rem auto 0; max-width: 34rem; color: #5a4f40; }

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

.guestbook-body #guestbookForm {
  padding: clamp(1.4rem, 4vw, 2.2rem);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(20, 17, 14, 0.1);
  border-radius: 18px;
}

.guestbook-body .form-control {
  width: 100%;
  padding: 0.72rem 0.9rem;
  margin-bottom: 0.8rem;
  font: inherit;
  font-size: 0.98rem;
  color: var(--ink);
  background: #fffdf8;
  border: 1px solid rgba(20, 17, 14, 0.22);
  border-radius: 10px;
}
.guestbook-body .form-control:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 75, 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.95rem 1.5rem;
  border: none;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.guestbook-body #guestbookForm button:hover { background: var(--ember); }
.guestbook-body .loading-guestbook { margin-top: 0.8rem; text-align: center; font-size: 0.88rem; color: var(--ember); }

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

.guestbook-entry {
  padding: 1.2rem 1.4rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(20, 17, 14, 0.1);
  border-left: 3px solid var(--gold);
  border-radius: 0 12px 12px 0;
}
.guestbook-entry + .guestbook-entry { margin-top: 1rem; }
.guestbook-entry h5 {
  margin: 0 0 0.3rem;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
}
.guestbook-entry p { margin: 0; color: #3d352b; }
.guestbook-entry small {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a7a63;
}

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

/* ==========================================================================
   Closing panel
   ========================================================================== */
.closing-panel { text-align: center; }

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

.closing-paragraph {
  margin: 1.6rem auto 0;
  max-width: 34rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 3.4vw, 1.35rem);
  line-height: 1.65;
  color: #3d352b;
}

.hosts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 2.2rem auto 0;
  max-width: 34rem;
}
.host {
  flex: 1 1 13rem;
  padding: 1.2rem 1rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(20, 17, 14, 0.12);
  border-radius: 14px;
}
.host-name {
  display: block;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
}
.host-role {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ember);
}

.signature {
  margin: 2.4rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--ink);
}
.signature-name {
  font-style: normal;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ember);
}

.closing-note {
  margin: 2rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a7a63;
}

/* ==========================================================================
   Memories gallery (optional photo showcase) — polaroid-style tiles
   ========================================================================== */
.memories-panel { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%); }

.memories-panel .panel-inner > .eyebrow { text-align: center; }
.memories-title { text-align: center; }
.memories-description {
  margin: 0.9rem auto 0;
  max-width: 30rem;
  text-align: center;
  color: #5a4f40;
}

.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;
  /* gentle tilt — photos pinned like keepsakes; straighten on hover */
  transform: rotate(-1.1deg);
  transition: transform 300ms var(--ease), z-index 0s;
}
.gallery-item:nth-child(even) { transform: rotate(1.1deg); }
.gallery-item:hover, .gallery-item:focus-within { transform: none; z-index: 2; }
.gallery-item a { display: block; }
.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  padding: 6px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(20, 17, 14, 0.12);
  border-radius: 8px;
  box-shadow: 0 18px 36px -22px rgba(20, 17, 14, 0.55);
}
.gallery-item figcaption {
  margin-top: 0.6rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.35;
  text-align: center;
  color: #5a4f40;
}

/* small "view full size" badge on hover / keyboard focus — shows the
   photo is clickable. Purely visual; without JS it never appears. */
html.js .gallery-item { position: relative; }
html.js .gallery-item::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(246, 240, 228, 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='%2314110e' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E")
    center / 16px no-repeat;
  border: 1px solid rgba(20, 17, 14, 0.14);
  box-shadow: 0 4px 12px -4px rgba(20, 17, 14, 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 { opacity: 1; transform: none; }

/* ==========================================================================
   Official flyer / banner (optional) — in the Details panel
   ========================================================================== */
.banner-flyer {
  margin: 2.6rem 0 0;
}
.banner-flyer a { display: block; }
.banner-flyer img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 3;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(20, 17, 14, 0.14);
  box-shadow: 0 22px 44px -26px rgba(20, 17, 14, 0.6);
}
.banner-flyer figcaption {
  margin-top: 0.7rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  text-align: center;
  color: #5a4f40;
}

/* ==========================================================================
   Film of memories (optional video) — in the Tribute panel
   ========================================================================== */
.film-card {
  margin-top: 2.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(20, 17, 14, 0.14);
}
.film-label {
  margin: 0 0 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ember);
}
.film-frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #1c150e;
  box-shadow: 0 26px 52px -28px rgba(20, 17, 14, 0.7);
}
.film-open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.film-open img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.film-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.film-play svg {
  width: 74px;
  height: 74px;
  color: var(--gold-bright);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55));
  opacity: 0.95;
  transition: transform 220ms var(--ease);
}
.film-open:hover .film-play svg,
.film-open:focus-visible .film-play svg { transform: scale(1.12); }
.film-hint {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  background: rgba(20, 17, 14, 0.6);
  backdrop-filter: blur(4px);
  color: var(--text-on-dark);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  pointer-events: none;
}
.film-frame iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
.film-external {
  display: inline-block;
  margin-top: 0.8rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ember);
  text-decoration: none;
  border-bottom: 1px solid rgba(180, 85, 47, 0.4);
}
.film-external:hover { color: var(--ink); }
.film-note {
  margin: 0;
  padding: 2.4rem 1.2rem;
  text-align: center;
  font-style: italic;
  color: rgba(242, 233, 216, 0.75);
}

/* ==========================================================================
   Keepsake photo (optional) — closing panel
   ========================================================================== */
.keepsake {
  margin: 2.4rem auto 0;
  max-width: 15rem;
}
.keepsake a { display: block; }
.keepsake img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  padding: 7px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(20, 17, 14, 0.12);
  border-radius: 10px;
  box-shadow: 0 24px 48px -24px rgba(20, 17, 14, 0.6);
  transform: rotate(1.4deg);
  transition: transform 300ms var(--ease);
}
.keepsake a:hover img,
.keepsake a:focus-visible img { transform: none; }
.keepsake figcaption {
  margin-top: 0.7rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: #5a4f40;
}

.closing-cta { margin-top: 2.4rem; }

/* ==========================================================================
   Free page (optional) — repeatable blocks with a title, free text and an
   optional photo. The whole section is removed by the platform when the
   host hides the Free Page category or clears every block, so the nav
   never shows a dead entry. Blocks read as centred poster stanzas.
   ========================================================================== */
.panel-free { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%); }

.panel-free .panel-inner > .eyebrow { text-align: center; }
.panel-free .panel-inner > h2 { text-align: center; }
.free-description {
  margin: 0.9rem auto 0;
  max-width: 30rem;
  text-align: center;
  color: #5a4f40;
}

.free-blocks {
  margin-top: 2.2rem;
  border-top: 1px solid rgba(20, 17, 14, 0.14);
}
.free-block {
  padding: 2rem 0;
  text-align: center;
  border-bottom: 1px solid rgba(20, 17, 14, 0.14);
}
.free-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1.15;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.free-title:focus { outline: none; }
.free-content {
  margin: 1rem auto 0;
  max-width: 34rem;
  font-family: var(--serif);
  font-size: clamp(1.12rem, 3.2vw, 1.3rem);
  line-height: 1.65;
  color: #3d352b;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* the optional photo — margins live on the image itself so a text-only
   block (no photo) collapses the figure to nothing, no empty gap */
.free-media { margin: 0; }
.free-media a { display: block; }
.free-media img {
  display: block;
  margin: 1.6rem auto 0;
  max-width: 24rem;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  padding: 6px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(20, 17, 14, 0.12);
  border-radius: 10px;
  box-shadow: 0 22px 44px -24px rgba(20, 17, 14, 0.55);
  transform: rotate(-0.6deg);
  transition: transform 300ms var(--ease);
}
.free-media a:hover img,
.free-media a:focus-visible img { transform: none; }
html.js .free-media a { cursor: zoom-in; }

/* ==========================================================================
   App footer (brand placeholder) — tucked into the last live panel
   ========================================================================== */
.app-footer {
  margin-top: 2.8rem;
  padding: 1.6rem 0.5rem 0.6rem;
  text-align: center;
  border-top: 1px solid rgba(20, 17, 14, 0.14);
}
.footer-brand {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ember);
}

/* ==========================================================================
   Powered-by brand strip (full width) — between the stage and the
   navigation bar. The engine swaps the literal "Kundangi" token inside
   .link-footer for the platform name at render; the cockpit's Free Powered
   By field can override the whole line. Not part of the free page — it
   stays visible even when the free page is hidden.
   ========================================================================== */
.powered-by {
  flex: 0 0 auto;
  width: 100%;
  text-align: center;
  padding: 0.6rem 1rem;
  background: var(--ink);
  border-top: 1px solid rgba(201, 162, 75, 0.22);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.powered-by .link-footer { color: var(--gold); }

/* ==========================================================================
   Photo viewer (lightbox) — built by main.js only while [data-lightbox]
   photos exist; every photo opens full size with zoom + open-original.
   ========================================================================== */
html.js a[data-lightbox] { cursor: zoom-in; }

.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(13, 10, 8, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.photo-viewer.is-open { display: flex; }

.pv-btn {
  position: absolute;
  z-index: 2;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink);
  background: var(--gold-bright);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease, background 0.15s ease;
}
.pv-btn:hover { transform: scale(1.08); background: var(--gold); }
.pv-btn:focus-visible { outline: 2px solid var(--text-on-dark); outline-offset: 2px; }
.pv-close { top: 1rem; right: 1rem; }
.pv-prev { left: 0.6rem; top: 50%; transform: translateY(-50%); }
.pv-next { right: 0.6rem; top: 50%; transform: translateY(-50%); }
.pv-prev:hover, .pv-next:hover { transform: translateY(-50%) scale(1.08); }

/* image stage — scrollable so a zoomed photo can be panned */
.pv-stage {
  max-width: min(92vw, 780px);
  max-height: 76vh;
  max-height: 76dvh;
  overflow: auto;
  border-radius: 14px;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
}
.pv-stage.is-zoomed { cursor: grab; }
.pv-stage.is-zoomed.is-dragging { cursor: grabbing; }
.pv-stage::-webkit-scrollbar { width: 8px; height: 8px; }
.pv-stage::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.35); border-radius: 4px; }

.pv-stage figure { margin: 0; text-align: center; }
.pv-stage img {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  max-height: 72dvh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  background: var(--paper-deep); /* mat while loading / if missing */
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  transform-origin: center;
  transition: transform 0.15s ease;
  will-change: transform;
}
.pv-stage.is-zoomed img { user-select: none; -webkit-user-select: none; }
.pv-stage figcaption {
  margin-top: 0.9rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text-on-dark);
}
.pv-unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  padding: 2rem;
  text-align: center;
  color: var(--gold-bright);
  font-weight: 500;
}

/* action bar: zoom + open original */
.pv-actions {
  position: absolute;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  z-index: 2;
}
.pv-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--text-on-dark);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.pv-pill:hover { background: rgba(255, 255, 255, 0.25); }
.pv-pill:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.pv-zoom[aria-pressed="true"] { background: var(--gold-bright); color: var(--ink); }
.pv-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(242, 233, 216, 0.85);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Panel navigation — a TEXT toolbar: ‹ Previous / Next › + live status
   ("2 / 7 · Tribute"), built and updated by main.js. Clear, concise, and
   easy to operate on any screen.
   ========================================================================== */
.panel-nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom));
  background: var(--ink);
  border-top: 1px solid rgba(201, 162, 75, 0.22);
  z-index: 20;
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0 0.95rem;
  border: 1px solid rgba(242, 233, 216, 0.28);
  border-radius: 999px;
  background: transparent;
  color: var(--text-on-dark);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 200ms, color 200ms, border-color 200ms, transform 160ms;
}
.nav-btn:hover:not(:disabled) { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.nav-btn:active:not(:disabled) { transform: scale(0.97); }
.nav-btn:disabled { opacity: 0.35; cursor: default; }
.nav-btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.nav-arrow-icon { font-size: 1.2rem; line-height: 1; }

.nav-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 4.6rem;
  padding: 0 0.4rem;
  line-height: 1.25;
  text-align: center;
}
.nav-count {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.nav-name {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-on-dark);
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 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; }
  .moment { grid-template-columns: 4.2rem 1fr; gap: 0.8rem; }
  .cover-content { padding-top: 4.5rem; padding-bottom: 5.5rem; }
}

/* Medium & small screens: gallery drops to two columns, toolbar stays one
   row and compacts so the text buttons are never cut off */
@media (max-width: 820px) {
  .memory-gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .panel-nav { gap: 0.4rem; padding-left: 0.5rem; padding-right: 0.5rem; }
  .nav-btn { padding: 0 0.7rem; font-size: 0.8rem; }
  .nav-name { max-width: 6rem; font-size: 0.8rem; }
  .nav-count { font-size: 0.64rem; }
  .film-play svg { width: 58px; height: 58px; }
  .film-hint { bottom: 0.8rem; }
}

/* Very narrow phones: keep the toolbar compact enough to never wrap */
@media (max-width: 380px) {
  .panel-nav { gap: 0.25rem; }
  .nav-btn { padding: 0 0.55rem; }
  .nav-status { min-width: 3.8rem; padding: 0 0.2rem; }
  .nav-name { max-width: 4.6rem; }
}

/* ==========================================================================
   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, .cover-grain, .guest-greeting, .powered-by { display: none !important; }
  .photo-viewer { display: none !important; }

  .gallery-item, .banner-flyer, .keepsake, .film-frame, .free-block { break-inside: avoid; }
  .gallery-item { transform: none; }
  .keepsake img { transform: none; }

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

  body { color: #000; }
  .tribute-panel, .details-panel, .closing-panel, .panel-free { background: #fff; }
  .rsvp-wrap { background: #fff; }

  a { color: inherit; }
}