/* Article: one centred 720 px column as in the layouts; body paragraphs capped at 32em, about 70 characters per line. */
.art { max-width: calc(720px + 2 * var(--gutter)); padding-top: clamp(32px, 5.5vw, 80px); padding-bottom: 40px; }

.art-crumb ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; font-size: 14px; color: var(--accent); }
.art-crumb li + li::before { content: '/'; padding: 0 .6em; color: var(--muted); }
.art-crumb li { display: inline-flex; align-items: center; min-height: 44px; }
.art-crumb a { display: inline-flex; align-items: center; min-height: 44px; }

.art h1 { font-size: clamp(40px, 5vw, 72px); line-height: 1.02; margin: 0 0 18px; }
.art-meta { font-size: 14px; color: var(--muted); margin: 0 0 22px; }
.art-lead { font: 500 clamp(19px, 1.6vw, 23px)/1.5 var(--sans); color: var(--ink); margin: 0 0 32px; }
.art-hero { width: 100%; aspect-ratio: 780 / 439; object-fit: cover; margin: 0 0 clamp(36px, 4vw, 48px); }

.art-sec { margin: 0 0 34px; }
.art-sec h2 { font: 600 clamp(21px, 1.8vw, 26px)/1.3 var(--sans); margin: 0 0 12px; }
.art-sec p { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.65; color: var(--ink2); max-width: 32em; margin: 0; }

.art-card { margin: 8px auto 40px; max-width: 300px; }
.art-card .phone { width: min(100%, 260px); margin: 0 auto 12px; }
.art-card figcaption { font-size: 13px; line-height: 1.45; color: var(--muted); text-align: center; }

/* Checklist: real checkboxes so it can be ticked on the phone before leaving. Nothing is stored. */
.art-check { background: var(--panel); border: var(--rule); border-radius: var(--r); padding: 24px 20px 16px; margin: 8px 0 40px; }
.art-check h2 { font: 600 20px/1.3 var(--sans); margin: 0 0 10px; }
.art-check label { display: flex; align-items: center; gap: 14px; min-height: 44px; font-size: 17px; font-weight: 500; color: var(--ink2); cursor: pointer; }
.art-check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }

/* Closing block of a post or the guide, after the T5 end mark. Shared by post.mjs and article.mjs. */
.end-cta { max-width: 32em; padding-top: 28px; margin-bottom: clamp(48px, 6vw, 72px); } /* related posts follow */
.end-cta h2 { font: 700 clamp(28px, 3vw, 34px)/1.05 var(--disp); color: var(--ink); margin-bottom: 14px; }
.end-cta p { color: var(--ink2); font-size: 17px; margin-bottom: 24px; }
.end-cta .btn-row { gap: 28px; } /* desktop: button + text link; phone: stacked, gap 8 px */
@media (max-width: 760px) { .end-cta .btn-row { gap: 8px; } }

/* 404 on the wide wrap like the hero: T4 reticle 96 px (72 px phone), 28 px above the mono row; the row is 14 px above the h1. */
.nf { padding-top: clamp(32px, 8vw, 116px); padding-bottom: clamp(56px, 8vw, 120px); }
.nf .reticle-nofix { display: block; width: 96px; height: 96px; margin: 0 0 28px; }
.nf-status { font: 400 14px/1.4 var(--mono); color: var(--muted); margin: 0 0 14px; }
.nf h1 { font-size: clamp(36px, 6.4vw, 84px); margin-bottom: 24px; }
.nf .lead { margin-bottom: 36px; }
.nf .btn-row { gap: 28px; }
.nf-links { display: flex; gap: 28px; }
@media (max-width: 760px) {
  .nf .reticle-nofix { width: 72px; height: 72px; }
  .nf .btn-row { gap: 8px; }
}

@media (min-width: 640px) {
  .art-check { padding: 28px 28px 20px; }
  .art-card .phone { width: 300px; }
}