/* Contact page — a quiet writing-desk invitation. */
.contact-page { background: var(--parchment); }
.contact-hero { position: relative; background: #4a2d1d; }
.contact-hero-media { display: block; margin: 0; }
.contact-hero-media img { display: block; width: 100%; height: clamp(300px, 32vw, 430px); object-fit: cover; }
.contact-hero-content { position: absolute; inset: 0; display: flex; align-items: center; }
.contact-hero-content .container { width: 100%; }
.contact-hero-copy { max-width: 530px; margin-left: auto; padding: 32px 5% 32px 28px; }
.contact-breadcrumb { margin: 0 0 22px; color: #70543D; font-family: var(--display); font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; }
.contact-breadcrumb a { color: inherit; }
.contact-hero h1 { margin: 0; color: #3d2015; font-size: clamp(2.6rem, 5vw, 4.8rem); line-height: 1; }
.contact-hero p { max-width: 480px; margin: 17px 0 0; color: #543627; font-family: var(--serif); font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.6; }
.contact-section { padding: clamp(66px, 8vw, 108px) 0; }
.contact-grid { gap: clamp(42px, 7vw, 94px); }
.contact-form-panel { padding: clamp(26px, 4vw, 46px); background: var(--cream); border: 1px solid var(--line); }
.contact-form-panel h2 { margin: 0 0 24px; font-size: 2rem; }
.contact-alert { margin-bottom: 18px; padding: 14px 18px; font-family: var(--serif); }
.contact-alert.error { background: #fde8e8; border: 1px solid #f8c9c9; color: #8b1e1e; }
.contact-alert.success { background: var(--parchment); border: 1px solid var(--gold); color: var(--forest); font-size: 1.1rem; }
.contact-info { padding-top: 12px; }
.contact-info::before { content: 'A considered conversation'; display: block; margin-bottom: 24px; color: var(--gold-dk); font-family: var(--display); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; }
/* These were <h4> for their styling, but that skipped a heading level after
   the page's <h2>. They are <h3> now and keep the same small-caps look. */
.info-block h3 {
    font-size: 1rem; margin: 0 0 .6rem; letter-spacing: .1em;
    text-transform: uppercase; font-family: var(--display); color: var(--brown);
}
.info-block { padding: 0 0 23px; margin-bottom: 23px; border-bottom: 1px solid var(--line); }
.info-block:last-child { margin-bottom: 0; }
.contact-info h4 { margin: 0 0 8px; color: var(--maroon); font-family: var(--display); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.contact-info p { margin: 0; color: #765D47; line-height: 1.65; }
@media (max-width: 720px) {
    .contact-hero-content { position: static; background: var(--cream); }
    .contact-hero-copy { max-width: none; margin: 0; padding: 38px 24px 46px; }
    .contact-hero-media img { height: 220px; aspect-ratio: auto; object-position: 28% center; }
}