/* ==========================================================================
   /ceremonies/ — page sheet. Loaded AFTER /assets/style.css.

   Almost everything here is spacing and placement. The look, the type, the
   hairlines, the sticky notched cards (M3), the slot lines (M1) and the
   flying mark (M5) all come from the core — this file only tells them where
   to sit on this particular page.

   Owned by the ceremonies page agent. Nothing in here is a colour, a type
   size or a motion curve the core already defines.
   ========================================================================== */


/* --------------------------------------------------------------- page header
   The h1 sits on col-wide, so the left column of the lede lines up with it
   and the right two columns stay deliberately empty. */

.phead h1 { margin-top: clamp(1.1rem, 2.4vw, 2rem); }
.phead .lede { margin-top: clamp(1.6rem, 3.4vw, 2.6rem); }


/* ------------------------------------------------------- M3 · the card stack
   The core owns the cards, the notch and the sticky tops (88 / 110 / 133 at
   1440 — measured). The only thing missing is travel: a sticky box can only
   move inside its own containing block, and with the stack ending flush at
   the bottom of the third card, that card is pushed off again a moment
   before it reaches its own sticky top. It never gets its turn.

   The constraint rectangle is measured against the stack's CONTENT box, so
   padding-bottom does nothing here (measured: no change at all). It needs a
   real extra row. This spacer is that row, and a sticky box holds its top for
   exactly as many pixels as the spacer is tall — so this value IS the dwell
   on the finished three-card tableau.

   Measured at 1440x900: with no spacer the third card tops out at 31px and
   never sticks; with it, all three hold 88 / 110 / 133 together.

   No gap ever shows underneath: while card three is pinned the stack's bottom
   edge is still below the fold, and it arrives at the card's own bottom edge
   at the exact moment the card lets go.

   Sticky is off below 900px in the core, so the spacer goes with it. */

.what .stack::after {
  content: "";
  display: block;
  height: clamp(4rem, 42vh, 30rem);
}
.what { padding-bottom: clamp(2.5rem, 5vw, 5rem); }

/* Below 900px the core makes the cards static so a phone reader is never
   trapped, and under reduced motion it does the same as the static end state.
   Either way there is no travel left to make room for, and the spacer would
   just be a hole at the bottom of a plain list. */
@media (max-width: 900px) {
  .what .stack::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .what .stack::after { display: none; }
}


/* --------------------------------------------- M3 · the flagged card's fill
   CORE GAP. style.css ships `.notch--flag { background: #F2EBE4; }` — a
   literal that is not in the committed palette (measured rgb(242,235,228) on
   the "Full wedding ceremony" card). The palette has exactly three ground
   tones and none of them is a lighter-than-a-card tint, so per the brief this
   takes --ground-3, the raised-card token the other two cards already use.

   The substitution costs the flag card its 5-point tonal lift over its
   neighbours; the "Most complete" pill and the solid (rather than ghost)
   button still carry the distinction, and both were already doing most of
   the work — 242,235,228 against 237,230,223 is a 1.02:1 difference, below
   the threshold at which anyone reads it as a different colour.

   Page-sheet override, not a core edit: page agents do not write style.css.
   Same specificity, loaded second, so it wins. */

.notch--flag { background: var(--ground-3); }


/* ------------------------------------------------------------- vow renewal
   A ledger row: label left, copy right, columns 1–2 and the right-hand
   overhang deliberately empty. */

.renew-set { margin-top: clamp(1rem, 3vw, 3rem); }
.renew .ledger__copy { margin-top: 1rem; }
.renew__cta { margin-top: clamp(1.4rem, 2.6vw, 2rem); }

/* the note needs air under it as well as over it — the cultural band starts
   immediately after and would otherwise clip straight onto the last line */
.what-note { padding-block: clamp(2rem, 4.5vw, 3.5rem) clamp(3rem, 7vw, 6rem); }


/* --------------------------------------------------------- cultural band
   Eyebrow full width, headline on the lede columns, then the portrait on the
   left rail with the copy opposite it. */

.cultural__h { margin-top: clamp(1rem, 2vw, 1.6rem); }
.cultural .portrait { margin-top: clamp(2rem, 4vw, 3.5rem); }
.cultural__body { margin-top: clamp(2rem, 4vw, 3.5rem); }
.cultural__cta { margin-top: clamp(1.6rem, 3vw, 2.4rem); }

@media (max-width: 900px) {
  /* four columns wide on desktop, but full-bleed on a tablet the portrait
     would be a metre tall — hold it to a sensible measure */
  .cultural .portrait { max-width: 30rem; }
  .cultural__body { margin-top: clamp(1.6rem, 4vw, 2.4rem); }
}


/* ------------------------------------------------------------------- faq
   The six-word index rides alongside the answers instead of scrolling away
   from them. It is a static list at <=900px, where the column collapses. */

.faq__rail {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
  align-self: start;
}
.faq__eyebrow { margin-bottom: clamp(1rem, 2vw, 1.6rem); }
.faq__h { margin-bottom: clamp(1.8rem, 3.4vw, 2.8rem); }

@media (max-width: 900px) {
  .faq__rail { position: static; margin-bottom: clamp(2rem, 5vw, 3rem); }
}


/* ------------------------------------------------------------ closing band
   The core now ships a real --grid-row (32px at 1440), so the local margins
   that used to supply reading space here are additive with it — they measured
   74/64/54px against 32px on every other page. Removed; the core owns it. */


/* the page lede reads from the right half, opposite the headline's spine */
@media (min-width: 901px) {
  .phead > .lede { grid-column: 8 / -1; }
}


/* the page headline, 10 percent smaller than the display register */
.phead h1 { font-size: clamp(2.61rem, 7.74vw, 7.65rem); }