@charset "UTF-8";
/* ===========================================================================
   Orlando Chess Club, main stylesheet

   1.  Design tokens
   2.  Reset & base
   3.  Typography
   4.  Layout & containers
   5.  Header & navigation
   6.  Buttons
   7.  Badges, pills & meta
   8.  Cards
   9.  Hero
   10. Homepage sections
   11. Events
   12. Tournaments
   13. Players & rankings
   14. Lessons
   15. News & article
   16. Forms
   17. Footer
   18. Utilities & motion

   Responsive rules live in responsive.css.
   ======================================================================== */


/* ===========================================================================
   1. DESIGN TOKENS
   ======================================================================== */

:root {
  /* Surfaces, soft, faintly blue off-whites rather than flat white */
  --bg-primary:     #f2f6fa;
  --bg-secondary:   #e8eef5;
  --surface:        #ffffff;
  --surface-2:      #f4f8fb;
  --surface-3:      #e5ecf4;
  --surface-glass:  rgba(255, 255, 255, .82);

  /* Text */
  --text-primary:   #0b1520;
  --text-secondary: #47566a;
  --text-muted:     #5c6a7d;
  --text-on-accent: #ffffff;

  /* Accent, the club's brand cyan, deepened so it stays readable on white.
     The logo's own #12d7f2 manages only about 1.6:1 against white. */
  --accent:         #06707c;
  --accent-hover:   #045a66;
  --accent-deep:    #034d57;
  --accent-soft:    rgba(var(--accent-rgb), .10);
  --accent-line:    rgba(var(--accent-rgb), .28);

  /* Secondary, the gold from the crown on the club's meetup flyer. Used
     sparingly: the main club meet, trophies, "premium" moments. */
  --gold:           #8a5f08;
  --gold-soft:      rgba(var(--gold-rgb), .11);
  --gold-line:      rgba(var(--gold-rgb), .30);

  /* Aliases, so existing .badge--cool markup keeps working. */
  --cool:           #8a5f08;
  --cool-soft:      rgba(var(--gold-rgb), .11);

  /* Raw channels, so tints and glows can be themed in one place rather than
     being hard-coded into two dozen gradients. */
  --accent-rgb:     6, 112, 124;
  --gold-rgb:       138, 95, 8;
  --tint-rgb:       11, 21, 32;      /* subtle overlays: darken on light */
  --shade-rgb:      15, 26, 40;      /* shadows and scrims */

  /* Decorative chess board in the hero */
  --board-dark:     #ccd8e5;
  --board-light:    #e9eff6;

  --scrim:          rgba(11, 21, 32, .45);
  --alert-success-text: #0a5c35;
  --alert-error-text:   #8f1c25;
  --danger-ink:     #ffffff;

  color-scheme: light;

  /* Lines */
  --border:         rgba(var(--tint-rgb), .11);
  --border-strong:  rgba(var(--tint-rgb), .20);

  /* Status */
  --success:        #0b7a45;
  --success-soft:   rgba(11, 122, 69, .11);
  --warning:        #8a5f08;
  --warning-soft:   rgba(138, 95, 8, .12);
  --danger:         #b3242f;
  --danger-soft:    rgba(179, 36, 47, .09);
  --live:           #cf2f34;

  /* Typography */
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-hero:    clamp(2.6rem, 6.2vw, 4.5rem);
  --fs-page:    clamp(2.1rem, 4.4vw, 3rem);
  --fs-section: clamp(1.65rem, 3vw, 2.25rem);
  --fs-card:    clamp(1.075rem, 1.5vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;
  --fs-tiny:    0.75rem;

  /* Spacing */
  --space-2xs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  .75rem;
  --space-md:  1.25rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  /* Shape */
  --radius-sm:   8px;
  --radius:      14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(15, 26, 40, .06);
  --shadow:    0 8px 24px -12px rgba(15, 26, 40, .20);
  --shadow-lg: 0 24px 60px -24px rgba(15, 26, 40, .24);
  --shadow-accent: 0 14px 34px -16px rgba(var(--accent-rgb), .40);

  /* Motion */
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --dur-fast:  150ms;
  --dur:       220ms;
  --dur-slow:  340ms;

  /* Layout */
  /* Vertical padding on every .section. Sections stack their own padding, so
     the visible gap between two of them is twice this. Kept separate from
     --space-2xl, which also drives the hero, grid gaps and the footer. */
  --section-pad: calc(var(--space-2xl) / 2);

  /* Breathing room above the first section of a page. The sticky header
     already occupies its own height in normal flow, so this is spacing only,
     not a clearance offset. It matches the section padding used elsewhere, so
     the top of a page is spaced like everything below it. Tune this one value
     to change every page. */
  --space-top: 3rem;

  --page-max:  1280px;
  --page-pad:  clamp(1.15rem, 4vw, 2.5rem);
  --header-h:  72px;
}


/* ---------------------------------------------------------------------------
   1b. DARK THEME

   Light is the site's default. A visitor's choice is stored in localStorage
   and applied as data-theme="dark" on <html> by a small script in the document
   head, before first paint, so the page never flashes the wrong theme.

   Only tokens are redefined here. No component rules are duplicated.
--------------------------------------------------------------------------- */

:root[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces, softened dark tones, never pure black */
  --bg-primary:     #0b0e13;
  --bg-secondary:   #10151d;
  --surface:        #151b25;
  --surface-2:      #1b2230;
  --surface-3:      #222b3b;
  --surface-glass:  rgba(21, 27, 37, .72);

  /* Text */
  --text-primary:   #eef2f8;
  --text-secondary: #98a4b7;
  --text-muted:     #7d8899;
  --text-on-accent: #03262f;

  /* On dark the full brand cyan is safe, and looks like the logo */
  --accent:         #12d7f2;
  --accent-hover:   #5ce6ff;
  --accent-deep:    #0aaec9;
  --accent-rgb:     18, 215, 242;
  --accent-soft:    rgba(var(--accent-rgb), .13);
  --accent-line:    rgba(var(--accent-rgb), .34);

  --gold:           #f5c451;
  --gold-rgb:       245, 196, 81;
  --gold-soft:      rgba(var(--gold-rgb), .14);
  --gold-line:      rgba(var(--gold-rgb), .34);
  --cool:           #f5c451;
  --cool-soft:      rgba(var(--gold-rgb), .14);

  /* Overlays lighten instead of darken */
  --tint-rgb:       255, 255, 255;
  --shade-rgb:      0, 0, 0;

  --border:         rgba(var(--tint-rgb), .075);
  --border-strong:  rgba(var(--tint-rgb), .14);

  --success:        #3ed48f;
  --success-soft:   rgba(62, 212, 143, .13);
  --warning:        #f5a524;
  --warning-soft:   rgba(245, 165, 36, .14);
  --danger:         #f4626b;
  --danger-soft:    rgba(244, 98, 107, .13);
  --live:           #ff5a5f;
  --danger-ink:     #2a0508;

  --alert-success-text: #b6f2d6;
  --alert-error-text:   #ffc9cc;

  --board-dark:     #1a212d;
  --board-light:    #263140;

  --scrim:          rgba(4, 6, 10, .6);

  --shadow-sm: 0 1px 2px rgba(var(--shade-rgb), .3);
  --shadow:    0 8px 24px -12px rgba(var(--shade-rgb), .55);
  --shadow-lg: 0 24px 60px -24px rgba(var(--shade-rgb), .7);
  --shadow-accent: 0 14px 40px -16px rgba(var(--accent-rgb), .34);
}

/* Two places need more than a token swap. */

/* There is room for a gradient against a dark page. */
:root[data-theme="dark"] .accent-text {
  background: linear-gradient(102deg, var(--accent) 10%, #b8f6ff 52%, var(--accent) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The logo art is a single flat brand cyan. On the light default it is
   darkened with a filter; on dark it is shown as supplied. */
:root[data-theme="dark"] .brand__mark img,
:root[data-theme="dark"] .logo-lockup,
:root[data-theme="dark"] .logo-emblem {
  filter: none;
}

:root[data-theme="dark"] .logo-watermark {
  filter: saturate(0) brightness(2);
  opacity: .07;
}


/* ===========================================================================
   2. RESET & BASE
   ======================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Faint board texture + accent glow, fixed behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 78% -8%, rgba(var(--accent-rgb), .07), transparent 70%),
    radial-gradient(700px 460px at 8% 4%, rgba(var(--gold-rgb), .04), transparent 68%),
    var(--bg-primary);
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

a:hover { color: var(--accent-hover); }

ul, ol { padding: 0; list-style: none; }

table { border-collapse: collapse; width: 100%; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-lg) 0;
}

::selection {
  background: var(--accent);
  color: var(--text-on-accent);
}

/* Focus, always visible, never removed */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  z-index: 200;
  padding: .7rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}

.skip-link:focus {
  top: var(--space-xs);
  color: var(--text-on-accent);
}

/* Icons */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
  stroke-width: 1.7;
}

.icon--xs { width: 1em; height: 1em; }
.icon--lg { width: 1.6em; height: 1.6em; }


/* ===========================================================================
   3. TYPOGRAPHY
   ======================================================================== */

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--text-primary);
  text-wrap: balance;
}

h1 { font-size: var(--fs-page); }
h2 { font-size: var(--fs-section); }
h3 { font-size: var(--fs-card); font-weight: 700; letter-spacing: -.01em; }
h4 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.005em; }

p { text-wrap: pretty; }

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 62ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: .8;
}

.text-muted { color: var(--text-secondary); }
.text-dim   { color: var(--text-muted); }

/* Solid on the light default: a gradient pale enough to read as a gradient on
   white drops under the 3:1 large-text minimum in its middle. The dark theme,
   which has the room for it, adds the gradient back above. */
.accent-text {
  color: var(--accent);
}


/* ===========================================================================
   4. LAYOUT & CONTAINERS
   ======================================================================== */

.container {
  width: min(100% - (var(--page-pad) * 2), var(--page-max));
  margin-inline: auto;
}

.container--narrow { --page-max: 860px; }
.container--mid    { --page-max: 1060px; }

.section {
  padding-block: var(--section-pad);
  position: relative;
}

.section--tight { padding-block: calc(var(--section-pad) * 2 / 3); }
.section--flush-top { padding-top: 0; }


.section--alt {
  background: linear-gradient(180deg, transparent, var(--bg-secondary) 18%, var(--bg-secondary) 82%, transparent);
}

/* Section heading block */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.section-head__text { max-width: 60ch; }

.section-head__title { margin-top: .6rem; }

.section-head__sub {
  margin-top: .65rem;
  color: var(--text-secondary);
}

/* Page banner used on interior pages */
.page-head {
  position: relative;
  padding-top: var(--space-top);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.page-head::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(620px 300px at 82% 0%, rgba(var(--accent-rgb), .1), transparent 70%),
    linear-gradient(180deg, var(--bg-secondary), transparent);
}

.page-head__title { margin-top: .7rem; }

.page-head__sub {
  margin-top: .85rem;
  max-width: 62ch;
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}

.page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* Grids */
.grid { display: grid; gap: var(--space-md); }

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.stack        { display: grid; gap: var(--space-md); }
.stack--sm    { gap: var(--space-xs); }
.stack--lg    { gap: var(--space-lg); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--accent); }

.breadcrumb .icon { width: .85em; height: .85em; opacity: .6; }


/* ===========================================================================
   5. HEADER & NAVIGATION
   ======================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--surface-glass);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.site-header.is-stuck {
  border-bottom-color: var(--border);
  box-shadow: 0 10px 30px -20px rgba(var(--shade-rgb), .55);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: var(--header-h);
}

/* Brand */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--text-primary);
  flex: 0 0 auto;
}

.brand:hover { color: var(--text-primary); }

.brand__mark {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  transition: transform var(--dur) var(--ease-out), filter var(--dur) var(--ease);
}

.brand:hover .brand__mark {
  transform: scale(1.06);
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), .45));
}

.brand__mark svg,
.brand__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The logo artwork is one flat brand cyan, bright enough for a dark page but
   washed out on a light one. A brightness filter turns it into a deep teal for
   the light default, so a second image file is never needed. */
.brand__mark img,
.logo-lockup,
.logo-emblem {
  filter: brightness(.46) saturate(1.35);
}

/* ---- Club logo -------------------------------------------------------- */

/* Full stacked lockup: emblem over the ORLANDO CHESS CLUB wordmark. */
.logo-lockup {
  display: block;
  width: min(100%, 210px);
  height: auto;
}

.logo-lockup--lg { width: min(100%, 300px); }

/* The emblem on its own, for hero and empty-state moments. */
.logo-emblem {
  display: block;
  width: min(100%, 170px);
  height: auto;
  margin-inline: auto;
}

/* A large, very faint mark sitting behind a section as texture. */
.logo-watermark {
  position: absolute;
  right: -3%;
  bottom: -22%;
  width: min(46%, 340px);
  opacity: .06;
  pointer-events: none;
  user-select: none;
  filter: saturate(0) brightness(.3);
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.brand__tagline {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Nav */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  /* Push the nav and the header actions to the right together, so the theme
     toggle sits beside the menu rather than stranded at the far edge. */
  margin-left: auto;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: .15rem;
}

.nav__link {
  position: relative;
  display: block;
  padding: .55rem .8rem;
  border-radius: var(--radius-sm);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.nav__link:hover {
  color: var(--text-primary);
  background: rgba(var(--tint-rgb), .05);
}

.nav__link.is-active {
  color: var(--text-primary);
  font-weight: 600;
}

.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: .8rem;
  right: .8rem;
  bottom: .1rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.nav__cta { display: flex; }

/* Mobile toggle, hidden on desktop, shown in responsive.css */
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-primary);
}

.nav-toggle__icon {
  display: grid;
  gap: 4px;
  width: 18px;
}

.nav-toggle__icon span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---- Header actions cluster -------------------------------------------- */

.header-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
}

/* ---- Theme toggle ------------------------------------------------------ */

.theme-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-secondary);
  transition:
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-soft);
  transform: rotate(-15deg);
}

.theme-toggle .icon {
  width: 1.15rem;
  height: 1.15rem;
}

/* Show the icon for the theme you would switch TO: a moon on the light
   default, a sun once dark. Both live in the button, so no JavaScript has to
   swap any markup. */
.theme-toggle__sun  { display: none; }
.theme-toggle__moon { display: block; }

:root[data-theme="dark"] .theme-toggle__sun  { display: block; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }

.nav-scrim {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 90;
  background: var(--scrim);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.nav-scrim.is-visible { opacity: 1; }


/* ===========================================================================
   6. BUTTONS
   ======================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur) var(--ease),
    color var(--dur-fast) var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn .icon { width: 1.1em; height: 1.1em; }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: var(--text-on-accent);
  box-shadow: var(--shadow-accent);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-hover), var(--accent));
  color: var(--text-on-accent);
  transform: translateY(-2px);
  box-shadow: 0 18px 44px -16px rgba(var(--accent-rgb), .45);
}

.btn-secondary {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: var(--surface-3);
  border-color: var(--accent-line);
  color: var(--text-primary);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.btn-ghost {
  padding-inline: .75rem;
  background: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover { color: var(--accent); background: var(--accent-soft); }

.btn-danger {
  background: var(--danger);
  color: var(--danger-ink);
}

.btn-danger:hover { background: #ff7c84; color: var(--danger-ink); }

.btn-sm { padding: .55rem 1.05rem; font-size: .875rem; }
.btn-lg { padding: 1rem 1.9rem; font-size: 1.0625rem; }

.btn[disabled],
.btn.is-disabled {
  opacity: .5;
  pointer-events: none;
}

.btn-block { width: 100%; }

/* Text link with a moving arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-display);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--accent);
}

.link-arrow .icon { transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(4px); }


/* ===========================================================================
   7. BADGES, PILLS & META
   ======================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: rgba(var(--tint-rgb), .04);
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

.badge--accent  { background: var(--accent-soft);  border-color: var(--accent-line); color: var(--accent); }
.badge--success { background: var(--success-soft); border-color: rgba(62, 212, 143, .3); color: var(--success); }
.badge--warning { background: var(--warning-soft); border-color: rgba(245, 165, 36, .3); color: var(--warning); }
.badge--danger  { background: var(--danger-soft);  border-color: rgba(244, 98, 107, .3); color: var(--danger); }
.badge--cool,
.badge--gold    { background: var(--gold-soft);    border-color: var(--gold-line); color: var(--gold); }
.badge--muted   { color: var(--text-muted); }

.badge--live {
  background: rgba(255, 90, 95, .15);
  border-color: rgba(255, 90, 95, .4);
  color: #ff8a8e;
}

.badge--live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live);
  animation: pulse 1.8s var(--ease) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .4; transform: scale(.8); }
}

/* Fact rows: icon + label */
.meta-list {
  display: grid;
  gap: .55rem;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.meta-list li {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
}

.meta-list .icon {
  margin-top: .15em;
  color: var(--accent);
  opacity: .9;
}

.meta-list a { color: var(--text-secondary); }
.meta-list a:hover { color: var(--accent); }

/* Inline chips of small facts */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.chip {
  padding: .28rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(var(--tint-rgb), .03);
  font-size: var(--fs-tiny);
  font-weight: 500;
  color: var(--text-secondary);
}

/* Notice strip (e.g. sample data warning) */
.notice {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .85rem 1.1rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: rgba(var(--tint-rgb), .025);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.notice .icon { margin-top: .15em; color: var(--warning); }

/* Empty state */
.empty-state {
  padding: var(--space-xl) var(--space-md);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--text-secondary);
}

.empty-state__glyph {
  font-size: 2.5rem;
  line-height: 1;
  color: var(--text-muted);
  opacity: .6;
  margin-bottom: .6rem;
}

.empty-state h3 { color: var(--text-primary); margin-bottom: .35rem; }


/* ===========================================================================
   8. CARDS
   ======================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.card--link:hover,
.card--link:focus-within {
  transform: translateY(-4px);
  border-color: var(--accent-line);
  background: var(--surface-2);
  box-shadow: var(--shadow-lg);
}

.card__title { margin-bottom: .1rem; }

.card__title a { color: inherit; }
.card__title a:hover { color: var(--accent); }

.card__body {
  color: var(--text-secondary);
  font-size: .9375rem;
}

.card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

/* Stretch a link over the whole card while keeping other links clickable */
.card__link-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
}

.card__footer,
.card__actions,
.card a:not(.card__link-overlay) { position: relative; z-index: 2; }

/* Feature card with an icon tile */
.feature-card { align-items: flex-start; }

.feature-card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: 1.4rem;
  line-height: 1;
}

.feature-card__icon .icon { width: 1.35rem; height: 1.35rem; }


/* ===========================================================================
   9. HERO
   ======================================================================== */

.hero {
  position: relative;
  padding-top: var(--space-top);
  padding-bottom: var(--space-2xl);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: var(--space-2xl);
}

.hero__title {
  font-size: var(--fs-hero);
  margin-top: var(--space-sm);
}

.hero__title span { display: block; }

.hero__sub {
  margin-top: var(--space-md);
  max-width: 52ch;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--text-secondary);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}

.hero__fact {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.hero__fact .icon { color: var(--accent); }

.hero__fact strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Decorative board */
.hero__visual {
  position: relative;
  display: grid;
  place-items: center;
}

.board {
  --board-size: min(100%, 420px);
  position: relative;
  width: var(--board-size);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg), 0 0 0 8px rgba(var(--tint-rgb), .02);
  transform: perspective(1400px) rotateX(6deg) rotateZ(-4deg);
  transition: transform var(--dur-slow) var(--ease-out);
}

.board:hover { transform: perspective(1400px) rotateX(3deg) rotateZ(-2deg); }

.board__cell { background: var(--board-dark); }
.board__cell--light { background: var(--board-light); }

.board__piece {
  display: grid;
  place-items: center;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  line-height: 1;
  color: var(--text-primary);
  text-shadow: 0 2px 6px rgba(var(--shade-rgb), .45);
}

.board__piece--gold { color: var(--accent); }

.board__cell--highlight {
  box-shadow: inset 0 0 0 2px var(--accent-line);
  background: rgba(var(--accent-rgb), .1);
}

/* Floating stat card over the board */
.hero__chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  font-size: var(--fs-small);
  animation: float 6s var(--ease) infinite;
}

.hero__chip--tl { top: 4%; left: -4%; }
.hero__chip--br { bottom: 6%; right: -4%; animation-delay: -3s; }

.hero__chip strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text-primary);
}

.hero__chip span { color: var(--text-muted); font-size: var(--fs-tiny); }

.hero__chip .icon { color: var(--accent); width: 1.4em; height: 1.4em; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}


/* ===========================================================================
   10. HOMEPAGE SECTIONS
   ======================================================================== */

/* Stats strip */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--border);
  overflow: hidden;
}

.stat {
  padding: var(--space-lg) var(--space-md);
  background: var(--surface);
  text-align: center;
  transition: background var(--dur) var(--ease);
}

.stat:hover { background: var(--surface-2); }

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--accent);
}

.stat__label {
  margin-top: .5rem;
  font-family: var(--font-display);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--text-primary);
}

.stat__note {
  margin-top: .15rem;
  font-size: var(--fs-tiny);
  color: var(--text-muted);
}

/* About split */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--space-2xl);
  align-items: center;
}

.check-list { display: grid; gap: .7rem; }

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  color: var(--text-secondary);
}

.check-list .icon {
  flex: 0 0 auto;
  margin-top: .2em;
  width: 1.1rem;
  height: 1.1rem;
  padding: 2px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  stroke-width: 2.4;
}

/* Decorative panel that stands in for a photo */
.visual-panel {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(500px 320px at 20% 10%, rgba(var(--accent-rgb), .12), transparent 65%),
    linear-gradient(150deg, var(--surface-2), var(--surface));
  padding: var(--space-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.visual-panel__glyphs {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  line-height: 1;
  color: var(--text-primary);
  opacity: .9;
}

.visual-panel__glyphs span:nth-child(even) { color: var(--accent); }

.visual-panel__caption {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

/* Final CTA band */
.cta-band {
  position: relative;
  padding: clamp(2rem, 5vw, 3.5rem);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(600px 300px at 85% 20%, rgba(var(--accent-rgb), .16), transparent 68%),
    linear-gradient(140deg, var(--surface-2), var(--surface));
  overflow: hidden;
  text-align: center;
}

.cta-band__glyph {
  position: absolute;
  right: -2%;
  bottom: -28%;
  font-size: 16rem;
  line-height: 1;
  color: var(--accent);
  opacity: .07;
  pointer-events: none;
  user-select: none;
}

.cta-band h2 { max-width: 24ch; margin-inline: auto; }

.cta-band p {
  max-width: 54ch;
  margin: var(--space-sm) auto 0;
  color: var(--text-secondary);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}


/* ===========================================================================
   11. EVENTS
   ======================================================================== */

/* Event card */
.event-card { padding: 0; overflow: hidden; }

.event-card__top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
}

/* Date tile */
.date-tile {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  align-content: center;
  width: 62px;
  padding: .55rem .3rem;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  background: var(--accent-soft);
  text-align: center;
  line-height: 1.05;
}

.date-tile__month {
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--accent);
}

.date-tile__day {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text-primary);
}

.date-tile__weekday {
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.date-tile--tba .date-tile__day {
  font-size: .9375rem;
  letter-spacing: .04em;
}

.date-tile--recurring {
  background: var(--cool-soft);
  border-color: var(--gold-line);
}

.date-tile--recurring .date-tile__month { color: var(--cool); }

.event-card__head { min-width: 0; flex: 1; }

.event-card__title { margin-top: .3rem; }

.event-card__summary {
  padding: 0 var(--space-md);
  color: var(--text-secondary);
  font-size: .9375rem;
}

.event-card__meta { padding: var(--space-md) var(--space-md) 0; }

.event-card__details { padding: var(--space-md) var(--space-md) 0; }

.event-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  /* auto, not a fixed margin: cards in a grid row all stretch to the tallest,
     and a fixed margin leaves the spare height stranded BELOW the footer on
     the shorter ones. The .card gap still guarantees a minimum separation. */
  margin-top: auto;
  padding: var(--space-md);
  border-top: 1px solid var(--border);
  background: rgba(var(--tint-rgb), .015);
}

.event-card--featured {
  border-color: var(--accent-line);
  background:
    radial-gradient(420px 220px at 90% 0%, rgba(var(--accent-rgb), .1), transparent 70%),
    var(--surface);
}

.event-card--past { opacity: .72; }
.event-card--past:hover { opacity: 1; }

/* Filter bar */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  margin-bottom: var(--space-lg);
}

.filter-bar__group {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.filter-chip {
  padding: .45rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--dur-fast) var(--ease);
}

.filter-chip:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: rgba(var(--tint-rgb), .04);
}

.filter-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
  font-weight: 700;
}

.search-field {
  position: relative;
  flex: 1 1 200px;
  min-width: 180px;
  margin-left: auto;
}

.search-field .icon {
  position: absolute;
  top: 50%;
  left: .75rem;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.search-field input {
  width: 100%;
  padding: .6rem .9rem .6rem 2.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--fs-small);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.search-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.search-field input::placeholder { color: var(--text-muted); }

/* Meetup / calendar rows */
.meet-list { display: grid; gap: var(--space-sm); }

.meet-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}

.meet-row:hover {
  transform: translateX(3px);
  border-color: var(--accent-line);
  background: var(--surface-2);
}

/* The main Saturday meet is the one row that stays gold, so it reads as the
   headline against the cyan everything else uses. */
.meet-row--official {
  border-color: var(--gold-line);
  background:
    linear-gradient(90deg, rgba(var(--gold-rgb), .08), transparent 45%),
    var(--surface);
}

.meet-row--official:hover { border-color: var(--gold); }

.meet-row__glyph {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-secondary);
}

.meet-row--official .meet-row__glyph {
  border-color: var(--gold-line);
  background: var(--gold-soft);
  color: var(--gold);
}

.meet-row__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
}

.meet-row__when {
  font-size: var(--fs-small);
  color: var(--accent);
  font-weight: 500;
}

.meet-row__where {
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.meet-row__where a { color: var(--text-secondary); }
.meet-row__where a:hover { color: var(--accent); }


/* ===========================================================================
   12. TOURNAMENTS
   ======================================================================== */

.tournament-hero {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(700px 340px at 88% 8%, rgba(var(--accent-rgb), .15), transparent 68%),
    linear-gradient(145deg, var(--surface-2), var(--surface));
  overflow: hidden;
}

.tournament-hero__glyph {
  position: absolute;
  right: 1rem;
  bottom: -22%;
  font-size: 13rem;
  line-height: 1;
  color: var(--accent);
  opacity: .08;
  pointer-events: none;
  user-select: none;
}

.tournament-hero__title { margin-top: .6rem; }

.tournament-hero__sub {
  margin-top: .6rem;
  max-width: 56ch;
  color: var(--text-secondary);
}

/* Key facts grid */
.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 1px;
  margin-top: var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--border);
  overflow: hidden;
}

.fact {
  padding: var(--space-md);
  background: var(--surface);
}

.fact__label {
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.fact__value {
  margin-top: .3rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-primary);
}

.fact__value--accent { color: var(--accent); }

/* Two-column detail layout with a sticky sidebar */
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-xl);
  align-items: start;
}

.detail-sidebar {
  position: sticky;
  top: calc(var(--header-h) + var(--space-md));
  display: grid;
  gap: var(--space-md);
}

.sidebar-card {
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.sidebar-card__title {
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

.sidebar-card__note {
  font-size: var(--fs-small);
  color: var(--text-secondary);
}


/* =============================================================================
   Sponsors

   The logo plate stays light in BOTH themes. These are other people's marks,
   drawn for a light background: Jacob's is flat black, and it would vanish on
   a dark surface. A soft off-white plate keeps every logo correct without
   asking sponsors for a second version of their artwork.
   ========================================================================== */

.sponsor-grid { gap: var(--space-lg); }

.sponsor-card { padding: 0; overflow: hidden; }

.sponsor-card__plate {
  display: grid;
  place-items: center;
  padding: var(--space-lg) var(--space-md);
  /* A fixed height, not a minimum: logos vary in shape, and an equal plate is
     what keeps the text below every card starting on the same line. */
  height: 208px;
  background: #f6f7f9;
  border-bottom: 1px solid var(--border);
}

.sponsor-card__plate img {
  width: auto;
  max-width: min(100%, 270px);
  max-height: 152px;
  object-fit: contain;
}

.sponsor-card__plate--sm {
  height: 92px;
  padding: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.sponsor-card__plate--sm img { max-width: min(100%, 165px); max-height: 64px; }

.sponsor-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  /* Fill the card, so margin-top:auto on the actions really does pin them to
     the bottom and the buttons line up across cards of unequal text. */
  flex: 1 1 auto;
}

/* The badge sits in a stretching flex column, so pin it to its own width */
.sponsor-card__body > .badge { align-self: flex-start; }

.sponsor-card__name {
  font-size: var(--fs-card);
  margin: 0;
}

.sponsor-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-sm);
}

.sponsor-mini + .sponsor-mini { margin-top: var(--space-sm); }

/* The homepage strip: intro on the left, logos on the right, wrapping to a
   stack on narrow screens without a media query. */
.sponsor-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md) var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.sponsor-strip__intro { max-width: 44ch; }

.sponsor-strip__intro p {
  margin-top: .35rem;
  color: var(--text-secondary);
  font-size: var(--fs-small);
}

.sponsor-strip__logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sponsor-strip__logos a {
  width: 190px;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.sponsor-strip__logos a:hover { transform: translateY(-2px); border-color: var(--accent-line); }

/* Schedule rows */
.schedule { display: grid; gap: 0; }

.schedule li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: .65rem 0;
  border-bottom: 1px dashed var(--border);
  font-size: var(--fs-small);
}

.schedule li:last-child { border-bottom: 0; }

.schedule__label { font-weight: 600; color: var(--text-primary); }
.schedule__value { color: var(--text-secondary); white-space: nowrap; }

/* Prose block */
.prose { max-width: 68ch; }

.prose p { margin-bottom: 1.05em; color: var(--text-secondary); }
.prose p:last-child { margin-bottom: 0; }

.prose h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  margin-top: 2em;
  margin-bottom: .55em;
}

.prose h2:first-child { margin-top: 0; }

.prose ul {
  display: grid;
  gap: .5rem;
  margin-bottom: 1.05em;
  padding-left: 0;
}

.prose ul li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--text-secondary);
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: .35rem;
  top: .65em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.prose strong { color: var(--text-primary); font-weight: 600; }

.prose blockquote {
  margin: 1.5em 0;
  padding: var(--space-md) var(--space-lg);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
  color: var(--text-primary);
  font-size: 1.075rem;
}


/* ===========================================================================
   13. PLAYERS & RANKINGS
   ======================================================================== */

/* Avatar */
.avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: linear-gradient(145deg, var(--surface-3), var(--surface-2));
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-secondary);
  overflow: hidden;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }

.avatar--lg { width: 92px; height: 92px; font-size: 1.9rem; }
.avatar--sm { width: 40px; height: 40px; font-size: .875rem; }

.avatar--top { border-color: var(--accent); color: var(--accent); }

/* Player card */
.player-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-md);
  align-items: center;
}

.player-card__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
}

.player-card__name a { color: inherit; }
.player-card__name a:hover { color: var(--accent); }

.player-card__meta {
  margin-top: .2rem;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.player-card__stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--border);
  overflow: hidden;
}

.mini-stat {
  padding: .65rem .5rem;
  background: var(--surface-2);
  text-align: center;
}

.mini-stat__value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
}

.mini-stat__label {
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Title tag: GM / IM / FM */
.title-tag {
  padding: .12rem .38rem;
  border-radius: 4px;
  background: var(--accent);
  color: var(--text-on-accent);
  font-family: var(--font-display);
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .06em;
}

/* Rating pill */
.rating {
  display: inline-flex;
  align-items: baseline;
  gap: .25rem;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-primary);
}

.rating__type {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.change {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.change--up   { color: var(--success); }
.change--down { color: var(--danger); }
.change--flat { color: var(--text-muted); }

/* Podium for the top three */
.podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.podium__slot {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .4rem;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: center;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease);
}

.podium__slot:hover { transform: translateY(-4px); border-color: var(--accent-line); }

.podium__slot--1 {
  border-color: var(--accent-line);
  background:
    radial-gradient(300px 180px at 50% 0%, rgba(var(--accent-rgb), .16), transparent 70%),
    var(--surface);
}

.podium__slot--1 { order: 2; }
.podium__slot--2 { order: 1; margin-top: var(--space-md); }
.podium__slot--3 { order: 3; margin-top: var(--space-md); }

.podium__rank {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-3);
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 800;
  color: var(--text-secondary);
}

.podium__slot--1 .podium__rank { background: var(--accent); color: var(--text-on-accent); }

.podium__name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}

.podium__name a { color: inherit; }
.podium__name a:hover { color: var(--accent); }

.podium__rating {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--accent);
  line-height: 1.1;
}

/* Leaderboard table */
.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.table-scroll { overflow-x: auto; }

.data-table {
  width: 100%;
  min-width: 560px;
  font-size: .9375rem;
}

.data-table thead th {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  white-space: nowrap;
}

.data-table tbody td {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.data-table tbody tr:last-child td { border-bottom: 0; }

.data-table tbody tr { transition: background var(--dur-fast) var(--ease); }
.data-table tbody tr:hover { background: rgba(var(--tint-rgb), .03); }

.data-table .num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.data-table__rank {
  width: 3.5rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.data-table tr.is-top .data-table__rank { color: var(--accent); }

.data-table__player {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
}

.data-table__player-name {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  color: var(--text-primary);
}

.data-table__player-name a { color: inherit; }
.data-table__player-name a:hover { color: var(--accent); }

.data-table__player-sub {
  font-size: var(--fs-tiny);
  color: var(--text-muted);
}

/* Profile header */
.profile-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(500px 260px at 90% 10%, rgba(var(--accent-rgb), .1), transparent 70%),
    linear-gradient(145deg, var(--surface-2), var(--surface));
}

.profile-head__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}

.profile-head__meta {
  margin-top: .4rem;
  color: var(--text-secondary);
  font-size: var(--fs-small);
}

.profile-head__rating {
  margin-left: auto;
  text-align: right;
}

.profile-head__rating-value {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--accent);
}

.profile-head__rating-label {
  font-size: var(--fs-tiny);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Record bar (W/L/D) */
.record-bar {
  display: flex;
  height: 10px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--surface-3);
}

.record-bar__seg--win  { background: var(--success); }
.record-bar__seg--draw { background: var(--text-muted); }
.record-bar__seg--loss { background: var(--danger); }

.record-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: .7rem;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.record-key span { display: inline-flex; align-items: center; gap: .4rem; }

.record-key i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.record-key .dot-win  { background: var(--success); }
.record-key .dot-draw { background: var(--text-muted); }
.record-key .dot-loss { background: var(--danger); }


/* ===========================================================================
   14. LESSONS
   ======================================================================== */

.lesson-card { gap: var(--space-md); }

.lesson-card__glyph {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--accent);
}

.lesson-card__level {
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lesson-card__format {
  font-size: var(--fs-small);
  color: var(--text-muted);
}


/* ===========================================================================
   15. NEWS & ARTICLE
   ======================================================================== */

.news-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-tiny);
  color: var(--text-muted);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.news-card__excerpt {
  color: var(--text-secondary);
  font-size: .9375rem;
}

.news-card--pinned { border-color: var(--accent-line); }

.article-head {
  padding-top: var(--space-top);
  padding-bottom: var(--space-lg);
}

.article-head__title {
  margin-top: .7rem;
  font-size: clamp(2rem, 4.4vw, 3rem);
  max-width: 30ch;
}

.article-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.article-body { padding-bottom: var(--space-xl); }


/* ===========================================================================
   16. FORMS
   ======================================================================== */

.form { display: grid; gap: var(--space-md); }

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--space-md);
}

.field { display: grid; gap: .4rem; }

.field__label {
  font-family: var(--font-display);
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.field__label .req { color: var(--accent); }

.field__hint {
  font-size: var(--fs-tiny);
  color: var(--text-muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.field textarea { min-height: 130px; resize: vertical; }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a4b7' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 18px;
  padding-right: 2.6rem;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--text-muted); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--bg-secondary);
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--danger); }

.field__error {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--fs-small);
  color: var(--danger);
}

/* Checkbox / radio */
.check {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: var(--fs-small);
  color: var(--text-secondary);
  cursor: pointer;
}

.check input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: .2em;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

/* Honeypot, hidden from people, visible to naive bots */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Alerts */
.alert {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .9375rem;
}

.alert .icon { margin-top: .15em; flex: 0 0 auto; }

.alert--success {
  border-color: rgba(62, 212, 143, .35);
  background: var(--success-soft);
  color: var(--alert-success-text);
}

.alert--success .icon { color: var(--success); }

.alert--error {
  border-color: rgba(244, 98, 107, .35);
  background: var(--danger-soft);
  color: var(--alert-error-text);
}

.alert--error .icon { color: var(--danger); }

.alert__title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-primary);
}

/* Contact info cards */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--space-md);
}


/* ===========================================================================
   17. FOOTER
   ======================================================================== */

.site-footer {
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, var(--bg-secondary));
  font-size: var(--fs-small);
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2.4fr);
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.brand--footer .brand__name { font-size: 1rem; }

.site-footer__blurb {
  margin-top: var(--space-md);
  max-width: 34ch;
  color: var(--text-secondary);
}

.social {
  display: flex;
  gap: .5rem;
  margin-top: var(--space-md);
}

.social__link {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-secondary);
  transition: all var(--dur-fast) var(--ease);
}

.social__link:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  transform: translateY(-2px);
}

.site-footer__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: var(--space-lg);
}

.footer-col__title {
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.footer-col ul { display: grid; gap: .55rem; }

.footer-col a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--text-secondary);
}

.footer-col a:hover { color: var(--accent); }

.footer-col a .icon { opacity: .7; }

.footer-col__meta { color: var(--text-muted); font-size: var(--fs-tiny); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-tiny);
}

/* Back to top */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 80;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-primary);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.to-top.is-visible { opacity: 1; transform: translateY(0); }

.to-top:hover { border-color: var(--accent); color: var(--accent); }

.to-top .icon { transform: rotate(-90deg); }


/* ===========================================================================
   18. UTILITIES & MOTION
   ======================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mt-0  { margin-top: 0 !important; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-0  { margin-bottom: 0 !important; }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

.text-center { text-align: center; }
.full-width  { width: 100%; }

.hide { display: none !important; }

/* Scroll-in reveal, main.js adds .is-visible.

   Everything below is scoped to html.js, which an inline script in the document
   head sets before first paint. With JavaScript off (or if main.js fails to
   load) these rules never apply, so content is simply visible rather than
   stuck at opacity 0. */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger children of a revealed group */
.js .reveal--stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.js .reveal--stagger.is-visible > * { opacity: 1; transform: none; }
.js .reveal--stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.js .reveal--stagger.is-visible > *:nth-child(2) { transition-delay: 60ms; }
.js .reveal--stagger.is-visible > *:nth-child(3) { transition-delay: 120ms; }
.js .reveal--stagger.is-visible > *:nth-child(4) { transition-delay: 180ms; }
.js .reveal--stagger.is-visible > *:nth-child(5) { transition-delay: 240ms; }
.js .reveal--stagger.is-visible > *:nth-child(6) { transition-delay: 300ms; }

/* Respect reduced motion everywhere */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal--stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .board { transform: none; }
}

/* Print */
@media print {
  body::before,
  .site-header,
  .site-footer,
  .to-top,
  .filter-bar,
  .hero__visual { display: none !important; }

  body { background: #fff; color: #111; }
  .card, .table-wrap { border-color: #ccc; box-shadow: none; }
}