/* 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: clamp(2.6rem, 8.8vw, 9rem);
  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);
  }

  .intro h1 [data-rotating-word] {
    font-size: clamp(2.6rem, 11vw, 4.5rem);
  }

  .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;
  }
}