html {
  background: #0a0a0a;
}

.blog-references {
  list-style: decimal;
  padding-left: 1.5rem;
  margin-top: 1rem;
}

.blog-references li {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--secondary);
  margin-bottom: .5rem;
  overflow-wrap: break-word;
  word-break: break-word;
}

.blog-references a {
  color: var(--amber);
  text-decoration: underline;
  text-decoration-color: rgba(255, 190, 39, 0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color .15s;
}
.blog-references a:hover { text-decoration-color: var(--amber); }

/* Citation superscripts: amber to match the brand accent. */
.blog-body sup a {
  color: var(--amber);
  text-decoration: none;
}
.blog-body sup a:hover {
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Section headings styled to match the main title (section-title) but smaller.
   .blog-body p wins on specificity, so we need .blog-body .section-eyebrow here. */
.blog-body .section-eyebrow {
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -.02em;
  text-transform: none;
  line-height: 1.15;
}

.lead-video {
  margin: 2rem 0;
}

.lead-video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
}

/* Custom centered play button: the native player only exposes a tiny control
   in the bottom-left corner, so we overlay a large, brand-amber button that
   calls video.play(). It fades out during playback and returns on pause. */
.lead-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 190, 39, 0.92);
  color: #0a0a0a;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

.lead-video-play svg {
  width: 36px;
  height: 36px;
  margin-left: 4px; /* optically center the triangle */
}

.lead-video-play:hover {
  background: var(--amber);
}

.lead-video-embed.is-playing .lead-video-play {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

.lead-video-embed video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.lead-chart {
  margin: 2rem 0;
  padding: 1rem;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

.lead-chart-card {
  border-radius: 12px;
  overflow: hidden;
}

.lead-chart-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* Two photographs side by side, stacking on narrow screens. */
.lead-figure-grid {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.lead-figure-grid .lead-chart-card {
  flex: 1 1 0;
  min-width: 240px;
}

/* Sensor table: dark-theme rules that read like the surrounding body text. */
.lead-table-wrap {
  overflow-x: auto;
}

.lead-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--secondary);
}

.lead-table th,
.lead-table td {
  padding: 0.6rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}

.lead-table th {
  color: var(--text);
  font-weight: 600;
}

.lead-table tbody tr:last-child td {
  border-bottom: none;
}

.lead-chart figcaption,
.lead-video figcaption {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

/* Pop the "Figure N." label so the caption reads as a labelled anchor. */
.lead-chart figcaption > strong:first-child,
.lead-video figcaption > strong:first-child {
  color: var(--amber);
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Each body paragraph pairs with the figure beneath it. Pull the figure toward
   the paragraph that introduces it (less space above) and push it away from the
   next paragraph (more space below), so each paragraph-and-figure reads as a unit. */
.blog-body p + .lead-chart,
.blog-body p + .lead-video {
  margin-top: 1.25rem;
}

.blog-body .lead-chart + p,
.blog-body .lead-video + p {
  margin-top: 3.5rem;
}

/* Anchored figures land below the fixed header when jumped to from a fig-ref. */
.lead-chart,
.lead-video {
  scroll-margin-top: 90px;
}