/* ============================================================
   SECTION HEADINGS + COLLABORATE
   ============================================================ */
/* `.stub__title` keeps its name because every section heading uses it — it long
   outgrew the stubs it was written for. `.stub__frame` and `.stub__note`, the
   dashed "In production" placeholder box and its caption, were removed when
   Collaborate became a real contact section: they were the last stub on the
   page and nothing referenced them any more. */
.stub__title{
  margin-top:clamp(1.2rem,2.4vw,2rem);
  max-width:18ch;margin-inline:auto;
  text-align:center;text-wrap:balance;
}

/* ---------- COLLABORATE — the contact pair ----------------
   Two values on the stone, no card and no form. The section used to hold a
   dashed "In production" frame; the frame is gone rather than filled, because
   a dashed placeholder box around a real email address still reads as a
   placeholder. Stacked below 640px so neither address can ever wrap. */
.contact{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(2rem,5vw,5rem);
  margin-top:clamp(2.5rem,5vw,4rem);
  padding:0;list-style:none;
}
.contact__item{display:flex;flex-direction:column;align-items:center;gap:var(--s-2)}
.contact__link{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.25rem,2.6vw,2rem);line-height:1.2;
  color:var(--espresso);text-decoration:none;
  border-bottom:1px solid var(--clay);
  padding-bottom:.12em;
  transition:border-color .45s var(--ease-soft),color .45s var(--ease-soft);
}
.contact__link:hover,.contact__link:focus-visible{
  color:var(--charcoal);border-bottom-color:var(--espresso);
}
@media (max-width:639px){.contact{flex-direction:column;align-items:center}}

/* ---------- FOOTER ---------------------------------------- */
/* position+z-index, not just a background: the footer sits outside <main>, and a
   static element's background paints *below* the positioned fixed backdrop no
   matter what colour it is. It needs main's own layer to cover the film strip. */
.foot{position:relative;z-index:1;padding-block:clamp(2.5rem,5vw,4rem);border-top:1px dashed var(--hairline);background:var(--linen)}
.foot__inner{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--s-2);
  text-align:center;
}
.foot__mark{font-family:var(--display);font-size:clamp(1.1rem,1.5vw,1.4rem);font-weight:400;letter-spacing:.28em}