/* Riad — cedar doors open onto a riad at sunset. Emerald zellige, cedar, gold and cream.
   Phone first: on a computer the invitation is a phone-wide column on a zellige wall. */
@font-face {
  font-family: 'Aref Ruqaa';
  src: url('../assets/fonts/aref-ruqaa-arabic-normal-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Amiri';
  src: url('../assets/fonts/amiri-arabic-normal-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Amiri';
  src: url('../assets/fonts/amiri-arabic-normal-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Amiri';
  src: url('../assets/fonts/amiri-latin-normal-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: 'Amiri Quran';
  src: url('../assets/fonts/amiri-quran-arabic-normal-400.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('../assets/fonts/cormorant-garamond-latin-normal-300-700.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant';
  src: url('../assets/fonts/cormorant-garamond-latin-italic-300-700.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Pinyon';
  src: url('../assets/fonts/pinyon-script-latin-normal-400.woff2') format('woff2');
  font-display: swap;
}

:root {
  --cream: #f8f0e2;
  --cream-2: #f0e3cc;
  --card: #fffaf0;
  --cedar: #5a3218;
  --cedar-dark: #24130a;
  --emerald: #0e5a47;
  --emerald-dark: #093d31;
  --gold: #b48c3c;
  --gold-light: #e6c987;
  --ink: #3a2a1d;
  --col: min(100vw, 480px);
  --bg: var(--cedar-dark);
  --btn-bg: var(--emerald);
  --btn-ink: var(--gold-light);
  --font-text: 'Cormorant', 'Amiri', Georgia, serif;
  --font-text-ar: 'Amiri', 'Cormorant', serif;
  --zellige: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Crect width='56' height='56' fill='%23f3e6cf'/%3E%3Cg fill='%230e5a47'%3E%3Cpath d='M28 6l6.4 15.6L50 28l-15.6 6.4L28 50l-6.4-15.6L6 28l15.6-6.4z'/%3E%3C/g%3E%3Cpath d='M28 15l3.8 9.2L41 28l-9.2 3.8L28 41l-3.8-9.2L15 28l9.2-3.8z' fill='%23c79a45'/%3E%3Ccircle cx='28' cy='28' r='3.2' fill='%23f3e6cf'/%3E%3Cg fill='%23b85c38'%3E%3Ccircle cx='0' cy='0' r='5'/%3E%3Ccircle cx='56' cy='0' r='5'/%3E%3Ccircle cx='0' cy='56' r='5'/%3E%3Ccircle cx='56' cy='56' r='5'/%3E%3C/g%3E%3C/svg%3E");
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Around the column (computers): a soft warm cream with the zellige star drawn in a faint gold line. */
body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23b48c3c' stroke-width='.8' opacity='.28'%3E%3Cpath d='M36 10l7.5 18.5L62 36l-18.5 7.5L36 62l-7.5-18.5L10 36l18.5-7.5z'/%3E%3Ccircle cx='36' cy='36' r='5'/%3E%3Cpath d='M0 0l7 7M72 0l-7 7M0 72l7-7M72 72l-7-7'/%3E%3C/g%3E%3C/svg%3E") center / 72px,
    radial-gradient(120% 90% at 50% 0%, #fbf6ec, #f2e6d2 75%);
  background-attachment: fixed;
  color: var(--ink);
}

/* ——— 1. The doors ——— */
.gate {
  position: fixed;
  z-index: 50;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--col);
  transform: translateX(-50%);
  overflow: hidden;
  background: var(--cedar-dark);
  cursor: pointer;
  transition: opacity 1.4s ease 0.4s;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
/* The stage has the pictures' shape (2:3) and covers the column; the three layers are exactly on top of each other. */
.gate-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(var(--col), 66.667svh);
  height: max(100svh, calc(var(--col) * 1.5));
  transform: translate(-50%, -50%);
  transform-origin: 50% 58%;
  transition: transform 2s cubic-bezier(0.5, 0, 0.3, 1);
}
.gate-stage > img,
.gate-leaf {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}
.gate-court {
  object-fit: cover;
  transform: scale(1.12);
  filter: brightness(1.05);
}
/* The warm light behind the doors, seen through the seam then the doorway. */
.gate-light {
  position: absolute;
  inset: 0;
  background: radial-gradient(38% 46% at 50% 60%, rgba(255, 214, 140, 0.95), rgba(255, 170, 70, 0.45) 45%, transparent 75%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.gate-leaves {
  position: absolute;
  inset: 0;
  perspective: 1500px;
  perspective-origin: 50% 55%;
}
.gate-leaf {
  transition:
    transform 2.2s cubic-bezier(0.42, 0.04, 0.24, 1),
    filter 2.2s ease;
  backface-visibility: hidden;
}
.gate-left {
  transform-origin: 11.52% 50%;
}
.gate-right {
  transform-origin: 88.28% 50%;
}
/* A thin line of light along the seam before the doors open. */
.gate-leaves::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 6%;
  bottom: 2%;
  width: 3px;
  margin-left: -1.5px;
  background: linear-gradient(transparent, rgba(255, 220, 150, 0.95) 20%, rgba(255, 236, 190, 1) 55%, rgba(255, 220, 150, 0.9) 85%, transparent);
  box-shadow: 0 0 18px 6px rgba(255, 196, 110, 0.55);
  opacity: 0;
  transition: opacity 0.5s ease;
}
/* The two brass knockers ring softly to invite the touch. */
.gate-knock {
  position: absolute;
  top: 56.6%;
  width: 7.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(255, 223, 150, 0.9);
  box-shadow: 0 0 16px rgba(255, 200, 110, 0.6);
  transform: translate(-50%, -50%);
  animation: knock 2.4s ease-out infinite;
  pointer-events: none;
}
.gate-knock-l {
  left: 39.6%;
}
.gate-knock-r {
  left: 60.2%;
  animation-delay: 0.5s;
}
@keyframes knock {
  0% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.7);
  }
  70%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.1);
  }
}
.gate-hint {
  position: absolute;
  left: 50%;
  bottom: max(26px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border-radius: 999px;
  background: rgba(36, 19, 10, 0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--gold-light);
  font-size: 17px;
  white-space: nowrap;
  border: 1px solid rgba(230, 201, 135, 0.35);
  animation: hint 2.6s ease-in-out infinite;
  transition: opacity 0.4s ease;
}
html[dir='rtl'] .gate-hint {
  font-family: 'Amiri', serif;
  font-size: 18px;
}
.gate-hint-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 10px var(--gold-light);
}
@keyframes hint {
  50% {
    transform: translateX(-50%) translateY(-4px);
  }
}
/* Touch: the seam lights up, the leaves swing in, then we walk through the doorway. */
.gate.is-open .gate-hint,
.gate.is-open .gate-knock {
  opacity: 0;
  animation: none;
}
.gate.is-open .gate-leaves::after {
  opacity: 1;
}
.gate.is-open .gate-light {
  opacity: 1;
  transition-delay: 0.35s;
}
.gate.is-open .gate-left {
  transform: rotateY(96deg);
  filter: brightness(0.6);
  transition-delay: 0.3s;
}
.gate.is-open .gate-right {
  transform: rotateY(-96deg);
  filter: brightness(0.6);
  transition-delay: 0.3s;
}
.gate.is-open .gate-leaves::after {
  transition-delay: 0s;
}
.gate.is-in .gate-leaves::after {
  opacity: 0;
}
.gate.is-in {
  opacity: 0;
}
.gate.is-in .gate-stage {
  transform: translate(-50%, -50%) scale(1.9);
}
.gate.is-gone {
  display: none;
}

/* ——— 2. The courtyard and the names ——— */
.page {
  position: relative;
  width: var(--col);
  margin: 0 auto;
  background: var(--cream);
  box-shadow: 0 0 70px rgba(120, 80, 40, 0.18);
}
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--cedar-dark);
}
.hero-scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(var(--col), 66.667svh);
  height: max(100svh, calc(var(--col) * 1.5), 840px);
  transform: translate(-50%, -50%) scale(var(--zoom, 1.22));
  transition: transform 3.2s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
html[data-opened] .hero-scene {
  --zoom: 1.04;
}
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Lantern light that breathes (positions of the lanterns in the picture). */
.glow {
  position: absolute;
  width: 26%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 100, 0.55), rgba(255, 160, 60, 0.18) 45%, transparent 70%);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  animation: flicker 3.2s ease-in-out infinite;
}
.glow-1 {
  left: 15%;
  top: 80%;
}
.glow-2 {
  left: 86%;
  top: 76%;
  animation-delay: -1.1s;
}
.glow-3 {
  left: 27%;
  top: 60%;
  width: 16%;
  animation-delay: -2s;
}
.glow-4 {
  left: 73%;
  top: 59%;
  width: 16%;
  animation-delay: -0.6s;
}
@keyframes flicker {
  0%,
  100% {
    opacity: 0.75;
  }
  30% {
    opacity: 1;
  }
  55% {
    opacity: 0.6;
  }
  75% {
    opacity: 0.95;
  }
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(36, 19, 10, 0.55), rgba(36, 19, 10, 0.05) 42%, transparent 60%, rgba(36, 19, 10, 0.55)),
    radial-gradient(120% 70% at 50% 18%, rgba(36, 19, 10, 0.35), transparent 70%);
  pointer-events: none;
}
.hero-text {
  position: absolute;
  z-index: 2;
  top: 9svh;
  left: 0;
  right: 0;
  padding: 0 24px;
  text-align: center;
  color: #fff6e3;
}
.hero-kicker {
  margin: 0 0 10px;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--gold-light);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
html[dir='ltr'] .hero-kicker {
  font-style: italic;
  font-size: 19px;
}
.hero-names {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 400;
  line-height: 1.05;
  background: linear-gradient(170deg, #fff4d6 10%, #f0cf86 45%, #fff0c8 60%, #d9ab55 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 14px rgba(20, 8, 2, 0.55));
}
html[dir='rtl'] .hero-names {
  font-family: 'Aref Ruqaa', 'Amiri', serif;
  font-weight: 700;
  font-size: clamp(56px, 16vw, 78px);
  line-height: 1.3;
}
html[dir='ltr'] .hero-names {
  font-family: 'Pinyon', 'Cormorant', serif;
  font-size: clamp(58px, 16.5vw, 80px);
  line-height: 1.1;
}
.hero-and {
  font-size: 0.5em;
  line-height: 1;
}
html[dir='ltr'] .hero-and {
  font-family: 'Cormorant', serif;
  font-style: italic;
  margin: -4px 0 -2px;
}
.hero-date {
  margin: 14px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Cormorant', serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #fff3dc;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.hero-date::before,
.hero-date::after {
  content: '';
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
}
.hero-text > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 1.4s ease,
    transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html[data-opened] .hero-text > * {
  opacity: 1;
  transform: none;
}
html[data-opened] .hero-kicker {
  transition-delay: 1.6s;
}
html[data-opened] .hero-names {
  transition-delay: 1.9s;
}
html[data-opened] .hero-date {
  transition-delay: 2.3s;
}
.hero-scroll {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 22px;
  width: 22px;
  height: 36px;
  margin-left: -11px;
  border: 1.5px solid rgba(255, 240, 210, 0.75);
  border-radius: 12px;
}
.hero-scroll::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 7px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: #fff0d0;
  animation: wheel 1.8s ease-in-out infinite;
}
@keyframes wheel {
  0% {
    transform: none;
    opacity: 1;
  }
  80%,
  100% {
    transform: translateY(12px);
    opacity: 0;
  }
}
/* Rose petals drifting down the courtyard. */
.petals {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.petal {
  position: absolute;
  top: -6%;
  width: var(--s);
  height: calc(var(--s) * 0.8);
  border-radius: 80% 10% 80% 30%;
  background: radial-gradient(circle at 30% 30%, #ff9db1, #d1324f 60%, #9d1631);
  opacity: 0;
  animation: fall var(--t) linear var(--delay) infinite;
}
@keyframes fall {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  8% {
    opacity: 0.9;
  }
  50% {
    transform: translate3d(var(--sway), 55svh, 0) rotate(180deg);
  }
  90% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(var(--sway) * -0.6), 110svh, 0) rotate(380deg);
  }
}

/* ——— 3. The paper: invitation, verse, countdown, evening, place, answer, blessing ——— */
.paper {
  position: relative;
  background: var(--paper), linear-gradient(var(--cream), var(--cream-2));
  padding-bottom: 8px;
}
.band {
  height: 28px;
  background: var(--zellige) center / 28px;
  border-block: 2px solid var(--gold);
}
.band-end {
  margin-top: 10px;
}
.arch {
  position: relative;
  margin: 34px 22px 0;
  padding: 92px 28px 40px;
  text-align: center;
  background: var(--card);
  border-radius: 50% 50% 20px 20px / 170px 170px 20px 20px;
  box-shadow:
    0 0 0 1px rgba(180, 140, 60, 0.6),
    0 24px 50px -30px rgba(90, 50, 24, 0.45);
}
.arch::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(180, 140, 60, 0.55);
  border-radius: 50% 50% 14px 14px / 162px 162px 14px 14px;
  pointer-events: none;
}
.star {
  position: absolute;
  left: 50%;
  top: 38px;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  background: var(--emerald);
  clip-path: polygon(50% 0, 61% 26%, 85% 15%, 74% 39%, 100% 50%, 74% 61%, 85% 85%, 61% 74%, 50% 100%, 39% 74%, 15% 85%, 26% 61%, 0 50%, 26% 39%, 15% 15%, 39% 26%);
}
.star::after {
  content: '';
  position: absolute;
  inset: 9px;
  background: var(--gold-light);
  clip-path: inherit;
}
.arch-intro {
  margin: 0;
  font-size: 21px;
  line-height: 1.6;
  color: var(--ink);
}
html[dir='rtl'] .arch-intro {
  font-size: 21px;
  line-height: 1.9;
}
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 22px auto;
  max-width: 220px;
}
.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.divider::after {
  transform: scaleX(-1);
}
.divider i {
  width: 9px;
  height: 9px;
  background: var(--gold);
  transform: rotate(45deg);
}
.arch-date {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--emerald);
}
html[dir='ltr'] .arch-date {
  font-weight: 600;
  font-size: 23px;
}
.arch-hour {
  margin: 6px 0 0;
  font-size: 19px;
  color: var(--cedar);
}
.verse {
  margin: 30px 22px 0;
  padding: 30px 22px 24px;
  text-align: center;
  border-radius: 18px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(230, 201, 135, 0.22), transparent 65%),
    #fbf4e6;
  color: var(--emerald);
  box-shadow:
    inset 0 0 0 1px rgba(180, 140, 60, 0.55),
    inset 0 0 0 6px #fbf4e6,
    inset 0 0 0 7px rgba(180, 140, 60, 0.3);
}
.verse blockquote {
  margin: 0;
  font-family: 'Amiri Quran', 'Amiri', serif;
  font-size: 22px;
  line-height: 2.1;
}
.verse figcaption {
  margin-top: 8px;
  font-size: 15px;
  color: var(--gold);
}
.block {
  margin: 0 22px;
  padding: 44px 0 6px;
  text-align: center;
}
.block h2 {
  margin: 0 0 22px;
  font-weight: 400;
  color: var(--emerald);
}
html[dir='rtl'] .block h2 {
  font-family: 'Aref Ruqaa', serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.5;
}
html[dir='ltr'] .block h2 {
  font-family: 'Pinyon', serif;
  font-size: 38px;
  line-height: 1.2;
}
.cd {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
html[dir='rtl'] .cd {
  direction: rtl;
}
.cd-cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding-bottom: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,2 64,15 85,15 85,36 98,50 85,64 85,85 64,85 50,98 36,85 15,85 15,64 2,50 15,36 15,15 36,15' fill='%23fffaf0' stroke='%23b48c3c' stroke-width='2'/%3E%3Cpolygon points='50,9 61,19 81,19 81,39 91,50 81,61 81,81 61,81 50,91 39,81 19,81 19,61 9,50 19,39 19,19 39,19' fill='none' stroke='%23b48c3c' stroke-width='.8' opacity='.6'/%3E%3C/svg%3E") center / 100% no-repeat;
  filter: drop-shadow(0 6px 10px rgba(90, 50, 24, 0.16));
}
.cd-num {
  position: relative;
  z-index: 1;
  font-family: 'Cormorant', serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--emerald);
  font-variant-numeric: tabular-nums;
  align-self: end;
}
.cd-unit {
  position: relative;
  z-index: 1;
  align-self: start;
  margin-top: 2px;
  font-size: 13px;
  color: var(--cedar);
}
.prog {
  position: relative;
  margin: 0 auto;
  padding: 0;
  max-width: 340px;
  list-style: none;
}
.prog::before {
  content: '';
  position: absolute;
  inset-inline-start: 72px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(transparent, var(--gold) 12%, var(--gold) 88%, transparent);
}
.prog-item {
  position: relative;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 22px;
  align-items: center;
  padding: 13px 0;
  text-align: start;
}
.prog-star {
  position: absolute;
  inset-inline-start: 66px;
  width: 13px;
  height: 13px;
  background: var(--emerald);
  clip-path: polygon(50% 0, 61% 26%, 85% 15%, 74% 39%, 100% 50%, 74% 61%, 85% 85%, 61% 74%, 50% 100%, 39% 74%, 15% 85%, 26% 61%, 0 50%, 26% 39%, 15% 15%, 39% 26%);
}
.prog-time {
  font-family: 'Cormorant', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--gold);
  text-align: end;
  font-variant-numeric: tabular-nums;
}
html[dir='rtl'] .prog-time {
  font-family: 'Amiri', 'Cormorant', serif;
  font-size: 18px;
}
.prog-label {
  font-size: 20px;
  color: var(--ink);
}
.prog-item[data-reveal] {
  transition-delay: calc(var(--i) * 0.12s);
}
.venue {
  padding-top: 40px;
}
.venue-window {
  width: 170px;
  height: 210px;
  margin: 0 auto 20px;
  overflow: hidden;
  border-radius: 85px 85px 10px 10px;
  box-shadow:
    0 0 0 4px var(--card),
    0 0 0 5px var(--gold),
    0 18px 30px -18px rgba(90, 50, 24, 0.6);
}
.venue-window img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}
.venue-name {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: var(--cedar);
}
html[dir='rtl'] .venue-name {
  font-family: 'Aref Ruqaa', serif;
  font-size: 30px;
}
.venue-city {
  margin: 2px 0 18px;
  font-size: 19px;
  color: var(--ink);
  opacity: 0.8;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.btn {
  background: linear-gradient(180deg, #13705a, var(--emerald));
  color: var(--gold-light);
  box-shadow:
    inset 0 0 0 1px rgba(230, 201, 135, 0.5),
    0 12px 24px -14px rgba(9, 61, 49, 0.9);
}
.btn svg {
  width: 20px;
  height: 20px;
}
.closing {
  margin: 30px 22px 0;
  padding: 10px 0 30px;
  text-align: center;
}
.closing-text {
  text-wrap: balance;
  margin: 0;
  font-size: 23px;
  line-height: 1.7;
  color: var(--emerald);
}
html[dir='rtl'] .closing-text {
  font-family: 'Aref Ruqaa', serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.8;
}
html[dir='ltr'] .closing-text {
  font-style: italic;
}
.closing-names {
  margin: 16px 0 0;
  font-size: 20px;
  color: var(--gold);
  letter-spacing: 0.04em;
}
html[dir='ltr'] .closing-names {
  font-family: 'Pinyon', serif;
  font-size: 34px;
  letter-spacing: 0;
}
html[dir='rtl'] .closing-names {
  font-family: 'Aref Ruqaa', serif;
  font-weight: 700;
  font-size: 26px;
}

/* On a computer, the floating buttons stay at the edge of the column. */
@media (min-width: 520px) {
  .inv-controls {
    inset-inline-end: calc(50% - 240px + 16px);
  }
}