/* The brand roster and profile, Release 1.2 (mockup approved by Christian, 25/October/2026). Ported from the
   approved mockup and scoped under .plx (the wrapper on the signed-in brand's roster and on every profile), so
   nothing here can reach another page. Tokens: the site's own, under the names the mockup used. */
.plx {
  --gold: var(--brand-gold); --gold-deep: var(--brand-gold-deep); --gold-soft: var(--brand-gold-soft);
  --sand: var(--bg-soft); --ground: var(--bg);
}
.plx .sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.plx .dot { padding-inline: 0.15em; color: var(--ink-muted); }
.plx .nowrap { white-space: nowrap; }
/* Form controls take the page's typeface (the browser's own otherwise). */
.plx input,.plx select,.plx textarea { font: inherit; }

.plx .btn[disabled],.plx .btn[aria-disabled="true"] { background: var(--sand); color: var(--ink-muted); border-color: var(--rule); cursor: not-allowed; }

/* ── Marks: Verified (gold fill, ink text, drawn tick, 8.7:1),
   Represented (ink fill, paper text), Self-declared (hairline). ── */
.plx .marks { display: flex; flex-wrap: wrap; gap: 6px; }
.plx .mk {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 9px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.3;
  text-transform: uppercase; white-space: nowrap;
}
.plx .mk--ver { background: var(--gold); color: var(--ink); }
.plx .mk--ver::before {
  content: ""; flex: none; width: 8px; height: 4px; margin-top: -2px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
.plx .mk--rep { background: var(--ink); color: var(--paper); }
.plx .mk--self { border: 1px solid var(--rule); color: var(--ink-muted); padding: 4px 8px; }
.plx .mk-when { font-weight: 400; letter-spacing: 0.06em; }
/* A mark wider than its column wraps inside its own box instead of pushing the card past the screen: the Dutch
   "Vertegenwoordigd door AoS" on a phone card did (26/October/2026, the roster in French and Dutch). A mark that
   fits, every English one included, lays out exactly as before. */
.plx .marks > .mk { max-width: 100%; white-space: normal; }


/* Form fields: a 1px ink-muted border (5.6:1), so the field's edge passes the
   3:1 asked of a control. The live .quiz-select border is ink at 18% (1.5:1). */
.plx .f-label { display: block; margin-bottom: 6px; font-size: 0.85rem; font-weight: 700; line-height: 1.3; color: var(--ink-soft); }
.plx .f-input,.plx .f-select {
  width: 100%; height: 48px; padding: 0 14px;
  font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--ink-muted); border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.plx .f-select {
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%233D3833' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.plx .f-input[type="search"] {
  padding-left: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='5' stroke='%236B6359' stroke-width='1.4' fill='none'/%3E%3Cpath d='M10.3 10.3L15 15' stroke='%236B6359' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 14px center;
}
.plx .f-input::placeholder { color: var(--ink-muted); opacity: 1; }
.plx .f-input:focus,.plx .f-select:focus { outline: 2px solid var(--ink); outline-offset: 1px; }


/* ══ The roster, as a signed-in brand sees it ══ */

/* A compact header: the title, the count, the brief link and the key to the
   marks. The public page's photograph and lede are left out for brands. */
.plx .r-head { padding-block: clamp(20px, 4vw, 48px) clamp(16px, 2.6vw, 28px); }
.plx .r-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-6); }
.plx .r-title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-5); }
.plx .r-title { font-size: clamp(2.2rem, 4.2vw, 3.2rem); font-weight: 300; letter-spacing: -0.025em; line-height: 1.02; }
.plx .r-total { font-size: 1.05rem; color: var(--ink-soft); }
.plx .r-total strong { color: var(--ink); font-weight: 700; }
.plx .r-brief { font-size: 0.95rem; color: var(--ink-soft); }
.plx .r-brief .text-link { display: inline-flex; align-items: center; min-height: 44px; }
.plx .r-key { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: var(--s-4); }
.plx .r-key li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-size: 0.9rem; line-height: 1.45; color: var(--ink-soft); }

/* Filters: one quiet row on a wide screen, behind a "Filters" button below
   1024px. They act as you change them (no "Show athletes" press). */
.plx .r-tools { border-block: 1px solid var(--rule); background: var(--paper); padding-block: var(--s-5); }
.plx .r-filters { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) auto; gap: var(--s-4); align-items: end; }
/* Release 1.2: a fifth column once athletes show a city (the City filter is there only then). */
@media (min-width: 1024px) { .plx .r-filters:has(#f-city) { grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)) auto; } }
.plx .f-check {
  display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 var(--s-4);
  border: 1px solid var(--ink-muted); background: var(--paper);
  font-size: 0.98rem; color: var(--ink); white-space: nowrap; cursor: pointer;
}
.plx .f-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.plx .r-filters-toggle,.plx .r-done,.plx .r-go { display: none; }
html:not(.js) .plx .r-go { display: inline-flex; }

@media (max-width: 1023px) {
  .plx .r-tools { padding-block: var(--s-4); }
  .plx .r-filters-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
    width: 100%; min-height: 48px; padding: 0 var(--s-4);
    border: 1px solid var(--ink); background: var(--paper);
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  }
  .plx .r-filters-state { font-size: 0.9rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-soft); display: inline-flex; align-items: center; gap: var(--s-3); }
  .plx .r-filters-state::after {
    content: ""; width: 9px; height: 9px; margin-top: -4px;
    border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg);
    transition: transform 0.3s var(--ease);
  }
  .plx .r-filters-toggle[aria-expanded="true"] .r-filters-state::after { transform: rotate(-135deg); margin-top: 4px; }
  .plx .r-filters { grid-template-columns: minmax(0, 1fr); margin-top: var(--s-4); }
  .js .plx .r-filters { display: none; }
  .js .plx .r-filters.is-open { display: grid; }
  .plx .r-done { display: flex; width: 100%; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .plx .r-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plx .r-filter--q,.plx .r-done { grid-column: 1 / -1; }
}

/* The results line: how many, the clear link and the sort. */
.plx .r-results { padding-block: var(--s-5) clamp(64px, 8vw, 112px); }
.plx .r-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-5); }
.plx .r-bar-left { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); }
.plx .r-count { font-size: 1rem; color: var(--ink-soft); }
.plx .r-count strong { color: var(--ink); }
.plx .r-clear { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.95rem; }
.plx .r-sort { display: flex; align-items: center; gap: var(--s-3); }
.plx .r-sort .f-label { margin: 0; white-space: nowrap; }
.plx .r-sort .f-select { width: auto; min-width: 196px; }
/* On a phone the count and the sort share one line; the label stays for
   screen readers, and the menu reads "Verified first" on its own. */
@media (max-width: 599px) {
  .plx .r-bar { flex-wrap: nowrap; }
  .plx .r-sort .f-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .plx .r-sort .f-select { min-width: 0; width: 190px; }
  .plx .r-key li { font-size: 0.88rem; }
}

/* Cards: one column of compact rows on a phone, then 2, 3 and 4 across. */
.plx .r-grid { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
.plx .r-grid > li { display: flex; }
@media (min-width: 600px) { .plx .r-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) 20px; } }
@media (min-width: 900px) { .plx .r-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .plx .r-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); } }

/* The athlete card. The whole card is one target (the name's link stretched
   over it), no text sits on the photograph, and the figures sit at the foot
   of every card so they line up across a row. */
.plx .ac {
  position: relative; display: flex; flex-direction: column; width: 100%;
  background: var(--paper); border-top: 3px solid var(--gold);
  transition: box-shadow 0.3s var(--ease);
}
.plx .ac:hover { box-shadow: 0 4px 24px rgba(13, 13, 13, 0.08); }
.plx .ac:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.plx .ac-link:focus-visible { outline: none; }
.plx .ac-photo { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand); }
.plx .ac-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plx .ac-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.plx .ac-name { font-size: 1.25rem; font-weight: 400; line-height: 1.22; letter-spacing: -0.01em; }
.plx .ac-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.plx .ac-sport { margin-top: 6px; font-size: 0.95rem; font-weight: 700; line-height: 1.4; color: var(--ink); }
.plx .ac-club { margin-top: 2px; font-size: 0.92rem; line-height: 1.45; color: var(--ink-soft); }
.plx .ac .marks { margin-top: 14px; }

.plx .ac-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px var(--s-3);
  padding-top: var(--s-4); border-top: 1px solid var(--rule);
}
.plx .ac-kf { grid-column: 1 / -1; }
.plx .ac-kf dd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--s-2); }
.plx .ac-kf-num { font-size: 2.2rem; font-weight: 300; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.plx .ac-kf-unit { font-size: 0.95rem; color: var(--ink-soft); }
.plx .ac-stats dt { font-size: 0.82rem; line-height: 1.3; color: var(--ink-muted); }
.plx .ac-stats dd { margin-top: 2px; font-size: 1rem; line-height: 1.35; color: var(--ink); }
/* One fixed line height, so a card with a rate and one without end level. */
.plx .ac-rate { margin-top: var(--s-4); padding-top: 14px; border-top: 1px solid var(--rule); font-size: 0.95rem; line-height: 26px; color: var(--ink-soft); }
.plx .ac-rate strong { font-size: 1.1rem; line-height: 26px; font-weight: 700; color: var(--ink); }
.plx .ac-rate--none { font-size: 0.9rem; color: var(--ink-muted); }
/* A space before the figures, however short the words above them. */
.plx .ac-spacer { flex: 1 0 18px; }

@media (prefers-reduced-motion: no-preference) {
  .plx .ac-photo img { transition: transform 0.6s var(--ease); }
  .plx .ac:hover .ac-photo img { transform: scale(1.04); }
}

/* On a phone: a compact row. The photograph beside the name, then the
   figures across the card's full width. */
@media (max-width: 599px) {
  .plx .ac {
    display: grid; grid-template-columns: 104px minmax(0, 1fr);
    grid-template-areas: "photo id" "photo marks" "stats stats" "rate rate";
    grid-template-rows: auto 1fr auto auto;
    column-gap: var(--s-4); padding: var(--s-4);
  }
  .plx .ac-photo { grid-area: photo; aspect-ratio: 3 / 4; align-self: start; }
  .plx .ac-body { display: contents; }
  .plx .ac-id { grid-area: id; }
  .plx .ac .marks { grid-area: marks; margin-top: 10px; align-self: start; }
  .plx .ac-spacer { display: none; }
  .plx .ac-name { font-size: 1.15rem; }
  .plx .ac-sport { font-size: 0.92rem; margin-top: 4px; }
  .plx .ac-club { font-size: 0.9rem; }
  .plx .ac-stats { grid-area: stats; grid-template-columns: 1.15fr 1fr 0.9fr; margin-top: var(--s-4); padding-top: 14px; column-gap: var(--s-3); }
  .plx .ac-kf { grid-column: auto; }
  .plx .ac-kf dd { display: block; }
  .plx .ac-kf-num { display: block; font-size: 1.75rem; }
  .plx .ac-kf-unit { display: block; margin-top: 4px; font-size: 0.82rem; color: var(--ink-muted); }
  .plx .ac-rate { grid-area: rate; margin-top: 14px; padding-top: 12px; }
  .plx .mk { font-size: 0.72rem; padding: 4px 8px; }
}

.plx .r-empty { padding-block: var(--s-7); border-top: 1px solid var(--rule); }
.plx .r-empty h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 400; letter-spacing: -0.015em; line-height: 1.2; }
.plx .r-empty .btn { margin-top: var(--s-5); }
.plx .r-foot { margin-top: clamp(40px, 5vw, 64px); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.plx .r-foot p { max-width: 72ch; font-size: 0.95rem; line-height: 1.55; color: var(--ink-soft); }

/* ══ A profile, as a signed-in brand sees it ══ */

/* Hero: the name, the headline as its subtitle, the marks and the button,
   with the athlete's photograph beside them from 1024px (no text on it).
   Below 1024px the photograph leads, full width. */
.plx .pf-hero { padding-top: clamp(16px, 2.4vw, 32px); }
.plx .pf-hero-grid { display: grid; }
.plx .pf-photo { position: relative; margin: 0 calc(-1 * var(--gutter)); aspect-ratio: 3 / 2; overflow: hidden; background: var(--sand); }
.plx .pf-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.plx .pf-back {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: var(--s-3);
  font-size: 0.92rem; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.plx .pf-back::before { content: ""; width: 7px; height: 7px; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); }
.plx .pf-back:hover { color: var(--gold-deep); }
.plx .pf-meta { margin-top: var(--s-3); font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.plx .pf-meta strong { display: block; color: var(--ink); font-weight: 700; }
.plx .pf-meta > span:not(.dot) { display: block; }
.plx .pf-name { margin-top: var(--s-2); font-size: clamp(2.6rem, 5.4vw, 4.6rem); font-weight: 300; line-height: 1; letter-spacing: -0.03em; }
.plx .pf-name--long { font-size: clamp(2.2rem, 4.4vw, 3.8rem); }
.plx .pf-headline { margin-top: var(--s-4); max-width: 36ch; font-size: clamp(1.15rem, 1.7vw, 1.42rem); font-weight: 300; font-style: italic; line-height: 1.45; letter-spacing: -0.005em; color: var(--ink-soft); }
.plx .pf-hero .marks { margin-top: var(--s-5); }
.plx .pf-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-6); }
.plx .pf-cta-note { max-width: 42ch; font-size: 0.9rem; line-height: 1.5; color: var(--ink-muted); }
@media (min-width: 600px) and (max-width: 1023px) { .plx .pf-photo { aspect-ratio: 16 / 9; } }
@media (min-width: 1024px) {
  .plx .pf-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 80px); align-items: center; }
  .plx .pf-photo { order: 2; margin: 0; aspect-ratio: auto; height: clamp(420px, 33vw, 500px); }
  .plx .pf-back { margin-top: 0; }
}
/* Below 1024px the button lives in the bar at the foot of the screen. */
@media (max-width: 1023px) {
  .plx .pf-cta .btn { display: none; }
  .plx .pf-cta { margin-top: var(--s-4); }
  .plx .pf-two .pf-cta,.plx .pf-close-grid .pf-cta { display: none; }
}

/* The key figures: five cells between hairlines; two columns on a phone,
   with the guide rate across the full width. */
.plx .pf-kf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: clamp(28px, 3.4vw, 44px); border-block: 1px solid var(--rule); }
.plx .pf-kf > div { min-width: 0; padding: 20px 20px 22px; border-left: 1px solid var(--rule); }
.plx .pf-kf > div:first-child { padding-left: 0; border-left: 0; }
.plx .pf-kf dt { font-size: 0.85rem; font-weight: 700; line-height: 1.3; color: var(--ink-soft); }
.plx .pf-kf dd { margin-top: 8px; }
.plx .pf-kf .v { display: block; font-size: clamp(1.7rem, 2.3vw, 2.15rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.plx .pf-kf .s { display: block; margin-top: 6px; font-size: 0.88rem; line-height: 1.4; color: var(--ink-muted); }
.plx .pf-kf .mk { font-size: 0.82rem; padding: 7px 12px; margin-top: 2px; }
@media (max-width: 1023px) {
  .plx .pf-kf { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 0; }
  .plx .pf-kf > div { padding: 16px 0 18px; border-left: 0; border-bottom: 1px solid var(--rule); }
  .plx .pf-kf > div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--rule); }
  .plx .pf-kf > div:last-child:nth-child(odd) { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
}

/* Values and languages: one quiet line under the figures. */
.plx .pf-fit { display: grid; gap: var(--s-4) var(--s-7); padding-block: 22px; border-bottom: 1px solid var(--rule); }
.plx .pf-fit-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.plx .pf-fit-label { margin-right: 6px; font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); }
.plx .chip { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border: 1px solid var(--rule); background: var(--paper); font-size: 0.92rem; line-height: 1.3; color: var(--ink); }
.plx .pf-lang { font-size: 0.98rem; color: var(--ink); }
@media (min-width: 1024px) { .plx .pf-fit { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }

/* Sections */
.plx .pf-sec { padding-block: clamp(56px, 7vw, 104px); }
.plx .pf-sec--sand { background: var(--sand); }
.plx .pf-sec-head { display: grid; gap: var(--s-3); margin-bottom: clamp(24px, 3vw, 40px); }
.plx .pf-h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; }
.plx .pf-h2--story { margin-bottom: var(--s-5); }
.plx .pf-intro--under { margin-top: 12px; }
.plx .pf-intro { max-width: 62ch; font-size: 0.98rem; line-height: 1.6; color: var(--ink-soft); }
@media (min-width: 1024px) {
  .plx .pf-sec-head { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--s-9); align-items: baseline; }
}
.plx .pf-two { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) { .plx .pf-two { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--s-9); align-items: start; } }

/* Audience: a card per platform (followers, engagement, median views per
   format, and where the numbers come from). */
.plx .pf-plats { display: grid; gap: var(--s-4); }
@media (min-width: 768px) { .plx .pf-plats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plx .plat { background: var(--paper); border: 1px solid var(--rule); padding: var(--s-5); }
.plx .plat-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--s-3); }
.plx .plat h3 { font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.plx .src { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 0.85rem; line-height: 1.4; color: var(--ink-soft); }
.plx .src::before { content: ""; flex: none; width: 10px; height: 10px; border: 1px solid var(--ink-muted); }
.plx .src--ver::before { background: var(--gold); border-color: var(--gold); }
.plx .plat-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-top: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.plx .plat-figs .n { display: block; font-size: 2rem; font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; }
.plx .plat-figs .u { display: block; margin-top: 4px; font-size: 0.88rem; line-height: 1.35; color: var(--ink-muted); }
.plx .fmt { width: 100%; border-collapse: collapse; }
.plx .fmt caption { padding: 14px 0 2px; text-align: left; font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); }
.plx .fmt th,.plx .fmt td { padding: 10px 0; border-bottom: 1px solid var(--rule-soft); font-size: 0.98rem; font-weight: 400; text-align: left; }
.plx .fmt td { text-align: right; font-variant-numeric: tabular-nums; }
.plx .fmt tr:last-child th,.plx .fmt tr:last-child td { border-bottom: 0; }

/* Who follows: top countries, age and the women and men split, one series
   each (gold bars on a sand track; every value written as text beside it). */
.plx .aud-prof { margin-top: var(--s-4); background: var(--paper); border: 1px solid var(--rule); padding: var(--s-5); }
.plx .aud-prof-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--s-4); padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.plx .aud-prof-head h3 { font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.plx .aud-prof-grid { display: grid; gap: var(--s-6); margin-top: var(--s-5); }
@media (min-width: 900px) { .plx .aud-prof-grid { grid-template-columns: 1.2fr 1fr 1fr; column-gap: var(--s-7); } }
.plx .aud-prof h4 { margin-bottom: var(--s-3); font-size: 0.9rem; font-weight: 700; color: var(--ink-soft); }
.plx .aud-lead { margin-bottom: var(--s-3); }
.plx .aud-lead .n { display: block; font-size: 2rem; font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; }
.plx .aud-lead .u { display: block; margin-top: 4px; font-size: 0.88rem; color: var(--ink-muted); }
/* More than a quarter of followers under 18 (ruled 25/October/2026): one plain line under the age bars. */
.plx .aud-flag { margin-top: var(--s-3); padding-left: var(--s-3); border-left: 2px solid var(--gold); font-size: 0.88rem; line-height: 1.45; color: var(--ink-soft); }
.plx .bars { display: grid; gap: var(--s-3); }
.plx .bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--s-3); row-gap: 6px; }
.plx .bars-label { font-size: 0.95rem; line-height: 1.35; color: var(--ink); }
.plx .bars-val { font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.plx .bars-track { grid-column: 1 / -1; display: block; height: 6px; background: var(--sand); }
.plx .bars-track span { display: block; height: 100%; background: var(--gold); }
.plx .aud-note { margin-top: var(--s-5); font-size: 0.85rem; line-height: 1.5; color: var(--ink-muted); }

/* Fair value: a table on a wide screen; a block per deliverable on a phone. */
.plx .fv { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.plx .fv thead th { padding: 0 0 12px; font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); text-align: right; border-bottom: 1px solid var(--ink); }
.plx .fv thead th:first-child { text-align: left; }
.plx .fv tbody th,.plx .fv tbody td { padding: 14px 0; border-bottom: 1px solid var(--rule); text-align: right; font-size: 0.98rem; color: var(--ink-soft); font-weight: 400; }
.plx .fv tbody th[scope="row"] { text-align: left; color: var(--ink); }
.plx .fv .fv-rate { font-size: 1.5rem; font-weight: 300; letter-spacing: -0.02em; color: var(--ink); }
.plx .fv .fv-group th { padding: 26px 0 8px; text-align: left; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--rule); }
.plx .fv tbody tr:first-child.fv-group th { padding-top: 16px; }
.plx .fv-notes { display: grid; gap: var(--s-2); margin-top: var(--s-5); font-size: 0.88rem; line-height: 1.55; color: var(--ink-muted); max-width: 62ch; }
.plx .pf-two .pf-cta { margin-top: var(--s-5); }
@media (max-width: 767px) {
  .plx .fv thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .plx .fv,.plx .fv tbody { display: block; }
  .plx .fv tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-4); row-gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .plx .fv tbody th,.plx .fv tbody td { display: block; padding: 0; border: 0; }
  .plx .fv tbody th[scope="row"] { align-self: baseline; font-size: 1.02rem; }
  .plx .fv .fv-rate { text-align: right; font-size: 1.45rem; line-height: 1.1; }
  .plx .fv tbody td[data-label] { grid-column: 1 / -1; text-align: left; font-size: 0.92rem; }
  .plx .fv tbody td[data-label]::before { content: attr(data-label) " "; color: var(--ink-muted); }
  .plx .fv .fv-group { display: block; padding: 22px 0 8px; border-bottom: 1px solid var(--ink); }
  .plx .fv .fv-group th { display: block; padding: 0; border: 0; }
}

/* In the next six months: dated rows between hairlines. */
.plx .ev { border-top: 1px solid var(--rule); }
.plx .ev li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--s-4); padding-block: 18px; border-bottom: 1px solid var(--rule); }
.plx .ev time { grid-column: 1 / -1; font-size: 0.95rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.plx .ev-title { font-size: 1.1rem; line-height: 1.4; color: var(--ink); }
.plx .ev-detail { font-size: 0.95rem; line-height: 1.45; color: var(--ink-soft); }
.plx .ev-kind { align-self: start; padding: 3px 9px; border: 1px solid var(--rule); font-size: 0.85rem; line-height: 1.4; color: var(--ink-soft); white-space: nowrap; }
@media (min-width: 768px) {
  .plx .ev li { grid-template-columns: 200px minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--s-6); padding-block: 20px; }
  .plx .ev time { grid-column: auto; }
  .plx .ev-kind { align-self: baseline; }
}

/* In their words: the story beside this season's goals. */
.plx .pf-story-grid { display: grid; gap: var(--s-7); }
@media (min-width: 1024px) { .plx .pf-story-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-9); align-items: start; } }
.plx .pf-story p { max-width: 62ch; color: var(--ink-soft); }
.plx .pf-story p + p { margin-top: var(--s-4); }
.plx .pf-season { background: var(--paper); border-top: 3px solid var(--gold); padding: var(--s-5) var(--s-5) var(--s-6); }
.plx .pf-season h3 { margin-bottom: var(--s-4); font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 400; letter-spacing: -0.015em; }
.plx .pf-goals { display: grid; gap: var(--s-4); counter-reset: goal; }
.plx .pf-goals li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: baseline; line-height: 1.5; color: var(--ink-soft); counter-increment: goal; }
/* Gold-deep numerals at 25.6px: 3.1:1, large text. */
.plx .pf-goals li::before { content: counter(goal); font-size: 1.6rem; font-weight: 300; line-height: 1; color: var(--gold-deep); }

/* Highlights: our own poster; the player would load only when pressed. */
.plx .pf-video { margin: 0 0 var(--s-6); }
.plx .pf-video-link { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.plx .pf-video-link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.plx .pf-video-link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,13,13,0.9) 0%, rgba(13,13,13,0.7) 45%, rgba(13,13,13,0.25) 100%); }
.plx .pf-video-play { position: absolute; left: var(--s-5); bottom: var(--s-5); z-index: 1; display: flex; align-items: center; gap: var(--s-4); color: var(--paper); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.plx .pf-video-mark { position: relative; flex: none; width: 56px; height: 56px; background: var(--paper); }
.plx .pf-video-mark::before { content: ""; position: absolute; top: 50%; left: 52%; transform: translate(-50%, -50%); border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--ink); }
.plx .pf-video figcaption { margin-top: var(--s-3); font-size: 0.85rem; color: var(--ink-muted); }
@media (min-width: 768px) { .plx .pf-video-link { aspect-ratio: 21 / 9; } }

/* Record, reduced to two facts. */
.plx .pf-record { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-8); margin-top: clamp(40px, 5vw, 64px); padding-block: var(--s-5); border-block: 1px solid var(--rule); }
.plx .pf-record div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s-3); }
.plx .pf-record dt { font-size: 0.88rem; font-weight: 700; color: var(--ink-soft); }
.plx .pf-record dd { font-size: 1rem; color: var(--ink); }

/* The closing band. */
.plx .pf-close-grid { display: grid; gap: var(--s-5); }
.plx .pf-close-grid h2 { max-width: 22ch; font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.025em; }
.plx .pf-close-grid p { max-width: 52ch; margin-top: var(--s-4); color: var(--ink-soft); }
@media (min-width: 1024px) { .plx .pf-close-grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-8); align-items: end; } }

/* Request a deal, always in reach: a bar fixed to the foot of the screen
   below 1024px; from 1024px it slides up once the hero's button has
   scrolled away. Paper, a hairline above, the guide rate beside the button. */
.plx .dealbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--paper); border-top: 1px solid var(--rule);
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
}
.plx .dealbar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); max-width: calc(var(--max) - 2 * var(--gutter)); margin-inline: auto; }
.plx .dealbar-who { display: none; }
.plx .dealbar-right { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: var(--s-4); min-width: 0; }
.plx .dealbar-rate { min-width: 0; font-size: 0.82rem; line-height: 1.3; color: var(--ink-muted); }
.plx .dealbar-rate strong { display: block; font-size: 1.05rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.plx .dealbar .btn { flex: none; padding-inline: 1.3em; }
.plx .dealbar-right > div:last-child { margin-left: auto; }
.plx .dealbar-off { display: block; font-size: 0.8rem; line-height: 1.3; color: var(--ink-muted); text-align: right; margin-top: 4px; }
/* Room under the footer for the bar fixed to the foot of a phone's screen. */
@media (max-width: 1023px) { body:has(.plx.pg-profile) { padding-bottom: 76px; } }
@media (min-width: 1024px) {
  .plx .dealbar { transform: translateY(100%); visibility: hidden; transition: transform 0.3s var(--ease), visibility 0s linear 0.3s; }
  .plx .dealbar.is-shown { transform: none; visibility: visible; transition: transform 0.3s var(--ease); }
  .plx .dealbar-who { display: block; font-size: 1rem; line-height: 1.3; color: var(--ink); }
  .plx .dealbar-who > span { display: block; font-size: 0.85rem; color: var(--ink-muted); }
  .plx .dealbar-right { flex: none; justify-content: flex-end; gap: var(--s-6); }
}
.plx .pf-staff-note { font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft); max-width: 44ch; }


/* AoS staff (Release 1.2, ruled 25/October/2026): the staff preview bar stays pinned under the header, in gold-soft
   (ink on gold-soft, 13.5:1), on the roster and on every profile. */
.pl-brandbar--staff { position: sticky; top: 73px; z-index: 95; background: var(--brand-gold-soft); color: var(--ink); }
.pl-brandbar--staff .pl-brandbar-who,.pl-brandbar--staff .pl-dot,.pl-brandbar--staff .pl-brandbar-out { color: var(--ink); }
/* On a phone the sentence and Sign out flow as one line of text, so a wrap never starts a line with the dot. */
@media (max-width: 767px) {
  .pl-brandbar--staff .pl-brandbar-inner { display: block; padding-block: 4px; }
  .pl-brandbar--staff .pl-brandbar-who { display: inline; }
  .pl-brandbar--staff .pl-dot { padding-inline: 0.35em; }
  .pl-brandbar--staff .pl-brandbar-out { display: inline-flex; vertical-align: middle; }
}