/* The word under the film: a page of fine lines with a word hidden in it, and a dark film of slits that slides over
   it with the pointer. Held level, the slits fall on the lines and the word lights up. One canvas, three labels. */
:root {
  --paper: #f3f0e8;   /* the page, and the light that comes through the slits */
  --ink: #141414;     /* the film and the labels */
  --rule: #34322e;    /* the lines of the page */
  --accent: #e0461f;  /* the corner marks and the reading, when the film is in register */
  --muted: #7b776e;   /* the hint */
  --edge: clamp(16px, 3.2vw, 40px);
}

* {
  box-sizing: border-box;
}

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Mona Sans Variable', 'Mona Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  position: relative;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  /* the finger slides the film, it does not move the page */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------------------------------------------------------------- the labels */
.mark {
  position: absolute;
  top: var(--edge);
  left: var(--edge);
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin: 0;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1;
}

.mark__grate {
  width: 1em;
  height: 1em;
  overflow: visible;
}

.mark__back rect {
  fill: var(--rule);
}

.mark__film {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

.mark__film rect {
  fill: var(--ink);
}

.mark__name {
  font-weight: 640;
  font-stretch: 112%;
  letter-spacing: 0.01em;
}

.hint,
.readout {
  position: absolute;
  bottom: var(--edge);
  margin: 0;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.3;
}

.hint {
  left: var(--edge);
  color: var(--muted);
  font-weight: 460;
  font-stretch: 104%;
}

.readout {
  right: var(--edge);
  text-align: right;
  font-weight: 560;
  font-stretch: 100%;
  font-variant-numeric: tabular-nums;
}

/* two lines one above the other in a window one line tall: the script rolls them */
.hint__roll,
.readout__roll {
  display: block;
  height: 1.3em;
  overflow: hidden;
}

.hint__line,
.readout__line {
  display: block;
  white-space: nowrap;
}

.readout__line--on {
  color: var(--accent);
  font-weight: 640;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* on a phone the hint and the reading stand one above the other */
@media (max-width: 560px) {
  .hint {
    bottom: calc(var(--edge) + 1.9em);
  }

  .readout {
    left: var(--edge);
    right: auto;
    text-align: left;
  }
}