@font-face { font-family: 'Alfa'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/alfa.woff2) format('woff2'); }
@font-face { font-family: 'Work'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/work-400.woff2) format('woff2'); }
@font-face { font-family: 'Work'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/work-600.woff2) format('woff2'); }
/* Gladstone Park Cricket Club concept: "the picket fence". Navy and red from the Burras crest, and the white picket fence around
   Jack Ginifer Reserve as the motif. Alfa Slab One for headings, Work Sans for reading. */
:root {
  --navy: #0f1f4a; --navy-2: #0a1636; --red: #d11a28; --red-2: #a8121b; --white: #ffffff; --mist: #f2f4f8; --line: #dde2ec;
  --ink: #101828; --muted: #4d5872; --win: #11804a;
  --d: 'Alfa', Rockwell, 'Courier New', serif; --b: 'Work', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1200px; --r: 8px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; overflow-x: clip; }
body { margin: 0; font: 400 17px/1.6 var(--b); color: var(--ink); background: var(--white); overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0 0 .4em; text-wrap: balance; }
h1, h2 { font-family: var(--d); font-weight: 400; line-height: 1; letter-spacing: -.005em; }
h2 { font-size: clamp(34px, 4.6vw, 56px); }
h2 em, h1 em { font-style: normal; color: var(--red); }
h3 { font: 600 19px/1.3 var(--b); }
p { margin: 0 0 1em; }
ul { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--red); color: #fff; padding: 10px 14px; z-index: 99; }
.skip:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* The fence */
.fence { height: 64px; background-repeat: repeat-x; background-position: bottom left; background-size: 32px 64px; }
.fence.small { height: 40px; background-size: 20px 40px; }

.kicker { display: inline-block; font: 600 12.5px/1 var(--b); letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 3px solid currentColor; }
.navy .kicker, .hero .kicker { color: #ff6b75; }
.red .kicker { color: #fff; }
.lead { font-size: 19px; color: var(--muted); max-width: 660px; }
.navy .lead, .hero .lead { color: #c6cfe2; }
.red .lead { color: #fff; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 600 15.5px/1 var(--b); text-decoration: none; padding: 16px 24px; border-radius: var(--r); border: 2px solid transparent; cursor: pointer; transition: transform .15s, background .15s; }
.btn:hover { transform: translateY(-2px); }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-2); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-line { border-color: var(--navy); color: var(--navy); }
.btn-ghost { border-color: rgba(255,255,255,.6); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.1); }
.go::after { content: "→"; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* Header */
.concept { background: var(--red); color: #fff; text-align: center; font-size: 13px; padding: 8px 16px; }
.site-head { background: #fff; position: sticky; top: 0; z-index: 30; border-bottom: 4px solid var(--navy); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 56px; height: auto; }
.brand span { font: 400 23px/1 var(--d); color: var(--navy); }
.brand small { display: block; font: 600 11px/1.2 var(--b); color: var(--muted); letter-spacing: .1em; margin-top: 5px; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a { text-decoration: none; font: 600 15px/1 var(--b); padding: 11px 12px; color: var(--navy); border-radius: var(--r); }
.nav a:not(.btn):hover { background: var(--mist); }
.nav .btn { margin-left: 8px; padding: 13px 18px; color: #fff; }
.menu-btn { display: none; background: var(--navy); color: #fff; border: 0; font: 600 15px/1 var(--b); padding: 12px 18px; border-radius: var(--r); }

/* Hero: night match under lights, crest on a white ball, fence along the bottom */
.hero { background: radial-gradient(60% 80% at 78% 30%, #23387a 0%, var(--navy) 55%, var(--navy-2) 100%); color: #fff; position: relative; overflow: hidden; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; min-height: min(640px, calc(100vh - 210px)); padding-top: 56px; padding-bottom: 30px; }
.hero h1 { font-size: clamp(54px, 7.4vw, 104px); margin-bottom: 22px; }
.hero .lead { margin-bottom: 28px; }
.hero-badge { position: relative; justify-self: center; width: 100%; max-width: 400px; }
.disc { aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; padding: 15%; overflow: hidden; box-shadow: 0 0 0 10px rgba(255,255,255,.12), 0 0 0 22px rgba(226,35,49,.35), 0 30px 60px rgba(0,0,0,.45); }
.disc img { width: 100%; height: auto; }
.laugh { position: absolute; right: -4%; top: 4%; background: var(--red); color: #fff; font: 400 22px/1 var(--d); padding: 12px 18px 14px; border-radius: 999px 999px 999px 4px; transform: rotate(8deg); box-shadow: 0 10px 22px rgba(0,0,0,.3); }
.hero .fence { margin-top: 10px; }

/* Next game, straight from PlayHQ */
.hero-next { display: inline-grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; margin-top: 26px; padding: 13px 20px 13px 13px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: var(--r); text-decoration: none; max-width: 100%; }
.hero-next[hidden] { display: none; }
.hero-next:hover { border-color: #fff; }
.hero-next .lbl { grid-row: span 2; display: inline-flex; align-items: center; gap: 7px; background: var(--red); color: #fff; font: 600 11px/1 var(--b); letter-spacing: .12em; text-transform: uppercase; padding: 9px 11px; border-radius: 4px; }
.hero-next .lbl i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.6s infinite; will-change: opacity; }
.hero-next b { font: 400 19px/1.15 var(--d); }
.hero-next .when { font-size: 13.5px; color: #c6cfe2; }
@keyframes blink { 50% { opacity: .25; } }

/* Sections */
.section { padding: 92px 0; }
.navy { background: var(--navy); color: #fff; }
.navy h2, .navy h3 { color: #fff; }
.red { background: var(--red); color: #fff; }
.red h2, .red h3 { color: #fff; }
.mist { background: var(--mist); }
#captains { padding-bottom: 0; }
#captains .caps { margin-bottom: 64px; }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 38px; }
.head > div { max-width: 760px; }
.sub { font: 400 26px/1 var(--d); margin-bottom: 16px; color: var(--navy); }

/* Live games */
.live { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin: 0; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #2fbf6b; position: relative; }
.dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #2fbf6b; animation: ring 2s infinite; will-change: transform, opacity; }
@keyframes ring { from { transform: scale(1); opacity: .6; } 70%, to { transform: scale(2.8); opacity: 0; } }
.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 12px; }
.game { background: #fff; border: 2px solid var(--line); border-radius: var(--r); padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 3px; position: relative; }
.game.home { border-color: var(--navy); }
.game .tag2 { position: absolute; top: 16px; right: 16px; font: 600 10.5px/1 var(--b); letter-spacing: .1em; text-transform: uppercase; background: var(--mist); color: var(--muted); padding: 7px 10px; border-radius: 4px; }
.game.home .tag2 { background: var(--navy); color: #fff; }
.game .tag2.win { background: var(--win); color: #fff; }
.game .g { font: 600 11.5px/1.3 var(--b); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-right: 70px; }
.game .t { font: 400 22px/1.1 var(--d); margin: 10px 0 4px; color: var(--navy); }
.game .t small { display: block; font: 600 13px/1.2 var(--b); color: var(--red-2); margin-bottom: 4px; }
.game .w { font-weight: 600; font-size: 15px; }
.game .v { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.xi-btn { margin-top: auto; align-self: flex-start; background: var(--navy); color: #fff; border: 0; font: 600 13px/1 var(--b); padding: 11px 15px; border-radius: 4px; cursor: pointer; }
.xi-btn.fresh { background: var(--red-2); }
.xi-wait { margin-top: auto; font-size: 13px; color: var(--muted); }
.watch { display: inline-block; margin: 2px 0 6px; font-weight: 600; font-size: 13px; color: var(--red-2); }
.empty { color: var(--muted); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0 16px; }
.tabs button { font: 400 16px/1 var(--d); padding: 11px 16px; border-radius: 4px; border: 2px solid var(--navy); background: #fff; color: var(--navy); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--navy); color: #fff; }
.fx { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; align-items: start; }
.stack { display: grid; gap: 16px; }
.panel { background: #fff; border: 2px solid var(--line); border-radius: var(--r); padding: 22px; min-width: 0; }
.panel h3 { font: 400 20px/1.1 var(--d); margin: 0; color: var(--navy); }
.ph { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ph span { font-size: 14px; color: var(--muted); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: 92px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.rows li[hidden] { display: none; }
.rows li.next { background: #fdecee; margin: 0 -12px; padding: 11px 12px; border-radius: 4px; border-top-color: transparent; box-shadow: inset 4px 0 0 var(--red); }
.rows .d { font: 400 15px/1.1 var(--d); color: var(--navy); }
.rows .d small, .rows .o small { display: block; font: 400 13px/1.3 var(--b); color: var(--muted); }
.rows .o b { display: block; font-weight: 600; }
.rows .r { font-size: 14px; font-weight: 600; text-align: right; }
.rows .r em { display: block; font-style: normal; font: 600 10.5px/1 var(--b); letter-spacing: .1em; text-transform: uppercase; color: var(--red-2); margin-bottom: 4px; }
.rows .r.win { color: var(--win); }
.rows .r.loss { color: #6a7180; }
.more { margin-top: 14px; background: var(--navy); color: #fff; border: 0; font: 600 13px/1 var(--b); padding: 12px 16px; border-radius: 4px; cursor: pointer; }
.ladder { width: 100%; border-collapse: collapse; font-size: 14px; }
.ladder th { text-align: left; font: 600 10.5px/1 var(--b); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 8px 6px; border-bottom: 3px solid var(--navy); }
.ladder td { padding: 8px 6px; border-bottom: 1px solid var(--line); }
.ladder tr.ours td { background: #fdecee; font-weight: 600; }
.xi { margin: 0; padding: 0 0 0 26px; columns: 2; column-gap: 22px; font-size: 15px; }
.xi li { padding: 4px 0; break-inside: avoid; }
.xi li.tbc { color: var(--muted); font-style: italic; }
.xi i { font-style: normal; font: 600 10px/1 var(--b); text-transform: uppercase; background: var(--red); color: #fff; padding: 3px 6px; border-radius: 4px; vertical-align: 2px; }

/* Captains */
.caps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cap { background: var(--navy-2); border-radius: var(--r); overflow: hidden; border-bottom: 5px solid var(--red); }
.cap figure { margin: 0; aspect-ratio: 7 / 8.5; overflow: hidden; }
.cap figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.cb { padding: 16px 18px 18px; }
.cap .xi { display: inline-block; background: var(--red); color: #fff; font: 600 11px/1 var(--b); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border-radius: 4px; margin-bottom: 10px; }
.cap h3 { font: 400 23px/1.05 var(--d); margin-bottom: 4px; }
.cap p { margin: 0; color: #c6cfe2; font-size: 14px; }

/* Join */
.whys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.why { border: 2px solid var(--navy); border-radius: var(--r); padding: 22px; position: relative; }
.why::before { content: ""; position: absolute; left: 22px; top: -2px; width: 40px; height: 5px; background: var(--red); }
.why h3 { font: 400 22px/1.1 var(--d); color: var(--navy); }
.why p { margin: 0; color: var(--muted); font-size: 15.5px; }
.join2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.train, .signup { background: var(--mist); border-radius: var(--r); padding: 26px; }
.train h3, .signup h3 { font: 400 24px/1.1 var(--d); color: var(--navy); }
.train ul { list-style: none; padding: 0; }
.train li { padding: 10px 0; border-top: 1px solid var(--line); display: grid; gap: 2px; font-size: 15px; }
.train li b { color: var(--navy); }
.train li span { color: var(--muted); }
.signup { background: var(--navy); color: #fff; }
.signup h3 { color: #fff; }
.signup p { color: #c6cfe2; }
.signup .btn-line { border-color: rgba(255,255,255,.6); color: #fff; }
.closes { font-size: 14px; font-weight: 600; color: #ff9aa1; margin: 0 0 16px; }

/* Sponsors */
.sps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sp { background: #fff; color: var(--ink); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; }
.sp small { font: 600 11px/1.2 var(--b); letter-spacing: .12em; text-transform: uppercase; color: var(--red-2); }
.sp h3 { font: 400 24px/1.1 var(--d); color: var(--navy); margin: 10px 0 8px; }
.sp p { margin: 0; color: var(--muted); font-size: 15px; }
.sp.ask { background: var(--navy); color: #fff; }
.sp.ask small { color: #ff9aa1; }
.sp.ask h3 { color: #fff; }
.sp.ask ul { padding: 0 0 0 18px; margin: 0 0 18px; font-size: 14.5px; color: #c6cfe2; }
.sp.ask .btn { margin-top: auto; align-self: flex-start; background: var(--red); }

/* Club */
.grounds { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 48px; }
.ground { background: #fff; border-radius: var(--r); padding: 24px; border-top: 5px solid var(--navy); }
.ground h3 { font: 400 24px/1.1 var(--d); color: var(--navy); }
.ground .ad { font-weight: 600; font-size: 14px; color: var(--red-2); margin-bottom: 8px; }
.ground p { color: var(--muted); font-size: 15px; margin-bottom: 8px; }
.ground a { font-weight: 600; font-size: 14px; }
.two { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 40px; align-items: start; }
.people { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.person { display: grid; gap: 1px; background: #fff; padding: 14px 16px; border-radius: var(--r); min-width: 0; }
.person small { font: 600 10.5px/1.25 var(--b); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.person b { font-size: 16px; font-weight: 600; }
.person a { font-size: 14px; color: var(--navy); overflow-wrap: anywhere; min-height: 24px; display: flex; align-items: center; }
.general { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.general li { background: #fff; border: 1px solid var(--line); padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 14px; }
.general li.lbl { background: none; border: 0; padding-left: 0; color: var(--muted); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.safe { background: var(--navy); color: #fff; padding: 26px; border-radius: var(--r); }
.safe h3 { font: 400 22px/1.1 var(--d); }
.safe p { color: #c6cfe2; font-size: 15px; }
.safe a { color: #fff; }

/* Footer */
.foot { background: var(--navy-2); color: #b7c1d8; padding: 0 0 34px; font-size: 15px; }
.foot .fence { background-color: var(--mist); margin-bottom: 56px; }
.foot .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.foot img { width: 96px; height: auto; background: #fff; border-radius: 50%; padding: 10px; margin-bottom: 14px; }
.foot h2 { font: 400 22px/1 var(--d); color: #fff; margin-bottom: 10px; }
.foot ul { list-style: none; padding: 0; }
.foot li { padding: 3px 0; }
.foot a { color: #fff; }
.ack { margin: 40px 0 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); font-size: 13.5px; }

@media (prefers-reduced-motion: reduce) {
  .dot::after, .hero-next .lbl i { animation: none; }
  .btn:hover { transform: none; }
}
@media (max-width: 1080px) {
  .caps, .whys, .sps { grid-template-columns: repeat(2, 1fr); }
  .nav a { padding: 11px 8px; }
}
@media (max-width: 960px) {
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; flex-direction: column; align-items: stretch; padding: 10px 20px 20px; box-shadow: 0 20px 30px rgba(15,31,74,.16); }
  .nav.open { display: flex; }
  .nav a { padding: 15px 10px; font-size: 17px; }
  .nav .btn { margin: 10px 0 0; justify-content: center; }
  .site-head .wrap { position: relative; }
}
@media (max-width: 860px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 30px; gap: 26px; }
  .hero-badge { order: -1; max-width: 230px; }
  .laugh { font-size: 17px; right: -20%; }
  .fx, .join2, .two, .grounds { grid-template-columns: minmax(0, 1fr); }
  .foot .cols { grid-template-columns: 1fr 1fr; }
  .foot .cols > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .section { padding: 64px 0; }
  .whys, .sps, .people { grid-template-columns: minmax(0, 1fr); }
  .caps { gap: 10px; }
  .cap h3 { font-size: 18px; }
  .cb { padding: 12px; }
  .rows li { grid-template-columns: 70px 1fr; }
  .rows .r { grid-column: 2; text-align: left; }
  .xi { columns: 1; }
  .brand span { font-size: 19px; }
}