/* Course photography: editable images, with navigation over the panorama. */
[data-course-page] .site-header{position:absolute;background:transparent}
[data-course-page] .site-header.open{position:fixed;background:var(--coal)}
[data-course-page] .sub-hero{isolation:isolate;display:flex;align-items:stretch;min-height:clamp(620px,86svh,980px);padding:166px 0 62px;background:var(--coal);overflow:hidden}
[data-course-page] .course-hero-photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
[data-course-page] .sub-hero:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,.12) 32%,rgba(0,0,0,.35) 55%,rgba(0,0,0,.85)),linear-gradient(90deg,rgba(0,0,0,.28),transparent 80%)}
[data-course-page] .sub-hero>.wrap{display:flex;flex-direction:column;justify-content:space-between;gap:100px}
[data-course-page] .breadcrumb{margin-bottom:0}
[data-course-page] .sub-title-grid{align-items:flex-end;gap:40px}
[data-course-page] .sub-title-grid>div:first-child{min-width:0;max-width:850px}
[data-course-page] .sub-hero h1{font-size:clamp(48px,6.5vw,96px);line-height:1;margin:24px 0 18px;text-wrap:balance}
[data-course-page] .sub-hero .subtitle{max-width:650px;font-size:20px;line-height:1.45}
[data-course-page] .distance-stamp{font-size:clamp(80px,10vw,150px);text-align:right;flex-shrink:0;margin:0;line-height:.9}
[data-course-page] .distance-stamp small{font:600 17px/1 var(--body);letter-spacing:.08em;text-transform:uppercase}
[data-course-page] .profile-jump{margin-top:25px;min-height:44px;align-items:center;padding:8px 0;font-size:13px}
[data-course-page] .sub-hero a:focus-visible{outline:2px solid white;outline-offset:6px}
@media(max-width:900px){
 [data-course-page] .sub-title-grid{display:block}
 [data-course-page] .distance-stamp{display:none}
 [data-course-page] .sub-hero{min-height:78svh}
}
@media(max-width:600px){
 [data-course-page] .sub-hero{min-height:max(580px,85svh);padding:120px 0 38px}
 [data-course-page] .sub-hero>.wrap{gap:95px}
 [data-course-page] .sub-hero h1{font-size:clamp(42px,12vw,64px);margin:20px 0 16px}
 [data-course-page] .sub-hero .subtitle{font-size:17px}
 [data-course-page] .sub-hero .eyebrow{font-size:11px;line-height:1.6;letter-spacing:.1em}
 [data-course-page] .breadcrumb{font-size:12px;line-height:1.5}
 [data-course-page] .course-hero-photo{object-position:68% center}
}

.fact-start-time{align-items:center}.fact-start-time dd{font-size:20px;white-space:nowrap;color:var(--paper);font-variant-numeric:tabular-nums}

/* Course names are the distance and elevation gain; keep each metric together. */
[data-course-page] .sub-title-grid{display:block}
[data-course-page] .sub-title-grid>div:first-child{max-width:none}
[data-course-page] .sub-hero .course-metrics-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px 24px;font-size:clamp(48px,6.5vw,96px);line-height:1.08;text-wrap:initial}
.course-metrics-title>span{white-space:nowrap}
.course-title-separator{color:var(--accent)}
[data-course-page] .course-title-gain{font-size:.7em}
@media(max-width:600px){
 [data-course-page] .sub-hero .course-metrics-title{gap:8px 12px;font-size:clamp(42px,11vw,64px)}
 [data-course-page] .course-title-gain{font-size:.65em}
}