/* video.css: the video overview (video.html), THE SCREENING ROOM, on top of hero.css (tokens, the header fly-in, the
   top bar, the player, the menu, the in-world video player). The same system as music.css, made for watching: the
   newest video big on the line (a screen centred on the spine, the big play control on the line where it comes out
   of the screen's bottom edge), then every video as a large poster rung, ARCHITECT left and GHOSTWRITER right
   (phones: every rung right of the edge spine), years on the line. Cards keep their SIDE's material whatever the
   world (LL: a paper poster pasted over paint; GW: a CRT lit by the cyan line); the chrome follows the world.
   Two curves only: punch (LL), breath (GW). --lx = the spine (CSS px, set by js/pages/video.js). */

html[data-page="video"] {
  --v-arm: 44px;
  --v-card-w: min(33rem, calc(50vw - 44px - 44px));    /* the spine sits near the middle on wide screens */
  --v-overlap: calc(var(--v-gap) + clamp(100px, calc(var(--v-card-w) * 0.34), 190px));   /* opposite rungs interlock (the zipper) */
  --v-gap: 4.4rem;
  --v-fw: min(1040px, 70vw);                              /* the feature's screen */
  --v-fx: clamp(var(--gutter), calc(var(--lx) * 1px - var(--v-fw) / 2), calc(100vw - var(--gutter) - var(--v-fw)));
  --v-bp: 92px;                                           /* the big play control on the line */
  --v-ll-ground: #ece7dc;
  --v-gw-ground: #06080a;
}

/* the ground before the canvas draws (and without WebGL): the inside of the head, paper or night */
html[data-page="video"], html[data-page="video"] body { background: var(--v-ll-ground); }
html[data-page="video"][data-world="gw"], html[data-page="video"][data-world="gw"] body { background: var(--v-gw-ground); }
html[data-page="video"] body { transition: background-color var(--d-mid) var(--breath); }
html[data-page="video"] .stage { opacity: 0; transition: opacity 320ms linear; }
html[data-page="video"][data-gl="1"] .stage { opacity: 1; }
.v-dom-line {
  position: fixed; top: 0; bottom: 0; z-index: 0; pointer-events: none;
  left: calc(var(--lx) * 1px - 1px); width: 2px;
  background: var(--line); box-shadow: var(--line-glow);
  transition: opacity 320ms linear, background-color var(--d-mid) linear;
}
html[data-world="ll"] .v-dom-line { width: 3px; left: calc(var(--lx) * 1px - 1.5px); }
html[data-gl="1"] .v-dom-line { opacity: 0; }

/* reduced motion (and no WebGL): hovering a video of the other side crossfades a hint of that world in from its edge */
.v-tint { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.v-tint i { position: absolute; top: 0; bottom: 0; width: 34vw; opacity: 0; transition: opacity 200ms linear; }
.v-tint-ll { left: 0; background: linear-gradient(90deg, rgba(240, 234, 222, 0.92), rgba(240, 234, 222, 0.5) 38%, rgba(240, 234, 222, 0)); }
.v-tint-gw { right: 0; background: linear-gradient(270deg, rgba(4, 7, 9, 0.9), rgba(4, 12, 16, 0.5) 38%, rgba(0, 229, 255, 0)); }
.v-tint-gw::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.05) 0 1px, transparent 1px 3px); }
html[data-tint="ll"] .v-tint-ll, html[data-tint="gw"] .v-tint-gw { opacity: 1; }

/* the top stays slim: content only fades around the canvas-drawn corner mark */
html[data-page="video"] .scroller {
  -webkit-mask-image: radial-gradient(circle at calc(var(--gutter) + 22px) calc(max(18px, env(safe-area-inset-top)) + 22px), transparent 27px, #000 42px);
  mask-image: radial-gradient(circle at calc(var(--gutter) + 22px) calc(max(18px, env(safe-area-inset-top)) + 22px), transparent 27px, #000 42px);
}
html[data-page="video"] .sound { border-radius: 22px; padding: 0.55rem 0.8rem 0.55rem 0.85rem; transition: color var(--d-hit) linear, background-color var(--d-short) linear, opacity 200ms linear; }
html[data-page="video"][data-scrolled="1"] .sound { background: var(--bar-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html[data-page="video"] .player { opacity: 1; transform: none; }
html[data-page="video"] .player .transport { padding-left: 0; }
.v-noscript { position: relative; z-index: 3; padding: 30vh 24px; font: 14px/1.6 var(--mono); }
.v-noscript a { text-decoration: underline; }

/* ================================================================ the page */
.v-page { padding: 17vh 0 0; }
.v-head { margin-bottom: 4.6vh; }
.v-title-xl { font-size: clamp(4.8rem, 12.5vw, 13.5rem); }
.v-head .ch-count { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- the filters: ALL sits ON the line, each side on its
   own side of it. Scrolled past, they dock in the top bar (the same places). */
.v-filters-slot { position: relative; height: 46px; z-index: 3; }
.v-filters { position: relative; height: 46px; }
.v-chip {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 34px; padding: 0 0.85rem;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap;
  color: var(--fg);
  transition: transform var(--d-short) var(--ease), background-color var(--d-hit) linear, color var(--d-hit) linear,
              box-shadow var(--d-short) var(--ease), border-color var(--d-hit) linear, opacity var(--d-hit) linear;
}
.v-chip--ll { right: calc(100% - var(--lx) * 1px + 54px); }
.v-chip--gw { left: calc(var(--lx) * 1px + 54px); }
.v-chip--all { left: calc(var(--lx) * 1px); translate: -50% -50%; width: 88px; justify-content: center; border-radius: 999px; padding: 0 0.6rem; z-index: 2; }
.v-chip small { font-size: 0.54rem; letter-spacing: 0.08em; color: var(--dim); font-variant-numeric: tabular-nums; transition: color var(--d-hit) linear; }
.v-chip b { position: relative; z-index: 0; font-weight: 700; letter-spacing: 0.2em; }
.v-chip:focus-visible { outline-offset: 3px; }
.v-chip--all:focus-visible { border-radius: 999px; }
.v-chip[aria-pressed="true"] { z-index: 3; }
/* LL world: paper chips with an ink keyline; the pressed one is inked with a paint shadow and slams */
html[data-world="ll"] .v-chip { background: #fbfaf5 var(--grain); background-size: auto, 160px 160px; border: 1.5px solid var(--ll-ink); }
html[data-world="ll"] .v-chip:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--p-yellow); }
html[data-world="ll"] .v-chip[aria-pressed="true"] { background: var(--ll-ink); color: #f6f3ec; box-shadow: 3px 3px 0 var(--p-magenta); transform: translate(-1px, -1px) rotate(-1deg); }
html[data-world="ll"] .v-chip[aria-pressed="true"] small { color: #c9c3b6; }
html[data-world="ll"] .v-chip--all[aria-pressed="true"] { transform: none; box-shadow: 0 0 0 3px var(--v-ll-ground), 0 0 0 5px var(--ll-ink); }
/* GW world: dark glass lit by the line; the pressed one glows */
html[data-world="gw"] .v-chip { background: rgba(4, 7, 9, 0.84); border: 1px solid rgba(0, 229, 255, 0.28); letter-spacing: 0.26em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* heat: docked, the chips sit on the band, which blurs the world already; their own blur (of the band) shows nothing */
html[data-world="gw"][data-dock="1"] .v-chip { -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-world="gw"] .v-chip:hover { border-color: rgba(0, 229, 255, 0.7); box-shadow: 0 0 14px rgba(0, 229, 255, 0.22); }
html[data-world="gw"] .v-chip[aria-pressed="true"] { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 16px rgba(0, 229, 255, 0.4), inset 0 0 10px rgba(0, 229, 255, 0.14); text-shadow: 0 0 8px rgba(0, 229, 255, 0.7); }
/* the side chips speak their own side whatever the world: LL a paint swash, GW a cyan light */
.v-chip--ll b { color: var(--ll-ink); padding: 0.16rem 0.36rem 0.12rem 0.44rem; }
.v-chip--ll b::before {
  content: ''; position: absolute; inset: -1px -3px; z-index: -1; background: var(--p-orange);
  clip-path: polygon(3% 12%, 30% 0, 62% 8%, 100% 2%, 96% 60%, 100% 96%, 58% 100%, 22% 92%, 0 100%, 4% 50%); transform: skewX(-12deg);
}
.v-chip--gw b { color: var(--cyan); text-shadow: 0 0 8px rgba(0, 229, 255, 0.75); }
html[data-world="ll"] .v-chip--gw b { color: #007c8c; text-shadow: none; }
html[data-world="ll"] .v-chip--gw[aria-pressed="true"] b { color: var(--cyan); text-shadow: 0 0 8px rgba(0, 229, 255, 0.75); }

/* docked: the same control rides in the top bar, still on the line */
html[data-dock="1"] .v-filters {
  position: fixed; left: 0; right: 0; top: max(18px, env(safe-area-inset-top)); height: 44px; z-index: 6;
  animation: vDockIn var(--ease-d) var(--ease) both;
}
@keyframes vDockIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
html[data-world="gw"][data-dock="1"] .v-chip { background: #05080a; }
html[data-dock="1"] .v-hint { opacity: 0 !important; transition: opacity 160ms linear; }
/* docked, the chips ride on a strip of their world so the cards never show through them (owner 2026-09-26): LL a torn
   paper strip with an ink shadow, GW a band of dark glass with a cyan hairline. js/pages/video.js measures the chips
   (--band-l/-t/-w/-h, in the filters' own box); ::before is the shadow or the hairline, ::after the strip. */
html[data-dock="1"] .v-filters::before, html[data-dock="1"] .v-filters::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: calc(var(--band-l, 0px) - var(--band-px, 14px)); width: calc(var(--band-w, 100%) + 2 * var(--band-px, 14px));
  top: calc(var(--band-t, 0px) - var(--band-py, 7px)); height: calc(var(--band-h, 100%) + 2 * var(--band-py, 7px));
}
html[data-world="ll"][data-dock="1"] .v-filters::after {
  background: #fbfaf5 var(--grain); background-size: auto, 160px 160px;
  clip-path: polygon(0 9%, 7% 0, 19% 6%, 33% 1%, 48% 7%, 62% 0, 77% 5%, 90% 0, 100% 8%, 99% 52%, 100% 93%, 86% 100%, 71% 94%, 55% 100%, 40% 95%, 26% 100%, 11% 94%, 0 100%, 1% 48%);
  rotate: -0.35deg;
}
html[data-world="ll"][data-dock="1"] .v-filters::before {
  background: var(--ll-ink); translate: 4px 4px; rotate: -0.35deg;
  clip-path: polygon(0 9%, 7% 0, 19% 6%, 33% 1%, 48% 7%, 62% 0, 77% 5%, 90% 0, 100% 8%, 99% 52%, 100% 93%, 86% 100%, 71% 94%, 55% 100%, 40% 95%, 26% 100%, 11% 94%, 0 100%, 1% 48%);
}
html[data-world="gw"][data-dock="1"] .v-filters::after {
  border-radius: 6px; border: 1px solid rgba(0, 229, 255, 0.22);
  background: repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.035) 0 1px, transparent 1px 3px), rgba(3, 6, 8, 0.82);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 22px rgba(0, 229, 255, 0.1), inset 0 1px 0 rgba(0, 229, 255, 0.12);
}
html[data-world="gw"][data-dock="1"] .v-filters::before {
  z-index: 1; top: auto; height: 1px; bottom: calc(100% - var(--band-t, 0px) - var(--band-h, 100%) - var(--band-py, 7px));
  left: calc(var(--band-l, 0px) - var(--band-px, 14px) + 10px); width: calc(var(--band-w, 100%) + 2 * var(--band-px, 14px) - 20px);
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.85) 30%, rgba(0, 229, 255, 0.85) 70%, transparent);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
}

.v-hint {
  display: grid; grid-template-columns: calc(var(--lx) * 1px) minmax(0, 1fr); margin: 1.1rem 0 0;
  font-size: 0.56rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim);
}
.v-hint span:first-child { justify-self: end; margin-right: 22px; }
.v-hint span:last-child { margin-left: 22px; }

/* ================================================================ the feature: the newest video, a screen on the line */
.v-feature { position: relative; margin: calc(5vh + 90px) 0 0; }
.v-feature:not(.is-in) > * { opacity: 0; }
.v-feature.is-swapping > :not(.v-ghost) { opacity: 0; }
.v-ghost { position: absolute; left: 0; right: 0; top: 0; z-index: 4; pointer-events: none; }
.v-fk {
  display: grid; grid-template-columns: calc(var(--lx) * 1px) minmax(0, 1fr); margin-bottom: 1.5rem;
  font-size: 0.62rem; letter-spacing: 0.32em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.v-fk-l { justify-self: end; margin-right: 28px; color: var(--accent); font-weight: 600; }
.v-fk-r { margin-left: 28px; color: var(--dim); }

.v-stage { position: relative; width: var(--v-fw); margin-left: var(--v-fx); isolation: isolate; }
.v-screen { position: relative; z-index: 1; cursor: pointer; }
.v-screen-in { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.v-screen-in img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--d-long) var(--ease), filter var(--d-long) var(--breath); }
.v-scan { position: absolute; inset: 0; pointer-events: none; }
/* LL: a paper poster, pasted up over a paint strike, taped at the top corners; it hangs a hair off true */
.v-stage[data-side="ll"] .v-screen {
  padding: clamp(10px, 1.3vw, 18px);
  background: var(--ll-card) var(--grain); background-size: auto, 160px 160px;
  border: 2px solid var(--ll-ink); box-shadow: 14px 14px 0 var(--paint, var(--p-magenta));
  rotate: -0.7deg;
  transition: rotate var(--d-short) var(--punch), box-shadow var(--d-short) var(--punch), translate var(--d-short) var(--punch);
}
.v-stage[data-side="ll"] .v-screen-in { outline: 2px solid var(--ll-ink); }
.v-stage[data-side="ll"] .v-scan { background: linear-gradient(115deg, rgba(255, 255, 255, 0.12), transparent 30%), radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(40, 30, 10, 0.18)); }
.v-stage[data-side="ll"]:hover .v-screen { rotate: 0deg; translate: -3px -3px; box-shadow: 18px 18px 0 var(--paint, var(--p-magenta)); }
.v-stage[data-side="ll"]:hover .v-screen-in img { transform: scale(1.025); }
.v-tape {
  position: absolute; z-index: 2; top: -14px; width: clamp(70px, 9vw, 118px); height: 28px; pointer-events: none;
  background: linear-gradient(180deg, rgba(250, 245, 228, 0.86), rgba(236, 228, 204, 0.8));
  box-shadow: 0 1px 2px rgba(11, 11, 12, 0.18);
  clip-path: polygon(0 8%, 6% 0, 12% 10%, 18% 0, 24% 8%, 100% 0, 94% 50%, 100% 100%, 88% 92%, 80% 100%, 0 100%, 5% 55%);
}
.v-tape--a { left: -26px; rotate: -34deg; }
.v-tape--b { right: -26px; rotate: 31deg; }
.v-paint { position: absolute; z-index: -1; left: -15%; width: 130%; top: 28%; height: 66%; pointer-events: none; }
.v-paint .ribbon { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
/* GW: a CRT in the dark room, lit by the line: a scanline bezel, a cyan glow on the floor */
.v-stage[data-side="gw"] .v-screen {
  padding: clamp(8px, 0.9vw, 14px); border-radius: 16px;
  background: linear-gradient(180deg, #0b1014, #030507);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.5), 0 0 0 7px rgba(3, 5, 7, 0.92), 0 0 0 8px rgba(0, 229, 255, 0.16),
              0 0 90px -14px rgba(0, 229, 255, 0.55), inset 0 0 26px rgba(0, 229, 255, 0.12);
  transition: box-shadow var(--d-long) var(--breath);
}
.v-stage[data-side="gw"] .v-screen-in { border-radius: 9px; }
.v-stage[data-side="gw"] .v-screen-in img { filter: contrast(1.06) saturate(0.88) brightness(0.86); }
.v-stage[data-side="gw"] .v-scan {
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px),
              radial-gradient(ellipse 80% 75% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.6)),
              linear-gradient(160deg, rgba(0, 229, 255, 0.12), transparent 45%);
}
.v-stage[data-side="gw"]:hover .v-screen { box-shadow: 0 0 0 1px var(--cyan), 0 0 0 7px rgba(3, 5, 7, 0.92), 0 0 0 8px rgba(0, 229, 255, 0.3), 0 0 120px -10px rgba(0, 229, 255, 0.75), inset 0 0 30px rgba(0, 229, 255, 0.2); }
.v-stage[data-side="gw"]:hover .v-screen-in img { filter: none; }
.v-spill { display: none; }
.v-stage[data-side="gw"] .v-spill {
  display: block; position: absolute; z-index: -1; left: 6%; right: 6%; top: 88%; height: 44%; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 30%, rgba(0, 229, 255, 0.28), rgba(0, 229, 255, 0.06) 55%, transparent 72%);
  filter: blur(6px);
}

/* the RGB split: two tinted copies of the picture, only while a GW picture glitches on (hover) */
.v-rgb { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(rgba(0, 229, 255, 1), rgba(0, 229, 255, 1)), var(--src) center / cover no-repeat; background-blend-mode: multiply; }
.v-rgb::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(rgba(255, 46, 126, 1), rgba(255, 46, 126, 1)), var(--src) center / cover no-repeat; background-blend-mode: multiply; }
@keyframes vGlitch {
  0% { opacity: 0.9; translate: -9px 0; clip-path: inset(8% 0 70% 0); }
  14% { opacity: 0.8; translate: 7px 0; clip-path: inset(52% 0 22% 0); }
  28% { opacity: 0.85; translate: -5px 0; clip-path: inset(26% 0 50% 0); }
  42% { opacity: 0.6; translate: 4px 0; clip-path: inset(74% 0 6% 0); }
  57% { opacity: 0.5; translate: -3px 0; clip-path: inset(0 0 0 0); }
  71% { opacity: 0.3; translate: 2px 0; clip-path: inset(0 0 0 0); }
  100% { opacity: 0; translate: 0 0; clip-path: inset(0 0 0 0); }
}
@keyframes vGlitchR { 0% { translate: 14px 0; } 30% { translate: -8px 0; } 60% { translate: 5px 0; } 100% { translate: 0 0; } }
.v-stage[data-side="gw"]:hover .v-rgb, .v-rung--gw .v-card:hover .v-rgb { animation: vGlitch 560ms steps(8, end) both; }
.v-stage[data-side="gw"]:hover .v-rgb::after, .v-rung--gw .v-card:hover .v-rgb::after { animation: vGlitchR 560ms steps(8, end) both; }

/* his cutouts: LL sits or kneels behind the poster's top edge, or lies on it; GW looms behind the screen */
.v-art { position: absolute; margin: 0; pointer-events: none; }
.v-art img { display: block; width: 100%; height: auto; }
.v-art--ll img {
  filter: drop-shadow(2.5px 0 0 #fbfaf4) drop-shadow(-2.5px 0 0 #fbfaf4) drop-shadow(0 -2.5px 0 #fbfaf4) drop-shadow(5px 4px 0 rgba(11, 11, 12, 0.85));
}
.v-art--sit { z-index: 0; left: 5%; bottom: calc(100% - 26px); width: clamp(84px, 11%, 142px); rotate: -2deg; }
.v-art--kneel { z-index: 0; left: 6%; bottom: calc(100% - 22px); width: clamp(72px, 9%, 116px); rotate: 1.5deg; }
.v-art--lie { z-index: 2; left: 4%; bottom: calc(100% - 16px); width: clamp(130px, 21%, 250px); rotate: -1deg; }
.v-art--gw { z-index: 0; right: 6%; bottom: calc(100% - 64px); width: clamp(150px, 25%, 290px); }
.v-art--gw img { filter: brightness(0.82) contrast(1.14) saturate(0.85) drop-shadow(0 0 1px rgba(0, 229, 255, 0.9)) drop-shadow(0 0 18px rgba(0, 229, 255, 0.35)); }
.v-art-scan { position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.32) 0 1px, transparent 1px 3px), linear-gradient(90deg, rgba(0, 229, 255, 0.14), transparent 40%);
  -webkit-mask: var(--src) center / 100% 100% no-repeat; mask: var(--src) center / 100% 100% no-repeat; mix-blend-mode: multiply; }

/* the big play control ON the line, where the line comes out of the screen's bottom edge */
.v-bigplay {
  position: absolute; z-index: 3; left: calc(var(--lx) * 1px - var(--v-fx)); top: 100%;
  width: var(--v-bp); height: var(--v-bp); margin: calc(var(--v-bp) / -2) 0 0 calc(var(--v-bp) / -2); border-radius: 50%;
  display: grid; place-items: center; align-content: center; gap: 3px;
  transition: transform var(--d-short) var(--ease), background-color var(--d-hit) linear, box-shadow var(--d-short) var(--ease), color var(--d-hit) linear;
}
.v-bigplay .ic { width: 22px; height: 22px; fill: currentColor; margin-left: 4px; position: relative; z-index: 1; }
.v-bigplay-l { position: relative; z-index: 1; font-size: 0.5rem; letter-spacing: 0.3em; text-transform: uppercase; margin-left: 0.3em; }
.v-bigplay .ring { position: absolute; inset: -9px; width: calc(100% + 18px); height: calc(100% + 18px); pointer-events: none; transform: rotate(-90deg); }
.v-bigplay .ring circle { fill: none; stroke-width: 1.6; stroke-dasharray: 289; stroke-dashoffset: 289; transition: stroke-dashoffset var(--d-long) var(--ease); }
.v-bigplay:hover .ring circle, .v-bigplay:focus-visible .ring circle { stroke-dashoffset: 0; }
.v-bigplay:focus-visible { outline-offset: 12px; border-radius: 50%; }
.v-stage[data-side="ll"] .v-bigplay { background: var(--ll-card); color: var(--ll-ink); box-shadow: 0 0 0 2.5px var(--ll-ink), 6px 6px 0 2.5px var(--paint, var(--p-magenta)); }
.v-stage[data-side="ll"] .v-bigplay .ring circle { stroke: var(--ll-ink); stroke-width: 2.4; }
.v-stage[data-side="ll"] .v-bigplay:hover { transform: scale(1.08) rotate(-8deg); background: var(--paint, var(--p-magenta)); }
.v-stage[data-side="gw"] .v-bigplay { background: #030507; color: var(--cyan); box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.8), 0 0 34px rgba(0, 229, 255, 0.45), inset 0 0 18px rgba(0, 229, 255, 0.18); text-shadow: 0 0 8px rgba(0, 229, 255, 0.8); }
.v-stage[data-side="gw"] .v-bigplay::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.08) 0 1px, transparent 1px 3px); pointer-events: none; }
.v-stage[data-side="gw"] .v-bigplay .ring circle { stroke: var(--cyan); filter: drop-shadow(0 0 3px rgba(0, 229, 255, 0.9)); }
.v-stage[data-side="gw"] .v-bigplay:hover { transform: scale(1.05); box-shadow: 0 0 0 1px var(--cyan), 0 0 50px rgba(0, 229, 255, 0.7), inset 0 0 22px rgba(0, 229, 255, 0.28); }

/* the title left of the line, the side, the date and the song right of it */
.v-fi { display: grid; grid-template-columns: calc(var(--lx) * 1px) minmax(0, 1fr); align-items: start; margin-top: calc(var(--v-bp) / 2 + 1.5rem); }
.v-fi-l { grid-column: 1; justify-self: end; margin-right: 34px; text-align: right; max-width: 34rem; }
.v-fi-t { font-family: var(--display); font-weight: 400; font-size: clamp(3rem, 5.6vw, 6.2rem); line-height: 0.84; letter-spacing: 0.01em; color: var(--fg); text-wrap: balance; }
.v-fi-sub { margin-top: 0.75rem; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.v-fi-r { grid-column: 2; margin-left: 34px; display: grid; justify-items: start; gap: 1rem; padding-top: 0.5rem; }
.v-fi-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); font-variant-numeric: tabular-nums; }
.v-fi-here { color: var(--fg); }
html[data-world="ll"] .v-fi-t { color: var(--ll-ink); text-shadow: 3px 3px 0 var(--p-yellow); }
html[data-world="gw"] .v-fi-t { letter-spacing: 0.05em; text-shadow: 0 0 24px rgba(0, 229, 255, 0.35); }

/* the side tag: LL a paint swash, GW a cyan light (the feature's follows its video, whatever the world) */
.v-tag { position: relative; z-index: 0; font-weight: 700; letter-spacing: 0.2em; }
[data-side="ll"] .v-tag, .v-rung--ll .v-tag { color: var(--ll-ink); padding: 0.14rem 0.36rem 0.1rem 0.42rem; }
[data-side="ll"] .v-tag::before, .v-rung--ll .v-tag::before {
  content: ''; position: absolute; inset: -1px -3px; z-index: -1; background: var(--paint, var(--p-magenta));
  clip-path: polygon(3% 12%, 30% 0, 62% 8%, 100% 2%, 96% 60%, 100% 96%, 58% 100%, 22% 92%, 0 100%, 4% 50%); transform: skewX(-12deg);
}
.v-feature[data-side="ll"] .v-tag::before { background: var(--p-orange); }
[data-side="gw"] .v-tag, .v-rung--gw .v-tag { color: var(--cyan); text-shadow: 0 0 8px rgba(0, 229, 255, 0.7); }
html[data-world="ll"] .v-feature[data-side="gw"] .v-fi-meta .v-tag { color: #00707e; text-shadow: none; }

/* "The song": the song this video belongs to, on the new site */
.v-song {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.55rem; justify-self: start;
  padding: 0.44rem 0.62rem 0.4rem; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase;
  transition: transform var(--d-short) var(--punch), background-color var(--d-short) ease, color var(--d-short) ease, box-shadow var(--d-short) ease;
}
.v-song i { flex: none; width: 16px; height: 9px; position: relative; background: linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat; transition: width var(--d-short) var(--ease); }
/* the head's point on the line's own row (one 9 px box for both; round 13, the song page's back chip) */
.v-song i::after { content: ''; position: absolute; right: 1px; top: 1px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.v-song:hover i, .v-song:focus-visible i { width: 24px; }
.v-rung--ll .v-song, .v-feature[data-side="ll"] .v-song { background: var(--ll-card); color: var(--ll-ink); border: 2px solid var(--ll-ink); box-shadow: 3px 3px 0 var(--paint, var(--p-magenta)); }
.v-rung--ll .v-song:hover, .v-rung--ll .v-song:focus-visible, .v-feature[data-side="ll"] .v-song:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--paint, var(--p-magenta)); }
.v-rung--gw .v-song, .v-feature[data-side="gw"] .v-song { background: rgba(6, 10, 13, 0.82); color: var(--cyan); border: 1px solid rgba(0, 229, 255, 0.45); text-shadow: 0 0 8px rgba(0, 229, 255, 0.6); }
.v-rung--gw .v-song:hover, .v-rung--gw .v-song:focus-visible, .v-feature[data-side="gw"] .v-song:hover { background: rgba(0, 229, 255, 0.14); box-shadow: 0 0 16px rgba(0, 229, 255, 0.3); }
.v-song--big { font-size: 0.6rem; padding: 0.6rem 0.8rem 0.55rem; }

/* ================================================================ the line: rows */
.v-line-wrap { position: relative; margin-top: 14vh; }
.v-line { position: relative; padding-bottom: 2rem; transition: opacity 200ms linear; }
/* until the videos are built the footer keeps a screen below the list, so it never shows in the first screen and then
   jumps down (CLS) */
.v-line-wrap:has(> .v-line:empty) + .v-foot { margin-top: 110vh; }
/* and the empty list's box stays unseen (nothing shows in it yet): the header's late web font would move it (CLS) */
.v-line-wrap:has(> .v-line:empty) { visibility: hidden; }
.v-line > li { position: relative; }
.v-line > li[hidden] { display: none; }
.v-line > li.is-leaving { position: absolute; left: 0; right: 0; margin: 0 !important; pointer-events: none; z-index: 0; }

/* ---------------------------------------------------------------- the years: big beside the line */
.v-tick { position: absolute; left: calc(var(--lx) * 1px); top: 50%; display: block; pointer-events: none; }
.v-year { display: grid; grid-template-columns: calc(var(--lx) * 1px) minmax(0, 1fr); align-items: center; margin: 5rem 0 3.4rem; }
.v-year:first-child { margin-top: 0; }
.v-year h2 { grid-column: 1; justify-self: end; margin-right: 30px; font-weight: 400; }
.v-year-n { display: block; font-family: var(--display); font-size: clamp(4.4rem, 7.6vw, 8rem); line-height: 0.8; letter-spacing: 0.01em; }
.v-year-c { grid-column: 2; margin-left: 30px; font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--dim); font-variant-numeric: tabular-nums; }
.v-year .v-tick { width: 44px; height: 3px; margin: -1.5px 0 0 -22px; }
html[data-world="ll"] .v-year-n { color: var(--ll-ink); text-shadow: 0.05em 0.05em 0 var(--p-yellow); }
html[data-world="ll"] .v-year .v-tick { background: var(--ll-ink); }
html[data-world="gw"] .v-year-n { color: transparent; -webkit-text-stroke: 1.2px var(--cyan); letter-spacing: 0.04em; filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.45)); }
html[data-world="gw"] .v-year .v-tick { height: 2px; background: var(--cyan); box-shadow: 0 0 10px rgba(0, 229, 255, 0.8); }

/* ---------------------------------------------------------------- a rung: a large poster hangs off the line */
.v-rung { display: grid; grid-template-columns: calc(var(--lx) * 1px) minmax(0, 1fr); margin-bottom: var(--v-gap); }
.v-rung.swap { margin-top: calc(var(--v-overlap) * -1); }
/* the zipper: a rung's empty half reaches over the rung above it, so only what it shows takes the pointer (the song link at
   the foot of a card was under the next rung's box) */
.v-rung { pointer-events: none; }
.v-rung > .v-node, .v-rung > .v-card { pointer-events: auto; }
.v-line > li.is-leaving > * { pointer-events: none; }
.v-card { position: relative; width: min(100%, var(--v-card-w)); isolation: isolate; }
.v-rung--ll .v-card { grid-column: 1; justify-self: end; margin-right: var(--v-arm); }
.v-rung--gw .v-card { grid-column: 2; justify-self: start; margin-left: var(--v-arm); }
.v-arm { position: absolute; top: var(--ay, 32%); width: var(--v-arm); height: 2px; margin-top: -1px; pointer-events: none; }
.v-rung--ll .v-arm { left: calc(var(--lx) * 1px - var(--v-arm)); transform-origin: 100% 50%; background: var(--ll-ink); }
.v-rung--gw .v-arm { left: calc(var(--lx) * 1px); transform-origin: 0 50%; height: 1px; margin-top: -0.5px; background: var(--cyan); box-shadow: 0 0 6px rgba(0, 229, 255, 0.7); }
html[data-world="gw"] .v-rung--ll .v-arm { background: #e8e4da; }
/* a small screen on the line marks each video (a click on it plays it too) */
.v-node {
  position: absolute; left: calc(var(--lx) * 1px); top: var(--ay, 32%); z-index: 2; cursor: pointer;
  width: 34px; height: 22px; margin: -11px 0 0 -17px; border-radius: 4px;
  display: grid; place-items: center;
  transition: transform var(--d-short) var(--ease), box-shadow var(--d-short) var(--ease), background-color var(--d-hit) linear;
}
.v-node i { width: 0; height: 0; margin-left: 2px; border-style: solid; border-width: 4px 0 4px 7px; border-color: transparent transparent transparent currentColor; }
.v-rung--ll .v-node { background: var(--ll-card); color: var(--ll-ink); box-shadow: 0 0 0 2px var(--ll-ink), 3px 3px 0 2px var(--paint, var(--p-magenta)); }
.v-rung--gw .v-node { background: #04070a; color: var(--cyan); box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.7), 0 0 14px rgba(0, 229, 255, 0.3), inset 0 0 8px rgba(0, 229, 255, 0.18); }
.v-rung--gw .v-node::after { content: ''; position: absolute; inset: 2px; border-radius: 2px; background: repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.1) 0 1px, transparent 1px 3px); pointer-events: none; }
.v-rung--ll:has(.v-card:hover) .v-node { background: var(--paint, var(--p-magenta)); }
.v-rung--gw:has(.v-card:hover) .v-node { box-shadow: 0 0 0 1px var(--cyan), 0 0 22px rgba(0, 229, 255, 0.6), inset 0 0 8px rgba(0, 229, 255, 0.3); }

/* ---------------------------------------------------------------- card materials (the side's, whatever the world) */
.v-card-in { position: relative; display: grid; }
.v-hit { display: block; width: 100%; text-align: left; }
.v-hit::after { content: ''; position: absolute; inset: 0; z-index: 1; }     /* the whole card plays the video */
.v-hit:focus-visible { outline: none; }
.v-card:has(.v-hit:focus-visible) .v-card-in { outline: 2px solid var(--focus); outline-offset: 5px; }
.v-poster { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.v-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--d-long) var(--ease), filter var(--d-long) var(--breath); }
.v-glyph {
  position: absolute; left: 50%; top: 50%; z-index: 1; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  display: grid; place-items: center; transition: transform var(--d-short) var(--punch), box-shadow var(--d-short) var(--ease), opacity var(--d-short) linear;
}
.v-glyph .ic { width: 17px; height: 17px; fill: currentColor; margin-left: 3px; }
.v-body { position: relative; display: grid; justify-items: start; gap: 0.36rem; padding: 0.9rem 0.3rem 1.05rem; }
.v-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.8rem; font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.v-t { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 2.3vw, 2.5rem); line-height: 0.9; letter-spacing: 0.01em; padding-top: 0.08em; }
.v-sub { font-size: 0.54rem; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.5; }
.v-body .v-song { margin-top: 0.45rem; }

/* LL: a paper card, the poster pasted on, a paint shadow; it slams */
.v-rung--ll .v-card-in {
  padding: 12px 12px 0;
  background: var(--ll-card) var(--grain); background-size: auto, 160px 160px; color: var(--ll-ink);
  border: 2px solid var(--ll-ink); box-shadow: 8px 8px 0 var(--paint, var(--p-magenta));
  rotate: var(--tilt, 0deg);
  transition: transform var(--d-short) var(--punch), box-shadow var(--d-short) var(--punch), rotate var(--d-short) var(--punch);
}
.v-rung--ll .v-card:hover .v-card-in, .v-rung--ll .v-card:focus-within .v-card-in { transform: translate(-4px, -4px); rotate: 0deg; box-shadow: 13px 13px 0 var(--paint, var(--p-magenta)); }
.v-rung--ll .v-poster { outline: 2px solid var(--ll-ink); }
.v-rung--ll .v-card:hover .v-poster img { transform: scale(1.045); }
.v-rung--ll .v-glyph { background: var(--paint, var(--p-magenta)); color: var(--ll-ink); box-shadow: 0 0 0 2px var(--ll-ink), 3px 3px 0 2px var(--ll-ink); transform: rotate(-6deg); }
.v-rung--ll .v-card:hover .v-glyph { transform: rotate(6deg) scale(1.14); }
.v-rung--ll .v-meta { color: var(--ll-dim); }
.v-rung--ll .v-sub { color: var(--ll-dim); }
/* the hint of its world: a paint splat blooms behind the poster, on the outer side */
.v-splat { position: absolute; z-index: -1; pointer-events: none; opacity: 0; transform: scale(0.2) rotate(-20deg); transition: transform 420ms var(--punch), opacity 160ms linear; }
.v-rung--ll .v-splat {
  left: -46px; top: -38px; width: 190px; height: 170px; background: var(--paint, var(--p-magenta));
  clip-path: polygon(50% 0, 58% 22%, 78% 4%, 72% 30%, 100% 26%, 80% 46%, 98% 64%, 70% 62%, 76% 92%, 56% 72%, 44% 100%, 38% 70%, 12% 88%, 24% 60%, 0 50%, 26% 40%, 6% 14%, 34% 24%);
}
.v-rung--ll .v-card:hover .v-splat, .v-rung--ll .v-card:focus-within .v-splat { opacity: 1; transform: none; }

/* GW: a CRT monitor, dark glass lit from the line's side; the picture is graded down until it is hovered */
.v-rung--gw .v-card-in {
  padding: 10px 10px 0; border-radius: 6px;
  background: linear-gradient(180deg, #0c1115, var(--gw-card)); color: var(--gw-fg);
  border: 1px solid rgba(0, 229, 255, 0.22);
  box-shadow: inset 2px 0 0 rgba(0, 229, 255, 0.55), -14px 0 30px -18px rgba(0, 229, 255, 0.55);
  transition: border-color var(--d-mid) var(--breath), box-shadow var(--d-mid) var(--breath), transform var(--d-long) var(--breath);
}
.v-rung--gw .v-card:hover .v-card-in, .v-rung--gw .v-card:focus-within .v-card-in {
  border-color: rgba(0, 229, 255, 0.6); transform: translateX(4px);
  box-shadow: inset 3px 0 0 var(--cyan), -18px 0 44px -14px rgba(0, 229, 255, 0.85), 0 0 0 1px rgba(0, 229, 255, 0.25), 0 0 60px -20px rgba(0, 229, 255, 0.5);
}
.v-rung--gw .v-poster { border-radius: 4px; }
.v-rung--gw .v-poster img { filter: grayscale(0.6) contrast(1.1) brightness(0.72); }
.v-rung--gw .v-card:hover .v-poster img, .v-rung--gw .v-card:focus-within .v-poster img { filter: none; }
.v-rung--gw .v-poster::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55)); }
.v-rung--gw .v-glyph { color: var(--cyan); background: rgba(3, 6, 8, 0.6); box-shadow: 0 0 0 1px var(--cyan), 0 0 22px rgba(0, 229, 255, 0.55); z-index: 2; }
.v-rung--gw .v-card:hover .v-glyph { box-shadow: 0 0 0 1px var(--cyan), 0 0 34px rgba(0, 229, 255, 0.85); }
.v-rung--gw .v-t { letter-spacing: 0.05em; }
.v-rung--gw .v-meta, .v-rung--gw .v-sub { color: var(--gw-dim); }
.v-rung--gw .v-splat { display: none; }

/* ---------------------------------------------------------------- the end: the line stops where it started */
.v-end { display: grid; justify-items: center; text-align: center; padding: 3.5rem 0 0; }
/* the line's own end (worlds.js caps it at this point: LL an ink bead, GW the tube's glow); drawn here without WebGL */
.v-end-bead { position: relative; display: block; width: 14px; height: 14px; border-radius: 50%; margin-left: calc(var(--lx) * 2px - 100%); }
html[data-gl="1"] .v-end-bead { visibility: hidden; }
.v-end-in { width: min(30rem, calc(100vw - 2 * var(--gutter))); margin: 2rem 0 0 calc(var(--lx) * 2px - 100%); display: grid; justify-items: center; }
.v-end-k { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--accent); }
.v-end-q { margin: 1rem 0 0.8rem; font-family: var(--display); font-size: clamp(2.4rem, 3.6vw, 3.4rem); line-height: 0.96; letter-spacing: 0.02em; color: var(--fg); }
.v-end-play { display: inline-flex; align-items: center; gap: 0.9rem; padding: 0.1em 0.2em 0; text-align: left; }
.v-end-glyph { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none; transition: transform var(--d-short) var(--ease), box-shadow var(--d-short) var(--ease); }
.v-end-glyph .ic { width: 12px; height: 12px; fill: currentColor; margin-left: 2px; }
html[data-world="ll"] .v-end-glyph { background: var(--ll-card); color: var(--ll-ink); box-shadow: 0 0 0 2px var(--ll-ink), 3px 3px 0 2px var(--p-magenta); }
html[data-world="ll"] .v-end-play:hover .v-end-glyph { transform: rotate(-8deg) scale(1.08); background: var(--p-yellow); }
html[data-world="gw"] .v-end-glyph { background: #04070a; color: var(--cyan); box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.7), 0 0 16px rgba(0, 229, 255, 0.35); }
html[data-world="gw"] .v-end-play:hover .v-end-glyph { box-shadow: 0 0 0 1px var(--cyan), 0 0 26px rgba(0, 229, 255, 0.6); }
.v-end-from { font-size: 0.56rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim); }
.v-end .draft-tag { margin: 1.2rem 0 0; }
html[data-world="ll"] .v-end-bead { background: var(--ll-ink); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; box-shadow: 4px 4px 0 var(--p-magenta); }
html[data-world="gw"] .v-end-bead { width: 10px; height: 10px; background: #e9feff; box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.4), 0 0 18px 4px rgba(0, 229, 255, 0.85); }
html[data-world="gw"] .v-end-q { letter-spacing: 0.05em; text-shadow: 0 0 22px rgba(0, 229, 255, 0.28); }

.v-foot { display: grid; justify-items: center; gap: 1.1rem; padding: 18vh var(--gutter) calc(96px + env(safe-area-inset-bottom)); }
.v-foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 2rem; font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase; }
.v-foot-nav a { position: relative; padding: 0.4rem 0; color: var(--fg); }
.v-foot-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.15rem; height: 1px; background: var(--line); box-shadow: var(--line-glow); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--ease-d) var(--ease); }
.v-foot-nav a:hover::after, .v-foot-nav a:focus-visible::after { transform: none; }
.v-foot-note { font-size: 0.52rem; letter-spacing: 0.28em; text-transform: uppercase; }
.v-foot-note a { color: var(--dim); }
.v-foot-note a:hover, .v-foot-note a:focus-visible { color: var(--fg); }

/* ================================================================ reveal: out of the line, in the world's language
   (the rows wait for the arrival: the head tears open, the header flies in, the feature lands, then the rungs) */
.v-rung .v-card { opacity: 0; }
.v-rung .v-arm { transform: scaleX(0); }
.v-rung .v-node { transform: scale(0); }
.v-rung--ll .v-card { transform: translateX(34px) scaleX(0.84) rotate(1.6deg); transform-origin: 100% 50%; }
.v-rung--gw .v-card { transform: translateX(-20px); clip-path: inset(0 100% 0 0); transform-origin: 0 50%; }
.v-rung .v-card { transition: opacity 260ms linear, transform var(--d-mid) var(--punch), clip-path 0s; }
.v-rung--gw .v-card { transition: opacity var(--d-mid) var(--breath), transform var(--d-long) var(--breath), clip-path var(--d-long) var(--breath); }
.v-rung.is-in .v-card { opacity: 1; transform: none; clip-path: inset(-90px -90px -90px -90px); }
.v-rung.is-in .v-arm { transform: none; transition: transform var(--d-short) var(--ease) 40ms; }
.v-rung.is-in .v-node { transform: none; transition: transform var(--d-mid) var(--punch); }
.v-rung.is-in .v-node:hover { transform: scale(1.12); }
.v-year, .v-end, .v-hint { opacity: 0; transition: opacity var(--d-mid) linear, transform var(--d-mid) var(--ease); }
.v-year { transform: translateY(12px); }
.v-year.is-in, .v-end.is-in, html[data-arrived="1"] .v-hint { opacity: 1; transform: none; }
.v-filters-slot { opacity: 0; transition: opacity var(--d-mid) linear; }
html[data-arrived="1"] .v-filters-slot { opacity: 1; }

/* ================================================================ phones: the spine at the left edge, everything right of it */
@media (max-width: 719.98px) {
  html[data-page="video"] { --v-arm: 16px; --v-gap: 2.4rem; --v-bp: 56px; }
  .v-page { padding-top: 13vh; }
  .v-head { margin-bottom: 3.2vh; }
  .v-title-xl { font-size: clamp(4.4rem, 26vw, 7.4rem); }
  .v-filters-slot { height: auto; margin: 0 var(--gutter) 0 calc(var(--lx) * 1px + var(--v-arm)); }
  .v-filters { display: flex; flex-wrap: wrap; gap: 8px; height: auto; }
  .v-chip, .v-chip--ll, .v-chip--gw, .v-chip--all { position: relative; left: auto; right: auto; top: auto; translate: none; min-height: 36px; padding: 0 0.8rem; }
  .v-chip--all { order: -1; width: auto; padding: 0 0.95rem; }
  html[data-dock="1"] .v-filters-slot { height: var(--slot-h, 80px); }
  html[data-dock="1"] .v-filters { left: calc(var(--gutter) + 44px + 10px); right: var(--gutter); flex-wrap: nowrap; gap: 5px; justify-content: flex-start; }
  html[data-dock="1"] .v-chip { padding: 0 0.42rem; min-height: 34px; letter-spacing: 0.06em; font-size: 0.54rem; }
  html[data-dock="1"] .v-chip b { letter-spacing: 0.06em; }
  html[data-dock="1"] .v-chip--ll b { padding: 0.14rem 0.22rem 0.1rem 0.26rem; }
  html[data-dock="1"] .v-chip small { display: none; }
  html[data-dock="1"] .v-chip--all { min-width: 50px; justify-content: center; }
  html[data-dock="1"] .v-filters { --band-px: 8px; --band-py: 6px; }
  html[data-page="video"][data-dock="1"] .sound { opacity: 0; pointer-events: none; }
  .v-hint { display: flex; gap: 1.2rem; margin: 1rem var(--gutter) 0 calc(var(--lx) * 1px + var(--v-arm)); }
  .v-hint span:first-child, .v-hint span:last-child { margin: 0; }

  .v-feature { margin-top: calc(3vh + 96px); }
  .v-fk { display: flex; gap: 1rem; margin: 0 var(--gutter) 1.6rem calc(var(--lx) * 1px + var(--v-arm) + 26px); max-width: 60%; }
  .v-fk-l, .v-fk-r { margin: 0; }
  .v-stage { width: calc(100vw - var(--lx) * 1px - var(--v-arm) - var(--gutter)); margin-left: calc(var(--lx) * 1px + var(--v-arm)); }
  .v-bigplay { left: calc(var(--v-arm) * -1); top: 50%; }
  .v-bigplay-l { display: none; }
  .v-bigplay .ic { width: 16px; height: 16px; margin-left: 3px; }
  .v-bigplay .ring { inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); }
  .v-stage[data-side="ll"] .v-screen { box-shadow: 8px 8px 0 var(--paint, var(--p-magenta)); padding: 9px; }
  .v-tape { width: 58px; height: 20px; top: -10px; }
  .v-tape--a { left: -16px; } .v-tape--b { right: -16px; }
  .v-art--sit, .v-art--kneel, .v-art--lie { left: auto; right: 6%; }
  .v-art--sit { width: 76px; bottom: calc(100% - 18px); }
  .v-art--kneel { width: 62px; bottom: calc(100% - 16px); }
  .v-art--lie { width: 124px; }
  .v-art--gw { right: 3%; width: 42%; bottom: calc(100% - 38px); }
  .v-fi { display: block; margin: 1.4rem var(--gutter) 0 calc(var(--lx) * 1px + var(--v-arm)); }
  .v-fi-l { margin: 0; text-align: left; max-width: none; justify-self: start; }   /* block boxes honour justify-self now */
  .v-fi-t { font-size: clamp(2.6rem, 13vw, 3.4rem); }
  .v-fi-r { margin: 0.9rem 0 0; padding: 0; gap: 0.8rem; }

  .v-line-wrap { margin-top: 9vh; }
  .v-year { display: block; margin: 3.4rem 0 1.6rem; padding: 0 var(--gutter) 0 calc(var(--lx) * 1px + var(--v-arm) + 4px); }
  .v-year:first-child { margin-top: 0; }
  .v-year h2 { margin: 0; justify-self: start; }
  .v-year-n { font-size: 4.6rem; }
  .v-year-c { display: block; margin: 0.5rem 0 0; }
  .v-year .v-tick { top: 2.1rem; margin-top: 0; width: 22px; margin-left: -11px; }

  .v-rung, .v-rung.swap { margin-top: 0; }
  .v-rung--ll .v-card, .v-rung--gw .v-card { grid-column: 2; justify-self: stretch; width: auto; margin: 0 var(--gutter) 0 var(--v-arm); }
  .v-rung--ll .v-arm { left: calc(var(--lx) * 1px); transform-origin: 0 50%; }
  .v-rung--ll .v-card { transform: translateX(-22px) scaleX(0.9) rotate(-1deg); transform-origin: 0 50%; }
  .v-node { width: 28px; height: 20px; margin: -10px 0 0 -14px; }
  .v-rung--ll .v-card-in { padding: 9px 9px 0; box-shadow: 5px 5px 0 var(--paint, var(--p-magenta)); }
  .v-rung--gw .v-card-in { padding: 8px 8px 0; box-shadow: inset 2px 0 0 rgba(0, 229, 255, 0.55); }
  .v-rung--ll .v-splat { left: auto; right: -30px; width: 130px; height: 116px; }
  .v-glyph { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .v-t { font-size: 1.95rem; }

  .v-end { justify-items: start; text-align: left; padding: 3rem var(--gutter) 0 0; }
  .v-end-bead { margin-left: calc(var(--lx) * 1px - 7px); }
  html[data-world="gw"] .v-end-bead { margin-left: calc(var(--lx) * 1px - 5px); }
  .v-end-in { width: auto; margin: 1.6rem 0 0 calc(var(--lx) * 1px + var(--v-arm) + 4px); justify-items: start; }
  .v-end-q { font-size: 2.4rem; }
  .v-foot { justify-items: start; padding-left: calc(var(--lx) * 1px + var(--v-arm) + 4px); }
  .v-foot-nav { justify-content: flex-start; gap: 0.2rem 1.4rem; }
}

/* ================================================================ reduced motion: an art-directed still edition, crossfades only */
html[data-rm="1"] .v-rung .v-card, html[data-rm="1"] .v-rung .v-arm, html[data-rm="1"] .v-rung .v-node, html[data-rm="1"] .v-year {
  transform: none; clip-path: none; transition: opacity 200ms linear !important;
}
html[data-rm="1"] .v-rung .v-arm, html[data-rm="1"] .v-rung .v-node { opacity: 0; }
html[data-rm="1"] .v-rung.is-in .v-arm, html[data-rm="1"] .v-rung.is-in .v-node { opacity: 1; }
html[data-rm="1"] .v-card-in, html[data-rm="1"] .v-chip, html[data-rm="1"] .v-poster img, html[data-rm="1"] .v-glyph,
html[data-rm="1"] .v-screen, html[data-rm="1"] .v-screen-in img, html[data-rm="1"] .v-bigplay, html[data-rm="1"] .v-song { transition-duration: 0s !important; }
html[data-rm="1"] .v-rgb, html[data-rm="1"] .v-rgb::after { animation: none !important; }
html[data-rm="1"] .v-splat { transform: none; transition: opacity 200ms linear; }
html[data-rm="1"] .v-rung--ll .v-card:hover .v-card-in { transform: none; }
html[data-rm="1"] .v-rung--gw .v-card:hover .v-card-in { transform: none; }
html[data-rm="1"] .v-stage[data-side="ll"]:hover .v-screen { translate: none; }
html[data-rm="1"] .v-bigplay:hover, html[data-rm="1"] .v-rung--ll .v-card:hover .v-glyph { transform: none; }
html[data-rm="1"] .v-bigplay .ring circle { transition: none; }
html[data-rm="1"][data-dock="1"] .v-filters { animation: vFade 200ms linear both; }
@keyframes vFade { from { opacity: 0; } to { opacity: 1; } }
html[data-rm="1"] .v-line.is-swapping { opacity: 0; }