The lead story is one element in CSS columns with justified text and browser hyphenation on, which is what stops justification from tearing rivers through the copy. The column rules aren't borders: they're absolutely positioned spans placed with the same math the column algorithm uses, so they scale into 2 columns and then 1 without ever landing in the wrong place. Each one draws itself downward on reveal.

/* column count lives in a custom property so the rules can do the math */
.story-cols { --n: 3; --cgap: 2.6rem;
  columns: var(--n); column-gap: var(--cgap);
  text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

.story .vr-1 { left: calc((100% - (var(--n) - 1) * var(--cgap)) / var(--n) + var(--cgap) / 2); }
.story .vr-2 { left: calc(2 * (100% - (var(--n) - 1) * var(--cgap)) / var(--n) + 1.5 * var(--cgap)); }

/* rules draw top-to-bottom when the story scrolls in */
.js .story .vr { transform: scaleY(0); transform-origin: top;
  transition: transform 1.15s var(--ease-draw) .2s; }
.js .story.in .vr { transform: scaleY(1); }

/* drop cap + wire-copy first line, no extra markup */
.story-cols .dropcap::first-line { text-transform: uppercase; letter-spacing: .07em; }
.dropcap::first-letter { font: 900 4.05em/.76 var(--disp); float: left;
  padding: .08em .14em 0 0; color: var(--ox); }

Every illustration is two stacked groups in one SVG: a tone layer filled with a rotated dot pattern, and a line layer of hand-plotted paths. On reveal the tone comes up and the lines fade in behind it. On hover the tone drops back and the lines go fully black, so the drawing appears to resolve from newsprint dots into engraved line work. It costs two opacity transitions and no JavaScript.

<!-- one pattern, reused by every figure on the page -->
<pattern id="p-dots-ox" width="9" height="9"
  patternUnits="userSpaceOnUse" patternTransform="rotate(15)">
  <circle cx="4.5" cy="4.5" r="1.5" fill="#7A1F1F"/>
</pattern>

.fig .g-tone { opacity: .3; transition: opacity .8s var(--ease-out); }
.fig .g-line { opacity: 0; transition: opacity .8s var(--ease-out) .15s; }
.fig.in .g-tone { opacity: .62; }   /* developed */
.fig.in .g-line { opacity: .78; }
.fig.in:hover .g-tone { opacity: .3; }  /* sharpened */
.fig.in:hover .g-line { opacity: 1; }

The subscriber chart is drawn from data at runtime with createElementNS, not hand-authored markup, so all three series share one renderer. The line inks in by animating stroke-dashoffset from its own measured length, the hatched area fades in behind it, and the dots pop in on a 45ms stagger. It reads with a pointer or with arrow keys, because a chart that only works on hover is a chart half the audience can't use.

// the path is built from the data, then measured and inked in
var dLine = s.data.map(function (v, i) {
  return (i ? 'L' : 'M') + px(i).toFixed(1) + ',' + py(v, s).toFixed(1);
}).join(' ');
var line = mk('path', { d: dLine, 'class': 'ch-line' });

if (animate && !RM) {
  var len = line.getTotalLength();
  line.style.strokeDasharray = len;
  line.style.strokeDashoffset = len;
  line.getBoundingClientRect();              // force layout so the transition takes
  line.style.transition = 'stroke-dashoffset 1.3s cubic-bezier(.66,0,.22,1)';
  line.style.strokeDashoffset = 0;
}

// same readout for pointer and keyboard
svg.onkeydown = function (e) {
  if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
    e.preventDefault();
    var i = flagIdx < 0 ? (e.key === 'ArrowRight' ? 0 : 17)
                        : flagIdx + (e.key === 'ArrowRight' ? 1 : -1);
    showFlag(Math.max(0, Math.min(17, i)));
  } else if (e.key === 'Escape') hideFlag();
};

The Oxford rule under the masthead (one thick line, a gap, one hairline) is a single element: a linear-gradient with hard color stops, not three divs. Buttons use a hard offset shadow instead of a blur, because letterpress leaves an impression, not a glow. They move into the shadow on press. The paper grain over the whole page is one inline feTurbulence data-URI on body::after, set to multiply and locked to pointer-events: none.

/* an Oxford rule: thick, gap, thin. one element. */
.r-oxford { height: 7px; border: 0;
  background: linear-gradient(to bottom,
    var(--ink) 0, var(--ink) 3px,
    transparent 3px, transparent 6px,
    var(--ink) 6px, var(--ink) 7px); }

/* the impression, not a glow */
.btn { box-shadow: 4px 4px 0 var(--ink);
  transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out); }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }

One observer runs the whole page. Elements opt in with a data-rv attribute, stagger themselves with an inline --d custom property, and unobserve on first reveal so nothing re-hides on scroll-back. The attribute value picks the animation: rules draw from the left, centered rules draw from the middle, everything else lifts and fades. The ledger hooks the same callback to start its draw-in at the moment it's actually visible.

var io = new IntersectionObserver(function (entries) {
  entries.forEach(function (e) {
    if (!e.isIntersecting) return;
    e.target.classList.add('in');
    if (e.target.id === 'ledgerFig') drawChart(active, true);
    io.unobserve(e.target);            // reveal once, never re-hide
  });
}, { threshold: 0.16, rootMargin: '0px 0px -5% 0px' });

document.querySelectorAll('[data-rv]').forEach(function (el) { io.observe(el); });

/* the stagger is just a variable on the element */
.js [data-rv] { opacity: 0; transform: translateY(16px);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
  transition-delay: var(--d, 0s); }
.js [data-rv="rule"] { transform: scaleX(0); transform-origin: left center; }