/* Bores Sports Technologies — one stylesheet for every page on this site.
 *
 * Same look as coursechalk.com since 1 Oct 2026 (there: "Direction A", 29 Sep):
 * dark for everyone, serif for everything, gold only for the accent. Change the
 * tokens here and on coursechalk.com together, or in neither.
 *
 * Typefaces are served from /fonts/ (SIL Open Font License, see the OFL-*.txt
 * files beside them), not from Google Fonts. The page then makes no request to
 * any third party, and the privacy page can say so.
 *
 * No inline styles anywhere: the CSP in _headers has no 'unsafe-inline'.
 */

/* -------------------------------- fonts -------------------------------- */
/* One variable file carries both the weight and the optical-size axes. */
@font-face {
  font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("/fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2-variations"),
       url("/fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2");
}
/* Only for the company name, which is set in condensed capitals wherever it
   appears (here, and in the footer of every coursechalk.com page). */
@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
}

/* ------------------------------- tokens -------------------------------- */
/* Navy and gold, dark, for everyone. There is no light theme, so there is no
   prefers-color-scheme block and no data-theme switch. color-scheme makes the
   browser draw its own parts dark too: scrollbars, focus rings. */
:root {
  color-scheme: dark;
  --ground: #0a1524;
  --surface: #10213a;
  --ink: #e9eef7;          /* 15.7:1 on ground, 13.9:1 on surface */
  --ink-soft: #9fb2ce;     /*  8.5:1 on ground,  7.5:1 on surface */
  /* 4.9:1 on the ground, only 4.35:1 on the surface: never on the band. */
  --ink-faint: #74869f;
  --rule: #1e3050;
  --rule-strong: #2c4463;
  --accent: #f0bb46;
  --accent-hover: #ffd06a;
  --accent-text: #f0bb46;
  --accent-ink: #0a1524;   /* 10.4:1 on the gold */
  --accent-wash: #241d0c;
  --body: "Source Serif 4", Georgia, serif;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
}

/* -------------------------------- base --------------------------------- */
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--body); font-size: 18px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 66rem; margin: 0 auto; padding: 0 1.5rem; }
@media (max-width: 26rem) { .wrap { padding: 0 1rem; } }
a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { color: var(--accent-hover); }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1.1rem; }
strong { font-weight: 600; }

h1, h2, h3 { font-weight: 600; text-wrap: pretty; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 1rem; }
h3 { font-size: 1.2rem; line-height: 1.3; margin: 0 0 0.35rem; }

/* Keyboard users land here first and can jump past the top bar. */
.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 20;
  font-weight: 600; background: var(--accent); color: var(--accent-ink);
  padding: 0.5rem 0.9rem; border-radius: 4px; text-decoration: none;
}
.skip:focus { top: 0.6rem; }

/* ------------------------------- top bar ------------------------------- */
.bar {
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(8px);
}
/* padding-block, not padding: the element is also .wrap, and a shorthand here
   wipes the side gutter, so on a phone the name touches the screen edge. */
.bar__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.8rem; }
/* The company name: the one place the condensed face appears on this site. */
.brand {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 1.3rem; letter-spacing: 0.02em; line-height: 1.1;
  color: var(--ink); text-decoration: none;
  display: flex; align-items: center; gap: 0.5rem;
}
/* The Course B: the letter B drawn as one course line, gold dot at the start.
   Sized in em so it steps down with the name, and nudged down so the letters
   center on the line, not on the dot. */
.brand__mark { width: 0.77em; height: 1em; flex: none; position: relative; top: 0.07em; }
.brand__line { fill: currentColor; }
.brand__dot { fill: var(--accent); }
.bar__nav { display: flex; align-items: center; gap: 1.4rem; }
.bar__link { font-size: 1rem; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.bar__link:hover { color: var(--ink); text-decoration: underline; }
.bar .brand, .bar .btn { white-space: nowrap; }
/* "Bores Sports Technologies" is a long name in a nowrap bar. It steps down
   twice, and the home page's Contact link goes before the button starts to
   crowd it (the closing section and the footer still carry the address). */
/* The PaceChalk link goes first, while the bar still has room for the name at
   full size (the hero and the tools section still link to pacechalk.com). */
@media (max-width: 42rem) { .bar__link--wider { display: none; } }
@media (max-width: 36rem) { .brand { font-size: 1.1rem; } .bar__link--wide { display: none; } }
@media (max-width: 24rem) { .brand { font-size: 0.95rem; letter-spacing: 0; } .bar .btn { font-size: 0.92rem; padding: 0.45rem 0.7rem; } }
/* 320 px phones: the name and the button only just fit side by side. */
@media (max-width: 22rem) { .bar__in { gap: 0.5rem; } .brand { font-size: 0.86rem; gap: 0.35rem; } .bar .btn { font-size: 0.85rem; padding: 0.4rem 0.6rem; } }

/* ------------------------------- buttons ------------------------------- */
.btn {
  font: 600 1rem/1.2 var(--body);
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid transparent; border-radius: 4px; padding: 0.6rem 1.05rem;
  text-decoration: none; display: inline-block; cursor: pointer;
}
/* Sets its own text color: without it the global a:hover turns the label
   gold on gold. */
.btn:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn--ghost { background: none; color: var(--ink); border-color: var(--rule-strong); }
.btn--ghost:hover { background: var(--accent-wash); border-color: var(--accent); color: var(--ink); }
.btn--big { font-size: 1.1rem; padding: 0.85rem 1.45rem; }
/* A button labelled with an email address is wider than a 360 px phone. */
.btn--wrap { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }

/* -------------------------------- hero --------------------------------- */
/* padding-top only, for the same reason as the bar. */
.hero { padding-top: clamp(3rem, 8vw, 5.5rem); }
.hero h1 {
  font-size: clamp(2.2rem, 4.8vw, 3.6rem); line-height: 1.08; letter-spacing: -0.015em;
  max-width: 16em; margin: 0;
}
.hero__lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ink-soft); max-width: 36em; margin: 1.6rem 0 0; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem 1.6rem; align-items: center; margin-top: 2.1rem; }
.hero__cta a:not(.btn) { font-size: 1.1rem; font-weight: 600; }

/* ------------------------------ sections ------------------------------- */
section { padding: clamp(4rem, 9vw, 6.5rem) 0 0; scroll-margin-top: 4rem; }
.lede { font-size: 1.12rem; color: var(--ink-soft); max-width: 36em; }

/* A heading and its short intro on the left, the substance on the right. */
.split { display: grid; gap: 1.5rem 4rem; }
@media (min-width: 56rem) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.split__side p { color: var(--ink-soft); max-width: 26em; }

/* The tools, and the rules: rows divided by a rule, no cards, no numbers. */
.rows { margin: 0; padding: 0; list-style: none; }
.rows > li { padding: 1.5rem 0; border-top: 1px solid var(--rule); scroll-margin-top: 5rem; }
.rows > li:first-child { border-top: 0; padding-top: 0.2rem; }
.rows p { color: var(--ink-soft); max-width: 38em; }
.rows p:last-child { margin-bottom: 0; }
.rows strong { color: var(--ink); }
.status { font-style: italic; color: var(--ink-faint); margin: 0 0 0.6rem; }
.go { font-weight: 600; }

/* For schools: one panel, no accent rule down the side. */
.panel {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 6px;
  padding: clamp(1.3rem, 3vw, 1.9rem); max-width: 44rem;
}
.panel p { color: var(--ink-soft); }
.panel p:last-child { margin-bottom: 0; }
.panel strong { color: var(--ink); }

/* ------------------------------ the note ------------------------------- */
/* Who this is: a full-width band, the one place the surface color shows. The
   photo is two crops of one file set, chosen by <picture>: portrait beside
   the text on a wide screen, landscape above it on a narrow one. The person
   behind Ethan is blurred in the files themselves; never hide a face with
   CSS, because the file is public by URL. */
.note {
  margin-top: clamp(4rem, 9vw, 6.5rem); padding: clamp(3rem, 7vw, 5.5rem) 0;
  background: var(--surface); border-block: 1px solid var(--rule);
}
.note__in { display: grid; gap: 2.5rem 4.5rem; align-items: start; }
@media (min-width: 56rem) { .note__in { grid-template-columns: 22rem minmax(0, 1fr); } }
.note__photo { display: block; }
.note__photo img { width: 100%; height: auto; border-radius: 4px; }
.note__text p { font-size: 1.15rem; line-height: 1.65; max-width: 32em; color: var(--ink-soft); }
.note__text p:last-of-type { margin-bottom: 0; }

/* ------------------------------- closing ------------------------------- */
/* padding-top only, and no max-width on the element itself: it is also .wrap,
   and a narrower .wrap centres itself out of line with everything above. */
.last { padding-top: clamp(4rem, 9vw, 6.5rem); }
.last h2, .last p { max-width: 34em; }
.last p { font-size: 1.2rem; }

/* ------------------------------ plain page ----------------------------- */
/* Privacy and 404: one narrow column. */
.page { max-width: 44rem; padding-top: 3rem; padding-bottom: 4rem; }
.page h1 { font-size: clamp(2rem, 5vw, 2.7rem); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 0.7rem; }
.page h2 {
  font-size: 1.45rem; line-height: 1.25; letter-spacing: -0.005em;
  margin: 2.4rem 0 0.7rem; padding-top: 1.4rem; border-top: 1px solid var(--rule);
}
.page p { color: var(--ink-soft); }
.stamp { font-style: italic; color: var(--ink-faint); margin: 0 0 2.2rem; }

/* ------------------------------- footer -------------------------------- */
footer {
  margin-top: clamp(4rem, 9vw, 6.5rem); border-top: 1px solid var(--rule-strong);
  padding: 2.2rem 0 3rem; font-size: 0.95rem; color: var(--ink-soft);
}
.page + footer { margin-top: 0; }
footer p { max-width: 46em; }
.footlinks { margin: 0 0 1.2rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; }
.footlinks a { text-decoration: none; color: var(--ink-soft); }
.footlinks a:hover { color: var(--ink); text-decoration: underline; }
.credits { font-size: 0.85rem; line-height: 1.75; color: var(--ink-faint); }
.credits strong { color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}