/* Reading layer for Insights articles (Andrew, 2026-10-09: "easier to read, easier on the eyes").
   Linked after each article's own <style>, so these rules refine the page's design without
   replacing it. Paired with /js/article.js (contents box, reading progress, Quick answers). */

html{scroll-padding-top:96px}

/* Hero photo: the width/height attributes reserve space; the frame keeps its 16:10 shape */
.article-figure img{height:auto;display:block}

/* Text: a little larger, a little darker, a slightly shorter line */
.prose{max-width:690px}
.prose>p{font-size:18px;line-height:1.75;color:#2B3341;margin:0 0 26px}
.prose>p.lead{font-size:21px;line-height:1.62;margin-bottom:30px}
.prose h2{margin:58px 0 20px}
.checklist li{font-size:17.5px;line-height:1.7;color:#2B3341;margin:0 0 18px}
.checklist li::before{top:10px}
.prose a{text-underline-offset:3px}

/* Article text is visible immediately; only decorative blocks animate */
.article-body .prose>.reveal,.article-body .prose .checklist.reveal{opacity:1;transform:none;transition:none}

/* "In this article" contents box (built by article.js from the h2s) */
.toc{margin:6px 0 44px;background:var(--cream);border:1px solid var(--line);border-radius:4px;padding:0 24px}
.toc summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;padding:18px 0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"";width:8px;height:8px;border-right:1.5px solid var(--blue);border-bottom:1.5px solid var(--blue);transform:rotate(45deg);margin:-4px 4px 0 0;transition:transform 160ms ease}
.toc[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.toc ol{list-style:none;margin:0;padding:0 0 10px;counter-reset:toc}
.toc li{counter-increment:toc;border-top:1px solid var(--line-soft,#EDE9DF)}
.toc a{display:flex;gap:14px;padding:11px 0;font-size:15.5px;line-height:1.4;color:var(--navy);border:0;text-decoration:none}
.toc a::before{content:counter(toc,decimal-leading-zero);font-size:12px;font-weight:600;color:var(--blue);min-width:22px;padding-top:2px;font-variant-numeric:tabular-nums}
.toc a:hover{color:var(--blue)}

/* Quick answers read as separate cards */
.prose>p.qa{background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:4px;padding:18px 22px;margin:0 0 14px;font-size:17px;line-height:1.68}
.prose>p.qa>strong:first-child{display:block;font-family:var(--serif);font-size:19.5px;font-weight:420;line-height:1.3;color:var(--navy);margin-bottom:6px;font-variation-settings:"opsz" 40,"SOFT" 20}
.prose>p.qa:last-of-type{margin-bottom:34px}

/* Sources and disclosures: upright, readable, long links wrap */
.disclosure{font-style:normal;font-size:13.5px;line-height:1.75;color:#5F6776;overflow-wrap:anywhere}
.disclosure a{color:inherit;font-weight:400;border:0;text-decoration:underline;text-decoration-color:rgba(74,127,232,.45);text-underline-offset:2px}
.disclosure strong{color:var(--ink)}

/* Reading progress, a thin line at the very top */
.read-progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--blue);transform-origin:0 50%;transform:scaleX(0);z-index:70;pointer-events:none}

/* Tables scroll inside their box on phones, never the page */
.prose table{font-size:15px}
.prose .rate-table-wrap,.prose .quote-table-wrap{-webkit-overflow-scrolling:touch}

@media(max-width:620px){
  .prose>p{font-size:17.5px;line-height:1.72}
  .prose>p.lead{font-size:19.5px}
  .checklist li{font-size:17px}
  .toc{padding:0 18px}
  .prose>p.qa{padding:16px 18px}
}
@media(prefers-reduced-motion:reduce){.read-progress{display:none}}