/* ============================================
   DRAKE ATHLETICS — shared styles
   Brand: black / electric blue / white, brush-stroke energy
   ============================================ */
:root {
  --black: #0b0b0d;
  --ink: #131316;
  --blue: #3fa9f5;
  --blue-bright: #5bc0ff;
  --blue-deep: #1b7fd4;
  --white: #ffffff;
  --gray: #a7b0b8;
  --max: 1100px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--black);
  color: var(--white);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.6;
}

h1, h2, h3 { font-family: 'Anton', sans-serif; letter-spacing: .03em; text-transform: uppercase; }
.brush { font-family: 'Permanent Marker', cursive; text-transform: none; letter-spacing: 0; }
a { color: var(--blue-bright); }

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

/* ---------- NAV ---------- */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,11,13,.94);
  border-bottom: 2px solid var(--blue);
  backdrop-filter: blur(6px);
}
.navbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; max-width: var(--max); margin: 0 auto; }
.logo-lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--white); }
.logo-lockup img { height: 46px; width: auto; }
.logo-word { font-family: 'Anton', sans-serif; font-size: 1.5rem; letter-spacing: .08em; }
.logo-word span { color: var(--blue); }
nav.main ul { display: flex; gap: 4px; list-style: none; flex-wrap: wrap; }
nav.main a {
  display: block; padding: 8px 12px; color: var(--white); text-decoration: none;
  font-family: 'Anton', sans-serif; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 3px solid transparent;
}
nav.main a:hover, nav.main a.active { color: var(--blue-bright); border-bottom-color: var(--blue); }
#navToggle { display: none; background: none; border: 2px solid var(--blue); color: var(--blue-bright); font-size: 1.4rem; padding: 2px 12px; cursor: pointer; }

@media (max-width: 900px) {
  #navToggle { display: block; }
  nav.main { display: none; width: 100%; }
  nav.main.open { display: block; }
  nav.main ul { flex-direction: column; padding: 10px 0; }
  .navbar { flex-wrap: wrap; }
}

/* ---------- HERO ---------- */
.hero {
  position: relative; text-align: center; padding: 90px 20px 100px; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 40% at 80% 10%, rgba(63,169,245,.25), transparent 60%),
    radial-gradient(ellipse 50% 35% at 15% 85%, rgba(63,169,245,.18), transparent 60%),
    var(--black);
}
.hero h1 { font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1.05; }
.hero h1 .hl { color: var(--blue); }
.hero .slogan { font-family: 'Permanent Marker', cursive; color: var(--blue-bright); font-size: clamp(1.3rem, 3vw, 2rem); margin-top: 14px; }
.hero p.sub { color: var(--gray); max-width: 620px; margin: 18px auto 0; }

/* brush slash accents */
.slash {
  display: inline-block; position: relative; padding: 4px 18px;
}
.slash::before {
  content: ""; position: absolute; inset: 0; background: var(--blue);
  transform: skewX(-12deg) rotate(-1.5deg); z-index: -1;
}
.slash.dark::before { background: var(--ink); border: 1px solid var(--blue); }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-block; margin: 8px 6px; padding: 13px 28px;
  font-family: 'Anton', sans-serif; letter-spacing: .1em; text-transform: uppercase; font-size: .95rem;
  text-decoration: none; cursor: pointer; border: none;
  transform: skewX(-8deg);
}
.btn > span { display: inline-block; transform: skewX(8deg); }
.btn.primary { background: var(--blue); color: var(--black); }
.btn.primary:hover { background: var(--blue-bright); }
.btn.ghost { background: transparent; color: var(--blue-bright); outline: 2px solid var(--blue); }
.btn.ghost:hover { background: rgba(63,169,245,.12); }

/* ---------- SECTIONS ---------- */
section.band { padding: 64px 0; }
section.band.blue { background: var(--blue); color: var(--black); }
section.band.blue h2 { color: var(--black); }
section.band.ink { background: var(--ink); }
h2.sect {
  font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 28px; text-align: center;
}
h2.sect .slash { color: var(--white); }

/* ---------- CARDS ---------- */
.grid { display: grid; gap: 22px; }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.card {
  background: var(--ink); border: 1px solid #23262b; border-top: 4px solid var(--blue);
  padding: 26px;
}
.card h3 { color: var(--blue-bright); margin-bottom: 10px; font-size: 1.25rem; }
.card p, .card li { color: var(--gray); font-size: .97rem; }
.card ul { padding-left: 20px; margin-top: 8px; }
.card .tag {
  display: inline-block; background: var(--blue); color: var(--black);
  font-family: 'Anton', sans-serif; font-size: .75rem; letter-spacing: .08em;
  padding: 3px 10px; margin-bottom: 12px; transform: skewX(-8deg);
}

/* ---------- DATES LIST (announcements) ---------- */
.dates { max-width: 720px; margin: 0 auto; list-style: none; }
.dates li {
  display: flex; gap: 16px; align-items: baseline; padding: 13px 6px;
  border-bottom: 1px dashed #2a2e34;
}
.dates .d {
  font-family: 'Anton', sans-serif; color: var(--blue-bright); min-width: 120px;
  letter-spacing: .04em;
}

/* ---------- PLACEHOLDER photo blocks ---------- */
.ph {
  aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(135deg, rgba(63,169,245,.14) 0%, transparent 55%),
    repeating-linear-gradient(45deg, #17181c 0 14px, #131316 14px 28px);
  border: 1px solid #23262b; color: #5a636c;
  font-family: 'Permanent Marker', cursive; font-size: 1.05rem; text-align: center; padding: 10px;
}
.ph.round { border-radius: 50%; aspect-ratio: 1/1; width: 170px; margin: 0 auto 16px; }

/* ---------- FORMS ---------- */
form.drake label { display: block; font-family: 'Anton', sans-serif; letter-spacing: .06em; font-size: .85rem; margin: 16px 0 6px; color: var(--blue-bright); text-transform: uppercase; }
form.drake input, form.drake textarea, form.drake select {
  width: 100%; padding: 12px; background: #101114; border: 1px solid #2a2e34; color: var(--white);
  font-family: 'Inter', sans-serif; font-size: 1rem;
}
form.drake input:focus, form.drake textarea:focus { outline: 2px solid var(--blue); }
.signup-inline { display: flex; gap: 10px; max-width: 520px; margin: 18px auto 0; }
.signup-inline input { flex: 1; padding: 13px; background: #101114; border: 1px solid var(--blue); color: var(--white); font-size: 1rem; }
@media (max-width: 560px) { .signup-inline { flex-direction: column; } }

/* ---------- FOOTER ---------- */
footer.site {
  border-top: 2px solid var(--blue); background: var(--ink);
  padding: 44px 20px 28px; margin-top: 60px;
}
.foot-grid { max-width: var(--max); margin: 0 auto; display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
footer.site h4 { font-family: 'Anton', sans-serif; letter-spacing: .08em; color: var(--blue-bright); margin-bottom: 10px; text-transform: uppercase; }
footer.site p, footer.site a, footer.site li { color: var(--gray); font-size: .92rem; }
footer.site ul { list-style: none; }
footer.site ul li { margin: 5px 0; }
.foot-tag { text-align: center; margin-top: 34px; color: #5a636c; font-size: .85rem; }
.foot-tag .brush { color: var(--blue); font-size: 1.05rem; }

/* ---------- PAGE HERO (interior pages) ---------- */
.page-hero { text-align: center; padding: 58px 20px 46px;
  background: radial-gradient(ellipse 55% 60% at 50% 0%, rgba(63,169,245,.2), transparent 65%), var(--black);
}
.page-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.page-hero p { color: var(--gray); max-width: 640px; margin: 12px auto 0; }

.note-edit { border-left: 4px solid var(--blue); background: #101418; padding: 12px 16px; color: var(--gray); font-size: .9rem; margin: 20px 0; }