:root { --bg: #0e0b14; --fg: #f4f1e9; --fg-soft: #c8c2b3; --muted: #888070; --accent: #C9A961; --accent-2: #d4b878; --rule: #2a2330; --paper: #1c1722 }
* { box-sizing: border-box; margin: 0; padding: 0 }
html, body { background: var(--bg); color: var(--fg); font-family: Georgia, 'Times New Roman', serif; line-height: 1.65; -webkit-font-smoothing: antialiased }
a { color: var(--accent); text-decoration: none; transition: color .15s }
a:hover { color: var(--accent-2) }
header.site-header { padding: 40px 32px 24px; text-align: center; border-bottom: 1px solid var(--rule) }
header .mark { display: inline-flex; align-items: center; gap: 12px; letter-spacing: 8px; font-size: 14px; color: var(--accent); font-weight: 700; text-transform: uppercase; font-family: 'Inter', sans-serif }
.hero { padding: 80px 24px 60px; text-align: center; border-bottom: 1px solid var(--rule) }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 16px; color: var(--fg) }
.hero h1 em { color: var(--accent); font-style: italic }
.hero p.lead { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--fg-soft); max-width: 720px; margin: 0 auto; font-style: italic }
main { max-width: 1100px; margin: 0 auto; padding: 60px 24px 80px }
section + section { margin-top: 64px }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 6px; color: var(--accent); text-transform: uppercase; margin-bottom: 12px; font-family: 'Inter', sans-serif }
.section-title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 400; margin-bottom: 28px; color: var(--fg) }
.series-grid { display: grid; grid-template-columns: 1fr; gap: 28px }
@media (min-width: 760px) { .series-grid { grid-template-columns: 1fr 1fr } }
.book { background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 28px 32px; transition: border-color .15s }
.book:hover { border-color: var(--accent) }
.book .num { font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 5px; color: var(--accent); font-weight: 700 }
.book h3 { font-size: 1.4rem; font-weight: 400; margin: 6px 0 4px; color: var(--fg) }
.book h3 em { font-style: italic; color: var(--accent-2) }
.book .source { font-size: 12px; color: var(--muted); margin-bottom: 14px; font-style: italic }
.book p.blurb { font-size: 15px; color: var(--fg-soft); line-height: 1.65 }
.media-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; font-family: 'Inter', sans-serif }
.media-pill { padding: 4px 12px; border: 1px solid var(--rule); border-radius: 999px; font-size: 11px; color: var(--fg-soft); letter-spacing: 0.5px }
.brand-block { background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 32px 36px; margin-top: 18px }
.brand-block h4 { font-size: 1.3rem; font-weight: 400; color: var(--fg); margin-bottom: 8px }
.brand-block p { color: var(--fg-soft); line-height: 1.65 }
.brand-block a.cta-link { color: var(--accent); font-family: 'Inter', sans-serif; font-size: 13px; letter-spacing: 1px; display: inline-block; margin-top: 16px }
footer { padding: 36px 24px 48px; border-top: 1px solid var(--rule); text-align: center; color: var(--muted); font-size: 12px; font-family: 'Inter', sans-serif; line-height: 1.6 }
footer a { color: var(--fg-soft) }
footer a:hover { color: var(--accent) }
.divider-rule { display: flex; align-items: center; gap: 16px; color: var(--muted); margin: 12px 0; font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 4px; text-transform: uppercase }
.divider-rule::before, .divider-rule::after { content: ''; flex: 1; height: 1px; background: var(--rule) }
.byline { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--muted); letter-spacing: 1px; margin-top: 14px }
.byline em { color: var(--accent); font-style: italic }