@font-face {
  font-family: "Big Shoulders";
  src: url("fonts/big-shoulders-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@property --sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 360deg;
}

:root {
  --track: #1546c8;
  --field: #0b6b47;
  --apron: #0a2a7a;
  --line: #ffffff;
  --lane: clamp(10px, 3.4vmin, 34px);
  --stroke: max(2px, .3vmin);
  --edge: clamp(8px, 2.4vmin, 28px);
}

* { box-sizing: border-box; }

body {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: var(--edge);
  background: var(--apron);
  color: var(--line);
  font-family: "Big Shoulders", "Arial Narrow", Impact, sans-serif;
}

.stadium {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  background: var(--field);
  border-radius: 9999px;
  overflow: hidden;
}

/* Six concentric lanes. Inset shadows stay truly concentric with the pill's radius. */
.lanes {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 var(--stroke) var(--line),
    inset 0 0 0 calc(var(--lane) * 1) var(--track),
    inset 0 0 0 calc(var(--lane) * 1 + var(--stroke)) var(--line),
    inset 0 0 0 calc(var(--lane) * 2) var(--track),
    inset 0 0 0 calc(var(--lane) * 2 + var(--stroke)) var(--line),
    inset 0 0 0 calc(var(--lane) * 3) var(--track),
    inset 0 0 0 calc(var(--lane) * 3 + var(--stroke)) var(--line),
    inset 0 0 0 calc(var(--lane) * 4) var(--track),
    inset 0 0 0 calc(var(--lane) * 4 + var(--stroke)) var(--line),
    inset 0 0 0 calc(var(--lane) * 5) var(--track),
    inset 0 0 0 calc(var(--lane) * 5 + var(--stroke)) var(--line),
    inset 0 0 0 calc(var(--lane) * 6) var(--track),
    inset 0 0 0 calc(var(--lane) * 6 + var(--stroke)) var(--line);
}

.infield {
  position: relative;
  padding: calc(var(--lane) * 6 + .75rem);
  text-align: center;
}

h1 {
  margin: 0;
  /* Sized from the infield: "SPORTS" is about 3.1em wide, two lines are 1.72em tall. */
  font-size: min(
    calc((100vw - 2 * var(--edge) - 12 * var(--lane) - 3rem) / 3.1),
    calc((100vh - 2 * var(--edge) - 12 * var(--lane) - 7rem) / 1.72)
  );
  font-weight: 900;
  line-height: .86;
  letter-spacing: .005em;
  text-transform: uppercase;
}

h1 span { display: block; }

p {
  max-width: 34ch;
  margin: .8em auto 0;
  font-size: clamp(1.15rem, 2.6vmin, 1.75rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .015em;
}

/* The one moment of motion: the lanes run a lap on load. */
@media (prefers-reduced-motion: no-preference) {
  @supports (mask-image: conic-gradient(#000 0deg, transparent 0deg)) {
    .lanes {
      mask-image: conic-gradient(from 180deg, #000 var(--sweep), transparent 0);
      animation: lap 1.5s cubic-bezier(.55, .05, .3, 1) both;
    }
  }
}

@keyframes lap {
  from { --sweep: 0deg; }
  to { --sweep: 360deg; }
}