/*
 * PUTTOR, built around the logo's O (draft: puttor/circle/).
 *
 * On a wide screen the page is an artboard 2000 units wide: --u is one unit.
 * The O of the logo, blown up, is drawn behind it; the coach sits on the
 * ball, the games in the cut beneath it, the numbers and the fields on the
 * ring. The shapes the text keeps to are worked out from the O's circles
 * (see the polygons at the end). Below 1280 px the same content stacks.
 */

/* The circles run off the edges on purpose; the page must not scroll after them. */
html:has(.circle-page),
.circle-page {
  overflow-x: clip;
}

.circle-page {
  --u: calc(100vw / 2000);
  --ink: #081420;
  /* One size per kind of text, wherever it stands: */
  --fs-title: calc(var(--u) * 36);   /* a section's heading */
  --fs-item: calc(var(--u) * 25);    /* a named entry: a statistic, a drill, a mode */
  --fs-text: calc(var(--u) * 19);    /* running text and the links under it */
  --fs-eyebrow: calc(var(--u) * 19); /* the capitals above a heading */
  --fs-caption: calc(var(--u) * 17); /* captions and the field chips */
  position: relative;
  overflow-x: hidden;
}

/* No underlines on this page: text on background, nothing else. */
.circle-page .text-link {
  border-bottom: 0;
  padding-bottom: 0;
}

/* ------------------------------------------------------------- corners */

.corner-circle {
  position: absolute;
  z-index: 5;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--green);
  color: var(--ink);
}

/* Top right: the quick links on a small O of their own. Its centre sits in
   the very corner, so a quarter shows: the hole's quarter in the corner and
   the ring around it, with the links along the middle of the ring. */
.corner-circle--nav {
  --rc: clamp(220px, 20vw, 340px);
  --size: calc(var(--rc) * 2);
  /* The ring's middle, between the hole (0.323) and the edge (1). */
  --mid: calc(var(--rc) * 0.66);
  top: calc(var(--rc) * -1);
  /* The corner moves in by a phone's notch, held sideways. */
  right: calc(var(--rc) * -1 + env(safe-area-inset-right, 0px));
}

.corner-circle--nav::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--rc) * 0.646);
  height: calc(var(--rc) * 0.646);
  border-radius: 50%;
  background: var(--navy);
  transform: translate(-50%, -50%);
}

.corner-circle--nav .corner-nav {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin: 0;
}

/* Each link on the ring's middle, round the lower left: 125°, 147° and
   169° from the corner (cos and sin written out). Placed by left and top,
   not by a transform, so the press's shrink can never move it off the
   pointer. */
.corner-circle--nav .corner-nav > * {
  position: absolute;
  left: calc(var(--mid) * var(--cos));
  top: calc(var(--mid) * var(--sin));
  translate: -50% -50%;
}

.corner-circle--nav .corner-nav > :nth-child(1) {
  --cos: -0.5736;
  --sin: 0.8192;
}

.corner-circle--nav .corner-nav > :nth-child(2) {
  --cos: -0.8387;
  --sin: 0.5446;
}

.corner-circle--nav .corner-nav > :nth-child(3) {
  --cos: -0.9816;
  --sin: 0.1908;
}

.corner-circle .corner-nav__item {
  color: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  .corner-circle a.corner-nav__item:hover {
    background: rgba(8, 20, 32, 0.12);
    color: var(--white);
  }
}

.corner-circle .corner-nav__item--soon {
  color: rgba(8, 20, 32, 0.45);
}

/* Bottom left: who made it, and the small print. Only its upper right
   quarter shows. */
.circle-footer {
  --size: clamp(520px, 38vw, 720px);
  position: relative;
  height: calc(var(--size) / 2);
  overflow: hidden;
}

@media (min-width: 1280px) {
  .circle-footer {
    margin-top: calc(var(--size) * -0.3);
  }
}

.corner-circle--legal {
  bottom: calc(var(--size) / -2);
  left: calc(var(--size) / -2 + env(safe-area-inset-left, 0px));
}

.corner-circle__home {
  position: absolute;
  top: 9%;
  left: 54%;
}

.corner-circle__home img {
  width: auto;
  height: 38px;
}

.corner-circle__links {
  position: absolute;
  top: 19%;
  left: 54%;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  line-height: 2;
}

.corner-circle__links a {
  color: var(--ink);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .corner-circle__links a:hover {
    color: var(--white);
  }
}

/* ---------------------------------------------------------------- hero */

.circle-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--hero-h, 100svh);
  padding: 5rem clamp(1.25rem, 4vw, 3rem) 4rem var(--hero-left, 40vw);
}

.circle-hero__main {
  max-width: 46rem;
}

.circle-hero__logo {
  width: clamp(280px, calc(var(--u) * 860), 760px);
  margin: 0 0 1.5rem;
}

.circle-hero__lead {
  max-width: 34rem;
  margin: 0 0 2rem;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  line-height: 1.45;
}

.circle-hero__note {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.circle-hero__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.75rem;
  margin: 2.25rem 0 0;
}

.circle-hero__nav a {
  color: var(--green);
  font-size: 1.05rem;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .circle-hero__nav a:hover {
    color: var(--white);
  }
}

/* --------------------------------------------------------------- wheel */

/* .wheel is the wheel's centre; the disc and the spokes hang off it. */
.wheel {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 0;
  /* Drawn smaller where the page is narrow for it (circle.js). */
  transform: scale(var(--wheel-scale, 1));
  transform-origin: 0 0;
}

.wheel__disc {
  position: absolute;
  top: calc(50% - var(--R, 400px));
  left: calc(var(--R, 400px) * -1);
  width: calc(var(--R, 400px) * 2);
  height: calc(var(--R, 400px) * 2);
  border-radius: 50%;
  background: var(--green);
}

/* The hole of the O, in the logo's proportion: 46 of 142.5. */
.wheel__disc::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--R, 400px) * 0.646);
  height: calc(var(--R, 400px) * 0.646);
  border-radius: 50%;
  background: var(--navy);
  transform: translate(-50%, -50%);
}

.wheel__rotor {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: rotate(var(--turn, 0deg));
  transition: transform 1.1s cubic-bezier(0.45, 0, 0.2, 1);
}

/* The ball: turned with the wheel, at --ball-angle and --ball-d from the
   centre (circle.js keeps its cut clear of the words). The cap sits under
   the disc, so only its outer part shows; the bite is the disc's own, cut
   to its round edge. */
.wheel__cap,
.wheel__bite {
  position: absolute;
  top: calc(50% - var(--R, 400px));
  left: calc(var(--R, 400px) * -1);
  width: calc(var(--R, 400px) * 2);
  height: calc(var(--R, 400px) * 2);
  border-radius: 50%;
  pointer-events: none;
  transform: rotate(var(--turn, 0deg));
  transition: transform 1.1s cubic-bezier(0.45, 0, 0.2, 1);
}

.wheel__bite {
  top: 0;
  left: 0;
  overflow: hidden;
}

.wheel__cap span,
.wheel__bite span {
  position: absolute;
  top: calc(50% - var(--ball-r, 0px));
  left: calc(50% - var(--ball-r, 0px));
  width: calc(var(--ball-r, 0px) * 2);
  height: calc(var(--ball-r, 0px) * 2);
  border-radius: 50%;
  background: var(--green);
  transform: rotate(var(--ball-angle, 30deg)) translateX(var(--ball-d, 0px));
}

.wheel__bite span {
  background: var(--navy);
}

.wheel__spoke {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--spoke-w, 280px);
  color: var(--ink);
  font-size: 0.74rem;
  line-height: 1.45;
  opacity: 0.5;
  cursor: pointer;
  transform-origin: 0 0;
  transform: rotate(var(--angle)) translate(var(--r0, 200px), -50%);
  transition: opacity 0.6s ease;
}

.wheel__spoke[data-active] {
  opacity: 1;
  cursor: default;
}

.wheel__title {
  margin: 0 0 0.35rem;
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.25;
}

.wheel__spoke p {
  margin: 0 0 0.4rem;
}

/* The arrows hover on the disc above and below the level spoke, in one
   place throughout (placed by assets/js/circle.js). */
.wheel__arrow {
  position: absolute;
  left: calc(var(--r0, 200px) + var(--spoke-w, 300px) - 42px);
  top: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1.5px solid rgba(8, 20, 32, 0.4);
  border-radius: 50%;
  background: var(--green);
  color: var(--ink);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, transform 160ms ease-out;
}

/* A press the hand can feel, on either set of arrows. */
.wheel__arrow:active,
.orbit__arrow:active {
  transform: scale(0.95);
}

.wheel__arrow svg {
  width: 20px;
  height: 20px;
}

@media (hover: hover) and (pointer: fine) {
  .wheel__arrow:hover {
    background: var(--ink);
    color: var(--green);
  }
}

/* --------------------------------------------------------------- stage */

.stage {
  position: relative;
  height: calc(var(--u) * 4400);
  font-size: var(--fs-text);
  line-height: 1.5;
}

/* Runs on past the stage, so the ring ends on its own curve, not a cut. */
.stage__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--green);
}

.stage > section,
.orbit {
  position: absolute;
}

/* Words above pictures: a faint screenshot waiting behind text never covers it. */
.stage > section {
  z-index: 2;
}

.orbit {
  z-index: 1;
}

/* The cap is narrow at its top; the first line starts where it has room. */
.stage .coach-cap__eyebrow {
  margin-top: calc(var(--u) * 126);
}

.coach-cap__link,
.games-arc__link {
  font-size: var(--fs-text);
}

.on-green {
  color: var(--ink);
}

.on-green .eyebrow {
  color: var(--ink);
  opacity: 0.7;
}

/* On the green: dark letters in a dark edge, no fill. */
.on-green .pro-tag {
  border-color: var(--ink);
  background: none;
  color: var(--ink);
}

.on-green .free-tag {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--green);
}

.on-green .text-link {
  color: var(--ink);
  font-weight: 500;
}

.stage .eyebrow {
  font-size: var(--fs-eyebrow);
}

.stage__title {
  margin: 0 0 0.5em;
  font-size: var(--fs-title);
  font-weight: 400;
  line-height: 1.15;
}

.stage p {
  margin: 0 0 0.9em;
}

/* The coach on the ball's green cap: two floats carve out its outline. */
@media (min-width: 1280px) {
  /* Smaller only where a language needs it (circle.js). */
  .coach-cap {
    font-size: calc(var(--u) * var(--coach-fs, 19));
  }

  .stage .coach-cap__link {
    font-size: 1em;
  }

}

.coach-cap__left {
  float: left;
}

.coach-cap__right {
  float: right;
}

/* The lower band: below the first pair, each side on its own. */
.coach-cap__left2 {
  float: left;
  clear: left;
}

.coach-cap__right2 {
  float: right;
  clear: right;
}

/* The games in the cut below: each line starts just inside the curve. */
/* The games in the cut below: a column whose lines each start the same
   distance in from the ring's curve and end as far from the ball's
   (circle.js). */
.games-arc {
  top: calc(var(--u) * 625);
  left: 0;
  width: 100%;
  color: var(--white);
}

.games-arc__line {
  margin: 0;
}

/* Wrappers as wide as the page let clicks through to what lies beneath
   (the coach's link, above all); only the words themselves take them. */
.games-arc,
.games-arc__drills,
.custom-more,
.custom-more .chips {
  pointer-events: none;
}

.stage [data-arc] {
  pointer-events: auto;
}

.games-arc .eyebrow {
  color: var(--green);
}

.games-arc__title {
  font-size: var(--fs-title);
  font-weight: 400;
  line-height: 1.15;
  white-space: normal;
}

/* The same space between entries as the numbers' list: 0.8 of the text. */
.games-arc__drills {
  display: grid;
  gap: calc(var(--fs-text) * 0.8);
  margin: calc(var(--u) * 18) 0;
  padding: 0;
  list-style: none;
}

/* Name and what it is on one line where they fit, wrapping on where not:
   the cut has room for the whole list only this way. */
.games-arc__drill {
  font-size: var(--fs-item);
  line-height: 1.25;
}

.games-arc__what {
  margin-left: 0.4em;
  color: var(--muted);
  font-size: var(--fs-text);
  line-height: 1.35;
}

.games-arc .text-link {
  color: var(--green);
  font-weight: 500;
}

.games-arc__note {
  color: var(--muted);
  font-size: var(--fs-text);
  white-space: normal;
}

/* The numbers' left edge keeps to the ring's curve (the polygon at the end). */
.numbers__edge {
  float: left;
}

.numbers__list {
  margin: 1.2em 0 0;
}

.numbers__list dt {
  font-size: var(--fs-item);
  font-weight: 500;
  line-height: 1.3;
}

.numbers__list dd {
  margin: 0.15em 0 0.8em;
  font-size: var(--fs-text);
  opacity: 0.85;
}

.numbers__more {
  margin-top: 1.2em;
  font-size: var(--fs-text);
}

/* The fields, lower on the ring, and what comes around them further down:
   one to a line, each stepping in from the curve like the blocks above. */
.custom-more {
  top: calc(var(--u) * 3745);
  left: 0;
  width: 100%;
}

.custom-more .chips {
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 10);
  margin: 0 0 calc(var(--u) * 26);
}

.custom-more .chips li {
  padding: 0.35em 0.85em;
  line-height: 1.35;
  border-color: rgba(8, 20, 32, 0.35);
  color: var(--ink);
  font-size: var(--fs-caption);
}

/* Beside the fields, just under the pictures above them. */
.stage .custom-more__text {
  position: absolute;
  top: calc(var(--u) * 50);
  left: calc(var(--u) * 1330);
  width: calc(var(--u) * 470);
  margin: 0;
  font-size: var(--fs-text);
  pointer-events: auto;
}

/* Quick and Detailed side by side, Custom beneath. */
.custom-text__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 16);
}

.custom-text .custom-text__pair {
  width: calc(var(--u) * 700);
}

.custom-text__pair .mode {
  width: auto !important;
}

/* Each block is as wide as the next; circle.js steps them in from the curve. */
.custom-text > *,
.custom-text .mode {
  width: calc(var(--u) * 540);
}

.custom-text__modes {
  display: grid;
  gap: calc(var(--u) * 16);
  width: auto !important;
  margin: 1em 0 0;
}

/* Each mode in a block of its own, drawn in the ink on the green. */
.mode {
  padding: calc(var(--u) * 18) calc(var(--u) * 24);
  border: 1.5px solid rgba(8, 20, 32, 0.35);
  border-radius: calc(var(--u) * 22);
}

.mode__title {
  margin: 0 0 0.25em;
  font-size: var(--fs-item);
  font-weight: 500;
}

.mode p {
  margin: 0;
  font-size: var(--fs-text);
}

/* Screenshots on a wheel round the O's centre (assets/js/circle.js), seen
   through a wedge cut from that centre: one shows at a time, and the next
   pushes it out as the wheel turns. */
.orbit {
  inset: 0;
  pointer-events: none;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.orbit__item {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  color: var(--ink);
  pointer-events: none;
  transition: transform 1.2s cubic-bezier(0.55, 0, 0.25, 1);
}

.orbit__item[data-active] {
  pointer-events: auto;
}

.orbit__item img {
  width: 100%;
  border-radius: calc(var(--u) * 26);
}

.orbit__item figcaption {
  margin-top: 0.6em;
  font-size: var(--fs-caption);
  line-height: 1.4;
}

.orbit__item figcaption strong {
  display: block;
  font-weight: 500;
}

.orbit--numbers .orbit__item {
  width: calc(var(--u) * 360);
}

.orbit--numbers .orbit__item--wide {
  width: calc(var(--u) * 600);
}

.orbit--custom .orbit__item {
  width: calc(var(--u) * 520);
}

.orbit__level {
  margin: 0 0 0.3em;
  font-size: var(--fs-item);
  text-align: center;
}

.orbit__heads,
.orbit__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 36);
}

.orbit__heads {
  margin-bottom: 0.6em;
  font-size: var(--fs-caption);
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0.75;
}

.orbit__pair figure {
  margin: 0;
}

/* ------------------------------------------------------------ the rest */

.circle-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 60rem;
  margin: 0 auto;
  padding: 4rem 1.5rem 3rem;
  text-align: center;
}

.circle-more .chips {
  justify-content: center;
  margin-top: 0;
}

.circle-more__text {
  max-width: 44rem;
  margin: 0 0 3rem;
  color: var(--muted);
}

.circle-more__cta {
  margin: 0 0 1.25rem;
  color: var(--green);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

/* ------------------------------------------------- narrower than 1280 px */

@media (max-width: 1279px) {
  .circle-page {
    --fs-title: clamp(1.6rem, 5vw, 2.1rem);
    --fs-item: 1.05rem;
    --fs-text: 1rem;
    --fs-eyebrow: 0.85rem;
    --fs-caption: 0.82rem;
  }

  .circle-hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 8.5rem clamp(1.25rem, 4vw, 3rem) 2rem;
  }

  /* A smaller O in the corner, clear of the wordmark. */
  .corner-circle--nav {
    --rc: 170px;
  }

  /* Wider apart on the smaller circle, and starting lower, so the third
     stays clear of the top edge: 110°, 138° and 166°. */
  .corner-circle--nav .corner-nav > :nth-child(1) {
    --cos: -0.3420;
    --sin: 0.9397;
  }

  .corner-circle--nav .corner-nav > :nth-child(2) {
    --cos: -0.7431;
    --sin: 0.6691;
  }

  .corner-circle--nav .corner-nav > :nth-child(3) {
    --cos: -0.9703;
    --sin: 0.2419;
  }

  .circle-hero__main {
    order: 1;
  }

  /* The wheel becomes the three reasons side by side, each on a green card;
     on a phone they stack. */
  .wheel {
    position: static;
    order: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: auto;
    height: auto;
    margin: 2.5rem 0 0;
  }

  .wheel__disc,
  .wheel__rotor {
    display: contents;
  }

  .wheel__disc::after,
  .wheel__cap,
  .wheel__bite,
  .wheel__arrow,
  .wheel__spoke[data-spoke="3"],
  .wheel__spoke[data-spoke="4"],
  .wheel__spoke[data-spoke="5"] {
    display: none;
  }

  /* The cards' titles and text set like every other title and text. */
  .wheel__title {
    font-size: var(--fs-item);
  }

  .wheel__spoke p,
  .games-arc__what {
    line-height: 1.5;
  }

  .wheel__spoke {
    position: static;
    width: auto;
    padding: 1.4rem 1.5rem 1.1rem;
    border-radius: var(--card-radius);
    background: var(--green);
    font-size: var(--fs-text);
    opacity: 1;
    cursor: default;
    transform: none;
  }

  /* The stage: green cards with rounded corners, a little in from the edges;
     a section and its slideshow share one card. */
  .circle-page {
    --card-radius: 1.75rem;
    --card-pad: clamp(1.25rem, 4vw, 2.5rem);
    --card-gap: clamp(0.75rem, 2.5vw, 1.5rem);
  }

  .stage {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .stage__art,
  .coach-cap__left,
  .coach-cap__right,
  .coach-cap__left2,
  .coach-cap__right2,
  .numbers__edge {
    display: none;
  }

  .stage > section,
  .orbit {
    position: static;
    width: auto;
    height: auto;
    margin: 0 var(--card-gap);
  }

  .coach-cap,
  .numbers,
  .custom-text,
  .custom-more,
  .orbit {
    background: var(--green);
  }

  .coach-cap {
    padding: 3rem var(--card-pad) 2rem;
    border-radius: var(--card-radius);
  }

  .games-arc {
    padding: 3rem var(--card-pad);
  }

  .games-arc__line {
    position: static;
    width: auto !important;
    white-space: normal;
  }

  .games-arc__title {
    font-size: var(--fs-title);
    margin-bottom: 0;
  }

  .games-arc__drill,
  .games-arc__what {
    display: block;
    margin-left: 0;
  }

  .games-arc__drills {
    display: grid;
    gap: calc(var(--fs-text) * 0.8);
    margin: 1.5rem 0;
  }

  .numbers,
  .custom-text {
    padding: 3rem var(--card-pad) 1rem;
    border-radius: var(--card-radius) var(--card-radius) 0 0;
  }

  /* The slideshow's controls close the numbers' card. */
  .orbit__controls[data-for="numbers"] {
    margin-bottom: 3rem;
    border-radius: 0 0 var(--card-radius) var(--card-radius);
  }

  /* The chips and the rest come after the fields' slideshow and close the card. */
  .custom-more {
    order: 1;
    padding: 0.5rem var(--card-pad) 2rem;
    border-radius: 0 0 var(--card-radius) var(--card-radius);
  }

  .stage .custom-more__text {
    position: static;
    width: auto;
    margin: 0;
  }

  .custom-text > *,
  .custom-text .mode,
  .custom-text .custom-text__pair {
    width: auto;
  }

  .custom-text__pair {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem;
  }

  .custom-more .chips {
    flex-direction: row;
  }

  .custom-text__modes {
    gap: 0.75rem;
  }

  .mode {
    padding: 0.9rem 1.1rem;
    border-radius: 1rem;
  }

  /* The screenshots, one at a time: the next pushes the last out sideways
     (assets/js/circle.js), or a swipe does. */
  .orbit {
    display: grid;
    justify-items: center;
    padding: 1rem var(--card-pad) 0;
    overflow: hidden;
    touch-action: pan-y;
    pointer-events: auto;
  }

  .orbit .orbit__item {
    position: static;
    grid-area: 1 / 1;
    width: min(100%, 17rem);
  }

  .orbit .orbit__item--wide {
    width: min(100%, 34rem);
  }

  .orbit--custom .orbit__item {
    width: min(100%, 30rem);
  }

  .orbit__item img {
    border-radius: 14px;
  }

  .orbit__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin: 0 var(--card-gap);
    padding: 1rem var(--card-pad) 1.75rem;
    background: var(--green);
  }

  .orbit__arrow--prev svg {
    transform: rotate(180deg);
  }

  .orbit__dots {
    display: flex;
    gap: 0.5rem;
  }

  .orbit__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 1.5px solid var(--ink);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
  }

  .orbit__dot[aria-current="true"] {
    background: var(--ink);
  }
}

/* The three reasons, narrow: two side by side and the third flatter across
   the whole row beneath them, or all three in a row when there is room. */
@media (min-width: 600px) and (max-width: 1279px) {
  .wheel {
    grid-template-columns: 1fr 1fr;
  }

  .wheel__spoke[data-spoke="2"] {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) and (max-width: 1279px) {
  .wheel {
    grid-template-columns: repeat(3, 1fr);
  }

  .wheel__spoke[data-spoke="2"] {
    grid-column: auto;
  }
}

/* Wide, the arrows hover on the curve (placed by circle.js); the dots are
   for the narrow slideshow only. */
@media (min-width: 1280px) {
  .orbit__controls {
    display: contents;
  }

  .orbit__arrow {
    position: absolute;
    z-index: 3;
    transition: left 0.9s ease, top 0.9s ease, color 0.2s ease, background-color 0.2s ease;
  }

  .orbit__arrow svg {
    transition: transform 0.9s ease;
  }

  .orbit__dots {
    display: none;
  }
}

.orbit__arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1.5px solid rgba(8, 20, 32, 0.4);
  border-radius: 50%;
  background: var(--green);
  color: var(--ink);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, transform 160ms ease-out;
}

.orbit__arrow svg {
  width: 20px;
  height: 20px;
}

@media (hover: hover) and (pointer: fine) {
  .orbit__arrow:hover {
    background: var(--ink);
    color: var(--green);
  }
}

/* ---------------------------------------- outlines from the logo's circles */
@media (min-width: 1280px) {
  .coach-cap { left:calc(var(--u)*330); top:calc(var(--u)*44); width:calc(var(--u)*1280); height:calc(var(--u)*1206); }
  .coach-cap__left { width:calc(var(--u)*470); height:calc(var(--u)*556); shape-outside:polygon(calc(var(--u)*0) calc(var(--u)*0), calc(var(--u)*470) calc(var(--u)*0), calc(var(--u)*470) calc(var(--u)*15), calc(var(--u)*470) calc(var(--u)*30), calc(var(--u)*470) calc(var(--u)*45), calc(var(--u)*470) calc(var(--u)*60), calc(var(--u)*470) calc(var(--u)*75), calc(var(--u)*470) calc(var(--u)*90), calc(var(--u)*470) calc(var(--u)*105), calc(var(--u)*455.3) calc(var(--u)*120), calc(var(--u)*414.6) calc(var(--u)*135), calc(var(--u)*381.2) calc(var(--u)*150), calc(var(--u)*352.4) calc(var(--u)*165), calc(var(--u)*327.0) calc(var(--u)*180), calc(var(--u)*304.1) calc(var(--u)*195), calc(var(--u)*283.4) calc(var(--u)*210), calc(var(--u)*264.4) calc(var(--u)*225), calc(var(--u)*246.9) calc(var(--u)*240), calc(var(--u)*230.8) calc(var(--u)*255), calc(var(--u)*215.7) calc(var(--u)*270), calc(var(--u)*201.7) calc(var(--u)*285), calc(var(--u)*188.7) calc(var(--u)*300), calc(var(--u)*176.4) calc(var(--u)*315), calc(var(--u)*165.0) calc(var(--u)*330), calc(var(--u)*154.3) calc(var(--u)*345), calc(var(--u)*144.3) calc(var(--u)*360), calc(var(--u)*135.0) calc(var(--u)*375), calc(var(--u)*126.2) calc(var(--u)*390), calc(var(--u)*118.1) calc(var(--u)*405), calc(var(--u)*110.5) calc(var(--u)*420), calc(var(--u)*103.4) calc(var(--u)*435), calc(var(--u)*96.8) calc(var(--u)*450), calc(var(--u)*90.7) calc(var(--u)*465), calc(var(--u)*85.1) calc(var(--u)*480), calc(var(--u)*80.0) calc(var(--u)*495), calc(var(--u)*75.2) calc(var(--u)*510), calc(var(--u)*71.0) calc(var(--u)*525), calc(var(--u)*67.1) calc(var(--u)*540), calc(var(--u)*63.7) calc(var(--u)*555), calc(var(--u)*63.5) calc(var(--u)*556), calc(var(--u)*0) calc(var(--u)*556)); }
  .coach-cap__right { width:calc(var(--u)*810); height:calc(var(--u)*556); shape-outside:polygon(calc(var(--u)*810) calc(var(--u)*0), calc(var(--u)*0) calc(var(--u)*0), calc(var(--u)*0) calc(var(--u)*15), calc(var(--u)*0) calc(var(--u)*30), calc(var(--u)*0) calc(var(--u)*45), calc(var(--u)*0) calc(var(--u)*60), calc(var(--u)*0) calc(var(--u)*75), calc(var(--u)*0) calc(var(--u)*90), calc(var(--u)*296.6) calc(var(--u)*105), calc(var(--u)*351.1) calc(var(--u)*120), calc(var(--u)*391.8) calc(var(--u)*135), calc(var(--u)*425.2) calc(var(--u)*150), calc(var(--u)*454.0) calc(var(--u)*165), calc(var(--u)*479.4) calc(var(--u)*180), calc(var(--u)*502.3) calc(var(--u)*195), calc(var(--u)*523.0) calc(var(--u)*210), calc(var(--u)*542.0) calc(var(--u)*225), calc(var(--u)*559.5) calc(var(--u)*240), calc(var(--u)*575.6) calc(var(--u)*255), calc(var(--u)*552.8) calc(var(--u)*270), calc(var(--u)*515.6) calc(var(--u)*285), calc(var(--u)*480.2) calc(var(--u)*300), calc(var(--u)*446.5) calc(var(--u)*315), calc(var(--u)*414.2) calc(var(--u)*330), calc(var(--u)*383.2) calc(var(--u)*345), calc(var(--u)*353.4) calc(var(--u)*360), calc(var(--u)*324.7) calc(var(--u)*375), calc(var(--u)*296.9) calc(var(--u)*390), calc(var(--u)*270.1) calc(var(--u)*405), calc(var(--u)*244.2) calc(var(--u)*420), calc(var(--u)*219.0) calc(var(--u)*435), calc(var(--u)*194.6) calc(var(--u)*450), calc(var(--u)*170.8) calc(var(--u)*465), calc(var(--u)*147.8) calc(var(--u)*480), calc(var(--u)*125.3) calc(var(--u)*495), calc(var(--u)*103.4) calc(var(--u)*510), calc(var(--u)*82.1) calc(var(--u)*525), calc(var(--u)*61.3) calc(var(--u)*540), calc(var(--u)*41.0) calc(var(--u)*555), calc(var(--u)*39.7) calc(var(--u)*556), calc(var(--u)*810) calc(var(--u)*556)); }
  .coach-cap__right2 { width:calc(var(--u)*1130); height:calc(var(--u)*650); shape-outside:polygon(calc(var(--u)*1130) calc(var(--u)*0), calc(var(--u)*359.7) calc(var(--u)*0), calc(var(--u)*339.9) calc(var(--u)*15), calc(var(--u)*320.6) calc(var(--u)*30), calc(var(--u)*301.7) calc(var(--u)*45), calc(var(--u)*283.2) calc(var(--u)*60), calc(var(--u)*265.1) calc(var(--u)*75), calc(var(--u)*247.4) calc(var(--u)*90), calc(var(--u)*230.1) calc(var(--u)*105), calc(var(--u)*213.2) calc(var(--u)*120), calc(var(--u)*196.6) calc(var(--u)*135), calc(var(--u)*180.3) calc(var(--u)*150), calc(var(--u)*164.4) calc(var(--u)*165), calc(var(--u)*148.7) calc(var(--u)*180), calc(var(--u)*133.4) calc(var(--u)*195), calc(var(--u)*118.4) calc(var(--u)*210), calc(var(--u)*103.6) calc(var(--u)*225), calc(var(--u)*89.2) calc(var(--u)*240), calc(var(--u)*75.0) calc(var(--u)*255), calc(var(--u)*61.0) calc(var(--u)*270), calc(var(--u)*47.4) calc(var(--u)*285), calc(var(--u)*34.0) calc(var(--u)*300), calc(var(--u)*20.8) calc(var(--u)*315), calc(var(--u)*7.9) calc(var(--u)*330), calc(var(--u)*0) calc(var(--u)*345), calc(var(--u)*0) calc(var(--u)*360), calc(var(--u)*0) calc(var(--u)*375), calc(var(--u)*0) calc(var(--u)*390), calc(var(--u)*0) calc(var(--u)*405), calc(var(--u)*0) calc(var(--u)*420), calc(var(--u)*0) calc(var(--u)*435), calc(var(--u)*0) calc(var(--u)*450), calc(var(--u)*0) calc(var(--u)*465), calc(var(--u)*0) calc(var(--u)*480), calc(var(--u)*0) calc(var(--u)*495), calc(var(--u)*0) calc(var(--u)*510), calc(var(--u)*0) calc(var(--u)*525), calc(var(--u)*0) calc(var(--u)*540), calc(var(--u)*0) calc(var(--u)*555), calc(var(--u)*0) calc(var(--u)*570), calc(var(--u)*0) calc(var(--u)*585), calc(var(--u)*0) calc(var(--u)*600), calc(var(--u)*0) calc(var(--u)*615), calc(var(--u)*0) calc(var(--u)*630), calc(var(--u)*0) calc(var(--u)*645), calc(var(--u)*0) calc(var(--u)*650), calc(var(--u)*1130) calc(var(--u)*650)); }
  .coach-cap__left2 { width:calc(var(--u)*150); height:calc(var(--u)*650); shape-outside:polygon(calc(var(--u)*0) calc(var(--u)*0), calc(var(--u)*63.5) calc(var(--u)*0), calc(var(--u)*60.5) calc(var(--u)*15), calc(var(--u)*57.9) calc(var(--u)*30), calc(var(--u)*55.7) calc(var(--u)*45), calc(var(--u)*53.9) calc(var(--u)*60), calc(var(--u)*52.5) calc(var(--u)*75), calc(var(--u)*51.5) calc(var(--u)*90), calc(var(--u)*51.5) calc(var(--u)*105), calc(var(--u)*52.5) calc(var(--u)*120), calc(var(--u)*53.9) calc(var(--u)*135), calc(var(--u)*55.7) calc(var(--u)*150), calc(var(--u)*57.9) calc(var(--u)*165), calc(var(--u)*60.5) calc(var(--u)*180), calc(var(--u)*63.5) calc(var(--u)*195), calc(var(--u)*66.9) calc(var(--u)*210), calc(var(--u)*70.8) calc(var(--u)*225), calc(var(--u)*75.0) calc(var(--u)*240), calc(var(--u)*79.7) calc(var(--u)*255), calc(var(--u)*84.8) calc(var(--u)*270), calc(var(--u)*90.4) calc(var(--u)*285), calc(var(--u)*96.5) calc(var(--u)*300), calc(var(--u)*103.0) calc(var(--u)*315), calc(var(--u)*110.1) calc(var(--u)*330), calc(var(--u)*117.7) calc(var(--u)*345), calc(var(--u)*125.8) calc(var(--u)*360), calc(var(--u)*134.5) calc(var(--u)*375), calc(var(--u)*143.8) calc(var(--u)*390), calc(var(--u)*150) calc(var(--u)*405), calc(var(--u)*150) calc(var(--u)*420), calc(var(--u)*150) calc(var(--u)*435), calc(var(--u)*150) calc(var(--u)*450), calc(var(--u)*150) calc(var(--u)*465), calc(var(--u)*150) calc(var(--u)*480), calc(var(--u)*150) calc(var(--u)*495), calc(var(--u)*150) calc(var(--u)*510), calc(var(--u)*150) calc(var(--u)*525), calc(var(--u)*150) calc(var(--u)*540), calc(var(--u)*150) calc(var(--u)*555), calc(var(--u)*150) calc(var(--u)*570), calc(var(--u)*150) calc(var(--u)*585), calc(var(--u)*150) calc(var(--u)*600), calc(var(--u)*150) calc(var(--u)*615), calc(var(--u)*150) calc(var(--u)*630), calc(var(--u)*150) calc(var(--u)*645), calc(var(--u)*150) calc(var(--u)*650), calc(var(--u)*0) calc(var(--u)*650)); }
  .custom-text { left:0; top:calc(var(--u)*3030); width:calc(var(--u)*1300); }
  .numbers { left:calc(var(--u)*140); top:calc(var(--u)*1480); width:calc(var(--u)*760); }
  .numbers__edge { width:calc(var(--u)*300); height:calc(var(--u)*1700); shape-outside:polygon(calc(var(--u)*0) calc(var(--u)*0), calc(var(--u)*227.2) calc(var(--u)*0), calc(var(--u)*219.5) calc(var(--u)*15), calc(var(--u)*212.0) calc(var(--u)*30), calc(var(--u)*204.7) calc(var(--u)*45), calc(var(--u)*197.5) calc(var(--u)*60), calc(var(--u)*190.4) calc(var(--u)*75), calc(var(--u)*183.5) calc(var(--u)*90), calc(var(--u)*176.8) calc(var(--u)*105), calc(var(--u)*170.2) calc(var(--u)*120), calc(var(--u)*163.7) calc(var(--u)*135), calc(var(--u)*157.4) calc(var(--u)*150), calc(var(--u)*151.2) calc(var(--u)*165), calc(var(--u)*145.2) calc(var(--u)*180), calc(var(--u)*139.3) calc(var(--u)*195), calc(var(--u)*133.6) calc(var(--u)*210), calc(var(--u)*127.9) calc(var(--u)*225), calc(var(--u)*122.5) calc(var(--u)*240), calc(var(--u)*117.1) calc(var(--u)*255), calc(var(--u)*111.9) calc(var(--u)*270), calc(var(--u)*106.8) calc(var(--u)*285), calc(var(--u)*101.9) calc(var(--u)*300), calc(var(--u)*97.1) calc(var(--u)*315), calc(var(--u)*92.4) calc(var(--u)*330), calc(var(--u)*87.8) calc(var(--u)*345), calc(var(--u)*83.4) calc(var(--u)*360), calc(var(--u)*79.1) calc(var(--u)*375), calc(var(--u)*74.9) calc(var(--u)*390), calc(var(--u)*70.8) calc(var(--u)*405), calc(var(--u)*66.9) calc(var(--u)*420), calc(var(--u)*63.1) calc(var(--u)*435), calc(var(--u)*59.4) calc(var(--u)*450), calc(var(--u)*55.8) calc(var(--u)*465), calc(var(--u)*52.4) calc(var(--u)*480), calc(var(--u)*49.1) calc(var(--u)*495), calc(var(--u)*45.9) calc(var(--u)*510), calc(var(--u)*42.8) calc(var(--u)*525), calc(var(--u)*39.8) calc(var(--u)*540), calc(var(--u)*37.0) calc(var(--u)*555), calc(var(--u)*34.3) calc(var(--u)*570), calc(var(--u)*31.6) calc(var(--u)*585), calc(var(--u)*29.2) calc(var(--u)*600), calc(var(--u)*26.8) calc(var(--u)*615), calc(var(--u)*24.5) calc(var(--u)*630), calc(var(--u)*22.4) calc(var(--u)*645), calc(var(--u)*20.3) calc(var(--u)*660), calc(var(--u)*18.4) calc(var(--u)*675), calc(var(--u)*16.6) calc(var(--u)*690), calc(var(--u)*14.9) calc(var(--u)*705), calc(var(--u)*13.4) calc(var(--u)*720), calc(var(--u)*11.9) calc(var(--u)*735), calc(var(--u)*10.6) calc(var(--u)*750), calc(var(--u)*9.3) calc(var(--u)*765), calc(var(--u)*8.2) calc(var(--u)*780), calc(var(--u)*7.2) calc(var(--u)*795), calc(var(--u)*6.3) calc(var(--u)*810), calc(var(--u)*5.5) calc(var(--u)*825), calc(var(--u)*4.9) calc(var(--u)*840), calc(var(--u)*4.3) calc(var(--u)*855), calc(var(--u)*3.9) calc(var(--u)*870), calc(var(--u)*3.5) calc(var(--u)*885), calc(var(--u)*3.3) calc(var(--u)*900), calc(var(--u)*3.5) calc(var(--u)*915), calc(var(--u)*3.8) calc(var(--u)*930), calc(var(--u)*4.2) calc(var(--u)*945), calc(var(--u)*4.7) calc(var(--u)*960), calc(var(--u)*5.4) calc(var(--u)*975), calc(var(--u)*6.1) calc(var(--u)*990), calc(var(--u)*7.0) calc(var(--u)*1005), calc(var(--u)*8.0) calc(var(--u)*1020), calc(var(--u)*9.0) calc(var(--u)*1035), calc(var(--u)*10.2) calc(var(--u)*1050), calc(var(--u)*11.6) calc(var(--u)*1065), calc(var(--u)*13.0) calc(var(--u)*1080), calc(var(--u)*14.5) calc(var(--u)*1095), calc(var(--u)*16.2) calc(var(--u)*1110), calc(var(--u)*18.0) calc(var(--u)*1125), calc(var(--u)*19.8) calc(var(--u)*1140), calc(var(--u)*21.8) calc(var(--u)*1155), calc(var(--u)*24.0) calc(var(--u)*1170), calc(var(--u)*26.2) calc(var(--u)*1185), calc(var(--u)*28.5) calc(var(--u)*1200), calc(var(--u)*31.0) calc(var(--u)*1215), calc(var(--u)*33.6) calc(var(--u)*1230), calc(var(--u)*36.3) calc(var(--u)*1245), calc(var(--u)*39.1) calc(var(--u)*1260), calc(var(--u)*42.0) calc(var(--u)*1275), calc(var(--u)*45.1) calc(var(--u)*1290), calc(var(--u)*48.3) calc(var(--u)*1305), calc(var(--u)*51.5) calc(var(--u)*1320), calc(var(--u)*55.0) calc(var(--u)*1335), calc(var(--u)*58.5) calc(var(--u)*1350), calc(var(--u)*62.1) calc(var(--u)*1365), calc(var(--u)*65.9) calc(var(--u)*1380), calc(var(--u)*69.8) calc(var(--u)*1395), calc(var(--u)*73.8) calc(var(--u)*1410), calc(var(--u)*78.0) calc(var(--u)*1425), calc(var(--u)*82.3) calc(var(--u)*1440), calc(var(--u)*86.7) calc(var(--u)*1455), calc(var(--u)*91.2) calc(var(--u)*1470), calc(var(--u)*95.9) calc(var(--u)*1485), calc(var(--u)*100.6) calc(var(--u)*1500), calc(var(--u)*105.6) calc(var(--u)*1515), calc(var(--u)*110.6) calc(var(--u)*1530), calc(var(--u)*115.8) calc(var(--u)*1545), calc(var(--u)*121.1) calc(var(--u)*1560), calc(var(--u)*126.5) calc(var(--u)*1575), calc(var(--u)*132.1) calc(var(--u)*1590), calc(var(--u)*137.8) calc(var(--u)*1605), calc(var(--u)*143.7) calc(var(--u)*1620), calc(var(--u)*149.7) calc(var(--u)*1635), calc(var(--u)*155.8) calc(var(--u)*1650), calc(var(--u)*162.1) calc(var(--u)*1665), calc(var(--u)*168.5) calc(var(--u)*1680), calc(var(--u)*175.1) calc(var(--u)*1695), calc(var(--u)*0) calc(var(--u)*1700)); }
}