/* ===========================================================================
   Per-section tuning, in document order. One block per section, nothing
   reusable — if a rule here starts being copied, it belongs in 04.
   =========================================================================== */

/* ── Hero ────────────────────────────────────────────────────────────── */
.s-hero {
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
  padding-block-start: 0;
  text-align: center;
  --col: 46rem;            /* wider than the default reading column: the arch
                              and its flowers need the room */
}

/* The arch and the names occupy the same grid cell, so the names sit inside
   the arch's open centre without any negative-margin guesswork. */
.s-hero__arch {
  display: grid;
  grid-template-areas: "stack";
  place-items: start center;
  width: min(28rem, 92%);
  margin-inline: auto;
}

.s-hero__arch > * { grid-area: stack; }

.s-hero__video {
  display: block;
  width: 100%;
  height: auto;
}

/* Positioned down the arch's open upper half, clear of the arch's crown. */
.s-hero__names {
  align-self: start;
  margin-block-start: 26%;
  width: 100%;
  position: relative;
  z-index: var(--z-content);
}

/* Nastaliq's tall default line box would float this in dead space; pulled
   tight so it reads as a caption sitting on the names. */
.s-hero__occasion {
  font-size: var(--fs-h3);
  line-height: 0.9;
  color: var(--c-brown);
}

.s-hero__title {
  margin-block-start: clamp(3rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.s-hero__name { display: block; }

/* The "و" between the names, smaller and offset like the original. */
.s-hero__amp {
  display: block;
  font-size: 0.5em;
  color: var(--c-gold-soft);
  line-height: 1.6;
}

/* Scroll cue under the names. */
.s-hero__cue {
  margin-block-start: clamp(2rem, 6vw, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: var(--c-gold);
}

.s-hero__cue-text { font-size: var(--fs-body-sm); line-height: 1.2; }

.s-hero__chevron { width: var(--fs-body-sm); height: auto; }

/* The torn-paper card. The paper itself is a background image so the text
   sits inside it and the card grows with the text. The flowers that overhang
   its top corners are ornaments on the section, drawn over this. */
.s-hero__card {
  position: relative;
  margin-block-start: clamp(2.5rem, 7vw, 5rem);
  margin-inline: auto;
  width: min(46.5rem, 100%);
  padding: clamp(3.5rem, 11vw, 7rem) clamp(2rem, 7vw, 5rem) clamp(4.5rem, 13vw, 8rem);
  background-image: url("../images/hero-card-torn.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.s-hero__bismillah {
  font-size: 2.05rem;
  line-height: 1.6;
  color: var(--c-brown)
}

.s-hero__vow {
  margin-block-start: clamp(1rem, 3vw, 2rem);
  font-size: 2.05rem;
  line-height: 1.9;
  color: var(--c-gold);
}

/* ── Countdown ───────────────────────────────────────────────────────── */
.s-countdown { padding-block: clamp(1.5rem, 4vw, 2.5rem); }

/* ── Schedule ────────────────────────────────────────────────────────── */
.s-schedule { padding-block: clamp(4rem, 11vw, 7rem); }

/* The torn paper goes on the inner column, not the section: the section runs
   edge to edge, so a background there would stretch the paper across the full
   viewport. .section__inner is the reading column and is content-height, so
   the paper wraps the timeline the same way .s-hero__card wraps its lines.

   Stretched to the box (100% 100%) rather than layered as two aspect-locked
   bands: the bands only meet the content at wide viewports — on a phone they
   scale down with the width while the timeline stays tall, leaving the middle
   unframed. */
.s-schedule .section__inner {
  padding: clamp(3rem, 9vw, 5rem) clamp(1.5rem, 5vw, 3rem);
  background-image: url("../images/hero-card-torn.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ── Venue ───────────────────────────────────────────────────────────── */
.s-venue__divider {
  width: clamp(4.5rem, 12vw, 6rem);
  height: auto;
  margin-inline: auto;
  display: block;
}

.s-venue__name {
  font-size: var(--fs-h3);
  line-height: 1.4;
  color: var(--c-brown);
}

.s-venue__address {
  font-size: var(--fs-h3);
  line-height: 1.4;
  color: var(--c-brown);
}

.s-venue__illustration {
  display: block;
  width: min(23.75rem, 100%);
  height: auto;
  margin-inline: auto;
  margin-block-start: var(--s-2);
}

/* ── Map ─────────────────────────────────────────────────────────────── */
.s-map { padding-block: clamp(2.5rem, 7vw, 4rem); }

/* ── Dress code + gift ───────────────────────────────────────────────── */
.s-dress {
  padding-block: clamp(5rem, 13vw, 8rem);
  /* The two illustrations sit at the sides, so keep the prose narrow enough
     not to run under them. */
  --col: 26rem;
}

.s-dress__note {
  font-size: var(--fs-body);
  line-height: 1.5;
}

.s-dress__gift-title { margin-block-start: clamp(3rem, 9vw, 5.5rem); }

/* ── Closing ─────────────────────────────────────────────────────────── */
.s-closing__signature {
  font-size: 1.75rem;
  line-height: 1.5;
  color: var(--c-gold);
}

/* The photo and its wreath share a stacking context so the wreath can sit
   on top of the photo. */
.s-closing__portrait {
  position: relative;
  width: min(28.125rem, 100%);
  margin-inline: auto;
  margin-block-start: var(--s-3);
}

.s-closing__photo {
  display: block;
  width: 100%;
  height: auto;
}

/* On narrow screens the photo deliberately runs past both edges, exactly as
   the original did (450px wide inside a 320px grid). `overflow-x: clip` on
   <html> keeps that from producing a scrollbar. */
@media (max-width: 30rem) {
  .s-closing__portrait {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
}