/* Page-specific layout only; colours, type and chrome come from /theme/theme.css. */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
.hero { max-width: 760px; margin: 0; padding: 36px 24px 30px; box-sizing: border-box; }
.hero h1 { font-size: 30px; line-height: 1.2; margin: 0 0 6px; }
.hero p { color: var(--dim); margin: 0 0 18px; }
.hero h2 { font-size: 15px; color: var(--dim); font-weight: 600; margin: 28px 0 10px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cards a { display: block; text-decoration: none; background: var(--card); border: 1px solid var(--rule); padding: 12px 14px; color: var(--fg); }
.cards a b { display: block; color: var(--link); }
.cards a span { font-size: 13px; color: var(--dim); }
.cards a:hover b, .cards a:focus-visible b { text-decoration: underline; }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }