/* The counting circle: one thin line on a warm white page, a figure as tall as the circle it comes from and a
   short line of type under it. */
:root {
  --page: #f3f1ec;          /* the page */
  --ink: #161616;           /* the line and the name */
  --muted: #8d8982;         /* launches in */
  --accent: #ff4b1f;        /* the last seconds, the closed circle, is live */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Jost Variable', 'Jost', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(22px, 5svh, 48px);
  padding: 32px 16px;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------- the line */
.figure {
  display: block;
  width: min(84vw, 600px, calc(54svh * 180 / 124));
  height: auto;
  aspect-ratio: 180 / 124;
  overflow: visible;
  color: var(--ink);
}

.line path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------- the type */
.caption {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  margin: 0;
  font-size: clamp(17px, 2.2vw, 23px);
  line-height: 1.2;
  letter-spacing: 0.01em;
  user-select: none;
  -webkit-user-select: none;
}

/* each word sits in a window: the letters rise into it and drop out of it */
.caption__clip {
  display: inline-grid;
  overflow: hidden;
  padding: 0.14em 0.06em 0.22em;
  margin: -0.14em -0.06em -0.22em;
}

.caption__name {
  font-weight: 560;
  white-space: nowrap;
}

.caption__state {
  justify-items: start;
}

.caption__phrase {
  grid-area: 1 / 1;
  white-space: nowrap;
}

.caption__phrase--soon {
  font-weight: 340;
  color: var(--muted);
}

.caption__phrase--live {
  font-weight: 480;
  color: var(--accent);
}

.ch {
  display: inline-block;
}