/* reel */
.reel .section-head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-6); }
.reel-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); flex-wrap: wrap; }
.reel-tabs .mono { opacity: 0.7; }

.player {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface);
}
.player-poster { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.62); transition: filter var(--dur-med), scale var(--dur-slow) var(--ease-out); }
.player:hover .player-poster { filter: grayscale(0.2) brightness(0.7); scale: 1.02; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-6) var(--space-3) var(--space-3);
  border: 0; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--on-accent);
  cursor: pointer; text-align: left;
  transition: background-color var(--dur-fast), transform var(--dur-med) var(--ease-spring);
}
.player-play:hover { background: var(--accent-hover); transform: scale(1.04); }
.player-play-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--on-accent); display: grid; place-items: center; }
.player-play-icon::before { content: ""; border-left: 18px solid var(--accent); border-block: 11px solid transparent; margin-left: 5px; }
.player-play-text strong { display: block; font-size: var(--fs-lead); line-height: 1.2; }
.player-note { margin-top: var(--space-4); color: var(--muted); text-transform: none; letter-spacing: 0.02em; }

.scenes-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin: var(--space-8) 0 var(--space-5); }
.scenes-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--fs-h3); letter-spacing: 0.02em; }
.scenes-sub { color: var(--muted); font-size: var(--fs-small); }
.scenes {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 300px);
  gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-4);
  scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.scene {
  scroll-snap-align: start;
  display: grid; gap: var(--space-3); align-content: start;
  padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
}
.scene-thumb { position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--surface); aspect-ratio: 16 / 9; }
.scene-thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter var(--dur-med), scale var(--dur-slow) var(--ease-out); }
.scene:hover .scene-thumb img, .scene.is-current .scene-thumb img { filter: none; scale: 1.04; }
.scene-len { position: absolute; right: var(--space-2); bottom: var(--space-2); padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--scrim); color: var(--fg); }
.scene.is-current .scene-thumb { outline: 2px solid var(--fg); outline-offset: 3px; }
.scene-with { font-weight: 600; line-height: 1.3; }
.scene-show { color: var(--muted); font-size: var(--fs-small); }

/* range */
.range-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--space-8); align-items: center; }
.range-lede { font-size: var(--fs-lead); color: var(--paper-muted); max-width: 38ch; margin-top: var(--space-5); }
.range-words { display: grid; margin: var(--space-6) 0; }
.range-word {
  grid-area: 1 / 1;
  font-family: var(--font-body); font-style: italic; font-weight: 800;
  font-size: clamp(3rem, 7vw, 6rem); line-height: 1; letter-spacing: -0.03em;
  transition: opacity var(--dur-med), translate var(--dur-med) var(--ease-out);
}
.range-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.compare {
  position: relative; width: min(100%, 440px); justify-self: center;
  aspect-ratio: 2 / 3; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0 30px 60px var(--shadow-soft);
}
.compare-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare-top { clip-path: inset(0 0 0 var(--pos)); }
.compare-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; translate: -1px 0; background: var(--fg); pointer-events: none; }
.compare-knob {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--fg); color: var(--bg); font-size: 1.25rem;
  box-shadow: 0 8px 20px var(--shadow);
}
.compare-tag { position: absolute; top: var(--space-4); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--scrim); color: var(--fg); backdrop-filter: blur(6px); }
.compare-tag-l { left: var(--space-4); }
.compare-tag-r { right: var(--space-4); }
.compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.compare:has(.compare-range:focus-visible) .compare-knob { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 860px) {
  .range-grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .player { border-radius: var(--radius-md); }
  .player-play { padding: var(--space-2); }
  .player-play-text { display: none; }
}