:root {
  --indigo: #342C81;
  --magenta: #E00172;
  --red: #E20518;
  --ink: #15112F;
  --grey: #928F9D;
  --pink: #D8A8DE;
  --tint: #F5F3F9;
  --white: #FFFFFF;
  --gradient: linear-gradient(120deg, var(--red), var(--magenta), var(--indigo));
  --hairline: rgba(21, 17, 47, 0.12);

  --content: 1120px;
  --gutter: clamp(20px, 5vw, 64px);
  /* Percentages in a custom property resolve where it is used, so one token
     centres the nav, every band and the footer on the same column. */
  --pad-x: max(var(--gutter), calc((100% - var(--content)) / 2));
  --measure: 64ch;
  --col-year: 3.5rem;
  --nav-h: 4rem;
  --hero-photo-h: max(18rem, 45svh);
  --hero-lift: 0.15;

  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;
  --band: clamp(56px, 8vw, 112px);

  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1.0625rem;
  --t-md: 1.25rem;
  --t-lg: 1.5rem;
  --t-xl: clamp(2.25rem, 3.8vw, 3.25rem);
  --t-stat: clamp(2.75rem, 5vw, 4.25rem);
  --t-hero: clamp(4.5rem, 9vw, 7.5rem);
}

* { box-sizing: border-box; }

/* Every column of digits on the site lines up: dates, years, times, places. */
.record-year, .record-meta, .total-value, .reach-value, .hero-stat-value {
  font-variant-numeric: tabular-nums;
}

body {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

p { margin: 0; }
figure { margin: 0; }

a { color: var(--magenta); text-underline-offset: 0.15em; transition: text-underline-offset 150ms; }
a:hover { text-underline-offset: 0.3em; }
.hero a, .contact a, .privacy a { color: var(--pink); }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }

.display, .section-heading, .hero-name, .hero-stat-value, .total-value, .reach-value,
.nav-brand, .footer-name, .privacy-heading {
  font-family: Anton, Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}

.hero-stat-value, .total-value, .reach-value { text-transform: none; }

.section-heading {
  font-size: var(--t-xl);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--indigo);
  margin: 0 0 var(--s4);
}
.contact .section-heading { color: var(--white); }

/* Sub-groups inside a section, so every one of them follows content. */
.section-label {
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--indigo);
  margin: var(--s5) 0 var(--s2);
}

/* The deck marks every label with an arrow and a colon. The subset fonts drop
   U+2197, so the glyph comes from the system stack. */
.section-label::before {
  content: "\2197";
  font-family: ui-sans-serif, system-ui, sans-serif;
  color: var(--magenta);
  margin-right: 0.45em;
}
@supports (content: "a" / "b") { .section-label::before { content: "\2197" / ""; } }
.section-label::after { content: ":"; }
.section-label-note { font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Small facts beside a value. */
.facts dt, .reach-label, .reach-stamp {
  font-weight: 600;
  font-size: var(--t-sm);
}

.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  z-index: 6;
  color: var(--white);
  background: var(--magenta);
  border-radius: 999px;
  padding: var(--s1) var(--s3);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--t-sm);
}
.skip-link:focus {
  width: auto;
  height: auto;
  clip-path: none;
  inset: var(--s2) auto auto var(--s2);
}

.nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: var(--nav-h);
  background: var(--ink);
  padding: 0 var(--pad-x);
}
.nav-brand { letter-spacing: 0.05em; color: var(--white); text-decoration: none; margin-right: auto; }
.nav-cta {
  color: var(--white);
  background: var(--magenta);
  border-radius: 999px;
  padding: var(--s1) var(--s3);
  font-weight: 600;
  font-size: var(--t-sm);
  text-decoration: none;
  transition: background-color 150ms;
}
.nav-cta:hover { background: #C1015F; }
@media (max-width: 26em) { .nav-cta { padding-inline: var(--s2); } }

/* The hero: the photograph above the copy at every width, fading down into
   the ink the copy stands on. The 40vw floor keeps the athlete whole on wide
   screens, where a shorter band would crop her out of a 3:2 photograph. */
.hero { position: relative; display: grid; background: var(--ink); color: var(--white); overflow: hidden; }
.hero-photo { position: relative; height: var(--hero-photo-h); overflow: hidden; }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 72% 45%; }
.hero-photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21, 17, 47, 0) 35%, rgba(21, 17, 47, 0.75) 65%, var(--ink) 90%); }
.hero-copy { position: relative; z-index: 1; margin-top: calc(var(--hero-photo-h) * var(--hero-lift) * -1);
  padding: 0 var(--pad-x) var(--band); }

.hero-name { font-size: var(--t-hero); line-height: 0.88; letter-spacing: 0.005em; margin: 0; }
/* One size and one weight for every Inter line in the hero; colour sorts them. */
.hero-role, .hero-stat-label { font-size: var(--t-md); line-height: 1.4; }
.hero-role { color: var(--grey); margin: var(--s3) 0 0; max-width: 30ch; }
/* Her signature gradient, the only one on the page: it parts who she is from
   what she has done. */
.hero-rule { height: 2px; border: 0; background: var(--gradient); font-size: var(--t-md); max-width: 30ch;
  margin: var(--s4) 0; }
.hero-stats { display: grid; gap: var(--s2); margin-top: var(--s5); }
.hero-stat { display: flex; flex-wrap: nowrap; align-items: baseline; column-gap: var(--s3); margin: 0; }
/* Anton has no tabular figures, so a fixed box holds the digits instead and the
   labels start on one column. */
.hero-stat-value { font-size: var(--t-stat); line-height: 1; min-width: 1ch; text-align: right; }

@media (min-width: 64em) {
  :root { --hero-photo-h: min(max(24rem, 40vw, 55svh), 60rem); --hero-lift: 0.47; }
  .hero-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s6);
    grid-template-areas: "name ." "role rule" "role stats"; }
  .hero-name { grid-area: name; }
  .hero-role { grid-area: role; align-self: start; }
  .hero-rule { grid-area: rule; max-width: none; margin: var(--s3) 0 var(--s4); }
  .hero-stats { grid-area: stats; margin-top: 0; }
}

/* Split: half photograph, half copy. The photograph bleeds to the viewport
   edge, the copy sits on the content column. */
.split { display: grid; background: var(--white); }
.split-photo { overflow: hidden; aspect-ratio: 4 / 3; }
.split-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about .split-photo img { object-position: 60% 45%; }
.pitch .split-photo img { object-position: 50% 25%; }
.contact .split-photo img { object-position: 28% 50%; }
.split-copy { padding: var(--band) var(--pad-x); }

@media (min-width: 64em) {
  .split { grid-template-columns: var(--pad-x) minmax(0, 1fr) minmax(0, 1fr) var(--pad-x); }
  .split-photo { grid-column: 1 / 3; aspect-ratio: auto; min-height: 38rem; }
  .split-copy { grid-column: 3 / 4; align-self: center; padding: var(--band) 0 var(--band) var(--s6); }
  .split--right .split-photo { grid-column: 3 / 5; }
  .split--right .split-copy { grid-column: 2 / 3; grid-row: 1; padding: var(--band) var(--s6) var(--band) 0; }
}

/* Ledger: the heading in a narrow column that stays put while its lists scroll. */
.ledger { background: var(--white); padding: var(--band) var(--pad-x); }
.ledger + .ledger { padding-top: 0; }
@media (min-width: 64em) {
  .ledger { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--s6); }
  .ledger-head { position: sticky; top: calc(var(--nav-h) + var(--s4)); align-self: start; margin: 0; }
}
.ledger-body > .section-label:first-child { margin-top: 0; }

.band-tint { background: var(--tint); }

.lede { font-size: var(--t-md); line-height: 1.5; max-width: var(--measure); }

.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline;
  gap: var(--s1) var(--s3); margin: var(--s4) 0 0; }
.facts dt { color: var(--indigo); }
.facts dd { margin: 0; }

.titles, .podiums, .articles { list-style: none; margin: 0; padding: 0; }

/* Both career lists share one year column. */
.titles li, .podiums li {
  display: grid;
  grid-template-columns: var(--col-year) minmax(0, 1fr);
  column-gap: var(--s3);
  row-gap: var(--s1);
  align-items: baseline;
  padding: var(--s2) 0;
  border-top: 1px solid var(--hairline);
}
.record-meta { grid-column: 2; }
@media (min-width: 40em) {
  .titles li, .podiums li { grid-template-columns: var(--col-year) minmax(0, 1fr) max-content; }
  .record-meta { grid-column: 3; }
}

.record-year { color: var(--magenta); }
.record-text { font-weight: 600; }
.record-place { display: inline-block; min-width: 2.2em; font-weight: 700; color: var(--indigo); }
.record-meta { font-size: var(--t-sm); color: var(--indigo); }

.total { margin-top: var(--s2); }
.total-value { font-size: var(--t-lg); line-height: 1.2; color: var(--indigo); }

.articles li { padding: var(--s2) 0; border-top: 1px solid var(--hairline); }
.article-meta { display: flex; flex-wrap: wrap; gap: 0 var(--s3); margin-top: var(--s1);
  font-size: var(--t-sm); color: var(--indigo); }
.article-outlet { font-weight: 600; }

.reach { margin: var(--s5) 0 0; }
.reach-value { font-size: var(--t-stat); line-height: 1; color: var(--indigo); display: block; margin-bottom: var(--s1); }
.reach-label { color: var(--indigo); }
.reach-stamp { color: var(--indigo); font-weight: 400; margin-top: var(--s3); }

/* Three columns at most. */
.offers { list-style: none; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s5) var(--s4); margin: 0; padding: 0; }
.offers li { border-top: 1px solid var(--hairline); padding-top: var(--s3); }
.offer-title { font-size: var(--t-lg); line-height: 1.15; letter-spacing: -0.012em;
  color: var(--indigo); margin: 0 0 var(--s1); }
.offer-text { font-size: var(--t-base); max-width: var(--measure); }

.logos { list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s4) var(--s5); margin: 0 0 var(--s6); padding: 0; }
.logos:last-child { margin-bottom: 0; }
/* Height falls as the logo gets wider, so wide and square logos in a tier weigh
   about the same. --ratio is width over height, read from the PNG by build.py. */
.logos img { display: block; width: auto; max-width: 100%; object-fit: contain; object-position: left;
  aspect-ratio: var(--ratio); height: min(var(--logo-h), var(--logo-h) / pow(var(--ratio), 0.4)); }
.logos--main { --logo-h: 104px; }
.logos--support { --logo-h: 76px; }
.logos--foundation, .logos--equipment { --logo-h: 56px; }
.logos--supplier { --logo-h: 40px; }

/* Contact: the split on the ink ground, with the hero's fade mirrored so the
   photograph dissolves toward the copy. */
.contact { background: var(--ink); color: var(--white); }
.contact .split-photo { position: relative; }
.contact .split-photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21, 17, 47, 0) 60%, var(--ink) 100%); }
@media (min-width: 64em) {
  .contact .split-photo::after { background: linear-gradient(90deg, rgba(21, 17, 47, 0) 58%, var(--ink) 100%); }
}

.contact p + p { margin-top: var(--s4); }
.contact-lead { max-width: 36ch; font-size: var(--t-md); line-height: 1.45; }
.contact-mail { font-weight: 600; font-size: min(var(--t-md), 5vw); }
.contact-social { display: flex; gap: var(--s3); }

.privacy { background: var(--ink); color: var(--white); padding: var(--s5) var(--pad-x);
  border-top: 1px solid rgba(255, 255, 255, 0.12); }
.privacy-heading { font-size: var(--t-md); letter-spacing: 0.02em; margin: 0 0 var(--s2); }
.small { font-size: var(--t-sm); color: var(--grey); max-width: var(--measure); }

/* The page closes on the strip it opened with: ink, her name, the ways to reach her. */
.footer { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4);
  background: var(--ink); color: var(--white); font-size: var(--t-sm);
  padding: var(--s5) var(--pad-x); border-top: 1px solid rgba(255, 255, 255, 0.12); }
.footer a { color: var(--pink); }
.footer-name { letter-spacing: 0.05em; margin-right: auto; }

/* Motion: one moment on load, and nothing after it. */
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.hero-photo img { animation: settle 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-copy > * { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
.hero-copy > :nth-child(2) { animation-delay: 0.23s; }
.hero-copy > :nth-child(3) { animation-delay: 0.31s; }
.hero-copy > :nth-child(4) { animation-delay: 0.39s; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Printed, every ink band loses its ground and every photograph goes. */
@media print {
  .skip-link, .nav-cta, .hero-photo, .split-photo { display: none; }

  .hero, .split, .ledger, .contact, .privacy, .footer, .band-tint {
    display: block; background: none; color: var(--ink); padding: var(--s5) var(--s3); min-height: 0;
  }
  .hero-copy, .split-copy { padding: 0; margin: 0; }
  .nav { position: static; background: none; padding: 0 var(--s3) var(--s4); }
  .nav-brand { color: var(--ink); }
  .hero-role, .small { color: var(--indigo); }

  .contact .section-heading { color: var(--indigo); }
  .hero a, .contact a, .privacy a, .footer a { color: var(--magenta); }

  /* Paper cannot be clicked, so a cited link has to carry its address. */
  a[href^="http"] { overflow-wrap: anywhere; }
  a[href^="http"]::after { content: " " attr(href); color: var(--ink);
    font-weight: 400; font-size: var(--t-xs); letter-spacing: 0; text-transform: none; }
  /* Sixteen logos each trailing an address is noise, not evidence. */
  .logos a::after { content: none; }

  .section-heading, .section-label { break-after: avoid; }
  .titles li, .podiums li, .articles li, .offers li { break-inside: avoid; }
}