/* Bazm e Shahi.

   Built on Dastaan e Wisaal's stage -- one picture behind the whole card, a
   film for each part of it, the words rising over them -- with its own
   palace: sandstone, terracotta, carved wood and gold. The words sit on
   arched ivory panels with a gold double rule (the palace's own jharokhas)
   in the hall, and on dark arched cards over the functions' films.

   Speed, as on every film design here: only transforms and opacity move, the
   pictures are held with position: sticky, and nothing over a playing film
   is blurred. */

:root {
  --bs-ink: #3a1d12;
  --bs-ink-soft: #6a3b26;
  --bs-maroon: #7a2716;
  --bs-bronze: #8a5a2b;
  --bs-ivory: #fff7ec;
  --bs-gold: #c8963e;
  --bs-gold-soft: #f0d39a;
  --bs-gold-deep: #8f5f22;
  --bs-terracotta: #a5452a;
  --bs-night: #120b14;

  --bs-caps: 'Marcellus', 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --bs-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --bs-serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --bs-script: 'Arizonia', 'Great Vibes', cursive;
  --bs-arabic: 'Amiri', 'Noto Naskh Arabic', 'Traditional Arabic', serif;
  --bs-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  --bs-svh: 100vh;
  --bs-lvh: 100vh;
  --lw-w: 100vw;
}
@supports (height: 100svh) {
  :root { --bs-svh: 100svh; --bs-lvh: 100lvh; }
}

/* ------------------------------------------------------------------ page */

html.bs-html {
  background: var(--bs-night);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.bs-snap { scroll-snap-type: y mandatory; }

.bs-body {
  margin: 0;
  min-height: 100%;
  background: var(--bs-night);
  color: var(--bs-ink);
  font-family: var(--bs-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Resets at zero weight, so a class anywhere below always wins over them. */
:where(.bs-body) :where(img, video) { display: block; }
:where(.bs-body) :where(p, h1, h2) { margin: 0; }
:where(.bs-body) :where(h1, h2) { font-weight: 400; }
:where(.bs-body) button { font: inherit; }

html.bs-sealed,
html.bs-sealed > body {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
}
html.bs-sealed > body { position: fixed; inset: 0; width: 100%; }

.bs-main { position: relative; }

.bs-page {
  position: relative;
  box-sizing: border-box;
  min-height: var(--bs-svh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(64px, 10svh, 104px) 16px clamp(100px, 13svh, 124px);
  scroll-snap-align: start;
  text-align: center;
}

/* ---------------------------------------------------------------- stage */

.bs-stage { position: relative; }
.bs-stage-bg {
  position: sticky;
  top: 0;
  height: var(--bs-lvh);
  overflow: hidden;
  z-index: 0;
  background: var(--bs-night);
}
.bs-stage-pages {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--bs-lvh));
}

/* One picture. On when its page is being read; the script stacks the newest
   on top and lets the old one go only once the new one covers it, so the
   screen never dims between them. */
.bs-film {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1);
}
.bs-film.is-on { opacity: 1; }
.bs-film.is-quick { transition-duration: .01ms; }

.bs-pull,
.bs-steady {
  position: absolute;
  inset: 0;
  transform-origin: 50% var(--bs-dome, 38%);
}

.bs-film-poster,
.bs-film-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform-origin: 50% var(--bs-dome, 38%);
}
.bs-film-video { opacity: 0; transition: opacity .6s ease; }
.bs-film-video.is-playing { opacity: 1; }

/* Played through: the last frame holds, and drifts in, slowly. */
.bs-film-video.is-held { animation: bs-hold 45s linear forwards; }
@keyframes bs-hold {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

/* The night after the functions: the couple under the moon, dimmed to 60%
   behind the pages that follow, drifting; full on the last page. */
.bs-film-still .bs-film-poster { transform-origin: 50% 45%; }
html.bs-open .bs-film-still.is-on .bs-film-poster { animation: bs-drift 40s ease-in-out infinite alternate; }
.bs-film-dim .bs-film-poster { opacity: .6; }
@keyframes bs-drift {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

.bs-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bs-tone-dark .bs-scrim {
  background:
    linear-gradient(180deg, rgba(255, 247, 236, .3) 0%, rgba(255, 247, 236, .1) 30%, rgba(255, 247, 236, 0) 44%),
    linear-gradient(0deg, rgba(40, 20, 10, .3) 0%, rgba(40, 20, 10, 0) 16%);
}
.bs-tone-light .bs-scrim {
  background:
    linear-gradient(180deg, rgba(10, 6, 20, .58) 0%, rgba(10, 6, 20, .3) 26%, rgba(10, 6, 20, 0) 44%),
    linear-gradient(0deg, rgba(6, 4, 12, .38) 0%, rgba(6, 4, 12, 0) 18%);
}
.bs-film-dim .bs-scrim { background: linear-gradient(0deg, rgba(6, 4, 12, .4) 0%, rgba(6, 4, 12, 0) 20%); }

/* ------------------------------------------------ the pages over the films */

/* Every page's card starts in the same place, high on the screen with room
   above its medallion, so moving from page to page the card stays put and
   only what is on it changes. */
.bs-hero, .bs-family, .bs-count, .bs-guests, .bs-event, .bs-plain, .bs-closing {
  justify-content: flex-start;
  padding-top: calc(env(safe-area-inset-top, 0px) + max(34px, 5.4svh));
}
.bs-zone {
  position: relative;
  z-index: 1;
  width: min(100%, 86vw, 520px);
  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: opacity;
}

.bs-ink-dark { color: var(--bs-ink); }
.bs-ink-light {
  color: var(--bs-ivory);
  text-shadow: 0 2px 16px rgba(8, 4, 18, .7), 0 0 3px rgba(8, 4, 18, .45);
}

/* The morning's panel: a soft white wash under the words so they hold on
   any part of the sky, bordered like the invitation it was drawn from. */
.bs-panel {
  box-sizing: border-box;
  padding: max(10px, 1.5svh) 14px max(12px, 1.7svh);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 251, 245, .8) 0%, rgba(255, 249, 240, .66) 100%);
  border: 1px solid rgba(201, 161, 90, .5);
  box-shadow: 0 24px 60px -32px rgba(59, 34, 22, .6);
}
.bs-panel::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 19px;
  border: 1px solid rgba(201, 161, 90, .32);
  pointer-events: none;
}

/* Foil: the names and the figures, set in metal rather than ink. Clipped to
   the letters, so a shadow is a filter, not a text-shadow -- a text-shadow
   would show through the transparent letters and muddy them. */
.bs-foil {
  background: linear-gradient(180deg, #8a4a24 0%, #5a2414 42%, #a8743a 72%, #6b2d17 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.bs-foil-gold {
  background: linear-gradient(180deg, #fff7df 0%, #f3d995 36%, #c99a4b 62%, #fbe7b4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .55));
}

.bs-caps {
  font-family: var(--bs-caps);
  font-weight: 600;
  font-size: clamp(8.5px, 1.24svh, 11.5px);
  line-height: 1.7;
  letter-spacing: .15em;
  text-indent: .15em;
  text-transform: uppercase;
  white-space: pre-line;
  color: var(--bs-bronze);
}
.bs-ink-light .bs-caps { color: var(--bs-gold-soft); }
.bs-caps-wide { letter-spacing: .28em; text-indent: .28em; font-size: clamp(9.5px, 1.4svh, 12px); color: var(--bs-maroon); }

.bs-blessing {
  font-family: var(--bs-arabic);
  font-size: clamp(17px, 2.5svh, 26px);
  line-height: 1.4;
  color: var(--bs-maroon);
  margin-bottom: max(2px, .5svh);
}

.bs-names {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: max(6px, 1svh) 0 0;
  font-weight: 400;
}
.bs-name {
  font-family: var(--bs-caps);
  font-weight: 700;
  font-size: clamp(30px, 5.1svh, 58px);
  line-height: 1.02;
  letter-spacing: .07em;
  text-transform: uppercase;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.bs-and {
  position: relative;
  display: block;
  width: min(80vw, 320px);
  margin: -.14em 0 -.1em;
  font-family: var(--bs-script);
  font-size: clamp(26px, 4.1svh, 42px);
  line-height: 1;
  color: var(--bs-gold-deep);
}
.bs-ink-light .bs-and { color: var(--bs-gold-soft); }
.bs-and > span { position: relative; }
.bs-swash {
  position: absolute;
  left: 0;
  right: 0;
  top: 22%;
  width: 100%;
  height: 60%;
  overflow: visible;
}
.bs-swash path { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; opacity: .8; }

.bs-flower {
  display: block;
  width: clamp(15px, 2.2svh, 22px);
  height: clamp(15px, 2.2svh, 22px);
  margin: max(4px, .7svh) auto;
  color: var(--bs-terracotta);
}
.bs-ink-light .bs-flower { color: var(--bs-gold-soft); }
.bs-flower-sm { width: clamp(14px, 2svh, 18px); height: clamp(14px, 2svh, 18px); margin: max(4px, .7svh) auto; }
.bs-flower-xs { display: inline-block; width: 12px; height: 12px; margin: 0 8px; vertical-align: -1px; }

.bs-ico { display: inline-block; flex: none; width: 15px; height: 15px; vertical-align: -2px; color: var(--bs-gold-deep); }
.bs-ico-sm { width: 13px; height: 13px; margin-right: 5px; }
.bs-ink-light .bs-ico { color: var(--bs-gold-soft); }

/* A heading between two short rules, each ending in a diamond. */
.bs-kicker,
.bs-plain-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--bs-caps);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.25;
  text-wrap: balance;
}
.bs-kicker { font-size: clamp(14px, 2.2svh, 21px); color: var(--bs-maroon); }
.bs-orn {
  position: relative;
  flex: none;
  width: clamp(16px, 6vw, 36px);
  height: 7px;
  background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat;
  opacity: .75;
}
.bs-orn::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -2px;
  width: 5px;
  height: 5px;
  background: currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.bs-orn:last-child::after { right: auto; left: -2px; }
.bs-kicker .bs-orn { color: var(--bs-gold-deep); }

/* ---- families ---- */
.bs-fam-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0 clamp(8px, 2.6vw, 24px);
  width: 100%;
  margin-top: max(6px, 1.1svh);
  align-items: start;
}
.bs-fam-rule {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  background: linear-gradient(180deg, transparent, var(--bs-gold) 18%, var(--bs-gold) 82%, transparent) center / 1px 100% no-repeat;
  color: var(--bs-gold-deep);
}
.bs-fam-rule .bs-flower-xs { margin: 0; background: #fbf5ec; border-radius: 50%; }
.bs-fam-side { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.bs-fam-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(201, 161, 90, .16);
  border: 1px solid rgba(201, 161, 90, .45);
  font-family: var(--bs-caps);
  font-weight: 700;
  font-size: clamp(8.5px, 1.2svh, 10.5px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bs-maroon);
  white-space: nowrap;
}
.bs-fam-parents {
  margin-top: max(5px, .8svh);
  font-family: var(--bs-caps);
  font-weight: 700;
  font-size: clamp(12.5px, 1.8svh, 17px);
  line-height: 1.25;
  letter-spacing: .02em;
  color: var(--bs-ink);
  min-height: 1.25em;
}
.bs-fam-people {
  list-style: none;
  margin: max(5px, .8svh) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: max(4px, .6svh);
  width: 100%;
}
.bs-fam-person { display: flex; flex-direction: column; align-items: center; }
.bs-fam-name {
  font-family: var(--bs-serif);
  font-weight: 700;
  font-size: clamp(13.5px, 1.85svh, 17px);
  line-height: 1.2;
  color: var(--bs-ink);
  overflow-wrap: anywhere;
}
/* The one to ring first, set apart in gold. */
.bs-fam-person.is-prominent {
  padding: 3px 8px 4px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(243, 224, 180, .7), rgba(212, 173, 102, .45));
  border: 1px solid rgba(166, 120, 50, .45);
}
.bs-fam-person.is-prominent .bs-fam-name { color: var(--bs-maroon); }
.bs-fam-phone {
  display: inline-flex;
  align-items: center;
  font-family: var(--bs-sans);
  font-size: clamp(10.5px, 1.45svh, 13px);
  letter-spacing: .03em;
  color: var(--bs-ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.bs-fam-phone .bs-ico-sm { width: 11px; height: 11px; margin-right: 4px; }

/* ---- countdown ---- */
.bs-count-row {
  direction: ltr;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, 380px);
  margin: max(8px, 1.4svh) 0 max(6px, 1.1svh);
}
.bs-count-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 4px;
}
.bs-count-cell + .bs-count-cell {
  background: linear-gradient(180deg, transparent, var(--bs-gold) 25%, var(--bs-gold) 75%, transparent) left center / 1px 100% no-repeat;
}
.bs-count-num {
  font-family: var(--bs-caps);
  font-weight: 700;
  font-size: clamp(30px, 5.4svh, 52px);
  line-height: 1.05;
  font-variant-numeric: lining-nums tabular-nums;
}
.bs-count-label {
  margin-top: 4px;
  font-family: var(--bs-caps);
  font-weight: 600;
  font-size: clamp(8px, 1.15svh, 10.5px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bs-bronze);
  white-space: nowrap;
}
.bs-count-cell.is-tick .bs-count-num { animation: bs-tick .55s cubic-bezier(.2, .7, .2, 1); }
@keyframes bs-tick {
  from { transform: translate3d(0, -30%, 0); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.bs-count-date {
  display: inline-flex;
  align-items: center;
  font-family: var(--bs-serif);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(15px, 2.1svh, 20px);
  color: var(--bs-ink);
}

/* ---- dear guests ---- */
.bs-guests-names { display: flex; align-items: center; justify-content: center; }
.bs-guests-title {
  margin-top: 2px;
  font-family: var(--bs-script);
  font-size: clamp(30px, 4.4svh, 54px);
  line-height: 1.08;
  color: var(--bs-maroon);
}
.bs-guests-msg {
  max-width: 34ch;
  margin-top: max(4px, .7svh);
  font-family: var(--bs-serif);
  font-weight: 600;
  font-size: clamp(14px, 1.85svh, 19.5px);
  line-height: 1.38;
  color: var(--bs-ink);
  white-space: pre-line;
  text-wrap: pretty;
}
.bs-chips {
  list-style: none;
  margin: max(8px, 1.3svh) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.bs-chip {
  cursor: pointer;
  min-height: 32px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(166, 120, 50, .6);
  background: linear-gradient(180deg, rgba(243, 224, 180, .65), rgba(212, 173, 102, .35));
  color: var(--bs-maroon);
  font-family: var(--bs-caps);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease, transform .2s ease;
}
.bs-chip:hover, .bs-chip:focus-visible { background: var(--bs-maroon); color: var(--bs-ivory); }
.bs-chip:active { transform: scale(.96); }

/* ---- the functions ---- */
.bs-event-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--bs-caps);
  font-weight: 600;
  font-size: clamp(9px, 1.25svh, 11px);
  letter-spacing: .26em;
}
.bs-event-tag {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(236, 211, 160, .6);
  background: rgba(236, 211, 160, .14);
  color: var(--bs-gold-soft);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bs-event-name {
  margin-top: max(4px, .7svh);
  font-family: var(--bs-caps);
  font-weight: 700;
  font-size: clamp(32px, 5.4svh, 60px);
  line-height: 1.05;
  letter-spacing: .1em;
  text-indent: .1em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
/* On a phone the room above the Taj is worth more than the flower. */
.bs-event-zone .bs-flower { display: none; }
.bs-event-when {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: max(4px, .8svh);
  font-family: var(--bs-serif);
  font-weight: 700;
  font-size: clamp(15.5px, 2.15svh, 20px);
  line-height: 1.3;
}
.bs-dot { margin: 0 .45em; opacity: .7; }
.bs-event-where {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  margin-top: 2px;
  font-family: var(--bs-serif);
  font-size: clamp(14px, 1.9svh, 17.5px);
  line-height: 1.3;
}
.bs-event-where strong { display: inline-flex; align-items: center; font-weight: 700; }
/* The whole address, however long: it is the one line a guest needs. */
.bs-event-where span {
  max-width: 100%;
  opacity: .85;
  overflow-wrap: anywhere;
}

/* One row, always: a second row of buttons lands on the dome. */
.bs-event-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 8px;
  width: min(100vw - 24px, 420px);
  margin-top: max(7px, 1.2svh);
}

.bs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-sizing: border-box;
  min-height: 38px;
  padding: 8px 15px;
  border-radius: 999px;
  font-family: var(--bs-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: none;
  cursor: pointer;
  transition: transform .2s ease, background-color .25s ease, color .25s ease;
}
.bs-btn:active { transform: scale(.97); }
.bs-event-actions .bs-btn { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
@media (max-width: 380px) {
  .bs-event-actions .bs-btn { padding: 8px 11px; font-size: 9.5px; letter-spacing: .1em; gap: 6px; }
}
.bs-btn svg {
  flex: none;
  width: 14px;
  height: 14px;
}
.bs-btn-solid {
  border: 0;
  color: #2c1a10;
  background: linear-gradient(135deg, #f7e7bf 0%, #d9b46e 50%, #b88f48 100%);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.bs-btn-ghost {
  border: 1px solid rgba(236, 211, 160, .75);
  color: var(--bs-ivory);
  background: rgba(10, 6, 20, .3);
}
.bs-btn-ghost:hover { background: rgba(255, 255, 255, .14); }
.bs-btn:focus-visible, .bs-chip:focus-visible, .bs-faq summary:focus-visible, .bs-scroll:focus-visible, .bs-prog-map:focus-visible {
  outline: 2px solid var(--bs-gold);
  outline-offset: 3px;
}

/* ================================================= THE NIGHT AFTER

   The pages after the functions, over the dimmed night: gold headings, and
   everything that is read on ivory cards. */

.bs-plain-inner {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  will-change: opacity;
}
.bs-plain-head {
  font-size: clamp(19px, 5.4vw, 28px);
  color: var(--bs-gold-soft);
  margin-bottom: max(14px, 2.2svh);
}
.bs-plain-head .bs-orn { color: var(--bs-gold); }

.bs-card {
  box-sizing: border-box;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 250, 242, .95), rgba(250, 240, 226, .92));
  border: 1px solid rgba(201, 161, 90, .6);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .8);
  color: var(--bs-ink);
  text-shadow: none;
  text-align: left;
}
/* A gold medallion with the row's icon in it. */
.bs-badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f7e7bf 0%, #d9b46e 55%, #b88f48 100%);
  color: #3b2216;
  box-shadow: 0 6px 14px -8px rgba(59, 34, 22, .8), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.bs-badge svg { width: 19px; height: 19px; }

/* ---- the portrait ---- */
.bs-portrait { margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.bs-portrait-frame {
  width: min(66vw, 290px, calc(var(--bs-svh) * .4));
  aspect-ratio: 3 / 4;
  padding: 6px;
  box-sizing: border-box;
  border-radius: 999px 999px 18px 18px;
  background: linear-gradient(160deg, #f7e7bf 0%, #c9a15a 45%, #ecd3a0 70%, #94702f 100%);
  box-shadow: 0 26px 60px -24px rgba(0, 0, 0, .85);
}
.bs-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 999px 999px 13px 13px;
  background: #2a1b22;
}
.bs-portrait-names {
  margin-top: 14px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 10px;
  font-family: var(--bs-caps);
  font-weight: 700;
  font-size: clamp(24px, 6.8vw, 34px);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.bs-portrait-and {
  font-family: var(--bs-script);
  font-size: 1.1em;
  text-transform: none;
  letter-spacing: 0;
  color: var(--bs-gold-soft);
}
.bs-portrait-caption {
  margin-top: 4px;
  font-family: var(--bs-serif);
  font-style: italic;
  font-size: clamp(17px, 4.6vw, 20px);
}

/* ---- programme ---- */
.bs-prog-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bs-prog-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 12px;
}
.bs-prog-text { min-width: 0; }
.bs-prog-name {
  font-family: var(--bs-caps);
  font-weight: 700;
  font-size: clamp(16px, 4.6vw, 20px);
  letter-spacing: .1em;
  color: var(--bs-maroon);
}
.bs-prog-date {
  margin-top: 1px;
  font-family: var(--bs-serif);
  font-weight: 700;
  font-size: clamp(14.5px, 4vw, 16.5px);
  color: var(--bs-gold-deep);
}
.bs-prog-where {
  margin-top: 1px;
  font-family: var(--bs-serif);
  font-size: clamp(14px, 3.8vw, 15.5px);
  line-height: 1.3;
  color: var(--bs-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bs-prog-where strong { font-weight: 700; color: var(--bs-ink); }
.bs-prog-map {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(166, 120, 50, .6);
  color: var(--bs-maroon);
  background: rgba(243, 224, 180, .4);
  transition: transform .2s ease, background-color .2s ease;
}
.bs-prog-map:hover { background: rgba(243, 224, 180, .8); }
.bs-prog-map:active { transform: scale(.94); }
.bs-prog-map svg { width: 19px; height: 19px; }

/* ---- dress code ---- */
.bs-dress-note {
  max-width: 32ch;
  margin: 0 auto 14px;
  font-family: var(--bs-serif);
  font-style: italic;
  font-size: clamp(17px, 4.6vw, 20px);
  line-height: 1.45;
  white-space: pre-line;
}
.bs-dress-list { display: flex; flex-direction: column; gap: 10px; }
.bs-dress-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 12px;
}
.bs-dress-event {
  font-family: var(--bs-caps);
  font-weight: 700;
  font-size: clamp(13.5px, 3.8vw, 16px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bs-maroon);
}
.bs-dress-what {
  margin-top: 2px;
  font-family: var(--bs-serif);
  font-weight: 600;
  font-size: clamp(16px, 4.3vw, 18px);
  line-height: 1.35;
  color: var(--bs-ink-soft);
}

/* ---- questions ---- */
.bs-faq-list { display: flex; flex-direction: column; gap: 10px; }
.bs-faq { overflow: hidden; }
.bs-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px 11px 11px;
}
.bs-faq summary::-webkit-details-marker { display: none; }
.bs-faq .bs-badge { width: 34px; height: 34px; }
.bs-faq .bs-badge svg { width: 17px; height: 17px; }
.bs-faq-q {
  flex: 1;
  font-family: var(--bs-serif);
  font-weight: 700;
  font-size: clamp(16.5px, 4.5vw, 19px);
  line-height: 1.3;
  color: var(--bs-ink);
}
.bs-faq summary i { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(166, 120, 50, .7); }
.bs-faq summary i::before,
.bs-faq summary i::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 1.5px;
  background: var(--bs-gold-deep);
  transform: translate(-50%, -50%);
  transition: transform .3s ease;
}
.bs-faq summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.bs-faq[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.bs-faq-a { padding: 0 18px 14px 57px; }
.bs-faq[open] .bs-faq-a { animation: bs-open .4s ease; }
.bs-faq-a p { font-family: var(--bs-serif); font-size: clamp(16px, 4.3vw, 18px); line-height: 1.5; color: var(--bs-ink-soft); }
@keyframes bs-open {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
  to { opacity: 1; transform: none; }
}

/* ---- the last page ---- */
.bs-closing-note {
  font-family: var(--bs-serif);
  font-style: italic;
  font-size: clamp(18px, 2.6svh, 24px);
  line-height: 1.4;
  white-space: pre-line;
}
.bs-closing-names .bs-name { font-size: clamp(30px, 5svh, 50px); }
.bs-closing-names .bs-and { width: auto; font-size: clamp(22px, 3.4svh, 32px); }
.bs-made {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: max(10px, 1.8svh);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(236, 211, 160, .5);
  background: rgba(10, 6, 20, .35);
  font-family: var(--bs-sans);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bs-ivory);
  text-decoration: none;
  text-shadow: none;
}
.bs-made:hover { text-decoration: underline; }
.bs-made .credit-mark { width: 16px; height: 16px; border-radius: 4px; }

/* ============================================================== OPENING */

.bs-gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  background: #f4ede3;
  transition: opacity .7s ease;
}
.bs-gate[hidden] { display: none; }
.bs-gate.is-leaving { opacity: 0; pointer-events: none; }
.bs-gate-media { position: absolute; inset: 0; overflow: hidden; }
.bs-gate-poster,
.bs-gate-film,
.bs-cover-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.bs-gate-film { opacity: 0; }
.bs-gate.is-playing .bs-gate-film { opacity: 1; }

.bs-gate-frame {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, calc(var(--bs-svh) * 390 / 844));
  container-type: inline-size;
  pointer-events: none;
  transition: opacity .5s ease;
}
.bs-gate.is-opening .bs-gate-frame { opacity: 0; }

.bs-gate-names {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 17%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  filter: drop-shadow(0 0 12px rgba(255, 250, 242, .95)) drop-shadow(0 0 2px rgba(255, 250, 242, .9));
}
.bs-gate-name {
  font-family: var(--bs-caps);
  font-weight: 700;
  font-size: 11.5cqw;
  line-height: 1.08;
  letter-spacing: .06em;
  text-transform: uppercase;
  max-width: 100%;
  overflow-wrap: anywhere;
  background: linear-gradient(180deg, #8a4a24 0%, #5a2414 42%, #a8743a 72%, #6b2d17 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bs-gate-and {
  font-family: var(--bs-script);
  font-size: 10cqw;
  line-height: 1;
  color: var(--bs-gold-deep);
  margin: -.5cqw 0 .5cqw;
}

.bs-write-in {
  clip-path: inset(-45% 100% -45% -12%);
  animation: bs-write 1.35s cubic-bezier(.62, .04, .32, 1) forwards;
  animation-delay: calc(.35s + var(--w, 0) * .5s);
}
@keyframes bs-write { to { clip-path: inset(-45% -12% -45% -12%); } }

.bs-tap {
  position: absolute;
  left: 30.513%;
  top: 63.744%;
  white-space: nowrap;
  font-family: 'Arizonia', 'Great Vibes', cursive;
  font-size: 9.231cqw;
  line-height: 1.1;
  color: #5a3220;
  text-shadow: 0 0 14px rgba(255, 250, 242, .95), 0 0 3px rgba(255, 250, 242, .9);
  opacity: 0;
  animation: bs-in .9s ease 2s forwards, bs-breathe 2.8s ease-in-out 2.9s infinite;
}
.bs-credit {
  position: absolute;
  left: 0;
  right: 0;
  top: 93.128%;
  display: flex;
  justify-content: center;
  pointer-events: auto;
  font-family: Arial, 'Helvetica Neue', sans-serif;
  font-size: 4.103cqw;
  line-height: 1.2;
  text-decoration: none;
}
.bs-credit-pill {
  display: inline-flex;
  align-items: center;
  gap: 1.8cqw;
  padding: 1.6cqw 3.8cqw;
  border-radius: 999px;
  background: rgba(255, 250, 242, .88);
  border: 1px solid rgba(201, 161, 90, .6);
  box-shadow: 0 6px 18px -8px rgba(59, 34, 22, .5);
  color: #4a2c1d;
  font-weight: 700;
}
.bs-credit:hover .bs-credit-pill span { text-decoration: underline; }
.bs-credit-mark { width: 3.8cqw; height: 3.8cqw; border-radius: 3px; flex: none; }

@keyframes bs-in { to { opacity: 1; } }
@keyframes bs-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.045); opacity: .78; }
}

.bs-cover-still { padding: 0; overflow: hidden; background: #f4ede3; }
.bs-cover-still .bs-gate-frame { position: absolute; }
.bs-cover-still .bs-tap { opacity: 1; animation: none; }

/* ============================================================== RISING */

.bs-rise {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity .95s cubic-bezier(.2, .7, .2, 1),
    transform .95s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 95ms);
}
.bs-rise.is-in { opacity: 1; transform: none; }

/* ========================================================== SCROLL CUE

   A gold ring that turns, a halo that breathes out from it, and two
   chevrons falling through it one after the other -- with the words on a
   small pill beneath. */
.bs-scroll {
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bs-gold-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translateX(-50%);
  transition: opacity .45s ease, transform .45s ease;
}
.bs-scroll-core {
  position: relative;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, rgba(92, 56, 34, .95), rgba(36, 18, 12, .95));
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .7);
}
.bs-scroll-core::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 1.6px;
  background: conic-gradient(from 0deg, #f7e7bf, #b88f48, #fff4d6, #c9a15a, #f7e7bf);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: bs-spin 5s linear infinite;
}
.bs-scroll-ring {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  border-radius: 50%;
  border: 1px solid rgba(236, 211, 160, .8);
  pointer-events: none;
  animation: bs-halo 2.4s ease-out infinite;
}
.bs-scroll-chev {
  position: absolute;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--bs-gold-soft);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: bs-fall 1.8s ease-in-out infinite;
}
.bs-scroll-chev-2 { animation-delay: .9s; }
.bs-scroll-label {
  padding: 3px 11px;
  border-radius: 999px;
  background: rgba(36, 18, 12, .62);
  border: 1px solid rgba(236, 211, 160, .35);
  font-family: var(--bs-caps);
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bs-scroll:hover .bs-scroll-core { box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .7), 0 0 0 4px rgba(236, 211, 160, .2); }
@keyframes bs-spin { to { transform: rotate(360deg); } }
@keyframes bs-halo {
  0% { transform: scale(1); opacity: .85; }
  100% { transform: scale(1.7); opacity: 0; }
}
@keyframes bs-fall {
  0% { transform: translate3d(0, -10px, 0); opacity: 0; }
  35%, 65% { opacity: 1; }
  100% { transform: translate3d(0, 10px, 0); opacity: 0; }
}
.bs-scroll.is-done,
html.bs-sealed .bs-scroll {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 14px);
}

html.bs-sealed .ci-lang {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ============================================================== EDITOR */

/* The editor's preview scrolls, rises and fades exactly as the card does
   (2026-10-02, Ahmad: "in super admin preview, we don't have sticky scroll,
   or scroll down button"). */

/* A photograph's frame keeps its arch in the editor. */
html.ce-editing .bs-portrait-frame.ce-t { border-radius: 50% 50% 12px 12px / 38% 38% 12px 12px; }

/* ============================================================== TABLET */

@media (min-width: 700px) {
  .bs-page { padding-left: 32px; padding-right: 32px; }
  .bs-zone { width: min(100%, 600px); }
  .bs-panel { padding: 18px 26px 20px; }
  .bs-btn { font-size: 10.5px; min-height: 40px; }
}

/* ============================================================= DESKTOP

   A tall film on a wide screen is a band across it. Every picture is cropped
   at the same height (--bs-focus) so the Taj does not move between them. */
@media (min-width: 900px) and (orientation: landscape) {
  .bs-film-poster,
  .bs-film-video,
  .bs-gate-poster,
  .bs-gate-film,
  .bs-cover-poster { object-position: 50% var(--bs-focus, 34%); }

  .bs-hero, .bs-family, .bs-count, .bs-guests, .bs-event, .bs-plain, .bs-closing { padding-top: max(40px, 6svh); }
  .bs-zone { width: min(100%, 820px); }
  .bs-panel { width: min(100%, 760px); padding: 20px 40px 22px; }

  .bs-caps { font-size: clamp(10px, 1.4svh, 13px); }
  .bs-blessing { font-size: clamp(19px, 2.8svh, 28px); }
  .bs-name { font-size: clamp(34px, 5.6svh, 64px); }
  .bs-and { width: min(40vw, 460px); font-size: clamp(28px, 4.4svh, 44px); }
  .bs-kicker { font-size: clamp(17px, 2.6svh, 26px); }
  .bs-fam-grid { width: min(100%, 680px); }
  .bs-fam-parents { font-size: clamp(15px, 2.1svh, 20px); }
  .bs-fam-name { font-size: clamp(15px, 2svh, 19px); }
  .bs-count-row { width: min(100%, 560px); }
  .bs-count-num { font-size: clamp(38px, 6.2svh, 64px); }
  .bs-guests-title { font-size: clamp(40px, 6svh, 60px); }
  .bs-guests-msg { font-size: clamp(17px, 2.2svh, 21px); max-width: 46ch; }
  .bs-event-name { font-size: clamp(36px, 6.2svh, 66px); }
  .bs-event-zone .bs-flower { display: block; }
  .bs-event-when { margin-top: 0; font-size: clamp(17px, 2.4svh, 23px); }
  .bs-event-where { font-size: clamp(15px, 2svh, 19px); }
  .bs-btn { font-size: 11px; min-height: 42px; padding: 10px 18px; }

  .bs-tone-dark .bs-scrim {
    background:
      radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 247, 236, .3) 0%, rgba(255, 247, 236, .1) 55%, rgba(255, 247, 236, 0) 100%),
      linear-gradient(0deg, rgba(40, 20, 10, .3) 0%, rgba(40, 20, 10, 0) 14%);
  }
  .bs-tone-light .bs-scrim {
    background:
      radial-gradient(ellipse 70% 62% at 50% 0%, rgba(10, 6, 20, .6) 0%, rgba(10, 6, 20, .26) 55%, rgba(10, 6, 20, 0) 100%),
      linear-gradient(0deg, rgba(6, 4, 12, .38) 0%, rgba(6, 4, 12, 0) 14%);
  }

  .bs-gate-names { top: 12%; }

  .bs-plain-inner { width: min(100%, 640px); }
  .bs-plain-head { font-size: 30px; }
  .bs-programme .bs-plain-inner { width: min(100%, 1080px); }
  .bs-prog-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
  .bs-prog-row { padding: 16px; }
  .bs-prog-name { font-size: 21px; }
  .bs-prog-date { font-size: 17px; }
  .bs-prog-where { font-size: 16px; }
  .bs-portrait-frame { width: min(380px, calc(var(--bs-svh) * .36)); }
  .bs-portrait-names { font-size: clamp(28px, 4.4svh, 40px); }
  .bs-portrait-caption { font-size: 22px; }
  .bs-dress-note { font-size: 21px; }
  .bs-dress-row { padding: 14px 20px 14px 14px; }
  .bs-dress-event { font-size: 16px; }
  .bs-dress-what { font-size: 19px; }
  .bs-faqs .bs-plain-inner { width: min(100%, 700px); }
  .bs-faq-q { font-size: 20px; }
  .bs-faq-a p { font-size: 18.5px; }
  .bs-scroll { bottom: 20px; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .bs-page { padding-bottom: 84px; }
}

/* ======================================================= RIGHT TO LEFT */

html.ci-rtl .bs-body,
html.ci-rtl .bs-name,
html.ci-rtl .bs-gate-name,
html.ci-rtl .bs-kicker,
html.ci-rtl .bs-caps,
html.ci-rtl .bs-event-name,
html.ci-rtl .bs-plain-head,
html.ci-rtl .bs-guests-title { font-family: var(--ci-lang-font, inherit); }
html.ci-rtl .bs-caps,
html.ci-rtl .bs-kicker,
html.ci-rtl .bs-event-name,
html.ci-rtl .bs-name,
html.ci-rtl .bs-gate-name,
html.ci-rtl .bs-plain-head,
html.ci-rtl .bs-btn,
html.ci-rtl .bs-chip,
html.ci-rtl .bs-scroll-label,
html.ci-rtl .bs-count-label,
html.ci-rtl .bs-fam-label,
html.ci-rtl .bs-event-meta { letter-spacing: 0; text-indent: 0; }
html.ci-rtl .bs-tap {
  left: 8%;
  right: 8%;
  text-align: center;
  font-family: var(--ci-lang-font, serif);
  font-size: 6.4cqw;
  line-height: 1.9;
}
html.ci-rtl .bs-card { text-align: right; }
html.ci-rtl .bs-faq-a { padding: 0 57px 14px 18px; }

/* ======================================================== LESS MOVEMENT */

@media (prefers-reduced-motion: reduce) {
  .bs-rise { opacity: 1; transform: none; transition: none; }
  .bs-write-in { clip-path: none; animation: none; }
  .bs-tap { opacity: 1; animation: none; }
  html.bs-open .bs-film-still.is-on .bs-film-poster,
  .bs-film-video.is-held { animation: none; }
  .bs-scroll-core::before, .bs-scroll-ring, .bs-scroll-chev-2 { animation: none; }
  .bs-scroll-ring { opacity: 0; }
  .bs-scroll-chev { animation: none; opacity: 1; }
  .bs-film, .bs-film-video, .bs-gate { transition-duration: .01ms; }
  html.bs-snap { scroll-snap-type: none; }
}

/* A function that was not filmed: the night, dimmed (.bs-film-dim), with the
   function on the morning's card. One fixed look, whatever it is called. */
.bs-film[data-film="other"] { background: #07050c; }
.bs-film[data-film="other"] .bs-film-poster { opacity: .42; }
.bs-event-other .bs-event-zone.bs-panel { padding: 22px 20px 20px; }
.bs-event-other .bs-event-meta { color: var(--bs-ink); opacity: .75; }

/* ------------------------------------------------- the countdown, scratched
   A gold tablet over each figure (/js/scratch-reveal.js paints it and takes
   it off under a finger); the hint says so, and the date waits until the
   gold is gone -- it would give the answer away. */
.bs-count-cell.scratch-tick { padding: 8px 6px 6px; }
.bs-count-cell .scratch-rub {
  top: 2px; bottom: 2px; left: 5px; right: 5px;
  width: calc(100% - 10px); height: calc(100% - 4px);
  border-radius: 10px;
  box-shadow: 0 6px 14px -8px rgba(59, 34, 22, .7);
  z-index: 2;
}
.bs-count-hint {
  margin: 2px 0 0;
  font-family: var(--bs-caps);
  font-weight: 600;
  font-size: clamp(8.5px, 1.2svh, 10.5px);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bs-gold-deep, #8a6428);
  transition: opacity .5s ease;
}
.bs-count-hint::before { content: '\2726'; margin-right: .6em; }
.scratch-clock.is-rubbed ~ .bs-count-hint { opacity: 0; height: 0; margin: 0; overflow: hidden; }
.bs-count-row ~ .bs-count-date { opacity: 0; transform: translateY(6px); transition: opacity .8s ease .3s, transform .8s ease .3s; }
.scratch-clock.is-rubbed ~ .bs-count-date { opacity: 1; transform: none; }


/* =====================================================================
   BAZM E SHAHI -- its own look over the shared stage
   (everything above is Dastaan e Wisaal's, renamed; this is the palace)

   2026-10-02, Ahmad: one card for every page -- the families, the
   functions, the dress code and the questions all alike -- and every one
   of them see-through, so the films are there behind the words.

   So every page's words sit on the same arched glass jharokha: deep walnut
   at about two-thirds strength, a gold double rule, a gold medallion at its
   crown. Ivory words, gold headings, the names in gold foil. Dark enough
   that every word reads over the brightest sandstone and the busiest
   marigolds; never blurred, because the film behind it is playing.

   Type, chosen to be read on a phone:
     Cinzel        the capitals -- headings, labels, the small print in caps
                   (Marcellus has one weight; asked for bold it was smeared)
     Playfair      italic, for the names and the functions
     Cormorant     the reading text, at 600 and never below 16px
     Jost          the practical lines -- addresses, phone numbers, buttons
   ===================================================================== */

:root {
  --bs-caps: 'Cinzel', 'Marcellus', 'Cormorant Garamond', Georgia, serif;
  --bs-glass-top: rgba(46, 18, 10, .74);
  --bs-glass-bottom: rgba(30, 12, 7, .64);
  --bs-line: rgba(233, 196, 120, .58);
  --bs-line-soft: rgba(233, 196, 120, .24);
  --bs-text: #fbf1e1;
  --bs-text-soft: rgba(251, 241, 225, .84);
  --bs-gold-text: #efcd88;
}

/* Arrivals: short, soft, and not far to travel. */
.bs-rise {
  transform: translate3d(0, 14px, 0);
  transition:
    opacity .7s cubic-bezier(.22, .61, .36, 1),
    transform .7s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
/* The words leaving and arriving with the scroll: a touch of easing on top
   of the scroll itself, so the change between pages is a dissolve. */
.bs-zone { transition: opacity .18s linear; }

/* The hall's picture is light; nothing washes it any lighter now that the
   words are on glass. */
.bs-tone-dark .bs-scrim {
  background: linear-gradient(0deg, rgba(40, 20, 10, .32) 0%, rgba(40, 20, 10, 0) 18%);
}

/* ------------------------------------------------------------- the glass */
.bs-panel,
.bs-event:not(.bs-event-other) .bs-event-zone,
.bs-event-other .bs-event-zone.bs-panel {
  position: relative;
  box-sizing: border-box;
  width: min(100%, 440px);
  padding: max(34px, 4.4svh) clamp(16px, 5vw, 26px) max(20px, 2.6svh);
  border-radius: 50% 50% 22px 22px / 92px 92px 22px 22px;
  background: linear-gradient(180deg, var(--bs-glass-top) 0%, var(--bs-glass-bottom) 100%);
  border: 1px solid var(--bs-line);
  box-shadow:
    0 34px 70px -34px rgba(0, 0, 0, .85),
    inset 0 1px 0 rgba(255, 232, 190, .14);
  color: var(--bs-text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.bs-panel::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50% 50% 17px 17px / 86px 86px 17px 17px;
  border: 1px solid var(--bs-line-soft);
  pointer-events: none;
}
/* The medallion at the crown. */
.bs-panel::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 5px;
  background: linear-gradient(135deg, #fbe6b0 0%, #d8a650 50%, #8f5f22 100%);
  border: 2px solid rgba(40, 15, 8, .9);
  box-shadow: 0 0 0 1px var(--bs-line), 0 8px 16px -6px rgba(0, 0, 0, .7);
}

/* Everything on the glass reads light. */
.bs-panel .bs-caps { color: var(--bs-gold-text); }
.bs-panel .bs-flower { color: var(--bs-gold-text); }
.bs-panel .bs-ico { color: var(--bs-gold-text); }
.bs-panel .bs-and { color: var(--bs-gold-text); }
.bs-panel .bs-orn { color: var(--bs-gold-text); }

/* Foil: on the glass, all of it gold -- the names, the figures, the
   functions. */
.bs-foil,
.bs-foil-gold {
  background: linear-gradient(180deg, #fff3cf 0%, #f1d08a 38%, #cf9a46 66%, #f8dfa2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
}

/* ------------------------------------------------------------------ type */
.bs-caps {
  font-family: var(--bs-caps);
  font-weight: 600;
  font-size: clamp(10.5px, 1.35svh, 12.5px);
  letter-spacing: .18em;
  text-indent: .18em;
  line-height: 1.75;
}
.bs-caps-wide { letter-spacing: .24em; text-indent: .24em; font-size: clamp(10.5px, 1.4svh, 12.5px); }
.bs-panel .bs-caps-wide { color: var(--bs-text-soft); }

.bs-blessing {
  font-size: clamp(20px, 2.8svh, 28px);
  color: #f3d79c;
  margin-bottom: max(4px, .6svh);
}

.bs-kicker,
.bs-plain-head {
  font-family: var(--bs-caps);
  font-weight: 600;
  font-size: clamp(14px, 2svh, 18px);
  letter-spacing: .2em;
  color: var(--bs-gold-text);
  margin-bottom: max(10px, 1.6svh);
}
.bs-kicker .bs-orn, .bs-plain-head .bs-orn { color: var(--bs-gold-text); }

.bs-name,
.bs-portrait-names .bs-foil-gold,
.bs-gate-name {
  font-family: var(--bs-display);
  font-style: italic;
  font-weight: 600;
  text-transform: none;
  letter-spacing: .01em;
}
.bs-name { font-size: clamp(42px, 6.4svh, 72px); line-height: 1.04; padding: 0 .08em; }
.bs-and, .bs-portrait-and, .bs-gate-and { font-family: var(--bs-script); text-transform: none; letter-spacing: 0; }
.bs-and { font-size: clamp(28px, 4.2svh, 44px); }

.bs-flower { width: clamp(18px, 2.4svh, 24px); height: clamp(18px, 2.4svh, 24px); }
.bs-ico { width: 15px; height: 15px; }
.bs-ico-sm { width: 14px; height: 14px; margin-right: 6px; }

/* -------------------------------------------------------------- families */
.bs-fam-grid { margin-top: 0; gap: 0 clamp(8px, 3vw, 22px); align-items: stretch; }
.bs-fam-rule {
  background: linear-gradient(180deg, transparent, var(--bs-line) 14%, var(--bs-line) 86%, transparent) center / 1px 100% no-repeat;
  color: var(--bs-gold-text);
}
.bs-fam-rule .bs-flower-xs { width: 14px; height: 14px; margin: 0; padding: 3px; background: #2b110a; border-radius: 50%; }
.bs-fam-side { padding: 0; border: 0; background: none; border-radius: 0; }
.bs-fam-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid var(--bs-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: var(--bs-caps);
  font-weight: 600;
  font-size: clamp(10px, 1.3svh, 11.5px);
  letter-spacing: .16em;
  color: var(--bs-gold-text);
  white-space: normal;
}
.bs-fam-label .bs-ico { width: 14px; height: 14px; }
.bs-fam-parents {
  margin-top: max(8px, 1.1svh);
  font-family: var(--bs-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(15.5px, 2.05svh, 19px);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--bs-text);
  text-wrap: balance;
}
.bs-fam-people { margin-top: max(10px, 1.3svh); gap: max(8px, 1.1svh); }
.bs-fam-name {
  font-family: var(--bs-serif);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(16px, 2.1svh, 19px);
  line-height: 1.2;
  color: var(--bs-text);
}
.bs-fam-person.is-prominent {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 4px 7px;
  border-radius: 12px;
  background: rgba(239, 205, 136, .12);
  border: 1px solid var(--bs-line);
}
.bs-fam-person.is-prominent .bs-fam-name { color: var(--bs-gold-text); }
.bs-fam-phone {
  max-width: 100%;
  margin-top: 4px;
  padding: 3px 9px;
  border: 1px solid var(--bs-line-soft);
  border-radius: 999px;
  background: rgba(255, 240, 210, .06);
  font-family: var(--bs-sans);
  font-weight: 500;
  font-size: clamp(11.5px, 1.5svh, 13px);
  letter-spacing: .02em;
  color: var(--bs-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bs-fam-phone .bs-ico-sm { width: 11px; height: 11px; margin-right: 5px; }

/* ----------------------------------------------------------- dear guests */
.bs-guests-names { color: var(--bs-gold-text); }
.bs-guests-title {
  margin-top: max(4px, .6svh);
  font-family: var(--bs-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(30px, 4.4svh, 46px);
  line-height: 1.12;
  background: linear-gradient(180deg, #fff3cf 0%, #f1d08a 45%, #cf9a46 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.bs-guests-msg {
  max-width: 34ch;
  margin-top: max(10px, 1.4svh);
  font-family: var(--bs-serif);
  font-weight: 600;
  font-size: clamp(17px, 2.25svh, 20.5px);
  line-height: 1.45;
  color: var(--bs-text);
}
.bs-chips { margin-top: max(14px, 2svh); gap: 8px; }
.bs-chip {
  min-height: 34px;
  padding: 6px 15px;
  border: 1px solid var(--bs-line);
  background: rgba(239, 205, 136, .1);
  color: var(--bs-gold-text);
  font-family: var(--bs-caps);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .14em;
  text-shadow: none;
}
.bs-chip:hover, .bs-chip:focus-visible { background: var(--bs-gold-text); color: #2b110a; }

/* -------------------------------------------------------------- countdown */
.bs-count-row { margin: max(6px, 1svh) 0 max(8px, 1.2svh); }
.bs-count-cell + .bs-count-cell {
  background: linear-gradient(180deg, transparent, var(--bs-line) 25%, var(--bs-line) 75%, transparent) left center / 1px 100% no-repeat;
}
.bs-count-num { font-family: var(--bs-display); font-weight: 600; font-size: clamp(36px, 5.6svh, 56px); }
.bs-count-label { font-family: var(--bs-caps); font-weight: 600; font-size: clamp(9.5px, 1.25svh, 11px); letter-spacing: .14em; color: var(--bs-gold-text); }
.bs-count-hint { color: var(--bs-gold-text); font-size: clamp(10px, 1.3svh, 11.5px); }
.bs-count-date {
  font-family: var(--bs-serif);
  font-weight: 600;
  font-size: clamp(17px, 2.3svh, 21px);
  color: var(--bs-text);
}

/* ---------------------------------------------------------- the functions */
.bs-event-zone { width: min(100%, 440px); }
.bs-event-meta {
  font-family: var(--bs-caps);
  font-weight: 600;
  font-size: clamp(10px, 1.3svh, 11.5px);
  letter-spacing: .22em;
  color: var(--bs-gold-text);
}
.bs-event-other .bs-event-meta { color: var(--bs-gold-text); opacity: 1; }
.bs-event-tag {
  border-color: var(--bs-line);
  background: rgba(239, 205, 136, .12);
  color: var(--bs-gold-text);
}
.bs-event-name {
  margin-top: max(6px, 1svh);
  font-family: var(--bs-display);
  font-style: italic;
  font-weight: 600;
  text-transform: none;
  letter-spacing: .01em;
  text-indent: 0;
  font-size: clamp(40px, 6.2svh, 66px);
  line-height: 1.08;
  padding: 0 .08em;
}
.bs-event-zone .bs-flower { display: block; margin: max(6px, 1svh) auto; }
.bs-event-when {
  margin-top: 0;
  font-family: var(--bs-serif);
  font-weight: 700;
  font-size: clamp(18px, 2.4svh, 22px);
  color: var(--bs-text);
}
.bs-event-where {
  margin-top: max(6px, .9svh);
  font-size: clamp(16px, 2.1svh, 19px);
  color: var(--bs-text);
}
.bs-event-where strong { font-family: var(--bs-serif); font-weight: 700; }
.bs-event-where span {
  margin-top: 2px;
  font-family: var(--bs-sans);
  font-weight: 400;
  font-size: clamp(13px, 1.65svh, 14.5px);
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--bs-text-soft);
  opacity: 1;
}
.bs-event-actions { width: 100%; margin-top: max(14px, 2svh); }
.bs-btn { font-family: var(--bs-sans); font-weight: 500; font-size: 11px; letter-spacing: .12em; }
.bs-btn-solid { color: #2b110a; }
.bs-btn-ghost { border-color: var(--bs-line); color: var(--bs-text); background: rgba(255, 240, 210, .06); }
.bs-btn-ghost:hover { background: rgba(255, 240, 210, .14); }

/* The Baraat's Sehra Bandi, for the groom's side (views/partials/_sehra.ejs):
   two lines in the card's own type ahead of the hall's -- the label in the
   gold capitals, the address set like the hall's. */
.bs-panel .ci-sehra { margin: max(2px, .4svh) 0 max(6px, 1svh); font-family: var(--bs-serif); font-size: clamp(17px, 2.3svh, 21px); line-height: 1.35; }
.bs-panel .ci-sehra-label { font-family: var(--bs-caps); font-size: clamp(10.5px, 1.35svh, 12px); letter-spacing: .2em; color: var(--bs-gold-text); opacity: 1; }
.bs-panel .ci-sehra-when { color: var(--bs-text); font-variant-numeric: lining-nums; }
.bs-panel .ci-sehra-where { margin-top: 1px !important; font-family: var(--bs-sans); font-size: clamp(13px, 1.65svh, 14.5px); line-height: 1.4; color: var(--bs-text-soft); opacity: 1; }
.bs-panel .ci-sehra-hall { margin-top: max(10px, 1.5svh) !important; }

/* -------------------------------------------------------- the night after */
.bs-plain-inner { width: min(100%, 440px); }
.bs-plain-head { font-size: clamp(14px, 2svh, 18px); }

/* A row on the glass: what the dress code and the questions are made of,
   ruled off in gold like the lines of the families. */
.bs-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 2px;
  border-top: 1px solid var(--bs-line-soft);
  text-align: left;
  color: var(--bs-text);
}
.bs-row:last-child { padding-bottom: 2px; }
html.ci-rtl .bs-row { text-align: right; }
.bs-badge {
  width: 38px;
  height: 38px;
  color: #2b110a;
  background: linear-gradient(135deg, #fbe6b0 0%, #d8a650 55%, #9a6a2a 100%);
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.bs-badge svg { width: 19px; height: 19px; }

/* the portrait */
.bs-portrait-frame {
  width: min(56vw, 240px, calc(var(--bs-svh) * .34));
  aspect-ratio: 3 / 4;
  padding: 0;
  border-radius: 50% 50% 12px 12px / 38% 38% 12px 12px;
  border: 2px solid #d8a650;
  background: #2a1b22;
  box-shadow: 0 0 0 5px rgba(43, 17, 10, .7), 0 0 0 6px var(--bs-line), 0 30px 60px -24px rgba(0, 0, 0, .7);
  overflow: hidden;
}
.bs-portrait-img { border-radius: inherit; }
.bs-portrait-names {
  margin-top: max(14px, 2svh);
  font-size: clamp(30px, 8vw, 40px);
  letter-spacing: .01em;
  text-transform: none;
}
.bs-portrait-and { font-size: .95em; color: var(--bs-gold-text); }
.bs-portrait-caption {
  margin-top: 4px;
  font-family: var(--bs-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(18px, 4.8vw, 21px);
  color: var(--bs-text);
}

/* the dress code */
.bs-dress-note {
  max-width: 32ch;
  margin: 0 auto max(12px, 1.6svh);
  font-family: var(--bs-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(17.5px, 4.7vw, 20px);
  line-height: 1.45;
  color: var(--bs-text);
}
.bs-dress-list { gap: 0; }
.bs-dress-event {
  font-family: var(--bs-caps);
  font-weight: 600;
  font-size: clamp(12px, 3.4vw, 13.5px);
  letter-spacing: .16em;
  color: var(--bs-gold-text);
}
.bs-dress-what {
  margin-top: 2px;
  font-family: var(--bs-serif);
  font-weight: 600;
  font-size: clamp(17px, 4.6vw, 19px);
  line-height: 1.35;
  color: var(--bs-text);
}

/* the questions */
.bs-faq-list { gap: 0; }
.bs-faq { display: block; padding: 0; }
.bs-faq summary { padding: 13px 2px; gap: 12px; }
.bs-faq:last-child[open] summary, .bs-faq:last-child:not([open]) summary { padding-bottom: 2px; }
.bs-faq:last-child[open] .bs-faq-a { padding-bottom: 2px; }
.bs-faq .bs-badge { width: 32px; height: 32px; }
.bs-faq .bs-badge svg { width: 17px; height: 17px; }
.bs-faq-q {
  font-family: var(--bs-serif);
  font-weight: 700;
  font-size: clamp(17px, 4.6vw, 19.5px);
  line-height: 1.3;
  color: var(--bs-text);
}
.bs-faq summary i { border-color: var(--bs-line); }
.bs-faq summary i::before, .bs-faq summary i::after { background: var(--bs-gold-text); }
.bs-faq-a { padding: 0 6px 14px 46px; }
.bs-faq-a p {
  font-family: var(--bs-serif);
  font-weight: 600;
  font-size: clamp(16.5px, 4.4vw, 18.5px);
  line-height: 1.5;
  color: var(--bs-text-soft);
}
html.ci-rtl .bs-faq-a { padding: 0 46px 14px 6px; }

/* ------------------------------------------------------------- the last page */
.bs-closing .bs-flower { margin-top: 0; }
.bs-closing-note {
  font-family: var(--bs-serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(19px, 2.6svh, 24px);
  line-height: 1.4;
  color: var(--bs-text);
}
.bs-closing-names { margin-top: max(6px, 1svh); }
.bs-closing-names .bs-name { font-size: clamp(36px, 5.4svh, 56px); }
.bs-closing-names .bs-and { font-size: clamp(24px, 3.4svh, 34px); }
.bs-made {
  margin-top: max(14px, 2svh);
  border-color: var(--bs-line);
  background: rgba(255, 240, 210, .06);
  font-family: var(--bs-sans);
  font-weight: 500;
  font-size: 10.5px;
  color: var(--bs-text);
}
/* The two of them, hand in hand, in the middle of the screen: the last
   page's picture is not dimmed, and on a phone its middle is them. */
.bs-film[data-film="night"] .bs-film-poster { object-position: 50% 50%; }

/* ---------------------------------------------------------------- the doors

   2026-10-02, Ahmad (a screenshot of the names lost on the arch): "when the
   screen size shifts the names or text go up and down and doesn't show on
   every device ... some opacity background behind the text everywhere so
   it's always visible".

   The doors are a photograph cropped to whatever shape the screen is, so
   what is behind any one spot moves -- sandstone on one phone, the carved
   arch on the next, the wood on a laptop. So the words no longer depend on
   it: the names sit on a small arched plaque of the card's own dark glass,
   in gold, and "Tap to Open" on a pill of the same. Readable on anything
   the picture puts behind them. Nothing is playing under them yet, so the
   glass may blur what is behind. */
.bs-gate-names {
  top: 13.5%;
  left: 50%;
  right: auto;
  width: max-content;
  max-width: 96%;
  box-sizing: border-box;
  transform: translateX(-50%);
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 2.4cqw;
  padding: 5.2cqw 5cqw 4cqw;
  border-radius: 50% 50% 4cqw 4cqw / 12cqw 12cqw 4cqw 4cqw;
  background: linear-gradient(180deg, rgba(46, 18, 10, .7), rgba(30, 12, 7, .6));
  border: 1px solid rgba(233, 196, 120, .6);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .75), inset 0 0 0 4px rgba(233, 196, 120, .08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  filter: none;
  opacity: 0;
  animation: bs-in .9s ease .1s forwards;
}
.bs-gate-name {
  font-size: 9.2cqw;
  line-height: 1.15;
  background: linear-gradient(180deg, #fff3cf 0%, #f1d08a 40%, #c8913e 70%, #f6dca0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  padding: 0 .06em;
}
.bs-gate-and { font-size: 7cqw; line-height: 1; color: #f1d08a; margin: 0; }
.bs-gate-names::before,
.bs-gate-names::after {
  content: '';
  flex: 0 0 100%;
  height: 8px;
  background:
    linear-gradient(90deg, transparent, #e2b665 25%, #e2b665 75%, transparent) center / 70% 1.5px no-repeat,
    linear-gradient(45deg, transparent 38%, #e2b665 38% 62%, transparent 62%) center / 9px 9px no-repeat;
  opacity: 0;
  animation: bs-in 1s ease 1.8s forwards;
}
.bs-gate-names::before { margin-bottom: 1.8cqw; }
.bs-gate-names::after { margin-top: 1.6cqw; }

/* "Tap to Open", centred on its own pill of the same glass. */
.bs-tap {
  left: 0;
  right: 0;
  width: max-content;
  margin-inline: auto;
  padding: .6cqw 6cqw 1.4cqw;
  border-radius: 999px;
  background: rgba(30, 12, 7, .58);
  border: 1px solid rgba(233, 196, 120, .5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff3dc;
  text-shadow: none;
}

/* A wide screen draws the frame narrow in the middle of a wide picture:
   the names may run wider than it, and larger. */
@media (min-aspect-ratio: 1/1) {
  .bs-gate-names { top: 10%; max-width: 150%; }
  .bs-gate-name { font-size: 12cqw; }
  .bs-gate-and { font-size: 9cqw; }
}
/* The doors leave slowly, over the card already moving beneath them. */
.bs-gate.is-fading { transition: opacity 1.6s cubic-bezier(.45, 0, .25, 1); }

/* ---------------------------------------------------------------- larger */
@media (min-width: 700px) {
  .bs-panel,
  .bs-event:not(.bs-event-other) .bs-event-zone,
  .bs-event-other .bs-event-zone.bs-panel,
  .bs-plain-inner,
  .bs-event-zone { width: min(100%, 560px); padding: max(40px, 5svh) 34px max(24px, 3svh); }
}
@media (min-width: 900px) and (orientation: landscape) {
  .bs-panel,
  .bs-event:not(.bs-event-other) .bs-event-zone,
  .bs-event-other .bs-event-zone.bs-panel,
  .bs-plain-inner,
  .bs-event-zone {
    width: min(100%, 680px);
    padding: max(42px, 5svh) 48px max(26px, 3svh);
    border-radius: 50% 50% 26px 26px / 120px 120px 26px 26px;
  }
  .bs-panel::before { border-radius: 50% 50% 21px 21px / 114px 114px 21px 21px; }
  .bs-name { font-size: clamp(44px, 6.4svh, 76px); }
  .bs-event-name { font-size: clamp(44px, 6.4svh, 72px); }
  .bs-guests-msg { max-width: 46ch; }
  .bs-fam-grid { width: 100%; }
  .bs-faqs .bs-plain-inner { width: min(100%, 720px); }
}

/* --------------------------------------------- the couple, on a wide screen

   2026-10-03, Ahmad: "make sure all other videos are cropped in a way that
   the couple is visible properly in the web since most videos are in the
   mobile dimensions" -- the same layout, only the crop.

   A tall film on a wide screen is a band across it, a third of its height,
   cut at the same height for every film (--bs-focus, 42%) -- which on the
   functions put the couple at the very bottom of the screen, mostly cut
   off. So each function's film is cut at its own height instead: the
   couple's heads just under the card, as much of them as the band holds
   below it. Measured on each film's first frame (heads, as a fraction of
   the film's height):

     Mehndi   the stage and the dancers   ~55%   crop 57%
     Nikkah   the couple seated, ~57-70%     crop 64%
     Baraat   the couple walking          ~52%   crop 48% (its card is taller,
                                                    with the Sehra Bandi)
     Walima   the couple walking          ~48%   crop 46%

   (A crop of p puts a point y of the film at h * 0.52 down the screen when
   p = (y * R - 0.52 * h) / (R - h), R the film's drawn height; at 16:10 and
   16:9 the answers agree within a point.) The morning's hall keeps the
   design's own crop. */
@media (min-width: 900px) and (orientation: landscape) {
  .bs-film[data-film="mehndi"] { --bs-focus: 57%; }
  .bs-film[data-film="nikkah"] { --bs-focus: 64%; }
  .bs-film[data-film="baraat"] { --bs-focus: 48%; }
  .bs-film[data-film="walima"] { --bs-focus: 46%; }
}

@media (prefers-reduced-motion: reduce) {
  .bs-rise { transform: none; transition: none; }
  .bs-zone { transition: none; }
  .bs-gate-names, .bs-gate-names::before, .bs-gate-names::after { opacity: 1; animation: none; }
}

/* The credit is a longer line now ("Create your own invitation with
   Ceremonia Invites", 2026-10-05): kept compact and centred on the cover,
   in two even lines rather than one word left hanging. */
.bs-credit-pill { max-width: min(300px, 82vw); box-sizing: border-box; font-size: .9em; }
.bs-credit-pill span { text-wrap: balance; text-align: center; line-height: 1.25; }
.bs-made span { text-wrap: balance; text-align: center; }