/* ─────────────────────────────────────────────────────────────────────────
   Pure Maintenance Wisconsin — articles, case studies and their indexes.
   Loaded after wi.css by the pages generate-posts-wi.mjs writes.
   Reading pages: one ~68ch column, the journal serif for headings, quiet
   devices (callouts, step rail, check lists) that carry structure the
   writer already gave the text. Case studies lead with a summary panel and
   a to-scale before/after spore bar built from numbers in the body.
   ───────────────────────────────────────────────────────────────────────── */

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Breadcrumb ── */
.crumbs ol { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 0.9rem; color: var(--color-text-tertiary); }
.crumbs li + li::before { content: "/"; margin-right: 0.35rem; color: var(--color-border-default); }
.crumbs a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { color: var(--color-text-primary); }
.crumbs [aria-current] { color: var(--color-text-secondary); }

/* ── Article header ── */
.post-head { padding: 3rem 0 2.5rem; background: var(--color-surface-subtle); border-bottom: 1px solid var(--color-border-subtle); }
.post-head .container > h1 { max-width: 52rem; font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.4rem); line-height: 1.1; }
.post-head h1 .h1-main { display: inline; }
.post-head h1 .sep { color: var(--color-text-tertiary); }
.post-head h1 .h1-rest { color: var(--color-brand-primary-700); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 1.25rem; font-size: 0.95rem; color: var(--color-text-secondary); }
.post-meta .ic { width: 16px; height: 16px; color: var(--color-text-tertiary); }
.post-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-border-default); }
.post-hero { margin-top: 2rem; }
.post-hero figure { margin: 0; max-width: 60rem; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--color-border-default); background: var(--color-surface-card); }
.post-hero img { width: 100%; height: auto; max-height: 34rem; object-fit: cover; display: block; }

/* ── Article body: one reading column, wide blocks may break out ── */
.post-body { max-width: 44rem; margin: 0 auto; padding: 3rem var(--container-pad-x-mob) 5rem; }
@media (min-width: 640px) { .post-body { padding-inline: var(--container-pad-x-tab); } }
.post-body > * + * { margin-top: 1.15rem; }
.post-body p, .post-body li { font-size: 1.0625rem; line-height: 1.7; color: var(--color-text-body); }
.post-body h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1.2; margin-top: 2.75rem; }
.post-body h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.3; margin-top: 2rem; }
.post-body h4 { font-family: var(--font-family-sans); font-size: 1.05rem; font-weight: 700; letter-spacing: 0; text-transform: none; margin-top: 1.5rem; }
.post-body ul, .post-body ol { padding-left: 1.25rem; }
.post-body li + li { margin-top: 0.4rem; }
.post-body a { color: var(--color-brand-primary-700); text-decoration: underline; text-underline-offset: 3px; }
.post-body strong { color: var(--color-text-primary); }
.post-body .is-wide { margin-inline: calc(-1 * min(8vw, 6rem)); }
@media (max-width: 900px) { .post-body .is-wide { margin-inline: 0; } }
.post-lead, .post-dek { font-size: var(--font-size-lead) !important; line-height: 1.55 !important; color: var(--color-text-secondary) !important; }
.post-dek { font-family: var(--font-family-display); font-style: italic; }
.post-pull { font-family: var(--font-family-display); font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem) !important; line-height: 1.35 !important; color: var(--color-text-primary) !important; border-left: 3px solid var(--color-brand-primary-400); padding-left: 1.25rem; margin-block: 2rem !important; }
.post-url { font-size: 0.9rem !important; overflow-wrap: anywhere; color: var(--color-text-tertiary) !important; }

/* Callouts: a tinted panel; warn = amber edge; quiet = no fill */
.post-callout { padding: 1.25rem 1.5rem; border-radius: var(--radius-sm); background: var(--color-brand-primary-100); border-left: 3px solid var(--color-brand-primary-500); }
.post-callout > * + * { margin-top: 0.75rem; }
.post-callout.is-warn { background: #fdf6e7; border-left-color: var(--color-accent-gold); }
.post-callout.is-quiet { background: transparent; border: 1px solid var(--color-border-default); border-left-width: 3px; border-left-color: var(--color-border-default); }
.post-callout.is-lead p { font-size: var(--font-size-lead); line-height: 1.55; }
.post-story { padding: 1.5rem 1.75rem; border-radius: var(--radius-sm); background: var(--color-surface-subtle); }
.post-story > * + * { margin-top: 1rem; }
.post-story p { font-family: var(--font-family-display); font-size: 1.15rem; line-height: 1.6; }
.post-contact { padding: 1.25rem 1.5rem; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); }
.post-contact > * + * { margin-top: 0.5rem; }

/* Check / cross lists */
.post-body ul.post-checks, .post-body ul.post-xs { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.post-checks li, .post-xs li { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.6rem; align-items: start; }
.post-checks li + li, .post-xs li + li { margin-top: 0; }
.post-checks .ic { width: 20px; height: 20px; margin-top: 0.2rem; color: var(--color-brand-primary-700); }
.post-xs .ic { width: 20px; height: 20px; margin-top: 0.2rem; color: #a3402b; }

/* Chips and short-item cards */
.post-body ul.post-chips, .post-body ul.post-providers { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.post-chips li, .post-providers li { margin: 0 !important; padding: 0.5rem 0.85rem; border-radius: var(--radius-pill); border: 1px solid var(--color-border-default); background: var(--color-surface-card); font-size: 0.95rem !important; line-height: 1.35 !important; }
.post-providers li { border-radius: var(--radius-sm); }
.post-body ul.post-cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; }
.post-cards li { margin: 0 !important; padding: 1rem 1.15rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border-default); background: var(--color-surface-card); }

/* Numbered step rail (a real sequence in the source) */
.post-body ol.post-steps { list-style: none; padding: 0; display: grid; gap: 0; margin-top: 2rem; }
.post-steps > li { position: relative; display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem; padding-bottom: 2.25rem; margin: 0 !important; }
.post-steps > li::before { content: ""; position: absolute; left: 1.5rem; top: 3rem; bottom: 0; width: 1px; background: var(--color-border-default); }
.post-steps > li:last-child::before { display: none; }
.step-node { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--color-brand-secondary); color: #fff; font-family: var(--font-family-display); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.step-body > * + * { margin-top: 0.9rem; }
.step-body > h3:first-child { margin-top: 0.4rem; }
.post-steps.is-compact > li { padding-bottom: 1.25rem; }
.post-steps.is-compact .step-node { width: 2.25rem; height: 2.25rem; font-size: 1rem; }
.post-steps.is-compact > li { grid-template-columns: 2.25rem 1fr; }
.post-steps.is-compact > li::before { left: 1.125rem; top: 2.25rem; }

/* Numbered signs (the "5 signs" list) */
.post-body ol.post-signs { list-style: none; padding: 0; display: grid; gap: 1rem; }
.post-signs > li { margin: 0 !important; display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.25rem; padding: 1.5rem; border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface-card); }
.sign-n { font-family: var(--font-family-display); font-size: 2.6rem; line-height: 1; color: var(--color-brand-primary-400); font-variant-numeric: tabular-nums; }
.post-signs h2 { margin: 0 0 0.6rem; font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.6rem); }

/* Numbered section heads (cost guide) */
.num-h .h-n { color: var(--color-brand-primary-400); font-variant-numeric: tabular-nums; }

/* Two-up comparison */
.post-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.post-compare > div { padding: 1.25rem 1.4rem; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); background: var(--color-surface-card); }
.post-compare > div > * + * { margin-top: 0.75rem; }
.compare-h { font-weight: 700; color: var(--color-text-primary) !important; }
@media (max-width: 640px) { .post-compare { grid-template-columns: 1fr; } }

/* Cost table */
.post-body ul.cost-table { list-style: none; padding: 0; border-top: 1px solid var(--color-border-default); }
.cost-table li { margin: 0 !important; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--color-border-subtle); }
.cost-table .lbl { color: var(--color-text-primary); font-weight: 600; }
.cost-table .val { font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }

/* Provider entries (inspection-companies guide) */
.provider { padding-top: 0.5rem; }
.provider-site { display: flex; align-items: center; gap: 0.4rem; font-size: 0.95rem !important; }
.provider-site .ic { width: 15px; height: 15px; color: var(--color-text-tertiary); }

/* ── Case studies ── */
.case-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; margin-top: -1.5rem; padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface-card); position: relative; }
.case-summary { margin: 0; display: grid; gap: 1rem; }
.case-summary > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border-subtle); }
.case-summary > div:last-child { border-bottom: 0; padding-bottom: 0; }
.case-summary dt { font-size: 0.875rem; font-weight: 700; color: var(--color-brand-primary-700); }
.case-summary dd { margin: 0; display: grid; gap: 0.35rem; color: var(--color-text-body); line-height: 1.5; }
.case-figs { display: grid; gap: 1.25rem; align-content: start; }
.case-stats { display: flex; flex-wrap: wrap; gap: 1rem; }
.case-stat { flex: 1 1 10rem; padding: 1rem 1.25rem; border-radius: var(--radius-sm); background: var(--color-surface-subtle); }
.case-stat .n { display: block; font-family: var(--font-family-display); font-size: 2.4rem; line-height: 1; color: var(--color-brand-primary-800); font-variant-numeric: tabular-nums; }
.case-stat .lbl, .case-stat small { display: block; margin-top: 0.35rem; font-size: 0.9rem; color: var(--color-text-secondary); }

/* Before/after spore bar, drawn to scale from the case's own numbers */
.spore-drop { margin: 0; display: grid; gap: 1rem; }
.drop-row { display: grid; grid-template-columns: 1fr; gap: 0.35rem; }
.drop-row .lbl { font-size: 0.9rem; color: var(--color-text-secondary); }
.drop-row .track { display: block; height: 14px; border-radius: 7px; background: var(--color-surface-subtle-2); overflow: hidden; }
.drop-row .bar { display: block; height: 100%; border-radius: 7px; min-width: 3px; }
.drop-row.is-before .bar { background: #8a6a2f; }
.drop-row.is-after .bar { background: var(--color-brand-primary-700); }
.drop-row .val { font-family: var(--font-family-display); font-size: 1.6rem; font-weight: 600; line-height: 1.1; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.drop-row .val small { font-family: var(--font-family-sans); font-size: 0.85rem; font-weight: 500; color: var(--color-text-tertiary); }
@media (max-width: 820px) { .case-panel { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .case-summary > div { grid-template-columns: 1fr; gap: 0.25rem; } }

.case-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; padding-block: 3rem 5rem; }
.case-layout.no-figure { grid-template-columns: minmax(0, 44rem); justify-content: center; }
.case-prose > * + * { margin-top: 1.15rem; }
.case-prose p, .case-prose li { font-size: 1.0625rem; line-height: 1.7; color: var(--color-text-body); }
.case-prose a { color: var(--color-brand-primary-700); text-decoration: underline; text-underline-offset: 3px; }
.case-figure { position: sticky; top: calc(var(--nav-height, 96px) + 1.5rem); display: grid; gap: 1rem; }
.case-figure figure { margin: 0; border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.case-figure img { width: 100%; height: auto; display: block; }
.case-figure figcaption { padding: 0.6rem 0.8rem; font-size: 0.85rem; color: var(--color-text-tertiary); border-top: 1px solid var(--color-border-subtle); }
@media (max-width: 900px) { .case-layout { grid-template-columns: 1fr; } .case-figure { position: static; } }

/* ── Index pages ── */
.index-head { padding-top: 3rem; }
.index-grid { margin-top: 1rem; }
.case-card .photo { background: #fff; }
.case-card .photo img { object-fit: cover; object-position: top center; }
.case-chip { position: absolute; left: 0.75rem; bottom: 0.75rem; padding: 0.25rem 0.6rem; border-radius: var(--radius-pill); background: rgba(14, 23, 38, 0.82); color: #fff; font-size: 0.8rem; font-weight: 600; }
.case-card .photo.is-empty, .wi-card .photo.is-empty { display: grid; place-items: center; background: var(--color-brand-primary-100); }
.ph-loc { font-family: var(--font-family-display); font-size: 1.4rem; color: var(--color-brand-primary-700); text-align: center; padding: 1rem; }
.wi-card.is-feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.wi-card.is-feature .photo { aspect-ratio: auto; min-height: 18rem; }
@media (max-width: 760px) { .wi-card.is-feature { grid-template-columns: 1fr; } .wi-card.is-feature .photo { aspect-ratio: 3 / 2; min-height: 0; } }