/* Article reading (review item D2; owner approved 28 Sep 2026), on every post (src/content/article-reading.mjs). A
   reading column of about 70 characters in 18px ink, headings with room above them, and the small print that readers
   use (contents, tables, captions, byline) at 13–15px instead of 11–13px. The contents column marks the section being
   read (public/scripts/article-contents.js). */
main.lp-article[data-article-reading]{--ar-ink:#203432;--ar-muted:#526d64;--ar-line:#dfe8e2;--ar-forest:#244140;--ar-teal:#258f79;--ar-callout:#eef5ef}

/* Byline: who wrote it comes first, at a size people can read. */
main[data-article-reading] .lp-byline{gap:10px 24px;font-size:14px;line-height:1.5;color:var(--ar-muted)}
main[data-article-reading] .lp-byline .lp-author,main[data-article-reading] .lp-byline>span:first-child>a{font-weight:600;color:var(--ar-ink)}
main[data-article-reading] .lp-byline button{font-size:14px}

/* A contents column and a reading column of about 70 characters, starting from the same edge as the title. */
main[data-article-reading] .lp-reading-layout{grid-template-columns:232px minmax(0,680px);column-gap:88px;justify-content:start;padding-top:56px;padding-bottom:80px}
main[data-article-reading] .lp-body{font-size:18px;line-height:1.7;color:var(--ar-ink)}
main[data-article-reading] .lp-body>p{margin:0 0 24px}
main[data-article-reading] .lp-body h2{margin:64px 0 16px;font-size:30px;line-height:1.25;letter-spacing:-.025em;font-weight:600;color:var(--ar-ink);scroll-margin-top:120px}
main[data-article-reading] .lp-body h3{margin:40px 0 12px;font-size:22px;line-height:1.35;letter-spacing:-.015em;font-weight:600;color:var(--ar-ink);scroll-margin-top:120px}
main[data-article-reading] .lp-body h4{margin:28px 0 8px;font-size:18px;line-height:1.4;font-weight:600;color:var(--ar-ink)}
main[data-article-reading] .lp-body h2+h3{margin-top:24px}
main[data-article-reading] .lp-body :is(h2,h3,h4):first-child,main[data-article-reading] .lp-body .lp-mobile-toc+:is(h2,h3){margin-top:0}
main[data-article-reading] .lp-body :is(ul,ol){margin:0 0 28px;padding-left:1.3em}
main[data-article-reading] .lp-body li{margin:10px 0;padding-left:.25em}
main[data-article-reading] .lp-body ul>li::marker{color:var(--ar-teal)}
main[data-article-reading] .lp-body ol>li::marker{color:var(--ar-teal);font-weight:600}
main[data-article-reading] .lp-body strong{color:var(--ar-ink)}
main[data-article-reading] .lp-body a{color:var(--ar-ink)}
main[data-article-reading] .lp-body figcaption{font-size:14px;line-height:1.55;color:var(--ar-muted)}
main[data-article-reading] .lp-table :is(th,td){padding:14px 18px;font-size:15px;line-height:1.6}
main[data-article-reading] .lp-table-frame.is-scrollable .lp-table-hint{font-size:13px}
/* Tables from the CMS (src/cms/content.ts) at the same size, with room below them. Their cells keep words whole: the
   page's overflow-wrap:anywhere let a column shrink until "Junior" broke into "Juni or" (23 October 2026). A table
   wider than the column scrolls inside its frame. */
main[data-article-reading] .cms-table-wrap{margin:8px 0 32px}
main[data-article-reading] .cms-table-wrap :is(th,td){padding:14px 18px;font-size:15px;line-height:1.6;overflow-wrap:normal}

/* Key takeaways as one callout; an important note set apart without shouting. */
main[data-article-reading] .lp-callout{margin:8px 0 40px;padding:26px 30px 8px;border:1px solid #d6e5da;border-radius:14px;background:var(--ar-callout)}
main[data-article-reading] .lp-callout>:is(h2,h3,.lp-callout-title){margin:0 0 12px;font-size:20px;line-height:1.3;font-weight:600;color:var(--ar-ink)}
main[data-article-reading] .lp-callout>:is(ul,ol){margin:0 0 18px}
main[data-article-reading] .lp-callout li{font-size:17px;line-height:1.6}
main[data-article-reading] .lp-body>p.lp-credit{margin-bottom:16px;font-size:14px;color:var(--ar-muted)}
main[data-article-reading] .lp-body>p.lp-note{padding:2px 0 2px 18px;border-left:3px solid var(--ar-teal);font-size:16px;line-height:1.65;color:var(--ar-muted)}

/* Contents: readable entries on one rule, the section being read marked on it. */
main[data-article-reading] .lp-toc>p{margin-bottom:12px;font-size:13px;line-height:1.5;font-weight:600;color:var(--ar-ink)}
main[data-article-reading] .lp-toc nav{border-left:2px solid var(--ar-line)}
main[data-article-reading] .lp-toc nav>a{margin-left:-2px;padding:7px 0 7px 16px;border-bottom:0;border-left:2px solid transparent;font-size:14px;line-height:1.45;color:var(--ar-muted)}
main[data-article-reading] .lp-toc nav>a[aria-current]{border-left-color:var(--ar-forest);color:var(--ar-ink);font-weight:600}
main[data-article-reading] .lp-toc-back{font-size:14px}
main[data-article-reading] .lp-mobile-toc summary{font-size:15px;font-weight:600;color:var(--ar-ink)}
main[data-article-reading] .lp-mobile-toc nav a{padding:10px 0;border-top:1px solid var(--ar-line);font-size:15px;line-height:1.45;color:var(--ar-ink)}
main[data-article-reading] .lp-mobile-toc nav a[aria-current]{font-weight:600}

@media(max-width:1100px){main[data-article-reading] .lp-reading-layout{grid-template-columns:200px minmax(0,1fr);column-gap:48px}}
@media(max-width:600px){
 main[data-article-reading] .lp-body{font-size:17px;line-height:1.65}
 main[data-article-reading] .lp-body h2{margin:48px 0 12px;font-size:26px}
 main[data-article-reading] .lp-body h3{margin:32px 0 10px;font-size:20px}
 main[data-article-reading] :is(.lp-table,.cms-table-wrap) :is(th,td){padding:12px 14px;font-size:14px}
 main[data-article-reading] .lp-callout{padding:22px 20px 6px}
 main[data-article-reading] .lp-callout li{font-size:16px}
 main[data-article-reading] .lp-byline{gap:8px 18px}
}