/* The magazine county page (components/record/CountyMagazine.astro): Claude Design
   "Worcester Magazine Comparison", option 1b, picked by Ross Oct 29, 2026. Loaded only by
   a county in the magazine layout, so no other page's styles change. Newsreader for
   editorial type, Public Sans for interface, ink and paper, action blue for links. */
.mag { --mag-ink: #16202B; --mag-text: #23282E; --mag-paper: #F2EFE8; --mag-rule: #E4E1D9; --mag-link: #1B59A6; --mag-muted: #5D6670;
  counter-reset: ch; color: var(--mag-text); font-family: 'Public Sans', sans-serif; background: #fff; overflow-x: clip; }
.mag a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mag a:focus-visible, .mag summary:focus-visible { outline: 3px solid #e1a340; outline-offset: 4px; }
.mag :where(h1, h2, h3, h4, h5, p) { color: inherit; }
.mag :where(.mag-context-copy, .mag-rent-inner > div, .mag-neighbors, .mag-dossier-head, .mag-sources, .mag-dossier-body > div) > p { margin: 0 0 18px; }

/* Cover: one ink plate, type only, so it works for every county. */
.mag-hero { background: var(--mag-ink); color: #fff; padding: 34px 5.5% 0; }
.mag-hero-inner { max-width: 1200px; margin: 0 auto; }
.mag-folio { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 20px; padding-bottom: 16px; border-bottom: 1px solid #4A5866; font-size: 12px; color: #C8D3D8; }
.mag-crumbs, .mag-crumbs a { color: #CFD4DA; }
.mag-cover { padding: 104px 0 76px; }
.mag .mag-cover h1 { font: 500 76px/.99 Newsreader, serif; letter-spacing: -.028em; max-width: 800px; margin: 0 0 30px; text-wrap: balance; color: #fff; }
.mag .mag-deck { font: 400 25px/1.34 Newsreader, serif; max-width: 640px; color: #DCE3E6; margin: 0; text-wrap: pretty; }
.mag-byline { margin-top: 38px; font-size: 13px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.mag-byline .rk-byline { margin: 0; padding: 0; border: 0; display: block; }
.mag-byline .rk-byline__avatar, .mag-byline .rk-byline__trust { display: none; }
.mag-byline .rk-byline__line, .mag-byline .rk-byline__line a { font: 700 13px 'Public Sans', sans-serif; color: #fff; }
.mag-byline > span { color: #C4D0D5; }
.mag-hero a:hover { color: #fff; }

/* Contents: the story's own section markers, numbered; it shrinks with the number of sections. */
.mag-contents { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; border-top: 1px solid #4A5866; padding: 18px 0 24px; }
.mag-contents p { margin: 0; font-size: 12px; font-weight: 700; color: #fff; }
.mag-contents ol { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px 22px; counter-reset: toc; }
.mag-contents li { counter-increment: toc; display: flex; flex-direction: column; gap: 5px; font-size: 13px; line-height: 1.35; margin: 0; }
.mag-contents li::before { content: counter(toc, decimal-leading-zero); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums lining-nums; color: #9FB1B8; }
.mag-contents a { color: #E6ECEE; text-decoration: none; }
.mag-contents a:hover { color: #fff; text-decoration: underline; }

/* Chapters: numbered markers in ink, reading column at Newsreader 20px. */
.mag-intro, .mag-chapter { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 2fr; gap: 55px; padding: 96px 30px; box-sizing: border-box; scroll-margin-top: 20px; }
.mag-chapter--continued { padding-top: 45px; }
.mag-marker { align-self: start; border-top: 2px solid var(--mag-ink); padding-top: 14px; font-size: 13px; font-weight: 600; color: var(--mag-text); counter-increment: ch; }
.mag-marker--continued { counter-increment: none; border-top-color: var(--mag-rule); }
.mag-marker:not(.mag-marker--continued)::before, .mag-kicker--numbered::before { content: counter(ch, decimal-leading-zero); display: block; font: 500 34px/1 Newsreader, serif; font-variant-numeric: lining-nums; color: var(--mag-ink); margin-bottom: 10px; }
.mag-reading { max-width: 720px; min-width: 0; }
.mag .mag-reading h2, .mag .mag-context h2 { font: 500 44px/1.06 Newsreader, serif; letter-spacing: -.02em; margin: 0 0 28px; text-wrap: balance; color: var(--mag-ink); }
.mag .mag-reading p { font: 20px/1.62 Newsreader, serif; margin: 0 0 25px; color: var(--mag-text); max-width: none; }
.mag .mag-intro .mag-reading p:first-of-type::first-letter { float: left; font: 500 84px/.8 Newsreader, serif; margin: 7px 10px 0 0; color: var(--mag-ink); }

/* The renter's budget */
.mag-kicker { font-size: 13px; color: var(--mag-text); font-weight: 700; margin: 0 0 18px; }
.mag-kicker--numbered { counter-increment: ch; font-weight: 600; border-top: 2px solid var(--mag-ink); padding-top: 14px; max-width: 360px; }
.mag-source { font-size: 12px; line-height: 1.55; color: #516b76; }
.mag .mag-source a { color: var(--mag-link); }
.mag-rent { background: var(--mag-paper); padding: 88px 5.5%; }
.mag-rent-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.15fr; gap: 9%; align-items: center; }
.mag .mag-rent h2 { font: 500 44px/1.06 Newsreader, serif; letter-spacing: -.02em; margin: 0 0 24px; color: var(--mag-ink); }
.mag-rent p:not(.mag-kicker) { font-size: 15px; line-height: 1.6; max-width: 400px; }
.mag-rent p.mag-source { font-size: 12px; }
.mag-bars { padding-top: 20px; }
.mag-bar-row { margin-bottom: 24px; }
.mag-bar-label { font-size: 14px; line-height: 1.35; margin-bottom: 10px; }
.mag-bar-label strong { font: 600 24px Newsreader, serif; margin-right: 5px; }
.mag-bar-label small { display: block; color: #526f79; font-size: 12px; margin-top: 3px; }
.mag-bar-track { height: 24px; background: var(--mag-rule); }
.mag-bar-fill { height: 100%; background: var(--mag-ink); }
.mag-bar-scale { display: flex; justify-content: space-between; margin-top: 9px; font-size: 11px; color: #496670; }
.mag-bridge { max-width: 1200px; margin: 0 auto; padding: 72px 30px 18px; box-sizing: border-box; }
.mag .mag-bridge p { max-width: 720px; margin: 0 0 0 auto; font: 20px/1.62 Newsreader, serif; color: var(--mag-text); }

/* Story charts: the standard chart, its own heading moved into the reading column. */
.mag-story-chart { margin: 0 auto; max-width: 1200px; padding: 12px 30px 45px; box-sizing: border-box; scroll-margin-top: 20px; }
.mag-story-chart-inner { max-width: 720px; margin-left: auto; padding: 30px 0; border-top: 1px solid var(--mag-rule); border-bottom: 1px solid var(--mag-rule); }
.mag .mag-story-chart h3 { font: 500 32px/1.12 Newsreader, serif; color: var(--mag-ink); margin: 0 0 12px; }
.mag .mag-chart-note { font: 13px/1.55 'Public Sans', sans-serif; color: var(--mag-muted); margin: 0 0 20px; }
.mag .mag-chart-note--bottom { margin: 14px 0 0; }
.mag .mag-chart-note a { color: var(--mag-link); }
.mag-story-chart .rk-chartframe__head, .mag-story-chart .rk-chartframe__deck { display: none; }
.mag-story-chart .rk-chartframe__figure { margin: 0; padding: 0; border: 0; background: transparent; }
.mag-story-chart .rk-chartframe__caption { margin-top: 18px; }
.mag-story-chart .rk-cf-line { stroke: var(--mag-ink); vector-effect: non-scaling-stroke; stroke-width: 3.2px; }

/* Homes built before 1940 */
.mag-age { max-width: 1140px; margin: 0 auto; padding: 42px 30px 48px; border-top: 1px solid var(--mag-rule); border-bottom: 1px solid var(--mag-rule); box-sizing: border-box; }
.mag .mag-age h2 { font: 500 36px/1.12 Newsreader, serif; letter-spacing: -.015em; max-width: 750px; margin: 0 0 14px; color: var(--mag-ink); }
.mag .mag-age-definition { font: 14px/1.5 'Public Sans', sans-serif; color: #536d76; margin: 0 0 32px; }
.mag-age-bars { max-width: 760px; }
.mag-age-row { margin-bottom: 21px; }
.mag-age-label { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; margin-bottom: 8px; font-size: 14px; }
.mag-age-label strong { font: 600 17px 'Public Sans', sans-serif; }
.mag-age-track { height: 24px; background: #EFECE5; }
.mag-age-fill { height: 100%; background: var(--mag-ink); }
.mag-age-fill--other { background: #A39C8E; }
.mag-age-scale { display: flex; justify-content: space-between; font-size: 11px; color: #536d76; margin-top: -12px; }
.mag-age .mag-source { margin-top: 24px; }

/* The photograph runs full width; its caption hangs on the reading column. */
.mag-photo { max-width: none; padding: 0; margin: 24px 0 0; }
.mag-photo img { display: block; width: 100%; height: 640px; object-fit: cover; object-position: center 42%; }
.mag-photo figcaption { max-width: 720px; margin: 16px max(30px, calc((100% - 1200px) / 2 + 30px)) 0 auto; font-size: 13px; line-height: 1.6; color: #4E6066; }
.mag-photo figcaption strong { color: var(--mag-ink); }
.mag-photo figcaption span { display: block; color: #718185; font-size: 11px; }

/* The distress score, the map and selected neighbors */
.mag-context { background: #F7F5F1; padding: 96px 5.5%; scroll-margin-top: 20px; }
.mag-context-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9%; align-items: center; }
.mag .mag-context-copy > p:not(.mag-kicker):not(.mag-source) { font: 19px/1.6 Newsreader, serif; }
.mag .mag-map h3 { font: 600 19px Newsreader, serif; margin: 0; color: var(--mag-ink); }
.mag-map > p { font-size: 12px; margin: 4px 0 12px; }
.mag-map .rk-chartframe__head, .mag-map .rk-chartframe__deck, .mag-map .rk-chartframe__credit, .mag-map .rk-chartframe__by { display: none; }
.mag-map .rk-chartframe__figure { background: transparent; border: 0; padding: 0; margin: 0; }
.mag-neighbors { max-width: 1200px; margin: 45px auto 0; padding-top: 25px; border-top: 1px solid var(--mag-rule); }
.mag .mag-neighbors h3 { font: 500 26px Newsreader, serif; margin: 0 0 8px; color: var(--mag-ink); }
.mag-neighbors p { font-size: 13px; color: var(--mag-muted); }
.mag-neighbors table { border-collapse: collapse; width: 100%; max-width: 560px; font-size: 14px; margin: 18px 0; }
.mag-neighbors th, .mag-neighbors td { text-align: left; border-bottom: 1px solid var(--mag-rule); padding: 10px 8px; background: none; }
.mag-neighbors td:last-child, .mag-neighbors thead th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.mag-neighbors tbody th { font-weight: 400; }
.mag-neighbors .mag-selected { background: var(--mag-paper); }
.mag-neighbors .mag-selected th, .mag-neighbors .mag-selected td { font-weight: 700; }
.mag .mag-neighbors > a { font-size: 13px; color: var(--mag-link); }

/* By the numbers: every table, chart, download and source, folded. */
.mag-dossier { background: #fff; padding: 100px 5.5%; scroll-margin-top: 20px; }
.mag-dossier-head, .mag-dossier-body { max-width: 1100px; margin: 0 auto; }
.mag .mag-dossier-head h2 { font: 500 52px/1.04 Newsreader, serif; letter-spacing: -.022em; margin: 0 0 20px; color: var(--mag-ink); }
.mag .mag-dossier-head > p:not(.mag-kicker) { font: 19px/1.55 Newsreader, serif; max-width: 630px; }
.mag-dossier-head nav { display: flex; gap: 28px; margin: 30px 0 65px; font-size: 14px; }
.mag .mag-dossier a { color: var(--mag-link); }
.mag-dossier-body > div { scroll-margin-top: 20px; margin-bottom: 65px; }
.mag .mag-dossier-body h3, .mag .mag-sources #sources { font: 500 32px Newsreader, serif; margin: 0 0 10px; color: var(--mag-ink); }
.mag .mag-dossier-body > div > p { font-size: 14px; color: #586d74; line-height: 1.6; }
.mag .mag-dossier-body h4 { font: 600 22px Newsreader, serif; margin: 0 0 10px; color: var(--mag-ink); }
.mag .mag-fold-body h2, .mag .mag-fold-body .pe-block h2, .mag .mag-fold-body .fh h2 { font: 600 22px Newsreader, serif; margin: 0 0 10px; color: var(--mag-ink); }
.mag-fold, .mag details.cp-demographic-group { border-top: 1px solid var(--mag-rule); margin: 0; }
.mag-dossier-body > div > details:last-of-type, .mag .cp-demographics + details { border-bottom: 1px solid var(--mag-rule); }
.mag-fold > summary, .mag details.cp-demographic-group > summary { cursor: pointer; font: 600 16px/1.4 'Public Sans', sans-serif; color: var(--mag-text); padding: 19px 8px; margin: 0; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.mag-fold > summary::-webkit-details-marker, .mag details.cp-demographic-group > summary::-webkit-details-marker { display: none; }
.mag-fold > summary::after, .mag details.cp-demographic-group > summary::after { content: '+'; font-size: 22px; font-weight: 400; line-height: 1; }
.mag-fold[open] > summary::after, .mag details.cp-demographic-group[open] > summary::after { content: '\2212'; }
.mag-fold-body { padding: 8px 8px 30px; overflow-x: auto; }
/* A heading inside an open fold keeps its section gap, even right after a table's source note (Ross, Oct 30, Mingo). */
.mag .mag-fold-body :is(h2, h3, h4):not(:first-child) { margin-top: 34px; }
.mag details.cp-demographic-group > :not(summary) { margin-left: 8px; margin-right: 8px; }
.mag details.cp-demographic-group[open] { padding-bottom: 30px; }
.mag .cp-demographics > div > :not(details) { margin-top: 18px; }
.mag-fold-body p, .mag details.cp-demographic-group p { font-size: 13px; line-height: 1.55; }
.mag-chart .rk-chartframe__head { display: none; }
.mag-chart .rk-chartframe__figure { margin: 0; padding: 0; border: 0; }
.mag-chart .rk-chartframe__plot { max-width: 760px; }
/* Sources: heading, notes, both lists and the method link share the dossier's left edge and one
   18px rhythm (Ross, Oct 30: the story list was indented and the closing note sat tight under it). */
.mag-sources { max-width: 760px; }
.mag-sources .src { grid-template-columns: minmax(0, 1fr); gap: 0; }
.mag-sources .src__body p { font-size: 14px; line-height: 1.6; }
.mag-sources > p { font-size: 14px; line-height: 1.6; color: #586d74; }
.mag .mag-sources > p:last-child { margin-bottom: 0; }
.mag .mag-sources > h3 { font: 600 15px 'Public Sans', sans-serif; margin: 30px 0 8px; }
.mag-citations { margin: 0 0 18px; padding: 0; list-style-position: inside; font-size: 13px; line-height: 1.6; }
.mag-citations li { padding: 4px 0; }

@media (max-width: 700px) {
  .mag-hero { padding: 22px 20px 0; }
  .mag-cover { padding: 56px 0 44px; }
  .mag .mag-cover h1 { font-size: 44px; line-height: 1.02; letter-spacing: -.02em; margin-bottom: 22px; }
  .mag .mag-deck { font-size: 20px; line-height: 1.38; }
  .mag-byline { margin-top: 28px; }
  .mag-contents { display: block; padding: 16px 0 20px; }
  .mag-contents p { margin-bottom: 6px; }
  .mag-contents ol { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
  .mag-contents li { flex-direction: row; align-items: baseline; gap: 8px; min-height: 44px; padding-top: 12px; border-top: 1px solid #2E3B48; }
  .mag-intro, .mag-chapter { display: block; padding: 64px 20px; }
  .mag-chapter--continued { padding-top: 35px; }
  .mag-marker { margin-bottom: 26px; }
  .mag-marker:not(.mag-marker--continued)::before, .mag-kicker--numbered::before { font-size: 28px; }
  .mag .mag-reading h2, .mag .mag-context h2, .mag .mag-rent h2 { font-size: 31px; line-height: 1.1; }
  .mag .mag-reading p, .mag .mag-bridge p { font-size: 19px; }
  .mag .mag-intro .mag-reading p:first-of-type::first-letter { font-size: 76px; margin-top: 6px; }
  .mag-rent { padding: 60px 20px; }
  .mag-rent-inner, .mag-context-inner { display: block; }
  .mag-bars { margin-top: 35px; }
  .mag-bridge { padding: 55px 20px 20px; }
  .mag-story-chart { padding: 0 20px 35px; }
  .mag-story-chart-inner { padding: 25px 0; }
  .mag .mag-story-chart h3 { font-size: 25px; }
  .mag-age { margin: 0 20px; padding: 32px 0 38px; }
  .mag .mag-age h2 { font-size: 26px; }
  .mag-age-label strong { font-size: 16px; }
  .mag-photo img { height: 300px; }
  .mag-photo figcaption { margin: 12px 0 0; padding: 0 20px; max-width: none; }
  .mag-context { padding: 64px 20px; }
  .mag-map { margin-top: 45px; }
  .mag-dossier { padding: 70px 20px; }
  .mag .mag-dossier-head h2 { font-size: 36px; }
  .mag .mag-dossier-head > p:not(.mag-kicker) { font-size: 18px; }
  .mag-dossier-head nav { gap: 15px; flex-wrap: wrap; }
  .mag-fold > summary, .mag details.cp-demographic-group > summary { font-size: 14px; }
  .mag-fold-body { padding-left: 0; padding-right: 0; }
}
/* Sources edition line and closing note (Sources.astro prints them only on the magazine page). */
.mag .src__edition { font-size: 15px; line-height: 1.62; color: var(--text-body); margin: 0 0 18px; }
.mag .src__note { font-size: 14px; line-height: 1.6; color: var(--text-body); margin: 18px 0 0; }
/* The frozen state map (CountyHeroMap.astro), styled here so other county pages load nothing new. */
.mag .chm { margin: 0; width: 100%; }
.mag .chm__map, .mag .chm__canvas { position: relative; }
.mag .chm__canvas svg { display: block; width: 100%; height: auto; }
.mag .chm__canvas .county-path { cursor: pointer; }
.mag .chm__loading { min-height: 180px; display: grid; place-items: center; color: var(--muted); font: 13px var(--font-sans); }