.blog-hero {
    background: radial-gradient(circle at 78% 18%, rgba(28, 224, 220, 0.14), transparent 32%), linear-gradient(135deg, #0f3460 0%, #16213e 100%);
    color: white;
    padding: 144px 2rem 88px;
    text-align: center;
}

.blog-hero__content {
    max-width: 850px;
    margin: 0 auto;
}

.blog-hero__eyebrow {
    display: block;
    margin-bottom: 1.25rem;
    color: #1ce0dc;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.blog-hero__eyebrow span { color: rgba(255, 255, 255, 0.55); padding: 0 0.4rem; }

.blog-hero h1 {
    font-size: clamp(2.1rem, 5vw, 3.8rem);
    margin-bottom: 1rem;
    color: #1ce0dc;
    font-family: "Oxanium", sans-serif;
    line-height: 1.15;
}

.blog-hero p {
    font-size: clamp(1rem, 2vw, 1.2rem);
    max-width: 680px;
    margin: 0 auto;
    color: #e2e8f0;
    line-height: 1.65;
}

.blog-hero__link {
    display: inline-block;
    margin-top: 2rem;
    padding: 0.85rem 1.3rem;
    border: 1px solid #1ce0dc;
    border-radius: 5px;
    color: #102b47;
    background: #1ce0dc;
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}

.blog-hero__link:hover,
.blog-hero__link:focus-visible {
    background: #a5f3ef;
    border-color: #a5f3ef;
}

@media (max-width: 600px) {
    .blog-hero { padding: 116px 1.25rem 68px; }
    .blog-hero__eyebrow { font-size: 0.68rem; letter-spacing: 0.08em; }
    .blog-hero__link { max-width: 100%; }
}

.blog-section {
    background: white;
    padding: 80px 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.blog-section h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: #1a1a2e;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.blog-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.blog-card-header {
    background: #2e4969;
    padding: 1.5rem 2rem 1rem;
}

.blog-card-header .blog-tag {
    font-size: 0.75rem;
    font-weight: bold;
    color: #1ce0dc;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.blog-card-header h3 {
    color: white;
    font-size: 1.2rem;
    margin-top: 0.5rem;
    line-height: 1.4;
}

.blog-card-body {
    padding: 1.5rem 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-card-body p {
    color: #555;
    line-height: 1.7;
    flex: 1;
}

.blog-card-footer {
    padding: 0 2rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blog-date {
    font-size: 0.85rem;
    color: #999;
}

.blog-read-more {
    color: #2e4969;
    font-weight: bold;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.blog-read-more:hover {
    color: #1ce0dc;
}

.blog-cta {
    background: #f4f4f4;
    text-align: center;
    padding: 60px 2rem;
}

.blog-cta h2 {
    font-size: 2rem;
    color: #1a1a2e;
    margin-bottom: 1rem;
}

.blog-cta p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
/* ---------- Featured report card (top of the post list) ---------- */
/* A dark panel so the report reads as featured rather than as another post,
   echoing the report page's own navy identity. Uses the redesign tokens from
   tokens.css, which blog.html also loads. Every selector is class-scoped so
   main.css's h2 / p / a rules can't bleed in. */
.blog-featured {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
    position: relative;
    overflow: hidden;
    margin-bottom: 64px;
    padding: 40px 44px;
    background: var(--nd-gradient-brand);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--nd-radius-xl);
    box-shadow: var(--nd-shadow-lg);
    transition: transform var(--nd-duration-base) var(--nd-ease-standard),
                box-shadow var(--nd-duration-base) var(--nd-ease-standard);
}

/* Teal bloom in the top-right, behind the content. */
.blog-featured::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(620px 320px at 100% 0%, rgba(22, 197, 184, 0.18), transparent 65%);
    pointer-events: none;
}

.blog-featured:hover {
    transform: translateY(-3px);
    box-shadow: var(--nd-shadow-xl);
}

.blog-featured__body {
    position: relative;
    max-width: 680px;
}

.blog-featured__meta {
    display: block;
    font-family: var(--nd-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--nd-teal-300);
    margin-bottom: 14px;
}

.blog-featured h2 {
    font-family: var(--nd-font-display);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.01em;
    text-align: left;
    color: #fff;
    margin: 0 0 14px;
}

.blog-featured p {
    font-family: var(--nd-font-sans);
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.blog-featured__topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}

.blog-featured__topics li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--nd-font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55);
}

.blog-featured__topics li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--nd-teal-400);
}

.blog-featured__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    margin-top: 26px;
    padding: 0 22px;
    border-radius: var(--nd-radius-md);
    background: var(--nd-accent);
    color: var(--nd-accent-contrast);
    font-family: var(--nd-font-sans);
    font-size: 15px;
    font-weight: 600;
    transition: background var(--nd-duration-fast) var(--nd-ease-standard);
}

.blog-featured:hover .blog-featured__cta {
    background: var(--nd-accent-hover);
}

.blog-featured__cta svg {
    transition: transform var(--nd-duration-fast) var(--nd-ease-standard);
}

.blog-featured:hover .blog-featured__cta svg {
    transform: translateX(3px);
}

/* Oversized year, sitting quietly behind the right edge. */
.blog-featured__year {
    position: relative;
    font-family: var(--nd-font-display);
    font-size: 104px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(22, 197, 184, 0.35);
    user-select: none;
}

@media (max-width: 900px) {
    .blog-featured {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 30px 26px;
        margin-bottom: 48px;
    }

    .blog-featured h2 {
        font-size: 24px;
    }

    .blog-featured__year {
        display: none;
    }
}