/* =========================================================================
   richian — contact.css
   The contact page only: the dark band at the top and the cream panel that
   carries the Tally embed. Everything shared — tokens, reset, .btn, the nav,
   the footer, the reveal system — is in site.css, which loads first.

   The page is deliberately two blocks and nothing else. It is the end of a
   journey rather than a place to browse, so it carries no sections to scroll
   through: dark band, form, footer.

   Both blocks are on the sitewide 1140px content cap (--page-pad, defined in
   site.css). This page was the cheap one: nothing here bleeds except the two
   background colours, which are on the sections themselves, so there is no
   negative margin and no overlay copy to reconcile — unlike .audience and the
   hero on the home page. ALWAYS keep the fallback on the token; see the note
   at its definition for what a stale site.css does without it.

   BUT the cap alone left this page looking left-aligned, and that needed a
   second move. Nothing here is 1140 wide — the widest thing on the page is the
   700px embed, and the headline's longest line is only 630 — so a centred 1140
   column put every element on its left edge with an 830px void to the right of
   it at 1920. --contact-measure is the fix: one 700px block, centred, holding
   the band's copy and the form alike. The text stays left-aligned inside it and
   the headline still shares an edge with the form, which is the relationship
   this page has always had; only the block moved.
   ========================================================================= */

.contact-hero,
.contact-form {
  /* The page's real measure, and Tally's own page width for this form. Both
     sections centre their content on it, so the band and the panel cannot
     drift apart — set it once here, not per section. */
  --contact-measure: 700px;
}

/* ---- The dark band ------------------------------------------------------
   Same dark as the sequences and the footer, so the page opens on the note
   the home page's hero opens on and the nav starts in its light palette.
   The top padding clears the nav: site.js's nav cancels its own height with
   a negative bottom margin, so it takes no layout space and this padding is
   the only thing holding the copy clear of it.
   ------------------------------------------------------------------------- */
.contact-hero {
  position: relative;
  z-index: 1;
  background: var(--seq-bg);
  color: var(--seq-body);
  padding:
    calc(var(--nav-h) + var(--nav-inset) + clamp(48px, 9vh, 104px))
    var(--page-pad, clamp(22px, 8.6vw, 124px))
    clamp(64px, 10vh, 116px);
}

/* The band's copy, centred as a block. A wrapper rather than auto margins on
   the eyebrow, headline and lede individually — those would each centre on
   their OWN width and stagger the left edge three ways. */
.contact-hero__inner {
  max-width: var(--contact-measure);
  margin-inline: auto;
}

/* The one eyebrow on this page, and it is on the dark, so --ink-mute would
   disappear into it. --mute-dark is that same job on dark sections. */
.contact-hero .eyebrow { color: var(--mute-dark); }

/* Its own scale rather than .section-title's: this is the page's H1 and the
   only headline on it, so it sits nearer .close__title's crescendo than a
   section opener — but held back from the full 96px, because there is no
   page above it to build to. The em treatment is shared, over in site.css. */
.contact-hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5.4vw, 76px);
  line-height: 1.04;
  letter-spacing: -.007em;
  color: var(--seq-cream);
  margin: 0 0 clamp(22px, 3vh, 34px);
  max-width: 22ch;
}
/* text-wrap: balance splits the two sentences mid-sentence, which is why the
   break is explicit. Dropped under 860px, as .close__title's is. */
@media (max-width: 860px) { .contact-hero__title br { display: none; } }

.contact-hero__lede {
  font-family: var(--sans);
  font-size: clamp(15px, 1.2vw, 17.5px);
  line-height: 1.62;
  color: var(--seq-body);
  margin: 0;
  max-width: 46ch;
}

/* ---- The form panel -----------------------------------------------------
   Cream, against the dark above it — the same hard tonal break .steps makes
   under the sequence on the home page.
   ------------------------------------------------------------------------- */
.contact-form {
  position: relative;
  z-index: 1;
  background: var(--cream-bg);
  color: var(--ink);
  padding: clamp(56px, 9vh, 104px) var(--page-pad, clamp(22px, 8.6vw, 124px)) clamp(72px, 12vh, 140px);
}

/* Sized to the embed rather than the embed stretched to the panel — 700px is
   Tally's own page width for this form, which is why --contact-measure is that
   number and not something chosen. Centred, and .contact-hero__inner centres on
   the same token, so the headline above and the form below share a left edge at
   every width. Below 700 + padding the max-width stops binding and the auto
   margins do nothing, so a phone is untouched. */
.contact-form__panel {
  max-width: var(--contact-measure);
  margin-inline: auto;
}

/* The embed is transparent (transparentBackground=1 on the src), so it takes
   the cream above rather than painting white. Block, or the iframe's inline
   baseline leaves a few px of gap under it. */
/* NO min-height here, and that is deliberate. Tally's widget writes an exact
   height as an INLINE style once the form measures itself, and an inline
   style loses to a CSS min-height — so a floor set high enough to reserve the
   mobile layout would hold the box open on desktop, leaving a band of dead
   cream under the submit button. The height attribute on the iframe does the
   reservation instead: it is the pre-JS size, and the inline style overrides
   it cleanly the moment the widget reports. Set a CSS height or min-height
   here and you break that handover. */
.contact-form__embed {
  display: block;
  width: 100%;
  border: 0;
}

/* Matches .close__email on the home page exactly: same size, same mute, same
   terracotta underline that firms up on hover. */
.contact-form__email {
  font-family: var(--sans);
  font-size: clamp(14px, 1.05vw, 15.5px);
  color: var(--ink-mute);
  margin: clamp(20px, 2.8vh, 30px) 0 0;
}
.contact-form__email a {
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid rgba(200,68,30,.35);
  transition: border-color .25s ease;
}
.contact-form__email a:hover { border-bottom-color: var(--brand); }

@media (max-width: 860px) {
  .contact-hero__title { max-width: none; }
}