/* ==========================================================================
   A7i Intelligence design system
   Gulf Biotechnology Intelligence
   Updated 22 September 2026
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Core palette. The identity is approximately 80% monochrome. */
  --ink: #111214;
  --paper: #F4F1E9;
  --white: #FFFFFF;
  --graphite: #61646A;
  --rule: #D9D6CE;
  --brand: #A47B24;
  /* Gold is 3.86:1 on white, which fails AA for text. This is the text tone. */
  --brand-ink: #8B681E;

  /* Data and status colours. These appear in visualisations, status
     indicators and scientific classification only. They never set the
     mood of a page. */
  --bio: #287668;
  --clinical: #3F668F;
  --amber: #B27A26;
  --risk: #9D4A45;

  /* Derived tints, used only as chart fills and status chip backgrounds. */
  --bio-tint: #E4EEEB;
  --clinical-tint: #E6ECF2;
  --amber-tint: #F3EADA;
  --risk-tint: #F2E4E3;
  --brand-tint: #F0E8D8;

  /* Text on tinted surfaces, darkened for AA contrast. */
  --bio-ink: #1C5348;
  --clinical-ink: #2C486480;
  --clinical-text: #2C4864;
  --amber-ink: #7E5518;
  --risk-ink: #71332F;

  /* Typography */
  --serif: "Source Serif 4", "Source Serif Pro", Charter, "Bitstream Charter",
    Cambria, Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace;

  /* Measure and rhythm */
  --measure: 720px;
  --wide: 1180px;
  --gutter: 24px;

  --step-0: 1.0625rem;  /* 17px body */
  --step-1: 1.25rem;
  --step-2: 1.5rem;
  --step-3: 1.9375rem;
  --step-4: 2.5rem;
  --step-5: 3.25rem;

  --label: 0.6875rem;
  --small: 0.8125rem;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

/* The browser default for figure, blockquote and dl is `margin: 1em 40px`,
   which inset every graphic on this site by 40px against everything around
   it and ate 80px of a phone screen. */
figure, blockquote, dl, dd { margin: 0; }
fieldset { margin: 0; padding: 0; border: 0; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}

@media (max-width: 600px) {
  body { font-size: 1rem; }
}

img, svg { max-width: 100%; }
svg { display: block; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { text-decoration-color: var(--brand); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 1px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  z-index: 100;
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 550;
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); font-weight: 500; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

@media (max-width: 720px) {
  h1 { font-size: var(--step-3); }
  h2 { font-size: var(--step-2); }
  /* The lede must sit below the headline in the hierarchy, not beside it. */
  .lede { font-size: 1.0625rem; line-height: 1.55; }
}

p { margin: 0 0 1.15em; }

/* Plain uppercase structural labels, Monocle-style. No full stops. */
.label,
.eyebrow {
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0;
}

/* A section heading is a heading, not a label. At 11px mono uppercase it
   carried no more weight than the timestamp beside it. */
.section-head h2 {
  font-family: var(--serif);
  font-size: var(--step-2);
  font-weight: 550;
  letter-spacing: -0.012em;
  text-transform: none;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-top: 2px solid var(--ink);
  padding-top: 14px;
  margin-bottom: 24px;
}
.section-head .updated { white-space: nowrap; }
/* These read as section navigation, not as links inside a paragraph, so they
   carry a touch target rather than a bare 15px line box. */
.section-head .updated a,
.tracker-head a { display: inline-block; padding: 4px 0; }
/* Section label and its timestamp stack rather than collide. This has to sit
   after the base rule above, not in the earlier typography block. */
@media (max-width: 720px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 16px; }
  .section-head .updated { white-space: normal; }
}

.updated,
.meta,
.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--small);
  color: var(--graphite);
}

.num-lg {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--step-3);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink);
}

em, i { font-style: italic; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.wrap {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.measure { max-width: var(--measure); }

section { margin: 0 0 64px; }
@media (max-width: 720px) { section { margin-bottom: 48px; } }

.surface {
  background: var(--white);
  border: 1px solid var(--rule);
  padding: 24px;
}


/* A page that opens with a headline and a standfirst rather than the hero
   band still needs the same breathing room under the headline. */
.article > .measure > h1,
.article > .measure > h2 { margin-top: 0; }
.article > .measure > h1 + .lede { margin-top: 16px; }
.article > .measure > h2 { margin-top: 36px; }
.article > .measure > .lede + p { margin-top: 20px; }
@media (max-width: 720px) {
  .article > .measure > h2 { margin-top: 28px; }
}

/* Lead item. On a wide screen the analysis sits beside the report rather
   than leaving half the page empty. */
.lead { display: grid; gap: 28px; padding: 28px; }
.lead .kicker {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.lead h3 {
  font-family: var(--serif);
  font-size: var(--step-3);
  line-height: 1.16;
  margin: 14px 0 14px;
  max-width: 30ch;
}
.lead-main p { max-width: 62ch; margin: 0; }
.lead-side { display: flex; flex-direction: column; gap: 14px; }
.lead-side .why {
  border-left: 2px solid var(--brand);
  padding-left: 14px;
  color: var(--ink);
  margin: 0;
  font-size: 0.9375rem;
}
.lead-side .meta { margin: 0; }
@media (min-width: 900px) {
  .lead { grid-template-columns: minmax(0, 1.55fr) minmax(240px, 1fr); gap: 40px; }
  .lead-side { border-left: 1px solid var(--rule); padding-left: 32px; }
  .lead h3 { font-size: var(--step-4); }
}
@media (max-width: 720px) {
  .lead { padding: 20px; gap: 20px; }
  .lead h3 { font-size: var(--step-2); max-width: none; margin: 12px 0; }
}

/* Groups of data modules read as one block instead of four thin bands each
   carrying its own rule and heading. */
.tracker {
  border: 1px solid var(--rule);
  background: var(--white);
  padding: 4px 24px 24px;
}
.tracker-group { margin-top: 24px; }
.tracker-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.tracker-head h3 {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--brand-ink);
}
.tracker-head a {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.04em;
  color: var(--graphite);
  white-space: nowrap;
}
.tracker-head a:hover { color: var(--ink); }
.tracker-note { margin-top: 12px; }
@media (max-width: 720px) {
  .tracker { padding: 2px 16px 18px; }
  .tracker-group { margin-top: 20px; }
  .tracker-head { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* Hairline rules are drawn by each cell's outline rather than by a grey
   background showing through the gaps, so a grid with an odd number of
   items leaves no grey block where a cell would have been. */
/* Each cell draws its own hairline with an outline, which takes no layout
   space and meets its neighbour's in the 1px gap. No container border, so a
   grid with an odd number of items shows a gap where a cell would have been
   rather than an empty boxed-in square. */
.grid { display: grid; gap: 1px; background: transparent; border: 0; }
.grid > * { background: var(--white); outline: 1px solid var(--rule); }

/* minmax(0, 1fr) rather than 1fr: a long unbreakable value such as
   "Undisclosed" would otherwise set the track's minimum and push the grid
   past its container. */
/* Card grids do not stretch. A short item in a row with a long one was left
   with up to 200px of white between its last paragraph and its footer. */
.grid--cards {
  gap: 18px;
  background: transparent;
  border: 0;
  align-items: start;
}
.grid--cards > * { outline: 0; border: 1px solid var(--rule); }
/* A single row of four peer teasers reads better level. The multi-row wire,
   where item length varies by hundreds of pixels, does not. */
.grid--cards.g-4 { align-items: stretch; }
@media (max-width: 600px) { .grid--cards { gap: 14px; } }

.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) { .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }
/* Data modules are short. Stacking them one per screen made the phone
   homepage ten thousand pixels long, so they stay two across. */
@media (max-width: 600px) {
  .grid:has(> .stat) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid:has(> .stat) .stat { padding: 14px; }
  .grid:has(> .stat) .stat .v { font-size: var(--step-1); }
  /* An odd last tile spans the row so no empty grey cell is left behind. */
  .grid:has(> .stat) > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   5. Masthead and navigation
   -------------------------------------------------------------------------- */

.masthead {
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  position: sticky;
  top: 0;
  z-index: 40;
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 12px;
}

.wordmark { text-decoration: none; display: block; }
.wordmark .mark {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  display: block;
}
.wordmark .descriptor {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphite);
  display: block;
  margin-top: 5px;
}

.nav { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.nav a {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--brand); }
.nav a[aria-current="page"] { border-bottom-color: var(--ink); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--ink);
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    border-top: 1px solid var(--rule);
    margin-top: 12px;
    padding-top: 8px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 10px 0; width: 100%; border-bottom: 1px solid var(--rule); }
  .masthead-inner { flex-wrap: wrap; }
}

/* Market selector */
.market-bar {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.market-bar .wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding-top: 9px;
  padding-bottom: 9px;
  scrollbar-width: thin;
}
.market-bar .label { flex: none; }
.market-bar [role="group"] { display: flex; gap: 10px; flex: none; }
.market-bar .market-note { flex: none; }
@media (max-width: 720px) {
  /* The note is guidance, not a control. It goes under the scrolling chips. */
  .market-bar .wrap { flex-wrap: wrap; row-gap: 6px; }
  .market-bar .market-note { flex-basis: 100%; }
}

.chip {
  flex: none;
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--graphite);
  padding: 6px 11px;
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { border-color: var(--graphite); color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero { padding: 76px 0 60px; border-bottom: 1px solid var(--rule); margin-bottom: 56px; }
/* 15ch measured 403px at 52px type, which broke the masthead line into four.
   Two or three lines is the intended reading. */
.hero h1 { font-size: var(--step-5); max-width: 26ch; line-height: 1.08; }
.hero .lede { max-width: 58ch; margin-top: 24px; }
.hero .brandline {
  margin-top: 26px;
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-ink);
}

@media (max-width: 1080px) {
  .hero h1 { max-width: 20ch; }
}
@media (max-width: 720px) {
  .hero { padding: 40px 0 34px; margin-bottom: 40px; }
  .hero h1 { font-size: var(--step-4); max-width: none; line-height: 1.12; }
  .hero .lede { margin-top: 18px; }
  .hero .brandline { margin-top: 20px; }
}

/* --------------------------------------------------------------------------
   7. Cards and lists
   -------------------------------------------------------------------------- */

.card { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.card .kicker {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
/* Inside a grid, reserve two lines so every headline starts on the same
   baseline whether the label fits on one line or two. */
.grid .card .kicker { align-content: flex-start; }
.grid .card .kicker--theme { min-height: 44px; }
.grid.g-3 .card .kicker--theme { min-height: 0; }
@media (max-width: 600px) { .grid .card .kicker--theme { min-height: 0; } }
.card h3 {
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.008em;
}
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; text-decoration-color: var(--brand); }
.card p { margin: 0; font-size: 0.9375rem; color: var(--ink); }
.card .why {
  border-left: 2px solid var(--rule);
  padding-left: 12px;
  color: var(--graphite);
  font-size: 0.9375rem;
}
.card footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.04em;
  color: var(--graphite);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* Classification and status chips */
.tag {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.tag--capital { color: var(--bio-ink); }
.tag--regulation { color: var(--amber-ink); }
.tag--science, .tag--clinical { color: var(--clinical-text); }
.tag--manufacturing, .tag--infrastructure { color: var(--graphite); }
.tag--global { color: var(--brand-ink); }
.tag--interp { color: var(--risk-ink); background: var(--risk-tint); border-style: dashed; }
.tag--contested { color: var(--risk-ink); }

.status {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.status::before {
  content: "";
  width: 9px; height: 9px;
  border: 1.5px solid currentColor;
  flex: none;
}
/* Shape, not colour alone, carries status. */
.status--operational::before { background: currentColor; border-radius: 50%; }
.status--operational { color: var(--bio-ink); }
.status--construction::before { border-radius: 0; background: currentColor; }
.status--construction { color: var(--amber-ink); }
.status--signed::before { border-radius: 0; transform: rotate(45deg); background: currentColor; }
.status--signed { color: var(--clinical-text); }
.status--announced::before { border-radius: 0; transform: rotate(45deg); }
.status--announced { color: var(--graphite); }
.status--proposed::before { border-radius: 50%; }
.status--proposed { color: var(--graphite); }
.status--cancelled::before { background: currentColor; clip-path: polygon(0 40%,40% 40%,40% 0,60% 0,60% 40%,100% 40%,100% 60%,60% 60%,60% 100%,40% 100%,40% 60%,0 60%); border: 0; }
.status--cancelled { color: var(--risk-ink); }
/* Regulatory force. Filled means binding; the emptier the mark, the weaker the instrument. */
.status--mandatory::before { background: currentColor; border-radius: 0; }
.status--mandatory { color: var(--bio-ink); }
.status--voluntary::before { border-radius: 0; }
.status--voluntary { color: var(--amber-ink); }
.status--guidance::before { border-radius: 50%; }
.status--guidance { color: var(--graphite); }
.status--draft::before { border-radius: 50%; border-style: dashed; }
.status--draft { color: var(--graphite); }

/* A note under a graphic is a note, not an alarm. */
.fignote {
  font-size: var(--small);
  color: var(--graphite);
  margin: 12px 0 0;
  max-width: 76ch;
}
.notewell {
  font-size: 0.875rem;
  color: var(--graphite);
  border-left: 2px solid var(--rule);
  padding-left: 12px;
  margin: 0 0 1.15em;
}

.a7i-disclaimer {
  font-family: var(--mono);
  font-size: var(--small);
  color: var(--graphite);
  border: 1px solid var(--rule);
  padding: 12px 14px;
  background: var(--white);
}

/* --------------------------------------------------------------------------
   8. Data modules
   -------------------------------------------------------------------------- */

.stat { padding: 20px; }
.stat .k {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite);
  display: block;
  margin-bottom: 10px;
}
.stat .v { overflow-wrap: break-word; hyphens: auto; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--step-3); font-weight: 500; letter-spacing: -0.02em; display: block; line-height: 1.05; }
.stat .d { font-size: var(--small); color: var(--graphite); margin-top: 8px; display: block; }

/* Anchors must clear the sticky masthead. */
:target,
.figure,
.card[id],
section[id] { scroll-margin-top: 108px; }

/* Figure wrapper for every graphic */
.figure {
  background: var(--white);
  border: 1px solid var(--rule);
  padding: 22px;
}
.figure > figcaption { margin-bottom: 18px; }
.figure h2 { font-size: var(--step-1); margin-bottom: 8px; }
.figure .explain { font-size: 0.9375rem; color: var(--ink); margin: 0 0 10px; max-width: 70ch; }
.figure .figmeta {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.05em;
  color: var(--graphite);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  padding-top: 10px;
  margin-top: 14px;
}
.figure .figmeta a { color: var(--graphite); }

/* Each control is a label bound to its select. They wrap as a pair, so a
   label never ends up stranded beside the previous control's menu. */
.fig-controls {
  display: flex;
  gap: 8px 18px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  align-items: center;
}
.fig-controls .field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-width: 0;
}
/* A select sizes itself to its longest option, so one long sector name pushes
   the whole control row past the container. Cap it and let the closed state
   truncate: the full text is there the moment the reader opens it. */
.fig-controls .field select,
.fig-controls .field input {
  max-width: 22ch;
  min-width: 0;
  text-overflow: ellipsis;
}
@media (max-width: 560px) {
  .fig-controls { gap: 10px; }
  .fig-controls .field { width: 100%; justify-content: space-between; }
  .fig-controls .field select { flex: 1 1 auto; min-width: 0; max-width: 62%; }
}

/* A three-column flow diagram cannot shrink to a phone's width and stay
   legible. Below its natural size it keeps that size and the reader swipes,
   exactly as a wide table does. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-hint { margin: 8px 0 0; }
.fig-controls select {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 10px;
  border: 1px solid var(--rule);
  background: var(--white);
  color: var(--ink);
}

/* Accessible table alternative, present for every complex graphic */
.alt-table { margin-top: 18px; }
.alt-table > summary {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--graphite);
  padding: 8px 0;
  border-top: 1px solid var(--rule);
}
.alt-table > summary:hover { color: var(--ink); }

/* Tables are built narrow enough to fit the column. The wrapper is a safety
   net for the heatmap and for very small screens, not the normal case. */
.tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--small);
}
caption {
  text-align: left;
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite);
  padding: 10px 0;
}
th, td {
  text-align: left;
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
thead th {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
  font-weight: 500;
  line-height: 1.35;
  vertical-align: bottom;
}
/* A long entity name must not be able to set the column width. break-word
   keeps the minimum at one whole word, so columns are not squeezed to a
   single character the way `anywhere` allowed. */
th, td { overflow-wrap: break-word; }
thead th.n { white-space: nowrap; }
/* Row headers are content, not labels. They carry the detail that used to
   sit in eight more columns, so they take the width. */
tbody th[scope="row"] {
  font-family: var(--sans);
  font-size: var(--small);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  line-height: 1.4;
  /* width:100% makes the content column absorb the leftover space while the
     short columns size to their content, instead of leaving a gap mid-table. */
  width: 100%;
}
/* Detail folded into the row header: what used to be its own column. */
.rowsub {
  display: block;
  font-weight: 400;
  font-size: var(--label);
  line-height: 1.45;
  color: var(--graphite);
  margin-top: 3px;
  text-transform: none;
  letter-spacing: 0;
}
.rowsub a { color: var(--graphite); }
.rowsub a:hover { color: var(--ink); }
/* A published caveat. Visible, not hidden behind a tooltip. */
.rowflag {
  display: block;
  font-weight: 400;
  font-size: var(--label);
  line-height: 1.45;
  color: var(--risk);
  margin-top: 5px;
  padding-left: 9px;
  border-left: 2px solid var(--risk);
  text-transform: none;
  letter-spacing: 0;
}
td.n, th.n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  /* Right-aligned numbers ran straight into the next column's text. */
  padding-right: 16px;
  white-space: nowrap;
}
td.n:last-child, th.n:last-child { padding-right: 0; }
td.n .rowsub, th.n .rowsub { text-align: right; }
/* A list inside a cell is content, not a bulleted section. */
.cell-list { margin: 0; padding-left: 16px; }
.cell-list li { margin-bottom: 3px; }
.cell-list.gaps { color: var(--risk-ink); }

@media (max-width: 720px) {
  th, td { padding: 8px 10px 8px 0; }
  table { font-size: 0.8125rem; }
  /* 520px squeezed the content column to one or two words per line and made
     every row a tower. The table keeps workable proportions and the reader
     swipes it, the same as a wide diagram. */
  .tablewrap table:not(.heat) { min-width: 700px; }
  .tablewrap { position: relative; }
}
.tablehint { margin: 8px 0 0; }
@media (min-width: 721px) { .tablehint { display: none; } }

/* Heatmap */
/* Twelve sector columns. The headings wrap so the matrix fits the column
   instead of running a metre and a half wide. */
.heat { table-layout: fixed; }
/* Twelve sector names cannot be read across a 58px column, so they stand on
   end. Vertical text keeps every label whole and the matrix on one screen. */
.heat thead th.cellhead {
  width: 58px;
  padding: 0 0 10px;
  vertical-align: bottom;
  text-align: left;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  border-bottom: 0;
}
.heat thead th.cellhead > span {
  display: inline-block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding-left: 20px;
}
.heat tbody th[scope="row"] { width: auto; padding-right: 10px; }
.heat td.cell {
  text-align: center;
  padding: 0;
  border: 1px solid var(--white);
  width: 58px;
}
.heat td.cell span {
  display: block;
  padding: 12px 4px;
  font-family: var(--mono);
  font-size: var(--small);
  font-variant-numeric: tabular-nums;
}
.lv0 { background: #EEEBE3; color: #8A8D93; }
.lv1 { background: var(--brand-tint); color: #6E5418; }
.lv2 { background: #DCEAE6; color: var(--bio-ink); }
.lv3 { background: var(--bio); color: #FFFFFF; }
.lv-low { position: relative; }
.lv-low::after {
  content: "?";
  position: absolute;
  top: 2px; right: 4px;
  font-size: 9px;
  opacity: 0.85;
}

/* Capital flow, read as three ranked lists rather than a ribbon diagram. */
.bars { display: grid; gap: 28px; }
@media (min-width: 860px) { .bars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; } }
.bars-title {
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ink);
}
.bars-list { list-style: none; margin: 0; padding: 0; }
.bar-row { display: grid; gap: 4px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.bar-row:last-child { border-bottom: 0; }
.bar-label { font-size: var(--small); color: var(--ink); line-height: 1.35; }
.bar-track { display: block; height: 9px; background: var(--paper); }
.bar-fill { display: block; height: 100%; background: var(--ink); }
.bar-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--small);
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.bar-share { color: var(--graphite); }
.bars-total {
  font-size: var(--small);
  color: var(--graphite);
  margin: 24px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  max-width: 76ch;
}

/* Timeline */
.timeline-svg .axis line, .timeline-svg .axis path { stroke: var(--rule); }
.timeline-svg text { font-family: var(--mono); font-size: 10px; fill: var(--graphite); }

/* Map */
.map svg { width: 100%; height: auto; }
.map .country { fill: #EAE6DC; stroke: var(--rule); stroke-width: 1; }
.map .country.active { fill: #E0DACB; }


/* Regulatory profiles. Sixteen fields across six markets is unreadable as
   six columns of prose; each market gets a card and the matrix stays as the
   table alternative beneath. */
.reg-grid { display: grid; gap: 16px; align-items: start; }
@media (min-width: 720px)  { .reg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .reg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.reg-card { border: 1px solid var(--rule); background: var(--white); padding: 18px; }
.reg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 8px;
  margin-bottom: 4px;
}
.reg-head h4 { font-size: var(--step-1); }
.reg-list { margin: 0; }
.reg-row { padding: 9px 0; border-bottom: 1px solid var(--rule); }
.reg-row:last-child { border-bottom: 0; padding-bottom: 0; }
.reg-row dt {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 3px;
}
.reg-row dd { margin: 0; font-size: var(--small); line-height: 1.5; }

/* Map beside the list of what is on it. The map no longer fills a whole
   screen on its own, and the assets are legible without opening a table. */
.mapwrap { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) {
  .mapwrap { grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.95fr); gap: 32px; }
}
.maplist-title {
  font-family: var(--mono);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ink);
}
.maplist-items { list-style: none; margin: 0; padding: 0; max-height: 560px; overflow-y: auto; }
.maplist-item {
  display: grid;
  gap: 1px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}
.maplist-item:last-child { border-bottom: 0; }
.maplist-name { font-size: var(--small); font-weight: 600; line-height: 1.35; }
.maplist-where { font-size: var(--label); color: var(--graphite); }
.maplist-where .status { font-size: var(--label); }
.maplegend { margin-top: 14px; }


/* Value chain. The nine stages carry very different amounts of evidence, so
   the cells size to their content instead of stretching to the tallest in
   the row, which left half a screen of white under the short ones. */
.chain {
  display: grid;
  gap: 16px;
  align-items: start;
  background: transparent;
  border: 0;
}
.chain-stage {
  background: var(--white);
  border: 1px solid var(--rule);
  padding: 18px;
}
.chain-stage .n {
  font-family: var(--mono);
  font-size: var(--label);
  color: var(--graphite);
  letter-spacing: 0.1em;
}
.chain-stage h4 { margin: 6px 0 10px; font-size: var(--step-1); line-height: 1.2; }
.chain-stage .meta { margin: 0 0 10px; }
.chain-stage ul { margin: 0 0 10px; padding-left: 18px; font-size: var(--small); }
.chain-stage ul:last-child { margin-bottom: 0; }
.chain-stage li { margin-bottom: 4px; line-height: 1.45; }
.chain-stage .gaps { color: var(--risk-ink); }
.chain-bar { height: 4px; margin-bottom: 12px; }
.bar-operating { background: var(--bio); }
.bar-building { background: var(--amber); }
.bar-early { background: var(--clinical); }
.bar-thin { background: var(--risk); }
.bar-strong { background: var(--bio); }

@media (min-width: 640px) { .chain { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .chain { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   9. Article pages
   -------------------------------------------------------------------------- */

.article { padding: 48px 0 0; }
.article-head { max-width: var(--measure); }
/* A single reading column left-aligned in a 1180px wrap leaves a third of a
   wide screen blank on one side. Long-form centres. */
@media (min-width: 1000px) {
  .article > .measure,
  .article-head,
  .article-body,
  .article > .article-foot { margin-left: auto; margin-right: auto; }
}
.article-head h1 { font-size: var(--step-4); }
.article-head .standfirst {
  font-family: var(--serif);
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--graphite);
  margin: 16px 0 24px;
}
.byline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--graphite);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 12px 0;
}
.byline a { color: var(--ink); }

.article-body { max-width: var(--measure); margin-top: 34px; font-size: var(--step-0); }
.article-body h2 {
  font-size: var(--step-2);
  margin: 38px 0 14px;
}
.article-body p { line-height: 1.6; }

.article-foot { max-width: var(--measure); margin-top: 44px; }
.article-foot h2 { font-size: var(--step-1); margin-bottom: 10px; }
.article-foot .block { border-top: 1px solid var(--ink); padding: 16px 0 24px; }
.article-foot ol, .article-foot ul { padding-left: 20px; margin: 0; font-size: var(--small); }
.article-foot li { margin-bottom: 8px; }



/* --------------------------------------------------------------------------
   10. Subscribe and footer
   -------------------------------------------------------------------------- */

.dark {
  background: var(--ink);
  color: var(--paper);
}
.dark .label, .dark .meta, .dark .updated { color: #A7A9AE; }
.dark a { color: var(--paper); }
.dark .section-head { border-top-color: #3A3C41; }
.dark .section-head h2 { color: var(--paper); }

.subscribe { padding: 56px 0; margin-bottom: 0; }
.subscribe h2 { font-size: var(--step-3); max-width: 20ch; }
.subscribe p { max-width: 54ch; color: #C9CBCF; }
.sub-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; max-width: 520px; }
.sub-form input {
  flex: 1 1 240px;
  font-family: var(--sans);
  font-size: var(--step-0);
  padding: 12px 14px;
  border: 1px solid #4A4C51;
  background: #1A1C1F;
  color: var(--paper);
}
.sub-form input::placeholder { color: #85888E; }
.sub-form button {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 20px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--paper);
  cursor: pointer;
}
.sub-form button:hover { background: var(--brand); border-color: var(--brand); color: var(--white); }

.sitefoot { background: var(--ink); color: var(--paper); padding: 48px 0 32px; }
.sitefoot .cols { display: grid; gap: 28px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 800px) { .sitefoot .cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sitefoot .cols { grid-template-columns: 1fr; } }
.sitefoot h3 {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #A7A9AE;
  font-weight: 500;
  margin-bottom: 12px;
}
.sitefoot ul { list-style: none; margin: 0; padding: 0; }
.sitefoot li { margin-bottom: 8px; font-size: 0.9375rem; }
.sitefoot .colophon {
  border-top: 1px solid #3A3C41;
  margin-top: 36px;
  padding-top: 20px;
  font-size: var(--small);
  color: #A7A9AE;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   11. Utilities
   -------------------------------------------------------------------------- */

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.stack > * + * { margin-top: 14px; }
.muted { color: var(--graphite); }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 32px 0; }
.empty {
  font-family: var(--mono);
  font-size: var(--small);
  color: var(--graphite);
  padding: 22px;
  border: 1px dashed var(--rule);
  text-align: center;
}

.btn-quiet {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  background: var(--white);
  color: var(--ink);
  padding: 8px 12px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn-quiet:hover { border-color: var(--ink); }

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

@media print {
  .masthead, .market-bar, .subscribe, .sitefoot, .fig-controls { display: none; }
  body { background: #fff; }
  .figure, .surface, .grid { border-color: #999; }
}

/* --------------------------------------------------------------------------
   Hero actions, momentum dashboard, opportunity signals, global reach
   -------------------------------------------------------------------------- */

.hero-status {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.hero-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bio);
  flex: none;
}
.hero-sub {
  font-size: 1.0625rem;
  color: var(--graphite);
  max-width: 54ch;
  margin: 10px 0 0;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px 20px;
  border: 1px solid var(--ink);
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: #2A2C31; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

/* A momentum figure is a door to its dataset, not a decoration. */
.stat--link { text-decoration: none; display: block; }
.stat--link:hover { background: #FBFAF7; }
.stat--link:hover .v { color: var(--brand); }
.momentum .v { font-size: var(--step-3); }
.momentum-note { margin-top: 14px; max-width: 76ch; }

.section-lede { margin: -6px 0 20px; color: var(--graphite); font-size: 0.9375rem; }

/* Opportunity created and next milestone, on every record that carries them. */
.opp, .milestone {
  font-size: 0.9375rem;
  margin: 0 0 0.9em;
  padding-left: 12px;
  border-left: 2px solid var(--bio);
  color: var(--ink);
}
.milestone { border-left-color: var(--brand); color: var(--graphite); }
.opp strong, .milestone strong {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  display: block;
  color: var(--graphite);
  margin-bottom: 2px;
}
.lead-side .opp, .lead-side .milestone { margin: 0; }

.opp-card h3 { font-size: var(--step-2); }
.opp-lead { font-size: 0.9375rem; margin: 0 0 4px; }
.opp-list { margin: 0; }
.opp-list > div { padding: 8px 0; border-top: 1px solid var(--rule); }
.opp-list dt {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 2px;
}
.opp-list dd { margin: 0; font-size: var(--small); line-height: 1.5; color: var(--ink); }

.tag--emerging {
  border-color: var(--amber);
  color: var(--amber-ink);
  background: var(--amber-tint);
}

.reach-list { list-style: none; margin: 12px 0 14px; padding: 0; }
.reach-list li {
  font-size: var(--small);
  padding: 7px 0;
  border-top: 1px solid var(--rule);
  color: var(--ink);
}

@media (max-width: 720px) {
  .hero-actions { gap: 10px; }
  .btn { flex: 1 1 100%; text-align: center; }
  .hero-status { margin-bottom: 14px; }
}

/* Translation pipeline. Seven stages, each a filter for the tracker below. */
.pipeline { display: grid; gap: 10px; }
@media (min-width: 640px)  { .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .pipeline { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .pipeline { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.pipe-stage {
  display: grid;
  gap: 2px;
  align-content: start;
  text-align: left;
  padding: 12px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--rule);
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.pipe-stage:hover { border-top-color: var(--brand); }
.pipe-stage[aria-pressed="true"] { border-top-color: var(--bio); background: var(--bio-tint); }
.pipe-n {
  font-family: var(--mono);
  font-size: var(--label);
  color: var(--graphite);
  letter-spacing: 0.1em;
}
.pipe-name {
  font-family: var(--sans);
  font-size: var(--small);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 4px;
}
.pipe-count {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--step-2);
  line-height: 1.05;
}
.pipe-sub { font-size: var(--label); color: var(--graphite); line-height: 1.4; }
.pipe-note { margin-top: 14px; }

/* Keyword search sits in the same control row as the filters. */
.fig-controls input[type="search"] {
  font-family: var(--sans);
  font-size: var(--small);
  padding: 7px 10px;
  border: 1px solid var(--rule);
  background: var(--white);
  color: var(--ink);
  min-width: 190px;
}
.field--search { flex: 1 1 200px; }
@media (max-width: 560px) { .field--search select, .field--search input { max-width: 62%; } }
.tag--preprint { border-color: var(--clinical); color: var(--clinical-text); background: var(--clinical-tint); }
.rowsub .tag, th .tag { margin-top: 5px; display: inline-block; }

/* A heading the page structure needs but the design does not show. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Graphite on the dark footer ground is 3.16:1. This tone clears AA. */
.sitefoot .muted,
.sitefoot .colophon { color: #7C7F85; }

/* A headline that happens to be a link is still a headline. */
.lead h3 a { text-decoration: none; }
.lead h3 a:hover { text-decoration: underline; text-decoration-color: var(--brand); }

/* ── A7i finding ──────────────────────────────────────────────────────────
   A published question with its answer and the documents behind it. Given a
   distinct surface because it is the one place on the site where A7i states a
   negative conclusion, and a reader should be able to see it is not an article. */
.finding {
  border: 1px solid var(--ink);
  border-left-width: 4px;
  padding: 26px 24px 22px;
  background: #fff;
}
.finding > .label { margin: 0 0 10px; color: var(--brand-ink); }
.finding h2 {
  font-size: var(--step-2);
  font-weight: 550;
  margin: 0 0 14px;
  max-width: 40ch;
}
.finding h3 {
  font-size: var(--step-1);
  margin: 26px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.finding-verdict { margin: 0 0 16px; }
.verdict {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  padding: 6px 16px;
}
.finding-summary { font-size: var(--step-1); line-height: 1.5; }
.finding .measure > p { margin: 0 0 12px; }

.evidence {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  counter-reset: ev;
}
.evidence > li {
  counter-increment: ev;
  padding: 14px 0 14px 46px;
  border-top: 1px solid var(--rule);
  position: relative;
  max-width: 82ch;
}
.evidence > li::before {
  content: counter(ev);
  position: absolute;
  left: 0; top: 14px;
  font-family: var(--mono);
  font-size: var(--label);
  color: var(--brand-ink);
  border: 1px solid var(--rule);
  width: 28px; height: 28px;
  display: grid; place-items: center;
}
.ev-point { margin: 0 0 6px; font-weight: 550; }
.ev-detail { margin: 0 0 8px; color: var(--ink); }
.evidence .meta { margin: 0; }

/* Claims checked and not carried. Plain list, no alarm colour: this is a
   record of work done, not a warning. */
.cautions { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cautions > li {
  padding: 14px 0 0;
  border-top: 1px solid var(--rule);
  font-size: var(--small);
  color: var(--ink);
}
.caution-status {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-ink);
}

@media (max-width: 640px) {
  .finding { padding: 20px 16px 18px; border-left-width: 3px; }
  /* A long verdict set at 20px is a lot of phone scrolling for no added
     clarity. The verdict badge above it already carries the emphasis. */
  .finding-summary { font-size: var(--step-0); }
  .evidence > li { padding-left: 38px; }
  .evidence > li::before { width: 24px; height: 24px; }
}

/* Source and methodology links sit alone in a cell or a metadata line, so they
   are targets rather than words in a sentence, and 15px of line box is not
   enough to hit on a phone. The pseudo-element grows the hit area to 24px
   without moving anything on the page. */
@media (pointer: coarse), (max-width: 760px) {
  .figmeta a, .meta a, .rowsub a, .card footer a {
    position: relative;
  }
  .figmeta a::after, .meta a::after, .rowsub a::after, .card footer a::after {
    content: "";
    position: absolute;
    inset: -7px -2px;
  }
  /* Inside a table an overlay would reach into the row above, so a tap near the
     boundary would follow the wrong source. The cell grows instead. */
  td > a, th > a {
    display: inline-block;
    padding-block: 5px;
  }
  /* A card title or a paragraph holding a single link is a target, not a word
     in a sentence. :only-child guarantees one link, so nothing inside the same
     block can overlap, and block margins keep neighbours clear. */
  .card h3 > a:only-child,
  .measure p > a:only-child,
  .prose p > a:only-child,
  .article-body p > a:only-child { position: relative; }
  .card h3 > a:only-child::after,
  .measure p > a:only-child::after,
  .prose p > a:only-child::after,
  .article-body p > a:only-child::after {
    content: "";
    position: absolute;
    inset: -6px -2px;
  }
  /* List items sit 8px apart, so each link claims half the gap and no more:
     adjacent hit areas meet without overlapping. */
  .sitefoot li a, .sitefoot p a, .sitefoot .colophon a,
  .article-foot li a { position: relative; }
  .sitefoot li a::after, .sitefoot p a::after {
    content: "";
    position: absolute;
    inset: -4px -2px;
  }
  /* Titles in a list of links are the one case where 8px between items leaves
     no room for a 24px target, so those lists open up on a phone. */
  .article-foot li, .linklist li { margin-bottom: 14px; }
  .linklist li > a { position: relative; }
  .article-foot li a::after, .linklist li > a::after {
    content: "";
    position: absolute;
    inset: -6px -2px;
  }
  /* Colophon spans sit 16px apart, so the contact link can take a full box. */
  .sitefoot .colophon a::after {
    content: "";
    position: absolute;
    inset: -6px -3px;
  }
}

/* A table whose first column carries the substance should not be starved by a
   column of dates. colgroup sets the intent; auto layout does the rest. */
.c-wide { width: 38%; }
.c-med { width: 20%; }

/* ── A7i assessment, folded ───────────────────────────────────────────────
   The opportunity reading and the milestone to watch are the publication's
   own judgment rather than the news. Printed on the face of every card they
   outweighed the reporting almost two to one and gave fifty-one consecutive
   items the same silhouette. Folded, the news leads and the reader opens the
   assessment deliberately. */
.assess {
  margin: 0;
  border-top: 1px solid var(--rule);
  padding-top: 10px;
}
.assess > summary {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-ink);
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 0;
}
.assess > summary::-webkit-details-marker { display: none; }
.assess > summary::before {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) translate(-1px, -1px);
  transition: transform .15s ease;
  flex: none;
}
.assess[open] > summary::before { transform: rotate(45deg) translate(-2px, -2px); }
.assess > summary:hover { color: var(--ink); }
.assess > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.assess .opp, .assess .milestone {
  margin: 10px 0 0;
  font-size: 0.9375rem;
  color: var(--ink);
  border-left: 2px solid var(--rule);
  padding-left: 12px;
}
.assess .opp strong, .assess .milestone strong {
  font-family: var(--mono);
  font-size: var(--label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--graphite);
  display: block;
  margin-bottom: 3px;
  font-weight: 500;
}

/* The finding, in its homepage form: the question, the verdict and the summary.
   The evidence stays on the section page where a reader can work through it. */
.finding-teaser { padding: 24px; }
.finding-teaser > .label { margin: 0 0 8px; color: var(--brand-ink); }
.finding-teaser h3 {
  font-size: var(--step-2);
  font-weight: 550;
  margin: 0 0 14px;
  max-width: 42ch;
}
.finding-teaser h3 a { text-decoration: none; }
.finding-teaser h3 a:hover { text-decoration: underline; text-decoration-color: var(--brand); }
.finding-teaser p { max-width: var(--measure); }
.finding-teaser .finding-verdict { margin: 0 0 14px; }
.finding-teaser .meta { margin: 12px 0 0; }
@media (max-width: 640px) { .finding-teaser { padding: 18px 16px; } }