:root {
    /* Palette carried over from recsportsteam.com.
       --color-primary is the brand blue and is used for fills, borders and focus
       rings. It only reaches 3.2:1 against white, so anywhere the blue is used as
       *text* (links, badges, active nav) use --color-primary-dark instead, which
       clears WCAG AA at 5.2:1 on white and 4.7:1 on --color-primary-soft. */
    --color-primary: #3097d1;
    --color-primary-dark: #24739f;
    --color-primary-soft: #eaf4fb;
    --color-primary-border: #c8e3f4;
    --color-secondary: #1d2834;
    --color-accent: #2acf6c;
    --color-accent-dark: #22a957;
    /* Slate, so "info" badges stay distinct now that the primary is blue. */
    --color-slate: #4c5f85;
    --color-slate-soft: #eef1f7;

    --color-text: #4c5765;
    --color-text-muted: #737d8b;
    --color-text-subtle: #959ca7;
    --color-heading: #202122;

    --color-bg: #ffffff;
    --color-bg-muted: #f6f7f8;
    --color-border: #e3e5e7;
    --color-border-soft: #f0f3f6;

    --color-danger: #d64545;
    --color-danger-soft: #fdecec;
    --color-warning: #d38b1a;
    --color-warning-soft: #fdf3e2;
    --color-success: var(--color-accent-dark);
    --color-success-soft: #e6f8ee;

    --radius-sm: 7px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(29, 40, 52, .06), 0 1px 3px rgba(29, 40, 52, .04);
    --shadow-md: 0 4px 12px rgba(29, 40, 52, .08);
    --shadow-lg: 0 12px 32px rgba(29, 40, 52, .12);

    --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --container: 1160px;
    --navbar-height: 68px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
}

h1, h2, h3, h4 {
    margin: 0 0 .5em;
    color: var(--color-heading);
    line-height: 1.25;
    font-weight: 700;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--color-primary-dark); text-decoration: none; }
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

img { max-width: 100%; height: auto; }

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

button { font: inherit; }

/* The browser hides [hidden] via its user-agent sheet, which any author-level
   `display` rule silently outranks. Several elements we toggle from JS carry
   display:block/flex from their own class, so restate it with !important. */
[hidden] { display: none !important; }

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 3px;
}

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}

.section { padding: 72px 0; }
.section--muted { background: var(--color-bg-muted); }

.section__title { text-align: center; font-size: 1.9rem; margin-bottom: .25em; }
.section__subtitle {
    text-align: center;
    color: var(--color-text-muted);
    margin: 0 auto 2.5rem;
    max-width: 560px;
}

.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;
}

.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }

@media (max-width: 720px) {
    h1 { font-size: 1.85rem; }
    h2 { font-size: 1.45rem; }
    .section { padding: 48px 0; }
    .section__title { font-size: 1.5rem; }
}