/* The shelf: Luminarium black and white, OMEN headings (same fonts as journey.luminarium.store). */
@font-face { font-family: Omen; src: url(omen.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: Poppins; font-weight: 300; src: url(poppins-light.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: Poppins; font-weight: 400; src: url(poppins-regular.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: Poppins; font-weight: 500; src: url(poppins-medium.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: Poppins; font-weight: 600; src: url(poppins-semibold.woff2) format('woff2'); font-display: swap; }

:root { --ink: #1a1a1a; --body: #3c3c3c; --soft: #8a8a8a; --rule: #e6e6e6; --paper: #fff; --tint: #f2f2f2; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--body); font: 300 17px/1.65 Poppins, system-ui, sans-serif; }
h1, h2, p { margin: 0; }

.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; padding: 12px 24px;
       background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.lum { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--body); white-space: nowrap;
       font-weight: 500; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.lum:hover { color: var(--ink); }
.lum .diamond { font-family: Omen, Poppins, serif; font-size: 22px; letter-spacing: 0; color: var(--ink); line-height: 1; }

main { max-width: 960px; margin: 0 auto; padding: 72px 16px 40px; }
.omen { font-family: Omen, Poppins, serif; font-weight: 400; color: var(--ink); letter-spacing: .02em; line-height: 1.05;
        font-size: clamp(56px, 12vw, 96px); }
.lede { font-size: 18px; margin: 10px 0 44px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.card { display: flex; gap: 20px; align-items: center; text-decoration: none; color: var(--body); background: var(--tint);
        border-radius: 16px; padding: 22px; transition: transform .2s; }
.card:hover { transform: translateY(-3px); }
.card .icon { flex: none; border-radius: 22px; width: 96px; height: 96px; }
.card h2 { font-weight: 600; font-size: 22px; color: var(--ink); line-height: 1.2; margin-bottom: 4px; }
.card p { font-size: 15px; line-height: 1.5; }
.card .meta { margin-top: 8px; font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--soft); }
@media (max-width: 480px) { .card { flex-direction: column; align-items: flex-start; } }

.foot { text-align: center; padding: 40px 16px 56px; font-size: 14px; }
.foot a { color: var(--soft); text-decoration: none; }
.foot a:hover { color: var(--ink); }