/*
 * Style: the site's plain style, while the layout comes first.
 * Typefaces, color, and type styling only; replacing this file changes
 * the style without touching the layout. Deliberately quiet: grays and
 * one accent.
 */

/*
 * Source Serif 4 and Source Sans 3 by Frank Grießhammer and Paul D. Hunt
 * (Adobe), under the SIL Open Font License 1.1 (see src/fonts/LICENSE-*.txt).
 * "Source" is a Reserved Font Name: a subset or other modified version
 * must be renamed before we serve it.
 *
 * Variable WOFF2 files, so one file covers every weight (Rutter, "Always
 * provide a WOFF2 option", "Limit the number of fonts you use").
 * font-display: swap shows fallback text while fonts load (Rutter,
 * "Avoid the flash of invisible text").
 */
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/SourceSerif4Variable-Roman.ttf.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/SourceSerif4Variable-Italic.ttf.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/SourceSans3VF-Upright.ttf.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/SourceSans3VF-Italic.ttf.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-serif: "Source Serif 4", georgia, serif;
  --font-sans: "Source Sans 3", system-ui, sans-serif;
  --color-ink: #1b1b1b;
  --color-ink-soft: #555;
  --color-paper: #fff;
  --color-paper-shade: #f3f3f2;
  --color-rule: #d6d6d4;
  --color-placeholder: #e4e4e2;

  /* The one accent: links and actions. 8.6:1 on white. */
  --color-accent: #1d4e89;
  --color-accent-ink: #fff;
}

html {
  color: var(--color-ink);
  background: var(--color-paper);
}

/*
 * Running text in the serif, at the base step with body line spacing.
 * Source Serif 4's optical sizes are applied automatically by size.
 * Kerning and common ligatures on (Rutter, "Kern your text", "Use
 * standard ligatures"); old-style numerals in running text (Rutter,
 * "Use old-style numerals in running text").
 */
body {
  font-family: var(--font-serif);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizelegibility;
}

/* Headings: tighter leading and lining numerals (Rutter, "Use lining
   numerals in headings"). Sizes come from the scale classes below. */
h1,
h2,
h3,
h4 {
  font-weight: 600;
  font-variant-numeric: lining-nums;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* Size classes, one per scale step, so a heading's level and its size
   are separate decisions. Each sets the line spacing for its size. */
.text-step-minus-1 {
  font-size: var(--step--1);
}

.text-step-0 {
  font-size: var(--step-0);
}

.text-step-1 {
  font-size: var(--step-1);
  line-height: var(--leading-step-1);
}

.text-step-2 {
  font-size: var(--step-2);
  line-height: var(--leading-step-2);
}

.text-step-3 {
  font-size: var(--step-3);
  line-height: var(--leading-step-3);
}

.text-step-4 {
  font-size: var(--step-4);
  line-height: var(--leading-step-4);
}

.text-step-5 {
  font-size: var(--step-5);
  line-height: var(--leading-step-5);
  letter-spacing: -0.01em;
}

/* Display weight for the largest text: lighter reads better at size
   (Rutter, "Gently tighten big, bold and wide fonts"). */
.text-display {
  font-weight: 400;
}

/* Functional text in the sans: labels, navigation, captions (Rutter,
   "Clearly distinguish functional text from body text"). */
.text-sans {
  font-family: var(--font-sans);
}

/* Small labels set in capitals get letterspacing (Rutter, "Letterspace
   all strings of capitals"). */
.text-label {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.text-soft {
  color: var(--color-ink-soft);
}

.text-lead {
  font-size: var(--step-1);
  line-height: var(--leading-step-1);
}

/* Figures in a row of statistics: lining, tabular numerals (Rutter,
   "Use tabular lining numerals in tables of numbers"). */
.text-figure {
  font-size: var(--step-4);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Links: clear but unobtrusive (Rutter, "Make links clear but
   unobtrusive"). Underlined so they don't rely on color alone. */
a {
  color: var(--color-accent);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 0.12em;
}

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* The action: the one filled element on a page. */
.button {
  display: inline-block;
  padding: var(--space-2xs) var(--space-s);
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--color-accent-ink);
  text-decoration: none;
  background: var(--color-accent);
  border-radius: 2px;
}

.button-quiet {
  color: var(--color-accent);
  background: transparent;
  box-shadow: inset 0 0 0 1px currentcolor;
}

.skip-link {
  padding: var(--space-2xs) var(--space-s);
  font-family: var(--font-sans);
  color: var(--color-accent-ink);
  background: var(--color-accent);
}

.wordmark {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
}

.nav-link {
  font-family: var(--font-sans);
  color: var(--color-ink);
  text-decoration: none;
}

.nav-link:hover {
  text-decoration: underline;
}

.menu > nav {
  background: var(--color-paper);
  border-block-end: 1px solid var(--color-rule);
}

/* Icons drawn as strokes in the text color, sized to the text (Every
   Layout, "The Icon"). */
.icon {
  inline-size: 1.5em;
  block-size: 1.5em;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
}

.list-plain {
  list-style: none;
}

/* Shaded and ruled areas, to separate regions without decoration. */
.shade {
  background: var(--color-paper-shade);
}

.rule-top {
  border-block-start: 1px solid var(--color-rule);
}

.rule-bottom {
  border-block-end: 1px solid var(--color-rule);
}

.card {
  border: 1px solid var(--color-rule);
}

/* Placeholder for an image: a gray frame naming what goes there. */
.placeholder {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-soft);
  background: var(--color-placeholder);
}

/* Steps: the number in the sans, large and quiet. */
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-block-end: var(--space-xs);
  font-family: var(--font-sans);
  font-size: var(--step-2);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--color-ink-soft);
}

/* Option 12's quote: larger, without decorative marks beyond the
   text's own. */
.quote-large blockquote p {
  font-size: var(--step-2);
  line-height: var(--leading-step-2);
}

/* A quotation within running text: set off by a rule and indent, not
   enlarged (Rutter, "Not all block quotes need to look like
   pull-quotes"). */
.prose blockquote {
  font-style: italic;
  border-inline-start: 2px solid var(--color-rule);
}

.prose blockquote footer {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-style: normal;
  color: var(--color-ink-soft);
}

/* Headings within running text. :where() keeps these below the size
   classes in specificity, so a class on a heading still wins. */
:where(.prose) h4 {
  font-size: var(--step-2);
  line-height: var(--leading-step-2);
}

:where(.prose) h5 {
  font-size: var(--step-1);
  line-height: var(--leading-step-1);
}

figcaption {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--color-ink-soft);
}

/* The standfirst: the opening paragraph, larger, so the reader knows
   where to start (Rutter, "A standfirst should stand first"). */
.standfirst {
  font-size: var(--step-1);
  line-height: var(--leading-step-1);
}

/* The slot for the author's recording of the article. */
.audio-slot {
  padding: var(--space-xs) var(--space-s);
}

/* Tables: as text to be read, with minimal furniture (Rutter, "Keep
   table furniture and fills to a minimum"). */
table {
  border-collapse: collapse;
  font-variant-numeric: lining-nums tabular-nums;
}

th,
td {
  padding: var(--space-2xs) var(--space-s) var(--space-2xs) 0;
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--color-rule);
}

thead th {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
}

summary {
  font-weight: 600;
  cursor: pointer;
}

.questions > details {
  padding-block: var(--space-xs);
  border-block-end: 1px solid var(--color-rule);
}

.questions > details > p {
  margin-block-start: var(--space-xs);
}