@font-face {
  font-family: 'Starz Graffiti';
  src: url('assets/fonts/SedgwickAveDisplay-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #070a08;
  --paper: #070a08;
  --surface: #101610;
  --text: #f3f6ec;
  --lime: #ccff00;
  --grey: #adb8a6;
  --line: #2c3628;
  --radius: 3px;
  color: var(--text);
  color-scheme: dark;
}

body { background: var(--paper); }
button, input, select { color: var(--text); }
a, button { -webkit-tap-highlight-color: #ccff002b; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible {
  outline-color: var(--lime);
}
.site-header { background: #000; border-color: var(--line); }
.brand img { mix-blend-mode: lighten; }
.preview-bar { color: #070a08; background: var(--lime); }
.eyebrow.dark:before { background: var(--lime); }
.button { border-radius: 2px; }
.button.black { background: var(--lime); color: #070a08; }
.button.black:hover { background: #dcff55; }
.button.outline-dark { border-color: #627150; color: var(--text); }
.inline-link { border-color: #64754f; }
.inline-link:hover { color: var(--lime); }
.skip-link { color: #070a08; }

.hero { background: #000; min-height: 610px; }
.hero-copy { align-self: center; padding-top: 70px; padding-bottom: 70px; }
.hero-image { min-height: 610px; }
.hero-image > img { filter: saturate(.7) brightness(.78); }
.hero-image:after {
  background: linear-gradient(90deg,#000 0%,#00000018 36%,transparent 70%),
    linear-gradient(0deg,#0000006b,transparent 65%);
}
.graffiti {
  font-family: 'Starz Graffiti', cursive;
  font-weight: 400;
  text-transform: none;
  color: var(--lime);
  letter-spacing: -.025em;
  line-height: 1.1;
  transform: rotate(-5deg);
}
h1.graffiti {
  font-size: clamp(76px, 7.9vw, 126px);
  white-space: nowrap;
  margin: 3px 0 18px -9px;
}
.hero-copy > .hero-subtitle {
  color: #fff;
  font-size: 18px;
  font-weight: 850;
  letter-spacing: .07em;
  margin: 26px 0 21px;
}
.hero-copy > p:not(.hero-subtitle) { max-width: 340px; color: #b5c0ae; }
.hero-stamp { color: #aebba5; }
.ticker { background: var(--lime); color: #070a08; padding-top: 15px; padding-bottom: 15px; }
.section { padding-top: 74px; padding-bottom: 74px; }
.section-head p, .intro-copy p, .story-copy p,
.shop-hero p, .program-card p, .range-card p { color: var(--grey); }
.program-card, .sponsor-card, .gallery-card, .range-card,
.finder, .contact-option, .league-card, .policy-card {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
  box-shadow: none;
}
.program-card:hover, .sponsor-card:hover, .policy-card:hover {
  border-color: #86a729;
}
.program-card .photo, .story-image img, .club-image {
  filter: saturate(.8);
}
.story-block, .shop-hero { background: #0e160e; }
.story-copy .wordmark { font-family: 'Starz Graffiti', cursive; font-size: 63px; color: var(--lime); }
.sponsor-strip { border-color: var(--line); }
.sponsor-word { background: transparent; color: var(--text); border-color: var(--line); }
.sponsor-word:hover { background: #152113; }
.sponsor-mark { background: #0b100b; border-color: var(--line); }
.dark-logo { background: transparent; padding: 0; }
.logo-knockout { filter: grayscale(1) invert(1) contrast(1.6); mix-blend-mode: screen; }
.badge-white, .logo-white { filter: grayscale(1) brightness(0) invert(1); }
.logo-dark-flat { filter: grayscale(1) contrast(5); mix-blend-mode: screen; }
.programmes-overview { grid-template-columns: repeat(3,1fr); }
.sponsor-mark img { max-height: 78px; max-width: 200px; }
.dialog-logo.logo-knockout { background: transparent; }
.card-meta, .result-count { color: #a5b99a; }
.search input, .field select {
  background: #090e09;
  color: var(--text);
  border-color: #46513c;
  border-radius: 2px;
}
.search input::placeholder { color: #8d9c83; }
.chip { background: transparent; color: #bcc7b3; border-color: #3f4a36; }
.chip:hover { border-color: var(--lime); color: #fff; }
.chip[aria-pressed=true] { background: var(--lime); color: #070a08; border-color: var(--lime); }
.finder-result, .dialog-scope, .policy-status, .notice {
  background: #172210;
  border-color: var(--lime);
  color: var(--text);
}
.finder-result p, .policy-draft p, .policy-text ul { color: #b4c2a8; }
.pathway { border-color: #4b6036; }
.pathway-item:before { background: var(--lime); }
.club-values > div { border-color: var(--lime); }
.tag { color: var(--lime); border-color: #64832d; }
.status { color: var(--lime); }
.status:before { background: var(--lime); }
.range-card img { background: #0b120b; padding: 0; object-fit: cover; object-position: center 35%; height: 350px; }
.range-card div { border-top: 1px solid var(--line); }
.page-heading { background: #000; border-bottom: 1px solid var(--line); }
.page-heading { padding-top: 46px; padding-bottom: 42px; }
.page-heading h1 { font-size: clamp(44px,5.2vw,70px); }
.page-heading p { color: var(--grey); }
.matchday-banner { background: #111b0c; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pitch-lines { border-color: #6b862747; }
.pitch-lines:before, .pitch-lines:after { border-color: #6b862747; }
.cta-band { background: var(--lime); color: #070a08; }
.cta-band .button.black { background: #070a08; color: var(--lime); }
.cta-band p { color: #29330a; }
.site-footer { background: #000; border-top: 1px solid var(--line); }
.footer-links { border-color: var(--line); }
.footer-bottom { color: #87977b; }
.nav-dropdown > div { background: #11180c; border-color: #3a4a25; }
.nav-dropdown a:hover { background: #1c2912; }
.sqd-watermark { background: #000a; border-color: #66744c60; opacity: .44; }
dialog { background: #11180e; color: var(--text); border: 1px solid #40512a; }
dialog::backdrop { background: #000c; }
.dialog-close { background: #29351f; color: var(--text); }
.dialog-copy, .dialog-source { color: #b0bea4; }
.policy-number { color: #526a2d; }
.policy-help { border-color: var(--line); }
.affiliations, .affiliations.compact { background: #080d08; border-color: var(--line); }
.affiliation-card { border-color: var(--line); }
.affiliation-card h3 { color: #eef4e5; }
.affiliation-card img {
  width: 65px;
  height: 72px;
  object-fit: contain;
  flex-shrink: 0;
}
.affiliation-card small { color: #9bad8d; }
.affiliation-card p { color: var(--grey); }
.partner-arrow { color: var(--lime); }
.league-badge { border: 0; background: transparent; color: var(--lime); border-radius: 0; width: 73px; height: 73px; }
.league-badge img { width: 73px; height: 73px; object-fit: contain; }
.league-badge.wide, .league-badge.wide img { width: 105px; }
.league-status { background: #1a2710; color: #c3dd9d; }
.team-links { border-color: var(--line); }
.team-links li { border-color: var(--line); }
.team-links a:hover { color: var(--lime); }
.empty-state { border-color: #405132; }

@media(min-width:1600px) {
  .hero { min-height: 670px; }
  .hero-image { min-height: 670px; }
}
@media(max-width:1100px) {
  h1.graffiti { font-size: 91px; }
  .hero-copy { padding-top: 65px; padding-bottom: 65px; }
}
@media(max-width:850px) {
  .programmes-overview { grid-template-columns: repeat(2,1fr); }
  h1.graffiti { font-size: 80px; }
  .hero-copy > .hero-subtitle { font-size: 14px; }
  .affiliation-card { border-color: var(--line); }
}
@media(max-width:600px) {
  .hero { min-height: 0; }
  .hero-copy { padding: 0 6% 40px; }
  .hero-image { min-height: 270px; height: 270px; }
  .hero-image:after { background: linear-gradient(0deg,#000,transparent 58%); }
  h1.graffiti { font-size: clamp(67px,20vw,96px); margin: 0 0 20px; }
  .hero-copy > .hero-subtitle { font-size: 14px; margin: 15px 0 19px; }
  .hero-copy > p:not(.hero-subtitle) { font-size: 13px; line-height: 1.65; }
  .hero .eyebrow { margin-bottom: 19px; }
  .hero-stamp { margin-top: 24px; }
  .section { padding-top: 49px; padding-bottom: 49px; }
  .story-copy .wordmark { font-size: 52px; }
  .affiliations.compact { padding-top: 24px; padding-bottom: 24px; }
  .range-card img { height: 250px; }
  .sponsor-mark img { max-width: 130px; max-height: 60px; }
}
@media print {
  body:has(.policy-dialog[open]) { background: white; color: #111; }
  .policy-dialog[open] { background: white; color: #111; border: 0; }
  .policy-dialog .policy-text ul, .policy-dialog .dialog-copy,
  .policy-dialog .dialog-source { color: #333; }
  .policy-dialog .policy-status { color: #222; background: #eee; }
}