:root {
  /* Core surfaces */
  --invitation-cream: #f7f2e9;
  --invitation-paper: #fffcf5;
  --invitation-ivory: #fffcf6;

  /* Text */
  --invitation-ink: #241f28;
  --invitation-muted: #8a7f76;

  /* Accents: muted lavender + deep plum/violet */
  --invitation-lavender: #a48fc4;
  --invitation-lavender-soft: #dcd0e8;
  --invitation-plum: #5c4d73;
  --invitation-plum-deep: #453a5c;

  /* Legacy alias kept for the not-found page, same color role as --invitation-plum */
  --invitation-burgundy: #5c4d73;

  /* Shadows: soft, warm neutral (not cool gray) */
  --invitation-shadow: rgba(58, 46, 38, 0.16);
  --invitation-shadow-strong: rgba(50, 40, 34, 0.24);
  --invitation-shadow-soft: rgba(58, 46, 38, 0.09);

  --invitation-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --invitation-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  scroll-behavior: smooth;
}

html:has(body.invitation-shell) {
  height: 100%;
}

body.invitation-shell {
  margin: 0;
  min-height: 100%;
  /* Measured header is ~65px at desktop; the old 5.75rem (~92px) made
     .home-hero's min-height undershoot the viewport by ~27px, so the next
     section heading peeked under the quick-action row at 100% zoom. */
  --invitation-header-offset: 4.25rem;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.9), transparent 24rem),
    radial-gradient(circle at 88% 14%, rgba(164, 143, 196, 0.16), transparent 22rem),
    radial-gradient(circle at 50% 96%, rgba(92, 77, 115, 0.07), transparent 26rem),
    linear-gradient(150deg, #fbf7ef 0%, #f1e9db 100%);
  color: var(--invitation-ink);
  font-family: var(--font-app, "Cinzel", "Cormorant Garamond", Georgia, "Times New Roman", serif);
}

.invitation-page .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The personal invitation intro (greeting + 3D invitation) is a full-screen
   ritual: the site header/nav must not be visible until the guest has
   entered the homepage on the other side of the transition. */
body.invitation-personal header {
  display: none;
}

/* With the header hidden there is no header height to reserve; !important
   guards against the mobile header-offset override below, which otherwise
   wins the cascade at narrow widths and would leave a phantom gap. */
body.invitation-personal {
  --invitation-header-offset: 0px !important;
}

/* Composited warm brighten during exit. Opacity avoids repainting the
   multi-layer body gradient throughout the transition. */
body.invitation-personal .invitation-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background: rgba(255, 253, 248, 0.72);
  opacity: 0;
  transition: opacity 650ms var(--invitation-ease);
}

body.invitation-personal.is-entering-home .invitation-page::after {
  opacity: 0.42;
}

body.invitation-shell main {
  padding-bottom: 0 !important;
}

/* Minimal, more polished header on the invitation-scene pages only */
body.invitation-shell .site-navbar {
  background: rgba(255, 252, 246, 0.82);
  border-bottom-color: rgba(164, 143, 196, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.invitation-shell .site-brand-mark {
  letter-spacing: 0.03em;
}

body.invitation-shell .site-brand-date {
  color: var(--invitation-lavender);
  opacity: 0.9;
  letter-spacing: 0.07em;
}

.invitation-page {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  padding: 0 1rem clamp(1.5rem, 4vh, 3rem);
}

.invitation-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 46rem 34rem at 50% 40%, rgba(255, 255, 255, 0.45), transparent 68%);
}

.paper-grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.24;
  background-image:
    repeating-linear-gradient(0deg, rgba(95, 90, 86, 0.035) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 30% 20%, rgba(164, 143, 196, 0.05), transparent 18rem);
  mix-blend-mode: multiply;
}

/* ── Premium editorial homepage hero ── */

/* The base body background above is percentage-positioned relative to the
   full scrollable page height, which is fine for short pages but on the
   tall single-page homepage it means each section scrolls through a
   different, unrelated slice of that gradient — the below-hero sections
   visibly drift from the hero's bright ivory tone into a cooler/tanner
   band lower down. Pin the ambient gradients to the viewport instead (so
   they read the same regardless of scroll position) and bring the base
   tone in line with the hero overlay's ivory (#fffcf6) rather than the
   tanner #f1e9db used elsewhere, so hero and below-hero sections feel like
   one continuous surface. */
body.home-shell {
  /* Exact measured header height so the hero fills the first viewport
     at 100% zoom without the next section peeking underneath. */
  --invitation-header-offset: 65px;
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.8), transparent 34rem),
    radial-gradient(circle at 88% 12%, rgba(164, 143, 196, 0.1), transparent 30rem),
    linear-gradient(180deg, #fffcf6 0%, #fbf6ec 100%);
  background-attachment: fixed, fixed, fixed;
}

@media (max-width: 767px) {
  /* Fixed attachment can jitter on mobile browsers as the address bar
     collapses/expands; fall back to normal scrolling there. */
  body.home-shell {
    background-attachment: scroll, scroll, scroll;
  }
}

body.home-shell .invitation-page {
  padding: 0;
  overflow-x: hidden;
  overflow-y: visible;
}

body.home-shell .invitation-page::before,
body.home-shell .paper-grain {
  display: none;
}

.home-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Fill exactly the remaining viewport under the header. The previous
     max(680px, …) floor could still leave a shortfall when the header
     offset was overestimated, and is unnecessary once the offset is
     accurate — the flex column + quick-action row define the bottom. */
  min-height: calc(100svh - var(--invitation-header-offset));
  animation: homeHeroEnter 750ms var(--invitation-ease) both;
}

@keyframes homeHeroEnter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Homepage-only: trim the header's default bottom margin so the hero feels
   connected to the header instead of floating below a blank band.
   Bootstrap's .mb-3 utility ships as `margin-bottom: 1rem !important`, so a
   plain override here is silently ignored by the cascade — this is the
   exact 16px ivory strip that was still showing under the navbar. */
body.home-shell .site-navbar.mb-3 {
  margin-bottom: 0 !important;
}

/* Large, immersive right-side visual: the invitation photo behaves as the
   hero's atmosphere/background, not a separate thumbnail or card. */
.home-hero-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("/images/wedding-bg-img.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 68% 42%;
  animation: homeHeroFloat 20s ease-in-out infinite;
  will-change: transform;
}

.home-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    92deg,
    var(--invitation-ivory) 0%,
    rgba(255, 252, 246, 0.97) 30%,
    rgba(255, 252, 246, 0.72) 40%,
    rgba(255, 252, 246, 0.34) 49%,
    rgba(255, 252, 246, 0.08) 57%,
    transparent 66%
  );
}

.home-hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: clamp(1.75rem, 4.5vh, 2.75rem);
}

.home-hero-content {
  max-width: 40rem;
}

/* Shared horizontal padding for homepage containers. Keep Bootstrap's
   centered max-width behavior — do NOT left-anchor containers with
   margin-inline: 0 auto (that left a huge empty right gutter). */
.home-hero-inner > .container-xl,
.home-section-inner,
.home-quick-actions-wrap {
  --home-edge-pad: clamp(1.25rem, 3.5vw, 2.5rem);
  padding-inline: var(--home-edge-pad);
}

@media (min-width: 992px) {
  /* Bring hero content close under the header (small, intentional gap only).
     Hero editorial text stays left within its container; lower sections
     remain centered page containers. */
  .home-hero-inner {
    align-items: flex-start;
    padding-top: clamp(0.4rem, 1.25vh, 1rem);
    padding-bottom: clamp(2.5rem, 6vh, 4rem);
  }

  .home-hero-content {
    margin-top: 0;
  }

  .home-countdown-box strong {
    font-size: 2.1rem;
  }
}

/* Wide desktop only: shift the hero editorial column left as one block.
   Does not apply to quick-actions or lower sections. */
@media (min-width: 1200px) {
  .home-hero-content {
    margin-left: -3.75rem;
  }
}

.home-eyebrow {
  position: relative;
  display: inline-block;
  margin-bottom: 1.1rem;
  padding-left: 1.9rem;
  color: var(--invitation-plum);
  font-family: var(--font-app-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.home-eyebrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1.35rem;
  height: 1px;
  background: var(--invitation-lavender);
}

.home-title {
  margin: 0 0 1.3rem;
  color: var(--invitation-ink);
  font-family: var(--font-brand, "Plebeya Swash", Georgia, serif);
  font-size: clamp(2.9rem, 6.4vw, 4.75rem);
  font-weight: 400;
  line-height: 1.12;
}

.home-title-name {
  display: block;
}

.home-title-divider {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.42em 0 0.5em;
}

.home-title-divider::before,
.home-title-divider::after {
  content: "";
  display: block;
  height: 1px;
  width: 2.5rem;
  background: linear-gradient(90deg, var(--invitation-lavender-soft), transparent);
}

.home-title-divider::after {
  background: linear-gradient(90deg, transparent, var(--invitation-lavender-soft));
}

.home-title-divider svg {
  flex-shrink: 0;
  color: var(--invitation-lavender);
}

.home-date {
  margin: 0 0 0.55rem;
  color: var(--invitation-plum-deep);
  font-family: var(--font-app-heading);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.2em;
}

.home-venue {
  margin: 0 0 1.5rem;
  color: var(--invitation-muted);
  font-family: var(--font-app-heading);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  line-height: 1.65;
}

.home-venue strong {
  display: block;
  color: var(--invitation-ink);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.home-venue span {
  display: block;
  text-transform: uppercase;
}

.home-copy {
  max-width: 34ch;
  margin: 0 0 1.9rem;
  color: var(--invitation-ink);
  font-size: 1.05rem;
  line-height: 1.7;
}

.home-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.35rem;
  border-radius: 999px;
  padding: 0 2.15rem;
  font-family: var(--font-app-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    transform 220ms var(--invitation-ease-out),
    box-shadow 220ms var(--invitation-ease-out),
    filter 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    color 220ms ease;
}

.home-btn-primary {
  border: 1px solid rgba(255, 253, 248, 0.22);
  background: linear-gradient(150deg, var(--invitation-plum) 0%, var(--invitation-plum-deep) 100%);
  box-shadow: 0 1rem 2rem rgba(60, 50, 75, 0.3), inset 0 0 0 1px rgba(255, 253, 248, 0.12);
  color: var(--invitation-ivory);
}

.home-btn-primary:hover,
.home-btn-primary:focus-visible {
  filter: brightness(1.07);
  box-shadow: 0 1.2rem 2.3rem rgba(60, 50, 75, 0.34), inset 0 0 0 1px rgba(255, 253, 248, 0.14);
  color: var(--invitation-ivory);
  transform: translateY(-2px);
}

.home-btn-primary:active {
  transform: translateY(0) scale(0.98);
  filter: brightness(1);
}

.home-btn-secondary {
  border: 1.5px solid var(--invitation-lavender);
  background: rgba(164, 143, 196, 0.07);
  box-shadow: 0 0.5rem 1.1rem var(--invitation-shadow-soft);
  color: var(--invitation-plum-deep);
}

.home-btn-secondary:hover,
.home-btn-secondary:focus-visible {
  border-color: var(--invitation-plum);
  background: rgba(164, 143, 196, 0.16);
  color: var(--invitation-plum-deep);
  transform: translateY(-2px);
}

.home-btn-secondary:active {
  transform: translateY(0) scale(0.98);
}

.home-btn:focus-visible {
  outline: 2px solid var(--invitation-lavender);
  outline-offset: 3px;
}

.home-countdown {
  display: flex;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(164, 143, 196, 0.22);
}

.home-countdown-box {
  padding-right: 1.5rem;
  margin-right: 1.5rem;
  border-right: 1px solid rgba(164, 143, 196, 0.22);
  text-align: left;
}

.home-countdown-box:last-child {
  padding-right: 0;
  margin-right: 0;
  border-right: none;
}

.home-countdown-box strong {
  display: block;
  color: var(--invitation-plum-deep);
  font-family: var(--font-brand, "Plebeya Swash", Georgia, serif);
  font-size: clamp(1.7rem, 2.6vw, 2.15rem);
  font-weight: 400;
  line-height: 1.15;
}

.home-countdown-box span {
  display: block;
  margin-top: 0.2rem;
  color: var(--invitation-muted);
  font-family: var(--font-app-heading);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home-countdown-complete {
  margin: 0.75rem 0 0;
  color: var(--invitation-plum-deep);
  font-weight: 600;
}

.home-quick-actions-wrap {
  position: relative;
  z-index: 3;
  /* No negative margin: keeps the hero bottom boundary stable across
     browser zoom levels and avoids the next section peeking underneath. */
  margin-top: 0;
  padding-top: 0.35rem;
  padding-bottom: 1.35rem;
  box-sizing: border-box;
  max-width: 100%;
}

.home-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
}

.home-quick-action {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  gap: 0.65rem;
  padding: 1rem 1.05rem;
  border-radius: 1.1rem;
  background: rgba(255, 252, 246, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1.1rem 2.4rem rgba(50, 40, 34, 0.16), 0 0 0 1px rgba(164, 143, 196, 0.18);
  color: var(--invitation-ink);
  text-decoration: none;
  overflow: hidden;
  transition: transform 220ms var(--invitation-ease-out), box-shadow 220ms var(--invitation-ease-out), background-color 220ms ease;
}

.home-quick-action:hover,
.home-quick-action:focus-visible {
  background: rgba(255, 252, 246, 1);
  box-shadow: 0 1.3rem 2.6rem rgba(50, 40, 34, 0.16), 0 0 0 1px rgba(164, 143, 196, 0.28);
  transform: translateY(-3px);
}

.home-quick-action:focus-visible {
  outline: 2px solid var(--invitation-lavender);
  outline-offset: 2px;
}

.home-quick-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(164, 143, 196, 0.14);
  color: var(--invitation-plum);
}

.home-quick-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.home-quick-text strong {
  font-family: var(--font-app-heading);
  font-size: 0.82rem;
  font-weight: 700;
}

.home-quick-text span {
  color: var(--invitation-muted);
  font-size: 0.72rem;
}

@keyframes homeHeroFloat {
  0%,
  100% {
    transform: scale(1.02) translate(0, 0);
  }

  50% {
    transform: scale(1.035) translate(-0.4%, -0.5%);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .home-hero-overlay {
    background: linear-gradient(
      92deg,
      var(--invitation-ivory) 0%,
      rgba(255, 252, 246, 0.97) 34%,
      rgba(255, 252, 246, 0.78) 46%,
      rgba(255, 252, 246, 0.4) 56%,
      rgba(255, 252, 246, 0.1) 66%,
      transparent 76%
    );
  }
}

@media (max-width: 767px) {
  .home-hero {
    min-height: 0;
    overflow: visible;
  }

  .home-hero-visual {
    opacity: 0.5;
    animation: none;
  }

  .home-hero-overlay {
    background: linear-gradient(
      178deg,
      var(--invitation-ivory) 0%,
      rgba(255, 252, 246, 0.97) 46%,
      rgba(255, 252, 246, 0.9) 100%
    );
  }

  .home-hero-inner {
    padding-top: clamp(0.85rem, 2.5vh, 1.25rem);
    padding-bottom: clamp(1.75rem, 6vh, 2.5rem);
  }

  .home-hero-content {
    max-width: none;
    margin-top: 0;
    margin-left: 0;
  }

  .home-title {
    font-size: clamp(2.15rem, 10vw, 3rem);
  }

  .home-copy {
    max-width: none;
  }

  .home-quick-actions-wrap {
    margin-top: 0;
    padding-top: 0.5rem;
    padding-bottom: 0.85rem;
  }

  .home-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-quick-action {
    background: rgba(255, 252, 246, 1);
  }

  .home-section {
    padding-block: 1.1rem;
  }

  .home-section-head {
    margin-bottom: 0.85rem;
  }
}

@media (max-width: 480px) {
  .home-countdown-box {
    padding-right: 0.9rem;
    margin-right: 0.9rem;
    margin-bottom: 0.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-visual {
    animation: none;
  }
}

/* ── Homepage single-page sections (Davet Detayları / Konum / Galeri) ── */

.home-section {
  position: relative;
  padding-block: 1.5rem;
  border-top: 0;
  background: transparent;
}

.home-section-head {
  max-width: 38rem;
  margin-bottom: 1rem;
}

.home-section-title {
  margin: 0 0 0.4rem;
  color: var(--invitation-ink);
  font-family: var(--font-brand, "Plebeya Swash", Georgia, serif);
  font-size: clamp(1.85rem, 3.2vw, 2.45rem);
  font-weight: 400;
  line-height: 1.15;
}

.home-section-copy {
  margin: 0;
  max-width: 44ch;
  color: var(--invitation-muted);
  font-size: 0.94rem;
  line-height: 1.6;
}

/* Düğün Detayları — two-column premium stationery spread:
   left ivory details card + right plum RSVP card, balanced heights. */
.home-section-details {
  padding-block: 1.35rem 1.1rem;
}

.home-details-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(1.1rem, 2.8vw, 1.85rem);
  min-width: 0;
}

.home-details-stationery {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: clamp(1.35rem, 2.8vw, 1.9rem) clamp(1.25rem, 2.6vw, 1.85rem) 1.5rem;
  border-radius: 1.05rem;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.97) 0%, rgba(251, 246, 236, 0.94) 100%);
  box-shadow:
    0 0.65rem 1.7rem rgba(58, 46, 38, 0.07),
    0 0 0 1px rgba(164, 143, 196, 0.14);
}

/* Corner/edge decorations: anchored flush to the card corners and faded
   toward the content with a soft mask, so they read as printed stationery
   ornaments rather than pasted images. Always behind the text (z-index 0)
   and clipped by the card's overflow. */
.home-details-corner-accent {
  position: absolute;
  z-index: 0;
  top: -0.2rem;
  right: -0.2rem;
  width: 5.25rem;
  height: auto;
  opacity: 0.32;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: radial-gradient(circle at top right, #000 45%, transparent 95%);
  mask-image: radial-gradient(circle at top right, #000 45%, transparent 95%);
}

.home-details-sprig {
  position: absolute;
  z-index: 0;
  left: -0.5rem;
  bottom: -0.55rem;
  width: 4.5rem;
  height: auto;
  opacity: 0.38;
  pointer-events: none;
  user-select: none;
  transform: rotate(-10deg);
  -webkit-mask-image: radial-gradient(circle at bottom left, #000 50%, transparent 96%);
  mask-image: radial-gradient(circle at bottom left, #000 50%, transparent 96%);
}

.home-details-seal {
  position: relative;
  z-index: 1;
  display: block;
  width: 2.85rem;
  height: auto;
  margin: 0.95rem auto 0;
  opacity: 0.85;
  filter: drop-shadow(0 2px 4px rgba(58, 46, 38, 0.18));
  pointer-events: none;
  user-select: none;
}

.home-details-stationery::before {
  content: "";
  position: absolute;
  inset: 0.55rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(164, 143, 196, 0.16);
  pointer-events: none;
}

.home-details-stationery-head {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 1.15rem;
}

.home-details-title {
  margin: 0;
  color: var(--invitation-plum-deep);
  font-family: var(--font-app-heading);
  font-size: clamp(1.05rem, 1.9vw, 1.28rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.25;
  text-transform: uppercase;
}

.home-details-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 0.75rem auto 0.7rem;
  max-width: 14rem;
}

.home-details-rule-line {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(164, 143, 196, 0.55), transparent);
}

.home-details-rule-heart {
  flex-shrink: 0;
  color: var(--invitation-lavender);
  opacity: 0.92;
}

.home-details-intro {
  margin: 0 auto;
  max-width: 34ch;
  color: var(--invitation-muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.home-details-timeline {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-details-item {
  display: grid;
  grid-template-columns: 2.15rem minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  padding: 0.72rem 0.15rem;
  border-bottom: 1px solid rgba(164, 143, 196, 0.14);
}

.home-details-item:last-child {
  border-bottom: 0;
}

.home-details-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  color: var(--invitation-plum);
  opacity: 0.88;
}

.home-details-text {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.home-details-text strong {
  color: var(--invitation-ink);
  font-family: var(--font-app-heading);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

.home-details-text span {
  color: var(--invitation-muted);
  font-family: var(--font-app-heading);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Inline RSVP / LCV card — dark plum stationery, right column ──
   The card itself lives in the shared _RsvpForm partial; these wrappers
   host it on the homepage grid and on the standalone /lcv page. */
.home-rsvp-slot {
  display: flex;
  min-width: 0;
  scroll-margin-top: calc(var(--invitation-header-offset, 4.25rem) + 1rem);
}

.home-rsvp-slot .home-rsvp-card {
  flex: 1 1 auto;
}

.rsvp-standalone {
  display: flex;
  width: min(100%, 30rem);
  margin-inline: auto;
}

.rsvp-standalone .home-rsvp-card {
  flex: 1 1 auto;
}

.home-rsvp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: clamp(1.35rem, 2.8vw, 1.9rem) clamp(1.25rem, 2.6vw, 1.85rem) clamp(1.5rem, 2.8vw, 1.85rem);
  border-radius: 1.05rem;
  background:
    radial-gradient(circle at 14% 0%, rgba(220, 208, 232, 0.14), transparent 60%),
    linear-gradient(165deg, var(--invitation-plum) 0%, var(--invitation-plum-deep) 100%);
  background-image:
    url("/images/textures/plum-paper-texture.webp"),
    radial-gradient(circle at 14% 0%, rgba(220, 208, 232, 0.14), transparent 60%),
    linear-gradient(165deg, var(--invitation-plum) 0%, var(--invitation-plum-deep) 100%);
  background-size: cover, auto, auto;
  background-blend-mode: overlay, normal, normal;
  box-shadow:
    0 0.9rem 2.1rem rgba(40, 32, 52, 0.28),
    0 0 0 1px rgba(255, 253, 248, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--invitation-ivory);
}

.home-rsvp-card::before {
  content: "";
  position: absolute;
  inset: 0.55rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 253, 248, 0.16);
  pointer-events: none;
}

.home-rsvp-corner {
  position: absolute;
  z-index: 0;
  right: -0.25rem;
  bottom: -0.25rem;
  width: 7rem;
  height: auto;
  opacity: 0.28;
  mix-blend-mode: luminosity;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: radial-gradient(circle at bottom right, #000 40%, transparent 92%);
  mask-image: radial-gradient(circle at bottom right, #000 40%, transparent 92%);
}

.home-rsvp-head {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 1.1rem;
}

.home-rsvp-title {
  margin: 0;
  color: var(--invitation-ivory);
  font-family: var(--font-app-heading);
  font-size: clamp(1.05rem, 1.9vw, 1.28rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.25;
  text-transform: uppercase;
}

.home-rsvp-rule .home-details-rule-line {
  background: linear-gradient(90deg, transparent, rgba(220, 208, 232, 0.5), transparent);
}

.home-rsvp-rule .home-details-rule-heart {
  color: var(--invitation-lavender-soft);
}

.home-rsvp-copy {
  margin: 0.7rem auto 0;
  max-width: 30ch;
  color: rgba(255, 252, 246, 0.78);
  font-size: 0.86rem;
  line-height: 1.55;
}

.home-rsvp-form {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.35rem;
  flex: 1;
}

.home-rsvp-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.home-rsvp-field label {
  color: rgba(255, 252, 246, 0.72);
  font-family: var(--font-app-heading);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.home-rsvp-input,
.home-rsvp-select {
  width: 100%;
  min-height: 2.85rem;
  padding: 0 1rem;
  border: 1px solid rgba(255, 253, 248, 0.22);
  border-radius: 0.65rem;
  background: rgba(255, 253, 248, 0.08);
  color: var(--invitation-ivory);
  font-family: var(--font-app, "Cinzel", "Cormorant Garamond", Georgia, serif);
  font-size: 0.92rem;
  transition: border-color 200ms ease, background-color 200ms ease;
}

.home-rsvp-input::placeholder {
  color: rgba(255, 252, 246, 0.45);
}

.home-rsvp-input[readonly] {
  background: rgba(255, 253, 248, 0.05);
  color: rgba(255, 252, 246, 0.85);
  cursor: default;
}

.home-rsvp-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e7ddf0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.2rem;
  cursor: pointer;
}

.home-rsvp-select option {
  color: var(--invitation-ink);
}

.home-rsvp-input:focus-visible,
.home-rsvp-select:focus-visible {
  outline: none;
  border-color: rgba(220, 208, 232, 0.75);
  background: rgba(255, 253, 248, 0.13);
}

.home-rsvp-hint {
  margin: -0.15rem 0 0;
  color: rgba(255, 252, 246, 0.62);
  font-size: 0.78rem;
  line-height: 1.5;
}

.home-rsvp-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: auto;
  min-height: 3.1rem;
  border: 1px solid rgba(255, 253, 248, 0.24);
  border-radius: 999px;
  background: linear-gradient(150deg, rgba(255, 253, 248, 0.16) 0%, rgba(255, 253, 248, 0.06) 100%);
  color: var(--invitation-ivory);
  cursor: pointer;
  font-family: var(--font-app-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform 220ms var(--invitation-ease-out), background-color 220ms ease, box-shadow 220ms ease;
}

.home-rsvp-submit svg {
  flex-shrink: 0;
  opacity: 0.85;
}

.home-rsvp-submit:hover,
.home-rsvp-submit:focus-visible {
  background: linear-gradient(150deg, rgba(255, 253, 248, 0.24) 0%, rgba(255, 253, 248, 0.1) 100%);
  transform: translateY(-2px);
}

.home-rsvp-submit:focus-visible {
  outline: 2px solid var(--invitation-lavender-soft);
  outline-offset: 3px;
}

.home-rsvp-submit:active {
  transform: translateY(0) scale(0.98);
}

.home-rsvp-submit:disabled,
.home-rsvp-submit.is-loading {
  opacity: 0.65;
  cursor: wait;
  transform: none;
}

/* Secondary in-card action ("update my response") on the success state. */
.home-rsvp-submit--ghost {
  min-height: 2.7rem;
  border-color: rgba(255, 253, 248, 0.18);
  background: transparent;
  font-size: 0.72rem;
}

/* Validation + error messaging inside the plum card: soft rose so it is
   clearly an error but does not clash with the stationery palette. */
.home-rsvp-alert {
  margin: 0;
  padding: 0.6rem 0.85rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(236, 189, 189, 0.4);
  background: rgba(150, 90, 90, 0.22);
  color: #f2d7d7;
  font-size: 0.82rem;
  line-height: 1.5;
}

.home-rsvp-field-error {
  color: #efc9c9;
  font-size: 0.76rem;
  line-height: 1.4;
}

/* Success state after an inline submit — rendered in place of the form. */
.home-rsvp-success {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  justify-content: center;
  padding-block: 0.75rem 0.35rem;
  text-align: center;
}

.home-rsvp-success-name {
  margin: 0;
  color: var(--invitation-ivory);
  font-size: clamp(1.5rem, 3vw, 1.95rem);
}

.home-rsvp-success-msg {
  margin: 0;
  max-width: 30ch;
  color: rgba(255, 252, 246, 0.82);
  font-size: 0.9rem;
  line-height: 1.6;
}

.home-rsvp-success .home-rsvp-submit--ghost {
  margin-top: 0.6rem;
}

/* Focusable heading for post-swap focus management — no visible ring. */
.home-rsvp-title:focus {
  outline: none;
}

/* Konum — wide centered venue + map composition (~35% / 65%). */
.home-section-map {
  padding-block: 1.15rem 1.4rem;
}

.home-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.35fr) minmax(0, 0.65fr);
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  min-width: 0;
  width: 100%;
}

.home-map-copyblock {
  min-width: 0;
  text-align: left;
}

.home-map-copyblock .home-section-title {
  margin-bottom: 0.85rem;
}

.home-map-venue {
  display: block;
  color: var(--invitation-ink);
  font-family: var(--font-app-heading);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  font-weight: 700;
  line-height: 1.3;
}

.home-map-place {
  margin: 0.3rem 0 0;
  color: var(--invitation-muted);
  font-family: var(--font-app-heading);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-map-copy {
  margin: 0.85rem 0 0;
  max-width: 36ch;
  color: var(--invitation-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.home-map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.15rem;
}

.home-map-frame {
  position: relative;
  width: 100%;
  min-width: 0;
  height: clamp(22rem, 32vw, 28rem);
  overflow: hidden;
  border-radius: 1rem;
  background: rgba(255, 252, 246, 0.9);
  box-shadow:
    0 0.65rem 1.6rem rgba(58, 46, 38, 0.08),
    0 0 0 1px rgba(164, 143, 196, 0.16);
}

.home-map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Galeri — wide upload-invitation teaser */
.home-gallery-panel {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: clamp(1.15rem, 2.4vw, 1.6rem);
  border-radius: 1.15rem;
  background: rgba(255, 252, 246, 0.9);
  box-shadow: 0 0.55rem 1.6rem rgba(50, 40, 34, 0.06), 0 0 0 1px rgba(164, 143, 196, 0.13);
  text-align: left;
  min-width: 0;
  width: 100%;
}

.home-gallery-head {
  margin-bottom: 0;
}

/* Desktop: left = heading/copy/CTAs, right = approved previews (or soft invite). */
.home-gallery-panel--photos,
.home-gallery-panel--invite {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  align-items: center;
  gap: clamp(1.1rem, 2.8vw, 2.4rem);
}

.home-gallery-rail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
}

.home-gallery-rail .home-section-title {
  margin-bottom: 0;
}

.home-gallery-rail .home-section-copy {
  max-width: 36ch;
  margin-bottom: 0;
}

.home-gallery-support {
  margin: 0;
  max-width: 38ch;
  font-family: var(--font-app-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(90, 72, 98, 0.78);
}

.home-gallery-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.75rem;
  margin-top: 0.55rem;
}

.home-gallery-actions .home-btn {
  min-height: 2.85rem;
  padding: 0 1.55rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

@media (max-width: 991px) {
  /* Mobile: title/copy → CTAs → photos (or invite accent). */
  .home-gallery-panel--photos,
  .home-gallery-panel--invite {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
}

.home-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: start;
  gap: 1.1rem;
  margin: 0.15rem 0 0.35rem;
  padding-top: 0.35rem;
}

/* Fewer curated photos: give each polaroid a comfortable size instead of
   leaving empty grid tracks trailing to the right. */
.home-gallery-grid[data-count="1"] {
  grid-template-columns: minmax(0, 1fr);
  max-width: 18rem;
}

.home-gallery-grid[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-gallery-grid[data-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-gallery-item {
  margin: 0;
  padding: 0.55rem 0.55rem 1.1rem;
  border-radius: 0.3rem;
  background: rgba(255, 253, 248, 0.98);
  box-shadow: 0 0.6rem 1.3rem rgba(50, 40, 34, 0.13), 0 0 0 1px rgba(164, 143, 196, 0.14);
  transition: transform 220ms var(--invitation-ease-out), box-shadow 220ms var(--invitation-ease-out);
}

.home-gallery-item--tilt0 {
  transform: rotate(-2.25deg);
}

.home-gallery-item--tilt1 {
  transform: rotate(2.25deg);
}

.home-gallery-item:hover {
  transform: translateY(-0.3rem) rotate(0deg) scale(1.02);
  box-shadow: 0 1rem 1.9rem rgba(50, 40, 34, 0.18), 0 0 0 1px rgba(164, 143, 196, 0.2);
}

.home-gallery-item img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.1rem;
}

/* Empty-state accent — soft stationery panel, not a large blank void. */
.home-gallery-teaser {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7.5rem;
  overflow: hidden;
  padding: 1.25rem 1rem;
  border-radius: 0.95rem;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(164, 143, 196, 0.14), transparent 55%),
    rgba(164, 143, 196, 0.05);
  box-shadow: inset 0 0 0 1px rgba(164, 143, 196, 0.14);
}

.home-gallery-teaser-sprig {
  position: relative;
  z-index: 0;
  width: 3.4rem;
  height: auto;
  max-height: 6rem;
  transform: rotate(-6deg);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

@media (min-width: 601px) and (max-width: 991px) {
  .home-details-compose {
    grid-template-columns: 1fr;
    gap: 1.15rem;
  }

  .home-map-layout {
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
    gap: 1rem;
  }

  .home-map-frame {
    height: clamp(18rem, 38vw, 24rem);
  }
}

@media (max-width: 600px) {
  .home-details-compose {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .home-details-stationery,
  .home-rsvp-card {
    padding: 1.2rem 1.05rem 1.35rem;
  }

  .home-details-sprig {
    width: 4rem;
  }
}

@media (max-width: 767px) {
  .home-gallery-grid,
  .home-gallery-grid[data-count="2"],
  .home-gallery-grid[data-count="3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 0.75rem;
  }

  .home-gallery-grid[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-gallery-item--tilt0,
  .home-gallery-item--tilt1 {
    transform: none;
  }

  .home-map-layout {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .home-map-frame {
    justify-self: stretch;
    width: 100%;
    max-width: none;
    height: 18rem;
    aspect-ratio: auto;
  }

  .home-map-actions {
    width: 100%;
  }

  .home-map-actions .home-btn {
    flex: 1 1 auto;
    text-align: center;
  }

  .home-gallery-teaser {
    min-height: 5.5rem;
    padding: 1rem;
  }

  .home-gallery-actions {
    width: 100%;
  }

  .home-gallery-actions .home-btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* ── Invitation scene (closed-only, selectable) ── */

.invitation-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 4.5vh, 2.75rem);
  min-height: calc(100svh - var(--invitation-header-offset));
  padding-block: clamp(1.25rem, 4svh, 2.5rem);
  perspective: 1700px;
}

.invitation-float {
  opacity: 1;
  transition: transform 650ms var(--invitation-ease-out), opacity 700ms var(--invitation-ease);
  animation: invitationIdleFloat 6.5s ease-in-out infinite;
  will-change: transform, opacity;
}

.invitation-stage.is-selected .invitation-float {
  animation: none;
  transform: translateY(-4px);
}

/* Exit ritual: soft fade/lift before navigating to the homepage. */
.invitation-stage.is-leaving .invitation-float {
  opacity: 0;
  transform: translateY(-1.25rem) scale(1.01);
}

.invitation-scene {
  position: relative;
  width: min(82vw, 21rem);
  transform-style: preserve-3d;
  /* Rotation is driven entirely by JS (rAF lerp) via the custom properties
     below; no CSS transition here so pointer-tracking stays crisp instead
     of fighting a second, competing easing curve. */
  transform: translate3d(0, 0, 0) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  backface-visibility: hidden;
  user-select: none;
}

.invitation-scene.is-tilting,
.invitation-stage.is-selected .invitation-scene,
.invitation-stage.is-leaving .invitation-scene {
  will-change: transform;
}

.invitation-stage.is-selected .invitation-scene {
  transform: none;
}

.invitation-card {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: clamp(0.4rem, 1.3vw, 0.6rem);
  background: var(--invitation-paper);
  /* Soft natural paper shadow only — no separate oval floor layer. */
  box-shadow:
    0 0.55rem 1.35rem rgba(58, 46, 38, 0.12),
    0 0 0 1px rgba(92, 77, 115, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  /* No hover transform here — scene owns 3D tilt; competing transforms cause jitter. */
  transform: none;
  transition: box-shadow 320ms var(--invitation-ease-out);
}

.invitation-stage.is-selected .invitation-card {
  box-shadow:
    0 0.7rem 1.6rem rgba(58, 46, 38, 0.14),
    0 0 0 1px rgba(92, 77, 115, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.invitation-card-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: inherit;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* Transparent, accessible hit target over the full kuşak / band.
   Geometry stays fixed on hover — no transform, scale, or translate —
   so hover never fights the card tilt and cannot jitter the artwork text. */
.invitation-select {
  position: absolute;
  top: 46.5%;
  left: 50%;
  z-index: 6;
  width: min(92%, 22rem);
  height: clamp(3.4rem, 12.5vw, 5rem);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  cursor: pointer;
  overflow: visible;
  transform: translate(-50%, -50%);
}

.invitation-select::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  transition: background-color 180ms ease;
  pointer-events: none;
}

.invitation-select:hover::before,
.invitation-select:focus-visible::before {
  background-color: rgba(255, 255, 255, 0.06);
}

.invitation-select:focus-visible {
  outline: 2px solid var(--invitation-lavender);
  outline-offset: 4px;
}

.invitation-stage.is-selected .invitation-select,
.invitation-stage.is-leaving .invitation-select {
  cursor: default;
  pointer-events: none;
}

@keyframes invitationIdleFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

@media (min-width: 480px) {
  .invitation-scene {
    width: min(68vw, 23rem);
  }
}

@media (min-width: 720px) {
  .invitation-page {
    padding-inline: 2rem;
  }

  .invitation-scene {
    width: min(34vw, 25rem);
  }
}

@media (min-width: 1200px) {
  .invitation-scene {
    width: min(26vw, 27rem);
  }
}

@media (max-width: 480px) {
  body.invitation-shell {
    --invitation-header-offset: 6.25rem;
  }

  .invitation-stage {
    gap: clamp(1.15rem, 3.5vh, 1.65rem);
    padding-block: clamp(1rem, 3svh, 1.75rem);
  }

  .invitation-scene {
    width: min(80vw, 19.5rem);
  }

  .invitation-float {
    animation: none;
    will-change: auto;
  }

  .invitation-select {
    top: 46%;
    width: min(94%, 18rem);
    height: clamp(3.1rem, 12vw, 4.35rem);
  }

  .invitation-select:hover::before,
  .invitation-select:focus-visible::before {
    background-color: transparent;
  }
}

@media (hover: none), (pointer: coarse) {
  .invitation-float {
    animation: none;
    will-change: auto;
  }

  .invitation-select:hover::before,
  .invitation-select:focus-visible::before {
    background-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .invitation-float {
    animation: none;
  }

  .invitation-stage.is-selected .invitation-float {
    transform: translateY(-2px);
  }

  .invitation-scene {
    transform: none !important;
  }

  .invitation-stage.is-selected .invitation-card {
    transform: none;
  }
}

/* Personalized guest greeting */
body.invitation-personal .guest-greeting {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.92), transparent 22rem),
    radial-gradient(circle at 82% 18%, rgba(164, 143, 196, 0.15), transparent 18rem),
    linear-gradient(160deg, var(--invitation-ivory) 0%, var(--invitation-cream) 100%);
  transition: opacity 450ms ease, visibility 450ms ease;
}

body.invitation-personal .guest-greeting-text {
  margin: 0;
  max-width: 22ch;
  color: var(--invitation-lavender);
  font-family: var(--font-app-heading);
  font-size: clamp(1.05rem, 3.8vw, 1.4rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-align: center;
  text-transform: none;
  text-wrap: balance;
}

body.invitation-personal .guest-greeting-text .guest-name-display {
  margin-top: 0.4rem;
  font-size: clamp(1.85rem, 7vw, 2.75rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

body.invitation-personal .guest-greeting.is-dismissed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.invitation-personal .invitation-stage.guest-greeting-pending {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.75rem);
}

body.invitation-personal .invitation-stage.guest-greeting-ready {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 600ms var(--invitation-ease-out), transform 600ms var(--invitation-ease-out), visibility 600ms;
}

/* Standalone "return home" link used on the not-found page */
.continue-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 253, 248, 0.28);
  border-radius: 999px;
  padding: 0.86rem 1.95rem;
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.14), transparent 48%),
    linear-gradient(135deg, var(--invitation-plum) 0%, var(--invitation-plum-deep) 100%);
  box-shadow:
    0 0.8rem 1.6rem rgba(42, 34, 56, 0.2),
    inset 0 0 0 1px rgba(255, 252, 246, 0.12);
  color: var(--invitation-ivory);
  cursor: pointer;
  font-family: var(--font-app, "Cinzel", "Cormorant Garamond", Georgia, serif);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    box-shadow 240ms ease,
    filter 240ms ease,
    transform 240ms ease;
}

.continue-button:hover,
.continue-button:focus-visible {
  filter: brightness(1.05);
  box-shadow:
    0 1rem 1.9rem rgba(92, 77, 115, 0.24),
    inset 0 0 0 1px rgba(255, 252, 246, 0.14);
  color: var(--invitation-ivory);
  transform: translateY(-1px);
}

.continue-button:focus-visible {
  outline: 2px solid var(--invitation-lavender);
  outline-offset: 4px;
}

.invitation-not-found {
  min-height: calc(100vh - 4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem 3rem;
}

.invitation-not-found-card {
  width: min(100%, 34rem);
  padding: 2.5rem 1.75rem;
  border-radius: 1rem;
  background: rgba(255, 247, 231, 0.92);
  box-shadow: 0 1.25rem 2.5rem rgba(28, 26, 31, 0.12);
  text-align: center;
}

.invitation-not-found-title {
  margin: 0 0 0.85rem;
  color: var(--invitation-burgundy);
  font-family: "Plebeya", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(1.65rem, 5vw, 2.15rem);
  font-weight: 400;
}

.invitation-not-found-text {
  margin: 0 0 1.5rem;
  color: var(--invitation-ink);
  line-height: 1.65;
}