/* The headline that fills the column: a justified headline on warm paper, set in a variable typeface (Roboto Flex,
   width 25 to 151 and weight 100 to 1000). Every line arrives squeezed and hairline-thin and breathes out, wider and
   heavier, until it fills the column to the pixel; then the last word squeezes to make room for the next one. */
:root {
  --paper: #f3f0e9;    /* the page */
  --ink: #161513;      /* the headline */
  --accent: #e2471d;   /* the last line, the one that changes */
  --rule: #d3cdc1;     /* the two hairlines at the edges of the column */
  --mark: #9b9488;     /* the small marks where each line meets the column, and the note underneath */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Roboto Flex Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
}

.measure {
  position: relative;
  width: var(--col, 720px);
}

/* ------------------------------------------------------------------ the headline */
/* the script sets the size (--size) and the line height (--lh); every letter gets its own width and weight */
.head {
  margin: 0;
  font-size: var(--size, 120px);
  font-weight: 400;
  line-height: var(--lh, 0.86);
  text-transform: uppercase;
  font-kerning: normal;
}

.line {
  display: flex;
  justify-content: center;
  align-items: baseline;
  height: calc(var(--size, 120px) * var(--lh, 0.86));
  white-space: pre;
  touch-action: manipulation;
}

.line--swap {
  color: var(--accent);
}

.unit {
  flex: none;
  display: inline-block;
  white-space: pre;
  transform-origin: 0 50%;
}

.l {
  display: inline-block;
  white-space: pre;
}

/* an empty mark on the baseline of each line: the script reads where the letters stand */
.base {
  flex: none;
  width: 0;
  height: 0;
}

/* ------------------------------------------------------------------ the column */
.guide {
  position: absolute;
  top: 0;
  width: 1px;
  height: 0;
  background: var(--rule);
  transform-origin: 50% 0;
  transform: scaleY(0);
}

.tick {
  position: absolute;
  height: 1px;
  background: var(--mark);
  transform: scaleX(0);
}

.foot {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  font-size: 12px;
  font-variation-settings: 'wdth' 100, 'wght' 460;
  letter-spacing: 0.02em;
  color: var(--mark);
  opacity: 0;
}

.foot__brand {
  color: var(--ink);
}

.foot__axes {
  display: flex;
  gap: 14px;
  font-variant-numeric: tabular-nums;
}

.foot__axes b {
  display: inline-block;
  min-width: 3.4ch;
  font-weight: inherit;
  font-variation-settings: 'wdth' 100, 'wght' 620;
  color: var(--ink);
  text-align: right;
}