/* The Odd Score · "Game Day Print". Flat inks on newsprint, halftone, grain, slight misregistration. Brand spec sections 1, 2, 8 and 12.
   Every ink has one job: paper ground, navy type and linework, red the one thing to look at (display sizes only on paper), gold a second ink
   (never text on paper), stadium night for the big moments. Square corners except scoreboard tiles (8px) and score cells (6px).
   The only shadows are hard print offsets. No gradients. */
:root {
  --paper: #ECE4D0; --ink: #14233F; --red: #E8452C; --gold: #F2B705; --night: #0B1220; --muted: #5E584A; --stock: #F7F0DE; --ash: #9A9484;
  --board: #DCD3BD; --cell: #16233A;
  --f-d: 'Big Shoulders Display', Impact, 'Arial Narrow', sans-serif; --f-t: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-v: 'Graduate', Georgia, serif;
  --ease-stamp: cubic-bezier(.3, 1.5, .5, 1); --ease-slide: cubic-bezier(.2, .9, .2, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 500 18px/1.55 var(--f-t); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: var(--ink); text-underline-offset: .18em; text-decoration-thickness: 2px; }
a:hover { text-decoration-color: var(--red); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
::selection { background: var(--gold); color: var(--ink); }

/* the three faces (spec 1.2) */
.d { font-family: var(--f-d); font-weight: 900; text-transform: uppercase; letter-spacing: .005em; overflow-wrap: break-word; }
.t { font-family: var(--f-t); }
.v { font-family: var(--f-v); font-weight: 400; text-transform: uppercase; }
.c { font-family: var(--f-t); font-stretch: 75%; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

/* paper grain + flecks: fractal noise .65, 3 octaves, multiply 16%, above everything, never in the way */
.grain { position: fixed; inset: 0; z-index: 60; pointer-events: none; background: url(/assets/grain.svg) repeat; background-size: 300px; mix-blend-mode: multiply; opacity: .16; }

/* misregistration: a red copy of display type sits +3 / -2 px behind the navy */
.mr { position: relative; display: block; }
.mr-ghost { position: absolute; left: 3px; top: -2px; width: 100%; color: var(--red); }
.mr-ink { position: relative; }
.acc { color: var(--red); }
.mr-ghost .acc { color: var(--ink); }
/* the caption highlight: a gold block with its red plate, navy text (8.6:1) */
mark.hl { background: var(--gold); color: var(--ink); padding: 0 .2em; box-shadow: 3px -2px 0 var(--red); box-decoration-break: clone; -webkit-box-decoration-break: clone; font-weight: 700; }

.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 24px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 70; background: var(--ink); color: var(--paper); padding: 12px 16px; font: 700 15px var(--f-t); }
.skip:focus { top: 12px; color: var(--paper); }

/* the kicker: Graduate, red, never under 24px on paper (red on paper is display-only) */
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-family: var(--f-v); font-size: 24px; line-height: 1.15; color: var(--red); text-transform: uppercase; }
.kicker-i { flex: none; }

/* tabs: a solid ink block with condensed caps (unit tabs, state tabs) */
.tab { display: inline-block; padding: 6px 14px 5px; font-size: 18px; line-height: 1.2; font-weight: 800; transform: rotate(-3deg); }
.tab-gold { background: var(--gold); color: var(--ink); }
.tab-red { background: var(--red); color: var(--ink); }
.tab-navy { background: var(--ink); color: var(--paper); }
.tab-paper { background: var(--paper); color: var(--ink); }

/* a figure on its plate: red with a navy plate at -4/+4 on paper; gold with a red plate at +6/-4 on night */
.fig { position: relative; display: inline-block; font-family: var(--f-d); font-weight: 900; line-height: .8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fig .plate { position: absolute; left: -4px; top: 4px; color: var(--ink); }
.fig .ink { position: relative; color: var(--red); }
.fig-night .plate { left: 6px; top: -4px; color: var(--red); }
.fig-night .ink { color: var(--gold); }

/* ── masthead: the navy strip, then the bar ── */
.strip { background: var(--ink); color: var(--paper); font-size: 14px; }
.strip-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 18px; padding-block: 7px; }
.site-head { border-bottom: 3px solid var(--ink); }
.head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-block: 12px; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-height: 48px; }
.logo-i { flex: none; width: 48px; height: 48px; }
.logo-t { font-size: 40px; line-height: .9; white-space: nowrap; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; font-size: 17px; }
.nav a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.nav a:hover { text-decoration: underline; text-decoration-color: var(--red); }
.nav .nav-sub { background: var(--red); color: var(--ink); border: 3px solid var(--ink); padding: 0 18px; font-size: 19px; font-weight: 800; box-shadow: -4px 4px 0 var(--ink); }
.nav .nav-sub:hover { text-decoration: none; transform: translate(-1px, -1px); }

/* ── buttons, fields, forms ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 62px; padding: 0 26px; background: var(--red); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 0; box-shadow: -5px 5px 0 var(--ink); font: 900 28px/1 var(--f-d); text-transform: uppercase; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; transition: transform .12s var(--ease-stamp), box-shadow .12s var(--ease-stamp); }
.btn:hover { color: var(--ink); transform: translate(1px, -1px); box-shadow: -6px 6px 0 var(--ink); }
.btn:active { transform: translate(-4px, 4px); box-shadow: -1px 1px 0 var(--ink); }
.btn:disabled { cursor: progress; opacity: .85; }
.btn-gold { background: var(--gold); }
.btn-small { min-height: 52px; font-size: 24px; padding: 0 20px; }
.field-label { display: block; margin: 0 0 8px; font-size: 15px; }
.field-row { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: stretch; }
.field { flex: 999 1 260px; min-width: 0; height: 62px; padding: 0 16px; background: var(--stock); color: var(--ink); border: 3px solid var(--ink); border-radius: 0; font: 600 20px var(--f-t); }
.field::placeholder { color: var(--muted); opacity: 1; }
.field[aria-invalid="true"] { border-color: var(--red); box-shadow: inset 0 0 0 2px var(--red); }
.field-row .btn { flex: 1 1 auto; }
.micro { margin-top: 12px; font-size: 15px; line-height: 1.45; color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; background: var(--stock); color: var(--ink); border: 2px solid var(--ink); font: 600 17px/1.4 var(--f-t); }
.form-error-mark { flex: none; width: 24px; height: 24px; display: grid; place-items: center; background: var(--red); border: 2px solid var(--ink); font: 800 15px var(--f-t); }
.spinner { width: 18px; height: 18px; border: 3px solid var(--ink); border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.linkbtn { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; min-height: 44px; }
.link { font-weight: 700; }
.on-dark .field-label { color: var(--paper); }
.on-dark .micro { color: var(--ash); }

/* the submitted state: a ticket-stock card with a tab */
.done { position: relative; padding: 22px 22px 18px; background: var(--stock); color: var(--ink); border: 3px solid var(--ink); box-shadow: -6px 6px 0 var(--ink); }
.done .tab { margin: 0 0 12px; }
.done-h { font-size: 40px; line-height: .95; margin: 0 0 8px; }
.done p { font-size: 18px; }
.done .micro { color: var(--muted); }
.done-dark { box-shadow: -6px 6px 0 var(--red); }
.done:focus-within, .done-h:focus { outline: none; }

/* ── hero (12.2) ── */
.hero { padding-block: 48px 64px; }
.hero-row { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.hero-main { flex: 999 1 520px; min-width: 0; }
.hero-h { font-size: clamp(56px, 8vw, 112px); line-height: .88; margin: 14px 0 20px; }
.hero-p { font-size: 20px; line-height: 1.5; max-width: 40em; margin: 0 0 28px; }
.signup-anchor { max-width: 620px; scroll-margin-top: 24px; }

/* the ticket card: stadium night body + a gold stub behind a dashed perforation */
.ticket { flex: 1 1 340px; min-width: 0; max-width: 460px; margin-inline: auto; display: flex; background: var(--night); color: var(--paper); border: 3px solid var(--ink); box-shadow: -10px 10px 0 var(--ink); transform: rotate(1.5deg); }
.ticket-body { flex: 1 1 auto; min-width: 0; padding: 26px 24px 28px; }
.ticket-k { color: var(--gold); font-size: 15px; margin: 0 0 18px; }
.ticket-fig { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin: 0 0 22px; }
.ticket-fig .fig { font-size: clamp(120px, 11vw, 168px); }
.ticket-fig .tab { margin-bottom: 14px; font-size: 22px; }
.ticket-h { font: 700 22px/1.3 var(--f-t); }
.ticket-stub { flex: none; width: 74px; background: var(--gold); color: var(--ink); border-left: 4px dashed var(--ink); display: grid; place-items: center; }
.ticket-stub span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 17px; white-space: nowrap; }

/* ── how the daily works (12.3): navy band ── */
.how { background: var(--ink); color: var(--paper); padding-block: 64px 72px; }
.how .acc { color: var(--gold); }
.band-h { font-size: clamp(44px, 6vw, 80px); line-height: .9; margin: 0 0 36px; }
.how-grid { display: flex; flex-wrap: wrap; gap: 24px; }
.how-card { flex: 1 1 280px; min-width: 0; border-top: 6px solid var(--gold); padding-top: 18px; }
.how-n { display: block; font-size: 72px; line-height: .85; color: var(--gold); margin: 0 0 10px; }
.how-card h3 { font-size: 40px; line-height: .95; margin: 0 0 10px; }
.how-card p { color: var(--paper); font-size: 18px; }

/* ── a real issue (12.4) ── */
.sample { padding-block: 72px; }
.sample-row { display: flex; flex-wrap: wrap; gap: 40px 56px; align-items: flex-start; }
.sample-text { flex: 1 1 300px; min-width: 0; }
.sample-text p:last-child { font-size: 19px; }
.sec-h { font-size: clamp(44px, 5.4vw, 72px); line-height: .9; margin: 10px 0 16px; }
.mock { flex: 999 1 520px; min-width: 0; background: var(--stock); border: 3px solid var(--ink); box-shadow: -8px 8px 0 var(--red); }
.mock-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 10px 20px; border-bottom: 3px solid var(--ink); font-size: 14px; }
.mock-body { padding: 22px 22px 24px; }
.mock-body h3 { font-size: clamp(34px, 4vw, 46px); line-height: .92; margin: 0 0 14px; }
.mock-body p { font-size: 17px; margin: 0 0 14px; }
.src { font-style: italic; color: var(--muted); font-size: 15px !important; }
.src .link { color: var(--ink); }

/* the night stat box (the "For scale:" paragraph): gold figure on its red plate, paper unit tab, its line in paper */
.statbox { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin: 8px 0 22px; padding: 22px 24px; background: var(--night); color: var(--paper); border: 3px solid var(--ink); box-shadow: -6px 6px 0 var(--red); }
.statbox-fig { display: flex; align-items: flex-end; gap: 12px; flex: none; max-width: 100%; }
.stat-n { position: relative; display: inline-block; font: 900 104px/.8 var(--f-d); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-n.stat-long { font-size: 72px; }
.stat-n .plate { position: absolute; left: 6px; top: -4px; color: var(--red); }
.stat-n .ink { position: relative; color: var(--gold); }
.stat-unit { display: inline-block; margin-bottom: 4px; padding: 5px 12px 4px; background: var(--paper); color: var(--ink); font: 800 20px/1.1 var(--f-t); font-stretch: 75%; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-3deg); }
.statbox-t { flex: 1 1 220px; min-width: 0; font: 700 19px/1.4 var(--f-t); }
.statbox-t a { color: var(--paper); }
.statbox-t mark.hl { color: var(--ink); }
.statbox-hero { margin: 30px 0 34px; padding: 28px 28px; }
.statbox-hero .stat-n { font-size: clamp(120px, 18vw, 200px); }
.statbox-hero .stat-n.stat-long { font-size: clamp(76px, 11vw, 128px); }
.statbox-hero .statbox-t { font-size: 21px; }

/* ── from the archive (12.5) ── */
.archive-band { background: var(--board); padding-block: 64px 72px; border-block: 3px solid var(--ink); }
.arch-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin: 0 0 26px; }
.arch-all { font-size: 17px; min-height: 44px; display: inline-flex; align-items: center; }
.arch-grid { display: flex; flex-wrap: wrap; gap: 22px; }
.arch-grid li { flex: 1 1 300px; min-width: 0; }
.arch-card { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 280px; height: 100%; padding: 18px 20px 20px; background: var(--stock); color: var(--ink); border: 3px solid var(--ink); text-decoration: none; transition: transform .14s var(--ease-stamp), box-shadow .14s var(--ease-stamp); }
.arch-card:hover { transform: translate(2px, -2px); box-shadow: -6px 6px 0 var(--ink); }
.arch-k { font-size: 20px; }
.arch-card .fig { font-size: 120px; align-self: flex-start; }
.arch-t { font-size: 40px; line-height: .95; }
.g-night { background: var(--night); color: var(--paper); }
.g-navy { background: var(--ink); color: var(--paper); }
.g-navy .fig-night .plate { color: var(--red); }
.g-night .arch-k, .g-navy .arch-k { color: var(--gold); }
.g-navy:hover { box-shadow: -6px 6px 0 var(--red); }

/* ── house rules (12.6) ── */
.rules { padding-block: 72px; }
.rules-row { display: flex; flex-wrap: wrap; gap: 40px 64px; align-items: center; }
.rule-tabs { flex: 1 1 300px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.rtab { display: inline-block; padding: 8px 18px 6px; font-size: clamp(40px, 5vw, 56px); line-height: .95; border: 3px solid var(--ink); }
.rtab-navy { background: var(--ink); color: var(--paper); transform: rotate(-2deg); }
.rtab-red { background: var(--red); color: var(--ink); transform: rotate(1.5deg); margin-left: 24px; }
.rtab-gold { background: var(--gold); color: var(--ink); transform: rotate(-1deg); margin-left: 8px; }
.rules-text { flex: 999 1 420px; min-width: 0; }
.rules-text p { font-size: 20px; max-width: 34em; }

/* ── final CTA (12.7): stadium night with a gold halftone light cone ── */
.final { position: relative; overflow: hidden; background: var(--night); color: var(--paper); padding-block: 80px 88px; }
.final .acc { color: var(--gold); }
.cone { position: absolute; right: 0; top: 0; width: min(460px, 42%); height: 100%; pointer-events: none; }
.final-in { position: relative; }
.final-h { font-size: clamp(48px, 6.4vw, 96px); line-height: .88; max-width: 9.6em; margin: 0 0 32px; overflow-wrap: normal; word-break: normal; hyphens: none; }
/* leave room for the light cone on the right as a share of the content width (not the screen, which squeezed it on wide screens) */
@media (min-width: 900px) { .final-h { max-width: min(10.5em, 66%); } }
.final .form-slot { max-width: 620px; }

/* ── footer (12.8) ── */
.site-foot { border-top: 6px solid var(--ink); padding-block: 22px 30px; font-size: 16px; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 20px; font-size: 15px; }
.foot-links a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }

/* ── inner pages ── */
.page-narrow { max-width: 880px; padding-block: 40px 72px; }
.story-flag { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 7px 0 6px; border-top: 6px solid var(--ink); border-bottom: 2px solid var(--ink); font-size: 14px; margin: 0 0 22px; }
.page-head { margin: 0 0 30px; }
.page-h { font-size: clamp(56px, 9vw, 112px); line-height: .88; margin: 0 0 14px; }
.page-p { font-size: 20px; max-width: 36em; }

/* an article, set like a newspaper sports page */
.story-head .kicker { margin: 0 0 12px; }
.story-h { font-size: clamp(46px, 7.4vw, 96px); line-height: .9; margin: 0 0 18px; }
.story-dek { font: 600 22px/1.4 var(--f-t); color: var(--muted); max-width: 34em; }
.prose { max-width: 680px; }
.prose p { margin: 0 0 18px; font-size: 19px; line-height: 1.62; }
.story .prose > p:first-child { font-size: 21px; }
.story .prose > p:first-child::first-letter { float: left; font: 900 88px/.78 var(--f-d); color: var(--red); margin: 6px 10px 0 0; text-shadow: -3px 3px 0 var(--ink); }
.prose h2 { font: 900 36px/.95 var(--f-d); text-transform: uppercase; margin: 34px 0 12px; padding-top: 10px; border-top: 2px solid var(--ink); }
.prose a { font-weight: 700; }
.prose .statbox { max-width: none; }
.watch { margin: 26px 0 8px !important; }
.bottomline { max-width: 680px; margin: 30px 0 20px; padding: 18px 22px 20px; background: var(--stock); border: 3px solid var(--ink); border-left-width: 12px; border-left-color: var(--gold); }
.bottomline-l { font-size: 14px; margin: 0 0 6px; }
.bottomline-t { font: 700 21px/1.4 var(--f-t); }
.sources { max-width: 680px; margin: 18px 0 0; padding-top: 12px; border-top: 2px solid var(--ink); font-style: italic; font-size: 16px; color: var(--muted); }
.sources-l { font-style: normal; color: var(--ink); margin-right: 6px; font-size: 14px; }
.sources .link { color: var(--ink); }

/* story rows: the archive and "more from the archive" */
.more { margin: 56px 0 0; }
.more .sec-h { font-size: clamp(36px, 5vw, 56px); }
.more-link { margin: 40px 0 0; }
.rows { border-top: 3px solid var(--ink); margin: 0 0 18px; }
.rows li { border-bottom: 2px solid var(--ink); }
.row { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; gap: 6px 20px; align-items: center; padding: 16px 0; text-decoration: none; }
.row:hover .row-t { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; }
.row-no { font-size: 17px; display: flex; flex-direction: column; gap: 2px; }
.row-date { color: var(--muted); font-size: 14px; }
.row-t { font-size: 32px; line-height: .95; display: block; }
.row-d { display: block; margin-top: 4px; font-size: 16px; color: var(--muted); }
.row-go { font: 900 28px var(--f-d); color: var(--ink); }

/* the sign-up band at the foot of inner pages */
.signbox { margin: 64px 0 0; padding: 30px 26px 30px; background: var(--stock); border: 3px solid var(--ink); box-shadow: -8px 8px 0 var(--red); scroll-margin-top: 24px; }
.signbox-h { font-size: clamp(40px, 5.4vw, 64px); line-height: .9; margin: 10px 0 20px; }

/* split-flap scoreboard tiles (404, empty today) */
.tiles { display: flex; gap: 8px; justify-content: center; }
.ftile { position: relative; display: grid; place-items: center; min-width: .74em; padding: .06em .1em; background: var(--night); color: var(--gold); border-radius: 8px; font-size: 112px; line-height: 1; font-weight: 800; box-shadow: -5px 5px 0 var(--red); }
.ftile::after { content: ''; position: absolute; left: 0; right: 0; top: calc(50% - 1.5px); height: 3px; background: var(--paper); opacity: .7; }

/* notices: check your inbox, confirmed, unsubscribed, bad link, 404 */
.notice { max-width: 760px; text-align: center; padding-block: 64px 88px; display: flex; flex-direction: column; align-items: center; }
.notice-art { margin: 0 0 22px; }
.notice .tab { margin: 0 0 18px; }
.notice-h { font-size: clamp(48px, 8vw, 96px); line-height: .9; margin: 0 0 16px; }
.notice-h:focus { outline: none; }
.notice-h .mr-ghost { left: 3px; }
.notice-p { font-size: 20px; max-width: 32em; margin: 0 0 16px; }
.notice-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; margin-top: 18px; font-size: 16px; }
.notice-links a { min-height: 44px; display: inline-flex; align-items: center; }

/* empty states */
.empty { text-align: center; padding: 32px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.empty .kicker { justify-content: center; margin-top: 10px; }
.empty-h { font-size: clamp(44px, 7vw, 80px); line-height: .9; }
.empty-t { font-size: 40px; line-height: .95; }

@media (max-width: 620px) {
  body { font-size: 17px; }
  .strip { font-size: 12px; }
  .logo-t { font-size: 32px; }
  .logo-i { width: 40px; height: 40px; }
  .nav { gap: 0 18px; font-size: 15px; }
  .nav .nav-sub { font-size: 17px; padding: 0 14px; }
  .hero { padding-block: 32px 48px; }
  .hero-p { font-size: 18px; }
  .btn { font-size: 26px; padding: 0 18px; }
  .ticket { transform: none; box-shadow: -7px 7px 0 var(--ink); margin-right: 0; margin-left: 7px; }
  .ticket-stub { width: 58px; }
  .statbox { padding: 18px 18px; }
  .statbox-hero { padding: 20px 18px; }
  .row { grid-template-columns: minmax(0, 1fr) auto; }
  .row-no { grid-column: 1 / -1; flex-direction: row; gap: 12px; }
  .row-t { font-size: 28px; }
  .story .prose > p:first-child::first-letter { font-size: 72px; }
  .signbox { padding: 24px 18px; box-shadow: -6px 6px 0 var(--red); margin-left: 6px; }
  .mock { box-shadow: -6px 6px 0 var(--red); margin-left: 6px; }
  .ftile { font-size: 84px; }
  .rtab-red { margin-left: 14px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }