@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;
}

/* Pages with the persistent global sidebar (shell.css .site-shell/.sidebar)
   place the article body and its optional per-page TOC side by side inside
   .main, instead of the older .article-with-sidebar left-margin TOC. */
.article-layout {
  display: flex;
  gap: clamp(2rem, 5vw, 3.5rem);
}

.article-body {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 46rem;
}

.article-aside {
  flex: 0 0 15rem;
  position: sticky;
  top: 2rem;
  align-self: flex-start;
}

.article-aside:empty {
  display: none;
}

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

.article-aside .article-toc-inner {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

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

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

/* The collection strip is sized for a full-width column. Inside the two-column
   article layout the body is ~585px, where its 5-item row collides with the
   title block, so use the stacked treatment regardless of viewport width. */
.article-body .incident-collection {
  grid-template-columns: 1fr;
  align-items: start;
}

.article-body .incident-collection__nav {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--border);
}

.article-body .incident-collection__nav a {
  padding-block: 0.6rem;
}

@media (max-width: 1100px) {
  .article-layout {
    flex-direction: column;
  }

  .article-aside {
    position: static;
    width: 100%;
    flex: none;
    align-self: stretch;
  }
}

.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;
}

/* Tacit's framework reset renders <li> as inline-block, which shrinks each
   TOC row to its own text width and lets adjacent entries sit side by side. */
.article-toc-list li {
  display: block;
}

.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,
.longread h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}

.longread h4 {
  margin-top: 1.8rem;
}

.longread .file-example {
  max-width: 100%;
  margin: 1.5rem 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--well);
}

.longread .file-example figcaption {
  padding: 0.65rem 1.1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.longread .file-example figcaption code {
  color: inherit;
  font-size: inherit;
  word-break: normal;
  text-decoration: none;
}

.longread .file-example figcaption span {
  color: var(--muted);
  font-weight: 500;
}

.longread .file-example pre.file-snippet {
  margin: 0;
  border: 0;
  border-radius: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.setup-tabs {
  margin: 1.5rem 0 2rem;
}

.setup-tabs__list {
  display: flex;
  gap: 1.25rem;
  border-bottom: 1px solid var(--border);
}

.setup-tabs__list button {
  appearance: none;
  margin: 0 0 -1px;
  padding: 0.7rem 0.1rem 0.65rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.setup-tabs__list button:hover {
  color: var(--ink);
}

.setup-tabs__list button[aria-selected="true"] {
  border-bottom-color: var(--signal);
  color: var(--ink);
}

.setup-tabs__list button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.setup-tabs__panel {
  padding-top: 1rem;
}

.setup-tabs__panel[hidden] {
  display: none;
}

.setup-tabs__panel pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

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

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

/* Tacit shrinks every <p>/<li> to 0.85em with a 1.4 line-height, which quietly
   overrode the reading size set on .longread (18.9px became 15.3px). Restore it
   for unclassed body copy only — 1em keeps captions, notes and footnotes
   relative to whatever container size they already have. */
.longread p:not([class]),
.longread li:not([class]) {
  font-size: 1em;
  line-height: 1.72;
}

.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;
}

.draft-notice {
  max-width: 72ch;
  margin: 3rem 0 0;
  padding: 1rem 1.2rem;
  border: 1px solid #e7b1a7;
  border-left: 4px solid var(--signal);
  border-radius: 10px;
  background: #fff7f4;
  color: #493b3a;
  font-size: 0.95rem;
  line-height: 1.55;
}

.draft-notice p {
  margin: 0;
}

.longread .footnotes--compact {
  font-size: 0.875rem;
  line-height: 1.6;
}

.longread .footnotes--compact li,
.longread .footnotes--compact p {
  margin-block: 0;
}

.article-meta {
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.85rem;
  line-height: 1.4;
  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;
}

.article-video video {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  background: #0d1117;
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(23, 33, 43, 0.09);
}

.article-video figcaption {
  margin-top: 0.75rem;
  color: #637083;
  font-size: 0.88rem;
  line-height: 1.5;
}

.article-diagram--transparent img {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* 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;
  border-radius: 0;
  box-shadow: none;
}

.longread pre,
.longread .highlight {
  overflow-x: auto;
  max-width: 100%;
  background: var(--well);
  color: var(--code-ink);
  border: 1px solid var(--border);
  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;
}

/* A single shell command is an action, not a generic code sample. Present it
   as a compact macOS terminal; the decorative prompt stays out of copied text. */
.longread pre.terminal-command {
  position: relative;
  padding: 4.15rem 1.65rem 1.5rem;
  background:
    linear-gradient(to bottom, var(--terminal-titlebar) 0, var(--terminal-titlebar) 44px, var(--terminal-divider) 44px, var(--terminal-divider) 45px, var(--terminal-bg) 45px, var(--terminal-bg) 100%);
  color: var(--terminal-text);
  border: 1px solid var(--terminal-divider);
  border-radius: 14px;
  box-shadow: 0 10px 30px var(--terminal-shadow);
}

.longread pre.terminal-command::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 20px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--terminal-close);
  box-shadow: 22px 0 var(--terminal-minimize), 44px 0 var(--terminal-maximize);
}

.longread pre.terminal-command::after {
  content: "zsh";
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--terminal-muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.longread pre.terminal-command--bash::after {
  content: "bash";
}

.longread pre.terminal-command--powershell::after {
  content: "PowerShell";
}

.longread pre.terminal-command code {
  color: inherit;
  white-space: pre;
}

/* Older articles keep a plain text node inside <code>. Preserve their
   decorative prompt while richer terminal sessions render one per command. */
.longread pre.terminal-command > code:not(:has(.terminal-line))::before {
  content: "$ ";
  color: var(--terminal-prompt);
}

.longread pre.terminal-command--powershell > code:not(:has(.terminal-line))::before {
  content: "PS> ";
}

.secrets-guide .longread pre.terminal-command code {
  display: block;
  white-space: normal;
}

.longread pre.terminal-command .terminal-line {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  align-items: baseline;
  overflow-wrap: anywhere;
}

.longread pre.terminal-command .terminal-line::before {
  content: "$ ";
  color: var(--terminal-prompt);
}

.longread pre.terminal-command--powershell .terminal-line {
  grid-template-columns: 2.8rem minmax(0, 1fr);
}

.longread pre.terminal-command--powershell .terminal-line::before {
  content: "PS> ";
}

.longread pre.terminal-command .terminal-line--separated {
  margin-top: 0.85rem;
}

.longread pre.terminal-command .terminal-output {
  display: block;
  padding-left: 1.35rem;
  color: var(--terminal-muted);
  overflow-wrap: anywhere;
}

.longread pre.terminal-command--powershell .terminal-output {
  padding-left: 2.8rem;
}

.longread pre.terminal-command .terminal-output + .terminal-line,
.longread pre.terminal-command .terminal-line + .terminal-line {
  margin-top: 0.42rem;
}

.longread pre.terminal-command .terminal-output--hidden {
  font-style: italic;
}

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

/* Inline code should read as technical notation within prose, not as a status
   badge. Block code and terminal commands keep their dedicated treatments. */
.longread :not(pre) > code {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent-dark);
  font-size: 0.92em;
  line-height: inherit;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--border);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
}

/* Glossary references stay visually secondary to the prose. The short
   definition is progressive enhancement; the link itself remains sufficient. */
.longread a.term-link {
  position: relative;
  color: inherit;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(23, 33, 43, 0.42);
  text-underline-offset: 0.2em;
}

.longread a.term-link:hover,
.longread a.term-link:focus-visible {
  color: var(--accent);
  text-decoration-style: solid;
}

.longread a.term-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Inline prose links remain identifiable without relying on color alone. */
.longread p a:not(.term-link),
.article-footer p a {
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
}

@media (hover: hover) and (min-width: 980px) {
  .longread a.term-link[data-definition]::after {
    content: attr(data-definition);
    position: absolute;
    z-index: 20;
    left: 50%;
    bottom: calc(100% + 0.55rem);
    width: max-content;
    max-width: min(34ch, 70vw);
    padding: 0.55rem 0.7rem;
    border-radius: 7px;
    background: var(--ink);
    color: #fff;
    box-shadow: 0 8px 24px rgba(23, 33, 43, 0.2);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 0.2rem);
    transition: opacity 120ms ease, transform 120ms ease;
  }

  .longread a.term-link[data-definition]:hover::after,
  .longread a.term-link[data-definition]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.glossary-page .article-deck {
  max-width: 64ch;
}

.glossary-entry {
  scroll-margin-top: 2rem;
  margin-top: 1.8rem;
  padding-top: 1.45rem;
  border-top: 1px solid rgba(23, 33, 43, 0.15);
}

.glossary-entry h2 {
  margin-top: 0;
}

.glossary-entry:target {
  margin-right: -1rem;
  margin-left: -1rem;
  padding-right: 1rem;
  padding-left: 1rem;
  border-radius: 8px;
  background: var(--well);
}

.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 {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 2rem 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-link {
  width: fit-content;
}

.article-telegram-button {
  gap: 0.55rem;
  padding: 0.7rem 1.15rem;
  /* Telegram-derived blue, darkened so normal-size white text passes WCAG AA. */
  border-color: #1479a8;
  border-radius: 10px;
  background: #1479a8;
  box-shadow: 0 3px 10px rgba(20, 121, 168, 0.22);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0;
}

.article-telegram-button:hover {
  border-color: #0f648c;
  background: #0f648c;
  box-shadow: 0 5px 14px rgba(20, 121, 168, 0.3);
}

.article-telegram-icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  fill: currentColor;
}