/* Contact shares Evidence's exact masthead and footer. Only the content
   layout and quiet, stationary dot field differ. No new motion. */
* { box-sizing: border-box; }
html, body { height: auto; overflow: auto; overscroll-behavior: auto; }
.contact-shell { min-height: 100vh; min-height: 100dvh; height: auto; }
.contact-field { pointer-events: none; }
.contact-field::before {
  background-image: radial-gradient(circle, rgba(243, 240, 232, .15) calc(var(--dot-pitch, 31px) * .05), transparent calc(var(--dot-pitch, 31px) * .05 + .2px));
  background-size: var(--dot-pitch, 31px) var(--dot-pitch, 31px);
  background-position: var(--dot-x, center) var(--dot-y, center);
  opacity: .72;
  /* An open pocket for the two addresses; the field returns gradually
     around it, rather than putting the text on a visible panel. */
  mask-image: radial-gradient(ellipse 640px 440px at 160px 300px, transparent 48%, #000 100%);
}
.wordmark { z-index: 1; }
.wordmark img { display: block; height: .917em; width: auto; }
.wordmark::before { content: ''; position: absolute; inset: -12px 0; }
.wordmark:focus-visible { outline: 1px solid var(--paper); outline-offset: 8px; }
.contact-main {
  position: relative;
  width: min(580px, calc(100% - 2 * var(--grid-left, var(--inset-x))));
  margin-left: var(--grid-left, var(--inset-x));
  padding: clamp(128px, 26vh, 240px) 0 140px;
}
h1 { font-size: clamp(46px, 5.2vw, 80px); font-weight: 450; letter-spacing: -.055em; line-height: 1.05; margin: 0; }
.inquiries { margin-top: 48px; }
.inquiries section + section { margin-top: 24px; }
.inquiries section + section::before { content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--sage); margin-bottom: 24px; }
h2 { font-size: 16px; font-weight: 500; line-height: 1.5; margin: 0; }
.inquiries a { display: inline-flex; align-items: flex-start; min-height: 44px; font-size: 15px; line-height: 1.5; margin-top: 2px; color: inherit; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.inquiries a:hover { color: var(--sage); }
.inquiries a:focus-visible { outline: 2px solid var(--sage); outline-offset: 6px; }
.skip { position: absolute; left: 24px; top: -100px; background: var(--paper); color: var(--forest); padding: 12px; z-index: 5; }
.skip:focus { top: 12px; }
@media (max-width: 800px) {
  .contact-main { padding-top: 136px; padding-bottom: 120px; }
  .inquiries { margin-top: 36px; }
  .contact-field::before { mask-image: radial-gradient(ellipse 95vw 360px at 0 260px, transparent 50%, #000 100%); }
}