.qa-interview {
    /* Page-scoped serif stack — do NOT promote to design-tokens.css. */
    --reading-display: 'Playfair Display', Georgia, serif;
    --reading-serif:   'Source Serif 4', 'Source Serif Pro', Georgia, serif;

    /* Reading-column width for the body. Hero is wider; body is
       capped tighter for line-length comfort (~70ch at 18px). */
    --qa-col-narrow:   680px;

    background: var(--color-bg-page);
    color: var(--color-ink);
}

/* ── Hero ─────────────────────────────────────────────────── */

/* Hero is a 2-column grid on desktop (text left, featured image right)
   and collapses to single column under 901px. The 1240px max-width is
   the editorial article width — wider than the global content cap so
   inline image blocks below can also bleed out to it. */
.qa-interview__hero {
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--space-12) var(--content-padding-mobile) var(--space-10);
}

.qa-interview__eyebrow {
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-fairway);
    margin: 0 0 var(--space-6);
}

.qa-interview__title {
    font-family: var(--reading-display);
    font-weight: var(--fw-black);
    font-size: clamp(36px, 6vw, 68px);
    line-height: 1.02;
    letter-spacing: -0.022em;
    color: var(--color-deep-rough);
    margin: 0 0 var(--space-6);
    text-wrap: balance;
}

.qa-interview__title em {
    font-style: italic;
    font-weight: var(--fw-regular);
    color: var(--color-fairway);
}

.qa-interview__deck {
    font-family: var(--reading-serif);
    font-style: italic;
    font-weight: var(--fw-regular);
    font-size: clamp(18px, 2.2vw, 22px);
    line-height: var(--lh-normal);
    color: var(--color-cart-path);
    margin: 0 0 var(--space-8);
    max-width: 36em;
    text-wrap: pretty;
}

.qa-interview__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-6);
    margin: 0 0 var(--space-10);
    padding-top: var(--space-5);
    border-top: var(--border-base) solid var(--color-sand-trap);
}

.qa-interview__meta-cell {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
}

.qa-interview__meta-label {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-cart-path);
    margin: 0;
}

.qa-interview__meta-value {
    font-family: var(--reading-serif);
    font-size: 15px;
    font-weight: var(--fw-regular);
    color: var(--color-ink);
    margin: 0;
}

.qa-interview__hero-figure {
    margin: 0;
}

.qa-interview__hero-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: var(--border-base) solid var(--color-border);
    border-radius: 0;
}

/* Hero caption — labeled flex row ("ABOVE" + descriptive text) with a
   sand-trap left rule. Spec emits <strong> + <span>; the flex layout
   handles both. */
.qa-interview__hero-caption {
    margin: var(--space-3) 0 0;
    padding: 2px 0 2px var(--space-3);
    border-left: var(--border-thick) solid var(--color-sand-trap);
    font-family: var(--font-ui);
    font-size: 12px;
    line-height: var(--lh-snug);
    letter-spacing: 0.04em;
    color: var(--color-cart-path);
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.qa-interview__hero-caption strong {
    flex-shrink: 0;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-deep-rough);
}

/* ── Body (entry-content) ─────────────────────────────────── */

/* Entry-content is the article-width container (1240px max). Reading
   prose (intro, h2 questions, answer paragraphs, pullquote) is capped
   to --qa-col-narrow via per-element max-width + auto margins below.
   Inline image blocks (gallery, alignwide/alignfull image) bleed out
   to the full article width — that's the whole reason for widening
   here. */
.qa-interview .entry-content {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 var(--content-padding-mobile) var(--space-20);
    counter-reset: qa-counter;
    /* Safety net: long unbreakable strings (pasted embed HTML, raw URLs)
       in an authored paragraph would otherwise overflow the narrow body
       column on mobile and trigger horizontal page scroll. */
    overflow-wrap: break-word;
}

/* Intro lede — the first paragraph (before any h2) reads as the
   interview's setup, not as an answer. Subsequent paragraphs that
   precede the first h2 still fall through to the default body
   paragraph treatment (browser default); the brief assumes most
   intros are a single paragraph. */
.qa-interview .entry-content > p:first-child {
    max-width: var(--qa-col-narrow);
    font-family: var(--reading-serif);
    font-size: 20px;
    line-height: var(--lh-relaxed);
    color: var(--color-ink);
    margin: 0 auto var(--space-8);
    text-wrap: pretty;
}

/* Questions — block-editor h2. Number + interviewer speaker label
   stack above the heading text as absolutely-positioned pseudo-elements
   in a reserved padding-top band. The h2 itself stays a block container
   so any inline children (e.g. an <a> wrapping part of the question)
   flow with surrounding text. An earlier grid-based version blockified
   inline <a> children into their own grid rows. */
.qa-interview .entry-content > h2 {
    counter-increment: qa-counter;
    position: relative;
    /* 11px number + 8px gap + 11px speaker + 8px gap = 38px reserved
       above the heading text for the two labels. */
    padding-top: 38px;
    max-width: var(--qa-col-narrow);
    font-family: var(--reading-display);
    font-weight: var(--fw-bold);
    font-size: 22px;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--color-deep-rough);
    /* Per design spec: 44px above the pair, 18px between question and
       answer. Inlined because neither matches a global spacing token.
       `auto` left/right centers the narrow column inside the wider
       entry-content. */
    margin: 44px auto 18px;
    text-wrap: pretty;
}

.qa-interview .entry-content > h2::before {
    content: counter(qa-counter, decimal-leading-zero);
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--fw-regular);
    line-height: 1;
    letter-spacing: 0.08em;
    color: var(--color-cart-path);
    text-transform: none;
}

.qa-interview .entry-content > h2::after {
    /* Falls back to no pseudo when --qa-interviewer-label is unset
       (var() resolves invalid → content reverts to normal → no box). */
    content: var(--qa-interviewer-label);
    position: absolute;
    top: 19px; /* 11px number + 8px gap */
    left: 0;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: var(--fw-bold);
    line-height: 1;
    letter-spacing: 0.22em;
    color: var(--color-fairway);
    text-transform: uppercase;
}

/* Answers — every paragraph that follows ANY h2. The first paragraph
   after each h2 carries the interviewee-speaker label above it; later
   paragraphs in the same answer get no label (adjacent-sibling only). */
.qa-interview .entry-content > h2 ~ p {
    max-width: var(--qa-col-narrow);
    font-family: var(--reading-serif);
    font-size: 18px;
    line-height: var(--lh-relaxed);
    color: var(--color-ink);
    margin: 0 auto var(--space-4);
    text-wrap: pretty;
}

.qa-interview .entry-content > h2 + p::before {
    content: var(--qa-interviewee-label);
    display: block;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: var(--fw-bold);
    line-height: 1;
    letter-spacing: 0.22em;
    color: var(--color-flag-red);
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}

.qa-interview .entry-content > h2 ~ p em {
    font-style: italic;
}

/* Inline links inside answers — fairway green, sand-trap
   underline that thickens to fairway on hover/focus. */
.qa-interview .entry-content a {
    color: var(--color-fairway);
    text-decoration: underline;
    text-decoration-color: var(--color-sand-trap);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
    transition: color var(--transition-fast),
        text-decoration-color var(--transition-fast);
}

.qa-interview .entry-content a:hover {
    color: var(--color-rough);
    text-decoration-color: var(--color-fairway);
}

.qa-interview a:focus-visible {
    outline: var(--border-thick) solid var(--color-border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Pullquote — magazine-style block. Specificity 0,3,1 beats the
   global .wp-block-pullquote rule in theme.css (0,1,0). */
.qa-interview .entry-content > .wp-block-pullquote {
    max-width: var(--qa-col-narrow);
    margin: var(--space-16) auto;
    padding: 0 0 0 var(--space-10);
    border: 0;
    border-left: 4px solid var(--color-fairway);
    background: transparent;
    position: relative;
    quotes: '"' '"' "'" "'";
}

.qa-interview .entry-content > .wp-block-pullquote::before {
    content: "\201C";
    position: absolute;
    left: -8px;
    top: -64px;
    font-family: var(--reading-display);
    font-size: 200px;
    line-height: 1;
    font-weight: 900;
    color: var(--color-fairway);
    opacity: 0.15;
    pointer-events: none;
}

.qa-interview .entry-content > .wp-block-pullquote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    position: relative;
}

.qa-interview .entry-content > .wp-block-pullquote blockquote p {
    font-family: var(--reading-display);
    font-style: italic;
    font-weight: var(--fw-regular);
    font-size: clamp(24px, 3.4vw, 36px);
    line-height: 1.22;
    color: var(--color-deep-rough);
    margin: 0 0 var(--space-4);
    text-wrap: balance;
}

.qa-interview .entry-content > .wp-block-pullquote blockquote p:first-of-type::before {
    content: open-quote;
}

.qa-interview .entry-content > .wp-block-pullquote blockquote p:last-of-type::after {
    content: close-quote;
}

.qa-interview .entry-content > .wp-block-pullquote cite,
.qa-interview .entry-content > .wp-block-pullquote .wp-block-pullquote__citation {
    display: block;
    font-family: var(--font-ui);
    font-style: normal;
    font-size: 12px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-cart-path);
}

/* ── Inline image patterns ─────────────────────────────────────
   Three editorial layouts driven by block-editor output:

   - Image block, no special alignment → narrow inline (reading-column)
   - Image block with "Wide" or "Full" alignment → photo-fullbleed:
       16:9 cropped image at article width (1240px)
   - Gallery block with 2 columns → photo-pair:
       2-up 4:3 images at article width, 24px gutter
   - Gallery block with 3 columns → photo-triptych:
       3-up 4:3 images at article width, 16px gutter

   Editor convention for captions: type the leading label as bold
   ("**Then** Caption text…") so the rendered <strong> picks up the
   uppercase-letterspaced label styling and the trailing text falls
   through as plain caption copy.
   ───────────────────────────────────────────────────────────── */

/* Default inline image (no wide/full alignment) — stays in the reading
   column with its prior quiet treatment. */
.qa-interview .entry-content > figure.wp-block-image:not(.alignwide):not(.alignfull) {
    max-width: var(--qa-col-narrow);
    margin: var(--space-10) auto;
}

.qa-interview .entry-content > figure.wp-block-image:not(.alignwide):not(.alignfull) img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
    border: var(--border-base) solid var(--color-border);
}

/* Photo fullbleed — wide/full-aligned image. 16:9 cropped, article width. */
.qa-interview .entry-content > figure.wp-block-image.alignwide,
.qa-interview .entry-content > figure.wp-block-image.alignfull {
    margin: 64px auto;
    max-width: 100%;
}

.qa-interview .entry-content > figure.wp-block-image.alignwide img,
.qa-interview .entry-content > figure.wp-block-image.alignfull img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0;
    border: var(--border-base) solid var(--color-border);
}

/* Photo pair / triptych — gallery blocks. WP's modern gallery renders
   an outer <figure class="wp-block-gallery has-nested-images columns-N
   is-layout-flex"> with nested <figure class="wp-block-image">
   children. We override WP's default flex layout (which produces
   inconsistent column widths for `columns-default`) with CSS Grid,
   driven either by an explicit `columns-N` class on the gallery or
   by child count via :has(). Children get width:100% to defeat WP's
   per-column width: calc(...) that would otherwise shrink each image
   to ~33% of its grid cell. */
.qa-interview .entry-content > .wp-block-gallery.has-nested-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin: 56px auto;
    max-width: 100%;
}

/* Triptych: 3 explicit columns or 3+ images in a columns-default
   gallery. Tighter 16px gap keeps three images comfortably on one row. */
.qa-interview .entry-content > .wp-block-gallery.has-nested-images.columns-3,
.qa-interview .entry-content > .wp-block-gallery.has-nested-images:has(.wp-block-image:nth-child(3)) {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

/* WP block-library makes each gallery figure a `display: flex;
   flex-direction: column; justify-content: center` container — that
   collapses the image to 0 height in flex math when the figcaption
   has `flex-basis: 100%`. Reset to block layout so the spec's normal
   img + figcaption stacking works. Width override needs `!important`
   to beat WP's child-count-laddered `:first-child:nth-last-child(N)`
   width rules (specificity 1,6,1). */
.qa-interview .entry-content > .wp-block-gallery.has-nested-images .wp-block-image {
    display: block;
    margin: 0;
    width: 100% !important;
}

/* WP block-library generates a ::before pseudo on every gallery figure
   that has a figcaption, with `backdrop-filter: blur(3px)` — meant to
   soften the image behind WP's old absolute-positioned caption overlay
   (the dark gradient I overrode earlier). With captions now in normal
   flow below the image, that backdrop-filter blur creates a soft band
   on the lower portion of every image. Disable the pseudo entirely. */
.qa-interview .entry-content > .wp-block-gallery figure.wp-block-image::before {
    content: none;
    backdrop-filter: none;
}

/* Gallery image: 4:3 cropped, sand-trap bordered, no shadow.
   `.is-cropped` is on by default and adds a 1,4,2-specificity rule
   `height: 100%; width: 100%` that stretches the img to fill its
   figure regardless of aspect-ratio. `!important` settles those — the
   intent is unambiguous (this template enforces a strict crop, never
   defer to image-intrinsic dimensions). */
.qa-interview .entry-content > .wp-block-gallery figure.wp-block-image > img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0;
    border: var(--border-base) solid var(--color-border);
    box-shadow: none;
}

/* Shared caption styling — applies to fullbleed and to images inside
   pair/triptych galleries. Labeled inline row, sand-trap left rule.
   The override of `position`, `inset`, `background`, and `text-align`
   pulls the caption out of WP's absolutely-positioned image overlay
   (a dark gradient at the bottom of the image) and renders it as a
   normal block beneath the image. */
.qa-interview .entry-content > figure.wp-block-image figcaption,
.qa-interview .entry-content > .wp-block-gallery .wp-block-image figcaption {
    position: static;
    inset: auto;
    margin: var(--space-2) 0 0;
    padding: 2px 0 2px var(--space-3);
    background: none;
    border-left: var(--border-thick) solid var(--color-sand-trap);
    font-family: var(--font-ui);
    font-size: 12px;
    line-height: var(--lh-snug);
    letter-spacing: 0.04em;
    text-align: left;
    color: var(--color-cart-path);
    /* WP applies `text-shadow: 0 0 1.5px black` to gallery captions
       as a legibility aid for the original white-on-image overlay
       style. With the caption below the image now, the shadow just
       blurs the text — kill it. */
    text-shadow: none;
}

.qa-interview .entry-content > figure.wp-block-image figcaption strong,
.qa-interview .entry-content > .wp-block-gallery .wp-block-image figcaption strong {
    margin-right: var(--space-2);
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-deep-rough);
}

/* ── Editor's note ─────────────────────────────────────────────
   Cream scorecard panel with a flag-red left rule and a CSS-generated
   "Editor's note" label. Editor wraps the note prose + any embed in a
   Group block and sets Advanced → Additional CSS class to
   `editors-note`. WP renders that as <div class="wp-block-group
   editors-note">… so we target the compound selector. The embedded
   tweet inside gets a narrower max-width to match the mockup. */
.qa-interview .entry-content > .wp-block-group.editors-note {
    max-width: var(--qa-col-narrow);
    margin: 44px auto;
    padding: var(--space-6) var(--space-7);
    background: var(--color-scorecard);
    border-left: 4px solid var(--color-flag-red);
    border-radius: 2px;
    font-family: var(--reading-serif);
    font-size: 16px;
    line-height: 1.55;
    color: var(--color-ink);
}

.qa-interview .entry-content > .wp-block-group.editors-note::before {
    content: "Editor's note";
    display: block;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-flag-red);
    margin-bottom: var(--space-2);
}

.qa-interview .entry-content > .wp-block-group.editors-note p {
    max-width: none;
    margin: 0 0 0.6em;
    font: inherit;
    color: inherit;
}

.qa-interview .entry-content > .wp-block-group.editors-note p:last-child {
    margin-bottom: 0;
}

.qa-interview .entry-content > .wp-block-group.editors-note a {
    color: var(--color-fairway);
}

.qa-interview .entry-content > .wp-block-group.editors-note .wp-block-embed {
    margin: var(--space-5) 0 0;
    max-width: 550px;
}

.qa-interview .entry-content > .wp-block-group.editors-note .twitter-tweet {
    margin: 0 !important;
}

/* ── Responsive ───────────────────────────────────────────────
   Project breakpoints: --bp-md 640px (tablet), --bp-lg 1024px
   (desktop). Custom properties can't be used inside @media, so
   the literal pixel values below mirror the tokens.
   ─────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
    .qa-interview__hero {
        padding: var(--space-16) var(--content-padding) var(--space-12);
    }

    /* 4-cell meta strip on tablet+. */
    .qa-interview__meta {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .qa-interview .entry-content {
        padding-left: var(--content-padding);
        padding-right: var(--content-padding);
    }

    .qa-interview .entry-content > h2 {
        font-size: 24px;
    }
}

@media (min-width: 901px) {
    /* Hero becomes a 2-column grid: text on the left, slightly narrower
       than the image on the right. align-items: end keeps the bottom
       of the image flush with the bottom of the meta strip. */
    .qa-interview__hero {
        display: grid;
        grid-template-columns: 1fr 1.05fr;
        gap: var(--space-12);
        align-items: end;
    }

    .qa-interview__hero-text {
        padding-bottom: var(--space-2);
    }
}

@media (min-width: 1024px) {
    .qa-interview__hero {
        padding-top: var(--space-20);
        padding-bottom: var(--space-16);
    }

    .qa-interview__deck {
        margin-bottom: var(--space-10);
    }
}

@media (max-width: 900px) {
    /* Pair and triptych collapse to single-column 16:9 on mobile —
       stacked landscape rectangles read better than tiny 4:3 squares. */
    .qa-interview .entry-content > .wp-block-gallery.has-nested-images {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .qa-interview .entry-content > .wp-block-gallery.has-nested-images .wp-block-image img {
        aspect-ratio: 16 / 9;
    }
}

/* ── Reduced motion ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .qa-interview .entry-content a {
        transition: none;
    }
}