/* ==========================================================================
   05 — CLOSING  (js/ui/closing.js)

   The payoff. Type block carried verbatim from v2 (css/styles.css:489-555) with
   two deletions the direction calls for:

     · v2's `background: linear-gradient(to bottom, --ink → transparent)` is GONE.
       By the time the reader is here the pillars aperture has already flooded the
       viewport, so the field is full-bleed and ui/screen.js owns whatever grain
       is left. Re-implementing the v2 bgState scrub here would fight it.
     · v2's underline sweep on the mail link is GONE. The page has exactly one
       hover language — the 1px dotted `.frame` from base.css — and the link
       already carries it.

   Everything that moves is written per frame from js/ui/closing.js: `--dev-r` on
   each word's inner `.develop` span, and a transform on the word itself.
   ========================================================================== */

.closing {
  position: relative;
  /* NOT a full viewport any more. The old 100svh + justify-content:center floated the three words
     in the middle of their own screen, and the screen below them — measured ~580px at 1440x900 —
     was bare field before the contact section even started: the reader scrolled a full viewport
     of nothing between "Pure execution." and the CTA. The words now sit at the TOP of their
     section (a half-height floor, clamped) and the CONTACT SECTION owns the scroll under them:
     its wordmark entrance was already designed to cross this junction, so the hand-off reads as
     one continuous composition instead of two half-empty screens.
     The words' entrance windows (js/ui/closing.js, WORD_SPECS from 0.95vh) are measured against
     the section top, which this change moves DOWN the document by ~450px — the module derives
     its triggers from sectionRect('closing') at runtime, so the retiming is automatic. */
  min-height: min(58svh, 560px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* a floor, not the height — clamped both ways so no viewport turns it into dead air */
  padding: clamp(96px, 12vh, 160px) var(--gutter) clamp(72px, 10vh, 140px);
  /* the words enter from ±12%; without this they would widen the document */
  overflow: hidden;
}

/* ==========================================================================
   06 — CONTACT
   A full viewport, NOT the 66svh that would make this section plus the footer
   exactly one screen. The wordmark is pinned to the section centre, so what the
   remaining scroll actually controls is its gap to the address: at 66svh the
   mark covers 100% of the email and 79% of the eyebrow, letter over letter.
   At 100svh both read 0%.
   ========================================================================== */
.contact {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 0 var(--gutter) clamp(40px, 6vh, 88px);
}

/* --------------------------------------------------------------------------
   The three words
   -------------------------------------------------------------------------- */
.closing__words {
  display: flex;
  flex-direction: column;
  gap: 0.02em;
  margin-bottom: 0;   /* the CTA is no longer a sibling — it has its own section */
}

.closing__w {
  font-weight: 300;
  font-size: clamp(3rem, 10vw, 10.5rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  will-change: transform;
}

/* The mask needs a predictable box, so the inner span is a block rather than an
   inline whose fragments each get their own mask origin. */
.closing__w > .develop { display: block; }

.closing__w[data-w="2"] {
  align-self: flex-end;
  text-align: right;
}

.closing__w--serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  align-self: center;
  font-size: clamp(3.3rem, 11vw, 11.5rem);
}

/* --------------------------------------------------------------------------
   The call to action
   -------------------------------------------------------------------------- */
.closing__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(18px, 2.4vw, 28px);
}

.closing__eyebrow {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--bone-70);
}

/* The one place the scramble is allowed outside the small instrument layer:
   an email address is literally a machine string. Re-set from Hanken Grotesk
   into DM Mono at display scale — and because DM Mono is monospaced, every
   character in the charset has the same advance, so the address cannot jitter
   horizontally while it resolves. That is the whole argument for the swap. */
.closing__mail {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: clamp(1.7rem, 4.4vw, 4.2rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--bone);
  white-space: nowrap;
}

/* base.css's dotted frame is inset in em, which at 4.2rem would stand a long
   way off the type. Same language, tightened for display scale. */
.closing__mail.frame::before { inset: -0.3em -0.36em; }

/* The last character on the entire page to settle. js/ui/closing.js holds it
   back until the rest of the address has resolved. */
.closing__dot { color: var(--accent); }

/* --------------------------------------------------------------------------
   Responsive — v2's rule: below 900px the stagger reads as clutter, so words 2
   and 3 return to the left edge.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .closing__w[data-w="2"] { align-self: flex-start; text-align: left; }
  .closing__w--serif { align-self: flex-start; }
  /* MOBILE: the words hang ~310px above the contact section (measured 390x844) while the
     wordmark's own entrance has 76vh of approach before its break-the-frame frame — the lower
     part of the screen reads empty for most of the traverse. Pushing the block to the bottom
     third of the viewport puts the serif line where the wordmark is about to rise, so the two
     hand over instead of stacking two voids. The words keep their own measured entrance windows
     (js/ui/closing.js, from 0.95vh), which is why this is an alignment change and not a retiming:
     nothing in the JS moves. Clamped so the lift does not eat the type on a tall tablet. */
  .closing { justify-content: flex-end; padding-bottom: clamp(64px, 12vh, 150px); }
}

/* --------------------------------------------------------------------------
   Reduced motion — base.css already neutralises the develop masks. This is the
   no-JS / mid-session-change safety net for the transforms.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .closing__w { transform: none !important; will-change: auto; }
}