/* Public homepage. Self-contained on purpose: this page is the project's
   public face and is served to visitors with no session, so it must not
   depend on the application chrome or scripts.

   The same five colours as the rest of the platform, in the same roles:
   Prussian blue speaks, orange points, alabaster and white are the surfaces.
   The page is bookended in Prussian blue (the hero above, the citation band
   and footer below) with the resource cards breaking the hero's lower edge,
   so the paper, protocol and code are reachable without scrolling. Section
   headings are set in a serif, the way a journal sets them; everything that
   is interface stays in the sans. */

:root {
  --black: #000000;
  --prussian: #14213d;
  --orange: #fca311;
  --alabaster: #e5e5e5;
  --white: #ffffff;

  --bg: #ffffff;
  --bg-soft: #f3f3f3;
  --panel: #ffffff;
  --ink: #14213d;
  --ink-2: #535c6f;
  --ink-3: #747c8b;
  --line: #e5e5e5;
  --line-2: #f0f0f0;
  --accent: #9a5a00;           /* orange as text, 5.5:1 on white */
  --accent-2: #fca311;         /* orange as a mark */
  --accent-soft: #fff1db;
  --prussian-soft: #ecedf1;
  --hero-ink: #f4f4f4;
  --hero-ink-2: rgba(229, 229, 229, .74);
  --hero-line: rgba(229, 229, 229, .16);
  --shadow: 0 1px 2px rgba(20, 33, 61, .05), 0 10px 28px rgba(20, 33, 61, .07);
  --shadow-lift: 0 2px 4px rgba(20, 33, 61, .06), 0 18px 44px rgba(20, 33, 61, .14);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Charter, "Iowan Old Style", "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #060a12;
    --bg-soft: #0a1020;
    --panel: #0f192d;
    --ink: #e5e5e5;
    --ink-2: #a6aab3;
    --ink-3: #7c8391;
    --line: #29354e;
    --line-2: #1d2841;
    --accent: #fca311;
    --accent-soft: #3a3020;
    --prussian-soft: #1b2843;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .45);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 44px rgba(0, 0, 0, .55);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: color-mix(in srgb, var(--orange) 40%, transparent); }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--accent-2); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }

/* ------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 650;
  white-space: nowrap;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.btn:hover { text-decoration: none; border-color: var(--ink-3); transform: translateY(-1px); }

/* The one action on the page, in orange with Prussian text (7.9:1). */
.btn-primary {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--prussian);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--orange) 86%, var(--black));
  border-color: color-mix(in srgb, var(--orange) 86%, var(--black));
}

/* On the dark hero the secondary button is glass rather than white. */
.btn-glass {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(229, 229, 229, .32);
  color: var(--hero-ink);
  backdrop-filter: blur(4px);
}
.btn-glass:hover { border-color: rgba(229, 229, 229, .7); background: rgba(255, 255, 255, .11); }

/* ------------------------------------------------- header, over the hero */

.site-head {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
}
.site-head .container {
  display: flex;
  align-items: center;
  gap: 26px;
  height: 72px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--hero-ink);
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -.2px;
}
.wordmark:hover { text-decoration: none; }
.mark { width: 28px; height: 28px; flex: none; display: block; }

.site-nav {
  display: flex;
  gap: 22px;
  margin-left: 8px;
  font-size: 13.5px;
  font-weight: 550;
}
.site-nav a { color: var(--hero-ink-2); }
.site-nav a:hover { color: var(--hero-ink); text-decoration: none; }

.site-head .spacer { flex: 1; }

@media (max-width: 640px) {
  .site-nav { display: none; }
}

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  overflow: hidden;
  color: var(--hero-ink);
  background:
    url(/assets/contours.svg) left bottom / 1400px auto no-repeat,
    linear-gradient(160deg, var(--prussian) 0%, #0b1428 58%, var(--black) 100%);
  /* Room for the absolute header plus the overlapping cards below. */
  padding: 128px 0 122px;
}
/* The brand rule: the orange line the whole page hangs from. */
.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--orange);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 48px;
  align-items: center;
}

.hero .kicker {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--orange);
}

.hero h1 {
  margin: 0 0 14px;
  font-size: clamp(42px, 6vw, 66px);
  line-height: 1;
  letter-spacing: -.03em;
  font-weight: 800;
  color: #fff;
}

.hero .lede {
  margin: 0 0 28px;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--hero-ink-2);
  max-width: 34em;
}
.hero .lede b { color: var(--hero-ink); font-weight: 650; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Four figures under the copy, ruled like a table in a paper. */
.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 40px 0 0;
  padding: 0;
}
.fact {
  border-left: 1px solid var(--hero-line);
  padding-left: 14px;
}
.fact dt {
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.fact.key dt { color: var(--orange); }
.fact dd { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--hero-ink-2); }
.fact dd i { font-style: italic; }

.hero-fig { margin: 0; min-width: 0; }
.hero-plot { display: block; width: 100%; height: auto; }

.hero-plot .axis-lbl text, .hero-plot .lbl, .hero-plot .w, .hero-plot .axis-title {
  font-family: var(--mono);
  font-size: 11px;
  fill: rgba(229, 229, 229, .58);
}
.hero-plot .lbl { text-anchor: end; }
.hero-plot .w { fill: rgba(229, 229, 229, .42); }
.hero-plot .axis-title { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; fill: rgba(229, 229, 229, .48); }
.hero-plot .null { stroke: rgba(229, 229, 229, .38); stroke-width: 1.2; stroke-dasharray: 3 5; }
.hero-plot .rule { stroke: rgba(229, 229, 229, .2); stroke-width: 1; }
.hero-plot .ci { stroke: rgba(229, 229, 229, .62); stroke-width: 1.6; stroke-linecap: round; }
.hero-plot .est { fill: var(--alabaster); }
.hero-plot .pooled path { fill: var(--orange); }
.hero-plot .pooled .lbl { fill: var(--orange); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 10.5px; }
.hero-plot .pooled .w { fill: var(--orange); }

/* The studies arrive one by one, then the diamond: a plot being drawn. */
.hero-plot .study {
  animation: study-in .55s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(.3s + var(--i) * 85ms);
}
.hero-plot .pooled {
  transform-box: fill-box;
  transform-origin: center;
  animation: pooled-in .6s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: 1.25s;
}
@keyframes study-in { from { opacity: 0; transform: translateX(-10px); } }
@keyframes pooled-in { from { opacity: 0; transform: scale(.5); } }
@media (prefers-reduced-motion: reduce) {
  .hero-plot .study, .hero-plot .pooled { animation: none; }
}

@media (max-width: 900px) {
  .hero { padding: 112px 0 112px; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-fig { max-width: 480px; margin: 0 auto; }
  .facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .facts { grid-template-columns: 1fr 1fr; gap: 14px; }
  .fact dt { font-size: 22px; }
}

/* ------------------------------------------- resource cards, on the fold */

.resources { margin-top: -72px; position: relative; z-index: 5; }

.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 14px;
}

.resource-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--prussian);
  padding: 20px 22px;
  color: var(--ink);
  box-shadow: var(--shadow-lift);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
@media (prefers-color-scheme: dark) { .resource-card { border-top-color: var(--alabaster); } }
a.resource-card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-top-color: var(--orange);
}
.resource-card .head {
  display: flex;
  flex-wrap: wrap;          /* a long pill drops below rather than squeezing the title */
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 8px;
}
.resource-card .head svg { color: var(--ink); flex: none; }
.resource-card .head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.resource-card p { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.resource-card p:last-child { margin-bottom: 0; }

.chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--orange) 40%, transparent);
  padding: 4px 9px;
}
.pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 3px 8px;
  vertical-align: 1px;
}
/* Live now: the orange fill. Not yet: outlined grey. */
.pill.live { color: var(--prussian); background: var(--orange); }
.pill.dim { color: var(--ink-3); background: transparent; border: 1px solid var(--line); }

/* ------------------------------------------------------------ sections */

.section { padding: 72px 0; }
.section.soft { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Section markers, numbered as in a report: an orange square with the
   number, then the label. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow .n {
  display: inline-grid;
  place-items: center;
  height: 22px;
  padding: 0 7px;
  background: var(--orange);
  color: var(--prussian);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0;
}
.section h2 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.12;
  letter-spacing: -.01em;
  font-weight: 600;
}
.section .sub {
  margin: 0 0 36px;
  color: var(--ink-2);
  font-size: 15.5px;
  max-width: 62ch;
}

/* ---------------------------------------------------------------- flow
   How a paper moves through the platform: three stations on one rule, the
   last one orange because the database is where everything ends up. */
.flow {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  border-top: 1px solid var(--line);
}
.flow li { position: relative; padding: 24px 8px 0 0; }
.flow .node {
  position: absolute;
  top: -15px;
  left: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--prussian);
  color: #fff;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 750;
  box-shadow: 0 0 0 4px var(--bg);
}
@media (prefers-color-scheme: dark) { .flow .node { background: var(--alabaster); color: var(--prussian); } }
.flow .node.end { background: var(--orange); color: var(--prussian); }
.flow h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.flow p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 760px) { .flow { grid-template-columns: 1fr; row-gap: 40px; } }

/* ------------------------------------------------------------- modules */

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.module-card {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 26px;
  box-shadow: var(--shadow);
}
.module-card .icon {
  width: 42px;
  height: 42px;
  background: var(--prussian);
  color: var(--orange);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.module-card h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -.01em;
}
.module-card .role {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.module-card p { margin: 0; font-size: 13.8px; line-height: 1.7; color: var(--ink-2); }

/* ------------------------------------------------------- the 14 items
   A ledger rather than cards: two ruled columns, the item number in the
   margin, so the whole standard reads at a glance. */

.items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
  border-top: 1px solid var(--line);
}
.items .item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0 15px;
  border-bottom: 1px solid var(--line);
}
.item-no {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  padding-top: 3px;
  font-variant-numeric: tabular-nums;
}
.items h4 { margin: 0 0 4px; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; }
.items p { margin: 0; font-size: 12.8px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 760px) { .items { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- cite */

.cite-band {
  background:
    url(/assets/contours.svg) right -200px bottom -120px / 1100px auto no-repeat,
    var(--prussian);
  color: var(--hero-ink);
  padding: 56px 0;
}
.cite-band .eyebrow { color: var(--hero-ink-2); }
.cite-band .citation {
  max-width: 62em;
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--hero-ink);
}
.cite-band .citation i { color: #fff; }
.cite-band .chip {
  background: transparent;
  color: var(--orange);
  border-color: color-mix(in srgb, var(--orange) 55%, transparent);
}
.cite-band .chip:hover { background: rgba(252, 163, 17, .1); text-decoration: none; }

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

.site-foot {
  background: var(--black);
  border-top: 1px solid rgba(229, 229, 229, .1);
  padding: 26px 0 34px;
  font-size: 13px;
  color: rgba(229, 229, 229, .66);
}
.site-foot .container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  align-items: center;
  justify-content: space-between;
}
.foot-brand { display: inline-flex; align-items: center; gap: 10px; }
.foot-brand .mark { width: 22px; height: 22px; }
.foot-brand b { color: var(--alabaster); }
.foot-links { display: inline-flex; gap: 22px; }
.site-foot a { color: var(--alabaster); }
.site-foot a:hover { color: var(--orange); text-decoration: none; }