/* Concrete Reports — White Doc / Whitepaper Style
   Minimal reference documentation aesthetic. */

:root {
  color-scheme: light;
  --ink: #0b0d0e;
  --body: #1f2426;
  --muted: #5a6266;
  --quiet: #8b9196;
  --hair: #e2e4e7;
  --hair-strong: #c5c9cd;
  --paper: #ffffff;
  --tint: #f7f7f5;
  --accent: #7a4b1a;
  --link: #1a3a68;
  --link-visited: #4a3172;
  --serif: "Charter", "Iowan Old Style", "Palatino Linotype", "Palatino", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --measure: 68ch;
  --side-pad: clamp(20px, 4vw, 48px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  font-feature-settings: "kern", "liga", "onum";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Layout ---------- */

body > header,
body > main,
body > footer {
  padding-left: var(--side-pad);
  padding-right: var(--side-pad);
}

body > header {
  border-bottom: 1px solid var(--hair);
  padding-top: 28px;
  padding-bottom: 24px;
  margin: 0 auto 40px;
  max-width: calc(var(--measure) + var(--side-pad) * 2);
}

body > footer {
  border-top: 1px solid var(--hair);
  padding-top: 40px;
  padding-bottom: 60px;
  margin: 80px auto 0;
  max-width: calc(var(--measure) + var(--side-pad) * 2);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 14px;
}

body > footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 12px;
}

main {
  max-width: calc(var(--measure) + var(--side-pad) * 2);
  margin: 0 auto;
  padding-bottom: 60px;
}

section,
article {
  margin: 0 0 48px;
}

/* ---------- Masthead ---------- */

.crp-masthead,
.page-head,
body > header {
  display: flex;
  align-items: baseline;
  gap: 32px;
  flex-wrap: wrap;
}

.crp-masthead__bar {
  display: flex;
  align-items: baseline;
  gap: 32px;
  flex-wrap: wrap;
  width: 100%;
}

.crp-nameplate,
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.crp-nameplate span,
.wordmark span,
.wordmark__block {
  font-weight: 400;
  color: var(--muted);
}

.crp-nameplate strong,
.wordmark strong {
  color: var(--ink);
  font-weight: 700;
}

.wordmark small {
  display: block;
  font-size: 11px;
  color: var(--quiet);
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-top: 2px;
}

.crp-primary-nav,
.section-jump {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crp-primary-nav a,
.section-jump a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.crp-primary-nav a:hover,
.section-jump a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---------- Issue front / hero ---------- */

.crp-issue-front,
.entry-hero {
  width: 100%;
  padding: 48px 0 24px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 40px;
}

.crp-label,
.kicker {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}

.crp-issue-front h1,
.entry-hero h1,
main h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}

.crp-issue-front p,
.entry-hero p,
.lede {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  color: var(--body);
  margin: 0 0 12px;
  max-width: 62ch;
}

/* ---------- Body prose ---------- */

main h2 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  margin: 56px 0 16px;
  letter-spacing: -0.005em;
  padding-top: 24px;
  border-top: 1px solid var(--hair);
}

main h2:first-of-type {
  padding-top: 0;
  border-top: 0;
  margin-top: 32px;
}

main h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 40px 0 12px;
}

main h4 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 28px 0 8px;
}

main p {
  margin: 0 0 20px;
  max-width: 68ch;
}

main a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

main a:hover {
  text-decoration-thickness: 2px;
}

main a:visited { color: var(--link-visited); }

main ul,
main ol {
  padding-left: 24px;
  margin: 0 0 24px;
  max-width: 66ch;
}

main li {
  margin: 0 0 8px;
}

main strong { font-weight: 700; color: var(--ink); }

main em { font-style: italic; }

main hr {
  border: 0;
  border-top: 1px solid var(--hair);
  margin: 48px 0;
}

main blockquote {
  border-left: 3px solid var(--ink);
  margin: 24px 0;
  padding: 8px 0 8px 20px;
  color: var(--muted);
  font-style: italic;
}

main code {
  font-family: var(--mono);
  font-size: 15px;
  background: var(--tint);
  padding: 2px 6px;
  border-radius: 3px;
}

main pre {
  background: var(--tint);
  padding: 20px;
  overflow-x: auto;
  border: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  margin: 24px 0;
}

/* ---------- Tables ---------- */

.crp-table-wrap,
.data-table-wrap {
  overflow-x: auto;
  margin: 24px 0;
  border: 1px solid var(--hair);
}

.crp-data-table,
.data-table,
main table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 14px;
  background: var(--paper);
}

.crp-data-table caption,
.data-table caption,
main table caption {
  text-align: left;
  padding: 12px 16px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--hair);
  background: var(--tint);
}

.crp-data-table th,
.data-table th,
main table th {
  text-align: left;
  padding: 10px 16px;
  border-bottom: 1px solid var(--hair-strong);
  background: var(--tint);
  font-weight: 700;
  color: var(--ink);
}

.crp-data-table td,
.data-table td,
main table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--hair);
  vertical-align: top;
}

.crp-data-table tr:last-child td,
.data-table tr:last-child td,
main table tr:last-child td {
  border-bottom: 0;
}

/* ---------- Dashboard / metrics: flatten to inline note ---------- */

.crp-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--hair);
  background: var(--tint);
  margin: 32px 0 48px;
}

.crp-dashboard article {
  margin: 0;
  padding: 0;
}

.crp-metric {
  display: block;
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.crp-dashboard p {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
  max-width: none;
}

/* ---------- Index / filters / cards ---------- */

.crp-index-tools {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 48px 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
  flex-wrap: wrap;
}

.crp-index-tools h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 28px;
}

.crp-filter-set {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.crp-filter {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--hair-strong);
  color: var(--muted);
  padding: 6px 14px;
  cursor: pointer;
}

.crp-filter.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.crp-report-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.crp-report-card {
  padding: 32px 0;
  border-bottom: 1px solid var(--hair);
  margin: 0;
}

.crp-report-card:first-child { padding-top: 8px; }

.crp-card-meta {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

.crp-report-card h2 {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
}

.crp-report-card h2 a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.crp-report-card h2 a:hover {
  border-bottom-color: var(--ink);
}

.crp-report-card p {
  margin: 0 0 12px;
  color: var(--body);
  max-width: 68ch;
}

.crp-report-card ul {
  margin: 0 0 8px;
  padding-left: 20px;
  color: var(--muted);
  font-size: 15px;
}

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

.crp-report-layout,
.entry-layout,
.entry-shell {
  display: block;
  max-width: var(--measure);
  margin: 0 auto;
}

.crp-report-body,
.entry-body {
  max-width: var(--measure);
}

.crp-article-top {
  padding: 28px var(--side-pad) 32px;
  margin: 0 auto 40px;
  max-width: calc(var(--measure) + var(--side-pad) * 2);
  border-bottom: 1px solid var(--hair);
}

.crp-report-title {
  margin: 24px 0 0;
}

.crp-report-title h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
  font-weight: 700;
  color: var(--ink);
  margin: 12px 0 20px;
  letter-spacing: -0.01em;
}

.crp-report-title > p {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  color: var(--body);
  margin: 0 0 12px;
  max-width: 62ch;
}

.crp-report-title > .crp-label {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}

/* ---------- Sidebar callouts ---------- */

.crp-findings,
.crp-implication,
.crp-method-note,
.crp-inline-map,
.crp-action-list,
.entry-card,
.reference-artifact,
.glossary-box,
.artifact-grid,
.artifact-tile {
  border: 1px solid var(--hair);
  background: var(--tint);
  padding: 20px 24px;
  margin: 32px 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
}

.crp-findings h3,
.crp-implication h3,
.crp-method-note h3,
.entry-card h3,
.reference-artifact h3,
.glossary-box h3 {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
  font-weight: 700;
  border: 0;
  padding: 0;
}

/* Reference / citation lists */

.crp-reference-list,
.reference-list {
  list-style: none;
  padding: 0;
  margin: 32px 0;
  border-top: 1px solid var(--hair);
  counter-reset: ref;
}

.crp-reference-list li,
.reference-list li {
  counter-increment: ref;
  padding: 12px 0 12px 32px;
  border-bottom: 1px solid var(--hair);
  position: relative;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--muted);
}

.crp-reference-list li::before,
.reference-list li::before {
  content: "[" counter(ref) "]";
  position: absolute;
  left: 0;
  top: 12px;
  color: var(--quiet);
  font-family: var(--mono);
  font-size: 13px;
}

/* ---------- Forward plan / queue ---------- */

.crp-forward-plan {
  margin: 56px 0 32px;
  padding: 24px 0;
  border-top: 1px solid var(--hair);
}

.crp-queue {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--muted);
  margin-top: 16px;
}

.crp-queue span {
  padding: 8px 0;
  border-top: 1px solid var(--hair);
}

/* ---------- Table of contents (whatisconcrete) ---------- */

.toc {
  border: 1px solid var(--hair);
  padding: 20px 24px;
  margin: 32px 0;
  font-family: var(--sans);
  font-size: 14px;
  background: var(--tint);
}

.toc h2,
.toc h3 {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  font-weight: 700;
}

.toc ol,
.toc ul {
  padding-left: 20px;
  margin: 0;
}

.toc li { margin: 0 0 6px; }

.related-list {
  list-style: none;
  padding: 0;
  margin: 32px 0;
}

.related-list li {
  padding: 12px 0;
  border-top: 1px solid var(--hair);
}

/* ---------- Utility ---------- */

.entry-shell > * + * { margin-top: 32px; }

.site-end {
  border-top: 1px solid var(--hair);
  padding-top: 32px;
  margin-top: 60px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
}

@media (max-width: 720px) {
  body { font-size: 17px; }
  .crp-issue-front h1,
  .entry-hero h1,
  main h1 { font-size: 28px; }
  main h2 { font-size: 22px; margin-top: 40px; }
  .crp-report-card h2 { font-size: 20px; }
  .crp-metric { font-size: 36px; }
}