/* Bakes Media — Creator Roster (Brands section)
   A self-contained sub-brand: Anton display + Airbnb-red accent, distinct from
   the site's Operator system. Shared by the talent roster, the UGC roster, and
   the four UGC profile sheets. */

:root {
  --bm-paper: #F6F4EF;
  --bm-card: #FFFFFF;
  --bm-ink: #141210;
  --bm-accent: #FF5A5F;
  --bm-line: color-mix(in srgb, var(--bm-ink) 16%, var(--bm-paper));
  --bm-hair: color-mix(in srgb, var(--bm-ink) 10%, var(--bm-paper));
  --bm-track: color-mix(in srgb, var(--bm-ink) 11%, var(--bm-paper));
  --bm-muted: color-mix(in srgb, var(--bm-ink) 55%, var(--bm-paper));
  --bm-faint: color-mix(in srgb, var(--bm-ink) 28%, var(--bm-paper));
  --bm-body: color-mix(in srgb, var(--bm-ink) 82%, var(--bm-paper));

  --bm-display: 'Anton', Impact, sans-serif;
  --bm-body-font: 'Inter', system-ui, -apple-system, sans-serif;

  --bm-r-lg: 3px;
  --bm-r-md: 2px;
  --bm-r-sm: 2px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bm-paper);
  color: var(--bm-ink);
  font-family: var(--bm-body-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--bm-ink); color: var(--bm-paper); }
img { max-width: 100%; display: block; }
ul { list-style: none; }
a { color: var(--bm-ink); text-decoration: none; transition: color 120ms ease; }
a:hover { color: var(--bm-accent); }

/* ── shell ─────────────────────────────────────────── */

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.wrap.narrow { max-width: 1080px; }

.topbar { position: sticky; top: 0; z-index: 50; background: var(--bm-paper); border-bottom: 1px solid var(--bm-line); }
.topbar .inner { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; padding: 12px 40px; max-width: 1240px; margin: 0 auto; }
.topbar .inner.narrow { max-width: 1080px; }
.topbar .logo { width: 150px; height: 46px; flex: none; }
.topbar .logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.topbar .role { font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bm-muted); margin-right: auto; }
.topbar nav { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.topbar nav a { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bm-muted); }
.topbar nav a[data-active] { color: var(--bm-ink); }
.topbar nav a.accent { color: var(--bm-accent); }

/* ── type ──────────────────────────────────────────── */

.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bm-muted); }
.label { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bm-muted); }
.label.accent { color: var(--bm-accent); }
.label.lg { font-size: 11px; }

.display { font-family: var(--bm-display); text-transform: uppercase; color: var(--bm-ink); font-weight: 400; }
h1.display { font-size: clamp(38px, 5.6vw, 88px); line-height: 0.95; letter-spacing: 0.06em; }
h2.display { font-size: clamp(30px, 4.4vw, 84px); line-height: 0.95; letter-spacing: 0.04em; }
.niche { font-family: var(--bm-display); text-transform: uppercase; color: var(--bm-accent); font-weight: 400; line-height: 1.12; }

.prose { font-size: 16px; line-height: 1.6; color: var(--bm-body); text-wrap: pretty; }
.prose.lead { font-size: 19px; line-height: 1.55; color: var(--bm-ink); }
.quote { font-size: 15px; line-height: 1.55; color: var(--bm-body); text-wrap: pretty; }

/* ── photo wells ───────────────────────────────────── */

.shot { position: relative; width: 100%; background: var(--bm-track); overflow: hidden; border-radius: var(--bm-r-sm); }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot.portrait { aspect-ratio: 3/4; }
.shot.square { aspect-ratio: 1/1; }
.shot.wide { aspect-ratio: 16/9; }

/* ── labelled detail rows (profiles) ───────────────── */

.detail { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 36px; padding: 20px 0; border-top: 1px solid var(--bm-hair); }
.detail.first { border-top: 1px solid var(--bm-ink); }
.detail.last { border-bottom: 1px solid var(--bm-hair); }
.detail .val { font-size: 16px; line-height: 1.6; color: var(--bm-body); }

.benefits { display: grid; gap: 10px; }
.benefits li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; font-size: 16px; line-height: 1.55; color: var(--bm-body); }
.benefits .mark { color: var(--bm-accent); font-weight: 700; }

.brandlist { display: grid; gap: 12px; }
.brandlist .b { font-size: 18px; font-weight: 700; color: var(--bm-ink); }
.brandlist .b .state { font-size: 13px; font-weight: 600; color: var(--bm-muted); }
.brandlist .links { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 5px; font-size: 13px; font-weight: 500; }

/* ── stat tiles ────────────────────────────────────── */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px; }
.stat .n { font-family: var(--bm-display); font-size: clamp(28px, 3.4vw, 46px); line-height: 1; color: var(--bm-ink); letter-spacing: 0.02em; }
.stat .n.accent { color: var(--bm-accent); }
.stat .k { margin-top: 8px; }

/* ── page footer ───────────────────────────────────── */

.sheet-foot { border-top: 1px solid var(--bm-ink); padding-top: 26px; display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; align-items: flex-start; }
.sheet-foot .note { font-size: 13px; line-height: 1.65; color: var(--bm-muted); max-width: 74ch; text-wrap: pretty; }
.sheet-foot .back { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bm-accent); }
.sheet-foot .logo { width: 150px; height: 46px; flex: none; }
.sheet-foot .logo img { width: 100%; height: 100%; object-fit: contain; }

/* A quiet way back to the rest of the site — the roster is a Brands-section
   island, so it does not carry the Operator nav. */
.exit { border-top: 1px solid var(--bm-hair); padding: 20px 0 40px; text-align: center; }
.exit a { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bm-muted); }

/* ── responsive ────────────────────────────────────── */

@media (max-width: 880px) {
  .wrap, .topbar .inner { padding-left: 20px; padding-right: 20px; }
  .topbar .inner { gap: 12px 20px; }
  .topbar nav { gap: 16px; }
  .topbar .role { display: none; }
  .detail { grid-template-columns: 1fr; gap: 10px; }
}

/* ── talent roster ─────────────────────────────────────────────────────────
   Components unique to /brands/roster: the full-height cover, the five-up
   roster index, and the per-channel anatomy (audience totals, platform rows,
   stat tiles, age/gender/market composition, sector lists, stills strips). */

/* cover */

.cover { min-height: calc(100vh - 71px); display: flex; flex-direction: column; justify-content: center; padding-top: 28px; padding-bottom: 48px; }
/* The design sets the headline's wide word gaps with double non-breaking
   spaces, which makes the line unbreakable and overflows narrow screens.
   word-spacing reproduces the same gap and still lets the line wrap. */
.cover h1.display { margin-top: 18px; word-spacing: 0.24em; }
.cover .intro { max-width: 64ch; margin-top: 20px; }

.topstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 34px; border-top: 1px solid var(--bm-ink); border-bottom: 1px solid var(--bm-line); }
.topstats .s { padding: 16px 28px 18px; border-right: 1px solid var(--bm-hair); }
.topstats .s:first-child { padding-left: 0; }
.topstats .s:last-child { padding-right: 0; border-right: none; }
.topstats .n { font-family: var(--bm-display); font-size: clamp(24px, 3vw, 44px); line-height: 0.95; letter-spacing: -0.01em; color: var(--bm-ink); }
.topstats .k { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bm-muted); margin-top: 12px; }

/* roster index */

.index-wrap { margin-top: 38px; }
.index-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--bm-ink); }
.index-head span { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bm-muted); }
/* Cells keep equal padding so all five photos render the same size; the grid is
   pulled out by that padding so the outer content edges still sit flush with
   the container. Dropping the padding on the end cells instead would make those
   two columns wider and knock their captions out of line. */
.index { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 -20px; }
.index a { display: block; padding: 18px 20px 0; border-right: 1px solid var(--bm-hair); color: var(--bm-ink); }
.index a:last-child { border-right: none; }
.index a:hover { color: var(--bm-accent); }
.index .nm { font-family: var(--bm-display); text-transform: uppercase; font-size: clamp(14px, 1.45vw, 20px); line-height: 1.05; letter-spacing: 0.01em; margin-top: 14px; }
.index .who { font-size: 12px; color: var(--bm-muted); margin-top: 5px; }
.index .num { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 12px; color: inherit; }
.index .tag { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bm-muted); margin-top: 4px; }

/* channel section */

.channel { padding-top: 112px; scroll-margin-top: 70px; }
.channel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-bottom: 24px; border-bottom: 1px solid var(--bm-ink); }
h2.channel-h2 { font-size: clamp(38px, 5.6vw, 84px); line-height: 0.9; letter-spacing: -0.01em; margin-top: 18px; }
.channel-head .names { font-size: 16px; color: var(--bm-muted); margin-top: 12px; }
.ch-logo { width: 150px; height: 52px; flex: none; margin-bottom: 6px; }
.ch-logo img { width: 100%; height: 100%; object-fit: contain; }

.channel-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 56px; padding-top: 48px; }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pair .nm { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 14px; color: var(--bm-ink); }
.pair .bio { font-size: 13px; line-height: 1.5; color: var(--bm-muted); margin-top: 6px; text-wrap: pretty; }

.ch-lede { font-size: 21px; line-height: 1.5; color: var(--bm-ink); max-width: 46ch; text-wrap: pretty; }
.ch-note { font-size: 13px; line-height: 1.55; color: var(--bm-muted); text-wrap: pretty; margin-top: 20px; }

.total { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--bm-line); }
.total .k { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bm-muted); }
.total .n { font-family: var(--bm-display); font-size: clamp(46px, 6vw, 84px); line-height: 0.95; letter-spacing: -0.01em; margin-top: 10px; color: var(--bm-ink); }

/* per-platform rows */

.platforms { margin-top: 32px; }
.platforms .row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 20px; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--bm-hair); color: var(--bm-ink); }
.platforms .row:last-child { border-bottom: 1px solid var(--bm-hair); }
.platforms a.row:hover { color: var(--bm-accent); }
.platforms .p { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bm-muted); }
/* Handles like @crimescenecleaning are single long tokens that outgrow the
   platform column on narrow screens; let them break rather than push the page. */
.platforms .h { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.platforms .v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.platforms .row.off .h { color: var(--bm-faint); }
.platforms .row.off .v { color: var(--bm-faint); font-variant-numeric: normal; }

/* three-up stat tiles */

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 36px; border-top: 1px solid var(--bm-ink); }
.tiles .t { padding: 20px 20px 0; border-right: 1px solid var(--bm-hair); }
.tiles .t:first-child { padding-left: 0; }
.tiles .t:last-child { padding-right: 0; border-right: none; }
.tiles .n { font-family: var(--bm-display); font-size: clamp(28px, 3.4vw, 44px); line-height: 1; color: var(--bm-ink); }
.tiles .k { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bm-muted); margin-top: 10px; }

/* audience composition */

.compose { margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--bm-line); }
.compose > .eyebrow { margin-bottom: 30px; }
.compose-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
.sub { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bm-ink); margin-bottom: 18px; }

.bars { display: grid; gap: 14px; }
.bars .top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.bars .top .v { font-variant-numeric: tabular-nums; }
.bar { display: block; height: 5px; background: var(--bm-track); }
.bar > span { display: block; height: 100%; background: var(--bm-ink); }
.bar.faint > span { background: var(--bm-faint); }

.split { display: flex; height: 5px; overflow: hidden; }
.split .a { background: var(--bm-ink); }
.split .b { background: var(--bm-faint); }
.split-legend { display: flex; justify-content: space-between; margin-top: 14px; }
.split-legend .r { text-align: right; }
.split-legend .g { font-family: var(--bm-display); font-size: 34px; line-height: 1; color: var(--bm-ink); }
.split-legend .g.faint { color: var(--bm-faint); }
.split-legend .k { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bm-muted); margin-top: 6px; }

.compose .note { font-size: 13px; line-height: 1.55; color: var(--bm-muted); text-wrap: pretty; margin-top: 22px; }

.markets .rows { display: grid; }
.markets .rows .row { display: flex; justify-content: space-between; font-size: 14px; padding: 9px 0; border-top: 1px solid var(--bm-hair); }
.markets .rows .row:last-child { border-bottom: 1px solid var(--bm-hair); }
.markets .rows .row .c { color: var(--bm-body); }
.markets .rows .row .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.markets .note { margin-top: 18px; }

/* best-fit sectors + email programme */

.fit { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 56px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--bm-line); }
.fit .eyebrow { margin-bottom: 20px; }

.sectors { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.sectors div { font-size: 15px; font-weight: 600; padding: 11px 0; border-top: 1px solid var(--bm-hair); }
.sectors div.end { border-bottom: 1px solid var(--bm-hair); }

.email { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.email .c { padding: 11px 0; border-top: 1px solid var(--bm-hair); }
.email .c.end { border-bottom: 1px solid var(--bm-hair); }
.email .k { font-size: 11px; color: var(--bm-muted); }
.email .v { font-size: 20px; font-weight: 700; color: var(--bm-faint); }

/* selected work */

.work { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--bm-line); }
.work > .eyebrow { margin-bottom: 20px; }
.stills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

/* roster footer */

.roster-foot-wrap { padding-top: 104px; padding-bottom: 72px; }
.roster-foot .note { font-size: 12px; }

@media (max-width: 880px) {
  .cover { min-height: 0; padding-top: 40px; padding-bottom: 40px; }

  .topstats { grid-template-columns: 1fr; }
  .topstats .s { padding: 16px 0 18px; border-right: none; }
  .topstats .s + .s { border-top: 1px solid var(--bm-hair); }

  .index { grid-template-columns: 1fr; margin: 0; }
  .index a { padding: 18px 0 0; border-right: none; }
  .index a + a { padding-top: 18px; border-top: 1px solid var(--bm-hair); }

  .channel { padding-top: 72px; }
  .channel-body { grid-template-columns: 1fr; gap: 36px; padding-top: 32px; }

  .tiles { grid-template-columns: 1fr; }
  .tiles .t { padding: 20px 0 0; border-right: none; }
  .tiles .t + .t { border-top: 1px solid var(--bm-hair); }

  .compose-grid { grid-template-columns: 1fr; gap: 40px; }
  .fit { grid-template-columns: 1fr; gap: 40px; }
  .sectors, .email { grid-template-columns: 1fr; }
  .stills { grid-template-columns: 1fr; }

  .roster-foot-wrap { padding-top: 72px; padding-bottom: 56px; }
}

/* ── creator analytics (Kelly's profile) ───────────────────────────────────
   A three-up stat band, per-platform metric blocks with proportion meters,
   and paired top-content lists. */

.statband { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 44px; border-top: 1px solid var(--bm-ink); border-bottom: 1px solid var(--bm-line); }
.statband .s { padding: 18px 28px 20px; border-right: 1px solid var(--bm-hair); }
.statband .s:first-child { padding-left: 0; }
.statband .s:last-child { padding-right: 0; border-right: none; }
.statband .n { font-family: var(--bm-display); font-size: clamp(30px, 3.4vw, 46px); line-height: 0.95; color: var(--bm-ink); }
.statband .n.accent { color: var(--bm-accent); }
.statband .k { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bm-muted); margin-top: 12px; }

.detail .when { font-size: 12px; color: var(--bm-faint); margin-top: 5px; }

.metrics { display: flex; gap: 34px; flex-wrap: wrap; }
.metrics .n { font-family: var(--bm-display); font-size: 26px; line-height: 1; color: var(--bm-ink); }
.metrics .n.accent { color: var(--bm-accent); }
.metrics .k { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bm-muted); margin-top: 7px; }

.meters { margin-top: 20px; max-width: 440px; }
.meters .cap { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bm-muted); margin-bottom: 10px; }
.meter { display: grid; grid-template-columns: 56px minmax(0, 1fr) 40px; gap: 12px; align-items: center; font-size: 13px; }
.meter + .meter { margin-top: 7px; }
.meter .t { color: var(--bm-body); }
.meter .track { height: 8px; background: var(--bm-track); border-radius: 2px; overflow: hidden; }
.meter .track > span { display: block; height: 100%; background: var(--bm-accent); }
.meter .track.mid > span { background: var(--bm-accent-dark, color-mix(in srgb, var(--bm-accent) 72%, var(--bm-ink))); }
.meter .track.low > span { background: var(--bm-faint); }
.meter .v { text-align: right; font-weight: 700; }

.detail .gloss { font-size: 15px; line-height: 1.6; color: var(--bm-body); margin-top: 18px; }

.toplists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.toplists .cap { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bm-faint); margin-bottom: 10px; }
.toplists .rows { display: grid; gap: 8px; font-size: 15px; }
.toplists .r { display: flex; justify-content: space-between; gap: 12px; }
.toplists .r .t { color: var(--bm-body); }
.toplists .r .v { font-weight: 700; }

@media (max-width: 880px) {
  .statband { grid-template-columns: 1fr; }
  .statband .s { padding: 18px 0 20px; border-right: none; }
  .statband .s + .s { border-top: 1px solid var(--bm-hair); }
  .metrics { gap: 24px; }
  .toplists { grid-template-columns: 1fr; }
}