/* The Video page: a room of screens. His words at the top, then the hall: two walls of screens running away from the
   viewer to the big screen on the back wall, every screen a flat panel in the rack's own rendered frame, tuned to one
   of his pictures and glitching in its own time; a glossy black floor gives the whole room back. The piece in hand is
   on the big screen, its own screens drop to snow, and its colours wash the back wall. The credits stand under the
   hall with a thin line for the place; the bar's transport drives the big screen. The walls are flat sheets laid out
   here in their own space and placed in perspective by the script; the floor's mirror is the browser's own
   reflection of each wall, so it carries the glitches and the playing picture. Sizes come from --u as on the rack. */

.pg {
  --u: calc(min(100cqw, 1400px) * 1.75 / 19);
  --fs-body: clamp(13px, calc(var(--u) * 0.118), 16px); --fs-label: clamp(7.5px, calc(var(--u) * 0.068), 9.5px); --fs-name: clamp(8.5px, calc(var(--u) * 0.08), 11px);
  --cap-w: max(64px, calc(var(--u) * 0.5)); --cap-h: calc(var(--cap-w) * 0.6); --fs-cap: max(8.5px, calc(var(--cap-w) * 0.14)); --bz: clamp(3px, calc(var(--u) * 0.035), 5px);
  --ink: #e4e0d7; --ink-dim: #9a9da5; --ink-line: rgba(228, 224, 215, 0.2); --engrave: 0 1px 0 rgba(0, 0, 0, 0.8); --silk: var(--stamp-font); --punch: var(--punch-font); --plate-solid: #0e0f12;
  --accent: var(--amber); --led-on: url(../assets/img/parts/led-amber-on.png); --led-off: url(../assets/img/parts/led-amber-off.png);
  --btn-wide: url(../assets/img/parts/btn-wide-dark.png); --btn-ink: #e3dfd6; --link: var(--amber);
  position: relative; max-width: 1400px; margin: 0 auto; padding: 0 0 56px; color: var(--ink);
}
@media (max-width: 999px) { .pg { --u: clamp(84px, 10.5cqw, 100px); --fs-label: 9px; } }

/* the big screen's light on the room: two colours read from the picture in hand */
@property --c1 { syntax: "<color>"; inherits: true; initial-value: #6a7a90; }
@property --c2 { syntax: "<color>"; inherits: true; initial-value: #3a4a60; }
body { --c1: #6a7a90; --c2: #3a4a60; transition: --c1 0.9s, --c2 0.9s; background: #000; } /* black for now; a two-colour wash as on the Audiobooks page is wanted here too, running behind the room rather than stopping at its edge */

/* the bar is glass here, as on the Music page: no plate, no edge, so the room runs under the mark and the menu; once the
   page has scrolled under it, a blur keeps the mark and the caps clear of what passes beneath */
.sitebar { background: transparent; border-bottom-color: transparent; box-shadow: none; transition: background-color 0.3s; }
body.scrolled .sitebar { background: rgba(10, 11, 13, 0.42); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }

/* the bar's transport: always on this page, centred on one line with the mark; a phone keeps it level with the mark */
.sitebar .clipbar { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; width: max-content; flex-wrap: nowrap; align-items: center; margin: 0; gap: 6px; z-index: 4; }
.sitebar .clipbar .tbtn { flex: none; width: var(--cap-w); height: var(--cap-h); aspect-ratio: auto; padding: 0; max-width: none; display: inline-grid; place-items: center; }
.sitebar .clipbar .tbtn .ico { width: max(9px, calc(var(--cap-w) * 0.2)); height: max(9px, calc(var(--cap-w) * 0.2)); }
.sitebar .clipbar .tbtn.on { box-shadow: 0 0 0 1px var(--accent), 0 0 10px var(--accent); }
.sitebar .clipbar .i-pause { display: none; }
.sitebar .clipbar .pause .i-play, .big.pause .i-play { display: none; }
.sitebar .clipbar .pause .i-pause, .big.pause .i-pause { display: block; }
body:has(#menu:checked) .sitebar .clipbar { visibility: hidden; }
@media (max-width: 699px) { .sitebar .clipbar { --cap-w: 50px; --cap-h: 30px; left: calc(50% + var(--mark-w, 70px) / 2); gap: 6px; } } /* three caps have the room for a fingertip's size beside the mark */
@media (max-width: 359px) { .sitebar .clipbar { position: static; translate: none; order: 2; flex: 1 1 100%; width: auto; justify-content: center; margin: 8px 0 0; gap: 4px; } }

/* ---------- the words ---------- */
.room { scroll-margin-top: calc(var(--bar-h, 64px) + 12px); padding: calc(var(--u) * 0.3) 0 0; }
.words { padding: 0 calc(var(--u) * 0.3); }
.title { margin: 0; font-family: var(--punch); font-weight: 800; font-size: clamp(56px, min(calc(var(--u) * 1.05), 11vw), 136px); line-height: 0.9; text-transform: uppercase; color: var(--ink); text-shadow: var(--engrave); text-wrap: balance; text-box: trim-start cap alphabetic; }
.silkline { margin: 16px 0 0; font-family: var(--silk); font-size: max(9px, var(--fs-label)); letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.9; color: var(--ink-dim); text-shadow: var(--engrave); }
.lede { max-width: 58ch; margin: 18px 0 0; font-size: clamp(15px, calc(var(--u) * 0.135), 18px); line-height: 1.55; color: #c9ccd2; }

/* ---------- the hall: a window on the room. Everything in it is placed by the script; the sheet lays each wall out
   flat in its own space, the script sets its size and its place in perspective ---------- */
.hall { position: relative; aspect-ratio: 1.8 / 1; margin-top: calc(var(--u) * 0.5); overflow: hidden; background: #000; isolation: isolate; }
.stage { position: absolute; inset: 0; }
.wall { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: #0b0c0f; }
@media (min-width: 1000px) { .wall.side { -webkit-box-reflect: below 0 linear-gradient(transparent 44%, rgba(0, 0, 0, 0.03) 54%, rgba(0, 0, 0, 0.14) 72%, rgba(0, 0, 0, 0.4)); } } /* the floor's mirror: each side wall reflected about its own foot, which lies on the floor, so the mirror lands where a glossy floor would show it, a reflection and not a mirror: two fifths at the foot, gone before the window's edge. Not the back wall: Safari cannot reflect the player on it (another process), and showed a black slab; its picture gets a placed copy instead, below. The mask is drawn on the wall the right way up and flipped with it, so its foot end is written last: opaque at the bottom, clear from 44% up. Only at room widths: Chrome takes no "none" for this property, so a flat page must never have been given a mirror */
.wall.side { background: #050608; }
.wall.back { background: #050608; }

/* a side wall: a video wall, three screens across and five down, edge to edge, filling the wall. The right wall's screens are in the same space run the other way, so a near screen is big on both */
.wall.side .grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 2px; }
.set { position: relative; display: block; min-width: 0; min-height: 0; color: inherit; text-decoration: none; outline: none; }
.set.big { aspect-ratio: 16 / 9; }
/* the panel: the rendered frame round a black glass, the sheen on the glass over everything */
.set .panel { position: absolute; inset: 0; border: var(--bz) solid transparent; border-image: url(../assets/img/parts/panel.png) 32 fill / var(--bz); border-radius: 2px; background: #000; }
.set .face { position: absolute; inset: 0; overflow: hidden; border-radius: 1px; background: #000; }
.set .face::after { content: ""; position: absolute; inset: 0; z-index: 3; background: url(../assets/img/parts/panel-glass.png) center / 100% 100% no-repeat; pointer-events: none; }
.set .beam { position: absolute; inset: 0; }
.set .ch { clip-path: none; }
/* no halo round a screen: the only light in the room is what the screens throw on the floor, the mirror below. The
   script still reads each picture's colour into --glow for a browser without the mirror */
.set { --glow: #4a5668; }
.set.snow { --glow: #d4d8de; }
.set.feed { --glow: #8a9099; }
/* the picture on a screen */
/* the picture on a screen. A film wider than the screen comes with black bars baked into its picture: that piece says
   so (--bar) and its picture runs past the glass top and bottom by that much, the bars cut off by the glass */
.set .pic { position: absolute; inset: calc(var(--bar, 0%) * -1) 0; width: 100%; height: calc(100% + 2 * var(--bar, 0%)); object-fit: cover; filter: saturate(1.1) contrast(1.05); transition: opacity 0.3s; }
.set.big .pic { filter: none; }
.set .ch.static { display: none; }
.set.feed .ch.static { display: block; } /* a feed screen on snow is always on snow */
.set.snow .pic, .set.snow .gl, .set.snow .roll, .set.snow .burst { display: none; }
.set.snow .ch.static { display: block; }
.set.snow .osd { display: none; } /* the snow carries its own print */
.set .static b { left: 7%; bottom: 10%; font-size: calc(12px * var(--mag, 1)); }
/* the on-screen print: the channel at the top, the name at the foot, green phosphor over the picture. Each screen is
   printed at its own magnification (the script sets --mag from the screen's distance), so the print reads the same
   size all along the wall; the name only where the screen is wide enough on screen for it. The big screen's names
   the piece, and goes once it plays */
.set .osd { position: absolute; left: 7%; top: 9%; z-index: 4; max-width: 86%; overflow: hidden; white-space: nowrap; font-family: var(--lcd-font); font-size: calc(12px * var(--mag, 1)); line-height: 1; color: var(--phosphor); text-shadow: 0 0 6px rgba(124, 255, 154, 0.8); pointer-events: none; transition: opacity 0.4s; }
.set .osd.lo { top: auto; bottom: 10%; font-size: calc(9.5px * var(--mag, 1)); letter-spacing: 0.04em; }
.set.far .osd.lo { display: none; }
.set.big .osd { font-size: clamp(14px, calc(var(--u) * 0.2), 24px); }
.set.big.playing .osd { opacity: 0; }
/* the glitches: every small screen misbehaves in its own time. A torn copy of the picture jumps in bands, a copy with
   its colours shifted splits off for a frame or two, a dark hold bar rolls down, snow bursts through, and the picture
   itself flickers; the delays and the periods are the screen's own, so no two glitch together */
.set .gl, .set .roll, .set .burst { display: block; position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.set .gl { inset: calc(var(--bar, 0%) * -1) 0; background: var(--pic) center / cover no-repeat; will-change: transform, clip-path; }
.set .gl.x { animation: tear var(--gd, 12s) steps(1, end) var(--gl, 0s) infinite; }
.set .gl.y { mix-blend-mode: screen; animation: fringe var(--bd, 17s) steps(1, end) var(--bl, 0s) infinite; }
.set .roll { background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.42) 38%, rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0.42) 62%, transparent); height: 34%; inset: auto 0 auto 0; top: -40%; animation: roll var(--rd, 15s) linear var(--rl, 0s) infinite; }
.set .burst { z-index: 2; animation: snow 0.14s steps(3) infinite, burst var(--bd, 17s) steps(1, end) var(--bl, 0s) infinite; }
.set:not(.big):not(.snow) .pic { animation: flick var(--fd, 10s) steps(1, end) var(--fl, 0s) infinite; }
@keyframes tear { 0%, 84% { opacity: 0; } 85% { opacity: 1; clip-path: inset(28% 0 58% 0); transform: translateX(9px); } 87% { clip-path: inset(60% 0 22% 0); transform: translateX(-11px); } 89% { clip-path: inset(10% 0 74% 0); transform: translateX(6px) scaleX(1.03); } 90%, 100% { opacity: 0; } }
@keyframes fringe { 0%, 61% { opacity: 0; } 62% { opacity: 0.75; transform: translateX(-4px); filter: hue-rotate(100deg) saturate(2.2); } 64% { transform: translateX(4px); filter: hue-rotate(-100deg) saturate(2.2); } 66%, 100% { opacity: 0; } }
@keyframes roll { 0% { transform: translateY(0); opacity: 0; } 4% { opacity: 0.7; } 30% { transform: translateY(420%); opacity: 0.7; } 31%, 100% { transform: translateY(0); opacity: 0; } }
@keyframes burst { 0%, 92% { opacity: 0; } 93% { opacity: 0.9; } 94% { opacity: 0; } 95% { opacity: 0.6; } 96%, 100% { opacity: 0; } }
@keyframes flick { 0%, 95% { filter: saturate(1.1) contrast(1.05); } 96% { filter: brightness(1.5) contrast(1.2) saturate(1.1); } 97% { filter: brightness(0.55) saturate(1.1); } 98%, 100% { filter: saturate(1.1) contrast(1.05); } }
@media (prefers-reduced-motion: reduce) { .set .gl, .set .roll, .set .burst, .set:not(.big):not(.snow) .pic { animation: none; } }
/* a small screen lifts under the pointer; the ones in hand are marked */
a.set .panel { transition: box-shadow 0.3s; }
a.set:hover .panel, a.set:focus-visible .panel { box-shadow: inset 0 0 0 2px var(--accent); }
a.set.cur .panel { box-shadow: inset 0 0 0 2px var(--amber); }

/* the big screen's mirror on the floor: its picture in its frame, flipped on the spot, faded like the side walls'
   reflections; the script puts it at the back wall's foot and keeps its picture the big screen's */
.mirror { position: absolute; z-index: 1; transform: scaleY(-1); pointer-events: none; --bz: 0px; -webkit-mask-image: linear-gradient(transparent 44%, rgba(0, 0, 0, 0.03) 54%, rgba(0, 0, 0, 0.14) 72%, rgba(0, 0, 0, 0.4)); mask-image: linear-gradient(transparent 44%, rgba(0, 0, 0, 0.03) 54%, rgba(0, 0, 0, 0.14) 72%, rgba(0, 0, 0, 0.4)); }
/* ---------- the back wall: the big screen on it, its top in line with the side walls' top edges and its foot on the
   floor, a narrow band of wall at each side, twice the seam between the small monitors (the script sizes the room
   to it) ---------- */
.set.big { position: absolute; left: 1.5%; top: 0; width: 97%; --bz: 0px; } /* no frame at all: the picture is the wall, and at its foot even a thin frame met its own reflection as a black step */
.set.big .face::after, .mirror .face::after { display: none; } /* and no sheen, whose darker edge doubled at the foot the same way */
/* the big screen's player: a YouTube frame or the clip's own video */
.set.big .ch-tube { z-index: 1; }
.set.big .ch-tube iframe, .set.big .ch-tube video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.set.big .ch-tube video[hidden] { display: none; }
.set.big .play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 4; width: clamp(56px, calc(var(--u) * 0.6), 84px); height: clamp(56px, calc(var(--u) * 0.6), 84px); margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(10, 11, 13, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 10px 30px rgba(0, 0, 0, 0.5); transition: transform 0.25s, opacity 0.3s; }
.set.big .play .ico { width: 40%; height: 40%; margin-left: 4%; }
.set.big .play .i-pause { display: none; margin-left: 0; }
.set.big .play.pause .i-play { display: none; } .set.big .play.pause .i-pause { display: block; }
.set.big .play:hover, .set.big .play:focus-visible { transform: scale(1.06); outline: none; box-shadow: 0 0 0 2px var(--accent), 0 10px 30px rgba(0, 0, 0, 0.5); }
.set.big.playing .play { opacity: 0; }
.set.big.playing:hover .play, .set.big.playing .play:focus-visible { opacity: 1; }

/* ---------- the mains: the rocker at the bar's right end, as on the rack. Off, every screen flickers out and goes
   dark, the light on the walls and the floor goes out, the glitches stop and the player comes down; on again, the
   screens come up ---------- */
.sitebar .rocker.mains { margin-left: auto; cursor: pointer; }
body.dead .rocker.mains { background-image: url(../assets/img/parts/rocker-off.png); }
body.dead .set .beam { animation: panel-off 0.5s steps(1, end) forwards; }
body.dead a.set.cur .panel, body.dead a.set:focus-visible .panel { box-shadow: none; }
body.dead .set .gl, body.dead .set .roll, body.dead .set .burst, body.dead .set .pic, body.dead .set .ch.static { animation: none; }
body.dead .set .play, body.dead .set .osd { visibility: hidden; }
body.dead .caption { opacity: 0; visibility: hidden; pointer-events: none; } /* the power off takes the credits with it */
body.dead .sitebar .clipbar { opacity: 0.35; pointer-events: none; }
/* a big screen with the power off is still a screen: dark glass with the room's sheen on it, a shade off the wall; its mirror too */
body.dead .set.big .face, body.dead .mirror .face { background: #0b0c0f; }
body.dead .set.big .face::after, body.dead .mirror .face::after { display: block; }
.caption { transition: opacity 0.4s, visibility 0.4s; }
.sitebar .clipbar { transition: opacity 0.4s; } /* no visibility transition here: the menu must cover the transport at once, as on every page */
body.alive .set .beam { animation: panel-on 0.7s steps(1, end) both; }
@keyframes panel-off { 0% { opacity: 1; } 18% { opacity: 0.3; } 26% { opacity: 1; filter: brightness(1.7); } 40%, 100% { opacity: 0; } }
@keyframes panel-on { 0%, 9% { opacity: 0; } 10%, 15% { opacity: 1; filter: brightness(1.8); } 16%, 27% { opacity: 0; } 28%, 100% { opacity: 1; filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) { body.dead .set .beam { animation: none; opacity: 0; } body.alive .set .beam { animation: none; } }

/* ---------- the credits: on the floor under the big screen, over its reflection, changing with the piece. The scene
   is the hall's height; the credits hang in it from just under the back wall's foot and may run on past the hall's
   edge, where the room has black to spare ---------- */
.scene { position: relative; }
.room { padding-bottom: calc(var(--u) * 0.8); }
/* under the words, a breath of darkened, blurred floor, its edges fading out, so they read over the reflection */
.caption::before { content: ""; position: absolute; inset: -14px 0; z-index: -1; background: rgba(0, 0, 0, 0.42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 10px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-composite: intersect; pointer-events: none; }
.caption { position: absolute; left: 50%; top: 63%; translate: -50% 0; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, calc(var(--u) * 1.6)); gap: 12px calc(var(--u) * 0.25); align-items: end; align-content: start; box-sizing: border-box; width: 45%; margin: 0; padding: 0 calc(var(--u) * 0.32); } /* exactly the back wall's width, so the credits lie over the big screen's reflection and no other, the words standing clear of the side walls' */
.about { min-width: 0; }
.about > p { margin: 0; }
.kicker { font-family: var(--silk); font-size: max(9px, var(--fs-label)); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-dim); text-shadow: var(--engrave); }
.name { margin-top: 8px !important; font-family: var(--punch); font-weight: 800; font-size: clamp(28px, calc(var(--u) * 0.36), 46px); line-height: 0.92; text-transform: uppercase; color: var(--ink); text-shadow: var(--engrave); text-wrap: balance; }
.scrawl { margin-top: 10px !important; font-family: var(--marker-font); font-size: clamp(18px, calc(var(--u) * 0.18), 22px); line-height: 1.2; color: var(--amber); transform: rotate(-1.5deg); transform-origin: 0 100%; width: max-content; max-width: 100%; }
.awards { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.award { display: inline-flex; align-items: center; gap: 6px; max-width: 40ch; font-family: var(--silk); font-size: max(9px, var(--fs-label)); letter-spacing: 0.14em; text-indent: 0.14em; text-transform: uppercase; line-height: 1.3; color: var(--ink-dim); text-shadow: var(--engrave); }
.award::before, .award::after { content: ""; flex: none; width: 15px; height: 24px; background: url(../assets/img/laurel.svg) center / contain no-repeat; }
.award::after { transform: scaleX(-1); }
.awards:empty, .scrawl:empty, .blurb:empty { display: none; }
.blurb { max-width: 52ch; margin-top: 12px !important; font-size: clamp(14px, calc(var(--u) * 0.125), 16px); line-height: 1.5; color: #c9ccd2; }
.side { display: grid; gap: 14px; }
.caps { display: flex; flex-wrap: wrap; gap: 10px; }
.caps .tbtn { width: auto; min-width: var(--cap-w); height: max(40px, var(--cap-h)); padding: 0 1.4em; text-decoration: none; }
.caps .go { color: var(--amber); }
.caps [hidden] { display: none; }
.caps .tbtn.on { box-shadow: 0 0 0 1px var(--accent), 0 0 10px var(--accent); }
.line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.lcdish { font-family: var(--lcd-font); font-size: clamp(17px, calc(var(--u) * 0.16), 21px); line-height: 1; color: var(--amber); text-shadow: 0 0 8px rgba(255, 176, 0, 0.35); }
.rail { position: relative; height: 18px; cursor: pointer; touch-action: none; outline: none; }
.rail::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--ink-line); }
.rail .done { position: absolute; left: 0; top: 7px; height: 4px; width: calc(var(--p, 0) * 100%); background: var(--amber); box-shadow: 0 0 8px rgba(255, 176, 0, 0.5); transition: width 0.2s linear; }
.rail .done::after { content: ""; position: absolute; right: -6px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px rgba(255, 176, 0, 0.7); opacity: 0; transition: opacity 0.2s; }
.rail:hover .done::after, .rail:focus-visible .done::after, .rail.held .done::after { opacity: 1; }
.rail.held .done { transition: none; }
.rail:focus-visible::before { box-shadow: 0 0 0 2px var(--accent); }
body.noseek .rail { opacity: 0.4; pointer-events: none; }

/* ---------- a phone or a tablet: no room (its screens would be too small to read), the big screen first at full
   width, its credits right under it, then the left wall's screens three across (the right wall shows the same
   pictures and the feeds are left out); the script places nothing ---------- */
@media (max-width: 999px) {
  .room { display: flex; flex-direction: column; padding-top: 24px; }
  .words { order: 0; padding: 0 20px; text-align: center; }
  .lede { margin-inline: auto; }
  .scene, .hall, .stage { display: contents; }
  .room { padding-bottom: 0; }
  .hall::before { display: none; }
  .wall { position: static; transform: none; background: none; }
  .wall.back { order: 1; margin: 30px 20px 0; }
  .caption::before { display: none; }
  .caption { position: static; translate: none; order: 2; width: auto; max-width: none; max-height: 800px; overflow: hidden; margin: 0; padding: 18px 20px 10px; grid-template-columns: minmax(0, 1fr); text-align: left; transition: opacity 0.4s, visibility 0.4s, max-height 0.6s, padding 0.6s; }
  body.dead .caption { max-height: 0; padding-top: 0; padding-bottom: 0; } /* the power off takes the credits' room with them, so the monitors close up to the big screen; the power on gives it back */
  .wall.side.left { order: 3; margin: 14px 20px 0; }
  .wall.side.right, .mirror, .set.feed, .set.again { display: none; }
  .wall.side .grid { position: static; inset: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: 14px 10px; }
  .set { aspect-ratio: 16 / 9; }
  .set.big { position: relative; left: auto; top: auto; width: 100%; --bz: 10px; }
  .set .osd.lo { display: none; }
  .set .osd, .set .static b { font-size: 11px; }
}