:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #192236; background: #f7f9fc; }
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.65; }
a { color: #2357b7; }
header { background: #10254d; color: #fff; padding: 22px max(24px, calc((100vw - 920px) / 2)); }
header a { color: #fff; text-decoration: none; }
.brand { font-weight: 750; font-size: 1.1rem; }
nav { display: flex; gap: 20px; margin-top: 10px; font-size: .95rem; }
main { max-width: 920px; margin: 0 auto; padding: 52px 24px 64px; }
.intro { max-width: 700px; font-size: 1.12rem; color: #4a5568; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin-top: 34px; }
.card, article { background: #fff; border: 1px solid #dfe5ef; border-radius: 14px; padding: 28px; box-shadow: 0 8px 24px rgba(16, 37, 77, .05); }
.card h2 { margin-top: 0; }
article h1 { margin-top: 0; font-size: clamp(1.8rem, 4vw, 2.5rem); }
article h2 { margin-top: 2.25rem; font-size: 1.3rem; }
.updated { color: #667085; font-size: .94rem; }
footer { max-width: 920px; margin: 0 auto; padding: 0 24px 34px; color: #667085; font-size: .9rem; }
@media (max-width: 540px) { nav { flex-wrap: wrap; } article, .card { padding: 21px; } }