/* ============================================================
   Royal Wedding Entrance — Shivani & Sachin
   Palette: deep peacock teal palace, ivory, antique gold.
   Fonts: Italiana (display) + Cormorant Garamond (serif body).
   ============================================================ */

:root {
  --palace: oklch(0.16 0.036 179);
  --ivory: oklch(0.97 0.025 83);
  --ivory-soft: oklch(0.9 0.035 79);
  --gold-pale: oklch(0.91 0.11 88);
  --gold-soft: oklch(0.72 0.11 74);
  --gold-muted: oklch(0.79 0.08 82);
  --gold-bright: oklch(0.84 0.15 82);
  --gold-wash: oklch(0.7 0.11 74 / 18%);
  --gold-line: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  --center-glow: radial-gradient(ellipse at center, oklch(0.91 0.18 84 / 90%) 0%, oklch(0.78 0.14 73 / 30%) 20%, transparent 58%);
  --shrine-vignette: linear-gradient(to bottom, oklch(0.14 0.04 178 / 38%), transparent 28%, transparent 58%, oklch(0.11 0.03 179 / 72%));
  --invitation-bg: radial-gradient(circle at 50% 44%, oklch(0.33 0.08 177), oklch(0.13 0.035 180) 68%);
  --font-display: "Italiana", serif;
  --font-serif: "Cormorant Garamond", serif;
  --ease-cinematic: cubic-bezier(0.72, 0, 0.22, 1);
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-ceremonial:
    0 10px 45px color-mix(in oklab, var(--gold-bright) 18%, transparent),
    inset 0 0 24px color-mix(in oklab, var(--gold-pale) 8%, transparent);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { height: 100%; }

body {
  background: var(--palace);
  color: var(--ivory);
  font-family: var(--font-serif);
}

/* ---------- Stage ---------- */

.stage {
  position: relative;
  height: 100dvh;
  min-height: 35rem;
  width: 100%;
  overflow: hidden;
  background: var(--palace);
}

/* ---------- Ganpati shrine ---------- */

.shrine {
  position: absolute;
  inset: 0;
  transition: opacity 1.8s var(--ease-cinematic), transform 1.8s var(--ease-cinematic), filter 1.8s var(--ease-cinematic);
  cursor: pointer;
}

.stage[data-stage="invitation"] .shrine {
  opacity: 0;
  transform: scale(1.05);
  filter: blur(4px);
  pointer-events: none;
}

.shrine-image {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1.6s var(--ease-reveal), opacity 1.6s var(--ease-reveal), filter 1.6s var(--ease-reveal);
}

.stage[data-stage="closed"] .shrine-image {
  transform: scale(1.1);
  opacity: 0.5;
  filter: blur(2px);
}

.shrine-vignette {
  position: absolute;
  inset: 0;
  background: var(--shrine-vignette);
  opacity: 0.7;
  transition: opacity 1.5s ease;
}

.stage[data-stage="darshan"] .shrine-vignette {
  opacity: 1;
}

.mantra {
  position: absolute;
  inset-inline: 0;
  bottom: 7svh;
  z-index: 10;
  text-align: center;
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 1s ease, transform 1s ease;
}

.stage[data-stage="darshan"] .mantra,
.stage[data-stage="invitation"] .mantra {
  opacity: 1;
  transform: translateY(0);
}

.mantra-text {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 5vw, 3.5rem);
  color: var(--gold-pale);
  text-shadow: 0 2px 18px color-mix(in oklab, var(--gold-pale) 65%, transparent);
}

.mantra-rule {
  margin: 1rem auto 0;
  height: 1px;
  width: 6rem;
  background: var(--gold-line);
}

/* ---------- Centre glow ---------- */

.glow {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: var(--center-glow);
  opacity: 0.3;
  transition: opacity 2.2s ease;
  pointer-events: none;
}

.stage[data-stage="opening"] .glow { opacity: 1; }
.stage[data-stage="darshan"] .glow,
.stage[data-stage="invitation"] .glow { opacity: 0; }

/* ---------- Doors ---------- */

.doors {
  position: absolute;
  inset: 0;
  z-index: 30;
  cursor: pointer;
  perspective: 1800px;
}

.stage[data-stage="invitation"] .doors {
  pointer-events: none;
}

.door-panel {
  position: absolute;
  inset-block: 0;
  width: 50.12%;
  overflow: hidden;
  backface-visibility: hidden;
  transition: transform 2.65s cubic-bezier(0.68, 0, 0.2, 1), filter 2.2s ease;
  filter: saturate(0.9) brightness(0.76);
  will-change: transform;
}

.door-left { left: 0; transform-origin: left center; }
.door-right { right: 0; transform-origin: right center; }

.stage[data-stage="opening"] .door-left,
.stage[data-stage="darshan"] .door-left,
.stage[data-stage="invitation"] .door-left {
  transform: translateX(-98%) rotateY(16deg);
  filter: brightness(0.45);
}

.stage[data-stage="opening"] .door-right,
.stage[data-stage="darshan"] .door-right,
.stage[data-stage="invitation"] .door-right {
  transform: translateX(98%) rotateY(-16deg);
  filter: brightness(0.45);
}

.door-image {
  position: absolute;
  inset-block: 0;
  width: 200%;
  background-image: url("assets/royal-doors.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.door-image-left { left: 0; }
.door-image-right { right: 0; }

.door-seam {
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent 2%, var(--gold-bright) 24%, var(--gold-pale) 54%, var(--gold-bright) 82%, transparent);
  box-shadow: 0 0 12px var(--gold-bright), 0 0 34px var(--gold-soft);
  transition: opacity 0.5s ease, width 1.8s ease, box-shadow 1.8s ease;
}

.stage[data-stage="opening"] .door-seam,
.stage[data-stage="darshan"] .door-seam,
.stage[data-stage="invitation"] .door-seam {
  width: 10vw;
  opacity: 0;
  box-shadow: 0 0 90px var(--gold-pale);
}

/* ---------- Entry copy ---------- */

.entry {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.stage[data-stage="opening"] .entry,
.stage[data-stage="darshan"] .entry,
.stage[data-stage="invitation"] .entry {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

.entry-copy {
  position: relative;
  text-align: center;
}

.entry-copy::before {
  content: "";
  position: absolute;
  inset: -3rem -4rem;
  z-index: -1;
  background: radial-gradient(ellipse, oklch(0.11 0.03 175 / 70%), transparent 67%);
}

.entry-kicker {
  display: block;
  margin-bottom: 1.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  color: var(--gold-muted);
}

.entry-title {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 11vw, 7rem);
  font-weight: 500;
  line-height: 1;
  color: var(--gold-pale);
  text-shadow: 0 2px 2px oklch(0.1 0.03 170 / 70%), 0 0 28px oklch(0.84 0.15 82 / 26%);
}

.ornament-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-block: 1.75rem;
  color: var(--gold-soft);
  font-size: 0.48rem;
}

.ornament-divider::before,
.ornament-divider::after {
  content: "";
  height: 1px;
  width: 4rem;
  background: var(--gold-line);
}

.ornament-divider--spaced { margin-block: 2rem; }

/* ---------- Ceremonial button ---------- */

.btn-ceremonial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  min-width: 11rem;
  padding-inline: 2rem;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  background: var(--gold-wash);
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  cursor: pointer;
  box-shadow: var(--shadow-ceremonial);
  backdrop-filter: blur(4px);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn-ceremonial:hover {
  background: var(--gold-soft);
  border-color: var(--gold-bright);
  color: var(--palace);
}

.btn-ceremonial:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

/* ---------- Gold dust ---------- */

.dust-layer {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 40;
  overflow: hidden;
}

.gold-dust {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--gold-pale);
  box-shadow: 0 0 8px var(--gold-bright);
  opacity: 0;
  animation: float-dust 6s ease-in-out infinite;
}

@keyframes float-dust {
  0%, 100% { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.7); }
  35%, 70% { opacity: 0.7; }
  50% { transform: translate3d(8px, -28px, 0) scale(1.15); }
}

/* ---------- Invitation screen ---------- */

.invitation {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: 1.5rem;
  text-align: center;
  background: var(--invitation-bg);
  opacity: 0;
  transform: scale(1.05);
  pointer-events: none;
  transition: opacity 1.8s var(--ease-cinematic), transform 1.8s var(--ease-cinematic);
}

.invitation::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%23e4bd68' stroke-width='.45'%3E%3Cpath d='M45 4C38 18 28 25 8 28c16 9 24 21 22 42 10-13 20-18 35-18-12-10-17-24-20-48Z'/%3E%3Ccircle cx='45' cy='45' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

.invitation > * {
  position: relative;
  z-index: 1;
}

.stage[data-stage="invitation"] .invitation {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.invitation-arch {
  position: absolute;
  inset: 5svh 5vw;
  border: 1px solid color-mix(in oklab, var(--gold-soft) 60%, transparent);
  border-radius: 48% 48% 2% 2% / 18% 18% 2% 2%;
  box-shadow: inset 0 0 60px oklch(0.1 0.03 180 / 30%);
}

.inv-kicker {
  margin-bottom: 1.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.44em;
  color: var(--gold-muted);
}

.inv-lead {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--ivory-soft);
}

.inv-sub {
  margin-block: 1rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.38em;
  color: var(--gold-soft);
}

.inv-names {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 13vw, 8rem);
  font-weight: 400;
  line-height: 0.88;
  color: var(--gold-pale);
  text-shadow: 0 2px 2px oklch(0.1 0.03 170 / 70%), 0 0 28px oklch(0.84 0.15 82 / 26%);
}

.inv-amp {
  display: block;
  padding-block: 0.5rem;
  font-size: 0.48em;
  font-style: italic;
  color: var(--gold-bright);
}

.inv-footer {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.38em;
  color: var(--ivory-soft);
}

/* ---------- Responsive ---------- */

@media (min-width: 640px) {
  .inv-lead { font-size: 1.25rem; }
}

@media (min-width: 768px) {
  .door-image { background-size: 200% auto; }
  .invitation-arch { inset: 5svh max(16vw, 5rem); }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .door-panel { transition-duration: 0.8s; }
  .gold-dust { animation: none; opacity: 0.32; }
}


/* ============ Invitation sections (after the cinematic entrance) ============ */

body.is-locked { height: 100dvh; overflow: hidden; }
body.is-revealed { overflow-x: clip; }
body { scroll-behavior: smooth; }
html { scroll-behavior: smooth; }

.invitation-content {
  background: linear-gradient(to bottom, oklch(0.13 0.035 180), oklch(0.16 0.036 179) 12%, oklch(0.14 0.03 178));
  color: var(--ivory);
}

/* --- Scratch to reveal --- */
.scratch-section {
  padding: clamp(4.5rem, 10vw, 8rem) 1.5rem;
  text-align: center;
}
.scratch-section > p {
  font-family: "Great Vibes", cursive;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: var(--gold-muted);
}
.scratch-section > h2 {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 5.4vw, 3.2rem);
  line-height: 1.15;
  color: var(--gold-pale);
  margin-top: 0.6rem;
}
.scratch-section > span {
  display: block;
  margin-top: 0.9rem;
  font-family: "EB Garamond", serif;
  font-style: italic;
  color: var(--ivory-soft);
}
.scratch-card {
  margin: 2.6rem auto 0;
  max-width: 26rem;
}
.scratch-inner {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 1.1rem;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--gold-soft) 55%, transparent);
  box-shadow: 0 24px 60px oklch(0.08 0.02 180 / 60%), inset 0 0 40px oklch(0.1 0.03 180 / 40%);
}
.scratch-reveal {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: radial-gradient(circle at 50% 40%, oklch(0.3 0.07 176), oklch(0.15 0.035 179) 75%);
}
.scratch-reveal span {
  font-family: "Great Vibes", cursive;
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--gold-muted);
}
.scratch-reveal strong {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  letter-spacing: 0.04em;
  color: var(--gold-pale);
}
.scratch-inner canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  transition: opacity 0.9s ease;
}
.scratch-inner canvas.is-cleared { opacity: 0; pointer-events: none; }
.scratch-hint {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  pointer-events: none;
  color: oklch(0.35 0.06 75);
}
.scratch-hint b {
  font-family: "Playfair Display", serif;
  font-size: 1.15rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.scratch-hint span { letter-spacing: 0.5em; font-size: 0.8rem; }

/* --- Countdown --- */
.countdown-section {
  padding: clamp(4.5rem, 10vw, 8rem) 1.5rem;
  text-align: center;
  background: radial-gradient(ellipse at 50% 0%, oklch(0.22 0.06 177 / 55%), transparent 65%);
}
.section-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  color: var(--gold-soft);
  font-size: 0.7rem;
}
.section-ornament i {
  height: 1px;
  width: 4.5rem;
  background: var(--gold-line);
}
.section-ornament-bottom { margin-top: 2.8rem; }
.countdown-names {
  margin-top: 1.6rem;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  color: var(--ivory);
}
.countdown-names b { color: var(--gold-bright); font-weight: 500; }
.countdown-section h2 {
  margin-top: 0.5rem;
  font-family: "Marcellus", serif;
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-pale);
}
.countdown-subtitle {
  margin-top: 0.6rem;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--ivory-soft);
}
.countdown-timer {
  margin-top: 2.4rem;
  display: flex;
  justify-content: center;
  gap: clamp(0.7rem, 3vw, 1.6rem);
  flex-wrap: wrap;
}
.countdown-unit {
  min-width: clamp(4.4rem, 18vw, 6.4rem);
  padding: 1.1rem 0.6rem 0.9rem;
  border: 1px solid color-mix(in oklab, var(--gold-soft) 45%, transparent);
  border-radius: 0.9rem;
  background: oklch(0.12 0.03 179 / 55%);
  box-shadow: inset 0 0 24px oklch(0.09 0.025 180 / 60%);
}
.countdown-unit strong {
  display: block;
  font-family: "Marcellus", serif;
  font-size: clamp(1.7rem, 6vw, 2.6rem);
  color: var(--gold-pale);
  font-variant-numeric: tabular-nums;
}
.countdown-unit span {
  display: block;
  margin-top: 0.3rem;
  font-family: "Jost", sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-muted);
}

/* --- Elders' invitation --- */
.elders-section {
  padding: clamp(4.5rem, 10vw, 8rem) 1.5rem;
  display: grid;
  gap: 3rem;
  max-width: 72rem;
  margin: 0 auto;
  align-items: center;
}
@media (min-width: 900px) {
  .elders-section { grid-template-columns: 1.15fr 0.85fr; }
}
.elders-text { text-align: center; }
.elders-eyebrow {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--gold-muted);
}
.elders-names {
  margin-top: 1.1rem;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  line-height: 1.75;
  color: var(--ivory);
}
.elders-names em { color: var(--gold-bright); font-style: normal; }
.elders-rule {
  margin: 1.4rem auto;
  height: 1px;
  width: 8rem;
  background: var(--gold-line);
}
.elders-invite {
  margin-top: 1.4rem;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ivory-soft);
  max-width: 34rem;
  margin-inline: auto;
}
.elders-couple {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}
.elders-couple span {
  font-family: "Great Vibes", cursive;
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  color: var(--gold-pale);
  line-height: 1.1;
}
.elders-couple small {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--gold-muted);
}
.elders-parents {
  margin-top: 1rem;
  font-family: "Cormorant Garamond", serif;
  font-size: 0.98rem;
  color: var(--ivory-soft);
}
.elders-join {
  margin-top: 1.6rem;
  font-family: "Jost", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.elders-image img {
  width: 100%;
  border-radius: 1.2rem;
  border: 1px solid color-mix(in oklab, var(--gold-soft) 50%, transparent);
  box-shadow: 0 30px 70px oklch(0.08 0.02 180 / 65%);
}

/* --- Section links --- */
.section-links {
  padding: clamp(4.5rem, 10vw, 8rem) 1.5rem;
  max-width: 64rem;
  margin: 0 auto;
}
.links-heading { text-align: center; }
.links-heading p {
  font-family: "Jost", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-muted);
}
.links-heading h2 {
  margin-top: 0.9rem;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  color: var(--gold-pale);
}
.links-heading span {
  display: block;
  margin-top: 0.7rem;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--ivory-soft);
}
.links-grid {
  margin-top: 2.6rem;
  display: grid;
  gap: 1.1rem;
}
@media (min-width: 760px) { .links-grid { grid-template-columns: repeat(3, 1fr); } }
.section-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 1.3rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in oklab, var(--gold-soft) 40%, transparent);
  background: oklch(0.13 0.032 179 / 70%);
  text-decoration: none;
  color: var(--ivory);
  transition: transform 0.4s var(--ease-reveal), border-color 0.4s ease, box-shadow 0.4s ease;
}
.section-link:hover {
  transform: translateY(-4px);
  border-color: var(--gold-bright);
  box-shadow: 0 18px 44px oklch(0.08 0.02 180 / 55%);
}
.link-icon {
  flex: none;
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--gold-soft) 55%, transparent);
  color: var(--gold-bright);
}
.link-icon svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.section-link strong {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.25rem;
  color: var(--gold-pale);
}
.section-link small {
  display: block;
  margin-top: 0.15rem;
  font-family: "Jost", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ivory-soft);
}
.section-link b { margin-left: auto; color: var(--gold-muted); font-weight: 400; }

/* --- Events --- */
.events-section {
  padding: clamp(4.5rem, 10vw, 8rem) 1.5rem;
  max-width: 72rem;
  margin: 0 auto;
}
.events-section > header { text-align: center; }
.events-section > header p {
  font-family: "Jost", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-muted);
}
.events-section > header h2 {
  margin-top: 0.7rem;
  font-family: "Parisienne", cursive;
  font-size: clamp(2.6rem, 7vw, 4rem);
  color: var(--gold-pale);
}
.events-section > header span {
  display: block;
  margin-top: 0.5rem;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--ivory-soft);
}
.event-panel {
  margin-top: 3rem;
  display: grid;
  gap: 1.8rem;
  align-items: center;
}
@media (min-width: 860px) {
  .event-panel { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .event-reversed .event-media { order: 2; }
}
.event-media {
  aspect-ratio: 4 / 3;
  border-radius: 1.1rem;
  border: 1px dashed color-mix(in oklab, var(--gold-soft) 55%, transparent);
  display: grid;
  place-items: center;
  background: oklch(0.12 0.03 179 / 50%);
}
.event-media span {
  font-family: "Jost", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-muted);
}
.event-copy { text-align: center; }
@media (min-width: 860px) { .event-copy { text-align: left; } }
.event-copy > p {
  font-family: "Marcellus", serif;
  font-size: 0.9rem;
  letter-spacing: 0.4em;
  color: var(--gold-soft);
}
.event-copy small {
  display: block;
  margin-top: 0.8rem;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ivory-soft);
}
.event-copy h3 {
  margin-top: 0.2rem;
  font-family: "Parisienne", cursive;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  color: var(--gold-pale);
}
.event-copy blockquote {
  margin-top: 0.8rem;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--ivory);
}
.event-copy dl {
  margin-top: 1.4rem;
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}
@media (min-width: 860px) { .event-copy dl { justify-content: flex-start; } }
.event-copy dt {
  font-family: "Jost", sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-muted);
}
.event-copy dd {
  margin-top: 0.25rem;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.05rem;
  color: var(--ivory);
}

/* --- Location --- */
.location-section {
  padding: clamp(4.5rem, 10vw, 8rem) 1.5rem;
  background: radial-gradient(ellipse at 50% 100%, oklch(0.22 0.06 177 / 45%), transparent 65%);
}
.location-inner { max-width: 56rem; margin: 0 auto; text-align: center; }
.location-inner > p {
  font-family: "Jost", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-muted);
}
.location-inner > h2 {
  margin-top: 0.7rem;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem, 6vw, 3rem);
  color: var(--gold-pale);
}
.location-frame {
  margin-top: 2.4rem;
  border: 1px solid color-mix(in oklab, var(--gold-soft) 50%, transparent);
  border-radius: 1.2rem;
  overflow: hidden;
  background: oklch(0.12 0.03 179 / 60%);
  box-shadow: 0 26px 60px oklch(0.08 0.02 180 / 55%);
}
.location-map { position: relative; aspect-ratio: 16 / 9; }
.location-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: sepia(0.25) saturate(0.85);
}
.location-map span {
  position: absolute;
  right: 1rem;
  top: 1rem;
  font-size: 1.4rem;
  pointer-events: none;
}
.venue-card { padding: 1.6rem 1.4rem 1.8rem; }
.venue-card h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.5rem;
  color: var(--gold-pale);
}
.venue-card p {
  margin-top: 0.4rem;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--ivory-soft);
}
.directions-link {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.9rem 2.4rem;
  border-radius: 999px;
  border: 1px solid var(--gold-soft);
  font-family: "Jost", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-pale);
  text-decoration: none;
  transition: background 0.4s ease, color 0.4s ease;
}
.directions-link:hover { background: var(--gold-wash); color: var(--gold-bright); }

/* --- Pre-wedding gallery --- */
.gallery-section { padding: clamp(4.5rem, 10vw, 8rem) 1.5rem; }
.gallery-wrap { max-width: 60rem; margin: 0 auto; }
.gallery-wrap > header { text-align: center; }
.gallery-wrap > header img {
  width: min(22rem, 80%);
  margin: 0 auto;
  border-radius: 1.2rem;
  border: 1px solid color-mix(in oklab, var(--gold-soft) 50%, transparent);
  box-shadow: 0 26px 60px oklch(0.08 0.02 180 / 60%);
}
.gallery-wrap > header h2 {
  margin-top: 1.8rem;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.7rem, 4.6vw, 2.6rem);
  color: var(--gold-pale);
}
.gallery-wrap > header p {
  margin-top: 0.5rem;
  font-family: "Jost", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-muted);
}
.gallery-story {
  margin-top: 3.4rem;
  display: grid;
  gap: 1.4rem;
  align-items: center;
}
@media (min-width: 820px) {
  .gallery-story { grid-template-columns: 1fr 1fr; gap: 2.6rem; }
  .gallery-story.quote-first img { order: 2; }
}
.gallery-story img {
  width: 100%;
  border-radius: 1rem;
  border: 1px solid color-mix(in oklab, var(--gold-soft) 40%, transparent);
}
.gallery-story blockquote {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  line-height: 1.6;
  color: var(--ivory);
  text-align: center;
  padding: 0 1rem;
}
.gallery-signoff {
  margin-top: 3.6rem;
  text-align: center;
  font-family: "Great Vibes", cursive;
  font-size: 1.6rem;
  color: var(--gold-muted);
}

.event-media img {
  width: 100%;
  height: auto;
}























:root{
--blush:#f8e3e6;
--peach:#fce3d3;
--cream:#fff8f1;
--sage:#9fb59a;
--sage-deep:#7e9a79;
--gold:#c6a15b;
--gold-soft:#e3cd9c;
--plum:#5b3a42;
--plum-soft:#8a5f68;
--line:rgba(91,58,66,0.16);
box-sizing:border-box;
padding-top:env(safe-area-inset-top,0px);
padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;}
html{scroll-padding-top:env(safe-area-inset-top,0px);}
body{
margin:0;
background:
  radial-gradient(1200px 600px at 10% -10%, var(--blush) 0%, transparent 60%),
  radial-gradient(1000px 700px at 100% 10%, var(--peach) 0%, transparent 55%),
  linear-gradient(180deg, var(--cream) 0%, #fdf3ee 50%, var(--cream) 100%);
font-family:'Jost', sans-serif;
color:var(--plum);
-webkit-font-smoothing:antialiased;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
  --cream:#241a1c;
}
}
:root[data-theme="dark"]{ --cream:#241a1c; }

.wrap{
position:relative;
max-width:1080px;
margin:0 auto;
padding:64px 24px 88px;
overflow:hidden;
}

/* ---------- decorative hand-drawn doodles ---------- */
.doodle{position:absolute; opacity:0.55; pointer-events:none;}
svg.doodle{ stroke:var(--gold); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}

.d1{ top:18px; left:2%; width:46px;}
.d2{ top:120px; right:4%; width:40px; opacity:.45;}
.d3{ top:46%; left:-10px; width:52px; opacity:.4;}
.d4{ bottom:120px; right:1%; width:48px;}
.d5{ top:6%; right:22%; width:26px; opacity:.5;}
.d6{ bottom:6%; left:20%; width:30px; opacity:.45;}
.d7{ top:38%; right:8%; width:30px; opacity:.5;}
.d8{ bottom:32%; left:4%; width:34px; opacity:.45;}

@media (max-width:700px){
.doodle{ display:none; }
.d1,.d5{ display:block; }
}

/* ---------- section heading ---------- */
.kicker {
  text-align: center;
  font-weight: 500;
  font-family: "Jost", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-muted);
}
.kicker::before, .kicker::after{
content:'♥';
color:var(--gold);
font-size:10px;
margin:0 10px;
position:relative;
top:-2px;
}
h1.script {
  text-align: center;
  margin: 0 0 15px;
	margin-top: 0px;
  line-height: 1.05;
  margin-top: 0.2rem;
  font-family: "Parisienne", cursive;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  color: var(--gold-pale);
}
.sub {
  text-align: center;
  margin: 0 0 56px;
    margin-top: 0px;
  margin-top: 0.5rem;
  font-family: "Jost", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-muted);
}

.divider{
display:flex;
align-items:center;
justify-content:center;
gap:14px;
margin:8px 0 44px;
}
.divider svg{width:22px; height:22px; stroke:var(--gold); fill:none; stroke-width:1.5;}
.divider .rule{
height:1px;
width:90px;
background:linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}

/* ---------- panel ---------- */
.panel {
  position: relative;
  margin: 0 0 34px;
  backdrop-filter: blur(2px);
  min-width: clamp(4.4rem, 18vw, 6.4rem);
  padding: 1.1rem 0.6rem 0.9rem;
  border: 1px solid color-mix(in oklab, var(--gold-soft) 45%, transparent);
  border-radius: 0.9rem;
  background: oklch(0.12 0.03 179 / 55%);
  box-shadow: inset 0 0 24px oklch(0.09 0.025 180 / 60%);
}

.block-title {
  text-align: center;
  font-weight: 600;
  font-size: clamp(24px,3.4vw,30px);
  margin: 0 0 22px;
  position: relative;
  line-height: 1.05;
  margin-top: 0.2rem;
  font-family: "Parisienne", cursive;
  color: var(--gold-pale);
}
.block-title .ic {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: -4px;
  margin-right: 8px;
  stroke: var(--gold-pale);
  fill: none;
  stroke-width: 1.6;
}

.names {
  text-align: center;
  line-height: 2.05;
  max-width: 760px;
  margin: 0 auto;
  font-family: "Jost", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-muted);
}
.names .sep{ color:var(--gold); margin:0 4px; font-size:14px; opacity:.7;}

.allline {
  text-align: center;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  letter-spacing: .04em;
  font-size: 14.5px;
  color: var(--gold-muted);
  margin-top: 18px;
  text-transform: uppercase;
}

.grid-2{
display:grid;
grid-template-columns:1fr;
gap:26px;
}
@media (min-width:760px){
.grid-2{ grid-template-columns:1fr 1fr; }
}
.grid-2 .panel{ margin-bottom:0; }

.small-names {
  text-align: center;
  line-height: 1.95;
  font-family: "Jost", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-muted);
}

.small-names .lead{
font-family:'Jost', sans-serif;
font-weight:500;
font-size:13px;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--sage-deep);
display:block;
margin-bottom:10px;
}

.littles{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px 12px;
margin-top:4px;
}

.littles span {
  font-family: "Jost", sans-serif;
  font-size: 14px;
  color: #000a07;
  background: linear-gradient(180deg,#fff,var(--blush) 220%);
  border: 1px solid var(--line);
  padding: 6px 16px;
  border-radius: 999px;
}

.est-row{
display:flex;
flex-direction:column;
gap:8px;
align-items:center;
}
.est-row .pill {
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  letter-spacing: .03em;
  color: var(--gold-muted);
  padding: 4px 4px;
  padding-bottom: 4px;
}
.est-row .pill:not(:last-child){
border-bottom:1px dashed var(--line);
padding-bottom:10px;
margin-bottom:2px;
}

.foot-flourish{
text-align:center;
margin-top:12px;
font-family:'Alex Brush', cursive;
font-size:30px;
color:var(--gold);
}