/* Blog and article pages (design brief 2026-10-13). Loaded after /home.css. Light and dark; no motion; no web fonts. */
:root { --text:#3C3C3B; --muted:#55524D; --accent:#7A4E2D; --bg:#F5F3EC; --card:#FFFDFA; --line:#E0D9CB; }
@media (prefers-color-scheme: dark) { :root { --text:#EDE6DA; --muted:#BDB3A5; --accent:#D9B18C; --bg:#171512; --card:#211E1A; --line:#3A342D; } .lang .menu { background:#211E1A; } .lang summary:hover,.lang[open] summary{background:rgba(255,255,255,.08)} .lang .menu a:hover{background:rgba(255,255,255,.08)} }
:root:not([data-x]) .top nav a[aria-current], .lang .menu a[aria-current] { color: var(--accent); }
.top nav a, .lang summary, .lang .menu a { min-height: 44px; display: inline-flex; align-items: center; }
.top nav a { padding: 0 4px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.page { max-width: 1120px; margin: 0 auto; padding: 40px 24px 72px; }
.page h1 { font-size: clamp(30px, 5vw, 42px); line-height: 1.2; font-weight: 600; margin: 0 0 12px; text-wrap: balance; }
.lead { font-size: 19px; color: var(--muted); max-width: 65ch; margin: 0 0 32px; }
.cards { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 760px) { .cards { grid-template-columns: 1fr 1fr; } }
.card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.card .strip { display: block; width: 100%; height: 96px; }
.card .body { padding: 18px 20px 20px; }
.card h2 { font-size: 21px; line-height: 1.3; margin: 0 0 8px; }
.card h2 a { text-decoration: none; color: var(--text); }
.card h2 a::after { content: ""; position: absolute; inset: 0; }
.card p { margin: 0 0 10px; color: var(--muted); }
.card .meta { font-size: 15px; color: var(--muted); }
.card:hover { border-color: var(--accent); }
.card .go { font-size: 15px; font-weight: 600; color: var(--accent); }
article.post { max-width: 65ch; margin: 0 auto; font-size: 18px; line-height: 1.7; }
@media (min-width: 760px) { article.post { font-size: 19px; } }
.crumbs { font-size: 15px; color: var(--muted); margin: 0 0 20px; }
.crumbs a { color: var(--muted); }
.byline { color: var(--muted); font-size: 16px; margin: 0 0 24px; }
article.post h2 { font-size: 26px; line-height: 1.3; margin: 2.2em 0 .6em; text-wrap: balance; scroll-margin-top: 24px; }
article.post h3 { font-size: 21px; line-height: 1.35; margin: 1.6em 0 .5em; }
article.post p { margin: 0 0 1.1em; text-wrap: pretty; }
article.post .answer { font-size: 21px; line-height: 1.55; color: var(--text); }
article.post a { color: var(--accent); text-decoration: underline; }
article.post ul, article.post ol { padding-left: 1.2em; margin: 0 0 1.1em; }
article.post li { margin: 0 0 .5em; }
article.post blockquote { margin: 0 0 1.1em; padding-left: 16px; border-left: 2px solid var(--line); }
article.post blockquote p { margin: 0 0 .4em; }
.toc { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 20px; margin: 0 0 1.5em; font-size: 16px; }
.toc p { margin: 0 0 6px; font-weight: 600; }
.toc ol { margin: 0; padding-left: 1.2em; }
.toc li { margin: 0; }
.toc a { display: block; padding: 10px 0; min-height: 44px; }
.tbl { overflow-x: auto; margin: 0 0 1.2em; }
table { border-collapse: collapse; width: 100%; font-size: 16px; }
th, td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
th { background: var(--card); }
aside.note { font-size: 15px; color: var(--muted); border-left: 2px solid var(--line); padding-left: 16px; margin: 2em 0 1em; }
#sources ol { font-size: 16px; color: var(--muted); overflow-wrap: anywhere; }
#sources li { margin: 0 0 .8em; }
p.app-line { font-size: 16px; color: var(--muted); margin: 2em 0; }
p.app-line a { color: var(--muted); }
.related { max-width: 860px; margin: 48px auto 0; }
.related h2 { font-size: 22px; margin: 0 0 16px; }
.foot-by { font-size: 15px; color: var(--muted); margin-top: 24px; }
.reduce * { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
footer a { color: inherit; }