/* =====================================================================
   80 · CONTACT  —  polaroid, title, details
   Sizes: --contact-title, --contact-text-fs, --polaroid-w in 00-settings.css
   ===================================================================== */

.contact { display: grid; grid-template-columns: 5fr 7fr; align-items: center; gap: clamp(24px, 5vw, 80px); padding: calc(var(--top) + 2vh) var(--gutter) max(3vh, env(safe-area-inset-bottom, 0px)); min-height: 100%; }
.contact__polaroid { position: relative; justify-self: end; width: min(100%, var(--polaroid-w)); }
.contact__polaroid img.polaroid { width: 100%; }
.contact__polaroid .sig { position: absolute; left: -2%; bottom: 2%; width: 78%; }
.contact__title { font-size: var(--contact-title); margin-bottom: .45em; }
.contact__block { font-size: var(--contact-text-fs); line-height: 1.6; letter-spacing: 0.04em; }
.contact__block .pill { margin-bottom: 14px; }
.contact__block a { text-decoration: none; }
.contact__block a:hover { text-decoration: underline; text-underline-offset: .2em; }
.contact__foot { grid-column: 1 / -1; align-self: end; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #bdbdbd; }

/* Portrait: everything in one column, polaroid first */
@media (orientation: portrait) {
  .contact { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 28px; padding-top: calc(var(--top) + 16px); }
  .contact__polaroid { justify-self: start; margin-left: 4%; }
  .contact__foot { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* Phone landscape: polaroid left, text right, the page scrolls if needed */
@media (orientation: landscape) and (max-height: 500px) {
  .contact { grid-template-columns: auto minmax(0, 1fr); gap: 32px; padding-top: calc(var(--top) + 10px); }
  .contact__polaroid { justify-self: start; width: var(--polaroid-w); }
  .contact__title .ln { white-space: nowrap; }
  .contact__foot { font-size: 12px; }
  .contact__foot .legal { font-size: 10px; }
}