@layer components {
  .form-panel {
    display: grid;
    gap: clamp(2rem, 1.6rem + 2vw, 3.5rem);
  }

  @media (min-width: 56rem) {
    .form-panel {
      grid-template-columns: 1fr 1fr;
    }
  }

  .contact-form {
    display: grid;
    gap: 1.1rem;
  }

  .form-field {
    display: grid;
    gap: 0.4rem;
  }

  .form-field label {
    font-size: var(--fs-small);
    font-weight: 600;
  }

  .form-field input,
  .form-field textarea {
    border: 1px solid var(--c-border);
    background: var(--c-white);
    padding: 0.85rem 1rem;
    font-size: var(--fs-body);
    min-height: 3rem;
    transition: border-color var(--dur-fast) var(--ease-out);
  }

  .form-field textarea {
    min-height: 8rem;
    resize: vertical;
  }

  .form-field input:focus-visible,
  .form-field textarea:focus-visible {
    border-color: var(--c-ink);
    outline: 2px solid var(--c-volt);
    outline-offset: 1px;
  }

  .form-field--consent {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .form-field--consent input {
    min-height: auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
  }

  .form-field--consent label {
    font-weight: 400;
    font-size: var(--fs-small);
    color: var(--c-ink-soft);
  }

  .form-field--consent a {
    text-decoration: underline;
    color: var(--c-ink);
  }

  .form-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .form-status {
    min-height: 1.5rem;
    font-size: var(--fs-small);
  }

  .form-status[data-state="ok"] {
    color: hsl(101 55% 30%);
  }

  .form-status[data-state="error"] {
    color: hsl(6 65% 42%);
  }

  .contact-info {
    display: grid;
    gap: 1.5rem;
    align-content: start;
  }

  .contact-info dt {
    font-size: var(--fs-mono);
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-ink-soft);
  }

  .contact-info dd {
    margin-top: 0.35rem;
    font-size: var(--fs-lead);
    font-family: var(--font-display);
  }

  .contact-info .divider {
    margin-block: 0.25rem;
  }
}