:root { --bg: #0e0d0c; --card: #1a1816; --line: #2d2a26; --fg: #f1ece4; --muted: #a39b8f; --accent: #e8a24a; }
@media (prefers-color-scheme: light) { :root { --bg: #f6f2ea; --card: #fffdf8; --line: #e2dbcf; --fg: #1c1915; --muted: #6f675c; --accent: #b86a12; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; }
.wrap { max-width: 880px; margin: 0 auto; padding: 56px 16px 64px; }
a { color: inherit; }
.eyebrow { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 14px; }
.lede { color: var(--muted); max-width: 560px; margin: 0 0 40px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { display: block; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px; transition: border-color .15s; }
.card:hover { border-color: var(--accent); }
.card h2 { margin: 0 0 6px; font-size: 1.25rem; }
.card p { margin: 0; color: var(--muted); font-size: 15px; }
.back { display: inline-block; margin-bottom: 28px; color: var(--muted); text-decoration: none; font-size: 15px; }
.back:hover { color: var(--accent); }
.empty { border: 1px dashed var(--line); border-radius: 14px; padding: 22px; color: var(--muted); }
footer { margin-top: 56px; font-size: 14px; color: var(--muted); }

.cta{display:inline-block;padding:10px 16px;border-radius:8px;background:currentColor;text-decoration:none}
.cta{color:inherit;border:1px solid currentColor;background:none}
.note{opacity:.7;font-size:.9em}