/* Deadball Studio: Matchday print (docs/BRAND.md). Flat inks on night paper, square corners,
   notched tickets, stamps, perforations and halftone in one spot ink. No gradients or glows. */

@font-face { font-family: "Big Shoulders"; src: url("/assets/fonts/big-shoulders.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Big Shoulders Stencil"; src: url("/assets/fonts/big-shoulders-stencil.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: Newsreader; src: url("/assets/fonts/newsreader.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: Newsreader; src: url("/assets/fonts/newsreader-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  color-scheme: dark;
  --night: #14120f;
  --page: #1e1b17;
  --raised: #2a2620;
  --ink: #efe7d6;
  --ink-2: #b9ae9a;
  --ink-3: #9c927e;
  --hairline: rgb(239 231 214 / .2);
  --rule: #5a5348;
  --highlighter: #ddeb4c;
  --biro: #7b97ff;
  --kraft: #d8c39a;
  --gold: #e0b04f;
  --football: #52b472;
  --basketball: #ef8238;
  --racing: #ee4b3b;
  --spot: var(--football);
  --display: "Big Shoulders", "Arial Narrow", Impact, sans-serif;
  --stencil: "Big Shoulders Stencil", "Big Shoulders", Impact, sans-serif;
  --reading: Newsreader, Georgia, serif;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --stamp: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body { margin: 0; background: var(--night); color: var(--ink); font: 400 clamp(17px, 1.1vw + 12px, 19px)/1.55 var(--reading); text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--spot); }
/* Focus is cream ink (night ink on cream paper). Highlighter is kept for correct answers only. */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.letter :focus-visible, .match-ticket :focus-visible { outline-color: var(--night); }
.phones:focus-visible { outline-offset: 6px; }
::selection { color: var(--night); background: var(--spot); }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .9; letter-spacing: .005em; text-wrap: balance; }
p { margin: 0 0 1em; }
[hidden] { display: none !important; }
/* Halftone bleeds past the gutters; clip it here so phones never scroll sideways. */
main, .board, .site-footer { overflow-x: clip; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; z-index: 30; left: 16px; top: -100px; padding: 10px 14px; background: var(--ink); color: var(--night); font: 800 16px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; }
.skip-link:focus { top: 12px; }

/* Caps labels */
.label, .kicker { font: 800 15px/1.1 var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--spot); }
.dateline { font: italic 400 16px/1.3 var(--reading); color: var(--ink-2); }
.figure { font-family: var(--stencil); font-weight: 900; font-variant-numeric: tabular-nums; }

/* Header and edition bar */
.site-header { background: var(--night); border-bottom: 2px solid var(--ink); }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand img { width: 44px; height: 44px; }
.brand-type { display: grid; font: 900 25px/.82 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.brand-type small { margin-top: 6px; color: var(--football); font-size: 13px; letter-spacing: .2em; }
.nav { display: flex; gap: clamp(14px, 3vw, 36px); }
.nav a { padding: 10px 0 6px; border-bottom: 2px solid transparent; font: 800 17px/1 var(--display); text-transform: uppercase; letter-spacing: .07em; text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--spot); }
.edition { border-bottom: 1px solid var(--hairline); }
.edition .wrap { display: flex; justify-content: space-between; gap: 16px; padding-block: 8px; }
.edition span { font: 800 13px/1.2 var(--display); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-2); }
.edition strong { color: var(--football); font-weight: 800; }

/* Tickets: real notches cut from both sides with a mask, so the ground shows through. */
.ticket-cut, .button {
  --notch: 9px;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 50%, #0000 calc(100% - .5px), #000 100%) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 50%, #0000 calc(100% - .5px), #000 100%) right / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--notch) at 0 50%, #0000 calc(100% - .5px), #000 100%) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 50%, #0000 calc(100% - .5px), #000 100%) right / 51% 100% no-repeat;
}
.button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 14px 30px 12px; border: 0; background: var(--spot); color: var(--night); font: 900 21px/1 var(--display); text-transform: uppercase; letter-spacing: .05em; text-decoration: none; cursor: pointer; transition: transform .12s ease-out, filter .12s ease-out; }
.button:hover { color: var(--night); filter: brightness(1.08); }
.button:active { transform: translateY(1.5px); filter: brightness(.85); }
.button[disabled] { cursor: progress; filter: saturate(.4) brightness(.8); }
/* The ticket mask would clip an outside outline, so focus prints inside the ticket: a night and
   cream double rule on filled tickets, a heavier ink frame on outlined ones. */
.button:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--night), inset 0 0 0 6px var(--ink); }
.letter .button:focus-visible { box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 6px var(--night); }
.button-outline:focus-visible { box-shadow: none; }
.button-outline:focus-visible::before { inset: 6px; }
.button .arrow { font: 600 22px/.6 var(--reading); }
/* Secondary: the same notched ticket outlined in ink. The inner layer is cut 2px wider. */
.button-outline { background: var(--ink); color: var(--ink); isolation: isolate; }
.button-outline::before { content: ""; position: absolute; inset: 2px; z-index: -1; background: var(--ground, var(--night)); --notch: 11px;
  -webkit-mask: radial-gradient(circle var(--notch) at -2px 50%, #0000 calc(100% - .5px), #000 100%) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at calc(100% + 2px) 50%, #0000 calc(100% - .5px), #000 100%) right / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--notch) at -2px 50%, #0000 calc(100% - .5px), #000 100%) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at calc(100% + 2px) 50%, #0000 calc(100% - .5px), #000 100%) right / 51% 100% no-repeat; }
.button-outline:hover { color: var(--night); }
.button-outline:hover::before { background: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Stamps: short caps in a 1.5px rule, tilted as if rubber-stamped. */
.stamp { display: inline-block; padding: 7px 11px 5px; border: 1.5px solid currentColor; font: 800 14px/1.1 var(--display); text-transform: uppercase; letter-spacing: .1em; transform: rotate(var(--tilt, -3deg)); white-space: nowrap; }
.stamp-filled { border-color: transparent; background: var(--spot); color: var(--night); }
.stamp-large { padding: 10px 16px 8px; border-width: 3px; font-size: clamp(18px, 2vw, 24px); }

/* Perforation: a row of punched holes. */
.perforation { height: 8px; background: radial-gradient(circle 3px, var(--night) 96%, #0000) 0 50% / 14px 8px repeat-x; }

/* Halftone: an inline SVG using the shared symbol, coloured with the section's spot ink. */
.halftone { position: absolute; pointer-events: none; width: min(56vw, 520px); aspect-ratio: 1; fill: var(--spot); color: var(--spot); opacity: .55; }

/* Fixture-board ticker */
.board { border-bottom: 1px solid var(--hairline); background: var(--page); }
.board .wrap { display: flex; align-items: center; gap: 12px; }
.board-label { flex: none; padding: 6px 10px 4px; background: var(--ink); color: var(--night); font: 900 13px/1 var(--display); text-transform: uppercase; letter-spacing: .12em; }
.board-window { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.board-track { display: flex; width: max-content; }
.board-list { display: flex; margin: 0; padding: 0; list-style: none; }
.board-list li { display: flex; align-items: center; gap: 10px; padding: 12px 22px 10px; border-right: 1px solid var(--hairline); white-space: nowrap; font: 800 15px/1 var(--display); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); }
.board-list b { padding: 4px 6px 2px; background: var(--night); color: var(--ink); font: 900 16px/1 var(--stencil); letter-spacing: .06em; }
.board-list i { width: 9px; height: 9px; border-radius: 50%; background: var(--football); }
.board-list .dot-basketball { background: var(--basketball); }
.board-list .dot-racing { background: var(--racing); }
.board-list .dot-gold { background: var(--gold); }
.board-list .dot-muted { background: var(--ink-3); }
.board-toggle { flex: none; min-width: 44px; min-height: 36px; padding: 6px 10px 4px; border: 1.5px solid var(--ink-3); background: transparent; color: var(--ink-2); font: 800 13px/1 var(--display); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }
.board-toggle:hover { color: var(--ink); border-color: var(--ink); }

/* Home hero */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 88px); align-items: center; padding-block: clamp(56px, 9vw, 120px) clamp(64px, 9vw, 120px); }
/* Two lines with matching edges: STORIES is set 1.342 times larger so it spans exactly the width of
   SPORT HAS (3.984 em against 2.969 em in Big Shoulders Black, both starting and ending on an S).
   The first line's size comes from the copy column's width, so neither line can overflow. */
.hero-copy { min-width: 0; container-type: inline-size; }
.hero h1 { margin: 18px 0 30px; font-size: clamp(56px, 10vw, 150px); font-size: min(168px, 100cqi / 4.01); line-height: 1; letter-spacing: 0; }
.hero h1 span { display: block; }
.hero h1 .line-1 { line-height: .92; }
.hero h1 .line-2 { margin-top: -.02em; font-size: 1.3421em; line-height: .86; color: var(--spot); }
.lede { max-width: 34em; color: var(--ink-2); font-size: clamp(19px, 1.2vw + 12px, 23px); line-height: 1.5; }
.lede strong { color: var(--ink); font-weight: 600; }
.hero-note { margin-top: 26px; }
.hero-art { position: relative; justify-self: center; width: min(100%, 470px); }
.hero-art .halftone { top: -16%; right: -18%; z-index: 0; }

/* The match ticket: cream paper with a stub torn along a perforation. */
/* Each piece is cut with three mask layers: the side notch, a column of perforation half-holes
   along the tear, and solid paper for the rest. Both pieces share the same hole pitch from the top,
   so the torn edges match. */
.match-ticket { --notch: 14px; --hole: 4px; --pitch: 14px; --edge: 8px; position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) clamp(70px, 10vw, 96px); margin-right: 22px; color: var(--night); }
.ticket-main, .ticket-stub { position: relative; min-width: 0; background: var(--ink); -webkit-mask-composite: source-in, source-over; mask-composite: intersect, add; }
.ticket-main { padding: 22px 22px 84px 26px;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 50%, #0000 calc(100% - .5px), #000 100%), radial-gradient(circle var(--hole) at 100% 50%, #0000 calc(100% - .5px), #000 100%) right top / var(--edge) var(--pitch) repeat-y, linear-gradient(#000 0 0) left top / calc(100% - var(--edge)) 100% no-repeat;
  mask: radial-gradient(circle var(--notch) at 0 50%, #0000 calc(100% - .5px), #000 100%), radial-gradient(circle var(--hole) at 100% 50%, #0000 calc(100% - .5px), #000 100%) right top / var(--edge) var(--pitch) repeat-y, linear-gradient(#000 0 0) left top / calc(100% - var(--edge)) 100% no-repeat;
  -webkit-mask-composite: source-in, source-over; mask-composite: intersect, add; }
.ticket-stub { display: grid; align-content: space-between; justify-items: center; padding: 22px 10px 20px 14px; transform-origin: 0 0;
  -webkit-mask: radial-gradient(circle var(--notch) at 100% 50%, #0000 calc(100% - .5px), #000 100%), radial-gradient(circle var(--hole) at 0 50%, #0000 calc(100% - .5px), #000 100%) left top / var(--edge) var(--pitch) repeat-y, linear-gradient(#000 0 0) right top / calc(100% - var(--edge)) 100% no-repeat;
  mask: radial-gradient(circle var(--notch) at 100% 50%, #0000 calc(100% - .5px), #000 100%), radial-gradient(circle var(--hole) at 0 50%, #0000 calc(100% - .5px), #000 100%) left top / var(--edge) var(--pitch) repeat-y, linear-gradient(#000 0 0) right top / calc(100% - var(--edge)) 100% no-repeat;
  -webkit-mask-composite: source-in, source-over; mask-composite: intersect, add; }
.ticket-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding-bottom: 12px; border-bottom: 1.5px solid var(--night); font: 800 13px/1.1 var(--display); text-transform: uppercase; letter-spacing: .12em; }
.ticket-title { margin: 18px 0 6px; font: 900 clamp(56px, 8vw, 96px)/.8 var(--display); text-transform: uppercase; }
.ticket-sub { font: 800 clamp(17px, 2vw, 21px)/1.05 var(--display); text-transform: uppercase; letter-spacing: .05em; }
.ticket-rows { margin: 20px 0 0; display: grid; gap: 0; }
.ticket-rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0 6px; border-top: 1px solid rgb(20 18 15 / .25); font: 800 14px/1.15 var(--display); text-transform: uppercase; letter-spacing: .08em; }
.ticket-rows dd { margin: 0; text-align: right; }
.ticket-rows dt { color: #5c554a; white-space: nowrap; }
.stub-number { font: 900 clamp(28px, 3.6vw, 38px)/1 var(--stencil); writing-mode: vertical-rl; transform: rotate(180deg); }
.stub-label { font: 800 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
.ticket-stamp { position: absolute; z-index: 2; left: 22px; bottom: 16px; --tilt: -6deg; color: var(--night); }

/* Sections */
.section { padding-block: clamp(64px, 9vw, 120px); }
.section + .section { border-top: 1px solid var(--hairline); }
.section-head { display: grid; grid-template-columns: minmax(150px, .32fr) 1fr; gap: clamp(20px, 4vw, 56px); margin-bottom: clamp(36px, 5vw, 64px); }
.section-head h2 { font-size: clamp(48px, 7vw, 96px); }
.section-head .lede { margin-top: 18px; }
/* Ghost kit numerals: big outlines that fill the side column, like a shirt number. */
.index { font: 900 clamp(110px, 15vw, 230px)/.74 var(--stencil); letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 2px var(--ink-3); }

/* Rally showcase */
.rally-intro { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 32px; margin-top: 26px; }
.store-stamp { display: inline-grid; gap: 4px; padding: 12px 18px 10px; border: 3px solid var(--ink); transform: rotate(-2.5deg); }
.store-stamp b { font: 900 22px/1 var(--display); text-transform: uppercase; letter-spacing: .06em; }
.store-stamp span { font: 800 13px/1 var(--display); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-2); }
.phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.phone-item { display: grid; align-content: start; gap: 30px; }
.phone { position: relative; aspect-ratio: 9 / 19.5; padding: 10px; border-radius: 34px; background: var(--raised); box-shadow: inset 0 0 0 2px var(--rule); }
.phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 25px; background: var(--night); padding: 34px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.phone-screen::before { content: ""; position: absolute; top: 9px; left: 50%; width: 30%; height: 14px; border-radius: 10px; background: #000; transform: translateX(-50%); }
.phone-caption h3 { font-size: clamp(26px, 2.6vw, 34px); }
.phone-caption p { margin: 10px 0 0; color: var(--ink-2); font-size: 17px; line-height: 1.45; }
.placeholder-note { position: absolute; z-index: 2; left: 50%; bottom: 14px; transform: translateX(-50%) rotate(-3deg); background: var(--night); color: var(--ink-2); }
/* Miniature screens: drawn from the app's own pieces, with bars where words will be. */
.mini-head { display: flex; justify-content: space-between; align-items: end; }
.mini-head .mini-title { font: 900 22px/.85 var(--display); text-transform: uppercase; }
.mini-head .ghost { font: 900 46px/.8 var(--stencil); color: transparent; -webkit-text-stroke: 1px var(--ink-3); }
.mini-rule { height: 2px; background: var(--ink); }
.bar { height: 8px; background: var(--raised); }
.bar.short { width: 62%; }
.bar.mid { width: 80%; }
.mini-answer { --notch: 6px; display: flex; align-items: center; justify-content: space-between; min-height: 30px; padding: 0 10px; background: var(--page); }
.mini-answer .bar { flex: 1; max-width: 70%; background: var(--rule); height: 7px; }
.mini-answer.correct .bar { background: var(--highlighter); height: 13px; }
.mini-answer.correct { box-shadow: inset 0 0 0 1.5px var(--highlighter); }
.mini-answer.wrong .bar { position: relative; background: var(--rule); }
.mini-answer.wrong .bar::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 2px; background: var(--biro); }
.mark { flex: none; width: 16px; height: 16px; display: grid; place-items: center; font: 900 12px/1 var(--display); color: var(--night); }
.mark.check { background: var(--highlighter); }
.mark.cross { background: var(--biro); }
.marks { display: flex; gap: 6px; }
.marks span { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--ink-3); }
.marks .ok { background: var(--highlighter); border-color: var(--highlighter); }
.marks .no { position: relative; border-color: var(--biro); }
.marks .no::after { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 2px; margin-top: -1px; background: var(--biro); transform: rotate(-45deg); }
.marks .now { border-color: var(--spot); }
.fixture { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--hairline); }
.fixture .yrs { font: 800 12px/1 var(--display); letter-spacing: .06em; color: var(--ink-2); }
.fixture .bar { flex: 1; max-width: 58%; height: 7px; }
.fixture .loan { padding: 2px 4px 1px; border: 1px solid var(--ink-3); font: 800 9px/1 var(--display); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.guesses { display: grid; gap: 6px; }
.guess { --notch: 6px; display: flex; align-items: center; justify-content: space-between; min-height: 26px; padding: 0 10px; border: 1.5px dashed var(--rule); }
.guess.wrong { border-style: solid; border-color: var(--biro); }
.timer { position: relative; align-self: center; width: 116px; aspect-ratio: 1; margin-block: 6px; }
.timer i { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: var(--spot); transform: rotate(calc(var(--n) * 30deg)) translateY(-50px); }
.timer i:nth-child(1) { --n: 0; }
.timer i:nth-child(2) { --n: 1; }
.timer i:nth-child(3) { --n: 2; }
.timer i:nth-child(4) { --n: 3; }
.timer i:nth-child(5) { --n: 4; }
.timer i:nth-child(6) { --n: 5; }
.timer i:nth-child(7) { --n: 6; }
.timer i:nth-child(8) { --n: 7; }
.timer i:nth-child(9) { --n: 8; }
.timer i:nth-child(10) { --n: 9; }
.timer i:nth-child(11) { --n: 10; }
.timer i:nth-child(12) { --n: 11; }
.timer i.gone { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.timer b { position: absolute; inset: 0; display: grid; place-items: center; font: 900 40px/1 var(--stencil); }
.league-row { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--hairline); font: 800 12px/1 var(--display); }
.league-row .bar { height: 7px; }
.league-row.you { background: var(--raised); box-shadow: -4px 0 0 var(--raised), 4px 0 0 var(--raised); }
.zone { font: 800 10px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--spot); padding-top: 4px; }

/* Modes as fixture rows */
.modes { margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.modes li { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: baseline; gap: 18px; padding: 18px 0 16px; border-bottom: 1px solid var(--hairline); }
.modes .no { font: 900 26px/1 var(--stencil); color: var(--spot); }
.modes h3 { font-size: clamp(24px, 2.4vw, 30px); }
.modes p { margin: 6px 0 0; color: var(--ink-2); font-size: 17px; }
.modes .fig { font: 900 clamp(22px, 2.2vw, 28px)/1 var(--stencil); text-align: right; white-space: nowrap; }

/* Sports */
.sports { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); margin-top: clamp(40px, 5vw, 64px); }
.sport { --notch: 11px; position: relative; overflow: hidden; min-height: 150px; padding: 22px 26px; background: var(--spot); color: var(--night); display: flex; flex-direction: column; justify-content: space-between; }
.sport h3 { position: relative; font-size: clamp(30px, 3.2vw, 42px); }
.sport p { position: relative; margin: 0; font: 800 14px/1.2 var(--display); text-transform: uppercase; letter-spacing: .1em; }
.sport .halftone { width: 210px; top: -40px; right: -50px; fill: var(--night); opacity: .22; }
.sport-football { --spot: var(--football); }
.sport-basketball { --spot: var(--basketball); }
.sport-racing { --spot: var(--racing); }

/* Studio */
.studio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.pull { margin: 0; font: 900 clamp(40px, 5.2vw, 72px)/.92 var(--display); text-transform: uppercase; }
.pull mark { background: none; color: var(--spot); }
.rules { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.rules li { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; padding: 18px 0 16px; border-bottom: 1px solid var(--hairline); }
.rules .stamp { grid-row: span 2; align-self: start; color: var(--spot); }
.rules b { font: 900 22px/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.rules span { color: var(--ink-2); font-size: 17px; }

/* Contact band */
.band { --ground: var(--page); position: relative; overflow: hidden; background: var(--page); border-block: 1px solid var(--hairline); }
.band .wrap { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 28px; padding-block: clamp(48px, 7vw, 88px); }
.band h2 { font-size: clamp(48px, 7vw, 96px); }
.band .halftone { left: -200px; bottom: -330px; transform: scaleX(-1); }

/* Footer */
.site-footer { padding-top: 56px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; padding-bottom: 44px; }
.footer-lockup { width: min(100%, 300px); height: auto; }
.footer-title { margin-bottom: 14px; font: 900 18px/1 var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--football); }
.footer-copy { max-width: 26em; margin-top: 18px; color: var(--ink-2); font-size: 16px; }
.footer-links { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.footer-links a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-links small { color: var(--ink-3); font-size: 14px; margin-left: 8px; }
.footer-base { border-top: 1px solid var(--hairline); padding-block: 18px 28px; }
.footer-base .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; color: var(--ink-3); font-size: 15px; }

/* Inner pages */
.page-lead { position: relative; padding-block: clamp(48px, 7vw, 96px) clamp(32px, 4vw, 48px); }
.page-lead h1 { margin: 16px 0 18px; font-size: clamp(56px, 9vw, 128px); }
.page-lead .intro { max-width: 34em; color: var(--ink-2); font-size: clamp(19px, 1.2vw + 12px, 23px); }
.page-lead .halftone { top: 0; right: -60px; width: min(60vw, 420px); }
.doc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); padding-bottom: clamp(64px, 8vw, 112px); border-top: 2px solid var(--ink); padding-top: 36px; }
.toc { position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow: auto; }
.toc nav { display: grid; margin-top: 12px; border-top: 1px solid var(--hairline); }
.toc a { padding: 9px 0 7px; border-bottom: 1px solid var(--hairline); font: 800 15px/1.15 var(--display); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; color: var(--ink-2); }
.toc a:hover { color: var(--ink); }
.prose { max-width: 70ch; }
.prose h2 { margin: 52px 0 16px; padding-top: 14px; border-top: 1.5px solid var(--ink); font-size: clamp(30px, 3.4vw, 42px); scroll-margin-top: 24px; }
.prose h2:first-of-type { margin-top: 28px; }
.prose h3 { margin: 30px 0 10px; font-size: clamp(21px, 2vw, 25px); letter-spacing: .02em; }
.prose p, .prose li { color: #ddd4c3; }
.prose em { color: var(--ink-2); }
.prose ul { padding-left: 1.2em; margin: 0 0 1em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--spot); }
.prose a { color: var(--ink); text-decoration-color: var(--spot); text-decoration-thickness: 2px; }
.meta { display: inline-block; color: var(--ink-2); font-style: italic; }
.data-table { width: 100%; margin: 8px 0 20px; border-collapse: collapse; font-size: 17px; }
.data-table th { padding: 10px 12px 8px 0; border-bottom: 2px solid var(--ink); font: 800 14px/1.2 var(--display); text-transform: uppercase; letter-spacing: .1em; text-align: left; color: var(--ink-2); }
.data-table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; color: #ddd4c3; }
.data-table td:last-child { color: var(--ink); }
.callout { padding: 18px 20px; border: 1.5px solid var(--ink); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: start; padding-bottom: clamp(64px, 8vw, 112px); }
.contact-aside { display: grid; gap: 28px; }
.letter { --ground: var(--ink); position: relative; padding: clamp(24px, 4vw, 44px); background: var(--ink); color: var(--night); filter: drop-shadow(10px 10px 0 var(--raised)); }
.letter-top { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 26px; border-bottom: 2px solid var(--night); font: 800 13px/1.1 var(--display); text-transform: uppercase; letter-spacing: .12em; }
.letter h2 { margin-bottom: 12px; font-size: clamp(34px, 4vw, 52px); }
.letter > p { color: #3e3930; }
.form-row { margin-bottom: 20px; }
.form-row label { display: block; margin-bottom: 7px; font: 900 16px/1.1 var(--display); text-transform: uppercase; letter-spacing: .08em; }
.form-row input, .form-row select, .form-row textarea { display: block; width: 100%; min-height: 50px; padding: 11px 13px; border: 2px solid var(--night); border-radius: 0; background: #fbf6ea; color: var(--night); font: 400 18px/1.4 var(--reading); appearance: none; }
.form-row select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2314120f' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.form-row textarea { min-height: 170px; resize: vertical; }
.form-row ::placeholder { color: #6e665a; }
.form-row :focus-visible { outline: 3px solid var(--night); outline-offset: 2px; }
.form-row [aria-invalid="true"] { border-width: 3px; border-style: dashed; }
.field-error { margin: 8px 0 0; color: var(--night); font: 600 16px/1.35 var(--reading); }
.field-error::before { content: "\00d7  "; font-weight: 700; }
.field-meta { display: flex; justify-content: space-between; gap: 16px; margin: 0; }
.field-count { margin-left: auto; padding-top: 8px; color: #5c554a; font: 15px/1.35 var(--reading); font-variant-numeric: tabular-nums; }
.field-count[data-state="near"] { color: var(--night); font-weight: 600; }
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-challenge { min-height: 65px; margin: 4px 0 18px; }
.form-privacy, .form-alternative { color: #3e3930; font-size: 16px; }
.form-privacy a, .form-alternative a, .form-fallback { color: var(--night); }
.letter .button { --spot: var(--night); color: var(--ink); }
.letter .button:hover { color: var(--ink); }
.form-status { min-height: 1.5em; margin: 18px 0 0; font-weight: 600; }
.form-status[data-state="success"]::before { content: "\2713  "; }
.form-status[data-state="error"]::before { content: "\00d7  "; }
.form-fallback { display: inline-block; margin-top: 8px; font-weight: 600; }
.channels { display: grid; border-top: 2px solid var(--ink); }
.channels a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0 12px; border-bottom: 1px solid var(--hairline); text-decoration: none; }
.channels b { display: block; font: 900 20px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.channels small { color: var(--ink-2); font-size: 16px; }
.channels a:hover b { color: var(--spot); }
.routes { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline); border-block: 1px solid var(--hairline); }
.routes article { padding: 28px 28px 30px 0; background: var(--night); }
.routes article + article { padding-left: 28px; }
.routes h3 { margin: 10px 0 10px; font-size: 30px; }
.routes p { color: var(--ink-2); font-size: 17px; }

/* Error and share pages */
.ghost-number { display: block; margin-bottom: 18px; font: 900 clamp(120px, 26vw, 300px)/.8 var(--stencil); color: transparent; -webkit-text-stroke: 2px var(--ink-3); }
.share-card { max-width: 640px; }
.link-code { margin-top: 16px; color: var(--ink-3); font-size: 15px; overflow-wrap: anywhere; }

/* Motion. Only with JavaScript (html.motion) and no Reduce Motion: everything is visible otherwise. */
@media (prefers-reduced-motion: no-preference) {
  .motion [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .5s ease-out, transform .5s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--delay, 0s); }
  .motion [data-reveal].is-in { opacity: 1; transform: none; }
  .motion [data-stamp] { opacity: 0; transform: rotate(var(--tilt, -3deg)) scale(1.7); transition: opacity .12s linear, transform .35s var(--stamp); transition-delay: var(--delay, 0s); }
  .motion [data-stamp].is-in { opacity: 1; transform: rotate(var(--tilt, -3deg)) scale(1); }

  /* The hero ticket prints in from the top, the ADMIT ONE stamp slams down and the stub tears away along the perforation. */
  .motion .match-ticket { animation: print-in .75s steps(12, end) .15s backwards; }
  .motion .ticket-stamp { animation: stamp-slam .35s var(--stamp) 1.05s both; }
  .motion .ticket-stub { animation: tear .55s cubic-bezier(.3, 1.4, .5, 1) 1.5s both; }
  .motion .hero-art .halftone { animation: fade-in .6s ease-out .3s both; }

  .board-track { animation: ticker 48s linear infinite; }
  .board[data-paused="true"] .board-track, .board:hover .board-track, .board:focus-within .board-track { animation-play-state: paused; }

  @supports (animation-timeline: view()) {
    .halftone { animation: drift linear both; animation-timeline: view(); }
    .motion .hero-art .halftone { animation: fade-in .6s ease-out .3s both, drift linear both; animation-timeline: auto, view(); }
  }
}

@keyframes print-in { from { clip-path: inset(-40px -60px 100% -40px); } to { clip-path: inset(-40px -60px -40px -40px); } }
@keyframes stamp-slam { 0% { opacity: 0; transform: rotate(-14deg) scale(2.2); } 60% { opacity: 1; } 100% { opacity: 1; transform: rotate(var(--tilt)) scale(1); } }
@keyframes tear { from { transform: none; } to { transform: translate(12px, 2px) rotate(-3deg); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes drift { from { translate: 0 40px; } to { translate: 0 -40px; } }

/* Without motion the stub still sits torn, so both versions end on the same frame. */
.ticket-stub { transform: translate(12px, 2px) rotate(-3deg); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .board-window { overflow-x: auto; }
  .board-track > :nth-child(2) { display: none; }
  .board-toggle { display: none; }
}

/* Narrow screens */
@media (max-width: 900px) {
  .hero, .studio, .contact-grid { grid-template-columns: 1fr; }
  .hero-art { width: min(100%, 420px); }
  .section-head { grid-template-columns: 1fr; gap: 14px; }
  .phones { grid-template-columns: repeat(3, minmax(220px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .phone-item { scroll-snap-align: start; }
  .sports { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .doc { grid-template-columns: 1fr; }
  .toc { position: static; max-height: none; }
  .toc nav { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .routes { grid-template-columns: 1fr; }
  .routes article + article { padding-left: 0; }
}
@media (max-width: 560px) {
  .masthead { min-height: 66px; }
  .brand img { width: 38px; height: 38px; }
  .brand-type { font-size: 21px; }
  .brand-type small { font-size: 11px; }
  .nav a { font-size: 15px; }
  .edition .wrap > :last-child { display: none; }
  .modes li { grid-template-columns: 44px minmax(0, 1fr); }
  .modes .fig { grid-column: 2; text-align: left; }
  .footer-grid { grid-template-columns: 1fr; }
  .toc nav { grid-template-columns: 1fr; }
  .board-label { display: none; }
  .actions .button { flex: 1 1 100%; }
}
@media (max-width: 380px) {
  .nav { gap: 12px; }
  .brand-type { display: none; }
}
@media (forced-colors: active) {
  .button { border: 2px solid ButtonText; -webkit-mask: none; mask: none; }
  .ticket-main, .ticket-stub { -webkit-mask: none; mask: none; border: 2px solid CanvasText; }
}

[data-reveal].d1, [data-stamp].d1 { --delay: .08s; }
[data-reveal].d2, [data-stamp].d2 { --delay: .16s; }
[data-reveal].d3, [data-stamp].d3 { --delay: .24s; }