/* The About pages (T10b, src/about-pages.ts): About ESA, Our teams, a team, the Hall of Fame and one entry.
   On a stage preset they take the stage unit and column back from the inner-page stopgap of css/stage.css; this sheet loads only on these pages. */

/* ---------- frame ---------- */
body.stage main.page { --u: inherit; width: var(--col); max-width: none; margin-inline: calc((100% - var(--col)) / 2); padding: 0; font: inherit; color: inherit; }
/* Classic and Blank: no stage palette, so the same names from the theme's own tokens. */
:where(body:not(.stage)) .people-page { --u: 1.2px; --text: var(--cream); --accent: var(--gold-300); --gold: var(--gold-300); --body-text: var(--cream); --veil: var(--navy-900); --button: var(--navy-800); --button-text: var(--cream); }

.people-page { padding: calc(var(--u) * 40) calc(var(--u) * 40) calc(var(--u) * 24); color: var(--text); font-family: var(--font-stage); text-shadow: var(--halo); }
:where(.people-page) :is(h1, h2, p, ul) { margin: 0; }
.people-page ul { padding: 0; list-style: none; }
.people-page :is(.btn, .pp-switch) { text-shadow: none; }
body.stage main.page .people-page .btn { height: max(44px, calc(var(--u) * 34)); min-height: 0; }
.people-page a:not(.btn) { color: inherit; text-decoration: none; }
.people-page .text-link { color: var(--accent); }

/* ---------- type ---------- */
.pp-eyebrow { display: flex; align-items: center; gap: calc(var(--u) * 12); color: var(--accent); font-size: calc(var(--u) * 13.5); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.pp-eyebrow::after { content: ""; width: calc(var(--u) * 56); height: calc(var(--u) * 1.2); background: var(--gold); }
.pp-title { margin-top: calc(var(--u) * 12); font-size: calc(var(--u) * 40); font-weight: 700; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
.pp-h2 { font-size: calc(var(--u) * 30); font-weight: 700; line-height: 1.1; text-wrap: balance; }
.pp-tagline { margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 18); font-weight: 500; line-height: 1.3; }
:where(.people-page) p { color: var(--body-text); font-size: calc(var(--u) * 14.5); line-height: 1.45; }
.people-page :is(.pp-title, .pp-h2, .pp-hero-name) { font-family: var(--font-stage); letter-spacing: -.01em; text-transform: none; text-shadow: var(--halo); color: var(--text); overflow-wrap: break-word; }
.pp-tagline { color: var(--text); }
.pp-empty { margin-top: calc(var(--u) * 20); padding: calc(var(--u) * 18) calc(var(--u) * 20); border: 1px dashed color-mix(in srgb, var(--gold) 60%, transparent); border-radius: calc(var(--u) * 8); background: color-mix(in srgb, var(--veil) 72%, transparent); }
.pp-label { color: var(--accent); font-size: calc(var(--u) * 13); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.pp-more { display: flex; justify-content: flex-end; margin-top: calc(var(--u) * 18); }
.pp-back { display: inline-flex; align-items: center; gap: calc(var(--u) * 10); min-height: 44px; margin-bottom: calc(var(--u) * 8); font-size: calc(var(--u) * 13); font-weight: 600; }
.pp-back-arrow { position: relative; width: calc(var(--u) * 13); height: calc(var(--u) * 1.6); background: var(--gold); }
.pp-back-arrow::before { content: ""; position: absolute; left: 0; top: 50%; width: calc(var(--u) * 6); height: calc(var(--u) * 6); border: solid var(--gold); border-width: 0 0 calc(var(--u) * 1.6) calc(var(--u) * 1.6); transform: translateY(-50%) rotate(45deg); transform-origin: 30% 70%; }
.pp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 16) calc(var(--u) * 40); margin-top: calc(var(--u) * 28); }
.pp-actions .text-link { margin-top: 0; }

/* ---------- photos: a library image, or a quiet frame the same shape ---------- */
.pp-frame { display: block; border: 1px dashed color-mix(in srgb, var(--gold) 55%, transparent); border-radius: calc(var(--u) * 6); background: linear-gradient(160deg, color-mix(in srgb, var(--veil) 55%, transparent), color-mix(in srgb, var(--button) 70%, transparent)); }
.people-page img { display: block; object-fit: cover; }
.pp-frame-label { display: grid; place-items: center; color: var(--body-text); font-size: calc(var(--u) * 14); text-shadow: var(--halo); }
.pp-frame-label::after { content: "Team photo coming soon"; }

/* ---------- About: intro ---------- */
.pp-intro { position: relative; display: grid; grid-template-columns: calc(var(--u) * 400) 1fr; align-items: center; gap: calc(var(--u) * 20); padding-bottom: calc(var(--u) * 28); border-bottom: 1px solid color-mix(in srgb, var(--text) 45%, transparent); }
.pp-intro-copy { position: relative; z-index: 1; }
.pp-intro .pp-title { font-size: calc(var(--u) * 36); }
/* Copy over the scene: a soft scrim of sky colour behind it, fading out on the art (as the home page's About). */
:is(.pp-intro-copy, .pp-top, .pp-detail-copy, .pp-chapter, .pp-featured-copy, .pp-section, .pp-strip) { isolation: isolate; position: relative; }
:is(.pp-intro-copy, .pp-top, .pp-detail-copy, .pp-chapter, .pp-featured-copy, .pp-section, .pp-strip)::before { content: ""; position: absolute; z-index: -1; inset: calc(var(--u) * -24) calc(var(--u) * -40); background: radial-gradient(closest-side, color-mix(in srgb, var(--veil) 80%, transparent) 60%, transparent); pointer-events: none; }
.pp-intro-copy p { margin-top: calc(var(--u) * 14); max-width: calc(var(--u) * 270); font-size: calc(var(--u) * 15); }
.pp-intro-art { margin-right: calc(var(--u) * -40); }
.pp-group { width: 100%; height: calc(var(--u) * 330); object-fit: cover; -webkit-mask: linear-gradient(90deg, transparent, black 18%), linear-gradient(transparent 0, black 10%, black 85%, transparent); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, black 18%), linear-gradient(transparent 0, black 10%, black 85%, transparent); mask-composite: intersect; }
.pp-group.pp-frame { -webkit-mask: none; mask: none; border-radius: calc(var(--u) * 8); }

/* ---------- people: heading row, switch, portrait cards ---------- */
.pp-section { padding-top: calc(var(--u) * 30); }
.pp-section + .pp-section { margin-top: calc(var(--u) * 6); border-top: 1px solid color-mix(in srgb, var(--text) 30%, transparent); }
.pp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--u) * 16); }
.pp-switch { display: inline-grid; grid-template-columns: 1fr 1fr; width: calc(var(--u) * 240); min-width: 220px; border: calc(var(--u) * 1.5) solid var(--gold); border-radius: calc(var(--u) * 9); overflow: hidden; background: color-mix(in srgb, var(--veil) 70%, transparent); }
.pp-switch a { display: grid; place-items: center; min-height: max(44px, calc(var(--u) * 32)); color: var(--text); font-size: calc(var(--u) * 14); font-weight: 600; }
.pp-switch a[aria-current] { background: var(--gold); color: var(--stage-ink); }
.pp-top .pp-switch { margin-top: calc(var(--u) * 22); }
.pp-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 24) calc(var(--u) * 17); margin-top: calc(var(--u) * 26); }
.pp-cards-3 { grid-template-columns: repeat(3, 1fr); }
.pp-card-photo { width: 100%; aspect-ratio: 178 / 209; height: auto; }
.pp-role { margin-top: calc(var(--u) * 10); color: var(--text); font-size: calc(var(--u) * 17); font-weight: 700; line-height: 1.2; }
.pp-name { margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 13.5); }

/* ---------- About: Hall of Fame strip ---------- */
.pp-strip { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(var(--u) * 28); margin-top: calc(var(--u) * 30); padding-top: calc(var(--u) * 28); border-top: 1px solid color-mix(in srgb, var(--text) 45%, transparent); }
.pp-strip-copy { padding-left: calc(var(--u) * 26); border-left: calc(var(--u) * 1.5) solid var(--gold); }
.pp-strip-copy .pp-h2 { font-size: calc(var(--u) * 36); }
.pp-strip-copy p { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 15); }
.pp-sections { margin-top: calc(var(--u) * 40); }
/* Builder sections under the people: the stage palette, so their text reads in light mode too (the classic hero is dark navy behind cream). */
.pp-sections .sec-hero { border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--veil) 84%, transparent); }
.pp-sections :is(.sec-title, .sec-name) { color: var(--text); font-family: var(--font-stage); letter-spacing: -.01em; text-transform: none; text-shadow: none; }
.pp-sections :is(.sec-sub, .sec-body, .sec-role, .sec-bio, p) { color: var(--body-text); }

/* ---------- laurel: our own drawing around a portrait or the emblem ---------- */
.pp-laurel { position: relative; display: grid; place-items: center; width: calc(var(--u) * 250); aspect-ratio: 1; }
.pp-laurel-art { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--gold); filter: drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 3) color-mix(in srgb, var(--veil) 80%, transparent)); }
.pp-laurel .pp-portrait { position: relative; width: 56%; height: auto; aspect-ratio: 4 / 5; margin-bottom: 14%; }
.pp-laurel-small { width: calc(var(--u) * 108); }
.pp-emblem { position: relative; width: 44%; height: auto; margin-bottom: 8%; object-fit: contain; }

/* ---------- teams ---------- */
.pp-top { padding-bottom: calc(var(--u) * 8); }
.pp-teams { display: grid; gap: calc(var(--u) * 26); margin-top: calc(var(--u) * 28); }
.pp-team { display: grid; grid-template-columns: calc(var(--u) * 300) 1fr; align-items: center; gap: calc(var(--u) * 28); }
.pp-team-photo { width: 100%; aspect-ratio: 300 / 130; height: auto; }
.pp-team-copy p { margin-top: calc(var(--u) * 8); max-width: calc(var(--u) * 260); }
.pp-team-copy .text-link { margin-top: calc(var(--u) * 14); }
.pp-detail { display: grid; grid-template-columns: 1fr calc(var(--u) * 400); align-items: center; gap: calc(var(--u) * 24); padding-bottom: calc(var(--u) * 20); border-bottom: 1px solid color-mix(in srgb, var(--text) 45%, transparent); }
.pp-detail-photo { width: 100%; aspect-ratio: 400 / 190; height: auto; }
.pp-lede { margin-top: calc(var(--u) * 16); max-width: calc(var(--u) * 640); color: var(--text); font-size: calc(var(--u) * 15.5); }
.pp-do { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: calc(var(--u) * 14); }
.pp-do li { padding: calc(var(--u) * 2) calc(var(--u) * 16); color: var(--body-text); font-size: calc(var(--u) * 14.5); text-align: center; }
.pp-do li + li { border-left: calc(var(--u) * 1.5) solid var(--gold); }

/* ---------- Hall of Fame ---------- */
.pp-featured { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: calc(var(--u) * 36); margin-top: calc(var(--u) * 16); padding-bottom: calc(var(--u) * 26); border-bottom: 1px solid color-mix(in srgb, var(--text) 45%, transparent); }
.pp-hero-name { color: var(--text); font-size: calc(var(--u) * 52); font-weight: 700; line-height: 1; }
.pp-featured-copy .pp-label { margin-top: calc(var(--u) * 10); }
.pp-featured-copy p + p { margin-top: calc(var(--u) * 6); }
.pp-featured-copy .btn { margin-top: calc(var(--u) * 22); }
.pp-fame { grid-template-columns: repeat(4, 1fr); text-align: center; }
.pp-fame .pp-laurel { width: 100%; }
.pp-chapter { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: calc(var(--u) * 30); margin-top: calc(var(--u) * 10); padding-bottom: calc(var(--u) * 22); border-bottom: 1px solid color-mix(in srgb, var(--text) 45%, transparent); }
.pp-chapter .pp-laurel { width: calc(var(--u) * 210); }
.pp-chapter p { margin-top: calc(var(--u) * 10); max-width: calc(var(--u) * 380); font-size: calc(var(--u) * 15.5); }
.pp-prose p { margin-top: calc(var(--u) * 10); max-width: calc(var(--u) * 640); }
.pp-moments { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--u) * 14); margin-top: calc(var(--u) * 16); }
.pp-moment { width: 100%; aspect-ratio: 3 / 2; height: auto; }

/* ---------- phone (the 390 px references) ---------- */
@media (max-width: 699px) {
  .people-page { padding: calc(var(--u) * 20) calc(var(--u) * 18) calc(var(--u) * 16); }
  .pp-title { font-size: calc(var(--u) * 32); }
  .pp-h2, .pp-strip-copy .pp-h2 { font-size: calc(var(--u) * 26); }
  .pp-tagline { font-size: calc(var(--u) * 16); }
  :where(.people-page) p { font-size: calc(var(--u) * 14); }
  .pp-intro, .pp-team, .pp-detail, .pp-featured, .pp-chapter { grid-template-columns: 1fr; }
  :is(.pp-intro-copy, .pp-top, .pp-detail-copy, .pp-chapter, .pp-featured-copy, .pp-section, .pp-strip)::before { inset: calc(var(--u) * -16) 0; }
  .pp-intro-copy p { max-width: none; font-size: calc(var(--u) * 14); }
  .pp-intro-art { margin: 0 calc(var(--u) * -18); }
  .pp-group { height: calc(var(--u) * 250); -webkit-mask: linear-gradient(transparent, black 12%, black 88%, transparent); mask: linear-gradient(transparent, black 12%, black 88%, transparent); }
  .pp-head { flex-direction: column; align-items: flex-start; }
  .pp-switch { width: 100%; }
  .pp-cards, .pp-fame { grid-template-columns: repeat(2, 1fr); gap: calc(var(--u) * 16) calc(var(--u) * 12); }
  .pp-cards-3 { grid-template-columns: 1fr; }
  .pp-cards-3 .pp-card { display: grid; grid-template-columns: calc(var(--u) * 120) 1fr; grid-template-rows: auto auto; column-gap: calc(var(--u) * 16); align-content: center; }
  .pp-cards-3 .pp-card-photo { grid-row: span 2; aspect-ratio: 4 / 3; }
  .pp-cards-3 .pp-role { align-self: end; margin-top: 0; }
  .pp-role { font-size: calc(var(--u) * 15); }
  .pp-more { justify-content: center; }
  .pp-strip { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: calc(var(--u) * 14); }
  .pp-strip-copy { padding-left: 0; border-left: 0; }
  .pp-strip .btn { width: 100%; }
  .pp-do { grid-template-columns: repeat(3, 1fr); }
  .pp-do li { padding: 0 calc(var(--u) * 6); font-size: calc(var(--u) * 13); }
  .pp-featured, .pp-chapter { justify-items: center; text-align: center; }
  .pp-hero-name { font-size: calc(var(--u) * 40); }
  .pp-chapter p { max-width: none; }
  .pp-actions { flex-direction: column; align-items: stretch; text-align: center; }
  .pp-actions .text-link { justify-content: center; }
}