/* Research hub — the district (imprint) skin, committed to white.
   Same family as the product sites, tuned for a document that gets read rather
   than scanned. The imprint moves that carry the look are all here:
     1. a centred nav card with the brand above pill links
     2. very large display type at LIGHT weight with tight tracking
     3. white / soft-grey surfaces, generous rounding (14-22px)
     4. mono for every number, so figures line up and read as data

   LIGHT ONLY, on purpose. There is no prefers-color-scheme branch and no
   data-theme override: a reader whose OS is set to dark still gets white paper,
   because that is the look this document is meant to have. `color-scheme: light`
   is what makes the browser's own furniture — scrollbars, form controls, the
   canvas behind an overscroll — render light too; without it the page stays
   white but the chrome around it goes dark, which reads as a broken theme.

   One deliberate departure from imprint.co: the nav card sits IN FLOW, not
   fixed. There the fixed card covers the headings behind it; on a page you
   actually read top-to-bottom that would be permanent, not occasional. */

:root {
  color-scheme: light;

  --bg:        #FFFFFF;
  --band:      #F1F1EF;
  --surface:   #FFFFFF;
  --ink:       #101113;
  --ink-soft:  #5C6166;
  --faint:     #686D72;
  --line:      #E2E3DF;
  --accent:    #C4522A;
  --hi:        #E8E9E4;
  --ok:        #2E6B4F;
  --warn:      #96650B;
  --err:       #B4402A;

  --r-card: 22px;
  --r-panel: 18px;
  --r-pill: 11px;

  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

*{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-family:var(--sans);
  font-size:17px;line-height:1.58;-webkit-font-smoothing:antialiased}
.wrap{max-width:840px;margin:0 auto;padding:0 30px}
.wide{max-width:1100px;margin:0 auto;padding:0 30px}
p{max-width:70ch}
a{color:var(--accent);text-underline-offset:3px}
a:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- nav card (in flow, centred) ---------- */
header.top{padding:22px 0 30px;background:var(--bg)}
header.top .wrap{max-width:560px;background:var(--surface);border-radius:var(--r-card);
  padding:19px 22px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 34px rgba(0,0,0,.085);
  border:1px solid var(--line)}
.brand{display:block;font-weight:650;font-size:19px;letter-spacing:-.022em;
  text-decoration:none;color:var(--ink);margin-bottom:15px}
.brand span{font-weight:350;color:var(--ink-soft)}
header.top nav{display:flex;gap:7px;flex-wrap:wrap}
header.top nav a{font-size:14.5px;text-decoration:none;color:var(--ink);
  padding:7px 13px;border-radius:var(--r-pill);background:var(--band);
  transition:background .16s ease,color .16s ease}
header.top nav a:hover{background:var(--line)}
header.top nav a[aria-current="page"]{background:var(--ink);color:var(--bg)}

/* ---------- display type: large, LIGHT, tight ---------- */
h1{font-size:clamp(34px,6vw,60px);font-weight:300;letter-spacing:-.035em;
  line-height:1.04;margin:0 0 20px;text-wrap:balance}
h2{font-size:clamp(25px,3.2vw,33px);font-weight:350;letter-spacing:-.028em;
  line-height:1.14;margin:64px 0 16px;text-wrap:balance}
h3{font-size:19px;font-weight:600;letter-spacing:-.014em;margin:38px 0 10px}
.standfirst{font-size:21.5px;font-weight:350;line-height:1.45;letter-spacing:-.014em;
  color:var(--ink-soft);margin:0 0 10px;max-width:60ch}
.byline{font-family:var(--mono);font-size:11.5px;color:var(--faint);letter-spacing:.07em;
  text-transform:uppercase;margin:24px 0 42px;padding-bottom:20px;
  border-bottom:1px solid var(--line)}
main{padding-bottom:90px}

/* ---------- key numbers ---------- */
.kn{display:grid;grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:12px;
  margin:0 0 38px;padding:0}
.kn div{background:var(--band);border-radius:var(--r-panel);padding:17px 19px}
.kn b{display:block;font-family:var(--mono);font-size:26px;font-weight:400;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1.1}
.kn small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);margin-top:8px;line-height:1.4}

/* ---------- tables: the data, in a soft panel ---------- */
.scroll{overflow-x:auto;margin:22px 0 30px;background:var(--band);
  border-radius:var(--r-panel);padding:20px 22px}
table{border-collapse:collapse;width:100%;font-family:var(--mono);font-size:13px}
caption{font-family:var(--sans);font-size:14.5px;color:var(--ink-soft);text-align:left;
  padding-bottom:14px;letter-spacing:-.008em}
th{text-align:left;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);font-weight:600;padding:0 14px 10px 0;
  border-bottom:1px solid var(--ink);white-space:nowrap}
td{padding:10px 14px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;padding-right:18px;
  white-space:nowrap}
td.lbl{font-family:var(--sans);font-size:15.5px;letter-spacing:-.008em}
tr.hi td{background:var(--hi)}
tr.hi td:first-child{border-radius:9px 0 0 9px}
tr.hi td:last-child{border-radius:0 9px 9px 0}

.bar{display:inline-block;height:9px;border-radius:3px;background:var(--accent);
  vertical-align:middle;margin-right:8px;min-width:2px}

/* ---------- quotes ---------- */
blockquote{margin:26px 0;padding:20px 22px;background:var(--band);
  border-radius:var(--r-panel);max-width:66ch}
blockquote p{margin:0;font-size:18.5px;font-weight:350;line-height:1.5;
  letter-spacing:-.012em;max-width:none}
blockquote cite{display:block;margin-top:13px;font-family:var(--mono);font-size:11px;
  font-style:normal;color:var(--faint);letter-spacing:.05em;text-transform:uppercase}
.stars{color:var(--err);font-weight:600}

/* ---------- verdict ---------- */
.verdict{background:var(--band);border-radius:var(--r-card);padding:24px 26px;margin:36px 0}
.verdict .tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:700;display:inline-block;margin-bottom:12px;
  padding:5px 11px;border-radius:20px;background:var(--surface)}
.verdict.build .tag{color:var(--ok)}
.verdict.reject .tag{color:var(--err)}
.verdict.open .tag{color:var(--warn)}
.verdict p{margin:0;font-size:17.5px}
.verdict p+p{margin-top:12px}

/* ---------- limitations ---------- */
.limits{background:var(--band);border-radius:var(--r-card);padding:24px 26px;margin:40px 0}
.limits h3{margin:0 0 12px;font-size:15px;letter-spacing:.01em}
.limits ul{margin:0;padding-left:20px}
.limits li{font-size:16px;color:var(--ink-soft);margin-bottom:9px}

/* ---------- study index ---------- */
.studies{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.studies li{background:var(--band);border-radius:var(--r-panel);padding:20px 22px;
  transition:background .16s ease}
.studies li:hover{background:var(--hi)}
.studies a{font-size:21px;font-weight:400;letter-spacing:-.026em;text-decoration:none;
  color:var(--ink)}
.studies a:hover{color:var(--accent)}
.studies .meta{font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:8px;
  letter-spacing:.05em;text-transform:uppercase}
.studies .head{font-size:16.5px;color:var(--ink-soft);margin-top:9px;max-width:74ch;
  line-height:1.5}
.pill{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:20px;background:var(--surface);color:var(--faint);
  white-space:nowrap;margin-left:10px;vertical-align:3px;font-weight:600}
.pill.build{color:var(--ok)}
.pill.reject{color:var(--err)}
.pill.open{color:var(--warn)}

/* ---------- related ---------- */
.related{margin-top:56px;background:var(--band);border-radius:var(--r-card);
  padding:24px 26px}
.related h3{margin:0 0 14px;font-size:15px}
.related ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:16.5px}
.related li{margin:0}
.related a{text-decoration:none}
.related a:hover{text-decoration:underline}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:34px 0 70px;font-size:15px;
  color:var(--ink-soft)}
footer a{color:var(--accent)}
footer p{max-width:74ch;margin:0 0 14px}
footer strong{color:var(--ink);font-weight:600}