/* Pitmaster: one illustrated chapter per inclusion, without changing the scroll. */
.pack-inclusions-heading {
 display: grid;
 grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
 gap: 12px clamp(24px,6vw,88px);
 align-items: end;
}
.pack-inclusions-heading > p { max-width: 32ch; margin: 0 0 .35em; }
.pack-inclusions-heading h2 { margin-bottom: 0; }
.pack-episodes { border-bottom: 1px solid var(--line); }
.pack-episode {
 display: grid;
 grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr);
 grid-template-areas: "copy visual";
 align-items: center;
 gap: 18px clamp(28px,7.5vw,112px);
 padding: clamp(28px,5.2vw,76px) 0;
 border-top: 1px solid var(--line);
 overflow: clip;
}
.pack-episode:nth-child(even) {
 grid-template-columns: minmax(0,1.22fr) minmax(0,.78fr);
 grid-template-areas: "visual copy";
}
.pack-episode-copy { grid-area: copy; min-width: 0; }
.pack-episode-copy h3 {
 font-size: clamp(34px,4.05vw,64px);
 line-height: .98;
 letter-spacing: -.036em;
 max-width: 15ch;
 margin: 0 0 clamp(12px,1.8vw,25px);
 text-wrap: balance;
}
.pack-episode-copy > p:not(.pack-episode-kicker) {
 max-width: 40ch;
 font-size: clamp(16px,1.4vw,20px);
}
.pack-episode-kicker {
 display: flex;
 align-items: center;
 gap: .4em;
 margin: 0 0 clamp(14px,2vw,27px);
 color: var(--red);
 font: 700 .75rem/1.2 RDSBody,Arial,sans-serif;
 font-variant-numeric: tabular-nums;
 letter-spacing: .05em;
}
.pack-episode-kicker span:nth-child(2) { color: var(--muted); font-weight: 400; }
.pack-episode-kicker::after {
 content: "";
 width: clamp(18px,4vw,52px);
 height: 1px;
 margin-inline-start: .6em;
 background: var(--red);
 transform-origin: left;
}
.pack-episode-visual { grid-area: visual; min-width: 0; margin: 0; }
.pack-episode-frame {
 aspect-ratio: 3 / 2;
 overflow: hidden;
 background: var(--paper-strong);
}
.pack-episode-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pack-episode:nth-child(2) img { object-position: 50% 67%; }
.pack-episode:nth-child(6) img { object-position: 50% 42%; }
.pack-episode-visual figcaption {
 margin: 0;
 padding-block-start: .6em;
 border-top: 1px solid var(--line);
}
.pack-inclusions-note { margin: 14px 0 0; }

@media (prefers-reduced-motion: no-preference) {
 .pack-episode { --pack-copy-in: 34px; --pack-photo-in: 54px; --pack-mask: inset(0 0 0 14%); }
 .pack-episode:nth-child(even) { --pack-copy-in: -34px; --pack-photo-in: -54px; --pack-mask: inset(0 14% 0 0); }

 .pack-episode[data-pack-state="pending"] .pack-episode-copy {
  opacity: .38;
  transform: translate3d(var(--pack-copy-in),14px,0);
 }
 .pack-episode[data-pack-state="pending"] .pack-episode-visual {
  opacity: .72;
  transform: translate3d(var(--pack-photo-in),8px,0);
 }
 .pack-episode[data-pack-state="pending"] .pack-episode-frame { clip-path: var(--pack-mask); }
 .pack-episode[data-pack-state="pending"] .pack-episode-kicker::after { transform: scaleX(.35); }
 .pack-episode[data-pack-state="shown"] .pack-episode-copy,
 .pack-episode[data-pack-state="shown"] .pack-episode-visual {
  opacity: 1;
  transform: translate3d(0,0,0);
  transition: opacity 420ms ease-out, transform 720ms cubic-bezier(.18,.82,.28,1);
 }
 .pack-episode[data-pack-state="shown"] .pack-episode-copy { transition-delay: 85ms; }
 .pack-episode[data-pack-state="shown"] .pack-episode-frame {
  clip-path: inset(0);
  transition: clip-path 750ms cubic-bezier(.18,.82,.28,1);
 }
 .pack-episode[data-pack-state="shown"] .pack-episode-kicker::after {
  transition: transform 540ms cubic-bezier(.18,.82,.28,1) 140ms;
 }
}

@media (max-width: 760px) {
 .pack-inclusions-heading,
 .pack-episode,
 .pack-episode:nth-child(even) { grid-template-columns: minmax(0,1fr); }
 .pack-episode,
 .pack-episode:nth-child(even) {
  grid-template-areas: "copy" "visual";
  --pack-copy-in: 0px;
  --pack-photo-in: 0px;
  --pack-mask: inset(0 0 10% 0);
 }
 .pack-episode-copy h3 { max-width: 18ch; text-wrap: pretty; }
 .pack-episode-copy > p:not(.pack-episode-kicker) { margin-bottom: 0; }
}
