/* The photographs are the page: edge-to-edge scenes, composed around the cars
   and each source image's natural negative space. Static flow is the fallback. */
.highlights { position: relative; overflow: clip; background: var(--ink); }
/* The chapter title belongs to the first photograph. It has no separate
   scroll space and leaves with that scene, including on a fast reverse. */
.highlights .highlights-heading {
  position: absolute;
  z-index: 2;
  inset: clamp(30px,3vw,54px) auto auto var(--gutter);
  display: block;
  max-width: 62%;
  padding: 0;
  color: var(--paper);
  text-shadow: 0 2px 20px #0003;
}
.highlights .highlights-heading h2 { font-size: clamp(96px,14vw,220px); line-height: 1.04; letter-spacing: -.04em; white-space: nowrap; }
.highlights-heading p,
.highlights .result-index,
.highlights .archive-label,
.highlights .chapter-position { display: none; }
.highlights .highlights-flow,
html[data-motion="full"] .highlights-flow { position: relative; height: auto; margin: 0; }
.highlights .highlights-stage,
html[data-motion="full"] .highlights-stage { position: relative; inset: auto; height: auto; min-height: 0; overflow: visible; background: var(--ink); }
.highlights .highlight-steps,
html[data-motion="full"] .highlight-steps { position: relative; inset: auto; display: block; }
.highlights .highlight-step,
html[data-motion="full"] .highlight-step {
  position: relative;
  inset: auto;
  display: block;
  isolation: isolate;
  width: 100%;
  height: min(66.666vw,850px);
  min-height: 560px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  background: var(--ink);
}
.highlights .highlight-step::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 48%;
  background: linear-gradient(180deg,rgba(5,9,10,.38),rgba(5,9,10,.12) 48%,transparent);
  pointer-events: none;
}
.highlights .highlight-step::after { content: none; }
.highlights .highlight-step[data-highlight="1"]::before,
.highlights .highlight-step[data-highlight="2"]::before,
.highlights .highlight-step[data-highlight="3"]::before { background: none; }
.highlights .highlight-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  object-position: 50% 69%;
  filter: none;
  opacity: 1;
  transform: none;
  mask: none;
  -webkit-mask: none;
}
.highlights .result-copy {
  position: absolute;
  z-index: 2;
  inset: 38px auto auto var(--gutter);
  width: auto;
  max-width: 82%;
  margin: 0;
  opacity: 1;
  transform: none;
  color: var(--paper);
  text-shadow: 0 2px 20px #0003;
}
.highlights .result {
  width: max-content;
  max-width: 100%;
  font-size: clamp(160px,21vw,300px);
  line-height: .99;
  letter-spacing: -.045em;
}
.highlights .result-description {
  max-width: 330px;
  margin-top: 18px;
  font-size: clamp(17px,1.35vw,21px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.highlights .career-line-window { display: block; overflow: clip; padding: 0 .035em .045em 0; margin-bottom: -.045em; }
.highlights .career-line { display: block; transform-origin: 0 50%; }

/* Placement follows what is actually in the source photograph, rather than
   alternating an identical text/image card five times. */
.highlights .highlight-step[data-highlight="1"] .result-copy { left: auto; right: 8%; top: 6%; }
.highlights .highlight-step[data-highlight="1"] .highlight-photo { object-position: 50% 70%; }
.highlights .highlight-step[data-highlight="2"] .result-copy { top: 6%; left: 9%; }
.highlights .highlight-step[data-highlight="2"] .highlight-photo { object-position: 50% 77%; }
.highlights .highlight-step[data-highlight="3"] .result-copy { left: 7%; top: 5%; }
.highlights .highlight-step[data-highlight="3"] .highlight-photo { object-position: 50% 72%; }
.highlights .result-words { font-size: clamp(90px,10vw,150px); line-height: 1.02; letter-spacing: -.025em; }
.highlights .highlight-step[data-highlight="3"] .result-description { max-width: 420px; }
.highlights .highlight-step[data-highlight="4"] .result-copy { left: 7%; top: 6%; max-width: 82%; }
.highlights .highlight-step[data-highlight="4"] .highlight-photo { object-position: 50% 72%; }
.highlights .result-long { font-size: clamp(55px,6.8vw,105px); line-height: 1.05; letter-spacing: -.02em; }
.highlights .highlight-step[data-highlight="4"] .result-description { max-width: 480px; }

/* ScrollTrigger supplies exactly one spacer around the stage. Nothing else
   adds scroll height or pins, and the pinned element itself is never animated. */
.highlights[data-career-motion="sequence"] .highlights-stage {
  position: relative;
  height: calc(100svh - var(--header));
  min-height: 0;
  overflow: hidden;
}
.highlights[data-career-motion="sequence"] .highlight-steps { position: relative; height: 100%; }
.highlights[data-career-motion="sequence"] .highlight-step {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
  pointer-events: none;
}
.highlights[data-career-motion="sequence"] .result { font-size: clamp(160px,20.5vw,30svh); }
.highlights[data-career-motion="sequence"] .result-words { font-size: clamp(90px,10vw,16svh); }
.highlights[data-career-motion="sequence"] .result-long { font-size: clamp(54px,6.6vw,10.8svh); }
.highlights[data-career-motion] .highlight-step,
.highlights[data-career-motion] .result-copy,
.highlights[data-career-motion] .highlight-photo,
.highlights[data-career-motion] .career-line { transition: none; }

/* The opening photograph has two distinct typographic positions. Its chapter
   title occupies the left; the actual result uses the upper right, above the car. */
.highlights .highlight-step[data-highlight="0"] .result-copy {
  inset: clamp(30px,3vw,54px) var(--gutter) auto auto;
  width: min(26vw,340px);
  max-width: none;
}
.highlights .highlight-step[data-highlight="0"] .result { font-size: clamp(136px,16vw,232px); }
.highlights .highlight-step[data-highlight="0"] .result-description { max-width: 280px; }

@media (min-width:701px) and (max-width:1000px) {
  .highlights .highlight-step,
  html[data-motion="full"] .highlight-step { height: 72vw; min-height: 0; }
  .highlights .result-copy { top: 28px; }
  .highlights .result { font-size: 22vw; }
  .highlights .result-description { max-width: 280px; font-size: 17px; margin-top: 15px; }
  .highlights .result-words { font-size: 11.5vw; }
  .highlights .result-long { font-size: 6.7vw; }
}

/* A narrow screen keeps one photographic canvas per result, with the car in
   the lower half and all typography over the photograph. No boxed image row. */
@media (max-width:700px) {
  .highlights .highlights-heading { inset: 24px auto auto var(--gutter); max-width: calc(100% - var(--gutter) * 2); }
  .highlights .highlights-heading h2 { font-size: 22vw; }
  .highlights .highlight-step,
  html[data-motion="full"] .highlight-step { height: 116vw; min-height: 0; max-height: 700px; }
  .highlights .highlight-photo { object-position: 51% 72%; }
  .highlights .result-copy,
  .highlights .highlight-step[data-highlight="1"] .result-copy,
  .highlights .highlight-step[data-highlight="2"] .result-copy,
  .highlights .highlight-step[data-highlight="3"] .result-copy,
  .highlights .highlight-step[data-highlight="4"] .result-copy {
    inset: 24px auto auto var(--gutter);
    width: calc(100% - var(--gutter) * 2);
    max-width: none;
  }
  .highlights .result { font-size: 26vw; }
  .highlights .result-description,
  .highlights .highlight-step[data-highlight="3"] .result-description,
  .highlights .highlight-step[data-highlight="4"] .result-description { max-width: 290px; font-size: 16px; line-height: 1.4; margin-top: 12px; }
  .highlights .highlight-step[data-highlight="1"] .highlight-photo { object-position: 60% 70%; }
  .highlights .highlight-step[data-highlight="2"] .highlight-photo { object-position: 50% 77%; }
  .highlights .highlight-step[data-highlight="3"] .highlight-photo { object-position: 49% 72%; }
  .highlights .highlight-step[data-highlight="4"] .highlight-photo { object-position: 49% 72%; }
  .highlights .result-words { font-size: 15.7vw; }
  .highlights .result-long { font-size: 9.8vw; line-height: 1.08; }
  .highlights .highlight-step[data-highlight="0"] .result-copy {
    inset: calc(42px + 22.88vw) var(--gutter) auto;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    gap: 20px;
    width: auto;
  }
  .highlights .highlight-step[data-highlight="0"] .result { font-size: 26vw; }
  .highlights .highlight-step[data-highlight="0"] .result-description {
    max-width: 200px;
    margin-top: 0;
    font-size: clamp(14px,3.85vw,16px);
  }
}

@media (max-height:739px) and (min-width:1001px) {
  .highlights .highlight-step,
  html[data-motion="full"] .highlight-step { height: 68vw; max-height: 780px; min-height: 560px; }
  .highlights .result { font-size: 21vw; }
  .highlights .result-words { font-size: 10vw; }
  .highlights .result-long { font-size: 6.8vw; }
}
/* Keep the national caption in the night photograph's dark upper space. */
@media (min-width:1001px) {
  .highlights .highlight-step[data-highlight="2"] .result-copy { top: 3.5%; }
  .highlights .highlight-step[data-highlight="2"] .result-description { max-width: 560px; }
}