/* Team profile pages (profile-*.html) — SINGLE SOURCE. Inlined into a marked region on every
   consumer by tools/build-profile-pages.py; --check proves no page has drifted from this file.

   PROVENANCE (2026-09-18). This is the stylesheet the profile family was authored with (SON-4173 repo
   worktree, commits f4b70fff68 "text runs beside the portrait and continues under it" and
   7546194f43 "portrait no longer swallows the first mobile screen"). The 2026-09-17 import
   (tools/migrate-team-pages.py) transplanted the pages' content span but this block sat ABOVE the
   masthead in the source, so the pages arrived unstyled; a reconstruction was written from the DOM
   that sized the portrait as a block above the name and lost the editorial layout the owner had
   iterated on. Restored verbatim on the owner's word ("this layout is wrong compared with the
   earlier version"): the portrait FLOATS left inside .pf-written, the name / role / standfirst sit
   beside it and the biography wraps underneath; the connect rail is the second grid column.
   Tokens only; both themes; mobile stacks (float off, capped height). */

/* Executive profile page — hand-authored (SON-4173). Tokens only; both themes. */
/* The opening block is meant to be substantial: its own ground, generous air, and a portrait
   with enough size to anchor the page. Presence without a banner. */
.pf-masthead { padding: clamp(64px, 7vw, 108px) 0 clamp(64px, 7vw, 100px); background: var(--bg-2); border-bottom: 1px solid var(--line-soft); }
/* Two columns: the written block, and the contact rail. Inside the written block the portrait is
   FLOATED, so the name, role, standfirst and biography run beside it and then continue underneath
   without a gap — a grid row would have pushed the prose below the full height of the image. */
.pf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px); column-gap: clamp(36px, 3.4vw, 56px); align-items: start; }
.pf-written { display: flow-root; min-width: 0; }


@media (max-width: 1040px) { .pf-grid { grid-template-columns: 1fr; row-gap: 40px; } }
.pf-portrait { float: left; width: clamp(244px, 21vw, 304px); margin: 6px clamp(28px, 3vw, 44px) 28px 0; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: 0 30px 80px rgba(0, 0, 0, .34); }
.pf-portrait img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.74) contrast(.95) brightness(.93); }
:root[data-theme="light"] .pf-portrait img { filter: saturate(.84) contrast(.93) brightness(1.03); }
:root[data-theme="light"] .pf-portrait { box-shadow: 0 24px 60px rgba(37, 34, 29, .12); }
/* Mobile: the float leaves too little measure beside it, so the portrait goes full width.
   This rule must sit AFTER the base .pf-portrait declaration or width:100% loses the cascade. */
/* Mobile: full width, but capped so the name is above the fold — a 4:5 plate at 350px wide
   is 438px tall and filled the whole first screen on a phone. */
@media (max-width: 680px) { .pf-portrait { float: none; width: 100%; max-height: 330px; margin: 0 0 24px; } }
.pf-name { margin: 0; font-size: clamp(30px, 3.1vw, 44px); line-height: 1.06; letter-spacing: -.025em; font-weight: 500; color: var(--text); white-space: nowrap; }
@media (max-width: 560px) { .pf-name { white-space: normal; font-size: clamp(27px, 7.6vw, 34px); } }
/* The role is a subheading, not metadata: up a level in size, weight and contrast, and pulled
   close to the name so the two read as one identity block. */
.pf-role { margin: 14px 0 0; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.3; font-weight: 500; letter-spacing: -.012em; color: var(--text); }
.pf-stand { margin: 22px 0 0; padding-top: 22px; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.62; color: var(--muted); }

.pf-body { margin: 18px 0 0; font-size: 15.5px; line-height: 1.75; color: var(--muted); }

/* Contact rail — curated details, not a utility widget. No buttons, no download actions. */
.pf-connect { padding: 26px 26px 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
:root[data-theme="light"] .pf-connect { background: rgba(37, 34, 29, .022); }
.pf-sub { margin: 0 0 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); font-weight: 500; }
.pf-contact { list-style: none; margin: 0; padding: 0; }
.pf-contact li { border-top: 1px solid var(--line-soft); }
.pf-contact li:first-child { border-top: 0; }
.pf-contact a, .pf-contact-static { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 18px 0; text-decoration: none; color: inherit; }
.pf-contact-static { padding: 18px 0; }
.pf-contact svg { width: 16px; height: 16px; margin-top: 3px; color: var(--faint); stroke-width: 1.5; transition: color .18s ease; }
.pf-contact-label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.pf-contact-value { display: block; margin-top: 6px; font-size: 15.5px; line-height: 1.4; color: var(--muted); transition: color .18s ease; word-break: break-word; }
.pf-contact a:hover .pf-contact-value, .pf-contact a:focus-visible .pf-contact-value { color: var(--text); }
.pf-contact a:hover svg, .pf-contact a:focus-visible svg { color: var(--text); }
.pf-contact a:focus-visible { outline: 2px solid var(--focus-ring, var(--mineral)); outline-offset: 4px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .pf-contact svg, .pf-contact-value { transition: none; } }
    

/* 2026-09-19: profile content is rendered from data/people.json by tools/build-people.py; the copy is unchanged. */
/* a role title is longer than a name: let it wrap beside the portrait instead of dropping below it */
.pf-portrait[data-role-title] ~ .pf-name { white-space: normal; max-width: none; text-wrap: balance; }