/* 34 Ajar III. Cut paper: flat black ground, one white paper, one gold shape per screen.
   Every shape is a polygon with slightly wrong angles. No gradients, glow, grain,
   shadows, hairlines or round corners anywhere in this file.
   Londrina Solid for short headlines and names only. Public Sans for every sentence, label and key. */

:root {
  --ink: #0A0A0A;
  --paper: #F3EFE4;
  --gold: #C9A24B;
  --cut: 'Londrina Solid', 'Arial Black', Impact, sans-serif;
  --plain: 'Public Sans', 'Segoe UI', Arial, sans-serif;
  --H: clamp(620px, 100svh, 1400px);
  --bar: clamp(56px, 3vw, 78px);
  --g: 5vw;                                   /* the page's side margin */
  --text: clamp(18px, 1.05vw, 28px);          /* running text: 27px at 2560 */
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; scroll-padding-top: var(--bar); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 600 var(--text)/1.45 var(--plain);
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
p { margin: 0; }

/* No word left alone on a line: short lines are balanced, running text avoids a lone last word. */
p, li, blockquote, label, .feat__t, .card__line, .quote .role, .inv li { text-wrap: pretty; }
h1, h2, h3, .claim, .sub, .tag, .said__sub, .feat__h, .num__l, .card__title, .awards__line,
.judge__name, .judge__what, .set__h, .foot__last, .done__h, .news__h, .offer__who,
.about__lead, .about__end .l, .lights__sub, .cast__with { text-wrap: balance; }

.nw { white-space: nowrap; }   /* a hyphenated word kept whole ("co-founder", not "co- / founder") */
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 1vw; top: -200px; z-index: 99;
  background: var(--paper); color: var(--ink); padding: .6em 1em;
  font: 800 18px/1 var(--plain); text-decoration: none;
}
.skip:focus { top: 1vw; }

/* Letters cut one by one: script wraps each in <i> with a fixed turn and shift. */
.cut__w { display: inline-block; white-space: nowrap; }
.cut i {
  display: inline-block; font-style: normal;
  transform: rotate(var(--r, 0deg)) translateY(var(--y, 0em)) scale(var(--k, 1));
}

/* The small cut arrow that means "opens elsewhere". Never under 15px. */
.arrow {
  display: inline-block; flex: none; width: max(15px, .62em); height: max(15px, .62em); background: currentColor;
  clip-path: polygon(36% 0, 100% 0, 100% 64%, 80% 43%, 22% 100%, 0 78%, 57% 20%);
}

/* Keys: small paper pieces you press. Plain face, Title Case. */
.key {
  display: inline-flex; align-items: center; gap: .5em;
  appearance: none; border: 0; margin: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  background: var(--paper); color: var(--ink);
  font: 800 clamp(17px, 1vw, 26px)/1 var(--plain);
  padding: .7em 1.05em .66em; min-height: 44px;
  clip-path: polygon(3% 0, 100% 8%, 97% 100%, 0 91%);
  transform: rotate(var(--r, -2deg));
  transition: transform .12s linear;
  outline: none;
}
.key:hover, .key:focus-visible { background: var(--gold); color: var(--ink); transform: rotate(calc(var(--r, -2deg) * -1)); }
.key--ink { background: var(--ink); color: var(--paper); }
.key--gold { background: var(--gold); color: var(--ink); }
.key--gold:hover, .key--gold:focus-visible { background: var(--paper); }
.key--big { font-size: clamp(20px, 1.3vw, 34px); }
.key .arrow { width: max(15px, .6em); height: max(15px, .6em); }

/* Shared headline and standfirst for each poster. */
.poster-h {
  margin: 0; font: 900 clamp(48px, 5.6vw, 150px)/.9 var(--cut); text-transform: uppercase;
  transform: rotate(-2deg); transform-origin: 0 100%;
}
.poster-h .l { display: block; }
.poster-h .l + .l { margin-left: .45em; }
.sub { margin-top: 1.1em; font: 600 clamp(20px, 1.45vw, 38px)/1.25 var(--plain); max-width: 26em; }

/* ───────────── The top bar ───────────── */

.bar {
  position: fixed; left: 0; right: 0; top: 0; z-index: 50; height: var(--bar);
  display: flex; align-items: center; gap: 2.4vw; padding: 0 2.4vw;
  background: var(--ink);
}
/* Another door: the way back to the four designs. Its own small control at the far left, set off
   from our door by a slanted paper cut. Pointed at, its little door swings and the words underline;
   with the keyboard the words are pasted on a paper slip, like the nav. */
.bar__doors {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: .65em;
  min-height: 44px; padding-right: calc(1.1em + 2px);
  color: var(--paper); text-decoration: none; outline: none;
  font: 800 clamp(14px, .72vw, 19px)/1 var(--plain); white-space: nowrap;
}
.bar__doors::after {
  content: ''; position: absolute; right: 0; top: 50%;
  width: 6px; height: calc(var(--bar) * .5); margin-top: calc(var(--bar) * -.25);
  background: var(--paper); clip-path: polygon(62% 0, 100% 0, 38% 100%, 0 100%);
}
.bar__doors-i {
  flex: none; width: auto; height: clamp(28px, calc(var(--bar) * .44), 34px);
  transform: rotate(-3deg); transform-origin: 20% 100%; transition: transform .12s linear;
}
.bar__doors-t { padding: .45em .35em .4em; margin: 0 -.35em; }
.bar__doors-short { display: none; }
.bar__doors:hover .bar__doors-i, .bar__doors:focus-visible .bar__doors-i { transform: rotate(6deg) translateX(1px); }
.bar__doors:hover .bar__doors-t { text-decoration: underline; text-decoration-thickness: .14em; text-underline-offset: .3em; }
.bar__doors:focus-visible .bar__doors-t {
  background: var(--paper); color: var(--ink);
  clip-path: polygon(0 8%, 100% 0, 97% 100%, 2% 92%);
}

.bar__home { display: inline-flex; align-items: center; gap: .55em; color: var(--paper); text-decoration: none; outline: none; min-height: 44px; }
.bar__home:focus-visible { background: var(--paper); color: var(--ink); }
.bar__door { width: auto; height: calc(var(--bar) * .8); }   /* the square logo */
.bar__name { font: 900 clamp(22px, 1.2vw, 32px)/1 var(--cut); text-transform: uppercase; letter-spacing: .01em; }
.bar__nav { display: flex; align-items: center; gap: 2.2vw; margin-left: auto; }
.bar__nav a:not(.key) {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .2em;
  color: var(--paper); text-decoration: none; outline: none;
  font: 600 clamp(16px, .82vw, 22px)/1 var(--plain);
}
.bar__nav a:not(.key):hover { text-decoration: underline; text-decoration-thickness: .14em; text-underline-offset: .3em; }
.bar__nav a:not(.key):focus-visible { background: var(--paper); color: var(--ink); }
.key--bar { font-size: clamp(16px, .86vw, 23px); padding: .62em 1.1em .58em; --r: -1.5deg; margin-left: .4vw; }
/* The page you are on: a short strip of paper pasted under its name (Contact: its key goes gold). */
.bar__nav a[aria-current="page"]:not(.key) { position: relative; }
.bar__nav a[aria-current="page"]:not(.key)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: calc(50% - .95em); height: max(4px, .2em);
  background: var(--paper); clip-path: polygon(0 30%, 100% 0, 97% 100%, 2% 75%); transform: rotate(-2deg);
}
.bar__nav a[aria-current="page"]:not(.key):hover { text-decoration: none; }
.key--bar[aria-current="page"] { background: var(--gold); }

/* ───────────── 1. The poster: the door swung wide, the reel in the doorway ───────────── */

.poster {
  --gap: clamp(14px, 1.4vw, 36px);
  --fr: clamp(10px, 1.05vw, 28px);                         /* the paper door frame */
  --floor: clamp(190px, 19svh, 262px);                     /* the light on the floor */
  --rw: min(64vw, calc((var(--H) - var(--bar) - var(--gap) - var(--floor) - 2 * var(--fr)) * 16 / 9));
  --dl: calc((100vw - var(--rw)) * .7 - var(--fr));         /* where the doorway starts */
  --lw: calc(var(--rw) * .1);                              /* the open leaf */
  position: relative; height: var(--H); overflow: hidden; overflow: clip;
  display: flex; flex-direction: column;
  padding-top: calc(var(--bar) + var(--gap));
}

.doorway { position: relative; z-index: 2; width: calc(var(--rw) + 2 * var(--fr)); margin-left: var(--dl); flex: none; }

/* The leaf, open towards us: its far edge drops below the threshold. */
.leaf { position: absolute; right: 100%; top: -9.8%; height: 137.3%; width: var(--lw); overflow: visible; }
.leaf__paper { fill: var(--paper); }
.leaf__panel, .leaf__edge { fill: var(--ink); }
.leaf__handle { fill: var(--gold); }

.frame { position: relative; padding: var(--fr); }
.frame::before {
  content: ''; position: absolute; inset: 0; background: var(--paper);
  clip-path: polygon(0 .9%, 99.4% 0, 100% 99.2%, .4% 100%);
}
.frame__window { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; clip-path: polygon(.3% 0, 100% .7%, 99.7% 100%, 0 99.3%); }
.frame__video { display: block; width: 100%; height: 100%; object-fit: cover; }
html.js .frame__video::-webkit-media-controls { display: none !important; }

.frame__tag {
  position: absolute; left: calc(var(--fr) * -.6); top: calc(var(--fr) * -.4); z-index: 3;
  background: var(--ink); color: var(--paper); padding: .32em .6em .22em;
  font: 900 clamp(20px, 1.25vw, 34px)/1 var(--cut); text-transform: uppercase;
  clip-path: polygon(0 8%, 100% 0, 97% 100%, 2% 92%); transform: rotate(-3deg);
}
.frame__keys {
  position: absolute; right: calc(var(--fr) + 1.1vw); bottom: calc(var(--fr) + 1.1vw); z-index: 3;
  display: flex; gap: 1vw; align-items: center;
}
.frame__keys .key { font-size: clamp(18px, 1.12vw, 30px); min-height: 52px; }
.frame__keys .key:nth-child(2) { --r: 2deg; }
.frame__keys .key[aria-pressed="true"] { background: var(--gold); }

/* The light on the floor, wider than the door, and the title printed in it. */
.floor { position: relative; flex: 1; z-index: 1; }
.floor__light {
  --sp: calc(var(--rw) * .09);
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--dl) - var(--sp)); width: calc(var(--rw) + 2 * var(--fr) + 2 * var(--sp));
  background: var(--paper);
  clip-path: polygon(var(--sp) 0, calc(100% - var(--sp)) 0, 100% 100%, 0 100%);
}
.floor__type {
  position: absolute; top: 0; bottom: 0; left: var(--dl); width: calc(var(--rw) + 2 * var(--fr));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--ink); text-align: center; padding-bottom: .4vw;
}
.name {
  margin: 0; white-space: nowrap; text-transform: uppercase;
  font: 900 min(calc(var(--rw) * .098), calc(var(--floor) * .6))/.86 var(--cut);
  transform: rotate(-1.2deg);
}
.floor__row { display: flex; align-items: center; justify-content: center; gap: 1.8vw; margin-top: .45em; }
.claim { font: 600 clamp(19px, 1.5vw, 40px)/1.15 var(--plain); }
.floor__go { font-size: clamp(17px, 1vw, 27px); --r: 2deg; }

.gents {
  --gw: clamp(150px, 11vw, 300px);
  position: absolute; z-index: 3; bottom: 3%;
  left: calc(var(--dl) - var(--lw) - var(--gw) * 1.075);
  width: var(--gw); height: auto; aspect-ratio: 210 / 300; overflow: visible;
}
.gents__paper { fill: var(--paper); }
.gents__ink { fill: var(--ink); }

/* ───────────── 2. The work: four lobby cards, one of each kind ───────────── */

.work { position: relative; overflow: clip; padding: 4.6vw var(--g) 4.4vw; }
.work__head { display: flex; align-items: flex-end; gap: 4vw; margin-bottom: 3.2vw; }
.work__head .sub { margin: 0 0 .4em; }

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 3.4vw 4.2vw; align-items: start; }
.card {
  position: relative; display: flex; flex-direction: column; gap: .85vw;
  background: var(--paper); color: var(--ink); padding: 1vw 1.15vw 1.25vw;
  clip-path: var(--c); transform: rotate(var(--r));
}
.c1 { --r: -1.1deg; --c: polygon(0 1.2%, 99.4% 0, 100% 98.6%, .5% 100%); }
.c2 { --r: .9deg;   --c: polygon(.6% 0, 100% 1.1%, 99.3% 100%, 0 98.8%); margin-top: 1.6vw; }
.c3 { --r: .7deg;   --c: polygon(0 .4%, 99% 1.4%, 100% 100%, .8% 98.6%); }
.c4 { --r: -.9deg;  --c: polygon(.4% 1.2%, 100% 0, 99.5% 99%, 0 100%); margin-top: 1.6vw; }

.card__head { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0 .2vw; }
.card__kind {
  margin: 0; font: 900 clamp(30px, 2.5vw, 66px)/.9 var(--cut); text-transform: uppercase; white-space: nowrap;
  transform: rotate(-1.5deg); transform-origin: 0 100%;
}
.card__all {
  display: inline-flex; align-items: center; gap: .45em; min-height: 44px; padding: 0 .45em; margin-right: -.45em;
  color: var(--ink); text-decoration: underline; text-decoration-thickness: .13em; text-underline-offset: .28em;
  font: 800 clamp(16px, .95vw, 25px)/1 var(--plain); white-space: nowrap; outline: none;
}
.card__all:hover, .card__all:focus-visible {
  background: var(--ink); color: var(--paper); text-decoration: none;
  clip-path: polygon(0 8%, 100% 0, 97% 100%, 2% 92%);
}

/* The picture: let into the card with its own slightly wrong cut. Every thumbnail carries its own
   lettering, so it is shown whole, at 16:9, in colour, and never zoomed or drawn over. */
.card__pic {
  position: relative; display: block; overflow: hidden; background: var(--ink); container-type: inline-size;
  clip-path: polygon(.3% 0, 100% .6%, 99.7% 100%, 0 99.4%); outline: none;
}
.card__pic img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* Lost Between Cuts plays here: a cut-paper play mark in the middle of its own picture. */
.card__play {
  position: absolute; left: 50%; top: 50%; width: 13cqw; height: 13cqw; margin: -6.5cqw 0 0 -6.5cqw;
  background: var(--ink); clip-path: polygon(6% 0, 100% 5%, 95% 100%, 0 94%); transform: rotate(-3deg);
  transition: transform .12s linear;
}
.card__play::after {
  content: ''; position: absolute; left: 34%; top: 25%; width: 40%; height: 50%;
  background: var(--paper); clip-path: polygon(0 0, 100% 52%, 3% 100%);
}
.card:hover .card__play, .card:focus-within .card__play { transform: rotate(3deg); }
.card:hover .card__play::after, .card:focus-within .card__play::after { background: var(--gold); }

.card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 2vw; padding: .3vw .3vw 0; }
.card__words { display: flex; flex-direction: column; gap: .4em; min-width: 0; }
.card__title { font: 900 clamp(32px, 2.7vw, 72px)/.92 var(--cut); text-transform: uppercase; }
.card__line { font: 600 var(--text)/1.38 var(--plain); max-width: 29em; }
.card__watch { flex: none; margin-bottom: .2em; }
.c2 .card__watch::before {
  content: ''; width: .62em; height: .72em; background: currentColor; clip-path: polygon(0 0, 100% 52%, 3% 100%);
}

/* ───────────── 2b. Pick a light: four cuts of light from a door left ajar ───────────── */

/* Brought back from 25, without the counts. It runs the full width of the page, so it steps out
   of the work's side margins. */
.lights {
  position: relative; height: clamp(600px, 43vw, 1120px); margin: 4vw calc(var(--g) * -1) 0;
  overflow: hidden; overflow: clip;
}
.lights__h {
  position: absolute; left: 21vw; top: 2vw; margin: 0; z-index: 4;
  font: 900 clamp(40px, 4.2vw, 112px)/.92 var(--cut); text-transform: uppercase; white-space: nowrap;
  transform: rotate(-2deg); transform-origin: 0 100%;
}
.lights__h .l { display: inline; }
.lights__sub { position: absolute; left: 21.6vw; top: 7.6vw; z-index: 4; font: 600 clamp(20px, 1.4vw, 38px)/1.25 var(--plain); }

.lights__scene { position: absolute; inset: 0; pointer-events: none; }

/* Each wedge is a long box turned about its narrow end at the door and clipped to a wedge;
   the fan holds the angle and the spread of all four. */
.fan {
  position: absolute; inset: 0;
  --ox: 19.15vw; --len: 105vw; --box: 44vw;
  --t: 1.95%; --idle: 14.5%; --wide: 35.5%; --thin: 9.25%;
  --a0: -1deg; --a1: 6.5deg; --a2: 14deg; --a3: 21.5deg;
  --s0: var(--idle); --s1: var(--idle); --s2: var(--idle); --s3: var(--idle);
  --name-x: 10vw; --name-size: 3vw; --go-size: 5.6vw; --name-on: 1.3;
  --still-x: 10vw; --still-w: 80vw; --lift: 2.2vw;
}
.fan[data-on="0"], html.no-js .fan:has(.w0:hover, .w0:focus-visible) {
  --a0: 3deg; --a1: 14.25deg; --a2: 19.25deg; --a3: 24.25deg;
  --s0: var(--wide); --s1: var(--thin); --s2: var(--thin); --s3: var(--thin);
}
.fan[data-on="1"], html.no-js .fan:has(.w1:hover, .w1:focus-visible) {
  --a0: -3.25deg; --a1: 8deg; --a2: 19.25deg; --a3: 24.25deg;
  --s0: var(--thin); --s1: var(--wide); --s2: var(--thin); --s3: var(--thin);
}
.fan[data-on="2"], html.no-js .fan:has(.w2:hover, .w2:focus-visible) {
  --a0: -3.25deg; --a1: 1.75deg; --a2: 13deg; --a3: 24.25deg;
  --s0: var(--thin); --s1: var(--thin); --s2: var(--wide); --s3: var(--thin);
}
.fan[data-on="3"], html.no-js .fan:has(.w3:hover, .w3:focus-visible) {
  --a0: -3.25deg; --a1: 1.75deg; --a2: 6.75deg; --a3: 18deg;
  --s0: var(--thin); --s1: var(--thin); --s2: var(--thin); --s3: var(--wide);
}

.wedge {
  position: absolute; left: var(--ox); top: var(--oy);
  width: var(--len); height: var(--box); margin-top: calc(var(--box) / -2);
  background: var(--paper); color: var(--ink); text-decoration: none;
  transform-origin: 0 50%; transform: rotate(var(--a));
  clip-path: polygon(0% calc(50% - var(--t)), 100% calc(50% - var(--s) + var(--j1)), 100% calc(50% + var(--s) + var(--j2)), 0% calc(50% + var(--t)));
  transition: transform .16s linear, clip-path .16s linear;
  pointer-events: auto; outline: none; -webkit-tap-highlight-color: transparent;
}
.w0 { --oy: 40%;   --a: var(--a0); --s: var(--s0); --j1: .7%;  --j2: -.5%; --amax: 3;     --aon: 3;  --n: 0; }
.w1 { --oy: 46.5%; --a: var(--a1); --s: var(--s1); --j1: -.6%; --j2: .5%;  --amax: 14.25; --aon: 8;  --n: 1; }
.w2 { --oy: 53%;   --a: var(--a2); --s: var(--s2); --j1: .5%;  --j2: .8%;  --amax: 19.25; --aon: 13; --n: 2; }
.w3 { --oy: 59.5%; --a: var(--a3); --s: var(--s3); --j1: -.8%; --j2: -.4%; --amax: 24.25; --aon: 18; --n: 3; }

.wedge__name {
  position: absolute; left: var(--name-x); top: 50%; z-index: 2;
  padding: .12em .32em .06em; margin-left: -.32em;
  font: 900 var(--name-size)/1 var(--cut); text-transform: uppercase; white-space: nowrap;
  transform: translateY(-50%) scale(var(--ns, 1)); transform-origin: 0 50%;
  transition: transform .16s linear;
}
/* The arrow at the wide end of each light (where 25 had its count): script places it as far out
   as the window allows. */
.wedge__go {
  position: absolute; left: var(--cx, 56vw); top: 50%; z-index: 2;
  display: flex; align-items: center; padding: .16em .24em .12em;
  font: 900 var(--go-size)/1 var(--cut);
  transform: translateY(calc(-50% - var(--up, 0px))) rotate(-3deg) scale(var(--ns, 1)); transform-origin: 100% 50%;
  transition: transform .16s linear, left .16s linear;
}
.wedge__go .arrow { width: .5em; height: .5em; }
.w1 { --cx: 54vw; }
.w2 { --cx: 46vw; }
.w3 { --cx: 29vw; }

.wedge.is-on, html.no-js .wedge:hover, html.no-js .wedge:focus-visible { z-index: 3; --ns: var(--name-on); }
.wedge.is-on .wedge__name, html.no-js .wedge:hover .wedge__name, html.no-js .wedge:focus-visible .wedge__name {
  background: var(--paper); clip-path: polygon(0 7%, 100% 0, 98.5% 100%, 1.5% 93%);
}
.wedge.is-on .wedge__go, html.no-js .wedge:hover .wedge__go, html.no-js .wedge:focus-visible .wedge__go {
  background: var(--gold); clip-path: polygon(3% 0, 100% 6%, 96% 100%, 0 92%);
  left: var(--cx-on, var(--cx, 56vw)); --up: var(--lift);
}
.fan.has-on .wedge:not(.is-on),
html.no-js .fan:has(.wedge:hover, .wedge:focus-visible) .wedge:not(:hover, :focus-visible) { --ns: .62; }

.lights__door { position: absolute; left: 6vw; top: 12%; width: 12vw; height: 84%; overflow: visible; }
.lights__leaf, .lights__slit { fill: var(--paper); }
.lights__panel { fill: var(--ink); }
.lights__handle { fill: var(--gold); }
/* One gold shape at a time: when a light is chosen, its arrow takes the gold from the handle. */
.lights:has(.wedge.is-on) .lights__handle,
html.no-js .lights:has(.wedge:hover, .wedge:focus-visible) .lights__handle { fill: var(--ink); }

/* ───────────── The player: a paper frame over the page ───────────── */

.player {
  --pf: clamp(10px, 1.05vw, 28px);
  width: min(90vw, calc((100svh - 230px) * 16 / 9 + 2 * var(--pf)));
  max-width: none; max-height: none; padding: 0; border: 0; background: none; color: var(--paper);
  overflow: visible;
}
.player::backdrop { background: rgba(10, 10, 10, .94); }
.player__frame { position: relative; padding: var(--pf); }
.player__frame::before {
  content: ''; position: absolute; inset: 0; background: var(--paper);
  clip-path: polygon(0 .9%, 99.4% 0, 100% 99.2%, .4% 100%);
}
.player__window { position: relative; aspect-ratio: 16 / 9; background: #000; }
.player__video { display: block; width: 100%; height: 100%; background: #000; }
.player__tag {
  position: absolute; left: calc(var(--pf) * -.6); top: -1.15em; z-index: 3;
  background: var(--ink); color: var(--paper); padding: .32em .6em .22em;
  font: 900 clamp(22px, 1.6vw, 44px)/1 var(--cut); text-transform: uppercase;
  clip-path: polygon(0 8%, 100% 0, 97% 100%, 2% 92%); transform: rotate(-2.5deg);
}
.player__close { position: absolute; right: calc(var(--pf) * -.5); top: -1.5em; z-index: 3; --r: 2deg; font-size: clamp(18px, 1.1vw, 30px); }
.player__line { position: relative; margin-top: .55em; padding: 0 .2em; color: var(--ink); font: 800 var(--text)/1.3 var(--plain); }

/* ───────────── 2. Clients and press: straight after the first screen ───────────── */

/* Two belts of cut-out logos, each led by its pasted tag; the tags share one column so the belts
   line up, and each belt runs on past the right margin to the edge of the page.
   Clients run to the left, the press to the right. Every logo is pasted down a little crooked. */
.seen {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 1.6vw 2.6vw;
  padding: 3.4vw var(--g) .8vw;
}
.seen .clients, .seen .press { display: contents; }
.seen .tag { justify-self: start; position: relative; z-index: 1; }
.seen .press .tag { transform: rotate(2deg); }

.belt {
  --u: max(22px, 1.95vw);                     /* one unit of logo height: 28px at 1440, 50px at 2560 */
  --gap: max(60px, 7vw);                      /* about one logo's width between logos */
  --fade: max(36px, 5vw);
  min-width: 0; margin-right: calc(var(--g) * -1);
  overflow: hidden; padding: calc(var(--u) * .7) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
}
.belt__track { display: flex; width: max-content; }
.belt__set {
  display: flex; flex: none; align-items: center; gap: var(--gap);
  margin: 0; padding: 0 var(--gap) 0 0; list-style: none;
}
.belt li { --h: calc(var(--u) * var(--k)); position: relative; flex: none; width: calc(var(--h) * var(--ar)); height: var(--h); }
.belt li:nth-child(4n+1) { --r: -2deg; }
.belt li:nth-child(4n+2) { --r: 1.4deg; }
.belt li:nth-child(4n+3) { --r: -.8deg; }
.belt li:nth-child(4n+4) { --r: 2.2deg; }
/* The file is drawn so that the mark inside it fills the box; any empty margin round it spills out. */
.belt img {
  position: absolute; left: 50%; top: 50%; width: auto; height: calc(var(--h) / var(--fy)); max-width: none;
  filter: brightness(0) invert(.94);
  /* Cut to the mark (plus a little), so faint haze in a file's empty margin never shows as a box.
     --fx is how much of the file's width the mark fills, where that is less than all of it. */
  clip-path: inset(max(0px, calc((1 - var(--fy)) * 50% - 6px)) max(0px, calc((1 - var(--fx, 1)) * 50% - 6px)));
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  transition: transform .12s linear;
}
/* A press link reaches a little past its logo, so it is an easy target; it shows as a paper slip on focus. */
.belt a { position: absolute; inset: -14px -18px; outline: none; }
.belt a:hover img, .belt a:focus-visible img { transform: translate(-50%, -50%) rotate(calc(var(--r, 0deg) * -1)) scale(1.1); }
.belt a:focus-visible { background: var(--paper); clip-path: polygon(0 10%, 100% 0, 97% 100%, 2% 90%); }
.belt a:focus-visible img { filter: brightness(0); }

@media (prefers-reduced-motion: no-preference) {
  @keyframes belt { to { transform: translateX(-50%); } }
  .belt__track { animation: belt var(--pass) linear infinite; }
  .belt--left { --pass: 56s; }
  .belt--right { --pass: 38s; }
  .belt--right .belt__track { animation-direction: reverse; }
  /* Held still under the pointer, and while a press link has the keyboard. */
  .belt:hover .belt__track, .belt:focus-within .belt__track { animation-play-state: paused; }
}
/* Still: every logo once, centred and wrapping in balanced lines (no logo left alone), the copy put away. */
@media (prefers-reduced-motion: reduce) {
  .belt { margin-right: 0; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .belt__track { display: block; width: auto; }
  .belt__set { display: block; padding: 0; font-size: 0; line-height: 0; text-align: center; text-wrap: balance; }
  .belt__set[aria-hidden="true"] { display: none; }
  .belt li { display: inline-block; vertical-align: middle; margin: calc(var(--u) * .55) calc(var(--gap) * .3); }
}

/* ───────────── 4a. The record ───────────── */

.record {
  position: relative; overflow: clip;
  display: grid; grid-template-columns: 54fr 38fr; gap: 4vw 5vw; align-items: center;
  padding: 5vw var(--g) 4vw;
}
.record__big { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6vw 3vw; }
.num { display: flex; flex-direction: column; gap: .5em; }
.num__v { font: 900 clamp(56px, 6vw, 160px)/.86 var(--cut); white-space: nowrap; }
.num__l { font: 600 clamp(18px, 1.2vw, 32px)/1.3 var(--plain); }
.num--a {
  grid-column: 1 / -1; background: var(--paper); color: var(--ink); padding: 2.4vw 2.6vw 2.2vw;
  clip-path: polygon(0 3%, 99% 0, 100% 95%, 1% 100%); transform: rotate(-1.6deg);
}
.num--a .num__v { font-size: clamp(64px, 8.6vw, 230px); }
.num--a .num__l { font-size: clamp(20px, 1.5vw, 40px); }
.num--b { padding-left: 1vw; transform: rotate(-2.5deg); }
.num--c { transform: rotate(1.5deg); }

.feats { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2.6vw; }
.feat { display: flex; flex-direction: column; gap: .3em; }
.feat__h { font: 900 clamp(30px, 2.3vw, 62px)/.95 var(--cut); text-transform: uppercase; transform: rotate(-1.5deg); transform-origin: 0 100%; }
.feat__t { font: 600 var(--text)/1.4 var(--plain); max-width: 30em; }
.feat__t a { color: var(--paper); text-decoration: underline; text-decoration-thickness: .12em; text-underline-offset: .2em; outline: none; }
.feat__t a:hover, .feat__t a:focus-visible { background: var(--paper); color: var(--ink); text-decoration: none; }
.f2 .feat__h { transform: rotate(1deg); }
.f3 .feat__h { transform: rotate(-.6deg); }

.tag {
  flex: none; margin: 0; background: var(--paper); color: var(--ink);
  font: 900 clamp(20px, 1.5vw, 40px)/1 var(--cut); text-transform: uppercase; white-space: nowrap;
  padding: .42em .7em .32em; clip-path: polygon(0 10%, 100% 0, 96% 100%, 3% 90%); transform: rotate(-3deg);
}
.tag--gold { background: var(--gold); }

/* ───────────── 4b. Six people talked ───────────── */

.said { position: relative; height: 42vw; min-height: 630px; }
.said__h {
  position: absolute; left: var(--g); top: 3vw; margin: 0;
  font: 900 5.4vw/.92 var(--cut); text-transform: uppercase; white-space: nowrap;
  transform: rotate(-2.5deg); transform-origin: 0 100%;
}
.said__h .l { display: block; }
.said__h .l + .l { margin-left: .5em; }
.said__sub { position: absolute; left: 6.6vw; top: 15.2vw; font: 600 clamp(20px, 1.45vw, 38px)/1.2 var(--plain); }

.quote {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); margin: 0;
  background: var(--paper); color: var(--ink); padding: 1.6vw 1.8vw 1.4vw;
  transform: rotate(var(--r));
}
.quote blockquote { margin: 0; font: 600 clamp(18px, 1.12vw, 30px)/1.38 var(--plain); }
.quote figcaption { margin-top: .9vw; }
.quote .who { display: block; font: 900 clamp(22px, 1.55vw, 42px)/1 var(--cut); text-transform: uppercase; }
.quote .role { display: block; margin-top: .4em; font: 600 clamp(16px, .8vw, 21px)/1.3 var(--plain); }
/* Joe Rogan large at the top with Lex Fridman beside him; the other four in a row beneath. */
.q1 { --x: 39.5vw; --y: 2vw;   --w: 32vw;   --r: 2.2deg;  clip-path: polygon(0 4%, 98% 0, 100% 95%, 2.5% 100%); padding: 2vw 2.2vw 1.8vw; }
.q1 blockquote { font: 900 clamp(34px, 2.9vw, 80px)/.98 var(--cut); text-transform: uppercase; }
.q1 blockquote > span { display: block; white-space: nowrap; }
.q1 .who { font-size: clamp(26px, 1.9vw, 52px); background: var(--ink); color: var(--paper); display: inline-block; padding: .2em .4em .12em; clip-path: polygon(0 8%, 100% 0, 97% 100%, 2% 92%); transform: rotate(-2deg); }
.q2 { --x: 74vw;   --y: 4.5vw; --w: 21.5vw; --r: -3deg;   clip-path: polygon(2.5% 0, 100% 5%, 97% 100%, 0 95%); }
.q3 { --x: 5vw;    --y: 22vw;  --w: 20.5vw; --r: -2.5deg; clip-path: polygon(0 0, 97% 4%, 100% 100%, 3.5% 95%); }
.q4 { --x: 27.5vw; --y: 22.8vw; --w: 20.5vw; --r: 1.8deg; clip-path: polygon(2% 4%, 100% 0, 97.5% 96%, 0 100%); }
.q5 { --x: 50vw;   --y: 22vw;  --w: 22.5vw; --r: -1.5deg; clip-path: polygon(0 3.5%, 97.5% 0, 100% 100%, 2.5% 95%); }
.q6 { --x: 74.5vw; --y: 22.6vw; --w: 21vw;  --r: 2deg;    clip-path: polygon(2% 0, 100% 3%, 98% 100%, 0 96%); }

/* ───────────── 4. A bit more about: the door is shut, the sign hangs on the knob ───────────── */

.about {
  position: relative; overflow: clip;
  display: grid; grid-template-columns: 24fr 68fr; gap: 6vw; align-items: center;
  padding: 4.4vw var(--g) 4.4vw 9vw;
}
.about__door { width: 100%; max-width: 15vw; justify-self: center; }
.shut { display: block; width: 100%; height: auto; overflow: visible; }
.shut__paper { fill: var(--paper); }
.shut__ink { fill: var(--ink); }
.sign__card { fill: var(--gold); }
.sign__word { font-family: var(--cut); font-weight: 900; font-size: 40px; fill: var(--ink); }

.about__text { display: flex; flex-direction: column; align-items: flex-start; gap: 1.7vw; max-width: 64vw; }
.about .poster-h { margin-bottom: .2vw; }
.about .poster-h .l { display: inline; }
.about .poster-h .l + .l { margin-left: 0; }

/* The inventory: what is behind the door, each line a paper label pasted down a little crooked. */
.inv { display: flex; flex-direction: column; align-items: flex-start; gap: .75vw; margin: 0; padding: 0; list-style: none; }
.inv li {
  max-width: 40em; padding: .42em .8em .38em;
  background: var(--paper); color: var(--ink);
  font: 800 clamp(19px, 1.25vw, 33px)/1.25 var(--plain);
  clip-path: var(--c); transform: rotate(var(--r));
}
.inv li:nth-child(1) { --r: -1.2deg; --c: polygon(0 8%, 100% 0, 98.5% 100%, 1% 92%); }
.inv li:nth-child(2) { --r: .9deg;   --c: polygon(1% 0, 100% 9%, 99% 92%, 0 100%); margin-left: 1.4vw; }
.inv li:nth-child(3) { --r: -.6deg;  --c: polygon(0 3%, 99.5% 0, 100% 96%, .8% 100%); margin-left: .5vw; }
.inv li:nth-child(4) { --r: 1.4deg;  --c: polygon(1.5% 6%, 100% 0, 98% 100%, 0 94%); margin-left: 2.2vw; }
.inv li:nth-child(5) { --r: -1.6deg; --c: polygon(0 0, 98.5% 7%, 100% 100%, 1.5% 91%); margin-left: .9vw; }

.offer { margin-top: .6vw; }
.offer__who { font: 600 var(--text)/1.4 var(--plain); margin-bottom: .7em; }
.offer__list { display: flex; flex-wrap: wrap; gap: .3em 0; margin: 0; padding: 0; list-style: none; font: 800 clamp(19px, 1.2vw, 32px)/1.3 var(--plain); }
.offer__list li { white-space: nowrap; }
.offer__list li:not(:last-child)::after {
  content: ''; display: inline-block; width: .45em; height: .45em; margin: 0 .75em; vertical-align: .12em;
  background: var(--paper); clip-path: polygon(10% 0, 100% 15%, 85% 100%, 0 80%);
}
.about__lead { font: 600 clamp(20px, 1.45vw, 38px)/1.25 var(--plain); max-width: 36em; }
.about__end { margin-top: .4vw; font: 800 clamp(20px, 1.45vw, 38px)/1.3 var(--plain); }
.about__end .l { display: block; }
.about__go { margin-top: .2vw; display: flex; flex-wrap: wrap; align-items: center; gap: 1em 2.2em; }
.about__more {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .2em;
  color: var(--paper); font: 800 clamp(17px, .95vw, 25px)/1 var(--plain);
  text-decoration: underline; text-decoration-thickness: .13em; text-underline-offset: .3em; outline: none;
}
.about__more:hover, .about__more:focus-visible { background: var(--paper); color: var(--ink); text-decoration: none; }

/* ───────────── 5. The Dor Awards: billed like a cast ───────────── */

.awards {
  position: relative; overflow: clip;
  display: grid; grid-template-columns: 27fr 70fr; gap: 3vw 4vw; align-items: start;
  padding: 4.6vw var(--g) 4.2vw;
}
.awards__text { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4vw; }
.awards__line { font: 800 clamp(22px, 1.6vw, 44px)/1.15 var(--plain); max-width: 12em; margin-top: .8vw; }
.awards__body { font: 600 var(--text)/1.45 var(--plain); max-width: 22em; }
.awards__keys { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1vw; margin-top: .6vw; }
.awards__keys .key:nth-child(2) { --r: 1.5deg; }

.cast { position: relative; padding-top: 1.2vw; }
.cast__tag { position: absolute; left: -1.4vw; top: -.6vw; z-index: 2; transform: rotate(-4deg); }
/* Ten judges, billed five across in two even rows (two across on a phone). */
.cast__wall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.2vw 1.9vw; margin: 0; padding: 0; list-style: none; }
.judge { display: flex; flex-direction: column; gap: .45em; min-width: 0; }
.judge__pic { display: block; background: var(--paper); padding: 5%; clip-path: var(--c); transform: rotate(var(--r)); margin-bottom: .35em; }
.judge__pic img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 0;
  clip-path: var(--c); filter: grayscale(1) contrast(1.12) brightness(1.05);
  transition: filter .4s linear;
}
/* Point at a judge (picture or name) and the colour comes back. */
.judge:hover .judge__pic img, .judge:focus-within .judge__pic img { filter: grayscale(0) contrast(1) brightness(1); }
.judge__name { font: 900 clamp(20px, 1.3vw, 34px)/.98 var(--cut); text-transform: uppercase; }
.judge__and { font: 800 max(16px, .62em)/1 var(--plain); text-transform: none; font-style: italic; margin-right: .1em; }
.judge__what { font: 600 clamp(16px, .82vw, 22px)/1.3 var(--plain); }
.judge:nth-child(6n+1) { --r: -1.5deg; --c: polygon(3% 2%, 98% 0, 100% 97%, 0 100%); }
.judge:nth-child(6n+2) { --r: 1.2deg;  --c: polygon(0 12%, 14% 3%, 50% 0, 86% 3%, 100% 12%, 98% 100%, 2% 98%); }
.judge:nth-child(6n+3) { --r: -.8deg;  --c: polygon(9% 0, 92% 1%, 100% 10%, 99% 91%, 90% 100%, 8% 99%, 0 90%, 1% 9%); }
.judge:nth-child(6n+4) { --r: 1.8deg;  --c: polygon(0 0, 100% 4%, 97% 100%, 3% 96%); }
.judge:nth-child(6n+5) { --r: -1.2deg; --c: polygon(50% 0, 100% 9%, 98% 100%, 1% 99%, 0 8%); }
.judge:nth-child(6n+6) { --r: .9deg;   --c: polygon(2% 4%, 96% 0, 100% 100%, 0 97%); }
.cast__with { margin-top: 2vw; font: 600 clamp(17px, .95vw, 25px)/1.5 var(--plain); max-width: 62em; }
.cast__w { font: 900 1.35em/1 var(--cut); text-transform: uppercase; margin-right: .25em; }

/* ───────────── 6. Contact: start a project ───────────── */

.contact {
  position: relative; overflow: clip;
  display: grid; grid-template-columns: 33fr 59fr; gap: 4.5vw; align-items: start;
  padding: 5vw var(--g) 3vw;
}
.contact__head { position: sticky; top: calc(var(--bar) + 3vw); }
.contact__how { margin-top: 1.4em; font: 600 var(--text)/1.45 var(--plain); max-width: 22em; }

.builder {
  background: var(--paper); color: var(--ink); padding: 2.6vw 3vw 2.4vw;
  clip-path: polygon(0 1.2%, 99.3% 0, 100% 98.8%, .6% 100%); transform: rotate(-.6deg);
}
.builder__ask { display: flex; flex-direction: column; gap: 1.8vw; }
.builder__h { margin: 0 0 -.4vw; font: 900 clamp(34px, 2.6vw, 70px)/.95 var(--cut); text-transform: uppercase; transform: rotate(-1.5deg); transform-origin: 0 100%; }
.set { margin: 0; padding: 0; border: 0; min-width: 0; }
.set__h { padding: 0; margin-bottom: .75em; font: 800 clamp(18px, 1.15vw, 30px)/1.2 var(--plain); }
.set__note { margin-top: .9em; font: 800 var(--text)/1.3 var(--plain); }
/* Both rows of chips sit on one line on a desktop (the contact stacks at middle widths to make room). */
.chips { display: flex; flex-wrap: wrap; gap: .8vw .6vw; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chip span {
  display: inline-flex; align-items: center; min-height: 48px; gap: .45em; white-space: nowrap;
  padding: .62em .85em .58em; background: var(--ink); color: var(--paper);
  font: 600 clamp(17px, .9vw, 24px)/1 var(--plain);
  clip-path: polygon(2% 0, 100% 7%, 98% 100%, 0 93%); transform: rotate(var(--r, -1deg));
  transition: transform .1s linear;
}
.chip:nth-child(even) span { --r: 1.2deg; }
.chip:hover span { transform: rotate(calc(var(--r, -1deg) * -1)); }
.chip input:checked + span { background: var(--gold); color: var(--ink); font-weight: 800; }
.chip input:checked + span::before { content: ''; width: .7em; height: .55em; background: currentColor; clip-path: polygon(0 52%, 16% 36%, 38% 62%, 84% 0, 100% 16%, 38% 100%); }
.chip input:focus-visible + span { outline: .2em solid var(--ink); outline-offset: .2em; }

.fields { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.6vw; }
.field { display: flex; flex-direction: column; gap: .5em; }
.field label { font: 800 clamp(17px, .95vw, 25px)/1.2 var(--plain); }
.field textarea, .field input {
  width: 100%; min-height: 52px; border: 0; border-radius: 0; resize: vertical;
  background: var(--ink); color: var(--paper); padding: .7em .9em .6em;
  font: 600 clamp(18px, 1vw, 26px)/1.35 var(--plain);
  clip-path: polygon(0 0, 99.5% 4%, 100% 100%, .6% 96%); outline: none;
  border-bottom: .3em solid var(--ink);
}
.field textarea::placeholder, .field input::placeholder { color: var(--paper); opacity: .72; }
.field textarea:focus, .field input:focus { border-bottom-color: var(--gold); }
.send { display: flex; flex-direction: column; align-items: flex-start; gap: .9em; }
.send .key--gold { background: var(--ink); color: var(--paper); }
.send .key--gold:hover, .send .key--gold:focus-visible { background: var(--gold); color: var(--ink); }
.send__note { font: 600 clamp(16px, .9vw, 24px)/1.4 var(--plain); max-width: 24em; }

/* The brief's four ways in: the subject over the words on the left, name and email beside them. */
.fields { grid-template-columns: 1.5fr 1fr; }
.field--subject { grid-column: 1; grid-row: 1; }
.field--words { grid-column: 1; grid-row: 2; }
.field--words textarea { flex: 1; }
.fields__slip { grid-column: 1 / -1; margin-top: -.6vw; }

/* A check that did not pass: a gold slip pasted under the place to fix, never a pop-up. */
.slip {
  width: fit-content; max-width: 100%; margin: .7em 0 0; padding: .48em .8em .42em;
  background: var(--gold); color: var(--ink);
  font: 800 clamp(16px, .9vw, 24px)/1.25 var(--plain);
  clip-path: polygon(0 9%, 100% 0, 98.5% 100%, 1.2% 91%); transform: rotate(-1deg);
}
.slip::before {
  content: ''; display: inline-block; width: .5em; height: .7em; margin-right: .55em; vertical-align: -.05em;
  background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.field textarea[aria-invalid="true"], .field input[aria-invalid="true"] { border-bottom-color: var(--gold); }
.chips--need:has(input[aria-invalid="true"]) .chip span { outline: .14em solid var(--gold); outline-offset: .12em; }

/* Sent: the brief drops off the table in one straight move (scripted only when motion is welcome). */
@keyframes brief-sent { to { transform: translateY(70vh) rotate(6deg); visibility: hidden; } }
.builder.is-sent { animation: brief-sent .42s linear forwards; }


/* ───────────── The way out ───────────── */

.out { position: relative; padding: 3vw var(--g) 3vw; overflow: clip; }
.mail {
  display: inline-block; font: 900 7.4vw/1 var(--cut); text-transform: uppercase; white-space: nowrap;
  color: var(--paper); text-decoration: none; outline: none;
  transform: rotate(-1.2deg); transform-origin: 0 50%; transition: transform .12s linear;
}
.mail:hover { transform: rotate(.8deg); }
.mail:focus-visible { background: var(--paper); color: var(--ink); }

.out__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 5vw; margin-top: 3.4vw; }
.foot { flex: 1; max-width: 56vw; font: 600 clamp(16px, .86vw, 23px)/1.9 var(--plain); }
.foot ul { display: flex; flex-wrap: wrap; gap: 0 1.5em; margin: 0 0 .5em; padding: 0; list-style: none; }
.foot a { color: var(--paper); text-decoration: none; outline: none; padding: .1em .15em; margin: 0 -.15em; }
.foot a:hover { text-decoration: underline; text-decoration-thickness: .14em; text-underline-offset: .22em; }
.foot a:focus-visible { background: var(--paper); color: var(--ink); }
.foot__lists { display: flex; gap: 0 5vw; }
.foot__lists ul { flex-direction: column; }
/* the six networks: small paper pieces, cut and turned like the keys */
.foot .foot__social { gap: max(10px, .8vw); margin: 1.4em 0 0; }
.foot__social a {
  display: grid; place-items: center; width: clamp(46px, 2.6vw, 66px); aspect-ratio: 1; padding: 0; margin: 0;
  background: var(--paper); color: var(--ink);
  clip-path: polygon(4% 0, 100% 6%, 95% 100%, 0 93%); transform: rotate(var(--r, -2deg)); transition: transform .12s linear;
}
.foot__social li:nth-child(even) a { --r: 2deg; clip-path: polygon(0 5%, 96% 0, 100% 94%, 5% 100%); }
.foot__social a:hover, .foot__social a:focus-visible { background: var(--gold); color: var(--ink); text-decoration: none; transform: rotate(calc(var(--r, -2deg) * -1)); }
.foot__social svg { width: 50%; height: 50%; }
.foot__last { margin: 1.6em 0 0; font: 900 clamp(20px, 1.5vw, 40px)/1 var(--cut); text-transform: uppercase; }
.foot__legal { display: flex; gap: 1.5em; margin-top: .6em; }

.news {
  flex: none; width: 34vw; background: var(--paper); color: var(--ink); padding: 1.8vw 2.2vw 1.6vw;
  clip-path: polygon(0 3%, 98.5% 0, 100% 97%, 1.5% 100%); transform: rotate(1.6deg);
  font: 600 clamp(17px, .95vw, 25px)/1.4 var(--plain);
}
.news__h { margin: 0 0 .25em; font: 900 clamp(26px, 2.2vw, 58px)/1 var(--cut); text-transform: uppercase; }
.news__row { display: flex; align-items: stretch; gap: .8vw; margin: 1vw 0 .8vw; }
.news__field {
  flex: 1; min-width: 0; min-height: 48px; border: 0; border-bottom: .3em solid var(--ink); border-radius: 0;
  background: var(--ink); color: var(--paper); padding: .5em .9em .2em;
  font: 600 clamp(17px, .95vw, 25px)/1.2 var(--plain);
  clip-path: polygon(0 0, 99% 5%, 100% 100%, 1.2% 95%); outline: none;
}
.news__field::placeholder { color: var(--paper); opacity: .72; }
.news__field:focus { border-bottom-color: var(--paper); }
.news__field.is-wrong { border-bottom-color: var(--gold); }
.news__key { --r: 2deg; }

/* ───────────── Motion: a short title sequence, straight lines, dead stops ───────────── */

@media (prefers-reduced-motion: no-preference) {
  /* Pasted down in one go. Visibility, not opacity: it is a cut, not a fade.
     Hidden only while it waits its turn, so nothing depends on a last frame being reached. */
  @keyframes paste { from { visibility: hidden; } }
  @keyframes from-left { from { transform: translateX(-45vw); } }
  @keyframes from-below { from { transform: translateY(60vh); } }
  @keyframes frame-in { from { transform: translateY(-110vh); } }
  @keyframes drop-in { from { transform: translateY(-60px) rotate(-4deg); } }
  @keyframes shoot {
    from { clip-path: polygon(0% calc(50% - var(--t)), 0% calc(50% - var(--t)), 0% calc(50% + var(--t)), 0% calc(50% + var(--t))); }
  }
  .lights.is-seen .wedge { animation: shoot .24s linear backwards; animation-delay: calc(.1s + var(--n) * .11s); }
  .player[open] .player__frame { animation: drop-in .14s linear backwards; }
  .frame { animation: frame-in .26s linear backwards; }
  .leaf { animation: from-left .26s linear .22s backwards; }
  .floor__light { animation: paste 1ms steps(1, start) .4s backwards; }
  .name .cut i { animation: paste 1ms steps(1, start) backwards; animation-delay: calc(.5s + var(--i, 0) * 40ms); }
  .claim { animation: paste 1ms steps(1, start) 1.2s backwards; }
  .frame__tag, .frame__keys { animation: paste 1ms steps(1, start) 1.3s backwards; }
  .gents { animation: from-below .22s linear .35s backwards; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* ───────────── Middle widths: the jury goes under its headline ───────────── */

@media (min-width: 1100px) and (max-width: 1799px) {
  .awards { grid-template-columns: 1fr; }
  .awards__text { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.2vw 4.5vw; align-items: end; }
  .awards__text .poster-h { grid-row: 1 / 3; align-self: center; }
  .awards__line, .awards__body { grid-column: 2; }
  .awards__keys { grid-column: 3; grid-row: 1 / 3; align-self: center; gap: 1.6vw; }
  .cast { margin-top: 2vw; }
}

/* The contact goes the same way, up to 2000 wide: the headline above, the brief the full width
   beneath it, so the six chips and the five budgets each keep to one row. */
@media (min-width: 1100px) and (max-width: 1999px) {
  .contact { grid-template-columns: 1fr; gap: 3.2vw; }
  .contact__head { position: static; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2vw 5vw; align-items: end; }
  .contact__head .poster-h { grid-row: 1 / 3; align-self: center; }
  .contact__head .sub { margin: 0; }
  .contact__how { margin: 0; }
}

/* ───────────── Narrow windows: everything stacks ───────────── */

@media (max-width: 1099px) {
  :root { --g: 5vw; --text: clamp(17px, 4.4vw, 22px); }
  .bar { gap: 3vw; padding: 0 4vw; }
  .bar__nav { gap: 4.2vw; overflow-x: auto; scrollbar-width: none; }
  .bar__nav::-webkit-scrollbar { display: none; }
  .bar__nav a { font-size: 16px; white-space: nowrap; }
  .bar__nav .key--bar { font-size: 16px; padding: .55em .75em .5em; }
  /* Another door, said short. */
  .bar__doors { font-size: 15px; }
  .bar__doors-long { display: none; }
  .bar__doors-short { display: inline; }

  .poster { --fr: 8px; --rw: calc(100vw - 2 * var(--g) - 16px); --dl: var(--g); height: auto; display: block; padding-top: calc(var(--bar) + 6vw); }
  .doorway { margin-left: var(--g); }
  .leaf { display: none; }
  .frame__keys { position: static; justify-content: flex-start; margin-top: 4vw; padding: 0 1vw; gap: 3vw; }
  .frame__tag { font-size: 18px; }
  .frame__keys .key { background: var(--ink); color: var(--paper); }
  .frame__keys .key[aria-pressed="true"] { background: var(--gold); color: var(--ink); }
  .floor { margin-top: 5vw; min-height: 0; }
  .floor__light { left: 0; width: 100%; --sp: 6vw; }
  .floor__type { position: relative; left: 0; width: 100%; padding: 7vw var(--g) 8vw; }
  .name { font-size: 15.5vw; white-space: normal; line-height: .9; }
  .name__l { display: block; }
  .floor__row { flex-direction: column; gap: 5vw; margin-top: 4vw; }
  .claim { font-size: clamp(19px, 5vw, 30px); }
  .gents { display: none; }

  .poster-h { font-size: 13vw; }
  .poster-h .l + .l { margin-left: 0; }
  .work { padding: 14vw var(--g) 12vw; }
  .work__head { display: block; margin-bottom: 9vw; }
  .work__head .sub { margin-top: 4vw; }
  .cards { grid-template-columns: 1fr; gap: 11vw; }
  .card { gap: 3.4vw; padding: 3.4vw 3.4vw 5vw; }
  .c2, .c4 { margin-top: 0; }
  .card__head { flex-wrap: wrap; gap: 1vw 4vw; }
  .card__kind { font-size: 9.4vw; }
  .card__foot { flex-direction: column; align-items: flex-start; gap: 4.5vw; padding: 1vw 1vw 0; }
  .card__title { font-size: 9vw; }

  /* The fan turns into four blades from a door at the left edge. */
  .lights { --lu: min(1vw, 5.2px); height: auto; margin-top: 16vw; }
  .lights__h { position: static; padding: 0 var(--g); font-size: 11vw; white-space: normal; }
  .lights__h .l { display: block; }
  .lights__sub { position: static; padding: 0 var(--g); margin-top: 4vw; font-size: clamp(18px, 4.6vw, 26px); }
  .lights__scene { position: relative; inset: auto; height: calc(150 * var(--lu)); margin-top: 6vw; }
  .fan {
    --ox: calc(20.6 * var(--lu)); --len: 112vw; --box: calc(62 * var(--lu));
    --t: 4.2%; --idle: 21%; --wide: 35.5%; --thin: 14%;
    --a0: -7deg; --a1: -1deg; --a2: 5deg; --a3: 11deg;
    --name-x: calc(15 * var(--lu)); --name-size: calc(6.6 * var(--lu)); --go-size: calc(10 * var(--lu)); --name-on: 1;
    --still-x: calc(6 * var(--lu)); --still-w: max(112vw, calc(112 * var(--lu))); --lift: 0px;
  }
  .fan[data-on="0"], .fan[data-on="1"], .fan[data-on="2"], .fan[data-on="3"],
  html.no-js .fan:has(.wedge:hover, .wedge:focus-visible) { --a0: -7deg; --a1: -1deg; --a2: 5deg; --a3: 11deg; }
  .w0 { --oy: 17%; --amax: 7; --aon: 7; }
  .w1 { --oy: 37%; --amax: 1; --aon: 1; }
  .w2 { --oy: 57%; --amax: 5; --aon: 5; }
  .w3 { --oy: 75%; --amax: 11; --aon: 11; }
  .fan.has-on .wedge:not(.is-on) { --ns: .86; }
  .lights__door { left: calc(-3 * var(--lu)); top: 0; width: calc(22 * var(--lu)); height: 100%; }

  .player { width: 94vw; }
  .player__tag { font-size: 18px; }
  .player__close { top: -1.7em; }

  .seen { display: block; padding: 12vw var(--g) 0; }
  .seen .clients, .seen .press { display: flex; flex-direction: column; align-items: flex-start; gap: 2vw; }
  .seen .press { margin-top: 7vw; }
  /* The belts run the full width of the phone, edge to edge, under their tags. */
  .belt { align-self: stretch; margin: 0 calc(var(--g) * -1); }
  @media (prefers-reduced-motion: reduce) { .belt { margin: 0; } }

  .record { display: block; padding: 14vw var(--g) 10vw; }
  .record__big { gap: 8vw 5vw; }
  .num--a { padding: 6vw; }
  .num--a .num__v { font-size: 13vw; }
  .num__v { font-size: 12vw; }
  .feats { margin-top: 12vw; gap: 8vw; }
  .feat__h { font-size: 8vw; }

  .said { height: auto; min-height: 0; padding: 14vw var(--g) 10vw; }
  .said__h { position: static; font-size: 12vw; white-space: normal; }
  .said__h .l + .l { margin-left: 0; }
  .said__sub { position: static; margin: 5vw 0 9vw; font-size: clamp(18px, 4.6vw, 28px); }
  .quote { position: static; width: auto; max-width: 34em; padding: 5vw 5.5vw 4.5vw; margin: 0 0 6vw; }
  .q1 { padding: 6vw; }
  .quote:nth-of-type(even) { margin-left: 5vw; }
  .quote:nth-of-type(odd) { margin-right: 5vw; }
  .quote blockquote { font-size: clamp(17px, 4.4vw, 24px); }
  .q1 blockquote { font-size: clamp(26px, 7.6vw, 52px); }
  .q1 blockquote > span { white-space: normal; }
  .quote figcaption { margin-top: 3vw; }
  .quote .who { font-size: clamp(22px, 6vw, 34px); }
  .quote .role { font-size: 16px; }

  .about { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 12vw; padding: 14vw var(--g) 12vw; }
  .about__text { max-width: none; gap: 6vw; }
  .about__door { width: 50vw; max-width: 300px; margin-left: 14vw; }
  .about .poster-h .l { display: block; }
  .inv { gap: 3vw; }
  .inv li { font-size: clamp(17px, 4.6vw, 24px); max-width: calc(100% - 4vw); }
  .inv li:nth-child(n) { margin-left: 0; }
  .inv li:nth-child(even) { margin-left: 3vw; }
  /* Run as balanced lines of text, so the last line never holds one service alone. */
  .offer__list { display: block; font-size: 18px; line-height: 1.6; text-wrap: balance; }
  .offer__list li { display: inline; }
  .offer__list li:not(:last-child)::after { margin: 0 .45em 0 .7em; }

  .awards { display: block; padding: 14vw var(--g) 12vw; }
  .awards__text { gap: 5vw; }
  .awards__line { font-size: clamp(21px, 5.6vw, 30px); }
  .awards__keys { gap: 4vw; margin-top: 2vw; }
  .cast { margin-top: 14vw; padding-top: 4vw; }
  .cast__tag { left: -2vw; top: -4vw; }
  .cast__wall { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6vw 3vw; }
  .judge__name { font-size: clamp(16px, 2.3vw, 25px); }
  .judge__what { font-size: 15px; }
  .cast__with { margin-top: 8vw; font-size: 17px; }

  .contact { display: block; padding: 14vw var(--g) 10vw; }
  .contact__head { position: static; margin-bottom: 9vw; }
  .builder { padding: 6vw 5vw; transform: none; }
  .builder__ask { gap: 8vw; }
  .builder__h { font-size: 10vw; }
  .chips { gap: 2.6vw; }
  .chip span { font-size: 16px; }
  /* The six needs: an even grid, never one chip alone on a row. */
  .chips--need { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chips--need .chip span { display: flex; width: 100%; }
  .set__h { font-size: 19px; }
  .fields { grid-template-columns: 1fr; gap: 5vw; }
  .field--subject, .field--words { grid-column: auto; grid-row: auto; }
  .fields__slip { margin-top: -2vw; }
  .send { gap: 4vw; }

  .out { padding: 10vw var(--g) 10vw; }
  .mail { font-size: 7.4vw; }
  .out__row { flex-direction: column-reverse; gap: 12vw; margin-top: 10vw; }
  .news { width: auto; max-width: 34em; padding: 6vw; }
  .news__h { font-size: clamp(28px, 8vw, 54px); }
  .news__row { flex-wrap: wrap; gap: 3vw; margin: 4vw 0 3vw; }
  .news__field { flex: 1 1 100%; }
  .foot { max-width: none; font-size: 17px; line-height: 2.3; }
  .foot__lists { gap: 0 12vw; }
}
/* Still belts on a phone: two even columns, so no logo is ever left alone on the last line. */
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .belt__set { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; justify-items: center; align-items: center; gap: 0 12vw; }
  .belt li { margin: calc(var(--u) * .55) 0; }
}
@media (max-width: 700px) {
  .cast__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8vw 6vw; }
  .judge__name { font-size: clamp(18px, 4.8vw, 28px); }
  .chips--need { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chips--need .chip span { padding-left: .75em; padding-right: .6em; gap: .35em; }
}
/* The bar, step by step, so all five links always fit beside the two doors:
   under 920 the little door goes on alone (still named "Try another door" for screen readers),
   under 720 our name steps aside and leaves our door, under 500 our door steps aside too. */
@media (max-width: 920px) {
  .bar { gap: 2.4vw; }
  .bar__nav { gap: 2.6vw; }
  .bar__nav a:not(.key) { padding: 0; }
  .bar__doors { gap: 0; }
  .bar__doors-t { display: none; }
  .bar__doors-i { height: 28px; }
  /* With the words gone, keyboard focus shows as a gold cut under the little door. */
  .bar__doors:focus-visible::before {
    content: ''; position: absolute; left: -3px; bottom: 3px; width: calc(28px * 32 / 48 + 6px); height: 5px;
    background: var(--gold); clip-path: polygon(0 20%, 100% 0, 98% 100%, 2% 80%);
  }
}
@media (max-width: 720px) {
  .bar__name { display: none; }
}
@media (max-width: 520px) {
  /* Each number gets the full width, so its label keeps to one line. */
  .record__big { grid-template-columns: 1fr; gap: 7vw; }
}
/* A phone: the five links take the rest of the bar after the little door; the door logo steps
   aside (Home does its job). */
@media (max-width: 500px) {
  .bar { padding: 0 2.6vw; }
  .bar__nav .key--bar { padding-left: .6em; padding-right: .6em; }
  .bar__doors { padding-right: 0; }
  .bar__doors::after { display: none; }
  .bar__home { display: none; }
  .bar__nav { margin-left: 0; flex: 1; min-width: 0; justify-content: space-between; gap: 2vw; }
}
@media (max-width: 380px) {
  .bar { gap: 2vw; }
  .bar__nav a:not(.key) { font-size: 15px; }
  .bar__nav .key--bar { font-size: 15px; padding: .55em .5em .5em; margin-left: 0; }
}

/* ---------- The door control, compressed ----------
   The logo stands alone at the left. The way back to the four doors is only its little paper door, at
   the far end of the bar after Contact; its name is pasted beneath it on a paper slip when pointed at. */
.bar__doors { padding-right: 0; gap: 0; }
.bar__doors::after { display: none; }
.bar__doors-long { display: inline; }
.bar__doors-short { display: none; }
.bar__doors-t {
  position: absolute; top: calc(50% + var(--bar) / 2 + 6px); right: -.3em; margin: 0; padding: .65em .9em .55em;
  background: var(--paper); color: var(--ink); clip-path: polygon(0 8%, 100% 0, 97% 100%, 2% 92%);
  opacity: 0; transform: translateY(-4px) rotate(-1deg); pointer-events: none; transition: opacity .12s linear, transform .12s linear;
}
.bar__doors:is(:hover, :focus-visible) .bar__doors-t { opacity: 1; transform: rotate(-1deg); text-decoration: none; }