/* ==========================================================================
   FULL PULL PRODUCTIONS / USA EAST
   --------------------------------------------------------------------------
   Reference: formulad.com. Studied directly rather than approximated.

   What that site actually does, measured from its computed styles:
     - Bebas Neue for display, with the italic as the signature; Barlow
       Condensed for everything else. Uppercase throughout.
     - Black ground, white type, one red (#e81f22, #a21214 on buttons).
       Body copy is #f8fafc, greys come off the Tailwind gray scale.
     - Square buttons set in Bebas at 18px with top-heavy padding, because
       Bebas sits high in its em box.
     - Row rules at rgba(255,255,255,0.1). Panels a shade off black.
     - Photo-backed italic title bands. Slash separators in metadata lines.
     - Small series tag pills. Here that becomes red for points events and
       blue for non-points and co-sanctioned, which also keeps the palette in
       the IHRA / Pro Pulling family the client now belongs to.

   Not to be confused with the earlier graphite-and-amber pass: this is black,
   not slate; Bebas italic, not Inter; and it leans on photography and big
   type rather than hairline minimalism.

   Colour is defined once here. config/brand.js mirrors it for JS.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  /* Ground */
  --black:   #0a0a0b;
  --panel:   #141214;   /* FD uses #120c0d; slightly cooler here */
  --panel-2: #1b191b;
  --panel-3: #232023;

  /* Type colour */
  --white:   #ffffff;
  --body:    #f8fafc;
  --grey-1:  #d1d5db;
  --grey-2:  #9ca3af;
  --grey-3:  #6b7280;
  --grey-4:  #4b5563;

  /* Rules */
  --rule:    rgba(255,255,255,0.10);
  --rule-2:  rgba(255,255,255,0.20);

  /* Accents */
  --red:      #e81f22;
  --red-dark: #a21214;
  --red-tint: rgba(232,31,34,0.14);
  --blue:     #1e5bc6;   /* IHRA / PPL family; used for tags and links only */
  --blue-dark:#153f8a;
  --green:    #1b9155;   /* full pull */
  --gold:     #d4a017;   /* class winner */

  /* Type */
  --f-display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --f-cond:    "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-text:    "Barlow", "Helvetica Neue", Arial, sans-serif;

  /* Measure */
  --gut:  24px;
  --maxw: 1200px;

  /* ---- Compatibility aliases -------------------------------------------
     Page-level <style> blocks were remapped in two earlier passes and name
     tokens from both. An undefined custom property invalidates the whole
     declaration at computed-value time, so every historical name is mapped
     here onto its role in this system. Role, not hue: "ink" meant text and
     "paper" meant ground, so they map to white and black respectively. */
  --bg:           var(--black);
  --surface:      var(--panel);
  --surface-2:    var(--panel-2);
  --surface-3:    var(--panel-3);
  --line:         var(--rule);
  --line-soft:    var(--rule);
  --text:         var(--body);
  --text-dim:     var(--grey-1);
  --text-mute:    var(--grey-2);
  --amber:        var(--red);
  --amber-dk:     var(--red-dark);
  --amber-soft:   var(--red-tint);
  --amber-line:   var(--red);
  --live:         var(--green);
  --live-soft:    rgba(27,145,85,0.16);
  --danger:       var(--red);
  --danger-soft:  var(--red-tint);
  --steel:        var(--grey-2);
  --red-dark:     var(--red-dark);
  --gray-100:     var(--panel-2);
  --gray-200:     var(--panel-3);
  --gray-300:     var(--rule-2);
  --gray-600:     var(--grey-2);
  --gray-800:     var(--grey-1);
  --dark:         var(--black);
  --paper:        var(--white);
  --paper-2:      var(--panel-2);
  --paper-3:      var(--panel-3);
  --ink:          var(--body);
  --ink-2:        var(--grey-1);
  --ink-3:        var(--grey-2);
  --ink-4:        var(--grey-3);
  --rule-soft:    var(--rule);
  --rule-hard:    var(--rule-2);
  --spot:         var(--red);
  --spot-dark:    var(--red-dark);
  --spot-tint:    var(--red-tint);
  --pine:         var(--green);
  --pine-tint:    rgba(27,145,85,0.16);
  --brass:        var(--gold);
  --brass-tint:   rgba(212,160,23,0.16);
  --f-head:       var(--f-display);
  --f-body:       var(--f-cond);
  --f-data:       var(--f-display);
  --f-num:        var(--f-display);
  --font-heading: var(--f-display);
  --font-primary: var(--f-cond);
  --r:            0;
  --shadow:       none;
  --shadow-lg:    none;
}

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

body {
  margin: 0;
  background: var(--black);
  color: var(--body);
  font-family: var(--f-cond);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--white); text-decoration: none; }
a:hover { color: var(--red); }

img { max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;                 /* Bebas ships one weight; never synthesise bold */
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 0.35em;
}

/* Longer prose (privacy, explainers) gets the wider face for readability. */
.policy-wrap p, .policy-wrap li, .points-explainer-body, .checkout-hint,
.pending-note, .mobile-tip { font-family: var(--f-text); font-size: 15px; line-height: 1.6; }

/* Figures: Bebas is naturally tabular and lines up in columns. */
.results-table td, .draw-table td, .history-table td, .results-overall-table td,
.distance-cell, .position-cell, .draw-num, .speed-cell,
.stat-val, .cs-val, .ssm-val, .ucd-day,
.col-dist, .col-total, .col-pos, .col-rank, .ht-dist, .rt-dist,
.order-total-amount {
  font-family: var(--f-display);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Small uppercase label. FD sets these in Barlow Condensed, grey, tracked. */
.section-label, .upcoming_events_label, .pill-label, .stat-lbl, .cs-lbl,
.ssm-lbl, .card-meta, .results-spotlight-badge, .masthead-kicker {
  font-family: var(--f-cond);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-2);
}

/* Metadata lines separated by slashes, FD's signature. */
.meta-line, .results-spotlight-meta, .event_place_address_span,
.masthead-meta, .pg-subtitle, .event-hero-meta, .upcoming-card-loc {
  font-family: var(--f-cond);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-2);
}

.pg-wrap, .policy-wrap, .front_events_section {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
}
.marketing { flex: 1 0 auto; }
.before_footer { display: none; }

/* ==========================================================================
   NAV
   Black bar, Bebas nav items, white pill for the single call to action.
   ========================================================================== */
.site-header {
  background: var(--black);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 60;
}
.top-bar {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
  height: 80px;   /* the Pull-Off badge is nearly square; it needs more height than a wordmark */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.top-bar-left  { display: flex; align-items: center; gap: 14px; min-width: 0; }
.top-bar-right { display: flex; align-items: center; gap: 18px; }

/* Wordmark: white, with the last word knocked out in a red block, the way
   FD sets FORMULA + [DRIFT]. Done in CSS so it survives without artwork. */
.site-desktop-title {
  font-family: var(--f-display);
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
}
.site-desktop-title a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.site-desktop-title a:hover { color: var(--white); }
.site-desktop-title .wm-block {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  padding: 3px 7px 1px;
  font-style: italic;
}

.logo-banner img, .logo-banner-img { height: 40px; width: auto; display: block; }
/* The client mark sits in the bar in place of a text wordmark */
.site-brand { display: block; line-height: 0; }
.site-brand img { height: 66px; width: auto; display: block; }

.desktop-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.desktop-menu > li > a {
  display: block;
  padding: 8px 11px 5px;
  font-family: var(--f-display);
  font-size: 19px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
}
.desktop-menu > li > a:hover { color: var(--red); }
.desktop-menu > li > a.activePage,
.desktop-menu > li > a.active { color: var(--red); box-shadow: inset 0 -3px 0 var(--red); }

/* Live flag doubles as the nav's white pill CTA when an event is running. */
.nav-live-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 4px;
  background: var(--white);
  color: var(--black);
  font-family: var(--f-display);
  font-size: 17px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}
.nav-live-chip:hover { background: var(--red); color: var(--white); }
.nav-live-blink, .live-alert-dot, .event-live-chip-dot {
  width: 8px; height: 8px;
  background: var(--red);
  border-radius: 50%;
  animation: fp-blink 1.2s ease-in-out infinite;
}
@keyframes fp-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) {
  .nav-live-blink, .live-alert-dot, .event-live-chip-dot { animation: none; }
}

/* Red announcement strip, sitting under the nav like FD's. */
.live-alert-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 9px var(--gut);
  background: var(--red);
  color: var(--white);
}
.live-alert-label {
  font-family: var(--f-cond);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.live-alert-btn {
  padding: 6px 14px 3px;
  background: var(--white);
  color: var(--black) !important;
  font-family: var(--f-display);
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}
.live-alert-btn:hover { background: var(--black); color: var(--white) !important; }

/* ==========================================================================
   TITLE BANDS
   FD backs these with a dimmed photo. Without artwork the band uses a dark
   diagonal wash so the italic title still has something to sit on.
   ========================================================================== */
.front-hero, .members-hero, .detail-hero, .signup-hero, .event-hero {
  position: relative;
  background:
    linear-gradient(100deg, var(--black) 0%, #1a1719 45%, var(--black) 100%);
  border-bottom: 1px solid var(--rule);
  padding: 44px 0 36px;
  text-align: left;
}
.front-hero::after, .members-hero::after, .detail-hero::after,
.signup-hero::after, .event-hero::after {
  /* thin red keyline at the bottom edge */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--red);
}
.front-hero > *, .members-hero > *, .detail-hero > *,
.signup-hero > *, .event-hero > * {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}
.index-hero-logo-img, .members-hero-logo, .detail-hero-logo,
.signup-hero-logo, .event-hero-logo {
  height: 96px;
  width: auto;
  margin: 0 0 16px;
  display: block;
}
.members-hero-title, .signup-hero-title, .pg-title,
.members-page-title, .event-hero-name, .masthead-title {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(44px, 7.5vw, 88px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 10px;
}
.masthead-kicker { margin-bottom: 8px; color: var(--grey-2); }
.masthead-meta { color: var(--grey-1); }
.masthead-div { color: var(--red); margin: 0 9px; }

/* ==========================================================================
   SECTION HEADS
   ========================================================================== */
.front_events_section { padding-top: 34px; padding-bottom: 48px; }

.section_title, .section_title_red {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0 0 8px;
  margin: 34px 0 16px;
  border-bottom: 1px solid var(--rule-2);
  background: none;
  color: var(--white);
  font-family: var(--f-display);
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.section_title::before, .section_title_red::before {
  content: "";
  width: 6px; height: 22px;
  background: var(--red);
  transform: skewX(-12deg);
  align-self: center;
}

.upcoming_events_section_body { margin-bottom: 30px; }
.upcoming_events_label { display: block; margin: 14px 0 8px; }
.events-label-today { color: var(--red); }
.events-label-past  { color: var(--grey-3); }

/* ==========================================================================
   EVENT LIST
   FD's dark events panel: bold location, small date, red button right.
   ========================================================================== */
.upcoming_events_table_wrapper, .results-table-wrap { overflow-x: auto; }

.upcoming_events_table, .results-table, .draw-table,
.history-table, .results-overall-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
}

.upcoming_events_table th, .results-table th, .draw-table th,
.history-table th, .results-overall-table th {
  background: var(--panel-2);
  color: var(--grey-2);
  font-family: var(--f-cond);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule-2);
  white-space: nowrap;
}

.upcoming_events_table td, .results-table td, .draw-table td,
.history-table td, .results-overall-table td {
  padding: 16px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.upcoming_events_table tbody tr:hover,
.results-table tbody tr:hover,
.results-overall-table tbody tr:hover { background: var(--panel-2); }

.events-today-section .upcoming_events_table tbody tr,
.upcoming_events_table tbody tr.locked { box-shadow: inset 4px 0 0 var(--red); }

.event_date_td {
  width: 88px;
  font-family: var(--f-display);
  font-size: 17px;
  line-height: 1.05;
  letter-spacing: 0.03em;
  color: var(--grey-1);
  white-space: nowrap;
}
.event_place_span {
  display: block;
  font-family: var(--f-display);
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--white);
}
.event_place_address_span { display: block; margin-top: 4px; font-size: 14px; }
.event_place_address_span::before { content: "/ "; color: var(--red); }
.event_status_td { text-align: right; white-space: nowrap; }

/* Series / status tags, FD's PRO and PROSPEC pills */
.live-badge, .tag, .tag-points, .tag-nonpoints, .upcoming-badge,
.card-class-pill, .profile-class-pill, .night-tag,
.card-member-badge, .profile-member-badge {
  display: inline-block;
  padding: 3px 8px 1px;
  border-radius: 2px;
  background: var(--red);
  color: var(--white);
  font-family: var(--f-display);
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.1;
}
.tag-nonpoints, .card-class-pill, .profile-class-pill, .night-tag { background: var(--blue); }
.card-member-badge, .profile-member-badge { background: var(--gold); color: var(--black); }
.live-badge { display: inline-flex; align-items: center; gap: 6px; }
.live-badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--white);
  animation: fp-blink 1.2s ease-in-out infinite;
}

/* Cards */
.upcoming-event-card, .event-card, .member-card, .profile-card, .card-inner {
  background: var(--panel);
  border: 1px solid var(--rule);
  padding: 18px;
}
.upcoming-event-card:hover, .event-card:hover, .member-card:hover {
  border-color: var(--rule-2);
  background: var(--panel-2);
}
.upcoming-card-date-badge {
  display: inline-block;
  min-width: 58px;
  padding: 6px 8px 4px;
  background: var(--white);
  color: var(--black);
  text-align: center;
}
.ucd-day { display: block; font-size: 30px; line-height: 0.95; }
.ucd-mon { display: block; font-family: var(--f-cond); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.ucd-yr  { display: block; font-family: var(--f-cond); font-size: 11px; letter-spacing: 0.1em; color: var(--grey-3); }
.ucd-tbd { display: block; font-family: var(--f-cond); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

.upcoming-card-top { display: flex; align-items: flex-start; gap: 16px; }
.upcoming-card-main { flex: 1; min-width: 0; }
.upcoming-card-name {
  font-family: var(--f-display);
  font-size: 28px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
}
.upcoming-card-loc { margin-top: 4px; }
.upcoming-card-loc::before { content: "/ "; color: var(--red); }
.upcoming-card-status { margin-left: auto; flex-shrink: 0; }
.upcoming-card-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.upcoming-card-times, .upcoming-detail-chip {
  font-family: var(--f-cond);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grey-1);
}
.upcoming-card-admission { margin-top: 10px; }
.upcoming-admission-tier {
  display: inline-block;
  margin: 0 18px 4px 0;
  font-family: var(--f-cond);
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.upcoming-tier-label { color: var(--grey-2); }
.upcoming-tier-price { color: var(--white); font-weight: 700; }
.upcoming-directions-link {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--f-display);
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red);
}

/* ==========================================================================
   FEATURE BLOCK  (latest result / "UP NEXT")
   ========================================================================== */
/* One card design for every past event: stacked date badge on the left, the
   italic name and venue in the middle, the red action on the right. The
   first card (latest results) keeps its red edge and tag; the rest sit a
   touch quieter so the newest night still reads first. */
.results-list {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px var(--gut) 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.results-spotlight {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 22px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--rule-2);
  padding: 16px 22px 16px 18px;
  margin: 0;
  cursor: pointer;
}
.results-spotlight.is-latest { border-left-color: var(--red); }
.results-spotlight:hover { background: var(--panel-2); border-left-color: var(--red); }
.results-list .results-spotlight-name { font-size: 30px; }
.results-list .is-latest .results-spotlight-name { font-size: 40px; }
.results-list .results-spotlight-meta::before { content: "/ "; color: var(--red); }

.rs-date {
  min-width: 62px;
  padding: 7px 8px 5px;
  background: var(--white);
  color: var(--black);
  text-align: center;
  clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
}
.rs-date .ucd-day { display: block; font-family: var(--f-display); font-size: 30px; line-height: 0.95; }
.rs-date .ucd-mon { display: block; font-family: var(--f-cond); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.rs-date .ucd-yr  { display: block; font-family: var(--f-cond); font-size: 11px; letter-spacing: 0.1em; color: var(--grey-3); }
.results-spotlight .live-badge { justify-self: end; }
.results-spotlight-badge { align-self: start; color: var(--grey-2); }
.results-spotlight-name {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 40px;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--white);
  margin: 4px 0 6px;
}
.results-spotlight-sep { color: var(--red); margin: 0 8px; }

/* ==========================================================================
   RESULTS
   ========================================================================== */
.results-table tbody tr:nth-child(even),
.results-overall-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }

.position-cell, .col-pos, .col-rank {
  font-size: 26px;
  color: var(--white);
  width: 52px;
}
.results-table tbody tr:first-child .position-cell { color: var(--red); }

.distance-cell, .col-dist { font-size: 24px; color: var(--white); }
.dist-full-pull { color: var(--green); }
.dist-full-pull::after {
  content: " FP";
  font-family: var(--f-cond);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.dist-dropped { color: var(--grey-2); }
.dist-dq      { color: var(--red); }
.dist-broke   { color: var(--gold); }
.dist-empty, .dist-awaiting { color: var(--grey-3); }
.draw-num, .draw-num-cell { color: var(--grey-2); }

.result_class_block { margin: 28px 0; }
.result_class_title {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 16px 7px;
  background: var(--panel-2);
  border-top: 3px solid var(--red);
  color: var(--white);
  font-family: var(--f-display);
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.result_class_content { padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* A wide results table scrolls inside its block; the page itself never scrolls sideways
   (on phones that dragged the header and hero off to the left). */
.event_results_section, .event_results, .result_class_block { min-width: 0; }
.event_results_section { width: 100%; }   /* body is a column flexbox and margin:auto would size this to its content */
.event_results_section { overflow: hidden; }
html, body { overflow-x: hidden; }
.round-block { margin-bottom: 22px; }

.round-tab-nav-link {
  display: inline-block;
  padding: 9px 16px 6px;
  font-family: var(--f-display);
  font-size: 17px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grey-2);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.round-tab-nav-link:hover { color: var(--white); }
.round-tab-nav-link.active { color: var(--white); border-bottom-color: var(--red); }
.round-tab-overall { margin-left: auto; }
.round-tab-overall.active { border-bottom-color: var(--gold); }

/* ==========================================================================
   BUTTONS
   FD: Bebas 18px, padding 8px 16px 4px, no radius, red.
   ========================================================================== */
.btn, .btn-primary, .btn-solid, .btn-red, .btn-outline,
.btn-results, .checkout-btn, .results-spotlight-btn, .add-entry-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px 6px;
  border: 1px solid var(--rule-2);
  background: transparent;
  color: var(--white);
  font-family: var(--f-display);
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s linear, color 0.12s linear, border-color 0.12s linear;
}
.btn:hover, .btn-outline:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.btn-primary, .btn-solid, .btn-red, .btn-results,
.checkout-btn, .results-spotlight-btn, .add-entry-btn {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}
.btn-primary:hover, .btn-solid:hover, .btn-red:hover, .btn-results:hover,
.checkout-btn:hover, .results-spotlight-btn:hover, .add-entry-btn:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
  color: var(--white);
}
.btn-sm { padding: 6px 12px 4px; font-size: 16px; }
.btn:disabled, .checkout-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ==========================================================================
   STATS
   ========================================================================== */
.stat-chip, .cs-chip, .ssm-chip {
  display: inline-block;
  padding: 0 20px 0 0;
  margin-right: 6px;
  border-right: 1px solid var(--rule-2);
}
.stat-chip:last-child, .cs-chip:last-child, .ssm-chip:last-child { border-right: none; }
.stat-val, .cs-val, .ssm-val {
  display: block;
  font-size: 34px;
  line-height: 1;
  color: var(--white);
}

/* ==========================================================================
   CLASS NAV
   ========================================================================== */
.class-nav-bar, .class-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-2);
  margin-bottom: 20px;
}
.class-nav a, .class-nav-bar a {
  padding: 7px 12px 4px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--grey-1);
  font-family: var(--f-display);
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}
.class-nav a:hover, .class-nav-bar a:hover { color: var(--white); border-color: var(--rule-2); }
.class-nav a.active, .class-nav-bar a.active { background: var(--red); border-color: var(--red); color: var(--white); }

.class-section { margin-bottom: 30px; }
.class-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--rule-2);
}
.class-section-title {
  font-family: var(--f-display);
  font-size: 28px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
}
.class-section-count { font-family: var(--f-cond); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-2); }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  margin-bottom: 5px;
  font-family: var(--f-cond);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-1);
}
.form-control, .search-input-wrap input, input[type="text"],
input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="date"], select, textarea {
  width: 100%;
  padding: 11px 12px;
  background: var(--panel-2);
  border: 1px solid var(--rule-2);
  border-radius: 0;
  color: var(--white);
  font-family: var(--f-text);
  font-size: 16px;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red);
}
::placeholder { color: var(--grey-3); }

.error, .error-banner, .error-msg {
  padding: 11px 14px;
  background: var(--red-tint);
  border-left: 4px solid var(--red);
  color: #ffb4b5;
  font-family: var(--f-text);
  font-size: 15px;
}

/* ==========================================================================
   EMPTY STATES
   ========================================================================== */
.no-results-placeholder, .members-empty, .order-empty,
.no-history, .round-no-results, .card-no-history {
  padding: 44px 20px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--rule);
  color: var(--grey-2);
}
.no-results-title, .empty-title {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 30px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 4px;
}
.empty-sub, .no-results-body { font-family: var(--f-cond); font-size: 16px; letter-spacing: 0.04em; }
.empty-icon, .no-history-icon { display: none; }

/* ==========================================================================
   MEMBER GRID
   ========================================================================== */
.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.card-driver, .profile-driver {
  font-family: var(--f-display);
  font-size: 26px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
}
.card-vehicle, .profile-vehicle {
  font-family: var(--f-cond);
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grey-2);
}
.card-badges-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.card-stats-strip {
  display: flex;
  gap: 18px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  margin-top: auto;
  background: var(--black);
  border-top: 1px solid var(--rule);
  color: var(--grey-2);
  padding: 26px var(--gut);
  text-align: center;
  font-family: var(--f-cond);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer-copy  { margin: 0 0 4px; }
.footer-links { margin: 0; font-size: 13px; color: var(--grey-3); }
.footer-sep   { margin: 0 8px; color: var(--red); }
.site-footer a { color: var(--grey-1); }
.site-footer a:hover { color: var(--red); }
.footer-logo-link { display: inline-flex; align-items: center; gap: 6px; }
.footer-logo { height: 15px; width: auto; opacity: 0.75; vertical-align: middle; }

/* ==========================================================================
   LOGIN
   ========================================================================== */
.login-body { background: var(--black); }
.login-wrapper { flex: 1; display: flex; align-items: center; justify-content: center; padding: 44px 20px; }
.login-box {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--red);
  padding: 30px 26px;
}
.login-header {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 36px;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  color: var(--white);
  margin-bottom: 4px;
}

/* ==========================================================================
   LIVE RESULT REVEAL + SIGN-UP TOAST
   Must stay hidden until their state class is added.
   ========================================================================== */
#result-spotlight {
  position: fixed; inset: 0; z-index: 9990;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
}
#result-spotlight.visible {
  opacity: 1; visibility: visible; pointer-events: auto;
  animation: fp-reveal-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
#result-spotlight.hiding { animation: fp-reveal-out 0.25s ease-in both; }
@keyframes fp-reveal-in  { from { opacity: 0; transform: translateY(12px) skewX(-2deg); } to { opacity: 1; transform: none; } }
@keyframes fp-reveal-out { to { opacity: 0; } }

.spotlight-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.82); }
.spotlight-card {
  position: relative; z-index: 1;
  background: var(--panel);
  border: 1px solid var(--rule-2);
  border-left: 8px solid var(--red);
  padding: 36px 56px 40px;
  min-width: 340px; max-width: 580px;
  text-align: center;
}
.spotlight-label {
  font-family: var(--f-cond); font-size: 14px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--red); margin-bottom: 6px;
}
.spotlight-class-name, .spotlight-round-name {
  font-family: var(--f-cond); font-size: 16px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-2);
}
.spotlight-pos-num {
  font-family: var(--f-display); font-style: italic;
  font-size: 6rem; line-height: 0.9; color: var(--white); margin: 8px 0 12px;
}
.spotlight-driver {
  font-family: var(--f-display); font-size: 2.4rem; line-height: 1;
  text-transform: uppercase; color: var(--white);
}
.spotlight-vehicle {
  font-family: var(--f-cond); font-size: 17px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--grey-2); margin-top: 2px;
}
.spotlight-distance {
  font-family: var(--f-display); font-size: 2.6rem; color: var(--red); margin-top: 14px;
}
.spotlight-dismiss {
  margin-top: 20px; font-family: var(--f-cond); font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-3);
}

#signup-toast {
  position: fixed; right: 18px; bottom: 18px; z-index: 9980;
  max-width: 320px; padding: 12px 16px;
  background: var(--panel-2); color: var(--white);
  border: 1px solid var(--rule-2); border-left: 5px solid var(--red);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
#signup-toast.signup-toast-in  { opacity: 1; visibility: visible; transform: none; }
#signup-toast.signup-toast-out { opacity: 0; visibility: hidden; transform: translateY(8px); }
.signup-toast-label {
  font-family: var(--f-cond); font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin-bottom: 3px;
}
.signup-toast-driver { font-family: var(--f-display); font-size: 22px; line-height: 1; text-transform: uppercase; }
.signup-toast-vehicle, .signup-toast-class, .signup-toast-body {
  font-family: var(--f-cond); font-size: 14px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--grey-2);
}
.signup-toast-draw { font-family: var(--f-display); font-size: 18px; color: var(--gold); }

/* ---- wrappers ---- */
.front_events, .upcoming_events_body, .upcoming_events_inner,
.index-hero-logo, .events-past-section { width: 100%; }
.event_results_section, .event_results { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }

/* ==========================================================================
   SLANTED BLOCKS
   Every filled block (buttons, tags, the wordmark knockout, the live pill)
   is cut as a parallelogram leaning the same way as the italic type. Done
   with clip-path rather than a skew transform so the text stays upright and
   no inner wrapper markup is needed. The cut eats --slant px off each side,
   so those elements carry that much extra horizontal padding.

   clip-path also clips borders, so the outline button becomes a filled dark
   block instead of a stroked one; a stroked parallelogram needs a pseudo
   element and is not worth it here.
   ========================================================================== */
:root { --slant: 8px; }

.btn, .btn-primary, .btn-solid, .btn-red, .btn-outline,
.btn-results, .checkout-btn, .results-spotlight-btn, .add-entry-btn,
.live-badge, .tag, .tag-points, .tag-nonpoints, .upcoming-badge,
.card-class-pill, .profile-class-pill, .night-tag,
.card-member-badge, .profile-member-badge,
.site-desktop-title .wm-block, .nav-live-chip, .live-alert-btn,
.upcoming-card-date-badge, .class-nav a.active, .class-nav-bar a.active {
  clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  border-radius: 0;
}

/* pad out for the cut */
.btn, .btn-primary, .btn-solid, .btn-red, .btn-outline,
.btn-results, .checkout-btn, .results-spotlight-btn, .add-entry-btn { padding-left: 24px; padding-right: 24px; }
.btn-sm { padding-left: 18px; padding-right: 18px; }
.live-badge, .tag, .tag-points, .tag-nonpoints, .upcoming-badge,
.card-class-pill, .profile-class-pill, .night-tag,
.card-member-badge, .profile-member-badge { padding-left: 12px; padding-right: 12px; }
.site-desktop-title .wm-block { padding-left: 12px; padding-right: 12px; }
.nav-live-chip, .live-alert-btn { padding-left: 20px; padding-right: 20px; }
.upcoming-card-date-badge { padding-left: 14px; padding-right: 14px; }

/* outline buttons: filled, since a clipped border would lose its slanted edges.
   Scoped so a button that is also a primary (.btn.btn-results etc.) keeps red. */
.btn:not(.btn-primary):not(.btn-solid):not(.btn-red):not(.btn-results),
.btn-outline, .class-nav a, .class-nav-bar a {
  background: var(--panel-3);
  border-color: transparent;
}
.btn:not(.btn-primary):not(.btn-solid):not(.btn-red):not(.btn-results):hover,
.btn-outline:hover { background: var(--white); color: var(--black); }
.class-nav a, .class-nav-bar a {
  clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  padding-left: 18px; padding-right: 18px;
}

/* ==========================================================================
   STAT LINE
   Plain numbers with a small label, used on the roster rows and the profile.
   Replaces the boxed stat chips.
   ========================================================================== */
.stat-line { display: flex; flex-wrap: wrap; gap: 8px 26px; font-family: var(--f-cond); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-3); }
.stat-line b { font-family: var(--f-display); font-size: 26px; font-weight: 400; color: var(--white); margin-right: 6px; vertical-align: -3px; }
.stat-line b.is-win { color: var(--red); }
.stat-line.is-large b { font-size: 40px; vertical-align: -5px; }

/* profile page */
.profile-masthead { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 28px; }
.profile-photo { width: 260px; max-height: 170px; object-fit: cover; border: 1px solid var(--rule); display: block; }
.profile-season { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 26px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--rule-2); }
.profile-season .section_title { margin: 0; padding: 0; border: 0; }
@media (max-width: 620px) {
  .profile-masthead { grid-template-columns: 1fr; }
  .profile-photo { width: 100%; max-height: 220px; margin-top: 14px; }
}

/* ==========================================================================
   RULEBOOK
   ========================================================================== */
.rules-wrap { padding-bottom: 48px; }
.rules-pdf { margin-top: 26px; background: var(--panel); border: 1px solid var(--rule); border-left: 5px solid var(--red); }
.rules-pdf-head { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 22px; padding: 18px 22px; }
.rules-pdf-title { font-family: var(--f-display); font-size: 30px; line-height: 1; text-transform: uppercase; color: var(--white); }
.rules-pdf-sub { margin-top: 5px; font-family: var(--f-cond); font-size: 15px; letter-spacing: 0.04em; color: var(--grey-2); max-width: 60ch; }
.rules-pdf-frame { display: block; width: 100%; height: 78vh; min-height: 520px; border: 0; border-top: 1px solid var(--rule); background: var(--panel-3); }
/* the club's rule-updates document, with Google's styling stripped */
.rules-doc { font-family: var(--f-text); font-size: 16px; line-height: 1.65; color: var(--grey-1); max-width: 78ch; }
.rules-doc h1, .rules-doc h2, .rules-doc h3, .rules-doc h4 { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; color: var(--white); margin: 30px 0 8px; line-height: 1; }
.rules-doc h1 { font-size: 34px; } .rules-doc h2 { font-size: 28px; } .rules-doc h3 { font-size: 22px; } .rules-doc h4 { font-size: 19px; }
.rules-doc p { margin: 0 0 12px; }
.rules-doc ul, .rules-doc ol { margin: 0 0 14px 22px; padding: 0; }
.rules-doc li { margin: 4px 0; }
.rules-doc b, .rules-doc strong { color: var(--white); }
.rules-doc a { color: var(--red); text-decoration: underline; }
.rules-doc table { border-collapse: collapse; margin: 12px 0 18px; font-family: var(--f-cond); }
.rules-doc td, .rules-doc th { border: 1px solid var(--rule); padding: 6px 10px; vertical-align: top; }
.rules-source { margin-top: 26px; font-family: var(--f-cond); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-3); }
@media (max-width: 620px) {
  .rules-pdf-head { grid-template-columns: 1fr; row-gap: 12px; }
  .rules-pdf-frame { height: 60vh; }
}

/* ==========================================================================
   SCHEDULE
   Same card language as the results list: date badge, name, slash meta, the
   classes that run as small tags, an action on the right.
   ========================================================================== */
.sched-wrap { padding-bottom: 48px; }
.sched-month { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.sched-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 20px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--rule-2);
  padding: 14px 20px 14px 16px;
}
.sched-row[onclick] { cursor: pointer; }
.sched-row[onclick]:hover { background: var(--panel-2); border-left-color: var(--red); }
.sched-row.is-past { opacity: 0.72; }
.sched-row.is-past:hover { opacity: 1; }
.sched-row.is-today, .sched-row.is-live { border-left-color: var(--red); opacity: 1; }
/* newest night with results: the one place on the page that carries the
   full-red edge, the tag and the big italic name, so it still reads first */
.sched-row.is-latest { border-left-color: var(--red); opacity: 1; background: var(--panel-2); scroll-margin-top: 90px; }
.sched-row.is-latest .sched-name { font-family: var(--f-display); font-style: italic; font-size: 38px; }
.sched-row.is-latest .results-spotlight-badge { margin-bottom: 4px; }
.masthead-link { color: var(--red); text-decoration: none; }
.masthead-link:hover { color: var(--white); }
.sched-row.is-past .rs-date { background: var(--panel-3); color: var(--grey-1); }
.sched-row.is-past .rs-date .ucd-yr { color: var(--grey-3); }
.sched-name {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-family: var(--f-display);
  font-size: 28px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
}
.sched-name .tag, .sched-name .live-badge { font-size: 12px; padding: 2px 8px 1px; }
.sched-meta {
  margin-top: 4px;
  font-family: var(--f-cond);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-2);
}
.sched-sep { color: var(--red); margin: 0 7px; }
.sched-classes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.sched-class {
  display: inline-block;
  padding: 3px 9px 2px;
  background: var(--panel-3);
  border: 1px solid var(--rule);
  color: var(--grey-1);
  font-family: var(--f-cond);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sched-upcoming {
  font-family: var(--f-cond); font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-3);
}
.sched-action { justify-self: end; }
@media (max-width: 620px) {
  .sched-row { grid-template-columns: auto 1fr; column-gap: 14px; padding: 12px 14px 12px 12px; }
  .sched-action { grid-column: 1 / -1; justify-self: start; }
  .sched-name { font-size: 24px; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 880px) {
  .top-bar { height: auto; flex-wrap: wrap; padding: 10px var(--gut); gap: 8px; }
  .site-desktop-title { font-size: 22px; }
  .site-brand img { height: 52px; }
  .desktop-menu { flex-wrap: wrap; }
  .desktop-menu > li > a { font-size: 17px; padding: 6px 8px 4px; }
}

@media (max-width: 620px) {
  :root { --gut: 16px; }
  .front-hero, .members-hero, .detail-hero, .signup-hero, .event-hero { padding: 28px 0 22px; }
  .index-hero-logo-img, .members-hero-logo, .detail-hero-logo,
  .signup-hero-logo, .event-hero-logo { height: 64px; }

  .upcoming_events_table thead { display: none; }
  .upcoming_events_table, .upcoming_events_table tbody,
  .upcoming_events_table tr, .upcoming_events_table td { display: block; width: 100%; }
  .upcoming_events_table tr { padding: 12px 0 14px 14px; border-bottom: 1px solid var(--rule); }
  .upcoming_events_table td { border-bottom: none; padding: 2px 0; }
  .event_date_td { width: auto; color: var(--red); }
  .event_status_td { text-align: left; margin-top: 10px; }
  /* date badge stays beside the name; the action drops to its own row */
  .results-spotlight { grid-template-columns: auto 1fr; row-gap: 12px; column-gap: 14px; padding: 14px 16px 14px 14px; }
  .results-spotlight-btn, .results-spotlight .live-badge { grid-column: 1 / -1; justify-self: start; }
  .results-list .results-spotlight-name, .results-list .is-latest .results-spotlight-name { font-size: 26px; }
  .rs-date { min-width: 54px; }
  .rs-date .ucd-day { font-size: 26px; }
}

@media print {
  .site-header, .site-footer, .live-alert-bar, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   EVENT DETAIL (an upcoming night: map, address, times, classes, directions)
   ========================================================================== */
.ev-detail { padding-top: 34px; padding-bottom: 56px; }
.ev-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 26px; align-items: start; }
.ev-map { position: relative; background: var(--panel-3); border: 1px solid var(--rule); aspect-ratio: 16 / 11; overflow: hidden; }
.ev-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.25) contrast(1.05); }
.ev-map-empty { display: flex; align-items: center; justify-content: center; font-family: var(--f-cond); font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-3); }
.ev-map-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ev-facts { background: var(--panel); border: 1px solid var(--rule); border-left: 5px solid var(--red); }
.ev-fact { display: grid; grid-template-columns: 128px 1fr; column-gap: 16px; padding: 13px 18px; border-bottom: 1px solid var(--rule); }
.ev-fact:last-child { border-bottom: 0; }
.ev-fact-k { font-family: var(--f-cond); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-3); padding-top: 3px; }
.ev-fact-v { font-family: var(--f-cond); font-size: 18px; font-weight: 600; letter-spacing: 0.02em; color: var(--white); line-height: 1.25; }
.ev-fact-v.is-big { font-family: var(--f-display); font-size: 30px; font-weight: 400; line-height: 1; }
.ev-fact-v small { display: block; font-size: 14px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-2); margin-top: 2px; }
.ev-fact-v a { color: var(--white); text-decoration: none; border-bottom: 1px solid var(--red); }
.ev-fact-v a:hover { color: var(--red); }
.ev-fact-v b { font-family: var(--f-display); font-size: 22px; font-weight: 400; }
.ev-fact-classes .sched-classes { margin-top: 2px; }
.ev-night-link { display: inline-block; margin: 0 10px 4px 0; }
.ev-fact-cta { padding: 16px 18px; border-top: 1px solid var(--rule); }
.ev-directions { background: var(--panel); border: 1px solid var(--rule); padding: 20px 24px; }
.ev-directions p { margin: 0; font-family: var(--f-text); font-size: 16px; line-height: 1.65; color: var(--grey-1); max-width: 78ch; }
.ev-directions .rules-source { margin-top: 14px; }
.ev-results-note { margin-top: 26px; font-family: var(--f-cond); font-size: 15px; letter-spacing: 0.04em; color: var(--grey-3); }
.ev-results-note strong { color: var(--grey-1); font-weight: 600; }
@media (max-width: 860px) {
  .ev-grid { grid-template-columns: 1fr; }
  .ev-fact { grid-template-columns: 104px 1fr; padding: 11px 14px; }
  .ev-fact-v { font-size: 16px; }
}

/* ==========================================================================
   SCHEDULE TOOLS: one slim row, search + class + what-to-show
   ========================================================================== */
.sched-tools {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 26px 0 6px; padding: 8px 10px;
  background: var(--panel); border: 1px solid var(--rule); border-left: 5px solid var(--red);
}
.sched-search { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 36px; background: var(--black); border: 1px solid var(--rule-2); color: var(--grey-3); }
.sched-search:focus-within { border-color: var(--red); color: var(--white); }
.sched-search input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: 0; color: var(--white); font-family: var(--f-cond); font-size: 16px; letter-spacing: 0.03em; }
.sched-search input::placeholder { color: var(--grey-3); text-transform: uppercase; font-size: 14px; letter-spacing: 0.08em; }
.sched-search input::-webkit-search-cancel-button { filter: invert(1); }
.sched-select {
  height: 36px; padding: 0 30px 0 10px; max-width: 240px;
  background: var(--black) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23e81f22'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--rule-2); color: var(--white);
  font-family: var(--f-cond); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.sched-select:focus { outline: 0; border-color: var(--red); }
.sched-seg { display: flex; border: 1px solid var(--rule-2); height: 36px; }
.sched-seg button {
  padding: 0 14px; background: var(--black); border: 0; border-right: 1px solid var(--rule-2); color: var(--grey-2);
  font-family: var(--f-cond); font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
}
.sched-seg button:last-child { border-right: 0; }
.sched-seg button:hover { color: var(--white); }
.sched-seg button.is-on { background: var(--red); color: var(--white); }
.sched-count { font-family: var(--f-cond); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-3); margin-left: auto; }
.sched-group[hidden], .sched-row[hidden] { display: none; }
@media (max-width: 620px) {
  .sched-tools { padding: 8px; gap: 8px; }
  .sched-search { flex-basis: 100%; }
  .sched-select { flex: 1; max-width: none; }
  .sched-count { flex-basis: 100%; margin-left: 0; }
}

/* Phone header: one 48px row, logo left, menu scrolls sideways on the right */
@media (max-width: 620px) {
  .top-bar { flex-wrap: nowrap; height: 56px; padding: 0 0 0 var(--gut); gap: 10px; }
  .top-bar-left { flex: 0 0 auto; }
  .site-brand img { height: 44px; }
  .top-bar-right { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
  .desktop-menu {
    flex-wrap: nowrap; gap: 0; overflow-x: auto; max-width: 100%;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-right: var(--gut);
    mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 18px), transparent 100%);
  }
  .desktop-menu::-webkit-scrollbar { display: none; }
  .desktop-menu > li { flex: 0 0 auto; }
  .desktop-menu > li > a { font-size: 15px; padding: 6px 7px 4px; white-space: nowrap; }
  .nav-live-chip { font-size: 13px; }
}

/* "there's more" chevron on the scrolling phone menu */
.nav-more { display: none; }
@media (max-width: 620px) {
  .top-bar-right { position: relative; }
  .nav-more {
    position: absolute; right: 0; top: 0; bottom: 0; width: 34px;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none; opacity: 0; transition: opacity 0.25s;
    background: linear-gradient(90deg, transparent, var(--black) 55%);
  }
  .nav-more.is-on { opacity: 1; }
  .nav-more span {
    width: 9px; height: 9px; margin-left: 6px;
    border-right: 2px solid var(--red); border-bottom: 2px solid var(--red);
    transform: rotate(-45deg);
    animation: nav-more-pulse 1.3s ease-in-out infinite;
  }
  @keyframes nav-more-pulse {
    0%, 100% { transform: translateX(0) rotate(-45deg); opacity: 1; }
    50% { transform: translateX(4px) rotate(-45deg); opacity: 0.45; }
  }
  @media (prefers-reduced-motion: reduce) { .nav-more span { animation: none; } }
}

/* ==========================================================================
   CONSOLE LOGIN
   ========================================================================== */
.login-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--black); }
.login-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px var(--gut); }
.login-page .login-box {
  width: 100%; max-width: 400px; margin: 0; padding: 28px 28px 24px;
  background: var(--panel); border: 1px solid var(--rule); border-top: 4px solid var(--red);
}
.login-title { font-family: var(--f-display); font-style: italic; font-size: 44px; line-height: 0.95; color: var(--white); margin: 0 0 20px; }
.login-page .form-group label { display: block; font-family: var(--f-cond); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-3); margin-bottom: 6px; }
.login-page .form-control { width: 100%; height: 44px; background: var(--black); border: 1px solid var(--rule-2); color: var(--white); font-family: var(--f-cond); font-size: 17px; padding: 0 12px; }
.login-page .form-control:focus { outline: 0; border-color: var(--red); }
.login-submit { width: 100%; margin-top: 8px; padding: 13px 16px 11px; font-size: 18px; }
.login-help { margin: 18px 0 0; font-family: var(--f-cond); font-size: 13px; letter-spacing: 0.04em; color: var(--grey-3); line-height: 1.45; }
.login-help a { color: var(--red); text-decoration: none; }
.login-page .error { margin-bottom: 16px; }

/* ==========================================================================
   SPONSOR STRIP
   ========================================================================== */
.sponsor-strip { background: var(--panel); border-top: 1px solid var(--rule); padding: 26px 0; }
.sponsor-strip-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.sponsor-strip-label { font-family: var(--f-cond); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey-3); padding-right: 22px; border-right: 1px solid var(--rule-2); }
.sponsor-strip-logos { display: flex; align-items: center; gap: 14px 34px; flex-wrap: wrap; }
.sponsor-logo { display: inline-flex; align-items: center; height: 46px; text-decoration: none; opacity: 0.85; transition: opacity 0.15s; }
.sponsor-logo:hover { opacity: 1; }
.sponsor-logo img { max-height: 46px; max-width: 170px; width: auto; filter: grayscale(0.15); }
.sponsor-logo.tier-title img, .sponsor-logo.tier-presenting img { max-height: 60px; max-width: 220px; filter: none; }
.sponsor-name { font-family: var(--f-display); font-size: 26px; color: var(--grey-1); letter-spacing: 0.02em; }
@media (max-width: 620px) {
  .sponsor-strip-inner { gap: 14px; }
  .sponsor-strip-label { border-right: 0; padding-right: 0; flex-basis: 100%; }
  .sponsor-logo { height: 36px; }
  .sponsor-logo img { max-height: 36px; max-width: 130px; }
}

/* ---- footer: console-edited line and contact row -------------------------- */
.site-footer .footer-note { font-family: 'Barlow Condensed', sans-serif; font-size: 15px; letter-spacing: .04em; color: #d1d5db; margin: 0 0 8px; }
.site-footer .footer-contact { margin-bottom: 10px; }
.site-footer .footer-contact a { color: #f8fafc; }

/* ---- site notice (console-edited) ------------------------------------- */
.site-notice { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 9px 16px; font-family: 'Barlow Condensed', sans-serif; font-size: 15px; letter-spacing: .04em; background: #1b191b; color: #f8fafc; border-bottom: 1px solid rgba(255,255,255,.1); border-left: 5px solid #1e5bc6; }
.site-notice.is-warning { border-left-color: #f59e0b; }
.site-notice.is-urgent { background: #e81f22; border-left-color: #a21214; }
.site-notice-link { color: inherit; font-weight: 700; text-decoration: underline; white-space: nowrap; }

.home-intro { max-width: 860px; margin: 18px auto 0; padding: 0 16px; color: #d1d5db; font-size: 17px; line-height: 1.55; }

.ev-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 26px; }
.ev-class-row { background: #141214; border: 1px solid rgba(255,255,255,.1); border-left: 5px solid #e81f22; padding: 12px 14px; }
.ev-class-name { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: .02em; }
.ev-class-meta { display: flex; gap: 14px; font-family: 'Barlow Condensed', sans-serif; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: #9ca3af; }
.ev-class-desc { margin-top: 6px; color: #d1d5db; font-size: 15px; line-height: 1.45; }

.profile-about { margin: 18px 0 8px; padding: 14px 16px; background: #141214; border: 1px solid rgba(255,255,255,.1); border-left: 5px solid #e81f22; }
.profile-bio { margin: 0; color: #d1d5db; font-size: 16px; line-height: 1.5; white-space: pre-line; }
.profile-sponsors { margin: 10px 0 0; font-family: 'Barlow Condensed', sans-serif; font-size: 15px; letter-spacing: .04em; color: #f8fafc; }
.profile-sponsors span { color: #9ca3af; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; margin-right: 8px; }