/* The stage: a 4:5 frame sized in container units so it scales like a video frame. */
.stage { --night: #0D1726; --sand: #E3B25E; /* the video keeps its night palette; site tokens moved to the ledger look */
    position: relative; aspect-ratio: 4 / 5; container-type: inline-size; overflow: hidden; border-radius: var(--radius-card);
    color: #F4F1EA; font-family: var(--font);
    background: radial-gradient(120% 55% at 50% 100%, rgba(227, 178, 94, .24), transparent 62%),
                linear-gradient(180deg, #0A1220 0%, var(--night) 55%, #16233A 100%); }
.stage > * { position: absolute; left: 6.5cqw; right: 6.5cqw; }
.st-brand { top: 6cqw; font: 800 4.4cqw/1 var(--display); font-stretch: 78%; }
.st-brand span { color: var(--sand); }
.st-date { top: 11.8cqw; font-size: 3cqw; color: rgba(244, 241, 234, .66); }
.st-count { top: 18cqw; font: 800 19cqw/.9 var(--display); font-stretch: 78%; font-variant-numeric: tabular-nums; }
.st-label { top: 36cqw; font-size: 4.2cqw; color: rgba(244, 241, 234, .72); }
.st-value { top: 42.5cqw; font: 800 9cqw/1 var(--display); font-stretch: 78%; color: var(--sand); font-variant-numeric: tabular-nums; }
.st-chip { top: 53cqw; right: auto; padding: 1.2cqw 2.6cqw; border-radius: 99px; font-size: 3cqw; font-weight: 600; }
.st-chip.up { background: rgba(78, 196, 140, .16); color: #7FD9AE; }
.st-chip.down { background: rgba(240, 110, 130, .16); color: #F4A3B1; }
.st-facts { top: 63cqw; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 4cqw; margin: 0; }
.st-facts dt { font-size: 2.7cqw; color: rgba(244, 241, 234, .6); }
.st-facts dd { margin: .8cqw 0 0; font-size: 3.3cqw; font-weight: 700; line-height: 1.3; }
.st-bar { height: 1.2cqw; margin-top: 1.4cqw; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.st-bar i { display: block; height: 100%; width: var(--w); background: var(--sand); transform-origin: left; }
.st-sky { left: 0; right: 0; bottom: 7.5cqw; height: 21cqw; }
.st-sky svg { width: 100%; height: 100%; display: block; }
.st-sky .body { fill: #0E1829; }
.st-sky .roof { fill: rgba(227, 178, 94, .55); }
.st-sky .star .body { fill: #F4F1EA; }
.st-sky .star .lit { opacity: 0; }
.st-callout { bottom: 31cqw; left: auto; font-size: 2.8cqw; font-weight: 600; text-align: right; color: #fff; }
.st-foot { bottom: 3cqw; font-size: 2.4cqw; color: rgba(244, 241, 234, .55); border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 1.6cqw; }
.st-replay { position: absolute; top: 5cqw; right: 5cqw; left: auto; min-height: 0; padding: 1cqw 2.4cqw; font-size: 2.6cqw;
    background: rgba(255, 255, 255, .08); color: #F4F1EA; border: 1px solid rgba(255, 255, 255, .18); border-radius: 99px; cursor: pointer; }

/* One orchestrated entrance; each piece waits for its beat (--t, in ms). */
.stage.play [data-t] { animation: st-in .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--t) * 1ms); }
.stage.play .st-sky .tower { transform-box: fill-box; transform-origin: 50% 100%;
    animation: st-rise 1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(300ms + var(--d) * 1ms); }
.stage.play .st-bar i { animation: st-fill 1.1s cubic-bezier(.2, .8, .2, 1) both 5.6s; }
.stage.play .st-sky .star .body { animation: st-glow 1s ease both 4.2s; }
@keyframes st-in { from { opacity: 0; transform: translateY(2.5cqw); } }
@keyframes st-rise { from { transform: scaleY(0); } }
@keyframes st-fill { from { transform: scaleX(0); } }
@keyframes st-glow { from { fill: #0E1829; } }
@media (prefers-reduced-motion: reduce) { .stage.play *, .stage.play .tower { animation: none !important; } }

/* Portrait rows reserve space for text throughout every animation beat. */
html:has(body.video-frame), body.video-frame { width: 1080px; height: 1920px; overflow: hidden; }
.video-frame .stage { width: 1080px; height: 1920px; aspect-ratio: 9 / 16; border-radius: 0;
    display: flex; flex-direction: column; gap: 1cqw; padding: 4cqw 0; box-sizing: border-box; }
.video-frame .stage > * { position: static; flex-shrink: 0; margin-inline: 6.5cqw; }
.video-frame .st-brand { font-size: 5.2cqw; }
.video-frame .st-date { font-size: 3.6cqw; line-height: 1.3; }
.video-frame .st-count { font-size: 42cqw; line-height: 1; letter-spacing: -.025em; }
.video-frame .st-label { font-size: 5cqw; line-height: 1.2; }
.video-frame .st-value { font-size: 13cqw; line-height: 1.1; }
.video-frame .st-chip { align-self: flex-start; font-size: 3cqw; line-height: 1.2; }
.video-frame .st-facts { grid-template-columns: 1.4fr 1fr 1fr; gap: 3cqw; margin-top: 1cqw; }
.video-frame .st-facts > div { min-width: 0; overflow-wrap: anywhere; }
.video-frame .st-facts dt { font-size: 2.8cqw; line-height: 1.2; }
.video-frame .st-facts dd { font-size: 3.3cqw; }
.video-frame .st-callout { order: 1; font-size: 3.1cqw; line-height: 1.25; margin-top: 1cqw; }
.video-frame .st-sky { order: 2; flex: 1 1 53cqw; min-height: 0; margin: 0; }
.video-frame .st-foot { order: 3; font-size: 2.7cqw; line-height: 1.3; }
.video-frame .st-end { order: 4; font-size: 3.8cqw; line-height: 1.3; font-weight: 600; color: var(--sand); }
.video-frame .stage.play [data-t] { animation-name: st-video-in; }
@keyframes st-video-in { from { opacity: 0; } }