/* ==========================================================================
   contact
   ========================================================================== */

@layer pages {
  .contact__grid { display: grid; gap: var(--s-8); }
  .contact__aside { display: grid; gap: var(--s-6); align-content: start; }
  .contact__block { display: grid; gap: var(--s-2); justify-items: start; }
  .contact__mail { font-size: var(--fs-xl); font-weight: 300; letter-spacing: var(--track-head); line-height: 1.15; text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
  .contact__mail:hover { text-decoration-color: currentColor; }
  .contact__main { display: grid; gap: var(--s-5); align-content: start; }

  .form { display: grid; gap: var(--s-5); }
  .form__foot { display: grid; gap: var(--s-4); justify-items: start; padding-top: var(--s-3); }
  .form__privacy { font-size: var(--fs-sm); color: var(--mute); max-width: 52ch; }
  .form__privacy a { color: var(--ink-2); }
  .hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

  @media (min-width: 48em) {
    .form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
    .form .field--full, .form__foot { grid-column: 1 / -1; }
    .form__foot { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--s-6); }
  }
  @media (min-width: 64em) {
    .contact__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
    .contact__aside { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + var(--s-6)); align-self: start; }
    .contact__main { grid-column: 6 / -1; }
  }
}