/* magazine-news — dense tech news magazine. Serif headlines, red accent. */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--fs-base, 17px); }
body { margin: 0; font-family: var(--f-body, 'Inter', system-ui, sans-serif); background: var(--c-bg, #FFFFFF); color: var(--c-text, #111827); line-height: var(--lh, 1.55); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-accent, #DC2626); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre { font-family: var(--f-code); }
pre { background: #F9FAFB; padding: 1rem; overflow-x: auto; border-left: 4px solid #DC2626; }
code { background: #FEE2E2; padding: 0.1em 0.35em; border-radius: 3px; font-size: 0.9em; }
.container { max-width: var(--max-w, 980px); margin: 0 auto; padding: 0 1.25rem; }
.site-header { border-bottom: 4px double #111827; padding: 1.25rem 0 1rem; background: #FFFFFF; }
.brand { font-family: var(--f-heading, 'Merriweather', Georgia, serif); font-weight: 900; font-size: 2rem; letter-spacing: -0.02em; color: var(--c-primary, #111827); text-transform: uppercase; }
.tagline { color: var(--c-muted, #6B7280); margin: 0.25rem 0 0.5rem; font-size: 0.85rem; font-style: italic; letter-spacing: 0.05em; }
.primary-nav { display: flex; gap: 1.5rem; border-top: 1px solid #E5E7EB; padding-top: 0.75rem; margin-top: 0.5rem; }
.primary-nav a { color: var(--c-text); font-weight: 600; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.05em; }
.primary-nav a:hover { color: var(--c-accent, #DC2626); }
.site-main { padding: 2rem 0 4rem; }
.page-title { font-family: var(--f-heading, 'Merriweather', Georgia, serif); font-size: 1.5rem; font-weight: 900; margin: 0 0 1.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid #111827; text-transform: uppercase; letter-spacing: 0.02em; }
.posts { list-style: none; padding: 0; margin: 0; display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .posts { grid-template-columns: 1fr 1fr; } }
.post-card { border-bottom: 1px solid #E5E7EB; padding-bottom: 1.5rem; }
.post-card .cover img { margin-bottom: 0.75rem; }
.post-card h2 { font-family: var(--f-heading, 'Merriweather', Georgia, serif); font-size: 1.4rem; font-weight: 900; margin: 0.25rem 0 0.5rem; line-height: 1.2; }
.post-card h2 a { color: var(--c-primary, #111827); }
.post-card h2 a:hover { color: var(--c-accent, #DC2626); }
.post-card .meta { color: var(--c-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.post-card .author { color: var(--c-accent, #DC2626); }
.post-card .excerpt { font-size: 0.95rem; color: var(--c-muted); margin: 0.4rem 0 0.5rem; }
.read-more { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.post-single { max-width: 720px; margin: 0 auto; }
.post-single .post-header h1 { font-family: var(--f-heading, 'Merriweather', Georgia, serif); font-size: 2.5rem; font-weight: 900; margin: 0 0 0.5rem; color: var(--c-primary); line-height: 1.15; }
.post-single .meta { color: var(--c-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid #E5E7EB; padding-bottom: 1rem; }
.post-single .cover { margin: 2rem 0; }
.post-body h2 { font-family: var(--f-heading, 'Merriweather', Georgia, serif); font-weight: 800; color: var(--c-primary); margin-top: 2.25rem; font-size: 1.6rem; }
.post-body h3 { font-family: var(--f-heading); color: var(--c-primary); margin-top: 1.5rem; }
.post-body p { margin: 1rem 0; }
.post-body blockquote { border-left: 4px solid var(--c-accent, #DC2626); padding-left: 1.25rem; font-style: italic; font-size: 1.15rem; color: var(--c-primary); margin: 1.5rem 0; }
.post-footer { margin-top: 3rem; padding-top: 1rem; border-top: 4px double #111827; }
.error-page { text-align: center; padding: 4rem 0; }
.error-page h1 { font-family: var(--f-heading, 'Merriweather', Georgia, serif); font-size: 3rem; }
.site-footer { border-top: 4px double #111827; padding: 1.5rem 0; color: var(--c-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; background: #F9FAFB; }
.empty { color: var(--c-muted); }