/* Rucker Park — the site. Apollo's voice (condensed capitals, black and bone,
   black-and-white photographs, one loud colour, hard edges), Doubleplay's
   hand (hairlines, huge type in lists, words that fill as you read, a picture
   that opens to full bleed, a ticket, a loader).
   The loud colour is the orange of the B and D trains that stop at 155th
   Street (#ff6319); it marks one thing per screen. The chain-link is the
   furniture: tools/wire.py draws it as wire, not as a pattern.
   Anton's capitals are .86 of the font size (measured): a line-height of .86
   is the capital's own box, and stacked lines need .88 or more. Sizes that
   must fill a measure are its width divided by the text's width in em
   (measured in the page with tools/eval.mjs). */

@font-face { font-family: 'Anton'; src: url('./fonts/anton.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'Archivo'; src: url('./fonts/archivo.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Archivo Wide'; src: url('./fonts/archivo-wide.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Alfa Slab One'; src: url('./fonts/alfa-slab-one.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Overpass'; src: url('./fonts/overpass-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url('./fonts/cinzel.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }

:root {
  --head: clamp(44px, 7vw, 132px);   /* every section head is this size */
  --ink: #0b0b0a;
  --ink-2: #151513;
  /* the colours of the place: the ball, the trees round the court, the brick
     of the towers; beige paper instead of white */
  --bone: #e6d8bb;
  --bone-dim: rgba(230, 216, 187, .6);
  --green: #24472f;
  --green-2: #2f5a3b;
  --brick: #7b3526;
  --brick-2: #5e271c;
  --ink-dim: rgba(11, 11, 10, .42);
  --train: #ff6319;
  --hair-d: rgba(230, 216, 187, .24);
  --hair-l: rgba(11, 11, 10, .24);
  --display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --sans: 'Archivo', system-ui, sans-serif;
  --pad: clamp(16px, 2.2vw, 32px);
  --measure: calc(100vw - 2 * var(--pad));
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--bone); font-family: var(--sans); font-size: 17px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
.call br.m { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The photographs are graded once, in tools/cast.py. The page shows them as they are. */
figure { background: var(--ink-2); overflow: hidden; }
figure img { width: 100%; height: 100%; object-fit: cover; }

body::after {
  content: ''; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.4 -.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); } 60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

/* ——— Split type: each character rises out of its own word. ——— */
.split { --lh: .92em; line-height: var(--lh); }
.split .ln { display: inline-block; overflow: hidden; vertical-align: top; white-space: nowrap; line-height: 1.16em; margin: calc((var(--lh) - 1.16em) / 2) 0; }
.split .ch { display: inline-block; transform: translateY(108%); transition: transform 1s var(--ease); }
.split.in .ch { transform: none; }

/* ——— The scoreboard opens the history strip: four columns, each one card
   of an old split-flap board, hinged across the middle of the screen. It
   shows only the history's own years, each on a leaf of its own colour from
   the place (the ball's orange, the trees' green, the towers' brick, beige,
   black for the blackout). When the year changes, the whole upper half of
   every card falls towards you and the new lower half comes down after it,
   right to left. The digits are cut by the bottom edge. ——— */
.era-count { width: 100vw; margin: 0 7vw 0 calc(-1 * var(--pad)); background: var(--ink); overflow: hidden; }
.cnt { --F: min(calc(var(--measure) / 2.3), 88vh); position: absolute; inset: 0; display: grid; grid-template-columns: 1fr repeat(4, calc(var(--F) * .575)) 1fr; font-family: var(--display); font-size: var(--F); line-height: 1; }
.cnt-edge { background: var(--edge, var(--train)) var(--edgetex, none) calc(-1 * var(--ox, 0px)) 0 / 100vw 100vh no-repeat; }
.cnt { --cw: calc(var(--F) * .575); --e: calc((100vw - 4 * var(--cw)) / 2); }
.cnt > :nth-child(1) { --ox: 0px; }
.cnt > :nth-child(2) { --ox: var(--e); }
.cnt > :nth-child(3) { --ox: calc(var(--e) + var(--cw)); }
.cnt > :nth-child(4) { --ox: calc(var(--e) + 2 * var(--cw)); }
.cnt > :nth-child(5) { --ox: calc(var(--e) + 3 * var(--cw)); }
.cnt > :nth-child(6) { --ox: calc(var(--e) + 4 * var(--cw)); }
.cnt-col { position: relative; perspective: 260vh; will-change: transform; }
.cnt-col + .cnt-col, .cnt-col:nth-child(2) { box-shadow: -3px 0 0 rgba(11, 11, 10, .9); }
.cnt-col:nth-child(5) { box-shadow: -3px 0 0 rgba(11, 11, 10, .9), 3px 0 0 rgba(11, 11, 10, .9); }
.lf { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; backface-visibility: hidden; }
.lf-t, .lf-ft { top: 0; }
.lf-b, .lf-fb { top: 50%; }
/* every leaf is a window onto one patch of court the width of the board */
.lf-in { position: absolute; left: 0; right: 0; height: 200%; background: var(--c, var(--train)) var(--tex, none) calc(-1 * var(--ox, 0px)) calc(-1 * var(--oy, 0px)) / 100vw 100vh no-repeat; color: var(--d, var(--ink)); }
.lf-t .lf-in, .lf-ft .lf-in { top: 0; }
.lf-b .lf-in, .lf-fb .lf-in { top: -100%; }
.dg { position: absolute; left: 0; right: 0; bottom: -.2635em; height: 1.2em; line-height: 1.2em; text-align: center; }
/* the hinge: a dark line across every card */
.cnt-col::after { content: ''; position: absolute; left: 0; right: 0; top: calc(50% - 2px); height: 4px; z-index: 5; background: rgba(11, 11, 10, .55); }
.lf-ft { z-index: 3; transform-origin: 50% 100%; visibility: hidden; }
.lf-fb { z-index: 3; transform-origin: 50% 0; visibility: hidden; transform: rotateX(90deg); }
.lf-ft::after, .lf-fb::after { content: ''; position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.flipping .lf-ft { visibility: visible; animation: leaf-top .42s cubic-bezier(.55, 0, .9, .6) forwards; }
.flipping .lf-ft::after { animation: leaf-dark .42s ease-in forwards; }
.flipping .lf-fb { visibility: visible; animation: leaf-bottom .46s cubic-bezier(.2, .5, .35, 1.18) .42s forwards; }
.flipping .lf-fb::after { opacity: .4; animation: leaf-light .46s ease-out .42s forwards; }
@keyframes leaf-top { to { transform: rotateX(-90deg); } }
@keyframes leaf-bottom { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
@keyframes leaf-dark { to { opacity: .45; } }
@keyframes leaf-light { to { opacity: 0; } }

/* ——— Nav: out of the way while you read down, back (solid) when you scroll up. ——— */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; padding: 0 var(--pad); color: var(--bone); transition: background .3s, transform .5s var(--ease); }
.nav.solid { background: var(--ink); }
.nav.hide { transform: translateY(-100%); }
.nav-links { display: flex; gap: 26px; font-family: var(--display); font-size: 17px; letter-spacing: .05em; text-transform: uppercase; }
.nav-links a, .nav-ig { text-decoration: none; opacity: .9; transition: opacity .2s, color .2s; }
.nav-links a:hover, .nav-ig:hover { opacity: 1; color: var(--train); }
.nav-mark { font-family: var(--display); font-size: 30px; line-height: 1; text-decoration: none; text-transform: uppercase; letter-spacing: .01em; opacity: 0; transition: opacity .4s; }
.nav.mark .nav-mark { opacity: 1; }
.nav-ig { justify-self: end; font-family: var(--display); font-size: 17px; letter-spacing: .05em; text-transform: uppercase; }
.nav-menu { display: none; }
.menu { position: fixed; inset: 0; z-index: 49; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 80px var(--pad) 40px; background: var(--ink); }
.menu[hidden] { display: none; }
.menu a { font-family: var(--display); font-size: 19vw; line-height: .95; text-transform: uppercase; text-decoration: none; }

/* ——— Hero: one large picture (tools/gen.mjs, 5504 × 3072) and a camera. It
   starts on the face of the tower, comes down its floors to the treetops,
   then pulls back over the court until the backboard stands in front of you.
   RUCKER rises last, in the ball's orange, cut by the bottom edge. ——— */
.hero { position: relative; height: 200vh; background: var(--ink); }
/* the beige page slides up over the finished poster */
.statement { margin-top: -100vh; z-index: 2; }
.hero-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--ink); }
.cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform, opacity, filter; }
.cam img { display: block; max-width: none; width: 5504px; height: 4110px; }
/* while it is black and white it prints like film: deeper blacks, a harder curve */
.cam { filter: contrast(var(--hc, 1.12)) brightness(var(--hb, .95)) blur(var(--hbl, 0px)); }
/* one film grain over both halves, heavier while it is black and white */
.hero-grain { position: absolute; inset: -50%; z-index: 4; pointer-events: none; opacity: var(--gr, .14); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.5 -.25'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); mix-blend-mode: overlay; animation: grain 1s steps(6) infinite; }
/* the opening starts in black and white; colour comes up as the court appears */
.hero-bw { display: none; }
.hero-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11,11,10,.55) 0%, rgba(11,11,10,.18) 9%, rgba(11,11,10,0) 18%); }
/* the ball, its own layer: orange while the rest is black and white, and in front of the word */
.hero-ball { display: none; position: absolute; left: 0; top: 0; z-index: 3; width: 200px; height: 200px; max-width: none; transform-origin: 0 0; pointer-events: none; will-change: transform; }
/* RUCKER: whole letters, the ink exactly from gutter to gutter (it is 2.668em wide, .038em left bearing) */
.hero-word { position: absolute; left: var(--pad); bottom: 0; height: .9em; padding-top: .05em; overflow: hidden; margin-left: -.038em; font-family: var(--display); font-weight: 400; font-size: calc(var(--measure) / 2.668); line-height: .9; letter-spacing: -.012em; color: var(--ink); white-space: nowrap; }
/* black on the picture, with a black shadow cast behind it on the court */
.hero-word .rise { filter: drop-shadow(.025em .03em .015em rgba(0, 0, 0, .42)); }
.hero-word i { font-style: normal; }
.hero-word .rise { display: inline-block; transform: translateY(var(--rise, 0%)); }
.hero-cue { display: none; position: absolute; left: 50%; bottom: 5vh; width: 18px; height: 18px; margin-left: -9px; border-right: 2px solid var(--bone); border-bottom: 2px solid var(--bone); transform: rotate(45deg); opacity: var(--cue, .85); animation: cue 2.4s ease-in-out infinite; }
@keyframes cue { 0%, 100% { translate: 0 0; } 50% { translate: 0 8px; } }

/* ——— Statement: pinned for one screen. Four lines fill it: the call, then
   the answer; STORY is called like a name. ——— */
.statement { position: relative; height: 200vh; background: var(--bone); color: var(--ink); }
/* the page is a real old backboard, close up (tools/board.py): plain board above, the painted
   rectangle below, cut off by the screen. The script measures where the photograph lands (it is laid
   with cover) into --bx/--by/--bw/--bh, and board.json says where the rectangle is (--rl/--rt: its
   outer left and top edge; --x0/--y0/--x1: its inside). The headline and the dollar sit on the board
   above the rectangle; only the paragraph is framed by it. */
.statement-pin { --bx: 0px; --by: 0px; --bw: 100vw; --bh: 100vh; --rl: .167; --rt: .5345; --x0: .2091; --y0: .6068; --x1: .7887; --hs: min(13.5vh, 8.4vw); --money: #2c5b3c;
  position: sticky; top: 0; height: 100vh; overflow: clip; background: #e2d6bc url('assets/img/bb/board.jpg') center / cover; }
/* the words fill the board: the script sizes them so the longest line runs from margin to margin */
.call { position: absolute; z-index: 2; left: var(--pad); right: var(--pad); top: 50%; transform: translateY(-50%); margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--hs); line-height: .9; text-transform: uppercase; }
.call-line { display: block; white-space: nowrap; }
.call b { font-weight: 400; display: inline-block; }
.call .w { color: rgba(11, 11, 10, .16); transition: color .35s; }
.call .w.on { color: var(--ink); }
/* the called words in the ball's leather, as the legends' names are */
.call b .w.on { color: transparent; background: #ec6020 url('assets/img/tex/leather.jpg') center / 420px; -webkit-background-clip: text; background-clip: text; }
.call b.called { animation: call .45s var(--ease); transform-origin: 0 50%; }

/* ——— The Goat's dollar, loose in the top right corner of the opening: --dx/--dy is its centre,
   --dw its width; the + on its lower left corner, "Hey, grab that" to its left, the story under it. ——— */
.hero-pin { --dw: clamp(150px, 15vw, 250px); --dx: calc(100vw - var(--pad) - var(--dw) * .55); --dy: calc(64px + var(--dw) * .3); --dturn: -4deg; --money: #a7cf94; }
.hero-dollar { position: absolute; z-index: 2; left: var(--dx); top: var(--dy); width: var(--dw); height: auto; max-width: none; pointer-events: none; opacity: 0;
  transform: translate(-50%, -80%) rotate(calc(var(--dturn) + 9deg)); filter: drop-shadow(3px 6px 8px rgba(0, 0, 0, .5)); transition: transform .9s var(--ease), opacity .5s; }
.hero-pin.dollar-in .hero-dollar { opacity: 1; transform: translate(-50%, -50%) rotate(var(--dturn)); }
.hero-pin.gone .hero-dollar { opacity: 0; transition: none; }
.hero-pin.flown .hero-dollar { transition: transform .7s var(--ease), opacity .5s .15s; transform: translate(-20%, -240%) rotate(12deg); }
/* the arm that takes it, in front of everything, as a real arm would be */
.hero-snatch { position: absolute; z-index: 5; left: 0; top: 0; pointer-events: none; }
.goat-note { position: absolute; z-index: 4; left: calc(var(--dx) - var(--dw) * .42); top: calc(var(--dy) + var(--dw) * .2); width: 0; height: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.goat-note:focus-visible { outline: 2px solid var(--bone); outline-offset: 30px; }
.goat-plus { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; background: var(--bone); box-shadow: 0 0 0 0 rgba(233, 229, 220, .45); animation: plus 2.4s var(--ease) infinite; transition: transform .45s var(--ease), opacity .3s; }
.goat-plus::before, .goat-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: var(--ink); }
.goat-plus::after { transform: rotate(90deg); }
.goat-note:hover .goat-plus { transform: rotate(90deg); }
@keyframes plus { 60%, 100% { box-shadow: 0 0 0 14px rgba(233, 229, 220, 0); } }
.grab { position: absolute; z-index: 3; right: calc(100vw - var(--dx) + var(--dw) * .42 + 34px); top: calc(var(--dy) + var(--dw) * .2); margin: 0; transform: translateY(-58%); font-family: var(--display); font-size: clamp(18px, 1.5vw, 26px); line-height: 1; letter-spacing: .03em; text-transform: uppercase; color: var(--bone); text-shadow: 0 1px 12px rgba(0, 0, 0, .7); white-space: nowrap; pointer-events: none; transition: opacity .25s; }
.grab span { display: inline-block; animation: nudge 1.6s var(--ease) infinite; }
@keyframes nudge { 50% { transform: translateX(5px); } }
.goat-note, .grab { opacity: 0; pointer-events: none; transition: opacity .5s .5s; }
.hero-pin.dollar-in .goat-note, .hero-pin.dollar-in .grab { opacity: 1; pointer-events: auto; }
.hero-pin.dollar-in .grab { pointer-events: none; }
.hero-pin.taken .goat-note, .hero-pin.taken .grab { opacity: 0; pointer-events: none; transition: opacity .2s; }
/* then the story, large, in the dollar's green, where the dollar was */
.goat-legend { position: absolute; z-index: 3; right: var(--pad); top: max(20vh, calc(var(--dy) + var(--dw) * .15)); width: min(620px, 44vw); text-align: right; color: var(--money); text-shadow: 0 2px 22px rgba(0, 0, 0, .8), 0 0 2px rgba(0, 0, 0, .5); pointer-events: none; }
.goat-legend p { margin: 0; opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .9s var(--ease); }
.hero-pin.told .goat-legend p { opacity: 1; transform: none; }
/* a soft dark pool behind the story, so it reads on the busy picture */
.goat-legend::before { content: ''; position: absolute; z-index: -1; inset: -18% -12% -22% -30%; background: radial-gradient(closest-side, rgba(11, 11, 10, .72), rgba(11, 11, 10, 0)); opacity: 0; transition: opacity .8s; }
.hero-pin.told .goat-legend::before { opacity: 1; }
.hero-pin.told .goat-legend .gl-line { transition-delay: .3s; }
.gl-head { font-family: var(--display); font-size: clamp(34px, 3.7vw, 64px); line-height: .95; text-transform: uppercase; text-wrap: balance; }
.gl-line { margin-top: .45em !important; font-family: var(--display); font-size: clamp(24px, 2.2vw, 38px); line-height: 1; text-transform: uppercase; text-wrap: balance; }
@media (max-aspect-ratio: 1/1) {
  .statement-pin { --rl: .0846; --rt: .513; --x0: .1367; --y0: .5408; --x1: .8646; background-image: url('assets/img/bb/board-tall.jpg'); }
}

/* ——— History: a pinned strip that runs sideways. Every year owns one
   full-height picture, right against its words; 1970 owns an empty frame. ——— */
.history { position: relative; background: var(--bone); color: var(--ink); }
.history-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.history-track { position: absolute; top: 0; bottom: 0; left: 0; display: flex; padding-left: var(--pad); background: var(--bone) url('assets/img/bb/history.jpg') 0 0 / 1400px; will-change: transform; }
.era { position: relative; flex: none; display: flex; gap: 3vw; height: 100vh; margin-right: 13vw; }
.era-text { flex: none; width: calc(27vh * 2.05); padding-top: 11vh; }
.era-year { font-family: var(--display); font-size: 27vh; line-height: .86; letter-spacing: -.01em; white-space: nowrap; margin-bottom: 4vh; }
.era-text h3 { max-width: 11em; font-family: var(--display); font-weight: 400; font-size: clamp(36px, 3.6vw, 64px); line-height: .92; text-transform: uppercase; text-wrap: balance; }
.era-text p { max-width: 34ch; margin-top: 2.6vh; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.42; text-wrap: pretty; }
.era-dark p { color: var(--bone-dim); max-width: 40ch; }
.era-last p { color: rgba(233, 229, 220, .86); }
.era-photo { flex: none; width: 31vw; height: 100vh; }
/* the history's title, Rucker's rule, on the board before the first year */
.era-title { align-items: center; }
.era-call { margin: 0; font-family: var(--display); font-weight: 400; font-size: min(24vh, 13vw); line-height: .92; text-transform: uppercase; white-space: nowrap; }
.era-call span { display: block; }
.era-call b { font-weight: 400; color: transparent; background: #ec6020 url('assets/img/tex/leather.jpg') center / 420px; -webkit-background-clip: text; background-clip: text; }
.era-photo img { transform: scale(1.1); }
.era-nopic .era-text { width: calc(27vh * 3.2); }
.era-nopic .era-year { font-size: 44vh; }
.era-nopic h3 { font-size: clamp(52px, 5.6vw, 104px); max-width: 9em; }
.era-void { background: none; border: 2px solid var(--ink); }
.era-void::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 1px), var(--ink) 50%, transparent calc(50% + 1px)); opacity: .5; }
.era-photo[data-size="s"] { position: relative; align-self: flex-end; width: 23vw; height: auto; aspect-ratio: 4 / 5; margin-bottom: 11vh; }
.era-photo[data-size="m"] { width: 31vw; height: 100vh; }
.era-photo[data-size="l"] { width: 48vw; height: 100vh; }
/* a second, small picture laid on the first */
.era-inset { position: absolute; z-index: 3; left: calc(27vh * 2.05 - 5vw); bottom: 9vh; width: 16vw; aspect-ratio: 3 / 4; object-fit: cover; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .6); transform: rotate(-3deg); }
.era-full { width: 100vw; margin-left: 0; color: var(--bone); }
.era-full .era-photo { position: absolute; inset: 0; width: auto; height: auto; }
.era-full .era-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,11,10,.9) 0%, rgba(11,11,10,.75) 30%, rgba(11,11,10,.2) 55%, rgba(11,11,10,0) 72%); }
.era-full .era-text { position: relative; z-index: 2; padding-left: var(--pad); }
.era-full p { color: rgba(233, 229, 220, .86); }
.era-black { background: #070706; }
.era-out .era-text { width: 44vw; }
.era-out h3 { max-width: none; font-size: clamp(44px, 4.6vw, 86px); text-wrap: wrap; }
.era-dark { width: auto; margin-left: -4vw; padding-left: 10vw; background: var(--ink); color: var(--bone); }
.era-dark .era-photo img { filter: brightness(.8); }
.era-dark .era-year { color: #1e1e1c; }
.era-dark .era-text { width: 52vw; padding-right: 6vw; }
.era-dark h3 { max-width: none; font-size: clamp(48px, 5.4vw, 100px); color: var(--bone); text-wrap: wrap; }
.era-last { width: 100vw; margin: 0 0 0 -13vw; padding: 0; color: var(--bone); }
/* the history's last word: one line over the whole screen, on black */
.era-end { flex-direction: column; justify-content: center; gap: 0; width: 100vw; margin: 0; padding: 0 var(--pad); background: var(--ink); color: var(--bone); }
.era-end .era-year { font-size: 16vh; margin-bottom: 3vh; color: var(--train); }
.era-end .end-line { margin: 0; font-family: var(--display); font-weight: 400; font-size: min(24vh, 12.4vw); line-height: .9; text-transform: uppercase; }
.era-end .end-line b { font-weight: 400; color: transparent; background: #ec6020 url('assets/img/tex/leather.jpg') center / 420px; -webkit-background-clip: text; background-clip: text; }
.era-end p { max-width: 46ch; margin-top: 4vh; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.42; color: var(--bone-dim); }
.era-last .era-photo { position: absolute; inset: 0; width: auto; height: auto; }
.era-last .era-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,11,10,.9) 0%, rgba(11,11,10,.75) 30%, rgba(11,11,10,.2) 55%, rgba(11,11,10,0) 72%); }
.era-last .era-text { position: relative; z-index: 2; padding-left: var(--pad); }
.history-bar { position: absolute; z-index: 1; left: var(--pad); right: var(--pad); bottom: 1.6vh; height: 2px; background: var(--hair-l); transition: opacity .4s; }
.history-bar i { display: block; height: 100%; background: var(--train); transform-origin: left; transform: scaleX(0); }
.history-pin.dark .history-bar, .history-pin.counting .history-bar { opacity: 0; }

/* ——— Names: the MC's roll call. The rules stand still; the names drift in,
   hold dead centre in the middle band, and there the name is called. The
   NBA faces come first; the park's own legends are only their names. ——— */
/* the legends on black; the called name is the ball: its orange leather */
.names { position: relative; padding: clamp(110px, 16vh, 190px) 0 34vh; background: var(--ink); color: var(--bone); overflow: hidden; }
.names-head, .names-list { position: relative; }
.names-list li.last { font-size: clamp(80px, 17vw, 320px); }
.names-head { padding: 0 var(--pad); margin-bottom: clamp(50px, 8vh, 90px); font-family: var(--display); font-weight: 400; font-size: calc(var(--measure) / 8.2); text-transform: uppercase; white-space: nowrap; }
.names-list li { position: relative; display: flex; justify-content: center; border-top: 1px solid var(--hair-d); padding: .26em 0 .06em; font-size: clamp(64px, 13.4vw, 250px); }
.names-list li:last-child { border-bottom: 1px solid var(--hair-d); }
.nm { position: relative; z-index: 1; display: inline-block; white-space: nowrap; will-change: transform; }
.nick { display: block; font-family: var(--display); line-height: .86; text-transform: uppercase; transition: color .25s; }
.real { position: absolute; left: .02em; bottom: calc(100% + 16px); font-family: var(--display); font-size: clamp(16px, .13em, 30px); line-height: 1; text-transform: uppercase; letter-spacing: .02em; color: var(--train); white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .45s var(--ease); }
.names-list li.hot .nick { color: transparent; background: #ec6020 url('assets/img/tex/leather.jpg') center / 420px; -webkit-background-clip: text; background-clip: text; animation: call .42s var(--ease); }
.names-list li .nm { transition: opacity .4s; }
.names-list.calling li:not(.hot) .nm { opacity: .12; }
.names-head { position: relative; z-index: 2; }
.names-list li.hot .real { opacity: 1; transform: none; }
@keyframes call { 0% { transform: scaleX(1.14); } 100% { transform: none; } }
.face { position: absolute; left: 50%; top: 50%; z-index: 0; height: 104vh; width: auto; max-width: none; -webkit-mask: radial-gradient(closest-side, #000 38%, transparent 98%); mask: radial-gradient(closest-side, #000 38%, transparent 98%); opacity: 0; transform: translate(-50%, -50%) scale(.92); transition: opacity .6s, transform 1.4s var(--ease); pointer-events: none; }
.names-list li.hot .face { opacity: .82; transform: translate(-50%, -50%) scale(1); }

/* ——— Fence: a small black-and-white picture on the white page, behind the
   chain-link; it grows to the whole screen, the wire passes the camera, the
   words arrive last. ——— */
.fence { position: relative; height: 280vh; background: var(--bone); }
.fence-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--bone) url('assets/img/bb/fence.jpg') center / cover; }
.fence-photo { position: absolute; inset: 0; clip-path: inset(var(--ct, 27%) var(--cs, 31%) var(--ct, 27%) var(--cs, 31%)); }
.fence-photo img { transform: scale(var(--fs, 1.3)); }
/* a basketball net, photographed on green and keyed out (tools/key.py), about the fence's old mesh size */
.fence-wire { position: absolute; left: 50%; top: 50%; width: 220vmax; height: 220vmax; background: url('assets/img/net-tile.webp') center / 714px auto repeat; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .28)); opacity: var(--wo, 1); transition: opacity .12s; transform: translate(-50%, -50%) scale(var(--ws, 1)); pointer-events: none; }
.fence-words { position: absolute; left: var(--pad); top: 6vh; font-family: var(--display); font-weight: 400; font-size: min(12vw, 21vh); line-height: .9; text-transform: uppercase; color: var(--bone); opacity: var(--fo, 0); transform: translateY(var(--fy, 40px)); }

/* ——— Season: the card on the left, written out; the fight bill for the
   chosen game on the right. The bills are collage and screen print: old
   newsprint, a torn orange shape, the players cut out with a paper border,
   a slogan curving over them, the names in slab capitals like a 1970s fight
   poster, on stock with fibre and folds. ——— */
/* ——— This summer: a list of the games on painted green court. A game's
   poster appears only while the pointer is on it, where the pointer is. ——— */
.season { position: relative; padding: clamp(110px, 16vh, 180px) 0 clamp(90px, 14vh, 160px); background: var(--green) url('assets/img/patch/season.jpg') center / cover; overflow: clip; }
.season-head { --lh: .86em; padding: 0 var(--pad); margin-bottom: clamp(40px, 6vh, 70px); font-family: var(--display); font-weight: 400; font-size: calc(var(--measure) / 5.4); text-transform: uppercase; white-space: nowrap; color: var(--bone); }
.games { border-top: 1px solid var(--hair-d); }
/* the longest game (Kingdom Records vs Lenox Car Service) is 15.3em: it fills the line */
.game { display: grid; grid-template-columns: 130px 1fr; gap: 40px; align-items: baseline; padding: .3em var(--pad) .2em; border-bottom: 1px solid var(--hair-d); font-family: var(--display); font-size: calc((var(--measure) - 170px) / 15.4); line-height: .9; text-transform: uppercase; cursor: default; transition: color .25s, background-color .25s; }
.g-when { font-size: 20px; letter-spacing: .06em; color: var(--bone-dim); }
.g-teams { color: var(--bone); white-space: nowrap; }
.vs { font-size: .42em; letter-spacing: .06em; color: var(--bone-dim); margin: 0 .3em; vertical-align: .22em; }
.game:hover .g-teams, .game.on .g-teams { color: var(--train); }
.game:hover .g-when, .game.on .g-when { color: var(--bone); }
.game-final .g-teams { font-size: 1.6em; }
.bills { position: fixed; left: 0; top: 0; z-index: 60; width: 0; height: 0; pointer-events: none; transform: translate3d(var(--mx, -999px), var(--my, -999px), 0); }
.bills .bill { position: absolute; left: 0; top: 0; width: min(24vw, calc(52vh * var(--arw, 2) / var(--arh, 3))); aspect-ratio: var(--ar); margin: 0; opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--tilt, 0deg) + 6deg)) scale(.7); transition: opacity .2s, transform .45s var(--ease); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)) drop-shadow(0 18px 24px rgba(0, 0, 0, .3)); }
.bills.show .bill.on { opacity: 1; transform: translate(-50%, -50%) rotate(var(--tilt, 0deg)); }
.bills .bill img { width: 100%; height: 100%; object-fit: cover; }

/* ——— The collage: a cut-out on an orange torn-paper shape, over old
   newsprint, the word curving round it. ——— */
.era-collage { position: relative; background: #161513; overflow: hidden; }
.cl-ground { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: none !important; }
.cl-blob { position: absolute; left: 8%; right: 8%; top: 18%; bottom: 6%; width: 84%; height: 76%; fill: var(--train); filter: url(#torn); }
.cl-man { position: absolute; left: 50%; bottom: 0; width: 88%; height: auto; max-height: 80%; object-fit: contain; object-position: 50% 100%; transform: translateX(-50%) !important; }
.cl-arc { position: absolute; left: 4%; right: 4%; top: 3%; width: 92%; height: auto; overflow: visible; }
.cl-arc text { font-family: 'Alfa Slab One', Georgia, serif; font-size: 96px; fill: #ece2cc; text-transform: uppercase; letter-spacing: .02em; }

/* ——— Visit: the Harlem photograph large on the left; the station sign with
   the B and D, and the line, on the right. ——— */
.visit { background: var(--brick) url('assets/img/patch/visit.jpg') center / cover; }
.visit-body { display: grid; grid-template-columns: 44fr 56fr; min-height: 100vh; }
.visit-photo { position: relative; height: 100%; min-height: 100vh; }
.visit-photo img { object-position: 35% 40%; }
.visit-go { display: flex; flex-direction: column; justify-content: space-between; gap: 8vh; padding: 0 var(--pad) clamp(40px, 7vh, 80px) 3.4vw; }
.sign { display: flex; align-items: center; gap: .3em; margin: 0 calc(-1 * var(--pad)) 0 calc(-3.4vw); padding: .18em var(--pad) .16em 3.4vw; background: #111; border-top: 4px solid var(--bone); box-shadow: 0 2px 0 rgba(0, 0, 0, .35); font-family: var(--sans); font-weight: 600; font-size: calc((56vw - 3.4vw - var(--pad)) / 7); line-height: 1; letter-spacing: -.02em; color: var(--bone); white-space: nowrap; }
.sign-name { padding-bottom: .04em; }
.bullets { display: flex; gap: .12em; }
.bullet { display: grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--train); color: #fff; font-size: .56em; letter-spacing: 0; }
.visit-head { --lh: .9em; font-family: var(--display); font-weight: 400; font-size: calc((56vw - 3.4vw - var(--pad)) / 5.5); text-transform: uppercase; }
.address { background: var(--brick-2); border-top: 1px solid var(--hair-d); border-bottom: 1px solid var(--hair-d); overflow: hidden; padding: .1em 0 .04em; font-size: clamp(70px, 10.5vw, 200px); }
.address-run { display: flex; gap: .45em; white-space: nowrap; font-family: var(--display); line-height: .86; text-transform: uppercase; will-change: transform; }
.address-run span::after { content: '·'; color: var(--train); margin-left: .45em; }

/* ——— Ticket: a roll ticket on the table. FREE, admit everyone. ——— */
.ticket { background: var(--bone) url('assets/img/bb/ticket.jpg') center / cover !important; position: relative; display: grid; place-items: center; min-height: 100vh; padding: 4vh 0 10vh; background: var(--bone); color: var(--ink); overflow: hidden; }
/* the corner's street sign on its post, the ticket tucked behind its lower edge */
.post { position: absolute; left: 50%; top: 0; height: 36%; width: min(64vw, 960px); transform: translateX(-50%); pointer-events: none; }
.street-photo { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; transform: rotate(-2deg); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .28)); }
.tk-photo { --cw: min(760px, 50vw); aspect-ratio: auto; filter: none; margin-top: 26vh !important; }
.tk-photo img { display: block; width: 100%; height: auto; -webkit-filter: saturate(1.3) hue-rotate(-6deg) brightness(.94); filter: saturate(1.3) hue-rotate(-6deg) brightness(.94) drop-shadow(0 3px 3px rgba(11, 11, 10, .3)) drop-shadow(var(--sx, 0px) 26px 30px rgba(11, 11, 10, .18)); filter: drop-shadow(0 3px 3px rgba(11, 11, 10, .3)) drop-shadow(var(--sx, 0px) 26px 30px rgba(11, 11, 10, .18)); }
.pole { position: absolute; left: 50%; top: -2px; bottom: 22%; width: 14px; margin-left: -7px; background: linear-gradient(90deg, #3c3a36, #8b877e 45%, #4a4843); }
.street { position: absolute; left: 50%; bottom: 0; display: flex; align-items: baseline; gap: .2em; padding: .1em .42em .06em; transform: translateX(-50%) rotate(-2deg); background: #14613f url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><path d='M0 6L6 0' stroke='%23ffffff' stroke-opacity='.05'/></svg>"); color: #f1ecdf; border-radius: .07em; box-shadow: inset 0 0 0 .03em #14613f, inset 0 0 0 .052em #ece6d8, 0 .05em .06em rgba(0, 0, 0, .3); font-family: 'Overpass', var(--sans); font-weight: 600; font-size: min(12vw, 21vh); line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.street .st-dir, .street .st-type { font-size: .56em; }
.tk { position: relative; z-index: 2; margin-top: 32vh; --cw: min(800px, 54vw); }
.tk { --cw: min(1180px, 84vw); display: block; width: var(--cw); aspect-ratio: 2.5 / 1; text-decoration: none; color: var(--ink); transform: rotate(-7deg) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease), filter .5s var(--ease); filter: drop-shadow(0 3px 3px rgba(11, 11, 10, .32)) drop-shadow(var(--sx, 0px) 26px 34px rgba(11, 11, 10, .16)); }
.tk-card {
  --notch: 22px;
  position: relative; display: grid; grid-template-columns: 1fr 26%; width: 100%; height: 100%; background: var(--train);
  -webkit-mask: radial-gradient(circle var(--notch) at 74% 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 74% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--notch) at 74% 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 74% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
}
/* card fibre and the ink sitting in it */
.tk-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='1.4 .5' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .3  0 0 0 0 .2  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>"); }
.tk-main { position: relative; overflow: hidden; }
.tk-free { position: absolute; left: calc(var(--cw) * .04); top: 50%; transform: translateY(-50%); font-family: var(--display); font-size: calc(var(--cw) * .372); line-height: .86; text-transform: uppercase; }
.tk-stub { position: relative; display: grid; place-items: center; }
.tk-stub::before { content: ''; position: absolute; left: -4px; top: 30px; bottom: 30px; width: 8px; background: radial-gradient(circle, var(--bone) 3.2px, transparent 3.8px) 50% 0 / 8px 17px repeat-y; }
.tk-admit { font-family: var(--display); font-size: calc(var(--cw) * .052); line-height: .9; text-transform: uppercase; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); }

/* ——— Foot: the last screen. @ebcruckerpark, and HARLEM rising in front of
   the fence, lit from one floodlight. ——— */
.foot { background: var(--ink) url('assets/img/patch/foot.jpg') center / cover !important; position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 0; padding: 96px var(--pad) 0; background: var(--ink); overflow: hidden; }
.foot-credits { position: absolute; right: var(--pad); top: 40px; z-index: 4; font: 600 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--bone-dim); text-decoration: none; }
.foot-credits:hover { color: var(--bone); }
.foot-line { margin: 0; position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: .22em 0 .16em; border-top: 1px solid var(--hair-d); border-bottom: 1px solid var(--hair-d); font-family: var(--display); font-size: clamp(34px, 4.2vw, 76px); line-height: .86; text-transform: uppercase; text-decoration: none; transition: color .25s; }
.foot-line span { font-family: var(--sans); font-weight: 500; font-size: .8em; color: var(--train); transition: transform .35s var(--ease); }
.foot-line:hover span { transform: translateX(8px); }
.foot-word { position: relative; margin: 0 calc(-1 * var(--pad)); height: calc((100vw - 2 * var(--pad)) / 3.016 * .75 + 120px); padding-top: 120px; overflow: hidden; }
.foot-word span { position: absolute; left: var(--pad); margin-left: -.038em; top: 120px; z-index: 2; font-family: var(--display); font-size: calc((100vw - 2 * var(--pad)) / 2.88); line-height: .8; letter-spacing: -.012em; white-space: nowrap; color: var(--bone); transform: translateY(var(--rise, 50%)); }
.foot-word span i { font-style: normal; }
/* a real chain-link fence, keyed out: its top rail hangs under the handle row, HARLEM stands in front of it */
.foot-wire { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 140%; z-index: 1; background: url('assets/img/fence.webp') center top / 100% auto no-repeat; opacity: .92; transform: translateY(var(--wy, 0px)); }

/* ——— The cursor: a basketball seen from above that rolls where the mouse
   goes, a ring of words turning round it. Only with a mouse. ——— */
html.ball-cursor, html.ball-cursor * { cursor: none !important; }
.ball { --size: 46px; position: fixed; left: 0; top: 0; z-index: 400; width: var(--size); height: var(--size); margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2); pointer-events: none; will-change: transform; transition: opacity .2s; }
.ball-shadow { position: absolute; inset: 0; border-radius: 50%; background: rgba(0, 0, 0, .42); filter: blur(4px); transform: translate(5px, 7px) scale(.96); }
.ball-surf { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the words: big enough to read at a glance, a halo in the ground's own colour for busy pictures */
.ball-ring { position: absolute; left: 50%; top: 50%; width: 128px; height: 128px; margin: -64px 0 0 -64px; overflow: visible; animation: ring 12s linear infinite; }
.ball-ring text { font-family: var(--sans); font-weight: 600; font-size: 10.4px; letter-spacing: .12em; fill: var(--bone); stroke: rgba(11, 11, 10, .35); stroke-width: .9px; paint-order: stroke; transition: fill .3s, stroke .3s; }
.ball[data-tone='light'] .ball-ring text { fill: var(--ink); stroke: rgba(233, 222, 199, .45); }
@keyframes ring { to { transform: rotate(360deg); } }

/* ——— Phones ——— */
@media (max-width: 760px) {
  .era-call { font-size: 17vw; }
  .era-title { justify-content: center; }
  .goat-legend { left: var(--pad); right: var(--pad); width: auto; }
  .gl-head { font-size: 9vw; }
  .grab { font-size: 16px; }
  .gl-line { font-size: 6vw; }
  .call br.m { display: inline; }
  body { font-size: 16px; }
  .nav { grid-template-columns: auto 1fr auto; }
  .nav-links, .nav-ig { display: none; }
  .nav-mark { font-size: 26px; }
  .nav-menu { display: block; grid-column: 3; border: 0; background: none; color: var(--bone); font: 600 15px var(--sans); padding: 10px 0; cursor: pointer; }
  /* the scoreboard two by two: 19 over 50 */
  .cnt { --F: calc(var(--measure) / 1.15); grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
  .cnt-edge { display: none; }
  .cnt-col:nth-child(4), .cnt-col:nth-child(5) { border-top: 3px solid rgba(11, 11, 10, .9); }
  .cnt-col:nth-child(4) { box-shadow: none; }
  .seams { grid-template-columns: 1fr 1fr; }
  .seams i:nth-child(n + 3) { display: none; }
  .seam-h { display: block; position: absolute; left: 0; right: 0; bottom: calc(var(--measure) / 1.15 * .9365); height: 3px; background: rgba(11, 11, 10, .9); }
  .hero-word { font-size: calc(var(--measure) / 2.668); }
  .cnt-col:nth-child(3), .cnt-col:nth-child(5) { --ox: 50vw; }
  .cnt-col:nth-child(2), .cnt-col:nth-child(4) { --ox: 0px; }
  .cnt-col:nth-child(4), .cnt-col:nth-child(5) { --oy: 50vh; }
  .foot-word span i { display: block; }
  .history-track { padding-left: 0; }
  .era { display: flex; flex-direction: column; width: 100vw; margin: 0; padding: 0 var(--pad); }
  .era-text { flex: none; width: auto; padding-top: 11vh; }
  .era-year { font-size: 27vw; margin-bottom: 12px; }
  .era-text h3 { font-size: 8vw; }
  .era-text p { font-size: 15px; margin-top: 12px; }
  .era-photo, .era-void { flex: 1; min-height: 24vh; width: auto; height: auto; margin: 3vh calc(-1 * var(--pad)) 0; }
  .era-photo[data-size] { width: auto; height: auto; align-self: stretch; margin-bottom: 0; aspect-ratio: auto; }
  .era-dark { width: 100vw; margin: 0; padding: 0 var(--pad); }
  .era-dark h3 { font-size: 12vw; }
  .era-last { margin: 0; padding: 0; }
  .era-end { padding: 0 var(--pad); }
  .era-end .end-line { font-size: 12.6vw; }
  .era-end .era-year { font-size: 18vw; }
  .era-last .era-text, .era-full .era-text { padding: 13vh var(--pad) 0; }
  .era-full { padding: 0; }
  .era-full .era-photo::after, .era-last .era-photo::after { background: linear-gradient(180deg, rgba(11,11,10,.88) 0%, rgba(11,11,10,.7) 48%, rgba(11,11,10,.15) 72%, rgba(11,11,10,0) 100%); }
  .era-slice, .era-wide, .era-big { width: auto; }
  .names { padding-bottom: 22vh; }
  .names-head { font-size: calc(var(--measure) / 8.2); }
  .names-list li { font-size: 21.5vw; padding: .36em var(--pad) .1em; min-height: 22vh; align-items: center; }
  .nm { white-space: normal; text-align: center; text-wrap: balance; }
  .nick { line-height: .92; }
  .era-dark .era-text, .era-out .era-text { width: auto; }
  .era-out h3 { font-size: 11vw; }
  .real { left: 50%; transform: translate(-50%, 6px); font-size: 17px; }
  .names-list li.hot .real { transform: translate(-50%, 0); }
  .face { height: 78vh; }
  .fence-words { font-size: 23vw; top: 7vh; }
  .fence-pin::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 48%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(11,11,10,.75), rgba(11,11,10,0)); opacity: var(--fo, 0); }
  .fence-words { z-index: 2; }
  .season-head { font-size: calc(var(--measure) / 5.4); }
  .game { grid-template-columns: 1fr; gap: 6px; font-size: 9.6vw; }
  .g-when { font-size: 15px; }
  .g-teams { white-space: normal; }
  .bills .bill { width: min(62vw, calc(56vh * var(--arw, 2) / var(--arh, 3))); }
  .post { width: 94vw; height: 22%; }
  .ticket .tk { margin-top: 22vh; }
  .tk-photo { --cw: 90vw; transform: rotate(-4deg); margin-top: 14vh !important; }
  .g-teams { white-space: normal; }
  .tk { margin-top: 22vh; }
  .visit-body { grid-template-columns: 1fr; min-height: 0; }
  .visit-photo { min-height: 0; height: 56vh; }
  .visit-go { gap: 5vh; padding: 0 var(--pad) 56px; }
  .visit-photo { height: 50vh !important; }
  .sign { font-size: calc(var(--measure) / 5.3); }
  .visit-head { font-size: calc(var(--measure) / 5.42); }
  .visit-go { gap: 7vh; padding-top: 100px; }
  .sign { font-size: calc(var(--measure) / 5.3); }
  .visit-head { font-size: calc(var(--measure) / 5.42); }
  .visit-photo { min-height: 0; height: 62vh; }
  .address { font-size: 17vw; }
  .tk { --cw: calc(100vw - 64px); aspect-ratio: 1 / 1.8; transform: rotate(-4deg) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
  .tk-card { grid-template-columns: 1fr; grid-template-rows: 1fr 22%;
    -webkit-mask: radial-gradient(circle var(--notch) at 0 78%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 78%, transparent 98%, #000) right / 51% 100% no-repeat;
            mask: radial-gradient(circle var(--notch) at 0 78%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 78%, transparent 98%, #000) right / 51% 100% no-repeat; }
  .tk-free { left: 50%; top: 50%; font-size: calc(var(--cw) * .74); transform: translate(-50%, -50%) rotate(-90deg); }
  .tk-stub::before { left: 30px; right: 30px; top: -4px; bottom: auto; width: auto; height: 8px; background: radial-gradient(circle, var(--bone) 3.2px, transparent 3.8px) 0 50% / 17px 8px repeat-x; }
  .tk-admit { writing-mode: horizontal-tb; transform: none; font-size: calc(var(--cw) * .11); }
  .foot { gap: 48px; padding-top: 72px; }
  .foot-word { height: calc((100vw - 2 * var(--pad)) / 1.5 * 1.62 + 60px); padding-top: 60px; }
  .foot-word span { top: 60px; left: var(--pad); margin-left: 0; transform: translateY(var(--rise, 50%)); white-space: normal; font-size: calc((100vw - 2 * var(--pad)) / 1.5); line-height: .88; }
  .ticket { min-height: 0; padding: 4vh 0 8vh; }
  .foot-line { font-size: 6.2vw; }
}

@media (prefers-reduced-motion: reduce) {
  .split .ch, .hero-word .rise { transform: none !important; transition: none !important; }
  .call .w { color: var(--ink) !important; }
  body::after { animation: none; }
}

/* EU AI Act, Art. 50: a realistic picture that was generated says so, on the picture itself; quiet, but always there */
.era-photo { position: relative; }
.ai-tag { position: absolute; z-index: 3; left: 12px; bottom: 12px; padding: 4px 7px 3px; background: rgba(11, 11, 10, .62); color: rgba(233, 229, 220, .9); font: 600 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.era-last .ai-tag { left: auto; right: 12px; }
.ai-hero { left: var(--pad); bottom: auto; top: 70px; z-index: 5; }
@media (max-width: 760px) { .ai-hero { top: auto; bottom: 12px; right: 12px; } }

/* ——— Ticket, v15.6: the calm board of the first page; the sign hangs on its pole at the top, the
   ticket is taped to the board clearly below it (it used to cover the sign), and it is big on phones. ——— */
.ticket { background: #e2d6bc url('assets/img/bb/board.jpg') center / cover !important; min-height: 100vh; padding: 0 0 8vh; }
.post { top: 0; height: 34vh; width: min(46vw, 660px); }
.street-photo { transform: rotate(-1.5deg); }
.tk.tk-photo { --cw: min(860px, 62vw); margin-top: 38vh !important; transform: rotate(-3deg) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
/* two strips of masking tape hold it to the board */
.tk-photo::before, .tk-photo::after { content: ''; position: absolute; z-index: 2; top: -4%; width: 13%; height: 12%; background: linear-gradient(180deg, rgba(240, 232, 212, .5), rgba(226, 216, 190, .42)); box-shadow: 0 1px 1px rgba(11, 11, 10, .1); -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); pointer-events: none; }
.tk-photo::before { left: 6%; transform: rotate(-9deg); }
.tk-photo::after { right: 18%; transform: rotate(7deg); }
@media (max-width: 760px) {
  .ticket { min-height: 92vh; padding-bottom: 6vh; }
  .post { width: 84vw; height: 24vh; }
  .tk.tk-photo { --cw: 92vw; aspect-ratio: auto; margin-top: 30vh !important; transform: rotate(-3deg); }
  .ticket { min-height: 0; padding-bottom: 12vh; }
}