@font-face {
  font-family: 'Figtree Variable';
  src: url('/api/public-assets/figtree.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono Variable';
  src: url('/api/public-assets/mono.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  background: var(--color-bg);
  color: var(--color-text-default);
}
header,
footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--stroke-default) solid var(--color-border-default);
}
nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}
a {
  color: var(--color-accent);
  text-underline-offset: var(--space-1);
  overflow-wrap: anywhere;
}
header a,
footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-control);
}
.brand {
  font-size: var(--text-brand-size);
  font-weight: var(--text-brand-weight);
  color: var(--color-text-default);
  text-decoration: none;
}
main {
  overflow-wrap: anywhere;
  max-width: var(--layout-prose);
  padding: var(--space-12) var(--space-6);
  margin: auto;
}
h1 {
  font-size: var(--text-page-title-size);
  line-height: var(--text-page-title-leading);
  letter-spacing: var(--text-page-title-tracking);
}
h2 {
  font-size: var(--text-section-size);
  line-height: var(--text-section-leading);
}
.intro {
  color: var(--color-text-soft);
  font-size: var(--text-body-lg-size);
}
section {
  border-top: var(--stroke-default) solid var(--color-border-default);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
}
pre {
  overflow: auto;
  background: var(--color-bg-card);
  padding: var(--space-4);
  border: var(--stroke-default) solid var(--color-border-default);
  border-radius: var(--radius-input);
}
code,
pre {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm-size);
}
button {
  min-height: var(--size-control);
  padding: var(--space-2) var(--space-4);
  font: inherit;
  border: var(--stroke-default) solid var(--color-border-up);
  border-radius: var(--radius-input);
  background: var(--color-bg-card);
  color: var(--color-text-default);
  cursor: pointer;
}
button:hover {
  background: var(--color-bg-warm);
}
:focus-visible {
  outline: var(--stroke-focus) solid var(--color-accent);
  outline-offset: var(--space-1);
}
dt {
  font-weight: var(--text-label-weight);
}
dd {
  margin: 0 0 var(--space-5);
  overflow-wrap: anywhere;
}
footer {
  border-top: var(--stroke-default) solid var(--color-border-default);
}

.skip {
  position: absolute;
  inset-inline-start: var(--space-4);
  top: var(--space-4);
  transform: translateY(-200%);
  padding: var(--space-3);
  background: var(--color-bg-card);
}
.skip:focus {
  transform: none;
}
.meta {
  color: var(--color-text-soft);
  font-size: var(--text-body-sm-size);
}
.editorial-list article {
  padding-block: var(--space-6);
  border-bottom: var(--stroke-default) solid var(--color-border-default);
}
.editorial-list h2,
.editorial-list h3 {
  margin-block: var(--space-2);
}
.editorial-list h2 a,
.editorial-list h3 a {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-control);
}
h3 {
  font-size: var(--text-h1-size);
}
.contents {
  display: block;
  padding-block: var(--space-4);
  border-block: var(--stroke-default) solid var(--color-border-default);
  margin-block: var(--space-8);
}
.contents a,
.pagination a {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-control);
}
.contents ol {
  padding-inline-start: 0;
  list-style: none;
}
.article-body h2 {
  margin-top: var(--space-10);
  scroll-margin-top: var(--space-6);
}
.article-body li {
  margin-block: var(--space-2);
}
.article-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}
.article-body th,
.article-body td {
  text-align: start;
  vertical-align: top;
  padding: var(--space-3);
  border-bottom: var(--stroke-default) solid var(--color-border-default);
}
.breadcrumbs {
  color: var(--color-text-soft);
  font-size: var(--text-body-sm-size);
  margin-bottom: var(--space-4);
}
.breadcrumbs a {
  min-height: var(--size-control);
  display: inline-flex;
  align-items: center;
}
.pagination {
  margin-block: var(--space-6);
  justify-content: space-between;
}
.figure {
  font-family: var(--font-mono);
  font-size: var(--text-code-size);
}
/* Blog reading path: stations on one rail, ending at the search. */
.reading-path {
  counter-reset: station;
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
}
.reading-path li {
  position: relative;
  display: grid;
  grid-template-columns: var(--space-8) minmax(0, 1fr);
  column-gap: var(--space-5);
  counter-increment: station;
}
.reading-path li::before {
  content: counter(station);
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--space-8);
  height: var(--space-8);
  margin-top: var(--space-6);
  border: var(--stroke-default) solid var(--color-border-up);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  transition:
    background var(--duration-feedback) var(--ease-out-expo),
    border-color var(--duration-feedback) var(--ease-out-expo);
}
.reading-path li::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--space-4) - var(--stroke-default) / 2);
  border-inline-start: var(--stroke-default) solid var(--color-border-up);
}
.reading-path li:first-child::after {
  top: calc(var(--space-6) + var(--space-4));
}
.reading-path li:last-child::after {
  bottom: auto;
  height: calc(var(--space-6) + var(--space-4));
}
.reading-path__body {
  padding-block: var(--space-6);
  border-bottom: var(--stroke-default) solid var(--color-border-default);
}
.reading-path__body > * {
  margin-block: 0 var(--space-2);
}
.reading-path__question {
  color: var(--color-text-soft);
  font-size: var(--text-body-sm-size);
  font-weight: var(--text-label-weight);
}
.reading-path h3 {
  font-weight: var(--text-h1-weight);
  letter-spacing: var(--text-h1-tracking);
  line-height: var(--text-card-title-leading);
}
.reading-path h3 a {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-control);
  color: var(--color-text-default);
  text-decoration: none;
}
/* The whole station is one target; the title stays the accessible link name. */
.reading-path h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.reading-path li:hover h3 a,
.reading-path h3 a:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
}
.reading-path li:hover::before,
.reading-path li:focus-within::before {
  border-color: var(--color-accent);
  background: var(--color-accent-subtle);
}
.reading-path .meta {
  margin-bottom: 0;
}
.reading-path li.reading-path__end::before {
  content: '→';
  border-color: var(--color-accent-surface);
  background: var(--color-accent-surface);
  color: var(--color-on-accent-surface);
  font-family: var(--font-sans);
}
.reading-path li.reading-path__end:hover::before,
.reading-path li.reading-path__end:focus-within::before {
  border-color: var(--color-accent-surface);
  background: var(--color-accent-surface);
}
.reading-path__end .reading-path__body {
  border-bottom: 0;
}
.reading-path__actions,
.reading-path-notes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-6);
}
.reading-path__actions {
  margin-top: var(--space-4);
}
.reading-path__actions a,
.reading-path-notes a {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-control);
}
.reading-path__actions .reading-path__primary {
  padding-inline: var(--space-5);
  border-radius: var(--radius-input);
  background: var(--color-accent-surface);
  color: var(--color-on-accent-surface);
  font-size: var(--text-btn-size);
  font-weight: var(--text-btn-weight);
  text-decoration: none;
}
.reading-path__actions .reading-path__primary:hover {
  text-decoration: underline;
}
.reading-path-notes {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--stroke-default) solid var(--color-border-default);
  font-size: var(--text-body-sm-size);
}
@media (max-width: 40rem) {
  .reading-path li {
    column-gap: var(--space-4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .reading-path li::before {
    transition: none;
  }
}