:root {
  color-scheme: light;
  --bg: #f6efe4;
  --bg-deep: #e8dcc7;
  --ink: #2b2926;
  --muted: #6b6259;
  --paper: rgba(255, 250, 243, 0.9);
  --paper-strong: #fffaf1;
  --line: rgba(69, 56, 42, 0.12);
  --shadow: 0 28px 80px rgba(46, 31, 14, 0.18);
  --shadow-soft: 0 18px 45px rgba(46, 31, 14, 0.1);
  --accent: #b07d4f;
  --accent-2: #6a805f;
  --accent-3: #d7ab86;
  --radius-xl: 36px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --serif: "Iowan Old Style", "Baskerville", "Palatino Linotype", "Times New Roman", serif;
  --sans: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(199, 160, 126, 0.35), transparent 28%),
    radial-gradient(circle at 80% 20%, rgba(124, 152, 120, 0.18), transparent 26%),
    linear-gradient(180deg, #fbf6ee 0%, var(--bg) 45%, #efe4d0 100%);
  overflow-x: hidden;
}

button,
a {
  font: inherit;
}

a {
  color: inherit;
}

.sky {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.glow {
  filter: blur(28px);
  opacity: 0.85;
}

.glow-left {
  background:
    radial-gradient(circle at 18% 24%, rgba(220, 183, 150, 0.34), transparent 0 26%),
    radial-gradient(circle at 12% 74%, rgba(116, 141, 111, 0.22), transparent 0 18%);
}

.glow-right {
  background:
    radial-gradient(circle at 84% 18%, rgba(214, 164, 123, 0.24), transparent 0 28%),
    radial-gradient(circle at 76% 70%, rgba(171, 195, 160, 0.18), transparent 0 20%);
}

.site {
  position: relative;
  z-index: 1;
  transition: padding-right 420ms ease;
}

.panel {
  min-height: 100svh;
  padding: 48px clamp(20px, 4vw, 56px);
  display: grid;
  align-items: center;
}

.hero {
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  gap: clamp(24px, 5vw, 64px);
}

.hero-copy {
  max-width: 560px;
  justify-self: end;
  padding: 24px 0;
}

.eyebrow,
.label,
.letter-kicker {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.74rem;
  color: var(--accent-2);
}

h1,
h2,
.letter-line,
.detail-block strong,
.meta span {
  font-family: var(--serif);
}

h1 {
  margin: 0.24em 0 0;
  font-size: clamp(3.5rem, 10vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
}

h2 {
  margin: 0.15em 0 0.45em;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
}

.lead {
  margin: 18px 0 0;
  max-width: 36rem;
  font-size: clamp(1.08rem, 1.8vw, 1.24rem);
  line-height: 1.7;
  color: var(--muted);
}

.meta {
  display: flex;
  gap: 12px 18px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.meta span {
  padding: 11px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.72);
  box-shadow: var(--shadow-soft);
}

.scene {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 72svh;
  perspective: 1400px;
}

.orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(110, 89, 64, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transform-style: preserve-3d;
}

.orbit-one {
  width: min(64vw, 480px);
  aspect-ratio: 1;
  transform: translateY(18px) rotateX(72deg) rotateZ(-12deg);
}

.orbit-two {
  width: min(52vw, 380px);
  aspect-ratio: 1;
  transform: translateY(-8px) rotateX(74deg) rotateZ(18deg);
}

.envelope {
  position: relative;
  width: min(82vw, 420px);
  aspect-ratio: 4 / 3;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform-style: preserve-3d;
  filter: drop-shadow(0 32px 56px rgba(50, 33, 14, 0.22));
  perspective: 1000px;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 180ms ease, filter 180ms ease;
}

.envelope:focus-visible,
.button:focus-visible {
  outline: 3px solid rgba(176, 125, 79, 0.35);
  outline-offset: 4px;
}

.envelope-shadow,
.envelope-back,
.envelope-front,
.envelope-flap,
.seal,
.envelope-letter {
  position: absolute;
  inset: 0;
  border-radius: 24px;
}

.envelope-shadow {
  transform: translateY(24px) scale(0.9);
  background: radial-gradient(circle at 50% 50%, rgba(73, 46, 18, 0.22), transparent 70%);
  filter: blur(30px);
  z-index: 0;
}

.envelope-back {
  background: linear-gradient(180deg, #f7ead7, #e8d4ba);
  border: 1px solid rgba(98, 76, 53, 0.12);
  z-index: 1;
}

.envelope-front {
  clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(135deg, transparent 0 48%, rgba(255, 255, 255, 0.45) 50%, transparent 52%) 0 0 / 100% 100%,
    linear-gradient(180deg, #f1e0c8, #e3ccb1);
  border: 1px solid rgba(98, 76, 53, 0.12);
  transform: translateZ(1px);
  z-index: 3;
}

.envelope-flap {
  clip-path: polygon(0 0, 50% 50%, 100% 0);
  background: linear-gradient(180deg, #fff6eb, #ebd4b9);
  transform-origin: top center;
  transform: rotateX(0deg) translateZ(40px);
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
  border: 1px solid rgba(98, 76, 53, 0.12);
  z-index: 4;
}

.envelope-letter {
  inset: 11% 11% 12% 11%;
  padding: 26px 22px 24px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 252, 248, 0.98), rgba(247, 240, 228, 0.96)),
    var(--paper-strong);
  border: 1px solid rgba(104, 84, 62, 0.16);
  box-shadow:
    0 16px 28px rgba(74, 45, 18, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  transform: translateY(92px) translateZ(20px) scale(0.94);
  transition:
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 450ms ease;
  display: grid;
  gap: 12px;
  align-content: start;
  text-align: center;
  justify-items: center;
  z-index: 2;
}

.invite-backdrop {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.06), transparent 42%),
    rgba(44, 32, 20, 0.18);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
  z-index: 1000;
}

.invite-card {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(92vw, 1040px);
  min-height: min(78svh, 760px);
  padding: clamp(26px, 4vw, 48px);
  border-radius: clamp(24px, 2vw, 34px);
  background:
    linear-gradient(180deg, rgba(255, 252, 248, 0.99), rgba(247, 240, 228, 0.96)),
    var(--paper-strong);
  border: 1px solid rgba(104, 84, 62, 0.16);
  box-shadow:
    0 34px 90px rgba(43, 30, 15, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.58);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  text-align: center;
  overflow: auto;
  opacity: 0;
  pointer-events: none;
  --card-offset-x: var(--start-x, 0px);
  --card-offset-y: var(--start-y, 0px);
  --card-scale: var(--start-scale, 0.18);
  --card-rotate: var(--start-rotate, -2deg);
  transform:
    translate(-50%, -50%)
    translate(var(--card-offset-x), var(--card-offset-y))
    scale(var(--card-scale))
    rotate(var(--card-rotate));
  transform-origin: center center;
  transition:
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 420ms ease,
    width 900ms cubic-bezier(0.16, 1, 0.3, 1),
    min-height 900ms cubic-bezier(0.16, 1, 0.3, 1),
    border-radius 900ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1001;
}

.invite-card::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: inherit;
  border: 1px solid rgba(176, 125, 79, 0.14);
  pointer-events: none;
}

.invite-card::after {
  content: "";
  position: absolute;
  inset: 36px 40px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(176, 125, 79, 0.6), transparent);
}

body.invite-open .invite-backdrop {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 120ms;
}

body.invite-opening .invite-backdrop {
  opacity: 0.55;
}

body.invite-open .invite-card {
  opacity: 1;
  pointer-events: auto;
  --card-offset-x: 0px;
  --card-offset-y: 0px;
  --card-scale: 1;
  --card-rotate: 0deg;
}

body.invite-opening .invite-card {
  transition-delay: 140ms, 0ms, 0ms, 0ms, 0ms;
}

body.invite-aside .invite-card {
  top: 18px;
  left: auto;
  right: 18px;
  width: min(330px, calc(100vw - 36px));
  min-height: calc(100svh - 36px);
  border-radius: 24px;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  box-shadow:
    0 28px 70px rgba(43, 30, 15, 0.24),
    -24px 0 50px rgba(43, 30, 15, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.58);
}

body.invite-aside .invite-backdrop {
  opacity: 0.02;
  pointer-events: none;
}

body.invite-aside .site {
  padding-right: clamp(0px, 23vw, 380px);
}

body.invite-open:not(.invite-aside) .hero-copy,
body.invite-open:not(.invite-aside) .scene {
  opacity: 0.12;
  filter: blur(2px);
  transition: opacity 420ms ease, filter 420ms ease;
}

body.invite-aside .hero-copy,
body.invite-aside .scene {
  opacity: 1;
  filter: none;
}

body.invite-opening .envelope-flap {
  transform: rotateX(176deg) translateZ(40px);
}

body.invite-open .envelope-flap {
  transform: rotateX(168deg) translateZ(40px);
}

body.invite-opening .envelope-letter {
  transform: translateY(-58px) translateZ(30px) scale(1.01);
}

body.invite-open .envelope-letter {
  transform: translateY(-120px) translateZ(34px) scale(1.04);
  z-index: 6;
}

body.invite-opening .seal {
  transform: translateX(-50%) scale(0.96);
}

body.invite-open .seal {
  transform: translateX(-50%) scale(0.86);
  opacity: 0.6;
}

body.invite-opening .envelope {
  opacity: 0.92;
  filter: drop-shadow(0 32px 56px rgba(50, 33, 14, 0.22));
}

body.invite-open .envelope {
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-8px);
  opacity: 0.18;
  filter: blur(1px) drop-shadow(0 24px 40px rgba(50, 33, 14, 0.16));
}

.invite-topline {
  margin-top: 8px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--accent-2);
}

.invite-names {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.4vw, 2.55rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.invite-rule {
  width: 62%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(111, 86, 57, 0.32), transparent);
  margin: 2px 0 6px;
}

.invite-text,
.invite-meta,
.invite-rsvp {
  text-wrap: balance;
}

.invite-text {
  max-width: 19ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--muted);
}

.invite-meta {
  max-width: 20ch;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
}

.invite-rsvp {
  margin-top: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(176, 125, 79, 0.1);
  border: 1px solid rgba(176, 125, 79, 0.18);
  color: var(--accent);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
}

.invite-close {
  position: absolute;
  top: 14px;
  right: 14px;
  border: 1px solid rgba(87, 68, 49, 0.12);
  background: rgba(255, 255, 255, 0.7);
  color: var(--muted);
  border-radius: 999px;
  min-height: 40px;
  padding: 0 14px;
  cursor: pointer;
}

.invite-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

.invite-actions .button {
  min-width: 180px;
}

.seal {
  inset: auto auto 20% 50%;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, #d89a63, #b77141);
  color: #fff8f0;
  font-size: 1.15rem;
  box-shadow: 0 12px 20px rgba(106, 67, 31, 0.22);
  transition:
    transform 450ms ease,
    opacity 250ms ease;
  z-index: 5;
}

.seal::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px solid rgba(245, 216, 164, 0.8);
  border-radius: inherit;
  opacity: 0;
  animation: seal-pulse 2.4s ease-out infinite;
}

@keyframes seal-pulse {
  0%, 28% {
    transform: scale(0.84);
    opacity: 0;
  }

  42% {
    opacity: 0.78;
  }

  72%, 100% {
    transform: scale(1.34);
    opacity: 0;
  }
}

.scroll-hint {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: grid;
  gap: 6px;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.78);
  border: 1px solid var(--line);
  color: var(--muted);
  box-shadow: var(--shadow-soft);
  transform: translateX(-50%) translateY(30px);
  opacity: 0;
  cursor: pointer;
  transition: opacity 300ms ease, transform 300ms ease;
}

.scroll-hint:focus-visible {
  outline: 2px solid rgba(245, 216, 164, 0.9);
  outline-offset: 4px;
}

.scroll-hint.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.page {
  padding-top: 12px;
  padding-bottom: 12px;
}

.content-card {
  width: min(100%, 1080px);
  margin: 0 auto;
  padding: clamp(24px, 5vw, 56px);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 251, 244, 0.84)),
    radial-gradient(circle at top left, rgba(211, 171, 136, 0.14), transparent 32%);
  border: 1px solid rgba(87, 68, 49, 0.1);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateY(36px) scale(0.985);
  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.content-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.content-card p:last-child {
  margin-bottom: 0;
}

.mini-grid,
.detail-grid {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

.mini-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mini-grid > div,
.detail-block {
  padding: 18px 18px 20px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(87, 68, 49, 0.08);
  box-shadow: var(--shadow-soft);
}

.mini-grid strong,
.detail-block strong {
  display: block;
  margin-top: 8px;
  font-size: 1.15rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.mini-grid span,
.detail-block p {
  color: var(--muted);
  margin: 0.45rem 0 0;
  line-height: 1.6;
}

.detail-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(18px, 4vw, 40px);
  align-items: start;
}

.detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.rsvp-card {
  display: grid;
  justify-items: start;
  gap: 10px;
}

.rsvp-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.primary {
  background: linear-gradient(180deg, #b07d4f, #95613a);
  color: #fff8f1;
  box-shadow: 0 14px 26px rgba(149, 97, 58, 0.25);
}

.secondary {
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(87, 68, 49, 0.14);
}

body.invite-open:not(.invite-opening) .envelope-flap {
  transform: rotateX(168deg) translateZ(40px);
}

body.invite-open:not(.invite-opening) .envelope-letter {
  transform: translateY(-120px) translateZ(34px) scale(1.04);
  z-index: 6;
}

body.invite-open:not(.invite-opening) .seal {
  transform: translateX(-50%) scale(0.86);
  opacity: 0.6;
}

body.invite-open:not(.invite-opening) .envelope {
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-8px);
  opacity: 0.18;
  filter: blur(1px) drop-shadow(0 24px 40px rgba(50, 33, 14, 0.16));
}

body.invite-open:not(.invite-opening) .envelope-front {
  transform: translateY(12px) translateZ(1px);
  opacity: 0.9;
}

body.invite-open:not(.invite-opening) .envelope-back {
  transform: translateY(8px);
}

body.invite-open:not(.invite-opening) .scroll-hint {
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
}

.content-card,
.envelope,
.meta span,
.button {
  transform-origin: center;
}

.panel,
.content-card,
.envelope-letter,
.envelope-flap,
.scroll-hint,
.button {
  will-change: transform;
}

/* Scroll-driven outdoor reception */
.venue-journey {
  position: relative;
  height: 310svh;
  margin: 4svh 0;
}

.venue-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #9bc9ee;
  --journey: 0;
  --arrival: 0;
}

.venue-world,
.venue-world > div {
  position: absolute;
  inset: 0;
}

.venue-world {
  overflow: hidden;
  background: #a9d4f2;
  transform: scale(calc(1 + var(--journey) * 0.09));
  transform-origin: 55% 60%;
  transition: background 180ms linear;
}

.venue-sky {
  background:
    radial-gradient(circle at 82% 20%, rgba(255, 224, 164, calc(0.1 + var(--journey) * 0.75)), transparent 22%),
    linear-gradient(180deg, #78b9eb 0%, #b9dbed 56%, #efd3a8 100%);
  transition: filter 180ms linear;
  filter: saturate(calc(1 - var(--journey) * 0.22)) brightness(calc(1 - var(--journey) * 0.13));
}

.venue-sun {
  inset: auto auto 36% 74% !important;
  width: clamp(54px, 10vw, 130px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffe0a0;
  filter: blur(1px) drop-shadow(0 0 36px rgba(255, 208, 126, 0.92));
  opacity: calc(0.05 + var(--journey) * 0.9);
  transform: translateY(calc(var(--journey) * 12vh));
}

.venue-cloud {
  inset: auto !important;
  width: 34vw;
  height: 8vw;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  filter: blur(20px);
  opacity: calc(0.4 - var(--journey) * 0.35);
}

.venue-cloud-one { top: 18%; left: -6%; }
.venue-cloud-two { top: 28%; right: -10%; transform: scale(1.4); }

.venue-treeline {
  inset: auto 0 34% !important;
  height: 34%;
  transform-origin: bottom center;
}

.venue-treeline-far {
  background:
    radial-gradient(ellipse at 3% 76%, #284c35 0 9%, transparent 9.5%),
    radial-gradient(ellipse at 15% 61%, #315b3c 0 12%, transparent 12.5%),
    radial-gradient(ellipse at 31% 69%, #315d3e 0 11%, transparent 11.5%),
    radial-gradient(ellipse at 49% 52%, #416d49 0 15%, transparent 15.5%),
    radial-gradient(ellipse at 63% 66%, #2f5d3e 0 12%, transparent 12.5%),
    radial-gradient(ellipse at 78% 53%, #355f40 0 16%, transparent 16.5%),
    radial-gradient(ellipse at 95% 66%, #294f36 0 13%, transparent 13.5%),
    linear-gradient(#426b48, #234b34);
  clip-path: polygon(0 42%, 8% 36%, 18% 42%, 30% 34%, 43% 39%, 54% 27%, 66% 41%, 78% 29%, 91% 39%, 100% 29%, 100% 100%, 0 100%);
  opacity: 0.85;
  transform: translateY(calc(var(--journey) * 2vh)) scale(calc(1 + var(--journey) * 0.04));
}

.venue-treeline-near {
  inset: auto -5% 25% !important;
  height: 34%;
  background:
    radial-gradient(ellipse at 4% 62%, #193f2c 0 11%, transparent 11.5%),
    radial-gradient(ellipse at 22% 70%, #245235 0 14%, transparent 14.5%),
    radial-gradient(ellipse at 42% 74%, #1e4b31 0 12%, transparent 12.5%),
    radial-gradient(ellipse at 67% 67%, #204932 0 15%, transparent 15.5%),
    radial-gradient(ellipse at 88% 62%, #173e2b 0 14%, transparent 14.5%),
    linear-gradient(#28583a, #183c2a);
  clip-path: polygon(0 34%, 12% 48%, 24% 35%, 37% 48%, 50% 38%, 62% 47%, 76% 31%, 88% 44%, 100% 31%, 100% 100%, 0 100%);
  filter: brightness(calc(1 - var(--journey) * 0.28));
}

.venue-pond {
  inset: auto 4% 23% 12% !important;
  height: 19%;
  border-radius: 50% 46% 39% 45%;
  background:
    repeating-linear-gradient(177deg, transparent 0 13px, rgba(255, 255, 255, 0.18) 14px 16px, transparent 17px 25px),
    linear-gradient(180deg, #739ca0, #315e68 70%, #214d59);
  box-shadow: inset 0 16px 30px rgba(255, 255, 255, 0.17), 0 18px 40px rgba(22, 57, 51, 0.16);
  transform: perspective(600px) rotateX(56deg) scaleX(calc(1 + var(--journey) * 0.09));
  transform-origin: bottom center;
  filter: brightness(calc(1 - var(--journey) * 0.08));
}

.venue-pond-shine {
  inset: auto 12% 27% 24% !important;
  height: 5%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 219, 143, 0.42), transparent);
  filter: blur(8px);
  opacity: calc(0.12 + var(--journey) * 0.65);
  transform: rotate(-4deg);
}

.venue-lawn {
  inset: auto -12% -3% !important;
  height: 49%;
  background:
    radial-gradient(ellipse at 48% 18%, rgba(225, 240, 164, 0.6), transparent 38%),
    repeating-linear-gradient(96deg, rgba(255,255,255,0.035) 0 2px, transparent 3px 12px),
    linear-gradient(180deg, #7fb65c, #4a8d48 72%, #27603a);
  clip-path: polygon(0 23%, 100% 5%, 100% 100%, 0 100%);
  transform: perspective(800px) rotateX(20deg) scale(calc(1 + var(--journey) * 0.11));
  transform-origin: bottom center;
  filter: saturate(calc(1 - var(--journey) * 0.18)) brightness(calc(1 - var(--journey) * 0.16));
}

.venue-house {
  inset: auto auto 36% 7% !important;
  width: clamp(160px, 22vw, 320px);
  height: clamp(100px, 13vw, 190px);
  background: repeating-linear-gradient(0deg, #88735e 0 5px, #a38c72 6px 10px);
  border: 5px solid #6c5949;
  box-shadow: 16px 18px 26px rgba(21, 49, 28, 0.24);
  transform: scale(calc(0.76 + var(--journey) * 0.3)) translateX(calc(var(--journey) * -8vw));
  transform-origin: bottom left;
  opacity: calc(1 - var(--journey) * 0.48);
}

.house-roof { position: absolute; width: 106%; height: 54%; left: -4%; top: -34%; background: repeating-linear-gradient(96deg, #3d3733 0 4px, #65574c 5px 8px); clip-path: polygon(0 100%, 17% 25%, 48% 12%, 100% 100%); }
.house-gable { position: absolute; width: 42%; height: 78%; right: 6%; top: -28%; background: #907a63; clip-path: polygon(50% 0, 100% 50%, 100% 100%, 0 100%, 0 50%); }
.house-window, .house-door { position: absolute; background: linear-gradient(135deg, #7bc0d4, #1e414c); border: 3px solid #625343; }
.house-window-one { width: 13%; height: 27%; left: 13%; top: 30%; }
.house-window-two { width: 14%; height: 27%; left: 36%; top: 30%; }
.house-door { width: 14%; height: 42%; right: 15%; bottom: 0; }
.house-deck { position: absolute; width: 56%; height: 13%; right: -8%; bottom: -13%; background: #9d4732; box-shadow: 0 8px 0 #6d3028; }

.willow, .oak { position: absolute; z-index: 2; transform-origin: bottom center; }
.willow { inset: auto 8% 35% auto; width: clamp(90px, 13vw, 180px); height: clamp(150px, 23vw, 270px); opacity: calc(1 - var(--journey) * 0.35); transform: scale(calc(0.8 + var(--journey) * 0.26)); }
.willow::before { content: ""; position: absolute; left: 45%; bottom: 0; width: 14%; height: 57%; background: #5d5137; border-radius: 60% 40% 10% 10%; transform: rotate(3deg); }
.willow i { position: absolute; top: 2%; width: 34%; height: 85%; border-radius: 50% 50% 46% 46%; background: linear-gradient(90deg, #638d45, #2c633a); transform-origin: top center; }
.willow i:nth-child(1) { left: 7%; transform: rotate(14deg); }
.willow i:nth-child(2) { left: 23%; transform: rotate(4deg); }
.willow i:nth-child(3) { left: 42%; transform: rotate(-3deg); }
.willow i:nth-child(4) { left: 58%; transform: rotate(-10deg); }
.willow i:nth-child(5) { left: 35%; top: -10%; height: 70%; transform: rotate(0deg); }
.oak { width: clamp(90px, 16vw, 230px); height: clamp(160px, 26vw, 330px); opacity: calc(1 - var(--journey) * 0.54); transform: scale(calc(0.72 + var(--journey) * 0.34)); }
.oak::before { content: ""; position: absolute; left: 45%; bottom: 0; width: 12%; height: 54%; background: #5b5038; border-radius: 40% 50% 8% 8%; }
.oak i { position: absolute; border-radius: 48% 52% 44% 56%; background: #285839; box-shadow: inset -18px -16px 24px rgba(13, 53, 31, 0.2); }
.oak i:nth-child(1) { left: 7%; top: 9%; width: 65%; height: 44%; }
.oak i:nth-child(2) { left: 38%; top: 1%; width: 60%; height: 49%; background: #326442; }
.oak i:nth-child(3) { left: 24%; top: 28%; width: 67%; height: 40%; background: #224d34; }
.oak-one { inset: auto auto 31% -1%; }
.oak-two { inset: auto -3% 30% auto; transform-origin: bottom right; }

.reception {
  position: absolute;
  inset: auto 11% 13% 18%;
  height: 45%;
  z-index: 4;
  opacity: clamp(0, calc((var(--journey) - 0.15) * 2.2), 1);
  transform: perspective(900px) rotateX(52deg) translateY(calc(4vh - var(--journey) * 8vh)) scale(calc(0.72 + var(--journey) * 0.34));
  transform-origin: bottom center;
}

.table-row {
  position: absolute;
  left: 50%;
  width: 72%;
  height: 14%;
  border-radius: 4px;
  background: linear-gradient(180deg, #fffdf6, #e7e4dc);
  box-shadow: 0 7px 0 #baad95, 0 20px 26px rgba(29, 52, 30, 0.22);
  transform: translateX(-50%);
}

.table-row::before,
.table-row::after { content: ""; position: absolute; top: 18%; height: 64%; width: 17%; border-top: 4px solid #8c5e45; border-bottom: 4px solid #8c5e45; }
.table-row::before { right: 102%; }
.table-row::after { left: 102%; }
.table-row i { position: absolute; top: 26%; width: 6px; height: 6px; border-radius: 50%; background: #cdb068; box-shadow: 0 0 8px rgba(255, 238, 173, 0.9); }
.table-row i:nth-child(1) { left: 20%; }.table-row i:nth-child(2) { left: 40%; }.table-row i:nth-child(3) { left: 60%; }.table-row i:nth-child(4) { left: 80%; }
.table-row-one { bottom: 4%; width: 95%; }.table-row-two { bottom: 22%; width: 84%; }.table-row-three { bottom: 40%; width: 73%; }.table-row-four { bottom: 58%; width: 62%; }

.chandelier-line { position: absolute; top: 0; width: 3px; height: 100%; background: linear-gradient(#2a2623, transparent); opacity: 0.74; }
.chandelier-line::before { content: ""; position: absolute; top: 13%; left: 50%; width: 74px; height: 74px; border: 3px solid #272521; border-radius: 50%; transform: translateX(-50%); }
.chandelier-line i { position: absolute; top: 27%; width: 8px; height: 8px; border-radius: 50%; background: #fff0bd; box-shadow: 0 0 12px 5px rgba(255, 216, 132, 0.8); }
.chandelier-line i:nth-child(1) { left: -27px; }.chandelier-line i:nth-child(2) { left: -4px; top: 37%; }.chandelier-line i:nth-child(3) { left: 18px; }
.chandelier-line-one { left: 31%; }.chandelier-line-two { right: 31%; }

.venue-vignette { background: radial-gradient(ellipse at center, transparent 36%, rgba(8, 21, 16, calc(0.08 + var(--journey) * 0.36)) 100%); pointer-events: none; }

.venue-copy {
  position: absolute;
  top: clamp(26px, 8vh, 90px);
  left: clamp(20px, 6vw, 86px);
  z-index: 10;
  max-width: min(560px, 76vw);
  color: #fffdf4;
  text-shadow: 0 2px 22px rgba(13, 35, 25, 0.38);
  transform: translateY(calc(var(--journey) * -9vh));
}

.venue-copy .eyebrow { color: #ffe3a8; }
.venue-copy h2 { margin-top: 0.18em; font-size: clamp(2.5rem, 6vw, 5.8rem); }
.venue-description { max-width: 37rem; font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.6; opacity: clamp(0.76, calc(1 - var(--journey) * 0.45), 1); }
.venue-progress { display: inline-flex; gap: 14px; align-items: center; margin-top: 14px; padding: 9px 14px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; background: rgba(14, 40, 28, 0.16); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.13em; }

.venue-caption { position: absolute; z-index: 8; color: rgba(255, 251, 239, 0.96); font-family: var(--serif); font-style: italic; text-shadow: 0 2px 12px rgba(8, 22, 14, 0.54); opacity: 0; transition: opacity 180ms linear; }
.venue-caption-one { bottom: 29%; left: 12%; opacity: clamp(0, calc(1 - var(--journey) * 4), 1); }
.venue-caption-two { bottom: 30%; right: 12%; opacity: clamp(0, calc((var(--journey) - 0.26) * 4), 1); }
.venue-caption-three { bottom: 14%; left: 50%; transform: translateX(-50%); white-space: nowrap; opacity: clamp(0, calc((var(--journey) - 0.63) * 4), 1); }

/* The CSS illustration remains in the markup as a no-JavaScript fallback.
   When Three.js is available, the canvas replaces it with a real perspective camera. */
.venue-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: none;
  background: #8fc5e9;
}

.venue-sticky.is-webgl .venue-canvas {
  display: block;
}

.venue-sticky.is-webgl .venue-world {
  display: none;
}

.venue-sticky.is-webgl .venue-copy,
.venue-sticky.is-webgl .venue-caption {
  z-index: 4;
}

.venue-sticky.is-webgl .venue-progress {
  background: rgba(7, 18, 24, 0.32);
  backdrop-filter: blur(8px);
}

.venue-video {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  background: #0f1e24;
}

.venue-sticky.has-video .venue-world {
  display: none;
}

.venue-sticky.has-video .venue-copy,
.venue-sticky.has-video .venue-caption {
  z-index: 4;
}

.venue-sticky.has-video .venue-copy {
  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.62);
}

.venue-sticky.has-video .venue-progress {
  background: rgba(7, 18, 24, 0.38);
  backdrop-filter: blur(8px);
}

@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hero-copy {
    justify-self: start;
    max-width: 100%;
  }

  .scene {
    min-height: 58svh;
  }

  .mini-grid,
  .detail-layout,
  .detail-grid {
    grid-template-columns: 1fr;
  }

  body.invite-aside .site {
    padding-right: 0;
  }

  body.invite-aside .invite-card {
    left: 16px;
    right: 16px;
    top: auto;
    bottom: 16px;
    width: auto;
    min-height: min(52svh, 520px);
    transform: none;
  }

  .venue-journey {
    height: 260svh;
    margin-block: 2svh;
  }

  .venue-copy {
    max-width: min(530px, 86vw);
  }

  .venue-house {
    left: 3%;
  }

  .reception {
    inset-inline: 8%;
  }
}

@media (max-width: 640px) {
  .panel {
    padding-inline: 16px;
  }

  h1 {
    font-size: clamp(3rem, 16vw, 4.8rem);
  }

  .lead {
    font-size: 1.02rem;
  }

  .envelope-letter {
    padding: 20px 18px;
  }

  .scroll-hint {
    width: calc(100% - 24px);
    text-align: center;
  }

  body.invite-aside .invite-card {
    inset: auto 12px 12px;
    width: auto;
    min-height: min(60svh, 560px);
  }

  .venue-journey {
    height: 230svh;
  }

  .venue-copy {
    top: 28px;
    left: 18px;
    max-width: calc(100% - 36px);
  }

  .venue-copy h2 {
    font-size: clamp(2.55rem, 13vw, 4rem);
  }

  .venue-description {
    max-width: 27ch;
    font-size: 0.98rem;
  }

  .venue-house {
    left: -6%;
    bottom: 39% !important;
  }

  .willow {
    right: -5%;
  }

  .oak-one {
    left: -15%;
  }

  .oak-two {
    right: -17%;
  }

  .reception {
    inset: auto 10% 10% 14%;
    height: 40%;
  }

  .table-row::before,
  .table-row::after {
    width: 11%;
  }

  .chandelier-line::before {
    width: 52px;
    height: 52px;
  }

  .venue-caption {
    font-size: 0.88rem;
  }
}

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

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

/* Editorial redesign: the drone film is the visual centre, with a quieter estate-at-dusk identity around it. */
:root {
  color-scheme: dark;
  --bg: #101713;
  --bg-deep: #090d0b;
  --ink: #f4eddf;
  --muted: #c9c0af;
  --paper: #ece2d1;
  --paper-strong: #f6efe4;
  --line: rgba(239, 222, 190, 0.2);
  --accent: #c59555;
  --accent-2: #e1bd7b;
  --accent-3: #733f31;
  --shadow: 0 34px 100px rgba(0, 0, 0, 0.34);
  --shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.18);
}

body {
  background: #101713;
  color: var(--ink);
}

.glow { opacity: 1; filter: blur(42px); }
.glow-left { background: radial-gradient(circle at 7% 10%, rgba(107, 56, 40, 0.38), transparent 0 28%); }
.glow-right { background: radial-gradient(circle at 91% 68%, rgba(91, 115, 73, 0.22), transparent 0 30%); }

.panel {
  padding: clamp(30px, 6vw, 92px);
}

.hero {
  position: relative;
  min-height: 100svh;
  grid-template-columns: minmax(0, 1fr) minmax(350px, 0.82fr);
  gap: clamp(30px, 8vw, 130px);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(222, 188, 122, 0.22);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  width: min(72vw, 960px);
  aspect-ratio: 1;
  right: -22vw;
  bottom: -52vw;
  border: 1px solid rgba(222, 188, 122, 0.2);
  border-radius: 50%;
  box-shadow: 0 0 0 64px rgba(222, 188, 122, 0.035), 0 0 0 130px rgba(222, 188, 122, 0.025);
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 1;
  justify-self: start;
  max-width: 710px;
  padding: 0;
}

.eyebrow,
.label,
.letter-kicker {
  color: var(--accent-2);
  font-size: 0.68rem;
  letter-spacing: 0.25em;
}

h1 {
  max-width: 7ch;
  margin-top: 0.16em;
  font-size: clamp(4.6rem, 10vw, 9.2rem);
  line-height: 0.82;
  letter-spacing: -0.075em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(2.6rem, 5vw, 5.2rem);
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.lead {
  max-width: 31rem;
  margin-top: 32px;
  color: var(--muted);
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.52rem);
  line-height: 1.45;
}

.meta {
  display: grid;
  gap: 8px;
  margin-top: 38px;
}

.meta span {
  width: fit-content;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid rgba(222, 188, 122, 0.38);
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
}

.scene {
  z-index: 1;
  min-height: 68svh;
}

.orbit { border-color: rgba(222, 188, 122, 0.22); box-shadow: none; }
.orbit-one { width: min(62vw, 500px); }
.orbit-two { width: min(48vw, 370px); border-color: rgba(210, 130, 94, 0.26); }

.envelope {
  width: min(82vw, 470px);
  filter: drop-shadow(0 38px 48px rgba(0, 0, 0, 0.38));
}

.envelope-back { background: linear-gradient(150deg, #33211f, #6f4034); border-color: rgba(240, 207, 148, 0.24); }
.envelope-front { background: linear-gradient(145deg, #482a27, #815044); border-color: rgba(240, 207, 148, 0.22); }
.envelope-flap { background: linear-gradient(165deg, #684238, #2f1e1d); border-color: rgba(240, 207, 148, 0.28); }
.envelope-letter { color: #252019; background: linear-gradient(180deg, #f9f2e7, #e8dac5); border-radius: 10px; }
.seal { background: linear-gradient(180deg, #d9a965, #93512f); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.32); }
.scroll-hint { border-radius: 0; background: rgba(20, 24, 18, 0.8); border-color: rgba(222, 188, 122, 0.36); color: #f5ead8; box-shadow: none; }

.venue-journey { margin: 0; }
.venue-sticky { background: #0b1513; }
.venue-video { filter: saturate(0.92) contrast(1.06) brightness(0.88); }
.venue-sticky::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgba(5, 12, 10, 0.7), transparent 56%), linear-gradient(0deg, rgba(5, 10, 8, 0.46), transparent 45%); }
.venue-copy { top: auto; bottom: clamp(38px, 8vh, 92px); max-width: min(600px, 80vw); }
.venue-copy h2 { max-width: 9ch; font-size: clamp(3.2rem, 7vw, 7.2rem); }
.venue-description { margin: 16px 0 0; color: #f4e8d4; font-family: var(--serif); font-size: 1.2rem; }
.venue-progress { margin-top: 22px; border-radius: 0; background: transparent !important; border: 0; border-bottom: 1px solid rgba(255,255,255,0.48); padding: 0 0 7px; }
.venue-names { margin: 0; color: #f7ead6; font-size: clamp(1.05rem, 1.6vw, 1.38rem); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.venue-event { margin: 8px 0 0; color: #f7ead6; font-family: var(--serif); font-size: clamp(2.8rem, 5vw, 5.5rem); font-style: italic; letter-spacing: -0.06em; line-height: 0.9; }

.page { min-height: auto; padding-block: clamp(84px, 13vw, 180px); }
.page .content-card { width: min(100%, 1240px); padding: 0; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; background: none; }

#story { background: #172219; }
#story .content-card { max-width: 940px; }
#story h2 { max-width: 10ch; }
#story .content-card > p:not(.eyebrow) { max-width: 42rem; margin: 28px 0 0; color: var(--muted); font-family: var(--serif); font-size: 1.32rem; line-height: 1.55; }

.mini-grid { grid-template-columns: repeat(3, 1fr); margin-top: 72px; gap: 0; border-top: 1px solid rgba(238, 221, 188, 0.28); }
.mini-grid > div { padding: 22px 24px 4px 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.mini-grid > div + div { padding-left: 24px; border-left: 1px solid rgba(238, 221, 188, 0.2); }
.mini-grid strong { margin-top: 10px; font-size: clamp(1.18rem, 1.7vw, 1.55rem); color: #f1e7d7; }

#details { color: #221e19; background: #eadfce; }
#details .eyebrow, #details .label { color: #754b36; }
.detail-layout { grid-template-columns: 0.83fr 1.17fr; gap: clamp(44px, 8vw, 130px); }
.detail-layout h2 { max-width: 7ch; }
.detail-grid { gap: 0; border-top: 1px solid rgba(62, 45, 31, 0.34); }
.detail-block { min-height: 142px; padding: 24px 0; border: 0; border-radius: 0; border-bottom: 1px solid rgba(62, 45, 31, 0.26); background: none; box-shadow: none; }
.detail-block strong { margin-top: 8px; font-size: clamp(1.4rem, 2.1vw, 2rem); }
.detail-block p { margin: 8px 0 0; color: #715e50; }

#rsvp { position: relative; min-height: 82svh; overflow: hidden; background: #442820; }
#rsvp::before { content: ""; position: absolute; width: 66vw; max-width: 880px; aspect-ratio: 1; right: -20vw; top: -35vw; border-radius: 50%; border: 1px solid rgba(247, 220, 164, 0.2); box-shadow: 0 0 0 74px rgba(247, 220, 164, 0.035), 0 0 0 148px rgba(247, 220, 164, 0.025); }
.rsvp-card { position: relative; z-index: 1; max-width: 760px !important; }
.rsvp-card h2 { max-width: 8ch; }
.rsvp-card > p:not(.eyebrow) { max-width: 30rem; color: #e2d4c4; font-family: var(--serif); font-size: 1.25rem; line-height: 1.5; }
.button { min-height: 52px; border-radius: 0; padding-inline: 24px; }
.primary { background: #ead6af; color: #332119; box-shadow: none; }
.secondary { background: transparent; border-color: rgba(246, 224, 185, 0.52); color: #f8ebd8; }

.invite-card { color: #2c231c; border-radius: 0; background: #f1e6d5; box-shadow: 0 34px 100px rgba(0, 0, 0, 0.48); }
.invite-topline { color: #744b36; }
.invite-rsvp { background: none; border: 0; color: #8d5938; }
.invite-close { border-radius: 0; background: transparent; }
.invite-card .primary { color: #fff8eb; background: #533129; }
.invite-card .secondary { color: #3c2a21; border-color: rgba(68, 43, 30, 0.25); }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 10px; }
  .hero-copy { padding-top: 40px; }
  .hero::before { inset: 14px; }
  .scene { min-height: 50svh; }
  .detail-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .hero { padding-top: 52px; }
  h1 { font-size: clamp(4rem, 19vw, 6rem); }
  .meta { margin-top: 28px; }
  .venue-copy { left: 20px; bottom: 46px; }
  .venue-copy h2 { font-size: clamp(3.1rem, 15vw, 4.8rem); }
  .mini-grid { grid-template-columns: 1fr; margin-top: 48px; }
  .mini-grid > div, .mini-grid > div + div { padding: 18px 0; border-left: 0; border-bottom: 1px solid rgba(238, 221, 188, 0.2); }
  .detail-grid { grid-template-columns: 1fr; }
}