/* მიხეილი & სოფო, 35th anniversary invitation: every style for index.html.
   Mobile-first, min-width queries only (481px tweaks; 769px+ swaps the page
   for .desktop-notice). Motion is gated on html classes set by script.js:
   .is-loading (loader up), .is-locked (intro scroll trap), .is-open (intro
   played, hero choreography runs). */

/* ===== FONTS =====
   font-display: block is only safe because the loader covers the block
   period; each face is also preloaded in index.html. */
@font-face {
  font-family: 'DM Medea';
  src: url('fonts/dm-medea.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'BPG Classic';
  src: url('fonts/bpg-classic.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'BPG Nino';
  src: url('fonts/bpg-nino.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* ===== TOKENS =====
   Sampled from the film and the kept illustrations. --ivory is the exact
   tone final-top.jpg / final-bottom.jpg are feathered into, so they meet the
   page with no seam. Ink is the cool slate of the gate shadows rather than a
   warm brown, which keeps the ivory from reading as generic beige.
   Shape rule: surfaces 28px, every control is a full pill. One accent: the champagne gold of the wax seal. */
:root {
  --vh: 1vh;

  --ivory:      #f3efe6;
  --ivory-deep: #ebe4d7;
  --paper:      #fbf9f4;
  --envelope:   #ece0cf;
  --ink:        #26333a;
  --ink-soft:   #5b676b;
  --gold:       #b39256;
  --gold-soft:  #dcc9a0;
  --gold-text:  #7d6435; /* 5:1 on --ivory, for small gold copy */
  --line:       #e0d6c4;
  --error:      #9a4b3c;

  /* The rounded top lip that makes each section read as a sheet of paper
     laid over the one before it. Used as both radius and negative margin. */
  --lip:        30px;

  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-silk:  cubic-bezier(0.65, 0.05, 0.36, 1);

  --f-script:   'DM Medea', 'BPG Classic', serif;
  --f-serif:    'BPG Classic', 'Cormorant Garamond', serif;
  --f-label:    'BPG Nino', 'Cormorant Garamond', serif;
  --f-latin:    'Cormorant Garamond', 'BPG Classic', serif;
}

/* ===== RESET / BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { overscroll-behavior-y: none; }

html {
  -webkit-text-size-adjust: 100%;
  background-color: var(--ivory);
}

body {
  font-family: var(--f-serif);
  background-color: var(--ivory);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
fieldset { border: 0; min-width: 0; }

/* English swaps every Georgian face for Cormorant. */
body.lang-en { font-family: var(--f-latin); }

/* Cormorant defaults to old-style figures (a 1 that reads as a Roman I,
   digits dipping below the line). Every numeral here should stand level. */
body { font-variant-numeric: lining-nums; }

/* ===== INTRO SCROLL LOCK =====
   Never position:fixed / overflow:hidden on the document: Chrome iOS opened
   from a chat app would freeze its viewport short. script.js traps the
   gesture instead while html.is-locked is set. */
html.is-locked, html.is-locked body { overscroll-behavior: none; touch-action: none; }

/* ===== SCROLLBAR =====
   Thumb starts transparent and fades to gold once the intro has played. */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background-color: var(--ivory); }
::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 3px;
  transition: background-color 0.6s ease;
}
html.is-open ::-webkit-scrollbar-thumb { background-color: var(--gold-soft); }
html { scrollbar-width: thin; scrollbar-color: transparent var(--ivory); transition: scrollbar-color 0.6s ease; }
html.is-open { scrollbar-color: var(--gold-soft) var(--ivory); }

/* ===== LOADER =====
   Envelope-toned so the fade onto entry.jpg reads as the same paper.
   Out-ranks the entry (10000). */
.loader {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background-color: var(--envelope);
  transition: opacity 0.8s ease;
}
.loader.is-done { opacity: 0; pointer-events: none; }

.loader__track {
  width: 132px;
  height: 1px;
  background-color: rgba(125, 100, 53, 0.18);
  overflow: hidden;
}
.loader__bar {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
}
.loader__pct {
  font-family: var(--f-latin);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--gold-text);
  font-variant-numeric: lining-nums tabular-nums;
}

/* ===== ENTRY ===== */
.entry {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background-color: var(--envelope);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.6s ease;
}
.entry.is-done { opacity: 0; pointer-events: none; }
.entry.is-gone { display: none; }

.entry__video,
.entry__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.entry__still { z-index: 2; }
.entry__still.is-hidden { opacity: 0; }

.entry__hint {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 11%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1s ease 0.4s, transform 1.2s var(--ease-out) 0.4s;
}
html:not(.is-loading) .entry__hint { opacity: 1; transform: none; }

.entry__hint-ka {
  font-family: var(--f-serif);
  font-size: 22px;
  color: var(--ink);
  letter-spacing: 0.04em;
  text-shadow: 0 0 3px rgba(250, 244, 232, 0.95), 0 0 12px rgba(250, 244, 232, 0.9);
}
.entry__hint-en {
  font-family: var(--f-latin);
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--gold-text);
  text-shadow: 0 0 8px rgba(250, 244, 232, 0.9);
}

.entry.is-playing .entry__hint {
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* ===== FIXED CONTROLS ===== */
.ctrl {
  position: fixed;
  z-index: 500;
  top: calc(env(safe-area-inset-top) + 14px);
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: rgba(251, 249, 244, 0.74);
  border: 1px solid rgba(220, 201, 160, 0.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.8s ease 1.8s, transform 0.8s var(--ease-out) 1.8s, background-color 0.3s ease;
}
html.is-open .ctrl { opacity: 1; pointer-events: auto; transform: none; }
.ctrl:active { transform: scale(0.96); }

.ctrl--music { right: 16px; width: 46px; }
.ctrl--lang  { left: 16px; width: 70px; gap: 10px; }

/* Four hairline bars; they sway while music plays, settle when paused. */
.ctrl__bars { display: inline-flex; align-items: center; gap: 3px; height: 14px; }
.ctrl__bars i {
  display: block;
  width: 2px;
  height: 14px;
  border-radius: 1px;
  background-color: var(--gold-text);
  transform: scaleY(0.28);
  transform-origin: center;
  transition: transform 0.4s ease;
}
.ctrl--music.playing .ctrl__bars i { animation: barSway 1.1s ease-in-out infinite; }
.ctrl--music.playing .ctrl__bars i:nth-child(2) { animation-delay: -0.35s; }
.ctrl--music.playing .ctrl__bars i:nth-child(3) { animation-delay: -0.7s; }
.ctrl--music.playing .ctrl__bars i:nth-child(4) { animation-delay: -0.2s; }

.ctrl__lang {
  position: relative;
  font-size: 13px;
  line-height: 1;
  color: var(--ink-soft);
  opacity: 0.5;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.ctrl__lang--ka { font-family: var(--f-serif); }
.ctrl__lang--en { font-family: var(--f-latin); font-size: 14px; letter-spacing: 0.08em; }
.ctrl__lang::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background-color: var(--gold);
  transform: scaleX(0);
  transition: transform 0.35s var(--ease-out);
}
.ctrl--lang:not(.lang-en) .ctrl__lang--ka,
.ctrl--lang.lang-en .ctrl__lang--en { opacity: 1; color: var(--ink); }
.ctrl--lang:not(.lang-en) .ctrl__lang--ka::after,
.ctrl--lang.lang-en .ctrl__lang--en::after { transform: scaleX(1); }

/* ===== HERO =====
   hero.jpg is the intro's last frame, framed exactly as the video was
   (cover, centred). The slow drift starts at scale(1) so the handoff from
   the film stays invisible, then breathes the picture forward. */
.hero {
  position: relative;
  /* Its own stacking context, so the z 3 copy and cue inside it can never
     paint over the first sheet's lip. */
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background-color: var(--ivory);
}
.vh-lock .hero { min-height: calc(var(--vh) * 100); }

.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: 50% 58%;
}
html.is-open .hero__bg { animation: heroDrift 32s var(--ease-out) forwards; }

/* A soft haze in the sky behind the type, no hard edge, so the names hold
   over the clouds without a panel. Faded in, since a gradient can't be. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 92% 38% at 50% 20%, rgba(250, 247, 240, 0.9) 0%, rgba(250, 247, 240, 0.62) 46%, rgba(250, 247, 240, 0) 100%);
  opacity: 0;
  transition: opacity 1.6s ease 0.1s;
}
html.is-open .hero__veil { opacity: 1; }

.hero__text {
  position: relative;
  z-index: 3;
  /* High in the sky so the colonnade never rises into the date, even on a
     short phone where `cover` lifts the building. */
  padding: calc(env(safe-area-inset-top) + var(--vh) * 5) 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__names {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--f-script);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.3;
  color: var(--ink);
  /* Stacked tight halos build density right at the glyph edge, the wide one
     only softens it back into the sky. Legibility without any panel. */
  text-shadow: 0 0 2px rgba(250, 247, 240, 0.95), 0 0 5px rgba(250, 247, 240, 0.9), 0 0 12px rgba(250, 247, 240, 0.85), 0 0 26px rgba(250, 247, 240, 0.7);
}
/* The names resolve in through filter: blur(), and a filtered element is
   drawn into a layer the size of its box. DM Medea's swashes, tails and the
   wide glow reach well outside the line box, so they were cropped while the
   animation ran. Padding grows the box to cover every glyph and its halo;
   the negative margins hand the space back so the layout doesn't move. */
.hero__name {
  display: block;
  padding: 0.6em 0.7em;
  margin: -0.6em -0.7em;
}

body.lang-en .hero__names { font-family: var(--f-latin); font-weight: 300; font-size: 44px; line-height: 1.05; }

.amp {
  font-family: var(--f-latin);
  font-weight: 300;
  color: var(--gold);
}
.hero__names .amp { font-size: 27px; line-height: 1.2; margin: 16px 0 0; }

.hero__rule {
  display: block;
  width: 64px;
  height: 1px;
  margin: 24px 0 14px; /* clears DM Medea's long descenders */
  background-color: var(--gold);
}

.hero__years {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 19px;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-shadow: 0 0 2px rgba(250, 247, 240, 0.95), 0 0 6px rgba(250, 247, 240, 0.9), 0 0 16px rgba(250, 247, 240, 0.8);
}
.hero__35 {
  font-family: var(--f-latin);
  font-weight: 300;
  font-size: 38px;
  line-height: 1;
  color: var(--gold-text);
}

.hero__date {
  margin-top: 10px;
  font-family: var(--f-label);
  font-size: 15px;
  letter-spacing: 0.18em;
  color: var(--ink);
  text-shadow: 0 0 2px rgba(250, 247, 240, 0.95), 0 0 6px rgba(250, 247, 240, 0.9), 0 0 16px rgba(250, 247, 240, 0.8);
}
body.lang-en .hero__date { font-family: var(--f-latin); font-size: 16px; letter-spacing: 0.14em; }

/* Hero choreography. Held invisible until the film hands over, then each
   line resolves out of a soft blur in reading order. */
.hero__name, .hero__names .amp, .hero__rule, .hero__years, .hero__date, .hero__cue { opacity: 0; }

html.is-open .hero__name { animation: resolveIn 1.6s var(--ease-out) both; }
html.is-open .hero__name:first-child { animation-delay: 0.25s; }
html.is-open .hero__names .amp { animation: fadeIn 1.2s ease 0.7s both; }
html.is-open .hero__name:last-child { animation-delay: 0.85s; }
html.is-open .hero__rule { animation: drawX 1.3s var(--ease-silk) 1.35s both; }
html.is-open .hero__years { animation: riseIn 1.2s var(--ease-out) 1.6s both; }
html.is-open .hero__date { animation: riseIn 1.2s var(--ease-out) 1.85s both; }
html.is-open .hero__cue { animation: fadeIn 1.2s ease 2.6s both; }

/* Scroll hint: the words and two chevrons that bob in turn, lit the same
   way as the names (glyph halos, no capsule) so they hold on the marble. */
.hero__cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  /* Clear of the first sheet's lip, which rides over the hero's foot. */
  bottom: calc(env(safe-area-inset-bottom) + 18px + var(--lip));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  white-space: nowrap;
  transition: opacity 0.6s ease;
}
.hero__cue.is-away { opacity: 0 !important; pointer-events: none; }
.hero__cue-label {
  font-family: var(--f-serif);
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-shadow: 0 0 2px rgba(250, 247, 240, 0.95), 0 0 6px rgba(250, 247, 240, 0.95), 0 0 16px rgba(250, 247, 240, 0.85);
}
body.lang-en .hero__cue-label { font-family: var(--f-latin); font-size: 17px; letter-spacing: 0.1em; }
.hero__chevs { display: flex; flex-direction: column; align-items: center; }
.hero__chevs i {
  display: block;
  width: 10px;
  height: 10px;
  margin-top: -3px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
  filter: drop-shadow(0 0 3px rgba(250, 247, 240, 0.95));
  animation: chevBob 1.8s ease-in-out infinite;
}
.hero__chevs i:nth-child(2) { animation-delay: 0.22s; }

/* ===== SECTIONS ===== */
.section { position: relative; padding: 96px 24px; }

/* ===== SHEETS =====
   The ucha-megi section transition: every section below the hero is a sheet
   of paper laid over the one before it, with a rounded top lip, an upward
   shadow and a negative margin so it rides over its neighbour. Painting order
   is DOM order, later on top, which is exactly what the overlap needs. Each
   sheet is opaque; the separation is carried by the fold, the shadow and the
   step in paper tone (ivory / paper alternate), never by transparency.
   rsvp and closing both stay --ivory because their artwork is feathered into
   that exact tone, so between those two the fold and shadow do the work. */
.sheet {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--lip) * -1);
  border-top-left-radius: var(--lip);
  border-top-right-radius: var(--lip);
  background-color: var(--ivory);
  box-shadow: 0 -14px 32px rgba(38, 51, 58, 0.1);
}
/* Catches the light along the lip, so the fold still reads where the sheet
   underneath is nearly the same tone. */
.sheet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 11%;
  right: 11%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.85);
  pointer-events: none;
}
.sheet--paper { background-color: var(--paper); }

/* ===== EMBROIDERED FLORALS =====
   The stitched-thread flowers from the tinatini-giorgi build, duotoned from
   their original ivory (invisible on this paper) to a blind-emboss range,
   #c2b293 shadow to #f8f4ea highlight, so they read like the raised florals
   on the envelope in the intro film. They sit behind the copy and bleed off
   the sheet's edge; the sheet clips them (overflow: hidden), which also keeps
   a bleed from ever adding sideways scroll. Mirroring uses the individual
   `scale` property so it never fights the reveal's `transform`. */
.sheet { overflow: hidden; }
.sheet > .section__inner,
.sheet > .closing__signoff { position: relative; z-index: 1; }

.deco {
  position: absolute;
  z-index: 0;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 2.2s ease, transform 2.6s var(--ease-out);
}
.deco.is-in { opacity: 1; transform: none; }

.deco--invite-lily  { width: 118px; top: 22px; left: -30px; scale: -1 1; }
.deco--invite-poppy { width: 136px; right: -40px; bottom: 34px; }
.deco--events-bud   { width: 150px; top: 18px; right: -52px; }
.section__inner { max-width: 520px; margin: 0 auto; text-align: center; }

.section__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--ink);
}
body.lang-en .section__title { font-family: var(--f-latin); font-size: 34px; line-height: 1.15; }

/* Scroll reveal. script.js adds .is-in once (and staggers siblings that
   arrive together). */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.1s ease, transform 1.3s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ===== INVITATION ===== */
.invite { padding-top: 104px; padding-bottom: 212px; /* room for the poppy to bloom below the copy */ }

.invite__greeting {
  font-family: var(--f-script);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.85; /* two lines of DM Medea need room for the descenders */
  color: var(--ink);
  margin-bottom: 22px;
}
body.lang-en .invite__greeting { font-family: var(--f-latin); font-weight: 300; font-size: 40px; line-height: 1.2; }

.invite__text {
  max-width: 30ch;
  margin: 0 auto 14px;
  font-size: 17px;
  line-height: 1.95;
  color: var(--ink-soft);
}
body.lang-en .invite__text { font-size: 20px; line-height: 1.6; }

/* ===== SCHEDULE ===== */
.events__date {
  margin-top: 10px;
  font-family: var(--f-label);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--gold-text);
}
body.lang-en .events__date { font-family: var(--f-latin); font-size: 16px; letter-spacing: 0.14em; }

.events__list { display: flex; flex-direction: column; align-items: center; }

/* Between the cards: a gold hairline drawn downward that ends in a small
   diamond. */
.link {
  position: relative;
  display: block;
  width: 1px;
  height: 64px;
  margin: 18px 0 22px;
  opacity: 1;
  transform: none;
}
.link::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--gold);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.2s var(--ease-silk);
}
.link::after {
  content: '';
  position: absolute;
  left: -3.5px;
  bottom: -4px;
  width: 8px;
  height: 8px;
  border: 1px solid var(--gold);
  background-color: var(--ivory);
  transform: rotate(45deg) scale(0);
  transition: transform 0.6s var(--ease-out) 1s;
}
.link.is-in::before { transform: scaleY(1); }
.link.is-in::after { transform: rotate(45deg) scale(1); }

.event-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 34px;
  /* Ivory on the paper schedule sheet, so the cards still stand off it. */
  background-color: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(38, 51, 58, 0.06);
}

/* Illustration settles from a gentle zoom as the card arrives. */
.event-card__img { position: relative; width: 100%; aspect-ratio: 5 / 4; overflow: hidden; }
.event-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 2.4s var(--ease-out) 0.15s;
}
.event-card.is-in .event-card__img img { transform: scale(1); }
.event-card__img::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  /* Transparent stop is the card colour at 0 alpha: Safari greys a plain
     `transparent` stop. */
  background: linear-gradient(to bottom, rgba(243, 239, 230, 0), var(--ivory));
  pointer-events: none;
}

.event-card__label {
  margin: 20px 24px 10px;
  font-family: var(--f-label);
  font-size: 13px;
  letter-spacing: 0.2em;
  line-height: 1.6;
  color: var(--gold-text);
}
body.lang-en .event-card__label { font-family: var(--f-latin); font-size: 15px; letter-spacing: 0.16em; }

.event-card__venue {
  margin: 0 24px;
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink);
}
body.lang-en .event-card__venue { font-family: var(--f-latin); font-size: 28px; line-height: 1.2; }

.event-card__addr {
  margin: 6px 24px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}
body.lang-en .event-card__addr { font-size: 17px; }

.event-card__rule { display: block; width: 32px; height: 1px; margin: 22px 0 18px; background-color: var(--gold-soft); }

.event-card__time {
  font-family: var(--f-latin);
  font-weight: 300;
  font-size: 44px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink);
  font-variant-numeric: lining-nums;
  margin-bottom: 24px;
}

.event-card__map {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 22px;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  font-family: var(--f-label);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.15s ease;
}
body.lang-en .event-card__map { font-family: var(--f-latin); font-size: 15px; letter-spacing: 0.08em; }
.event-card__map:active { transform: scale(0.97); background-color: rgba(220, 201, 160, 0.18); }

/* ===== RSVP =====
   final-top.jpg spans the full width (100% auto, never contain, so a short
   screen can't shrink it to a strip); its lower edge is already feathered
   into --ivory in the file. */
.rsvp {
  background-color: var(--ivory);
  background-image: url('final-top.jpg');
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  padding-top: 88px;
}

.rsvp__lead {
  max-width: 28ch;
  margin: 10px auto 34px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-soft);
}
body.lang-en .rsvp__lead { font-size: 18px; }

.rsvp__panel {
  position: relative;
  padding: 34px 22px 30px;
  text-align: left;
  background-color: rgba(251, 249, 244, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(38, 51, 58, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.rsvp__form { display: flex; flex-direction: column; gap: 26px; }
.rsvp__form[hidden] { display: none; }

.field { display: flex; flex-direction: column; gap: 8px; }

.field__label {
  padding: 0;
  font-family: var(--f-label);
  font-size: 12px;
  letter-spacing: 0.14em;
  line-height: 1.6;
  color: var(--ink-soft);
}
body.lang-en .field__label { font-family: var(--f-latin); font-size: 15px; letter-spacing: 0.06em; }

/* Underlined input; a gold line draws across it on focus. */
.field__input {
  width: 100%;
  padding: 10px 2px 11px;
  font-family: var(--f-serif);
  font-size: 17px; /* 16px+ or iOS Safari zooms on focus */
  color: var(--ink);
  background-color: transparent;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background-size 0.6s var(--ease-out), border-color 0.3s ease;
}
.field__input:focus { background-size: 100% 1px; }
body.lang-en .field__input { font-family: var(--f-latin); font-size: 19px; }

.field__error { min-height: 0; font-size: 13px; line-height: 1.5; color: var(--error); }
.field__error:empty { display: none; }

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }

.choice, .pill { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* Native radio stays focusable and in the a11y tree, just invisible. */
.choice input, .pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.choice__face {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 8px 14px;
  text-align: center;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.15s ease;
}
body.lang-en .choice__face { font-size: 17px; }
.choice:active .choice__face, .pill:active span { transform: scale(0.97); }
.choice input:checked + .choice__face { background-color: rgba(220, 201, 160, 0.26); border-color: var(--gold); }
.choice input:focus-visible + .choice__face,
.pill input:focus-visible + span { box-shadow: 0 0 0 3px rgba(179, 146, 86, 0.28); }

.rsvp__count.is-off { display: none; }

.pills { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
.pill span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background-color: var(--paper);
  font-family: var(--f-latin);
  font-size: 20px;
  color: var(--ink);
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.15s ease;
}
.pill input:checked + span { background-color: var(--ink); border-color: var(--ink); color: var(--paper); }

.rsvp__submit {
  margin-top: 4px;
  min-height: 56px;
  border-radius: 999px;
  background-color: var(--ink);
  color: var(--paper);
  font-family: var(--f-serif);
  font-size: 16px;
  letter-spacing: 0.06em;
  transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.15s ease;
}
body.lang-en .rsvp__submit { font-family: var(--f-latin); font-size: 19px; }
.rsvp__submit:active { transform: translateY(1px) scale(0.99); }
.rsvp__submit:disabled { opacity: 0.55; cursor: default; }

.rsvp__status { min-height: 20px; margin-top: -10px; font-size: 13px; line-height: 1.6; text-align: center; color: var(--ink-soft); }
.rsvp__status.is-error { color: var(--error); }

.rsvp__done {
  padding: 18px 4px;
  font-size: 17px;
  line-height: 1.8;
  text-align: center;
  color: var(--ink);
  animation: riseIn 1s var(--ease-out) both;
}
.rsvp__done[hidden] { display: none; }
body.lang-en .rsvp__done { font-size: 20px; }

/* ===== CLOSING =====
   final-bottom.jpg (square, from _source/final.png) draws into the reserved
   padding band, 100vw tall at 100% width; its top 26% is feathered into
   --ivory in the file itself, so it meets the sheet ground with no seam. */
.closing {
  position: relative;
  padding: 64px 24px calc(100vw + 8px + var(--lip));
  text-align: center;
  background-color: var(--ivory);
  background-image: url('final-bottom.jpg?v=2');
  background-size: 100% auto;
  /* Lifted by one lip: the footer sheet rides over the bottom of this one. */
  background-position: center bottom var(--lip);
  background-repeat: no-repeat;
}

.closing__signoff { position: relative; display: inline-flex; flex-direction: column; align-items: center; }

.closing__rule { display: block; width: 40px; height: 1px; margin-bottom: 22px; background-color: var(--gold); }

.closing__love { font-size: 17px; color: var(--ink-soft); margin-bottom: 6px; }
body.lang-en .closing__love { font-size: 20px; }

/* "Written on" left to right, the One-line rule that text is drawn like
   the line: a soft mask edge sweeps across once the sign-off is in view. */
.closing__names {
  font-family: var(--f-script);
  font-size: 36px;
  line-height: 1.5;
  color: var(--ink);
  white-space: nowrap;
  /* A mask only paints inside the element's box, and DM Medea's swashes and
     descenders reach well past the line box, so they were being cropped.
     Padding grows the masked area to cover every glyph; the negative margins
     hand the extra space back so the layout doesn't move. */
  padding: 0.55em 0.3em;
  margin: -0.55em -0.3em;
  -webkit-mask-image: linear-gradient(90deg, #000 42%, rgba(0, 0, 0, 0) 58%);
  mask-image: linear-gradient(90deg, #000 42%, rgba(0, 0, 0, 0) 58%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  transition: -webkit-mask-position 2.8s var(--ease-silk) 0.5s, mask-position 2.8s var(--ease-silk) 0.5s;
}
.closing__names .amp { font-size: 28px; margin: 0 4px; }
body.lang-en .closing__names { font-family: var(--f-latin); font-weight: 300; font-size: 40px; }
.closing__signoff.is-in .closing__names { -webkit-mask-position: 0 0; mask-position: 0 0; }

/* ===== FOOTER ===== */
.footer {
  padding: calc(26px + var(--lip) * 0.5) 24px calc(env(safe-area-inset-bottom) + 26px);
  text-align: center;
  background-color: #f2e4dc; /* final-bottom.jpg's own bottom row */
}
.footer__credit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  opacity: 0.3;
  transition: opacity 0.3s ease;
}
.footer__credit:hover, .footer__credit:active { opacity: 1; }
.footer__logo { width: 20px; height: auto; }
.footer__credit span { font-family: var(--f-latin); font-size: 13px; letter-spacing: 0.08em; color: var(--ink); }

/* ===== KEYFRAMES ===== */
@keyframes heroDrift {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
@keyframes resolveIn {
  from { opacity: 0; transform: translateY(14px); filter: blur(9px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes drawX {
  from { opacity: 1; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}
@keyframes chevBob {
  0%, 100% { transform: translateY(0) rotate(45deg); opacity: 0.55; }
  50%      { transform: translateY(5px) rotate(45deg); opacity: 1; }
}
@keyframes barSway {
  0%, 100% { transform: scaleY(0.3); }
  50%      { transform: scaleY(1); }
}

/* ===== REDUCED MOTION =====
   Everything lands in its final state; script.js also skips the film. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* ===== 481px+ (large phones, small tablets in portrait) ===== */
@media (min-width: 481px) {
  .hero__names { font-size: 46px; }
  .invite__greeting { font-size: 38px; }
  .closing__names { font-size: 42px; }
}

/* ===== DESKTOP NOTICE ===== */
.desktop-notice { display: none; }

@media (min-width: 769px) {
  /* The invitation is mobile-only; swap the whole page for the notice. */
  body > *:not(.desktop-notice) { display: none !important; }

  .desktop-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 100vh;
    padding: 40px 24px;
    background-color: var(--ivory);
  }
  .desktop-notice__logo { width: 52px; height: auto; opacity: 0.8; margin-bottom: 22px; }
  .desktop-notice__ka,
  .desktop-notice__en { font-family: var(--f-latin); font-size: 18px; line-height: 1.5; text-align: center; color: var(--ink); }
  .desktop-notice__ka { font-family: var(--f-serif); }
  .desktop-notice__en { font-size: 15px; color: var(--ink-soft); }
}