:root {
  --ivory: #F5EEDF;
  --ivory-2: #FBF7EE;
  --ink: #3E2418;
  --ink-soft: #5E461B;
  --gold: #A88637;
  --gold-light: #CDAC5C;
  --gold-deep: #6E5220;
  --kumkum: #8E2B23;
  --maroon: #3B0F14;
  --maroon-2: #561A20;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --tamil: 'Noto Serif Tamil', 'Tamil Sangam MN', 'Latha', serif;
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.33 0 0 0 0 0.2 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  font-family: var(--serif);
  color: var(--ink);
  /* kolam dots-and-loops pattern over the maroon backdrop */
  background:
    url("assets/kolam.svg") 50% 0 / 64px repeat,
    radial-gradient(ellipse 140% 900px at 50% 0%, var(--maroon-2), var(--maroon) 70%) no-repeat,
    var(--maroon);
  padding: 58px 12px 0;
}
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
#title:focus { outline: none; } /* focused by script after opening, not by the guest */

/* ---------- Golu backdrop: thoranam garland on top, the steps at the end ---------- */
.page-thoranam, .thoranam {
  position: absolute; top: 0; left: 0; right: 0; height: 48px; pointer-events: none;
  background: url("assets/thoranam.svg") 50% 0 / 120px 48px repeat-x;
}
.golu-scene { display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.golu-scene img { display: block; width: min(560px, 100%); min-width: 0; height: auto; flex: 0 1 auto; }
.diya { flex: none; width: 34px; height: 37px; overflow: visible; }
.diya-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 1.6s ease-in-out infinite; }
.diya-glow { transform-box: fill-box; transform-origin: 50% 60%; animation: glow 2.4s ease-in-out infinite; }
.golu-scene .diya:last-child .diya-flame { animation-delay: -.7s; }
.golu-scene .diya:last-child .diya-glow { animation-delay: -1.1s; }
@keyframes flicker { 30% { transform: scale(.92, 1.08) rotate(-2deg); } 60% { transform: scale(1.04, .95) rotate(2deg); } }
@keyframes glow { 50% { opacity: .55; transform: scale(.9); } }
.page-golu { position: relative; z-index: 1; max-width: 640px; margin: 34px auto 0; padding: 0 4px; }
.page-motes { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* Diyas drifting slowly up each side of the card. On wide screens they float in
   the margins; on phones they ride the card's outer edge, small and staggered. */
.float-diyas { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.fd-col { position: absolute; top: 0; bottom: 0; width: max(30px, calc(50% - 320px)); }
.fd-left { left: 0; }
.fd-right { right: 0; }
.fd-col .diya {
  position: absolute; bottom: -60px; left: 50%; width: 30px; height: 33px;
  opacity: 0; animation: diyaRise 22s linear infinite;
}
.fd-col .diya:nth-child(1) { left: 45%; animation-delay: 0s; }
.fd-col .diya:nth-child(2) { left: 62%; width: 22px; height: 24px; animation-delay: 7.5s; animation-duration: 25s; }
.fd-col .diya:nth-child(3) { left: 38%; width: 26px; height: 29px; animation-delay: 15s; animation-duration: 20s; }
.fd-right .diya { animation-name: diyaRiseR; }
.fd-right .diya:nth-child(1) { animation-delay: 4s; }
.fd-right .diya:nth-child(2) { animation-delay: 11.5s; }
.fd-right .diya:nth-child(3) { animation-delay: 18.5s; }
@keyframes diyaRise {
  0% { opacity: 0; transform: translate(-50%, 0); }
  8% { opacity: .95; }
  50% { transform: translate(calc(-50% + 10px), -60vh); }
  88% { opacity: .8; }
  100% { opacity: 0; transform: translate(-50%, -120vh); }
}
@keyframes diyaRiseR {
  0% { opacity: 0; transform: translate(-50%, 0); }
  8% { opacity: .95; }
  50% { transform: translate(calc(-50% - 10px), -60vh); }
  88% { opacity: .8; }
  100% { opacity: 0; transform: translate(-50%, -120vh); }
}

/* A few fainter, warmer sparks drift over the card itself. */
.page-motes-front { z-index: 2; opacity: .5; }
.page-motes-front i { width: 3px; height: 3px; background: #D9A93C; box-shadow: 0 0 6px 2px rgba(217,169,60,.45); }
.page-motes-front i:nth-child(1) { left: 20%; animation-delay: 1.2s; animation-duration: 13s; }
.page-motes-front i:nth-child(2) { left: 44%; animation-delay: 5.6s; animation-duration: 12s; }
.page-motes-front i:nth-child(3) { left: 70%; animation-delay: 9s; animation-duration: 14s; }
.page-motes-front i:nth-child(4) { left: 84%; animation-delay: 3.3s; animation-duration: 12s; }
.page-motes-front i:nth-child(5) { left: 32%; animation-delay: 11.4s; animation-duration: 13s; }

/* ---------- Intro / envelope ---------- */
.intro {
  position: fixed; inset: 0; z-index: 10;
  display: grid; grid-template-rows: 48px 1fr auto; justify-items: center;
  overflow: hidden;
  background:
    url("assets/kolam.svg") 50% 0 / 64px repeat,
    radial-gradient(ellipse at 50% 40%, var(--maroon-2), var(--maroon) 75%);
  transition: opacity .7s ease, visibility .7s;
}
.intro.opened { opacity: 0; visibility: hidden; }
.intro .thoranam { animation: drop 1s cubic-bezier(.2,.7,.2,1) backwards; }
.intro-inner { grid-row: 2; align-self: center; text-align: center; padding: 16px 24px; position: relative; z-index: 1; }
.intro-kicker {
  margin: 0 0 6px; color: #E9D9B4; font-style: italic; font-size: clamp(19px, 5vw, 23px);
  animation: fadeUp .9s .1s cubic-bezier(.2,.7,.2,1) backwards;
}
.intro-title {
  margin: 0; font-weight: 500; color: var(--gold-light);
  font-size: clamp(46px, 13vw, 72px); line-height: .98; letter-spacing: .005em;
  animation: fadeUp 1s .25s cubic-bezier(.2,.7,.2,1) backwards;
}
.intro-year { margin: 12px 0 26px; }
.intro-year span:not(.rule) { color: #EBD49A; font-size: clamp(22px, 5.6vw, 28px); animation: fadeUp .9s .55s ease backwards; }
.intro-year .rule { background: var(--gold-light); animation: grow .9s .6s cubic-bezier(.2,.7,.2,1) backwards; }
.intro-year .rule:first-child { transform-origin: right; }
.intro-year .rule:last-child { transform-origin: left; }
.seal {
  width: 132px; height: 132px; border-radius: 50%;
  border: none; cursor: pointer; padding: 0;
  background:
    radial-gradient(circle at 35% 30%, #F0D78C, #C9A754 38%, #9A7630 72%, #7A5C22);
  box-shadow: 0 0 0 6px rgba(205,172,92,.18), 0 14px 40px rgba(0,0,0,.45), inset 0 -6px 14px rgba(0,0,0,.25);
  display: grid; place-items: center; margin: 0 auto;
  animation: pop .9s .75s cubic-bezier(.3,1.4,.5,1) backwards, breathe 2.8s 2.6s ease-in-out infinite;
  transition: transform .5s ease;
}
.seal:hover { transform: scale(1.04); }
.seal-vel { width: 40px; height: 106px; overflow: visible; transform: translateY(2px); }
.seal-vel .draw { stroke-dasharray: 1; stroke-dashoffset: 0; animation: draw 1.5s 1.1s ease-in-out backwards; }
.seal-om, .seal-dot { animation: fadeIn .8s 2.2s ease backwards; }
/* Envelope: back, letter, front pocket, flap, then the seal on the flap's tip.
   Tapping the seal lifts it off, the flap swings open and the letter slides out. */
.envelope {
  position: relative; width: min(330px, 84vw); aspect-ratio: 1.38; margin: 0 auto;
  perspective: 900px; animation: fadeUp .9s .45s cubic-bezier(.2,.7,.2,1) backwards;
}
.env-back, .env-pocket, .env-letter, .env-flap { position: absolute; border-radius: 3px; }
.env-back { inset: 0; z-index: 1; background: #E3D4B3; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
/* The letter holds a shrunken copy of the real card (built when the seal is
   tapped), so it already shows the invitation, softly blurred. */
.env-letter {
  z-index: 2; left: 7%; right: 7%; top: 5%; height: 88%;
  background: var(--paper), var(--ivory); overflow: hidden;
}
.env-pocket {
  inset: 0; z-index: 3;
  background: var(--paper), var(--ivory);
  clip-path: polygon(0 0, 50% 48%, 100% 0, 100% 100%, 0 100%);
}
.env-pocket::after {
  content: ''; position: absolute; inset: 7px; border: 1px solid rgba(168,134,55,.55); border-radius: 2px;
}
.env-flap {
  z-index: 4; left: 0; right: 0; top: 0; height: 48%;
  background: var(--paper), #EFE4CC;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.12));
}
.env-edge { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.env-edge polyline { fill: none; stroke: var(--gold); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.env-to {
  position: absolute; left: 10%; right: 10%; bottom: 9%; margin: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.env-for { font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-deep); }
.env-name {
  font-style: italic; font-weight: 600; color: var(--kumkum); line-height: 1.1;
  font-size: clamp(22px, 6.4vw, 27px); text-wrap: balance;
}
.env-name.long { font-size: clamp(17px, 4.8vw, 21px); }
.env-flourish { position: absolute; left: 50%; bottom: 15%; width: 46%; transform: translateX(-50%); overflow: visible; }
.env-flourish path { fill: none; stroke: var(--gold); stroke-width: 1; }
.env-seal { position: absolute; z-index: 5; left: 50%; top: 48%; transform: translate(-50%, -50%); }
.envelope .seal { width: 104px; height: 104px; }
.envelope .seal-vel { width: 34px; height: 90px; }

.envelope.opening .env-seal { animation: sealOff .45s ease-in forwards; }
.envelope.opening .env-flap { animation: flapOpen .6s .3s ease-in-out forwards; }
.envelope.opening .env-letter { animation: letterOut .6s .7s cubic-bezier(.2,.7,.2,1) forwards; }
.intro.opening .intro-cta, .intro.opening .intro-kicker, .intro.opening .intro-title, .intro.opening .intro-year { opacity: 0; transition: opacity .45s .2s; }

/* The letter becomes the invitation. The shrunken copy of the card moves out
   of the envelope into a fixed layer and scales up to the card's exact spot
   while its words come into focus; at the end the real card, identical, takes
   its place. Meanwhile the landing screen fades into the page behind it (same
   garland and kolam, so only the envelope and Golu steps visibly go). */
.intro.unfolding { opacity: 0; transition: opacity .8s ease; }
.unfold-paper {
  position: fixed; z-index: 11; margin: 0; overflow: hidden; pointer-events: none;
  transform-origin: 0 0; border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .9s cubic-bezier(.65,0,.25,1), height .9s cubic-bezier(.65,0,.25,1), box-shadow .9s;
}
.unfold-paper.grow { box-shadow: 0 30px 80px rgba(0,0,0,.45); }
/* Words start soft and faded and sharpen as the paper arrives; the gold
   frame stays crisp throughout. */
.env-letter > .card > :not(.frame), .unfold-paper > .card > :not(.frame) {
  filter: blur(2px); opacity: .5;
  transition: filter .6s .3s ease, opacity .6s .3s ease;
}
.unfold-paper.grow > .card > :not(.frame) { filter: blur(0); opacity: 1; }
/* The real card is laid out (to measure it) but hidden until the copy lands. */
.card.measuring { visibility: hidden; }
@keyframes sealOff { to { opacity: 0; transform: translate(-50%, -50%) scale(1.3); } }
@keyframes flapOpen {
  0% { transform: rotateX(0); z-index: 4; }
  50% { z-index: 4; }
  51% { z-index: 0; }
  100% { transform: rotateX(180deg); z-index: 0; }
}
@keyframes letterOut { to { transform: translateY(-56%); } }

.intro-cta { margin: 26px 0 0; color: #E9D9B4; font-style: italic; font-size: 20px; animation: fadeUp .8s 2.3s ease backwards; }
.intro-golu { grid-row: 3; width: 100%; max-width: 620px; padding: 0 10px calc(14px + env(safe-area-inset-bottom)); animation: riseIn 1.2s .35s cubic-bezier(.2,.7,.2,1) backwards; }
.motes i {
  position: absolute; bottom: 12%; width: 4px; height: 4px; border-radius: 50%;
  background: #F2D58A; box-shadow: 0 0 8px 2px rgba(242,213,138,.6);
  opacity: 0; animation: float 9s linear infinite;
}
.motes i:nth-child(1) { left: 12%; animation-delay: 0s; }
.motes i:nth-child(2) { left: 26%; animation-delay: 3.4s; animation-duration: 11s; }
.motes i:nth-child(3) { left: 38%; animation-delay: 6.1s; }
.motes i:nth-child(4) { left: 52%; animation-delay: 1.8s; animation-duration: 10s; }
.motes i:nth-child(5) { left: 64%; animation-delay: 4.7s; }
.motes i:nth-child(6) { left: 76%; animation-delay: 7.5s; animation-duration: 12s; }
.motes i:nth-child(7) { left: 88%; animation-delay: 2.6s; }
.motes i:nth-child(8) { left: 46%; animation-delay: 8.3s; animation-duration: 10s; }
@keyframes drop { from { transform: translateY(-110%); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes pop { from { opacity: 0; transform: scale(.55) rotate(-25deg); } }
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(60px); } }
@keyframes float {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: .9; }
  50% { transform: translate(12px, -32vh); }
  85% { opacity: .6; }
  100% { opacity: 0; transform: translate(-6px, -64vh); }
}
@keyframes breathe { 50% { box-shadow: 0 0 0 14px rgba(205,172,92,.08), 0 14px 40px rgba(0,0,0,.45), inset 0 -6px 14px rgba(0,0,0,.25); } }
@media (max-height: 640px) {
  .intro { grid-template-rows: 48px 1fr; }
  .intro-golu { display: none; }
}

/* ---------- Card ---------- */
.card {
  position: relative; z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  background: var(--paper), var(--ivory);
  border-radius: 6px;
  padding: 40px 28px 36px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.4) inset;
  overflow: hidden;
}
.card.reveal { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(40px) scale(.98); } }
.frame, .frame::before {
  position: absolute; pointer-events: none; border: 1px solid var(--gold);
}
.frame { inset: 10px; }
.frame::before { content: ''; inset: 5px; border-width: 2px; border-color: #B89548; }

/* ---------- Hero ---------- */
.hero { position: relative; text-align: center; padding: 0 clamp(64px, 19%, 120px); }
.peacock { position: absolute; top: 4px; width: clamp(62px, 18%, 112px); height: auto; }
.peacock-left { left: 2px; }
.peacock-right { right: 2px; transform: scaleX(-1); }
.suzhi { display: flex; align-items: center; justify-content: center; gap: 14px; }
.suzhi-mark { font-family: var(--tamil); font-size: 30px; font-weight: 600; color: #9A7630; line-height: 1.2; }
.dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.lotus { display: block; width: 160px; margin: 0 auto; overflow: visible; }
.lotus path { fill: none; stroke: var(--gold); stroke-width: 1; }
.lotus .petal { fill: var(--ivory-2); }
.lotus .thin { stroke-width: .6; }
.tamil { font-family: var(--tamil); color: #7A5C22; font-size: clamp(16px, 4.2vw, 22px); font-weight: 500; margin: 22px 0 0; letter-spacing: .03em; }
h1 {
  margin: 2px 0 0; font-weight: 500; color: var(--gold-deep);
  font-size: clamp(44px, 12vw, 76px); line-height: .98; letter-spacing: .005em;
}
.year { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.year span:not(.rule) { color: #8A6A2B; font-weight: 600; font-size: clamp(20px, 5vw, 26px); letter-spacing: .32em; padding-left: .32em; }
.year .rule { width: clamp(36px, 12vw, 80px); height: 1px; background: #B48F45; }

/* ---------- Message ---------- */
.message { text-align: center; margin-top: 26px; }
.message p { margin: 0; font-style: italic; font-size: clamp(20px, 5.2vw, 26px); line-height: 1.45; }
.message .greeting { font-style: normal; font-weight: 600; font-size: clamp(20px, 5vw, 24px); color: var(--kumkum); margin-bottom: 10px; }

.vel { display: flex; justify-content: center; margin: 22px 0 8px; }
.vel svg { width: 48px; height: 128px; }
/* Same draw as the seal, on a slow loop: draw in, hold, retract along the
   stroke, redraw (~8s). Paused until the vel scrolls into view; reduced motion
   shows it fully drawn and still. */
.vel .draw { stroke-dasharray: 1; stroke-dashoffset: 0; animation: velLoop 8s .3s ease-in-out infinite backwards paused; }
.vel .vel-om, .vel .vel-dot { animation: velGlyph 8s .3s ease-in-out infinite backwards paused; }
@keyframes velLoop {
  0% { stroke-dashoffset: 1; }
  20%, 78% { stroke-dashoffset: 0; }
  96%, 100% { stroke-dashoffset: -1; }
}
@keyframes velGlyph {
  0%, 14% { opacity: 0; }
  26%, 76% { opacity: 1; }
  90%, 100% { opacity: 0; }
}
.vel.play .draw, .vel.play .vel-om, .vel.play .vel-dot { animation-play-state: running; }

/* ---------- Venue ---------- */
.venue { text-align: center; margin-top: 6px; padding: 0 6px; }
.eyebrow { text-wrap: balance; margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }
.address { text-wrap: balance; margin: 8px 0 0; font-weight: 700; font-size: clamp(19px, 4.8vw, 23px); letter-spacing: .02em; }
.maps {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; min-height: 44px; padding: 0 14px;
  color: var(--gold-deep); font-weight: 600; font-size: 17px; text-decoration: none;
  border-bottom: 1px solid rgba(168,134,55,.5);
}
.maps svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.maps:hover { color: var(--kumkum); }

/* ---------- RSVP ---------- */
.rsvp {
  margin: 30px 4px 0; padding: 26px 20px 24px;
  border: 1px solid rgba(168,134,55,.55); border-radius: 4px;
  background: rgba(251,247,238,.65);
}
.section-title {
  margin: 0 0 18px; text-align: center; font-weight: 500;
  font-size: 30px; color: var(--gold-deep); letter-spacing: .02em;
}
form { display: grid; gap: 20px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend, .field label, .stepper-label {
  display: block; padding: 0; margin-bottom: 8px;
  font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}

.pill-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pill { position: relative; }
.pill input, .day input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pill span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 48px; padding: 6px 8px; border-radius: 999px;
  border: 1px solid rgba(168,134,55,.7); background: var(--ivory-2);
  font-size: 17px; font-weight: 600; color: var(--ink); transition: background .2s, color .2s, border-color .2s;
}
.pill input:checked + span { background: var(--gold-deep); border-color: var(--gold-deep); color: #FFF8E8; }
.pill input:focus-visible + span, .day input:focus-visible + .day-face { outline: 2px solid var(--kumkum); outline-offset: 2px; }

.days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.day { position: relative; }
.day-face {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px 6px 10px; border-radius: 4px 4px 4px 4px;
  border: 1px solid rgba(168,134,55,.7); background: var(--ivory-2);
  transition: transform .2s, background .2s, border-color .2s, box-shadow .2s;
}
.day-face .wd { font-size: 14px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.day-face .num { font-size: 40px; line-height: 1; font-weight: 600; color: var(--gold-deep); margin: 4px 0 2px; }
.day-face .mo { font-size: 15px; font-style: italic; color: var(--ink-soft); }
.day-face .tm { margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(168,134,55,.45); font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--gold-deep); white-space: nowrap; }
.day input:checked + .day-face .tm { color: var(--kumkum); }
.day input:checked + .day-face {
  background: #FFF8E6; border-color: var(--kumkum); box-shadow: 0 0 0 1px var(--kumkum), 0 6px 16px rgba(110,82,32,.18);
  transform: translateY(-2px);
}
.day input:checked + .day-face .num { color: var(--kumkum); }

.field input {
  width: 100%; min-height: 48px; padding: 10px 14px;
  font: 500 19px var(--serif); color: var(--ink);
  background: #FFFDF8; border: 1px solid rgba(168,134,55,.7); border-radius: 4px;
}
.field input:focus { outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(168,134,55,.25); }
.field input[aria-invalid="true"] { border-color: var(--kumkum); }
.hint { margin: 6px 0 0; font-size: 15px; font-style: italic; color: #6B5636; }

.counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.counts .error { grid-column: 1 / -1; margin-top: -4px; }
.stepper-ctl {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid rgba(168,134,55,.7); border-radius: 4px; background: #FFFDF8;
}
.stepper-ctl button {
  width: 48px; height: 48px; border: 0; background: transparent; cursor: pointer;
  font: 600 24px var(--serif); color: var(--gold-deep);
}
.stepper-ctl button:disabled { color: #C9BBA0; cursor: default; }
.stepper-ctl output { font-size: 22px; font-weight: 700; min-width: 2ch; text-align: center; }

.error { margin: 6px 0 0; min-height: 0; color: var(--kumkum); font-size: 16px; font-weight: 600; }
.error:empty { display: none; }
.form-error { text-align: center; }

.submit, .ghost {
  min-height: 52px; border-radius: 999px; cursor: pointer;
  font: 700 18px var(--serif); letter-spacing: .14em; text-transform: uppercase;
}
.submit {
  border: 0; color: #FFF8E8;
  background: linear-gradient(180deg, #8A6A2B, var(--gold-deep));
  box-shadow: 0 6px 18px rgba(110,82,32,.3), inset 0 1px 0 rgba(255,255,255,.25);
}
.submit:hover { filter: brightness(1.06); }
.submit:disabled { opacity: .6; cursor: progress; }
.ghost { padding: 0 20px; background: transparent; color: var(--gold-deep); border: 1px solid var(--gold); }
.ghost:hover { background: #FFF8E6; }

.thanks { text-align: center; padding: 6px 4px; }
.thanks:focus { outline: none; }
.thanks-title { margin: 0; font-size: 30px; font-weight: 600; color: var(--kumkum); }
.thanks-body { margin: 10px 0 0; font-size: 21px; line-height: 1.45; }
.thanks-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }

/* ---------- Temple arches ---------- */
.temples { margin-top: 34px; }
.arches {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px;
  border-bottom: 2px solid #B89548; padding-bottom: 6px;
  box-shadow: 0 5px 0 -4px #B89548;
}
.arch { position: relative; padding-top: 14px; }
.arch img { display: block; width: 100%; height: auto; aspect-ratio: 128 / 196; }
.arch svg { position: absolute; left: 0; right: 0; top: 14px; width: 100%; height: auto; overflow: visible; }
.arch svg .outline { fill: none; stroke: #B48F45; stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.arch svg .outer { fill: none; stroke: #B48F45; stroke-width: .8; vector-effect: non-scaling-stroke; }
.arch svg .finial { fill: #B48F45; }
.arch { transition: transform .4s ease; }
.arch:hover { transform: translateY(-3px); }

/* ---------- Sign-off ---------- */
.signoff { text-align: center; margin-top: 26px; }
.with-love { margin: 0; font-style: italic; font-size: 22px; color: var(--ink-soft); }
.hosts { margin: 2px 0 0; font-size: clamp(30px, 8vw, 40px); font-weight: 600; }

@media (max-width: 520px) {
  body { padding: 52px 8px 0; }
  .card { padding: 30px 22px 28px; }
  .rsvp { padding: 22px 10px 20px; margin-inline: 0; }
  .arches { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .pill span { font-size: 15px; padding: 6px 4px; white-space: nowrap; }
  .fd-col .diya { width: 22px; height: 24px; }
  .fd-col .diya:nth-child(2) { width: 17px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}