/* shared site navigation */
.sitenav{background:#0C0D11;border-bottom:1px solid #33353F}
.snwrap{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sitenav a,.sitenav button{font:500 13.5px 'IBM Plex Sans',Arial,sans-serif;color:#E7E2D6;text-decoration:none;background:none;border:0;cursor:pointer;padding:9px 10px;border-radius:6px}
.sitenav a:hover,.sitenav button:hover{background:rgba(255,255,255,.08)}
.sitenav .home{font-weight:700;color:#14151A;background:#E7E2D6;margin:5px 6px 5px 0;padding:5px 13px;border-radius:18px}
.sitenav .home:hover{background:#fff}
.snlinks{display:flex;flex-wrap:wrap;align-items:center;gap:2px;flex:1}
.snlinks a[aria-current=page]{color:#F5C518;box-shadow:inset 0 -2px 0 #F5C518;border-radius:0}
.snlinks a.t[aria-current=page]{color:#8FD3FF;box-shadow:inset 0 -2px 0 #8FD3FF}
.snlinks a.m{color:#F5C518}.snlinks a.t{color:#8FD3FF}
.sitenav .menu{display:none;margin-left:auto}


.sitenav .mainsite{border:1px solid #F5C518;color:#F5C518;padding:4px 12px;margin:5px 4px;border-radius:18px;font-weight:600}
.sitenav .mainsite:hover{background:#F5C518;color:#14151A}
.sitenav .mainsite .short{display:none}
@media(max-width:1199px){.sitenav .mainsite .full{display:none}.sitenav .mainsite .short{display:inline}.sitenav .mainsite{margin:3px 4px}}

/* picture viewer */
img.zoomable{cursor:zoom-in}
#lightbox{position:fixed;inset:0;z-index:100;background:rgba(5,6,9,.94);display:flex;align-items:center;justify-content:center;flex-direction:column;padding:14px}
#lightbox[hidden]{display:none}
#lightbox img{max-width:96vw;max-height:84vh;object-fit:contain;touch-action:pinch-zoom}
#lightbox .lbx{position:absolute;top:12px;right:14px;background:#E7E2D6;color:#14151A;border:0;border-radius:20px;padding:8px 16px;font:600 14px 'IBM Plex Sans',Arial,sans-serif;cursor:pointer}
#lightbox .lbcap{color:#E7E2D6;font:14px 'IBM Plex Sans',Arial,sans-serif;margin:10px 0 0;text-align:center;max-width:90vw}

/* equipment buttons (open the bike pages in a new tab) */
.eqbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:14px 26px;border-radius:16px;font:700 18px/1.2 "IBM Plex Sans",Arial,sans-serif;text-decoration:none!important;text-align:center;border:0;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.55);transition:transform .15s,box-shadow .15s,filter .15s}
.eqbtn svg{width:30px;height:30px;flex:none}
.eqbtn .t{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.eqbtn .t small{font:600 12px/1.2 "IBM Plex Sans",Arial,sans-serif;opacity:.8;margin-top:2px;letter-spacing:.02em}
a.eqbtn.bike{background:linear-gradient(135deg,#BFE6FF 0%,#8FD3FF 45%,#4FB4F0 100%);color:#0b1a26!important}
a.eqbtn.moto{background:linear-gradient(135deg,#FFE680 0%,#F5C518 50%,#E8A400 100%);color:#1a1300!important}
a.eqbtn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.6);filter:brightness(1.06)}
a.eqbtn:active{transform:translateY(0)}
a.eqbtn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.eqrow{display:flex;justify-content:center;margin:24px 0 8px}
.eqbtn.wide{min-width:min(100%,400px);padding:18px 34px;font-size:22px}
.eqbtn.wide svg{width:40px;height:40px}
.eqbtn.side{flex-direction:column;gap:10px;padding:16px 10px}
.eqbtn.side svg{width:40px;height:40px}
.eqbtn.side .t{align-items:center;text-align:center}

/* balanced top bar: triathlon | motorcycle | data */
.snlinks .sndiv{width:1px;height:20px;background:#33353F;margin:0 6px}
.snlinks a.dl{color:#E7E2D6;font-weight:600}
.snlinks a.dl:before{content:"";display:inline-block;width:12px;height:11px;margin-right:6px;vertical-align:-1px;background:linear-gradient(#E7E2D6,#E7E2D6) 0 100%/3px 5px no-repeat,linear-gradient(#E7E2D6,#E7E2D6) 4.5px 100%/3px 11px no-repeat,linear-gradient(#E7E2D6,#E7E2D6) 9px 100%/3px 8px no-repeat}
.snlinks a.dl[aria-current=page]{box-shadow:inset 0 -2px 0 #E7E2D6;border-radius:0}
.sndata{position:relative;display:flex;align-items:center;margin-left:auto}
.sitenav .sndata .ddt{padding:9px 7px;margin-left:-6px;font-size:12px;color:#C9C4B5}
.ddm{display:none;position:absolute;top:100%;right:0;z-index:60;width:min(540px,94vw);grid-template-columns:1fr 1fr;gap:2px 22px;background:#14151A;border:1px solid #33353F;border-radius:8px;box-shadow:0 16px 36px rgba(0,0,0,.6);padding:14px 14px 10px}
.sndata:hover .ddm,.sndata:focus-within .ddm,.sndata.open .ddm{display:grid}
.ddm h5{margin:2px 8px 6px;font:600 11.5px 'IBM Plex Mono',monospace;letter-spacing:.08em}
.ddm .gt h5{color:#8FD3FF}.ddm .gm h5{color:#F5C518}
.sitenav .ddm a{display:block;padding:6px 8px;font-size:13.5px;line-height:1.35}
.ddm a i{font-style:normal;font-size:11px;color:#8a8573;margin-left:4px}
.sitenav .ddm a.all{grid-column:1/-1;border-top:1px solid #33353F;margin-top:8px;padding-top:10px;border-radius:0;font-weight:600}
@media(max-width:1199px){
 .sitenav .menu{display:inline-block}
 .snlinks{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;padding-bottom:8px}.snlinks.open{display:flex}
 .snlinks>a,.sndata>a{padding:11px 10px;border-top:1px solid #272a33}
 .snlinks .sndiv{display:none}
 .sndata{margin-left:0;flex-wrap:wrap;border-top:1px solid #272a33}.sndata>a{border-top:0;flex:1}
 .sitenav .sndata .ddt{margin-left:0;padding:11px 16px;border-left:1px solid #272a33;border-radius:0}
 .ddm{position:static;width:100%;box-shadow:none;border-radius:0;border:0;border-top:1px solid #272a33;grid-template-columns:1fr;padding:8px 6px}
 .sndata:hover .ddm,.sndata:focus-within .ddm{display:none}.sndata.open .ddm{display:grid}
 .sitenav .ddm a{padding:9px 14px}
}
/* a pointer to a chart that lives on another page (instead of a second copy) */
.chartlink{display:flex;align-items:center;gap:14px;margin:18px 0;padding:12px 16px;background:#1C1E25;border:1px solid #33353F;border-left:4px solid var(--cl,#F5C518);text-decoration:none!important;color:#E7E2D6!important;font:15px/1.45 'IBM Plex Sans',Arial,sans-serif}
.chartlink.t{--cl:#8FD3FF}
.chartlink:hover{border-color:var(--cl,#F5C518)}
.chartlink svg{flex:none;width:28px;height:28px;color:var(--cl,#F5C518)}
.chartlink span{flex:1}.chartlink b{display:block;color:var(--cl,#F5C518)}
.chartlink small{color:#C9C4B5;font-size:13.5px}
.chartlink:after{content:"→";color:var(--cl,#F5C518);font-weight:700}
figure[id]{scroll-margin-top:calc(var(--barh,52px) + 16px)}
