/**
 * Intelligence channel + article — frontend styles (v1, 0.7.0).
 *
 * Third sibling of funding-page-v3.css and interviews-v1.css: same site, one
 * system, same tokens re-namespaced. Read the funding file's header for the
 * research behind the shared decisions (display weight 600, hairlines
 * instead of bordered cards, 1264 shell, one starved accent).
 *
 * WHAT THIS CHANNEL ADDS, AND WHY:
 *
 *  - THE SERIF IS FOR SOMEBODY ELSE'S WORDS. Interviews splits the two faces
 *    by speaker — sans is the publication, serif is the interviewee. Here the
 *    body IS the publication's prose, so it is sans; the serif is reserved
 *    for standfirsts, card deks and translated quotations. Same rule, and
 *    the content falls on the other side of it.
 *  - TWO TINTED BOXES AND NO MORE. The Bottom Line and On the record are the
 *    only places the editors speak rather than the sources. Tinting a third
 *    thing would spend the signal.
 *  - THE DARK BAND HOLDS ARGUMENTS. Funding fills it with money, interviews
 *    with faces. This channel's inventory is named positions.
 *  - 800 APPEARS EXACTLY ONCE per page: the archive total in the masthead.
 *
 * FILENAME CARRIES THE VERSION. Cloudflare on this site does not vary its
 * cache on `?ver=` (documented at length in the hub and in the funding CSS),
 * so bumping AIPRI_VERSION will NOT bust this file at the edge. A redesign
 * ships as intelligence-v2.css with AIPRI_Archive::CSS updated.
 *
 * Scope: everything under .aipri. 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). The italic is a
   separate file because a translated quotation needs a real italic, not a
   synthesised oblique. */

@font-face {
    font-family: 'AIPRI Inter Tight';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-tight-400.woff2') format('woff2');
}
@font-face {
    font-family: 'AIPRI Inter Tight';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-tight-600.woff2') format('woff2');
}
@font-face {
    font-family: 'AIPRI Inter Tight';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/inter-tight-800.woff2') format('woff2');
}
@font-face {
    font-family: 'AIPRI 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: 'AIPRI 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 ─────────────────────────────────────── */

.aipri {
    --ai-paper: #fdfdfe;
    --ai-ink: #0e0e12;
    --ai-body: #212127;
    --ai-mute: #62626e;
    --ai-faint: #9a9aa6;
    --ai-line: #e7e7ee;
    --ai-rule: #0e0e12;
    --ai-accent: #6c5ce7;
    --ai-tint: #efedfc;
    --ai-band: #131318;
    --ai-band-ink: #f5f4fb;
    --ai-band-mute: #a3a2b3;
    --ai-band-line: rgba(255, 255, 255, 0.14);
    --ai-band-accent: #c0b5ff;

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

    font-family: var(--ai-sans);
    font-size: 16px;
    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(--ai-body);
    -webkit-font-smoothing: antialiased;
}

.aipri *,
.aipri *::before,
.aipri *::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 `.aipri h2` reset at (0,1,1) would silently kill
   every component margin. */
.aipri :where(h1, h2, h3, h4, h5, h6, p, ol, ul, dl, dt, dd, figure, figcaption, blockquote) {
    margin: 0;
    padding: 0;
}
.aipri :where(ol, ul) {
    list-style: none;
}
.aipri :where(blockquote) {
    border: none;
    quotes: none;
    background: none;
    font-style: normal;
}
.aipri :where(blockquote)::before,
.aipri :where(blockquote)::after {
    content: none;
}
.aipri a {
    color: inherit;
    text-decoration: none;
    border: none;
    box-shadow: none;
}
.aipri a:focus-visible,
.aipri button:focus-visible {
    outline: 2px solid var(--ai-accent);
    outline-offset: 3px;
    border-radius: 2px;
}
.aipri img {
    margin: 0;
    max-width: 100%;
    height: auto;
    display: block;
}
.aipri hr {
    border: none;
    border-top: 1px solid var(--ai-line);
    margin: 0;
}

/* ─── Preview notice ─────────────────────────────────────── */

.aipri-preview-note {
    background: var(--ai-tint);
    color: var(--ai-accent);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
    margin: 16px 0 0;
    border-radius: 2px;
}

/* ─── Media frame ────────────────────────────────────────────
   One class for every cover slot. 2:1 is the ratio the generator produces
   from v0.7; object-fit only guards a stray upload of another ratio. */

.aipri-media {
    display: block;
    overflow: hidden;
    border-radius: 2px;
    background: #f2f2f6;
}
.aipri-media--2x1 {
    aspect-ratio: 2 / 1;
}
.aipri-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

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

.aipri-masthead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
    padding: 44px 0 30px;
}
.aipri-masthead-main {
    min-width: 0;
}
.aipri-h1 {
    font-size: clamp(38px, 4.4vw, 56px);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 0.98;
    color: var(--ai-ink);
    text-wrap: balance;
}
/* Serif standfirst against the sans display face — the same strict role
   separation the other two channels use. */
.aipri-dek {
    font-family: var(--ai-serif);
    font-size: 18px;
    line-height: 1.5;
    color: var(--ai-mute);
    max-width: 620px;
    margin-top: 14px;
    text-wrap: pretty;
}
.aipri-count {
    flex: 0 0 auto;
    text-align: right;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ai-mute);
    padding-bottom: 6px;
}
/* THE one 800 on the page. */
.aipri-count-n {
    display: block;
    font-size: clamp(38px, 3.6vw, 52px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--ai-ink);
    margin-bottom: 6px;
}
.aipri-count-link {
    display: inline-block;
    margin-top: 4px;
    font-weight: 600;
    color: var(--ai-accent);
    white-space: nowrap;
}
.aipri-count-link:hover {
    color: var(--ai-ink);
}

/* ─── Tab row ────────────────────────────────────────────────
   Sized to fit 1200px of usable width (the 1264 shell minus 32px each
   side) with ZERO desktop horizontal scroll; scrolling is the mobile
   behaviour, deliberately. Nine tabs — Latest plus the eight short sector
   labels — plus the pinned destination is the ceiling. Re-measure before
   adding or lengthening one, and measure against 1200, not 1264. */

.aipri-nav {
    border-top: 2px solid var(--ai-rule);
    display: flex;
    align-items: stretch;
}
.aipri-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;
}
.aipri-nav-scroll::-webkit-scrollbar {
    display: none;
}
.aipri-tab {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ai-mute);
    padding: 13px 0 12px;
    white-space: nowrap;
    transition: color 120ms ease;
}
.aipri-tab:hover {
    color: var(--ai-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 `.aipri a` reset's
   text-decoration:none at (0,1,1). */
.aipri-tab.is-active {
    color: var(--ai-ink);
    text-decoration: underline;
    text-decoration-color: var(--ai-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}
.aipri-tab--alt {
    flex: 0 0 auto;
    padding-left: 24px;
    color: var(--ai-accent);
    background: var(--ai-paper);
    /* Soft hand-off where scrolled tabs pass under the pinned tab. */
    box-shadow: -16px 0 14px -10px var(--ai-paper);
}
.aipri-tab--alt:hover {
    color: var(--ai-ink);
}

/* ─── Topic rail — the quiet second line ─────────────────── */

.aipri-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 22px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ai-line);
    font-size: 13.5px;
}
.aipri-rail-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ai-faint);
}
.aipri-rail a {
    font-weight: 600;
    color: var(--ai-mute);
    transition: color 120ms ease;
}
.aipri-rail a:hover {
    color: var(--ai-ink);
}
/* The nav's bottom hairline lives on whichever of the two rows is last. */
.aipri-nav:last-of-type {
    border-bottom: 1px solid var(--ai-line);
}
.aipri-nav + .aipri-rail {
    border-top: none;
}

/* ─── Rubric (SECTOR · DATE) ─────────────────────────────── */

.aipri-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(--ai-faint);
}
.aipri-rub a {
    color: var(--ai-mute);
    transition: color 120ms ease;
}
.aipri-rub a:hover {
    color: var(--ai-accent);
}
.aipri-rub-sep {
    color: var(--ai-line);
}

/* ─── Provenance line ────────────────────────────────────────
   Same position, size and register as the interviews article's method
   line. Where the material came from, and who wrote the synthesis: two
   claims, one line, never merged. The accent is spent on "From …" because
   that clause is this channel's whole proposition. */

.aipri-prov {
    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(--ai-faint);
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--ai-line);
}
.aipri-prov .aipri-from {
    color: var(--ai-accent);
}
.aipri-prov a:hover {
    color: var(--ai-ink);
}

/* ─── Faces and the voice line ───────────────────────────────
   One component, three sizes. Grayscale by default, colour on hover —
   the same treatment the interviews channel uses, which is what makes
   portraits from many photographers read as one set. Most voices here have
   no portrait at all and render as initials; that is the honest state, not
   a fallback to hide. */

.aipri-face {
    display: block;
    flex: 0 0 auto;
    width: 44px;
    aspect-ratio: 1 / 1.15;
    overflow: hidden;
    border-radius: 2px;
    background: var(--ai-tint);
}
.aipri-face-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 20%;
    filter: grayscale(1);
    transition: filter 250ms ease;
}
.aipri-face:hover .aipri-face-img,
a:hover .aipri-face-img,
a:focus-visible .aipri-face-img {
    filter: none;
}
.aipri-face--none {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ai-accent);
    background: var(--ai-tint);
}
.aipri-face--lg {
    width: 160px;
}
.aipri-face--lg.aipri-face--none {
    font-size: 42px;
}

.aipri-who {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin-top: 16px;
}
.aipri-who-text {
    min-width: 0;
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--ai-mute);
}
.aipri-who-name {
    font-weight: 600;
    color: var(--ai-ink);
}
a.aipri-who-name:hover {
    color: var(--ai-accent);
}

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

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

/* ─── Featured zone: lead + three ────────────────────────── */

.aipri-feat {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 5fr);
    gap: 48px;
    padding: 36px 0 44px;
}
.aipri-feat--solo {
    grid-template-columns: minmax(0, 1fr);
}
.aipri-lead .aipri-media {
    margin-bottom: 18px;
}
.aipri-lead-title {
    font-size: clamp(27px, 2.8vw, 36px);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.12;
    color: var(--ai-ink);
    margin: 10px 0 12px;
    text-wrap: balance;
}
.aipri-lead-title a {
    transition: color 120ms ease;
}
.aipri-lead-title a:hover {
    color: var(--ai-accent);
}
.aipri-lead-dek {
    font-family: var(--ai-serif);
    font-size: 18.5px;
    line-height: 1.5;
    color: var(--ai-body);
    max-width: 60ch;
    text-wrap: pretty;
}

.aipri-side-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ai-faint);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ai-line);
}
.aipri-side-item {
    display: block;
    padding: 18px 0;
    border-bottom: 1px solid var(--ai-line);
}
.aipri-side-item:last-child {
    border-bottom: none;
}
.aipri-side-title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.28;
    color: var(--ai-ink);
    margin: 7px 0 6px;
}
.aipri-side-title a {
    transition: color 120ms ease;
}
.aipri-side-title a:hover {
    color: var(--ai-accent);
}
.aipri-side-dek {
    font-family: var(--ai-serif);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ai-mute);
    text-wrap: pretty;
}

/* ─── Dark band: On the record ───────────────────────────────
   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. */

.aipri-band {
    background: var(--ai-band);
    color: var(--ai-band-ink);
    padding: 40px 0 36px;
    margin: 8px 0;
    scroll-margin-top: 24px;
}
@supports (clip-path: inset(0 -100vmax)) {
    .aipri-band {
        box-shadow: 0 0 0 100vmax var(--ai-band);
        clip-path: inset(0 -100vmax);
    }
}
.aipri-band .aipri-sechead {
    border-bottom-color: var(--ai-band-line);
}
.aipri-band .aipri-sechead-h {
    color: var(--ai-band-ink);
}
.aipri-band .aipri-sechead-meta {
    color: var(--ai-band-mute);
}
.aipri-band-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 40px;
    margin-top: 8px;
}
.aipri-rec {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 0 18px;
    border-bottom: 1px solid var(--ai-band-line);
    min-width: 0;
}
.aipri-rec-who {
    font-size: 13px;
    color: var(--ai-band-mute);
}
.aipri-rec-who b {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}
/* The position is the largest text in the cell: the argument is what the
   band is for, and the name is how you weigh it. */
.aipri-rec-pos {
    font-family: var(--ai-serif);
    font-size: 17px;
    line-height: 1.45;
    color: var(--ai-band-ink);
    text-wrap: pretty;
}
.aipri-rec-src {
    font-size: 12.5px;
    color: var(--ai-band-mute);
    margin-top: auto;
}
.aipri-rec-src a {
    color: var(--ai-band-accent);
    font-weight: 600;
}
.aipri-rec-src a:hover {
    color: #fff;
}
.aipri-band-foot {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
    font-size: 13px;
    color: var(--ai-band-mute);
}
.aipri-band-foot a {
    font-weight: 600;
    color: var(--ai-band-accent);
}
.aipri-band-foot a:hover {
    color: #fff;
}

/* ─── River — hairlines only, no cards, no thumbnails ─────── */

.aipri-river {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 40px;
    margin-top: 26px;
}
.aipri-card {
    display: flex;
    flex-direction: column;
    padding: 26px 0;
    border-top: 1px solid var(--ai-line);
    min-width: 0;
}
.aipri-river > .aipri-card:nth-child(-n + 3) {
    border-top: none;
    padding-top: 4px;
}
.aipri-card-title {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.28;
    color: var(--ai-ink);
    margin: 12px 0 10px;
    text-wrap: balance;
}
.aipri-card-title a {
    transition: color 120ms ease;
}
.aipri-card-title a:hover {
    color: var(--ai-accent);
}
.aipri-card-dek {
    font-family: var(--ai-serif);
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--ai-mute);
    text-wrap: pretty;
}
.aipri-card .aipri-who {
    margin-top: auto;
    padding-top: 16px;
}

/* ─── Sector blocks ──────────────────────────────────────── */

.aipri-sec {
    padding-top: 44px;
}
.aipri-sec-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 40px;
    margin-top: 6px;
}
.aipri-sec-item {
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid var(--ai-line);
    min-width: 0;
}
.aipri-sec-item-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ai-ink);
    transition: color 120ms ease;
}
.aipri-sec-item:hover .aipri-sec-item-title {
    color: var(--ai-accent);
}
.aipri-sec-item-meta {
    display: block;
    font-size: 12.5px;
    color: var(--ai-faint);
    margin-top: 4px;
}

/* ─── Plain listings (sector, voice) ─────────────────────── */

.aipri-list {
    margin-top: 8px;
}
.aipri-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 168px;
    gap: 24px;
    align-items: start;
    padding: 22px 0;
    border-bottom: 1px solid var(--ai-line);
}
.aipri-row-main {
    min-width: 0;
}
.aipri-row-title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.28;
    color: var(--ai-ink);
    margin: 6px 0 8px;
}
.aipri-row-title a {
    transition: color 120ms ease;
}
.aipri-row-title a:hover {
    color: var(--ai-accent);
}
.aipri-row-dek {
    font-family: var(--ai-serif);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ai-mute);
    max-width: 62ch;
    text-wrap: pretty;
}
.aipri-row-pos {
    font-family: var(--ai-serif);
    font-size: 18px;
    line-height: 1.5;
    color: var(--ai-ink);
    margin: 8px 0 10px;
    max-width: 62ch;
    text-wrap: pretty;
}
.aipri-row-src {
    font-size: 13.5px;
    color: var(--ai-mute);
}
.aipri-row-src a {
    font-weight: 600;
    color: var(--ai-body);
}
.aipri-row-src a:hover {
    color: var(--ai-accent);
}
.aipri-row-meta {
    text-align: right;
    font-size: 13px;
    color: var(--ai-faint);
    line-height: 1.5;
    padding-top: 4px;
}

.aipri-empty {
    font-size: 16px;
    color: var(--ai-mute);
    padding: 40px 0;
}
.aipri-empty a {
    font-weight: 600;
    color: var(--ai-accent);
}

/* ─── Voices index ───────────────────────────────────────── */

.aipri-az {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--ai-line);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ai-mute);
}
.aipri-az a:hover {
    color: var(--ai-accent);
}
.aipri-group {
    padding-top: 34px;
    scroll-margin-top: 24px;
}
.aipri-group-letter {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ai-faint);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ai-line);
}
.aipri-vgrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 40px;
    margin-top: 4px;
}
.aipri-voice {
    padding: 22px 0;
    border-bottom: 1px solid var(--ai-line);
    min-width: 0;
}
.aipri-voice-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.aipri-voice-id {
    min-width: 0;
}
.aipri-voice-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--ai-ink);
    transition: color 120ms ease;
}
.aipri-voice-name:hover {
    color: var(--ai-accent);
}
.aipri-voice-role {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ai-mute);
}
.aipri-voice-pos {
    font-family: var(--ai-serif);
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--ai-body);
    margin-top: 12px;
    text-wrap: pretty;
}
.aipri-voice-n {
    font-size: 12.5px;
    color: var(--ai-faint);
    margin-top: 10px;
}
.aipri-voice-n a {
    color: var(--ai-mute);
    font-weight: 600;
}
.aipri-voice-n a:hover {
    color: var(--ai-accent);
}

/* ─── One person ─────────────────────────────────────────── */

.aipri-person-head {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    padding: 40px 0 30px;
}
.aipri-person-main {
    min-width: 0;
}
.aipri-person-main .aipri-h1 {
    margin-top: 10px;
}
.aipri-person-role {
    font-family: var(--ai-serif);
    font-size: 19px;
    line-height: 1.5;
    color: var(--ai-mute);
    margin-top: 12px;
}
.aipri-person-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 18px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ai-mute);
}
.aipri-person-links a:hover {
    color: var(--ai-accent);
}

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

.aipri-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(--ai-rule);
    font-size: 13.5px;
    color: var(--ai-mute);
}
.aipri-foot b {
    font-weight: 600;
    color: var(--ai-ink);
}
.aipri-foot a {
    font-weight: 600;
    color: var(--ai-accent);
}
.aipri-foot a:hover {
    color: var(--ai-ink);
}
.aipri-foot-totals {
    color: var(--ai-faint);
    font-variant-numeric: tabular-nums;
}

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

.aipri-pagination {
    margin-top: 34px;
}
.aipri-pagination ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
}
.aipri-pagination li {
    margin: 0;
}
/* Scoped to li descendants — paginate_links' container <ul> also carries
   class "page-numbers" and must not receive item sizing. */
.aipri-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(--ai-mute);
    transition: background 120ms ease;
}
.aipri-pagination li a.page-numbers:hover {
    background: var(--ai-tint);
    color: var(--ai-accent);
}
.aipri-pagination li .page-numbers.current {
    background: var(--ai-ink);
    color: #fff;
}
.aipri-pagination li .page-numbers.dots {
    color: var(--ai-faint);
}

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

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

.aipri-art-head {
    padding: 40px 0 0;
}
.aipri-art-h1 {
    font-size: clamp(32px, 4vw, 42px);
    font-weight: 600;
    letter-spacing: -0.028em;
    line-height: 1.1;
    color: var(--ai-ink);
    margin: 14px 0 18px;
    text-wrap: balance;
}
.aipri-art-dek {
    font-family: var(--ai-serif);
    font-size: 20px;
    line-height: 1.5;
    color: var(--ai-mute);
    text-wrap: pretty;
}

.aipri-cover-fig {
    margin-top: 28px;
}
.aipri-credit {
    font-size: 12px;
    line-height: 1.5;
    color: var(--ai-faint);
    margin-top: 8px;
}

/* ─── The argument ───────────────────────────────────────────
   Sans, because this is the publication's own prose. The serif on this
   page belongs to the standfirst and to translated quotations — somebody
   else's words. */

.aipri-body {
    margin-top: 30px;
    font-size: 18px;
    line-height: 1.72;
    color: var(--ai-ink);
}
.aipri-body p {
    margin: 0 0 18px;
}
.aipri-body p:last-child {
    margin-bottom: 0;
}
/* The Big Picture is the argument of the piece, not a summary box: it is
   the first paragraph, set slightly larger, with its label inline. */
.aipri-lede {
    font-size: 19.5px;
    line-height: 1.6;
}
.aipri-run {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ai-accent);
    margin-right: 8px;
    position: relative;
    top: -2px;
}
/* Real headings, so a 350-word analytical piece has a document outline.
   The six 2026-02 pieces bold their section leads inside a <p>; the parser
   promotes them and this rule makes them read the same. */
.aipri-h3 {
    font-family: var(--ai-sans);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--ai-ink);
    margin: 34px 0 12px;
}
.aipri-body ol,
.aipri-body ul {
    margin: 0 0 18px;
    padding-left: 24px;
}
.aipri-body ol li {
    list-style: decimal;
    margin-bottom: 8px;
}
.aipri-body ul li {
    list-style: disc;
    margin-bottom: 8px;
}
.aipri-body b,
.aipri-body strong {
    font-weight: 600;
}
/* Internal links replace the outbound ones v0.4 removed. Underlined on
   hover only — three underlined runs in one paragraph read as a link farm.
   A generated cover or figure inside the body keeps the media frame's
   radius. */
.aipri-body a {
    color: var(--ai-accent);
    box-shadow: inset 0 -1px 0 rgba(108, 92, 231, 0.4);
    transition: box-shadow 120ms ease;
}
.aipri-body a:hover {
    box-shadow: inset 0 -2px 0 var(--ai-accent);
}
.aipri-body img {
    border-radius: 2px;
    margin: 0 0 18px;
}

/* ─── Translated quotation ───────────────────────────────── */

.aipri-quote {
    font-family: var(--ai-serif);
    font-style: italic;
    font-size: 22px;
    line-height: 1.4;
    color: var(--ai-ink);
    border-left: 2px solid var(--ai-accent);
    padding: 2px 0 2px 24px;
    margin: 28px 0;
    text-wrap: pretty;
}
.aipri-quote p {
    margin: 0;
}
.aipri-quote cite {
    display: block;
    font-family: var(--ai-sans);
    font-style: normal;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ai-faint);
    margin-top: 12px;
}

/* ─── The two editorial boxes ────────────────────────────────
   Tinted ground rather than a border keeps the "no cards" rule while still
   marking these as the EDITORS speaking. Two on the page, never three. */

.aipri-box {
    background: var(--ai-tint);
    border-radius: 3px;
    padding: 24px 26px;
    margin: 34px 0;
}
.aipri-box-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ai-accent);
    margin-bottom: 14px;
}
.aipri-box p {
    font-size: 17.5px;
    line-height: 1.6;
    color: var(--ai-body);
    margin: 0 0 12px;
}
.aipri-box p:last-child {
    margin-bottom: 0;
}
.aipri-box-list li {
    position: relative;
    padding: 10px 0 10px 26px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ai-body);
}
.aipri-box-list li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 20px;
    width: 10px;
    height: 1px;
    background: var(--ai-accent);
}
.aipri-box-list b {
    font-weight: 600;
    color: var(--ai-ink);
}
.aipri-box-quote {
    display: block;
    font-family: var(--ai-serif);
    font-style: italic;
    font-size: 16.5px;
    line-height: 1.5;
    color: var(--ai-ink);
    margin-top: 6px;
}
.aipri-box-src {
    display: block;
    font-size: 12px;
    color: var(--ai-mute);
    margin-top: 4px;
}

/* One line, about the quotations only. Set quiet and small: it is a
   precision note for a reader who might compare our English against the
   Chinese, not a disclaimer competing with the closing argument. */
.aipri-note {
    font-family: var(--ai-serif);
    font-style: italic;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--ai-mute);
    margin: 26px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--ai-line);
}

/* ─── Fact panel + more in sector ────────────────────────── */

.aipri-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(--ai-rule);
}
.aipri-foot-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ai-faint);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ai-line);
    margin-bottom: 4px;
}
.aipri-dl {
    font-size: 14.5px;
    line-height: 1.5;
}
.aipri-dl > div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ai-line);
}
.aipri-dl > div:last-child {
    border-bottom: none;
}
.aipri-dl dt {
    color: var(--ai-faint);
}
.aipri-dl dd {
    color: var(--ai-body);
    min-width: 0;
    word-wrap: break-word;
}
.aipri-dl dd b {
    font-weight: 600;
    color: var(--ai-ink);
}
.aipri-dl dd a {
    font-weight: 600;
    color: var(--ai-body);
}
.aipri-dl dd a:hover {
    color: var(--ai-accent);
}

.aipri-more-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ai-line);
    font-size: 14.5px;
    line-height: 1.4;
}
.aipri-more-list li:last-child {
    border-bottom: none;
}
.aipri-more-list a {
    font-weight: 600;
    color: var(--ai-body);
    min-width: 0;
    transition: color 120ms ease;
}
.aipri-more-list a:hover {
    color: var(--ai-accent);
}
.aipri-more-when {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--ai-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.aipri-more-list li.aipri-more-cross a {
    color: var(--ai-accent);
}

/* The source interview: full width under both columns, because it is the
   strongest link on the page and must not sit in a sidebar. */
.aipri-from {
    margin-top: 44px;
    padding-top: 24px;
    border-top: 1px solid var(--ai-line);
}
.aipri-from-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
}
.aipri-from-row .aipri-face {
    width: 56px;
}
.aipri-from-text {
    min-width: 0;
}
.aipri-from-text b {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--ai-ink);
    transition: color 120ms ease;
}
.aipri-from-row:hover .aipri-from-text b {
    color: var(--ai-accent);
}
.aipri-from-text span {
    display: block;
    font-size: 13px;
    color: var(--ai-mute);
    margin-top: 3px;
}

/* ─── Home-page block ────────────────────────────────────────
   Given to plugin-site-ui as one shortcode. NO TIMESTAMPS: this channel
   publishes in bursts and a date on a low-frequency block dates the
   channel rather than informing the reader. */

.aipri-homeblock {
    padding-bottom: 0;
}
.aipri-home-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 40px;
    margin-top: 22px;
}
.aipri-home-lead .aipri-media {
    margin-bottom: 14px;
}
.aipri-home-lead-title {
    display: block;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--ai-ink);
    margin: 8px 0 10px;
    text-wrap: balance;
    transition: color 120ms ease;
}
.aipri-home-lead:hover .aipri-home-lead-title {
    color: var(--ai-accent);
}
.aipri-home-lead-dek {
    display: block;
    font-family: var(--ai-serif);
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--ai-mute);
}
.aipri-home-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    align-content: start;
}
.aipri-home-item {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--ai-line);
    min-width: 0;
}
.aipri-home-item-title {
    display: block;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ai-ink);
    transition: color 120ms ease;
}
.aipri-home-item:hover .aipri-home-item-title {
    color: var(--ai-accent);
}
.aipri-home-item-dek {
    display: block;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ai-mute);
    margin-top: 4px;
}
.aipri-latest li {
    padding: 8px 0;
    border-bottom: 1px solid var(--ai-line);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}
.aipri-latest li:last-child {
    border-bottom: none;
}
.aipri-latest a:hover {
    color: var(--ai-accent);
}

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

@media (max-width: 1080px) {
    .aipri {
        padding-left: 24px;
        padding-right: 24px;
    }
    .aipri-feat {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding: 28px 0 36px;
    }
    .aipri-band-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 32px;
    }
    .aipri-river,
    .aipri-sec-list,
    .aipri-vgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 32px;
    }
    .aipri-river > .aipri-card:nth-child(3) {
        border-top: 1px solid var(--ai-line);
        padding-top: 26px;
    }
    .aipri-home-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}

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

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

    .aipri-band {
        padding: 32px 0 30px;
    }
    .aipri-band-grid,
    .aipri-river,
    .aipri-sec-list,
    .aipri-vgrid,
    .aipri-home-list {
        grid-template-columns: minmax(0, 1fr);
    }
    .aipri-river > .aipri-card:nth-child(-n + 3) {
        border-top: 1px solid var(--ai-line);
        padding-top: 22px;
    }
    .aipri-river > .aipri-card:first-child {
        border-top: none;
        padding-top: 4px;
    }
    .aipri-card {
        padding: 22px 0;
    }

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

    .aipri-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 18px 0;
    }
    .aipri-row-meta {
        display: none;
    }
    .aipri-row-title {
        font-size: 18px;
    }

    .aipri-person-head {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
        padding: 28px 0 24px;
    }
    .aipri-face--lg {
        width: 120px;
    }

    /* Article */
    .aipri-art-head {
        padding-top: 26px;
    }
    .aipri-art-dek {
        font-size: 18px;
    }
    .aipri-body {
        font-size: 17.5px;
    }
    .aipri-lede {
        font-size: 18.5px;
    }
    .aipri-h3 {
        font-size: 18.5px;
        margin-top: 28px;
    }
    .aipri-quote {
        font-size: 20px;
        padding-left: 18px;
        margin: 24px 0;
    }
    .aipri-box {
        padding: 20px 18px;
        margin: 26px 0;
    }
    .aipri-art-foot {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }
    .aipri-dl > div {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 10px;
    }

    /* Compact pagination: prev/next plus 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. */
    @supports selector(li:has(a)) {
        .aipri-pagination li {
            display: none;
        }
        .aipri-pagination li:has(.current),
        .aipri-pagination li:has(.current) + li,
        .aipri-pagination li:has(+ li .current),
        .aipri-pagination li:has(.prev),
        .aipri-pagination li:has(.next) {
            display: block;
        }
    }
    .aipri-pagination li .page-numbers {
        min-width: 40px;
        height: 40px;
    }
}

@media (max-width: 400px) {
    .aipri-h1 {
        font-size: 32px;
    }
}

/* ─── 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) {
    .aipri *,
    .aipri *::before,
    .aipri *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}