@layer components {
	/* ---- Sport hero ---- */
	.sport-hero { position: relative; isolation: isolate; background: var(--black-hero); color: var(--white-text); overflow: hidden; width: 100%; max-width: 100%; aspect-ratio: var(--ratio-hero-mobile); min-height: 560px; max-height: 860px; display: flex; align-items: flex-end; border-bottom: var(--nav-rule) solid var(--red); }
	.sport-hero.no-image { aspect-ratio: auto; min-height: 420px; }
	.sport-hero.no-image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 20% 100%, rgba(206,26,39,.35), transparent 55%); }
	.sport-hero__media, .sport-hero__media__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -2; }
	.sport-hero__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,8,10,.2) 0%, rgba(8,8,10,.05) 30%, rgba(8,8,10,.6) 62%, rgba(8,8,10,.95) 100%); }
	.sport-hero__inner { position: relative; flex: none; display: flex; flex-direction: column; gap: var(--sp-6); padding-block: var(--sp-7) var(--sp-6); }
	.sport-hero__kicker { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-label); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--red); }
	.sport-hero__sep { width: 24px; height: 2px; background: var(--red); }
	.sport-hero__name { margin-top: var(--sp-3); font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(4rem, 11vw, 9.5rem); line-height: 0.88; letter-spacing: -0.015em; text-transform: uppercase; text-shadow: 0 2px 32px rgba(0,0,0,.4); }
	.sport-hero__tagline { margin-top: var(--sp-4); max-width: 34rem; font-family: var(--font-serif); font-size: clamp(1.0625rem, 1.5vw, 1.375rem); line-height: 1.45; color: rgba(255,255,255,.85); }
	.sport-hero__facts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-5) var(--sp-7); }
	.fact { display: flex; flex-direction: column; }
	.fact__value { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(3rem, 5vw, 4.5rem); line-height: 0.9; letter-spacing: var(--ls-tight); }
	.fact__value--sm { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: var(--fw-extra); text-transform: uppercase; line-height: 1; }
	.fact__label { margin-top: 8px; font-size: var(--fs-micro); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--on-dark-muted); }
	.fact__sub { margin-top: 6px; font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--white-text); }
	.fact--record { padding-left: var(--sp-4); border-left: var(--bw-rule) solid var(--red); }
	.sport-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); width: 100%; }

	.sport-intro { background: var(--black); color: var(--white-text); padding-block: var(--sp-6); }
	.sport-intro__text { max-width: 60ch; font-family: var(--font-serif); font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.6; color: rgba(255,255,255,.8); }

	/* ---- Next game / latest result spotlight ---- */
	.spotlight { padding-block: var(--sp-6) 0; }
	.spotlight__grid { display: grid; gap: var(--sp-4); }
	.game-spot { display: flex; flex-direction: column; background: var(--white-card); border: var(--bw-hair) solid var(--gray-line); box-shadow: var(--shadow-card); color: var(--gray-ink); }
	.game-spot--primary { background: var(--black-deep); color: var(--white-text); border-color: var(--black-deep); }
	.game-spot__label { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 10px var(--sp-5); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--red); border-bottom: var(--bw-hair) solid var(--gray-line); }
	.game-spot--primary .game-spot__label { border-bottom-color: var(--on-dark-line); }
	.game-spot__flag { font-weight: var(--fw-semi); letter-spacing: var(--ls-ui); color: var(--gray-meta); }
	.game-spot--primary .game-spot__flag { color: var(--on-dark-muted); }
	.game-spot__main { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: var(--sp-5); padding: var(--sp-5); flex: 1; }
	.game-spot__logo { width: 84px; height: 84px; display: grid; place-items: center; }
	.game-spot__logo-img { width: 100%; height: 100%; object-fit: contain; }
	.game-spot__logo-empty { width: 64px; height: 64px; border: var(--bw-hair) solid var(--gray-line); }
	.game-spot__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
	.game-spot__date { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); }
	.game-spot__opponent { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 0.95; letter-spacing: var(--ls-tight); text-transform: uppercase; }
	.game-spot__opponent em { font-weight: var(--fw-medium); text-transform: lowercase; color: var(--gray-meta); font-size: 0.6em; vertical-align: 0.15em; }
	.game-spot--primary .game-spot__opponent em { color: var(--on-dark-muted); }
	.game-spot__meta { font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--gray-meta); }
	.game-spot--primary .game-spot__meta { color: var(--on-dark-muted); }
	.game-spot__score { display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(2.25rem, 3.5vw, 3rem); line-height: 1; letter-spacing: var(--ls-tight); color: var(--gray-meta); }
	.game-spot__score b { font-weight: inherit; }
	.game-spot__score b.is-corbin { color: var(--gray-ink); }
	.game-spot__score i { width: 3px; height: 0.55em; background: var(--red); }
	.game-spot__result { margin-left: 8px; font-size: 0.5em; font-weight: var(--fw-black); letter-spacing: var(--ls-ui); color: var(--gray-meta); }
	.game-spot__result--w { color: var(--red); }
	.game-spot__foot { display: inline-flex; align-items: center; gap: 6px; padding: 10px var(--sp-5); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--red); border-top: var(--bw-hair) solid var(--gray-line); }
	.game-spot--primary .game-spot__foot { border-top-color: var(--on-dark-line); }
	.game-spot__foot .icon { width: 1.2em; height: 1.2em; }

	/* ---- Sections ---- */
	.sport-news { padding-block: var(--sp-6) var(--sp-7); }
	.sport-schedule { padding-block: var(--sp-7); }
	.sport-schedule__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); }
	.sport-schedule__title { margin-top: var(--sp-2); font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-h2); line-height: var(--lh-display); letter-spacing: var(--ls-tight); text-transform: uppercase; }
	.schedule__list--dark .game-row { background: var(--black-panel); border-color: var(--on-dark-line); box-shadow: none; }
	.schedule__list--dark .game-row__link { color: var(--white-text); }
	.schedule__list--dark .game-row__link:hover { background: #1c1d1d; }
	.schedule__list--dark .game-row__date { border-right-color: var(--on-dark-line); }
	.schedule__list--dark .game-row__dow, .schedule__list--dark .game-row__sub, .schedule__list--dark .game-row__when, .schedule__list--dark .game-row__arrow, .schedule__list--dark .game-row__result--l { color: var(--on-dark-muted); }
	.schedule__list--dark .game-row__opponent em { color: var(--on-dark-muted); }
	.schedule__list--dark .tag { background: rgba(255,255,255,.1); color: var(--white-text); }
	.schedule__list--dark .game-row__dot { color: var(--on-dark-faint); }

	.team { padding-block: var(--sp-7); }
	.team__grid { display: grid; gap: var(--sp-4); }
	.team-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-6); background: var(--white-card); border: var(--bw-hair) solid var(--gray-line); box-shadow: var(--shadow-card); min-height: 240px; }
	.team-card--roster { background: var(--red-deep); color: #fff; border-color: var(--red-deep); }
	.team-card__icon { width: 40px; height: 40px; stroke-width: 1.75; margin-bottom: var(--sp-2); }
	.team-card__label { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--red); }
	.team-card--roster .team-card__label { color: rgba(255,255,255,.75); }
	.team-card__role { font-size: var(--fs-micro); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gray-meta); margin-top: var(--sp-2); }
	.team-card__title { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-h2); line-height: var(--lh-display); letter-spacing: var(--ls-tight); text-transform: uppercase; }
	.team-card__title--name { font-size: clamp(2rem, 3vw, 2.75rem); }
	.team-card__text { font-family: var(--font-serif); font-size: var(--fs-body); line-height: var(--lh-serif); color: rgba(255,255,255,.8); max-width: 34rem; }
	.team-card--roster .btn { margin-top: var(--sp-3); background: var(--white-text); border-color: var(--white-text); color: var(--red-deep); }
	.team-card__staff { margin-top: var(--sp-3); display: grid; gap: 8px; width: 100%; }
	.team-card__staff li { display: flex; justify-content: space-between; gap: var(--sp-3); padding-bottom: 8px; border-bottom: var(--bw-hair) solid var(--gray-line); font-family: var(--font-display); }
	.team-card__staff strong { font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.02em; }
	.team-card__staff span { font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--gray-meta); text-align: right; }

	.sport-photos { padding-block: 0 var(--sp-7); }

	.history-cta { position: relative; background: var(--black); color: var(--white-text); border-top: var(--nav-rule) solid var(--red); }
	.history-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 90% 50%, rgba(206,26,39,.28), transparent 50%); pointer-events: none; }
	.history-cta__inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-5) var(--sp-7); padding-block: var(--sp-8); }
	.history-cta__title { margin-top: var(--sp-2); font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(2.25rem, 4.2vw, 3.75rem); line-height: var(--lh-display); letter-spacing: var(--ls-tight); text-transform: uppercase; max-width: 16ch; }
	.history-cta__text { margin-top: var(--sp-3); max-width: 44rem; font-family: var(--font-serif); font-size: var(--fs-body); line-height: var(--lh-serif); color: var(--on-dark-muted); }

	@media (min-width: 768px) {
		.sport-hero { aspect-ratio: var(--ratio-hero); min-height: 560px; }
		.sport-hero__overlay { background: linear-gradient(90deg, rgba(8,8,10,.55) 0%, rgba(8,8,10,.15) 50%, rgba(8,8,10,0) 100%), linear-gradient(180deg, rgba(8,8,10,.1) 0%, rgba(8,8,10,0) 40%, rgba(8,8,10,.85) 100%); }
		.sport-hero__inner { flex-direction: row; align-items: flex-end; justify-content: space-between; padding-block: var(--sp-8) var(--sp-7); }
		.sport-hero__facts { justify-content: flex-end; }
		.sport-hero__actions { margin-left: 0; width: 100%; justify-content: flex-end; }
		.spotlight__grid { grid-template-columns: 1fr 1fr; }
		.team__grid { grid-template-columns: 1fr 1fr; }
	}
	@media (min-width: 1024px) {
		.sport-hero__facts { max-width: 46%; }
		.team__grid { grid-template-columns: 5fr 7fr; }
	}
}

@layer components {
	/* ---- Teams page ---- */
	.teams { padding-block: var(--sp-6) var(--sp-9); }
	.team-grid { display: grid; gap: var(--sp-4); }
	.team { display: flex; flex-direction: column; padding: 0; background: #fff; border: var(--bw-hair) solid var(--gray-line); box-shadow: var(--shadow-card); }
	.team__media { position: relative; display: block; aspect-ratio: var(--ratio-card); overflow: hidden; background: var(--black-panel); isolation: isolate; }
	.team__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease); }
	.team:hover .team__img { transform: scale(1.03); }
	.team__img--empty { display: grid; place-items: center; background: linear-gradient(160deg, #3a3f46, #1c1f23); }
	.team__img--empty span { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 5rem; color: rgba(255,255,255,.12); }
	.team__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8,8,10,.8)); z-index: 1; }
	.team__name { position: absolute; left: var(--sp-4); bottom: var(--sp-3); z-index: 2; font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 0.95; letter-spacing: var(--ls-tight); text-transform: uppercase; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.4); }
	.team__body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--pad-card); }
	.team__facts { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); }
	.team__fact { display: flex; flex-direction: column; gap: 2px; }
	.team__fact b { font-family: var(--font-display); font-weight: var(--fw-black); font-size: 1.5rem; line-height: 1; letter-spacing: var(--ls-tight); text-transform: uppercase; }
	.team__fact b a { color: inherit; }
	.team__fact span { font-size: var(--fs-micro); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gray-meta); }
	.team__next { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4); background: var(--gray-section); color: var(--gray-ink); }
	.team__next-line { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: 1.0625rem; text-transform: uppercase; letter-spacing: 0.01em; }
	.team__next-meta { font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-ui); text-transform: uppercase; color: var(--gray-meta); }
	.team__next--empty .team__next-line { color: var(--gray-meta); }
	.team__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
	@media (min-width: 640px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
	@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }
}