/* 2026-09-22 design pass: grain, a hero that shows its photo, field-marking events.
   Everything here layers over styles.css/store.css; delete this file (and its <link>) to revert. */

/* ── GRAIN: static, generated (feTurbulence), no image files, no licence ── */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 800;
  opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── HERO: let the sunset through; darken only where the type sits ── */
.hero { background-position: center 38%; }
.hero::before {
  background:
    linear-gradient(90deg, rgba(13,13,26,.92) 0%, rgba(13,13,26,.72) 38%, rgba(13,13,26,.15) 70%, rgba(13,13,26,0) 100%),
    linear-gradient(0deg, var(--dark) 0%, rgba(13,13,26,0) 28%);
}
.hero-overlay { display: none; }
.hero-content { width: 100%; } /* flex child was shrink-wrapping and centering over the photo; align with the nav */
.hero-content > * { max-width: 560px; }
.hero-sub { color: #d6d9e4; }

/* ── SECTION RHYTHM: left-aligned heads, bigger scale contrast ── */
.section-title { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; }

/* ── EVENTS: yard lines ── */
#events {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), rgba(255,255,255,.045) calc(10% - 1px), rgba(255,255,255,.045) 10%),
    var(--navy-mid);
}
#events::before {  /* the 50, outlined, like the paint on the field */
  content: '50'; position: absolute; right: -2vw; top: 50%; transform: translateY(-50%);
  font: 700 clamp(14rem, 30vw, 26rem)/1 'Oswald', sans-serif; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.06); pointer-events: none;
}
#events .container { position: relative; }
.events-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 36px; }
.event-next { border-top: 3px solid var(--gold); padding-top: 22px; display: grid; grid-template-columns: auto 1fr; gap: 8px 28px; }
.event-next-kicker { grid-column: 1 / -1; font: 600 .78rem 'Oswald', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.event-next-date { display: flex; flex-direction: column; font-family: 'Oswald', sans-serif; line-height: .9; }
.event-next-date span { font-size: 1.1rem; letter-spacing: .12em; color: var(--gold); }
.event-next-date strong { font-size: clamp(5rem, 9vw, 7.5rem); color: #fff; font-weight: 700; }
.event-next-info { align-self: end; padding-bottom: 10px; }
.event-next-info h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; margin-bottom: 10px; color: #fff; }
.event-next-info p { color: #c3cbd9; font-size: .95rem; margin-bottom: 10px; }
.event-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.14); }
.event-list li { display: grid; grid-template-columns: 5.2em 1fr; gap: 2px 16px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.event-list-date { grid-row: span 2; font: 600 .95rem 'Oswald', sans-serif; letter-spacing: .08em; color: var(--gold); padding-top: 2px; }
.event-list-title { color: #fff; font-weight: 500; font-size: .98rem; }
.event-list-meta { color: var(--text-muted); font-size: .82rem; }
.event-list .event-badge { margin-left: 6px; vertical-align: 1px; font-size: .62rem; padding: 2px 8px; }

@media (max-width: 768px) {
  .events-grid { grid-template-columns: 1fr; gap: 28px; }
  #events::before { font-size: 14rem; top: 18%; right: -12vw; }
  .hero::before { background: linear-gradient(0deg, rgba(13,13,26,.95) 0%, rgba(13,13,26,.7) 55%, rgba(13,13,26,.35) 100%); }
  .hero { background-position: 58% center; }
}