@import url('easy-edits.css');

/* Responsive + visual cleanup */
html,body{max-width:100%;overflow-x:hidden}

/* Keep only one strong button style. */
.button,
.card-link{
  border-radius:0!important;
  border:0;
  padding:15px 20px;
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  font-size:11px!important;
  font-weight:800;
  line-height:1.1;
  letter-spacing:.07em;
  text-transform:uppercase;
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}
.button:hover,.card-link:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.14)}
.button span,.text-link span,.training-cta,.training-location{transition:transform .22s ease}
.button:hover span,.text-link:hover span{transform:translateX(4px)}

/* Simple text actions everywhere else. */
.hero-secondary,
.text-link,
.race-text-link,
.training-cta,
.training-location{
  display:inline-block;
  width:max-content;
  max-width:100%;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  padding:0 0 6px!important;
  font-size:11px!important;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.training-cta,
.text-link,
.race-clean-link{border-bottom:2px solid var(--magenta)!important}
.training-location{color:#f3ddef;border-bottom:1px solid rgba(255,255,255,.4)!important;margin-top:20px!important}
.training-cta{color:#fff;margin-top:18px!important}

.training-note{display:none}
.training-actions{display:none!important}
.race-clean-link{color:#fff!important}

/* Join section: stronger, cleaner and more intentional. */
.join{position:relative;overflow:hidden;padding-top:110px;padding-bottom:110px}
.join:before{content:"";position:absolute;top:48px;left:10vw;width:86px;height:4px;background:var(--plum)}
.join .section-label{margin-bottom:28px}
.join-grid{align-items:center;gap:6vw}
.join h2{max-width:100%;font-size:clamp(88px,9vw,140px);line-height:.76;letter-spacing:0}
.join h2 span{display:block;color:var(--violet);font-size:.95em}
.join-grid>div:last-child{border-left:1px solid rgba(76,28,70,.28);padding-left:38px}
.join-grid p{font-size:18px;line-height:1.5;max-width:430px;margin-bottom:30px}
.join-actions{gap:28px}

/* Subtle motion: only when JS is available. */
.motion-ready .reveal-item{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.motion-ready .reveal-item.is-visible{opacity:1;transform:none}
.motion-ready .activity-card:nth-child(2),
.motion-ready .rhythm-card:nth-child(2){transition-delay:.08s}
.hero-lines{animation:heroLines 12s ease-in-out infinite alternate}
@keyframes heroLines{from{transform:skewY(-6deg) translateX(0)}to{transform:skewY(-6deg) translateX(18px)}}

@media(max-width:800px){
  .hero{width:100%;max-width:100vw;overflow:hidden}
  .hero-content{width:auto;max-width:none;margin-left:7vw;margin-right:5vw;padding:60px 0}
  .hero h1{font-size:clamp(72px,22.5vw,94px);max-width:100%;overflow-wrap:normal}
  .hero-intro{max-width:100%}
  .site-header>.brand{width:min(190px,62vw);background-position:left center}

  .join{padding:92px 7vw 96px}
  .join:before{top:36px;left:7vw;width:64px;height:3px}
  .join .section-label{margin-bottom:32px}
  .join-grid{display:block;min-width:0}
  .join h2{font-size:clamp(82px,23vw,110px);line-height:.74;margin-bottom:42px}
  .join h2 span{font-size:.92em}
  .join-grid>div:last-child{border-left:0;border-top:1px solid rgba(76,28,70,.28);padding:28px 0 0}
  .join-grid p{font-size:17px;line-height:1.5;margin-bottom:28px}

  .button,.card-link{max-width:100%}
  .races .button{display:none}
  .section-heading .button{display:none}
}

@media(max-width:380px){
  .hero h1{font-size:clamp(68px,22vw,84px)}
  .eyebrow{font-size:10px;letter-spacing:.15em}
  .join h2{font-size:clamp(76px,22vw,96px)}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .motion-ready .reveal-item{opacity:1!important;transform:none!important}
}