/* ==========================================================
   AIDL case study — its own look on top of the site styles.
   Always light, "research paper" feel: IBM Plex type,
   cool white paper, ink-navy text, indigo + teal accents.
   ========================================================== */

:root {
  --paper: #fbfbfd;
  --paper-2: #f1f3f8;
  --ink: #141a2b;
  --ink-soft: #4a5368;
  --line: #dde1ea;
  --accent: #3b4fd8;      /* indigo */
  --accent-2: #0f7c74;    /* teal */
  --band-bg: #f1f3f8;
  --band-ink: #141a2b;
  --band-soft: #4a5368;
  --band-line: #dde1ea;

  --serif: "IBM Plex Sans", system-ui, sans-serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  color-scheme: light;
}

body { font-size: 16.5px; line-height: 1.65; }

/* Headings: tight, bold sans instead of the display serif */
.cs-title {
  font-weight: 700;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: 1;
  letter-spacing: -0.035em;
}
.cs-title em {
  font-style: normal;
  color: var(--accent);
}
.cs-section h2 {
  font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  letter-spacing: -0.025em;
}
.cs .prose h3 {
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}
.cs-lede { color: var(--ink-soft); }

/* Eyebrows: teal mono with a small marker */
.eyebrow { color: var(--accent-2); }
.cs-section .eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--accent-2);
}

/* Stats: white cards with an indigo top rule */
.cs-stats li {
  background: #fff;
  border-color: var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgb(20 26 43 / .04);
}
.cs-stats strong {
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* Meta + figures */
.cs-meta dt { color: var(--accent-2); }
.cs-fig img {
  border-color: var(--line);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgb(20 26 43 / .05);
}

/* Tables */
.cs-table th { color: var(--accent-2); border-bottom-color: var(--ink); }
.cs-table tr.is-best td { background: #eef0fd; color: var(--ink); }

/* Buttons */
.btn { border-color: var(--ink); }
.btn--solid { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--solid:hover { background: var(--ink); border-color: var(--ink); }

/* Footer: light, separated by a rule */
.footer { border-top: 1px solid var(--line); }