/* The drop cap that sinks in: a short justified paragraph on warm paper, in a variable serif with optical sizes
   (Newsreader, opsz 6 to 72). Its first letter lifts out of the line, grows (and the optical size follows the size),
   sinks three lines deep into the corner and turns red, like an initial painted by a rubricator; the words step
   aside to make room. Then it climbs back into its line, and the paragraph closes up again. */
:root {
  --paper: #f3f0e8;    /* the page */
  --ink: #141414;      /* the paragraph */
  --accent: #d63a22;   /* the drop cap, once it has landed */
  --rule: #d2ccc0;     /* the two hairlines at the edges of the column */
  --mark: #9a9387;     /* the two guides the capital lands between, 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: 'Newsreader Variable', Georgia, serif;
  font-optical-sizing: auto;
  -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, 600px);
  height: var(--h, 240px);
}

/* ------------------------------------------------------------------ the paragraph */
/* every word is placed by the script on its baseline; the size is --size, the line height is set in the script */
.para {
  position: absolute;
  inset: 0;
  margin: 0;
}

.w,
.cap {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1;
  white-space: pre;
  font-kerning: normal;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

.w {
  font-size: var(--size, 24px);
  font-weight: 400;
  will-change: transform, opacity;
}

/* the capital: the script changes its size, so the optical size (font-optical-sizing: auto) follows it */
.cap {
  font-weight: var(--wg, 400);
  transform-origin: 0 0;
  will-change: transform;
}

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

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

/* the cap height of the first line and the baseline of the last line the capital sinks into */
.rule {
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;
  background: var(--mark);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

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

.rule::before {
  left: 0;
}

.rule::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-weight: 450;
  letter-spacing: 0.04em;
  color: var(--mark);
  opacity: 0;
}

.foot__brand {
  color: var(--ink);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

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

.foot__axis b {
  display: inline-block;
  min-width: 2.4ch;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}