/* Game Night: the site in a bold, sporty look. The first part is Original Elite's complete styles (every part of every
   page, in dark and light), so this theme stands on its own; the Game Night layer at the end changes the look. */
:root {
  --ink: #0B0B0D;
  --coal: #141417;
  --line: #26262C;
  --paper: #F3F1F1;
  --text: #F4F2F0;
  --soft: #CFCBC7;
  --mute: #A8A4A0;
  --red: #E0262F;
  --red-text: #FF6A70;
  --red-deep: #8A1219;
  --display: "Big Shoulders Display", Impact, "Arial Narrow Bold", sans-serif;
  --body: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Photo grade, switchable in the preview panel */
  --grade: saturate(1.05) contrast(1.08) brightness(0.68);
  --grade-card: saturate(1.05) contrast(1.05) brightness(0.95);
  --wash: linear-gradient(100deg, rgba(11,11,13,0.96) 0%, rgba(11,11,13,0.7) 42%, rgba(11,11,13,0.15) 75%, rgba(120,14,20,0.35) 100%);
  --tint: rgba(120,14,20,0.45);
  color-scheme: dark;
}
html[data-grade="red"] {
  --grade: grayscale(1) contrast(1.25) brightness(0.5);
  --grade-card: grayscale(1) contrast(1.15) brightness(0.8);
  --wash: linear-gradient(100deg, rgba(11,11,13,0.92) 0%, rgba(90,8,14,0.7) 50%, rgba(224,38,47,0.45) 100%);
  --tint: rgba(160,16,24,0.6);
}
html[data-grade="natural"] {
  --grade: saturate(1.05) contrast(1.05) brightness(0.7);
  --grade-card: saturate(1.05) contrast(1.05);
  --wash: linear-gradient(100deg, rgba(11,11,13,0.9) 0%, rgba(11,11,13,0.55) 45%, rgba(11,11,13,0) 80%);
  --tint: rgba(11,11,13,0.55);
}
html[data-grade="mono"] {
  --grade: grayscale(1) contrast(1.35) brightness(0.6);
  --grade-card: grayscale(1) contrast(1.2) brightness(0.9);
  --wash: linear-gradient(100deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 45%, rgba(0,0,0,0.1) 80%);
  --tint: rgba(0,0,0,0.6);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--text); font: 16px/1.6 var(--body); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--red-text); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--red-text); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; }
.wrap { max-width: 1280px; margin: 0 auto; padding-left: max(16px, 2.5vw, env(safe-area-inset-left, 0px)); padding-right: max(16px, 2.5vw, env(safe-area-inset-right, 0px)); }
.display { font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: 0.92; letter-spacing: 0.01em; margin: 0; }
.eyebrow { font-weight: 700; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red-text); }
.muted { color: var(--mute); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 4px; font-weight: 700; border: 1.5px solid transparent; cursor: pointer; font-family: var(--body); font-size: 16px; }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: #C41E26; color: #fff; }
.btn-light { background: var(--text); color: var(--ink); }
.btn-light:hover { color: var(--ink); background: #fff; }
.btn-line { border-color: currentColor; }
.link-red { color: var(--red-text); font-weight: 700; }

/* Preview ribbon */
.ribbon { background: #FFD24A; color: #1A1400; font-size: 14px; font-weight: 600; text-align: center; padding: 6px 16px; }

/* Header */
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(11,11,13,0.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); }
.site-head .wrap { display: flex; align-items: center; gap: 24px; min-height: 72px; flex-wrap: wrap; padding-block: 8px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 48px; height: 48px; border-radius: 50%; }
.brand span { font-family: var(--display); font-weight: 800; font-size: 23px; letter-spacing: 0.05em; text-transform: uppercase; }
.nav { display: flex; gap: 22px; flex: 1 1 auto; justify-content: center; font-weight: 600; font-size: 15px; flex-wrap: wrap; }
.nav a[aria-current="page"] { color: var(--red-text); }
.head-actions { display: flex; gap: 16px; align-items: center; }
.head-actions .shop { color: var(--mute); font-weight: 600; font-size: 15px; }
.menu-btn { display: none; }

/* Hero */
.hero { position: relative; overflow: hidden; min-height: 450px; display: flex; }
.hero > img, .band-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--grade); transition: filter 0.3s; }
.hero::after { content: ""; position: absolute; inset: 0; background: var(--wash); }
.hero .wrap { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 24px; padding-top: 80px; padding-bottom: 44px; }
.hero h1 { font-size: clamp(56px, 7vw, 100px); }
.hero h1 span { color: var(--red); }
.hero p.lead { margin: 0; max-width: 34em; font-size: 18px; color: #E2DEDA; }
.hero .actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero .badge { align-self: flex-end; display: flex; gap: 12px; align-items: center; background: rgba(11,11,13,0.78); border: 1px solid #34343B; border-radius: 6px; padding: 10px 16px 10px 10px; font-size: 14px; }
.hero .badge img { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; }
.page-hero { min-height: 280px; }
.page-hero h1 { font-size: clamp(40px, 5vw, 64px); }

/* Bands and sections */
.band-paper { background: var(--paper); color: #141416; }
.band-paper .muted { color: #46434A; }
.band-paper .link-red { color: var(--red-deep); }
.band-coal { background: var(--coal); border-block: 1px solid var(--line); }
.section { padding-block: 64px; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.section-head h2 { font-size: clamp(32px, 3.4vw, 44px); }
.section-head p { margin: 0; max-width: 30em; }
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding-block: 40px; }
.values h3 { font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 1; text-transform: uppercase; margin: 0 0 8px; }
.values .red { color: #C41E26; }
.values p { margin: 0; }

.split { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.split > * { flex: 1 1 440px; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.feature-photo { position: relative; }
.feature-photo img { width: 100%; height: 380px; object-fit: cover; object-position: 50% 35%; border-radius: 6px; }
.flag { position: absolute; left: -12px; top: 24px; background: var(--red); color: #fff; font-family: var(--display); font-weight: 900; font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 16px; }

.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card-photo { display: flex; flex-direction: column; gap: 12px; }
.card-photo img { width: 100%; height: 230px; object-fit: cover; border-radius: 6px; filter: var(--grade-card); transition: filter 0.3s; }
.card-photo h3 { font-family: var(--display); font-weight: 800; font-size: 24px; text-transform: uppercase; margin: 0; }
.card-photo p { margin: 0; color: var(--soft); font-size: 15px; }

.event { background: var(--paper); color: #141416; border-radius: 6px; overflow: hidden; display: flex; flex-wrap: wrap; }
.event .date { flex: 0 0 150px; background: var(--red); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; }
.event .date b { font-family: var(--display); font-weight: 900; font-size: 40px; line-height: 0.9; }
.event .date span { font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.event .body { flex: 1 1 300px; padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.tile { border: 1px solid #2E2E35; border-radius: 6px; padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.tile small { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.tile b { font-size: 19px; }
.panel { background: var(--coal); border: 1px solid var(--line); border-radius: 6px; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.cal { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px 16px; align-items: baseline; font-size: 15px; }
.cal b { font-family: var(--display); font-size: 22px; color: var(--red-text); }

.band-photo { position: relative; overflow: hidden; }
.band-photo::after { content: ""; position: absolute; inset: 0; background: var(--tint); }
.band-photo .wrap { position: relative; z-index: 1; }
.quote { max-width: 900px; margin: 0 auto; padding-block: 72px; display: flex; flex-direction: column; gap: 24px; align-items: center; text-align: center; }
.quote blockquote { margin: 0; font-size: clamp(18px, 1.9vw, 24px); line-height: 1.38; font-weight: 500; min-height: 4.2em; }
.quote cite { font-style: normal; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 14px; }
.dots { display: flex; gap: 4px; }
.dots button { width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.dots button span { display: block; height: 6px; width: 14px; border-radius: 3px; background: rgba(255,255,255,0.4); transition: width 0.2s; }
.dots button[aria-current="true"] span { width: 36px; background: #fff; }

.fern { display: flex; align-items: center; gap: 14px; }
.mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mosaic img { width: 100%; height: 340px; object-fit: cover; border-radius: 6px; filter: var(--grade-card); }
.mosaic .pair { display: flex; flex-direction: column; gap: 14px; }
.mosaic .pair img { height: 163px; }

.news-card { display: flex; flex-direction: column; gap: 12px; }
.news-card img { width: 100%; height: 200px; object-fit: cover; object-position: 50% 0; border-radius: 6px; }
.news-card .eyebrow { color: var(--red-deep); letter-spacing: 0.12em; }
.band-coal .news-card .eyebrow, body:not(.x) .section:not(.band-paper) .news-card .eyebrow { color: var(--red-text); }
.news-card h3 { margin: 0; font-size: 19px; line-height: 1.25; }
.around { border-top: 1px solid #D6D2D2; margin-top: 28px; padding-top: 20px; display: flex; gap: 28px; flex-wrap: wrap; font-size: 15px; }

.support { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-block: 48px; }
.support p { margin: 0; flex: 1 1 480px; color: var(--soft); }

/* People */
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.person { background: var(--coal); border: 1px solid var(--line); border-radius: 6px; padding: 22px; display: flex; gap: 16px; align-items: center; }
.initials { flex: 0 0 64px; height: 64px; border-radius: 50%; background: var(--ink); border: 2px solid var(--red); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 26px; }
.person b { display: block; font-size: 18px; }

/* Prose pages (policies, news articles) */
.prose { max-width: 760px; }
.prose h2 { font-family: var(--display); font-weight: 800; font-size: 26px; text-transform: uppercase; margin: 40px 0 8px; line-height: 1; }
.prose h3 { font-size: 20px; margin: 28px 0 6px; }
.prose p, .prose li { color: #E2DEDA; }
.prose ul { padding-left: 1.2em; }
.note { background: #2A2410; color: #FFE7A3; border-radius: 6px; padding: 14px 18px; font-size: 15px; }
.list-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.list-links a { border: 1px solid var(--line); border-radius: 6px; padding: 18px 20px; font-weight: 700; display: flex; justify-content: space-between; gap: 12px; }

/* Shop */
.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.product { background: var(--paper); color: #141416; border-radius: 6px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.product img { width: 100%; height: 200px; object-fit: contain; }
.product .row { display: flex; justify-content: space-between; gap: 10px; color: #46434A; font-size: 14px; }
.product .row b { color: #141416; font-size: 18px; }
.sizes { display: flex; gap: 6px; flex-wrap: wrap; }
.sizes span { border: 1px solid #CFCAC4; border-radius: 4px; padding: 2px 8px; font-size: 13px; }

/* Forms (shown, not yet working in the preview) */
.form { display: grid; gap: 16px; max-width: 640px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 15px; }
.form input, .form select, .form textarea { min-height: 48px; background: var(--coal); color: var(--text); border: 1px solid #3A3A42; border-radius: 4px; padding: 10px 12px; font: 16px var(--body); }
.form textarea { min-height: 140px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Footer */
.site-foot { background: #000; border-top: 4px solid var(--red); }
.site-foot .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-block: 56px 44px; font-size: 15px; }
.site-foot img { width: 92px; height: 92px; border-radius: 50%; }
.site-foot h2 { font: 700 13px var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); margin: 0 0 8px; }
.site-foot nav { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 1100px) {
  .nav { display: none; }
  .nav.open { display: flex; flex-direction: column; flex: 1 0 100%; order: 3; align-items: flex-start; gap: 4px; padding-bottom: 12px; }
  .nav.open a { padding: 10px 0; }
  .menu-btn { display: inline-flex; margin-left: auto; width: 44px; height: 44px; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--text); cursor: pointer; }
  .head-actions .shop { display: none; }
  .head-actions { order: 2; }
}
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3, .products, .people, .values { grid-template-columns: minmax(0, 1fr); }
  .site-foot .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { min-height: 520px; }
  .hero .badge { align-self: flex-start; }
  .card-photo img { height: 220px; }
  .feature-photo img { height: 320px; }
  .flag { left: 0; }
  .mosaic img { height: 280px; }
  .mosaic .pair img { height: 133px; }
  .list-links, .grid-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .head-actions { display: none; }
  .nav.open + .head-actions { display: flex; order: 4; padding-bottom: 12px; }
  .brand span { font-size: 19px; }
  .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .site-foot .wrap { grid-template-columns: minmax(0, 1fr); }
  .event .date { flex-basis: 100%; flex-direction: row; gap: 12px; padding: 12px; }
  .event .date b { font-size: 40px; }
  .section { padding-block: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Testimonials: one at a time, left and right */
.pager { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; grid-template-areas: "prev track next" ". count ."; gap: 16px 24px; align-items: center; max-width: 1040px; margin: 0 auto; }
.pager .prev { grid-area: prev; } .pager .next { grid-area: next; } .pager-track { grid-area: track; } .pager-count { grid-area: count; text-align: center; margin: 0; color: var(--mute); font-weight: 600; font-variant-numeric: tabular-nums; }
.pager-btn { width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid #3A3A42; background: var(--coal); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pager-btn:hover { border-color: var(--red); color: var(--red-text); }
.pager-slide { margin: 0; background: var(--coal); border: 1px solid var(--line); border-radius: 8px; padding: clamp(28px, 5vw, 56px); display: flex; flex-direction: column; gap: 16px; min-height: 360px; touch-action: pan-y; }
.pager-mark { font-family: var(--display); font-weight: 900; font-size: 80px; line-height: 0.5; color: var(--red); height: 32px; }
.pager-slide h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.6vw, 32px); text-transform: uppercase; line-height: 1; }
.pager-slide blockquote { margin: 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: #E2DEDA; }
.pager-slide figcaption { margin-top: auto; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 14px; display: flex; flex-direction: column; gap: 2px; }
.pager-slide figcaption span { color: var(--mute); font-weight: 600; letter-spacing: 0.08em; }
.pager-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; max-width: 1040px; margin: 40px auto 0; }
.pager-foot p { margin: 0; }
.form .stars { border: 0; padding: 0; margin: 0; display: flex; gap: 14px; flex-wrap: wrap; }
.form .stars legend { font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.form .stars label, .form .check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
.form .stars input, .form .check input { min-height: auto; width: 20px; height: 20px; }
@media (max-width: 700px) {
  .pager { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "track track" "prev next" "count count"; }
  .pager .prev { justify-self: end; } .pager .next { justify-self: start; }
  .pager-slide { min-height: 0; }
}

/* Every page after the home page uses about 80% of the window's width */
.inner .wrap { max-width: none; width: 80%; padding-left: 0; padding-right: 0; }
.inner .prose { max-width: none; }
.inner .pager, .inner .pager-foot { max-width: none; }
.inner .form { max-width: none; }
@media (max-width: 900px) {
  .inner .wrap { width: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
}
.pager-slide[hidden] { display: none; }
.form-status { margin: 0; font-weight: 600; min-height: 1.6em; }
.form-status.ok { color: #7FD39B; }
.form-status.bad { color: var(--red-text); }

/* Shop: buy form on each product */
.product .buy { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 8px; }
.product .buy label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.product .buy select, .product .buy input { min-height: 40px; padding: 6px 8px; border: 1px solid #C9C4BE; border-radius: 4px; font: inherit; background: #fff; }
.product .buy input[type=number] { width: 70px; }
.product .buy .form-status { flex-basis: 100%; margin: 0; }
.product .buy button[disabled] { opacity: .5; cursor: default; }

/* Jersey lines and the session agenda */
.jersey-line { display: grid; gap: 8px; border: 1px solid #CFCBC6; border-radius: 6px; padding: 12px; margin-bottom: 8px; }
.agenda { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.agenda-row { display: grid; grid-template-columns: 150px 1fr auto auto; gap: 16px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.agenda-row:hover { background: rgba(255,255,255,0.04); }
.agenda-row .when { display: flex; flex-direction: column; font-size: 14px; color: var(--mute); }
.agenda-row .when b { color: #fff; font-size: 16px; }
.agenda-row .what { display: flex; flex-direction: column; }
.agenda-row .left { font-weight: 700; color: var(--red-text); }
.agenda-row .left.out { color: var(--mute); }
.agenda-row .price { font-weight: 700; min-width: 3.5em; text-align: right; }
@media (max-width: 640px) { .agenda-row { grid-template-columns: 1fr auto; } .agenda-row .when { grid-column: 1 / -1; flex-direction: row; gap: 10px; } .agenda-row .price { display: none; } }

/* People: cards are links or buttons; the committee card opens a small dialog */
button.person, a.person { width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; }
button.person:hover, a.person:hover { border-color: var(--red); }
.person-card { background: var(--coal); color: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 28px; max-width: 360px; width: calc(100% - 32px); text-align: center; }
.person-card::backdrop { background: rgba(0,0,0,0.7); }
.person-card[open] { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.person-card .initials { flex: none; width: 72px; height: 72px; }
.person-card h3 { margin: 0; font-size: 34px; }
.person-card .close { position: absolute; top: 8px; right: 12px; background: none; border: 0; color: var(--mute); font-size: 28px; cursor: pointer; }

/* Events around us: two smaller columns */
.around-panel { width: 100%; }
.cal2 { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; }
.cal2.one { grid-template-columns: minmax(0, 1fr); }
.cal2 li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; font-size: 14px; line-height: 1.35; padding: 8px 0; border-bottom: 1px solid var(--line); }
.cal2 li > b { color: var(--red-text); font-weight: 700; }
.cal2 a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
@media (max-width: 760px) { .cal2 { grid-template-columns: minmax(0, 1fr); } }

/* Long text (policies, news): tighter paragraphs, real lists */
.prose.stack { gap: 14px; }
.prose ul { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; }
.prose li { line-height: 1.55; }
.prose h2 { margin: 28px 0 0; }
.prose strong { color: #fff; }

/* News: one big story and four more */
.news-feature { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; margin-bottom: 28px; }
.news-feature img { width: 100%; height: 340px; object-fit: cover; object-position: 50% 0; border-radius: 6px; }
.news-feature .body { display: flex; flex-direction: column; gap: 12px; }
.news-feature .eyebrow { color: var(--red-deep); letter-spacing: 0.12em; }
.news-feature h3 { font-size: clamp(30px, 3.4vw, 46px); margin: 0; line-height: 1.05; }
.news-feature p { margin: 0; color: #46434A; font-size: 17px; }
.news-subs .news-card img { height: 150px; }
.btn-dark { display: inline-block; background: #141416; color: #fff; border-radius: 4px; padding: 12px 20px; font-weight: 700; }
@media (max-width: 760px) { .news-feature { grid-template-columns: minmax(0, 1fr); } .news-feature img { height: 220px; } .news-subs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Calendar */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { background: transparent; color: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--red); border-color: var(--red); }
.cal-day { margin: 18px 0 4px; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
[hidden] { display: none !important; }
.agenda-row.event-row .when b { color: var(--red-text); }

/* Source chip beside news dates */
.src-chip { display: inline-block; background: var(--red); color: #fff; border-radius: 999px; padding: 1px 10px; font-size: 12px; letter-spacing: 0.06em; margin-right: 6px; }
/* A page on plain black with 10% showing down each edge (wide screens only; phones and tablets go edge to edge) */
@media (min-width: 1000px) {
  body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: #000; }
  .page { width: 80%; margin: 0 auto; background: var(--ink); min-height: 100vh; }
  .ribbon { position: relative; }
}

/* Home photo pager: small dots, but each is a 28px tap target for fingers */
.hero-dots { position: absolute; left: 0; right: 0; bottom: 6px; z-index: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: 0; }
.hero-dots button { width: 28px; height: 28px; background: none; border: 0; padding: 0; cursor: pointer; position: relative; }
.hero-dots button::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: rgba(255,255,255,0.5); }
.hero-dots button[aria-current="true"]::after { background: var(--red); inset: 8px; border: 1px solid #fff; }

/* Month calendar */
.cal-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.cal-title { margin: 0 6px; font-size: clamp(24px, 3vw, 34px); min-width: 7.5em; text-align: center; }
.cal-legend { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mute); }
.cal-legend .bub { display: inline-block; width: 14px; height: 14px; padding: 0; border-radius: 50%; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { text-align: center; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); padding: 4px 0; }
.cal-cell { min-height: 104px; background: #141416; border: 1px solid var(--line); border-radius: 6px; padding: 6px; color: #fff; font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.cal-cell:hover { border-color: #fff; }
.cal-cell.other { opacity: 0.4; }
.cal-cell.past .bubs { opacity: 0.6; }
.cal-cell.today .num { background: var(--red); border-radius: 999px; padding: 0 7px; }
.cal-cell.picked { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.cal-cell .num { font-weight: 700; font-size: 14px; align-self: flex-start; }
.cal-cell .bubs { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bub { display: block; font-size: 12px; line-height: 1.25; padding: 2px 7px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bub.elite { background: var(--red); color: #fff; }
.bub.feed { background: transparent; color: #fff; border: 1.5px solid #fff; padding: 0 6px; }
.cal-cell .more { font-size: 11px; color: var(--mute); }
.cal-day-panel { margin-top: 18px; }
@media (max-width: 760px) {
  .cal-cell { min-height: 54px; padding: 4px; align-items: center; }
  .cal-cell .num { align-self: center; }
  .cal-cell .bubs { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 3px; }
  .cal-cell .bub { width: 9px; height: 9px; padding: 0; font-size: 0; border-radius: 50%; }
  .cal-cell .bub.feed { border-width: 1.5px; }
  .cal-cell .more { display: none; }
  .cal-legend { margin-left: 0; width: 100%; }
}
/* Coach photos: keep heads and the ball in frame instead of cropping to the middle (legs) */
[data-coach-photos] img { object-position: 50% 28%; }

/* Test-mode banner: impossible to miss */
.test-banner { display: flex; gap: 16px; align-items: center; margin: 0 0 22px; padding: 16px 20px; border-radius: 6px; color: #141416; background: repeating-linear-gradient(-45deg, #FFD60A 0 18px, #F2C400 18px 36px); border: 3px solid #141416; font-size: 16px; font-weight: 600; }
.test-banner b { background: #141416; color: #FFD60A; padding: 6px 12px; border-radius: 4px; font-family: var(--display); font-size: 24px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 640px) { .test-banner { flex-direction: column; align-items: flex-start; } }

/* Drop-down menus: open on hover or keyboard focus; a first tap opens them on touch screens */
.nav-group { position: relative; padding-block: 14px; margin-block: -14px; }
.nav-top::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 7px; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute); transform: rotate(45deg); }
.dd { display: none; position: absolute; top: calc(100% - 6px); left: -16px; min-width: 250px; padding: 10px 0; flex-direction: column; background: #141416; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 16px 40px rgba(0,0,0,0.55); z-index: 30; }
.nav-group:hover .dd, .nav-group:focus-within .dd, .nav-group.open .dd { display: flex; }
.dd a { padding: 9px 20px; font-weight: 500; white-space: nowrap; }
.dd a:hover { background: rgba(255,255,255,0.06); }
.dd a[aria-current="page"] { color: var(--red-text); }
.dd .dd-head { padding: 12px 20px 4px; margin-top: 6px; border-top: 1px solid var(--line); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.dd .dd-sub { padding-block: 6px; font-size: 14px; color: #D6D2CE; }
@media (max-width: 1100px) {
  .nav-group { padding-block: 0; margin-block: 0; width: 100%; }
  .nav-top::after { display: none; }
  .dd, .nav-group:hover .dd { display: flex; position: static; min-width: 0; padding: 0 0 6px 16px; background: none; border: 0; box-shadow: none; }
  .dd a { white-space: normal; padding: 8px 0; font-weight: 500; color: #D6D2CE; }
  .dd .dd-head { border-top: 0; padding: 10px 0 2px; margin: 0; }
}

/* Receipt: on screen and when printed or saved as a PDF */
.receipt { max-width: 720px; margin: 0 auto; background: #fff; color: #141416; border-radius: 6px; padding: 32px; }
.receipt .muted { color: #5A5A62; }
.receipt-head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-bottom: 2px solid #141416; padding-bottom: 14px; margin-bottom: 14px; }
.receipt-ref { text-align: right; margin: 0; }
.receipt-test { background: #FFD60A; font-weight: 800; padding: 10px 14px; border-radius: 4px; letter-spacing: 0.04em; }
.receipt-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.receipt-table td { padding: 10px 4px; border-bottom: 1px solid #D6D2D2; vertical-align: top; }
.receipt-table .r { text-align: right; white-space: nowrap; }
.receipt-table .total td { font-weight: 800; border-bottom: 2px solid #141416; font-size: 18px; }
@media print {
  body::before, .ribbon, .site-head, .site-foot, .no-print { display: none !important; }
  .page { width: 100% !important; box-shadow: none !important; background: #fff !important; }
  body, .section { background: #fff !important; padding: 0 !important; }
  .receipt { box-shadow: none; padding: 0; }
}

/* Product photo gallery */
.gallery { position: relative; }
.gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 6px; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track img { flex: 0 0 100%; width: 100%; scroll-snap-align: start; }
.gal-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(11,11,13,0.7); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.gal-btn.prev { left: 8px; } .gal-btn.next { right: 8px; }
.gal-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; }
.gal-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); }
.gal-dots i.on { background: var(--red); box-shadow: 0 0 0 1px #fff; }
.fee-note { font-size: 14px; }

/* Member sign-in and My account */
.head-actions .signin-link { color: var(--mute); font-weight: 600; font-size: 15px; }
.account, .account-card { max-width: 860px; }
.account { display: grid; gap: 20px; }
.account-card { background: #141416; border: 1px solid var(--line); border-radius: 8px; padding: 22px 24px; }
.account-card h3 { margin: 0 0 10px; font-family: var(--display); font-size: 24px; text-transform: uppercase; letter-spacing: 0.03em; }
.account-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.account-head h2 { margin: 0; }
.player-edit { border-top: 1px solid var(--line); padding: 10px 0; }
.player-edit summary { cursor: pointer; padding: 6px 0; }
.player-edit .form { margin-top: 10px; display: grid; gap: 12px; }
.acct-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.acct-table td { padding: 10px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
@media (max-width: 640px) { .acct-table, .acct-table tbody, .acct-table tr, .acct-table td { display: block; } .acct-table tr { border-bottom: 1px solid var(--line); padding: 8px 0; } .acct-table td { border: 0; padding: 2px 0; } .account-card { padding: 18px; } }

/* Receipt and tax invoice: reads well on screen and prints as a clean A4 page */
.receipt { max-width: 780px; padding: 36px 40px; }
.r-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 16px; border-bottom: 4px solid #D91E2A; margin-bottom: 18px; }
.r-logo { width: 92px; height: 92px; object-fit: contain; }
.r-id { text-align: right; font-size: 15px; line-height: 1.5; }
.r-title { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; color: #141416; }
.r-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 14px 0 20px; font-size: 15px; line-height: 1.55; }
.r-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #5A5A62; margin-bottom: 3px; }
.r-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.r-table th { text-align: left; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #5A5A62; border-bottom: 2px solid #141416; padding: 8px 4px; }
.r-table td { padding: 10px 4px; border-bottom: 1px solid #D6D2D2; vertical-align: top; }
.r-table .r { text-align: right; white-space: nowrap; }
.r-table tfoot td { border-bottom: 0; }
.r-table tfoot .total td { font-weight: 800; font-size: 18px; border-top: 2px solid #141416; }
.r-gst { margin: 12px 0 4px; font-size: 14px; }
.r-pay { margin: 10px 0 0; font-size: 13px; color: #5A5A62; }
@media (max-width: 600px) { .receipt { padding: 20px; } .r-parties { grid-template-columns: 1fr; gap: 14px; } .r-head { flex-direction: column; } .r-id { text-align: left; } }
@media print {
  @page { size: A4; margin: 14mm; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .receipt { max-width: none; margin: 0; padding: 0; border-radius: 0; font-size: 12pt; }
  .r-title { font-size: 30pt; }
  .receipt-test { border: 2px solid #141416; }
}

/* Cart link, cart page and the "added" message */
.cart-link { position: relative; display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--text); flex: 0 0 auto; }
.cart-link:hover { color: var(--red-text); }
.cart-count { position: absolute; top: 3px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.cart-count[hidden] { display: none; }
@media (max-width: 1100px) { .cart-mobile { order: 2; margin-left: auto; } .menu-btn { margin-left: 0; } }
.cart-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: #141416; color: #fff; border: 1px solid #fff; border-radius: 999px; padding: 12px 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); display: flex; gap: 14px; align-items: center; max-width: calc(100vw - 32px); }
.cart-toast a { color: var(--red-text); font-weight: 700; white-space: nowrap; }
.cart-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-what { display: flex; flex-direction: column; min-width: 0; }
.cart-qty input { width: 64px; min-height: 36px; margin-left: 6px; }
.cart-price { font-weight: 700; min-width: 4.5em; text-align: right; }
.cart-total { margin: 16px 0; text-align: right; font-size: 18px; }
@media (max-width: 640px) { .cart-row { grid-template-columns: 1fr auto; } .cart-qty { grid-column: 1; } .cart-price { grid-column: 2; grid-row: 1; } .cart-row button { grid-column: 2; } }

/* Tidier buy forms (sessions and shop) */
.buy { display: grid; gap: 14px; }
.buy label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.buy input, .buy select { min-height: 44px; }
.buy input[type=number] { width: 96px; }
.buy .btn { justify-self: start; padding: 12px 26px; }
.product .buy { display: flex; }

/* Calendar: a colour for each kind of session */
:root { --k-training: #3B82F6; --k-shooting: #F59E0B; --k-strength: #22C55E; --k-run: #A855F7; --k-team: #14B8A6; --k-other: #EC4899; --k-comp: #E0262F; }
.bub.elite.k-training { background: var(--k-training); } .bub.elite.k-shooting { background: var(--k-shooting); color: #141416; } .bub.elite.k-strength { background: var(--k-strength); color: #141416; }
.bub.elite.k-run { background: var(--k-run); } .bub.elite.k-team { background: var(--k-team); color: #141416; } .bub.elite.k-other { background: var(--k-other); } .bub.elite.k-comp { background: var(--k-comp); }
.agenda-row { border-left: 5px solid transparent; }
.agenda-row.k-training { border-left-color: var(--k-training); } .agenda-row.k-shooting { border-left-color: var(--k-shooting); } .agenda-row.k-strength { border-left-color: var(--k-strength); }
.agenda-row.k-run { border-left-color: var(--k-run); } .agenda-row.k-team { border-left-color: var(--k-team); } .agenda-row.k-other { border-left-color: var(--k-other); } .agenda-row.k-comp { border-left-color: var(--k-comp); } .agenda-row.k-feed { border-left-color: #fff; }
.chip[data-kind-filter]::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; background: transparent; border: 2px solid #fff; }
.chip[data-kind-filter="training"]::before { background: var(--k-training); border-color: var(--k-training); } .chip[data-kind-filter="shooting"]::before { background: var(--k-shooting); border-color: var(--k-shooting); }
.chip[data-kind-filter="strength"]::before { background: var(--k-strength); border-color: var(--k-strength); } .chip[data-kind-filter="run"]::before { background: var(--k-run); border-color: var(--k-run); }
.chip[data-kind-filter="team"]::before { background: var(--k-team); border-color: var(--k-team); } .chip[data-kind-filter="other"]::before { background: var(--k-other); border-color: var(--k-other); }
.chip[data-kind-filter="comp"]::before { background: var(--k-comp); border-color: var(--k-comp); }
.chip[data-kind-filter="training"][aria-pressed="true"] { background: var(--k-training); border-color: var(--k-training); } .chip[data-kind-filter="shooting"][aria-pressed="true"] { background: var(--k-shooting); border-color: var(--k-shooting); color: #141416; }
.chip[data-kind-filter="strength"][aria-pressed="true"] { background: var(--k-strength); border-color: var(--k-strength); color: #141416; } .chip[data-kind-filter="run"][aria-pressed="true"] { background: var(--k-run); border-color: var(--k-run); }
.chip[data-kind-filter="team"][aria-pressed="true"] { background: var(--k-team); border-color: var(--k-team); color: #141416; } .chip[data-kind-filter="other"][aria-pressed="true"] { background: var(--k-other); border-color: var(--k-other); } .chip[data-kind-filter="comp"][aria-pressed="true"] { background: var(--k-comp); border-color: var(--k-comp); }
.chip[aria-pressed="true"]::before { box-shadow: 0 0 0 2px rgba(255,255,255,0.7); }
/* Buy forms and cart: dark text on the white fields, so what's typed or chosen can always be read */
.buy select, .buy input, .buy textarea, .cart-qty input { background: #fff; color: #141416; border: 1px solid #C9C4BE; border-radius: 4px; padding: 6px 10px; font: inherit; }
.buy select option { color: #141416; background: #fff; }
.buy select:disabled, .buy input:disabled { opacity: 0.55; }
.buy input::placeholder { color: #6B6B73; }

/* Cart page: compact, two columns on a wide screen */
[data-cart-page] .cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; max-width: 980px; }
.cart-main, .cart-summary, .cart-empty { background: linear-gradient(180deg, #17171A, #111113); border: 1px solid #2A2A30; border-radius: 12px; padding: 18px 20px; }
.cart-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.cart-head h2 { margin: 0; font-size: 28px; }
.cart-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #26262B; }
.cart-what b { font-size: 15px; }
.cart-qty { display: inline-flex; align-items: center; gap: 2px; border: 1px solid #34343B; border-radius: 999px; padding: 2px; }
.cart-qty.one { border: 0; padding: 0 12px; color: var(--mute); }
.cart-qty button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.cart-qty button:hover { background: #26262B; }
.cart-qty span { min-width: 22px; text-align: center; font-size: 14px; }
.cart-price { font-weight: 700; min-width: 4em; text-align: right; font-size: 15px; }
.cart-x { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--mute); font-size: 20px; line-height: 1; cursor: pointer; }
.cart-x:hover { background: #26262B; color: #fff; }
.cart-check { padding-top: 10px; min-height: 0; }
.cart-check:empty { display: none; }
.cart-summary { position: sticky; top: 92px; display: grid; gap: 8px; }
.cart-summary h3 { margin: 0 0 4px; font-family: var(--display); font-size: 20px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mute); }
.sum-row { display: flex; justify-content: space-between; gap: 12px; }
.sum-row.total { font-size: 20px; border-top: 1px solid #2A2A30; padding-top: 10px; margin-top: 4px; }
.cart-summary .btn { width: 100%; text-align: center; margin-top: 6px; }
.cart-summary .form-status { margin: 0; min-height: 0; }
.cart-summary .secure { display: flex; gap: 6px; align-items: center; margin: 4px 0 0; }
@media (max-width: 800px) { [data-cart-page] .cart-layout { grid-template-columns: 1fr; } .cart-summary { position: static; } .cart-row { grid-template-columns: minmax(0, 1fr) auto auto; } .cart-qty { grid-column: 1; justify-self: start; } .cart-price { grid-column: 2; grid-row: 1; } .cart-x { grid-column: 3; grid-row: 1; } }

/* ================= Design pass: sharper, techier, still black / red / white ================= */
::selection { background: var(--red); color: #fff; }
html { scrollbar-color: #34343B #0B0B0D; scrollbar-width: thin; }

/* A faint engineering grid behind the dark parts of every page */
.page { background-image: linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px); background-size: 56px 56px; }
.band-paper, .band-photo, .hero, .site-foot { background-image: none; }

/* Glass header with a hairline of red */
.site-head { background: rgba(11,11,13,0.72); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border-bottom: 1px solid #26262C; box-shadow: 0 1px 0 rgba(224,38,47,0.35), 0 10px 30px -18px rgba(0,0,0,0.8); }
.nav a { position: relative; }
.nav > a::after, .nav-top::before { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }
.nav > a:hover::after, .nav > a[aria-current="page"]::after { transform: scaleX(1); }
.nav-group:hover .nav-top::before, .nav-top[aria-current="page"]::before { transform: scaleX(1); }

/* Labels read like a control panel */
.eyebrow { font-family: ui-monospace, "JetBrains Mono", "Cascadia Code", Consolas, monospace; font-weight: 600; letter-spacing: 0.22em; font-size: 12px; }
.eyebrow::before { content: "// "; color: var(--red); letter-spacing: 0; }
.section-head h2::after, .section h1.display::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 12px; background: linear-gradient(90deg, var(--red), rgba(224,38,47,0)); border-radius: 3px; }
.tile small, .r-label { font-family: ui-monospace, "JetBrains Mono", Consolas, monospace; letter-spacing: 0.16em; }

/* Surfaces: glassy dark cards that light up on hover */
.tile, .panel, .person, .account-card, .cart-main, .cart-summary, .cart-empty, .acct-table, .cal-cell, .agenda-row, .news-card, .card-photo { transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease; }
.tile, .panel, .person { background: linear-gradient(180deg, #17171A 0%, #101012 100%); border: 1px solid #2A2A30; border-radius: 12px; }
.tile:hover, .panel:hover, .person:hover, a.tile:hover { border-color: rgba(224,38,47,0.55); box-shadow: 0 14px 40px -16px rgba(224,38,47,0.45); transform: translateY(-2px); }
.card-photo img, .news-card img, .mosaic img, .news-feature img { border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,0.07), 0 18px 40px -22px rgba(0,0,0,0.9); }
.card-photo:hover img, .news-card:hover img { box-shadow: 0 0 0 1px rgba(224,38,47,0.6), 0 22px 50px -22px rgba(224,38,47,0.5); }
.product { border-radius: 14px; box-shadow: 0 18px 40px -24px rgba(0,0,0,0.8); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.product:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -26px rgba(224,38,47,0.45); }
.event { border-radius: 12px; }
.note { border-radius: 10px; border: 1px solid rgba(255,214,10,0.25); }
.agenda-row:hover { background: rgba(224,38,47,0.07); }
.cal-cell { border-radius: 10px; background: linear-gradient(180deg, #17171A, #111113); }
.cal-cell:hover { border-color: rgba(224,38,47,0.6); }
.cal-cell.picked { box-shadow: 0 0 0 1px var(--red), 0 10px 30px -12px rgba(224,38,47,0.6); }
.agenda-row .when b, .cal-cell .num, .cart-price, .sum-row b { font-variant-numeric: tabular-nums; font-family: ui-monospace, "JetBrains Mono", Consolas, monospace; }

/* Buttons */
.btn { border-radius: 8px; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease; letter-spacing: 0.02em; }
.btn:active { transform: translateY(1px); }
.btn-red { background: linear-gradient(180deg, #F0323B, #C91F28); box-shadow: 0 10px 26px -10px rgba(224,38,47,0.85), inset 0 1px 0 rgba(255,255,255,0.22); }
.btn-red:hover { background: linear-gradient(180deg, #FF3F48, #D3232C); transform: translateY(-1px); box-shadow: 0 16px 34px -12px rgba(224,38,47,0.9), inset 0 1px 0 rgba(255,255,255,0.28); }
.btn-line { border-width: 1px; border-color: rgba(255,255,255,0.45); backdrop-filter: blur(4px); }
.btn-line:hover { border-color: var(--red); box-shadow: 0 0 0 3px rgba(224,38,47,0.18); color: #fff; }
.btn-light:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -12px rgba(255,255,255,0.5); }
.chip { transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.chip:hover { border-color: #fff; transform: translateY(-1px); }
.link-red { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.25s ease; }
.link-red:hover { background-size: 100% 1px; }

/* Forms on dark */
.form input:not([type=checkbox]), .form select, .form textarea { background: #0F0F11; border: 1px solid #2E2E35; color: #fff; border-radius: 8px; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(224,38,47,0.2); }

/* Hero: a grid that fades up from the bottom */
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: linear-gradient(to top, #000, transparent 65%); mask-image: linear-gradient(to top, #000, transparent 65%); }
.hero-dots button[aria-current="true"]::after { box-shadow: 0 0 12px rgba(224,38,47,0.9); }

/* Footer */
.site-foot { border-top: 1px solid #26262C; background: linear-gradient(180deg, #0F0F11, #0B0B0D); position: relative; }
.site-foot::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--red), transparent); }

/* Things glide in as they scroll into view (only when scripts run, and not for people who prefer less motion) */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
  html.js .reveal.in { opacity: 1; transform: none; }
}

/* Buyer's order page: compact */
.o-page { gap: 12px; }
.o-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.o-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.o-tile { padding: 14px 18px; }
.o-line { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-top: 1px solid var(--line); }
.o-line:first-of-type { border-top: 0; }
.o-total { margin-top: 4px; padding-top: 10px; }
.cart-who { display: grid; gap: 10px; margin: 12px 0; }
.cart-who label { display: grid; gap: 4px; font-size: 14px; }

.coach-intro { max-width: 760px; display: grid; gap: 14px; }
.coach-intro .lead { font-size: 1.15em; }

/* Text written in the back office editor */
.prose .al-left { text-align: left; } .prose .al-center { text-align: center; } .prose .al-right { text-align: right; } .prose .al-justify { text-align: justify; }
.prose h4 { font-size: 17px; margin: 20px 0 4px; }
.prose ol { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; }
.prose blockquote { margin: 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--red); color: #E2DEDA; font-style: italic; }
.prose hr { border: 0; border-top: 1px solid #34343B; margin: 18px 0; width: 100%; }
.prose a { color: #FF6A70; text-decoration: underline; }
.prose a.btn { color: #fff; text-decoration: none; }
.prose a.btn-light { color: var(--ink); } /* a light button keeps its dark words (the order page sits inside .prose) */
.prose .art-register { text-align: center; margin: 28px 0; }
.prose img { max-width: 100%; height: auto; border-radius: 8px; display: block; }
div.art-body img, div.art-body figure img { width: auto; max-width: 100%; height: auto; max-height: 520px; object-fit: contain; margin-inline: auto; cursor: zoom-in; }
.prose figure { margin: 6px 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 0.95em; }
.prose th, .prose td { border: 1px solid #34343B; padding: 8px 10px; vertical-align: top; text-align: left; }
.prose th { background: #141416; font-weight: 700; }
.prose td.al-center, .prose th.al-center { text-align: center; } .prose td.al-right, .prose th.al-right { text-align: right; }
@media (max-width: 700px) { .prose table { display: block; overflow-x: auto; } }

/* a news item without its own photo shows the club logo, whole, on a plain panel */
.news-card img.is-logo, .news-feature img.is-logo { object-fit: contain; background: #111114; padding: 18px; box-sizing: border-box; }
.prose figure img { width: 100%; border-radius: 6px; }
.prose figcaption { color: var(--mute); font-size: 14px; margin-top: 6px; }

/* the small "checking you're human" line by a form's button: never covers anything */
.ts-status { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 14px; color: var(--mute); min-height: 20px; }
.ts-status[hidden] { display: none; }
.ts-status.checking::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: ts-spin 0.8s linear infinite; flex: none; }
.ts-status.ok { color: #3DDC84; } .ts-status.ok::before { content: "✓"; font-weight: 700; }
.ts-status.error { color: #FF6A70; }
@keyframes ts-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ts-status.checking::before { animation: none; } }

.multibook { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }
.multibook h2 { margin: 0; font-size: 22px; }
.multibook-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; }
.multibook .check { display: flex; gap: 10px; align-items: flex-start; }
.multibook-total { font-weight: 600; }

/* the member's portrait at the top right (initials when there's no photo); the phone keeps a cart beside the menu button */
.portrait-link { display: inline-flex; flex: 0 0 auto; }
.portrait-link[hidden], .signin-link[hidden] { display: none; }
.portrait { width: 40px; height: 40px; border-radius: 50%; background: var(--red); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; letter-spacing: 0.02em; overflow: hidden; border: 2px solid rgba(255,255,255,0.85); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait-link:hover .portrait { border-color: #fff; }
.cart-mobile { display: none; }
.nav .cart-link { width: 36px; height: 36px; margin-left: -14px; }
@media (max-width: 1100px) { .cart-mobile { display: inline-flex; } .nav .cart-nav { display: none; } .portrait-link { order: 2; } }
/* the phone's top bar: brand, cart, portrait, menu, all on one line */
@media (max-width: 1100px) { .cart-mobile { order: 1; margin-left: auto; } .portrait-link { order: 2; } .menu-btn { order: 3; margin-left: 0; } .nav.open { order: 4; } .head-actions { order: 5; } .site-head .wrap { gap: 12px; } }
@media (max-width: 520px) { .brand span { font-size: 16px; } .brand img { width: 40px; height: 40px; } .portrait { width: 34px; height: 34px; font-size: 13px; } .cart-mobile { width: 38px; height: 38px; } .menu-btn { width: 40px; height: 40px; } .site-head .wrap { gap: 8px; } .nav.open + .head-actions { order: 5; } }
/* the cart beside Shop: same height as the words, centred on the same line */
.nav { align-items: center; }
.nav .cart-link { width: 26px; height: 26px; margin-left: -12px; }
.nav .cart-link svg { width: 21px; height: 21px; }
.nav .cart-count { top: -5px; right: -7px; min-width: 16px; height: 16px; font-size: 10px; }

/* the account corner is fixed at the top right whatever else happens in the header; no "Book a session" button (the Calendar link does that) */
.site-head .wrap { position: relative; padding-right: 76px; }
.head-account { position: absolute; right: 16px; top: 16px; height: 40px; display: flex; align-items: center; z-index: 2; }
.head-account .signin-link { color: var(--mute); font-weight: 600; font-size: 15px; white-space: nowrap; }
.head-account .signin-link:hover { color: var(--text); }
.portrait-link { order: 0 !important; }
@media (min-width: 1101px) { .site-head .wrap { flex-wrap: nowrap; } .nav { flex-wrap: nowrap; white-space: nowrap; } }
@media (max-width: 520px) { .head-account { top: 11px; height: 34px; right: 12px; } }

/* the calendar: a little smaller, with the next few events and their buttons underneath */
.cal-cell { min-height: 74px; padding: 5px; }
.cal-title { font-size: clamp(20px, 2.4vw, 28px); }
.cal-cell .num { font-size: 13px; }
.cal-bar { margin-bottom: 8px; }
.upnext { margin-top: 26px; }
.upnext-bar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: space-between; margin-bottom: 8px; }
.upnext-bar h2 { margin: 0; font-size: clamp(22px, 2.6vw, 30px); }
.upnext-for { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.upnext-for[hidden] { display: none; }
.upnext-for input { min-width: 190px; }
.upnext .agenda-row { grid-template-columns: 150px 1fr auto auto; }
.upnext .agenda-row .when small { color: var(--mute); font-size: 13px; }
.up-act { display: inline-flex; align-items: center; gap: 12px; justify-content: flex-end; }
.up-btn { padding: 8px 14px; min-height: 0; font-size: 14px; white-space: nowrap; }
.upnext [data-upnext-more] { margin-top: 14px; }
@media (max-width: 640px) { .upnext .agenda-row { grid-template-columns: 1fr; } .upnext .agenda-row .price { display: inline; } .up-act { justify-content: space-between; } }

/* My account: a hero with the portrait, browser-style tabs, player cards and order cards */
.acct-hero { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 22px 24px; border: 1px solid var(--line); border-radius: 14px; background: radial-gradient(120% 140% at 0% 0%, rgba(224,38,47,0.18), transparent 60%), linear-gradient(180deg, #17171A, #111113); }
.acct-avatar { width: 96px; height: 96px; border-radius: 50%; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 38px; letter-spacing: 0.04em; border: 3px solid rgba(255,255,255,0.9); box-shadow: 0 10px 30px -12px rgba(224,38,47,0.7); overflow: hidden; flex: none; }
.acct-avatar img { width: 100%; height: 100%; object-fit: cover; }
.acct-who { flex: 1 1 260px; min-width: 0; }
.acct-who h2 { margin: 2px 0 4px; }
.acct-photo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.acct-photo .btn { padding: 8px 14px; min-height: 0; font-size: 14px; }
.acct-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding: 0 10px; overflow-x: auto; overflow-y: hidden; margin-top: 4px; }
.acct-tabs button { margin-bottom: -1px; padding: 12px 22px 11px; border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; background: #101012; color: var(--mute); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.acct-tabs button:hover { color: #fff; }
.acct-tabs button[aria-selected=true] { background: #141416; color: #fff; box-shadow: inset 0 3px 0 var(--red); border-bottom: 1px solid #141416; }
.acct-panel { display: grid; gap: 16px; padding: 18px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; background: #141416; margin-top: -1px; }
.acct-panel[hidden] { display: none; }
.acct-panel .account-card { background: #0F0F11; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.pcard { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: linear-gradient(180deg, #17171A, #101012); display: grid; gap: 10px; }
.pcard-top { display: flex; align-items: center; gap: 12px; }
.pavatar { width: 46px; height: 46px; border-radius: 50%; background: #2A2A31; display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.pcard-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pnum { font-family: var(--display); font-weight: 800; font-size: 26px; color: var(--red-text); }
.olist { display: grid; gap: 10px; }
.ocard { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, #17171A, #101012); color: inherit; text-decoration: none; }
.ocard:hover { border-color: rgba(224,38,47,0.6); }
.ocard-main { display: flex; flex-direction: column; min-width: 0; }
.ocard-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ocard-go { color: var(--red-text); font-weight: 700; white-space: nowrap; }
.apill { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #2A2A31; }
.apill.ok { background: rgba(46,160,67,0.25); color: #6FE08B; }
.apill.wait { background: rgba(242,140,40,0.22); color: #FFB868; }
.apill.done { background: rgba(47,111,235,0.22); color: #8FB4FF; }
/* WWVP: the date of birth comes from My details, with a green tick when it is there and a red cross with what to do when not */
.dob-check { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.dob-check .dob-label { font-weight: 600; }
.dob-check .dob-val { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 6px; border: 1px solid #2A2A31; font-weight: 600; }
.dob-check .dob-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 13px; font-weight: 800; flex: none; }
.dob-check.ok .dob-mark { background: rgba(46,160,67,0.25); color: #6FE08B; }
.dob-check.bad .dob-val { border-color: rgba(224,38,47,0.6); }
.dob-check.bad .dob-mark { background: rgba(224,38,47,0.22); color: #FF8A8F; }
.dob-check.bad small { color: #FF8A8F; }
.dob-check.bad small a { color: #fff; }
.upc { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.upc:last-child { border-bottom: 0; }
.upc > div { display: flex; flex-direction: column; }
@media (max-width: 640px) { .ocard { grid-template-columns: 1fr auto; } .ocard-go { display: none; } .acct-hero { padding: 18px; } .acct-avatar { width: 78px; height: 78px; font-size: 30px; } }

/* a smaller hero: the photo change is a little badge, the remove link a tag under the portrait */
.acct-hero { padding: 14px 20px; gap: 18px; }
.acct-pic { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.acct-avatar { width: 80px; height: 80px; font-size: 32px; }
.avatar-badge { position: absolute; right: -4px; top: 54px; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: #111; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; cursor: pointer; border: 2px solid #17171A; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.avatar-badge:hover { background: var(--red); color: #fff; }
.avatar-badge:focus-within { outline: 2px solid #fff; outline-offset: 2px; }
.pic-rm { background: none; border: 0; color: var(--mute); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; padding: 0; }
.pic-rm:hover { color: #fff; }
@media (max-width: 640px) { .acct-avatar { width: 66px; height: 66px; font-size: 26px; } .avatar-badge { top: 42px; } }
/* breadcrumbs: Home › section › this page, on every page but the front page */
.crumbs-bar { padding-top: 14px; font-size: 13px; color: var(--mute); }
.crumbs-bar ol { display: flex; flex-wrap: wrap; gap: 4px 8px; list-style: none; margin: 0; padding: 0; align-items: center; }
.crumbs-bar li { display: inline-flex; align-items: center; gap: 8px; }
.crumbs-bar li + li::before { content: "›"; color: var(--mute); }
.crumbs-bar a { color: var(--mute); text-decoration: none; }
.crumbs-bar a:hover { color: #fff; text-decoration: underline; }
.crumbs-bar [aria-current=page] { color: #fff; font-weight: 600; }

/* My volunteering: the switch and the card photos */
.vol-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.volcard { display: grid; gap: 12px; }
.switch { position: relative; display: inline-block; width: 54px; height: 30px; flex: none; cursor: pointer; }
.switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; z-index: 1; }
.switch .slider { position: absolute; inset: 0; border-radius: 999px; background: #3A3A42; transition: background .2s ease; }
.switch .slider::before { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s ease; }
.switch input:checked + .slider { background: var(--red); }
.switch input:checked + .slider::before { transform: translateX(24px); }
.switch input:focus-visible + .slider { outline: 2px solid #fff; outline-offset: 2px; }
.cardpics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.cardpic { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cardpic img { max-width: 100%; max-height: 120px; border-radius: 8px; border: 1px solid var(--line); }
.cardpic .btn { padding: 8px 14px; min-height: 0; font-size: 14px; }

/* the send button is as big as its label and sits beside the Cloudflare box (above it on a phone) */
.ts-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ts-row > .btn { width: auto; flex: 0 0 auto; }
.ts-row > .ts-box { flex: 1 1 300px; min-width: 0; min-height: 65px; }
/* signed in: show what the form already knows */
.signedas { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #141416; }
.signedas[hidden] { display: none; }
.signedas > div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.signedas > div span { color: var(--mute); font-size: 14px; overflow-wrap: anywhere; }
.signedas-tick { width: 26px; height: 26px; border-radius: 50%; background: rgba(46,160,67,.25); color: #6FE08B; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }
.signedas button { background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.ts-row > .ts-box { max-width: 100%; flex: 1 1 280px; overflow: hidden; }

/* the portrait's menu */
.acct-menu { position: absolute; top: 48px; right: 0; width: 250px; background: #141416; border: 1px solid var(--line); border-radius: 12px; padding: 6px; box-shadow: 0 14px 40px rgba(0,0,0,.55); display: flex; flex-direction: column; z-index: 50; }
.acct-menu[hidden] { display: none; }
.acct-menu a, .acct-menu button { display: block; text-align: left; padding: 10px 12px; border-radius: 8px; color: var(--text); font: inherit; font-weight: 600; font-size: 15px; background: none; border: 0; cursor: pointer; }
.acct-menu a:hover, .acct-menu button:hover { background: #1f1f23; }
.acct-menu-who { display: flex; flex-direction: column; padding: 10px 12px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; min-width: 0; }
.acct-menu-who span { color: var(--mute); font-size: 13px; overflow-wrap: anywhere; }
.acct-menu .acct-menu-admin { color: #FF8A8F; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 4px; }

/* use the width: cards sit side by side, and the contact form is two columns */
.account, .account-card { max-width: 1100px; }
.account-card { max-width: none; }
.acct-panel { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; }
.acct-panel > .pgrid, .acct-panel > .olist, .acct-panel > #wwvp-body, .acct-panel > .account-card:only-child { grid-column: 1 / -1; }
.olist { grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); }
@media (min-width: 760px) {
  form[data-form="enquiry"] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; align-items: start; }
  form[data-form="enquiry"] > .signedas, form[data-form="enquiry"] > #for-banner, form[data-form="enquiry"] > label:has(textarea), form[data-form="enquiry"] > .ts-row, form[data-form="enquiry"] > .form-status, form[data-form="enquiry"] > button { grid-column: 1 / -1; }
}

.cart-addr { display: grid; gap: 6px; margin-top: 12px; font-weight: 600; }
.cart-addr small { color: var(--mute); font-weight: 400; }
/* Discount codes: the box in the cart, the discount line in the summary, on the order page and on the receipt */
.cart-voucher { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; }
.cart-voucher-guest { margin: 4px 0 0; padding: 12px 0 4px; font-weight: 700; font-size: 15px; }
.cart-voucher[hidden] { display: none; }
.cart-voucher summary { display: flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; list-style: none; font-weight: 700; font-size: 15px; color: var(--red-text); }
.cart-voucher summary::-webkit-details-marker { display: none; }
.cart-voucher summary::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid currentColor; border-radius: 50%; font-size: 15px; line-height: 1; }
.cart-voucher[open] summary::before { content: "\2212"; }
.cart-voucher summary:focus-visible { outline: 2px solid var(--red-text); outline-offset: 2px; border-radius: 4px; }
.voucher-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; margin-top: 6px; }
.voucher-label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--mute); }
.voucher-label input { min-height: 44px; min-width: 0; box-sizing: border-box; padding: 8px 12px; background: var(--ink); color: var(--text); border: 1px solid var(--line); border-radius: 8px; font: 700 16px var(--body); letter-spacing: 0.06em; text-transform: uppercase; }
.voucher-label input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--mute); }
.voucher-label input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(224,38,47,0.2); }
.cart-summary .voucher-row .btn { width: auto; margin: 0; min-height: 44px; padding-inline: 16px; }
.voucher-note { margin: 8px 0 0; min-height: 0; font-size: 14px; font-weight: 600; }
.voucher-note:empty { display: none; }
.voucher-note.ok { color: #7FD39B; }
.voucher-note.bad { color: var(--red-text); }
.sum-voucher { color: #7FD39B; align-items: center; }
.sum-voucher span { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.voucher-x { width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.voucher-x:hover { background: rgba(127,127,127,0.25); }
.o-voucher { color: #7FD39B; }
.r-table .r-voucher td { color: #12703A; font-weight: 600; }
:where([data-scheme="light"]) :is(.voucher-note.ok, .sum-voucher, .o-voucher) { color: #12703A; }
:where([data-scheme="light"]) .voucher-label input { background: #FFFFFF; border-color: #C9C4BE; }
@media (max-width: 420px) { .voucher-row { grid-template-columns: 1fr; } .cart-summary .voucher-row .btn { width: 100%; } }

.switch-row { display: flex; gap: 12px 28px; flex-wrap: wrap; }

/* a button straight inside a form sits at its own size, not stretched across the whole grid */
.form > .btn, .form > button.btn { justify-self: start; width: auto; }
.cardpic .btn-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* My players: a row of small tabs, one per child, and a card for the one chosen */
.kids { display: grid; gap: 16px; }
.child-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.child-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: #101012; color: var(--mute); font: inherit; font-weight: 600; cursor: pointer; }
.child-tabs button:hover { color: #fff; }
.child-tabs button[aria-pressed=true] { background: #1d1d21; color: #fff; border-color: var(--red); }
.chip-av { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: var(--red); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: none; }
.chip-av img, .pavatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.child-card[hidden] { display: none; }
.child-card { display: grid; gap: 16px; }
.child-top { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.child-pic { display: grid; gap: 8px; justify-items: center; }
.pavatar-lg { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 38px; font-weight: 800; border: 3px solid #2A2A31; }
.child-pic-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.child-pic-btns .btn { padding: 6px 12px; min-height: 0; font-size: 13px; }
.child-who { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.child-name { font-size: 26px; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.child-pills { display: flex; gap: 8px; align-items: center; }
.child-comments h4 { margin: 0 0 8px; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.04em; }
.child-comments blockquote { margin: 0 0 10px; padding: 8px 14px; border-left: 3px solid var(--red); background: #101012; border-radius: 0 8px 8px 0; }
.child-comments blockquote p { margin: 0 0 4px; }
.child-comments blockquote footer { margin: 0; }
.child-quote { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.child-quote label { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 15px; }
.child-quote input { min-height: 44px; background: var(--coal); color: var(--text); border: 1px solid #3A3A42; border-radius: 4px; padding: 8px 12px; font: 16px var(--body); }
.child-sig { margin: 0; font-style: italic; font-size: 20px; border-top: 1px solid var(--line); padding-top: 12px; }
.child-sig[hidden] { display: none; }

/* choosing how a picture is framed */
dialog.crop-dlg { background: #141416; color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 0; max-width: 94vw; }
dialog.crop-dlg::backdrop { background: rgba(0,0,0,.75); }
.crop-box { padding: 18px; display: grid; gap: 12px; justify-items: center; }
.crop-box h3 { margin: 0; font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; }
.crop-help { margin: 0; color: var(--mute); font-size: 14px; max-width: 340px; text-align: center; }
.crop-stage { position: relative; overflow: hidden; background: #000; border-radius: 8px; touch-action: none; cursor: grab; outline-offset: 3px; user-select: none; }
.crop-stage.grab { cursor: grabbing; }
.crop-stage canvas { display: block; }
.crop-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0,0,0,.55); border: 2px solid #fff; pointer-events: none; }
.crop-zoom { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 340px; font-weight: 600; }
.crop-zoom input { flex: 1; min-height: 0; padding: 0; }
.crop-btns { display: flex; gap: 10px; justify-content: flex-end; width: 100%; max-width: 340px; }

/* Coming up: who it is for, on the line, beside its button */
.up-act { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; justify-content: flex-end; }
.up-who { display: inline-flex; gap: 6px; align-items: center; }
.up-for, .up-for-other { min-height: 38px; background: var(--coal); color: var(--text); border: 1px solid #3A3A42; border-radius: 4px; padding: 4px 10px; font: 15px var(--body); max-width: 190px; }
.up-for-other[hidden] { display: none; }
.up-msg { flex: 1 1 100%; text-align: right; font-weight: 600; font-size: 14px; min-height: 0; }
.up-msg:empty { display: none; }
.up-msg.ok { color: #7FD39B; }
.up-msg.bad { color: var(--red-text); }

/* an event's booking form: tick who it is for */
fieldset.who { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin: 0; display: grid; gap: 8px; }
fieldset.who legend { font-weight: 700; padding: 0 6px; }
fieldset.who .check { flex-direction: row; align-items: center; gap: 10px; font-weight: 500; }
fieldset.who .check input { width: 20px; height: 20px; min-height: 0; }
.who-else { display: grid; gap: 8px; padding-left: 30px; }
.who-else [data-else-list] { display: grid; gap: 8px; }
.who-name { min-height: 44px; background: var(--coal); color: var(--text); border: 1px solid #3A3A42; border-radius: 4px; padding: 8px 12px; font: 16px var(--body); }
.who-else button { justify-self: start; background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; padding: 0; }

/* a news article's picture opens full size; tap anywhere to close */
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; padding: 12px; cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }

/* a news article's text spaced the way it is in the editor and its preview: one blank line between paragraphs, not two */
.art-body { line-height: 1.6; }
.art-body > * { margin-top: 0; }
.art-body p { margin: 0 0 10px; }
.art-body ul, .art-body ol { display: block; margin: 0 0 10px; padding-left: 1.4em; }
.art-body li { margin: 0; line-height: 1.6; }
.art-body h2 { margin: 18px 0 6px; } .art-body h3 { margin: 16px 0 6px; } .art-body h4 { margin: 14px 0 4px; }
.art-body blockquote { margin: 0 0 10px; }
.art-body figure, .art-body img { margin: 0 0 10px; }
.art-body hr { margin: 14px 0; }

/* "Take a photo" only on phones and tablets */
.no-webcam .cam-btn { display: none !important; }

/* pop-up messages, bottom right (the status line itself is kept for screen readers) */
.form-status, [data-cst], #photo-st, .up-msg { position: absolute !important; width: 1px; height: 1px; min-height: 0 !important; margin: -1px !important; padding: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#toasts { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 3000; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; max-width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; cursor: pointer; border-radius: 8px; padding: 11px 14px; font-weight: 600; font-size: 15px; line-height: 1.35; box-shadow: 0 6px 22px rgba(0,0,0,0.5); border: 1px solid #3A3A42; background: #1B1B20; color: #fff; animation: toast-in 0.2s ease-out; }
.toast.ok { border-color: #2EA043; background: #12281A; color: #9BE3B0; }
.toast.bad { border-color: var(--red); background: #33141A; color: #FFB3B7; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* a switch with its words beside it, inside a form (the form's labels stack their parts, which put the words under the switch) */
.form label.switch-line { flex-direction: row; align-items: center; gap: 12px; cursor: pointer; font-weight: 600; }
.form label.switch-line .switch { flex: none; }

/* contact details on an article about an event run by someone else */
.contact-note { border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; background: #141416; }

/* Shop filters sit above the banner; cards use the full width. */
.shop-layout { display: grid; gap: 20px; }
.shop-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-nav .chip { padding: 8px 14px; font-size: 14px; }
.shop-layout .test-banner { margin-bottom: 0; }
.shop-layout .products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.products .product[hidden] { display: none; }
.product { padding: 14px; gap: 8px; }
.product img { height: 130px; }
.product .row { font-size: 13px; }
.product .row b { font-size: 16px; }
.product .buy { gap: 6px; }
.product .buy select, .product .buy input { min-height: 34px; font-size: 14px; }
@media (max-width: 760px) { .shop-layout { grid-template-columns: minmax(0, 1fr); } .shop-nav { grid-auto-flow: column; position: static; overflow-x: auto; } }

/* committee and coach portraits (people who allow it) fill the circle */
img.initials, .initials img { object-fit: cover; }
.initials img { width: 100%; height: 100%; border-radius: 50%; }

/* forms never push the page wider than the screen: the one grid column can shrink, and fields fit it */
.form { grid-template-columns: minmax(0, 1fr); }
.form > *, .stack > * { min-width: 0; }
.form input:not([type=checkbox]):not([type=radio]), .form select, .form textarea { max-width: 100%; box-sizing: border-box; }

/* accessibility and every device size (WCAG 2.2): readable contrast on the light shop cards, 16px fields (no phone zoom), links and buttons big enough to tap */
.product .muted, .product small.muted, .product .row span { color: #55515A; }
.product .buy select, .product .buy input { font-size: 16px; min-height: 44px; }
.news-card h2 { margin: 0; font-size: 19px; line-height: 1.25; }
.news-feature h2 { font-size: clamp(30px, 3.4vw, 46px); margin: 0; line-height: 1.05; }
.crumbs-bar a { display: inline-block; padding: 12px 6px; margin: -12px -6px; }
@media (pointer: coarse) {
  .btn, button, select, input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { min-height: 44px; }
  .footer a, footer a, .menu a { display: inline-block; padding-block: 8px; }
}
/* white text on the red buttons now clears 4.5:1 at every point of the gradient */
.btn-red { background: linear-gradient(180deg, #DC2630, #B71C24); }
.btn-red:hover { background: linear-gradient(180deg, #C9222B, #A31A21); }

/* News headlines from other bodies (Basketball ACT): text rows that open the original article in a new tab */
.feed-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.feed-list li { border-bottom: 1px solid var(--line); }
.feed-list a { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 16px 4px; color: inherit; text-decoration: none; }
.feed-list a:hover .feed-title, .feed-list a:focus-visible .feed-title { color: var(--red-text); }
.feed-date { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
.feed-title { font-size: 18px; line-height: 1.3; font-weight: 600; }
.feed-go { color: var(--red-text); }
.feed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px 48px; }
.feed-grid .section-head { margin-bottom: 14px; }
.feed-grid .section-head h2 { font-size: clamp(26px, 2.6vw, 34px); }
.feed-grid .feed-list a { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
.feed-grid .feed-date { grid-column: 1 / -1; }
@media (max-width: 760px) { .feed-list a { grid-template-columns: minmax(0, 1fr) auto; } .feed-date { grid-column: 1 / -1; } }

/* the photo permission is a clear switch on each child's card */
.consent-box { display: flex; gap: 12px; align-items: flex-start; margin: 8px 0; padding: 12px 14px; border: 2px solid rgba(255,255,255,.18); border-radius: 12px; cursor: pointer; }
.consent-box input { width: 22px; height: 22px; margin-top: 2px; flex: 0 0 22px; accent-color: #E0262F; }
.consent-box span { display: grid; gap: 2px; min-width: 0; }
.consent-box small { opacity: .8; }

/* who is it for: each person's name sits right beside their tick box */
fieldset[data-who] .check { display: flex; align-items: center; gap: 10px; }
fieldset[data-who] .check input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; }
.product .buy { gap: 8px; margin-top: auto; padding-top: 8px; }
.product .buy label { min-width: 0; }
.product .buy select, .product .buy input { min-height: 36px; font-size: 14px; max-width: 100%; box-sizing: border-box; }
.product .buy input[type=number] { width: 62px; }
.product .buy .btn { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.product .buy .product-player { flex-basis: 100%; }
.product .buy[data-jersey] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.product .jersey-line { min-width: 0; margin: 0; padding: 0; border: 0; }
.product .jersey-line .product-player { grid-column: 1 / -1; }
.product .jersey-line select { width: max-content; }
.product .jersey-label { display: none; }
.product .jersey-line ~ .jersey-line { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid #CFCBC6; }
.product .buy:has(.jersey-line ~ .jersey-line) .jersey-label { display: block; }
.product .buy[data-jersey] > button[type=submit] { grid-column: 2; grid-row: 1; }
.product .buy[data-jersey] > [data-add-line] { grid-column: 1 / -1; justify-self: start; }
.product .jersey-note { grid-column: 1 / -1; font-size: 12px; }
.product .buy[data-jersey] .form-status { grid-column: 1 / -1; }
@media (max-width: 1000px) { .shop-layout .products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .shop-layout .products { grid-template-columns: minmax(0, 1fr); } }

/* News list pages: first, previous, the numbers around this page, next, last */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 40px 0 6px; }
.pagination .pg, .pagination .pg-gap { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; box-sizing: border-box; border-radius: 10px; font-weight: 700; font-size: 16px; }
.pagination a.pg { border: 1px solid #34343B; color: #fff; background: #141417; text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease; }
.pagination a.pg:hover, .pagination a.pg:focus-visible { border-color: var(--red); background: #1d1d21; }
.pagination .pg-now { background: linear-gradient(180deg, #DC2630, #B71C24); color: #fff; border: 1px solid transparent; }
.pagination .pg-off { border: 1px solid #26262b; color: #55555c; }
.pagination .pg-gap { min-width: 22px; padding: 0; color: #8a8a92; }
.pagination-note { text-align: center; margin: 0 0 6px; }
/* on a phone only the numbers: the first two, the last two and this page's neighbours are always among them, so the arrows only repeat them */
@media (max-width: 560px) { .pagination { gap: 3px; } .pagination .pg { min-width: 30px; height: 40px; padding: 0 4px; font-size: 15px; } .pagination .pg-gap { min-width: 12px; } .pagination .pg-arrow { display: none; } }

/* News page heading (no photo banner: the lead article is the big picture) */
.news-head { margin: 0 0 26px; }
.news-head h1 { margin: 6px 0 0; font-size: clamp(34px, 4vw, 52px); line-height: 1.02; }
.news-head p { margin: 8px 0 0; }
.news-page .news-feature .eyebrow { color: var(--red-text); }
.news-page .news-feature p { color: #D5D1CC; }
.news-page .news-feature { margin-bottom: 36px; }
@media (max-width: 760px) { .news-page .news-feature { gap: 16px; margin-bottom: 28px; } }
/* Basketball ACT club picker (a player's current club): the whole list under Northside and Southside, narrowing as you type. */
.clubpick { position: relative; display: block; }
.clubpick input { width: 100%; }
.clubmenu { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 300px; overflow: auto; background: var(--coal); border: 1px solid #3A3A42; border-radius: 8px; padding: 4px 0; box-shadow: 0 12px 28px rgba(0,0,0,0.45); }
.clubmenu[hidden] { display: none; }
.clubmenu .clubregion { margin-left: 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.clubmenu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: var(--text); font: 15px var(--body); padding: 8px 12px; cursor: pointer; }
.clubmenu button:hover, .clubmenu button:focus { background: #222228; outline: none; }

/* A booking link's page: everyone booked, and add-to-calendar buttons with their icons */
.bk-session + .bk-session { border-top: 1px solid var(--line, #2A2A30); padding-top: 18px; }
.bk-person { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid #ECE8E3; }
.bk-person > div:first-child { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.bk-person .buy { margin-top: 8px; }
.cal-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cal-links > span { flex-basis: 100%; }
.cal-links .btn, .prose .cal-links a.btn { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.cal-links img { width: 20px; height: 20px; }
@media (max-width: 520px) { .cal-links .btn { flex: 1 1 100%; justify-content: flex-start; } }
/* A booking card on a phone: the details get the full width, the number and where it stands go underneath */
@media (max-width: 520px) { .ocard.bcard { grid-template-columns: 1fr; gap: 8px; } .ocard.bcard .ocard-side { flex-direction: row; align-items: center; justify-content: space-between; } }

/* A session invitation's page: the chosen answer's button is ticked */
.invite-buttons { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.invite-buttons .btn[aria-pressed="true"]::before { content: "✓ "; }
.invite-buttons .btn[aria-pressed="false"] { opacity: .8; }
@media (max-width: 560px) { .invite-buttons .btn { width: 100%; justify-content: center; } }

/* ================= Light (day) mode ================= */
/* The back office's day look carried to the website: warm off-white pages, white cards with hairlines, dark type, a
   deeper red for text. The photo banners, the photo quote band and the footer stay dark, so the club's black still
   anchors every page. Everything is keyed to html[data-scheme="light"] (site/assets/mode.js resolves "follow the
   device"). The colours themselves sit on html[data-scheme="light"] (outranking :root); every other rule is wrapped in :where() so it weighs the same as the dark one it replaces and wins by coming last. */
html[data-scheme="light"] {
  --ink: #F3F1EE; --coal: #FFFFFF; --line: #E2DED9; --paper: #FFFFFF;
  --text: #1A1A1D; --soft: #46434A; --mute: #5E5A57; --red-text: #B71C24; --red-deep: #8A1219;
  --grade-card: saturate(1.05) contrast(1.03);
  color-scheme: light;
}
/* the dark parts keep their dark colours, whatever the page around them */
:where([data-scheme="light"]) :is(.hero, .band-photo, .site-foot) {
  --ink: #0B0B0D; --coal: #141417; --line: #26262C; --text: #F4F2F0; --soft: #CFCBC7; --mute: #A8A4A0; --red-text: #FF6A70;
  color: var(--text); color-scheme: dark;
}
html[data-scheme="light"] { scrollbar-color: #C9C4BE #F3F1EE; }
@media (min-width: 1000px) {
  :where([data-scheme="light"]) body::before { background: #E6E2DD; }
  :where([data-scheme="light"]) .page { box-shadow: 0 0 0 1px #E2DED9, 0 20px 60px -40px rgba(0,0,0,0.25); }
}
:where([data-scheme="light"]) .page { background-image: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px); }

/* header and its menus */
:where([data-scheme="light"]) .site-head { background: rgba(255,255,255,0.86); border-bottom-color: var(--line); box-shadow: 0 1px 0 rgba(224,38,47,0.35), 0 10px 30px -22px rgba(0,0,0,0.25); }
:where([data-scheme="light"]) .dd { background: #FFFFFF; box-shadow: 0 16px 40px -12px rgba(0,0,0,0.18); }
:where([data-scheme="light"]) .dd a:hover { background: #F3F1EE; }
:where([data-scheme="light"]) .dd .dd-sub { color: var(--soft); }
@media (max-width: 1100px) { :where([data-scheme="light"]) .dd a { color: var(--soft); } }
:where([data-scheme="light"]) .crumbs-bar a:hover, :where([data-scheme="light"]) .crumbs-bar [aria-current=page] { color: var(--text); }

/* buttons: the light button becomes the dark one; on the photos it stays white */
:where([data-scheme="light"]) .btn-light:hover { background: #000; color: #F3F1EE; }
:where([data-scheme="light"]) .btn-line { border-color: rgba(26,26,29,0.35); }
:where([data-scheme="light"]) .btn-line:hover { color: var(--red-text); }
:where([data-scheme="light"]) :is(.hero, .band-photo) .btn-light:hover { background: #FFFFFF; color: #0B0B0D; }
:where([data-scheme="light"]) :is(.hero, .band-photo) .btn-line { border-color: rgba(255,255,255,0.45); }
:where([data-scheme="light"]) :is(.hero, .band-photo) .btn-line:hover { color: #FFFFFF; }
:where([data-scheme="light"]) .chip { color: var(--text); }
:where([data-scheme="light"]) .chip:hover { border-color: var(--text); }
:where([data-scheme="light"]) .chip[aria-pressed="true"] { color: #FFFFFF; }
:where([data-scheme="light"]) .chip[data-kind-filter]::before { border-color: var(--text); }
:where([data-scheme="light"]) .pagination a.pg { border-color: var(--line); color: var(--text); background: #FFFFFF; }
:where([data-scheme="light"]) .pagination a.pg:hover, :where([data-scheme="light"]) .pagination a.pg:focus-visible { background: #F3F1EE; }
:where([data-scheme="light"]) .pagination .pg-off { border-color: var(--line); color: #8C8782; }
:where([data-scheme="light"]) .pagination .pg-gap { color: #6B6B73; }

/* surfaces: white cards on the off-white page */
:where([data-scheme="light"]) :is(.tile, .panel, .person, .pcard, .ocard, .cart-main, .cart-summary, .cart-empty) { background: #FFFFFF; border-color: var(--line); box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
:where([data-scheme="light"]) :is(.tile, .panel, .person):hover, :where([data-scheme="light"]) a.tile:hover { box-shadow: 0 14px 40px -18px rgba(224,38,47,0.35); }
:where([data-scheme="light"]) :is(.account-card, .contact-note, .signedas, .acct-panel, .acct-menu, dialog.crop-dlg) { background: #FFFFFF; }
:where([data-scheme="light"]) .acct-panel .account-card { background: #FAF9F7; }
:where([data-scheme="light"]) .band-paper { background: #FFFFFF; border-block: 1px solid var(--line); }
:where([data-scheme="light"]) .product { border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 12px 30px -24px rgba(0,0,0,0.35); }
:where([data-scheme="light"]) .product:hover { box-shadow: 0 22px 44px -26px rgba(224,38,47,0.4); }
:where([data-scheme="light"]) :is(.card-photo img, .news-card img, .mosaic img, .news-feature img) { box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 18px 40px -26px rgba(0,0,0,0.45); }
:where([data-scheme="light"]) .acct-hero { background: radial-gradient(120% 140% at 0% 0%, rgba(224,38,47,0.10), transparent 60%), #FFFFFF; }
:where([data-scheme="light"]) .acct-tabs button { background: #F3F1EE; }
:where([data-scheme="light"]) .acct-tabs button:hover { color: var(--text); }
:where([data-scheme="light"]) .acct-tabs button[aria-selected=true] { background: #FFFFFF; color: var(--text); border-bottom-color: #FFFFFF; }
:where([data-scheme="light"]) .child-tabs button { background: #F3F1EE; }
:where([data-scheme="light"]) .child-tabs button:hover { color: var(--text); }
:where([data-scheme="light"]) .child-tabs button[aria-pressed=true] { background: #FFFFFF; color: var(--text); }
:where([data-scheme="light"]) .child-comments blockquote { background: #F3F1EE; }
:where([data-scheme="light"]) .pavatar { background: #E9E6E2; }
:where([data-scheme="light"]) .pavatar-lg { border-color: var(--line); }
:where([data-scheme="light"]) .avatar-badge { border-color: #FFFFFF; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
:where([data-scheme="light"]) .pic-rm:hover { color: var(--text); }
:where([data-scheme="light"]) .acct-menu { box-shadow: 0 14px 40px -12px rgba(0,0,0,0.2); }
:where([data-scheme="light"]) .acct-menu a:hover, :where([data-scheme="light"]) .acct-menu button:hover { background: #F3F1EE; }
:where([data-scheme="light"]) .acct-menu .acct-menu-admin { color: var(--red-text); }
:where([data-scheme="light"]) .person-card { color: var(--text); }
:where([data-scheme="light"]) .consent-box { border-color: var(--line); }
:where([data-scheme="light"]) .clubmenu { border-color: var(--line); box-shadow: 0 12px 28px -10px rgba(0,0,0,0.2); }
:where([data-scheme="light"]) .clubmenu button:hover, :where([data-scheme="light"]) .clubmenu button:focus { background: #F3F1EE; }
:where([data-scheme="light"]) .pager-btn { border-color: var(--line); }

/* the calendar */
:where([data-scheme="light"]) .cal-cell { background: #FFFFFF; color: var(--text); }
:where([data-scheme="light"]) .cal-cell:hover { border-color: rgba(224,38,47,0.6); }
:where([data-scheme="light"]) .cal-cell.today .num { color: #FFFFFF; }
:where([data-scheme="light"]) .bub.feed { color: var(--text); border-color: var(--text); }
:where([data-scheme="light"]) .agenda-row .when b { color: var(--text); }
:where([data-scheme="light"]) .agenda-row.event-row .when b { color: var(--red-text); }
:where([data-scheme="light"]) .agenda-row.k-feed { border-left-color: var(--text); }

/* text */
:where([data-scheme="light"]) :is(.prose p, .prose li) { color: #2B2A2E; }
:where([data-scheme="light"]) .prose strong { color: #0B0B0D; }
:where([data-scheme="light"]) .prose blockquote { color: #3A3734; }
:where([data-scheme="light"]) .prose a { color: var(--red-text); }
:where([data-scheme="light"]) :is(.prose hr, .prose th, .prose td) { border-color: var(--line); }
:where([data-scheme="light"]) .prose th { background: #F3F1EE; }
:where([data-scheme="light"]) .pager-slide blockquote { color: #2B2A2E; }
:where([data-scheme="light"]) .news-page .news-feature p { color: var(--soft); }
:where([data-scheme="light"]) .note { background: #FFF4D6; color: #5C4500; border-color: rgba(190,140,0,0.35); }

/* fields */
:where([data-scheme="light"]) :is(.form input:not([type=checkbox]), .form select, .form textarea) { background: #FFFFFF; border-color: #C9C4BE; color: var(--text); }
:where([data-scheme="light"]) :is(.child-quote input, .up-for, .up-for-other, .who-name) { border-color: #C9C4BE; }
:where([data-scheme="light"]) .switch .slider { background: #C9C4BE; }
:where([data-scheme="light"]) .switch input:focus-visible + .slider { outline-color: var(--text); }

/* the cart */
:where([data-scheme="light"]) .cart-row { border-bottom-color: var(--line); }
:where([data-scheme="light"]) .cart-qty { border-color: var(--line); }
:where([data-scheme="light"]) .cart-qty button { color: var(--text); }
:where([data-scheme="light"]) :is(.cart-qty button:hover, .cart-x:hover) { background: #F3F1EE; color: var(--text); }
:where([data-scheme="light"]) .sum-row.total { border-top-color: var(--line); }

/* status colours that read on white */
:where([data-scheme="light"]) :is(.form-status.ok, .up-msg.ok, .ts-status.ok) { color: #1E6B38; }
:where([data-scheme="light"]) .ts-status.error { color: var(--red-text); }
:where([data-scheme="light"]) .apill { background: #ECE8E3; }
:where([data-scheme="light"]) :is(.apill.ok, .signedas-tick, .dob-check.ok .dob-mark) { background: #E4F4E9; color: #1E6B38; }
:where([data-scheme="light"]) .apill.wait { background: #FFF1DD; color: #8A4B00; }
:where([data-scheme="light"]) .apill.done { background: #E3ECFD; color: #1F4FB8; }
:where([data-scheme="light"]) .dob-check .dob-val { border-color: var(--line); }
:where([data-scheme="light"]) :is(.dob-check.bad .dob-mark, .dob-check.bad small) { color: var(--red-text); }
:where([data-scheme="light"]) .dob-check.bad small a { color: var(--text); }
:where([data-scheme="light"]) .toast { background: #FFFFFF; color: var(--text); border-color: var(--line); box-shadow: 0 6px 22px rgba(0,0,0,0.15); }
:where([data-scheme="light"]) .toast.ok { background: #E4F4E9; color: #1E6B38; border-color: #2EA043; }
:where([data-scheme="light"]) .toast.bad { background: #FCE4E5; color: #9B1620; border-color: var(--red); }

/* Auto / Light / Dark, chosen by a signed-in member (portrait menu and My account); where the theme has both modes */
.mode-seg { display: flex; gap: 2px; width: 100%; max-width: 340px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.account-card .mode-seg { margin-top: 12px; }
.mode-seg button { flex: 1 1 0; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-weight: 700; font-size: 14px; text-align: center; cursor: pointer; }
.mode-seg button:not([aria-pressed="true"]):hover { background: rgba(128,128,128,.2); }
.mode-seg button[aria-pressed="true"] { background: var(--red); color: #fff; }
.acct-menu .mode-seg button { display: block; text-align: center; padding: 6px 4px; font-size: 14px; font-weight: 700; }
.acct-menu .mode-seg button:not([aria-pressed="true"]):hover { background: rgba(128,128,128,.2); }
.acct-menu .mode-seg button[aria-pressed="true"], .acct-menu .mode-seg button[aria-pressed="true"]:hover { background: var(--red); color: #fff; }
.acct-menu-mode { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 8px; margin-top: 4px; border-top: 1px solid var(--line); }
.acct-menu-mode > span { color: var(--mute); font-size: 13px; }

/* =============================== Game Night =============================== */
/* Bold and sporty, from the approved mock-up (review page, option A): white pages (black in dark), huge condensed capitals,
   slanted buttons, square cards on grey, diagonal cuts on the bands, scoreboard numbers, a red ticker. Every rule below
   weighs the same as the one it changes and wins by coming later. */
:root { --ink: #0B0B0D; --coal: #141417; --line: #26262C; --text: #F4F2F0; --soft: #CFCBC7; --mute: #A8A4A0; --red: #E0262F; --red-text: #FF6A70; --red-btn: #D01F29; --cut: 10px; }
html[data-scheme="light"] { --ink: #FFFFFF; --coal: #F3F1F1; --line: #E0DDDB; --paper: #F3F1F1; --text: #0B0B0D; --soft: #3A383D; --mute: #5E5B60; --red-text: #B3141C; }
:where([data-scheme="light"]) { scrollbar-color: #C9C5C2 #FFFFFF; }

/* the page runs the full width; inner pages keep their 80% column */
@media (min-width: 1000px) {
  body::before { content: none; }
  .page, :where([data-scheme="light"]) .page { width: auto; box-shadow: none; }
}
.page, :where([data-scheme="light"]) .page { background-image: none; }

/* type: bigger, heavier capitals; labels in the body face, no code-style slashes */
.display { font-weight: 900; line-height: 0.88; letter-spacing: 0; }
.section-head h2 { font-size: clamp(40px, 5.4vw, 72px); }
.section-head h2::after, .section h1.display::after { content: none; }
.eyebrow { font-family: var(--body); font-weight: 700; font-size: 13px; letter-spacing: 0.18em; }
.eyebrow::before { content: none; }
.tile small, .r-label { font-family: var(--body); letter-spacing: 0.14em; }
.agenda-row .when b, .cal-cell .num, .cart-price, .sum-row b { font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.agenda-row .when b { font-size: 22px; }
.cart-price, .sum-row b { font-size: 20px; }

/* header: solid, a red bar under the page you're on */
.site-head, :where([data-scheme="light"]) .site-head { background: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--line); box-shadow: none; }
.brand span { font-weight: 800; font-size: 25px; letter-spacing: 0.04em; }
@media (max-width: 1100px) { .brand span { font-size: 21px; } }
@media (max-width: 520px) { .brand span { font-size: 16px; } }
.nav > a::after, .nav-top::before { height: 3px; bottom: -8px; }

/* buttons: slanted ends, flat colour */
.btn, .chip, .pagination .pg, .acct-tabs button, .child-tabs button { border-radius: 0; }
.btn { clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); padding-inline: 28px; letter-spacing: 0.01em; box-shadow: none; }
.btn:hover { transform: none; }
.btn-red, .btn-red:hover, .pagination .pg-now { background: var(--red-btn); box-shadow: none; }
.btn-red:hover { background: #B3141C; }
/* a slanted cut would slice an outline's sides, so the second button is filled: grey on the page, black on a photo */
.btn-line, :where([data-scheme="light"]) .btn-line { border-color: transparent; background: var(--line); backdrop-filter: none; }
.btn-line:hover, :where([data-scheme="light"]) .btn-line:hover { border-color: transparent; box-shadow: inset 0 -3px 0 var(--red); }
:where([data-scheme]) :is(.hero, .band-photo) .btn-line, :is(.hero, .band-photo) .btn-line { background: #0B0B0D; color: #FFFFFF; border-color: transparent; }
.chip { clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); padding-inline: 18px; }
.chip, :where([data-scheme="light"]) .chip { border-color: transparent; background: var(--coal); } /* filled: the slant would slice an outline */
.chip:hover, :where([data-scheme="light"]) .chip:hover { transform: none; border-color: transparent; box-shadow: inset 0 -3px 0 var(--red); }

/* surfaces: square, grey, no outlines; a red bar shows on hover */
.tile, .panel, .person, .pcard, .ocard, .cart-main, .cart-summary, .cart-empty, .account-card, .acct-hero, .acct-panel, .signedas, .contact-note, .product, .event, .cal-cell, .note, .receipt, .pager-slide,
:where([data-scheme="light"]) :is(.tile, .panel, .person, .pcard, .ocard, .cart-main, .cart-summary, .cart-empty, .product) { border-radius: 0; }
.tile, .panel, .person, .pcard, .ocard, .cart-main, .cart-summary, .cart-empty,
:where([data-scheme="light"]) :is(.tile, .panel, .person, .pcard, .ocard, .cart-main, .cart-summary, .cart-empty) { background: var(--coal); border-color: transparent; box-shadow: none; }
.tile:hover, .panel:hover, .person:hover, a.tile:hover, .ocard:hover,
:where([data-scheme="light"]) :is(.tile, .panel, .person):hover, :where([data-scheme="light"]) a.tile:hover { transform: none; border-color: transparent; box-shadow: inset 0 -4px 0 var(--red); }
.product, :where([data-scheme="light"]) .product { border: 0; box-shadow: none; }
.product:hover, :where([data-scheme="light"]) .product:hover { transform: none; box-shadow: inset 0 -4px 0 var(--red); }
.card-photo img, .news-card img, .mosaic img, .news-feature img, .feature-photo img,
:where([data-scheme="light"]) :is(.card-photo img, .news-card img, .mosaic img, .news-feature img) { border-radius: 0; box-shadow: none; }
.card-photo img, .news-card img { clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }
.acct-hero, :where([data-scheme="light"]) .acct-hero { background: var(--coal); border: 0; box-shadow: inset 6px 0 0 var(--red); }
.acct-tabs button, :where([data-scheme="light"]) .acct-tabs button { background: transparent; border: 0; }
.acct-tabs button[aria-selected=true], :where([data-scheme="light"]) .acct-tabs button[aria-selected=true] { background: transparent; box-shadow: inset 0 -4px 0 var(--red); border: 0; }
.acct-panel, :where([data-scheme="light"]) .acct-panel { border: 0; background: transparent; padding-inline: 0; }
.acct-panel .account-card, :where([data-scheme="light"]) .acct-panel .account-card { background: var(--coal); }
.cal-cell, :where([data-scheme="light"]) .cal-cell { background: var(--coal); border-color: transparent; }
.cal-cell:hover, :where([data-scheme="light"]) .cal-cell:hover { border-color: var(--red); }
.form input:not([type=checkbox]), .form select, .form textarea, .buy select, .buy input, .cart-qty input { border-radius: 0; }
.agenda-row:hover { background: transparent; box-shadow: inset 4px 0 0 var(--red); }

/* bands: the photo banner and the club news band are cut on the slant */
.hero::before { content: none; }
.hero { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 0 100%); }
.hero .wrap { padding-bottom: 88px; }
.hero h1 { font-size: clamp(72px, 10vw, 150px); line-height: 0.84; }
.hero-dots { bottom: 52px; }
.page-hero { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%); }
.page-hero .wrap { padding-bottom: 64px; }
.band-paper { clip-path: polygon(0 36px, 100% 0, 100% 100%, 0 100%); padding-top: 100px; }
:where([data-scheme="light"]) .band-paper { background: #F3F1F1; border-block: 0; }
.band-photo::after { background: linear-gradient(100deg, rgba(11,11,13,0.82), rgba(176,20,28,0.7)); }

/* the footer follows the page: light grey in light, black in dark, with a red rule on top */
.site-foot { border-top: 4px solid var(--red); background: #0B0B0D; }
.site-foot::before { content: none; }
:where([data-scheme="light"]) .site-foot { --ink: #F3F1F1; --coal: #FFFFFF; --line: #E0DDDB; --text: #0B0B0D; --soft: #3A383D; --mute: #5E5B60; --red-text: #B3141C; color: var(--text); color-scheme: light; background: #F3F1F1; }

/* the "next up" ticker: a red band on the slant, rolling slowly; still for people who prefer less motion */
.gn-ticker { position: relative; z-index: 2; margin-top: -30px; background: var(--red); color: #FFFFFF; overflow: hidden; clip-path: polygon(0 22%, 100% 0, 100% 78%, 0 100%); }
.gn-track { display: flex; width: max-content; animation: gn-roll 60s linear infinite; }
.gn-ticker:hover .gn-track, .gn-ticker:focus-within .gn-track { animation-play-state: paused; }
.gn-set { display: flex; align-items: center; gap: 22px; padding: 22px 22px 22px 0; white-space: nowrap; }
.gn-set a, .gn-set span { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: 0.03em; text-transform: uppercase; color: #FFFFFF; }
.gn-set a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; }
.gn-set span { opacity: 0.6; }
@keyframes gn-roll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .gn-track { animation: none; } .gn-ticker { overflow-x: auto; } }

/* the scoreboard strip: the club in four numbers */
.gn-score .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 44px 28px; }
.gn-stat { padding: 0 22px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gn-stat:first-child { border-left: 0; padding-left: 0; }
.gn-stat b { font-family: var(--display); font-weight: 900; font-size: clamp(64px, 8vw, 120px); line-height: 0.82; text-transform: uppercase; white-space: nowrap; }
.gn-stat b span { font-size: 0.36em; font-weight: 800; margin-left: 8px; color: var(--red-text); }
.gn-stat:nth-child(2) b { color: var(--red-text); }
.gn-stat small { color: var(--soft); font-size: 15px; font-weight: 600; }
@media (max-width: 900px) {
  .gn-score .wrap { grid-template-columns: minmax(0, 1fr); gap: 22px 0; }
  .gn-stat { border-left: 0; padding-left: 0; }
}
@media (max-width: 520px) {
  .gn-set a, .gn-set span { font-size: 18px; }
  .gn-stat { padding: 0 14px; }
  .gn-stat b { font-size: clamp(48px, 15vw, 64px); }
}

/* ---- Game Night's own layouts (parts.js and client.js templates) ---- */
/* a date block, as on a fixture list: big day number over the weekday and month */
.gn-date { flex: 0 0 auto; width: 76px; min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--red-btn); color: #FFFFFF; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.gn-date b { font-family: var(--display); font-weight: 900; font-size: 38px; line-height: 0.9; }
.gn-date span { font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.gn-date-lg { width: 112px; min-height: 112px; }
.gn-date-lg b { font-size: 60px; }

/* home: the photo banner with the "next up" box on the right */
.gn-hero .wrap { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.gn-hero-main { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.gn-next { flex: 0 1 360px; min-width: 0; background: rgba(11,11,13,0.88); color: #FFFFFF; border-top: 6px solid var(--red); padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.gn-next-top { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: #FF6A70; }
.gn-next-top span { color: #CFCBC7; letter-spacing: 0.1em; }
.gn-next-row { display: flex; gap: 16px; align-items: center; }
.gn-next-title { display: block; font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1; text-transform: uppercase; }
.gn-next-meta { display: block; margin-top: 6px; font-size: 14px; color: #CFCBC7; }
.gn-next p { margin: 0; color: #CFCBC7; font-size: 15px; }
.gn-next-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid #34343B; padding-top: 12px; font-weight: 600; font-size: 15px; }
.gn-next-foot b { font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; }
.gn-next .btn { align-self: stretch; }

/* home: how we develop players, numbered 01 to 04 */
.gn-num { position: relative; }
.gn-numbig { position: absolute; z-index: 1; top: 10px; left: 14px; font-family: var(--display); font-weight: 900; font-size: 64px; line-height: 1; color: #FFFFFF; text-shadow: 0 2px 16px rgba(0,0,0,0.5); pointer-events: none; }
.gn-num h3 { font-size: 30px; }

/* home: the red "Book a session" band */
.gn-book { background: var(--red-btn); color: #FFFFFF; clip-path: polygon(0 0, 100% 36px, 100% 100%, 0 calc(100% - 36px)); padding-block: 96px; }
.gn-book-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.gn-book-head h2 { font-size: clamp(44px, 6vw, 84px); }
.gn-book .btn-light, :where([data-scheme]) .gn-book .btn-light { background: #FFFFFF; color: #0B0B0D; }
.gn-srows { display: flex; flex-direction: column; gap: 10px; }
.gn-srow { display: flex; align-items: center; gap: 18px; padding: 10px 18px 10px 10px; background: rgba(0,0,0,0.22); color: #FFFFFF; }
.gn-srow:hover { color: #FFFFFF; background: rgba(0,0,0,0.38); }
.gn-srow .gn-date { background: #FFFFFF; color: #0B0B0D; }
.gn-srow-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gn-srow-main b { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1; text-transform: uppercase; }
.gn-srow-main span, .gn-srow-side span { font-size: 15px; opacity: 0.92; }
.gn-srow-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.gn-srow-side b { font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; }
.gn-book-empty { margin: 0; font-size: 18px; font-weight: 600; }

/* home: values in big capitals, the families' quote band, the founder */
.gn-values { padding-block: 0; }
.gn-values h3 { font-size: clamp(40px, 4.4vw, 60px); }
.gn-values .red { color: var(--red-text); }
.gn-quote { clip-path: polygon(0 0, 100% 36px, 100% 100%, 0 100%); }
.gn-quote .quote { padding-block: 96px 72px; }
.gn-quote-mark { font-family: var(--display); font-weight: 900; font-size: 140px; line-height: 0.5; height: 50px; color: #FFFFFF; }
.gn-quote blockquote { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(26px, 3.2vw, 44px); line-height: 1.02; color: #FFFFFF; }
.gn-quote cite { color: #FFFFFF; }
.gn-quote .actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.gn-quote .btn-light, :where([data-scheme]) .gn-quote .btn-light { background: #FFFFFF; color: #0B0B0D; }
.gn-founder h2 { font-size: clamp(44px, 5.4vw, 76px); }

/* a session's page: the date block and title, the facts as boxes, the booking panel beside them */
.gn-session .wrap > .link-red { display: inline-block; margin-bottom: 18px; }
.gn-sess-head { display: flex; gap: 24px; align-items: center; margin-bottom: 32px; }
.gn-sess-head > div { min-width: 0; }
.gn-sess-head h1 { font-size: clamp(44px, 6.4vw, 96px); margin-top: 8px; overflow-wrap: anywhere; }
.gn-sess { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: start; }
.gn-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gn-box { background: var(--coal); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; min-width: 0; box-shadow: inset 0 4px 0 var(--red); }
.gn-box-wide { grid-column: 1 / -1; }
.gn-box b + b { font-size: 22px; }
.gn-maps { font-size: 15px; font-weight: 700; color: var(--red); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.gn-box small { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.gn-box b { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1.02; text-transform: uppercase; overflow-wrap: anywhere; }
.gn-sess-book { background: var(--coal); padding: 24px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 96px; box-shadow: inset 6px 0 0 var(--red); }
.gn-sess-book h2 { font-size: 44px; }
.gn-sess-book .buy { max-width: none; }
.gn-sess-book .test-banner { margin: 0; flex-direction: column; align-items: flex-start; }
@media (max-width: 1000px) {
  .gn-sess { grid-template-columns: minmax(0, 1fr); }
  .gn-sess-book { position: static; }
}
@media (max-width: 900px) {
  .gn-next { flex-basis: 100%; }
}
@media (max-width: 520px) {
  .gn-boxes { grid-template-columns: minmax(0, 1fr); }
  .gn-sess-head { gap: 14px; align-items: flex-start; }
  .gn-date-lg { width: 80px; min-height: 80px; }
  .gn-date-lg b { font-size: 40px; }
  .gn-srow { flex-wrap: wrap; gap: 12px; padding: 10px; }
  .gn-srow-side { flex-direction: row; align-items: baseline; gap: 12px; flex-basis: 100%; justify-content: space-between; }
  .gn-srow-main b { font-size: 22px; }
  .gn-numbig { font-size: 48px; }
  .gn-book { padding-block: 72px; }
}

/* My account: the player card as a trading card, the "Hello" header, bookings and orders as fixture rows */
.gn-player:not([hidden]) { display: block; padding: 0; background: none; border: 0; overflow: visible; }
.gn-pmain { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; background: var(--coal); }
.gn-pside { position: relative; overflow: hidden; background: var(--red-btn); color: #FFFFFF; padding: 26px 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 380px; }
.gn-pbig { position: absolute; right: -10px; bottom: -40px; font-family: var(--display); font-weight: 900; font-size: 260px; line-height: 1; color: rgba(255,255,255,0.16); pointer-events: none; }
.gn-pface { position: relative; width: 150px; height: 150px; border-radius: 0; border: 4px solid #FFFFFF; background: #0B0B0D; color: #FFFFFF; display: flex; align-items: center; justify-content: center; overflow: hidden; font-family: var(--display); font-weight: 900; font-size: 56px; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.gn-pface img { width: 100%; height: 100%; object-fit: cover; }
.gn-pname { position: relative; display: flex; flex-direction: column; gap: 6px; }
.gn-pno { font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1; }
.gn-pname .child-name { font-family: var(--display); font-weight: 900; font-size: 54px; line-height: 0.86; text-transform: uppercase; overflow-wrap: anywhere; }
.gn-pbody { padding: 24px 26px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.gn-pfacts { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 15px; }
.gn-pfacts dt { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); padding-top: 2px; }
.gn-pfacts dd { margin: 0; }
.gn-player .child-sig { margin: 0; font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.05; text-transform: uppercase; }
.gn-pbtns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-start; }
.gn-hello h2 { font-size: clamp(48px, 7vw, 96px); }
.gn-row { align-items: center; }
.gn-row .gn-date { width: 68px; min-height: 68px; }
.gn-row .gn-date b { font-size: 32px; }
.gn-ref { font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1; letter-spacing: 0.02em; }
.gn-money { font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1; }
/* the card follows the room it has, not the window: beside the details when wide, a red band on top when narrow */
:has(> .gn-player) { container-type: inline-size; }
@container (max-width: 720px) {
  .gn-pmain { grid-template-columns: minmax(0, 1fr); }
  .gn-pside { min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; padding: 18px; gap: 18px; }
  .gn-pface { width: 104px; height: 104px; flex: 0 0 104px; font-size: 40px; }
  .gn-pname .child-name { font-size: 40px; }
  .gn-pbig { font-size: 190px; bottom: -44px; }
  .gn-pbody { padding: 18px; }
}
@container (max-width: 400px) {
  .gn-pface { width: 80px; height: 80px; flex-basis: 80px; font-size: 32px; }
  .gn-pname .child-name { font-size: 32px; }
}

/* ---- Our teams and a team's page (members only): competitions as fixture-board headings, teams as rows with the club's badge,
   the El!te players as numbered rows, the facts as scoreboard boxes ---- */
.gn-teams-h, .gn-team-head h1 { font-size: clamp(48px, 7vw, 96px); }
.gn-comp { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.gn-comph { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; border-bottom: 3px solid var(--text); padding-bottom: 6px; }
.gn-comph b { font-family: var(--display); font-weight: 900; font-size: clamp(26px, 3vw, 36px); line-height: 0.95; text-transform: uppercase; }
.gn-comph .muted { font-size: 14px; }
.gn-trows { display: flex; flex-direction: column; gap: 8px; }
.gn-trow { display: flex; align-items: center; gap: 14px; background: var(--coal); padding: 10px 16px 10px 10px; color: var(--text); min-width: 0; }
.gn-trow:hover { color: var(--text); box-shadow: inset 0 -4px 0 var(--red); }
.gn-trow-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.gn-trow-main b { font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.gn-trow-main small { color: var(--mute); font-size: 14px; }
.gn-trow-go { font-family: var(--display); font-weight: 900; font-size: 34px; color: var(--red-text); }
.gn-logo { flex: 0 0 auto; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: #0B0B0D; color: #FFFFFF; font-family: var(--display); font-weight: 900; font-size: 20px; box-shadow: inset 0 -4px 0 var(--red); }
.gn-logo-lg { width: 96px; height: 96px; font-size: 38px; box-shadow: inset 0 -6px 0 var(--red); }
.gn-team-head { display: flex; gap: 22px; align-items: center; margin-top: 6px; }
.gn-team-head > div { min-width: 0; }
.gn-team-head h1 { margin: 6px 0 8px; overflow-wrap: anywhere; }
.gn-team-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.gn-team-h2 { font-size: 34px; }
.gn-mems { display: flex; flex-direction: column; gap: 8px; }
.gn-mem { display: flex; align-items: stretch; background: var(--coal); min-width: 0; }
.gn-mem .no { flex: 0 0 56px; min-height: 52px; display: flex; align-items: center; justify-content: center; background: var(--red-btn); color: #FFFFFF; font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; }
.gn-mem .nm { display: flex; align-items: center; padding: 8px 14px; min-width: 0; }
.gn-mem .nm b { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.05; text-transform: uppercase; overflow-wrap: anywhere; }
.gn-team-boxes { grid-template-columns: minmax(0, 1fr); }
.gn-team-boxes .gn-box a { font-size: 15px; }
@media (max-width: 900px) { .gn-team-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .gn-team-head { gap: 14px; align-items: flex-start; }
  .gn-logo-lg { width: 64px; height: 64px; font-size: 26px; }
  .gn-trow { gap: 10px; padding-right: 10px; }
  .gn-trow-main b { font-size: 20px; }
}
/* ---- a team's games on its page (lib/site.js teamResults); every theme carries this block ---- */
.tr { --win: #4ADE80; --lose: var(--red-text); display: flex; flex-direction: column; gap: 14px; }
html[data-scheme="light"] .tr { --win: #12703A; }
.tr-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.tr-head h2 { margin: 0; font-size: 30px; }
.tr-facts { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 0; color: var(--soft); font-size: 15px; }
.tr-facts span + span::before { content: "·"; margin: 0 12px; color: var(--mute); }
.tr-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.tr-g { flex: 0 0 156px; scroll-snap-align: start; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 14px 14px 12px; border: 1px solid var(--line); background: var(--coal); border-radius: 6px; box-shadow: inset 0 4px 0 var(--mute); }
.tr-g small { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.tr-g b { font-size: 20px; line-height: 1.15; }
.tr-g span { font-size: 14px; color: var(--soft); overflow-wrap: anywhere; }
.tr-g.tr-win { box-shadow: inset 0 4px 0 var(--win); } .tr-g.tr-win b { color: var(--win); }
.tr-g.tr-loss { box-shadow: inset 0 4px 0 var(--lose); } .tr-g.tr-loss b { color: var(--lose); }
.tr-g.tr-draw { box-shadow: inset 0 4px 0 var(--soft); }
.tr-g.tr-up { border-style: dashed; box-shadow: none; } .tr-g.tr-up b { color: var(--text); }
.tr-g.tr-late b, .tr-g.tr-bye b, .tr-g.tr-x b { color: var(--mute); font-size: 17px; } .tr-g.tr-x { opacity: 0.7; text-decoration: line-through; }
.tr-all > summary { cursor: pointer; font-weight: 700; color: var(--soft); padding: 4px 0; }
.tr-rows { margin-top: 8px; }
.tr-row { display: grid; grid-template-columns: minmax(70px, 0.7fr) minmax(110px, 1fr) 2fr minmax(90px, auto); gap: 2px 14px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); }
.tr-row b { text-align: right; } .tr-res.tr-win { color: var(--win); } .tr-res.tr-loss { color: var(--lose); }
.tr-rd, .tr-when { color: var(--mute); font-size: 14px; } .tr-at { grid-column: 2 / -1; font-size: 13px; color: var(--mute); } .tr-at:empty { display: none; }
@media (max-width: 640px) {
  .tr-row { grid-template-columns: 1fr auto; } .tr-rd { grid-column: 1; } .tr-when { grid-column: 1; } .tr-opp { grid-column: 1; font-weight: 600; }
  .tr-row b { grid-column: 2; grid-row: 1 / span 2; align-self: center; } .tr-at { grid-column: 1 / -1; }
  .tr-g { flex-basis: 140px; }
}

/* ---- The Jersey number tab on a player's card: a family picks the player's number once (lib/playernumbers.js; the pieces are in
   site/assets/site.js). Colours match the back office's Player numbers screen: green free, blue taken, red the wrong odd or even. ---- */
.pc-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.pc-tabs button { font: inherit; font-weight: 700; color: var(--mute); background: transparent; border: 0; padding: 10px 16px 11px; cursor: pointer; white-space: nowrap; box-shadow: inset 0 -4px 0 transparent; display: inline-flex; gap: 8px; align-items: center; }
.pc-tabs button:hover { color: var(--text); }
.pc-tabs button[aria-selected=true] { color: var(--text); box-shadow: inset 0 -4px 0 var(--red); }
.pc-new { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--red-btn, var(--red)); color: #FFFFFF; padding: 1px 7px; border-radius: 999px; }
.pc-profile { display: grid; gap: 16px; min-width: 0; }
.pc-profile[hidden], .jn[hidden] { display: none; }
.jn-pickbtn { align-self: flex-start; }
.child-pills .jn-pickbtn { min-height: 34px; padding: 4px 12px; font-size: 14px; }
.jn { display: grid; gap: 14px; min-width: 0; }
.jn-h { margin: 0; font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 0.95; text-transform: uppercase; }
.jn-sub { margin: 0; color: var(--mute); font-size: 15px; }
.jn-sub b { color: var(--text); }
.jn-once { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; background: var(--ink); padding: 14px 16px; border-left: 4px solid var(--red); border-radius: 6px; }
.jn-once .jn-1 { grid-row: span 3; font-family: var(--display); font-weight: 900; font-size: 46px; line-height: 0.85; color: var(--red-text); text-align: center; }
.jn-once b { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; text-transform: uppercase; }
.jn-once p { margin: 0; font-size: 15px; color: var(--soft); }
.jn-once .why { font-size: 14px; color: var(--mute); }
.jn-open { margin: 0; background: rgba(46,158,91,0.14); border-left: 4px solid #2E9E5B; padding: 10px 14px; font-size: 15px; border-radius: 6px; }
.jn-lock { margin: 0; border-left: 4px solid var(--red); background: var(--ink); padding: 10px 14px; font-size: 15px; border-radius: 6px; }
.jn-msg { background: var(--ink); padding: 14px 16px; display: grid; gap: 6px; border-radius: 6px; }
.jn-msg p { margin: 0; }
.jn-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--mute); }
.jn-legend span { display: inline-flex; gap: 8px; align-items: center; }
.jn-legend i { width: 18px; height: 18px; border: 2px solid; display: inline-block; border-radius: 4px; }
.jn-legend .free, .num-cell.free { border-color: #2E9E5B; background: rgba(46,158,91,0.16); }
.jn-legend .taken, .num-cell.taken { border-color: #2F6FDE; background: rgba(47,111,222,0.22); }
.jn-legend .other, .num-cell.other { border-color: #D91E2A; background: rgba(217,30,42,0.14); }
.num-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.num-cell { min-height: 46px; padding: 0; border: 2px solid var(--line); border-radius: 6px; background: transparent; color: var(--text); font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; cursor: pointer; }
.num-cell.free:hover { background: rgba(46,158,91,0.34); }
.num-cell.taken, .num-cell.other { cursor: not-allowed; }
.num-cell:disabled { opacity: 1; }
.num-cell.sel { background: #2E9E5B; color: #FFFFFF; outline: 3px solid var(--text); outline-offset: 2px; position: relative; z-index: 1; }
.jn-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--ink); padding: 12px 14px; border-radius: 8px; }
.jn-bar p { margin: 0; flex: 1 1 90px; font-size: 15px; color: var(--soft); }
.jn-bar p b { color: var(--text); font-family: var(--display); font-size: 26px; font-weight: 900; }
.jn-bar .btn[disabled], dialog.jn-dlg .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.jn-shirt { position: relative; flex: 0 0 auto; width: 64px; height: 74px; background: var(--red-btn, var(--red)); color: #FFFFFF; clip-path: polygon(26% 0, 38% 0, 44% 9%, 56% 9%, 62% 0, 74% 0, 78% 14%, 88% 25%, 98% 30%, 98% 100%, 2% 100%, 2% 30%, 12% 25%, 22% 14%); display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 12px; }
.jn-shirt span { font-size: 8px; font-weight: 800; letter-spacing: 0.12em; }
.jn-shirt b { font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 0.9; }
.jn-shirt.q { background: var(--line); color: var(--mute); }
.jn-shirt.lg { width: 168px; height: 196px; padding-top: 30px; }
.jn-shirt.lg span { font-size: 16px; }
.jn-shirt.lg b { font-size: 104px; }
.jn-shirt.sm { width: 40px; height: 46px; padding-top: 8px; }
.jn-shirt.sm span { display: none; }
.jn-shirt.sm b { font-size: 22px; }
.jn-done { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.jn-done > div { flex: 1 1 240px; display: grid; gap: 10px; justify-items: start; min-width: 0; }
.jn-done p { margin: 0; }
.jn-pick-sum { display: flex; gap: 16px; align-items: center; }
.jn-pick-sum p { margin: 0; }
/* the boxes (the club's crop-dialog look): confirm, ask for a release, check a date of birth */
dialog.jn-dlg .crop-box { width: min(92vw, 480px); justify-items: stretch; text-align: left; }
dialog.jn-dlg .crop-box h3 { font-size: 30px; line-height: 0.95; }
dialog.jn-dlg .crop-btns { max-width: none; }
.jn-dlg-body { display: grid; gap: 12px; }
.jn-dlg-body p { margin: 0; }
.jn-dlg .consent-box { margin: 0; }
.jn-field { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
.jn-field input { min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--ink); color: var(--text); font: inherit; }
.jn-err { margin: 0; color: var(--red-text); font-weight: 600; }
/* a jersey line in the shop says which number the player wears (its card is always light, so these colours are fixed) */
.jn-shopno { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; background: #FFFFFF; border: 1px solid #CFCBC6; border-radius: 6px; padding: 8px 10px; font-size: 13px; color: #46434A; }
.jn-shopno b { display: block; color: #141416; font-size: 15px; }
.jn-shopno .jn-shirt.q { background: #DEDAD6; }
.jn-shopno .jn-shirt.q b { color: #8A8690; }
@media (max-width: 560px) {
  .jn-h { font-size: 28px; }
  .num-grid { gap: 4px; }
  .num-cell { min-height: 44px; font-size: 17px; border-width: 1.5px; }
  .jn-shirt.lg { width: 120px; height: 140px; padding-top: 22px; }
  .jn-shirt.lg span { font-size: 12px; }
  .jn-shirt.lg b { font-size: 72px; }
  .jn-once { grid-template-columns: 30px minmax(0, 1fr); gap: 4px 10px; padding: 12px; }
  .jn-once .jn-1 { font-size: 34px; }
  dialog.jn-dlg { margin: auto auto 0; width: 100vw; max-width: 100vw; border-radius: 14px 14px 0 0; }
  dialog.jn-dlg .crop-box { width: auto; padding-bottom: max(18px, env(safe-area-inset-bottom, 0px)); }
  dialog.jn-dlg .crop-btns { flex-direction: column-reverse; }
  dialog.jn-dlg .crop-btns .btn { width: 100%; justify-content: center; }
}

/* Game Night's look for the Jersey number tab: square and sporty, the Pick button white on the red side of the card, slanted flags */
.gn-pside .jn-pickbtn { background: #FFFFFF; color: #0B0B0D; border-color: #FFFFFF; }
.gn-pside .jn-pickbtn:hover { background: #0B0B0D; color: #FFFFFF; border-color: #0B0B0D; box-shadow: none; }
.pc-new { border-radius: 0; clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.pc-tabs button { padding-inline: 18px; }
.num-cell, .jn-once, .jn-open, .jn-lock, .jn-msg, .jn-bar, .jn-field input, .jn-shopno, .jn-legend i { border-radius: 0; }
dialog.jn-dlg { border-radius: 0; box-shadow: inset 0 6px 0 var(--red); }
@media (max-width: 560px) { dialog.jn-dlg { border-radius: 0; } }
@container (max-width: 720px) {
  .jn-h { font-size: 28px; }
  .num-grid { gap: 4px; }
  .num-cell { min-height: 44px; font-size: 17px; border-width: 1.5px; }
  .gn-pside .jn-pickbtn { min-height: 38px; padding: 0 12px; font-size: 14px; }
}

/* My account, closer to the mock-up: the "Hello" header as a band with a slanted foot, the player card across the whole
   column (a slanted red panel, a round photo, the number big behind it), the photo switch, and the player's bookings */
.gn-hello, :where([data-scheme="light"]) .gn-hello { position: relative; overflow: hidden; border: 0; border-radius: 0; background: var(--coal); padding: 40px 40px 64px; gap: 30px; clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%); box-shadow: none; }
.gn-hello::before { content: ""; position: absolute; right: -80px; top: -160px; width: 460px; height: 460px; border-radius: 50%; border: 2px solid var(--red); opacity: 0.35; pointer-events: none; }
.gn-hello > * { position: relative; }
.gn-hello .acct-avatar { width: 120px; height: 120px; font-size: 52px; }
.gn-hello .avatar-badge { top: auto; bottom: 22px; right: -4px; width: 40px; height: 40px; font-size: 18px; }
.gn-hello #mem-out { margin-left: auto; }
.acct-panel[data-apanel="players"] { grid-template-columns: minmax(0, 1fr); }
.gn-pmain { grid-template-columns: 330px minmax(0, 1fr); }
.gn-pside { clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); min-height: 440px; padding: 30px 30px 30px; }
.gn-pbig { right: 40px; left: auto; top: 0; bottom: auto; color: rgba(0,0,0,0.22); }
.gn-pface { width: 150px; height: 150px; border-radius: 50%; clip-path: none; border: 5px solid #FFFFFF; font-size: 64px; }
.gn-pname .child-name { font-size: 64px; }
.gn-pbody { padding: 28px 30px; gap: 18px; }
.gn-pfacts { grid-template-columns: 120px minmax(0, 1fr); }
.gn-pfacts dd { font-weight: 600; }
.gn-player .child-sig { font-family: var(--body); font-weight: 500; font-style: italic; text-transform: none; font-size: 16px; line-height: 1.5; padding: 16px 18px; background: var(--ink); border-left: 4px solid var(--red); }
.gn-player .child-sig[hidden] { display: none; }
.gn-player .consent-box, :where([data-scheme="light"]) .gn-player .consent-box { border: 0; padding: 0; background: none; align-items: center; gap: 14px; }
.gn-player .consent-box input { appearance: none; -webkit-appearance: none; flex: none; width: 52px; height: 30px; border-radius: 15px; background: var(--line); position: relative; margin: 0; cursor: pointer; }
.gn-player .consent-box input::after { content: ""; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; transition: left 0.2s; }
.gn-player .consent-box input:checked { background: var(--red-btn); }
.gn-player .consent-box input:checked::after { left: 26px; }
.gn-player .consent-box input:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.gn-player .consent-box input:disabled { opacity: 0.5; cursor: not-allowed; }
.gn-pbook { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; padding: 24px 30px 28px; border-top: 1px solid var(--line); }
.gn-pbook-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.gn-pbook-head h3 { font-size: 34px; margin: 0; }
.gn-pbook p { margin: 0; }
.gn-prow { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 18px; align-items: center; background: var(--ink); padding: 12px 18px 12px 12px; color: inherit; }
a.gn-prow:hover { color: inherit; box-shadow: inset 4px 0 0 var(--red); }
.gn-prow .gn-date { width: 64px; min-height: 64px; }
.gn-prow .gn-date b { font-size: 30px; }
@container (max-width: 720px) {
  .gn-pmain { grid-template-columns: minmax(0, 1fr); }
  .gn-pside { clip-path: none; min-height: 0; padding: 18px; }
  .gn-pface { width: 96px; height: 96px; flex: 0 0 96px; font-size: 38px; border-width: 4px; }
  .gn-pname .child-name { font-size: 40px; }
  .gn-pbig { right: 12px; top: auto; bottom: -30px; font-size: 180px; }
  .gn-pbody, .gn-pbook { padding: 18px; }
  .gn-pfacts { grid-template-columns: 70px minmax(0, 1fr); }
  .gn-prow { grid-template-columns: 64px minmax(0, 1fr); padding: 10px; gap: 12px; }
  .gn-prow .apill { grid-column: 2; justify-self: start; }
}
@media (max-width: 760px) {
  .gn-hello, :where([data-scheme="light"]) .gn-hello { padding: 24px 20px 48px; gap: 16px; clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }
  .gn-hello .acct-avatar { width: 88px; height: 88px; font-size: 38px; }
  .gn-hello .avatar-badge { bottom: 18px; width: 34px; height: 34px; }
  .gn-hello::before { width: 300px; height: 300px; top: -120px; right: -120px; }
  .gn-hello #mem-out { margin-left: 0; }
}
/* ---- a team's player statistics on its page (lib/site.js teamStatsHtml); every theme carries this block ---- */
.sd { --win: #4ADE80; --lose: var(--red-text); --warn: #F59E0B; display: flex; flex-direction: column; gap: 12px; }
html[data-scheme="light"] .sd { --win: #12703A; --warn: #A15C00; }
.sd-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.sd-head h2 { margin: 0; font-size: 30px; }
.sd-for { margin: 0; color: var(--soft); font-size: 15px; }
.sd-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; }
.sd-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.sd-table th, .sd-table td { padding: 10px 12px; text-align: right; border-top: 1px solid var(--line); white-space: nowrap; }
.sd-table thead th { border-top: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.sd-table th:first-child { text-align: left; position: sticky; left: 0; background: var(--ink); font-weight: 700; }
.sd-table th i { font-style: normal; color: var(--mute); font-weight: 600; }
.sd-fill { color: var(--warn); font-weight: 600; margin-left: 4px; }
.sd-fin { text-align: left !important; }
.sd-fin small { display: block; margin-top: 2px; font-size: 12px; color: var(--soft); white-space: normal; max-width: 110px; }
.sd-dial { --c: var(--mute); display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--line) 0); position: relative; }
.sd-dial::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--ink); }
.sd-dial b { position: relative; z-index: 1; font-size: 12px; }
.sd-dial.sd-in { --c: var(--win); } .sd-dial.sd-need { --c: var(--warn); } .sd-dial.sd-out { --c: var(--lose); }
/* ---- the Players page and a profile (lib/site.js playersPageShared, playerProfileShared); every theme carries this block ---- */
.pl-filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.pl-find { display: flex; flex-direction: column; gap: 4px; }
.pl-find input, .pl-find select { min-height: 42px; padding: 8px 12px; border: 1px solid var(--line); background: var(--coal); color: var(--text); border-radius: 6px; font: inherit; }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.pl-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 16px 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--coal); }
.pl-card b { font-size: 17px; margin-top: 8px; }
.pl-card small { color: var(--mute); font-size: 13px; }
.pl-face { flex: none; width: 108px; height: 108px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--line); font-family: var(--display); font-size: 44px; font-weight: 800; color: var(--soft); }
.pl-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-big { width: 160px; height: 160px; font-size: 64px; }
.pl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }

/* ---- Game Night's calendar, news and shop pages (parts.js calendarPage, newsPage, newsArticle, shopPage) ---- */
/* the page head: an eyebrow, the page's name in huge capitals with a red full stop, and a note or controls beside it */
.gn-pagehead { position: relative; overflow: hidden; padding: 56px 0 28px; }
.gn-pagehead .wrap { position: relative; }
.gn-pagehead-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 40px; flex-wrap: wrap; margin-top: 12px; }
.gn-pagehead h1 { font-size: clamp(64px, 12vw, 168px); line-height: 0.82; margin: 0; }
.gn-pagehead h1 span, .gn-road-h h2 span { color: var(--red); }
.gn-pagehead-row > p { margin: 0; max-width: 380px; font-size: 17px; }
.gn-views { display: inline-flex; border: 1px solid var(--line); }
.gn-views button { font: 700 15px var(--body); min-height: 44px; padding: 0 20px; border: 0; background: transparent; color: var(--soft); cursor: pointer; }
.gn-views button[aria-pressed="true"] { background: var(--red-btn); color: #FFFFFF; }
.gn-tabbar { position: sticky; top: 0; z-index: 5; background: var(--ink); }
.gn-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.gn-tabs::-webkit-scrollbar { display: none; }
.gn-tab { flex: none; font: 600 15px var(--body); color: var(--soft); background: none; border: 0; padding: 0 18px; min-height: 52px; cursor: pointer; white-space: nowrap; }
.gn-tab:hover { color: var(--text); }
.gn-tab[aria-pressed="true"] { color: var(--text); box-shadow: inset 0 -4px 0 var(--red); }

/* the calendar as a fixture list */
.gn-cal { padding-top: 8px; }
.gn-cmonth-h { display: flex; align-items: baseline; gap: 16px; margin: 30px 0 4px; }
.gn-cmonth-h h2 { font-size: clamp(40px, 5vw, 64px); margin: 0; }
.gn-cday { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); }
.gn-cday-d { display: flex; flex-direction: column; }
.gn-cday-d b { font-size: 84px; line-height: 0.82; }
.gn-cday-d span { font-size: 22px; font-weight: 800; color: var(--red-text); margin-top: 6px; }
.gn-cday-rows { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gn-crow { display: grid; grid-template-columns: 170px minmax(0, 1fr) 190px 90px; gap: 20px; align-items: center; padding: 16px 20px; background: var(--coal); color: inherit; }
.gn-crow:hover { color: inherit; box-shadow: inset 6px 0 0 var(--red); }
.gn-crow-open { box-shadow: inset 6px 0 0 var(--red); }
.gn-ctime { font-size: 26px; font-weight: 800; line-height: 1; }
.gn-ctime small { display: block; font-size: 16px; margin-top: 4px; color: var(--soft); }
.gn-cwhat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gn-cwhat b { font-size: 18px; }
.gn-kind { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 9px; background: var(--line); color: var(--soft); }
.gn-kind-training, .gn-kind-comp { background: var(--red-btn); color: #FFFFFF; }
.gn-cspots { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.gn-cleft b { font-weight: 700; }
.gn-cleft.low b, .gn-cleft.out b { color: var(--red-text); }
.gn-meter { display: block; height: 6px; background: var(--line); }
.gn-meter i { display: block; height: 100%; background: var(--red); }
.gn-cprice { font-size: 34px; font-weight: 800; text-align: right; line-height: 1; }
.gn-monthview { margin-top: 8px; }
.gn-road { background: var(--coal); padding: 80px 0 70px; margin-top: 24px; clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%); }
.gn-road-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 40px; flex-wrap: wrap; margin-bottom: 28px; }
.gn-road-h h2 { font-size: clamp(48px, 7vw, 84px); margin: 0; }
.gn-road-h p { margin: 0; max-width: 380px; }
.gn-road-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.gn-roadcard { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 170px; background: var(--ink); color: inherit; }
.gn-roadcard:hover { color: inherit; box-shadow: inset 0 -4px 0 var(--red); }
.gn-roaddate { background: var(--red-btn); color: #FFFFFF; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 16px 28px 16px 12px; clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); }
.gn-roaddate b { font-size: 60px; line-height: 0.9; }
.gn-roaddate span { font-size: 22px; font-weight: 800; }
.gn-roadbody { padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; }
.gn-roadbody b { font-size: 34px; font-weight: 800; line-height: 1; overflow-wrap: anywhere; }
.gn-cal-foot { padding-top: 28px; }
@media (max-width: 1000px) {
  .gn-crow { grid-template-columns: 130px minmax(0, 1fr) 80px; }
  .gn-cspots { grid-column: 2; }
  .gn-cprice { grid-column: 3; grid-row: 1; }
  .gn-road-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .gn-pagehead { padding: 36px 0 18px; }
  .gn-cday { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 0; }
  .gn-cday-d { flex-direction: row; align-items: baseline; gap: 12px; }
  .gn-cday-d b { font-size: 52px; }
  .gn-cday-d span { font-size: 18px; margin: 0; }
  .gn-crow { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; padding: 14px 16px; }
  .gn-ctime { font-size: 20px; grid-column: 1; }
  .gn-cprice { font-size: 26px; grid-column: 2; grid-row: 1; }
  .gn-cwhat, .gn-cspots { grid-column: 1 / -1; }
  .gn-road { padding: 60px 0 50px; clip-path: polygon(0 24px, 100% 0, 100% 100%, 0 100%); }
  .gn-roadcard { grid-template-columns: 120px minmax(0, 1fr); min-height: 130px; }
  .gn-roaddate b { font-size: 36px; }
  .gn-roaddate span { font-size: 16px; }
  .gn-roadbody { padding: 16px; }
  .gn-roadbody b { font-size: 24px; }
}

/* the news list: the lead story slanted beside its picture, then the cards */
.gn-news { padding-top: 12px; }
.gn-lead { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: var(--coal); color: inherit; margin-bottom: 28px; }
.gn-lead:hover { color: inherit; box-shadow: inset 0 -6px 0 var(--red); }
.gn-lead-img { display: block; overflow: hidden; clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); background: #000; }
.gn-lead-img img { display: block; width: 100%; height: 100%; min-height: 360px; max-height: 480px; object-fit: cover; }
.gn-lead-img img.is-logo { object-fit: contain; padding: 40px; }
.gn-lead-body { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 32px 36px 32px 20px; min-width: 0; }
.gn-lead-body b { font-size: clamp(36px, 4vw, 60px); line-height: 0.95; overflow-wrap: anywhere; }
.gn-lead-ex { color: var(--soft); font-size: 17px; }
.gn-tagrow { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.gn-tagrow .display { font-size: 22px; font-weight: 800; color: var(--soft); }
.gn-tag { background: var(--red-btn); color: #FFFFFF; font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 12px; }
.gn-cards .news-card img { clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }
.gn-cards .news-card h2 { font-family: var(--display); font-size: 28px; font-weight: 800; text-transform: uppercase; line-height: 1; }
@media (max-width: 760px) {
  .gn-lead { grid-template-columns: minmax(0, 1fr); }
  .gn-lead-img { clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }
  .gn-lead-img img { min-height: 220px; max-height: 280px; }
  .gn-lead-body { padding: 20px; }
}

/* a story: the band with the title and the poster, the text with a drop cap, the details panel, more from the club */
.gn-arthead { background: var(--coal); padding: 44px 0 90px; clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }
.gn-arthead .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.gn-arthead-plain .wrap { grid-template-columns: minmax(0, 1fr); }
.gn-arthead-text { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.gn-arthead h1 { font-size: clamp(44px, 7vw, 104px); line-height: 0.9; margin: 0; overflow-wrap: anywhere; }
.gn-art-ex { margin: 0; font-size: 20px; color: var(--soft); max-width: 560px; }
.gn-poster { position: relative; }
.gn-poster::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; background: var(--red); clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }
.gn-poster img { position: relative; display: block; width: 100%; height: 470px; object-fit: cover; object-position: 50% 20%; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); cursor: zoom-in; background: #FFFFFF; }
.gn-art-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: start; }
.gn-art-main { max-width: 700px; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.gn-art-main .art-body > p:first-child { font-size: 21px; font-weight: 600; color: var(--text); }
.gn-art-main .art-body > p:first-child::first-letter { float: left; font-family: var(--display); font-weight: 900; font-size: 92px; line-height: 0.8; color: var(--red); margin: 4px 12px 0 0; }
.gn-art-main .art-body blockquote { margin: 32px 0; padding: 4px 0 4px 26px; border-left: 6px solid var(--red); font-family: var(--display); font-size: 36px; font-weight: 800; line-height: 1.05; }
.gn-art-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 18px; }
.gn-art-box { background: var(--coal); border-top: 6px solid var(--red); padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.gn-art-box .art-register { width: 100%; }
.gn-art-box .contact-note { margin: 0; }
.gn-share { display: flex; gap: 10px; flex-wrap: wrap; }
.gn-share .btn { flex: 1 1 120px; }
.gn-more { background: #0B0B0D; color: #F4F2F0; padding: 90px 0 80px; margin-top: 40px; clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%); }
.gn-more h2 { font-size: clamp(44px, 6vw, 72px); margin: 0 0 30px; color: #F4F2F0; }
.gn-more .news-card, .gn-more .news-card h2 { color: #F4F2F0; }
.gn-more .news-card .eyebrow, :where([data-scheme="light"]) .gn-more .news-card .eyebrow { color: #CFCBC7; }
@media (max-width: 1000px) {
  .gn-arthead .wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .gn-art-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .gn-art-side { position: static; }
}
@media (max-width: 640px) {
  .gn-arthead { padding: 28px 0 60px; }
  .gn-poster::before { inset: 10px -10px -10px 10px; }
  .gn-poster img { height: 300px; }
  .gn-art-main .art-body > p:first-child { font-size: 18px; }
  .gn-art-main .art-body > p:first-child::first-letter { font-size: 64px; }
  .gn-more { padding: 60px 0 50px; }
}

/* the shop: "#00" behind the head, products in a grid of three, a numbered jersey across two, the red band */
.gn-shophead .eyebrow, .gn-shophead .gn-pagehead-row { position: relative; z-index: 1; }
.gn-shopno { z-index: 0; position: absolute; right: -10px; top: -30px; font-size: clamp(140px, 22vw, 300px); line-height: 1; font-weight: 900; color: var(--coal); pointer-events: none; }
.gn-shop { padding-top: 24px; }
.gn-shop .products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.gn-shop .product, :where([data-scheme="light"]) .gn-shop .product { color: var(--text); background: var(--coal); border: 0; border-radius: 0; border-top: 6px solid transparent; box-shadow: none; padding: 0 0 22px; gap: 10px; }
.gn-shop .product:hover { transform: none; border-top-color: var(--red); }
.gn-shop .product > img, .gn-shop .product > .gallery { background: #FFFFFF; clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }
.gn-shop .product > img { width: 100%; height: 260px; object-fit: contain; padding: 18px; box-sizing: border-box; }
.gn-shop .product > b { font-family: var(--display); font-weight: 800; font-size: 34px !important; line-height: 1; text-transform: uppercase; padding: 6px 22px 0; }
.gn-shop .product > .row { padding: 0 22px; align-items: baseline; }
.gn-shop .product > .row span, .gn-shop .product .muted { color: var(--mute); }
.gn-shop .product > .row b { color: var(--text); font-family: var(--display); font-weight: 900; font-size: 38px; line-height: 1; }
.gn-shop .product > form { padding: 0 22px; }
.gn-shop .product:has(form[data-jersey]) { grid-column: span 2; border-top-color: var(--red); }
.gn-shop .product[hidden] { display: none; }
.gn-shop .test-banner { margin-bottom: 18px; }
.gn-collect { margin-top: 24px; background: var(--red-btn); color: #FFFFFF; padding: 28px 36px; clip-path: polygon(0 0, 100% 0, 98% 100%, 0 100%); }
.gn-collect h2 { font-size: clamp(30px, 4vw, 44px); margin: 0; color: #FFFFFF; }
.gn-collect p { margin: 6px 0 0; font-weight: 600; }
@media (max-width: 1000px) {
  .gn-shop .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .gn-shop .products { grid-template-columns: minmax(0, 1fr); }
  .gn-shop .product:has(form[data-jersey]) { grid-column: auto; }
  .gn-collect { padding: 22px 20px; clip-path: none; }
}

/* ===== A session's page, from the mock-up: the photo behind a huge title, the facts as boxes with a spots meter, a venue card
   with a map line, the choices of who it is for as player cards, and on a phone a price-and-button bar ===== */
.gn-sess-hero { position: relative; overflow: hidden; background: var(--red-btn); clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); padding: 56px 0 100px; min-height: 420px; }
.gn-sess-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; }
.gn-sess-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 95%, transparent) 0%, color-mix(in srgb, var(--ink) 74%, transparent) 50%, color-mix(in srgb, var(--ink) 18%, transparent) 100%); }
.gn-sess-hero .wrap { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 18px; }
.gn-sess-hero h1 { font-size: clamp(54px, 11.5vw, 150px); line-height: 0.86; overflow-wrap: anywhere; max-width: 12ch; }
.gn-session { padding-top: 0; margin-top: -48px; position: relative; z-index: 3; }
.gn-sess-main .gn-boxes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gn-sess-main .gn-box { box-shadow: none; padding: 22px 24px; gap: 8px; }
.gn-sess-main .gn-box small { color: var(--red-text); letter-spacing: 0.18em; }
.gn-sess-main .gn-box > b { font-size: clamp(30px, 3vw, 38px); line-height: 0.92; font-weight: 900; }
.gn-sess-main .gn-box .muted { color: var(--soft); font-size: 15px; }
.gn-meter-lg { height: 10px; transform: skewX(-20deg); }
.gn-meter-lg i { height: 10px; }
.gn-sess-main .prose { font-size: 20px; line-height: 1.6; max-width: 640px; color: var(--text); }
.gn-ask { margin: 0; max-width: 640px; }
.gn-venue { display: grid; grid-template-columns: minmax(0, 1fr) 260px; background: var(--coal); }
.gn-venue-main { padding: 26px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gn-venue-main small { font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red-text); }
.gn-venue-main b { font-size: 36px; font-weight: 800; line-height: 0.95; overflow-wrap: anywhere; }
.gn-venue-main > .muted { color: var(--soft); }
.gn-openmap { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; color: var(--red-text); font-weight: 700; align-self: flex-start; }
.gn-venue-map { position: relative; overflow: hidden; background: var(--ink); min-height: 150px; }
.gn-venue-map svg { position: absolute; inset: 0; width: 100%; height: 100%; stroke: var(--line); }
.gn-venue-map svg rect { stroke: var(--red); }
.gn-venue-map i { position: absolute; left: 50%; top: 36%; width: 22px; height: 22px; margin: -11px 0 0 -11px; background: var(--red-btn); transform: rotate(45deg); }
.gn-sess-links { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.gn-sess-links .btn { gap: 10px; font-size: 15px; }
.gn-sess-links .link-red { display: inline-flex; align-items: center; min-height: 52px; margin-left: 8px; }
.gn-sess-book { box-shadow: none; border-top: 6px solid var(--red); }
.gn-sess-book fieldset[data-who] { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gn-sess-book fieldset[data-who] legend { font-weight: 700; padding: 0; margin-bottom: 10px; }
.gn-sess-book fieldset[data-who] > .muted { margin: 0; }
.gn-sess-book fieldset[data-who] label.check { position: relative; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; background: var(--ink); border: 2px solid var(--line); cursor: pointer; font-weight: 700; }
.gn-sess-book fieldset[data-who] label.check input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.gn-sess-book fieldset[data-who] label.check:has(input:checked) { border-color: var(--red); background: color-mix(in srgb, var(--red) 12%, var(--ink)); }
.gn-sess-book fieldset[data-who] label.check:has(input:focus-visible) { outline: 3px solid var(--red-text); outline-offset: 3px; }
.gn-ini { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #3A3A42; color: #FFFFFF; font-weight: 700; font-size: 15px; }
:where([data-scheme="light"]) .gn-ini { background: #5E5B60; }
.gn-sess-book label.check:has(input:checked) .gn-ini { background: var(--red-btn); }
.gn-who-name { min-width: 0; overflow-wrap: anywhere; }
.gn-tick { margin-left: auto; flex: none; width: 28px; height: 28px; border: 2px solid var(--mute); display: flex; align-items: center; justify-content: center; transform: skewX(-10deg); color: #FFFFFF; font-size: 16px; line-height: 1; }
.gn-sess-book label.check:has(input:checked) .gn-tick { background: var(--red-btn); border-color: var(--red-btn); }
.gn-sess-book label.check:has(input:checked) .gn-tick::after { content: "✓"; }
.gn-sess-book .who-else { padding-left: 0; }
.gn-sess-book .who-name { border-radius: 0; background: var(--ink); border: 2px solid var(--line); color: var(--text); }
.gn-sess-book .buy .btn-red { width: 100%; min-height: 58px; font-size: 17px; }
.gn-stickbar { display: none; }
@media (max-width: 1000px) {
  .gn-sess-main .gn-boxes { grid-template-columns: minmax(0, 1fr); }
  .gn-sess-hero { min-height: 340px; padding-bottom: 80px; }
}
@media (max-width: 760px) {
  .gn-sess-hero h1 { font-size: clamp(46px, 15vw, 88px); }
  .gn-sess-main .gn-boxes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .gn-sess-main .gn-box { padding: 14px 12px; }
  .gn-sess-main .gn-box > b { font-size: 24px; }
  .gn-sess-main .gn-box .muted { font-size: 13px; }
  .gn-sess-main .prose { font-size: 17px; }
  .gn-venue { grid-template-columns: minmax(0, 1fr); }
  .gn-venue-map { display: none; }
  .gn-venue-main b { font-size: 28px; }
  .gn-sess-links .btn { flex: 1 1 140px; padding-inline: 14px; }
  .gn-session { padding-bottom: 12px; }
  .gn-stickbar { display: flex; position: sticky; bottom: 0; z-index: 30; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--coal) 97%, transparent); border-top: 3px solid var(--red); box-shadow: 0 -12px 30px rgba(0,0,0,0.35); }
  .gn-stickbar > div { min-width: 0; flex: 1; display: flex; flex-direction: column; }
  .gn-stickbar > div b { font-size: 22px; font-weight: 800; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gn-stickbar > div span { font-size: 12px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gn-stickprice { font-size: 32px; }
  .gn-stickbar .btn { min-height: 48px; padding-inline: 20px; }
  body:has(.gn-stickbar) .cart-toast { bottom: 96px; }
}
@media (max-width: 400px) { .gn-stickbar .btn { padding-inline: 14px; } .gn-stickprice { font-size: 26px; } }

/* ===== My account: "At a glance" beside the player card on wide screens, under it on narrow ones ===== */
.gn-glance { display: flex; flex-direction: column; gap: 16px; min-width: 0; margin-top: 24px; }
.gn-glance section { background: var(--coal); border-top: 4px solid var(--red); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.gn-glance h3 { margin: 0; font-size: 13px; }
.gn-glance-row, .gn-glance-order { display: flex; flex-direction: column; gap: 3px; padding-top: 12px; border-top: 1px solid var(--line); align-items: flex-start; }
.gn-glance-row:first-of-type, .gn-glance-order { border-top: 0; padding-top: 0; }
.gn-glance b { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.05; text-transform: uppercase; }
.gn-glance .link-red { font-size: 14px; margin-top: 4px; }
.gn-glance p { margin: 0; }
@container (min-width: 1000px) {
  .gn-player:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
  .gn-glance { margin-top: 0; }
}

/* ===== The calendar: the switch that hides full and finished sessions ===== */
.gn-tabbar > .wrap { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); }
.gn-tabbar > .wrap > .gn-tabs { border-bottom: 0; min-width: 0; flex: 1 1 auto; }
.gn-hideout { flex: none; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; cursor: pointer; position: relative; min-height: 44px; color: var(--soft); }
.gn-hideout input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.gn-sw { flex: none; position: relative; width: 48px; height: 28px; border-radius: 14px; background: var(--line); transition: background 0.2s; }
.gn-sw::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; transition: left 0.2s; }
.gn-hideout input:checked + .gn-sw { background: var(--red-btn); }
.gn-hideout input:checked + .gn-sw::after { left: 24px; }
.gn-hideout:has(input:focus-visible) .gn-sw { outline: 2px solid var(--red-text); outline-offset: 3px; }
@media (max-width: 760px) { .gn-tabbar > .wrap { flex-wrap: wrap; gap: 0 12px; } .gn-tabbar > .wrap > .gn-tabs { flex: 1 0 100%; order: 2; } .gn-hideout { order: 1; padding-top: 6px; } }

/* ===== Phone: the full-screen menu in big condensed capitals, and the "Added" toast ===== */
@media (max-width: 1100px) {
  .site-head:has(.nav.open) { min-height: 100dvh; max-height: 100dvh; overflow-y: auto; background: var(--ink); }
  .nav.open > a.cart-nav { display: none; }
  .nav.open { margin-right: -60px; align-items: stretch; gap: 0; padding: 8px 0 24px; flex-wrap: nowrap; white-space: normal; }
  .nav.open > a, .nav.open .nav-top { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; min-height: 56px; padding: 0; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
  .nav.open > a::after, .nav.open .nav-top::before { content: none; }
  .nav.open .dd a { font-family: var(--body); font-weight: 600; font-size: 16px; text-transform: none; min-height: 44px; padding: 8px 0; display: flex; align-items: center; }
  .nav.open .nav-group { width: 100%; }
  .nav.open .nav-top { width: 100%; }
  .nav.open .nav-top::after { display: inline-block; width: 12px; height: 12px; margin: 0 4px 0 auto; border-color: var(--red-text); border-width: 0 3px 3px 0; }
  .nav.open .nav-group.open .nav-top::after { transform: rotate(-135deg); }
  .nav.open .nav-group:not(.open) .dd { display: none; }
  .nav.open .nav-group.open .dd { display: flex; padding: 4px 0 12px 4px; border-bottom: 1px solid var(--line); }
  .nav.open + .head-actions .btn { width: 100%; }
}
.cart-toast { background: var(--coal); color: var(--text); border: 0; border-left: 6px solid var(--red); border-radius: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); padding: 14px 28px 14px 20px; box-shadow: none; font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: 0.02em; text-transform: uppercase; }
.cart-toast a { font-family: var(--body); font-size: 15px; text-transform: none; }
@media (max-width: 520px) { .cart-toast { left: 16px; right: 16px; transform: none; max-width: none; justify-content: space-between; } }
.gn-tabs.shop-nav { flex-wrap: nowrap; gap: 4px; }
body:has(.cart-toast) #toasts { display: none; } /* the cart toast already says it */

/* ---- Search: the header box (lib/site.js searchBox) and the results page (searchPageShared); every theme carries this block ---- */
.head-search { display: flex; align-items: center; flex: none; }
.search-btn { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--text); border: 0; background: transparent; cursor: pointer; }
.search-btn:hover { color: var(--red-text); }
.search-form { display: flex; align-items: center; gap: 8px; position: relative; }
.search-ico { flex: none; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--mute); pointer-events: none; }
.search-in { width: 100%; min-height: 40px; padding: 8px 34px 8px 38px; border: 1px solid var(--line); border-radius: 999px; background: var(--coal); color: var(--text); font: inherit; font-size: 15px; -webkit-appearance: none; appearance: none; }
.search-in::placeholder { color: var(--mute); opacity: 1; }
.search-in::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-in:focus { outline: 0; border-color: var(--red); box-shadow: 0 0 0 3px rgba(224,38,47,0.28); }
.search-key { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); min-width: 20px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 5px; font: 600 12px/1.4 var(--body); color: var(--mute); text-align: center; pointer-events: none; }
.search-form:focus-within .search-key { display: none; }
.search-go { min-height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--red); color: #fff; font: 700 15px var(--body); cursor: pointer; }
.search-go:hover { background: #F0343D; }
.search-close { display: none; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--mute); cursor: pointer; }
.search-close:hover { color: var(--text); }
.head-search { order: 1; margin-left: auto; }
.head-search ~ .cart-mobile { margin-left: 0; }
.head-search .search-btn { display: inline-flex; }
.head-search .search-form { display: none; }
.head-search.open .search-form { display: flex; position: absolute; left: 0; right: 0; top: 100%; width: auto; padding: 10px 16px 14px; background: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px -18px rgba(0,0,0,0.6); z-index: 25; }
.head-search.open .search-ico { left: 30px; top: calc(50% - 2px); }
.head-search.open .search-in { min-height: 46px; padding-left: 40px; font-size: 16px; }
.head-search.open .search-key { display: none; }
.head-search.open .search-close { display: inline-flex; }
.head-search .search-go { display: none; }
.head-search.open .search-go { display: inline-block; }
.search-page .search-form { max-width: 640px; }
.search-page .search-ico { left: 14px; }
.search-form-page .search-in { min-width: 0; min-height: 48px; padding-left: 42px; padding-right: 16px; font-size: 17px; flex: 1 1 auto; width: auto; }
.search-form-page .search-go { display: inline-block; min-height: 48px; }
.search-count { margin: 0; }
.search-group { display: flex; flex-direction: column; gap: 6px; }
.search-group-h { margin: 18px 0 0; font: 800 clamp(22px, 2.4vw, 30px)/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; display: flex; align-items: center; gap: 10px; }
.search-group-h small { font: 700 13px var(--body); letter-spacing: 0; color: var(--text); background: var(--line); border-radius: 999px; padding: 3px 9px; }
.search-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.search-hit a { display: flex; flex-direction: column; gap: 3px; padding: 13px 4px; border-bottom: 1px solid var(--line); }
.search-hit a:hover .search-hit-t, .search-hit a:focus-visible .search-hit-t { color: var(--red-text); }
.search-hit-t { font-size: 17px; }
.search-hit-line { color: var(--mute); font-size: 14px; }
.search-more { margin: 4px 0 0; }
.search-none { margin: 0; }
.search-page mark { background: rgba(224,38,47,0.22); color: inherit; border-radius: 3px; padding: 0 2px; }
@media (min-width: 1200px) {
  .head-search { order: 0; margin-left: 0; }
  .head-search .search-btn { display: none; }
  .head-search .search-form, .head-search.open .search-form { display: flex; position: relative; left: auto; right: auto; top: auto; width: 170px; padding: 0; background: none; border: 0; box-shadow: none; }
  .head-search .search-ico, .head-search.open .search-ico { left: 12px; top: 50%; }
  .head-search .search-in, .head-search.open .search-in { min-height: 40px; padding-left: 38px; font-size: 15px; }
  .head-search .search-key { display: block; }
  .head-search .search-form:focus-within .search-key { display: none; }
  .head-search .search-close, .head-search.open .search-close { display: none; }
  .head-search .search-go, .head-search.open .search-go { display: none; }
}
@media (min-width: 1320px) { .head-search .search-form, .head-search.open .search-form { width: 230px; } }
@media (max-width: 520px) { .head-search .search-btn { width: 34px; } .head-search { margin-right: -4px; } .site-head .wrap { gap: 4px; padding-right: 54px; } .brand span { font-size: 15px; } }
/* Game Night: search. Condensed, slanted, with a red edge when it has focus. */
.search-in { border-radius: 0; border: 2px solid var(--line); transform: skewX(-8deg); font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: 0.05em; text-transform: uppercase; }
.search-in::placeholder { font-family: var(--display); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.search-in:focus { border-color: var(--line); box-shadow: -5px 0 0 var(--red); }
.search-ico { color: var(--red-text); }
.search-key { border-radius: 0; font-family: var(--display); font-size: 14px; }
.search-go { border-radius: 0; transform: skewX(-8deg); font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: 0.06em; text-transform: uppercase; }
.search-btn { border-radius: 0; transform: skewX(-8deg); border: 2px solid var(--line); height: 38px; width: 42px; }
.search-btn svg { transform: skewX(8deg); }
.search-btn:hover { border-color: var(--red); }
.search-close { border-radius: 0; }
.head-search.open .search-form { border-bottom: 3px solid var(--red); }
.search-group-h { font-size: clamp(28px, 3vw, 40px); font-weight: 900; }
.search-group-h small { border-radius: 0; background: var(--red); color: #fff; transform: skewX(-8deg); }
.search-list { border-top: 3px solid var(--red); }
.search-hit-t { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: 0.03em; text-transform: uppercase; }
.search-hit a:hover { background: linear-gradient(90deg, rgba(224,38,47,0.16), transparent 70%); }
.search-page mark { border-radius: 0; background: var(--red); color: #fff; }
.search-page .search-form-page .search-in { font-size: 22px; }
@media (max-width: 520px) { .search-in { transform: none; box-shadow: none; } .search-in:focus { box-shadow: inset 5px 0 0 var(--red); } }

/* Game Night: the discount code box has square corners like the rest of the theme */
.voucher-label input { border-radius: 0; }

/* The number picker shows only the numbers free for this player, in order (Matt, 26 Oct), in a compact grid that fits the width */
.num-grid { grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 4px; }
.num-cell { min-height: 34px; font-size: 16px; border-width: 1.5px; }
p.jn-legend { margin: 0; }
@media (max-width: 600px) { .num-cell { min-height: 44px; font-size: 16px; } }