/* Thorold Elite Track Club — High Performance
   Design tokens, v2 · July 2026
   Drop this in first; every value below is referenced by the site build prompt. */

:root {
  /* Colour */
  --tetc-navy:        #1C2B4F;  /* anchor */
  --tetc-navy-deep:   #16224F;  /* sash fill on navy grounds */
  --tetc-white:       #FFFFFF;
  --tetc-gold:        #F6C200;  /* keyline, star, 1st place */
  --tetc-royal:       #0C5BA9;  /* support / main club links */
  --tetc-tint:        #E9F1F9;
  --tetc-paper:       #F7F9FB;
  --tetc-cloud:       #DFE6EC;
  --tetc-body:        #38434F;
  --tetc-muted:       #8A95A3;
  --tetc-ink:         #14202E;

  /* Type */
  --tetc-font-mark:    'Graduate', Georgia, serif;
  --tetc-font-display: 'Barlow Condensed', 'Archivo Narrow', sans-serif;
  --tetc-font-body:    'Barlow', system-ui, -apple-system, sans-serif;

  --tetc-hero:      clamp(48px, 6.5vw, 92px);
  --tetc-h2:        clamp(32px, 3.4vw, 46px);
  --tetc-h3:        24px;
  --tetc-body-size: 17px;
  --tetc-caption:   12.5px;
  --tetc-kicker:    12px;

  --tetc-track-kicker: .30em;
  --tetc-track-btn:    .12em;

  /* Space (8px base) */
  --tetc-s1: 8px;  --tetc-s2: 16px; --tetc-s3: 24px;
  --tetc-s4: 32px; --tetc-s5: 48px; --tetc-s6: 64px;

  /* Structure */
  --tetc-radius: 0;              /* square corners, always */
  --tetc-rule:   4px;            /* emphasis rule */
  --tetc-border: 1px solid var(--tetc-cloud);
  --tetc-max:    1280px;
  --tetc-gutter: 56px;
  --tetc-sash-angle: 112deg;
}

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@600;700;800;900&family=Graduate&display=swap');

/* Base */
body {
  margin: 0;
  background: var(--tetc-white);
  color: var(--tetc-body);
  font: 400 var(--tetc-body-size)/1.65 var(--tetc-font-body);
  text-wrap: pretty;
}
a { color: var(--tetc-royal); text-decoration: none; }
a:hover { color: var(--tetc-navy); }

/* Wordmark — nowrap is mandatory */
.tetc-wordmark {
  font: 400 34px/1.1 var(--tetc-font-mark);
  color: var(--tetc-navy);
  white-space: nowrap;
}

/* Kickers, nav, buttons, badges — all nowrap */
.tetc-kicker,
.tetc-nav a,
.tetc-btn,
.tetc-badge,
.tetc-stat__label { white-space: nowrap; }

.tetc-kicker {
  font: 600 var(--tetc-kicker) var(--tetc-font-body);
  letter-spacing: var(--tetc-track-kicker);
  text-transform: uppercase;
  color: var(--tetc-navy);
}
.tetc-kicker--onnavy { color: var(--tetc-gold); }

h1, .tetc-hero {
  font: 900 var(--tetc-hero)/.92 var(--tetc-font-display);
  text-transform: uppercase;
  color: var(--tetc-navy);
  margin: 0;
}
h2 {
  font: 900 var(--tetc-h2)/1 var(--tetc-font-display);
  text-transform: uppercase;
  color: var(--tetc-navy);
  margin: 0;
}

.tetc-btn {
  display: inline-block;
  padding: 15px 26px;
  font: 700 14px var(--tetc-font-body);
  letter-spacing: var(--tetc-track-btn);
  text-transform: uppercase;
  border-radius: var(--tetc-radius);
  background: var(--tetc-navy);
  color: var(--tetc-white);
  border: 0;
  cursor: pointer;
}
.tetc-btn--secondary {
  background: transparent;
  color: var(--tetc-navy);
  border: 2px solid var(--tetc-navy);
  padding: 13px 24px;
}
.tetc-btn--gold { background: var(--tetc-gold); color: var(--tetc-navy); } /* one per screen */

/* The Sash */
.tetc-sash { position: relative; overflow: hidden; }
.tetc-sash::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(var(--tetc-sash-angle),
    transparent 0 66%,
    var(--tetc-gold) 66% 66.6%,
    transparent 66.6% 68%,
    var(--tetc-navy-deep) 68% 100%);
}
.tetc-sash--keyline::after {
  background: linear-gradient(var(--tetc-sash-angle),
    transparent 0 62%, var(--tetc-gold) 62% 63%, transparent 63% 100%);
}
.tetc-sash--ghost::after {
  background: linear-gradient(var(--tetc-sash-angle),
    transparent 0 76%, var(--tetc-tint) 76% 100%);
}

/* Jersey letters */
.tetc-jersey {
  font: 400 40px/1 var(--tetc-font-mark);
  color: var(--tetc-white);
  text-shadow: 1.5px 0 0 var(--tetc-gold), -1.5px 0 0 var(--tetc-gold),
               0 1.5px 0 var(--tetc-gold), 0 -1.5px 0 var(--tetc-gold);
}

/* Page header band */
.tetc-pagehead {
  background: var(--tetc-navy);
  padding: 54px var(--tetc-gutter) 50px;
  color: var(--tetc-white);
}
.tetc-pagehead h1 { color: var(--tetc-white); }

/* Table */
.tetc-table { width: 100%; border-collapse: collapse; border: var(--tetc-border); }
.tetc-table thead th {
  background: var(--tetc-navy); color: var(--tetc-white);
  font: 700 11px var(--tetc-font-body); letter-spacing: .16em;
  text-transform: uppercase; text-align: left; padding: 12px 20px;
}
.tetc-table tbody tr:nth-child(even) { background: var(--tetc-tint); }
.tetc-table td { padding: 13px 20px; font: 400 14.5px var(--tetc-font-body); color: var(--tetc-ink); }
.tetc-table td.mark { font: 900 20px var(--tetc-font-display); color: var(--tetc-navy); text-align: right; }
.tetc-table tr.is-first { border-left: var(--tetc-rule) solid var(--tetc-gold); }

/* Stat block */
.tetc-stat { border-top: var(--tetc-rule) solid var(--tetc-navy); padding-top: 12px; }
.tetc-stat--win { border-top-color: var(--tetc-gold); }
.tetc-stat__num { font: 900 42px/1 var(--tetc-font-display); color: var(--tetc-navy); }
.tetc-stat__label {
  font: 600 11px var(--tetc-font-body); letter-spacing: .18em;
  text-transform: uppercase; color: var(--tetc-muted);
}

/* Footer */
.tetc-footer {
  background: var(--tetc-navy); border-top: 5px solid var(--tetc-gold);
  padding: 26px var(--tetc-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font: 400 13px var(--tetc-font-body); color: #9BB0D4;
}

@media (max-width: 900px) {
  :root { --tetc-gutter: 24px; }
  .tetc-footer { flex-direction: column; align-items: flex-start; }
}