/* elistafford.com — Sky Band theme.
   Tokens come from the design handoff. Two rules run through the whole
   design and are deliberate: border-radius is 0 everywhere, and there are
   no shadows. Mobile-first; the desktop grids appear at the breakpoints. */

/* Archivo — SIL Open Font License 1.1, self-hosted (no CDN). */
@font-face {
  font-family: 'Archivo';
  src: url("../fonts/Archivo-400.92895abae7c5.woff2") format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url("../fonts/Archivo-500.92895abae7c5.woff2") format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url("../fonts/Archivo-600.92895abae7c5.woff2") format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url("../fonts/Archivo-700.92895abae7c5.woff2") format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo Black';
  src: url("../fonts/ArchivoBlack-400.9be230eb35ea.woff2") format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --base: #F7FAFC;
  --tint-a: #F1F6FA;
  --tint-b: #FAFCFD;
  --surface: #FFFFFF;
  --panel: #E2ECF4;
  --panel-deep: #E9F0F7;
  --panel-select: #EDF4F9;

  --ink: #0E1B2C;
  --ink-soft: #3C4B5C;
  --muted: #54636F;
  --faint: #7A8794;
  --faintest: #93A0AC;

  --border: #D8E3EC;
  --border-light: #E4EDF4;
  --border-lighter: #E8EFF5;
  --border-input: #CFDCE6;

  --accent: oklch(0.5 0.14 238);
  --accent-deep: oklch(0.45 0.14 245);
  --accent-deepest: oklch(0.42 0.13 245);

  --sky-1: oklch(0.82 0.085 230);
  --sky-2: oklch(0.785 0.10 236);
  --sky-3: oklch(0.755 0.11 242);
  --sky-4: oklch(0.725 0.12 248);

  --sponsor-band: oklch(0.50 0.135 246);
  --sponsor-cell: oklch(0.39 0.13 248);

  --navy-panel: #152538;
  --navy-select: oklch(0.34 0.09 244);
  --navy-border: #25384C;
  --navy-track: #2C4055;
  --on-navy: #A9BACB;
  --on-navy-soft: #B8C6D2;
  --link-on-navy: oklch(0.8 0.1 235);

  --display: 'Archivo Black', system-ui, sans-serif;
  --text: 'Archivo', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --pad-x: 20px;
  --pad-y: 56px;
}

@media (min-width: 700px) {
  :root { --pad-x: 36px; --pad-y: 72px; }
}
@media (min-width: 1000px) {
  :root { --pad-x: 56px; --pad-y: 88px; }
}

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  overflow-x: hidden;   /* nothing on this page may scroll the page sideways */
  background: var(--base);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* Every grid on the page declares its mobile column explicitly. A grid with
   `display: grid` and no template creates an IMPLICIT auto column, which
   sizes to its content rather than the viewport — that made the whole page
   wider than a phone screen and clipped the text on the right. */
.hero__inner, .split, .gym-list, .site-footer__cols, .site-footer ul,
.detail-facts, .sponsor__grid, .faq, .records, .event-grid, .product-grid {
  grid-template-columns: minmax(0, 1fr);
}

.section { padding: var(--pad-y) var(--pad-x); }
.section--tint-a { background: var(--tint-a); }
.section--tint-b { background: var(--tint-b); }
.section--panel { background: var(--panel-deep); }

.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent-deep); margin: 0 0 14px;
}

h2.section-title {
  font-size: clamp(30px, 5.5vw, 50px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  text-transform: none;
  margin-bottom: 18px;
}

.lede { font-size: 17px; line-height: 1.7; color: var(--ink-soft); max-width: 62ch; }

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 20px;
  font-family: var(--text); font-size: 14px; font-weight: 700;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn--primary { background: var(--ink); color: var(--base); }
.btn--primary:hover { background: var(--accent-deepest); }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-deep); }
.btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--outline:hover { background: var(--ink); color: var(--base); }
.btn--quiet { color: var(--ink-soft); padding-left: 4px; padding-right: 4px; }
.btn--quiet:hover { color: var(--accent-deep); }

/* Header ----------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 16px;
  min-height: 68px; padding: 10px var(--pad-x);
  background: rgba(248, 250, 252, 0.93);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand__tile {
  width: 32px; height: 32px; flex: none;
  background: var(--ink); color: var(--base);
  font-family: var(--display); font-size: 15px;
  display: grid; place-items: center;
}
.brand__name {
  font-family: var(--display); font-size: 15px; text-transform: uppercase;
  line-height: 1.1;
}
.brand__meta {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint);
}
/* Mobile: the nav is a panel under the header, opened by the Menu button.
   It is only hidden once JavaScript has marked it collapsed, so with JS off
   the links stay reachable rather than disappearing entirely. */
.site-nav {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  order: 3; width: 100%; margin: 10px -0 0;
  border-top: 1px solid var(--border);
}
.site-nav[data-collapsed="true"] { display: none; }
.site-nav a {
  font-size: 15px; font-weight: 600; color: var(--ink-soft);
  text-decoration: none; padding: 13px 2px; border-bottom: 1px solid var(--border-light);
}
.site-nav a:hover { color: var(--accent-deep); }
.site-nav .btn--accent { margin-top: 12px; border-bottom: 0; }
/* The CTA is a link inside the nav, so it needs to win the colour back. */
.site-nav a.btn--accent, .site-nav a.btn--accent:hover { color: #fff; }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 14px; cursor: pointer;
  background: transparent; border: 1px solid var(--border-input);
  font-family: var(--text); font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 16px; height: 2px; background: currentColor; content: "";
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -5px; }
.nav-toggle__bars::after { position: absolute; top: 5px; }

@media (min-width: 1000px) {
  .nav-toggle { display: none; }
  .site-nav, .site-nav[data-collapsed="true"] {
    display: flex; flex-direction: row; align-items: center; gap: 20px;
    order: 0; width: auto; margin: 0; border-top: 0;
  }
  .site-nav a { font-size: 13px; padding: 0; border-bottom: 0; }
  .site-nav .btn--accent { margin-top: 0; }
}

/* Hero ------------------------------------------------------------------- */

.hero { border-bottom: 1px solid var(--border); }
.hero__inner { display: grid; gap: 0; }
.hero__text {
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
  padding: 52px var(--pad-x) 48px;
}
.hero__eyebrow { display: flex; align-items: center; gap: 10px; }
.pulse-dot {
  width: 7px; height: 7px; flex: none; background: var(--accent);
  animation: pulse 1.9s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.hero h1 {
  /* The lower bound has to fit the longest name line inside a 320px phone;
     52px overflowed the viewport and pushed the whole page sideways. */
  font-size: clamp(38px, 11vw, 124px);
  line-height: 0.84; letter-spacing: -0.038em; text-transform: uppercase;
  overflow-wrap: break-word; max-width: 100%;
}
.hero__intro { font-size: 18px; line-height: 1.62; color: var(--ink-soft); max-width: 47ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__photo { border-top: 1px solid var(--border); min-height: 320px; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.08fr 0.92fr; }
  .hero__text { padding: 76px var(--pad-x) 60px; }
  .hero__photo { border-top: 0; border-left: 1px solid var(--border); min-height: 560px; }
}

/* Rankings band ---------------------------------------------------------- */

.rankings { display: grid; grid-template-columns: 1fr; }
.rankings__cell { padding: 26px var(--pad-x); }
.rankings__cell:nth-child(4n+1) { background: var(--sky-1); }
.rankings__cell:nth-child(4n+2) { background: var(--sky-2); }
.rankings__cell:nth-child(4n+3) { background: var(--sky-3); }
.rankings__cell:nth-child(4n+4) { background: var(--sky-4); }
.rankings__league {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: oklch(0.28 0.10 246);
}
.rankings__value {
  font-family: var(--display); font-size: clamp(38px, 7vw, 52px);
  line-height: 0.9; letter-spacing: -0.03em;
  white-space: nowrap;   /* "TOP 10" wraps and breaks the row without this */
  margin: 8px 0 6px;
}
.rankings__caption { font-size: 13px; color: rgba(14, 27, 44, 0.86); }

@media (min-width: 620px) { .rankings { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) {
  .rankings { grid-template-columns: repeat(4, 1fr); }
  .rankings__cell { padding: 38px 30px; }
}

/* Two-column section shell ----------------------------------------------- */

.split { display: grid; gap: 32px; }
@media (min-width: 900px) {
  .split { grid-template-columns: 0.85fr 1.15fr; gap: 60px; }
  .split--wide-left { grid-template-columns: 1.25fr 1fr; gap: 28px; }
}
.split > * { min-width: 0; }

/* Biography -------------------------------------------------------------- */

.bio__photo { background: var(--panel); min-height: 260px; margin-bottom: 24px; }
.facts {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--border); border: 1px solid var(--border);
}
.facts__cell { background: var(--base); padding: 16px 18px; }
.facts__label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 4px;
}
.facts__value { font-size: 15px; font-weight: 600; }
.bio__body { display: flex; flex-direction: column; gap: 20px; font-size: 16px; line-height: 1.72; color: var(--ink-soft); }
.bio__body p { margin: 0; }
.pull-quote {
  margin-top: 24px; padding: 22px 24px;
  background: var(--panel); border-left: 3px solid var(--accent);
  font-size: 17px; font-weight: 600; line-height: 1.5;
}

/* Obstacles (skill tree) -------------------------------------------------- */

.skills { background: var(--ink); color: var(--base); }
.skills .eyebrow { color: oklch(0.8 0.1 235); }
.skills__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 760px) { .skills__grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
.obstacle {
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  min-height: 96px; padding: 16px 14px; text-align: left; cursor: pointer;
  background: var(--navy-panel); color: var(--base);
  border: 1px solid var(--navy-border);
  font-family: var(--text); font-size: 14px; font-weight: 700;
}
.obstacle:hover { border-color: var(--link-on-navy); }
.obstacle[aria-pressed="true"] { background: var(--navy-select); border-color: var(--link-on-navy); }
.obstacle__bar { height: 4px; max-width: 60px; background: var(--navy-track); }
.obstacle__bar span { display: block; height: 100%; background: oklch(0.72 0.115 235); }
.obstacle__level { font-family: var(--mono); font-size: 10px; font-weight: 400; color: var(--on-navy); }
.obstacle-detail { margin-top: 26px; }
@media (min-width: 900px) {
  .skills__split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 34px; align-items: start; }
  .obstacle-detail { margin-top: 0; }
}
.obstacle-detail h3 { font-size: 24px; margin-bottom: 10px; }
.obstacle-detail p { color: var(--on-navy-soft); font-size: 15px; line-height: 1.7; }
.chip-level {
  display: inline-block; padding: 4px 10px; margin-bottom: 12px;
  background: oklch(0.62 0.14 232); color: var(--ink);
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
/* auto-fit, not 1fr 1fr: best marks are often absent, and a fixed two-column
   grid left a dead cell where the missing measurement would have been. */
.obstacle-detail__facts {
  display: grid; gap: 1px; margin-top: 18px;
  background: var(--navy-border);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.obstacle-detail__facts div { background: var(--navy-panel); padding: 14px 16px; }
.obstacle-detail__facts dt {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--on-navy); margin-bottom: 4px;
}
.obstacle-detail__facts dd { margin: 0; font-size: 15px; font-weight: 600; }

/* Gyms ------------------------------------------------------------------- */

.gym-list { display: grid; gap: 14px; }
@media (min-width: 700px) { .gym-list { grid-template-columns: 1fr 1fr; } }
.gym-card {
  display: block; padding: 20px 22px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border);
}
.gym-card:hover { border-color: var(--accent); }
.gym-card__name { font-size: 17px; font-weight: 700; }
.gym-card__city {
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint); margin: 4px 0 12px;
}
.gym-card__note { font-size: 14px; color: var(--muted); line-height: 1.6; }
.badge {
  display: inline-block; padding: 4px 10px; margin-bottom: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--panel); color: var(--ink);
}
.badge--home { background: var(--ink); color: var(--base); }
.suggest-panel {
  margin-top: 18px; padding: 20px 22px;
  border: 1px dashed var(--border-input); color: var(--muted); font-size: 14px;
}

/* FAQ -------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--border-input); }
.faq__item { border-bottom: 1px solid var(--border-input); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 20px 4px; text-align: left; cursor: pointer;
  background: none; border: 0; font-family: var(--text);
  font-size: 16px; font-weight: 700; color: var(--ink);
}
.faq__icon {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--border-input); font-size: 16px; line-height: 1;
}
.faq__q[aria-expanded="true"] .faq__icon {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.faq__a { padding: 0 8px 22px 4px; font-size: 15px; line-height: 1.72; color: var(--ink-soft); }
.faq__a p { margin: 0 0 12px; }
.faq__a p:last-child { margin-bottom: 0; }
.faq__a[hidden] { display: none; }

/* Sponsor ---------------------------------------------------------------- */

.sponsor { background: var(--sponsor-band); color: var(--base); }
.sponsor .eyebrow { color: rgba(247, 250, 252, 0.8); }
.sponsor h2 { font-size: clamp(32px, 6vw, 60px); line-height: 0.9; }
.sponsor__grid { display: grid; gap: 1px; background: rgba(247, 250, 252, 0.24); margin: 26px 0; }
@media (min-width: 520px) { .sponsor__grid { grid-template-columns: 1fr 1fr; } }
.sponsor__cell { background: var(--sponsor-cell); padding: 18px 20px; }
.sponsor__cell dt {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(247, 250, 252, 0.75); margin-bottom: 6px;
}
.sponsor__cell dd { margin: 0; font-size: 16px; font-weight: 600; }
.sponsor__card { background: var(--base); color: var(--ink); padding: 26px 24px; }
.sponsor__card h3 { font-size: 20px; margin-bottom: 6px; }
.field { display: block; margin-bottom: 14px; }
.field span {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.field input, .field textarea {
  width: 100%; padding: 12px 14px;
  font-family: var(--text); font-size: 15px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-input); border-radius: 0;
}
.field input:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.form-note { font-size: 13px; color: var(--muted); margin-top: 12px; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-success { padding: 20px 22px; background: var(--panel); color: var(--ink); font-size: 15px; }
.errorlist { margin: 0 0 12px; padding-left: 18px; color: #8C3A3A; font-size: 13px; }

/* Footer ----------------------------------------------------------------- */

.site-footer { background: var(--ink); color: var(--on-navy); padding: 48px var(--pad-x) 32px; }
.site-footer a { color: var(--link-on-navy); }
.site-footer__brand { font-family: var(--display); color: var(--base); font-size: 18px; text-transform: uppercase; }
.site-footer__cols { display: grid; gap: 24px; margin-top: 24px; }
@media (min-width: 700px) { .site-footer__cols { grid-template-columns: repeat(3, 1fr); } }
.site-footer h2 {
  font-family: var(--text); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--faintest); margin-bottom: 10px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.site-footer__bar {
  margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--navy-border);
  font-size: 12px; color: var(--muted);
}

/* Gym detail page --------------------------------------------------------- */

.page-head { padding: 40px var(--pad-x); border-bottom: 1px solid var(--border); }
.page-head h1 { font-size: clamp(32px, 6vw, 60px); line-height: 0.92; letter-spacing: -0.03em; }
.breadcrumb { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; }
.breadcrumb a { color: var(--accent-deep); text-decoration: none; }
/* auto-fit: most gyms start with only a city, and a fixed two-column grid
   left an empty cell beside it. */
.detail-facts {
  display: grid; gap: 1px; margin-top: 24px;
  background: var(--border); border: 1px solid var(--border);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.detail-facts div { background: var(--base); padding: 16px 18px; }
.detail-facts dt {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 4px;
}
.detail-facts dd { margin: 0; font-size: 15px; font-weight: 600; }

/* Accessibility ----------------------------------------------------------- */

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 18px; background: var(--ink); color: var(--base);
}
.skip-link:focus { left: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Season tracker ---------------------------------------------------------- */

.countdown { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.countdown__tile { padding: 14px 18px; background: var(--ink); color: var(--base); min-width: 74px; text-align: center; }
.countdown__tile--accent { background: var(--accent); }
.countdown__num { display: block; font-family: var(--display); font-size: 30px; line-height: 1; }
.countdown__label { display: block; margin-top: 6px; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.8; }

.upcoming { list-style: none; margin: 10px 0 0; padding: 0; }
.upcoming__row {
  display: grid; gap: 4px 14px; align-items: center;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  padding: 16px 0; border-bottom: 1px solid var(--border-light);
}
.upcoming__date { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.upcoming__name { display: block; font-size: 15px; font-weight: 700; }
.upcoming__venue { display: block; font-size: 13px; color: var(--muted); }
.chip {
  display: inline-block; padding: 4px 9px; background: var(--panel);
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}

/* Results ----------------------------------------------------------------- */

.results__head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  padding: 9px 15px; cursor: pointer; background: transparent; color: var(--ink-soft);
  border: 1px solid var(--border-input); font-family: var(--text);
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.filter.is-active { background: var(--ink); color: var(--base); border-color: var(--ink); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); background: var(--surface); }
table.results { width: 100%; min-width: 620px; border-collapse: collapse; }
table.results th {
  padding: 14px 18px; text-align: left; background: var(--panel);
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
table.results td { padding: 16px 18px; border-top: 1px solid var(--border-lighter); font-size: 15px; }
.results__season { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.results__value { font-family: var(--display); font-size: 16px; white-space: nowrap; }
.results__value.is-highlight { color: var(--accent); }

/* Training progress -------------------------------------------------------- */

.records { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.record { min-width: 0; }
.record__label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.record__value { font-family: var(--display); font-size: 38px; line-height: 1; margin: 8px 0; }
.record__note { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); margin-bottom: 10px; }
.record__chart { display: flex; align-items: flex-end; gap: 4px; height: 90px; }
.record__bar { flex: 1 1 0; min-width: 0; background: var(--chart-mid, #B9CBDA); }
.record__bar.is-latest { background: var(--accent); }

/* Events ------------------------------------------------------------------- */

.events { background: oklch(0.88 0.05 252); }
.event-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 8px; }
.event-card {
  display: flex; flex-direction: column; gap: 8px; min-height: 180px;
  padding: 22px; background: var(--base); border: 1px solid rgba(14, 27, 44, 0.14);
}
.event-card__date { font-family: var(--mono); font-size: 12px; color: var(--accent-deep); }
.event-card__name { font-size: 18px; font-weight: 700; font-family: var(--text); }
.event-card__venue { font-size: 14px; color: var(--muted); }
.event-card__audience { margin-top: auto; font-size: 13px; color: var(--accent-deep); }

/* Shop --------------------------------------------------------------------- */

.product-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 8px; }
.product { background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; }
.product__frame { background: var(--panel); min-height: 180px; }
.product__frame img { width: 100%; height: auto; display: block; }
.product__body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.product__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.product__name { font-size: 17px; font-weight: 700; font-family: var(--text); }
.product__price { font-family: var(--display); font-size: 19px; white-space: nowrap; }
.product__note { font-size: 14px; color: var(--muted); }
.product .btn { margin-top: auto; }

/* Staff-only placeholder for a section with no content yet. Visitors never
   see these; the family needs to know the section exists and where to fill it. */
.empty-section { background: repeating-linear-gradient(135deg, #F1F6FA 0 14px, #E9F0F7 14px 28px); }
.empty-section__note {
  max-width: 60ch; padding: 24px 26px; background: var(--surface);
  border: 1px dashed var(--border-input); display: grid; gap: 12px; justify-items: start;
}
.empty-section__note p { font-size: 15px; color: var(--muted); }
.empty-section__who { font-size: 12px; color: var(--faint); font-style: italic; }

/* Shown site-wide while placeholder content is loaded, so nobody mistakes
   sample results or prices for real ones. */
.demo-banner {
  padding: 12px var(--pad-x); background: #FDF3D8;
  border-bottom: 1px solid #E9C46A; font-size: 14px; line-height: 1.5;
}