/* The lone word that climbs back: a short paragraph set ragged right on warm paper, in a variable serif (Roboto Serif,
   width 50 to 150). Its last word is left alone on the last line; the line above tightens on the width axis, the
   word climbs back to its end and its full stop falls onto the right edge of the column, in the accent. */
:root {
  --paper: #f3f0e8;    /* the page */
  --ink: #141414;      /* the paragraph */
  --accent: #e5432a;   /* the full stop, once the word is back */
  --rule: #d2ccc0;     /* the two hairlines at the edges of the column */
  --mark: #9a9387;     /* the measure of the empty line 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 Serif Variable', Georgia, 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, 640px);
}

/* ------------------------------------------------------------------ the paragraph */
/* the script sets the size (--size), the line height (--lh), the space between words (--gap) and the weight (--wg);
   every word gets its own width on the wdth axis (--wd) */
.para {
  margin: 0;
  font-size: var(--size, 34px);
  line-height: var(--lh, 1.34);
  font-kerning: normal;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

.line {
  display: flex;
  align-items: baseline;
  gap: var(--gap, 0.25em);
  height: calc(var(--size, 34px) * var(--lh, 1.34));
  white-space: pre;
}

/* the last line holds only the lone word: it is as wide as the word, so it can turn about its own middle */
.line--lone {
  width: max-content;
}

.w {
  flex: none;
  display: inline-block;
  white-space: pre;
  font-variation-settings: 'wdth' var(--wd, 100), 'wght' var(--wg, 400);
}

.dot {
  display: inline-block;
}

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

.guide--right {
  left: 100%;
  margin-left: 0;
}

/* the measure of the empty end of the last line: a hairline with a small tick at each end */
.span {
  position: absolute;
  height: 1px;
  background: var(--mark);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.span::before,
.span::after {
  content: '';
  position: absolute;
  top: -3px;
  width: 1px;
  height: 7px;
  background: var(--mark);
}

.span::before {
  left: 0;
}

.span::after {
  right: 0;
}

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

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

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

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