/* The word that wraps: a narrow newspaper column on warm paper, set in Newsreader. The column narrows and widens,
   the long word breaks into syllables, and the hyphen that holds the break hangs in the margin, in vermilion. */
:root {
  --paper: #f3f0e8;    /* the page */
  --ink: #141414;      /* the article */
  --accent: #e0401c;   /* the hyphen, the only colour on the page */
  --rule: #cdc6b8;     /* the two hairlines at the edges of the column */
  --mark: #958e82;     /* the measure on top and the masthead */
}

* {
  box-sizing: border-box;
}

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

body {
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Newsreader Variable', Georgia, serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

@media (hover: hover) {
  .stage {
    cursor: ew-resize;
  }
}

/* every piece is placed by the script with a transform, from the top left corner of the stage */
.guide,
.dim,
.read,
.mast,
.pc,
.hy {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  will-change: transform;
}

/* ------------------------------------------------------------------ the column */
.guide {
  width: 1px;
  height: 1000px;
  background: var(--rule);
  transform-origin: 50% 0;
  transform: scaleY(0);
  transition: background-color 0.45s ease;
}

.stage.is-held .guide {
  background: var(--ink);
}

.dim {
  width: 1000px;
  height: 1px;
  background: var(--rule);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.read {
  padding: 0 0.7em;
  font-size: 12px;
  line-height: 1;
  font-variation-settings: 'opsz' 12, 'wght' 420;
  letter-spacing: 0.02em;
  color: var(--mark);
  white-space: nowrap;
  opacity: 0;
}

.read b {
  display: inline-block;
  min-width: 2ch;
  font-weight: inherit;
  font-variation-settings: 'opsz' 12, 'wght' 620;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
  text-align: right;
}

.mast {
  font-size: 11px;
  line-height: 1;
  font-variation-settings: 'opsz' 12, 'wght' 640;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
}

/* ------------------------------------------------------------------ the article */
/* the script sets the size; every word, or syllable of a long word, is a piece of its own */
.col {
  position: absolute;
  inset: 0;
  margin: 0;
  font-size: 32px;
  line-height: 1.32;
  pointer-events: none;
}

.pc,
.hy {
  display: block;
  white-space: pre;
  font-kerning: normal;
  opacity: 0;
}

.hy {
  color: var(--accent);
}