/* Article style contract: 2026-08-02.5.
   Keep docs/ARTICLE-STYLE-GUIDE.md synchronized with every change to this file.

   Article pages use a nested width hierarchy.
   Main is the largest field. Header, audio, and endmatter share the Article
   frame. Inside the body, prose is narrow, media is intermediate, and wide
   elements may expand back to Main. */
.article-page {
  --article-section-space: clamp(4rem, 5vw, 5.5rem);
  --article-header-rule: color-mix(in srgb, var(--ink) 24%, transparent);
  --article-frame-max-inline-size: 60rem;
}

.article-page .atlas-main > article {
  width: 100%;
}

.article-page .article-header {
  width: min(100%, var(--article-frame-max-inline-size));
  margin-inline: auto;
  padding-bottom: 0;
  border-bottom: 1px solid var(--hairline-strong);
}

.article-header__topline {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.72rem;
  border-block: 1px solid var(--article-header-rule);
  font-family: var(--sans);
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.article-header__navigation {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  column-gap: 1.5rem;
}

.article-header__navigation-link {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--ink);
  text-decoration: none;
}

.article-header__navigation-link--previous {
  grid-column: 1;
  justify-self: stretch;
}

.article-header__navigation-link--next {
  grid-column: 2;
  justify-self: stretch;
  text-align: right;
}

.article-header__navigation-link--next .article-header__glyph {
  transform: rotate(180deg);
}

.article-header__navigation-heading {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.article-header__navigation-link--next .article-header__navigation-heading {
  justify-content: flex-end;
}

.article-header__navigation-direction {
  line-height: 1;
}

.article-header__navigation-title {
  display: block;
  width: 100%;
  max-width: none;
  font-family: var(--serif);
  font-size: 0.72rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
  color: var(--ink-muted);
}

.article-header__navigation-link:focus-visible {
  outline: 1px solid var(--c-artifact);
  outline-offset: 0.3rem;
}

.article-header__glyph {
  position: relative;
  display: block;
  width: 1.35rem;
  height: 1px;
  flex: 0 0 auto;
  color: var(--c-artifact);
  background: currentColor;
  transition:
    width 360ms var(--ease-out),
    color 180ms ease;
}

.article-header__glyph::after {
  position: absolute;
  top: 50%;
  left: -0.12rem;
  width: 0.26rem;
  height: 0.26rem;
  content: "";
  border: 1px solid currentColor;
  background: var(--bg);
  transform: translateY(-50%);
  transition:
    background 180ms ease,
    transform 360ms var(--ease-out);
}

.article-header__heading {
  container-type: inline-size;
  padding-block: clamp(2.6rem, 6vw, 5.25rem) clamp(2.2rem, 4vw, 3.75rem);
}

.article-header[data-has-topline="false"] .article-header__heading {
  padding-top: 0;
}

/* The authored-line law: --article-title-line-em is the measured width of
   the widest authored title line (em of the display face, uppercase,
   tracked). The cap is the exact size at which that line fills the heading,
   so authored breaks never re-wrap at any viewport. Titles without authored
   breaks carry no line width and the cap stays out of reach. Each rule
   keeps its plain clamp first so engines without container-query units
   still size the title. */
/* Greedy wrap only — no balance (this also neutralizes the site-wide
   .atlas-main h1 balance for Articles). Balance is an optimizer whose
   limits and tie-breaks differ by engine (Blink stops balancing past six
   lines; WebKit keeps going), so the same unauthored title can break
   differently on the phone than in any projection of it. Authored
   title_lines own their breaks; unauthored titles wrap the one way every
   engine agrees on. */
.article-page .article-header h1 {
  --article-title-cap: calc(100cqw / var(--article-title-line-em, 0.01));
  max-width: 100%;
  font-size: clamp(4.65rem, 8.5vw, 8rem);
  font-size: min(clamp(4.65rem, 8.5vw, 8rem), var(--article-title-cap));
  line-height: 0.82;
  text-wrap: wrap;
}

.article-header h1 > span {
  display: block;
}

.article-header[data-title-length="medium"] h1 {
  font-size: clamp(4.25rem, 7.6vw, 7.25rem);
  font-size: min(clamp(4.25rem, 7.6vw, 7.25rem), var(--article-title-cap));
}

.article-header[data-title-length="long"] h1 {
  font-size: clamp(3.65rem, 6.35vw, 6.1rem);
  font-size: min(clamp(3.65rem, 6.35vw, 6.1rem), var(--article-title-cap));
}

.article-header[data-title-length="very-long"] h1 {
  font-size: clamp(3.2rem, 5.4vw, 5.15rem);
  font-size: min(clamp(3.2rem, 5.4vw, 5.15rem), var(--article-title-cap));
  line-height: 0.86;
}

.article-header__subtitle {
  max-width: 50rem;
  margin: clamp(1.5rem, 2.5vw, 2.25rem) 0 0;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 1.18rem + 0.72vw, 1.95rem);
  font-style: italic;
  line-height: 1.22;
  text-wrap: balance;
  color: var(--ink-muted);
}

.article-header__deck {
  max-width: 44rem;
  margin: 1rem 0 0;
  font-family: var(--serif);
  font-size: clamp(1.02rem, 0.96rem + 0.2vw, 1.16rem);
  line-height: 1.48;
  text-wrap: pretty;
  color: var(--ink);
}

.article-header__modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  border-top: 1px solid var(--article-header-rule);
  background: var(--article-header-rule);
}

.article-header__module {
  min-width: 0;
  padding: 0.62rem clamp(0.62rem, 1.2vw, 0.82rem) 0.72rem;
  background: var(--bg);
}

.article-header__module-label {
  display: flex;
  gap: 0.42rem;
  align-items: center;
  margin: 0 0 0.55rem;
  font-family: var(--sans);
  font-size: clamp(0.55rem, 0.53rem + 0.07vw, 0.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.article-header__module:is(:hover, :focus-within) .article-header__glyph,
.article-header__navigation-link:is(:hover, :focus-visible) .article-header__glyph {
  width: 2.05rem;
  color: var(--ink);
}

.article-header__module:is(:hover, :focus-within) .article-header__glyph::after,
.article-header__navigation-link:is(:hover, :focus-visible) .article-header__glyph::after {
  background: var(--c-artifact);
  transform: translateY(-50%) rotate(45deg);
}

.article-header__authors ul,
.article-header__references ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.article-header__authors li + li {
  padding-top: 0.48rem;
  margin-top: 0.48rem;
  border-top: 1px solid var(--article-header-rule);
}

.article-header__author-name {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(0.82rem, 0.78rem + 0.14vw, 0.92rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.012em;
  text-transform: uppercase;
}

.article-header__author-role {
  margin: 0.2rem 0 0;
  font-family: var(--serif);
  font-size: 0.72rem;
  font-style: italic;
  line-height: 1.15;
  color: var(--ink-muted);
}

.article-header__identifiers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.85rem;
  margin-top: 0.45rem;
}

.article-header__identifiers a {
  display: inline-flex;
  gap: 0.35rem;
  color: var(--ink-muted);
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  line-height: 1.35;
  text-decoration: none;
  text-transform: uppercase;
}

.article-header__identifiers a:hover {
  color: var(--ink);
}

.article-header__references li + li {
  margin-top: 0.38rem;
}

.article-header__references a,
.article-header__reference {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.16rem 0.4rem;
  align-items: baseline;
  margin: 0;
  padding-bottom: 0.18rem;
  border-bottom: 1px solid var(--article-header-rule);
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: var(--tracking-label);
  text-decoration: none;
  text-transform: uppercase;
}

.article-header__references a {
  position: relative;
  padding-right: 0.9rem;
}

.article-header__references a::after {
  position: absolute;
  top: 0.02rem;
  right: 0;
  width: 0.52rem;
  height: 0.52rem;
  content: "";
  color: var(--c-artifact);
  background: var(--atlas-open-marker);
}

.article-header__references strong {
  grid-column: 1 / -1;
  min-width: 0;
  font-size: 0.55rem;
  letter-spacing: 0.025em;
  overflow-wrap: anywhere;
  text-align: left;
  color: var(--ink-muted);
}

.article-header__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--article-header-rule);
  background: var(--article-header-rule);
}

.article-header__facts[data-fact-count="1"] {
  grid-template-columns: minmax(0, 1fr);
}

.article-header__facts[data-fact-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.article-header__facts[data-fact-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.article-header__facts[data-fact-count="5"] > div:last-child,
.article-header__facts[data-fact-count="9"] > div:last-child {
  grid-column: span 4;
}

.article-header__facts[data-fact-count="6"] > div:nth-last-child(-n + 2),
.article-header__facts[data-fact-count="10"] > div:nth-last-child(-n + 2) {
  grid-column: span 2;
}

.article-header__facts[data-fact-count="7"] > div:last-child {
  grid-column: span 2;
}

.article-header__facts > div {
  min-width: 0;
  padding: 0.48rem clamp(0.5rem, 0.9vw, 0.64rem);
  background: var(--bg);
}

.article-header__facts dt {
  display: flex;
  font-family: var(--sans);
  font-size: 0.56rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.article-header__facts dd {
  margin: 0.28rem 0 0;
  font-family: var(--sans);
  font-size: 0.59rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.025em;
  overflow-wrap: anywhere;
  color: var(--ink);
}

.article-header__facts a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.article-header[data-header-density="sparse"] .article-header__heading {
  padding-bottom: clamp(2.8rem, 5vw, 4.5rem);
}

.article-header[data-header-layout="essay"] .article-header__heading {
  padding-bottom: clamp(2rem, 3.5vw, 3rem);
}

.article-header__byline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 2rem;
  align-items: baseline;
  padding-block: 0.72rem 0.76rem;
  border-top: 1px solid var(--article-header-rule);
  font-family: var(--sans);
}

.article-header__byline-author {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 0.28rem 0.48rem;
  align-items: baseline;
  margin: 0;
  font-size: clamp(0.72rem, 0.69rem + 0.12vw, 0.8rem);
  line-height: 1.1;
}

.article-header__byline-author > span:first-child,
.article-header__byline-role {
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.article-header__byline-author strong {
  font-weight: 600;
  letter-spacing: 0.012em;
  text-transform: uppercase;
}

.article-header__byline-author a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.article-header__byline-role::before {
  margin-right: 0.48rem;
  content: "·";
}

.article-header__byline-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem 0;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
  font-size: 0.58rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.article-header__byline-facts > div {
  display: flex;
  align-items: baseline;
}

.article-header__byline-facts > div + div::before {
  margin-inline: 0.58rem;
  content: "·";
  color: var(--article-header-rule);
}

.article-header__byline-facts dd {
  margin: 0;
}

.article-header__byline-facts a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.article-page .article-header + .article-body {
  padding-top: 2.5rem;
}

.article-page .article-header + .article-audio {
  margin-top: 2.5rem;
}

.article-audio {
  --audio-progress: 0%;
  position: relative;
  display: grid;
  grid-template-columns: 1.15rem minmax(7.5rem, 0.85fr) auto minmax(10rem, 1.15fr) auto;
  gap: 0.65rem;
  align-items: center;
  box-sizing: border-box;
  width: min(100%, var(--article-frame-max-inline-size));
  margin: 0 auto clamp(3.25rem, 6vw, 4.75rem);
  padding: 0.82rem 0.88rem;
  border: 1px solid var(--ink);
  background: var(--bg);
  box-shadow: 0.28rem 0.28rem 0 color-mix(in srgb, var(--ink) 8%, transparent);
  font-family: var(--sans);
}

.article-audio::before {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 3.8rem;
  height: 1px;
  content: "";
  background: var(--c-artifact);
}

.article-audio::after {
  position: absolute;
  top: -0.18rem;
  left: 3.62rem;
  width: 0.32rem;
  height: 0.32rem;
  box-sizing: border-box;
  content: "";
  border: 1px solid var(--c-artifact);
  background: var(--bg);
}

.article-audio__index {
  align-self: start;
  padding-top: 0.1rem;
  font-size: 0.56rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  color: var(--c-artifact);
}

.article-audio__identity {
  min-width: 0;
}

.article-audio__eyebrow,
.article-audio__title,
.article-audio__credit,
.article-audio__time {
  margin: 0;
}

.article-audio__eyebrow {
  margin-bottom: 0.25rem;
  font-size: 0.56rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.article-audio__title {
  font-family: var(--serif);
  font-size: 0.94rem;
  line-height: 1.1;
}

.article-audio__credit {
  margin-top: 0.18rem;
  font-size: 0.58rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.025em;
  color: var(--ink-muted);
}

.article-audio__toggle {
  display: grid;
  place-items: center;
  width: 2.8rem;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--ink);
  color: var(--bg);
  font: 600 0.53rem/1 var(--sans);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}

.article-audio__toggle:focus-visible,
.article-audio__timeline input:focus-visible {
  outline: 2px solid var(--c-artifact);
  outline-offset: 3px;
}

.article-audio__toggle-icon {
  width: 0;
  height: 0;
  margin-left: 0.12rem;
  border-block: 0.24rem solid transparent;
  border-left: 0.38rem solid currentColor;
}

.article-audio[data-audio-state="playing"] .article-audio__toggle-icon {
  width: 0.36rem;
  height: 0.42rem;
  margin-left: 0;
  border: 0;
  border-inline: 0.1rem solid currentColor;
}

.article-audio__timeline {
  min-width: 0;
}

.article-audio__timeline input {
  display: block;
  width: 100%;
  height: 0.85rem;
  padding: 0;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.article-audio__timeline input::-webkit-slider-runnable-track {
  height: 1px;
  background:
    linear-gradient(
      to right,
      var(--c-artifact) 0 var(--audio-progress),
      var(--article-header-rule) var(--audio-progress) 100%
    );
}

.article-audio__timeline input::-moz-range-track {
  height: 1px;
  background: var(--article-header-rule);
}

.article-audio__timeline input::-moz-range-progress {
  height: 1px;
  background: var(--c-artifact);
}

.article-audio__timeline input::-webkit-slider-thumb {
  width: 0.42rem;
  height: 0.42rem;
  margin-top: -0.19rem;
  appearance: none;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
}

.article-audio__timeline input::-moz-range-thumb {
  width: 0.42rem;
  height: 0.42rem;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
}

.article-audio__time {
  display: flex;
  gap: 0.3rem;
  justify-content: flex-end;
  margin-top: 0.15rem;
  font-size: 0.54rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.025em;
  color: var(--ink-muted);
}

.article-audio__links {
  display: grid;
  gap: 0.24rem;
  justify-items: end;
}

.article-audio__links a {
  font-size: 0.54rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.article-audio__links a::after {
  display: inline-block;
  width: 0.52rem;
  height: 0.52rem;
  margin-left: 0.38rem;
  content: "";
  color: var(--c-artifact);
  background: var(--atlas-open-marker);
}

.article-audio audio {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.article-toc {
  width: min(100%, var(--article-frame-max-inline-size));
  margin: 0 auto clamp(3.25rem, 6vw, 4.75rem);
  border-block: 1px solid var(--article-header-rule);
  font-family: var(--sans);
}

.article-header + .article-toc {
  margin-top: 2.5rem;
}

.article-toc > details > summary {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 0.62rem;
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.article-toc summary::-webkit-details-marker {
  display: none;
}

.article-toc > details > summary::before {
  width: 0.45rem;
  height: 0.45rem;
  flex: 0 0 auto;
  content: "";
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.12rem) rotate(45deg);
  transition: transform 180ms ease;
}

.article-toc > details[open] > summary::before {
  transform: translateY(0.12rem) rotate(225deg);
}

.article-toc > details > summary > :first-child {
  flex: 1;
}

.article-toc > details > summary > :last-child {
  color: var(--ink-muted);
}

.article-toc__sections {
  padding: 0 0 0.55rem;
  margin: 0;
  list-style: none;
  border-top: 1px solid var(--article-header-rule);
}

.article-toc__item {
  min-width: 0;
  list-style: none;
}

.article-toc__sections > .article-toc__item {
  border-bottom: 1px solid var(--hairline);
}

.article-toc__row {
  display: grid;
  grid-template-columns: 1.55rem 0.62rem minmax(0, 1fr) 1.35rem;
  gap: 0.45rem;
  align-items: baseline;
  width: 100%;
  padding: 0.56rem 0;
  color: inherit;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: 0.025em;
  text-decoration: none;
  text-transform: uppercase;
}

.article-toc__row:not(.article-toc__row--leaf) {
  cursor: pointer;
  list-style: none;
}

.article-toc__row::-webkit-details-marker {
  display: none;
}

.article-toc__index {
  color: var(--c-artifact);
}

.article-toc__sections > .article-toc__item > :where(a, details > summary) {
  padding-block: 0.62rem;
  font-size: 0.68rem;
}

.article-toc__disclosure {
  width: 0.42rem;
  height: 0.42rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.08rem) rotate(-45deg);
  transition: transform 180ms ease;
}

.article-toc__branch[open] > summary .article-toc__disclosure {
  transform: translateY(-0.18rem) rotate(45deg);
}

.article-toc__disclosure--empty {
  border: 0;
}

.article-toc__jump {
  justify-self: end;
  color: var(--c-artifact);
  font-size: 0.78rem;
  line-height: 1;
  text-decoration: none;
}

.article-toc__jump--within-row {
  pointer-events: none;
}

.article-toc__children {
  padding: 0 0 0 clamp(0.7rem, 2.5vw, 1.3rem);
  margin: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}

.article-toc__children > .article-toc__item + .article-toc__item {
  border-top: 1px solid var(--hairline);
}

.article-toc__item[data-toc-level="6"] .article-toc__row {
  color: var(--ink-muted);
}

.article-body {
  --md-measure-prose: 42rem;
  --md-measure-media: 48rem;
  --md-space-section: var(--article-section-space);
  --md-space-paragraph: 0.9em;
  --md-space-resume: clamp(1.4rem, 2vw, 1.75rem);
  --md-gallery-gap: clamp(0.65rem, 1.4vw, 1rem);
  --md-prose-width: min(100%, var(--md-measure-prose));
  --md-media-width: min(100%, var(--md-measure-media));
  --md-wide-width: 100%;
  counter-reset: md-section;
  max-width: none;
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1.01rem + 0.13vw, 1.125rem);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: 0.003em;
  text-align: left;
  text-wrap: pretty;
}

.article-body :where(h2, h3, h4, h5, h6, li)[id] {
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

/* Long-document relayout law: off-screen body blocks contribute nothing to
   style, layout, or paint, so interactive resize costs one screenful — not
   the whole document. On the mathematics corpus ~96% of the DOM is KaTeX
   markup; without this rule every resize frame re-lays tens of thousands of
   nodes. The auto keyword remembers each block's true size once seen, and
   anchors, find-in-page, and focus force-render their targets, so nothing
   is lost — the stylesheet stays in effect in every context. */
.article-body > * {
  content-visibility: auto;
  contain-intrinsic-size: auto 6rem;
}

@media print {
  .article-body > * {
    content-visibility: visible;
  }
}

/* The renderer assigns one of these width roles to each block. */
.article-body > [data-md-width="prose"] {
  width: var(--md-prose-width);
  margin-inline: auto;
}

.article-body > [data-md-width="media"] {
  width: var(--md-media-width);
  margin-inline: auto;
}

.article-body > [data-md-width="wide"] {
  width: var(--md-wide-width);
  margin-inline: auto;
}

.article-body > p:first-child {
  font-size: clamp(1.12rem, 1.04rem + 0.2vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink);
}

.article-body > p + p {
  margin-block-start: var(--md-space-paragraph);
}

/* Prose owns its return to the reading flow, whatever precedes it. */
.article-body > :not(p) + p {
  margin-block-start: var(--md-space-resume);
}

.article-body > p:first-child::first-letter {
  float: none;
  margin: 0;
  font: inherit;
}

.article-body p,
.article-body li,
.article-body figcaption {
  overflow-wrap: break-word;
}

.article-body a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
  overflow-wrap: anywhere;
}

/* A link in running prose is a place the reader can go, and it says so:
   the sitewide reset strips the underline every browser would have drawn,
   so prose restores its own — dotted, in the artifact violet the section
   numerals already wear, drawn solid when the pointer asks. */
.article-body p a {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--c-artifact);
}

.article-body p a:hover,
.article-body p a:focus-visible {
  text-decoration-style: solid;
}

.article-body > h2,
.article-body > h3,
.article-body > h4,
.article-body > h5,
.article-body > h6 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  color: var(--ink-bright);
}

.article-body > h2 {
  counter-increment: md-section;
  width: var(--md-prose-width);
  margin-inline: auto;
  margin-top: var(--md-space-section);
  padding-top: 0;
  border-top: 1px solid var(--hairline-strong);
  font-size: clamp(2.35rem, 3vw, 3rem);
  text-transform: uppercase;
  word-spacing: 0.06em;
}

.article-body > h2::before {
  display: block;
  margin-bottom: clamp(1.25rem, 2vw, 1.75rem);
  content: "0" counter(md-section);
  color: var(--c-artifact);
  font-family: var(--sans);
  font-size: var(--type-label);
  line-height: 1;
  letter-spacing: var(--tracking-label);
}

.article-body > h3 {
  margin-top: clamp(2.75rem, 3.5vw, 3.75rem);
  font-size: clamp(1.65rem, 2.1vw, 1.95rem);
  line-height: 1.05;
}

.article-body > h4 {
  margin-top: clamp(2.5rem, 3.25vw, 3.25rem);
  font-size: clamp(1.3rem, 1.6vw, 1.5rem);
  line-height: 1.08;
}

.article-body > h5,
.article-body > h6 {
  margin-top: clamp(2.75rem, 4vw, 3.75rem);
  font-family: var(--sans);
  font-size: var(--type-small);
  line-height: 1.2;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.article-body > h6 {
  color: var(--ink-muted);
}

.article-heading-return {
  display: inline-flex;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  margin-inline-start: 0.18em;
  vertical-align: 0.12em;
  color: var(--c-artifact);
  font-family: var(--sans);
  font-size: max(1rem, 0.58em);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

.article-heading-return > span {
  display: block;
  transform: translateY(-0.13em);
}

.article-heading-return:is(:hover, :focus-visible) {
  color: var(--ink-bright);
}

.article-heading-return:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.1rem;
}

.article-toc:focus-visible {
  outline: 1px solid var(--c-artifact);
  outline-offset: 0.35rem;
}

.article-body > h2,
.article-body > h3,
.article-body > h4,
.article-body > h5,
.article-body > h6 {
  overflow-wrap: anywhere;
  hyphens: auto;
}

.article-body > h2 code,
.article-body > h3 code,
.article-body > h4 code,
.article-body > h5 code,
.article-body > h6 code {
  padding: 0;
  font: inherit;
  color: var(--c-artifact);
  background: transparent;
  border: 0;
}

.article-body strong {
  font-weight: 700;
  color: var(--ink-bright);
}

.article-body del {
  color: var(--ink-muted);
  text-decoration-thickness: 1px;
}

.article-body code {
  padding: 0.08em 0.3em;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.82em;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border: 1px solid var(--hairline);
  overflow-wrap: anywhere;
}

.article-body > ul,
.article-body > ol {
  width: var(--md-prose-width);
  margin-block: 1.75em 0;
  margin-inline: auto;
  padding-inline-start: 1.5em;
}

.article-body > :where(ul, ol) li {
  padding-inline-start: 0.2em;
}

.article-body > :where(ul, ol) li::marker {
  color: var(--c-artifact);
  font-family: var(--sans);
  font-size: 0.72em;
  font-weight: 600;
}

.article-body > :where(ul, ol) li + li {
  margin-top: 0.7em;
}

.article-body > :where(ul, ol) li > :where(ul, ol) {
  width: auto;
  margin-block: 0.75em 0;
  margin-inline: 0;
  padding-inline-start: 1.4em;
}

.article-body pre {
  width: var(--md-wide-width);
  max-width: none;
  margin-block: clamp(2.5rem, 5vw, 4rem) 0;
  margin-inline: auto;
  padding: clamp(1rem, 3vw, 1.75rem);
  overflow-x: auto;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--paper) 35%, transparent) transparent;
  tab-size: 2;
}

.article-body pre code {
  display: block;
  width: max-content;
  min-width: 100%;
  padding: 0;
  color: inherit;
  font-size: 0.82rem;
  line-height: 1.6;
  background: transparent;
  border: 0;
}

.article-body hr {
  height: 1px;
  width: var(--md-prose-width);
  margin-block: var(--md-space-section) 0;
  margin-inline: auto;
  background: var(--hairline-strong);
  border: 0;
}

.article-body .table-scroll {
  width: var(--md-wide-width);
  margin-block: clamp(2.5rem, 5vw, 4rem) 0;
  margin-inline: auto;
  overflow-x: auto;
  border-block: 1px solid var(--hairline-strong);
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-strong) transparent;
}

.article-body pre::-webkit-scrollbar,
.article-body .table-scroll::-webkit-scrollbar {
  height: 3px;
}

.article-body pre::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--paper) 35%, transparent);
}

.article-body .table-scroll::-webkit-scrollbar-thumb {
  background: var(--hairline-strong);
}

.article-body pre::-webkit-scrollbar-track,
.article-body .table-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.article-body table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  line-height: 1.45;
}

.article-body th,
.article-body td {
  min-width: 9.5rem;
  padding: 0.9rem 1rem;
  text-align: left;
  vertical-align: top;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.article-body th:first-child,
.article-body td:first-child {
  padding-left: 0;
  min-width: 7rem;
}

.article-body th {
  font-family: var(--sans);
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}

.article-body tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--ink) 1.75%, transparent);
}

.article-body tbody tr:last-child td {
  border-bottom: 0;
}

.article-body th[align="center"],
.article-body td[align="center"] {
  text-align: center;
}

.article-body th[align="right"],
.article-body td[align="right"] {
  text-align: right;
}

.article-body figure {
  margin-block: clamp(3.25rem, 5vw, 4.75rem) 0;
  margin-inline: auto;
}

.article-body img {
  display: block;
  width: 100%;
  height: auto;
  background: color-mix(in srgb, var(--ink) 5%, var(--paper));
}

/* The author's mark on the profile, at the left hand of the opening
   words: the disc the browser tab carries, here at portrait size, seated
   on the prose column's own left edge so the lede flows around its
   circle rather than leaving it stranded in the gutter. The mark's width
   is stated once, here, and the desktop column reads it. */
.article-body:has(> .profile-portrait) {
  --profile-mark-width: clamp(4.5rem, 10vw, 6rem);
  --profile-mark-gap: 1.5rem;
}

.article-body > .profile-portrait {
  float: left;
  width: var(--profile-mark-width);
  height: auto;
  margin: 0.35rem var(--profile-mark-gap) 0.6rem max(0rem, calc((100% - var(--md-prose-width)) / 2));
  shape-outside: margin-box;
  background: none;
}

/* The profile's masthead, beside the mark: the tagline in the display
   voice, and under it the byline in the same label grammar every article
   byline already wears — small caps, tracked wide, quiet. Scoped by the
   portrait, so only a page that shows the mark reads this way, and the
   ordinary section margins yield to the block's own rhythm. */
.article-body > .profile-portrait + h3 {
  margin-top: 0.4rem;
  font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  line-height: 1;
  text-transform: uppercase;
  word-spacing: 0.06em;
}

.article-body > .profile-portrait + h3 + h4 {
  margin-top: 0.9rem;
  font-family: var(--sans);
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* On a desktop reading, the profile is two columns for its whole run: the
   mark holds the left, and every line of the masthead and the prose keeps
   to its right — nothing slides beneath the disc. The narrow reading keeps
   the stack: mark above, words below. */
@media (min-width: 821px) {
  .article-body > .profile-portrait ~ [data-md-width="prose"] {
    --profile-mark-column: calc(var(--profile-mark-width) + var(--profile-mark-gap));
    width: calc(var(--md-prose-width) - var(--profile-mark-column));
    margin-inline:
      calc(50% - var(--md-prose-width) / 2 + var(--profile-mark-column))
      auto;
  }
}

.article-body > .md-figure {
  --md-figure-rendered-width:
    min(
      100%,
      var(--md-image-width, 100%),
      calc(76vh * var(--md-image-ratio, 1)),
      calc(44rem * var(--md-image-ratio, 1))
    );
  margin: clamp(3rem, 4.5vw, 4.25rem) auto 0;
}

.article-body > .md-figure > img {
  width: var(--md-figure-rendered-width);
  max-width: 100%;
  height: auto;
  aspect-ratio: var(--md-image-ratio, auto);
  margin-inline: auto;
}

.article-body > .md-figure > figcaption {
  width: var(--md-figure-rendered-width);
  margin-inline: auto;
}

.article-body > .md-gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--md-gallery-gap);
  align-items: start;
  margin: clamp(3rem, 4.5vw, 4.25rem) auto 0;
}

.article-body > .md-gallery-frame {
  margin: clamp(3rem, 4.5vw, 4.25rem) auto 0;
}

.article-body > .md-gallery-frame > .md-gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--md-gallery-gap);
  align-items: start;
}

.article-body > :is(.md-gallery, .md-gallery-frame) + :is(.md-gallery, .md-gallery-frame) {
  margin-top: var(--md-gallery-gap);
}

.article-body > .md-gallery > img,
.article-body > .md-gallery-frame > .md-gallery > img {
  grid-column: span 2;
  width: 100%;
  height: auto;
  min-width: 0;
  aspect-ratio: 1;
  object-fit: cover;
}

.article-body .md-gallery:is(
  [data-gallery-size="2"],
  [data-gallery-size="4"]
) > img,
.article-body .md-gallery[data-gallery-size="5"] > img:nth-child(n + 4),
.article-body .md-gallery[data-gallery-size="7"] > img:nth-child(n + 4),
.article-body .md-gallery[data-gallery-size="8"] > img:nth-child(n + 7) {
  grid-column: span 3;
}

.article-body img[data-article-image-preview] {
  cursor: zoom-in;
}

.article-body img[data-article-image-preview]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 0.3rem;
}

.article-image-preview {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: clamp(1rem, 2.5vw, 2rem);
  border: 0;
  place-items: center;
  overflow: hidden;
  overscroll-behavior: contain;
  background: rgb(17 17 16 / 96%);
}

.article-image-preview[open] {
  display: grid;
}

.article-image-preview::backdrop {
  background: rgb(17 17 16 / 96%);
}

.article-image-preview__image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - clamp(2rem, 5vw, 4rem));
  object-fit: contain;
  cursor: zoom-out;
}

.article-image-preview__close {
  position: fixed;
  inset-block-start: max(0.75rem, env(safe-area-inset-top));
  inset-inline-end: max(0.75rem, env(safe-area-inset-right));
  padding: 0.45rem 0.65rem;
  border: 1px solid rgb(255 255 255 / 62%);
  border-radius: 0;
  color: white;
  background: rgb(17 17 16 / 78%);
  font: 600 var(--type-label) / 1 var(--sans);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}

.article-image-preview__close:focus-visible {
  outline: 2px solid white;
  outline-offset: 0.2rem;
}

body:has(.article-image-preview[open]) {
  overflow: hidden;
}

.article-body > .md-embed {
  margin: clamp(3rem, 5vw, 4.75rem) auto 0;
}

.article-body > .md-embed--youtube {
  width: var(--md-prose-width);
}

.article-body > .md-embed--x {
  width: min(100%, 34.5rem);
}

.md-embed__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--hairline-strong);
}

.md-embed__viewport iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.md-embed__x-frame {
  display: block;
  width: 100%;
  height: 14.0625rem;
  background: transparent;
  border: 0;
}

.article-body .md-embed__caption {
  display: flex;
  gap: 0.75rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 0.7rem;
  font-family: var(--sans);
  font-size: var(--type-label);
  font-style: normal;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.md-embed__caption span {
  color: var(--ink-muted);
}

.md-embed__caption a {
  flex: 0 0 auto;
  color: var(--c-artifact);
}

.article-body figcaption {
  display: block;
  margin-top: 0.85rem;
  font-size: var(--type-small);
  font-style: italic;
  line-height: 1.45;
  color: var(--ink-muted);
}

.article-body > blockquote {
  width: var(--md-prose-width);
  margin-block: clamp(3rem, 4.5vw, 4rem) 0;
  margin-inline: auto;
  padding: clamp(1rem, 1.5vw, 1.35rem) 0 clamp(1rem, 1.5vw, 1.35rem) clamp(1rem, 2.5vw, 1.75rem);
  color: var(--ink);
  background: transparent;
  border-left: 2px solid var(--c-artifact);
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-transform: none;
  text-wrap: pretty;
}

.article-body > blockquote p {
  overflow-wrap: normal;
}

.article-body .math-inline {
  box-sizing: border-box;
  display: inline-block;
  max-width: 100%;
  margin-inline: 0.12em;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  vertical-align: -0.16em;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-strong) transparent;
}

.article-body .math-inline::-webkit-scrollbar,
.article-body .math-display::-webkit-scrollbar,
.article-body .katex-display::-webkit-scrollbar {
  height: 3px;
}

.article-body .math-inline::-webkit-scrollbar-thumb,
.article-body .math-display::-webkit-scrollbar-thumb,
.article-body .katex-display::-webkit-scrollbar-thumb {
  background: var(--hairline-strong);
}

.article-body .math-inline::-webkit-scrollbar-track,
.article-body .math-display::-webkit-scrollbar-track,
.article-body .katex-display::-webkit-scrollbar-track {
  background: transparent;
}

.article-body math {
  color: var(--ink-bright);
  font-family: "STIX Two Math", "Cambria Math", "Latin Modern Math", serif;
}

.article-body .katex {
  position: relative;
}

.article-body .math-inline math {
  font-size: 1.04em;
}

.article-body .math-inline > .katex {
  font-size: 1em;
}

.article-body .math-display {
  box-sizing: border-box;
  display: block;
  width: var(--md-media-width);
  max-width: 100%;
  min-width: 0;
  margin-block: clamp(1.65rem, 2.5vw, 2.25rem) 0;
  margin-inline: auto;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-strong) transparent;
}

.article-body .math-display:focus-visible {
  outline: 1px solid var(--c-artifact);
  outline-offset: 0.35rem;
}

.article-body .math-display > .katex-display {
  box-sizing: border-box;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 0.35rem 0 0.5rem;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  text-align: center;
}

.article-body .math-display-full > .katex-display {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
}

.article-body .math-display-dense > .katex-display {
  font-size: clamp(0.82rem, 1vw, 0.96rem);
}

.article-body sup {
  position: relative;
  top: -0.15em;
  margin-left: 0.12em;
  font-family: var(--sans);
  font-size: 0.58em;
  font-weight: 600;
  line-height: 0;
}

.article-body sup a {
  color: var(--c-artifact);
  border-bottom: 0;
}

.article-body .footnotes {
  width: var(--md-wide-width);
  margin: var(--md-space-section) auto 0;
  padding-top: 1.25rem;
  font-size: 0.86em;
  color: var(--ink-muted);
  border-top: 1px solid var(--hairline-strong);
}

.article-body .footnotes-title {
  margin: 0 0 2rem;
  font-family: var(--sans);
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink);
}

.article-body .footnotes ol {
  columns: 2 22rem;
  column-gap: clamp(2rem, 5vw, 5rem);
  padding-inline-start: 1.5rem;
  margin-top: 0;
  margin-bottom: 0;
}

.article-body .footnotes li {
  padding-right: 1rem;
  break-inside: avoid;
}

.article-body .footnotes li + li {
  margin-top: 0.85rem;
}

.article-page .article-endmatter {
  width: min(100%, var(--article-frame-max-inline-size));
  margin-inline: auto;
  margin-top: var(--article-section-space);
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline-strong);
}

.article-endmatter__metadata {
  margin-bottom: 1.5rem;
  font-size: var(--type-label);
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.article-endmatter__metadata,
.article-endmatter__metadata dd {
  margin-inline: 0;
}

.article-endmatter__row {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
}

.article-endmatter__row + .article-endmatter__row {
  margin-top: 0.35rem;
}

.article-endmatter__metadata dt {
  flex: 0 0 auto;
  color: var(--ink-muted);
}

.article-endmatter__matters a {
  color: var(--c-cypress);
}

.article-endmatter__navigation {
  width: 100%;
  padding-block: 1rem 0.15rem;
  border-top: 1px solid var(--hairline);
}

.article-endmatter__navigation .article-header__navigation-link {
  min-height: 3.5rem;
}

.article-endmatter__navigation .article-header__navigation-title {
  font-size: clamp(0.82rem, 0.77rem + 0.16vw, 0.94rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

@media (max-width: 820px) {
  .article-page {
    --article-section-space: clamp(3.5rem, 12vw, 4.25rem);
  }

  .article-page .article-header {
    padding-bottom: 0;
  }

  .article-header__topline {
    gap: 0.75rem;
    padding-block: 0.62rem;
  }

  .article-header__heading {
    padding-block: clamp(2.25rem, 10vw, 3.35rem) clamp(2rem, 8vw, 2.75rem);
  }

  .article-page .article-header h1,
  .article-header[data-title-length="medium"] h1 {
    font-size: clamp(3.45rem, 16vw, 5.35rem);
    font-size: min(clamp(3.45rem, 16vw, 5.35rem), var(--article-title-cap));
    line-height: 0.84;
  }

  .article-header[data-title-length="long"] h1 {
    font-size: clamp(3rem, 13.4vw, 4.65rem);
    font-size: min(clamp(3rem, 13.4vw, 4.65rem), var(--article-title-cap));
    line-height: 0.86;
  }

  .article-header[data-title-length="very-long"] h1 {
    font-size: clamp(2.68rem, 11.8vw, 4.1rem);
    font-size: min(clamp(2.68rem, 11.8vw, 4.1rem), var(--article-title-cap));
    line-height: 0.88;
  }

  .article-header__subtitle {
    margin-top: 1.3rem;
    font-size: clamp(1.3rem, 5.8vw, 1.65rem);
  }

  .article-header__deck {
    margin-top: 0.8rem;
    font-size: 1rem;
  }

  .article-header__byline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    align-items: baseline;
    padding-block: 0.68rem 0.72rem;
  }

  .article-header__byline-facts {
    flex: 1 1 13rem;
    justify-content: flex-start;
  }

  .article-header__modules,
  .article-header__modules[data-module-count="2"],
  .article-header__modules[data-module-count="3"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-header__module {
    padding: 0.62rem 0.58rem 0.7rem;
  }

  .article-header__module-label {
    margin-bottom: 0.52rem;
  }

  .article-header__author-name {
    font-size: 0.82rem;
  }

  .article-header__facts[data-fact-count] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .article-header__facts[data-fact-count="1"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-header__facts[data-fact-count] > div {
    grid-column: auto;
  }

  .article-header__facts[data-fact-count="3"] > div:last-child,
  .article-header__facts[data-fact-count="5"] > div:last-child,
  .article-header__facts[data-fact-count="7"] > div:last-child,
  .article-header__facts[data-fact-count="9"] > div:last-child {
    grid-column: span 2;
  }

  .article-header__facts > div,
  .article-header__facts > div + div {
    padding: 0.5rem 0.48rem;
  }

  .article-header__facts dd {
    margin-left: 0;
  }

  .article-page .article-header + .article-body {
    padding-top: 2.25rem;
  }

  .article-page .article-header + .article-audio {
    margin-top: 2.25rem;
  }

  .article-audio {
    grid-template-columns: 1rem minmax(0, 1fr) 2.8rem;
    grid-template-areas:
      "index identity toggle"
      ". timeline timeline"
      ". links links";
    gap: 0.62rem 0.5rem;
    padding: 0.72rem 0.7rem;
    margin-bottom: 3.5rem;
  }

  .article-audio__index {
    grid-area: index;
  }

  .article-audio__identity {
    grid-area: identity;
  }

  .article-audio__toggle {
    grid-area: toggle;
  }

  .article-audio__timeline {
    grid-area: timeline;
  }

  .article-audio__links {
    grid-area: links;
    display: flex;
    gap: 0.8rem;
    justify-content: flex-end;
  }

  .article-toc {
    margin-bottom: 3.5rem;
  }

  .article-body > p:first-child {
    font-size: 1.0625rem;
    line-height: 1.55;
  }

  .article-body > p:first-child::first-letter {
    font: inherit;
  }

  .article-body > ul,
  .article-body > ol {
    padding-inline-start: 1.35em;
  }

  .article-body > :where(ul, ol) li > :where(ul, ol) {
    padding-inline-start: 1.25em;
  }

  .article-body > h2 {
    font-size: clamp(2rem, 9vw, 2.45rem);
    line-height: 1;
  }

  .article-body > h3 {
    margin-top: 2.75rem;
    font-size: clamp(1.5rem, 6.5vw, 1.8rem);
    line-height: 1.06;
  }

  .article-body > h4 {
    font-size: clamp(1.25rem, 5.5vw, 1.45rem);
  }

  .article-body pre {
    margin-inline: auto;
  }

  .article-body > blockquote {
    width: 100%;
    margin-block: clamp(3rem, 12vw, 3.75rem) 0;
    margin-inline: auto;
    padding: 1rem 0 1rem 1.15rem;
    font-size: clamp(1.35rem, 6vw, 1.65rem);
    line-height: 1.25;
  }

  .article-body .math-display {
    margin-block: 1.5rem 0;
  }

  .article-body .math-display > .katex-display {
    padding-block: 0.25rem 0.45rem;
    font-size: 0.95rem;
  }

  .article-body .math-display-full > .katex-display {
    font-size: 1rem;
  }

  .article-body .math-display-dense > .katex-display {
    font-size: 0.82rem;
  }

  .article-body .footnotes ol {
    columns: auto;
    padding-inline-start: 1.25rem;
  }
}

@media (max-width: 500px) {
  .article-endmatter__navigation {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1rem;
  }

  .article-endmatter__navigation .article-header__navigation-link--previous,
  .article-endmatter__navigation .article-header__navigation-link--next {
    grid-column: 1;
  }

  .article-endmatter__navigation .article-header__navigation-link--previous {
    grid-row: 1;
  }

  .article-endmatter__navigation .article-header__navigation-link--next {
    grid-row: 2;
  }

  .article-endmatter__navigation .article-header__navigation-title {
    font-size: 0.9rem;
  }
}

/* Projection grammar. A projection is the real generated Article document
   worn by an instrument (the Atlas Console): the artifact's own bytes,
   re-served with data-atlas-projection stamped on the document element.
   The Article system itself — this file — decides what each projection
   reveals, so an instrument can never show a rendering that diverges from
   the live page. Inert on every outward page: nothing there carries the
   attribute. */

/* Any projection yields its own scroll and page chrome to the instrument
   framing it, and sits flush so the instrument's stage is the paper edge. */
html[data-atlas-projection] {
  overflow: hidden;
}

html[data-atlas-projection] body:not(.home-page) {
  display: block;
  min-height: 0;
  overflow: hidden;
}

/* Everything under this heading is what a *document* projection surrenders so
   the console's instrument can carry it: the page's chrome, its paper edge,
   and — for an opening — everything past the opening itself.

   None of it applies to the front page, which is why every selector here
   excludes `.home-page`. The home surface wears this stylesheet for one
   reason: its introduction column is an article body and is lit like one.
   It is not a document projection. Its header is not chrome around an
   opening — the wordmark IS the opening — its map is the page, and its
   prose is four paragraphs rather than a lead to be clamped. A projection
   of the front page is the front page, entire and 1:1.

   Narrow projections are the page 1:1, paper edge included; wide ones
   surrender the edge so the instrument can hug the visual column. */
@media (min-width: 921px) {
  html[data-atlas-projection] body:not(.home-page) {
    width: 100%;
    margin: 0;
  }
}

/* The instrument's own chrome carries identity and return: the projected
   document's corner and footer yield, and the Article header is the top
   edge of the frame. */
html[data-atlas-projection] body:not(.home-page) .atlas-header,
html[data-atlas-projection] body:not(.home-page) .atlas-footer {
  display: none;
}

/* The projection shadows the page's true window: the corner yields to the
   instrument chrome, but the page's own block-start distance — where the
   Article truly sits below its top edge — is kept exact. Only trailing
   space is removed. */
html[data-atlas-projection] body:not(.home-page) .atlas-main {
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding-block-end: 0;
  flex: none;
}

/* Narrow projections are the true mobile page 1:1 — the page's own inline
   padding stands. Wide projections trade it for a marker-safe inset; the
   instrument hugs the visual column and owns the surrounding space. */
@media (min-width: 921px) {
  html[data-atlas-projection] body:not(.home-page) .atlas-main {
    padding-inline: 0.25rem;
  }
}

/* One gutter, not two — and the same gutter as the page's own: on narrow
   projections the body's top paper edge yields (the instrument chrome
   already stands where the page header stood), while Main keeps its full
   block-start distance. The title then connects to the chrome exactly as
   it connects to the header on the served page. */
@media (max-width: 920px) {
  html[data-atlas-projection] body:not(.home-page) {
    margin-block-start: 0;
  }
}

/* ---------- The contact route ---------- */

/* Sits where the endmatter sits on a work — the same frame, the same rule
   above it — because it is the same thing structurally: what follows the body
   on a page that has one. Its column is the prose measure, so the fields line
   up with the paragraphs above them rather than sprawling across Main. */
.article-page .contact-form,
.article-page .contact-fallback {
  width: min(100%, var(--md-measure-prose, 42rem));
  margin-inline: auto;
  margin-top: var(--article-section-space);
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline-strong);
}

.article-page .contact-fallback {
  font-family: var(--serif);
  color: var(--ink-muted);
}

.contact-form {
  display: grid;
  /* Wide enough that each hairline reads as the floor of the field above it
     rather than the ceiling of the one below. */
  gap: 2rem;
}

.contact-form__field {
  display: grid;
  gap: 0.4rem;
}

/* The dossier's label grammar, which every other named value on an Article
   already wears. */
.contact-form__field > span {
  font-family: var(--sans);
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* A rule, not a box: the page is drawn in hairlines and this is one more. */
.contact-form :where(input[type="text"], input[type="email"], textarea) {
  width: 100%;
  padding: 0.45rem 0;
  border: 0;
  border-bottom: 1px solid var(--hairline-strong);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.6;
}

.contact-form textarea {
  min-height: 8rem;
  resize: vertical;
}

.contact-form :where(input, textarea):focus-visible {
  outline: 0;
  border-bottom-color: var(--ink);
}

/* The captcha renders into this at runtime and is 0 tall until it does, so
   the button does not jump when the widget arrives. */
.contact-form .h-captcha {
  min-height: 78px;
}

.contact-form__send {
  justify-self: start;
  padding: 0.5rem 1.4rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}

.contact-form__send:hover,
.contact-form__send:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

/* The honeypot. Hidden from sight and from the accessibility tree, reachable
   only by something filling every field it can find — which is the one thing
   that must not reach the mailbox. Never `display: none`: a bot that reads
   the stylesheet skips what nothing can fill. */
.contact-form__decoy {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The opening projection is the Article's own definition of its opening:
   the complete header, spoken edition, and contents modules, any authored
   lead blocks up to the first paragraph of prose, and that paragraph held
   to its first rendered lines. Everything after the opening — including
   the endmatter — stays out of frame. */
/* The opening is a reading amount: about a tweet of the body. Media and
   the contact route step aside, the lead runs to the first paragraph of
   prose, and that paragraph clamps at four rendered lines of the prose
   measure — roughly 280 characters. Nothing renders past it, endmatter
   included. */
html[data-atlas-projection="opening"] body:not(.home-page) .article-body > .md-figure,
html[data-atlas-projection="opening"] body:not(.home-page) .article-body > .md-gallery,
html[data-atlas-projection="opening"] body:not(.home-page) .article-body > .md-gallery-frame,
html[data-atlas-projection="opening"] body:not(.home-page) .article-body > :nth-child(n + 9),
html[data-atlas-projection="opening"] body:not(.home-page) .article-body > p ~ *,
html[data-atlas-projection="opening"] body:not(.home-page) .contact-form,
html[data-atlas-projection="opening"] body:not(.home-page) .contact-fallback,
html[data-atlas-projection="opening"] body:not(.home-page) .article-endmatter {
  display: none;
}

html[data-atlas-projection="opening"] body:not(.home-page) .article-body > p:first-of-type {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}