/* ═══════════════════════════════════════════════════════════════════════════
   PRASAD IB — BLOG
   Editorial layer over root.css. Brand navy + gold only; no Bootstrap blue.

   Design notes:
   - Spacious scale (24-96px), because long-form reading needs air.
   - Article measure is capped at 68ch: past ~75ch the eye loses the line
     return and scanning speed drops.
   - Every reveal animation is owned by GSAP (site-motion.js) or AOS, both
     already loaded site-wide. Nothing new is imported here.
   - All colours resolve from root.css tokens so a brand change lands here
     for free.
   ═══════════════════════════════════════════════════════════════════════ */

/* Height of the site's sticky navbar. Measured at runtime by js/Public/blog.js so
   the sticky offsets below follow the real chrome (it changes between the desktop
   and collapsed mobile navbar); the value here is the no-JS fallback. Declared on
   :root rather than .blog-page because the progress bar lives outside that wrapper
   in the stacking order. */
:root {
    --pib-nav-h: 55px;
}

.blog-page {
    /* Spacing scale */
    --blog-1: .5rem;
    --blog-2: 1rem;
    --blog-3: 1.5rem;
    --blog-4: 2rem;
    --blog-5: 3rem;
    --blog-6: 4.5rem;
    --blog-7: 6rem;
    /* Reading measure. The ch unit is the advance width of "0", which is wider
       than average lowercase, so a bare 68ch renders nearer 80 visible characters
       on this typeface. The rem cap pulls the real line back into the comfortable
       65 to 75 character band on wide screens. */
    --blog-measure: min(68ch, 42rem);
    --blog-radius: .875rem;
    --blog-radius-sm: .5rem;
    --blog-shadow: 0 1px 2px rgba(10,37,64,.04), 0 8px 28px rgba(10,37,64,.07);
    --blog-shadow-lift: 0 4px 10px rgba(10,37,64,.07), 0 18px 44px rgba(10,37,64,.13);
}

/* ═══════════════════════════════════════════════════════
   1. READING PROGRESS
   A 3px gold rule across the very top. Width is driven by
   JS; the element is inert and hidden from assistive tech
   because the same information is in the scrollbar.
═══════════════════════════════════════════════════════ */
.blog-progress {
    position: fixed;
    top: var(--pib-nav-h);
    left: 0;
    width: 100%;
    height: 3px;
    /* Above Bootstrap's sticky-top navbar (1020) so the rule is never clipped by
       it, but positioned at the navbar's lower edge rather than over its top. */
    z-index: 1035;
    background: transparent;
    pointer-events: none;
}

.blog-progress-bar {
    height: 100%;
    width: 0;
    background: var(--gradient-gold);
    box-shadow: 0 0 12px rgba(242,179,61,.55);
    transform-origin: left center;
    transition: width .08s linear;
}

/* ═══════════════════════════════════════════════════════
   2. HERO — the unified navy band every page uses
═══════════════════════════════════════════════════════ */
.blog-hero {
    background: var(--color-primary);
    color: #fff;
    padding: 3.5rem 0 2.75rem;
    position: relative;
    overflow: hidden;
}

    /* Same diagonal gold pinstripe .pib-hero uses on every other page. */
    .blog-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient( -45deg, rgba(244,187,68,.04) 0, rgba(244,187,68,.04) 1px, transparent 1px, transparent 34px );
        pointer-events: none;
    }

.blog-hero-inner {
    position: relative;
    z-index: 1;
}

.blog-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-accent-bright);
    margin-bottom: var(--blog-2);
}

.blog-hero-title {
    font-family: "Hanken Grotesk", sans-serif;
    font-size: clamp(1.65rem, 3.2vw, 2.4rem);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -.02em;
    color: #fff;
    margin: 0 0 var(--blog-3);
    max-width: 20ch;
    text-wrap: balance;
}

.blog-hero-lede {
    font-size: .93rem;
    line-height: 1.72;
    color: rgba(255,255,255,.72);
    max-width: 56ch;
    margin: 0;
}

/* ── Breadcrumbs (navy hero variant) ── */
.blog-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    list-style: none;
    padding: 0;
    margin: 0 0 var(--blog-3);
    font-size: .82rem;
}

    .blog-crumbs li {
        display: flex;
        align-items: center;
        gap: .4rem;
        color: rgba(255,255,255,.62);
    }

        .blog-crumbs li + li::before {
            content: '';
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: rgba(255,255,255,.35);
        }

    .blog-crumbs a {
        color: rgba(255,255,255,.78);
        text-decoration: none;
        border-bottom: 1px solid transparent;
        transition: color .18s ease, border-color .18s ease;
    }

        .blog-crumbs a:hover,
        .blog-crumbs a:focus-visible {
            color: var(--color-accent-bright);
            border-bottom-color: currentColor;
        }

    .blog-crumbs [aria-current="page"] {
        color: rgba(255,255,255,.95);
        font-weight: 600;
    }

/* ═══════════════════════════════════════════════════════
   3. FILTER BAR — search + category pills
═══════════════════════════════════════════════════════ */
.blog-toolbar {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: var(--blog-3) 0;
    position: sticky;
    /* Below the site navbar, which is itself sticky at top 0. Sharing the offset
       would let the navbar draw straight over the search field. */
    top: var(--pib-nav-h);
    z-index: 20;
    backdrop-filter: saturate(1.4) blur(8px);
}

.blog-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--blog-2) var(--blog-3);
    justify-content: space-between;
}

    /* A flex item defaults to min-width:auto, which refuses to shrink below its
       content. Without this the pill row expands the toolbar to the width of every
       pill laid end to end and drags the whole page sideways with it. */
    .blog-toolbar-row > * {
        min-width: 0;
        max-width: 100%;
    }

/* Owns the horizontal scroll for the pills. The scroller has to be the wrapper
   rather than the <ul> itself: the ul is the flex line that wants to be wide, so
   the clipping boundary must sit outside it. */
.blog-pills-scroller {
    min-width: 0;
    max-width: 100%;
}

.blog-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 2rem;
    padding: .35rem .35rem .35rem .9rem;
    flex: 1 1 20rem;
    min-width: 0;
    max-width: 22rem;
    transition: border-color .18s ease, box-shadow .18s ease;
}

    .blog-search:focus-within {
        border-color: var(--color-primary);
        box-shadow: var(--input-shadow-focus);
    }

    .blog-search i {
        color: var(--color-text-muted);
        font-size: .95rem;
    }

    .blog-search input {
        flex: 1 1 auto;
        border: 0;
        background: transparent;
        font-size: .9rem;
        color: var(--color-text);
        padding: .35rem 0;
        min-width: 0;
    }

        .blog-search input:focus {
            outline: none;
        }

        .blog-search input::placeholder {
            color: var(--color-text-muted);
            opacity: .85;
        }

.blog-search-btn {
    border: 0;
    background: var(--color-primary);
    color: #fff;
    border-radius: 2rem;
    /* 44px min target on every axis (touch guideline). */
    min-height: 2.35rem;
    padding: 0 1.05rem;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s ease;
}

    .blog-search-btn:hover {
        background: var(--color-primary-light);
    }

.blog-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .95rem;
    border-radius: 2rem;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}

    .blog-pill:hover,
    .blog-pill:focus-visible {
        color: var(--color-primary);
        border-color: var(--color-primary);
        background: var(--color-surface);
        transform: translateY(-1px);
    }

    .blog-pill.is-active {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: #fff;
    }

    /* On a touch device the pill has to be a finger target, not just a link.
       Scoped to coarse pointers so the desktop filter bar stays compact. */
    @media (pointer: coarse) {
        .blog-pill {
            min-height: 44px;
        }
    }

.blog-pill-count {
    font-size: .7rem;
    font-weight: 700;
    opacity: .7;
}

/* ═══════════════════════════════════════════════════════
   4. LISTING SHELL
═══════════════════════════════════════════════════════ */
.blog-listing {
    padding: var(--blog-5) 0 var(--blog-7);
}

.blog-results-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--blog-2);
    margin-bottom: var(--blog-4);
    font-size: .84rem;
    color: var(--color-text-muted);
}

.blog-clear-filter {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(18,60,97,.3);
}

    .blog-clear-filter:hover {
        border-bottom-color: currentColor;
    }

/* ── Featured hero card ── */
.blog-featured {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--blog-radius);
    overflow: hidden;
    box-shadow: var(--blog-shadow);
    margin-bottom: var(--blog-5);
    transition: box-shadow .25s ease, transform .25s ease;
}

    .blog-featured:hover {
        box-shadow: var(--blog-shadow-lift);
    }

.blog-featured-media {
    position: relative;
    background: var(--gradient-navy);
    min-height: 18rem;
}

    .blog-featured-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.blog-featured-body {
    padding: clamp(1.5rem, 3vw, 2.75rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-featured-title {
    font-family: "Hanken Grotesk", sans-serif;
    font-size: clamp(1.35rem, 2.4vw, 1.95rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.015em;
    margin: var(--blog-2) 0 var(--blog-2);
    text-wrap: balance;
}

    .blog-featured-title a {
        color: var(--color-text);
        text-decoration: none;
        background-image: linear-gradient(var(--color-accent), var(--color-accent));
        background-size: 0 2px;
        background-position: 0 100%;
        background-repeat: no-repeat;
        transition: background-size .3s ease, color .2s ease;
    }

        .blog-featured-title a:hover,
        .blog-featured-title a:focus-visible {
            color: var(--color-primary);
            background-size: 100% 2px;
        }

.blog-featured-excerpt {
    font-size: .95rem;
    line-height: 1.72;
    color: var(--color-text-muted);
    margin: 0 0 var(--blog-3);
    max-width: 52ch;
}

/* ── Card grid ── */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: var(--blog-3);
}

.blog-card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--blog-radius);
    overflow: hidden;
    height: 100%;
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

    .blog-card:hover {
        transform: translateY(-4px);
        border-color: rgba(18,60,97,.28);
        box-shadow: var(--blog-shadow-lift);
    }

    /* Whole-card keyboard affordance: the title link is the real control, so
       the ring is drawn on the card when that link has focus. */
    .blog-card:focus-within {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(242,179,61,.4);
    }

.blog-card-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--gradient-navy-soft);
    overflow: hidden;
}

    .blog-card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .5s cubic-bezier(.2,.7,.3,1);
    }

.blog-card:hover .blog-card-media img {
    transform: scale(1.04);
}

/* Fallback tile when a post has no cover: brand monogram on navy, never a
   broken image and never a stock photo standing in for real content. */
.blog-card-media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .blog-card-media--empty span {
        font-family: "Hanken Grotesk", sans-serif;
        font-size: 1.6rem;
        font-weight: 800;
        letter-spacing: .18em;
        color: rgba(242,179,61,.55);
    }

.blog-card-body {
    padding: var(--blog-3);
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: .65rem;
}

.blog-card-title {
    font-family: "Hanken Grotesk", sans-serif;
    font-size: 1.06rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    text-wrap: balance;
}

    .blog-card-title a {
        color: var(--color-text);
        text-decoration: none;
    }

        .blog-card-title a:hover,
        .blog-card-title a:focus-visible {
            color: var(--color-primary);
        }

        /* The ring lives on the card, not the inline link. */
        .blog-card-title a:focus-visible {
            outline: none;
        }

.blog-card-excerpt {
    font-size: .875rem;
    line-height: 1.68;
    color: var(--color-text-muted);
    margin: 0;
    flex: 1 1 auto;
}

/* ── Shared meta row ── */
.blog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    font-size: .76rem;
    color: var(--color-text-muted);
}

    .blog-meta > * {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
    }

    .blog-meta .blog-dot {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: currentColor;
        opacity: .5;
    }

.blog-tag-chip {
    display: inline-flex;
    align-items: center;
    padding: .2rem .6rem;
    border-radius: 2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: .72rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

    .blog-tag-chip:hover {
        color: var(--color-primary);
        border-color: var(--color-primary);
    }

.blog-category-chip {
    display: inline-flex;
    align-items: center;
    padding: .25rem .7rem;
    border-radius: 2rem;
    background: rgba(18,60,97,.08);
    color: var(--color-primary);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    align-self: flex-start;
}

    .blog-category-chip:hover {
        background: var(--color-primary);
        color: #fff;
    }

.blog-category-chip--onnavy {
    background: rgba(242,179,61,.16);
    color: var(--color-accent-bright);
}

    .blog-category-chip--onnavy:hover {
        background: var(--color-accent);
        color: var(--color-text-on-accent);
    }

/* ═══════════════════════════════════════════════════════
   5. EMPTY STATE
═══════════════════════════════════════════════════════ */
.blog-empty {
    text-align: center;
    padding: var(--blog-7) var(--blog-3);
    border: 1px dashed var(--color-border);
    border-radius: var(--blog-radius);
    background: var(--color-surface);
}

    .blog-empty i {
        font-size: 2rem;
        color: var(--color-primary);
        opacity: .55;
    }

    .blog-empty h2 {
        font-size: 1.15rem;
        font-weight: 700;
        margin: var(--blog-2) 0 .5rem;
        color: var(--color-text);
    }

    .blog-empty p {
        color: var(--color-text-muted);
        font-size: .9rem;
        max-width: 42ch;
        margin: 0 auto var(--blog-3);
    }

/* ═══════════════════════════════════════════════════════
   6. PAGINATION
═══════════════════════════════════════════════════════ */
.blog-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: var(--blog-6);
}

.blog-pager-link,
.blog-pager-gap {
    min-width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .7rem;
    border-radius: var(--blog-radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.blog-pager-link:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.blog-pager-link.is-current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    cursor: default;
}

.blog-pager-gap {
    border-color: transparent;
    background: transparent;
    cursor: default;
}

/* ═══════════════════════════════════════════════════════
   7. ARTICLE
═══════════════════════════════════════════════════════ */
.article-hero {
    background: var(--color-primary);
    color: #fff;
    padding: 3.5rem 0 2.75rem;
    position: relative;
    overflow: hidden;
}

    .article-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient( -45deg, rgba(244,187,68,.04) 0, rgba(244,187,68,.04) 1px, transparent 1px, transparent 34px );
        pointer-events: none;
    }

.article-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 46rem;
}

.article-title {
    font-family: "Hanken Grotesk", sans-serif;
    font-size: clamp(1.65rem, 3.2vw, 2.4rem);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -.02em;
    color: #fff;
    margin: var(--blog-2) 0 var(--blog-3);
    text-wrap: balance;
}

.article-standfirst {
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    line-height: 1.7;
    color: rgba(255,255,255,.82);
    margin: 0 0 var(--blog-3);
    max-width: 58ch;
}

.article-hero .blog-meta {
    color: rgba(255,255,255,.72);
}

/* ── Cover image: likely LCP, so eager + fetchpriority in the markup ── */
.article-cover {
    max-width: 60rem;
    margin: calc(var(--blog-4) * -1) auto var(--blog-4);
    padding: 0 var(--blog-2);
    position: relative;
    z-index: 2;
}

    .article-cover img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: var(--blog-radius);
        box-shadow: 0 18px 48px rgba(6,25,46,.28);
        border: 1px solid rgba(255,255,255,.12);
        background: var(--color-surface);
    }

.article-cover-caption {
    font-size: .76rem;
    color: var(--color-text-muted);
    text-align: center;
    margin: .6rem 0 0;
}

/* ── Two-column shell: table of contents rail + body ── */
.article-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--blog-5);
    padding: var(--blog-4) 0 var(--blog-7);
}

.article-main {
    min-width: 0;
}

.article-body {
    max-width: var(--blog-measure);
    font-size: 1.0625rem;
    line-height: 1.78;
    color: var(--color-text);
}

    .article-body > * + * {
        margin-top: 1.35em;
    }

    .article-body p {
        margin: 0;
    }

    .article-body h2 {
        font-family: "Hanken Grotesk", sans-serif;
        font-size: clamp(1.35rem, 2.5vw, 1.75rem);
        font-weight: 800;
        line-height: 1.25;
        letter-spacing: -.015em;
        color: var(--color-primary-deep);
        margin-top: 2.4em;
        /* Anchor offset so a TOC jump does not tuck the heading under the
           sticky navbar. */
        scroll-margin-top: calc(var(--pib-nav-h) + 2.5rem);
    }

    .article-body h3 {
        font-family: "Hanken Grotesk", sans-serif;
        font-size: clamp(1.1rem, 1.9vw, 1.3rem);
        font-weight: 700;
        line-height: 1.35;
        color: var(--color-primary);
        margin-top: 2em;
        scroll-margin-top: calc(var(--pib-nav-h) + 2.5rem);
    }

    .article-body h4 {
        font-size: 1.02rem;
        font-weight: 700;
        color: var(--color-text);
        margin-top: 1.8em;
    }

    .article-body a {
        color: var(--color-primary);
        text-decoration: underline;
        text-underline-offset: .18em;
        text-decoration-thickness: 1px;
        text-decoration-color: rgba(18,60,97,.42);
        transition: text-decoration-color .18s ease, color .18s ease;
    }

        .article-body a:hover {
            color: var(--color-primary-light);
            text-decoration-color: currentColor;
        }

    .article-body ul,
    .article-body ol {
        padding-left: 1.4em;
    }

        .article-body ul li,
        .article-body ol li {
            margin-bottom: .55em;
        }

    .article-body ul li::marker {
        color: var(--color-accent-dim);
    }

    .article-body ol li::marker {
        color: var(--color-accent-dim);
        font-weight: 700;
    }

    .article-body blockquote {
        margin: 2em 0;
        padding: .3em 0 .3em 1.4em;
        border-left: 3px solid var(--color-accent);
        font-size: 1.14rem;
        line-height: 1.62;
        color: var(--color-primary-deep);
        font-weight: 500;
    }

        .article-body blockquote p {
            margin: 0;
        }

    .article-body img,
    .article-body iframe,
    .article-body video {
        max-width: 100%;
        height: auto;
        border-radius: var(--blog-radius-sm);
        display: block;
    }

    .article-body iframe {
        aspect-ratio: 16 / 9;
        width: 100%;
        border: 0;
    }

    .article-body figure {
        margin: 2em 0;
    }

    .article-body figcaption {
        font-size: .8rem;
        color: var(--color-text-muted);
        margin-top: .55em;
        text-align: center;
    }

    .article-body code {
        font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
        font-size: .88em;
        background: var(--color-surface-raised);
        border: 1px solid var(--color-border);
        border-radius: .3rem;
        padding: .1em .38em;
        color: var(--color-primary-deep);
    }

    .article-body pre {
        background: var(--color-primary-ink);
        color: #E9EFF6;
        border-radius: var(--blog-radius-sm);
        padding: 1.1rem 1.25rem;
        /* Wide code must scroll inside its own box, never the page. */
        overflow-x: auto;
        font-size: .85rem;
        line-height: 1.65;
    }

        .article-body pre code {
            background: transparent;
            border: 0;
            padding: 0;
            color: inherit;
        }

    /* Tables scroll in their own wrapper (added by blog.js). */
    .article-body table {
        width: 100%;
        border-collapse: collapse;
        font-size: .9rem;
    }

    .article-body th,
    .article-body td {
        border: 1px solid var(--color-border);
        padding: .6rem .8rem;
        text-align: left;
    }

    .article-body thead th {
        background: var(--color-surface);
        color: var(--color-primary-deep);
        font-weight: 700;
    }

    .article-body hr {
        border: 0;
        border-top: 1px solid var(--color-border);
        margin: 2.6em 0;
    }

.article-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Table of contents ── */
.article-toc {
    font-size: .85rem;
}

.article-toc-inner {
    border-left: 2px solid var(--color-border);
    padding-left: var(--blog-2);
}

.article-toc-heading {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-accent-dim);
    margin: 0 0 var(--blog-2);
}

.article-toc ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.article-toc a {
    display: block;
    padding: .35rem .5rem;
    border-radius: var(--blog-radius-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    line-height: 1.45;
    transition: color .18s ease, background .18s ease;
}

    .article-toc a:hover {
        color: var(--color-primary);
        background: var(--color-surface);
    }

    .article-toc a.is-active {
        color: var(--color-primary);
        font-weight: 700;
        background: var(--color-surface);
    }

.article-toc li[data-level="3"] a {
    padding-left: 1.3rem;
    font-size: .8rem;
}

/* ── Share ── */
.article-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: var(--blog-5) 0 0;
    padding-top: var(--blog-3);
    border-top: 1px solid var(--color-border);
    max-width: var(--blog-measure);
}

.article-share-label {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-right: .3rem;
}

.article-share-btn {
    /* 44px touch target with 8px+ spacing between siblings. */
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-size: 1.05rem;
    text-decoration: none;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}

    .article-share-btn:hover {
        transform: translateY(-2px);
        color: var(--color-primary);
        border-color: var(--color-primary);
        background: var(--color-surface);
    }

    .article-share-btn--whatsapp:hover {
        color: #128C4B;
        border-color: #128C4B;
    }

    .article-share-btn.is-copied {
        color: var(--color-success);
        border-color: var(--color-success);
    }

/* ── Author block ── */
.article-author {
    display: flex;
    align-items: flex-start;
    gap: var(--blog-2);
    margin-top: var(--blog-4);
    padding: var(--blog-3);
    border: 1px solid var(--color-border);
    border-radius: var(--blog-radius);
    background: var(--color-surface);
    max-width: var(--blog-measure);
}

.article-author-avatar {
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--gradient-navy);
    color: var(--color-accent-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Hanken Grotesk", sans-serif;
    font-weight: 800;
    font-size: 1.02rem;
    letter-spacing: .02em;
}

.article-author-name {
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    font-size: .98rem;
}

.article-author-role {
    font-size: .82rem;
    color: var(--color-text-muted);
    margin: .15rem 0 0;
}

.article-author-note {
    font-size: .82rem;
    color: var(--color-text-muted);
    margin: .5rem 0 0;
    line-height: 1.6;
}

/* ── Tag list under the article ── */
.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: var(--blog-4);
    max-width: var(--blog-measure);
}

/* ── Related strip ── */
.blog-related {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: var(--blog-6) 0;
}

.blog-section-head {
    margin-bottom: var(--blog-4);
}

.blog-section-label {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-accent-dim);
    margin-bottom: .35rem;
}

.blog-section-title {
    font-family: "Hanken Grotesk", sans-serif;
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--color-text);
    margin: 0;
}

/* ── Back link ── */
.blog-backlink {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    margin-top: var(--blog-4);
}

    .blog-backlink:hover {
        color: var(--color-primary-light);
        gap: .7rem;
    }

/* ═══════════════════════════════════════════════════════
   8. NOT FOUND
═══════════════════════════════════════════════════════ */
.blog-notfound {
    padding: var(--blog-7) 0;
    text-align: center;
}

    .blog-notfound .blog-notfound-code {
        font-family: "Hanken Grotesk", sans-serif;
        font-size: clamp(3.5rem, 12vw, 6rem);
        font-weight: 800;
        line-height: 1;
        color: var(--color-surface-raised);
        letter-spacing: -.04em;
    }

    .blog-notfound h1 {
        font-family: "Hanken Grotesk", sans-serif;
        font-size: clamp(1.5rem, 3vw, 2rem);
        font-weight: 800;
        color: var(--color-text);
        margin: 0 0 var(--blog-2);
    }

    .blog-notfound p {
        color: var(--color-text-muted);
        max-width: 46ch;
        margin: 0 auto var(--blog-4);
        line-height: 1.7;
    }

.blog-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    padding: .75rem 1.6rem;
    border-radius: var(--btn-radius);
    font-weight: 700;
    font-size: .88rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(242,179,61,.35);
    transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
}

    .blog-btn-primary:hover {
        background: var(--btn-accent-hover-bg);
        color: var(--color-text-on-accent);
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(242,179,61,.5);
    }

.blog-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-primary);
    padding: .72rem 1.5rem;
    border-radius: var(--btn-radius);
    font-weight: 700;
    font-size: .88rem;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease;
}

    .blog-btn-ghost:hover {
        border-color: var(--color-primary);
        background: var(--color-surface);
    }

/* ═══════════════════════════════════════════════════════
   9. FOCUS — gold ring everywhere, never removed
═══════════════════════════════════════════════════════ */
.blog-page a:focus-visible,
.blog-page button:focus-visible,
.blog-page input:focus-visible {
    outline: 3px solid rgba(242,179,61,.75);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════
   10. RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (min-width: 62rem) {
    /* TOC rail appears only when there is room for it beside a full measure. */
    .article-shell--with-toc {
        grid-template-columns: minmax(0, 1fr) 16rem;
    }

        .article-shell--with-toc .article-toc {
            position: sticky;
            top: calc(var(--pib-nav-h) + 2rem);
            align-self: start;
            max-height: calc(100vh - var(--pib-nav-h) - 4rem);
            overflow-y: auto;
        }
}

@media (max-width: 61.99rem) {
    .article-toc {
        margin-bottom: var(--blog-4);
        order: -1;
    }

    .article-toc-inner {
        background: var(--color-surface);
        border-left: 3px solid var(--color-accent);
        border-radius: 0 var(--blog-radius-sm) var(--blog-radius-sm) 0;
        padding: var(--blog-2) var(--blog-2) var(--blog-2) var(--blog-2);
    }
}

@media (max-width: 47.99rem) {
    .blog-featured {
        grid-template-columns: minmax(0, 1fr);
    }

    .blog-featured-media {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .blog-toolbar {
        position: static;
    }

    .blog-toolbar-row {
        flex-direction: column;
        align-items: stretch;
    }

    .blog-search {
        max-width: none;
    }

    /* Horizontal pill scroller, so the page itself never scrolls sideways. */
    .blog-pills-scroller {
        overflow-x: auto;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .blog-pills {
        flex-wrap: nowrap;
        padding-bottom: .35rem;
    }

    .article-cover {
        margin-top: calc(var(--blog-3) * -1);
    }

    .article-author {
        flex-direction: column;
    }
}

/* ═══════════════════════════════════════════════════════
   11. REDUCED MOTION
   site-motion.js already bails out entirely, so this only
   has to neutralise the CSS transitions declared above.
═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .blog-page *,
    .blog-page *::before,
    .blog-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .blog-card:hover {
        transform: none;
    }

        .blog-card:hover .blog-card-media img {
            transform: none;
        }

    .article-share-btn:hover {
        transform: none;
    }

    .blog-progress {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════
   12. PRINT — article only, chrome dropped
═══════════════════════════════════════════════════════ */
@media print {
    .blog-progress,
    .article-toc,
    .article-share,
    .blog-related,
    .blog-toolbar,
    .blog-pager {
        display: none !important;
    }

    .article-hero {
        background: none;
        color: #000;
        padding: 0;
    }

        .article-hero::before {
            display: none;
        }

    .article-title,
    .article-standfirst,
    .article-hero .blog-meta {
        color: #000;
    }

    .article-body {
        max-width: none;
        font-size: 11pt;
    }
}