:root {
    --card-bg: #1e1e1e;
    --text-muted: #b8c0cc;
    --border: #2c2c2c;
    --radius: 1rem;
    --reading-width: 72ch; /* ~optimal reading width */
}

body { background: #0f0f10; color: #f1f5f9; }

/* Layout / typography */
.article {
    max-width: var(--reading-width);
    margin: 0 auto;
}

.article h1 {
    font-size: clamp(1.8rem, 2.2vw + 1rem, 2.6rem);
    line-height: 1.2;
    margin-bottom: .5rem;
}

.article .meta {
    color: var(--text-muted);
    font-size: .95rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
}

/* Consistent hero image sizing (16:9 recommended for blog hero) */
.post-hero {
    border-radius: var(--radius);
    overflow: hidden;
    background: #111;
    margin: 1.25rem 0 1.75rem;
}
.post-hero .ratio {
    --bs-aspect-ratio: 56.25%; /* 16:9 */
}
.post-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Article body */
.article-body p { margin: 0 0 1.1rem; }
.article-body h2, .article-body h3 {
    margin-top: 1.6rem;
    margin-bottom: .6rem;
    line-height: 1.25;
}
.article-body img { max-width: 100%; height: auto; border-radius: .5rem; }

/* Amazon affiliate block (drop anywhere in the article) */
.affiliate-block {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1rem;
    padding: 1rem;
    margin: 1.5rem 0;
    align-items: center;
}
.affiliate-block img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* product shots often have transparency */
    background: #0b0b0c;
    border-radius: .5rem;
}
.affiliate-block .title {
    font-weight: 600;
    margin-bottom: .25rem;
}
.affiliate-block .desc {
    color: var(--text-muted);
    font-size: .95rem;
    margin-bottom: .6rem;
}
.affiliate-block .btn-amz {
    display: inline-block;
    padding: .5rem .9rem;
    border-radius: .5rem;
    background: #f59e0b;
    color: #111;
    text-decoration: none;
    font-weight: 600;
}
.affiliate-block small {
    display: block;
    margin-top: .5rem;
    color: var(--text-muted);
    font-size: .8rem;
}
@media (max-width: 576px) {
    .affiliate-block { grid-template-columns: 1fr; }
}

/* Sticky “back” link and share row */
.top-row {
    display: flex; gap: .75rem; align-items: center; justify-content: space-between;
    margin: 1rem 0;
}
.back-link {
    color: #93c5fd; text-decoration: none; font-weight: 600;
}
.share {
    display: flex; gap: .5rem; color: var(--text-muted);
    font-size: .95rem;
}
.share a { color: #cbd5e1; text-decoration: none; }
.share a:hover { text-decoration: underline; }