/* ---------------------------------------------------------------------------
Content pages — the reading layout.
Used by the method articles and by anything else that is prose first. It is
editorial rather than app: one narrow column, a wide centred opening, and
numbered sections a reader can navigate by scanning rather than reading.
The reference layout this follows uses a serif display face. This build has
three faces already — Outfit, Poppins, JetBrains Mono — and a fourth would
be a fourth thing to serve, to fall back for, and to keep consistent. The
editorial feel comes from measure, rhythm and rules instead of from a new
typeface.
MEASURE. Prose is 34rem, near 65 characters. Tables, figures and the
pointers break wider, because a band table at 34rem wraps and a wrapped
table is unreadable. That is the only reason anything here is wider.
--------------------------------------------------------------------------- */
.art { --art-measure: 34rem; --art-wide: 52rem; }
.art > * { max-width: var(--art-measure); margin-inline: auto; }
/* The breadcrumb is site chrome, not part of the article's measure. Capping it
at 34rem and centring it put this page's trail somewhere different from the
trail on every other page, which is the one thing a breadcrumb must not do. */
.art > .crumbs { max-width: none; margin-inline: 0; }
/* The opening MOVED TO app.css. It used to live here, which was right while
only guides and answers had one: article.css is linked by those pages and no
others. It is the whole site's page head now — written by page-head.js and
carried by the legal pages, the methodology pages, both indexes and the
compare page — and eight of those never link this stylesheet. The markup was
unified and rendered unstyled, which is the same fault the legal pages had
before, arriving from the other direction. A rule has to live where every
page that uses it can see it. */
/* --- A section ----------------------------------------------------------- */
/* --- What the article covers -----------------------------------------------
A contents list, set as a masthead rather than a widget: rules top and
bottom, the label in the same small mono the section numerals use, and the
entries in display type at reading size. No box, no fill, no chevrons — the
article's own furniture, not a component dropped into it.
It reads DOWN each column, not across, which a plain two-track grid gets
wrong: `grid-auto-flow: column` with an explicit row count puts 01-04 on the
left and 05-08 on the right, the way a printed contents page runs. `--rows`
comes from the generator because CSS cannot count the items. */
.art__toc {
max-width: var(--art-wide);
/* `auto` on the sides, not 0 — the sections centre themselves in the article
and a contents list that does not sits 200px to their left. */
margin: 0 auto 4rem;
padding: 1.5rem 0 0.5rem;
border-top: 1px solid var(--border-strong);
border-bottom: 1px solid var(--border-strong);
}
.art__toc-h {
margin: 0 0 1.25rem;
font: 500 0.6875rem/1.3 var(--font-mono);
letter-spacing: 0.09em; text-transform: uppercase;
color: var(--text-tertiary);
}
.art__toc-list {
margin: 0; padding: 0; list-style: none;
display: grid; gap: 0 3rem;
}
@media (min-width: 46rem) {
.art__toc-list {
grid-auto-flow: column;
grid-template-rows: repeat(var(--rows), auto);
}
}
.art__toc-list li { border-top: 1px solid var(--border-hairline); }
.art__toc-list li:first-child { border-top: 0; }
@media (min-width: 46rem) {
/* The first item of the SECOND column also starts a column, so it loses its
rule too — nth-child does the arithmetic the grid is doing visually. */
.art__toc-list li:nth-child(n + 2) { border-top: 1px solid var(--border-hairline); }
}
.art__toc-list a {
display: grid; grid-template-columns: auto 1fr; gap: 0.875rem;
align-items: baseline;
padding: 0.6875rem 0;
font: 500 1rem/1.35 var(--font-display); letter-spacing: -0.01em;
color: var(--text-primary); text-decoration: none;
text-wrap: pretty;
}
.art__toc-list a:hover span:last-child { text-decoration: underline; text-underline-offset: 0.2em; }
.art__toc-n {
font: 500 0.75rem/1.9 var(--font-mono); color: var(--text-tertiary);
font-variant-numeric: tabular-nums;
}
/* Anchored sections need somewhere to land that is not under the sticky
header. `--nav-offset` is the site's own measure of that header, so this
follows it rather than restating a number that would go stale the first time
the nav changes height. Plus a line of air, or the heading sits flush
against the header's underside. */
/* The section bar sits under the header on any page that has one, so an
anchored section has to clear both. `--secbar-h` is 0 on a page without a
bar, which makes this the same number it always was there. */
.art__sec {
scroll-margin-top: calc(var(--nav-offset, 6rem) + var(--secbar-h, 0px) + 1.5rem);
max-width: var(--art-wide); margin-bottom: 4rem;
}
/* The number and a rule, then the title — scannable without being read. */
.art__h {
display: grid; grid-template-columns: 4.5rem 1fr; align-items: baseline;
gap: 0.75rem; margin: 0 auto 1.5rem; max-width: var(--art-measure);
/* 1.25rem, not 1.375: a section heading here sits with the 17-18px ones on
the answer and methodology articles rather than a size above them. */
font: 500 1.25rem/1.3 var(--font-display); letter-spacing: -0.02em;
}
.art__n {
position: relative; padding-left: 2rem;
font: 500 0.75rem/1.9 var(--font-mono); color: var(--text-tertiary);
}
.art__n::before {
content: ""; position: absolute; left: 0; top: 0.6em;
width: 1.375rem; height: 1px; background: var(--border-strong);
}
.art__body { max-width: var(--art-measure); margin-inline: auto; }
.art__body p { margin: 0 0 1.125rem; font: var(--type-body); line-height: 1.7; text-wrap: pretty; }
.art__body p:last-child { margin-bottom: 0; }
/* A guide numbers its sections and heads them with `.art__h`; an answer runs
sub-headings inside its prose instead, because it is one question rather
than a sequence. Same size as a guide's section heading, so the two articles
read at the same scale even though they are built differently. */
.art__body h2 {
margin: 2.5rem 0 0.75rem;
font: 500 1.25rem/1.3 var(--font-display); letter-spacing: -0.02em;
}
.art__body h2:first-child { margin-top: 0; }
.art__body h3 {
margin: 2.25rem 0 0.75rem;
font: 500 1rem/1.3 var(--font-display); letter-spacing: -0.01em;
}
/* Tables break the measure: a band table wrapped to 34rem cannot be read. */
.art__body .scroller { max-width: none; width: 100%; }
/* `.art__body p` is a class plus an element and outranks `.method-source`,
which is one class — so the provenance line was being set in body type by a
rule that never meant to touch it. */
.art__body .method-source {
margin: 0.5rem 0 2.25rem;
font: 400 0.75rem/1.5 var(--font-mono); color: var(--text-tertiary);
}
.art__body .method-source span { display: block; margin-top: 0.1875rem; }
/* --- The pointer ---------------------------------------------------------
The one claim in a section a reader should leave with. Lime on the rule
only: the accent marks it, it does not fill it. */
/* The box is HATCH's `.alert` now, so this contributes nothing but placement.
It used to draw a 3px rule down its left side and pad itself asymmetrically
— 1.125rem top and bottom, 1.5rem left, nothing right — which inside an
alert's own border and even 20/22px padding read as a second border and a
lopsided box. One component owns the box; this one owns where it sits. */
.art__point { max-width: var(--art-measure); margin: 0 auto 1.5rem; }
/* 15px, not 17. A pointer is an aside on the way past, not a second lede: at
the body's own size it competed with the paragraph under it, and HATCH sets
its alerts at 13.5px, which is smaller than the one claim on the page wants
to be. This sits between the two. */
.art__point p {
margin: 0; font: 500 0.9375rem/1.55 var(--font-display);
letter-spacing: -0.01em; color: var(--text-primary); text-wrap: pretty;
}
.art__point em { font-style: italic; }
/* --- The opening image ---------------------------------------------------
The same asset the index uses as this guide's poster. It breaks the reading
measure like a figure does, because it is one. */
/* --- The article hero ------------------------------------------------------
Full bleed out of the article's column, and cropped rather than fitted: the
band keeps its shape at every width and the picture fills it.
Anchored to the BOTTOM. These are landscapes with a subject on the ground
and a lot of empty sky above it, so a crop taken from the centre eats the
subject and keeps the sky. `object-position: 50% 100%` throws away the top,
which is the part that carries nothing.
`object-fit` and `object-position` on the ![]()
, not a CSS
`background-image`: the markup is a with AVIF and WebP at four
widths, and a background would throw all of that away and serve one file to
everybody. Same result, a tenth of the bytes on a phone. */
.art__hero {
/* `.art > *` caps every child at the reading measure and centres it with
`margin-inline: auto`. Both have to be undone by name — a bare
`margin-left` leaves the auto on the right and the box comes out 544px
wide against a 1280px viewport. */
max-width: none;
width: 100vw; margin-inline: calc(50% - 50vw) 0;
margin-top: 0; margin-bottom: 3.5rem;
aspect-ratio: 3 / 1; /* the artwork's own shape — see below, this never changes */
}
.art__hero picture, .art__hero img {
display: block; width: 100%; height: 100%;
object-fit: cover; object-position: 50% 100%;
}
/* The band keeps the artwork's own 3:1 at every width, and that is deliberate.
A photograph can be cropped to a taller box on a phone and lose only sky. An
illustration cannot: it is composed, and the first thing a 2:1 crop took was
the house at the right-hand end — the destination in a picture about moving
to one. It is a slim band on a phone. A complete slim band beats a
half-eaten tall one. */
/* --- A section illustration ---------------------------------------------- */
.art__fig { max-width: var(--art-wide); margin: 0 auto 2rem; }
.art__fig img { display: block; width: 100%; height: auto; }
.art__fig figcaption {
max-width: var(--art-measure); margin: 0.875rem auto 0;
font: var(--type-caption); color: var(--text-tertiary); text-align: center;
}
/* --- The close ----------------------------------------------------------- */
.art .method-cta { max-width: var(--art-wide); margin-top: 4.5rem; }
@media (max-width: 45rem) {
.art__sec { margin-bottom: 3rem; }
.art__h { grid-template-columns: 1fr; gap: 0.5rem; }
.art__n { padding-left: 1.75rem; }
}
/* --- What to have ready --------------------------------------------------
The calculator's own questions, so the list cannot drift from what it asks,
with the form each answer actually takes. */
.art__prep { max-width: var(--art-measure); margin: 1.5rem auto 0; }
.art__prep > div { padding: 0.875rem 0; border-top: 1px solid var(--border-hairline); }
.art__prep > div:last-child { border-bottom: 1px solid var(--border-hairline); }
.art__prep dt { font: 500 0.9375rem/1.4 var(--font-display); }
.art__prep dd {
margin: 0.3125rem 0 0;
font: var(--type-body-sm); line-height: 1.6; color: var(--text-secondary);
text-wrap: pretty;
}
/* The way back, filled in only when the reader arrived from a guide. The slot
holds its height whether or not it is used, so the card never changes size
after load. */
.method-cta__back { min-height: 1.5rem; margin: 1.25rem 0 0; font: var(--type-body-sm); }
.method-cta__back[hidden] { display: block; visibility: hidden; }
/* --- Methodology furniture inside the article shell -------------------------
These pages are articles too now, so `.art > *` caps and centres them. The
register of records and the changelog are the exception: they are tables of
the whole ruleset and they need the wide measure, not the reading one. */
.art .methlinks { max-width: var(--art-measure); margin-inline: auto; }
/* The stats take the wide measure: five columns will not sit in a 34rem
reading column without one of them dropping to a line of its own. */
.art .methstats { max-width: var(--art-wide); margin-inline: auto; }
.art .srcgroup,
.art .srcwarn,
.art .changelog { max-width: var(--art-wide); margin-inline: auto; }
/* --- The legal pages -----------------------------------------------------
Plain documents. No cards, no figures, no lime: these are read once, in
order, by somebody checking whether they can trust the rest of the site. */
/* MARGIN-BLOCK, NOT MARGIN. These three carried `margin: 2.5rem 0 0.75rem`
and `margin: 0 0 1rem` -- and that `0` on the inline sides silently cancelled
the `margin-inline: auto` that `.art > *` uses to centre an article's body.
The head was centred and the body was not, so on a wide screen the disclaimer
ran down the left third of the window while the guide beside it sat in the
middle. Same wrapper, same classes, different layout, because of two zeroes.
The 62ch went with them: `--art-measure` is what every other article is set
to, and a legal page is not a place to be a little wider than the guides. */
.legal h2 { margin-block: 2.5rem 0.75rem; font: 500 1.375rem/1.25 var(--font-display); letter-spacing: -0.02em; }
.legal p { margin-block: 0 1rem; }
.legal ul { margin-block: 0 1rem; padding-left: 1.25rem; }
.legal li { margin-block: 0 0.5rem; }
.legal code { font: var(--type-mono-sm); }
.legal__updated { font: var(--type-mono-sm); color: var(--text-tertiary); }
/* Unfinished on purpose, and marked so it cannot ship looking finished. */
.legal__todo { background: var(--mark-withheld); color: var(--raw-ink); padding: 0.0625rem 0.375rem; border-radius: var(--radius-sm); font: var(--type-mono-sm); }