/* ===== Reset & base ===== */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial,"Noto Sans";color:#fff;background:#000;line-height:1.5}
img{max-width:100%;display:block;height:auto}

/* ===== Design tokens ===== */
:root{
  --gold:#CC9900; /* Prairie Gold */
  --panel: rgba(0,0,0,.55);
  --border: rgba(255,255,255,.12);
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --radius: 18px;
  --wrap: 1120px;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:env(safe-area-inset-top,16px) 20px env(safe-area-inset-bottom,16px)}

/* ===== Header ===== */
header{position:sticky;top:0;backdrop-filter:saturate(140%) blur(8px);background:rgba(0,0,0,.45);border-bottom:1px solid var(--border);z-index:10}
.topbar{display:flex;align-items:center;justify-content:center;padding:14px 12px}
.brand{margin:0;text-align:center}
.brand .title{font-size:clamp(28px,6vw,56px);font-weight:800;letter-spacing:.5px;color:var(--gold);text-shadow:0 2px 14px rgba(0,0,0,.9)}
.brand .def{margin-top:6px;font-size:clamp(14px,2.6vw,18px);opacity:.95}
.abbr{font-weight:800;color:var(--gold);border-bottom:1px dotted var(--gold)}

/* Tap-friendly tooltip using <details> for mobile */
details.tip{display:inline}
details.tip > summary{display:inline;list-style:none;cursor:help}
details.tip[open] > summary{outline:none}
details.tip .bubble{display:inline-block;vertical-align:top;background:#222;color:var(--gold);border:1px solid var(--border);border-radius:10px;padding:8px 10px;margin-left:8px;box-shadow:var(--shadow)}

/* ===== Main hero/tagline ===== */
.hero{min-height:48vh;display:grid;place-items:center;text-align:center}
.tag{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 22px;margin-top:6vh}
.tag .intro{font-size:clamp(16px,3.5vw,22px)}
.tag .loud{margin-top:6px;font-size:clamp(22px,6.5vw,36px);font-weight:900;color:var(--gold);text-transform:uppercase;text-shadow:0 2px 18px rgba(0,0,0,.8)}

/* ===== Inline hero media ===== */
.hero-media{margin:16px auto 24px;max-width:980px}
.hero-media img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow)}
@media(min-width:900px){.hero-media{margin:18px auto 32px}}

/* ===== Footer info blocks ===== */
.footgrid{display:grid;gap:16px;margin-top:6vh}
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow);text-align:center}
.sponsor a{color:var(--gold);text-decoration:none}
.sponsor a:hover{text-decoration:underline}
.company{font-weight:800;color:var(--gold);font-size:clamp(18px,3.6vw,24px)}

@media(min-width:720px){
  .footgrid{grid-template-columns:1fr 1fr;align-items:stretch}
  .card{text-align:left}
}

footer{margin:18px 0 10px;text-align:center;color:rgba(255,255,255,.85)}

/* Print: remove heavy effects */
@media print{header{display:none!important} body{color:#000} a{color:#00f}}

/* === Desktop only (≥1024px): align footer cards to hero edges === */
@media (min-width: 1024px) {
  /* 1) Set the same "rails" width as your big puck image */
  .footgrid {
    max-width: 1120px;   /* ← adjust until both sides align with your red rails */
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  /* 2) Left card (Proud Sponsor) hugs the LEFT rail */
  .footgrid .sponsor {
    justify-self: start !important;
    text-align: left !important;
    margin: 0 !important;
    padding-left: 175px;   /* ↑ increase until "P" touches the rail */
  }

  /* 3) Right card (Contact/Info) hugs the RIGHT rail */
  .footgrid .contact {
    justify-self: end !important;
    text-align: right !important;   /* keeps email flush to right edge */
    margin: 0 !important;
    padding-right: 188px;  /* ↑ increase until "s" in Systems hugs rail */
  }

  /* 4) Center ONLY the last two lines inside the right card */
  .footgrid .contact > div:nth-child(2),
  .footgrid .contact > div:nth-child(3) {
    text-align: center !important;
  }
}

/* === Remove visible frame lines (cards & image wrapper) === */
@media (min-width: 1024px) {
  /* Remove card frames on desktop */
  .card {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background-clip: padding-box; /* keeps rounded corners clean if used */
  }

  /* Remove frame around hero image and wrappers */
  .hero,
  .media,
  .banner,
  .spotlight,
  .puck-frame {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }
}

/* === Match hero and footer to the same rails === */
@media (min-width: 1024px) {
  .hero-media img {
    display: block;
    max-width: 1120px;   /* same as .footgrid */
    width: 100%;
    margin: 0 auto;      /* centers the image within the rails */
  }
}

/* === Also remove any frame on the figure wrapper used by the hero image === */
@media (min-width: 1024px) {
  .hero-media {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }
}

/* === Global seam reset (desktop) ===
   Nukes hairline borders/outlines/shadows and normalizes backgrounds
   across common wrappers so no faint frames appear. */
@media (min-width: 1024px) {
  body,
  header,
  main,
  section,
  .wrap,
  .brand,
  .title,
  .def,
  .slogan,
  .banner,
  .spotlight,
  .hero,
  .hero-media,
  .hero-media img,
  figure,
  .footgrid,
  .card,
  .sponsor,
  .contact {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    filter: none !important;          /* kills drop-shadow on images if any */
    background-image: none !important;
    background-color: #000 !important;/* unify background so no shade seams */
  }

  /* Headlines sometimes carry text-shadows that look like borders */
  h1, h2, h3, h4, h5, h6 {
    text-shadow: none !important;
  }

  /* Hide any hr separators on desktop */
  hr {
    display: none !important;
  }

  /* Ensure hero image is on the same rails and truly edge-clean */
  .hero-media img {
    display: block;
    max-width: 1120px;
    width: 100%;
    margin: 0 auto;
  }
}

/* === Tagline seam killer (desktop) === */
@media (min-width: 1024px) {
  .intro,
  .loud {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
    border-radius: 0 !important;
    filter: none !important;
  }
}

/* === Tagline wrapper cleanup (desktop) — kill the rounded panel === */
@media (min-width: 1024px) {
  .tag {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    background-image: none !important;
    border-radius: 0 !important;
    filter: none !important;
  }
}