/* ============================================================================
   site-styles.css - all the visual styling for takingstock.ai
   ----------------------------------------------------------------------------
   Every part of this file is numbered. If something looks wrong, say which
   number it is in - "section 7 is too dark" - and we go straight there.
   The numbers are fixed. New work slots into an existing number rather than
   pushing the others along.

     [1]  FOUNDATIONS         - the dials: colour, type size, spacing
     [2]  BASE                - sensible defaults for the raw page
     [3]  THE SHELL           - header, site nav, footer
     [4]  THE ESSAY PAGE      - the masthead and the shape of the reading column
     [5]  TYPOGRAPHY          - how the words actually read
     [6]  NOTES               - the popups
     [7]  ASIDES              - the expandable mini-essays
     [8]  SECTION NAVIGATION  - the contents list and scroll-spy
     [9]  FLOURISHES          - the ornaments: section numerals, rules, drop cap
     [10] MOTION & FOCUS      - visible focus, and respecting reduced motion
     [11] PRINT               - (arrives at stage 6)
     [12] DARK MODE           - (arrives at stage 6)

   The look is industrial: a near-black masthead, Archivo set large and in
   capitals for anything structural, amber for every figure that matters, and
   Georgia on warm paper for the ten thousand words you actually have to read.
   The dark is used where it has impact - the masthead, the header and footer,
   the popups - and the long read stays on paper, because light text on a dark
   field for that length is hard work for a lot of people.
   ========================================================================== */


/* ============================================
   [1] FOUNDATIONS - the dials
   ============================================
   Almost every colour and size in this file comes from here. Change a value
   here and it changes everywhere, consistently. */

:root {

  /* --- Colour ------------------------------------------------------------ */
  --paper:            #fbf9f5;   /* the reading surface */
  --paper-sunk:       #f3efe6;   /* asides and other recessed areas */
  --ink:              #18181b;   /* body text */
  --ink-soft:         #52504b;   /* captions and the quieter text */
  --ink-faint:        #8a857b;
  --rule:             #ddd6c6;   /* hairlines */
  --rule-strong:      #c0b7a4;

  --charcoal:         #16161a;   /* the masthead, the shell, the popups */
  --charcoal-soft:    #23232a;
  --charcoal-line:    #33333c;
  --on-dark:          #f7f5f0;
  --on-dark-soft:     #a4a29b;

  --amber:            #e8a33d;   /* every figure that matters */
  --amber-bright:     #f6c26c;
  --amber-dim:        rgba(232, 163, 61, 0.14);
  --amber-ink:        #9a6410;   /* amber dark enough to read on paper */
  /* The amber used for chart bars. Plain --amber on this paper measures only
     2.05:1 against the background, which is too faint to see; this one measures
     3.63:1, clearing the 3:1 floor a chart mark needs. Checked, not guessed. */
  --amber-mark:       #b8731a;
  /* The wash inside a forecast band. A tint of the mark colour, kept light so
     that it reads as a region of uncertainty rather than as data in itself. */
  --amber-band:       rgba(184, 115, 26, 0.13);

  --highlight:        rgba(232, 163, 61, 0.22);

  /* --- Type ---------------------------------------------------------------
     Two faces only. Archivo does everything structural - the masthead, the
     section headings, the figures, every small capitalised label. Georgia does
     the reading. Archivo is served from this site, not from Google. */
  --font-body:    Georgia, 'Times New Roman', 'Liberation Serif', 'Nimbus Roman', serif;
  --font-display: 'Archivo', 'Helvetica Neue', 'Arial Narrow', Arial, sans-serif;
  --font-figure:  var(--font-display);

  /* Sizes grow smoothly with the window rather than jumping at breakpoints. */
  --size-body:   clamp(1.0625rem, 1.0rem + 0.35vw, 1.1875rem);
  --size-small:  clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --size-label:  0.6875rem;
  --size-h1:     clamp(2.75rem, 1.2rem + 9vw, 8.5rem);
  --size-h2:     clamp(1.6rem, 1.25rem + 1.6vw, 2.5rem);
  --size-h3:     clamp(1.1rem, 1.02rem + 0.4vw, 1.35rem);

  --leading-body: 1.66;
  --leading-tight: 1.05;

  /* --- Space --------------------------------------------------------------- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1.25rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  /* --- The reading column ------------------------------------------------- */
  --measure: 68ch;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --contents-width: 13rem;
  /* The gap between the contents column and the essay. Named because the
     masthead's opening card has to line up with the essay column below it, and
     that means knowing this number. */
  --contents-gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
  /* One width for the header, the masthead, the essay and the footer, so every
     left edge on the page agrees with every other. */
  --page-width: 74rem;

  /* --- How far down the screen the dark reaches ---------------------------
     These two decide where the masthead's dark band stops. The gap is the air
     between the title block and the opening card; the overlap is how far the
     card reaches back up into the dark.

     Together they are the whole of the answer to "the black should stop
     partway through the first paragraph". Make the overlap larger and the dark
     ends later; make it smaller and it ends sooner. Nothing else needs
     touching, and the dark's height never depends on how long the opening is. */
  --hero-gap:     clamp(2rem, 4.5vw, 3.5rem);
  --hero-overlap: clamp(4.5rem, 8vw, 8rem);
  /* The paper of the opening card extends this far past its own words on every
     side. The card is then pulled out by the same amount, so the words inside
     it sit on exactly the same line as the essay's words below. */
  --lead-pad:     clamp(var(--space-md), 3.5vw, var(--space-xl));

  /* The header stays put at the top of the window. This is its height. */
  --shell-header-height: 3.5rem;

  /* When you follow a link to a section, a note or an aside, the browser must
     stop short of the sticky header rather than tucking the target underneath
     it. This is that gap: the header, plus a little air. Defined once here and
     used by everything that can be linked to. */
  --anchor-offset: calc(var(--shell-header-height) + var(--space-md));
}


/* ============================================
   [2] BASE - sensible defaults
   ============================================ */

/* Archivo, in one variable file that covers every weight we use. It is here
   rather than loaded from Google so that the page depends on nobody else's
   server, and so that it is already in hand when the first paint happens. */
@font-face {
  font-family: 'Archivo';
  src: url('/assets/archivo-latin-variable.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Deliberately NOT setting scroll-padding-top here. The gap below the sticky
     header is applied to the links' targets instead, via scroll-margin-top in
     sections [5], [6] and [7]. Setting it in both places makes the browser add
     both, and anchored links land far lower than intended. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  /* A safety net for very long unbroken strings - almost always a web address
     pasted in as visible text. Without this the page itself scrolls sideways,
     which on a phone feels thoroughly broken. */
  overflow-wrap: break-word;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

/* Charts pasted into the essay sit on their own, centred, with a little air
   around them, so they read as an exhibit rather than as part of the sentence
   before them. */
:where(.essay__body) img {
  display: block;
  margin: var(--space-lg) auto;
  border: 1px solid var(--rule);
  background: #fff;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The first thing a keyboard user tabs to. Hidden until it has focus. */
.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -4rem;
  z-index: 100;
  padding: var(--space-xs) var(--space-md);
  background: var(--amber);
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: var(--size-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-sm);
}

/* A small capitalised label. Used all over: the site nav, the figures under
   the masthead, the aside headers, the contents list. */
.label,
.site-nav__link,
.hero-stat__label,
.aside__label,
.notes__heading,
.contents__heading,
.site-footer__inner,
.note-popup__kind {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* ============================================
   [3] THE SHELL - header, site nav, footer
   ============================================
   Near-black, so it reads as one piece with the masthead below it, and so the
   paper of the essay starts cleanly underneath. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--shell-header-height);
  background: var(--charcoal);
  border-bottom: 1px solid var(--charcoal-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  height: 100%;
  width: min(100% - (2 * var(--gutter)), var(--page-width));
  margin-inline: auto;
}

/* --- The site title ------------------------------------------------------ */

.site-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--on-dark);
  text-decoration: none;
  white-space: nowrap;
}

.site-title__tld {
  color: var(--amber);
}

.site-title:hover .site-title__stem {
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}

/* --- The site nav -------------------------------------------------------- */

/* On a narrow phone the three nav labels are wider than the screen. The row is
   allowed to shrink and, if it still does not fit, to slide sideways on its
   own. The page itself never scrolls sideways, which is the thing that
   actually feels broken. */
.site-nav {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.site-nav::-webkit-scrollbar {
  display: none;
}

.site-nav__list {
  display: flex;
  gap: clamp(0.625rem, 2.5vw, var(--space-lg));
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  font-size: clamp(0.625rem, 0.58rem + 0.2vw, var(--size-label));
  color: var(--on-dark-soft);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__link:hover {
  color: var(--on-dark);
}

.site-nav__link[aria-current='page'] {
  color: var(--amber);
}

/* --- The header on a phone ----------------------------------------------
   Below this width the site title and the three nav labels cannot share a line
   at a size anyone would want to read, so they stack instead. Nothing is
   hidden behind a menu button - there are only three links.

   --shell-header-height is redefined here rather than the height being
   hard-coded, so everything that depends on it - most importantly the gap that
   stops a linked section hiding underneath it - follows automatically. */

@media (max-width: 30rem) {
  :root {
    --shell-header-height: 5rem;
  }

  .site-header__inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-2xs);
  }

  .site-nav {
    width: 100%;
  }
}

/* --- The footer ---------------------------------------------------------- */

.site-footer {
  margin-top: var(--space-3xl);
  background: var(--charcoal);
  padding-block: var(--space-lg);
}

.site-footer__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  width: min(100% - (2 * var(--gutter)), var(--page-width));
  margin-inline: auto;
  font-size: var(--size-label);
  color: var(--on-dark-soft);
}

.site-footer__mark,
.site-footer__meta {
  margin: 0;
}

.site-footer__mark {
  color: var(--on-dark);
}


/* ============================================
   [4] THE ESSAY PAGE - masthead and column
   ============================================ */

.main {
  outline: none;
}

/* --- The masthead --------------------------------------------------------
   A full-width dark band. The title as large as it can decently go, then the
   opening sentence and the figures side by side beneath it. */

/* The dark band. Its height is the title block plus a fixed amount of air -
   never the length of the essay's opening, which is what made it fill the
   whole screen and more. */
.hero__dark {
  background: var(--charcoal);
  color: var(--on-dark);
  padding-top: clamp(var(--space-lg), 5vw, var(--space-2xl));
  padding-bottom: calc(var(--hero-gap) + var(--hero-overlap));
}

/* --- Title and figures, across the top ----------------------------------- */

.hero__top {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 52rem) {
  .hero__top {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
  }
}

.hero__inner {
  width: min(100% - (2 * var(--gutter)), var(--page-width));
  margin-inline: auto;
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--size-h1);
  line-height: 0.88;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  /* The title breaks onto two lines by design, as in "TAKING / STOCK.AI". */
  max-width: 11ch;
}

.hero__suffix {
  color: var(--amber);
}

/* --- The figures ---------------------------------------------------------
   Beside the title on a wide screen, underneath it on a narrow one. */

.hero__stats {
  display: grid;
  gap: var(--space-md);
  margin: 0;
  padding: 0 0 0 var(--space-lg);
  list-style: none;
  border-left: 1px solid var(--charcoal-line);
}

@media (min-width: 52rem) {
  .hero__stats {
    /* Sits on the foot of the title, so the two blocks share a baseline. */
    padding-bottom: 0.4rem;
  }
}

/* On a phone the three figures stand side by side rather than stacked. Stacked
   they added the best part of two hundred pixels to the masthead, which is
   two hundred pixels of the essay the reader could not see. */
@media (max-width: 51.99rem) {
  .hero__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm);
    padding-left: var(--space-md);
  }

  .hero-stat__figure {
    font-size: clamp(1.125rem, 0.9rem + 1.6vw, 1.75rem);
  }

  .hero-stat__label {
    font-size: 0.5625rem;
    letter-spacing: 0.06em;
  }
}

.hero-stat__figure {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--amber);
  font-variant-numeric: lining-nums tabular-nums;
}

.hero-stat__label {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--size-label);
  color: var(--on-dark-soft);
}

/* --- The opening card ----------------------------------------------------
   The essay's first paragraphs sit on paper, reaching up into the dark band
   above. The dark therefore stops partway down the first paragraph, and the
   reader sees the opening the moment the page loads rather than a screenful of
   black. From there the reading carries straight on into the essay below.

   The negative margin at the top is what lifts it into the dark. */

.hero__lead {
  position: relative;
  z-index: 2;
  /* The masthead sets near-white text for the dark around it. The card is
     paper, so it has to set the ink back, or the words are white on cream and
     effectively invisible. */
  color: var(--ink);
  margin-top: calc(-1 * var(--hero-overlap));
  /* Two separate jobs, deliberately kept apart: this element is the sheet of
     paper, and the block inside it is the column of words. One element trying
     to do both - padding for the paper, position for the words - could be made
     to line up on a wide screen or on a phone, but never on both at once.

     The paper simply runs the full width of the window. */
  margin-inline: calc(-1 * var(--gutter));
  padding-block: var(--lead-pad);
  background: var(--paper);
  border-top: 4px solid var(--amber);
  /* Deliberately no shadow. The opening is part of the page, not a panel
     floating above it. */
}

/* The words inside the card track the essay's column exactly - same width,
   same centring - so that reading carries on from the opening into the essay
   without the line of text moving sideways under you. */
.essay__body--lead {
  width: min(100% - (2 * var(--gutter)), var(--measure));
  margin-inline: auto;
}

@media (min-width: 66rem) {
  .essay__body--lead {
    /* Lined up exactly with the essay's column below, so the words do not
       shift sideways as you read on from the card into the essay.

       The max() is there because the page stops widening at --page-width:
       beyond that the column is held in from the edge by half the slack, and
       below it by the gutter. */
    margin-left: calc(
      max(var(--gutter), (100% - var(--page-width)) / 2)
      + var(--contents-width) + var(--contents-gap));
  }
}

/* --- The reading column --------------------------------------------------
   On a wide screen the contents list sits in its own column to the left of the
   essay. Below that width there is no room for a column, so the contents
   becomes a bar at the top instead - see section [8]. */

.essay__wrap {
  width: min(100% - (2 * var(--gutter)), var(--measure));
  margin-inline: auto;
  padding-top: var(--space-2xl);
}

@media (min-width: 66rem) {
  .essay__wrap {
    width: min(100% - (2 * var(--gutter)), var(--page-width));
    display: grid;
    /* The second column takes the rest of the width and the prose inside it is
       capped at the reading measure. It is written this way, rather than sizing
       the column to the measure and centring the pair, because centring moves
       the essay's left edge to somewhere that cannot be worked out in advance -
       and the opening card up in the masthead has to line up with it exactly. */
    grid-template-columns: var(--contents-width) minmax(0, 1fr);
    gap: var(--contents-gap);
    align-items: start;
  }

  .essay__body {
    max-width: var(--measure);
  }

  /* The prose always sits in the second column, whether or not the contents
     list has been built yet. Without this it starts in the narrow first column
     and jumps sideways the moment section-nav.js runs. */
  .essay__body {
    grid-column: 2;
  }
}

/* Where JavaScript is available the contents list is coming, so its space is
   held open from the very first paint - invisible, but occupying its place.
   Nothing is reserved when JavaScript is off, because nothing will arrive.
   This is what keeps the page from shuffling as it loads. */
.js #contents[hidden] {
  display: block;
  visibility: hidden;
}

@media (max-width: 65.99rem) {
  .js #contents[hidden] {
    /* Exactly the height the contents bar will be: the button's padding top and
       bottom, one line of its label, and the hairline above and below. Reserving
       a round number instead leaves a few pixels of shuffle as it appears. */
    min-height: calc((2 * var(--space-sm)) + 1.0625rem + 2px);
  }
}

/* --- The safety net ------------------------------------------------------
   If a page ever defeats the converter, build.js publishes the author's words
   as plain text rather than dropping the page. This is what that looks like. */

.build-fallback__note {
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--amber-ink);
  background: var(--amber-dim);
  font-style: italic;
}

.build-fallback__source {
  white-space: pre-wrap;
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-body);
}


/* ============================================
   [5] TYPOGRAPHY - how the words read
   ============================================
   These are the defaults for the author's ordinary prose: paragraphs, lists,
   links, quotes. They are written as ":where(.essay__body) p" rather than
   ".essay__body p" on purpose. :where() makes a rule deliberately weak, so
   anything further down this file that names a part by its own class - a note,
   an aside, the contents list - always wins without a fight. Without that, a
   rule in section [6] can be silently overruled by a rule in section [5] and
   editing it appears to do nothing at all. */

:where(.essay__body) p {
  margin: 0 0 var(--space-md);
  font-variant-numeric: oldstyle-nums proportional-nums;
  hyphens: auto;
}

/* --- Section headings ----------------------------------------------------
   Archivo, heavy, in capitals. The Roman numeral sits above the heading as its
   own line, in amber - see section [9]. */

:where(.essay__body) h2,
:where(.essay__body) h3 {
  position: relative;
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  text-wrap: balance;
  /* Follow a link to a section and it stops short of the sticky header. */
  scroll-margin-top: calc(var(--anchor-offset) + var(--nav-offset, 0px));
}

:where(.essay__body) h2 {
  margin: var(--space-3xl) 0 var(--space-lg);
  font-size: var(--size-h2);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

:where(.essay__body) h3 {
  margin: var(--space-2xl) 0 var(--space-md);
  font-size: var(--size-h3);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}

:where(.essay__body) h2:focus,
:where(.essay__body) h3:focus {
  outline: none;
}

/* --- Lists, quotes and the rest ------------------------------------------ */

:where(.essay__body) ul,
:where(.essay__body) ol {
  margin: 0 0 var(--space-md);
  padding-left: 1.4em;
}

:where(.essay__body) li {
  margin-bottom: var(--space-xs);
}

/* --- The quotations that open a section ----------------------------------
   Picked out by build.js. The quoted words get room and the reading face; the
   attribution after them drops onto its own line, small and in capitals, so
   the two are never confused for one another.

   The trick is that the whole paragraph wears the attribution's styling and
   the <em> inside it - which is the quotation - overrides that and turns
   itself into a block. No change to the markdown was needed for any of it. */

.epigraph {
  margin: var(--space-2xl) 0;
  padding-top: var(--space-md);
  border-top: 2px solid var(--amber);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--size-label);
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ink-faint);
  hyphens: none;
}

.epigraph em {
  display: block;
  margin-bottom: var(--space-sm);
  font-family: var(--font-body);
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink);
}

/* A second italic run is a continuation of the same quotation - the Turing one
   runs over two lines - so it does not start a new block of space. */
.epigraph em + em {
  margin-top: calc(var(--space-sm) * -1);
}

/* An epigraph opening a section sits right under the heading, so it does not
   need the full gap above it. */
:where(.essay__body) h2 + .epigraph,
:where(.essay__body) h3 + .epigraph {
  margin-top: var(--space-lg);
}

:where(.essay__body) blockquote {
  margin: var(--space-lg) 0;
  padding-left: var(--space-md);
  border-left: 3px solid var(--amber);
  color: var(--ink-soft);
  font-style: italic;
}

:where(.essay__body) a {
  /* Where a link's visible text is a full web address it can easily be longer
     than the column, so it wraps rather than overflowing. */
  overflow-wrap: anywhere;
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}

:where(.essay__body) a:hover {
  color: var(--amber-ink);
  text-decoration-thickness: 2px;
}

:where(.essay__body) strong {
  font-weight: 700;
}

:where(.essay__body) code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--paper-sunk);
  padding: 0.1em 0.3em;
}

:where(.essay__body) hr {
  margin: var(--space-xl) auto;
  border: 0;
  width: 6rem;
  border-top: 2px solid var(--amber);
}


/* ============================================
   [6] NOTES - the popups
   ============================================
   A note is written in the markdown as [^capex]. The build turns it into a
   marker in the text and a full list of notes at the foot of the page; that
   list is the thing that works with JavaScript off, prints, and gets indexed.
   notes.js adds the popup on top.

   The marker is deliberately not a small grey footnote number. It is an amber
   chip on the baseline, big enough to hit with a thumb and obviously something
   you are meant to press. The popup it opens is dark, so it reads as a thing
   that has arrived on top of the page rather than a tooltip. */

.note-ref {
  /* The chip sits on the line rather than being raised, so it does not stretch
     the line spacing of a long essay. */
  vertical-align: baseline;
  font-size: 1em;
  line-height: 0;
}

.note-ref__link {
  display: inline-block;
  min-width: 1.35em;
  padding: 0.15em 0.4em;
  margin: 0 0.12em;
  transform: translateY(-0.12em);
  background: var(--amber-dim);
  border-bottom: 2px solid var(--amber);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.7em;
  line-height: 1.25;
  letter-spacing: 0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  text-align: center;
  color: var(--amber-ink);
  text-decoration: none;
  cursor: pointer;
}

.note-ref__link:hover,
.note-ref__link.is-open {
  background: var(--amber);
  border-bottom-color: var(--charcoal);
  color: var(--charcoal);
}

@media (prefers-reduced-motion: no-preference) {
  .note-ref__link {
    transition: background-color 120ms ease, color 120ms ease;
  }
}

/* --- The popup, on a screen with a mouse ---------------------------------
   Positioned by notes.js; only its appearance is set here. */

.note-popup {
  position: fixed;
  z-index: 60;
  width: max-content;
  max-width: min(26rem, calc(100vw - 2rem));
  padding: var(--space-md);
  background: var(--charcoal);
  color: var(--on-dark);
  border-top: 3px solid var(--amber);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  font-size: var(--size-small);
  line-height: 1.55;
  opacity: 0;
  /* Deliberately visible: the caret below is drawn outside the box, and
     clipping here would cut it off. A long note scrolls in the body instead. */
  overflow: visible;
}

.note-popup.is-open {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .note-popup {
    transition: opacity 120ms ease;
  }
}

/* The word "NOTE" or "SOURCE" across the top, so you know at a glance what you
   have opened. notes.js fills it in. */
.note-popup__kind {
  display: block;
  margin-bottom: var(--space-xs);
  font-size: 0.625rem;
  color: var(--amber);
}

/* notes.js caps this height so a long note stays inside the window. */
.note-popup__body {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.note-popup__body > *:first-child { margin-top: 0; }
.note-popup__body > *:last-child  { margin-bottom: 0; }
.note-popup__body p { margin: 0 0 var(--space-xs); }

.note-popup__body a {
  color: var(--amber-bright);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  overflow-wrap: anywhere;
}

/* The little caret pointing back at the marker. --caret-x is set by notes.js,
   so it keeps pointing at the right place even when the popup has been nudged
   sideways to stay on screen. */
.note-popup::after {
  content: '';
  position: absolute;
  left: var(--caret-x, 50%);
  width: 0;
  height: 0;
  border: 8px solid transparent;
  transform: translateX(-50%);
}

.note-popup[data-side='above']::after {
  bottom: -16px;
  border-top-color: var(--charcoal);
}

.note-popup[data-side='below']::after {
  top: -19px;
  border-bottom-color: var(--amber);
}

/* --- The note opened underneath the paragraph, on a phone ----------------- */

.note-inline {
  display: flex;
  gap: var(--space-sm);
  margin: var(--space-sm) 0 var(--space-md);
  padding: var(--space-md);
  background: var(--charcoal);
  color: var(--on-dark);
  border-top: 3px solid var(--amber);
  font-size: var(--size-small);
  line-height: 1.55;
}

.note-inline__number {
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: lining-nums;
  font-size: 0.8125rem;
  color: var(--amber);
}

.note-inline__body > *:first-child { margin-top: 0; }
.note-inline__body > *:last-child  { margin-bottom: 0; }
.note-inline__body p { margin: 0 0 var(--space-xs); }

.note-inline__body a {
  color: var(--amber-bright);
  overflow-wrap: anywhere;
}

/* --- The list of notes at the foot of the page --------------------------- */

.notes {
  margin-top: var(--space-3xl);
  padding-top: var(--space-lg);
  border-top: 2px solid var(--ink);
}

/* "NOTES" is a signpost, not another section of the argument, so it gets none
   of the section treatment from [5] or the rule from [9]. */
.notes__heading::before {
  content: none;
}

.notes__heading {
  margin: 0 0 var(--space-md);
  font-size: var(--size-label);
  font-weight: 700;
  color: var(--ink-faint);
}

.notes__list {
  margin: 0;
  padding-left: 1.8em;
  font-size: var(--size-small);
  line-height: 1.55;
  color: var(--ink-soft);
}

.notes__item {
  margin-bottom: var(--space-sm);
  /* A note is a link target, so it needs the same clearance as a heading. */
  scroll-margin-top: calc(var(--anchor-offset) + var(--nav-offset, 0px));
}

.notes__item p {
  margin: 0 0 var(--space-2xs);
}

.notes__item::marker {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--amber-ink);
}

.notes__backref {
  color: var(--amber-ink);
  text-decoration: none;
}

/* --- Kinds of note -------------------------------------------------------
   A note whose label begins with "source-" is a citation rather than an
   explanation, and is set apart accordingly. The author chooses this simply by
   naming the note [^source-something] instead of [^something]. */

.notes__item[data-note-kind='source'],
.note-popup[data-note-kind='source'] .note-popup__body,
.note-inline[data-note-kind='source'] .note-inline__body {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: -0.005em;
}

a.note-ref__link[data-note-kind='source'] {
  background: transparent;
  border-bottom-style: dotted;
}

a.note-ref__link[data-note-kind='source']:hover,
a.note-ref__link[data-note-kind='source'].is-open {
  background: var(--amber);
  border-bottom-style: solid;
}


/* ============================================
   [7] ASIDES - the expandable mini-essays
   ============================================
   An aside is a piece you can skip without losing the argument. It should read
   as a different kind of space - sunk into the page, marked heavily down the
   left edge - but the words inside it are the same size as the words around
   it, because they are just as much a part of the essay.

   Built on the browser's own <details> element, so it opens and closes with no
   JavaScript at all. asides.js adds deep linking and the unfolding. */

.aside {
  margin: var(--space-2xl) 0;
  margin-inline: calc(var(--space-md) * -1);
  /* Links like #aside-1-... land here, so it needs the same clearance below
     the header as a heading does. */
  scroll-margin-top: calc(var(--anchor-offset) + var(--nav-offset, 0px));
}

.aside__details {
  background: var(--paper-sunk);
  border-left: 4px solid var(--amber);
}

/* When you arrive at an aside by following a link, it is marked for a couple
   of seconds so you can see what it was you were sent to. */
.aside.is-linked > .aside__details {
  box-shadow: 0 0 0 2px var(--amber);
}

@media (prefers-reduced-motion: no-preference) {
  .aside__details {
    transition: box-shadow 400ms ease;
  }
}

/* --- The clickable title bar --------------------------------------------- */

.aside__summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-md);
  cursor: pointer;
  list-style: none;
}

.aside__summary::-webkit-details-marker {
  display: none;
}

/* Our own marker: the word READ, which says what the thing is for, turning to
   CLOSE once it is open. A plus sign leaves you guessing. */
.aside__summary::after {
  content: 'Read \00a0+';
  margin-left: auto;
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-ink);
  white-space: nowrap;
}

.aside__details[open] > .aside__summary::after {
  content: 'Close \00a0\2013';
}

.aside__summary:hover {
  background: var(--amber-dim);
}

.aside__label {
  flex: none;
  font-size: var(--size-label);
  color: var(--amber-ink);
}

.aside__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-small);
  letter-spacing: 0.01em;
  color: var(--ink);
}

/* --- The aside's text ----------------------------------------------------
   Same size and same colour as the essay around it, as asked. */

.aside__body {
  padding: 0 var(--space-md) var(--space-md);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  color: var(--ink);
}

.aside__body > *:first-child { margin-top: 0; }
.aside__body > *:last-child  { margin-bottom: 0; }

.aside__body p {
  margin: 0 0 var(--space-md);
}

/* --- Closing an aside from the bottom ------------------------------------
   An aside can be a thousand words long. Having read to the end of one, the
   way back out should not be a scroll all the way up to the summary you opened
   it with. asides.js adds this; with JavaScript off it is simply not there,
   and the control at the top still works. */

.aside__close {
  display: block;
  width: 100%;
  margin-top: var(--space-md);
  padding: var(--space-sm) 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--rule-strong);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: right;
  color: var(--amber-ink);
  cursor: pointer;
}

.aside__close:hover {
  background: var(--amber-dim);
}


/* ============================================
   [8] SECTION NAVIGATION - contents, scroll-spy
   ============================================
   Built by section-nav.js from the headings that are actually in the essay, so
   it can never fall out of step with them. On a wide screen it is a sticky
   column to the left of the reading column. Below that it becomes a bar that
   opens and closes. */

.contents {
  font-family: var(--font-display);
}

.contents__heading {
  margin: 0 0 var(--space-sm);
  font-size: var(--size-label);
  font-weight: 700;
  color: var(--ink-faint);
}

.contents__heading::before {
  content: none;
}

.contents__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--rule);
}

.contents__link {
  display: flex;
  gap: 0.6em;
  padding: 0.4em 0 0.4em var(--space-sm);
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
}

.contents__numeral {
  flex: none;
  min-width: 2.4em;
  color: var(--ink-faint);
  font-variant-numeric: lining-nums;
}

.contents__item--sub .contents__link {
  padding-left: var(--space-md);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.contents__link:hover {
  color: var(--ink);
  background: var(--amber-dim);
}

/* The section you are currently reading. */
.contents__link.is-current {
  color: var(--ink);
  border-left-color: var(--amber);
}

.contents__link.is-current .contents__numeral {
  color: var(--amber-ink);
}

/* --- The contents on a wide screen: a sticky column ---------------------- */

@media (min-width: 66rem) {
  .contents {
    position: sticky;
    top: calc(var(--shell-header-height) + var(--space-lg));
    max-height: calc(100vh - var(--shell-header-height) - var(--space-2xl));
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .contents__toggle {
    display: none;
  }
}

/* --- The contents on a narrow screen: a bar that opens ------------------- */

@media (max-width: 65.99rem) {
  .contents {
    position: sticky;
    top: var(--shell-header-height);
    z-index: 40;
    margin-bottom: var(--space-lg);
    background: var(--paper);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }

  .contents__heading {
    display: none;
  }

  .contents__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-sm) 0;
    background: none;
    border: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--size-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
  }

  .contents__toggle-now {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    color: var(--amber-ink);
  }

  .contents__toggle::after {
    content: '\002b';
    flex: none;
    font-size: 1rem;
    color: var(--amber-ink);
  }

  .contents__toggle[aria-expanded='true']::after {
    content: '\2013';
  }

  .contents__list {
    padding-bottom: var(--space-sm);
  }

  .contents__list[hidden] {
    display: none;
  }
}


/* --- The copy-link control on each heading -------------------------------
   Added by section-nav.js, and only where the browser can actually reach the
   clipboard. It stays faint until you approach the heading, so it does not
   clutter a page you are only reading. */

.section__copy {
  margin-left: 0.5em;
  padding: 0.1em 0.35em;
  background: none;
  border: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  vertical-align: 0.15em;
  cursor: pointer;
  opacity: 0;
}

:where(.essay__body) h2:hover .section__copy,
:where(.essay__body) h3:hover .section__copy,
.section__copy:focus-visible,
.section__copy.is-copied,
.section__copy.is-failed {
  opacity: 1;
}

.section__copy:hover {
  color: var(--amber-ink);
  background: var(--amber-dim);
}

/* The word "Copied" replaces the # for a moment, so pressing it plainly did
   something. If the clipboard refuses, it says so rather than pretending. */
.section__copy-said {
  display: none;
}

.section__copy.is-copied .section__copy-mark,
.section__copy.is-failed .section__copy-mark {
  display: none;
}

.section__copy.is-copied .section__copy-said,
.section__copy.is-failed .section__copy-said {
  display: inline;
  color: var(--amber-ink);
}

.section__copy.is-failed .section__copy-said::after {
  content: ' 4 no';
}

@media (prefers-reduced-motion: no-preference) {
  .section__copy {
    transition: opacity 140ms ease;
  }
}

/* On a touchscreen there is no hover, so the control is simply always there. */
@media (hover: none) {
  .section__copy {
    opacity: 0.55;
  }
}


/* ============================================
   [9] FLOURISHES - the ornaments
   ============================================
   Nothing here is load-bearing. If the page ever feels fussy, this is the
   section to thin out; the essay will still read perfectly without any of it. */

/* --- The section numeral -------------------------------------------------
   The Roman numeral sits above its heading, in amber, like a stamp on a piece
   of machinery. */

.section__number {
  /* On the same line as the heading it belongs to, and sized against it - so
     it grows and shrinks with the heading rather than staying a fixed small
     label. */
  display: inline;
  margin-right: 0.5em;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.7em;
  letter-spacing: 0.04em;
  color: var(--amber-ink);
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}

h3 .section__number {
  font-weight: 700;
  font-size: 0.78em;
}

/* --- The rule above every section ----------------------------------------
   A heavy rule with a short amber segment at its left end: the join between
   one part of the argument and the next. */

:where(.essay__body) h2::before {
  content: '';
  position: absolute;
  top: calc(var(--space-2xl) * -1);
  left: 0;
  width: 100%;
  height: 2px;
  background:
    linear-gradient(to right, var(--amber) 0 4rem, transparent 4rem),
    linear-gradient(to right, var(--ink) 0 100%);
}

/* --- The opening initial -------------------------------------------------
   Not a drop cap in the book sense - a stamped block, the letter reversed out
   of the same near-black as the masthead. It goes on the first real paragraph
   of the essay, which build.js picks out, so that a short note to self at the
   top of a draft does not get a great block dropped on it.

   The one exception is a very narrow phone, where a letter that size would
   leave too little room for the words beside it. */

@media (min-width: 22rem) {
  .page--essay .essay__body > p.essay__lede::first-letter {
    float: left;
    margin: 0.08em 0.36em 0 0;
    padding: 0.2em 0.3em;
    background: var(--charcoal);
    color: var(--amber);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.4em;
    line-height: 1;
    letter-spacing: 0;
  }
}

/* --- Selection ------------------------------------------------------------ */

::selection {
  background: var(--highlight);
  color: var(--ink);
}

/* The dark parts of the page take the inverse selection. The opening card is
   paper, so it keeps the ordinary one. */
.hero__lead ::selection {
  background: var(--highlight);
  color: var(--ink);
}

.hero ::selection,
.note-popup ::selection,
.note-inline ::selection {
  background: var(--amber);
  color: var(--charcoal);
}


/* ============================================
   [10] MOTION & FOCUS
   ============================================ */

/* Anything the keyboard lands on shows where it is, clearly. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

.hero a:focus-visible,
.site-header a:focus-visible,
.note-popup:focus-visible {
  outline-color: var(--amber-bright);
}

/* Smooth scrolling is a nicety, so it is only switched on for people who have
   not asked their computer to reduce motion. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================
   [11] PRINT
   ============================================
   Empty on purpose. Print styles arrive at stage 6 and will be written here. */


/* ============================================
   [12] DARK MODE
   ============================================
   Empty on purpose. Dark mode arrives at stage 6 and will be written here.
   Note that the masthead, the shell and the popups are already dark by design;
   what is missing is a dark treatment of the reading column itself. */


/* ============================================
   [13] CHARTS
   ============================================
   Added after [12], so that no existing number had to move.

   A chart here is plain HTML, not a picture: the figures are real selectable
   text, a screen reader reads them out in order, they are searchable, and on a
   phone they reflow instead of shrinking into illegibility.

   Every bar carries its own number beside it, so there is no axis to read
   against and nothing to hover for - the value is simply there. Hovering a row
   deepens its bar, which helps in tracking one line across, but it reveals
   nothing new, because nothing is hidden. */

.chart {
  margin: var(--space-xl) 0;
  padding: var(--space-md) 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}

.chart__caption {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.chart__rows {
  display: grid;
  gap: 0.375rem;
}

.chart__row {
  display: grid;
  grid-template-columns: minmax(3rem, max-content) minmax(0, 1fr) minmax(2.5rem, max-content);
  align-items: center;
  gap: var(--space-sm);
}

.chart__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.chart__track {
  display: block;
  height: 1.25rem;
}

.chart__bar {
  display: block;
  height: 100%;
  min-width: 2px;
  background: var(--amber-mark);
  /* Square where it starts, rounded where the data ends. */
  border-radius: 0 4px 4px 0;
}

/* A forecast or an estimate is drawn hollow and hatched, so that it can never
   be mistaken for a figure somebody has actually reported. */
.chart__bar--forecast {
  background:
    repeating-linear-gradient(135deg,
      var(--amber-mark) 0 2px,
      transparent 2px 6px);
  box-shadow: inset 0 0 0 1.5px var(--amber-mark);
}

.chart__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}

.chart__forecast {
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.chart__row:hover .chart__bar {
  background-color: var(--amber-ink);
}

@media (prefers-reduced-motion: no-preference) {
  .chart__bar {
    transition: background-color 140ms ease;
  }
}

/* On a very narrow phone three columns is one too many, so the label moves
   above its own bar. */
@media (max-width: 26rem) {
  .chart__row {
    grid-template-columns: minmax(0, 1fr) minmax(2.5rem, max-content);
    column-gap: var(--space-sm);
    row-gap: 0.125rem;
  }

  .chart__label {
    grid-column: 1 / -1;
  }
}


/* ============================================
   [13b] LINE GRAPHS
   ============================================
   Part of [13], kept under its own heading because it is a different animal
   from the bars above.

   The words are HTML and the line is SVG. That split is deliberate: an SVG
   that stretches to fit a column also stretches the type inside it, and on a
   phone that leaves labels at six or seven pixels. Here the graph stretches
   and the type does not, because the type was never inside it.

   The line is drawn on a 100 x 100 grid stretched to fill the box, so every
   coordinate is simply a percentage. "vector-effect: non-scaling-stroke"
   stops the stretching from thickening the line with it. The dots are HTML,
   positioned by the same percentages, so they stay round. */

.chart--line {
  padding-bottom: var(--space-sm);
}

.chart__plot {
  position: relative;
  height: clamp(9rem, 26vw, 14rem);
  /* Room at the top for the highest number to sit above its dot. */
  margin: var(--space-xl) 0 var(--space-sm);
}

/* --- The gridlines ------------------------------------------------------- */

.chart__gridline {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px solid var(--rule);
}

.chart__gridvalue {
  position: absolute;
  right: 100%;
  transform: translateY(-50%);
  padding-right: 0.6em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  font-variant-numeric: lining-nums tabular-nums;
}

/* The numbers up the side need somewhere to live, so the plot is inset. */
.chart__grid {
  position: absolute;
  inset: 0 0 0 2.4rem;
}

.chart__svg,
.chart__marks {
  position: absolute;
  inset: 0 0 0 2.4rem;
}

.chart__svg {
  width: calc(100% - 2.4rem);
  height: 100%;
  overflow: visible;
}

/* --- The line ------------------------------------------------------------ */

.chart__line {
  fill: none;
  stroke: var(--amber-mark);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  /* Keeps the line 2px however far the box is stretched. */
  vector-effect: non-scaling-stroke;
}

/* What has not happened yet is dashed, so it can never be read as reported. */
.chart__line--forecast {
  stroke-dasharray: 5 4;
  stroke-width: 2;
}

.chart__band {
  fill: var(--amber-band);
  stroke: none;
}

/* The band is a wash, but a very narrow one at its left-hand end needs an edge
   or it disappears against the paper entirely. */
.chart__band {
  stroke: var(--amber-band);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

/* --- The dots and their numbers ------------------------------------------ */

.chart__dot {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--amber-mark);
  /* A ring in the paper colour, so a dot stays legible where it sits on the
     line or against the band. */
  box-shadow: 0 0 0 2px var(--paper);
}

.chart__dot--forecast {
  background: var(--paper);
  box-shadow: 0 0 0 2px var(--paper), inset 0 0 0 2px var(--amber-mark);
}

.chart__point {
  position: absolute;
  transform: translate(-50%, -175%);
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}

/* The first and last numbers would otherwise hang off the ends of the graph.
   The last one is pulled fully inside: at -90% a tenth of it still stuck out
   past the edge of the column at every width. */
.chart__point[style*="left:0.00%"] {
  transform: translate(0, -175%);
}

.chart__point[style*="left:100.00%"] {
  transform: translate(-100%, -175%);
}

/* --- Along the bottom ---------------------------------------------------- */

.chart__axis {
  position: relative;
  height: 1.4em;
  margin-left: 2.4rem;
  border-top: 1px solid var(--rule-strong);
  padding-top: var(--space-xs);
}

.chart__tick {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.chart__tick[style*="left:0.00%"]   { transform: translateX(0); }
.chart__tick[style*="left:100.00%"] { transform: translateX(-100%); }

/* On a phone there is not room for a number against every point: they overlap.
   The first figure, the last reported one and the forecasts stay; the ones that
   were only labelled because there happened to be room are dropped, and remain
   available in the figures table that accompanies every chart. */
@media (max-width: 34rem) {
  .chart__point--optional,
  .chart__tick--optional {
    display: none;
  }

  /* The numbers that remain are set smaller too. At the full size a label like
     "340-400" is wider than the space between two points on a phone, and they
     sit on top of one another. */
  .chart__point {
    font-size: 0.625rem;
    letter-spacing: -0.01em;
  }

  .chart__tick {
    font-size: 0.5625rem;
    letter-spacing: 0.02em;
  }

  .chart__grid,
  .chart__svg,
  .chart__marks,
  .chart__axis,
  .chart__key {
    /* The numbers up the side are smaller, so they need less room. */
    margin-left: 0;
  }

  .chart__grid,
  .chart__svg,
  .chart__marks {
    inset: 0 0 0 1.9rem;
  }

  .chart__svg {
    width: calc(100% - 1.9rem);
  }

  .chart__axis,
  .chart__key {
    margin-left: 1.9rem;
  }
}

.chart__key {
  margin: var(--space-md) 0 0 2.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}