:root { --bg: #f6f1ea; --ink: #221d19; --muted: #6c625a; --card: #fffdf9; --accent: #a84e25; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #171412; --ink: #f3ece4; --muted: #b3a89d; --card: #221d1a; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 system-ui, sans-serif; }
main { max-width: 1040px; margin: 0 auto; padding: 32px 16px 64px; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--accent); margin: 0; }
h1 { font-size: clamp(32px, 6vw, 56px); margin: 4px 0 8px; }
header p { color: var(--muted); max-width: 640px; }
a { color: var(--accent); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 24px; }
.card { display: block; padding: 20px; border-radius: 18px; background: var(--card); color: var(--ink);
  text-decoration: none; box-shadow: 0 1px 0 rgb(0 0 0 / 6%), 0 12px 32px -20px rgb(0 0 0 / 35%);
  transition: transform .25s ease, box-shadow .25s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgb(0 0 0 / 6%), 0 20px 40px -18px rgb(0 0 0 / 40%); }
.card b { color: var(--accent); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.card h2 { margin: 6px 0; font-size: 20px; }
.card p { margin: 0 0 10px; color: var(--muted); }
.card small { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }