/* Contact and the missing page: two quiet pages on the peach wall, each beside one photograph shown as a print. */
body.page-night { background: var(--wall); }

.contact, .lost { min-height: 100svh; padding: calc(var(--nav-h) + clamp(48px, 10vh, 120px)) var(--gutter) clamp(64px, 9vw, 120px); }
.contact-grid, .lost-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 96px); align-items: center; }

.contact h1 { margin: 0; font: 400 clamp(4.4rem, 11vw, 10rem)/.86 var(--font-display); letter-spacing: -.035em; }
.contact-lede { margin: 30px 0 0; max-width: 34em; color: var(--stone); font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.7; font-weight: 350; }
.contact .hairline { margin: 30px 0 0; max-width: 420px; }
.contact-status { margin: 22px 0 0; color: var(--on-night); }
.contact-methods { margin: 36px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-night); }
.contact-methods a { position: relative; display: grid; gap: 4px; padding: 18px 0; color: var(--on-night); text-decoration: none; border-bottom: 1px solid var(--rule-night); }
.contact-methods a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.contact-methods a:hover::after, .contact-methods a:focus-visible::after { transform: scaleX(1); }
.contact-methods small { color: var(--stone); font-size: .85rem; }
.contact-methods strong { font: 400 clamp(1.5rem, 2.4vw, 2.1rem)/1.15 var(--font-display); letter-spacing: -.01em; overflow-wrap: anywhere; transition: color .3s; }
.contact-methods a:hover strong { color: var(--gold); }
.contact-focus { margin: 26px 0 0; color: var(--stone); font-size: .92rem; }
.contact-photo, .lost-photo { margin: 0; }
.contact-photo picture, .lost-photo picture { display: block; width: 100%; height: 100%; }

.site-foot-slim { padding-top: 40px; }
.site-foot-slim .site-foot-row { margin-top: 0; border-top: 1px solid var(--rule-night); padding-top: 28px; }

.lost h1 { margin: 0; max-width: 11em; font: 400 clamp(3.2rem, 7.4vw, 7rem)/.95 var(--font-display); letter-spacing: -.03em; text-wrap: balance; }
.lost-copy p { margin: 26px 0 0; max-width: 30em; color: var(--stone); line-height: 1.7; }
.lost-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.lost-photo { max-width: 440px; justify-self: end; }

@media (max-width: 860px) {
  .contact-grid, .lost-grid { grid-template-columns: 1fr; }
  .lost-photo { justify-self: start; max-width: 80%; }
}