/* The quote marks that squeeze the line: a short quote on warm paper, in a variable typeface (Roboto Flex, width 25
   to 151 and weight 100 to 1000). Two giant quote marks (Fraunces) come in from opposite sides, close on the line
   like pincers and squeeze it on the width axis; then they let go, the line breathes out and the author's name rides
   a hairline underneath. */
:root {
  --paper: #f3f0e8;    /* the page */
  --ink: #141414;      /* the quote and the name */
  --accent: #e2471d;   /* the quote marks and the small tick at the end of the hairline */
  --rule: #b9b1a3;     /* the hairline under the quote */
}

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

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

/* ------------------------------------------------------------------ the quote */
/* the script writes the size (--size), where each line stands, and width and weight of the letters */
.phrases {
  position: absolute;
  inset: 0;
  visibility: hidden;
}

.phrases.is-ready {
  visibility: visible;
}

.phrase {
  position: absolute;
  left: 50%;
  top: 0;
  display: none;
  margin: 0;
  font-size: var(--size, 96px);
  line-height: 1;
  white-space: pre;
  font-kerning: normal;
  transform-origin: 50% 50%;
  touch-action: manipulation;
}

.phrase.is-on {
  display: block;
}

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

/* an empty mark on the baseline: the script reads where the letters stand */
.phrase i,
.mark i {
  display: inline-block;
  width: 0;
  height: 0;
}

/* ------------------------------------------------------------------ the quote marks */
.mark {
  position: absolute;
  left: 0;
  top: 0;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: var(--mark, 220px);
  line-height: 1;
  color: var(--accent);
  white-space: pre;
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------------------------ the author */
.cite {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}

.cite__line {
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;
  background: var(--rule);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.cite__tick {
  position: absolute;
  left: 0;
  top: -4px;
  width: 1px;
  height: 9px;
  background: var(--accent);
  transform-origin: 50% 100%;
  transform: scaleY(0);
}

/* the name lives in a window as long as the hairline: it comes out of the left end and leaves past the right one */
.cite__clip {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}

.cite__name {
  display: inline-block;
  white-space: nowrap;
  font-size: var(--small, 15px);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ink);
}