/* REALITAS layout primitives: page shell, page intro, section headings, the article/investigation layout
   (header · TOC · reading column · "At a glance" rail) and the long-form reading rhythm, plus the methodology/about layout.
   Spacing and widths come from tokens.css (--measure, --article-gap, --read-section, --read-block, --toc-w, --rail-w …).
   "More breathing room in investigations" = change those tokens, not these rules. */
.shell{width:min(var(--shell-max),calc(100% - 2 * var(--gutter)));margin-inline:auto}
.narrow{max-width:1000px}
.edition-line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s1) var(--s4);padding:var(--s2) 0;font-size:var(--fs-meta);letter-spacing:.12em;color:var(--muted);font-weight:700}
.page-intro{padding:var(--s4) 0 var(--s3)}
.page-intro h1{margin-bottom:var(--s2)}
.page-intro>p:not(.eyebrow){font-size:1rem;color:var(--muted);max-width:70ch}
.page-intro h1 em{color:var(--accent)}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:var(--s4);margin-bottom:var(--s3)}
.section-heading .eyebrow{margin-bottom:var(--s1)}
.section-heading>p{font-size:.875rem;color:var(--muted)}
.investigation-section{padding:var(--s5) 0 var(--s4)}
.investigation-section:has(.related-grid){padding-top:var(--read-section)}

/* ---------- Article / investigation page ---------- */
.breadcrumbs{display:flex;gap:var(--s2);font-size:var(--fs-meta);color:var(--muted);padding-top:var(--s3);flex-wrap:wrap}
.article-header{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--article-header-gap);padding:var(--s5) 0 var(--s6);align-items:center}
.article-title h1{font-size:clamp(2rem,3.4vw,3rem);margin-bottom:var(--s4);line-height:1.08}
.claim-line{font-family:var(--serif);font-size:1.15rem;line-height:1.5;max-width:40rem}
.article-meta{font-size:var(--fs-meta);color:var(--muted);margin-top:var(--s3)}
.article-score{border-left:1px solid var(--line);padding:0 0 0 var(--s5)}
.article-score .meter{max-width:250px}
.article-score>.micro{text-align:center;margin-top:var(--s2)}
body[data-page="article"] .prototype-note{padding:var(--s3) 0;margin-bottom:var(--s2)}
body[data-page="article"] .locale-notice{padding:var(--s3) var(--s4);margin:var(--s3) 0}
.article-layout{display:grid;grid-template-columns:var(--toc-w) minmax(0,var(--measure)) minmax(var(--rail-w),1fr);gap:var(--article-gap);justify-content:start;margin-top:var(--s7);align-items:start}
/* Columns sit next to each other (start-aligned); free width goes to the rail column, never between navigation and text. */
/* Investigation navigation panel: a sticky, scrollable panel with full-width rows and a visible current section
   (accent bar + weight + background, set by the scroll tracker in app.js via aria-current). */
.toc{align-self:start;position:sticky;top:calc(var(--header-h) + var(--s4));max-height:calc(100vh - var(--header-h) - var(--utility-h) - 2 * var(--s4));overflow-y:auto;overscroll-behavior:contain;background:var(--soft);border:1px solid var(--line);border-top:2px solid var(--accent);padding:var(--s3) 0 var(--s2)}
.toc p{font-size:var(--fs-meta);letter-spacing:.1em;font-weight:700;text-transform:uppercase;color:var(--muted);padding:0 var(--s4) var(--s3);margin:0 0 var(--s1);border-bottom:1px solid var(--line)}
.toc a{display:block;font-size:.9rem;line-height:1.35;padding:9px var(--s4) 9px calc(var(--s4) - 3px);border-left:3px solid transparent;color:var(--text);transition:background .15s,color .15s,border-color .15s}
.toc a:hover{background:var(--hover);color:var(--ink);border-left-color:var(--line-strong)}
.toc a:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.toc a[aria-current="location"]{background:var(--hover);color:var(--ink);font-weight:700;border-left-color:var(--accent)}
.article-rail{position:sticky;top:calc(var(--header-h) + var(--s4));justify-self:end;width:100%;max-width:calc(var(--rail-w) + var(--s7));border:1px solid var(--line);background:var(--soft);padding:var(--s4) var(--s5)}
.rail-title{font-size:var(--fs-meta);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--s2)}
.rail-facts{margin:0}
.rail-facts>div{display:flex;justify-content:space-between;gap:var(--s3);padding:6px 0;border-top:1px solid var(--line);font-size:.8rem}
.rail-facts dt{color:var(--muted)}
.rail-facts dd{margin:0;text-align:right;font-weight:700}

/* ---------- Long-form reading column (articles and static long-form pages) ---------- */
.prose{font-size:var(--fs-prose);line-height:var(--lh-prose);min-width:0}
.prose section{margin-bottom:var(--read-section);scroll-margin-top:calc(var(--header-h) + var(--s3))}
.prose h2{font-size:1.6rem;margin-bottom:var(--s4);line-height:1.15}
.prose h3{font-size:1.05rem;margin:var(--read-block) 0 var(--s2);line-height:1.3}
.prose p{color:var(--text)}
.prose p+p,.narrow .prose p+p{margin-top:1em}
.prose section>h2+p,.prose section>h2+div{margin-top:0}
.prose ul,.prose ol{padding-left:22px;margin:var(--s4) 0}
.prose li{padding-left:4px;margin-bottom:.55em}
.section-number{font:700 var(--fs-meta) var(--sans);color:var(--accent);letter-spacing:.08em;display:block;margin-bottom:var(--s1)}

/* ---------- Methodology, about, information ---------- */
.method-layout{display:grid;grid-template-columns:minmax(0,var(--measure)) minmax(260px,320px);gap:var(--method-gap);margin-top:var(--s6);justify-content:space-between}
.method-aside{background:var(--soft);padding:var(--s4);align-self:start;position:sticky;top:calc(var(--header-h) + var(--s4))}
.method-aside h2{font-size:1.5rem}
.method-aside .button{margin-top:var(--s3);gap:10px;width:100%}
.narrow>.prose{max-width:var(--measure)}
.narrow .prose section,.method-layout .prose section{margin-bottom:var(--s7)}

/* ---------- Responsive layout ---------- */
/* Below 1280px the article rail folds away (its facts are all shown elsewhere on the page). */
@media(max-width:1279px){.article-layout{grid-template-columns:var(--toc-w) minmax(0,var(--measure))}
.article-rail{display:none}
}
@media(max-width:1100px){.method-layout{grid-template-columns:minmax(0,1fr) 280px}}
@media(max-width:900px){
.article-header{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.article-layout{grid-template-columns:minmax(0,1fr)}
/* Tablet and phone: the panel sits above the article, full width, with its rows in a wrapping list (no sticky, no inner scroll). */
.toc{position:static;max-height:none;overflow:visible;display:flex;flex-wrap:wrap;gap:0;padding:var(--s3) var(--s2) var(--s2)}
.toc p{width:100%;padding:0 var(--s2) var(--s2);margin-bottom:var(--s2)}
.toc a{display:inline-flex;align-items:center;min-height:36px;padding:6px 10px;border-left:0;border-bottom:2px solid transparent}
.toc a:hover{border-left-color:transparent}
.toc a[aria-current="location"]{border-bottom-color:var(--accent)}
.method-layout{grid-template-columns:1fr}
.method-aside{position:static;margin-bottom:var(--s4)}
}
@media(max-width:650px){
.edition-line{font-size:.66rem;letter-spacing:.06em}
.section-heading{display:block;margin-bottom:var(--s2)}
.section-heading>.text-link{margin-top:2px}
.section-heading>p{margin-top:var(--s1)}
.investigation-section{padding:var(--s4) 0 var(--s3)}
.page-intro{padding:var(--s3) 0}
.article-header{grid-template-columns:1fr;padding:var(--s3) 0 var(--s4)}
.article-title h1{font-size:clamp(1.8rem,8.5vw,2.3rem)}
.article-score{padding:var(--s3);border:1px solid var(--line);background:var(--soft)}
.article-score .meter{max-width:230px}
.claim-line{font-size:1.05rem}
.article-layout{margin-top:var(--s5)}
.prose h2{font-size:1.4rem}
.method-aside{padding:var(--s3)}
}