/* ChainStrip landing — strict black & white, Berkeley Mono, print-spec brutalism.
   Palette is constrained to #000, #fff and the gray ramp #1a1a1a…#666. No gradients. */

@font-face {
  font-family: "Berkeley Mono Variable";
  src: url("/assets/Berkeley%20Mono%20Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #000;
  --paper: #fff;
  --g1: #1a1a1a;
  --g2: #333;
  --g3: #666;
  --rule: 1px solid var(--ink);
  --mono: "Berkeley Mono Variable", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pad: clamp(1rem, 4vw, 2.5rem);
  --maxw: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

code { font-family: var(--mono); background: var(--paper); border: 1px solid var(--g3); padding: 0 0.25em; font-size: 0.92em; white-space: nowrap; }
a { color: var(--ink); }

.skip {
  position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper);
  padding: 0.5rem 1rem; z-index: 10;
}
.skip:focus { left: 0; }

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

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 1.5rem;
  border-bottom: var(--rule);
  padding: 0.7rem var(--pad);
  position: sticky; top: 0;
  background: var(--paper);
  z-index: 5;
}
.brand {
  display: flex; align-items: center; gap: 0.55rem;
  text-decoration: none; font-weight: 700; letter-spacing: 0.02em;
}
.topbar nav { display: flex; gap: 1.25rem; margin-left: auto; }
.topbar nav a, .topbar .repo {
  text-decoration: none; font-size: 0.85rem; color: var(--g2);
  border-bottom: 1px solid transparent;
}
.topbar nav a:hover, .topbar .repo:hover { color: var(--ink); border-bottom-color: var(--ink); }
.topbar .repo { border: var(--rule); color: var(--ink); padding: 0.15rem 0.6rem; }
.topbar .repo:hover { background: var(--ink); color: var(--paper); }

/* ---------- hero ---------- */
.hero {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5rem) var(--pad) clamp(2rem, 5vw, 3.5rem);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.eyebrow {
  margin: 0 0 1rem; font-size: 0.78rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--g3);
  border-bottom: 1px solid var(--g3); display: inline-block; padding-bottom: 0.3rem;
}
.hero h1 {
  margin: 0; font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.05;
}
.hero-quote {
  margin: 0.85rem 0 0; font-size: 0.9rem; font-style: italic;
  color: var(--g2); max-width: 44ch; line-height: 1.55;
}
.hero-quote-by {
  display: block; margin-top: 0.15rem; font-style: normal;
  font-size: 0.78rem; color: var(--g3);
}
.headline {
  margin: 1.1rem 0 0; font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 700;
}
.lede { margin: 1rem 0 0; color: var(--g1); max-width: 46ch; }
.cta-row { display: flex; gap: 0.75rem; margin-top: 1.75rem; flex-wrap: wrap; }
.btn {
  display: inline-block; text-decoration: none; font-weight: 700; font-size: 0.9rem;
  border: var(--rule); padding: 0.6rem 1.2rem; background: var(--paper); color: var(--ink);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--paper); color: var(--ink); }

/* hero "book a demo" form */
.hero-form { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.75rem; max-width: 30rem; }
.hero-form input {
  font-family: var(--mono); font-size: 0.95rem;
  border: var(--rule); padding: 0.6rem 0.9rem; flex: 1; min-width: 13rem;
  background: var(--paper); color: var(--ink);
}
.hero-form input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.hero-form .btn { cursor: pointer; font-family: var(--mono); }
.hero-form .form-status { flex-basis: 100%; margin: 0.3rem 0 0; font-size: 0.85rem; font-weight: 700; min-height: 0; }
.hero-form .form-status:empty { margin: 0; }
.hero-cal { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--g2); }
.hero-cal a { font-weight: 700; text-underline-offset: 3px; }
.hero-form-note { margin: 0.85rem 0 0; font-size: 0.82rem; color: var(--g3); max-width: 44ch; }
.hero-note { margin-top: 1.5rem; font-size: 0.82rem; color: var(--g1); max-width: 44ch; }

/* flow diagram */
.flow {
  margin: 0; display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch; gap: 0;
}
.flow-stage { display: flex; }
.flow-box {
  border: var(--rule); padding: 1rem 1.1rem; flex: 1;
  display: flex; flex-direction: column; gap: 0.35rem;
  animation: rise 0.5s ease-out both;
}
.flow-stage:nth-child(3) .flow-box { animation-delay: 0.15s; }
.flow-stage:nth-child(5) .flow-box { animation-delay: 0.3s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.flow-box-final { background: var(--ink); color: var(--paper); }
.flow-tag {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--g3);
}
.flow-box-final .flow-tag { color: var(--paper); opacity: 0.65; }
.flow-box strong { font-size: 0.98rem; }
.flow-detail { font-size: 0.78rem; color: var(--g2); line-height: 1.5; }
.flow-box-final .flow-detail { color: var(--paper); opacity: 0.85; }
.flow-arrow { display: flex; align-items: center; padding: 0 0.4rem; }
.flow-arrow::before { content: "─▶"; font-size: 0.9rem; }
.flow figcaption {
  grid-column: 1 / -1; margin-top: 0.9rem;
  font-size: 0.78rem; color: var(--g3); line-height: 1.55;
}

/* ---------- sections ---------- */
.section {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--pad);
  border-top: var(--rule);
}
.sec-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.75rem; }
.sec-no { font-size: 0.85rem; color: var(--g3); font-weight: 700; }
.sec-head h2 {
  margin: 0; font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 800; letter-spacing: -0.02em;
}
.sub-head { font-size: 1.15rem; font-weight: 800; margin: 2.5rem 0 0.5rem; }
/* a column whose first element is a sub-head shouldn't push its top down */
.cols .sub-head:first-child { margin-top: 0; }
#audit .term { margin-top: 1.25rem; }
.prose { max-width: 68ch; color: var(--g1); }
.prose-wide { max-width: none; }  /* intros that sit above full-width tables/grids */
.prose p { margin: 0 0 1rem; }

/* problem */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.problem-intro { max-width: none; }
/* incidents: a grid of cards BELOW the intro prose (not a tall side column).
   1px gap + g3 backdrop draws the gridlines, so it works for any card count. */
.incidents { list-style: none; margin: 2rem 0 0; padding: 0; }
.incidents-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--g3); border: 1px solid var(--g3);
}
.incidents li {
  background: var(--paper); padding: 1.1rem 1.25rem;
  font-size: 0.85rem; color: var(--g1); line-height: 1.6;
}
.incidents li p { margin: 0; } /* markdown-rendered body */
.inc-name { display: block; font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.incidents li p.inc-fix {
  margin: 0.6rem 0 0; padding-left: 0.7rem;
  border-left: 3px solid var(--ink);
  font-size: 0.82rem; color: var(--g1);
}
.inc-fix-label {
  font-weight: 700; background: var(--ink); color: var(--paper);
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em;
  padding: 0.05em 0.4em; margin-right: 0.5em;
}
.inc-fix code { font-size: 0.85em; }
/* the tl;dr punch line — bold verdict, tied to the ChainStrip block */
.incidents li p.inc-verdict {
  margin: 0.5rem 0 0; padding-left: 0.7rem;
  border-left: 3px solid var(--ink);
  font-weight: 700; color: var(--ink); font-size: 0.88rem; line-height: 1.5;
}
.inc-verdict::before { content: "→ "; }
.inc-year { font-weight: 400; color: var(--g3); font-size: 0.8rem; margin-left: 0.4rem; }
.takeaway {
  margin: 2rem 0 0; padding: 1rem 1.25rem;
  border-left: 4px solid var(--ink); border-top: 1px solid var(--g3); border-bottom: 1px solid var(--g3);
  font-weight: 700; max-width: none;
}

/* how it works */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 0 1.5rem;
  padding: 1.4rem 0; border-bottom: 1px solid var(--g3);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-size: 1.9rem; font-weight: 800; color: var(--ink); line-height: 1;
}
.steps h3 { margin: 0; font-size: 1.05rem; }
.steps p { margin: 0.4rem 0 0; color: var(--g1); font-size: 0.92rem; }

/* workflow cards */
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: var(--rule); margin-top: 1.5rem; }
.card { padding: 1.25rem; border-right: var(--rule); display: flex; flex-direction: column; gap: 0.75rem; }
.card:last-child { border-right: none; }
.card-when {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em;
  background: var(--ink); color: var(--paper);
  align-self: flex-start; padding: 0.2rem 0.55rem;
}
.card p { margin: 0; font-size: 0.85rem; color: var(--g1); }

.snippet {
  margin: 0; padding: 0.7rem 0.85rem;
  background: var(--ink); color: var(--paper);
  font-size: 0.8rem; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}

/* evidence */
.surface-viz { margin: 2rem 0 2.5rem; border: var(--rule); padding: 1.25rem; }
.bar-row {
  display: grid; grid-template-columns: 12.5rem minmax(0, 1fr) 12.5rem;
  gap: 1rem; align-items: center; margin-bottom: 0.8rem;
}
.bar-label { font-size: 0.8rem; color: var(--g2); text-align: right; }
.bar { border: var(--rule); height: 1.5rem; }
.bar-fill { height: 100%; background: var(--ink); }
/* hatched = stripped surface: informational pattern, solid black lines on white */
.bar-hatch {
  background: var(--paper);
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" height="8"%3E%3Cpath d="M-2,2 l4,-4 M0,8 l8,-8 M6,10 l4,-4" stroke="%23000" stroke-width="1.4"/%3E%3C/svg%3E');
}
.bar-val { font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.bar-note { margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--g3); }

.term-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
.term { margin: 0; border: var(--rule); }
.term figcaption {
  padding: 0.45rem 0.9rem; font-size: 0.78rem; font-weight: 700;
  border-bottom: var(--rule); background: var(--paper);
}
.term pre {
  margin: 0; padding: 1rem 0.9rem;
  background: var(--ink); color: var(--paper);
  font-size: 0.78rem; line-height: 1.6; overflow-x: auto;
}
.t-prompt { opacity: 0.6; }
.t-do, .t-mean { font-weight: 800; background: var(--paper); color: var(--ink); padding: 0 0.3em; }

.gate-table { width: 100%; border-collapse: collapse; margin-top: 1.25rem; font-size: 0.88rem; }
.gate-table th, .gate-table td {
  border: 1px solid var(--g3); padding: 0.6rem 0.8rem; text-align: left; vertical-align: top;
}
.gate-table th {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
}
.gate-table td:last-child { font-weight: 700; }

/* adoption modes */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: var(--rule); margin-top: 1.5rem; }
.mode { padding: 1.4rem; border-right: var(--rule); display: flex; flex-direction: column; gap: 0.6rem; }
.mode:last-child { border-right: none; }
.mode-no { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--g3); }
.mode h3 { margin: 0; font-size: 1.2rem; }
.mode p { margin: 0; font-size: 0.88rem; color: var(--g1); flex: 1; }

/* signup */
.signup-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: start;
}
#signup-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
#signup-form input {
  font-family: var(--mono); font-size: 0.95rem;
  border: var(--rule); padding: 0.6rem 0.9rem; flex: 1; min-width: 14rem;
  background: var(--paper); color: var(--ink);
}
#signup-form input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
#signup-form .btn { cursor: pointer; font-family: var(--mono); }
#form-status { flex-basis: 100%; margin: 0.3rem 0 0; font-size: 0.85rem; font-weight: 700; min-height: 1.4em; }

/* footer */
.footer {
  border-top: 3px solid var(--ink);
  max-width: none; padding: 2rem var(--pad) 2.5rem;
}
.footer > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.foot-brand { display: flex; align-items: center; gap: 0.8rem; font-weight: 700; }
.footer nav { display: flex; gap: 1.5rem; margin-top: 1.25rem; flex-wrap: wrap; }
.footer nav a { font-size: 0.88rem; }
.foot-fine { margin-top: 1.25rem; font-size: 0.75rem; color: var(--g3); max-width: var(--maxw); }

/* ---------- hero verdict ladder (replaces the flow diagram) ----------
   Two groups: wins (not-shipped + eliminated) carry an ink left rail and
   full-ink numbers; remaining exposure (reached + unresolved) is muted gray
   with a gray rail — the split reads without a heavy black fill block. */
.ladder { margin: 0; border: var(--rule); }
.ladder-head {
  padding: 0.6rem 0.9rem; font-size: 0.82rem; font-weight: 700;
  border-bottom: var(--rule); background: var(--paper);
}
.ladder-group { padding: 0.5rem 0; border-left: 4px solid transparent; }
.ladder-group-win { border-left-color: var(--ink); }
.ladder-group-risk { border-left-color: var(--g3); border-top: 1px solid var(--g3); }
.ladder-group-label {
  margin: 0; padding: 0.15rem 0.9rem 0.35rem;
  font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.13em;
  font-weight: 700;
}
.ladder-group-win .ladder-group-label { color: var(--ink); }
.ladder-group-risk .ladder-group-label { color: var(--g3); }
.ladder-rows { list-style: none; margin: 0; padding: 0; }
.ladder-row {
  display: grid; grid-template-columns: 3.4rem 7.5rem minmax(0, 1fr);
  align-items: baseline; gap: 0.6rem;
  padding: 0.4rem 0.9rem;
}
.ladder-count { font-size: 1.6rem; font-weight: 800; line-height: 1; text-align: right; }
.ladder-tier { font-weight: 700; font-size: 0.9rem; }
.ladder-meaning { font-size: 0.8rem; line-height: 1.45; }
.ladder-group-win .ladder-count,
.ladder-group-win .ladder-tier { color: var(--ink); }
.ladder-group-win .ladder-meaning { color: var(--g2); }
.ladder-group-risk .ladder-count,
.ladder-group-risk .ladder-tier,
.ladder-group-risk .ladder-meaning { color: var(--g3); }
.ladder-caption {
  margin: 0; padding: 0.7rem 0.9rem; font-size: 0.76rem;
  color: var(--g3); line-height: 1.55; border-top: var(--rule);
}

/* ---------- score grade chips (in the cold-score terminal) ---------- */
.t-a, .t-b, .t-c, .t-d, .t-f {
  display: inline-block; width: 1.4em; text-align: center;
  font-weight: 800; background: var(--paper); color: var(--ink);
}
.t-a { background: var(--paper); }      /* clean — outline only via inversion */
.t-b, .t-c, .t-d, .t-f { background: var(--paper); }
/* the grade chips read as inverted blocks against the dark terminal */

/* ---------- reachability tables ---------- */
.ladder-table td:last-child,
.elim-table td:last-child { font-weight: 700; }
/* emphasize the strongest (eliminated) row without a full black fill — a
   solid black row directly under the black header reads as part of it */
.gate-table tr.row-flag td { font-weight: 700; }
.gate-table tr.row-flag td:first-child { border-left: 4px solid var(--ink); }
.gate-table tr.row-flag code { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.elim-table td { font-size: 0.82rem; }
.elim-foot { margin-top: 0.9rem; }
.sev {
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em;
  padding: 0.1em 0.4em; border: 1px solid var(--ink); white-space: nowrap;
}
.sev-high { background: var(--ink); color: var(--paper); }
.sev-mod { background: var(--paper); color: var(--ink); }
.sev-low { background: var(--paper); color: var(--g3); border-color: var(--g3); }

/* why-it's-defensible */
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: var(--rule); margin-top: 1.5rem; }
.why { padding: 1.1rem 1.2rem; border-right: var(--rule); font-size: 0.85rem; color: var(--g1); line-height: 1.55; }
.why:last-child { border-right: none; }
.why strong { color: var(--ink); }

/* ---------- responsive: collapse at 860px and 780px ---------- */
@media (max-width: 860px) {
  /* minmax(0,1fr), never bare 1fr: grid items must not inherit pre min-content width */
  .hero { grid-template-columns: minmax(0, 1fr); }
  .cols { grid-template-columns: minmax(0, 1fr); }
  .incidents-grid { grid-template-columns: minmax(0, 1fr); }
  .term-grid { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card:nth-child(2) { border-right: none; }
  .card:nth-child(-n+2) { border-bottom: var(--rule); }
  .signup-row { grid-template-columns: minmax(0, 1fr); }
  .why-grid { grid-template-columns: minmax(0, 1fr); }
  .why { border-right: none; border-bottom: var(--rule); }
  .why:last-child { border-bottom: none; }
  /* topbar: brand + Book-a-demo on row one, nav wraps onto its own row —
     never display:none; the nav carries real pages (case studies, demo) */
  .topbar { flex-wrap: wrap; row-gap: 0.35rem; }
  .topbar .repo { margin-left: auto; }
  .topbar nav {
    order: 3; flex-basis: 100%; margin-left: 0;
    flex-wrap: wrap; gap: 0.35rem 0.9rem;
  }
  .topbar nav a { font-size: 0.8rem; }
}

@media (max-width: 780px) {
  .grid-4, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .ladder-row { grid-template-columns: 2.8rem minmax(0, 1fr); grid-template-areas: "count tier" "count meaning"; row-gap: 0.15rem; }
  .ladder-count { grid-area: count; }
  .ladder-tier { grid-area: tier; }
  .ladder-meaning { grid-area: meaning; }
  .elim-table { display: block; overflow-x: auto; }
  .card, .mode { border-right: none; border-bottom: var(--rule); }
  .card:last-child, .mode:last-child { border-bottom: none; }
  /* flow diagram stacks vertically with down arrows */
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow-arrow { padding: 0.35rem 0; justify-content: center; }
  .flow-arrow::before { content: "▼"; }
  .bar-row { grid-template-columns: 1fr; gap: 0.25rem; }
  .bar-label { text-align: left; }
  .steps li { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .steps li::before { font-size: 1.3rem; }
  /* tables can't shrink below min-content; scroll the table, not the page */
  .gate-table { display: block; overflow-x: auto; }
  .eyebrow { letter-spacing: 0.08em; }
}

/* ---------- /demo page: site chrome on top, the read-only console fills the rest.
   Lives here (not an inline <style>) because the site CSP is style-src 'self',
   which blocks inline styles. 100dvh avoids depending on html height + handles
   mobile browser chrome. ---------- */
body.demo-page { height: 100dvh; display: flex; flex-direction: column; margin: 0; }
.demo-note { border-bottom: var(--rule); padding: 0.45rem var(--pad); font-size: 0.8rem; color: var(--g2); background: var(--paper); }
.demo-note strong { color: var(--ink); }
.demo-frame { flex: 1 1 auto; width: 100%; border: 0; display: block; background: var(--paper); }

/* ---------- case studies: browse page + study article ---------- */
.studies-page, .study-page { border-top: none; }
.studies-page h1, .study-page h1 {
  margin: 0; font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 800; letter-spacing: -0.02em;
}
.studies-page .sec-head { margin-bottom: 1rem; }

/* browse grid — flush 1px gridlines, same language as the incident cards */
.studies-intro { max-width: none; }
.studies-grid {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--g3); border: 1px solid var(--g3);
}
.studies-grid li { background: var(--paper); display: flex; }
/* odd item count leaves a bare cell showing the g3 backdrop — fill it */
.studies-grid::after { content: ""; background: var(--paper); }
.study-card {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1.4rem 1.5rem; text-decoration: none; color: var(--ink); flex: 1;
}
.study-card-title { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; }
.study-card:hover .study-card-title { text-decoration: underline; }
.study-card-tagline { font-size: 0.85rem; color: var(--g2); }
.chip {
  display: inline-block; border: 1px solid var(--g3); padding: 0.05em 0.5em;
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--g2); margin: 0 0.35rem 0.35rem 0;
}
.study-card-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 0.4rem; }
.study-num { display: flex; flex-direction: column; }
.study-num strong { font-size: 1.45rem; font-weight: 800; line-height: 1.15; }
.study-num span { font-size: 0.72rem; color: var(--g3); }
.study-card-go {
  margin-top: auto; padding-top: 0.9rem; font-size: 0.85rem; font-weight: 700;
  align-self: flex-start;
}
.study-card:hover .study-card-go { background: var(--ink); color: var(--paper); padding: 0.9rem 0.4rem 0.05rem; margin: auto -0.4rem -0.05rem; }
.studies-empty { margin-top: 2rem; }

/* study article */
/* one content width for the whole study page: head and article share the
   74ch reading measure, so every rule and block sits on the same column */
.study-head { max-width: 74ch; border-bottom: var(--rule); padding-bottom: 1.75rem; margin-bottom: 0.5rem; }
.study-title-row { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.study-repo { font-size: 0.85rem; color: var(--g2); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.study-repo:hover { color: var(--ink); }
.study-tagline { margin: 0.5rem 0 0.9rem; font-size: 1rem; color: var(--g2); }
.study-headline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; border-top: var(--rule); border-bottom: var(--rule); padding: 1.1rem 0; margin: 1.5rem 0 1.25rem; }
.study-headline .study-num strong { font-size: 2rem; }
.study-headline .study-num span { font-size: 0.78rem; }
.study-profile {
  margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 2rem; max-width: 56rem;
}
.study-profile div { display: flex; gap: 0.75rem; align-items: baseline; }
.study-profile dt {
  flex: 0 0 8.5rem; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.11em; color: var(--g3);
}
.study-profile dd { margin: 0; font-size: 0.9rem; }
.study-meta { margin: 1.1rem 0 0; font-size: 0.75rem; color: var(--g3); }

.study { max-width: 74ch; }
.study > p, .study > ul { color: var(--g1); }
.study h2 {
  margin: 2.75rem 0 0.9rem; font-size: 1.3rem; font-weight: 800;
  letter-spacing: -0.01em; border-top: var(--rule); padding-top: 1.5rem;
}
.study table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: 0.88rem; }
.study th, .study td { border: 1px solid var(--g3); padding: 0.55rem 0.8rem; text-align: left; vertical-align: top; }
.study th {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
}
.study .term { margin: 1.25rem 0; }
.study ul { padding-left: 1.3rem; }
.study li { margin-bottom: 0.5rem; }
.study-cta {
  border: var(--rule); padding: 1.25rem 1.4rem; margin-top: 2rem;
  font-size: 0.9rem; color: var(--g1);
}
.study-cta .btn { margin-right: 1rem; }

@media (max-width: 860px) {
  .studies-grid { grid-template-columns: minmax(0, 1fr); }
  .study-profile { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 780px) {
  .study-headline { gap: 1.5rem; }
  .study table { display: block; overflow-x: auto; }
}

/* long real-output terminals in case studies scroll internally */
.study .term pre { max-height: 30rem; overflow-y: auto; scrollbar-width: thin; }