/*! Folio design system 1.0.0 (2026-11-07). Licensed to Design Systems Library members, single user. */

/* ---- base ---- */
/* Base: document defaults, zero-specificity resets inside .fo-page, type roles and helpers.
   Newsreader carries reading and headlines; Hanken Grotesk carries the interface. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--fo-nav-h) + var(--fo-space-5));
}

body {
  margin: 0;
  background: var(--fo-paper);
  color: var(--fo-body);
  font-family: var(--fo-font-text);
  font-size: var(--fo-fs-body);
  font-weight: var(--fo-weight-regular);
  line-height: var(--fo-lh-body);
  font-optical-sizing: auto;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Phones: interface text in paragraphs (meta, hints, captions, notes under actions) grows to 16px,
   so no paragraph on a small screen is set below 16px. Labels in spans may stay smaller. */
@media (max-width: 499px) {
  :root {
    --fo-fs-ui: 1rem;
    --fo-fs-meta: 1rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}

.fo-page {
  display: flow-root;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--fo-paper);
}

:where(.fo-page) :where(*, *::before, *::after) {
  box-sizing: border-box;
}

:where(.fo-page) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd, pre, fieldset, legend) {
  margin: 0;
}

:where(.fo-page) :where(fieldset) {
  min-width: 0;
  padding: 0;
  border: 0;
}

:where(.fo-page) :where(h1, h2, h3, h4, h5, h6) {
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-weight: var(--fo-weight-regular);
  line-height: var(--fo-lh-heading);
  text-wrap: balance;
}

:where(.fo-page) :where(h1) {
  font-size: var(--fo-fs-display);
  line-height: var(--fo-lh-display);
  letter-spacing: var(--fo-track-display);
  font-variation-settings: "opsz" var(--fo-opsz-display);
}

:where(.fo-page) :where(h2) {
  font-size: var(--fo-fs-title);
  line-height: var(--fo-lh-title);
  letter-spacing: var(--fo-track-title);
  font-variation-settings: "opsz" var(--fo-opsz-display);
}

:where(.fo-page) :where(h3) {
  font-size: var(--fo-fs-headline);
  font-weight: var(--fo-weight-medium);
}

:where(.fo-page) :where(h4) {
  font-size: var(--fo-fs-subhead);
  font-weight: var(--fo-weight-medium);
}

:where(.fo-page) :where(p, li) {
  text-wrap: pretty;
}

:where(.fo-page) :where(a) {
  color: var(--fo-link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--fo-dur-fast) var(--fo-ease), text-decoration-color var(--fo-dur-fast) var(--fo-ease);
}

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

:where(.fo-page) :where(:focus-visible) {
  outline: 2px solid var(--fo-focus);
  outline-offset: 3px;
}

:where(.fo-page) :where(img, svg, video, canvas) {
  display: block;
  max-width: 100%;
}

:where(.fo-page) :where(a svg, button svg, span svg, li svg, p svg, label svg, summary svg) {
  display: inline-block;
  flex: none;
  vertical-align: middle;
}

:where(.fo-page) :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

:where(.fo-page) :where(strong, b) {
  font-weight: var(--fo-weight-semibold);
}

:where(.fo-page) :where(abbr[title]) {
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}

:where(.fo-page) :where(hr) {
  height: 0;
  margin: 0;
  border: 0;
  border-block-start: var(--fo-line-hair) solid var(--fo-rule);
}

::selection {
  background: var(--fo-accent-soft);
  color: var(--fo-ink);
}

/* Page container: the same edges as the reading grid's page track */
.fo-wrap {
  width: min(var(--fo-page), 100% - 2 * var(--fo-gutter));
  margin-inline: auto;
}

/* Type roles */
.fo-display {
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: var(--fo-fs-display);
  font-weight: var(--fo-weight-regular);
  line-height: var(--fo-lh-display);
  letter-spacing: var(--fo-track-display);
  font-variation-settings: "opsz" var(--fo-opsz-display);
  text-wrap: balance;
}

.fo-title {
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: var(--fo-fs-title);
  font-weight: var(--fo-weight-regular);
  line-height: var(--fo-lh-title);
  letter-spacing: var(--fo-track-title);
  font-variation-settings: "opsz" var(--fo-opsz-display);
  text-wrap: balance;
}

.fo-headline {
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: var(--fo-fs-headline);
  font-weight: var(--fo-weight-medium);
  line-height: var(--fo-lh-heading);
  text-wrap: balance;
}

.fo-subhead {
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: var(--fo-fs-subhead);
  font-weight: var(--fo-weight-medium);
  line-height: var(--fo-lh-heading);
  text-wrap: balance;
}

.fo-lede {
  color: var(--fo-muted);
  font-family: var(--fo-font-text);
  font-size: var(--fo-fs-lede);
  font-style: italic;
  line-height: 1.4;
  text-wrap: pretty;
}

.fo-meta {
  color: var(--fo-muted);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-medium);
  line-height: var(--fo-lh-ui);
}

/* Interface label: Hanken capitals, for badges and table heads, never above a heading */
.fo-caps {
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-small);
  font-weight: var(--fo-weight-semibold);
  letter-spacing: var(--fo-track-caps);
  text-transform: uppercase;
}

/* Editorial label: Newsreader small capitals, for issue numbers and section names */
.fo-smallcaps {
  font-family: var(--fo-font-text);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.05em;
}

.fo-muted {
  color: var(--fo-muted);
}

.fo-num {
  font-variant-numeric: tabular-nums lining-nums;
}

.fo-ui {
  font-family: var(--fo-font-ui);
}

/* Text link with a trailing arrow */
.fo-link {
  display: inline-flex;
  align-items: center;
  gap: var(--fo-space-2);
  color: var(--fo-link);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-ui);
  font-weight: var(--fo-weight-medium);
  text-decoration: none;
}

.fo-link:hover {
  color: var(--fo-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.fo-link svg {
  transition: transform var(--fo-dur-fast) var(--fo-ease);
}

.fo-link:hover svg {
  transform: translateX(3px);
}

[dir="rtl"] .fo-link svg {
  transform: scaleX(-1);
}

[dir="rtl"] .fo-link:hover svg {
  transform: scaleX(-1) translateX(3px);
}

/* Vertical rhythm helper */
.fo-stack > * + * {
  margin-block-start: var(--fo-space-4);
}

.fo-stack--tight > * + * {
  margin-block-start: var(--fo-space-2);
}

.fo-stack--loose > * + * {
  margin-block-start: var(--fo-space-6);
}

/* Visually hidden, still read aloud */
.fo-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.fo-skip {
  position: absolute;
  inset-block-start: var(--fo-space-3);
  inset-inline-start: var(--fo-space-3);
  z-index: 100;
  padding: var(--fo-space-2) var(--fo-space-4);
  background: var(--fo-ink);
  color: var(--fo-paper);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-ui);
  font-weight: var(--fo-weight-medium);
  text-decoration: none;
  transform: translateY(-160%);
}

.fo-skip:focus {
  transform: none;
  color: var(--fo-paper);
}

@media (prefers-reduced-motion: reduce) {
  :where(.fo-page) :where(a),
  .fo-link svg {
    transition: none;
  }
}

/* ---- column ---- */
/* Column: the reading grid. A 66-character text track sits at the center of the page with a wing on
   each side. The start wing (hang) holds numbers, dates and the table of contents; the end wing
   (margin) holds sidenotes, captions and notes. Wings appear at 1100px (margin) and 1280px (hang);
   below that, everything that lives in them drops into the text track.

   Named lines: full, page, hang, text, margin. Direct children sit in the text track by default. */

.fo-column,
.fo-section {
  --fo-note-w: 0px;
  display: grid;
  grid-template-columns:
    [full-start] var(--fo-gutter)
    [page-start hang-start] minmax(0, 1fr)
    [hang-end text-start] minmax(0, var(--fo-measure))
    [text-end margin-start] minmax(0, 1fr)
    [margin-end page-end] var(--fo-gutter)
    [full-end];
  align-content: start;
}

:is(.fo-column, .fo-section, .fo-subgrid) > * {
  grid-column: text;
  min-width: 0;
}

/* Flow: blocks in the text track get 24px between them; wing children and any component with its
   own margin are left alone (zero specificity) */
:where(.fo-column, .fo-section, .fo-subgrid) > :where(:not(.fo-column__margin, .fo-column__hang, .fo-column__full)) ~ :where(:not(.fo-column__margin, .fo-column__hang, .fo-column__full)) {
  margin-block-start: var(--fo-space-5);
}

:where(.fo-column, .fo-section, .fo-subgrid) > :where(.fo-column__page, .fo-column__wide) ~ :where(:not(.fo-column__margin, .fo-column__hang, .fo-column__full)),
:where(.fo-column, .fo-section, .fo-subgrid) > :where(:not(.fo-column__margin, .fo-column__hang, .fo-column__full)) ~ :where(.fo-column__page, .fo-column__wide) {
  margin-block-start: var(--fo-space-7);
}

/* Placement helpers for direct children */
:is(.fo-column, .fo-section, .fo-subgrid) > .fo-column__page {
  grid-column: page;
}

:is(.fo-column, .fo-section, .fo-subgrid) > .fo-column__full {
  grid-column: full;
}

:is(.fo-column, .fo-section, .fo-subgrid) > .fo-column__wide {
  grid-column: text;
}

:is(.fo-column, .fo-section, .fo-subgrid) > :is(.fo-column__margin, .fo-column__hang) {
  grid-column: text;
  margin-block: var(--fo-space-4);
}

/* Subgrid: a child that spans the page track and passes the named lines to its own children */
:is(.fo-column, .fo-section, .fo-subgrid) > .fo-subgrid {
  grid-column: page;
  display: grid;
  grid-template-columns: subgrid;
  align-content: start;
}

/* Margin apparatus: small, quiet text beside the column */
.fo-column__note {
  color: var(--fo-muted);
  font-family: var(--fo-font-text);
  font-size: var(--fo-fs-note);
  line-height: 1.5;
}

.fo-column__note > * + * {
  margin-block-start: var(--fo-space-2);
}

.fo-column__note strong {
  color: var(--fo-ink);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-semibold);
}

/* Sections: a hairline across the page track, then the section's own space */
.fo-section {
  padding-block-end: var(--fo-section-pad);
}

.fo-section::before {
  content: "";
  grid-column: page;
  margin-block-end: var(--fo-section-pad);
  border-block-start: var(--fo-line-hair) solid var(--fo-rule);
}

.fo-section--flush::before {
  border-block-start-color: transparent;
  margin-block-end: var(--fo-space-7);
}

.fo-section--tight {
  padding-block-end: var(--fo-space-7);
}

.fo-section--tight::before {
  margin-block-end: var(--fo-space-7);
}

/* Compact: 32px of space, for reference pages, settings screens and indexes */
.fo-section--compact {
  padding-block-end: var(--fo-space-5);
}

.fo-section--compact::before {
  margin-block-end: var(--fo-space-5);
}

@media (max-width: 699px) {
  .fo-section--compact {
    padding-block-end: var(--fo-space-4);
  }

  .fo-section--compact::before {
    margin-block-end: var(--fo-space-4);
  }
}

/* Heavy rule: a 3px ink rule over a hairline, for the start of a new part of the page */
.fo-section--double::before {
  height: calc(var(--fo-line-heavy) + 3px + var(--fo-line-hair));
  border-block-start: var(--fo-line-heavy) solid var(--fo-ink);
  border-block-end: var(--fo-line-hair) solid var(--fo-ink);
}

/* Tint band: paper-2 across the full width, for one quiet block per page */
.fo-section--tint {
  background: var(--fo-paper-2);
  padding-block-start: var(--fo-section-pad);
}

.fo-section--tint::before {
  display: none;
}

.fo-section--tint + .fo-section::before {
  border-block-start-color: transparent;
}

@media (min-width: 1100px) {
  .fo-column,
  .fo-section {
    --fo-note-w: 17rem;
    grid-template-columns:
      [full-start] var(--fo-gutter)
      [page-start hang-start] 6rem
      [hang-end text-start] var(--fo-measure)
      [text-end margin-start] minmax(0, 1fr)
      [margin-end page-end] var(--fo-gutter)
      [full-end];
  }

  :is(.fo-column, .fo-section, .fo-subgrid) > .fo-column__wide {
    grid-column: text-start / margin-end;
  }

  :is(.fo-column, .fo-section, .fo-subgrid) > .fo-column__margin {
    grid-column: margin;
    align-self: start;
    max-width: var(--fo-note-w);
    margin-block: 0;
    margin-inline-start: var(--fo-margin-gap);
  }
}

@media (min-width: 1280px) {
  .fo-column,
  .fo-section {
    grid-template-columns:
      [full-start] minmax(var(--fo-gutter), 1fr)
      [page-start hang-start] var(--fo-wing)
      [hang-end text-start] var(--fo-measure)
      [text-end margin-start] var(--fo-wing)
      [margin-end page-end] minmax(var(--fo-gutter), 1fr)
      [full-end];
  }

  :is(.fo-column, .fo-section, .fo-subgrid) > .fo-column__hang {
    grid-column: hang;
    align-self: start;
    max-width: var(--fo-note-w);
    margin-block: 0;
    margin-inline-end: var(--fo-margin-gap);
    justify-self: end;
    text-align: end;
  }

  .fo-column__hang.fo-column__sticky {
    position: sticky;
    inset-block-start: calc(var(--fo-nav-h) + var(--fo-space-6));
  }
}

/* ---- buttons ---- */
/* Buttons: 2px corners, flat, Hanken Grotesk labels. One oxblood primary per view. */

.fo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fo-space-2);
  min-height: 44px;
  padding: 10px 20px;
  border: var(--fo-line-hair) solid var(--fo-ink);
  border-radius: var(--fo-radius-btn);
  background: transparent;
  color: var(--fo-ink);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-ui);
  font-weight: var(--fo-weight-medium);
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--fo-dur-fast) var(--fo-ease),
    border-color var(--fo-dur-fast) var(--fo-ease),
    color var(--fo-dur-fast) var(--fo-ease);
}

.fo-btn:hover {
  background: var(--fo-ink);
  color: var(--fo-paper);
  text-decoration: none;
}

.fo-btn:focus-visible {
  outline: 2px solid var(--fo-focus);
  outline-offset: 3px;
}

.fo-btn:active {
  transform: translateY(1px);
}

.fo-btn--primary {
  border-color: var(--fo-btn);
  background: var(--fo-btn);
  color: var(--fo-btn-ink);
}

.fo-btn--primary:hover {
  border-color: var(--fo-btn-hover);
  background: var(--fo-btn-hover);
  color: var(--fo-btn-ink);
}

/* Secondary is the default look: a ruled outline in ink */
.fo-btn--secondary {
  background: transparent;
}

/* Text button: an underlined label for tertiary actions in toolbars and cards */
.fo-btn--text {
  min-height: 44px;
  padding-inline: var(--fo-space-1);
  border-color: transparent;
  color: var(--fo-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.fo-btn--text:hover {
  background: transparent;
  color: var(--fo-ink);
  text-decoration-thickness: 2px;
}

.fo-btn--danger {
  border-color: var(--fo-danger);
  color: var(--fo-danger);
}

.fo-btn--danger:hover {
  background: var(--fo-danger);
  border-color: var(--fo-danger);
  color: var(--fo-surface);
}

.fo-btn--sm {
  min-height: 36px;
  padding: 6px 14px;
  font-size: var(--fo-fs-meta);
}

.fo-btn--lg {
  min-height: 52px;
  padding: 12px 28px;
  font-size: 1rem;
}

.fo-btn--block {
  display: flex;
  width: 100%;
}

.fo-btn--icon {
  width: 44px;
  padding: 0;
}

.fo-btn--icon.fo-btn--sm {
  width: 36px;
}

.fo-btn--bare {
  border-color: transparent;
}

.fo-btn--bare:hover {
  border-color: var(--fo-rule);
  background: var(--fo-paper-2);
  color: var(--fo-ink);
}

.fo-btn[aria-disabled="true"],
.fo-btn:disabled {
  border-color: var(--fo-rule);
  background: var(--fo-paper-2);
  color: var(--fo-muted);
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading: keep the label for the accessible name, show a spinner beside it */
.fo-btn[aria-busy="true"] {
  cursor: progress;
  pointer-events: none;
}

.fo-btn__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: fo-spin 800ms linear infinite;
}

@keyframes fo-spin {
  to {
    transform: rotate(1turn);
  }
}

@media (pointer: coarse) {
  .fo-btn--sm {
    min-height: 44px;
  }

  .fo-btn--icon.fo-btn--sm {
    width: 44px;
  }
}

/* Action group: one primary and at most one secondary */
.fo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fo-space-3);
}

.fo-actions--center {
  justify-content: center;
}

.fo-actions__note {
  flex-basis: 100%;
  color: var(--fo-muted);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
}

.fo-actions--center .fo-actions__note {
  text-align: center;
}

@media (max-width: 479px) {
  .fo-actions--stack-sm {
    flex-direction: column;
    align-items: stretch;
  }

  .fo-actions--stack-sm .fo-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fo-btn {
    transition: none;
  }

  .fo-btn:active {
    transform: none;
  }

  .fo-btn__spinner {
    animation-duration: 2400ms;
  }
}

/* ---- badges ---- */
/* Badges: small Hanken capitals in a hairline box. They label a thing; they never sit above a heading. */

.fo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 8px;
  border: var(--fo-line-hair) solid var(--fo-rule-strong);
  border-radius: var(--fo-radius-tag);
  background: transparent;
  color: var(--fo-ink);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-small);
  font-weight: var(--fo-weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--fo-track-caps);
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.fo-badge svg {
  width: 14px;
  height: 14px;
}

.fo-badge--accent {
  border-color: var(--fo-accent-soft);
  background: var(--fo-accent-soft);
  color: var(--fo-link);
}

.fo-badge--ok {
  border-color: var(--fo-ok-soft);
  background: var(--fo-ok-soft);
  color: var(--fo-ok);
}

.fo-badge--warn {
  border-color: var(--fo-warn-soft);
  background: var(--fo-warn-soft);
  color: var(--fo-warn);
}

.fo-badge--danger {
  border-color: var(--fo-danger-soft);
  background: var(--fo-danger-soft);
  color: var(--fo-danger);
}

.fo-badge--solid {
  border-color: var(--fo-ink);
  background: var(--fo-ink);
  color: var(--fo-paper);
}

/* Tag: a lowercase topic link in Newsreader italic, for article topics */
.fo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fo-space-2) var(--fo-space-4);
  padding: 0;
  list-style: none;
}

.fo-tag {
  color: var(--fo-link);
  font-family: var(--fo-font-text);
  font-size: var(--fo-fs-note);
  font-style: italic;
  text-decoration: none;
}

.fo-tag::before {
  content: "#";
  margin-inline-end: 1px;
  color: var(--fo-muted);
  font-style: normal;
}

a.fo-tag:hover {
  color: var(--fo-ink);
  text-decoration: underline;
}

@media (pointer: coarse) {
  a.fo-tag {
    display: inline-block;
    padding-block: 10px;
  }
}

/* ---- avatar ---- */
/* Avatar: square initials set in Newsreader italic, like a bookplate. No photos. */

.fo-avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: var(--fo-line-hair) solid var(--fo-rule-strong);
  border-radius: var(--fo-radius-figure);
  background: var(--fo-paper-2);
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: 1rem;
  font-style: italic;
  font-weight: var(--fo-weight-medium);
  line-height: 1;
  letter-spacing: 0.02em;
  user-select: none;
}

.fo-avatar--sm {
  width: 32px;
  height: 32px;
  font-size: 0.875rem;
}

.fo-avatar--lg {
  width: 64px;
  height: 64px;
  font-size: 1.5rem;
}

.fo-avatar--xl {
  width: 112px;
  height: 112px;
  font-size: 2.75rem;
  font-variation-settings: "opsz" var(--fo-opsz-display);
}

/* Accent: the oxblood plate, for the editor or the publication itself */
.fo-avatar--accent {
  border-color: var(--fo-accent);
  background: var(--fo-accent);
  color: var(--fo-accent-ink);
}

/* Mark: an abstract geometric plate instead of initials (svg inside, aria-hidden) */
.fo-avatar--mark svg {
  width: 60%;
  height: 60%;
}

.fo-avatars {
  display: flex;
  padding: 0;
  list-style: none;
}

.fo-avatars > li + li {
  margin-inline-start: -6px;
}

.fo-avatars .fo-avatar {
  box-shadow: 0 0 0 2px var(--fo-paper);
}

/* ---- nav ---- */
/* Nav: the running head. A slim sticky bar with the wordmark, the current issue number, section
   links (nouns), the theme toggle and one primary action. Collapses into a disclosure under 900px. */

.fo-nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  border-block-end: var(--fo-line-hair) solid var(--fo-rule);
  background: var(--fo-paper);
}

.fo-nav--static {
  position: relative;
  z-index: 1;
}

.fo-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--fo-space-5);
  min-height: var(--fo-nav-h);
}

.fo-nav__brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--fo-space-3);
  color: var(--fo-ink);
  text-decoration: none;
  white-space: nowrap;
}

.fo-nav__brand:hover {
  color: var(--fo-ink);
  text-decoration: none;
}

.fo-nav__name {
  font-family: var(--fo-font-display);
  font-size: 1.3125rem;
  font-weight: var(--fo-weight-medium);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 36;
}

.fo-nav__name em {
  font-style: italic;
  font-weight: var(--fo-weight-regular);
}

.fo-nav__issue {
  color: var(--fo-link);
  text-decoration: none;
  font-family: var(--fo-font-text);
  font-size: 1.0625rem;
  font-variant-caps: all-small-caps;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.fo-nav__menu {
  margin-inline-start: auto;
}

.fo-nav__links {
  display: flex;
  align-items: center;
  gap: var(--fo-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fo-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: var(--fo-space-3);
  color: var(--fo-ink);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-ui);
  font-weight: var(--fo-weight-medium);
  text-decoration: none;
}

.fo-nav__link:hover {
  color: var(--fo-link);
  text-decoration: none;
}

.fo-nav__link[aria-current="page"] {
  color: var(--fo-link);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

.fo-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--fo-space-2);
}

.fo-nav__toggle {
  display: none;
}

/* Theme toggle: moon in light, sun in dark */
.fo-theme-toggle__sun {
  display: none;
}

.fo-theme-toggle__moon,
.fo-theme-toggle__sun {
  line-height: 0;
}

:root[data-theme="dark"] .fo-theme-toggle__sun {
  display: inline;
}

:root[data-theme="dark"] .fo-theme-toggle__moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fo-theme-toggle__sun {
    display: inline;
  }

  :root:not([data-theme="light"]) .fo-theme-toggle__moon {
    display: none;
  }
}

/* Accent switcher (kitchen sink and settings screens) */
.fo-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fo-space-2);
  padding: 0;
  list-style: none;
}

.fo-swatch {
  display: inline-flex;
  align-items: center;
  gap: var(--fo-space-2);
  min-height: 36px;
  padding: 4px 12px 4px 6px;
  border: var(--fo-line-hair) solid var(--fo-rule-strong);
  border-radius: var(--fo-radius-control);
  background: transparent;
  color: var(--fo-ink);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-medium);
  cursor: pointer;
}

.fo-swatch::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: var(--fo-radius-control);
  background: var(--fo-swatch, var(--fo-accent));
}

.fo-swatch--oxblood {
  --fo-swatch: var(--fo-swatch-oxblood);
}

.fo-swatch--ink-blue {
  --fo-swatch: var(--fo-swatch-ink-blue);
}

.fo-swatch--forest {
  --fo-swatch: var(--fo-swatch-forest);
}

.fo-swatch[aria-pressed="true"] {
  border-color: var(--fo-ink);
  box-shadow: inset 0 0 0 1px var(--fo-ink);
}

@media (max-width: 1099px) {
  .fo-nav__issue {
    display: none;
  }
}

@media (max-width: 899px) {
  .fo-nav.is-ready .fo-nav__toggle {
    display: inline-flex;
  }

  .fo-nav.is-ready .fo-nav__menu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    display: none;
    margin: 0;
    padding: var(--fo-space-3) var(--fo-gutter) var(--fo-space-6);
    border-block-end: var(--fo-line-hair) solid var(--fo-rule);
    background: var(--fo-paper);
  }

  .fo-nav.is-ready.is-open .fo-nav__menu {
    display: block;
  }

  .fo-nav.is-ready .fo-nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .fo-nav.is-ready .fo-nav__links > li + li {
    border-block-start: var(--fo-line-hair) solid var(--fo-rule);
  }

  .fo-nav.is-ready .fo-nav__link {
    min-height: 56px;
    padding-inline: 0;
    font-family: var(--fo-font-display);
    font-size: 1.5rem;
    font-weight: var(--fo-weight-regular);
  }

  .fo-nav:not(.is-ready) .fo-nav__inner {
    flex-wrap: wrap;
    padding-block: var(--fo-space-2);
  }

  .fo-nav:not(.is-ready) .fo-nav__menu {
    order: 3;
    width: 100%;
    margin: 0;
  }

  .fo-nav:not(.is-ready) .fo-nav__links {
    flex-wrap: wrap;
  }
}

@media (max-width: 899px) {
  .fo-nav__brand {
    margin-inline-end: auto;
  }
}

@media (max-width: 479px) {
  .fo-nav__inner {
    gap: var(--fo-space-2);
  }

  .fo-nav__actions {
    gap: 2px;
  }

  .fo-nav__name {
    font-size: 1.0625rem;
    letter-spacing: -0.015em;
  }

  .fo-nav__cta {
    margin-inline: 2px;
    padding-inline: 10px;
    font-size: 0.875rem;
  }
}

@media (max-width: 374px) {
  .fo-nav__name {
    font-size: 1rem;
  }

  .fo-nav__cta {
    margin-inline: 0;
    padding-inline: 8px;
  }
}

/* Very narrow phones: the page's own calls to action carry Subscribe */
@media (max-width: 359px) {
  .fo-nav__cta {
    display: none;
  }
}

@media (pointer: coarse) {
  .fo-nav__link {
    min-height: 44px;
  }
}

/* ---- announcement-bar ---- */
/* Announcement bar: one line above the running head, for a new issue or letter. Dismissable. */

.fo-announce {
  border-block-end: var(--fo-line-hair) solid var(--fo-rule);
  background: var(--fo-paper-2);
  color: var(--fo-ink);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
  line-height: var(--fo-lh-ui);
}

.fo-announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fo-space-3);
  min-height: 44px;
  padding-block: var(--fo-space-2);
}

.fo-announce__text {
  margin: 0;
  text-align: center;
}

.fo-announce__label {
  margin-inline-end: var(--fo-space-2);
  color: var(--fo-link);
  font-family: var(--fo-font-text);
  font-size: 1rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.05em;
}

.fo-announce__text a {
  color: var(--fo-ink);
  font-weight: var(--fo-weight-semibold);
  text-decoration-color: var(--fo-accent);
}

.fo-announce__text a:hover {
  color: var(--fo-link);
}

.fo-announce__close {
  flex: none;
  margin-inline-start: auto;
}

.fo-announce__inner:has(.fo-announce__close) .fo-announce__text {
  margin-inline-start: auto;
}

.fo-announce--accent {
  border-block-end-color: var(--fo-accent-soft);
  background: var(--fo-accent-soft);
}

.fo-announce[hidden] {
  display: none;
}

@media (max-width: 639px) {
  .fo-announce__inner {
    justify-content: space-between;
  }

  .fo-announce__text {
    text-align: start;
  }

  .fo-announce__inner:has(.fo-announce__close) .fo-announce__text {
    margin-inline-start: 0;
  }
}

/* ---- breadcrumbs ---- */
/* Breadcrumbs: issue, section, page. Hanken at 14px with a chevron between steps. */

.fo-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fo-space-1) var(--fo-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--fo-muted);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-medium);
  line-height: var(--fo-lh-ui);
}

.fo-crumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--fo-space-2);
}

.fo-crumbs__item + .fo-crumbs__item::before {
  content: "";
  width: 6px;
  height: 6px;
  border-block-start: 1.5px solid var(--fo-rule-strong);
  border-inline-end: 1.5px solid var(--fo-rule-strong);
  transform: rotate(45deg);
}

[dir="rtl"] .fo-crumbs__item + .fo-crumbs__item::before {
  transform: rotate(-45deg);
}

.fo-crumbs__item a {
  color: var(--fo-muted);
  text-decoration: none;
}

.fo-crumbs__item a:hover {
  color: var(--fo-link);
  text-decoration: underline;
}

.fo-crumbs__item [aria-current="page"] {
  color: var(--fo-ink);
}

@media (pointer: coarse) {
  .fo-crumbs__item a {
    display: inline-block;
    padding-block: 12px;
  }
}

/* ---- sidebar-nav ---- */
/* Sidebar nav: a ruled list of sections or years, with an oxblood rule on the current item.
   Lives in the hang at 1280px and wider; above the content on smaller screens. */

.fo-sidenav {
  font-family: var(--fo-font-ui);
}

.fo-sidenav__group + .fo-sidenav__group {
  margin-block-start: var(--fo-space-6);
}

.fo-sidenav__title {
  margin: 0 0 var(--fo-space-2);
  color: var(--fo-muted);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-semibold);
  letter-spacing: var(--fo-track-caps);
  text-transform: uppercase;
}

.fo-sidenav__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: var(--fo-line-hair) solid var(--fo-rule);
}

.fo-sidenav__list > li {
  border-block-end: var(--fo-line-hair) solid var(--fo-rule);
}

.fo-sidenav__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fo-space-3);
  min-height: 40px;
  padding: 9px var(--fo-space-3);
  border-inline-start: 2px solid transparent;
  color: var(--fo-ink);
  font-size: var(--fo-fs-ui);
  font-weight: var(--fo-weight-medium);
  text-decoration: none;
  text-align: start;
}

.fo-sidenav__link:hover {
  background: var(--fo-paper-2);
  color: var(--fo-ink);
  text-decoration: none;
}

.fo-sidenav__link[aria-current="page"],
.fo-sidenav__link[aria-current="true"] {
  border-inline-start-color: var(--fo-accent);
  color: var(--fo-link);
}

.fo-sidenav__count {
  color: var(--fo-muted);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-regular);
  font-variant-numeric: tabular-nums;
}

/* Horizontal under 1280px when it holds only a few items */
@media (max-width: 1279px) {
  .fo-sidenav--scroll .fo-sidenav__list {
    display: flex;
    overflow-x: auto;
    border-block-end: var(--fo-line-hair) solid var(--fo-rule);
    scrollbar-width: thin;
  }

  .fo-sidenav--scroll .fo-sidenav__list > li {
    flex: none;
    border-block-end: 0;
  }

  .fo-sidenav--scroll .fo-sidenav__link {
    border-inline-start: 0;
    border-block-end: 2px solid transparent;
  }

  .fo-sidenav--scroll .fo-sidenav__link[aria-current="page"],
  .fo-sidenav--scroll .fo-sidenav__link[aria-current="true"] {
    border-block-end-color: var(--fo-accent);
  }
}

@media (pointer: coarse) {
  .fo-sidenav__link {
    min-height: 44px;
  }
}

/* ---- masthead ---- */
/* Masthead: the nameplate. Double rules, the publication name in Newsreader at display optical size,
   then the dateline (issue number and date in small capitals) and the section row between hairlines.
   Home, issue and letter pages only. */

.fo-masthead {
  padding-block: var(--fo-space-6) var(--fo-space-5);
}

.fo-masthead__frame {
  border-block-start: var(--fo-line-heavy) solid var(--fo-ink);
  padding-block-start: 3px;
}

.fo-masthead__frame > :first-child {
  border-block-start: var(--fo-line-hair) solid var(--fo-ink);
}

.fo-masthead__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fo-space-1) var(--fo-space-5);
  padding-block: 10px;
  border-block-start: var(--fo-line-hair) solid var(--fo-ink);
  color: var(--fo-ink);
  font-family: var(--fo-font-text);
  font-size: 1.0625rem;
  font-variant-caps: all-small-caps;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

.fo-masthead__meta > p {
  margin: 0;
}

.fo-masthead__issue {
  color: var(--fo-link);
}

.fo-masthead__name {
  margin: 0;
  padding-block: var(--fo-space-5) var(--fo-space-2);
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: clamp(2.25rem, 0.45rem + 8vw, 7.5rem);
  font-weight: var(--fo-weight-medium);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" var(--fo-opsz-display);
  text-align: center;
  text-wrap: balance;
}

.fo-masthead__name a {
  color: inherit;
  text-decoration: none;
}

.fo-masthead__motto {
  margin: 0;
  padding-block-end: var(--fo-space-4);
  color: var(--fo-muted);
  font-family: var(--fo-font-text);
  font-size: var(--fo-fs-note);
  font-style: italic;
  text-align: center;
}

.fo-masthead__sections {
  border-block-start: var(--fo-line-hair) solid var(--fo-ink);
}

/* The closing double rule: a hairline, 3px of paper, a heavy rule */
.fo-masthead__rule {
  height: calc(var(--fo-line-hair) + 3px + var(--fo-line-heavy));
  border-block-start: var(--fo-line-hair) solid var(--fo-ink);
  border-block-end: var(--fo-line-heavy) solid var(--fo-ink);
}

.fo-masthead__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--fo-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fo-masthead__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--fo-space-3);
  color: var(--fo-ink);
  font-family: var(--fo-font-text);
  font-size: 1.125rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.07em;
  text-decoration: none;
}

.fo-masthead__list a:hover,
.fo-masthead__list a[aria-current="page"] {
  color: var(--fo-link);
}

.fo-masthead__list a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

/* Compact: for issue and letter pages, where the page has its own h1 */
.fo-masthead--compact .fo-masthead__name {
  font-size: clamp(2rem, 1rem + 4vw, 3.75rem);
  padding-block: var(--fo-space-4) var(--fo-space-3);
}

.fo-masthead--compact .fo-masthead__motto {
  display: none;
}

@media (max-width: 639px) {
  .fo-masthead__meta {
    justify-content: center;
    text-align: center;
  }

  .fo-masthead__date {
    width: 100%;
    order: 2;
  }

  .fo-masthead__list {
    padding-block: var(--fo-space-1);
  }

  .fo-masthead__list a {
    min-height: 36px;
    padding-inline: var(--fo-space-2);
    font-size: 1.0625rem;
  }
}

@media (pointer: coarse) {
  .fo-masthead__list a {
    min-height: 44px;
  }
}

/* ---- hero ---- */
/* Hero: the lead story. A sentence for a headline, an italic dek, a byline and one coded figure.
   Default: stacked in the reading column. --split: text beside the figure across the page track.
   --center: centered, for a letter or subscription landing page. */

.fo-hero__body > * + * {
  margin-block-start: var(--fo-space-5);
}

.fo-hero__title {
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: var(--fo-fs-display);
  font-weight: var(--fo-weight-regular);
  line-height: var(--fo-lh-display);
  letter-spacing: var(--fo-track-display);
  font-variation-settings: "opsz" var(--fo-opsz-display);
  text-wrap: balance;
}

.fo-hero__title a {
  color: inherit;
  text-decoration: none;
}

.fo-hero__title a:hover {
  color: var(--fo-link);
}

.fo-hero__dek {
  color: var(--fo-muted);
  font-family: var(--fo-font-text);
  font-size: var(--fo-fs-lede);
  font-style: italic;
  line-height: 1.4;
  text-wrap: pretty;
}

.fo-hero__byline {
  color: var(--fo-muted);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-medium);
}

.fo-hero__byline a {
  color: var(--fo-ink);
  text-decoration: none;
}

.fo-hero__byline a:hover {
  color: var(--fo-link);
  text-decoration: underline;
}

.fo-hero__body > .fo-actions {
  margin-block-start: var(--fo-space-6);
}

.fo-hero__figure {
  margin-block-start: var(--fo-space-7);
}

/* Split: headline column and figure side by side across the page track */
.fo-hero--split {
  display: grid;
  gap: var(--fo-space-7);
  align-items: center;
}

.fo-hero--split .fo-hero__figure {
  margin: 0;
}

@media (min-width: 900px) {
  .fo-hero--split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--fo-space-8);
  }

  .fo-hero--split .fo-hero__body {
    padding-inline-end: var(--fo-space-6);
    border-inline-end: var(--fo-line-hair) solid var(--fo-rule);
  }
}

/* Center: a short landing hero */
.fo-hero--center {
  text-align: center;
}

.fo-hero--center .fo-hero__body {
  margin-inline: auto;
}

.fo-hero--center .fo-actions {
  justify-content: center;
}

/* ---- section-header ---- */
/* Section header: a standing head. The h2 sits in the reading column, an optional numeral hangs in
   the start wing (inside the heading, never above it), and an optional note or link sits in the margin. */

.fo-head {
  margin-block-end: var(--fo-space-5);
}

.fo-head__title {
  position: relative;
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: var(--fo-fs-title);
  font-weight: var(--fo-weight-regular);
  line-height: var(--fo-lh-title);
  letter-spacing: var(--fo-track-title);
  font-variation-settings: "opsz" var(--fo-opsz-display);
  text-wrap: balance;
}

.fo-head__num {
  margin-inline-end: 0.35em;
  color: var(--fo-accent);
  font-family: var(--fo-font-text);
  font-style: italic;
  font-variant-numeric: lining-nums;
  letter-spacing: 0;
}

.fo-head__dek {
  margin-block-start: var(--fo-space-3);
  color: var(--fo-muted);
  font-family: var(--fo-font-text);
  font-size: var(--fo-fs-lede);
  font-style: italic;
  line-height: 1.4;
  text-wrap: pretty;
}

.fo-head__aside {
  color: var(--fo-muted);
  font-family: var(--fo-font-text);
  font-size: var(--fo-fs-note);
  line-height: 1.5;
}

.fo-head__aside .fo-link {
  margin-block-start: var(--fo-space-2);
}

.fo-head__aside code {
  color: var(--fo-ink);
  font-family: var(--fo-font-mono);
  font-size: 0.875rem;
}

/* Compact: a headline-size standing head for dense pages */
.fo-head--compact {
  margin-block-end: 0;
}

.fo-head__aside > * + * {
  margin-block-start: var(--fo-space-2);
}

.fo-head--compact .fo-head__title {
  font-size: var(--fo-fs-headline);
  letter-spacing: 0;
}

.fo-head--compact .fo-head__dek {
  margin-block-start: var(--fo-space-1);
  font-size: var(--fo-fs-note);
  line-height: 1.5;
}

.fo-head--compact .fo-head__aside {
  padding-block-start: 0.35em;
}

/* Compact heads put the aside on the title's line below 1100px, where there is no margin */
@media (max-width: 1099px) {
  .fo-head.fo-head--compact {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--fo-space-1) var(--fo-space-4);
  }

  .fo-head.fo-head--compact > .fo-head__aside {
    margin: 0;
  }
}

/* Inline: the numeral stays before the title, for headers inside cards, panels and two-up layouts */
.fo-head--inline .fo-head__aside {
  margin-block-start: var(--fo-space-1);
}

/* Centered variant for closing sections */
.fo-head--center {
  text-align: center;
}

.fo-head--center .fo-head__title,
.fo-head--center .fo-head__dek {
  margin-inline: auto;
}

@media (min-width: 1100px) {
  .fo-head > .fo-head__aside {
    grid-row: 1 / span 2;
    padding-block-start: 0.55em;
  }
}

@media (min-width: 1280px) {
  .fo-head__num {
    position: absolute;
    inset-inline-end: calc(100% + var(--fo-margin-gap));
    inset-block-start: 0;
    margin: 0;
    font-size: 1em;
  }

  .fo-head--center .fo-head__num,
  .fo-head--inline .fo-head__num {
    position: static;
    margin-inline-end: 0.35em;
  }
}

/* ---- features ---- */
/* Features: what a reader or member gets, set as newspaper columns divided by vertical rules.
   Each item: an oxblood numeral or icon, a Newsreader title, a short paragraph. No boxes. */

.fo-features {
  --fo-cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--fo-cols), minmax(0, 1fr));
  padding: 0;
  list-style: none;
  counter-reset: fo-feature;
}

.fo-features--2 {
  --fo-cols: 2;
}

.fo-features--4 {
  --fo-cols: 4;
}

.fo-feature {
  padding-inline: var(--fo-space-6);
  counter-increment: fo-feature;
}

.fo-feature:nth-child(n + 1) {
  border-inline-start: var(--fo-line-hair) solid var(--fo-rule);
}

.fo-features > .fo-feature:nth-child(3n + 1) {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.fo-features > .fo-feature:nth-child(3n) {
  padding-inline-end: 0;
}

.fo-features > .fo-feature:nth-child(n + 4) {
  margin-block-start: var(--fo-space-7);
}

.fo-features--2 > .fo-feature:nth-child(n) {
  padding-inline: var(--fo-space-6);
  border-inline-start: var(--fo-line-hair) solid var(--fo-rule);
  margin-block-start: 0;
}

.fo-features--2 > .fo-feature:nth-child(2n + 1) {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.fo-features--2 > .fo-feature:nth-child(2n) {
  padding-inline-end: 0;
}

.fo-features--2 > .fo-feature:nth-child(n + 3) {
  margin-block-start: var(--fo-space-7);
}

.fo-features--4 > .fo-feature:nth-child(n) {
  padding-inline: var(--fo-space-5);
  border-inline-start: var(--fo-line-hair) solid var(--fo-rule);
  margin-block-start: 0;
}

.fo-features--4 > .fo-feature:nth-child(4n + 1) {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.fo-features--4 > .fo-feature:nth-child(4n) {
  padding-inline-end: 0;
}

.fo-features--4 > .fo-feature:nth-child(n + 5) {
  margin-block-start: var(--fo-space-7);
}

.fo-feature__mark {
  display: block;
  margin-block-end: var(--fo-space-4);
  color: var(--fo-accent);
  line-height: 0;
}

.fo-features--numbered .fo-feature__mark::before {
  content: counter(fo-feature, upper-roman) ".";
  color: var(--fo-accent);
  font-family: var(--fo-font-text);
  font-size: 1.375rem;
  font-style: italic;
  line-height: 1;
}

.fo-feature__title {
  margin: 0 0 var(--fo-space-2);
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: var(--fo-fs-subhead);
  font-weight: var(--fo-weight-medium);
  line-height: var(--fo-lh-heading);
  text-wrap: balance;
}

.fo-feature__text {
  color: var(--fo-body);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.fo-feature__text + .fo-link {
  margin-block-start: var(--fo-space-3);
}

/* Check list: what something includes (accent square) or leaves out (muted dash) */
.fo-checks {
  padding: 0;
  list-style: none;
}

.fo-checks > li {
  position: relative;
  padding-inline-start: 1.6em;
  line-height: 1.5;
}

.fo-checks > li + li {
  margin-block-start: var(--fo-space-2);
}

.fo-checks > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.1em;
  inset-block-start: 0.52em;
  width: 0.45em;
  height: 0.45em;
  background: var(--fo-accent);
}

.fo-checks--no > li {
  color: var(--fo-muted);
}

.fo-checks--no > li::before {
  inset-block-start: 0.7em;
  width: 0.7em;
  height: 1.5px;
  background: var(--fo-muted);
}

@media (max-width: 1023px) {
  .fo-features,
  .fo-features--4 {
    --fo-cols: 2;
  }

  .fo-features > .fo-feature:nth-child(n),
  .fo-features--4 > .fo-feature:nth-child(n) {
    padding-inline: var(--fo-space-5);
    border-inline-start: var(--fo-line-hair) solid var(--fo-rule);
    margin-block-start: 0;
  }

  .fo-features > .fo-feature:nth-child(2n + 1),
  .fo-features--4 > .fo-feature:nth-child(2n + 1) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .fo-features > .fo-feature:nth-child(2n),
  .fo-features--4 > .fo-feature:nth-child(2n) {
    padding-inline-end: 0;
  }

  .fo-features > .fo-feature:nth-child(n + 3),
  .fo-features--4 > .fo-feature:nth-child(n + 3) {
    margin-block-start: var(--fo-space-7);
  }
}

@media (max-width: 699px) {
  .fo-features,
  .fo-features--2,
  .fo-features--4 {
    --fo-cols: 1;
  }

  .fo-features > .fo-feature:nth-child(n),
  .fo-features--2 > .fo-feature:nth-child(n),
  .fo-features--4 > .fo-feature:nth-child(n) {
    padding: var(--fo-space-5) 0 0;
    border-inline-start: 0;
    border-block-start: var(--fo-line-hair) solid var(--fo-rule);
    margin-block-start: var(--fo-space-5);
  }

  .fo-features > .fo-feature:first-child,
  .fo-features--2 > .fo-feature:first-child,
  .fo-features--4 > .fo-feature:first-child {
    padding-block-start: 0;
    border-block-start: 0;
    margin-block-start: 0;
  }
}

/* ---- cards ---- */
/* Cards: a story listing, not a box. Title in Newsreader, an italic dek, a Hanken meta line under it.
   Separation comes from rules and space; cards never carry a background, border box or shadow. */

.fo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--fo-space-3);
  min-width: 0;
}

.fo-card__media {
  display: block;
  margin-block-end: var(--fo-space-2);
  color: var(--fo-ink);
}

.fo-card__title {
  margin: 0;
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: var(--fo-fs-subhead);
  font-weight: var(--fo-weight-medium);
  line-height: 1.22;
  text-wrap: balance;
}

.fo-card__title a {
  color: inherit;
  text-decoration: none;
}

.fo-card__title a:hover {
  color: var(--fo-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.fo-card__dek {
  color: var(--fo-muted);
  font-family: var(--fo-font-text);
  font-size: var(--fo-fs-note);
  font-style: italic;
  line-height: 1.5;
}

.fo-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--fo-space-2);
  margin-block-start: auto;
  color: var(--fo-muted);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-medium);
  line-height: var(--fo-lh-ui);
}

.fo-card__meta > * + *::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-inline-end: var(--fo-space-2);
  background: var(--fo-rule-strong);
  vertical-align: middle;
}

.fo-card__section {
  color: var(--fo-link);
}

/* Ruled: a hairline above, for stacked lists */
.fo-card--ruled {
  padding-block-start: var(--fo-space-4);
  border-block-start: var(--fo-line-hair) solid var(--fo-rule);
}

/* Lead: the biggest story on a page */
.fo-card--lead .fo-card__title {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: var(--fo-weight-regular);
  line-height: 1.1;
  letter-spacing: var(--fo-track-title);
  font-variation-settings: "opsz" var(--fo-opsz-display);
}

.fo-card--lead .fo-card__dek {
  font-size: var(--fo-fs-lede);
  line-height: 1.4;
}

/* Brief: a numbered short item, title only */
.fo-card--brief {
  flex-direction: row;
  gap: var(--fo-space-4);
}

.fo-card--brief .fo-card__title {
  font-size: 1.1875rem;
  line-height: 1.3;
}

.fo-card__num {
  flex: none;
  min-width: 1.6em;
  color: var(--fo-accent);
  font-family: var(--fo-font-text);
  font-size: 1.5rem;
  font-style: italic;
  font-variant-numeric: lining-nums;
  line-height: 1;
}

.fo-card__stack {
  display: flex;
  flex-direction: column;
  gap: var(--fo-space-2);
}

/* Row: figure beside the text, for indexes */
.fo-card--row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--fo-space-4);
}

@media (min-width: 640px) {
  .fo-card--row {
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    gap: var(--fo-space-6);
    align-items: start;
  }

  .fo-card--row .fo-card__media {
    grid-row: span 4;
    margin: 0;
  }
}

/* A grid of cards with vertical column rules between them */
.fo-cards {
  --fo-cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--fo-cols), minmax(0, 1fr));
  padding: 0;
  list-style: none;
}

.fo-cards--2 {
  --fo-cols: 2;
}

.fo-cards > * {
  padding-inline: var(--fo-space-5);
  border-inline-start: var(--fo-line-hair) solid var(--fo-rule);
}

.fo-cards > :nth-child(3n + 1) {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.fo-cards > :nth-child(3n) {
  padding-inline-end: 0;
}

.fo-cards > :nth-child(n + 4) {
  margin-block-start: var(--fo-space-7);
}

.fo-cards--2 > :nth-child(n) {
  padding-inline: var(--fo-space-6);
  border-inline-start: var(--fo-line-hair) solid var(--fo-rule);
  margin-block-start: 0;
}

.fo-cards--2 > :nth-child(2n + 1) {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.fo-cards--2 > :nth-child(2n) {
  padding-inline-end: 0;
}

.fo-cards--2 > :nth-child(n + 3) {
  margin-block-start: var(--fo-space-7);
}

/* A plain stacked list of ruled cards */
.fo-cardlist {
  display: grid;
  gap: var(--fo-space-6);
  padding: 0;
  list-style: none;
}

.fo-cardlist > li + li > .fo-card {
  padding-block-start: var(--fo-space-6);
  border-block-start: var(--fo-line-hair) solid var(--fo-rule);
}

@media (max-width: 899px) {
  .fo-cards {
    --fo-cols: 2;
  }

  .fo-cards > :nth-child(n) {
    padding-inline: var(--fo-space-5);
    border-inline-start: var(--fo-line-hair) solid var(--fo-rule);
    margin-block-start: 0;
  }

  .fo-cards > :nth-child(2n + 1) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .fo-cards > :nth-child(2n) {
    padding-inline-end: 0;
  }

  .fo-cards > :nth-child(n + 3) {
    margin-block-start: var(--fo-space-7);
  }
}

@media (max-width: 599px) {
  .fo-cards,
  .fo-cards--2 {
    --fo-cols: 1;
  }

  .fo-cards > :nth-child(n),
  .fo-cards--2 > :nth-child(n) {
    padding: var(--fo-space-5) 0 0;
    border-inline-start: 0;
    border-block-start: var(--fo-line-hair) solid var(--fo-rule);
    margin-block-start: var(--fo-space-5);
  }

  .fo-cards > :first-child,
  .fo-cards--2 > :first-child {
    padding-block-start: 0;
    border-block-start: 0;
    margin-block-start: 0;
  }
}

/* ---- bento ---- */
/* Bento: the front page. A lead story, a column of two features and a column of numbered briefs,
   divided by vertical column rules like a broadsheet. Stacks with horizontal rules on phones. */

.fo-bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--fo-space-6);
}

.fo-bento__col {
  display: flex;
  flex-direction: column;
  gap: var(--fo-space-6);
  min-width: 0;
}

.fo-bento__col > * + * {
  padding-block-start: var(--fo-space-6);
  border-block-start: var(--fo-line-hair) solid var(--fo-rule);
}

.fo-bento__title {
  margin: 0;
  color: var(--fo-ink);
  font-family: var(--fo-font-text);
  font-size: 1.0625rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.07em;
  line-height: 1.2;
}

.fo-bento__col > .fo-bento__title + * {
  padding-block-start: 0;
  border-block-start: 0;
}

@media (max-width: 1023px) {
  .fo-bento > * + * {
    padding-block-start: var(--fo-space-6);
    border-block-start: var(--fo-line-hair) solid var(--fo-rule);
  }
}

@media (min-width: 700px) and (max-width: 1023px) {
  .fo-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0;
  }

  .fo-bento__lead {
    grid-column: 1 / -1;
  }

  .fo-bento > .fo-bento__col {
    padding-inline: var(--fo-space-5) 0;
  }

  .fo-bento > .fo-bento__lead + .fo-bento__col {
    padding-inline: 0 var(--fo-space-5);
  }

  .fo-bento > .fo-bento__col + .fo-bento__col {
    border-inline-start: var(--fo-line-hair) solid var(--fo-rule);
  }
}

@media (min-width: 1024px) {
  .fo-bento {
    grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr);
    gap: 0;
  }

  .fo-bento > * {
    padding-inline: var(--fo-space-6);
  }

  .fo-bento > * + * {
    border-inline-start: var(--fo-line-hair) solid var(--fo-rule);
  }

  .fo-bento > :first-child {
    padding-inline-start: 0;
  }

  .fo-bento > :last-child {
    padding-inline-end: 0;
  }
}

/* ---- issue-card ---- */
/* Issue card: a numbered issue with a typographic cover. The number is the image. */

.fo-issue {
  display: grid;
  gap: var(--fo-space-4);
  align-content: start;
  min-width: 0;
}

.fo-issue__cover {
  container-type: inline-size;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  aspect-ratio: 3 / 4;
  padding: 7% 8% 8%;
  border: var(--fo-line-hair) solid var(--fo-rule-strong);
  border-radius: var(--fo-radius-figure);
  background: var(--fo-surface);
  color: var(--fo-ink);
  overflow: hidden;
}

.fo-issue__cover::before {
  content: "";
  position: absolute;
  inset: 4% 4% auto;
  height: var(--fo-line-heavy);
  background: currentColor;
}

.fo-issue__plate {
  padding-block-start: 5%;
  border-block-end: var(--fo-line-hair) solid currentColor;
  font-family: var(--fo-font-display);
  font-size: clamp(0.75rem, 7.5cqi, 1.25rem);
  font-weight: var(--fo-weight-medium);
  line-height: 1.6;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
}

.fo-issue__number {
  align-self: center;
  font-family: var(--fo-font-display);
  font-size: 58cqi;
  font-weight: var(--fo-weight-regular);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-variant-numeric: lining-nums;
  font-variation-settings: "opsz" var(--fo-opsz-display);
  text-align: center;
}

.fo-issue__number small {
  display: block;
  font-size: 0.16em;
  font-style: italic;
  letter-spacing: 0;
}

.fo-issue__theme {
  font-family: var(--fo-font-text);
  font-size: clamp(0.875rem, 9cqi, 1.75rem);
  font-style: italic;
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
}

.fo-issue__season {
  margin-block-start: 5%;
  padding-block-start: 4%;
  border-block-start: var(--fo-line-hair) solid currentColor;
  font-family: var(--fo-font-text);
  font-size: clamp(0.75rem, 6cqi, 1.0625rem);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  text-align: center;
}

/* Cover colors: the current issue in oxblood, back issues in ink or paper */
.fo-issue__cover--accent {
  border-color: var(--fo-accent);
  background: var(--fo-accent);
  color: var(--fo-accent-ink);
}

.fo-issue__cover--ink {
  border-color: var(--fo-ink);
  background: var(--fo-ink);
  color: var(--fo-paper);
}

.fo-issue__cover--tint {
  background: var(--fo-paper-2);
}

.fo-issue__title {
  margin: 0;
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: var(--fo-fs-subhead);
  font-weight: var(--fo-weight-medium);
  line-height: 1.22;
  text-wrap: balance;
}

.fo-issue__title a {
  color: inherit;
  text-decoration: none;
}

.fo-issue__title a:hover {
  color: var(--fo-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.fo-issue__meta {
  color: var(--fo-muted);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-medium);
  font-variant-numeric: tabular-nums;
}

.fo-issue__text {
  color: var(--fo-body);
  font-size: var(--fo-fs-note);
  line-height: 1.5;
}

/* Feature: cover beside the text, for the current issue; a smaller cover on phones */
.fo-issue--feature .fo-issue__cover {
  width: min(100%, 17rem);
}

@media (min-width: 700px) {
  .fo-issue--feature .fo-issue__cover {
    width: auto;
  }

  .fo-issue--feature {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--fo-space-7);
    align-items: center;
  }

  .fo-issue--feature .fo-issue__title {
    font-size: var(--fo-fs-title);
    font-weight: var(--fo-weight-regular);
    line-height: var(--fo-lh-title);
    letter-spacing: var(--fo-track-title);
    font-variation-settings: "opsz" var(--fo-opsz-display);
  }

  .fo-issue--feature .fo-issue__body > * + * {
    margin-block-start: var(--fo-space-4);
  }

  .fo-issue--feature .fo-issue__text {
    font-size: var(--fo-fs-body);
    line-height: var(--fo-lh-body);
  }
}

/* A shelf of issues */
.fo-issues {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--fo-issue-min, 9.5rem)), 1fr));
  gap: var(--fo-space-6) var(--fo-space-5);
  padding: 0;
  list-style: none;
}

.fo-issues--large {
  --fo-issue-min: 13rem;
  gap: var(--fo-space-7) var(--fo-space-6);
}

/* ---- stats ---- */
/* Stats: facts about the publication in big Newsreader numerals with column rules between them.
   Checkable facts only (issues a year, words per essay, ads): never reader counts or growth claims. */

.fo-stats {
  --fo-cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--fo-cols), minmax(0, 1fr));
  padding-block: var(--fo-space-5);
  border-block: var(--fo-line-hair) solid var(--fo-rule);
}

.fo-stats--3 {
  --fo-cols: 3;
}

.fo-stat {
  display: flex;
  flex-direction: column;
  gap: var(--fo-space-2);
  padding-inline: var(--fo-space-5);
  border-inline-start: var(--fo-line-hair) solid var(--fo-rule);
}

.fo-stat:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.fo-stat__value {
  order: -1;
  margin: 0;
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.75rem);
  font-weight: var(--fo-weight-regular);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  font-variation-settings: "opsz" var(--fo-opsz-display);
}

.fo-stat__unit {
  margin-inline-start: 0.08em;
  color: var(--fo-accent);
  font-size: 0.5em;
  font-style: italic;
  letter-spacing: 0;
}

.fo-stat__label {
  color: var(--fo-ink);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-ui);
  font-weight: var(--fo-weight-semibold);
  line-height: var(--fo-lh-ui);
}

.fo-stat__note {
  margin: 0;
  color: var(--fo-muted);
  font-family: var(--fo-font-text);
  font-size: var(--fo-fs-note);
  line-height: 1.45;
}

@media (max-width: 899px) {
  .fo-stats,
  .fo-stats--3 {
    --fo-cols: 2;
    row-gap: var(--fo-space-6);
  }

  .fo-stat:nth-child(odd) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
}

@media (max-width: 359px) {
  .fo-stats,
  .fo-stats--3 {
    --fo-cols: 1;
  }

  .fo-stat {
    padding-inline: 0;
    border-inline-start: 0;
  }

  .fo-stat + .fo-stat {
    padding-block-start: var(--fo-space-5);
    border-block-start: var(--fo-line-hair) solid var(--fo-rule);
  }
}

/* ---- logo-row ---- */
/* Logo row: invented monogram marks with their names, for stockists or partner presses.
   Monochrome, muted, ruled. Never a real company's logo. Six to a row on wide screens. */

.fo-logos__intro {
  margin-block-end: var(--fo-space-4);
  color: var(--fo-muted);
  font-family: var(--fo-font-text);
  font-size: var(--fo-fs-note);
  font-style: italic;
  text-align: center;
}

.fo-logos {
  --fo-cols: 6;
  display: grid;
  grid-template-columns: repeat(var(--fo-cols), minmax(0, 1fr));
  padding: 0;
  list-style: none;
  border-block: var(--fo-line-hair) solid var(--fo-rule);
}

.fo-logo {
  display: flex;
  align-items: center;
  gap: var(--fo-space-3);
  min-height: 76px;
  padding: var(--fo-space-4);
  color: var(--fo-muted);
}

.fo-logo:not(:nth-child(6n + 1)) {
  border-inline-start: var(--fo-line-hair) solid var(--fo-rule);
}

.fo-logo:nth-child(n + 7) {
  border-block-start: var(--fo-line-hair) solid var(--fo-rule);
}

.fo-logo svg {
  width: 28px;
  height: 28px;
  flex: none;
}

.fo-logo__name {
  color: var(--fo-ink);
  font-family: var(--fo-font-text);
  font-size: 1.0625rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
  line-height: 1.15;
}

.fo-logo__place {
  display: block;
  margin-block-start: 2px;
  color: var(--fo-muted);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-small);
  font-variant-caps: normal;
  letter-spacing: 0;
}

@media (max-width: 1099px) {
  .fo-logos {
    --fo-cols: 3;
  }

  .fo-logo:nth-child(n) {
    border-inline-start: var(--fo-line-hair) solid var(--fo-rule);
    border-block-start: 0;
  }

  .fo-logo:nth-child(3n + 1) {
    border-inline-start: 0;
  }

  .fo-logo:nth-child(n + 4) {
    border-block-start: var(--fo-line-hair) solid var(--fo-rule);
  }
}

@media (max-width: 639px) {
  .fo-logos {
    --fo-cols: 2;
  }

  .fo-logo {
    padding-inline: var(--fo-space-3);
  }

  .fo-logo:nth-child(n) {
    border-inline-start: var(--fo-line-hair) solid var(--fo-rule);
    border-block-start: 0;
  }

  .fo-logo:nth-child(odd) {
    border-inline-start: 0;
  }

  .fo-logo:nth-child(n + 3) {
    border-block-start: var(--fo-line-hair) solid var(--fo-rule);
  }
}

/* ---- testimonial ---- */
/* Testimonial: one attributed statement in Newsreader italic with a hanging oxblood quotation mark.
   Quote the publication's own people (an editor, a founder) or a named, real source. */

.fo-quote__text {
  margin: 0;
  color: var(--fo-ink);
  font-family: var(--fo-font-text);
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  font-style: italic;
  line-height: 1.35;
  text-wrap: pretty;
}

.fo-quote__text > p {
  text-indent: -0.42em;
}

.fo-quote__text > p + p {
  margin-block-start: 0.6em;
  text-indent: 0;
}

.fo-quote__text > p:first-child::before {
  content: "\201C";
  color: var(--fo-accent);
  font-style: normal;
}

.fo-quote__text > p:last-child::after {
  content: "\201D";
  color: var(--fo-accent);
  font-style: normal;
}

.fo-quote__by {
  display: flex;
  align-items: center;
  gap: var(--fo-space-3);
  margin-block-start: var(--fo-space-5);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
  line-height: var(--fo-lh-ui);
}

.fo-quote__name {
  display: block;
  color: var(--fo-ink);
  font-weight: var(--fo-weight-semibold);
}

.fo-quote__role {
  display: block;
  color: var(--fo-muted);
  font-weight: var(--fo-weight-medium);
}

.fo-quote--center {
  text-align: center;
}

.fo-quote--center .fo-quote__by {
  justify-content: center;
  text-align: start;
}

.fo-quote--ruled {
  padding-block: var(--fo-space-6);
  border-block: var(--fo-line-hair) solid var(--fo-rule);
}

/* ---- pricing ---- */
/* Pricing: subscription plans as ruled columns. The recommended plan carries a heavy oxblood rule and
   the one primary button. Prices in Newsreader numerals with the period in words. */

.fo-pricing {
  --fo-cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--fo-cols), minmax(0, 1fr));
  padding: 0;
  list-style: none;
  border-block-end: var(--fo-line-hair) solid var(--fo-rule);
}

.fo-pricing--2 {
  --fo-cols: 2;
}

.fo-pricing > li {
  display: flex;
  min-width: 0;
}

.fo-plan {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--fo-space-4);
  padding: var(--fo-space-6) var(--fo-space-6) var(--fo-space-7);
  border-block-start: var(--fo-line-hair) solid var(--fo-ink);
}

.fo-pricing > li + li > .fo-plan {
  border-inline-start: var(--fo-line-hair) solid var(--fo-rule);
}

.fo-pricing > li:first-child > .fo-plan {
  padding-inline-start: 0;
}

.fo-pricing > li:last-child > .fo-plan {
  padding-inline-end: 0;
}

.fo-plan--featured {
  border-block-start: var(--fo-line-heavy) solid var(--fo-accent);
  padding-block-start: calc(var(--fo-space-6) - 2px);
}

.fo-plan__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fo-space-2);
}

.fo-plan__name {
  margin: 0;
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: var(--fo-fs-headline);
  font-weight: var(--fo-weight-medium);
  line-height: 1.2;
}

.fo-plan__desc {
  min-height: 3em;
  color: var(--fo-muted);
  font-size: var(--fo-fs-note);
  font-style: italic;
  line-height: 1.5;
}

.fo-plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--fo-space-2);
  margin: 0;
}

.fo-plan__amount {
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: clamp(2.75rem, 2.3rem + 1.6vw, 3.5rem);
  font-weight: var(--fo-weight-regular);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
  font-variation-settings: "opsz" var(--fo-opsz-display);
}

.fo-plan__term {
  color: var(--fo-muted);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-medium);
}

.fo-plan__alt {
  margin: calc(-1 * var(--fo-space-2)) 0 0;
  color: var(--fo-muted);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
}

.fo-plan__cta {
  margin-block: var(--fo-space-2);
}

.fo-plan__list {
  padding-block-start: var(--fo-space-4);
  border-block-start: var(--fo-line-hair) solid var(--fo-rule);
  font-size: var(--fo-fs-note);
}

.fo-pricing__note {
  margin-block-start: var(--fo-space-5);
  color: var(--fo-muted);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
  text-align: center;
}

.fo-pricing__compare {
  margin-block-start: var(--fo-space-8);
}

@media (max-width: 899px) {
  .fo-pricing,
  .fo-pricing--2 {
    --fo-cols: 1;
    border-block-end: 0;
  }

  .fo-plan,
  .fo-pricing > li:first-child > .fo-plan,
  .fo-pricing > li:last-child > .fo-plan {
    padding-inline: 0;
  }

  .fo-pricing > li + li > .fo-plan {
    border-inline-start: 0;
  }

  .fo-plan__desc {
    min-height: 0;
  }
}

/* ---- cta ---- */
/* CTA: the closing call. A fleuron, a sentence for a heading, one line of reason, the action pair
   and a micro line that answers the obvious worry. Centered in the reading column. */

.fo-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fo-space-4);
  text-align: center;
}

.fo-cta__mark {
  display: inline-grid;
  place-items: center;
  margin-block-end: var(--fo-space-2);
  color: var(--fo-accent);
  line-height: 0;
}

.fo-cta__title {
  margin: 0;
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: var(--fo-fs-title);
  font-weight: var(--fo-weight-regular);
  line-height: var(--fo-lh-title);
  letter-spacing: var(--fo-track-title);
  font-variation-settings: "opsz" var(--fo-opsz-display);
  text-wrap: balance;
}

.fo-cta__text {
  max-width: 32rem;
  color: var(--fo-muted);
  font-size: var(--fo-fs-lede);
  font-style: italic;
  line-height: 1.4;
}

.fo-cta .fo-actions {
  justify-content: center;
  margin-block-start: var(--fo-space-3);
}

.fo-cta__note {
  color: var(--fo-muted);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
}

.fo-cta__form {
  width: 100%;
  max-width: 30rem;
  margin-block-start: var(--fo-space-3);
}

/* Start-aligned variant for a closing note inside an article */
.fo-cta--start {
  align-items: flex-start;
  text-align: start;
}

.fo-cta--start .fo-actions {
  justify-content: flex-start;
}

/* ---- footer ---- */
/* Footer: the colophon. Double rule, the publication name, a short statement, link columns with
   paragraph titles, and a bar that names the typefaces. */

.fo-footer {
  padding-block: var(--fo-space-8) var(--fo-space-6);
  color: var(--fo-body);
  font-family: var(--fo-font-ui);
}

.fo-footer__grid {
  display: grid;
  gap: var(--fo-space-7);
  padding-block-start: var(--fo-space-7);
  border-block-start: var(--fo-line-hair) solid var(--fo-ink);
}

.fo-footer__rule {
  height: var(--fo-line-heavy);
  margin-block-end: 3px;
  background: var(--fo-ink);
}

.fo-footer__name {
  display: inline-block;
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: 1.75rem;
  font-weight: var(--fo-weight-medium);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-decoration: none;
  font-variation-settings: "opsz" var(--fo-opsz-display);
}

.fo-footer__name:hover {
  color: var(--fo-link);
  text-decoration: none;
}

.fo-footer__about {
  max-width: 24rem;
  margin-block-start: var(--fo-space-3);
  color: var(--fo-muted);
  font-family: var(--fo-font-text);
  font-size: var(--fo-fs-note);
  font-style: italic;
  line-height: 1.5;
}

.fo-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fo-space-6);
}

.fo-footer__title {
  margin: 0 0 var(--fo-space-3);
  color: var(--fo-ink);
  font-family: var(--fo-font-text);
  font-size: 1.125rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.07em;
}

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

.fo-footer__links > li + li {
  margin-block-start: var(--fo-space-1);
}

.fo-footer__links a {
  display: inline-block;
  padding-block: 3px;
  color: var(--fo-body);
  font-size: var(--fo-fs-ui);
  text-decoration: none;
}

.fo-footer__links a:hover {
  color: var(--fo-link);
  text-decoration: underline;
}

.fo-footer__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--fo-space-2) var(--fo-space-6);
  margin-block-start: var(--fo-space-8);
  padding-block-start: var(--fo-space-4);
  border-block-start: var(--fo-line-hair) solid var(--fo-rule);
  color: var(--fo-muted);
  font-size: var(--fo-fs-meta);
}

.fo-footer__bar p {
  margin: 0;
}

@media (min-width: 900px) {
  .fo-footer__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

@media (max-width: 539px) {
  .fo-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (pointer: coarse) {
  .fo-footer__links a {
    padding-block: 10px;
  }
}

/* ---- prose ---- */
/* Prose: long-form typography for whatever your editor or Markdown produces. 18 to 20px Newsreader,
   1.65 leading, hanging punctuation, balanced headings, oldstyle spacing for lists and quotes.
   Place .fo-prose inside a .fo-column so sidenotes, wide figures and pull quotes can use the margin. */

.fo-prose {
  color: var(--fo-body);
  font-family: var(--fo-font-text);
  font-size: var(--fo-fs-read);
  line-height: var(--fo-lh-read);
  hanging-punctuation: first last;
  overflow-wrap: break-word;
}

.fo-prose > * + * {
  margin-block-start: 1em;
}

.fo-prose p {
  hyphens: auto;
  hyphenate-limit-chars: 7 3 3;
  text-wrap: pretty;
}

.fo-prose h2,
.fo-prose h3,
.fo-prose h4 {
  position: relative;
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  text-wrap: balance;
  hyphens: manual;
}

.fo-prose h2 {
  margin-block-start: 2.2em;
  font-size: var(--fo-fs-headline);
  font-weight: var(--fo-weight-medium);
  line-height: var(--fo-lh-heading);
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 36;
}

.fo-prose h3 {
  margin-block-start: 1.8em;
  font-size: var(--fo-fs-subhead);
  font-weight: var(--fo-weight-medium);
  line-height: var(--fo-lh-heading);
}

.fo-prose h4 {
  margin-block-start: 1.6em;
  font-family: var(--fo-font-text);
  font-size: 1.125rem;
  font-weight: var(--fo-weight-regular);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
}

.fo-prose :is(h2, h3, h4) + * {
  margin-block-start: 0.55em;
}

.fo-prose > :first-child {
  margin-block-start: 0;
}

.fo-prose a {
  color: var(--fo-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.fo-prose a:hover {
  color: var(--fo-ink);
  text-decoration-thickness: 2px;
}

.fo-prose :is(ul, ol) {
  padding-inline-start: 1.35em;
}

.fo-prose li + li {
  margin-block-start: 0.35em;
}

.fo-prose li::marker {
  color: var(--fo-accent);
}

.fo-prose ol > li::marker {
  font-family: var(--fo-font-ui);
  font-size: 0.85em;
  font-weight: var(--fo-weight-semibold);
}

.fo-prose blockquote {
  padding-inline-start: 1.2em;
  border-inline-start: 2px solid var(--fo-rule-strong);
  color: var(--fo-ink);
  font-style: italic;
}

.fo-prose blockquote > * + * {
  margin-block-start: 0.8em;
}

.fo-prose blockquote cite {
  display: block;
  color: var(--fo-muted);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
  font-style: normal;
}

.fo-prose :is(code, kbd) {
  padding: 0.08em 0.32em;
  border-radius: var(--fo-radius-tag);
  background: var(--fo-paper-2);
  color: var(--fo-ink);
  font-family: var(--fo-font-mono);
  font-size: 0.82em;
}

.fo-prose pre {
  padding: var(--fo-space-4) var(--fo-space-5);
  border-block: var(--fo-line-hair) solid var(--fo-rule);
  background: var(--fo-paper-2);
  overflow-x: auto;
  font-size: 0.85em;
  line-height: 1.55;
}

.fo-prose pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}

.fo-prose mark {
  padding-inline: 0.1em;
  background: var(--fo-accent-soft);
  color: var(--fo-ink);
}

.fo-prose small {
  font-size: 0.85em;
}

.fo-prose abbr {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.04em;
}

/* Section break: three oxblood points instead of a line */
.fo-prose hr {
  height: auto;
  margin-block: 2em;
  border: 0;
  text-align: center;
}

.fo-prose hr::before {
  content: "\2022\2003\2022\2003\2022";
  color: var(--fo-accent);
  font-size: 0.8em;
  line-height: 1;
}

.fo-prose table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
  font-variant-numeric: tabular-nums;
  border-block: var(--fo-line-heavy) solid var(--fo-ink);
}

.fo-prose th,
.fo-prose td {
  padding: 8px 10px;
  border-block-end: var(--fo-line-hair) solid var(--fo-rule);
  text-align: start;
  vertical-align: top;
}

.fo-prose thead th {
  border-block-end-color: var(--fo-ink);
  color: var(--fo-ink);
}

.fo-prose caption {
  padding-block-end: var(--fo-space-2);
  color: var(--fo-muted);
  font-family: var(--fo-font-text);
  font-size: var(--fo-fs-note);
  font-style: italic;
  text-align: start;
}

/* Standfirst: an opening paragraph one step larger */
.fo-prose__standfirst {
  color: var(--fo-ink);
  font-size: 1.12em;
  line-height: 1.55;
}

/* Book setting: indented paragraphs with no space between them */
.fo-prose--indent > p + p {
  margin-block-start: 0;
  text-indent: 1.5em;
}

/* Numbered parts: roman numerals that hang in the start wing at 1280px and wider */
.fo-prose--numbered > h2 {
  counter-increment: fo-part;
}

.fo-prose--numbered > h2::before {
  content: counter(fo-part, upper-roman) ".";
  margin-inline-end: 0.4em;
  color: var(--fo-accent);
  font-family: var(--fo-font-text);
  font-style: italic;
  font-weight: var(--fo-weight-regular);
}

@media (min-width: 1280px) {
  :is(.fo-column, .fo-section) .fo-prose--numbered > h2::before {
    position: absolute;
    inset-inline-end: calc(100% + var(--fo-margin-gap));
    margin: 0;
  }
}

/* ---- drop-cap ---- */
/* Drop cap: a three-line oxblood initial in Newsreader at display optical size, followed by a
   small-capitals lead-in on the first line. Opens a feature, once per article. */

.fo-dropcap::first-letter {
  float: inline-start;
  margin-block-start: 0.07em;
  margin-inline-end: 0.08em;
  color: var(--fo-accent);
  font-family: var(--fo-font-display);
  font-size: 4.6em;
  font-style: normal;
  font-weight: var(--fo-weight-regular);
  line-height: 0.78;
  font-variation-settings: "opsz" var(--fo-opsz-display);
}

@supports (initial-letter: 3) {
  .fo-dropcap::first-letter {
    float: none;
    margin: 0;
    margin-inline-end: 0.1em;
    font-size: 1em;
    line-height: inherit;
    initial-letter: 3;
  }
}

.fo-dropcap::first-line {
  color: var(--fo-ink);
  font-variant-caps: small-caps;
  letter-spacing: 0.03em;
}

/* Two-line initial for shorter openings */
.fo-dropcap--2::first-letter {
  font-size: 3.15em;
}

@supports (initial-letter: 2) {
  .fo-dropcap--2::first-letter {
    font-size: 1em;
    initial-letter: 2;
  }
}

/* Ink initial, when the oxblood would compete with a figure nearby */
.fo-dropcap--ink::first-letter {
  color: var(--fo-ink);
}

/* No lead-in: keep the first line in ordinary case */
.fo-dropcap--plain::first-line {
  color: inherit;
  font-variant-caps: normal;
  letter-spacing: normal;
}

/* ---- sidenote ---- */
/* Sidenote: the signature. A note sits in the margin beside the line that calls it at 1100px and
   wider. Below that it drops inline as a numbered note the reader opens with a tap. No JavaScript:
   CSS counters number the notes, a checkbox and its label do the toggling.

   Order inside the paragraph: input.fo-sidenote__toggle, label.fo-sidenote__ref, span.fo-sidenote. */

/* Numbering starts fresh in each article or section and runs across its prose blocks */
:is(.fo-column, .fo-section) {
  counter-reset: fo-sidenote fo-figure fo-part;
}

.fo-sidenote__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  opacity: 0;
  pointer-events: none;
}

.fo-sidenote__ref {
  counter-increment: fo-sidenote;
  display: inline-block;
  min-width: 1.1em;
  margin-inline-start: 0.08em;
  padding-inline: 0.12em;
  border-radius: var(--fo-radius-tag);
  color: var(--fo-link);
  font-family: var(--fo-font-ui);
  font-size: max(0.75rem, 0.62em);
  font-style: normal;
  font-weight: var(--fo-weight-semibold);
  font-variant-numeric: lining-nums;
  line-height: 1;
  text-align: center;
  vertical-align: super;
  cursor: pointer;
  user-select: none;
}

.fo-sidenote__ref::after {
  content: counter(fo-sidenote);
}

.fo-sidenote__ref:hover {
  background: var(--fo-accent-soft);
}

.fo-sidenote__toggle:focus-visible + .fo-sidenote__ref {
  outline: 2px solid var(--fo-focus);
  outline-offset: 2px;
}

.fo-sidenote__toggle:checked + .fo-sidenote__ref {
  background: var(--fo-accent);
  color: var(--fo-accent-ink);
}

.fo-sidenote {
  display: none;
  color: var(--fo-muted);
  font-family: var(--fo-font-text);
  font-size: var(--fo-fs-note);
  font-style: normal;
  font-weight: var(--fo-weight-regular);
  line-height: 1.5;
  text-indent: 0;
  hyphens: manual;
}

.fo-sidenote::before {
  content: counter(fo-sidenote) ".";
  margin-inline-end: 0.4em;
  color: var(--fo-link);
  font-family: var(--fo-font-ui);
  font-size: 0.85em;
  font-weight: var(--fo-weight-semibold);
  font-variant-numeric: lining-nums;
}

.fo-sidenote a {
  color: var(--fo-link);
}

/* Inline, opened: a quiet box under the line */
.fo-sidenote__toggle:checked + .fo-sidenote__ref + .fo-sidenote {
  display: block;
  margin-block: 0.6em 0.9em;
  padding: 0.7em 0.9em;
  border-inline-start: 2px solid var(--fo-accent);
  background: var(--fo-paper-2);
}

/* Unnumbered margin note: an icon opens it inline; no counter */
.fo-sidenote__ref--margin {
  counter-increment: none;
  padding: 0.12em;
  font-size: 0.8em;
  vertical-align: baseline;
}

.fo-sidenote__ref--margin::after {
  content: none;
}

.fo-sidenote__ref--margin svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
}

.fo-sidenote--margin::before {
  content: none;
}

@media (pointer: coarse) {
  .fo-sidenote__ref {
    padding: 0.5em 0.4em;
    margin-block: -0.5em;
  }
}

@media (min-width: 1100px) {
  :is(.fo-column, .fo-section) .fo-sidenote,
  :is(.fo-column, .fo-section) .fo-sidenote__toggle:checked + .fo-sidenote__ref + .fo-sidenote {
    display: block;
    position: relative;
    float: inline-end;
    clear: inline-end;
    width: var(--fo-note-w);
    margin-block: 0.35em var(--fo-space-4);
    margin-inline-end: calc(-1 * (var(--fo-note-w) + var(--fo-margin-gap)));
    padding: 0;
    border: 0;
    background: none;
  }

  :is(.fo-column, .fo-section) .fo-sidenote__ref {
    cursor: default;
  }

  :is(.fo-column, .fo-section) .fo-sidenote__ref:hover,
  :is(.fo-column, .fo-section) .fo-sidenote__toggle:checked + .fo-sidenote__ref {
    background: none;
    color: var(--fo-link);
  }

  :is(.fo-column, .fo-section) .fo-sidenote__toggle {
    display: none;
  }

  :is(.fo-column, .fo-section) .fo-sidenote__ref--margin {
    display: none;
  }
}

/* ---- footnotes ---- */
/* Footnotes: superscript references in the text and a numbered list of notes and sources at the end,
   each with a way back. Use --alpha when the article also has sidenotes, so the two never share numbers. */

.fo-fnref {
  font-family: var(--fo-font-ui);
  font-size: max(0.75rem, 0.62em);
  font-weight: var(--fo-weight-semibold);
  font-variant-numeric: lining-nums;
  line-height: 1;
  vertical-align: super;
}

.fo-fnref a {
  display: inline-block;
  padding-inline: 0.15em;
  color: var(--fo-link);
  text-decoration: none;
  scroll-margin-block-start: calc(var(--fo-nav-h) + var(--fo-space-7));
}

.fo-fnref a:hover {
  background: var(--fo-accent-soft);
  color: var(--fo-ink);
}

.fo-fnref a::before {
  content: "[";
  color: var(--fo-muted);
}

.fo-fnref a::after {
  content: "]";
  color: var(--fo-muted);
}

.fo-footnotes {
  margin-block-start: var(--fo-space-7);
  padding-block-start: var(--fo-space-5);
  border-block-start: var(--fo-line-hair) solid var(--fo-rule);
  color: var(--fo-body);
  font-family: var(--fo-font-text);
  font-size: var(--fo-fs-note);
  line-height: 1.55;
}

.fo-footnotes__title {
  margin: 0 0 var(--fo-space-3);
  color: var(--fo-ink);
  font-family: var(--fo-font-text);
  font-size: 1.125rem;
  font-weight: var(--fo-weight-regular);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.07em;
  line-height: 1.3;
}

.fo-footnotes__list {
  margin: 0;
  padding-inline-start: 1.6em;
}

.fo-footnotes__list > li {
  padding-inline-start: 0.3em;
  scroll-margin-block-start: calc(var(--fo-nav-h) + var(--fo-space-7));
}

.fo-footnotes__list > li + li {
  margin-block-start: var(--fo-space-2);
}

.fo-footnotes__list > li::marker {
  color: var(--fo-link);
  font-family: var(--fo-font-ui);
  font-size: 0.85em;
  font-weight: var(--fo-weight-semibold);
}

.fo-footnotes__list > li:target {
  background: var(--fo-accent-soft);
  box-shadow: -0.4em 0 0 var(--fo-accent-soft), 0.4em 0 0 var(--fo-accent-soft);
}

.fo-footnotes__list cite {
  font-style: italic;
}

.fo-footnotes__back {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 0.3em;
  padding: 2px;
  color: var(--fo-link);
  vertical-align: -0.15em;
}

.fo-footnotes__back:hover {
  color: var(--fo-ink);
}

[dir="rtl"] .fo-footnotes__back svg {
  transform: scaleX(-1);
}

.fo-footnotes--alpha .fo-footnotes__list {
  list-style-type: lower-alpha;
}

@media (pointer: coarse) {
  .fo-fnref a,
  .fo-footnotes__back {
    padding: 0.45em 0.35em;
    margin-block: -0.45em;
  }
}

/* ---- pull-quote ---- */
/* Pull quote: a line from the piece, set large, that breaks the column. At 1100px and wider it runs
   from the text into the margin (default) or out into the start wing (--hang, 1280px and wider).
   --margin floats it in the margin beside the text instead. */

.fo-pullquote {
  clear: inline-end;
  margin-block: 1.8em;
  padding-block: 0.9em 0.2em;
  border-block-start: var(--fo-line-heavy) solid var(--fo-ink);
}

.fo-pullquote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
}

.fo-pullquote blockquote p {
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
  font-weight: var(--fo-weight-regular);
  line-height: 1.18;
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" var(--fo-opsz-display);
  text-indent: -0.4em;
  text-wrap: balance;
  hyphens: manual;
}

.fo-pullquote blockquote p::before {
  content: "\201C";
  color: var(--fo-accent);
}

.fo-pullquote blockquote p::after {
  content: "\201D";
  color: var(--fo-accent);
}

.fo-pullquote figcaption {
  margin-block-start: var(--fo-space-3);
  color: var(--fo-muted);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-medium);
}

/* Italic voice for quoted speech rather than the writer's own line */
.fo-pullquote--italic blockquote p {
  font-family: var(--fo-font-text);
  font-style: italic;
}

@media (min-width: 1100px) {
  :is(.fo-column, .fo-section) .fo-pullquote {
    margin-inline-end: calc(-1 * (var(--fo-note-w) + var(--fo-margin-gap)));
  }

  :is(.fo-column, .fo-section) .fo-pullquote--margin {
    position: relative;
    float: inline-end;
    clear: inline-end;
    width: var(--fo-note-w);
    margin-block: 0.4em var(--fo-space-5);
    margin-inline-end: calc(-1 * (var(--fo-note-w) + var(--fo-margin-gap)));
    padding-block-start: 0.7em;
    border-block-start-width: var(--fo-line-hair);
  }

  :is(.fo-column, .fo-section) .fo-pullquote--margin blockquote p {
    font-family: var(--fo-font-text);
    font-size: 1.375rem;
    font-style: italic;
    line-height: 1.3;
    letter-spacing: 0;
  }
}

@media (min-width: 1280px) {
  :is(.fo-column, .fo-section) .fo-pullquote--hang {
    margin-inline: calc(-1 * (var(--fo-note-w) + var(--fo-margin-gap))) 0;
  }
}

/* ---- figure ---- */
/* Figure: coded illustrations, diagrams and charts with a caption and credit. Square corners.
   Default sits in the text column with its caption in the margin at 1100px and wider.
   --wide runs into the margin; --margin floats in the margin; --bleed spans the full width
   (a direct child of .fo-column, between two .fo-prose blocks). */

.fo-figure {
  margin-block: 2em;
}

.fo-figure--wide,
.fo-figure--side {
  clear: inline-end;
}

.fo-figure__media {
  display: block;
  border-radius: var(--fo-radius-figure);
  color: var(--fo-ink);
}

.fo-figure--framed .fo-figure__media {
  padding: clamp(var(--fo-space-4), 4%, var(--fo-space-6));
  border: var(--fo-line-hair) solid var(--fo-rule);
  background: var(--fo-paper-2);
}

.fo-figure__caption {
  margin-block-start: var(--fo-space-3);
  color: var(--fo-muted);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
  line-height: 1.5;
  text-wrap: pretty;
}

.fo-figure__num {
  counter-increment: fo-figure;
  color: var(--fo-ink);
  font-weight: var(--fo-weight-semibold);
}

.fo-figure__num::before {
  content: "Figure " counter(fo-figure) ". ";
}

.fo-figure__credit {
  display: block;
  margin-block-start: var(--fo-space-1);
  color: var(--fo-muted);
  font-family: var(--fo-font-text);
  font-size: 1rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.05em;
}

/* Coded artwork: every fill and stroke comes from a token */
.fo-art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.fo-art__paper {
  fill: var(--fo-surface);
  stroke: var(--fo-rule-strong);
  stroke-width: 1;
}

.fo-art__tint {
  fill: var(--fo-paper-2);
}

.fo-art__line {
  fill: var(--fo-rule-strong);
}

.fo-art__ink {
  fill: var(--fo-ink);
}

.fo-art__stroke {
  fill: none;
  stroke: var(--fo-ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fo-art__rule {
  fill: none;
  stroke: var(--fo-rule);
  stroke-width: 1;
}

.fo-art__accent {
  fill: var(--fo-accent);
}

.fo-art__strike {
  fill: none;
  stroke: var(--fo-accent);
  stroke-width: 2;
  stroke-linecap: round;
}

.fo-art__mark {
  fill: none;
  stroke: var(--fo-accent);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fo-art__soft {
  fill: var(--fo-accent-soft);
}

/* Below 1100px a margin figure sits in the column at the width of a note */
.fo-figure--margin {
  max-width: 20rem;
}

@media (min-width: 1100px) {
  :is(.fo-column, .fo-section) .fo-figure--side {
    position: relative;
  }

  :is(.fo-column, .fo-section) .fo-figure--side .fo-figure__caption {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: calc(100% + var(--fo-margin-gap));
    width: var(--fo-note-w);
    margin: 0;
  }

  :is(.fo-column, .fo-section) .fo-figure--wide {
    margin-inline-end: calc(-1 * (var(--fo-note-w) + var(--fo-margin-gap)));
  }

  :is(.fo-column, .fo-section) .fo-figure--margin {
    position: relative;
    float: inline-end;
    width: var(--fo-note-w);
    margin-block: 0.35em var(--fo-space-5);
    margin-inline-end: calc(-1 * (var(--fo-note-w) + var(--fo-margin-gap)));
  }
}

/* Bleed: a subgrid across the full width; the caption returns to the text column */
.fo-figure--bleed {
  grid-column: full;
  display: grid;
  grid-template-columns: subgrid;
  margin-block: var(--fo-space-7);
}

.fo-figure--bleed > .fo-figure__media {
  grid-column: full;
}

.fo-figure--bleed > .fo-figure__caption {
  grid-column: text;
}

@media (min-width: 1100px) {
  .fo-figure--bleed > .fo-figure__caption {
    grid-column: margin;
    max-width: var(--fo-note-w);
    margin-inline-start: var(--fo-margin-gap);
  }
}

/* ---- article-header ---- */
/* Article header: kicker-free. A sentence for a title that runs wide, an italic dek, the byline,
   and the apparatus (section, issue, reading time, series) in the margin beside the dek. */

.fo-article-head {
  padding-block: var(--fo-space-7) var(--fo-space-6);
}

.fo-article-head__title {
  margin: 0;
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: clamp(2.5rem, 1.4rem + 4.4vw, 4.75rem);
  font-weight: var(--fo-weight-regular);
  line-height: 1.02;
  letter-spacing: -0.024em;
  font-variation-settings: "opsz" var(--fo-opsz-display);
  text-wrap: balance;
}

.fo-article-head__dek {
  margin-block-start: var(--fo-space-5);
  color: var(--fo-muted);
  font-family: var(--fo-font-text);
  font-size: var(--fo-fs-lede);
  font-style: italic;
  line-height: 1.4;
  text-wrap: pretty;
}

.fo-article-head .fo-byline {
  margin-block-start: var(--fo-space-5);
  padding-block-start: var(--fo-space-4);
  border-block-start: var(--fo-line-hair) solid var(--fo-rule);
}

.fo-article-head__apparatus {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fo-space-1) var(--fo-space-4);
  margin: var(--fo-space-4) 0 0;
  padding: 0;
  list-style: none;
  color: var(--fo-muted);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-medium);
  line-height: 1.5;
}

.fo-article-head__apparatus a {
  color: var(--fo-link);
  text-decoration: none;
}

.fo-article-head__apparatus a:hover {
  color: var(--fo-ink);
  text-decoration: underline;
}

.fo-article-head__issue {
  color: var(--fo-link);
  font-family: var(--fo-font-text);
  font-size: 1.0625rem;
  font-variant-caps: all-small-caps;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.05em;
}

@media (min-width: 1100px) {
  .fo-article-head__apparatus {
    flex-direction: column;
    margin-block-start: var(--fo-space-5);
    padding-block-start: var(--fo-space-3);
    border-block-start: var(--fo-line-hair) solid var(--fo-rule);
  }
}

/* ---- byline ---- */
/* Byline: who wrote it, when, and how long it takes. Hanken at 14 to 15px beside a square avatar. */

.fo-byline {
  display: flex;
  align-items: center;
  gap: var(--fo-space-3);
  font-family: var(--fo-font-ui);
  line-height: var(--fo-lh-ui);
}

.fo-byline__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.fo-byline__name {
  margin: 0;
  color: var(--fo-ink);
  font-size: var(--fo-fs-ui);
  font-weight: var(--fo-weight-semibold);
}

.fo-byline__name a {
  color: inherit;
  text-decoration: none;
}

.fo-byline__name a:hover {
  color: var(--fo-link);
  text-decoration: underline;
}

.fo-byline__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--fo-space-2);
  margin: 0;
  color: var(--fo-muted);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-medium);
  font-variant-numeric: tabular-nums;
}

.fo-byline__meta > * + *::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-inline-end: var(--fo-space-2);
  background: var(--fo-rule-strong);
  vertical-align: middle;
}

/* Two writers or a writer and an illustrator */
.fo-byline--pair .fo-avatars {
  flex: none;
}

/* Inline: one line of text, no avatar, for cards and lists */
.fo-byline--inline {
  flex-wrap: wrap;
  gap: 0 var(--fo-space-2);
  color: var(--fo-muted);
  font-size: var(--fo-fs-meta);
}

/* Phones: meta items stack instead of wrapping behind a separator */
@media (max-width: 479px) {
  .fo-byline:not(.fo-byline--inline) .fo-byline__meta {
    flex-direction: column;
  }

  .fo-byline:not(.fo-byline--inline) .fo-byline__meta > * + *::before {
    display: none;
  }
}

/* ---- toc ---- */
/* Table of contents: the parts of a long piece with roman numerals. Sticky in the start wing at
   1280px and wider (with .fo-column__hang.fo-column__sticky); a ruled block above the text otherwise. */

.fo-toc {
  width: 100%;
  font-family: var(--fo-font-ui);
  text-align: start;
}

.fo-toc__title {
  margin: 0 0 var(--fo-space-3);
  text-align: start;
  color: var(--fo-ink);
  font-family: var(--fo-font-text);
  font-size: 1.125rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.07em;
  line-height: 1.3;
}

.fo-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: var(--fo-line-hair) solid var(--fo-rule);
}

.fo-toc__list > li {
  border-block-end: var(--fo-line-hair) solid var(--fo-rule);
}

.fo-toc__link {
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr);
  align-items: baseline;
  gap: var(--fo-space-2);
  padding-block: 9px;
  color: var(--fo-body);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-medium);
  line-height: 1.4;
  text-align: start;
  text-decoration: none;
}

.fo-toc__link:hover {
  color: var(--fo-link);
}

.fo-toc__num {
  color: var(--fo-muted);
  font-family: var(--fo-font-text);
  font-size: 1rem;
  font-style: italic;
  font-weight: var(--fo-weight-regular);
}

.fo-toc__link[aria-current="true"],
.fo-toc__link[aria-current="location"] {
  color: var(--fo-ink);
}

.fo-toc__link[aria-current="true"] .fo-toc__num,
.fo-toc__link[aria-current="location"] .fo-toc__num {
  color: var(--fo-accent);
}

.fo-toc__progress {
  margin-block-start: var(--fo-space-3);
  color: var(--fo-muted);
  font-size: var(--fo-fs-meta);
  text-align: start;
}

@media (max-width: 1279px) {
  .fo-toc {
    padding: var(--fo-space-4) var(--fo-space-5);
    border: var(--fo-line-hair) solid var(--fo-rule);
    background: var(--fo-paper-2);
  }

  .fo-toc__list {
    border-block-start: 0;
  }

  .fo-toc__list > li:last-child {
    border-block-end: 0;
  }
}

@media (pointer: coarse) {
  .fo-toc__link {
    padding-block: 12px;
  }
}

/* ---- callout ---- */
/* Callout: an editor's note, a correction or a members' note set apart from the text by a rule
   on the start edge and a paper tint. One per screen at most. */

.fo-callout {
  padding: var(--fo-space-4) var(--fo-space-5);
  border-inline-start: var(--fo-line-heavy) solid var(--fo-accent);
  background: var(--fo-paper-2);
  color: var(--fo-body);
  font-family: var(--fo-font-text);
  font-size: var(--fo-fs-note);
  line-height: 1.55;
}

.fo-callout > * + * {
  margin-block-start: var(--fo-space-2);
}

.fo-callout__title {
  display: flex;
  align-items: center;
  gap: var(--fo-space-2);
  color: var(--fo-ink);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-semibold);
  letter-spacing: 0.01em;
}

.fo-callout__title svg {
  color: var(--fo-accent);
}

.fo-callout a {
  color: var(--fo-link);
}

/* Correction: amber rule, for changes made after publication */
.fo-callout--correction {
  border-inline-start-color: var(--fo-warn);
  background: var(--fo-warn-soft);
}

.fo-callout--correction .fo-callout__title svg {
  color: var(--fo-warn);
}

/* Plain: no tint, for a note inside a tinted section */
.fo-callout--plain {
  background: transparent;
  padding-block: var(--fo-space-1);
}

/* ---- timeline ---- */
/* Timeline: dated entries for a publication's history, a correction log or a roadmap.
   Dates in tabular Hanken, small square markers on a hairline, entries in Newsreader. */

.fo-timeline {
  padding: 0;
  list-style: none;
}

.fo-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--fo-space-1);
  padding-block-end: var(--fo-space-6);
  padding-inline-start: var(--fo-space-6);
}

.fo-timeline__item::before {
  content: "";
  position: absolute;
  inset-block: 0.5em 0;
  inset-inline-start: 4px;
  border-inline-start: var(--fo-line-hair) solid var(--fo-rule-strong);
}

.fo-timeline__item:last-child::before {
  display: none;
}

.fo-timeline__item::after {
  content: "";
  position: absolute;
  inset-block-start: 0.4em;
  inset-inline-start: 0;
  width: 9px;
  height: 9px;
  border: var(--fo-line-hair) solid var(--fo-ink);
  background: var(--fo-paper);
}

.fo-timeline__item--key::after {
  border-color: var(--fo-accent);
  background: var(--fo-accent);
}

.fo-timeline__date {
  color: var(--fo-muted);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

.fo-timeline__title {
  margin: 0;
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: 1.25rem;
  font-weight: var(--fo-weight-medium);
  line-height: 1.3;
}

.fo-timeline__text {
  color: var(--fo-body);
  font-size: var(--fo-fs-note);
  line-height: 1.55;
}

.fo-timeline__body > * + * {
  margin-block-start: var(--fo-space-1);
}

@media (min-width: 700px) {
  .fo-timeline__item {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: var(--fo-space-5);
    padding-inline-start: 0;
  }

  .fo-timeline__item::before {
    inset-inline-start: calc(8.5rem + var(--fo-space-2) + 4px);
  }

  .fo-timeline__item::after {
    inset-inline-start: calc(8.5rem + var(--fo-space-2));
  }

  .fo-timeline__date {
    text-align: end;
    padding-inline-end: var(--fo-space-2);
  }

  .fo-timeline__body {
    padding-inline-start: var(--fo-space-5);
  }
}

/* ---- series-nav ---- */
/* Series nav: "Part 2 of 5". The parts as a ruled row, the current part under a heavy oxblood rule,
   parts not yet published shown with their date and no link, then previous and next. */

.fo-series {
  font-family: var(--fo-font-ui);
}

.fo-series__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--fo-space-1) var(--fo-space-3);
  margin: 0 0 var(--fo-space-4);
}

.fo-series__name {
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: var(--fo-weight-regular);
}

.fo-series__count {
  color: var(--fo-muted);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-medium);
}

.fo-series__list {
  display: grid;
  grid-template-columns: repeat(var(--fo-parts, 5), minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.fo-series__item {
  min-width: 0;
}

.fo-series__item > a,
.fo-series__item > span {
  display: flex;
  flex-direction: column;
  gap: var(--fo-space-1);
  height: 100%;
  padding: var(--fo-space-3) var(--fo-space-3) var(--fo-space-3) 0;
  border-block-start: var(--fo-line-heavy) solid var(--fo-rule);
  color: var(--fo-body);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-medium);
  line-height: 1.35;
  text-decoration: none;
}

.fo-series__item + .fo-series__item > a,
.fo-series__item + .fo-series__item > span {
  margin-inline-start: 2px;
}

.fo-series__item > a:hover {
  border-block-start-color: var(--fo-ink);
  color: var(--fo-ink);
}

.fo-series__item > [aria-current="page"] {
  border-block-start-color: var(--fo-accent);
  color: var(--fo-ink);
}

.fo-series__num {
  color: var(--fo-muted);
  font-family: var(--fo-font-text);
  font-size: 1rem;
  font-style: italic;
  font-weight: var(--fo-weight-regular);
}

.fo-series__item > [aria-current="page"] .fo-series__num {
  color: var(--fo-link);
}

.fo-series__item.is-upcoming > span {
  border-block-start-style: dotted;
  color: var(--fo-muted);
}

.fo-series__date {
  color: var(--fo-muted);
  font-weight: var(--fo-weight-regular);
}

.fo-series__pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--fo-space-3);
  margin-block-start: var(--fo-space-4);
}

[dir="rtl"] .fo-series__pager svg {
  transform: scaleX(-1);
}

@media (max-width: 699px) {
  .fo-series__list {
    grid-template-columns: minmax(0, 1fr);
    border-block-end: var(--fo-line-hair) solid var(--fo-rule);
  }

  .fo-series__item > a,
  .fo-series__item > span {
    flex-direction: row;
    gap: var(--fo-space-3);
    padding: var(--fo-space-3) 0;
    border-block-start-width: var(--fo-line-hair);
    border-inline-start: var(--fo-line-heavy) solid transparent;
    padding-inline-start: var(--fo-space-3);
  }

  .fo-series__item + .fo-series__item > a,
  .fo-series__item + .fo-series__item > span {
    margin-inline-start: 0;
  }

  .fo-series__item > [aria-current="page"] {
    border-block-start-color: var(--fo-rule);
    border-inline-start-color: var(--fo-accent);
    background: var(--fo-paper-2);
  }

  .fo-series__date {
    margin-inline-start: auto;
  }
}

/* ---- author-card ---- */
/* Author card: who wrote this and what else they've written. A square avatar, a Newsreader name,
   a two or three sentence bio and links. Ends an article; leads an author page as --large. */

.fo-author {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--fo-space-4) var(--fo-space-5);
  align-items: start;
  padding-block: var(--fo-space-5);
  border-block: var(--fo-line-hair) solid var(--fo-rule);
}

.fo-author__body > * + * {
  margin-block-start: var(--fo-space-2);
}

.fo-author__name {
  margin: 0;
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: var(--fo-fs-subhead);
  font-weight: var(--fo-weight-medium);
  line-height: 1.2;
}

.fo-author__name a {
  color: inherit;
  text-decoration: none;
}

.fo-author__name a:hover {
  color: var(--fo-link);
  text-decoration: underline;
}

.fo-author__role {
  color: var(--fo-muted);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-medium);
}

.fo-author__bio {
  color: var(--fo-body);
  font-size: var(--fo-fs-note);
  line-height: 1.55;
}

.fo-author__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fo-space-1) var(--fo-space-5);
  margin: var(--fo-space-3) 0 0;
  padding: 0;
  list-style: none;
}

/* Large: the head of an author page */
.fo-author--large {
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  padding-block: 0;
  border-block: 0;
}

.fo-author--large .fo-author__name {
  font-size: var(--fo-fs-display);
  font-weight: var(--fo-weight-regular);
  line-height: var(--fo-lh-display);
  letter-spacing: var(--fo-track-display);
  font-variation-settings: "opsz" var(--fo-opsz-display);
}

.fo-author--large .fo-author__role {
  font-size: var(--fo-fs-ui);
}

.fo-author--large .fo-author__bio {
  font-size: var(--fo-fs-lede);
  font-style: italic;
  line-height: 1.45;
  color: var(--fo-muted);
}

@media (min-width: 700px) {
  .fo-author--large {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--fo-space-6);
    align-items: end;
  }
}

/* Large on the reading grid: the avatar hangs in the start wing, the name sits in the column */
.fo-author--large.fo-subgrid {
  column-gap: 0;
  row-gap: var(--fo-space-4);
  align-items: start;
}

@media (min-width: 1280px) {
  .fo-author--large.fo-subgrid > .fo-avatar {
    margin-block-start: var(--fo-space-3);
  }
}

/* ---- archive-list ---- */
/* Archive list: everything published, by year and month. The year in big Newsreader numerals under
   a heavy rule, months in small capitals, dates in tabular Hanken beside each title. */

.fo-archive + .fo-archive {
  margin-block-start: var(--fo-space-8);
}

.fo-archive__year {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fo-space-4);
  margin: 0;
  padding-block-start: var(--fo-space-3);
  border-block-start: var(--fo-line-heavy) solid var(--fo-ink);
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: var(--fo-fs-title);
  font-weight: var(--fo-weight-regular);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
  font-variation-settings: "opsz" var(--fo-opsz-display);
}

.fo-archive__total {
  color: var(--fo-muted);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-medium);
  letter-spacing: 0;
}

.fo-archive__month {
  margin: var(--fo-space-6) 0 0;
  padding-block-end: var(--fo-space-2);
  border-block-end: var(--fo-line-hair) solid var(--fo-ink);
  color: var(--fo-ink);
  font-family: var(--fo-font-text);
  font-size: 1.125rem;
  font-weight: var(--fo-weight-regular);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.07em;
}

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

.fo-archive__item {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  gap: var(--fo-space-4);
  align-items: baseline;
  padding-block: var(--fo-space-3);
  border-block-end: var(--fo-line-hair) solid var(--fo-rule);
}

.fo-archive__date {
  color: var(--fo-muted);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fo-archive__entry {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fo-archive__link {
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: 1.1875rem;
  font-weight: var(--fo-weight-medium);
  line-height: 1.3;
  text-decoration: none;
}

.fo-archive__link:hover {
  color: var(--fo-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.fo-archive__meta {
  margin: 0;
  color: var(--fo-muted);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-medium);
}

.fo-archive__meta .fo-badge {
  margin-inline-start: var(--fo-space-2);
}

@media (max-width: 539px) {
  .fo-archive__item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fo-space-1);
  }
}

/* ---- related-reading ---- */
/* Related reading: three pieces to read next, numbered in oxblood, divided by column rules. */

.fo-related__title {
  margin: 0 0 var(--fo-space-5);
  padding-block-start: var(--fo-space-3);
  border-block-start: var(--fo-line-heavy) solid var(--fo-ink);
  color: var(--fo-ink);
  font-family: var(--fo-font-text);
  font-size: 1.25rem;
  font-weight: var(--fo-weight-regular);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.07em;
  line-height: 1.2;
}

.fo-related__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: fo-related;
}

.fo-related__item {
  display: flex;
  flex-direction: column;
  gap: var(--fo-space-2);
  padding-inline: var(--fo-space-5);
  counter-increment: fo-related;
}

.fo-related__item + .fo-related__item {
  border-inline-start: var(--fo-line-hair) solid var(--fo-rule);
}

.fo-related__item:first-child {
  padding-inline-start: 0;
}

.fo-related__item:last-child {
  padding-inline-end: 0;
}

.fo-related__item::before {
  content: counter(fo-related);
  color: var(--fo-accent);
  font-family: var(--fo-font-display);
  font-size: 2.25rem;
  font-style: italic;
  line-height: 1;
  font-variation-settings: "opsz" var(--fo-opsz-display);
}

.fo-related__link {
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: 1.25rem;
  font-weight: var(--fo-weight-medium);
  line-height: 1.25;
  text-decoration: none;
  text-wrap: balance;
}

.fo-related__link:hover {
  color: var(--fo-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.fo-related__dek {
  color: var(--fo-muted);
  font-size: var(--fo-fs-note);
  font-style: italic;
  line-height: 1.5;
}

.fo-related__meta {
  margin-block-start: auto;
  color: var(--fo-muted);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-medium);
}

@media (max-width: 799px) {
  .fo-related__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .fo-related__item,
  .fo-related__item:first-child,
  .fo-related__item:last-child {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--fo-space-1) var(--fo-space-3);
    padding: var(--fo-space-4) 0;
  }

  .fo-related__item::before {
    grid-row: span 3;
    font-size: 1.75rem;
  }

  .fo-related__item + .fo-related__item {
    border-inline-start: 0;
    border-block-start: var(--fo-line-hair) solid var(--fo-rule);
  }
}

/* ---- reading-progress ---- */
/* Reading progress: a 3px oxblood line along the top edge that fills as the reader moves through the
   article. Decorative (aria-hidden); hidden without JavaScript; no easing when motion is reduced. */

.fo-reading-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 60;
  height: var(--fo-line-heavy);
  pointer-events: none;
}

.fo-reading-progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--fo-accent);
  transform: scaleX(var(--fo-progress, 0));
  transform-origin: 0 50%;
  transition: transform 90ms linear;
}

[dir="rtl"] .fo-reading-progress__bar {
  transform-origin: 100% 50%;
}

/* Static: inside a page, for previews and the kitchen sink */
.fo-reading-progress--static {
  position: relative;
  inset: auto;
  z-index: auto;
  background: var(--fo-rule);
}

@media (prefers-reduced-motion: reduce) {
  .fo-reading-progress__bar {
    transition: none;
  }
}

/* ---- forms ---- */
/* Forms: labels in Hanken above every field, 48px inputs on a lighter sheet with a 1px control
   border and 2px corners. Errors say what to do, in words, linked with aria-describedby. */

.fo-form {
  display: grid;
  gap: var(--fo-space-5);
}

.fo-form__row {
  display: grid;
  gap: var(--fo-space-5);
}

@media (min-width: 640px) {
  .fo-form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fo-field {
  display: grid;
  align-content: start;
  gap: var(--fo-space-2);
  min-width: 0;
}

.fo-label {
  color: var(--fo-ink);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-ui);
  font-weight: var(--fo-weight-semibold);
  line-height: var(--fo-lh-ui);
}

.fo-label__optional {
  margin-inline-start: var(--fo-space-1);
  color: var(--fo-muted);
  font-weight: var(--fo-weight-regular);
}

.fo-input,
.fo-select,
.fo-textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: var(--fo-line-hair) solid var(--fo-control);
  border-radius: var(--fo-radius-input);
  background: var(--fo-surface);
  color: var(--fo-ink);
  font-family: var(--fo-font-ui);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--fo-dur-fast) var(--fo-ease), box-shadow var(--fo-dur-fast) var(--fo-ease);
}

.fo-textarea {
  min-height: 9rem;
  font-family: var(--fo-font-text);
  font-size: 1.0625rem;
  line-height: 1.55;
  resize: vertical;
}

.fo-input::placeholder,
.fo-textarea::placeholder {
  color: var(--fo-muted);
  opacity: 1;
}

.fo-input:hover,
.fo-select:hover,
.fo-textarea:hover {
  border-color: var(--fo-ink);
}

.fo-input:focus-visible,
.fo-select:focus-visible,
.fo-textarea:focus-visible {
  border-color: var(--fo-ink);
  outline: 2px solid var(--fo-focus);
  outline-offset: 1px;
}

.fo-select {
  appearance: none;
  padding-inline-end: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--fo-ink) 50%),
    linear-gradient(135deg, var(--fo-ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

[dir="rtl"] .fo-select {
  background-position: 15px 52%, 20px 52%;
}

.fo-hint {
  color: var(--fo-muted);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
  line-height: 1.45;
}

.fo-error,
.fo-success {
  display: flex;
  align-items: flex-start;
  gap: var(--fo-space-2);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-semibold);
  line-height: 1.45;
}

.fo-error {
  color: var(--fo-danger);
}

.fo-success {
  color: var(--fo-ok);
}

.fo-error svg,
.fo-success svg {
  flex: none;
  margin-block-start: 1px;
}

/* States */
.fo-input[aria-invalid="true"],
.fo-select[aria-invalid="true"],
.fo-textarea[aria-invalid="true"] {
  border-color: var(--fo-danger);
  box-shadow: inset 0 0 0 1px var(--fo-danger);
}

.fo-field--ok .fo-input,
.fo-field--ok .fo-select,
.fo-field--ok .fo-textarea {
  border-color: var(--fo-ok);
}

.fo-input:disabled,
.fo-select:disabled,
.fo-textarea:disabled {
  border-color: var(--fo-rule);
  background: var(--fo-paper-2);
  color: var(--fo-muted);
  cursor: not-allowed;
}

.fo-input:read-only:not(:disabled) {
  border-style: dashed;
  background: transparent;
}

.fo-field:has(:disabled) .fo-label {
  color: var(--fo-muted);
}

/* Checkbox and radio: native controls in the accent color */
.fo-check {
  display: flex;
  align-items: flex-start;
  gap: var(--fo-space-3);
  min-height: 44px;
  padding-block: var(--fo-space-2);
  color: var(--fo-body);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-ui);
  line-height: 1.45;
  cursor: pointer;
}

.fo-check__input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--fo-accent);
  cursor: pointer;
}

.fo-check__hint {
  display: block;
  color: var(--fo-muted);
  font-size: var(--fo-fs-meta);
}

.fo-check:has(:disabled) {
  color: var(--fo-muted);
  cursor: not-allowed;
}

/* Fieldset */
.fo-fieldset {
  display: grid;
  gap: var(--fo-space-2);
}

.fo-legend {
  margin-block-end: var(--fo-space-2);
  padding: 0;
  color: var(--fo-ink);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-ui);
  font-weight: var(--fo-weight-semibold);
}

.fo-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fo-space-3) var(--fo-space-5);
  padding-block-start: var(--fo-space-2);
}

.fo-form__foot .fo-hint {
  flex: 1 1 16rem;
}

/* Card: a ruled sheet for a form that stands alone on a page */
.fo-form--sheet {
  padding: clamp(var(--fo-space-5), 4vw, var(--fo-space-7));
  border: var(--fo-line-hair) solid var(--fo-rule);
  border-block-start: var(--fo-line-heavy) solid var(--fo-ink);
  background: var(--fo-surface);
}

@media (prefers-reduced-motion: reduce) {
  .fo-input,
  .fo-select,
  .fo-textarea {
    transition: none;
  }
}

/* ---- switch ---- */
/* Switch: an on/off setting that applies at once. A native checkbox with role="switch", drawn as a
   squared track and a square knob, so it matches the 2px corners everywhere else. */

.fo-switch {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fo-space-4);
  min-height: 44px;
  padding-block: var(--fo-space-2);
  font-family: var(--fo-font-ui);
  cursor: pointer;
}

.fo-switch__text {
  display: grid;
  gap: 2px;
}

.fo-switch__label {
  color: var(--fo-ink);
  font-size: var(--fo-fs-ui);
  font-weight: var(--fo-weight-semibold);
  line-height: 1.4;
}

.fo-switch__hint {
  color: var(--fo-muted);
  font-size: var(--fo-fs-meta);
  line-height: 1.45;
}

.fo-switch__input {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  margin: 0;
  border: var(--fo-line-hair) solid var(--fo-control);
  border-radius: var(--fo-radius-control);
  background: var(--fo-surface);
  appearance: none;
  cursor: pointer;
  transition: background-color var(--fo-dur) var(--fo-ease), border-color var(--fo-dur) var(--fo-ease);
}

.fo-switch__input::before {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  width: 18px;
  height: 18px;
  border-radius: 1px;
  background: var(--fo-muted);
  transition: transform var(--fo-dur) var(--fo-ease), background-color var(--fo-dur) var(--fo-ease);
}

.fo-switch__input:checked {
  border-color: var(--fo-accent);
  background: var(--fo-accent);
}

.fo-switch__input:checked::before {
  background: var(--fo-accent-ink);
  transform: translateX(18px);
}

[dir="rtl"] .fo-switch__input:checked::before {
  transform: translateX(-18px);
}

.fo-switch__input:focus-visible {
  outline: 2px solid var(--fo-focus);
  outline-offset: 3px;
}

.fo-switch__input:disabled {
  border-color: var(--fo-rule);
  background: var(--fo-paper-2);
  cursor: not-allowed;
}

.fo-switch__input:disabled::before {
  background: var(--fo-rule-strong);
}

.fo-switch:has(:disabled) {
  cursor: not-allowed;
}

.fo-switch:has(:disabled) .fo-switch__label {
  color: var(--fo-muted);
}

/* A ruled list of settings */
.fo-switches {
  padding: 0;
  list-style: none;
  border-block: var(--fo-line-hair) solid var(--fo-rule);
}

.fo-switches > li + li {
  border-block-start: var(--fo-line-hair) solid var(--fo-rule);
}

.fo-switches .fo-switch {
  padding-block: var(--fo-space-4);
}

@media (prefers-reduced-motion: reduce) {
  .fo-switch__input,
  .fo-switch__input::before {
    transition: none;
  }
}

/* ---- choice-cards ---- */
/* Choice cards: a radio group where each option needs a sentence and maybe a price. Ruled tiles; the
   chosen one gets an ink frame and an oxblood dot. The whole tile is the label. */

.fo-choices__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--fo-space-3);
}

.fo-choice {
  position: relative;
  display: flex;
  gap: var(--fo-space-3);
  min-height: 44px;
  padding: var(--fo-space-4);
  border: var(--fo-line-hair) solid var(--fo-rule-strong);
  border-radius: var(--fo-radius-control);
  background: var(--fo-surface);
  cursor: pointer;
  transition: border-color var(--fo-dur-fast) var(--fo-ease), box-shadow var(--fo-dur-fast) var(--fo-ease);
}

.fo-choice:hover {
  border-color: var(--fo-ink);
}

.fo-choice__input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--fo-accent);
  cursor: pointer;
}

.fo-choice__body {
  display: grid;
  gap: var(--fo-space-1);
  min-width: 0;
}

.fo-choice__title {
  color: var(--fo-ink);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-ui);
  font-weight: var(--fo-weight-semibold);
  line-height: 1.35;
}

.fo-choice__text {
  color: var(--fo-muted);
  font-family: var(--fo-font-text);
  font-size: var(--fo-fs-note);
  line-height: 1.45;
}

.fo-choice__price {
  margin-block-start: var(--fo-space-1);
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: 1.375rem;
  font-variant-numeric: lining-nums;
  line-height: 1.1;
}

.fo-choice__price small {
  color: var(--fo-muted);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
}

.fo-choice:has(:checked) {
  border-color: var(--fo-ink);
  box-shadow: inset 0 0 0 1px var(--fo-ink);
}

.fo-choice:has(:focus-visible) {
  outline: 2px solid var(--fo-focus);
  outline-offset: 3px;
}

.fo-choice:has(:disabled) {
  border-color: var(--fo-rule);
  background: var(--fo-paper-2);
  cursor: not-allowed;
}

.fo-choice:has(:disabled) .fo-choice__title,
.fo-choice:has(:disabled) .fo-choice__price {
  color: var(--fo-muted);
}

.fo-choices--error .fo-choice {
  border-color: var(--fo-danger);
}

.fo-choices .fo-error {
  margin-block-start: var(--fo-space-2);
}

@media (prefers-reduced-motion: reduce) {
  .fo-choice {
    transition: none;
  }
}

/* ---- search-field ---- */
/* Search field: searching an archive. Default is a ruled box with a search icon and a submit button;
   --line is the editorial version, a large italic field on a single ink rule (404 and archive heads). */

.fo-search__box {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--fo-space-2);
}

.fo-search__icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 14px;
  color: var(--fo-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.fo-search__input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 11px 14px;
  padding-inline-start: 44px;
  border: var(--fo-line-hair) solid var(--fo-control);
  border-radius: var(--fo-radius-input);
  background: var(--fo-surface);
  color: var(--fo-ink);
  font-family: var(--fo-font-ui);
  font-size: 1rem;
}

.fo-search__input::placeholder {
  color: var(--fo-muted);
  opacity: 1;
}

.fo-search__input:hover {
  border-color: var(--fo-ink);
}

.fo-search__input:focus-visible {
  border-color: var(--fo-ink);
  outline: 2px solid var(--fo-focus);
  outline-offset: 1px;
}

.fo-search__input::-webkit-search-cancel-button {
  cursor: pointer;
}

.fo-search__submit {
  flex: none;
  min-height: 48px;
}

.fo-search__hint {
  margin-block-start: var(--fo-space-2);
  color: var(--fo-muted);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
}

/* Line: one ink rule under a large italic field */
.fo-search--line .fo-search__box {
  align-items: center;
  border-block-end: var(--fo-line-hair) solid var(--fo-ink);
}

.fo-search--line .fo-search__icon {
  inset-inline-start: 0;
  color: var(--fo-ink);
}

.fo-search--line .fo-search__input {
  min-height: 60px;
  padding-inline: 36px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--fo-font-text);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  font-style: italic;
}

.fo-search--line .fo-search__input:focus-visible {
  outline-offset: 4px;
}

.fo-search--line .fo-search__submit {
  min-height: 44px;
}

/* Busy: results on the way */
.fo-search.is-busy .fo-search__icon {
  animation: fo-search-pulse 900ms var(--fo-ease) infinite alternate;
}

@keyframes fo-search-pulse {
  to {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fo-search.is-busy .fo-search__icon {
    animation: none;
  }
}

/* ---- file-drop ---- */
/* File drop: attach a draft or a pitch. The whole zone is the file input's label; dropping a file
   works with JS, choosing one works without it. Lists chosen files under the zone. */

.fo-drop {
  display: grid;
  gap: var(--fo-space-3);
}

.fo-drop__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.fo-drop__zone {
  display: grid;
  justify-items: center;
  gap: var(--fo-space-2);
  padding: var(--fo-space-6) var(--fo-space-5);
  border: var(--fo-line-hair) dashed var(--fo-control);
  border-radius: var(--fo-radius-control);
  background: var(--fo-surface);
  color: var(--fo-body);
  font-family: var(--fo-font-ui);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--fo-dur-fast) var(--fo-ease), background-color var(--fo-dur-fast) var(--fo-ease);
}

.fo-drop__zone:hover {
  border-color: var(--fo-ink);
}

.fo-drop__icon {
  color: var(--fo-accent);
  line-height: 0;
}

.fo-drop__title {
  color: var(--fo-ink);
  font-size: var(--fo-fs-ui);
  font-weight: var(--fo-weight-semibold);
}

.fo-drop__title u {
  color: var(--fo-link);
  text-underline-offset: 0.2em;
}

.fo-drop__hint {
  color: var(--fo-muted);
  font-size: var(--fo-fs-meta);
}

.fo-drop__input:focus-visible + .fo-drop__zone {
  border-color: var(--fo-ink);
  outline: 2px solid var(--fo-focus);
  outline-offset: 3px;
}

.fo-drop.is-dragover .fo-drop__zone {
  border-style: solid;
  border-color: var(--fo-accent);
  background: var(--fo-accent-soft);
}

.fo-drop.is-error .fo-drop__zone {
  border-color: var(--fo-danger);
}

.fo-drop__input:disabled + .fo-drop__zone {
  border-color: var(--fo-rule);
  background: var(--fo-paper-2);
  color: var(--fo-muted);
  cursor: not-allowed;
}

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

.fo-drop__files:empty {
  display: none;
}

.fo-drop__file {
  display: flex;
  align-items: center;
  gap: var(--fo-space-3);
  padding-block: var(--fo-space-2);
  border-block-end: var(--fo-line-hair) solid var(--fo-rule);
  color: var(--fo-ink);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
}

.fo-drop__file:first-child {
  border-block-start: var(--fo-line-hair) solid var(--fo-rule);
}

.fo-drop__file svg {
  color: var(--fo-muted);
}

.fo-drop__size {
  margin-inline-start: auto;
  color: var(--fo-muted);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .fo-drop__zone {
    transition: none;
  }
}

/* ---- newsletter ---- */
/* Newsletter: the email row. A labelled email field and one primary button side by side, a fine-print
   line under them that answers how often and how to leave. Stacks under 480px. */

.fo-newsletter {
  display: grid;
  gap: var(--fo-space-2);
}

.fo-newsletter__row {
  display: flex;
  gap: var(--fo-space-2);
}

.fo-newsletter__row .fo-input {
  flex: 1;
  min-width: 0;
}

.fo-newsletter__row .fo-btn {
  flex: none;
  min-height: 48px;
}

.fo-newsletter__fine {
  color: var(--fo-muted);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
  line-height: 1.45;
}

.fo-newsletter__done {
  display: flex;
  align-items: center;
  gap: var(--fo-space-2);
  min-height: 48px;
  padding: var(--fo-space-2) var(--fo-space-4);
  border-inline-start: var(--fo-line-heavy) solid var(--fo-ok);
  background: var(--fo-ok-soft);
  color: var(--fo-ink);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-ui);
  font-weight: var(--fo-weight-medium);
}

.fo-newsletter__done svg {
  color: var(--fo-ok);
}

.fo-newsletter--center {
  justify-items: center;
  text-align: center;
}

.fo-newsletter--center .fo-newsletter__row {
  width: 100%;
}

@media (max-width: 479px) {
  .fo-newsletter__row {
    flex-direction: column;
  }

  .fo-newsletter__row .fo-btn {
    width: 100%;
  }
}

/* ---- subscribe-block ---- */
/* Subscribe block: the newsletter pitch in two sizes. --inline breaks the text once, mid-article,
   between hairlines. --end closes an article or page under a double rule, with a sample link. */

.fo-subscribe {
  display: grid;
  gap: var(--fo-space-4);
}

.fo-subscribe__title {
  margin: 0;
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: var(--fo-fs-headline);
  font-weight: var(--fo-weight-regular);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" var(--fo-opsz-display);
  text-wrap: balance;
}

.fo-subscribe__dek {
  color: var(--fo-muted);
  font-family: var(--fo-font-text);
  font-size: var(--fo-fs-note);
  font-style: italic;
  line-height: 1.5;
}

.fo-subscribe__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fo-space-1) var(--fo-space-5);
}

/* Inline: between paragraphs */
.fo-subscribe--inline {
  margin-block: 2em;
  padding-block: var(--fo-space-5);
  border-block: var(--fo-line-hair) solid var(--fo-ink);
}

.fo-subscribe--inline .fo-subscribe__title {
  font-size: var(--fo-fs-subhead);
  font-weight: var(--fo-weight-medium);
}

/* End: the last block of an article or page */
.fo-subscribe--end {
  gap: var(--fo-space-5);
  padding-block-start: var(--fo-space-6);
  border-block-start: var(--fo-line-heavy) solid var(--fo-ink);
  position: relative;
}

.fo-subscribe--end::before {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline: 0;
  border-block-start: var(--fo-line-hair) solid var(--fo-ink);
}

.fo-subscribe--end .fo-subscribe__title {
  font-size: var(--fo-fs-title);
}

.fo-subscribe--end .fo-subscribe__dek {
  font-size: var(--fo-fs-lede);
  line-height: 1.4;
}

@media (min-width: 900px) {
  .fo-subscribe--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--fo-space-4) var(--fo-space-8);
    align-items: start;
  }

  .fo-subscribe--split > .fo-subscribe__text {
    grid-row: span 2;
  }

  .fo-subscribe--split .fo-subscribe__title {
    font-size: var(--fo-fs-title);
  }
}

/* ---- tables ---- */
/* Tables: book tables. A heavy rule above and below, a fine rule under the head, hairlines between
   rows, an italic caption, tabular numerals. --stack turns rows into labelled blocks under 640px. */

.fo-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.fo-table {
  width: 100%;
  border-collapse: collapse;
  border-block: var(--fo-line-heavy) solid var(--fo-ink);
  color: var(--fo-body);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-ui);
  line-height: 1.45;
  font-variant-numeric: tabular-nums lining-nums;
}

.fo-table caption {
  padding-block-end: var(--fo-space-3);
  color: var(--fo-muted);
  font-family: var(--fo-font-text);
  font-size: var(--fo-fs-note);
  font-style: italic;
  text-align: start;
}

.fo-table th,
.fo-table td {
  padding: 12px 14px;
  border-block-end: var(--fo-line-hair) solid var(--fo-rule);
  text-align: start;
  vertical-align: top;
}

.fo-table :is(th, td):first-child {
  padding-inline-start: 0;
}

.fo-table :is(th, td):last-child {
  padding-inline-end: 0;
}

.fo-table thead th {
  border-block-end: var(--fo-line-hair) solid var(--fo-ink);
  color: var(--fo-ink);
  font-size: var(--fo-fs-small);
  font-weight: var(--fo-weight-semibold);
  letter-spacing: var(--fo-track-caps);
  text-transform: uppercase;
  vertical-align: bottom;
}

.fo-table tbody th {
  color: var(--fo-ink);
  font-weight: var(--fo-weight-semibold);
}

.fo-table tbody tr:last-child > * {
  border-block-end: 0;
}

.fo-table .fo-num {
  text-align: end;
  white-space: nowrap;
}

.fo-table__group th {
  padding-block-start: var(--fo-space-5);
  border-block-end-color: var(--fo-rule-strong);
  color: var(--fo-ink);
  font-family: var(--fo-font-text);
  font-size: 1.0625rem;
  font-variant-caps: all-small-caps;
  font-weight: var(--fo-weight-regular);
  letter-spacing: 0.07em;
  text-transform: none;
}

.fo-table__featured {
  background: var(--fo-accent-soft);
}

.fo-yes,
.fo-no {
  display: inline-flex;
  align-items: center;
  gap: var(--fo-space-1);
}

.fo-yes {
  color: var(--fo-ok);
}

.fo-no {
  color: var(--fo-muted);
}

.fo-table--compact th,
.fo-table--compact td {
  padding-block: 8px;
  font-size: var(--fo-fs-meta);
}

@media (max-width: 639px) {
  .fo-table--stack {
    border-block-end: 0;
  }

  .fo-table--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .fo-table--stack tbody tr {
    display: block;
    padding-block: var(--fo-space-3);
    border-block-end: var(--fo-line-hair) solid var(--fo-rule);
  }

  .fo-table--stack tbody tr.fo-table__group {
    padding-block-end: 0;
    border-block-end: var(--fo-line-hair) solid var(--fo-ink);
  }

  .fo-table--stack :is(th, td) {
    display: flex;
    justify-content: space-between;
    gap: var(--fo-space-4);
    padding: 4px 0;
    border: 0;
    text-align: end;
  }

  .fo-table--stack tbody th {
    font-size: 1.0625rem;
    text-align: start;
  }

  .fo-table--stack td[data-label]::before {
    content: attr(data-label);
    color: var(--fo-muted);
    font-weight: var(--fo-weight-medium);
    text-align: start;
  }

  .fo-table--stack .fo-num {
    text-align: end;
  }
}

/* ---- description-list ---- */
/* Description list: a colophon. Small-capital terms beside Newsreader values, one hairline per row.
   For issue details, account details and article metadata. */

.fo-dl {
  border-block: var(--fo-line-hair) solid var(--fo-ink);
}

.fo-dl__row {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: var(--fo-space-2) var(--fo-space-5);
  align-items: baseline;
  padding-block: var(--fo-space-3);
}

.fo-dl__row + .fo-dl__row {
  border-block-start: var(--fo-line-hair) solid var(--fo-rule);
}

.fo-dl dt {
  color: var(--fo-muted);
  font-family: var(--fo-font-text);
  font-size: 1.0625rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

.fo-dl dd {
  margin: 0;
  color: var(--fo-ink);
  font-family: var(--fo-font-text);
  font-size: var(--fo-fs-note);
  line-height: 1.5;
}

.fo-dl dd .fo-num {
  font-family: var(--fo-font-ui);
}

/* Stacked: term above value, for narrow columns and the margin */
.fo-dl--stacked .fo-dl__row {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

@media (max-width: 479px) {
  .fo-dl__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

/* ---- pagination ---- */
/* Pagination: "Newer" and "Older" in words at the ends, Newsreader numerals between them, the
   current page under an oxblood rule. Unavailable ends are plain text, not links. */

.fo-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fo-space-3);
  padding-block-start: var(--fo-space-4);
  border-block-start: var(--fo-line-hair) solid var(--fo-ink);
  font-family: var(--fo-font-ui);
}

.fo-pages__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fo-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fo-pages__link,
.fo-pages__gap {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  padding-inline: var(--fo-space-2);
  color: var(--fo-body);
  font-family: var(--fo-font-text);
  font-size: 1.125rem;
  font-variant-numeric: lining-nums tabular-nums;
  text-decoration: none;
}

.fo-pages__link {
  border-block-end: 2px solid transparent;
}

.fo-pages__link:hover {
  border-block-end-color: var(--fo-rule-strong);
  color: var(--fo-ink);
}

.fo-pages__link[aria-current="page"] {
  border-block-end-color: var(--fo-accent);
  color: var(--fo-ink);
  font-weight: var(--fo-weight-semibold);
}

.fo-pages__gap {
  color: var(--fo-muted);
}

.fo-pages__step {
  display: inline-flex;
  align-items: center;
  gap: var(--fo-space-2);
  min-height: 44px;
  color: var(--fo-link);
  font-size: var(--fo-fs-ui);
  font-weight: var(--fo-weight-medium);
  text-decoration: none;
}

a.fo-pages__step:hover {
  color: var(--fo-ink);
  text-decoration: underline;
}

.fo-pages__step[aria-disabled="true"] {
  color: var(--fo-muted);
  cursor: default;
}

[dir="rtl"] .fo-pages__step svg {
  transform: scaleX(-1);
}

.fo-pages__status {
  color: var(--fo-muted);
  font-size: var(--fo-fs-meta);
}

@media (max-width: 539px) {
  .fo-pages__list > li:not(:has([aria-current])):not(:first-child):not(:last-child) {
    display: none;
  }
}

@media (pointer: coarse) {
  .fo-pages__link,
  .fo-pages__gap {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ---- chart ---- */
/* Chart: inline SVG marks that read only the viz tokens, with HTML labels that never shrink below
   14px, a legend, direct value labels and a data table behind a disclosure. No chart library. */

.fo-chart {
  font-family: var(--fo-font-ui);
}

.fo-chart__head {
  margin-block-end: var(--fo-space-4);
}

.fo-chart__title {
  margin: 0;
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: 1.25rem;
  font-weight: var(--fo-weight-medium);
  line-height: 1.3;
}

.fo-chart__sub {
  margin: var(--fo-space-1) 0 0;
  color: var(--fo-muted);
  font-family: var(--fo-font-text);
  font-size: var(--fo-fs-note);
  font-style: italic;
  line-height: 1.45;
}

/* Series colors: categorical first, then sequential and diverging steps */
.fo-chart__s1 { --fo-c: var(--fo-viz-1); }
.fo-chart__s2 { --fo-c: var(--fo-viz-2); }
.fo-chart__s3 { --fo-c: var(--fo-viz-3); }
.fo-chart__s4 { --fo-c: var(--fo-viz-4); }
.fo-chart__s5 { --fo-c: var(--fo-viz-5); }
.fo-chart__s6 { --fo-c: var(--fo-viz-6); }
.fo-chart__q1 { --fo-c: var(--fo-seq-1); }
.fo-chart__q2 { --fo-c: var(--fo-seq-2); }
.fo-chart__q3 { --fo-c: var(--fo-seq-3); }
.fo-chart__q4 { --fo-c: var(--fo-seq-4); }
.fo-chart__q5 { --fo-c: var(--fo-seq-5); }
.fo-chart__d1 { --fo-c: var(--fo-div-1); }
.fo-chart__d2 { --fo-c: var(--fo-div-2); }
.fo-chart__d3 { --fo-c: var(--fo-div-3); }
.fo-chart__d4 { --fo-c: var(--fo-div-4); }
.fo-chart__d5 { --fo-c: var(--fo-div-5); }

/* Bars: one row per value, an svg bar between an HTML label and an HTML value */
.fo-chart__bars {
  display: grid;
  gap: var(--fo-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fo-chart__row {
  display: grid;
  grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr) 3.5rem;
  gap: var(--fo-space-3);
  align-items: center;
}

.fo-chart__label {
  color: var(--fo-ink);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-medium);
  line-height: 1.3;
}

.fo-chart__track {
  display: block;
  width: 100%;
  height: 22px;
  border-inline-start: var(--fo-line-hair) solid var(--fo-ink);
}

.fo-chart__bar {
  fill: var(--fo-c, var(--fo-viz-1));
}

.fo-chart__grid {
  stroke: var(--fo-rule);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.fo-chart__value {
  color: var(--fo-ink);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-semibold);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

/* Line: the plot stretches; labels stay HTML */
.fo-chart__plot {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: var(--fo-space-2) var(--fo-space-3);
}

.fo-chart__yaxis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--fo-muted);
  font-size: var(--fo-fs-meta);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: end;
}

.fo-chart__svg {
  display: block;
  width: 100%;
  height: 200px;
  overflow: visible;
  border-block-end: var(--fo-line-hair) solid var(--fo-ink);
}

.fo-chart__line {
  fill: none;
  stroke: var(--fo-c, var(--fo-viz-1));
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.fo-chart__line--dashed {
  stroke-dasharray: 6 5;
}

.fo-chart__area {
  fill: var(--fo-c, var(--fo-viz-1));
  opacity: 0.12;
}

.fo-chart__xaxis {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  color: var(--fo-muted);
  font-size: var(--fo-fs-meta);
  font-variant-numeric: tabular-nums;
}

/* Donut: segments drawn with stroke-dasharray on one circle each */
.fo-chart__donut {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: var(--fo-space-6);
  align-items: center;
}

.fo-chart__ring {
  position: relative;
  display: grid;
  place-items: center;
}

.fo-chart__ring svg {
  width: 100%;
  height: auto;
  transform: rotate(-90deg);
}

.fo-chart__seg {
  fill: none;
  stroke: var(--fo-c, var(--fo-viz-1));
  stroke-width: 6;
}

.fo-chart__hole {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

.fo-chart__total {
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: 2rem;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.fo-chart__total-label {
  color: var(--fo-muted);
  font-size: var(--fo-fs-meta);
}

/* Legend: a swatch shaped like the mark, the name, the value */
.fo-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fo-space-2) var(--fo-space-5);
  margin: var(--fo-space-4) 0 0;
  padding: 0;
  list-style: none;
  color: var(--fo-body);
  font-size: var(--fo-fs-meta);
}

.fo-chart__donut .fo-chart__legend {
  display: grid;
  gap: var(--fo-space-2);
  margin: 0;
}

.fo-chart__key {
  display: flex;
  align-items: center;
  gap: var(--fo-space-2);
}

.fo-chart__key::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background: var(--fo-c, var(--fo-viz-1));
}

.fo-chart__key--line::before {
  height: 3px;
}

.fo-chart__key--dashed::before {
  height: 0;
  border-block-start: 3px dashed var(--fo-c, var(--fo-viz-1));
  background: none;
}

.fo-chart__key b {
  margin-inline-start: auto;
  padding-inline-start: var(--fo-space-3);
  color: var(--fo-ink);
  font-weight: var(--fo-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.fo-chart__data {
  margin-block-start: var(--fo-space-4);
  font-size: var(--fo-fs-meta);
}

.fo-chart__data > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--fo-link);
  font-weight: var(--fo-weight-medium);
  cursor: pointer;
}

.fo-chart__data > summary:hover {
  color: var(--fo-ink);
  text-decoration: underline;
}

.fo-chart__data .fo-table {
  margin-block-start: var(--fo-space-2);
}

.fo-chart__source {
  margin-block-start: var(--fo-space-3);
  color: var(--fo-muted);
  font-size: var(--fo-fs-meta);
}

@media (max-width: 539px) {
  .fo-chart__row {
    grid-template-columns: minmax(0, 1fr) 3rem;
    gap: var(--fo-space-1) var(--fo-space-3);
  }

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

  .fo-chart__donut {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .fo-chart__ring {
    width: min(14rem, 100%);
  }

  .fo-chart__donut .fo-chart__legend {
    width: 100%;
  }
}

/* ---- faq ---- */
/* FAQ: native details between hairlines. Questions in Newsreader, a plus that turns into a cross,
   answers in running text. Works with no JavaScript. */

.fo-faq {
  border-block-start: var(--fo-line-hair) solid var(--fo-ink);
}

.fo-faq__item {
  border-block-end: var(--fo-line-hair) solid var(--fo-rule);
}

.fo-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fo-space-4);
  min-height: 44px;
  padding-block: var(--fo-space-4);
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: 1.25rem;
  font-weight: var(--fo-weight-medium);
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

.fo-faq__q::-webkit-details-marker {
  display: none;
}

.fo-faq__q:hover {
  color: var(--fo-link);
}

.fo-faq__q:focus-visible {
  outline: 2px solid var(--fo-focus);
  outline-offset: 2px;
}

.fo-faq__icon {
  flex: none;
  margin-block-start: 0.15em;
  color: var(--fo-accent);
  line-height: 0;
  transition: transform var(--fo-dur) var(--fo-ease);
}

.fo-faq__item[open] > .fo-faq__q .fo-faq__icon {
  transform: rotate(45deg);
}

.fo-faq__a {
  padding-block-end: var(--fo-space-5);
  padding-inline-end: var(--fo-space-7);
  color: var(--fo-body);
  font-size: var(--fo-fs-body);
  line-height: var(--fo-lh-body);
}

.fo-faq__a > * + * {
  margin-block-start: var(--fo-space-3);
}

.fo-faq__contact {
  margin-block-start: var(--fo-space-5);
  color: var(--fo-muted);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
}

@media (max-width: 539px) {
  .fo-faq__a {
    padding-inline-end: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fo-faq__icon {
    transition: none;
  }
}

/* ---- alert ---- */
/* Alert: an inline status message with an icon, a title and what to do next. A heavy start rule in
   the status color on a soft tint. role="status" for news, role="alert" only for errors. */

.fo-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--fo-space-3);
  padding: var(--fo-space-4) var(--fo-space-4) var(--fo-space-4) var(--fo-space-5);
  border-inline-start: var(--fo-line-heavy) solid var(--fo-ink);
  background: var(--fo-paper-2);
  color: var(--fo-ink);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-ui);
  line-height: 1.5;
}

.fo-alert[hidden] {
  display: none;
}

.fo-alert__icon {
  flex: none;
  margin-block-start: 1px;
  line-height: 0;
}

.fo-alert__body {
  flex: 1;
  min-width: 0;
}

.fo-alert__body > * + * {
  margin-block-start: var(--fo-space-1);
}

.fo-alert__title {
  color: var(--fo-ink);
  font-weight: var(--fo-weight-semibold);
}

.fo-alert__text {
  color: var(--fo-body);
}

.fo-alert__text a {
  color: var(--fo-ink);
  font-weight: var(--fo-weight-semibold);
}

.fo-alert__close {
  flex: none;
  margin: -6px -6px -6px 0;
}

.fo-alert--ok {
  border-inline-start-color: var(--fo-ok);
  background: var(--fo-ok-soft);
}

.fo-alert--ok .fo-alert__icon {
  color: var(--fo-ok);
}

.fo-alert--warn {
  border-inline-start-color: var(--fo-warn);
  background: var(--fo-warn-soft);
}

.fo-alert--warn .fo-alert__icon {
  color: var(--fo-warn);
}

.fo-alert--danger {
  border-inline-start-color: var(--fo-danger);
  background: var(--fo-danger-soft);
}

.fo-alert--danger .fo-alert__icon {
  color: var(--fo-danger);
}

/* ---- toast ---- */
/* Toast: a short confirmation in ink on the page corner, read out by a polite live region.
   It never carries the only copy of important information and it never steals focus. */

.fo-toasts {
  position: fixed;
  inset-block-end: var(--fo-space-5);
  inset-inline-end: var(--fo-space-5);
  z-index: 80;
  display: grid;
  gap: var(--fo-space-2);
  width: min(24rem, calc(100% - 2 * var(--fo-space-5)));
  pointer-events: none;
}

.fo-toast {
  display: flex;
  align-items: center;
  gap: var(--fo-space-3);
  padding: var(--fo-space-3) var(--fo-space-2) var(--fo-space-3) var(--fo-space-4);
  border-radius: var(--fo-radius-control);
  background: var(--fo-ink);
  color: var(--fo-paper);
  box-shadow: var(--fo-shadow-float);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-ui);
  line-height: 1.4;
  pointer-events: auto;
  animation: fo-toast-in var(--fo-dur) var(--fo-ease);
}

.fo-toast__icon {
  flex: none;
  color: var(--fo-paper);
  line-height: 0;
}

.fo-toast__text {
  flex: 1;
  margin: 0;
}

.fo-toast__action {
  color: var(--fo-paper);
  font-weight: var(--fo-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.fo-toast__action:hover {
  color: var(--fo-paper);
  text-decoration-thickness: 2px;
}

.fo-toast__close {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--fo-radius-control);
  background: transparent;
  color: var(--fo-paper);
  cursor: pointer;
}

.fo-toast__close:hover {
  background: var(--fo-body);
}

.fo-toast__close:focus-visible,
.fo-toast__action:focus-visible {
  outline: 2px solid var(--fo-paper);
  outline-offset: 2px;
}

.fo-toast.is-leaving {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--fo-dur) var(--fo-ease), transform var(--fo-dur) var(--fo-ease);
}

/* Static: shown in place, for previews */
.fo-toasts--static {
  position: static;
  width: auto;
  max-width: 24rem;
  pointer-events: auto;
}

@keyframes fo-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (max-width: 479px) {
  .fo-toasts {
    inset-inline: var(--fo-space-3);
    inset-block-end: var(--fo-space-3);
    width: auto;
  }

  .fo-toasts--static {
    width: auto;
  }
}

@media (pointer: coarse) {
  .fo-toast__close {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fo-toast {
    animation: none;
  }

  .fo-toast.is-leaving {
    transform: none;
    transition: none;
  }
}

/* ---- dialog ---- */
/* Dialog: native <dialog> opened with showModal(). A ruled sheet with a heavy ink top rule, a
   Newsreader title, the body and the action pair. Escape and the close button both close it. */

.fo-dialog {
  width: min(34rem, calc(100% - 2 * var(--fo-space-4)));
  max-height: calc(100% - 2 * var(--fo-space-6));
  margin: auto;
  padding: 0;
  border: var(--fo-line-hair) solid var(--fo-rule-strong);
  border-block-start: var(--fo-line-heavy) solid var(--fo-ink);
  border-radius: var(--fo-radius-control);
  background: var(--fo-surface);
  color: var(--fo-body);
  box-shadow: var(--fo-shadow-float);
  font-family: var(--fo-font-text);
}

.fo-dialog::backdrop {
  background: var(--fo-overlay);
}

.fo-dialog[open] {
  animation: fo-dialog-in var(--fo-dur) var(--fo-ease);
}

.fo-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fo-space-4);
  padding: var(--fo-space-5) var(--fo-space-5) 0 var(--fo-space-6);
}

.fo-dialog__title {
  margin: 0;
  padding-block-start: var(--fo-space-1);
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: var(--fo-fs-headline);
  font-weight: var(--fo-weight-regular);
  line-height: 1.2;
}

.fo-dialog__body {
  padding: var(--fo-space-4) var(--fo-space-6);
  font-size: var(--fo-fs-note);
  line-height: 1.55;
}

.fo-dialog__body > * + * {
  margin-block-start: var(--fo-space-4);
}

.fo-dialog__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--fo-space-3);
  padding: var(--fo-space-4) var(--fo-space-6) var(--fo-space-5);
  border-block-start: var(--fo-line-hair) solid var(--fo-rule);
}

/* Preview: the same sheet shown in place, without a backdrop */
.fo-dialog--preview {
  display: block;
  position: static;
  margin: 0;
  max-width: 34rem;
}

@keyframes fo-dialog-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (max-width: 479px) {
  .fo-dialog__head {
    padding-inline: var(--fo-space-5) var(--fo-space-3);
  }

  .fo-dialog__body,
  .fo-dialog__foot {
    padding-inline: var(--fo-space-5);
  }

  .fo-dialog__foot .fo-btn {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fo-dialog[open] {
    animation: none;
  }
}

/* ---- tooltip ---- */
/* Tooltip: a short definition in ink above a term or an icon button. Shows on hover and on focus,
   hides on Escape, and never holds anything the reader must know to continue. */

.fo-tip {
  position: relative;
  display: inline-block;
}

.fo-tip__trigger {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline dotted var(--fo-accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  cursor: help;
}

.fo-tip__trigger:focus-visible {
  outline: 2px solid var(--fo-focus);
  outline-offset: 2px;
}

.fo-tip__bubble {
  position: absolute;
  inset-block-end: calc(100% + 8px);
  inset-inline-start: 50%;
  z-index: 70;
  width: max-content;
  max-width: min(17rem, 80vw);
  padding: 8px 12px;
  border-radius: var(--fo-radius-control);
  background: var(--fo-ink);
  color: var(--fo-paper);
  box-shadow: var(--fo-shadow-float);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-fs-meta);
  font-style: normal;
  font-weight: var(--fo-weight-medium);
  line-height: 1.45;
  text-align: start;
  text-indent: 0;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 4px);
  transition: opacity var(--fo-dur-fast) var(--fo-ease), transform var(--fo-dur-fast) var(--fo-ease), visibility 0s linear var(--fo-dur-fast);
  pointer-events: none;
}

[dir="rtl"] .fo-tip__bubble {
  transform: translate(50%, 4px);
}

.fo-tip__bubble::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  width: 8px;
  height: 8px;
  margin-inline-start: -4px;
  margin-block-start: -4px;
  background: var(--fo-ink);
  transform: rotate(45deg);
}

.fo-tip:hover .fo-tip__bubble,
.fo-tip:focus-within .fo-tip__bubble,
.fo-tip.is-shown .fo-tip__bubble {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

[dir="rtl"] .fo-tip:hover .fo-tip__bubble,
[dir="rtl"] .fo-tip:focus-within .fo-tip__bubble,
[dir="rtl"] .fo-tip.is-shown .fo-tip__bubble {
  transform: translate(50%, 0);
}

.fo-tip.is-dismissed .fo-tip__bubble {
  opacity: 0;
  visibility: hidden;
}

/* Start-aligned bubble, for triggers near the inline-start edge */
.fo-tip--start .fo-tip__bubble,
.fo-tip--start:hover .fo-tip__bubble,
.fo-tip--start:focus-within .fo-tip__bubble,
.fo-tip--start.is-shown .fo-tip__bubble {
  inset-inline-start: 0;
  transform: none;
}

.fo-tip--start .fo-tip__bubble::after {
  inset-inline-start: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .fo-tip__bubble {
    transition: none;
  }
}

/* ---- empty-state ---- */
/* Empty state: what's missing, why, and the one thing to do about it. A ruled square mark,
   a Newsreader title, one sentence, one action. */

.fo-empty {
  display: grid;
  justify-items: center;
  gap: var(--fo-space-3);
  padding: var(--fo-space-7) var(--fo-space-5);
  border-block: var(--fo-line-hair) solid var(--fo-rule);
  text-align: center;
}

.fo-empty__mark {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-block-end: var(--fo-space-2);
  border: var(--fo-line-hair) solid var(--fo-rule-strong);
  color: var(--fo-accent);
  line-height: 0;
}

.fo-empty__title {
  margin: 0;
  color: var(--fo-ink);
  font-family: var(--fo-font-display);
  font-size: var(--fo-fs-subhead);
  font-weight: var(--fo-weight-medium);
  line-height: 1.25;
  text-wrap: balance;
}

.fo-empty__text {
  max-width: 28rem;
  color: var(--fo-muted);
  font-size: var(--fo-fs-note);
  font-style: italic;
  line-height: 1.5;
}

.fo-empty .fo-actions {
  justify-content: center;
  margin-block-start: var(--fo-space-2);
}

.fo-empty--start {
  justify-items: start;
  padding-inline: 0;
  text-align: start;
}

.fo-empty--start .fo-actions {
  justify-content: flex-start;
}

/* ---- skeleton ---- */
/* Skeleton: the shape of a story list while it loads. Paper-2 bars that breathe slowly;
   still when motion is reduced. The container carries aria-busy and a hidden "Loading" line. */

.fo-skeleton {
  display: grid;
  gap: var(--fo-space-6);
}

.fo-skeleton__item {
  display: grid;
  gap: var(--fo-space-3);
  padding-block-start: var(--fo-space-4);
  border-block-start: var(--fo-line-hair) solid var(--fo-rule);
}

.fo-skeleton__line {
  display: block;
  height: 0.9rem;
  border-radius: 1px;
  background: var(--fo-paper-2);
  animation: fo-skeleton-breathe 1600ms var(--fo-ease) infinite alternate;
}

.fo-skeleton__line--title {
  width: 78%;
  height: 1.5rem;
}

.fo-skeleton__line--short {
  width: 42%;
}

.fo-skeleton__line--meta {
  width: 28%;
  height: 0.7rem;
}

.fo-skeleton__block {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--fo-paper-2);
  animation: fo-skeleton-breathe 1600ms var(--fo-ease) infinite alternate;
}

@keyframes fo-skeleton-breathe {
  to {
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fo-skeleton__line,
  .fo-skeleton__block {
    animation: none;
  }
}

/* ---- progress ---- */
/* Progress: a labelled native <progress> drawn as a 4px rule that fills in the accent, plus a
   stepped variant for multi-step flows (pitching, checkout). Indeterminate when it has no value. */

.fo-progress {
  display: grid;
  gap: var(--fo-space-2);
  font-family: var(--fo-font-ui);
}

.fo-progress__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fo-space-3);
}

.fo-progress__label {
  color: var(--fo-ink);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-semibold);
}

.fo-progress__value {
  color: var(--fo-muted);
  font-size: var(--fo-fs-meta);
  font-variant-numeric: tabular-nums;
}

.fo-progress__bar {
  display: block;
  width: 100%;
  height: 4px;
  border: 0;
  border-radius: 0;
  background: var(--fo-rule);
  color: var(--fo-accent);
  appearance: none;
  overflow: hidden;
}

.fo-progress__bar::-webkit-progress-bar {
  background: var(--fo-rule);
}

.fo-progress__bar::-webkit-progress-value {
  background: var(--fo-accent);
}

.fo-progress__bar::-moz-progress-bar {
  background: var(--fo-accent);
}

.fo-progress__bar:indeterminate {
  background: linear-gradient(90deg, var(--fo-rule) 0 35%, var(--fo-accent) 35% 65%, var(--fo-rule) 65% 100%);
  background-size: 300% 100%;
  animation: fo-progress-slide 1400ms linear infinite;
}

.fo-progress__bar:indeterminate::-webkit-progress-bar {
  background: transparent;
}

.fo-progress--ok .fo-progress__bar::-webkit-progress-value {
  background: var(--fo-ok);
}

.fo-progress--ok .fo-progress__bar::-moz-progress-bar {
  background: var(--fo-ok);
}

.fo-progress--danger .fo-progress__bar::-webkit-progress-value {
  background: var(--fo-danger);
}

.fo-progress--danger .fo-progress__bar::-moz-progress-bar {
  background: var(--fo-danger);
}

.fo-progress__note {
  color: var(--fo-muted);
  font-size: var(--fo-fs-meta);
}

@keyframes fo-progress-slide {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: 0 0;
  }
}

/* Steps: numbered segments, done ones filled, the current one heavy */
.fo-steps {
  display: grid;
  grid-template-columns: repeat(var(--fo-steps, 3), minmax(0, 1fr));
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: fo-step;
  font-family: var(--fo-font-ui);
}

.fo-steps__item {
  counter-increment: fo-step;
  padding-block-start: var(--fo-space-2);
  border-block-start: var(--fo-line-heavy) solid var(--fo-rule);
  color: var(--fo-muted);
  font-size: var(--fo-fs-meta);
  font-weight: var(--fo-weight-medium);
  line-height: 1.35;
}

.fo-steps__item::before {
  content: counter(fo-step) ". ";
  font-variant-numeric: tabular-nums;
}

.fo-steps__item.is-done {
  border-block-start-color: var(--fo-ink);
  color: var(--fo-body);
}

.fo-steps__item[aria-current="step"] {
  border-block-start-color: var(--fo-accent);
  color: var(--fo-ink);
  font-weight: var(--fo-weight-semibold);
}

@media (prefers-reduced-motion: reduce) {
  .fo-progress__bar:indeterminate {
    animation: none;
    background-position: 50% 0;
  }
}