/* Hyrum Hurst. His banner on the web: near-black, navy photos, off-white type, his name in Anton, his signature.
   Type: Anton (the face of his name) sets every heading, every figure and the big quotes, in capitals. Geist sets
   what is read as running text. Every small line (credit, caption, label, handle) uses ONE style: Anton, small, in
   capitals, let out. Do not add a fourth voice, and do not set a heading in Geist: he read that as generated.
   Layout: a twelve-column grid capped at 1480px, straight edges, no cards, no arrows, no half-empty columns.
   One loud colour sits on top (--volt), and it is always his own hand: his signature, the marker over the best words,
   the line sprayed on the stadium, the stars. Never a glow, a gradient, a label or a button.
   Two classes come from the script: "live" (it is running) and "motion" (things may start hidden and move).
   Nothing is hidden unless "motion" is set, so the page is whole without the script. */

@font-face { font-family: "Geist"; src: url("../fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Anton"; src: url("../fonts/Anton-Regular.woff2") format("woff2"); font-weight: 400; font-display: block; }

:root {
  --bg: #04060a;
  --ink: #f4f2ee;
  --soft: rgba(244, 242, 238, .74);
  --mut: #868c9c;
  --rule: rgba(244, 242, 238, .13);
  --frame: #96a0b9;
  --volt: #c9ff2f;                                              /* the green. The same colour as VOLT in tools\build_media.py */
  --pad: clamp(20px, 4vw, 56px);
  --max: 1480px;
  --gut: max(var(--pad), calc((100vw - var(--max)) / 2));     /* side margin: the page stops growing at --max */
  --gap: clamp(16px, 2vw, 32px);
  --s1: clamp(72px, 10.5vh, 132px);                            /* space between sections */
  --s2: clamp(26px, 4.2vh, 52px);                              /* space inside a section, under its heading */
  --small: rgba(244, 242, 238, .6);                            /* the colour of small print */
  --ease: cubic-bezier(.19, 1, .22, 1);
  --name: "Anton", "Arial Narrow", Impact, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; font: 400 17px/1.5 "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, video, svg { display: block; }
img, video { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
h1, h2, p, figure, blockquote, ol, ul, dl, dd { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0; }
:focus-visible { outline: 2px solid var(--volt); outline-offset: 4px; }
::selection { background: var(--volt); color: var(--bg); }

/* type. Headings: the name's face, in capitals, big, with their natural spacing (never squeezed). */
h2 { font: 400 clamp(44px, 6.2vw, 104px) / .9 var(--name); letter-spacing: .006em; text-transform: uppercase; }
.sub { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.45; color: var(--soft); max-width: 38ch; text-wrap: pretty; }
/* small print: one voice for every credit, caption, label and handle on the page */
.quote figcaption, .arena-quote figcaption, .arena-place span, .film-host span, .voice figcaption span, .tag, .kit > span, .follow-links span, .foot-row, .top-nav {
  font: 400 clamp(10.5px, .8vw, 12.5px) / 1.45 var(--name); letter-spacing: .16em; text-transform: uppercase; color: var(--small); }
.stars { fill: var(--volt); width: 78px; height: 14px; flex: none; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 99; padding: 10px 14px; background: var(--ink); color: var(--bg); }
.skip:focus { left: 8px; }
/* a link inside text: a hairline that turns solid */
.outlet a, .also a, .kit a, .kit button { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px; padding-bottom: 2px; transition: color .2s linear; }
.outlet a:hover, .also a:hover, .kit a:hover, .kit button:hover { color: var(--ink); }

/* ---------- motion: all of it is off unless the script sets "motion" ---------- */
.motion .rv { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.motion .rv.in { opacity: 1; transform: none; }
/* a rule that draws itself from the left */
.ln { position: relative; }
.ln::before, .ln.end::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--rule); transform-origin: 0 50%; transition: transform 1.5s var(--ease); transition-delay: inherit; }
.ln::before { top: 0; }
.ln.end::after { bottom: 0; }
.motion .rv.ln:not(.in)::before, .motion .rv.ln:not(.in)::after { transform: scaleX(0); }
/* words that rise out of their own line */
.motion .lines .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .06em .16em; margin: -.1em -.06em -.16em; }
.motion .lines .wi { display: inline-block; transform: translateY(122%); transition: transform 1.2s var(--ease); }
.motion .lines.in .wi { transform: none; }
/* five stars, one after another */
.motion .st .stars, .motion .rv .stars { clip-path: inset(0 100% 0 0); }
.motion .st.in .stars, .motion .rv.in .stars { clip-path: inset(0); transition: clip-path .8s steps(5, end) .35s; }
/* a picture that is uncovered from the top */
.motion .wipe > :first-child { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease); }
.motion .wipe.in > :first-child { clip-path: inset(0); }
/* a figure whose digits roll up to their number */
.od { position: relative; display: inline-block; clip-path: inset(-.04em -1em -.04em -1em); }
.od-g { visibility: hidden; }
.od-s { position: absolute; left: 50%; top: -.12em; transform: translate3d(-50%, 0, 0); transition: transform 1.6s cubic-bezier(.2, .9, .2, 1); }
.od-s i { display: block; height: 1.1em; line-height: 1.1; font-style: normal; text-align: center; }
.rv.in .od-s { transform: translate3d(-50%, calc(var(--to) * -1.1em), 0); }

/* a phrase run over with the marker: it is swiped across once the words have arrived */
mark { margin: 0 -.16em; padding: .04em .16em .08em; color: var(--bg); background: linear-gradient(var(--volt), var(--volt)) no-repeat 0 60% / 100% 88%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.motion .rv mark { color: inherit; background-size: 0% 88%; transition: background-size .7s cubic-bezier(.3, 0, .2, 1) .8s, color .16s linear 1.05s; }
.motion .rv.in mark { color: var(--bg); background-size: 100% 88%; }

/* ---------- header ---------- */
.top { position: absolute; z-index: 60; top: 0; left: 0; right: 0; height: 64px; padding: 0 var(--gut); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.live .top { position: fixed; }
.top.solid { background: var(--bg); box-shadow: 0 1px 0 var(--rule); }
.top-name { font: 400 20px/1 var(--name); letter-spacing: .03em; text-transform: uppercase; visibility: hidden; }
.top.named .top-name { visibility: visible; }
.top-nav { display: flex; gap: clamp(20px, 2.6vw, 40px); margin-left: auto; color: var(--soft); }
.top-nav a { position: relative; padding: 6px 0; transition: color .2s linear; }
.top-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--volt); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s var(--ease); }
.top-nav a:hover { color: var(--ink); }
.top-nav a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

/* ---------- the poster. --p is how far the hero has been scrolled, --mx and --my where the pointer is. ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; --u: min(1svh, .6vw); --fh: calc(88 * var(--u)); --p: 0; --mx: 0; --my: 0;
  height: min(100svh, calc(118 * var(--u))); min-height: 480px; }
.prints { position: absolute; inset: 0; z-index: 0; --pw: 32vw; transform: translate3d(calc(var(--mx) * -18px), calc(var(--p) * 170px + var(--my) * -12px), 0); will-change: transform; }
.pr { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1vw); aspect-ratio: 16 / 9; margin: 0; overflow: hidden; background: #070b16;
  border: 2px solid var(--frame); opacity: .34; transform: rotate(var(--r)); }
.pr video { width: 100%; height: 100%; object-fit: cover; }
.pr video::-webkit-media-controls { display: none !important; }   /* with scripts off a browser adds its own play bar */
.pr:nth-child(n+8) { display: none; }
/* with the script on, it places every print itself on every frame: one size, moved and scaled, so nothing reflows */
.prints.live .pr { display: block; left: 0; top: 0; width: var(--pw); opacity: 0; will-change: transform, opacity; }

.name { position: absolute; inset: 0; z-index: 1; font: 400 calc(.2817 * var(--fh)) / 1 var(--name); text-transform: uppercase; color: var(--ink);
  transform: translate3d(calc(var(--mx) * -9px), calc(var(--p) * 110px + var(--my) * -6px), 0); will-change: transform; }
.name span { position: absolute; bottom: calc(.625 * var(--fh) - .0765em); white-space: nowrap; animation: rise .9s var(--ease) both .2s;
  text-shadow: .032em .032em 0 var(--volt); }               /* the green on his name: a hard print shadow, his pick of three (2026-11-14) */
.n1 { right: calc(50% + .117 * var(--fh)); translate: calc(var(--p) * -9vw) 0; }       /* the two words part as the page moves on */
.n2 { left: calc(50% + .199 * var(--fh)); translate: calc(var(--p) * 9vw) 0; animation-delay: .32s !important; }
@keyframes rise { from { clip-path: inset(100% -5% -5% -5%); transform: translateY(8%); } to { clip-path: inset(-20% -5% -20% -5%); transform: none; } }

.fig { position: absolute; z-index: 2; bottom: 0; left: calc(50% - .58 * var(--fh)); height: var(--fh); width: auto; max-width: none;
  -webkit-mask-image: linear-gradient(#000 85%, transparent 99.5%); mask-image: linear-gradient(#000 85%, transparent 99.5%);
  transform: translate3d(calc(var(--mx) * 8px), calc(var(--my) * 5px), 0) scale(calc(1 + var(--p) * .05)); transform-origin: 50% 100%;
  animation: fig-in 1.1s var(--ease) backwards .4s; }
@keyframes fig-in { from { opacity: 0; translate: 0 1.6%; } to { opacity: 1; translate: 0 0; } }
.scrim { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 21%; pointer-events: none;
  background: linear-gradient(rgba(4, 6, 10, 0), rgba(4, 6, 10, .9) 54%, var(--bg) 94%); }
.sig { position: absolute; z-index: 4; left: calc(50% + .238 * var(--fh)); bottom: calc(.496 * var(--fh)); width: calc(.557 * var(--fh)); max-width: none;
  transform: translate3d(calc(var(--mx) * -13px), calc(var(--p) * 60px + var(--my) * -8px), 0);
  animation: write 1s cubic-bezier(.6, 0, .2, 1) both 1s; }
@keyframes write { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% -3% -10% 0); } }

.hero-foot { position: absolute; z-index: 5; left: 0; right: 0; bottom: calc(2.8 * var(--u)); padding: 0 var(--pad); text-align: center; animation: fade .9s linear both 1.3s; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
/* the credits, as logos: the small words sit on one line, the logos are centred in equal boxes below them */
.marks { list-style: none; display: flex; justify-content: center; align-items: flex-end; gap: calc(4.6 * var(--u)); margin: calc(2.2 * var(--u)) 0 0; padding: 0; }
.marks li { display: grid; grid-template-rows: auto calc(7.4 * var(--u)); justify-items: center; row-gap: calc(.8 * var(--u)); }
.marks span { font: 400 clamp(8px, calc(1.05 * var(--u)), 10.5px) / 1 var(--name); letter-spacing: .17em; text-transform: uppercase; color: rgba(244, 242, 238, .52); white-space: nowrap; }
.marks img { align-self: center; height: calc(var(--h) * var(--u)); width: auto; max-width: none; }

/* portrait screens: the figure fills the frame and the name sits across him, like a one-sheet */
@media (max-aspect-ratio: 4/5) {
  .hero { height: 100svh; min-height: 560px; --fh: min(68svh, 150vw); }
  .prints { --pw: 66vw; }
  .fig { bottom: auto; top: 62px; -webkit-mask-image: none; mask-image: none; }
  .scrim { height: 66%; background: linear-gradient(rgba(4, 6, 10, 0), rgba(4, 6, 10, .5) 26%, rgba(4, 6, 10, .93) 56%, var(--bg) 76%); }
  .name { z-index: 4; inset: auto 0 178px 0; font-size: min(35.4vw, 19svh); line-height: .9; text-align: center; transform: none; }
  .name span { position: static; display: block; }
  .n1, .n2 { right: auto; left: auto; translate: none; }
  .sig { left: auto; right: 6vw; bottom: 130px; width: min(45vw, 260px); transform: rotate(-3deg); z-index: 5; }
  .hero-foot { bottom: max(14px, env(safe-area-inset-bottom)); }
  .marks { flex-wrap: wrap; gap: 12px 18px; margin-top: 12px; }
  .marks li { grid-template-rows: auto 28px; row-gap: 5px; }
  .marks span { font-size: 7.5px; line-height: 1.35; white-space: normal; max-width: 104px; text-align: center; }
  .marks img { height: calc(var(--h) * 3.7px); }
  .pr:nth-child(1) { --x: -20 !important; --y: 8 !important; --w: 64 !important; }
  .pr:nth-child(2) { --x: 58 !important; --y: 5 !important; --w: 66 !important; }
  .pr:nth-child(4) { --x: -24 !important; --y: 30 !important; --w: 62 !important; }
  .pr:nth-child(5) { --x: 64 !important; --y: 29 !important; --w: 60 !important; }
  .prints:not(.live) .pr:nth-child(3), .prints:not(.live) .pr:nth-child(6), .prints:not(.live) .pr:nth-child(7) { display: none; }
}

/* phones: the six logos always sit in two rows of three, so the signature has a fixed place above them */
@media (max-aspect-ratio: 4/5) and (max-width: 600px) {
  .marks { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; align-items: end; }
}
@media (max-aspect-ratio: 4/5) and (max-width: 380px) {
  .marks { gap: 12px 14px; }
  .marks img { height: calc(var(--h) * 3.2px); }
}

/* ---------- the record: three figures across the page ---------- */
.nums { padding: var(--s1) var(--gut); }
.ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
.ledger div { padding-top: clamp(18px, 1.8vw, 28px); }
.ledger dt { font: 400 clamp(64px, 8.4vw, 144px) / .84 var(--name); letter-spacing: .004em; white-space: nowrap; }
.ledger dt.hot { color: var(--volt); }                         /* the one figure in the green: the ranking */
.ledger dd { margin-top: clamp(14px, 1.3vw, 22px); max-width: 25ch; font-size: clamp(15px, 1.22vw, 18px); line-height: 1.4; color: var(--soft); text-wrap: balance; }
.dd-logo { display: block; height: clamp(22px, 2.1vw, 32px); width: auto; margin-top: 12px; }

/* ---------- the stadium: shaded where the words sit, clear on the right ---------- */
.arena-in { position: relative; height: min(84svh, 56vw); min-height: 480px; overflow: hidden; isolation: isolate; background: #070b16; }
.arena-pic { position: absolute; inset: 0; overflow: hidden; }
.arena-wall { position: absolute; inset: 0; will-change: transform; }
.arena-wall > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; }
/* one sprayed line on the roof (he kept this one). It is sprayed left to right, and then the paint runs. */
.spray { position: absolute; right: 5.5%; top: 9.5%; width: 36%; aspect-ratio: 1641 / 465; pointer-events: none; }
.spray img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.motion .spray-t { clip-path: inset(0 100% 0 0); }
.motion .spray-d { clip-path: inset(0 0 47% 0); }
.motion .spray.in .spray-t { clip-path: inset(0); transition: clip-path 1.25s cubic-bezier(.45, 0, .25, 1); }
.motion .spray.in .spray-d { clip-path: inset(0); transition: clip-path 2.8s cubic-bezier(.25, .6, .3, 1) 1s; }
.arena-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, var(--bg) 0%, rgba(4, 6, 10, .95) 24%, rgba(4, 6, 10, .7) 44%, rgba(4, 6, 10, 0) 70%),
    linear-gradient(to bottom, var(--bg), rgba(4, 6, 10, 0) 14%), linear-gradient(to top, var(--bg), rgba(4, 6, 10, 0) 16%); }
/* the review is set like a headline, in the name's face, with the number that matters in the green */
.arena-quote { position: absolute; left: var(--gut); top: 50%; width: min(56vw, 900px); transform: translateY(-50%); }
.arena-quote .stars { width: clamp(96px, 9vw, 136px); height: clamp(17px, 1.65vw, 25px); }
.arena-quote blockquote { margin: clamp(16px, 1.8vw, 26px) 0 clamp(18px, 2vw, 28px); font: 400 clamp(38px, 5.5vw, 94px) / .93 var(--name); letter-spacing: .006em; text-transform: uppercase; }
.arena-quote em { font-style: normal; color: var(--volt); }
.arena-place { position: absolute; right: var(--gut); bottom: clamp(28px, 5vh, 56px); display: flex; align-items: center; gap: clamp(14px, 1.4vw, 22px); padding-top: 18px; border-top: 1px solid rgba(244, 242, 238, .34); }
.arena-place span { color: var(--ink); }
.arena-place img { height: clamp(48px, 5.4vw, 84px); width: auto; }

/* ---------- what the room said: the heading, then six reviews across the full width ---------- */
.said { padding: var(--s1) var(--gut); }
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); margin-top: var(--s2); }
.quote { padding: clamp(20px, 1.8vw, 28px) 0 clamp(30px, 3vw, 46px); }
.quote blockquote { margin: 16px 0 18px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.34; letter-spacing: -.012em; font-weight: 500; text-wrap: pretty; }
.motion .quotes .quote.rv { transition: opacity .5s linear, transform 1.1s var(--ease); }
@media (hover: hover) { .quotes:hover .quote.in:not(:hover) { opacity: .32; } }       /* the one being read stands out */

/* ---------- on stage: one room, three moving pictures, layered ---------- */
.stage { padding-bottom: var(--s1); }
.film { position: relative; height: min(82svh, 54vw); min-height: 460px; overflow: hidden; background: #070b16; }
.film-pic { position: absolute; inset: 0; overflow: hidden; }
.film-pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; will-change: transform; }
.film-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, var(--bg), rgba(4, 6, 10, 0) 15%), linear-gradient(to top, var(--bg), rgba(4, 6, 10, 0) 24%),
    radial-gradient(84% 118% at 0% 100%, rgba(4, 6, 10, .97), rgba(4, 6, 10, .88) 38%, rgba(4, 6, 10, 0) 74%); }
.film-text { position: absolute; left: var(--gut); bottom: clamp(44px, 9vh, 104px); width: min(44vw, 560px); }
.film-text .sub { margin-top: clamp(14px, 1.4vw, 22px); }
/* under the film: who invited him on the left, the two smaller pictures on the right, so that strip is never empty */
.film-tiles { position: relative; z-index: 2; display: flex; justify-content: flex-end; align-items: flex-start; gap: var(--gap); padding: 0 var(--gut); margin-top: clamp(-200px, -14vw, -96px); pointer-events: none; }
.film-host { display: flex; align-items: center; gap: 14px; margin: 0 auto 0 0; align-self: flex-end; max-width: 320px; }
.film-host img { height: clamp(50px, 4.8vw, 72px); width: auto; flex: none; }
.tile { flex: none; }
.tile-in { overflow: hidden; background: #070b16; outline: 1px solid rgba(244, 242, 238, .2); box-shadow: 0 30px 70px rgba(0, 0, 0, .7); will-change: transform; }
.tile-in video, .tile-in img { width: 100%; height: 100%; object-fit: cover; }
.tile-b { width: 31%; }
.tile-b .tile-in { aspect-ratio: 16 / 10; }
.tile-c { width: 21%; margin-top: clamp(44px, 6.4vw, 104px); }
.tile-c .tile-in { aspect-ratio: 4 / 3; }
.tile-c img { object-position: 62% 60%; }

/* ---------- workshops ---------- */
.shop { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; padding: 0 var(--gut) var(--s1); }
.shop-media { grid-column: 1 / span 5; position: relative; margin-bottom: 6%; }
.shop-video { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #070b16; }
.shop-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.shop-inset { position: absolute; right: -18%; bottom: -8%; width: 54%; }
.shop-inset-in { aspect-ratio: 16 / 10; overflow: hidden; outline: 1px solid rgba(244, 242, 238, .2); box-shadow: 0 30px 70px rgba(0, 0, 0, .7); will-change: transform; }
.shop-inset-in img { width: 100%; height: 100%; object-fit: cover; }
.shop-text { grid-column: 8 / span 5; }
.shop-text .sub { margin-top: clamp(14px, 1.4vw, 22px); }
.voice { margin-top: var(--s2); padding-top: clamp(22px, 2.4vw, 32px); }
.voice blockquote { margin: 16px 0 18px; font-size: clamp(17px, 1.42vw, 20.5px); line-height: 1.42; letter-spacing: -.012em; color: var(--soft); text-wrap: pretty; }
.voice blockquote strong { display: block; margin-bottom: .34em; font: 400 clamp(30px, 3.3vw, 56px) / .94 var(--name); letter-spacing: .006em; text-transform: uppercase; color: var(--ink); }
.voice figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.voice figcaption b { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.five { list-style: none; margin-top: clamp(24px, 3vw, 40px); }
.five li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; font-size: 16px; font-weight: 500; color: var(--soft); }

/* ---------- press: the outlets are the design ---------- */
.press { padding: var(--s1) var(--gut); border-top: 1px solid var(--rule); }
.press-list { margin-top: var(--s2); }
.outlet { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; padding: clamp(26px, 3vw, 46px) 0; }
.outlet-logo { grid-column: 1 / span 8; height: calc(var(--k) * clamp(30px, 4.4vw, 68px)); width: auto; max-width: 100%; object-fit: contain; object-position: 0 50%; }
.outlet-note { grid-column: 9 / span 4; display: grid; justify-items: start; gap: 9px; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--soft); }
.press-more { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; margin-top: clamp(28px, 3.2vw, 48px); }
.also { grid-column: 1 / span 7; font-size: 15.5px; line-height: 1.65; color: var(--mut); }
.kit { grid-column: 9 / span 4; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; font-size: 15.5px; font-weight: 500; color: var(--soft); }
.kit > span { flex-basis: 100%; }

/* ---------- his headshot (it gets a moustache), and where to find him: each row is one link ---------- */
.sign { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; padding: 0 var(--gut) var(--s1); }
.sign-pic { grid-column: 1 / span 5; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #070b16; }
.sign-wall { position: absolute; inset: 0; will-change: transform; }
.sign-wall > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the moustache: the photo is left clean for a moment, then it is sprayed on in one pass and the paint runs.
   Its place is a share of the photo: left, top, width. Move these three if the photo is ever swapped. */
.stache { left: 18.5%; right: auto; top: 40.5%; width: 62%; aspect-ratio: 848 / 840; }
.motion .stache .spray-d { clip-path: inset(0 0 58% 0); }
.motion .stache.in .spray-t { transition: clip-path .85s cubic-bezier(.5, 0, .3, 1) 1.15s; }
.motion .stache.in .spray-d { transition: clip-path 3.2s cubic-bezier(.25, .6, .3, 1) 1.85s; }
.sign-text { grid-column: 7 / span 6; }
.follow-links { margin-top: var(--s2); }
.follow-links a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(18px, 1.9vw, 30px) 0 clamp(14px, 1.5vw, 24px);
  background: linear-gradient(var(--volt), var(--volt)) no-repeat 0 0 / 0% 100%; transition: background-size .6s var(--ease), color .25s linear; }
.motion .follow-links a.rv { transition: opacity 1s var(--ease), transform 1.1s var(--ease), background-size .6s var(--ease), color .25s linear; }
.follow-links b { font: 400 clamp(36px, 4.3vw, 72px) / .9 var(--name); letter-spacing: .006em; text-transform: uppercase; transition: transform .6s var(--ease); }
.follow-links span { transition: transform .6s var(--ease), color .25s linear; }
@media (hover: hover) {
  .follow-links a:hover { background-size: 100% 100%; color: var(--bg); }       /* the row is run over with the marker */
  .follow-links a:hover b { transform: translateX(18px); }
  .follow-links a:hover span { transform: translateX(-18px); color: var(--bg); }
}
.follow-links a:focus-visible { background-size: 100% 100%; color: var(--bg); outline-offset: 0; }
.follow-links a:focus-visible span { color: var(--bg); }

.foot { padding: 0 var(--gut); overflow: hidden; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 20px 0; border-top: 1px solid var(--rule); }
/* his ask: the name at the foot in the green */
.foot-name { margin: clamp(20px, 5vh, 56px) 0 -.11em; font: 400 calc((100vw - 2 * var(--gut)) / 5.19) / .86 var(--name); text-transform: uppercase; white-space: nowrap; color: var(--volt); user-select: none; will-change: transform; }

/* ---------- smaller screens ---------- */
@media (max-width: 960px) {
  .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .film-text { width: auto; right: var(--gut); max-width: 520px; }
  .film-tiles { flex-wrap: wrap; margin-top: -56px; }
  .film-host { order: 3; flex-basis: 100%; max-width: none; margin-top: 6px; }
  .tile-b { width: 44%; }
  .tile-c { width: 32%; margin-top: 40px; }
  .shop-media { grid-column: 1 / span 8; }
  .shop-text { grid-column: 1 / -1; margin-top: clamp(64px, 10vh, 110px); }
  .outlet-logo, .also { grid-column: 1 / -1; }
  .outlet-note, .kit { grid-column: 1 / -1; margin-top: 16px; }
  .sign-pic { grid-column: 1 / span 8; }
  .sign-text { grid-column: 1 / -1; margin-top: var(--s1); }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .top { height: 54px; }
  .top-nav { display: none; }
  /* phones: each figure on its own row, the number on the left and what it counts beside it */
  .ledger { grid-template-columns: 1fr; }
  .ledger div { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gap); align-items: center; padding: 16px 0; }
  .ledger dt { font-size: 14.6vw; }
  .ledger dd { margin-top: 0; }
  /* phones: the stadium on top at its own shape, the review rising out of its shaded foot */
  .arena-in { height: auto; min-height: 0; overflow: visible; background: none; }
  .arena-pic { position: relative; inset: auto; height: 68vw; }
  .arena-wall > img { object-position: 74% 88%; }
  .arena .spray { right: 4%; top: 7%; width: 58%; }
  .arena-shade { inset: 0 0 auto 0; height: 68vw; background: linear-gradient(to top, var(--bg) 2%, rgba(4, 6, 10, .82) 30%, rgba(4, 6, 10, 0) 66%), linear-gradient(to bottom, var(--bg), rgba(4, 6, 10, 0) 16%); }
  .arena-quote { position: relative; left: auto; top: auto; width: auto; transform: none; margin-top: -20vw; padding: 0 var(--gut); }
  .arena-quote blockquote { font-size: 11.6vw; }
  .arena-place { position: static; display: inline-flex; margin: 22px var(--gut) 0; }
  .quotes { grid-template-columns: 1fr; }
  .quote { padding: 20px 0 26px; }
  .film { height: 74svh; min-height: 440px; }
  .film-pic video { object-position: 62% 40%; }
  .film-shade { background: linear-gradient(to bottom, var(--bg), rgba(4, 6, 10, 0) 13%), linear-gradient(to top, var(--bg) 8%, rgba(4, 6, 10, .9) 34%, rgba(4, 6, 10, 0) 64%); }
  .film-text { bottom: 64px; }
  .film-tiles { margin-top: -34px; gap: 12px; justify-content: space-between; }
  .tile-b { width: 56%; }
  .tile-c { width: 38%; margin-top: 30px; }
  .shop-media { grid-column: 1 / -1; margin-right: 12%; }
  .shop-inset { right: -14%; }
  .outlet-logo { height: calc(var(--k) * 11vw); }
  .sign-pic { grid-column: 1 / -1; }
  .sign-text { margin-top: var(--s2); }
  .follow-links b { font-size: 12.5vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}