/* Storybook wedding site: ivory paper, sindoor red, antique gold, and Kathmandu temple ornament. */

:root {
  --ivory: #fbf5ea;
  --ivory-deep: #f3e6cf;
  --white: #fffdf8;
  --red: #b8322a;
  --red-deep: #7e1f1c;
  --gold: #c79a3b;
  --gold-light: #e3c27a;
  --marigold: #e9a93a;
  --blush: #f1d3c6;
  --ink: #4b2a22;
  --ink-soft: #7d5a4d;
  --line: rgb(199 154 59 / 0.55);
  --maroon: #6d1714;
  --thread-gold: #d4aa57;

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --deva: 'Tiro Devanagari Hindi', 'Kohinoor Devanagari', 'Noto Serif Devanagari', serif;
  --topbar: 3.5rem;

  color-scheme: light;
}

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

/* Lenis smooth scrolling */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--serif);
  font-variation-settings: 'SOFT' 100;
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

:lang(ne) body, body:lang(ne) { font-family: var(--deva), var(--serif); line-height: 1.7; }
[lang='ne'] { font-family: var(--deva); font-style: normal; }

/* Paper grain over everything, so flat shapes read as printed. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.3;
  mix-blend-mode: multiply;
  background-image: 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .15 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; }
a { color: inherit; }

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--red);
  color: var(--white);
  border-radius: 999px;
}
.skip:focus { top: 1rem; }

/* ---- Top bar and floating RSVP ---------------------------------------------------------- */

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--topbar) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
  pointer-events: none;
}
.topbar a { pointer-events: auto; text-decoration: none; }

.monogram, .lang {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(255 253 248 / 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.monogram {
  padding: 0.15rem 0.8rem;
  font-style: italic;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  color: var(--red-deep);
}
.monogram span { color: var(--gold); }

.lang {
  font-size: 0.9375rem;
  padding: 0.3rem 0.9rem;
  color: var(--red-deep);
}
.lang:lang(en) { font-family: var(--serif); }

.rsvp-fab {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 40;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  text-decoration: none;
  letter-spacing: 0.1em;
  font-size: 0.9375rem;
  box-shadow: inset 0 0 0 2px var(--red), inset 0 0 0 3px var(--gold-light), 0 6px 18px rgb(90 30 20 / 0.3);
  transition: opacity 0.3s, transform 0.3s;
}
.rsvp-fab[data-hidden] { opacity: 0; transform: translateY(1rem); pointer-events: none; }

/* ---- The story ------------------------------------------------------------------------------ */

/* Without JavaScript (or with reduced motion) the scenes simply stack, one screen each. With it,
   story.js adds .layered: every scene sits in the same pinned frame and they dissolve into
   each other, so the whole story reads as one continuous picture. */
.story { position: relative; background: #f4e3cc; }
.scene {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--sky, var(--ivory));
}
.story.layered { height: 100vh; height: 100svh; overflow: hidden; }
.story.layered .scene { position: absolute; inset: 0; }
.story.layered .scene:not(:first-child) { visibility: hidden; }
/* Idle animations only run in the scenes on screen. */
.story.layered .scene:not(.is-active) * { animation-play-state: paused !important; }

/* The stage keeps a fixed aspect ratio and covers the viewport, like a painting cropped to
   the screen. Portrait screens get their own 9:16 stage. */
.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 16 / 10;
  width: max(100vw, 160vh);
  width: max(100vw, 160svh);
  translate: -50% -50%;
}
@media (max-aspect-ratio: 1/1) {
  .stage { aspect-ratio: 9 / 16; width: max(100vw, 56.25vh); width: max(100vw, 56.25svh); }
}

/* Painted layers. Parallax layers get a little bleed on every side so they can move. */
.bg {
  position: absolute;
  inset: 0 0 -14%;
  width: 100%;
  height: 114%;
  object-fit: cover;
  object-position: 50% 100%;
}
.bg[data-depth] { inset: 0 -3% -14%; width: 106%; }
.bg.full { inset: 0; width: 100%; height: 100%; }
/* On portrait screens only the middle of a painting shows; frame the part that matters. */
#valley .town { object-position: 56% 100%; }
#hike .hills { object-position: 45% 100%; }
/* The painted foothills rise high at the sides; sit them lower on the cover so the Himalaya shows. */
#cover .near { top: 12%; }

.sprite {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%);
  max-width: none;
  height: auto;
}
@media (max-aspect-ratio: 1/1) {
  .sprite {
    left: calc(var(--px, var(--x)) * 1%);
    top: calc(var(--py, var(--y)) * 1%);
    width: calc(var(--pw, var(--w)) * 1%);
  }
}
.sprite > img, .sprite .sway > img, .sprite .rotor > img { display: block; width: 100%; height: auto; }
.sway, .rotor { position: relative; }
/* Groups of sprites that move together span the whole stage, so their children's % positions hold. */
.flock, .flight { position: absolute; inset: 0; pointer-events: none; }
/* Invisible points that story.js reads, e.g. where the kite string leaves the boy's hand. */
.mark { position: absolute; width: 1px; height: 1px; pointer-events: none; }


/* Ground people and trees in the painting. */
.kid, .student, .couple, .couple-walk, .tree, .band, .monkey {
  filter: drop-shadow(0 0.6vh 0.5vh rgb(60 30 20 / 0.28));
}

.overlay { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.tree {
  -webkit-mask-image: linear-gradient(to top, transparent 1%, #000 9%);
  mask-image: linear-gradient(to top, transparent 1%, #000 9%);
}

/* A framed storybook caption: ivory card, gold rule, a red-and-gold corner at each side. */
.caption {
  position: absolute;
  z-index: 5;
  inset: calc(var(--topbar) + env(safe-area-inset-top) + 1.5svh) 0 auto;
  width: min(32rem, calc(100% - 2.5rem));
  margin-inline: auto;
  padding: 1rem 1.6rem;
  text-align: center;
  font-style: italic;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.45;
  text-wrap: balance;
  background: rgb(255 253 248 / 0.9);
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 0 12px 30px -20px rgb(75 42 34 / 0.6);
}
.caption::before, .caption::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  background: url('/assets/art/painted/corner.webp') center / contain no-repeat;
}
.caption::before { left: 4px; top: 4px; }
.caption::after { right: 4px; bottom: 4px; rotate: 180deg; }
:lang(ne) .caption { font-style: normal; }

/* The soft mist that drifts across while one scene dissolves into the next. */
.mist { position: absolute; inset: -10% -30%; z-index: 6; pointer-events: none; opacity: 0; }
.mist i {
  position: absolute;
  width: 70%;
  height: 80%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 250 240 / 0.95), rgb(255 248 236 / 0.6) 45%, transparent 75%);
}
.mist i:nth-child(1) { left: 0; top: 10%; }
.mist i:nth-child(2) { left: 30%; top: 25%; width: 80%; }
.mist i:nth-child(3) { left: 55%; top: 0; }
/* The last scene melts into the maroon of the celebrations section below. */
.story-end { position: absolute; inset: 0; z-index: 7; background: var(--maroon); opacity: 0; pointer-events: none; }

/* ---- Ambient motion ------------------------------------------------------------------------- */

/* Wing beats: each bird is a 4-frame flipbook (wings up, level, down, level), stepped through
   by sliding the strip inside a one-frame window. --flap sets the speed, --phase the start. */
.flipbook .frames { overflow: hidden; }
.flipbook .frames img {
  display: block;
  width: 400%;
  max-width: none;
  height: auto;
  animation: wingbeat var(--flap, 0.4s) steps(4) infinite;
  animation-delay: var(--phase, 0s);
}
@keyframes wingbeat { to { transform: translateX(-100%); } }

/* Prayer flags ripple from their fixed ends. */
@keyframes ripple {
  0%, 100% { transform: skewX(0deg) scaleY(1); }
  30% { transform: skewX(-2.5deg) scaleY(0.985); }
  65% { transform: skewX(1.5deg) scaleY(1.01); }
}
.flags .rotor { transform-origin: 1% 7%; }
.flags img { transform-origin: 50% 8%; animation: ripple 3.6s ease-in-out infinite; }

@keyframes twinkle { 0%, 100% { opacity: 0.15; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1); } }
.stars i {
  position: absolute;
  width: 0.5vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff8e6;
  box-shadow: 0 0 1vmin 0.3vmin rgb(255 240 200 / 0.8);
  animation: twinkle 3s ease-in-out infinite;
}
@keyframes glimmer { 0%, 100% { opacity: 0.35; } 40% { opacity: 1; } 55% { opacity: 0.7; } }
.fireflies i {
  position: absolute;
  width: 0.9vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff3b0;
  box-shadow: 0 0 1.8vmin 0.7vmin rgb(255 222 120 / 0.75);
  animation: glimmer 2.2s ease-in-out infinite;
}
@keyframes flicker {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  25% { opacity: 0.95; transform: scale(1.06, 0.97); }
  50% { opacity: 0.7; transform: scale(0.97, 1.04); }
  75% { opacity: 0.9; transform: scale(1.03); }
}
.fire-glow {
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 190 90 / 0.65), rgb(255 150 60 / 0.25) 55%, transparent);
  mix-blend-mode: screen;
  animation: flicker 1.6s ease-in-out infinite;
  pointer-events: none;
}
.fall { position: absolute; inset: 0; pointer-events: none; perspective: 700px; }
.fall img { position: absolute; top: 0; left: 0; will-change: transform; }

/* Scene skies */
#cover   { --sky: linear-gradient(#f4cdb2 0%, #f8e2cc 40%, #fbf1e4 75%); }
#valley  { --sky: linear-gradient(#e6ddd2 0%, #fbf3e6 70%); }
#depart  { --sky: linear-gradient(#e7ddd0 0%, #fbf3e6 80%); }
#journey { --sky: radial-gradient(ellipse at 50% 55%, #fbf3e6, #efdcc2); }
#campus  { --sky: linear-gradient(#f3d4b8 0%, #fbf0e1 70%); }
#hike    { --sky: linear-gradient(#e59a6f 0%, #f1b98a 30%, #f8dcb8 60%, #fbeedd 85%); }
#home    { --sky: linear-gradient(#f0b98e 0%, #f7d9b6 45%, #fbefdf 80%); }
#wedding { --sky: linear-gradient(#f5d8b0 0%, #fbeedb 60%); }

/* Kathmandu is richly painted; soften it a touch so the two children stand out. */
#valley .town { filter: saturate(0.94); }
#valley .haze {
  opacity: 1;
  background: radial-gradient(ellipse 75% 60% at 50% 88%, transparent 45%, rgb(251 243 230 / 0.22));
}
#hike .dusk { background: linear-gradient(rgb(70 30 60 / 0.5), rgb(120 60 60 / 0.3) 60%, rgb(40 20 40 / 0.25)); }
#hike .glow { background: radial-gradient(circle at 55% 42%, rgb(255 222 150 / 0.5), transparent 32%); }
#hike .nightsky { opacity: 0; }
.kite-string { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.kite-string path { fill: none; stroke: rgb(255 250 240 / 0.85); stroke-width: 1.3; }

/* ---- Cover title --------------------------------------------------------------------------- */

.cover-title {
  position: absolute;
  z-index: 5;
  inset: calc(var(--topbar) + env(safe-area-inset-top) + 1svh) 0 auto;
  width: min(44rem, calc(100% - 1.5rem));
  margin-inline: auto;
  text-align: center;
}
/* A soft ivory glow behind the words keeps them legible over the painted peaks. */
.cover-title::after {
  content: '';
  position: absolute;
  inset: 18% -10% -10%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(251 245 234 / 0.85), rgb(251 245 234 / 0.5) 60%, transparent);
  pointer-events: none;
}
/* The mangalam verse, set above the arch. */
.shloka {
  margin: 0 auto 0.4rem;
  font-family: var(--deva);
  font-size: clamp(0.95rem, 0.8rem + 0.55vw, 1.2rem);
  line-height: 1.6;
  color: var(--red-deep);
  text-wrap: balance;
}
/* The torana (carved temple arch) frames the names. */
.arch {
  position: relative;
  width: min(100%, 38rem, (100svh - 21rem) * 1.70);
  aspect-ratio: 1400 / 823;
  margin-inline: auto;
  display: grid;
  place-items: center;
  padding-top: 15%;
  background: url('/assets/art/painted/torana.webp') center / contain no-repeat;
}
.cover-title h1 {
  margin: 0;
  font-weight: 350;
  font-style: italic;
  font-size: clamp(2.3rem, 1rem + 4.2vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--red-deep);
}
.cover-title h1 > span { display: block; }
.cover-title h1 .amp { font-size: 0.55em; line-height: 1.15; color: var(--gold); font-weight: 300; }
:lang(ne) .cover-title h1 { font-style: normal; font-weight: 400; line-height: 1.2; }
.eyebrow {
  position: relative;
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red-deep);
  font-weight: 600;
  text-shadow: 0 0 0.6rem rgb(251 245 234 / 0.95), 0 0 0.2rem rgb(251 245 234 / 0.9);
}
:lang(ne) .eyebrow { letter-spacing: 0.04em; font-size: 1rem; text-transform: none; }
.cover-title .date { position: relative; margin: 0.5rem 0 0; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); text-wrap: balance; }
.cover-title .date-bs { position: relative; margin: 0.1rem 0 0; font-size: 0.95rem; color: var(--ink-soft); }
@media (max-width: 560px) {
  .cover-title .date .sep { display: none; }
  .cover-title .date .when { display: block; }
}
@keyframes nudge { 50% { transform: translateY(0.6rem); opacity: 0.4; } }
.scroll-hint {
  position: relative;
  margin: 1.5svh 0 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.scroll-hint::after {
  content: '';
  display: block;
  width: 1px;
  height: 2rem;
  margin: 0.5rem auto 0;
  background: linear-gradient(var(--gold), transparent);
  animation: nudge 2s ease-in-out infinite;
}

/* ---- Map ----------------------------------------------------------------------------------- */

/* Centred by the grid, not by translate: GSAP owns the card's transform. */
.map-wrap {
  position: absolute;
  inset: calc(var(--topbar) + 7rem) 0 1rem;
  display: grid;
  place-items: center;
}
.map-card {
  position: relative;
  width: min(92vw, (100svh - var(--topbar) - 8rem) * 1.6, 1100px);
  aspect-ratio: 1536 / 961;
  box-shadow: 0 18px 40px -22px rgb(75 42 34 / 0.55);
}
.map-card > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-card text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 44px;
  fill: var(--red-deep);
  stroke: rgb(251 245 234 / 0.92);
  stroke-width: 12px;
  stroke-linejoin: round;
  paint-order: stroke;
}
:lang(ne) .map-card text { font-family: var(--deva); font-style: normal; }
.route .line { fill: none; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 0.1 18; }
.route-y .line { stroke: var(--ink); }
.route-p .line { stroke: var(--red); }
.reveal { fill: none; stroke: #fff; stroke-width: 26; stroke-dasharray: 1; stroke-dashoffset: 0; }
.map-plane { opacity: 0; }
.static .map-plane { display: none; }

/* ---- Content pages (details, RSVP) --------------------------------------------------------- */

.page {
  position: relative;
  padding: clamp(4rem, 10vw, 7rem) 1.25rem;
}
/* A faint carved-window lattice behind the content pages. */
.page::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/art/painted/lattice.webp') center / 120px;
  opacity: 0.1;
  pointer-events: none;
}
.page-inner { position: relative; width: min(56rem, 100%); margin-inline: auto; }

/* Maroon sections carry an embroidered motif pattern (elephants, the Bhaktapur peacock window,
   Newari windows, pagodas, marigolds), toned down by an overlay so text and cards stay readable. */
.details, footer {
  background: var(--maroon) url('/assets/art/painted/motif-pattern.webp') center top / 480px;
}
/* Plain maroon where the story hands over, easing into the pattern, and a soft fade into
   the ivory RSVP section at the bottom. */
.details::before {
  background: linear-gradient(var(--maroon), rgb(109 23 20 / 0.45) 22vh, rgb(109 23 20 / 0.45) calc(100% - 20vh), rgb(109 23 20 / 0.3));
  opacity: 1;
}
.details::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 18vh;
  background: linear-gradient(transparent, var(--ivory));
  pointer-events: none;
}
.details .page-inner { padding-bottom: 8vh; }
@media (max-width: 600px) { .details, footer { background-size: 340px; } }

/* The heading sits in an arched panel, like a carved window. */
.section-head {
  position: relative;
  width: min(34rem, 100%);
  margin-inline: auto;
  padding: 2.75rem 1.5rem 2.25rem;
  text-align: center;
  background: var(--maroon);
  border: 1px solid rgb(212 170 87 / 0.75);
  border-radius: 50% 50% 6px 6px / 9rem 9rem 6px 6px;
  box-shadow: inset 0 0 0 7px var(--maroon), inset 0 0 0 8px rgb(212 170 87 / 0.4), 0 20px 50px -25px rgb(0 0 0 / 0.6);
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.invitation {
  margin: 0 auto;
  max-width: 26rem;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  line-height: 1.65;
  color: #f3e3c6;
  text-wrap: balance;
}
.invitation .family { color: var(--gold-light); font-weight: 500; letter-spacing: 0.02em; }
.invitation .couple-names {
  display: block;
  margin: 0.35em 0;
  font-style: italic;
  font-size: 1.6em;
  line-height: 1.2;
  color: var(--ivory);
}
:lang(ne) .invitation .couple-names { font-style: normal; }
.details .ganesha { background: var(--gold-light); }
.details .invocation { color: var(--gold-light); }
.details .lede { margin-bottom: 0; color: #f0dcc2; }

/* Brass bells with jasmine, swinging gently from the top corners. */
@keyframes swing { 50% { rotate: 2.5deg; } }
.bells {
  position: absolute;
  top: 0;
  z-index: 1;
  width: clamp(4.25rem, 11vw, 8rem);
  aspect-ratio: 260 / 420;
  background: url('/assets/art/painted/bells.webp') center top / contain no-repeat;
  transform-origin: 50% 0;
  animation: swing 4.5s ease-in-out infinite;
  pointer-events: none;
}
.bells-left { left: max(0.25rem, 3vw); }
.bells-right { right: max(0.25rem, 3vw); scale: -1 1; animation-delay: -2.2s; }

.ganesha {
  width: 3.25rem;
  aspect-ratio: 56 / 75.6;
  margin: 0 auto 0.5rem;
  background: var(--red);
  -webkit-mask: url('/assets/brand/ganesha.svg') center / contain no-repeat;
  mask: url('/assets/brand/ganesha.svg') center / contain no-repeat;
}
.invocation { margin: 0 0 1.75rem; text-align: center; color: var(--red); font-size: 1.05rem; }

.page h2 {
  margin: 0 0 0.25rem;
  text-align: center;
  font-weight: 350;
  font-style: italic;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  line-height: 1.1;
  color: var(--red-deep);
}
:lang(ne) .page h2 { font-style: normal; font-weight: 400; line-height: 1.35; }
.lede { margin: 0 auto 2.75rem; max-width: 34rem; text-align: center; color: var(--ink-soft); }

.divider {
  width: 13rem;
  aspect-ratio: 480 / 65;
  margin: 0.5rem auto 1.25rem;
  background: url('/assets/art/painted/lotus-divider.webp') center / contain no-repeat;
}

.events {
  display: grid;
  /* Room above each card for its roof (about a third of the card's width). */
  gap: 9rem 1.5rem;
  margin-top: 10.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
/* Each card is a little shrine: a pagoda roof on an ivory, gold-framed body. */
.event {
  position: relative;
  padding: 2.25rem 1.75rem 1.75rem;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px -30px rgb(75 42 34 / 0.6);
}
.event::before {
  content: '';
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: calc(100% - 6px);
  aspect-ratio: 1000 / 314;
  background: url('/assets/art/painted/pagoda-roof.webp') center bottom / contain no-repeat;
}
.event::after {
  content: '';
  position: absolute;
  inset: 0.45rem;
  border: 1px solid rgb(184 50 42 / 0.25);
  pointer-events: none;
}
.event h3 {
  margin: 0 0 0.9rem;
  font-weight: 400;
  font-size: 1.75rem;
  color: var(--red);
}
.event .when { margin: 0; font-size: 1.125rem; }
.event .bs { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.event .time { margin: 0.5rem 0 1rem; color: var(--gold); font-weight: 500; letter-spacing: 0.02em; }
.event .where { margin: 0 0 1.25rem; }
.event .where strong { display: block; font-weight: 500; font-size: 1.125rem; }
.event a {
  display: inline-block;
  font-size: 0.9375rem;
  color: var(--red-deep);
  text-underline-offset: 3px;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1.5px;
}

/* ---- RSVP form ----------------------------------------------------------------------------- */

.rsvp { background: linear-gradient(var(--ivory), var(--ivory-deep)); }

.rsvp-form, .thanks {
  position: relative;
  width: min(32rem, 100%);
  margin-inline: auto;
  padding: clamp(1.75rem, 6vw, 2.75rem);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -36px rgb(75 42 34 / 0.7);
}
.rsvp-form::before, .rsvp-form::after, .thanks::before, .thanks::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  background: url('/assets/art/painted/corner.webp') center / contain no-repeat;
}
.rsvp-form::before, .thanks::before { left: 6px; top: 6px; }
.rsvp-form::after, .thanks::after { right: 6px; bottom: 6px; rotate: 180deg; }
.rsvp-form[hidden], .thanks[hidden] { display: none; }

.field { margin: 0 0 1.75rem; }
.field > label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--red-deep);
}
.hint { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--ink-soft); }

.rsvp-form input[type='text'] {
  width: 100%;
  padding: 0.7rem 0.1rem;
  font: inherit;
  font-size: 1.125rem;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--line);
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s;
}
.rsvp-form input[type='text']:focus { border-bottom-color: var(--red); }

fieldset.field { border: 0; padding: 0; min-width: 0; }
fieldset.field > legend { margin-bottom: 0.6rem; padding: 0; font-weight: 500; color: var(--red-deep); }
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice span {
  display: block;
  padding: 0.55rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 0.975rem;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.choice input:checked + span { background: var(--red); border-color: var(--red); color: var(--white); }
.choice input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

.stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: 999px;
}
.stepper button {
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.375rem;
  color: var(--red);
  cursor: pointer;
  border-radius: 999px;
}
.stepper button:disabled { opacity: 0.3; cursor: default; }
.stepper input {
  width: 3rem;
  text-align: center;
  font: inherit;
  font-size: 1.25rem;
  border: 0;
  background: none;
  color: inherit;
  -moz-appearance: textfield;
  appearance: textfield;
}
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

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

.submit {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.95rem 1rem;
  font: inherit;
  font-size: 1.125rem;
  letter-spacing: 0.05em;
  color: var(--white);
  background: var(--red);
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 3px var(--red), inset 0 0 0 4px var(--gold-light);
  cursor: pointer;
  transition: filter 0.2s;
}
.submit:hover { filter: brightness(1.07); }
.submit:disabled { opacity: 0.6; cursor: progress; }

.status { min-height: 1.5rem; margin: 1rem 0 0; text-align: center; color: var(--red); }

.thanks { text-align: center; }
.thanks img { width: min(15rem, 70%); margin: 0 auto 1rem; }
.thanks p { font-size: 1.375rem; font-style: italic; margin: 0 0 1rem; color: var(--red-deep); }
:lang(ne) .thanks p { font-style: normal; }
.thanks button {
  font: inherit;
  color: var(--ink-soft);
  background: none;
  border: 0;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
  cursor: pointer;
}

footer {
  position: relative;
  padding: clamp(6.5rem, 15vw, 10rem) 1.25rem calc(5rem + env(safe-area-inset-bottom));
  text-align: center;
  color: var(--ivory);
}
/* A marigold toran strung across the top of the footer. */
footer::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: clamp(4.5rem, 12vw, 8rem);
  background: url('/assets/art/painted/garland.webp') center top / auto 100% repeat-x;
}
.signoff {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0.8rem 1.75rem;
  font-style: italic;
  font-size: 1.125rem;
  background: var(--maroon);
  border: 1px solid rgb(212 170 87 / 0.7);
}
:lang(ne) .signoff { font-style: normal; }

/* Without GSAP, or with reduced motion: no pinning, no scrubbing, everything visible. */
.static .scroll-hint::after, .static .bells { animation: none; }

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