/* ============================================================
   THE BIG GAME RIVALRY SHOOTOUT — Attendee Companion
   app.css — components and panels.

   Mobile first. Most attendees open this on a phone, on a golf
   course, in direct sunlight. Contrast and tap targets win over
   density every time.
   ============================================================ */

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
}

body.is-locked { overflow: hidden; height: 100vh; }

h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: var(--ink); text-decoration: none; }

/* No global a:hover colour. Every link in this app is a styled
   component (tile, button, row, nav item) that sets its own colour,
   and a bare `a:hover` at specificity (0,1,1) silently beat all of
   them, turning white labels near-black on dark backgrounds. Hover
   feedback belongs on the components themselves. */

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
}

/* Radius is zero everywhere. Circular status dots are the only
   exception and opt in explicitly. */
input, select, textarea, button, .card, .btn { border-radius: 0; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.on-dark :focus-visible,
.panel__hero :focus-visible,
.appheader :focus-visible,
.bottomnav :focus-visible,
.installsheet :focus-visible {
  outline-color: var(--maize);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.section { padding-top: 40px; padding-bottom: 40px; }
.section--bone  { background: var(--bone); }
.section--paper { background: var(--paper); }
.section--ink   { background: var(--ink); color: var(--white); }
.section--navy  { background: var(--navy); color: var(--white); }

/* ============================================================
   TYPE PRIMITIVES
   ============================================================ */
.display {
  font-family: var(--display);
  font-weight: 700;
  line-height: 0.92;
  text-transform: uppercase;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--scarlet);
}
.eyebrow::before {
  content: '';
  flex: 0 0 auto;
  width: 32px;
  height: 1.5px;
  background: currentColor;
}
.eyebrow--maize { color: var(--maize); }
.eyebrow--white { color: rgba(255, 255, 255, 0.85); }
.eyebrow--stone { color: var(--stone-500); }
.eyebrow--bare::before { display: none; }

.section-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--display-2);
  line-height: 0.9;
  text-transform: uppercase;
  margin: 14px 0 0;
}

.rule {
  width: 60px;
  height: 6px;
  margin: 18px 0 20px;
  background: var(--ink);
}
.rule--maize   { background: var(--maize); }
.rule--scarlet { background: var(--scarlet); }
.rule--navy    { background: var(--navy); }

.lede {
  font-size: var(--body-base);
  line-height: 1.6;
  color: var(--stone-700);
  max-width: 62ch;
}
.on-dark .lede { color: rgba(255, 255, 255, 0.78); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 14px 24px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  text-transform: uppercase;
  border: none;
  white-space: nowrap;
  transition: background var(--t-base), color var(--t-base), transform var(--t-fast);
}

.btn--primary    { background: var(--scarlet); color: var(--white); }
.btn--navy       { background: var(--navy);    color: var(--maize); }
.btn--maize      { background: var(--maize);   color: var(--ink); }
.btn--ghost      { background: transparent; color: var(--ink);   border: 1.5px solid var(--ink); }
.btn--ghost-light{ background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,0.5); }
.btn--block      { display: flex; width: 100%; }

@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn--primary:hover     { background: var(--scarlet-deep); }
  .btn--navy:hover        { background: var(--navy-deep); }
  .btn--maize:hover       { background: var(--maize-dim); }
  .btn--ghost:hover       { background: var(--ink); color: var(--paper); }
  .btn--ghost-light:hover { background: var(--white); color: var(--ink); }
}
.btn:active { transform: translateY(0); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--white);
  border: 1px solid var(--stone-200);
  padding: 20px;
}
.card--accent { border-left: 6px solid var(--navy); }
.card--accent-scarlet { border-left-color: var(--scarlet); }
.card--accent-maize   { border-left-color: var(--maize); }

@media (hover: hover) {
  a.card:hover, button.card:hover { border-color: var(--stone-300); }
}

/* ============================================================
   SPLASH INTRO
   Lifted from the 898 proposal template, restyled to brand.

   Black ground. The presented-by lockup is a white-background
   asset with no keyline, so its RIVALRY wordmark and the PRESENTED
   BY rule are both near black. The bone plate is what lets that
   lockup sit on a dark splash without losing half of itself, and
   it gives the B1G and Fox Sports marks a proper field.

   The date treatment mirrors the live site's homepage: a gold
   keyline around a deep red wash, white Bebas inside.
   ============================================================ */
#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 30px);
  padding: 24px;
  overflow: hidden;
  background: var(--ink);
  transition: transform 0.85s cubic-bezier(0.76, 0, 0.2, 1);
  will-change: transform;
}
#splash.is-done { transform: translateY(-106%); pointer-events: none; }

#splash .splash__lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0, transparent 60px,
    rgba(255, 255, 255, 0.045) 60px, rgba(255, 255, 255, 0.045) 61px
  );
}
#splash .splash__mark {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: min(52vw, 560px);
  line-height: 1;
  color: rgba(255, 255, 255, 0.05);
  white-space: nowrap;
  opacity: 0;
  animation: splashMark 1.4s ease 0.1s forwards;
}
#splash .splash__plate {
  position: relative;
  z-index: 2;
  padding: clamp(22px, 5vw, 34px) clamp(24px, 6vw, 40px);
  /* White, not bone: the lockup carries its own white field, and
     bone behind it reads as two nested rectangles. */
  background: var(--white);
  border-top: 6px solid var(--maize);
  opacity: 0;
  transform: scale(0.92) translateY(18px);
  animation: splashLogo 0.9s cubic-bezier(0.18, 0.72, 0.2, 1) 0.2s forwards;
}
#splash .splash__logo {
  width: min(56vw, 250px);
  height: auto;
}

/* Date bar, matching the live site's homepage treatment */
#splash .splash__dates {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 12px clamp(18px, 5vw, 32px);
  text-align: center;
  border: 2px solid var(--maize);
  background: linear-gradient(100deg, #2A0A12 0%, var(--scarlet-deep) 55%, #6E0A1E 100%);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 6.4vw, 34px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0;
  transform: translateY(14px);
  animation: splashKick 0.7s ease 0.8s forwards;
}
#splash .splash__venue {
  position: relative;
  z-index: 2;
  margin: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: clamp(10px, 2.6vw, 12px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gray-team);
  opacity: 0;
  transform: translateY(14px);
  animation: splashKick 0.7s ease 1s forwards;
}

@keyframes splashMark { to { opacity: 1; } }
@keyframes splashLogo { to { opacity: 1; transform: none; } }
@keyframes splashKick { to { opacity: 1; transform: none; } }

/* ============================================================
   APP HEADER
   ============================================================ */
.appheader {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--navy);
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: env(safe-area-inset-top, 0px);
}
.appheader__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  height: var(--header-h);
  padding: 0 var(--pad-x);
  display: flex;
  align-items: center;
  gap: 16px;
}
.appheader__home {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-left: -4px;
  padding: 0 4px;
}
.appheader__logo {
  /* The lockup carries a partner row, so it needs a little more
     height than the bare badge did to stay legible. */
  height: 60px;
  width: auto;
  display: block;
}
/* The readout is the value first, label second. Before the weekend
   that value is a day count, during it the actual time. */
.appheader__clock {
  margin-left: auto;
  text-align: right;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 7.5vw, 36px);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--maize);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.appheader__clock span {
  display: block;
  margin-bottom: 3px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.16em;
  color: var(--white);
}
.appheader__links { display: none; }

@media (min-width: 1024px) {
  .appheader__links {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: auto;
  }
  .appheader__link {
    font-family: var(--display);
  font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    padding: 8px 0;
    position: relative;
    transition: color var(--t-base);
  }
  .appheader__link:hover { color: var(--white); }
  .appheader__link.is-active { color: var(--white); }
  .appheader__link.is-active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--maize);
  }
  .appheader__clock { margin-left: 28px; }
}

/* ============================================================
   BOTTOM NAV — thumb driven, mobile and tablet
   ============================================================ */
.bottomnav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottomnav__inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: 620px;
  margin: 0 auto;
}
.bottomnav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: var(--nav-h);
  color: rgba(255, 255, 255, 0.55);
  border-top: 2px solid transparent;
  transition: color var(--t-base), border-color var(--t-base);
}
.bottomnav__item svg { width: 22px; height: 22px; }
.bottomnav__label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  line-height: 1;
}
.bottomnav__item.is-active {
  color: var(--maize);
  border-top-color: var(--maize);
}

@media (min-width: 1024px) {
  .bottomnav { display: none; }
  body { padding-bottom: 0; }
}

/* ============================================================
   PANELS
   ============================================================ */
.panel { display: none; }
.panel.is-active { display: block; animation: panelIn 200ms ease; }
@keyframes panelIn { from { opacity: 0; } to { opacity: 1; } }

.panel__hero {
  background: var(--ink);
  color: var(--white);
  padding: 40px var(--pad-x) 48px;
  border-bottom: 4px solid var(--maize);
}
.panel__hero--navy    { background: var(--navy); }
.panel__hero--scarlet { background: var(--scarlet); border-bottom-color: var(--ink); }
.panel__hero--ink     { background: var(--ink); }
.panel__hero-inner { max-width: var(--maxw); margin: 0 auto; }
.panel__crumb {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--maize);
  margin-bottom: 16px;
}
.panel__hero--scarlet .panel__crumb { color: var(--white); }
.panel__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--display-1);
  line-height: 0.85;
  text-transform: uppercase;
}
.panel__sub {
  margin-top: 18px;
  max-width: 52ch;
  font-size: var(--body-base);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}


/* ============================================================
   HERO

   Only present when there is no live event, so it never competes
   with HAPPENING NOW. The date bar repeats the splash treatment
   on purpose: gold keyline, deep red wash, white Bebas. Opening
   the app should feel like the same object twice.
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  padding: 34px var(--pad-x) 40px;
  background: var(--navy);
  color: var(--white);
  border-bottom: 4px solid var(--maize);
}
.hero--closing { background: var(--ink); }
.hero__inner { max-width: var(--maxw); margin: 0 auto; }

.hero__dates {
  display: inline-block;
  margin: 0 0 22px;
  padding: 9px 16px;
  border: 2px solid var(--maize);
  background: linear-gradient(100deg, #2A0A12 0%, var(--scarlet-deep) 55%, #6E0A1E 100%);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(18px, 5vw, 24px);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
}

.hero__eyebrow {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--maize);
}

.hero__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 11vw, 92px);
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--white);
}
.hero__accent { color: var(--maize); }

.hero__venue {
  margin: 18px 0 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
}
.hero__body {
  margin: 18px 0 0;
  max-width: 54ch;
  font-size: var(--body-base);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}
.hero__label {
  margin: 26px 0 10px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--maize);
}

@media (min-width: 768px) {
  .hero { padding: 56px var(--pad-x) 64px; }
  .hero .countdown { max-width: 520px; }
}

/* ============================================================
   NOW STRIP — the signature live element
   ============================================================ */
.nowstrip {
  padding: 26px var(--pad-x) 28px;
  color: var(--white);
  background: var(--navy);
  border-bottom: 4px solid var(--maize);
}
/* The live state goes maize on ink text rather than a team color.
   It is the loudest thing in the app on purpose: it is the one
   answer an attendee wants in direct sunlight, and gold on black
   is the highest contrast pairing in the whole palette. */
.nowstrip--live {
  background: var(--scarlet);
  color: var(--white);
  border-bottom-color: var(--ink);
}
.nowstrip--live .nowstrip__eyebrow { color: var(--white); }
.nowstrip__inner { max-width: var(--maxw); margin: 0 auto; }
.nowstrip__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
}
.nowstrip--pre .nowstrip__eyebrow,
.nowstrip--post .nowstrip__eyebrow { color: var(--maize); }
.nowdot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  animation: nowpulse 2s ease-in-out infinite;
}
@keyframes nowpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.nowstrip__title {
  margin-top: 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--display-4);
  line-height: 1;
  text-transform: uppercase;
}
.nowstrip__meta {
  margin-top: 8px;
  font-size: var(--body-sm);
  color: rgba(255, 255, 255, 0.85);
}

.countdown {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.countdown__unit {
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 6px;
  text-align: center;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.countdown__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 8vw, 44px);
  line-height: 1;
  color: var(--maize);
  font-variant-numeric: tabular-nums;
}
.countdown__label {
  margin-top: 7px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
}

/* ============================================================
   NEXT UP
   ============================================================ */
.nextup { display: grid; gap: 12px; margin-top: 16px; }
.nextup__card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-left: 6px solid var(--navy);
  padding: 16px 18px;
  color: var(--ink);
  transition: border-color var(--t-base);
}
.nextup__card--mon { border-left-color: var(--scarlet); }
.nextup__time {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--display-time);
  color: var(--navy);
}
.nextup__card--mon .nextup__time { color: var(--scarlet); }
.nextup__title {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}
.nextup__meta {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-500);
}

/* ============================================================
   QUICK TILES
   ============================================================ */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 16px;
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 1 / 1;
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
  transition: background var(--t-base);
}
.tile svg { width: 30px; height: 30px; color: var(--maize); }
.tile__label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
}
@media (hover: hover) {
  .tile:hover { background: var(--navy-deep); }
  .tile:hover .tile__label { color: var(--white); }
}
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .tiles { grid-template-columns: repeat(6, 1fr); } }

/* ============================================================
   TAB BAR — day tabs and team tabs
   ============================================================ */
.tabbar {
  position: sticky;
  top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  z-index: 50;
  display: grid;
  background: var(--ink);
}
.tabbar--2 { grid-template-columns: repeat(2, 1fr); }
.tab {
  min-height: 56px;
  padding: 8px 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  border-bottom: 3px solid transparent;
  transition: color var(--t-base), border-color var(--t-base);
}
.tab.is-active { color: var(--maize); border-bottom-color: var(--maize); }
.tab.is-active[data-team='scarlet'] { color: var(--white); border-bottom-color: var(--scarlet); }

/* ============================================================
   TIMELINE
   ============================================================ */
.dayhead {
  padding: 20px var(--pad-x);
  background: var(--navy);
  color: var(--white);
}
.dayhead--mon { background: var(--scarlet); }
.dayhead__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--maize);
}
.dayhead--mon .dayhead__eyebrow { color: var(--white); }
.dayhead__title {
  margin-top: 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  text-transform: uppercase;
}

.timeline { padding: 0 var(--pad-x); background: var(--paper); }
.tl {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--stone-200);
  transition: opacity var(--t-base);
}
.tl:last-child { border-bottom: none; }
.tl__time {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--display-time);
  line-height: 1.15;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.tl--mon .tl__time { color: var(--scarlet); }
.tl__title {
  font-size: var(--body-base);
  font-weight: 600;
  line-height: 1.35;
}
.tl__meta {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-500);
}
.tl__desc {
  margin-top: 8px;
  font-size: var(--body-xs);
  line-height: 1.6;
  color: var(--stone-700);
}
.tl.is-past { opacity: 0.45; }
.tl.is-past .tl__time { text-decoration: line-through; }
.tl.is-active {
  background: var(--white);
  margin-left: calc(var(--pad-x) * -1);
  margin-right: calc(var(--pad-x) * -1);
  padding-left: calc(var(--pad-x) - 2px);
  padding-right: var(--pad-x);
  border-left: 3px solid var(--scarlet);
}
.nowpill {
  display: inline-block;
  vertical-align: 2px;
  margin-left: 8px;
  padding: 4px 8px;
  background: var(--scarlet);
  color: var(--white);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .tl { grid-template-columns: 110px 1fr; gap: 24px; }
}

/* ============================================================
   RIVALRY SPLIT
   ============================================================ */
.rivalry { position: relative; background: var(--ink); }
.rivalry__grid { display: grid; grid-template-columns: 1fr; }
.rivalry__panel {
  position: relative;
  overflow: hidden;
  padding: 44px var(--pad-x);
  color: var(--white);
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}
/* The VS badge sits on the seam and bridges both panels, so each
   one keeps its content clear of the middle. Stacked on mobile
   that means vertical room, side by side it means horizontal. */
.rivalry__panel--blue    { background: var(--navy);    padding-bottom: 74px; }
.rivalry__panel--scarlet { background: var(--scarlet); padding-top: 74px; }
.rivalry__name {
  margin: 0 0 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--display-3);
  line-height: 0.9;
  text-transform: uppercase;
}
.rivalry__tagline {
  font-size: var(--body-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  max-width: 38ch;
}

.vsbadge {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 88px; height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  border: 2px solid var(--maize);
  font-family: var(--display);
  font-weight: 700;
  font-size: 36px;
  color: var(--maize);
}

@media (min-width: 768px) {
  .rivalry__grid { grid-template-columns: 1fr 1fr; }
  .rivalry__panel { min-height: 340px; }
  .rivalry__panel--blue    { padding: 60px 104px 60px 40px; }
  .rivalry__panel--scarlet { padding: 60px 40px 60px 104px; }
  .vsbadge { width: 120px; height: 120px; border-width: 3px; font-size: 56px; }
}

/* ============================================================
   ROSTER
   ============================================================ */
.roster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.roster__card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--stone-200);
  overflow: hidden;
}

.roster__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--stone-100);
}
.roster__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.roster__initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 12vw, 56px);
  line-height: 1;
}
.roster__card--scarlet .roster__initials { background: var(--scarlet); }

/* The name sits on a team-coloured band under the portrait, the
   way the live team pages set it. */
.roster__band {
  padding: 12px 10px 14px;
  text-align: center;
  background: var(--navy);
  color: var(--white);
}
.roster__card--scarlet .roster__band { background: var(--scarlet); }

.roster__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--white);
}
.roster__team {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.85);
}

@media (min-width: 640px) {
  .roster__name { font-size: 19px; }
  .roster__team { font-size: 12px; }
}

/* ============================================================
   ALSO FEATURING
   ============================================================ */
.featuring__head { text-align: center; margin-bottom: 26px; }
.featuring__eyebrow {
  display: block;
  color: var(--scarlet);
  margin-bottom: 12px;
}
.featuring__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 10vw, 64px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
}

.featuring {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--ink);
  border: 2px solid var(--maize);
}
.featuring__hero {
  padding: 26px 20px 28px;
  text-align: center;
  border-bottom: 2px solid var(--maize);
}
.featuring__label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-team);
}
.featuring__name {
  margin: 12px 0 18px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 8vw, 42px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
}
.featuring__photo {
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
}
.featuring__list { padding: 26px 20px 28px; text-align: center; }
.featuring__list ul { margin-top: 16px; }
.featuring__guest {
  padding: 12px 0;
  border-bottom: 1px solid rgba(249, 209, 71, 0.45);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 5.5vw, 26px);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--white);
  text-align: left;
}
.featuring__guest:last-child { border-bottom: none; }

@media (min-width: 768px) {
  .featuring { grid-template-columns: 1fr 1.15fr; }
  .featuring__hero { border-bottom: none; border-right: 2px solid var(--maize); }
  .featuring__hero, .featuring__list { padding: 34px 28px 38px; }
}

/* Host portrait */
.host { margin-bottom: 20px; }
.host__photo {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--stone-200);
  margin-bottom: 18px;
}
@media (min-width: 640px) {
  .host {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 28px;
    align-items: start;
  }
  .host__photo { margin-bottom: 0; }
}
@media (min-width: 640px)  { .roster { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .roster { grid-template-columns: repeat(5, 1fr); gap: 16px; } }

/* ============================================================
   CHARITY BAND
   ============================================================ */
.charity {
  position: relative;
  overflow: hidden;
  padding: 40px var(--pad-x);
  color: var(--white);
  background: var(--navy);
}
.charity--scarlet { background: var(--scarlet); }
.charity__logo {
  background: var(--white);
  padding: 20px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
}
.charity__logo img { max-height: 90px; width: auto; object-fit: contain; }
.charity__name {
  margin: 12px 0 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(36px, 9vw, 88px);
  line-height: 0.9;
  text-transform: uppercase;
}
.charity__body {
  font-size: var(--body-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 56ch;
}
@media (min-width: 768px) {
  .charity__grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 40px;
    align-items: center;
  }
  .charity__logo { margin-bottom: 0; }
}

/* ============================================================
   LINK ROWS — hotels, airports, secondary routes
   ============================================================ */
.rows { border-top: 1px solid var(--stone-200); }
.row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 16px 0;
  text-align: left;
  color: var(--ink);
  border-bottom: 1px solid var(--stone-200);
}
.row__icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: var(--maize);
}
.row__icon svg { width: 20px; height: 20px; }
.row__body { flex: 1 1 auto; min-width: 0; }
.row__title {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  text-transform: uppercase;
}
.row__sub {
  display: block;
  margin-top: 5px;
  font-size: var(--caption);
  line-height: 1.45;
  color: var(--stone-500);
}
.row__chev { flex: 0 0 auto; color: var(--stone-300); }
.row__chev svg { width: 18px; height: 18px; }

/* ============================================================
   HOTELS
   ============================================================ */
.hotel {
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-top: 6px solid var(--scarlet);
  padding: 20px;
  margin-bottom: 16px;
}
.hotel__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--display-5);
  line-height: 1;
  text-transform: uppercase;
}
.hotel__addr {
  margin-top: 10px;
  font-size: var(--body-sm);
  line-height: 1.55;
  color: var(--stone-700);
}
.hotel__meta {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--stone-200);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-500);
}
.hotel__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

/* ============================================================
   AIRPORTS
   ============================================================ */
.airport {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--stone-200);
}
.airport__body { flex: 1 1 160px; min-width: 0; }
.airport__go {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 18px;
  font-size: 16px;
}
.airport__code {
  flex: 0 0 auto;
  width: 62px;
  padding: 10px 0;
  text-align: center;
  background: var(--navy);
  color: var(--maize);
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
}
.airport__name {
  font-size: var(--body-sm);
  font-weight: 600;
  line-height: 1.35;
}
.airport__drive {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-500);
}

/* ============================================================
   SPONSORS
   ============================================================ */
.sponsors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.sponsor {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--stone-200);
}
.sponsor img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}
@media (min-width: 640px)  { .sponsors { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .sponsors { grid-template-columns: repeat(4, 1fr); gap: 16px; } }

/* ============================================================
   ACCORDION
   ============================================================ */
.accordion { max-width: 900px; }
.acc { border-bottom: 1px solid var(--stone-200); }
.acc__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 60px;
  padding: 18px 0;
  text-align: left;
  color: var(--ink);
}
.acc__q {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.05;
  text-transform: uppercase;
}
.acc__plus {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  position: relative;
  color: var(--maize);
  transition: transform var(--t-slow);
}
.acc__plus::before, .acc__plus::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.acc__plus::before { width: 20px; height: 2.5px; }
.acc__plus::after  { width: 2.5px; height: 20px; }
.acc.is-open .acc__plus { transform: rotate(45deg); }
.acc__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-slow);
}
.acc__body {
  padding: 0 0 22px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--stone-700);
  max-width: 62ch;
}
.acc__plus { color: var(--scarlet); }

.needs-content {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 8px;
  background: var(--stone-100);
  border: 1px dashed var(--stone-300);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-500);
}

/* ============================================================
   CONTACT CARD
   ============================================================ */
.concierge {
  position: relative;
  overflow: hidden;
  padding: 32px var(--pad-x) 36px;
  background: var(--ink);
  color: var(--white);
}
.concierge__title {
  margin: 12px 0 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  text-transform: uppercase;
}
.concierge__body {
  font-size: var(--body-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  max-width: 52ch;
}
.concierge .btn { margin-top: 12px; }

/* ============================================================
   COURSE MAP
   ============================================================ */
.mapframe {
  position: relative;
  min-height: 55vh;
  background: var(--ink);
}
.mapframe .fpo { position: absolute; inset: 0; border: none; }
.mappin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  border: 2px solid var(--maize);
  color: var(--maize);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
}
.mappin.is-active { background: var(--scarlet); border-color: var(--white); color: var(--white); }

.legend {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 24px var(--pad-x);
  background: var(--bone);
}
.legend__item { display: flex; align-items: flex-start; gap: 10px; }
.legend__swatch { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; }
.legend__label {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  line-height: 1.1;
}
.legend__sub {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-500);
}

/* ============================================================
   HOSPITALITY TENT
   ============================================================ */
.tent {
  margin-bottom: 16px;
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
}
.tent__media { aspect-ratio: 4 / 3; }
.tent__body { position: relative; padding: 24px var(--pad-x) 28px; }
.tent__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--maize);
}
.tent__name {
  margin: 12px 0 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--display-5);
  line-height: 1;
  text-transform: uppercase;
}
.tent__desc {
  font-size: var(--body-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}
.tent__meta {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-team);
}

.empty {
  padding: 40px 20px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-500);
}

/* ============================================================
   VENUE CARD
   ============================================================ */
.venue {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
}
.venue__media { aspect-ratio: 16 / 9; }
.venue__media img { width: 100%; height: 100%; object-fit: cover; }
.venue__body { position: relative; padding: 28px var(--pad-x) 32px; }
.venue__name {
  margin: 12px 0 6px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  text-transform: uppercase;
}
.venue__addr {
  font-size: var(--body-xs);
  line-height: 1.6;
  color: var(--gray-team);
}
.venue__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 20px;
}
@media (min-width: 480px) { .venue__actions { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   INSTALL SHEET — Add to Home Screen
   ============================================================ */
.installsheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: var(--ink);
  color: var(--white);
  border-top: 4px solid var(--maize);
  padding: 22px var(--pad-x) calc(22px + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%);
  transition: transform 340ms cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.35);
}
.installsheet.is-open { transform: translateY(0); }
.installsheet__inner { max-width: 620px; margin: 0 auto; position: relative; }
.installsheet__close {
  position: absolute;
  top: -6px; right: -6px;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
}
.installsheet__close svg { width: 18px; height: 18px; }
.installsheet__eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--maize);
}
.installsheet__title {
  margin: 10px 0 8px;
  padding-right: 44px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.02;
  text-transform: uppercase;
}
.installsheet__body {
  font-size: var(--body-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}
.installsheet__steps {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--body-sm);
  line-height: 1.5;
}
.installsheet__steps svg {
  width: 20px; height: 20px;
  flex: 0 0 auto;
  color: var(--maize);
}
.installsheet .btn { margin-top: 16px; }

/* ============================================================
   FOOTER
   ============================================================ */
.appfooter {
  padding: 36px var(--pad-x) 44px;
  background: var(--ink);
  color: var(--white);
  text-align: center;
}
.appfooter__logo {
  width: auto;
  height: 132px;
  margin: 0 auto 20px;
}
.appfooter__addr {
  margin: 0 0 14px;
  font-size: var(--body-sm);
  line-height: 1.6;
  color: var(--white);
}
.appfooter__email {
  display: inline-block;
  padding: 10px 4px;
  font-size: var(--body-sm);
  color: var(--maize);
}
@media (hover: hover) {
  .appfooter__email:hover { color: var(--maize-dim); }
}


/* ============================================================
   DESKTOP REFINEMENT

   The app is mobile first because that is where attendees use it,
   but desktop is not gated. The client, the sponsors, and anyone
   sitting in the clubhouse or a hotel room with a laptop will open
   it there, and a "please use your phone" wall would be a worse
   experience than simply laying it out properly.

   The work here is restraint: stop reading-width content from
   stretching to 1440px, and let the card grids use the room.
   ============================================================ */
@media (min-width: 1024px) {
  /* Timelines and prose read badly at full width. Cap the measure. */
  .timeline,
  .nextup,
  .accordion,
  .airport-list { max-width: 860px; }

  .timeline { padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; }
  .tl.is-active { margin-left: -20px; margin-right: -20px; padding-left: 18px; padding-right: 20px; }

  /* Section copy should not run the full container either. */
  .lede { max-width: 68ch; }
  .panel__sub { max-width: 56ch; }

  /* Card grids get the room instead. */
  .hotel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
  }
  .hotel { margin-bottom: 0; }

  .nowstrip__inner,
  .concierge__inner { max-width: var(--maxw); }

  .appfooter__logo { height: 150px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hotel-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: start;
  }
  .hotel { margin-bottom: 0; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  #splash .splash__plate,
  #splash .splash__dates,
  #splash .splash__venue,
  #splash .splash__mark { opacity: 1; transform: none; }
  .nowdot { animation: none; }
  .btn:hover { transform: none; }
}