/* CurrentCardio design tokens — the single source of truth for the visual system (docs/02, visual system 2026-09-22).
   Rule of thumb: display serif = titles and numerals; text serif = CurrentCardio's prose; sans = data, labels and UI. */

:root {
  /* Colour — cool near-whites and slate; one crimson, on a strict budget (Featured, the headline estimate's
     number — never a plot, docs/21 §5 98 —, a flagged safety signal, "Cardio" in the wordmark, the section tick, the current-page underline,
     one primary button per page). Never on links, hovers, other buttons, borders, backgrounds or headings. */
  --ground: #fbfcfd; /* page background */
  --band: #f4f6f8; /* alternating section surface */
  --db: #edf0f3; /* database surface: rails, sidebars, facet and reference columns */
  --slate: #1c2430; /* primary text, header and footer, strong rules */
  --slate-2: #5b6675; /* secondary text (≈ 5.7:1 on the ground); 2026-09-23 */
  --slate-mid: color-mix(in srgb, var(--slate) 50%, var(--slate-2)); /* a comparison's line in a plot's row, a shade darker than the note under it (the editor, 2026-11-04) */
  --ink-2: var(--slate); /* former "secondary" (#3e4756): now primary */
  --ink-3: var(--slate-2); /* former "muted" (#6a7482): now secondary */
  --rule: #dfe4e9; /* light rule */
  --rule-2: #c2c9d1; /* mid rule */
  --rule-strong: var(--slate);
  --crimson: #ab1f2b;
  --crimson-deep: #8d1823; /* primary button hover */
  --rose: #e3a3aa; /* "Cardio" in the wordmark on the header band, nowhere else */
  --chrome: #dfe6ed; /* footer band: a soft, light blue-grey */
  --chrome-header: #1d2331; /* header band: dark slate (the front-page mock of 2026-09-24) */
  --chrome-header-ink: #e8edf2; /* navigation and controls on the header band */
  --chrome-rule: #c9d3dd; /* rules on the footer band */
  --chrome-header-rule: #3a4354;
  --header-inset: #2b3343; /* the search field on the header band */
  --nav-ink: var(--ink-2); /* navigation links on the chrome band */
  --foot-2: var(--ink-2); /* footer secondary text */
  --foot-3: var(--ink-3); /* footer tertiary text */
  --demo-bg: #0f151c; /* demonstration strip */
  --demo-ink: #a9b2bd; /* demonstration strip text */
  --hero: #f9f6f0; /* the Featured surface (front-page hero, Weekly lead): the one warm near-white, a neutral paper (2026-09-29; was #fbf2ee) */
  --feat-surface: #fdf8f5; /* the Featured box on the front page: a lighter warm than --hero (the editor, 2026-10-04); also My Week's "What you follow" (2026-10-07) */
  --feat-rule: #f0e4de; /* its hairline border */
  /* The Featured card's other warm papers, moved here from components.css (2026-10-28) so no stylesheet but this one holds a tinted colour. */
  --feat-hover: #fbf2ee; /* the card on hover */
  --feat-hover-rule: #e6d6ce; /* its border on hover; the topic chip's outline */
  --feat-chip: #f5e9e4; /* the study-type chip */
  --feat-divider: #ede0da; /* the rule above the comparison line */
  --notice-surface: #fdf6ea; /* the "Important" note under "Check your inbox" (the editor's mockup, 2026-10-18) */
  --notice-rule: #efdcb4; /* its border */
  /* My Week's semantic colours (the editor, 2026-10-06): blue = something the reader follows, crimson = in the
     Monday e-mail; nowhere else on the site, and never decorative. */
  --follow: #3b5b7e; /* muted blue: follow markers, follow kind labels, "+ Add to My Week", match-pill text (≈ 6.9:1 on white) */
  --follow-tint: #f5f8fb; /* the volume capsule, the active filter, a menu item on hover */
  --follow-pill: #e6eef6; /* a match pill on My Week: the follow that brought the study */
  /* The reader's library (Saved articles, the editor's mockup of 2026-10-20, "the red one to fit CurrentCardio"): the chosen
     row and a folder pill in crimson on a pale crimson tint. */
  /* Mixed from the accent, so a sister publication's theme tints them too (2026-10-28; were #fbf0f0, #f8e6e7, #efcfd2). */
  --library-tint: color-mix(in srgb, var(--crimson) 6%, var(--ground)); /* the chosen row: All articles or a folder */
  --library-pill: color-mix(in srgb, var(--crimson) 10%, var(--ground)); /* a folder pill under a saved article */
  --library-rule: color-mix(in srgb, var(--crimson) 20%, var(--ground)); /* the pill's hairline */

  /* Names the component sheet grew up with. Same tokens, one palette. */
  --paper: var(--ground);
  --surface: var(--band);
  --ink: var(--slate);
  --accent: var(--crimson);
  --accent-ink: var(--crimson);
  --plot-ink: var(--slate);
  --plot-muted: var(--rule-2);

  /* Type families */
  --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-serif: "Newsreader Variable", "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans: "Instrument Sans Variable", "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Study titles — cards, rows, search results, the Brief page's title — are set in the text serif, not the display serif;
     section headings keep the display serif (the editor, 2026-10-14). */
  --font-title: var(--font-serif);

  /* Type scale (16px root) */
  --t-xs: 0.75rem; /* 12 — labels, axis text */
  --t-sm: 0.8125rem; /* 13 — metadata */
  --t-base: 0.9375rem; /* 15 — sans body, findings, data */
  --t-md: 1.0625rem; /* 17 — lead sans, outcome names */
  --t-lg: 1.3125rem; /* 21 — list titles (display serif: day headings, topic and follow names) */
  --t-title: 1.3125rem; /* 21 — study titles in rows and cards (Newsreader); 19 on phones */
  --t-xl: 1.625rem; /* 26 — section titles */
  --t-2xl: 1.875rem; /* 30 — secondary numbers */
  --t-3xl: 2.625rem; /* 42 — headline estimates */
  --t-4xl: 3.5rem; /* 56 — page titles */
  --t-prose: 1.1875rem; /* 19 — text serif reading size */

  /* Spacing — 4px base */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* Layout */
  --page-max: 90rem; /* 1440 — the layout follows the window up to here (2026-09-24, was 1180); reading columns keep --measure */
  --measure: 42rem; /* reading column */
  --gutter: 1.25rem;
  --radius: 0;
  /* Distance from the content edge to the viewport edge: lets a rail or a band run to the edge of the page. */
  --bleed: max(var(--gutter), calc((100vw - var(--page-max)) / 2 + var(--gutter)));
}

@media (min-width: 40em) {
  :root {
    --gutter: 2rem;
  }
}
@media (min-width: 60em) {
  :root {
    --gutter: 2.5rem;
  }
}

/* Phones (clinical review 2026-09-23): no UI or metadata text below 14px; Brief prose Newsreader 17px / 1.5. */
@media (max-width: 39.99em) {
  :root {
    --t-xs: 0.875rem;
    --t-sm: 0.875rem;
    --t-prose: 1.0625rem;
    --t-title: 1.1875rem;
  }
}

/* Breakpoints (em, for use in media queries): 40em = 640px · 60em = 960px · 75em = 1200px */

:root{--crimson:#5B3A8E;--crimson-deep:#462C6E;--rose:#B9A3DB}
/* The "Launching soon" page of a publication (infra/cloudflare/launching): the page's look on every site. The tokens above this sheet are
   src/styles/tokens.css with the publication's accent written over them, so --crimson is its accent. The accent only on the wordmark's second
   word and the mark's square (the budget in tokens.css). */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/instrument-serif-latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Newsreader Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/newsreader-latin-opsz-normal.woff2) format("woff2-variations");
}
@font-face {
  font-family: "Instrument Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(/fonts/instrument-sans-latin-wght-normal.woff2) format("woff2-variations");
}

/* The page's own names for the roles it uses; the dark scheme below swaps them for the header band's palette. */
:root {
  color-scheme: light dark;
  --l-ground: var(--ground);
  --l-ink: var(--slate);
  --l-ink-2: var(--slate-2);
  --l-accent: var(--crimson);
  --l-rule: var(--rule-2);
}
@media (prefers-color-scheme: dark) {
  :root {
    --l-ground: var(--chrome-header);
    --l-ink: var(--chrome-header-ink);
    --l-ink-2: var(--demo-ink);
    --l-accent: var(--rose); /* the wordmark's second word on the header band */
    --l-rule: var(--chrome-header-rule);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--l-ground);
  color: var(--l-ink);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,
p,
ul {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
:focus-visible {
  outline: 2px solid var(--l-ink);
  outline-offset: 3px;
}

.launch,
.launch__footer {
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.launch {
  align-self: center;
  padding-block: var(--s-8) var(--s-7);
}

/* The lockup: the header's .brand at display size — mark 30 × 14 against a 22px wordmark, gap 12px, scaled in em. */
.lockup {
  display: flex;
  align-items: center;
  gap: 0.545em;
  font: 400 clamp(2.5rem, 6.5vw + 0.75rem, 4.5rem) / 1 var(--font-display);
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.mark {
  display: block;
  flex: 0 0 auto;
  width: 1.364em;
  height: 0.636em;
}
.wordmark__accent {
  color: var(--l-accent);
}

.launch__claim {
  margin-top: var(--s-6);
  font: 400 clamp(1.75rem, 2.2vw + 1.1rem, 2.5rem) / 1.2 var(--font-display);
  text-wrap: balance;
}
.launch__lede {
  margin-top: var(--s-4);
  max-width: 30rem;
  font: 400 clamp(1.25rem, 1.2vw + 0.95rem, 1.5rem) / 1.4 var(--font-serif);
  font-optical-sizing: auto;
  text-wrap: pretty;
}

.launch__row {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--l-rule);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
}
.launch__status {
  font: 500 var(--t-sm) / 1.3 var(--font-sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.launch__footer {
  padding-block: var(--s-5);
  font-size: var(--t-xs);
  color: var(--l-ink-2);
}

@media (max-width: 39.99em) {
  .launch {
    padding-block: var(--s-7) var(--s-6);
  }
  .launch__row {
    flex-direction: column;
  }
}