/* =========================================================
   Nika's Fairy First — styles
   The invitation is designed on a 390 × 680 grid and scaled with --u
   so it always fits one screen (no scrolling) on phones and desktops.
   ========================================================= */
:root {
  --ivory: #fffaf4;
  --paper: #fffdf9;
  --rose: #cc6a89;
  --rose-deep: #a9466a;
  --gold: #9a7535;
  --gold-light: #d8b673;
  --ink: #54404a;
  --ink-soft: #77626b;
  --line: #ecd8de;
  --sky: linear-gradient(180deg, #ecd6ea 0%, #f6dbe5 30%, #fce4df 62%, #fdeee2 100%);
  --script: 'Great Vibes', 'Snell Roundhand', 'Apple Chancery', cursive;
  --serif: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --vh: 100vh;
  --u: min(calc(100vw / 390), calc(var(--vh) / 680), 1.5px);
  color-scheme: light;
}
@supports (height: 100svh) { :root { --vh: 100svh; } }

*, *::before, *::after { box-sizing: border-box; }
/* One screen, never scrolls: everything visible is position:fixed, so the
   document itself has nothing to scroll — this also holds on Android Chrome,
   where overflow:hidden alone still lets you drag the page. */
html {
  -webkit-text-size-adjust: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #fbe6e1;
}
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.35;
  color: var(--ink);
  background: #fbe6e1;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
button { font: inherit; color: inherit; }
p { margin: 0; }
[hidden] { display: none !important; }

/* =========================================================
   LIVING BACKGROUND
   ========================================================= */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--sky); }
.sky > * { position: absolute; }

.cloud { opacity: .9; }
.cloud-a { width: calc(var(--u) * 120); top: 1.5%; left: -4%; animation: drift 34s ease-in-out infinite alternate; }
.cloud-b { width: calc(var(--u) * 105); top: 3%; right: -3%; animation: drift 40s ease-in-out -12s infinite alternate-reverse; }
.cloud-c { width: calc(var(--u) * 90); top: 38%; left: -8%; opacity: .55; animation: drift 46s ease-in-out -20s infinite alternate; }
@keyframes drift { from { transform: translateX(-3vw); } to { transform: translateX(4vw); } }

.corner { width: calc(var(--u) * 118); z-index: 1; }
.corner-tl { left: calc(var(--u) * -26); top: calc(var(--u) * -20); }
.corner-br { right: calc(var(--u) * -26); bottom: calc(var(--u) * -22); transform: rotate(180deg); }

.side { display: none; }

/* sparkles + falling petals (filled in by app.js) */
.twinkles, .petals { inset: 0; }
.twinkle, .spark {
  position: absolute;
  width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0 C11 7 13 9 20 10 C13 11 11 13 10 20 C9 13 7 11 0 10 C7 9 9 7 10 0Z' fill='%23e3bd6d'/%3E%3C/svg%3E") center / contain no-repeat;
}
.twinkle { opacity: 0; animation: twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(45deg); }
}
.petal {
  position: absolute; top: -4%;
  width: 11px; height: 14px;
  border-radius: 80% 0 80% 0;
  background: linear-gradient(135deg, #fbd3dc 0%, #f2a9bb 100%);
  opacity: .85;
  animation: fall linear infinite;
}
@keyframes fall {
  0%   { transform: translate(0, -5vh) rotate(0deg); }
  25%  { transform: translate(4vw, 25vh) rotate(90deg); }
  50%  { transform: translate(-2vw, 55vh) rotate(180deg); }
  75%  { transform: translate(5vw, 82vh) rotate(270deg); }
  100% { transform: translate(1vw, 110vh) rotate(360deg); }
}

/* butterflies flying around the invitation */
.fliers { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.flier { position: absolute; width: calc(var(--u) * 30); }
.wings { transform-origin: 50% 50%; animation: flap .3s ease-in-out infinite alternate; }
@keyframes flap { from { transform: scaleX(1); } to { transform: scaleX(.36); } }
.flier-1 { left: 8%;  top: 30%; animation: fly-1 26s ease-in-out infinite; }
.flier-2 { right: 6%; top: 62%; animation: fly-2 31s ease-in-out -9s infinite; }
.flier-3 { left: 70%; top: 14%; width: calc(var(--u) * 24); animation: fly-3 23s ease-in-out -4s infinite; }
@keyframes fly-1 {
  0%   { transform: translate(0, 0) rotate(-10deg); }
  20%  { transform: translate(18vw, -12vh) rotate(12deg); }
  40%  { transform: translate(34vw, 6vh) rotate(-6deg); }
  60%  { transform: translate(14vw, 26vh) rotate(10deg); }
  80%  { transform: translate(-2vw, 12vh) rotate(-8deg); }
  100% { transform: translate(0, 0) rotate(-10deg); }
}
@keyframes fly-2 {
  0%   { transform: translate(0, 0) rotate(8deg) scaleX(-1); }
  25%  { transform: translate(-22vw, -14vh) rotate(-10deg) scaleX(-1); }
  50%  { transform: translate(-40vw, 4vh) rotate(6deg) scaleX(-1); }
  75%  { transform: translate(-16vw, 16vh) rotate(-6deg) scaleX(-1); }
  100% { transform: translate(0, 0) rotate(8deg) scaleX(-1); }
}
@keyframes fly-3 {
  0%   { transform: translate(0, 0) rotate(6deg) scaleX(-1); }
  30%  { transform: translate(-28vw, 10vh) rotate(-10deg) scaleX(-1); }
  60%  { transform: translate(-12vw, 30vh) rotate(8deg) scaleX(-1); }
  100% { transform: translate(0, 0) rotate(6deg) scaleX(-1); }
}

/* =========================================================
   THE INVITATION — one screen
   ========================================================= */
.invite {
  position: fixed; z-index: 3;
  top: 0; bottom: 0; left: 0; right: 0;   /* always exactly the visible screen */
  width: calc(var(--u) * 390);
  margin: 0 auto;
  padding: calc(var(--u) * 12) calc(var(--u) * 22) calc(var(--u) * 10);
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  text-align: center;
}
/* soft ivory glow behind the words — no hard card edges */
.invite::before {
  content: ''; position: absolute; z-index: -1;
  left: -14%; right: -14%; top: 2%; bottom: 2%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 252, 247, .94) 0%, rgba(255, 251, 246, .82) 52%, rgba(255, 250, 245, 0) 100%);
}

.eyebrow, .small-caps {
  display: block;
  font-weight: 700; font-size: calc(var(--u) * 13.5); letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold);
}
h1 { margin: 0; font-weight: 400; line-height: 1; }
.script { font-family: var(--script); font-weight: 400; }
.title-script {
  display: block;
  font-size: calc(var(--u) * 84);
  line-height: .92;
  color: var(--rose);
  padding: 0 .1em;
}
.caps { display: block; text-transform: uppercase; }
.gold {
  background: linear-gradient(100deg, #8f6a2e 0%, #c49b52 30%, #e6cc92 45%, #ae8641 60%, #8f6a2e 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold);
  animation: shimmer 6s ease-in-out infinite;
}
.title-caps {
  margin-top: calc(var(--u) * 2);
  font-size: calc(var(--u) * 27);
  font-weight: 700; letter-spacing: .14em;
}
@keyframes shimmer { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }

.baby { flex: none; }
.baby img {
  height: calc(var(--u) * 168); width: auto; max-width: none;
  transform-origin: 50% 100%;
  animation: sway 7s ease-in-out infinite;
}
@keyframes sway { 0%, 100% { transform: rotate(-1.4deg) translateY(0); } 50% { transform: rotate(1.4deg) translateY(calc(var(--u) * -4)); } }

.turning .name {
  display: block;
  font-size: calc(var(--u) * 62);
  line-height: .98;
  color: var(--rose);
}
.turning .gold { font-size: calc(var(--u) * 15.5); }

.details .date { font-size: calc(var(--u) * 21); font-weight: 700; letter-spacing: .01em; }
.details .time { font-size: calc(var(--u) * 18); font-weight: 600; color: var(--ink-soft); }
.details .location { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 16); font-weight: 600; }
.details .rsvp-by { margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 15.5); font-style: italic; font-weight: 600; color: var(--ink-soft); }
.map-link { color: var(--rose-deep); font-weight: 700; white-space: nowrap; }

.rsvp-area { width: calc(var(--u) * 318); }
.choice { display: grid; gap: calc(var(--u) * 8); }
.btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  border-radius: 999px; border: 0;
  font-family: var(--serif); font-weight: 700; letter-spacing: .02em;
  white-space: nowrap;           /* labels never wrap */
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, opacity .25s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn:active { transform: scale(.97); }
.btn-yes {
  height: max(42px, calc(var(--u) * 52));
  font-size: calc(var(--u) * 19.5);
  color: #fff;
  background: linear-gradient(135deg, #d27a96 0%, #a9466a 100%);
  box-shadow: 0 8px 22px rgba(169, 70, 106, .28);
  animation: glow 3.4s ease-in-out infinite;
}
@keyframes glow {
  0%, 100% { box-shadow: 0 8px 22px rgba(169, 70, 106, .26); }
  50% { box-shadow: 0 8px 28px rgba(169, 70, 106, .42), 0 0 0 calc(var(--u) * 5) rgba(240, 190, 205, .35); }
}
.btn-no {
  height: max(38px, calc(var(--u) * 42));
  font-size: calc(var(--u) * 17);
  color: var(--ink);
  background: rgba(255, 255, 255, .78);
  border: 1.5px solid #dcc3cb;
}
.status {
  padding: calc(var(--u) * 10) calc(var(--u) * 12) calc(var(--u) * 4);
  border-radius: calc(var(--u) * 20);
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line);
}
.status-text { font-size: calc(var(--u) * 17); font-weight: 700; line-height: 1.3; }
.link-btn {
  padding: calc(var(--u) * 6) calc(var(--u) * 10); min-height: 36px;
  background: none; border: 0;
  color: var(--rose-deep); font-size: calc(var(--u) * 16); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
  white-space: nowrap; cursor: pointer;
}
.contact { font-size: calc(var(--u) * 14.5); color: var(--ink-soft); font-weight: 600; }

.btn:focus-visible, .step:focus-visible, .link-btn:focus-visible, .btn-small:focus-visible,
.segmented button:focus-visible, .sheet-close:focus-visible,
input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(169, 70, 106, .45); outline-offset: 2px; }

/* content floats in after the intro */
.reveal { opacity: 0; transform: translateY(12px); }
.is-revealed .reveal {
  opacity: 1; transform: none;
  transition: opacity .7s ease-out, transform .7s ease-out;
  transition-delay: calc(var(--i, 0) * 110ms);
}
.no-intro .reveal { opacity: 1; transform: none; }
.no-intro .invite, .no-intro .sky { animation: fade-in .6s ease-out; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* =========================================================
   DESKTOP: the cottage and garden live on the sides
   ========================================================= */
@media (min-width: 1000px) and (min-aspect-ratio: 5/4) {
  .sky { --side: calc((100vw - var(--u) * 390) / 2); }
  .side { display: block; bottom: 0; width: var(--side); height: 100%; }
  .side::before {
    content: ''; position: absolute; left: -10%; right: -10%; bottom: -14vh; height: 30vh;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 30%, #dfe8d0 0%, #d3e0c4 45%, rgba(211, 224, 196, 0) 72%);
  }
  .side > * { position: absolute; }
  .side-left { left: 0; }
  .side-right { right: 0; }
  .side-tree { width: min(calc(var(--side) * .5), 40vh); bottom: 5vh; left: calc(var(--side) * .04); }
  .side-cottage { width: min(calc(var(--side) * .5), 36vh); bottom: 4vh; left: calc(var(--side) * .34); }
  .side-mushrooms { width: min(calc(var(--side) * .32), 22vh); bottom: 5vh; right: calc(var(--side) * .5); }
  .side-greenery { width: min(calc(var(--side) * .5), 36vh); bottom: -5vh; right: -2vw; transform: scaleX(-1); }

  .corner { width: min(22vw, 30vh); }
  .corner-tl { left: -2vw; top: -3vh; }
  .corner-br { right: -2vw; top: -3vh; bottom: auto; transform: scaleX(-1); }
  .cloud-a { left: 16%; top: 4%; width: calc(var(--u) * 150); }
  .cloud-b { right: 16%; top: 6%; width: calc(var(--u) * 130); }
  .cloud-c { left: 6%; top: 34%; }
  .flier { width: calc(var(--u) * 34); }
}

/* =========================================================
   COTTAGE pieces (shared by the intro and the desktop side)
   ========================================================= */
.cottage-img { position: relative; z-index: 2; }
.room {
  position: absolute; z-index: 1;
  left: 40.5%; top: 54%; width: 21%; height: 37%;
  border-radius: 50% 50% 6% 6% / 34% 34% 4% 4%;
  background: radial-gradient(ellipse 70% 60% at 50% 58%, #fffef8 0%, #fff5d4 35%, #ffe3a3 72%, #f5c97f 100%);
}
.attic-lit { position: absolute; z-index: 3; left: 46.73%; top: 27.71%; width: 8.18%; opacity: 0; }
.door-wrap {
  position: absolute; z-index: 3;
  left: 41.34%; top: 55.07%; width: 19.48%; height: 35.04%;
}
.door { position: absolute; inset: 0; transform-origin: 97% 50%; }
/* the door leaf fills its frame; the small lit round window keeps its own size */
.door > picture:not(.porthole-lit),
.door > picture:not(.porthole-lit) img { width: 100%; height: 100%; }
.porthole-lit { position: absolute; left: 31.7%; top: 22.6%; width: 37.9%; height: auto; opacity: 0; }
.porthole-lit img { width: 100%; height: auto; }
.door-shade { position: absolute; inset: 0; opacity: 0; display: none; }
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .door-shade {
    display: block;
    background: linear-gradient(90deg, rgba(80, 40, 25, .55) 0%, rgba(80, 40, 25, .25) 100%);
    -webkit-mask: url("assets/door.webp") center / 100% 100% no-repeat;
    mask: url("assets/door.webp") center / 100% 100% no-repeat;
  }
}
.on { opacity: 1; animation: flicker 5s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; } 45% { opacity: .8; } 55% { opacity: .95; } 70% { opacity: .85; } }

/* =========================================================
   INTRO SCENE (only while the intro plays)
   ========================================================= */
.scene { display: none; }
.will-intro .scene {
  --sh: var(--vh);
  --hw: min(calc(var(--sh) * 0.5), 80vw, 430px);                 /* cottage width */
  --lift: max(0px, calc(var(--sh) * 0.42 - var(--hw) * 0.55));   /* centres the scene */
  --ih: calc(var(--sh) - var(--lift));
  display: block;
  position: fixed; inset: 0; z-index: 50;
  overflow: hidden;
  background: var(--sky);
}
.will-intro .invite, .will-intro .fliers { visibility: hidden; }
/* meadow continues below the painted scene; it lives inside .scene-inner so it
   fades in together with everything else (no early colour band) */
.meadow {
  left: 0; right: 0;
  bottom: calc((var(--lift) + 80px) * -1);
  height: calc(var(--lift) + 82px);
  background: linear-gradient(180deg, #cbdabb 0%, #c3d4b1 100%);
}
.scene-inner { position: absolute; z-index: 1; left: 0; right: 0; top: 0; bottom: var(--lift); opacity: 0; }
.scene-inner > * { position: absolute; }

.sun {
  left: 50%; bottom: 8%;
  width: calc(var(--hw) * 2.6); height: calc(var(--hw) * 2.6);
  transform: translate(-50%, 35%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 214, .95) 0%, rgba(255, 236, 214, .55) 35%, rgba(255, 230, 220, 0) 68%);
}
.scene .cloud { animation: drift 30s ease-in-out infinite alternate; }
.cloud-1 { width: calc(var(--hw) * .62); top: 7%;  left: 4%; }
.cloud-2 { width: calc(var(--hw) * .55); top: 4%;  right: 3%; }
.cloud-3 { width: calc(var(--hw) * .42); top: 26%; right: 12%; opacity: .8; }
.cloud-4 { width: calc(var(--hw) * .40); top: 30%; left: 10%; opacity: .75; }

.ground { left: 0; bottom: 0; width: 100%; height: calc(var(--ih) * .26); }
.tree { width: calc(var(--hw) * 1.02); bottom: calc(var(--ih) * .075); left: max(-14vw, calc(50% - var(--hw) * 1.42)); }
.cottage { width: var(--hw); left: 50%; bottom: calc(var(--ih) * .05); transform: translateX(-50%); }
.mushrooms { width: calc(var(--hw) * .4); bottom: calc(var(--ih) * .06); left: calc(50% + var(--hw) * .46); }
.greenery { width: calc(var(--hw) * .78); bottom: calc(var(--hw) * -.2); }
.greenery-l { left: calc(50% - var(--hw) * 1.55); }
.greenery-r { right: calc(50% - var(--hw) * 1.55); transform: scaleX(-1); }
@media (max-width: 600px) { .greenery-l { left: -18vw; } .greenery-r { right: -18vw; } }

.door-glow {
  position: absolute; z-index: 4;
  left: 51%; top: 74%; width: 95%; height: 95%;
  transform: translate(-50%, -50%) scale(.6);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 180, .9) 0%, rgba(255, 224, 165, .35) 30%, rgba(255, 220, 160, 0) 62%);
  mix-blend-mode: screen; pointer-events: none; opacity: 0;
}
.door-rays {
  position: absolute; z-index: 4;
  left: 51%; top: 72%; width: 260%; height: 247%;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255, 243, 210, 0) 0deg 7deg, rgba(255, 243, 210, .65) 9deg 12deg, rgba(255, 243, 210, 0) 14deg 20deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 6%, rgba(0, 0, 0, .45) 28%, transparent 60%);
  mask-image: radial-gradient(circle at 50% 50%, #000 6%, rgba(0, 0, 0, .45) 28%, transparent 60%);
  mix-blend-mode: screen; pointer-events: none; opacity: 0;
}

.flutter { width: calc(var(--hw) * .12); z-index: 6; }
.flutter-1 { left: 18%; top: 50%; animation: fly-1 17s ease-in-out infinite; }
.flutter-2 { right: 16%; top: 42%; animation: fly-2 21s ease-in-out -7s infinite; }

.intro-light { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.intro-light-blob {
  position: absolute; width: 200px; height: 200px; border-radius: 50%;
  margin: -100px 0 0 -100px;
  background: radial-gradient(circle, #fffdf6 0%, #fff8ea 45%, rgba(255, 246, 230, .9) 60%, rgba(255, 246, 230, 0) 72%);
  transform: scale(0);
}
.intro-skip {
  position: fixed; z-index: 70;
  right: 16px; bottom: 18px;
  padding: 10px 18px; min-height: 44px;
  border: 1px solid rgba(169, 70, 106, .25); border-radius: 999px;
  background: rgba(255, 252, 247, .75);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--rose-deep); font-size: 16px; font-weight: 700; letter-spacing: .06em;
  cursor: pointer;
}
.burst { position: absolute; z-index: 7; pointer-events: none; }

/* =========================================================
   RSVP SHEET (bottom sheet on phones, centred card on desktop)
   ========================================================= */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(84, 50, 66, .3);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .3s ease;
}
.sheet-backdrop.open { opacity: 1; }
.sheet {
  position: fixed; z-index: 91;
  left: 0; right: 0; bottom: 0;
  max-height: 92vh; max-height: calc(var(--vh) * .94);
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 20px 20px calc(22px + env(safe-area-inset-bottom));
  background:
    radial-gradient(400px 200px at 50% 0%, #fff3f1 0%, transparent 70%),
    var(--paper);
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -12px 40px rgba(120, 60, 85, .18);
  transform: translateY(105%);
  transition: transform .38s cubic-bezier(.2, .8, .2, 1);
  font-size: 18px;
}
.sheet.open { transform: none; }
@media (min-width: 640px) {
  .sheet {
    left: 50%; right: auto; top: 50%; bottom: auto;
    width: 440px;
    border-radius: 26px;
    padding: 26px 28px 26px;
    transform: translate(-50%, -46%); opacity: 0;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
    box-shadow: 0 24px 60px rgba(120, 60, 85, .22);
  }
  .sheet.open { transform: translate(-50%, -50%); opacity: 1; }
}
.sheet-close {
  position: absolute; top: 10px; right: 12px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: transparent;
  font-size: 30px; line-height: 1; color: var(--ink-soft);
  cursor: pointer;
}
.sheet-title { font-size: 52px; line-height: 1; color: var(--rose); text-align: center; }
.sheet-sub { margin-top: 2px; text-align: center; color: var(--ink-soft); font-weight: 600; font-size: 18px; }

.segmented {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  margin: 16px 0 16px; padding: 4px;
  background: #f6e6ea; border-radius: 999px;
}
.segmented button {
  min-height: 44px; padding: 8px 6px;
  border: 0; border-radius: 999px; background: transparent;
  font-size: 17px; font-weight: 700; color: var(--ink-soft);
  white-space: nowrap; cursor: pointer;
}
.segmented button[aria-pressed="true"] { background: #fff; color: var(--rose-deep); box-shadow: 0 2px 8px rgba(169, 70, 106, .15); }

.field { display: block; margin-bottom: 14px; }
.field-label { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 700; color: var(--ink); }
.field-label small, .stepper-label small { font-weight: 500; color: var(--ink-soft); font-size: 15px; }
input[type="text"], textarea {
  width: 100%;
  padding: 12px 15px;
  font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink);
  background: #fff;
  border: 1.5px solid #e6cfd6; border-radius: 14px;
  -webkit-appearance: none; appearance: none;
}
textarea { resize: none; min-height: 58px; }
input::placeholder, textarea::placeholder { color: #b5a2a9; font-weight: 500; }
.field.invalid input { border-color: var(--rose-deep); }
.field-error { display: block; margin-top: 6px; font-size: 16px; color: var(--rose-deep); font-weight: 600; }

.counts { display: grid; gap: 10px; margin-bottom: 14px; }
.stepper {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 6px 6px 16px;
  background: #fff; border: 1.5px solid #f0dde2; border-radius: 16px;
}
.stepper-label { font-size: 19px; font-weight: 700; white-space: nowrap; }
.stepper-controls { display: flex; align-items: center; gap: 4px; }
.step {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid #e2c3cd; background: #fff8f9;
  font-size: 26px; line-height: 1; font-weight: 600; color: var(--rose-deep);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.step:disabled { opacity: .35; cursor: default; }
.stepper output { min-width: 38px; text-align: center; font-size: 26px; font-weight: 700; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn-send, .btn-close {
  height: 54px; font-size: 20px; color: #fff;
  background: linear-gradient(135deg, #d27a96 0%, #a9466a 100%);
  box-shadow: 0 8px 22px rgba(169, 70, 106, .28);
}
.btn-send[aria-busy="true"] { opacity: .75; pointer-events: none; }
.send-error { margin-top: 12px; color: var(--rose-deep); font-weight: 600; font-size: 16px; text-align: center; }

.sheet-done-view { text-align: center; padding-top: 6px; }
.done-title { font-size: 58px; line-height: 1; color: var(--rose); }
.done-text { margin-top: 8px; font-size: 21px; font-weight: 700; }
.done-summary { margin-top: 4px; color: var(--ink-soft); font-size: 18px; font-weight: 600; }
.done-summary:empty { display: none; }
.calendar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.btn-small {
  display: flex; align-items: center; justify-content: center;
  padding: 10px 8px; min-height: 46px;
  border-radius: 999px; border: 1.5px solid #e2c3cd; background: #fff;
  color: var(--rose-deep); font-family: var(--serif); font-size: 16px; font-weight: 700;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn-close { margin-top: 18px; }

.spark { pointer-events: none; z-index: 95; position: fixed; }

/* =========================================================
   Reduced motion: keep it calm
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .twinkle { opacity: .7; }
  .petal { display: none; }
}
.sheet:focus { outline: none; }