/* ============================================================
   Contact (09) + Bookend (10) — the close.
   Ported from refer/contact-bookend.html's layout/mechanics; copy
   replaced with copy-deck-index_1.md's finalized text (the prototype
   predates it — "Open to work." became "Where this is useful.",
   "Reply within 24 hours" was cut deliberately, an Availability line
   was added). Reuses the shared .mask/.fade/.link primitives from
   site.css rather than a third near-duplicate reveal system.

   Both sections sit inside .is-inverted (tokens.css) — the one
   permanent field inversion on the page, scoped here, never on :root.
   ============================================================ */

/* system_2.md §3: "the close uses --sp-10" — flat, not escalating from
   --sp-9, so Contact/Bookend read as more spacious than every other
   section, on purpose, at every width */
.contact{ padding-block:var(--sp-10); }

/* Owner request: same feel as the Hero/About fixes above — Contact's
   own heading (the shared .mask reveal, site.css) reads on
   refer/feel-sample_1.html's single curve (--ease-move) here too,
   not the site-wide --ease-reveal every other section's own .mask
   still uses. Duration (--dur-4) is untouched, curve only. */
#contact.is-in .mask > *{ transition-timing-function:var(--ease-move); }
.contact__sub{ margin:var(--sp-3) 0 0; max-width:44ch; color:var(--text-muted); font-size:var(--fs-t3); }
.contact__avail{ margin:var(--sp-4) 0 0; max-width:52ch; font-size:var(--fs-t2); }

/* Owner request: icons instead of text names for these four channels.
   fill:currentColor on the SVG (not a raster/brand-colour image), same
   reasoning as Stack's own tool icons — an ordinary computed colour
   like any other element, so it inverts correctly under the
   theme-toggle's difference-blend with zero special-casing, and reads
   correctly against .is-inverted's own swapped --text here too. Hover
   moves from the shared .link underline (text-specific, doesn't apply
   to an icon) to a lift + opacity fade instead. */
.chan{ display:flex; flex-wrap:wrap; gap:var(--sp-5); margin:var(--sp-7) 0; }
.chan__link{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; color:var(--text);
  transition:opacity var(--dur-2) var(--ease-move), transform var(--dur-2) var(--ease-move);
}
.chan__link svg{ width:24px; height:24px; fill:currentColor; }
.chan__link:hover{ opacity:.6; transform:translateY(-3px); }

.note{ max-width:56ch; padding-top:var(--sp-5); border-top:1px solid var(--border); font-size:var(--fs-t3); }
.note b{ font-weight:500; }

.meta{
  display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-5);
  margin-top:var(--sp-7); font-size:var(--fs-t4);
  letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--text-muted);
}

/* Owner report: removing padding-block wasn't enough — min-height:100vh
   + align-items:center was still reserving a full screen and centring
   the (short, two-line) text inside it, which itself reads as a big
   empty gap below the line even with zero padding. Dropped both: this
   is now a plain block sized to its own content, like any other
   section, not a forced full-viewport stage. padding-block is back to
   a flat --sp-7 (down from --sp-10) — enough that the line isn't
   touching Contact above or the true page end below, nowhere near
   enough to read as its own empty gap again. */
.bookend{
  padding-block:var(--sp-7); padding-inline:var(--pad-inline);
}
.bookend__line{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(38px,10.4vw,196px);
  line-height:1.06; letter-spacing:-.015em;
  margin:0; max-width:9.2em;
}
/* stagger between the two lines already comes from site.css's generic
   .mask:nth-of-type(2) rule — both spans are direct siblings here */