@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600;700&family=Public+Sans:wght@400;600;700&display=swap');

/* Colors and type live in /tokens.css, which style.css imports on every
   article page. Only article-specific aliases are declared here. */
.article-page {
  --well: var(--accent-pale);
  color: var(--ink);
  background: var(--bg);
  background-image: none;
  font-family: var(--font-body);
}

/* Longread navigation: keep the original reading measure and use the left margin. */
body.article-page .article-toc,
body.article-page .article-toc-inner {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.article-page .article-toc h2,
body.article-page .article-toc h3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
}

body.article-page .article-toc-inner > h2:first-child,
body.article-page .article-toc-inner > h3:first-child,
body.article-page .article-toc-title {
  display: none !important;
}

body.article-page .article-toc-link,
body.article-page .article-toc-link.is-active {
  font-size: 14px;
  font-weight: 400 !important;
  line-height: 1.35;
}

body.article-page .article-toc-list ul .article-toc-link {
  font-size: 13px;
}

body.article-page .article-toc-group {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

body.article-page .article-toc-group > .article-toc-link {
  display: block;
  padding-right: 22px;
}

body.article-page .article-toc-group-toggle {
  all: unset;
  position: absolute;
  top: 0.3em;
  right: 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

body.article-page .article-toc-group-toggle::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform-origin: center;
  transform: rotate(45deg);
  transition: transform 120ms ease;
}

body.article-page .article-toc-group.is-expanded > .article-toc-group-toggle::before {
  transform: rotate(225deg);
}

body.article-page .article-toc-group-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

body.article-page .article-toc-group > ul[hidden] {
  display: none !important;
}

@media (min-width: 1400px) {
  body.article-page .article-with-sidebar {
    display: grid;
    grid-template-columns: 240px 860px;
    gap: 48px;
    align-items: start;
    width: 1148px;
    margin-left: -288px;
  }

  body.article-page .article-with-sidebar > .longread {
    grid-column: 2;
    grid-row: 1;
    width: 860px;
    max-width: 860px;
    min-width: 0;
  }

  body.article-page .article-toc {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: 88px;
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    max-height: none !important;
    overflow: visible !important;
  }

  body.article-page .article-toc-inner {
    position: static;
    max-height: none !important;
    padding: 0;
    overflow: visible !important;
    overscroll-behavior: auto;
    scrollbar-width: auto;
  }

  body.article-page .article-toc-list {
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (min-width: 980px) and (max-width: 1399px) {
  body.article-page .article-with-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  body.article-page .article-with-sidebar > .longread {
    grid-column: 1;
    grid-row: 2;
  }

  body.article-page .article-toc {
    grid-column: 1;
    grid-row: 1;
    position: static;
    width: auto;
    margin-bottom: 32px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.article-page .article-toc-toggle {
    display: flex;
  }

  body.article-page .article-toc-inner {
    display: none;
    position: static;
    max-height: none;
    overflow: visible;
  }

  body.article-page .article-toc.is-open .article-toc-inner {
    display: block;
  }
}

/* min() keeps the shell from sticking out between the framework's mobile
   breakpoint (767px) and its own max width. */
.article-shell {
  max-width: min(820px, 100%);
}

.article-shell--with-toc {
  max-width: min(1140px, 100%);
}

.article-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  justify-content: space-between;
  padding: 1.35rem 0 0.9rem;
  border-bottom: 1px solid rgba(23, 33, 43, 0.15);
  font-size: 0.95rem;
}

/* Keep the author on the left and secondary links grouped on the right. */
.article-nav .article-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}

@media (max-width: 560px) {
  .article-nav,
  .article-nav .article-nav-links {
    column-gap: 1rem;
    font-size: 0.875rem;
  }
}

/* Conversion block: the reader who finished the article needs somewhere to go
   besides the subscribe form. Negative side margins pull the tinted panel
   outside the reading column so its text lines up with the article body. */
.article-cta {
  margin: 2.75rem -1.5rem 0;
  padding: 1.5rem;
  background: var(--well);
  border-radius: 8px;
}

.article-cta h2 {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}

.article-cta p {
  margin: 0 0 1.15rem;
  max-width: 58ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--body-text);
}

.article-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.article-cta-button {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1rem;
  border-radius: 6px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.article-cta-button:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
  text-decoration: none;
}

/* --muted would fall to 4.17:1 against the tinted panel; body ink keeps AA. */
.article-cta-secondary {
  font-size: 0.875rem;
  color: var(--body-text);
}

@media (max-width: 560px) {
  .article-cta {
    margin-left: 0;
    margin-right: 0;
  }

  .article-cta-button {
    width: 100%;
    justify-content: center;
  }
}

.longread {
  font-size: 1.05rem;
  line-height: 1.72;
  padding: 2.25rem 0 1rem;
}

.article-with-sidebar {
  display: block;
  position: relative;
}

.article-toc {
  margin: 1rem 0 0;
}

.article-toc-toggle {
  width: 100%;
  margin: 0 0 0.9rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid #d4d9e1;
  border-radius: 10px;
  background: #ffffff;
  color: #1e2c3a;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  display: none;
}

.article-toc-toggle:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.article-toc-inner {
  border: 1px solid #d4d9e1;
  border-radius: 12px;
  background: #fff;
  padding: 1rem;
}

.article-toc h2 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
}

.article-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: calc(100vh - 160px);
  overflow: auto;
  padding-right: 0.35rem;
}

.article-toc-list::-webkit-scrollbar {
  width: 0.45rem;
}

.article-toc-list::-webkit-scrollbar-thumb {
  background: #c3d0e5;
  border-radius: 999px;
}

.article-toc-list ul {
  list-style: none;
  margin: 0;
  padding-left: 0.8rem;
}

.article-toc-item {
  margin: 0;
}

.article-toc-link {
  display: block;
  color: #3f5468;
  text-decoration: none;
  padding: 0.34rem 0.2rem;
  border-left: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  line-height: 1.38;
}

.article-toc-link:hover {
  color: var(--accent);
}

.article-toc-item--h2 .article-toc-link {
  font-weight: 700;
}

.article-toc-item--h2 {
  margin-top: 0.25rem;
}

.article-toc-item--h3 {
  margin: 0;
}

.article-toc-link.is-active {
  border-left-color: var(--accent);
  color: var(--accent);
  transform: translateX(0.08rem);
}

.article-toc.is-open .article-toc-inner {
  display: block;
}

@media (min-width: 980px) {
  .article-with-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 2.2rem;
    align-items: start;
  }

  .article-toc {
    position: sticky;
    top: 86px;
    align-self: start;
  }

  .article-toc-toggle {
    display: none !important;
  }
}

@media (max-width: 979px) {
  .article-with-sidebar {
    display: block;
  }

  .article-toc {
    margin: 0.2rem 0 1.2rem;
  }

  .article-toc-toggle {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
  }

  .article-toc-toggle::after {
    content: "▾";
    transition: transform 0.2s ease;
    font-size: 0.8rem;
  }

  .article-toc.is-open .article-toc-toggle::after {
    transform: rotate(180deg);
  }

  .article-toc-inner {
    display: none;
  }
}

.longread h1 {
  max-width: none;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

.longread h2 {
  margin-top: 2.75rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}

.longread h2::before {
  content: "§";
  color: var(--accent-soft);
  font-weight: 400;
}

.longread h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.phase-num {
  display: inline-block;
  margin-right: 0.6rem;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}

.longread p,
.longread li {
  max-width: 72ch;
}

.article-series {
  margin: 0 0 0.8rem;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.source-note {
  max-width: 72ch;
  margin: 1.5rem 0 2.25rem;
  padding: 0.15rem 0 0.15rem 1rem;
  border-left: 2px solid var(--accent-soft);
  color: #435063;
  font-size: 0.92rem;
  line-height: 1.58;
}

.source-note p {
  margin: 0;
}

.article-meta {
  color: #637083;
  font-family: var(--font-display);
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}

.draft-label,
.article-type-label,
.article-basis-label {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.draft-label {
  border: 1px solid #d85b45;
  color: var(--signal);
}

.article-type-label {
  border: 1px solid #6b9ed2;
  color: var(--accent);
}

.article-basis-label {
  border: 1px solid #9aa5b4;
  color: #536174;
}

.article-deck {
  max-width: 64ch;
  margin: 0 0 2rem;
  color: #435063;
  font-size: 1.18rem;
  line-height: 1.55;
}

.article-lead {
  max-width: 64ch;
  margin: 0 0 1.6rem;
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.58;
}

.table-scroll-hint {
  display: none;
}

.table-scroll {
  max-width: 100%;
  margin: 1.75rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll table {
  width: 100%;
  min-width: 720px;
  margin: 0;
}

.table-scroll:focus {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.subscribe-box {
  padding: 1.15rem 0;
  border-top: 1px solid rgba(23, 33, 43, 0.15);
  border-bottom: 1px solid rgba(23, 33, 43, 0.15);
}

.subscribe-copy strong {
  font-size: 1.08rem;
}

.subscribe-copy p {
  max-width: 56ch;
  margin: 0.25rem 0 0;
  color: #536071;
}

.buttondown-form {
  max-width: 34rem;
  margin: 1rem 0 0.7rem;
}

.buttondown-form label {
  display: block;
  margin-bottom: 0.35rem;
  color: #435063;
  font-size: 0.88rem;
  font-weight: 600;
}

.subscribe-fields {
  display: flex;
  align-items: stretch;
  gap: 0.55rem;
}

.subscribe-fields input,
.subscribe-fields button {
  min-height: 2.75rem;
  margin: 0;
}

.subscribe-fields input {
  flex: 1;
  min-width: 0;
  background: #fff;
}

.subscribe-fields button {
  flex: 0 0 auto;
  padding-inline: 1rem;
}

.subscribe-links {
  display: flex;
  gap: 0.3rem 0.55rem;
  flex-wrap: wrap;
  margin: 0;
  /* Sits on --well on the index page, where --muted drops below AA. */
  color: #536071;
  font-size: 0.9rem;
}

.longread img {
  display: block;
  width: 100%;
  height: auto;
  margin: 2rem auto;
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(23, 33, 43, 0.09);
}

.article-hero {
  max-width: 100%;
  margin: 2.25rem 0 2.5rem;
}

.article-hero img {
  margin: 0;
}

/* Inline diagrams: SVG in the site palette, scaled to the reading measure. */
.article-figure {
  margin: 2rem 0 2.25rem;
}

.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.longread pre,
.longread .highlight {
  overflow-x: auto;
  max-width: 100%;
  background: var(--well);
  color: #111827;
  border: 1px solid #d8d4c6;
  border-radius: 10px;
  padding: 1.5rem 1.65rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.5;
}

.longread .highlight pre {
  margin: 0;
  padding: 0;
}

.longread code {
  font-family: var(--font-display);
  word-break: break-word;
}

.longread table {
  border-collapse: collapse;
}

.longread th {
  border-bottom: 1px solid rgba(23, 33, 43, 0.3);
  padding: 0.6rem 1.5rem 0.6rem 0;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  color: #637083;
}

.longread thead th {
  border-bottom: 2px solid #17212b;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.longread td {
  border-bottom: 1px solid rgba(23, 33, 43, 0.15);
  padding: 0.9rem 1.5rem 0.9rem 0;
  line-height: 1.5;
}

.longread th:last-child,
.longread td:last-child {
  padding-right: 0;
}

.longread td:last-child {
  color: var(--accent);
}

.agent-roles-article pre code {
  color: inherit;
}

.article-footer {
  margin-top: 2.5rem;
  /* Drop the framework's footer inset so the footer shares the article's
     left edge instead of sitting 43px to the right of the body text. */
  padding-left: 0;
  padding-right: 0;
  color: #536071;
  font-size: 0.95rem;
}

.article-index header {
  padding: 2rem 0 1.25rem;
}

.article-index h1 {
  max-width: none;
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.article-list {
  padding: 0.5rem 0 0;
}

.article-card {
  position: relative;
  padding: 1.65rem 0 1.75rem;
  border-top: 1px solid rgba(23, 33, 43, 0.15);
  border-radius: 0;
  box-shadow: none;
}

.article-card h2 {
  max-width: none;
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

.article-card .article-meta {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.article-part {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.article-card h2 a::after {
  position: absolute;
  inset: 0;
  content: "";
}

.article-card:focus-within {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
  border-radius: 2px;
}

.article-card:hover h2 a {
  color: #004fae;
}

.article-card p:last-child {
  margin-bottom: 0;
}

.article-index .subscribe-box {
  margin: 1rem 0 0;
}

.article-index .article-footer {
  margin-top: 1.75rem;
  padding: 0;
  border-top: 0;
  text-align: left;
}

.footer-links {
  display: flex;
  gap: 0.45rem 0.9rem;
  flex-wrap: wrap;
}

@media screen and (max-width: 680px) {
  .article-shell {
    padding: 0 18px;
  }

  .article-nav {
    align-items: center;
    gap: 1rem;
    white-space: nowrap;
  }

  .longread {
    font-size: 1rem;
    padding-top: 1.6rem;
  }

  .longread h1 {
    max-width: none;
    font-size: 1.95rem;
    line-height: 1.08;
  }

  .agent-roles-article > p:not(.article-meta):not(.article-deck):not(.article-lead):not(.table-scroll-hint) {
    margin-bottom: 0.85rem;
  }

  .article-lead {
    font-size: 1.12rem;
  }

  .agent-roles-article pre.process-flow {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .table-scroll-hint {
    display: block;
    margin: 1.25rem 0 0.5rem;
    color: #637083;
    font-size: 0.85rem;
    line-height: 1.4;
  }

  .table-scroll-hint + .table-scroll {
    margin-top: 0;
  }

  .article-index header {
    padding-top: 1.75rem;
  }

  .article-index h1 {
    font-size: 2rem;
  }

  .article-card {
    padding: 1.4rem 0 1.5rem;
  }

  .article-card h2 {
    font-size: 1.4rem;
  }

  .subscribe-fields {
    align-items: stretch;
    flex-direction: column;
  }

  .subscribe-fields button {
    width: 100%;
  }
}

.article-view-count {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.article-engagement {
  margin: 3rem 0 1rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(23, 33, 43, 0.15);
}

.article-engagement h2 {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.2;
}

.article-engagement-intro {
  margin: 0 0 1.5rem;
  color: #435063;
}

.article-engagement .giscus,
.article-engagement .giscus-frame {
  width: 100%;
}