/* ============================================================
   Shubbh & Muskaan (groom side) — Layered Invitation
   Cloned from templates/unnati-vaibhav (vaibhav-unnati → hardik-nandini →
   shruti-utkarsh → ashish-priyanshi). Scene artwork comes from those PSDs, positioned
   at their original coordinates as % of each 1080 px-wide canvas;
   every readable string is live HTML from template-texts.js.
   ============================================================ */

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

/* One readable family throughout: EB Garamond (OFL, assets/fonts/OFL-eb-garamond.txt).
   Names and titles were a copperplate script until 2026-09-27, when the client found
   the names hard to read (in the Hardik & Nandini template this was cloned from); they now use the same Garamond at display sizes
   (--hn-display), set apart by size, weight and colour instead of a script. */
@font-face {
  font-family: "HN Garamond";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/eb-garamond-latin-var.woff2") format("woff2");
}

@font-face {
  font-family: "HN Garamond";
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/eb-garamond-latin-italic-var.woff2") format("woff2");
}

@font-face {
  font-family: "HN Tiro Devanagari";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  /* OFL (assets/fonts/OFL-tiro-devanagari-sanskrit.txt), subset to the
     Devanagari characters in template-texts.js. Re-subset (under a NEW filename)
     whenever that Hindi/Sanskrit copy changes, or new letters fall back. */
  src: url("assets/fonts/tiro-devanagari-sanskrit-hn2.woff2") format("woff2");
}

/* Names on the cover invitation block only (client 2026-10-01: "a little fancy").
   Now vansh-ishika's fuller subset (from the same HelloBrideScript.ttf, adds q/x/z the
   shekhar-nupur copy lacked) so the RSVP slide's "Special Request" sets in it too; covers
   "Muskaan", "Shubbh", "Rsvp", "Special Request" (checked 2026-10-24).
   Licence: fsType 4 (preview & print) with no embedded licence, as in shekhar-nupur;
   web-embedding clearance is the client's call. */
@font-face {
  font-family: "HN Hello Bride";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/hello-bride-400-v2.woff2") format("woff2");
}

/* Haldi & Mehendi title only, to match shruti-utkarsh's baked title.
   Licence unknown, inherited from shruti-utkarsh. */
@font-face {
  font-family: "HN Maginia";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/Maginia.otf") format("opentype");
}

:root {
  --hn-display: var(--hn-serif);
  --hn-serif: "HN Garamond", Garamond, Georgia, "Times New Roman", serif;
  --hn-deva: "HN Tiro Devanagari", "Kohinoor Devanagari", "Noto Serif Devanagari", serif;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  background: #d2e6ed;
  color: #1f3f48;
}

@supports (height: 100svh) {
  body {
    min-height: 100svh;
  }
}

.invite {
  --viewport-height: 100vh;
  --stage-width: min(100vw, calc(var(--viewport-height) * 1080 / 1920), 540px);
  --motion-fast: 180ms;
  --motion-medium: 480ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  min-height: var(--viewport-height);
}

@supports (height: 100svh) {
  .invite {
    --viewport-height: 100svh;
  }
}

.slide {
  display: flex;
  justify-content: center;
}

.stage {
  position: relative;
  width: var(--stage-width);
  overflow: hidden;
  background: #d2e6ed;
  isolation: isolate;
  contain: layout paint style;
}

.stage--cover {
  aspect-ratio: 1080 / 3840;
}

.stage--sangeet,
.stage--haldi,
.stage--wedding,
.stage--toast,
.stage--rsvp {
  aspect-ratio: 1080 / 1920;
}

.stage--scratch {
  aspect-ratio: 1080 / 1920;
}

.stage--last {
  aspect-ratio: 1080 / 1920;
}

.ly {
  position: absolute;
  display: block;
  /* left / top / width / height set inline per layer from PSD bbox */
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.template-text {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color, #24431d);
  font-family: var(--text-font, var(--hn-serif));
  font-size: var(--text-size, calc(var(--stage-width) * 0.038));
  font-weight: var(--text-weight, 500);
  font-style: var(--text-style, normal);
  letter-spacing: var(--text-letter-spacing, 0);
  line-height: var(--text-line-height, 1.08);
  text-align: center;
  overflow: visible;
  white-space: pre-line;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.template-text--script {
  --text-font: var(--hn-display);
  --text-weight: 500;
  --text-line-height: 0.92;
}

.template-text--serif {
  --text-font: var(--hn-serif);
  --text-weight: 500;
}

.template-text--scratch-label {
  --text-color: #c1446c;
  --text-size: calc(var(--stage-width) * 0.023);
  --text-weight: 400;
}

.template-text-block {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  pointer-events: none;
  user-select: none;
}

/* Card was 7.4% tall in the source; 13% here (client: too hard to scratch).
   Must match the canvas box in index.html. */
.scratch-date-card {
  position: absolute;
  left: 19.8148%;
  top: 27.8%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60.3704%;
  height: 13.0208%;
  border-radius: calc(var(--stage-width) * 0.024);
  background: #fff;
  color: #c1446c;
  font-family: var(--hn-serif);
  font-size: clamp(1.35rem, calc(var(--stage-width) * 0.06), 2.3rem);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.live-countdown {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.countdown-value {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c1446c;
  font-family: var(--hn-serif);
  font-size: clamp(0.85rem, calc(var(--stage-width) * 0.043), 1.45rem);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.countdown-value--days {
  font-size: clamp(0.85rem, calc(var(--stage-width) * 0.044), 1.5rem);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.scratch-canvas {
  position: absolute;
  z-index: 2;
  display: block;
  cursor: grab;
  touch-action: none;
  transition:
    opacity var(--motion-medium) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
  user-select: none;
  will-change: transform, opacity;
}

.scratch-canvas:active,
.scratch-canvas.is-scratching {
  cursor: grabbing;
  transform: scale(0.992);
}

.scratch-canvas:focus-visible {
  outline: 4px solid rgba(176, 70, 108, 0.9);
  outline-offset: 6px;
}

.stage--scratch.is-scratch-complete .scratch-canvas {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .scratch-canvas {
    transition: none;
  }
}

/* ============================================================
   Send your blessings — a tap-to-bless "altar" slide.
   Static layout & appearance live here; motion is in animations.css.
   ============================================================ */
.stage--blessings {
  aspect-ratio: 1080 / 1920;
  background: radial-gradient(
    120% 80% at 50% 26%,
    #fdf7ec 0%,
    #fbefdd 42%,
    #f7e0c9 74%,
    #f3d2c2 100%
  );
}

/* Positioning context so the controls overlay sits exactly on the stage. */
.bless-frame {
  position: relative;
  width: var(--stage-width);
}

/* Soft halo behind the monogram (the blessing "target"). */
.bless-halo {
  position: absolute;
  left: 50%;
  top: 17.75%;
  width: 54%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 224, 158, 0.55) 0%,
    rgba(255, 214, 150, 0.22) 42%,
    rgba(255, 214, 150, 0) 70%
  );
  pointer-events: none;
  z-index: 0;
}

.bless-monogram {
  z-index: 1;
}

.bless-garland {
  z-index: 0;
}

/* Overlay holds the accessible controls; only the controls catch input,
   so vertical scrolling still passes through everywhere else. */
.bless-ui {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.bless-panel {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  width: min(90%, 384px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: calc(var(--stage-width) * 0.032);
}

.bless-title {
  margin: 0;
  font-family: "AP Playfair", Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: 1.05;
  font-size: clamp(1.5rem, calc(var(--stage-width) * 0.076), 2.3rem);
  color: #9c2f53;
}

.bless-hint {
  margin: 0;
  margin-top: calc(var(--stage-width) * -0.014);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(0.72rem, calc(var(--stage-width) * 0.03), 0.92rem);
  color: #7a5a48;
}

.bless-tray {
  display: flex;
  align-items: flex-start;
  gap: 1.6%;
  width: 100%;
  margin-top: calc(var(--stage-width) * 0.004);
}

.bless-token {
  pointer-events: auto;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Cream double-ring frame around each token illustration. */
.bless-token__disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: clamp(48px, calc(var(--stage-width) * 0.168), 86px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fffdf8 0%, #fdf4e3 68%, #f5e6cf 100%);
  border: 1px solid rgba(196, 158, 96, 0.55);
  box-shadow:
    0 5px 14px rgba(150, 95, 60, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.bless-token__disc::after {
  content: "";
  position: absolute;
  inset: 7.5%;
  border-radius: 50%;
  border: 1px solid rgba(196, 158, 96, 0.4);
  pointer-events: none;
}

.bless-token__art {
  display: block;
  width: 68%;
  height: auto;
  aspect-ratio: 1;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(120, 70, 40, 0.16));
}

.bless-token__label {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.55rem, calc(var(--stage-width) * 0.0265), 0.74rem);
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: #7a4b39;
  text-align: center;
}

.bless-token:focus-visible {
  outline: none;
}

.bless-token:focus-visible .bless-token__disc {
  outline: 3px solid rgba(193, 68, 108, 0.85);
  outline-offset: 3px;
}

.bless-send {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--stage-width) * 0.018);
  width: 100%;
  margin-top: calc(var(--stage-width) * 0.024);
}

/* Wish field: a feather quill marks "write a note". */
.bless-wishbox {
  display: flex;
  align-items: center;
  gap: 0.55em;
  width: 100%;
  padding: 0.12em 0.95em;
  border: 1px solid rgba(196, 158, 96, 0.55);
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.94);
  box-shadow: inset 0 1px 2px rgba(150, 110, 70, 0.08);
}

.bless-wishbox:focus-within {
  border-color: rgba(193, 68, 108, 0.7);
  box-shadow: 0 0 0 2px rgba(193, 68, 108, 0.16);
}

.bless-wishbox__icon {
  flex: none;
  width: 1.2em;
  height: 1.2em;
  color: #b98a3e;
}

.bless-wish {
  pointer-events: auto;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.62em 0;
  border: 0;
  background: transparent;
  color: #5a3c2c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.84rem, calc(var(--stage-width) * 0.036), 1.05rem);
  text-align: left;
}

.bless-wish::placeholder {
  color: #7d5c46;
}

.bless-wish:focus {
  outline: none;
}

/* Share is the SECONDARY action — a quiet outline button, so the
   token row stays the hero. Only the WhatsApp glyph carries colour. */
.bless-share {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.6em 1em;
  border: 1px solid rgba(150, 112, 66, 0.45);
  border-radius: 999px;
  background: transparent;
  color: #6b4a3a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.82rem, calc(var(--stage-width) * 0.038), 1.02rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  touch-action: manipulation;
}

.bless-share__icon {
  flex: none;
  width: 1.3em;
  height: 1.3em;
}

.bless-share__label {
  white-space: nowrap;
}

.bless-share:focus-visible {
  outline: 2px solid rgba(193, 68, 108, 0.9);
  outline-offset: 3px;
}

.bless-thanks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.74rem, calc(var(--stage-width) * 0.032), 0.95rem);
  color: #7a4b39;
}

.bless-thanks[hidden] {
  display: none;
}

.bless-thanks__icon {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  color: #d98a86;
}

.bless-thanks__n {
  color: #e0645a;
  font-weight: 700;
}

/* ============================================================
   Shubbh & Muskaan — live text
   One type system for every slide: EB Garamond throughout, with names
   and ceremony titles set larger, heavier and in colour. Sizes are fractions of the stage width (--u), so
   type scales with the 1080 px design canvas. Each text block sits in
   a column measured clear of the side florals.
   ============================================================ */

.invite {
  --u: calc(var(--stage-width) / 100);
  --hn-rose: #c4476e;
  --hn-leaf: #2d4a1f;
  --hn-olive: #5b6932;
  --hn-brown: #5b3a24;
}

/* Zero-specificity reset, so each component's own margins always win. */
:where(h1.template-text, .event-copy h2, .event-copy p, .rsvp-copy h2, .rsvp-copy p,
  .last-copy h2, .last-copy h3, .last-copy p, .cover-ceremony-copy p) {
  margin: 0;
}

.template-text--devanagari {
  --text-font: var(--hn-deva);
  --text-weight: 400;
}

/* ---- Cover hero ---- */
.template-text--cover-mantra {
  --text-color: var(--hn-leaf);
  --text-size: calc(var(--u) * 3.3);
  --text-line-height: 1.5;
}

.template-text--cover-shloka {
  --text-color: var(--hn-leaf);
  --text-size: calc(var(--u) * 3.5);
  --text-line-height: 1.5;
}

.template-text--cover-logo-names {
  flex-direction: column;
  gap: calc(var(--u) * 0.6);
  color: var(--hn-rose);
  font-family: var(--hn-serif);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.hero-names__name {
  color: var(--hn-rose);
  font-size: calc(var(--u) * 9);
  letter-spacing: 0.14em;
  margin-right: -0.14em; /* optical centring: cancel the trailing letter-space */
  text-transform: uppercase;
}

.hero-names__joiner {
  color: var(--hn-olive);
  font-size: calc(var(--u) * 7.5);
  font-style: italic;
  line-height: 1;
}

.template-text--cover-hashtag {
  --text-color: var(--hn-leaf);
  --text-size: calc(var(--u) * 5.4);
  --text-weight: 500;
}

.template-text--cover-venue {
  --text-color: var(--hn-leaf);
  --text-size: calc(var(--u) * 3.3);
  --text-weight: 500;
  --text-line-height: 1.6;
  --text-letter-spacing: 0.16em;
  align-items: flex-start; /* three lines hang down from the top of the box */
  text-transform: uppercase;
}

/* ---- Cover invitation ---- */
.cover-ceremony-copy {
  justify-content: flex-start;
  color: var(--hn-leaf);
  font-family: var(--hn-serif);
  font-size: calc(var(--u) * 3.6);
  font-weight: 400;
  line-height: 1.3;
}

.cover-ceremony-copy > span {
  display: block;
  max-width: 100%;
  text-wrap: balance;
  white-space: pre-line;
}

.cover-ceremony-copy__blessing {
  font-family: var(--hn-deva);
  line-height: 1.5;
}

.cover-ceremony-copy__blessing {
  font-size: calc(var(--u) * 3.5);
  margin-bottom: calc(var(--u) * 3.6);
}

/* Client 2026-10-24: both parents' lines in the same green as the block; only the
   "Cordially invite you..." line is brown. */
.cover-ceremony-copy__host {
  color: var(--hn-leaf);
  font-size: calc(var(--u) * 4.2);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: calc(var(--u) * 1.4);
}

.cover-ceremony-copy__invite {
  color: var(--hn-brown);
  margin-bottom: calc(var(--u) * 2.4);
}

/* Hello Bride script (client 2026-10-01: Garamond names looked "too basic"). Line-height 1
   with padding so the H/N swashes and the k tail sit inside the box (iOS clips composited
   text ink at box edges); the negative bottom margin keeps each name close to its parents'
   line without the ink touching it. The hairline stroke firms up thin strokes at 390px. */
.cover-ceremony-copy__name {
  margin: -0.04em 0 -0.08em;
  padding: 0.16em 0.35em 0.02em;
  color: var(--hn-rose);
  font-family: "HN Hello Bride", var(--hn-serif);
  font-size: calc(var(--u) * 12.5);
  font-weight: 400;
  line-height: 1;
  -webkit-text-stroke: 0.01em currentColor;
}

.cover-ceremony-copy__connector + .cover-ceremony-copy__name {
  margin-top: 0.08em;
}

.cover-ceremony-copy__family {
  font-size: calc(var(--u) * 3.1);
  font-style: italic;
  line-height: 1.35;
}

/* Groom's parents ("S/o ...") set exactly like the bride's parents' line above the names
   (client: "same font"): green, upright, same weight; balanced so the two lines break evenly.
   Client 2026-10-24: one size smaller than the bride's parents' line (4.2u -> 3.7u). */
.cover-ceremony-copy__family--parents {
  margin-top: calc(var(--u) * 1.4);
  color: var(--hn-leaf);
  font-size: calc(var(--u) * 3.7);
  font-style: normal;
  font-weight: 500;
  line-height: 1.2;
  text-wrap: balance;
}

/* Groom card: the family deity's blessing opens the invitation (English, so the
   Garamond italic rather than the Devanagari face of the base __blessing rule). */
.cover-ceremony-copy__blessing--en {
  font-family: var(--hn-serif);
  font-size: calc(var(--u) * 3.3);
  font-style: italic;
  line-height: 1.35;
  margin-bottom: calc(var(--u) * 2.4);
  white-space: pre-line;
}

/* Groom card: Shubbh's two grandparent lines (paternal, maternal) under his name. */
.cover-ceremony-copy__family--grand {
  margin-top: calc(var(--u) * 0.8);
  font-size: calc(var(--u) * 3);
  line-height: 1.3;
  white-space: pre-line;
}

.cover-ceremony-copy__connector {
  margin: calc(var(--u) * 2.6) 0 0;
  font-size: calc(var(--u) * 3.6);
  font-style: italic;
}

/* ---- Scratch slide ---- */
.template-text--scratch-tagline,
.template-text--scratch-countdown {
  --text-color: var(--hn-olive);
  --text-weight: 500;
  --text-letter-spacing: 0.24em;
  --text-line-height: 1.45;
  text-transform: uppercase;
}

.template-text--scratch-tagline {
  --text-size: calc(var(--u) * 3.1);
}

.template-text--scratch-countdown {
  --text-size: calc(var(--u) * 3.3);
}

.template-text--scratch-names {
  --text-color: var(--hn-olive);
  --text-size: calc(var(--u) * 7.2);
  white-space: nowrap;
  --text-line-height: 1.2;
}

/* ---- Event slides ----
   Four groups — date, title, time, venue — each separated by clear space,
   lines inside a group kept close. --s scales a whole block, so slides with
   less clear sky (Haldi, Baraat) shrink the type, never the spacing. */
.event-copy {
  --s: 1; /* type scale */
  --g: 4.4; /* space between groups, in stage units */
  --e: calc(var(--u) * var(--s));
  --gap: calc(var(--u) * var(--g));
  --ev-title: var(--hn-rose);
  --ev-ink: var(--hn-leaf);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ev-ink);
  font-family: var(--hn-serif);
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}

.event-copy--haldi {
  --s: 0.84;
  --g: 1.6;
}

/* Tighter than the source: the title runs to two lines here, and the venue
   must stay above the dancing couple. */
.event-copy--sangeet {
  --s: 0.8;
  --g: 1.8;
}

.event-copy--wedding {
  --s: 0.84;
  --g: 2;
}

.event-copy--sangeet {
  --ev-title: #fffaf0;
  --ev-ink: #fffaf0;
  text-shadow: 0 1px calc(var(--u) * 1.2) rgba(0, 0, 0, 0.3);
}

/* Day wedding (client, 2026-10-18): the scene is under the template's sky blue
   now, so the copy takes the haldi slide's ink instead of the night slide's
   ivory; a soft paper-white halo keeps it clear of the chandelier glints. */
.event-copy--wedding {
  text-shadow: 0 0 calc(var(--u) * 1.6) rgba(255, 252, 244, 0.85);
}

.event-copy__weekday {
  font-size: calc(var(--e) * 2.9);
  font-weight: 500;
  letter-spacing: 0.26em;
  margin-right: -0.26em;
  text-transform: uppercase;
}

.event-copy__date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--e) * 2.6);
  margin-top: calc(var(--u) * 1);
}

.event-copy__rule {
  width: calc(var(--e) * 8);
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.event-copy__day {
  font-size: calc(var(--e) * 9);
  font-weight: 500;
  line-height: 1;
}

.event-copy__day sup {
  margin-left: 0.04em;
  font-size: 0.32em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 1.3em;
  line-height: 0;
}

.event-copy__month {
  margin-top: calc(var(--u) * 1);
  font-size: calc(var(--e) * 3.1);
  font-weight: 600;
  letter-spacing: 0.26em;
  margin-right: -0.26em;
  text-transform: uppercase;
}

.event-copy__title {
  margin-top: var(--gap);
  color: var(--ev-title);
  font-family: var(--hn-display);
  font-size: calc(var(--e) * 7.4);
  font-weight: 500;
  line-height: 1.15;
  white-space: nowrap;
}

/* Haldi title matches shruti-utkarsh's baked title (haldi-mehendi-text.png): Maginia in deep
   red, ss01 swashes on the "a" and "n" (the flourishes under "Ha" and "ndi"), a hairline
   stroke for the PNG's weight. The swashes hang into the gap above the time line; the
   reduced top margin keeps the block clear of the leaf backdrop (bottom <= 45.5% of stage). */
/* Every ceremony title is set in Maginia, as on shruti-utkarsh, with ss01 swash
   curls on the letters wrapped in .swash (markup in index.html). Each slide keeps
   its own title colour via --ev-title; Haldi uses shruti's deep red. */
.event-copy .event-copy__title {
  margin-top: calc(var(--gap) * 0.6);
  padding-bottom: 0.25em;
  font-family: "HN Maginia", var(--hn-serif);
  font-size: calc(var(--e) * 10);
  font-weight: 400;
  line-height: 1;
  -webkit-text-stroke: 0.015em currentColor;
}

.event-copy__title .swash {
  font-feature-settings: "ss01";
}

/* The ceremony under the client's name for the day ("Nanihal Ki Mithas" /
   CHAAK BHAAT & MYRA): the weekday/month spaced caps, in the title colour.
   Sizes were cut ~20% (client, 2026-10-12: the two-line heading crowded
   every slide). */
.event-copy__ceremony {
  /* clears the ss01 swash tails hanging under the title */
  margin-top: calc(var(--e) * 2.4);
  color: var(--ev-title);
  font-size: calc(var(--e) * 2.6);
  font-weight: 600;
  letter-spacing: 0.2em;
  margin-right: -0.2em;
  text-transform: uppercase;
}

/* Every event title is one line now: one size for all four slides. */
.event-copy .event-copy__title {
  font-size: calc(var(--e) * 7.4);
}

.event-copy--haldi .event-copy__title {
  color: #981020;
}

/* "Ring Ceremony / & Sangeet" is the one two-line title. */
.event-copy .event-copy__title--two {
  white-space: normal;
  line-height: 1.12;
}

/* No ceremony line under the titles, so each title's swash would sit right on
   the first row under it: give the swash that room instead. */
.event-copy--sangeet .event-copy__title,
.event-copy--haldi .event-copy__title,
.event-copy--wedding .event-copy__title {
  padding-bottom: 0.55em;
}

.event-copy__time {
  margin-top: var(--gap);
  font-size: calc(var(--e) * 4.4);
  font-weight: 500;
}

/* Client 2026-10-24: "put some space after Followed by Lunch / Dinner". */
.event-copy__note {
  margin-top: calc(var(--u) * 0.6);
  margin-bottom: calc(var(--u) * 1.8);
  font-size: calc(var(--e) * 3.5);
  font-style: italic;
}

/* Dress code under each event: spaced-caps label, the client's colours after it. */
.event-copy__attire {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: calc(var(--e) * 1.6);
  margin-top: calc(var(--u) * 1.4);
  font-size: calc(var(--e) * 3.6);
  font-weight: 500;
  text-wrap: balance;
}

.event-copy__attire-label {
  font-size: calc(var(--e) * 2.5);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  opacity: 0.85;
}

.event-copy__swatches {
  display: inline-flex;
  gap: calc(var(--e) * 0.7);
  align-self: center;
}

.event-copy__swatch {
  width: calc(var(--e) * 2.6);
  height: calc(var(--e) * 2.6);
  border-radius: 50%;
  background: var(--swatch);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.7),
    0 0 0 1.6px rgba(45, 74, 31, 0.28);
}

.event-copy__swatch--silver {
  background: linear-gradient(135deg, #f4f5f7 0%, #b9bdc4 45%, #eceef1 60%, #9da2aa 100%);
}

.event-copy__venue,
.event-copy__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 0.6);
  margin-top: var(--gap);
  text-wrap: balance;
}

/* Same spaced-caps label style as the weekday / month lines. */
.event-copy__venue-label {
  font-size: calc(var(--e) * 2.7);
  font-weight: 500;
  letter-spacing: 0.26em;
  margin-right: -0.26em;
  text-transform: uppercase;
  opacity: 0.85;
}

.event-copy__venue-name {
  font-size: calc(var(--e) * 4.6);
  font-weight: 500;
  line-height: 1.2;
}

.event-copy__venue-address {
  font-size: calc(var(--e) * 3.5);
  white-space: pre-line;
}

.event-copy__item + .event-copy__item {
  margin-top: calc(var(--gap) * 0.55);
}

.event-copy__item-head {
  font-size: calc(var(--e) * 4.4);
  font-weight: 500;
}

.event-copy__item-label {
  color: var(--ev-title);
}

.event-copy__item-venue {
  font-size: calc(var(--e) * 3.5);
  font-style: italic;
}

/* ---- RSVP + family slides ---- */
.rsvp-copy {
  justify-content: center;
  gap: calc(var(--u) * 1.4);
  color: var(--hn-leaf);
  font-family: var(--hn-serif);
  font-size: calc(var(--u) * 4.4);
  font-weight: 500;
  line-height: 1.35;
}

.rsvp-copy__script {
  color: var(--hn-rose);
  font-family: var(--hn-display);
  font-size: calc(var(--u) * 5.8);
  font-weight: 500;
  line-height: 1.2;
  white-space: pre-line;
  text-wrap: balance;
}

/* RSVP slide headings ("RSVP", "Special Request"): upright per client 2026-10-24 ("RSVP and
   Special Request has to be in non-italics") - the Maginia display face of the event titles
   with the same hairline stroke, replacing the Hello Bride script that read as italic.
   The padding is kept so ink stays inside the box (iOS clips composited text at box edges). */
.rsvp-copy__script--cursive {
  padding: 0.1em 0.3em 0.2em;
  margin-bottom: calc(var(--u) * 0.4);
  font-family: "HN Maginia", var(--hn-serif);
  font-size: calc(var(--u) * 7.6);
  font-weight: 400;
  line-height: 1.15;
  -webkit-text-stroke: 0.015em currentColor;
}

.rsvp-copy__lines {
  margin-bottom: calc(var(--u) * 3) !important;
  white-space: pre-line;
  text-wrap: balance;
}

.rsvp-copy__lines:last-child {
  margin-bottom: 0 !important;
}

/* Groom card: RSVP, Special Request, Compliments and Sweet Request share one slide
   (as on the client's reference card), so headings and gaps are a step smaller. */
.rsvp-copy--four .rsvp-copy__script--cursive {
  font-size: calc(var(--u) * 6.4);
  text-wrap: balance;
}

.rsvp-copy--four .rsvp-copy__lines {
  margin-bottom: calc(var(--u) * 2) !important;
}

/* Each couple stays on one line ("Shri Ramesh & Smt. Asha Bansal"), so these lists are set
   smaller than the rest of the slide to fit the column between the florals. */
.rsvp-copy__lines--couples {
  font-size: calc(var(--u) * 3.4);
  font-style: italic;
}

/* Longest couple: "Late Shri Rajendra Kumar & Smt. Sharda Agrawal". */
.rsvp-copy__lines--maternal {
  font-size: calc(var(--u) * 3);
}

/* RSVP numbers: tap-to-call, one per line, generous hit area. */
.rsvp-copy__phones {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(var(--u) * -2) !important;
  margin-bottom: calc(var(--u) * 3) !important;
}

.rsvp-copy__phone {
  padding: calc(var(--u) * 0.8) calc(var(--u) * 3);
  color: inherit;
  letter-spacing: 0.08em;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.22em;
}

.rsvp-copy__phone:focus-visible {
  outline: 2px solid var(--hn-rose);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Blessings: names stand in for the monogram until the logo arrives ---- */
/* ---- Blessings: the couple's monogram over the names, centred on the halo ---- */
.bless-monogram--logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2.2);
}

/* The M·S mark is portrait, so size it by height to leave the names their row. */
.bless-monogram__mark {
  display: block;
  flex: 0 1 auto;
  min-height: 0;
  height: 76%;
  width: auto;
}

.bless-monogram__names {
  color: var(--hn-olive);
  font-family: var(--hn-serif);
  font-size: calc(var(--u) * 3.6);
  font-weight: 500;
  letter-spacing: 0.24em;
  margin-right: -0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- Closing slide ---- */
/* Closing column. The "Your Presence Will Make It Special" card was removed
   (client, 2026-10-12); its room now goes to air between the groups, and the
   column is centred in the frame instead of stacked from the top. */
.last-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2);
  color: var(--hn-leaf);
  font-family: var(--hn-serif);
  font-size: calc(var(--u) * 4);
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}

.last-copy__regards {
  margin-top: calc(var(--u) * 0.6) !important;
  font-size: calc(var(--u) * 3.6);
  font-style: italic;
}

.last-copy__heading {
  font-size: calc(var(--u) * 5.6);
  font-weight: 500;
  line-height: 1.1;
}

.last-copy__heading--venue {
  margin-top: calc(var(--u) * 3.4) !important;
}

.last-copy__family {
  width: 100%;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
  border: 1.5px solid #e7a7b8;
  border-radius: calc(var(--u) * 2.2);
  background: rgba(250, 249, 246, 0.92);
  color: var(--hn-rose);
}

.last-copy__family-title {
  font-size: calc(var(--u) * 4.4);
  font-weight: 500;
}

.last-copy__family-names {
  margin-top: calc(var(--u) * 0.4) !important;
  font-size: calc(var(--u) * 3.6);
  white-space: pre-line;
}

.last-copy__venue {
  /* five lines: a touch smaller and more open so the widest line clears the florals */
  font-size: calc(var(--u) * 3.4);
  line-height: 1.38;
  white-space: pre-line;
}

/* Embedded venue map: a rounded card like the family boxes. The column (.ly) is pointer-events:none,
   so the card and iframe opt back in, or guests could not pan or zoom the map. */
.last-copy__map-frame {
  flex: none;
  width: calc(var(--u) * 54);
  aspect-ratio: 1 / 0.82;
  margin-top: calc(var(--u) * 0.6);
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: calc(var(--u) * 2.6);
  background: #efe9e1;
  box-shadow:
    0 0 0 1px #e7a7b8,
    0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(120, 40, 60, 0.18);
  pointer-events: auto;
}

.last-copy__map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: auto;
}

.last-copy__map {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  margin-top: calc(var(--u) * 0.8);
  padding: calc(var(--u) * 2.4) calc(var(--u) * 6);
  border: 2px solid #fff;
  border-radius: 999px;
  background: #d8728e;
  color: #fff;
  font-size: calc(var(--u) * 4.2);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  pointer-events: auto;
  user-select: auto;
}

/* Map pin (Lucide "map-pin", ISC) so the button reads as "open directions". */
.last-copy__map-icon {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.last-copy__map:focus-visible {
  outline: 3px solid rgba(193, 68, 108, 0.9);
  outline-offset: 4px;
}

/* "Designed by Shagun Studio India" — the studio colophon (same wording and
   Instagram link as the other Shagun invites). Small and softened so it reads as
   a credit, underlined because it is a link; padding grows the tap target to 44px
   without moving the glyphs. The column is pointer-events:none, so opt back in. */
.last-copy__credit {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: calc(var(--u) * 1.2);
  padding: 0 calc(var(--u) * 3);
  color: #6c6d3a;
  font-size: calc(var(--u) * 3);
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  white-space: nowrap;
  pointer-events: auto;
  transition: color 160ms ease;
}

.last-copy__credit:hover,
.last-copy__credit:focus-visible {
  color: var(--hn-leaf);
}

.last-copy__credit:focus-visible {
  outline: 2px solid rgba(193, 68, 108, 0.9);
  outline-offset: 2px;
  border-radius: 6px;
}