/* ===========================================================================
   Sections - the full-viewport ground system.

   Every section is a composition at section scale: the artwork fills the
   section edge to edge, and live text sits inside that composition's declared
   SAFE AREA rather than wherever it lands (FR-081, FR-087, FR-092, FR-096).

   The one bold thing on this site is this: an invitation artwork at full
   viewport scale with live text set into its own layout. Everything around it,
   the navigation, the footer, the FAQ, the pending states, stays quiet and
   typographic.
   =========================================================================== */

.section {
  position: relative;
  /* dvh, not vh: a phone's collapsing address bar must not leave a gap or
     clip the composition. */
  min-height: 100dvh;
  display: grid;
  align-content: center;
  padding-block: var(--section-pad-block);
  padding-inline: var(--gutter);
  overflow: hidden;
  isolation: isolate;
}

/* --- The ground ----------------------------------------------------------
   Artwork grounds are <img> elements, not CSS backgrounds, for one concrete
   reason: a below-fold background image cannot be lazy-loaded declaratively,
   and nine full-screen artworks in one document is exactly the problem the
   weight budget exists to solve (FR-101, plan.md -> Constraints). */

.section__ground {
  position: absolute;
  inset: 0;
  z-index: var(--z-ground);
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Overridden per composition from its declared focal point, so the subject
     stays visible at every width from 320 px up (FR-092, SC-022). */
  object-position: center;
  pointer-events: none;
}

/* Flat colour fields behind the artwork. These paint before the image arrives,
   so no section ever flashes white, and they are what the azulejo wash extends
   into when the ground image is shorter than the section (FR-093). */
.ground--cream { background-color: var(--ground-cream); color: var(--ink); }
.ground--olive { background-color: var(--ground-olive); color: var(--ink-reversed); }
.ground--olive-deep { background-color: var(--ground-olive-deep); color: var(--ink-reversed); }
.ground--pink { background-color: var(--ground-pink); color: var(--ink); }

/* --- The two alternating azulejo grounds -------------------------------
   Driven entirely by the computed index, never by an authored field, so no
   content edit can leave two adjacent visible sections matching (FR-018,
   SC-014). `tile-below` anchors the arcade to the bottom edge, `tile-above` to
   the top; in both the pink wash absorbs whatever height is left over.
   Since 002 only the switched-off bridal party and travel guide pages use these;
   the FAQ splits the artwork into a wash and a band of its own (faq.css). */

.ground--tile-below .section__ground { object-position: center bottom; }
.ground--tile-above .section__ground { object-position: center top; }

/* At narrow widths the band must stay at a readable scale rather than shrink
   with the viewport (FR-093). Scaling by height rather than width keeps the
   arcade figures legible at 320 px and simply crops the sides, which a
   repeating arcade tolerates without showing a seam. */
@media (max-width: 47.9375rem) {
  .ground--tile-below .section__ground,
  .ground--tile-above .section__ground {
    object-fit: cover;
    width: 100%;
  }
}

/* --- Scrims --------------------------------------------------------------
   Used only where the artwork's luminance genuinely cannot be guaranteed
   across crops. A blanket overlay on every composition would dull the palette
   and work against the artwork being the point (research R11). */

.scrim {
  position: absolute;
  inset: 0;
  z-index: var(--z-scrim);
  pointer-events: none;
}

/* Rising from the foot of the frame. The hero's city-and-date line sits in it:
   measured 5.2:1 for cream over the brightest foreground crop at 1920 px, and
   8.6:1 over the darkest at 390 px (SC-008). */
.scrim--foot {
  background: linear-gradient(
    to top,
    var(--scrim-foot) 0%,
    color-mix(in srgb, var(--scrim-foot) 55%, transparent) 14%,
    transparent 30%
  );
}

/* Two pools of darkening, one behind each bottom corner, for the landscape
   hero's place/dates (research R5/R6): the live line FLANKS the couple rather
   than sitting in a single centred band, so a single linear scrim would
   either darken the couple between them (which the plaque it replaces never
   did) or leave the corners too bright to read on. Each ellipse is centred on
   its own corner and fades out by about 45% of its own radius, so the
   darkening is gone well before the middle of the frame (SC-008, SC-023: it
   must not read as a band). Tuned by sampling (T059): a brighter foreground
   crop at 1280-1920px measured as low as 1.75:1 under --scrim-foot's base
   strength, so the corners go to full --scrim-foot at the very point of the
   ellipse rather than the --scrim-foot's own softer edge. */
.scrim--corners {
  background:
    radial-gradient(ellipse 70% 95% at 0% 100%, var(--scrim-foot) 0%, transparent 52%),
    radial-gradient(ellipse 70% 95% at 100% 100%, var(--scrim-foot) 0%, transparent 52%);
}

@media (max-aspect-ratio: 1/1) {
  /* Unreachable in practice (home.css hides .hero__scrim outright in
     portrait, research R5), kept only so this class never accidentally draws
     a corner pool if it is ever reused before that rule runs. */
  .scrim--corners {
    background: linear-gradient(
      to top,
      var(--scrim-foot) 0%,
      color-mix(in srgb, var(--scrim-foot) 55%, transparent) 14%,
      transparent 30%
    );
  }
}

/* Falling from the head of the frame. A paper wash over a bright sky, which is
   how a printed invitation would caption a photograph. */
.scrim--head {
  background: linear-gradient(
    to bottom,
    var(--scrim-head) 0%,
    color-mix(in srgb, var(--scrim-head) 40%, transparent) 55%,
    transparent 100%
  );
}

/* --- The content column ---------------------------------------------------
   Each composition declares where its text may go. This is the generic case:
   a centred column inside the safe area. Sections override the placement, not
   the mechanism. */

.section__content {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
}

.section__content--wide { max-width: 62rem; }
.section__content--narrow { max-width: var(--measure-narrow); }

/* Section headings. Display-serif caps because that is how the references set
   "WEDDING" - the heading itself, not an eyebrow floating above one. */

.section__heading {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  line-height: var(--lh-tight);
}

.section__heading--script {
  font-family: var(--font-script);
  font-size: var(--fs-2xl);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  /* Pinyon Script has long descenders on g, j, p, y. A tight line-height
     clips them, so display script never gets less than this. */
  line-height: 1.24;
  padding-block-end: 0.12em;
}

/* --- Pending states ------------------------------------------------------
   An unannounced fact is a sentence in the couple's voice, not a blank, a dash
   or a grey box (FR-071, SC-026). It reads as a promise, so it is set like one:
   italic body serif, muted, with a rule above it rather than a container. */

.pending {
  margin-block-start: var(--space-sm);
  padding-block-start: var(--space-xs);
  border-block-start: var(--rule) solid currentcolor;
  max-width: var(--measure-narrow);
  font-style: italic;
  font-size: var(--fs-sm);
  opacity: 0.86;
}

.ground--olive .pending,
.ground--olive-deep .pending,
.on-dark .pending {
  opacity: 0.94;
}

/* --- Print ---------------------------------------------------------------
   Full rules in print.css; this is only the structural part, so a section
   never forces a page to viewport height on paper. */

@media print {
  .section {
    min-height: 0;
    page-break-inside: auto;
  }
}