/* ============================================================
   General Fitness Competition — shared stylesheet
   Palette: "Steel & Signal" — cool blue-grey slate base (no
   brown/espresso, no warm cast at all), a signal orange-red as
   the decorative/urgency accent, a mint-teal money-button CTA,
   and a periwinkle-blue for soft/lead-gen actions. Third color
   direction tried after "Charcoal & Ember" (twice) and "Graphite
   Mono" didn't stick — Graphite Mono read as too flat/cold once
   applied at full scale, so this reintroduces a hint of cool
   color into the base itself rather than staying pure neutral
   (see BUILD-NOTES.md for the full history). Same light-on-dark
   structure throughout (hero overlays, camera-view scrim,
   text-shadow contrast all still assume a dark backdrop), just
   different hues.
   ============================================================ */

:root{
  --ink:        #14181d;   /* steel & signal — cool slate base */
  --ink-2:      #1b2129;
  --ink-3:      #232b35;
  --line:       #333e4a;
  --white:      #eef1f4;   /* cool off-white */
  --grey:       #9aa7b3;
  --grey-dim:   #6d7883;
  --red:        #ff5031;   /* signal orange-red — decorative brand + urgency accent */
  --red-dark:   #c63e26;
  --lime:       #39f2c0;   /* mint-teal — THE money-button color, nowhere else */
  --lime-dark:  #2cbc95;
  --lavender:   #7c9bff;   /* periwinkle — soft/lead-gen actions */
  --amber:      #ffb703;
  --green:      #21a153;
  --blue:       #0078d4;

  /* Plain R,G,B triplets (no #, no rgb()) so translucent overlays can do
     rgba(var(--ink-rgb), 0.5) etc. IMPORTANT: every one of these must be
     kept in sync with its hex twin above on every palette swap — a
     hardcoded rgba() that skips this and hand-codes numbers is exactly
     how the nav bar (and several other overlays) stayed on the original
     brown palette through three later "swaps" undetected. Grep the repo
     for "rgba(3" / "rgba(2" style literal triplets before calling a
     palette swap done. */
  --ink-rgb:      20,24,29;
  --ink-deep-rgb: 12,14,17;   /* extra-dark near-black for full-screen modal scrims */
  --white-rgb:    238,241,244;
  --red-rgb:      255,80,49;
  --lavender-rgb: 124,155,255;
  --green-rgb:    33,161,83;

  --font-display: 'Space Grotesk', 'Arial', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-cond: 'Inter', var(--font-body);

  --container: 1180px;
  --radius: 10px;
  --shadow: 0 20px 50px rgba(0,0,0,0.45);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{
  margin: 0;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 400; letter-spacing: 0.5px; line-height: 1.05; margin: 0 0 .5em; text-transform: uppercase; }
p{ margin: 0 0 1em; }
.container{ width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
/* Explicit (not just inherited from body) so a section fully covers the
   home page's fixed/pinned hero photo once it's scrolled into place,
   instead of the still-image showing through indefinitely underneath it. */
.section{ padding: 88px 0; position: relative; background: var(--ink); }
.section--tight{ padding: 56px 0; }
.section--alt{ background: var(--ink-2); }
.section--line{ border-top: 1px solid var(--line); }

.eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-cond); font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--red); font-size: 14px; margin-bottom: 14px;
}
.eyebrow::before{ content:""; width: 28px; height: 3px; background: var(--red); display:block; }

.h-xl{ font-size: clamp(40px, 7vw, 88px); }
.h-lg{ font-size: clamp(32px, 5vw, 56px); }
.h-md{ font-size: clamp(24px, 3.4vw, 34px); }
.lede{ font-size: 19px; color: var(--grey); max-width: 640px; }
.center{ text-align: center; margin-left: auto; margin-right: auto; }

.section-head{ margin-bottom: 44px; }
.section-head.center{ display:flex; flex-direction:column; align-items:center; }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-cond); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  font-size: 15px; padding: 15px 30px; border-radius: 4px; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
/* .btn-primary is the ONE money-button color on the whole site — every
   real conversion (tickets, registration, orders, sponsor requests) uses
   it, and nothing decorative ever does. Dark text for contrast on lime. */
.btn-primary{ background: var(--lime); color: var(--ink); }
.btn-primary:hover{ background: var(--lime-dark); }
.btn-outline{ border-color: var(--white); color: var(--white); background: transparent; }
.btn-outline:hover{ background: var(--white); color: var(--ink); }
.btn-ghost{ border-color: var(--line); color: var(--grey); background: transparent; }
.btn-ghost:hover{ border-color: var(--white); color: var(--white); }
/* .btn-soft is for lower-commitment / lead-gen actions (notify-me,
   reminders, "email us" style asks) — distinct from the hard money-button
   so it never competes with a real buy/register CTA on the same page. */
.btn-soft{ border-color: var(--lavender); color: var(--lavender); background: transparent; }
.btn-soft:hover{ background: var(--lavender); color: var(--ink); }
.btn-block{ width: 100%; }
.btn[disabled], .btn.is-disabled{ opacity: .55; cursor: not-allowed; pointer-events: none; }

/* ---------- Top bar ---------- */
.topbar{
  background: var(--red); color: #fff; font-family: var(--font-cond); font-weight: 600;
  letter-spacing: .5px; font-size: 14px; text-align: center; padding: 8px 16px;
}
.topbar a{ text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Nav ---------- */
.nav{
  position: sticky; top: 0; z-index: 100;
  background: rgba(var(--ink-rgb),0.92); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav__row{ display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; max-width: 1360px; margin: 0 auto; }
.nav__brand{ display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 20px; letter-spacing: .5px; }
.nav__brand img{ height: 38px; width: auto; }
.nav__links{ display: flex; align-items: center; gap: 26px; }
.nav__links a{
  font-family: var(--font-cond); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  font-size: 14px; color: var(--grey); padding: 6px 2px; border-bottom: 2px solid transparent;
}
.nav__links a:hover, .nav__links a.is-active{ color: var(--white); border-color: var(--red); }
.nav__cta{ display:flex; align-items:center; gap:12px; }
.nav__toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding: 6px;
}
.nav__toggle span{ width: 24px; height: 2px; background: var(--white); display:block; }

@media (max-width: 1300px){
  .nav__links{
    position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh;
    background: var(--ink); flex-direction: column;
    align-items: flex-start; padding: 110px 24px 24px; gap: 4px; transform: translateX(100%);
    transition: transform .25s ease; overflow-y: auto; z-index: -1;
  }
  .nav__links a{ width:100%; padding: 14px 4px; border-bottom: 1px solid var(--line); }
  .nav__links.is-open{ transform: translateX(0); }
  .nav__toggle{ display:flex; }
  .nav__cta .btn{ padding: 10px 16px; font-size: 13px; }
}

/* ---------- Hero ---------- */
/* The photo lives in .hero-fixed, a position:fixed layer pinned to the
   viewport behind everything (z-index:-1, so normal in-flow content —
   which has no z-index of its own — always paints above it per the CSS
   stacking rules). .hero itself is now just a transparent, normal-flow
   spacer that holds the title/CTAs at the same height/position as before;
   as the page scrolls, that content (and every opaque section after it)
   slides up and covers the still-image behind it, instead of the image
   scrolling away with the page. */
.hero-fixed{
  position: fixed; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
  background-color: var(--ink);
}
.hero-fixed::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(var(--ink-rgb),.96) 10%, rgba(var(--ink-rgb),.55) 55%, rgba(var(--ink-rgb),.35) 100%);
}
.hero{ position: relative; min-height: 78vh; display:flex; align-items:flex-end; }
.hero__inner{ position: relative; z-index: 2; width:100%; padding: 64px 0 56px; }
.hero__badge{
  display:inline-flex; align-items:center; gap:8px; background: var(--red); color:#fff;
  font-family: var(--font-cond); font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  font-size:13px; padding: 8px 14px; border-radius: 3px; margin-bottom: 18px;
}
.hero__title{ font-size: clamp(46px, 8vw, 104px); margin-bottom: 14px; }
.hero__title span{ color: var(--red); }
.hero__meta{ display:flex; flex-wrap:wrap; gap: 22px; margin-bottom: 28px; font-family: var(--font-cond); }
.hero__meta div{ display:flex; align-items:center; gap:8px; color: var(--grey); font-size: 16px; letter-spacing:.3px; }
.hero__meta strong{ color: var(--white); font-weight:700; }
.hero__actions{ display:flex; flex-wrap:wrap; gap: 14px; }

/* ---------- Countdown ---------- */
.countdown{ display:flex; gap: 14px; margin: 26px 0; flex-wrap: wrap; }
.countdown__unit{
  background: rgba(255,255,255,0.06); border: 1px solid var(--line); border-radius: 8px;
  padding: 14px 18px; min-width: 84px; text-align:center;
}
.countdown__num{ font-family: var(--font-display); font-size: 34px; color: var(--white); display:block; }
.countdown__label{ font-family: var(--font-cond); font-size: 12px; letter-spacing: 2px; color: var(--grey-dim); text-transform:uppercase; }

/* ---------- Page header (non-home hero) ---------- */
.page-head{
  background: linear-gradient(160deg, var(--ink-3), var(--ink) 70%);
  border-bottom: 1px solid var(--line);
  padding: 64px 0 44px;
}
.page-head .eyebrow{ margin-bottom: 10px; }

/* Photo variant — same page-head, with a real event photo behind the title
   instead of the flat gradient. Overlay gradient matches the homepage
   hero's treatment so text stays legible over any photo. */
.page-head--photo{
  position: relative;
  background-color: var(--ink);
  background-size: cover;
  background-position: center 30%;
  overflow: hidden;
}
.page-head--photo::after{
  content:"";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(var(--ink-rgb),.93), rgba(var(--ink-rgb),.78) 55%, rgba(var(--ink-rgb),.55) 100%);
}
.page-head--photo .container{ position: relative; z-index: 2; }

/* ---------- Cards / grids ---------- */
.grid{ display:grid; gap: 26px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .grid-4{ grid-template-columns: repeat(2,1fr);} .grid-3{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }

.card{
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .18s ease, border-color .18s ease;
  display:flex; flex-direction:column;
}
.card:hover{ transform: translateY(-4px); border-color:#3a3a40; }
.card__media{ aspect-ratio: 4/3; overflow:hidden; background: var(--ink-3); }
.card__media img{ width:100%; height:100%; object-fit: cover; }
.card__body{ padding: 20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card__tag{ font-family: var(--font-cond); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); font-weight:700; }
.card__title{ font-family: var(--font-display); font-size: 22px; margin:0; text-transform:uppercase; }
.card__text{ color: var(--grey); font-size: 15px; margin: 0; flex:1; }
.card__foot{ margin-top: 10px; display:flex; align-items:center; justify-content: space-between; gap:10px; }

/* Quick-nav cards on home */
.quicknav__icon{
  width:52px; height:52px; border-radius: 50%; background: rgba(var(--red-rgb),.14); color: var(--red);
  display:flex; align-items:center; justify-content:center; font-size: 22px; margin-bottom: 6px;
}

/* Stat strip */
.stats{ display:flex; flex-wrap:wrap; gap: 40px; }
.stat{ text-align:left; }
.stat__num{ font-family: var(--font-display); font-size: 46px; color: var(--red); display:block; }
.stat__label{ font-family: var(--font-cond); letter-spacing:1.5px; text-transform:uppercase; color: var(--grey); font-size:13px; }

/* ---------- Sponsor strip ---------- */
.sponsor-strip{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: 26px; }
.sponsor-strip img{ height: 76px; width:auto; border-radius:6px; opacity:.92; }

/* ---------- Divisions / list rows ---------- */
.rows{ border-top: 1px solid var(--line); }
.row{ display:flex; align-items:center; justify-content:space-between; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); flex-wrap:wrap; }
.row__title{ font-family: var(--font-display); font-size: 20px; text-transform:uppercase; }
.row__sub{ color: var(--grey); font-size: 14px; }
.pill{ display:inline-block; padding: 6px 12px; border-radius: 20px; font-family: var(--font-cond); font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.pill--red{ background: rgba(var(--red-rgb),.16); color: var(--red); }
.pill--amber{ background: rgba(var(--lavender-rgb),.18); color: var(--lavender); }
.pill--green{ background: rgba(var(--green-rgb),.16); color: var(--green); }
.pill--grey{ background: rgba(255,255,255,.08); color: var(--grey); }

/* ---------- Calendar ---------- */
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 20px; }
.cal-head__month{ font-family: var(--font-display); font-size: 26px; text-transform:uppercase; }
.cal-nav{ display:flex; gap:8px; }
.cal-nav button{
  background: var(--ink-2); border:1px solid var(--line); color: var(--white); width:38px; height:38px;
  border-radius: 6px; cursor:pointer; font-size:16px;
}
.cal-nav button:hover{ border-color: var(--red); color: var(--red); }
.cal-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow{ font-family: var(--font-cond); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color: var(--grey-dim); text-align:center; padding-bottom: 8px; }
.cal-cell{
  min-height: 92px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px; font-family: var(--font-cond); font-size: 13px; color: var(--grey-dim); position:relative;
}
.cal-cell.is-outside{ opacity: .35; }
.cal-cell.has-event{ border-color: var(--red); background: rgba(var(--red-rgb),.08); }
.cal-cell__num{ font-weight:700; color: var(--white); display:block; margin-bottom: 4px; }
.cal-cell__event{ display:block; font-size:11px; background: var(--red); color:#fff; border-radius:3px; padding:2px 5px; margin-top:3px; line-height:1.3; }
@media (max-width: 720px){
  .cal-grid{ grid-template-columns: repeat(7, minmax(0,1fr)); }
  .cal-cell{ min-height: 62px; font-size: 11px; padding:5px; }
}

.event-list{ margin-top: 40px; }
.event-list__item{ display:flex; gap: 18px; align-items:flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.event-list__date{
  flex: none; width: 76px; text-align:center; background: var(--ink-3); border:1px solid var(--line); border-radius:8px; padding: 10px 6px; font-family: var(--font-cond);
}
.event-list__date .mon{ font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color: var(--red); font-weight:700; }
.event-list__date .day{ font-size:24px; font-family: var(--font-display); color: var(--white); }

/* ---------- Message board ---------- */
.post{ border: 1px solid var(--line); background: var(--ink-2); border-radius: var(--radius); padding: 24px 26px; margin-bottom: 18px; }
.post__head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom: 10px; }
.post__date{ font-family: var(--font-cond); font-size:13px; color: var(--grey-dim); letter-spacing: .5px; }
.post__title{ font-family: var(--font-display); font-size: 22px; text-transform:uppercase; margin: 8px 0 8px; }
.post__body{ color: var(--grey); font-size: 15.5px; }
.post__body p{ margin: 0 0 .8em; }

/* ---------- Gallery ---------- */
.gallery-filters{ display:flex; flex-wrap:wrap; gap: 10px; margin-bottom: 28px; }
.gallery-filters button{
  font-family: var(--font-cond); font-weight:700; letter-spacing:1px; text-transform:uppercase; font-size:13px;
  background: var(--ink-2); border:1px solid var(--line); color: var(--grey); padding: 9px 16px; border-radius: 20px; cursor:pointer;
}
.gallery-filters button.is-active, .gallery-filters button:hover{ border-color: var(--red); color: var(--white); background: rgba(var(--red-rgb),.12); }
.gallery-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery-grid figure{ margin:0; border-radius: 8px; overflow:hidden; cursor: zoom-in; aspect-ratio: 4/3; background: var(--ink-2); position:relative; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition: transform .3s ease; }
.gallery-grid figure:hover img{ transform: scale(1.06); }
@media (max-width: 980px){ .gallery-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 640px){ .gallery-grid{ grid-template-columns: repeat(2,1fr); } }

.lightbox{
  position: fixed; inset:0; background: rgba(var(--ink-deep-rgb),.94); z-index: 300; display:none;
  align-items:center; justify-content:center; padding: 30px;
}
.lightbox.is-open{ display:flex; }
.lightbox img{ max-width: min(1000px, 92vw); max-height: 84vh; border-radius: 8px; box-shadow: var(--shadow); }
.lightbox__close{
  position:absolute; top: 22px; right: 26px; background:none; border:2px solid var(--white); color:var(--white);
  width:42px; height:42px; border-radius:50%; font-size:20px; cursor:pointer;
}
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); background:none; border:0; color:#fff; font-size: 40px; cursor:pointer; padding: 10px 16px;}
.lightbox__nav--prev{ left: 6px; }
.lightbox__nav--next{ right: 6px; }
.lightbox__cap{ position:absolute; bottom: 24px; left:0; right:0; text-align:center; font-family: var(--font-cond); color: var(--grey); }

/* ---------- Shop ---------- */
.price{ font-family: var(--font-display); font-size: 24px; color: var(--lime); }
.shop-note{ background: var(--ink-2); border:1px dashed var(--line); border-radius: var(--radius); padding: 18px 22px; color: var(--grey); font-size: 14px; }

/* ---------- Ticket tiers ---------- */
.ticket{ border:1px solid var(--line); background: var(--ink-2); border-radius: var(--radius); padding: 30px 26px; text-align:center; position:relative; }
.ticket--featured{ border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime); }
.ticket__badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--lime); color:var(--ink); font-family:var(--font-cond); font-size:12px; font-weight:700; letter-spacing:1.5px; padding: 5px 14px; border-radius: 20px; text-transform:uppercase; }
.ticket__price{ font-family: var(--font-display); font-size: 46px; margin: 10px 0 4px; }
.ticket__price small{ font-family: var(--font-cond); font-size: 14px; color: var(--grey-dim); }
.ticket ul{ text-align:left; margin: 20px 0; }
.ticket li{ padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--grey); font-size: 14px; display:flex; gap:8px; }
.ticket li::before{ content:"✓"; color: var(--green); font-weight:700; }

/* ---------- Forms ---------- */
.form-row{ display:flex; gap: 12px; flex-wrap:wrap; }
.form-row input[type="email"], .form-row input[type="text"]{
  flex:1; min-width: 220px; background: var(--ink-2); border: 1px solid var(--line); color: var(--white);
  padding: 14px 16px; border-radius: 4px; font-family: var(--font-body); font-size:15px;
}
.form-row input:focus{ outline: none; border-color: var(--red); }
.form-note{ font-size: 13px; color: var(--grey-dim); margin-top: 10px; }
.form-success{ display:none; background: rgba(var(--green-rgb),.14); border:1px solid var(--green); color:#c9f2d8; padding: 14px 18px; border-radius: 8px; margin-top: 14px; font-size: 14px; }
.form-success.is-visible{ display:block; }

/* ---------- Live page ---------- */
.live-frame{
  aspect-ratio: 16/9; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap: 14px; padding: 30px;
}
.live-frame .pulse{ width:14px; height:14px; border-radius:50%; background: var(--grey-dim); }
.live-frame iframe{ width:100%; height:100%; border:0; border-radius: var(--radius); }

/* ---------- Sponsor tiers page ---------- */
.tier-block{ margin-bottom: 54px; }
.tier-block__head{ display:flex; align-items:baseline; gap: 14px; margin-bottom: 22px; }
.tier-block__head h3{ font-size: 26px; margin:0; }

/* ---------- CTA banner ---------- */
.cta-banner{
  background: linear-gradient(120deg, var(--red-dark), var(--red));
  border-radius: 14px; padding: 56px 44px; text-align:center;
}
.cta-banner h2{ margin-bottom: 10px; }
.cta-banner p{ color: rgba(255,255,255,.85); max-width: 560px; margin: 0 auto 26px; }
.cta-banner .btn-outline{ border-color:#fff; }

/* ---------- Footer ---------- */
.footer{ background: var(--ink-2); border-top: 1px solid var(--line); padding: 56px 0 26px; }
.footer__top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.footer__brand img{ height: 30px; margin-bottom: 12px; }
.footer__brand p{ color: var(--grey-dim); font-size: 14px; max-width: 280px; }
.footer h4{ font-family: var(--font-cond); font-size: 14px; letter-spacing: 1.5px; color: var(--grey); margin-bottom: 14px; }
.footer li{ margin-bottom: 10px; }
.footer a{ color: var(--grey-dim); font-size: 14px; }
.footer a:hover{ color: var(--white); }
.footer__social{ display:flex; gap: 12px; margin-top: 14px; }
.footer__social a{
  width: 38px; height:38px; border-radius:50%; border:1px solid var(--line); display:flex;
  align-items:center; justify-content:center; font-size:16px;
}
.footer__social a:hover{ border-color: var(--red); color: var(--red); }
.install-app{
  display: none; align-items:center; gap: 8px; margin-top: 16px; padding: 9px 16px;
  background: transparent; border: 1px solid var(--lavender); color: var(--lavender); border-radius: 20px;
  font-family: var(--font-cond); font-weight:700; font-size: 13px; letter-spacing: .5px; cursor:pointer;
  transition: background .15s ease, color .15s ease;
}
.install-app.is-visible{ display: inline-flex; }
.install-app:hover{ background: var(--lavender); color: var(--ink); }
.footer__bottom{ border-top: 1px solid var(--line); padding-top: 22px; display:flex; flex-wrap:wrap; gap: 12px; justify-content:space-between; color: var(--grey-dim); font-size: 13px; }
@media (max-width: 880px){ .footer__top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .footer__top{ grid-template-columns: 1fr; } }

/* ---------- misc ---------- */
.two-col{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items:center; }
@media (max-width: 880px){ .two-col{ grid-template-columns: 1fr; } }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.text-grey{ color: var(--grey); }

.badge-soon{ display:inline-block; background: var(--ink-3); border:1px solid var(--line); color: var(--grey); font-family:var(--font-cond); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; padding:6px 12px; border-radius:20px; }

/* ============================================================
   WOD Timer — mobile-first. This page is used almost entirely on
   phones (setting up in the gym, recording a lift), so the setup
   card and the full-screen judge-cam view are both designed for a
   one-handed phone first, with landscape variants for when the
   phone is propped up sideways to record.
   ============================================================ */

/* ---------- Setup screen ---------- */
.tsetup{ max-width: 480px; margin: 0 auto; display:flex; flex-direction:column; gap: 16px; }

.tsetup__modes{ display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; }
.tsetup__mode{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background: var(--ink-2); border:1px solid var(--line); border-radius:10px; color:var(--grey);
  padding:12px 4px 10px; cursor:pointer; -webkit-tap-highlight-color: transparent;
}
.tsetup__mode svg{ width:26px; height:26px; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.tsetup__mode span{
  font-family:var(--font-cond); font-weight:700; letter-spacing:1px; text-transform:uppercase; font-size:11px;
  line-height:1.2; text-align:center;
}
.tsetup__mode:hover{ border-color:var(--grey-dim); }
.tsetup__mode.is-active{ border-color:var(--red); color:var(--white); }
@media (max-width: 380px){
  .tsetup__mode{ padding:10px 2px 8px; }
  .tsetup__mode span{ font-size:9.5px; letter-spacing:.5px; }
}

.tsetup__row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background: var(--ink-2); border:1px solid var(--line); border-radius:10px; padding:14px 18px;
}
.tsetup__row span{ font-family:var(--font-cond); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; font-size:13px; color:var(--grey); }
.tsetup__row input{
  width:64px; background:transparent; border:0; color:var(--white); font-family:var(--font-display);
  font-size:22px; font-weight:700; text-align:right; padding:0;
}
.tsetup__row input:focus{ outline:none; }
.tsetup__row select{
  background:transparent; border:0; color:var(--white); font-family:var(--font-body); font-size:15px; text-align:right;
}

.tsetup__pair, .tsetup__triple{ display:grid; gap:12px; }
.tsetup__pair{ grid-template-columns: 1fr 1fr; }
.tsetup__triple{ grid-template-columns: 1fr 1fr 1fr; }
.tsetup__box{
  background: var(--ink-2); border:1px solid var(--line); border-radius:10px; padding:14px 10px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.tsetup__box input{
  width:100%; background:transparent; border:0; color:var(--white); font-family:var(--font-display);
  font-size: clamp(26px, 7vw, 34px); font-weight:700; text-align:center; padding:0;
}
.tsetup__box input:focus{ outline:none; }
.tsetup__box span{ font-family:var(--font-cond); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--grey-dim); }
.tsetup input:disabled, .tsetup select:disabled{ opacity:.5; }

.tsetup .form-note{ margin-top:-6px; }

.tsetup__divider{ display:flex; align-items:center; gap:14px; margin-top:6px; color:var(--grey-dim); }
.tsetup__divider::before, .tsetup__divider::after{ content:""; flex:1; height:1px; background:var(--line); }
.tsetup__divider span{ font-family:var(--font-cond); font-size:12px; letter-spacing:2px; text-transform:uppercase; }

.tsetup__connect{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.tsetup__device{
  background: var(--ink-2); border:1px solid var(--line); border-radius:10px; padding:20px 10px;
  display:flex; flex-direction:column; align-items:center; gap:8px; opacity:.6;
}
.tsetup__device-icon{ font-size:26px; display:flex; align-items:center; justify-content:center; height:28px; }
.tsetup__device-icon svg{ width:26px; height:26px; stroke:currentColor; }
.tsetup__device-icon img{ height:100%; width:auto; max-width:64px; object-fit:contain; }
.tsetup__device p{ font-family:var(--font-cond); font-size:13px; color:var(--grey); margin:0; }
.tsetup__connect-note{ text-align:center; margin-top:-8px; }

/* ---------- Full-screen judge cam ---------- */
.tcam{
  position: fixed; inset: 0; z-index: 500; background: var(--ink);
  display: none; flex-direction: column; overflow:hidden;
}
.tcam.is-open{ display:flex; }
body.tcam-lock{ overflow:hidden; }

/* The preview/recording frame is boxed to the iPhone Camera app's own
   default aspect ratio (4:3, i.e. 3:4 in portrait) instead of stretching
   edge-to-edge — matches what people expect a "camera" screen to look
   like, with the timer's own chrome living in the letterboxed bars above
   and below rather than floating over the live image. Camera.enable() in
   timer.js requests this same ratio from getUserMedia, so object-fit:cover
   here has almost nothing left to crop. */
.tcam__stage{ position:relative; width:100%; aspect-ratio: 3 / 4; background:#000; overflow:hidden; flex:0 0 auto; }
@media (orientation: landscape){ .tcam__stage{ aspect-ratio: 4 / 3; } }

.tcam__stage video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; pointer-events:none; }
.tcam__stage canvas{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; }
.tcam.has-camera .tcam__stage canvas{ display:block; }
.tcam__nocam{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; color:var(--grey-dim); text-align:center; padding:0 40px;
}
.tcam.has-camera .tcam__nocam{ display:none; }
.tcam__nocam span{ font-size:34px; }
.tcam__nocam p{ font-family:var(--font-cond); font-size:13px; letter-spacing:.5px; margin:0; }

.tcam__top{
  position:relative; z-index:2; display:grid; grid-template-columns: 1fr auto 1fr; align-items:center;
  padding: calc(env(safe-area-inset-top,0px) + 14px) 18px 8px;
}
.tcam__close{
  justify-self:start; width:38px; height:38px; border-radius:50%; border:1px solid rgba(var(--white-rgb),.4);
  background:rgba(var(--ink-rgb),.45); color:var(--white); font-size:16px; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.tcam__mode{
  justify-self:center; font-family:var(--font-cond); font-weight:700; letter-spacing:2px; font-size:13px;
  color:var(--white); text-shadow:0 2px 8px rgba(0,0,0,.7); text-transform:uppercase;
}
.tcam__rec{
  justify-self:end; display:flex; align-items:center; gap:6px; font-family:var(--font-cond); font-size:13px;
  color:var(--white); font-variant-numeric: tabular-nums; text-shadow:0 2px 8px rgba(0,0,0,.7);
}
.tcam__rec[hidden]{ display:none; }
.tcam__rec-dot{ width:8px; height:8px; border-radius:50%; background:#e5342e; animation: tcam-pulse 1.1s ease-in-out infinite; }
@keyframes tcam-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

.tcam__clock{ position:relative; z-index:2; text-align:center; margin-top: clamp(8px, 5vh, 44px); pointer-events:none; }
/* When the camera is on, the clock is already burned into the canvas
   picture itself (see drawOverlay in timer.js) — showing the plain-DOM
   clock too would double it up, so it only renders for the no-camera
   fallback (solid background, nothing else drawing the time). */
.tcam.has-camera .tcam__clock{ display:none; }
.tcam__big{
  font-family:var(--font-display); font-weight:700; font-size: clamp(48px, 15vw, 96px); color:var(--white);
  text-shadow:0 4px 18px rgba(0,0,0,.8); line-height:1; font-variant-numeric: tabular-nums;
}
.tcam__sub{
  font-family:var(--font-cond); font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--white);
  text-shadow:0 2px 10px rgba(0,0,0,.75); margin-top:8px; opacity:.9;
}

.tcam__laps{ position:relative; z-index:2; display:flex; gap:8px; overflow-x:auto; padding: 10px 18px; -webkit-overflow-scrolling:touch; }
.tcam__laps:empty{ display:none; padding:0; }
.tcam__lap-chip{
  flex:0 0 auto; background:rgba(var(--ink-rgb),.55); border:1px solid rgba(var(--white-rgb),.25); color:var(--white);
  font-family:var(--font-cond); font-size:12px; padding:6px 12px; border-radius:20px; white-space:nowrap;
  font-variant-numeric: tabular-nums;
}

.tcam__error{
  position:relative; z-index:2; margin: 0 18px 8px; background: rgba(var(--red-rgb),.9); color:#fff;
  padding:10px 14px; border-radius:8px; font-size:13px; text-align:center;
}
.tcam__error[hidden]{ display:none; }

.tcam__bottom{
  position:relative; z-index:2; margin-top:auto; padding: 10px 24px calc(env(safe-area-inset-bottom,0px) + 22px);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.tcam__controls{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; width:100%; max-width: 360px; }
.tcam__side{
  width:52px; height:52px; border-radius:50%; border:1px solid rgba(var(--white-rgb),.35); background:rgba(var(--ink-rgb),.5);
  color:var(--white); font-size:19px; font-family:var(--font-cond); font-weight:700;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.tcam__side:first-child{ justify-self:start; }
.tcam__side:last-child{ justify-self:end; }
.tcam__side[hidden]{ display:none; }
.tcam__side:disabled{ opacity:.4; cursor:not-allowed; }

.tcam__main{
  justify-self:center; width:76px; height:76px; border-radius:50%; border:4px solid var(--white);
  background:rgba(var(--ink-rgb),.35); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: transform .12s ease;
}
.tcam__main:active{ transform: scale(.94); }
.tcam__main:disabled{ opacity:.5; cursor:not-allowed; }
.tcam__main-icon{ width:26px; height:26px; border-radius:50%; background:#e5342e; }
.tcam__main.is-ready .tcam__main-icon{
  width:0; height:0; background:transparent; border-radius:0; margin-left:5px;
  border-left:22px solid var(--white); border-top:13px solid transparent; border-bottom:13px solid transparent;
}
.tcam__main.is-active .tcam__main-icon{ width:24px; height:24px; border-radius:6px; background:var(--white); }
.tcam__main-count{ display:none; font-family:var(--font-display); font-size:30px; font-weight:700; color:var(--white); }
.tcam__main.is-counting .tcam__main-icon{ display:none; }
.tcam__main.is-counting .tcam__main-count{ display:block; }

.tcam__label{
  font-family:var(--font-cond); font-size:13px; letter-spacing:1px; color:var(--white); text-transform:uppercase;
  text-shadow:0 2px 8px rgba(0,0,0,.7);
}

.tcam__result{
  position:absolute; inset:0; z-index:5; background: rgba(var(--ink-deep-rgb),.96); backdrop-filter: blur(4px);
  display:flex; flex-direction:column; overflow-y:auto;
  padding: calc(env(safe-area-inset-top,0px) + 20px) 20px calc(env(safe-area-inset-bottom,0px) + 20px);
}
.tcam__result[hidden]{ display:none; }
.tcam__result h3{ font-family:var(--font-display); font-size:18px; color:var(--white); margin:0 0 14px; }
.tcam__result video{ width:100%; max-height:56vh; border-radius: var(--radius); border:1px solid var(--line); background:#000; margin-bottom:16px; }
.tcam__result-actions{ display:flex; flex-direction:column; gap:10px; }

/* Landscape: phone propped sideways to record — shorter viewport,
   so tighten vertical rhythm and shrink the clock/controls a touch. */
@media (orientation: landscape){
  .tcam__clock{ margin-top: clamp(4px, 3vh, 20px); }
  .tcam__big{ font-size: clamp(34px, 9vw, 62px); }
  .tcam__bottom{ padding-top:6px; padding-bottom: calc(env(safe-area-inset-bottom,0px) + 12px); }
  .tcam__controls{ max-width: 300px; }
  .tcam__side{ width:44px; height:44px; font-size:16px; }
  .tcam__main{ width:60px; height:60px; }
}
@media (orientation: landscape) and (max-height: 480px){
  .tcam__top{ padding-top: calc(env(safe-area-inset-top,0px) + 8px); padding-bottom:4px; }
  .tcam__laps{ display:none; }
  .tcam__result h3{ margin-bottom:8px; }
  .tcam__result video{ max-height:38vh; }
}