/* ==========================================================
   DeltaVisor · contact page
   Layers on the marketing-site vocabulary (.hsec, .prose, tokens).
   Owns only the two-lane inbox grid and the self-serve link list.
========================================================== */

/* ALIGNMENT, AND WHY BOTH BLOCKS BELOW SET THEIR OWN OUTER GEOMETRY.
   core.css has `.hsec > * { max-width: var(--home-max); margin-inline: auto; }`,
   which CENTRES every direct child of a section. That is correct only for a
   child as wide as the column. A child with a NARROWER max-width floats to the
   middle instead of aligning under the heading, and a child that also zeroes
   its margin snaps to the gutter, 48px LEFT of the heading.

   Measured at 1440 before this: the heading sat at 96, .contact-lanes at 272
   and .contact-links at 48. Three blocks, three left edges, on one page.

   The fix is for each block to keep the column's outer geometry and constrain
   its INNER width instead, so the cap on measure survives and the left edge
   still lines up with the head. */
.contact-lanes {
  display: grid;
  /* Was `1fr` inside a 56rem cap, which the centring rule then floated to the
     middle. Fixed track width plus `justify-content: start` keeps the same card
     size and pins the pair to the left of the column. */
  grid-template-columns: repeat(2, minmax(0, 27.25rem));
  justify-content: start;
  gap: clamp(1rem, 2vw, 1.5rem);
  max-width: var(--home-max);
  margin-inline: auto;
}
@media (max-width: 60rem) {
  .contact-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 44rem) {
  .contact-lanes { grid-template-columns: 1fr; }
}

.contact-lane {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--paper-1);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}
.contact-lane h2 {
  margin: 0;
  font-size: var(--t-lg);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.contact-lane p {
  margin: 0;
  color: var(--ink-mid);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.contact-lane__mail {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--accent);
  word-break: break-all;
}
.contact-lane__mail:hover { color: var(--accent-deep); }

.contact-links {
  /* The 60ch measure moves to the ITEMS. On the list it fought the centring
     rule: `margin: 0` beat `margin-inline: auto`, so the list snapped to the
     gutter and sat 48px left of its own heading. */
  max-width: var(--home-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.contact-links li { max-width: 60ch; }
.contact-links li {
  color: var(--ink-mid);
  font-size: var(--t-md);
  line-height: 1.55;
}
.contact-links strong { color: var(--ink); font-weight: 600; }
.contact-links a { color: var(--accent); font-weight: 500; }
.contact-links a:hover { color: var(--accent-deep); }