/* Atelier — contact and commission enquiry page. */

.at-contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    padding-block: clamp(2.5rem, 4vw, 4.5rem);
    align-items: start;
}

.at-contact-aside h1 { font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.25rem); margin-bottom: 0.4em; }
.at-contact-aside p { color: var(--at-muted, #6b625a); margin-bottom: 2rem; }

.at-contact-list { display: grid; gap: 1.25rem; }
.at-contact-item { display: flex; gap: 1rem; align-items: flex-start; }
.at-contact-item .at-icon { color: var(--at-gilt, #b08d57); margin-top: 3px; }
.at-contact-item h3 {
    font-family: var(--at-sans, sans-serif);
    font-size: 0.625rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--at-faint, #9a8f85);
    margin-bottom: 0.25rem;
}
.at-contact-item p { margin: 0; font-size: 0.9375rem; color: var(--at-ink, #2a2724); }

.at-form { display: grid; gap: 1.25rem; }
.at-form .at-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.at-form .at-btn { justify-self: start; }

@media (max-width: 860px) {
    .at-contact { grid-template-columns: 1fr; }
    .at-form .at-row { grid-template-columns: 1fr; }
}

/* ── "About <piece>" above the contact form ────────────────────────────────
   Shown when someone arrives from a piece page's "Ask a question". It is the
   receipt for that click: without it the visitor has left the painting behind
   and has to name it again in the message, which is exactly the friction the
   link was meant to remove. Same band-and-gilt idiom as the form notices.
   ───────────────────────────────────────────────────────────────────────── */
.at-form-about {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.65rem;
    margin: 0 0 1.5rem;
    padding: 0.9rem 1.1rem;
    background: var(--at-band, #f2ebe1);
    border-left: 2px solid var(--at-gilt, #b08d57);
}
.at-form-about .at-icon { color: var(--at-gilt, #b08d57); }
.at-form-about span {
    font-family: var(--at-sans, sans-serif);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--at-muted, #6b625a);
}
.at-form-about a {
    font-family: var(--at-serif, Georgia, serif);
    font-size: 1.0625rem;
    color: var(--at-ink, #2a2724);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--at-rule, #e4dbcf);
    transition: color 0.25s var(--at-ease, ease), text-decoration-color 0.25s var(--at-ease, ease);
}
.at-form-about a:hover { color: var(--at-gilt, #b08d57); text-decoration-color: currentColor; }