@import url("../arsenal/statement.css");
/* assets/css/pages/about.css: About and Contact's own layout (plan.md, "About and Contact"); every color, size and
   corner from design\system.css's tokens, every component from design\components.css. */

/* the header: the words on the left under the wash, the train on the right */
@media (min-width: 1024px) {
  .page-about #top { min-height: min(720px, calc(100svh - var(--header-h))); }
  .page-about #top .page-top__copy { max-width: 40rem; }
  .page-about #top .page-top__title { font-size: min(var(--fs-display), calc(5.6vh + 1rem)); }
}

/* SearchSpotlight: the publication's own cover, framed */
.cover-frame { margin: 0; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-l); border: 1px solid var(--c-line); background: var(--c-paper); }
.cover-frame a, .cover-frame img { display: block; width: 100%; height: auto; }
.spot-links { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-4) 0 0; padding: 0; list-style: none; }

/* the contact part: the form beside the consultation and the details */
.contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; margin-top: var(--space-5); }
.contact__aside { display: grid; gap: var(--space-4); }
.contact__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.contact__list li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 10px; color: var(--c-ink); }
.contact__list span { font-weight: 700; color: var(--c-ink-soft); }
.contact__list a { color: var(--c-brand-text); font-weight: 700; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.form-grid .field--wide { grid-column: 1 / -1; }
.form-nav { display: flex; gap: 10px; margin-top: var(--space-4); }
.chips .chip-pic { flex: none; width: 26px; height: 26px; color: var(--c-brand); }
@media (max-width: 899px) {
  .contact { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
}
.contact__aside .human-card { margin-top: 0; }