/* ==========================================================================
   Rushmi to my vows — CONTACT PAGE
   Loaded AFTER /assets/style.css, which owns every colour, type register,
   component and motion mechanic on this page. Nothing here restyles the
   core: this sheet is page rhythm plus one layout decision — the contact
   rail that rides alongside the form.

   Page mechanics, all core-owned:
     M1  slot line reveals   the h1 (fires immediately), both h2s, the close
     stem draw               the five steps in #next
     rule draw               the hairline under the page header
     quiet .reveal           everything else
     M5  the flying mark ★   gated on #next so the ring never blends over the
                             form, then landing in "to my v(o)ws"
   ========================================================================== */


/* --- PAGE HEADER ---------------------------------------------------------
   The 0.75rem grid gutter is right for columns and far too tight between an
   eyebrow, a display headline and a lede stacked in one column. */
.c-head { row-gap: clamp(1.1rem, 2.6vw, 1.9rem); }


/* --- THE TWO-RAIL SECTIONS ----------------------------------------------
   Rail left (cols 1–4), body right (cols 6–12), column 5 deliberately empty.
   Side by side they only need the gutter; stacked at <=900px they need a
   whole block between them. */
.c-enq,
.c-next { row-gap: var(--space-block); }


/* --- THE BODY COLUMN -----------------------------------------------------
   Heading, intro, then the thing itself — the form or the steps — set apart
   so it reads as the point of the section rather than more copy. */
.c-body > * + * { margin-top: clamp(1rem, 2.2vw, 1.6rem); }

.c-body .form,
.c-body .steps { margin-top: clamp(2rem, 4vw, 3rem); }

.c-cta { margin-top: clamp(2rem, 4vw, 3rem); }


/* --- THE CONTACT RAIL ----------------------------------------------------
   The email, the phone number and the sign-off stay level with the form all
   the way down it. A couple who would rather just ring should never have to
   scroll back up to find the number. Sticky only where there is room for it:
   at <=900px the rail sits above the form and stickiness would only get in
   the way.

   align-self: start is what MAKES the stickiness work. As a grid item the
   rail defaults to align-self:stretch, so its box is grown to the full height
   of the grid row — the same height as the form beside it — and a sticky box
   that already fills its containing block has nowhere to travel, so it just
   scrolls away like a static one. Shrink it to its own content height and it
   pins properly. It belongs on the BASE rule, not inside the min-width query:
   below 901px the rail is static and its own content height is what we want
   there too. */
.c-rail {
  display: grid;
  align-self: start;
  align-content: start;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
}

@media (min-width: 901px) {
  .c-rail {
    position: sticky;
    top: calc(var(--nav-h) + clamp(1.5rem, 4vw, 3rem));
  }
}


/* --- THE NOTES HINT ------------------------------------------------------
   Sits under the textarea and says how much room there is. Core has no field
   hint yet, so it lives here. Deliberately NOT styled like an error: --ink-3
   is the same quiet meta colour as the field labels and the form note (5.0:1
   on --ground), never the clay used for warnings and required markers. */
.f__hint {
  margin-top: .5rem;
  font-size: var(--t-label);
  letter-spacing: .04em;
  line-height: 1.6;
  color: var(--ink-3);
}


/* --- NO-JS STEM (core gap, patched here) ---------------------------------
   REPORTED TO THE CORE AGENT. Core parks .steps::before at scaleY(0) and only
   lifts it to scaleY(1) on .stem-in, which JS adds — so with JavaScript off
   the signature hairline never appears at all. Every other core effect gets
   this the other way round: the settled state is the base and `.js` opts into
   the animated start (.reveal, .ticker__track, .shelf__track all do it). The
   real fix belongs in style.css §12; until then this closes it for the only
   page .steps exists on. Costs nothing when JS runs — the selector stops
   matching the moment main.js puts `js` on <html>. */
html:not(.js) .steps::before { transform: scaleY(1); }


/* --- CLOSING BAND --------------------------------------------------------
   Same reasoning as the page header: stacked copy, not columns. */
.c-close { row-gap: clamp(1.1rem, 2.4vw, 1.75rem); }


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


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