/*
Theme Name: Ooh Ah Canada
Theme URI: https://www.oohahcanada.com
Author: Halabuda Labs Ltd.
Author URI: https://halabudalabs.com
Description: Independent supporter-first editorial theme for Canadian national-team soccer.
Version: 1.11.3
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: ooh-ah-canada
*/

:root {
  --red: #e21c2a;
  --red-dark: #a90917;
  --ink: #101114;
  --ink-soft: #1b1d22;
  --paper: #f6f2e9;
  --white: #fffdf8;
  --grey: #a6a7ab;
  --line: rgba(255,255,255,.16);
  --max: 1280px;
  --display: "Arial Black", "Helvetica Neue", Impact, sans-serif;
  --sans: Inter, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .17em; }
img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.screen-reader-text:focus { clip: auto !important; width: auto; height: auto; margin: 0; padding: .75rem 1rem; background: #fff; color: #000; z-index: 10000; }
.site-shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(16,17,20,.96); color: white; border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.header-row { min-height: 78px; display: flex; align-items: center; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: 0 0 auto; }
.brand-mark { width: 46px; aspect-ratio: 1; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border-radius: 50%; }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.brand-words { display: grid; font-family: var(--display); font-size: .82rem; line-height: .86; letter-spacing: -.035em; text-transform: uppercase; }
.brand-words b:last-child { color: var(--red); }
.main-nav { margin-left: auto; }
.main-nav ul { display: flex; align-items: center; gap: clamp(16px,2.3vw,34px); list-style: none; padding: 0; margin: 0; }
.main-nav a { color: white; text-decoration: none; text-transform: uppercase; font-size: .72rem; font-weight: 850; letter-spacing: .13em; }
.main-nav a:hover, .main-nav a:focus-visible { color: #ff6571; }
.nav-toggle { display: none; margin-left: auto; border: 1px solid var(--line); background: transparent; color: white; padding: .65rem .8rem; font-weight: 800; }
.header-cta { background: var(--red); color: white; text-decoration: none; padding: .75rem 1rem; font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }

.ticker { background: var(--red); color: white; overflow: hidden; }
.ticker-track { display: flex; gap: 46px; width: max-content; padding: 9px 0; animation: ticker 28s linear infinite; font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .13em; }
.ticker-track span::after { content: "\2022"; margin-left: 46px; color: var(--ink); }
@keyframes ticker { to { transform: translateX(-50%); } }

.hero { min-height: min(820px, calc(100vh - 112px)); position: relative; display: grid; align-items: end; overflow: hidden; background: var(--ink); color: white; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,11,14,.97) 0%, rgba(10,11,14,.8) 35%, rgba(10,11,14,.05) 71%), linear-gradient(0deg, rgba(10,11,14,.96) 0%, transparent 45%), url("assets/images/supporters-hero-v2.png") center/cover no-repeat; transform: scale(1.012); }
.hero-inner { position: relative; z-index: 1; padding: clamp(80px,12vw,160px) 0 clamp(48px,7vw,92px); }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: #ff626e; font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .2em; }
.eyebrow::before { content: ""; width: 34px; height: 3px; background: currentColor; }
.hero h1 { max-width: 830px; margin: 0; font-family: var(--display); font-size: clamp(4rem,9.2vw,9rem); line-height: .79; text-transform: uppercase; letter-spacing: -.075em; text-wrap: balance; }
.hero h1 em { display: block; color: var(--red); font-style: normal; -webkit-text-stroke: 1px rgba(255,255,255,.15); }
.hero-copy { max-width: 590px; margin: 28px 0 0; color: #e2e2e4; font-size: clamp(1rem,1.45vw,1.28rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: .8rem 1.15rem; border: 2px solid var(--red); background: var(--red); color: white; text-decoration: none; font-size: .76rem; font-weight: 900; text-transform: uppercase; letter-spacing: .11em; transition: .2s ease; }
.button:hover, .button:focus-visible { background: white; border-color: white; color: var(--ink); transform: translateY(-2px); }
.button.secondary { background: transparent; border-color: rgba(255,255,255,.5); }
.button.secondary:hover { border-color: white; }

.next-match { margin-top: clamp(54px,8vw,100px); display: grid; grid-template-columns: 1.2fr 1fr; border-top: 1px solid var(--line); padding-top: 22px; max-width: 850px; }
.next-match-label { font-size: .68rem; font-weight: 900; color: #b6b7ba; letter-spacing: .17em; text-transform: uppercase; }
.next-match-fixture { display: flex; align-items: baseline; gap: 12px; margin-top: 7px; font-family: var(--display); font-size: clamp(1.4rem,3vw,2.35rem); text-transform: uppercase; }
.next-match-fixture b { color: var(--red); }
.countdown { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; }
.countdown span { display: grid; place-items: center; min-height: 64px; border-left: 1px solid var(--line); font-family: var(--display); font-size: 1.35rem; line-height: 1; }
.countdown small { display: block; margin-top: 5px; color: #9d9ea2; font-family: var(--sans); font-size: .55rem; letter-spacing: .12em; }

.section { padding: clamp(72px,9vw,120px) 0; }
.section-dark { background: var(--ink); color: white; }
.section-red { background: var(--red); color: white; }
.section-kicker { color: var(--red); margin: 0 0 10px; font-size: .68rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.section-red .section-kicker, .section-dark .section-kicker { color: #ff7b85; }
.section-title { max-width: 930px; margin: 0; font-family: var(--display); font-size: clamp(2.7rem,6vw,5.8rem); line-height: .88; letter-spacing: -.06em; text-transform: uppercase; text-wrap: balance; }
.section-intro { max-width: 710px; margin: 20px 0 0; color: #55565a; font-size: 1.08rem; }
.section-dark .section-intro { color: #bebfc2; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 42px; }
.text-link { flex: 0 0 auto; color: inherit; font-size: .74rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }

.match-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.match-card { position: relative; min-height: 300px; display: flex; flex-direction: column; padding: 25px; background: white; color: var(--ink); border-top: 6px solid var(--red); overflow: hidden; }
.match-card::after { content: ""; position: absolute; width: 160px; height: 160px; right: -80px; bottom: -85px; border: 30px solid rgba(226,28,42,.08); transform: rotate(45deg); }
.match-team { display: flex; justify-content: space-between; color: #6e6f73; font-size: .67rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.match-date { margin-top: 28px; font-family: var(--display); font-size: 1.65rem; line-height: 1; text-transform: uppercase; }
.match-opponent { margin-top: 7px; font-family: var(--display); font-size: clamp(2.3rem,4.5vw,4.1rem); line-height: .86; letter-spacing: -.06em; text-transform: uppercase; }
.match-opponent span { display: block; color: var(--red); }
.match-meta { margin-top: auto; padding-top: 25px; color: #5f6064; font-size: .82rem; }
.match-actions { display: flex; gap: 14px; margin-top: 15px; font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; position: relative; z-index: 1; }
.match-actions .match-calendar-button { padding: 6px 9px; border: 1px solid var(--red); background: var(--red); color: white; text-decoration: none; }
.match-actions .match-calendar-button:hover, .match-actions .match-calendar-button:focus-visible { background: var(--ink); border-color: var(--ink); }
.match-card-empty { background: #dcd6cc; }
.match-card-empty .match-opponent { color: #77787b; }

.team-split { display: grid; grid-template-columns: repeat(3,1fr); }
.team-panel { min-height: 500px; padding: clamp(38px,5vw,72px); display: flex; flex-direction: column; justify-content: end; position: relative; overflow: hidden; }
.team-panel:first-child { background: var(--red); color: white; }
.team-panel:nth-child(2) { background: var(--ink-soft); color: white; }
.team-panel:nth-child(3) { background: var(--red-dark); color: white; }
.team-panel::before { content: attr(data-ghost); position: absolute; top: -30px; right: -10px; font-family: var(--display); font-size: clamp(8rem,22vw,18rem); line-height: 1; color: rgba(255,255,255,.055); letter-spacing: -.12em; }
.team-panel h3 { position: relative; margin: 0; font-family: var(--display); font-size: clamp(3.3rem,6.2vw,6.8rem); line-height: .82; letter-spacing: -.06em; text-transform: uppercase; }
.team-panel p { position: relative; max-width: 500px; margin: 22px 0; color: rgba(255,255,255,.78); }
.team-panel a { position: relative; align-self: flex-start; }

.player-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.player-card { min-height: 270px; padding: 22px; background: #ebe5da; border-bottom: 5px solid transparent; display: flex; flex-direction: column; transition: .2s ease; }
.player-card:hover { transform: translateY(-4px); border-color: var(--red); }
.player-card { text-decoration: none; }
.player-no { color: var(--red); font-family: var(--display); font-size: 3.6rem; line-height: 1; }
.player-name { margin-top: auto; font-family: var(--display); font-size: 1.55rem; line-height: .95; letter-spacing: -.04em; text-transform: uppercase; }
.player-meta { margin-top: 10px; color: #67686b; font-size: .75rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.player-open { margin-top: 14px; color: var(--red-dark); font-size: .64rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.player-profile-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.player-card-rich { min-height: 520px; padding: 0 0 22px; overflow: hidden; background: #f7f3ec; }
.player-card-rich > :not(.player-card-photo) { margin-left: 20px; margin-right: 20px; }
.player-card-photo { position: relative; isolation: isolate; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 4.6; overflow: hidden; background: linear-gradient(145deg,#e21c2a 0 50%,#b71521 50%); }
.player-card-photo::after { content: ""; position: absolute; z-index: -1; width: 120%; height: 28%; bottom: -7%; background: white; transform: rotate(-7deg); opacity: .95; }
.player-card-photo img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .3s ease; }
.player-card-rich:hover .player-card-photo img { transform: scale(1.035); }
.photo-fallback { color: white; font-size: 4rem; filter: grayscale(1) brightness(4); }
.photo-name { position: absolute; z-index: 2; left: 12px; bottom: 10px; padding: 5px 8px; background: var(--ink); color: white; font-size: .55rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.player-card-badge { align-self: flex-start; margin-top: 18px; padding: 5px 8px; background: var(--red); color: white; font-size: .56rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.player-card-rich .player-name { margin-top: 18px; font-size: 1.75rem; }
.player-card-bio { margin-top: 14px; color: #616267; font-size: .79rem; line-height: 1.5; }
.player-card-rich .player-open { margin-top: auto; padding-top: 18px; }

.team-directory { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.team-directory-card { position: relative; min-height: 440px; padding: 34px; overflow: hidden; display: flex; flex-direction: column; background: var(--ink); color: white; text-decoration: none; }
.team-directory-card:nth-child(2) { background: var(--red); }
.team-directory-card:nth-child(3) { background: var(--red-dark); }
.team-directory-card::before { content: attr(data-ghost); position: absolute; top: -35px; right: -8px; color: rgba(255,255,255,.07); font-family: var(--display); font-size: 15rem; line-height: 1; }
.team-directory-card > * { position: relative; }
.team-directory-card > span { color: #ff9ba2; font-size: .66rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.team-directory-card h2 { margin: auto 0 14px; font-family: var(--display); font-size: clamp(2.8rem,5vw,5.5rem); line-height: .84; letter-spacing: -.06em; text-transform: uppercase; }
.team-directory-card p { color: rgba(255,255,255,.76); }
.team-directory-card b { margin-top: 18px; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }

.tracker-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.tracker-card { min-height: 240px; padding: 22px; border: 1px solid #d7d0c5; background: var(--white); display: flex; flex-direction: column; }
.tracker-top { display: flex; justify-content: space-between; color: #75767a; font-size: .65rem; font-weight: 900; letter-spacing: .12em; }
.tracker-top b { padding: 3px 7px; background: var(--ink); color: white; }
.tracker-card h3 { margin: 34px 0 4px; font-family: var(--display); font-size: 1.45rem; line-height: .95; text-transform: uppercase; }
.tracker-card > p { margin: 0; color: #77787b; font-size: .8rem; }
.tracker-result { margin-top: auto; padding-top: 20px; display: grid; border-top: 1px solid #ded7cd; }
.tracker-result strong { color: var(--red); font-family: var(--display); font-size: 1.05rem; text-transform: uppercase; }
.tracker-result span { color: #6d6e72; font-size: .72rem; }
.tracker-note, .commercial-note { max-width: 840px; margin: 20px 0 0; color: #717276; font-size: .76rem; }
.section-dark .commercial-note { color: #999a9e; }

.watch-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.watch-card { min-height: 310px; padding: 25px; display: flex; flex-direction: column; background: var(--white); border: 1px solid #d6cfc4; border-bottom: 6px solid var(--red); }
.watch-card-top { display: flex; justify-content: space-between; color: #747579; font-size: .65rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.watch-date { margin: 30px 0 7px; color: var(--red-dark); font-family: var(--display); font-size: 1.1rem; text-transform: uppercase; }
.watch-card h3 { margin: 0; font-family: var(--display); font-size: clamp(2rem,3.2vw,3.35rem); line-height: .88; letter-spacing: -.05em; text-transform: uppercase; }
.watch-channel { display: grid; gap: 2px; margin-top: auto; padding-top: 24px; border-top: 1px solid #ddd6cb; }
.watch-channel small { color: #747579; font-size: .62rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.watch-channel strong { font-size: .92rem; }
.watch-card > a { margin-top: 16px; color: var(--red-dark); font-size: .68rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }

.fan-lab { display: grid; grid-template-columns: .72fr 1.28fr; gap: 16px; }
.fan-poll, .lineup-builder { background: white; color: var(--ink); padding: clamp(26px,4vw,48px); }
.fan-module-label { color: var(--red); font-size: .67rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.fan-poll h3, .lineup-builder h3 { margin: 12px 0 6px; font-family: var(--display); font-size: clamp(2rem,3.6vw,3.6rem); line-height: .9; text-transform: uppercase; }
.fan-poll > p, .lineup-builder p { color: #6b6c70; font-size: .88rem; }
.poll-options { display: grid; gap: 8px; margin: 28px 0 15px; }
.poll-options button { position: relative; overflow: hidden; display: flex; justify-content: space-between; padding: 14px 15px; border: 1px solid #d4cdc2; background: #f4efe7; cursor: pointer; text-align: left; font-weight: 800; }
.poll-options button:hover, .poll-options button.is-selected { border-color: var(--red); box-shadow: inset 5px 0 var(--red); }
.poll-options button:disabled { cursor: default; }
.poll-options b { color: var(--red); }
.fan-poll > small { color: #77787b; }
.lineup-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; }
.lineup-team-switch { display: inline-flex; margin-top: 24px; padding: 4px; border-radius: 999px; background: #e9e3da; }
.lineup-team-switch button { min-width: 125px; padding: 10px 17px; border: 0; border-radius: 999px; background: transparent; color: #5f6064; cursor: pointer; font-size: .68rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.lineup-team-switch button.is-active { background: var(--red); color: white; box-shadow: 0 3px 10px rgba(153,0,13,.2); }
.lineup-tools { display: grid; grid-template-columns: 1fr 170px; gap: 10px; margin-top: 18px; }
.lineup-tools label { display: grid; gap: 5px; color: #696a6e; font-size: .6rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.lineup-tools input, .lineup-tools select { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid #cfc8bd; border-radius: 0; background: #faf7f2; color: var(--ink); font: inherit; font-size: .8rem; letter-spacing: 0; text-transform: none; }
.lineup-limits { margin: 10px 0 0 !important; color: #696a6e; font-size: .7rem !important; }
.lineup-pitch { position: relative; min-height: 420px; overflow: hidden; border: 3px solid rgba(255,255,255,.76); outline: 10px solid #1f7a46; outline-offset: -10px; background: repeating-linear-gradient(90deg,#237e49 0,#237e49 16.66%,#27894f 16.66%,#27894f 33.32%); }
.lineup-pitch::before { content: ""; position: absolute; inset: 50% 0 auto; height: 2px; background: rgba(255,255,255,.65); }
.pitch-circle { position: absolute; width: 90px; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.65); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.lineup-slots { position: relative; z-index: 1; min-height: 420px; padding: 14px 15px 18px; }
.lineup-count { width: max-content; margin: 0 auto 5px !important; padding: 5px 9px; border-radius: 999px; background: rgba(0,0,0,.62); color: white; font-size: .68rem !important; font-weight: 900; }
.lineup-formation { display: grid; grid-template-rows: repeat(4,1fr); min-height: 365px; }
.lineup-row { display: grid; align-content: center; gap: 4px; min-width: 0; }
.lineup-row-head { display: flex; justify-content: center; align-items: center; gap: 6px; color: rgba(255,255,255,.9); font-size: .52rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.lineup-row-head b { padding: 1px 4px; border-radius: 999px; background: rgba(0,0,0,.42); color: white; font-size: .5rem; }
.lineup-row-players { display: flex; justify-content: center; align-items: flex-start; gap: clamp(3px,1vw,8px); min-height: 55px; }
.lineup-empty { align-self: center; padding: 4px 8px; border: 1px dashed rgba(255,255,255,.58); border-radius: 999px; color: rgba(255,255,255,.82); font-size: .55rem; font-weight: 800; }
.lineup-chip { display: grid; justify-items: center; gap: 2px; width: clamp(48px,17%,72px); padding: 0; border: 0; background: transparent; color: white; cursor: pointer; text-align: center; font-size: .55rem; font-weight: 900; line-height: 1.05; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.lineup-chip > span:last-child { padding: 2px 4px; border-radius: 3px; background: rgba(0,0,0,.62); }
.lineup-chip-photo { position: relative; display: grid; place-items: center; width: 42px; aspect-ratio: 1; overflow: hidden; border: 2px solid white; border-radius: 50%; background: var(--ink); box-shadow: 0 3px 8px rgba(0,0,0,.35); text-shadow: none; }
.lineup-chip-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.lineup-chip:hover .lineup-chip-photo, .lineup-chip:focus-visible .lineup-chip-photo { outline: 3px solid var(--red); outline-offset: 2px; }
.lineup-pool-count { margin-bottom: 8px; color: #77787b; font-size: .65rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.lineup-roster { max-height: 390px; overflow: auto; display: grid; align-content: start; gap: 6px; padding-right: 4px; }
.lineup-roster button { display: flex; align-items: center; gap: 10px; border: 1px solid #d7d0c5; background: #f7f3ec; padding: 8px; cursor: pointer; text-align: left; }
.lineup-roster button:hover, .lineup-roster button.is-selected { border-color: var(--red); background: #fff; }
.lineup-roster button span { display: grid; font-weight: 800; }
.lineup-roster small { color: #7c7d80; font-size: .62rem; }
.lineup-roster button[hidden] { display: none; }
.lineup-thumb { position: relative; flex: 0 0 42px; display: grid !important; place-items: center; width: 42px; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: var(--ink); color: white; }
.lineup-thumb i { font-style: normal; }
.lineup-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.lineup-actions { display: flex; align-items: center; gap: 15px; margin-top: 20px; }
.lineup-copy-button { border-color: var(--ink); background: transparent; color: var(--ink); }
.lineup-copy-button:hover, .lineup-copy-button:focus-visible { border-color: var(--ink); background: var(--ink); color: white; }
.lineup-actions [data-lineup-status]:not(:empty) { flex-basis: 100%; color: var(--red-dark); font-size: .76rem; font-weight: 800; }
.lineup-source { margin: 16px 0 0 !important; padding-top: 13px; border-top: 1px solid #ddd6cb; font-size: .68rem !important; }
.text-button { border: 0; background: transparent; text-decoration: underline; cursor: pointer; }

.travel-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.travel-card { min-height: 310px; padding: 24px; border: 1px solid #d8d1c6; background: var(--white); color: var(--ink); display: flex; flex-direction: column; }
.travel-card > span { color: var(--red); font-size: .64rem; font-weight: 900; text-transform: uppercase; letter-spacing: .13em; }
.travel-card h3 { margin: 30px 0 10px; font-family: var(--display); font-size: 1.75rem; line-height: .95; text-transform: uppercase; }
.travel-card p { margin: 0; color: #68696c; font-size: .86rem; }
.travel-card a { margin-top: auto; color: var(--red-dark); font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.travel-tools-grid .travel-card { position: relative; isolation: isolate; min-height: 410px; overflow: hidden; padding-top: 165px; }
.travel-tools-grid .travel-card::before { content: ""; position: absolute; z-index: -2; inset: 0 0 auto; height: 150px; background-image: url("assets/images/home-travel-cards-v1.jpg"); background-size: 200% auto; background-repeat: no-repeat; transform: scale(1.015); transition: transform .35s ease; }
.travel-tools-grid .travel-card::after { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 165px; background: linear-gradient(180deg,rgba(255,253,248,0) 48%,var(--white) 100%); }
.travel-tools-grid .travel-card:nth-child(1)::before { background-position: 0 0; }
.travel-tools-grid .travel-card:nth-child(2)::before { background-position: 100% 0; }
.travel-tools-grid .travel-card:nth-child(3)::before { background-position: 0 100%; }
.travel-tools-grid .travel-card:nth-child(4)::before { background-position: 100% 100%; }
.travel-tools-grid .travel-card:hover::before { transform: scale(1.045); }
.travel-tools-grid .travel-card h3 { margin-top: 18px; }
.house-ad { margin-top: 16px; min-height: 130px; padding: 25px; background: #131419; color: white; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.house-ad small { color: #77787d; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }
.house-ad strong { display: block; margin-top: 8px; font-family: var(--display); font-size: clamp(1.3rem,2.5vw,2.5rem); text-transform: uppercase; line-height: .95; }
.ad-slot { margin: 24px 0; padding: 8px; text-align: center; }
.ad-slot > small { display: block; color: #85868a; font-size: .56rem; letter-spacing: .12em; text-transform: uppercase; }

.guide-grid { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); }
.guide-card { min-height: 290px; padding: 26px; border-right: 1px solid var(--line); display: flex; flex-direction: column; text-decoration: none; }
.guide-card:last-child { border-right: 0; }
.guide-card:hover { background: var(--red); }
.guide-index { font-family: var(--display); color: #74757a; font-size: .8rem; }
.guide-card h3 { margin: auto 0 10px; font-family: var(--display); font-size: 1.8rem; line-height: .95; text-transform: uppercase; }
.guide-card p { margin: 0; color: #b7b8bb; font-size: .88rem; }
.guide-card:hover p { color: white; }
.matchday-guide-grid .guide-card { position: relative; isolation: isolate; min-height: 360px; overflow: hidden; }
.matchday-guide-grid .guide-card::before { content: ""; position: absolute; z-index: -2; inset: 0; background-image: url("assets/images/home-travel-cards-v1.jpg"); background-size: 200% auto; background-repeat: no-repeat; opacity: .65; transform: scale(1.015); transition: opacity .3s ease, transform .45s ease; }
.matchday-guide-grid .guide-card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg,rgba(10,11,14,.99) 0%,rgba(10,11,14,.83) 44%,rgba(10,11,14,.28) 100%); transition: background .3s ease; }
.matchday-guide-grid .guide-card:nth-child(1)::before { background-position: 0 0; }
.matchday-guide-grid .guide-card:nth-child(2)::before { background-position: 100% 0; }
.matchday-guide-grid .guide-card:nth-child(3)::before { background-position: 100% 100%; }
.matchday-guide-grid .guide-card:nth-child(4)::before { background-image: url("assets/images/supporters-card-v1.jpg"); background-position: 74% center; background-size: cover; }
.matchday-guide-grid .guide-card:hover::before { opacity: .8; transform: scale(1.05); }
.matchday-guide-grid .guide-card:hover::after { background: linear-gradient(0deg,rgba(125,7,17,.98) 0%,rgba(37,12,16,.72) 58%,rgba(10,11,14,.18) 100%); }
.coverage-guide-grid .guide-card { position: relative; isolation: isolate; min-height: 360px; overflow: hidden; }
.coverage-guide-grid .guide-card::before { content: ""; position: absolute; z-index: -2; inset: 0; background-image: url("assets/images/team-coverage-cards-v1.jpg"); background-size: 200% auto; background-repeat: no-repeat; opacity: .65; transform: scale(1.015); transition: opacity .3s ease, transform .45s ease; }
.coverage-guide-grid .guide-card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg,rgba(10,11,14,.99) 0%,rgba(10,11,14,.84) 44%,rgba(10,11,14,.22) 100%); transition: background .3s ease; }
.coverage-guide-grid .guide-card:nth-child(1)::before { background-position: 0 0; }
.coverage-guide-grid .guide-card:nth-child(2)::before { background-position: 100% 0; }
.coverage-guide-grid .guide-card:nth-child(3)::before { background-position: 0 100%; }
.coverage-guide-grid .guide-card:nth-child(4)::before { background-position: 100% 100%; }
.coverage-guide-grid .guide-card:hover::before, .coverage-guide-grid .guide-card:focus-visible::before { opacity: .82; transform: scale(1.05); }
.coverage-guide-grid .guide-card:hover::after, .coverage-guide-grid .guide-card:focus-visible::after { background: linear-gradient(0deg,rgba(125,7,17,.98) 0%,rgba(37,12,16,.72) 58%,rgba(10,11,14,.15) 100%); }

.highlight-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; }
.highlight-card { position: relative; isolation: isolate; min-height: 340px; overflow: hidden; padding: 27px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); background: #15171c; text-decoration: none; transition: .2s ease; }
.highlight-card::before { content: ""; position: absolute; z-index: -2; inset: 0; background-position: center; background-size: cover; opacity: .72; transform: scale(1.015); transition: transform .45s ease, opacity .3s ease; }
.highlight-card::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg,rgba(12,13,16,.99) 0%,rgba(12,13,16,.88) 40%,rgba(12,13,16,.26) 100%),linear-gradient(90deg,rgba(12,13,16,.58),transparent 68%); }
.highlight-card:nth-child(1)::before { background-image: url("assets/images/home-highlights-match-v1.jpg"); background-position: 62% center; }
.highlight-card:nth-child(2)::before { background-image: url("assets/images/home-highlights-camp-v1.jpg"); background-position: 67% center; }
.highlight-card:nth-child(3)::before { background-image: url("assets/images/supporters-hero-v2.png"); background-position: 72% center; }
.highlight-card:hover::before, .highlight-card:focus-visible::before { opacity: .84; transform: scale(1.045); }
.highlight-card:hover, .highlight-card:focus-visible { border-color: var(--red); transform: translateY(-4px); }
.highlight-card-lead { background: #171216; }
.highlight-play { width: 62px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: white; font-size: 1rem; }
.highlight-index { color: #74757a; font-family: var(--display); }
.highlight-card small { color: #ff7b85; font-size: .64rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.highlight-card h3 { margin: 10px 0; font-family: var(--display); font-size: clamp(1.8rem,3.3vw,3.3rem); line-height: .9; text-transform: uppercase; }
.highlight-card:not(.highlight-card-lead) h3 { font-size: 2rem; }
.highlight-card p { margin: 0; color: #aaa; font-size: .85rem; }

.story-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 16px; }
.story-card { min-height: 360px; padding: 28px; background: white; display: flex; flex-direction: column; text-decoration: none; border-top: 1px solid #ccc5ba; }
.story-card:first-child { background: var(--ink); color: white; min-height: 480px; }
.story-tag { color: var(--red); font-size: .67rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.story-card h3 { margin: auto 0 15px; font-family: var(--display); font-size: clamp(1.7rem,3.3vw,3.25rem); line-height: .95; letter-spacing: -.04em; text-transform: uppercase; }
.story-card:not(:first-child) h3 { font-size: 1.75rem; }
.story-card p { margin: 0; color: #6b6c70; font-size: .86rem; }
.story-card:first-child p { color: #bfc0c3; }
.story-read { margin-top: 20px; color: var(--red); font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }

.newsletter { padding: clamp(65px,8vw,105px) 0; background: #ebe5da; }
.newsletter-inner { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: clamp(40px,8vw,110px); }
.newsletter h2 { max-width: 750px; margin: 0; font-family: var(--display); font-size: clamp(2.7rem,5.6vw,5.7rem); line-height: .86; letter-spacing: -.06em; text-transform: uppercase; }
.newsletter p { max-width: 560px; color: #66676b; }
.newsletter-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; position: relative; }
.newsletter-form input[type="email"] { min-width: 0; border: 2px solid var(--ink); background: white; padding: 14px 15px; }
.newsletter-form small { grid-column: 1 / -1; color: #6f7074; font-size: .72rem; }
.newsletter-honeypot { position: absolute; left: -9999px; }

.province-ribbon { overflow: hidden; border-top: 1px solid rgba(255,255,255,.32); border-bottom: 1px solid rgba(255,255,255,.32); margin-top: 44px; }
.province-ribbon div { display: flex; gap: 48px; width: max-content; padding: 20px 0; font-family: var(--display); font-size: clamp(1.4rem,3vw,2.7rem); text-transform: uppercase; animation: ticker 34s linear infinite; }
.province-ribbon span::after { content: "\2022"; margin-left: 48px; color: var(--ink); }

.site-footer { background: #090a0c; color: white; padding: 68px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 50px; }
.footer-rally { margin: 22px 0 0; max-width: 580px; font-family: var(--display); font-size: clamp(2.2rem,4.7vw,4.8rem); line-height: .86; letter-spacing: -.055em; text-transform: uppercase; }
.footer-heading { color: #88898d; font-size: .66rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.footer-links { list-style: none; padding: 0; margin: 16px 0 0; }
.footer-links li + li { margin-top: 8px; }
.footer-links a { color: #d7d7d8; text-decoration: none; }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; margin-top: 58px; padding-top: 22px; border-top: 1px solid var(--line); color: #7f8084; font-size: .72rem; }

.page-hero { background: var(--ink); color: white; padding: 130px 0 70px; }
.page-hero h1 { max-width: 950px; margin: 0; font-family: var(--display); font-size: clamp(3.5rem,8vw,8rem); line-height: .82; letter-spacing: -.07em; text-transform: uppercase; }
.chantbook-hero { position: relative; isolation: isolate; display: flex; align-items: end; min-height: clamp(610px,72vh,780px); overflow: hidden; padding: 150px 0 80px; background: #0c0d10; }
.chantbook-hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background: url("assets/images/chantbook-supporters-hero-v1.png") 68% center / cover no-repeat; transform: scale(1.01); }
.chantbook-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,rgba(10,11,14,.98) 0%,rgba(10,11,14,.9) 31%,rgba(10,11,14,.46) 58%,rgba(10,11,14,.16) 100%),linear-gradient(0deg,rgba(10,11,14,.78) 0%,transparent 48%); }
.chantbook-hero .site-shell { width: min(calc(100% - 48px),1180px); }
.chantbook-hero h1 { max-width: 760px; text-shadow: 0 3px 24px rgba(0,0,0,.35); }
.chantbook-hero .hero-copy { max-width: 650px; }
.youth-now { background: #f4f0e9; }
.youth-lead-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.youth-lead { min-height: 390px; padding: clamp(22px,3vw,34px); border: 1px solid #d4cec4; background: var(--white); display: flex; flex-direction: column; }
.youth-lead-red { border-color: var(--red); background: var(--red); color: white; }
.youth-lead-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.youth-lead-top span { font-family: var(--display); font-size: 1.45rem; letter-spacing: -.02em; }
.youth-lead-top b { padding: 5px 8px; background: var(--ink); color: white; font-size: .57rem; letter-spacing: .1em; text-transform: uppercase; }
.youth-lead-red .youth-lead-top b { background: white; color: var(--red-dark); }
.youth-date { margin: 30px 0 8px; color: #76777b; font-size: .65rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.youth-lead-red .youth-date { color: rgba(255,255,255,.72); }
.youth-lead h3 { max-width: 540px; margin: 0 0 13px; font-family: var(--display); font-size: clamp(2rem,4vw,3.6rem); line-height: .9; letter-spacing: -.04em; text-transform: uppercase; }
.youth-lead > p:not(.youth-date) { max-width: 650px; margin: 0; color: #626367; font-size: .88rem; }
.youth-lead-red > p:not(.youth-date) { color: rgba(255,255,255,.86); }
.youth-lead > a { margin-top: auto; padding-top: 20px; color: var(--red-dark); font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.youth-lead-red > a { color: white; }
.youth-scoreline, .youth-fixtures { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.youth-scoreline span, .youth-fixtures span { padding: 7px 9px; border: 1px solid #d6cfc5; background: #f4efe8; color: var(--ink); font-size: .65rem; font-weight: 900; }
.youth-lead-red .youth-scoreline span { border-color: rgba(255,255,255,.42); background: rgba(0,0,0,.16); color: white; }
.youth-fixtures b { margin-right: 5px; color: var(--red); }
.youth-big-stat { display: flex; align-items: end; gap: 12px; margin-top: 20px; }
.youth-big-stat strong { color: var(--red); font-family: var(--display); font-size: 3.5rem; line-height: .8; }
.youth-big-stat span { max-width: 120px; color: #696a6e; font-size: .66rem; font-weight: 900; line-height: 1.15; text-transform: uppercase; }
.youth-team-columns { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.youth-team-column { padding: clamp(22px,3vw,34px); border: 1px solid #393a3e; background: #18191d; }
.youth-team-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 25px; }
.youth-team-heading > span { display: grid; place-items: center; width: 58px; aspect-ratio: 1; background: var(--red); color: white; font-family: var(--display); font-size: 2rem; }
.youth-team-heading small { color: #8f9094; font-size: .6rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.youth-team-heading h3 { margin: 3px 0 0; color: white; font-family: var(--display); font-size: 2rem; line-height: .9; text-transform: uppercase; }
.youth-team-links { display: grid; }
.youth-team-links a { display: grid; grid-template-columns: 68px 1fr auto; align-items: center; gap: 12px; min-height: 70px; border-top: 1px solid #36373b; color: white; text-decoration: none; }
.youth-team-links a:last-child { border-bottom: 1px solid #36373b; }
.youth-team-links b { font-family: var(--display); font-size: 1.35rem; }
.youth-team-links span { color: #aaaab0; font-size: .75rem; }
.youth-team-links i { color: var(--red); font-style: normal; }
.youth-team-links a:hover span { color: white; }
.youth-player-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #d5cec4; border-left: 1px solid #d5cec4; }
.youth-player-grid article { min-height: 245px; padding: 25px; border-right: 1px solid #d5cec4; border-bottom: 1px solid #d5cec4; background: var(--white); }
.youth-player-grid article > span { color: var(--red); font-size: .6rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.youth-player-grid h3 { margin: 55px 0 10px; font-family: var(--display); font-size: 1.75rem; line-height: .9; text-transform: uppercase; }
.youth-player-grid p { margin: 0; color: #66676b; font-size: .8rem; }
.youth-pathway { background: #ebe5dc; }
.pathway-track { display: grid; grid-template-columns: repeat(4,1fr); border-top: 3px solid var(--red); }
.pathway-track article { min-height: 260px; padding: 24px; border-right: 1px solid #cfc7bb; background: rgba(255,255,255,.45); }
.pathway-track article:last-child { border-right: 0; }
.pathway-track b { color: var(--red); font-family: var(--display); font-size: 2rem; }
.pathway-track span { display: block; margin: 45px 0 10px; font-family: var(--display); font-size: 1.4rem; line-height: .9; text-transform: uppercase; }
.pathway-track p { margin: 0; color: #65666a; font-size: .78rem; }
.youth-resource-bar { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 16px; padding: 24px; background: var(--ink); color: white; }
.youth-resource-bar small { display: block; color: #898a8f; font-size: .6rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.youth-resource-bar strong { display: block; max-width: 590px; margin-top: 6px; font-family: var(--display); font-size: 1.4rem; line-height: 1; text-transform: uppercase; }
.youth-resource-bar > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }
.page-content { width: min(calc(100% - 40px), 900px); margin: 0 auto; padding: 70px 0 100px; }
.page-content h2, .entry-content h2 { margin: 2.3em 0 .5em; font-family: var(--display); font-size: 2.3rem; line-height: .95; text-transform: uppercase; }
.page-content h3, .entry-content h3 { margin: 2em 0 .4em; font-size: 1.35rem; }
.page-content a { color: var(--red-dark); }
.entry-content > p { color: #414247; font-size: 1.08rem; line-height: 1.78; }
.entry-content .story-deck { margin: 0 0 42px; color: var(--ink); font-size: clamp(1.35rem,2.4vw,1.8rem); font-weight: 650; line-height: 1.42; }
.story-fixture-strip { display: grid; grid-template-columns: repeat(3,1fr); margin: 48px 0; border: 1px solid var(--line); background: white; box-shadow: 8px 8px 0 rgba(16,17,20,.07); }
.story-fixture-strip-two { grid-template-columns: repeat(2,1fr); }
.story-fixture-strip > div { min-height: 150px; padding: 24px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.story-fixture-strip > div:last-child { border-right: 0; }
.story-fixture-strip small { color: var(--red); font-size: .66rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.story-fixture-strip strong { margin-top: auto; font-family: var(--display); font-size: 1.35rem; line-height: 1; text-transform: uppercase; }
.story-fixture-strip span { margin-top: 7px; color: #67686d; font-size: .78rem; line-height: 1.4; }
.story-scoreline { display: grid; grid-template-columns: repeat(5,1fr); margin: 48px 0; border: 1px solid var(--line); background: var(--ink); color: white; }
.story-scoreline span { min-height: 125px; padding: 20px 14px; border-right: 1px solid #38393e; color: #aeb0b5; font-size: .7rem; line-height: 1.35; text-align: center; }
.story-scoreline span:last-child { border-right: 0; }
.story-scoreline b { display: block; margin: 8px 0 12px; color: white; font-family: var(--display); font-size: 2rem; line-height: 1; }
.story-callout { display: grid; grid-template-columns: .72fr 1.6fr; gap: 26px; align-items: center; margin: 48px 0; padding: 30px; border-left: 7px solid var(--red); background: #e9e3d8; }
.story-callout strong { font-family: var(--display); font-size: 1.55rem; line-height: .95; text-transform: uppercase; }
.story-callout span { color: #4f5055; font-size: .92rem; line-height: 1.65; }
.story-sources { margin-top: 64px; padding: 28px 30px; border-top: 1px solid var(--line); background: white; }
.story-sources h3 { margin: 0 0 14px; font-family: var(--display); font-size: 1.2rem; text-transform: uppercase; }
.story-sources ul { margin: 0; padding-left: 20px; }
.story-sources li + li { margin-top: 9px; }
.story-sources a { font-size: .86rem; font-weight: 750; }
.post-list { display: grid; gap: 1px; background: #d5cec2; }
.post-row { background: var(--paper); padding: 28px; text-decoration: none; }
.post-row:hover { background: white; }

.profile-hero { position: relative; overflow: hidden; min-height: 620px; display: grid; align-items: end; padding: 130px 0 70px; background: var(--ink); color: white; }
.profile-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 78% 38%, rgba(226,28,42,.24), transparent 32%), linear-gradient(135deg, transparent 45%, rgba(255,255,255,.035)); }
.team-profile-hero::before { content: attr(data-ghost); position: absolute; right: 2vw; bottom: -12vw; color: rgba(255,255,255,.045); font-family: var(--display); font-size: min(62vw,780px); line-height: 1; }
.profile-hero-inner, .player-hero-grid { position: relative; z-index: 1; }
.profile-hero h1 { max-width: 1000px; margin: 0; font-family: var(--display); font-size: clamp(5rem,13vw,12rem); line-height: .78; letter-spacing: -.075em; text-transform: uppercase; }
.player-hero-grid { display: grid; grid-template-columns: 1.35fr .65fr; align-items: end; gap: 40px; }
.player-hero-copy { position: relative; z-index: 2; }
.profile-hero-photo { position: relative; z-index: 1; align-self: stretch; min-height: 510px; margin: 0; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg,var(--red),#970b16); }
.profile-hero-photo::after { content: ""; position: absolute; inset: auto -10% -18% -10%; height: 42%; background: white; transform: rotate(-8deg); opacity: .96; }
.profile-hero-photo > span { color: white; font-size: 7rem; filter: grayscale(1) brightness(3); }
.profile-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.profile-hero-photo b { position: absolute; z-index: 2; right: 18px; bottom: 6px; color: var(--red); font-family: var(--display); font-size: clamp(5rem,10vw,9rem); line-height: .8; }
.player-hero-number { justify-self: end; color: var(--red); font-family: var(--display); font-size: clamp(10rem,26vw,25rem); line-height: .7; letter-spacing: -.1em; }
.profile-facts { background: var(--red); color: white; }
.profile-facts-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.profile-facts-grid > div { min-height: 130px; padding: 24px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid rgba(255,255,255,.25); }
.profile-facts-grid > div:nth-child(4n), .profile-facts-grid > div:last-child { border-right: 0; }
.profile-facts-grid small { color: rgba(255,255,255,.7); font-size: .62rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.profile-facts-grid strong { margin-top: 7px; font-family: var(--display); font-size: 1.18rem; line-height: 1; text-transform: uppercase; }
.profile-layout { display: grid; grid-template-columns: 1.25fr .75fr; align-items: start; gap: clamp(45px,8vw,110px); }
.profile-copy { max-width: 760px; }
.profile-lede { margin: 0 0 -35px; color: var(--red); font-size: .67rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.profile-aside { padding: 34px; background: var(--ink); color: white; }
.profile-aside h2 { margin: 12px 0; font-family: var(--display); font-size: 2.4rem; line-height: .9; text-transform: uppercase; }
.profile-aside p { color: #b4b5b8; }
.profile-aside .button { margin-top: 18px; }
.player-id-card { min-height: 390px; display: flex; flex-direction: column; }
.player-id-card .player-no { font-size: 7rem; }
.player-id-card h2 { margin-top: auto; }
.player-id-card .button { align-self: flex-start; }
.photo-credit { margin-top: 14px; color: #8e8f94; font-size: .58rem; }
.profile-reviewed { margin-top: 8px; color: #b9bac0; font-size: .67rem; line-height: 1.45; }
.player-story-sections { display: grid; gap: 18px; margin-top: 32px; }
.player-story-block { position: relative; padding: clamp(26px,4vw,40px); border: 1px solid var(--line); background: white; box-shadow: 7px 7px 0 rgba(16,17,20,.06); }
.player-story-label { margin: 0 0 13px !important; color: var(--red) !important; font-size: .68rem !important; font-weight: 900; letter-spacing: .15em; line-height: 1.3 !important; text-transform: uppercase; }
.player-story-block h3 { max-width: 580px; margin: 0 0 15px; font-family: var(--display); font-size: clamp(1.8rem,3vw,2.7rem); line-height: .92; text-transform: uppercase; }
.player-story-block p { margin: 0; color: #52545a; font-size: 1.04rem; line-height: 1.75; }
.player-style-block { overflow: hidden; border-color: var(--ink); background: var(--ink); color: white; box-shadow: 7px 7px 0 var(--red); }
.player-style-block::after { content: "CANADA"; position: absolute; right: -14px; bottom: -25px; color: rgba(255,255,255,.035); font-family: var(--display); font-size: 6rem; line-height: 1; letter-spacing: -.05em; }
.player-style-block .player-story-label { color: #ff5965 !important; }
.player-style-block h3, .player-style-block p { position: relative; z-index: 1; }
.player-style-block p { color: #d6d7da; }
.profile-sources { margin-top: 24px; padding: clamp(24px,4vw,34px); border-left: 6px solid var(--red); background: #ece7dc; }
.profile-sources h3 { margin: 0; font-family: var(--display); font-size: 1.45rem; text-transform: uppercase; }
.profile-sources ul { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.profile-sources li { margin: 0; }
.profile-sources a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 850; text-decoration-color: rgba(226,28,42,.45); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.profile-sources a::after { content: "↗"; color: var(--red); text-decoration: none; }
.profile-sources a:hover { color: var(--red); }
.career-path { margin-top: 48px; padding-top: 34px; border-top: 1px solid var(--line); }
.career-path ol { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.career-path li { position: relative; padding: 12px 38px 12px 15px; border: 1px solid var(--line); background: white; font-weight: 800; }
.career-path li:not(:last-child)::after { content: "→"; position: absolute; right: 12px; color: var(--red); }
.supporter-feature { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(40px,8vw,100px); }
.chant-card { padding: clamp(30px,5vw,58px); background: white; color: var(--ink); display: grid; }
.chant-card small { color: var(--red); font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.chant-card strong { margin-top: 28px; font-family: var(--display); font-size: clamp(2.3rem,5vw,5rem); line-height: .88; text-transform: uppercase; }
.chant-card > span { color: var(--red); font-family: var(--display); font-size: clamp(1.7rem,3vw,3rem); text-transform: uppercase; }
.chant-card p { margin: 26px 0 0; color: #6b6c70; }
.chantbook-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.chant-sheet { min-height: 430px; padding: clamp(28px,4vw,48px); border-top: 7px solid var(--red); background: white; color: var(--ink); display: flex; flex-direction: column; }
.chant-sheet:nth-child(even) { background: var(--ink); color: white; }
.chant-sheet .chant-number { color: var(--red); font-family: var(--display); font-size: 1rem; letter-spacing: .12em; }
.chant-sheet h2 { margin: 20px 0 28px; font-family: var(--display); font-size: clamp(2.7rem,5vw,5.2rem); line-height: .82; letter-spacing: -.035em; text-transform: uppercase; }
.chant-lyrics { margin: 0 0 32px; font-size: clamp(1.25rem,2vw,1.65rem); font-weight: 850; line-height: 1.45; }
.chant-lyrics span { display: block; }
.chant-cue { color: #6b6c70; font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.chant-sheet:nth-child(even) .chant-cue { color: #b4b5b8; }
.chant-sheet .button { align-self: flex-start; margin-top: auto; }
.chant-links { display: flex; flex-wrap: wrap; gap: 12px; }
.chant-note { max-width: 760px; margin-top: 28px; color: #6b6c70; }
.chant-upload-panel { display: grid; grid-template-columns: .8fr 1.2fr; background: white; color: var(--ink); }
.chant-upload-intro { padding: clamp(30px,5vw,62px); background: var(--red); color: white; }
.chant-upload-intro .fan-module-label { color: #ffd5d8; }
.chant-upload-intro h2 { margin: 18px 0; font-family: var(--display); font-size: clamp(3rem,6vw,6.5rem); line-height: .82; letter-spacing: -.055em; text-transform: uppercase; }
.chant-upload-intro p { max-width: 500px; color: rgba(255,255,255,.84); font-size: 1rem; line-height: 1.6; }
.chant-upload-intro ol { margin: 34px 0 0; padding: 0; list-style: none; counter-reset: upload-step; }
.chant-upload-intro li { counter-increment: upload-step; display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.25); font-size: .9rem; font-weight: 850; text-transform: uppercase; }
.chant-upload-intro li::before { content: "0" counter(upload-step); font-family: var(--display); font-size: 1.5rem; }
.chant-upload-form { padding: clamp(30px,5vw,62px); display: grid; gap: 20px; }
.chant-upload-form label { display: grid; gap: 7px; }
.chant-upload-form label > span:first-child { font-size: .875rem; font-weight: 850; }
.chant-upload-form input[type="text"], .chant-upload-form input[type="email"], .chant-upload-form textarea { width: 100%; padding: 13px 14px; border: 1px solid #c9c2b7; border-radius: 0; background: #faf7f2; color: var(--ink); font: inherit; font-size: 1rem; }
.chant-upload-form input:focus, .chant-upload-form textarea:focus { outline: 3px solid rgba(226,28,42,.2); border-color: var(--red); }
.chant-upload-form textarea { resize: vertical; line-height: 1.5; }
.chant-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.chant-upload-form small { color: #68696d; font-size: .8rem; line-height: 1.45; }
.chant-file { padding: 18px; border: 2px dashed #bcb4a8; background: #f5f0e8; }
.chant-file input { font-size: .9rem; }
.chant-consent { grid-template-columns: 22px 1fr; align-items: start; }
.chant-consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--red); }
.chant-consent span { color: #55565a; font-size: .86rem !important; font-weight: 650 !important; line-height: 1.5; }
.chant-upload-form .button { justify-self: start; border: 0; cursor: pointer; }
.chant-privacy { margin: -4px 0 0; color: #77787c; font-size: .78rem; line-height: 1.5; }
.chant-privacy a { color: var(--red-dark); }
.chant-honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.chant-form-message { padding: 14px 16px; border-left: 5px solid var(--red); background: #f4eee7; font-size: .9rem; font-weight: 750; }
.chant-form-message.is-success { border-color: #1f7a46; background: #eaf5ee; }
.fan-chant-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.fan-chant-card { overflow: hidden; background: white; border-bottom: 6px solid var(--red); }
.fan-chant-video { display: grid; place-items: center; aspect-ratio: 16 / 9; background: #08090b; }
.fan-chant-video video { width: 100%; height: 100%; object-fit: contain; }
.fan-chant-copy { padding: 22px; }
.fan-chant-copy > span { color: var(--red); font-size: .75rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.fan-chant-copy h3, .fan-chant-empty h3 { margin: 16px 0 10px; font-family: var(--display); font-size: 1.8rem; line-height: .92; text-transform: uppercase; }
.fan-chant-copy p { color: #5d5e62; font-size: .9rem; line-height: 1.55; white-space: pre-line; }
.fan-chant-copy small { color: #77787c; font-size: .8rem; }
.fan-chant-empty { min-height: 260px; padding: 45px; display: grid; place-items: center; align-content: center; border: 2px dashed #c9c2b8; background: rgba(255,255,255,.45); text-align: center; }
.fan-chant-empty > span { font-size: 3rem; }
.fan-chant-empty p { margin: 0; color: #68696d; }

@media (max-width: 980px) {
  .main-nav { display: none; position: absolute; top: 78px; left: 0; right: 0; margin: 0; padding: 20px; background: var(--ink); border-top: 1px solid var(--line); }
  .main-nav.is-open { display: block; }
  .main-nav ul { align-items: stretch; flex-direction: column; }
  .main-nav a { display: block; padding: 8px 0; }
  .nav-toggle { display: block; }
  .header-cta { display: none; }
  .match-grid { grid-template-columns: 1fr 1fr; }
  .player-grid, .guide-grid, .tracker-grid, .travel-grid, .watch-grid { grid-template-columns: 1fr 1fr; }
  .team-split { grid-template-columns: 1fr 1fr; }
  .team-panel:nth-child(3) { grid-column: 1 / -1; }
  .highlight-grid { grid-template-columns: 1fr 1fr; }
  .highlight-card-lead { grid-column: 1 / -1; }
  .fan-lab { grid-template-columns: 1fr; }
  .guide-card:nth-child(2) { border-right: 0; }
  .guide-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .story-grid { grid-template-columns: 1fr 1fr; }
  .story-card:first-child { grid-column: 1 / -1; }
  .team-directory { grid-template-columns: 1fr 1fr; }
  .team-directory-card:last-child { grid-column: 1 / -1; }
  .profile-facts-grid { grid-template-columns: 1fr 1fr; }
  .profile-facts-grid > div:nth-child(2n) { border-right: 0; }
  .fan-chant-grid { grid-template-columns: 1fr 1fr; }
  .pathway-track { grid-template-columns: repeat(2,1fr); }
  .pathway-track article:nth-child(2) { border-right: 0; }
  .pathway-track article:nth-child(-n+2) { border-bottom: 1px solid #cfc7bb; }
}

@media (max-width: 680px) {
  .site-shell { width: min(calc(100% - 26px), var(--max)); }
  .header-row { min-height: 68px; }
  .main-nav { top: 68px; }
  .brand-mark { width: 36px; }
  .hero { min-height: 780px; }
  .hero::before { background: linear-gradient(0deg, rgba(10,11,14,.98) 0%, rgba(10,11,14,.55) 75%), url("assets/images/supporters-hero-v2.png") 67% center/cover no-repeat; opacity: .78; }
  .hero h1 { font-size: clamp(3.65rem,18vw,5.4rem); }
  .chantbook-hero { min-height: 680px; padding: 135px 0 55px; }
  .chantbook-hero::before { background-position: 63% center; }
  .chantbook-hero::after { background: linear-gradient(0deg,rgba(10,11,14,.98) 0%,rgba(10,11,14,.82) 48%,rgba(10,11,14,.35) 100%); }
  .chantbook-hero .site-shell { width: min(calc(100% - 26px),1180px); }
  .next-match { grid-template-columns: 1fr; gap: 24px; }
  .countdown { max-width: 360px; }
  .countdown span:first-child { border-left: 0; }
  .section-head { display: block; }
  .section-head .text-link { display: inline-block; margin-top: 20px; }
  .match-grid, .team-split, .team-directory, .player-grid, .guide-grid, .story-grid, .footer-grid, .tracker-grid, .travel-grid, .watch-grid, .highlight-grid, .lineup-layout, .newsletter-inner, .profile-layout, .player-hero-grid, .supporter-feature, .chantbook-grid, .youth-lead-grid, .youth-team-columns, .youth-player-grid, .pathway-track { grid-template-columns: 1fr; }
  .chant-upload-panel, .chant-form-row, .fan-chant-grid { grid-template-columns: 1fr; }
  .team-directory-card:last-child { grid-column: auto; }
  .player-hero-number { justify-self: start; font-size: 9rem; }
  .profile-hero-photo { min-height: 430px; }
  .lineup-tools { grid-template-columns: 1fr; }
  .lineup-team-switch { display: flex; width: 100%; }
  .youth-player-grid article { min-height: 220px; }
  .pathway-track article, .pathway-track article:nth-child(2) { min-height: 220px; border-right: 0; border-bottom: 1px solid #cfc7bb; }
  .pathway-track article:last-child { border-bottom: 0; }
  .youth-resource-bar { align-items: flex-start; flex-direction: column; }
  .lineup-team-switch button { flex: 1; min-width: 0; padding-inline: 10px; }
  .lineup-actions { align-items: flex-start; flex-wrap: wrap; }
  .profile-hero { min-height: 600px; }
  .profile-facts-grid { grid-template-columns: 1fr; }
  .profile-facts-grid > div { min-height: 105px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.25); }
  .profile-facts-grid > div:last-child { border-bottom: 0; }
  .team-panel:nth-child(3), .highlight-card-lead { grid-column: auto; }
  .lineup-pitch, .lineup-slots { min-height: 370px; }
  .house-ad { align-items: flex-start; flex-direction: column; }
  .match-card { min-height: 270px; }
  .team-panel { min-height: 410px; padding: 38px 22px; }
  .guide-card { border-right: 0; border-bottom: 1px solid var(--line); min-height: 230px; }
  .guide-card:last-child { border-bottom: 0; }
  .story-card:first-child { grid-column: auto; min-height: 390px; }
  .story-fixture-strip, .story-fixture-strip-two, .story-scoreline { grid-template-columns: 1fr; }
  .story-fixture-strip > div, .story-scoreline span { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .story-fixture-strip > div:last-child, .story-scoreline span:last-child { border-bottom: 0; }
  .story-scoreline span { display: grid; grid-template-columns: 80px 1fr; align-items: center; text-align: left; }
  .story-scoreline b { margin: 0; }
  .story-callout { grid-template-columns: 1fr; }
  .footer-bottom { display: block; }
  .footer-bottom span { display: block; margin-top: 8px; }
  .newsletter-form { grid-template-columns: 1fr; }
  .newsletter-form small { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}