/* Chapel Walls v1: one quiet page. A rose window, a name, the painting, two offers, where to follow. Left-aligned column, hairlines between. */
html, body { height: 100%; }
body { font-size: var(--text-public); }
.page { min-height: 100%; max-width: 680px; margin: 0 auto; padding: max(var(--space-8), 9vh) var(--space-5) var(--space-7);
        display: flex; flex-direction: column; gap: var(--space-7); }

.rose { font-size: 11px; line-height: 1.05; }
h1 { font: 500 clamp(52px, 14vw, 88px)/0.95 var(--display); letter-spacing: -0.02em; margin: var(--space-5) 0 var(--space-4); }
.line { color: var(--muted); margin: 0; max-width: var(--measure); text-wrap: balance; }
.line + .line { margin-top: var(--space-1); }

.still { margin: 0; }
.still img { display: block; width: 100%; height: auto; }
.still figcaption { color: var(--muted); font-size: var(--text-md); margin-top: var(--space-3); max-width: var(--measure); }

.offer { border-top: 1px solid var(--hair); padding-top: var(--space-6); }
.offer h2 { font: 500 var(--title-md)/1.1 var(--display); margin: 0 0 var(--space-3); text-wrap: balance; }
.offer p { margin: 0 0 var(--space-5); max-width: var(--measure); }
.price-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.price { font: 500 var(--title-md)/1 var(--display); font-variant-numeric: lining-nums; }
.act { display: inline-block; color: var(--gold); font-weight: 500; text-decoration: underline; text-decoration-color: var(--gold-soft);
       text-underline-offset: 5px; padding: var(--space-2) 0; }
.act::after { content: " →"; }
.act:hover { text-decoration-color: var(--gold); }
.soon { color: var(--muted); }

.links { list-style: none; margin: 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.links a { color: var(--gold); padding: var(--space-2) 0; display: inline-block; }

.words { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); margin: 0;
         border-top: 1px solid var(--hair); padding-top: var(--space-5); }
.words .when { color: var(--gold); white-space: nowrap; }

.contact { margin: 0; }
.contact a { color: var(--gold); }
footer { margin-top: auto; color: var(--muted); font-size: var(--text-md); display: flex; justify-content: space-between; gap: var(--space-4); }
.mark-small { font-size: 11px; line-height: 1.05; }

/* Public readability (from PETER's go-live review): skip link, 15px small print, wrapping on narrow screens. */
.skip { position: absolute; top: -100px; left: 16px; padding: 12px; background: var(--ground); z-index: 10; }
.skip:focus { top: 8px; }
footer, .still figcaption { font-size: var(--text-public); }
footer { flex-wrap: wrap; align-items: baseline; }
main p, main li { overflow-wrap: anywhere; }
.houses a, .words, .price-row { flex-wrap: wrap; }

/* Legal and support pages: one readable column, serif section names, 15px body. */
.legal .home { display: inline-flex; flex-direction: column; gap: var(--space-3); text-decoration: none; }
.legal .home .n-name { font-size: var(--title-sm); }
.legal h1 { margin-top: var(--space-6); }
.legal article { max-width: var(--measure); }
.legal article h2 { font: 500 var(--title-sm)/1.15 var(--display); margin: var(--space-7) 0 var(--space-3); text-wrap: balance; }
.legal article p { margin: 0 0 var(--space-4); line-height: 1.65; }
.legal article a, footer nav a { color: var(--gold); }
footer nav { display: flex; flex-wrap: wrap; gap: var(--space-3); flex-basis: 100%; }
footer nav a { display: inline-block; min-height: 44px; padding-block: 10px; }