/* CCRC finishing pass: reduce dead space without changing the visual identity. */
html{scroll-padding-top:96px}
#run,#routes,#reels,#about,#faq{scroll-margin-top:96px}
:where(a,button,summary):focus-visible{outline:3px solid #248f7d;outline-offset:4px}
/* Reels -> community: the previous two large section paddings stacked. */
.section.reels{padding-top:68px;padding-bottom:26px}
.section.social{padding-top:48px;padding-bottom:74px}
.reels-heading{margin-bottom:25px}
.ccrc-reels-controls{margin-top:12px}
.social-grid{gap:clamp(28px,4vw,64px)}
.social-img{height:clamp(350px,32vw,455px)}
.social .lede{margin-block:14px;line-height:1.58}
.social h2{margin-bottom:16px}
.social .btn{margin-top:12px}
.steps{margin-top:32px;gap:20px}
.step{padding-top:18px}
.step h3{margin-top:12px}
/* Compact route and run whitespace, while keeping route imagery uncropped. */
#run.section{padding-top:80px;padding-bottom:75px}
.section-top{margin-bottom:26px}
.route-grid{margin-top:20px}
/* Mobile: avoid stacking large desktop gutters and preserve native swipe/scroll. */
@media(max-width:760px){
 html{scroll-padding-top:76px}
 #run,#routes,#reels,#about,#faq{scroll-margin-top:76px}
 #run.section{padding-top:54px;padding-bottom:48px}
 .section.reels{padding-top:52px;padding-bottom:14px}
 .section.social{padding-top:35px;padding-bottom:52px}
 .reels-heading{margin-bottom:18px}
 .ccrc-reels-controls{margin-top:12px}
 .social-grid{gap:22px}
 .social-img{height:clamp(240px,65vw,320px)}
 .social h2{margin-bottom:12px}
 .social .lede{margin-block:12px;font-size:15px}
 .steps{margin-top:26px;gap:16px}
 .step{padding-top:15px}
 .step h3{margin:10px 0 6px}
 .step p{margin:6px 0 0}
 .section-top{margin-bottom:20px}
 .ccrc-reels-track{touch-action:pan-x pan-y}
}
@media(max-width:420px){
 .section.reels{padding-bottom:10px}
 .section.social{padding-top:30px}
 .social-img{height:240px}
}