/* =========================================================================
   The Sim Standard — house stylesheet
   =========================================================================

   The whole design is three decisions:

     1. A colour per section, plus two fixed accents and the stock. Section
        ink colours labels, section tags and headline hovers; navy frames the
        paper; oxblood covers anything without a section. Nothing else is
        coloured — no status colours, no filled backgrounds.
     2. Type scale carries the hierarchy. The lead headline is ~3.5x the
        secondary headline. That gap is the front page.
     3. Nothing is in a box. Stories are separated by whitespace and hairline
        rules. No cards, no shadows, no pills, no filled badges.

   Adding a component? See STYLEGUIDE.md. If it needs a box or a new colour
   to read as important, the typography is wrong, not the palette.
   ========================================================================= */

/* ==================================================== tokens: colour */
:root {
  color-scheme: light;

  /* The entire palette. Four values, with a job each.
     --accent  is editorial: section labels, links, live status dots.
     --accent-2 is institutional: the rules and bars that frame the paper.
     They never swap roles, and nothing else is coloured. */
  --paper:    #FAF6EC;  /* cream stock */
  --ink:      #17150F;  /* near-black, warm */
  --accent:   #8C1D18;  /* oxblood */
  --accent-2: #1F3864;  /* navy */

  /* Permitted derivations — ink diluted with paper, nothing else.
     Two quieter voices, both still AA against the stock at small sizes. */
  --ink-soft:    color-mix(in srgb, var(--ink) 82%, var(--paper));
  --ink-muted:   color-mix(in srgb, var(--ink) 62%, var(--paper));
  --rule:        color-mix(in srgb, var(--ink) 16%, var(--paper));
  --rule-strong: color-mix(in srgb, var(--ink) 45%, var(--paper));
  --selection:   color-mix(in srgb, var(--accent) 16%, var(--paper));

  /* ================================================== tokens: type */
  --face-display: 'Playfair Display', 'Times New Roman', Times, serif;
  --face-text: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --face-ui: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Code, handles and anything that must not be re-flowed. Rarely used. */
  --face-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  --step--2: 0.6875rem;   /* 11px — small-caps labels */
  --step--1: 0.8125rem;   /* 13px — bylines, timestamps, UI */
  --step-0:  1.0625rem;   /* 17px — body */
  --step-1:  1.1875rem;   /* 19px — standfirsts, one-line entry headlines */
  --step-2:  1.5rem;      /* 24px — secondary headlines */
  --step-3:  1.875rem;    /* 30px — page headings */
  --step-4:  2.375rem;    /* 38px — section-page lead */
  --step-lead: clamp(2.6rem, 6.4vw, 5.25rem);      /* the front-page headline */
  --step-nameplate: clamp(2.4rem, 8.8vw, 6.25rem); /* the nameplate */

  --measure: 68ch;        /* article line length, capped */
  --lh-tight: 1.04;
  --lh-head: 1.14;
  --lh-body: 1.7;

  /* ================================================== tokens: space */
  --wrap: 1220px;
  --gutter: clamp(1rem, 2.4vw, 2.25rem);
  --space-1: .35rem;
  --space-2: .75rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: clamp(2.25rem, 4.5vw, 3.75rem);
  --space-6: clamp(3rem, 7vw, 5.5rem);

  --hover: 100ms;  /* the only animation on the site */
}

[data-theme="dark"] {
  color-scheme: dark;
  --paper:    #14130F;  /* ink becomes the stock */
  --ink:      #EDE7D9;  /* warm off-white */
  --accent:   #DE8B7B;
  --accent-2: #93AEE0;
  --selection: color-mix(in srgb, var(--accent) 26%, var(--paper));
  --rule:        color-mix(in srgb, var(--ink) 22%, var(--paper));
  --rule-strong: color-mix(in srgb, var(--ink) 50%, var(--paper));
}

/* ==================================================== section colours
   Each section owns one printed ink. It sets --section on a story's
   container; labels, section tags and headline hovers inherit it, and
   anything without a section falls back to the editorial accent.

   These are the only hues on the site. They colour labels and rules —
   never a headline, never a background, never a box. All clear 6:1
   against the stock in both themes. */
[data-section="politics"]      { --section: #8C1D18; }
[data-section="courts"]        { --section: #5C2E7E; }
[data-section="the-senate"]    { --section: #1F3864; }
[data-section="economy"]       { --section: #1B5E44; }
[data-section="elections"]     { --section: #8A4A0B; }
[data-section="opinion"]       { --section: #14565E; }
[data-section="elections"]     { --section: #8A4A0B; }
[data-section="advertisement"] { --section: var(--ink-muted); }

[data-theme="dark"] [data-section="politics"]   { --section: #E09082; }
[data-theme="dark"] [data-section="courts"]     { --section: #C39BDD; }
[data-theme="dark"] [data-section="the-senate"] { --section: #93AEE0; }
[data-theme="dark"] [data-section="economy"]    { --section: #7FC9A4; }
[data-theme="dark"] [data-section="elections"]  { --section: #E0A461; }
[data-theme="dark"] [data-section="opinion"]    { --section: #7FC6CE; }
[data-theme="dark"] [data-section="elections"]  { --section: #E0A461; }

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face-text);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

::selection { background: var(--selection); }

h1, h2, h3, h4 {
  font-family: var(--face-display);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: -.006em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
hr { border: 0; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--hover) linear;
}
a:hover { color: var(--ink); }

code, kbd, pre, .mono { font-family: var(--face-mono); font-size: .88em; }

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

/* =========================================================== utilities */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* A page whose entire content is the reading column — article, corrections,
   error pages. Centred inside .wrap so the page is never lopsided, while the
   measure itself stays capped and nothing sits beside the text.
   Must come after .wrap: same specificity, later wins. */
.measure { max-width: calc(var(--measure) + 2 * var(--gutter)); }

.visually-hidden, .skip-link:not(:focus) {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; z-index: 50; left: 1rem; top: .5rem;
  background: var(--ink); color: var(--paper); padding: .5rem .9rem;
}

/* The small-caps section label. The one place the accent is allowed to
   appear in bulk, and never inside a box. */
.label {
  display: block;
  font-family: var(--face-ui);
  font-size: var(--step--2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--section, var(--accent));
  margin: 0 0 var(--space-1);
}
.label a { color: inherit; text-decoration: none; }
.label a:hover { text-decoration: underline; }
.label--ink { color: var(--ink-muted); }

/* Metadata: byline, timestamp, counts. Sans, small, quiet, never accent. */
.meta {
  font-family: var(--face-ui);
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--ink-muted);
  margin: 0;
}
.meta a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule-strong); }
.meta a:hover { color: var(--accent); }
.meta__sep { padding-inline: .45em; opacity: .55; }

/* A plain text link that used to be a button. */
.textlink {
  font-family: var(--face-ui);
  font-size: var(--step--1);
  background: none; border: 0; padding: 0; margin: 0;
  color: var(--accent); cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
  transition: color var(--hover) linear;
}
.textlink:hover { color: var(--ink); }
.linkish { font: inherit; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
.linkish:hover { color: var(--accent); }
.inline-form { display: inline; margin: 0; }

.muted { color: var(--ink-muted); }
.nowrap { white-space: nowrap; }
.stack-top { margin-top: var(--space-4); }

.rule { height: 0; border-top: 1px solid var(--rule); margin-block: var(--space-5); }
.rule--strong { border-top-color: var(--rule-strong); }

/* =========================================================== ad strip
   A paid line above the nameplate. Type only: it is separated from the paper
   by a rule and a label, never by a box or a tint. */
.adstrip { border-bottom: 1px solid var(--rule); }
.adstrip__inner {
  display: flex; align-items: baseline; justify-content: center;
  gap: var(--space-2); flex-wrap: wrap;
  margin: 0; padding-block: .45rem;
  font-family: var(--face-ui);
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-align: center;
}
.adstrip__flag {
  font-size: var(--step--2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--ink-muted);
}
.adstrip a { color: inherit; text-decoration: none; }
.adstrip a:hover { color: var(--accent); text-decoration: underline; }

/* ============================================================ masthead
   No rule of its own: the section nav closes the block in navy. */
.masthead { position: relative; }

.masthead__utility {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
  padding-block: .5rem;
  font-family: var(--face-ui);
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-muted);
}
.masthead__utility a { color: inherit; text-decoration: none; }
.masthead__utility a:hover { color: var(--accent); }
.masthead__utility > * { display: flex; align-items: center; gap: .9rem; }

.theme-toggle {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  background: none; border: 0; padding: 0; color: inherit; cursor: pointer;
  transition: color var(--hover) linear;
}
.theme-toggle:hover { color: var(--accent); }

/* ----------------------------------------------------------- nameplate */
.nameplate { text-align: center; padding-block: clamp(1.25rem, 3.4vw, 2.5rem) var(--space-3); }
.nameplate__link { text-decoration: none; color: inherit; }
.nameplate__title {
  font-family: var(--face-display);
  font-weight: 900;
  font-size: var(--step-nameplate);
  line-height: .9;
  letter-spacing: -.022em;
}
.nameplate__tagline {
  font-family: var(--face-ui);
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--ink-muted);
  margin: .75rem 0 0;
}

/* --------------------------------------------------------- dateline bar
   The identity of the paper: it says a government is being tracked. */
/* The 2px navy rule is the paper's institutional mark. It appears exactly
   three times: over the dateline bar, over an article's Filed under, and
   over the footer. Do not use it for anything else. */
.dateline {
  background: color-mix(in srgb, var(--ink) 3.5%, var(--paper));
  border-top: 2px solid var(--accent-2);
  border-bottom: 1px solid var(--rule);
  font-family: var(--face-ui);
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-muted);
}
.dateline__edition {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
  padding-block: .5rem;
}
.dateline__edition > * { white-space: nowrap; }

.dateline__state {
  display: flex; flex-wrap: wrap;
  gap: 0 var(--space-3);
  padding-block: .5rem;
  border-top: 1px solid var(--rule);
}
.dateline__item { display: flex; align-items: baseline; gap: .45rem; }
.dateline__item + .dateline__item { position: relative; padding-left: var(--space-3); }
.dateline__item + .dateline__item::before {
  content: ""; position: absolute; left: 0; top: .1em; bottom: .1em;
  border-left: 1px solid var(--rule);
}
.dateline__key { color: var(--ink-muted); }
.dateline__value { color: var(--ink); font-weight: 600; letter-spacing: .06em; }
.dateline__value a { color: inherit; text-decoration: none; }
.dateline__value a:hover { color: var(--accent); }

/* Standing correction note: only present for seven days after one is filed. */
.standing-note {
  padding-block: .5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--face-ui);
  font-size: var(--step--2);
  letter-spacing: .04em;
  text-transform: none;
  color: var(--ink-muted);
}
.standing-note__flag {
  text-transform: uppercase; letter-spacing: .16em; color: var(--accent); font-weight: 600;
}

/* ----------------------------------------------------------- section nav */
.sections { border-bottom: 1px solid var(--accent-2); }
.sections__list {
  display: flex; gap: clamp(1rem, 2.4vw, 2.25rem);
  list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none;
}
.sections__list::-webkit-scrollbar { display: none; }
.sections__list a {
  display: block; padding-block: .7rem;
  font-family: var(--face-ui); font-size: var(--step--1); font-weight: 600;
  text-transform: uppercase; letter-spacing: .11em; white-space: nowrap;
  color: var(--section, var(--ink)); text-decoration: none;
  transition: color var(--hover) linear;
}
.sections__list a:hover { color: var(--ink); }
/* Where you are is structural, so it is navy — and the only underline in the nav. */
.sections__list a[aria-current="page"] {
  color: var(--section, var(--accent-2));
  box-shadow: inset 0 -2px 0 var(--section, var(--accent-2));
}

/* =============================================================== layout */
main { padding-block: var(--space-5) var(--space-6); display: block; }

/* The grid. Twelve columns on desktop, one on a phone. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-5);
}
.col-lead { grid-column: span 8; }
.col-side { grid-column: span 4; }
.col-full { grid-column: 1 / -1; }
.col-half { grid-column: span 6; }
.col-third { grid-column: span 4; }

/* ========================================================== front page */
.front__lead { border-right: 1px solid var(--rule); padding-right: var(--gutter); }

.lead__title {
  font-size: var(--step-lead);
  font-weight: 900;
  line-height: var(--lh-tight);
  letter-spacing: -.024em;
  margin-bottom: var(--space-2);
}
.lead__title a { color: inherit; text-decoration: none; }
.lead__title a:hover { color: var(--section, var(--accent)); }
.lead__standfirst {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: var(--space-2);
}
.lead__figure { margin: var(--space-3) 0 0; }
.lead__figure figcaption,
.article__figure figcaption {
  font-family: var(--face-ui);
  font-size: var(--step--2);
  color: var(--ink-muted);
  padding-top: .5rem;
  line-height: 1.45;
}

/* The column of seconds: one third the lead, and it should look it. */
.column__item { padding-block: var(--space-3); border-top: 1px solid var(--rule); }
.column__item:first-child { padding-top: 0; border-top: 0; }
.column__title {
  font-size: var(--step-2);
  line-height: 1.18;
  margin-bottom: var(--space-1);
}
.column__title a { color: inherit; text-decoration: none; }
.column__title a:hover { color: var(--section, var(--accent)); }

/* ======================================================== entries
   Below the fold every story is one line: headline, section, timestamp. */
.entries { list-style: none; margin: 0; padding: 0; }
.entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--space-3);
  padding-block: .7rem;
  border-top: 1px solid var(--rule);
}
.entry:first-child { border-top: 0; }
.entry__meta { display: flex; align-items: baseline; gap: var(--space-2); }
.entry__title {
  font-family: var(--face-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--hover) linear;
}
.entry__title:hover { color: var(--section, var(--accent)); }
.entry__section {
  font-family: var(--face-ui); font-size: var(--step--2);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--section, var(--accent)); text-decoration: none; white-space: nowrap;
}
.entry__section:hover { color: var(--ink); }
.entry__time {
  font-family: var(--face-ui); font-size: var(--step--2);
  color: var(--ink-muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* A block heading: small caps, a hairline, nothing else. */
.blockhead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--face-ui);
  font-size: var(--step--2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--ink);
  padding-bottom: .5rem;
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--section, var(--accent-2));
}
.blockhead a { color: inherit; text-decoration: none; }
.blockhead a:hover { color: var(--section, var(--accent)); }
.blockhead__aside {
  font-weight: 400; letter-spacing: .1em; color: var(--ink-muted);
}

/* ============================================================== article */
.article { max-width: var(--measure); margin-inline: auto; }
.article__title {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.02em;
  margin-bottom: var(--space-2);
}
.article__standfirst {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
}
/* Byline and timestamp sit above the headline, in small sans. */
.article__byline {
  font-family: var(--face-ui);
  font-size: var(--step--1);
  color: var(--ink-muted);
  margin: 0 0 var(--space-2);
}
.article__byline b { color: var(--ink); font-weight: 600; }
.article__figure { margin: 0 0 var(--space-4); }

/* ---- prose ---- */
.prose { font-size: var(--step-0); line-height: var(--lh-body); }
.prose > p { margin: 0 0 1.2em; }
.prose > p:first-of-type::first-letter {
  float: left;
  font-family: var(--face-display);
  font-weight: 900;
  font-size: 3.9em;
  line-height: .8;
  margin: .04em .08em -.04em 0;
  color: var(--section, var(--accent-2));
}
.prose--tight > p:first-of-type::first-letter { float: none; font-size: 1em; margin: 0; }

.prose h2 { font-size: var(--step-2); margin: 1.9em 0 .5em; }
.prose h3 { font-size: var(--step-1); margin: 1.6em 0 .4em; }
.prose h2 + p, .prose h3 + p { margin-top: 0; }
.prose a { color: var(--section, var(--accent)); }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.prose li { margin-bottom: .35em; }
.prose hr { border-top: 1px solid var(--rule); margin-block: var(--space-4); }
.prose img { margin-block: var(--space-3); }
.prose figcaption { font-family: var(--face-ui); font-size: var(--step--2); color: var(--ink-muted); }
.prose blockquote {
  margin: var(--space-3) 0 var(--space-3) var(--space-3);
  color: var(--ink-soft);
  font-style: italic;
}
.prose blockquote p:last-child { margin-bottom: 0; }

/* Pull-quote: large serif, no marks, no rules, no float. */
.prose .pullquote {
  margin: var(--space-4) 0;
  font-family: var(--face-display);
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--section, var(--accent-2));
  text-wrap: balance;
}

.prose .inline-cite {
  font-family: var(--face-ui); font-size: .78em; font-style: normal;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted);
}
.prose table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; font-size: var(--step--1); }
.prose th, .prose td { padding: .5rem .7rem .5rem 0; border-bottom: 1px solid var(--rule); text-align: left; }
.prose thead th {
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--face-ui); font-size: var(--step--2);
  text-transform: uppercase; letter-spacing: .12em; font-weight: 600;
}
.prose pre { overflow-x: auto; border-left: 1px solid var(--rule); padding-left: var(--space-2); }
.prose code { font-size: .88em; }
.prose .footnote { font-size: var(--step--1); color: var(--ink-muted); border-top: 1px solid var(--rule); margin-top: var(--space-4); }
.prose mark { background: var(--selection); color: inherit; }

/* ---- article footer: filed under, corrections, tools ---- */
.article__foot { max-width: var(--measure); margin: var(--space-5) auto 0; }

.filed { border-top: 2px solid var(--accent-2); padding-top: var(--space-2); }
.article__correction {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rule);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.article__correction .label { color: var(--accent); }

.article__tools {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 0 var(--space-3);
  font-family: var(--face-ui); font-size: var(--step--1);
}
.article__tools [data-copied="1"] { color: var(--ink-muted); }

/* ========================================================== page heads */
.pagehead { padding-bottom: var(--space-3); margin-bottom: var(--space-4); border-bottom: 2px solid var(--section, var(--accent-2)); }
.pagehead__title { font-size: var(--step-4); font-weight: 900; letter-spacing: -.02em; }
/* Only on a section page: the title is the section's name, so it takes the ink. */
[data-section] > .pagehead .pagehead__title { color: var(--section); }
.pagehead__blurb { font-size: var(--step-1); color: var(--ink-soft); max-width: 60ch; margin: var(--space-2) 0 0; }
.pagehead__meta { font-family: var(--face-ui); font-size: var(--step--1); color: var(--ink-muted); margin: var(--space-2) 0 0; }

/* The first story on a section page is set larger than the rest. */
.section-lead { padding-bottom: var(--space-4); margin-bottom: var(--space-3); border-bottom: 1px solid var(--rule); }
.section-lead__title { font-size: var(--step-4); font-weight: 900; line-height: 1.08; letter-spacing: -.02em; margin-bottom: var(--space-2); }
.section-lead__title a { color: inherit; text-decoration: none; }
.section-lead__title a:hover { color: var(--section, var(--accent)); }
.section-lead__standfirst { font-size: var(--step-1); color: var(--ink-soft); max-width: 58ch; margin-bottom: var(--space-2); }

/* ============================================================== notices */
.note {
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
  padding-block: var(--space-2);
  margin-bottom: var(--space-4);
  font-family: var(--face-ui);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.note b, .note strong { color: var(--ink); }

.messages { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.messages__item {
  font-family: var(--face-ui); font-size: var(--step--1);
  padding-block: .5rem; border-bottom: 1px solid var(--rule);
}

/* =========================================================== corrections */
.corrections { list-style: none; margin-inline: auto; padding: 0; max-width: var(--measure); }
.corrections__item { padding-block: var(--space-3); border-top: 1px solid var(--rule); }
.corrections__item:first-child { border-top: 0; padding-top: 0; }
.corrections__subject { font-size: var(--step-1); margin-bottom: var(--space-1); }
.corrections__subject a { color: inherit; text-decoration: none; }
.corrections__subject a:hover { color: var(--accent); }
.corrections__text { margin: var(--space-1) 0 0; }

/* ============================================================== masthead pg */
.staff { list-style: none; margin: 0; padding: 0; }
.staff__item { padding-block: var(--space-3); border-top: 1px solid var(--rule); }
.staff__item:first-child { border-top: 0; }
.staff__name { font-size: var(--step-2); margin-bottom: var(--space-1); }
.staff__bio { max-width: var(--measure); color: var(--ink-soft); }
.staff__bio p:last-child { margin-bottom: 0; }

.colophon { max-width: var(--measure); }
.colophon p { margin-bottom: 1em; }
.colophon dl { margin: 0; }
.colophon dt { font-family: var(--face-ui); font-size: var(--step--2); text-transform: uppercase; letter-spacing: .14em; color: var(--accent); margin-top: var(--space-3); }
.colophon dd { margin: .2rem 0 0; }

/* =============================================================== search */
.searchform { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.searchform input[type="search"], .searchform select {
  font-family: var(--face-ui); font-size: var(--step-0);
  color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--rule-strong);
  padding: .4rem 0; min-width: 0;
}
.searchform input[type="search"] { flex: 1 1 20rem; }
.searchform select { flex: 0 1 12rem; }
.searchform input[type="search"]:focus, .searchform select:focus { outline: 0; border-bottom-color: var(--accent); }
.searchhit { font-size: var(--step--1); color: var(--ink-muted); margin: .2rem 0 0; }
.searchhit mark { background: var(--selection); }

/* =========================================================== pagination */
.pagination {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-4); padding-top: var(--space-2);
  border-top: 1px solid var(--rule-strong);
  font-family: var(--face-ui); font-size: var(--step--1);
}
.pagination a { text-decoration: none; }
.pagination a:hover { text-decoration: underline; }
.pagination span { color: var(--ink-muted); }

/* ========================================================== empty/error */
.empty { color: var(--ink-muted); font-style: italic; padding-block: var(--space-4); }
.errorpage { max-width: var(--measure); margin-inline: auto; padding-block: var(--space-4); }
.errorpage__title { font-size: var(--step-4); font-weight: 900; letter-spacing: -.02em; margin-bottom: var(--space-2); }
.errorpage__lede { font-size: var(--step-1); color: var(--ink-soft); }

/* =============================================================== footer */
.footer {
  border-top: 2px solid var(--accent-2);
  margin-top: var(--space-6);
  padding-block: var(--space-4) var(--space-4);
  font-family: var(--face-ui);
  font-size: var(--step--1);
  color: var(--ink-muted);
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-3);
}
.footer__about { grid-column: span 4; }
.footer__col { grid-column: span 2; }
.footer__nameplate { font-family: var(--face-display); font-size: var(--step-2); font-weight: 900; color: var(--ink); margin: 0 0 var(--space-1); }
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: .3rem; }
.footer__list a { color: var(--section, var(--ink-muted)); text-decoration: none; }
.footer__list a:hover { color: var(--accent); }
.footer__baseline {
  display: flex; flex-wrap: wrap; gap: 0 var(--space-3);
  margin-top: var(--space-4); padding-top: var(--space-2);
  border-top: 1px solid var(--rule);
  font-size: var(--step--2); color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: .1em;
}

/* =========================================================== responsive */
@media (max-width: 62rem) {
  .col-lead, .col-side, .col-half, .col-third { grid-column: 1 / -1; }
  .front__lead { border-right: 0; padding-right: 0; padding-bottom: var(--space-4); border-bottom: 1px solid var(--rule-strong); }
  .footer__about, .footer__col { grid-column: span 6; }
}

@media (max-width: 40rem) {
  :root { --step-lead: clamp(2.1rem, 10vw, 2.9rem); }
  .entry { grid-template-columns: minmax(0, 1fr); row-gap: .2rem; }
  .footer__about, .footer__col { grid-column: 1 / -1; }
  .prose > p:first-of-type::first-letter { font-size: 3.2em; }
}

/* ================================================================ print */
@media print {
  .masthead__utility, .sections, .footer, .article__tools, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  a { color: #000; text-decoration: none; }
  .article, .article__foot, .prose { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}


/* =========================================================== elections
   Tabulation, breakdowns and polls. Same rules as the rest of the paper:
   no boxes, no fills, hairlines and type only. Numbers are tabular so
   columns of figures line up, and every table scrolls inside itself
   rather than pushing the page sideways on a phone. */

.keyfigures, .round__figures, .methodology__figures {
  display: flex; flex-wrap: wrap; gap: 0 var(--space-4);
  margin: var(--space-3) 0 0; padding: 0;
  font-family: var(--face-ui); font-size: var(--step--1);
}
.keyfigures > div, .round__figures > div, .methodology__figures > div { margin-bottom: var(--space-2); }
.keyfigures dt, .round__figures dt, .methodology__figures dt {
  font-size: var(--step--2); text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-muted); margin: 0;
}
.keyfigures dd, .round__figures dd, .methodology__figures dd {
  margin: .15rem 0 0; font-size: var(--step-1);
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.methodology__figures dd { font-size: var(--step--1); }

/* ---- the result ---- */
.results { list-style: none; margin: 0; padding: 0; counter-reset: seat; }
.results__row {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  gap: var(--space-3); align-items: baseline;
  padding-block: var(--space-2); border-top: 1px solid var(--rule);
}
.results__row:first-child { border-top: 0; }
.results__order {
  font-family: var(--face-mono); font-size: var(--step--1); color: var(--ink-muted);
}
.results__name { font-family: var(--face-display); font-size: var(--step-2); font-weight: 700; line-height: 1.2; }
.results__party {
  display: block; font-family: var(--face-ui); font-size: var(--step--2);
  text-transform: uppercase; letter-spacing: .14em; color: var(--section, var(--accent));
  font-weight: 600; margin-top: .15rem;
}
.results__when { font-family: var(--face-ui); font-size: var(--step--1); color: var(--ink-muted); text-align: right; }

/* ---- the audit trail ---- */
.explainer {
  max-width: var(--measure); margin-bottom: var(--space-4);
  border-left: 2px solid var(--section, var(--accent-2)); padding-left: var(--space-3);
  color: var(--ink-soft);
}
.explainer p { margin-bottom: 0; }

.rounds { list-style: none; margin: 0; padding: 0; counter-reset: round; }
.round { border-top: 1px solid var(--rule); }
.round:first-child { border-top: 0; }
.round--descent .round__head { color: var(--ink-muted); }

.round__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3);
  padding-block: var(--space-2); cursor: pointer;
  font-family: var(--face-ui); font-size: var(--step--1);
  list-style: none;
}
.round__head::-webkit-details-marker { display: none; }
.round__head::before {
  content: "+"; font-family: var(--face-mono); color: var(--ink-muted); width: 1ch;
}
details[open] > .round__head::before { content: "\2212"; }
.round__no {
  font-size: var(--step--2); text-transform: uppercase; letter-spacing: .14em;
  color: var(--section, var(--accent)); font-weight: 600;
}
.round__threshold { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.round__outcome { margin-left: auto; color: var(--ink); }
.round__outcome b { font-weight: 600; }

.round__note {
  max-width: var(--measure); margin: 0 0 var(--space-3) 2ch;
  color: var(--ink-soft);
}
.round__tie { margin: var(--space-2) 0 var(--space-3) 2ch; font-family: var(--face-ui); font-size: var(--step--1); color: var(--ink-muted); }
.round__figures { margin-left: 2ch; padding-bottom: var(--space-3); }

/* ---- tables of figures ---- */
.tabtable, .scoregrid {
  width: 100%; border-collapse: collapse; margin: 0 0 var(--space-3) 2ch;
  font-family: var(--face-ui); font-size: var(--step--1);
}
.tabtable th, .tabtable td, .scoregrid th, .scoregrid td {
  padding: .4rem .7rem .4rem 0; text-align: left; border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
.tabtable thead th, .scoregrid thead th {
  font-size: var(--step--2); text-transform: uppercase; letter-spacing: .12em;
  font-weight: 600; color: var(--ink-muted); border-bottom: 1px solid var(--rule-strong);
}
.tabtable .num, .scoregrid .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabtable tbody th { font-weight: 400; }
.tabtable__row--elected th, .tabtable__row--elected td { color: var(--ink); font-weight: 600; }
.tabtable__flag {
  font-size: var(--step--2); text-transform: uppercase; letter-spacing: .14em;
  color: var(--section, var(--accent)); margin-left: .5rem; font-weight: 600;
}

/* ---- distributions ---- */
.distributions {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  margin-top: var(--space-3);
}
.dist { margin: 0; }
.dist__name {
  font-family: var(--face-ui); font-size: var(--step--1); color: var(--ink);
  padding-bottom: .35rem; border-bottom: 1px solid var(--rule); margin-bottom: .5rem;
}
.dist__mean { display: block; font-size: var(--step--2); color: var(--ink-muted); }
.dist__bars { display: flex; align-items: flex-end; gap: .3rem; height: 4.5rem; }
.dist__bar {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  height: 100%; font-family: var(--face-ui); font-size: var(--step--2); color: var(--ink-muted);
}
.dist__bar::before {
  content: ""; display: block; width: 100%; height: var(--h, 0%);
  background: var(--section, var(--accent)); opacity: .85; min-height: 1px;
}
.dist__count { order: -1; }
.dist__score { padding-top: .2rem; border-top: 1px solid var(--rule); width: 100%; text-align: center; }

/* ---- turnout trend ---- */
.trend { display: flex; align-items: flex-end; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-2); }
.trend__col { margin: 0; flex: 0 0 auto; text-align: center; }
.trend__bars { display: flex; align-items: flex-end; gap: .25rem; height: 7rem; }
.trend__bar {
  width: 1.1rem; height: var(--h, 0%); min-height: 2px;
  display: flex; align-items: flex-start; justify-content: center;
}
.trend__bar span {
  font-family: var(--face-ui); font-size: var(--step--2); color: var(--ink-muted);
  transform: translateY(-1.2em);
}
.trend__bar--turnout { background: var(--section, var(--accent)); opacity: .85; }
.trend__bar--seats { background: var(--accent-2); opacity: .55; }
.trend figcaption {
  font-family: var(--face-ui); font-size: var(--step--2); padding-top: .4rem;
  border-top: 1px solid var(--rule); margin-top: .3rem;
}
.trend figcaption a { color: var(--ink-muted); text-decoration: none; }
.trend figcaption a:hover { color: var(--accent); }

/* ---- ranked lists ---- */
.ranklist { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.ranklist li {
  display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline;
  padding-block: .45rem; border-top: 1px solid var(--rule);
}
.ranklist li:first-child { border-top: 0; }
.ranklist__num { font-family: var(--face-ui); font-size: var(--step--1); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ---- the register, reused for elections and the accuracy record ---- */
.register { list-style: none; margin: 0; padding: 0; }
.register__row {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 12rem;
  column-gap: var(--space-3); align-items: baseline;
  padding-block: var(--space-2); border-top: 1px solid var(--rule);
}
.register__row:first-child { border-top: 0; }
.register__id { font-family: var(--face-mono); font-size: var(--step--1); color: var(--ink-muted); white-space: nowrap; }
.register__title { font-family: var(--face-display); font-size: var(--step-1); font-weight: 700; line-height: 1.25; }
.register__title a { color: inherit; text-decoration: none; }
.register__title a:hover { color: var(--section, var(--accent)); }
.register__note { font-family: var(--face-ui); font-size: var(--step--1); color: var(--ink-muted); margin: .25rem 0 0; max-width: 60ch; }
.register__note a { color: var(--section, var(--accent)); text-decoration: none; }
.register__note a:hover { text-decoration: underline; }
.register__status { font-family: var(--face-ui); font-size: var(--step--1); color: var(--ink-soft); display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }

.dot {
  flex: none; width: .45rem; height: .45rem; border-radius: 50%;
  border: 1px solid var(--section, var(--accent)); transform: translateY(-.15em);
}
.dot--live { background: var(--section, var(--accent)); }
.dot--closed { border-color: var(--ink-muted); }

/* ---- polls ---- */
.methodology {
  max-width: var(--measure); margin: var(--space-4) 0;
  border-top: 2px solid var(--accent-2); border-bottom: 1px solid var(--rule);
  padding-block: var(--space-2) var(--space-3);
  font-size: var(--step--1); color: var(--ink-soft);
}
.methodology p { margin-bottom: .7em; }
.methodology p:last-child { margin-bottom: 0; }
.methodology__disclosure { color: var(--ink); }

.pollq { border: 0; margin: 0 0 var(--space-5); padding: 0; }
.pollq__legend {
  font-family: var(--face-display); font-size: var(--step-2); font-weight: 700;
  padding: 0 0 .3rem; margin-bottom: .3rem; border-bottom: 1px solid var(--rule-strong); width: 100%;
}
.scoregrid tbody th { font-family: var(--face-text); font-size: var(--step-0); font-weight: 400; }
.scoregrid__cell { display: block; cursor: pointer; padding: .3rem .1rem; }
.scoregrid__cell input { position: absolute; opacity: 0; width: 0; height: 0; }
.scoregrid__cell span {
  display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem;
  border: 1px solid var(--rule-strong); font-family: var(--face-ui); font-size: var(--step--1);
  color: var(--ink-muted); transition: color var(--hover) linear, border-color var(--hover) linear;
}
.scoregrid__cell:hover span { border-color: var(--section, var(--accent)); color: var(--ink); }
.scoregrid__cell input:checked + span {
  border-color: var(--section, var(--accent)); color: var(--paper);
  background: var(--section, var(--accent));
}
.scoregrid__cell input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.choicelist { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.choicelist li { padding-block: .4rem; border-top: 1px solid var(--rule); }
.choicelist li:first-child { border-top: 0; }
.choicelist label { display: flex; gap: .6rem; align-items: baseline; cursor: pointer; }

.countdown {
  font-family: var(--face-display); font-size: var(--step-4); font-weight: 900;
  font-variant-numeric: tabular-nums; color: var(--section, var(--accent-2));
  margin-bottom: var(--space-2);
}

.field { margin-bottom: var(--space-3); font-family: var(--face-ui); font-size: var(--step--1); }
.field label { display: block; color: var(--ink-muted); font-size: var(--step--2); text-transform: uppercase; letter-spacing: .12em; margin-bottom: .2rem; }
.field input[type="text"], .field input[type="file"], .field select {
  font: inherit; font-size: var(--step-0); color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--rule-strong); padding: .35rem 0; width: 100%; max-width: 26rem;
}
.field--inline { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-2); align-items: baseline; }
.field--inline label { margin: 0; text-transform: none; letter-spacing: 0; font-size: var(--step--1); }
.field__help { display: block; color: var(--ink-muted); font-size: var(--step--2); margin-top: .2rem; }
.field__error { display: block; color: var(--accent); font-size: var(--step--2); margin-top: .2rem; }

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

@media (max-width: 62rem) {
  .register__row { grid-template-columns: 6.5rem minmax(0, 1fr); row-gap: .35rem; }
  .register__status { grid-column: 2; }
}

@media (max-width: 40rem) {
  /* Figure tables scroll inside themselves rather than widening the page. */
  .tabtable, .scoregrid { display: block; overflow-x: auto; margin-left: 0; white-space: nowrap; }
  .round__note, .round__figures, .round__tie { margin-left: 0; }
  .round__outcome { margin-left: 0; flex-basis: 100%; }
  .results__row { grid-template-columns: 2rem minmax(0, 1fr); }
  .results__when { grid-column: 2; text-align: left; }
  .register__row { grid-template-columns: minmax(0, 1fr); }
  .register__status { grid-column: 1; }
  .distributions { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
}

/* The published ballot matrix: wide by nature, so it scrolls in its own box. */
.tabtable-scroll { overflow-x: auto; margin-bottom: var(--space-3); }
.tabtable-scroll .tabtable { margin-left: 0; white-space: nowrap; }
.tabtable-scroll thead th { position: sticky; top: 0; background: var(--paper); }
.tabtable-scroll tbody th { color: var(--ink-muted); font-family: var(--face-mono); }
.ballotcell--zero { color: var(--ink-muted); opacity: .45; }

/* ====================================================== count replay
   The one animated thing on the site, and it only moves when asked. Starts
   paused, is fully operable by keyboard, and shows nothing the printed trail
   below it does not already say. */
.replay { margin-bottom: var(--space-5); }

.replay__controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  padding-block: var(--space-2);
  font-family: var(--face-ui); font-size: var(--step--1);
  border-bottom: 1px solid var(--rule);
}
.replay__speed, .replay__scrub {
  display: flex; align-items: center; gap: .5rem; color: var(--ink-muted);
}
.replay__speed input, .replay__scrub input { accent-color: var(--section, var(--accent)); }
.replay__scrub { flex: 1 1 10rem; }
.replay__scrub input { flex: 1; min-width: 6rem; }
.replay__speed output { font-variant-numeric: tabular-nums; color: var(--ink); min-width: 2.6em; }

.replay__figures {
  display: flex; flex-wrap: wrap; gap: 0 var(--space-4);
  margin: var(--space-3) 0 0; font-family: var(--face-ui); font-size: var(--step--1);
}
.replay__figures dt {
  font-size: var(--step--2); text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-muted); margin: 0;
}
.replay__figures dd { margin: .1rem 0 0; font-variant-numeric: tabular-nums; color: var(--ink); }

.replay__caption {
  max-width: var(--measure); margin: var(--space-2) 0 var(--space-3);
  color: var(--ink-soft); min-height: 3.2em;
}

.replay__panes { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.replay__pane { margin: 0; }
.replay__pane figcaption {
  font-family: var(--face-ui); font-size: var(--step--2); color: var(--ink-muted);
  padding-bottom: .4rem; margin-bottom: var(--space-2); border-bottom: 1px solid var(--rule);
}

/* --- support against the quota --- */
.replay__row {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 4rem;
  gap: var(--space-2); align-items: center; padding-block: .2rem;
  font-family: var(--face-ui); font-size: var(--step--2);
}
.replay__name { color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.replay__track {
  position: relative; height: .85rem; border-bottom: 1px solid var(--rule);
}
/* The quota line: the bar has to reach here to pay for a seat. */
.replay__track::after {
  content: ""; position: absolute; left: 100%; top: -.1rem; bottom: -.1rem;
  border-left: 1px solid var(--rule-strong);
}
.replay__fill {
  position: absolute; left: 0; top: .1rem; bottom: .1rem;
  background: var(--ink-muted); opacity: .55;
  transition: width 420ms cubic-bezier(.22, .61, .36, 1);
}
.replay__row.is-qualified .replay__fill { background: var(--section, var(--accent)); opacity: .8; }
.replay__row.is-elected .replay__fill { background: var(--section, var(--accent)); opacity: 1; }
.replay__row.is-elected .replay__name { color: var(--ink); font-weight: 600; }
.replay__value { text-align: right; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* --- the electorate's remaining voting power --- */
.replay__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(.85rem, 1fr));
  gap: 3px; align-content: start;
}
.replay__ballot {
  position: relative; aspect-ratio: 1; border: 1px solid var(--rule);
  overflow: hidden;
}
.replay__ballot::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--w, 100%);
  background: var(--section, var(--accent)); opacity: .55;
  transition: height 420ms cubic-bezier(.22, .61, .36, 1);
}
.replay__ballot.is-charged { border-color: var(--section, var(--accent)); }
.replay__ballot.is-charged::after { opacity: .95; }
.replay__ballot.is-spent { border-style: dashed; }

@media (max-width: 62rem) {
  .replay__panes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .replay__row { grid-template-columns: 5.5rem minmax(0, 1fr) 3.2rem; }
  .replay__grid { grid-template-columns: repeat(auto-fill, minmax(.7rem, 1fr)); }
}

/* Someone who has asked for less motion gets the diagram without the tweening;
   the player still steps, it just does not glide. */
@media (prefers-reduced-motion: reduce) {
  .replay__fill, .replay__ballot::after { transition: none !important; }
}

/* ================================================ system comparison
   Columns of the same election counted different ways. Ruled, not boxed:
   the vertical hairline is what separates one system from the next. */
.systems {
  display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-top: var(--space-3);
}
.system {
  padding: 0 var(--space-3) var(--space-3);
  border-left: 1px solid var(--rule);
}
.system:first-child { border-left: 0; padding-left: 0; }
.system--actual .label { color: var(--section, var(--accent)); }
.system__split {
  font-family: var(--face-ui); font-size: var(--step--1); color: var(--ink-muted);
  margin: 0 0 var(--space-2);
}
.system__split b { color: var(--ink); font-variant-numeric: tabular-nums; }
.system__delta {
  font-family: var(--face-ui); font-size: var(--step--1); color: var(--ink-soft);
  margin: 0 0 var(--space-2); padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
}
.system__delta b { color: var(--section, var(--accent)); }
.system__winners {
  list-style: none; margin: 0 0 var(--space-2); padding: 0;
  font-family: var(--face-ui); font-size: var(--step--1); color: var(--ink-muted);
  counter-reset: seat;
}
.system__winners li { padding-block: .12rem; counter-increment: seat; }
.system__winners li::before {
  content: counter(seat) ". "; color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.system__winners li.is-gained { color: var(--ink); font-weight: 600; }
.system__winners li.is-gained::after {
  content: " new"; font-size: var(--step--2); text-transform: uppercase;
  letter-spacing: .12em; color: var(--section, var(--accent)); font-weight: 600;
}
.system__lost, .system__note {
  font-family: var(--face-ui); font-size: var(--step--2); color: var(--ink-muted);
  margin: 0 0 .5rem; line-height: 1.5;
}
@media (max-width: 40rem) {
  .system { border-left: 0; border-top: 1px solid var(--rule); padding: var(--space-3) 0; }
  .system:first-child { border-top: 0; padding-top: 0; }
}

/* While the bar is being lowered nothing is measured, so the chart holds the
   last position and says so by receding. */
.replay.is-carried .replay__bars { opacity: .45; }
.replay.is-carried .replay__pane:first-child figcaption::after {
  content: " — unchanged while the bar drops";
  color: var(--section, var(--accent));
}