@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;600;700;800;900&display=swap');

:root{
  --color-primary:#FA0032;
  --color-primary-hover:#d9002c;
  --color-secondary:#262626;
  --color-highlight:#FFDB50;
  --color-offwhite:#FAF0E6;
  --color-white:#FFFFFF;
  --color-border:rgba(38,38,38,.16);
  --color-muted:#595959;

  --font:'Figtree', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:24px;
  --space-5:32px;
  --space-6:48px;

  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:26px;
  --shadow:0 10px 28px rgba(0,0,0,.1);
  --max:1120px;
  --pad:clamp(16px,3.6vw,30px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  color:var(--color-secondary);
  background:var(--color-offwhite);
  line-height:1.45;
}

h1,h2,h3,h4{line-height:1.1;margin:0 0 var(--space-2);font-weight:800;letter-spacing:-.015em}
h1{font-size:clamp(2rem,5vw,3.6rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.25rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.6rem)}
h4{font-size:1.1rem}
p{margin:0 0 var(--space-2)}
small,.small{font-size:.9rem;color:var(--color-muted)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
main{padding:var(--space-4) 0 var(--space-6)}
section{margin-block:var(--space-6)}

.topbar{
  position:sticky;top:0;z-index:60;
  background:rgba(250,240,230,.95);
  border-bottom:1px solid var(--color-border);
  backdrop-filter:blur(8px);
}
.topbar-inner{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.brand{display:flex;align-items:center}
.brand-logo{height:clamp(28px,4vw,42px);width:auto;object-fit:contain}

.nav,.nav-cta{display:flex;align-items:center;gap:var(--space-2)}
.nav a{padding:10px 12px;border-radius:999px;font-weight:600}
.nav a[aria-current="page"], .nav a:hover{background:rgba(250,0,50,.12)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:999px;padding:11px 16px;border:2px solid transparent;
  font-weight:600;letter-spacing:.01em;cursor:pointer;
  transition:background .15s ease,color .15s ease,transform .15s ease,border-color .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible,a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{
  outline:3px solid var(--color-highlight);
  outline-offset:2px;
}
.btn{background:var(--color-primary);color:var(--color-white)}
.btn:hover{background:var(--color-primary-hover)}
.btn.secondary{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}
.btn.secondary:hover{background:rgba(250,0,50,.1)}
.btn.disabled,.btn[disabled]{background:#d7d7d7;color:#6a6a6a;border-color:#d7d7d7;cursor:not-allowed;pointer-events:none}

.hamburger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--color-border);background:var(--color-white)}

.hero{display:grid;grid-template-columns:1fr;gap:var(--space-4);align-items:center}
.hero-card,.card{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow)}
.hero-card{padding:clamp(18px,3.5vw,32px)}
.hero-logo{display:block;width:min(100%,360px);margin:0 0 var(--space-3)}
.hero-logo img{width:100%;max-height:110px;height:auto;object-fit:contain}
.kicker{font-size:.74rem;text-transform:uppercase;letter-spacing:.16em;color:var(--color-muted);font-weight:700}
.sub{font-size:1.1rem;color:#414141}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.subhead-grid{display:grid;gap:6px}

.community-card{overflow:hidden}
.community-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(18px,3vw,34px);align-items:stretch}
.community-copy h2{margin-bottom:var(--space-3)}
.community-points{display:grid;gap:10px}
.community-points p{margin:0;padding-left:16px;position:relative;line-height:1.5}
.community-points p::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:999px;background:var(--color-primary)}
.community-media{position:relative;margin:0;min-height:100%;border-radius:var(--radius-sm);overflow:hidden;isolation:isolate}
.community-media img{width:100%;height:100%;min-height:340px;object-fit:cover}
.community-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(38,38,38,.08) 20%,rgba(38,38,38,.62) 100%);z-index:1}
.community-media figcaption{position:absolute;left:14px;right:14px;bottom:14px;margin:0;color:#fff;font-weight:700;letter-spacing:.02em;z-index:2}

.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-3);margin-bottom:var(--space-3)}
.section-head p{color:var(--color-muted)}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-3)}
.card .inner{padding:var(--space-4)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}

.item{display:grid;grid-template-columns:110px 1fr auto;gap:var(--space-2);align-items:center;padding:14px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:#fff7f0}
.item h4{margin:0 0 6px}
.time{font-weight:800}
.meta2{color:var(--color-muted)}
.tag,.badge{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--color-border);background:#fff;font-size:.75rem;font-weight:700;margin-right:6px}
.badge-bs5{background:rgba(255,219,80,.45);border-color:#dfba32}

.pillrow,.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:var(--space-3)}
.pill{padding:10px 14px;border-radius:999px;border:1px solid var(--color-border);background:#fff;font-weight:700;cursor:pointer}
.pill[aria-selected="true"],.pill.active{background:rgba(250,0,50,.12);border-color:rgba(250,0,50,.45)}

select,input{width:100%;padding:11px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:#fff;font:inherit}
label{display:grid;gap:6px;font-weight:600}
form{display:grid;gap:12px}

.product{grid-column:span 6;display:grid;grid-template-rows:auto auto;position:relative;overflow:hidden}
.media{position:relative;overflow:hidden;border-radius:var(--radius-sm);aspect-ratio:4/3;background:#fff8f2}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.card-media{border:0;border-bottom:1px solid var(--color-border);padding:0;margin:0;display:block;position:relative;overflow:hidden;cursor:default;border-radius:0;background:transparent}
.card-media .media{border-radius:0}
.coming-soon-overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(38,38,38,.6);color:#fff;font-weight:800;letter-spacing:.03em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:1}
.product:hover .coming-soon-overlay,.product:focus-within .coming-soon-overlay{opacity:1}
.coming-soon-badge{display:none;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(38,38,38,.85);color:#fff;font-size:.78rem;font-weight:700}
.product .meta{padding:16px;display:grid;gap:10px}
.product .row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.price{font-size:1.3rem;font-weight:900}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.gallery figure{margin:0;background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden}
.gallery button{display:block;border:0;background:none;padding:0;cursor:zoom-in;width:100%}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{padding:10px 12px;font-weight:600;font-size:.92rem}

.merch-tile{display:grid;grid-template-columns:220px 1fr;gap:var(--space-3);padding:16px;align-items:center}
.merch-tile-media{aspect-ratio:16/10}
.merch-tile-copy p{color:var(--color-muted)}

.run-card .inner{display:grid;gap:var(--space-3)}
.run-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2)}
.run-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-3)}
.run-details p{margin:0}
.run-description{color:var(--color-muted)}

.spots-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--space-3);align-items:stretch}
.spot-card{height:100%;display:flex}
.spot-card .inner{display:flex;flex-direction:column;gap:var(--space-2);height:100%}
.spot-description{color:var(--color-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.spot-card .btn{margin-top:auto}

.strava-card{background:linear-gradient(120deg,var(--color-primary),#ff345c);color:#fff;padding:clamp(18px,3vw,30px);border-radius:var(--radius-md)}
.strava-card p{color:rgba(255,255,255,.9)}

.drawer{position:fixed;inset:0;z-index:70;display:none}
.drawer[aria-hidden="false"]{display:block}
.drawer .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.drawer .panel{position:absolute;right:0;top:0;height:100%;width:min(360px,92vw);background:var(--color-offwhite);padding:18px;border-left:1px solid var(--color-border);display:flex;flex-direction:column;gap:8px}
.drawer .panel a{padding:10px;border-radius:10px;font-weight:700}
.drawer .panel a:hover{background:rgba(250,0,50,.12)}

.lightbox{position:fixed;inset:0;display:none;z-index:90}
.lightbox[aria-hidden="false"]{display:grid;place-items:center}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(20,20,20,.82)}
.lightbox-content{position:relative;z-index:1;max-width:min(95vw,960px);padding:16px}
.lightbox-content img{max-height:80vh;border-radius:12px}
.lightbox-close{position:absolute;top:-8px;right:8px}

footer{margin-top:var(--space-6);border-top:1px solid var(--color-border);padding:26px 0;color:var(--color-muted)}
.footer-links{display:flex;gap:12px;flex-wrap:wrap}

@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
  .merch-tile{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .grid > .card,.grid > .product{grid-column:span 12}
  .split{grid-template-columns:1fr}
  .community-layout{grid-template-columns:1fr}
  .community-media img{min-height:260px}
}

@media (max-width: 760px){
  .nav{display:none}
  .hamburger{display:inline-grid;place-items:center}
  .topbar-inner{min-height:66px;padding:10px 0}
  .item{grid-template-columns:1fr}
}

@media (max-width: 560px){
  .brand-logo{height:32px}
  .hero-logo{width:min(100%,280px)}
  .nav-cta .btn{display:none}
  .hero-actions .btn,.btn.block-on-mobile,.filters label{width:100%}
  .filters{flex-direction:column}
  .gallery{grid-template-columns:1fr}
  .card .inner{padding:16px}
}