/* Interas Research — site.css
   The complete design system. Pages may not define styles of their own,
   with one exception: the three whitepaper pages may carry a single
   print-tweak <style> block. Tokens per spec §5. */

/* ---------- fonts ---------- */

@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4-Regular.ttf.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4-Semibold.ttf.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4-It.ttf.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- tokens ---------- */

:root {
  --paper: #f5f1e8;
  --panel: #efe9db;
  --ink: #1f1e1a;
  --muted: #5c564a;
  --line: #d9d2c2;
  --pine: #3e5f4b;
  --pine-dark: #2e4839;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure: 68ch;
  --gap: 8px;
}

/* ---------- base ---------- */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 calc(var(--gap) * 2);
}
h1 { font-size: 2.375rem; font-weight: 400; letter-spacing: -0.01em; }
h2 { font-size: 1.5rem; margin-top: calc(var(--gap) * 6); }
h3 { font-size: 1.1875rem; margin-top: calc(var(--gap) * 4); }

p, ul, ol { max-width: var(--measure); margin: 0 0 calc(var(--gap) * 2); }
li { margin-bottom: calc(var(--gap) / 2); }

a { color: var(--pine); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--pine-dark); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 2px;
}

hr { border: 0; border-top: 1px solid var(--line); margin: calc(var(--gap) * 6) 0; }

strong { font-weight: 600; }
figure { margin: calc(var(--gap) * 4) 0; }
figcaption { font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); margin-top: var(--gap); }

code { font-family: var(--mono); font-size: 0.875em; }

/* ---------- layout ---------- */

.wrap {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 calc(var(--gap) * 3);
}

main { display: block; padding: calc(var(--gap) * 6) 0 calc(var(--gap) * 10); }

.section { border-top: 1px solid var(--line); padding-top: calc(var(--gap) * 5); margin-top: calc(var(--gap) * 5); }

/* ---------- masthead ---------- */

.masthead {
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
}
.masthead .wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--gap) * 3);
  padding-top: calc(var(--gap) * 2.5);
  padding-bottom: calc(var(--gap) * 2.5);
}
.masthead .wordmark {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.masthead nav { display: flex; gap: calc(var(--gap) * 3); flex-wrap: wrap; }
.masthead nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9375rem;
}
.masthead nav a:hover { color: var(--pine-dark); }
.masthead nav a[aria-current="page"],
.masthead nav a.current { color: var(--pine); border-bottom: 2px solid var(--pine); padding-bottom: 2px; }

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

.footer {
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--muted);
}
.footer .wrap {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--gap) * 3);
  flex-wrap: wrap;
  padding-top: calc(var(--gap) * 4);
  padding-bottom: calc(var(--gap) * 6);
}
.footer nav { display: flex; gap: calc(var(--gap) * 3); flex-wrap: wrap; }
.footer a { color: var(--muted); text-decoration: none; }
.footer a:hover { color: var(--pine-dark); text-decoration: underline; }

/* ---------- kicker ---------- */

.kicker {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pine);
  margin: 0 0 calc(var(--gap) * 2);
}

.standfirst {
  font-size: 1.1875rem;
  color: var(--muted);
  max-width: var(--measure);
}

/* ---------- stat band ---------- */

.stat-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: calc(var(--gap) * 5) 0;
}
.stat {
  padding: calc(var(--gap) * 3) calc(var(--gap) * 3) calc(var(--gap) * 3) 0;
  font-family: var(--sans);
}
.stat + .stat { border-left: 1px solid var(--line); padding-left: calc(var(--gap) * 3); }
.stat .figure {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--pine);
  line-height: 1.1;
}
.stat .label {
  font-size: 0.78125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: calc(var(--gap) / 2);
}
@media (max-width: 40rem) {
  .stat-band { grid-template-columns: 1fr; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: calc(var(--gap) * 2); }
}

/* ---------- paper card (research index / latest research) ---------- */

.paper-card {
  border-top: 1px solid var(--line);
  padding: calc(var(--gap) * 3) 0;
}
.paper-card:last-child { border-bottom: 1px solid var(--line); }
.paper-card .meta {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--gap);
}
.paper-card h2, .paper-card h3 { margin: 0 0 var(--gap); font-size: 1.25rem; }
.paper-card h2 a, .paper-card h3 a { color: var(--ink); text-decoration: none; }
.paper-card h2 a:hover, .paper-card h3 a:hover { color: var(--pine-dark); text-decoration: underline; }
.paper-card p { color: var(--muted); margin-bottom: 0; font-size: 0.9847rem; }

/* ---------- button ---------- */

.btn {
  display: inline-block;
  background: var(--pine);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.9375rem;
  text-decoration: none;
  padding: calc(var(--gap) * 1.5) calc(var(--gap) * 3);
  border-radius: 2px;
}
.btn:hover { background: var(--pine-dark); color: var(--paper); }

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

table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--sans);
  font-size: 0.9375rem;
}
th, td {
  text-align: left;
  padding: calc(var(--gap) * 1.5) calc(var(--gap) * 2) calc(var(--gap) * 1.5) 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th {
  font-size: 0.78125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.feature-table .group td {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine);
  padding-top: calc(var(--gap) * 3);
}

.chip {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.71875rem;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 2px;
  white-space: nowrap;
}
.chip--now { background: var(--pine); color: var(--paper); }
.chip--dev { background: transparent; color: var(--muted); border: 1px solid var(--line); }

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

.benchmark-table td, .benchmark-table th { font-variant-numeric: tabular-nums; }
.benchmark-table td.em { color: var(--pine); font-weight: 600; }

/* ---------- pipeline figure ---------- */

.pipeline-figure {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: calc(var(--gap) * 3);
  overflow-x: auto;
}
.pipeline-figure svg { display: block; width: 100%; height: auto; }

/* ---------- docs layout ---------- */

.docs-layout {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: calc(var(--gap) * 6);
  align-items: start;
}
.docs-content { min-width: 0; }
.docs-sidebar {
  font-family: var(--sans);
  font-size: 0.9375rem;
  border-right: 1px solid var(--line);
  padding-right: calc(var(--gap) * 3);
  position: sticky;
  top: calc(var(--gap) * 3);
}
.docs-sidebar .label {
  font-family: var(--mono);
  font-size: 0.71875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: calc(var(--gap) * 1.5);
}
.docs-sidebar ul { list-style: none; margin: 0; padding: 0; }
.docs-sidebar li { margin: 0 0 var(--gap); }
.docs-sidebar a { color: var(--muted); text-decoration: none; display: block; padding: 2px 0; }
.docs-sidebar a:hover { color: var(--pine-dark); }
.docs-sidebar a[aria-current="page"] {
  color: var(--pine);
  border-left: 3px solid var(--pine);
  padding-left: calc(var(--gap) * 1.5);
  margin-left: calc(var(--gap) * -1.875);
}
@media (max-width: 52rem) {
  .docs-layout { grid-template-columns: 1fr; }
  .docs-sidebar { position: static; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 calc(var(--gap) * 3); }
}

/* ---------- whitepaper elements ---------- */

.abstract {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: calc(var(--gap) * 3);
  max-width: var(--measure);
  margin: calc(var(--gap) * 4) 0;
}
.abstract .label {
  font-family: var(--mono);
  font-size: 0.71875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--gap);
}
.abstract p { margin-bottom: 0; }

.paper-meta {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--muted);
}

.pullquote {
  border-left: 3px solid var(--pine);
  padding-left: calc(var(--gap) * 3);
  margin: calc(var(--gap) * 4) 0;
  font-size: 1.25rem;
  font-style: italic;
  color: var(--ink);
  max-width: var(--measure);
}

.no-claim {
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  border-radius: 3px;
  padding: calc(var(--gap) * 2.5) calc(var(--gap) * 3);
  max-width: var(--measure);
  margin: calc(var(--gap) * 4) 0;
}
.no-claim .label {
  font-family: var(--mono);
  font-size: 0.71875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--gap);
}

/* ---------- print (whitepapers) ---------- */

@media print {
  .masthead, .footer, .docs-sidebar { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main { padding: 0; }
  a { color: #000; text-decoration: none; }
  .abstract, .pipeline-figure, .no-claim { border: 1px solid #999; background: #fff; }
  h1 { font-size: 22pt; }
  table { page-break-inside: avoid; }
}