/* ============================================================================
   TYPOGRAPHY

   The closed set. Every piece of type on the site is one of these:

     Wordmark  .wordmark
     Display   .displayPoster .display .displaySmall
     Headings  .headingLarge .headingMedium .headingSmall .headingSmaller
     Running   .lede .body .bodySmall .prose
     Labels    .label .labelLarge .labelSmall

   .eyebrow, .eyebrowSecondary, .mini and .micro were deleted when the case
   studies and /field-notes migrated and left them with no consumer: the red
   kicker is .label.indexLabel (the section mark) now and the meta tier is
   .labelSmall. Don't reintroduce them — if something needs a voice that isn't
   here, add it here, with a name and a job.

   THE RULE: components do not declare font-family, font-size, font-weight,
   text-transform or letter-spacing. Components own layout, colour and spacing.
   These classes own type. Every size comes from the --step-* scale.
   ============================================================================ */

@layer base {

body {
	font-family: var(--font);
	font-size: var(--step-1);
	/* 300. The light cut is the house voice for running text; 400 is the deck
	   weight (.lede) and 500 the label weight, so the scale still steps. */
	font-weight: 300;
	line-height: 1.4;
	-webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6, p {
	margin-top: 1em;
	margin-bottom: 1em;
}

/* 500 is the site's bold. It is on the elements as well as the class because
   the reset sets `font: inherit` on <strong> and <b>, so without this a
   <strong> outside .prose renders at body's 300 and marked-up text is not
   marked up at all — which is what .csSummary, .csTurn, .mediaFrame figcaption
   and .testimonial were each patching locally. */
.bold, strong, b, em { font-weight: 500; }
i { font-style: italic; }

/* --- Display ---------------------------------------------------------------- */

/* --- Wordmark ---------------------------------------------------------------
   The site's name, set as type. It is the origin point of every page's grid,
   so it gets a voice of its own rather than borrowing a heading's. */
.wordmark {
	font-family: var(--font-narrow);
	font-weight: 700;
	font-size: var(--step-2);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-loose);
	margin: 0;

	/* Optical alignment on the trailing edge, the same argument as
	   .displayPoster's negative start indent below: a glyph's box is not its
	   edge. letter-spacing puts its full 0.07em *after* the final D as well as
	   between the letters, so the mark's box ends well clear of the ink and
	   the wordmark reads inset from any margin it is flush to. -0.085em
	   cancels that trailing track and takes a further 0.015em, so the round of
	   the D overshoots the margin very slightly — which is what a curved
	   terminal needs to look aligned against the flat edge of a column.

	   It sits on the span rather than on .wordmark because the span is the
	   last flex item and .navWordmark is 100% wide on the two-row header: a
	   negative margin on a width:100% box is absorbed by the width and moves
	   nothing. Shrinking the last item's margin box lets its ink overhang,
	   which is the case this is actually for — the header below 700px, where
	   the red mark stretches and pushes SUPERBOLD flush to the right margin. */
	span {
		margin-inline-end: -0.085em;
	}
}

/* --- Poster ------------------------------------------------------------------
   One element on the site is a poster rather than a headline: the home hero.
   It is set solid and sized off the viewport (--step-poster) so it fills its
   field at every width instead of stopping at the scale's ceiling. Sentence
   case, not caps — the field, the size and the leading are what make it a
   poster; uppercasing it as well was a third device doing the same job.
   Optical alignment is the whole game at this size — the negative indent pulls
   the first stem flush to the margin, since a glyph's sidebearing is not its
   edge. */
.displayPoster {
	font-family: var(--font);
	font-weight: 700;
	font-size: var(--step-7);
	line-height: 0.82;
	letter-spacing: -0.035em;
	margin: 0;
	max-width: none;
	margin-inline-start: -0.045em;
}

.display,
.displaySmall,
.headingLarge,
.headingMedium,
.headingSmall,
.headingSmaller {
	font-family: var(--font);
	font-weight: 700;
	letter-spacing: var(--letter-spacing-tight);
	margin: 0;
	text-wrap: balance;
}

.display        { font-size: var(--step-6); line-height: 0.9; max-width: 20ch; }
.displaySmall   { font-size: var(--step-5); line-height: 0.9; max-width: 24ch; }
/* NOTE: .headingLarge is the same step as .displaySmall — the two differ only
   in measure, so they are one size wearing two names. It also has no consumer
   anywhere on the site. Either give it its own step or delete it; leaving a
   duplicate in a closed set is how the set stops being closed. */
.headingLarge   { font-size: var(--step-5); line-height: 0.9; max-width: 34ch; }
.headingMedium  { font-size: var(--step-4); line-height: 0.9; max-width: 34ch; }
.headingSmall   { font-size: var(--step-3); line-height: 1;   max-width: 34ch; }
.headingSmaller { font-size: var(--step-2); line-height: 1;   max-width: 34ch; }

/* --- Label voice -------------------------------------------------------------
   Small, uppercase, widely tracked. This replaced nine near-identical blocks
   that were hand-written across the component stylesheets, each with a slightly
   different font-size. Colour is left to the component — it is the one thing
   that legitimately varies by context. */

/* Tracking scales inversely with size: the smallest label needs the most air
   between letters and the largest needs the least. One value across the whole
   family made a 10px caption and a 16px label read at the same voice.

   .tag is in this selector on purpose. A tag row and a label carry the same
   weight in the information hierarchy — a short, tracked, upper-case token of
   metadata — so they get the same voice rather than two that are almost the
   same. .tag keeps its layout and its .outline variant in 07-shell. */
.label, .labelLarge, .labelSmall, .tag {
	font-family: var(--font-narrow);
	font-weight: 500;
	font-size: var(--step--1);
	line-height: 1.5;
	letter-spacing: var(--letter-spacing-wider);
	text-transform: uppercase;
	color: var(--color-text-3);
	margin: 0;
}
.labelLarge { font-size: var(--step-0);  letter-spacing: var(--letter-spacing-wide); }
/* Was --step--2. At 7.7-9px that is below the size anything on this site
   should be asked to read, however much air it is given. The tier still
   reads: it is separated from .label by tracking and by tertiary ink, not by
   another size step down. */
.labelSmall { font-weight: 400; letter-spacing: var(--letter-spacing-widest); }

/* A form label is an element default rather than a class — the markup is
   <label for="…">, and asking every one of them to carry a class would be
   bookkeeping with no decision in it. This is the voice .micro used to hold;
   .micro itself is gone with its only other consumer. */
form label {
	font-family: var(--font-narrow);
	font-weight: 400;
	font-size: var(--step--1);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-2);
}

/* --- Running text ----------------------------------------------------------- */

.lede {
	font-size: var(--step-1);
	font-weight: 400; /* the deck weight — one step over body's 300 */
	line-height: 1.6;
	color: var(--color-text-2);
	max-width: 60ch;
	text-wrap: pretty;
	margin-top: 1em;
}

/* One paragraph of running text at body size, with the measure on it. .prose
   is for a *run* of elements; .body is for a single paragraph that needs the
   voice and the measure without the rhythm rules around it. It was named in
   the closed set and in the figcaption fallback below but never actually
   declared, so every paragraph reaching for it got body's size with no
   measure at all. */
.body {
	font-size: var(--step-1);
	line-height: 1.6;
	color: var(--color-text-2);
	max-width: 65ch;
	text-wrap: pretty;
}

/* Small running text, sentence case. The set had no voice for this: a caption,
   a sidebar link, a footnote under a paragraph. Everything that needed one was
   hand-setting --font-narrow at --step-0, which put a condensed label face on
   text that is read as a sentence. This is the same cut as the body, one step
   down. */
.bodySmall {
	font-size: var(--step-0);
	line-height: 1.55;
	color: var(--color-text-2);
	max-width: 60ch;
	text-wrap: pretty;
}

/* Body copy. Wrap running text in .prose and the elements inside it inherit
   sensible measure, rhythm, and link styling. */
.prose {
	font-weight: 300;
	color: var(--color-text-2);
	margin-top: 1em;

	& p, & ul, & ol {
		line-height: 1.7;
		max-width: 65ch;
		margin: 0 0 1.25em;
		text-wrap: pretty;
	}
	& ul, & ol { padding-left: 1.2em; }
	& li { margin-bottom: 0.5em; }
	& ul { list-style: disc; }
	& ol { list-style: decimal; }
	& strong, & em, .bold { font-weight: 500; font-style: normal; color: var(--color-text-1); }
	& i { font-style: italic; }

	/* The whole underline recipe — thickness, colour, offset, skip-ink and the
	   hover — lives on `a` in 05-buttons.css. All this has to do is turn the
	   line on. */
	& a:not(.btn) { text-decoration-line: underline; }

	/* Sized by .headingSmall / .headingSmaller in the markup; these only set
	   the rhythm around them. */
	& h3 { margin: 2em 0 0.6em; color: var(--color-text-1); }
	& h4 {
		font-family: var(--font-narrow);
		font-weight: 500;
		font-size: var(--step--1);
		line-height: 1.2;
		letter-spacing: var(--letter-spacing-wider);
		text-transform: uppercase;
		margin: 2em 0 0.6em;
		color: var(--color-text-3);
	}
	& > :first-child { margin-top: 0; }
	& > :last-child  { margin-bottom: 0; }
}

} /* @layer base */
.negativeOverhang::first-letter {

	display: inline-block;
	margin-inline-start: -0.09em;	
}