/* Dedicated contact page; no form assets are needed by the homepage. */
.contact-page { display: flex; min-height: 100vh; min-height: 100svh; flex-direction: column; }
.contact-page main { flex: 1; }
.contact-page .contact-inner { padding-block: 48px 72px; }
.contact-page h1 { max-width: 24ch; font-size: clamp(36px, 4vw, 48px); font-weight: 500; line-height: 1.15; }
.contact-with-form .contact-form { position: relative; width: 100%; max-width: 720px; margin-top: 18px; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); text-align: left; }
.contact-form [hidden], .contact-fallback[hidden] { display: none !important; }
.contact-fields { display: flex; flex-direction: column; gap: 20px; min-width: 0; margin: 0; padding: 0; border: 0; }
.contact-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.contact-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.contact-field label { color: var(--bone); font-size: 14px; font-weight: 500; line-height: 1.5; }
.contact-optional { margin-left: 4px; color: var(--muted); font-size: 12px; font-weight: 400; }
.contact-field :is(input, textarea) { width: 100%; min-width: 0; min-height: 50px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--ink); color: var(--bone); font: 400 16px/1.5 var(--sans); }
.contact-field textarea { min-height: 128px; resize: vertical; }
.contact-field :is(input, textarea)::placeholder { color: var(--faint); opacity: 1; }
.contact-field [aria-invalid="true"] { border-color: #f1a69b; }
/* Quiet one-pixel focus border, not a bright ring around the whole field. */
.contact-field :is(input, textarea):focus { outline: none; border-color: var(--muted); }
@media (forced-colors: active) {
  .contact-field :is(input, textarea):focus { outline: 2px solid Highlight; outline-offset: 0; }
}
.contact-form .contact-field-error { color: #f1a69b; font-size: 14px; line-height: 1.5; }
.contact-trap { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.contact-trap input { width: 1px; height: 1px; min-width: 0; padding: 0; border: 0; }
.contact-verification { width: 100%; min-width: 0; }
.contact-actions { display: flex; align-items: center; gap: 20px; }
.contact-submit { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 12px; min-width: 172px; min-height: 52px; padding: 12px 12px 12px 18px; border: 1px solid var(--accent); border-radius: var(--button-radius); background: rgb(207 221 168 / 8%); color: var(--bone); font: 500 16px/1.4 var(--sans); cursor: pointer; }
.contact-submit > [aria-hidden] { flex-shrink: 0; font-size: 20px; }
.contact-submit:not(:disabled):hover { background: rgb(207 221 168 / 14%); }
.contact-submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.contact-submit:disabled { cursor: not-allowed; opacity: .55; }
.contact-form .contact-privacy { color: var(--muted); font-size: 13px; line-height: 1.6; text-align: center; text-wrap: pretty; }
.contact-form .contact-status { margin-top: 20px; color: #f1a69b; font-size: 15px; line-height: 1.6; }
.contact-status[data-state="success"], .contact-status[data-state="pending"] { color: var(--accent); }
.contact-form .contact-mode-note, .contact-form .contact-edit-note { margin-bottom: 20px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.contact-with-form .contact-fallback { margin: 0; color: var(--muted); font-size: 15px; }
.contact-fallback .contact-email { min-height: 44px; gap: 6px; font-size: 15px; }
.contact-support { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 24px; }
.contact-back { margin-top: 6px; color: var(--muted); }
@media (min-width: 761px) {
  .contact-form .contact-privacy { white-space: nowrap; }
}
/* Fit ordinary desktop windows without cropping the widget, status or footer.
   Content can still grow/scroll for long errors, resized textareas and zoom. */
@media (min-width: 900px) and (min-height: 600px) {
  .contact-page > .header .nav { min-height: 64px; }
  .contact-page main { display: grid; align-items: center; }
  .contact-page .contact-inner { gap: 8px; padding-block: 8px; }
  .contact-page h1 { font-size: clamp(36px, 4.5svh, 42px); }
  .contact-page .contact .section-copy { line-height: 1.5; }
  .contact-page .contact-form { margin-top: 0; padding: 16px; }
  /* Reserve one line so successful submission doesn't move the form. */
  .contact-page .contact-form:has(.contact-status[hidden]) { padding-bottom: 48px; }
  .contact-page .contact-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; }
  .contact-page .contact-fields > :is(.contact-row, .contact-field) { grid-column: 1 / -1; }
  .contact-page .contact-field { gap: 4px; }
  .contact-page .contact-field input { min-height: 48px; padding-block: 10px; }
  .contact-page .contact-field textarea { height: clamp(80px, calc(100svh - 640px), 112px); min-height: 80px; padding-block: 10px; }
  .contact-page .contact-verification { grid-column: 1; }
  .contact-page .contact-actions { display: contents; }
  .contact-page .contact-submit { grid-column: 2; align-self: center; min-height: 48px; padding-block: 10px; }
  .contact-page .contact-submit > [aria-hidden] { line-height: 1; }
  .contact-page .contact-fields:has(> .contact-verification[hidden]) .contact-submit { grid-column: 1 / -1; justify-self: start; }
  .contact-page .contact-privacy { grid-column: 1 / -1; }
  .contact-page .contact-status { margin-top: 8px; }
  .contact-page .contact-back { margin-top: 0; }
  .contact-page .footer-inner { padding-block: 4px; }
}
@media (prefers-reduced-motion: no-preference) {
  .contact-submit:not(:disabled) { transition: transform .18s ease; }
  .contact-submit:not(:disabled):is(:hover, :focus-visible) { transform: translateY(-1px); }
}
@media (max-width: 760px) {
  .contact-page .contact-inner { gap: 12px; padding-block: 24px; }
  .contact-page .contact-form { margin-top: 8px; }
  .contact-fields { gap: 16px; }
  .contact-field label { font-size: 16px; }
  .contact-field textarea { height: 112px; min-height: 112px; }
  .contact-optional { font-size: 16px; }
  .contact-actions { align-items: stretch; flex-direction: column; gap: 14px; }
  .contact-submit { width: 100%; }
  .contact-form :is(.contact-status, .contact-field-error, .contact-mode-note, .contact-edit-note),
  .contact-with-form .contact-fallback, .contact-fallback .contact-email { font-size: 16px; }
}
@media (max-width: 640px) {
  .contact-with-form .contact-form { padding: 20px 16px; border-radius: 16px; }
  .contact-row { grid-template-columns: minmax(0, 1fr); }
}