/* The headline rewritten by the caret: a copy studio edits its own headline in front of you. A thin caret selects a
   word, the selection opens on a spring, the word squeezes on the width axis of the typeface (Roboto Flex, width 25 to
   151) until it is gone, and the new one is typed letter by letter, opening up to its width. */
:root {
  --paper: #f3f0e8;    /* the page */
  --ink: #141414;      /* the headline and the caret */
  --accent: #f0431c;   /* the selection, and the full stop of the last line */
  --quiet: #8d887d;    /* the small type at the foot */
}

* {
  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;
}

/* the line: a point in the middle of the page; the script places every piece from there, in pixels */
.line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin: 0;
  font-size: var(--size, 120px);
  font-weight: 400;
  line-height: 1;
}

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

/* ------------------------------------------------------------------ the letters */
/* every letter in its own cell, squeezed from its left edge; two copies of the glyph: the ink one, and a paper one on
   top that only shows where the selection is */
.letters {
  position: absolute;
  left: 0;
  top: 0;
}

.cell {
  position: absolute;
  left: 0;
  top: -0.5em;
  height: 1em;
  white-space: pre;
  transform-origin: 0 50%;
  will-change: transform;
}

.glyph {
  display: block;
  white-space: pre;
}

.glyph--inv {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--paper);
  clip-path: inset(0 100% 0 0);
}

/* ------------------------------------------------------------------ the selection and the caret */
.highlight {
  position: absolute;
  left: 0;
  top: -0.5em;
  height: 1.04em;
  margin-top: -0.02em;
  width: 0;
  border-radius: 0.035em;
  background: var(--accent);
  opacity: 0;
}

.caret {
  position: absolute;
  left: 0;
  top: -0.5em;
  height: 1.04em;
  margin-top: -0.02em;
  width: 2px;
  background: var(--ink);
  transform-origin: 50% 50%;
  opacity: 0;
}

/* ------------------------------------------------------------------ the foot */
.foot {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 28px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 12px;
  border-top: 1px solid rgba(20, 20, 20, 0.14);
  color: var(--quiet);
  font-size: 13px;
  letter-spacing: 0.02em;
  font-variation-settings: 'wdth' 100, 'wght' 460;
}

.foot__brand {
  color: var(--ink);
  font-variation-settings: 'wdth' 112, 'wght' 640;
}

.foot__count {
  font-variant-numeric: tabular-nums;
}

.foot__num {
  display: inline-block;
}

@media (max-width: 600px) {
  .foot {
    left: 16px;
    right: 16px;
    bottom: 20px;
    font-size: 12px;
  }
}