/* The size picker: a minimal piece on a white page. Five sizes in one variable face, each as wide as it is big, a
   hairline frame in vermilion round the one chosen, a ruler under them and a line with the measures. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #141414;           /* the sizes, the figures */
  --muted: #8a8a86;         /* the words of the measures, the label */
  --accent: #e5432a;        /* the frame round the size chosen */
  --rule: #d4d4d0;          /* the ruler under the sizes */
  --gone: #c2c2be;          /* a sold-out size and its strike */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Anybody Variable', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
  overflow: hidden;
}

.size {
  margin: 0;
  max-width: 100%;
}

.size__set {
  display: grid;
  justify-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.size__legend,
.size__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- the two lines of words */
.size__head,
.size__line {
  position: relative;
  display: flex;
  justify-content: center;
  height: 20px;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  font-variation-settings: 'wdth' 92;
  color: var(--muted);
}

.size__head {
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 520;
  letter-spacing: 0.02em;
}

.size__line {
  margin-top: 22px;
  font-weight: 420;
}

/* a word: a slot as wide as the word, with its letters inside; old and new letters roll through it */
.slot {
  position: relative;
  display: block;
  height: 20px;
  overflow: hidden;
}

.slot__word {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  white-space: pre;
}

.slot__word span {
  display: block;
}

.slot--ink {
  color: var(--ink);
  font-weight: 560;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- the sizes */
.size__row {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 1.46em;
  font-size: var(--fs, 44px);
  user-select: none;
  -webkit-user-select: none;
}

.size__lines {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.size__ruler {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1;
}

.size__strike {
  fill: none;
  stroke: var(--gone);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
}

.size__frame {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 1 1;
}

.size__opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.3em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.size__opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* a sold-out size: its radio is disabled, the label still hears the pointer so it can say so */
.size__opt input:disabled {
  pointer-events: none;
}

.size__opt.is-gone {
  cursor: default;
  color: var(--gone);
}

/* the letters: GSAP works on this one, the axes are written by the script */
.size__mark {
  display: block;
  line-height: 1;
  font-variation-settings: 'wdth' 100, 'wght' 300;
  pointer-events: none;
  letter-spacing: 0.035em;
  will-change: transform;
}

/* the keyboard's ring: a dotted hairline in ink, just inside the frame */
.size__opt input:focus-visible ~ .size__ring {
  opacity: 1;
}

.size__ring {
  position: absolute;
  inset: 5px 4px;
  border: 1px dashed var(--ink);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
}

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