:root{--c:#c2570c;--bg:#fbf6ef;--fg:#2a2420}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 "Trebuchet MS",Verdana,sans-serif}
a{color:var(--c)}
.wrap{margin:0 auto;padding:0 20px;max-width:980px}
time{font:.82rem system-ui,Arial,sans-serif;opacity:.7}
h1{line-height:1.25}
.post p{margin:0 0 14px}
.foot{margin-top:44px;padding:22px 0;font:.85rem system-ui,Arial,sans-serif;opacity:.75;border-top:1px solid rgba(0,0,0,.12)}
.top{background:var(--c)}.top .wrap{display:flex;justify-content:space-between;align-items:center;min-height:62px;flex-wrap:wrap}.brand{color:#fff;font-weight:700;text-decoration:none;font-size:1.3rem;letter-spacing:.3px}nav a{color:#fff;margin-left:20px;text-decoration:none;opacity:.85}nav a.on,nav a:hover{opacity:1;text-decoration:underline}main.wrap{padding-top:10px}main.wrap>h1,main.wrap>.lead{grid-column:1/-1}.grid main.wrap,body.grid main.wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;align-items:start}.card{background:#fff;border-radius:6px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.12)}.card h2{font-size:1.1rem;margin:4px 0 6px}.card h2 a{color:var(--c);text-decoration:none}body.grid .post{grid-column:1/-1;max-width:720px}