:root { --ink: #1c2733; --muted: #5d6b7a; --accent: #1d5c96; --warm: #f2a93b; --bg: #fbfaf7; --line: #e4e1da; }
* { box-sizing: border-box; }
body { margin: 0; font: 18px/1.65 Georgia, "Times New Roman", serif; color: var(--ink); background: var(--bg); }
a { color: var(--accent); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.site-header { background: #112a46; border-bottom: 4px solid var(--warm); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; }
.brand { color: #fff; font: 700 22px/1.2 "Segoe UI", system-ui, sans-serif; text-decoration: none; }
nav a { color: #d6e2ef; font: 15px "Segoe UI", system-ui, sans-serif; margin-left: 16px; text-decoration: none; }
nav a:hover { color: #fff; }
.preview-banner { background: #b3261e; color: #fff; text-align: center; font: 700 15px system-ui, sans-serif; padding: 8px; }
.post { max-width: 720px; margin: 36px auto; }
.post h1 { font: 700 40px/1.2 "Segoe UI", system-ui, sans-serif; margin: 6px 0 12px; }
.post h2 { font: 700 27px/1.3 "Segoe UI", system-ui, sans-serif; margin-top: 40px; }
.post h3 { font: 700 21px/1.35 "Segoe UI", system-ui, sans-serif; margin-top: 28px; }
.eyebrow { font: 600 13px "Segoe UI", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0; }
.eyebrow a { color: var(--muted); text-decoration: none; }
.meta, .muted { color: var(--muted); font-size: 15px; }
.hero { margin: 20px 0; }
.hero img, .card img { width: 100%; height: auto; display: block; border-radius: 6px; }
figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
figcaption a { color: var(--muted); }
.takeaways { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--warm); padding: 6px 22px; border-radius: 6px; }
.takeaways h2 { font-size: 19px; margin-top: 14px; }
blockquote { margin: 22px 0; padding: 12px 18px; background: #fff7e8; border-left: 4px solid var(--warm); font-size: 16px; }
table { border-collapse: collapse; width: 100%; font-size: 16px; margin: 20px 0; display: block; overflow-x: auto; }
th, td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
th { background: #eef3f8; }
sup.cite { font-size: 12px; }
sup.cite a { text-decoration: none; }
.sources { font-size: 15px; padding-left: 22px; }
.sources li { margin-bottom: 6px; word-break: break-word; }
.howmade { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 30px; }
.tags a { font: 14px "Segoe UI", system-ui, sans-serif; margin-right: 8px; }
.related { max-width: 720px; margin: 0 auto 50px; }
.list-head { margin: 36px 0 10px; }
.list-head h1 { font: 700 34px/1.2 "Segoe UI", system-ui, sans-serif; margin: 0; }
.lead { color: var(--muted); font-size: 19px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; margin: 24px 0 50px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.card-body { padding: 14px 18px 18px; }
.card h2 { font: 700 20px/1.3 "Segoe UI", system-ui, sans-serif; margin: 6px 0; }
.card h2 a { color: var(--ink); text-decoration: none; }
.card p { font-size: 16px; margin: 6px 0; }
.site-footer { border-top: 1px solid var(--line); padding: 20px 0 30px; color: var(--muted); font-size: 15px; }
@media (max-width: 600px) { body { font-size: 17px; } .post h1 { font-size: 30px; } nav a { margin: 0 12px 0 0; } }