.home-wrap { max-width: 760px; margin: 0 auto; padding: 88px 16px 40px; }
.home-wrap h1 { text-align: center; font-family: var(--display); font-weight: 400; font-size: 30px; color: var(--head); margin: 0; }
.home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.home-card { display: block; padding: 22px 22px 18px; border: 1px solid var(--line2); background: var(--panel); color: var(--text); text-decoration: none; }
.home-card:hover { border-color: var(--gold-dim); background: var(--hover); color: var(--text); }
.home-card h2 { font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--head); margin: 0 0 8px; }
.home-card p { margin: 0 0 16px; color: var(--muted); line-height: 1.5; }
.home-card .caps { color: var(--gold-dim); }
.home-foot { margin-top: 44px; font-size: 13px; text-align: center; }
.home-sub { text-align: center; margin: 6px 0 36px; color: var(--muted); }

/* the atlas, dotted and out of focus, behind everything (brand/home-bg.png from tools/build_og.py) */
.home-bg { position: fixed; inset: -40px; z-index: -1; pointer-events: none; background: url(/static/brand/home-bg.png) center / cover no-repeat; filter: blur(5px); opacity: .5; }
.home-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 35%, transparent 0%, var(--bg) 75%); }
body.home { background: var(--bg); }
:root:is([data-theme="light"], [data-theme="console"]) .home-bg { opacity: .18; }      /* the dark art greys a light page */
.home-card { background: color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter: blur(6px); }