:root {
  color-scheme: dark;
  --bg: #0b2116;
  --navy: #122036;
  --surface: #16261c;
  --surface-2: #1e293b;
  --text: #f1f5f9;
  --muted: #94a3b8;
  --accent: #22c55e;
  --gold: #d4af37;
  --gold-2: #f2b705;
  --gold-text: #f5e6b8;
  --error: #f87171;
  --max: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* Keep anchor-nav targets clear of the sticky header (header height scales
   with viewport, see .brand-icon's clamp() and the .nav-toggle breakpoints
   below) so a clicked nav link doesn't land with its heading hidden. */
section[id] { scroll-margin-top: 310px; }
@media (max-width: 820px) {
  section[id] { scroll-margin-top: 270px; }
}
@media (max-width: 700px) {
  section[id] { scroll-margin-top: 190px; }
}


body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
}

a { color: inherit; }

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

/* ---------- Header ---------- */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(11, 33, 22, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}

/* The logo gets its own centered row spanning the full banner, at every viewport
   width — not just above some breakpoint, since a hard cutoff meant a narrower
   window (or an embedded preview panel) would silently fall back to the old
   small/left logo. The menu (or its hamburger on narrow screens) sits left and
   the CTAs sit right on the row underneath. Sizing is fluid (clamp) so it scales
   smoothly instead of jumping at a fixed breakpoint. */
.site-header .wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  row-gap: 0.6rem;
  padding-top: 1rem;
  padding-bottom: 0.75rem;
}

.brand {
  align-self: center;
  display: flex;
  align-items: center;
  gap: clamp(0.65rem, 2vw, 1rem);
  text-decoration: none;
}

.header-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand-icon { height: clamp(92px, 22vw, 184px); width: auto; display: block; }
.brand-word {
  display: flex;
  flex-direction: column;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.05;
}
.brand-word .line1,
.brand-word .line2 {
  font-weight: 700;
  color: var(--gold-text);
  font-size: clamp(0.98rem, 4.2vw, 1.96rem);
  white-space: nowrap;
}
.brand-word .line1 { letter-spacing: 0.03em; }
.brand-word .line2 { letter-spacing: 0.22em; }
.brand-word .tagline {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: clamp(0.62rem, 2vw, 1rem);
  letter-spacing: 0.01em;
  color: var(--muted);
  margin-top: 0.25rem;
  white-space: nowrap;
}

nav.main-nav { display: flex; align-items: center; gap: 1.5rem; }
nav.main-nav a {
  text-decoration: none;
  color: var(--text);
  font-size: 0.92rem;
  opacity: 0.85;
}
nav.main-nav a:hover { opacity: 1; color: var(--gold-text); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 1.35rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  color: #1a1204;
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.25);
}
.btn-secondary {
  background: rgba(241, 245, 249, 0.06);
  color: var(--text);
  border-color: rgba(241, 245, 249, 0.25);
}
.btn-accent {
  background: var(--accent);
  color: #05170c;
}

.nav-cta { display: flex; gap: 0.6rem; }

/* ---------- Hero ---------- */
.hero {
  padding: 5rem 0 4rem;
  text-align: center;
  background-image: linear-gradient(rgba(5, 15, 10, 0.68), rgba(5, 15, 10, 0.78)), url("assets/field.svg");
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}

@media (max-width: 700px) {
  .hero {
    /* The field art is a tall portrait field with "TOUCHDOWN" end-zone
       text top and bottom; on narrow/tall hero boxes `cover` barely crops
       it and that text peeks into view. Force a fixed zoom instead so we
       always land on the mid-field yard lines, regardless of how tall
       the stacked hero copy makes this section. */
    background-size: auto 180%;
    background-position: center;
  }
}
.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.35);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
.hero h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.15;
  margin: 0 0 1rem;
}
.hero h1 span { color: var(--gold-text); }
.hero p.slogan {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  color: var(--accent);
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  margin: 0 0 1.5rem;
}
.hero p.lede {
  max-width: 640px;
  margin: 0 auto 2.25rem;
  color: var(--muted);
  font-size: 1.1rem;
}
.hero-ctas {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Audience fork */
.audience-fork {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  max-width: 760px;
  margin: 3rem auto 0;
}
@media (max-width: 640px) {
  .audience-fork { grid-template-columns: 1fr; }
}
.fork-card {
  background: rgba(15, 33, 22, 0.72);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: left;
}
.fork-card h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.fork-card p { margin: 0 0 1rem; color: var(--muted); font-size: 0.92rem; }

/* ---------- Sections ---------- */
section { padding: 4.5rem 0; }
.panel-bg {
  background: rgba(15, 33, 22, 0.72);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.section-head { text-align: center; max-width: 620px; margin: 0 auto 2.75rem; }
.section-head .eyebrow { margin-bottom: 0.9rem; }
.section-head h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  margin: 0 0 0.75rem;
}
.section-head p { color: var(--muted); margin: 0; }

/* How it works */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1.25rem;
}
.step {
  background: rgba(30, 41, 59, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 0.9rem;
  padding: 1.5rem 1.25rem;
}
.step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.15);
  color: var(--gold-text);
  font-weight: 700;
  margin-bottom: 0.9rem;
  font-size: 0.9rem;
}
.step h4 { margin: 0 0 0.4rem; font-size: 1rem; }
.step p { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* Feature grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .feature-grid { grid-template-columns: 1fr; } }
.feature {
  padding: 1.4rem;
  border-radius: 0.9rem;
  background: rgba(30, 41, 59, 0.4);
  border: 1px solid rgba(148, 163, 184, 0.12);
}
.feature h4 { margin: 0 0 0.4rem; font-size: 0.98rem; color: var(--gold-text); }
.feature p { margin: 0; color: var(--muted); font-size: 0.88rem; }

/* Rewards tiers */
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1.25rem;
}
.tier {
  border-radius: 1rem;
  padding: 1.75rem 1.5rem;
  background: rgba(30, 41, 59, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.15);
  text-align: center;
}
.tier .pts {
  font-family: Georgia, serif;
  font-size: 1.8rem;
  color: var(--accent);
  margin-bottom: 0.35rem;
}
.tier .label { color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.9rem; }
.tier p { margin: 0; font-size: 0.92rem; }

/* Gallery: phone mockups */
.phone-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 1.25rem;
  max-width: 920px;
  margin: 0 auto 3rem;
}
.phone-mockup { text-align: center; max-width: 210px; margin: 0 auto; }
.phone-screen {
  position: relative;
  aspect-ratio: 9 / 19.5;
  background: linear-gradient(160deg, #16261c, #0b2116);
  border: 3px solid rgba(212, 175, 55, 0.35);
  border-radius: 1.5rem;
  padding: 0.6rem 0.55rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.phone-screen::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 0.4rem;
  background: rgba(5, 15, 10, 0.7);
  border-radius: 999px;
}
.phone-screen--photo { padding: 0; background: #0b2116; }
.phone-screen--photo::before { display: none; }
.phone-screen--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.phone-caption { margin-top: 0.85rem; font-size: 0.82rem; color: var(--muted); }


.gallery-upload {
  max-width: 560px;
  margin: 0 auto;
  background: rgba(15, 33, 22, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
}
.gallery-upload h3 { margin: 0 0 0.4rem; font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; }
.gallery-upload p { margin: 0 0 1.5rem; color: var(--muted); font-size: 0.92rem; }
.gallery-upload form { text-align: left; }

/* Find a bar */
.venue-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}
.venue-card {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 1rem;
  padding: 1.75rem 2rem;
  max-width: 380px;
  text-align: center;
}
.venue-card h3 {
  margin: 0 0 0.5rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  color: var(--gold-text);
}
.venue-card .venue-address {
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: 0.92rem;
}

/* CTA band */
.cta-band {
  text-align: center;
  padding: 4rem 0;
}
.cta-band h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  margin: 0 0 0.75rem;
}
.cta-band p { color: var(--muted); max-width: 520px; margin: 0 auto 1.75rem; }

/* Contact form */
.contact-panel {
  max-width: 560px;
  margin: 0 auto;
  background: rgba(15, 33, 22, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1rem;
  padding: 2rem;
}
.form-row { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.form-row label { font-size: 0.85rem; color: var(--muted); }
.form-row input,
.form-row select,
.form-row textarea {
  background: rgba(241, 245, 249, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 0.5rem;
  padding: 0.65rem 0.8rem;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
}
.form-row textarea { resize: vertical; min-height: 90px; }
.form-note { font-size: 0.78rem; color: var(--muted); margin-top: 0.75rem; text-align: center; }

/* FAQ */
.faq { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; }
details.faq-item {
  background: rgba(30, 41, 59, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
}
details.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.96rem;
  list-style: none;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after { content: "+"; float: right; color: var(--gold-text); }
details.faq-item[open] summary::after { content: "\2212"; }
details.faq-item p { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.9rem; }

/* Footer */
footer.site-footer {
  border-top: 1px solid rgba(148, 163, 184, 0.15);
  padding: 2.5rem 0;
  background: rgba(5, 15, 10, 0.6);
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-grid .brand-icon { height: 34px; }
.footer-grid .brand-word .line1,
.footer-grid .brand-word .line2 { font-size: 0.82rem; }
.footer-grid .brand-word .tagline { font-size: 0.6rem; }
.footer-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.footer-links a { text-decoration: none; color: var(--muted); font-size: 0.85rem; }
.footer-links a:hover { color: var(--gold-text); }
.copyright { color: var(--muted); font-size: 0.78rem; margin-top: 1.5rem; text-align: center; }

/* Mobile nav toggle */
.nav-toggle { display: none; }
@media (max-width: 820px) {
  nav.main-nav { display: none; }
  .nav-toggle {
    display: inline-flex;
    background: none;
    border: none;
    color: var(--text);
    font-size: 1.4rem;
    cursor: pointer;
  }
  .nav-cta .btn-secondary { display: none; }
}

.main-nav.nav-open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg);
  padding: 1rem 1.5rem 1.5rem;
  gap: 1rem;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}

/* ---------- Game night photos ---------- */
.photo-grid {
  --h: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.photo-thumb {
  height: var(--h);
  aspect-ratio: var(--ar);
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 0.6rem;
  overflow: hidden;
  background: var(--surface);
  cursor: zoom-in;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.photo-thumb:hover,
.photo-thumb:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold);
  outline: none;
}
.photo-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-hint {
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
  margin: 1rem 0 0;
}
@media (max-width: 900px) { .photo-grid { --h: 150px; } }
@media (max-width: 560px) { .photo-grid { --h: 120px; gap: 0.5rem; } }

/* Click-to-enlarge viewer (native <dialog>: Esc closes it, focus is trapped). */
.lightbox {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox::backdrop { background: rgba(0, 0, 0, 0.88); }
.lightbox-img {
  max-width: min(92vw, 1100px);
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
.lightbox-close,
.lightbox-nav {
  position: absolute;
  background: rgba(15, 33, 22, 0.8);
  color: var(--text);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 50%;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover,
.lightbox-nav:hover { border-color: var(--gold); }
.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-nav { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }

/* ---------- Press / video ---------- */
.video-card {
  max-width: 760px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 0.9rem;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
  background: #000;
}
.video-card iframe,
.video-play {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-play {
  position: relative;
  padding: 0;
  background: #000;
  cursor: pointer;
}
.video-play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.15s ease; }
.video-play:hover img,
.video-play:focus-visible img { opacity: 0.85; }
.video-play:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: rgba(15, 33, 22, 0.85);
  border: 2px solid var(--gold);
  color: var(--gold-text);
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0.25rem;
}
.video-credit { text-align: center; color: var(--muted); font-size: 0.85rem; margin: 1rem auto 0; max-width: 760px; }
.video-credit a { color: var(--gold-text); }

/* ---------- Legal pages (terms) ---------- */
.legal { padding: 2.5rem 0 4rem; }
.legal .wrap { max-width: 760px; }
.legal h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 0.35rem; color: var(--gold-text); }
.legal h2 { font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; margin: 2rem 0 0.5rem; color: var(--gold-text); }
.legal p, .legal li { color: var(--text); line-height: 1.6; font-size: 0.98rem; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: 0.5rem; }
.legal a { color: var(--gold-text); }
.legal-updated { color: var(--muted); font-size: 0.88rem; margin: 0 0 1.5rem; }