/**
 * Interviews channel + article — frontend styles (v2, 0.4.0).
 *
 * v2 (2026-09-04, owner's review of the live channel): the type scale is
 * lifted one step (base 17 to match the theme's own body size — v1's 16px
 * sat below every other page on the site); the byline face is a CIRCLE
 * while portraits stay rectangular, so a card never shows the same
 * photograph twice in the same shape; the archive total is gone from the
 * masthead (the one 800 with it); the Start-here strip is a reading list
 * rather than a second face grid above the wall; the wall is 8-up.
 *
 * Sibling of the funding channel's funding-page-v3.css: same site, one
 * system, same tokens re-namespaced. Read that file's header for the
 * research behind the shared decisions (display weight 600, hairlines
 * instead of cards, 1264 shell, one starved accent).
 *
 * What Interviews adds, and why:
 *
 *  - A SECOND FACE. Sans is the publication's voice (nav, titles,
 *    questions); serif is the interviewee's (answers, deks, pull quotes).
 *    That role split IS the design — an interview page where question and
 *    answer set in the same face reads as a transcript, not a publication.
 *  - 800 appears EXACTLY ONCE: the archive total in the channel masthead.
 *    Funding reserves 800 for deal amounts; interviews have one number
 *    worth that weight and it is the size of the archive.
 *  - Every row that names a person carries that person's face, grayscale,
 *    colour on hover. The faces are the channel's inventory.
 *
 * FILENAME CARRIES THE VERSION. Cloudflare on this site does not vary
 * cache on the `?ver=` query string (documented at length in the funding
 * CSS/CLAUDE.md). Bumping AIPR_IV_VERSION will NOT bust this file at the
 * edge — ship a new filename (interviews-v2.css) and update the enqueue.
 *
 * Scope: everything under .aipr-iv. bimber styles bare h1-h4/p/ul/li/a/
 * blockquote/figure/img aggressively, so every element carries a class
 * and the reset below is not optional.
 * Spacing: 8px base (4/8/12/16/20/24/28/32/40/56/64).
 * No dark-mode block — this renders inside the site's light theme only.
 */

/* ─── Type ───────────────────────────────────────────────────
   Self-hosted, never hotlinked (privacy + render-block). Source Serif 4
   ships as a wght 400-600 variable face; the italic is a separate file
   because the interviewee's voice needs a real italic, not a synthesised
   oblique (the pull quote and the fixed statement line are both italic). */

@font-face {
    font-family: 'AIPR Inter Tight';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-tight-400.woff2') format('woff2');
}
@font-face {
    font-family: 'AIPR Inter Tight';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-tight-600.woff2') format('woff2');
}
@font-face {
    font-family: 'AIPR Inter Tight';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/inter-tight-800.woff2') format('woff2');
}
@font-face {
    font-family: 'AIPR Source Serif';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/source-serif-4.woff2') format('woff2-variations'),
         url('../fonts/source-serif-4.woff2') format('woff2');
}
@font-face {
    font-family: 'AIPR Source Serif';
    font-style: italic;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/source-serif-4-italic.woff2') format('woff2-variations'),
         url('../fonts/source-serif-4-italic.woff2') format('woff2');
}

/* ─── Tokens + shell ─────────────────────────────────────── */

.aipr-iv {
    /* The page ground. bimber paints the content area pure white, so the
       one place that has to match it — the pinned tab that scrolling tabs
       pass under — must be white too. v1 used a warm off-white here and it
       showed as a pale rectangle behind "Start here". */
    --iv-paper: #ffffff;
    --iv-ink: #0e0e12;
    --iv-body: #212127;
    --iv-mute: #62626e;
    --iv-faint: #9a9aa6;
    --iv-line: #e6e4de;
    --iv-rule: #0e0e12;
    --iv-accent: #6c5ce7;
    --iv-accent-tint: #efedfc;
    --iv-band: #131318;
    --iv-band-ink: #f5f4fb;
    --iv-band-mute: #a3a2b3;
    --iv-band-line: rgba(255, 255, 255, 0.14);

    --iv-sans: 'AIPR Inter Tight', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
    --iv-serif: 'AIPR Source Serif', ui-serif, 'New York', Georgia, 'Times New Roman', serif;

    font-family: var(--iv-sans);
    /* 17, not 16: the theme sets body text at 17px and the channel read
       visibly smaller than the rest of the site (owner, 2026-09-04). */
    font-size: 17px;
    line-height: 1.5;
    /* width:100% is load-bearing — the theme's #page wrapper is a column
       flex container, where an auto-width child with auto side margins
       shrinks to its content instead of stretching (the funding channel's
       1.32.2 bug). */
    width: 100%;
    max-width: 1264px;
    margin: 0 auto;
    padding: 0 32px 72px;
    box-sizing: border-box;
    color: var(--iv-body);
    -webkit-font-smoothing: antialiased;
}

.aipr-iv *,
.aipr-iv *::before,
.aipr-iv *::after {
    box-sizing: border-box;
}

/* Defensive reset against bimber's content styles. :where() holds
   specificity at (0,1,0) so single-class component rules below win on
   source order — a plain `.aipr-iv h2` reset at (0,1,1) would silently
   kill every component margin. */
.aipr-iv :where(h1, h2, h3, h4, h5, h6, p, ol, ul, dl, dt, dd, figure, blockquote) {
    margin: 0;
    padding: 0;
}
.aipr-iv :where(ol, ul) {
    list-style: none;
}
.aipr-iv :where(blockquote) {
    border: none;
    quotes: none;
    background: none;
    font-style: normal;
}
.aipr-iv :where(blockquote)::before,
.aipr-iv :where(blockquote)::after {
    content: none;
}
.aipr-iv a {
    color: inherit;
    text-decoration: none;
    border: none;
    box-shadow: none;
}
.aipr-iv a:focus-visible,
.aipr-iv button:focus-visible {
    outline: 2px solid var(--iv-accent);
    outline-offset: 3px;
    border-radius: 2px;
}
.aipr-iv img {
    margin: 0;
    max-width: 100%;
    height: auto;
    display: block;
}
.aipr-iv button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.aipr-iv hr {
    border: none;
    border-top: 1px solid var(--iv-line);
    margin: 0;
}

/* Screen-reader-only, for the labels that carry structure the eye reads
   from position alone. */
.aipr-iv-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Masthead ───────────────────────────────────────────── */

.aipr-iv-masthead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
    padding: 44px 0 30px;
}
.aipr-iv-masthead-main {
    min-width: 0;
}
.aipr-iv-h1 {
    font-size: clamp(38px, 4.4vw, 56px);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 0.98;
    color: var(--iv-ink);
    text-wrap: balance;
}
/* Serif dek against the sans display face — the same strict role
   separation the funding masthead uses, and here it also announces the
   serif as the interviewee's voice before the first answer. */
.aipr-iv-dek {
    font-family: var(--iv-serif);
    font-size: 19px;
    line-height: 1.5;
    color: var(--iv-mute);
    max-width: 600px;
    margin-top: 14px;
    text-wrap: pretty;
}
.aipr-iv-count {
    flex: 0 0 auto;
    text-align: right;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--iv-mute);
    padding-bottom: 6px;
}
/* No archive total any more. v1 set the count of interviews at 52px/800
   in the masthead; the owner's read (2026-09-04) was that a headline
   number is what a data product does, and a publication does not count
   its own articles on the section front. The rubric's "No. 96" still
   tells anyone who cares. */
.aipr-iv-count-link {
    display: inline-block;
    margin-top: 4px;
    font-weight: 600;
    color: var(--iv-accent);
    white-space: nowrap;
}
.aipr-iv-count-link:hover {
    color: var(--iv-ink);
}

/* ─── Tab nav ────────────────────────────────────────────────
   Short sector labels only. The row is sized to fit 1200px of usable
   width (1264 shell − 32px padding each side) with ZERO desktop
   horizontal scroll; scrolling is the mobile behaviour, deliberately.
   Before adding a tab, re-measure — that is the mistake that makes a
   chip look like it fits. "Start here" is pinned OUTSIDE the scroller:
   margin-left:auto does nothing once a flex row overflows, and this is
   the channel's permanent entry point for a first-time reader. */

.aipr-iv-nav {
    border-top: 2px solid var(--iv-rule);
    border-bottom: 1px solid var(--iv-line);
    display: flex;
    align-items: stretch;
}
/* gap 20, not 24 as the funding row uses. Usable width is 1200px (the
   1264 shell minus 32px of padding each side). The nine tabs — Latest
   plus the eight SHORT sector labels — total ~933px of text at
   14.5px/600, the eight gaps add 160, and the pinned "Start here" costs
   ~98 including its 24px lead padding: ~1191. At 24px gaps that becomes
   ~1223 and the desktop row starts scrolling, which is the one thing
   this nav is sized to prevent. Re-run the arithmetic before adding or
   lengthening a tab, and measure against 1200 — not 1264. */
.aipr-iv-nav-scroll {
    display: flex;
    align-items: stretch;
    gap: 20px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.aipr-iv-nav-scroll::-webkit-scrollbar {
    display: none;
}
.aipr-iv-nav-tab {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--iv-mute);
    padding: 13px 0 12px;
    white-space: nowrap;
    transition: color 120ms ease;
}
.aipr-iv-nav-tab:hover {
    color: var(--iv-ink);
}
/* Active state is a text-decoration, not a border: it hugs the text,
   adds zero box height (nothing for the overflow-x scroller to wobble
   over), and the two-class selector at (0,2,0) outranks the
   `.aipr-iv a` reset's text-decoration:none at (0,1,1). */
.aipr-iv-nav-tab.is-active {
    color: var(--iv-ink);
    text-decoration: underline;
    text-decoration-color: var(--iv-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}
.aipr-iv-nav-tab--alt {
    flex: 0 0 auto;
    margin-left: 20px;
    padding-left: 20px;
    color: var(--iv-accent);
    background: var(--iv-paper);
    /* A hairline marks it as the row's one destination, not its ninth
       facet; the shadow is the soft hand-off where scrolled tabs pass
       under it on narrow screens. */
    border-left: 1px solid var(--iv-line);
    box-shadow: -16px 0 14px -10px var(--iv-paper);
}
.aipr-iv-nav-tab--alt:hover {
    color: var(--iv-ink);
}

/* ─── Rubric line (No. N · Sector · Date) ─────────────────── */

.aipr-iv-rub {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--iv-faint);
}
.aipr-iv-rub-no {
    color: var(--iv-ink);
    font-variant-numeric: tabular-nums;
}
.aipr-iv-rub a {
    color: var(--iv-mute);
    transition: color 120ms ease;
}
.aipr-iv-rub a:hover {
    color: var(--iv-accent);
}
.aipr-iv-rub-sep {
    color: var(--iv-line);
}

/* ─── Faces ──────────────────────────────────────────────────
   One face component, three sizes. Grayscale by default and colour on
   hover/focus is the channel's signature interaction; it also makes 27
   portraits from 27 different photographers read as one wall. */

.aipr-iv-face {
    display: block;
    flex: 0 0 auto;
    width: 44px;
    aspect-ratio: 1 / 1.15;
    overflow: hidden;
    border-radius: 2px;
    background: var(--iv-accent-tint);
}
.aipr-iv-face-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
    filter: grayscale(1);
    transition: filter 250ms ease;
}
.aipr-iv-face:hover .aipr-iv-face-img,
.aipr-iv-face:focus-visible .aipr-iv-face-img,
a:hover .aipr-iv-face-img,
a:focus-visible .aipr-iv-face-img {
    filter: none;
}
/* Initials stand in for a person with no portrait. Never an empty box:
   a hole in a face grid reads as a broken image, not as missing data. */
.aipr-iv-face--none {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--iv-accent);
    background: var(--iv-accent-tint);
}
.aipr-iv-face--md {
    width: 64px;
}
.aipr-iv-face--lg {
    width: 100%;
}

/* Person line: face + name + byline, used in every context that names
   somebody. The face here is a CIRCLE. Portraits (the wall, the row's
   left column, the person page) are rectangular photographs; the byline
   mark is an identity token, and giving it a different shape is what
   stops a card that carries both from reading as the same picture twice.
   It is also the convention every byline on the web uses (Bloomberg, FT,
   Axios, The Verge, Substack), so the reader parses it without thinking. */
.aipr-iv-who {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.aipr-iv-who .aipr-iv-face {
    width: 44px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}
.aipr-iv-who .aipr-iv-face-img {
    object-position: 50% 12%;
}
.aipr-iv-who-text {
    min-width: 0;
    font-size: 15.5px;
    line-height: 1.4;
    color: var(--iv-mute);
}
.aipr-iv-who-name {
    font-weight: 600;
    color: var(--iv-ink);
}
a.aipr-iv-who-name:hover {
    color: var(--iv-accent);
}

/* ─── Section heads ──────────────────────────────────────── */

.aipr-iv-sechead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--iv-line);
}
.aipr-iv-sechead-h {
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--iv-ink);
}
.aipr-iv-sechead-meta {
    font-size: 14px;
    color: var(--iv-faint);
    text-align: right;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.aipr-iv-sechead-meta a {
    font-weight: 600;
    color: var(--iv-mute);
    white-space: nowrap;
    transition: color 120ms ease;
}
.aipr-iv-sechead-meta a:hover {
    color: var(--iv-accent);
}

/* ─── Lead ───────────────────────────────────────────────── */

.aipr-iv-lead {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5.4fr);
    gap: 48px;
    align-items: start;
    padding: 38px 0 44px;
}
.aipr-iv-lead-title {
    font-size: clamp(30px, 3.1vw, 42px);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--iv-ink);
    margin: 12px 0 18px;
    text-wrap: balance;
}
.aipr-iv-lead-title a {
    transition: color 120ms ease;
}
.aipr-iv-lead-title a:hover {
    color: var(--iv-accent);
}
/* The lead's centre of gravity: the interviewee's sentence, in their
   face, above the person line. No decorative quote glyph in CSS — the
   text carries its own curly quotes. */
.aipr-iv-lead-quote {
    font-family: var(--iv-serif);
    font-size: 23px;
    line-height: 1.45;
    color: var(--iv-body);
    margin-bottom: 22px;
    max-width: 44ch;
    text-wrap: pretty;
}
.aipr-iv-lead-media {
    display: block;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    border-radius: 2px;
    background: #f2f2f6;
}
.aipr-iv-lead-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 25%;
}
.aipr-iv-credit {
    font-size: 12px;
    line-height: 1.5;
    color: var(--iv-faint);
    margin-top: 8px;
}

/* ─── Start here strip ───────────────────────────────────────
   A READING LIST, not a face grid. v1 rendered the eight picks as eight
   portraits on a tinted ground directly above the dark wall of portraits
   — the same people, the same crop, the same size, twice on one screen
   (owner, 2026-09-04). Here each pick is a numbered line: ordinal, byline
   circle, the interview's title as the click target, role and company
   under it. The wall below keeps the photographs. */

.aipr-iv-picks {
    background: var(--iv-accent-tint);
    border-radius: 3px;
    padding: 26px 28px 28px;
    margin-bottom: 8px;
}
.aipr-iv-picks .aipr-iv-sechead {
    border-bottom-color: rgba(14, 14, 18, 0.1);
}
.aipr-iv-start-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 32px;
    margin-top: 12px;
}
.aipr-iv-start-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 0 14px;
    border-bottom: 1px solid rgba(14, 14, 18, 0.08);
    min-width: 0;
}
/* Last row of the grid: no rule under it. 4-up on desktop, 2-up on
   tablet, 1-up on phones — each breakpoint below re-states this. */
.aipr-iv-start-grid > .aipr-iv-start-item:nth-last-child(-n + 4) {
    border-bottom: none;
}
.aipr-iv-start-ord {
    flex: 0 0 auto;
    width: 22px;
    padding-top: 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--iv-accent);
    font-variant-numeric: tabular-nums;
}
.aipr-iv-start-item .aipr-iv-face {
    width: 44px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}
.aipr-iv-start-item .aipr-iv-face-img {
    object-position: 50% 12%;
}
.aipr-iv-start-body {
    display: block;
    min-width: 0;
}
/* Title first: house-style titles open with the name, so a name line
   above the title would print it twice. */
.aipr-iv-start-title {
    display: block;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--iv-ink);
    text-wrap: pretty;
    transition: color 120ms ease;
}
.aipr-iv-start-item:hover .aipr-iv-start-title {
    color: var(--iv-accent);
}
.aipr-iv-start-meta {
    display: block;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--iv-mute);
    margin-top: 4px;
}

/* Face grid — still used by the sector page's "Who we interviewed". */
.aipr-iv-picks-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.aipr-iv-pick {
    display: block;
    min-width: 0;
}
.aipr-iv-pick .aipr-iv-face {
    width: 100%;
}
.aipr-iv-pick-name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--iv-ink);
    margin-top: 10px;
    transition: color 120ms ease;
}
.aipr-iv-pick:hover .aipr-iv-pick-name {
    color: var(--iv-accent);
}
.aipr-iv-pick-meta {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: var(--iv-mute);
    margin-top: 2px;
}

/* ─── The people wall (dark band, full-bleed) ────────────────
   Full-bleed WITHOUT layout overflow: a huge box-shadow spread paints
   past the element (shadows don't affect layout, so no scrollbar) and
   clip-path stops that paint bleeding vertically. `width:100vw` plus
   negative margins would overflow by the scrollbar width and give the
   page a horizontal scrollbar inside the theme wrapper. */

.aipr-iv-wall {
    background: var(--iv-band);
    color: var(--iv-band-ink);
    padding: 40px 0 36px;
    /* 56 below, not 8: the next section's heading sat on the band's edge. */
    margin: 48px 0 56px;
}
@supports (clip-path: inset(0 -100vmax)) {
    .aipr-iv-wall {
        box-shadow: 0 0 0 100vmax var(--iv-band);
        clip-path: inset(0 -100vmax);
    }
}
.aipr-iv-wall .aipr-iv-sechead {
    border-bottom-color: var(--iv-band-line);
}
.aipr-iv-wall .aipr-iv-sechead-h {
    color: var(--iv-band-ink);
}
.aipr-iv-wall .aipr-iv-sechead-meta {
    color: var(--iv-band-mute);
}
.aipr-iv-wall-grid {
    display: grid;
    /* 8-up (~143px faces at 1200), was 9-up (~124px). Three rows of eight
       is the wall's resting state; the template's visible count matches. */
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px;
}
.aipr-iv-wall-face {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1.15;
    overflow: hidden;
    border-radius: 2px;
    background: #23222b;
    min-width: 0;
}
.aipr-iv-wall-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
    filter: grayscale(1);
    transition: filter 250ms ease, transform 250ms ease;
}
.aipr-iv-wall-face:hover img,
.aipr-iv-wall-face:focus-visible img {
    filter: none;
}
/* Caption sits ON the face, bottom-aligned, over a gradient scrim — a
   caption below the image would double the grid's height and turn a wall
   into a list. */
.aipr-iv-wall-cap {
    position: absolute;
    inset: auto 0 0 0;
    padding: 22px 7px 7px;
    background: linear-gradient(to top, rgba(9, 9, 12, 0.92), rgba(9, 9, 12, 0));
    font-size: 12.5px;
    line-height: 1.25;
}
.aipr-iv-wall-name {
    display: block;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aipr-iv-wall-co {
    display: block;
    color: var(--iv-band-mute);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aipr-iv-wall-face.is-hidden {
    display: none;
}
.aipr-iv-wall.is-expanded .aipr-iv-wall-face.is-hidden {
    display: block;
}
.aipr-iv-wall-foot {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
    font-size: 14px;
    color: var(--iv-band-mute);
}
.aipr-iv-wall-more {
    font-weight: 600;
    color: #c0b5ff;
    transition: color 120ms ease;
}
.aipr-iv-wall-more:hover {
    color: #fff;
}

/* ─── Quote river ────────────────────────────────────────────
   Cards are separated by hairline rules only. No borders, no shadows —
   the whole premium tier does it this way and v2 of the funding channel
   proved the alternative reads mass-market. The quote is the card: it is
   the largest text in it, and the headline sits under it, smaller and
   muted, as the thing you read second. */

.aipr-iv-river {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 40px;
    margin-top: 26px;
}
.aipr-iv-card {
    display: flex;
    flex-direction: column;
    padding: 26px 0;
    border-top: 1px solid var(--iv-line);
    min-width: 0;
}
/* The first row's cards already sit under the section rule. */
.aipr-iv-river > .aipr-iv-card:nth-child(-n + 3) {
    border-top: none;
    padding-top: 4px;
}
.aipr-iv-card-quote {
    font-family: var(--iv-serif);
    font-size: 21px;
    line-height: 1.42;
    color: var(--iv-ink);
    margin: 12px 0 12px;
    text-wrap: pretty;
}
.aipr-iv-card-quote a {
    transition: color 120ms ease;
}
.aipr-iv-card-quote a:hover {
    color: var(--iv-accent);
}
.aipr-iv-card-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--iv-mute);
    margin-bottom: 16px;
    transition: color 120ms ease;
}
.aipr-iv-card:hover .aipr-iv-card-title {
    color: var(--iv-body);
}
.aipr-iv-card .aipr-iv-who {
    margin-top: auto;
}

/* ─── Sector sections ────────────────────────────────────── */

.aipr-iv-sec {
    padding-top: 44px;
}
.aipr-iv-sec-dek {
    font-family: var(--iv-serif);
    font-size: 17.5px;
    line-height: 1.5;
    color: var(--iv-mute);
    margin-top: 14px;
    max-width: 70ch;
    text-wrap: pretty;
}
.aipr-iv-sec-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 40px;
    margin-top: 6px;
}
.aipr-iv-sec-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--iv-line);
    min-width: 0;
}
.aipr-iv-sec-item-body {
    display: block;
    min-width: 0;
}
.aipr-iv-sec-item-title {
    display: block;
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--iv-ink);
    transition: color 120ms ease;
}
.aipr-iv-sec-item:hover .aipr-iv-sec-item-title {
    color: var(--iv-accent);
}
.aipr-iv-sec-item-meta {
    display: block;
    font-size: 13px;
    color: var(--iv-faint);
    margin-top: 4px;
}

/* ─── Channel footer strip ───────────────────────────────── */

.aipr-iv-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 56px;
    padding-top: 20px;
    border-top: 2px solid var(--iv-rule);
    font-size: 14.5px;
    color: var(--iv-mute);
}
.aipr-iv-foot b {
    font-weight: 600;
    color: var(--iv-ink);
}
.aipr-iv-foot a {
    font-weight: 600;
    color: var(--iv-accent);
}
.aipr-iv-foot a:hover {
    color: var(--iv-ink);
}
.aipr-iv-foot-totals {
    color: var(--iv-faint);
    font-variant-numeric: tabular-nums;
}

/* ─── Plain listings (sector / start-here / person) ──────── */

.aipr-iv-list {
    margin-top: 8px;
}
.aipr-iv-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 168px;
    gap: 24px;
    align-items: start;
    padding: 24px 0;
    border-bottom: 1px solid var(--iv-line);
}
/* One face per row. The left column is the portrait; the byline under
   the quote is then text only (the template passes with_face = false).
   Two variants: --ordinal replaces the portrait with the reading-list
   position (Start here), and --plain has no left column at all (the
   person page, where every row would repeat the header's portrait). */
.aipr-iv-row .aipr-iv-face--md {
    width: 72px;
}
.aipr-iv-row-ord {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--iv-accent);
    font-variant-numeric: tabular-nums;
    padding-top: 22px;
}
.aipr-iv-row--plain {
    grid-template-columns: minmax(0, 1fr) 168px;
}
.aipr-iv-row-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.28;
    color: var(--iv-ink);
    margin: 6px 0 8px;
}
.aipr-iv-row-title a {
    transition: color 120ms ease;
}
.aipr-iv-row-title a:hover {
    color: var(--iv-accent);
}
.aipr-iv-row-quote {
    font-family: var(--iv-serif);
    font-size: 18px;
    line-height: 1.5;
    color: var(--iv-mute);
    margin-bottom: 12px;
    max-width: 62ch;
    text-wrap: pretty;
}
.aipr-iv-row-meta {
    text-align: right;
    font-size: 14px;
    color: var(--iv-faint);
    line-height: 1.5;
    padding-top: 4px;
}
.aipr-iv-row-meta a {
    color: var(--iv-mute);
    font-weight: 600;
}
.aipr-iv-row-meta a:hover {
    color: var(--iv-accent);
}

.aipr-iv-empty {
    font-size: 16px;
    color: var(--iv-mute);
    padding: 40px 0;
}

/* ─── People index ───────────────────────────────────────── */

.aipr-iv-az {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--iv-line);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--iv-mute);
}
.aipr-iv-az a:hover {
    color: var(--iv-accent);
}
.aipr-iv-group {
    padding-top: 34px;
    scroll-margin-top: 24px;
}
.aipr-iv-group-letter {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--iv-faint);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--iv-line);
}
.aipr-iv-people-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px 20px;
    margin-top: 22px;
}
.aipr-iv-person-cell {
    display: block;
    min-width: 0;
}
.aipr-iv-person-cell .aipr-iv-face {
    width: 100%;
}
.aipr-iv-person-cell-name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--iv-ink);
    margin-top: 10px;
    transition: color 120ms ease;
}
.aipr-iv-person-cell:hover .aipr-iv-person-cell-name {
    color: var(--iv-accent);
}
.aipr-iv-person-cell-meta {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: var(--iv-mute);
    margin-top: 2px;
}

/* ─── Person page head ───────────────────────────────────── */

.aipr-iv-person-head {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    padding: 40px 0 36px;
}
.aipr-iv-person-portrait {
    width: 200px;
    aspect-ratio: 1 / 1.15;
    overflow: hidden;
    border-radius: 3px;
    background: var(--iv-accent-tint);
}
.aipr-iv-person-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
    filter: grayscale(1);
    transition: filter 250ms ease;
}
.aipr-iv-person-head:hover .aipr-iv-person-portrait img {
    filter: none;
}
.aipr-iv-person-role {
    font-family: var(--iv-serif);
    font-size: 19px;
    line-height: 1.5;
    color: var(--iv-mute);
    margin-top: 14px;
}
.aipr-iv-person-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--iv-mute);
}
.aipr-iv-person-links a:hover {
    color: var(--iv-accent);
}

/* ─── Pagination ─────────────────────────────────────────── */

.aipr-iv-pagination {
    margin-top: 34px;
}
.aipr-iv-pagination ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
}
.aipr-iv-pagination li {
    margin: 0;
}
/* Scoped to li descendants — paginate_links' container <ul> also carries
   class "page-numbers" and must not receive item sizing. */
.aipr-iv-pagination li .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 600;
    color: var(--iv-mute);
    transition: background 120ms ease;
}
.aipr-iv-pagination li a.page-numbers:hover {
    background: var(--iv-accent-tint);
    color: var(--iv-accent);
}
.aipr-iv-pagination li .page-numbers.current {
    background: var(--iv-ink);
    color: #fff;
}
.aipr-iv-pagination li .page-numbers.dots {
    color: var(--iv-faint);
}

/* ════════════════════════════════════════════════════════════
   ARTICLE PAGE
   ════════════════════════════════════════════════════════════ */

/* 800px reading column, centred. 864 = 800 + the shell's 32px padding
   on each side, so the column measures exactly 800 and the cover image
   spans it edge to edge. */
.aipr-iv-article {
    max-width: 864px;
}

.aipr-iv-art-head {
    padding: 40px 0 0;
}
.aipr-iv-art-h1 {
    font-size: clamp(32px, 4vw, 42px);
    font-weight: 600;
    letter-spacing: -0.028em;
    line-height: 1.1;
    color: var(--iv-ink);
    margin: 14px 0 18px;
    text-wrap: balance;
}
.aipr-iv-art-dek {
    font-family: var(--iv-serif);
    font-size: 20px;
    line-height: 1.5;
    color: var(--iv-mute);
    text-wrap: pretty;
}
/* The fixed provenance line. No interviewer name anywhere on the page —
   the interview is the interviewee's, and a byline would claim a
   presence in the room that written interviews do not have. */
.aipr-iv-art-by {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--iv-faint);
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--iv-line);
}

.aipr-iv-cover {
    margin-top: 28px;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    border-radius: 2px;
    background: #f2f2f6;
}
.aipr-iv-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 25%;
}
.aipr-iv-cover-credit {
    font-size: 12px;
    line-height: 1.5;
    color: var(--iv-faint);
    margin-top: 8px;
}

/* ─── Editorial boxes (In brief / On the record) ─────────────
   Both are the EDITORS speaking, not the interviewee, and the label says
   so. Tinted ground rather than a border keeps the "no cards" rule while
   still marking them as not-the-answers. */

.aipr-iv-box {
    background: var(--iv-accent-tint);
    border-radius: 3px;
    padding: 24px 26px;
    margin: 34px 0;
}
.aipr-iv-box-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--iv-accent);
    margin-bottom: 14px;
}
.aipr-iv-box-list {
    counter-reset: aipr-iv-brief;
}
.aipr-iv-box-list li {
    position: relative;
    counter-increment: aipr-iv-brief;
    padding: 8px 0 8px 26px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--iv-body);
}
.aipr-iv-box-list--n li::before {
    content: counter(aipr-iv-brief);
    position: absolute;
    left: 0;
    top: 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.9;
    color: var(--iv-accent);
    font-variant-numeric: tabular-nums;
}
.aipr-iv-box-list--b li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 17px;
    width: 10px;
    height: 1px;
    background: var(--iv-accent);
}
.aipr-iv-box-list a {
    color: var(--iv-body);
    box-shadow: inset 0 -1px 0 rgba(108, 92, 231, 0.35);
    transition: color 120ms ease, box-shadow 120ms ease;
}
.aipr-iv-box-list a:hover {
    color: var(--iv-accent);
    box-shadow: inset 0 -1px 0 var(--iv-accent);
}
.aipr-iv-box-jump {
    display: block;
    font-size: 12px;
    color: var(--iv-mute);
    margin-top: 3px;
}

/* ─── Editor's intro + the fixed statement ───────────────── */

.aipr-iv-intro {
    font-family: var(--iv-serif);
    font-size: 18px;
    line-height: 1.72;
    color: var(--iv-body);
    margin-top: 30px;
}
.aipr-iv-intro p {
    margin-bottom: 18px;
}
.aipr-iv-intro p:last-child {
    margin-bottom: 0;
}
.aipr-iv-intro a {
    color: var(--iv-accent);
    box-shadow: inset 0 -1px 0 rgba(108, 92, 231, 0.4);
}
.aipr-iv-statement {
    font-family: var(--iv-serif);
    font-style: italic;
    font-size: 16px;
    line-height: 1.6;
    color: var(--iv-mute);
    margin: 26px 0 8px;
    padding-top: 20px;
    border-top: 1px solid var(--iv-line);
}

/* ─── Q&A — the signature of the whole design ────────────────
   Question: sans, 600, accent. Answer: serif, 18/1.72, ink. That
   contrast is the ENTIRE reason both faces are loaded; nothing else on
   the page may borrow the accent for body text. The renderer emits
   .aipr-iv-q / .aipr-iv-a / .aipr-iv-pull and nothing here may modify
   the answer's words. */

.aipr-iv-qa {
    margin-top: 8px;
}
.aipr-iv-q {
    font-family: var(--iv-sans);
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--iv-accent);
    margin: 44px 0 16px;
    /* Deep links from the On-the-record index land here; without room
       above, the anchor jump pins the question to the viewport's edge.
       The JS smooth-scroll uses the same value. */
    scroll-margin-top: 28px;
}
.aipr-iv-qa > .aipr-iv-q:first-child {
    margin-top: 24px;
}
.aipr-iv-a {
    font-family: var(--iv-serif);
    font-size: 18px;
    line-height: 1.72;
    color: var(--iv-ink);
}
.aipr-iv-a p {
    margin: 0 0 18px;
}
.aipr-iv-a p:last-child {
    margin-bottom: 0;
}
.aipr-iv-a ul,
.aipr-iv-a ol {
    margin: 0 0 18px;
    padding-left: 24px;
}
.aipr-iv-a ul li {
    list-style: disc;
    margin-bottom: 6px;
}
.aipr-iv-a ol li {
    list-style: decimal;
    margin-bottom: 6px;
}
.aipr-iv-a a {
    color: var(--iv-accent);
    box-shadow: inset 0 -1px 0 rgba(108, 92, 231, 0.4);
}
.aipr-iv-a strong {
    font-weight: 600;
}
/* One pull quote per article, rendered inside the Q&A by the renderer.
   No ::before quote glyph — the renderer supplies real curly quotes, and
   a CSS glyph would double them. */
.aipr-iv-pull {
    font-family: var(--iv-serif);
    font-style: italic;
    font-size: 25px;
    line-height: 1.35;
    color: var(--iv-ink);
    border-left: 2px solid var(--iv-accent);
    padding: 2px 0 2px 24px;
    margin: 34px 0;
    text-wrap: pretty;
}
.aipr-iv-pull p {
    margin: 0;
}
.aipr-iv-pull cite {
    display: block;
    font-family: var(--iv-sans);
    font-style: normal;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--iv-faint);
    margin-top: 12px;
}

/* ─── Editor's Note ──────────────────────────────────────── */

.aipr-iv-note {
    font-family: var(--iv-serif);
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--iv-mute);
    margin: 34px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--iv-line);
}
.aipr-iv-slot {
    margin: 34px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--iv-line);
}
.aipr-iv-slot :is(img, iframe) {
    max-width: 100%;
}
.aipr-iv-note-label {
    font-family: var(--iv-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--iv-accent);
    margin: 0 0 8px;
}
.aipr-iv-note p {
    margin: 0 0 14px;
}
.aipr-iv-note p:last-child {
    margin-bottom: 0;
}
.aipr-iv-note em,
.aipr-iv-note i {
    font-style: italic;
}
.aipr-iv-note a {
    color: var(--iv-accent);
}

/* ─── Article footer: About + More in <sector> ───────────── */

.aipr-iv-art-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 44px;
    margin-top: 48px;
    padding-top: 26px;
    border-top: 2px solid var(--iv-rule);
}
.aipr-iv-foot-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--iv-faint);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--iv-line);
    margin-bottom: 4px;
}
.aipr-iv-about-dl {
    font-size: 14.5px;
    line-height: 1.5;
}
.aipr-iv-about-dl > div {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--iv-line);
}
.aipr-iv-about-dl > div:last-child {
    border-bottom: none;
}
.aipr-iv-about-dl dt {
    color: var(--iv-faint);
}
.aipr-iv-about-dl dd {
    color: var(--iv-body);
    min-width: 0;
    word-wrap: break-word;
}
.aipr-iv-about-dl dd a {
    font-weight: 600;
    color: var(--iv-body);
}
.aipr-iv-about-dl dd a:hover {
    color: var(--iv-accent);
}
.aipr-iv-more-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--iv-line);
    font-size: 14.5px;
    line-height: 1.4;
}
.aipr-iv-more-list li:last-child {
    border-bottom: none;
}
.aipr-iv-more-list a {
    font-weight: 600;
    color: var(--iv-body);
    min-width: 0;
    transition: color 120ms ease;
}
.aipr-iv-more-list a:hover {
    color: var(--iv-accent);
}
.aipr-iv-more-no {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--iv-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.aipr-iv-more-list li.aipr-iv-more-cross a {
    color: var(--iv-accent);
}

/* More interviews with <name> — a full-width block under the two
   columns, because a second interview with the same person is the
   strongest link on the page and must not sit in a sidebar. */
.aipr-iv-byperson {
    margin-top: 44px;
    padding-top: 24px;
    border-top: 1px solid var(--iv-line);
}
.aipr-iv-byperson-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 32px;
    margin-top: 8px;
}
.aipr-iv-byperson-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--iv-line);
    min-width: 0;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — 1264 → tablet → mobile
   Nothing below may introduce horizontal body scroll.
   ════════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
    .aipr-iv {
        padding-left: 24px;
        padding-right: 24px;
    }
    .aipr-iv-lead {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 28px 0 36px;
    }
    /* Cover first on a narrow lead: the photograph is the entry point
       once the two columns can no longer sit side by side. */
    .aipr-iv-lead-media-wrap {
        order: -1;
    }
    .aipr-iv-picks-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
    }
    .aipr-iv-start-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 28px;
    }
    .aipr-iv-start-grid > .aipr-iv-start-item:nth-last-child(-n + 4) {
        border-bottom: 1px solid rgba(14, 14, 18, 0.08);
    }
    .aipr-iv-start-grid > .aipr-iv-start-item:nth-last-child(-n + 2) {
        border-bottom: none;
    }
    .aipr-iv-wall-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
    .aipr-iv-river,
    .aipr-iv-sec-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 32px;
    }
    .aipr-iv-river > .aipr-iv-card:nth-child(-n + 3) {
        border-top: 1px solid var(--iv-line);
        padding-top: 26px;
    }
    .aipr-iv-river > .aipr-iv-card:nth-child(-n + 2) {
        border-top: none;
        padding-top: 4px;
    }
    .aipr-iv-people-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .aipr-iv-row {
        grid-template-columns: 72px minmax(0, 1fr);
    }
    .aipr-iv-row--plain {
        grid-template-columns: minmax(0, 1fr);
    }
    .aipr-iv-row-meta {
        display: none;
    }
}

@media (max-width: 767px) {
    .aipr-iv {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 56px;
    }
    .aipr-iv-masthead {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding: 28px 0 20px;
    }
    .aipr-iv-count {
        text-align: left;
        padding-bottom: 0;
    }
    .aipr-iv-dek {
        font-size: 16.5px;
        max-width: none;
    }

    /* Edge-to-edge scroll bleed for the tab row. */
    .aipr-iv-nav {
        margin-inline: -20px;
        padding-inline: 20px;
    }
    .aipr-iv-nav-scroll {
        gap: 20px;
    }
    .aipr-iv-nav-tab--alt {
        padding-left: 16px;
    }

    .aipr-iv-lead-quote {
        font-size: 19px;
    }
    .aipr-iv-picks {
        padding: 20px 18px 22px;
        margin-inline: -20px;
        border-radius: 0;
    }
    .aipr-iv-picks-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
    .aipr-iv-start-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .aipr-iv-start-grid > .aipr-iv-start-item:nth-last-child(-n + 2) {
        border-bottom: 1px solid rgba(14, 14, 18, 0.08);
    }
    .aipr-iv-start-grid > .aipr-iv-start-item:last-child {
        border-bottom: none;
    }

    .aipr-iv-wall {
        padding: 32px 0 30px;
        margin-top: 36px;
    }
    /* 5-up is the intended mobile density — the wall has to still read as
       a wall, not as a list of five profile cards. */
    .aipr-iv-wall-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
    }
    .aipr-iv-wall-cap {
        padding: 16px 4px 5px;
        font-size: 10.5px;
    }
    .aipr-iv-wall-co {
        display: none;
    }

    .aipr-iv-river,
    .aipr-iv-sec-list,
    .aipr-iv-people-grid,
    .aipr-iv-byperson-list {
        grid-template-columns: minmax(0, 1fr);
    }
    .aipr-iv-river > .aipr-iv-card:nth-child(-n + 3),
    .aipr-iv-river > .aipr-iv-card:nth-child(-n + 2) {
        border-top: 1px solid var(--iv-line);
        padding-top: 22px;
    }
    .aipr-iv-river > .aipr-iv-card:first-child {
        border-top: none;
        padding-top: 4px;
    }
    .aipr-iv-card {
        padding: 22px 0;
    }
    .aipr-iv-card-quote {
        font-size: 19px;
    }
    .aipr-iv-people-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px 14px;
    }

    .aipr-iv-sechead {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .aipr-iv-sechead-meta {
        text-align: left;
        justify-content: flex-start;
    }

    .aipr-iv-person-head {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        padding: 28px 0 26px;
    }
    .aipr-iv-person-portrait {
        width: 148px;
    }

    .aipr-iv-row {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 16px;
        padding: 18px 0;
    }
    .aipr-iv-row .aipr-iv-face--md {
        width: 56px;
    }
    .aipr-iv-row-ord {
        font-size: 24px;
        padding-top: 20px;
    }
    .aipr-iv-row-title {
        font-size: 19px;
    }

    /* Article */
    .aipr-iv-art-head {
        padding-top: 26px;
    }
    .aipr-iv-art-dek {
        font-size: 18px;
    }
    .aipr-iv-box {
        padding: 20px 18px;
        margin: 26px 0;
    }
    .aipr-iv-q {
        margin-top: 34px;
    }
    .aipr-iv-a,
    .aipr-iv-intro {
        font-size: 17.5px;
    }
    .aipr-iv-pull {
        font-size: 21px;
        padding-left: 18px;
        margin: 28px 0;
    }
    .aipr-iv-art-foot {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
    .aipr-iv-about-dl > div {
        grid-template-columns: 84px minmax(0, 1fr);
        gap: 10px;
    }

    /* Compact pagination: prev/next + the current neighbourhood.
       Gated on :has() support — without the gate, a browser lacking :has()
       applies the hide-all rule but none of the un-hide exceptions and
       shows no pagination at all. Fallback is the full list. */
    @supports selector(li:has(a)) {
        .aipr-iv-pagination li {
            display: none;
        }
        .aipr-iv-pagination li:has(.current),
        .aipr-iv-pagination li:has(.current) + li,
        .aipr-iv-pagination li:has(+ li .current),
        .aipr-iv-pagination li:has(.prev),
        .aipr-iv-pagination li:has(.next) {
            display: block;
        }
    }
    .aipr-iv-pagination li .page-numbers {
        min-width: 40px;
        height: 40px;
    }
}

/* Very narrow: the wall drops to 4-up rather than letting 5 faces fall
   under ~60px, where the name is unreadable and the grid stops being
   worth its height. */
@media (max-width: 400px) {
    .aipr-iv-wall-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .aipr-iv-picks-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ─── Motion ─────────────────────────────────────────────────
   The grayscale lift is the only real animation in the system; a reader
   who asked for less motion gets the colour state instantly instead of
   losing it. */
@media (prefers-reduced-motion: reduce) {
    .aipr-iv *,
    .aipr-iv *::before,
    .aipr-iv *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}