/* Hallmark · shape: Feature Stack, playful pass, square blocks · genre: playful · theme: custom (Loom base, re-toned to the brief and opened into colour panels by the owner's word) · job: book · draw: 675a7b
 * hero: Banner, a coloured panel holding a head and one line (the contact page's panel holds the call) · nav: edge-aligned, wordmark and four text links · footer: mast · imagery: photographs, library 2, natural, arch and rounded crops · signature: the brief's own questions set as colour tiles · loom: DM Sans throughout, heads at 700
 * axes: light/grotesk-sans/warm · posture: full-palette (field olive tint, signal clay, seal forest, ink) · contrast: pass · fold: pass · copy: verbatim · v2.0.0 */
/* Hallmark · dismissed 42 · the bar is a wordmark and four plain text links to the brief's four pages, with no action and no rule under it; the button counted is the small-screen menu toggle */
/* Hallmark · dismissed 77 · the contact and legal pages are short by the brief: a call, three steps and a notice, or one list of what the document will hold */
/* Hallmark · pre-emit critique: P4 H4 E4 S3 R4 V4 · weakest: S, inner pages lean on shared tiles; each opens in its own colour panel and the contact page turns the panel into the call */
@import url("./site.css");

/* ---------- page head ---------- */
.phead { padding-block: var(--space-xl); }
.phead .lead { margin-top: var(--space-lg); max-width: 44ch; color: inherit; }
.phead__main { grid-column: 1 / span 7; }
.phead .close__act { grid-column: 9 / span 4; align-self: center; }
.phead .btn { margin-top: 0; border-color: var(--color-paper); background: var(--color-paper); color: var(--color-ink); }
.phead .btn:hover { border-color: var(--color-paper-3); background: var(--color-paper-3); }
.faq + .approach { margin-top: 0; }
.phead + .section, .phead + .section--s, .phead + .section--l { margin-top: var(--space-xl); }

/* ---------- statement block ---------- */
.stmt { margin-top: var(--space-xl); padding-block: var(--space-2xl); }
.start { margin-top: var(--space-xl); }
.faq { margin-top: var(--space-xl); }
.trabajo { margin-top: var(--space-xl); }
.stmt h2 { max-width: 30ch; }
.stmt__text { margin-top: var(--space-lg); }
.stmt__text .read + .read { margin-top: var(--space-md); }
.stmt__text a { text-underline-offset: 0.2em; }
.stmt .onward { margin-top: var(--space-xl); }

/* ---------- tiles, numbered ---------- */
.rows--ol { counter-reset: fila; }
.rows--ol > li { grid-template-columns: 3rem minmax(0, 1fr); align-items: center; counter-increment: fila; }
.rows--ol > li::before { content: counter(fila); display: grid; place-items: center; width: 2.5rem; height: 2.5rem; background: var(--color-ink); color: var(--color-paper); font: 700 var(--text-md)/1 var(--font-body); }

/* ---------- three tiles with heads ---------- */
.cols3--heads { margin-top: var(--space-xl); padding-top: 0; border-top: 0; gap: var(--space-md); }
.cols3--heads > div { padding: var(--space-xl); background: var(--color-paper-3); }
.cols3--heads > div:nth-child(2) { background: var(--color-olive-tint); }
.cols3--heads > div:nth-child(3) { background: var(--color-sage); }
.cols3--heads h3 { font-size: var(--text-title); max-width: 18ch; }
.cols3--heads h3 + p { margin-top: var(--space-sm); }
.cols3--heads p { font-size: var(--text-md); color: var(--color-ink-2); }

/* ---------- questions ---------- */
.qa { display: grid; gap: var(--space-sm); margin: 0; }
.qa > div { padding: var(--space-lg) var(--space-xl); background: var(--color-paper); }
.qa dt { font: 700 var(--text-title)/1.25 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-clay-deep); }
.qa dd { margin: var(--space-sm) 0 0; max-width: 62ch; color: var(--color-olive-deep); }

/* ---------- where next ---------- */
.onward { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); margin-top: var(--space-xl); }

@media (max-width: 60rem) {
  .phead, .stmt { padding-block: var(--space-xl); }
  .phead__main, .phead .close__act { grid-column: 1 / -1; }
  .phead .close__act { margin-top: var(--space-md); }
  .cols3--heads > div { padding: var(--space-lg); }
}
@media (max-width: 40rem) {
  .rows--ol > li { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .qa > div { padding: var(--space-md) var(--space-lg); }
}