:root {
    color-scheme: light;
    --paper: #f7f9f4;
    --card: #ffffff;
    --ink: #1f261f;
    --muted: #6f776e;
    --olive: #4d6046;
    --line: #dfe5dc;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

main {
    width: min(820px, calc(100% - 32px));
    margin: 0 auto;
    padding: 48px 0 72px;
}

header, article, nav {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 24px;
    margin-bottom: 18px;
}

h1, h2, h3 { line-height: 1.25; }
h1 { margin: 0 0 8px; font-size: clamp(2rem, 7vw, 3.6rem); }
h2 { margin-top: 0; }
h3 { margin-top: 28px; }
p, li { color: var(--ink); }
.muted { color: var(--muted); }
a { color: var(--olive); font-weight: 650; }
nav { display: flex; gap: 18px; flex-wrap: wrap; }
ul { padding-left: 22px; }
code { overflow-wrap: anywhere; }

@media (max-width: 520px) {
    main { width: min(100% - 20px, 820px); padding-top: 20px; }
    header, article, nav { border-radius: 16px; padding: 18px; }
}