:root { --bg: #fffaf0; --ink: #2a1b0c; --muted: #76654c; --deep: #b0460a; --line: rgba(168, 112, 28, .2); color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { --bg: #16100a; --ink: #f6ead7; --muted: #b9a689; --deep: #ffab6e; --line: rgba(255, 200, 130, .16); color-scheme: dark; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.62 Mukta, system-ui, sans-serif; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
header, main, footer { max-width: 720px; margin: 0 auto; }
header { padding: 20px 0; } .brand { font: 700 22px Georgia, serif; color: var(--deep); text-decoration: none; }
h1 { font: 600 34px/1.2 Georgia, serif; margin: 12px 0; text-wrap: balance; } h2 { font: 600 21px/1.3 Georgia, serif; margin: 28px 0 6px; }
a { color: var(--deep); } .list { list-style: none; padding: 0; } .list li { padding: 10px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; } .list span, .who, .updated { color: var(--muted); font-size: 15px; }
blockquote { margin: 16px 0; padding-left: 14px; border-left: 2px solid var(--deep); font-style: italic; } .cta { font-weight: 600; } .pager { display: flex; gap: 18px; }
footer { margin-top: 44px; padding: 18px 0 32px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); } footer a { margin-right: 16px; }