:root{
  --navy: #14176B;
  --navy-deep: #0C0E45;
  --pink: #EE1B6C;
  --pink-deep: #C21158;
  --yellow: #F5E600;
  --yellow-deep: #C9BD00;
  --cream: #F7F4EC;
  --white: #FFFFFF;
  --ink: #10102A;
  --gray: #6B6B80;
  --radius: 14px;
  --maxw: 1200px;
  --font-head: 'Oswald', 'Arial Narrow', sans-serif;
  --font-script: 'Permanent Marker', cursive;
  --font-body: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
}
*{ box-sizing: border-box; }

html{ scroll-behavior: auto; }
html.js-smooth-scroll{ scroll-behavior: smooth; }

section[id]{ scroll-margin-top: var(--header-h, 130px); }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.5;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; }

p a, .lede a, li a{
  color: var(--pink-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-weight: 600;
}
p a:hover, .lede a:hover, li a:hover{
  color: var(--pink);
}

.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

h1,h2,h3,h4{
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px;
  line-height: 1.05;
}

h1,h2,h3,h4,.eyebrow,.btn,.topbar-word,.social-row a,.logo,
.main-nav > a,.main-nav > .nav-item > button,.nav-item-label,.dropdown-toggle,.nav-menu a,
.feature-bar a,.activity-item span,.cta-strip p,.card-tag,.card-city,
.race-list-item .rl-name,.race-list-item .rl-date,.rl-body a.rl-register,
.story-card summary::after,.badge,.form-success,.soon-tag,.field label,
.timeline-item .when,.manifesto-line,.footer-tag,.footer-grid h4{
  font-weight: 600;
}
.eyebrow{
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--pink);
  text-transform: uppercase;
  margin-bottom: 10px;
  display: inline-block;
}
.lede{ font-size: 18px; color: var(--gray); max-width: 640px; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--font-head);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 999px;
  border: 3px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-pink{ background: var(--pink); color: var(--white); }
.btn-pink:hover{ box-shadow: 0 8px 0 0 var(--pink-deep); }
.btn-yellow{ background: var(--yellow); color: var(--navy); }
.btn-yellow:hover{ box-shadow: 0 8px 0 0 var(--yellow-deep); }
.btn-outline{ background: transparent; border-color: var(--white); color: var(--white); }
.btn-outline-navy{ background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-solid-white{ background: var(--white); color: var(--navy); }
.btn-solid-white:hover{ box-shadow: 0 8px 0 0 rgba(0,0,0,0.2); }
.btn-sm{ font-size: 12px; padding: 10px 20px; }

.btn-lg{ font-size: 18px; padding: 20px 42px; }

.social-row{ display:flex; gap: 10px; }
.social-row a{
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.28);
  display:flex; align-items:center; justify-content:center;
  font-size: 12px; font-family: var(--font-head); letter-spacing: 0.5px;
}
.social-row a:hover{ border-color: var(--pink); color: var(--pink); }

.social-row a svg{ width:16px; height:16px; }

.social-hidden{ display:none !important; }

.site-header{
  background: var(--navy);
  color: var(--white);
  position: sticky;
  top:0;
  z-index: 200;
  border-bottom: 4px solid var(--pink);
}
.header-top{
  display:flex;
  align-items:center;
  flex-wrap: wrap;
  padding: 14px 24px;
  max-width: var(--maxw);
  margin: 0 auto;
  gap: 10px 20px;
}
.logo{
  font-family: var(--font-head);
  font-size: 22px;
  line-height: 0.9;
  text-transform: uppercase;
  white-space: nowrap;
  order: 1;
}
.logo .pink{ color: var(--pink); }

.logo img{ height: 62px; width: auto; display:block; border-radius: 4px; }
.logo.logo-sm img{ height: 40px; }

.nav-toggle{
  display:flex;
  align-items:center;
  gap: 8px;
  background:none;
  border: 2px solid var(--white);
  color: var(--white);
  border-radius: 8px;
  padding: 11px 16px;
  font-family: var(--font-head);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  order: 2;
  flex-shrink: 0;
}
.nav-toggle:hover{ border-color: var(--yellow); color: var(--yellow); }
.nav-toggle-bars{ font-size: 16px; line-height:1; }

.header-pinned{
  display:flex;
  align-items:center;
  gap: 2px;
  order: 3;
  flex-wrap: wrap;
}
.header-pinned a{
  font-family: var(--font-head);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white);
  padding: 8px 10px;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.header-pinned a:hover, .header-pinned a.active{
  border-bottom-color: var(--yellow);
  color: var(--yellow);
}

.header-right{
  display:flex;
  align-items:center;
  gap: 14px;
  order: 4;
  flex-shrink: 0;
  margin-left: auto;
}
.header-right .social-row{ gap: 8px; }

.main-nav{ display:flex; align-items:center; gap: 6px; flex-wrap: wrap; }
.main-nav > a, .main-nav > .nav-item > button{
  font-family: var(--font-head);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white);
  padding: 8px 10px;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  background:none;
  border-top:none; border-left:none; border-right:none;
  cursor:pointer;
  display:flex; align-items:center; gap:6px;
}
.main-nav > a:hover, .main-nav > a.active,
.main-nav > .nav-item.open > button{
  border-bottom-color: var(--yellow);
  color: var(--yellow);
}
.main-nav .caret{ font-size: 9px; transition: transform .15s ease; }
.main-nav .nav-item.open .caret{ transform: rotate(180deg); }

.main-nav > .nav-item{ display:flex; align-items:center; }
.main-nav > .nav-item > .nav-item-label{
  font-family: var(--font-head);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white);
  padding: 8px 2px 8px 10px;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.main-nav > .nav-item > .nav-item-label:hover{
  border-bottom-color: var(--yellow);
  color: var(--yellow);
}
.main-nav > .nav-item > .nav-caret-btn{
  background:none;
  border:none;
  color: var(--white);
  padding: 8px 10px 8px 2px;
  border-bottom: 3px solid transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
}
.main-nav > .nav-item.open > .nav-caret-btn{
  border-bottom-color: var(--yellow);
  color: var(--yellow);
}

.nav-shop-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:6px;
  border-bottom: none !important;
  flex-shrink:0;
  transition: transform .15s ease;
}
.nav-shop-icon:hover{
  transform: scale(1.08);
}
.nav-shop-icon-img{
  height: 46px;
  width: auto;
  display: block;
  border-radius: 8px;
}

body#homepage .nav-shop-icon-img{
  height: 80px;
}

@media (max-width: 480px){
  body#homepage .nav-shop-icon-img{
    height: 56px;
  }
}

.nav-item, .dropdown{ position: relative; }
.dropdown.open .nav-menu{ display:block; }
.dropdown.open .caret{ transform: rotate(180deg); }

.nav-shop-icon.dropdown-toggle{
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 0;
}
.nav-shop-icon.dropdown-toggle:hover{ background: transparent; }

.shop-entrance-cta{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px; max-width:100%; margin:0 auto 36px; padding:48px 40px;
  border-radius:24px; background: var(--navy-deep); border:3px solid var(--pink);
  box-shadow: 0 6px 0 0 var(--pink-deep); transition: transform .15s ease, box-shadow .15s ease;
}
.shop-entrance-cta:hover{ transform: translateY(-2px) scale(1.01); box-shadow: 0 10px 0 0 var(--pink-deep); }
.shop-entrance-icon{ width:280px; max-width:60%; height:auto; display:block; flex-shrink:0; }
.shop-entrance-text{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.shop-entrance-copy{ font-family: var(--font-body); font-size:16px; line-height:1.5; color: rgba(255,255,255,0.78); max-width:360px; text-align:center; margin:0; }
.shop-entrance-label{
  font-family: var(--font-head); font-size:20px; letter-spacing:2px; text-transform:uppercase;
  color: var(--white); background: var(--pink); border-radius:999px; padding:18px 48px; display:inline-block;
}
@media (min-width: 760px){
  .shop-entrance-cta{ flex-direction:row; justify-content:center; gap:56px; padding:56px 72px; }
  .shop-entrance-text{ align-items:flex-start; text-align:left; }
  .shop-entrance-copy{ text-align:left; }
}
.dropdown-toggle{
  background: transparent;
  border: 2px solid var(--pink);
  color: var(--white);
  border-radius: 999px;
  padding: 8px 18px;
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  display:flex;
  align-items:center;
  gap: 8px;
  cursor:pointer;
}
.dropdown-toggle:hover{ background: var(--pink); }
.dropdown-toggle .caret{ display:inline-block; transition: transform .15s ease; font-size: 10px; }
.nav-menu{
  position:absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(12,14,69,0.35);
  min-width: 240px;
  padding: 10px;
  display:none;
  z-index: 250;
}
.nav-item.open .nav-menu{ display:block; }
.nav-menu a{
  display:flex; align-items:center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  font-family: var(--font-head); font-size: 13px; letter-spacing: 0.5px;
  color: var(--navy); text-transform: uppercase;
}
.nav-menu a:hover{ background: var(--cream); color: var(--pink-deep); }
.nav-menu .tag{
  font-family: var(--font-body); font-weight: 600; font-size: 10px;
  letter-spacing: 0.5px; text-transform: uppercase; color: var(--gray);
  background: var(--cream); padding: 2px 8px; border-radius: 999px;
}
.nav-menu .divider{ height:1px; background:#ECE9DD; margin: 6px 4px; }
.nav-menu.align-right{ left:auto; right:0; }

.main-nav{ display:none; }
.main-nav.open{
  display:flex; flex-direction:column; align-items: stretch;
  position:absolute; top: 100%; left:0; right:0; background: var(--navy);
  padding: 14px 24px 28px; gap: 4px;
  max-height: calc(100vh - 70px); overflow-y:auto;
  box-shadow: 0 20px 40px rgba(12,14,69,0.35);
}
.main-nav .nav-item{ width:100%; display:flex; align-items:center; justify-content: space-between; flex-wrap:wrap; }
.main-nav > .nav-item > .nav-item-label{ flex:1; padding: 12px 10px; }
.main-nav > .nav-item > .nav-caret-btn{ padding: 12px 10px; }
.main-nav > a{ padding: 12px 10px; }
.main-nav .nav-menu{ position: static; box-shadow:none; background: rgba(255,255,255,0.06); display:none; width:100%; }
.main-nav .nav-item.open .nav-menu{ display:block; }
.main-nav .nav-menu a{ color: var(--white); }
.main-nav .nav-menu a:hover{ background: rgba(255,255,255,0.1); color: var(--yellow); }
.main-nav .nav-menu .divider{ background: rgba(255,255,255,0.15); }
.main-nav .site-search{ width:100%; margin-bottom: 10px; }
.main-nav .site-search-toggle{ width:100%; justify-content:center; }
.main-nav .site-search-panel{ position:static; width:100%; margin-top:8px; box-shadow:none; }
.stripe-bar{
  background: repeating-linear-gradient(
    -45deg, var(--pink), var(--pink) 26px, var(--yellow) 26px, var(--yellow) 52px
  );
  height: 8px;
}

.site-search{ position: relative; }
.site-search-toggle{
  display:flex; align-items:center; gap:8px;
  background:none; border: 2px solid rgba(255,255,255,0.4); color: var(--white);
  border-radius: 999px; padding: 7px 14px; cursor:pointer;
  font-family: var(--font-head); font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
}
.site-search-toggle:hover, .site-search.open .site-search-toggle{ border-color: var(--yellow); color: var(--yellow); }
.site-search-toggle svg{ flex: none; }
.site-search-panel{
  display:none;
  position:absolute; top: calc(100% + 10px); right:0;
  width: min(420px, 90vw);
  background: var(--white); border-radius: 12px; padding: 14px;
  box-shadow: 0 16px 40px rgba(12,14,69,0.35); z-index: 260;
}
.site-search.open .site-search-panel{ display:block; }
.site-search-input{
  width:100%; padding: 12px 14px; border-radius: 8px; border: 2px solid #E5E2D6;
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
}
.site-search-results{ margin-top: 10px; max-height: 360px; overflow-y:auto; }
.site-search-results:empty{ margin-top:0; }
.site-search-result{
  display:block; padding: 10px 10px; border-radius: 8px; text-decoration:none;
}
.site-search-result:hover, .site-search-result.active{ background: var(--cream); }
.site-search-result .r-title{ font-family: var(--font-head); font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--navy); }
.site-search-result .r-cat{ font-family: var(--font-body); font-size: 11px; color: var(--pink-deep); font-weight:600; text-transform: uppercase; letter-spacing: 0.5px; margin-left: 8px; }
.site-search-result .r-desc{ font-family: var(--font-body); font-size: 12px; color: var(--gray); margin-top: 2px; }
.site-search-empty{ font-family: var(--font-body); font-size: 13px; color: var(--gray); padding: 6px 10px; }
.site-search-toggle-label{ display:none; }
@media (max-width: 900px){
  .site-search-panel{ right: -40px; }
}

.feature-bar{ background: var(--navy-deep); color: var(--white); padding: 14px 0; }
.feature-bar .wrap{ display:flex; flex-wrap: wrap; justify-content: center; gap: 26px; }
.feature-bar a{
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-head); font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--white); opacity: .92; padding: 4px; border-radius: 8px;
  transition: transform .15s ease, opacity .15s ease;
}
.feature-bar a:hover{ color: var(--yellow); opacity:1; transform: translateY(-2px); }
.feature-bar svg{ width: 20px; height: 20px; flex: none; }

.activity-row{ display:flex; flex-wrap: wrap; gap: 20px; justify-content:center; align-items:stretch; }
.activity-item{

  display:flex; flex-direction: column; align-items:center; gap:10px; width: 296px;
  transition: transform .15s ease;
}
.activity-item svg{ width: 40px; height: 40px; }
.activity-item-frame{
  width: 296px; height: 296px; border-radius: 28px; background-color: transparent;
  border: none;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.activity-scene{ width: 100%; height: 100%; object-fit: contain; }
.activity-item span{ font-family: var(--font-head); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--white); }
.activity-item.more span{ color: var(--yellow); }
.activity-item:hover{ transform: translateY(-3px); }
.activity-item:hover span{ color: var(--yellow); }
@media (max-width: 900px){
  .activity-item, .activity-item-frame{ width: 238px; height: 238px; }
}
@media (max-width: 640px){
  .activity-item, .activity-item-frame{ width: 208px; height: 208px; }
}

body#homepage .site-header{ background: #001358; }
.hero-img-wrap{ background: #001358; line-height: 0; }

.hero-img-wrap img{ width: 100%; height: auto; aspect-ratio: 1981/794; display:block; }

.quicklinks-row{ background: var(--navy); padding: 6px 0; border-top: 1px solid rgba(255,255,255,0.18); }
.quicklinks-row .wrap{ display:flex; flex-wrap: wrap; justify-content:center; align-items:center; }
.quicklinks-item{
  display:flex; align-items:center; gap:9px; padding:12px 20px;
  font-family: var(--font-head); font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--white); transition: color .15s ease, transform .15s ease;
}
.quicklinks-item svg{ width: 20px; height: 20px; flex: none; stroke: var(--pink); }
.quicklinks-item:hover{ color: var(--yellow); transform: translateY(-2px); }
.quicklinks-item:hover svg{ stroke: var(--yellow); }
.quicklinks-div{ width:1px; height:22px; background: rgba(255,255,255,0.25); }
@media (max-width: 760px){
  .quicklinks-row .wrap{ justify-content:flex-start; }
  .quicklinks-div{ display:none; }
  .quicklinks-item{ width: 50%; padding: 10px 12px; }
}

.page-hero-icon{ width:64px; height:64px; border-radius:14px; margin-bottom:16px; box-shadow: 0 6px 14px rgba(0,0,0,0.28); object-fit:cover; }

.guide-hero-art{
  width: 100%; max-width: 560px; aspect-ratio: 3/2; object-fit: contain;
  margin: 0 auto 24px; display:block;
}
@media (min-width: 760px){
  .guide-hero-art{ max-width: 640px; }
}

.guide-hero-art.portrait{
  width: auto; max-width: 100%; max-height: 460px; aspect-ratio: auto;
}
@media (min-width: 760px){
  .guide-hero-art.portrait{ max-height: 560px; }
}
.cta-strip{ background: linear-gradient(100deg, var(--navy) 0%, var(--pink) 55%, var(--yellow) 100%); padding: 18px 0; }
.cta-strip .wrap{ display:flex; flex-wrap: wrap; align-items:center; justify-content: space-between; gap: 16px; }
.cta-strip p{ font-family: var(--font-head); color: var(--white); font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; margin:0; text-shadow: 0 2px 10px rgba(0,0,0,0.25); }
.cta-strip .cta-btns{ display:flex; gap: 12px; flex-wrap: wrap; }
.cta-strip .btn{ font-size: 13px; padding: 12px 22px; }

.page-hero{ background: var(--navy); color: var(--white); padding: 56px 0; }
.page-hero .eyebrow{ color: var(--yellow); }
.page-hero h1{ color: var(--white); font-size: clamp(34px, 5vw, 56px); }
.page-hero .lede{ color:#D8D9F0; }
.crumb{ font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #B9BBE0; margin-bottom: 14px; display:block; }
.crumb a:hover{ color: var(--yellow); }

section{ padding: 72px 0; }
.section-cream{ background: var(--cream); }
.section-navy{ background: var(--navy); color: var(--white); }
.section-pink{ background: var(--pink); color: var(--white); }
.section-white{ background: var(--white); }
.section-header{ margin-bottom: 36px; max-width: 700px; }
.section-navy .lede{ color: #D8D9F0; }
.section-navy h2{ color: var(--white); }
.section-pink h2{ color: var(--white); }

.ombre-divider{ height: 8px; background: linear-gradient(90deg, var(--navy), var(--pink), var(--yellow)); }

.signoff-wrap{ text-align: right; margin: -8px 0 8px; }
.signoff{
  display:inline-block;
  font-family: var(--font-script);
  color: var(--pink);
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1;
  transform: rotate(-2deg);
}
.signoff-underline{ display:block; width: 92%; height: 8px; margin: 4px 4px 0 auto; }
.signoff-underline svg{ width:100%; height:100%; display:block; }

.grid{ display:grid; gap: 24px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px){ .grid-3, .grid-4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }

.card{
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 6px 0 0 rgba(20,23,107,0.08);
  border: 2px solid #ECE9DD;
  display:flex;
  flex-direction: column;
  transition: transform .15s ease;
}
.card:hover{ transform: translateY(-4px); }
.card-media{
  height: 220px; background-color: var(--navy); background-size: contain; background-position: center; background-repeat: no-repeat;
  position: relative; display:flex; align-items:flex-end; padding: 12px;
}
.card-body{ padding: 20px; flex: 1; display:flex; flex-direction:column; }
.card-body h3{ font-size: 20px; margin-bottom: 6px; }
.card-body p{ color: var(--gray); font-size: 15px; flex:1; }
.card-tag{
  font-family: var(--font-head); font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  background: var(--yellow); color: var(--navy); padding: 4px 10px; border-radius: 999px; display:inline-block;
}
.card-cta{
  flex: none !important; font-family: var(--font-head); font-size: 13px; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--pink) !important; font-weight: 600; margin-top: 10px !important;
}
.card:hover .card-cta{ color: var(--pink-deep) !important; }
.card-city{
  font-family: var(--font-head); font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--white); background: rgba(0,0,0,0.35); padding: 4px 10px; border-radius: 999px;
}

.race-list{ display:grid; gap:10px; margin-top:28px; }
.race-list-item{
  background: var(--white); border:2px solid #ECE9DD; border-radius: var(--radius); overflow:hidden;
}
.section-navy .race-list-item{ background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); }
.race-list-item summary{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
  padding:14px 20px; cursor:pointer; list-style:none;
}
.race-list-item summary::-webkit-details-marker{ display:none; }
.race-list-item .rl-name{ font-family: var(--font-head); font-size:14px; letter-spacing:0.5px; }
.section-navy .race-list-item .rl-name{ color: var(--white); }
.race-list-item .rl-date{ font-family: var(--font-head); font-size:12px; letter-spacing:1px; text-transform:uppercase; color: var(--pink); }
.rl-body{ padding: 0 20px 18px; font-size:14px; color: var(--gray); line-height:1.6; }
.section-navy .rl-body{ color: #D8D9F0; }
.rl-body a.rl-register{
  display:inline-block; margin-top:10px; font-family: var(--font-head); font-size:12px;
  letter-spacing:1px; text-transform:uppercase; color: var(--pink);
}

.race-category-accordion{ margin-top:28px; }
.race-category-accordion + .race-category-accordion{ margin-top:16px; }
.race-category-accordion > summary{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  cursor:pointer; list-style:none; padding:16px 22px; border-radius: var(--radius);
  background: var(--navy); color: var(--white); font-family: var(--font-head);
  font-size:14px; letter-spacing:0.5px; text-transform:uppercase; border:2px solid var(--navy);
}
.section-navy .race-category-accordion > summary{ background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
.race-category-accordion > summary::-webkit-details-marker{ display:none; }
.race-category-accordion > summary::after{

  content:"\25BC"; font-size:15px; line-height:1; margin-left:auto; flex:none;
  transition: transform .15s ease; color: var(--yellow);
  width:30px; height:30px; border-radius:50%;
  background: rgba(255,255,255,0.16); border: 2px solid rgba(245,230,0,0.55);
  display:inline-flex; align-items:center; justify-content:center;
}
.race-category-accordion[open] > summary::after{ transform: rotate(180deg); }
.race-category-accordion .race-list{ margin-top:14px; }

.filter-bar{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.filter-input, .filter-select{
  font-family: var(--font-body); font-size:14px; padding:12px 16px; border-radius: 999px;
  border:2px solid #ECE9DD; background: var(--white); color: var(--navy);
}
.filter-input{ flex:1; min-width:220px; }
.filter-count{ margin-top:12px; font-size:13px; color: var(--gray); }

.story-card{ cursor: pointer; align-self: start; }
.story-card summary{ list-style:none; cursor:pointer; display:block; }
.story-card summary::-webkit-details-marker{ display:none; }
.story-card summary::after{
  content: "+ Read The Scoop"; display:block; margin: 0 20px 16px; font-family: var(--font-head);
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--pink);
}
.story-card[open] summary::after{ content: "- Close"; }
.story-body{ padding: 0 20px 20px; }
.story-body p{ color: var(--gray); font-size: 15px; line-height: 1.6; }

.medals{ display:flex; gap: 6px; align-items:center; margin-top: 10px; }
.medal{
  width: 30px; height: 30px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-size: 15px; border: 2px solid #E5E2D6; background: #F2F0E6; opacity: .35;
}
.medal.on{ opacity: 1; border-color: transparent; }
.medal.bronze.on{ background: #CD7F32; color:#fff; }
.medal.silver.on{ background: #B9C2CB; color:#fff; }
.medal.gold.on{ background: #E8B923; color:#fff; }

.medal.potty{ opacity: 1; border-color: #C9A876; background: #F2F0E6; }
.medal.potty.on{ background: #C9A876; color:#fff; border-color: transparent; }
.medal-key{ display:flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--gray); }
.medal-key span{ display:flex; align-items:center; gap:8px; }
.medal-picker{ display:flex; gap: 10px; }
.medal-picker button{
  border: 2px solid #E5E2D6; background: #F2F0E6; border-radius: 10px;
  padding: 10px 14px; font-size: 20px; cursor:pointer;
}
.medal-picker button.selected{ border-color: var(--pink); background: #FFE6F0; }

.badge-row{ display:flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.badge{
  display:flex; align-items:center; gap: 10px; background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.18); padding: 12px 20px; border-radius: 999px;
  font-family: var(--font-head); font-size: 13px; letter-spacing: 1px; text-transform: uppercase;
}
.badge svg{ width:20px; height:20px; flex:none; }

.signup-box{ background: var(--navy); border-radius: var(--radius); padding: 48px; color: var(--white); text-align:center; }
.signup-box .eyebrow{ color: var(--yellow); }
.signup-form{ display:flex; gap: 12px; max-width: 460px; margin: 24px auto 8px; flex-wrap: wrap; justify-content:center; }
.signup-form input[type=email]{ flex: 1; min-width: 220px; padding: 14px 18px; border-radius: 999px; border: none; font-size: 15px; font-family: var(--font-body); }
.form-note{ font-size: 13px; color: #B9BBE0; margin-top: 10px; }
.form-success{
  display:none; background: rgba(245,230,0,0.12); border: 2px solid var(--yellow); color: var(--yellow);
  border-radius: 12px; padding: 16px 20px; font-family: var(--font-head); letter-spacing: 0.5px;
  max-width: 460px; margin: 20px auto 0;
}
.signup-box.submitted .signup-form{ display:none; }
.signup-box.submitted .form-success{ display:block; }

.shop-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
@media (max-width: 760px){ .shop-grid{ grid-template-columns: 1fr; } }
a.shop-card{ display:block; text-decoration:none; color:inherit; }
.shop-card{ background: var(--white); border-radius: var(--radius); overflow:hidden; border: 2px solid rgba(20,23,107,0.12); position: relative; }
.shop-card .media{ height: 220px; display:flex; align-items:center; justify-content:center; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; }
.shop-card .media svg{ width: 60px; height: 60px; }
.shop-card .body{ padding: 18px 20px 22px; }
.shop-card h3{ font-size: 18px; margin-bottom: 6px; }
.shop-card p{ font-size: 13px; color: var(--gray); margin:0; }
.soon-tag{ position:absolute; top:14px; right:14px; background: var(--navy); color: var(--white); font-family: var(--font-head); font-size: 10px; letter-spacing: 1px; padding: 5px 10px; border-radius: 999px; }
.shop-card:nth-child(1) .media{ background-color: var(--navy-deep); }
.shop-card:nth-child(2) .media{ background-color: var(--navy-deep); }
.shop-card:nth-child(3) .media{ background-color: var(--navy-deep); }

.form-shell{ background: var(--white); border: 2px solid #ECE9DD; border-radius: var(--radius); padding: 36px; max-width: 760px; margin: 0 auto; }
.field{ margin-bottom: 24px; }
.field label{ display:block; font-family: var(--font-head); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; color: var(--navy); }
.field .hint{ font-family: var(--font-body); font-size: 13px; color: var(--gray); text-transform:none; letter-spacing:0; display:block; margin-top:4px; }
.field input[type=text], .field input[type=email], .field input[type=date], .field input[type=number], .field select, .field textarea{
  width:100%; padding: 12px 14px; border-radius: 8px; border: 2px solid #E5E2D6; font-family: var(--font-body); font-size: 15px;
}
.field textarea{ min-height: 90px; resize: vertical; }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px){ .field-row{ grid-template-columns: 1fr; } }
.rating-row{ display:flex; align-items:center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid #ECE9DD; }
.rating-row:last-child{ border-bottom: none; }
.rating-row .q{ font-size: 15px; color: var(--navy); font-weight: 600; }
.callout{ background: var(--cream); border-left: 4px solid var(--pink); padding: 16px 20px; border-radius: 8px; font-size: 14px; color: var(--navy); margin-bottom: 28px; }

.legal-doc{ max-width: 820px; }
.legal-updated{ font-size: 13px; color: var(--gray); margin-bottom: 24px; }
.legal-toc{ background: var(--cream); border-radius: 10px; padding: 20px 24px; margin-bottom: 36px; }
.legal-toc-title{ font-size: 12px; letter-spacing: 1px; color: var(--pink-deep); margin-bottom: 10px; }
.legal-toc ol{ margin: 0; padding-left: 20px; columns: 2; column-gap: 24px; }
.legal-toc li{ font-size: 14px; margin-bottom: 6px; break-inside: avoid; }
.legal-toc a{ color: var(--navy); font-weight: 600; }
.legal-section{ margin-top: 40px; padding-top: 4px; }
.legal-section h2{ font-size: 18px; color: var(--navy); border-bottom: 2px solid #ECE9DD; padding-bottom: 10px; margin-bottom: 16px; }
.legal-section h3{ font-size: 14px; color: var(--pink-deep); text-transform: none; letter-spacing: 0; margin: 18px 0 6px; }
.legal-section p, .legal-section li{ font-size: 15.5px; line-height: 1.7; color: var(--ink); }
.legal-section ul{ margin: 0 0 16px 20px; list-style: disc; }
.legal-section ul li{ margin-bottom: 6px; }
.legal-flag{ background: #FFF7E0; border-left: 4px solid var(--navy); padding: 14px 18px; border-radius: 8px; font-size: 13.5px; color: var(--navy); margin: 14px 0 20px; }
.legal-flag strong{ color: var(--pink-deep); }
@media (max-width: 600px){ .legal-toc ol{ columns: 1; } }

.timeline{ position: relative; padding-left: 28px; }
.timeline::before{ content:''; position:absolute; left: 6px; top:0; bottom:0; width: 4px; background: var(--pink); }
.timeline-item{ position: relative; margin-bottom: 32px; }
.timeline-item::before{ content:''; position:absolute; left: -28px; top: 4px; width: 16px; height:16px; border-radius:50%; background: var(--yellow); border: 3px solid var(--navy); }
.timeline-item h3{ margin-bottom: 4px; }
.timeline-item .when{ font-family: var(--font-head); font-size: 12px; letter-spacing: 1px; color: var(--pink); text-transform: uppercase; }

.manifesto-line{ font-family: var(--font-head); font-size: clamp(22px, 3.4vw, 34px); text-transform: uppercase; line-height: 1.25; margin-bottom: 28px; }
.manifesto-line .accent{ color: var(--pink); }

.site-footer{ background: var(--navy-deep); color: #C9CAE6; padding: 56px 0 28px; }
.footer-grid{ display:grid; grid-template-columns: 1.2fr 0.85fr 0.85fr 0.85fr 0.7fr 0.85fr; gap: 28px; margin-bottom: 40px; }
@media (max-width: 1000px){ .footer-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 640px){ .footer-grid{ grid-template-columns: repeat(2,1fr); } }
.footer-bottom{ flex-direction: column; align-items: flex-start; }
.footer-legal-links a{ color: inherit; }
.footer-legal-links a:hover{ color: var(--white); }
@media (min-width: 640px){ .footer-bottom{ flex-direction: row; align-items:center; } }
.footer-grid h4{ color: var(--yellow); font-size: 13px; letter-spacing: 1px; margin-bottom: 14px; }
.footer-grid li{ margin-bottom: 8px; font-size: 14px; }
.footer-grid a:hover{ color: var(--white); }
.footer-tag{ font-family: var(--font-head); color: var(--yellow); font-size: 13px; letter-spacing: 1px; margin-top: 10px; }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px; display:flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; }

.tip-tab-nav{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.tip-tab-btn{
  font-family: var(--font-head); font-weight:600; font-size:13px; letter-spacing:1px; text-transform:uppercase;
  background: rgba(255,255,255,0.08); color: var(--white); border: 2px solid rgba(255,255,255,0.2);
  border-radius: 999px; padding: 10px 20px; cursor:pointer;
}
.tip-tab-btn.active{ background: var(--pink); border-color: var(--pink); color: var(--white); }
.tip-tab-panel{ display:none; }
.tip-tab-panel.active{ display:block; }

.tip-card{ background: var(--white); border-radius: var(--radius); padding: 22px; border: 2px solid #ECE9DD; box-shadow: 0 6px 0 0 rgba(20,23,107,0.08); align-self: start; }
.section-navy .tip-card{ border-color: rgba(255,255,255,0.12); box-shadow:none; }
.tip-card h3{ color: var(--navy); }
.tip-card > p{ color: var(--gray); margin-bottom: 14px; }

.gear-thumb{
  display:block; width:100%; max-height:220px; object-fit:contain;
  object-position:left center; margin-bottom:14px;
}
@media (max-width:640px){
  .gear-thumb{ object-position:center; }
}
.tip-actions{ display:flex; align-items:center; gap:14px; margin: 6px 0 14px; }

.tip-demo-note{ font-size:11px; color: var(--gray); margin-top:10px; font-style:italic; }

.video-embed{ position:relative; width:100%; padding-top:56.25%; border-radius: var(--radius); overflow:hidden; background:#0C0E45; }
.video-embed iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; }
.video-embed.empty{ display:flex; align-items:center; justify-content:center; padding-top:0; height:280px; }
.video-embed.empty .empty-msg{ position:static; color:#B9BBE0; font-family: var(--font-head); font-size:13px; letter-spacing:1px; text-transform:uppercase; text-align:center; padding:0 24px; }
.scoop-feature{ display:grid; grid-template-columns: 1.3fr 1fr; gap:36px; align-items:start; }
@media (max-width: 860px){ .scoop-feature{ grid-template-columns: 1fr; } }
.scoop-archive-item{ display:grid; grid-template-columns: 200px 1fr; gap:20px; align-items:center; padding:16px; background:var(--white); border:2px solid #ECE9DD; border-radius: var(--radius); margin-bottom:16px; }
.scoop-archive-item .video-embed{ margin:0; }
@media (max-width: 640px){ .scoop-archive-item{ grid-template-columns: 1fr; } }
.creator-credit{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.creator-credit .avatar-placeholder{ width:44px; height:44px; border-radius:50%; background: linear-gradient(135deg,var(--pink),var(--yellow)); flex:none; }

.trainer-card .card-media{ height: 240px; background-color: var(--navy); background-size: cover; background-position: center; background-repeat: no-repeat; }
.trainer-card .stat-strip{ display:flex; gap:6px; padding:12px 0; margin:12px 0; border-top:1px solid #ECE9DD; border-bottom:1px solid #ECE9DD; }
.trainer-card .stat-strip .stat{ text-align:center; flex:1; }
.trainer-card .stat-strip .stat .num{ display:block; font-family:var(--font-head); font-size:15px; color:var(--navy); font-weight:600; letter-spacing:0.5px; }
.trainer-card .stat-strip .stat .label{ display:block; font-size:9px; letter-spacing:0.5px; text-transform:uppercase; color:var(--gray); margin-top:2px; }
.trainer-card .card-body{ padding-top:18px; }
.trainer-card .example-flag{ position:absolute; top:14px; right:14px; background: var(--navy); color:#fff; font-family:var(--font-head); font-size:10px; letter-spacing:1px; text-transform:uppercase; padding:5px 10px; border-radius:999px; z-index:2; }
.trainer-card{ position:relative; }

.trip-planner{ background: var(--white); border-radius: var(--radius); padding: 32px; }
.trip-stop-row{ margin-bottom:10px; }
.trip-stop-row input{ width:100%; }
.trip-planner-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }

.pack-list-heading{
  font-family: var(--font-head); font-size:14px; letter-spacing:1px; text-transform:uppercase;
  color: var(--pink); margin-bottom:10px;
}
.pack-checklist{ list-style:none; margin:0; padding:0; }
.pack-checklist li{ margin-bottom:2px; }
.pack-checklist label{
  display:flex; align-items:flex-start; gap:10px; padding:8px 6px; border-radius:8px;
  cursor:pointer; line-height:1.6; color:var(--gray);
}
.pack-checklist label:hover{ background: rgba(238,27,108,0.06); }
.pack-checklist input[type="checkbox"]{
  width:20px; height:20px; min-width:20px; margin-top:2px; accent-color: var(--pink); cursor:pointer;
}
.pack-checklist input[type="checkbox"]:checked + span{
  text-decoration: line-through; color: var(--gray); opacity:0.6;
}
@media (max-width: 640px){
  .pack-checklist{ column-count:1 !important; }
}

@media print{
  body.printing-checklist .topbar,
  body.printing-checklist .site-header,
  body.printing-checklist .site-footer,
  body.printing-checklist .page-hero,
  body.printing-checklist .ombre-divider,
  body.printing-checklist section:not(:has(#essentials-checklist)),
  body.printing-checklist .no-print{
    display:none !important;
  }
  body.printing-checklist #essentials-checklist{
    display:block !important;
    border:none; box-shadow:none;
  }
  body.printing-checklist .pack-checklist input[type="checkbox"]{
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
}

.partner-tile-grid{ gap:18px; }
.partner-tile{
  font-family: var(--font-body); text-align:left; cursor:pointer; border:none; border-radius: var(--radius);
  padding:26px 20px; display:flex; flex-direction:column; gap:10px; box-shadow: 0 6px 0 0 rgba(20,23,107,0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.partner-tile:hover, .partner-tile:focus-visible{
  transform: translateY(-3px); box-shadow: 0 9px 0 0 rgba(20,23,107,0.18); outline:none;
}
.partner-tile h3{ margin:0; font-size:17px; line-height:1.3; }
.partner-tile-icon{ font-size:28px; line-height:1; }
.partner-tile-1{ background: var(--navy); color:#fff; }
.partner-tile-2{ background: var(--pink); color:#fff; }
.partner-tile-3{ background: var(--yellow); color: var(--navy-deep); }
.partner-tile-4{ background: var(--navy-deep); color:#fff; }
.partner-tile-5{ background: var(--pink-deep); color:#fff; }
.partner-tile-6{ background: linear-gradient(135deg, var(--navy), var(--pink)); color:#fff; }
.partner-tile-7{ background: linear-gradient(135deg, var(--pink), var(--yellow)); color: var(--navy-deep); }
.partner-tile-8{ background: var(--cream); color: var(--navy); border:2px solid var(--navy) !important; box-shadow: 0 6px 0 0 rgba(20,23,107,0.25); }
@media (max-width: 640px){
  .partner-tile-grid{ grid-template-columns: 1fr 1fr !important; }
}

.city-scoop-subnav{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.city-scoop-subnav a{
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-head); font-size:13px; letter-spacing:1px; text-transform:uppercase;
  color: var(--white); background: rgba(255,255,255,0.08); border:2px solid rgba(255,255,255,0.25);
  border-radius:999px; padding:9px 18px; transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.city-scoop-subnav a:hover{ border-color: var(--yellow); color: var(--yellow); }
.city-scoop-subnav a.active{ background: var(--pink); border-color: var(--pink); color: var(--white); }

.city-scoop-tile{
  display:flex; flex-direction:column; border-radius: var(--radius); overflow:hidden;
  background: var(--white); box-shadow: 0 6px 0 0 rgba(20,23,107,0.12); transition: transform .15s ease;
}
.city-scoop-tile:hover{ transform: translateY(-3px); }
.city-scoop-tile .card-media{ height:220px; background-color: var(--navy); background-size:contain; background-repeat:no-repeat; background-position:center; }
.city-scoop-tile .card-body{ padding:22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.city-scoop-tile h3{ margin:0; }
.city-scoop-tile .btn{ align-self:flex-start; margin-top:auto; }

.city-scoop-model{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; }
.city-scoop-model-step{
  flex:1; min-width:200px; max-width:280px; background: rgba(255,255,255,0.06); border-radius:14px;
  padding:22px; text-align:center;
}
.city-scoop-model-step .step-icon{ font-size:30px; margin-bottom:10px; display:block; }
.city-scoop-model-step h4{ color:var(--white); margin:0 0 6px; font-family:var(--font-head); font-size:15px; letter-spacing:1px; text-transform:uppercase; }
.city-scoop-model-step p{ color:#D8D9F0; font-size:13px; margin:0; }

.tag-chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.tag-chip{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-family: var(--font-body); font-weight:600; font-size:13px; color: var(--navy);
  background: var(--cream); border:2px solid #E5E2D6; border-radius:999px; padding:7px 14px;
  transition: border-color .15s ease, background .15s ease;
}
.tag-chip:hover{ border-color: var(--pink); }
.tag-chip input{ accent-color: var(--pink); }
.tag-chip.is-checked{ background: var(--pink); border-color: var(--pink); color: var(--white); }

.badge-legend{ display:flex; flex-wrap:wrap; gap:14px; }
.badge-legend-item{ display:flex; align-items:flex-start; gap:10px; background:var(--white); border-radius:12px; padding:16px 18px; flex:1; min-width:220px; box-shadow: 0 4px 0 0 rgba(20,23,107,0.08); }
.badge-pill{ display:inline-flex; align-items:center; font-family:var(--font-head); font-size:11px; letter-spacing:0.5px; text-transform:uppercase; border-radius:999px; padding:5px 12px; white-space:nowrap; flex-shrink:0; }
.badge-pill.rs-rec{ background: var(--pink); color:#fff; }
.badge-pill.community{ background: var(--yellow); color: var(--navy-deep); }
.badge-pill.featured{ background: var(--navy); color:#fff; }
.badge-pill.athlete-fav{ background: var(--navy-deep); color: var(--yellow); }
.badge-legend-item p{ margin:4px 0 0; font-size:13px; color:var(--gray); }

.whoweare-header{ max-width: 900px; }
.whoweare-header .lede{ max-width: 700px; }
.identity-headline{
  font-size: clamp(26px, calc(2.6vw + 13px), 44px);
  line-height: 1.08;
  text-wrap: balance;
  letter-spacing: 0.3px;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.scoop-score-card{
  background: var(--navy);
  color: #fff;
  border-radius: 18px;
  padding: 36px 28px;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.scoop-score-card .ssc-eyebrow{
  display:block;
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 10px;
}
.scoop-score-card .ssc-race{
  font-size: clamp(20px, 3.2vw, 28px);
  color:#fff;
  margin: 0 0 18px;
  line-height: 1.15;
}
.scoop-score-card .ssc-number{
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(56px, 12vw, 88px);
  line-height: 1;
  color: var(--yellow);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}
.scoop-score-card .ssc-denom{
  font-size: clamp(20px, 3.4vw, 28px);
  color: #D8D9F0;
  letter-spacing: 1px;
}
.scoop-score-card .ssc-tier{
  font-family: var(--font-head);
  font-size: clamp(20px, 3.4vw, 28px);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 8px;
  color:#fff;
}
.scoop-score-card .ssc-basis{
  font-size: 13px;
  color: #D8D9F0;
  margin: 14px auto 0;
  max-width: 420px;
  line-height: 1.5;
}
.scoop-score-card .ssc-again{
  border-top: 1px solid rgba(255,255,255,0.18);
  margin-top: 22px;
  padding-top: 18px;
}
.scoop-score-card .ssc-again-q{
  display:block;
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 6px;
}
.scoop-score-card .ssc-again-a{
  font-family: var(--font-head);
  font-size: clamp(18px, 3vw, 24px);
  text-transform: uppercase;
  letter-spacing: 1px;
  color:#fff;
}
.scoop-score-card .ssc-thanks{
  margin: 22px auto 0;
  max-width: 420px;
  font-size: 15px;
  line-height: 1.55;
  color:#fff;
}
@media (max-width: 480px){
  .scoop-score-card{ padding: 28px 18px; border-radius: 14px; }
}

.trust-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 8px;
}
.trust-item{ border-top: 3px solid var(--pink); padding-top: 14px; }
.trust-item h3{
  font-size: 16px;
  letter-spacing: 1px;
  color: var(--navy);
  margin: 0 0 8px;
}
.trust-item p{ font-size: 14px; line-height: 1.55; color: var(--ink); margin: 0; }
.trust-more{ margin-top: 26px; font-size: 14px; color: var(--gray); }
.trust-more a{ color: var(--pink-deep); font-weight: 600; }
@media (max-width: 900px){ .trust-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .trust-grid{ grid-template-columns: 1fr; gap: 20px; } }

.scoop-list{ margin: 0 0 16px; padding-left: 22px; }
.scoop-list li{ margin-bottom: 10px; line-height: 1.6; }
.scoop-list li:last-child{ margin-bottom: 0; }

.shop-card .body{ color: var(--ink); }
.shop-card h3{ color: var(--navy); }
.city-scoop-tile .card-body{ color: var(--ink); }
.city-scoop-tile h3{ color: var(--navy); }

.shop-entrance-headline{
  font-family: var(--font-head);
  font-size: clamp(19px, 2.1vw, 26px);
  line-height: 1.25;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--white);
  max-width: 460px;
  text-align: center;
  margin: 0;
  text-wrap: balance;
}

.signoff-art{
  display: inline-block;
  width: clamp(240px, 42vw, 420px);
  height: auto;
  margin: 0;
}
@media (max-width: 600px){
  .signoff-art{ width: min(78vw, 300px); }
}

@media (max-width: 640px){
  #submit-club{ flex-direction: column; align-items: stretch; }
  #submit-club .btn{
    flex-shrink: 1 !important;
    width: 100%;
    text-align: center;
    white-space: normal;
  }
}

.partner-tile{ min-width: 0; }
@media (max-width: 640px){
  .partner-tile{ padding: 20px 14px; }
  .partner-tile h3{ font-size: 14px; line-height: 1.25; }
  .partner-tile-icon{ font-size: 24px; }
  .partner-tile-grid{ gap: 12px; }
}

.rating-row .q{ flex: 1 1 220px; min-width: 0; }
.rating-row .medal-picker{ flex: 0 0 auto; margin-left: auto; }


/* ---- RATE YOUR RACE header CTA row (added 9/13) -------------------------
   Row 2 of the site header: Rate Your Race artwork, the supporting line,
   and the Shop bag (moved down from header-top). Artwork is supplied as
   transparent webp and is never recreated in HTML text.
   Sizing is height-driven so the header cannot grow unbounded.          */
.header-cta-row{
  display:flex; align-items:center; justify-content:flex-start;
  gap:26px; flex-wrap:nowrap;
  padding:6px 0 12px;
  max-width:100%;
}
.ryr-cta{ display:block; flex:0 1 auto; min-width:0; border-bottom:none !important;
  transition:transform .15s ease; }
.ryr-cta:hover{ transform:scale(1.03); }
.ryr-cta-img{ display:block; height:140px; width:auto; max-width:100%; }
.ryr-help-art{ display:block; height:124px; width:auto; max-width:100%; flex:0 1 auto; min-width:0; }
.header-cta-row .nav-shop-dropdown{ flex:0 0 auto; }
.header-cta-row .nav-shop-icon-img{ height:132px; }

@media (max-width: 1100px){
  .ryr-cta-img{ height:104px; }
  .ryr-help-art{ height:92px; }
  .header-cta-row .nav-shop-icon-img{ height:98px; }
  .header-cta-row{ gap:18px; }
}

/* Mobile: Rate Your Race + Shop bag on one line, supporting art beneath,
   matching the supplied mobile reference. */
@media (max-width: 760px){
  .header-cta-row{
    flex-wrap:wrap; gap:8px 10px; padding:6px 14px 10px;
    align-items:center;
  }
  .ryr-cta{ flex:1 1 auto; max-width:calc(100% - 96px); }
  .ryr-cta-img{ height:auto; width:100%; }
  .header-cta-row .nav-shop-dropdown{ margin-left:0; flex:0 0 82px; }
  .header-cta-row .nav-shop-icon-img{ height:auto; width:82px; }
  .ryr-help-art{ flex:1 1 100%; order:3; height:auto; width:74%; max-width:290px; margin:0 auto 0 2px; }
}
@media (max-width: 420px){
  .header-cta-row{ padding:6px 12px 8px; }
  .ryr-cta{ max-width:calc(100% - 84px); }
  .header-cta-row .nav-shop-dropdown{ flex:0 0 72px; }
  .header-cta-row .nav-shop-icon-img{ width:72px; }
  .ryr-help-art{ width:80%; max-width:250px; }
}

/* homepage has its own nav-shop-icon height rule; the CTA row must win there too */
body#homepage .header-cta-row .nav-shop-icon-img{ height:132px; }
@media (max-width:1100px){ body#homepage .header-cta-row .nav-shop-icon-img{ height:98px; } }
@media (max-width:760px){ body#homepage .header-cta-row .nav-shop-icon-img{ height:auto; width:88px; } }
@media (max-width:420px){ body#homepage .header-cta-row .nav-shop-icon-img{ width:76px; } }


/* ---- Phone-only header nav (added 9/13) ---------------------------------
   On phones the three pinned header links are hidden so the Rate Your Race
   CTA sits high in the viewport. They are NOT removed from navigation:
   they are mirrored into the expanded MENU at the same breakpoint, because
   This Week's Scoop and City Scoop exist nowhere else (not in the menu,
   not in the footer) and would otherwise be unreachable on mobile.      */
.menu-pinned-mirror{ display:none; }

@media (max-width: 640px){
  .site-header .header-pinned{ display:none !important; }
  .menu-pinned-mirror{ display:block; }
  .menu-pinned-mirror .nav-item-label{ display:block; }
}

/* --- MENU drawer: stop the column from wrapping -----------------------------
   .main-nav carries flex-wrap:wrap from the horizontal desktop nav rule. When
   .main-nav.open switches it to a vertical column with a max-height, that wrap
   is never reset, so once the content is taller than the drawer it spills into
   a SECOND COLUMN off to the right instead of scrolling. That is what produced
   the large empty navy area and the menu appearing to run down the right side
   when a submenu was expanded, and it also put later items out of reach.
   Setting nowrap lets overflow-y:auto do its job. Revert by deleting. */
.main-nav.open{ flex-wrap: nowrap; }
/* Submenus inside the drawer stay in normal flow (the drawer is a scroll
   container, so an absolutely positioned dropdown would be clipped by it and
   lose links). Laying each row out as a grid puts the submenu on its own row,
   anchored left under its parent item, at a contained width instead of
   spanning the full drawer. Header, search bar and page layout unchanged. */
.main-nav > .nav-item{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
}
.main-nav > .nav-item > .nav-item-label{ grid-column: 1; }
.main-nav > .nav-item > .nav-caret-btn{ grid-column: 2; }
.main-nav > .nav-item > .nav-menu{
  grid-column: 1 / -1;
  justify-self: start;
  width: 100%;
  max-width: 460px;
  margin: 2px 0 10px 12px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255,255,255,0.09);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}
.main-nav > .nav-item > .nav-menu a{ padding: 9px 12px; }
@media (max-width: 640px){
  .main-nav > .nav-item > .nav-menu{ max-width: none; margin-left: 8px; margin-right: 8px; }
}

/* --- Mobile review-page form space -----------------------------------------
   Reusable behaviour for any review/submission page: put class="page-review"
   on <body>. Rate Your Gear can use the same class and inherit all of this.
   Phone widths only (<=640px). Desktop and tablet are untouched.
   Deliberately CSS-only: no scroll listeners, no focus listeners, no sticky
   repositioning, so there is no layout jump mid-form and nothing that can
   fight the on-screen keyboard. Revert by deleting this block (and the
   <details> wrapper in the page markup). */
@media (max-width: 640px){
  /* The Rate Your Race call to action exists to send people TO this page.
     On the page itself it is 276px of phone screen spent advertising a
     destination the visitor has already reached. */
  body.page-review .header-cta-row{ display:none; }

  /* The breadcrumb and the eyebrow both restate the H1 directly above it. */
  body.page-review .page-hero{ padding-top:18px; padding-bottom:20px; }
  body.page-review .page-hero .crumb,
  body.page-review .page-hero .eyebrow{ display:none; }
  body.page-review .page-hero h1{ font-size:30px; line-height:1.12; }
  body.page-review .page-hero .lede{ font-size:14px; line-height:1.5; margin-top:8px; }
}

/* Long policy text: a plain heading on desktop, a tappable disclosure on
   phones. The full text and both policy links stay in the DOM in either
   state, so nothing is hidden from search engines or from screen readers. */
.mobile-disclosure > summary{
  display:block; list-style:none;
  font-weight:700; color:var(--navy); margin-bottom:6px; cursor:default;
}
.mobile-disclosure > summary::-webkit-details-marker{ display:none; }
@media (max-width: 640px){
  .mobile-disclosure > summary{
    cursor:pointer; position:relative;
    padding:12px 36px 12px 0; min-height:44px; margin-bottom:0;
    display:block; line-height:1.35;
  }
  .mobile-disclosure > summary::after{
    content:"+"; position:absolute; right:4px; top:50%;
    transform:translateY(-50%);
    font-size:24px; line-height:1; font-weight:600; color:var(--pink-deep);
  }
  .mobile-disclosure[open] > summary::after{ content:"\2013"; }
  .mobile-disclosure[open] > summary{ margin-bottom:8px; }
}

/* --- Gear page: illustration left, Rate Your Gear call to action right -------
   The existing gear illustration keeps its own class and source; it simply
   shares a row now. Two columns on desktop and tablet, stacked with the
   illustration first on phones. Revert by deleting this block. */
.gear-intro-art{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items:center; gap:32px; margin:0 0 28px;
}
.gear-intro-art .guide-hero-art{ margin:0 auto; }
.ryg-cta{ display:block; border-bottom:none !important; transition:transform .15s ease; }
.ryg-cta:hover{ transform:scale(1.02); }
.ryg-cta-img{ display:block; width:100%; height:auto; max-width:560px; margin:0 auto; }
@media (max-width: 760px){
  .gear-intro-art{ grid-template-columns:1fr; gap:16px; margin-bottom:22px; }
  .ryg-cta-img{ max-width:420px; }
}

/* --- MENU drawer height: measure it from the real header, not a guess -------
   .main-nav.open is absolutely positioned at top:100% of .site-header and was
   capped at calc(100vh - 70px). That 70px was the header height before the
   Rate Your Race row existed. The mobile header is now 422px, so the drawer
   was allowed to run up to 348px past the bottom of the screen, and because
   the overflow was outside the viewport rather than inside the scroll box,
   its own scrolling could not recover it. Measured before this fix: the last
   menu item (Community) was unreachable at 390px, 360px and on a 1440x700
   laptop.

   100% in max-height resolves against the containing block, which for this
   element is .site-header, so calc(100vh - 100%) is exactly "the screen minus
   whatever the header actually is" at any breakpoint, with no JavaScript and
   no hardcoded number to go stale next time the header changes. The dvh line
   is a progressive upgrade for mobile browser chrome; browsers without it
   keep the vh value above. Revert by deleting this block. */
.main-nav.open{
  max-height: calc(100vh - 100%);
  max-height: calc(100dvh - 100%);
}

/* --- Mobile: let the header scroll away with the page -----------------------
   .site-header is position:sticky; top:0. On a phone the header is 422px on a
   844px screen, so it pinned half the viewport permanently: scrolling moved
   the article but never reclaimed the space. Measured on the homepage, Gear,
   a Race Guide and a City Scoop page, the header still covered 422px of 844
   after scrolling 900px.

   Phone widths only: relative instead of sticky, so the header scrolls out of
   the viewport like any other block and comes back when the reader scrolls to
   the top. Relative rather than static on purpose: the MENU drawer is
   absolutely positioned against this element and its max-height is
   calc(100vh - 100%), both of which need the header to remain a positioned
   ancestor. No JavaScript, no scroll listener, no overlay.
   Desktop and tablet keep the sticky header. Revert by deleting this block. */
@media (max-width: 640px){
  .site-header{ position: relative; }
}

/* --- Community Reviews ------------------------------------------------------
   Cards for the public Race and Gear review lists. Uses the existing tokens
   and the existing .card-tag / .callout language, no new visual system.
   Revert by deleting this block. */
.review-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:22px; }
.review-state{ color:var(--gray); font-size:15px; margin:0; grid-column:1/-1; }

.rv-card{
  background:var(--white); border-radius:14px; padding:22px 24px;
  box-shadow:0 8px 22px rgba(12,14,69,0.08); border-top:5px solid var(--pink);
  display:flex; flex-direction:column; gap:10px;
}
.section-white .rv-card{ background:var(--cream); }
.rv-title{ font-size:20px; line-height:1.15; margin:0; color:var(--navy); }
.rv-sub{ margin:0; font-size:13px; font-weight:600; color:var(--gray); letter-spacing:.3px; }

.rv-score-row{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--cream); border-radius:10px; padding:10px 14px; }
.section-white .rv-score-row{ background:var(--white); }
.rv-score-label{ font-family:var(--font-head); font-size:11px; letter-spacing:1px;
  text-transform:uppercase; color:var(--pink-deep); }
.rv-score{ font-family:var(--font-head); font-size:19px; color:var(--navy); font-weight:700; }
.rv-score-denom{ font-size:12px; color:var(--gray); margin-left:4px; font-weight:600; }

.rv-ratings{ display:flex; flex-direction:column; gap:4px; }
.rv-ratings:empty{ display:none; }
.rv-rating{ display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-size:13px; padding:4px 0; border-bottom:1px solid #ECE9DD; }
.rv-rating:last-child{ border-bottom:none; }
.rv-rating-q{ color:var(--gray); flex:1; }
.rv-rating-a{ font-weight:700; color:var(--navy); white-space:nowrap; }

.rv-meta{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; color:var(--gray); }
.rv-meta:empty{ display:none; }
.rv-meta strong{ color:var(--navy); }

.rv-field{ }
.rv-field-label{ display:block; font-family:var(--font-head); font-size:11px; letter-spacing:1px;
  text-transform:uppercase; color:var(--pink-deep); margin-bottom:3px; }
.rv-field p{ margin:0; font-size:14px; line-height:1.55; color:var(--navy); white-space:pre-wrap; }

.rv-byline{ margin-top:auto; padding-top:12px; border-top:1px solid #ECE9DD;
  display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; font-size:13px; }
.rv-name{ font-weight:700; color:var(--navy); }
.rv-handle{ color:var(--pink-deep); font-weight:600; }

@media (max-width: 640px){
  .review-list{ grid-template-columns:1fr; gap:16px; }
  .rv-card{ padding:18px 16px; }
  .rv-title{ font-size:18px; }
}

/* --- Rate Your Gear: mobile hero artwork + the two obvious actions ----------
   Phone widths only. The supplied artwork already says "WHAT HELD UP? WHAT
   FAILED?", which is the H1 word for word, so on mobile the artwork replaces
   the heading and lede rather than stacking on top of them: the page gains a
   hero without losing the form's screen space. The H1 stays in the DOM and in
   the accessibility tree (clipped, not display:none) so screen readers and
   crawlers still get it. Desktop and tablet are untouched. */
.ryg-page-art{ display:none; }
.review-page-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.review-page-actions .btn{ flex:0 1 auto; }
.btn-ghost{
  background:transparent; color:var(--white);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.55);
}
.btn-ghost:hover{ background:rgba(255,255,255,0.12); }

@media (max-width: 640px){
  /* any page that includes the artwork gets it on phones: the Rate Your Gear
     form page and the Gear Reviews page both use this. */
  .page-hero .ryg-page-art{
    display:block; width:100%; max-width:360px; height:auto; margin:0 0 4px;
  }
  /* clipped, not removed: still announced and still crawlable */
  .page-hero h1.sr-swap{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  .page-hero .ryg-page-art ~ .lede{ display:none; }
  .review-page-actions{ gap:8px; margin-top:12px; }
  .review-page-actions .btn{ flex:1 1 100%; text-align:center; }
}

/* --- Community Reviews CTA --------------------------------------------------
   One component, two placements: beside Rate Your Race in the header row, and
   beneath Rate Your Gear on the Gear page. Built entirely from existing tokens
   and the existing Scoop Score medals, no new artwork.

   The four medals are visual language only. They are NOT an aggregate score,
   deliberately, because there is not enough review volume yet to imply
   community consensus. When there is, this same block becomes a live score:
   swap data-community-score="pending" for the real value and show
   .community-cta-score instead of .community-cta-medals. The markup and space
   are already sized for it. Revert by deleting this block. */
.community-cta{
  display:flex; flex-direction:column; gap:4px;
  padding:12px 18px; border-radius:14px; text-decoration:none;
  border-bottom:none !important; min-width:232px; max-width:300px;
  background:var(--cream); box-shadow: inset 0 0 0 2px var(--pink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.community-cta:hover{ transform:translateY(-2px); box-shadow: inset 0 0 0 2px var(--pink), 0 10px 22px rgba(12,14,69,.18); }
.community-cta-title{
  font-family:var(--font-head); font-size:13px; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--pink-deep); font-weight:700;
}
.community-cta-medals{ font-size:22px; line-height:1.1; letter-spacing:2px; }
.community-cta-medals i{ font-style:normal; }
.community-cta-sub{ font-size:11.5px; letter-spacing:.4px; text-transform:uppercase; color:var(--gray); font-weight:600; }
.community-cta-go{
  font-family:var(--font-head); font-size:13.5px; letter-spacing:.6px;
  text-transform:uppercase; color:var(--navy); font-weight:700; margin-top:2px;
}
/* the header row sits on navy */
.community-cta--onnavy{ background:rgba(255,255,255,0.08); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35); }
.community-cta--onnavy .community-cta-title{ color:var(--yellow); }
.community-cta--onnavy .community-cta-sub{ color:#D8D9F0; }
.community-cta--onnavy .community-cta-go{ color:var(--white); }
.community-cta--onnavy:hover{ background:rgba(255,255,255,0.14); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.6); }

.header-cta-row .community-cta{ flex:0 0 auto; margin-left:auto; }
.gear-intro-stack{ display:flex; flex-direction:column; gap:14px; align-items:center; }
.gear-intro-stack .community-cta{ width:100%; max-width:420px; }

/* Phones: the header is deliberately lean, so the header copy is hidden there.
   The Gear page copy stays, and both destinations are in the menu. */
@media (max-width: 760px){
  .header-cta-row .community-cta{ display:none; }
  .gear-intro-stack{ gap:12px; }
  .community-cta{ min-width:0; max-width:none; }
}

/* --- MOBILE MENU: fixed overlay + page scroll lock --------------------------
   BUG (reported from an iPhone, reproduced at 390px and 360px):
   tapping MENU opened a drawer that was only partly visible, with homepage
   content showing below it, and touching Search appeared to "reveal" more.

   Measured cause, not a guess:
   .main-nav.open was position:absolute at top:100% of .site-header, and at
   <=640px .site-header is position:relative so it scrolls away with the page.
   Nothing locked the page. With the menu open at 360px, scrolling the page
   300px moved the drawer from y=421-845 to y=107-531, leaving 313px of
   homepage rendering below the open menu. On iOS a drag over the drawer
   scrolls the page (no overscroll containment), so this happens constantly.
   Two further measured facts: the MENU button sits at y=24-66 but the drawer
   started at y=422, because .header-cta-row is 276px tall and sits between
   them, so the drawer only ever got 422px of an 844px screen while its own
   content is 505px; and focusing the search field made Safari scroll the page,
   which moved the drawer again. That is the "Search reveals more" symptom.

   FIX, three parts:
   1. The open drawer is position:fixed against the viewport, from the bottom
      of .header-top (the bar that holds the MENU button, so MENU stays visible
      and tappable to close) down to the bottom of the screen. It can no longer
      be moved by page scroll or clipped by any header container.
   2. The page is scroll-locked while the menu is open, iOS-safely, by fixing
      <body> at its current offset. Position is restored exactly on close.
   3. overscroll-behavior:contain stops a drag inside the drawer from chaining
      to the page.

   The header itself is unchanged: same markup, same closed appearance, same
   desktop behaviour. Only the open-menu overlay moved. Above 640px nothing in
   this block applies. Revert by deleting this block and the openNav/closeNav
   pair in js/main.js. */
@media (max-width: 640px){
  /* Page scroll lock. --nav-lock-top is set to the negative of the scroll
     position at open time, so the page does not visually jump. */
  body.nav-locked{
    position: fixed;
    top: var(--nav-lock-top, 0px);
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
  }

  /* Keep the MENU button above the overlay in every case, so the menu can
     always be closed the same way it was opened. */
  body.nav-locked .header-top{ position: relative; z-index: 500; }

  .main-nav.open{
    position: fixed;
    top: var(--nav-top, 0px);
    left: 0;
    right: 0;
    bottom: 0;
    max-height: none;
    height: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 400;
    padding-bottom: 28px;
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }
}