:root {
  --night: #0f1a16;
  --hedge: #1e3328;
  --leaf: #3f6b4a;
  --moss: #5a8a62;
  --dusk: #c9a35a;
  --gold: #e8d29a;
  --ivory: #f3eee4;
  --stone: #d9d0c0;
  --ink: #1a241c;
  --muted: rgba(243, 238, 228, .72);
  --line: rgba(232, 210, 154, .22);
  --paper: #f7f2e8;
  --paper-ink: #243028;
  --font: "Cormorant Garamond", "Times New Roman", serif;
  --sans: Outfit, ui-sans-serif, system-ui, sans-serif;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  min-height: 100%;
  background: var(--night);
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ivory);
  font-family: var(--font);
  background: #0c1410;
}

.experience {
  position: relative;
  z-index: 2;
}

.snap-section {
  min-height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.garden-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.garden-sky {
  position: absolute;
  inset: 0;
  background:
    url("./images/atmosphere-sky.jpg") center top / cover no-repeat,
    linear-gradient(180deg, #1e3344 0%, #2a3d36 42%, #1a2820 72%, #0c1410 100%);
}

.garden-sky::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(ellipse at 78% 12%, rgba(255, 186, 110, .42), transparent 22rem),
    radial-gradient(ellipse at 50% 55%, rgba(120, 140, 100, .12), transparent 30rem);
}

.garden-horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28%;
  height: 28%;
  background:
    linear-gradient(180deg, transparent, rgba(28, 40, 30, .55) 40%, rgba(14, 20, 16, .85));
}

.garden-trees {
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: 26%;
  height: 34%;
  background:
    radial-gradient(ellipse 18% 70% at 8% 100%, #0e1a14 60%, transparent 62%),
    radial-gradient(ellipse 22% 85% at 18% 100%, #132218 58%, transparent 60%),
    radial-gradient(ellipse 16% 65% at 32% 100%, #0f1c15 60%, transparent 62%),
    radial-gradient(ellipse 20% 78% at 48% 100%, #15261b 55%, transparent 58%),
    radial-gradient(ellipse 17% 70% at 64% 100%, #101d16 60%, transparent 62%),
    radial-gradient(ellipse 24% 88% at 80% 100%, #14231a 56%, transparent 58%),
    radial-gradient(ellipse 18% 72% at 94% 100%, #0e1a14 60%, transparent 62%);
  opacity: .9;
  filter: blur(.4px);
}

.garden-mist {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(180, 190, 160, .08) 35%, rgba(20, 28, 22, .35) 100%);
}

.garden-hedges {
  position: absolute;
  inset: 0;
}

.hedge-wall {
  position: absolute;
  bottom: 0;
  background:
    linear-gradient(90deg, rgba(8, 14, 10, .55), transparent 28%, transparent 72%, rgba(8, 14, 10, .4)),
    linear-gradient(180deg, rgba(255, 200, 120, .06), transparent 18%, rgba(0, 0, 0, .35)),
    url("./images/hedge-texture.jpg") center / cover no-repeat;
  box-shadow: inset -20px 0 40px rgba(0, 0, 0, .35);
  filter: saturate(.9) contrast(1.05);
}

.hedge-wall-back-left,
.hedge-wall-back-right {
  width: 34vw;
  min-width: 11rem;
  max-width: 26rem;
  height: 58vh;
  opacity: .55;
  filter: blur(1.5px) brightness(.72) saturate(.75);
  clip-path: polygon(0 22%, 10% 12%, 24% 26%, 40% 10%, 55% 24%, 70% 8%, 86% 20%, 100% 14%, 100% 100%, 0 100%);
}

.hedge-wall-back-left {
  left: 2%;
  transform: scaleX(-1) translateZ(0);
}

.hedge-wall-back-right {
  right: 2%;
}

.hedge-wall-left,
.hedge-wall-right {
  width: 30vw;
  min-width: 11rem;
  max-width: 24rem;
  height: 74vh;
  opacity: .96;
  clip-path: polygon(0 16%, 11% 7%, 26% 20%, 41% 5%, 57% 18%, 71% 3%, 87% 15%, 100% 9%, 100% 100%, 0 100%);
}

.hedge-wall-left {
  left: 0;
  transform: scaleX(-1);
  box-shadow: inset 24px 0 50px rgba(0, 0, 0, .45);
}

.hedge-wall-right {
  right: 0;
}

.path-ribbon {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(34rem, 56vw);
  height: 46vh;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, transparent 0%, rgba(70, 58, 36, .25) 18%, rgba(110, 92, 58, .55) 100%),
    repeating-linear-gradient(
      115deg,
      rgba(160, 140, 100, .18) 0 2px,
      transparent 2px 7px
    ),
    linear-gradient(90deg, rgba(40, 32, 20, .5), rgba(120, 100, 65, .35) 50%, rgba(40, 32, 20, .5));
  clip-path: polygon(42% 0, 58% 0, 96% 100%, 4% 100%);
  box-shadow: 0 -30px 60px rgba(0, 0, 0, .25);
}

.path-edge {
  position: absolute;
  bottom: 0;
  width: 14%;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(30, 40, 28, .55));
}

.path-edge.left {
  left: 0;
  clip-path: polygon(70% 0, 100% 0, 45% 100%, 0 100%);
}

.path-edge.right {
  right: 0;
  clip-path: polygon(0 0, 30% 0, 100% 100%, 55% 100%);
}

.garden-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18%;
  background:
    linear-gradient(180deg, transparent, rgba(8, 12, 10, .75)),
    radial-gradient(ellipse at 50% 0%, rgba(60, 50, 30, .25), transparent 60%);
}

body::after {
  position: fixed;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  content: "";
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

button,
a {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

.invitation-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(18rem, .86fr) minmax(24rem, 1.14fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding: clamp(1.25rem, 4vw, 4rem);
}

.copy-panel {
  position: relative;
  z-index: 2;
  max-width: 42rem;
  text-shadow: 0 3px 22px rgba(0, 0, 0, .55);
  transition: opacity .4s ease, transform .4s ease;
}

.kicker,
.page-label,
.mode-label {
  margin: 0 0 1rem;
  color: var(--gold);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.mode-label {
  color: rgba(232, 210, 154, .7);
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 1.2rem;
  color: var(--ivory);
  font-size: clamp(3.4rem, 9vw, 7.5rem);
  font-weight: 500;
  line-height: .86;
  letter-spacing: -.04em;
  text-wrap: balance;
}

h1 small {
  display: block;
  max-width: 34rem;
  margin-top: 1.15rem;
  color: var(--dusk);
  font-size: clamp(1.35rem, 3.4vw, 2.6rem);
  font-style: italic;
  line-height: .95;
  letter-spacing: -.02em;
}

.intro {
  max-width: 34rem;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.72;
}

[contenteditable="true"] {
  position: relative;
  z-index: 1;
  outline: 1px dashed rgba(232, 210, 154, .4);
  outline-offset: .18rem;
  border-radius: .18rem;
  cursor: text;
}

.aisle [contenteditable="true"],
.gate-arch [contenteditable="true"] {
  z-index: 6;
}

[contenteditable="true"]:focus {
  outline-color: rgba(232, 210, 154, .9);
  box-shadow: 0 0 0 .32rem rgba(232, 210, 154, .08);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2rem;
}

.button,
.seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  padding: .7rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: .2rem;
  background: rgba(15, 26, 22, .45);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.button:hover,
.seal:hover {
  border-color: rgba(232, 210, 154, .55);
  background: rgba(63, 107, 74, .35);
}

.button-primary {
  background: linear-gradient(180deg, #4d7d58, #355a40);
  border-color: rgba(232, 210, 154, .35);
}

.button-primary:hover {
  background: linear-gradient(180deg, #5a8f66, #3f6b4a);
}

.gate-panel {
  position: relative;
  z-index: 2;
  perspective: 1400px;
}

.gate-wrap {
  position: relative;
  width: min(100%, 34rem);
  margin: 0 auto;
  transform-style: preserve-3d;
}

.gate-scene {
  position: relative;
  min-height: 34rem;
  transform-style: preserve-3d;
}

.gate {
  position: relative;
  z-index: 3;
  width: 100%;
  aspect-ratio: .78;
  max-height: min(70vh, 36rem);
  margin: 0 auto;
  transform-style: preserve-3d;
}

.gate-shadow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -2%;
  height: 12%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55), transparent 70%);
  filter: blur(8px);
}

.gate-arch {
  position: absolute;
  inset: 0 8% auto;
  z-index: 4;
  padding: 1.35rem 1rem .95rem;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(42, 38, 32, .94), rgba(28, 36, 30, .82)),
    url("./images/stone-texture.jpg") center / cover;
  border: 1px solid rgba(200, 180, 140, .28);
  border-radius: 48% 48% 10% 10% / 68% 68% 10% 10%;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, .4),
    inset 0 1px 0 rgba(255, 230, 180, .12);
  pointer-events: auto;
}

.arch-vine {
  position: absolute;
  inset: -.55rem -.35rem auto;
  height: 1.4rem;
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(circle at 12% 70%, #2f4a34 0 28%, transparent 30%),
    radial-gradient(circle at 28% 40%, #3d5e42 0 26%, transparent 28%),
    radial-gradient(circle at 48% 55%, #2a4330 0 30%, transparent 32%),
    radial-gradient(circle at 68% 35%, #456848 0 24%, transparent 26%),
    radial-gradient(circle at 88% 65%, #2f4a34 0 28%, transparent 30%);
  opacity: .9;
  pointer-events: none;
}

.gate-arch p {
  margin: 0 0 .35rem;
  color: var(--gold);
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.gate-arch h2 {
  margin: 0;
  color: var(--ivory);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 500;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.gate-doors {
  position: absolute;
  inset: 18% 7% 5%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .2rem;
  perspective: 1400px;
  transform-style: preserve-3d;
}

.gate-door {
  position: relative;
  height: 100%;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 210, 140, .1), transparent 18%, rgba(0, 0, 0, .35)),
    url("./images/wood-texture.jpg") center / cover no-repeat;
  border: 1px solid rgba(90, 70, 45, .65);
  box-shadow:
    inset 0 0 28px rgba(0, 0, 0, .4),
    0 10px 24px rgba(0, 0, 0, .3);
  transform-style: preserve-3d;
  transition: transform 1.15s cubic-bezier(.4, 0, .2, 1);
}

.gate-door-left {
  transform-origin: left center;
  border-radius: .45rem 0 0 .25rem;
}

.gate-door-right {
  transform-origin: right center;
  border-radius: 0 .45rem .25rem 0;
}

.door-planks {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 14%,
      rgba(0, 0, 0, .18) 14% 15%,
      transparent 15% 29%
    );
  opacity: .85;
  pointer-events: none;
}

.door-lattice {
  position: absolute;
  inset: 14% 12%;
  border: 1px solid rgba(200, 170, 110, .28);
  background:
    linear-gradient(rgba(210, 180, 120, .18) 1px, transparent 1px) 0 0 / 100% 20%,
    linear-gradient(90deg, rgba(210, 180, 120, .18) 1px, transparent 1px) 0 0 / 25% 100%;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, .2);
  opacity: .75;
  pointer-events: none;
}

.door-hinge {
  position: absolute;
  width: .55rem;
  height: 1.35rem;
  border-radius: .12rem;
  background: linear-gradient(90deg, #6a6258, #3a342c 55%, #8a8070);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

.gate-door-left .door-hinge {
  left: .35rem;
}

.gate-door-right .door-hinge {
  right: .35rem;
}

.door-hinge.top {
  top: 18%;
}

.door-hinge.bottom {
  bottom: 18%;
}

.door-latch {
  position: absolute;
  top: 48%;
  left: -.2rem;
  width: .9rem;
  height: 1.1rem;
  border-radius: .15rem;
  background: linear-gradient(180deg, #8a8070, #4a4438);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
  transform: translateY(-50%);
}

.gate-posts {
  position: absolute;
  inset: 10% 1.5% 2%;
  pointer-events: none;
  z-index: 5;
}

.gate-post {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.15rem;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 40%, rgba(255, 255, 255, .08)),
    url("./images/stone-texture.jpg") center / cover;
  border-radius: .15rem;
  box-shadow: 0 0 16px rgba(0, 0, 0, .4);
}

.gate-post.left {
  left: 0;
}

.gate-post.right {
  right: 0;
}

.post-cap {
  position: absolute;
  top: -.45rem;
  left: -.25rem;
  right: -.25rem;
  height: .7rem;
  border-radius: .12rem;
  background: linear-gradient(180deg, #9a9080, #5a5348);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

.gate-ivy {
  position: absolute;
  inset: 8% -2% auto;
  height: 22%;
  z-index: 6;
  background:
    radial-gradient(circle at 8% 70%, #2f4a34 0 10%, transparent 12%),
    radial-gradient(circle at 18% 40%, #3d5e42 0 9%, transparent 11%),
    radial-gradient(circle at 30% 65%, #274030 0 11%, transparent 13%),
    radial-gradient(circle at 72% 45%, #3a5840 0 10%, transparent 12%),
    radial-gradient(circle at 86% 70%, #2f4a34 0 11%, transparent 13%),
    radial-gradient(circle at 95% 40%, #456848 0 8%, transparent 10%);
  opacity: .85;
  pointer-events: none;
}

.gate-scene.is-open .gate-door-left {
  transform: rotateY(-102deg);
}

.gate-scene.is-open .gate-door-right {
  transform: rotateY(102deg);
}

.gate-scene.is-open .door-latch {
  opacity: 0;
}

.aisle {
  position: absolute;
  inset: 16% 4% 2%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: 1rem .85rem .9rem;
  overflow: auto;
  border-radius: .45rem;
  background:
    linear-gradient(180deg, rgba(247, 242, 232, .96), rgba(236, 228, 210, .94));
  color: var(--paper-ink);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .4);
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity .55s ease, transform .55s ease;
}

.gate-scene.is-open .aisle {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.aisle .page-label {
  color: #5a6b4a;
  margin-bottom: .35rem;
}

.photo-lattice {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
}

.photo-frame {
  position: relative;
  margin: 0;
  padding: .35rem .35rem 1.55rem;
  background: #fffef9;
  box-shadow: 0 8px 18px rgba(36, 48, 40, .18);
  transition: transform .3s ease;
}

.photo-frame.is-hidden {
  display: none;
}

.photo-frame.tilt-a {
  transform: rotate(-2.2deg);
}

.photo-frame.tilt-b {
  transform: rotate(1.8deg);
}

.photo-frame.tilt-c {
  transform: rotate(-1deg);
}

.photo-placeholder,
.photo-preview {
  --photo-x: 50%;
  --photo-y: 50%;
  aspect-ratio: .8;
  overflow: hidden;
  background: #d7dfd0;
}

.photo-placeholder img,
.photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-x) var(--photo-y);
  display: block;
}

.photo-frame.is-landscape .photo-placeholder,
.photo-frame.is-landscape .photo-preview {
  aspect-ratio: 1.2;
}

.photo-frame.is-portrait .photo-placeholder,
.photo-frame.is-portrait .photo-preview {
  aspect-ratio: .7;
}

.photo-frame figcaption {
  position: absolute;
  left: .35rem;
  right: .35rem;
  bottom: .35rem;
  margin: 0;
  color: #4a5544;
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .04em;
  text-align: center;
}

.photo-tools {
  display: none;
  position: absolute;
  inset: .35rem .35rem auto;
  gap: .25rem;
  z-index: 4;
}

body[data-version="customer"] .photo-tools {
  display: flex;
  flex-wrap: wrap;
}

.photo-tools label,
.photo-tools button,
.photo-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.6rem;
  padding: .2rem .45rem;
  border: 0;
  border-radius: .15rem;
  background: rgba(30, 51, 40, .88);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}

.photo-tools input,
.photo-add input {
  display: none;
}

.photo-add {
  align-self: flex-start;
  margin-top: .15rem;
}

body[data-version="customer"] .photo-placeholder,
body[data-version="customer"] .photo-preview {
  cursor: grab;
}

body[data-version="customer"] .photo-frame.is-dragging .photo-preview {
  cursor: grabbing;
}

body[data-version="recipient"] .gate-scene.is-open .photo-placeholder,
body[data-version="recipient"] .gate-scene.is-open .photo-preview {
  cursor: zoom-in;
}

.aisle-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-top: .25rem;
}

.aisle-card {
  padding: .85rem .9rem;
  border: 1px solid rgba(63, 107, 74, .18);
  border-radius: .3rem;
  background: rgba(255, 255, 255, .45);
}

.aisle-card h2 {
  margin: 0 0 .55rem;
  color: var(--ink);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.05;
}

.aisle-card p {
  margin: 0;
  color: #4d5a4e;
  font-size: .95rem;
  line-height: 1.45;
}

.aisle-card dl {
  margin: 0 0 .75rem;
  display: grid;
  gap: .45rem;
}

.aisle-card dt {
  margin: 0;
  color: #6a7a62;
  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.aisle-card dd {
  margin: .15rem 0 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.2;
}

.seal {
  min-height: 2.3rem;
  padding: .45rem .9rem;
  background: linear-gradient(180deg, #4d7d58, #355a40);
  color: var(--ivory);
}

.gate-controls {
  display: flex;
  justify-content: center;
  gap: .55rem;
  margin-top: 1rem;
}

.gate-controls button {
  min-height: 2.2rem;
  padding: .45rem .9rem;
  border: 1px solid var(--line);
  border-radius: .2rem;
  background: rgba(15, 26, 22, .5);
  color: var(--gold);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

.dynamic-hint {
  position: absolute;
  left: clamp(1.25rem, 4vw, 4rem);
  bottom: 1.4rem;
  z-index: 3;
  display: grid;
  gap: .2rem;
  max-width: 18rem;
  color: var(--muted);
  font-family: var(--sans);
  font-size: .78rem;
  line-height: 1.4;
}

.dynamic-hint strong {
  color: var(--gold);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.details-section {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.25rem;
  align-content: start;
  padding: clamp(1.5rem, 5vw, 4rem);
  background:
    linear-gradient(180deg, rgba(15, 26, 22, .72), rgba(10, 18, 14, .92));
}

.details-card {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(232, 210, 154, .18);
  border-radius: .4rem;
  background: rgba(247, 242, 232, .96);
  color: var(--paper-ink);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}

.details-card .mode-label {
  color: #5a6b4a;
}

.details-card h2 {
  margin-bottom: .85rem;
  color: var(--ink);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 500;
  line-height: 1.05;
}

.summary-copy {
  color: #4d5a4e;
  font-size: 1.05rem;
  line-height: 1.6;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  margin: 1.4rem 0;
}

.detail-grid label,
.rsvp-form label {
  display: grid;
  gap: .35rem;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5a6b4a;
}

.detail-grid .wide {
  grid-column: 1 / -1;
}

.detail-grid input,
.detail-grid select,
.detail-grid textarea,
.rsvp-form input,
.rsvp-form textarea {
  width: 100%;
  padding: .7rem .75rem;
  border: 1px solid rgba(63, 107, 74, .25);
  border-radius: .25rem;
  background: #fffef9;
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.05rem;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 500;
}

.detail-grid textarea,
.rsvp-form textarea {
  min-height: 6rem;
  resize: vertical;
}

.plain-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem 1.2rem;
  margin: 1.4rem 0;
}

.plain-details dt {
  margin: 0;
  color: #6a7a62;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.plain-details dd {
  margin: .25rem 0 0;
  color: var(--ink);
  font-size: 1.15rem;
}

.details-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1rem;
}

.details-card .button {
  color: var(--ivory);
}

.link-preview,
.form-message {
  margin: .9rem 0 0;
  color: #5a6b4a;
  font-family: var(--sans);
  font-size: .82rem;
  line-height: 1.45;
  word-break: break-word;
}

.rsvp-form {
  display: grid;
  gap: .85rem;
  align-content: start;
}

.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(10, 18, 14, .88);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.photo-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.photo-lightbox figure {
  margin: 0;
  max-width: min(42rem, 100%);
  transform: translateY(12px) scale(.98);
  transition: transform .3s ease;
}

.photo-lightbox.is-open figure {
  transform: none;
}

.photo-lightbox-frame {
  overflow: hidden;
  border-radius: .3rem;
  background: #111;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.photo-lightbox img {
  display: block;
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
}

.photo-lightbox figcaption {
  margin-top: .7rem;
  color: var(--gold);
  font-family: var(--sans);
  font-size: .85rem;
  text-align: center;
}

.photo-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(15, 26, 22, .7);
  color: var(--ivory);
  font-size: 1.4rem;
  cursor: pointer;
}

.mobile-step-button {
  display: none;
}

@media (max-width: 980px) {
  .invitation-shell {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-bottom: 5rem;
  }

  .gate-wrap {
    width: min(100%, 28rem);
  }

  .dynamic-hint {
    position: static;
    margin-top: 1.25rem;
  }
}

@media (max-width: 760px) {
  html {
    scroll-snap-type: none;
  }

  .hedge-wall-left,
  .hedge-wall-right {
    width: 36vw;
    height: 60vh;
    opacity: .88;
  }

  .hedge-wall-back-left,
  .hedge-wall-back-right {
    height: 48vh;
    opacity: .4;
  }

  .invitation-shell {
    min-height: 100dvh;
    padding: 1.1rem 1rem 6rem;
    align-content: start;
  }

  .copy-panel h1 {
    font-size: clamp(2.8rem, 14vw, 4.2rem);
  }

  .gate-controls {
    display: none;
  }

  .mobile-step-button {
    position: fixed;
    right: 1rem;
    bottom: 1.15rem;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border: 1px solid rgba(232, 210, 154, .4);
    border-radius: 999px;
    background: linear-gradient(180deg, #4d7d58, #355a40);
    color: var(--ivory);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
    cursor: pointer;
  }

  .mobile-step-button::before {
    content: "→";
    font-size: 1.2rem;
  }

  .photo-lattice {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aisle-cards {
    grid-template-columns: 1fr;
  }

  .detail-grid,
  .plain-details {
    grid-template-columns: 1fr;
  }

  /* Stage 0: arrive — copy + distant gate */
  body[data-mobile-stage="0"] .gate-wrap {
    transform: scale(.72) translateY(12%);
    opacity: .72;
  }

  /* Stage 1: approach gate */
  body[data-mobile-stage="1"] .copy-panel,
  body[data-mobile-stage="2"] .copy-panel,
  body[data-mobile-stage="3"] .copy-panel,
  body[data-mobile-stage="4"] .copy-panel {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-1rem);
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
  }

  body[data-mobile-stage="1"] .gate-wrap {
    transform: scale(1) translateY(0);
    opacity: 1;
  }

  body[data-mobile-stage="1"] .aisle {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Stage 2: gate open + photos */
  body[data-mobile-stage="2"] .gate-wrap {
    transform: none;
    width: 100%;
  }

  body[data-mobile-stage="2"] .gate {
    max-height: none;
    aspect-ratio: auto;
    min-height: 0;
  }

  body[data-mobile-stage="2"] .gate-arch,
  body[data-mobile-stage="2"] .gate-doors,
  body[data-mobile-stage="2"] .gate-posts,
  body[data-mobile-stage="2"] .gate-ivy,
  body[data-mobile-stage="2"] .gate-shadow {
    display: none;
  }

  body[data-mobile-stage="2"] .aisle {
    position: relative;
    inset: auto;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    max-height: none;
  }

  body[data-mobile-stage="2"] .aisle-cards {
    display: none;
  }

  body[data-version="recipient"][data-mobile-stage="2"] .photo-placeholder,
  body[data-version="recipient"][data-mobile-stage="2"] .photo-preview {
    cursor: zoom-in;
  }

  /* Stages 3–4: guest note / particulars */
  body[data-mobile-stage="3"] .gate-wrap,
  body[data-mobile-stage="4"] .gate-wrap {
    width: 100%;
  }

  body[data-mobile-stage="3"] .gate-arch,
  body[data-mobile-stage="3"] .gate-doors,
  body[data-mobile-stage="3"] .gate-posts,
  body[data-mobile-stage="3"] .gate-ivy,
  body[data-mobile-stage="3"] .gate-shadow,
  body[data-mobile-stage="4"] .gate-arch,
  body[data-mobile-stage="4"] .gate-doors,
  body[data-mobile-stage="4"] .gate-posts,
  body[data-mobile-stage="4"] .gate-ivy,
  body[data-mobile-stage="4"] .gate-shadow,
  body[data-mobile-stage="3"] .photo-lattice,
  body[data-mobile-stage="4"] .photo-lattice,
  body[data-mobile-stage="3"] .photo-add,
  body[data-mobile-stage="4"] .photo-add,
  body[data-mobile-stage="3"] .aisle > .page-label,
  body[data-mobile-stage="4"] .aisle > .page-label {
    display: none;
  }

  body[data-mobile-stage="3"] .aisle,
  body[data-mobile-stage="4"] .aisle {
    position: relative;
    inset: auto;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  body[data-mobile-stage="3"] .aisle-cards,
  body[data-mobile-stage="4"] .aisle-cards {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 55vh;
    align-content: center;
  }

  body[data-mobile-stage="3"] .particulars-card {
    display: none;
  }

  body[data-mobile-stage="4"] .guest-card {
    display: none;
  }

  body[data-mobile-stage="3"] .guest-card,
  body[data-mobile-stage="4"] .particulars-card {
    padding: 1.4rem 1.1rem;
  }

  /* Stage 5: details */
  body[data-mobile-stage="5"] .mobile-step-button {
    display: none;
  }

  body[data-mobile-stage="5"] .gate-panel,
  body[data-mobile-stage="5"] .copy-panel,
  body[data-mobile-stage="5"] .dynamic-hint {
    display: none;
  }

  body[data-mobile-stage="5"] .invitation-shell {
    min-height: 0;
    padding: 0;
  }
}

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}