/* Watch: one native row, five chapters. A cut-off next card invites the next swipe. */
.watch-section, .carousel { min-width: 0; }
.carousel-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 0 0 18px; }
.carousel-position { margin-right: auto; font-size: .75rem; font-weight: 750; letter-spacing: .15em; font-variant-numeric: tabular-nums; color: var(--muted); }
.carousel-tools button { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line); background: var(--panel); color: var(--paper); font: 1.4rem/1 var(--body); }
.carousel-tools button:hover:not([aria-disabled="true"]) { border-color: var(--red); background: #ed303b14; }
.carousel-tools button[aria-disabled="true"] { opacity: .35; cursor: default; }
.carousel-track { --card-size: 30%; position: relative; display: flex; align-items: stretch; gap: 24px; max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--line) var(--ink); padding: 6px 0 20px; }
.carousel-track > * { flex: 0 0 var(--card-size); min-width: 0; margin: 0; scroll-snap-align: start; scroll-margin-top: 110px; }
.carousel-track:focus-visible { outline-offset: 5px; }
.carousel-track :is(button, a):focus-visible { outline-offset: -3px; }
.carousel-track .episode { display: flex; flex-direction: column; padding: 18px; background: var(--panel); }
.carousel-track .episode .next-watch { margin-top: auto; min-height: 44px; }
.carousel-track .episode > .muted { margin-bottom: 24px; }
.carousel-track .video-card figcaption { align-items: baseline; }
.carousel-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); margin-top: 28px; padding-top: 24px; }
.carousel-cta p { max-width: 620px; margin: 0; color: var(--muted); }
.carousel-cta .btn { flex-shrink: 0; }
/* The red spine and outlined nodes echo the Season calendar. */
.chapter-track { --card-size: 43%; gap: 0; padding-top: 20px; }
.chapter-track > .panel { position: relative; border: 0; border-top: 2px solid var(--line); background: transparent; padding: 38px 36px 16px 0; }
.chapter-track > .panel::before { content: ''; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border: 3px solid var(--red); border-radius: 50%; background: var(--ink); }
.chapter-track > .panel::after { content: ''; position: absolute; top: -2px; left: 14px; width: 56px; height: 2px; background: var(--red); }
.chapter-track > .panel:last-child { border-top-color: transparent; }
.chapter-track > .panel:last-child::after { display: none; }
/* Three phases of one night read as one timeline on desktop: no half-cut third panel. */
@media (min-width: 761px) { .chapter-track.ecosystem { --card-size: calc(100% / 3); } }
.chapter-track .meta { color: var(--red-text); }
.chapter-track .source-box { margin-top: 24px; font-size: .875rem; border-left: 2px solid var(--red); padding: 4px 0 4px 18px; }
#brkn-point #podcasts { display: grid; grid-template-columns: 1fr 1.7fr; column-gap: 36px; margin-top: 36px; }
#podcasts .meta, #podcasts h3 { grid-column: 1; }
#podcasts .muted { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
#podcasts .btn { grid-column: 2; justify-self: start; }
.archive-track { --card-size: 62%; }
.archive-story { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 4vw, 56px); background: linear-gradient(135deg, #ed303b15, var(--panel) 70%); border-top: 3px solid var(--red); }
.archive-story h3 { text-transform: uppercase; }
.archive-story .btn { align-self: flex-start; }
.archive-track .debut-photo { display: flex; flex-direction: column; }
.archive-track .debut-photo > a { flex: 1; min-height: 220px; }
.archive-track .debut-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .carousel-track { --card-size: 86%; gap: 16px; }
  .chapter-track { gap: 0; }
  .chapter-track > .panel { padding-right: 28px; }
  .carousel-cta { align-items: flex-start; flex-direction: column; }
  #brkn-point #podcasts { display: block; }
  .archive-story h3 { font-size: 1.75rem; }
}