:root {
  --ivory: #f6f0e4;
  --paper: #fffdf8;
  --ink: #352d29;
  --muted: #786f68;
  --green: #526253;
  --green-deep: #2f4034;
  --green-soft: #dce1d8;
  --gold: #b89250;
  --gold-light: #dfc27e;
  --gold-deep: #8d6a2f;
  --shadow: 0 24px 70px rgba(62, 47, 31, 0.14);
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ivory); }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: radial-gradient(circle at 10% 8%, rgba(223,194,126,.12), transparent 28rem), var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-locked { height: 100vh; height: 100dvh; overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.intro {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  padding: max(28px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom));
  background: linear-gradient(rgba(246,240,228,.91), rgba(246,240,228,.98)), repeating-linear-gradient(118deg, rgba(106,89,65,.025) 0 1px, transparent 1px 5px);
  opacity: 1;
  transition: opacity 700ms ease, visibility 700ms ease;
}
.intro::before, .intro::after {
  position: absolute;
  width: 46vw;
  max-width: 260px;
  aspect-ratio: 1;
  border: 1px solid rgba(184,146,80,.16);
  border-radius: 50%;
  content: "";
}
.intro::before { top: -23vw; left: -21vw; }
.intro::after { right: -20vw; bottom: -24vw; }
.intro.is-leaving { visibility: hidden; opacity: 0; pointer-events: none; }
.intro-glow {
  position: absolute;
  top: 48%; left: 50%;
  width: min(88vw, 480px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(215,187,122,.21), transparent 65%);
  transform: translate(-50%, -50%);
  filter: blur(12px);
}
.envelope-stage {
  position: relative;
  z-index: 2;
  width: min(100%, 410px);
  text-align: center;
  transition: opacity 350ms ease, transform 350ms ease;
}
.intro.video-playing .envelope-stage { opacity: 0; transform: scale(.96); pointer-events: none; }
.intro-overline, .section-kicker, .eyebrow {
  margin: 0;
  color: var(--gold-deep);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .27em;
  line-height: 1.5;
  text-transform: uppercase;
}
.intro-overline { margin-bottom: 55px; }
.envelope-button {
  position: relative;
  display: block;
  width: min(84vw, 342px);
  height: min(57vw, 232px);
  max-height: 232px;
  min-height: 195px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
  perspective: 1000px;
}
.envelope-button:focus-visible { border-radius: 12px; box-shadow: 0 0 0 4px rgba(184,146,80,.32); }
.envelope-shadow {
  position: absolute;
  right: 8%; bottom: -16px; left: 8%;
  height: 29px;
  border-radius: 50%;
  background: rgba(59,43,27,.22);
  filter: blur(16px);
  transition: opacity 500ms ease, transform 800ms ease;
}
.envelope {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 19px 24px rgba(66,49,29,.13));
  transform-style: preserve-3d;
}
.envelope-back {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(128,102,61,.26);
  border-radius: 4px 4px 10px 10px;
  background: repeating-linear-gradient(135deg, rgba(102,82,52,.025) 0 1px, transparent 1px 5px), #eadfc9;
}
.invitation-slip {
  position: absolute;
  z-index: 2;
  top: 10%; left: 8%;
  display: flex;
  width: 84%; height: 82%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px solid rgba(184,146,80,.24);
  background: radial-gradient(circle at 50% 15%, rgba(223,194,126,.12), transparent 40%), #fffdf8;
  box-shadow: 0 6px 14px rgba(74,54,29,.12);
  color: var(--ink);
  transition: transform 1050ms cubic-bezier(.2,.72,.2,1) 400ms;
}
.slip-ornament { margin-bottom: 8px; color: var(--gold); font-size: 1.3rem; }
.slip-monogram { font-family: var(--serif); font-size: clamp(1.5rem, 8vw, 2.2rem); letter-spacing: .04em; }
.slip-monogram i, .footer-monogram i, .placeholder-monogram i { color: var(--gold); font-size: .64em; font-weight: 400; }
.slip-date { margin-top: 12px; color: var(--muted); font-size: .58rem; font-weight: 700; letter-spacing: .23em; }
.envelope-front-left, .envelope-front-right, .envelope-front-bottom, .envelope-flap {
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: 4px 4px 10px 10px;
}
.envelope-front-left { background: linear-gradient(145deg, #f1e7d4, #e4d6be); clip-path: polygon(0 0, 56% 56%, 0 100%); }
.envelope-front-right { background: linear-gradient(215deg, #f4ead8, #ddceb4); clip-path: polygon(100% 0, 44% 56%, 100% 100%); }
.envelope-front-bottom { background: linear-gradient(0deg, #e8dac2, #f5ead7); clip-path: polygon(0 100%, 50% 42%, 100% 100%); }
.envelope-flap {
  z-index: 6;
  height: 60%;
  border-radius: 4px;
  background: linear-gradient(150deg, #f3e9d7 10%, #ded0b6 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform: rotateX(0deg);
  transform-origin: top center;
  transition: transform 850ms cubic-bezier(.34,.7,.2,1);
  backface-visibility: hidden;
}
.envelope-letter-shadow {
  position: absolute;
  z-index: 3;
  inset: 0;
  background: linear-gradient(rgba(63,45,23,.22), transparent 35%);
  clip-path: polygon(0 0, 100% 0, 50% 58%);
  opacity: 0;
  transition: opacity 500ms ease 450ms;
}
.wax-seal {
  position: absolute;
  z-index: 8;
  top: 48%; left: 50%;
  display: grid;
  width: 56px;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid rgba(255,232,190,.42);
  border-radius: 46% 54% 49% 51%;
  background: radial-gradient(circle at 35% 30%, rgba(255,222,152,.5), transparent 23%), linear-gradient(135deg, #c6a35d, #8e6c2f);
  box-shadow: 0 5px 10px rgba(75,52,19,.24), inset 0 0 0 4px rgba(90,62,24,.1);
  color: #fff5df;
  transform: translate(-50%, -50%) rotate(-4deg);
  transition: opacity 300ms ease, transform 500ms ease;
}
.wax-seal span { font-family: var(--serif); font-size: .82rem; letter-spacing: -.07em; }
.intro.opening .envelope-flap { z-index: 1; transform: rotateX(180deg); }
.intro.opening .wax-seal { opacity: 0; transform: translate(-50%, -72%) scale(.7) rotate(10deg); }
.intro.opening .envelope-letter-shadow { opacity: 1; }
.intro.opening .invitation-slip { transform: translateY(-52%); }
.intro.opening .envelope-shadow { opacity: .65; transform: scale(1.08); }
.tap-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 54px 0 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: .98rem;
  letter-spacing: .04em;
  animation: hint-pulse 2.4s ease-in-out infinite;
}
.tap-hint span { color: var(--gold); font-size: .55rem; }
@keyframes hint-pulse { 0%,100% { opacity:.66; transform:translateY(0); } 50% { opacity:1; transform:translateY(-3px); } }
.intro-video { position:absolute; z-index:4; inset:0; width:100%; height:100%; background:var(--ivory); object-fit:cover; }
.skip-intro {
  position: absolute;
  z-index: 6;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.66);
  border-radius: 999px;
  background: rgba(35,31,27,.42);
  color: white;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.invitation { position: relative; overflow: hidden; background: var(--ivory); }
.section-pad { padding-right: max(22px, env(safe-area-inset-right)); padding-left: max(22px, env(safe-area-inset-left)); }
.hero {
  position: relative;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  align-items: center;
  flex-direction: column;
  padding-top: max(54px, calc(env(safe-area-inset-top) + 34px));
  padding-bottom: 56px;
  text-align: center;
}
.hero::before {
  position: absolute;
  top: 0; left: 50%;
  width: min(118vw, 760px);
  height: 48%;
  border-radius: 0 0 50% 50%;
  background: radial-gradient(ellipse at center top, rgba(223,194,126,.16), transparent 66%);
  content: "";
  transform: translateX(-50%);
}
.eyebrow { position: relative; margin-bottom: 24px; }
.hero-copy { position: relative; z-index: 2; width: min(100%, 660px); }
.hero-intro { margin:0 0 12px; color:var(--muted); font-family:var(--serif); font-size:clamp(.94rem,3.7vw,1.12rem); font-style:italic; line-height:1.55; }
.hero h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0;
  color: var(--green-deep);
  font-family: var(--serif);
  font-size: clamp(3rem, 15vw, 6.4rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .78;
}
.hero h1 b { margin:8px 0 5px; color:var(--gold); font-size:.44em; font-style:italic; font-weight:400; line-height:1; }
.hero-subtitle { max-width:460px; margin:25px auto 27px; color:var(--muted); font-size:clamp(.84rem,3.4vw,.98rem); line-height:1.7; }
.photo-frame {
  position: relative;
  width: min(76vw, 390px);
  margin-top: 4px;
  aspect-ratio: 4 / 5;
  padding: 8px;
  border: 1px solid rgba(184,146,80,.48);
  background: rgba(255,253,248,.52);
  box-shadow: var(--shadow);
}
.photo-frame::after { position:absolute; z-index:4; inset:8px; border:1px solid rgba(255,255,255,.58); content:""; pointer-events:none; }
.photo-frame img, .photo-placeholder { position:absolute; inset:8px; width:calc(100% - 16px); height:calc(100% - 16px); }
.photo-frame img { z-index:2; display:block; object-fit:cover; opacity:0; transition:opacity 550ms ease; }
.photo-frame.has-photo img { opacity:1; }
.photo-placeholder {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  background:linear-gradient(150deg, rgba(255,255,255,.62), transparent 44%), linear-gradient(135deg, #d8d5c7, #9da697 48%, #6f7d70);
  color:rgba(255,253,248,.92);
}
.photo-placeholder::before { position:absolute; inset:12%; border:1px solid rgba(255,255,255,.35); border-radius:50% 50% 46% 54%; content:""; }
.placeholder-monogram { position:relative; font-family:var(--serif); font-size:clamp(2rem,11vw,3.4rem); }
.photo-placeholder > span { position:relative; margin-top:12px; font-size:.62rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.photo-corner { position:absolute; z-index:5; width:42px; height:42px; pointer-events:none; }
.photo-corner-one { top:-8px; left:-8px; border-top:2px solid var(--gold); border-left:2px solid var(--gold); }
.photo-corner-two { right:-8px; bottom:-8px; border-right:2px solid var(--gold); border-bottom:2px solid var(--gold); }
.scroll-cue { display:grid; width:24px; height:38px; margin-top:34px; place-items:start center; border:1px solid rgba(82,98,83,.4); border-radius:999px; padding-top:8px; }
.scroll-cue span { width:3px; height:7px; border-radius:999px; background:var(--gold); animation:scroll-dot 1.8s ease-in-out infinite; }
@keyframes scroll-dot { 0%{opacity:0;transform:translateY(0)} 25%,75%{opacity:1} 100%{opacity:0;transform:translateY(12px)} }

.date-section {
  position: relative;
  padding-top: 88px;
  padding-bottom: 100px;
  background: linear-gradient(rgba(255,253,248,.92), rgba(255,253,248,.92)), repeating-linear-gradient(100deg, rgba(98,77,47,.04) 0 1px, transparent 1px 6px);
  text-align: center;
}
.ornament { display:flex; align-items:center; justify-content:center; gap:13px; margin:0 auto 25px; color:var(--gold); }
.ornament::before, .ornament::after { width:48px; height:1px; background:linear-gradient(90deg, transparent, var(--gold)); content:""; }
.ornament::after { background:linear-gradient(90deg, var(--gold), transparent); }
.ornament span { font-size:1.1rem; }
.section-title { margin:8px 0 0; color:var(--green-deep); font-family:var(--serif); font-size:clamp(2.3rem,10vw,4.2rem); font-weight:400; letter-spacing:-.035em; line-height:1.06; }
.scratch-instruction, .rsvp-lead, .location-copy { max-width:520px; margin:18px auto 0; color:var(--muted); font-size:.88rem; line-height:1.7; }
.scratch-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(8px,2.8vw,18px); width:min(100%,680px); margin:37px auto 0; }
.scratch-card {
  position: relative;
  min-width: 0;
  aspect-ratio: .82;
  overflow: hidden;
  border: 1px solid rgba(184,146,80,.42);
  border-radius: 4px;
  background: #f9f3e7;
  box-shadow: 0 12px 30px rgba(74,54,31,.1);
}
.scratch-card::before { position:absolute; z-index:0; inset:6px; border:1px solid rgba(184,146,80,.25); content:""; }
.scratch-answer { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:8px 3px; background:radial-gradient(circle at center, rgba(223,194,126,.18), transparent 60%), var(--paper); color:var(--green-deep); }
.scratch-value { font-family:var(--serif); font-size:clamp(2rem,10.5vw,4.6rem); line-height:1; }
.scratch-value.scratch-word { font-size:clamp(1.25rem,5.6vw,2.7rem); letter-spacing:.02em; }
.scratch-value.scratch-year { font-size:clamp(1.45rem,7vw,3.3rem); }
.scratch-answer small { margin-top:9px; color:var(--gold-deep); font-size:clamp(.45rem,1.8vw,.62rem); font-weight:700; letter-spacing:.22em; }
.scratch-layer { position:absolute; z-index:2; inset:0; display:block; width:100%; height:100%; cursor:crosshair; touch-action:none; transition:opacity 550ms ease, transform 550ms ease; }
.scratch-layer:focus-visible { outline:3px solid var(--green); outline-offset:-5px; }
.scratch-layer.is-cleared { opacity:0; transform:scale(1.03); pointer-events:none; }
.scratch-card.revealed { animation:reveal-card 650ms ease both; }
@keyframes reveal-card { 0%{transform:scale(.98)} 55%{transform:scale(1.025)} 100%{transform:scale(1)} }
.scratch-status { min-height:21px; margin:20px 0 0; color:var(--green); font-family:var(--serif); font-size:.9rem; font-style:italic; }

.location-section { padding-top:92px; padding-bottom:92px; background:var(--green-deep); }
.location-card {
  position: relative;
  width: min(100%,650px);
  margin: 0 auto;
  padding: 49px 24px 35px;
  border: 1px solid rgba(223,194,126,.48);
  background: linear-gradient(rgba(255,253,248,.965),rgba(255,253,248,.965)), repeating-linear-gradient(120deg,rgba(126,93,43,.08) 0 1px,transparent 1px 6px);
  box-shadow: 0 26px 62px rgba(14,22,16,.28);
  text-align: center;
}
.location-card::before, .location-card::after { position:absolute; width:40px; height:40px; content:""; }
.location-card::before { top:9px; left:9px; border-top:1px solid var(--gold); border-left:1px solid var(--gold); }
.location-card::after { right:9px; bottom:9px; border-right:1px solid var(--gold); border-bottom:1px solid var(--gold); }
.location-pin { display:grid; width:54px; height:54px; margin:0 auto 24px; place-items:center; border:1px solid rgba(184,146,80,.54); border-radius:50%; color:var(--gold-deep); }
.location-pin svg, .map-button svg { width:22px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.6; }
.location-address { margin:11px 0 0; color:var(--gold-deep); font-family:var(--serif); font-size:1.15rem; font-style:italic; }
.location-rule { width:48px; height:1px; margin:24px auto 20px; background:var(--gold); }
.map-embed {
  position: relative;
  width: 100%;
  margin-top: 27px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(184,146,80,.42);
  background: #e9e5dc;
  box-shadow: 0 10px 28px rgba(47,64,52,.12);
}
.map-embed iframe { display:block; width:100%; height:100%; border:0; }
.map-button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 21px;
  border: 1px solid var(--green-deep);
  background: var(--green-deep);
  color: white;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
}
.map-button:active { transform:scale(.98); }

.quote-section { padding-top:104px; padding-bottom:100px; background:radial-gradient(circle at 50% 45%, rgba(223,194,126,.12), transparent 50%), var(--ivory); text-align:center; }
.quote-mark { height:48px; color:var(--gold); font-family:var(--serif); font-size:4.8rem; line-height:1; }
.quote-section blockquote { max-width:650px; margin:20px auto 0; color:var(--green-deep); font-family:var(--serif); font-size:clamp(2rem,9vw,4rem); font-style:italic; line-height:1.18; }
.quote-translation { max-width:500px; margin:24px auto 30px; color:var(--muted); font-size:.78rem; letter-spacing:.04em; line-height:1.65; }
.ornament-light { margin-bottom:0; opacity:.72; }

.rsvp-section { padding-top:92px; padding-bottom:100px; background:linear-gradient(rgba(255,253,248,.95),rgba(255,253,248,.95)), repeating-linear-gradient(108deg,rgba(95,72,39,.04) 0 1px,transparent 1px 6px); text-align:center; }
.rsvp-lead { margin-top:20px; }
.rsvp-form { width:min(100%,620px); margin:38px auto 0; text-align:left; }
.attendance-fieldset { margin:0 0 23px; padding:0; border:0; }
.attendance-fieldset legend, .form-field > span { display:block; margin-bottom:8px; color:var(--ink); font-size:.73rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.form-field > span small { color:var(--muted); font-size:.64rem; font-weight:500; letter-spacing:0; text-transform:none; }
.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.choice-card {
  position: relative;
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 10px;
  border: 1px solid rgba(82,98,83,.25);
  background: rgba(255,255,255,.66);
  color: var(--green-deep);
  font-size: .78rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.choice-card:has(input:checked) { border-color:var(--green); background:var(--green-soft); box-shadow:inset 0 0 0 1px var(--green); }
.choice-card input { position:absolute; width:1px; height:1px; opacity:0; }
.choice-card:has(input:focus-visible) { outline:3px solid rgba(184,146,80,.4); outline-offset:2px; }
.choice-icon { color:var(--gold-deep); font-family:var(--serif); font-size:1rem; }
.field-row { display:grid; grid-template-columns:1fr; gap:16px; }
.form-field { display:block; margin-bottom:18px; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  min-height: 54px;
  border: 1px solid rgba(82,98,83,.25);
  border-radius: 0;
  outline: none;
  background: rgba(255,255,255,.75);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.form-field input, .form-field select { padding:0 15px; }
.form-field textarea { min-height:112px; padding:15px; resize:vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color:var(--gold); background:white; box-shadow:0 0 0 3px rgba(184,146,80,.13); }
.form-field.is-disabled { display:none; }
.submit-button {
  display: flex;
  width: 100%;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
  border: 1px solid var(--green-deep);
  background: var(--green-deep);
  color: white;
  font-size: .77rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}
.submit-button svg { width:22px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
.submit-button:active { transform:scale(.985); }
.form-note { margin:12px 4px 0; color:var(--muted); font-size:.67rem; line-height:1.5; text-align:center; }
.response-preview { width:min(100%,620px); margin:32px auto 0; padding:28px 20px; border:1px solid rgba(184,146,80,.34); background:rgba(255,255,255,.7); text-align:center; }
.response-check { display:grid; width:46px; height:46px; margin:0 auto 13px; place-items:center; border-radius:50%; background:var(--green-deep); color:white; }
.response-preview h3 { margin:0; color:var(--green-deep); font-family:var(--serif); font-size:2rem; font-weight:400; }
.response-preview > p { margin:6px 0 17px; color:var(--muted); font-size:.82rem; }
.response-preview pre { overflow:auto; margin:0; padding:14px; background:var(--ivory); color:var(--ink); font-family:var(--sans); font-size:.74rem; line-height:1.55; text-align:left; white-space:pre-wrap; }
.response-actions { display:grid; grid-template-columns:1fr; gap:9px; margin-top:14px; }
.response-actions button { min-height:47px; border:1px solid var(--green-deep); background:transparent; color:var(--green-deep); font-size:.75rem; font-weight:700; cursor:pointer; }
.response-actions button:first-child { background:var(--green-deep); color:white; }
.copy-status { min-height:18px; margin:9px 0 0 !important; color:var(--green) !important; }

.footer { padding-top:68px; padding-bottom:max(70px, calc(env(safe-area-inset-bottom) + 52px)); background:var(--green-deep); color:rgba(255,255,255,.82); text-align:center; }
.footer-monogram { color:white; font-family:var(--serif); font-size:2.3rem; }
.footer p { margin:15px 0 10px; font-family:var(--serif); font-size:1rem; font-style:italic; }
.footer > span { color:var(--gold-light); font-size:.64rem; font-weight:700; letter-spacing:.24em; }
.reveal-on-scroll { opacity:0; transform:translateY(24px); transition:opacity 800ms ease, transform 800ms cubic-bezier(.2,.72,.2,1); }
.reveal-on-scroll.is-visible { opacity:1; transform:translateY(0); }

@media (min-width:560px) {
  .section-pad { padding-right:38px; padding-left:38px; }
  .field-row { grid-template-columns:1fr 1fr; }
  .response-actions { grid-template-columns:1fr 1fr; }
  .location-card { padding:62px 48px 46px; }
  .map-embed { aspect-ratio:16 / 10; }
}
@media (min-width:800px) {
  .hero { padding-top:70px; }
  .photo-frame { width:min(42vw,390px); }
  .map-button:hover, .submit-button:hover { background:var(--green); }
  .response-actions button:hover { background:var(--green-soft); }
  .response-actions button:first-child:hover { background:var(--green); }
}
@media (max-height:700px) and (max-width:600px) {
  .intro-overline { margin-bottom:34px; }
  .envelope-button { width:min(74vw,300px); height:min(50vw,203px); min-height:170px; }
  .tap-hint { margin-top:39px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal-on-scroll { opacity:1; transform:none; }
}