/* Research notes: the site's look on top of each note's own layout (loaded after the note's CSS, before site.css).
   Same width as the site header, sentence-case labels instead of letter-spaced capitals, one accent,
   and the warm Gallery stone where the notes used white cards. */

.page-width { width: min(1280px, calc(100% - 64px)); }
@media (max-width: 800px) { .page-width { width: min(100% - 36px, 640px); } }

/* With the contents panel in the left margin, the body (everything after the splash) moves right just enough to clear
   it, keeping its width where the screen allows. The splash stays centred. */
@media (min-width: 1240px) {
  html:has(.r-toc) { --toc-reserve: 240px; }
  html:has(.r-toc) :is(.paper-section, .speaker-section, .speaker-cta) { --body-w: 1280px; }
  html:has(.r-toc) .note > .wrap:not(.splash) { --body-w: 1120px; }
  html:has(.r-toc) :is(.paper-section, .speaker-section, .speaker-cta, .note > .wrap:not(.splash)) {
    width: min(var(--body-w), calc(100vw - var(--toc-reserve) - 40px));
    margin-left: max(var(--toc-reserve), calc((100vw - var(--body-w)) / 2));
    margin-right: auto;
  }
}
@media (min-width: 1240px) and (max-width: 1399px) { html:has(.r-toc) { --toc-reserve: 200px; } }

/* one accent across the notes */
:root { --speaker-accent: #4c3a91; --speaker-accent-soft: rgba(76, 58, 145, 0.08); }
.voice--target { box-shadow: 0 0 0 12px var(--speaker-accent-soft), 0 0 0 27px rgba(76, 58, 145, 0.035); }

/* labels: sentence case in the body face */
.kicker, .section-number, .latest-label p, .latest-meta, .waveform-status, figcaption span,
.eyebrow, .table th, .cta-tracks h3,
.paper-meta, .headline-results span, .headline-chart figcaption span, .headline-chart-note, .paper-details dt,
.research-table th, .figure-heading p, .media-figure figcaption span, .device-context, .device-demo-heading span,
.speaker-meta, .speaker-kicker, .speaker-highlights span, .identity-copy, .identity-visual > p, .speaker-details dt,
.challenge-grid span, .dataset-eyebrow, .benchmark-preview-header div > span, .status-pill, .speaker-cta > p {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
}
.status-pill { font-size: 12px; }
.table th, .research-table th { font-size: 12.5px; }

/* white cards become Gallery stone */
.fig-media { background: #e9e3d8; }
.ex-col { background: rgba(233, 227, 216, 0.55); }
.ex-col.is-us { background: rgba(233, 227, 216, 0.9); }

/* One byline for every note, directly above the title: "Research note" in the accent with the site's square mark,
   then the date and the topic, separated by fine dots. It replaces the ruled meta rows, so the charts move up. */
.note-byline { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; margin: 0 0 18px; font: 500 13.5px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.note-byline > :first-child { color: #4c3a91; }
.note-byline > :first-child::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; background: #4c3a91; vertical-align: 1px; }
.note-byline > * + *::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 12px; border-radius: 50%; background: currentColor; opacity: 0.5; vertical-align: 3px; }
.splash .note-byline { justify-content: center; margin: 0 0 12px; }
.splash { padding-top: 22px; }
.splash h1 { margin-top: 0; }
.paper-header { padding-top: 40px; }
.paper-introduction { margin-top: 0; }
.speaker-hero { padding-top: 40px; }
.speaker-introduction { margin-top: 0; }
@media (max-width: 560px) { .note-byline > :nth-child(3) { display: none; } }

/* ---------- phones (all inside max-width queries; wide screens untouched) ---------- */
@media (max-width: 860px) {
  /* A5S Async note: the two headline figures sized for a phone, not from the viewport width (13px at 390) */
  .numbers strong { font-size: 34px; }
  .numbers > div { gap: 14px; }
}
@media (max-width: 760px) {
  :is(p, li, dd, figcaption, caption) { text-wrap: pretty; }
}
@media (max-width: 560px) {
  .status-pill { white-space: nowrap; }
  .benchmark-preview-header { gap: 12px; }
  /* small inline links in note headers get a finger-sized hit area */
  .abstract-links a { display: inline-block; padding-block: 6px; }
}