/* Static opening: selected V4 framing, four reviewable composition states.
 * Deliberately no scroll animation until this composition is approved. */
.opening .hero-copy .lead { max-width: 35ch; font-size: clamp(1rem, 1.15vw, 1.2rem); line-height: 1.5; }
.opening .stage { margin-bottom: 4rem; }
.opening .connectors { display: block; }
.opening .clip .ov { display: block; }
.opening .clip-inner { transform: none; transition: none; }
.opening .ov-audio { display: none; }
.opening-problems { display: grid; grid-template-columns: 1fr 1fr; column-gap: 8%; padding-block: var(--section-pad); }
.opening-problems > .h2 { max-width: 19ch; }
.problem-list article { padding: 1.2rem 0; border-top: 1px solid var(--rule-strong); }
.problem-list article:first-child { padding-top: 0; border: 0; }
.problem-list h3 { max-width: 26ch; font-size: clamp(1.25rem, 1.75vw, 1.75rem); line-height: 1.12; letter-spacing: -.025em; font-weight: 600; }
.problem-list p { max-width: 43ch; margin-top: .65rem; font-size: 1rem; line-height: 1.45; color: var(--ink-2); }

/* Review controls are outside the product and present only on ?review. */
.opening-review .site-nav { position: relative; }
.opening-review .sheet > .chapter:not(.opening), .opening-review .closing { display: none; }
.opening-review-tools { margin: .5rem var(--pad) 0; padding: 1rem 0; border-block: 1px solid var(--rule); display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1.5rem; }
.review-intro { display: grid; gap: .15rem; margin-right: auto; }
.review-intro strong { font-size: .85rem; font-weight: 600; }
.review-intro span, .review-state-note { font-size: .78rem; color: var(--ink-2); }
.review-states { display: flex; gap: .3rem; flex-wrap: wrap; }
.review-states button, .review-headline select { font: .8rem var(--sans); border: 1px solid var(--rule-strong); border-radius: var(--radius-ui); background: transparent; color: var(--ink); padding: .75rem .85rem; min-height: 44px; cursor: pointer; }
.review-states button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.review-states button:hover { border-color: var(--magenta); }
.review-headline { display: flex; align-items: center; gap: .5rem; font-size: .8rem; }
.review-headline select { max-width: 230px; }
.review-headline select:disabled { color: var(--ink-2); cursor: default; }
.review-state-note { flex-basis: 100%; }
.opening-review .opening { overflow: clip; padding-bottom: 1rem; }
.opening-review .opening .stage-caption { margin-top: 3rem; }
.opening-review .opening .opening-problems[hidden], .opening-exit[hidden] { display: none; }
.opening-review .opening .opening-problems { z-index: 5; }

/* The orbit's center is open; the source frame has already left. */
.opening:not([data-opening-state="opening"]) .hero-head { display: none; }
.opening:not([data-opening-state="opening"]) .stage { margin-top: 0; margin-bottom: 0; }
.opening:not([data-opening-state="opening"]) .screen { background: transparent; border-radius: 0; aspect-ratio: auto; height: clamp(650px, 51vw, 800px); }
.opening:not([data-opening-state="opening"]) .screen-copy,
.opening:not([data-opening-state="opening"]) .connectors,
.opening:not([data-opening-state="opening"]) .stage-caption { display: none; }
.opening:not([data-opening-state="opening"]) .film { display: none; }
.opening:not([data-opening-state="opening"]) .clip[data-slot="a"] { left: 25%; top: 53%; width: 15%; z-index: 4; }
.opening:not([data-opening-state="opening"]) .clip[data-slot="b"] { left: 44%; top: 27%; width: 13.5%; z-index: 3; }
.opening:not([data-opening-state="opening"]) .clip[data-slot="c"] { left: 3%; top: 43%; width: 13.5%; z-index: 3; }
.opening:not([data-opening-state="opening"]) .clip[data-slot="d"] { left: 8%; top: 5%; width: 11.5%; z-index: 1; }
.opening:not([data-opening-state="opening"]) .clip[data-slot="e"] { left: 29%; top: 0; width: 11%; z-index: 1; }
.opening:not([data-opening-state="opening"]) .opening-problems { position: absolute; display: block; left: 64%; top: 4%; width: 35%; padding: 0; overflow: visible; }
.opening .opening-problems .h2 { font-size: clamp(1.8rem, 2.5vw, 2.65rem); margin-bottom: 2rem; max-width: 20ch; }
.opening .opening-problems .problem-list h3 { font-size: clamp(1.2rem, 1.6vw, 1.65rem); }
.opening .opening-problems .problem-list p { font-size: clamp(.9rem, 1.05vw, 1.05rem); }

/* Midpoint: media leaves the screen before the orbit settles. */
.opening[data-opening-state="transition"] .film { display: block; width: 32%; left: 3%; top: 0; opacity: .28; }
.opening[data-opening-state="transition"] .clip[data-slot="a"] { left: 29%; top: 28%; }
.opening[data-opening-state="transition"] .clip[data-slot="b"] { left: 45%; top: 9%; }
.opening[data-opening-state="transition"] .clip[data-slot="c"] { left: 10%; top: 40%; }
.opening[data-opening-state="transition"] .clip[data-slot="d"] { left: 43%; top: 59%; }
.opening[data-opening-state="transition"] .clip[data-slot="e"] { left: 22%; top: 8%; }
.opening[data-opening-state="transition"] .opening-problems { opacity: 1; }

/* Exit is a composition study of the overlap, not the comparison build. */
.opening[data-opening-state="exit"] .screen { overflow: hidden; }
.opening[data-opening-state="exit"] .clip { opacity: .13; }
.opening[data-opening-state="exit"] .clip[data-slot="a"] { left: 42%; top: 81%; }
.opening[data-opening-state="exit"] .clip[data-slot="b"] { left: 86%; top: 53%; }
.opening[data-opening-state="exit"] .clip[data-slot="c"] { left: -5%; top: 59%; }
.opening[data-opening-state="exit"] .clip[data-slot="d"] { left: 8%; top: 75%; }
.opening[data-opening-state="exit"] .clip[data-slot="e"] { left: 75%; top: 82%; }
.opening-exit { position: absolute; inset: 14% 0 auto; text-align: center; z-index: 4; }
.exit-budget { font-size: clamp(5rem, 13vw, 12rem); line-height: 1; letter-spacing: -.045em; font-weight: 650; font-variant-numeric: tabular-nums; }
.opening-exit > p + p { font-size: clamp(1.3rem, 2.3vw, 2.4rem); line-height: 1.15; margin-top: 1rem; }

@media (max-width: 1100px) and (min-width: 861px) {
  .opening .hero-copy { grid-column: 8 / -1; }
  .opening .opening-problems .h2 { font-size: 1.85rem; margin-bottom: 1.4rem; }
  .opening .problem-list article { padding-block: .85rem; }
}
@media (max-width: 860px) {
  .opening .hero-copy .lead { max-width: 49ch; font-size: 1rem; }
  .opening .stage { margin-bottom: 1rem; }
  .opening .connectors { display: none; }
  .opening .screen { min-height: 680px; padding: 1rem; }
  .opening .film { position: absolute; width: calc(100% - 2rem); left: 1rem; top: 1rem; }
  .opening .screen-copy { position: absolute; left: 1rem; top: 175px; bottom: auto; width: 80%; margin-top: 0; }
  .opening .screen-meta { margin-top: .5rem; font-size: .6rem; }
  .opening .clips { position: absolute; display: block; inset: 0; margin: 0; }
  .opening .clips .clip[data-slot] { position: absolute; transform: none !important; }
  .opening .clips .clip[data-slot="a"] { width: 33%; left: 4%; top: 40%; z-index: 4; }
  .opening .clips .clip[data-slot="b"] { width: 34%; left: 62%; top: 51%; z-index: 4; }
  .opening .clips .clip[data-slot="c"] { width: 33%; left: 28%; top: 63%; z-index: 4; }
  .opening .clips .clip[data-slot="d"] { width: 24%; left: 70%; top: 25%; z-index: 2; }
  .opening .clips .clip[data-slot="e"] { width: 24%; left: 39%; top: 38%; z-index: 2; }
  .opening .clip .ov { display: block; }
  .opening .clip-inner { border-radius: 9px; }
  .opening .ov-meta { right: 18cqw; }
  .opening .ov-cap { font-size: 5.3cqw; }
  .opening .ov-top { font-size: 5cqw; }
  .opening .ov-i { width: 9.5cqw; height: 9.5cqw; }
  .opening .ov-disc, .opening .ov-thumb { display: none; }
  .opening-problems { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
  .opening-problems > .h2 { max-width: 23ch; }
  .problem-list h3 { font-size: 1.45rem; }
  .opening-review-tools { gap: .75rem; }
  .review-intro { width: 100%; }
  .review-intro span { display: none; }
  .review-states { flex-wrap: nowrap; width: 100%; }
  .review-states button { padding: .7rem .55rem; flex: 1; font-size: .73rem; }
  .review-headline { width: 100%; }
  .review-headline select { max-width: none; flex: 1; }
  .opening-review .chapter.hero { padding-top: 1.5rem; }
  .opening:not([data-opening-state="opening"]) .screen { min-height: 0; height: 480px; padding: 0; }
  .opening:not([data-opening-state="opening"]) .clips .clip[data-slot="a"] { left: 33%; top: 56%; width: 32%; }
  .opening:not([data-opening-state="opening"]) .clips .clip[data-slot="b"] { left: 68%; top: 27%; width: 31%; }
  .opening:not([data-opening-state="opening"]) .clips .clip[data-slot="c"] { left: 0; top: 38%; width: 31%; }
  .opening:not([data-opening-state="opening"]) .clips .clip[data-slot="d"] { left: 7%; top: 0; width: 25%; }
  .opening:not([data-opening-state="opening"]) .clips .clip[data-slot="e"] { left: 44%; top: 3%; width: 24%; }
  .opening:not([data-opening-state="opening"]) .opening-problems { position: relative; left: auto; top: auto; width: 100%; padding-top: 2rem; }
  .opening .opening-problems .h2 { font-size: 2rem; max-width: 22ch; margin-bottom: 2rem; }
  .opening .opening-problems .problem-list h3 { font-size: 1.4rem; }
  .opening .opening-problems .problem-list p { font-size: 1rem; }
  .opening[data-opening-state="transition"] .film { width: 52%; top: 0; left: 0; }
  .opening[data-opening-state="transition"] .clips { top: 50px; }
  .opening[data-opening-state="exit"] .clips .clip { opacity: .13 !important; }
  .opening[data-opening-state="exit"] .clips .clip[data-slot="a"] { left: 34%; top: 85%; }
  .opening[data-opening-state="exit"] .clips .clip[data-slot="b"] { left: 87%; top: 55%; }
  .opening[data-opening-state="exit"] .clips .clip[data-slot="c"] { left: -17%; top: 58%; }
  .opening[data-opening-state="exit"] .clips .clip[data-slot="d"] { left: 4%; top: 83%; }
  .opening[data-opening-state="exit"] .clips .clip[data-slot="e"] { left: 75%; top: 84%; }
  .opening-exit { top: 12%; }
  .exit-budget { font-size: 18vw; }
}
@media (min-width: 560px) and (max-width: 860px) {
  .opening .screen { min-height: 170vw; }
  .opening .screen-copy { top: 300px; }
  .opening:not([data-opening-state="opening"]) .screen { height: 135vw; }
  .opening[data-opening-state="transition"] .screen { height: calc(135vw + 50px); }
}
/* 2026-09-20 (Levi batch 1, item 3). The stage copy now carries the lead paragraph and the CTA, so on narrow screens the screen stacks film, copy, then a single low row of clips. The copy can be any height without touching a clip. The screen's height is still pinned by opening-motion.js, so the row is kept short. */
@media (max-width: 860px) {
  .opening .screen { display: flex; flex-direction: column; min-height: 0; }
  .opening .film { position: relative; left: auto; top: 0 !important; width: 100%; flex: none; }
  .opening .screen-copy--cta { position: static; width: auto; margin-top: 1rem; top: auto !important; flex: none; }
  .opening .screen-lead { font-size: 1.2rem; max-width: none; }
  .opening .screen-sub { font-size: var(--t-body-sm); max-width: none; }
  .opening .screen-actions { margin-top: .9rem; gap: .8rem 1rem; }
  .opening .clips { position: relative; inset: auto; height: 53vw; margin-top: 2.25rem; order: 2; flex: none; }
  .opening .clips .clip[data-slot="a"] { width: 30%; left: 3%; top: 0; z-index: 4; }
  .opening .clips .clip[data-slot="b"] { width: 30%; left: 35%; top: 0; z-index: 4; }
  .opening .clips .clip[data-slot="c"] { width: 30%; left: 67%; top: 0; z-index: 4; }
  .opening .clips .clip[data-slot="d"] { width: 18%; left: -3%; top: 14%; z-index: 2; }
  .opening .clips .clip[data-slot="e"] { width: 18%; left: 85%; top: 14%; z-index: 2; }
}