/* research.css — layout and components for /research/* posts.
   Loaded after the designers' CSS and omko-overrides.css, so the fonts,
   colour variables, footer and large-screen root scaling all come from the
   homepage; everything here is scoped under .research so the homepage is
   untouched. Sizes are in rem, so posts scale with the root above 1920px
   exactly like the homepage does. */

.research {
  --r-ink: var(--base--black);
  --r-ink-2: var(--base--grey);
  --r-accent: var(--base--green);
  --r-surface: #f6f1e7;
  --r-rule: #e4ddd0;
  --r-text: 46rem;     /* 736px: text, tables and figures share one column */
  --r-wide: 46rem;
  --r-gutter: 1.25rem;
  --r-mono: "Gt America Mono", ui-monospace, Menlo, monospace;
  --r-serif: "Reckless S Book", Georgia, serif;

  color: var(--r-ink);
  letter-spacing: -.01em;
}

/* The homepage scales its root font above 1920px so the hero fills big
   screens. Reading pages should not: text would reach 27px at 2560px. */
@media screen and (min-width: 1920px) {
  html:has(body.research) { font-size: 16px; }
}

/* ---------- header ---------- */

.research .r-nav {
  padding: 1.25rem 2rem;
  border-bottom: 1px solid var(--r-rule);
}
.research .r-nav .nav_container { gap: 1rem; justify-content: space-between; }
.research .r-nav .nav_brand { display: block; }
.research .r-nav-label {
  font-family: var(--r-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--r-ink-2);
}

/* ---------- page grid: margin TOC | article | margin ---------- */

.research .r-layout {
  display: grid;
  grid-template-columns: 1fr min(var(--r-wide), 100% - 2 * var(--r-gutter)) 1fr;
  padding: 0 0 2rem;
}
.research .r-article { grid-column: 2; min-width: 0; }
.research .r-toc { grid-column: 1; grid-row: 1; display: none; }

/* Everything in the article sits in the reading column; .r-wide breaks out. */
.research .r-article > * {
  max-width: var(--r-text);
  margin-left: auto;
  margin-right: auto;
}
/* Figures, tables and the key strip all share one wide measure; prose,
   code and callouts keep the narrower reading column. */
.research .r-article > .r-wide,
.research .r-article > .r-table { max-width: var(--r-wide); }

/* ---------- title block ---------- */

.research .r-head { padding: 5rem 0 2.5rem; }
.research .r-article .r-eyebrow,
.research .r-byline,
.research .r-tags {
  font-family: var(--r-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--r-ink-2);
}
.research .r-article .r-eyebrow { margin: 0 0 1.5rem; line-height: 1.4; }
.research .r-eyebrow a { color: inherit; text-decoration: none; }
.research h1 {
  font-family: var(--r-serif);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--r-ink);
  text-align: left;
  margin: 0 0 1.5rem;
}
.research .r-article .r-dek {
  font-size: 1.1875rem;
  line-height: 1.45;
  color: var(--r-ink-2);
  margin: 0 0 2rem;
}
.research .r-byline {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--r-ink);
  border-bottom: 1px solid var(--r-rule);
}
.research .r-byline b { color: var(--r-ink); font-weight: 400; }
.research .r-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.research .r-tags span {
  border: 1px solid var(--r-rule);
  border-radius: 999px;
  padding: .25rem .625rem;
}

/* ---------- key results ---------- */

.research .r-key {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  border-top: 1px solid var(--r-rule);
  border-left: 1px solid var(--r-rule);
  margin: 0 auto 3.5rem;
}
/* Six cards read better as two rows of three than as five plus one. */
.research .r-key:has(> :nth-child(6)) { grid-template-columns: repeat(3, 1fr); }
.research .r-key div {
  padding: 1.25rem 1.25rem 1.125rem;
  border-right: 1px solid var(--r-rule);
  border-bottom: 1px solid var(--r-rule);
}
.research .r-key b {
  display: block;
  font-family: var(--r-serif);
  font-weight: 400;
  font-size: 1.875rem;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--r-accent);
  margin-bottom: .5rem;
  font-variant-numeric: tabular-nums;
}
.research .r-key span {
  display: block;
  font-family: var(--r-mono);
  font-size: .75rem;
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--r-ink-2);
}

/* ---------- body text ---------- */

.research .r-article p,
.research .r-article li {
  font-size: 1.0625rem;
  line-height: 1.65;
}
.research .r-article p { margin-top: 0; margin-bottom: 1.25rem; }
.research .r-article ul,
.research .r-article ol { padding-left: 1.5rem; margin-top: 0; margin-bottom: 1.25rem; }
.research .r-article li { margin-bottom: .5rem; }
.research .r-article strong { font-weight: 500; color: var(--r-ink); }
.research .r-article a { color: var(--r-accent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
.research .r-lede { font-size: 1.125rem !important; }

.research h2 {
  text-align: left;
  font-family: var(--r-serif);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--r-ink);
  margin-top: 4rem;
  margin-bottom: 1.25rem;
  scroll-margin-top: 2rem;
}
.research h2 .r-num {
  display: block;
  font-family: var(--r-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--r-accent);
  margin-bottom: .75rem;
}
.research h3 {
  text-align: left;
  font-family: var(--r-serif);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--r-ink);
  margin-top: 2.5rem;
  margin-bottom: .75rem;
  scroll-margin-top: 2rem;
}

.research code {
  font-family: var(--r-mono);
  font-size: .82em;
  background: var(--r-surface);
  padding: .1em .35em;
  border-radius: 3px;
  overflow-wrap: anywhere;
}
.research pre {
  font-family: var(--r-mono);
  font-size: .8125rem;
  line-height: 1.6;
  background: var(--r-surface);
  border: 1px solid var(--r-rule);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  white-space: pre;
  margin-bottom: 1.5rem;
}
.research pre code { background: none; padding: 0; font-size: inherit; overflow-wrap: normal; }

/* ---------- figures ---------- */

.research figure { margin-top: 2.5rem; margin-bottom: 2.5rem; }
.research figure img,
.research figure svg { display: block; width: 100%; height: auto; }
.research figure .r-card {
  background: #fff;
  border: 1px solid var(--r-rule);
  padding: 1.25rem;
}
.research figcaption {
  text-align: left;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--r-ink-2);
  margin-top: .875rem;
  max-width: var(--r-text);
}
.research .r-label {
  font-family: var(--r-mono);
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--r-ink);
  margin-right: .375rem;
}

/* ---------- tables ---------- */

.research .r-table { margin-top: 2rem; margin-bottom: 2.5rem; }
.research .r-table .r-scroll { overflow-x: auto; }
.research table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  line-height: 1.45;
}
.research th,
.research td {
  text-align: left;
  vertical-align: top;
  padding: .625rem .75rem;
  border-bottom: 1px solid var(--r-rule);
}
.research th:first-child,
.research td:first-child { padding-left: 0; }
.research th {
  font-family: var(--r-mono);
  font-weight: 400;
  font-size: .6875rem;
  line-height: 1.35;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--r-ink-2);
  border-bottom: 1px solid var(--r-ink);
  vertical-align: bottom;
}
.research td.n,
.research th.n { text-align: right; }
.research td.n { font-family: var(--r-mono); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.research tr.r-best td { background: #2c795510; }
.research .r-table figcaption,
.research .r-table .r-caption {
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--r-ink-2);
  margin: 0 0 .75rem;
}

/* ---------- callouts ---------- */

.research .r-callout {
  border-left: 3px solid var(--r-accent);
  background: var(--r-surface);
  padding: 1rem 1.25rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.research .r-callout.is-caveat { border-left-color: var(--base--pink); }
.research .r-callout p:last-child { margin-bottom: 0; }
.research .r-findings { margin-top: 0; margin-bottom: 3rem; padding: 1.25rem 1.5rem; }
.research .r-findings ul { margin-bottom: 0; }
.research .r-findings li:last-child { margin-bottom: 0; }
.research .r-callout .r-label { display: block; margin-bottom: .5rem; }

/* ---------- end matter ---------- */

.research .r-end {
  margin-top: 5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--r-ink);
}
.research .r-end h2 { font-size: 1.375rem; margin-top: 0; }
.research .r-authors {
  list-style: none;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem 2rem;
  margin-bottom: 3rem !important;
}
.research .r-authors li { margin: 0 !important; }
.research .r-authors a { display: flex; align-items: center; gap: 1rem; color: var(--r-ink) !important; text-decoration: none !important; }
.research .r-avatar {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: var(--r-surface);
  border: 1px solid var(--r-rule);
  font-family: var(--r-mono);
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--r-accent);
}
.research .r-who b { display: block; font-weight: 400; font-size: 1.0625rem; line-height: 1.3; }
.research .r-who span { display: block; font-size: .875rem; color: var(--r-ink-2); }
.research .r-authors a:hover b { text-decoration: underline; text-underline-offset: .2em; }
.research .r-by a { color: var(--r-ink); text-decoration: none; }
.research .r-by a:hover { text-decoration: underline; text-underline-offset: .2em; }
.research .r-cite { position: relative; }
.research .r-cite pre { margin-bottom: 0; padding-right: 5.5rem; white-space: pre-wrap; }
.research .r-copy {
  position: absolute;
  top: .75rem;
  right: .75rem;
  font-family: var(--r-mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--r-ink);
  background: var(--base--cream);
  border: 1px solid var(--r-rule);
  padding: .375rem .625rem;
  cursor: pointer;
}
.research .r-copy:hover { border-color: var(--r-ink); }

/* ---------- table of contents (wide screens only) ---------- */

@media screen and (min-width: 1280px) {
  .research .r-toc { display: block; padding: 0 2.5rem 0 2rem; }
  .research .r-toc nav {
    position: sticky;
    top: 2.5rem;
    max-width: 14rem;
    margin-left: auto;
    margin-top: 17rem;
  }
}
.research .r-toc .r-label { display: block; margin-bottom: .75rem; font-size: .6875rem; color: #9a958c; }
.research .r-toc ol { list-style: none; padding: 0; margin: 0; }
.research .r-toc a {
  display: block;
  padding: .25rem 0;
  font-size: .8125rem;
  line-height: 1.4;
  color: #9a958c;
  text-decoration: none;
}
.research .r-toc a:hover { color: var(--r-ink); }
.research .r-toc a.is-active { color: var(--r-ink); }

/* ---------- small screens ---------- */

@media screen and (max-width: 767px) {
  .research .r-nav { padding: 1rem var(--r-gutter); }
  .research .r-head { padding-top: 3rem; }
  .research .r-article .r-dek { font-size: 1.125rem; }
  .research .r-key,
  .research .r-key:has(> :nth-child(6)) { grid-template-columns: 1fr 1fr; }
  .research .r-key div { padding: 1rem; }
  .research .r-key b { font-size: 1.75rem; }
  .research h2 { font-size: 1.625rem; margin-top: 3rem; }
  .research .r-article p,
  .research .r-article li { font-size: 1.0625rem; }
  .research figure .r-card { padding: .75rem; }
}

/* ---------- inline SVG charts ---------- */

.research .r-chart svg { overflow: visible; }
/* Value labels sit over the gridlines; a halo in the card colour keeps them legible. */
.research .r-chart svg text { paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.research .r-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-top: 1rem;
  font-family: var(--r-mono);
  font-size: .75rem;
  line-height: 1.4;
  color: var(--r-ink-2);
}
.research .r-legend i {
  display: inline-block;
  width: .875rem;
  height: .875rem;
  vertical-align: -.125rem;
  margin-right: .5rem;
  box-shadow: inset 0 0 0 1px #0000001a;
}
/* On a phone, charts keep a readable size and scroll sideways instead of shrinking. */
@media screen and (max-width: 767px) {
  .research .r-chart { overflow-x: auto; }
  .research .r-chart svg { min-width: 40rem; }
}

/* ---------- link to the full technical report ---------- */

.research .r-paper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--r-ink);
  padding: .875rem 1.125rem;
  margin: 0 auto 3rem;
  font-family: var(--r-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--r-ink) !important;
  text-decoration: none !important;
  transition: background-color .2s ease;
}
.research .r-paper::after { content: "↓"; font-size: 1rem; }
.research .r-paper span { color: var(--r-ink-2); margin-left: auto; }
.research .r-paper:hover { background: var(--r-surface); }
.research .r-end .r-paper { margin-bottom: 2.5rem; }

/* ---------- reading-style pass ----------
   Mono is kept for the date/byline line and code only; everything else
   reads in the body face. Blog sections are unnumbered (the PDF keeps
   numbers), and charts sit directly on the page without a frame. */

.research { --r-sans: "F 37 Lineca", Arial, sans-serif; --r-chart-bg: var(--base--cream); }

.research .r-key span,
.research .r-label,
.research th,
.research td.n,
.research .r-legend,
.research .r-paper,
.research .r-toc .r-label { font-family: var(--r-sans); letter-spacing: 0; }

.research .r-key span { font-size: .8125rem; line-height: 1.4; }
.research .r-label { text-transform: none; font-weight: 500; font-size: inherit; color: var(--r-ink); }
.research .r-callout .r-label { font-size: .8125rem; letter-spacing: .02em; text-transform: uppercase; color: var(--r-ink-2); }
.research th { text-transform: none; font-size: .8125rem; font-weight: 500; }
.research td.n { font-size: .875rem; }
.research .r-legend { font-size: .8125rem; margin: 0 0 1rem; }
.research .r-paper { font-size: .9375rem; text-transform: none; letter-spacing: 0; font-weight: 500; }
.research .r-paper span { font-weight: 400; }
.research .r-toc .r-label { text-transform: uppercase; letter-spacing: .06em; }

.research h2 .r-num { display: none; }

/* However many cards, the key strip is one row (six wrap to 3 + 3). */
.research .r-key { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; }
.research .r-key:has(> :nth-child(6)) { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }

.research figure .r-card { background: none; border: 0; padding: 0; }
.research .r-chart svg text { stroke: var(--r-chart-bg); }
@media screen and (max-width: 767px) {
  .research .r-key,
  .research .r-key:has(> :nth-child(6)) { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
}
/* An odd number of cards on a phone: the last one spans both columns. */
@media screen and (max-width: 767px) {
  .research .r-key > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Five cards share 736px: smaller numbers that never wrap. */
@media screen and (min-width: 768px) {
  .research .r-key:has(> :nth-child(5)):not(:has(> :nth-child(6))) div { padding: 1.125rem 1rem 1rem; }
  .research .r-key:has(> :nth-child(5)):not(:has(> :nth-child(6))) b { font-size: 1.625rem; white-space: nowrap; }
}
/* Lineca's tabular figures space out around the decimal point; numbers
   read better proportional, and a value never breaks across lines. */
.research td.n { font-variant-numeric: normal; white-space: nowrap; }

/* ---------- emphasis pass ----------
   Titles stay Reckless Book (the only Reckless weight we have); they get
   weight from size, full-black ink and tighter tracking instead of a
   synthetic bold. The key strip becomes filled cards with numbers in
   Lineca Medium, a real heavier weight. */

.research h1 {
  font-size: clamp(2.125rem, 4.4vw, 3rem);
  letter-spacing: -.025em;
  color: #141414;
}

.research .r-key {
  border: 0;
  gap: .375rem;
}
.research .r-key div {
  background: var(--r-surface);
  border: 0;
  padding: 1.25rem 1.25rem 1.125rem;
}
.research .r-key b,
.research .r-key:has(> :nth-child(5)):not(:has(> :nth-child(6))) b {
  font-family: var(--r-sans);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--r-ink);
  font-size: 1.75rem;
  line-height: 1.1;
  margin-bottom: .375rem;
}
@media screen and (min-width: 768px) {
  .research .r-key:has(> :nth-child(5)):not(:has(> :nth-child(6))) div { padding: 1.125rem 1rem 1rem; }
  .research .r-key:has(> :nth-child(5)):not(:has(> :nth-child(6))) b { font-size: 1.625rem; }
}
.research .r-key span { color: var(--r-ink-2); }
.research .r-key b { font-variant-numeric: normal; }

/* S25's key strip reads as one highlighted block, like the Key findings
   box: tinted, green rule on the left, thin dividers between numbers. */
.research .r-key {
  gap: 0;
  background: var(--r-surface);
  border-left: 3px solid var(--r-accent);
}
.research .r-key div { background: none; }
.research .r-key div + div { box-shadow: inset 1px 0 0 var(--r-rule); }
@media screen and (max-width: 767px) {
  .research .r-key div + div { box-shadow: none; }
  .research .r-key div { border-top: 1px solid var(--r-rule); }
  .research .r-key div:nth-child(-n+2) { border-top: 0; }
  .research .r-key div:nth-child(even) { box-shadow: inset 1px 0 0 var(--r-rule); }
}

/* Title weight: the grayscale smoothing used site-wide thins type on macOS;
   the title uses the default smoothing and a larger size instead. */
.research h1 {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  font-size: clamp(2.25rem, 5vw, 3.375rem);
  line-height: 1.06;
}

/* Reckless Standard S Medium (web licence, Displaay order DP16457), as
   weight 500 of the family the research pages already use. Titles take the
   real weight, so the smoothing and size workarounds above are undone. */
@font-face {
  font-family: "Reckless S Book";
  src: url('../fonts/RecklessStandardS-Medium.woff2') format('woff2'), url('../fonts/RecklessStandardS-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
.research h1 {
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: clamp(2.125rem, 4.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.02em;
}