/* The Epistack Labs watercolour style, site-wide: the look of the landing page (rapi/api/landing/css/style.css)
   for every public page. Newsreader on cold-press paper, the night-blue sky with a torn paper edge, lamp gold, pill
   buttons and the floating bar with the lighthouse mark. Light only, as the landing page is.

   Loaded by the dataset page (with dataset.css), the design partners page (with partners.css) and every page built
   on templates/site/page.html (with pages.css). render_dataset_standalone() inlines it into the release's
   self-contained dataset page, so it must not depend on anything served only by the site. Verdict colours: a
   diverging pair of washes (indigo for true, sienna for false) around a stone midpoint (docs/DECISIONS.md, 29 Oct). */

:root {
  --paper: #F4EFE4;
  --paper-2: #EBE4D4;
  --ink: #1D2232;
  --ink-2: #444B5E;
  --ink-3: #555B6E;  /* 5:1 on the darkest of the paper (was #6A7083, 3.7:1; 10 Nov 2026) */
  --rule: rgba(29, 34, 50, 0.16);
  --ochre-ink: #765619;
  --cream: #F7F1E3;
  --cream-2: #E4DDCD;
  --gold: #E8B75A;
  --gold-ink: #B07A1E;
  --night: #232A44;
  --v-true: #2A3A78;
  --v-mostly_true: #6D8EC2;
  --v-mixed: #C4BDAF;
  --v-mostly_false: #CD8A2E;
  --v-false: #9E3F26;
  --v-unresolvable: transparent;
  --e: cubic-bezier(0.22, 1, 0.36, 1);
  --font: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --gutter: clamp(20px, 6vw, 96px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html {
  /* the texture under a wash of the paper colour, so its grain does not cut into the text (10 Nov 2026) */
  background: linear-gradient(rgba(244, 239, 228, 0.6), rgba(244, 239, 228, 0.6)), var(--paper) url(/static/site/paper.jpg) 0 0 / 512px repeat;
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font);
  font-optical-sizing: auto;
  font-size: 17px; line-height: 27px;
  overflow-x: hidden;
}
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ochre-ink); }
b { font-weight: 600; }
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
main:focus { outline: none; }
.skip {
  position: absolute; left: 16px; top: 16px; z-index: 50; padding: 8px 12px; border-radius: 9999px;
  background: var(--cream); color: var(--ink); font-size: 14px; font-weight: 600; transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---------- the night band: the landing page's sky, with a torn paper edge ---------- */
.night {
  position: relative;
  padding: 120px max(var(--gutter), calc((100% - 1000px) / 2)) 112px;
  color: var(--cream);
  background:
    url(/static/site/paper.jpg) 0 0 / 512px repeat,
    radial-gradient(circle at 90% 9%, rgba(255, 226, 160, 0.85) 0, rgba(232, 183, 90, 0.45) 14px, rgba(232, 183, 90, 0) 120px),
    conic-gradient(from 228deg at 90% 9%, rgba(232, 183, 90, 0) 0deg, rgba(232, 183, 90, 0.20) 7deg, rgba(232, 183, 90, 0.08) 14deg, rgba(232, 183, 90, 0) 20deg, rgba(232, 183, 90, 0) 360deg),
    radial-gradient(ellipse 40% 60% at 90% 6%, rgba(232, 183, 90, 0.22), rgba(232, 183, 90, 0) 70%),
    linear-gradient(180deg, #1A2040 0%, #232A44 55%, #34406A 100%);
  background-blend-mode: multiply, normal, normal, normal, normal;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 46px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V30.0L1440 30.0L1426 33.6L1418 36.8L1410 32.5L1400 39.8L1392 39.8L1382 35.7L1370 40.2L1364 38.4L1352 37.3L1344 39.2L1336 38.4L1326 35.0L1318 32.0L1306 29.7L1294 28.9L1286 26.0L1280 27.6L1274 25.4L1268 21.8L1258 23.1L1252 27.6L1246 27.2L1234 27.2L1224 27.1L1218 28.0L1206 25.6L1198 28.9L1190 30.8L1184 28.3L1176 29.9L1164 29.1L1154 27.6L1148 26.0L1136 19.5L1126 20.9L1118 16.0L1110 12.7L1102 17.1L1094 13.4L1086 13.4L1080 9.7L1072 10.8L1062 14.9L1050 16.0L1042 18.7L1030 16.3L1024 23.3L1016 23.0L1010 22.2L998 21.4L988 24.9L980 25.8L972 29.1L966 28.6L960 28.2L950 25.5L944 26.1L932 23.1L924 21.8L918 20.3L908 26.0L898 22.4L888 24.5L880 23.6L870 28.5L864 25.0L852 26.2L844 31.7L832 34.8L824 35.3L814 36.4L806 36.3L798 38.3L788 40.1L782 42.1L772 40.2L766 35.4L756 39.8L748 35.5L740 33.8L730 33.9L724 28.2L714 29.3L702 30.3L696 27.1L686 29.9L676 24.1L664 29.6L658 28.1L648 28.3L640 25.2L634 29.9L624 27.5L612 33.7L606 27.2L594 27.0L582 27.8L570 26.2L564 28.6L554 24.0L544 18.5L538 18.0L530 14.6L522 14.6L514 12.3L506 17.5L494 14.9L484 15.1L474 16.8L462 18.3L452 16.5L440 16.3L428 20.4L416 24.6L408 25.6L400 24.3L394 23.6L382 21.3L372 26.9L360 21.9L348 23.4L338 18.5L332 22.5L320 23.8L314 17.7L302 21.9L292 21.1L282 25.6L276 24.3L264 24.9L254 27.3L242 29.7L236 34.4L226 37.1L216 37.1L206 34.9L198 40.1L190 37.0L178 37.8L166 37.7L154 33.9L146 33.1L140 30.8L132 27.7L124 29.9L114 28.8L106 26.6L98 24.8L90 24.9L78 29.2L72 32.2L66 26.5L54 27.9L46 30.8L34 28.9L26 35.2L20 31.4L14 29.1L8 30.9L0 29.6Z'/%3E%3C/svg%3E") bottom / 100% 48px no-repeat;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 46px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V30.0L1440 30.0L1426 33.6L1418 36.8L1410 32.5L1400 39.8L1392 39.8L1382 35.7L1370 40.2L1364 38.4L1352 37.3L1344 39.2L1336 38.4L1326 35.0L1318 32.0L1306 29.7L1294 28.9L1286 26.0L1280 27.6L1274 25.4L1268 21.8L1258 23.1L1252 27.6L1246 27.2L1234 27.2L1224 27.1L1218 28.0L1206 25.6L1198 28.9L1190 30.8L1184 28.3L1176 29.9L1164 29.1L1154 27.6L1148 26.0L1136 19.5L1126 20.9L1118 16.0L1110 12.7L1102 17.1L1094 13.4L1086 13.4L1080 9.7L1072 10.8L1062 14.9L1050 16.0L1042 18.7L1030 16.3L1024 23.3L1016 23.0L1010 22.2L998 21.4L988 24.9L980 25.8L972 29.1L966 28.6L960 28.2L950 25.5L944 26.1L932 23.1L924 21.8L918 20.3L908 26.0L898 22.4L888 24.5L880 23.6L870 28.5L864 25.0L852 26.2L844 31.7L832 34.8L824 35.3L814 36.4L806 36.3L798 38.3L788 40.1L782 42.1L772 40.2L766 35.4L756 39.8L748 35.5L740 33.8L730 33.9L724 28.2L714 29.3L702 30.3L696 27.1L686 29.9L676 24.1L664 29.6L658 28.1L648 28.3L640 25.2L634 29.9L624 27.5L612 33.7L606 27.2L594 27.0L582 27.8L570 26.2L564 28.6L554 24.0L544 18.5L538 18.0L530 14.6L522 14.6L514 12.3L506 17.5L494 14.9L484 15.1L474 16.8L462 18.3L452 16.5L440 16.3L428 20.4L416 24.6L408 25.6L400 24.3L394 23.6L382 21.3L372 26.9L360 21.9L348 23.4L338 18.5L332 22.5L320 23.8L314 17.7L302 21.9L292 21.1L282 25.6L276 24.3L264 24.9L254 27.3L242 29.7L236 34.4L226 37.1L216 37.1L206 34.9L198 40.1L190 37.0L178 37.8L166 37.7L154 33.9L146 33.1L140 30.8L132 27.7L124 29.9L114 28.8L106 26.6L98 24.8L90 24.9L78 29.2L72 32.2L66 26.5L54 27.9L46 30.8L34 28.9L26 35.2L20 31.4L14 29.1L8 30.9L0 29.6Z'/%3E%3C/svg%3E") bottom / 100% 48px no-repeat;
}
.bar {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 20px;
  padding: 8px 8px 8px 16px; border-radius: 9999px;
  background: rgba(24, 29, 48, 0.42); border: 1px solid rgba(247, 241, 227, 0.12);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  white-space: nowrap; font-size: 14px; line-height: 20px;
}
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 18px; line-height: 28px; font-weight: 500; }
.brand:hover, .bar-link:hover { color: var(--cream); }
.mark { width: 24px; height: 24px; flex: none; }
.mark-tower { fill: currentColor; }
.mark-line { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.mark-beam { fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-linecap: round; opacity: 0.85; }
.mark-lamp { fill: var(--gold); }
.bar-links { display: flex; gap: 14px; }
.bar-link { font-weight: 600; text-decoration: none; opacity: 0.8; padding: 4px 2px; }
.bar-link:hover { opacity: 1; text-decoration: underline; }
.bar-link[aria-current], .bar-here { opacity: 1; box-shadow: inset 0 -1.5px 0 var(--gold); }
.bar-menu { position: relative; display: inline-flex; }
.bar-menu > .bar-link::after { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 1px 3px 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.7; }
.bar-sub { position: absolute; z-index: 5; top: 100%; left: -13px; padding-top: 14px; visibility: hidden; opacity: 0; transition: opacity 150ms ease, visibility 150ms; }
.bar-menu:hover .bar-sub, .bar-menu:focus-within .bar-sub { visibility: visible; opacity: 1; }
.bar-sub .bar-link { display: block; padding: 8px 14px; border-radius: 12px; opacity: 1; color: var(--cream); background: rgba(24, 29, 48, 0.94); border: 1px solid rgba(247, 241, 227, 0.12); }
.bar-cta { font-weight: 600; text-decoration: none; padding: 8px 12px; border-radius: 9999px; background: var(--cream); color: var(--ink); }
.bar-cta:hover { background: #fff; color: var(--ink); }

.night-copy { max-width: 900px; }
.eyebrow {
  margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ochre-ink);
}
.eyebrow.gold { color: var(--gold); }
.wordmark {
  margin: 16px 0 0; font-size: 76px; line-height: 1; font-weight: 500; letter-spacing: -0.02em;
  background: linear-gradient(90deg, #F8F2E4 0%, #F8F2E4 40%, #CDC5B3 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding-bottom: 6px; text-wrap: balance;
}
.wordmark > span { display: block; text-wrap: balance; } /* a heading of two sentences: one a line, each balanced */
.thesis { margin: 24px 0 0; max-width: 760px; font-size: 30px; line-height: 38px; letter-spacing: -0.01em; text-wrap: balance; }
.thesis span { color: var(--gold); font-weight: 500; }
.support { margin: 16px 0 0; max-width: 520px; font-size: 18px; line-height: 28px; color: var(--cream-2); }
.night-actions { margin: 32px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 9999px;
  font-size: 16px; line-height: 24px; font-weight: 600; text-decoration: none;
  transition: background-color 300ms var(--e), transform 300ms var(--e);
}
.btn:active { transform: scale(0.98); }
.btn-cream { background: var(--cream); color: var(--ink); }
.btn-cream:hover { background: #fff; color: var(--ink); }
.btn-line { color: var(--cream); border: 1px solid rgba(247, 241, 227, 0.4); padding: 7px 16px; }
.btn-line:hover { color: var(--cream); background: rgba(247, 241, 227, 0.1); }
.btn-ink { background: var(--night); color: var(--cream); }
.btn-ink:hover { background: #151A2D; color: var(--cream); }
.btn-ghost { color: var(--ink); border: 1px solid rgba(29, 34, 50, 0.35); padding: 7px 16px; }
.btn-ghost:hover { color: var(--ink); background: rgba(29, 34, 50, 0.06); }

/* ---------- sections ---------- */
.sec { max-width: calc(1000px + 2 * var(--gutter)); margin: 0 auto; padding: 72px var(--gutter) 24px; }
.sec + .sec { border-top: 0; }
.h2 {
  margin: 12px 0 0; max-width: 820px;
  font-size: 50px; line-height: 1.04; font-weight: 500; letter-spacing: -0.02em; text-wrap: balance;
  background: linear-gradient(90deg, #1D2232, #4A5166); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; padding-bottom: 4px;
}
.lede { margin: 20px 0 0; max-width: 680px; font-size: 20px; line-height: 30px; color: var(--ink-2); text-wrap: pretty; }
.note { margin: 16px 0 0; max-width: 720px; font-size: 15px; line-height: 23px; color: var(--ink-3); }
pre { margin: 16px 0; padding: 14px 18px; border-radius: 12px; overflow-x: auto; background: var(--night); color: var(--cream); font-size: 14px; line-height: 22px; }

/* figures in a row, divided by hairlines */
.kpis { margin: 56px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--rule); }
.kpi { margin: 0; padding: 18px 18px 0 0; }
.kpi + .kpi { padding-left: 18px; border-left: 1px solid var(--rule); }
.kpi b { display: block; font-size: 38px; line-height: 1.1; font-weight: 500; letter-spacing: -0.02em; }
.kpi span { display: block; margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--ink-3); }

/* tables */
.tbl-wrap { margin-top: 20px; overflow-x: auto; border-top: 1.5px solid var(--ink); }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 21px; }
.tbl th { text-align: left; font-weight: 600; font-size: 13px; color: var(--ink-3); padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: bottom; }
.tbl td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tbl td.num { font-variant-numeric: tabular-nums; }
.tbl tbody tr:hover td { background: rgba(232, 183, 90, 0.12); }

/* footer */
.foot { padding: 56px var(--gutter) 40px; font-size: 14px; line-height: 20px; color: var(--ink-2); max-width: calc(1000px + 2 * var(--gutter)); margin: 0 auto; }
.foot p { margin: 0; }
.foot .foot-small { margin-top: 6px; font-size: 13px; line-height: 19px; color: var(--ink-3); }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi, .kpi + .kpi { padding: 16px 12px 16px 0; border-left: 0; border-bottom: 1px solid var(--rule); }
  .kpi:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--rule); }
}
@media (max-width: 640px) {
  body { font-size: 16px; line-height: 25px; }
  .night { padding: 96px 20px 96px; }
  .bar { top: 12px; gap: 10px; padding: 4px 4px 4px 12px; }
  .brand { font-size: 16px; gap: 4px; }
  .brand span { display: none; }
  .bar-links { gap: 10px; }
  .bar-link, .bar-cta { font-size: 13px; }
  .bar-menu { display: none; } /* a phone's bar holds two links and the action; How it works is in the page */
  @media (max-width: 350px) { .bar-link[href$="/dataset"] { display: none; } } /* the narrowest phones */
  .bar-cta { padding: 7px 11px; }
  .wordmark { font-size: 48px; }
  .thesis { font-size: 23px; line-height: 31px; }
  .support { font-size: 16px; line-height: 24px; }
  .sec { padding-top: 56px; }
  .h2 { font-size: 34px; line-height: 1.08; }
  .lede { font-size: 18px; line-height: 27px; }
  .kpi b { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}
@media print {
  .night { -webkit-mask: none; mask: none; }
  .bar { display: none; }
}