/* =========================================================================
   SOURCES PAGE
   =========================================================================
   Standalone, and deliberately not sharing css/styles.css. That file starts
   with `html, body { overflow: hidden }` because the app is a fixed-aspect
   stage with nothing to scroll; this is an ordinary document that has to
   scroll. The handful of tokens and the one @font-face it needs are repeated
   here rather than untangled out of there.
   ========================================================================= */

@font-face {
  font-family: "Mochibop";
  src: url("../fonts/mochibop.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* Body copy. Recoleta has no italic, so any <em> is a synthesised
   oblique; the weights below are the real cuts. Repeated here because this page does not load styles.css. */

@font-face {
  font-family: "Recoleta";
  src: url("../fonts/recoleta-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Recoleta";
  src: url("../fonts/recoleta-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Recoleta";
  src: url("../fonts/recoleta-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Recoleta";
  src: url("../fonts/recoleta-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Recoleta";
  src: url("../fonts/recoleta-black.woff2") format("woff2");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #1e293b;
  --ink-soft: #64748b;
  --rule: rgba(30, 41, 59, 0.12);
  --accent: #2563eb;
  --paper: #f7fafc;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Same painted gradient the site sits on, so arriving here does not feel
     like leaving the site. */
  background: #eef3f8 url("../media/views/gradient.webp") center / cover fixed no-repeat;
  font-family: "Recoleta", Georgia, "Times New Roman", serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 64px) clamp(18px, 5vw, 32px) 25vh;
}

/* ── Head ────────────────────────────────────────────────────────────────── */
.back {
  display: inline-block;
  margin-bottom: clamp(18px, 4vw, 36px);
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: none;
}
.back:hover { color: var(--ink); }

h1 {
  margin: 0 0 0.25em;
  font-family: "Mochibop", ui-rounded, system-ui, sans-serif;
  font-size: clamp(30px, 6vw, 52px);
  font-weight: 400;
  line-height: 1.1;
}

.lede {
  margin: 0 0 2.4em;
  max-width: 58ch;
  font-size: clamp(15px, 1.9vw, 18px);
  color: var(--ink-soft);
}
.lede strong { color: var(--ink); font-weight: 600; }

/* ── Sections ────────────────────────────────────────────────────────────── */
h2 {
  margin: 2.6em 0 0.2em;
  font-size: clamp(19px, 2.6vw, 25px);
  font-weight: 700;
  line-height: 1.2;
}
h2 + .note { margin: 0 0 1.4em; color: var(--ink-soft); font-size: 15px; }

/* ── Entries ─────────────────────────────────────────────────────────────── */
.src {
  display: grid;
  grid-template-columns: 2.6em 1fr;
  gap: 0 0.55em;
  padding: 0.95em 0.7em 0.95em 0.5em;
  border-top: 1px solid var(--rule);
  border-radius: 6px;
  scroll-margin-top: 1.5em;
}
.src:last-of-type { border-bottom: 1px solid var(--rule); }

/* Landing on a footnote should say so — the row lights up briefly rather than
   leaving the reader to count rows and hope. */
.src:target {
  background: rgba(255, 255, 255, 0.75);
  box-shadow: inset 3px 0 0 var(--accent);
  animation: src-land 2.4s ease-out;
}
@keyframes src-land {
  0%, 40% { background: rgba(255, 255, 255, 0.95); }
  100%    { background: rgba(255, 255, 255, 0.75); }
}

.src .n {
  grid-column: 1;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: right;
  padding-top: 0.1em;
}
.src :is(.t, .d) { grid-column: 2; }

.src .t { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; }
.src .t a { color: var(--ink); text-decoration-color: var(--rule);
            text-underline-offset: 2px; }
.src .t a:hover { color: var(--accent); text-decoration-color: currentColor; }

.src .pub { font-weight: 400; color: var(--ink-soft); }

.src .d { margin: 0.28em 0 0; font-size: 14.5px; color: var(--ink-soft); }
.src .d strong { color: var(--ink); font-weight: 600; }

/* What kind of thing it is. Same convention as the ecosystem view's notes:
   a report is not a news story is not an unverified claim. */
.kind {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.08em 0.45em;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: 3px;
  vertical-align: 0.12em;
  white-space: nowrap;
}
.kind--research { border-color: rgba(13, 148, 136, 0.45); color: #0f766e; }
.kind--report   { border-color: rgba(37, 99, 235, 0.35);  color: #1d4ed8; }
.kind--gov      { border-color: rgba(100, 116, 139, 0.5); }

/* ── Foot ────────────────────────────────────────────────────────────────── */
.foot {
  margin-top: 3.5em;
  padding-top: 1.4em;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--ink-soft);
}
.foot a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .src:target { animation: none; }
}