.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad) var(--s-10);
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-line);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);

  flex-wrap: wrap;

  min-width: 0;
  font-family: var(--font-display);
  font-weight: var(--w-display);
  letter-spacing: -0.01em;
  color: var(--c-text);
  text-decoration: none;
}
.logo img { display: block; height: 26px; width: auto; flex: none; }

.logo img.logo__seal { height: 36px; width: 36px; }
.rule { width: 1px; height: 22px; background: var(--c-line-strong); flex: none; }

.demobar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--page-pad);
  background: var(--c-navy-deep);
  color: var(--c-text-inverse);
  font-size: var(--t-small);
}

footer.site {
  border-top: 1px solid var(--c-line);
  margin-top: var(--s-10);
  padding: var(--s-5) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  align-items: center;
  justify-content: space-between;
  color: var(--c-text-muted);
  font-size: var(--t-small);
}
.cobrand { display: inline-flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

.cobrand__word { height: 20px; width: auto; display: block; }
.cobrand__seal { height: 28px; width: 28px; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
}
h1 { font-size: var(--t-h1); margin: var(--s-2) 0 var(--s-4); }
h2 { font-size: var(--t-h2); margin: var(--s-8) 0 var(--s-4); }
h3 { font-size: var(--t-h3); margin: var(--s-6) 0 var(--s-2); }

a { color: var(--c-text); text-decoration-color: var(--c-line-strong); text-underline-offset: 0.15em; }
a:hover { text-decoration-color: currentColor; }

.eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: 800;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-red);
  margin: var(--s-6) 0 0;
}
.sub { color: var(--c-text-muted); font-size: var(--t-small); }
.ta-r { text-align: right; }
.crumbs { padding-top: var(--s-4); font-size: var(--t-small); }

.crumbs a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  font-weight: var(--w-strong);
  text-decoration: none;
}
.crumbs a::before { content: '←'; color: var(--c-text-muted); }
.crumbs a:hover { text-decoration: underline; }

.more { margin: var(--s-4) 0 0; }
.section { margin-top: var(--s-8); }
.race-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); }
.birthyear { font-family: var(--font-text); font-weight: 400; font-size: var(--t-body); color: var(--c-text-muted); }
.race-badges { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0; }
.actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-3); }

.qr summary { list-style: none; display: inline-flex; }
.qr summary::-webkit-details-marker { display: none; }
.qr__body {
  margin-top: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  display: inline-block;
  background: var(--c-bg);
}

.qr__img { display: block; width: 200px; height: 200px; }
.qr__url {
  margin: var(--s-3) 0 0;
  max-width: 200px;
  font-size: var(--t-small);
  color: var(--c-text-muted);

  overflow-wrap: anywhere;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-weight: var(--w-strong);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0 var(--s-5);

  min-height: var(--tap);
  cursor: pointer;
  text-decoration: none;
  background: var(--c-surface-2);
  color: var(--c-text);
}
.btn--primary { background: var(--c-red); color: var(--c-text-inverse); }
.btn--ghost { background: transparent; border-color: var(--c-line-strong); color: var(--c-text); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-small);
  font-weight: var(--w-strong);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.badge--live { color: var(--c-live); background: var(--c-live-bg); }
.badge--prelim { color: var(--c-preliminary); background: var(--c-preliminary-bg); }
.badge--official { color: var(--c-text-muted); background: var(--c-surface-2); }
.badge--stale { color: var(--c-stale); background: var(--c-stale-bg); }
.badge--demo { color: var(--c-text-inverse); background: var(--c-red); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.fresh { color: var(--c-text-muted); font-size: var(--t-small); }

.hero { text-align: center; padding: var(--s-8) 0 var(--s-6); }
.hero h1 { font-size: var(--t-hero); line-height: var(--lh-display); margin: var(--s-3) 0 var(--s-5); }
.hero .eyebrow { margin: 0; }
.hero__hint {
  max-width: 60ch;
  margin: var(--s-3) auto 0;
  color: var(--c-text-faint);
  font-size: var(--t-small);
}

.search { display: flex; gap: var(--s-2); max-width: 620px; margin: 0 auto; }
.search input {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  font: inherit;
  font-size: 1.0625rem;
  padding: 0 var(--s-4);
  border: 2px solid var(--c-ink);
  border-radius: var(--radius-sm);
  background: var(--c-bg);
  color: var(--c-text);
}

.suggest {
  max-width: 620px;
  margin: var(--s-2) auto 0;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  text-align: left;
  background: var(--c-bg);
  overflow: hidden;
}
.suggest a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  min-height: var(--tap);
  border-bottom: 1px solid var(--c-line);
  color: var(--c-text);
  text-decoration: none;
}
.suggest a:last-child { border-bottom: none; }
.suggest a:hover, .suggest a:focus-visible { background: var(--c-surface); }
.suggest .who { font-weight: var(--w-strong); }

.suggest mark { background: var(--c-mark); color: inherit; }
.suggest__empty { padding: var(--s-4); color: var(--c-text-muted); margin: 0; }

.rt-wrap { overflow-x: auto; }
.rt { width: 100%; border-collapse: collapse; margin-top: var(--s-4); }
.rt th {
  text-align: left;
  font-size: var(--t-eyebrow);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-faint);
  padding: var(--s-2) var(--s-3);
  border-bottom: 2px solid var(--c-line);
}
.rt th.ta-r { text-align: right; }
.rt td { padding: var(--s-3); border-bottom: 1px solid var(--c-line); vertical-align: top; }
.rt tbody tr:hover { background: var(--c-surface); }

.rt .place { font-family: var(--font-numeric); font-weight: 800; width: 3.5rem; }

.rt .place--1 { color: var(--c-gold); }
.rt .place--2 { color: var(--c-silver); }
.rt .place--3 { color: var(--c-bronze); }

.rt .name { font-weight: var(--w-strong); color: var(--c-text); text-decoration: none; }
.rt .name:hover { text-decoration: underline; }
.rt .name--unknown { font-weight: 400; color: var(--c-text-faint); font-style: italic; }

.rt .time {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: var(--w-strong);
  white-space: nowrap;
}
.rt .gap {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--c-text-muted);
  white-space: nowrap;
}

.rt .pace {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--c-text-muted);
  white-space: nowrap;
}

.rt .when {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--c-text-muted);
  white-space: nowrap;
}

.rt .pb { color: var(--c-text-muted); margin-left: 0.15em; }
.rt .dnf { color: var(--c-dnf); font-weight: var(--w-strong); }
.rt .time--running { color: var(--c-live); font-weight: var(--w-strong); font-family: var(--font-text); }

.rt .gap--words { font-family: var(--font-text); font-variant-numeric: normal; }

.rt .day {
  font-size: var(--t-eyebrow);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  text-align: left;
  background: var(--c-surface);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--c-line);
}

.col-short { display: none; }

.missed { color: var(--c-preliminary); font-weight: 800; cursor: help; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.card { border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--s-4); }
.card h3 { margin: 0 0 var(--s-3); font-size: var(--t-h3); }
.card--link { color: var(--c-text); text-decoration: none; display: block; }
.card--link:hover { border-color: var(--c-line-strong); box-shadow: var(--shadow-1); }
.card__badges { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0 0; }

.stat { display: grid; gap: var(--s-1); }
.stat__v {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
}
.stat__u { font-family: var(--font-text); font-size: 1rem; font-weight: 400; }
.stat__l {
  font-size: var(--t-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-faint);
  font-weight: 800;
}
.v--gold { color: var(--c-gold); }
.v--silver { color: var(--c-silver); }
.v--bronze { color: var(--c-bronze); }
.dnf-note { color: var(--c-dnf); font-weight: var(--w-strong); }

.race-list, .hits { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.race-list li, .hits li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  min-height: var(--tap);
  border-bottom: 1px solid var(--c-line);
}
.race-list a, .hits a { color: var(--c-text); text-decoration: none; }
.race-list a:hover, .hits a:hover { text-decoration: underline; }
.race-list__name, .hits .who { font-weight: var(--w-strong); display: block; }
.hits .sub { display: block; }

.empty { text-align: center; padding: var(--s-10) var(--s-4); color: var(--c-text-muted); }
.empty__t {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-size: var(--t-h2);
  color: var(--c-text);
  line-height: var(--lh-heading);
  margin: 0 0 var(--s-3);
}

@media (max-width: 560px) {
  .rt { font-size: var(--t-small); }

  .rt td, .rt th { padding: var(--s-2) 0.15625rem; }
  .rt th { font-size: 0.625rem; letter-spacing: 0.01em; }
  .rt .place { width: 2rem; }

  .rt .kind { white-space: nowrap; }
  .rt .time, .rt .gap, .rt .when { font-size: 0.8125rem; }
  .rt .pace { font-size: 0.8125rem; }
  .col-long { display: none; }
  .col-short { display: inline; }

  .cards--bests { grid-template-columns: repeat(2, 1fr); }

  .logo .rule { display: none; }
  .search { flex-direction: column; }
  .search .btn { width: 100%; }
}

.records__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--s-5);
  margin-top: var(--s-4);
}
.rec {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--s-5);

  background: #fff;
}

.rec__dist {
  margin: 0 0 var(--s-3);
  font-size: var(--t-eyebrow);
  font-weight: 800;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.rec__dist--sub { margin-top: var(--s-4); }

.rec__head { margin: 0; }
.rec__place--lead {
  display: inline-block;
  font-size: var(--t-h3);
  font-weight: 800;
  color: var(--c-gold);
  margin-right: var(--s-3);
  vertical-align: 0.35em;
}
.rec__head .rec__runner { margin: var(--s-1) 0 0; font-size: var(--t-h3); font-weight: 800; }
.rec__head .rec__name { font-family: var(--font-display); letter-spacing: var(--ls-display); }

.rec__head::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 3px;
  background: var(--c-gold);
  margin-top: var(--s-2);
}
.rec__time {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  color: var(--c-text);
  white-space: nowrap;
}
.rec__since { margin: var(--s-1) 0 0; color: var(--c-text-muted); font-size: var(--t-small); }

.rec__head { margin-bottom: var(--s-4); }

.rec__chase { list-style: none; margin: 0; padding: 0; }
.rec__row {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: center;
  min-height: var(--tap);
  border-bottom: 1px solid var(--c-line);
}
.rec__row:last-child { border-bottom: none; }
.rec__place {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-small);
  text-align: right;
  color: var(--c-text-muted);
}

.rec__row.place--2 .rec__place { color: var(--c-silver); }
.rec__row.place--3 .rec__place { color: var(--c-bronze); }

.rec__runner { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-2); min-width: 0; }

.rec__name { color: var(--c-text); text-decoration: none; overflow-wrap: anywhere; }
.rec__name:hover { text-decoration: underline; }

a.rec__name { display: inline-flex; align-items: center; min-height: var(--tap); }
.rec__runner .sub { white-space: nowrap; }

.rec__nums { display: grid; grid-template-columns: auto auto; column-gap: var(--s-2); justify-items: end; }
.rec__nums .rec__t { grid-column: 1 / -1; }
.rec__t, .rec__d {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.rec__t { font-weight: var(--w-strong); }
.rec__d { font-size: var(--t-small); color: var(--c-text-muted); }

.rec__pace {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-small);
  color: var(--c-text-muted);
  text-align: right;
  white-space: nowrap;
}

.rec__head .rec__pace { display: block; margin-top: var(--s-1); text-align: left; }

.rec__month {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
  padding: var(--s-3);
  background: var(--c-surface);
  border-radius: var(--radius-sm);
  font-size: var(--t-small);
}
.rec__month-l {
  font-size: var(--t-eyebrow);
  font-weight: 800;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.rec__month .rec__d, .rec__month .rec__pace { font-size: inherit; }
.rec__note { color: var(--c-text-muted); }
.rec__none { margin: 0; color: var(--c-text-muted); }

.rec__rest { margin-top: var(--s-4); }

.rec__rest summary {
  display: list-item;
  min-height: var(--tap);
  align-content: center;
  cursor: pointer;
  color: var(--c-text-muted);
  font-size: var(--t-small);
}
.rec__rest summary:hover { color: var(--c-text); }

@media (max-width: 560px) {
  .rec { padding: var(--s-4); }
  .rec__row { gap: var(--s-2); }
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.year__lede { margin-bottom: var(--s-5); }
.year__lede .stat__l { color: var(--c-text-muted); }
.year__lede .sub { margin: var(--s-1) 0 0; }
.year__meta { margin: var(--s-2) 0 0; color: var(--c-text-muted); font-size: var(--t-small); }

.year__line { list-style: none; margin: 0; padding: 0; }
.ym {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--s-3);
  padding: var(--s-3) 0 var(--s-3) var(--s-4);
  border-left: 1px solid var(--c-line);
  position: relative;
}
.ym--mile::before {
  content: '';
  position: absolute;
  left: -2px;
  top: var(--s-4);
  width: 3px;
  height: 12px;
  background: var(--c-line-strong);
}
.ym__m {
  font-size: var(--t-eyebrow);
  font-weight: 800;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.ym__t {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-strong);
  text-align: right;
  white-space: nowrap;
}
.ym__vol { grid-column: 1; color: var(--c-text-muted); font-size: var(--t-small); }
.ym--none .ym__t { color: var(--c-text-muted); font-weight: 400; }
.year__cap { margin: var(--s-3) 0 0; }

.miles { list-style: none; margin: var(--s-2) 0 0; padding: 0; grid-column: 1 / -1; }

.mile { color: var(--c-text-muted); font-size: var(--t-small); }
.mile + .mile { margin-top: var(--s-1); }
.year__past { margin-top: var(--s-5); }
.year__past summary { cursor: pointer; color: var(--c-text-muted); font-size: var(--t-small); min-height: var(--tap); align-content: center; }

.pager { margin-top: var(--s-5); }

.pager__ends { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); }

.pager__stub { display: block; flex: 1 1 0; min-width: 1px; }
.pager__count { flex: 1 1 auto; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pager__pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-1);
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
}
.pager__p {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 var(--s-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
  text-decoration: none;
}
.pager__p:hover { background: var(--c-surface); }

.pager__p--on { background: var(--c-surface); font-weight: 800; cursor: default; }
.pager__gap {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--s-1);
  color: var(--c-text-faint);
}

.chart { margin: 0 0 var(--s-5); }
.chart__cap { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.chart__t {
  font-size: var(--t-eyebrow);
  font-weight: 800;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.chart__svg { display: block; width: 100%; height: 120px; margin-top: var(--s-2); }
.chart__dot { fill: var(--c-text); }

.chart__hit { fill: transparent; }

.chart__p--on .chart__dot { fill: var(--c-live); r: 4; }

.chart__cap [data-chart-readout] { font-variant-numeric: tabular-nums; }
.chart__d { color: var(--c-text-faint); font-size: var(--t-small); white-space: nowrap; }

.chart__best { stroke: var(--c-line-strong); stroke-width: 1; stroke-dasharray: 3 3; }

.chart__sep { stroke: var(--c-line); stroke-width: 1; }
.chart__sep--gap { stroke: var(--c-line-strong); stroke-dasharray: 3 3; }
.chart__axis {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin: var(--s-1) 0 0;
  font-size: var(--t-small);
}
.chart__v { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; color: var(--c-text-muted); }

.lg { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.lg__row {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: center;
  min-height: var(--tap);
  border-bottom: 1px solid var(--c-line);
}
.lg__row:last-child { border-bottom: none; }

.lg__place {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-small);
  text-align: right;
  color: var(--c-text-muted);
}
.lg__who { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-2); min-width: 0; }
.lg__name { color: var(--c-text); text-decoration: none; overflow-wrap: anywhere; }
.lg__name:hover { text-decoration: underline; }
a.lg__name { display: inline-flex; align-items: center; min-height: var(--tap); }
.lg__nums { display: grid; justify-items: end; }

.lg__laps { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; font-weight: var(--w-strong); }
.lg__km { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; font-size: var(--t-small); color: var(--c-text-muted); }

@media (max-width: 560px) {
  .ym { padding-left: var(--s-3); }
  .lg__row { gap: var(--s-2); }
}

.runs__head,
.run__row,
.run--solo,
.leg {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 6rem 5.5rem 4.5rem;
  align-items: baseline;
  gap: var(--s-3);
}

.runs { margin-top: var(--s-4); }

.runs__head {
  font-size: var(--t-eyebrow);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-faint);
  padding: var(--s-2) var(--s-3);
  border-bottom: 2px solid var(--c-line);
}

.day { margin-top: var(--s-5); }

.day__h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  margin: 0 0 var(--s-2);
  font-size: var(--t-h3);
}
.day__d { font-family: var(--font-display); }
.day__sum {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--t-small);
  color: var(--c-text-muted);
}

.run { border-bottom: 1px solid var(--c-line); }
.run__row,
.run--solo {
  padding: var(--s-3);
  min-height: var(--tap);
}

.run__row {
  cursor: pointer;
  list-style: none;
}
.run__row::-webkit-details-marker { display: none; }
.run__row:hover { background: var(--c-surface); }

.run__when { color: var(--c-text-muted); font-size: var(--t-small); }
.run__time,
.run__pace,
.leg__time,
.leg__pace {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.run__time { font-weight: var(--w-strong); }
.run__pace { color: var(--c-text-muted); }

.pace__u { font-family: var(--font-text); font-size: var(--t-small); font-weight: 400; }

.run__flag { text-align: right; white-space: nowrap; }

.run__inside { font-size: var(--t-small); color: var(--c-text-muted); }
.run[open] .run__inside { display: none; }

.run__chev {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: var(--s-2);
  border: 0.3em solid transparent;
  border-left-color: var(--c-text-faint);
  transform-origin: 0.15em 50%;
  transition: transform 140ms;
}
.run[open] .run__chev { transform: rotate(90deg); }

.legs {
  list-style: none;
  margin: 0;
  padding: 0 0 var(--s-2);
  position: relative;
}

.legs::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: var(--s-2);
  left: calc(4.5rem + var(--s-3) / 2);
  width: 2px;
  background: var(--c-line);
}
.leg { padding: var(--s-2) var(--s-3); }
.leg__kind,
.leg__time,
.leg__pace {
  color: var(--c-text-muted);
  font-size: var(--t-small);
}
.leg__kind { grid-column: 2; }
.leg__time { grid-column: 3; }
.leg__pace { grid-column: 4; }

.runs .pb,
.crown { color: var(--c-text-muted); margin-left: 0.15em; }
.crown__i { vertical-align: -0.1em; }

@media (max-width: 560px) {

  .runs__head { display: none; }
  .run__row,
  .run--solo,
  .leg {
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    gap: var(--s-1) var(--s-3);
  }
  .run__when,
  .run__kind,
  .leg__kind,
  .run__flag { grid-row: 1; }
  .run__when { grid-column: 1; }
  .run__kind,
  .leg__kind { grid-column: 2; }
  .run__flag { grid-column: 3; }
  .run__time,
  .leg__time {
    grid-column: 1 / 3;
    grid-row: 2;
    text-align: left;
  }
  .run__pace,
  .leg__pace {
    grid-column: 3;
    grid-row: 2;
  }
  .legs::before { left: var(--s-3); }
}

.site-nav a { font-weight: var(--w-strong); }

.info-head { padding-top: var(--s-8); }
.hero.info-hero { text-align: left; padding-top: 0; }

.info-hero .info-lead { margin-top: 0; }

.info-title {
  font-size: min(var(--t-hero), 10vw);
  line-height: var(--lh-display);
  margin: var(--s-3) 0 var(--s-5);
}

@keyframes info-title-in {
  from { opacity: 0; transform: translateY(0.25rem); }
  to { opacity: 1; transform: none; }
}
.info-title__lead { animation: info-title-in 0.5s ease-out both; }
.info-title__word { animation: info-title-in 0.5s ease-out 0.1s both; }
.info-title__tail { animation: info-title-in 0.5s ease-out 0.2s both; }

@media (prefers-reduced-motion: reduce) {
  .info-title__lead,
  .info-title__word,
  .info-title__tail { animation: none; }
}

.info-title__lead { display: inline; }
.info-title__tail { display: block; margin-top: 0.62em; font-size: var(--t-h1); }
.info-title__lead,
.info-title__word,
.info-title__tail { letter-spacing: var(--ls-display); }

/*
 * ДОРОЖКА ДЛИНОЙ В ЗАГОЛОВОК, А НЕ В СЛОВО. Под одним словом её всего сто
 * пикселей: любой ход кончается, не начавшись (владелец 2026-09-07: «анимация
 * бега очень быстро проходит»). Дорожка идёт от левого края заголовка до
 * правого — это в пять-десять раз длиннее, и бегунам есть где бежать.
 *
 * Живёт она в самом слове: `.info-title__word` растянут на всю оставшуюся
 * строку прозрачной подложкой (`flex: 1` не годится — строка не флекс), поэтому
 * дорожка позиционируется от H1, а не от слова.
 */
/*
 * СЛОВО, РАДИ КОТОРОГО СЮДА ПРИШЛИ, ВЫДЕЛЕНО (владелец 2026-09-07: «„бега“ надо
 * как-то выделять»). Красный тут не украшение: он тот же, каким на дорожке под
 * словом отмечен лидер, и тот же, что у кнопки. Заголовок остаётся одной
 * фразой, потому что выделено СЛОВО, а не строка.
 */
.info-title { position: relative; }
.info-title__word {
  position: relative;
  display: inline-block;
  color: var(--c-red);
}
.info-title__lane {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(1em * var(--lh-display) + 0.16em);
  height: 0.05em;
  border-radius: 0.03em;
  background: var(--c-line);
  clip-path: inset(-0.6em 0 -0.2em 0);
}

/*
 * ДЛИТЕЛЬНОСТЬ ПРОХОДА СЧИТАЕТСЯ ИЗ ДЛИНЫ ШАГА, А НЕ ПОДБИРАЕТСЯ НА ГЛАЗ. Модель
 * проходит за цикл из восьми поз 1.7-1.8 своего роста; отсюда путь за цикл в
 * пикселях, отсюда число циклов на проход и отсюда - длительность. Прежние
 * двенадцать секунд означали 4.1 роста за цикл: фигура ехала по земле втрое
 * быстрее, чем её несли ноги, и это читается скольжением даже на четырнадцати
 * пикселях. Проход у каждого свой, потому что рост и длина ног у шестерых
 * разные, - и обгоны на дорожке берутся отсюда, а не из случайных чисел.
 */
.info-title__run {
  position: absolute;
  left: 0;
  bottom: 0.02em;
  width: 6%;
  height: 0.3em;
  overflow: hidden;
  color: var(--c-red);
  --lap: 20.3s;
  animation: info-lap var(--lap) linear infinite, info-crown 72s linear infinite;
}
.info-title__run i {
  display: flex;
  width: 800%;
  height: 100%;
  animation: info-stride 0.9s steps(8) infinite;
}
.info-title__run svg { flex: none; width: 12.5%; height: 100%; }
@keyframes info-stride {
  to { transform: translateX(-100%); }
}
.info-runner { position: absolute; width: 0; height: 0; }
/*
 * КРАСНЫЙ ПЕРЕХОДИТ ОТ БЕГУНА К БЕГУНУ (владелец 2026-09-07: «выиграть может
 * каждый»). Лидер не закреплён за фигурой: каждые двенадцать секунд красным
 * становится следующий, круг по шестерым занимает семьдесят две секунды. Это
 * ровно то, что обещает раздел «Уже скоро», сказанное движением, а не словами.
 *
 * ЦВЕТОВ ТРИ, И ТРЕТИЙ - У ТОГО, КТО ИДЁТ НА ОБГОН (владелец 2026-09-07:
 * «обгоняющий должен менять цвет, нужно добавить третий цвет»). Порядок в
 * цикле каждой фигуры один и тот же: поле - претендент - лидер. Золото взято из
 * палитры арены, а не придумано: это единственный тёплый акцент, который на
 * четырнадцати пикселях не сливается ни с красным, ни с серым.
 */
@keyframes info-crown {
  0%, 16% { color: var(--c-red); }
  18%, 80% { color: var(--c-text-faint); }
  84%, 100% { color: var(--c-gold); }
}
.info-title__run--b { --lap: 27.6s; height: 0.24em; animation: info-lap var(--lap) linear infinite, info-crown 72s linear -12s infinite; }
.info-title__run--c { --lap: 26s; height: 0.27em; animation: info-lap var(--lap) linear infinite, info-crown 72s linear -24s infinite; }
.info-title__run--d { --lap: 28.6s; height: 0.22em; animation: info-lap var(--lap) linear infinite, info-crown 72s linear -36s infinite; }
.info-title__run--e { --lap: 28.2s; height: 0.26em; animation: info-lap var(--lap) linear infinite, info-crown 72s linear -48s infinite; }
.info-title__run--f { --lap: 23s; height: 0.29em; animation: info-lap var(--lap) linear infinite, info-crown 72s linear -60s infinite; }

/*
 * ПРОХОД РАСТЯГИВАЕТСЯ ВМЕСТЕ С ЗАГОЛОВКОМ. Путь фигуры - это ширина
 * заголовка, а её рост упирается в потолок кегля: на 1400 px путь вдвое
 * длиннее, чем на 660, а фигура выше едва на треть. С одной длительностью на
 * все ширины бегун проезжает 2.5 своего роста за цикл шага вместо 1.9 - ноги
 * не поспевают за телом, и это читается скольжением. Замерено на 660, 1000 и
 * 1400 px: 1.9, 2.36, 2.46. Множители возвращают все три к 1.9.
 */
@media (min-width: 900px) {
  .info-title__run { animation-duration: calc(var(--lap) * 1.28), 72s; }
}
@media (min-width: 1250px) {
  .info-title__run { animation-duration: calc(var(--lap) * 1.33), 72s; }
}
.info-title__run--b i { animation-duration: 0.98s; }
.info-title__run--c i { animation-duration: 1.06s; }
.info-title__run--d i { animation-duration: 0.92s; }
.info-title__run--e i { animation-duration: 1.02s; }
.info-title__run--f i { animation-duration: 0.95s; }

/*
 * ПРОХОД РОВНЫЙ, И ПРОМЕЖУТОЧНЫХ ОСТАНОВОК У НЕГО НЕТ.
 *
 * Их было семь, и все они лежали НЕ на прямой: 70 % вместо 81.6, 490 вместо
 * 501.6, 910 вместо 921.6, 1330 вместо 1341.6. Из-за этого скорость на проходе
 * скакала между 15.8 и 17.7 - одиннадцать процентов, восемь раз за круг,
 * каждые две с половиной секунды. Ровно это и читается как подтормаживание
 * (владелец 2026-09-08: «анимация подтормаживает»): фигура не тормозит, она
 * едет то быстрее, то медленнее.
 *
 * Между двумя точками `linear` даёт ровно постоянную скорость, поэтому
 * промежуточные остановки не нужны вовсе: они ничего не выражали, а только
 * округляли прямую до ломаной. Начало и конец за кадром - это и есть «пробег
 * круга»: фигура уходит за правый край и появляется слева, а не мигает на месте.
 */
@keyframes info-lap {
  from { transform: translateX(-120%); }
  to { transform: translateX(1560%); }
}

@media (prefers-reduced-motion: reduce) {
  .info-title__run,
  .info-title__run--b,
  .info-title__run--c,
  .info-title__run--d,
  .info-title__run--e,
  .info-title__run--f,
  .info-title__run i {
    animation: none;
    transform: none;
  }
  .info-title__run--b,
  .info-title__run--c,
  .info-title__run--d,
  .info-title__run--e,
  .info-title__run--f { display: none; }
}

.info-lead {
  font-size: var(--t-h3);
  line-height: var(--lh-body);

  max-width: 54ch;

  margin: var(--s-4) 0 0;
}
.info-hero .more { margin-top: var(--s-5); }

@media (min-width: 1100px) {
  .info-first {
    display: grid;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    gap: var(--s-10);
    align-items: start;
  }

  .info-head { grid-column: 1 / -1; }

  .info-first .section { margin-top: 0; }
  .info-first .info-how h2 { margin-top: 0; }

  .info-first .info-how { padding-top: 0; }
}

/*
 * КОЛОНКИ СЧИТАЮТСЯ ОТ БЛОКА, А НЕ ОТ ОКНА. На широком экране лесенка живёт в
 * правой колонке грида и там всего шестьсот пикселей: медиазапрос по окну этого
 * не видит и оставляет все шесть колонок, а заголовки ступеней ломаются на две
 * и три строки. Запрос к контейнеру меряет то, что есть на самом деле.
 */
.info-how__track {
  position: relative;
  padding-right: var(--s-5);
  container-type: inline-size;
}
.info-lap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 3px;
  border-radius: 2px;
  background: var(--c-line);
  overflow: hidden;
}
.info-lap i {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 14%;
  border-radius: 2px;
  background: var(--c-red);
  animation: info-round 17s linear 1s infinite;
}
.info-lap i:nth-child(2) {
  height: 11%;
  background: var(--c-text-muted);
  animation-name: info-round-2;
}
.info-lap i:nth-child(3) {
  height: 11%;
  background: var(--c-text-muted);
  animation-name: info-round-3;
}
@keyframes info-round-2 {
  0% { transform: translateY(0); }
  71.3% { transform: translateY(809%); }
  82% { transform: translateY(809%); }
  95%, 100% { transform: translateY(0); }
}
@keyframes info-round-3 {
  0% { transform: translateY(0); }
  76.4% { transform: translateY(809%); }
  82% { transform: translateY(809%); }
  95%, 100% { transform: translateY(0); }
}
@keyframes info-round {
  0% { transform: translateY(0); }
  67.76% { transform: translateY(614%); }
  82.0% { transform: translateY(614%); }
  95.0%, 100% { transform: translateY(0); }
}

.info-steps {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
}
.info-step {
  position: relative;
  margin-bottom: var(--s-4);
  padding: var(--s-4) var(--s-5) var(--s-4) calc(var(--s-5) + var(--s-4));
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-bg);
}
.info-step:last-child { margin-bottom: 0; }
/* СЕТКА, А НЕ ПОТОК: колонки одинаковы у всех трёх ступеней. В потоке ширина
   надписи отсечки («СТАРТ», «400 М», «ФИНИШ») тянула за собой имя и время, и
   строки не совпадали по вертикали — вёрстка «ехала». */
.info-step h3 {
  margin: 0 0 var(--s-2);
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 5.6rem 4.8rem 1.3rem;
  align-items: baseline;
  column-gap: var(--s-3);
}
.info-step__title { min-width: 0; }
.info-step p { margin: 0; color: var(--c-text-muted); }
.info-step__n {
  font-size: var(--t-eyebrow);
  font-weight: 800;
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-red);
}

@keyframes info-step-in {
  from { opacity: 0; transform: translateX(-0.75rem); }
  to { opacity: 1; transform: none; }
}

@keyframes info-rail-a {
  0% { background-size: 100% 0%; }
  4.24% { background-size: 100% 22%; }
  6.35% { background-size: 100% 26%; }
  10.59% { background-size: 100% 52%; }
  12.71% { background-size: 100% 56%; }
  16.94% { background-size: 100% 82%; }
  19.06% { background-size: 100% 86%; }
  21.18% { background-size: 100% 100%; }
  82.0% { background-size: 100% 100%; }
  95.0%, 100% { background-size: 100% 0%; }
}
@keyframes info-rail-b {
  0%, 23.29% { background-size: 100% 0%; }
  27.53% { background-size: 100% 22%; }
  29.64% { background-size: 100% 26%; }
  33.88% { background-size: 100% 52%; }
  36.0% { background-size: 100% 56%; }
  40.23% { background-size: 100% 82%; }
  42.35% { background-size: 100% 86%; }
  44.47% { background-size: 100% 100%; }
  82.0% { background-size: 100% 100%; }
  95.0%, 100% { background-size: 100% 0%; }
}
@keyframes info-rail-c {
  0%, 46.59% { background-size: 100% 0%; }
  50.82% { background-size: 100% 22%; }
  52.94% { background-size: 100% 26%; }
  57.18% { background-size: 100% 52%; }
  59.29% { background-size: 100% 56%; }
  63.53% { background-size: 100% 82%; }
  65.64% { background-size: 100% 86%; }
  67.76% { background-size: 100% 100%; }
  82.0% { background-size: 100% 100%; }
  95.0%, 100% { background-size: 100% 0%; }
}

@keyframes info-lit-a {
  0% { background-color: var(--c-bg); border-color: var(--c-line); }
  21.18%, 82.0% { background-color: var(--c-surface); border-color: var(--c-line-strong); }
  95.0%, 100% { background-color: var(--c-bg); border-color: var(--c-line); }
}
@keyframes info-lit-b {
  0%, 23.29% { background-color: var(--c-bg); border-color: var(--c-line); }
  44.47%, 82.0% { background-color: var(--c-surface); border-color: var(--c-line-strong); }
  95.0%, 100% { background-color: var(--c-bg); border-color: var(--c-line); }
}
@keyframes info-lit-c {
  0%, 46.59% { background-color: var(--c-bg); border-color: var(--c-line); }
  67.76%, 82.0% { background-color: var(--c-surface); border-color: var(--c-line-strong); }
  95.0%, 100% { background-color: var(--c-bg); border-color: var(--c-line); }
}
@keyframes info-done-a {
  0%, 18.38% { opacity: 0; transform: scale(0.6); }
  22.58%, 82.0% { opacity: 1; transform: none; }
  88.0%, 100% { opacity: 0; transform: scale(0.6); }
}
@keyframes info-done-b {
  0%, 41.67% { opacity: 0; transform: scale(0.6); }
  45.87%, 82.0% { opacity: 1; transform: none; }
  88.0%, 100% { opacity: 0; transform: scale(0.6); }
}
@keyframes info-done-c {
  0%, 64.96% { opacity: 0; transform: scale(0.6); }
  69.16%, 82.0% { opacity: 1; transform: none; }
  88.0%, 100% { opacity: 0; transform: scale(0.6); }
}

.info-step { animation: info-step-in 0.4s ease-out both, info-lit-a 17s linear 1s infinite; }
.info-step:nth-child(2) { animation: info-step-in 0.4s ease-out 0.15s both, info-lit-b 17s linear 1s infinite; }
.info-step:nth-child(3) { animation: info-step-in 0.4s ease-out 0.3s both, info-lit-c 17s linear 1s infinite; }

.info-step__who {
  display: inline-block;
  height: 1.3em;
  overflow: hidden;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--t-small);
  color: var(--c-text-muted);
  text-align: right;
}
.info-step__who i {
  display: block;
  height: 1.3em;
  line-height: 1.3em;
  font-style: normal;
  animation: info-who 85s steps(1) 1s infinite;
}
.info-step__who { animation: info-who-a 17s linear 1s infinite; }
.info-step:nth-child(2) .info-step__who { animation-name: info-who-b; }
.info-step:nth-child(3) .info-step__who { animation-name: info-who-c; }

@container (max-width: 430px) {
  .info-step h3 { grid-template-columns: 2rem minmax(0, 1fr) 4.8rem 1.3rem; }
  .info-step__who { display: none; }
}
@keyframes info-who-a {
  0%, 22.4% { color: var(--c-text-muted); }
  25.4%, 82% { color: var(--c-red); }
  95%, 100% { color: var(--c-text-muted); }
}
@keyframes info-who-b {
  0%, 48.8% { color: var(--c-text-muted); }
  51.8%, 82% { color: var(--c-red); }
  95%, 100% { color: var(--c-text-muted); }
}
@keyframes info-who-c {
  0%, 75.2% { color: var(--c-text-muted); }
  78.2%, 82% { color: var(--c-red); }
  95%, 100% { color: var(--c-text-muted); }
}
@keyframes info-who {
  0% { transform: translateY(0); }
  16.4% { transform: translateY(-1.3em); }
  36.4% { transform: translateY(-2.6em); }
  56.4% { transform: translateY(-3.9em); }
  76.4% { transform: translateY(-5.2em); }
  96.4%, 100% { transform: translateY(0); }
}

.info-step__t {
  display: inline-block;
  justify-self: end;
  height: 1.3em;
  overflow: hidden;
  font-family: var(--font-numeric);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-strong);
  color: var(--c-text);
}
.info-step__t i {
  display: block;
  height: 1.3em;
  line-height: 1.3em;
  font-style: normal;
  animation: info-time-a 85s steps(1) 1s infinite;
}
.info-step:nth-child(2) .info-step__t i { animation-name: info-time-b; }
.info-step:nth-child(3) .info-step__t i { animation-name: info-time-c; }
@keyframes info-time-a {
  0.0% { transform: translateY(0); }
  0.85% { transform: translateY(-1.3em); }
  1.69% { transform: translateY(-2.6em); }
  2.54% { transform: translateY(-3.9em); }
  3.39% { transform: translateY(-5.2em); }
  4.24% { transform: translateY(-6.5em); }
  16.4% { transform: translateY(-7.8em); }
  20.0% { transform: translateY(-7.8em); }
  20.85% { transform: translateY(-9.1em); }
  21.69% { transform: translateY(-10.4em); }
  22.54% { transform: translateY(-11.7em); }
  23.39% { transform: translateY(-13.0em); }
  24.24% { transform: translateY(-14.3em); }
  36.4% { transform: translateY(-15.6em); }
  40.0% { transform: translateY(-15.6em); }
  40.85% { transform: translateY(-16.9em); }
  41.69% { transform: translateY(-18.2em); }
  42.54% { transform: translateY(-19.5em); }
  43.39% { transform: translateY(-20.8em); }
  44.24% { transform: translateY(-22.1em); }
  56.4% { transform: translateY(-23.4em); }
  60.0% { transform: translateY(-23.4em); }
  60.85% { transform: translateY(-24.7em); }
  61.69% { transform: translateY(-26.0em); }
  62.54% { transform: translateY(-27.3em); }
  63.39% { transform: translateY(-28.6em); }
  64.24% { transform: translateY(-29.9em); }
  76.4% { transform: translateY(-31.2em); }
  80.0% { transform: translateY(-31.2em); }
  80.85% { transform: translateY(-32.5em); }
  81.69% { transform: translateY(-33.8em); }
  82.54% { transform: translateY(-35.1em); }
  83.39% { transform: translateY(-36.4em); }
  84.24% { transform: translateY(-37.7em); }
  96.4%, 100% { transform: translateY(0); }
}
@keyframes info-time-b {
  4.66% { transform: translateY(0); }
  5.51% { transform: translateY(-1.3em); }
  6.35% { transform: translateY(-2.6em); }
  7.2% { transform: translateY(-3.9em); }
  8.05% { transform: translateY(-5.2em); }
  8.89% { transform: translateY(-6.5em); }
  16.4% { transform: translateY(-7.8em); }
  24.66% { transform: translateY(-7.8em); }
  25.51% { transform: translateY(-9.1em); }
  26.35% { transform: translateY(-10.4em); }
  27.2% { transform: translateY(-11.7em); }
  28.05% { transform: translateY(-13.0em); }
  28.89% { transform: translateY(-14.3em); }
  36.4% { transform: translateY(-15.6em); }
  44.66% { transform: translateY(-15.6em); }
  45.51% { transform: translateY(-16.9em); }
  46.35% { transform: translateY(-18.2em); }
  47.2% { transform: translateY(-19.5em); }
  48.05% { transform: translateY(-20.8em); }
  48.89% { transform: translateY(-22.1em); }
  56.4% { transform: translateY(-23.4em); }
  64.66% { transform: translateY(-23.4em); }
  65.51% { transform: translateY(-24.7em); }
  66.35% { transform: translateY(-26.0em); }
  67.2% { transform: translateY(-27.3em); }
  68.05% { transform: translateY(-28.6em); }
  68.89% { transform: translateY(-29.9em); }
  76.4% { transform: translateY(-31.2em); }
  84.66% { transform: translateY(-31.2em); }
  85.51% { transform: translateY(-32.5em); }
  86.35% { transform: translateY(-33.8em); }
  87.2% { transform: translateY(-35.1em); }
  88.05% { transform: translateY(-36.4em); }
  88.89% { transform: translateY(-37.7em); }
  96.4%, 100% { transform: translateY(0); }
}
@keyframes info-time-c {
  9.32% { transform: translateY(0); }
  10.16% { transform: translateY(-1.3em); }
  11.01% { transform: translateY(-2.6em); }
  11.86% { transform: translateY(-3.9em); }
  12.71% { transform: translateY(-5.2em); }
  13.55% { transform: translateY(-6.5em); }
  16.4% { transform: translateY(-7.8em); }
  29.32% { transform: translateY(-7.8em); }
  30.16% { transform: translateY(-9.1em); }
  31.01% { transform: translateY(-10.4em); }
  31.86% { transform: translateY(-11.7em); }
  32.71% { transform: translateY(-13.0em); }
  33.55% { transform: translateY(-14.3em); }
  36.4% { transform: translateY(-15.6em); }
  49.32% { transform: translateY(-15.6em); }
  50.16% { transform: translateY(-16.9em); }
  51.01% { transform: translateY(-18.2em); }
  51.86% { transform: translateY(-19.5em); }
  52.71% { transform: translateY(-20.8em); }
  53.55% { transform: translateY(-22.1em); }
  56.4% { transform: translateY(-23.4em); }
  69.32% { transform: translateY(-23.4em); }
  70.16% { transform: translateY(-24.7em); }
  71.01% { transform: translateY(-26.0em); }
  71.86% { transform: translateY(-27.3em); }
  72.71% { transform: translateY(-28.6em); }
  73.55% { transform: translateY(-29.9em); }
  76.4% { transform: translateY(-31.2em); }
  89.32% { transform: translateY(-31.2em); }
  90.16% { transform: translateY(-32.5em); }
  91.01% { transform: translateY(-33.8em); }
  91.86% { transform: translateY(-35.1em); }
  92.71% { transform: translateY(-36.4em); }
  93.55% { transform: translateY(-37.7em); }
  96.4%, 100% { transform: translateY(0); }
}


.info-step__done {
  justify-self: end;

  font-size: 1.3em;
  align-self: center;
  color: var(--c-text);
  opacity: 0;
  animation: info-done-a 17s linear 1s infinite;
}
.info-step:nth-child(2) .info-step__done { animation-name: info-done-b; }
.info-step:nth-child(3) .info-step__done { animation-name: info-done-c; }

.info-step::after {
  content: '';
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  bottom: var(--s-4);
  width: 3px;
  border-radius: 2px;
  background-color: var(--c-line);
  background-image: linear-gradient(var(--c-text), var(--c-text));
  background-repeat: no-repeat;
  background-size: 100% 0%;
  animation: info-rail-a 17s linear 1s infinite;
}
.info-step:nth-child(2)::after { animation-name: info-rail-b; }
.info-step:nth-child(3)::after { animation-name: info-rail-c; }

@media (prefers-reduced-motion: reduce) {

  .info-step,
  .info-step:nth-child(2),
  .info-step:nth-child(3),
  .info-step::after,
  .info-step__done,
  .info-step__t i,
  .info-step__who i,
  .info-step__who,
  .info-lap i { animation: none; }
  .info-step__who { color: var(--c-red); }
  .info-step::after { background-size: 100% 100%; }
  .info-step { background: var(--c-surface); border-color: var(--c-line-strong); }
  .info-step__done { opacity: 1; }

  .info-step__t i { transform: translateY(-6.5em); }
  .info-step__who i { transform: none; }
  .info-lap i { transform: translateY(614%); }
  .info-lap i:nth-child(2),
  .info-lap i:nth-child(3) { transform: translateY(809%); }
}

@media (min-width: 1100px) {
  .info-step:nth-child(2) { margin-left: 20%; }
  .info-step:nth-child(3) { margin-left: 9%; }
}

.info-points { list-style: none; margin: var(--s-4) 0 0; padding: 0; max-width: 68ch; }
.info-points li { padding: var(--s-3) 0; border-bottom: 1px solid var(--c-line); }

.info-band {
  background: var(--c-surface);
  border-radius: var(--radius);
  padding: var(--s-6) var(--s-5);
}

/*
 * БЕЛЫЕ БЛОКИ ОБРАМЛЕНЫ (владелец 2026-09-07). Подложка отделяет блок цветом,
 * а те, что стоят на белом, до сих пор держались одним отступом и на длинной
 * странице читались сплошняком. Рамка даёт им ту же границу, что подложка -
 * соседям, и чередование остаётся: залитый блок, обведённый блок, залитый.
 */
main > section.info-sec:not(.info-band):not(.info-plans) {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--s-6) var(--s-5);
}

.info-band > h2 { margin-top: 0; }

.info-plans {
  background: var(--c-surface-2);
  border-radius: var(--radius);
  padding: var(--s-6) var(--s-5);
}
.info-plans > h2 { margin-top: 0; }
.info-plans__why { max-width: 62ch; color: var(--c-text-muted); margin: var(--s-4) 0 0; }
.info-plans__group { margin: var(--s-6) 0 var(--s-3); }

.info-plans__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
}
.info-plans__i { width: 20px; height: 20px; flex: none; color: var(--c-text-muted); }
.info-plans .card {
  border-color: var(--c-line-strong);
  background: var(--c-bg);
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, border-color 0.15s ease-out;
}

.info-plans .card:hover {
  transform: translateY(-2px);
  border-color: var(--c-text);
  box-shadow: var(--shadow-1);
}
.info-plans .card:hover .info-plans__i { color: var(--c-text); }
.info-plans .card { border-style: dashed; }
.info-plans .card p { color: var(--c-text-muted); }

.info-board {
  background: var(--c-bg);
  color: var(--c-text);
  border-radius: var(--radius);
  padding: var(--s-6) var(--s-5);
}
.info-board > h2 { margin-top: 0; }
.info-board__mats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3) var(--s-5);
  margin: var(--s-4) 0 0;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-line-strong);
}
.info-board__mats p { margin: 0; }
.info-board__t { max-width: 62ch; margin: var(--s-4) 0 0; }
.info-board__cap { margin: var(--s-3) 0 0; font-size: var(--t-small); color: var(--c-text-muted); }

.info-board__screen {
  margin: var(--s-5) 0 0;
  padding: var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-small);
}
.info-board__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--c-line-strong);
}
.info-board__club { font-family: var(--font-display); font-weight: var(--w-display); }
.info-board__badge {
  font-size: var(--t-eyebrow);
  font-weight: 800;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-muted);
  border: 1px solid var(--c-line-strong);
  padding: 0 var(--s-2);
}
/*
 * КОЛОНКИ ТАБЛО ОДНИ НА ВСЕ СТРОКИ, И ЭТО ОБЯЗАНО ОСТАТЬСЯ ОДНИМ ПРАВИЛОМ.
 * Каждая строка макета - самостоятельный грид: живая строка это `<p>`,
 * остальные - `<li>` внутри двух разных `<ol>`, общего грида на них нет.
 * Поэтому любой размер, зависящий от содержимого (`max-content`, `auto`,
 * `fit-content`), считается ПО КАЖДОЙ СТРОКЕ ОТДЕЛЬНО и разводит шапку с телом:
 * замер показал шестнадцать пикселей расхождения на колонке участника. Треки
 * тут только жёсткие и `minmax(0, 1fr)`, а влезаемость подписи решается не
 * шириной колонки, а КОРОТКОЙ подписью - тем же приёмом, которым живёт
 * настоящая таблица результатов (`columnLabel` в `results.ts`).
 */
.info-board__live,
.info-board__row {
  display: grid;
  grid-template-columns: 1.6rem 5.6rem minmax(0, 1fr) 4.2rem 3.4rem 4.2rem 4.2rem;
  gap: var(--s-2) var(--s-3);
  align-items: baseline;
  margin: 0;
  padding: var(--s-2) 0;
}
.info-board__val,
.info-board__pace,
.info-board__split,
.info-board__at { text-align: right; font-variant-numeric: tabular-nums; }
.info-board__pace,
.info-board__at { color: var(--c-text-muted); }
.info-board__row--head {
  font-size: var(--t-eyebrow);
  font-weight: 800;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-muted);
  border-bottom: 1px solid var(--c-line-strong);
}
.info-board__live { font-weight: var(--w-strong); border-bottom: 1px solid var(--c-line-strong); }
.info-board__kind,
.info-board__pos { color: var(--c-text-muted); }
@media (max-width: 860px) {
  .info-board__live,
  .info-board__row { grid-template-columns: 1.6rem 5.6rem minmax(0, 1fr) 4.2rem 4.2rem; }
  .info-board__pace,
  .info-board__at { display: none; }
}
@media (max-width: 620px) {
  .info-board__live,
  .info-board__row { grid-template-columns: 1.4rem minmax(0, 1fr) 4.2rem; }
  .info-board__kind,
  .info-board__split { display: none; }
}
.info-board__who { overflow-wrap: anywhere; }
.info-board__val { font-variant-numeric: tabular-nums; }
.info-board__slide {
  margin: var(--s-3) 0 0;
  font-size: var(--t-eyebrow);
  font-weight: 800;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.info-board__rows { list-style: none; margin: var(--s-1) 0 0; padding: 0; }

.info-board__clock {
  display: inline-block;
  height: 1.25em;
  overflow: hidden;
  vertical-align: bottom;
}
.info-board__clock i {
  display: block;
  height: 1.25em;
  line-height: 1.25em;
  font-style: normal;
  animation: info-tick 4s steps(4) infinite;
}
@keyframes info-tick {
  to { transform: translateY(-5em); }
}

.info-board__panes { display: grid; }
.info-board__pane {
  grid-area: 1 / 1;
  animation: info-pane 12s ease-in-out infinite;
}
.info-board__pane:nth-child(2) { animation-name: info-pane-2; }
@keyframes info-pane {
  0%, 44% { opacity: 1; }
  50%, 94% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes info-pane-2 {
  0%, 44% { opacity: 0; }
  50%, 94% { opacity: 1; }
  100% { opacity: 0; }
}

.info-board__rot { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-4) 0 0; }
.info-board__dots { display: flex; gap: var(--s-2); }
.info-board__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-line-strong);
  animation: info-dot-on 12s steps(1) infinite;
}
.info-board__dot:nth-child(2) { animation-delay: 6s; }
@keyframes info-dot-on {
  0%, 49% { background: var(--c-text); }
  50%, 100% { background: var(--c-line-strong); }
}
.info-board__track { flex: 1; height: 2px; background: var(--c-line-strong); }
.info-board__fill {
  display: block;
  height: 100%;
  background: var(--c-text);
  animation: info-fill 6s linear infinite;
}
@keyframes info-fill {
  from { width: 0; }
  to { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .info-board__clock i,
  .info-board__pane,
  .info-board__dot,
  .info-board__fill { animation: none; }
  .info-board__pane:nth-child(2) { display: none; }
  .info-board__fill { width: 40%; }
  .info-board__dot:first-child { background: var(--c-text); }
}

.info-cta__t { max-width: 62ch; }
.info-later { max-width: 62ch; margin: var(--s-4) 0 0; color: var(--c-text-muted); }

.info-facts,
.info-contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-5);
  margin: var(--s-4) 0 0;
}
.info-facts > div,
.info-contacts > div { display: grid; gap: var(--s-1); align-content: start; }

.info-facts dd,
.info-contacts dd { margin: 0; font-weight: var(--w-strong); }

.info-facts dd a,
.info-contacts dd a { display: inline-flex; align-items: center; min-height: var(--tap); }

.info-soon { font-weight: 400; color: var(--c-text-muted); font-style: italic; }

@media (max-width: 560px) {
  /* Запасной путь для браузеров без запросов к контейнеру: там же, где раньше. */
  .info-step h3 { grid-template-columns: 2rem minmax(0, 1fr) 4.8rem 1.3rem; }
  .info-step__who { display: none; }

  .info-band,
  .info-board,
  .info-plans {
    margin-left: calc(-1 * var(--page-pad));
    margin-right: calc(-1 * var(--page-pad));
    border-radius: 0;
    padding: var(--s-5) var(--page-pad);
  }
  .info-board__mats { grid-template-columns: minmax(0, 1fr); }
}

.section > h2 { position: relative; }
.section > h2::after {
  content: '';
  display: block;
  width: calc(var(--info-pace) * 100%);
  height: 2px;
  margin-top: var(--s-3);
  background: var(--c-red);
}
@property --info-pace {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}
/*
 * БЕГУН НЕ ЗАХОДИТ НА ТЕКСТ (владелец 2026-09-07: «моделька не должна
 * пересекаться с заголовками»). Дорожка у заголовков с бегуном отодвинута вниз
 * ровно на его рост: фигура целиком помещается между строкой и линией, а не
 * проезжает сквозь буквы. У заголовков без бегуна отбивка прежняя - лишний
 * воздух там был бы дырой.
 */
.section > h2.info-h::after { margin-top: calc(var(--s-3) + 0.72em); }
.info-pace {
  display: none;
  position: absolute;
  left: calc(var(--info-pace) * (100% - 0.44em));
  bottom: 2px;
  width: 0.44em;
  height: 0.7em;
  overflow: hidden;
  color: var(--c-red);
}
.info-pace i {
  display: flex;
  width: 800%;
  height: 100%;
}
.info-pace svg { flex: none; width: 12.5%; height: 100%; }
@keyframes info-pace {
  from { --info-pace: 0; }
  to { --info-pace: 1; }
}

@property --info-row {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}
.info-sec .info-points li { position: relative; }
.info-sec .info-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  height: 1px;
  width: calc(var(--info-row) * 100%);
  opacity: calc(1 - var(--info-row));
  background: var(--c-red);
}
@keyframes info-row {
  from { --info-row: 0; }
  to { --info-row: 1; }
}
@keyframes info-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
/*
 * У КАЖДОГО РАЗДЕЛА СВОЙ ХОД (владелец 2026-09-07: «анимация после первого
 * экрана должна быть разной, иначе смотрится всё как одно и сливается»). Ход
 * выбран не ради разнообразия, а по смыслу раздела: что записывается - встаёт
 * снизу с отсечкой; что видно всем - приезжает слева, как строка ленты; где
 * смотреть - карточки проявляются приближением; почему здесь - факты приходят
 * справа; что впереди - планы всплывают из полупрозрачности, потому что они
 * ещё не здесь.
 */
@keyframes info-slide {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: none; }
}
/*
 * ХОД СПРАВА НЕ ИМЕЕТ ПРАВА УВЕЗТИ СТРАНИЦУ ВБОК. Строка, сдвинутая на
 * восемнадцать пикселей вправо, на узком экране выходит за правый край и даёт
 * горизонтальную прокрутку - измерено на 380 px, страница ехала на три пикселя.
 * `clip` вместо `hidden` намеренно: `hidden` сделал бы раздел скроллпортом, а
 * внутри него `view()` навсегда застревает на половине - той же ловушкой уже
 * поймало шаг бегуна.
 */
.info-sec { overflow-x: clip; }
@keyframes info-slide-back {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes info-pop {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}
@keyframes info-dim {
  from { opacity: 0.15; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  /*
   * ОТСЧЁТ ИДЁТ ПО РАЗДЕЛУ, А НЕ ПО ЗАГОЛОВКУ. У заголовка своя высота в сорок
   * пикселей, и весь проход укладывался в один экран прокрутки - владелец:
   * «анимация при прокрутке по-прежнему быстрая». Раздел выше в полтора-два
   * раза, и бегун идёт ровно столько, сколько читают раздел.
   */
  .info-sec { view-timeline-name: --info-rule; }
  .section > h2 {
    animation: info-pace linear both;
    animation-timeline: --info-rule;
    animation-range: cover 0% cover 100%;
  }
  .info-pace { display: block; }
  .info-pace i {
    animation-name: info-stride;
    animation-duration: auto;
    animation-timing-function: steps(8);
    animation-iteration-count: 19;
    animation-timeline: --info-rule;
    animation-range: cover 0% cover 100%;
  }
  /*
   * ЧИСЛО ЦИКЛОВ РАСТЁТ ВМЕСТЕ С ЗАГОЛОВКОМ. Путь бегуна - это ширина
   * заголовка, а рост фигуры упирается в потолок кегля: на 1400 px путь вдвое
   * длиннее, чем на 650 px, а фигура выше всего на треть. С одним числом циклов
   * она проезжает 2.5 своего роста за цикл вместо 1.7 и снова скользит.
   * Замерено на 650, 1000 и 1400 px.
   */
  @media (min-width: 900px) {
    .info-pace i { animation-iteration-count: 26; }
  }
  @media (min-width: 1250px) {
    .info-pace i { animation-iteration-count: 30; }
  }
  .info-sec .info-points li,
  .section .cards > *,
  .section .records__grid > *,
  .section .lg__row,
  .info-board__screen,
  .info-sec .info-facts > div {
    animation: info-rise linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 55%;
  }
  .info-sec .info-points li {
    animation: info-rise linear both, info-row linear both;
    animation-timeline: view(), view();
    animation-range: entry 5% cover 55%, entry 5% cover 42%;
  }
  .info-what .info-points li { animation-name: info-rise, info-row; }
  .info-open .info-points li { animation-name: info-slide; }
  .info-see .cards > * { animation-name: info-pop; }
  .info-arena .info-points li { animation-name: info-slide-back; }
  .info-plans .info-points li,
  .info-plans .cards > * { animation-name: info-dim; }
  .info-place .info-facts > div { animation-name: info-slide; }
  .info-cta .info-cta__t,
  .info-cta .more {
    animation: info-pop linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 55%;
  }
}

.section .cards .card--link { transition: transform 0.15s ease-out, box-shadow 0.15s ease-out; }
.section .cards .card--link:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .info-pace { display: none; }
  .section > h2,
  .info-pace i,
  .section > h2::after,
  .info-cta .info-cta__t,
  .info-cta .more,
  .info-sec .info-points li,
  .section .cards > *,
  .section .records__grid > *,
  .section .lg__row,
  .info-board__screen,
  .info-sec .info-facts > div { animation: none; }
  .section .cards .card--link { transition: none; }
  .section .cards .card--link:hover { transform: none; }

  .info-plans .card { transition: none; }
  .info-plans .card:hover { transform: none; }
}

.page {
  background-image:
    radial-gradient(ellipse 24rem 12rem at 42% 2%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 15rem 7rem at 9% 5%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 12rem 7rem at 10% 8%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 34rem 19rem at 63% 11%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 25rem 13rem at 2% 14%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 12rem 7rem at 84% 18%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 28rem 14rem at 30% 21%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 16rem 8rem at 95% 24%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 21rem 10rem at 49% 27%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 21rem 10rem at 78% 31%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 27rem 15rem at 97% 34%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 13rem 7rem at 91% 37%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 30rem 15rem at 59% 40%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 12rem 7rem at 71% 44%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 30rem 16rem at 91% 47%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 30rem 17rem at 49% 50%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 13rem 7rem at 75% 53%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 28rem 15rem at 20% 56%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 29rem 16rem at 98% 60%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 18rem 9rem at 23% 63%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 22rem 11rem at 36% 66%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 29rem 16rem at 43% 69%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 27rem 14rem at 7% 73%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 18rem 10rem at 34% 76%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 16rem 8rem at 45% 79%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 30rem 17rem at 39% 82%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 19rem 9rem at 77% 86%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 27rem 13rem at 55% 89%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 32rem 17rem at 40% 92%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 19rem 9rem at 30% 95%, transparent 62%, var(--c-surface) 62%, var(--c-surface) 63.3%, transparent 63.3%),
    radial-gradient(ellipse 32rem 4rem at 15% 4%, transparent 70%, var(--c-surface) 70%, var(--c-surface) 74%, transparent 74%),
    radial-gradient(ellipse 46rem 5rem at 79% 13%, transparent 70%, var(--c-surface) 70%, var(--c-surface) 74%, transparent 74%),
    radial-gradient(ellipse 48rem 4rem at 12% 26%, transparent 70%, var(--c-surface) 70%, var(--c-surface) 74%, transparent 74%),
    radial-gradient(ellipse 46rem 3rem at 60% 31%, transparent 70%, var(--c-surface) 70%, var(--c-surface) 74%, transparent 74%),
    radial-gradient(ellipse 37rem 4rem at 91% 44%, transparent 70%, var(--c-surface) 70%, var(--c-surface) 74%, transparent 74%),
    radial-gradient(ellipse 46rem 4rem at 71% 50%, transparent 70%, var(--c-surface) 70%, var(--c-surface) 74%, transparent 74%),
    radial-gradient(ellipse 46rem 3rem at 30% 59%, transparent 70%, var(--c-surface) 70%, var(--c-surface) 74%, transparent 74%),
    radial-gradient(ellipse 47rem 4rem at 63% 72%, transparent 70%, var(--c-surface) 70%, var(--c-surface) 74%, transparent 74%),
    radial-gradient(ellipse 41rem 3rem at 79% 77%, transparent 70%, var(--c-surface) 70%, var(--c-surface) 74%, transparent 74%),
    radial-gradient(ellipse 34rem 3rem at 51% 90%, transparent 70%, var(--c-surface) 70%, var(--c-surface) 74%, transparent 74%),
    radial-gradient(circle 4px at 64% 7%, var(--c-surface) 0 100%, transparent 100%),
    radial-gradient(circle 3px at 6% 19%, var(--c-surface) 0 100%, transparent 100%),
    radial-gradient(circle 6px at 31% 33%, var(--c-surface) 0 100%, transparent 100%),
    radial-gradient(circle 5px at 12% 42%, var(--c-surface) 0 100%, transparent 100%),
    radial-gradient(circle 4px at 37% 51%, var(--c-surface) 0 100%, transparent 100%),
    radial-gradient(circle 3px at 72% 65%, var(--c-surface) 0 100%, transparent 100%),
    radial-gradient(circle 6px at 72% 78%, var(--c-surface) 0 100%, transparent 100%),
    radial-gradient(circle 5px at 69% 84%, var(--c-surface) 0 100%, transparent 100%),
    radial-gradient(ellipse 19rem 11rem at 63% 11%, transparent 60%, var(--c-surface) 60%, var(--c-surface) 61.6%, transparent 61.6%),
    radial-gradient(ellipse 18rem 10rem at 40% 92%, transparent 60%, var(--c-surface) 60%, var(--c-surface) 61.6%, transparent 61.6%),
    radial-gradient(ellipse 17rem 8rem at 59% 40%, transparent 60%, var(--c-surface) 60%, var(--c-surface) 61.6%, transparent 61.6%),
    radial-gradient(ellipse 17rem 9rem at 91% 47%, transparent 60%, var(--c-surface) 60%, var(--c-surface) 61.6%, transparent 61.6%),
    radial-gradient(ellipse 17rem 10rem at 49% 50%, transparent 60%, var(--c-surface) 60%, var(--c-surface) 61.6%, transparent 61.6%),
    radial-gradient(ellipse 17rem 10rem at 39% 82%, transparent 60%, var(--c-surface) 60%, var(--c-surface) 61.6%, transparent 61.6%),
    radial-gradient(ellipse 16rem 9rem at 98% 60%, transparent 60%, var(--c-surface) 60%, var(--c-surface) 61.6%, transparent 61.6%),
    radial-gradient(ellipse 16rem 9rem at 43% 69%, transparent 60%, var(--c-surface) 60%, var(--c-surface) 61.6%, transparent 61.6%),
    radial-gradient(ellipse 16rem 8rem at 30% 21%, transparent 60%, var(--c-surface) 60%, var(--c-surface) 61.6%, transparent 61.6%),
    radial-gradient(ellipse 16rem 8rem at 20% 56%, transparent 60%, var(--c-surface) 60%, var(--c-surface) 61.6%, transparent 61.6%),
    radial-gradient(ellipse 15rem 8rem at 97% 34%, transparent 60%, var(--c-surface) 60%, var(--c-surface) 61.6%, transparent 61.6%),
    radial-gradient(ellipse 15rem 8rem at 7% 73%, transparent 60%, var(--c-surface) 60%, var(--c-surface) 61.6%, transparent 61.6%);
  background-repeat: no-repeat;
}

main > * { background-color: var(--c-veil); }

@media (max-width: 560px) {
  .page { background-image: none; }
}