/* hero: words on the left, a game photo on the right (photo on top on phones) */
.hero { color: #fff; background: #121012; }
.hero .wrap { padding-top: 64px; padding-bottom: 64px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 44px; }
.hero-copy { display: flex; flex-direction: column; gap: 22px; }
.hero-photo { margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; background: #222; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 35% 40%; }
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 26px; }
  .hero-photo { order: -1; aspect-ratio: 16 / 10; border-radius: 14px; }
}
.badge { align-self: flex-start; background: var(--red); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 14px; border-radius: 6px; text-decoration: none; }
.badge:hover { color: #fff; background: var(--red-dark); }
.hero h1 { font-size: clamp(44px, 5.4vw, 74px); line-height: 0.92; max-width: 1050px; }
.hero p { font-size: 21px; max-width: 720px; color: #ececec; }
@media (max-width: 700px) { .hero p { font-size: 17px; order: 2; } .hero .actions { order: 1; margin-top: 0; } .hero .wrap { padding-top: 20px; padding-bottom: 36px; } .hero-copy { gap: 18px; } .block.gn-sec { padding-top: 28px; } }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.card { background: #1b1b1d; border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.card .num { font-family: var(--display); font-weight: 800; font-size: 44px; color: var(--red-on-dark); line-height: 1; }
.card p { color: #c9c9c9; }
a.card { color: #fff; text-decoration: none; transition: transform 120ms; }
a.card:hover { color: #fff; transform: translateY(-2px); }
/* game night cards: the real thing from live scores */
.card-k { display: inline-flex; align-items: center; gap: 8px; color: var(--red-on-dark); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.card h3.big { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1.05; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #2c2c2f; }
.list li:last-child { border-bottom: 0; padding-bottom: 0; }
.list span { font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.list small { color: #a8a8a8; font-size: 14px; white-space: nowrap; }
/* photo strip between Game night and Divisions (no heading; the photos speak for themselves) */
.photo-strip { padding: 40px 0 0; }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.gallery figure { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: #ddd; }
.gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .gallery { grid-template-columns: 1fr 1fr; gap: 10px; } }
.divs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.div { border: 2px solid var(--ink); border-radius: 14px; padding: 16px 20px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.1; }
.divgroup + .divgroup { margin-top: 28px; }
/* Divisions: a big game photo beside each group, grades stacked in one column next to it (photo on top on phones) */
.divgroup.with-photo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.divgroup.flip .dg-photo { order: 2; }
.dg-photo { margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 560px; width: 100%; background: #ddd; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18); }
.dg-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 40%); }
.with-photo .divs { grid-template-columns: 1fr; gap: 12px; }
.with-photo .div { padding: 20px 24px; font-size: 30px; }
.divgroup.with-photo + .divgroup.with-photo { margin-top: 56px; }
@media (max-width: 760px) {
  .divgroup.with-photo { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .divgroup.flip .dg-photo { order: 0; }
  .dg-photo { aspect-ratio: 4 / 5; max-height: 460px; }
  .with-photo .divs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .with-photo .div { padding: 14px; font-size: 20px; white-space: normal; }
}
.divgroup h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; font-family: var(--display); font-weight: 800; font-size: 28px; }
.divgroup h3 small { font-family: var(--body); font-weight: 500; font-size: 16px; color: var(--muted); }
@media (max-width: 600px) { .divs { grid-template-columns: 1fr 1fr; gap: 10px; } .div { font-size: 22px; padding: 14px 16px; } }
@media (max-width: 380px) { .div { font-size: 19px; padding: 12px; white-space: nowrap; } }
.div.girls { border-color: var(--red); }
.price { font-family: var(--display); font-weight: 800; font-size: 30px; color: var(--ink); white-space: nowrap; }
.div > span:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tag { font-family: var(--body); background: var(--red); color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; padding: 6px 10px; border-radius: 6px; white-space: nowrap; }
.split { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.split > div { flex: 1 1 380px; display: flex; flex-direction: column; gap: 14px; }
.split p { font-size: 18px; color: var(--muted); }
.split .dates { font-size: 16px; }
.split > .facts { flex: 1 1 460px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fact { background: #fff; border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.fact span { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #55555c; }
.fact b { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 5vw, 28px); line-height: 1.1; overflow-wrap: anywhere; }
.steps { margin: 0; padding: 0; list-style: none; }
.steps li { border-top: 4px solid var(--ink); padding-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.steps .n { font-family: var(--display); font-weight: 800; font-size: 22px; color: var(--red); }
.steps p { color: var(--muted); }
/* How it works: a game photo beside the three steps (photo on top on phones) */
.how { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.how .head { margin-bottom: 24px; }
.how .steps { display: grid; gap: 22px; }
.how-photo { margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; background: #ddd; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18); }
.how-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .how { grid-template-columns: 1fr; gap: 32px; } .how-photo { max-width: 560px; width: 100%; } }
.sponsors { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.sponsors h2 { font-size: 40px; }
.logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 56px; }
.logos img { height: 100px; width: auto; }
.logos .tall { height: 116px; }
.logos a { display: inline-flex; border-radius: 10px; transition: transform 120ms; }
.logos a:hover { transform: scale(1.04); }
.sponsors a { color: #fff; font-weight: 700; }

.seasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.season { background: #fff; border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.season h3 { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1; }
.season .when { font-weight: 700; font-size: 19px; color: var(--red); }
.season .small { font-size: 15px; color: var(--muted); }
.season .btn { align-self: flex-start; margin-top: 8px; }
.season-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.season .season-btns .btn { margin-top: 0; }
.btn-gold { background: #f5b301; color: var(--ink); }
.btn-gold:hover { background: #ffc933; color: var(--ink); }
.season .coach-line { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid #e2e1dd; font-size: 15px; color: var(--muted); }
.season .coach-line a { color: var(--red); font-weight: 700; white-space: nowrap; }
.season .why { font-size: 15px; line-height: 1.45; color: var(--ink); background: #f6f5f2; border-left: 4px solid var(--red); border-radius: 8px; padding: 10px 12px; margin: 4px 0 0; }
.season .soon { font-size: 16px; line-height: 1.45; color: var(--muted); background: #f6f5f2; border-radius: 12px; padding: 14px; margin: 4px 0 0; }
.season .soon b { color: var(--ink); display: block; font-size: 18px; margin-bottom: 2px; }
.btn-ghost-dark { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn-ghost-dark:hover { background: var(--ink); color: #fff; }
.where { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; margin: 4px 0; padding: 12px 14px; border-radius: 12px; background: #f6f5f2; }
.where .pin { width: 22px; height: 22px; fill: var(--red); }
.where b { display: block; font-size: 17px; }
.where span { display: block; font-size: 15px; color: var(--muted); line-height: 1.35; }
.where .dir { font-weight: 700; font-size: 15px; color: var(--red); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .where { grid-template-columns: 22px 1fr; align-items: start; } .where .pin { margin-top: 1px; } .where .dir { grid-column: 2; } }
.tourn .lede { font-size: 18px; color: var(--muted); margin: -8px 0 22px; max-width: 640px; }
.tourn .season { border: 2px solid #e2e1dd; }
.tourn .about { font-size: 16px; white-space: pre-line; }
.prices { width: 100%; border-collapse: collapse; margin: 6px 0 2px; }
.prices th, .prices td { padding: 10px 0; border-bottom: 1px solid #e2e1dd; font-size: 16px; text-align: left; vertical-align: top; }
.prices th { font-weight: 500; padding-right: 12px; }
.prices td { font-family: var(--display); font-weight: 800; font-size: 22px; text-align: right; white-space: nowrap; }
.split > .coach-cta { flex: 0 1 380px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.coach-cta .small { font-size: 15px; color: var(--muted); }
/* updates signup */
.fb-btn { align-self: flex-start; }
/* Facebook: just the follow button (the embedded feed often loaded blank, so it's gone) */
.fb-sec .wrap > div { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.fb-sec p { font-size: 18px; color: var(--muted); }
.updates { background: var(--red); color: #fff; }
.updates .wrap { padding-top: 48px; padding-bottom: 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.updates h2 { font-size: clamp(34px, 5vw, 44px); }
.updates p { color: #ffe3df; font-size: 17px; margin-top: 6px; }
#signup-form { flex: 1 1 420px; max-width: 560px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
#signup-form input { flex: 1 1 220px; font: inherit; font-size: 17px; padding: 12px 14px; border: 2px solid #fff; border-radius: 10px; min-height: 52px; color: var(--ink); background: #fff; }
#signup-form .btn { min-height: 52px; }
#signup-form .signup-msg { flex-basis: 100%; margin: 0; font-weight: 700; color: #fff; min-height: 1.5em; }
.updates input:focus, .updates .btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* contact */
.contact { display: flex; flex-wrap: wrap; gap: 48px; }
.contact > div { flex: 1 1 340px; display: flex; flex-direction: column; gap: 12px; }
.contact p { font-size: 18px; color: var(--muted); }
.contact .direct { color: var(--ink); font-weight: 600; }
form { flex: 1 1 460px; display: flex; flex-direction: column; gap: 16px; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 15px; }
input[type=text], input[type=email], textarea { font: inherit; font-weight: 400; font-size: 17px; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 10px; min-height: 48px; background: #fff; color: var(--ink); width: 100%; }
textarea { resize: vertical; min-height: 130px; }
.check { flex-direction: row; align-items: center; gap: 10px; font-weight: 500; font-size: 16px; }
.check input { width: 22px; height: 22px; accent-color: var(--red); }
.note { font-size: 14px; color: #55555c; }
/* Quick facts under the hero: the answers parents look for first. */
.facts { background: var(--paper); border-bottom: 1px solid #e4e2dc; }
.facts .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding-top: 8px; padding-bottom: 8px; }
.qf { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; color: var(--ink); text-decoration: none; border-left: 4px solid var(--red); margin: 10px 0; }
a.qf:hover { color: var(--ink); background: var(--soft); }
.qf b { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.05; text-transform: uppercase; }
.qf span { font-size: 16px; line-height: 1.4; color: var(--muted); }
@media (max-width: 860px) { .facts .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; } .qf { padding: 14px 14px; margin: 8px 0; } .qf b { font-size: 21px; } .qf span { font-size: 15px; } }
@media (max-width: 380px) { .qf b { font-size: 20px; } .qf { padding: 12px 10px; } }

/* FAQ: tap a question to open the answer. */
.faq-list { max-width: 820px; border-top: 2px solid var(--ink); }
.faq-list details { border-bottom: 2px solid var(--ink); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 2px; font-weight: 700; font-size: 20px; line-height: 1.3; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 0.8; color: var(--red); }
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list summary:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.faq-list .a { padding: 0 2px 22px; font-size: 17px; line-height: 1.55; color: var(--muted); max-width: 700px; }
.faq-list .a p + p { margin-top: 10px; }
@media (max-width: 600px) { .faq-list summary { font-size: 18px; padding: 18px 2px; } }

/* Team badges on the game night cards: the team's color and initials, same as live scores */
.tb { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; border-radius: 8px; background: var(--team); font-family: var(--display); font-weight: 800; font-size: 12.5px; letter-spacing: 0.03em; line-height: 1; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.22); }
.list .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.list .who b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list li.game { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.list li.game .who.lose b, .list li.game .pts.lose { color: #9a9a9a; }
.list li.game .pts { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; }
.list li.game small { grid-column: 1 / -1; }
/* Division buttons open that division's standings on live scores */
a.div { color: var(--ink); text-decoration: none; transition: background 120ms, color 120ms; }
a.div::after { content: "→"; font-family: var(--body); font-weight: 600; font-size: 18px; color: var(--red); white-space: nowrap; }
@media (min-width: 700px) { a.div::after { content: "Standings →"; font-size: 14px; } }
a.div:hover { background: var(--ink); color: #fff; }
a.div:hover::after { color: #fff; }
/* Early price reminder under the top buttons */
.deadline { margin: 0; font-weight: 600; font-size: 16px; color: #e8e8e8; }
.deadline b { color: var(--red-on-dark); }
/* Fall: the season going on now, above the ones open for registration */
.now-on { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: -12px 0 24px; padding: 16px 20px; border-radius: 14px; background: #fff; border: 2px solid var(--ink); text-decoration: none; color: var(--ink); }
.now-on:hover { color: var(--ink); background: #faf9f6; }
.now-on b { font-family: var(--display); font-weight: 800; font-size: 24px; }
.now-on span { color: #555; font-weight: 500; }
.now-on em { font-style: normal; font-weight: 700; color: var(--red); white-space: nowrap; }
@media (max-width: 380px) { .now-on em { white-space: normal; } }
.now-on .live-dot { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--red); vertical-align: 2px; }
/* Title sponsor under the main headline */
/* Title sponsor: big enough to read as the league's partner, not a footnote. */
.presented { display: inline-flex; align-items: center; gap: 20px; align-self: flex-start; color: #fff; text-decoration: none; font-weight: 800; font-size: 17px; line-height: 1.15; letter-spacing: 0.12em; text-transform: uppercase; }
.presented span { padding-right: 20px; border-right: 2px solid rgba(255,255,255,0.35); }
.presented:hover { color: #fff; }
.presented:hover img { transform: scale(1.03); }
.presented img { height: 84px; width: auto; transition: transform 150ms; }
@media (max-width: 700px) { .presented { gap: 16px; font-size: 15px; } .presented span { padding-right: 16px; } .presented img { height: 66px; } }
@media (max-width: 380px) { .presented { gap: 12px; font-size: 13px; } .presented span { padding-right: 12px; } .presented img { height: 56px; } }
/* Rules: six cards, three across on wide screens */
.rules-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .rules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .rules-grid { grid-template-columns: 1fr; } }
/* Hero: the game photo fills the right side and fades into the dark on the left, under the headline
   (on phones it sits on top and fades down into the dark). The words ease in when the page opens. */
.hero { position: relative; overflow: hidden; background: #0f0d0f; }
.hero .wrap { position: static; grid-template-columns: minmax(0, 1fr); min-height: 560px; padding-top: 72px; padding-bottom: 72px; }
.hero-copy { position: relative; z-index: 2; max-width: 560px; }
.hero h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5); }
.hero-photo { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 64%; margin: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; background: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.55) 22%, #000 48%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.55) 22%, #000 48%); }
.hero-photo img { object-position: 30% 40%; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,13,15,0.55) 0%, rgba(15,13,15,0) 35%); }
@media (max-width: 860px) {
  .hero .wrap { min-height: 0; padding-top: min(72vw, 380px); padding-bottom: 40px; gap: 0; }
  .hero-copy { max-width: none; }
  .hero-photo { order: 0; width: 100%; bottom: auto; height: min(84vw, 450px); aspect-ratio: auto; border-radius: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 52%, transparent 100%); }
  .hero-photo::after { display: none; }
}
@keyframes heroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-copy > * { animation: heroIn 0.7s ease-out both; }
.hero-copy > :nth-child(2) { animation-delay: 0.08s; }
.hero-copy > :nth-child(3) { animation-delay: 0.16s; }
.hero-copy > :nth-child(4) { animation-delay: 0.24s; }
.hero-copy > :nth-child(5) { animation-delay: 0.32s; }
.hero-copy > :nth-child(6) { animation-delay: 0.4s; }
.hero-photo img { animation: heroPhoto 1.2s ease-out both; }
@keyframes heroPhoto { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-copy > *, .hero-photo img { animation: none; } }

/* Game night: a real game-night photo behind the three cards, darkened so the cards and text stay readable. */
.gn-sec.dark { position: relative; overflow: hidden; background: #0b0b0b url("/img/gn-bg-1600.jpg") center 45% / cover no-repeat; }
.gn-sec::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,11,0.82) 0%, rgba(11,11,11,0.5) 40%, rgba(11,11,11,0.55) 70%, rgba(11,11,11,0.9) 100%); }
.gn-sec > .wrap { position: relative; }
.gn-sec h2 { text-shadow: 0 2px 14px rgba(0,0,0,0.6); }
.gn-sec .grid3 { margin-top: 120px; }
.gn-sec .card { background: rgba(16,16,18,0.78); border: 1px solid rgba(255,255,255,0.16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
a.gn-sec .card:hover, .gn-sec a.card:hover { background: rgba(16,16,18,0.88); }
/* Computers: slightly smaller cards so more of the photo shows. */
@media (min-width: 861px) {
  .gn-sec .grid3 { max-width: 980px; gap: 16px; }
  .gn-sec .card { padding: 20px 22px; gap: 6px; }
  .gn-sec .card p { font-size: 15.5px; line-height: 1.45; }
  .gn-sec .card-k { font-size: 13px; }
  /* The cards fill with live data (next game night, latest scores, leaders): keep that compact too. */
  .gn-sec .card h3.big { font-size: 26px; }
  .gn-sec .list { gap: 7px; }
  .gn-sec .list li { padding-bottom: 7px; }
  .gn-sec .list li:last-child { padding-bottom: 0; }
  .gn-sec .list li.game { gap: 4px 10px; }
  .gn-sec .list .who { gap: 8px; }
  .gn-sec .list .who b { font-size: 15px; }
  .gn-sec .tb { width: 27px; height: 25px; font-size: 11px; border-radius: 7px; }
  .gn-sec .list li.game .pts { font-size: 21px; }
  .gn-sec .list small { font-size: 12.5px; }
  .gn-sec #gn-2 .list li.game:nth-child(n+3) { display: none; } /* two latest scores on computers, three on phones */
  .gn-sec #gn-2 .list li.game:nth-child(2) { border-bottom: 0; padding-bottom: 0; }
}
/* Phones: show the photo as a wide band under the heading (not zoomed in) that fades into black at both edges,
   with the cards overlapping its lower half. */
@media (max-width: 860px) {
  .gn-sec.dark { background: #0b0b0b; }
  .gn-sec::before {
    top: 110px; bottom: auto; height: calc(100vw * 1.05);
    background:
      linear-gradient(180deg, #0b0b0b 0%, rgba(11,11,11,0.3) 28%, rgba(11,11,11,0.4) 62%, #0b0b0b 100%),
      url("/img/gn-bg-1600.jpg") 42% 0 / 185% auto no-repeat;
  }
  .gn-sec .grid3 { margin-top: 170px; }
}

/* Next level: UTL players who went on to high school football. Photo on the right, words on the left. */
.next .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center; }
.next-photo { margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; background: #222; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.next-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.next-body p { color: #d6d6d6; font-size: 18px; line-height: 1.55; margin-top: 18px; max-width: 560px; }
.next-points { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.next-points li { display: flex; gap: 12px; align-items: baseline; font-size: 17px; line-height: 1.45; color: #fff; }
.next-points li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--red-on-dark); transform: translateY(-1px); }
.next-points b { font-weight: 700; }
@media (max-width: 860px) { .next .wrap { grid-template-columns: 1fr; gap: 28px; } .next-photo { order: -1; max-width: 560px; width: 100%; } }

/* National champions: coaches photo beside the heading, team cards (two newest bigger), then a red "Who's next?" banner */
.champs-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-bottom: 48px; }
.champs-head p { font-size: 19px; line-height: 1.5; color: var(--muted); margin: 16px 0 0; max-width: 520px; }
.champs-photo { margin: 0; }
.champs-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 18px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18); background: #ddd; }
.champs-photo figcaption { margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--muted); }
.champ-grid { display: grid; gap: 20px; }
.champ-grid.champ-big { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.champ-grid.champ-more { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }
.champ { margin: 0; background: #fff; border: 2px solid #e2e1dd; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.champ img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #ddd; }
.champ-body { padding: 18px 20px 20px; border-top: 4px solid var(--red); }
.champ .when { display: flex; align-items: center; gap: 8px; color: var(--red); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.champ .when svg { width: 18px; height: 18px; flex: none; }
.champ h3 { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1; margin-top: 8px; }
.champ .div-name { margin: 6px 0 0; font-size: 16px; font-weight: 600; color: var(--muted); }
.champ-grid.champ-big .champ-body { padding: 22px 26px 24px; }
.champ-grid.champ-big .champ h3 { font-size: 46px; }
.champ-grid.champ-big .champ .when { font-size: 15px; }
.champ-grid.champ-big .champ .div-name { font-size: 18px; }
.whos-next { background: var(--red); color: #fff; text-align: center; padding: 88px 0 92px; }
.whos-next h2 { font-size: clamp(64px, 13vw, 168px); line-height: 0.9; letter-spacing: 0.01em; }
.whos-next p { font-size: clamp(18px, 2.2vw, 22px); color: #ffe3df; margin: 18px auto 0; max-width: 620px; }
.whos-next .btn { margin-top: 30px; background: #fff; color: var(--red); min-height: 56px; padding: 0 34px; font-size: 20px; }
.whos-next .btn:hover { background: var(--ink); color: #fff; }
.whos-next .btn:focus-visible { outline-color: #fff; }
@media (max-width: 960px) { .champ-grid.champ-more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .champs-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
  .champs-photo { max-width: 560px; }
}
@media (max-width: 640px) {
  .champ-grid.champ-big, .champ-grid.champ-more { grid-template-columns: 1fr; gap: 16px; }
  .champ-grid.champ-more { margin-top: 16px; }
  .champ-grid.champ-big .champ h3, .champ h3 { font-size: 36px; }
  .champ-grid.champ-big .champ-body, .champ-body { padding: 16px 18px 18px; }
  .whos-next { padding: 64px 0 68px; }
}

/* Camps on ilmflag.com: open, full or coming soon */
.camp-state { align-self: flex-start; font-weight: 800; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: #15803d; color: #fff; }
.camp-state.is-soon { background: #f5c542; color: #1a1a1a; }
.camp-state.is-full { background: var(--red); }

/* ---------- Inner pages (Register, Events, About): a dark band with the page's headline ---------- */
.page-head { background: #121012; color: #fff; }
.page-head .wrap { padding-top: 56px; padding-bottom: 52px; display: flex; flex-direction: column; gap: 16px; }
.page-head h1 { font-size: clamp(42px, 6vw, 70px); line-height: 0.95; max-width: 920px; }
.page-head .lede { font-size: 19px; line-height: 1.5; color: #e4e4e4; max-width: 680px; }
.page-head .actions { margin-top: 4px; }
@media (max-width: 600px) { .page-head .wrap { padding-top: 30px; padding-bottom: 34px; gap: 12px; } .page-head .lede { font-size: 17px; } }
.block.tight { padding-top: 56px; }
@media (max-width: 600px) { .block { padding: 60px 0; } .block.tight { padding-top: 36px; } }

/* Register: what to know before signing up */
.checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.checks li { background: var(--soft); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; border-left: 4px solid var(--red); }
.checks b { font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.1; }
.checks span { color: var(--muted); font-size: 16px; }
.more-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 26px; font-weight: 700; font-size: 18px; }

/* Home: a band pointing to the Events page */
.ev-band { background: var(--red-dark); color: #fff; }
.ev-band .wrap { padding-top: 48px; padding-bottom: 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 48px; }
.ev-band h2 { font-size: clamp(34px, 5vw, 44px); }
.ev-band p { color: #ffe3df; font-size: 17px; margin-top: 8px; max-width: 620px; }
.ev-band .btn { background: #fff; color: var(--red-dark); }
.ev-band .btn:hover { background: var(--ink); color: #fff; }
.ev-band .eyebrow { color: #ffd2cc; }

/* Events: one card per camp, clinic or tournament */
.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 20px; }
.ev { background: #fff; border: 2px solid #e2e1dd; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.ev-photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 30%; background: #e2e1dd; }
.ev-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ev h3 { font-family: var(--display); font-weight: 800; font-size: 32px; line-height: 1; }
.ev-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 16px; line-height: 1.4; }
.ev-facts dt { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #55555c; padding-top: 2px; }
.ev-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.ev .about { font-size: 15.5px; line-height: 1.5; color: var(--muted); white-space: pre-line; }
.ev .btn { align-self: flex-start; margin-top: auto; }
.ev-sec .lede { font-size: 18px; color: var(--muted); margin: -12px 0 24px; max-width: 680px; }
.empty { font-size: 17px; color: var(--muted); background: #fff; border-radius: 14px; padding: 20px 22px; border: 2px dashed #d6d4cf; }
.empty a { font-weight: 700; }

/* Football Camp Calendar: one line per camp, soonest first */
.cal-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; margin-bottom: 14px; }
.cal-head .lede { margin: 12px 0 0; }
.cal { list-style: none; margin: 18px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.cal li { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 4px 22px; align-items: center; padding: 16px 0; border-bottom: 1px solid #d9d7d1; }
.cal .d { font-family: var(--display); font-weight: 800; line-height: 1; text-transform: uppercase; }
.cal .d b { display: block; font-size: 15px; color: var(--red); letter-spacing: 0.06em; }
.cal .d span { display: block; font-size: 28px; margin-top: 2px; }
.cal h3 { font-size: 20px; }
/* Camp, Tryout, Clinic...: a small tag before the name */
.cal .kind { display: inline-block; margin-right: 8px; padding: 3px 8px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 3px; }
.cal .kind.is-tryout { background: var(--red); }
@media print { body.print-cal .cal .kind { border: 1px solid #000; background: #fff; color: #000; } }
.cal .meta { font-size: 15px; line-height: 1.45; color: var(--muted); margin-top: 3px; }
.cal .meta b { color: var(--ink); font-weight: 600; }
.cal .go { font-weight: 700; white-space: nowrap; }
.print-only { display: none; }
@media (max-width: 600px) {
  .cal li { grid-template-columns: 80px minmax(0, 1fr); padding: 14px 0; }
  .cal .d span { font-size: 22px; }
  .cal .go { grid-column: 2; }
}
/* "Download / print calendar": prints just the calendar (on a phone, the print screen can save it as a PDF). */
@media print {
  body.print-cal { background: #fff; color: #000; font-size: 12pt; }
  body.print-cal .top, body.print-cal footer, body.print-cal .alert, body.print-cal .to-top,
  body.print-cal main > :not(#calendar), body.print-cal .cal-actions { display: none !important; }
  body.print-cal #calendar { padding: 0; background: #fff; }
  body.print-cal .print-only { display: block; margin-bottom: 10px; font-size: 11pt; }
  body.print-cal .cal li { break-inside: avoid; grid-template-columns: 90px minmax(0, 1fr); }
  body.print-cal .cal .go { grid-column: 2; font-weight: 400; font-size: 10pt; color: #000; text-decoration: none; }
  body.print-cal .cal .go::after { content: " " attr(href); word-break: break-all; }
}

/* About: the league story and the five national titles */
.story { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: start; }
.story-body p { font-size: 18px; line-height: 1.6; color: var(--muted); }
.story-body p + p { margin-top: 14px; }
.story-body .head { margin-bottom: 20px; }
.titles-box h3 { font-family: var(--display); font-weight: 800; font-size: 30px; margin-bottom: 14px; }
.titles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.titles li { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; background: var(--soft); border-radius: 12px; border-left: 4px solid var(--red); }
.titles b { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.1; }
.titles span { color: var(--muted); font-size: 15px; }
.titles-box > a { display: inline-block; margin-top: 16px; font-weight: 700; font-size: 18px; }
.places { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
@media (max-width: 860px) { .story { grid-template-columns: 1fr; gap: 32px; } }