/* Top section of the GPT-2 case study: question box and facts on the left, scroll-driven panels on the right (phone order: question box, facts, panels, explanation). */
.case-top { display: grid; gap: 44px; padding: 56px 0 24px; } /* one column on a phone */
.case-top-left, .case-top-right { min-width: 0; } /* long chips wrap instead of stretching the column */
.case-top-left .case-section { max-width: none; } /* the question box fills its column */
.case-pinned { display: grid; gap: 28px; margin-top: 4px; } /* facts and the panel guide travel together */
.case-top-left .case-aside { position: static; grid-template-columns: 1fr; } /* facts in one column under the box */
.case-top-right { --stage-ground: var(--world-deep); --stage-height: min(700px, calc(100vh - 48px)); --stage-height: min(700px, calc(100svh - 48px)); } /* panel ground and height; the second line wins where small-viewport units exist */
.case-explanation { max-width: 740px; margin-top: 24px; padding-top: 56px; border-top: 1px solid var(--ink-line); } /* the old explanation, below everything */
.panel-slot { margin-bottom: 28px; } /* static panels stack with a gap */
.panel-slot.is-scrubbing { height: calc(var(--stage-height) + var(--scroll-distance, 150vh)); margin-bottom: 24px; } /* scroll length of one panel: its own height plus the scroll that plays it */
.is-scrubbing .motion-stage { position: sticky; top: 24px; height: var(--stage-height); } /* the panel stays put while its scroll plays */
.panel-guide ol { display: grid; gap: 6px; margin-top: 8px; counter-reset: guide; } /* the four panels listed */
.panel-guide a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--ink-line); border-radius: 12px; color: var(--paper-soft); font: 500 14px var(--body); text-decoration: none; counter-increment: guide; transition: background 0.2s, color 0.2s; } /* one panel link */
.panel-guide a::before { content: counter(guide); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgb(255 255 255 / 0.1); font: 600 12px var(--mono); } /* its number */
.panel-guide a.is-current { background: var(--world-background); color: #fff; border-color: transparent; } /* the panel playing now */
@media (max-width: 959px) { .panel-guide { display: none; } } /* on a phone the panels follow the facts directly */
@media (min-width: 960px) { /* desktop: two columns */
  .case-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); } /* equal columns; the left stretches to the panels' height */
  .case-pinned { position: sticky; top: 24px; align-self: start; } /* the facts and the guide stay in view while the panels play */
}
@media (min-width: 960px) and (max-height: 760px) { .case-pinned { position: static; } } /* too short to pin the facts */
@media (max-width: 859px) { /* phones: lighter and shorter */
  .case-top { padding-top: 40px; } /* less air */
  .case-top-right { --stage-height: min(760px, calc(100vh - 32px)); --stage-height: min(760px, calc(100svh - 32px)); } /* a little shorter than a screen */
  .is-scrubbing .motion-stage { top: 16px; } /* closer to the top edge */
  .panel-slot.is-scrubbing { height: calc(var(--stage-height) + var(--scroll-distance, 150vh) * 0.8); } /* a bit less scroll per panel */
}