:root {
  --primary: #2561FC;
  --bg: #E8F6F7;
  --ink: #0D1F3F;
  --surface: #FFFFFF;
  --mute: #5B6B85;
  --line: #D3E3E6;
}

* { box-sizing: border-box; }

html, body { margin: 0; }
/* html takes the viewport overflow, so body's own clip (below) applies to body and cuts the rings off at the
   page edge. Without this, phones widen the page to fit the rings and show it zoomed out. */
html { overflow-x: hidden; }

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden;   /* fallback for browsers without clip */
  overflow-x: clip;     /* rings poke past the edge: clip them so phones never zoom out to fit */
  position: relative;
}

/* Halftone dots fading out from the corners. */
/* Halftone rings from the brand cover (assets/halftone-ring.svg, made by tools/make_halftone.py).
   Positioned partly off-canvas so only an arc shows, like the cover. They scroll with the page. */
.dots {
  --s: 600px;
  position: absolute;
  width: var(--s);
  height: var(--s);
  pointer-events: none;
  z-index: 0;
  background: url("/assets/halftone-ring.svg") center / contain no-repeat;
}
.dots-top {
  --s: clamp(520px, 60vw, 960px);
  top: calc(var(--s) * -0.34);
  right: calc(var(--s) * -0.36);
  --r0: 180deg;                   /* dense band toward the content, as on the cover */
  opacity: .8;
}
.dots-bottom {
  --s: clamp(340px, 38vw, 600px);
  bottom: calc(var(--s) * -0.42);
  left: calc(var(--s) * -0.40);
  opacity: .6;
}

.page {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  padding: 56px 24px 40px;
}

.band {
  display: inline-block;
  background: var(--primary);
  color: var(--on-primary, #fff);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 10px 18px;
}

.hero { margin: 72px 0 64px; }

.hero h1 {
  margin: 0;
  font-size: clamp(40px, 9vw, 84px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--primary);
  overflow-wrap: anywhere;
}

.tagline {
  margin: 14px 0 0;
  font-size: clamp(18px, 3.4vw, 26px);
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
}

.accent {
  display: block;
  width: 96px;
  height: 8px;
  margin-top: 28px;
  background: var(--primary);
}

h2 {
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 5px solid var(--primary);
  color: var(--ink);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover, .card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(13, 31, 63, .10);
  outline: none;
}
.card:focus-visible { border-color: var(--primary); }

.card-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mute);
}
.card-title { font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.card-text { font-size: 14px; color: var(--mute); }
.card-cta { margin-top: auto; padding-top: 8px; font-weight: 700; color: var(--primary); }

.foot {
  margin-top: 72px;
  font-size: 12px;
  color: var(--mute);
}

@media (max-width: 640px) {
  .page { padding: 32px 16px 32px; }
  .hero { margin: 48px 0 44px; }
  .tagline { letter-spacing: .18em; }
  .dots-top { --s: 440px; top: -215px; right: -235px; opacity: .6; }
  .dots-bottom { --s: 300px; opacity: .4; }
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}

/* Long-form pages (methodology). */
.prose { max-width: 820px; }
.crumbs { font-size: 13px; color: var(--mute); margin-bottom: 28px; }
.prose a { color: var(--primary); }
.doc-title {
  margin: 28px 0 0;
  font-size: clamp(30px, 6vw, 52px);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--primary);
}
.lead { font-size: 18px; margin: 18px 0 28px; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 40px; }
.toc a {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; padding: 6px 10px; background: var(--surface); border: 1px solid var(--line);
}
.toc a:hover, .toc a:focus-visible { border-color: var(--primary); }
.prose section { scroll-margin-top: 16px; margin: 0 0 44px; }
.prose h2 { font-size: 18px; letter-spacing: .12em; padding-left: 12px; border-left: 5px solid var(--primary); }
.prose h3 { margin: 22px 0 6px; font-size: 16px; font-weight: 700; }
.prose p, .prose li { font-size: 15.5px; }
.prose li { margin: 6px 0; }
.prose table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 14px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prose th { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; background: var(--bg); }
.prose td:first-child { font-weight: 700; white-space: nowrap; }

/* Card with more than one link. */
.card-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: auto; padding-top: 8px; }
.card-links a { font-weight: 700; color: var(--primary); text-decoration: none; }
.card-links a:hover, .card-links a:focus-visible { text-decoration: underline; }
div.card:focus-within { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(13, 31, 63, .10); }

@media (max-width: 640px) {
  .prose table, .prose tbody, .prose tr, .prose td { display: block; width: 100%; }
  .prose thead { display: none; }
  .prose tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
  .prose td { border: 0; padding: 3px 14px; white-space: normal; }
  .prose td:first-child { font-size: 16px; color: var(--primary); }
  .prose td[data-label]:not(:first-child)::before {
    content: attr(data-label) ": "; font-weight: 700; color: var(--ink);
  }
}

/* Research Archive. */
.hero-sm { margin: 40px 0 48px; }
.hero-sm h1 { font-size: clamp(36px, 8vw, 64px); }
.year { margin: 0 0 44px; }
.year h2 { font-size: 20px; letter-spacing: .14em; color: var(--primary); }
.research-card .card-title { font-size: 18px; line-height: 1.3; }
.article-meta { color: var(--mute); font-size: 14px; margin: 14px 0 32px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); background: var(--surface); border: 1px solid var(--line); padding: 2px 8px; }
.article-body { overflow-wrap: anywhere; }
.article-body img { display: block; max-width: 100%; height: auto; margin: 22px auto 6px; border: 1px solid var(--line); background: var(--surface); }
.article-body p > em:only-child { display: block; text-align: center; font-size: 13px; color: var(--mute); }
.article-body h2 { margin-top: 40px; }
.article-body blockquote { margin: 18px 0; padding: 10px 16px; background: var(--surface); border-left: 4px solid var(--primary); }
.article-body blockquote p { margin: 4px 0; }
.article-body pre, .article-body code { font-size: 13px; background: var(--surface); }
.article-body pre { padding: 12px; overflow-x: auto; }
.article-body table { display: block; overflow-x: auto; }
.img-missing {
  display: block; margin: 22px 0; padding: 28px 16px; text-align: center;
  font-size: 13px; color: var(--mute); border: 2px dashed var(--line); background: var(--surface);
}
.article-foot { border-top: 1px solid var(--line); padding-top: 18px; font-size: 13px; }
.section-gap { margin-top: 56px; }

/* Faded thumbnail behind article titles. */
.has-thumb { position: relative; isolation: isolate; overflow: hidden; }
.has-thumb::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--thumb) center / cover no-repeat;
  opacity: .5; filter: saturate(.95);
  transition: opacity .2s ease, transform .3s ease;
}
.research-card.has-thumb::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--surface) 60%, transparent) 60%, color-mix(in srgb, var(--surface) 92%, transparent) 100%);
}
.research-card.has-thumb:hover::before, .research-card.has-thumb:focus-visible::before { opacity: .62; transform: scale(1.03); }
.article-hero.has-thumb { margin: 0 -24px; padding: 28px 24px 4px; border-top: 5px solid var(--primary); }
.article-hero.has-thumb::before { opacity: .48; }
.article-hero.has-thumb::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 40%, var(--bg) 100%);
}
@media (max-width: 640px) { .article-hero.has-thumb { margin: 0 -16px; padding: 22px 16px 4px; } }
@media (prefers-reduced-motion: reduce) { .has-thumb::before { transition: none; } }
.research-card.has-thumb > span { text-shadow: 0 0 6px var(--surface), 0 0 2px var(--surface); }

/* Title-only research cards: thumbnail fills the card, title sits at the bottom. */
.research-card { aspect-ratio: 16 / 10; justify-content: flex-end; }
.research-card .card-title { font-size: 19px; }
.card-date { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.hero h1, .doc-title { text-shadow: 0 0 14px var(--bg), 0 0 6px var(--bg), 0 0 2px var(--bg); }

/* Reading pages (research, methodology): quieter rings that stay clear of the text column. */
.reading .dots-top { --s: clamp(420px, 40vw, 680px); top: calc(var(--s) * -0.46); right: calc(var(--s) * -0.46); opacity: .42; }
.reading .dots-bottom { opacity: .35; }
@media (max-width: 640px) {
  .reading .dots-top { --s: 360px; top: -200px; right: -210px; opacity: .35; }
}

/* Ring motion: a very slow spin everywhere; the homepage also drifts with scroll/pointer
   (assets/rings.js sets --px/--py). Uses the individual rotate/translate properties so the
   two motions don't overwrite each other. Disabled when the visitor prefers reduced motion. */
.dots {
  --r0: 0deg;
  rotate: var(--r0);
  translate: var(--px, 0px) var(--py, 0px);
  will-change: rotate, translate;
  animation: ring-spin 150s linear infinite;
}
.dots-top { --r0: 180deg; }      /* must follow the .dots default above */
.dots-bottom { animation-duration: 120s; animation-direction: reverse; }
@keyframes ring-spin {
  from { rotate: var(--r0); }
  to   { rotate: calc(var(--r0) + 360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .dots { animation: none; translate: none; }
}
.card-links + .card-links-sub { margin-top: 0; padding-top: 8px; gap: 14px; }   /* lines up with the PvE card links */
.card-links-sub a { font-size: 13px; line-height: 25.6px; letter-spacing: .08em; color: var(--mute); }
.card-links-sub a:hover, .card-links-sub a:focus-visible { color: var(--primary); }
/* Dashboard cards: the whole card opens the dashboard (its "Open dashboard" link stretches over
   the card); the other links sit above that layer so they stay clickable. */
div.card { position: relative; cursor: pointer; }
.card-main::after { content: ""; position: absolute; inset: 0; }
div.card .card-links a:not(.card-main) { position: relative; z-index: 1; }