:root {
    --navy-950: #050d1a;
    --navy-900: #081426;
    --navy-850: #0b1b31;
    --navy-800: #102440;
    --navy-700: #183457;
    --red-600: #c91532;
    --red-500: #ed2547;
    --red-400: #ff5470;
    --white: #ffffff;
    --cloud: #f3f6fa;
    --muted: #aab6c7;
    --muted-dark: #7d8ca3;
    --line: rgba(255, 255, 255, .12);
    --line-strong: rgba(255, 255, 255, .22);
    --green: #36d399;
    --amber: #f6c85f;
    --shadow: 0 28px 70px rgba(0, 0, 0, .3);
    --radius: 18px;
    --max: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { position: relative; isolation: isolate; margin: 0; background: var(--navy-950); color: var(--white); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: 540px; pointer-events: none; z-index: -1; background: radial-gradient(circle at 82% 12%, rgba(201, 21, 50, .18), transparent 34%), linear-gradient(180deg, rgba(16, 36, 64, .7), transparent); }
body::after { content: ""; position: fixed; inset: 100px -12vw 0; pointer-events: none; z-index: -1; opacity: .03; background-image: url("../img/decor/ribbon-tatau-heritage.png"), url("../img/decor/ribbon-tatau-heritage.png"), url("../img/decor/ribbon-tatau-heritage.png"); background-repeat: no-repeat; background-size: 124vw auto; background-position: center 14%, center 52%, center 90%; filter: grayscale(.55) saturate(.42) brightness(1.18); transform: rotate(-3deg) scale(1.05); transform-origin: center; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.035em; line-height: 1.03; }
h1 { font-size: clamp(2.5rem, 7vw, 7.4rem); margin-bottom: 24px; overflow-wrap: break-word; }
h2 { font-size: clamp(1.85rem, 4vw, 4rem); margin-bottom: 16px; overflow-wrap: break-word; }
h3 { font-size: 1.35rem; }
p { color: var(--muted); }
small { color: var(--muted-dark); }
code { display: block; padding: 14px 16px; overflow-wrap: anywhere; color: var(--amber); background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 10px; }
[hidden] { display: none !important; }

.container { width: min(100% - 40px, var(--max)); margin-inline: auto; }
.site-shell { min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; }
main { flex: 1; }
.muted { color: var(--muted); }
.eyebrow, .kicker { color: var(--red-400); font-size: .74rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 12px; }

.site-header { position: sticky; top: 0; z-index: 100; background: rgba(5, 13, 26, .9); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.site-header__inner { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 28px; transition: min-height .25s ease; }
.site-header--shrunk .site-header__inner { min-height: 82px; }
.site-header__identity { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); min-width: 0; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand__mark { display: block; }
.brand__mark img { width: auto; height: 82px; object-fit: contain; filter: drop-shadow(0 10px 22px rgba(0,0,0,.28)); transition: height .25s ease; }
.site-header--shrunk .brand__mark img { height: 66px; }
.brand__mark--footer img { height: 112px; }
.topbar-stats { display: flex; align-items: stretch; margin: 0; }
.topbar-stat { display: grid; align-content: center; min-width: 72px; max-width: 98px; padding: 2px 12px; border-left: 1px solid var(--line); }
.topbar-stat strong { color: var(--white); font-size: 1.08rem; line-height: 1; }
.topbar-stat span { margin-top: 5px; color: var(--muted); font-size: .55rem; font-weight: 800; letter-spacing: .08em; line-height: 1.15; text-transform: uppercase; }
.site-nav { display: flex; align-items: center; justify-content: flex-end; gap: 22px; }
.site-nav > a:not(.button) { position: relative; color: #c5cfdd; font-size: .78rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; padding: 12px 0; }
.site-nav > a:not(.button)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 4px; height: 2px; background: var(--red-500); transition: right .2s ease; }
.site-nav > a:hover, .site-nav > a.active { color: var(--white); }
.site-nav > a:hover::after, .site-nav > a.active::after { right: 0; }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 11px; background: transparent; border: 1px solid var(--line); color: white; }
.menu-toggle span { display: block; height: 2px; margin: 5px 0; background: currentColor; }

.hero { position: relative; overflow: hidden; padding: clamp(74px, 10vw, 150px) 0 clamp(70px, 9vw, 128px); border-bottom: 1px solid var(--line); }
.hero::after { content: "NFL SAMOA"; position: absolute; left: max(20px, calc((100vw - var(--max))/2)); bottom: -45px; font-weight: 950; font-size: clamp(6rem, 18vw, 17rem); letter-spacing: -.08em; line-height: .7; color: rgba(255,255,255,.025); white-space: nowrap; pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: clamp(40px, 7vw, 100px); align-items: center; position: relative; z-index: 1; }
.hero-copy { max-width: 750px; }
.hero-copy h1 { max-width: 820px; }
.hero-lead { max-width: 700px; font-size: clamp(1.05rem, 1.7vw, 1.32rem); }
.hero-logo { display: flex; justify-content: center; align-items: center; min-height: 380px; }
.hero-logo img { width: min(100%, 390px); max-height: 400px; object-fit: contain; filter: drop-shadow(0 30px 45px rgba(0,0,0,.42)); transform: rotate(1deg); }
.home-page .hero { padding: clamp(54px, 7vw, 96px) 0 clamp(50px, 6vw, 82px); }
.home-page .hero-grid { grid-template-columns: minmax(0, 1.6fr) minmax(240px, .55fr); align-items: start; gap: clamp(34px, 5vw, 72px); }
.home-page .hero-copy { max-width: none; }
.home-page .hero h1 { max-width: 720px; margin-bottom: 30px; font-size: clamp(2.5rem, 5.2vw, 5.2rem); }
.home-page .hero-logo { min-height: 300px; }
.home-page .hero-logo img { width: min(100%, 330px); max-height: 330px; }
.hero-ledger { max-width: 920px; }
.hero-ledger__heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 14px; }
.hero-ledger__heading h2 { margin-bottom: 5px; font-size: clamp(1.25rem, 2.2vw, 1.8rem); }
.hero-ledger__heading p { margin-bottom: 0; font-size: .76rem; }
.hero-ledger__heading .text-link { flex: 0 0 auto; font-size: .76rem; }
.hero-ledger .hall-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.hero-ledger .hall-ledger__row { min-width: 0; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; padding: 9px 11px; border-radius: 8px; }
.hero-ledger .hall-ledger__rank { min-width: 0; font-size: .65rem; }
.hero-ledger .hall-ledger__name { min-width: 0; font-size: .78rem; line-height: 1.2; }
.hero-ledger .hall-ledger__meta { overflow: hidden; color: var(--muted-dark); font-size: .61rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.hero-ledger .hall-ledger__titles { font-size: .65rem; }
.hero-ledger .champion-mark { margin-left: 3px; padding: 2px 4px; }
.hero-ledger .champion-mark::before { width: 10px; height: 10px; }
.hero-ledger .hall-ledger__more { margin-top: 10px; font-size: .7rem; }
.ribbon-divider { position: relative; z-index: 2; width: 100%; height: clamp(48px, 11vw, 154px); overflow: hidden; background: var(--navy-950); border-block: 1px solid rgba(255,255,255,.08); }
.ribbon-divider img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: drop-shadow(0 8px 20px rgba(0,0,0,.32)); }
.ribbon-divider--hero { box-shadow: 0 18px 38px rgba(0,0,0,.18); }
.ribbon-divider--footer { height: clamp(38px, 5vw, 68px); background: #020710; border-bottom: 0; }
.ribbon-divider--footer img { object-position: 68% center; opacity: .9; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 34px 0; }

.page-hero { position: relative; overflow: hidden; padding: 68px 0 86px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, var(--navy-850), var(--navy-950)); }
.page-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 24px; background: var(--navy-950) url("../img/decor/ribbon-tatau-football.png") 72% center / cover no-repeat; border-top: 1px solid var(--line); }
.page-hero--compact h1 { font-size: clamp(2.8rem, 6vw, 5rem); margin-bottom: 16px; }
.page-hero__grid { display: grid; grid-template-columns: 1fr 210px; gap: 40px; align-items: center; }
.page-hero__grid p { max-width: 720px; margin-bottom: 0; }
.page-hero__grid img { width: 200px; height: 180px; object-fit: contain; filter: drop-shadow(0 20px 26px rgba(0,0,0,.32)); }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; color: white; font-size: .78rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button--primary { background: var(--red-600); border-color: var(--red-600); box-shadow: 0 12px 28px rgba(201, 21, 50, .26); }
.button--primary:hover { background: var(--red-500); }
.button--secondary { background: transparent; border-color: var(--line-strong); }
.button--secondary:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.4); }
.button--small { min-height: 38px; padding: 8px 14px; font-size: .68rem; }
.button--block { width: 100%; }
.text-link, .text-button { color: #fff; font-weight: 750; }
.text-link:hover, .text-button:hover { color: var(--red-400); }
.text-button { padding: 0; border: 0; background: transparent; cursor: pointer; font-size: .82rem; }

.section { padding: clamp(70px, 9vw, 118px) 0; }
.section--tight { padding-top: 38px; }
.section--dark { background: var(--navy-900); border-block: 1px solid var(--line); }
.section--awards { background: linear-gradient(180deg, var(--navy-900), var(--navy-950)); }
.section-heading { max-width: 760px; margin-bottom: 44px; }
.section-heading--split { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.section-heading--split > div { max-width: 760px; }
.section-heading--spaced { margin-top: 80px; }
.section-heading p:last-child { margin-bottom: 0; }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 680px; margin-top: 38px; }
.stat-card { padding: 18px 16px; border-top: 2px solid var(--red-600); background: rgba(255,255,255,.035); }
.stat-card strong { display: block; font-size: 1.65rem; }
.stat-card span { color: var(--muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

.competition-grid, .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.admin-grid, .resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.resource-card { display: flex; min-height: 235px; padding: 25px; flex-direction: column; align-items: flex-start; background: var(--navy-850); border: 1px solid var(--line); border-top: 3px solid var(--red-600); border-radius: 12px; }
.resource-card h3 { margin: 20px 0 10px; }
.resource-card p { flex: 1; }
.resource-card .muted { font-size: .78rem; }
.competition-card, .content-card, .feature-card, .admin-action { min-height: 270px; padding: 30px; background: linear-gradient(145deg, rgba(24, 52, 87, .62), rgba(8, 20, 38, .86)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 40px rgba(0,0,0,.14); }
a.competition-card, a.admin-action { transition: transform .2s ease, border-color .2s ease; }
a.competition-card:hover, a.admin-action:hover { transform: translateY(-5px); border-color: rgba(237,37,71,.65); }
.competition-card > span, .admin-action > span { color: var(--red-400); font-weight: 900; letter-spacing: .1em; }
.competition-card h3, .admin-action h2 { margin-top: 48px; }
.competition-card b { display: block; margin-top: 28px; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.feature-card--red { background: linear-gradient(145deg, rgba(201,21,50,.28), rgba(8,20,38,.9)); }
.split-callout { display: grid; grid-template-columns: 1fr 300px; align-items: center; gap: 70px; }
.split-callout > div { max-width: 760px; }
.split-callout img { width: 290px; max-height: 260px; object-fit: contain; filter: drop-shadow(0 24px 35px rgba(0,0,0,.4)); }

.award-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.awards-archive { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: start; }
.award-card { overflow: hidden; background: var(--navy-850); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.award-header { padding: 24px; min-height: 220px; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(145deg, #17355b, #091528 70%); border-bottom: 2px solid var(--red-600); }
.award-header__identity { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.award-header__identity > div { min-width: 0; }
.award-header__identity img { flex: 0 0 auto; width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.32)); }
.award-header__title { margin: 0 0 4px; font-size: clamp(1.8rem, 3vw, 2.7rem); white-space: nowrap; }
.award-header__subtitle { color: #dce5f2; margin: 0; font-size: .85rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.award-card-grid .award-header__identity { gap: 12px; }
.award-card-grid .award-header__identity img { width: 52px; height: 52px; }
.award-card-grid .award-header__title { font-size: clamp(1.9rem, 2.4vw, 2.35rem); }
.award-header__ribbon { flex: 0 0 clamp(34px, 3.5vw, 50px); height: clamp(34px, 3.5vw, 50px); margin: 18px -24px 0; overflow: hidden; background: var(--navy-950); border-block: 1px solid rgba(255,255,255,.12); }
.award-header__ribbon img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 72% center; }
.award-header__footer { display: flex; justify-content: space-between; gap: 10px; padding-top: 15px; margin-top: 0; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
.award-card__body { padding: 24px; }
.award-card__body > p { font-size: .9rem; }
.award-timeline { list-style: none; padding: 0; margin: 18px 0 0; }
.award-timeline li { display: grid; grid-template-columns: 65px 1fr; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); }
.award-timeline li span { color: var(--red-400); font-weight: 850; }
.award-timeline li strong { font-size: .92rem; }
.award-timeline--compact li:nth-child(n+4) { display: none; }
.archive-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 34px; }
.archive-filters { display: flex; gap: 10px; min-width: min(100%, 520px); }
.archive-filters > * { flex: 1; }
.repeat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.repeat-grid article { padding: 22px; border-left: 3px solid var(--red-600); background: rgba(255,255,255,.04); }
.repeat-grid strong, .repeat-grid span { display: block; }
.repeat-grid span { color: var(--muted); font-size: .82rem; }
.repeat-grid strong { display: flex; align-items: center; gap: 2px; }

/* Championship honours. The trophy is a background image so it needs no markup. */
.champion-mark { display: inline-flex; align-items: center; gap: 3px; margin-left: 7px; padding: 3px 7px 3px 5px; border: 1px solid rgba(246,200,95,.34); border-radius: 999px; background: rgba(246,200,95,.11); color: var(--amber); font-size: .68rem; font-weight: 850; line-height: 1; vertical-align: middle; }
.champion-mark::before { content: ""; width: 13px; height: 13px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f6c85f' d='M7 2h10v6a5 5 0 0 1-10 0V2zm4 12h2v4h3v2H8v-2h3v-4z'/%3E%3Cpath fill='none' stroke='%23f6c85f' stroke-width='1.9' d='M7 4H4v1.5A3.5 3.5 0 0 0 7.2 9M17 4h3v1.5A3.5 3.5 0 0 1 16.8 9'/%3E%3C/svg%3E") center/contain no-repeat; }
.champion-mark b { font-size: .68rem; font-weight: 850; }

.section--hall { background: linear-gradient(180deg, rgba(246,200,95,.05), transparent 60%); }
.hall-ledger { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hall-ledger__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 14px 20px; background: var(--navy-850); border: 1px solid var(--line); border-radius: 12px; }
.hall-ledger__row--top { border-color: rgba(246,200,95,.45); background: linear-gradient(90deg, rgba(246,200,95,.16), rgba(246,200,95,.04) 38%, var(--navy-850) 70%); box-shadow: inset 3px 0 0 var(--amber); }
.hall-ledger__row--top .hall-ledger__rank { color: var(--amber); }
.hall-ledger__rank { min-width: 30px; color: var(--muted-dark); font-size: .78rem; font-weight: 850; letter-spacing: .06em; }
.hall-ledger__name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-weight: 800; }
.hall-ledger__meta { flex-basis: 100%; color: var(--muted-dark); font-size: .74rem; font-weight: 650; }
.hall-ledger__titles { color: var(--amber); font-size: .76rem; font-weight: 850; white-space: nowrap; }
.hall-ledger__more { margin: 14px 0 0; color: var(--muted-dark); font-size: .82rem; }

.update-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.update-card { padding: 26px; border-top: 2px solid var(--red-600); background: rgba(255,255,255,.035); }
.update-card__meta { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 34px; color: var(--muted); font-size: .72rem; }
.program-grid { display: grid; gap: 16px; }
.program-card { display: grid; grid-template-columns: 50px 1fr; gap: 20px; padding: 24px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.program-card__list { color: var(--muted); }
.split-section { display: grid; grid-template-columns: 1fr .8fr; gap: 40px; }

.form-group { display: grid; gap: 7px; margin-bottom: 18px; }
.form-group label { font-size: .78rem; font-weight: 800; letter-spacing: .04em; }
.form-group label span { color: var(--muted); font-weight: 500; }
.form-control { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 8px; outline: none; color: var(--white); background: rgba(2,8,18,.75); }
.form-control:focus { border-color: var(--red-500); box-shadow: 0 0 0 3px rgba(237,37,71,.15); }
textarea.form-control { resize: vertical; }
.file-input { width: 100%; padding: 20px; border: 1px dashed var(--line-strong); background: rgba(255,255,255,.025); color: var(--muted); }
.check-line { display: flex; gap: 10px; align-items: center; margin: 14px 0; color: var(--muted); }

.auth-layout { min-height: calc(100vh - 100px); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 7vw; width: min(100% - 40px, 1000px); margin: auto; padding: 70px 0; }
.auth-logo img { width: min(100%, 420px); max-height: 420px; object-fit: contain; filter: drop-shadow(0 30px 44px rgba(0,0,0,.4)); }
.auth-card { padding: 42px; background: var(--navy-850); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.auth-card h1 { font-size: 3.5rem; }
.alert { padding: 16px 18px; margin: 20px 0; border: 1px solid var(--line); border-radius: 10px; }
.alert ul { margin-bottom: 0; }
.alert--danger, .alert--error { color: #ffdbe1; background: rgba(201,21,50,.18); border-color: rgba(237,37,71,.5); }
.alert--warning { color: #fff4cf; background: rgba(246,200,95,.1); border-color: rgba(246,200,95,.38); }
.flash { position: relative; z-index: 5; padding: 11px 0; border-bottom: 1px solid var(--line); font-weight: 700; }
.flash--success { background: rgba(54,211,153,.14); color: #c9ffe9; }
.flash--error { background: rgba(201,21,50,.2); color: #ffe2e7; }

.member-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.member-tabs a { padding: 9px 14px; border-radius: 6px; color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.member-tabs a:hover, .member-tabs a.active { color: white; background: var(--navy-700); }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metric-card { min-height: 180px; padding: 24px; display: flex; flex-direction: column; background: var(--navy-850); border: 1px solid var(--line); border-radius: 12px; }
.metric-card > span { color: var(--muted); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.metric-card strong { margin: auto 0 10px; font-size: 2.6rem; }
.metric-card a { color: var(--red-400); font-size: .8rem; font-weight: 750; }
.dashboard-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.dashboard-actions .feature-card { min-height: 330px; display: flex; flex-direction: column; align-items: flex-start; }
.dashboard-actions .button { margin-top: auto; }

.dues-layout { display: grid; grid-template-columns: minmax(310px, .42fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.dues-picker, .dues-summary { background: var(--navy-850); border: 1px solid var(--line); border-radius: var(--radius); }
.dues-picker { position: sticky; top: 110px; max-height: calc(100vh - 140px); padding: 22px; display: flex; flex-direction: column; }
.dues-picker__header { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.dues-picker__header h2 { font-size: 1.6rem; }
.selection-count { color: var(--red-400); font-size: .75rem; font-weight: 850; white-space: nowrap; }
.picker-actions { display: flex; justify-content: space-between; padding: 12px 2px; }
.member-checklist { overflow: auto; display: grid; gap: 7px; padding-right: 4px; }
.member-check { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; padding: 12px; cursor: pointer; border: 1px solid transparent; border-radius: 9px; background: rgba(255,255,255,.03); }
.member-check:hover, .member-check:has(input:checked) { border-color: rgba(237,37,71,.5); background: rgba(201,21,50,.1); }
.member-check strong, .member-check small { display: block; }
.member-check small { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.balance { color: var(--muted); font-size: .73rem; }
.balance--owing { color: #ff91a4; }
.balance--credit { color: var(--green); }
.dues-summary { min-height: 660px; padding: 28px; }
.summary-empty { min-height: 580px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.summary-empty img { width: 190px; height: 180px; object-fit: contain; opacity: .78; margin-bottom: 20px; }
.summary-top { display: flex; justify-content: space-between; gap: 30px; align-items: start; margin-bottom: 26px; }
.summary-top h2 { font-size: 2.3rem; }
.grand-balance { min-width: 210px; padding: 20px; text-align: right; border-right: 4px solid var(--red-600); background: rgba(255,255,255,.035); }
.grand-balance span, .grand-balance strong { display: block; }
.grand-balance strong { font-size: 1.8rem; }
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; margin-bottom: 26px; }
.category-card { padding: 16px; border-top: 2px solid var(--red-600); background: rgba(255,255,255,.035); }
.category-card span, .category-card strong { display: block; }
.category-card span { color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.category-card strong { margin-top: 7px; font-size: 1.2rem; }
.league-breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 0 0 26px; }
.league-group { padding: 18px; background: var(--navy-850); border: 1px solid var(--line); border-radius: 10px; }
.league-group h3 { margin-bottom: 12px; color: var(--red-400); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.league-group div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .79rem; }
.league-group span { color: var(--muted); }
.league-group strong { text-align: right; }
.season-filter { display: flex; align-items: center; gap: 12px; margin: 0 0 24px auto; max-width: 330px; }
.season-filter label { font-size: .75rem; font-weight: 800; text-transform: uppercase; }

.table-wrapper { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.table { width: 100%; border-collapse: collapse; min-width: 660px; }
.table th, .table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.table th { color: var(--muted); background: rgba(255,255,255,.035); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.table tbody tr:hover { background: rgba(255,255,255,.025); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tfoot td { font-weight: 850; background: rgba(201,21,50,.12); }
.table-note { display: block; }
.status { display: inline-flex; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .65rem; font-weight: 800; text-transform: uppercase; }
.status--active { color: #bfffe4; border-color: rgba(54,211,153,.4); background: rgba(54,211,153,.1); }
.status--archived { color: #ffd4dc; border-color: rgba(237,37,71,.3); }

.upload-panel, .connection-panel { display: grid; grid-template-columns: 1fr minmax(320px, .65fr); gap: 60px; align-items: center; padding: 34px; background: var(--navy-850); border: 1px solid var(--line); border-radius: var(--radius); }
.connection-panel { grid-template-columns: 1fr auto; margin-bottom: 30px; }
.preview-head { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-bottom: 24px; }
.reconcile-card { min-width: 260px; padding: 22px; text-align: right; background: var(--navy-850); border-right: 4px solid var(--red-600); }
.reconcile-card span, .reconcile-card strong, .reconcile-card small { display: block; }
.reconcile-card strong { font-size: 1.6rem; }
.resolution-grid { padding: 28px; margin: 26px 0; background: var(--navy-850); border: 1px solid var(--line); border-radius: var(--radius); }
.resolution-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px; padding: 14px 0; border-top: 1px solid var(--line); }
.resolution-row strong, .resolution-row small { display: block; }
.preview-actions { display: flex; gap: 10px; }
.admin-split { display: grid; grid-template-columns: minmax(300px, .75fr) 1fr; gap: 30px; align-items: start; }
.league-admin-list { display: grid; gap: 10px; }
.league-admin-list article { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 18px; background: var(--navy-850); border: 1px solid var(--line); border-radius: 10px; }
.league-admin-list strong, .league-admin-list small { display: block; }
.inline-password { display: flex; gap: 8px; align-items: center; }
.inline-password .form-control { min-width: 170px; }

.yahoo-league + .yahoo-league { margin-top: 80px; }
.matchup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.matchup-card { padding: 18px; background: var(--navy-850); border: 1px solid var(--line); border-radius: 10px; }
.matchup-card > span { color: var(--muted); font-size: .7rem; text-transform: uppercase; }
.matchup-team { display: flex; justify-content: space-between; gap: 15px; padding: 10px 0; border-top: 1px solid var(--line); }
.matchup-team.is-winner strong, .matchup-team.is-winner b { color: var(--green); }
.yellow-cap-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.yellow-cap-grid article { padding: 18px; background: var(--navy-850); border-top: 3px solid var(--amber); }
.yellow-cap-grid span, .yellow-cap-grid strong { display: block; }
.yellow-cap-grid span { color: var(--amber); font-size: .72rem; font-weight: 800; }

/* Required Yahoo Fantasy API credit. Logo proportions must not be altered. */
.yahoo-attribution { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); }
.yahoo-attribution a { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: .78rem; }
.yahoo-attribution a:hover { color: white; }
.yahoo-attribution img { width: auto; height: 20px; object-fit: contain; }

.empty-state { padding: 70px 30px; text-align: center; background: var(--navy-850); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.empty-state--small { padding: 30px; }
.empty-state > * { max-width: 680px; margin-left: auto; margin-right: auto; }

.site-footer { padding: 70px 0 28px; background: #020710; border-top: 1px solid var(--line); }
.footer-grid { display: flex; justify-content: space-between; align-items: center; gap: 60px; }
.footer-identity { display: flex; align-items: center; gap: 28px; }
.footer-identity h2 { max-width: 520px; font-size: clamp(1.6rem, 3vw, 2.5rem); margin-bottom: 0; }
.footer-links { display: grid; grid-template-columns: repeat(2, auto); gap: 8px 26px; color: var(--muted); font-size: .86rem; }
.footer-links a:hover { color: white; }
.footer-bottom { padding-top: 28px; margin-top: 36px; border-top: 1px solid var(--line); }
.footer-bottom p { margin: 0; font-size: .75rem; }

.fantasy-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 18px; }
.fantasy-team-card { padding: 22px; background: var(--navy-850); border: 1px solid var(--line); border-top: 3px solid var(--red-600); border-radius: 12px; }
.fantasy-team-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.fantasy-team-card__head .eyebrow { margin-bottom: 0; }
.fantasy-team-card h3 { margin: 0 0 8px; }
.fantasy-team-card__rank { color: var(--muted); font-size: .85rem; margin-bottom: 14px; }
.fantasy-matchup { padding: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 10px; }
.fantasy-matchup .matchup-team { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); }
.fantasy-matchup .matchup-team:first-of-type { border-top: 0; }
.fantasy-matchup__week { display: block; margin-top: 8px; color: var(--muted-dark); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }

.survivor-alive { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; }
.survivor-chip { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; font-size: .78rem; font-weight: 750; border: 1px solid var(--line); }
.survivor-chip--alive { color: #bfffe4; border-color: rgba(54,211,153,.45); background: rgba(54,211,153,.1); }
.survivor-chip--out { color: var(--muted-dark); text-decoration: line-through; opacity: .75; }

.records-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.records-card { padding: 24px; background: var(--navy-850); border: 1px solid var(--line); border-radius: 12px; }
.records-card h3 { margin-bottom: 14px; }
.records-list { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.records-list li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.records-list li span { font-weight: 700; }
.records-list li b { color: var(--red-400); font-size: .9rem; }
.records-list li small { grid-column: 1 / -1; color: var(--muted-dark); font-size: .72rem; }

.fantasy-league-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.fantasy-league-form label { display: grid; gap: 4px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.fantasy-league-form .form-control { min-height: 42px; }
.fantasy-league-form .check-line { margin: 0; align-self: center; }

@media (max-width: 1100px) {
    .site-nav { gap: 14px; }
    .site-nav > a:not(.button) { font-size: .7rem; }
    .topbar-stat { min-width: 62px; padding-inline: 9px; }
    .award-card-grid { grid-template-columns: repeat(2, 1fr); }
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
    .yellow-cap-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 860px) {
    .menu-toggle { display: block; }
    .site-nav { display: none; position: absolute; inset: 100% 0 auto; padding: 18px 20px 24px; flex-direction: column; align-items: stretch; gap: 4px; background: var(--navy-950); border-bottom: 1px solid var(--line); }
    .site-nav.is-open { display: flex; }
    .site-nav > a { padding: 12px !important; }
    .site-nav > a::after { display: none; }
    .hero-grid, .auth-layout, .split-section, .dues-layout, .admin-split, .upload-panel { grid-template-columns: 1fr; }
    .home-page .hero-grid { grid-template-columns: 1fr; }
    .hero-copy { order: 2; }
    .hero-logo { order: 1; min-height: auto; }
    .hero-logo img { width: min(72vw, 310px); max-height: 300px; }
    .hero h1 { font-size: clamp(3rem, 12vw, 5.5rem); }
    .competition-grid, .card-grid, .admin-grid, .update-grid, .matchup-grid { grid-template-columns: 1fr; }
    .dues-picker { position: static; max-height: none; }
    .member-checklist { max-height: 460px; }
    .awards-archive { grid-template-columns: 1fr; }
    .split-callout { grid-template-columns: 1fr; }
    .split-callout img { width: 220px; }
    .page-hero__grid { grid-template-columns: 1fr 150px; }
    .page-hero__grid img { width: 150px; height: 140px; }
    .footer-grid { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 620px) {
    .container { width: min(100% - 28px, var(--max)); }
    .site-header__inner { min-height: 86px; }
    .brand__mark img { height: 70px; }
    .site-header__identity { gap: 9px; }
    .topbar-stat { min-width: 48px; max-width: 58px; padding-inline: 6px; }
    .topbar-stat strong { font-size: .92rem; }
    .topbar-stat span { font-size: .48rem; letter-spacing: .04em; }
    .hero { padding-top: 54px; }
    body::after { inset-inline: -38vw; opacity: .028; background-size: 176vw auto; }
    .ribbon-divider img { width: 190%; max-width: none; object-position: 66% center; }
    .hero-grid { gap: 30px; }
    .hero-actions, .preview-actions { flex-direction: column; }
    .hero-actions .button, .preview-actions .button { width: 100%; }
    .stat-grid { grid-template-columns: 1fr; }
    .award-card-grid, .metric-grid, .dashboard-actions, .repeat-grid, .yellow-cap-grid, .records-grid { grid-template-columns: 1fr; }
    .section-heading--split, .archive-toolbar, .preview-head, .summary-top { align-items: flex-start; flex-direction: column; }
    .hall-ledger__row { grid-template-columns: auto 1fr; row-gap: 6px; padding: 14px 16px; }
    .hall-ledger__titles { grid-column: 2; }
    .hero-ledger .hall-ledger { grid-template-columns: 1fr; }
    .hero-ledger .hall-ledger__row { grid-template-columns: 22px minmax(0, 1fr) auto; }
    .hero-ledger .hall-ledger__titles { grid-column: auto; }
    .hero-ledger__heading { align-items: flex-start; flex-direction: column; gap: 8px; }
    .archive-filters { min-width: 100%; flex-direction: column; }
    .page-hero__grid { grid-template-columns: 1fr; }
    .page-hero__grid img { width: 130px; order: -1; }
    .auth-card { padding: 28px 22px; }
    .auth-logo img { width: 260px; margin-inline: auto; }
    .member-check { grid-template-columns: 18px 1fr; }
    .member-check .balance { grid-column: 2; }
    .dues-summary { padding: 20px 14px; }
    .grand-balance, .reconcile-card { min-width: 100%; text-align: left; border-right: 0; border-left: 4px solid var(--red-600); }
    .resolution-row { grid-template-columns: 1fr; }
    .connection-panel { grid-template-columns: 1fr; }
    .inline-password { width: 100%; flex-direction: column; align-items: stretch; }
    .footer-identity { align-items: flex-start; flex-direction: column; }
    .section { padding: 54px 0; }
    .section--tight { padding-top: 30px; }
    .section-heading { margin-bottom: 30px; }
    .auth-card h1 { font-size: 2.4rem; }
    .summary-top h2 { font-size: 1.7rem; }
    .metric-card { min-height: 148px; padding: 20px; }
    .metric-card strong { font-size: 2.1rem; }
    .dues-picker__header h2 { font-size: 1.35rem; }
}

@media (max-width: 400px) {
    .container { width: min(100% - 24px, var(--max)); }
    .brand__mark img { height: 60px; }
    .topbar-stat { min-width: 43px; max-width: 50px; padding-inline: 4px; }
    .topbar-stat span { font-size: .43rem; }
    .site-header__inner { min-height: 76px; gap: 12px; }
    .hero { padding-top: 44px; }
    .hero h1 { font-size: clamp(2.2rem, 11vw, 5.5rem); }
    .auth-card { padding: 24px 18px; }
    .auth-card h1 { font-size: 2.1rem; }
    .summary-top h2 { font-size: 1.55rem; }
    .button { padding: 12px 18px; }
}