/* =========================================================================
   The Vital Record — "White Coat" design system
   Modern editorial: Fraunces + Newsreader + Inter, teal accent, generous air.
   ========================================================================= */

/* Self-hosted variable fonts (no third-party request) */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/fraunces-opsz-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/fraunces-opsz-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/newsreader-opsz-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/newsreader-opsz-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-wght-normal.woff2") format("woff2");
}

:root {
  --paper: #fcfcfa;
  --paper-2: #f6f7f4;
  --ink: #1b2327;
  --ink-soft: #6b7378;
  --accent: #0e7c7b;
  --accent-deep: #0a5b5a;
  --accent-wash: #e8f2f1;
  --rule: #e5e3dd;
  --rule-strong: #cfcdc5;
  --up: #0e7c4a;
  --down: #b3402f;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --measure: 66ch;
  --maxw: 1180px;
  --gap: 2rem;

  --shadow: 0 1px 2px rgba(27, 35, 39, 0.04), 0 8px 24px rgba(27, 35, 39, 0.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14181a;
    --paper-2: #1b2124;
    --ink: #e9ece9;
    --ink-soft: #9aa3a4;
    --accent: #4cc4c0;
    --accent-deep: #6fd6d2;
    --accent-wash: #16302f;
    --rule: #2a3236;
    --rule-strong: #39444a;
    --up: #4bbd7e;
    --down: #e08272;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Keyboard accessibility */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.8rem;
  padding: 0.6rem 1rem;
  border-radius: 0 0 6px 0;
}
.skip-link:focus {
  left: 0;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.7;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem;
}

a {
  color: inherit;
  text-decoration: none;
}
.article-body a,
.teaser a,
.source-list a,
.panel-list a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.article-body a:hover,
.source-list a:hover,
.panel-list a:hover {
  text-decoration-color: var(--accent);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------- Masthead --------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  padding-top: 1.25rem;
}
.masthead-inner {
  text-align: center;
}
.masthead-est {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.4rem;
}
.masthead-title {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}
.masthead-tagline {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.02rem;
  margin: 0.55rem 0 0.95rem;
}
.topnav {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.topnav-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}
.topnav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin: 0;
  padding: 0.7rem 0;
}
.topnav a {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.topnav a:hover {
  color: var(--accent);
}
.topnav-meta a {
  color: var(--ink);
}
.ai-strip {
  font-family: var(--sans);
  font-size: 0.74rem;
  color: var(--ink-soft);
  text-align: center;
  padding: 0.7rem 1.5rem;
}
.ai-strip a {
  color: var(--accent-deep);
  font-weight: 600;
}

/* ---------- Shared editorial elements ---------------------------------- */

main.wrap {
  padding-top: 2.4rem;
  padding-bottom: 3rem;
}

.kicker,
.kicker-inline {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 0.4rem;
}
.kicker-inline {
  display: inline-block;
  margin: 0 0.6rem 0 0;
  min-width: 8.5rem;
}

.hed {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
  text-wrap: balance;
}
.hed a:hover {
  color: var(--accent-deep);
}
.lead-hed {
  font-size: clamp(2rem, 4.2vw, 2.8rem);
  font-weight: 600;
}
.small-hed {
  font-size: 1.2rem;
}

.dek {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--ink) 86%, transparent);
  margin: 0 0 0.7rem;
  max-width: var(--measure);
}
.dek.small {
  font-size: 1rem;
}

.byline {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: 0 0 0.8rem;
}
.byline-name {
  color: var(--accent-deep);
  font-weight: 600;
}

.badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  vertical-align: middle;
}
.badge-preprint {
  background: #fdf2e3;
  color: #8a5a16;
}
.badge-preclinical {
  background: #eef0fb;
  color: #3f4aa0;
}
@media (prefers-color-scheme: dark) {
  .badge-preprint {
    background: #3a2c12;
    color: #e6b86a;
  }
  .badge-preclinical {
    background: #20243f;
    color: #aab2ec;
  }
}

/* Teal "tick" section divider */
.section-tick {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 1rem;
  margin: 2.6rem 0 1.4rem;
  position: relative;
}
.section-tick::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 3px;
  background: var(--accent);
}

/* Drop cap on lead/article first paragraph */
.drop > p:first-of-type::first-letter {
  font-family: var(--display);
  font-weight: 600;
  float: left;
  font-size: 2.6em;
  line-height: 0.86;
  padding: 0.04em 0.09em 0 0;
  color: var(--accent-deep);
}

/* ---------- Front page ------------------------------------------------- */

.dateline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.2rem;
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.7rem;
  margin-bottom: 1.6rem;
}
.dateline-date {
  font-weight: 600;
  color: var(--ink);
}
.dateline-epigraph {
  font-family: var(--serif);
  font-style: italic;
}
.edition-summary {
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.55;
  max-width: 52ch;
  margin: 0 0 2rem;
  color: color-mix(in srgb, var(--ink) 88%, transparent);
}

.front-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(260px, 0.8fr);
  gap: 3rem;
  align-items: start;
}
.front-main {
  min-width: 0;
}

.story.lead {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.8rem;
  margin-bottom: 1.8rem;
}
.lead .teaser {
  font-size: 1.06rem;
}
.lead .teaser p {
  margin: 0 0 0.8rem;
}
.more a {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-deep);
}

.secondary-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.story.secondary {
  border-top: 2px solid var(--ink);
  padding-top: 0.8rem;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.8rem 2rem;
}
.story.card {
  border-top: 1px solid var(--rule-strong);
  padding-top: 0.7rem;
}

/* ---------- Sidebar panels --------------------------------------------- */

.front-side {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.panel {
  background: var(--accent-wash);
  border-radius: 10px;
  padding: 1.1rem 1.2rem 1.2rem;
}
.panel-title {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 0.7rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 0.84rem;
  line-height: 1.45;
}
.panel-list li {
  padding: 0.4rem 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--accent) 25%, transparent);
}
.panel-list li:last-child {
  border-bottom: 0;
}
.panel-note {
  font-family: var(--sans);
  font-size: 0.7rem;
  color: var(--ink-soft);
  margin: 0.6rem 0 0;
}
.tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-deep);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  margin-right: 0.35rem;
}
.muted {
  color: var(--ink-soft);
}
.markets li {
  display: flex;
  justify-content: space-between;
  font-variant-numeric: tabular-nums;
}
.ticker {
  font-weight: 600;
}
.chg.up {
  color: var(--up);
}
.chg.down {
  color: var(--down);
}

/* ---------- Article page ----------------------------------------------- */

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 3rem;
  align-items: start;
}
.context-rail {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
@media (max-width: 900px) {
  .article-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .context-rail {
    position: static;
  }
}

.article {
  max-width: var(--measure);
  margin: 0 auto;
}
.article-layout .article {
  max-width: 70ch;
  margin: 0;
}
.crumb {
  font-family: var(--sans);
  font-size: 0.76rem;
  margin-bottom: 1.2rem;
}
.crumb a {
  color: var(--accent-deep);
}
.article-hed {
  font-size: clamp(2.1rem, 5vw, 3.2rem);
}
.article-dek {
  font-size: 1.32rem;
}
.article-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0.7rem 0;
  margin-bottom: 1.8rem;
}
.article-body {
  font-size: 1.22rem;
  line-height: 1.62;
}
.article-body p {
  margin: 0 0 1.25rem;
}
.article-body h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.55rem;
  margin: 2.2rem 0 0.8rem;
}
.article-body h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.25rem;
  margin: 1.8rem 0 0.6rem;
}
.article-body blockquote {
  border-left: 5px solid var(--accent-deep);
  margin: 2rem 0;
  padding: 0.1rem 0 0.1rem 1.4rem;
  font-family: var(--display);
  font-weight: 500;
  font-style: normal;
  font-size: 1.32rem;
  line-height: 1.5;
  color: var(--ink);
}
.article-body blockquote p {
  margin: 0 0 0.5rem;
}
.article-body ul,
.article-body ol {
  padding-left: 1.3rem;
}
.article-body li {
  margin: 0.5rem 0;
}
.article-body hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2rem 0;
}

/* Footnotes (markdown-it-footnote) */
.footnotes {
  font-size: 0.92rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  margin-top: 2.4rem;
  padding-top: 1rem;
}
.footnote-ref a {
  color: var(--accent-deep);
  text-decoration: none;
  font-size: 0.8em;
  vertical-align: super;
}

/* Source box + AI note */
.source-box,
.ai-note {
  margin-top: 2.4rem;
  border-radius: 10px;
  padding: 1.2rem 1.4rem;
}
.source-box {
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.source-intro {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 0 0 0.8rem;
}
.source-list {
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.5;
  margin: 0;
  padding-left: 1.2rem;
}
.source-list li {
  margin: 0.45rem 0;
}
.ai-note {
  background: var(--accent-wash);
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.55;
}
.ai-note a {
  color: var(--accent-deep);
  font-weight: 600;
}

/* Related articles */
.related {
  margin-top: 2.6rem;
}
.related-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.related-list li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--display);
  font-size: 1.12rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.3rem 1rem;
  align-items: baseline;
}
.related-list a:hover {
  color: var(--accent-deep);
}
.related-list .muted {
  font-family: var(--sans);
  font-size: 0.74rem;
  white-space: nowrap;
}

/* ---------- Archive + section + content pages -------------------------- */

.page-hed {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3rem);
  margin: 0 0 0.4rem;
}
.page-sub {
  font-style: italic;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  max-width: var(--measure);
  margin: 0 0 2.4rem;
}
.archive-filter {
  width: 100%;
  max-width: 480px;
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  margin: 0 0 0.6rem;
}
.archive-count {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-soft);
  min-height: 1em;
  margin: 0 0 1.4rem;
}
.archive-edition {
  border-top: 2px solid var(--ink);
  padding-top: 0.8rem;
  margin-bottom: 2rem;
}
.archive-date {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.4rem;
  margin: 0 0 0.7rem;
}
.archive-date .muted {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 400;
}
.archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.archive-list li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1.05rem;
}
.archive-list .kicker-inline {
  color: var(--accent);
}

.prose {
  max-width: var(--measure);
  margin: 0 auto;
}
.prose h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.5rem;
  margin: 2rem 0 0.7rem;
}
.prose ul {
  padding-left: 1.3rem;
}
.prose li {
  margin: 0.4rem 0;
}

.to-archive {
  font-family: var(--sans);
  font-size: 0.82rem;
  margin-top: 2.6rem;
}
.to-archive a {
  color: var(--accent-deep);
  font-weight: 600;
}

/* ---------- Live Wire -------------------------------------------------- */

.livewire {
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper-2);
  padding: 0.8rem 1rem 0.9rem;
  margin-bottom: 2.2rem;
}
.livewire-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.55rem;
}
.livewire-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.livewire-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e23a2e;
  animation: livewire-pulse 2s infinite;
}
@keyframes livewire-pulse {
  0% { box-shadow: 0 0 0 0 rgba(226, 58, 46, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(226, 58, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(226, 58, 46, 0); }
}
.livewire-all {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-deep);
}
.livewire-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.livewire-items li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.35;
}
.livewire-items a {
  color: var(--ink);
}
.livewire-items a:hover {
  color: var(--accent-deep);
}
.wire-when {
  margin-left: auto;
  color: var(--ink-soft);
  font-size: 0.7rem;
  white-space: nowrap;
}

.wire-type {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  flex: none;
}
.wire-trial { background: #e0f0ef; color: #0a5b5a; }
.wire-paper { background: #e7eefb; color: #27408a; }
.wire-preprint { background: #fdf2e3; color: #8a5a16; }
.wire-regulatory { background: #fdeaea; color: #9a2820; }
.wire-business { background: #ece9fb; color: #4a3aa0; }
@media (prefers-color-scheme: dark) {
  .wire-trial { background: #0f3b3a; color: #7fdedb; }
  .wire-paper { background: #1c2747; color: #9db4ee; }
  .wire-preprint { background: #3a2c12; color: #e6b86a; }
  .wire-regulatory { background: #3a1c1a; color: #f0a59c; }
  .wire-business { background: #241f44; color: #b3a9ee; }
}

.wire-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wire-item {
  display: flex;
  gap: 0.7rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.wire-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.wire-body a {
  font-family: var(--display);
  font-size: 1.05rem;
}
.wire-body a:hover {
  color: var(--accent-deep);
}
.wire-meta {
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--ink-soft);
}

/* ---------- Wave 1: hierarchy, callout, briefs, share ------------------ */

.masthead-dateline {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: 0.5rem 0 1.1rem;
}

.in-this-edition {
  background: var(--accent-wash);
  border-radius: 10px;
  padding: 0.9rem 1.2rem;
  margin: 0 0 2rem;
}
.ite-kicker {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 0.3rem;
}
.ite-text {
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.5;
  margin: 0;
  color: var(--ink);
}

/* "In brief" — one-line newspaper list */
.brief-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 820px) {
  .brief-list {
    columns: 2;
    column-gap: 3rem;
  }
}
.brief-item {
  break-inside: avoid;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule);
  line-height: 1.3;
}
.brief-item .kicker-inline {
  display: block;
  min-width: 0;
  margin: 0 0 0.15rem;
  color: var(--accent-deep);
}
.brief-hed {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.08rem;
}
.brief-hed:hover {
  color: var(--accent-deep);
}
.brief-dek {
  display: block;
  font-family: var(--serif);
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-top: 0.1rem;
}

/* Share row */
.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.8rem;
}
.share-label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.share-btn {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--accent-deep);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  background: none;
  cursor: pointer;
  text-decoration: none;
}
.share-btn:hover {
  border-color: var(--accent);
  background: var(--accent-wash);
}

/* Section-page lead + per-desk accent */
.section-lead {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.6rem;
  margin-bottom: 1.8rem;
}
.section-lead .teaser {
  max-width: 62ch;
}
.section-page .page-hed {
  position: relative;
  padding-bottom: 0.5rem;
}
.section-page .page-hed::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 4px;
  background: var(--accent);
}
.section-page[data-desk="fda-regulatory"] .page-hed::after { background: #9a2820; }
.section-page[data-desk="research"] .page-hed::after { background: #27408a; }
.section-page[data-desk="biotech-business"] .page-hed::after { background: #4a3aa0; }
.section-page[data-desk="public-health"] .page-hed::after { background: #0e7c4a; }
.section-page[data-desk="devices-diagnostics"] .page-hed::after { background: #8a5a16; }
.section-page[data-desk="digital-health-ai"] .page-hed::after { background: #0a5b8a; }
.section-page[data-desk="opinion"] .page-hed::after { background: var(--ink); }

/* ---------- Wave 3: hero art + charts ---------------------------------- */

.article-hero,
.lead-hero {
  margin: 0 0 1.4rem;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--rule);
}
.hero-art {
  display: block;
  width: 100%;
  height: auto;
}
.chart {
  margin: 1.8rem 0;
  padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper-2);
}
.chart-title {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 0.7rem;
}
.chart-svg {
  width: 100%;
  height: auto;
  display: block;
}
.chart-note {
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--ink-soft);
  margin: 0.6rem 0 0;
}
.analysis-label {
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 1.45;
  background: var(--accent-wash);
  border-left: 3px solid var(--accent);
  padding: 0.6rem 0.9rem;
  border-radius: 0 6px 6px 0;
  color: var(--ink-soft);
  margin: 0 0 1.4rem;
}
.analysis-label strong {
  color: var(--accent-deep);
}
.analysis-label a {
  color: var(--accent-deep);
  font-weight: 600;
}

/* ---------- Wave 2: desks, newsletter ---------------------------------- */

.byline-link {
  color: var(--accent-deep);
}
.byline-link:hover {
  text-decoration: underline;
}

.desk-bio {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.55;
  max-width: 60ch;
  margin: 0.4rem 0 1rem;
}
.desk-ai-note {
  font-family: var(--sans);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 1.4rem 0 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
}
.desk-ai-note a {
  color: var(--accent-deep);
  font-weight: 600;
}
.desk-credo {
  margin: 0.6rem 0 1.1rem;
}
.desk-focus {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.4rem;
}

.newsletter .newsletter-blurb {
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1.45;
  margin: 0 0 0.7rem;
  color: var(--ink);
}
.newsletter-form {
  display: flex;
  gap: 0.4rem;
}
.newsletter-form input {
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: 0.82rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
}
.newsletter-form button {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent-deep);
  border: 0;
  border-radius: 6px;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
}
.newsletter-form button:hover {
  background: var(--accent);
}
.newsletter-fine {
  font-family: var(--sans);
  font-size: 0.68rem;
  color: var(--ink-soft);
  margin: 0.5rem 0 0;
}

/* ---------- Footer ----------------------------------------------------- */

.site-footer {
  border-top: 3px solid var(--ink);
  background: var(--paper-2);
  padding: 2.4rem 0 3rem;
  margin-top: 3rem;
}
.footer-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.5rem;
  margin: 0 0 0.6rem;
}
.footer-disclosure {
  font-family: var(--serif);
  max-width: 60ch;
  color: color-mix(in srgb, var(--ink) 85%, transparent);
  margin: 0 0 1.2rem;
}
.footer-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  padding: 0;
  margin: 0 0 1rem;
  font-family: var(--sans);
  font-size: 0.8rem;
}
.footer-links a {
  color: var(--accent-deep);
  font-weight: 600;
}
.footer-fine {
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- Responsive ------------------------------------------------- */

@media (max-width: 820px) {
  .front-grid {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }
  .front-side {
    position: static;
  }
  .secondary-row {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
}

@media (max-width: 520px) {
  body {
    font-size: 17px;
  }
  .masthead-title {
    font-size: clamp(1.7rem, 8.5vw, 2.4rem);
    letter-spacing: -0.01em;
    overflow-wrap: break-word;
  }
  .topnav-inner {
    flex-direction: column;
    gap: 0;
  }
  .topnav ul {
    padding: 0.5rem 0;
  }
  .article-body {
    font-size: 1.13rem;
  }
}

/* Stronger focus ring on tinted (accent-wash) backgrounds */
.ai-note a:focus-visible,
.panel a:focus-visible,
.source-box a:focus-visible {
  outline-color: var(--accent-deep);
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Print ------------------------------------------------------ */

@media print {
  .topnav,
  .ai-strip,
  .front-side,
  .to-archive,
  .crumb {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }
  a {
    color: #000;
  }
  .front-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Phase 4 — STAT-clean refinement layer
   De-box; hairline rules + whitespace; bigger type; teal as a
   single signature. (Overrides earlier component rules via the cascade.)
   ============================================================ */

/* Crisp editorial edges — no rounded corners */
.panel, .livewire, .in-this-edition, .source-box, .ai-note, .analysis-label,
.chart, .newsletter, .article-hero, .lead-hero, .badge, .tag, .wire-type,
.share-btn, .archive-filter, .newsletter-form input, .newsletter-form button,
.panel input, .panel button {
  border-radius: 0;
}

/* Rail panels: transparent, a label over a strong top rule — not filled cards */
.panel {
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: 1.9rem;
}
.panel-title {
  border-bottom: 0;
  border-top: 2px solid var(--ink);
  padding: 0.45rem 0 0.55rem;
  color: var(--ink);
}
.panel-list li {
  border-bottom: 1px solid var(--rule);
}

/* Live Wire: a quiet hairline strip, no box, no pulse */
.livewire {
  background: transparent;
  border: 0;
  border-top: 2px solid var(--ink);
  padding: 0.6rem 0 0.4rem;
  margin: 2.6rem 0 0;
}
.livewire-label {
  color: var(--ink);
}
.livewire-dot {
  display: none;
}
.livewire-items li {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.4rem;
}

/* "In this edition": a left-ruled standfirst, not a teal box */
.in-this-edition {
  background: transparent;
  border: 0;
  border-left: 3px solid var(--accent);
  padding: 0.1rem 0 0.1rem 1rem;
  margin: 0 0 2.6rem;
}
.ite-kicker {
  color: var(--ink-soft);
}
.ite-text {
  font-style: italic;
}

/* Article furniture: frameless, hairline-separated */
.source-box,
.chart {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule);
  padding: 1.2rem 0 0;
}
.ai-note {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule);
  padding: 1rem 0 0;
  color: var(--ink-soft);
}
.analysis-label {
  background: transparent;
  border: 0;
  border-left: 3px solid var(--accent);
  padding: 0.15rem 0 0.15rem 0.9rem;
}

/* Badges & chips: meaning carried by colored small-caps text, no pill fill */
.badge,
.tag,
.wire-type {
  background: transparent;
  padding: 0;
  font-weight: 700;
}
.badge-preprint { color: #8a5a16; }
.badge-preclinical { color: #3f4aa0; }
.wire-trial { color: #0a5b5a; }
.wire-paper { color: #27408a; }
.wire-preprint { color: #8a5a16; }
.wire-regulatory { color: #9a2820; }
.wire-business { color: #4a3aa0; }
.tag {
  color: var(--accent-deep);
  margin-right: 0.45rem;
}

/* Type carries the hierarchy, not boxes */
.lead-hed {
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.secondary .hed {
  font-size: 1.6rem;
}
.small-hed {
  font-size: 1.32rem;
}

/* Single restrained 16:9 lead image (lead story only) */
.article-hero,
.lead-hero {
  display: block;
  margin: 0 0 1.5rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  line-height: 0;
}

/* Cards & briefs separated by hairlines, no chrome */
.story.card {
  border-top: 1px solid var(--rule);
}
.source-box {
  /* keep the ordered list flush */
}

/* Newsletter: frameless form */
.newsletter {
  border-top: 2px solid var(--ink);
  padding-top: 0.6rem;
}

/* Masthead: a single teal signature rule above the nav */
.topnav {
  border-top: 2px solid var(--accent);
}

/* Wire filters — plain text buttons with an active underline */
.wire-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.6rem;
  margin: 0 0 1.2rem;
}
.wire-filter {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: none;
  border: 0;
  padding: 0 0 0.3rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.wire-filter:hover {
  color: var(--ink);
}
.wire-filter.is-active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ============================================================
   Phase 4.1 — refine toward STAT: raise the type ladder, unify
   separators to 1px hairlines, give the wire presence, add air.
   ============================================================ */

/* Type ladder: clear, stepped tiers carry the hierarchy */
.lead-hed { font-size: clamp(3rem, 5vw, 3.4rem); }
.secondary .hed { font-size: 1.9rem; }
.small-hed { font-size: 1.3rem; }

/* Unify separators to 1px hairlines — teal survives only at the masthead */
.story.secondary { border-top: 1px solid var(--rule); }
.section-tick { padding-top: 0.9rem; }
.section-tick::before { width: 100%; height: 1px; background: var(--rule); }
.panel-title { border-top-width: 1px; font-weight: 600; }
.newsletter { border-top-width: 1px; }

/* Live Wire reads as an active feed, with presence */
.livewire { border-top-width: 1px; padding: 0.9rem 0 0.6rem; margin-top: 2.6rem; }
.livewire-label { font-size: 0.8rem; }

/* Breathing room around frameless article furniture */
.source-box,
.chart,
.ai-note,
.related {
  margin-top: 2.6rem;
}

/* De-box the byline; nudge legibility */
.article-byline {
  border-top: 0;
  padding-top: 0;
}
.byline {
  font-size: 0.8rem;
}

/* Keep the single teal signature consistent in dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #3aa4a2;
    --accent-deep: #4cb8b4;
  }
}

/* ============================================================
   Phase 4.2 — near-monochrome restraint.
   Teal survives ONLY at the masthead rule and inline body links;
   everything else goes ink / ink-soft. (STAT is near-monochrome.)
   ============================================================ */

/* Grayscale kickers, labels and bylines */
.kicker,
.kicker-inline,
.brief-item .kicker-inline,
.ite-kicker {
  color: var(--ink-soft);
}
.byline-name a,
.byline-name {
  color: var(--ink);
}
.byline-link {
  color: var(--ink-soft);
}

/* One ink color for all wire-type / tag words — the word carries meaning */
.wire-trial,
.wire-paper,
.wire-preprint,
.wire-regulatory,
.wire-business,
.tag,
.badge-preprint,
.badge-preclinical {
  color: var(--ink-soft);
}

/* Replace the surviving teal left-borders with top hairlines */
.in-this-edition,
.analysis-label {
  border-left: 0;
  border-top: 1px solid var(--rule);
  padding: 0.9rem 0 0;
}

/* Quiet the blockquote bar and drop cap (no teal) */
.article-body blockquote {
  border-left: 3px solid var(--rule-strong);
}
.drop > p:first-of-type::first-letter {
  color: var(--ink);
}

/* Article headline gets front-lead hero presence */
.article-hed {
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
}

/* Mute the per-desk section accents to a single ink rule */
.section-page .page-hed::after {
  background: var(--ink) !important;
}

/* Lean on whitespace: drop the rail's internal hairlines */
.panel-list li {
  border-bottom: 0;
  padding: 0.3rem 0;
}

/* ============================================================
   Phase 4.3 — final restraint pass
   ============================================================ */

/* De-invert the newsletter button — no filled white-on-teal element remains */
.newsletter-form button {
  background: none;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
}
.newsletter-form button:hover {
  background: var(--ink);
  color: var(--paper);
}

/* Remove the drop cap — pure paragraph flow reads more sophisticated */
.drop > p:first-of-type::first-letter {
  float: none;
  font-size: inherit;
  line-height: inherit;
  font-family: inherit;
  color: inherit;
  padding: 0;
}

/* Blockquote: indentation + whitespace, no bar */
.article-body blockquote {
  border-left: 0;
  padding-left: 1.8rem;
}

/* Trim headline heat slightly */
.lead-hed {
  font-size: clamp(2.6rem, 5vw, 3.2rem);
}
.article-hed {
  font-size: clamp(2.4rem, 5.5vw, 3.2rem);
}

/* ============================================================
   Phase 4.4 — hybrid type: serif display, sans body (STAT-clean)
   Headlines/masthead stay Fraunces; standfirsts/pull-quotes stay
   serif for character; running text becomes Inter sans.
   ============================================================ */
body {
  font-family: var(--sans);
  line-height: 1.6;
}
.article-body {
  font-size: 1.12rem;
  line-height: 1.58;
}
.article-body p {
  margin: 0 0 1.15rem;
}
.teaser {
  font-size: 1rem;
  line-height: 1.6;
}
.lead .teaser {
  font-size: 1.04rem;
}

/* ============================================================
   Phase 4.5 — silence over structure; one running-text voice
   ============================================================ */

/* Cut the hairline lattice: short section mark, no interior card/list lines */
.section-tick {
  padding-top: 0;
  margin: 2.8rem 0 1.3rem;
}
.section-tick::before {
  width: 28px;
  height: 2px;
  background: var(--ink);
}
.story.card {
  border-top: 0;
}
.story.secondary {
  border-top: 0;
  padding-top: 0;
}
.secondary-row {
  gap: 2.4rem;
}
.card-grid {
  gap: 2.2rem 2.4rem;
}
.livewire-items li {
  border-bottom: 0;
  padding-bottom: 0;
}
.livewire-items {
  gap: 0.55rem;
}

/* One running-text voice: deks/standfirsts go sans to match the body
   (serif is reserved for the masthead, headlines, and pull-quotes) */
.dek,
.article-dek,
.ite-text {
  font-family: var(--sans);
  font-style: normal;
}
.dek {
  color: var(--ink-soft);
}
.article-dek {
  font-size: 1.18rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Byline: type only, no rules */
.article-byline {
  border: 0;
  padding: 0;
  margin-bottom: 1.6rem;
}

/* Let the lead headline own the hierarchy */
.lead-hed {
  font-size: clamp(2.8rem, 5.5vw, 3.6rem);
}
.article-hed {
  font-size: clamp(2.6rem, 5.5vw, 3.6rem);
}

/* Dark mode: calmer teal + a readable link underline */
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #2f8f8d;
    --accent-deep: #45b0ac;
  }
}
.article-body a {
  text-decoration-color: color-mix(in srgb, var(--accent) 70%, transparent);
}

/* ============================================================
   Phase 4.6 — smooth the type ladder; unify the masthead;
   remove the last teal/box micro-noise.
   ============================================================ */

/* Smooth lead -> secondary -> card steps (was 3.6 -> 1.9 -> 1.3) */
.secondary .hed {
  font-size: 2.15rem;
}
.small-hed {
  font-size: 1.45rem;
}

/* One header block; drop the masthead dateline (duplicates the edition dateline) */
.masthead {
  padding-top: 1rem;
}
.masthead-est {
  margin-bottom: 0.3rem;
}
.masthead-tagline {
  margin: 0.4rem 0 0.7rem;
}
.masthead-dateline {
  display: none;
}

/* Sidebar labels: whitespace-led, no black bar over each panel */
.panel-title {
  border-top: 0;
  padding-top: 0;
}
.panel {
  margin-bottom: 1.6rem;
}

/* Residual color/box noise: soft underlines + ghosted input until focus */
.article-body a,
.teaser a,
.panel-list a,
.source-list a {
  text-decoration-color: var(--rule-strong);
}
.newsletter-form input {
  border: 0;
  border-bottom: 1px solid var(--rule);
}
.newsletter-form input:focus {
  border-bottom-color: var(--ink);
  outline: none;
}

/* ============================================================
   Phase 5 — confident editorial system + real imagery
   Reverses the over-minimization: authority masthead, bolder type
   ladder, visible tiers, real chart/photo heroes, one teal accent.
   ============================================================ */

/* Masthead — institutional weight (WaPo/WSJ rules) */
.masthead {
  padding-top: 0.9rem;
  border-bottom: 0;
}
.masthead-title {
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: clamp(3rem, 8vw, 5.4rem);
}
.masthead-inner {
  border-bottom: 3px solid var(--ink);
  padding-bottom: 0.7rem;
}
.topnav {
  border-top: 0;
  border-bottom: 2px solid var(--ink);
}

/* Type — authority ladder (reverses the Phase 4.3 shrink) */
.lead-hed {
  font-size: clamp(3.2rem, 6vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
}
.article-hed {
  font-size: clamp(2.8rem, 5.8vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.04;
}
.secondary .hed {
  font-size: 2.4rem;
}
.small-hed {
  font-size: 1.6rem;
}
.byline-name,
.byline-name a {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink);
}

/* Grid — visible 3-tier hierarchy */
.front-grid {
  gap: 3.5rem;
}
.story.secondary {
  border-top: 2px solid var(--ink);
  padding-top: 0.9rem;
}
.card-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.4rem 2.6rem;
}

/* Color — one teal accent, deployed with intent */
.section-tick::before {
  width: 40px;
  height: 3px;
  background: var(--accent);
}
.kicker {
  color: var(--accent-deep);
}

/* Heroes — real chart / photo, framed, on paper */
.lead-hero {
  display: block;
  margin: 0 0 1.5rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  line-height: normal;
}
.chart-hero {
  padding: 1.4rem 1.6rem 1.2rem;
}
.chart-hero .chart-svg {
  width: 100%;
  height: auto;
}
.chart-hero .chart-title {
  font-size: 0.8rem;
  margin-bottom: 0.7rem;
}
.photo-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: grayscale(1) contrast(1.03);
}
.lead-hero figcaption {
  font-family: var(--sans);
  font-size: 0.74rem;
  color: var(--ink-soft);
  padding: 0.45rem 0.6rem;
  line-height: 1.4;
}
.lead-hero .chart-note {
  border-top: 1px solid var(--rule);
  margin: 0.6rem 1rem 0;
  padding: 0.5rem 0 0;
}

/* Components — intentional structure restored */
.panel-title {
  border-top: 2px solid var(--ink);
  padding-top: 0.5rem;
  font-weight: 700;
}
.livewire {
  border-left: 3px solid var(--accent);
  border-top: 1px solid var(--rule);
  padding-left: 1rem;
}
.article-body blockquote {
  border-left: 2px solid var(--ink);
  padding-left: 1.6rem;
}

/* Phase 5 — keep the bigger type from overflowing on phones */
@media (max-width: 560px) {
  .masthead-title {
    font-size: clamp(1.9rem, 9vw, 2.7rem);
  }
  .lead-hed {
    font-size: clamp(2rem, 8.5vw, 2.7rem);
  }
  .article-hed {
    font-size: clamp(1.9rem, 8vw, 2.6rem);
  }
  .secondary .hed {
    font-size: 1.65rem;
  }
  .front-grid {
    gap: 2rem;
  }
}

/* ============================================================
   Phase 5.1 — fewer rules. Hierarchy comes from the bold type
   ladder, the chart heroes, and whitespace — not a grid of lines.
   ONE masthead rule survives as the nameplate signature.
   ============================================================ */

/* The single authority rule: under the nameplate. Nothing doubled. */
.masthead-inner {
  border-bottom: 0;
  padding-bottom: 0.3rem;
}
.topnav {
  border-top: 0;
  border-bottom: 2px solid var(--ink);
}

/* No rules between stories — type size + space carry the tiers */
.story.secondary {
  border-top: 0;
  padding-top: 0;
}
.story.card {
  border-top: 0;
}
.story.lead,
.section-lead {
  border-bottom: 0;
  padding-bottom: 0;
}
.dateline {
  border-bottom: 0;
  padding-bottom: 0;
}
.secondary-row {
  gap: 2.8rem;
}
.card-grid {
  gap: 2.6rem 2.6rem;
}

/* Sidebar + article furniture: labels and space, no bars */
.panel-title {
  border-top: 0;
  padding-top: 0;
}
.panel-list li {
  border-bottom: 0;
}
.article-byline {
  border: 0;
  padding: 0;
}
.article-body blockquote {
  border-left: 0;
  padding-left: 1.6rem;
}
.source-box,
.chart,
.ai-note,
.related {
  border-top: 0;
  margin-top: 2.6rem;
}
.livewire {
  border-left: 0;
  border-top: 1px solid var(--rule);
}

/* Heroes borderless; the chart keeps one faint frame so data reads as a panel */
.lead-hero,
.photo-hero {
  border: 0;
}
.chart-hero {
  border: 1px solid var(--rule);
}

/* Section marks: a small teal signal, spaced out — not a repeated line */
.section-tick {
  margin: 3rem 0 1.2rem;
}

/* Phase 5.2 — fluid charts (no fixed width → no mobile overflow) + predictable grid */
.chart-svg {
  width: 100%;
  height: auto;
  display: block;
}
.card-grid {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 700px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Phase 6 — Dense & structured (WSJ/WaPo), founder's choice.
   Confident rules at HARMONIZED weights: one heavy nameplate rule
   → 2px tier rules → 1px hairlines → teal accents. Intentional,
   not the unharmonized "too many lines" of before.
   ============================================================ */

/* Nameplate — the single heaviest statement */
.masthead-inner {
  border-bottom: 3px solid var(--ink);
  padding-bottom: 0.7rem;
}
.topnav {
  border-top: 0;
  border-bottom: 1px solid var(--ink);
}

/* Vertical column rule between the main column and the rail (WSJ) */
@media (min-width: 821px) {
  .front-side,
  .context-rail {
    border-left: 1px solid var(--rule);
    padding-left: 2rem;
  }
}

/* Tier rules: 2px ink for secondaries, hairline for cards/briefs */
.dateline {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.7rem;
}
.story.secondary {
  border-top: 2px solid var(--ink);
  padding-top: 0.9rem;
}
.story.card {
  border-top: 1px solid var(--rule-strong);
  padding-top: 0.7rem;
}
.brief-item {
  border-top: 1px solid var(--rule);
}

/* Section dividers — full-width hairline carrying the teal mark */
.section-tick {
  border-top: 1px solid var(--ink);
  padding-top: 0.7rem;
  margin: 2.6rem 0 1.3rem;
}
.section-tick::before {
  width: 40px;
  height: 3px;
  background: var(--accent);
  top: -1px;
}

/* Sidebar panels — anchored */
.panel-title {
  border-top: 2px solid var(--ink);
  padding-top: 0.5rem;
  font-weight: 700;
}
.panel-list li {
  border-bottom: 1px solid var(--rule);
}

/* Live Wire — reads as a feed */
.livewire {
  border-left: 3px solid var(--accent);
  border-top: 1px solid var(--ink);
  padding-left: 1rem;
}

/* Article furniture */
.article-byline {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0.7rem 0;
}
.article-body blockquote {
  border-left: 2px solid var(--ink);
  padding-left: 1.4rem;
}
.source-box,
.ai-note,
.related {
  border-top: 1px solid var(--rule);
  padding-top: 1.1rem;
  margin-top: 2.2rem;
}

/* Frame the data hero firmly, with a teal cap (WSJ chart treatment) */
.chart-hero,
.photo-hero {
  border: 1px solid var(--ink);
}
.chart-hero {
  border-top: 3px solid var(--accent);
}

/* Phase 6.1 — chart-hero presence + cleaner type step + dark legibility */
.chart-hero .chart-svg {
  min-height: 190px;
}
@media (max-width: 700px) {
  .chart-hero .chart-svg {
    min-height: 140px;
  }
}
.secondary .hed {
  font-size: clamp(1.8rem, 5vw, 2.1rem);
}
.lead-hero figcaption,
.lead-hero .chart-note {
  font-size: 0.8rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --rule: #39444a;
  }
}

/* Phase 6.2 — chart furniture up, photo-hero parity, and a DEFINITIVE mobile
   type ladder (placed last so it wins over the non-media type rules). */
.chart-hero .chart-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.lead-hero .chart-note {
  font-size: 0.9rem;
}
.photo-hero {
  border-top: 3px solid var(--accent);
}

@media (max-width: 560px) {
  .masthead-title {
    font-size: clamp(1.7rem, 7vw, 2.2rem);
  }
  .lead-hed {
    font-size: clamp(2.3rem, 9vw, 3rem);
  }
  .article-hed {
    font-size: clamp(2rem, 8vw, 2.7rem);
  }
  .secondary .hed {
    font-size: clamp(1.4rem, 5.5vw, 1.7rem);
  }
  .small-hed {
    font-size: 1.4rem;
  }
  .masthead-dateline {
    display: block;
    font-size: 0.7rem;
    text-align: center;
    margin-top: 0.4rem;
    color: var(--ink-soft);
  }
}

/* ============================================================
   Phase 7 — CLEAN. Founder, repeatedly: "too many lines everywhere."
   Definitive: strip decorative rules and boxes. Hierarchy comes from
   the bold type ladder, the data-chart heroes, and whitespace. One
   light rule under the nav for orientation; nothing else.
   ============================================================ */
.masthead-inner {
  border-bottom: 0;
  padding-bottom: 0.4rem;
}
.topnav {
  border-top: 0;
  border-bottom: 1px solid var(--rule);
}
.front-side,
.context-rail {
  border-left: 0;
  padding-left: 0;
}
.dateline {
  border-bottom: 0;
  padding-bottom: 0;
}
.story.secondary,
.story.card {
  border-top: 0;
  padding-top: 0;
}
.brief-item,
.panel-list li {
  border-bottom: 0;
}
.panel-title {
  border-top: 0;
  padding-top: 0;
}
.article-byline {
  border: 0;
  padding: 0;
}
.article-body blockquote {
  border-left: 0;
  padding-left: 1.6rem;
}
.source-box,
.ai-note,
.related {
  border-top: 0;
  margin-top: 2.6rem;
}
.section-tick {
  border-top: 0;
  padding-top: 0;
  margin: 2.8rem 0 1.2rem;
}
.section-tick::before {
  display: none;
}
.livewire {
  border: 0;
  padding-left: 0;
}
.in-this-edition {
  border: 0;
  padding: 0;
}
/* Data heroes: frameless — the chart itself is the visual, no box */
.chart-hero,
.photo-hero {
  border: 0;
  background: transparent;
  padding: 0;
}
.chart-hero .chart-svg {
  min-height: 0;
}
/* Tiers read by size + air, not rules */
.front-grid {
  gap: 3rem;
}
.secondary-row {
  gap: 3rem;
}
.card-grid {
  gap: 2.8rem;
}

/* Phase 7.1 — calm, centered two-row nav (was an uneven left-wrap) */
.topnav-inner {
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.topnav ul {
  justify-content: center;
  padding: 0.5rem 0;
}
.topnav-meta {
  padding-top: 0;
}
.topnav-meta a {
  color: var(--ink-soft);
  font-size: 0.68rem;
}

/* ============================================================
   Phase 8 — manual light/dark theme toggle (overrides OS pref).
   data-theme on <html> wins over the prefers-color-scheme media
   query via higher specificity (:root[data-theme=…] = 0,2,0).
   ============================================================ */
:root[data-theme="light"] {
  --paper: #fcfcfa;
  --paper-2: #f6f7f4;
  --ink: #1b2327;
  --ink-soft: #6b7378;
  --accent: #0e7c7b;
  --accent-deep: #0a5b5a;
  --accent-wash: #e8f2f1;
  --rule: #e5e3dd;
  --rule-strong: #cfcdc5;
  --up: #0e7c4a;
  --down: #b3402f;
}
:root[data-theme="dark"] {
  --paper: #14181a;
  --paper-2: #1b2124;
  --ink: #e9ece9;
  --ink-soft: #9aa3a4;
  --accent: #3aa4a2;
  --accent-deep: #4cb8b4;
  --accent-wash: #16302f;
  --rule: #39444a;
  --rule-strong: #4a5560;
  --up: #4bbd7e;
  --down: #e08272;
}
.theme-toggle {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.theme-toggle:hover {
  color: var(--accent-deep);
}

/* ============================================================
   /newsroom/ — type-led staff directory. No boxes, no cards;
   hierarchy from the type ladder + whitespace. One hairline,
   to set the accountable human apart. Tokens only → light/dark.
   ============================================================ */
.newsroom .page-sub strong {
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
}

.roster {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--measure);
}
.roster-entry {
  margin: 0 0 2.8rem;
}

.roster-beat {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.4rem;
}
.roster-sep {
  color: var(--accent-deep);
}

.roster-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.55rem, 3vw, 2rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 0.45rem;
}
.roster-name a {
  color: var(--ink);
}
.roster-name a:hover {
  color: var(--accent-deep);
}

.roster-credo {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  margin: 0;
  max-width: 56ch;
}

/* The accountable human sits apart — the only hairline on the page. */
.roster-editor {
  max-width: var(--measure);
  margin-top: 3.2rem;
  padding-top: 2.6rem;
  border-top: 1px solid var(--rule);
}
.roster-editor .section-tick {
  margin: 0 0 1.5rem;
}
.roster-note {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0.9rem 0 0;
  max-width: 56ch;
}
.roster-note a {
  color: var(--accent-deep);
  font-weight: 600;
}