:root { --bg: #faf7f2; --ink: #1f1b16; --muted: #6b6258; --accent: #c2410c; --card: #ffffff; --line: #e8e1d6; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #16130f; --ink: #f3ede4; --muted: #a59a8c; --accent: #fb923c; --card: #201c17; --line: #332d25; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 Georgia, "Times New Roman", serif; }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; }
.top { border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { font: 700 22px/1 system-ui, sans-serif; color: var(--ink); text-decoration: none; letter-spacing: -0.02em; }
.logo span { color: var(--accent); }
nav a { margin-left: 20px; color: var(--muted); text-decoration: none; font: 15px system-ui, sans-serif; }
nav a:hover { color: var(--accent); }
.hero { padding: 56px 0 24px; max-width: 640px; }
.hero h1 { font-size: 40px; line-height: 1.15; margin: 0 0 16px; }
.hero p { color: var(--muted); font-size: 18px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; padding: 24px 0 56px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.card h2 { font-size: 21px; line-height: 1.3; margin: 10px 0; }
.card p { color: var(--muted); margin: 0 0 14px; }
.tag { font: 600 12px system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
time { font: 13px system-ui, sans-serif; color: var(--muted); }
.foot { border-top: 1px solid var(--line); padding: 24px 20px 40px; color: var(--muted); font: 14px system-ui, sans-serif; }