/* ==========================================================================
   SECTIONS
   ========================================================================== */

/* ---- Hero ----------------------------------------------------------------*/

.hero {
  min-block-size: 100svh;
  display: grid;
  /* Card fills the first row, cue sits in the second. Keeping the cue in
     flow means it can never land on top of the verse when the card grows
     taller than the viewport. */
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  /* The card carries its own engraved frame, so the section needs far less
     padding than a normal hero — this is the single biggest saving toward
     fitting the invitation on one screen. */
  padding-block: clamp(0.875rem, 3svh, 2.5rem) clamp(0.625rem, 2svh, 1.5rem);
  position: relative;
  overflow: hidden;
}

.hero__card {
  text-align: center;
  inline-size: min(100% - 2rem, 44rem);
  /* Without this the card hugs the inline-start edge of .shell and every
     pixel of slack piles up on one side — which in RTL means the frame sits
     hard against the right margin. A constrained inline-size inside a wider
     parent always needs the auto margins to stay centred. */
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.hero__basmala {
  font-family: var(--ff-ar-head);
  font-size: min(clamp(.9375rem, 3.4vw, 1.375rem), 2.6svh);
  line-height: 2;
  color: var(--gold-dark);
  margin-block-end: clamp(.5rem, 1.6svh, 1.5rem);
}

.hero__invitation {
  font-family: var(--ff-head);
  font-size: min(var(--fs-h3), 2.6svh);
  color: var(--ink-soft);
  margin-block: clamp(.5rem, 1.4svh, 1rem);
  text-wrap: balance;
}

/* Aref Ruqaa Ink carries long sweeping descenders — the classic failure with
   this face is clipping them. Generous line-height and block padding here
   are load-bearing, not decorative.                                       */
.hero__names {
  font-family: var(--ff-display);
  font-size: var(--fs-names);
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  line-height: 1.3;
  padding-block: .1em .26em;
  margin-block: clamp(.125rem, .6svh, .5rem);
  overflow: visible;
}
:lang(en) .hero__names { line-height: 1.15; letter-spacing: .04em; padding-block: .1em; }

.hero__family {
  font-family: var(--ff-head);
  font-size: clamp(1.125rem, 4.4vw, 1.75rem);
  font-weight: 400;
  line-height: 1.6;
  padding-block: .1em .22em;
  margin-block-start: -.25em;
}
.hero__family[hidden] { display: none; }

.hero__date {
  font-family: var(--ff-ui);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: .12em;
  text-shadow: var(--deboss);
}
:lang(ar) .hero__date { letter-spacing: 0; }

.hero__hijri {
  font-family: var(--ff-head);
  font-size: var(--fs-small);
  color: var(--ink-faint);
  margin-block-start: var(--sp-1);
}

.hero__verse {
  font-family: var(--ff-ar-head);
  font-size: min(var(--fs-small), 2.1svh);
  line-height: 1.95;
  color: var(--ink-soft);
  max-inline-size: 40ch;
  margin-inline: auto;
  margin-block-start: clamp(.625rem, 2svh, 1.5rem);
}
:lang(en) .hero__verse { font-family: var(--ff-en-head); font-style: italic; line-height: 1.8; }

.hero__verse-ref {
  display: block;
  font-family: var(--ff-ui);
  font-size: var(--fs-micro);
  color: var(--ink-faint);
  margin-block-start: var(--sp-2);
  letter-spacing: .16em;
}
:lang(ar) .hero__verse-ref { letter-spacing: 0; }

.scroll-cue {
  margin-block-start: clamp(.625rem, 1.8svh, 1.75rem);
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  color: var(--ink-faint);
  font-size: var(--fs-micro);
  letter-spacing: .2em;
  z-index: 1;
}
:lang(ar) .scroll-cue { letter-spacing: 0; }

.scroll-cue__line {
  inline-size: 1px;
  block-size: clamp(1.25rem, 3.2svh, 2.5rem);
  background: linear-gradient(to bottom, var(--rule), transparent);
  animation: cue-slide 2.6s var(--ease) infinite;
  transform-origin: top;
}

@keyframes cue-slide {
  0%      { transform: scaleY(0);   opacity: 0; }
  35%     { transform: scaleY(1);   opacity: 1; }
  100%    { transform: scaleY(1);   opacity: 0; }
}

/* ---- Countdown -----------------------------------------------------------*/

.countdown__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.625rem, 2.6vw, 1.25rem);
  max-inline-size: 34rem;
  margin-inline: auto;
  margin-block-start: var(--sp-6);
}

.cd-cell {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--sp-1);
  padding-block: clamp(.875rem, 3.5vw, 1.5rem);
  padding-inline: var(--sp-2);
  border: 1px solid var(--rule-soft);
  background: linear-gradient(var(--paper), var(--paper-2));
  box-shadow: var(--lift);
}

.cd-cell::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid var(--rule-faint);
  pointer-events: none;
}

/* Fixed min-inline-size + tabular figures: digits must not shove the layout
   around once a second.                                                   */
.cd-cell__num {
  font-family: var(--ff-head);
  font-size: clamp(1.6rem, 8vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  min-inline-size: 2.4ch;
  text-align: center;
}

/* A digit that simply swaps reads as a glitch; a short lift sells it as a
   mechanism turning over. */
.cd-cell__num.is-ticking { animation: digit-turn .42s var(--ease); }

@keyframes digit-turn {
  0%   { transform: translateY(0)     rotateX(0deg);   opacity: 1; }
  45%  { transform: translateY(-.14em) rotateX(38deg); opacity: .25; }
  100% { transform: translateY(0)      rotateX(0deg);  opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cd-cell__num.is-ticking { animation: none; }
}

.cd-cell__label {
  font-family: var(--ff-ui);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
:lang(ar) .cd-cell__label { letter-spacing: 0; text-transform: none; }

.countdown__today {
  text-align: center;
  font-family: var(--ff-head);
  font-size: var(--fs-h2);
  margin-block-start: var(--sp-6);
}

/* ---- Schedule ------------------------------------------------------------*/

/* One grid for the whole list, not one per row.
   Each <li> used to be its own grid container, so the `auto` time column was
   measured against that row's text alone — «١٢:٠٠ ص» is wider than «٨:٣٠ م»,
   which pushed its marker out of line with the others. Subgrid makes every
   row borrow the list's tracks, so the widest time sets one column width and
   the diamonds line up. */
.schedule {
  display: grid;
  grid-template-columns: auto auto 1fr;
  column-gap: var(--sp-4);
  margin-block-start: var(--sp-7);
  max-inline-size: 32rem;
  margin-inline: auto;
}

.schedule__item {
  grid-column: 1 / -1;
  display: grid;
  /* Fallback for engines without subgrid: own tracks, kept in line by the
     fixed minimum on .schedule__time below. */
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: var(--sp-4);
  padding-block: clamp(.875rem, 3vw, 1.25rem);
}

@supports (grid-template-columns: subgrid) {
  .schedule__item {
    grid-template-columns: subgrid;
    gap: 0;
    column-gap: var(--sp-4);
  }
}

.schedule__time {
  font-family: var(--ff-head);
  font-size: var(--fs-h3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  /* Room for the longest form — «١٢:٠٠ ص» / «12:00 am» — so the fallback
     path lines up too. */
  min-inline-size: 7ch;
  text-align: end;
  color: var(--gold-dark);
}

/* The connecting spine. Because it is drawn with a pseudo-element on the
   marker column, it mirrors with the grid automatically.                  */
.schedule__marker {
  position: relative;
  inline-size: 11px;
  block-size: 11px;
  display: grid;
  place-items: center;
}

.schedule__marker::before {
  content: '';
  inline-size: 7px;
  block-size: 7px;
  rotate: 45deg;
  border: 1px solid var(--gold-deep);
  background: var(--paper);
  transition: background var(--dur) var(--ease), rotate var(--dur) var(--ease);
}

.schedule__item.is-visible .schedule__marker::before {
  background: var(--gold);
  rotate: 135deg;
}

.schedule__item:not(:last-child) .schedule__marker::after {
  content: '';
  position: absolute;
  inset-block-start: calc(50% + 9px);
  block-size: calc(100% + clamp(1.75rem, 6vw, 2.5rem) - 18px);
  inline-size: 1px;
  background: var(--rule-soft);
}

.schedule__label {
  font-family: var(--ff-head);
  font-size: var(--fs-h3);
  color: var(--ink);
  text-align: start;
}

/* ---- Venue ---------------------------------------------------------------*/

.venue {
  text-align: center;
  margin-block-start: var(--sp-6);
}

.venue__motif {
  inline-size: min(100%, 26rem);
  margin-inline: auto;
  margin-block-end: var(--sp-5);
  color: var(--gold-deep);
  opacity: .8;
}

.venue__name {
  font-family: var(--ff-head);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--ink);
  text-shadow: var(--deboss);
}

.venue__address {
  color: var(--ink-soft);
  font-size: var(--fs-small);
  margin-block-start: var(--sp-1);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-block-start: var(--sp-6);
}

/* ---- Form ----------------------------------------------------------------*/

.rsvp { max-inline-size: 34rem; margin-inline: auto; }

.form { display: grid; gap: var(--sp-5); margin-block-start: var(--sp-6); }

.field { display: grid; gap: var(--sp-2); }

.field__label {
  font-family: var(--ff-ui);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-soft);
}

.field__control {
  inline-size: 100%;
  min-block-size: 3rem;
  padding-inline: var(--sp-4);
  padding-block: .75rem;
  border: 1px solid var(--rule-soft);
  background: rgba(255, 253, 249, .8);
  color: var(--ink);
  font-family: var(--ff-ui);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.field__control:hover  { border-color: var(--rule); }
.field__control:focus  { border-color: var(--gold); background: #FFFDF9; outline: none; }
.field__control::placeholder { color: var(--ink-faint); opacity: .7; }

textarea.field__control { min-block-size: 6.5rem; resize: vertical; line-height: 1.8; }

.choice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

.choice__option { position: relative; }
.choice__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.choice__face {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 3.25rem;
  padding-inline: var(--sp-3);
  text-align: center;
  border: 1px solid var(--rule-soft);
  background: rgba(255, 253, 249, .8);
  color: var(--ink-soft);
  font-size: var(--fs-small);
  line-height: 1.4;
  transition: all var(--dur-fast) var(--ease);
}
.choice__input:hover + .choice__face { border-color: var(--rule); }
.choice__input:focus-visible + .choice__face { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.choice__input:checked + .choice__face {
  border-color: var(--gold-dark);
  background: linear-gradient(120deg, var(--gold-dark), var(--gold) 50%, var(--gold-deep));
  color: var(--paper);
  text-shadow: 0 1px 1px rgba(58,42,16,.35);
  box-shadow: var(--lift);
}

/* Honeypot — invisible to people, irresistible to bots. Kept out of the
   accessibility tree as well as out of sight. */
.hp {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

.form__error {
  min-block-size: 1.25rem;
  font-size: var(--fs-small);
  color: #9B3B2E;
  text-align: center;
}
.form__error:empty { min-block-size: 0; }

.form__note {
  text-align: center;
  font-size: var(--fs-micro);
  color: var(--ink-faint);
}

/* ---- RSVP confirmation ---------------------------------------------------*/

.confirmed {
  text-align: center;
  margin-block-start: var(--sp-6);
}

.confirmed__mark {
  inline-size: clamp(56px, 16vw, 76px);
  margin-inline: auto;
  margin-block-end: var(--sp-4);
  color: var(--gold-deep);
}

.confirmed__text {
  font-family: var(--ff-head);
  font-size: var(--fs-h3);
  color: var(--ink);
}

.confirmed__edit {
  margin-block-start: var(--sp-4);
  background: none;
  border: 0;
  border-block-end: 1px solid var(--rule);
  padding: 0 0 2px;
  color: var(--ink-faint);
  font-size: var(--fs-small);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.confirmed__edit:hover { color: var(--gold-dark); border-color: var(--gold); }

/* ---- Wishes --------------------------------------------------------------*/

.wishes__list {
  display: grid;
  gap: var(--sp-4);
  margin-block-start: var(--sp-6);
  max-inline-size: 40rem;
  margin-inline: auto;
}

.wish {
  position: relative;
  padding: clamp(1.125rem, 4vw, 1.75rem);
  border: 1px solid var(--rule-soft);
  background: linear-gradient(var(--paper), var(--paper-2));
  box-shadow: var(--lift);
}

.wish::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid var(--rule-faint);
  pointer-events: none;
}

.wish__text {
  font-family: var(--ff-head);
  font-size: var(--fs-body);
  line-height: 1.9;
  color: var(--ink);
}

.wish__from {
  display: block;
  margin-block-start: var(--sp-3);
  font-family: var(--ff-ui);
  font-size: var(--fs-small);
  color: var(--gold-dark);
}
.wish__from::before { content: '— '; }

.wishes__empty {
  text-align: center;
  color: var(--ink-faint);
  font-size: var(--fs-small);
  margin-block-start: var(--sp-5);
}

/* ---- Footer --------------------------------------------------------------*/

.footer {
  text-align: center;
  padding-block: var(--sp-8) var(--sp-7);
}

.footer__closing {
  font-family: var(--ff-ar-head);
  font-size: var(--fs-h3);
  line-height: 2;
  color: var(--gold-dark);
  max-inline-size: 34ch;
  margin-inline: auto;
}
:lang(en) .footer__closing { font-family: var(--ff-en-head); font-style: italic; }

.footer__contact {
  margin-block-start: var(--sp-5);
  font-size: var(--fs-small);
  color: var(--ink-faint);
}
.footer__contact a {
  color: var(--gold-dark);
  text-decoration: none;
  border-block-end: 1px solid var(--rule-soft);
}
.footer__contact a:hover { border-color: var(--gold); }

/* ---- Narrow phones -------------------------------------------------------*/

@media (max-width: 22rem) {
  .choice { grid-template-columns: 1fr; }
}

@media (max-width: 26rem) {
  .countdown__grid { gap: .375rem; }
  .cd-cell { padding-inline: var(--sp-1); }
  .schedule__item { gap: var(--sp-3); }
}

/* ---- Confirmation slider -------------------------------------------------
   A percentage the guest drags rather than a number they type. Built on a
   real <input type="range"> so keyboard, screen reader and touch all work;
   the native control is made transparent and the gold track drawn beneath.
   ------------------------------------------------------------------------- */

.slider {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
}

.slider__value {
  display: flex;
  align-items: baseline;
  gap: .1em;
  font-family: var(--ff-head);
  font-weight: 700;
  line-height: 1;
}

.slider__num {
  font-size: clamp(2.5rem, 12vw, 3.5rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-inline-size: 3.2ch;
  text-align: center;
}

.slider__pct {
  font-size: clamp(1rem, 4vw, 1.35rem);
  color: var(--gold-deep);
}

.slider__track {
  position: relative;
  inline-size: 100%;
  block-size: 2.75rem;
  display: grid;
  align-items: center;
}

/* The engraved groove */
.slider__track::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  block-size: 6px;
  border: 1px solid var(--rule-soft);
  background: var(--paper-3);
  box-shadow: inset 0 1px 2px rgba(88, 66, 28, .16);
}

/* The gold that has been filled in. Width is set from JS; because the track
   is a flow-relative box, the fill is anchored to the inline start and so
   grows rightward in English and leftward in Arabic without extra code. */
.slider__fill {
  position: absolute;
  inset-inline-start: 0;
  block-size: 6px;
  inline-size: 100%;
  background: var(--foil);
  background-size: 250% 100%;
  animation: foil-sweep 9s var(--ease) infinite;
  transition: inline-size .12s linear;
  pointer-events: none;
}

.slider__input {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.slider__input::-webkit-slider-runnable-track {
  block-size: 6px;
  background: transparent;
}
.slider__input::-moz-range-track {
  block-size: 6px;
  background: transparent;
}

/* A seal-like knob rather than a browser default */
.slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  inline-size: 2rem;
  block-size: 2rem;
  margin-block-start: -.8125rem;
  border-radius: 50%;
  border: 1px solid var(--gold-dark);
  background:
    radial-gradient(circle at 36% 30%, #F4E3B4, #C6A15B 46%, #8C6A2F 78%, #6F5222);
  box-shadow: 0 2px 8px rgba(110, 82, 34, .35);
  cursor: grab;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.slider__input::-moz-range-thumb {
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  border: 1px solid var(--gold-dark);
  background:
    radial-gradient(circle at 36% 30%, #F4E3B4, #C6A15B 46%, #8C6A2F 78%, #6F5222);
  box-shadow: 0 2px 8px rgba(110, 82, 34, .35);
  cursor: grab;
}

.slider__input:hover::-webkit-slider-thumb { transform: scale(1.08); }
.slider__input:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.02); }
.slider__input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--gold-deep);
}
.slider__input:focus-visible { outline: none; }

.slider__word {
  font-family: var(--ff-ui);
  font-size: var(--fs-small);
  color: var(--ink-soft);
  text-align: center;
  min-block-size: 1.6em;
  transition: color var(--dur-fast) var(--ease);
}
.slider.is-certain .slider__word { color: var(--gold-dark); font-weight: 500; }

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

/* ---- Guest stepper -------------------------------------------------------
   A native number input always renders Latin digits, which reads wrong in an
   otherwise fully Arabic-Indic page. The real input stays for keyboard and
   assistive tech; the buttons and the localised readout sit in front of it.
   ------------------------------------------------------------------------- */

.stepper {
  display: grid;
  grid-template-columns: 3rem 1fr 3rem;
  align-items: center;
  gap: var(--sp-2);
  border: 1px solid var(--rule-soft);
  background: rgba(255, 253, 249, .8);
  padding: var(--sp-2);
}

.stepper__btn {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  padding: 0;
  border: 1px solid var(--rule-soft);
  background: linear-gradient(var(--paper), var(--paper-2));
  color: var(--gold-dark);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.stepper__btn svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.stepper__btn:hover { border-color: var(--gold); }
.stepper__btn:active { transform: scale(.94); }
.stepper__btn[disabled] { opacity: .35; cursor: not-allowed; }

.stepper__value {
  font-family: var(--ff-head);
  font-size: clamp(1.0625rem, 4.2vw, 1.375rem);
  line-height: 1.4;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--gold-dark);
  text-shadow: var(--deboss);
}

/* Visually replaced by the readout, but still focusable and announced. */
.stepper__input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.stepper__input:focus-visible {
  position: static;
  inline-size: auto;
  block-size: auto;
  clip-path: none;
  margin: 0;
  text-align: center;
  border: 0;
  background: transparent;
}

/* ---- Very short viewports (a phone in landscape) -------------------------
   Under ~520px of height there is no honest way to show the verse, the full
   card and the scroll cue at a legible size. The verse is the one piece that
   is beautiful rather than load-bearing, so it stands down here and returns
   the moment the phone is upright again.
   ------------------------------------------------------------------------- */

@media (max-height: 520px) {
  .hero__verse,
  .scroll-cue { display: none; }

  .hero { padding-block: .5rem .5rem; }
  .hero__basmala { margin-block-end: .375rem; }
}

/* ==========================================================================
   THE CARD — the formal invitation wording
   ========================================================================== */

.card__line {
  font-family: var(--ff-head);
  font-size: min(clamp(.9375rem, 3.2vw, 1.25rem), 2.4svh);
  line-height: 1.9;
  color: var(--ink-soft);
  margin-block: .1em;
}

.card__line--lead { color: var(--ink-faint); }

.card__host {
  font-family: var(--ff-display);
  font-size: min(clamp(1.25rem, 5.2vw, 2rem), 3.6svh);
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
  text-shadow: var(--deboss);
  margin-block: .12em .22em;
}

/* الخط الفارسي — Nastaliq.
   This face cascades downward within a single line, so it needs far more
   vertical room than any other script here; at a normal line-height the
   descenders of one word collide with the word below. It also sets very
   wide, so the size stays modest and the line is allowed to wrap. */
.card__name {
  font-family: var(--ff-ar-nastaliq);
  font-size: min(clamp(1.375rem, 6.4vw, 2.75rem), 5.2svh);
  font-weight: 400;
  line-height: 2.35;
  padding-block: .32em .5em;
  margin-block: .1em;
  letter-spacing: 0;
}
:lang(en) .card__name {
  font-family: var(--ff-en-display);
  font-size: min(clamp(1.25rem, 5.4vw, 2.25rem), 4.4svh);
  line-height: 1.35;
  letter-spacing: .04em;
  padding-block: .1em .2em;
}

.card__on { color: var(--ink-faint); margin-block: 0; }

.card__bride {
  font-family: var(--ff-head);
  font-size: min(clamp(1.0625rem, 4.2vw, 1.625rem), 3svh);
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink);
  text-shadow: var(--deboss);
  margin-block-start: .1em;
}

.card__venue {
  font-family: var(--ff-ui);
  font-size: min(var(--fs-small), 2.1svh);
  color: var(--ink-soft);
  margin-block-start: var(--sp-2);
  display: flex;
  flex-wrap: wrap;
  gap: .4em;
  justify-content: center;
}
.card__venue-sep { color: var(--gold-deep); }

/* ---- The groom's own line ------------------------------------------------*/

.personal {
  font-family: var(--ff-head);
  font-size: clamp(1.125rem, 4.4vw, 1.75rem);
  line-height: 2;
  text-align: center;
  color: var(--ink);
  max-inline-size: 34ch;
  margin-inline: auto;
  text-wrap: balance;
}

/* ==========================================================================
   GETTING THERE — the map
   ========================================================================== */

.map {
  margin-block: var(--sp-6);
  border: 1px solid var(--rule-soft);
  background: linear-gradient(var(--paper), var(--paper-2));
  box-shadow: var(--lift);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  position: relative;
}

.map__poster {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 0;
  background: none;
  color: var(--gold-dark);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.map__poster:hover { background: rgba(140, 106, 47, .05); }

.map__motif { inline-size: clamp(48px, 14vw, 72px); block-size: auto; aspect-ratio: 1; }

.map__label {
  font-family: var(--ff-ui);
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

.map iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

/* ==========================================================================
   DISCOVER MAKKAH
   ========================================================================== */

.facts {
  display: grid;
  gap: var(--sp-4);
  margin-block-start: var(--sp-6);
  max-inline-size: 32rem;
  margin-inline: auto;
}

.fact {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  padding: clamp(1.125rem, 4vw, 1.75rem);
  border: 1px solid var(--rule-soft);
  background: linear-gradient(var(--paper), var(--paper-2));
  box-shadow: var(--lift);
  text-align: center;
}
.fact::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid var(--rule-faint);
  pointer-events: none;
}

.fact__label {
  font-family: var(--ff-ui);
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
:lang(ar) .fact__label { letter-spacing: 0; text-transform: none; font-size: var(--fs-small); }

.fact__value {
  font-family: var(--ff-head);
  font-size: clamp(1.75rem, 8vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--gold-dark);
}

.fact__note {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  max-inline-size: 30ch;
}

.subhead {
  font-family: var(--ff-head);
  font-size: var(--fs-h3);
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  margin-block-start: var(--sp-7);
  text-shadow: var(--deboss);
}

.distances {
  display: grid;
  gap: var(--sp-3);
  margin-block-start: var(--sp-5);
  max-inline-size: 34rem;
  margin-inline: auto;
}

.distance {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: var(--sp-4);
  row-gap: var(--sp-1);
  padding-block: clamp(.75rem, 2.6vw, 1rem);
  border-block-end: 1px solid var(--rule-faint);
}
.distance:last-child { border-block-end: 0; }

.distance__km {
  font-family: var(--ff-head);
  font-size: var(--fs-h3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gold-dark);
  min-inline-size: 6ch;
  text-align: end;
}
.distance__km small {
  font-size: .6em;
  font-weight: 400;
  color: var(--ink-faint);
  margin-inline-start: .25em;
}

.distance__city {
  font-family: var(--ff-head);
  font-size: var(--fs-h3);
  color: var(--ink);
  text-align: start;
}

.distance__by {
  grid-column: 2;
  font-size: var(--fs-small);
  color: var(--ink-soft);
  text-align: start;
}

@media (max-width: 26rem) {
  .distance { grid-template-columns: 1fr; }
  .distance__km { text-align: start; }
  .distance__by { grid-column: 1; }
}

/* Nastaliq is a far finer stroke than Ruqaa, and the foil gradient's light
   stops erase it at display size — the name faded almost to nothing on ivory.
   Solid deep gold with a letterpress deboss instead of moving leaf. */
.card__name.foil {
  background-image: none;
  animation: none;
  color: var(--gold-dark);
  -webkit-text-fill-color: var(--gold-dark);
  text-shadow: var(--deboss);
}

/* ---- The day and both calendars ------------------------------------------*/

.card__day {
  font-family: var(--ff-head);
  font-size: min(clamp(1.125rem, 4.4vw, 1.625rem), 3svh);
  font-weight: 700;
  color: var(--ink);
  text-shadow: var(--deboss);
  margin-block-start: var(--sp-2);
}

/* Hijri then Gregorian, each on its own line, as a formal card sets them.
   Side by side they wrap on a phone and strand the separator. */
.card__dates {
  display: grid;
  justify-items: center;
  gap: .1em;
  font-family: var(--ff-head);
  font-size: min(var(--fs-body), 2.4svh);
  color: var(--ink-soft);
  margin-block-start: .2em;
}
.card__date-sep { display: none; }

/* ==========================================================================
   THE WELCOME POEM
   ========================================================================== */

.poem__intro {
  font-family: var(--ff-ui);
  font-size: var(--fs-small);
  color: var(--ink-faint);
  text-align: center;
  margin-block-end: var(--sp-6);
}

.poem {
  display: grid;
  gap: clamp(.875rem, 3vw, 1.5rem);
  max-inline-size: 44rem;
  margin-inline: auto;
}

/* One بيت per row. On a wide screen the two hemistichs sit side by side the
   way the verse is set on a page; on a phone they stack, but stay visually
   one unit so a couplet never reads as two unrelated lines. */
.poem__verse {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(.75rem, 3vw, 2.5rem);
  font-family: var(--ff-ar-head);
  font-size: clamp(1rem, 3.4vw, 1.375rem);
  line-height: 2.1;
  color: var(--ink);
  text-align: center;
}

.poem__half { display: block; }

@media (max-width: 40rem) {
  .poem__verse {
    grid-template-columns: 1fr;
    gap: 0;
    line-height: 1.95;
  }
  /* Stacked, the second hemistich is indented so the pairing still reads. */
  .poem__verse .poem__half + .poem__half {
    color: var(--ink-soft);
    font-size: .96em;
  }
}

/* English keeps the Arabic verse — poetry does not survive translation, and
   the calligraphy is part of what is being shown. */
:lang(en) .poem__verse { direction: rtl; }

/* ==========================================================================
   THE MOMENT — the day, both calendars, then the place
   ========================================================================== */

.moment {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: .1em;
}

.moment__day {
  font-family: var(--ff-head);
  font-size: clamp(1.5rem, 6vw, 2.25rem);
  font-weight: 700;
  color: var(--ink);
  text-shadow: var(--deboss);
}

/* Hijri above Gregorian, each on its own line, as a formal card sets them. */
.moment__dates {
  display: grid;
  justify-items: center;
  gap: .15em;
  font-family: var(--ff-head);
  font-size: clamp(1rem, 3.8vw, 1.375rem);
  color: var(--ink-soft);
  margin-block-start: .3em;
}

.moment__time {
  font-family: var(--ff-head);
  font-size: clamp(1.125rem, 4.2vw, 1.5rem);
  font-weight: 700;
  color: var(--gold-dark);
  margin-block-start: .35em;
}

.moment__label {
  font-family: var(--ff-ui);
  font-size: var(--fs-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
:lang(ar) .moment__label { letter-spacing: 0; text-transform: none; font-size: var(--fs-small); }

.moment__venue {
  font-family: var(--ff-head);
  font-size: clamp(1.25rem, 5vw, 1.875rem);
  font-weight: 700;
  color: var(--ink);
  text-shadow: var(--deboss);
  margin-block-start: .2em;
}

.moment__address {
  font-size: var(--fs-small);
  color: var(--ink-soft);
  margin-block-start: .2em;
}