.contact-main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--content-gap); }
.contact-intro h1 { font-size: clamp(58px, 6.5vw, 88px); margin-bottom: 28px; }
.contact-intro .prose { font-size: 16px; }
.contact-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-block: 40px 28px; font-style: normal; font-size: 15px; }
.contact-details > a { white-space: nowrap; }
.contact-details > a:nth-child(1) { grid-area: 1 / 1; }
.contact-details > a:nth-child(2) { grid-area: 2 / 1; }
.contact-details > a:nth-child(3) { grid-area: 1 / 2; }
.contact-details > a:nth-child(4) { grid-area: 2 / 2; }
.contact-details a, .contact-details > div { display: flex; align-items: flex-start; gap: 16px; }
.contact-details a { justify-self: start; }
.contact-details svg { width: 20px; height: 20px; margin-top: 3px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.contact-details a:hover span, .contact-small a:hover { text-decoration: underline; text-underline-offset: 5px; }
.contact-small { font-size: 12px; line-height: 1.8; color: var(--muted); max-width: 420px; }
.contact-small a { text-decoration: underline; text-underline-offset: 4px; }
.contact-compose { border-left: 1px solid var(--line); padding-left: clamp(26px, 4vw, 48px); }
.contact-compose h2 { font-size: 48px; margin-bottom: 20px; }
.contact-field { margin-bottom: 22px; }
.contact-field label { display: block; font-size: 13px; margin-bottom: 8px; }
.contact-field label span { font-size: 11px; color: var(--muted); }
.contact-field input, .contact-field select, .contact-field textarea { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 5px; background: var(--parchment); color: var(--charcoal); font: inherit; font-size: 15px; padding: 12px 14px; }
.contact-field textarea { resize: vertical; }
.contact-field [aria-invalid="true"] { border-color: #93482f; }
.contact-error { font-size: 12px; color: #93482f; margin: 6px 0 0; }
.contact-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#contact-status { margin-top: 18px; }
.contact-compose button:disabled { opacity: .7; cursor: wait; transform: none; }
.contact-location { background: var(--parchment); color: var(--forest); }
.contact-location-paper { background: var(--paper); }
.contact-locations-title { font-size: clamp(28px, 3vw, 38px); margin-bottom: clamp(44px, 5vw, 72px); }
.contact-location-copy h3 { font-size: clamp(40px, 4.1vw, 60px); line-height: 1.08; letter-spacing: -.015em; margin-bottom: 30px; }
.contact-location-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--content-gap); align-items: center; }
.contact-map { background: var(--paper); color: var(--forest); border-radius: var(--radius); overflow: hidden; min-height: 360px; display: grid; }
.contact-location-paper .contact-map { background: var(--parchment); }
.contact-map-consent { padding: 45px; align-self: center; }
.contact-location-address { font-family: var(--heading); font-size: 30px; line-height: 1.3; }
.contact-map-consent .contact-small { margin: 18px 0 0; }
.contact-map iframe:focus-visible { outline: 3px solid #93482f; outline-offset: -5px; }
.contact-location-photo { margin-top: 28px; width: 100%; border-radius: var(--radius); }
.contact-map iframe { width: 100%; height: 400px; border: 0; }
@media (max-width: 700px) {
 .contact-main, .contact-location-layout { grid-template-columns: 1fr; gap: 42px; }
 .contact-main { padding-block: 55px 70px; }
 .contact-intro h1 { font-size: clamp(52px, 12vw, 68px); }
 .contact-compose { border-left: 0; border-top: 1px solid var(--line); padding: 35px 0 0; }
 .contact-compose .button { width: 100%; }
 .contact-map { min-height: 300px; }
 .contact-map-consent { padding: 30px; }
}

@media (max-width: 360px) { .contact-details { grid-template-columns: minmax(0, 1fr); } .contact-details > a:nth-child(n) { grid-area: auto; } }
/* Optional WordPress featured photo, within the approved description column. */
.contact-location-photo { aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
.contact-feedback h3 { margin-top: 18px; }
/* Preview coordinates share a 300 × 440 stage, preserving the can/rope anchor. */
.contact-intro { container-type: inline-size; }
.contact-art { width: calc(100% + var(--content-gap)); overflow: hidden; pointer-events: none; }
.contact-art-scene { position: relative; width: 300px; aspect-ratio: 300 / 440; pointer-events: none; transform: translateX(-34.985406%); }
.contact-art-scene img { position: absolute; display: block; max-width: none; height: auto; pointer-events: none; }
.contact-art-background { left: 143.333333%; top: 31.818182%; width: 143.333333%; z-index: 1; }
.contact-art-mascot { left: 26.666667%; top: 5.454545%; width: 100%; z-index: 2; }
.contact-art-connector { left: 106%; top: 39.772727%; width: 50%; z-index: 3; }
@container (max-width: 599px) { .contact-art-scene { width: min(250px, 75cqw); } }
@media (max-width: 700px) {
 .contact-art { width: 100%; }
}