:root {
    --bg: #0b0c10;
    --surface: #15171d;
    --surface-light: #20232b;
    --ink: #f3f1ed;
    --muted: #98999c;
    --gold: #e9bd55;
    --red: #a82035;
    --line: rgba(243, 241, 237, .14);
    --font: Inter, Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; scroll-behavior: smooth; overflow-y: auto; }
body { min-height: 100%; overflow-y: auto; background: var(--bg); color: var(--muted); font-family: var(--font); line-height: 1.5; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.content-fade, main section, footer { transition: opacity .35s ease-out .02s, transform .35s ease-out .02s; will-change: opacity, transform; }
.content-fade { opacity: 0; transform: translateY(30px); pointer-events: none; }
.content-fade.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.content-fade:not(.active) { transition: opacity .35s ease-in, transform .35s ease-in; }
.form-notification { position: fixed; top: 1.25rem; left: 50%; z-index: 200; transform: translateX(-50%); padding: .8rem 1.2rem; color: var(--ink); background: var(--surface-light); border: 1px solid var(--gold); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); font-size: .78rem; font-weight: 700; letter-spacing: .04em; }
.form-notification.success { border-color: var(--gold); }
.form-notification.error { border-color: var(--red); }

.navbar { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 1.1rem 5vw; background: rgba(11, 12, 16, .9); backdrop-filter: blur(16px); position: fixed; top: 0; width: 100%; z-index: 100; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; }
.nav-logo { display: block; height: 60px; width: auto; object-fit: contain; }
.brand small { color: var(--muted); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.nav-links { display: flex; gap: 1.45rem; align-items: center; font-size: .9rem; }
.nav-links a { color: var(--ink); text-decoration: none; font-weight: 600; transition: color .2s; }
.nav-links a:hover, .text-link:hover { color: var(--gold); }
.season-selector { color: var(--muted); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.season-selector select { margin-left: .4rem; border: 0; color: var(--gold); background: transparent; font: inherit; font-weight: 700; }
.btn-primary { display: inline-flex; align-items: center; gap: 1rem; background: var(--red); color: var(--ink); padding: .78rem 1.15rem; border: 0; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .2s, transform .2s; }
.btn-primary:hover { background: #c62b43; transform: translateY(-2px); }

.hero-section { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 2rem; padding: 8rem 5vw 4rem; overflow: hidden; position: relative; text-align: left; background: transparent; }
.hero-heading, .hero-intro, .hero-stats { position: relative; z-index: 10; }
.hero-heading, .hero-intro { max-width: 600px; }
.eyebrow, .card-kicker { color: var(--gold); font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow span { display: inline-block; width: 2rem; height: 1px; margin: 0 .7rem .2rem 0; background: var(--gold); }
.hero-heading h1, h2, h3 { color: var(--ink); line-height: 1.02; letter-spacing: -.04em; }
.hero-heading h1 { font-size: clamp(4rem, 8vw, 7.5rem); margin: 1.2rem 0; }
h1 em, h2 em { color: var(--gold); font-style: normal; }
.hero-copy { max-width: 420px; font-size: 1rem; }
.hero-actions { display: flex; align-items: center; justify-content: flex-start; gap: 1.8rem; margin-top: 2rem; }
.text-link { color: var(--ink); text-decoration: none; font-size: .78rem; font-weight: 700; }
.hero-stats { display: flex; flex-direction: column; justify-content: center; gap: 2rem; margin: 1rem 0 0; }
.hero-stats div { border-left: 1px solid var(--line); padding-left: 1rem; }
.hero-stats dt { color: var(--ink); font-size: 1.8rem; font-weight: 800; }
.hero-stats dd { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.spline-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; display: flex; justify-content: center; align-items: center; }
spline-viewer { width: 100%; height: 100%; pointer-events: none; }
.scroll-cue { position: absolute; bottom: 2rem; right: 5vw; color: var(--muted); font-size: .65rem; letter-spacing: .13em; text-transform: uppercase; writing-mode: vertical-rl; }
.scroll-cue span { color: var(--gold); font-size: 1.2rem; }
.scroll-indicator { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 100; font-size: 1.8rem; color: var(--gold); opacity: 1; transition: opacity .5s ease; animation: bounce 2s infinite; }
@keyframes bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 10px); } }
.score-strip { display: flex; align-items: center; gap: 1.1rem; min-height: 4.5rem; padding: 0 5vw; background: transparent; color: var(--ink); font-size: .75rem; }
.live-dot { text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.live-dot:before { content: ''; display: inline-block; width: .45rem; height: .45rem; margin-right: .5rem; background: var(--gold); border-radius: 50%; }
.score-match { flex: 1; }.score-match b { margin-left: .5rem; font-size: 1rem; }.score-match i { margin: 0 .7rem; opacity: .65; }.score-strip a { font-weight: 700; text-decoration: none; }

main { width: 100vw; margin-left: 0; position: relative; z-index: 10; background: transparent; }

.container { width: 100vw; max-width: none; margin-left: 0; position: relative; z-index: 10; padding: 7rem 5vw; background: transparent; }
section, footer { position: relative; z-index: 20; background: transparent; margin-bottom: 0; height: auto; visibility: visible; }
main section, .container, footer { position: relative; z-index: 20; }
main > .content-fade { margin-bottom: 42vh; }
.instagram-promo, .notification-bar, .join-section { position: relative; z-index: 20; display: flex; min-height: 0; height: auto; overflow: visible; background: transparent; }
.join-section { display: grid; }
section, footer { margin-bottom: 0; }
.footer-bottom { position: relative; z-index: 10; }
.container h2 { font-size: clamp(2.4rem, 5vw, 4.5rem); }
.intro-section { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; align-items: end; }.intro-section > p { max-width: 390px; font-size: 1.1rem; }
.feature-section { display: flex; align-items: stretch; justify-content: space-between; gap: 30%; padding-top: 0; padding-bottom: 9rem; }.feature-card { min-height: 390px; padding: 2.3rem; display: flex; flex-direction: column; justify-content: space-between; }.feature-card-primary { width: 35%; background: linear-gradient(135deg, #7d172d, #ba2d42); }.feature-card-secondary { width: 35%; margin-left: auto; background: var(--surface-light); }.feature-card h2 { font-size: clamp(3rem, 5vw, 5rem); }.feature-card-secondary strong { color: var(--gold); font-size: .75rem; letter-spacing: .12em; }.feature-card-secondary h3 { font-size: 2rem; margin-top: 1rem; }.feature-card-secondary h3 span, .schedule-item h3 span { color: var(--gold); font-size: .8rem; margin: 0 .4rem; }.outline-link { border: 1px solid var(--line); color: var(--ink); padding: .7rem 1rem; align-self: flex-start; text-decoration: none; font-size: .75rem; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2.2rem; }.standings-section { border-top: 1px solid var(--line); }
.standings-table { width: 100%; border-collapse: collapse; background: var(--surface); }.standings-table th, .standings-table td { padding: 1.1rem 1.4rem; text-align: left; border-bottom: 1px solid var(--line); font-size: .82rem; }.standings-table td:first-child { color: var(--gold); font-weight: 800; }.standings-table td strong { color: var(--ink); }.standings-table th { background: var(--red); color: var(--ink); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }.standings-table tr:nth-child(even) { background: rgba(255, 255, 255, .025); }
.schedule-table { width: 100%; min-width: 620px; border-collapse: collapse; background: var(--surface); }.schedule-table th, .schedule-table td { padding: 1.1rem 1.4rem; text-align: left; border-bottom: 1px solid var(--line); font-size: .82rem; }.schedule-table th { background: var(--red); color: var(--ink); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }.schedule-table td:first-child { color: var(--gold); font-weight: 800; }.schedule-table td strong { color: var(--ink); }.schedule-table tr:nth-child(even) { background: rgba(255, 255, 255, .025); }
.achievements-section { border-top: 1px solid var(--line); }.section-note { max-width: 230px; color: var(--muted); font-size: .85rem; line-height: 1.6; text-align: right; }.achievement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }.achievement-card { min-height: 390px; padding: 1.7rem; display: flex; flex-direction: column; justify-content: space-between; background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--gold); transition: border-color .2s, background .2s, transform .2s; }.achievement-card:hover { background: var(--surface-light); border-color: var(--gold); transform: translateY(-4px); }.achievement-card-featured { background: linear-gradient(145deg, rgba(168, 32, 53, .62), var(--surface)); }.achievement-top { display: flex; justify-content: space-between; color: var(--gold); font-size: .68rem; font-weight: 800; letter-spacing: .12em; }.achievement-card h3 { margin: .8rem 0 1rem; font-size: clamp(2.6rem, 5vw, 4.6rem); }.achievement-card h3 em { color: var(--gold); font-style: normal; }.achievement-card p:not(.card-kicker) { max-width: 390px; font-size: .9rem; }.achievement-result { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }.achievement-result strong { color: var(--ink); font-size: 1.05rem; }.achievement-result span { color: var(--muted); font-size: .65rem; text-align: right; }.photos-section { padding-top: 0; }.photo-masonry { columns: 3 220px; column-gap: 1rem; }.photo-link { display: block; color: inherit; text-decoration: none; break-inside: avoid; }.photo-tile { position: relative; margin: 0 0 1rem; overflow: hidden; break-inside: avoid; background: var(--surface); border: 1px solid var(--line); }.photo-tile img { display: block; width: 100%; height: auto; filter: saturate(.78); transition: transform .5s, filter .5s; }.photo-link:hover .photo-tile { border-color: var(--gold); }.photo-link:hover .photo-tile img { filter: saturate(1); transform: scale(1.04); }.photo-tile figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 2.5rem 1rem .8rem; color: var(--ink); background: linear-gradient(transparent, rgba(11, 12, 16, .9)); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.filter-buttons { display: flex; gap: .5rem; }.filter-buttons button { padding: .6rem .9rem; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }.filter-buttons button.active, .filter-buttons button:hover { background: var(--gold); color: var(--bg); }.schedule-grid { display: grid; gap: 1px; background: var(--line); }.schedule-item { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 1.5rem; padding: 1.4rem; background: var(--surface); }.schedule-item time { color: var(--gold); font-size: 2rem; font-weight: 800; line-height: 1; }.schedule-item time small { display: block; margin-top: .4rem; font-size: .62rem; letter-spacing: .1em; }.schedule-item h3 { margin: .4rem 0; font-size: 1.2rem; }.schedule-item p:last-child { font-size: .75rem; }.schedule-arrow { color: var(--gold); font-size: 1.4rem; }
.players-section { border-top: 1px solid var(--line); }.player-filters { display: flex; flex-wrap: wrap; gap: .45rem; }.player-filters button { padding: .65rem .9rem; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: .7rem; font-weight: 700; cursor: pointer; transition: background .2s, color .2s; }.player-filters button.active, .player-filters button:hover { background: var(--gold); color: var(--bg); }
.player-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }.player-card { min-height: 290px; padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; background: var(--surface); border-top: 3px solid var(--team-color, var(--gold)); transition: transform .2s, background .2s; }.player-card:hover { transform: translateY(-4px); background: var(--surface-light); }.player-number { color: var(--team-color, var(--gold)); font-size: 2.8rem; font-weight: 900; line-height: 1; }.player-card h3 { margin-top: 1rem; font-size: 1.35rem; }.player-team { margin-top: .4rem; color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }.player-position { color: var(--gold); font-size: .67rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.player-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }.player-stats dt { color: var(--ink); font-size: 1.05rem; font-weight: 800; }.player-stats dd { margin-top: .2rem; color: var(--muted); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.player-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: -1rem 0 2rem; }.player-search { flex: 1; max-width: 420px; }.player-search input { width: 100%; padding: .9rem 1rem; border: 1px solid var(--line); outline: 0; background: var(--surface); color: var(--ink); font: inherit; }.player-search input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(233, 189, 85, .2); }.player-count { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }.player-pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; }.player-pagination button:disabled { cursor: not-allowed; opacity: .35; }.player-pagination span { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }

footer { background: var(--surface); padding: 7rem 5vw 2rem; border-top: 1px solid var(--line); }.footer-content { max-width: 700px; margin: 0 auto; text-align: center; }.footer-content h2 { font-size: clamp(3rem, 7vw, 6rem); margin: 1rem 0; }.subscribe-form { display: flex; margin: 2rem auto 6rem; max-width: 500px; }.subscribe-form input { flex: 1; min-width: 0; padding: 1rem; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; }.footer-bottom { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 1.3rem; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
.instagram-promo { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding: 6rem 5vw; background: transparent; border-top: 1px solid var(--line); }.instagram-promo h2 { margin-top: 1rem; font-size: clamp(2.8rem, 6vw, 5.8rem); }.instagram-link { display: inline-flex; align-items: center; gap: 1.2rem; padding-bottom: .7rem; color: var(--gold); border-bottom: 1px solid var(--gold); font-size: .9rem; font-weight: 800; text-decoration: none; }.instagram-link span { color: var(--ink); font-size: 1.2rem; }.notification-bar { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2.2rem 5vw; background: var(--surface); color: var(--ink); }.notification-bar h2 { margin-top: .5rem; color: var(--ink); font-size: clamp(1.3rem, 2.5vw, 2.2rem); }.notification-bar .card-kicker { color: var(--gold); }.notification-form { display: flex; flex: 0 1 490px; }.notification-form input { flex: 1; min-width: 0; padding: .9rem 1rem; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; }.notification-form input::placeholder { color: var(--muted); }.notification-form .btn-primary { background: var(--red); white-space: nowrap; }.join-section { display: grid; grid-template-columns: .75fr 1.25fr; gap: 8%; max-width: none; margin: 0; padding: 8rem 5vw; background: transparent; }.join-intro h2 { margin: 1rem 0 1.5rem; font-size: clamp(4rem, 8vw, 7rem); }.join-intro > p:last-child { max-width: 280px; font-size: .95rem; }.join-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1rem; align-content: start; }.form-field { display: grid; gap: .45rem; }.form-field label { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.form-field input, .form-field textarea { width: 100%; padding: .9rem 1rem; border: 1px solid var(--line); outline: 0; resize: vertical; background: var(--surface); color: var(--ink); font: inherit; transition: border-color .2s, box-shadow .2s; }.form-field input:focus, .form-field textarea:focus, .notification-form input:focus, .subscribe-form input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(233, 189, 85, .2); }.form-field-wide, .form-submit { grid-column: 1 / -1; }.form-submit { justify-self: start; margin-top: .3rem; }

@media (max-width: 900px) {
    main > .content-fade { margin-bottom: 3rem; }
    .instagram-promo.content-fade, .join-section.content-fade { margin-bottom: 3rem; }
    main, .hero-section, .score-strip, .container, .instagram-promo, .notification-bar, .join-section, footer { width: 100%; }
    .spline-container { position: relative; top: auto; left: auto; width: 100%; height: 400px; z-index: 0; }
    .navbar { padding: 1rem 5vw; }.nav-links { display: none; }.season-selector { margin-left: auto; }.hero-section { grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding-top: 8rem; }.hero-heading, .hero-intro, .spline-container, .hero-stats { grid-column: 1; }.hero-heading { grid-row: 1; align-self: center; max-width: 600px; text-align: center; }.hero-intro { grid-row: 3; max-width: 600px; margin: 0 auto; text-align: center; }.spline-container { grid-row: 2; width: 100%; height: 400px; margin: 0; }.hero-stats { grid-row: 4; flex-direction: row; justify-content: center; gap: 2rem; }.hero-heading h1 { font-size: clamp(3.5rem, 13vw, 5.5rem); }.scroll-cue { display: none; }.intro-section, .feature-section { grid-template-columns: 1fr; }.feature-section { display: grid; gap: 1.5rem; padding-bottom: 5rem; }.feature-card, .feature-card-primary, .feature-card-secondary { width: 100%; margin-left: 0; min-height: 300px; }.section-heading { align-items: start; flex-direction: column; }.section-note { text-align: left; }.achievement-grid { grid-template-columns: 1fr; }.table-responsive { overflow-x: auto; }.standings-table { min-width: 650px; }.player-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.schedule-item { grid-template-columns: 60px 1fr auto; }.instagram-promo, .notification-bar { align-items: start; flex-direction: column; }.notification-form { width: 100%; max-width: 600px; }.join-section { grid-template-columns: 1fr; gap: 3rem; }.footer-bottom { flex-direction: column; gap: .6rem; }.subscribe-form { flex-direction: column; }.subscribe-form .btn-primary { justify-content: center; }
}
@media (max-width: 520px) { .nav-logo { height: 48px; }.brand small { display: none; }.hero-heading h1 { font-size: 4rem; }.hero-stats { gap: 1rem; margin-top: 3.5rem; }.score-strip { gap: .6rem; font-size: .65rem; }.score-strip > a { display: none; }.score-match b { font-size: .8rem; }.container { padding-top: 5rem; padding-bottom: 5rem; } }
@media (prefers-reduced-motion: reduce) { .scroll-indicator { animation: none; } }
@media (prefers-reduced-motion: reduce) { .content-fade { opacity: 1; transform: none; pointer-events: auto; transition: none; } }