/* ============================================================
   CLUB GEE
   EDIT YOUR LINKS + PRICES: search this file for "EDIT"
   ============================================================ */

:root{
  --navy-deep:#0B1F3A;
  --navy-mid:#0F2745;
  --navy-card:#132C4E;
  --navy-hover:#1A3760;
  --navy-line:rgba(255,255,255,.13);
  --navy-line-soft:rgba(255,255,255,.07);
  --off-white:#F2F4F7;
  --steel:#8FA3BF;
  --steel-dim:#5E739A;
  --race-red:#E8112D;
  --race-red-hot:#FF2038;
  --go-green:#5FD08A;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--navy-deep);
  color:var(--off-white);
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
  font-variation-settings:'wdth' 100,'wght' 400;font-weight:400;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  min-height:100vh;
  padding:0 20px 56px;
}

/* Timing-mat stripe across the top */
body::before{
  content:'';
  position:fixed;top:0;left:0;right:0;height:4px;
  background:var(--race-red);
  z-index:10;
}

.wrap{
  max-width:430px;
  margin:0 auto;
  padding-top:52px;
  display:flex;
  flex-direction:column;
}

/* ---------- Shared type utilities ---------- */

.mono{
  font-family:'IBM Plex Mono','SFMono-Regular',Menlo,monospace;
  font-size:10px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--steel);
}

.section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;
  padding-bottom:14px;
  margin-bottom:20px;
  border-bottom:1px solid var(--navy-line);
}
.section-head h2{
  font-variation-settings:'wdth' 88,'wght' 800;font-weight:800;
  font-size:22px;
  line-height:1.05;
  letter-spacing:.005em;
  text-transform:uppercase;
  text-wrap:balance;
}

/* ---------- Masthead ---------- */

/* tracking eases in as the column widens, so the line never wraps on small phones */
.eyebrow{
  margin-bottom:28px;
  text-align:center;
  font-size:clamp(8.2px,2.45vw,10px);
  letter-spacing:.13em;
  text-wrap:balance;
}

.logo{
  display:block;
  height:auto;
  width:100%;
  max-width:220px;
  margin:0 auto 26px;
}

/* ---------- Signature: the hook ---------- */

.hook{
  text-align:center;
  padding-bottom:34px;
  border-bottom:1px solid var(--navy-line);
  margin-bottom:30px;
}

/* One type treatment for the whole line — only the colors differ. */
.hook-setup,
.hook-punch{
  font-variation-settings:'wdth' 86,'wght' 800;font-weight:800;
  font-size:clamp(1.62rem,7.1vw,2.05rem);
  line-height:1.06;
  letter-spacing:-.012em;
  word-spacing:.1em;      /* condensed widths squeeze the space; open it back up */
  text-transform:uppercase;
  text-wrap:balance;
  opacity:0;
  transform:translateY(14px);
  animation:rise .62s cubic-bezier(.2,.7,.3,1) forwards;
}
.hook-setup{
  color:var(--steel);
  margin-bottom:6px;
  animation-delay:.05s;
}
.hook-punch{animation-delay:.19s}
/* keep the red phrase on one line so it never splits across a break */
.hook-punch em{font-style:normal;color:var(--race-red);white-space:nowrap}

@keyframes rise{to{opacity:1;transform:translateY(0)}}

/* ---------- Link rows ---------- */

.links{display:flex;flex-direction:column;gap:9px;margin-bottom:46px}

.row{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;
  background:var(--navy-card);
  border:1px solid var(--navy-line);
  border-radius:3px;
  padding:16px 17px;
  text-decoration:none;
  color:var(--off-white);
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.row:hover,.row:focus-visible{
  background:var(--navy-hover);
  border-color:rgba(255,255,255,.26);
  transform:translateX(3px);
}
.row:focus-visible{outline:2px solid var(--race-red);outline-offset:3px}

.row--primary{
  background:var(--race-red);
  border-color:var(--race-red);
}
.row--primary:hover,.row--primary:focus-visible{
  background:var(--race-red-hot);
  border-color:var(--race-red-hot);
}
.row--primary .row-meta{color:rgba(255,255,255,.82)}
.row--primary .row-arrow{color:#fff}

.row-icon{
  width:20px;height:20px;
  flex-shrink:0;
  color:var(--steel);
  transition:color .18s ease;
}
.row-icon svg{width:100%;height:100%;display:block}
.row:hover .row-icon,
.row:focus-visible .row-icon{color:var(--off-white)}
.row--primary .row-icon{color:#fff}

.row-text{flex:1;min-width:0}

.row-label{
  font-variation-settings:'wdth' 96,'wght' 700;font-weight:700;
  font-size:15px;
  letter-spacing:.005em;
  display:block;
}
/* heaviest weight Archivo carries, so it lifts off the already-bold label */
.row-label .emph{
  font-variation-settings:'wdth' 96,'wght' 900;
  font-weight:900;
}

.row-meta{
  font-family:'IBM Plex Mono','SFMono-Regular',Menlo,monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--steel);
  display:block;margin-top:4px;
}
.row-arrow{
  font-family:'IBM Plex Mono','SFMono-Regular',Menlo,monospace;
  font-size:15px;color:var(--steel);flex-shrink:0;
}

/* ---------- Programs ---------- */

.programs{margin-bottom:46px}

.prog-list{display:flex;flex-direction:column;gap:10px}

.prog{
  background:var(--navy-mid);
  border:1px solid var(--navy-line);
  border-left:2px solid var(--race-red);
  border-radius:3px;
  padding:18px 17px;
}

.prog-top{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;
  margin-bottom:4px;
}
.prog-name{
  font-variation-settings:'wdth' 92,'wght' 800;font-weight:800;
  font-size:16px;text-transform:uppercase;letter-spacing:.02em;
}
.prog-price{
  font-family:'IBM Plex Mono','SFMono-Regular',Menlo,monospace;
  font-size:13px;font-weight:500;
  color:var(--off-white);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  text-align:right;
}
.prog-price small{color:var(--steel);font-size:10px;letter-spacing:.08em}
.prog-price s{
  color:var(--steel-dim);
  text-decoration:line-through;
  text-decoration-color:var(--race-red);
  margin-right:6px;
}
.prog-price b{font-weight:500}

/* Launch offer banner */
.offer{
  display:flex;align-items:center;gap:12px;
  background:var(--race-red);
  border-radius:3px;
  padding:12px 14px;
  margin-bottom:12px;
}
.offer-tag{
  font-family:'IBM Plex Mono','SFMono-Regular',Menlo,monospace;
  font-size:16px;font-weight:500;
  line-height:1.05;
  color:#fff;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
  flex-shrink:0;
  padding-right:12px;
  border-right:1px solid rgba(255,255,255,.32);
}
.offer-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.offer-title{
  font-variation-settings:'wdth' 94,'wght' 800;font-weight:800;
  font-size:12px;
  line-height:1.2;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#fff;
}
.offer-sub{
  font-size:12.5px;
  line-height:1.4;
  color:rgba(255,255,255,.88);
}

.prog-for{
  font-family:'IBM Plex Mono','SFMono-Regular',Menlo,monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--steel);
  margin-bottom:13px;
}

.prog ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.prog li{
  font-size:13.5px;
  color:var(--steel);
  padding-left:17px;
  position:relative;
}
.prog li::before{
  content:'';
  position:absolute;left:0;top:.55em;
  width:7px;height:2px;
  background:var(--race-red);
}
.prog li strong{color:var(--off-white);font-variation-settings:'wdth' 100,'wght' 600;font-weight:600}

.prog-note{
  font-family:'IBM Plex Mono','SFMono-Regular',Menlo,monospace;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--steel-dim);
  margin-top:14px;
}

/* ---------- About ---------- */

.about{margin-bottom:46px}

/* same size/weight as the name; steel so the name still leads */
.post-noms{color:var(--steel);white-space:nowrap}

/* ---------- Action shots ----------
   Scrolls sideways and bleeds off both page edges so it reads as a strip,
   not a grid. Swap each .shot-ph for: <img class="shot" src="..." alt="...">
*/
.shots{
  display:flex;
  gap:8px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  margin:24px -20px 0;
  padding:0 20px;
}
.shots::-webkit-scrollbar{display:none}

.shot-item{
  flex:0 0 auto;
  width:148px;
  scroll-snap-align:start;
}

.shot,
.shot-ph{
  width:148px;
  aspect-ratio:4/5;
  border-radius:3px;
  display:block;
}
.shot{
  object-fit:cover;
  border:1px solid var(--navy-line);
}
.shot-ph{
  border:1px dashed var(--steel-dim);
  background:var(--navy-mid);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px;
  font-family:'IBM Plex Mono','SFMono-Regular',Menlo,monospace;
  font-size:9px;letter-spacing:.09em;text-transform:uppercase;
  line-height:1.5;
  color:var(--steel-dim);
}


.about p{
  font-size:15px;
  color:var(--steel);
  margin-bottom:14px;
}
.about p:last-of-type{margin-bottom:0}
.about strong{color:var(--off-white);font-variation-settings:'wdth' 100,'wght' 600;font-weight:600}

.about-id{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:22px;
}

.headshot{
  width:84px;height:84px;
  flex-shrink:0;
  border-radius:50%;
  border:1px solid var(--navy-line);
  display:block;
}

.creds-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.creds-list li{
  font-size:13.5px;
  line-height:1.3;
  color:var(--off-white);
  padding-left:16px;
  position:relative;
}
.creds-list li::before{
  content:'';
  position:absolute;left:0;top:.5em;
  width:7px;height:2px;
  background:var(--race-red);
}

/* ---------- Signup ---------- */

.signup{
  border:1px solid var(--navy-line);
  border-radius:3px;
  padding:22px 18px;
  margin-bottom:46px;
}
.signup-head{
  font-variation-settings:'wdth' 90,'wght' 800;font-weight:800;
  font-size:19px;text-transform:uppercase;letter-spacing:.01em;
  margin-bottom:7px;
}
.arrow-down{
  color:var(--race-red);
  display:inline-block;
  margin-left:2px;
  animation:nudge 1.7s ease-in-out infinite;
}
@keyframes nudge{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(5px)}
}
.signup-sub{font-size:13.5px;color:var(--steel);margin-bottom:16px}

.field{display:flex;flex-direction:column;gap:9px}

.field input{
  width:100%;
  background:var(--navy-deep);
  border:1px solid var(--navy-line);
  border-radius:3px;
  padding:13px 14px;
  color:var(--off-white);
  font-family:'Archivo',system-ui,sans-serif;
  font-size:16px; /* 16px prevents iOS zoom-on-focus */
}
.field input::placeholder{color:#6B7F9C}
.field input:focus{outline:2px solid var(--race-red);outline-offset:1px;border-color:transparent}

.field button{
  width:100%;
  background:var(--off-white);
  color:var(--navy-deep);
  border:none;border-radius:3px;
  padding:14px;
  font-family:'Archivo',system-ui,sans-serif;
  font-variation-settings:'wdth' 94,'wght' 800;font-weight:800;
  font-size:14px;text-transform:uppercase;letter-spacing:.07em;
  cursor:pointer;
  transition:background .18s ease;
}
.field button:hover{background:#fff}
.field button:focus-visible{outline:2px solid var(--race-red);outline-offset:2px}

.form-msg{
  font-family:'IBM Plex Mono','SFMono-Regular',Menlo,monospace;
  font-size:11px;letter-spacing:.06em;
  margin-top:11px;min-height:15px;
  color:var(--steel);
}
.form-msg[data-state="ok"]{color:var(--go-green)}
.form-msg[data-state="err"]{color:var(--race-red)}

/* ---------- Quote + footer ---------- */

.quote{
  border-left:2px solid var(--race-red);
  padding-left:15px;
  font-size:15px;line-height:1.55;
  color:var(--off-white);
  margin-bottom:34px;
}
.quote span{color:var(--steel);display:block;margin-top:8px;font-size:13px}

footer{
  font-family:'IBM Plex Mono','SFMono-Regular',Menlo,monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--steel-dim);
  border-top:1px solid var(--navy-line);
  padding-top:22px;
  display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;
}
footer a{color:var(--steel);text-decoration:none}
footer a:hover{color:var(--off-white)}

@media (prefers-reduced-motion:reduce){
  .eq-line{opacity:1;transform:none;animation:none}
  .arrow-down{animation:none}
  .row{transition:none}
  .row:hover{transform:none}
}

/* ---------- Slide-out menu ---------- */

.menu-toggle{
  position:fixed;top:16px;left:16px;z-index:50;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  background:var(--navy-card);
  border:1px solid var(--navy-line);
  border-radius:3px;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}
.menu-toggle:hover,.menu-toggle:focus-visible{
  background:var(--navy-hover);
  border-color:rgba(255,255,255,.26);
}
.menu-toggle svg{width:18px;height:18px;color:var(--off-white);display:block}

.menu-backdrop{
  position:fixed;inset:0;
  background:rgba(6,13,26,.6);
  opacity:0;pointer-events:none;
  transition:opacity .22s ease;
  z-index:40;
}
.menu-backdrop.open{opacity:1;pointer-events:auto}

.menu-drawer{
  position:fixed;top:0;left:0;bottom:0;
  width:min(78vw,290px);
  background:var(--navy-mid);
  border-right:1px solid var(--navy-line);
  transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
  z-index:45;
  padding:20px 18px;
  display:flex;flex-direction:column;
  gap:4px;
  overflow-y:auto;
}
.menu-drawer.open{transform:translateX(0)}

.menu-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--navy-line);
}
.menu-close{
  background:none;border:none;color:var(--steel);cursor:pointer;
  padding:6px;line-height:1;font-size:16px;
}
.menu-close:hover,.menu-close:focus-visible{color:var(--off-white)}

.menu-link{
  display:block;
  padding:13px 12px;
  border-radius:3px;
  color:var(--off-white);
  text-decoration:none;
  font-variation-settings:'wdth' 94,'wght' 700;font-weight:700;
  font-size:15px;
  letter-spacing:.01em;
  transition:background .15s ease,color .15s ease;
}
.menu-link:hover,.menu-link:focus-visible{background:var(--navy-hover)}
.menu-link[aria-current="page"]{color:var(--race-red-hot)}

@media (prefers-reduced-motion:reduce){
  .menu-drawer{transition:none}
  .menu-backdrop{transition:none}
}

/* ---------- Sub-page header (About / Programs) ---------- */

.subpage-head{
  text-align:center;
  padding-bottom:8px;
  margin-bottom:8px;
}
.subpage-head .logo{max-width:150px;margin-bottom:18px}