Techniques
Red-top masthead band
The single saturated element on the page — a bold ruled band carrying the masthead, with a red-top rule beneath in the manner of a front page.
.masthead {
padding: 16px 0 12px;
border-top: 2px solid #1A1815;
border-bottom: 3px solid #B0402F;
font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
font-weight: 900;
letter-spacing: -0.01em;
color: #1A1815;
text-align: center;
}
Hairline-ruled column grid
Justified newspaper columns divided by hairline rules dropped into the gutter, so structure reads as ink rather than whitespace.
.columns {
column-count: 3;
column-gap: 24px;
column-rule: 1px solid #C0BAAE;
text-align: justify;
hyphens: auto;
font-family: 'PT Serif', 'Noto Serif', Georgia, serif;
line-height: 1.55;
color: #1A1815;
}
Drop-cap lead with small-caps byline
The article opener: a large roman drop cap keyed to the column, above a small-caps byline in tracked capitals.
.lead::first-letter {
float: left;
font-family: 'Playfair Display', 'Times New Roman', Georgia, serif;
font-size: 4.4em;
line-height: 0.82;
font-weight: 700;
padding: 4px 8px 0 0;
color: #1A1815;
}
.byline {
font-variant: small-caps;
font-weight: 700;
letter-spacing: 0.04em;
color: #3B3833;
}