/* Hallmark · macrostructure: Split Studio (lean: Narrative Workflow band) · tone: grounded, direct, dignified · anchor hue: brick 29° · page: Housing
 * theme: studied-DNA via design.md "limestone and brick" (locked; pages share it) · nav: N1b · footer: Ft3 (verbatim from index.html)
 * Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57)
 * Page layer over tokens.css + site.css. Tokens only: no raw colours, fonts or off-scale spacing.
 * Shared-component candidates kept here per the Phase 3 brief: .page-head--wide (+ __caption),
 * .facts (ledger, same as treatments.css), stacked .quote-inline, .cta-band__copy.
 */

/* ── Page head: the house photo is a 2:1 wide shot, so it takes the full measure under the copy ── */
.page-head--wide .page-head__grid { align-items: start; }
.page-head--wide .plate img { aspect-ratio: 2 / 1; object-position: 50% 62%; }
.page-head__caption { margin-top: var(--space-xs); max-width: var(--measure); font-size: var(--text-sm); color: var(--color-text-muted); }
@media (min-width: 60rem) {
  .page-head--wide .page-head__copy { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--space-2xl); }
}

/* ── What's included ── */
/* Facts sheet: label + value rows on hairlines, under a 2px ink rule (same rule set as admissions.css and
 * family-program.css, so it can lift into site.css as one shared component) */
@media (min-width: 40rem) { .facts > div { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); } }

/* ── Step-down note: a short, narrow band between the two photo splits ── */
.step-down { padding-block: var(--space-2xl); }
.step-down__inner { display: grid; gap: var(--space-md); justify-items: start; }

/* ── In clients' words: the quotes sit beside the kitchen they describe ── */
.voices { padding-block: var(--space-3xl) var(--space-2xl); }
.voices .quote-inline + .quote-inline { padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-control); }

/* ── Closing call band: the copy column stacks heading, line and link ── */