/* Blog: listing, cards, filters and paging.
   Colours reuse the theme variables defined in app.css. */

/* ---------- Page top offset ----------
   The header is position:fixed, so the first section of every blog page has to
   clear it. 160px measured from the top of the page, which leaves the 24px gap
   below the header called for in the designs.

   Deliberately in px, not rem: this project's rem base is fluid
   (html { font-size: clamp(14px, 1vw, 18px) }), so a rem value would drift with
   the viewport width instead of holding the measurement. */

.blog-page-top {
    position: relative;
    padding-top: 160px;
}

/* ---------- Background glow ----------
   Blog index only — scoped to .blog-hero so the article and author pages,
   which share .blog-page-top, do not pick it up.

   Sits behind everything on the page, including the header, which is why the
   layering is explicit: body carries `background: #000 !important`, so a
   z-index of -1 here would depend on background propagation to stay visible. */

.blog-hero::before {
    content: "";
    position: absolute;
    /* Design places it at -1313px; raised a further 160px on request. */
    top: -1473px;
    left: 50%;
    transform: translateX(-50%);
    width: 1749px;
    height: 2001px;
    background: radial-gradient(50% 50% at 50% 50%, #219e11 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 0;
}

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

/* ---------- Hero ---------- */

/* The gap down to the subscribe banner is measured from the pagination, so the
   section's own bottom padding is dropped and the banner carries the distance. */
.blog-hero {
    padding-bottom: 0;
}

/* Spans the full content width rather than being capped. */
.blog-hero__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 auto 32px;
}

.blog-hero__title {
    margin: 0;
    font-size: 48px;
    line-height: 56px;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-align: center;
    color: #ffffff;
}

.blog-hero__subtitle,
.blog-hero__subtitle p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    text-align: center;
    color: #999999;
}

/* ---------- Search ---------- */

.blog-search {
    display: flex;
    justify-content: center;
    padding-bottom: 0;
    margin-bottom: 48px;
}

.blog-search__field {
    /* Explicit so the 48px height holds even if the global reset changes. */
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 564px;
    max-width: 100%;
    height: 48px;
    padding: 12px 24px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 12px;
    background: transparent;
}

.blog-search__icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    color: #ffffff;
}

.blog-search__field input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    outline: none;
}

.blog-search__field input::placeholder {
    color: #999999;
}

/* The browser's own clear button would sit next to ours. */
.blog-search__field input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

.blog-search__clear {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--muted-text);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
}

.blog-search__clear:hover {
    color: #fff;
}

/* ---------- Category pills ---------- */

.blog-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    /* Gap from the filters down to whatever the listing renders next. */
    padding-bottom: 64px;
}

.blog-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 12px 24px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 128px;
    background: transparent;
    color: #ffffff;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    font-feature-settings: "tnum" on, "lnum" on;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.blog-pill:hover:not(.is-active) {
    border-color: rgba(255, 255, 255, 0.48);
}

.blog-pill.is-active {
    background: #219e11;
    border-color: #219e11;
}

/* ---------- Cards ---------- */

.blog-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
}

.blog-card__media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    aspect-ratio: 312 / 196;

    /* Keeps the duotone overlay below from blending with the page behind. */
    isolation: isolate;
}

.blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--card-ease, ease);
}

/* Duotone treatment from the design: a green-to-teal wash blended into the
   photo's colour, then a 50% black layer over the result. */
.blog-card__media::before,
.blog-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.blog-card__media::before {
    background: linear-gradient(90deg, #176608 0%, #0f5463 100%);
    mix-blend-mode: color;
}

.blog-card__media::after {
    background: #000000;
    opacity: 0.5;
}

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

.blog-card__category {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 6px 12px;
    border-radius: 124px;
    background: #ffffff;
    color: #000000;
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
}

.blog-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 24px;
    padding: 0;
}

.blog-card__text {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.blog-card__title {
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #ffffff;

    /* Titles run to three lines in every card size. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card__title a {
    color: inherit;
    text-decoration: none;
}

.blog-card__excerpt {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #999999;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Card footer: author block beside the arrow ---------- */

.blog-card__footer {
    margin-top: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 16px;
}

.blog-card__author-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.blog-card__author {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
}

.blog-card__author-label {
    color: #999999;
}

.blog-card__author a {
    color: #ffffff;
    text-decoration: none;
}

.blog-card__author a:hover {
    text-decoration: underline;
}

.blog-card__meta {
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    color: #999999;
}

.blog-card__bullet {
    width: 21px;
    text-align: center;
}

.blog-card__arrow {
    flex: 0 0 24px;
    display: inline-flex;
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
}

.blog-card:hover .blog-card__arrow {
    transform: translateX(0.25rem);
}

/* ---------- Featured block ---------- */

.blog-featured {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    /* Distance down to the "Latest articles" heading. */
    padding-bottom: 64px;
}

.blog-featured__small {
    display: flex;
}

@media (min-width: 992px) {
    .blog-featured {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .blog-featured__large {
        grid-column: 1 / -1;
    }

    /* Both featured sizes lay image and text side by side; only the padding
       differs — 32px on the wide card, 24px on the pair below it. */
    .blog-card--horizontal {
        flex-direction: row;
        align-items: stretch;
        gap: 32px;
    }

    .blog-card--featured-large {
        padding: 32px;
    }

    .blog-card--featured-small {
        padding: 24px;
    }

    /* Image and text split the width evenly — 572px each inside the 1240px
       card. Both sides grow from a zero basis: leaving the text on the base
       `flex: 1 1 auto` lets a long headline claim extra width and squeeze the
       image. min-width:0 stops long words doing the same. */
    .blog-card--featured-large .blog-card__media {
        flex: 1 1 0;
        min-height: 360px;
        aspect-ratio: auto;
    }

    .blog-card--featured-large .blog-card__body {
        flex: 1 1 0;
        min-width: 0;
        justify-content: space-between;
        min-height: 360px;
        gap: 48px;
    }

    .blog-card--featured-large .blog-card__text {
        gap: 16px;
    }

    .blog-card--featured-large .blog-card__title {
        font-size: 28px;
        line-height: 36px;
    }

    .blog-card--featured-large .blog-card__excerpt {
        font-size: 16px;
        line-height: 24px;
    }

    .blog-card--featured-large .blog-card__category {
        font-size: 14px;
        line-height: 20px;
    }

    .blog-card--featured-large .blog-card__author,
    .blog-card--featured-large .blog-card__meta {
        font-size: 14px;
        line-height: 20px;
    }

    /* The wide card shows the author's name without the "Author:" label. */
    .blog-card--featured-large .blog-card__author-label {
        display: none;
    }

    /* Paired cards: image and text share the width evenly, 265px each inside
       a 610px card, so both sides just grow from a zero basis. */
    .blog-card--featured-small .blog-card__media {
        flex: 1 1 0;
        min-height: 220px;
        aspect-ratio: auto;
    }

    .blog-card--featured-small .blog-card__body {
        flex: 1 1 0;
        min-width: 0;
        min-height: 220px;
        gap: 32px;
    }

    .blog-card--featured-small .blog-card__text {
        gap: 12px;
    }

    .blog-card--featured-small .blog-card__title {
        font-size: 20px;
        line-height: 28px;
        letter-spacing: normal;
    }

    .blog-card--featured-small .blog-card__excerpt {
        font-size: 16px;
        line-height: 24px;
        -webkit-line-clamp: 2;
    }

    .blog-card--featured-small .blog-card__category {
        font-size: 14px;
        line-height: 20px;
    }

    .blog-card--featured-small .blog-card__author,
    .blog-card--featured-small .blog-card__meta {
        font-size: 14px;
        line-height: 20px;
    }
}

/* ---------- Listing header and grid ---------- */

/* Mobile stacks the heading above the control; desktop puts them on one row. */
.blog-listing__header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    /* Distance down to the first row of articles — same on both sizes. */
    padding-bottom: 32px;
}

.blog-listing__title {
    margin: 0;
    font-size: 28px;
    line-height: 36px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #ffffff;
}

/* Sized in its own right rather than inheriting the heading, which is what
   made it match the title. */
.blog-listing__count {
    color: #999999;
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

/* ---------- Sort control ---------- */

.blog-sort {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.blog-sort__trigger {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 40px;
    padding: 8px 16px;
    border: 1px solid #303030;
    border-radius: 12px;
    background: transparent;
    color: #ffffff;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

/* Once open the trigger picks up the menu's surface colour. */
.blog-sort__trigger.is-open {
    background: #191919;
}

.blog-sort__value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blog-sort__caret {
    flex: 0 0 24px;
    transition: transform 0.2s ease;
}

.blog-sort__trigger.is-open .blog-sort__caret {
    transform: rotate(180deg);
}

.blog-sort__menu {
    box-sizing: border-box;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    padding: 12px 20px;
    border: 1px solid #303030;
    border-radius: 12px;
    background: #191919;
}

.blog-sort__option {
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: color 0.15s ease;
}

/* Hairlines between the options, as in the design. */
.blog-sort__option + .blog-sort__option {
    border-top: 1px solid #303030;
}

.blog-sort__option:hover,
.blog-sort__option:focus-visible {
    color: #219e11;
}

/* One article per row on mobile, three on desktop — a fixed count rather than
   auto-fill, so the last row keeps the same column width as the ones above.
   Must stay above the media query below: both selectors weigh the same, so
   whichever comes last in the file wins. */
.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    transition: opacity 0.2s ease;
}

@media (min-width: 768px) {
    .blog-featured {
        padding-bottom: 96px;
    }

    .blog-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .blog-listing__header {
        flex-direction: row;
        align-items: center;
        gap: 32px;
    }

    .blog-listing__title {
        flex: 1 1 auto;
        font-size: 48px;
        line-height: 56px;
        letter-spacing: normal;
    }

    .blog-listing__count {
        font-size: 28px;
        line-height: 32px;
    }

    .blog-sort {
        flex: 0 0 196px;
        width: 196px;
    }

    .blog-sort__trigger {
        height: 48px;
        padding: 12px 20px;
        gap: 8px;
        font-size: 16px;
        line-height: 24px;
    }
}

/* Livewire adds this while a request is in flight. */
.blog-grid.is-loading {
    opacity: 0.5;
    pointer-events: none;
}

/* ---------- Empty state ---------- */

/* No top padding: the 64/48px gap up to the filters already comes from
   .blog-categories, which sits directly above whatever the listing renders. */
.blog-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    max-width: 960px;
    margin: 0 auto;
    padding: 0;
}

.blog-empty__icon {
    flex: 0 0 auto;
}

.blog-empty__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.blog-empty__title {
    margin: 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    letter-spacing: -0.02em;
    text-align: center;
    color: #ffffff;
}

.blog-empty__hint {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    text-align: center;
    color: #999999;
}

@media (min-width: 768px) {
    .blog-empty__title {
        font-size: 28px;
        line-height: 36px;
    }
}

/* ---------- Paging ---------- */

.blog-pagination {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 24px;
    /* Distance up to the last row of articles — same on both sizes. */
    margin-top: 32px;
}

/* The numbers carry their own, tighter gap. */
.blog-pagination__pages {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.blog-pagination__page,
.blog-pagination__gap {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    text-align: center;
}

.blog-pagination__page {
    cursor: pointer;
    transition: color 0.15s ease;
}

.blog-pagination__page:hover:not(.is-active) {
    color: #999999;
}

.blog-pagination__page.is-active {
    color: #219e11;
    cursor: default;
}

.blog-pagination__arrow {
    box-sizing: border-box;
    flex: 0 0 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid #303030;
    border-radius: 124px;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.blog-pagination__arrow:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
}

.blog-pagination__arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

@media (min-width: 768px) {
    /* 48px each side of the number group, which lands the whole control on the
       408px width the design gives it. */
    .blog-pagination {
        gap: 48px;
    }

    .blog-pagination__pages {
        gap: 24px;
    }

    .blog-pagination__page,
    .blog-pagination__gap {
        font-size: 18px;
    }
}

/* ============================================================
   Article page
   ============================================================ */

[x-cloak] { display: none !important; }

/* app.css sets `overflow-x: hidden !important` on html and body. That makes
   body a scrolling box, so `position: sticky` inside it resolves against a
   container that never scrolls and simply never activates. `clip` prevents the
   same horizontal overflow without establishing a scroll container.

   Scoped to the blog because it only loads with these pages. */
html,
body {
    overflow-x: clip !important;
}

/* The article column is narrower than the site's usual content width. */
.blog-article__inner,
.blog-article__layout {
    max-width: 1016px;
    margin: 0 auto;
}

/* ---------- Breadcrumbs ---------- */

.blog-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-breadcrumbs li {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    color: #999999;
}

.blog-breadcrumbs a {
    color: #999999;
    text-decoration: none;
}

.blog-breadcrumbs a:hover {
    color: #ffffff;
}

.blog-breadcrumbs__sep {
    flex: 0 0 16px;
}

/* ---------- Title and meta ---------- */

.blog-article__title {
    margin: 32px 0 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    color: #ffffff;
}

.blog-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 16px;
    margin-top: 24px;
    padding-bottom: 0;
}

.blog-article__meta-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #ffffff;
}

.blog-article__meta-item svg {
    flex: 0 0 24px;
}

/* ---------- Cover ---------- */

.blog-article__cover {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* 460 / 1016 from the design — the box keeps that ratio at any width. */
    padding-top: 45.28%;
    margin-top: 32px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    isolation: isolate;
}

.blog-article__cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Same duotone as the article cards. */
.blog-article__cover::before,
.blog-article__cover::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.blog-article__cover::before {
    background: linear-gradient(90deg, #176608 0%, #0f5463 100%);
    mix-blend-mode: color;
}

.blog-article__cover::after {
    background: #000000;
    opacity: 0.5;
}

@media (min-width: 768px) {
    .blog-article__title {
        margin-top: 48px;
        font-size: 40px;
        line-height: 56px;
    }

    .blog-article__meta {
        gap: 24px;
    }

    .blog-article__meta-item {
        font-size: 16px;
        line-height: 24px;
    }

    .blog-article__cover {
        margin-top: 48px;
    }
}

/* The gap between the cover and the layout is the layout's padding alone.
   Both .section-full neighbours contribute 6rem of their own — the header
   below the cover and the wrapper above the grid — so both are zeroed. */
.blog-article__header {
    padding-bottom: 0;
}

/* Both gaps around the layout are owned by its neighbours: the grid's own
   padding above, the author card's margin below. */
.blog-article__section {
    padding-top: 0;
    padding-bottom: 0;
}

/* Mobile: the article body comes first and the sidebar follows it, which is
   the reverse of the source order the desktop layout needs. */
.blog-article__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 64px;
    padding-top: 48px;
}

.blog-article__content {
    order: 1;
}

.blog-article__sidebar {
    order: 2;
}

@media (min-width: 992px) {
    /* Fixed sidebar, body takes whatever is left. */
    .blog-article__layout {
        grid-template-columns: 248px minmax(0, 1fr);
        gap: 48px;
        padding-top: 64px;
    }

    /* The desktop column order lives with the canvas rules further down, so it
       cannot be undone by the base declarations that follow this block. */

    /* --blog-header-h is measured at runtime; the header has no fixed height
       because the project's rem base is fluid. 96px is only a pre-script
       fallback. */
    .blog-article__sidebar-inner {
        position: sticky;
        top: calc(var(--blog-header-h, 96px) + 24px);
    }
}

/* ---------- Sidebar ---------- */

/* Blocks are separated by a hairline with 32px of air either side, so the gap
   sits above the rule and the padding below it. */
.blog-article__sidebar-inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.blog-article__sidebar-inner > * + * {
    border-top: 1px solid #303030;
    padding-top: 32px;
}

/* ---------- Table of contents ---------- */

.blog-toc ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-toc li a {
    display: block;
    padding: 8px 0;
    border-left: 2px solid transparent;
    color: #999999;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;

    /* Headings are long; keep every row to one line. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-toc li a:hover {
    color: #ffffff;
}

/* Padded on both sides so the label never runs into the edge of its wash. */
.blog-toc li a.is-active {
    padding-left: 16px;
    padding-right: 16px;
    background: rgba(255, 255, 255, 0.08);
    border-left-color: #219e11;
    color: #ffffff;
}

/* ---------- Follow us ---------- */

.blog-sidebar-block {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blog-sidebar-block__title {
    padding: 0;
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.blog-sidebar-socials {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.blog-sidebar-socials a {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 47px;
    height: 48px;
    padding: 12px;
    border: 1px solid #303030;
    border-radius: 8px;
}

.blog-sidebar-socials img {
    width: 23px;
    height: 24px;
    object-fit: contain;
}

/* The author card below the article keeps its own, smaller buttons. */
.blog-author-card__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--border-card-global);
    border-radius: 0.5rem;
}

.blog-author-card__socials img {
    width: 1rem;
    height: 1rem;
    object-fit: contain;
}

@media (min-width: 992px) {
    .blog-article__sidebar-inner {
        padding-top: 32px;
    }

    .blog-sidebar-block__title {
        font-size: 20px;
        line-height: 28px;
        letter-spacing: normal;
    }
}

/* The contents list is desktop only. */
@media (max-width: 991.98px) {
    .blog-toc {
        display: none;
    }

    /* With the list gone the subscribe block leads, so it must not keep the
       separator meant for a block that follows another. */
    .blog-article__sidebar-inner > .blog-subscribe--sidebar {
        border-top: 0;
        padding-top: 0;
    }
}

/* ============================================================
   Article canvas

   The blocks reuse the same handful of values throughout, so they are named
   once here rather than repeated per block.
   ============================================================ */

.blog-article__content {
    --blog-accent: #219e11;
    --blog-body: #999999;
    --blog-line: #303030;
    --blog-table-line: #212121;
    --blog-surface: rgba(255, 255, 255, 0.08);
    --blog-radius: 12px;
    --blog-control: 48px;

    display: flex;
    flex-direction: column;
    /* Distance between every block on the canvas. */
    gap: 48px;

    /* A grid item defaults to min-width:auto, so a wide block — the table
       above all — would push the column past the viewport instead of
       scrolling inside itself. */
    min-width: 0;
}

.blog-article__content > * {
    min-width: 0;
    max-width: 100%;
}

/* ---------- Prose ---------- */

.blog-prose {
    display: flex;
    flex-direction: column;
    /* Heading to body, and between paragraphs. */
    gap: 20px;
}

.blog-prose h2,
.blog-faq__title {
    margin: 0;
    color: #ffffff;
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    letter-spacing: -0.02em;

    /* Keeps a heading clear of the fixed header when jumped to. */
    scroll-margin-top: calc(var(--blog-header-h, 96px) + 24px);
}

.blog-prose h3 {
    margin: 0;
    color: #ffffff;
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
}

.blog-prose p {
    margin: 0;
    color: var(--blog-body);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

.blog-prose a {
    color: var(--blog-accent);
}

/* Lists come out of the rich editor, so they are styled here rather than as
   blocks of their own. The marker sits on its own 8px column so wrapped lines
   stay aligned with the first. */
.blog-prose ul,
.blog-prose ol {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: blog-item;
}

.blog-prose li {
    position: relative;
    margin: 0;
    color: var(--blog-body);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

.blog-prose ul li {
    padding-left: 20px;
}

.blog-prose ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blog-accent);
}

.blog-prose ol li {
    padding-left: 32px;
    counter-increment: blog-item;
}

.blog-prose ol li::before {
    content: counter(blog-item) ".";
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    color: var(--blog-accent);
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
}

/* ---------- Image ---------- */

.blog-figure {
    margin: 0;
}

.blog-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--blog-radius);
}

.blog-figure figcaption {
    padding-top: 12px;
    color: var(--blog-body);
    font-size: 14px;
    line-height: 20px;
}

/* ---------- Gallery ---------- */

.blog-gallery {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* The stage holds the height itself and the slides are stacked inside it.
   In flow they would each take their own space, so the outgoing and incoming
   slides briefly sat one above the other and the block jumped. */
.blog-gallery__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 344 / 164;
    border-radius: var(--blog-radius);
    overflow: hidden;
}

.blog-gallery__slide {
    position: absolute;
    inset: 0;
    margin: 0;
}

.blog-gallery__slide img,
.blog-gallery__stage noscript img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A rule fills the row with the arrows at its end. Shared by the gallery block
   and the related-articles slider — the design gives them the same control. */
.blog-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.blog-nav__rule {
    flex: 1 1 auto;
    height: 1px;
    background: var(--blog-line, #303030);
}

.blog-nav__arrows {
    display: flex;
    flex-direction: row;
    gap: 24px;
}

.blog-nav__arrow,
.blog-pagination__arrow {
    box-sizing: border-box;
    flex: 0 0 var(--blog-control, 48px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--blog-control, 48px);
    height: var(--blog-control, 48px);
    padding: 0;
    border: 1px solid var(--blog-line, #303030);
    border-radius: 124px;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.blog-nav__arrow:hover:not(:disabled) {
    background: var(--blog-surface, rgba(255, 255, 255, 0.08));
}

.blog-nav__arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

/* ---------- Quote ---------- */

.blog-quote {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin: 0;
    padding: 16px 20px;
    background: var(--blog-surface);
    border-left: 4px solid var(--blog-accent);
    border-radius: 0 var(--blog-radius) var(--blog-radius) 0;
}

.blog-quote blockquote {
    margin: 0;
    color: #ffffff;
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    font-style: italic;
}

.blog-quote figcaption {
    color: var(--blog-body);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

/* ---------- In-article banner ---------- */

.blog-banner {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 32px;
    border-radius: var(--blog-radius);
    background: linear-gradient(90deg, #176608 0%, #0f5463 100%);
    text-align: center;
}

/* Texture over the gradient. The artwork is thin white lines covering only
   about 4% of its pixels, so the design's 0.2 leaves it almost invisible on
   this dark green — one value to tune if it wants to be softer. */
.blog-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/blog/banner-mask.png") center top / cover no-repeat;
    opacity: 0.5;
    pointer-events: none;
}

.blog-banner > * {
    position: relative;
    z-index: 1;
}

.blog-banner__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Plain and bold halves: stacked here, side by side on desktop. */
.blog-banner__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #ffffff;
    font-size: 24px;
    line-height: 28px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.blog-banner__title strong {
    font-weight: 700;
    letter-spacing: -0.01em;
}

.blog-banner__desc {
    margin: 0;
    color: #ffffff;
    opacity: 0.8;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

.blog-banner__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--blog-control);
    padding: 12px 20px;
    border-radius: 8px;
    background: var(--blog-accent);
    color: #ffffff;
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
}

/* ---------- Table ---------- */

.blog-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--blog-table-line);
    border-radius: 16px;
}

.blog-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 20px;
}

.blog-table th,
.blog-table td {
    padding: 16px;
    text-align: left;
    white-space: nowrap;
    border-right: 1px solid var(--blog-table-line);
}

.blog-table th:last-child,
.blog-table td:last-child {
    border-right: 0;
}

.blog-table thead th {
    padding: 12px 16px;
    background: #141414;
    color: #ffffff;
    font-weight: 500;
}

.blog-table tbody td {
    color: var(--blog-body);
    font-weight: 400;
}

/* The leading cell of each row reads as its label. */
.blog-table tbody td:first-child {
    color: #ffffff;
    font-weight: 500;
}

/* Banded rows, the shaded ones slightly taller. */
.blog-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.06);
}

.blog-table tbody tr:nth-child(even) td {
    padding: 20px 16px;
}

/* ---------- Video ---------- */

.blog-video__frame,
.blog-video__poster {
    display: block;
    width: 100%;
    aspect-ratio: 344 / 164;
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
}

.blog-video__poster {
    position: relative;
    padding: 0;
    cursor: pointer;
}

.blog-video__poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Darkens the still so the play control stays legible. */
.blog-video__poster::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #000000;
    opacity: 0.32;
}

.blog-video__play {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 72px;
    height: 72px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 124px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.blog-video__play::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #ffffff;
}

/* ---------- FAQ ---------- */

.blog-faq {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blog-faq__item {
    border-bottom: 1px solid var(--blog-line);
}

.blog-faq__question {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 16px 0;
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: color 0.2s ease;
}

/* Open rows take the accent, icon included. */
.blog-faq__question:not(.collapsed) {
    color: var(--blog-accent);
}

.blog-faq__icon {
    flex: 0 0 24px;
    color: currentColor;
    transition: transform 0.25s ease;
}

/* Hiding the upright stroke turns the plus into a minus. */
.blog-faq__question:not(.collapsed) .blog-faq__icon-bar {
    opacity: 0;
}

.blog-faq__answer {
    padding: 0 0 16px;
    color: var(--blog-body);
    font-size: 14px;
    line-height: 20px;
}

/* ---------- Share ---------- */

.blog-share {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.blog-share__rule {
    height: 1px;
    background: var(--blog-line);
}

.blog-share__row {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.blog-share__label {
    color: var(--blog-body);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

.blog-share__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.blog-share__copy,
.blog-share__link {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--blog-control);
    padding: 12px;
    border: 1px solid var(--blog-line);
    border-radius: 8px;
    background: transparent;
    color: #ffffff;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.blog-share__link {
    width: var(--blog-control);
}

.blog-share__copy img,
.blog-share__link img {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
}

.blog-share__copy:hover,
.blog-share__link:hover {
    background: var(--blog-surface);
}

/* ---------- Canvas: desktop ---------- */

@media (min-width: 992px) {
    /* Sidebar first, body second — the reverse of the mobile stack. */
    .blog-article__sidebar {
        order: 1;
    }

    .blog-article__content {
        order: 2;
    }

    .blog-prose h2,
    .blog-faq__title {
        font-size: 28px;
    }

    .blog-prose ol li::before {
        font-size: 20px;
    }

    .blog-prose ul li {
        padding-left: 20px;
    }

    .blog-gallery__stage,
    .blog-video__frame,
    .blog-video__poster {
        aspect-ratio: 720 / 348;
    }

    .blog-nav {
        gap: 48px;
    }

    .blog-quote {
        padding: 32px;
        gap: 32px;
    }

    .blog-quote blockquote {
        font-size: 20px;
        line-height: 28px;
    }

    .blog-quote figcaption {
        font-size: 16px;
        line-height: 24px;
    }

    .blog-banner {
        gap: 24px;
    }

    .blog-banner__title {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        font-size: 28px;
        line-height: 32px;
    }

    .blog-faq__question {
        gap: 32px;
    }

    .blog-faq__answer {
        font-size: 16px;
        line-height: 24px;
    }

    .blog-share__row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* ---------- Author card ----------
   Spans the full content width rather than the article column, and carries the
   whole gap up from the article — the neighbouring .section-full paddings are
   zeroed so they do not stack on top of it. */

/* Both gaps around the author card belong to its neighbours: its own margin
   above, the related section's padding below. */
.blog-author-section {
    padding-top: 0;
    padding-bottom: 0;
}

.blog-author-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    margin-top: 64px;
    padding: 32px;
    border: 0;
    border-radius: 12px;
    background: #141414;
}

.blog-author-card__avatar {
    flex: 0 0 auto;
    display: block;
    width: 148px;
    height: 148px;
    border-radius: 124px;
    overflow: hidden;
    background: #ffffff;
}

.blog-author-card__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
}

.blog-author-card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
}

.blog-author-card__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
}

.blog-author-card__identity {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.blog-author-card__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.blog-author-card__eyebrow {
    color: #219e11;
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    text-align: center;
}

.blog-author-card__name {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    letter-spacing: -0.02em;
    text-align: center;
}

.blog-author-card__name a {
    color: #ffffff;
    text-decoration: none;
}

.blog-author-card__role {
    color: #999999;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    text-align: center;
}

.blog-author-card__socials {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.blog-author-card__socials a {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 12px;
    border: 1px solid #303030;
    border-radius: 8px;
}

.blog-author-card__socials img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.blog-author-card__all {
    box-sizing: border-box;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 12px 20px;
    border: 1px solid #303030;
    border-radius: 8px;
    color: #ffffff;
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.blog-author-card__all:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.blog-author-card__all svg {
    flex: 0 0 24px;
}

@media (min-width: 992px) {
    .blog-author-card {
        flex-direction: row;
        align-items: flex-start;
        margin-top: 96px;
    }

    .blog-author-card__avatar {
        width: 176px;
        height: 176px;
    }

    .blog-author-card__body,
    .blog-author-card__identity {
        align-items: flex-start;
    }

    /* Name and role on the left, social buttons on the right. */
    .blog-author-card__top {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 40px;
    }

    .blog-author-card__heading {
        align-items: flex-start;
        width: 100%;
    }

    .blog-author-card__eyebrow {
        font-size: 14px;
        line-height: 20px;
        text-align: left;
    }

    .blog-author-card__name {
        font-size: 28px;
        line-height: 32px;
        text-align: left;
    }

    .blog-author-card__role {
        font-size: 18px;
        line-height: 24px;
        text-align: left;
    }
}

/* ---------- Related ---------- */

/* The section carries the whole gap up from the author card, so the wrapper's
   own top padding is dropped rather than stacking on it. */
.blog-related {
    padding-top: 96px;
}

.blog-related__title {
    margin: 0 0 32px;
    color: #ffffff;
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
}

/* Splide's own markup, laid out as a carousel here and as a grid on desktop
   where it destroys itself and leaves the list behind. */
.blog-related__slider .splide__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-related__slider .splide__slide {
    height: auto;
}

.blog-related .blog-nav {
    margin-top: 32px;
}

@media (min-width: 992px) {
    .blog-related {
        padding-top: 160px;
    }

    .blog-related__title {
        margin-bottom: 32px;
        font-size: 48px;
        line-height: 56px;
    }

    /* Splide is destroyed at this width, so the list becomes a plain grid and
       its arrows are no longer needed.

       The extra classes are needed for weight, not for matching: splide-core
       ships `.splide.is-initialized:not(.is-active) .splide__list{display:block}`,
       which counts as four classes because the argument to :not() carries its
       own weight. A destroyed slider keeps `is-initialized` and drops
       `is-active`, so that is exactly the rule in play here — this chain runs
       to five so it wins outright rather than on file order. */
    .blog-related .blog-related__slider.splide .splide__track .splide__list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .blog-related .blog-related__slider.splide .splide__track .splide__slide {
        width: auto;
    }

    .blog-related .blog-nav {
        display: none;
    }
}

/* ============================================================
   Author page
   ============================================================ */
/* Breadcrumbs and the card share this column; the card is narrower and centred
   inside it. */
.blog-author-page__inner {
    max-width: 1016px;
    margin: 0 auto;
}

/* Positioned for the glow below; the bottom padding is dropped because the
   listing carries the whole gap down from the author card. */
.blog-author-page {
    position: relative;
    padding-bottom: 0;
}

.blog-author-listing {
    padding-top: 64px;
}

@media (min-width: 992px) {
    .blog-author-listing {
        padding-top: 96px;
    }
}

/* ---------- Decorative glow ----------
   Offset to the left rather than centred, unlike the one on the blog index. */

.blog-author-page::before {
    content: "";
    position: absolute;
    top: -922px;
    left: calc(50% - 1113px / 2 - 287px);
    width: 1113px;
    height: 1275px;
    background: radial-gradient(50% 50% at 50% 50%, #219e11 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 0;
}

.blog-author-page > * {
    position: relative;
    z-index: 1;
}

/* ---------- Author hero ---------- */

.blog-author-hero {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    max-width: 960px;
    /* Distance down from the breadcrumbs — the same on both sizes. */
    margin: 32px auto 0;
    padding: 0;
    border-radius: 12px;
}

.blog-author-hero__avatar {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 148px;
    height: 148px;
    border: 4px solid #303030;
    border-radius: 124px;
    overflow: hidden;
    background: #ffffff;
}

.blog-author-hero__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
}

.blog-author-hero__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
}

.blog-author-hero__text {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: 100%;
}

.blog-author-hero__identity {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.blog-author-hero__heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.blog-author-hero__eyebrow {
    color: #219e11;
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    text-align: center;
}

.blog-author-hero__name {
    margin: 0;
    color: #ffffff;
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    letter-spacing: -0.02em;
    text-align: center;
}

.blog-author-hero__role {
    color: #999999;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    text-align: center;
}

.blog-author-hero__bio,
.blog-author-hero__bio p {
    margin: 0;
    padding: 0;
    color: #999999;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    text-align: center;
    max-width: none;
}

.blog-author-hero__socials {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 0;
}

.blog-author-hero__socials a {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 12px;
    border: 1px solid #303030;
    border-radius: 8px;
}

.blog-author-hero__socials img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

@media (min-width: 992px) {
    .blog-author-page::before {
        top: -1550px;
        left: calc(50% - 1749px / 2 - 450.5px);
        width: 1749px;
        height: 2001px;
    }

    /* Avatar beside the text, everything left-aligned. */
    .blog-author-hero {
        flex-direction: row;
        align-items: flex-start;
        padding: 32px;
    }

    .blog-author-hero__avatar {
        width: 196px;
        height: 196px;
    }

    .blog-author-hero__body {
        align-items: flex-start;
    }

    .blog-author-hero__identity {
        gap: 12px;
    }

    .blog-author-hero__heading {
        gap: 8px;
    }

    .blog-author-hero__eyebrow {
        font-size: 14px;
        line-height: 20px;
        text-align: left;
    }

    .blog-author-hero__name {
        font-size: 28px;
        line-height: 32px;
        text-align: left;
    }

    .blog-author-hero__role {
        font-size: 18px;
        line-height: 24px;
        text-align: left;
    }

    .blog-author-hero__bio,
    .blog-author-hero__bio p {
        font-size: 16px;
        line-height: 24px;
        text-align: left;
    }
}

/* The author listing stacks its heading above the search on mobile and puts
   them on one row above the breakpoint. The category pills sit left rather
   than centred. */
.blog-listing__author-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    /* Down to the category pills. */
    padding-bottom: 32px;
}

.blog-listing--author .blog-search {
    justify-content: stretch;
    margin-bottom: 0;
    padding-bottom: 0;
}

.blog-listing--author .blog-search__field {
    width: 100%;
}

.blog-listing--author .blog-categories {
    justify-content: flex-start;
    /* Down to the first row of articles. */
    padding-bottom: 32px;
}

@media (min-width: 992px) {
    .blog-listing__author-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
    }

    .blog-listing--author .blog-search {
        flex: 0 0 364px;
        justify-content: flex-end;
    }

    .blog-listing--author .blog-search__field {
        width: 364px;
    }
}

/* ============================================================
   Subscribe
   ============================================================ */

/* Only submission failures carry text; invalid input is the red field alone. */
.blog-subscribe__error {
    margin: 12px 0 0;
    color: #ff8a8a;
    font-size: 13px;
    line-height: 20px;
}

/* ---------- Wide banner ---------- */

.blog-subscribe--banner {
    position: relative;
    /* The decorative graphic starts off the left edge. */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Distance up to the pagination. */
    margin-top: 96px;
    padding: 94px 16px 95px;
    background: linear-gradient(90deg, #176608 0%, #0f5463 100%);
}

/* Decorative chart graphic. Inset percentages are the ones from the design, so
   it keeps its place as the banner grows with real content.

   No rotate(): the export already has the 10.71deg baked in — its ink runs
   edge to edge of a canvas exactly the size of the design's bounding box,
   which is what a rotated shape inside an upright box looks like. */
.blog-subscribe--banner::before {
    content: "";
    position: absolute;
    left: -20%;
    top: 21.2%;
    right: 46.94%;
    bottom: 19.2%;
    background: url("../img/blog/subscribe-graphic.png") center / contain no-repeat;
    pointer-events: none;
    z-index: 0;
}

.blog-subscribe--banner > * {
    position: relative;
    z-index: 1;
}

.blog-subscribe--banner .blog-subscribe__mark {
    flex: 0 0 auto;
    margin-bottom: 32px;
}

/* Two runs of text: side by side on desktop, stacked here. */
.blog-subscribe--banner .blog-subscribe__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 28px;
    line-height: 36px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #ffffff;
}

.blog-subscribe--banner .blog-subscribe__title strong {
    font-weight: 700;
}

.blog-subscribe--banner .blog-subscribe__desc,
.blog-subscribe--banner .blog-subscribe__desc p {
    margin: 0;
    max-width: 960px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #ffffff;
    opacity: 0.8;
}

.blog-subscribe--banner .blog-subscribe__desc {
    margin-top: 32px;
}

.blog-subscribe--banner .blog-subscribe__form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    max-width: 344px;
    margin-top: 24px;
}

.blog-subscribe--banner .blog-subscribe__field {
    flex: 1 1 auto;
    width: 100%;
}

/* ---------- Field and button, shared by both placements ---------- */

.blog-subscribe__field {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 12px 24px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 12px;
}

.blog-subscribe__field.is-invalid {
    border-color: #ff8a8a;
}

.blog-subscribe__field input {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    outline: none;
}

.blog-subscribe__field input::placeholder {
    color: #ffffff;
    opacity: 0.64;
}

.blog-subscribe__submit {
    box-sizing: border-box;
    position: relative;
    z-index: 0;
    isolation: isolate;
    overflow: hidden;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    padding: 12px 20px;
    border: 0;
    border-radius: 8px;
    background: #219e11;
    color: #ffffff;
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
}

/* Same hover wash as .btn-dark-bg elsewhere on the site. Driven by a
   transition rather than that rule's paired keyframes: its "not hovered"
   animation also runs on first paint, which flashes the overlay on load. */
.blog-subscribe__submit::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(120% 140% at 10% 12%,
            rgba(0, 179, 163, 0.85) 0%,
            rgba(0, 179, 163, 0.6) 35%,
            rgba(0, 179, 163, 0) 60%),
        linear-gradient(108deg, #10b981 0%, #16a34a 100%);
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 350ms ease, transform 350ms ease;
}

.blog-subscribe__submit:hover:not(:disabled)::before {
    opacity: 1;
    transform: scale(1);
}

.blog-subscribe__submit:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Both the in-flight and the finished button carry `disabled`, so the done
   state is marked with a class — it should read as complete, not as dimmed. */
.blog-subscribe__submit.is-done {
    opacity: 1;
}

/* Nudged up so the mark sits on the text's optical centre. */
.blog-subscribe__check {
    position: relative;
    top: -2px;
    flex: 0 0 24px;
    display: inline-block;
    width: 24px;
    height: 24px;
}

/* ---------- Stacked block in the article sidebar ---------- */

/* No card chrome here — it sits inline in the sidebar column. Spacing is set
   with margins rather than a flex gap because the title and description are
   8px apart while the form below them is 20px away. */
.blog-subscribe--sidebar {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.blog-subscribe--sidebar .blog-subscribe__title {
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.blog-subscribe--sidebar .blog-subscribe__desc {
    margin-top: 8px;
    padding: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #999999;
}

.blog-subscribe--sidebar .blog-subscribe__form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-top: 20px;
}

.blog-subscribe--sidebar .blog-subscribe__field {
    width: 100%;
    padding: 12px 16px;
}

/* In the narrow sidebar column the button spans the width; on mobile, where
   the same block runs full-bleed, it keeps its natural size. */
@media (min-width: 992px) {
    .blog-subscribe--sidebar .blog-subscribe__title {
        font-size: 20px;
        line-height: 28px;
        letter-spacing: normal;
    }

    .blog-subscribe--sidebar .blog-subscribe__field {
        padding: 12px 24px;
    }

    .blog-subscribe--sidebar .blog-subscribe__form {
        align-items: stretch;
    }

    .blog-subscribe--sidebar .blog-subscribe__submit {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .blog-subscribe--banner {
        margin-top: 160px;
        padding: 79px 16px 90px;
    }

    .blog-subscribe--banner::before {
        left: -3.61%;
        right: 79.65%;
        top: 8.69%;
        bottom: 15.24%;
    }

    .blog-subscribe--banner .blog-subscribe__mark {
        margin-bottom: 56px;
    }

    /* The two halves of the heading sit on one line. */
    .blog-subscribe--banner .blog-subscribe__title {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
        font-size: 44px;
        line-height: 56px;
    }

    .blog-subscribe--banner .blog-subscribe__desc {
        margin-top: 36px;
    }

    .blog-subscribe--banner .blog-subscribe__form {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 16px;
        max-width: 564px;
    }
}

/* ============================================================
   Mobile — values from the 376px design frame
   ============================================================ */

@media (max-width: 767.98px) {
    .blog-page-top {
        padding-top: 122px;
    }

    /* The article and author pages start higher than the index. */
    .blog-article__header,
    .blog-author-page {
        padding-top: 90px;
    }

    /* Smaller glow, positioned from the top of the page as on desktop. */
    .blog-hero::before {
        top: -496px;
        width: 743px;
        height: 851px;
    }

    .blog-hero__title {
        font-size: 28px;
        line-height: 36px;
    }

    .blog-search__field {
        width: 100%;
    }

    .blog-search {
        margin-bottom: 32px;
    }

    /* Filters scroll sideways instead of wrapping, with no visible scrollbar.
       The negative margins cancel the section's gutter on both sides so the
       scrolling box spans the full screen, and the matching padding keeps the
       first and last pill on the gutter. Bleeding on one side only left the
       row clipped at the inner edge when scrolled the other way. */
    .blog-categories {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 8px;
        overflow-x: auto;
        margin-left: -6.944vw;
        margin-right: -6.944vw;
        padding-left: 6.944vw;
        padding-right: 6.944vw;
        padding-bottom: 48px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }

    .blog-categories::-webkit-scrollbar {
        display: none;
    }

    .blog-pill {
        flex: 0 0 auto;
        height: 36px;
        padding: 8px 16px;
        font-size: 14px;
        line-height: 20px;
    }
}

/* Below this width app.css swaps .section-full's gutter from 6.944vw to
   2.5rem, so the scroller's bleed has to follow it. Must stay after the
   767.98px block, whose values it replaces. */
@media (max-width: 575.98px) {
    .blog-categories {
        margin-left: -2.5rem;
        margin-right: -2.5rem;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* The category hero is centred, so its breadcrumb trail is centred with it.
   Scoped to .blog-hero, which only the index and category pages carry, and the
   index deliberately has no trail — the article and author pages are
   left-aligned throughout and must keep their own alignment. */
.blog-hero .blog-breadcrumbs ol {
    justify-content: center;
}