/*
 * Readable content surface for blog articles, the blog index and tool pages.
 * Linked AFTER each page's inline <style>, so these rules win at equal
 * specificity. Uses the existing design tokens (--bg, --border, --fg, --muted,
 * --accent) and only adds a few surface tokens. Contrast (WCAG 2.1):
 *   on --reading-bg: --fg 14.8:1, --muted 8.3:1, --accent links 7.4:1;
 *   on --reading-raised: --fg 13.3:1, --muted 7.5:1, --accent 6.6:1 (AA needs 4.5:1).
 */
:root{--reading-bg:#0E1A11;--reading-raised:#15251A;--reading-border:#24402A;--reading-shadow:0 1px 0 rgba(240,234,210,.04) inset,0 18px 48px -12px rgba(0,0,0,.6)}

main .wrap{max-width:800px}
main article{
  background:var(--reading-bg);border:1px solid var(--reading-border);border-radius:20px;
  box-shadow:var(--reading-shadow);margin:40px 0 32px;padding:clamp(22px,5vw,52px);
  font-size:1.0625rem;line-height:1.75
}
/* ~65–75 characters per line for running text; tables, tools and CTAs keep full width. */
main article>p,main article>ul,main article>ol,main article>blockquote,main article>h2,main article>h3,main article>.meta,main article>.lede{max-width:68ch}
main article p{margin:0 0 1.15em}
main article>h1+.meta{margin-top:0}
main article h2{margin:2.2em 0 .5em}main article h3{margin:1.6em 0 .35em}
main article ul,main article ol{padding-left:1.3em;margin:0 0 1.15em}main article li{margin:.35em 0}
main article blockquote{margin:1.5em 0;padding:.25em 0 .25em 1.1em;border-left:3px solid var(--accent);color:var(--muted)}
main article a{text-underline-offset:.18em;text-decoration-thickness:1px}
main article a:hover{text-decoration-thickness:2px}
main article code{background:var(--reading-raised);border:1px solid var(--reading-border);border-radius:6px;padding:.05em .35em;font-size:.9em}
main article .lede{font-size:1.15rem;line-height:1.6}

/* Nested surfaces step up one level so they stay distinct on the card. */
main article .cta,main article .card,main article .calc,main article .note,main article th{background:var(--reading-raised)}
main article .cta,main article .card,main article .calc,main article .note,main article td,main article th{border-color:var(--reading-border)}
main article .cards{margin:28px 0 0}
main article .cta{margin:44px 0 4px}

:where(a,button,input,select,summary,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
::selection{background:rgba(201,162,39,.35);color:#fff}

@media (max-width:600px){
  main .wrap{padding:0 12px}
  main article{margin:16px 0 20px;border-radius:14px;padding:22px 18px;font-size:1rem}
  main article table{font-size:.86rem}main article th,main article td{padding:8px}
}
@media print{
  main article{background:#fff;border:0;box-shadow:none;padding:0;margin:0;color:#000}
  main article .note,main article th,main article .card{background:#fff}
}