/* ==========================================================================
   Use-case reports — the long-form article pages under /use-cases/.

   The landing page's language, turned down for reading: the same tokens,
   fonts, glass header and seams, but a single calm column, no scroll-driven
   scenery, and the motion spent on the charts alone. Shared by every report;
   a report's own data and copy live in its folder.
   ========================================================================== */

:root {
  --ink: #ededf2;
  /* Body copy sits a step below headings: long runs of pure --ink on near
     black glare. */
  --prose: #c8cdda;
  --muted: #9aa1b4;
  --faint: #5c6478;
  --starlight: #cdd6f4;

  --brand: #00ff89;
  --brand-glow: rgba(0, 255, 137, 0.35);
  --brand-dim: #0f3d2a;
  --violet: #8b5cf6;
  --violet-light: #c4b5fd;
  --violet-glow: rgba(139, 92, 246, 0.38);
  /* The chart's second series: lighter than --violet so it clears 3:1 on the
     chart surface, and checked against --brand for colour-blind separation. */
  --series-2: #a78bfa;
  --uncharted: #818cf8;

  --canvas: #05060d;
  --panel: #0f1220;
  --panel-2: #0a0c15;
  --edge: #1f2434;
  --edge-strong: #2c3346;

  --radius-card: 1rem;
  --radius-sm: 0.625rem;

  --font-display: 'Jost', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;

  --gutter: clamp(16px, 4vw, 48px);
  /* The reading measure (~68 characters of body copy) and the wider one the
     figures break out to. */
  --measure: 41rem;
  --measure-wide: 62rem;
  --header-h: 84px;
  --header-h-stuck: 62px;

  --seam: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 255, 137, 0.42) 28%,
    rgba(129, 140, 248, 0.6) 50%,
    rgba(0, 255, 137, 0.42) 72%,
    transparent 100%
  );
}

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

html {
  scroll-behavior: smooth;
  /* Phones must not enlarge text on their own when something wide appears:
     every size here is already chosen for a small screen. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
}

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

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  margin: 0;
  text-wrap: balance;
}

::selection {
  background: rgba(0, 255, 137, 0.28);
  color: #fff;
}

.wrap {
  width: 100%;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   Header — the landing page's, copied from styles.css so the bar matches it
   exactly: same height, logo, gutters and links, and it shrinks the same way
   once you scroll (article.js sets .is-stuck). Keep the two in step.
   -------------------------------------------------------------------------- */
/**
 * The header floats. It is out of the flow entirely, so the hero runs full
 * bleed to the top of the screen and the bar sits ON it — you read the city
 * through the glass. Nothing below has to make room for it, and shrinking it
 * moves nothing, because it never occupied any space to begin with.
 *
 * --header-h stays the layout token: the hero pads its top by it so the
 * eyebrow clears the bar, and anchors scroll clear of it. --bar-h is what the
 * glass is actually drawn at, and only that shrinks.
 */
.site-header {
  --bar-h: var(--header-h);
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  height: var(--bar-h);
  transition: height 0.32s cubic-bezier(0.32, 0.08, 0.24, 1);
}

/* The glass. Deliberately thin: a high blur and a high saturation over very
   little tint, so the hero reads through it in colour rather than being
   covered by a dark bar. The white gradient and the inset top highlight are
   the light catching the near edge of the pane — that, more than the tint, is
   what makes it look like glass rather than a translucent rectangle.
   Saturation matters here: a plain blur turns the green and the violet
   passing underneath grey. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Behind the logo and nav. A positioned pseudo-element at z-index auto
     paints ABOVE its parent's in-flow content, which put the glass over the
     logo and dimmed it; the header is its own stacking context, so -1 keeps
     this inside it. */
  z-index: -1;
  -webkit-backdrop-filter: blur(16px) saturate(165%);
  backdrop-filter: blur(16px) saturate(165%);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.014) 45%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(180deg, rgba(6, 8, 16, 0.3), rgba(6, 8, 16, 0.1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  transition: background 0.32s ease, box-shadow 0.32s ease,
    -webkit-backdrop-filter 0.32s ease, backdrop-filter 0.32s ease;
}

/* The bar's bottom edge, in the same brand gradient as the section seams and
   fading out the same way — so the header is edged like the page rather than
   boxed off from it. */
.site-header::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 255, 137, 0.3) 22%,
    rgba(129, 140, 248, 0.45) 50%,
    rgba(0, 255, 137, 0.3) 78%,
    transparent 100%
  );
}

/* How far down the page you are, riding on that edge. Above the hairline
   rather than under it — ::after is the last thing in the box tree, so this
   needs the z-index to come out on top of it. Width is a scale rather than a
   width so it never lays out; script.js just writes the number. */
.header-progress {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--brand), var(--uncharted));
  transform-origin: 0 50%;
  scale: var(--scroll-progress, 0) 1;
}

/* Scrolled past the header: shorter, denser, and lifted off the page. */
.site-header.is-stuck {
  --bar-h: var(--header-h-stuck);
}

/* Denser once it is over the body of the page rather than the hero — still
   glass, just enough tint to hold the type against whatever scrolls under it.
   The drop shadow is what lifts the pane off the page. */
.site-header.is-stuck::before {
  -webkit-backdrop-filter: blur(22px) saturate(175%);
  backdrop-filter: blur(22px) saturate(175%);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0.018) 45%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(180deg, rgba(6, 8, 16, 0.58), rgba(6, 8, 16, 0.34));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 16px 38px -26px rgba(0, 0, 0, 0.95);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
}

/* The logo keeps its size however tight the bar gets. As a flex item it would
   otherwise be the first thing squeezed — to a sliver, since the image scales
   down with its box. */
.brand {
  flex: none;
}

.brand-logo {
  height: 40px;
  width: auto;
  transition: height 0.32s cubic-bezier(0.32, 0.08, 0.24, 1);
}

.site-header.is-stuck .brand-logo {
  height: 31px;
}

/* The landing page's gutter, for the bar only: the article body keeps its own. */
.site-header .wrap {
  padding-inline: clamp(24px, 4vw, 72px);
}

.site-header .btn-sm {
  transition: scale 0.32s cubic-bezier(0.32, 0.08, 0.24, 1), transform 0.15s ease,
    box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.site-header.is-stuck .btn-sm {
  scale: 0.94;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* The landing page's glass pill of links. */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.22rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.nav-links a {
  position: relative;
  isolation: isolate;
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  font-size: 0.88rem;
  letter-spacing: 0.005em;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.nav-links a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(0, 255, 137, 0.17), rgba(0, 255, 137, 0.05));
  box-shadow: inset 0 0 0 1px rgba(0, 255, 137, 0.3), 0 0 20px -6px var(--brand-glow);
  opacity: 0;
  scale: 0.86;
  transition: opacity 0.22s ease, scale 0.3s cubic-bezier(0.32, 0.08, 0.24, 1);
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.is-current {
  color: var(--ink);
}

.nav-links a:hover::before,
.nav-links a:focus-visible::before,
.nav-links a.is-current::before {
  opacity: 1;
  scale: 1;
}

.nav-links a.is-current::before {
  background: linear-gradient(180deg, rgba(0, 255, 137, 0.12), rgba(0, 255, 137, 0.035));
  box-shadow: inset 0 0 0 1px rgba(0, 255, 137, 0.22);
}

.nav-links a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* The narrow-screen menu — the landing page's (styles.css), copied. A pill
   naming the current page that opens the full list. */
.nav-menu {
  position: relative;
  display: none;
}

.nav-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0 0.85rem 0 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--ink);
  font: 500 0.88rem/1 var(--font-sans);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav-menu-chevron {
  color: var(--muted);
  transition: rotate 0.25s cubic-bezier(0.32, 0.08, 0.24, 1);
}

.nav-menu-toggle[aria-expanded='true'] .nav-menu-chevron {
  rotate: 180deg;
}

.nav-menu-toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.nav-menu-label {
  white-space: nowrap;
}

.nav-menu-icon {
  display: none;
}

.nav-menu-panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  width: max-content;
  min-width: 13rem;
  display: grid;
  gap: 0.15rem;
  padding: 0.4rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, rgba(20, 24, 40, 0.92), rgba(9, 11, 20, 0.94));
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 60px -24px rgba(0, 0, 0, 0.95);
  transform-origin: top right;
  animation: menu-drop 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.nav-menu-panel[hidden] {
  display: none;
}

@keyframes menu-drop {
  from {
    opacity: 0;
    scale: 0.96;
    translate: 0 -4px;
  }
}

.nav-menu-panel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  padding: 0 1rem;
  border-radius: 0.7rem;
  color: var(--muted);
  font-size: 0.98rem;
  -webkit-tap-highlight-color: transparent;
}

.nav-menu-panel a:hover,
.nav-menu-panel a:focus-visible {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

.nav-menu-panel a.is-current {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(0, 255, 137, 0.12), rgba(0, 255, 137, 0.035));
  box-shadow: inset 0 0 0 1px rgba(0, 255, 137, 0.22);
}

.nav-menu-panel a.is-current::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 8px var(--brand-glow);
}

/* Five links, the logo and the button need about 900px side by side. */
@media (max-width: 920px) {
  .nav-links {
    display: none;
  }

  .nav-menu:not([hidden]) {
    display: block;
  }
}

/* On a phone the menu takes the screen, as on the landing page. */
@media (max-width: 560px) {
  .nav-menu-panel {
    position: fixed;
    top: calc(var(--header-h) + 14px);
    left: 16px;
    right: 16px;
    width: auto;
    max-width: 26rem;
    margin-inline: auto;
    min-width: 0;
    gap: 0.25rem;
    padding: 0.9rem 0.75rem;
    border-radius: 1.5rem;
    border-color: rgba(255, 255, 255, 0.1);
    background:
      radial-gradient(90% 60% at 50% 0%, rgba(0, 255, 137, 0.09), transparent 70%),
      radial-gradient(80% 60% at 50% 100%, rgba(129, 140, 248, 0.1), transparent 70%),
      linear-gradient(180deg, rgba(18, 22, 38, 0.9), rgba(8, 10, 19, 0.94));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 40px 80px -30px rgba(0, 0, 0, 0.95);
    transform-origin: top center;
    animation-duration: 0.3s;
  }

  .nav-menu-panel a {
    justify-content: center;
    gap: 0.7rem;
    min-height: 64px;
    border-radius: 1rem;
    color: var(--ink);
    font: 500 1.6rem/1.1 var(--font-display);
    letter-spacing: -0.01em;
    animation: menu-row 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .nav-menu-panel a:nth-child(2) { animation-delay: 0.04s; }
  .nav-menu-panel a:nth-child(3) { animation-delay: 0.08s; }
  .nav-menu-panel a:nth-child(4) { animation-delay: 0.12s; }
  .nav-menu-panel a:nth-child(5) { animation-delay: 0.16s; }

  .nav-menu-panel a.is-current {
    color: var(--brand);
    text-shadow: 0 0 18px var(--brand-glow);
  }

  .nav-menu-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 137, 0.5) 30%, rgba(129, 140, 248, 0.55) 70%, transparent);
  }

  .nav-menu-panel a.is-current::after {
    order: -1;
  }

  .nav-menu-open body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(3, 5, 11, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: menu-scrim 0.3s ease both;
  }

  .nav-menu-toggle {
    min-height: 38px;
    padding-inline: 0.8rem 0.6rem;
    font-size: 0.84rem;
  }
}

@keyframes menu-row {
  from {
    opacity: 0;
    translate: 0 10px;
  }
}

@keyframes menu-scrim {
  from {
    opacity: 0;
  }
}

@media (max-width: 350px) {
  .nav-menu-toggle {
    padding-inline: 0.65rem 0.55rem;
    gap: 0.25rem;
  }

  .nav-menu-icon {
    display: block;
  }

  .nav-menu-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu-panel,
  .nav-menu-panel a,
  .nav-menu-open body::after {
    animation: none;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.btn-sm {
  padding: 0.55rem 1rem;
  font-size: 0.9rem;
}

.btn-block {
  width: 100%;
}

.btn-primary {
  background: linear-gradient(140deg, #6bffbb 0%, var(--brand) 42%, #00d977 100%);
  color: #04210f;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 0 1px rgba(0, 255, 137, 0.35),
    0 12px 40px -12px var(--brand-glow);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 0 1px rgba(0, 255, 137, 0.6),
    0 18px 52px -12px var(--brand-glow);
}

.btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Hero — the photograph, graded into the canvas, with the title on it
   -------------------------------------------------------------------------- */
.uc-hero {
  position: relative;
  min-height: min(88svh, 760px);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
}

.uc-hero-img {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.uc-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  /* Cooled and dimmed toward the page's night palette, but still plainly a
     photograph of a real place. */
  filter: saturate(0.85) contrast(1.05) brightness(0.9);
  transform: scale(1.04);
  animation: hero-settle 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes hero-settle {
  from {
    transform: scale(1.12);
    opacity: 0;
  }
  to {
    transform: scale(1.04);
    opacity: 1;
  }
}

/* The grade: a dark wash from the bottom where the type sits, a little at the
   top for the header, and a faint brand tint so it belongs to the page. */
.uc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(5, 6, 13, 0.4) 0%, rgba(5, 6, 13, 0) 16%),
    linear-gradient(0deg, var(--canvas) 0%, rgba(5, 6, 13, 0.92) 24%, rgba(5, 6, 13, 0.3) 55%, rgba(5, 6, 13, 0) 85%),
    radial-gradient(120% 70% at 15% 100%, rgba(0, 255, 137, 0.12), transparent 60%),
    radial-gradient(90% 60% at 100% 0%, rgba(129, 140, 248, 0.1), transparent 60%);
}

.uc-hero-inner {
  width: 100%;
  max-width: calc(var(--measure-wide) + 2 * var(--gutter));
  margin-inline: auto;
  padding: calc(var(--header-h) + 3rem) var(--gutter) clamp(2.5rem, 6vw, 4.5rem);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 1.4rem;
}

.eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 12px var(--brand);
}

.uc-hero h1 {
  font-weight: 500;
  font-size: clamp(2.35rem, 6.2vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 15ch;
  color: #fff;
}

.uc-hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, #8affc4, var(--brand) 40%, #7de0ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dek {
  margin: 1.5rem 0 0;
  max-width: 36rem;
  font-size: clamp(1.08rem, 1.6vw, 1.28rem);
  line-height: 1.55;
  color: #d5d9e4;
}

.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.2rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--muted);
}

.byline li + li::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--faint);
  margin-right: 1.2rem;
  vertical-align: middle;
}

/* The photo's credit: a small pill in the photograph's top corner, clear of
   the title and byline below it, one line at any width. */
.photo-credit {
  position: absolute;
  top: calc(var(--header-h) + 0.85rem);
  right: var(--gutter);
  max-width: calc(100% - 2 * var(--gutter));
  margin: 0;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: rgba(5, 6, 13, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(205, 214, 244, 0.12);
  font-size: 0.68rem;
  line-height: 1.3;
  color: rgba(205, 214, 244, 0.72);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   Article column
   -------------------------------------------------------------------------- */
.uc-article {
  padding-bottom: clamp(3rem, 8vw, 6rem);
}

/* Every direct child takes the reading measure; figures and the TL;DR break
   out to the wide one. */
.uc-article > * {
  max-width: var(--measure);
  margin-inline: auto;
}

.uc-article > .wide {
  max-width: var(--measure-wide);
}

:where(.uc-article) p,
:where(.uc-article) li {
  font-size: clamp(1.06rem, 1.2vw, 1.15rem);
  line-height: 1.78;
  color: var(--prose);
}

:where(.uc-article) p {
  margin-block: 0 1.35em;
}

:where(.uc-article) strong {
  color: var(--ink);
  font-weight: 600;
}

:where(.uc-article) p a,
:where(.uc-article) li a,
.prose-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(0, 255, 137, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

:where(.uc-article) p a:hover,
:where(.uc-article) li a:hover {
  color: #fff;
  text-decoration-color: var(--brand);
}

.lede {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.55rem) !important;
  font-weight: 400;
  line-height: 1.5 !important;
  color: var(--ink) !important;
  letter-spacing: -0.005em;
}

.uc-article h2 {
  position: relative;
  font-weight: 500;
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: #fff;
  margin-top: clamp(3.5rem, 8vw, 5.5rem);
  margin-bottom: 1.4rem;
  padding-top: 1.6rem;
}

/* A short seam above each section: the landing page's closing hairline in
   miniature, with the section number set in mono beside it. */
.uc-article h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3.5rem;
  height: 1px;
  background: linear-gradient(90deg, var(--brand), rgba(129, 140, 248, 0.8));
}

.uc-article h2 .num {
  position: absolute;
  top: -0.55rem;
  left: 4.4rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--faint);
}

:where(.uc-article) h3 {
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 2.6rem;
  margin-bottom: 0.8rem;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   TL;DR panel and its headline numbers
   -------------------------------------------------------------------------- */
.tldr {
  position: relative;
  margin-top: clamp(-1rem, -2vw, -0.5rem);
  /* Its own space below, for a report whose lede follows it directly; a photo
     after it brings a larger margin of its own, which wins. */
  margin-bottom: clamp(2.5rem, 6vw, 3.5rem);
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  border-radius: var(--radius-card);
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(0, 255, 137, 0.07), transparent 60%),
    linear-gradient(180deg, rgba(15, 18, 32, 0.92), rgba(10, 12, 21, 0.92));
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 30px 80px -40px rgba(0, 0, 0, 0.9);
}

.tldr-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 0.8rem !important;
}

.tldr > p:not(.tldr-label) {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem) !important;
  line-height: 1.5 !important;
  color: var(--ink) !important;
  max-width: 44rem;
  margin: 0;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 1.8rem 0 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--edge);
  border: 1px solid var(--edge);
}

/* A strip of exactly three figures fills its row, on a phone too. */
.stats:has(> .stat:nth-child(3):last-child) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stats--inline {
  position: relative;
  margin: 0 0 1.6rem;
}

/* A strip of figures in the text column keeps the column's centring, which
   the margin above would otherwise reset to the left edge. */
.uc-article > .stats--inline {
  margin: 1.6rem auto 1.8rem;
}

.stat {
  background: var(--panel-2);
  padding: 1.1rem 1.2rem 1.15rem;
  margin: 0;
}

.stat dt {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.stat dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stat dd small {
  font-size: 0.5em;
  font-weight: 400;
  color: var(--muted);
  margin-left: 0.15em;
  letter-spacing: 0;
}

.stat--green dd {
  color: var(--brand);
  text-shadow: 0 0 28px rgba(0, 255, 137, 0.35);
}

.stat--violet dd {
  color: var(--series-2);
}

/* --------------------------------------------------------------------------
   Figures and charts
   -------------------------------------------------------------------------- */
.figure {
  margin-block: clamp(2.5rem, 6vw, 4rem);
}

.chart-card {
  position: relative;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) clamp(1rem, 2.5vw, 1.5rem);
  border-radius: var(--radius-card);
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(129, 140, 248, 0.07), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(0, 255, 137, 0.05), transparent 60%),
    var(--panel-2);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 40px 90px -50px rgba(0, 0, 0, 0.95);
}

/* The faint lattice behind every chart: the landing page's star chart, as a
   grid. */
.chart-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: radial-gradient(rgba(205, 214, 244, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(90% 80% at 50% 40%, #000, transparent);
  -webkit-mask-image: radial-gradient(90% 80% at 50% 40%, #000, transparent);
}

.chart-head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.8rem 2rem;
  margin-bottom: 1.2rem;
}

.fig-kicker {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 0.45rem;
}

.chart-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 2.3vw, 1.5rem);
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  color: var(--muted);
}

.legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem !important;
  line-height: 1.3 !important;
  color: var(--muted) !important;
}

.swatch {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}

.swatch--green {
  color: var(--brand);
  box-shadow: 0 0 8px rgba(0, 255, 137, 0.6);
}

.swatch--violet {
  color: var(--series-2);
}

.swatch--ring {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid #4fe0a0;
}

.swatch--dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  color: var(--brand);
  box-shadow: 0 0 8px rgba(0, 255, 137, 0.6);
}

.swatch--band {
  width: 14px;
  height: 10px;
  border-radius: 2px;
  background: repeating-linear-gradient(135deg, rgba(196, 181, 253, 0.45) 0 2px, transparent 2px 5px);
  border: 1px solid rgba(196, 181, 253, 0.4);
}

.chart {
  position: relative;
  width: 100%;
  touch-action: pan-y;
}

.chart svg {
  display: block;
  width: 100%;
  overflow: visible;
  font-family: var(--font-sans);
}

.chart .grid line {
  stroke: rgba(205, 214, 244, 0.07);
  stroke-width: 1;
}

.chart .baseline {
  stroke: rgba(205, 214, 244, 0.22);
  stroke-width: 1;
}

.chart .tick {
  fill: var(--faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.chart .tick--year {
  fill: var(--muted);
  font-weight: 600;
}

.chart .label {
  /* A halo in the chart surface, so a label stays legible where it crosses a
     line. */
  paint-order: stroke;
  stroke: var(--panel-2);
  stroke-width: 4px;
  stroke-linejoin: round;
  fill: var(--ink);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.chart .label--muted {
  fill: var(--muted);
  font-weight: 500;
}

.chart .label--big {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Reveal: each chart draws itself once, the first time it scrolls in. The
   marks start hidden only once article.js has armed the chart, so with no
   script every chart is simply there. */
.chart.is-armed .reveal-x {
  clip-path: inset(-20px 100% -20px -20px);
  transition: clip-path 1.9s cubic-bezier(0.45, 0.05, 0.2, 1);
}

.chart.is-armed.is-in .reveal-x {
  clip-path: inset(-20px -20px -20px -20px);
}

.chart.is-armed .bar {
  transform: scaleY(0);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 60ms);
}

.chart.is-armed.is-in .bar {
  transform: scaleY(1);
}

.chart.is-armed .fade {
  opacity: 0;
  transition: opacity 0.7s ease;
  transition-delay: var(--d, 1.4s);
}

.chart.is-armed.is-in .fade {
  opacity: 1;
}

.chart.is-armed .stem {
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: 0 50%;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(0.2s + var(--i, 0) * 55ms);
}

.chart.is-armed.is-in .stem {
  transform: scaleX(1);
}

.chart.is-armed .grow {
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: 0 50%;
  transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(0.2s + var(--i, 0) * 70ms);
}

.chart.is-armed.is-in .grow {
  transform: scaleX(1);
}

.chart.is-armed .pop {
  opacity: 0;
  transform: scale(0.2);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
  transition-delay: calc(0.75s + var(--i, 0) * 55ms);
}

.chart.is-armed.is-in .pop {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .chart.is-armed .reveal-x,
  .chart.is-armed .bar,
  .chart.is-armed .fade,
  .chart.is-armed .stem,
  .chart.is-armed .grow,
  .chart.is-armed .pop {
    clip-path: none;
    transform: none;
    opacity: 1;
    transition: none;
  }

  .uc-hero-img img {
    animation: none;
  }
}

/* Hover: the crosshair and the highlighted mark. */
.chart .crosshair {
  stroke: rgba(237, 237, 242, 0.35);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  pointer-events: none;
}

.chart .bar-hit {
  fill: transparent;
  cursor: crosshair;
}

.chart .bar-group.is-dim .bar,
.chart .bar-group.is-dim .grow {
  opacity: 0.35;
}

.chart .row-hit {
  fill: transparent;
}

.chart .row.is-hot .row-bg {
  fill: rgba(205, 214, 244, 0.05);
}

.chart .row.is-dim {
  opacity: 0.4;
}

.chart .row,
.chart .bar {
  transition-property: opacity, transform;
}

.tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  min-width: 13rem;
  max-width: 17rem;
  padding: 0.75rem 0.9rem 0.8rem;
  border-radius: 0.65rem;
  background: rgba(10, 12, 21, 0.96);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--edge-strong);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
}

.tooltip.is-on {
  opacity: 1;
}

.tooltip .tt-title {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.45rem;
}

.tooltip .tt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.tooltip .tt-row span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.tooltip .tt-row b {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tooltip .tt-row--total {
  margin-top: 0.35rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--edge);
}

.tooltip .tt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.tooltip .tt-note {
  margin-top: 0.45rem;
  color: var(--faint);
  font-size: 0.74rem;
}

.tooltip .mono {
  color: var(--ink);
}

.chart-foot {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem 1.5rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--edge);
}

.chart-foot p {
  font-size: 0.78rem !important;
  line-height: 1.55 !important;
  color: var(--faint) !important;
  margin: 0 !important;
  max-width: 40rem;
}

/* The numbers behind each chart, for anyone who wants to check or copy them. */
.data-table summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--violet-light);
  list-style: none;
  white-space: nowrap;
}

.data-table summary::-webkit-details-marker {
  display: none;
}

.data-table summary::before {
  content: '+ ';
  font-family: var(--font-mono);
}

.data-table[open] summary::before {
  content: '– ';
}

.data-table {
  /* A flex item will not shrink below its content by default, so an open
     table used to stretch its card, and the page, to the table's full
     width. Held to the card; the table scrolls inside it instead. */
  min-width: 0;
  max-width: 100%;
}

.data-table[open] {
  flex-basis: 100%;
  width: 100%;
}

.table-scroll {
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  max-height: 22rem;
  overflow: auto;
  margin-top: 0.8rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
}

.data-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.data-table th,
.data-table td {
  padding: 0.45rem 0.75rem;
  text-align: right;
  border-bottom: 1px solid var(--edge);
  white-space: nowrap;
  color: var(--prose);
}

.data-table th:first-child,
.data-table td:first-child {
  text-align: left;
}

.data-table th {
  position: sticky;
  top: 0;
  background: var(--panel);
  color: var(--muted);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   The process diagram (Figure 2) — drawn by article.js
   -------------------------------------------------------------------------- */
.chart--flow .f-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  fill: var(--faint);
}

.chart--flow .f-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  fill: #fff;
}

.chart--flow .f-sub {
  font-size: 12px;
  fill: var(--muted);
}

.chart--flow .f-id {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--brand);
}

.chart--flow .f-id--violet {
  fill: var(--violet-light);
}

.chart--flow .f-slot {
  font-family: var(--font-mono);
  font-size: 10.5px;
  fill: var(--ink);
}

.chart--flow .f-pct {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  paint-order: stroke;
  stroke: var(--panel-2);
  stroke-width: 4px;
}

.chart--flow .f-num {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--starlight, #cdd6f4);
}

.chart--flow a .f-box {
  transition: stroke 0.2s ease, fill 0.2s ease;
}

.chart--flow a:hover .f-box,
.chart--flow a:focus-visible .f-box {
  stroke: var(--brand);
  fill: rgba(0, 255, 137, 0.07);
}

.chart--flow a.is-violet:hover .f-box,
.chart--flow a.is-violet:focus-visible .f-box {
  stroke: var(--violet-light);
  fill: rgba(167, 139, 250, 0.08);
}

.chart--flow a:focus-visible {
  outline: none;
}

@media (max-width: 760px) {
  .chart--flow .f-title {
    font-size: 13px;
  }

  .chart--flow .f-sub {
    font-size: 11px;
  }

  .chart--flow .f-id {
    font-size: 10px;
  }

  .chart--flow .f-slot {
    font-size: 9.5px;
  }
}

/* --------------------------------------------------------------------------
   Photo figure, pull quote, note, entity ledger
   -------------------------------------------------------------------------- */
.photo {
  margin-block: clamp(2.5rem, 6vw, 3.5rem);
}

.photo img {
  width: 100%;
  /* auto, or the height attribute (there to reserve space while loading)
     wins over the aspect ratio and the photo renders at its full 933px. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid var(--edge);
  filter: saturate(0.85) brightness(0.92);
}

figcaption.caption {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--faint);
}

.pull {
  margin-block: clamp(2.5rem, 6vw, 3.5rem) !important;
  padding: 0.2rem 0 0.2rem clamp(1.2rem, 3vw, 2rem);
  border-left: 2px solid;
  border-image: linear-gradient(180deg, var(--brand), var(--uncharted)) 1;
}

.pull p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.8vw, 1.9rem) !important;
  line-height: 1.32 !important;
  letter-spacing: -0.015em;
  color: #fff !important;
  margin: 0 !important;
}

.note {
  display: flex;
  gap: 0.9rem;
  padding: 1rem 1.2rem;
  border-radius: var(--radius-sm);
  background: rgba(129, 140, 248, 0.07);
  border: 1px solid rgba(129, 140, 248, 0.25);
  margin-block: 1.8rem !important;
}

.note p {
  margin: 0 !important;
  font-size: 0.98rem !important;
  line-height: 1.6 !important;
}

.note-tag {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--uncharted);
  padding-top: 0.3rem;
}

.entities {
  list-style: none;
  padding: 0;
  margin-block: 2rem !important;
  border-top: 1px solid var(--edge);
}

.entities li {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  gap: 0.3rem 1.5rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--edge);
}

.entity-name {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.entity-name strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.25;
}

.entity-name a {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--brand);
  border-bottom: 1px solid rgba(0, 255, 137, 0.3);
  transition: border-color 0.15s ease;
}

.entity-name a:hover {
  border-color: var(--brand);
}

.entity-name a::after {
  content: ' ↗';
  font-family: var(--font-sans);
  opacity: 0.6;
}

.entity-kind {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.entities .entity-role {
  margin: 0 !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
}

/* --------------------------------------------------------------------------
   Call to action and method
   -------------------------------------------------------------------------- */
.cta {
  position: relative;
  margin-top: clamp(4rem, 9vw, 6rem) !important;
  padding: clamp(1.8rem, 4vw, 2.8rem);
  border-radius: var(--radius-card);
  overflow: hidden;
  background:
    radial-gradient(90% 140% at 100% 100%, rgba(0, 255, 137, 0.16), transparent 55%),
    radial-gradient(70% 120% at 0% 0%, rgba(139, 92, 246, 0.18), transparent 60%),
    var(--panel);
  border: 1px solid var(--edge-strong);
}

.cta::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: var(--seam);
}

.cta h2 {
  margin: 0 0 0.8rem !important;
  padding: 0 !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
}

.cta h2::before {
  display: none;
}

.cta p {
  max-width: 34rem;
}

.cta .btn {
  margin-top: 0.4rem;
}

/* The landing page's secondary button: violet, so it sits beside the green
   primary without competing with it. */
.btn-ghost {
  background: rgba(139, 92, 246, 0.08);
  color: var(--violet-light);
  border-color: rgba(139, 92, 246, 0.38);
}

.btn-ghost:hover {
  border-color: var(--violet);
  background: rgba(139, 92, 246, 0.18);
  color: #ede9ff;
  transform: translateY(-1px);
  box-shadow: 0 14px 40px -16px var(--violet-glow);
}

/* The call to action's buttons: side by side, stacked on a phone. */
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.2rem;
}

.cta .cta-actions .btn {
  margin-top: 0;
}

.cta-actions .btn svg {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
}

@media (max-width: 560px) {
  .cta-actions .btn {
    width: 100%;
  }
}

.method {
  margin-top: 3rem !important;
  padding-top: 1.5rem;
  border-top: 1px solid var(--edge);
}

.method h3 {
  font-size: 0.72rem !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint) !important;
  margin: 0 0 0.8rem !important;
}

.method p {
  font-size: 0.85rem !important;
  line-height: 1.7 !important;
  color: var(--muted) !important;
  margin-bottom: 0.8em !important;
}

/* --------------------------------------------------------------------------
   The index of reports
   -------------------------------------------------------------------------- */
.uc-index-hero {
  position: relative;
  padding: calc(var(--header-h) + clamp(4rem, 10vw, 7rem)) 0 clamp(2.5rem, 6vw, 4rem);
  isolation: isolate;
}

/* The landing page's night sky, faintly: a dot lattice under two glows. */
.uc-index-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 80% at 10% 0%, rgba(0, 255, 137, 0.1), transparent 60%),
    radial-gradient(50% 70% at 95% 10%, rgba(129, 140, 248, 0.14), transparent 60%),
    radial-gradient(rgba(205, 214, 244, 0.08) 1px, transparent 1px) 0 0 / 24px 24px;
  mask-image: linear-gradient(180deg, #000 40%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent);
}

.uc-index-hero > div,
.uc-list {
  max-width: calc(var(--measure-wide) + 2 * var(--gutter));
  margin-inline: auto;
}

.uc-index-hero h1 {
  font-weight: 500;
  font-size: clamp(2.6rem, 6.5vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #fff;
}

.uc-index-hero .dek {
  max-width: 38rem;
}

.uc-list {
  display: grid;
  gap: 1.25rem;
  margin: 0 auto clamp(4rem, 9vw, 7rem);
  padding-inline: var(--gutter);
  list-style: none;
}

.uc-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--panel-2);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 40px 90px -50px rgba(0, 0, 0, 0.95);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.uc-card:hover,
.uc-card:focus-within {
  border-color: rgba(0, 255, 137, 0.35);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 40px 90px -40px rgba(0, 255, 137, 0.18);
}

.uc-card-img {
  position: relative;
  min-height: 16rem;
  /* The photo zooms on hover; clip it here, or the scaled edge spills past the
     fade below into the text column as an unshaded strip. */
  overflow: hidden;
}

.uc-card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) brightness(0.8);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.4s ease;
}

.uc-card:hover .uc-card-img img {
  transform: scale(1.04);
  filter: saturate(0.95) brightness(0.9);
}

/* Fades the photo into the card on the side the text sits. */
.uc-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 55%, var(--panel-2));
}

.uc-card-body {
  padding: clamp(1.4rem, 3vw, 2.2rem);
  display: flex;
  flex-direction: column;
}

.uc-card .eyebrow {
  margin-bottom: 1rem;
}

.uc-card h2 {
  font-weight: 500;
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
}

/* The whole card is the link. */
.uc-card h2 a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.uc-card h2 a:focus-visible {
  outline: none;
}

.uc-card:has(h2 a:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.uc-card-dek {
  margin: 0.8rem 0 0;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--prose);
}

.uc-card .stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.4rem;
}

.uc-card .stat {
  padding: 0.75rem 0.85rem;
}

.uc-card .stat dt {
  font-size: 0.72rem;
}

.uc-card .stat dd {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.uc-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.4rem;
  font-size: 0.82rem;
  color: var(--faint);
}

.uc-card-cta {
  color: var(--brand);
  font-weight: 600;
  white-space: nowrap;
}

.uc-card-cta span {
  display: inline-block;
  transition: transform 0.2s ease;
}

.uc-card:hover .uc-card-cta span {
  transform: translateX(3px);
}

.uc-more {
  padding: 1.4rem clamp(1.4rem, 3vw, 2.2rem);
  border-radius: var(--radius-card);
  border: 1px dashed var(--edge-strong);
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.uc-more a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(0, 255, 137, 0.45);
  text-underline-offset: 3px;
}

@media (max-width: 760px) {
  .uc-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .uc-card-img {
    min-height: 11rem;
  }

  .uc-card-img::after {
    background: linear-gradient(180deg, transparent 50%, var(--panel-2));
  }

  .uc-card .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Topic line and "latest" tag, shared by both card sizes ---------- */
.uc-card-topic {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--brand);
}

.uc-card-new {
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #05060d;
  background: var(--brand);
  box-shadow: 0 0 18px var(--brand-glow);
}

.uc-card-foot time {
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

/* ---------- The latest report: the one big moment on the page ---------- */
.uc-card--featured h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  line-height: 1.06;
}

.uc-card--featured .uc-card-dek {
  font-size: 1.04rem;
  max-width: 30rem;
}

@media (min-width: 761px) {
  .uc-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .uc-card--featured,
  .uc-list-label,
  .uc-more {
    grid-column: 1 / -1;
  }

  .uc-card--featured {
    grid-template-columns: minmax(0, 1fr);
    min-height: clamp(30rem, 52vw, 36rem);
  }

  .uc-card--featured .uc-card-img {
    position: absolute;
    inset: 0;
    min-height: 0;
  }

  /* Darkens the photo from the left and the bottom, where the text sits. */
  .uc-card--featured .uc-card-img::after {
    background:
      linear-gradient(90deg, rgba(10, 12, 21, 0.94) 0%, rgba(10, 12, 21, 0.78) 38%, rgba(10, 12, 21, 0.1) 72%),
      linear-gradient(0deg, rgba(10, 12, 21, 0.85), transparent 45%);
  }

  .uc-card--featured .uc-card-body {
    position: relative;
    max-width: 34rem;
    justify-content: flex-end;
    padding: clamp(2rem, 4vw, 3rem);
  }

  .uc-card--featured .uc-card-foot {
    margin-top: 0;
  }
}

/* ---------- "Earlier reports" ---------- */
.uc-list-label {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--edge);
}

.uc-list-label h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* ---------- Earlier reports: quieter cards, photo on top ---------- */
.uc-card--compact {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
}

.uc-card--compact .uc-card-img {
  min-height: 0;
  aspect-ratio: 16 / 9;
}

/* A clean photo edge: no fade into the text. */
.uc-card--compact .uc-card-img::after {
  content: none;
}

.uc-card--compact .uc-card-body {
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
}

.uc-card--compact .uc-card-topic {
  margin-bottom: 0.5rem;
}

.uc-card--compact h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.9vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #fff;
}

/* The whole card is the link, as for the feature. */
.uc-card--compact h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.uc-card--compact h3 a:focus-visible {
  outline: none;
}

.uc-card--compact:has(h3 a:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.uc-card--compact .uc-card-dek {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* One headline figure in place of the stat tiles. */
.uc-card-key {
  margin: 1rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.uc-card-key b {
  margin-right: 0.3rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--ink);
}

.uc-card--compact .uc-card-foot {
  padding-top: 1rem;
  margin-top: auto;
}

/* On a phone the feature keeps its photo on top, and earlier reports become a
   list: a square, properly cropped thumbnail inset beside the title. */
@media (max-width: 760px) {
  .uc-card--featured .uc-card-img {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  .uc-card--compact {
    grid-template-columns: 5.5rem minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: start;
    gap: 0.95rem;
    padding: 0.85rem;
  }

  .uc-card--compact .uc-card-img {
    width: 5.5rem;
    height: 5.5rem;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
  }

  .uc-card--compact .uc-card-body {
    padding: 0.1rem 0 0;
  }

  .uc-card--compact .uc-card-topic {
    margin-bottom: 0.3rem;
    font-size: 0.78rem;
  }

  .uc-card--compact h3 {
    font-size: 1.05rem;
    line-height: 1.25;
  }

  .uc-card--compact .uc-card-dek {
    display: none;
  }

  .uc-card-key {
    margin-top: 0.5rem;
    font-size: 0.8rem;
  }

  .uc-card-key b {
    font-size: 1.05rem;
  }

  .uc-card--compact .uc-card-foot {
    padding-top: 0.45rem;
  }
}

/* --------------------------------------------------------------------------
   Beta signup modal — the landing page's form and dialog (styles.css), copied
   so the deep dives sign people up in place. article.js builds the markup.
   Keep the two in step if either changes.
   -------------------------------------------------------------------------- */
.beta-form-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.beta-form-card p {
  line-height: 1.6;
}

/* Form card */
.beta-form-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--edge-strong);
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9);
}

.form-title {
  font-size: 1.35rem;
  margin-bottom: 0.4rem;
}

.form-sub {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 1.5rem;
}

.field {
  margin-bottom: 1.1rem;
}

.field label {
  display: block;
  font-size: 0.85rem;
  color: var(--starlight);
  margin-bottom: 0.4rem;
  font-weight: 500;
}

.field .opt {
  color: var(--faint);
  font-weight: 400;
}

.field input {
  width: 100%;
  padding: 0.8rem 0.9rem;
  background: var(--panel-2);
  border: 1px solid var(--edge-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.98rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input::placeholder {
  color: var(--faint);
}

.field input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0, 255, 137, 0.12);
}

.field input:invalid:not(:placeholder-shown):not(:focus) {
  border-color: #ff6b6b;
}

.field-error {
  color: #ff8585;
  font-size: 0.82rem;
  margin: 0.4rem 0 0;
}

.form-fineprint {
  font-size: 0.78rem;
  color: var(--faint);
  margin: 1rem 0 0;
  line-height: 1.5;
}

/* Honeypot + hidden iframe: kept out of view but reachable by bots/browser */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Once sent, the confirmation below replaces the card's own heading. */
.beta-form-card.is-sent .form-title,
.beta-form-card.is-sent .form-sub {
  display: none;
}

/* Success state */
.form-success {
  text-align: center;
  padding: 1rem 0;
}

.success-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-dim);
  color: var(--brand);
  font-size: 1.6rem;
  box-shadow: 0 0 0 1px rgba(0, 255, 137, 0.4), 0 0 30px -6px var(--brand-glow);
}

.form-success h3 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.form-success p {
  color: var(--muted);
  margin: 0;
}

.form-submit-error {
  color: #ff8585;
  font-size: 0.9rem;
  text-align: center;
  margin-top: 1rem;
}

/* The page behind an open form stays put. */
.beta-modal-open,
.beta-modal-open body {
  overflow: hidden;
}

.beta-modal {
  width: min(34rem, calc(100vw - 2rem));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  overflow: visible;
}

.beta-modal::backdrop {
  background: rgba(4, 6, 14, 0.72);
  backdrop-filter: blur(10px) saturate(115%);
}

.beta-modal[open] {
  animation: modal-rise 0.3s cubic-bezier(0.32, 0.08, 0.24, 1) both;
}

.beta-modal[open]::backdrop {
  animation: modal-fade 0.3s ease both;
}

@keyframes modal-rise {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes modal-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Only the panel scrolls, so a long form on a short screen stays reachable
   without the page behind it moving. */
.beta-modal-panel {
  max-height: calc(100dvh - 2.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: calc(var(--radius-card) * 1.1);
}

.beta-modal .beta-form-card {
  border-radius: calc(var(--radius-card) * 1.1);
  padding: clamp(1.6rem, 4vw, 2.4rem);
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(129, 140, 248, 0.1), transparent 70%),
    radial-gradient(60% 60% at 0% 100%, rgba(0, 255, 137, 0.07), transparent 70%),
    var(--panel);
  box-shadow:
    0 40px 100px -30px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Absolute against the dialog itself (modal dialogs are position: fixed), not
   against the scrolling panel — so it cannot scroll out of reach. */
.beta-modal-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--edge);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.beta-modal-close:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--edge-strong);
}

.beta-modal-close:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* The card carries its own title; the close button sits over where a heading's
   right edge would be, so keep the text out from under it. */
.beta-modal .form-title {
  padding-right: 2.5rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--edge);
  padding-block: 2.75rem;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
}

.footer-logo {
  height: 22px;
  opacity: 0.9;
}

.footer-tag {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0.3rem 0 0;
}

.footer-legal {
  color: var(--faint);
  font-size: 0.8rem;
  margin: 0;
  max-width: 40rem;
}

/* --------------------------------------------------------------------------
   Phones
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .uc-hero {
    min-height: 82svh;
  }

  .uc-hero-img img {
    object-position: 38% 40%;
  }

  .photo-credit {
    top: calc(var(--header-h) + 0.6rem);
    font-size: 0.64rem;
  }

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

  .entities li {
    grid-template-columns: minmax(0, 1fr);
  }

  .chart-card {
    border-radius: 0.8rem;
  }

  .tooltip {
    min-width: 11.5rem;
  }
}

/* The first column stays put while the rest of a wide table scrolls past it. */
.data-table th:first-child,
.data-table td:first-child {
  position: sticky;
  left: 0;
  background: var(--panel-2);
  z-index: 1;
}

.data-table th:first-child {
  background: var(--panel);
  z-index: 2;
}

@media (max-width: 560px) {
  .data-table table {
    font-size: 0.72rem;
  }

  .data-table th,
  .data-table td {
    padding: 0.4rem 0.55rem;
  }

  /* Headings wrap so a column is as wide as its numbers, not its title. */
  .data-table th {
    white-space: normal;
    vertical-align: bottom;
    min-width: 4.5rem;
  }
}

/* The bar on a phone, exactly as the landing page sets it (styles.css). */
@media (max-width: 560px) {
  :root {
    --header-h: 64px;
    --header-h-stuck: 56px;
  }

  .site-header .wrap {
    padding-inline: 16px;
  }

  .site-header .header-nav {
    gap: 0.5rem;
  }

  .brand-logo,
  .site-header.is-stuck .brand-logo {
    height: 24px;
  }

  .wide-only {
    display: none;
  }

  .site-header .btn-sm {
    padding-inline: 0.9rem;
  }
}

@media (max-width: 350px) {
  .brand-logo,
  .site-header.is-stuck .brand-logo {
    height: 22px;
  }
}

/* Logo, a worded menu pill and the button on a 375px phone: with the longer
   labels ("What is it?", "Deep dives") the three ran past the 16px gutter, so
   the spaces between them give a little. The same rule is in
   styles.css; keep the two in step. */
@media (max-width: 420px) {
  .header-inner {
    gap: 0.5rem;
  }

  .site-header .btn-sm {
    padding-inline: 0.85rem;
  }

  .nav-menu-toggle {
    gap: 0.3rem;
    padding-inline: 0.75rem 0.55rem;
  }
}

/* …and at 320px the pill's own icon-only sizes win again, as on the landing
   page, where that rule comes later in the file. */
@media (max-width: 350px) {
  .nav-menu-toggle {
    padding-inline: 0.65rem 0.55rem;
    gap: 0.25rem;
  }
}


@media (max-width: 380px) {
  .stat {
    padding: 0.9rem 0.85rem;
  }
}

/* --------------------------------------------------------------------------
   Proof points: a numbered line of evidence, the number large in the gutter,
   the claim as a heading and the detail below it.
   -------------------------------------------------------------------------- */
.proof {
  display: grid;
  grid-template-columns: clamp(3rem, 7vw, 4.75rem) minmax(0, 1fr);
  gap: 0 clamp(0.9rem, 2.5vw, 1.5rem);
  margin-block: clamp(2rem, 5vw, 2.75rem);
}

.proof-num {
  position: relative;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.8rem, 7vw, 4.2rem);
  line-height: 0.82;
  letter-spacing: -0.04em;
  text-align: right;
  color: var(--brand);
  text-shadow: 0 0 28px var(--brand-glow);
}

/* A short rule under the number ties it to the text beside it. */
.proof-num::after {
  content: '';
  display: block;
  width: 1.6rem;
  height: 2px;
  margin: 0.85rem 0 0 auto;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--uncharted));
}

.proof-body {
  padding-top: 0.15rem;
}

.proof-body h3 {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 2.2vw, 1.4rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
}

.proof-body p {
  margin: 0;
}

/* On a wide screen the number hangs in the margin, so the text keeps the
   column's left edge. */
@media (min-width: 900px) {
  .uc-article > .proof {
    max-width: calc(var(--measure) + 2 * 6rem);
    grid-template-columns: 6rem minmax(0, 1fr) 6rem;
    gap: 0;
  }

  .proof-num {
    padding-right: 1.5rem;
    font-size: 4.4rem;
  }
}

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

/* --------------------------------------------------------------------------
   Sidebar: a magazine-style box set apart from the story, such as a profile of
   a company the report names. Text on the left, its figures on the right; the
   two stack on a phone.
   -------------------------------------------------------------------------- */
.sidebar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 2.75rem);
  align-items: center;
  margin-block: clamp(2.5rem, 6vw, 3.5rem);
  padding: clamp(1.4rem, 3.5vw, 2.4rem);
  border-radius: var(--radius-card);
  background:
    radial-gradient(70% 100% at 100% 0%, rgba(129, 140, 248, 0.1), transparent 60%),
    linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 40px 90px -50px rgba(0, 0, 0, 0.95);
}

/* The accent rule down the left edge marks it as an aside, not the story. */
.sidebar::before {
  content: '';
  position: absolute;
  left: 0;
  top: clamp(1.4rem, 3.5vw, 2.4rem);
  bottom: clamp(1.4rem, 3.5vw, 2.4rem);
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--brand), var(--uncharted));
}

.sidebar-kicker {
  margin: 0 0 0.5rem !important;
  font-family: var(--font-mono);
  font-size: 0.68rem !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand) !important;
}

.sidebar h3 {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #fff;
}

.sidebar-text p:last-child {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.7;
}

.sidebar-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.sidebar-stats .stat dd {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
}

@media (max-width: 760px) {
  .sidebar {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Screenshot figure: a page from the company's own site, framed as a browser
   window, with numbered notes beside it (below it on a phone).
   -------------------------------------------------------------------------- */
.shot-card {
  display: grid;
  /* The screenshot is a supporting detail, not the subject: keep it about the
     width of a phone screen, and give the notes the rest. */
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 4vw, 3rem);
  border-radius: var(--radius-card);
  background:
    radial-gradient(70% 90% at 0% 0%, rgba(0, 255, 137, 0.08), transparent 60%),
    radial-gradient(60% 80% at 100% 100%, rgba(129, 140, 248, 0.07), transparent 60%),
    var(--panel-2);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 40px 90px -50px rgba(0, 0, 0, 0.95);
}

.shot-frame {
  margin: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--edge-strong);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9), 0 0 0 6px rgba(0, 255, 137, 0.05);
}

.shot-bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.8rem;
  background: #151a2a;
  border-bottom: 1px solid var(--edge);
}

.shot-dots {
  display: flex;
  gap: 5px;
  flex: none;
}

.shot-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--edge-strong);
}

.shot-url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  background: var(--panel-2);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--muted);
}

a.shot-url {
  text-decoration: none;
  transition: color 0.2s ease;
}

a.shot-url:hover,
a.shot-url:focus-visible {
  color: var(--brand);
}

/* The screenshot is a button: tap it to see it full size. */
.shot-zoom {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.shot-zoom:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.shot-zoom-hint {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink);
  background: rgba(10, 12, 21, 0.82);
  border: 1px solid var(--edge-strong);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.7);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.shot-zoom:hover .shot-zoom-hint,
.shot-zoom:focus-visible .shot-zoom-hint {
  color: #05060d;
  background: var(--brand);
  transform: translateY(-1px);
}

/* The enlarged screenshot: fills the screen's height on a desktop, its width
   on a phone, and scrolls if it is still taller than the screen. */
.shot-lightbox {
  /* No wider than the screen, and on a desktop no wider than lets the whole
     (roughly square) screenshot fit the screen's height. */
  width: min(44rem, calc(100vw - 1.5rem), calc((100dvh - 1.5rem) * 0.94));
  max-width: none;
  max-height: calc(100dvh - 1.5rem);
  margin: auto;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
}

.shot-lightbox::backdrop {
  background: rgba(4, 6, 14, 0.82);
  backdrop-filter: blur(10px) saturate(115%);
}

.shot-lightbox[open] {
  animation: modal-rise 0.3s cubic-bezier(0.32, 0.08, 0.24, 1) both;
}

.shot-lightbox[open]::backdrop {
  animation: modal-fade 0.3s ease both;
}

.shot-lightbox-body {
  max-height: calc(100dvh - 1.5rem);
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-sm);
  border: 1px solid var(--edge-strong);
  background: #fff;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.95);
  cursor: zoom-out;
}

.shot-lightbox-body img {
  display: block;
  width: 100%;
  height: auto;
}

.shot-lightbox-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 1;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--edge-strong);
  background: rgba(10, 12, 21, 0.85);
  color: var(--ink);
  font-size: 0.95rem;
  cursor: pointer;
}

.shot-lightbox-close:hover,
.shot-lightbox-close:focus-visible {
  color: #05060d;
  background: var(--brand);
  outline: none;
}

.shot-lightbox-open,
.shot-lightbox-open body {
  overflow: hidden;
}

/* On a phone a screen-wide copy would be barely bigger than the one in the
   article, so the enlarged screenshot fills the screen at about twice that
   size, and the reader drags to move around it. */
@media (max-width: 560px) {
  .shot-lightbox {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
  }

  .shot-lightbox-body {
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .shot-lightbox-body img {
    width: 660px;
    max-width: none;
  }
}

.shot-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.shot-notes .chart-title {
  margin-bottom: 1.1rem;
}

.shot-points {
  list-style: none;
  counter-reset: shot;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.shot-points li {
  counter-increment: shot;
  position: relative;
  padding-left: 2.3rem;
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
}

.shot-points li::before {
  content: counter(shot);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.55rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--brand);
  background: rgba(0, 255, 137, 0.08);
  border: 1px solid rgba(0, 255, 137, 0.35);
}

.shot-points strong {
  color: var(--ink);
}

@media (max-width: 760px) {
  .shot-card {
    grid-template-columns: 1fr;
  }

  .shot-frame {
    width: 100%;
    max-width: 17rem;
    margin-inline: auto;
  }

  /* On a phone the notes read first, then the page they describe. */
  .shot-notes {
    order: -1;
  }
}