/*
 * The Long Look - /blog/ landing layer (home.php only).
 * Editorial Classic magazine register: DM Serif Display headings, Source Serif
 * Pro body, Work Sans eyebrows/meta. (Code identifiers stay .exhale-*.)
 * Palette: live Kit primary teal #029791, secondary navy #021649, Magazine Cream
 * #FAF7F2. Live values (not the aspirational design-system doc) per the
 * kit-vs-design-system-drift memory.
 *
 * Mobile-first. Hand-written. No preprocessor. Target: <= 20 KB gz.
 *
 * Class names per native-wp-blog-build.md plan section 3 (.exhale-*).
 * Font files load via inc/enqueues.php enqueue (Google Fonts API), not @import.
 */

:root {
    --c-cream: #FAF7F2;
    --c-cream-deep: #F2EDE3;
    --c-navy: #021649;
    --c-navy-2: #0E2664;
    --c-teal: #029791;
    --c-teal-tint: #E6F4F3;
    --c-teal-glow: #A2E5DA;
    /* Dark green — Kit "CTA Button Color"; canonical CTA hover state.
       Confirmed by Sean 2026-06-03. See introspectus-design-system
       SKILL.md "Live Kit extensions" table. */
    --c-dark-green: #2E5D4B;
    --c-charcoal: #333333;
    --c-muted: rgba(51, 51, 51, 0.62);
    --c-white: #ffffff;

    --ff-display: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ff-h1: "DM Serif Display", Georgia, serif;
    --ff-body: "Source Serif Pro", "Source Serif 4", Georgia, "Times New Roman", serif;

    --ls-eye: 0.16em;
    --rad-sm: 4px;
    --rad-md: 8px;
    --rad-lg: 14px;

    --shadow-card: 0 1px 2px rgba(2, 22, 73, 0.04), 0 10px 28px rgba(2, 22, 73, 0.06);
    --shadow-hero: 0 24px 60px rgba(2, 22, 73, 0.18);

    --t-fast: 160ms ease-out;
    --t-base: 240ms ease-out;
}

/* -------------------------------------------------------------------------
   Base + reset (scoped to .exhale-blog-main so it cannot leak)
   ------------------------------------------------------------------------- */
.exhale-blog-main {
    background: var(--c-cream);
    color: var(--c-charcoal);
    font-family: var(--ff-body);
    font-size: 19px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.exhale-blog-main *,
.exhale-blog-main *::before,
.exhale-blog-main *::after {
    box-sizing: border-box;
}

.exhale-blog-main a {
    color: var(--c-teal);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--t-fast);
}

.exhale-blog-main a:hover,
.exhale-blog-main a:focus-visible {
    color: var(--c-navy);
}

.exhale-blog-main img {
    display: block;
    max-width: 100%;
    height: auto;
}

.exhale-blog-main h1,
.exhale-blog-main h2,
.exhale-blog-main h3 {
    margin: 0;
    color: var(--c-navy);
    /* DM Serif Display for all landing display headings. Set on this
       descendant reset (specificity 0,1,1) so it beats the per-component
       single-class rules AND ties the Elementor Kit's .elementor-kit-8 h*
       rules; landing.css loads after the Kit, so the tie resolves here.
       Eyebrows/meta (spans, .ff-display) and card titles (spans) are
       unaffected. DM Serif ships weight 400 only. */
    font-family: var(--ff-h1);
    font-weight: 400;
}

.exhale-blog-main p {
    margin: 0;
}

.exhale-blog-main :focus-visible {
    outline: 2px solid var(--c-teal);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Elementor Pro global popup template (post 15011) is output server-side on
   the landing because the Elementor dequeue is single-post-only. On this
   non-Elementor template the popup JS never wraps it as a hidden modal, so it
   renders inline in normal flow ~27,700px tall, below the footer. Hide it here:
   landing.css loads on is_home ONLY, so this is scoped to /blog/ and does not
   affect popups on Elementor-rendered pages. Found 2026-06-05 (page-height
   blew up to 32k px). */
.elementor-location-popup,
.elementor-popup-modal { display: none !important; }

/* -------------------------------------------------------------------------
   S2 - Intro band ("The Long Look")
   ------------------------------------------------------------------------- */
.exhale-intro {
    position: relative;
    overflow: hidden;
    padding: 14px 24px 16px;
    background: var(--c-cream);
}

.exhale-intro__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.32;
    filter: saturate(0.8) brightness(1.04);
}

.exhale-intro__veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(250, 247, 242, 0.78) 0%, rgba(250, 247, 242, 0.55) 50%, rgba(250, 247, 242, 0.92) 100%),
        radial-gradient(120% 80% at 18% 30%, rgba(250, 247, 242, 0.0) 0%, rgba(250, 247, 242, 0.45) 100%);
}

.exhale-intro__inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.exhale-intro__crumbs {
    margin: 0 0 16px;
    color: var(--c-muted);
    font-family: var(--ff-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--ls-eye);
    text-transform: uppercase;
}

.exhale-intro__crumbs a {
    color: inherit;
    text-decoration: none;
}

.exhale-intro__crumbs a:hover {
    color: var(--c-teal);
}

.exhale-intro__crumbs span[aria-hidden] {
    margin: 0 8px;
    opacity: 0.5;
}

.exhale-intro__title {
    margin: 0 0 12px;
    font-family: var(--ff-h1);
    font-size: 40px;
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.005em;
}

.exhale-intro__tagline {
    max-width: 52ch;
    margin: 0 auto;
    color: var(--c-charcoal);
    font-family: var(--ff-body);
    font-size: 17px;
    font-style: italic;
    line-height: 1.45;
}

@media (min-width: 768px) {
    .exhale-intro {
        padding: 26px 64px 28px;
    }
    .exhale-intro__title {
        font-size: 56px;
    }
    .exhale-intro__tagline {
        font-size: 20px;
    }
}

@media (min-width: 1100px) {
    .exhale-intro {
        padding-left: 80px;
        padding-right: 80px;
    }
    .exhale-intro__title {
        font-size: 64px;
    }
}

/* -------------------------------------------------------------------------
   S3 - Featured post hero
   ------------------------------------------------------------------------- */
.exhale-featured {
    position: relative;
    background: var(--c-cream);
    padding: 2px 24px 32px;
}

.exhale-featured__link {
    position: relative;
    display: block;
    max-width: 1100px;
    margin: 0 auto;
    min-height: 320px;
    overflow: hidden;
    border-radius: var(--rad-lg);
    /* Contained magazine hero (mirrors the single-post hero image), with a
       green-tinted soft shadow per Sean 2026-06-05. Layered: faint navy
       ambient for depth + dark-green glow for the brand cast. */
    box-shadow: 0 12px 30px rgba(2, 22, 73, 0.10), 0 28px 64px rgba(46, 93, 75, 0.32);
    color: var(--c-white);
    text-decoration: none;
}

.exhale-featured__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 600ms ease-out;
}

.exhale-featured__link:hover .exhale-featured__bg,
.exhale-featured__link:focus-visible .exhale-featured__bg {
    transform: scale(1.03);
}

.exhale-featured__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(2, 22, 73, 0) 18%, rgba(2, 22, 73, 0.55) 58%, rgba(2, 22, 73, 0.93) 100%),
        linear-gradient(90deg, rgba(2, 22, 73, 0.45) 0%, rgba(2, 22, 73, 0.05) 55%, rgba(2, 22, 73, 0) 75%);
}

.exhale-featured__content {
    position: absolute;
    right: 24px;
    bottom: 28px;
    left: 24px;
    max-width: 920px;
}

.exhale-featured__eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 10px;
    border: 1px solid rgba(162, 229, 218, 0.6);
    color: var(--c-teal-glow);
    font-family: var(--ff-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--ls-eye);
    text-transform: uppercase;
}

.exhale-featured__title {
    margin: 0 0 10px;
    color: var(--c-white);
    font-family: var(--ff-h1);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.16;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 16px rgba(0, 0, 0, 0.55);
}

/* The `.exhale-blog-main h2 { color: navy }` reset (0,1,1) was overriding the
   white above (0,1,0), rendering the hero title in navy on the dark image —
   invisible. Force white with a matching-specificity scoped rule. */
.exhale-blog-main .exhale-featured__title { color: var(--c-white); }

.exhale-featured__meta {
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ff-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

@media (min-width: 768px) {
    .exhale-featured__link {
        min-height: 420px;
    }
    .exhale-featured__content {
        right: 64px;
        bottom: 44px;
        left: 64px;
    }
    .exhale-featured__title {
        font-size: 36px;
    }
}

@media (min-width: 1100px) {
    .exhale-featured__link {
        min-height: 520px;
    }
    .exhale-featured__content {
        right: 80px;
        bottom: 56px;
        left: 80px;
    }
    .exhale-featured__title {
        font-size: 44px;
        line-height: 1.12;
    }
}

/* -------------------------------------------------------------------------
   S4 - Latest posts grid
   ------------------------------------------------------------------------- */
.exhale-grid {
    padding: 56px 24px 32px;
    background: var(--c-cream);
}

.exhale-grid__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.exhale-grid__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}

/* Flat, image-forward cards — Maaya's "loose" look: no white box, no shadow;
   image, then centered text floating on the cream field. */
.exhale-grid__card {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.exhale-grid__thumb {
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    border-radius: var(--rad-sm);
    background: var(--c-cream-deep);
}

.exhale-grid__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms ease-out;
}

.exhale-grid__card:hover .exhale-grid__thumb img,
.exhale-grid__card:focus-within .exhale-grid__thumb img {
    transform: scale(1.04);
}

.exhale-grid__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 10px 0;
    text-align: center;
}

.exhale-grid__eyebrow {
    color: var(--c-teal);
    font-family: var(--ff-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--ls-eye);
    text-transform: uppercase;
}

.exhale-grid__title {
    margin: 0;
    font-family: var(--ff-h1);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.24;
}

.exhale-grid__title a {
    color: var(--c-navy);
    text-decoration: none;
}

.exhale-grid__title a:hover,
.exhale-grid__title a:focus-visible {
    color: var(--c-teal);
}

.exhale-grid__meta {
    color: var(--c-muted);
    font-family: var(--ff-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.exhale-grid__excerpt {
    color: var(--c-charcoal);
    font-family: var(--ff-body);
    font-size: 15px;
    line-height: 1.55;
}

.exhale-grid__more {
    margin-top: 6px;
    align-self: center;
    padding: 9px 20px;
    border: 1px solid var(--c-teal);
    border-radius: 999px;
    color: var(--c-teal);
    font-family: var(--ff-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: var(--ls-eye);
    text-transform: uppercase;
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.exhale-grid__more:hover,
.exhale-grid__more:focus-visible {
    background: var(--c-teal);
    border-color: var(--c-teal);
    color: var(--c-white);
}

.exhale-grid__empty {
    padding: 40px 0;
    color: var(--c-muted);
    font-family: var(--ff-body);
    font-size: 16px;
    font-style: italic;
    text-align: center;
}

@media (min-width: 700px) {
    .exhale-grid {
        padding: 96px 48px 80px;
    }
    .exhale-grid__list {
        grid-template-columns: 1fr 1fr;
        gap: 56px;
    }
    /* Offset the right column down for Maaya's loose, staggered masonry feel.
       The lone first card sits in the left column (no even sibling yet), already
       in position so the next post drops straight into the offset right column. */
    .exhale-grid__card:nth-child(even) {
        margin-top: 64px;
    }
    .exhale-grid__title {
        font-size: 22px;
    }
}

@media (min-width: 1100px) {
    .exhale-grid {
        padding-left: 80px;
        padding-right: 80px;
    }
    .exhale-grid__list {
        gap: 64px 72px;
    }
}

/* Pagination */
.exhale-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 48px;
    padding-bottom: 16px;
}

.exhale-pagination__page span,
.exhale-pagination__page a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 10px 14px;
    background: var(--c-white);
    border: 1px solid var(--c-cream-deep);
    border-radius: var(--rad-sm);
    color: var(--c-navy);
    font-family: var(--ff-display);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.exhale-pagination__page a:hover,
.exhale-pagination__page a:focus-visible {
    background: var(--c-teal-tint);
    border-color: var(--c-teal);
    color: var(--c-navy);
}

.exhale-pagination__page--current span {
    background: var(--c-teal);
    border-color: var(--c-teal);
    color: var(--c-white);
}

/* -------------------------------------------------------------------------
   S5 - Newsletter band
   ------------------------------------------------------------------------- */
.exhale-newsletter {
    position: relative;
    padding: 56px 24px;
    background: var(--c-teal);
    color: var(--c-white);
    overflow: hidden;
}

.exhale-newsletter::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 90% at 100% 0%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 60%),
        radial-gradient(60% 90% at 0% 100%, rgba(2, 22, 73, 0.20) 0%, rgba(2, 22, 73, 0) 60%);
    pointer-events: none;
}

.exhale-newsletter__inner {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.exhale-newsletter__heading {
    margin: 0 0 14px;
    color: var(--c-white);
    font-family: var(--ff-h1);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.005em;
}

.exhale-newsletter__sub {
    margin: 0 0 28px;
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--ff-body);
    font-size: 16px;
    font-style: italic;
    line-height: 1.5;
}

.exhale-newsletter__form {
    margin: 0 auto 16px;
    min-height: 56px;
    max-width: 480px;
}

/* Self-contained email-capture form (posts to the MailerLite endpoint). */
.exhale-signup {
    display: flex;
    gap: 10px;
    width: 100%;
}
.exhale-signup__email {
    flex: 1 1 auto;
    min-width: 0;
    padding: 13px 18px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    background: var(--c-white);
    color: var(--c-navy);
    font-family: var(--ff-body);
    font-size: 16px;
}
.exhale-signup__email::placeholder { color: var(--c-muted); }
.exhale-signup__email:focus-visible { outline: 2px solid var(--c-navy); outline-offset: 2px; }
.exhale-signup__btn {
    flex: 0 0 auto;
    padding: 13px 28px;
    border: 0;
    border-radius: 999px;
    background: var(--c-navy);
    color: var(--c-white);
    font-family: var(--ff-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background var(--t-base), transform var(--t-fast);
}
.exhale-signup__btn:hover,
.exhale-signup__btn:focus-visible { background: #0c2156; transform: translateY(-1px); }
.exhale-signup__btn:disabled { opacity: 0.7; cursor: default; transform: none; }
.exhale-signup__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.exhale-signup__status {
    margin: 2px 0 0;
    color: var(--c-white);
    font-family: var(--ff-body);
    font-size: 16px;
    font-style: italic;
}
@media (max-width: 479px) {
    .exhale-signup { flex-direction: column; }
    .exhale-signup__btn { width: 100%; }
}

.exhale-newsletter__fine {
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--ff-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

@media (min-width: 768px) {
    .exhale-newsletter {
        padding: 96px 48px;
    }
    .exhale-newsletter__heading {
        font-size: 34px;
    }
    .exhale-newsletter__sub {
        font-size: 18px;
    }
}

/* -------------------------------------------------------------------------
   S6 - About the author
   ------------------------------------------------------------------------- */
.exhale-author {
    padding: 64px 24px;
    background: var(--c-white);
}

.exhale-author__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 760px;
    margin: 0 auto;
    align-items: center;
    justify-items: center;
}

.exhale-author__photo {
    display: flex;
    justify-content: center;
}

.exhale-author__photo img {
    width: 168px;
    height: 168px;
    border-radius: 50%;
    object-fit: cover;
    /* Source is a 200x300 portrait; centring cropped the top of his head.
       Shift the crop up so there's headroom above and nothing is clipped. */
    object-position: 50% 12%;
    box-shadow: 0 1px 3px rgba(2, 22, 73, 0.05), 0 12px 28px rgba(2, 22, 73, 0.12);
}

.exhale-author__copy {
    text-align: center;
}

.exhale-author__eyebrow {
    margin: 0 0 10px;
    color: var(--c-teal);
    font-family: var(--ff-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--ls-eye);
    text-transform: uppercase;
}

.exhale-author__heading {
    margin: 0 0 20px;
    font-family: var(--ff-h1);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.005em;
}

.exhale-author__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 600px;
    margin: 0 auto 20px;
}

.exhale-author__body p {
    color: var(--c-charcoal);
    font-family: var(--ff-body);
    font-size: 18px;
    line-height: 1.7;
}

.exhale-author__creds {
    margin: 0 0 24px;
    color: var(--c-charcoal);
    font-family: var(--ff-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.exhale-author__cta-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.exhale-author__cta-link {
    color: var(--c-teal);
    font-family: var(--ff-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.exhale-author__cta-link:hover {
    color: var(--c-navy);
}

.exhale-author__cta-button {
    display: inline-block;
    padding: 12px 26px;
    background: var(--c-dark-green);
    border-radius: 999px;
    color: var(--c-white);
    font-family: var(--ff-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background var(--t-base), transform var(--t-fast);
}

.exhale-author__cta-button:hover,
.exhale-author__cta-button:focus-visible {
    background: #24493a;
    color: var(--c-white);
    transform: translateY(-1px);
}

/* Landing author bio (reuses .exhale-post__author-bio* from magazine.css):
   the read-more link + the Book CTA sit in a row with room above. */
.exhale-author-landing__cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 24px;
}

/* The landing h2 reset (DM Serif, weight 400) was overriding the bio name's
   Work Sans bold from magazine.css — restore it so the name matches the
   single-post bio Sean is replicating. */
.exhale-blog-main .exhale-post__author-bio-name {
    font-family: var(--ff-display);
    font-weight: 700;
}

/* Force white button text: the base `.exhale-blog-main a { color: teal }`
   (0,1,1) was overriding the button's white (0,1,0), giving teal-on-teal. */
.exhale-blog-main a.exhale-author__cta-button,
.exhale-blog-main a.exhale-author__cta-button:hover,
.exhale-blog-main a.exhale-author__cta-button:focus-visible {
    color: var(--c-white);
}

@media (min-width: 768px) {
    .exhale-author {
        padding: 72px 48px;
    }
    .exhale-author__photo img {
        width: 184px;
        height: 184px;
    }
    .exhale-author__cta-row {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
}

@media (min-width: 1100px) {
    .exhale-author {
        padding-left: 80px;
        padding-right: 80px;
    }
}

/* -------------------------------------------------------------------------
   S7 - Category tiles
   ------------------------------------------------------------------------- */
.exhale-categories {
    padding: 64px 24px;
    background: var(--c-teal-tint);
}

.exhale-categories__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.exhale-categories__heading {
    margin: 0 0 28px;
    font-family: var(--ff-h1);
    font-size: 30px;
    font-weight: 400;
    letter-spacing: -0.005em;
    text-align: center;
}

.exhale-categories__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.exhale-categories__tile-wrap {
    list-style: none;
}

.exhale-categories__tile {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: var(--rad-md);
    text-decoration: none;
    box-shadow: var(--shadow-card);
    transition: transform var(--t-base), box-shadow var(--t-base);
}

.exhale-categories__tile:hover,
.exhale-categories__tile:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 2px 6px rgba(2, 22, 73, 0.06), 0 20px 38px rgba(2, 22, 73, 0.16);
}

.exhale-categories__tile-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 600ms ease-out;
}

.exhale-categories__tile:hover .exhale-categories__tile-bg {
    transform: scale(1.05);
}

.exhale-categories__tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(170deg, rgba(2, 22, 73, 0.08) 30%, rgba(2, 22, 73, 0.72) 100%);
}

.exhale-categories__tile-content {
    position: absolute;
    right: 18px;
    bottom: 18px;
    left: 18px;
}

.exhale-categories__tile-name {
    display: block;
    margin-bottom: 4px;
    color: var(--c-white);
    font-family: var(--ff-display);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.18;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.exhale-categories__tile-count {
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--ff-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--ls-eye);
    text-transform: uppercase;
}

@media (min-width: 700px) {
    .exhale-categories__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }
    .exhale-categories__heading {
        font-size: 32px;
    }
}

@media (min-width: 1024px) {
    .exhale-categories {
        padding: 104px 64px;
    }
    .exhale-categories__list {
        grid-template-columns: repeat(3, 1fr);
        gap: 26px;
    }
    .exhale-categories__tile-name {
        font-size: 22px;
    }
}

@media (min-width: 1100px) {
    .exhale-categories {
        padding-left: 80px;
        padding-right: 80px;
    }
}

/* -------------------------------------------------------------------------
   S8 - Featured video band
   ------------------------------------------------------------------------- */
.exhale-video {
    padding: 64px 24px;
    background: var(--c-white);
}

.exhale-video__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 780px;
    margin: 0 auto;
    align-items: center;
    text-align: center;
}

.exhale-video__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--c-cream-deep);
    border-radius: var(--rad-md);
    box-shadow: var(--shadow-card);
}

.exhale-video__media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.exhale-video__eyebrow {
    margin: 0 0 8px;
    color: var(--c-teal);
    font-family: var(--ff-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--ls-eye);
    text-transform: uppercase;
}

.exhale-video__heading {
    margin: 0 0 14px;
    font-family: var(--ff-h1);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: -0.005em;
}

.exhale-video__body {
    margin: 0 0 18px;
    color: var(--c-charcoal);
    font-family: var(--ff-body);
    font-size: 18px;
    line-height: 1.7;
}

.exhale-video__link {
    color: var(--c-teal);
    font-family: var(--ff-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.exhale-video__link:hover {
    color: var(--c-navy);
}

@media (min-width: 900px) {
    .exhale-video {
        padding: 96px 48px;
    }
    .exhale-video__heading {
        font-size: 30px;
    }
}

@media (min-width: 1100px) {
    .exhale-video {
        padding-left: 80px;
        padding-right: 80px;
    }
}

/* -------------------------------------------------------------------------
   S9 - Editorial Standard band
   ------------------------------------------------------------------------- */
.exhale-standard {
    padding: 32px 24px 40px;
    background: var(--c-cream);
    text-align: center;
}

/* Scoped (.exhale-blog-main prefix, 0,2,0) so the centering margin beats the
   base `.exhale-blog-main p { margin: 0 }` reset (0,1,1) — otherwise this <p>
   pins left instead of centering. */
.exhale-blog-main .exhale-standard__body {
    max-width: 720px;
    margin: 0 auto;
    color: var(--c-charcoal);
    font-family: var(--ff-display);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0.005em;
}

@media (min-width: 768px) {
    .exhale-standard {
        padding: 40px 48px 56px;
    }
}

/* -------------------------------------------------------------------------
   S4b - Bottom photo grid ("Keep reading")
   Denser, image-forward cards of MORE recent posts (secondary offset query).
   Section heading is DM Serif (matches other sections); card titles stay Work
   Sans (small + dense). Renders page 1 only, and only when the query is
   non-empty. See template-parts/section-recent-extended.php.
   ------------------------------------------------------------------------- */
.exhale-recent-extended {
    padding: 56px 24px 64px;
    background: var(--c-cream);
}

.exhale-recent-extended__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.exhale-recent-extended__heading {
    margin: 0 0 28px;
    font-family: var(--ff-h1);
    font-size: 26px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.005em;
    text-align: center;
}

.exhale-recent-extended__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.exhale-recent-extended__item {
    list-style: none;
}

.exhale-recent-extended__card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
}

.exhale-recent-extended__thumb {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--c-cream-deep);
    border-radius: var(--rad-sm);
}

.exhale-recent-extended__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms ease-out;
}

.exhale-recent-extended__card:hover .exhale-recent-extended__thumb img,
.exhale-recent-extended__card:focus-visible .exhale-recent-extended__thumb img {
    transform: scale(1.04);
}

.exhale-recent-extended__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.exhale-recent-extended__eyebrow {
    color: var(--c-teal);
    font-family: var(--ff-display);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: var(--ls-eye);
    text-transform: uppercase;
}

.exhale-recent-extended__title {
    color: var(--c-navy);
    font-family: var(--ff-display);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    transition: color var(--t-fast);
}

.exhale-recent-extended__card:hover .exhale-recent-extended__title,
.exhale-recent-extended__card:focus-visible .exhale-recent-extended__title {
    color: var(--c-teal);
}

@media (min-width: 700px) {
    .exhale-recent-extended__list {
        grid-template-columns: repeat(3, 1fr);
        gap: 28px 22px;
    }
    .exhale-recent-extended__heading {
        font-size: 30px;
    }
}

@media (min-width: 1024px) {
    .exhale-recent-extended {
        padding: 72px 64px 80px;
    }
    .exhale-recent-extended__list {
        gap: 32px 26px;
    }
}

@media (min-width: 1100px) {
    .exhale-recent-extended {
        padding-left: 80px;
        padding-right: 80px;
    }
}

/* -------------------------------------------------------------------------
   Reduced motion - kill scale/translate/transitions when requested
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .exhale-blog-main *,
    .exhale-blog-main *::before,
    .exhale-blog-main *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .exhale-featured__link:hover .exhale-featured__bg,
    .exhale-grid__card:hover .exhale-grid__thumb img,
    .exhale-recent-extended__card:hover .exhale-recent-extended__thumb img,
    .exhale-categories__tile:hover .exhale-categories__tile-bg {
        transform: none;
    }

    .exhale-grid__card:hover,
    .exhale-categories__tile:hover,
    .exhale-author__cta-button:hover {
        transform: none;
    }
}


/* -------------------------------------------------------------------------
   S2 - Intro masthead: logo lockup (replaces the text title 2026-06-08)
   The H1 is kept for SEO; the accessible name comes from the img alt.
   ------------------------------------------------------------------------- */
.exhale-intro__title--logo {
    line-height: 0;          /* collapse the text line-box around the image */
    margin: 0;
}
.exhale-intro__logo {
    display: block;
    width: min(300px, 80vw);
    height: auto;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .exhale-intro__logo { width: 420px; }
}
@media (min-width: 1100px) {
    .exhale-intro__logo { width: 460px; }
}