:root { --ink: #1f2a1a; --muted: #6b7760; --line: #d9dccf; --paper: #f5f3ec; --card: #fff; }
@media (prefers-color-scheme: dark) { :root { --ink: #eef0e6; --muted: #a3ad97; --line: #39402f; --paper: #161a12; --card: #1f241a; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 1080px; margin: 0 auto; padding: 72px 24px 40px; }
.eyebrow { margin: 0 0 12px; color: var(--muted); font-size: 12px; letter-spacing: .12em; }
h1 { margin: 0 0 16px; font-size: clamp(34px, 6vw, 56px); line-height: 1.1; }
.intro { max-width: 640px; margin: 0 0 44px; color: var(--muted); font-size: 18px; }
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.products a { display: grid; grid-template-columns: 28px 1fr; gap: 6px 12px; height: 100%; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: inherit; text-decoration: none; }
.products a:hover, .products a:focus-visible { border-color: var(--muted); }
.products img { grid-row: span 2; }
.products span { color: var(--muted); font-size: 14px; }
footer { display: flex; flex-wrap: wrap; gap: 20px; max-width: 1080px; margin: 0 auto; padding: 24px; border-top: 1px solid var(--line); font-size: 14px; }
footer a, main p a { color: var(--ink); }