/* ===========================================================================
   H Heuristics Digital Reports — report stylesheet.

   The house look for a digital report: a dark masthead over a warm paper
   body, Newsreader for display and Inter for text, a gold rule marking every
   structural break, and data presented in bordered cards rather than floated
   images. One report per page; every report shares this file, so a change
   here restyles the whole series.
   =========================================================================== */

:root {
  --bg: #fafaf8;
  --bg-card: #ffffff;
  --bg-accent: #f0ede6;
  --bg-dark: #1a1f2b;
  --bg-dark-2: #232937;

  --text: #1a1a1a;
  --text-secondary: #4a4a4a;
  --text-muted: #757575;
  --text-inverse: #f0ede6;

  --primary: #1a2744;
  --primary-light: #2c3e6b;
  --accent: #8b6914;
  --accent-light: #c8a951;

  --border: #d9d5cc;
  --border-light: #e8e4db;
  --rule: #c4bfb4;

  --chart-blue: #2c5282;
  --chart-blue-light: #63b3ed;
  --chart-gold: #b8860b;
  --chart-red: #9b2c2c;
  --chart-teal: #276749;
  --chart-gray: #718096;
  --chart-orange: #c05621;
  --chart-purple: #553c9a;

  --serif: Newsreader, Georgia, "Times New Roman", serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "system-ui", "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radius: 2px;
  --max-width: 960px;
  --gutter: 2rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--primary-light); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--accent); }

img { max-width: 100%; height: auto; }

::selection { background: rgba(200, 169, 81, 0.28); }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: #fff; padding: 0.6rem 1rem;
  font-size: 0.8rem; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --- reading progress ---------------------------------------------------- */

.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  z-index: 300; background: transparent; pointer-events: none;
}
.progress__bar {
  height: 100%; width: 0;
  background: var(--accent-light);
  transition: width 90ms linear;
}

/* --- site bar (links back to the platform) -------------------------------- */

.sitebar {
  background: var(--bg-dark-2);
  border-bottom: 1px solid rgba(240, 237, 230, 0.08);
  padding: 0 var(--gutter);
}
.sitebar__inner {
  max-width: var(--max-width); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 44px;
  font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.sitebar a { color: rgba(240, 237, 230, 0.72); text-decoration: none; }
.sitebar a:hover { color: var(--accent-light); }
.sitebar__brand { color: var(--text-inverse) !important; font-weight: 600; }
.sitebar__brand span { color: var(--accent-light); }
.sitebar a.is-current { color: var(--accent-light); }
.sitebar__links { display: flex; gap: 1.4rem; }

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

.masthead {
  background: var(--bg-dark);
  color: var(--text-inverse);
  padding: 3rem var(--gutter) 3rem;
  border-bottom: 4px solid var(--accent);
}
.masthead-inner { max-width: var(--max-width); margin: 0 auto; }

.masthead .overline {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 1.2rem;
}
.masthead h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 900px;
  margin: 0 0 0.8rem;
}
.masthead .subtitle {
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  font-weight: 300;
  color: rgba(240, 237, 230, 0.75);
  max-width: 700px;
  line-height: 1.5;
  margin: 0;
}
.masthead .strapline {
  margin: 1.4rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--accent);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: rgba(240, 237, 230, 0.62);
  max-width: 660px;
}
.masthead .meta-row {
  display: flex; flex-wrap: wrap;
  gap: 1.25rem 3rem;
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(240, 237, 230, 0.18);
  font-size: 0.8rem;
  color: rgba(240, 237, 230, 0.6);
}
.masthead .meta-row div { min-width: 0; }
.masthead .meta-row strong {
  display: block;
  color: var(--accent-light);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}

/* --- sticky section nav --------------------------------------------------- */

.sticky-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(26, 31, 43, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(240, 237, 230, 0.1);
  padding: 0 var(--gutter);
}
.nav-inner {
  max-width: var(--max-width); margin: 0 auto;
  display: flex; gap: 1.6rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-inner::-webkit-scrollbar { display: none; }
.nav-inner a {
  flex: none;
  padding: 0.85rem 0;
  font-size: 0.82rem;
  color: rgba(240, 237, 230, 0.62);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.nav-inner a:hover { color: var(--text-inverse); }
.nav-inner a.is-active {
  color: var(--accent-light);
  border-bottom-color: var(--accent);
}

/* --- body ----------------------------------------------------------------- */

.content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3rem var(--gutter) 4rem;
}

.content p { margin: 0 0 1.1rem; }
/* :not(.section-dek) matters: without it this rule outranks the dek's own
   colour on specificity and the standfirst renders as body copy. */
.content > section > p:not(.section-dek),
.content > section > ul { color: var(--text-secondary); }

/* Body copy is justified and runs to the same measure as the figures and
   tables, which is the house convention carried over from the print reports.
   Justification without hyphenation opens rivers of white space, so hyphens
   are on — they need the lang attribute on <html>, which the shell sets. */
.content > section > p:not(.section-dek),
.content > section > ul li,
.content > section > ol li,
.abstract p,
.callout p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.content > section > ul, .content > section > ol { max-width: none; }

section { scroll-margin-top: 64px; }

section > h2 {
  font-family: var(--serif);
  font-size: clamp(1.55rem, 3.4vw, 1.9rem);
  font-weight: 600;
  color: var(--primary);
  line-height: 1.2;
  margin: 0 0 0.3rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent);
}
section > .section-dek {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0 0 2rem;
  max-width: 680px;
  font-style: italic;
}
section > h3 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--primary-light);
  margin: 2.2rem 0 0.8rem;
}
section > h4 {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary);
  margin: 1.6rem 0 0.5rem;
}

.section-rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 3rem 0 3.5rem;
}

.content ul, .content ol { max-width: 74ch; padding-left: 1.15rem; margin: 0 0 1.3rem; }
.content li { margin-bottom: 0.5rem; color: var(--text-secondary); }
.content li::marker { color: var(--accent); }

.content strong { color: var(--text); font-weight: 600; }

/* --- executive summary cards ---------------------------------------------- */

.exec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
  margin: 2rem 0;
}
.exec-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  padding: 1.5rem;
}
.exec-card .exec-num {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.exec-card .exec-title { font-weight: 600; margin: 0.4rem 0 0.5rem; font-size: 1rem; }
.exec-card .exec-body { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.55; margin: 0; }

/* --- statistic cards ------------------------------------------------------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}
.stat-card {
  background: var(--bg-card);
  border-left: 3px solid var(--accent);
  padding: 1.3rem 1.3rem 1.1rem;
}
.stat-card .stat-value {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.1;
}
.stat-card .stat-label { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.35rem; line-height: 1.4; }
.stat-card .stat-source { font-size: 0.65rem; color: var(--text-muted); margin-top: 0.5rem; font-style: italic; }
.stat-card .stat-source a { color: inherit; }

/* --- charts ---------------------------------------------------------------- */

.chart-container {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  padding: 1.3rem;
  margin: 1.8rem 0;
  position: relative;
}
.chart-container .chart-label {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.8rem;
}
.chart-frame { position: relative; height: 340px; }
.chart-frame--tall { height: 420px; }
.chart-frame--short { height: 280px; }
.chart-container canvas { max-height: 100%; }
.chart-container .chart-caption {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0.8rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border-light);
}
.chart-container .chart-caption a { color: var(--text-muted); }
.chart-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin: 1.8rem 0;
}
.chart-pair .chart-container { margin: 0; }

/* --- schematic (hand-drawn SVG diagrams) ----------------------------------- */

/* A schematic's labels are sized for its viewBox, so letting it shrink to a
   phone's width renders them at four or five pixels. It scrolls inside its own
   container below the min-width instead, the same way a wide table does. */
.schematic-wrap { overflow-x: auto; }
.schematic { width: 100%; min-width: 620px; height: auto; display: block; }
.schematic text { font-family: var(--sans); }

@media print {
  .schematic-wrap { overflow: visible; }
  .schematic { min-width: 0; }
}

/* --- the coverage matrix ---------------------------------------------------- */

.matrix { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.matrix th, .matrix td {
  border: 1px solid var(--border-light);
  padding: 0.5rem 0.55rem;
  text-align: center;
  vertical-align: middle;
}
.matrix thead th {
  background: var(--bg-dark);
  color: var(--text-inverse);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.3;
}
.matrix tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-card);
  font-size: 0.78rem;
  min-width: 9.5rem;
}
.matrix td { font-weight: 600; color: #fff; font-size: 0.72rem; letter-spacing: 0.02em; }
.matrix .lv0 { background: #f4f2ec; color: var(--text-muted); }
.matrix .lv1 { background: #cfe0e6; color: var(--text); }
.matrix .lv2 { background: #5b91a8; }
.matrix .lv3 { background: #1f4e63; }
.matrix tbody tr:hover th { background: var(--bg-accent); }

.matrix-key {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem;
  margin-top: 0.9rem;
  font-size: 0.72rem; color: var(--text-muted);
}
.matrix-key span { display: inline-flex; align-items: center; gap: 0.4rem; }
.matrix-key i {
  width: 0.85rem; height: 0.85rem; display: inline-block;
  border: 1px solid var(--border);
}

/* --- data tables ------------------------------------------------------------ */

.tbl-scroll { overflow-x: auto; margin: 1.8rem 0; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin: 0;
}
.data-table thead { background: var(--bg-dark); color: var(--text-inverse); }
.data-table thead th {
  padding: 0.65rem 0.8rem;
  text-align: left;
  font-weight: 500;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.data-table tbody th {
  padding: 0.55rem 0.8rem;
  text-align: left;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border-light);
}
.data-table tbody td {
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
}
.data-table tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.016); }
.data-table tbody tr:hover { background: rgba(200, 169, 81, 0.06); }
.data-table .num {
  text-align: right;
  font-family: var(--mono);
  font-size: 0.78rem;
  white-space: nowrap;
}
.table-caption {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 1.8rem 0 0.6rem;
}
.table-note { font-size: 0.75rem; color: var(--text-muted); font-style: italic; margin: 0.6rem 0 0; }

/* --- callouts and quotes ----------------------------------------------------- */

.callout {
  background: var(--bg-accent);
  border-left: 4px solid var(--primary);
  padding: 1.3rem 1.4rem;
  margin: 2rem 0;
  font-size: 0.9rem;
}
.callout p { margin: 0 0 0.7rem; max-width: none; }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--primary); }
.callout .callout-title {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.callout--warn { border-left-color: var(--chart-red); }
.callout--warn .callout-title { color: var(--chart-red); }

.pull-quote {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  font-style: italic;
  color: var(--primary-light);
  line-height: 1.45;
  padding: 1.2rem 1.5rem;
  margin: 2rem 0;
  border-left: 4px solid var(--accent);
  background: var(--bg-accent);
}
.pull-quote .attribution {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  font-style: normal;
  color: var(--text-muted);
  font-family: var(--sans);
}

/* --- abstract ----------------------------------------------------------------- */

.abstract {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--primary);
  /* Generous left padding: the rule is a marker, not a margin, and justified
     text set hard against it reads as an overlap. */
  padding: 1.6rem 1.9rem 1.4rem 2rem;
}
.abstract h2 {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.9rem;
  padding: 0;
  border: 0;
}
.abstract p {
  font-size: 0.92rem;
  line-height: 1.68;
  color: var(--text-secondary);
  margin: 0 0 0.9rem;
}
.abstract p:last-child { margin-bottom: 0; }

/* --- end matter ---------------------------------------------------------------- */

.endmatter h2 {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}
.endmatter__list { margin: 0; }
.endmatter__list > div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0.5rem 1.5rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border-light);
}
.endmatter__list > div:last-child { border-bottom: 0; }
.endmatter dt {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 0.15rem;
}
.endmatter dd {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.endmatter .kw {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: var(--bg-accent);
  border: 1px solid var(--border-light);
  padding: 0.1rem 0.45rem;
  margin: 0 0.3rem 0.3rem 0;
}
.endmatter .cite-inline { font-family: var(--mono); font-size: 0.76rem; line-height: 1.65; }

@media (max-width: 620px) {
  .endmatter__list > div { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* --- references -------------------------------------------------------------- */

.ref-list { list-style: none; padding: 0; margin: 0; max-width: none; }
.ref-list li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0;
}
.ref-list li:last-child { border-bottom: 0; }
.ref-list .ref-org {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.15rem;
}

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

.back-top { text-align: center; margin-top: 2.5rem; }
.back-top a {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--text-muted);
}

.report-footer {
  background: var(--bg-dark);
  color: var(--text-inverse);
  padding: 3rem var(--gutter) 2.2rem;
  margin-top: 5rem;
  border-top: 4px solid var(--accent);
}
.footer-inner { max-width: var(--max-width); margin: 0 auto; }
.footer-inner h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  margin: 0 0 1.2rem;
  color: var(--accent-light);
}
.footer-inner p { color: rgba(240, 237, 230, 0.66); font-size: 0.85rem; max-width: 70ch; }
.footer-inner a { color: var(--accent-light); }
.footer-meta {
  display: flex; flex-wrap: wrap; gap: 0.6rem 2rem;
  margin-top: 1.8rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(240, 237, 230, 0.14);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(240, 237, 230, 0.5);
}
.cite-box strong { color: var(--accent-light); }
.cite-box {
  background: rgba(0, 0, 0, 0.22);
  border-left: 3px solid var(--accent);
  padding: 0.9rem 1.1rem;
  margin: 1.4rem 0 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(240, 237, 230, 0.78);
  font-family: var(--mono);
  overflow-wrap: anywhere;
}

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

@media (max-width: 700px) {
  /* Too few words per line to justify without visible gaps. */
  .content > section > p:not(.section-dek),
  .content > section > ul li,
  .content > section > ol li,
  .abstract p,
  .callout p { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
}

@media (max-width: 760px) {
  :root { --gutter: 1.25rem; }
  .chart-pair { grid-template-columns: 1fr; }
  .masthead { padding-top: 2.2rem; padding-bottom: 2.2rem; }
  .masthead .meta-row { gap: 1rem 2rem; }
  .chart-frame { height: 300px; }
  .chart-frame--tall { height: 360px; }
  .content { padding-top: 2.2rem; }
  .sitebar__links { gap: 1rem; }
}

@media (max-width: 520px) {
  .matrix { font-size: 0.7rem; }
  .matrix tbody th { min-width: 7.5rem; font-size: 0.7rem; }
}

/* --- print ---------------------------------------------------------------------- */

@media print {
  :root { --bg: #fff; --max-width: 100%; }
  .sticky-nav, .sitebar, .progress, .back-top { display: none !important; }
  body { font-size: 10.5pt; }
  .masthead, .report-footer { background: #fff; color: #000; border-color: #999; }
  .masthead .overline, .masthead .meta-row strong, .footer-inner h3 { color: #8b6914; }
  .masthead .subtitle, .masthead .meta-row, .footer-inner p { color: #333; }
  .content { padding: 1rem 0; }
  section { break-inside: auto; page-break-inside: auto; }
  section > h2 { break-after: avoid; page-break-after: avoid; }
  .chart-container, .exec-card, .stat-card, .callout, .tbl-scroll {
    break-inside: avoid; page-break-inside: avoid;
  }
  a { color: #000; text-decoration: underline; }
}