/* Page-order refinements: recent work introduces the deeper career index. */
.recent-work-heading {
  display: block;
}

.recent-work-heading h2 {
  max-width: 8ch;
}

.intro {
  cursor: ew-resize;
  padding-bottom: clamp(44px, 6vw, 80px);
}

.intro h1 [data-rotating-word] {
  display: inline-block;
  font-size: inherit;
  white-space: nowrap;
}

.chart-wrap {
  cursor: crosshair;
}

.market-panel {
  border-top: 1px solid var(--line);
}

.highlights {
  padding-top: clamp(46px, 6vw, 84px);
}

.live-ticker-pulse {
  fill: var(--hot);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: live-ticker-pulse 1.5s ease-out infinite;
}

.live-ticker-dot {
  fill: var(--hot);
  stroke: var(--paper);
  stroke-width: 4;
  transform-box: fill-box;
  transform-origin: center;
  animation: live-ticker-blink 1.5s step-end infinite;
}

@keyframes live-ticker-pulse {
  0% { opacity: .65; transform: scale(.45); }
  70%, 100% { opacity: 0; transform: scale(1.25); }
}

@keyframes live-ticker-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: .35; }
}

.chart-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.52fr);
  column-gap: clamp(30px, 8vw, 140px);
  row-gap: 20px;
  margin-bottom: clamp(58px, 8vw, 108px);
}

.chart-story .eyebrow {
  grid-column: 1 / -1;
}

.chart-story h2 {
  margin: 0;
  font-size: clamp(3rem, 7vw, 7.5rem);
  font-weight: 500;
  line-height: 0.83;
  letter-spacing: -0.04em;
}

.chart-story h2 em {
  color: var(--hot);
  font-style: normal;
}

.chart-story p {
  max-width: 350px;
  margin: 0;
  align-self: end;
  color: var(--muted);
  line-height: 1.55;
}

.market-topline h3 {
  margin: 12px 0 0;
  font-size: clamp(4rem, 10vw, 9rem);
  font-weight: 700;
  line-height: 0.72;
  letter-spacing: -0.06em;
}

@media (max-width: 700px) {
  .intro,
  .chart-wrap {
    cursor: default;
  }

  .chart-story {
    display: block;
    margin-bottom: 58px;
  }

  .chart-story h2 {
    font-size: clamp(3.6rem, 16vw, 6rem);
  }

  .chart-story p {
    margin-top: 30px;
  }

  .market-topline h3 {
    font-size: 4.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-ticker-pulse,
  .live-ticker-dot {
    animation: none;
  }
}

/* Shared editorial scale; the hero fits its longest phrase without changing size on hover. */
:root { --headline-size: 6.25rem; }
.wordmark { font-size: 1.7rem; letter-spacing: 0; }
.intro { min-height: 0; }
.intro h1,
.highlights h2,
.chart-story h2,
.closing h2,
.market-topline h3 {
  font-size: var(--headline-size);
  line-height: 1.02;
  letter-spacing: 0;
}
.intro h1 { max-width: 100%; min-width: 0; }
.intro h1 [data-rotating-word] { font-size: inherit; }
.lightbox-details h2 { font-size: 3.125rem; line-height: 1.05; letter-spacing: 0; overflow-wrap: anywhere; }
.chart-captions {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0 24px;
}
.chart-captions > div { position: static; }
.chart-years { display: none; }
.chart-date-labels {
  display: flex;
  justify-content: space-between;
  padding: 8px 0 0;
  color: var(--muted);
  font-size: .75rem;
}
@media (max-width: 1100px) { :root { --headline-size: 5rem; } }
@media (max-width: 700px) {
  :root { --headline-size: 3.125rem; }
  .wordmark { font-size: 1.4rem; }
  .chart-captions { gap: 12px; }
  .chart-captions > div { font-size: .6rem; }
  .chart-instruction { text-align: right; }
  .chart-date-labels span:nth-last-child(2) { display: none; }
}