/* ==========================================================================
   FrozenArt Media — site styles · “Stage”

   FrozenArt makes pictures, and the tools for their sound, so the site is a
   stage for what it makes: a black floor in blue shadow and one warm light.
   As you scroll, each thing is brought into that light, turns to face you,
   and goes back into the dark.

   The light is tungsten, the logo's gold (#E8B95E). It falls from above: a
   beam through a little haze, a pool where it lands, a warm edge along the
   top of whatever stands in it. The shadows are dark sky blue (#0A1629 to
   #163056) and the floor is film black (#060709), glossy enough to hold a
   reflection. Things stand on their marks — the gaffer-tape T an actor finds
   their place by — and a small lamp shows what is on.

   Type: Didot for titles and names, as in a theatre programme (and the
   widely spaced FREE); Futura capitals for credits and labels; Avenir Next
   for reading. All come with every Mac and iPhone; Windows gets Bodoni MT,
   Century Gothic and Corbel; Geist (shipped) stands in elsewhere.

   Hand-written, no build step. Colours, type and spacing come from the tokens
   in :root; everything else is derived from them.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* The floor, and the dark around it. */
  --ink: #060709;            /* film black: the floor, the page */
  --ink-1: #0a0c11;          /* the strip at the top, the foot, drawers, dialogs */
  --ink-2: #0e1219;          /* behind a picture before it loads */
  --ink-3: #151b26;
  /* The shadows: dark sky blue, from the fill light at the side. */
  --night: #0a1629;
  --night-2: #163056;
  --night-rgb: 22, 48, 86;
  --fill: #8fb1e3;           /* the fill light catching an edge */
  --fill-rgb: 143, 177, 227;

  /* Ink */
  --text: #f2eee4;           /* projector white — 17:1 on the floor */
  --text-2: #bcc2cc;         /* reading — 11:1 */
  --text-3: #8d95a3;         /* notes — 6.6:1 */
  --text-4: #5f6775;         /* decoration only */
  --white: #fbf8f1;          /* the brightest: FREE, a name in the light */

  /* The light: tungsten, the logo's gold. Whatever you can act on is lit by it. */
  --gold: #e8b95e;
  --gold-rgb: 232, 185, 94;
  --gold-hi: #f5d593;
  --gold-lo: #b3842f;
  --gold-ink: #150f03;
  --key-rgb: 255, 214, 150;  /* the beam itself: paler than the gold it makes where it lands */
  --ok: #9fe0b8;
  --warn: var(--gold-hi);
  --bad: #ff9d8a;

  /* Rules: hairlines in the dark, gold where the light is. */
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .12);
  --line-3: rgba(255, 255, 255, .2);
  --rule: rgba(var(--gold-rgb), .22);
  --rule-2: rgba(var(--gold-rgb), .4);
  --rule-3: rgba(var(--gold-rgb), .62);

  /* A panel standing on the floor, lit from above; the edge and the shadow of a picture standing in the light. */
  --panel: linear-gradient(180deg, #111318, #0b0c10 60%);
  --frame-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 40px 72px -30px #000, 0 14px 28px -14px rgba(0, 0, 0, .6);
  /* The rig's bar: a thin strip made like the floor — dark boards and their joints — rounded at its edges. */
  --batten-h: 6px;
  --batten: linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 35%, rgba(0, 0, 0, .45)), repeating-linear-gradient(90deg, #13171f 0 44px, #0e1118 44px 45px, #151a23 45px 92px, #0c0f15 92px 93px);

  /* Pictures are screens, so they keep a screen's corner; controls stay nearly square. */
  --r-frame: 9px;
  --r-xs: 2px;
  --r-sm: 3px;
  --r: 4px;
  --r-lg: 6px;
  --r-xl: 9px;
  --pill: 999px;

  --font-title: "Didot", "Bodoni 72", "Bodoni MT", "Bodoni Moda", Georgia, serif;
  --font-name: var(--font-title);
  --font-legend: "Futura", "Futura PT", "Century Gothic", "Avenir Next", "Geist", sans-serif;
  --font-text: "Avenir Next", "Avenir", "Corbel", "Geist", "Segoe UI", sans-serif;
  --font-mono: "SF Mono", "Geist Mono", Menlo, Consolas, monospace;
  --font-display: var(--font-title);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  /* A light coming up on a dimmer: slow to start, settling softly. */
  --ease-light: cubic-bezier(.45, .05, .2, 1);
  /* Moves tied to the scroll: between two marks a thing starts softly and stops softly (--glide); arriving, it comes in
     with some speed and settles slowly (--glide-in). */
  --glide: cubic-bezier(.42, 0, .2, 1);
  --glide-in: cubic-bezier(.17, .84, .32, 1);
  --dur: .28s;

  --container: 1320px;
  --gutter: clamp(16px, 3.6vw, 48px);
  --nav-h: 76px;
  --section: clamp(76px, 9.5vw, 136px);
}
@media (max-width: 1020px) { :root { --nav-h: 64px; } }

/* --------------------------------------------------------------------------
   2. Base — the hall
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); background: var(--ink); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text-2);
  font: 400 16.5px/1.65 var(--font-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  background: transparent;
}
/* The hall, fixed behind everything: blue shadow on the side the fill light comes from, darker overhead, and a fine
   grain, so the dark reads as a surface and soft light on it never bands. */
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before {
  background:
    radial-gradient(65% 55% at 0% 100%, rgba(var(--night-rgb), .5), transparent 72%),
    radial-gradient(55% 45% at 100% 22%, rgba(10, 22, 41, .75), transparent 72%),
    linear-gradient(180deg, #05060a, var(--ink) 45%, #070a10);
}
body::after { content: none; }

img, video, svg, canvas, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
p a, .prose a, .link { color: var(--gold-hi); text-decoration: underline; text-decoration-color: rgba(var(--gold-rgb), .45); text-decoration-thickness: 1px; text-underline-offset: .22em; transition: text-decoration-color var(--dur); }
p a:hover, .prose a:hover, .link:hover { text-decoration-color: var(--gold-hi); }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-title); font-weight: 400; color: var(--text); letter-spacing: -.01em; line-height: 1.04; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
code, kbd { font-family: var(--font-mono); font-size: .88em; background: rgba(255, 255, 255, .045); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: .08em .38em; }
hr { border: 0; border-top: 1px solid var(--line-2); margin: 32px 0; }
::selection { background: rgba(var(--gold-rgb), .35); color: #fff; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
[hidden] { display: none !important; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--gold); color: var(--gold-ink); padding: 10px 16px; font: 500 12px/1.2 var(--font-legend); letter-spacing: .16em; text-transform: uppercase; transition: top .2s; }
.skip-link:focus { top: 12px; }

/* Film grain over everything (Appearance → grain), felt more than seen. */
.has-grain::after { content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: .04; background: url("../img/grain.png") 0 0 / 128px 128px repeat; }

/* --------------------------------------------------------------------------
   3. The stage's parts
   -------------------------------------------------------------------------- */

/* The mark: a gaffer-tape T on the floor, the way an actor finds their place. It marks where you are; dimmed, the
   places you could go. */
.mark {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 10px;
  vertical-align: middle;
  background:
    linear-gradient(var(--gold), var(--gold)) 0 0 / 100% 3px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 50% 0 / 3px 100% no-repeat;
}
/* The lamp: on or off — what is chosen, what is running. */
.lamp { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff4d6, var(--gold) 55%, var(--gold-lo)); box-shadow: 0 0 7px rgba(var(--gold-rgb), .55); }

/* Credits and labels: Futura capitals in gold, widely spaced; in a section's head the label stands on its mark. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .9em;
  margin: 0 0 16px;
  font: 500 11px/1.3 var(--font-legend);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow--muted { color: var(--text-3); }
.section-head .eyebrow::before, .page-head .eyebrow::before, .toplist__head .eyebrow::before, .story__eyebrow::before {
  content: "";
  flex: none;
  width: 12px;
  height: 10px;
  background:
    linear-gradient(var(--gold), var(--gold)) 0 0 / 100% 3px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 50% 0 / 3px 100% no-repeat;
}
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* The light. A beam falls from a lamp above through a little haze: whiter along its middle, warm and soft at its edges,
   thinning as it reaches the floor — a picture of it, so the browser only has to place it. --spread is the beam's
   half-angle, --a its strength; the lamp hangs at the top middle of the element. */
.beam { --spread: 14deg; --a: .1; position: absolute; pointer-events: none; transform-origin: 50% 0; }
.beam::before { content: ""; position: absolute; inset: 0; background: url("../img/stage-beam.webp") 0 0 / 100% 100% no-repeat; opacity: min(1, calc(var(--a) * 1.7)); }
/* The lamp itself, seen from below where the beam starts. */
.beam::after { content: ""; position: absolute; left: 50%; top: 0; width: 30px; height: 10px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 245, 225, .85), rgba(var(--key-rgb), .3) 60%, transparent); }
/* The rig: a thin bar across the top of the stage, lit along its lower edge by the lamps hung from it. The strip at the
   top of every page ends in one; others run between sections. */
.batten { position: absolute; left: 0; right: 0; top: 0; height: var(--batten-h); z-index: 3; pointer-events: none; background: var(--batten); box-shadow: inset 0 -1px 0 rgba(var(--key-rgb), .2), 0 7px 14px -7px #000; }
/* A lamp hung from the rig, like a stage spot: its bracket stays put; its head — the black can with barn doors, and the
   light out of its lens — turns on the bracket's knobs, so where the lamp points, the light goes. --x places it along
   the rig, --aim turns it (positive turns the light to the left), --throw is how far its light reaches. */
.rig { --s: 1.15; --swing: 30deg; position: absolute; left: var(--x, 50%); top: var(--rig-top, var(--batten-h)); z-index: 2; width: 0; height: 0; pointer-events: none; }
.rig__yoke { position: absolute; z-index: 2; left: calc(-24px * var(--s)); top: 0; width: calc(48px * var(--s)); height: calc(40px * var(--s)); background: url("../img/rig-yoke.svg") 0 0 / 100% 100% no-repeat; }
.rig__head { position: absolute; left: 0; top: calc(34px * var(--s)); width: 0; height: 0; rotate: var(--aim, 0deg); }
.rig__aim, .rig__follow, .rig__sway { position: absolute; left: 0; top: 0; width: 0; height: 0; }
/* Even when nothing scrolls, the lamps drift a little on their brackets, each at its own slow pace, the way hung lamps
   never quite settle. (On top of where they are aimed, so the scroll and the pointer still move them.) */
.motion-ok .rig__sway { animation: lamp-drifts var(--drift-time, 11s) cubic-bezier(.45, 0, .55, 1) var(--drift-delay, 0s) infinite alternate; }
@keyframes lamp-drifts { from { rotate: -2.4deg; } to { rotate: 2.4deg; } }
.rig:nth-of-type(2n) { --drift-time: 13.5s; --drift-delay: -4s; }
.rig:nth-of-type(3n) { --drift-time: 9.5s; --drift-delay: -7s; }
.rig:nth-of-type(5n) { --drift-time: 15.5s; --drift-delay: -2.5s; }
.rig__can { position: absolute; left: calc(-20px * var(--s)); top: calc(-16px * var(--s)); width: calc(40px * var(--s)); height: calc(46px * var(--s)); background: url("../img/rig-can.svg") 0 0 / 100% 100% no-repeat; }
.rig__beam { left: 0; top: calc(20.4px * var(--s)); width: calc(var(--throw, 70vh) * 2 * tan(var(--spread, 14deg))); height: var(--throw, 70vh); translate: -50% 0; }
.rig__beam::after { width: calc(23px * var(--s)); height: calc(5px * var(--s)); background: radial-gradient(closest-side, #fff, rgba(255, 240, 214, .75) 45%, transparent); box-shadow: 0 0 calc(18px * var(--s)) calc(6px * var(--s)) rgba(255, 232, 196, .24); }

/* The stage floor: dark weathered planks laid in perspective, running away from you to the back of the stage, where they
   dissolve unevenly into the dark; dark at its sides and lit where the lamps land (--pool-x, --pool-y, --pool-w,
   --pool-h). */
.floor { --pool-x: 50%; --pool-y: 40%; --pool-w: 34%; --pool-h: 50%; position: absolute; left: 0; right: 0; bottom: 0; top: var(--floor-top, 62%); overflow: hidden; pointer-events: none; }
.floor__planks { position: absolute; inset: 0; background: url("../img/stage-floor.webp") 50% 0 / cover no-repeat; }
.floor__light { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%); mask-image: linear-gradient(180deg, transparent, #000 40%); background:
  radial-gradient(var(--pool-w) var(--pool-h) at var(--pool-x) var(--pool-y), rgba(255, 238, 210, .28), rgba(var(--key-rgb), .1) 50%, transparent 76%),
  radial-gradient(calc(var(--pool-w) * 1.45) calc(var(--pool-h) * 1.5) at var(--pool-x) var(--pool-y), rgba(6, 7, 9, 0), rgba(6, 7, 9, .42) 45%, rgba(6, 7, 9, .9) 80%, var(--ink)); }
/* Smoke: a band of haze hanging in the light. It never quite stops: it drifts sideways very slowly (one tile is exactly
   as wide as the band, so it loops without a seam) and thickens and thins as it goes; scrolling carries it along faster
   (section 28) — the band reaches past both sides of the stage, so it never shows an edge. */
.smoke { position: absolute; left: -20%; right: -20%; top: var(--smoke-top, 40%); height: var(--smoke-h, 40%); overflow: hidden; pointer-events: none; opacity: calc(var(--smoke-a, .3) * 1.15); }
.smoke__drift { position: absolute; top: 0; bottom: 0; left: 0; width: 200%; background: url("../img/stage-smoke.webp") 0 0 / 50% 100% repeat-x; }
.motion-ok .smoke__drift { animation: smoke-drifts var(--smoke-time, 110s) linear infinite var(--smoke-way, normal), smoke-breathes var(--breath-time, 23s) cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes smoke-drifts { to { transform: translateX(-50%); } }
@keyframes smoke-breathes { from { opacity: .7; scale: 1 .94; } to { opacity: 1; scale: 1 1.06; } }
/* Haze hanging higher up in the air: thinner and larger, drifting the other way at its own pace, so the light has
   something to show itself in. */
.smoke--air { --smoke-top: 6%; --smoke-h: 72%; --smoke-a: .13; --smoke-way: reverse; --smoke-time: 155s; --breath-time: 37s; }
.smoke--air .smoke__drift { background-position: 62% 0; }
/* Lamps swing round to their mark — from the right, or from the left. */
@keyframes lamp-finds-from-right { from { rotate: -31deg; } }
@keyframes lamp-finds-from-left { from { rotate: 31deg; } }
@media (max-width: 900px) { .rig { --s: .82; } }
/* The lights of a photo studio, for the lower sections: a softbox or a strip box on a light stand standing on the floor
   (studio_light() in view.php), and a dish hung from the rig (a rig lamp with rig--dish). Their light is soft — a broad
   fan from the whole face, with no edge to it. The script turns each one to what it lights (--aim, from straight down;
   --facing is the way the drawing faces: right, or left with kit--flip). */
.kit { --s: 1; --facing: -90deg; position: absolute; z-index: -1; width: calc(140px * var(--s)); height: calc(420px * var(--s)); pointer-events: none; }
.kit--flip { --facing: 90deg; }
.kit__stand { position: absolute; inset: 0; background: url("../img/kit-stand.svg") 0 0 / 100% 100% no-repeat; }
.kit__stand::after { content: ""; position: absolute; left: -12%; right: -12%; bottom: -4%; height: 9%; background: radial-gradient(closest-side, rgba(0, 0, 0, .65), transparent); }
.kit__head { position: absolute; left: 50%; top: 0; width: 0; height: 0; rotate: calc(var(--aim, var(--facing)) - var(--facing)); }
.kit--flip .kit__head { scale: -1 1; }
.kit__box, .kit__light, .kit__glow { position: absolute; }
.kit--softbox .kit__box { left: calc(-42px * var(--s)); top: calc(-206px * var(--s)); width: calc(220px * var(--s)); height: calc(250px * var(--s)); background: url("../img/kit-softbox.svg") 0 0 / 100% 100% no-repeat; }
.kit--strip .kit__box { left: calc(-31.5px * var(--s)); top: calc(-277px * var(--s)); width: calc(120px * var(--s)); height: calc(420px * var(--s)); background: url("../img/kit-strip.svg") 0 0 / 100% 100% no-repeat; }
.kit__light { transform-origin: 50% 0; translate: -50% 0; rotate: -90deg; height: var(--throw, calc(600px * var(--s))); background: url("../img/stage-soft.webp") 0 0 / 100% 100% no-repeat; opacity: var(--a, .5); }
.kit__glow { translate: -50% -50%; background: radial-gradient(closest-side, rgba(255, 240, 215, .32), rgba(255, 220, 170, .09) 50%, transparent); }
.kit--softbox :is(.kit__light, .kit__glow) { left: calc(125px * var(--s)); top: calc(-80px * var(--s)); }
.kit--softbox .kit__light { width: calc(440px * var(--s)); }
.kit--softbox .kit__glow { width: calc(270px * var(--s)); height: calc(370px * var(--s)); }
.kit--strip :is(.kit__light, .kit__glow) { left: calc(60px * var(--s)); top: calc(-67px * var(--s)); }
.kit--strip .kit__light { width: calc(820px * var(--s)); }
.kit--strip .kit__glow { width: calc(160px * var(--s)); height: calc(530px * var(--s)); }
.rig.rig--dish { --spread: 27deg; --a: .32; }
.rig--dish .rig__yoke, .rig--dish .rig__beam::after { display: none; }
.rig--dish .rig__head { top: 0; }
.rig--dish .rig__can { left: calc(-65px * var(--s)); top: 0; width: calc(130px * var(--s)); height: calc(75px * var(--s)); background-image: url("../img/kit-dish.svg"); }
.rig--dish .rig__beam { top: calc(56px * var(--s)); }
.rig--dish .rig__beam::before { background-image: url("../img/stage-soft.webp"); }
.pool { position: absolute; pointer-events: none; aspect-ratio: 5 / 1; background: radial-gradient(closest-side, rgba(var(--key-rgb), .3), rgba(var(--key-rgb), .1) 50%, transparent); }

/* A picture standing in the light: a screen's corner, a hairline edge, the light along its top, its shadow on the
   floor. */
.plate-mark, .pcard__cover, .scard__cover, .acard__cover, .shcard__media, .mega__cover, .gallery__item, .media-frame, .htop__window, .tcard__media, .window--shot, .ahero__shot {
  border-radius: var(--r-frame);
  box-shadow: var(--frame-shadow);
}
.plate-mark::after, .pcard__cover::after, .scard__cover::after, .acard__cover::after, .shcard__media::after, .gallery__item::after, .media-frame::after, .htop__window::after, .tcard__media::after, .window--shot::after, .ahero__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(var(--key-rgb), .3), inset 0 0 0 1px rgba(255, 255, 255, .05);
}

/* --------------------------------------------------------------------------
   4. Type
   -------------------------------------------------------------------------- */
.display { font-family: var(--font-title); font-weight: 400; font-size: clamp(3rem, 1.2rem + 6vw, 7.2rem); line-height: .92; letter-spacing: -.014em; color: var(--text); }
.h1, .page-head__title { font-size: clamp(2.7rem, 1.4rem + 4.2vw, 5.4rem); font-weight: 400; line-height: .98; letter-spacing: -.014em; }
.h2, .section-head__title { font-size: clamp(2.2rem, 1.45rem + 2.4vw, 3.7rem); font-weight: 400; line-height: 1.02; letter-spacing: -.01em; }
.h3 { font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem); font-weight: 400; letter-spacing: -.006em; line-height: 1.12; }
.h4 { font-family: var(--font-title); font-size: 1.3rem; font-weight: 400; }
.lead { font-size: clamp(1.07rem, .99rem + .36vw, 1.3rem); line-height: 1.55; color: var(--text-2); }
.muted { color: var(--text-3); }
.soft { color: var(--text-2); }
/* Small figures: versions, counts, dates. */
.mono { font-family: var(--font-legend); letter-spacing: .06em; font-variant-numeric: tabular-nums; }

.prose { color: var(--text-2); font-size: 1.04rem; line-height: 1.72; max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3, .prose h4 { color: var(--text); margin-top: 1.9em; }
.prose h2 { font-size: 1.9rem; }
.prose h3 { font-size: 1.45rem; }
.prose h4 { font: 500 11.5px/1.4 var(--font-legend); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.prose strong { color: var(--text); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--gold); }
.prose blockquote { margin: 1.6em 0; padding: 2px 0 2px 22px; border-left: 1px solid var(--gold); font: italic 400 1.3rem/1.45 var(--font-title); color: var(--text); }
.prose hr { margin: 2.2em 0; }

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(860px + var(--gutter) * 2); }
.container--mid { max-width: calc(1080px + var(--gutter) * 2); }
.section { padding-block: var(--section) 0; }
.section--tight { padding-block: clamp(56px, 7vw, 96px) 0; }
main { display: block; min-height: 60vh; overflow-x: clip; }
/* Inner pages end on the stage floor: it runs under the last things on the page up to the front edge (the foot), so they
   stand on it, with smoke low over it. (Pages that are one place already have their own.) */
main:has(> .page-floor) { position: relative; isolation: isolate; padding-bottom: clamp(80px, 8vw, 130px); }
main > .page-floor { --floor-h: clamp(300px, 30vw, 440px); top: auto; height: calc(var(--floor-h) + 140px); }
main:has(> .page-floor) + .site-footer { margin-top: 0; }
main:has(.page-set, .auth__set) > .page-floor { display: none; }
.page { padding-top: calc(var(--nav-h) + clamp(24px, 4vw, 56px)); }
/* A page that is one place — checkout, an order, purchases, a donation, an error — is a stage too: its title in the
   middle of two crossing lamps, blue shadow behind, the floor at the foot of the page running up to its front edge. */
:is(.page, .error-page):has(> .page-set) { --floor-h: clamp(200px, 22vw, 320px); position: relative; isolation: isolate; padding-bottom: clamp(150px, 16vw, 240px); }
:is(.page, .error-page):has(> .page-set)::before { content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none; background: radial-gradient(50% 60% at 40% 30%, rgba(var(--night-rgb), .32), transparent 72%); }
:is(.checkout__title, .purchases .h1, .order .h1, .error-page .h1, .page-head--album .page-head__title) { width: fit-content; }
.stack > * + * { margin-top: var(--stack, 16px); }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 280px)), 1fr)); }
@media (max-width: 1080px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } }

/* A section's head: its label on its mark, the title under it at the left — lit from above as you reach it. */
.section-head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 40px; margin-bottom: clamp(30px, 3.8vw, 50px); flex-wrap: wrap; }
.section-head__text { position: relative; flex: 1 1 560px; }
.section-head .eyebrow { margin-bottom: 20px; }
.section-head__title { max-width: 24ch; }
.section-head__lead { margin-top: 16px; color: var(--text-2); font-size: clamp(1.02rem, .97rem + .3vw, 1.16rem); max-width: 60ch; }

/* An inner page's head: a lamp above the title, its beam falling across it. */
/* Every inner page opens on the stage: two lamps hung under the strip crossing on its title (the script hangs and aims
   them), blue shadow behind it, the floor at its foot running away into the dark, smoke low over the floor. */
.page-head { padding: calc(var(--nav-h) + clamp(52px, 8vw, 112px)) 0 clamp(44px, 6vw, 84px); position: relative; isolation: isolate; }
.page-head::before { content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none; background: radial-gradient(50% 64% at var(--head-x, 30%) 44%, rgba(var(--night-rgb), .36), transparent 72%); }
.page-head__text { width: fit-content; max-width: 100%; }
/* The floor is where things stand, at the foot of the page; the head keeps its smoke drifting through the light. */
.page-head__set .floor { display: none; }
.page-head__set .stage-set__smoke { --smoke-top: 48%; --smoke-h: 52%; }
main > :is(.page-head, .phero, .ahero) ~ section { position: relative; }
.ahero .ahero__set, .phero__shot .phero__set { bottom: -320px; }
:is(.ahero__set, .phero__set) .floor { --floor-h: calc(var(--stage-floor, 260px) + 320px); -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 96%); mask-image: linear-gradient(180deg, #000 52%, transparent 96%); }
:is(.ahero__set, .phero__set) .stage-set__smoke { --smoke-top: calc(100% - var(--stage-floor, 260px) - 410px); }
.ahero { --stage-floor: clamp(200px, 20vw, 290px); }
.phero__shot { --stage-floor: clamp(220px, 22vw, 340px); }
.page-lamp--left { --arrive: lamp-finds-from-left; }
.page-lamp--right { --arrive: lamp-finds-from-right; --a: .14; }
.page-head, .phero, .ahero { overflow-x: clip; }
.page-head > .container, .phero > .container, .ahero > .container { position: relative; z-index: 1; }
.page-lamp { --x: calc(max(var(--gutter), (100vw - var(--container)) / 2) + min(22vw, 320px)); --rig-top: calc(var(--nav-h) + var(--batten-h)); --aim: 12deg; --spread: 20deg; --a: .17; --throw: 64vh; z-index: 0; }
.page-lamp--shot { --x: 76%; --aim: -6deg; --spread: 18deg; --a: .08; --throw: 72vh; }
@media (max-width: 900px) { .page-lamp { --x: 80%; --aim: 22deg; } .page-lamp--shot { display: none; } }
@media (max-width: 700px) { .page-lamp--left { display: none; } }
.page-head .eyebrow { margin-bottom: 26px; }
.page-head__lead { margin-top: 22px; max-width: 62ch; color: var(--text-2); font-size: clamp(1.06rem, .99rem + .36vw, 1.28rem); line-height: 1.55; }

/* --------------------------------------------------------------------------
   6. Buttons, links, badges, chips, prices, filters
   -------------------------------------------------------------------------- */
/* The one thing to do is lit: gold, brighter along its top edge where the light falls. Everything else stands in the
   dark with a gold edge until you come near, and then the light comes up on it. */
.btn {
  --h: 46px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .75em;
  height: var(--h);
  padding: 0 20px;
  border: 0;
  border-radius: var(--r);
  font: 500 12px/1 var(--font-legend);
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .45s var(--ease-light), color .45s var(--ease-light), box-shadow .45s var(--ease-light), transform .15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn .icon { flex: none; width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.btn:hover .icon:last-child:not(:first-child) { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--sm { --h: 36px; padding: 0 14px; font-size: 11px; letter-spacing: .16em; }
.btn--lg { --h: 54px; padding: 0 26px; font-size: 12.5px; }
.btn--block { width: 100%; }
.btn--gold { background: linear-gradient(180deg, #f1ca76, var(--gold) 55%, #dcab50); color: var(--gold-ink); box-shadow: inset 0 1px 0 rgba(255, 246, 220, .75), inset 0 -1px 0 rgba(90, 60, 10, .35); }
.btn--gold:hover { background: linear-gradient(180deg, #fadb98, var(--gold-hi) 55%, #eabd64); }
.btn--glass, .btn--dark, .btn--line { color: var(--gold-hi); background: rgba(10, 12, 17, .72); box-shadow: inset 0 0 0 1px var(--rule-2), inset 0 1px 0 rgba(var(--key-rgb), .14); }
.btn--glass:hover, .btn--dark:hover, .btn--line:hover { color: var(--white); background: linear-gradient(180deg, rgba(var(--gold-rgb), .2), rgba(var(--gold-rgb), .05)); box-shadow: inset 0 0 0 1px var(--gold), inset 0 1px 0 rgba(var(--key-rgb), .5); }
.btn--ghost { color: var(--text-2); padding-inline: 12px; }
.btn--ghost:hover { color: var(--gold-hi); }
.btn--danger { color: var(--bad); box-shadow: inset 0 0 0 1px rgba(255, 157, 138, .5); }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }
.btn.is-busy { pointer-events: none; }
.btn.is-busy::after { content: ""; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
.btn.is-static { pointer-events: none; }
/* In the cart: its lamp is on. */
.btn.is-in-cart { color: var(--gold-hi); background: rgba(var(--gold-rgb), .12); box-shadow: inset 0 0 0 1px var(--gold); }
.btn.is-in-cart::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff4d6, var(--gold) 55%, var(--gold-lo)); box-shadow: 0 0 7px rgba(var(--gold-rgb), .55); }

/* Links that go somewhere: a credit over a gold rule. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 5px;
  font: 500 11.5px/1.2 var(--font-legend);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  border-bottom: 1px solid var(--rule-3);
  transition: color var(--dur), border-color var(--dur);
}
.link-arrow .icon { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover { color: var(--gold-hi); border-color: var(--gold-hi); }
.link-arrow:hover .icon { transform: translateX(3px); }

.icon { flex: none; }
.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r);
  color: var(--text-2);
  transition: color var(--dur), background-color var(--dur), box-shadow var(--dur);
}
.icon-btn:hover { color: var(--gold-hi); background: rgba(var(--gold-rgb), .08); }
.icon-btn:disabled { opacity: .35; cursor: default; }

/* Badges: small printed labels. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--r-xs);
  font: 500 9.5px/1 var(--font-legend);
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge--gold { background: var(--gold); color: var(--gold-ink); }
.badge--frost { color: var(--fill); box-shadow: inset 0 0 0 1px rgba(var(--fill-rgb), .45); background: rgba(6, 7, 10, .7); }
.badge--muted { color: var(--text-2); background: rgba(6, 7, 10, .7); box-shadow: inset 0 0 0 1px var(--line-2); }
.badge--line { color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--rule-3); background: rgba(6, 7, 10, .7); }
.badge--ok { color: var(--ok); box-shadow: inset 0 0 0 1px rgba(159, 224, 184, .45); background: rgba(6, 7, 10, .7); }
.badge--glass, .badge--plain { color: var(--text); background: rgba(6, 7, 10, .82); box-shadow: inset 0 0 0 1px var(--line-2); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-xs); font: 500 10px/1 var(--font-legend); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; }

/* Prices are set in the titles' Didot, as the figures in a programme. */
.price { font-family: var(--font-title); font-weight: 400; color: var(--text); font-variant-numeric: lining-nums; letter-spacing: .01em; }
.price-was { font-family: var(--font-title); color: var(--text-4); font-size: .9em; }
.price-prefix, .price-unit { color: var(--text-3); font-size: .9em; }

/* Filters: labels to choose from; the one chosen has its lamp on. */
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filter {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r);
  font: 500 11px/1 var(--font-legend);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: color .45s var(--ease-light), box-shadow .45s var(--ease-light), background-color .45s var(--ease-light);
}
.filter:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-3); }
.filter[aria-current="true"], .filter.is-active { color: var(--gold-hi); background: linear-gradient(180deg, rgba(var(--gold-rgb), .14), rgba(var(--gold-rgb), .04)); box-shadow: inset 0 0 0 1px var(--rule-2), inset 0 1px 0 rgba(var(--key-rgb), .3); }
.filter[aria-current="true"]::before, .filter.is-active::before { content: ""; width: 6px; height: 6px; margin-left: -2px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff4d6, var(--gold) 55%, var(--gold-lo)); box-shadow: 0 0 6px rgba(var(--gold-rgb), .55); }
.filter__count { font: 400 12px/1 var(--font-title); letter-spacing: 0; opacity: .75; }

/* --------------------------------------------------------------------------
   7. Panels and messages
   -------------------------------------------------------------------------- */
/* A panel: a flat stand lit from above — a little lighter at its top, with the light along its upper edge. */
.card, .panel { background: var(--panel); border: 1px solid var(--line); border-top-color: rgba(var(--key-rgb), .16); border-radius: var(--r-lg); }
.card--pad { padding: clamp(22px, 3vw, 34px); }

.notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r); background: rgba(255, 255, 255, .03); border: 1px solid var(--line-2); color: var(--text-2); font-size: 14.5px; }
.notice + .notice { margin-top: 10px; }
.notice .icon { margin-top: 2px; color: var(--gold); }
.notice--ok { border-color: rgba(159, 224, 184, .35); color: #d9f3e3; }
.notice--ok .icon { color: var(--ok); }
.notice--warn { border-color: var(--rule-2); color: #f6e3bb; }
.notice--warn .icon { color: var(--gold-hi); }
.notice--error { border-color: rgba(255, 157, 138, .45); color: #ffd9d0; }
.notice--error .icon { color: var(--bad); }

.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 250; display: grid; gap: 10px; width: min(560px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--r); background: var(--ink-1); border: 1px solid var(--line-2); border-top-color: rgba(var(--key-rgb), .25); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9); font-size: 14.5px; color: var(--text); animation: toast-in .45s var(--ease) both; }
.toast::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff4d6, var(--gold) 55%, var(--gold-lo)); box-shadow: 0 0 7px rgba(var(--gold-rgb), .55); }
.toast--warn::before { background: var(--gold-hi); }
.toast--error::before { background: var(--bad); box-shadow: 0 0 7px rgba(255, 157, 138, .5); }
.toast.is-leaving { animation: toast-out .3s var(--ease) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Empty: a place on the floor marked out with tape at its corners, waiting for something to stand there. */
.empty, .join-card {
  --tape: rgba(var(--gold-rgb), .7);
  background:
    linear-gradient(var(--tape), var(--tape)) 0 0 / 26px 3px no-repeat, linear-gradient(var(--tape), var(--tape)) 0 0 / 3px 26px no-repeat,
    linear-gradient(var(--tape), var(--tape)) 100% 0 / 26px 3px no-repeat, linear-gradient(var(--tape), var(--tape)) 100% 0 / 3px 26px no-repeat,
    linear-gradient(var(--tape), var(--tape)) 0 100% / 26px 3px no-repeat, linear-gradient(var(--tape), var(--tape)) 0 100% / 3px 26px no-repeat,
    linear-gradient(var(--tape), var(--tape)) 100% 100% / 26px 3px no-repeat, linear-gradient(var(--tape), var(--tape)) 100% 100% / 3px 26px no-repeat;
}
.empty { position: relative; isolation: isolate; text-align: center; padding: clamp(48px, 7vw, 88px) 24px; display: grid; justify-items: center; gap: 14px; }
/* An empty place is lit and waiting: light falling into the taped-out place from above and pooling on the floor in it. */
.empty::before { content: ""; position: absolute; z-index: -1; left: 14%; right: 14%; top: 0; bottom: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 238, 210, .08), rgba(255, 238, 210, .025) 70%, transparent); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); }
.empty::after { content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -6%; height: 40%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 238, 210, .18), rgba(var(--key-rgb), .06) 55%, transparent); }
.empty__title { font: 400 1.8rem/1.2 var(--font-title); color: var(--text); }
.empty__text { color: var(--text-2); max-width: 52ch; }

.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 44px; }
.pager__step { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r); font: 500 11px/1 var(--font-legend); letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.pager__step:hover { color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--rule-3); }
.pager__count { font: 400 15px/1 var(--font-title); color: var(--text-3); }

.stars { display: inline-flex; gap: 2px; color: var(--gold); }

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 20px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.form-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 8px; align-content: start; }
.field--narrow { max-width: 160px; }
.field__label { display: flex; justify-content: space-between; gap: 12px; font: 500 10.5px/1.4 var(--font-legend); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.field__label a { font: 400 13px/1.4 var(--font-text); letter-spacing: 0; text-transform: none; }
.field__hint { font-size: 13.5px; color: var(--text-3); }
.field__error { font-size: 13.5px; color: var(--bad); }
.input, .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .field select, .field textarea, .select, .textarea {
  width: 100%;
  height: 48px;
  padding: 0 15px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: rgba(255, 255, 255, .03);
  color: var(--text);
  font-size: 16px;
  transition: border-color var(--dur), box-shadow var(--dur), background-color var(--dur);
  appearance: none;
  -webkit-appearance: none;
}
.field textarea, .textarea { height: auto; min-height: 150px; padding: 13px 15px; line-height: 1.55; resize: vertical; }
.field select, .select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23e8b95e' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 17px center;
}
.field select option { background: var(--ink-1); color: var(--text); }
.input::placeholder, .field input::placeholder, .field textarea::placeholder { color: #737b89; }
.input:hover, .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-3); }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); background-color: rgba(255, 255, 255, .045); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .16); }
.field--error input, .field--error textarea, .field--error select { border-color: rgba(255, 157, 138, .7); }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; color: var(--text-2); }
.check input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); border: 1px solid var(--rule-3); background: rgba(255, 255, 255, .03); transition: background-color var(--dur), border-color var(--dur); }
.check input::after { content: ""; width: 9px; height: 5px; border: 2px solid var(--gold-ink); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .2s var(--ease); }
.check input:checked { background: var(--gold); border-color: var(--gold); }
.check input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }

/* Choices (services, licences): each with its lamp, which comes on when chosen. */
.choices { display: grid; gap: 10px; }
.choices--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.choice { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r); border: 1px solid var(--line-2); background: rgba(255, 255, 255, .025); cursor: pointer; transition: border-color .45s var(--ease-light), background-color .45s var(--ease-light); }
.choice:hover { border-color: var(--line-3); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__mark { position: relative; width: 12px; height: 12px; margin-top: 5px; flex: none; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a4150, #11151c 70%); box-shadow: 0 0 0 1px var(--line-3); transition: background .45s var(--ease-light), box-shadow .45s var(--ease-light); }
.choice:has(input:checked) { border-color: var(--rule-2); background: linear-gradient(180deg, rgba(var(--gold-rgb), .1), rgba(var(--gold-rgb), .03)); }
.choice input:checked + .choice__mark { background: radial-gradient(circle at 40% 35%, #fff4d6, var(--gold) 55%, var(--gold-lo)); box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .6), 0 0 9px rgba(var(--gold-rgb), .6); }
.choice input:focus-visible + .choice__mark { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.choice__body { display: grid; gap: 3px; flex: 1; min-width: 0; }
.choice__title { font-weight: 600; color: var(--text); }
.choice__text { font-size: 14px; color: var(--text-3); }
.choice__aside { margin-left: auto; text-align: right; font-size: 14px; white-space: nowrap; }
.choice--compact { padding: 12px 14px; align-items: center; }
.choice--compact .choice__mark { margin-top: 0; }

/* --------------------------------------------------------------------------
   9. The strip at the top, and the follow spot that finds where you are
   -------------------------------------------------------------------------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--nav-h); background: rgba(6, 7, 9, .96); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--batten-h); pointer-events: none; background: var(--batten); box-shadow: inset 0 -1px 0 rgba(var(--key-rgb), .2), 0 7px 14px -7px #000; }
.nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; height: 100%; gap: 20px; padding-inline: clamp(16px, 2.6vw, 40px); }
.brand { display: inline-flex; align-items: center; gap: 13px; justify-self: start; align-self: center; }
.brand__mark { height: 31px; width: auto; }
.brand__word { height: 10px; width: auto; opacity: .95; }

/* The sections' names, and a follow spot over them: a beam from the rig above the strip down onto the page you are
   on. It slides to a name the pointer finds and back; on a new page it slides in from where it was on the last one.
   (The script places it; without the script the page you are on has its mark under it.) */
.spot-nav { position: relative; display: flex; align-items: stretch; justify-content: center; height: 100%; }
.spot-nav__links { position: relative; z-index: 1; display: flex; align-items: stretch; gap: clamp(6px, 1.6vw, 28px); }
.spot-nav__link { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 0 12px; font: 500 11.5px/1 var(--font-legend); letter-spacing: .26em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; transition: color .6s var(--ease-light); }
.spot-nav__link:hover, .spot-nav__link[aria-expanded="true"] { color: var(--white); }
.spot-nav__link[aria-current="page"] { color: var(--gold-hi); }
.spot-nav__link .icon { width: 11px; height: 11px; margin-right: -4px; opacity: .7; transition: transform .3s var(--ease); }
.spot-nav__link[aria-expanded="true"] .icon { transform: rotate(180deg); }
.spot-nav__light { position: absolute; z-index: 0; left: 0; top: 0; bottom: 0; width: var(--w, 120px); pointer-events: none; opacity: 0; transform: translateX(var(--x, 0px)); transition: transform 1.05s cubic-bezier(.3, .72, .14, 1), width 1.05s cubic-bezier(.3, .72, .14, 1), opacity .7s var(--ease-light); }
.spot-nav.is-lit .spot-nav__light { opacity: 1; }
.spot-nav.is-placing .spot-nav__light { transition: none; }
.spot-nav__light::before { content: ""; position: absolute; inset: -1px -14px 0; background: linear-gradient(180deg, rgba(var(--key-rgb), .02), rgba(var(--key-rgb), .13)); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent); mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent); }
.spot-nav__light::after { content: ""; position: absolute; left: -6px; right: -6px; bottom: -7px; height: 16px; background: radial-gradient(closest-side, rgba(var(--key-rgb), .5), rgba(var(--key-rgb), .12) 55%, transparent); }
.spot-nav:not(.is-lit) .spot-nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 14px; width: 12px; height: 10px; margin-left: -6px; background: linear-gradient(var(--gold), var(--gold)) 0 0 / 100% 3px no-repeat, linear-gradient(var(--gold), var(--gold)) 50% 0 / 3px 100% no-repeat; }

.nav__actions { display: flex; align-items: center; gap: 4px; justify-self: end; }
.nav__cta { margin-left: 10px; }
.nav__toggle { display: none; }
.count-dot { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--gold); color: var(--gold-ink); font: 500 10px/17px var(--font-legend); text-align: center; }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--rule-3); font: 400 14px/1 var(--font-title); }

@media (max-width: 1240px) {
  .spot-nav--wide { display: none; }
  .nav:has(.spot-nav--wide) { grid-template-columns: 1fr auto; }
  .nav:has(.spot-nav--wide) .nav__toggle { display: inline-grid; }
  .nav:has(.spot-nav--wide) .nav__cta { display: none; }
}
@media (max-width: 1020px) {
  .nav { grid-template-columns: 1fr auto; }
  .spot-nav, .nav__cta { display: none; }
  .nav__toggle { display: inline-grid; }
  .mega { display: none; }
}
@media (max-width: 520px) {
  .brand__word { display: none; }
  .nav__actions [data-hide-mobile] { display: none; }
}

/* The product menu: let down from the strip, lit along its top. */
.mega {
  position: absolute;
  top: calc(var(--nav-h) - 1px);
  left: 50%;
  width: min(1040px, calc(100vw - 32px));
  transform: translate(-50%, -6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .3s var(--ease), visibility .25s;
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 16px;
  background: var(--ink-1);
  border: 1px solid var(--line-2);
  border-top: 1px solid rgba(var(--key-rgb), .25);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9);
}
.mega.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; }
.mega__products { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px 14px; }
.mega__item { display: grid; grid-template-rows: auto 1fr; gap: 12px; padding: 6px; }
.mega__cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-2); }
.mega__cover img, .mega__cover svg { width: 100%; height: 100%; object-fit: cover; filter: brightness(.86); transition: transform 1s var(--ease), filter .6s var(--ease-light); }
.mega__item:hover .mega__cover img, .mega__item:hover .mega__cover svg { transform: scale(1.03); filter: brightness(1.03); }
.mega__body { display: grid; gap: 4px; }
.mega__name { font: 400 1.35rem/1.1 var(--font-title); color: var(--text); }
.mega__item:hover .mega__name { color: var(--gold-hi); }
.mega__tag { font-size: 13px; color: var(--text-3); line-height: 1.45; }
.mega__aside { padding: 20px; border-left: 1px solid var(--line); display: grid; align-content: space-between; gap: 18px; }
.mega__aside p { font-size: 14px; color: var(--text-2); }
.mega__links { display: grid; }
.mega__links a { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-top: 1px solid var(--line); font: 500 11px/1.2 var(--font-legend); letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); }
.mega__links a:hover { color: var(--gold-hi); }

/* Phones: the sections listed big, in Didot; the page you are on stands on its mark. */
.sheet { position: fixed; inset: 0; z-index: 99; padding: var(--nav-h) 0 0; overflow-y: auto; background-color: var(--ink); opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s; }
.sheet.is-open { opacity: 1; visibility: visible; }
.sheet__panel { display: flex; flex-direction: column; gap: 30px; min-height: 100%; padding: 22px var(--gutter) 30px; transform: translateY(-8px); transition: transform .45s var(--ease); }
.sheet.is-open .sheet__panel { transform: none; }
.sheet__links { display: grid; }
.sheet__link { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font: 400 clamp(1.9rem, 8vw, 2.5rem)/1.1 var(--font-title); color: var(--text); }
.sheet__link .mark { opacity: .25; }
.sheet__link[aria-current="page"] { color: var(--gold-hi); }
.sheet__link[aria-current="page"] .mark { opacity: 1; }
.sheet__actions { display: grid; gap: 12px; margin-top: auto; }

/* Search: a panel let down over the page. */
.search-overlay { position: fixed; inset: 0; z-index: 150; background: rgba(4, 5, 7, .86); display: grid; align-items: start; justify-items: center; padding: min(14vh, 120px) 16px 24px; opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s; }
.search-overlay.is-open { opacity: 1; visibility: visible; }
.search-box { width: min(720px, 100%); background: var(--ink-1); border: 1px solid var(--line-2); border-top-color: rgba(var(--key-rgb), .3); border-radius: var(--r-lg); box-shadow: 0 40px 100px -40px #000; overflow: hidden; transform: translateY(-8px); transition: transform .35s var(--ease); }
.search-overlay.is-open .search-box { transform: none; }
.search-box__field { display: flex; align-items: center; gap: 12px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--line); color: var(--gold); }
.search-box__field input { flex: 1; height: 64px; background: none; border: 0; font: 400 1.4rem/1 var(--font-title); color: var(--text); outline: none; }
.search-box__field input::placeholder { color: var(--text-4); }
.search-box__results { max-height: min(60vh, 520px); overflow-y: auto; padding: 8px; }
.search-box__results:empty { display: none; }
.search-hit { display: flex; align-items: center; gap: 14px; padding: 9px 10px; border-radius: var(--r); color: var(--text); }
.search-hit:hover, .search-hit.is-active { background: rgba(var(--gold-rgb), .08); }
.search-hit__thumb { width: 64px; height: 42px; border-radius: var(--r-sm); background: var(--ink-2); flex: none; overflow: hidden; box-shadow: 0 0 0 1px var(--line-2); }
.search-hit__thumb img { width: 100%; height: 100%; object-fit: cover; }
.search-hit__text { display: grid; min-width: 0; }
.search-hit__title { font: 400 1.12rem/1.25 var(--font-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-hit__sub { font-size: 13px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-hit__type { margin-left: auto; font: 500 9.5px/1 var(--font-legend); color: var(--gold); text-transform: uppercase; letter-spacing: .22em; }
.search-box__empty { padding: 24px 16px; color: var(--text-3); font-size: 14.5px; }

/* --------------------------------------------------------------------------
   10. The foot of the page: the front edge of the stage, and the ghost light
   -------------------------------------------------------------------------- */
/* Its top edge is the stage's front edge, the footlights' glow rising off it. At the very end one small lamp is left
   burning over the monogram — the ghost light a theatre leaves on its empty stage. */
.site-footer { position: relative; margin-top: var(--section); padding: clamp(56px, 7vw, 88px) 0 30px; background: linear-gradient(180deg, #0a0d13, var(--ink) 70%); border-top: 1px solid rgba(var(--gold-rgb), .3); }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 90px; pointer-events: none; background: linear-gradient(0deg, rgba(var(--key-rgb), .07), transparent); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(auto-fit, minmax(170px, 1fr)); gap: 44px 36px; }
.footer-brand { display: grid; gap: 20px; align-content: start; }
.footer-brand p { color: var(--text-2); font-size: 15px; max-width: 36ch; }
.footer-col .eyebrow { margin-bottom: 18px; }
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-col a { color: var(--text-2); font-size: 15px; transition: color var(--dur); }
.footer-col a:hover { color: var(--gold-hi); }
.footer-contact { display: grid; gap: 8px; font-size: 15px; color: var(--text-2); }
.footer-contact a:hover { color: var(--gold-hi); }
.socials { display: flex; gap: 6px; flex-wrap: wrap; }
.socials a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); transition: color var(--dur), box-shadow var(--dur); }
.socials a:hover { color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--rule-3); }
.footer-bottom { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--text-3); }
.ghost-light { position: relative; display: grid; place-items: center; width: 56px; height: 56px; flex: none; }
.ghost-light::before { content: ""; position: absolute; inset: -34px; pointer-events: none; background: radial-gradient(closest-side, rgba(var(--key-rgb), .2), rgba(var(--key-rgb), .06) 50%, transparent); }
.ghost-light img { position: relative; width: 38px; height: auto; }
.colophon { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-right: auto; }
.colophon__place { font: 500 10.5px/1.6 var(--font-legend); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-bottom a:hover { color: var(--text); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }

/* Background audio */
.audio-toggle { position: fixed; left: 18px; bottom: 18px; z-index: 90; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-1); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); transition: color var(--dur), box-shadow var(--dur); }
.audio-toggle:hover { color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--rule-3); }
.audio-toggle__on { display: none; }
.audio-toggle[aria-pressed="true"] .audio-toggle__on { display: block; color: var(--gold-hi); }
.audio-toggle[aria-pressed="true"] .audio-toggle__off { display: none; }

/* --------------------------------------------------------------------------
   11. Motion — the wall at the top always runs; the follow spot glides between pages; with the scroll things are
       brought into the light, turn to face you and go back into the dark (section 28); panels lean towards the mouse.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   12. The top of the home page — the stage before the show
   The first screen is the stage itself. At the back the wall of plugin
   pictures runs like a screen behind the set (always, whatever the mouse
   does), in blue shadow. Two lamps hang over the front: one lights the deal
   on the left — FREE, the free bundle's pictures, three steps, Register — and
   one FrozenArt Access and its download on the right. All products waits at
   the foot.
   ========================================================================== */
.htop { position: relative; padding: var(--nav-h) 0 0; --wall-gap: clamp(14px, 1.4vw, 22px); --deal-x: 31%; --app-x: 72%; }
.htop__plate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: max(560px, calc(100svh - var(--nav-h)));
  padding: clamp(18px, 3.2vh, 46px) 0 0;
  background: radial-gradient(120% 90% at 50% 0%, #0b1424 0%, #070a10 55%, var(--ink) 100%);
}

.htop__wall { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* The wall as a whole shifts a little against the pointer — further back than the two sides, so it moves the other way —
   while it keeps sliding on its own (the script moves it). */
.htop__pan { position: absolute; inset: 0; perspective: 1700px; }
/* On arrival the wall comes up out of the dark, from deep behind the stage. (Individual properties, so the belts can
   move with transform at the same time.) */
.motion-ok .htop__wall { animation: wall-in 2.05s cubic-bezier(.16, 1, .3, 1) .05s both; }
@keyframes wall-in { from { opacity: 0; translate: 0 0 -520px; rotate: x 9deg; } to { opacity: 1; translate: 0 0 0; rotate: x 0deg; } }
.htop__plane {
  position: absolute;
  opacity: .72;
  left: 50%;
  top: 50%;
  width: 170%;
  display: grid;
  gap: var(--wall-gap);
  translate: -40% -54%;
  /* The wall's angle. The pointer never turns it; it only shifts the whole wall a little (.htop__pan). */
  --rx: 24deg;
  --ry: -12deg;
  --rz: -9deg;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
}
/* Each tile keeps the gap on its right, so half a belt is exactly one turn and the loop has no jump. */
.htop__belt { display: flex; width: max-content; animation: htop-belt 80s linear infinite; }
.htop__row--0 { scale: .9; }
.htop__row--2 { scale: 1.1; }
.htop__row--1 .htop__belt { animation-direction: reverse; animation-duration: 95s; }
.htop__row--2 .htop__belt { animation-duration: 110s; }
.htop:not(.is-moving) .htop__belt, .htop.is-paused .htop__belt { animation-play-state: paused; }
@keyframes htop-belt { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.htop__tile {
  position: relative;
  flex: none;
  width: clamp(260px, 23vw, 420px);
  margin-right: var(--wall-gap);
  aspect-ratio: 16 / 10;
  border-radius: var(--r-frame);
  overflow: hidden;
  background: var(--ink-2);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 22px 40px -24px rgba(0, 0, 0, .85);
}
.htop__tile img, .htop__svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.htop__tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4, 8, 16, .86), rgba(4, 8, 16, .3) 48%); }
.htop__tile-name { position: absolute; z-index: 1; left: 14px; bottom: 12px; font: 500 10px/1 var(--font-legend); letter-spacing: .22em; text-transform: uppercase; color: rgba(242, 238, 228, .82); }
/* The wall is behind the set, in blue shadow: darkest in the middle where the two sides stand, its pictures brighter
   towards the edges; at the foot it goes into the black of the floor. */
.htop__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(78% 68% at 50% 52%, rgba(5, 9, 17, .9) 0%, rgba(6, 13, 26, .72) 58%, rgba(9, 20, 40, .48) 100%),
    linear-gradient(0deg, var(--ink) 0%, rgba(6, 7, 9, .7) 16%, transparent 38%),
    linear-gradient(180deg, rgba(6, 7, 9, .7) 0%, transparent 16%);
}
/* The lamps over the front, hung from the rig under the strip: two over each side — one from over the middle of the
   stage, one from over the side's outer edge — crossing on it, so the words and pictures of each side always stand in
   the middle of their light. The script hangs and aims them from where the sides are laid out (these places suit a
   1440 × 900 screen). With a mouse they follow the pointer only a touch, as the sides do, so the light stays on them. */
.htop__rig { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.htop__lamp { --throw: calc(100svh - var(--nav-h) - 70px); --spread: 20deg; --follow: -4deg; }
.htop__lamp--deal-fill { --x: 15%; --aim: -31deg; --spread: 19deg; --a: .12; --arrive: lamp-finds-from-left; --leave: lamp-swings-off-left; }
.htop__lamp--deal { --x: 46%; --aim: 31deg; --a: .19; --arrive: lamp-finds-from-right; --leave: lamp-swings-off-left; }
.htop__lamp--app { --x: 57%; --aim: -31deg; --a: .17; --arrive: lamp-finds-from-left; --leave: lamp-swings-off-right; }
.htop__lamp--app-fill { --x: 88%; --aim: 31deg; --spread: 19deg; --a: .11; --arrive: lamp-finds-from-right; --leave: lamp-swings-off-right; }
.htop__lamp .rig__follow { rotate: calc(var(--hx, 0) * var(--follow)); }
.htop__lights { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* Where their light lands: a pool on the floor under each side. */
.htop__floor { --floor-top: 70%; }
.htop__floor .floor__light { background:
  radial-gradient(26% 60% at var(--deal-x) 46%, rgba(255, 238, 210, .26), rgba(var(--key-rgb), .09) 50%, transparent 76%),
  radial-gradient(24% 56% at var(--app-x) 46%, rgba(255, 238, 210, .22), rgba(var(--key-rgb), .08) 50%, transparent 76%),
  radial-gradient(70% 160% at 50% 50%, rgba(6, 7, 9, .3), rgba(6, 7, 9, .7) 50%, rgba(6, 7, 9, .92) 85%); }
.htop__smoke { --smoke-top: 58%; --smoke-h: 36%; --smoke-a: .32; --smoke-time: 125s; --smoke-way: reverse; --breath-time: 27s; }
.htop__air { --smoke-top: 8%; --smoke-h: 66%; --smoke-a: .12; --smoke-way: normal; --smoke-time: 170s; }
/* Each side throws a soft shadow on the wall behind it, mostly away from its stronger lamp over the middle; it shifts a
   little against the pointer as the sides lean towards it. */
/* At the far sides, where a wide screen leaves room: a softbox and a strip box on stands, half in the dark — the studio
   around the stage — their light only touching the sides. */
.htop__kit { display: none; }
@media (min-width: 1680px) {
  .htop__kit { display: block; z-index: auto; opacity: .6; --s: .9; --a: .2; --throw: 760px; bottom: 6%; }
  .htop__kit--left { left: calc((100% - var(--container)) / 2 - 250px); }
  .htop__kit--right { right: calc((100% - var(--container)) / 2 - 230px); --s: .86; bottom: 8%; }
}
.htop__cast { position: absolute; top: 16%; height: 72%; pointer-events: none; background: radial-gradient(closest-side, rgba(2, 3, 6, .6), rgba(2, 3, 6, .28) 58%, transparent); translate: calc(var(--hx, 0) * -28px) 0; }
.htop__cast--deal { left: calc(var(--deal-x) - 28%); width: 50%; }
.htop__cast--app { left: calc(var(--app-x) - 18%); width: 44%; }
.htop__inner { position: relative; z-index: 2; margin-block: auto; }
.htop .announce { margin-bottom: clamp(10px, 2.2vh, 28px); }
.htop__split { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); gap: clamp(36px, 5vw, 96px); align-items: center; perspective: 1600px; }

/* Left: the deal. */
.htop__deal { min-width: 0; container-type: inline-size; }
/* FREE in Didot capitals, widely spaced like the wordmark — white, with the logo's gold as its shadow (a crisp one down
   to the right, a soft one under it); what it is, in gold, under it. */
.htop__cartouche { position: relative; display: inline-grid; justify-items: start; }
.htop__word {
  margin-right: -.14em;
  font: 400 clamp(3.4rem, min(8.2vw, 12vh), 9.2rem)/.86 var(--font-title);
  letter-spacing: .14em;
  color: var(--white);
  text-shadow: .015em .022em 0 rgba(var(--gold-rgb), .6), 0 .07em .2em rgba(var(--gold-rgb), .2);
}
.htop__model { margin-top: clamp(10px, 1.6vh, 16px); padding-left: .2em; font: 500 10px/1.2 var(--font-legend); letter-spacing: .34em; text-transform: uppercase; color: var(--gold); }

/* The free bundle: its pictures stand side by side as one piece, lit along the top, each named under it. */
.htop__bundle { position: relative; margin-top: clamp(16px, 2.4vh, 28px); width: max-content; max-width: 100%; }
.htop__strip { --unit: min(14.5vh, 190px, calc(100cqw / var(--sum, 3.8))); position: relative; display: flex; width: max-content; max-width: 100%; }
.htop__plugin { position: relative; flex: none; display: flex; flex-direction: column; width: calc(var(--unit) * var(--ar, 1.5)); color: var(--text-2); }
.htop__name { margin-top: 11px; padding-left: 2px; font: 500 10px/1.2 var(--font-legend); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .5s var(--ease-light); }
.htop__plugin:hover .htop__name { color: var(--gold-hi); }
.htop__photo { position: relative; display: block; height: var(--unit); overflow: hidden; background: var(--ink-2); box-shadow: 0 44px 64px -30px #000, 0 14px 26px -14px rgba(0, 0, 0, .6); }
.htop__plugin:first-child .htop__photo { border-radius: var(--r-frame) 0 0 var(--r-frame); }
.htop__plugin:last-child .htop__photo { border-radius: 0 var(--r-frame) var(--r-frame) 0; }
.htop__plugin:only-child .htop__photo { border-radius: var(--r-frame); }
.htop__photo::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(var(--key-rgb), .36), inset 0 0 0 1px rgba(255, 255, 255, .05); }
.htop__photo img { width: 100%; height: 100%; object-fit: cover; }
.htop__plugin + .htop__plugin .htop__photo::before { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 1px; background: rgba(0, 0, 0, .6); }

.htop__title { margin-top: clamp(16px, 2.6vh, 32px); max-width: 17ch; font: 400 clamp(2rem, min(1.3rem + 1.8vw, 4.7vh), 3.3rem)/1.02 var(--font-title); color: var(--text); }
.htop__steps { list-style: none; margin-top: clamp(12px, 1.8vh, 20px); display: grid; gap: 7px; }
.htop__steps li { display: flex; align-items: baseline; gap: 12px; color: var(--text-2); font-size: clamp(1rem, .95rem + .24vw, 1.16rem); line-height: 1.35; }
.htop__num { flex: none; width: 1.1em; text-align: left; font: 400 1.1em/1 var(--font-title); color: var(--gold); }
.htop__join { margin-top: clamp(16px, 2.6vh, 30px); }
.htop__join .htop__key { width: min(100%, 440px); }
.htop__member { display: inline-flex; align-items: center; gap: 12px; color: var(--text-2); font-size: 1.05rem; }

/* Right: FrozenArt Access, straight on, and its download. */
.htop__app { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.htop__eyebrow { margin-bottom: clamp(18px, 3vh, 30px); }
.htop__mark { width: 28px; height: auto; }
.htop__stage { width: 100%; }
.htop__window { position: relative; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 70px 120px -46px #000, 0 22px 40px -20px rgba(0, 0, 0, .65); }
.htop__window img { display: block; width: 100%; height: auto; }
.htop__get { width: 100%; margin-top: clamp(24px, 3.8vh, 42px); display: grid; gap: 12px; }
.htop__get .htop__key { width: 100%; }

/* The two big keys: Register lit gold; Download with a gold edge (lit too, once you are a member). */
.htop__key {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 7px;
  min-height: clamp(62px, 7.8vh, 80px);
  padding: 12px 22px;
  border-radius: var(--r);
  color: var(--gold-hi);
  background: rgba(10, 12, 17, .72);
  box-shadow: inset 0 0 0 1px var(--rule-2), inset 0 1px 0 rgba(var(--key-rgb), .16);
  transition: background-color .5s var(--ease-light), color .5s var(--ease-light), box-shadow .5s var(--ease-light), transform .15s var(--ease);
}
.htop__key:hover { color: var(--white); background: linear-gradient(180deg, rgba(var(--gold-rgb), .2), rgba(var(--gold-rgb), .05)); box-shadow: inset 0 0 0 1px var(--gold), inset 0 1px 0 rgba(var(--key-rgb), .5); }
.htop__key:active { transform: translateY(1px); }
.htop__key-main { display: inline-flex; align-items: center; gap: 12px; font: 500 clamp(1rem, .92rem + .3vw, 1.18rem)/1 var(--font-legend); letter-spacing: .24em; text-transform: uppercase; }
.htop__key-main .icon { flex: none; transition: transform var(--dur) var(--ease); }
.htop__key:hover .htop__key-main .icon:last-child:not(:first-child) { transform: translateX(3px); }
.htop__key-note { font-size: 13px; line-height: 1.3; color: var(--text-3); letter-spacing: 0; }
.htop__key--gold { color: var(--gold-ink); background: linear-gradient(180deg, #f1ca76, var(--gold) 55%, #dcab50); box-shadow: inset 0 1px 0 rgba(255, 246, 220, .75), inset 0 -1px 0 rgba(90, 60, 10, .35); }
.htop__key--gold:hover { color: var(--gold-ink); background: linear-gradient(180deg, #fadb98, var(--gold-hi) 55%, #eabd64); box-shadow: inset 0 1px 0 rgba(255, 246, 220, .85), inset 0 -1px 0 rgba(90, 60, 10, .35); }
.htop__key--gold .htop__key-note { color: rgba(21, 15, 3, .72); }

/* All products, at the foot of the stage: quiet until the pointer finds it. Once the page starts scrolling it lingers a
   moment, then fades away evenly; back at the top it comes back. */
.htop__foot { position: relative; z-index: 5; display: flex; justify-content: center; padding: clamp(12px, 2vh, 24px) 0 clamp(14px, 2.2vh, 26px); }
.htop__all { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; font: 500 11px/1 var(--font-legend); letter-spacing: .3em; text-transform: uppercase; color: rgba(242, 238, 228, .72); transition: opacity .8s var(--ease), translate .8s var(--ease), color var(--dur); }
.htop__all .icon { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.htop__all:hover { color: var(--gold-hi); }
.htop__all:hover .icon { transform: translateX(3px); }
.htop__all.is-away { opacity: 0; translate: 0 6px; pointer-events: none; transition: opacity 1.2s cubic-bezier(.45, .05, .55, .95) .12s, translate 1.2s cubic-bezier(.45, .05, .55, .95) .12s; }
.htop__all.is-away:focus-visible { opacity: 1; translate: 0 0; }

/* Light on the picture under the pointer (placed by the script). */
.frame__glint, .stage__glint, .tilt__glint { position: absolute; left: 0; top: 0; z-index: 8; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 240, 210, .13), rgba(255, 240, 210, .035) 55%, transparent); opacity: 0; transition: opacity .7s var(--ease); }
.frame__glint { width: 90%; aspect-ratio: 1; margin: -45% 0 0 -45%; }
.is-lit > .frame__glint { opacity: 1; }

/* Arrival, once: the lamps come up on a dimmer and swing from straight down onto their sides; FREE's letters turn in
   one after another, then the bundle's pictures; the window turns into the light, then its key. */
.motion-ok .htop__lights { animation: lamps-up 1.9s var(--ease-light) .1s backwards; }
.motion-ok .htop__rig .rig__beam { animation: lamps-up 1.7s var(--ease-light) .45s backwards; }
.motion-ok .htop__lamp .rig__aim { animation: var(--arrive) 1.6s cubic-bezier(.3, .7, .15, 1) .08s backwards; }
@keyframes lamps-up { from { opacity: 0; } }
.motion-ok .htop__cartouche { animation: rise-in 1.2s cubic-bezier(.16, 1, .3, 1) .3s backwards; }
.motion-ok .htop__plugin { animation: rise-in 1.1s cubic-bezier(.16, 1, .3, 1) calc(.45s + var(--i, 0) * .1s) backwards; }
.motion-ok .htop__title, .motion-ok .htop__steps, .motion-ok .htop__join { animation: rise-in 1.05s cubic-bezier(.16, 1, .3, 1) .65s backwards; }
.motion-ok .htop__window { animation: turn-in 1.55s cubic-bezier(.16, 1, .3, 1) .35s backwards; }
.motion-ok .htop__eyebrow, .motion-ok .htop__get { animation: rise-in 1.05s cubic-bezier(.16, 1, .3, 1) .8s backwards; }
@keyframes rise-in { from { opacity: 0; translate: 0 22px; } }
@keyframes turn-in { from { opacity: 0; transform: perspective(1400px) rotateY(-34deg) translateX(60px) scale(.92); } }
.htop__letters { display: inline-block; }
.htop__letter { display: inline-block; }
.motion-ok .htop__letter { animation: letter-turns-in 1.2s cubic-bezier(.16, 1, .3, 1) calc(.25s + var(--l) * .085s) backwards; }
@keyframes letter-turns-in { from { opacity: 0; transform: perspective(700px) rotateY(95deg); } }
/* With a mouse, the pieces of each side stand at different depths: as the side leans to the pointer, the nearer ones
   follow it further (the script passes the pointer to them). */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .htop__deal > *, .htop__app > * { translate: calc(var(--lx, 0) * var(--depth, 0) * 1px) calc(var(--ly, 0) * var(--depth, 0) * 1px); will-change: translate; }
  .htop__cartouche { --depth: 42; }
  .htop__bundle { --depth: 27; }
  .htop__title { --depth: 17; }
  .htop__steps { --depth: 10; }
  .htop__join { --depth: 6; }
  .htop__eyebrow { --depth: 31; }
  .htop__stage { --depth: 20; }
  .htop__get { --depth: 7; }
}

/* Short laptop screens: a little less air, so the whole stage stays on the first screen. */
@media (min-width: 901px) and (max-height: 840px) {
  .htop__word { font-size: min(8.2vw, 11vh); }
  .htop__strip { --unit: min(13.4vh, 190px, calc(100cqw / var(--sum, 3.8))); }
  .htop__title { font-size: min(3.3rem, 4.4vh); }
  .htop__steps { gap: 4px; }
  .htop__steps li { font-size: 1rem; }
}
@media (min-width: 901px) and (max-height: 740px) {
  .htop .announce { min-height: 34px; margin-bottom: 8px; }
  .htop__plate { padding-top: 14px; }
  .htop__word { font-size: min(8.2vw, 10vh); }
  .htop__strip { --unit: min(12vh, 190px, calc(100cqw / var(--sum, 3.8))); }
  .htop__name { margin-top: 7px; font-size: 9px; letter-spacing: .12em; }
  .htop__title { margin-top: 12px; font-size: min(3.3rem, 4vh); }
  .htop__steps li { font-size: .95rem; }
  .htop__key { min-height: 56px; padding-block: 9px; }
  .htop__foot { padding-block: 8px 12px; }
}
@media (min-width: 901px) and (max-height: 700px) {
  .htop__word { font-size: min(8.2vw, 9.2vh); }
  .htop__strip { --unit: min(10.8vh, 190px, calc(100cqw / var(--sum, 3.8))); }
  .htop__bundle { margin-top: 12px; }
  .htop__title { font-size: min(3.3rem, 3.7vh); margin-top: 10px; }
  .htop__steps { margin-top: 8px; }
  .htop__steps li { font-size: .92rem; }
  .htop__join { margin-top: 12px; }
  .htop__key { min-height: 52px; }
  .htop__model { margin-top: 6px; }
}

@media (max-width: 900px) {
  .htop { --wall-gap: 12px; }
  .htop__plate { min-height: 0; padding-top: 26px; }
  /* Narrow screens: the pictures fill the top of the stage, clearly, and fade out behind the words. Three rows of four
     pictures (each twice, for the loop) keep the moving strips short for a phone to draw. */
  .htop__plane { top: -24px; width: 260%; translate: -38% 0; --rx: 16deg; --ry: 0deg; --rz: -9deg; }
  .htop__belt > .htop__tile:nth-child(n+5):nth-child(-n+8), .htop__belt > .htop__tile:nth-child(n+13) { display: none; }
  .htop__tile { width: min(62vw, 330px); border-radius: 7px; }
  .htop__tile-name { display: none; }
  .htop__tile::after { background: linear-gradient(0deg, rgba(4, 8, 16, .5), transparent 40%); }
  .htop__shade { background: linear-gradient(180deg, rgba(5, 9, 17, .5) 0%, rgba(5, 9, 17, .42) 16%, rgba(5, 9, 17, .84) 40%, rgba(6, 7, 9, .95) 60%, var(--ink) 86%); }
  .htop__lamp--deal-fill, .htop__lamp--app-fill, .htop__lamp--app, .htop__floor { display: none; }
  .htop__smoke { --smoke-top: 20%; --smoke-h: 30%; --smoke-a: .18; }
  .htop__lamp--deal { --x: 80%; --aim: 22deg; --spread: 18deg; --throw: 70svh; }
  /* One column, in the order a visitor needs it: the deal, then the keys, then the app. */
  .htop__split { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .htop__deal, .htop__app { display: contents; }
  .htop__cartouche { order: 1; align-self: flex-start; }
  .htop__bundle { order: 2; width: auto; max-width: none; margin-inline: calc(var(--gutter) * -1); }
  .htop__title { order: 3; }
  .htop__steps { order: 4; }
  .htop__join { order: 5; }
  .htop__join .htop__key { width: 100%; }
  .htop__eyebrow { order: 6; justify-content: flex-start; text-align: left; margin: 42px 0 16px; }
  .htop__word { font-size: min(18vw, 14vh); }
  /* The pictures: a row to swipe through, from the stage's edge to its edge. */
  .htop__strip {
    --unit: min(36vw, 156px);
    width: auto;
    max-width: none;
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .htop__strip::-webkit-scrollbar { display: none; }
  .htop__plugin { scroll-snap-align: start; }
  .htop__plugin:last-child { margin-right: var(--gutter); }
  .htop__plugin:first-child .htop__photo { border-radius: 7px 0 0 7px; }
  .htop__plugin:last-child .htop__photo { border-radius: 0 7px 7px 0; }
  .htop__title { font-size: clamp(2rem, 8.6vw, 2.7rem); }
  .htop__steps li { font-size: 1rem; }
  .htop__get { order: 7; margin-top: 0; }
  .htop__stage { order: 8; margin-top: 34px; }
  .htop__key { min-height: 74px; }
}

/* The news line at the top: a label on its mark. */
.announce { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 12px; max-width: 100%; min-height: 40px; padding: 0 4px 0 14px; border-radius: var(--r); background: rgba(8, 10, 14, .86); border: 1px solid var(--line-2); border-top-color: rgba(var(--key-rgb), .22); animation: toast-in .8s var(--ease) .3s both; }
.announce__text { min-width: 0; font-weight: 500; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.announce__link { flex: none; padding: 0 6px; color: var(--gold-hi); font: 500 10.5px/1 var(--font-legend); letter-spacing: .2em; text-transform: uppercase; text-decoration: underline; text-decoration-color: rgba(var(--gold-rgb), .5); text-underline-offset: 4px; }
.announce__close { flex: none; width: 32px; height: 32px; display: grid; place-items: center; color: var(--text-3); transition: color var(--dur); }
.announce__close:hover { color: var(--text); }
@media (max-width: 760px) { .announce { margin-bottom: 2px; } .announce__text { font-size: 13px; } }
@media (max-width: 480px) { .announce__link { display: none; } }

/* ==========================================================================
   13. Plugins — brought into the light one at a time
   Each plugin stands on the floor, pictured straight on, its credits beside
   it. On a big screen the section stays put while they pass under one lamp
   (section 28): the one in the light faces you and shows its credits, the
   others wait, turned away, in the dark. Under the row, their marks on the
   floor — the one in the light is lit.
   ========================================================================== */
.toplist { position: relative; padding: clamp(60px, 7.5vw, 104px) 0 clamp(6px, 1.6vh, 20px); }
.toplist__head { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(26px, 3.6vh, 40px); }
.toplist__heading { flex: 1 1 560px; min-width: 0; }
.toplist__head .eyebrow { margin-bottom: 20px; }
.toplist__title { font: 400 clamp(2.5rem, 1.6rem + 2.8vw, 4.4rem)/1 var(--font-title); letter-spacing: -.012em; }
.toplist__lead { margin-top: 14px; max-width: 62ch; color: var(--text-2); font-size: clamp(1rem, .95rem + .2vw, 1.12rem); }
.toplist__controls { display: flex; align-items: center; gap: 20px; flex: none; }
.toplist__arrows { display: inline-flex; gap: 6px; }
.toplist__arrow { width: 46px; height: 46px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); }
.toplist__arrow:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--gold); }

.toplist__stage { position: relative; }
/* The lamp over the row (only where the row stands still and the plugins pass under it). */
.toplist__rig { display: none; }
.stage__glint { width: 64vw; max-width: 1100px; aspect-ratio: 1; margin: -32vw 0 0 -32vw; }
[data-stage].is-lit > .stage__glint { opacity: 1; }
.toplist__rail {
  --edge: max(var(--gutter), calc((100vw - var(--container)) / 2));
  position: relative;
  z-index: 1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: var(--edge);
  padding: 8px var(--edge) 18px;
  gap: 22px;
  scrollbar-width: none;
  outline: none;
}
.toplist__rail::-webkit-scrollbar { display: none; }
.toplist__rail:focus-visible .tcard.is-current .tcard__media { outline: 2px solid var(--gold-hi); outline-offset: 4px; }
.toplist__rail.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.toplist__rail.is-dragging, .toplist__rail.is-dragging * { user-select: none; }
.toplist img { -webkit-user-drag: none; }

.tcard {
  position: relative;
  flex: 0 0 auto;
  width: min(1180px, 86vw);
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr);
  gap: clamp(26px, 3.4vw, 56px);
  align-items: center;
  padding: clamp(10px, 1.2vw, 16px) 0;
  transition: opacity .8s var(--ease-light);
}
.tcard:not(.is-current) { opacity: .45; }
.tcard__media { position: relative; aspect-ratio: 16 / 10.4; overflow: hidden; background: var(--ink-2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 50px 80px -46px #000; }
.tcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.tcard__mark { position: absolute; inset: 0; display: grid; place-items: center; }
.tcard__mark img { width: 140px; height: auto; opacity: .9; }
.tcard__media > .frame__glint { width: 80%; margin: -40% 0 0 -40%; }
.tcard__cover-link { position: absolute; inset: 0; z-index: 6; }
.tcard__body { min-width: 0; padding: 4px clamp(4px, .8vw, 12px) 4px 0; }
.tcard__eyebrow { margin-bottom: 8px; flex-wrap: wrap; }
.tcard__title { font: 400 clamp(2.6rem, 1.3rem + 3vw, 4.6rem)/.96 var(--font-title); letter-spacing: -.016em; color: var(--text); }
.tcard__title a { color: inherit; }
.tcard__tagline { margin-top: 14px; max-width: 34ch; font: 500 clamp(1.08rem, .98rem + .4vw, 1.32rem)/1.32 var(--font-text); color: var(--text); }
.tcard__text { margin-top: 10px; max-width: 58ch; color: var(--text-2); font-size: 1rem; line-height: 1.58; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tcard__chips { margin-top: 16px; }
.tcard__foot { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.tcard__price { display: grid; gap: 5px; margin-right: 6px; }
.tcard__value { font: 400 2.3rem/1 var(--font-title); color: var(--text); }
.tcard__value.is-text { font-size: 1.9rem; color: var(--gold-hi); }
.tcard__value s { margin-left: 4px; font-size: .5em; color: var(--text-4); vertical-align: middle; }
.tcard__note { font: 500 9.5px/1.2 var(--font-legend); letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.tcard__buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.tcard__try { font: 500 10.5px/1.2 var(--font-legend); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); text-decoration: underline; text-decoration-color: rgba(var(--gold-rgb), .5); text-underline-offset: 5px; transition: color var(--dur); }
.tcard__try:hover { color: var(--gold-hi); }

/* The marks on the floor, one per plugin, each with its name; the one in the light is lit. */
.toplist__foot { position: relative; z-index: 2; margin-top: clamp(10px, 1.8vh, 18px); }
.toplist__marks { display: flex; flex-wrap: wrap; gap: 4px 30px; }
.toplist__mark { display: inline-flex; align-items: center; gap: 11px; min-height: 38px; font: 400 17px/1 var(--font-title); color: var(--text-3); transition: color .6s var(--ease-light); }
.toplist__mark .mark { opacity: .28; transition: opacity .6s var(--ease-light); }
.toplist__mark:hover { color: var(--text); }
.toplist__mark.is-on { color: var(--gold-hi); }
.toplist__mark.is-on .mark { opacity: 1; }

@media (max-width: 1100px) {
  .tcard { grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr); }
  .tcard__text { -webkit-line-clamp: 3; }
}
@media (max-width: 860px) {
  .toplist { padding-top: 64px; }
  .toplist__arrows { display: none; }
  .toplist__rail { --edge: var(--gutter); gap: 14px; }
  .tcard { width: 86vw; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 6px 0; align-items: start; }
  .tcard__media { border-radius: 7px; }
  .tcard__body { padding: 0 2px 6px; }
  .tcard__title { font-size: clamp(2.3rem, 10vw, 3rem); }
  .tcard__tagline { font-size: 1.06rem; margin-top: 8px; }
  .tcard__text { font-size: .95rem; margin-top: 8px; -webkit-line-clamp: 3; }
  .tcard__chips { margin-top: 12px; }
  .tcard__foot { margin-top: 16px; padding-top: 14px; gap: 10px 12px; }
  .tcard__value { font-size: 1.8rem; }
  .tcard--has-action .tcard__explore { display: none; }
  .toplist__mark-name { display: none; }
  .toplist__marks { gap: 4px 4px; }
  .toplist__mark { min-width: 38px; justify-content: center; }
}
@media (max-width: 480px) { .tcard__chips { display: none; } }

/* ==========================================================================
   14. Things standing in rows: products, studios, films, albums, shots, reviews
   No boxes: each stands on the floor — its picture, lit along the top, and
   its credits under it. The pointer brings the light up on it.
   ========================================================================== */
.toplist + .section { padding-top: clamp(60px, 7.5vw, 104px); }
/* Between the sections lower down, a strip of the rig with lamps aimed at what comes under it (the script hangs and
   aims them: data-aim), the floor it all stands on, and a little smoke in the light. */
.home-studios, .home-collab { position: relative; isolation: isolate; overflow-x: clip; }
.home-studios > .batten, .studios-pin > .batten, .home-collab > .batten, .section-lamp { z-index: -1; }
.studios-pin { position: relative; padding-block: var(--section) clamp(110px, 11vw, 170px); }
.studios-slot { display: none; }
.section-lamp { --x: calc(max(var(--gutter), (100vw - var(--container)) / 2) + min(18vw, 260px)); --aim: 10deg; --spread: 20deg; --a: .15; --throw: clamp(360px, 32vw, 470px); }
.section-lamp--right { --x: calc(100% - max(var(--gutter), (100vw - var(--container)) / 2) - min(16vw, 230px)); --aim: -12deg; --a: .12; }
@media (max-width: 760px) { .section-lamp { --x: 78%; --aim: 20deg; } .section-lamp--right { display: none; } }
.stage-set { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.stage-set__floor { --floor-top: calc(100% - var(--floor-h, 320px)); }
.stage-set__smoke { --smoke-top: calc(100% - var(--floor-h, 320px) - 90px); --smoke-h: calc(var(--floor-h, 320px) * .8); --smoke-a: .26; --smoke-time: 130s; --breath-time: 29s; }
.stage-set__air { --smoke-top: 4%; --smoke-h: 68%; --smoke-a: .1; --smoke-time: 175s; }
/* Where the floor of the last section meets the foot of the page, it runs up to the stage's front edge. */
main:has(> section:last-child > .stage-set) + .site-footer { margin-top: 0; }

/* Studios: under the head, a strip of the rig with a lamp on each studio and one on the place taped out for the next,
   each hung to one side of what it lights; the floor runs out in front of them. */
.home-studios { --floor-h: clamp(200px, 16vw, 250px); padding-block: 0; }
/* The floor under the studios is in shadow except where each lamp lands (the pools are the studios' own). */
.home-studios .stage-set__floor .floor__light { background: radial-gradient(90% 150% at 50% 0%, rgba(6, 7, 9, .34), rgba(6, 7, 9, .72) 55%, rgba(6, 7, 9, .93)); }
/* The head and the studios share one stage, the head a little above them. */
.home-studios .section-head { margin-bottom: clamp(56px, 7vw, 110px); }
/* At the sides, where there is room: a softbox on a stand lighting the first studio from the left, a strip box lighting
   the place taped out for the next from the right, their feet on the floor a little in front of them. */
.studios-row { position: relative; }
.studios-row > .kit { display: none; }
@media (min-width: 1360px) {
  .home-studios .studios-row { max-width: 1020px; margin-inline: auto; }
  .studios-row > .kit { display: block; }
  .studios-key { --s: .82; right: calc(100% + 64px); bottom: -40px; --a: .36; --throw: 560px; }
  .studios-rim { --s: .8; left: calc(100% + 30px); bottom: -24px; --a: .32; --throw: 520px; }
}
/* Each studio stands in the pool its lamp leaves on the floor, its shadow under it. */
/* Things standing in rows stand in their own pool of light, their shadow under them. */
:is(.pgrid, .sgrid, .agrid, .shgrid) > :is(.pcard, .scard, .acard, .shcard) { isolation: isolate; }
:is(.pgrid, .sgrid, .agrid, .shgrid) > :is(.pcard, .scard, .acard, .shcard)::after { content: ""; position: absolute; z-index: -1; left: -4%; right: -4%; top: calc(100% - 50px); height: 150px; pointer-events: none; background: radial-gradient(38% 14% at 50% 32%, rgba(0, 0, 0, .45), transparent 76%), radial-gradient(closest-side, rgba(255, 238, 210, .14), rgba(var(--key-rgb), .05) 55%, transparent); }
.home-studios .scard { isolation: isolate; }
.home-studios .scard::after { content: ""; position: absolute; z-index: -1; left: -16%; right: -16%; top: calc(100% - 54px); height: 170px; pointer-events: none; background: radial-gradient(38% 14% at 50% 32%, rgba(0, 0, 0, .5), transparent 76%), radial-gradient(closest-side, rgba(255, 238, 210, .22), rgba(var(--key-rgb), .08) 55%, transparent); }
/* Its lamp keeps a little light on its picture, falling from above; the pointer brings it up fully. */
.home-studios .scard__cover::before { opacity: .6; }
/* Depth: each studio's picture is a board standing in the room, turned a little towards its key light, the thickness of
   its edge showing; the taped place turns the other way, towards its strip light. */
.home-studios .scard__cover { transform: perspective(1300px) rotateY(-6deg); box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 7px 1px 0 -1px #0b0e14, 0 46px 70px -34px #000, 0 16px 30px -16px rgba(0, 0, 0, .6); }
.home-studios .join-card { transform: perspective(1300px) rotateY(4deg); }
@media (max-width: 760px) {
  .home-studios { --floor-h: 190px; }
}

.pgrid { display: grid; gap: clamp(28px, 3vw, 40px) clamp(18px, 2.2vw, 28px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
.pgrid[data-count="1"] { grid-template-columns: minmax(0, 760px); }
.pgrid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .pgrid[data-count="2"] { grid-template-columns: minmax(0, 1fr); } }
.pcard, .scard, .acard, .shcard { position: relative; display: flex; flex-direction: column; }
.tilt__glint { width: 130%; aspect-ratio: 1; margin: -65% 0 0 -65%; }
[data-tilt].is-tilting .tilt__glint { opacity: 1; }
[data-tilt].is-tilting { will-change: transform; }
.pcard__cover { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-2); }
.pgrid[data-count="1"] .pcard__cover, .pgrid[data-count="2"] .pcard__cover { aspect-ratio: 16 / 9.4; }
.pcard__img, .pcard__svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: brightness(.84); transition: transform 1.2s var(--ease), filter .8s var(--ease-light); }
.pcard:hover .pcard__img, .pcard:hover .pcard__svg { transform: scale(1.025); filter: brightness(1.04); }
/* The light coming up on a picture: a warm wash falling from above onto it. */
.pcard__cover::before, .scard__cover::before, .acard__cover::before, .shcard__media::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(90% 70% at 50% -12%, rgba(var(--key-rgb), .2), transparent 70%); opacity: 0; transition: opacity .8s var(--ease-light); }
.pcard:hover .pcard__cover::before, .scard:hover .scard__cover::before, .acard:hover .acard__cover::before, .shcard:hover .shcard__media::before { opacity: 1; }
.pcard__badges, .mega__cover .pcard__badges { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; z-index: 4; }
.pcard__body { display: grid; gap: 7px; padding: 20px 2px 4px; flex: 1; align-content: start; }
.pcard__meta { margin: 0; }
.pcard__name { font: 400 clamp(1.9rem, 1.5rem + .9vw, 2.4rem)/1.02 var(--font-title); color: var(--text); transition: color .6s var(--ease-light); }
.pcard:hover .pcard__name { color: var(--white); }
.pcard__tagline { color: var(--text-2); font-size: 15px; }
.pcard__rating { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-2); }
.pcard__formats { font: 500 9.5px/1.3 var(--font-legend); letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.pcard__price { display: inline-flex; align-items: center; gap: 10px; font-size: 1.25rem; color: var(--text); white-space: nowrap; }
.pcard__price .icon { color: var(--text-3); transition: transform var(--dur) var(--ease), color var(--dur); }
.pcard:hover .pcard__price .icon { transform: translateX(3px); color: var(--gold-hi); }
@media (hover: none) { .pcard:active { transform: scale(.995); } }

/* FrozenArt Access band (home): the app straight on, in the light. */
.access-band { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding: clamp(28px, 5vw, 68px); background: var(--panel); border: 1px solid var(--line); border-top-color: rgba(var(--key-rgb), .18); border-radius: var(--r-lg); }
.access-band__text .lead { margin-top: 20px; }
.access-band__text .row { margin-top: 32px; gap: 20px; }
.ticks { list-style: none; display: grid; gap: 12px; margin-top: 26px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--text); font-size: 15.5px; }
.ticks .icon { color: var(--gold); margin-top: 3px; }
.window { position: relative; overflow: hidden; background: var(--ink-2); border-radius: var(--r-frame); }
.window img { width: 100%; }
.window__bar { display: flex; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.window__bar span { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-3); }
.window__placeholder { aspect-ratio: 16 / 10; display: grid; place-items: center; }
@media (max-width: 900px) { .access-band { grid-template-columns: minmax(0, 1fr); } }

/* Films: equal height, width from the film's shape; the title over its foot. */
.strip { position: relative; }
.strip__track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); padding: 8px max(var(--gutter), calc((100vw - var(--container)) / 2)) 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.strip__track::-webkit-scrollbar { display: none; }
.strip .fcard { --h: clamp(300px, 36vw, 500px); flex: none; height: var(--h); scroll-snap-align: start; }
.strip .fcard--landscape { width: calc(var(--h) * 16 / 9); max-width: 86vw; }
.strip .fcard--portrait { width: calc(var(--h) * 9 / 16); }
.strip .fcard--square { width: var(--h); }
.strip__controls { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.strip__btn { box-shadow: inset 0 0 0 1px var(--line-2); }
.strip__btn:disabled { opacity: .3; pointer-events: none; }
.fcard { position: relative; display: block; overflow: hidden; isolation: isolate; background: var(--ink-2); border-radius: var(--r-frame); box-shadow: var(--frame-shadow); }
.fcard__media { position: absolute; inset: 0; }
.fcard__img, .fcard__video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), opacity .6s var(--ease); }
.fcard__video { position: absolute; inset: 0; opacity: 0; }
.fcard.is-playing .fcard__video { opacity: 1; }
.fcard:hover .fcard__img { transform: scale(1.03); }
.fcard::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(5, 6, 9, .9) 0%, rgba(5, 6, 9, .3) 36%, transparent 60%); pointer-events: none; }
.fcard__play { position: absolute; z-index: 2; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--gold-hi); background: rgba(6, 7, 10, .72); box-shadow: inset 0 0 0 1px var(--rule-3); opacity: 0; transform: scale(.85); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.fcard:hover .fcard__play, .fcard:focus-visible .fcard__play { opacity: 1; transform: none; }
.fcard__info { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 20px 22px; display: grid; gap: 5px; }
.fcard__meta { font: 500 9.5px/1.3 var(--font-legend); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.fcard__title { font: 400 clamp(1.45rem, 1.15rem + .8vw, 2rem)/1.06 var(--font-title); color: var(--white); }
.fcard__sub { color: var(--text-2); font-size: 14.5px; }
@media (max-width: 640px) {
  .fcard--portrait .fcard__info { padding: 14px 14px 16px; }
  .fcard--portrait .fcard__title { font-size: 1.2rem; }
  .fcard--portrait .fcard__meta { font-size: 9px; letter-spacing: .14em; }
}

/* Studios */
.sgrid { display: grid; gap: clamp(28px, 3vw, 40px) clamp(18px, 2.2vw, 28px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.sgrid[data-count="1"], .sgrid[data-count="2"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
@media (min-width: 900px) { .sgrid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sgrid[data-count="2"] .scard__cover { aspect-ratio: 16 / 8; } }
.scard__cover { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-2); }
.scard__img, .scard__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity .6s, filter .8s var(--ease-light); }
.scard__img { filter: brightness(.86); }
.scard__video { opacity: 0; }
.scard.is-playing .scard__video { opacity: 1; }
.scard:hover .scard__img { transform: scale(1.03); filter: brightness(1.04); }
/* A studio without a picture: its name standing on the stage — the planks running back into the dark, the light from
   above pooling where it stands. */
.scard__placeholder { position: absolute; inset: 0; display: grid; place-items: center; background:
  radial-gradient(40% 24% at 50% 80%, rgba(255, 236, 205, .2), rgba(var(--key-rgb), .06) 55%, transparent 74%),
  radial-gradient(30% 22% at 50% 45%, rgba(255, 236, 205, .07), transparent 72%),
  linear-gradient(180deg, rgba(6, 7, 9, .2) 56%, rgba(6, 7, 9, .66)),
  url("../img/stage-floor.webp") 50% 100% / 160% 46% no-repeat,
  radial-gradient(56% 70% at 50% -6%, rgba(255, 236, 205, .1), transparent 70%),
  radial-gradient(80% 64% at 50% 40%, rgba(var(--night-rgb), .45), transparent 76%),
  linear-gradient(180deg, #06080d, #0a0f19 56%, #07090d); }
.scard__word { position: relative; translate: 0 -10%; padding: 4px 16px; font: 400 clamp(1.7rem, 1.2rem + 1.2vw, 2.5rem)/1.05 var(--font-title); color: var(--white); text-align: center; overflow-wrap: anywhere; text-shadow: 0 2px 14px rgba(5, 6, 9, .9); }
.scard__logo { position: absolute; left: 12px; bottom: 12px; z-index: 4; width: 60px; height: 60px; border-radius: var(--r); background: rgba(6, 7, 10, .8); box-shadow: inset 0 0 0 1px var(--line-2); display: grid; place-items: center; padding: 9px; }
.scard__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.scard__body { display: grid; gap: 7px; padding: 20px 2px 6px; flex: 1; align-content: start; }
.scard__meta { margin: 0; }
.scard__name { font: 400 2.1rem/1.04 var(--font-title); color: var(--text); }
.scard__tagline { color: var(--text-2); font-size: 15px; }
.scard__foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: 14px; color: var(--text-3); }
.scard__portal { display: inline-flex; align-items: center; gap: 7px; }
.scard__foot > .icon { color: var(--text-3); transition: color var(--dur), transform var(--dur) var(--ease); }
.scard:hover .scard__foot > .icon { color: var(--gold-hi); transform: translate(2px, -2px); }
/* The invitation to partner studios: an empty place marked out on the floor, waiting for a studio to stand there. */
/* The place taped out for the next studio: lit and empty, the light pooling on the floor inside the tape, the invitation
   standing in the middle of it. */
.join-card { position: relative; isolation: isolate; display: grid; align-content: center; justify-items: center; gap: 12px; min-height: 340px; padding: 40px clamp(24px, 3vw, 44px) 64px; text-align: center; }
.join-card::after { content: ""; position: absolute; z-index: -1; left: 4%; right: 4%; bottom: -4%; height: 40%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 238, 210, .2), rgba(var(--key-rgb), .07) 55%, transparent); }
.join-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 60% at 50% 100%, rgba(var(--key-rgb), .09), transparent 70%); opacity: 0; transition: opacity .8s var(--ease-light); }
.join-card:hover::before { opacity: 1; }
.join-card__glow { display: none; }
.join-card .eyebrow { margin: 0; }
.join-card__title { font: 400 clamp(1.8rem, 1.4rem + 1vw, 2.4rem)/1.04 var(--font-title); color: var(--text); }
.join-card__text { color: var(--text-2); font-size: 15px; max-width: 40ch; }
.join-card .btn { margin-top: 8px; }
.home-studios .sgrid .stage__glint { width: 80%; margin: -40% 0 0 -40%; }

/* Partners' logos: standing still, in a row. */
.marquee { overflow: hidden; margin-bottom: 30px; }
.marquee__track { display: flex; flex-wrap: wrap; gap: 18px 48px; align-items: center; }
.marquee__item { height: 40px; display: flex; align-items: center; opacity: .6; filter: grayscale(1) brightness(1.6); transition: opacity var(--dur), filter var(--dur); }
.marquee__item:hover { opacity: 1; filter: none; }
.marquee__item img { height: 100%; width: auto; }

/* Event albums */
.agrid { display: grid; gap: clamp(28px, 3vw, 40px) clamp(18px, 2.2vw, 28px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.acard__cover { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ink-2); }
.acard__cover img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.88); transition: transform 1.2s var(--ease), filter .8s var(--ease-light); }
.acard:hover .acard__cover img { transform: scale(1.03); filter: brightness(1.04); }
.acard__count { position: absolute; top: 12px; right: 12px; z-index: 4; }
.acard__body { display: grid; gap: 8px; padding: 20px 2px 6px; }
.acard__meta { display: flex; gap: 14px; flex-wrap: wrap; font: 500 9.5px/1.3 var(--font-legend); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.acard__meta span { display: inline-flex; align-items: center; gap: 5px; }
.acard__title { font: 400 1.8rem/1.1 var(--font-title); color: var(--text); }
.acard__price { color: var(--text-2); font: 400 15px/1 var(--font-title); }

/* Services: a table of rates, each row ruled, a dotted leader between the name and the price. */
.price-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; border-top: 1px solid var(--line-3); }
@media (max-width: 860px) { .price-list { grid-template-columns: minmax(0, 1fr); } }
.price-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 18px; align-items: center; padding: 20px 4px; border-bottom: 1px solid var(--line-2); transition: background-color .5s var(--ease-light); }
.price-row:hover { background: linear-gradient(180deg, rgba(var(--gold-rgb), .06), transparent); }
.price-row__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r); color: var(--gold); box-shadow: inset 0 0 0 1px var(--line-2); }
.price-row__text { display: grid; gap: 4px; min-width: 0; }
.price-row__name { font: 400 1.45rem/1.15 var(--font-title); color: var(--text); display: flex; align-items: center; gap: 10px; }
.price-row__desc { color: var(--text-3); font-size: 14px; }
.price-row__price { text-align: right; white-space: nowrap; font-size: 15px; }
.price-row__price .price { font-size: 1.3rem; }
.price-row__go { color: var(--text-4); transition: color var(--dur), transform var(--dur) var(--ease); }
.price-row:hover .price-row__go { color: var(--gold-hi); transform: translateX(3px); }
@media (max-width: 520px) { .price-row { grid-template-columns: auto minmax(0, 1fr); } .price-row__price { grid-column: 2; text-align: left; } .price-row__go { display: none; } }

/* Shots */
.shgrid { display: grid; gap: 22px 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.shcard__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-2); }
.shcard--portrait .shcard__media { aspect-ratio: 16 / 10; }
.shcard__img, .shcard__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shcard__video { opacity: 0; transition: opacity .5s; }
.shcard.is-playing .shcard__video { opacity: 1; }
.shcard__badges { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 6px; z-index: 4; }
.shcard__body { display: flex; justify-content: space-between; gap: 12px; padding: 14px 2px 4px; align-items: baseline; }
.shcard__title { font: 400 1.2rem/1.25 var(--font-title); color: var(--text); }
.shcard__price { font-size: 13px; color: var(--text-3); white-space: nowrap; }

/* Reviews: the words in italic, as quoted in a programme. */
.rgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.rcard { margin: 0; padding: 26px; background: var(--panel); border: 1px solid var(--line); border-top-color: rgba(var(--key-rgb), .16); border-radius: var(--r-lg); display: grid; gap: 14px; align-content: start; }
.rcard__title { font: 400 1.4rem/1.2 var(--font-title); color: var(--text); }
.rcard__body { margin: 0; color: var(--text); font: italic 400 1.18rem/1.55 var(--font-title); }
.rcard__who { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.rcard__source { display: block; font-size: 12.5px; }
.rcard__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.rcard__verified { display: inline-flex; align-items: center; gap: 5px; font: 500 9.5px/1 var(--font-legend); letter-spacing: .2em; text-transform: uppercase; color: var(--ok); }
.avatar--sm { width: 36px; height: 36px; font-size: 14px; }

/* Collaboration: centre stage. Two lamps from the rig cross on the words; the floor runs out in front of them with the
   light's pool on it, and a little smoke hangs in the beams. */
.home-collab { --floor-h: clamp(230px, 21vw, 320px); padding-block: clamp(150px, 13vw, 200px) clamp(150px, 15vw, 230px); }
.collab-dish { --s: 1.3; --throw: clamp(560px, 56vw, 820px); }
.rig.collab-dish { --spread: 30deg; --a: .28; }
.statement > .kit { display: none; }
@media (min-width: 1100px) {
  .statement > .kit { display: block; }
  .collab-key { --s: .9; right: calc(100% + 24px); bottom: -150px; --a: .42; --throw: 620px; }
  .collab-rim { --s: .86; left: calc(100% + 8px); bottom: -132px; --a: .38; --throw: 580px; }
}
.home-collab .stage-set__floor { --pool-x: 50%; --pool-y: 34%; --pool-w: 30%; --pool-h: 64%; }
.statement { position: relative; margin: 0 auto; max-width: 62rem; display: grid; justify-items: center; text-align: center; }
.statement__text-block { position: relative; display: grid; justify-items: center; }
.statement__title { font: 400 clamp(2.3rem, 1.3rem + 3.8vw, 4.6rem)/1 var(--font-title); letter-spacing: -.012em; max-width: 16ch; }
.statement__text { margin: 24px auto 34px; color: var(--text-2); font-size: clamp(1.05rem, .98rem + .36vw, 1.26rem); max-width: 52ch; }
@media (max-width: 760px) { .home-collab { --floor-h: 210px; padding-block: 130px 150px; } }
.closing { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px 48px; flex-wrap: wrap; padding: clamp(30px, 4vw, 46px) 0 0; border-top: 1px solid var(--line-3); }
.closing .lead { margin-top: 14px; max-width: 52ch; }

/* Error page */
.error-page { padding: calc(var(--nav-h) + clamp(80px, 14vw, 180px)) 0 40px; }
.error-page__code { font: 500 11px/1 var(--font-legend); letter-spacing: .32em; color: var(--gold); margin-bottom: 20px; }
.error-page .lead { margin: 22px 0 34px; max-width: 52ch; }

/* Installer */
.bare { padding: clamp(40px, 8vw, 90px) 16px; }
.install { width: min(760px, 100%); margin: 0 auto; display: grid; gap: 18px; }
.install__head { display: grid; justify-items: start; gap: 4px; margin-bottom: 12px; }
.install__head img { margin-bottom: 20px; }
.install__head .eyebrow { margin: 0; }
.install__title { font-size: clamp(2.3rem, 1.6rem + 2vw, 3.4rem); font-weight: 400; letter-spacing: -.01em; }
.install__card { padding: clamp(22px, 4vw, 34px); display: grid; gap: 18px; }
.checklist { list-style: none; display: grid; gap: 10px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.checklist .is-ok .icon { color: var(--ok); }
.checklist .is-missing .icon { color: var(--gold-hi); }
.code-block { width: 100%; font: 13px/1.5 var(--font-mono); background: var(--ink-1); color: var(--text-2); border: 1px solid var(--line-2); border-radius: var(--r); padding: 14px; }
/* ==========================================================================
   15. Drawer, dialogs, lightbox
   ========================================================================== */
.drawer { position: fixed; inset: 0; z-index: 160; visibility: hidden; pointer-events: none; }
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(3, 4, 6, .66); opacity: 0; transition: opacity .35s var(--ease); }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); display: flex; flex-direction: column; background: var(--ink-1); border-left: 1px solid var(--line-2); box-shadow: -40px 0 80px -40px rgba(0, 0, 0, .8); transform: translateX(100%); transition: transform .5s var(--ease); }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 18px 16px 24px; border-bottom: 1px solid var(--line-2); }
.drawer__head .h3 { font-size: 1.8rem; }
.drawer__body { flex: 1; overflow-y: auto; padding: 16px; display: grid; align-content: start; gap: 10px; }
.drawer__empty { text-align: center; padding: 64px 20px; display: grid; gap: 10px; justify-items: center; }
.drawer__foot { padding: 18px 20px 22px; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.drawer__total { display: flex; justify-content: space-between; align-items: baseline; font: 500 11px/1 var(--font-legend); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }
.drawer__total .price { font-size: 1.8rem; letter-spacing: 0; text-transform: none; }
.drawer__loading { display: grid; place-items: center; padding: 60px 0; }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--rule-2); border-top-color: var(--gold); animation: spin .8s linear infinite; }
.cart-lines { list-style: none; display: grid; gap: 8px; }
.cart-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.cart-line__thumb { width: 64px; height: 44px; overflow: hidden; border-radius: var(--r-sm); background: var(--ink-2); box-shadow: 0 0 0 1px var(--line-2); }
.cart-line__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__text { display: grid; min-width: 0; }
.cart-line__title { font: 400 1.1rem/1.25 var(--font-name); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-line__sub { font-size: 13px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-line__price { font-size: 1.1rem; }
.cart-line__remove { width: 32px; height: 32px; font-size: 20px; line-height: 1; }

dialog { color: var(--text); }
dialog::backdrop { background: rgba(3, 4, 6, .76); }
.modal { width: min(480px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line-2); border-top-color: rgba(var(--key-rgb), .3); border-radius: var(--r-lg); background: var(--ink-1); box-shadow: 0 40px 100px -40px #000; overflow: visible; }
.modal[open] { animation: modal-in .45s var(--ease); }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px); } }
.modal__body { padding: 38px 32px 30px; display: grid; gap: 14px; justify-items: start; }
.modal__mark { margin-bottom: 6px; }
.modal__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.modal__close { position: absolute; top: 10px; right: 10px; }

.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(4, 5, 7, .97); }
.lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.lightbox__stage { display: grid; place-items: center; padding: 64px 72px 16px; min-height: 0; }
.lightbox__stage img, .lightbox__stage video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 0 0 1px var(--line-2), 0 40px 100px -40px #000; }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px clamp(16px, 4vw, 40px) 24px; flex-wrap: wrap; border-top: 1px solid var(--line); }
.lightbox__caption { display: grid; gap: 2px; font-size: 14px; color: var(--text-2); }
.lightbox__caption strong { font: 400 1.2rem/1.3 var(--font-name); color: var(--text); }
.lightbox__nav { position: absolute; top: 50%; translate: 0 -50%; width: 52px; height: 52px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); }
.lightbox__nav--prev { left: 12px; } .lightbox__nav--next { right: 12px; }
.lightbox.is-single .lightbox__nav { display: none; }
.lightbox__close { position: absolute; top: 14px; right: 14px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); }
@media (max-width: 640px) { .lightbox__stage { padding: 56px 8px 8px; } .lightbox__nav { top: auto; bottom: 90px; } }

/* Donations: the window after getting something free, the box on free product pages, /donate */
.donate { display: grid; gap: 22px; width: 100%; min-width: 0; }
.donate__form { display: grid; gap: 22px; min-width: 0; }
.donate__eyebrow { margin-bottom: 14px; }
.donate__title { font: 400 clamp(1.9rem, 1.45rem + 1.3vw, 2.7rem)/1.04 var(--font-title); color: var(--text); text-wrap: balance; }
.donate--page .donate__title { font-size: clamp(2.6rem, 1.7rem + 2.8vw, 4.2rem); }
.donate__text { margin-top: 14px; max-width: 54ch; color: var(--text-2); font-size: 1.03rem; line-height: 1.6; }
.donate__amounts { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 12px; }
.donate__amounts legend { padding: 0; margin-bottom: 12px; }
.donate__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.donate__chip { position: relative; display: inline-flex; }
.donate__chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.donate__chip span { display: inline-flex; align-items: center; justify-content: center; min-width: 78px; height: 50px; padding: 0 20px; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line-2); font: 400 1.2rem/1 var(--font-title); color: var(--text); transition: background-color var(--dur), color var(--dur), box-shadow var(--dur); }
.donate__chip:hover span { box-shadow: inset 0 0 0 1px var(--rule-3); }
.donate__chip input:checked + span { background: var(--gold); color: var(--gold-ink); box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 0 4px rgba(29, 20, 4, .3); }
.donate__chip input:focus-visible + span { outline: 1px solid var(--gold-hi); outline-offset: 4px; }
.donate__other { flex: 1 1 150px; max-width: 210px; display: inline-flex; align-items: center; gap: 6px; height: 50px; padding: 0 18px; border-radius: var(--r); border: 1px dashed var(--rule-3); cursor: text; transition: border-color var(--dur), background-color var(--dur); }
.donate__other:focus-within, .donate__other.is-on { border-style: solid; border-color: var(--gold); background: rgba(var(--gold-rgb), .06); }
.donate__symbol { color: var(--text-3); font-family: var(--font-title); font-size: 1.2rem; }
.donate__other.is-on .donate__symbol { color: var(--gold-hi); }
.donate__other input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: none; color: var(--text); font: 400 1.2rem/1 var(--font-title); }
.donate__other input::placeholder { color: var(--text-4); }
.donate__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.donate__wide, .donate__receipt { grid-column: 1 / -1; }
.donate__fields textarea { min-height: 88px; }
.donate__private { margin-top: -4px; font-size: 14px; color: var(--text-2); }
.donate__receipt { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 14px; }
.donate__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.donate__submit[aria-busy="true"] { opacity: .7; pointer-events: none; }
.donate__note { display: flex; align-items: center; gap: 8px; margin-top: -8px; color: var(--text-3); font-size: 12.5px; line-height: 1.45; }
.donate__note .icon { flex: none; }
.donate__demo { margin: 0; }
.donate--box { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "head form" "list form"; grid-template-rows: auto 1fr; column-gap: clamp(28px, 5vw, 80px); row-gap: 32px; align-items: start; padding: clamp(28px, 4vw, 54px); background: var(--panel); border: 1px solid var(--line); border-top-color: rgba(var(--key-rgb), .18); border-radius: var(--r-lg); }
.donate--box > .donate__head { grid-area: head; }
.donate--box > .donate__form { grid-area: form; }
.donate--box > .donors { grid-area: list; }
.donate--page { max-width: 680px; }
.modal--donate { width: min(580px, calc(100vw - 24px)); }
.modal--donate:has(.donate--listed) { width: min(960px, calc(100vw - 24px)); }
.modal--donate .modal__body { display: block; padding: clamp(28px, 5vw, 42px) clamp(22px, 5vw, 38px) clamp(24px, 4vw, 32px); }
.modal--donate .donate__title { padding-right: 36px; }
.donate--window.donate--listed { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); grid-template-areas: "head head" "form list"; column-gap: 32px; align-items: start; }
.donate--window.donate--listed > .donate__head { grid-area: head; }
.donate--window.donate--listed > .donate__form { grid-area: form; }
.donate--window.donate--listed > .donors { grid-area: list; }
.donate--window .donors { padding: 18px 18px 14px; border: 1px solid var(--line-2); border-radius: var(--r-lg); }
.donors { display: grid; gap: 12px; align-content: start; min-width: 0; }
.donors__title { margin: 0; }
.donors__list { list-style: none; margin: 0; padding: 0; display: grid; }
.donor { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.donor:first-child { border-top: 0; padding-top: 2px; }
.donor__avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 400 15px/1 var(--font-name); color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--rule-3); }
.donor__avatar--anon { color: var(--text-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.donor__main { min-width: 0; }
.donor__line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.donor__name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; font-size: 14.5px; color: var(--text); }
.donor__amount { flex: none; font: 400 15px/1 var(--font-title); color: var(--gold-hi); }
.donor__message { margin-top: 5px; color: var(--text-2); font: italic 400 15px/1.5 var(--font-title); overflow-wrap: anywhere; }
.donor__meta { margin-top: 5px; color: var(--text-3); font-size: 12px; }
.donors__more { justify-self: start; font-size: 13.5px; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-3); transition: color var(--dur); }
.donors__more:hover { color: var(--gold-hi); }
.donors__empty { color: var(--text-3); font-size: 14px; }
.donate-page { padding-bottom: clamp(72px, 10vw, 140px); }
.donate-page__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.donate-page__side { display: grid; gap: 28px; min-width: 0; }
.donate-page__art { aspect-ratio: 16 / 11; overflow: hidden; background: var(--ink-1); border-radius: var(--r-frame); box-shadow: var(--frame-shadow); }
.donate-page__art img, .donate-page__svg { width: 100%; height: 100%; object-fit: cover; }
.donate-page__art--mark { display: grid; place-items: center; }
.donate-page__art .donate-page__mark { width: 30%; height: auto; object-fit: contain; }
.order__thanks { display: grid; justify-items: start; }
.order__heart { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 22px; border-radius: 50%; color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--rule-3); }
@media (max-width: 1000px) { .donate-page__grid { grid-template-columns: minmax(0, 1fr); } .donate-page__art { display: none; } }
@media (max-width: 900px) { .donate--window.donate--listed { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "form" "list"; } }
@media (max-width: 860px) { .donate--box { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "form" "list"; grid-template-rows: auto; } }
@media (max-width: 560px) {
  .donate__fields { grid-template-columns: minmax(0, 1fr); }
  .donate__chip { flex: 1 1 calc(25% - 8px); }
  .donate__chip span { width: 100%; min-width: 0; padding: 0 8px; }
  .donate__other { max-width: none; flex-basis: 100%; }
  .donate__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* Calendar (booking): a month as a table of days, the chosen one in gold. */
.cal { user-select: none; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal__head strong { font: 400 1.4rem/1 var(--font-name); color: var(--text); }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal__dow { text-align: center; font: 500 9.5px/1 var(--font-legend); color: var(--text-3); text-transform: uppercase; letter-spacing: .16em; padding: 8px 0; }
.cal__day { aspect-ratio: 1; font: 400 1.05rem/1 var(--font-title); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color var(--dur), box-shadow var(--dur); }
.cal__day:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--gold); }
.cal__day:disabled { color: var(--text-4); box-shadow: none; cursor: not-allowed; text-decoration: line-through; text-decoration-color: rgba(var(--gold-rgb), .25); }
.cal__day.is-selected { background: var(--gold); color: var(--gold-ink); box-shadow: none; }

/* ==========================================================================
   16. The catalogue and a product's page
   ========================================================================== */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 34px; }
.toolbar__sep { width: 1px; height: 24px; background: var(--line-2); margin: 0 6px; align-self: center; }
.toolbar__count { color: var(--text-3); font: 400 15px/1 var(--font-name); }
.callout { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: clamp(44px, 5.5vw, 70px); padding: 24px 28px; background: var(--panel); border: 1px solid var(--line); border-top-color: rgba(var(--key-rgb), .18); border-radius: var(--r-lg); }
.callout__text { flex: 1; min-width: 240px; display: grid; gap: 4px; }
.crumb { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); font: 500 10.5px/1 var(--font-legend); letter-spacing: .22em; text-transform: uppercase; margin-bottom: 30px; transition: color var(--dur); }
.crumb:hover { color: var(--gold-hi); }
.inline-form { display: contents; }

/* The head: the entry on the left; the facts on the right, each with its dotted leader to the value. */
.phero { position: relative; isolation: isolate; padding: calc(var(--nav-h) + clamp(34px, 5vw, 70px)) 0 0; }
.phero::before { content: ""; position: absolute; inset: 0 0 auto; height: 90vh; z-index: -3; pointer-events: none; background: radial-gradient(46% 60% at 28% 40%, rgba(var(--night-rgb), .34), transparent 72%); }
/* Under the plugin's picture, the floor and smoke; on a very wide screen a softbox and a strip box stand either side. */
.phero__shot { --floor-h: clamp(220px, 22vw, 340px); }
.phero__set { z-index: -1; }
/* Under and behind the plugin's picture the stage runs the whole width of the screen: the floor, smoke, and a soft warm
   light on the dark behind it. */
.phero__shot .phero__set { left: calc(50% - 50vw); right: calc(50% - 50vw); }
.phero__set::before { content: ""; position: absolute; left: 50%; top: 2%; width: min(1700px, 120vw); height: 74%; translate: -50% 0; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 238, 210, .075), rgba(var(--night-rgb), .2) 52%, transparent); }
.phero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: clamp(32px, 5vw, 88px); align-items: end; }
.phero__eyebrow { flex-wrap: wrap; margin-bottom: 18px; }
.phero__icon { display: inline-block; width: 30px; height: 30px; overflow: hidden; border-radius: var(--r-sm); box-shadow: 0 0 0 1px var(--line-2); }
.phero__icon img { width: 100%; height: 100%; object-fit: cover; }
.phero__name { font: 400 clamp(3.6rem, 1.6rem + 6.4vw, 8.4rem)/.9 var(--font-name); letter-spacing: -.01em; color: var(--text); }
.phero__tagline { margin-top: 20px; max-width: 32ch; font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem); line-height: 1.32; color: var(--text); }
.phero__rating { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--text-2); font-size: 14px; transition: color var(--dur); }
.phero__rating:hover { color: var(--text); }
.phero__state { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 8px 14px; border-radius: var(--r); font-size: 14px; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); }

.phero__state--off .mark { opacity: .35; }
.phero__state--ok { color: var(--text); box-shadow: inset 0 0 0 1px var(--rule-3); }
.phero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.phero__gift { margin-top: 16px; font-size: 13.5px; }
.facts { margin: 0; display: grid; border-top: 1px solid var(--line-3); }
.facts > div { display: flex; align-items: baseline; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line-2); }
.facts dt { flex: none; font: 500 10px/1.3 var(--font-legend); letter-spacing: .22em; text-transform: uppercase; color: var(--text-3); }
.facts > div::after { content: ""; order: 1; flex: 1 1 auto; min-width: 16px; height: 1px; transform: translateY(-3px); background: radial-gradient(circle, rgba(var(--gold-rgb), .5) 0 .7px, transparent 1px) 0 0 / 6px 1px repeat-x; }
.facts dd { order: 2; margin: 0; text-align: right; font: 400 1.05rem/1.3 var(--font-title); color: var(--text); }
.facts dd.mono { font: 400 1.05rem/1.3 var(--font-title); letter-spacing: 0; }
.facts__price dd { font-size: 1.5rem; }
/* The plugin itself, straight on, standing in the light — reflected in the floor, its name on its mark in front. */
.phero__shot { position: relative; margin-top: clamp(14px, 2vw, 30px); padding-top: clamp(48px, 6vw, 96px); isolation: isolate; }
.phero__frame { z-index: 1; }
.phero__frame { position: relative; margin: 0; }
.phero__frame img { width: 100%; border-radius: var(--r-frame); box-shadow: var(--frame-shadow), 0 -1px 0 rgba(var(--key-rgb), .3); -webkit-box-reflect: below 3px linear-gradient(transparent 84%, rgba(255, 255, 255, .1)); }
.phero__fig { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 22px 0 2px; font: 500 9.5px/1 var(--font-legend); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.phero__fig::before { content: ""; width: 12px; height: 10px; flex: none; background: linear-gradient(var(--gold), var(--gold)) 0 0 / 100% 3px no-repeat, linear-gradient(var(--gold), var(--gold)) 50% 0 / 3px 100% no-repeat; }
@media (max-width: 900px) { .phero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; } .phero__frame img { border-radius: 7px; } }

.buybar { position: fixed; left: 0; right: 0; top: var(--nav-h); z-index: 90; background: var(--ink-1); border-bottom: 1px solid var(--line); transform: translateY(-120%); opacity: 0; transition: transform .45s var(--ease), opacity .3s; }
.buybar.is-visible { transform: none; opacity: 1; }
.buybar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 62px; }
.buybar__name { display: flex; align-items: center; gap: 14px; min-width: 0; }
.buybar__name img { width: 30px; height: 30px; object-fit: cover; box-shadow: 0 0 0 1px var(--line-2); }
.buybar__name strong { font: 400 1.4rem/1 var(--font-name); color: var(--text); }
.buybar__price { color: var(--text-2); font-size: 14px; }
.buybar__actions { display: flex; gap: 8px; }
@media (max-width: 640px) { .buybar__price { display: none; } .buybar__actions .btn--glass { display: none; } }

.pintro__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.pintro__text { font-size: clamp(1.1rem, 1.02rem + .35vw, 1.28rem); color: var(--text-2); }
.pintro__text p:first-child { color: var(--text); font-size: 1.12em; }
@media (max-width: 900px) { .pintro__grid { grid-template-columns: minmax(0, 1fr); } }
/* How you get it: three steps, in order. */
.how { padding: 28px; background: var(--panel); border: 1px solid var(--line); border-top-color: rgba(var(--key-rgb), .18); border-radius: var(--r-lg); display: grid; gap: 18px; justify-items: start; }
.how .eyebrow { margin: 0; }
.how__steps { list-style: none; counter-reset: step; display: grid; gap: 14px; }
.how__steps li { counter-increment: step; display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: baseline; color: var(--text-2); font-size: 15px; }
.how__steps li::before { content: counter(step); font: 400 1.15rem/1 var(--font-title); color: var(--gold); text-align: right; padding-right: 4px; }

.block__title { margin-bottom: 30px; }
/* Features: notes as in a programme — a small sign in gold, the name in Didot, a line of text — not tiles. */
.features { display: grid; gap: 0 36px; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-3); }
@media (max-width: 1000px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .features { grid-template-columns: minmax(0, 1fr); } }
.feature { padding: 24px 0 26px; border-bottom: 1px solid var(--line-2); display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; align-content: start; }
.feature__icon { grid-row: span 2; color: var(--gold); padding-top: 4px; }
.feature__icon .icon { width: 20px; height: 20px; }
.feature__title { font: 400 1.4rem/1.2 var(--font-name); color: var(--text); }
.feature__text { color: var(--text-2); font-size: 15px; line-height: 1.6; }

.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.split--flip .split__text { order: 2; }
.split__text .h2 { margin-bottom: 22px; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } .split--flip .split__text { order: 0; } }
.media-frame { position: relative; overflow: hidden; background: var(--ink-1); }
.media-frame img, .media-frame video { width: 100%; }
.player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border-radius: var(--r-frame); box-shadow: var(--frame-shadow); }
.player img, .player video, .player iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.player.is-playing video { object-fit: contain; }
.player__start { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold-hi); background: linear-gradient(0deg, rgba(6, 7, 10, .4), rgba(6, 7, 10, .1)); }
.player__start .icon { box-sizing: content-box; width: 26px; height: 26px; padding: 26px; border-radius: 50%; background: rgba(6, 7, 10, .75); box-shadow: inset 0 0 0 1px var(--rule-3); transition: background-color .3s, color .3s; }
.player__start:hover .icon { background: var(--gold); color: var(--gold-ink); }
.showcase { margin: 0; padding: 16px; background: var(--ink-1); border-radius: var(--r-lg); }
.showcase img { width: 100%; }
.gallery { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.reel-pin { position: relative; }
.reel__set, .reel__batten, .reel__lamp { display: none; }
.gallery__item { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--ink-1); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.gallery__item:hover img { transform: scale(1.03); }
/* Specifications: a table with dotted leaders. */
.specs { margin: 0; border-top: 1px solid var(--line-3); }
.specs__row { display: flex; align-items: baseline; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line-2); }
.specs dt { flex: none; max-width: 45%; font: 500 10.5px/1.5 var(--font-legend); letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.specs__row::after { content: ""; order: 1; flex: 1 1 auto; min-width: 20px; height: 1px; transform: translateY(-3px); background: radial-gradient(circle, rgba(var(--gold-rgb), .5) 0 .7px, transparent 1px) 0 0 / 6px 1px repeat-x; }
.specs dd { order: 2; margin: 0; max-width: 55%; text-align: right; color: var(--text); }
.quote { margin: 0; text-align: center; display: grid; gap: 22px; justify-items: center; }
.quote__mark { color: var(--gold); width: 34px; height: 34px; }
.quote blockquote { margin: 0; font: italic 400 clamp(1.7rem, 1.2rem + 1.8vw, 2.8rem)/1.25 var(--font-name); color: var(--text); max-width: 30ch; }
.quote figcaption { font-size: 15px; color: var(--text-2); }
/* Questions: notes at the foot of the page; open one and its sign turns. */
.faq { border-top: 1px solid var(--line-3); }
.faq__item { border-bottom: 1px solid var(--line-2); }
.faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; font: 400 1.35rem/1.3 var(--font-name); color: var(--text); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icon { color: var(--gold); transition: transform .35s var(--ease); }
.faq__item[open] summary .icon { transform: rotate(45deg); }
.faq__answer { padding: 0 0 22px; color: var(--text-2); max-width: 70ch; }
.faq__answer p + p { margin-top: .8em; }
/* Releases: a log of observations, version and date first. */
.releases-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
@media (max-width: 900px) { .releases-grid { grid-template-columns: minmax(0, 1fr); } }
.releases { display: grid; gap: 0; border-top: 1px solid var(--line-3); }
.releases .h3, .requirements .h3 { margin-bottom: 14px; }
.releases .h3 { padding-bottom: 14px; margin-bottom: 0; }
.release { padding: 18px 0; border-bottom: 1px solid var(--line-2); display: grid; gap: 8px; }
.release header { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; font-size: 13.5px; }
.release__version { font: 400 1.25rem/1 var(--font-title); color: var(--gold-hi); }
.release__notes { color: var(--text-2); font-size: 15px; }
.requirements .prose { font-size: 15.5px; }

/* ==========================================================================
   17. FrozenArt Access
   ========================================================================== */
.ahero { --floor-h: clamp(200px, 20vw, 290px); padding: calc(var(--nav-h) + clamp(44px, 7vw, 104px)) 0 clamp(96px, 10vw, 150px); position: relative; isolation: isolate; }
.ahero::before { content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none; background: radial-gradient(50% 64% at 30% 44%, rgba(var(--night-rgb), .34), transparent 72%), radial-gradient(40% 50% at 74% 46%, rgba(var(--night-rgb), .26), transparent 72%); }
.ahero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.ahero__mark { width: 84px; height: auto; margin-bottom: 30px; }
.ahero__actions { margin-top: 34px; }
.ahero__meta { margin-top: 18px; font-size: 12px; color: var(--text-3); }
.ahero__shot { position: relative; overflow: hidden; background: var(--ink-1); }
.ahero__shot img { width: 100%; }
@media (max-width: 900px) { .ahero__grid { grid-template-columns: minmax(0, 1fr); } }
.features--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .features--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .features--4 { grid-template-columns: minmax(0, 1fr); } }
.steps-band { padding: clamp(30px, 5vw, 66px); background: var(--panel); border: 1px solid var(--line); border-top-color: rgba(var(--key-rgb), .18); border-radius: var(--r-lg); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 36px; align-items: center; }
@media (max-width: 900px) { .steps-band { grid-template-columns: minmax(0, 1fr); } }
.steps { list-style: none; counter-reset: s; display: grid; border-top: 1px solid var(--line); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line-2); font-size: 1.08rem; color: var(--text); }
.steps li::before { content: counter(s); font: 400 1.6rem/1 var(--font-title); color: var(--gold); text-align: right; }
.ahero__welcome { max-width: 580px; margin-bottom: 26px; }
.ahero__welcome strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }
.ahero__welcome p + p { margin-top: 6px; }

/* ==========================================================================
   18. Films
   ========================================================================== */
.filters--page { margin-bottom: 36px; }
.feature-film { position: relative; display: block; aspect-ratio: 21 / 9; min-height: 360px; overflow: hidden; margin-bottom: clamp(48px, 6vw, 80px); isolation: isolate; border-radius: var(--r-frame); box-shadow: var(--frame-shadow); }
.feature-film__media { position: absolute; inset: 0; z-index: -1; }
.feature-film__media img, .feature-film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature-film__video { opacity: 0; transition: opacity 1s var(--ease); }
.feature-film__video.is-playing { opacity: 1; }
.feature-film::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 7, 10, .86), rgba(6, 7, 10, .2) 60%, transparent), linear-gradient(0deg, rgba(6, 7, 10, .7), transparent 50%); }
.feature-film__info { position: absolute; left: clamp(22px, 4vw, 56px); bottom: clamp(22px, 4vw, 56px); display: grid; gap: 10px; justify-items: start; max-width: 60%; }
.feature-film__info .eyebrow { margin: 0; }
.feature-film__title { font: 400 clamp(2.4rem, 1.5rem + 3vw, 4.6rem)/.96 var(--font-name); color: var(--white); }
.feature-film__sub { color: var(--text-2); font-size: 1.05rem; margin-bottom: 8px; }
@media (max-width: 700px) { .feature-film { aspect-ratio: 4 / 5; } .feature-film__info { max-width: none; right: 22px; } }
.work-section { margin-bottom: clamp(48px, 6vw, 88px); }
.work-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--line-3); }
.works { display: grid; gap: 18px; }
.works--grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.works--grid .fcard { aspect-ratio: 16 / 10; }
.works--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr)); }
.works--wide .fcard { aspect-ratio: 16 / 9; }
.works--reel { grid-auto-flow: column; grid-auto-columns: minmax(220px, 280px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 6px 12px; scrollbar-width: thin; }
.works--reel .fcard { aspect-ratio: 9 / 16; scroll-snap-align: start; }
.works--masonry { display: block; columns: 3 300px; column-gap: 18px; }
.works--masonry .fcard { break-inside: avoid; margin-bottom: 18px; }
.works--masonry .fcard--landscape { aspect-ratio: 3 / 2; }
.works--masonry .fcard--portrait { aspect-ratio: 4 / 5; }
.works--masonry .fcard--square { aspect-ratio: 1; }
.film-hero { padding-top: calc(var(--nav-h) + clamp(24px, 3vw, 40px)); }
.film-player { margin: 0 auto; }
.film-player--portrait { max-width: 520px; }
.player--portrait { aspect-ratio: 9 / 16; }
.film-audio { margin-top: 16px; display: flex; align-items: center; gap: 14px; padding: 12px 18px; border: 1px solid var(--line-2); border-radius: var(--r-lg); color: var(--gold); }
.film-audio audio { flex: 1; min-width: 0; height: 40px; color-scheme: dark; }
.film-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .film-body { grid-template-columns: minmax(0, 1fr); } }
.film-body__sub { margin-top: 12px; font: 400 1.4rem/1.3 var(--font-name); color: var(--text-2); }
.film-body__text { margin-top: 28px; }
.film-body__aside { display: grid; gap: 28px; }
/* Credits: a column of names, dotted leaders between role and name. */
.credits dl { margin: 0; display: grid; border-top: 1px solid var(--line-3); }
.credits dl > div { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line-2); font-size: 14.5px; }
.credits dl > div::after { content: ""; order: 1; flex: 1 1 auto; min-width: 16px; height: 1px; transform: translateY(-3px); background: radial-gradient(circle, rgba(var(--gold-rgb), .5) 0 .7px, transparent 1px) 0 0 / 6px 1px repeat-x; }
.credits dt { flex: none; font: 500 10px/1.4 var(--font-legend); letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.credits dd { order: 2; margin: 0; text-align: right; font: 400 1.05rem/1.3 var(--font-name); color: var(--text); }
.studio-chip { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r); transition: border-color var(--dur); }
.studio-chip + .studio-chip { margin-top: 8px; }
.studio-chip:hover { border-color: var(--line-3); }
.studio-chip > span:nth-child(2) { display: grid; flex: 1; font-size: 14px; }
.studio-chip__logo { width: 42px; height: 42px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2); font: 400 15px/1 var(--font-name); color: var(--gold-hi); overflow: hidden; }
.studio-chip__logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

/* ==========================================================================
   19. Event albums
   ========================================================================== */
.searchbar { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--r); background: rgba(255, 255, 255, .03); color: var(--gold); min-width: min(320px, 100%); }
.searchbar:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .16); }
.searchbar input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font-size: 15px; height: 100%; }
.searchbar--big { height: 60px; margin-top: 28px; }
.searchbar--big input { font: 400 1.3rem/1 var(--font-name); }
.searchbar--wide { flex: 1 1 260px; }
.page-head--album .page-head__lead { max-width: 70ch; }
.album-meta { display: flex; gap: 18px; flex-wrap: wrap; }
.album-meta span { display: inline-flex; align-items: center; gap: 6px; }
.album-bar { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; margin-top: 30px; padding: 14px 16px 14px 22px; border: 1px solid var(--line-2); border-radius: var(--r-lg); font-size: 14.5px; }
.album-bar .price { font-size: 1.3rem; color: var(--gold-hi); }
.album-bar .muted { flex: 1; min-width: 240px; }
.count-dot--inline { position: static; margin-left: 2px; }
.masonry { columns: 4 260px; column-gap: 14px; }
.ptile { position: relative; margin: 0 0 14px; break-inside: avoid; overflow: hidden; border-radius: 6px; background: var(--ink-1); box-shadow: 0 0 0 1px var(--line); display: block; }
.ptile img { width: 100%; height: auto; display: block; transition: transform 1s var(--ease); }
.ptile:hover img { transform: scale(1.02); }
.ptile__open { display: block; }
.ptile__bar { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; background: rgba(6, 7, 10, .82); box-shadow: inset 0 0 0 1px var(--line-2); opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.ptile:hover .ptile__bar, .ptile:focus-within .ptile__bar, .ptile:has(.is-in-cart) .ptile__bar { opacity: 1; transform: none; }
@media (hover: none) { .ptile__bar { opacity: 1; transform: none; } }
.ptile__price { font: 400 15px/1 var(--font-title); color: var(--text); }
.ptile:has(.is-in-cart) { box-shadow: 0 0 0 1px var(--gold), 0 0 0 4px rgba(var(--gold-rgb), .25); }

/* ==========================================================================
   20. Studios
   ========================================================================== */
.page-head__actions { margin-top: 30px; }
.studios-page__empty { margin-top: 20px; }
.shero { padding: calc(var(--nav-h) + 12px) 12px 0; }
.shero__stage { position: relative; min-height: clamp(520px, 72vh, 760px); overflow: hidden; display: flex; align-items: flex-end; isolation: isolate; border-radius: var(--r-frame); background: var(--ink-1); box-shadow: var(--frame-shadow); }
.shero__media { position: absolute; inset: 0; z-index: -1; }
.shero__img, .shero__video, .shero__lines { width: 100%; height: 100%; object-fit: cover; }
.shero__stage::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(6, 7, 10, .96) 0%, rgba(6, 7, 10, .55) 45%, rgba(6, 7, 10, .15) 100%); }
.shero__content { padding-block: clamp(28px, 5vw, 64px); }
.shero__id { display: flex; gap: 24px; align-items: flex-end; flex-wrap: wrap; }
.shero__logo { width: 96px; height: 96px; background: rgba(6, 7, 10, .8); box-shadow: inset 0 0 0 1px var(--line-2); display: grid; place-items: center; padding: 14px; }
.shero__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.shero__tagline { margin-top: 14px; max-width: 50ch; }
.shero__actions { margin-top: 28px; }
.studio-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .studio-body { grid-template-columns: minmax(0, 1fr); } }
.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list li { padding: 8px 14px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; color: var(--text); }
.ptile--plain img { width: 100%; }

/* ==========================================================================
   21. Services
   ========================================================================== */
.service-list { display: grid; gap: 18px; }
.service { position: relative; border: 1px solid var(--line); border-top-color: rgba(var(--key-rgb), .16); border-radius: var(--r-lg); background: var(--panel); overflow: hidden; isolation: isolate; }
.service__bg { position: absolute; inset: 0 0 0 45%; z-index: -1; opacity: .3; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.service__bg img { width: 100%; height: 100%; object-fit: cover; }
.service__main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: start; padding: clamp(22px, 3vw, 34px); }
.service__text { display: grid; gap: 10px; }
.service__text .h3 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--font-title); }
.service__desc { color: var(--text-2); max-width: 62ch; }
.service__side { display: grid; justify-items: end; gap: 14px; text-align: right; }
.service__price { font-size: 1.05rem; }
.service__price .price { font-size: 1.7rem; }
.service__examples { display: flex; gap: 10px; padding: 0 clamp(22px, 3vw, 34px) clamp(22px, 3vw, 30px); overflow-x: auto; }
.service__examples a { flex: none; width: 150px; aspect-ratio: 3 / 2; overflow: hidden; box-shadow: 0 0 0 1px var(--line-2); }
.service__examples img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) { .service__main { grid-template-columns: auto minmax(0, 1fr); } .service__side { grid-column: 1 / -1; justify-items: start; text-align: left; } }

/* ==========================================================================
   22. Shot Store
   ========================================================================== */
.shots-block { margin-bottom: clamp(48px, 6vw, 80px); }
.shots-block__title { margin-bottom: 20px; }
.shgrid--lg { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.shot-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 16px; border: 1px solid var(--line-2); border-radius: var(--r-lg); margin-bottom: 22px; }
.field--compact { gap: 6px; }
.field--compact .field__label { font-size: 10px; }
.field--compact select { height: 44px; min-width: 140px; font-size: 14.5px; }
.shot-page { padding-top: calc(var(--nav-h) + clamp(24px, 3vw, 40px)); }
.shot-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 1000px) { .shot-layout { grid-template-columns: minmax(0, 1fr); } }
.shot-media { overflow: hidden; background: #000; border-radius: var(--r-frame); box-shadow: var(--frame-shadow); }
.shot-media img, .shot-media video { width: 100%; }
.shot-media--portrait { max-width: 480px; margin: 0 auto; }
.shot-side { display: grid; gap: 18px; position: sticky; top: calc(var(--nav-h) + 20px); }
.shot-side .eyebrow { margin: 0; }
.licence-picker { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.shot-side__buy { display: grid; gap: 10px; }
.shot-side__note { font-size: 13px; }
.licence-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.licence-terms__item { padding: 24px; background: var(--panel); border: 1px solid var(--line); border-top-color: rgba(var(--key-rgb), .16); border-radius: var(--r-lg); }
.licence-terms__name { font: 400 1.5rem/1.2 var(--font-name); color: var(--text); }
.licence-terms .ticks { margin-top: 14px; gap: 9px; }
.licence-terms .ticks li { font-size: 14.5px; color: var(--text-2); }

/* ==========================================================================
   23. About, team, reviews
   ========================================================================== */
.about__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) { .about__grid { grid-template-columns: minmax(0, 1fr); } }
.about__story { font-size: clamp(1.1rem, 1.02rem + .35vw, 1.28rem); }
.contact-card { padding: 30px; background: var(--panel); border: 1px solid var(--line); border-top-color: rgba(var(--key-rgb), .18); border-radius: var(--r-lg); display: grid; gap: 18px; }
.contact-card__list { margin: 0; display: grid; gap: 14px; }
.contact-card__list div { display: grid; gap: 4px; }
.contact-card__list dt { font: 500 10px/1 var(--font-legend); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.contact-card__list dd { margin: 0; font: 400 1.2rem/1.35 var(--font-name); color: var(--text); }
.contact-card__list a:hover { color: var(--gold-hi); }
.message-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.team { display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.member { display: grid; gap: 8px; align-content: start; }
.member__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-1); border-radius: var(--r-frame); box-shadow: var(--frame-shadow); margin-bottom: 14px; display: grid; place-items: center; }
.member__photo img { width: 100%; height: 100%; object-fit: cover; }
.member__initials { font: 400 4.4rem/1 var(--font-name); color: var(--gold); }
.member__role { font: 500 10px/1.3 var(--font-legend); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.reviews-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1000px) { .reviews-layout { grid-template-columns: minmax(0, 1fr); } }
.rgrid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.review-form { position: sticky; top: calc(var(--nav-h) + 20px); }
.review-form--locked { display: grid; gap: 14px; justify-items: start; }
.reviews-layout--list { grid-template-columns: minmax(0, 1fr); }
.reviews-score { display: flex; align-items: center; gap: 8px; }
.rating { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.rating__stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.rating__stars input { position: absolute; opacity: 0; pointer-events: none; }
.rating__stars label { color: var(--text-4); cursor: pointer; transition: color .15s, transform .15s var(--ease); }
.rating__stars label:hover, .rating__stars label:hover ~ label, .rating__stars input:checked ~ label { color: var(--gold); }
.rating__stars label:active { transform: scale(.9); }
.rating__stars input:focus-visible + label { outline: 1px solid var(--gold-hi); outline-offset: 2px; }

/* ==========================================================================
   24. Forms pages (booking, collaboration), search, text pages
   ========================================================================== */
.form-page__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 1000px) { .form-page__grid { grid-template-columns: minmax(0, 1fr); } }
.form-aside { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 16px; }
.form-aside .card { display: grid; gap: 14px; }
.form-aside__date { font: 400 1.5rem/1.2 var(--font-name); color: var(--text); }
.booking { background: var(--panel); border: 1px solid var(--line); border-top-color: rgba(var(--key-rgb), .18); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 36px); }
.stepper { display: none; list-style: none; gap: 8px; margin-bottom: 8px; }
.booking.is-stepped .stepper { display: flex; }
.stepper li { flex: 1; font: 500 10px/1.3 var(--font-legend); letter-spacing: .18em; text-transform: uppercase; color: var(--text-4); padding-top: 12px; border-top: 1px solid var(--line-3); transition: color .3s, border-color .3s; }
.stepper li.is-active { color: var(--gold-hi); border-color: var(--gold); }
.step { border: 0; margin: 0; padding: 0; display: grid; gap: 20px; }
.booking:not(.is-stepped) .step + .step { margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--line); }
.step__title { padding: 0; margin-bottom: 4px; }
.step__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
.step__nav .btn:only-child { margin-left: auto; }
.booking:not(.is-stepped) .step__nav [data-next], .booking:not(.is-stepped) .step__nav [data-prev] { display: none; }
.date-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 720px) { .date-grid { grid-template-columns: minmax(0, 1fr); } }
.js .date-grid input[type="date"] { display: none; }
.js .date-grid .field:has(input[type="date"]) .field__label { display: none; }
.sent-card { display: grid; gap: 16px; justify-items: start; padding: clamp(28px, 5vw, 56px); }
.sent-card__icon { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--rule-3); }
.search-count { margin-bottom: 16px; font: 400 15px/1 var(--font-name); }
.search-results { display: grid; gap: 4px; }
.prose--page { max-width: 72ch; }
.page-updated { margin-top: 48px; font-size: 13px; }

/* ==========================================================================
   25. Checkout, orders, purchases
   ========================================================================== */
.form > .btn:not(.btn--block) { justify-self: start; }
.checkout__title { margin-bottom: 32px; }
.checkout__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .checkout__grid { grid-template-columns: minmax(0, 1fr); } }
.checkout__lines { padding: 14px; }
.checkout__total { padding: 16px 8px 6px; }
.cart-line--static { grid-template-columns: 64px minmax(0, 1fr) auto; }
.order__lead { margin: 18px 0 32px; }
.order__block { margin-bottom: 16px; display: grid; gap: 12px; }
.order-lines { list-style: none; display: grid; gap: 8px; }
.order-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r); flex-wrap: wrap; }
.order-line__text { display: grid; gap: 2px; }
.serial { display: inline-block; margin-top: 6px; font-family: var(--font-mono); font-size: 1.1rem; letter-spacing: .08em; color: var(--gold-hi); }
.order__summary { margin-top: 28px; border-top: 1px solid var(--line-3); }
.order__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-2); font-size: 14.5px; }
.order__row--total { font-size: 1.1rem; font-weight: 600; }
.spinner--inline { display: inline-block; width: 16px; height: 16px; vertical-align: -2px; }
.order-list { display: grid; gap: 8px; }
.order-list__item { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: var(--r); transition: border-color var(--dur); }
.order-list__item:hover { border-color: var(--line-3); }
.purchases .lead { margin: 18px 0 24px; }
.purchases__account { margin-top: 18px; }

/* ==========================================================================
   26. Accounts
   ========================================================================== */
/* The account pages stand on the stage: the card in the middle of two crossing lamps hung under the strip, on the floor,
   in a little more smoke than anywhere else. */
.auth { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; display: grid; place-items: center; padding: calc(var(--nav-h) + 40px) 16px 60px; }
.auth::before { content: ""; position: absolute; inset: 0; z-index: -3; background: radial-gradient(44% 40% at 50% 40%, rgba(var(--night-rgb), .34), transparent 72%), linear-gradient(180deg, var(--ink) 0%, #080b12 50%, #0b0f17 64%, var(--ink) 100%); }
.auth__set { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.auth__floor { --floor-top: 64%; --pool-x: 50%; --pool-y: 22%; --pool-w: 28%; --pool-h: 60%; }
.auth__smoke { --smoke-top: 50%; --smoke-h: 36%; --smoke-a: .42; --smoke-time: 120s; --breath-time: 25s; }
.auth__air { --smoke-top: 4%; --smoke-h: 72%; --smoke-a: .18; }
.auth__lamp { z-index: -1; --rig-top: var(--nav-h); --throw: calc(100svh - var(--nav-h) - 30px); --spread: 20deg; --a: .21; --arrive: lamp-finds-from-left; }
.auth__lamp--right { --a: .17; --arrive: lamp-finds-from-right; }
.motion-ok .auth__lamp .rig__aim { animation: var(--arrive) 1.6s cubic-bezier(.3, .7, .15, 1) .08s backwards; }
.motion-ok .auth__lamp .rig__beam { animation: lamps-up 1.7s var(--ease-light) .4s backwards; }
/* The card is a solid flat standing in the light: lit along its top edge and washed from above, its shadow deep under it. */
.auth__card.card { position: relative; background: radial-gradient(90% 42% at 50% 0%, rgba(var(--key-rgb), .07), transparent 70%), linear-gradient(180deg, #0f1219, #0a0c11 60%, #08090d); box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(var(--key-rgb), .3), 0 70px 100px -50px #000, 0 24px 44px -24px rgba(0, 0, 0, .7); }
@media (max-width: 700px) { .auth__lamp--right { display: none; } .auth__floor { --floor-top: 72%; } }
.auth__card { width: min(440px, 100%); padding: clamp(28px, 5vw, 42px); display: grid; gap: 20px; }
.auth__head { display: grid; gap: 10px; justify-items: start; }
.auth__head img { margin-bottom: 8px; }
.auth__switch { text-align: center; font-size: 14.5px; }
.auth .field__label a { font-size: 13px; }
.portal__grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .portal__grid { grid-template-columns: minmax(0, 1fr); } }
.portal__side { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 20px; }
@media (max-width: 900px) { .portal__side { position: static; } }
.portal__who { display: flex; gap: 12px; align-items: center; }
.portal__who > span:last-child { display: grid; min-width: 0; font-size: 14px; }
.portal__who .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar--lg { width: 46px; height: 46px; font-size: 18px; }
.portal__nav { display: grid; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .portal__nav { display: flex; overflow-x: auto; gap: 6px; border-top: 0; } .portal__nav a { flex: none; } }
.portal__nav a { display: flex; align-items: center; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--line-2); font: 500 10.5px/1.3 var(--font-legend); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); transition: color var(--dur); }
.portal__nav a:hover { color: var(--text); }
.portal__nav a[aria-current="page"] { color: var(--gold-hi); }
.portal__head { margin-bottom: 26px; display: grid; gap: 8px; }
.portal__verify { margin-bottom: 20px; align-items: center; flex-wrap: wrap; }
.portal__verify .link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.library { display: grid; gap: 12px; }
.lib-item { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 12px 16px 12px 12px; border: 1px solid var(--line); border-top-color: rgba(var(--key-rgb), .14); border-radius: var(--r-lg); background: var(--panel); }
@media (max-width: 760px) { .lib-item { grid-template-columns: 110px minmax(0, 1fr); } .lib-item__actions { grid-column: 1 / -1; } }
.lib-item__cover { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; background: var(--ink-1); box-shadow: 0 0 0 1px var(--line-2); }
.lib-item__cover img, .lib-item__cover svg { width: 100%; height: 100%; object-fit: cover; }
.lib-item__body { display: grid; gap: 6px; min-width: 0; }
.lib-item__meta { font: 500 9.5px/1.3 var(--font-legend); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.lib-item__name { font: 400 1.7rem/1.1 var(--font-name); color: var(--text); }
.lib-item__state { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.lib-item__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.device-list { display: grid; gap: 10px; }
.device { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r); }
.device__icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--gold); box-shadow: inset 0 0 0 1px var(--line-2); flex: none; }
.device__text { display: grid; flex: 1; min-width: 0; gap: 2px; font-size: 14.5px; }
.redeem-form { max-width: 560px; }
.serial-input { font-family: var(--font-mono) !important; font-size: 1.25rem !important; letter-spacing: .08em; text-transform: uppercase; height: 60px !important; }
.settings-stack { display: grid; gap: 16px; max-width: 640px; }
.session-list { list-style: none; display: grid; gap: 6px; font-size: 14px; }
.session-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r); }


/* ==========================================================================
   27. The story (home) — four scenes on a stage
   As laid out here it is still: the chapters as a list beside the last scene
   (the app in the light, the free bundle on the floor in front of it).
   Section 28 pins the stage and plays the scenes with the scroll where the
   browser can, and the reader hasn't asked for less motion.
   ========================================================================== */
.story { position: relative; padding: clamp(64px, 8vw, 112px) 0 0; }
.story__skip { position: absolute; left: var(--gutter); top: 8px; z-index: 6; padding: 8px 12px; border-radius: var(--r); background: var(--ink-1); border: 1px solid var(--rule-3); font: 500 10.5px/1 var(--font-legend); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi); transform: translateY(-140%); opacity: 0; transition: transform .25s var(--ease), opacity .25s; }
.story__skip:focus { transform: none; opacity: 1; }
.story__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px); max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding-inline: var(--gutter); }
.story__set, .story__cue, .story__rig, .story__sheen, .story__veil { display: none; }
.story__scene { position: relative; order: 2; }
.story__act { display: none; }
.story__act.is-last { position: relative; display: grid; justify-items: center; gap: 26px; }

/* The things on the stage: screens with a screen's corner, lit along the top, reflected in the black floor, each over its
   mark with its name. */
.story__thing { position: relative; margin: 0; display: grid; justify-items: center; gap: 16px; }
.story__screen { position: relative; display: block; width: 100%; overflow: hidden; border-radius: var(--r-frame); background: var(--ink-2); box-shadow: var(--frame-shadow); }
.story__screen::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(var(--key-rgb), .4), inset 0 0 0 1px rgba(255, 255, 255, .05); }
.story__screen img { width: 100%; height: auto; }
.story__thing--lens .story__screen, .story__thing--picture .story__screen { aspect-ratio: 16 / 9; }
.story__thing--measured .story__screen, .story__thing--sound .story__screen { aspect-ratio: 16 / 10; }
.story__thing--lens img, .story__thing--picture img, .story__thing--measured img, .story__thing--sound img { height: 100%; object-fit: cover; object-position: 50% 0; }
.story__label { display: inline-flex; align-items: center; gap: 10px; font: 500 10px/1.2 var(--font-legend); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
/* The measuring light: a line of light crossing PluginTracer's screen, the part it has not read yet still in the dark. */
.story__scan { display: none; }
/* The finale: the app in the middle, the free bundle on the floor in front of it. */
.story__thing--centre { width: 100%; }
.story__bundle { display: flex; justify-content: center; gap: 4%; width: 100%; }
.story__thing--small { width: 29%; gap: 11px; }
.story__thing--small .story__screen { aspect-ratio: 16 / 10; border-radius: 6px; }
.story__thing--small img { height: 100%; object-fit: cover; }
.story__thing--small .story__label { font-size: 9px; letter-spacing: .2em; gap: 8px; }

.story__text { position: relative; z-index: 2; padding: 0; }
.story__eyebrow { margin-bottom: 18px; }
.story__chapters { list-style: none; display: grid; }
.story__chapter { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); column-gap: 18px; padding: 22px 0; border-top: 1px solid var(--line-2); }
.story__num { grid-row: span 2; display: flex; flex-direction: column; gap: 8px; font: 400 2.4rem/1 var(--font-title); color: var(--gold); }
.story__act-word { font: 500 12px/1 var(--font-legend); letter-spacing: .34em; text-transform: uppercase; color: var(--gold); }
.story__title { font: 400 clamp(1.9rem, 1.3rem + 1.9vw, 3.1rem)/1.04 var(--font-title); color: var(--text); }
.story__body { margin-top: 12px; max-width: 46ch; color: var(--text-2); font-size: clamp(1.02rem, .97rem + .25vw, 1.16rem); line-height: 1.6; }
.story__scale { display: none; }
@media (max-width: 900px) { .story__stage { grid-template-columns: minmax(0, 1fr); } .story__scene { order: 0; width: min(100%, 560px); margin: 0 auto; } }

/* Words set one by one keep their line. */
.w { display: inline-block; vertical-align: top; }
.w__i { display: inline-block; }

/* ==========================================================================
   28. Motion — played by the scroll
   Scrolling works the lights and the stage. At the top the lamps go down and
   swing away; FREE's letters turn away one by one, the bundle's pictures
   fold back, and the two sides turn apart like doors onto the story. The
   story stays in place while its scenes are played: things are brought on
   out of the dark, turn to face you in the light and keep turning slowly
   while they are lit, then are taken off as the next come on — each scene
   with lamps that follow them. The plugins pass under one lamp that stays
   still, resting under it one at a time. Heads come into the light word by
   word; things in rows swing up into the light, a column after the one
   before it; a page's head tips back as you leave it.
   Every move eases in and out between its marks, so nothing starts or
   stops with a jerk; the browser ties it all to the scroll itself
   (scroll-driven animations), so nothing trails behind, and only
   transforms and opacity move. Without that support, or with reduced
   motion, the page stands still.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* — The hall: the blue shadow behind everything rises a little slower than the page. */
    body::before { inset: -6vh 0; animation: hall-drifts linear both; animation-timeline: scroll(root block); }
    @keyframes hall-drifts { from { translate: 0 4vh; } to { translate: 0 -4vh; } }
    /* At the foot the footlights come up as it arrives, and its columns stand up into the light one after another. */
    .site-footer { view-timeline: --foot block; }
    .site-footer::before { animation: lamp-up var(--glide-in) both; animation-timeline: --foot; animation-range: entry 0% entry 100%; }
    @keyframes lamp-up { from { opacity: 0; } }
    .footer-grid > * { transform-origin: 50% 100%; animation: stands-up-small var(--glide-in) both; animation-timeline: --foot; animation-range: entry calc(var(--col, 0) * 8%) entry calc(55% + var(--col, 0) * 9%); }
    .footer-grid > :nth-child(2) { --col: 1; }
    .footer-grid > :nth-child(3) { --col: 2; }
    .footer-grid > :nth-child(4) { --col: 3; }
    .footer-grid > :nth-child(5) { --col: 4; }
    @keyframes stands-up-small { from { opacity: 0; translate: 0 44px; rotate: x 38deg; } }

    /* — Leaving the top of the home page. The lamps go down and swing away; the wall behind tips back and sinks into
         the dark; FREE's letters turn away one after another, the bundle's pictures fold back, the title tips away and
         the steps slide off; and the two sides turn apart like doors opening onto the story. (Individual transform
         properties where the mouse lean also moves a piece, so both keep working.) */
    .htop { view-timeline: --htop block; }
    .htop::after { content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; background: var(--ink); opacity: 0; animation: stage-goes-dark var(--glide) both; animation-timeline: --htop; animation-range: exit 35% exit 100%; }
    @keyframes stage-goes-dark { to { opacity: 1; } }
    .htop__lights { animation: lamps-down var(--glide) both; animation-timeline: --htop; animation-range: exit 0% exit 75%; }
    .motion-ok .htop__lights { animation: lamps-up 1.9s var(--ease-light) .1s backwards, lamps-down var(--glide) both; animation-timeline: auto, --htop; animation-range: normal, exit 0% exit 75%; }
    @keyframes lamps-down { to { opacity: 0; } }
    .htop__lamp .rig__aim { animation: var(--leave) var(--glide) both; animation-timeline: --htop; animation-range: exit 0% exit 80%; }
    .motion-ok .htop__lamp .rig__aim { animation: var(--arrive) 1.6s cubic-bezier(.3, .7, .15, 1) .08s backwards, var(--leave) var(--glide) both; animation-timeline: auto, --htop; animation-range: normal, exit 0% exit 80%; }
    @keyframes lamp-swings-off-left { to { rotate: 30deg; } }
    @keyframes lamp-swings-off-right { to { rotate: -30deg; } }
    .htop__rig .rig__beam { animation: lamps-down var(--glide) both; animation-timeline: --htop; animation-range: exit 0% exit 70%; }
    .motion-ok .htop__rig .rig__beam { animation: lamps-up 1.7s var(--ease-light) .45s backwards, lamps-down var(--glide) both; animation-timeline: auto, --htop; animation-range: normal, exit 0% exit 70%; }
    .htop__wall { transform-origin: 50% 100%; animation: wall-sinks var(--glide) both; animation-timeline: --htop; animation-range: exit 0% exit 100%; }
    .motion-ok .htop__wall { animation: wall-in 2.05s cubic-bezier(.16, 1, .3, 1) .05s both, wall-sinks var(--glide) both; animation-timeline: auto, --htop; animation-range: normal, exit 0% exit 100%; }
    @keyframes wall-sinks { to { transform: perspective(1400px) rotateX(26deg) translateY(10vh) scale(1.1); opacity: 0; } }
    .htop__deal { transform-origin: 0 50%; animation: deal-turns-away var(--glide) both; animation-timeline: --htop; animation-range: exit 0% exit 100%; }
    @keyframes deal-turns-away { to { translate: -5vw -16vh; rotate: y 38deg; opacity: 0; } }
    .htop__app { transform-origin: 100% 50%; animation: app-turns-away var(--glide) both; animation-timeline: --htop; animation-range: exit 0% exit 100%; }
    @keyframes app-turns-away { to { translate: 5vw -8vh; rotate: y -40deg; opacity: 0; } }
    .htop__letter { transform-origin: 50% 80%; animation: letter-turns-away var(--glide) both; animation-timeline: --htop; animation-range: exit calc(var(--l) * 5%) exit calc(50% + var(--l) * 9%); }
    .motion-ok .htop__letter { animation: letter-turns-in 1.2s cubic-bezier(.16, 1, .3, 1) calc(.25s + var(--l) * .085s) backwards, letter-turns-away var(--glide) both; animation-timeline: auto, --htop; animation-range: normal, exit calc(var(--l) * 5%) exit calc(50% + var(--l) * 9%); }
    @keyframes letter-turns-away { to { transform: perspective(700px) translateY(-.3em) rotateY(-82deg); opacity: 0; } }
    .htop__plugin { transform-origin: 0 50%; animation: picture-folds-back var(--glide) both; animation-timeline: --htop; animation-range: exit calc(var(--i, 0) * 7%) exit calc(55% + var(--i, 0) * 10%); }
    .motion-ok .htop__plugin { animation: rise-in 1.1s cubic-bezier(.16, 1, .3, 1) calc(.5s + var(--i, 0) * .1s) backwards, picture-folds-back var(--glide) both; animation-timeline: auto, --htop; animation-range: normal, exit calc(var(--i, 0) * 7%) exit calc(55% + var(--i, 0) * 10%); }
    @keyframes picture-folds-back { to { transform: perspective(900px) rotateY(-72deg) translateZ(-40px); opacity: 0; } }
    .htop__title { transform-origin: 0 100%; animation: title-tips-away var(--glide) both; animation-timeline: --htop; animation-range: exit 5% exit 70%; }
    .motion-ok .htop__title { animation: rise-in 1.05s cubic-bezier(.16, 1, .3, 1) .65s backwards, title-tips-away var(--glide) both; animation-timeline: auto, --htop; animation-range: normal, exit 5% exit 70%; }
    @keyframes title-tips-away { to { transform: perspective(900px) rotateX(46deg) translateY(-14px); opacity: 0; } }
    .htop__steps li { animation: step-slides-off var(--glide) both; animation-timeline: --htop; animation-range: exit calc(8% + var(--s, 0) * 6%) exit calc(60% + var(--s, 0) * 8%); }
    .htop__steps li:nth-child(2) { --s: 1; }
    .htop__steps li:nth-child(3) { --s: 2; }
    @keyframes step-slides-off { to { translate: -70px 0; opacity: 0; } }

    /* — Heads come into the light: the lamp over a section's head comes up as you reach it, its label slides in, its
         words turn up into the light one after another and the line under them tips up after them. */
    .section-head, .toplist__head, .steps-band, .statement, .access-band { view-timeline: --head block; }
    .home-studios, .home-collab { view-timeline: --sect block; }
    .section-lamp .rig__aim { animation: lamp-finds-scrolled var(--glide-in) both; animation-timeline: --sect; animation-range: entry 0% cover 34%; }
    .section-lamp .rig__beam { animation: lamp-up var(--glide-in) both; animation-timeline: --sect; animation-range: entry 20% cover 36%; }
    /* The dish over the studios settles as their row comes up, and the light comes up on the floor with it; the smoke
       travels with the scroll. */
    .rig--dish.section-lamp .rig__aim { animation-name: dish-settles; }
    @keyframes dish-settles { from { rotate: -10deg; } }
    /* The lights on stands come on as you reach them. */
    .kit__light, .kit__glow { animation: lamp-up var(--glide-in) both; animation-timeline: --sect; animation-range: entry 40% cover 50%; }
    .stage-set .floor__light { animation: lamp-up var(--glide-in) both; animation-timeline: --sect; animation-range: entry 30% cover 46%; }
    .stage-set__smoke { animation: smoke-travels-left linear both; animation-timeline: --sect; }
    .stage-set__air { animation: smoke-travels-right linear both; animation-timeline: --sect; }
    @keyframes lamp-finds-scrolled { from { rotate: -36deg; } }
    .section-head .eyebrow, .toplist__head .eyebrow { animation: label-slides-in var(--glide-in) both; animation-timeline: --head; animation-range: entry 12% cover 32%; }
    @keyframes label-slides-in { from { opacity: 0; translate: -46px 0; } }
    .section-head .w__i, .toplist__title .w__i, .steps-band .w__i { transform-origin: 50% 100%; animation: word-turns-up var(--glide-in) both; animation-timeline: --head; animation-range: entry calc(24% + var(--w) * 6%) cover calc(36% + var(--w) * 4%); }
    @keyframes word-turns-up { from { opacity: 0; transform: perspective(600px) rotateX(-88deg) translateY(.2em); } to { opacity: 1; transform: none; } }
    .section-head__lead, .toplist__lead { transform-origin: 50% 0; animation: line-tips-up var(--glide-in) both; animation-timeline: --head; animation-range: entry 48% cover 42%; }
    @keyframes line-tips-up { from { opacity: 0; transform: perspective(900px) rotateX(-40deg) translateY(18px); } }
    .section-head > .row, .section-head > .link-arrow, .toplist__controls { animation: label-slides-in-right var(--glide-in) both; animation-timeline: --head; animation-range: entry 38% cover 40%; }
    @keyframes label-slides-in-right { from { opacity: 0; translate: 46px 0; } }
    /* At the top of a page there is nothing to scroll yet: its lamp comes up and the title turns up once, as the page
       opens. Scrolling on, the head tips back and the lamp swings off. */
    .page-head .w__i, .ahero .h1 .w__i, .phero__name .w__i, .shero .h1 .w__i, .film-body .h1 .w__i { transform-origin: 50% 100%; animation: word-turns-up-once 1.05s cubic-bezier(.2, .75, .2, 1) calc(.15s + var(--w) * .07s) both; }
    @keyframes word-turns-up-once { from { opacity: 0; transform: perspective(600px) rotateX(-88deg) translateY(.2em); } }
    .page-head, .phero, .ahero { view-timeline: --phead block; }
    .page-lamp .rig__aim { animation: var(--arrive, lamp-finds-from-right) 1.5s cubic-bezier(.3, .7, .15, 1) .1s backwards, page-lamp-swings-off var(--glide) both; animation-timeline: auto, --phead; animation-range: normal, exit 0% exit 100%; }
    @keyframes page-lamp-swings-off { to { rotate: 34deg; } }
    .page-lamp .rig__beam { animation: lamp-up-once 1.7s var(--ease-light) .3s backwards, lamps-down var(--glide) both; animation-timeline: auto, --phead; animation-range: normal, exit 0% exit 90%; }
    @keyframes lamp-up-once { from { opacity: 0; } }
    .page-head > .container, .phero__grid, .ahero__grid > :first-child { transform-origin: 50% 0; animation: head-tips-back var(--glide) both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    @keyframes head-tips-back { to { transform: perspective(1400px) rotateX(26deg) translateY(-5vh) scale(.96); opacity: .1; } }

    /* — Things in rows swing up into the light row by row, tipping up off the floor and turning in from their side —
         the left column from the left, the right from the right — each column after the one before it. Their pictures
         drift a little inside their frames, nearer than the page. */
    .pgrid, .sgrid, .agrid, .rgrid, .shgrid, .works--grid, .works--wide, .gallery, .features, .team, .licence-terms { perspective: 1500px; }
    .pgrid > *, .sgrid > :not(.stage__glint), .agrid > *, .rgrid > *, .shgrid > *, .works--grid > *, .works--wide > *, .gallery > *, .team > *, .licence-terms > * {
      transform-origin: 50% 100%;
      animation: swings-into-the-light var(--glide-in) both, tips-back-away var(--glide) forwards;
      animation-timeline: view(), view();
      animation-range: entry calc(12% + var(--col, 0) * 7%) cover calc(40% + var(--col, 0) * 5%), exit 15% exit 100%;
    }
    :is(.pgrid, .sgrid, .agrid, .rgrid, .shgrid, .works--grid, .works--wide, .gallery, .team, .licence-terms) > :nth-child(3n + 1) { --fan: -1; }
    :is(.pgrid, .sgrid, .agrid, .rgrid, .shgrid, .works--grid, .works--wide, .gallery, .team, .licence-terms) > :nth-child(3n + 2) { --col: 1; --fan: 0; }
    :is(.pgrid, .sgrid, .agrid, .rgrid, .shgrid, .works--grid, .works--wide, .gallery, .team, .licence-terms) > :nth-child(3n) { --col: 2; --fan: 1; }
    .home-studios .sgrid > :nth-child(3n + 2) { --col: 0; --fan: -1; }
    .home-studios .sgrid > :nth-child(3n) { --col: 1; --fan: 0; }
    .home-studios .sgrid > :nth-child(3n + 1):not(:first-child) { --col: 2; --fan: 1; }
    @keyframes swings-into-the-light {
      from { opacity: 0; translate: 0 90px; rotate: 1 calc(var(--fan, 0) * -1.1) 0 30deg; }
      to { opacity: 1; translate: 0 0; rotate: 1 calc(var(--fan, 0) * -1.1) 0 0deg; }
    }
    /* In one column there is no side to turn in from: things only tip up. */
    @media (max-width: 760px) { :is(.pgrid, .sgrid, .agrid, .rgrid, .shgrid, .works--grid, .works--wide, .gallery, .team, .licence-terms) > * { --fan: 0 !important; } }
    .pcard__img, .pcard__svg, .scard__img, .acard__cover img, .gallery__item img, .member__photo img { scale: 1.12; animation: inner-drift linear both; animation-timeline: view(); }
    @keyframes inner-drift { from { translate: 0 -4.5%; } to { translate: 0 4.5%; } }
    /* A programme's notes come in from the side, column after column. */
    .feature { animation: key-in var(--glide-in) both, tips-back-away var(--glide) forwards; animation-timeline: view(), view(); animation-range: entry calc(12% + var(--col, 0) * 8%) cover calc(38% + var(--col, 0) * 5%), exit 15% exit 100%; }
    .features > :nth-child(3n + 2) { --col: 1; }
    .features > :nth-child(3n) { --col: 2; }
    .features--4 > :nth-child(4n + 2) { --col: 1; }
    .features--4 > :nth-child(4n + 3) { --col: 2; }
    .features--4 > :nth-child(4n) { --col: 3; }
    @keyframes key-in { from { opacity: 0; translate: -44px 0; } to { opacity: 1; translate: 0 0; } }
    .steps li, .how__steps li, .facts > div, .specs__row, .release, .faq__item, .price-row { transform-origin: 50% 0; animation: row-in var(--glide-in) both, rolls-away var(--glide) forwards; animation-timeline: view(), view(); animation-range: entry 10% cover 24%, exit 25% exit 100%; }
    @keyframes row-in { from { opacity: 0; translate: 0 26px; rotate: x -32deg; } to { opacity: 1; translate: 0 0; rotate: x 0deg; } }

    /* — A product's picture stands up into its light as it comes up, as if lifted off the floor; its lamp comes up. Big
         pictures elsewhere turn in from the side to face you. */
    .phero__frame { transform-origin: 50% 100%; animation: stands-up var(--glide-in) both; animation-timeline: view(); animation-range: entry 8% cover 50%; }
    @keyframes stands-up { from { transform: perspective(1900px) rotateX(38deg) scale(.9); opacity: .2; } to { transform: none; opacity: 1; } }
    .phero__shot { view-timeline: --shot block; }
    .showcase, .player, .media-frame, .ahero__shot, .feature-film { animation: frame-in var(--glide-in) both, tips-back-away var(--glide) forwards; animation-timeline: view(), view(); animation-range: entry 8% cover 46%, exit 20% exit 100%; }
    @keyframes frame-in { from { transform: perspective(1700px) translateX(5vw) rotateY(-30deg) scale(.94); opacity: .2; } to { transform: none; opacity: 1; } }

    /* — The collaboration's words tip up off the floor into the crossing light, the title word by word. */
    .statement { transform-origin: 50% 100%; animation: panel-tips-up var(--glide-in) both; animation-timeline: --head; animation-range: entry 8% cover 46%; }
    @keyframes panel-tips-up { from { opacity: .25; transform: perspective(1800px) rotateX(20deg) scale(.95); } to { opacity: 1; transform: none; } }
    .statement__title .w__i { transform-origin: 50% 100%; animation: word-turns-up var(--glide-in) both; animation-timeline: --head; animation-range: cover calc(14% + var(--w) * 3%) cover calc(32% + var(--w) * 3%); }
    .statement__text, .statement .btn { transform-origin: 50% 0; animation: row-in var(--glide-in) both; animation-timeline: --head; animation-range: cover 26% cover 42%; }

    /* — Every page plays with the scroll. What comes up assembles itself: words roll up into place line by line,
         panels stand up off the floor, fields, choices and filters drop in one after another, pictures drift in their
         frames, a gallery passes under its own lamp. What leaves at the top tips back into the dark. (The big pieces
         of the home page have their own motion.) */
    :where(body:not([data-page="home"])) :is(.prose, .split__text, .requirements, .donate__head, .order > .container, .purchases > .container, .error-page > .container, .donate-page__side, .page > .container > .lead) > :is(p, h2, h3, h4, ul, ol, blockquote, .lead, .h2, .h3, .muted, .link-arrow, .row, .order__thanks, .error-page__code) {
      transform-origin: 50% 0;
      animation: rolls-in var(--glide-in) both, rolls-away var(--glide) forwards;
      animation-timeline: view(), view();
      animation-range: entry 10% cover 30%, exit 25% exit 100%;
    }
    @keyframes rolls-in { from { opacity: 0; translate: 0 34px; rotate: x -26deg; } }
    @keyframes rolls-away { to { opacity: .1; translate: 0 -16px; rotate: x 34deg; } }
    :where(body:not([data-page="home"])) :is(.card, .panel, .contact-card, .callout, .how, .steps-band, .booking, .donate, .empty, .donors) {
      transform-origin: 50% 100%;
      animation: stands-up-off-the-floor var(--glide-in) both, tips-back-away var(--glide) forwards;
      animation-timeline: view(), view();
      animation-range: entry 6% cover 38%, exit 12% exit 100%;
    }
    @keyframes stands-up-off-the-floor { from { opacity: 0; transform: perspective(1600px) translateY(80px) rotateX(28deg) scale(.94); } }
    @keyframes tips-back-away { to { opacity: .1; transform: perspective(1600px) translateY(-6vh) rotateX(-18deg) scale(.95); } }
    :where(body:not([data-page="home"])) :is(.form-grid, .donate__fields, .donate__chips, .choices, .filters, .message-links, .order-list, .steps-band .row, .callout .row) > * {
      animation: drops-in var(--glide-in) both;
      animation-timeline: view();
      animation-range: entry calc(14% + var(--k, 0) * 4%) cover calc(28% + var(--k, 0) * 3%);
    }
    :is(.form-grid, .donate__fields, .donate__chips, .choices, .filters, .message-links, .order-list) > :nth-child(2) { --k: 1; }
    :is(.form-grid, .donate__fields, .donate__chips, .choices, .filters, .message-links, .order-list) > :nth-child(3) { --k: 2; }
    :is(.form-grid, .donate__fields, .donate__chips, .choices, .filters, .message-links, .order-list) > :nth-child(4) { --k: 3; }
    :is(.form-grid, .donate__fields, .donate__chips, .choices, .filters, .message-links, .order-list) > :nth-child(5) { --k: 4; }
    :is(.form-grid, .donate__fields, .donate__chips, .choices, .filters, .message-links, .order-list) > :nth-child(6) { --k: 5; }
    :is(.form-grid, .donate__fields, .donate__chips, .choices, .filters, .message-links, .order-list) > :nth-child(n+7) { --k: 6; }
    @keyframes drops-in { from { opacity: 0; translate: 0 26px; scale: .96; } }
    :where(body:not([data-page="home"])) .section-head { transform-origin: 50% 100%; animation: tips-back-away var(--glide) forwards; animation-timeline: view(); animation-range: exit 15% exit 100%; }
    :where(body:not([data-page="home"])) :is(.media-frame, .split__media) img { scale: 1.1; animation: inner-drift linear both; animation-timeline: view(); }
    /* The head of a page: its smoke is carried off with the scroll and the blue shadow behind lags a little. */
    .page-head__set .stage-set__smoke { animation: smoke-leaves-right linear both; animation-timeline: --phead; animation-range: exit 0% exit 100%; }
    .page-head__set .stage-set__air { animation: smoke-leaves-left linear both; animation-timeline: --phead; animation-range: exit 0% exit 100%; }
    .page-head::before { animation: haze-lags linear both; animation-timeline: --phead; animation-range: exit 0% exit 100%; }
    @keyframes haze-lags { to { translate: 0 28%; opacity: .5; } }
    main > .page-floor .stage-set__smoke { animation: smoke-travels-left linear both; animation-timeline: view(); }
    main > .page-floor .stage-set__air { animation: smoke-travels-right linear both; animation-timeline: view(); }
    /* A gallery on a big screen: the section stays put and the pictures pass one by one under a lamp that stands still,
         each turning into the light as it arrives and away as it goes. (The script pins it when the screen is big
         enough.) */
    .block--gallery.is-reeling { --item-w: min(900px, 64vw, calc((100svh - var(--nav-h) - 250px) * 1.6)); --gap: 6vw; height: calc(var(--n) * 58svh + 60svh); padding: 0; view-timeline: --reel block; }
    .block--gallery.is-reeling .reel-pin { --floor-h: clamp(220px, 28vh, 330px); position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; justify-content: center; overflow: hidden; isolation: isolate; }
    .block--gallery.is-reeling :is(.reel__set, .reel__batten, .reel__lamp) { display: block; }
    .block--gallery.is-reeling .reel__lamp { --x: 50%; --aim: 0deg; --spread: 21deg; --a: .2; --throw: calc(100svh - var(--nav-h) - 90px); z-index: 0; }
    .block--gallery.is-reeling .gallery { display: flex; width: max-content; gap: var(--gap); margin-left: calc(50% - 50vw); padding: 10px calc((100vw - var(--item-w)) / 2) 24px; will-change: translate; animation: reel-travels linear both; animation-timeline: --reel; animation-range: contain 0% contain 100%; }
    @keyframes reel-travels { to { translate: calc((var(--n) - 1) * (var(--item-w) + var(--gap)) * -1) 0; } }
    .block--gallery.is-reeling .gallery__item { flex: none; width: var(--item-w); box-shadow: var(--frame-shadow); animation: passes-the-light var(--glide) both; animation-timeline: --reel; animation-range: contain calc((var(--i) - 1) / (var(--n) - 1) * 100%) contain calc((var(--i) + 1) / (var(--n) - 1) * 100%); }
    .block--gallery.is-reeling .gallery__item img { scale: 1; animation: none; }
    /* — Smoke travels with the scroll as well as drifting on its own: scrolling carries each layer the way it already
         drifts, only faster, and it slows again when the page stops. The low smoke goes one way, the haze higher up the
         other, the veil in front fastest. In the story it travels while the stage is held. */
    .story__smoke { animation: smoke-travels-left linear both; animation-timeline: --story; animation-range: contain 0% contain 100%; }
    .story__air { animation: smoke-travels-right linear both; animation-timeline: --story; animation-range: contain 0% contain 100%; }
    .story__veil { animation: smoke-travels-far linear both; animation-timeline: --story; animation-range: contain 0% contain 100%; }
    .htop__smoke { animation: smoke-leaves-right linear both; animation-timeline: --htop; animation-range: exit 0% exit 100%; }
    .htop__air { animation: smoke-leaves-left linear both; animation-timeline: --htop; animation-range: exit 0% exit 100%; }
    .toplist.is-pinned .toplist__smoke { animation: smoke-travels-left linear both; animation-timeline: --rack; animation-range: contain 0% contain 100%; }
    .toplist.is-pinned .toplist__air { animation: smoke-travels-right linear both; animation-timeline: --rack; animation-range: contain 0% contain 100%; }
    @keyframes smoke-travels-left { from { translate: 16vw 0; } to { translate: -16vw 0; } }
    @keyframes smoke-travels-right { from { translate: -11vw 0; } to { translate: 11vw 0; } }
    @keyframes smoke-travels-far { from { translate: 18vw 0; } to { translate: -18vw 0; } }
    @keyframes smoke-leaves-left { to { translate: -10vw 0; } }
    @keyframes smoke-leaves-right { to { translate: 14vw 0; } }

    /* — The story: the section is as tall as its scenes; the stage stays in place while they are played. */
    .story { --scene-x: 43vw; --scene-w: 53vw; --scene-top: calc(var(--nav-h) + var(--batten-h) + 100px); --scene-h: calc(100svh - var(--scene-top) - 12vh); padding: 0; height: calc((var(--n) * .78 + 1) * 100svh); view-timeline: --story block; }
    .story__stage { position: sticky; top: 0; display: block; height: 100svh; max-width: none; padding: 0; overflow: hidden; }
    /* The set: a back wall with blue light on it, the line where it meets the floor, and the floor itself — black,
       its boards running away from you; as the scenes go by the floor slides under them, faster than the wall. */
    .story__set { display: block; position: absolute; inset: 0; pointer-events: none; }
    .story__wall { position: absolute; inset: 0 -8vw; background: radial-gradient(46% 40% at 68% 58%, rgba(var(--key-rgb), .07), transparent 72%), radial-gradient(40% 44% at 68% 40%, rgba(var(--night-rgb), .3), transparent 72%), linear-gradient(180deg, var(--ink) 0%, #07090e 50%, #0c1018 61%, #06080b 64%, var(--ink) 100%); animation: wall-drifts linear both; animation-timeline: --story; }
    @keyframes wall-drifts { from { translate: 4vw 0; } to { translate: -4vw 0; } }
    .story__floor { --floor-top: 60%; --pool-x: 69%; --pool-y: 52%; --pool-w: 36%; --pool-h: 56%; }
    .story__smoke { --smoke-top: 42%; --smoke-h: 36%; --smoke-a: .42; }
    .story__air { --smoke-top: 4%; --smoke-h: 72%; --smoke-a: .15; }
    /* A very faint veil of it in front of the things on the stage. */
    .story__veil { display: block; z-index: 1; --smoke-top: 16%; --smoke-h: 58%; --smoke-a: .06; --smoke-way: normal; --smoke-time: 210s; --breath-time: 43s; }
    /* Behind the words the dark is deeper, so a thing crossing behind them never gets in their way. */
    .story__stage::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(6, 7, 9, .94) 0%, rgba(6, 7, 9, .82) 26%, rgba(6, 7, 9, .2) 44%, transparent 52%); }

    /* The scenes, in turn, in the same place on the stage; the camera trucks slowly across it and eases out a little as
       the story goes on. */
    .story__scene { position: absolute; inset: 0; z-index: 1; order: 0; width: auto; margin: 0; animation: camera-trucks linear both; animation-timeline: --story; }
    @keyframes camera-trucks { from { translate: 2.5vw 0; } to { translate: -2.5vw 0; } }
    .story__act, .story__act.is-last { position: absolute; left: var(--scene-x); width: var(--scene-w); top: var(--scene-top); height: var(--scene-h); display: grid; align-content: end; justify-items: center; gap: 0; --from: calc(var(--c) / var(--n) * 100%); --to: calc((var(--c) + 1) / var(--n) * 100%); }
    /* The rig over the stage: a bar under the strip with five lamps. Which lamps each scene switches on, and where they
       aim — swinging out to catch what comes on, settling on it, following it off, turning to their next marks in the
       dark — is written into the page with the story, since it depends on its chapters. Under each scene, the pool of
       light its lamps make on the floor. */
    .story__rig { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .story__rig > .batten { top: var(--nav-h); }
    .story__lamp { --rig-top: calc(var(--nav-h) + var(--batten-h)); --throw: calc(88svh - var(--nav-h) - 60px); --spread: 15deg; --a: .26; }
    @media (max-width: 900px) { .story__lamp { --throw: calc(42svh - 30px); } }
    .story__cue { display: block; position: absolute; left: 0; right: 0; top: calc(var(--scene-top) * -1); bottom: 0; pointer-events: none; animation: cue var(--glide) both; animation-timeline: --story; animation-range: contain var(--from) contain var(--to); }
    .story__act.is-first .story__cue { animation-range: entry 45% contain var(--to); }
    .story__act.is-last .story__cue { animation-name: cue-stays; animation-range: contain var(--from) contain 100%; }
    @keyframes cue { 0%, 12% { opacity: 0; } 30%, 70% { opacity: 1; } 88%, 100% { opacity: 0; } }
    @keyframes cue-stays { 0%, 12% { opacity: 0; } 34%, 100% { opacity: 1; } }
    .story__pool { left: 50%; bottom: 0; width: 86%; translate: -50% 46%; }
    .story__act--2 .story__pool { width: 112%; }
    .story__act--4 .story__pool { width: 120%; }

    /* What stands in each scene, sized to the stage. */
    .story__thing { gap: 18px; }
    .story__thing--lens, .story__thing--measured { width: min(90%, 820px, calc((var(--scene-h) - 60px) * 1.55)); }
    .story__act--2 { left: calc(var(--scene-x) - 3vw); width: calc(var(--scene-w) + 3vw); grid-template-columns: 1.05fr 1fr; column-gap: 4%; align-items: end; }
    .story__thing--picture { margin-bottom: 7vh; }
    .story__act.story__act--4 { gap: 6vh; }
    .story__thing--centre { width: min(54%, calc((var(--scene-h) - 24vh) * 1.45)); }
    .story__bundle { width: min(80%, calc((var(--scene-h) - 10vh) * 1.3)); }

    /* A thing is brought on out of the dark at the right, turns into the light to face you, keeps turning slowly while it
       is lit — a little the one way, a little the other, floating a little — and is taken off to the left, turning away
       again. Out of the light it is dark: a shade over its screen lifts as it arrives and falls as it goes. The last
       scene stays. */
    .story__thing { --on: calc((var(--c) - .16) / var(--n) * 100%); --off: calc((var(--c) + 1.16) / var(--n) * 100%); transform-origin: 50% 70%; animation: comes-on var(--glide) both, floats var(--glide) both; animation-timeline: --story, --story; animation-range: contain var(--on) contain var(--off), contain var(--on) contain var(--off); }
    .story__act.is-first .story__thing { animation-range: entry 45% contain var(--off), entry 45% contain var(--off); }
    .story__act.is-last .story__thing { animation-name: comes-on-and-stays, floats-and-stays; animation-range: contain var(--on) contain 100%, contain var(--on) contain 100%; }
    .story__thing--picture { animation-name: comes-on-from-the-left, floats; }
    @keyframes comes-on {
      0% { opacity: 0; transform: perspective(1500px) translate3d(48vw, 4vh, -520px) rotateY(-76deg) rotateX(8deg) skewY(6deg); }
      12% { opacity: 1; }
      27% { transform: perspective(1500px) translate3d(0, 0, 0) rotateY(-8deg) rotateX(0deg) skewY(0deg); }
      73% { transform: perspective(1500px) translate3d(0, 0, 0) rotateY(8deg) rotateX(0deg) skewY(0deg); }
      88% { opacity: 1; }
      100% { opacity: 0; transform: perspective(1500px) translate3d(-48vw, 4vh, -480px) rotateY(72deg) rotateX(6deg) skewY(-6deg); }
    }
    @keyframes comes-on-from-the-left {
      0% { opacity: 0; transform: perspective(1500px) translate3d(-42vw, 3vh, -520px) rotateY(74deg) rotateX(8deg) skewY(-6deg); }
      12% { opacity: 1; }
      27% { transform: perspective(1500px) translate3d(0, 0, 0) rotateY(10deg) rotateX(0deg) skewY(0deg); }
      73% { transform: perspective(1500px) translate3d(0, 0, 0) rotateY(-4deg) rotateX(0deg) skewY(0deg); }
      88% { opacity: 1; }
      100% { opacity: 0; transform: perspective(1500px) translate3d(-48vw, 4vh, -480px) rotateY(72deg) rotateX(6deg) skewY(-6deg); }
    }
    @keyframes comes-on-and-stays {
      0% { opacity: 0; transform: perspective(1500px) translate3d(48vw, 4vh, -520px) rotateY(-76deg) rotateX(8deg) skewY(6deg); }
      12% { opacity: 1; }
      40% { transform: perspective(1500px) translate3d(0, 0, 0) rotateY(-7deg) rotateX(0deg) skewY(0deg); }
      100% { opacity: 1; transform: perspective(1500px) translate3d(0, 0, 0) rotateY(4deg) rotateX(0deg) skewY(0deg); }
    }
    @keyframes floats { 0%, 27% { translate: 0 0; } 50% { translate: 0 -1.4vh; } 73%, 100% { translate: 0 0; } }
    @keyframes floats-and-stays { 0%, 40% { translate: 0 0; } 70% { translate: 0 -1.2vh; } 100% { translate: 0 0; } }
    .story__screen::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; background: #05060a; animation: shade-lifts var(--glide) both; animation-timeline: --story; animation-range: contain var(--on) contain var(--off); }
    .story__act.is-first .story__screen::before { animation-range: entry 45% contain var(--off); }
    .story__act.is-last .story__screen::before { animation-name: shade-lifts-and-stays; animation-range: contain var(--on) contain 100%; }
    @keyframes shade-lifts { 0% { opacity: .85; } 27%, 73% { opacity: 0; } 100% { opacity: .85; } }
    @keyframes shade-lifts-and-stays { 0% { opacity: .85; } 38%, 100% { opacity: 0; } }
    /* The free bundle rises onto the floor in front of the app one after another — the outer ones turning in from their
       side — each coming into its own light. */
    .story__bundle > :nth-child(1) { --fan: 1; }
    .story__bundle > :nth-child(3) { --fan: -1; }
    .story__act.is-last .story__thing--small { transform-origin: 50% 100%; animation-name: rises-into-the-light, floats-and-stays; animation-range: contain calc((var(--c) + .22 + var(--k) * .09) / var(--n) * 100%) contain 100%, contain calc((var(--c) + .5 + var(--k) * .05) / var(--n) * 100%) contain 100%; }
    .story__act.is-last .story__thing--small .story__screen::before { animation-name: shade-lifts-rising; animation-range: contain calc((var(--c) + .22 + var(--k) * .09) / var(--n) * 100%) contain 100%; }
    @keyframes rises-into-the-light {
      0% { opacity: 0; transform: perspective(900px) translateY(90px) rotateX(64deg) rotateY(calc(var(--fan, 0) * 30deg)); }
      30%, 100% { opacity: 1; transform: perspective(900px) translateY(0) rotateX(0deg) rotateY(0deg); }
    }
    @keyframes shade-lifts-rising { 0% { opacity: .85; } 30%, 100% { opacity: 0; } }
    .story__thing::before { content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; bottom: 12px; height: 34px; pointer-events: none; background: radial-gradient(closest-side, rgba(0, 0, 0, .72), rgba(0, 0, 0, .3) 55%, transparent); }
    .story__thing::after { content: ""; position: absolute; z-index: -1; left: -10%; right: -10%; bottom: -34px; height: 84px; pointer-events: none; background: radial-gradient(closest-side, rgba(120, 165, 235, .16), rgba(120, 165, 235, .05) 55%, transparent); }
    .story__sheen { display: block; position: absolute; z-index: 3; inset: -10% -40%; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 244, 228, .1) 46%, rgba(255, 250, 240, .24) 50%, rgba(255, 244, 228, .1) 54%, transparent 62%); animation: light-runs-across var(--glide) both; animation-timeline: --story; animation-range: contain var(--on) contain var(--off); }
    .story__act.is-first .story__sheen { animation-range: entry 45% contain var(--off); }
    .story__act.is-last .story__sheen { animation-name: light-runs-across-once; animation-range: contain var(--on) contain 100%; }
    @keyframes light-runs-across { 0% { translate: -70% 0; } 30%, 70% { translate: 70% 0; } 100% { translate: -70% 0; } }
    @keyframes light-runs-across-once { 0% { translate: -70% 0; } 45%, 100% { translate: 70% 0; } }
    /* PluginTracer is read line by line: the measuring light crosses its screen at an even pace while the scene holds. */
    .story__screen:has(.story__scan) { container-type: inline-size; }
    .story__scan { display: block; position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 2px; background: rgba(255, 238, 205, .95); box-shadow: 0 0 16px 3px rgba(var(--key-rgb), .5); animation: scan-reads linear both; animation-timeline: --story; animation-range: contain calc((var(--c) + .27) / var(--n) * 100%) contain calc((var(--c) + .72) / var(--n) * 100%); }
    .story__scan::after { content: ""; position: absolute; top: 0; bottom: 0; left: 2px; width: 100cqw; background: rgba(4, 6, 10, .58); }
    @keyframes scan-reads { from { translate: 0 0; } to { translate: 100cqw 0; } }

    /* The words: the act's number flips up, then its title turns up into the light word by word, then its text tips up
       after it; then they lift away as the next act comes on. */
    .story__text { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; max-width: none; margin: 0; padding: var(--nav-h) var(--gutter) 0 max(var(--gutter), calc((100vw - var(--container)) / 2)); pointer-events: none; }
    .story__text > * { pointer-events: auto; }
    .story__chapters { position: relative; width: min(34rem, 38vw); height: clamp(16rem, 40vh, 24rem); }
    .story__chapter { position: absolute; inset: 0 auto auto 0; width: 100%; display: block; padding: 0; border: 0; }
    .story__num { display: flex; flex-direction: row; align-items: baseline; gap: 14px; margin-bottom: 20px; font-size: clamp(2.6rem, 1.8rem + 2.4vw, 4.4rem); line-height: .9; transform-origin: 0 100%; }
    .story__title { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.9rem); }
    .story__body { margin-top: 18px; font-size: clamp(1.05rem, .98rem + .3vw, 1.22rem); transform-origin: 0 0; }
    .story__num, .story__title .w__i, .story__body {
      --from: calc(var(--c) / var(--n) * 100%);
      --to: calc((var(--c) + 1) / var(--n) * 100%);
      animation: chapter-text var(--glide) both;
      animation-timeline: --story;
      animation-range: contain var(--from) contain var(--to);
    }
    .story__num { animation-name: chapter-number; }
    .story__title .w__i { --from: calc((var(--c) / var(--n) + var(--w) * .012) * 100%); --to: calc(((var(--c) + 1) / var(--n) + var(--w) * .006) * 100%); transform-origin: 50% 100%; animation-name: chapter-word; }
    .story__body { --from: calc((var(--c) / var(--n) + .04) * 100%); }
    .story__chapter.is-first .story__num, .story__chapter.is-first .story__title .w__i, .story__chapter.is-first .story__body { animation-range: entry calc(55% + var(--w, 0) * 3%) contain var(--to); }
    .story__chapter.is-last .story__num, .story__chapter.is-last .story__title .w__i, .story__chapter.is-last .story__body { animation-range: contain var(--from) cover 100%; }
    @keyframes chapter-number { 0% { opacity: 0; transform: perspective(500px) rotateX(-90deg); } 16%, 84% { opacity: 1; transform: perspective(500px) rotateX(0deg); } 100% { opacity: 0; transform: perspective(500px) rotateX(80deg); } }
    @keyframes chapter-word { 0% { opacity: 0; transform: perspective(600px) rotateX(-88deg); } 16%, 84% { opacity: 1; transform: perspective(600px) rotateX(0deg); } 100% { opacity: 0; transform: perspective(600px) rotateX(76deg); } }
    @keyframes chapter-text { 0% { opacity: 0; transform: perspective(900px) rotateX(-34deg) translateY(24px); } 20%, 82% { opacity: 1; transform: perspective(900px) rotateX(0deg) translateY(0); } 100% { opacity: 0; transform: perspective(900px) rotateX(28deg) translateY(-24px); } }
    /* Where you are in the story: the acts' marks on the floor, and a small pool of light resting on the act you are in,
       gliding to the next between acts. */
    .story__scale { --step: 74px; position: relative; display: flex; width: max-content; margin-top: clamp(26px, 5vh, 56px); border-top: 1px solid var(--line-2); }
    .story__step { display: inline-flex; align-items: center; gap: 9px; width: var(--step); padding: 14px 0 6px; font: 400 1.25rem/1 var(--font-title); color: var(--text-4); animation: step-lit var(--glide) both; animation-timeline: --story; animation-range: contain calc(var(--c) / var(--n) * 100%) contain calc((var(--c) + 1) / var(--n) * 100%); }
    .story__step .mark { background: linear-gradient(currentColor, currentColor) 0 0 / 100% 3px no-repeat, linear-gradient(currentColor, currentColor) 50% 0 / 3px 100% no-repeat; }
    .story__step:hover { color: var(--gold-hi); }
    @keyframes step-lit { 0%, 100% { color: var(--text-4); } 10%, 90% { color: var(--gold-hi); } }
    .story__marker { position: absolute; left: -16px; top: -15px; width: 46px; height: 30px; pointer-events: none; background: radial-gradient(closest-side, rgba(var(--key-rgb), .55), rgba(var(--key-rgb), .12) 55%, transparent); animation: marker-travels var(--glide) both; animation-timeline: --story; animation-range: contain 0% contain 100%; }
    @keyframes marker-travels { to { translate: calc(var(--step) * (var(--n) - 1)) 0; } }
    @keyframes marker-travels-2 { 0% { translate: 0 0; } 44% { translate: 0 0; } 56% { translate: calc(var(--step) * 1) 0; } 100% { translate: calc(var(--step) * 1) 0; } }
    .story--n2 .story__marker { animation-name: marker-travels-2; }
    @keyframes marker-travels-3 { 0% { translate: 0 0; } 29.333% { translate: 0 0; } 37.333% { translate: calc(var(--step) * 1) 0; } 62.667% { translate: calc(var(--step) * 1) 0; } 70.667% { translate: calc(var(--step) * 2) 0; } 100% { translate: calc(var(--step) * 2) 0; } }
    .story--n3 .story__marker { animation-name: marker-travels-3; }
    @keyframes marker-travels-4 { 0% { translate: 0 0; } 22% { translate: 0 0; } 28% { translate: calc(var(--step) * 1) 0; } 47% { translate: calc(var(--step) * 1) 0; } 53% { translate: calc(var(--step) * 2) 0; } 72% { translate: calc(var(--step) * 2) 0; } 78% { translate: calc(var(--step) * 3) 0; } 100% { translate: calc(var(--step) * 3) 0; } }
    .story--n4 .story__marker { animation-name: marker-travels-4; }
    @media (max-width: 900px) {
      .story { --scene-x: 6vw; --scene-w: 88vw; --scene-top: calc(var(--nav-h) + var(--batten-h) + 70px); --scene-h: 31svh; }
      .story__thing--small .story__label { display: none; }
      .story__act.story__act--4 { gap: 3svh; }
      .story__stage::before { background: linear-gradient(180deg, transparent 50%, rgba(6, 7, 9, .9) 62%, var(--ink) 100%); }
      .story__floor { --floor-top: 34%; --pool-x: 50%; --pool-y: 34%; --pool-w: 46%; --pool-h: 36%; }
      .story__smoke { --smoke-top: 18%; --smoke-h: 30%; }
      .story__air { --smoke-top: 2%; --smoke-h: 46%; }
      .story__veil { --smoke-top: 6%; --smoke-h: 38%; }
      .story__text { justify-content: flex-end; padding: 0 var(--gutter) clamp(30px, 6svh, 56px); }
      .story__chapters { width: 100%; height: clamp(13rem, 31svh, 17rem); }
      .story__num { font-size: 2.4rem; margin-bottom: 10px; }
      .story__title { font-size: clamp(1.9rem, 8vw, 2.5rem); }
      .story__body { margin-top: 10px; font-size: 1rem; }
      .story__scale { --step: 58px; margin-top: 16px; }
      .story__thing--picture { margin-bottom: 4svh; }
    }

    /* — The studios on a big screen, like the plugins: the section stays put and the studios pass one at a time through
         the place between the softbox and the strip box, each resting there in the light, turning in as it comes and
         away as it goes; last comes the place taped out for the next studio. (The script pins it when the screen is big
         enough.) */
    .home-studios.is-pinned { --plate-w: min(640px, 46vw, calc((100svh - var(--nav-h) - 360px) * 1.3)); --gap: 9vw; height: calc(var(--n) * 125svh + 60svh); padding: 0; view-timeline: --studios block; }
    .home-studios.is-pinned .studios-pin { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-block: calc(var(--batten-h) + 30px) clamp(40px, 7vh, 90px); }
    .home-studios.is-pinned .section-head { margin-bottom: clamp(20px, 4vh, 48px); }
    .home-studios.is-pinned .studios-row { max-width: none; }
    .home-studios.is-pinned .studios-slot { display: block; position: absolute; top: 0; bottom: 0; left: calc(50% - var(--plate-w) / 2); width: var(--plate-w); pointer-events: none; }
    .home-studios.is-pinned .sgrid { display: flex; align-items: stretch; width: max-content; gap: var(--gap); margin-left: calc(50% - 50vw); padding: 8px calc((100vw - var(--plate-w)) / 2) 16px; perspective: none; will-change: translate; animation: rack-travels var(--glide) both; animation-timeline: --studios; animation-range: contain 0% contain 100%; }
    .studios--n2.is-pinned .sgrid { animation-name: rack-travels-2; }
    .studios--n3.is-pinned .sgrid { animation-name: rack-travels-3; }
    .studios--n4.is-pinned .sgrid { animation-name: rack-travels-4; }
    .home-studios.is-pinned .sgrid > .stage__glint { display: none; }
    .home-studios.is-pinned .sgrid > :is(.scard, .join-card) { flex: none; width: var(--plate-w); animation: passes-the-light var(--glide) both; animation-timeline: --studios; animation-range: contain calc((var(--i) - 1) / (var(--n) - 1) * 100%) contain calc((var(--i) + 1) / (var(--n) - 1) * 100%); }
    .home-studios.is-pinned .join-card { min-height: 0; }
    @media (min-width: 1100px) {
      .home-studios.is-pinned .studios-row > .kit { display: block; }
      .home-studios.is-pinned .studios-key { right: calc(50% + var(--plate-w) / 2 + 120px); bottom: -34px; }
      .home-studios.is-pinned .studios-rim { left: calc(50% + var(--plate-w) / 2 + 130px); bottom: -22px; }
    }
    @media (max-height: 820px) { .home-studios.is-pinned .section-head__lead { display: none; } }

    /* — The plugins on a big screen: the section stays put while they pass under a lamp that stays still. The row rests
         with each plugin in the light — facing you, turning a little, its credits coming in line after line — then glides
         on to the next, the one leaving turning away into the dark as the next turns into the light. (The script pins it
         when the screen is big enough.) */
    .toplist.is-pinned { --plate-w: min(1120px, 76vw); --gap: 6vw; height: calc(var(--n) * 86svh + 40svh); padding: 0; view-timeline: --rack block; }
    .toplist.is-pinned .toplist__pin { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
    .toplist.is-pinned .toplist__rig { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
    .toplist__lamp { --throw: calc((100svh - var(--nav-h)) * .74 - 60px); }
    .toplist__lamp--key { --x: calc(50% - var(--plate-w) * .215); --spread: 16deg; --a: .22; }
    .toplist__floor { --floor-top: 62%; --pool-x: calc(50% - var(--plate-w) * .215); --pool-y: 42%; --pool-w: 26%; --pool-h: 52%; }
    .toplist__smoke { --smoke-top: 50%; --smoke-h: 34%; --smoke-a: .28; --smoke-time: 135s; --breath-time: 31s; }
    .toplist__air { --smoke-top: 6%; --smoke-h: 62%; --smoke-a: .12; --smoke-time: 180s; }
    .toplist__lamp--side-l { --x: 5%; --aim: -16deg; --spread: 19deg; --a: .045; }
    .toplist__lamp--side-r { --x: 95%; --aim: 16deg; --spread: 19deg; --a: .045; }
    /* The key lamp swings out to catch each plugin the row brings in and settles on it while it rests; the washes at
       the ends sway slowly across the whole row. */
    .toplist.is-pinned .toplist__lamp--key .rig__aim { animation: rack-lamp var(--glide) both; animation-timeline: --rack; animation-range: contain 0% contain 100%; }
    @keyframes rack-lamp { from { rotate: 0deg; } to { rotate: 0deg; } }
    @keyframes rack-lamp-2 { 0% { rotate: 0deg; } 18% { rotate: 0deg; } 50% { rotate: -16deg; } 82% { rotate: 0deg; } 100% { rotate: 0deg; } }
    .toplist--n2.is-pinned .toplist__lamp--key .rig__aim { animation-name: rack-lamp-2; }
    @keyframes rack-lamp-3 { 0% { rotate: 0deg; } 9% { rotate: 0deg; } 25% { rotate: -16deg; } 41% { rotate: 0deg; } 59% { rotate: 0deg; } 75% { rotate: -16deg; } 91% { rotate: 0deg; } 100% { rotate: 0deg; } }
    .toplist--n3.is-pinned .toplist__lamp--key .rig__aim { animation-name: rack-lamp-3; }
    @keyframes rack-lamp-4 { 0% { rotate: 0deg; } 6% { rotate: 0deg; } 16.667% { rotate: -16deg; } 27.333% { rotate: 0deg; } 39.333% { rotate: 0deg; } 50% { rotate: -16deg; } 60.667% { rotate: 0deg; } 72.667% { rotate: 0deg; } 83.333% { rotate: -16deg; } 94% { rotate: 0deg; } 100% { rotate: 0deg; } }
    .toplist--n4.is-pinned .toplist__lamp--key .rig__aim { animation-name: rack-lamp-4; }
    @keyframes rack-lamp-5 { 0% { rotate: 0deg; } 4.5% { rotate: 0deg; } 12.5% { rotate: -16deg; } 20.5% { rotate: 0deg; } 29.5% { rotate: 0deg; } 37.5% { rotate: -16deg; } 45.5% { rotate: 0deg; } 54.5% { rotate: 0deg; } 62.5% { rotate: -16deg; } 70.5% { rotate: 0deg; } 79.5% { rotate: 0deg; } 87.5% { rotate: -16deg; } 95.5% { rotate: 0deg; } 100% { rotate: 0deg; } }
    .toplist--n5.is-pinned .toplist__lamp--key .rig__aim { animation-name: rack-lamp-5; }
    @keyframes rack-lamp-6 { 0% { rotate: 0deg; } 3.6% { rotate: 0deg; } 10% { rotate: -16deg; } 16.4% { rotate: 0deg; } 23.6% { rotate: 0deg; } 30% { rotate: -16deg; } 36.4% { rotate: 0deg; } 43.6% { rotate: 0deg; } 50% { rotate: -16deg; } 56.4% { rotate: 0deg; } 63.6% { rotate: 0deg; } 70% { rotate: -16deg; } 76.4% { rotate: 0deg; } 83.6% { rotate: 0deg; } 90% { rotate: -16deg; } 96.4% { rotate: 0deg; } 100% { rotate: 0deg; } }
    .toplist--n6.is-pinned .toplist__lamp--key .rig__aim { animation-name: rack-lamp-6; }
    @keyframes rack-lamp-7 { 0% { rotate: 0deg; } 3% { rotate: 0deg; } 8.333% { rotate: -16deg; } 13.667% { rotate: 0deg; } 19.667% { rotate: 0deg; } 25% { rotate: -16deg; } 30.333% { rotate: 0deg; } 36.333% { rotate: 0deg; } 41.667% { rotate: -16deg; } 47% { rotate: 0deg; } 53% { rotate: 0deg; } 58.333% { rotate: -16deg; } 63.667% { rotate: 0deg; } 69.667% { rotate: 0deg; } 75% { rotate: -16deg; } 80.333% { rotate: 0deg; } 86.333% { rotate: 0deg; } 91.667% { rotate: -16deg; } 97% { rotate: 0deg; } 100% { rotate: 0deg; } }
    .toplist--n7.is-pinned .toplist__lamp--key .rig__aim { animation-name: rack-lamp-7; }
    @keyframes rack-lamp-8 { 0% { rotate: 0deg; } 2.571% { rotate: 0deg; } 7.143% { rotate: -16deg; } 11.714% { rotate: 0deg; } 16.857% { rotate: 0deg; } 21.429% { rotate: -16deg; } 26% { rotate: 0deg; } 31.143% { rotate: 0deg; } 35.714% { rotate: -16deg; } 40.286% { rotate: 0deg; } 45.429% { rotate: 0deg; } 50% { rotate: -16deg; } 54.571% { rotate: 0deg; } 59.714% { rotate: 0deg; } 64.286% { rotate: -16deg; } 68.857% { rotate: 0deg; } 74% { rotate: 0deg; } 78.571% { rotate: -16deg; } 83.143% { rotate: 0deg; } 88.286% { rotate: 0deg; } 92.857% { rotate: -16deg; } 97.429% { rotate: 0deg; } 100% { rotate: 0deg; } }
    .toplist--n8.is-pinned .toplist__lamp--key .rig__aim { animation-name: rack-lamp-8; }
    .toplist.is-pinned .toplist__lamp--side-l .rig__aim, .toplist.is-pinned .toplist__lamp--side-r .rig__aim { animation: wash-sways linear both; animation-timeline: --rack; animation-range: contain 0% contain 100%; }
    @keyframes wash-sways { from { rotate: -8deg; } to { rotate: 8deg; } }
    .toplist.is-pinned .toplist__pool { top: 72%; left: calc(50% - var(--plate-w) * .215); width: calc(var(--plate-w) * .7); translate: -50% 0; }
    .toplist.is-pinned .toplist__head { margin-bottom: clamp(12px, 2.2vh, 26px); }
    .toplist.is-pinned .toplist__rail { width: max-content; overflow: visible; scroll-snap-type: none; padding: 10px calc((100vw - var(--plate-w)) / 2) 20px; gap: var(--gap); will-change: translate; animation: rack-travels var(--glide) both; animation-timeline: --rack; animation-range: contain 0% contain 100%; }
    @keyframes rack-travels { to { translate: calc((var(--n) - 1) * (var(--plate-w) + var(--gap)) * -1) 0; } }
@keyframes rack-travels-2 { 0% { translate: 0 0; } 18% { translate: 0 0; } 82% { translate: calc(1 * (var(--plate-w) + var(--gap)) * -1) 0; } 100% { translate: calc(1 * (var(--plate-w) + var(--gap)) * -1) 0; } }
    .toplist--n2.is-pinned .toplist__rail { animation-name: rack-travels-2; }
    @keyframes rack-travels-3 { 0% { translate: 0 0; } 9% { translate: 0 0; } 41% { translate: calc(1 * (var(--plate-w) + var(--gap)) * -1) 0; } 59% { translate: calc(1 * (var(--plate-w) + var(--gap)) * -1) 0; } 91% { translate: calc(2 * (var(--plate-w) + var(--gap)) * -1) 0; } 100% { translate: calc(2 * (var(--plate-w) + var(--gap)) * -1) 0; } }
    .toplist--n3.is-pinned .toplist__rail { animation-name: rack-travels-3; }
    @keyframes rack-travels-4 { 0% { translate: 0 0; } 6% { translate: 0 0; } 27.333% { translate: calc(1 * (var(--plate-w) + var(--gap)) * -1) 0; } 39.333% { translate: calc(1 * (var(--plate-w) + var(--gap)) * -1) 0; } 60.667% { translate: calc(2 * (var(--plate-w) + var(--gap)) * -1) 0; } 72.667% { translate: calc(2 * (var(--plate-w) + var(--gap)) * -1) 0; } 94% { translate: calc(3 * (var(--plate-w) + var(--gap)) * -1) 0; } 100% { translate: calc(3 * (var(--plate-w) + var(--gap)) * -1) 0; } }
    .toplist--n4.is-pinned .toplist__rail { animation-name: rack-travels-4; }
    @keyframes rack-travels-5 { 0% { translate: 0 0; } 4.5% { translate: 0 0; } 20.5% { translate: calc(1 * (var(--plate-w) + var(--gap)) * -1) 0; } 29.5% { translate: calc(1 * (var(--plate-w) + var(--gap)) * -1) 0; } 45.5% { translate: calc(2 * (var(--plate-w) + var(--gap)) * -1) 0; } 54.5% { translate: calc(2 * (var(--plate-w) + var(--gap)) * -1) 0; } 70.5% { translate: calc(3 * (var(--plate-w) + var(--gap)) * -1) 0; } 79.5% { translate: calc(3 * (var(--plate-w) + var(--gap)) * -1) 0; } 95.5% { translate: calc(4 * (var(--plate-w) + var(--gap)) * -1) 0; } 100% { translate: calc(4 * (var(--plate-w) + var(--gap)) * -1) 0; } }
    .toplist--n5.is-pinned .toplist__rail { animation-name: rack-travels-5; }
    @keyframes rack-travels-6 { 0% { translate: 0 0; } 3.6% { translate: 0 0; } 16.4% { translate: calc(1 * (var(--plate-w) + var(--gap)) * -1) 0; } 23.6% { translate: calc(1 * (var(--plate-w) + var(--gap)) * -1) 0; } 36.4% { translate: calc(2 * (var(--plate-w) + var(--gap)) * -1) 0; } 43.6% { translate: calc(2 * (var(--plate-w) + var(--gap)) * -1) 0; } 56.4% { translate: calc(3 * (var(--plate-w) + var(--gap)) * -1) 0; } 63.6% { translate: calc(3 * (var(--plate-w) + var(--gap)) * -1) 0; } 76.4% { translate: calc(4 * (var(--plate-w) + var(--gap)) * -1) 0; } 83.6% { translate: calc(4 * (var(--plate-w) + var(--gap)) * -1) 0; } 96.4% { translate: calc(5 * (var(--plate-w) + var(--gap)) * -1) 0; } 100% { translate: calc(5 * (var(--plate-w) + var(--gap)) * -1) 0; } }
    .toplist--n6.is-pinned .toplist__rail { animation-name: rack-travels-6; }
    @keyframes rack-travels-7 { 0% { translate: 0 0; } 3% { translate: 0 0; } 13.667% { translate: calc(1 * (var(--plate-w) + var(--gap)) * -1) 0; } 19.667% { translate: calc(1 * (var(--plate-w) + var(--gap)) * -1) 0; } 30.333% { translate: calc(2 * (var(--plate-w) + var(--gap)) * -1) 0; } 36.333% { translate: calc(2 * (var(--plate-w) + var(--gap)) * -1) 0; } 47% { translate: calc(3 * (var(--plate-w) + var(--gap)) * -1) 0; } 53% { translate: calc(3 * (var(--plate-w) + var(--gap)) * -1) 0; } 63.667% { translate: calc(4 * (var(--plate-w) + var(--gap)) * -1) 0; } 69.667% { translate: calc(4 * (var(--plate-w) + var(--gap)) * -1) 0; } 80.333% { translate: calc(5 * (var(--plate-w) + var(--gap)) * -1) 0; } 86.333% { translate: calc(5 * (var(--plate-w) + var(--gap)) * -1) 0; } 97% { translate: calc(6 * (var(--plate-w) + var(--gap)) * -1) 0; } 100% { translate: calc(6 * (var(--plate-w) + var(--gap)) * -1) 0; } }
    .toplist--n7.is-pinned .toplist__rail { animation-name: rack-travels-7; }
    @keyframes rack-travels-8 { 0% { translate: 0 0; } 2.571% { translate: 0 0; } 11.714% { translate: calc(1 * (var(--plate-w) + var(--gap)) * -1) 0; } 16.857% { translate: calc(1 * (var(--plate-w) + var(--gap)) * -1) 0; } 26% { translate: calc(2 * (var(--plate-w) + var(--gap)) * -1) 0; } 31.143% { translate: calc(2 * (var(--plate-w) + var(--gap)) * -1) 0; } 40.286% { translate: calc(3 * (var(--plate-w) + var(--gap)) * -1) 0; } 45.429% { translate: calc(3 * (var(--plate-w) + var(--gap)) * -1) 0; } 54.571% { translate: calc(4 * (var(--plate-w) + var(--gap)) * -1) 0; } 59.714% { translate: calc(4 * (var(--plate-w) + var(--gap)) * -1) 0; } 68.857% { translate: calc(5 * (var(--plate-w) + var(--gap)) * -1) 0; } 74% { translate: calc(5 * (var(--plate-w) + var(--gap)) * -1) 0; } 83.143% { translate: calc(6 * (var(--plate-w) + var(--gap)) * -1) 0; } 88.286% { translate: calc(6 * (var(--plate-w) + var(--gap)) * -1) 0; } 97.429% { translate: calc(7 * (var(--plate-w) + var(--gap)) * -1) 0; } 100% { translate: calc(7 * (var(--plate-w) + var(--gap)) * -1) 0; } }
    .toplist--n8.is-pinned .toplist__rail { animation-name: rack-travels-8; }
    .toplist.is-pinned .tcard { width: var(--plate-w); transition: none; animation: passes-the-light var(--glide) both; animation-timeline: --rack; animation-range: contain calc((var(--i) - 1) / (var(--n) - 1) * 100%) contain calc((var(--i) + 1) / (var(--n) - 1) * 100%); }
    @keyframes passes-the-light {
      0%, 9% { transform: perspective(1700px) translate3d(0, 0, -200px) rotateY(-58deg) scale(.86); opacity: .14; }
      41% { transform: perspective(1700px) translate3d(0, 0, 0) rotateY(-3deg) scale(1); opacity: 1; }
      59% { transform: perspective(1700px) translate3d(0, 0, 0) rotateY(3deg) scale(1); opacity: 1; }
      91%, 100% { transform: perspective(1700px) translate3d(0, 0, -200px) rotateY(58deg) scale(.86); opacity: .14; }
    }
    /* The plugin in the light throws its shadow on the floor and spills a little of its screen's cold light onto it. */
    .toplist.is-pinned .tcard__media { box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 50px 80px -46px #000, 0 80px 90px -56px rgba(120, 165, 235, .32); }
    .toplist.is-pinned .tcard__body > * { animation: entry-line var(--glide) both; animation-timeline: --rack; animation-range: contain calc(((var(--i) - 1) / (var(--n) - 1) + var(--k, 0) * .03) * 100%) contain calc(((var(--i) + 1) / (var(--n) - 1) + var(--k, 0) * .015) * 100%); }
    .tcard__body > :nth-child(2) { --k: 1; } .tcard__body > :nth-child(3) { --k: 2; } .tcard__body > :nth-child(4) { --k: 3; } .tcard__body > :nth-child(5) { --k: 4; } .tcard__body > :nth-child(6) { --k: 5; }
    @keyframes entry-line { 0%, 28% { opacity: 0; translate: 90px 0; } 41%, 59% { opacity: 1; translate: 0 0; } 72%, 100% { opacity: 0; translate: -80px 0; } }
    .toplist.is-pinned .tcard__img { scale: 1.1; animation: plate-picture linear both; animation-timeline: --rack; animation-range: contain calc((var(--i) - 1) / (var(--n) - 1) * 100%) contain calc((var(--i) + 1) / (var(--n) - 1) * 100%); }
    @keyframes plate-picture { from { translate: 5% 0; } to { translate: -5% 0; } }
    /* Short screens: the pinned section keeps to the essentials, so the whole plugin stands between the strip and the
       marks under it. */
    @media (max-height: 880px) {
      .toplist.is-pinned .toplist__lead { display: none; }
      .toplist.is-pinned .toplist__head .eyebrow { margin-bottom: 10px; }
      .toplist.is-pinned .toplist__title { font-size: min(4.4rem, 7vh); }
      .toplist.is-pinned .tcard { padding-block: 8px; }
      .toplist.is-pinned .tcard__title { font-size: min(4.6rem, 7.4vh); }
      .toplist.is-pinned .tcard__tagline { margin-top: 8px; }
      .toplist.is-pinned .tcard__text { -webkit-line-clamp: 2; }
      .toplist.is-pinned .tcard__chips { margin-top: 10px; }
      .toplist.is-pinned .tcard__foot { margin-top: 14px; padding-top: 12px; }
      .toplist.is-pinned .toplist__foot { margin-top: 4px; }
    }
    @media (max-height: 720px) {
      .toplist.is-pinned .tcard__text, .toplist.is-pinned .tcard__chips { display: none; }
    }
    /* Anywhere else (phones, small windows) the row is swiped; there each plugin turns as it crosses the row. */
    .toplist:not(.is-pinned) .tcard { animation: plate-crosses var(--glide) both; animation-timeline: view(inline); }
    .toplist:not(.is-pinned) .tcard:not(.is-current) { opacity: 1; }
    @keyframes plate-crosses { 0% { transform: perspective(1400px) rotateY(-40deg) scale(.88); opacity: .3; } 50% { transform: perspective(1400px) rotateY(0deg) scale(1); opacity: 1; } 100% { transform: perspective(1400px) rotateY(40deg) scale(.88); opacity: .3; } }
  }

  /* Moving between pages: the old page goes dark, the new one comes up into the light; the strip at the top stays. */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root) { animation: page-leaves .34s cubic-bezier(.4, 0, .7, .2) both; }
  ::view-transition-new(root) { animation: page-arrives .65s cubic-bezier(.2, .75, .2, 1) both; }
  @keyframes page-leaves { to { opacity: 0; transform: translateY(-14px); } }
  @keyframes page-arrives { from { opacity: 0; transform: translateY(22px); } }
}