/* The video previews, 9:16 or 16:9 (.pv.wide). Shared layout first, then one
   block per style, then the landscape layouts at the end.
   Sizes are in cqmin (percent of the frame's SHORT side), so a thumbnail and
   the big stage preview are the same picture at different sizes, and type
   is the same size relative to the frame in either shape. */

.pv {
  --bg: #000; --text: #fff; --muted: #999; --accent: #fff; --card: rgba(255,255,255,.08);
  --head: Inter, system-ui, sans-serif; --body: Inter, system-ui, sans-serif; --hw: 800;
  --ease: cubic-bezier(.2,.8,.2,1);
  position: relative; aspect-ratio: 9 / 16; width: 100%; height: auto; overflow: hidden;
  container-type: size; isolation: isolate;
  background: var(--bg); color: var(--text); font-family: var(--body);
  border-radius: 14px;
}
.pv * { box-sizing: border-box; }
.pv-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pv-bg i { position: absolute; display: none; }
.pv-bar { position: absolute; left: 6cqmin; right: 6cqmin; top: 4cqmin; height: 0.9cqmin; border-radius: 1cqmin; background: color-mix(in srgb, var(--text) 18%, transparent); overflow: hidden; }
.pv-bar i { display: block; height: 100%; width: 0; background: var(--text); transition: width .3s; }

.pv .sc {
  position: absolute; inset: 0; padding: 18cqmin 9cqmin 22cqmin;
  display: flex; flex-direction: column; justify-content: center; gap: 3.2cqmin;
  visibility: hidden;
}
.pv .sc.on { visibility: visible; }
.pv .a { opacity: 0; }
.pv .sc.on .a { animation: pv-in .6s var(--ease) both; animation-delay: calc(var(--i) * 140ms); }
@keyframes pv-in { from { opacity: 0; transform: translateY(6cqmin); } to { opacity: 1; transform: none; } }

.pv .k-big { font: var(--hw) 13cqmin/1 var(--head); letter-spacing: -.03em; overflow-wrap: anywhere; }
.pv .k-small { font: 600 4.4cqmin/1.25 var(--body); color: var(--muted); }
.pv .sc-hook .k-big { color: var(--accent); }
.pv .sc-hook .k-big.xl { font-size: 26cqmin; line-height: .95; }
.pv .sc-hook.alt .k-big { font-size: 9.5cqmin; line-height: 1.08; color: var(--text); }

.pv .sc-reveal { align-items: flex-start; }
.pv .r-img { width: 38cqmin; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--card); display: grid; place-items: center; }
.pv .r-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv .r-img.logo { border-radius: 6cqmin; background: transparent; }
.pv .r-img.logo img { object-fit: contain; }
.pv .r-empty span { font: var(--hw) 16cqmin/1 var(--head); color: var(--accent); }
.pv .r-tag { font: 600 3.6cqmin/1 var(--body); text-transform: uppercase; letter-spacing: .14em; color: var(--accent); }
.pv .r-name { font: var(--hw) 11.5cqmin/1 var(--head); letter-spacing: -.03em; }
.pv .r-sub { font: 500 4.6cqmin/1.3 var(--body); color: var(--muted); }

.pv .l-title { font: var(--hw) 8cqmin/1 var(--head); letter-spacing: -.02em; margin-bottom: 1cqmin; }
.pv .card { background: var(--card); border-radius: 4cqmin; padding: 4cqmin 4.5cqmin; display: flex; flex-direction: column; gap: .8cqmin; }
.pv .card b { font: 700 5cqmin/1.15 var(--head); }
.pv .l-s { font: 500 3.6cqmin/1.2 var(--body); color: var(--muted); }
.pv .l-p { font: 600 3.8cqmin/1.25 var(--body); color: var(--accent); }

.pv .sc-stats { gap: 4cqmin; }
.pv .stat b { font: var(--hw) 15cqmin/1 var(--head); letter-spacing: -.04em; color: var(--accent); }
.pv .stat span { font: 500 4cqmin/1.25 var(--body); color: var(--muted); }

.pv .sc-gallery { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 3cqmin; }
.pv .sc-gallery .l-title { grid-column: 1 / -1; }
.pv .shot { border-radius: 4cqmin; overflow: hidden; aspect-ratio: 3 / 4; background: var(--card); }
.pv .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv .sc-gallery.n1 .shot, .pv .sc-gallery.n3 .shot:first-of-type { grid-column: 1 / -1; aspect-ratio: 4 / 3; }

.pv .chips { display: flex; flex-wrap: wrap; gap: 2cqmin; margin-top: 2cqmin; }
.pv .chip { font: 600 3.6cqmin/1 var(--body); padding: 2.4cqmin 3.4cqmin; border-radius: 10cqmin; background: var(--card); }

.pv .q-mark { font: var(--hw) 22cqmin/.6 var(--head); color: var(--accent); }
.pv .k-big.q { font-size: 7.6cqmin; line-height: 1.15; letter-spacing: -.01em; }

.pv .sc-cta { align-items: flex-start; }
.pv .sc-cta .k-big { font-size: 10.5cqmin; line-height: 1.04; }
.pv .cta-btn { font: 700 4.4cqmin/1 var(--body); padding: 4cqmin 5.5cqmin; border-radius: 3cqmin; background: var(--accent); color: var(--bg); position: relative; }
.pv .cursor { position: absolute; left: 38cqmin; top: 72%; width: 6cqmin; height: 6cqmin; opacity: 0; }
.pv .cursor::before { content: ""; position: absolute; inset: 0; background: var(--text); clip-path: polygon(0 0, 0 100%, 30% 72%, 52% 100%, 66% 92%, 46% 66%, 85% 66%); }

.pv-still .a, .pv-still .sc.on .a { animation: none !important; opacity: 1 !important; clip-path: none !important; }
.pv-still .pv-bar, .pv-still .cursor { display: none; }
.pv-still .pv-bg i { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .pv .sc.on .a { animation-duration: .01s !important; animation-delay: 0s !important; }
  .pv-bg i { animation: none !important; }
}

/* ── 1. Launch Night ─────────────────────────────── */
.pv[data-style="launch"] { --bg: #07080c; --text: #f5f7fb; --muted: #8b93a7; --accent: #4f7cff; --card: rgba(18,20,28,.8); --head: Inter; --body: Inter; --hw: 800; }
.pv[data-style="launch"] .pv-bg { background: radial-gradient(70cqmin 60cqmin at 50% 40%, rgba(79,124,255,.35), transparent 70%); }
.pv[data-style="launch"] .card { border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(8px); }
.pv[data-style="launch"] .sc.on .a { animation: launch-in .45s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i) * 110ms); }
@keyframes launch-in { from { opacity: 0; transform: scale(1.18); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.pv[data-style="launch"] .sc-cta.on .cursor { animation: launch-cursor 1.6s .7s both; }
@keyframes launch-cursor { 0% { opacity: 0; transform: translate(30cqmin, 20cqmin); } 30% { opacity: 1; } 70% { transform: none; } 80% { transform: scale(.8); } 100% { opacity: 1; transform: none; } }

/* ── 2. Keynote White ────────────────────────────── */
.pv[data-style="keynote"] { --bg: #fff; --text: #111; --muted: #6e6e73; --accent: #0071e3; --card: #f5f5f7; --head: Geist; --body: Geist; --hw: 600; border: 1px solid rgba(0,0,0,.08); }
.pv[data-style="keynote"] .sc { text-align: center; align-items: center; }
.pv[data-style="keynote"] .sc-hook .k-big { color: var(--text); }
.pv[data-style="keynote"] .sc.on .a { animation: keynote-in .9s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i) * 220ms); }
@keyframes keynote-in { from { opacity: 0; transform: translateY(5cqmin) scale(1.04); } to { opacity: 1; transform: none; } }
.pv[data-style="keynote"] .shot { box-shadow: 0 3cqmin 8cqmin rgba(0,0,0,.14); }
.pv[data-style="keynote"] .cta-btn { border-radius: 10cqmin; color: #fff; }

/* ── 3. Editorial ────────────────────────────────── */
.pv[data-style="editorial"] { --bg: #f3eee4; --text: #1b1a17; --muted: #6b645a; --accent: #c2410c; --card: #fbf8f2; --head: 'Instrument Serif'; --body: Inter; --hw: 400; }
.pv[data-style="editorial"] .k-big, .pv[data-style="editorial"] .r-name { font-style: italic; letter-spacing: -.01em; font-size: 15cqmin; }
.pv[data-style="editorial"] .sc-hook.alt .k-big { font-size: 11cqmin; }
.pv[data-style="editorial"] .k-small, .pv[data-style="editorial"] .r-tag { font-size: 3.2cqmin; text-transform: uppercase; letter-spacing: .18em; color: var(--accent); }
.pv[data-style="editorial"] .sc::before { content: "No. 01"; position: absolute; top: 9cqmin; left: 9cqmin; right: 9cqmin; padding-bottom: 2cqmin; border-bottom: 1px solid var(--text); font: 600 3cqmin/1 Inter; letter-spacing: .18em; }
.pv[data-style="editorial"] .card { border-radius: 0; border-top: 1px solid var(--text); background: transparent; padding: 3cqmin 0; }
.pv[data-style="editorial"] .card b { font: 400 7cqmin/1.05 'Instrument Serif'; }
.pv[data-style="editorial"] .shot, .pv[data-style="editorial"] .r-img { border-radius: 0; }
.pv[data-style="editorial"] .cta-btn { border-radius: 0; background: var(--text); color: var(--bg); }
.pv[data-style="editorial"] .sc.on .a { animation: ed-in .8s cubic-bezier(.7,0,.2,1) both; animation-delay: calc(var(--i) * 180ms); }
@keyframes ed-in { from { opacity: 1; clip-path: inset(100% 0 0 0); transform: translateY(4cqmin); } to { opacity: 1; clip-path: inset(0); transform: none; } }

/* ── 4. Neo Brutal ───────────────────────────────── */
.pv[data-style="brutal"] { --bg: #fff7d6; --text: #111; --muted: #3a3a3a; --accent: #ff6fb5; --card: #fff; --head: 'Space Grotesk'; --body: 'Space Grotesk'; --hw: 700; }
.pv[data-style="brutal"] .card, .pv[data-style="brutal"] .shot, .pv[data-style="brutal"] .r-img, .pv[data-style="brutal"] .cta-btn, .pv[data-style="brutal"] .chip { border: 1.2cqmin solid #111; box-shadow: 2.4cqmin 2.4cqmin 0 #111; }
.pv[data-style="brutal"] .r-img { border-radius: 4cqmin; }
.pv[data-style="brutal"] .card:nth-of-type(3n+1), .pv[data-style="brutal"] .chip:nth-child(3n+1) { background: #ffd23f; }
.pv[data-style="brutal"] .card:nth-of-type(3n+2), .pv[data-style="brutal"] .chip:nth-child(3n+2) { background: #ff6fb5; }
.pv[data-style="brutal"] .card:nth-of-type(3n), .pv[data-style="brutal"] .chip:nth-child(3n) { background: #4d7cfe; color: #fff; }
.pv[data-style="brutal"] .card:nth-of-type(3n) span { color: #fff; }
.pv[data-style="brutal"] .stat b, .pv[data-style="brutal"] .l-p { color: #111; }
.pv[data-style="brutal"] .sc-hook .k-big { color: #111; background: #ffd23f; padding: 2cqmin 3cqmin; border: 1.2cqmin solid #111; box-shadow: 2.4cqmin 2.4cqmin 0 #111; transform: rotate(-2deg); }
.pv[data-style="brutal"] .sc-reveal::after { content: "NEW!"; position: absolute; right: 10cqmin; top: 22cqmin; font: 700 4.4cqmin/1 'Space Grotesk'; background: #ff6fb5; border: 1cqmin solid #111; padding: 2cqmin 3cqmin; transform: rotate(12deg); }
.pv[data-style="brutal"] .cta-btn { color: #111; }
.pv[data-style="brutal"] .sc.on .a { animation: br-in .5s cubic-bezier(.34,1.8,.64,1) both; animation-delay: calc(var(--i) * 130ms); }
@keyframes br-in { from { opacity: 0; transform: scale(.3) rotate(-6deg); } to { opacity: 1; transform: none; } }

/* ── 5. Kinetic Type ─────────────────────────────── */
.pv[data-style="kinetic"] { --bg: #000; --text: #fff; --muted: #9a9a9a; --accent: #c6ff00; --card: #111; --head: Anton; --body: Inter; --hw: 400; }
.pv[data-style="kinetic"] .k-big, .pv[data-style="kinetic"] .r-name, .pv[data-style="kinetic"] .l-title, .pv[data-style="kinetic"] .card b { text-transform: uppercase; letter-spacing: 0; }
.pv[data-style="kinetic"] .k-big { font-size: 16cqmin; line-height: .9; }
.pv[data-style="kinetic"] .sc-hook.alt .k-big, .pv[data-style="kinetic"] .sc-cta .k-big { font-size: 13cqmin; }
.pv[data-style="kinetic"] .k-big.q { font-size: 9cqmin; text-transform: none; }
.pv[data-style="kinetic"] .r-name { font-size: 17cqmin; line-height: .9; }
.pv[data-style="kinetic"] .card { background: transparent; padding: 1cqmin 0; }
.pv[data-style="kinetic"] .card b { font: 400 9cqmin/1 Anton; }
.pv[data-style="kinetic"] .stat b { font-size: 24cqmin; }
.pv[data-style="kinetic"] .sc-stats.on, .pv[data-style="kinetic"] .sc-hook.alt.on { animation: kin-flash .35s steps(1) both; }
@keyframes kin-flash { 0% { background: #fff; } 50% { background: transparent; } }
.pv[data-style="kinetic"] .r-img { border-radius: 0; filter: grayscale(1) contrast(1.2); }
.pv[data-style="kinetic"] .cta-btn { border-radius: 0; text-transform: uppercase; }
.pv[data-style="kinetic"] .sc.on .a { animation: kin-in .22s cubic-bezier(.2,.9,.1,1) both; animation-delay: calc(var(--i) * 200ms); }
@keyframes kin-in { from { opacity: 0; transform: scale(3); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }

/* ── 6. Aurora Glass ─────────────────────────────── */
.pv[data-style="aurora"] { --bg: #0b0820; --text: #fff; --muted: #b8b3e0; --accent: #00d4ff; --card: rgba(255,255,255,.1); --head: Manrope; --body: Manrope; --hw: 800; }
.pv[data-style="aurora"] .pv-bg i { display: block; width: 80cqmin; height: 80cqmin; border-radius: 50%; filter: blur(14cqmin); opacity: .75; animation: au-drift 9s ease-in-out infinite alternate; }
.pv[data-style="aurora"] .pv-bg i:nth-child(1) { background: #7c5cff; left: -30cqmin; top: -10cqmin; }
.pv[data-style="aurora"] .pv-bg i:nth-child(2) { background: #00d4ff; right: -35cqmin; top: 60cqmin; animation-delay: -3s; }
.pv[data-style="aurora"] .pv-bg i:nth-child(3) { background: #ff7ad9; left: -10cqmin; bottom: -30cqmin; animation-delay: -6s; }
@keyframes au-drift { to { transform: translate(18cqmin, -14cqmin) scale(1.2); } }
.pv[data-style="aurora"] .card, .pv[data-style="aurora"] .chip { border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(10px); }
.pv[data-style="aurora"] .sc-hook .k-big, .pv[data-style="aurora"] .stat b, .pv[data-style="aurora"] .r-name { background: linear-gradient(90deg, #fff, #b9a8ff 55%, #00d4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pv[data-style="aurora"] .cta-btn { background: linear-gradient(90deg, #7c5cff, #00d4ff); color: #fff; border-radius: 10cqmin; }
.pv[data-style="aurora"] .sc.on .a { animation: au-in 1s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i) * 160ms); }
@keyframes au-in { from { opacity: 0; filter: blur(4cqmin); transform: translateY(8cqmin); } to { opacity: 1; filter: none; transform: none; } }

/* ── 7. Terminal ─────────────────────────────────── */
.pv[data-style="terminal"] { --bg: #0a0f0a; --text: #c8facc; --muted: #5f7f63; --accent: #39ff88; --card: #101810; --head: 'JetBrains Mono'; --body: 'JetBrains Mono'; --hw: 800; }
.pv[data-style="terminal"] .pv-bg { background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px); }
.pv[data-style="terminal"] .sc { justify-content: flex-start; padding-top: 22cqmin; }
.pv[data-style="terminal"] .sc::before { position: absolute; top: 12cqmin; left: 9cqmin; font: 600 3.4cqmin/1 'JetBrains Mono'; color: var(--muted); }
.pv[data-style="terminal"] .sc-hook::before { content: "$ ./intro --hook"; }
.pv[data-style="terminal"] .sc-reveal::before { content: "$ whoami"; }
.pv[data-style="terminal"] .sc-list::before { content: "$ cat history.log"; }
.pv[data-style="terminal"] .sc-stats::before { content: "$ ./stats --live"; }
.pv[data-style="terminal"] .sc-gallery::before { content: "$ open ./work"; }
.pv[data-style="terminal"] .sc-chips::before { content: "$ ls skills/"; }
.pv[data-style="terminal"] .sc-quote::before { content: "$ grep -i review"; }
.pv[data-style="terminal"] .sc-cta::before { content: "$ ./contact.sh"; }
.pv[data-style="terminal"] .k-big { font-size: 9.5cqmin; letter-spacing: -.04em; }
.pv[data-style="terminal"] .r-name { font-size: 8.5cqmin; letter-spacing: -.04em; }
.pv[data-style="terminal"] .r-name::after, .pv[data-style="terminal"] .sc-cta .k-big::after { content: "▋"; color: var(--accent); animation: term-blink 1s steps(1) infinite; }
@keyframes term-blink { 50% { opacity: 0; } }
.pv[data-style="terminal"] .l-title::before { content: "> "; color: var(--accent); }
.pv[data-style="terminal"] .card, .pv[data-style="terminal"] .chip, .pv[data-style="terminal"] .shot { border-radius: 1.5cqmin; border: 1px solid rgba(57,255,136,.25); }
.pv[data-style="terminal"] .r-img { border-radius: 2cqmin; filter: saturate(.4) hue-rotate(60deg); }
.pv[data-style="terminal"] .cta-btn { border-radius: 1.5cqmin; }
.pv[data-style="terminal"] .sc.on .a { animation: term-in .7s steps(14) both; animation-delay: calc(var(--i) * 280ms); }
@keyframes term-in { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }

/* ── 8. Scrapbook ────────────────────────────────── */
.pv[data-style="scrapbook"] { --bg: #f6efe2; --text: #2b2620; --muted: #6f6559; --accent: #e4572e; --card: #fff; --head: Caveat; --body: Inter; --hw: 700; }
.pv[data-style="scrapbook"] .k-big { font-size: 17cqmin; letter-spacing: 0; }
.pv[data-style="scrapbook"] .sc-hook.alt .k-big { font-size: 12cqmin; }
.pv[data-style="scrapbook"] .r-name, .pv[data-style="scrapbook"] .l-title { letter-spacing: 0; font-size: 13cqmin; }
.pv[data-style="scrapbook"] .sc-hook .k-big { color: var(--text); text-decoration: underline wavy var(--accent) .8cqmin; text-underline-offset: 3cqmin; }
.pv[data-style="scrapbook"] .r-img, .pv[data-style="scrapbook"] .shot { border-radius: 1cqmin; border: 2.4cqmin solid #fff; border-bottom-width: 8cqmin; box-shadow: 0 2cqmin 5cqmin rgba(60,40,10,.2); transform: rotate(-3deg); position: relative; overflow: visible; }
.pv[data-style="scrapbook"] .r-img img, .pv[data-style="scrapbook"] .shot img { border-radius: 0; }
.pv[data-style="scrapbook"] .r-img::before, .pv[data-style="scrapbook"] .shot::before { content: ""; position: absolute; top: -4cqmin; left: 30%; width: 40%; height: 6cqmin; background: rgba(243,215,122,.75); transform: rotate(-4deg); z-index: 1; }
.pv[data-style="scrapbook"] .shot:nth-child(odd) { transform: rotate(2.5deg); }
.pv[data-style="scrapbook"] .card { border-radius: 1cqmin; box-shadow: 0 1.5cqmin 4cqmin rgba(60,40,10,.14); }
.pv[data-style="scrapbook"] .card:nth-of-type(odd) { transform: rotate(-1.4deg); }
.pv[data-style="scrapbook"] .card:nth-of-type(even) { transform: rotate(1.2deg); }
.pv[data-style="scrapbook"] .card b { font: 700 7cqmin/1 Caveat; }
.pv[data-style="scrapbook"] .chip { background: #fff; box-shadow: 0 1cqmin 2.4cqmin rgba(60,40,10,.14); border-radius: 1cqmin; }
.pv[data-style="scrapbook"] .cta-btn { border-radius: 1cqmin; transform: rotate(-2deg); color: #fff; }
.pv[data-style="scrapbook"] .sc.on .a { animation: sb-in .6s steps(6) both; animation-delay: calc(var(--i) * 200ms); }
@keyframes sb-in { from { opacity: 0; translate: 0 -14cqmin; rotate: -8deg; } 70% { opacity: 1; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }

/* ── 9. Swiss Grid ───────────────────────────────── */
.pv[data-style="swiss"] { --bg: #f2f2f0; --text: #111; --muted: #555; --accent: #e30613; --card: #fff; --head: 'Inter Tight'; --body: 'Inter Tight'; --hw: 800; border-radius: 4px; }
.pv[data-style="swiss"] .pv-bg { background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 6 - 1px), rgba(0,0,0,.07) calc(100% / 6 - 1px) calc(100% / 6)); }
.pv[data-style="swiss"] * { border-radius: 0 !important; }
.pv[data-style="swiss"] .k-big, .pv[data-style="swiss"] .r-name { letter-spacing: -.06em; }
.pv[data-style="swiss"] .sc::before { content: ""; position: absolute; left: 0; top: 13cqmin; width: 0; height: 3cqmin; background: var(--accent); }
.pv[data-style="swiss"] .sc.on::before { animation: sw-bar .5s cubic-bezier(.77,0,.18,1) both; }
@keyframes sw-bar { to { width: 58cqw; } }
.pv[data-style="swiss"] .sc-hook:not(.alt) .k-big { font-size: 15cqmin; line-height: .95; }
.pv[data-style="swiss"] .card { border-left: 2cqmin solid var(--accent); background: transparent; padding: 1cqmin 0 1cqmin 4cqmin; }
.pv[data-style="swiss"] .stat b { font-size: 22cqmin; color: var(--text); }
.pv[data-style="swiss"] .r-img { filter: grayscale(1); }
.pv[data-style="swiss"] .sc.on .a { animation: sw-in .5s cubic-bezier(.77,0,.18,1) both; animation-delay: calc(var(--i) * 120ms); }
@keyframes sw-in { from { opacity: 0; transform: translateX(-20cqmin); } to { opacity: 1; transform: none; } }

/* ── 10. Bento ───────────────────────────────────── */
.pv[data-style="bento"] { --bg: #f4f4f5; --text: #18181b; --muted: #71717a; --accent: #6d5dfc; --card: #fff; --head: 'DM Sans'; --body: 'DM Sans'; --hw: 700; }
.pv[data-style="bento"] .card, .pv[data-style="bento"] .shot { border-radius: 6cqmin; }
.pv[data-style="bento"] .sc-list, .pv[data-style="bento"] .sc-stats { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 3cqmin; }
.pv[data-style="bento"] .sc-list .l-title { grid-column: 1 / -1; }
.pv[data-style="bento"] .sc-list .card:nth-of-type(2), .pv[data-style="bento"] .sc-stats .card:first-child { grid-column: 1 / -1; }
.pv[data-style="bento"] .card { min-height: 26cqmin; justify-content: flex-end; }
.pv[data-style="bento"] .card:nth-of-type(4n+1) { background: #e8f0ff; }
.pv[data-style="bento"] .card:nth-of-type(4n+2) { background: #fff1e6; }
.pv[data-style="bento"] .card:nth-of-type(4n+3) { background: #eaf7ee; }
.pv[data-style="bento"] .stat b { font-size: 12cqmin; }
.pv[data-style="bento"] .sc-stats .card:first-child b { font-size: 18cqmin; }
.pv[data-style="bento"] .sc-hook .k-big { background: #fff; border-radius: 6cqmin; padding: 6cqmin; }
.pv[data-style="bento"] .r-img { border-radius: 8cqmin; }
.pv[data-style="bento"] .cta-btn { border-radius: 10cqmin; color: #fff; }
.pv[data-style="bento"] .sc.on .a { animation: be-in .6s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(var(--i) * 110ms); }
@keyframes be-in { from { opacity: 0; transform: scale(.7) translateY(6cqmin); } to { opacity: 1; transform: none; } }

/* Short hooks and stats stay huge even where a style shrinks card text. */
.pv[data-style="kinetic"] .sc-hook .k-big.xl, .pv[data-style="swiss"] .sc-hook .k-big.xl { font-size: 32cqmin; }
.pv[data-style="editorial"] .sc-hook .k-big.xl, .pv[data-style="scrapbook"] .sc-hook .k-big.xl { font-size: 30cqmin; }
.pv[data-style="terminal"] .sc-hook .k-big.xl { font-size: 22cqmin; }
.pv[data-style="editorial"] .stat b { font: italic 400 17cqmin/1 'Instrument Serif'; color: var(--accent); }
.pv[data-style="scrapbook"] .stat b { font: 700 15cqmin/1 Caveat; color: var(--accent); }

/* ── Landscape 16:9 ──────────────────────────────
   Same scenes, laid out for a wide frame: photo beside the words, cards and
   numbers side by side, screenshots in a row. */
.pv.wide { aspect-ratio: 16 / 9; }
.pv.wide .sc { padding: 11cqmin 9cqw 11cqmin; }
.pv.wide .pv-bar { left: 4cqw; right: 4cqw; top: 4cqmin; }
.pv.wide .sc-hook, .pv.wide .sc-quote, .pv.wide .sc-cta { max-width: 80%; }
.pv.wide .sc-hook .k-big.xl { font-size: 34cqmin; }
.pv.wide .sc-reveal { display: grid; grid-template-columns: auto 1fr; grid-auto-rows: min-content; column-gap: 6cqw; row-gap: 2.6cqmin; align-content: center; align-items: center; }
.pv.wide .sc-reveal .r-img { grid-row: 1 / span 4; width: 46cqmin; align-self: center; }
.pv.wide .sc-reveal .r-tag, .pv.wide .sc-reveal .r-name, .pv.wide .sc-reveal .r-sub { grid-column: 2; }
.pv.wide .sc-reveal .r-name { font-size: 15cqmin; }
.pv.wide .sc-list { display: grid; grid-template-columns: none; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-content: center; gap: 3cqmin 2.4cqw; }
.pv.wide .sc-list .l-title { grid-row: 1; margin-bottom: 2cqmin; white-space: nowrap; }
.pv.wide .sc-list .card { grid-row: 2; }
.pv.wide .sc-list .card { justify-content: flex-start; min-height: 30cqmin; }
.pv.wide .sc-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-content: center; gap: 3cqw; }
.pv.wide .stat { min-height: 40cqmin; justify-content: center; }
.pv.wide .stat b { font-size: 20cqmin; }
.pv.wide .sc-gallery { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 3cqmin 2.4cqw; }
.pv.wide .sc-gallery .shot, .pv.wide .sc-gallery.n1 .shot, .pv.wide .sc-gallery.n3 .shot:first-of-type { grid-column: auto; grid-row: 2; aspect-ratio: 4 / 3; align-self: center; }
.pv.wide .sc-gallery .l-title { grid-row: 1; grid-column: 1 / -1; }
.pv.wide .sc-gallery.n1 .shot { max-width: 70%; }
.pv.wide .sc-chips .chips { max-width: 80%; }
/* style-specific grids and offsets that assume a tall frame */
.pv.wide[data-style="bento"] .sc-list, .pv.wide[data-style="bento"] .sc-stats { grid-template-columns: none; grid-auto-flow: column; }
.pv.wide[data-style="bento"] .sc-list .card:nth-of-type(2), .pv.wide[data-style="bento"] .sc-stats .card:first-child { grid-column: auto; }
.pv.wide[data-style="terminal"] .sc { padding-top: 16cqmin; }
.pv.wide[data-style="terminal"] .sc::before { top: 7cqmin; left: 9cqw; }
.pv.wide[data-style="editorial"] .sc::before { top: 6cqmin; left: 9cqw; right: 9cqw; }
.pv.wide[data-style="swiss"] .sc::before { top: 7cqmin; }
.pv.wide[data-style="kinetic"] .card { min-height: 0; }
.pv.wide[data-style="brutal"] .sc-reveal::after { right: 8cqw; top: 12cqmin; }
.pv.wide .cursor { left: 30cqw; top: 70%; }
.pv.wide[data-style="kinetic"] .card b { font-size: 6cqmin; overflow-wrap: anywhere; }
.pv.wide[data-style="kinetic"] .sc-list .l-title { font-size: 9cqmin; }