/**
 * AIPressRoom site UI — header, footer, and the typeface they carry.
 *
 * THE FILENAME CARRIES THE DESIGN VERSION. Cloudflare on this site does not
 * vary its cache on ?ver=, so a redesign ships as site-ui-v7.css with the enqueue
 * updated in class-ui-assets.php. Bumping the plugin version alone will not
 * reach the edge.
 *
 * Tokens are the ones already in use by the funding, interviews and PR Desk
 * channels — same values, re-namespaced. The site UI is the layer those three
 * channels hang off, so it must not introduce a fourth palette.
 *
 * Scope: everything is under .aipr-ui-*. bimber styles bare a / ul / li /
 * button / h2 aggressively, so every element carries a class and the reset
 * below is not optional.
 *
 * Spacing base 8px. No dark-mode block: this renders inside the site's light
 * theme, and the footer's dark ground is a design decision, not a theme state.
 */

/* ─── Type ───────────────────────────────────────────────────
   Self-hosted, never hotlinked. Three weights, and the ceiling is deliberate:
   600 is display, 800 is the wordmark and nothing else. */

@font-face {
    font-family: 'AIPR Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-tight-400.woff2') format('woff2');
}
@font-face {
    font-family: 'AIPR Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-tight-600.woff2') format('woff2');
}
@font-face {
    font-family: 'AIPR Sans';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/inter-tight-800.woff2') format('woff2');
}

:root {
    --aipr-ui-paper: #ffffff;
    --aipr-ui-ink: #0e0e12;
    --aipr-ui-body: #212127;
    --aipr-ui-mute: #62626e;
    --aipr-ui-faint: #9a9aa6;
    --aipr-ui-line: #e7e7ee;
    --aipr-ui-accent: #6c5ce7;
    --aipr-ui-tint: #efedfc;

    /* Footer ground — the funding market band and the interviews people wall
       are already this colour. */
    --aipr-ui-band: #131318;
    --aipr-ui-band-ink: #f5f4fb;
    --aipr-ui-band-mute: #a3a2b3;
    --aipr-ui-band-faint: #74737f;
    --aipr-ui-band-line: rgba(255, 255, 255, .14);

    /* The accent, lifted for dark grounds. #6c5ce7 on #131318 is legible but
       heavy; #a99bff is the same hue at the value the band needs. */
    --aipr-ui-wedge: #6c5ce7;

    --aipr-ui-sans: 'AIPR Sans', -apple-system, BlinkMacSystemFont,
        'SF Pro Text', 'Segoe UI', Roboto, sans-serif;

    --aipr-ui-h: 88px;
    /* Offset for WordPress' admin bar. Zero for readers; the admin-bar rules
       below raise it for logged-in editors, who are also the only people who
       see the site UI while the live switch is off. */
    --aipr-ui-top: 0px;
    --aipr-ui-container: 1264px;
    --aipr-ui-pad: 32px;
}

/* ─── The ground under the page (1.11.0) ─────────────────────
   On a Mac, pulling past the end of the page shows the root background, and
   so does any fraction of a pixel left under the footer. The page was white
   there, so the dark footer ended in a white line (owner, 2026-09-27). The
   root now paints white on the top half of the viewport and the footer's
   colour on the bottom half; the page itself stays white. On iOS, which does
   not fix root backgrounds, the halves are of the document — the same result
   at the two ends. */
html {
    background: #fff linear-gradient(to bottom, #fff 50%, var(--aipr-ui-band) 50%) no-repeat fixed;
}
:where(body) {
    background-color: #fff;
}

/* ─── Reset, scoped ───────────────────────────────────────── */

.aipr-ui-hdr,
.aipr-ui-hdr *,
.aipr-ui-ftr,
.aipr-ui-ftr * {
    box-sizing: border-box;
}

.aipr-ui-hdr [hidden],
.aipr-ui-sdim[hidden] {
    display: none !important;
}

.aipr-ui-hdr ul,
.aipr-ui-ftr ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.aipr-ui-hdr li,
.aipr-ui-ftr li {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    list-style: none;
}

.aipr-ui-hdr li::before,
.aipr-ui-ftr li::before {
    content: none;
}

.aipr-ui-hdr a,
.aipr-ui-ftr a {
    text-decoration: none;
    border: 0;
    box-shadow: none;
    transition: color 120ms ease;
}

.aipr-ui-hdr button,
.aipr-ui-ftr button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    border-radius: 0;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.aipr-ui-ftr h2,
.aipr-ui-ftr p {
    margin: 0;
    padding: 0;
    border: 0;
}

.aipr-ui-hdr :focus-visible,
.aipr-ui-ftr :focus-visible {
    outline: 2px solid var(--aipr-ui-accent);
    outline-offset: 3px;
}

/* WordPress' visually-hidden class. bimber defines it too, but the site UI must
   not depend on a theme it is in the business of replacing — without this the
   wordmark's text alternative prints next to the logo. */
.aipr-ui-hdr .screen-reader-text,
.aipr-ui-ftr .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.aipr-ui-svg {
    display: block;
    height: auto;
}

.aipr-ui-anchor {
    display: block;
    height: 0;
    overflow: hidden;
}

.aipr-ui-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 12px 18px;
    background: var(--aipr-ui-ink);
    color: #fff;
    font-family: var(--aipr-ui-sans);
    font-size: 14px;
    font-weight: 600;
}
.aipr-ui-skip:focus {
    left: 0;
}


/* ─── Header (1.10.0; 88px since 1.11.0) ──────────────────────
   The full lockup, four sections at 17px, and a search field that is
   a field. The lockup is 37px tall: 20px of letters with the wedge hanging
   below them. The letters and the nav share one centre line (21px + 10px),
   and the wedge hangs into the space under it — the bar is centred on the
   letters, not on the whole mark, which is what a masthead with a keel
   looks like. Measured on 1.9.0: 61px tall, 17px above the letters, and the
   owner's first remark on the prototype was that the mark sat too close to
   the top.

   1.12.0 — THE ROW IS CENTRED ON THE BAR, AND THE WEDGE HANGS. 1.10.0 and
   1.11.0 centred the nav and the search field on the letters, and put the
   letters near the top so that the whole mark (letters + wedge) fitted. That
   put everything a reader actually reads in the upper half of the bar: in
   1.11.0 the search field had 16px above it and 32px below. The owner said
   so twice. Now the letters, the nav and the field share the bar's centre
   line (44px): 24px above and below the field, 34px above and below the
   letters, and the wedge hangs into the lower half with 17px to spare. */

.aipr-ui-hdr {
    position: sticky;
    top: var(--aipr-ui-top);
    z-index: 300;
    background: var(--aipr-ui-paper);
    border-bottom: 1px solid var(--aipr-ui-line);
    font-family: var(--aipr-ui-sans);
    transform: translateY(0);
    transition: transform 220ms ease;
}
.aipr-ui-hdr.is-away {
    transform: translateY(-101%);
}
.aipr-ui-hdr.is-static {
    position: relative;
}

.aipr-ui-hdr-in {
    position: relative;
    max-width: var(--aipr-ui-container);
    margin: 0 auto;
    padding: 0 var(--aipr-ui-pad);
    height: var(--aipr-ui-h);
    display: flex;
    align-items: flex-start;
}

.aipr-ui-mark {
    flex: none;
    margin-top: 34px;
    color: var(--aipr-ui-ink);
    line-height: 0;
}
.aipr-ui-mark .aipr-ui-svg {
    height: 37px;
    width: auto;
}

.aipr-ui-nav {
    display: flex;
    align-items: center;
    height: 20px;
    margin: 34px 0 0 48px;
    transition: opacity 120ms ease;
}
.aipr-ui-nav-list {
    display: flex;
    gap: 32px;
}
.aipr-ui-nav-link {
    position: relative;
    display: block;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 20px;
    white-space: nowrap;
    color: var(--aipr-ui-ink);
}
.aipr-ui-nav-link:hover {
    color: var(--aipr-ui-accent);
}
/* No visual mark for the current section (1.12.0). 1.9.0 underlined it in
   purple, 20px from the wedge; 1.10.0–1.11.0 moved an ink bar to the bar's
   bottom edge, 42px under the word, where it read as unrelated to it (owner,
   2026-09-27: "你甚至不要这个下划线我都觉得挺好的"). Every section page opens
   with its own large title and its own tab row, so the header does not need
   to say it a third time. The link keeps aria-current="page" for screen
   readers. */

/* ─── Search ─────────────────────────────────────────────────
   One box, ever. At rest a filled bar with no border; focused, the same box
   turns white with a single ink border and no outline. 1.9.0 drew the input's
   own grey border AND the header's 2px focus ring 3px outside it. */

.aipr-ui-find {
    position: relative;
    flex: none;
    margin: 24px 0 0 auto;
}
.aipr-ui-sq {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 300px;
    height: 40px;
    margin: 0;
    padding: 0 8px 0 12px;
    background: #f3f3f6;
    border: 1.5px solid transparent;
    border-radius: 2px;
    transition: width 180ms ease, background 120ms ease, border-color 120ms ease;
}
.aipr-ui-sq:hover {
    background: #ececf1;
}
.aipr-ui-sq:focus-within,
.aipr-ui-hdr.is-searching .aipr-ui-sq {
    background: #fff;
    border-color: var(--aipr-ui-ink);
}
.aipr-ui-sq-ico {
    width: 17px;
    height: 17px;
    flex: none;
    color: var(--aipr-ui-ink);
}
.aipr-ui-sq input[type="search"] {
    flex: 1;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    border-radius: 0;
    background: transparent !important;
    font-family: var(--aipr-ui-sans);
    font-size: 15px;
    line-height: 1;
    color: var(--aipr-ui-ink);
    -webkit-appearance: none;
    appearance: none;
}
.aipr-ui-sq input[type="search"]::-webkit-search-cancel-button,
.aipr-ui-sq input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    display: none;
}
.aipr-ui-sq input[type="search"]::placeholder {
    color: var(--aipr-ui-mute);
    opacity: 1;
}
.aipr-ui-sq-key {
    flex: none;
    padding: 5px 7px;
    border-radius: 3px;
    background: #e6e6ec;
    font: 600 12px/1 var(--aipr-ui-sans);
    color: var(--aipr-ui-mute);
}
.aipr-ui-hdr .aipr-ui-sq-esc {
    display: none;
    flex: none;
    padding: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--aipr-ui-mute);
}
.aipr-ui-sq:focus-within .aipr-ui-sq-key,
.aipr-ui-hdr.is-searching .aipr-ui-sq-key {
    display: none;
}
.aipr-ui-hdr.is-searching .aipr-ui-sq-esc {
    display: block;
}
.aipr-ui-hdr.is-searching .aipr-ui-sq {
    width: 480px;
}

.aipr-ui-sres {
    position: absolute;
    top: 48px;
    right: 0;
    z-index: 2;
    width: 480px;
    max-height: min(560px, calc(100vh - 140px));
    overflow: auto;
    padding: 8px 0;
    background: #fff;
    border-radius: 2px;
    /* The one shadow in the system: this layer really does float. */
    box-shadow: 0 0 0 1px rgba(14, 14, 18, .06), 0 24px 56px -12px rgba(14, 14, 18, .22);
}
.aipr-ui-sdim {
    position: fixed;
    inset: 0;
    z-index: 299;
    background: rgba(14, 14, 18, .28);
}
.aipr-ui-sg + .aipr-ui-sg {
    border-top: 1px solid var(--aipr-ui-line);
}
.aipr-ui-sg {
    padding: 8px 0;
}
.aipr-ui-sg-h {
    margin: 0;
    padding: 4px 16px 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--aipr-ui-mute);
}
.aipr-ui-sr {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 16px;
    color: var(--aipr-ui-ink);
}
.aipr-ui-sr.is-on,
.aipr-ui-sr:hover {
    background: #f3f3f6;
}
.aipr-ui-sr-face {
    flex: none;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 2px;
    background: #ececf1;
}
.aipr-ui-sr-face img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
    filter: grayscale(1);
}
.aipr-ui-sr-b {
    flex: 1;
    min-width: 0;
}
.aipr-ui-sr-t,
.aipr-ui-sr-s {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aipr-ui-sr-t {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}
.aipr-ui-sr-s,
.aipr-ui-sr-m {
    font-size: 14px;
    line-height: 1.35;
    color: var(--aipr-ui-mute);
}
.aipr-ui-sr-m {
    flex: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.aipr-ui-sr mark {
    background: var(--aipr-ui-tint);
    color: inherit;
    border-radius: 1px;
}
.aipr-ui-sall {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--aipr-ui-ink);
}
.aipr-ui-sall.is-on,
.aipr-ui-sall:hover {
    background: #f3f3f6;
}
.aipr-ui-sall kbd {
    padding: 4px 6px;
    border-radius: 3px;
    background: #e6e6ec;
    font: 600 12px/1 var(--aipr-ui-sans);
    color: var(--aipr-ui-mute);
}
.aipr-ui-snone {
    margin: 0;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--aipr-ui-mute);
}
.aipr-ui-squick {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 16px 10px;
}
.aipr-ui-squick a {
    padding: 7px 12px;
    border-radius: 2px;
    background: #f3f3f6;
    font-size: 14px;
    font-weight: 600;
    color: var(--aipr-ui-ink);
}
.aipr-ui-squick a:hover {
    background: var(--aipr-ui-tint);
}

.aipr-ui-searchbtn {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    color: var(--aipr-ui-ink);
}
.aipr-ui-searchbtn svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* Narrower desktops: the field would reach the nav. */
@media (max-width: 1180px) {
    .aipr-ui-hdr.is-searching .aipr-ui-nav {
        visibility: hidden;
        opacity: 0;
    }
}
@media (max-width: 1040px) {
    .aipr-ui-nav-list {
        gap: 24px;
    }
    .aipr-ui-nav {
        margin-left: 36px;
    }
    .aipr-ui-sq {
        width: 200px;
    }
    .aipr-ui-sq-key {
        display: none;
    }
}

/* ─── Phone and tablet ───────────────────────────────────────
   The mark and a search icon on the first row, the four sections on a second
   row of their own — no burger, no drawer (1.10.0). */

@media (max-width: 900px) {
    :root {
        --aipr-ui-pad: 20px;
        --aipr-ui-h: 108px;
    }
    .aipr-ui-hdr-in {
        height: auto;
        flex-wrap: wrap;
    }
    .aipr-ui-mark {
        margin-top: 24px;
        height: 40px;
    }
    .aipr-ui-mark .aipr-ui-svg {
        height: 28px;
    }
    .aipr-ui-find {
        position: static;
        margin: 12px -8px 0 auto;
    }
    .aipr-ui-searchbtn {
        display: flex;
    }
    .aipr-ui-sq {
        display: none;
        position: absolute;
        top: 12px;
        left: var(--aipr-ui-pad);
        right: var(--aipr-ui-pad);
        width: auto !important;
        height: 40px;
    }
    .aipr-ui-sq input[type="search"] {
        font-size: 16px; /* 16 or iOS zooms the page on focus */
    }
    .aipr-ui-hdr.is-searching .aipr-ui-sq {
        display: flex;
        z-index: 3;
    }
    .aipr-ui-hdr.is-searching .aipr-ui-mark,
    .aipr-ui-hdr.is-searching .aipr-ui-searchbtn {
        visibility: hidden;
    }
    .aipr-ui-sres {
        top: 64px;
        left: 0;
        right: 0;
        width: auto;
        max-height: calc(100vh - 64px - var(--aipr-ui-top));
        border-radius: 0;
        box-shadow: 0 1px 0 var(--aipr-ui-line), 0 24px 40px -20px rgba(14, 14, 18, .25);
    }
    .aipr-ui-nav {
        order: 3;
        flex: 0 0 calc(100% + 2 * var(--aipr-ui-pad));
        height: 44px;
        margin: 0 calc(-1 * var(--aipr-ui-pad));
        padding: 0 var(--aipr-ui-pad);
        border-top: 1px solid var(--aipr-ui-line);
        overflow-x: auto;
        scrollbar-width: none;
    }
    .aipr-ui-nav::-webkit-scrollbar {
        display: none;
    }
    .aipr-ui-nav-list {
        gap: 22px;
    }
    .aipr-ui-nav-link {
        font-size: 15px;
    }
    .aipr-ui-hdr.is-searching .aipr-ui-nav {
        visibility: visible;
        opacity: 1;
    }
}

/* ─── Footer (1.10.0) ────────────────────────────────────────
   One row — the mark left, three columns right — and the page's one label
   style for the column heads. 1.9.0 had 10.5px heads in #74737f, the only
   10.5px on the site and 3.97:1 on this ground, under the 4.5:1 small text
   needs; #a3a2b3 is 7.39:1. */

.aipr-ui-ftr {
    background: var(--aipr-ui-band);
    color: var(--aipr-ui-band-ink);
    font-family: var(--aipr-ui-sans);
    font-size: 15px;
    line-height: 1.6;
    --aipr-ui-wedge: #a99bff;
}
.aipr-ui-ftr-in {
    max-width: var(--aipr-ui-container);
    margin: 0 auto;
    padding: 64px var(--aipr-ui-pad) 0;
}
.aipr-ui-ftr-top {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 48px;
    align-items: start;
}
.aipr-ui-ftr-mark {
    display: inline-block;
    color: var(--aipr-ui-band-ink);
    line-height: 0;
}
.aipr-ui-ftr-mark .aipr-ui-svg {
    height: 52px;
    width: auto;
}
.aipr-ui-wedge {
    /* Two colours, and it is a system rather than an accident: the wordmark is
       ink or white, the wedge carries the brand colour. That is what /brand/
       documents ("one colour plus ink"), what every downloadable file in
       assets/brand/ is cut to, and what the site therefore has to match.
       1.3.0 briefly made this currentColor; owner reversed it on 2026-09-14.
       Do not change it back without changing the brand pack and the brand
       page in the same release. */
    fill: var(--aipr-ui-wedge);
}

.aipr-ui-ftr-sub {
    margin-top: 28px;
}
.aipr-ui-ftr-sub-label {
    margin: 0 0 10px !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--aipr-ui-band-mute);
}
.aipr-ui-ftr-sub-todo {
    font-size: 14px;
    color: var(--aipr-ui-band-mute);
}
.aipr-ui-ftr-sub-go {
    margin: 0 !important;
}
.aipr-ui-ftr-sub-go a {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 22px;
    background: var(--aipr-ui-wedge);
    color: var(--aipr-ui-band);
    font-size: 14px;
    font-weight: 600;
    border-radius: 2px;
}
.aipr-ui-ftr-sub-go a:hover {
    background: #fff;
}

.aipr-ui-ftr-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}
.aipr-ui-ftr-col {
    min-width: 0;
}
.aipr-ui-ftr-col-h {
    margin: 0 0 14px !important;
    font-family: var(--aipr-ui-sans) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--aipr-ui-band-mute) !important;
    line-height: 1.4 !important;
}
.aipr-ui-ftr-col ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.aipr-ui-ftr-col a {
    font-size: 15px;
    color: #d6d5de;
}
.aipr-ui-ftr-col a:hover {
    color: var(--aipr-ui-wedge);
}

.aipr-ui-ftr-bot {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 64px;
    padding: 20px 0 28px;
    border-top: 1px solid var(--aipr-ui-band-line);
}
.aipr-ui-ftr-copy {
    font-size: 14px;
    color: var(--aipr-ui-band-mute);
}
.aipr-ui-ftr-social {
    margin-left: auto;
    display: flex;
    gap: 18px;
}
.aipr-ui-ftr-social a {
    display: block;
    color: var(--aipr-ui-band-mute);
}
.aipr-ui-ftr-social a:hover {
    color: var(--aipr-ui-wedge);
}
.aipr-ui-ftr-social svg {
    display: block;
}

@media (max-width: 900px) {
    .aipr-ui-ftr-in {
        padding-top: 48px;
    }
    .aipr-ui-ftr-top {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
    .aipr-ui-ftr-mark .aipr-ui-svg {
        height: 42px;
    }
    .aipr-ui-ftr-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 32px;
    }
    .aipr-ui-ftr-bot {
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 48px;
    }
    .aipr-ui-ftr-social {
        margin-left: 0;
    }
}


/* ─── Theme parts we replaced ────────────────────────────────
   The header rows are gone through the layout filter, so nothing is hidden
   here for them. These three have no filter of their own:

   .g1-footer        the theme's copyright strip; ours carries its own
   .g1-back-to-top   filtered off already, this is belt and braces
   .g1-canvas        the theme's off-canvas drawer. Its template reads the
                     option directly rather than through the layout filter, and
                     a get_template_part() cannot be cancelled from a plugin —
                     so it is hidden rather than suppressed. */

.aipr-ui-on .g1-footer,
.aipr-ui-on .g1-back-to-top,
.aipr-ui-on .g1-canvas,
.aipr-ui-on .g1-canvas-overlay {
    display: none !important;
}

/* The theme's featured-entries hero can be configured to sit above the header.
   With the header now sticky and outside that flow, the setting would overlap.
   Push it back below. */
.aipr-ui-on .g1-featured-row-before-header {
    order: 0;
}

/* WordPress' admin bar is fixed at the top of the viewport, so a sticky header
   at top:0 slides underneath it. These are the widths WP itself switches at:
   32px tall on desktop, 46px on tablet, and below 600px the bar stops being
   fixed and scrolls away, so the offset goes back to zero. */

body.admin-bar {
    --aipr-ui-top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar {
        --aipr-ui-top: 46px;
    }
}
@media screen and (max-width: 600px) {
    body.admin-bar {
        --aipr-ui-top: 0px;
    }
}

/* ─── Preview badge ──────────────────────────────────────────
   Only rendered while the live switch is off, when the site UI is visible to
   administrators alone. It is easy to forget which state the site is in. */

.aipr-ui-preview .aipr-ui-hdr::after {
    content: 'Site UI preview — admins only';
    position: absolute;
    right: var(--aipr-ui-pad);
    bottom: -21px;
    padding: 2px 8px;
    background: var(--aipr-ui-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 0 0 2px 2px;
}

@media (prefers-reduced-motion: reduce) {
    .aipr-ui-hdr,
    .aipr-ui-hdr * {
        transition: none !important;
    }
    .aipr-ui-hdr.is-away {
        transform: none;
    }
}



/* ═══════════════════════════════════════════════════════════════════════
   THE FRONT PAGE                                                 (1.10.0)

   One grammar with the header and the footer. The rules, all of them:

     1. Three voices. 800 is the brand's — the mark, the channel names, an
        amount. 600 is the news — headlines, the nav. The serif is for words a
        person actually said, and for nothing else.
     2. Nine sizes: 12 label · 14 note · 15 short line · 17 item headline and
        nav · 18 standfirst · 20 card headline · 24 amount · 32 channel name ·
        44 lead headline. (1.9.0 measured 18 sizes on this page alone.)
     3. One label: 12px, 600, uppercase, .08em.
     4. One head per block, on both grounds.
     5. Two rules: 2px ink opens a block, 1px separates items. No boxes.
     6. Portraits greyscale (the originals alternate bright orange and grey
        grounds and only read as a set in grey), photographs in colour, and
        no image slot without a real photograph.
     7. Purple is the wedge, the quotation mark, and interaction. Nothing else.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: 'AIPR 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');
}

.aipr-ui-home-wrap {
    display: block;
    width: 100%;
}

.aipr-ui-home {
    --aiprh-amt: #c0b5ff;
    --aiprh-fill: #ececf1;
    --aiprh-serif: 'AIPR Serif', ui-serif, 'New York', Georgia, 'Times New Roman', serif;
    --aiprh-sec: 88px;

    box-sizing: border-box;
    max-width: var(--aipr-ui-container);
    margin: 0 auto;
    padding: 0 var(--aipr-ui-pad);
    font-family: var(--aipr-ui-sans);
    font-size: 16px;
    line-height: 1.5;
    color: var(--aipr-ui-body);
    -webkit-font-smoothing: antialiased;
}
.aipr-ui-home *,
.aipr-ui-home *::before,
.aipr-ui-home *::after {
    box-sizing: border-box;
}

/* Scoped reset at (0,1,0), so the component rules below win by order. The
   border is in the list since 1.10.0: the base layer gives a bare blockquote
   a 2px purple left rule, and until this line the interviews quote wore it. */
.aipr-ui-home :where(h2, h3, p, ol, ul, li, dl, dd, dt, figure, blockquote, table) {
    margin: 0;
    padding: 0;
    border: 0;
}
.aipr-ui-home :where(ol, ul) {
    list-style: none;
}
.aipr-ui-home :where(li)::before {
    content: none;
}
.aipr-ui-home :where(a) {
    color: inherit;
    text-decoration: none;
    border: 0;
    box-shadow: none;
}
.aipr-ui-home :where(img) {
    display: block;
    max-width: 100%;
}
.aipr-ui-home :focus-visible {
    outline: 2px solid var(--aipr-ui-accent);
    outline-offset: 3px;
}

/* ─── The label ─── */
.aiprh-lab {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--aipr-ui-mute);
}
.aiprh-lab i {
    font-style: normal;
    color: var(--aipr-ui-faint);
}
.aiprh-lab a:hover {
    color: var(--aipr-ui-accent);
}

/* ─── Headlines, notes ─── */
.aiprh-h44 {
    font-size: 44px;
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.06;
    color: var(--aipr-ui-ink);
    text-wrap: balance;
}
.aiprh-h32 {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1;
    color: var(--aipr-ui-ink);
}
.aiprh-h20 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: 1.25;
    color: var(--aipr-ui-ink);
    text-wrap: pretty;
}
.aiprh-h17 {
    display: block;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.3;
    color: var(--aipr-ui-ink);
    text-wrap: pretty;
}
.aiprh-meta {
    display: block;
    font-size: 14px;
    line-height: 1.45;
    color: var(--aipr-ui-mute);
}
.aipr-ui-home a:hover .aiprh-hl,
.aiprh-h44 a:hover,
.aiprh-h32 a:hover {
    color: var(--aipr-ui-accent);
}

/* ─── Pictures ─── */
.aiprh-face,
.aiprh-photo {
    display: block;
    overflow: hidden;
    border-radius: 2px;
    background: var(--aiprh-fill);
}
.aiprh-face img,
.aiprh-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.aiprh-face img {
    object-position: 50% 22%;
    filter: grayscale(1);
}
.aiprh-photo img {
    /* Faces sit in the upper half of a press photograph; centre-cropping a
       group shot takes the tops of their heads off. */
    object-position: 50% 30%;
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.aipr-ui-home a:hover .aiprh-photo img,
.aiprh-lead-media:hover img {
    transform: scale(1.02);
}

/* ─── The block head ─── */
.aiprh-sec {
    padding-top: var(--aiprh-sec);
}
.aiprh-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 18px;
    margin-bottom: 32px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--aipr-ui-ink);
}
.aiprh-head-line {
    font-size: 15px;
    color: var(--aipr-ui-mute);
}
.aiprh-head-line b {
    font-weight: 600;
    color: var(--aipr-ui-body);
}
.aiprh-head-links {
    display: flex;
    gap: 20px;
    margin-left: auto;
}
.aiprh-more {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--aipr-ui-ink);
}
.aiprh-more:hover {
    color: var(--aipr-ui-accent);
}

/* ─── 1. Cover ─── */
.aiprh-cover {
    display: grid;
    /* 7 : 5 since 1.11.0. At 8 : 4 the photograph was 768 × 480 and the rail
       beside it held three items and then 300px of nothing (owner,
       2026-09-27). Now the photograph is 672 × 420, the rail holds six, and
       the two columns end at about the same height. */
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px;
    padding-top: 32px;
}
.aiprh-lead-media {
    aspect-ratio: 16 / 10;
    margin-bottom: 20px;
}
.aiprh-lead .aiprh-h44 {
    max-width: 21ch;
    margin-top: 10px;
}
.aiprh-dek {
    max-width: 58ch;
    margin-top: 14px;
    font-size: 18px;
    line-height: 1.5;
    color: var(--aipr-ui-body);
}
.aiprh-facts {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 0 40px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--aipr-ui-line);
}
.aiprh-facts dt {
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--aipr-ui-mute);
}
.aiprh-facts dd {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.3;
    color: var(--aipr-ui-ink);
}

.aiprh-rail {
    display: flex;
    flex-direction: column;
}
.aiprh-ri + .aiprh-ri {
    border-top: 1px solid var(--aipr-ui-line);
}
.aiprh-ri a {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 0;
}
.aiprh-ri:first-child a {
    padding-top: 0;
}
.aiprh-ri-img {
    width: 76px;
    height: 76px;
}
.aiprh-ri .aiprh-h17 {
    margin-top: 5px;
}
.aiprh-ri .aiprh-meta {
    margin-top: 4px;
}

/* ─── 2. Interviews ─── */
.aiprh-ivl {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 48px;
    align-items: center;
}
.aiprh-ivl-face {
    aspect-ratio: 4 / 5;
}
.aiprh-q {
    max-width: 27ch;
    margin-top: 18px;
    font-family: var(--aiprh-serif);
    font-size: 34px;
    font-weight: 400;
    line-height: 1.26;
    letter-spacing: -.012em;
    color: var(--aipr-ui-ink);
    text-wrap: pretty;
}
/* The quotation mark, and it is ours: the one the page used to show was
   bimber's icon font, and it went when 1.8.0 stopped loading bimber. */
.aiprh-q::before {
    content: '\201C';
    display: block;
    height: 44px;
    margin-bottom: 6px;
    font-family: var(--aiprh-serif);
    font-size: 104px;
    line-height: .86;
    color: var(--aipr-ui-accent);
}
.aiprh-q--title {
    font-family: var(--aipr-ui-sans);
    font-weight: 600;
    letter-spacing: -.025em;
}
.aiprh-q--title::before {
    content: none;
}
.aiprh-q a:hover {
    color: var(--aipr-ui-accent);
}
.aiprh-who {
    display: block;
    margin-top: 24px;
}
.aiprh-who b {
    display: block;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--aipr-ui-ink);
}
.aiprh-who span {
    font-size: 14px;
    color: var(--aipr-ui-mute);
}
.aiprh-read {
    display: inline-block;
    margin-top: 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--aipr-ui-ink);
}
.aiprh-read:hover {
    color: var(--aipr-ui-accent);
}
.aiprh-ivc {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 40px 32px;
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--aipr-ui-line);
}
.aiprh-ivc-img {
    aspect-ratio: 4 / 5;
    margin-bottom: 14px;
}
.aiprh-ivc .aiprh-meta {
    margin-top: 2px;
}
.aiprh-topic {
    display: block;
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--aipr-ui-body);
    text-wrap: pretty;
}
.aiprh-ivc a:hover .aiprh-topic,
.aiprh-ivc a:hover .aiprh-h17 {
    color: var(--aipr-ui-accent);
}

/* ─── 3. Funding: same parts, the other ground ─── */
.aiprh-band {
    margin-top: var(--aiprh-sec);
    padding: 64px 0 72px;
    background: var(--aipr-ui-band);
    color: #d6d5de;
}
/* Full-bleed without a horizontal scrollbar — the same construction the
   funding and interviews channels use for their own bands. */
@supports (clip-path: inset(0 -100vmax)) {
    .aiprh-band {
        box-shadow: 0 0 0 100vmax var(--aipr-ui-band);
        clip-path: inset(0 -100vmax);
    }
}
.aiprh-band .aiprh-head {
    border-bottom-color: var(--aipr-ui-band-ink);
}
.aiprh-band .aiprh-h32,
.aiprh-band .aiprh-more,
.aiprh-band .aiprh-h17 {
    color: var(--aipr-ui-band-ink);
}
.aiprh-band .aiprh-head-line,
.aiprh-band .aiprh-meta,
.aiprh-band .aiprh-lab {
    color: var(--aipr-ui-band-mute);
}
.aiprh-band .aiprh-head-line b {
    color: var(--aipr-ui-band-ink);
}
.aiprh-band .aiprh-h32 a:hover,
.aiprh-band .aiprh-more:hover,
.aiprh-band a:hover .aiprh-hl {
    color: var(--aiprh-amt);
}
.aiprh-band .aiprh-photo {
    background: #22222a;
}
.aiprh-fc {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px 32px;
}
.aiprh-fc-img {
    aspect-ratio: 3 / 2;
}
.aiprh-amt {
    display: block;
    margin-top: 16px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--aiprh-amt);
    font-variant-numeric: tabular-nums;
}
.aiprh-amt-word {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
}
.aiprh-fc .aiprh-h17 {
    margin-top: 8px;
}
.aiprh-fc .aiprh-meta {
    margin-top: 6px;
}
.aiprh-fmore {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--aipr-ui-band-line);
}
.aiprh-fmore > .aiprh-lab {
    margin-bottom: 4px;
}
.aiprh-fl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 48px;
}
.aiprh-fl li {
    border-bottom: 1px solid var(--aipr-ui-band-line);
}
.aiprh-fl a {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 16px;
    align-items: baseline;
    padding: 13px 0;
}
.aiprh-fl-amt {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--aiprh-amt);
    font-variant-numeric: tabular-nums;
}
.aiprh-fall {
    display: inline-block;
    margin-top: 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--aipr-ui-band-ink);
}
.aiprh-fall:hover {
    color: var(--aiprh-amt);
}

/* ─── 4. Intelligence ─── */
.aiprh-in {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
}
.aiprh-in a {
    display: block;
}
.aiprh-in .aiprh-h20 {
    margin-top: 8px;
}
.aiprh-claim {
    display: block;
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--aipr-ui-mute);
    text-wrap: pretty;
}
.aiprh-voice {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-top: 18px;
}
.aiprh-voice-img {
    width: 36px;
    height: 36px;
}
.aiprh-voice > span:last-child {
    font-size: 14px;
    line-height: 1.35;
    color: var(--aipr-ui-mute);
}
.aiprh-voice b {
    display: block;
    font-weight: 600;
    color: var(--aipr-ui-ink);
}

/* ─── 5. Events ─── */
.aiprh-evl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 32px;
}
.aiprh-evl li {
    border-top: 1px solid var(--aipr-ui-line);
}
.aiprh-evl li:nth-child(-n + 3) {
    border-top: 0;
}
.aiprh-evl a {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    padding: 18px 0;
}
.aiprh-evl li:nth-child(-n + 3) a {
    padding-top: 0;
}
.aiprh-ev-d {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.45;
    color: var(--aipr-ui-ink);
    font-variant-numeric: tabular-nums;
}
.aiprh-ev-t .aiprh-lab {
    color: var(--aipr-ui-accent);
    margin-bottom: 2px;
}
.aiprh-ev-t .aiprh-meta {
    margin-top: 4px;
}

/* The page closes before the footer instead of running into it. 1.9.0 left
   8.5px between the last event and the dark ground; peers measured
   2026-09-27 leave 34–140px, median about 95. */
.aiprh-end {
    height: 120px;
}

/* ─── Narrower desktops ─── */
@media (max-width: 1100px) {
    .aiprh-ivc {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .aiprh-ivc > li:nth-child(n + 7) {
        display: none;
    }
    .aiprh-fc,
    .aiprh-in {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 40px;
    }
    .aiprh-evl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .aiprh-evl li:nth-child(3) {
        border-top: 1px solid var(--aipr-ui-line);
    }
    .aiprh-evl li:nth-child(3) a {
        padding-top: 18px;
    }
}

/* ─── Phone ─── */
@media (max-width: 760px) {
    .aipr-ui-home {
        --aiprh-sec: 56px;
    }
    .aiprh-cover {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding-top: 16px;
    }
    .aiprh-lead-media {
        aspect-ratio: 3 / 2;
    }
    .aiprh-h44 {
        font-size: 30px;
    }
    .aiprh-dek {
        font-size: 16px;
    }
    .aiprh-facts {
        gap: 0 20px;
    }
    .aiprh-facts dd {
        font-size: 15px;
    }
    .aiprh-ri:first-child {
        border-top: 1px solid var(--aipr-ui-line);
    }
    .aiprh-ri:first-child a {
        padding-top: 18px;
    }
    .aiprh-ri a {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 14px;
        padding: 18px 0;
    }
    .aiprh-ri-img {
        width: 64px;
        height: 64px;
    }

    .aiprh-head {
        margin-bottom: 24px;
    }
    .aiprh-h32 {
        font-size: 28px;
    }
    .aiprh-head-line {
        order: 3;
        flex-basis: 100%;
        font-size: 14px;
    }
    .aiprh-head-links .aiprh-more:not(:last-child) {
        display: none;
    }

    .aiprh-ivl {
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 16px;
        align-items: start;
    }
    .aiprh-ivl-t {
        display: contents;
    }
    .aiprh-ivl-face {
        grid-row: 1 / span 2;
    }
    .aiprh-ivl-t > .aiprh-lab {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
    }
    .aiprh-who {
        grid-column: 2;
        grid-row: 2;
        margin-top: 0;
    }
    .aiprh-q {
        grid-column: 1 / -1;
        grid-row: 3;
        max-width: none;
        margin-top: 8px;
        font-size: 25px;
    }
    .aiprh-q::before {
        height: 34px;
        font-size: 80px;
    }
    .aiprh-read {
        grid-column: 1 / -1;
        grid-row: 4;
        margin-top: 0;
    }

    /* Swipe rails. Overflow is contained in the element — a negative margin
       here would make the page itself scroll sideways. */
    .aiprh-ivc,
    .aiprh-fc {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .aiprh-ivc::-webkit-scrollbar,
    .aiprh-fc::-webkit-scrollbar {
        display: none;
    }
    .aiprh-ivc {
        grid-auto-columns: 148px;
        gap: 16px;
        margin-top: 36px;
        padding-top: 24px;
        border-top: 0;
    }
    .aiprh-ivc > li:nth-child(n + 7) {
        display: block;
    }
    .aiprh-fc {
        grid-auto-columns: 264px;
        gap: 16px;
    }
    .aiprh-ivc > li,
    .aiprh-fc > li {
        scroll-snap-align: start;
    }

    .aiprh-band {
        padding: 48px 0 56px;
    }
    .aiprh-fl {
        grid-template-columns: minmax(0, 1fr);
    }
    .aiprh-fl a {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .aiprh-in {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
    .aiprh-in > li + li {
        border-top: 1px solid var(--aipr-ui-line);
    }
    .aiprh-in a {
        padding: 20px 0;
    }
    .aiprh-in > li:first-child a {
        padding-top: 0;
    }
    .aiprh-in .aiprh-h20 {
        font-size: 18px;
    }

    .aiprh-evl {
        grid-template-columns: minmax(0, 1fr);
    }
    .aiprh-evl li,
    .aiprh-evl li:nth-child(-n + 3) {
        border-top: 1px solid var(--aipr-ui-line);
    }
    .aiprh-evl li:first-child {
        border-top: 0;
    }
    .aiprh-evl a,
    .aiprh-evl li:nth-child(-n + 3) a {
        grid-template-columns: 88px minmax(0, 1fr);
        padding: 16px 0;
    }
    .aiprh-evl li:first-child a {
        padding-top: 0;
    }
    .aiprh-end {
        height: 72px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aiprh-photo img {
        transition: none;
    }
    .aipr-ui-home a:hover .aiprh-photo img,
    .aiprh-lead-media:hover img {
        transform: none;
    }
}