:root {
  --research-black: #0a0a0a;
  --research-white: #ffffff;
  --research-lime: #c9ff45;
  --research-coral: #ff735c;
  --research-cyan: #75dfff;
  --research-yellow: #ffd84d;
  --research-ink-soft: #5f6268;
  --research-shell: 1440px;
  --research-copy: 760px;
  --research-header-height: 72px;
  /* Shared editorial rail: every section kicker, area number, and publication
     number sits in this column, so headings align with the rows beneath them. */
  --research-rail: 180px;
  --research-rail-gap: var(--space-8);
  --research-pub-number: 72px;
  --research-pub-status: 100px;
  --research-pub-icon: 36px;
}

* {
  box-sizing: border-box;
  letter-spacing: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--research-header-height) + var(--space-6));
}

body.research-body {
  --font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Droid Sans Fallback", sans-serif;
  /* JetBrains Mono has no Hangul, so Korean inside kickers and meta rows falls
     through to whatever the OS picks. Name the Korean faces explicitly, after the
     mono faces, so Latin stays monospaced and Hangul matches the body text. */
  --font-mono: "JetBrains Mono", "Noto Sans Mono", ui-monospace, SFMono-Regular,
    "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Droid Sans Fallback", monospace;
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-family);
  font-weight: 500;
}

.research-body a {
  color: inherit;
}

.research-body :is(h1, h2, h3, p, dd, li, figcaption) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.research-shell {
  width: min(100%, var(--research-shell));
  margin: 0 auto;
  padding-inline: var(--space-6);
}

.research-header {
  position: sticky;
  top: 0;
  z-index: 80;
  min-height: var(--research-header-height);
  background: color-mix(in srgb, var(--background) 94%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
}

.research-header__inner {
  min-height: var(--research-header-height);
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  align-items: center;
  gap: var(--space-6);
}

.research-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  width: fit-content;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 650;
}

.research-brand img {
  display: block;
  width: auto;
  height: 22px;
}

.research-brand__divider {
  width: 1px;
  height: 20px;
  background: var(--border-strong);
}

.research-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

.research-nav a {
  min-height: var(--control-h-s);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  text-decoration: none;
  font-size: 0.875rem;
  white-space: nowrap;
}

.research-nav a:hover,
.research-nav a:focus-visible,
.research-nav a[aria-current="page"] {
  color: var(--foreground);
  background: var(--muted);
}

.research-site-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h-s);
  text-decoration: none;
  font-size: 0.875rem;
}

.research-site-link .material-symbols-outlined {
  font-size: 1rem;
}

.research-header__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.research-language {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 104px;
  min-height: var(--control-h-s);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--background);
  color: var(--foreground);
}

.research-language:focus-within {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.research-language > .material-symbols-outlined {
  position: absolute;
  left: var(--space-2);
  z-index: 1;
  font-size: 1rem;
  pointer-events: none;
}

.research-language__select {
  width: 100%;
  min-height: calc(var(--control-h-s) - 2px);
  padding: 0 var(--space-2) 0 30px;
  border: 0;
  border-radius: inherit;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

/* Reading progress. Rides the header's bottom border on article pages; the fill
   is driven by --research-progress (0-1), set from research-article.js. It is
   decorative and mirrors the scrollbar, so it stays out of the a11y tree. */
.research-progress {
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}

.research-progress__bar {
  display: block;
  height: 100%;
  background: var(--foreground);
  transform: scaleX(var(--research-progress, 0));
  transform-origin: 0 50%;
}

.research-hero {
  position: relative;
  height: 76svh;
  min-height: 560px;
  max-height: 760px;
  overflow: hidden;
  background: var(--research-black);
  color: var(--research-white);
}

.research-hero__city {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: 74%;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0.82;
  pointer-events: none;
}

/* Keeps the lede and the scope index legible over the skyline. */
.research-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 46%;
  background: linear-gradient(
    to top,
    var(--research-black) 0%,
    color-mix(in srgb, var(--research-black) 82%, transparent) 34%,
    transparent 100%
  );
  pointer-events: none;
}

.research-hero__grid {
  position: absolute;
  inset: 0 auto 0 50%;
  width: min(100%, var(--research-shell));
  transform: translateX(-50%);
  border-inline: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.research-hero__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: 56px 40px;
}

.research-eyebrow,
.research-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
}

.research-hero h1 {
  max-width: 900px;
  margin: var(--space-4) 0 0;
  font-size: 5rem;
  font-weight: 560;
  line-height: 0.98;
}

.research-hero__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-8);
}

.research-hero__lede {
  max-width: 650px;
  margin: 0;
  font-size: 1.45rem;
  font-weight: 520;
  line-height: 1.45;
}

.research-hero__index {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  text-align: right;
  color: rgba(255, 255, 255, 0.72);
}

.research-intro {
  padding-block: 96px;
  border-bottom: 1px solid var(--border-strong);
}

.research-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
  gap: 10%;
  align-items: start;
}

.research-intro h2 {
  max-width: 900px;
  margin: 0;
  font-size: 3.5rem;
  font-weight: 540;
  line-height: 1.16;
}

.research-intro__copy {
  margin: var(--space-2) 0 0;
  color: var(--research-ink-soft);
  font-size: 1.05rem;
  line-height: 1.75;
}

.research-section {
  padding-block: 96px;
}

.research-section + .research-section {
  border-top: 1px solid var(--border-strong);
}

.research-section__head {
  display: grid;
  grid-template-columns: var(--research-rail) minmax(0, 1fr);
  gap: var(--research-rail-gap);
  align-items: start;
  margin-bottom: 48px;
}

.research-section__head h2 {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 560;
  line-height: 1.2;
}

.research-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  min-height: 520px;
  background: var(--research-lime);
  color: #0a0a0a;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.research-feature__copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px;
}

.research-feature__copy h3 {
  max-width: 650px;
  margin: var(--space-8) 0 var(--space-5);
  font-size: 3rem;
  font-weight: 560;
  line-height: 1.08;
}

.research-feature__copy p {
  max-width: 570px;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.7;
}

.research-feature__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-8);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.research-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  margin-top: var(--space-10);
  text-decoration: none;
  font-weight: 650;
}

.research-arrow-link:hover span:first-child,
.research-arrow-link:focus-visible span:first-child {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.research-arrow-link .material-symbols-outlined {
  font-size: 1.15rem;
}

.research-feature__visual {
  position: relative;
  min-height: 360px;
  padding: 48px;
  background: #111215;
  color: #ffffff;
}

.research-feature__axis {
  height: 100%;
  min-height: 420px;
  display: grid;
  grid-template-columns: repeat(8, minmax(18px, 1fr));
  align-items: end;
  gap: var(--space-3);
  border-left: 1px solid rgba(255, 255, 255, 0.34);
  border-bottom: 1px solid rgba(255, 255, 255, 0.34);
  padding: var(--space-10) var(--space-5) var(--space-5);
}

.research-feature__axis span {
  display: block;
  height: var(--bar-height);
  min-height: 12px;
  background: var(--bar-color, var(--research-coral));
}

.research-feature__visual-label {
  position: absolute;
  inset: var(--space-5) var(--space-6) auto;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.72);
}

.research-areas {
  border-top: 1px solid var(--border-strong);
}

/* Top-aligned so the rail number shares a top edge with the heading it labels,
   the same relationship the section head above it uses. Centering the row
   against a fixed height left the number stranded ~35px above its own title. */
.research-area {
  display: grid;
  grid-template-columns: var(--research-rail) minmax(220px, 0.7fr) minmax(280px, 1fr) auto;
  gap: var(--research-rail-gap);
  align-items: start;
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--border-strong);
}

.research-area__number {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.research-area h3 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 580;
}

.research-area p {
  margin: 0;
  color: var(--research-ink-soft);
  line-height: 1.7;
}

.research-area__link {
  min-width: 42px;
  min-height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  text-decoration: none;
}

.research-area__link:hover,
.research-area__link:focus-visible {
  background: var(--foreground);
  color: var(--background);
}

.research-publication-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-5);
}

.research-filters {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--muted);
  border-radius: var(--radius-md);
}

.research-filter {
  min-height: var(--control-h-s);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.research-filter:hover,
.research-filter:focus-visible {
  color: var(--foreground);
}

.research-filter[aria-pressed="true"] {
  background: var(--background);
  color: var(--foreground);
  box-shadow: 0 0 0 1px var(--border);
}

.research-result-count {
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.research-publications {
  border-top: 1px solid var(--border-strong);
}

.research-publication {
  display: grid;
  /* Number + type share the rail, so the title lines up with the section heading. */
  grid-template-columns:
    var(--research-pub-number)
    calc(var(--research-rail) - var(--research-pub-number) - var(--research-rail-gap))
    minmax(0, 1fr)
    var(--research-pub-status)
    var(--research-pub-icon);
  gap: var(--research-rail-gap);
  align-items: center;
  min-height: 116px;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--border-strong);
}

a.research-publication {
  text-decoration: none;
}

a.research-publication:hover .research-publication__title,
a.research-publication:focus-visible .research-publication__title {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.research-publication__number,
.research-publication__type,
.research-publication__status {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted-foreground);
}

.research-publication__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 590;
  line-height: 1.35;
}

.research-publication__summary {
  margin: var(--space-2) 0 0;
  color: var(--research-ink-soft);
  font-size: 0.9rem;
  line-height: 1.55;
}

.research-publication__icon {
  justify-self: end;
  font-size: 1.15rem;
}

.research-publication[hidden] {
  display: none;
}

.research-principles {
  background: var(--research-black);
  color: var(--research-white);
}

.research-principles__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 10%;
  padding-block: 96px;
}

.research-principles h2 {
  margin: var(--space-5) 0 0;
  font-size: 3rem;
  font-weight: 540;
  line-height: 1.12;
}

.research-principle-list {
  margin: 0;
}

.research-principle-list div {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.research-principle-list div:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.research-principle-list dt {
  color: var(--research-lime);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.research-principle-list dd {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.65;
}

.research-footer {
  padding-block: 64px 32px;
  background: var(--background-subtle);
  border-top: 1px solid var(--border);
}

.research-footer__top {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: var(--space-8);
  align-items: start;
}

.research-footer__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 620;
}

.research-footer__copy {
  max-width: 560px;
  margin: var(--space-3) 0 0;
  color: var(--muted-foreground);
  line-height: 1.65;
}

.research-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: var(--space-3) var(--space-8);
}

.research-footer__nav a {
  text-decoration: none;
  font-size: 0.9rem;
}

.research-footer__nav a:hover,
.research-footer__nav a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.research-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: 64px;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

/* Article */
/* Sized by its own padding. A fixed min-height left a screen's worth of empty
   cyan above the title, which cost the most on phones. */
.research-article-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: end;
  padding-block: 56px 64px;
  background: var(--research-cyan);
  color: #0a0a0a;
}

.research-article-hero::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 34%;
  background: rgba(10, 10, 10, 0.08);
  border-left: 1px solid rgba(10, 10, 10, 0.2);
  clip-path: polygon(26% 0, 100% 0, 100% 100%, 0 100%);
}

.research-article-hero__inner {
  position: relative;
  z-index: 1;
}

.research-article-hero__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-h-s);
  margin-bottom: var(--space-5);
  color: color-mix(in srgb, #0a0a0a 72%, transparent);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.research-article-hero__back:hover,
.research-article-hero__back:focus-visible {
  color: #0a0a0a;
}

.research-article-hero__back .material-symbols-outlined {
  font-size: 1rem;
}

.research-article-hero h1 {
  max-width: 980px;
  margin: var(--space-6) 0;
  font-size: 4rem;
  font-weight: 560;
  line-height: 1.08;
}

.research-article-hero__lede {
  max-width: 720px;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.65;
}

.research-article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-8);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.research-article-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, var(--research-copy));
  gap: 8%;
  justify-content: center;
  padding-block: 88px 120px;
}

.research-article-toc {
  position: sticky;
  top: calc(var(--research-header-height) + var(--space-8));
  align-self: start;
}

.research-article-toc p {
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted-foreground);
}

.research-article-toc nav {
  display: grid;
  gap: var(--space-2);
}

.research-article-toc a {
  position: relative;
  padding-block: var(--space-1);
  padding-left: var(--space-4);
  color: var(--muted-foreground);
  text-decoration: none;
  font-size: 0.88rem;
  line-height: 1.45;
}

/* Marker rail for the section the reader is currently in. */
.research-article-toc a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 2px;
  height: 0;
  background: var(--foreground);
  transform: translateY(-50%);
  transition: height 160ms ease;
}

.research-article-toc a:hover,
.research-article-toc a:focus-visible {
  color: var(--foreground);
}

.research-article-toc a[aria-current="true"] {
  color: var(--foreground);
  font-weight: 620;
}

.research-article-toc a[aria-current="true"]::before {
  height: 100%;
}

.research-article {
  min-width: 0;
}

.research-article__standfirst {
  margin: 0 0 72px;
  font-size: 1.55rem;
  font-weight: 540;
  line-height: 1.55;
}

.research-article section {
  padding-block: 56px;
  border-top: 1px solid var(--border-strong);
}

.research-article section:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.research-article h2 {
  max-width: 680px;
  margin: 0 0 var(--space-6);
  font-size: 2.2rem;
  font-weight: 580;
  line-height: 1.2;
}

.research-article h3 {
  margin: var(--space-10) 0 var(--space-4);
  font-size: 1.3rem;
  font-weight: 620;
}

.research-article p,
.research-article li {
  font-size: 1.02rem;
  line-height: 1.85;
}

.research-article p {
  margin: 0 0 var(--space-5);
}

.research-article ul,
.research-article ol {
  margin: var(--space-5) 0;
  padding-left: 1.35rem;
}

.research-article li + li {
  margin-top: var(--space-3);
}

/* Interactive pipeline. A processing chain is hard to follow in prose because
   each stage only makes sense next to the one before it. Built as a tablist so
   it is keyboard-operable and degrades to a readable list without JS: every
   panel is visible until the script marks the inactive ones hidden. */
.research-pipeline {
  margin: var(--space-8) 0;
  border-top: 1px solid var(--foreground);
  border-bottom: 1px solid var(--border-strong);
}

.research-pipeline__track {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-4) 0;
  list-style: none;
}

.research-pipeline__track li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.research-pipeline__track li::after {
  content: "→";
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.research-pipeline__track li:last-child::after {
  content: none;
}

.research-pipeline__step {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--background);
  color: var(--muted-foreground);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.research-pipeline__step:hover {
  color: var(--foreground);
  border-color: var(--foreground);
}

.research-pipeline__step[aria-selected="true"] {
  background: var(--foreground);
  border-color: var(--foreground);
  color: var(--background);
}

.research-pipeline__step-no {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  opacity: 0.7;
}

.research-pipeline__panel {
  padding: var(--space-6) 0 var(--space-8);
}

.research-pipeline__panel[hidden] {
  display: none;
}

.research-pipeline__panel h3 {
  margin: 0 0 var(--space-3);
  font-size: 1.15rem;
}

.research-pipeline__panel p {
  margin: 0;
  color: var(--research-ink-soft);
}

/* The whole point of the component: what each stage does to the volume. */
.research-pipeline__figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.research-pipeline__value {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.research-pipeline__unit {
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .research-pipeline__track li::after {
    content: none;
  }

  .research-pipeline__step {
    font-size: 0.8rem;
  }
}

/* Shared analysis figures. These keep data lineage, quantitative comparisons,
   and the source note in one semantic figure without turning article sections
   into a grid of decorative cards. */
.research-analysis-figure {
  margin: var(--space-10) 0;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--foreground);
  border-bottom: 1px solid var(--border-strong);
}

.research-analysis-figure__header {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.research-analysis-figure__eyebrow {
  margin: 0;
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
}

.research-analysis-figure h3 {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.3;
}

.research-analysis-figure__header > p:last-child {
  max-width: 680px;
  margin: 0;
  color: var(--research-ink-soft);
  font-size: 0.92rem;
  line-height: 1.65;
}

.research-analysis-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-strong);
  list-style: none;
}

.research-analysis-flow li,
.research-analysis-flow li + li {
  min-width: 0;
  min-height: 142px;
  margin: 0;
  padding: var(--space-5);
  border-right: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}

.research-analysis-flow li:nth-child(3n) {
  border-right: 0;
}

.research-analysis-flow li:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.research-analysis-flow__number {
  display: block;
  margin-bottom: var(--space-6);
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.research-analysis-flow strong {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 0.95rem;
  line-height: 1.4;
}

.research-analysis-flow li > span:last-child {
  display: block;
  color: var(--research-ink-soft);
  font-size: 0.8rem;
  line-height: 1.55;
}

.research-analysis-figure figcaption {
  margin-top: var(--space-5);
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.65;
}

.research-chart {
  display: grid;
  gap: var(--space-6);
}

.research-chart-metric {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.research-chart-metric:first-child {
  padding-top: 0;
  border-top: 0;
}

.research-chart-metric__name {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 620;
  line-height: 1.45;
}

.research-chart-bar {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 74px;
  align-items: center;
  gap: var(--space-3);
}

.research-chart-bar__label,
.research-chart-bar__value {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.research-chart-bar__value {
  text-align: right;
}

.research-chart-bar__track,
.research-ranked-bar__track {
  position: relative;
  height: 12px;
  overflow: hidden;
  background: var(--muted);
}

.research-chart-bar__fill,
.research-ranked-bar__fill {
  display: block;
  width: var(--bar);
  min-width: 2px;
  height: 100%;
  background: var(--foreground);
}

.research-chart-bar__fill--baseline {
  background: var(--research-coral);
}

.research-chart-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-strong);
}

.research-chart-callout strong {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
}

.research-chart-callout span {
  color: var(--muted-foreground);
  font-size: 0.82rem;
}

.research-ranked-bars {
  display: grid;
  gap: var(--space-3);
}

.research-ranked-bar {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 62px;
  align-items: center;
  gap: var(--space-3);
}

.research-ranked-bar__label {
  font-size: 0.82rem;
  font-weight: 620;
}

.research-ranked-bar__value {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.research-ranked-bar__fill {
  background: var(--research-cyan);
}

.research-chart-axis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: var(--space-2) 62px 0 96px;
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: 0.65rem;
}

.research-chart-axis span:not(:first-child):not(:last-child) {
  text-align: center;
}

.research-chart-axis span:last-child {
  text-align: right;
}

/* Signed changes need a visible zero line. The track is split into equal
   negative and positive halves so a population gain cannot look larger simply
   because losses use a different scale. */
.research-delta-bars {
  display: grid;
  gap: var(--space-3);
}

.research-delta-bar {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 142px;
  align-items: center;
  gap: var(--space-3);
}

.research-delta-bar__label {
  font-size: 0.82rem;
  font-weight: 620;
}

.research-delta-bar__track {
  position: relative;
  height: 14px;
  background: var(--muted);
}

.research-delta-bar__track::after {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 50%;
  width: 1px;
  background: var(--foreground);
  content: "";
}

.research-delta-bar__fill {
  position: absolute;
  top: 0;
  width: var(--delta);
  height: 100%;
}

.research-delta-bar__fill--positive {
  left: 50%;
  background: var(--research-cyan);
}

.research-delta-bar__fill--negative {
  right: 50%;
  background: var(--research-coral);
}

.research-delta-bar__value {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.research-delta-axis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: var(--space-2) 142px 0 96px;
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: 0.65rem;
}

.research-delta-axis span:nth-child(2) {
  text-align: center;
}

.research-delta-axis span:last-child {
  text-align: right;
}

@media (max-width: 720px) {
  .research-analysis-flow {
    grid-template-columns: 1fr;
  }

  .research-analysis-flow li,
  .research-analysis-flow li + li,
  .research-analysis-flow li:nth-child(3n),
  .research-analysis-flow li:nth-last-child(-n + 3) {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--border-strong);
  }

  .research-analysis-flow li:last-child {
    border-bottom: 0;
  }

  .research-analysis-flow__number {
    margin-bottom: var(--space-3);
  }

  .research-chart-bar {
    grid-template-columns: 32px minmax(0, 1fr) 64px;
    gap: var(--space-2);
  }

  .research-ranked-bar {
    grid-template-columns: 68px minmax(0, 1fr) 54px;
    gap: var(--space-2);
  }

  .research-chart-axis {
    margin-right: 54px;
    margin-left: 76px;
  }

  .research-delta-bar {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: var(--space-2);
  }

  .research-delta-bar__value {
    grid-column: 2;
    margin-top: calc(-1 * var(--space-1));
  }

  .research-delta-axis {
    margin-right: 0;
    margin-left: 76px;
  }
}

/* Data tables. Reports are mostly evidence, so the table is a first-class
   article element rather than a one-off. Wrap in .research-table-scroll so a
   wide table scrolls inside itself instead of widening the page. */
.research-table-scroll {
  margin: var(--space-8) 0;
  overflow-x: auto;
}

.research-article table {
  width: 100%;
  border-collapse: collapse;
}

.research-article caption {
  margin-bottom: var(--space-4);
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-align: left;
  text-transform: uppercase;
}

.research-article th,
.research-article td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-strong);
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.research-article th:first-child,
.research-article td:first-child {
  padding-left: 0;
}

.research-article th:last-child,
.research-article td:last-child {
  padding-right: 0;
}

.research-article thead th {
  border-bottom-color: var(--foreground);
  font-weight: 620;
  white-space: nowrap;
}

.research-article tbody th {
  color: var(--muted-foreground);
  font-weight: 500;
  white-space: nowrap;
}

.research-article .research-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* No bottom rule: as the last child of a section it sat a hair above the next
   section's top border and read as a double line. */
.research-pullquote {
  margin: var(--space-10) 0 0;
  padding: var(--space-8) 0 0;
  border-top: 3px solid var(--foreground);
  font-size: 1.75rem;
  font-weight: 560;
  line-height: 1.45;
}

.research-pullquote:not(:last-child) {
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border-strong);
}

.research-formula {
  margin: var(--space-8) 0;
  padding: var(--space-6);
  overflow-x: auto;
  background: var(--research-black);
  color: var(--research-white);
  border-radius: var(--radius-sm);
}

.research-formula p {
  min-width: 560px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.8;
}

.research-method-steps {
  margin: var(--space-8) 0;
  border-top: 1px solid var(--border-strong);
}

.research-method-step {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--border-strong);
}

.research-method-step__number {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.research-method-step h3 {
  margin: 0 0 var(--space-2);
}

.research-method-step p {
  margin: 0;
  color: var(--research-ink-soft);
}

.research-note {
  margin: var(--space-8) 0;
  padding: var(--space-6);
  background: var(--muted);
  border-left: 4px solid var(--research-coral);
}

.research-note strong {
  display: block;
  margin-bottom: var(--space-2);
}

.research-note p:last-child {
  margin-bottom: 0;
}

.research-article-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.research-article-link {
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.research-article-link:hover,
.research-article-link:focus-visible {
  background: var(--muted);
}

.research-article-link span:first-child {
  font-size: 1.05rem;
  font-weight: 620;
}

.research-article-link span:last-child {
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.research-article-footnav {
  padding-block: 56px;
  background: var(--research-lime);
  color: #0a0a0a;
}

.research-article-footnav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-8);
  text-decoration: none;
}

.research-article-footnav span:first-child {
  font-size: 2rem;
  font-weight: 580;
}

.research-article-footnav .material-symbols-outlined {
  font-size: 2rem;
}

@media (max-width: 1024px) {
  :root {
    --research-header-height: 112px;
    --research-rail: 120px;
    --research-rail-gap: var(--space-5);
    --research-pub-number: 48px;
    --research-pub-status: 80px;
    --research-pub-icon: 28px;
  }

  .research-shell {
    padding-inline: var(--space-5);
  }

  .research-header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-3);
    padding-block: var(--space-3) var(--space-2);
  }

  /* The nav spans the full width on its own row. Place the brand and action
     group explicitly so the nav cannot strand the controls on a third row. */
  .research-brand {
    grid-row: 1;
    grid-column: 1;
  }

  .research-header__actions {
    grid-row: 1;
    grid-column: 2;
  }

  .research-nav {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .research-nav::-webkit-scrollbar {
    display: none;
  }

  .research-hero {
    height: 72svh;
    min-height: 520px;
  }

  .research-hero h1 {
    font-size: 4rem;
  }

  .research-intro__grid,
  .research-principles__grid {
    gap: var(--space-12);
  }

  .research-feature {
    grid-template-columns: 1fr;
  }

  .research-feature__visual {
    min-height: 420px;
  }

  .research-feature__axis {
    min-height: 330px;
  }

  .research-area {
    grid-template-columns: var(--research-rail) minmax(200px, 0.65fr) minmax(240px, 1fr) auto;
  }

  .research-article-layout {
    grid-template-columns: 1fr;
    row-gap: var(--space-8);
    padding-top: var(--space-10);
  }

  .research-article-toc {
    position: static;
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--border);
  }

  .research-article-toc nav {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
  }

  .research-article-toc a {
    flex: 0 0 auto;
  }
}

@media (max-width: 720px) {
  .research-shell {
    padding-inline: var(--space-4);
  }

  /* Only the arrow survives at this width, so pad it back up to a usable tap
     target instead of leaving a 16px hit area. */
  .research-site-link span:first-child {
    display: none;
  }

  .research-site-link {
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-right: calc(var(--space-2) * -1);
  }

  .research-header__actions {
    gap: var(--space-1);
  }

  .research-language {
    width: 96px;
  }

  .research-hero {
    min-height: 480px;
    max-height: 620px;
  }

  /* Contained, the panorama shrinks to a thin strip and leaves the hero mostly
     empty at this width. Fill the frame and crop instead. */
  .research-hero__city {
    height: 58%;
    object-fit: cover;
  }

  .research-hero__inner {
    padding-block: var(--space-8) var(--space-6);
  }

  .research-hero h1 {
    font-size: 3.4rem;
  }

  .research-hero__footer {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .research-hero__lede {
    font-size: 1.15rem;
  }

  .research-hero__index {
    display: none;
  }

  .research-intro,
  .research-section {
    padding-block: 64px;
  }

  .research-intro__grid,
  .research-principles__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .research-intro h2 {
    font-size: 2.35rem;
  }

  .research-section__head {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
  }

  .research-section__head h2 {
    font-size: 1.9rem;
  }

  .research-feature__copy,
  .research-feature__visual {
    padding: var(--space-6);
  }

  .research-feature__copy h3 {
    font-size: 2.15rem;
  }

  .research-feature__axis {
    min-height: 260px;
    gap: var(--space-2);
  }

  .research-area {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: var(--space-4);
  }

  .research-area__number {
    grid-row: 1 / 3;
  }

  .research-area p {
    grid-column: 2 / -1;
  }

  /* Placed explicitly: auto-placement can't move back up to the third column
     once the description has spanned row 2, so the arrow dropped to a row of
     its own and left the column this grid reserves for it empty. */
  .research-area__link {
    grid-column: 3;
    grid-row: 1;
  }

  .research-publication-tools {
    align-items: flex-end;
    flex-direction: column;
  }

  .research-filters {
    width: 100%;
    overflow-x: auto;
  }

  .research-filter {
    flex: 1 0 auto;
  }

  .research-publication {
    grid-template-columns: 42px minmax(0, 1fr) 28px;
    gap: var(--space-3);
    align-items: start;
  }

  .research-publication__type,
  .research-publication__status {
    grid-column: 2;
  }

  .research-publication__content {
    grid-column: 2;
    grid-row: 2;
  }

  .research-publication__type {
    grid-row: 1;
  }

  .research-publication__status {
    grid-row: 3;
  }

  .research-publication__icon {
    grid-column: 3;
    grid-row: 1 / 4;
    align-self: center;
  }

  .research-principles h2 {
    font-size: 2.35rem;
  }

  .research-footer__top,
  .research-footer__bottom {
    display: grid;
    grid-template-columns: 1fr;
  }

  .research-footer__nav {
    margin-top: var(--space-5);
  }

  .research-article-hero {
    padding-block: var(--space-8) var(--space-10);
  }

  /* The angled panel reads as a stray vertical band once the hero is this
     narrow. */
  .research-article-hero::after {
    display: none;
  }

  .research-article-hero h1 {
    font-size: 2.4rem;
  }

  .research-article-hero__lede {
    font-size: 1.05rem;
  }

  /* Let the formula wrap rather than making every phone reader swipe it. */
  .research-formula p {
    min-width: 0;
  }

  .research-article-layout {
    padding-block: var(--space-8) 80px;
  }

  .research-article__standfirst {
    margin-bottom: 56px;
    font-size: 1.3rem;
  }

  .research-article h2 {
    font-size: 1.8rem;
  }

  .research-pullquote {
    font-size: 1.4rem;
  }

  .research-formula {
    padding: var(--space-5);
  }

  .research-article-links {
    grid-template-columns: 1fr;
  }

  .research-article-footnav span:first-child {
    font-size: 1.55rem;
  }
}

@media (max-width: 480px) {
  .research-brand__divider,
  .research-brand > span:last-child {
    display: none;
  }
}

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

  .research-article-toc a::before {
    transition: none;
  }
}