/* Oak & Mason, the Contact page, v3 draft. Builds on om-tokens.css and om.css.
   Built on 26 Sep 2026 from the Contact canvas as recommended: the ways to reach us beside the form in the first
   screen (B), the subject as a list (A), answers elsewhere on the site, and office, hours and company in three
   columns (B). Class prefix om-; these move into om.css and the design system once signed off. The options not
   chosen live on the canvas (project/contact.css). */

[id="message"], [id="answers"], [id="where"] { scroll-margin-top: 24px; }

/* A small mono label, for the ways to reach us and the columns of details */
.om-label { margin: 0; font: 400 12px/18px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }

/* First screen: the ways to reach us beside the form */
.om-contact { padding: 104px 0 0; }
.om-contact__grid { display: grid; gap: 40px; }
.om-contact__intro { display: grid; gap: 22px; align-content: start; justify-items: start; }
.om-contact__title { margin: 0; max-width: 11em; font-family: var(--font-serif); font-weight: 400; font-size: 38px; line-height: 42px; letter-spacing: -0.03em; font-variation-settings: 'opsz' 72; color: var(--slate-deep); text-wrap: balance; }
.om-contact__lead { margin: 0; max-width: 32em; font: 400 17px/27px var(--font-sans); letter-spacing: -0.01em; color: var(--ink-muted); text-wrap: pretty; }
@media (min-width: 1024px) {
  .om-contact { padding-top: 136px; }
  .om-contact__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; align-items: start; }
  .om-contact__title { font-size: 64px; line-height: 68px; }
  .om-contact__lead { font-size: 18px; line-height: 29px; }
}
@media (prefers-reduced-motion: no-preference) {
  .om-contact__intro > * { animation: om-rise .9s var(--om-ease) both; }
  .om-contact__intro > :nth-child(2) { animation-delay: .06s; }
  .om-contact__intro > :nth-child(3) { animation-delay: .12s; }
  .om-contact__intro > :nth-child(4) { animation-delay: .18s; }
  .om-formcard { animation: om-rise .9s var(--om-ease) .24s both; }
}

/* The ways to reach us: ruled rows of a label, the number or address, and when */
.om-ways { width: 100%; margin: 8px 0 0; border-top: 1px solid var(--line-strong); }
.om-ways__row { display: grid; gap: 4px; padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.om-ways__row dd { display: grid; gap: 2px; justify-items: start; margin: 0; }
.om-ways__main { font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 32px; letter-spacing: -0.015em; color: var(--slate-deep); text-decoration: none; border-radius: 2px; }
.om-ways__main:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.om-ways__when { font: 400 15px/22px var(--font-sans); color: var(--ink-muted); }
@media (min-width: 1024px) { .om-ways__row { grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: baseline; } }

/* The form, in a stone card */
.om-formcard { display: grid; gap: 22px; box-sizing: border-box; padding: 28px 20px 32px; border-radius: var(--radius-lg); background: var(--stone); }
.om-formcard__title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 30px; line-height: 36px; letter-spacing: -0.02em; font-variation-settings: 'opsz' 60; color: var(--slate-deep); }
.om-msgform { position: relative; display: grid; gap: 16px; margin: 0; }
.om-msgform .om-form-row > .om-field { flex-basis: 180px; }
.om-field__input--select { -webkit-appearance: none; appearance: none; padding-right: 48px; background: var(--paper) var(--om-i-arrow-d) no-repeat right 16px center / 16px 16px; cursor: pointer; }
.om-field__input--area { min-height: 112px; resize: vertical; }
.om-msgform__foot { display: grid; gap: 16px; justify-items: start; }
.om-msgform .om-field__hint a { color: var(--ink); }
@media (min-width: 1024px) { .om-formcard { gap: 24px; padding: 36px 40px 40px; } }
/* Once the message is sent, js/lp-form.js hides the form and puts this note in its place; the card's own title goes too */
.om-formcard:has(.contact__sent) .om-formcard__title { display: none; }
.contact__sent { display: grid; gap: 14px; scroll-margin-top: 120px; } /* clear of the sticky nav pill when scrolled to */
.contact__sent:focus { outline: none; }
.contact__sent-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 30px; line-height: 36px; letter-spacing: -0.02em; font-variation-settings: 'opsz' 60; color: var(--slate-deep); text-wrap: balance; }
.contact__sent-text { margin: 0; max-width: 32em; font: 400 17px/27px var(--font-sans); color: var(--ink-muted); text-wrap: pretty; }
.contact__sent-text a { color: var(--ink); text-underline-offset: 3px; }
.contact__sent .om-field__hint { margin: 4px 0 0; }
/* The spam trap: hidden from people, often filled in by bots */
.om-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Messages from the site's form scripts: lp-form.js puts a send error above the button, form-validate.js adds a line
   under the email and phone fields (an error, or a suggested correction with a button to accept it) */
.lp-form__error { margin: 0; padding: 10px 14px; border-radius: var(--radius-sm); background: #a3392c14; font: 500 14px/20px var(--font-sans); color: var(--danger); }
.lp-form__error:empty { display: none; }
.field-msg { display: block; margin: 0; font: 400 14px/20px var(--font-sans); color: var(--ink-muted); }
.field-msg:empty { display: none; }
.field-msg--err { font-weight: 500; color: var(--danger); }
.field-msg--sug { color: var(--ink-soft); }
.field-msg-btn { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Answers elsewhere on the site: a ruled list of links, two by two on desktop */
.om-linklist { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.om-linklist > li { border-bottom: 1px solid var(--line); }
.om-linklist a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: center; padding: 22px 0 24px; color: var(--ink); text-decoration: none; }
.om-linklist__title { font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: 30px; letter-spacing: -0.01em; color: var(--slate-deep); }
.om-linklist__text { grid-column: 1; font: 400 16px/25px var(--font-sans); color: var(--ink-muted); }
.om-linklist .om-chip { grid-column: 2; grid-row: 1 / span 2; color: var(--ink); }
.om-linklist a:hover .om-linklist__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
@media (min-width: 1024px) { .om-linklist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; } }

/* The last section before the footer: the page has no closing panel, so the footer's own top space is enough */
.om-section--end { padding-bottom: 0; }

/* Office, hours and company: three columns between rules */
.om-where { display: grid; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.om-where__col { display: grid; gap: 10px; align-content: start; padding: 28px 0; }
.om-where__col + .om-where__col { border-top: 1px solid var(--line); }
.om-where__text { margin: 0; font: 400 17px/27px var(--font-sans); color: var(--ink); }
.om-where__col .om-link { justify-self: start; margin-top: 6px; }
@media (min-width: 768px) {
  .om-where { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .om-where__col { padding: 36px 40px 40px; }
  .om-where__col:first-child { padding-left: 0; }
  .om-where__col:last-child { padding-right: 0; }
  .om-where__col + .om-where__col { border-top: 0; border-left: 1px solid var(--line); }
}