/* Contact page — assets/css/contact.css
   Loaded only on is_page('contact'), after tokens.css and style.css.
   Mobile first; every colour, size and space comes from a var() token. */

/* --- hero --------------------------------------------------------------- */
/* Tight under the header, and tight into the section below: the page used to open with two wide
   empty bands — the hero's own padding plus the tinted section's — which was most of what a
   visitor saw before any content. */
.contact-hero{padding-block:var(--space-5) var(--space-7)}
.contact-hero__grid{display:grid;gap:var(--space-6);align-items:center}
.contact-hero__copy h1{max-width:22ch}
/* The picture in the media library (1086×1448) carries a band of empty frame above and below the
   scene it shows. The figure is given the proportions of the scene itself — the middle 926px of
   the file, so 18% is cut from the top and 18% from the bottom — and the image fills it from the
   centre. The photograph therefore opens level with the text beside it and no empty frame shows
   above or below it. Nothing is stretched: this is a straight cut of the two empty bands. */
.contact-hero__media{margin:0;aspect-ratio:1086/926;overflow:hidden}
.contact-hero__media img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 50%}

.contact-direct{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-3)}
.contact-direct__label{font-size:var(--fs-small);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--c-ink-mute)}
.contact-mail{font-family:var(--font-display);font-size:var(--fs-h3);color:var(--c-accent-strong);text-decoration-color:currentColor;word-break:break-word}

/* --- section heads ------------------------------------------------------ */
.contact-head{max-width:var(--wrap-narrow);margin-bottom:var(--space-6)}
.contact-head h2{max-width:30ch}
.contact-head .lead{margin-top:var(--space-2)}

/* --- what to send us ---------------------------------------------------- */
/* The tinted band that follows the hero starts close to it, so hero and brief read as one block
   rather than two strips of empty background. */
.contact-brief{padding-block-start:var(--space-8)}
.contact-brief__cards h3{margin-bottom:var(--space-2)}
.contact-brief__cards p:last-child{margin-bottom:0}
.contact-brief__note{margin-top:var(--space-5);margin-bottom:0;max-width:var(--measure)}

/* --- form --------------------------------------------------------------- */
.contact-form__form{background:var(--c-surface);border:var(--border-hair);border-radius:var(--r-md);padding:var(--space-5)}
.contact-form__grid{display:grid;gap:0}
.contact-form__actions{margin-top:var(--space-5);display:grid;gap:var(--space-3);justify-items:start}
.contact-form__actions .form-note{margin:0}

/* the honeypot: out of the layout, never focusable, still submitted */
.contact-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.field__error{color:var(--c-accent-strong);font-size:var(--fs-small);margin:var(--space-2) 0 0}
.field--invalid input,.field--invalid select,.field--invalid textarea{border-color:var(--c-accent)}
.field--invalid label{color:var(--c-accent-strong)}
.contact-req{color:var(--c-accent-strong)}

/* --- submission feedback ------------------------------------------------ */
.contact-alert{border:1px solid var(--c-line-strong);border-radius:var(--r-md);padding:var(--space-5);margin-bottom:var(--space-6)}
.contact-alert p{margin:0 0 var(--space-2);max-width:var(--measure)}
.contact-alert p:last-child{margin-bottom:0}
.contact-alert__title{font-family:var(--font-display);font-size:var(--fs-h3);line-height:var(--lh-tight)}
.contact-alert--ok{background:var(--c-surface);border-color:var(--c-line-strong)}
.contact-alert--error{background:var(--c-accent-wash);border-color:var(--c-accent)}
.contact-alert__list{padding-left:1.15em;margin:var(--space-2) 0 0;max-width:var(--measure)}

/* --- direct contact ----------------------------------------------------- */
.contact-details{margin-top:var(--space-6)}
.contact-details__title{margin-bottom:var(--space-3)}
.contact-details__list{display:grid;gap:var(--space-4);margin:0;border-top:var(--border-hair)}
.contact-detail{padding-top:var(--space-4);border-bottom:var(--border-hair);padding-bottom:var(--space-4)}
.contact-detail dt{font-size:var(--fs-small);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--c-ink-mute)}
.contact-detail dd{margin:var(--space-1) 0 0}

/* --- reference files ---------------------------------------------------- */
/* The input inherits the control styling from style.css; a file input only needs a readable button
   and a line height, so nothing here restyles the text fields beside it. */
.field--reference input[type=file]{padding:var(--space-2);line-height:1.4;cursor:pointer}
.field--reference input[type=file]::file-selector-button{font:inherit;margin-right:var(--space-3);padding:var(--space-2) var(--space-3);border:var(--border-hair);border-radius:var(--r-sm);background:var(--c-bg-sunk);color:var(--c-ink);cursor:pointer}
.field--reference input[type=file]:hover::file-selector-button{border-color:var(--c-accent);color:var(--c-accent-strong)}
.field__error--list{padding-left:1.15em;margin:var(--space-2) 0 0;max-width:var(--measure)}
.field__error--list li{margin-bottom:var(--space-1)}

/* --- inquiry stored, notification not sent ------------------------------ */
/* The same card as the thank-you state, marked: the inquiry did reach us, and the note under it is
   the part that needs the visitor's attention. */
.contact-alert--warn{border-color:var(--c-accent);background:var(--c-accent-wash)}
.contact-alert--warn .contact-alert__title{color:var(--c-accent-strong)}
.contact-alert--warn .contact-alert__note{border-top:var(--border-hair);margin-top:var(--space-3);padding-top:var(--space-3)}

/* --- from 720px --------------------------------------------------------- */
@media (min-width:720px){
  .contact-form__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-5)}
  .contact-form__form{padding:var(--space-6)}
}

/* --- from 900px --------------------------------------------------------- */
@media (min-width:900px){
  .contact-hero{padding-block:var(--space-6) var(--space-7)}
  /* The hero picture is a tall portrait, so the column it sits in is capped: the photograph no
     longer runs the full height of the first screen, and it lines up with the copy beside it
     instead of overhanging it. Its own proportions are untouched. */
  /* Copy and picture both start at the top edge, so the hero opens on one clean line and the copy
     no longer leaves an empty strip above itself. */
  .contact-hero__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,460px);gap:var(--space-7);align-items:start}
  .contact-hero__media{justify-self:end}
  .contact-details__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-6)}
}