/* ============================================
   Klarinotte — Blog
   Companion to styles.css. Load order:
       <link rel="stylesheet" href="../styles.css">
       <link rel="stylesheet" href="blog.css">
   All shell chrome (.nav, .container, .footer, .btn-primary)
   comes from styles.css — this file only adds the reading
   column and article typography.
   ============================================ */

/* ── Page shell ──────────────────────────────────────────────── */
/* Matches the .download-main offset for the fixed navbar. */
.blog-main {
    padding: 120px 0 80px;
}

.blog-article {
    max-width: 44rem;
    margin: 0 auto;
}

/* The global reset zeroes margins and strips underlines; the
   article needs both back for readable prose. */
.blog-article p,
.post-list p {
    margin: 0 0 1.625rem;
    color: var(--color-text-secondary);
    line-height: 1.8;
    text-wrap: pretty;
}

.blog-article a:not(.btn-primary):not(.post-back) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* 700, not 650 — the Google Fonts link serves static Inter weights, so any
   in-between value just rounds to the nearest loaded face. */
.blog-article strong { color: var(--color-text-primary); font-weight: 700; }

/* ── Post header ─────────────────────────────────────────────── */
.post-back {
    display: inline-block;
    margin-bottom: 1.75rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}
.post-back:hover { color: var(--color-primary-light); }

.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.post-meta .dot { opacity: 0.45; }

.post-title {
    font-size: clamp(1.875rem, 5.5vw, 2.75rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
    font-weight: 800;
    margin-bottom: 1.25rem;
    text-wrap: balance;
}

.post-standfirst {
    font-size: 1.1875rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
    margin-bottom: 2.75rem;
    padding-bottom: 2.75rem;
    border-bottom: 1px solid var(--color-border);
    text-wrap: pretty;
}

/* ── Pull quote ──────────────────────────────────────────────── */
.post-quote {
    margin: 2.25rem 0;
    padding: 1.375rem 1.5rem;
    background: var(--color-bg-card);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.post-quote p { margin: 0; }
.post-quote cite {
    display: block;
    margin-top: 0.875rem;
    font-size: 0.8125rem;
    font-style: normal;
    color: var(--color-text-muted);
}

/* ── Pull stat ───────────────────────────────────────────────── */
.post-stat {
    margin: 2.75rem 0;
    padding: 2rem 1.5rem;
    text-align: center;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.post-stat-figure {
    display: block;
    font-size: clamp(2.125rem, 8vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color-primary-light);
}
.post-stat-label {
    display: block;
    margin-top: 0.625rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    text-wrap: balance;
}

/* ── Sources ─────────────────────────────────────────────────── */
.post-sources {
    margin-top: 3.5rem;
    padding: 1.75rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
}
.post-sources h2 {
    margin-bottom: 1rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
}
.post-sources ol {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--color-text-muted);
}
.post-sources li { margin-bottom: 0.625rem; line-height: 1.55; }
.post-sources li:last-child { margin-bottom: 0; }
.post-sources a { overflow-wrap: anywhere; }

/* ── End-of-post CTA ─────────────────────────────────────────── */
.post-cta {
    margin-top: 2.5rem;
    padding: 2rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.post-cta h2 {
    margin-bottom: 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}
.post-cta p { margin-bottom: 1.5rem; }

/* ── Index listing ───────────────────────────────────────────── */
.blog-head {
    max-width: 44rem;
    margin: 0 auto 2.75rem;
}
.blog-head h1 {
    font-size: clamp(1.875rem, 5vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 0.75rem;
}
.blog-head p { margin: 0; color: var(--color-text-secondary); font-size: 1.0625rem; }

.post-list {
    list-style: none;
    padding: 0;
    max-width: 44rem;
    margin: 0 auto;
}
.post-list li { border-top: 1px solid var(--color-border); }
.post-list li:last-child { border-bottom: 1px solid var(--color-border); }

.post-list li > a {
    display: block;
    padding: 1.75rem 1rem 1.75rem 0;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), padding-left var(--transition-fast);
}
.post-list li > a:hover {
    background: var(--color-bg-card);
    padding-left: 1rem;
}
.post-list time {
    display: block;
    margin-bottom: 0.625rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.post-list h2 {
    margin-bottom: 0.5rem;
    font-size: 1.3125rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--color-text-primary);
    text-wrap: balance;
}
.post-list li > a:hover h2 { color: var(--color-primary-light); }
.post-list p { margin: 0; color: var(--color-text-muted); font-size: 0.9688rem; }

/* ── Small screens ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .blog-main { padding: 100px 0 60px; }
    .post-sources,
    .post-cta,
    .post-stat { padding: 1.375rem; }
}

@media (prefers-reduced-motion: reduce) {
    .post-list li > a { transition: none; }
}

@media print {
    .nav, .footer, .post-cta, .post-back { display: none !important; }
    .blog-main { padding: 0; }
    .blog-article p { color: #000; }
}