/* Rotating journal manchete. Linked only when a manchete section turns the carousel on, so every other
 * journal keeps its CSS and HTML. The lead is a scroll-snap track: the browser handles the swipe, and
 * the track is as tall as its tallest story, so rotating never moves the page. */
.journal-manchete--carousel .manchete-lead { min-width: 0; }
.journal-manchete--carousel .manchete-track { display: flex; overflow: hidden; }
.journal-manchete--carousel .manchete-slide { flex: 0 0 100%; min-width: 0; }
/* Before the script runs only the first story shows; the rest keep their room so nothing shifts later. */
.journal-manchete--carousel:not([data-ready]) .manchete-slide:not(:first-child) { visibility: hidden; }
.journal-manchete--carousel[data-ready] .manchete-track {
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.journal-manchete--carousel .manchete-track::-webkit-scrollbar { display: none; }
.journal-manchete--carousel[data-ready] .manchete-slide { scroll-snap-align: start; scroll-snap-stop: always; }

/* The controls row is always laid out, so showing it once the script runs adds no height. */
.journal-manchete--carousel .manchete-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-height: 28px; margin-top: 12px; visibility: hidden;
}
.journal-manchete--carousel[data-ready] .manchete-controls { visibility: visible; }
.journal-manchete--carousel .manchete-controls button {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--journal-primary); cursor: pointer;
}
.journal-manchete--carousel .manchete-controls button:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.journal-manchete--carousel .manchete-pause { margin-right: 6px; border: 1px solid var(--line-2); }
.journal-manchete--carousel .manchete-pause svg { width: 10px; height: 10px; fill: currentColor; }
.journal-manchete--carousel .manchete-pause .icon-play, .journal-manchete--carousel .manchete-pause[aria-pressed='true'] .icon-pause { display: none; }
.journal-manchete--carousel .manchete-pause[aria-pressed='true'] .icon-play { display: block; }
.journal-manchete--carousel [data-manchete-dot]::before {
  content: ''; width: 10px; height: 10px; border-radius: 50%; background: #8a8aa0; transition: background-color .2s, transform .2s;
}
.journal-manchete--carousel [data-manchete-dot][aria-current='true']::before { background: var(--journal-primary); transform: scale(1.3); }
@media (prefers-reduced-motion: reduce) {
  .journal-manchete--carousel [data-manchete-dot]::before { transition: none; }
}