/* The word on the axis plane: one word in Anybody, a variable typeface with a width axis (50 to 150) and a weight
   axis (100 to 900), standing on a plane drawn like a chart: width across, weight up. The pointer picks a point on
   the plane and the word becomes that instance, letter by letter on springs; two vermilion guides mark the point. */
:root {
  --paper: #f3f0e8;         /* the page */
  --ink: #141414;           /* the word, the axes, the ticks near the guides */
  --grey: #8d887e;          /* the small texts and the ticks at rest */
  --rule: rgba(20, 20, 20, 0.16); /* the baseline under the word */
  --accent: #ff3d17;        /* the two guides and their values */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Anybody Variable', system-ui, sans-serif;
  font-variation-settings: 'wdth' 92, 'wght' 460;
  -webkit-font-smoothing: antialiased;
}

.stage {
  --pad: clamp(16px, 5vw, 80px);
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
  padding: clamp(18px, 3.2vw, 40px) var(--pad) clamp(16px, 3vw, 34px);
  user-select: none;
  -webkit-user-select: none;
}

/* ---------------------------------------------------------------- the top line */
.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 14px;
  line-height: 1.3;
}

.top__mask {
  display: block;
  overflow: hidden;
  padding: 0 1px 2px;
}

.top__item {
  display: block;
  font-variation-settings: 'wdth' 96, 'wght' 620;
}

.top__item--grey {
  color: var(--grey);
  font-variation-settings: 'wdth' 92, 'wght' 440;
  text-align: right;
}

/* ---------------------------------------------------------------- the plane */
.plane {
  position: relative;
  min-height: 300px;
  margin: 12px 0;
  outline: none;
  touch-action: none;
}

.field {
  position: absolute;
  inset: 34px 54px 48px 66px;
}

.plane:focus-visible .field {
  outline: 1px dashed var(--grey);
  outline-offset: 10px;
}

.axis {
  position: absolute;
  display: block;
  background: var(--ink);
  will-change: transform;
}

.axis--x {
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  transform-origin: 0 50%;
}

.axis--y {
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  transform-origin: 50% 100%;
}

.ticks {
  position: absolute;
}

.ticks--x {
  left: 0;
  right: 0;
  top: 100%;
  height: 0;
}

.ticks--y {
  right: 100%;
  top: 0;
  bottom: 0;
  width: 0;
}

.tick {
  position: absolute;
  display: block;
  background: var(--ink);
}

/* the ticks hang outside the plane: under the width axis, left of the weight axis */
.ticks--x .tick {
  top: 0;
  width: 1px;
  height: 10px;
  margin-left: -0.5px;
  transform-origin: 50% 0;
}

.ticks--y .tick {
  right: 0;
  width: 10px;
  height: 1px;
  margin-top: -0.5px;
  transform-origin: 100% 50%;
}

/* the top right corner of the plane, a crop mark */
.corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-top: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  transform-origin: 100% 0;
}

/* the guides start on the axes and cross the plane, behind the word */
.guide {
  position: absolute;
  display: block;
  background: var(--accent);
  will-change: transform;
}

.guide--v {
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -0.5px;
  transform-origin: 50% 100%;
}

.guide--h {
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  margin-top: -0.5px;
  transform-origin: 0 50%;
}

/* ---------------------------------------------------------------- the word */
.word {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 0;
  font-size: var(--size, 120px);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  font-variation-settings: 'wdth' 100, 'wght' 500;
  will-change: transform;
}

.word__letter {
  display: inline-block;
  will-change: font-variation-settings;
}

/* a zero-size mark on the baseline: its top is where the letters sit */
.word__base {
  display: inline-block;
  width: 0;
  height: 0;
}

.base {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 12px;
  overflow: visible;
  will-change: transform;
}

.base path {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* ---------------------------------------------------------------- the numbers */
.label,
.read,
.name {
  position: absolute;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.label {
  color: var(--grey);
}

.label--x {
  top: calc(100% + 18px);
  transform: translateX(-50%);
}

.label--y {
  right: calc(100% + 18px);
  transform: translateY(-50%);
}

.name {
  color: var(--ink);
  font-variation-settings: 'wdth' 92, 'wght' 620;
}

.name--x {
  left: calc(100% + 12px);
  bottom: -6px;
}

.name--y {
  left: 0;
  bottom: calc(100% + 12px);
  transform: translateX(-50%);
}

.read {
  left: 0;
  top: 0;
  color: var(--accent);
  font-variation-settings: 'wdth' 92, 'wght' 640;
  will-change: transform;
}

.read--x {
  top: calc(100% + 18px);
}

.read--y {
  left: auto;
  right: calc(100% + 18px);
}

.hint {
  margin: 0;
  font-size: 13px;
  color: var(--grey);
}

.hint__touch {
  display: none;
}

@media (hover: none) {
  .hint__mouse {
    display: none;
  }

  .hint__touch {
    display: inline;
  }
}

@media (max-width: 640px) {
  .top {
    font-size: 13px;
  }

  .field {
    inset: 30px 40px 46px 50px;
  }

  .label,
  .read,
  .name {
    font-size: 11px;
  }

  .label--y,
  .read--y {
    right: calc(100% + 15px);
  }
}