/* =============================================
   BLOG — index, archives and the single post.
   Built on the shared tokens in global.css: Philosopher display headings,
   Raleway body, purple hero bands, white cards with an inset media frame and
   pill controls in accent yellow.
   ============================================= */

/* =============================================
   PAGE SHELL
   ============================================= */
.blog-page,
.post-page {
    background: var(--color-light-purple);
    color: var(--color-dark-purple);
}

/* The hero runs under the floating nav pill, same treatment as works. */
.blog-view .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
}

/* =============================================
   SHARED PARTS — chips, meta, placeholder
   ============================================= */
.blog-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.9375rem;
    border: 1px solid var(--color-secondary);
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: var(--fw-bold);
    line-height: 1.5;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

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

.blog-chip.is-active,
.blog-chip--solid {
    background: var(--color-accent-01);
    border-color: var(--color-accent-01);
    color: var(--color-dark-purple);
}

a.blog-chip.is-active:hover,
a.blog-chip--solid:hover {
    background: var(--color-dark-purple);
    border-color: var(--color-dark-purple);
    color: var(--color-white);
}

.blog-chip--ghost {
    background: transparent;
    border-color: var(--color-soft-purple);
    color: var(--color-primary);
}

.blog-chip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    background: var(--color-light-purple);
    color: var(--color-soft-purple);
    font-size: 0.6875rem;
    font-weight: var(--fw-bold);
}

.blog-chip.is-active .blog-chip__count {
    background: rgba(45, 44, 108, 0.14);
    color: var(--color-dark-purple);
}

.blog-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin: 0;
    color: var(--color-soft-purple);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: var(--fw-medium);
    line-height: 1.5;
}

.blog-meta a {
    color: inherit;
}

.blog-meta a:hover {
    color: var(--color-primary);
}

.blog-meta__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.45;
}

.blog-meta__author {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-dark-purple);
    font-weight: var(--fw-bold);
}

.blog-meta__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

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

.blog-meta--hero .blog-meta__author,
.blog-meta--hero a {
    color: var(--color-white);
}

.blog-meta--hero a:hover {
    color: var(--color-accent-01);
}

.blog-meta--hero .blog-meta__avatar {
    border: 2px solid rgba(255, 255, 255, 0.4);
}

/* Posts with no featured image still get a branded frame. */
.blog-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(rgba(73, 71, 184, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(73, 71, 184, 0.10) 1px, transparent 1px),
        linear-gradient(135deg, var(--color-secondary) 0%, var(--color-light-purple) 100%);
    background-size: 44px 44px, 44px 44px, 100% 100%;
}

.blog-placeholder img {
    width: 72px;
    height: 72px;
    opacity: 0.7;
}

/* =============================================
   HERO
   ============================================= */
.blog-hero {
    position: relative;
    overflow: hidden;
    padding: 11.5rem 0 10rem;
    background: var(--color-primary);
    color: var(--color-white);
    isolation: isolate;
}

.blog-hero .container {
    position: relative;
}

.blog-hero__content {
    position: relative;
    z-index: 2;
    grid-column: 2 / 12;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
}

.blog-hero__eyebrow {
    margin: 0;
    color: var(--color-accent-01);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.blog-hero__title {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    letter-spacing: 0;
}

.blog-hero__title em {
    font-size: clamp(3rem, 5.3vw, var(--text-display));
    font-style: italic;
    line-height: var(--lh-display);
}

.blog-hero__title span {
    font-size: clamp(2.25rem, 3.9vw, var(--text-title3));
    line-height: var(--lh-title3);
}

.blog-hero__intro {
    max-width: 640px;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-body);
    font-size: var(--text-copy);
    font-weight: var(--fw-medium);
    line-height: var(--lh-copy);
}

.blog-hero__intro p {
    margin: 0;
}

.blog-hero__intro p + p {
    margin-top: 0.75rem;
}

/* ── Hero decor ──
   The brand grid and three drifting sparks behind both purple heroes. The
   sparks keep to the outer columns, clear of the nav pill and the copy. */
.blog-decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.blog-decor__grid {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(60rem, 130vmin);
    aspect-ratio: 1;
    background: url("../../../../uploads/meowgical/images/shared/grid-brand-light.avif") center / contain no-repeat;
    opacity: 0.38;
    translate: -50% -50%;
}

/* The post hero reads from the left, so its grid sits over the empty side. */
.post-hero .blog-decor__grid {
    left: 78%;
}

/* The listing hero's copy runs down the middle, so its grid sits in the bottom
   left corner, sized off the viewport to stay clear of the copy and chips. */
.blog-hero .blog-decor__grid {
    top: auto;
    bottom: 0;
    left: 0;
    width: min(48rem, 100vw - 48rem);
    translate: -35% 35%;
}

.blog-decor__star {
    position: absolute;
    display: block;
    width: 2.125rem;
    aspect-ratio: 1;
    background: var(--color-accent-01);
    -webkit-mask: var(--btn-fx-badge-shape) center / contain no-repeat;
    mask: var(--btn-fx-badge-shape) center / contain no-repeat;
}

.blog-decor__star--1 {
    top: 44%;
    left: 4%;
}

.blog-decor__star--2 {
    right: 7%;
    bottom: 32%;
    width: 1.375rem;
    background: var(--color-accent-02);
}

.blog-decor__star--3 {
    top: 32%;
    right: 13%;
    width: 0.875rem;
    background: var(--color-white);
}

@keyframes blog-decor-float {
    from {
        transform: translateY(0) rotate(0deg);
    }

    to {
        transform: translateY(-0.75rem) rotate(20deg);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .blog-decor__star {
        animation: blog-decor-float 5.5s ease-in-out infinite alternate;
    }

    .blog-decor__star--2 {
        animation-duration: 7s;
        animation-delay: -2.5s;
    }

    .blog-decor__star--3 {
        animation-duration: 4.5s;
        animation-delay: -1.5s;
    }
}

/* ── Search ── */
.blog-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: min(100%, 520px);
    margin-top: 0.75rem;
    padding: 0.375rem 0.375rem 0.375rem 1.125rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(6px);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.blog-search:focus-within {
    border-color: var(--color-accent-01);
    background: rgba(255, 255, 255, 0.16);
}

.blog-search__icon {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.7);
}

.blog-search__field {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
}

.blog-search__field::placeholder {
    color: rgba(255, 255, 255, 0.6);
    opacity: 1;
}

.blog-search__field:focus {
    outline: none;
}

.blog-search__submit {
    flex: 0 0 auto;
    min-height: 2.75rem;
    padding: 0 1.75rem;
    border: 1px solid var(--color-accent-01);
    border-radius: 999px;
    background: var(--color-accent-01);
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: var(--fw-bold);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.blog-search__submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(45, 44, 108, 0.22);
}

/* =============================================
   LISTING
   ============================================= */
.blog-listing {
    position: relative;
    z-index: 2;
    padding: 3.5rem 0 6rem;
}

/* Chips sit at the foot of the purple hero, pulled up out of the listing into
   the room the hero's bottom padding leaves them, so change the two together.
   On phones they ride over the seam instead. */
.blog-filters {
    position: relative;
    z-index: 3;
    margin: -8.75rem 0 6rem;
}

.blog-filters__list {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ── Lead story ── */
.blog-lead {
    grid-column: 1 / -1;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.75rem, 4vw, 4rem);
    margin-bottom: clamp(0.25rem, 1vw, 0.75rem);
    padding: 14px clamp(1.5rem, 4vw, 4rem) 14px 14px;
    border: 1px solid var(--color-secondary);
    border-radius: 28px;
    background: var(--color-white);
    box-shadow: 0 24px 60px rgba(45, 44, 108, 0.08);
    transition: box-shadow 320ms ease, border-color 320ms ease;
}

.blog-lead:hover {
    border-color: transparent;
    box-shadow: 0 30px 70px rgba(45, 44, 108, 0.14);
}

.blog-lead__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 18px;
    background: var(--color-light-purple);
}

.blog-lead__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.blog-lead__badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem 0.5rem 0.75rem;
    border-radius: 999px;
    background: var(--color-dark-purple);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: var(--fw-bold);
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    pointer-events: none;
}

/* The four-point star from the button badge, reused as a small brand mark. */
.blog-lead__badge-star,
.blog-offer__star {
    flex: 0 0 auto;
    width: 0.875rem;
    height: 0.875rem;
    background: var(--color-accent-01);
    -webkit-mask: var(--btn-fx-badge-shape) center / contain no-repeat;
    mask: var(--btn-fx-badge-shape) center / contain no-repeat;
}

.blog-lead__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.125rem;
    padding-block: 1.5rem;
}

.blog-lead__title {
    margin: 0;
    color: var(--color-dark-purple);
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 3.2vw, 2.875rem);
    font-weight: var(--fw-bold);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.blog-lead__title a {
    color: inherit;
}

.blog-lead:hover .blog-lead__title a {
    color: var(--color-primary);
}

.blog-lead__excerpt {
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-copy);
    line-height: 1.65;
}

.blog-lead__meta {
    font-size: 0.875rem;
}

/* Decoration for the stretched title link, so the pill never takes the
   pointer. The card's own hover plays the move the button would. */
.blog-lead__cta {
    margin-top: 0.5rem;
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--color-accent-01);
    border-radius: 999px;
    background: var(--color-accent-01);
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--text-title6);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-title6);
    pointer-events: none;
}

/* ── Card grid ──
   Six tracks, so a short last row still fills the width: two cards take half
   each, and a lone card turns into a wide one instead of leaving a hole. */
.blog-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(1.25rem, 2vw, 1.75rem);
}

.blog-grid > * {
    grid-column: span 2;
}

.blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-secondary);
    border-radius: 20px;
    background: var(--color-white);
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms ease, border-color 320ms ease;
}

.blog-card:hover {
    border-color: transparent;
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(45, 44, 108, 0.12);
}

/* The inset media frame is the house card treatment, as on the works carousel. */
.blog-card__media {
    position: relative;
    aspect-ratio: 3 / 2;
    margin: 12px 12px 0;
    overflow: hidden;
    border-radius: 14px;
    background: var(--color-light-purple);
}

.blog-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Printed after the media, so it still reads before the title, but pinned to
   the image corner. Positioned off the card, not the media, so it can rise
   above the stretched link. */
.blog-card__chip {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 2;
    max-width: calc(100% - 48px);
    box-shadow: 0 8px 20px rgba(45, 44, 108, 0.14);
}

.blog-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1;
    padding: 1.375rem 1.5rem 1.25rem;
}

.blog-card__title {
    margin: 0;
    color: var(--color-dark-purple);
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: var(--fw-bold);
    line-height: 1.3;
    letter-spacing: -0.005em;
}

.blog-card__title a {
    color: inherit;
}

.blog-card:hover .blog-card__title a {
    color: var(--color-primary);
}

.blog-card__excerpt {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.blog-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--color-secondary);
}

.blog-card__meta {
    font-size: 0.8125rem;
}

.blog-card__arrow {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-light-purple);
    color: var(--color-primary);
    transition: background 0.25s ease, color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.blog-card:hover .blog-card__arrow {
    background: var(--color-accent-01);
    color: var(--color-dark-purple);
    transform: rotate(45deg);
}

/* The title anchor is the card's only link; stretching it keeps the whole card
   clickable without a second, duplicate href to the same post. */
.blog-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* The focus ring goes round the whole card, the same area the link covers. */
.blog-card__link:focus-visible {
    outline: none;
}

.blog-card__link:focus-visible::after {
    border-radius: 19px;
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.blog-lead .blog-card__link:focus-visible::after {
    border-radius: 27px;
}

/* Anything the reader can also click has to sit above the stretched anchor. */
.blog-lead__chip,
.blog-lead__meta a,
.blog-card__meta a {
    position: relative;
    z-index: 2;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .blog-lead:hover .blog-lead__image,
    .blog-card:hover .blog-card__image {
        transform: scale(1.04);
    }
}

/* The lead's CTA is a decorative span under the stretched title link, so it
   plays the button hover when the card does (main.js throws its sparkles off
   the card too). Reduced motion is handled by global.css, which keeps the
   arrow parked. */
@media (hover: hover) and (pointer: fine) {
    .blog-lead:hover .blog-lead__cta.btn-fx-ready {
        --btn-fx-on: 1;
        transition-duration: var(--btn-fx-in), 90ms !important;
    }
}

/* Keyboard focus on the title plays the same move. */
.blog-lead:has(.blog-card__link:focus-visible) .blog-lead__cta.btn-fx-ready {
    --btn-fx-on: 1;
    transition-duration: var(--btn-fx-in), 90ms !important;
}

/* Short last rows. Three across, a pair splits the row and a single card goes
   wide, image beside copy. */
@media (min-width: 1025px) {
    .blog-grid > :nth-last-child(2):nth-child(3n + 1),
    .blog-grid > :last-child:nth-child(3n + 2) {
        grid-column: span 3;
    }

    .blog-grid > :nth-last-child(2):nth-child(3n + 1) .blog-card__media,
    .blog-grid > :last-child:nth-child(3n + 2) .blog-card__media {
        aspect-ratio: 2 / 1;
    }

    .blog-grid > :last-child:nth-child(3n + 1) {
        grid-column: 1 / -1;
        flex-direction: row;
    }

    .blog-grid > :last-child:nth-child(3n + 1) .blog-card__media {
        flex: 0 0 calc(50% - 12px);
        aspect-ratio: auto;
        min-height: 20rem;
        margin: 12px 0 12px 12px;
    }

    .blog-grid > :last-child:nth-child(3n + 1) .blog-card__body {
        justify-content: center;
        padding: clamp(1.5rem, 3vw, 3rem);
    }

    .blog-grid > :last-child:nth-child(3n + 1) .blog-card__title {
        font-size: clamp(1.5rem, 2.2vw, 2rem);
    }

    .blog-grid > :last-child:nth-child(3n + 1) .blog-card__foot {
        margin-top: 0.75rem;
    }
}

/* Two across on tablets, where an odd card out goes wide instead. */
@media (min-width: 769px) and (max-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blog-grid > * {
        grid-column: auto;
    }

    .blog-grid > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
        flex-direction: row;
    }

    .blog-grid > :last-child:nth-child(odd) .blog-card__media {
        flex: 0 0 calc(50% - 12px);
        aspect-ratio: auto;
        min-height: 16rem;
        margin: 12px 0 12px 12px;
    }

    .blog-grid > :last-child:nth-child(odd) .blog-card__body {
        justify-content: center;
        padding: 1.75rem;
    }

    .blog-grid > :last-child:nth-child(odd) .blog-card__foot {
        margin-top: 0.75rem;
    }
}

/* ── Pagination ── */
.blog-pagination {
    grid-column: 1 / -1;
    margin-top: 3.5rem;
}

.blog-pagination .pagination,
.blog-pagination .navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0;
}

.blog-pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.blog-pagination .screen-reader-text {
    position: absolute;
}

.blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 1rem;
    border: 1px solid var(--color-secondary);
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: var(--fw-bold);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Only the links react, as with the chips. global.css's older .pagination hover
   fills every .page-numbers with --color-primary, so the white is restated here
   or the number vanishes into a pill of its own colour. */
.blog-pagination a.page-numbers:hover {
    background: var(--color-white);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.blog-pagination .page-numbers.current {
    background: var(--color-accent-01);
    border-color: var(--color-accent-01);
    color: var(--color-dark-purple);
}

/* The colour is restated for the same reason: the global hover would turn the
   ellipsis white. */
.blog-pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
    color: var(--color-dark-purple);
}

/* ── Empty state ── */
.blog-empty {
    grid-column: 1 / -1;
}

.no-results {
    display: grid;
    justify-items: center;
    gap: 1rem;
    padding: 4.5rem 2rem;
    border: 1px dashed var(--color-soft-purple);
    border-radius: 20px;
    background: var(--color-white);
    text-align: center;
}

.no-results__decor {
    width: 64px;
    height: 64px;
    opacity: 0.65;
}

.no-results__title {
    margin: 0;
    color: var(--color-dark-purple);
    font-family: var(--font-display);
    font-size: var(--text-title4);
    font-weight: var(--fw-bold);
    line-height: var(--lh-title4);
}

.no-results__content {
    max-width: 480px;
    color: var(--color-text);
    font-size: var(--text-body);
    line-height: 1.6;
}

.no-results__content p {
    margin-bottom: 1.25rem;
}

.no-results .search-form {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.no-results .search-field {
    min-width: 0;
    width: min(100%, 260px);
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--color-secondary);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-text);
}

.no-results .search-field:focus {
    outline: none;
    border-color: var(--color-primary);
}

.no-results .search-submit {
    padding: 0.75rem 1.75rem;
    border-radius: 999px;
    background: var(--color-accent-01);
    color: var(--color-dark-purple);
    font-weight: var(--fw-bold);
}

.no-results .search-submit:hover {
    background: var(--color-dark-purple);
    color: var(--color-white);
}

/* =============================================
   OFFERS: the band, the rail card and the inline strip
   ============================================= */
.blog-offer--band {
    grid-column: 1 / -1;
    margin-block: clamp(2.5rem, 5vw, 4.5rem);
}

.blog-offer__panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    overflow: hidden;
    border-radius: 28px;
    background: var(--color-dark-purple);
    color: var(--color-white);
    isolation: isolate;
}

.blog-offer__grid {
    position: absolute;
    top: 50%;
    right: -10%;
    z-index: -1;
    width: min(48rem, 90%);
    aspect-ratio: 1;
    background: url("../../../../uploads/meowgical/images/shared/grid-brand-light.avif") center / contain no-repeat;
    opacity: 0.24;
    translate: 0 -50%;
    pointer-events: none;
}

.blog-offer__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: clamp(2rem, 5vw, 4.5rem);
}

.blog-offer__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--color-accent-01);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: var(--fw-bold);
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.blog-offer__title {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.blog-offer__title em {
    color: var(--color-accent-01);
    font-size: clamp(2.25rem, 4.2vw, 3.75rem);
    font-style: italic;
    line-height: 1.05;
}

.blog-offer__title span {
    font-size: clamp(1.625rem, 2.6vw, 2.375rem);
    line-height: 1.2;
}

.blog-offer__copy {
    max-width: 34rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--font-body);
    font-size: var(--text-copy);
    line-height: 1.65;
    text-wrap: pretty;
}

.blog-offer__points {
    display: grid;
    gap: 0.75rem;
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
}

.blog-offer__points li {
    position: relative;
    padding-left: 2rem;
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: var(--fw-semibold);
    line-height: 1.5;
    text-wrap: pretty;
}

.blog-offer__points li::before {
    content: "";
    position: absolute;
    top: 0.0625rem;
    left: 0;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--color-accent-01) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 4.9 8.5 9.5 3.5' fill='none' stroke='%232d2c6c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.75rem no-repeat;
}

.blog-offer__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 1.75rem;
    margin-top: 0.75rem;
}

/* The header CTA's look. btn-fx sizes it once main.js has decorated it. */
.blog-offer__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--color-accent-01);
    border-radius: 999px;
    background: var(--color-accent-01);
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--text-title6);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-title6);
}

.blog-offer__button:hover,
.blog-offer__button:focus-visible {
    color: var(--color-dark-purple);
}

.blog-offer__more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: var(--fw-bold);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.35);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.blog-offer__more:hover,
.blog-offer__more:focus-visible {
    color: var(--color-accent-01);
    text-decoration-color: currentColor;
}

.blog-offer__more svg,
.blog-offer__link svg {
    transition: transform 0.25s ease;
}

.blog-offer__more:hover svg,
.blog-offer__link:hover svg {
    transform: translateX(3px);
}

/* Sized to the cat, so the arch and the bubble are placed against the
   artwork rather than the column. */
.blog-offer__art {
    position: relative;
    align-self: end;
    justify-self: center;
    width: min(100%, 29rem);
    margin-top: 2rem;
}

.blog-offer__art::before {
    content: "";
    position: absolute;
    right: 13%;
    bottom: 0;
    left: 15%;
    height: 80%;
    border-radius: 999px 999px 0 0;
    background: var(--color-primary);
}

.blog-offer__mascot {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

.blog-offer__bubble {
    position: absolute;
    top: 13%;
    right: 1%;
    z-index: 1;
    padding: 0.625rem 1.125rem;
    border-radius: 18px 18px 18px 4px;
    background: var(--color-white);
    color: var(--color-dark-purple);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: var(--fw-bold);
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 14px 30px rgba(20, 19, 60, 0.25);
    rotate: -6deg;
}

/* ── Rail card ── */
.blog-offer--rail {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
    overflow: hidden;
    padding: 1.5rem;
    border-radius: 20px;
    background: var(--color-dark-purple);
    color: var(--color-white);
    isolation: isolate;
}

.blog-offer--rail .blog-offer__grid {
    top: -45%;
    right: -55%;
    width: 22rem;
    opacity: 0.3;
    translate: none;
}

.blog-offer--rail .blog-offer__eyebrow {
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
}

.blog-offer--rail .blog-offer__title {
    display: block;
    font-size: 1.375rem;
    line-height: 1.3;
}

.blog-offer--rail .blog-offer__button {
    margin-top: 0.25rem;
}

.blog-offer__note {
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: var(--fw-medium);
}

/* ── Inline strip, set into the article ── */
.blog-offer--inline {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.125rem 1.375rem;
    border: 1px dashed var(--color-soft-purple);
    border-radius: 18px;
    background: var(--color-white);
}

.post-body .entry-content > .blog-offer--inline {
    margin-block: 2.75rem;
}

.blog-offer__spark {
    position: relative;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-accent-01);
}

.blog-offer__spark::before {
    content: "";
    position: absolute;
    inset: 0.625rem;
    background: var(--color-dark-purple);
    -webkit-mask: var(--btn-fx-badge-shape) center / contain no-repeat;
    mask: var(--btn-fx-badge-shape) center / contain no-repeat;
}

.blog-offer__line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin: 0;
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.5;
}

.blog-offer__link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-primary);
    font-weight: var(--fw-bold);
    text-decoration: underline;
    text-decoration-color: var(--color-accent-01);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25em;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.blog-offer__link:hover,
.blog-offer__link:focus-visible {
    color: var(--color-dark-purple);
    text-decoration-color: var(--color-dark-purple);
}

/* After the article the band has its own row; the sections either side
   already pad it. */
.post-offer .blog-offer--band {
    margin-block: 0;
}

/* =============================================
   SINGLE: reading progress
   ============================================= */
.post-progress {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    /* Under the header, so the menu overlay still covers it. */
    z-index: 999;
    height: 4px;
    pointer-events: none;
}

.admin-bar .post-progress {
    top: var(--wp-admin--admin-bar--height, 0px);
}

.post-progress__bar {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(90deg, var(--color-accent-01), var(--color-accent-03));
    transform: scaleX(0);
    transform-origin: left center;
}

/* =============================================
   SINGLE — hero
   ============================================= */
.post-hero {
    position: relative;
    overflow: hidden;
    padding: 11.5rem 0 8.5rem;
    background: var(--color-primary);
    color: var(--color-white);
    isolation: isolate;
}

.post-hero .container {
    position: relative;
}

.post-hero__inner {
    position: relative;
    z-index: 2;
    /* Left-aligned so the hero shares an edge with the reading column below. */
    grid-column: 2 / 10;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

/* ── Breadcrumbs ── */
.breadcrumbs {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: var(--fw-medium);
}

.breadcrumbs__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumbs__item + .breadcrumbs__item::before {
    content: "/";
    margin-right: 0.5rem;
    opacity: 0.5;
}

.post-hero .breadcrumbs,
.blog-hero .breadcrumbs {
    color: rgba(255, 255, 255, 0.7);
}

.post-hero .breadcrumbs a,
.blog-hero .breadcrumbs a {
    color: rgba(255, 255, 255, 0.9);
}

.post-hero .breadcrumbs a:hover,
.blog-hero .breadcrumbs a:hover {
    color: var(--color-accent-01);
}

.post-hero__title {
    max-width: 24ch;
    margin: 0;
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4.6vw, var(--text-h2));
    font-weight: var(--fw-bold);
    line-height: var(--lh-h2);
    letter-spacing: -0.01em;
}

.post-hero__standfirst {
    max-width: 62ch;
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-body);
    font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
    font-weight: var(--fw-medium);
    line-height: 1.5;
}

/* =============================================
   SINGLE — featured image
   ============================================= */
.post-featured {
    position: relative;
    z-index: 3;
    margin: -5.5rem 0 0;
}

.post-featured__frame {
    /* Shares the reading column's left edge so image and copy line up. */
    grid-column: 2 / 9;
    overflow: hidden;
    border-radius: 20px;
    background: var(--color-white);
    box-shadow: 0 30px 70px rgba(45, 44, 108, 0.18);
}

.post-featured__image {
    display: block;
    width: 100%;
    height: auto;
}

.post-featured__caption {
    grid-column: 2 / 9;
    margin: 0.875rem 0 0;
    color: var(--color-soft-purple);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* =============================================
   SINGLE — layout
   ============================================= */
.post-layout {
    padding: 4.5rem 0 5rem;
}

.post-layout--flush {
    padding-top: 3.5rem;
}

/* ── Sticky rail ── */
.post-aside {
    grid-column: 10 / 13;
}

.post-aside__inner {
    /* Stretched by the grid row, so the inner block is what actually sticks.
       Clears the sticky header pill (1.75rem offset + 96px) with a little air. */
    position: sticky;
    top: 9rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Small uppercase label shared by the footer rows and the contents lists. */
.post-label,
.post-toc__label {
    margin: 0;
    color: var(--color-soft-purple);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: var(--fw-bold);
    line-height: 1.5;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* ── Contents ── */
.post-toc__list {
    display: grid;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.post-toc__link {
    position: relative;
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    align-items: baseline;
    gap: 0.25rem;
    padding: 0.5625rem 0.75rem;
    border-radius: 10px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: var(--fw-medium);
    line-height: 1.45;
    transition: background 0.2s ease, color 0.2s ease;
}

.post-toc__link::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0;
    width: 3px;
    border-radius: 3px;
    background: var(--color-accent-03);
    opacity: 0;
    transform: scaleY(0.4);
    transition: opacity 0.2s ease, transform 0.25s ease;
}

.post-toc__num {
    color: var(--color-soft-purple);
    font-size: 0.75rem;
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    transition: color 0.2s ease;
}

.post-toc__link:hover,
.post-toc__link:focus-visible {
    background: var(--color-light-purple);
    color: var(--color-dark-purple);
}

.post-toc__link.is-read .post-toc__num {
    color: var(--color-primary);
}

.post-toc__link.is-active {
    background: var(--color-secondary);
    color: var(--color-dark-purple);
}

.post-toc__link.is-active::before {
    opacity: 1;
    transform: none;
}

.post-toc__link.is-active .post-toc__num {
    color: var(--color-dark-purple);
}

.post-toc--rail {
    padding: 1.25rem 0.625rem 0.625rem;
    border: 1px solid var(--color-secondary);
    border-radius: 20px;
    background: var(--color-white);
}

.post-toc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0 0.5rem 0.75rem 0.75rem;
}

.post-toc__time {
    flex: 0 0 auto;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: var(--color-light-purple);
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: var(--fw-bold);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

/* A long list scrolls inside its card, so the offer under it stays on screen.
   Lenis hands the wheel to nested scrollers. */
.post-toc--rail .post-toc__list {
    max-height: max(9rem, calc(100vh - 33rem));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-secondary) transparent;
}

/* Opens above the copy once the rail has folded away. */
.post-toc--inline {
    display: none;
}

.post-toc__details {
    border: 1px solid var(--color-secondary);
    border-radius: 18px;
    background: var(--color-white);
}

.post-toc__summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 18px;
    cursor: pointer;
    list-style: none;
}

.post-toc__summary::-webkit-details-marker {
    display: none;
}

.post-toc__summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.post-toc__summary .post-toc__label {
    color: var(--color-dark-purple);
    font-size: 0.75rem;
}

.post-toc__count {
    margin-left: auto;
    color: var(--color-soft-purple);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: var(--fw-semibold);
}

.post-toc__chevron {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    margin: 0 0.25rem 0.1875rem;
    border-right: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    transform: rotate(45deg);
    transition: transform 0.25s ease, margin 0.25s ease;
}

.post-toc__details[open] .post-toc__chevron {
    margin-bottom: -0.1875rem;
    transform: rotate(-135deg);
}

.post-toc--inline .post-toc__list {
    padding: 0 0.625rem 0.625rem;
}

/* ── Share ── */
.post-share {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.post-share__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--color-secondary);
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-dark-purple);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.post-share__link:hover,
.post-share__link:focus-visible {
    background: var(--color-accent-01);
    border-color: var(--color-accent-01);
    color: var(--color-dark-purple);
    transform: translateY(-2px);
}

.post-share__feedback {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.5rem);
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: var(--color-dark-purple);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: var(--fw-bold);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 4px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.post-share__link--copy.is-copied .post-share__feedback {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* =============================================
   SINGLE — article body
   ============================================= */
.post-body {
    grid-column: 2 / 9;
    min-width: 0;
}

.post-body .entry-content {
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-copy);
    line-height: 1.75;
}

.post-body .entry-content > p:first-of-type {
    color: var(--color-dark-purple);
    font-size: clamp(1.1875rem, 1.5vw, 1.375rem);
    font-weight: var(--fw-medium);
    line-height: 1.6;
}

/* Flow spacing owns the rhythm, so blocks reset their own margins first.
   Element selectors would out-specify the sibling rule, hence the `> *`. */
.post-body .entry-content > * {
    margin: 0;
}

.post-body .entry-content > * + * {
    margin-top: 1.5rem;
}

.post-body .entry-content h2 {
    margin: 3.25rem 0 0;
    color: var(--color-dark-purple);
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 2.6vw, 2.25rem);
    font-weight: var(--fw-bold);
    line-height: 1.2;
    letter-spacing: -0.01em;
    scroll-margin-top: 9rem;
}

.post-body .entry-content h3 {
    margin: 2.5rem 0 0;
    color: var(--color-dark-purple);
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 2vw, 1.625rem);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    scroll-margin-top: 9rem;
}

.post-body .entry-content h4,
.post-body .entry-content h5,
.post-body .entry-content h6 {
    margin: 2rem 0 0;
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: var(--fw-bold);
    line-height: 1.5;
}

/* A heading sits closer to the copy it introduces than copy sits to copy. */
.post-body .entry-content > :is(h2, h3, h4, h5, h6) + * {
    margin-top: 1rem;
}

.post-body .entry-content a:not(.affiliate-link):not(.blog-chip):not(.blog-offer__link) {
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
    text-decoration: underline;
    text-decoration-color: var(--color-accent-01);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.post-body .entry-content a:not(.affiliate-link):not(.blog-chip):not(.blog-offer__link):hover {
    color: var(--color-dark-purple);
    text-decoration-color: var(--color-dark-purple);
}

.post-body .entry-content strong {
    color: var(--color-dark-purple);
    font-weight: var(--fw-bold);
}

.post-body .entry-content ul,
.post-body .entry-content ol {
    padding-left: 0;
    list-style: none;
}

.post-body .entry-content li + li {
    margin-top: 0.625rem;
}

.post-body .entry-content ul > li,
.post-body .entry-content ol > li {
    position: relative;
    padding-left: 1.75rem;
}

.post-body .entry-content ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 0.8125rem;
    height: 0.5rem;
    border-left: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    transform: rotate(-45deg);
}

.post-body .entry-content ol {
    counter-reset: post-list;
}

.post-body .entry-content ol > li {
    counter-increment: post-list;
}

.post-body .entry-content ol > li::before {
    content: counter(post-list);
    position: absolute;
    left: 0;
    top: 0.15em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--color-secondary);
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: var(--fw-bold);
}

.post-body .entry-content blockquote {
    position: relative;
    margin: 2.5rem 0;
    padding: 2rem 2.25rem;
    border: 1px solid var(--color-secondary);
    border-left: 3px solid var(--color-accent-01);
    border-radius: 0 16px 16px 0;
    background: var(--color-white);
    color: var(--color-dark-purple);
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.9vw, 1.5rem);
    font-style: italic;
    line-height: 1.45;
}

.post-body .entry-content blockquote p {
    margin: 0;
}

.post-body .entry-content blockquote p + p {
    margin-top: 1rem;
}

.post-body .entry-content blockquote cite {
    display: block;
    margin-top: 1rem;
    color: var(--color-soft-purple);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: var(--fw-bold);
}

.post-body .entry-content img,
.post-body .entry-content figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

.post-body .entry-content figure {
    margin: 2.5rem 0;
}

.post-body .entry-content figcaption {
    margin-top: 0.75rem;
    color: var(--color-soft-purple);
    font-size: 0.8125rem;
    line-height: 1.5;
    text-align: center;
}

.post-body .entry-content hr {
    margin: 3rem 0;
    border: 0;
    height: 1px;
    background: var(--color-secondary);
}

.post-body .entry-content code {
    padding: 0.15em 0.4em;
    border-radius: 6px;
    background: var(--color-secondary);
    color: var(--color-dark-purple);
    font-size: 0.9em;
}

.post-body .entry-content pre {
    overflow-x: auto;
    padding: 1.5rem;
    border-radius: 16px;
    background: var(--color-dark-purple);
    color: var(--color-white);
    font-size: 0.875rem;
    line-height: 1.6;
}

.post-body .entry-content pre code {
    padding: 0;
    background: none;
    color: inherit;
}

.post-body .entry-content table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 12px;
    font-size: 0.9375rem;
}

.post-body .entry-content th,
.post-body .entry-content td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--color-secondary);
    text-align: left;
}

.post-body .entry-content th {
    background: var(--color-secondary);
    color: var(--color-dark-purple);
    font-weight: var(--fw-bold);
}

.post-body .entry-content .wp-block-image,
.post-body .entry-content .alignwide {
    margin-inline: 0;
}

.post-body .page-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2.5rem;
    font-weight: var(--fw-bold);
}

/* ── Post footer: tags and sharing ── */
.post-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    margin-top: 3rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--color-secondary);
}

.post-tags,
.post-share-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem 0.875rem;
}

.post-tags__list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.post-tags__list a {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--color-secondary);
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-dark-purple);
    font-size: 0.8125rem;
    font-weight: var(--fw-semibold);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.post-tags__list a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.post-edit {
    margin: 2rem 0 0;
    font-size: 0.8125rem;
}

/* =============================================
   SINGLE — prev / next
   ============================================= */
.post-nav {
    padding: 3rem 0 0;
}

.post-nav__link {
    grid-column: span 6;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    padding: 0.875rem;
    border: 1px solid var(--color-secondary);
    border-radius: 18px;
    background: var(--color-white);
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.post-nav__link:hover {
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(45, 44, 108, 0.10);
}

.post-nav__link--next {
    grid-column: 7 / -1;
    flex-direction: row-reverse;
    text-align: right;
}

.post-nav__thumb {
    flex: 0 0 auto;
    width: 88px;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 12px;
    background: var(--color-light-purple);
}

.post-nav__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.post-nav__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.5rem;
}

.post-nav__link--next .post-nav__text {
    align-items: flex-end;
}

.post-nav__label {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    color: var(--color-soft-purple);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.post-nav__title {
    display: -webkit-box;
    overflow: hidden;
    color: var(--color-dark-purple);
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: var(--fw-bold);
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.post-nav__link:hover .post-nav__title {
    color: var(--color-primary);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .post-nav__link:hover .post-nav__image {
        transform: scale(1.06);
    }
}

/* =============================================
   SINGLE — related
   ============================================= */
.post-related {
    padding: 5rem 0 1rem;
}

.post-related__header {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.post-related__title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0;
    color: var(--color-dark-purple);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    letter-spacing: -0.01em;
}

.post-related__title em {
    font-size: clamp(2.25rem, 3.6vw, 3.25rem);
    font-style: italic;
    line-height: 1.1;
}

.post-related__title span {
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
    line-height: 1.2;
}

.post-related__all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: var(--fw-bold);
}

.post-related__all:hover svg {
    transform: translate(2px, -2px);
}

.post-related__all svg {
    transition: transform 0.25s ease;
}

/* =============================================
   SINGLE — comments
   ============================================= */
.post-comments {
    padding: 4rem 0 5rem;
}

.post-comments__inner {
    grid-column: 2 / 9;
}

.post-comments .comments-area {
    margin: 0;
    padding: 2.25rem;
    border: 1px solid var(--color-secondary);
    border-radius: 20px;
    background: var(--color-white);
}

.post-comments .comments-title,
.post-comments .comment-reply-title {
    margin-bottom: 1.5rem;
    color: var(--color-dark-purple);
    font-family: var(--font-display);
    font-size: var(--text-title5);
    font-weight: var(--fw-bold);
    line-height: var(--lh-title5);
}

.post-comments .comment-list {
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.post-comments .comment-body {
    border: 1px solid var(--color-secondary);
    box-shadow: none;
    background: var(--color-light-purple);
}

.post-comments .comment-form input:not([type="submit"]),
.post-comments .comment-form textarea {
    border-radius: 12px;
}

.post-comments .comment-form .btn-primary {
    padding: 0.75rem 2rem;
    border-radius: 999px;
    background: var(--color-accent-01);
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-weight: var(--fw-bold);
}

/* The affiliate CTA sits inside the reading column — soften it to match. */
.post-body .affiliate-cta {
    border-radius: 20px;
}

/* =============================================
   RESPONSIVE
   ============================================= */
/* Narrow desktops: the rail needs a fourth column to hold the offer, so the
   reading column moves to the container edge to make room. */
@media (min-width: 1025px) and (max-width: 1280px) {
    .post-hero__inner {
        grid-column: 1 / 10;
    }

    .post-featured__frame,
    .post-featured__caption,
    .post-body,
    .post-comments__inner {
        grid-column: 1 / 8;
    }

    .post-aside {
        grid-column: 9 / 13;
    }
}

/* Too short to hold the contents and the offer on screen together. */
@media (min-width: 1025px) and (max-height: 640px) {
    .post-aside__inner {
        position: static;
    }
}

@media (max-width: 1024px) {
    .blog-hero {
        padding: 9rem 0 10.5rem;
    }

    .blog-hero__content,
    .post-hero__inner,
    .post-featured__frame,
    .post-featured__caption,
    .post-body,
    .post-comments__inner {
        grid-column: 1 / -1;
    }

    /* The contents list opens above the copy instead, and the band after the
       article carries the offer, so the rail has nothing left to add. */
    .post-aside {
        display: none;
    }

    .post-toc--inline {
        display: block;
        margin-bottom: 2.25rem;
    }

    /* The copy spans the full column here, leaving no room on the left. */
    .blog-decor__star--1,
    .blog-hero .blog-decor__grid {
        display: none;
    }

    .blog-decor__star--2 {
        right: 6%;
        bottom: 30%;
    }

    .blog-decor__star--3 {
        top: 30%;
        right: 9%;
    }

    .blog-lead {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 12px;
        border-radius: 24px;
    }

    .blog-lead__media {
        aspect-ratio: 16 / 10;
    }

    .blog-lead__body {
        padding: 1.5rem 1rem 1rem;
    }

    .post-hero {
        padding: 9rem 0 7.5rem;
    }

    .post-layout {
        padding-top: 3.5rem;
    }
}

/* Tablets keep the cat beside the offer and prev and next side by side. */
@media (min-width: 769px) and (max-width: 1024px) {
    .blog-offer__panel {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    }

    /* Leaves room on the right, where the panel would clip the bubble. */
    .blog-offer__art {
        justify-self: start;
        width: min(84%, 26rem);
    }

    .blog-offer__bubble {
        top: 9%;
        right: -12%;
        padding: 0.5rem 0.875rem;
        font-size: 1.0625rem;
    }

    .post-nav .container.grid > .post-nav__link {
        grid-column: span 3;
    }

    .post-nav .container.grid > .post-nav__link--next {
        grid-column: 4 / -1;
    }
}

@media (max-width: 768px) {
    .blog-hero {
        padding: 7.5rem 0 6.5rem;
    }

    .blog-hero__title em {
        font-size: clamp(2.5rem, 12vw, 3.5rem);
    }

    .blog-hero__title span {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }

    .blog-decor__star {
        display: none;
    }

    .blog-search {
        flex-wrap: wrap;
        padding: 0.75rem;
        border-radius: 20px;
    }

    .blog-search__field {
        flex: 1 1 60%;
    }

    .blog-search__submit {
        flex: 1 1 100%;
    }

    .blog-filters {
        margin: -5rem 0 2rem;
    }

    .blog-filters__list {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        scrollbar-width: none;
    }

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

    /* Byline on its own row, so a wrapped date never leaves a dot hanging. */
    .blog-meta__author {
        flex-basis: 100%;
    }

    .blog-meta__author + .blog-meta__dot {
        display: none;
    }

    .blog-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .blog-grid > * {
        grid-column: auto;
    }

    .blog-lead {
        border-radius: 22px;
    }

    .blog-lead__body {
        gap: 1rem;
        padding: 1.25rem 0.5rem 0.75rem;
    }

    .blog-lead__title {
        font-size: clamp(1.625rem, 7vw, 2rem);
    }

    .blog-card__body {
        padding: 1.25rem 1.25rem 1.125rem;
    }

    .blog-listing {
        padding-bottom: 4rem;
    }

    .blog-offer__panel {
        grid-template-columns: minmax(0, 1fr);
        border-radius: 22px;
    }

    .blog-offer__content {
        padding-bottom: 0;
    }

    .blog-offer__art {
        width: min(88%, 20rem);
        margin-top: 1.5rem;
    }

    .blog-offer__bubble {
        top: 9%;
        right: -2%;
        padding: 0.5rem 0.875rem;
        font-size: 1rem;
    }

    .blog-offer--inline {
        align-items: flex-start;
        padding: 1rem;
    }

    .post-hero {
        padding: 7.5rem 0 6rem;
    }

    .post-featured {
        margin-top: -4rem;
    }

    .post-featured__frame {
        border-radius: 16px;
    }

    .post-layout {
        padding: 2.5rem 0 3rem;
    }

    .post-body .entry-content {
        font-size: 1.0625rem;
    }

    .post-body .entry-content blockquote {
        padding: 1.5rem;
    }

    .post-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .post-nav__link,
    .post-nav__link--next {
        grid-column: 1 / -1;
        flex-direction: row;
        text-align: left;
    }

    .post-nav__link--next .post-nav__text {
        align-items: flex-start;
    }

    .post-nav__thumb {
        width: 64px;
    }

    .post-related {
        padding-top: 3.5rem;
    }

    .post-comments {
        padding: 2.5rem 0 3.5rem;
    }

    .post-comments .comments-area {
        padding: 1.5rem;
        border-radius: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-lead,
    .blog-card,
    .blog-card__arrow,
    .blog-offer__more svg,
    .blog-offer__link svg,
    .post-toc__link,
    .post-toc__link::before,
    .post-toc__chevron,
    .post-nav__link,
    .post-share__link {
        transition: none;
    }

    .blog-card:hover,
    .blog-card:hover .blog-card__arrow,
    .post-nav__link:hover,
    .post-share__link:hover {
        transform: none;
    }
}