/*
 * The Boating Accident: a newspaper inside a 16-bit game.
 * Colors, type, and spacing come from tokens.css; see .design/site-redesign/DESIGN_BRIEF.md.
 */

/* Fonts: self-hosted, all OFL (licenses in /fonts). */

@font-face {
  font-family: "Pixelify Sans";
  src: url("/fonts/pixelify-sans-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Pixelify Sans";
  src: url("/fonts/pixelify-sans-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Silkscreen";
  src: url("/fonts/silkscreen-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Serif";
  src: url("/fonts/ibm-plex-serif-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Serif";
  src: url("/fonts/ibm-plex-serif-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Serif";
  src: url("/fonts/ibm-plex-serif-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* Base */

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

html {
  /* Pixelify Sans's "fi" ligature turns "Bitfinex" into "BitAnex". */
  font-variant-ligatures: none;
}

body {
  margin: 0;
  padding: var(--space-9) var(--space-6) var(--space-10);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  /* The desk: a 4px checker dither. */
  background-color: var(--color-desk);
  background-image: conic-gradient(
    var(--color-desk-dither) 25%,
    transparent 0 50%,
    var(--color-desk-dither) 0 75%,
    transparent 0
  );
  background-size: 4px 4px;
}

a {
  color: var(--color-text-link);
  text-underline-offset: 0.15em;
}

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

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

.skip-link {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 1;
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-family-label);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Labels: Silkscreen, uppercase, never under 12px. */
.ears,
.dateline,
.sections,
.kicker,
.caption,
.side__heading,
.tally__label,
.tally__sub,
.story__meta,
.byline,
.facts__heading,
.facts__list dt,
.sources-box__heading,
.developments__heading,
.development__date,
.desk-head__note,
.fold,
.more__button,
.back,
.colophon,
.brief small {
  font-family: var(--font-family-label);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  text-transform: uppercase;
}

/* Sprites: inline SVG, scaled by whole numbers where it matters. */

.sprite {
  display: inline-flex;
  flex: none;
}

.sprite svg {
  display: block;
  width: var(--sprite-icon-sm);
  height: var(--sprite-icon-sm);
}

.sprite--2x svg {
  width: var(--sprite-icon);
  height: var(--sprite-icon);
}

.sprite--logo svg {
  width: var(--sprite-logo);
  height: calc(var(--sprite-logo) * 3 / 4);
}

.sprite--coin svg {
  width: 32px;
  height: 32px;
}

.sprite .px-outline {
  fill: var(--px-outline);
}

/* Ink boxes are dark in both editions, so outlines there are always steel. */
.tally,
.facts,
.sections__link[aria-current="page"],
.more__button {
  --px-outline: var(--px-steel);
}

/* The sheet on the desk */

.desk {
  max-width: var(--max-width-page);
  margin-inline: auto;
  /* A hard pixel shadow that follows the stepped corners. */
  filter: drop-shadow(8px 8px 0 var(--color-desk-shadow));
}

.sheet {
  padding: var(--space-8) 36px 36px;
  background: var(--color-bg-primary);
  box-shadow: inset 0 0 0 2px var(--color-sheet-edge);
  clip-path: polygon(
    0 var(--notch),
    var(--notch) var(--notch),
    var(--notch) 0,
    calc(100% - var(--notch)) 0,
    calc(100% - var(--notch)) var(--notch),
    100% var(--notch),
    100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%,
    var(--notch) 100%,
    var(--notch) calc(100% - var(--notch)),
    0 calc(100% - var(--notch))
  );
}

/* Masthead */

.ears {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  margin: 0;
  color: var(--color-text-secondary);
}

.flag {
  display: flex;
  justify-content: center;
  margin: var(--space-5) 0 var(--space-3);
}

.flag__link {
  display: flex;
  align-items: center;
  gap: 20px;
  color: inherit;
  text-decoration: none;
}

.flag__title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.masthead--compact .flag {
  margin-top: 0;
}

.masthead--compact .flag__link {
  gap: 14px;
}

.masthead--compact .flag__title {
  font-size: 2.5rem;
  letter-spacing: 1px;
}

.masthead--compact .sprite--logo svg {
  width: 64px;
  height: 48px;
}

.dateline {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  margin: var(--space-5) 0 0;
  padding: var(--space-3) 0;
  border-top: var(--border-width-heavy) solid var(--color-border-primary);
  border-bottom: var(--border-width-rule) solid var(--color-border-primary);
}

.dateline a {
  color: var(--color-text-primary);
}

/* Section nav */

.sections {
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 10px 0;
  border-bottom: var(--border-width-rule) solid var(--color-border-primary);
}

.sections__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-3);
  color: var(--color-text-primary);
  text-decoration: none;
  white-space: nowrap;
}

.sections__link:hover {
  text-decoration: underline;
}

.sections__link[aria-current="page"] {
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

/* Near misses sit apart from the loss sections. */
.sections__link--apart {
  position: relative;
  margin-left: var(--space-5);
}

.sections__link--apart::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -18px;
  border-left: var(--border-width-rule) solid var(--color-border-secondary);
}

/* Section fronts */

.desk-head {
  padding: var(--space-6) 0;
  border-bottom: var(--border-width-rule) solid var(--color-border-primary);
  text-align: center;
}

.desk-head__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin: 0;
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.desk-head__note {
  margin: var(--space-3) 0 0;
  color: var(--color-text-secondary);
}

/* Shared story parts */

.kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--color-text-loss);
}

/* Near misses lost nothing, so they don't get the loss red. */
.kicker--near-miss {
  color: var(--color-text-secondary);
}

.kicker a {
  color: inherit;
}

.lead__headline a,
.story__headline a {
  color: inherit;
  text-decoration: none;
}

.lead__headline a:hover,
.story__headline a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.art {
  margin: 0;
}

.art img,
.art svg {
  display: block;
  width: 100%;
  height: auto;
  border: var(--border-width-heavy) solid var(--color-border-primary);
  image-rendering: pixelated;
}

/* Under the lead's art, flush against it, with the caption below. */
.art .outcome-bar,
.art .lead__amount {
  margin: var(--space-2) 0 0;
}

.caption {
  margin: var(--space-2) 0 var(--space-5);
  color: var(--color-text-tertiary);
}

.quip {
  margin: 0 0 var(--space-4);
  color: var(--color-text-secondary);
  font-style: italic;
}

.sources-line {
  margin: 0;
  color: var(--color-text-secondary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  overflow-wrap: anywhere;
}

/* Front page: lead story and sidebar */

.front {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--column-gap);
  padding: 22px 0;
  border-bottom: var(--border-width-rule) solid var(--color-border-primary);
}

/* A section with only a lead and briefs: the colophon draws the closing rule. */
.front:last-child {
  border-bottom: 0;
}

.lead__headline {
  margin: var(--space-3) 0 var(--space-5);
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.02;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.lead__amount {
  margin: 0 0 var(--space-4);
  color: var(--color-text-loss);
  font-family: var(--font-family-display);
  font-size: 1.75rem;
  line-height: var(--line-height-tight);
}

.lead__summary {
  margin: 0 0 var(--space-4);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.side {
  padding-left: var(--space-7);
  border-left: var(--border-width-rule) solid var(--color-border-primary);
}

.side__heading {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-width-rule) solid var(--color-border-primary);
  font-size: 0.8125rem;
}

/* The running total, in an ink box. */
.tally {
  margin-bottom: 18px;
  padding: 14px var(--space-6);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.tally p {
  margin: 0;
}

.tally__label {
  color: var(--color-text-inverse-muted);
}

.tally__figure {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-inverse-coin);
  font-family: var(--font-family-display);
  font-size: 3rem;
  line-height: var(--line-height-tight);
  overflow-wrap: anywhere;
}

.tally__sub a {
  color: inherit;
}

.tally :focus-visible {
  outline-color: var(--color-border-focus-inverse);
}

.briefs {
  margin: 0 0 var(--space-7);
  padding: 0;
  list-style: none;
}

.brief {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px dashed var(--color-border-secondary);
  font-size: var(--font-size-sm);
}

.brief__link {
  color: var(--color-text-primary);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.brief__link:hover {
  text-decoration: underline;
}

.brief small {
  display: block;
  color: var(--color-text-secondary);
}

.brief__amount {
  color: var(--color-text-loss);
  font-family: var(--font-family-display);
  white-space: nowrap;
}

/* The archive: column stories in a newest-first ordered list. */

.columns {
  margin: 0;
  padding: 22px 0 0;
  list-style: none;
  columns: var(--column-count);
  column-gap: var(--column-gap);
  column-rule: 1px solid var(--color-border-secondary);
}

.story {
  margin-bottom: 22px;
  break-inside: avoid;
}

.story__headline {
  margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-family-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  overflow-wrap: anywhere;
}

.story__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
  padding: 3px 0;
  border-top: var(--border-width-hair) solid var(--color-border-primary);
  border-bottom: var(--border-width-hair) solid var(--color-border-primary);
}

.story__amount {
  color: var(--color-text-loss);
}

.story__summary {
  margin: 0 0 var(--space-4);
}

/* "— Page N —": where a loaded page begins. */
.fold {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin: var(--space-2) 0 22px;
  column-span: all;
}

.fold::before,
.fold::after {
  content: "";
  flex: 1;
  border-top: var(--border-width-rule) solid var(--color-border-primary);
}

.more {
  padding: var(--space-7) 0 var(--space-4);
  column-span: all;
  text-align: center;
}

.more__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  text-decoration: none;
  box-shadow: var(--shadow-md);
}

.more__button:hover {
  background: var(--color-accent-primary-hover);
}

.more__button:active {
  background: var(--color-accent-primary-active);
}

/* A bobbing life ring while the next page loads. */
.more__indicator {
  display: none;
}

.htmx-request .more__indicator,
.htmx-request.more__indicator {
  display: inline-flex;
  animation: bob var(--duration-slower) var(--easing-bounce) infinite;
}

@keyframes bob {
  50% {
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .htmx-request .more__indicator,
  .htmx-request.more__indicator {
    animation: none;
  }
}

/* "Updated <date>" in a kicker: news in the last two weeks. */
.kicker__updated {
  color: var(--color-text-link);
}

/* The front page's "Developing" spot: stories Alex brought back, above the columns. */
.developing {
  margin: var(--space-7) 0 0;
}

.developing__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.developing__item {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4) 0;
  border-bottom: 1px dashed var(--color-border-secondary);
}

.developing__link {
  color: var(--color-text-primary);
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.developing__line {
  margin: var(--space-2) 0 0;
}

/* Outcome stamps (slice 013): filled with the outcome's color, lettered in the sheet's, so they
   read in both editions. */
.outcome--loss { --outcome-fill: var(--color-outcome-loss); }
.outcome--warning { --outcome-fill: var(--color-outcome-warning); }
.outcome--success { --outcome-fill: var(--color-outcome-success); }
.outcome--info { --outcome-fill: var(--color-outcome-info); }
.outcome--muted { --outcome-fill: var(--color-outcome-muted); }

.chip,
.outcome-bar,
.facts__outcome {
  background: var(--outcome-fill);
  color: var(--color-outcome-text);
  font-family: var(--font-family-label);
  font-weight: var(--font-weight-normal);
  text-transform: uppercase;
}

/* At the right of a column story's kicker. */
.chip {
  margin-left: auto;
  padding: 0 var(--space-2);
  font-size: var(--font-size-xs);
  line-height: 1.5;
  white-space: nowrap;
}

/* Full width under the lead's art: "TOTAL LOSS · $116M lost". */
.outcome-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
}

/* A strip across the foot of the facts box. */
.facts__outcome {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) -18px -18px;
  padding: var(--space-4) 18px;
  font-size: var(--font-size-sm);
}

@media (forced-colors: active) {
  .chip,
  .outcome-bar,
  .facts__outcome {
    border: 1px solid CanvasText;
  }
}

.stats__near-misses {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--color-text-secondary);
  font-style: italic;
}

.empty {
  padding: var(--space-9) 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  font-style: italic;
  text-align: center;
}

/* Incident article */

.article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
  gap: 36px;
  padding-top: 28px;
}

.article .kicker {
  gap: var(--space-4);
}

.article__headline {
  margin: 10px 0 var(--space-5);
  font-family: var(--font-family-display);
  font-size: 3.5rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  overflow-wrap: anywhere;
}

.article__deck {
  margin: 0 0 var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  font-style: italic;
  line-height: 1.45;
}

.byline {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0 0 18px;
  padding: 5px 0;
  border-top: var(--border-width-hair) solid var(--color-border-primary);
  border-bottom: var(--border-width-hair) solid var(--color-border-primary);
}

.article__body p {
  max-width: var(--max-width-content);
  margin: 0 0 14px;
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
}

.article__body--drop-cap p:first-child::first-letter {
  float: left;
  padding: var(--space-2) var(--space-4) 0 0;
  font-family: var(--font-family-display);
  font-size: 4rem;
  font-weight: var(--font-weight-bold);
  line-height: 0.85;
}

/* Developments (slice 014): dated news and printed corrections, newest first. */
.developments {
  margin-top: var(--space-6);
  border-top: var(--border-width-rule) solid var(--color-border-primary);
}

.developments__heading {
  margin: var(--space-4) 0;
  font-size: 0.8125rem;
}

.developments__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.development {
  padding: var(--space-4) 0;
  border-bottom: 1px dashed var(--color-border-secondary);
}

.development__date {
  margin: 0 0 var(--space-2);
  color: var(--color-text-secondary);
}

.development__label {
  color: var(--color-text-loss);
}

.development__text {
  margin: 0;
}

.sources-box {
  margin-top: var(--space-4);
  padding: 14px 18px;
  background: var(--color-bg-secondary);
}

.sources-box__heading {
  margin: 0 0 var(--space-4);
  font-size: 0.8125rem;
}

.sources-box ol {
  margin: 0;
  padding-left: 22px;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.article__logged {
  margin: 14px 0 0;
  color: var(--color-text-secondary);
  font-family: var(--font-family-mono);
  font-size: 0.8125rem;
}

/* The facts box: ink, like the tally. */
.facts {
  margin-bottom: 26px;
  padding: var(--space-6) 18px 18px;
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.facts__heading {
  margin: 0 0 10px;
  color: var(--color-text-inverse-muted);
}

.facts__figure {
  margin: 0 0 14px;
  color: var(--color-text-inverse-loss);
  font-family: var(--font-family-display);
  font-size: 3rem;
  line-height: 1;
  overflow-wrap: anywhere;
}

.facts__list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4) 14px;
  margin: 0;
  font-size: 0.9375rem;
}

.facts__list dt {
  padding-top: var(--space-1);
  color: var(--color-text-inverse-muted);
}

.facts__list dd {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  overflow-wrap: anywhere;
}

.related {
  margin-bottom: 26px;
}

.related .briefs {
  margin-bottom: 0;
}

.back {
  margin: 28px 0 0;
}

.back a {
  color: var(--color-text-primary);
}

/* Shipping Intelligence (stats) */

.section-head {
  padding: var(--space-7) 0 var(--space-6);
  border-bottom: var(--border-width-rule) solid var(--color-border-primary);
  text-align: center;
}

.section-head__title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 3.5rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.section-head__note {
  margin: var(--space-4) 0 0;
  color: var(--color-text-secondary);
  font-style: italic;
}

.stats {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: var(--space-7) 36px;
  padding-top: 28px;
}

.stats .tally {
  grid-row: span 2;
  align-self: start;
  margin: 0;
}

.stats__section .side__heading {
  margin-bottom: 0;
}

/* Fixed columns, so bars in every table start at the same x and share one scale reading. */
.bars {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.9375rem;
}

.bars th,
.bars td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px dashed var(--color-border-secondary);
  font-weight: var(--font-weight-normal);
  text-align: left;
}

.bars__col-label {
  width: 11rem;
}

.bars__col-value {
  width: 10rem;
}

.bars__col-count {
  width: 3rem;
}

.bars__label {
  overflow-wrap: break-word;
}

.bars__label a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: inherit;
}

/* Stepped bars: a pixel notch at the end. */
.bars__bar {
  display: block;
  height: 12px;
  background: var(--color-bar);
  clip-path: polygon(
    0 0,
    calc(100% - 4px) 0,
    calc(100% - 4px) 4px,
    100% 4px,
    100% 8px,
    calc(100% - 4px) 8px,
    calc(100% - 4px) 100%,
    0 100%
  );
}

.bars__value,
.bars__count {
  font-family: var(--font-family-display);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.bars__value {
  color: var(--color-text-loss);
}

.bars__count {
  color: var(--color-text-secondary);
}

/* 404: a correction notice */

.correction {
  max-width: var(--max-width-content);
  margin: var(--space-9) auto;
  padding: var(--space-7) 0 0;
  border-top: var(--border-width-heavy) solid var(--color-border-primary);
}

.correction__headline {
  margin: 0 0 var(--space-6);
  font-family: var(--font-family-display);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.correction__label {
  color: var(--color-text-loss);
}

.correction p {
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
}

/* Footer */

.colophon {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: var(--border-width-rule) solid var(--color-border-primary);
  color: var(--color-text-secondary);
  text-align: center;
}

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

.colophon a {
  color: var(--color-text-primary);
}

/* 720–959px: the sidebar drops below the lead, two columns. */
@media (max-width: 959px) {
  .front {
    grid-template-columns: minmax(0, 1fr);
  }

  .side {
    padding: 22px 0 0;
    border-left: 0;
    border-top: var(--border-width-rule) solid var(--color-border-primary);
  }

  .columns {
    columns: 2;
  }

  .flag__title {
    font-size: 3.25rem;
  }

  /* One row that scrolls; the inline padding keeps the end links' focus rings unclipped. */
  .sections {
    justify-content: flex-start;
    padding-inline: var(--space-2);
    overflow-x: auto;
  }

  .sections {
    gap: var(--space-4);
  }

  .sections__link {
    gap: var(--space-2);
    padding-inline: var(--space-1);
  }

  .sections__link[aria-current="page"] {
    padding-inline: var(--space-3);
  }

  .sections__link--apart {
    margin-left: var(--space-4);
  }

  .sections__link--apart::before {
    left: -10px;
  }

  .sprite--logo svg {
    width: 64px;
    height: 48px;
  }

  /* Flatten the article so the facts box sits right after the art. */
  .article-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .article,
  .article-side {
    display: contents;
  }

  .article > *,
  .article-side > * {
    order: 1;
  }

  .article > .article__body,
  .article > .sources-box,
  .article > .article__logged {
    order: 3;
  }

  .article-side > .facts {
    order: 2;
  }

  .article-side > .related {
    order: 4;
  }

  .article__logged {
    margin-bottom: 28px;
  }

  .stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .stats .tally {
    grid-row: auto;
  }
}

/* Under 720px: the paper goes full-bleed and everything is one column. */
@media (max-width: 719px) {
  body {
    padding: 0;
    background: var(--color-bg-primary);
  }

  .desk {
    filter: none;
  }

  .sheet {
    padding: var(--space-6);
    box-shadow: none;
    clip-path: none;
  }

  .ears,
  .dateline__middle {
    display: none;
  }

  .dateline {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
  }

  .flag {
    margin-top: 0;
  }

  .flag__link,
  .masthead--compact .flag__link {
    gap: 10px;
  }

  .flag__title {
    font-size: 2.125rem;
  }

  .masthead--compact .flag__title {
    font-size: 1.5rem;
  }

  .sprite--logo svg,
  .masthead--compact .sprite--logo svg {
    width: 48px;
    height: 36px;
  }



  /* Flatten so the tally comes first, then the lead, then the briefs. */
  .front {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .side {
    display: contents;
  }

  .tally {
    order: -1;
    margin-bottom: 22px;
  }

  .side__heading {
    margin-top: 22px;
  }

  .lead__headline {
    font-size: var(--font-size-2xl);
  }

  .columns {
    columns: 1;
  }

  .article__headline,
  .section-head__title {
    font-size: 2.25rem;
  }

  .article__deck {
    font-size: var(--font-size-md);
  }

  .byline__desk {
    display: none;
  }

  .correction__headline {
    font-size: var(--font-size-2xl);
  }

  .bars th,
  .bars td {
    padding-inline: var(--space-2);
  }

  .bars__col-label {
    width: 7rem;
  }

  .bars__col-value {
    width: 6.75rem;
  }

  .bars__col-count {
    width: 2rem;
  }
}