/* Contact page */

.contact-main {
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-2xl) calc(var(--space-2xl) + var(--nav-height));
}

.contact-cv {
  max-width: min(90vw, 620px);
  /* Without this, the HTML width/height attributes (added for CLS) leave a
     `height` presentational hint in effect, pinning the box to the image's
     raw natural pixel height regardless of max-width scaling it down —
     same bug as the project images, same fix. */
  height: auto;
  box-shadow: 14px 14px 0 rgb(255 255 255 / 12%);
}

/* This is the only page that keeps the social/CV footer, pinned to the viewport bottom
   and matching the top navbar's height exactly */
.contact-main ~ .site-footer {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  height: var(--nav-height);
  margin-top: 0;
  background: var(--color-ink-translucent);
  backdrop-filter: blur(var(--blur-nav));
  /* Hardcoded, not var(--blur-nav) — see the matching comment on
     .site-header::before in css/layout.css: this specific -webkit-
     prefixed property fails to resolve a var() reference on at least one
     real, current Safari build (confirmed via getComputedStyle), falling
     back to its initial value (none) rather than rendering any blur. */
  -webkit-backdrop-filter: blur(12px);
}

.contact-main ~ .site-footer .footer__inner {
  height: 100%;
  align-items: center;
  padding-block: 0;
}

/* Same reasoning as the .site-header rule in css/layout.css: with the OS's
   "Reduce Transparency" setting on, Safari suppresses backdrop-filter
   entirely, so this swaps the translucent tint for the same solid
   var(--color-ink) contact.html's body.is-dark already uses, rather than
   leaving a see-through, unblurred bar. */
@media (prefers-reduced-transparency: reduce) {
  .contact-main ~ .site-footer {
    background: var(--color-ink);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}