/* =========================================================================
   AECRL — typography.

   THREE VOICES, AND EACH ONE HAS A JOB.

     Source Serif 4  display   page titles, section headings, ledes, pull
                               quotes, the things you read before deciding
                               whether to read the rest.
     Inter           reading   body copy, navigation, labels, buttons.
     IBM Plex Mono   data      years, counts, serial numbers, DOIs, anything
                               that lines up in a column.

   The site was set entirely in Inter, with the mono reserved for numbers.
   Inter is an excellent interface face and a flat one to read a page in:
   every heading looked like a bigger label, so nothing announced itself as a
   title and the pages all had the same texture. A serif at display sizes
   gives a heading somewhere to be, and it reads as a laboratory rather than
   a dashboard.

   THE SERIF IS FOR DISPLAY ONLY. It ships as one variable file covering
   weights 300-800 with the optical-size axis pinned at 32 -- the size the
   design is cut for at heading sizes -- and there is no italic. An italic
   serif costs another 50 KB to be used a handful of times, so anything that
   needs to lean does it in Inter, which already has a real italic. Nothing
   here should ever trigger a browser's faux-italic, which slants the outlines
   and looks like a mistake on a serif.

   WHY font-size is barely set here. The sizes live in theme.json as a fluid
   scale, so they interpolate with the viewport and can be changed in the Site
   Editor. This file sets family, weight, spacing and rhythm.
   ========================================================================= */

:root {
	--aecrl-display: "Source Serif 4", Georgia, "Times New Roman", serif;
	--aecrl-reading: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* -------------------------------------------------------------------------
   Page and section titles
   ------------------------------------------------------------------------- */

/* The page's own h1, the section h2s under it, and the record titles that
   behave like headings. Scoped to main so the masthead and footer keep Inter:
   the laboratory's name in the header is a label you navigate by, not a title
   you read. */
main h1,
main h2,
main h3,
main .aecrl-profile__name,
main .wp-block-post-title,
main .aecrl-hub__card h2 {
	/* NOT record-row titles. `.aecrl-pub__title` is an h2 or h3, so it lands
	   here by default, and that is wrong twice over: a reference list is data
	   rather than display, and this face has its optical-size axis pinned at
	   32 for headings, so 127 titles at 1.05rem come out with hairlines too
	   fine for a dense list. The exclusion is below. */
	font-family: var(--aecrl-display);
	/* Tight tracking is what stops a large serif looking loose and airy.
	   Applied at every level because the effect scales with the size. */
	letter-spacing: -0.015em;
	text-wrap: balance;
}

main h1,
main .wp-block-post-title {
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.025em;
}

main h2 {
	font-weight: 650;
	line-height: 1.2;
	/* Space above a section heading, and much less below it: a heading belongs
	   to what follows it, and equal margins orphan it between two blocks. */
	margin-top: 2.75rem;
	margin-bottom: 0.85rem;
}

main h3 {
	font-weight: 600;
	line-height: 1.3;
	margin-top: 1.75rem;
	margin-bottom: 0.5rem;
}

/* A heading that opens a page has nothing above it to be separated from. */
main > :first-child h2,
main .wp-block-post-content > :first-child {
	margin-top: 0;
}

/* -------------------------------------------------------------------------
   The lede
   -------------------------------------------------------------------------
   The paragraph under a page title, which says what the page is. It is set in
   the serif, a size up from body copy and a shade lighter, so it reads as a
   bridge between the title and the text rather than as the first paragraph. */

.aecrl-archive-lede,
.aecrl-section-lede {
	font-family: var(--aecrl-display);
	font-weight: 400;
	font-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.3125rem);
	line-height: 1.5;
	letter-spacing: -0.005em;
	/* 46ch was set when the whole page was one 820px column; under a 1460px
	   layout it left the lede as a thin ribbon under a wide heading. 58ch is
	   still inside the comfortable measure and no longer looks stranded. */
	max-width: 58ch;
	text-wrap: pretty;
	color: var(--wp--preset--color--secaccent, #1b1725);
}

/* -------------------------------------------------------------------------
   Reading text
   ------------------------------------------------------------------------- */

main p,
main li,
main dd,
main dt {
	font-family: var(--aecrl-reading);
}

/* A measure. Lines longer than about 75 characters lose the reader on the
   return sweep; the constrained column is wider than that on a large screen. */
main .wp-block-post-content > p,
main .entry-content > p,
main.aecrl-rail > p,
/* Lists, but only PROSE lists -- the editor's List block, which always
   carries `wp-block-list`. The theme index, the people grid, the record lists
   and the timeline are <ul> and <ol> too, and they are components that want
   the whole rail: capping them at a reading measure squeezed the research
   page's nine themes into a 605px ribbon inside a 1504px rail, three columns
   of 190px each, with every title broken over three lines.

   The first attempt at this excluded `[class*="aecrl-"]` instead. It excluded
   EVERYTHING, because the motion layer adds `aecrl-reveal` to every block on
   the page, so a plain prose list matched the exclusion too and no list on
   the site had a measure at all. Naming the block class is both narrower and
   more durable: a component added later is included by not being a List. */
main .wp-block-post-content > ul.wp-block-list,
main .wp-block-post-content > ol.wp-block-list {
	max-width: 68ch;
	line-height: 1.65;
	text-wrap: pretty;
}

/* -------------------------------------------------------------------------
   Data
   -------------------------------------------------------------------------
   Already set in aecrl.css; repeated here only for the pieces the type layer
   introduced, so every number on the site lines up the same way. */

.aecrl-timeline__when,
.aecrl-roles__when,
.aecrl-stat-note {
	font-family: var(--aecrl-figures);
	font-variant-numeric: tabular-nums;
}

/* The headline figures are display, not data.
   These are set at three times the body size and are the first thing on the
   page after the name, so a number here is a piece of display typography.
   It used to take the reading serif for that reason. It now takes Bebas
   Neue, which was drawn for exactly this job: condensed, all one width, and
   with enough weight at 56px to hold a column on its own.

   This rule is the one that decides. `aecrl.css` sets the family too, but
   `type.css` loads after it at equal specificity and wins, which is why
   changing the number font in the components file alone did nothing. */
.aecrl-stat-number {
	font-family: var(--aecrl-display-figures);
	font-variant-numeric: tabular-nums;
	font-weight: 400;
	letter-spacing: 0.01em;
}

.aecrl-stat-label {
	font-family: var(--aecrl-reading);
}

/* -------------------------------------------------------------------------
   Small caps labels
   -------------------------------------------------------------------------
   Used for the kind of marker that should be readable but never competes:
   the `study` tag on the timeline, callout labels, table captions. */

.aecrl-timeline__kind,
.aecrl-callout__label,
.aecrl-eyebrow {
	font-family: var(--aecrl-reading);
	font-weight: 500;
	letter-spacing: 0.1em;
}

/* -------------------------------------------------------------------------
   Figures and captions
   ------------------------------------------------------------------------- */

.aecrl-figure figcaption,
.wp-element-caption {
	font-family: var(--aecrl-reading);
	text-wrap: pretty;
}

/* -------------------------------------------------------------------------
   The serif needs slightly different optical treatment in a dark band
   -------------------------------------------------------------------------
   White serif on a dark photograph blooms and looks heavier than it is, so it
   is stepped back a weight. This is the homepage hero and any cover block. */

.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover .aecrl-archive-lede {
	font-weight: 600;
	letter-spacing: -0.02em;
}

/* -------------------------------------------------------------------------
   Forced colours and high contrast
   -------------------------------------------------------------------------
   Nothing here relies on colour, but a face swap can still change line
   lengths. Left alone deliberately: the sizes are all relative and the
   fallbacks (Georgia, system-ui) carry similar metrics. */

/* -------------------------------------------------------------------------
   Record rows keep the reading face
   -------------------------------------------------------------------------
   A publication, thesis or instrument title is content in a list, not a
   heading you navigate by, and there can be 127 of them on one page. Inter
   holds a dense column at small sizes better than a display serif does, and
   it is what the row spacing was tuned against.

   Person names are left in the serif on purpose: there are five or six to a
   page and each one heads a block, so they behave like headings. */

main .aecrl-pub__title,
main .aecrl-instrument .aecrl-pub__title {
	font-family: var(--aecrl-reading);
	letter-spacing: normal;
}

/* The lede keeps its reading measure and sits at the rail's left edge like
   everything else. It used to need `alignwide` plus an explicit
   `margin-left: 0` to escape the centred column; the rail makes both
   unnecessary, because nothing in it is centred in the first place. */
.aecrl-archive-lede,
.aecrl-callout {
	margin-left: 0;
	margin-right: auto;
}