/* ---------------------------------------------------------------
   computer use agents
   White ground, serif voice, blue-biased neutrals. Light-only by
   design — the white is the identity, not a default.
   --------------------------------------------------------------- */

:root {
  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  --paper: #ffffff;
  --surface: #f5f7fa;      /* neutral biased toward the accent, not pure grey */
  --surface-deep: #eef2f7;
  --ink: #0f1216;
  --ink-soft: #4c545f;
  --ink-faint: #838c99;
  --rule: #e3e7ed;
  --rule-strong: #cdd4de;
  --accent: #1a4d84;
  --accent-soft: #e8eff7;
  --moss: #46654e;         /* open source, used semantically only */
  --moss-soft: #edf2ee;

  --page: 70rem;
  --measure: 36rem;
  --radius: 3px;
  --step: cubic-bezier(0.2, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.62;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 2rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- site header --------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.6) blur(8px);
  border-bottom: 1px solid var(--rule);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 3.65rem;
}

.wordmark {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.wordmark:hover { text-decoration: none; color: var(--accent); }
.wordmark span { color: var(--ink-faint); font-weight: 400; }

.site-nav { display: flex; gap: 1.65rem; font-family: var(--sans); font-size: 0.83rem; }
.site-nav a { color: var(--ink-soft); }
.site-nav a:hover { color: var(--ink); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* --- hero ---------------------------------------------------- */

.hero { padding: 4rem 0 2.5rem; }

.hero h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.05rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.08;
  text-wrap: balance;
  margin: 0 0 1rem;
}

.hero .lede {
  font-size: 1.16rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 2.5rem 0 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.stat {
  flex: 1 1 8rem;
  padding: 1rem 1.35rem;
  border-right: 1px solid var(--rule);
}
.stat:last-child { border-right: 0; }

.stat .n {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.stat .k {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --- controls ------------------------------------------------ */

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 2.5rem 0 1.15rem;
}

.search-box { position: relative; display: flex; align-items: center; }

#search {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.5rem 0.85rem;
  width: 17rem;
  outline: none;
  transition: border-color 0.15s var(--step), box-shadow 0.15s var(--step);
}
#search::placeholder { color: var(--ink-faint); }
#search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.filter {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 0.36rem 0.85rem;
  cursor: pointer;
  transition: all 0.15s var(--step);
}
.filter:hover { border-color: var(--rule-strong); color: var(--ink); }
.filter[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* --- table --------------------------------------------------- */

/* Deliberately NOT overflow-x: auto. That would make this the sticky
   containing block for the header, which then offsets inside the wrapper
   instead of pinning to the viewport. The table fits unaided at every width
   down to the 860px breakpoint, below which it stacks. */
.table-scroll { overflow-x: visible; }

/* `separate` rather than `collapse`: Chromium mispositions sticky table
   headers under border-collapse, dropping the first row behind the header.
   Borders live on the cells, so nothing doubles up. */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.95rem; }

thead th {
  font-family: var(--sans);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: left;
  padding: 0.7rem 1rem 0.7rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
  background: var(--paper);
  position: sticky;
  top: 3.65rem;
}

thead th button {
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
}
thead th button:hover { color: var(--ink); }
thead th button::after { content: ""; display: inline-block; width: 0.85em; }
th[aria-sort="ascending"] button::after { content: " \2191"; }
th[aria-sort="descending"] button::after { content: " \2193"; }
th[aria-sort] button { color: var(--accent); }

tbody tr { transition: background-color 0.12s var(--step); }
tbody tr:hover { background: var(--surface); }

tbody td {
  padding: 1.05rem 1rem 1.05rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
tbody td:first-child { padding-left: 0.75rem; }
tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

.col-name    { width: 40%; }
.col-vendor  { width: 15%; }
.col-surface { width: 11%; }
.col-licence { width: 12%; }
.col-access  { width: 11%; }
.col-stage   { width: 11%; }

.agent-name {
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.008em;
  display: block;
}
.agent-name a { color: var(--ink); }
.agent-name a:hover { color: var(--accent); text-decoration: none; }

.agent-summary {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.885rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

td.col-vendor, td.col-surface, td.col-access { white-space: nowrap; }

.tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius);
  white-space: nowrap;
}
.tag-oss    { background: var(--moss-soft); color: var(--moss); font-family: var(--mono); }
.tag-closed { background: var(--surface-deep); color: var(--ink-faint); }

.stage { font-size: 0.885rem; color: var(--ink-soft); white-space: nowrap; }
.stage[data-stage="GA"] { color: var(--ink); }
.stage[data-stage="Superseded"] { font-style: italic; color: var(--ink-faint); }

.count-note {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--ink-faint);
  padding: 1rem 0 0;
}

.empty { padding: 3rem 0; color: var(--ink-faint); font-style: italic; }

/* --- profile page -------------------------------------------- */

.crumbs {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-faint);
  padding: 2rem 0 0;
}
.crumbs a { color: var(--ink-soft); }

.profile-head { padding: 1rem 0 2.25rem; border-bottom: 1px solid var(--rule); }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.6rem;
}

.profile-head h1 {
  font-size: clamp(1.95rem, 3.6vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0 0 0.9rem;
}

.profile-head .lede {
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0;
}

/* Explicit track widths rather than 1fr: with 1fr the prose column outgrows
   its own max-width and leaves an ambiguous gap mid-page. */
.profile-body {
  display: grid;
  grid-template-columns: minmax(0, 38rem) 18rem;
  justify-content: space-between;
  gap: 3.5rem;
  padding: 2.75rem 0 0;
  align-items: start;
}

.prose { max-width: 38rem; }
.prose p { margin: 0 0 1.15rem; }
.prose > :last-child { margin-bottom: 0; }

.callouts { display: grid; gap: 1rem; margin: 2rem 0 0; }

.callout {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  background: var(--paper);
}
.callout h3 {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.4rem;
}
.callout p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--ink-soft); }
.callout-best { border-left-color: var(--moss); }
.callout-watch { border-left-color: #a8804a; }

.factbox {
  position: sticky;
  top: 5.25rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.4rem 1.5rem;
}
.factbox h2 {
  font-family: var(--sans);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.095em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1rem;
}
.factbox dl { display: grid; grid-template-columns: 1fr auto; gap: 0.7rem 1rem; margin: 0; }
.factbox dt {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.factbox dd { margin: 0; font-size: 0.9rem; text-align: right; }

.source-link {
  display: block;
  margin-top: 1.35rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.83rem;
}
.source-link::after { content: " \2197"; }

.related { padding: 4rem 0 0; }
.related h2 {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.25rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
}
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }

.card {
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  transition: border-color 0.15s var(--step), background-color 0.15s var(--step);
}
.card:hover { border-color: var(--rule-strong); background: var(--surface); text-decoration: none; }
.card .n { display: block; font-weight: 600; font-size: 1rem; color: var(--ink); margin-bottom: 0.3rem; }
.card .d { display: block; font-size: 0.85rem; line-height: 1.5; color: var(--ink-soft); }

/* --- writing index ------------------------------------------- */

.post-list { display: grid; gap: 0; border-top: 1px solid var(--rule); }

.post-item { border-bottom: 1px solid var(--rule); }
.post-item > a { display: block; padding: 1.9rem 1rem 1.9rem 0; transition: background-color 0.12s var(--step); }
.post-item > a:hover { background: var(--surface); text-decoration: none; padding-left: 1rem; padding-right: 0; }

.post-item .k {
  display: block;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.55rem;
}
.post-item h2 {
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 0.5rem;
  text-wrap: balance;
}
.post-item > a:hover h2 { color: var(--accent); }
.post-item p { margin: 0; font-size: 0.96rem; line-height: 1.55; color: var(--ink-soft); max-width: 42rem; }

/* --- post page ----------------------------------------------- */

/* Long-form gets its own narrower container so the column is centred in the
   page rather than stranded against the left edge of the directory measure. */
.wrap-article { max-width: 37rem; }

.post-head { padding: 1rem 0 2rem; border-bottom: 1px solid var(--rule); }
.post-head h1 {
  font-size: clamp(2rem, 3.9vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0 0 0.9rem;
}
.post-head .lede { font-size: 1.14rem; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.byline {
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--ink-faint);
  margin: 1.15rem 0 0;
}

.post { padding: 2.5rem 0 0; font-size: 1.03rem; }
.post > :first-child { margin-top: 0; }

.post p { margin: 0 0 1.3rem; }

.post .lead {
  font-size: 1.16rem;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 1.9rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--rule);
}

.post h2 {
  font-size: 1.48rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-wrap: balance;
  margin: 2.9rem 0 1rem;
}
.post h3 {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  margin: 2rem 0 0.7rem;
}

.post ul, .post ol { margin: 0 0 1.3rem; padding-left: 1.4rem; }
.post li { margin-bottom: 0.6rem; padding-left: 0.2rem; }
.post strong { font-weight: 600; }

.post a { border-bottom: 1px solid rgba(26, 77, 132, 0.3); }
.post a:hover { text-decoration: none; border-bottom-color: var(--accent); }

.post .aside {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 1.15rem 1.35rem;
  margin: 2rem 0;
}

.post-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.9rem 0;
  font-size: 0.88rem;
}
.post-table th, .post-table td {
  text-align: left;
  padding: 0.65rem 0.85rem 0.65rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.post-table thead th {
  font-family: var(--sans);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom-color: var(--rule-strong);
}
.post-table tbody td:first-child {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
/* The comparison table is wider than the prose measure, so it gets its own
   scroll container rather than pushing the page sideways. */
.post-table-scroll { overflow-x: auto; margin: 1.9rem 0; }
.post-table-scroll .post-table { margin: 0; min-width: 33rem; }

.further { margin-top: 1.35rem; padding-top: 1.15rem; border-top: 1px solid var(--rule); }
.further h3 {
  font-family: var(--sans);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.095em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.7rem;
}
.further ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.further li { font-size: 0.87rem; line-height: 1.45; }

.card .k {
  display: block;
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.45rem;
}

/* --- notes / footer ------------------------------------------ */

.notes { padding: 4rem 0 0; max-width: var(--measure); }
.notes h2 {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.15rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
}
.notes ol { padding-left: 1.15rem; margin: 0; }
.notes li { font-size: 0.93rem; line-height: 1.62; color: var(--ink-soft); margin-bottom: 0.7rem; padding-left: 0.25rem; }

.site-footer {
  margin-top: 5rem;
  border-top: 1px solid var(--rule);
  background: var(--surface);
}
.site-footer .wrap {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 2.5rem;
  padding-top: 2.75rem;
  padding-bottom: 3rem;
}
.site-footer h3 {
  font-family: var(--sans);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.095em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.85rem;
}
.site-footer p { margin: 0; font-size: 0.88rem; line-height: 1.6; color: var(--ink-soft); max-width: 24rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.site-footer li { font-size: 0.88rem; }
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--accent); }
.colophon {
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--ink-faint);
}
.colophon .wrap { padding-top: 1.15rem; padding-bottom: 1.15rem; display: block; }

/* --- responsive ---------------------------------------------- */

@media (max-width: 940px) {
  .profile-body { grid-template-columns: 1fr; gap: 2.5rem; }
  .factbox { position: static; }
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
  .site-footer > .wrap > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  body { font-size: 16px; }
  .wrap { padding: 0 1.25rem; }
  .hero { padding: 2.5rem 0 2rem; }
  .controls { justify-content: flex-start; padding-top: 2rem; }
  #search { width: 100%; max-width: 22rem; }
  .stat { flex-basis: 50%; border-bottom: 1px solid var(--rule); }
  .stat:nth-child(2n) { border-right: 0; }

  /* Six columns stop being readable here, so each agent becomes a
     stacked entry with its column heading run in as a label. */
  .table-scroll { overflow-x: visible; }
  table, tbody, tr, td { display: block; width: auto; }
  thead { display: none; }

  tbody tr { padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
  tbody tr:hover { background: none; }
  tbody tr:first-child { border-top: 1px solid var(--rule); }

  tbody td { padding: 0; border: 0; }
  tbody td:first-child { padding-left: 0; }
  tbody tr:hover td:first-child { box-shadow: none; }
  td.col-name { width: auto; margin-bottom: 0.95rem; }
  .agent-name { font-size: 1.1rem; }

  td:not(.col-name) {
    display: grid;
    grid-template-columns: 6.25rem 1fr;
    align-items: baseline;
    gap: 0.85rem;
    padding: 0.24rem 0;
    font-size: 0.92rem;
  }
  td:not(.col-name)::before {
    content: attr(data-label);
    font-family: var(--sans);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  /* The stacked rules above target the directory table via td/thead; the post
     comparison table keeps its own grid and scrolls inside its container. */
  .post-table, .post-table thead, .post-table tbody,
  .post-table tr, .post-table th, .post-table td { display: revert; }
  .post-table th, .post-table td { padding: 0.6rem 0.8rem 0.6rem 0; }
  .post-table td::before { content: none; }

  .post { font-size: 1rem; }
  .post h2 { font-size: 1.32rem; margin-top: 2.4rem; }
  .post-item h2 { font-size: 1.24rem; }
  .post-item > a:hover { padding-left: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
  .site-header, .controls, .site-footer, .colophon { display: none; }
  body { font-size: 10pt; }
  a { color: inherit; }
}

/* --- provenance ---------------------------------------------- */

.checked {
  margin: 0.75rem 0 0;
  font-family: var(--sans);
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--ink-faint);
}

.unconfirmed {
  display: inline-block;
  margin-left: 0.4rem;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #8a6320;
  background: #fbf3e4;
  border-radius: var(--radius);
  padding: 0.1rem 0.36rem;
  vertical-align: 1px;
}

/* --- use cases ----------------------------------------------- */

.risk {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius);
  white-space: nowrap;
}
.risk[data-risk="Low"]    { background: var(--moss-soft);  color: var(--moss); }
.risk[data-risk="Medium"] { background: #fbf3e4;           color: #8a6320; }
.risk[data-risk="High"]   { background: #fbeceb;           color: #96372f; }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0 0 1.6rem; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 0 2.35rem;
  margin-bottom: 0.85rem;
  font-size: 0.98rem;
  line-height: 1.55;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.08rem;
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 100px;
}

.prose h2:first-child { margin-top: 0; }

/* --- news ----------------------------------------------------- */

/* A section heading with an escape hatch to the full listing. The heading
   keeps the .related rule; the link sits on it rather than under it. */
.related-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.25rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
}
.related-head h2 { margin: 0; padding: 0; border: 0; }
.more-link {
  flex: none;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.feed-note {
  margin: 1.6rem 0 0;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.news-year { padding-top: 3rem; }
.news-year > h2 {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin: 0 0 0.25rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
}

/* Date rail on the left, item on the right — the shape of a changelog
   rather than a blog. The rail collapses above the item on narrow screens. */
.news-item {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0 2rem;
  padding: 1.9rem 0;
  border-bottom: 1px solid var(--rule);
}

.news-date {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-faint);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: flex-start;
}

.news-cat {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius);
  padding: 0.15rem 0.45rem;
}

.news-body h3 {
  font-size: 1.32rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}
.news-body h3 a { color: var(--ink); }
.news-body h3 a:hover { color: var(--accent); text-decoration: none; }
.news-body > p { margin: 0; font-size: 0.96rem; line-height: 1.55; color: var(--ink-soft); max-width: 42rem; }

/* The differentiating line: what the item changed in the data, including
   when the honest answer is nothing. Set apart so it reads as a verdict. */
.news-changed {
  margin: 0.85rem 0 0 !important;
  padding-left: 0.85rem;
  border-left: 2px solid var(--rule-strong);
  font-family: var(--sans);
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
  color: var(--ink-faint) !important;
}
.news-changed strong { color: var(--ink-soft); font-weight: 600; }

.changed-note {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Sourcing strength, stated on the item rather than left to be inferred. */
.source-kind {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.source-kind[data-kind="primary"]   { color: var(--moss); }
.source-kind[data-kind="secondary"] { color: #8a6320; }
.source-kind + .source-link { margin-top: 0.5rem; padding-top: 0; border-top: 0; }

/* --- per-agent changelog -------------------------------------- */

.changelog { padding: 4rem 0 0; }
.changelog h2 {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.25rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
}
.changelog-list { list-style: none; margin: 0; padding: 0; }
.changelog-list li {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 0 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem;
}
.changelog-list time {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-faint);
}

@media (max-width: 700px) {
  .news-item, .changelog-list li { grid-template-columns: 1fr; gap: 0.6rem; }
  .news-date { flex-direction: row; align-items: center; gap: 0.7rem; }
}

/* The news article sits in the full-width wrap so the source rail has room,
   so its header needs the measure the narrow article wrapper would have given. */
.news-head { max-width: 38rem; }

/* Inline identifiers — toolset names, tool names — run long enough to overflow
   a column, so they wrap on any character rather than clipping. */
.post code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.08em 0.32em;
  overflow-wrap: anywhere;
}

/* --- header at narrow widths ---------------------------------- */

/* Five nav items and the wordmark no longer share a row on a phone — roughly
   490px of content in a 350px measure — so the row is split and the nav given
   its own line. It scrolls rather than wraps if a longer label is added later.
   The header stays sticky: the split costs about 25px, which is not worth
   changing a deliberate design decision over. */
@media (max-width: 700px) {
  .site-header .wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    padding-top: 0.85rem;
    padding-bottom: 0.35rem;
  }

  .site-nav {
    gap: 1.15rem;
    margin-top: 0.7rem;
    padding-bottom: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; }
}