/**
 * site-ui-person-v1.css — THE PERSON FRAME (1.21.0).
 *
 * A page about one person: /interviews/people/<slug>/ (Interviews),
 * /intelligence/voices/<slug>/ (Intelligence) and /author/<slug>/ (Site UI).
 * The channel plugins print it through the public AIPR_UI_Person class and
 * load this file with AIPR_UI_Person::enqueue(). Plan and before/after, owner
 * approved 2026-09-29: https://claude.ai/artifact/NgaQSLwqAXEgybvTSYQUVP
 *
 * The seven rules are the article frame's (site-ui-article-v1.css file
 * header). This file adds no size of its own: every role below is an
 * article-frame role —
 *
 *   name  = headline   42 / 32 phone, 600, -0.028em
 *   role  = standfirst 20 / 18 phone, sans, grey. It was the serif (19px) on
 *                      both channel pages; a job title is ours (rule 1).
 *   bio   = body       18 / 17 phone on the 31px pitch. Authors only: the
 *                      channels hold no biography by rule.
 *   links = byline name 14, 600, ink; purple under the pointer (rule 6).
 *   row   = the list:  label, 17px headline; a claim (our paraphrase) is set
 *                      the same, a quotation is the serif at 17 with our marks.
 *
 * DEPENDS ON site-ui-article-v1.css for the label (.aipr-ui-rub,
 * .aipr-ui-ls-rub), the section head (.aipr-ui-sechead) and the list
 * (.aipr-ui-ls). Tokens and the 'AIPR Sans' / 'AIPR Serif' faces come from
 * site-ui-v7.css, which is on every page.
 *
 * SCOPE: .aipr-ui-p is the root. Every role states font, size, weight, line
 * height and letter-spacing: site-ui-base-v3.css styles bare h1/h2 (h2 gets
 * -0.03em) and the channel pages load their own sheets too.
 *
 * THE FILENAME CARRIES THE DESIGN VERSION. A redesign ships as
 * site-ui-person-v2.css; v1 stays on disk.
 */

.aipr-ui-p {
    --p-serif: 'AIPR Serif', ui-serif, 'New York', Georgia, 'Times New Roman', serif;
    box-sizing: border-box;
    width: 100%;
    max-width: calc(800px + var(--aipr-ui-pad, 32px) * 2);   /* the article column */
    margin: 0 auto;
    padding: 40px var(--aipr-ui-pad, 32px) 96px;
    color: var(--aipr-ui-body);
    font-family: var(--aipr-ui-sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
.aipr-ui-p *, .aipr-ui-p *::before, .aipr-ui-p *::after { box-sizing: border-box; }
.aipr-ui-p :where(h1, h2, h3, p, ul, li, figure) { margin: 0; padding: 0; }
.aipr-ui-p :where(ul) { list-style: none; }
.aipr-ui-p :where(li)::before { content: none; }
.aipr-ui-p a { color: inherit; text-decoration: none; box-shadow: none; border: 0; }
.aipr-ui-p :focus-visible { outline: 2px solid var(--aipr-ui-accent); outline-offset: 3px; }

/* ─── The head ─────────────────────────────────────────────────── */

.aipr-ui-p-head { display: block; }
.aipr-ui-p-head--face {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}
.aipr-ui-p-txt { min-width: 0; }

/* 400:460, the ratio of every portrait on the site; greyscale (front page
   rule 6); a rectangle — circles are byline marks (Interviews, 2026-09-04). */
.aipr-ui-p .aipr-ui-p-face {
    display: block;
    width: 160px;
    max-width: 100%;
    aspect-ratio: 400 / 460;
    overflow: hidden;
    border-radius: 2px;
    background: #f2f2f6;
}
.aipr-ui-p .aipr-ui-p-face img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 22%;
    filter: grayscale(1);
}
/* No photograph: initials, never an empty box. Grey on grey — both channels
   drew purple letters on a lavender panel, and purple is interaction only. */
.aipr-ui-p .aipr-ui-p-face--none {
    display: grid;
    place-items: center;
    font-family: var(--aipr-ui-sans);
    font-size: 42px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    color: var(--aipr-ui-mute);
}

.aipr-ui-p .aipr-ui-p-txt > .aipr-ui-rub { margin-bottom: 14px; }
.aipr-ui-p .aipr-ui-rub a:hover { color: var(--aipr-ui-accent); }

.aipr-ui-p .aipr-ui-p-h1 {
    font-family: var(--aipr-ui-sans);
    font-size: clamp(32px, 4vw, 42px);
    font-weight: 600;
    font-style: normal;
    letter-spacing: -0.028em;
    line-height: 1.1;
    text-transform: none;
    color: var(--aipr-ui-ink);
    text-wrap: balance;
}
.aipr-ui-p .aipr-ui-p-role {
    margin-top: 10px;
    font-family: var(--aipr-ui-sans);
    font-size: 20px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
    line-height: 30px;
    color: var(--aipr-ui-mute);
    text-wrap: pretty;
}
.aipr-ui-p .aipr-ui-p-bio {
    margin-top: 16px;
    max-width: 62ch;
    font-family: var(--aipr-ui-sans);
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
    line-height: 31px;
    color: var(--aipr-ui-body);
    text-wrap: pretty;
}
.aipr-ui-p .aipr-ui-p-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 16px; }
.aipr-ui-p .aipr-ui-p-links a,
.aipr-ui-p .aipr-ui-p-foot a {
    font-family: var(--aipr-ui-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 21px;
    color: var(--aipr-ui-ink);
    transition: color 120ms ease;
}
.aipr-ui-p .aipr-ui-p-links a:hover,
.aipr-ui-p .aipr-ui-p-foot a:hover { color: var(--aipr-ui-accent); }

/* ─── A slot the channel owns (Intelligence's section tabs) ────── */

.aipr-ui-p-slot { margin-top: 40px; }

/* ─── What they said / wrote ───────────────────────────────────── */

.aipr-ui-p-sec { margin-top: 48px; }
.aipr-ui-p-slot + .aipr-ui-p-sec { margin-top: 32px; }
.aipr-ui-p .aipr-ui-ls .aipr-ui-ls-row { gap: 6px; }
.aipr-ui-p .aipr-ui-ls-rub a { transition: color 120ms ease; }
.aipr-ui-p .aipr-ui-ls-rub a:hover { color: var(--aipr-ui-accent); }

/* Words the person said (rule 1): the serif at 17 to sit with the 17px
   headline above it, and our quotation marks in purple (rule 6). */
.aipr-ui-p .aipr-ui-p-said {
    font-family: var(--p-serif);
    font-size: 17px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
    line-height: 25px;
    color: var(--aipr-ui-body);
    text-wrap: pretty;
}
.aipr-ui-p .aipr-ui-p-said::before { content: "\201C"; color: var(--aipr-ui-accent); }
.aipr-ui-p .aipr-ui-p-said::after { content: "\201D"; color: var(--aipr-ui-accent); }
/* Our summary of a row, when it has nothing they said. */
.aipr-ui-p .aipr-ui-p-dek { font-size: 16px; line-height: 25px; color: var(--aipr-ui-mute); }
/* Where it ran: "in <piece>". */
.aipr-ui-p .aipr-ui-p-src { font-size: 14px; line-height: 21px; color: var(--aipr-ui-mute); }
.aipr-ui-p .aipr-ui-p-src a { color: var(--aipr-ui-ink); font-weight: 600; transition: color 120ms ease; }
.aipr-ui-p .aipr-ui-p-src a:hover { color: var(--aipr-ui-accent); }

/* The author page's list keeps its own rows and pager (the views sheet). */
.aipr-ui-p .aipr-ui-pager { margin-top: 32px; }

/* ─── Faces ────────────────────────────────────────────────────── */

.aipr-ui-p .aipr-ui-p-faces {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 20px;
    margin-top: 20px;
}
.aipr-ui-p .aipr-ui-p-faces a { display: block; }
.aipr-ui-p .aipr-ui-p-faces .aipr-ui-p-face { width: 100%; }
.aipr-ui-p .aipr-ui-p-faces .aipr-ui-p-face--none { font-size: 32px; }
.aipr-ui-p .aipr-ui-p-faces a:hover img,
.aipr-ui-p .aipr-ui-p-faces a:focus-visible img { filter: none; }
.aipr-ui-p .aipr-ui-p-faces b {
    display: block;
    margin-top: 10px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 22px;
    color: var(--aipr-ui-ink);
    transition: color 120ms ease;
}
.aipr-ui-p .aipr-ui-p-faces a:hover b { color: var(--aipr-ui-accent); }
.aipr-ui-p .aipr-ui-p-faces span { display: block; margin-top: 2px; font-size: 14px; line-height: 21px; color: var(--aipr-ui-mute); }

/* ─── Foot: 1px rule, ink links ────────────────────────────────── */

.aipr-ui-p .aipr-ui-p-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    margin-top: 56px;
    padding-top: 14px;
    border-top: 1px solid var(--aipr-ui-line);
    font-size: 14px;
    line-height: 21px;
    color: var(--aipr-ui-mute);
}

/* ─── Narrow ───────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .aipr-ui-p { padding: 28px 20px 72px; }
    .aipr-ui-p-head--face { grid-template-columns: 96px minmax(0, 1fr); gap: 18px; }
    .aipr-ui-p .aipr-ui-p-head--face .aipr-ui-p-face { width: 96px; }
    .aipr-ui-p .aipr-ui-p-head .aipr-ui-p-face--none { font-size: 28px; }
    .aipr-ui-p .aipr-ui-p-txt > .aipr-ui-rub { margin-bottom: 8px; }
    .aipr-ui-p .aipr-ui-p-role { font-size: 18px; line-height: 27px; }
    .aipr-ui-p .aipr-ui-p-bio { font-size: 17px; line-height: 29px; }
    .aipr-ui-p .aipr-ui-p-faces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .aipr-ui-p * { transition: none !important; }
}