.read-page-body {
  --read-column: 780px;
  background: var(--site-color-bg);
}

.read-page-body ::selection {
  background: var(--site-color-fg);
  color: var(--site-color-bg);
}

.read-progress {
  position: fixed;
  top: calc(var(--site-nav-height) - 1px);
  right: 0;
  left: 0;
  z-index: calc(var(--site-z-nav) + 1);
  height: 1px;
  background: transparent;
  pointer-events: none;
}

.read-progress span {
  display: block;
  width: calc(var(--read-progress, 0) * 100%);
  height: 100%;
  background: var(--site-color-signal);
  transform-origin: left center;
}

.read-main {
  padding-bottom: var(--site-space-9);
}

.read-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.55fr);
  gap: clamp(48px, 8vw, 120px);
  align-items: end;
  padding: clamp(56px, 8vw, 112px) 0 var(--site-space-8);
  border-bottom: 1px solid var(--site-color-border);
}

.read-hero h1 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(50px, 7.6vw, 104px);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.read-hero h1 > span {
  display: block;
}

.read-hero-copy {
  align-self: end;
  padding-bottom: 4px;
}

.read-hero-copy p {
  margin: 0;
  color: var(--site-color-muted);
  font-size: var(--site-text-base);
  line-height: 1.75;
}

.read-hero-copy p + p {
  margin-top: var(--site-space-5);
}

.read-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  color: var(--site-color-fg) !important;
  font-size: var(--site-text-xs) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.read-layout {
  display: grid;
  grid-template-columns: minmax(170px, 220px) minmax(0, var(--read-column));
  gap: clamp(48px, 8vw, 128px);
  justify-content: space-between;
  padding-top: var(--site-space-8);
}

.read-toc {
  position: sticky;
  top: calc(var(--site-nav-height) + var(--site-space-6));
  align-self: start;
}

.read-toc-title {
  margin: 0 0 var(--site-space-4);
  color: var(--site-color-muted);
  font-size: var(--site-text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.read-toc a {
  position: relative;
  display: block;
  padding: 9px 0 9px 18px;
  color: var(--site-color-muted);
  font-size: var(--site-text-sm);
  line-height: 1.35;
  text-decoration: none;
  transition: color var(--site-motion-hover) ease;
}

.read-toc a::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 0;
  width: 1px;
  background: var(--site-color-border);
  transition: background var(--site-motion-hover) ease, transform var(--site-motion-hover) ease;
}

.read-toc a:hover,
.read-toc a:focus-visible,
.read-toc a[aria-current="location"] {
  color: var(--site-color-fg);
}

.read-toc a:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--site-color-fg);
  outline-offset: 3px;
}

.read-toc a[aria-current="location"]::before {
  background: var(--site-color-signal);
  transform: scaleY(1.45);
}

.read-content {
  min-width: 0;
}

.read-section {
  scroll-margin-top: calc(var(--site-nav-height) + var(--site-space-6));
  padding: 0 0 var(--site-space-8);
  border-bottom: 1px solid var(--site-color-border);
}

.read-section + .read-section {
  padding-top: var(--site-space-8);
}

.read-section:last-child {
  border-bottom: 0;
}

.read-section h2 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.read-section > p,
.read-prose p {
  max-width: 70ch;
  margin: var(--site-space-5) 0 0;
  color: var(--site-color-muted);
  font-size: var(--site-text-base);
  line-height: 1.78;
}

.read-section a,
.read-footer a {
  color: var(--site-color-fg);
  text-decoration-color: var(--site-color-border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.read-section a:hover,
.read-section a:focus-visible,
.read-footer a:hover,
.read-footer a:focus-visible {
  text-decoration-color: var(--site-color-signal);
}

.read-section a:focus-visible,
.read-footer a:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--site-color-fg);
  outline-offset: 3px;
}

.read-path {
  margin-top: var(--site-space-7);
  border-top: 1px solid var(--site-color-border-strong);
}

.read-path-step {
  display: grid;
  grid-template-columns: 48px minmax(150px, 0.42fr) minmax(0, 1fr);
  gap: var(--site-space-5);
  padding: var(--site-space-5) 0;
  border-bottom: 1px solid var(--site-color-border);
}

.read-path-step:last-child {
  border-bottom-color: var(--site-color-border-strong);
}

.read-step-number {
  color: var(--site-color-signal);
  font-size: var(--site-text-sm);
  font-variant-numeric: tabular-nums;
}

.read-path-step h3,
.read-fact h3 {
  margin: 0;
  font-size: var(--site-text-base);
  font-weight: 500;
  line-height: 1.45;
}

.read-path-step p,
.read-fact p {
  margin: 0;
  color: var(--site-color-muted);
  font-size: 14px;
  line-height: 1.72;
}

.read-callout {
  margin-top: var(--site-space-6);
  padding: var(--site-space-5);
  border: 1px solid var(--site-color-border-strong);
  border-radius: var(--site-radius-input);
  background: rgba(244, 244, 240, 0.035);
}

.read-callout strong {
  display: block;
  margin-bottom: var(--site-space-2);
  font-size: var(--site-text-sm);
  font-weight: 600;
}

.read-callout p {
  margin: 0;
  color: var(--site-color-muted);
  font-size: var(--site-text-sm);
  line-height: 1.72;
}

.read-faq {
  margin-top: var(--site-space-7);
  border-top: 1px solid var(--site-color-border-strong);
}

.read-faq details {
  border-bottom: 1px solid var(--site-color-border);
}

.read-faq details:last-child {
  border-bottom-color: var(--site-color-border-strong);
}

.read-faq summary {
  position: relative;
  min-height: 72px;
  display: flex;
  align-items: center;
  padding: var(--site-space-5) 48px var(--site-space-5) 0;
  color: var(--site-color-fg);
  cursor: pointer;
  font-size: var(--site-text-base);
  font-weight: 500;
  line-height: 1.45;
  list-style: none;
}

.read-faq summary::-webkit-details-marker {
  display: none;
}

.read-faq summary::after {
  content: "+";
  position: absolute;
  right: 2px;
  color: var(--site-color-muted);
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
}

.read-faq details[open] summary::after {
  content: "−";
  color: var(--site-color-signal);
}

.read-faq summary:hover,
.read-faq summary:focus-visible {
  color: var(--site-color-signal);
}

.read-faq summary:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--site-color-fg);
  outline-offset: 3px;
}

.read-answer {
  max-width: 68ch;
  padding: 0 48px var(--site-space-5) 0;
}

.read-answer p,
.read-answer li {
  color: var(--site-color-muted);
  font-size: 14px;
  line-height: 1.78;
}

.read-answer p {
  margin: 0;
}

.read-answer p + p,
.read-answer ul,
.read-answer ol {
  margin-top: var(--site-space-3);
}

.read-answer ol,
.read-answer ul {
  margin-bottom: 0;
  padding-left: 1.25rem;
}

.read-answer code,
.read-inline-code {
  padding: 2px 6px;
  border: 1px solid var(--site-color-border);
  border-radius: 3px;
  color: var(--site-color-fg);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.9em;
}

.read-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--site-space-7);
  border-top: 1px solid var(--site-color-border-strong);
  border-bottom: 1px solid var(--site-color-border-strong);
}

.read-fact {
  min-height: 178px;
  padding: var(--site-space-5) var(--site-space-5) var(--site-space-6) 0;
  border-bottom: 1px solid var(--site-color-border);
}

.read-fact:nth-child(odd) {
  padding-right: var(--site-space-6);
  border-right: 1px solid var(--site-color-border);
}

.read-fact:nth-child(even) {
  padding-left: var(--site-space-6);
}

.read-fact:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.read-fact-mark {
  display: block;
  margin-bottom: var(--site-space-5);
  color: var(--site-color-signal);
  font-size: var(--site-text-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.read-fact p {
  margin-top: var(--site-space-3);
}

.read-ledger {
  margin-top: var(--site-space-7);
  border-top: 1px solid var(--site-color-border-strong);
}

.read-ledger-head,
.read-ledger-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.34fr) minmax(0, 0.82fr) minmax(120px, 0.42fr);
  gap: var(--site-space-5);
}

.read-ledger-head {
  padding: var(--site-space-3) 0;
  border-bottom: 1px solid var(--site-color-border-strong);
  color: var(--site-color-muted);
  font-size: var(--site-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.read-ledger-row {
  padding: var(--site-space-5) 0;
  border-bottom: 1px solid var(--site-color-border);
}

.read-ledger-mobile-label {
  display: none;
}

.read-ledger-row:last-child {
  border-bottom-color: var(--site-color-border-strong);
}

.read-ledger-row h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
}

.read-ledger-row p {
  margin: 0;
  color: var(--site-color-muted);
  font-size: 14px;
  line-height: 1.72;
}

.read-ledger-retention {
  color: var(--site-color-fg) !important;
  font-variant-numeric: tabular-nums;
}

.read-list {
  margin: var(--site-space-5) 0 0;
  padding-left: 1.15rem;
}

.read-list li {
  max-width: 70ch;
  padding-left: 6px;
  color: var(--site-color-muted);
  font-size: var(--site-text-base);
  line-height: 1.78;
}

.read-list li + li {
  margin-top: var(--site-space-3);
}

.read-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-space-3);
  margin-top: var(--site-space-6);
}

.read-action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--site-space-4);
  border: 1px solid var(--site-color-border-strong);
  border-radius: var(--site-radius-control);
  color: var(--site-color-fg);
  font-size: var(--site-text-sm);
  text-decoration: none;
  transition: background var(--site-motion-hover) ease, color var(--site-motion-hover) ease;
}

.read-action:hover,
.read-action:focus-visible {
  background: var(--site-color-fg);
  color: var(--site-color-bg);
  outline: 2px solid var(--site-color-fg);
  outline-offset: 3px;
}

.read-footer {
  display: flex;
  justify-content: space-between;
  gap: var(--site-space-5);
  padding: var(--site-space-6) var(--site-gutter);
  border-top: 1px solid var(--site-color-border);
  color: var(--site-color-muted);
  font-size: var(--site-text-xs);
}

.read-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-space-4);
}

@media (max-width: 860px) {
  .read-hero {
    grid-template-columns: 1fr;
    gap: var(--site-space-6);
  }

  .read-hero h1 {
    max-width: 15ch;
  }

  .read-hero-copy {
    max-width: 62ch;
  }

  .read-layout {
    grid-template-columns: 1fr;
    gap: var(--site-space-7);
  }

  .read-toc {
    position: static;
    display: flex;
    gap: 4px var(--site-space-4);
    overflow-x: auto;
    padding-bottom: var(--site-space-3);
    border-bottom: 1px solid var(--site-color-border);
    scrollbar-width: thin;
  }

  .read-toc-title {
    display: none;
  }

  .read-toc a {
    flex: 0 0 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 12px 0;
  }

  .read-toc a::before {
    inset: auto 0 0;
    width: auto;
    height: 1px;
  }

  .read-toc a[aria-current="location"]::before {
    transform: scaleX(1);
  }
}

@media (max-width: 640px) {
  .read-page-body {
    --read-mobile-nav-height: 108px;
  }

  .read-page-body .site-header {
    height: var(--read-mobile-nav-height);
  }

  .read-page-body .site-header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 56px 52px;
    gap: 0 var(--site-space-3);
  }

  .read-page-body .site-brand {
    grid-column: 1;
    grid-row: 1;
  }

  .read-page-body .site-account {
    grid-column: 2;
    grid-row: 1;
  }

  .read-page-body .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    align-self: stretch;
    gap: var(--site-space-5);
  }

  .read-page-body .site-nav a {
    min-height: 44px;
    font-size: var(--site-text-sm);
  }

  .read-page-body .site-main {
    padding-top: calc(var(--read-mobile-nav-height) + var(--site-space-7));
  }

  .read-page-body .read-progress {
    top: calc(var(--read-mobile-nav-height) - 1px);
  }

  .read-hero {
    padding-top: var(--site-space-7);
  }

  .read-hero h1 {
    font-size: clamp(42px, 14vw, 64px);
    line-height: 0.98;
  }

  .read-path-step {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: var(--site-space-3);
  }

  .read-path-step p {
    grid-column: 2;
  }

  .read-ledger-head {
    display: none;
  }

  .read-ledger-row {
    grid-template-columns: 1fr;
    gap: var(--site-space-4);
  }

  .read-ledger-mobile-label {
    display: block;
    margin-bottom: 6px;
    color: var(--site-color-signal);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .read-facts {
    grid-template-columns: 1fr;
  }

  .read-fact,
  .read-fact:nth-child(odd),
  .read-fact:nth-child(even) {
    min-height: 0;
    padding: var(--site-space-5) 0;
    border-right: 0;
    border-bottom: 1px solid var(--site-color-border);
  }

  .read-fact:nth-last-child(2) {
    border-bottom: 1px solid var(--site-color-border);
  }

  .read-fact:last-child {
    border-bottom: 0;
  }

  .read-footer {
    flex-direction: column;
  }
}