/* ============================================================
   TROY SWIM & DIVE — design tokens
   Palette drawn from the pool itself: deep water, chlorine teal,
   warrior red, foam white, backstroke-flag gold.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --ink:        #0A1C24;   /* deep water / near-black */
  --pool:       #0F5C73;   /* main teal-blue */
  --pool-deep:  #093745;   /* darker teal, gradients & footer */
  --warrior-red:#C41230;   /* team red */
  --foam:       #F4FAF9;   /* off-white background */
  --flag:       #FFC93C;   /* backstroke-flag gold, used sparingly */

  --display: 'Oswald', sans-serif;
  --body:    'Source Sans 3', sans-serif;
  --mono:    'IBM Plex Mono', monospace;

  --max: 1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--foam);
  line-height:1.55;
}
h1,h2,h3,h4{
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.02em;
  margin:0 0 .4em;
  color:var(--pool-deep);
}
h1{ font-size:clamp(2.2rem,5vw,3.6rem); font-weight:700; line-height:1.05; }
h2{ font-size:clamp(1.5rem,3vw,2.1rem); font-weight:600; }
h3{ font-size:1.15rem; font-weight:600; letter-spacing:.04em; }
p{ margin:0 0 1em; }
a{ color:var(--pool); text-decoration:none; }
a:hover{ text-decoration:underline; }
a:focus-visible, button:focus-visible{
  outline:3px solid var(--flag);
  outline-offset:2px;
}
img{ max-width:100%; display:block; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }
.eyebrow{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--warrior-red);
  display:block;
  margin-bottom:.5em;
}

/* ---------- Lane-line motif (signature element) ----------
   A repeating set of horizontal "lane rope" bands used as
   section dividers and background texture throughout the site. */
.lanes{
  height:14px;
  width:100%;
  background:repeating-linear-gradient(
    90deg,
    var(--warrior-red) 0 26px,
    var(--foam) 26px 34px,
    var(--ink) 34px 60px,
    var(--foam) 60px 68px
  );
}

/* ---------- Backstroke-flag motif ---------- */
.flagline{
  display:flex;
  justify-content:center;
  gap:28px;
  padding:18px 0;
  background:var(--pool-deep);
}
.flagline svg{ display:block; }

/* ---------- Header / nav ---------- */
header.site{
  background:var(--ink);
  color:#fff;
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:4px solid var(--warrior-red);
}
.nav-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--display);
  font-weight:700;
  font-size:1.3rem;
  letter-spacing:.03em;
  color:#fff;
  text-decoration:none;
}
.brand .mark{
  width:36px;height:36px;border-radius:50%;
  background:var(--warrior-red);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:1rem;
  border:2px solid var(--flag);
}
.brand .brand-logo{
  height:42px;
  width:auto;
  display:block;
}
.brand small{
  display:block;
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.14em;
  color:var(--flag);
  font-weight:500;
  text-transform:uppercase;
}
nav.primary{ display:flex; gap:2px; flex-wrap:wrap; }
nav.primary a{
  color:#dce8ea;
  font-family:var(--display);
  font-size:.85rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:10px 12px;
  border-radius:4px;
}
nav.primary a:hover, nav.primary a[aria-current="page"]{
  color:#fff;
  background:rgba(255,255,255,.08);
  text-decoration:none;
}
nav.primary a[aria-current="page"]{ box-shadow:inset 0 -3px 0 var(--warrior-red); }
.nav-cta{
  font-family:var(--display);
  font-size:.8rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:var(--warrior-red);
  color:#fff !important;
  padding:10px 16px;
  border-radius:4px;
}
.nav-cta:hover{ background:#a10f28; text-decoration:none; }

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, var(--ink), var(--pool-deep));
  color:#fff;
  padding:72px 0 56px;
}
.hero .wrap{ display:grid; gap:18px; }
.hero h1{ color:#fff; max-width:16ch; }
.hero p.lede{ color:#cfe6e9; max-width:56ch; font-size:1.1rem; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
.btn{
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:.85rem;
  padding:13px 22px;
  border-radius:4px;
  border:2px solid transparent;
  display:inline-block;
}
.btn.primary{ background:var(--warrior-red); color:#fff; }
.btn.primary:hover{ background:#a10f28; text-decoration:none; }
.btn.ghost{ border-color:rgba(255,255,255,.5); color:#fff; }
.btn.ghost:hover{ border-color:#fff; text-decoration:none; }

/* ---------- Sections ---------- */
main{ background:var(--foam); }
section{ padding:56px 0; }
section.alt{ background:#fff; }
.grid{ display:grid; gap:24px; }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:800px){
  .grid.cols-3, .grid.cols-2{ grid-template-columns:1fr; }
}

.card{
  background:#fff;
  border:1px solid #dfeceb;
  border-radius:8px;
  padding:24px;
  border-top:4px solid var(--pool);
}
.card.red{ border-top-color:var(--warrior-red); }
.card h3{ color:var(--pool-deep); }
.card .meta{
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--warrior-red);
  letter-spacing:.04em;
}

/* ---------- Tables (roster / records) ---------- */
table{ width:100%; border-collapse:collapse; background:#fff; }
table caption{ text-align:left; font-family:var(--display); text-transform:uppercase; letter-spacing:.04em; padding-bottom:10px; color:var(--pool-deep); }
th,td{
  text-align:left;
  padding:12px 14px;
  border-bottom:1px solid #e3efee;
  font-size:.95rem;
}
table.split-groups td:nth-child(2),
table.split-groups th:nth-child(2){ border-left:2px solid var(--pool); }
table.split-groups td:nth-child(5),
table.split-groups th:nth-child(5){ border-left:2px solid var(--warrior-red); }
th{
  font-family:var(--display);
  text-transform:uppercase;
  font-size:.78rem;
  letter-spacing:.06em;
  color:#fff;
  background:var(--pool);
}
td.num, th.num{ font-family:var(--mono); }
tr:nth-child(even) td{ background:#f7fbfb; }
.table-wrap{ overflow-x:auto; border-radius:8px; border:1px solid #dfeceb; }
.table-wrap table{ border:none; }

/* ---------- Notice / callout ---------- */
.notice{
  background:#fff6e2;
  border:1px solid #ffe3a1;
  border-left:5px solid var(--flag);
  border-radius:6px;
  padding:18px 20px;
  margin:0 0 28px;
}
.notice strong{ color:var(--pool-deep); }

/* ---------- Footer ---------- */
footer.site{
  background:var(--ink);
  color:#c9dadb;
  padding:48px 0 28px;
}
footer.site h4{ color:#fff; font-size:.9rem; }
footer.site a{ color:#c9dadb; }
footer.site a:hover{ color:#fff; }
.foot-grid{ display:grid; grid-template-columns:2fr 1fr; gap:32px; }
@media (max-width:800px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-bottom{
  margin-top:36px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:.8rem;
  color:#8fa5a7;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}
.social-dot{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:.85rem;
}

/* ---------- Breadcrumb / page header for interior pages ---------- */
.page-head{
  background:linear-gradient(180deg,var(--ink),var(--pool-deep));
  color:#fff;
  padding:44px 0 34px;
}
.page-head .eyebrow{ color:var(--flag); }
.page-head h1{ color:#fff; }