:root{--bg:#0b0b0c;--paper:#f2eee6;--red:#d83d32;--muted:#b3aca4;--font:'Barlow Condensed',Impact,'Arial Narrow',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:70px}body{margin:0;background:var(--bg);color:var(--paper);font-family:'DM Sans',Arial,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:var(--font);font-weight:900;line-height:.82;letter-spacing:-.025em}em{font-style:normal;color:var(--red)}.reading-progress{position:fixed;z-index:120;left:0;top:0;height:3px;width:0;background:var(--red)}.topbar{height:70px;position:fixed;z-index:110;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 5%;background:rgba(8,8,8,.78);backdrop-filter:blur(18px);border-bottom:1px solid #ffffff21}.logo{font:900 38px var(--font);letter-spacing:-2px}.logo span{color:var(--red)}.topbar nav{display:flex;gap:32px}.topbar nav a,.top-cta{font-size:11px;letter-spacing:1.6px;font-weight:800}.topbar nav a:hover{color:var(--red)}.top-cta{background:var(--red);padding:15px 21px}.overline{font-size:11px;letter-spacing:2.8px;font-weight:800;color:var(--red)}.button{display:inline-flex;gap:42px;justify-content:space-between;align-items:center;padding:20px 28px;font-size:12px;font-weight:800;letter-spacing:1.2px;transition:transform .25s,background .25s}.button:hover{transform:translateY(-4px)}.button.primary{background:var(--red);color:#fff}.hero{height:100svh;min-height:610px;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:105px 6% 30px;isolation:isolate;overflow:hidden}.hero-art{position:absolute;inset:0;z-index:-2;background:url('assets/station-sled-push.webp') 75% 43%/cover no-repeat;transform:scale(1.05);animation:herozoom 10s ease-out both}.hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#050505ed 0%,#080808af 42%,#0002 78%),linear-gradient(0deg,#080808e6 0%,transparent 47%,#08080870 100%)}@keyframes herozoom{from{transform:scale(1.15)}to{transform:scale(1)}}.hero-topline,.hero-footer{display:flex;justify-content:space-between;gap:16px;font-size:10px;font-weight:800;letter-spacing:2px;color:#d6cdc4}.hero-body{padding-bottom:7vh}.hero-body .overline{display:flex;align-items:center;gap:9px}.hero-body .overline i{width:8px;height:8px;background:var(--red)}.hero h1{font-size:clamp(120px,23vw,370px);margin:20px 0 20px}.hero h1 span{color:var(--red)}.hero h1 small{font-size:clamp(40px,6.3vw,100px);display:block;letter-spacing:.055em;color:var(--paper)}.hero-manifesto{font-family:var(--font);font-size:clamp(21px,3vw,38px);font-weight:800;line-height:1.05;letter-spacing:1px}.hero-actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap}.hero-caption{font-size:10px;letter-spacing:2px;color:#c7bfb5}.race-intro{text-align:center;padding:115px 6% 85px;background:#101010}.race-intro h2{font-size:clamp(62px,10vw,160px);margin:23px 0 30px}.race-intro-copy{max-width:610px;line-height:1.8;color:var(--muted);margin:0 auto}.hint{font-size:10px;letter-spacing:2px;color:#d94b3e;font-weight:800;margin-top:34px}.race-track{height:390vh;position:relative}.race-sticky{height:100svh;min-height:620px;position:sticky;top:0;overflow:hidden;isolation:isolate;background:#101010}.race-photo-stack{position:absolute;inset:0;z-index:-3}.race-photo{position:absolute;inset:0;background-size:cover;background-position:65% 41%;opacity:0;transform:scale(1.08);transition:opacity .45s ease,transform 1.15s ease;filter:contrast(1.1) saturate(.85)}.race-photo.active{opacity:1;transform:scale(1)}.race-gradient{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#060606f2 0%,#090909c9 34%,#08080859 80%),linear-gradient(0deg,#050505e8 0%,transparent 50%,#05050577 100%)}.race-grain{position:absolute;inset:0;z-index:-1;opacity:.10;background:repeating-linear-gradient(0deg,transparent 0 3px,#eee1 4px 5px);pointer-events:none}.race-content{padding:100px 6% 38px;min-height:100%;display:flex;flex-direction:column;justify-content:space-between}.race-eyebrow,.race-bottom-label{display:flex;justify-content:space-between;gap:15px;font-size:10px;font-weight:800;letter-spacing:2px;color:#d3c9bd}.race-main{margin-top:25px}.run-chip{font:800 25px var(--font);color:var(--red);letter-spacing:3px}.run-chip span{color:#fff}.run-chip b{font:700 11px 'DM Sans',sans-serif;color:#d4cac0;letter-spacing:1px}.station-kicker{font-size:11px;letter-spacing:3px;color:var(--red);font-weight:800;margin:26px 0 10px}.race-main h2{font-size:clamp(78px,14.2vw,225px);max-width:890px;overflow-wrap:break-word;margin-bottom:12px}.distance{display:flex;align-items:baseline;gap:9px;color:var(--red);font-family:var(--font)}.distance strong{font-size:clamp(70px,11vw,155px);line-height:1}.distance span{font-size:35px;font-weight:800}.station-copy{font-size:16px;line-height:1.6;color:#eee1d4;margin-top:12px}.race-steps{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-bottom:20px}.race-steps button{appearance:none;border:1px solid #ffffff30;background:#13131399;color:#c9c1b8;padding:10px 2px;min-height:48px;cursor:pointer;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;transition:.25s;font:800 11px 'DM Sans',sans-serif}.race-steps button small{font-size:8px;letter-spacing:.3px;font-weight:600}.race-steps button.active{background:var(--red);border-color:var(--red);color:white}.race-steps button:focus-visible{outline:2px solid white;outline-offset:2px}.race-timeline{height:3px;background:#ffffff45;margin-bottom:18px}.race-timeline>div{height:100%;width:12.5%;background:var(--red);transition:width .2s}.finish{text-align:center;padding:120px 5%;background:linear-gradient(#161111,#080808)}.finish h2{font-size:clamp(65px,10vw,165px);margin:27px 0 45px}.facilities{padding:125px 5% 105px}.facilities-heading{max-width:1300px;margin:0 auto 55px;display:grid;grid-template-columns:1fr .45fr;gap:30px;align-items:end}.facilities-heading .overline{grid-column:1/-1}.facilities-heading h2{font-size:clamp(75px,11vw,160px);margin:0}.facilities-heading>p:last-child{line-height:1.9;color:var(--muted);font-size:15px}.facility-grid{max-width:1300px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px}.facility{position:relative;overflow:hidden;min-height:380px;background:#222}.facility.big{grid-row:span 2;min-height:775px}.facility.wide{grid-column:1/-1;min-height:400px}.facility img{height:100%;width:100%;position:absolute;inset:0;object-fit:cover;object-position:center 34%;filter:brightness(.75);transition:transform .75s ease}.facility:hover img{transform:scale(1.05)}.facility:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,#050505dd)}.facility>div{position:absolute;bottom:30px;left:30px;right:25px;z-index:2}.facility span{color:var(--red);font-weight:800;font-size:11px;letter-spacing:2px}.facility h3{font-size:clamp(38px,4.2vw,70px);margin:13px 0}.facility p{font-size:14px;color:#e7dfd4}.image-note{color:#8c837c;font-size:11px;max-width:1300px;margin:20px auto 0}.contact{background:#16100f;padding:110px 6%;text-align:center}.contact h2{font-size:clamp(65px,10vw,150px);margin:25px 0}.contact>p:not(.overline){color:var(--muted);line-height:1.8}.contact-note{font-size:11px!important}footer{padding:42px 5%;display:flex;gap:25px;align-items:center;justify-content:space-between}footer small{max-width:450px;line-height:1.7;color:#888;font-size:9px;letter-spacing:1px}footer>a:last-child{font-size:10px;letter-spacing:2px;font-weight:800}
@media(max-width:800px){.topbar nav{gap:16px}.topbar nav a{font-size:9px}.top-cta{display:none}.hero h1{font-size:24vw}.race-track{height:360vh}.race-steps button small{display:none}.facility-grid{grid-template-columns:1fr}.facility.big,.facility.wide{grid-column:auto;grid-row:auto;min-height:440px}.facility{min-height:440px}.facilities-heading{grid-template-columns:1fr}.facilities-heading .overline{grid-column:auto}.facilities-heading h2{font-size:16vw}}
@media(max-width:520px){.topbar{padding:0 5%}.logo{font-size:31px}.topbar nav{gap:11px}.topbar nav a{font-size:8px;letter-spacing:.5px}.hero{padding:94px 6% 25px}.hero-art{background-position:59% center}.hero-topline{font-size:8px}.hero-topline span:first-child{max-width:140px}.hero-body{padding-bottom:4vh}.hero h1{font-size:26vw}.hero h1 small{font-size:13vw}.hero-manifesto{font-size:26px}.hero-caption{font-size:9px}.race-intro{padding:90px 6% 65px}.race-intro h2{font-size:15vw}.race-track{height:330vh}.race-sticky{min-height:540px}.race-content{padding:87px 6% 23px}.race-photo{background-position:62% center}.race-gradient{background:linear-gradient(90deg,#050505e8 0%,#080808a9 57%,#0005),linear-gradient(0deg,#050505e8,transparent 60%)}.race-main h2{font-size:clamp(64px,16vw,104px)}.distance strong{font-size:80px}.run-chip{font-size:20px}.station-kicker{font-size:9px}.race-bottom-label{font-size:8px}.race-steps{gap:3px}.race-steps button{min-height:43px}.finish{padding:90px 5%}.finish h2{font-size:14vw}.facilities{padding:90px 5%}.facility,.facility.big,.facility.wide{min-height:390px}.facility>div{left:20px;bottom:20px}.facility h3{font-size:52px}.contact{padding:85px 5%}.contact h2{font-size:14vw}footer{flex-wrap:wrap}footer small{order:3;flex:1 0 100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-art{animation:none}.race-photo,.facility img,.button,.race-timeline>div{transition:none}}

/* Premium condensed experience: immediate handoff from the club hero to station visuals. */
.race-track{height:245vh}
.race-sticky{height:100svh;min-height:590px}
.race-content{padding:100px 6% 28px}
.race-photo{background-position:68% 34%;filter:contrast(1.12) saturate(.88)}
.race-gradient{background:linear-gradient(90deg,rgba(4,4,4,.84) 0%,rgba(5,5,5,.69) 36%,rgba(4,4,4,.16) 81%),linear-gradient(0deg,rgba(4,4,4,.8),transparent 48%,rgba(4,4,4,.28))}
.race-main{margin-top:12px}.race-main h2{font-size:clamp(72px,12vw,178px);max-width:780px;letter-spacing:-.035em}
.run-chip{font-size:17px;letter-spacing:2px}.station-kicker{margin:17px 0 9px}.distance strong{font-size:clamp(66px,8vw,120px)}
.race-steps{margin-bottom:13px}.race-steps button{min-height:50px}.facility img{filter:brightness(.82) saturate(.9)}
@media(max-width:800px){.race-track{height:215vh}.race-main h2{font-size:clamp(62px,12vw,105px)}}
@media(max-width:520px){.race-track{height:200vh}.race-content{padding:85px 6% 22px}.race-main h2{font-size:clamp(61px,14vw,90px)}.distance strong{font-size:75px}.race-gradient{background:linear-gradient(90deg,rgba(4,4,4,.87),rgba(4,4,4,.5) 78%),linear-gradient(0deg,rgba(4,4,4,.86),transparent 68%)}}

/* Scrollcraft: everything below is driven by scroll position (custom properties set in script.js). */
.reading-progress{width:100%;transform:scaleX(0);transform-origin:left}
.topbar nav a{transition:color .25s}.topbar nav a.active{color:var(--red)}

/* Hero recedes under the circuit. */
.hero-art{transform:none;animation-name:heroscale;translate:0 calc(var(--hp,0)*16%)}
@keyframes heroscale{from{scale:1.15}to{scale:1.03}}
.hero-body{translate:0 calc(var(--hp,0)*-90px);opacity:calc(1 - var(--hp,0)*1.7)}
.hero-topline,.hero-footer{opacity:calc(1 - var(--hp,0)*2.4)}
.hero-shade:after{content:"";position:absolute;inset:0;background:#050505;opacity:calc(var(--hp,0)*.75)}

/* Circuit: one viewport of scroll pinned per ~0.6 screens, photos wipe in from below. */
.race-track{height:580vh}
.race-photo{opacity:1;transform:none;transition:none;overflow:hidden;clip-path:inset(calc((1 - var(--r,0))*100%) 0 0 0);will-change:clip-path}
.race-photo:first-child{--r:1}
.race-photo i{position:absolute;inset:0;background-size:cover;background-position:68% 34%;filter:contrast(1.12) saturate(.88);scale:calc(1.16 - var(--k,1)*.16);translate:0 calc((1 - var(--r,0))*7%);will-change:scale,translate}
.race-wipe{position:absolute;z-index:-1;left:0;right:0;top:0;height:2px;background:var(--red);box-shadow:0 0 28px 3px #d83d3299;opacity:0;transition:opacity .2s;pointer-events:none}
.race-ghost{position:absolute;z-index:-1;right:4%;bottom:17%;font:900 clamp(230px,36vw,540px)/.8 var(--font);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px #f2eee62e;translate:0 calc((var(--lp,.5) - .5)*-110px);pointer-events:none;user-select:none}

.station-panels{position:relative}
.js .station-panel{position:absolute;inset:0 0 auto 0;pointer-events:none}
.js .station-panel.is-active{position:relative;pointer-events:auto}
.station-panel h2{display:flex;flex-wrap:wrap;gap:0 .2em}
.station-panel .word{display:inline-block;overflow:hidden;padding:.07em .04em .03em 0;margin:-.07em 0 -.03em}
.station-panel .word>span{display:inline-block}
.js .station-panel .word>span{transform:translateY(112%);transition:transform .34s cubic-bezier(.6,0,.9,.4)}
.js .station-panel :is(.station-kicker,.distance,.station-copy){opacity:0;transform:translateY(34px);transition:opacity .26s ease,transform .3s cubic-bezier(.6,0,.9,.4)}
.js .station-panel.is-past .word>span{transform:translateY(-112%)}
.js .station-panel.is-past :is(.station-kicker,.distance,.station-copy){transform:translateY(-34px)}
.js .station-panel.is-active .word>span{transform:none;transition:transform .8s cubic-bezier(.16,.84,.24,1) calc(.14s + var(--n,0)*.07s)}
.js .station-panel.is-active :is(.station-kicker,.distance,.station-copy){opacity:1;transform:none;transition:opacity .55s ease .2s,transform .75s cubic-bezier(.16,.84,.24,1) .2s}
.js .station-panel.is-active .distance{transition-delay:.3s}.js .station-panel.is-active .station-copy{transition-delay:.38s}
.distance strong{font-variant-numeric:tabular-nums}

.race-timeline>div{width:100%;transform:scaleX(.125);transform-origin:left;transition:none}
.race-steps button.done{border-color:#d83d3273;color:#f2eee6}

/* Ticker seam between the circuit and the facilities. */
.ticker{overflow:hidden;border-block:1px solid #ffffff1c;background:#0e0e0f;padding:22px 0}
.ticker-row{display:flex;width:max-content;font:900 clamp(54px,8vw,118px)/.9 var(--font);letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1.2px #f2eee66b;white-space:pre;will-change:transform}
.ticker-row i{font-style:normal;color:var(--red);-webkit-text-stroke:0}

/* Facilities: cards unmask on entry, images drift inside their frames. */
.facility img{inset:-9% 0 auto 0;height:118%;translate:0 calc(var(--py,0)*-13%)}
.js .reveal{opacity:0;translate:0 44px;transition:opacity .8s ease,translate 1s cubic-bezier(.16,.84,.24,1)}
.js .reveal.in{opacity:1;translate:0 0}
.js .facility.reveal{opacity:1;translate:none;background:transparent}
.js .facility.reveal img{clip-path:inset(100% 0 0 0);transition:clip-path 1.15s cubic-bezier(.7,0,.15,1),transform .75s ease}
.js .facility.reveal:after{opacity:0;transition:opacity .6s ease .5s}
.js .facility.reveal.in img{clip-path:inset(0)}.js .facility.reveal.in:after{opacity:1}
.js .facility:nth-child(2).reveal img{transition-delay:.12s,0s}.js .facility:nth-child(3).reveal img{transition-delay:.2s,0s}
.js .facility.reveal>div{opacity:0;translate:0 24px;transition:opacity .7s ease .55s,translate .9s cubic-bezier(.16,.84,.24,1) .55s}
.js .facility.reveal.in>div{opacity:1;translate:0 0}
.js .facilities-heading>.reveal:nth-child(2),.js .contact>.reveal:nth-child(2){transition-delay:.08s}
.js .facilities-heading>.reveal:nth-child(3),.js .contact>.reveal:nth-child(3){transition-delay:.18s}
.js .contact>.reveal:nth-child(4){transition-delay:.26s}

@media(max-width:800px){.race-track{height:520vh}.race-ghost{right:3%;bottom:24%;font-size:52vw;-webkit-text-stroke-color:#f2eee61f}}
@media(max-width:520px){.race-track{height:470vh}.race-photo i{background-position:62% center}.ticker{padding:15px 0}}
@media(prefers-reduced-motion:reduce){.js .station-panel *,.js .reveal,.js .facility.reveal img,.js .facility.reveal:after,.js .facility.reveal>div{transition:none!important}.js .reveal,.js .facility.reveal>div,.js .facility.reveal:after{opacity:1;translate:none}.js .facility.reveal img{clip-path:none}.race-wipe{display:none}.hero-art{animation:none}}

/* Photo framing: images sit at 80% of their old "cover" size (source art is 4:5), anchored right and feathered into the dark ground where they no longer reach the edge. */
.hero,.race-sticky{container-type:size}
.hero-art,.race-photo i{background-size:calc(max(100cqw,80cqh)*.8) auto;background-repeat:no-repeat;background-position:100% 30%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%),linear-gradient(0deg,transparent,#000 26%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 30%),linear-gradient(0deg,transparent,#000 26%);mask-composite:intersect}
.race-photo{background:#0a0a0b}
.race-photo i{scale:calc(1.05 - var(--k,1)*.05)}
@keyframes heroscale{from{scale:1.07}to{scale:1}}
.facility img{inset:-4% 0 auto 0;height:108%;translate:0 calc(var(--py,0)*-7%)}
.facility:hover img{transform:scale(1.03)}
@media(max-width:520px){.hero-art,.race-photo i{background-position:62% 30%}}

/* Brand: colours and marks taken from the SUTRA Hybrid Club logo (red plate → gold plate). */
:root{--red:#f20a05;--red-deep:#c10201;--gold:#fac601;--orange:#f98b03;--brand:linear-gradient(90deg,var(--red),var(--orange) 62%,var(--gold))}
.logo{display:block;font-size:0;letter-spacing:0}.logo img{display:block;height:34px;width:auto}
footer .logo img{height:42px}
.hero h1{font-size:1rem;line-height:1;margin:22px 0 26px}
.hero-logo{display:block;width:clamp(300px,64vw,1000px);max-width:100%;height:auto;filter:drop-shadow(0 10px 40px #000a)}
.button.primary,.top-cta,.race-steps button.active{background:linear-gradient(180deg,var(--red),var(--red-deep));border-color:var(--red)}
.reading-progress,.race-timeline>div{background:var(--brand)}
.race-wipe{background:var(--brand);box-shadow:0 0 28px 3px #f98b0380}
em,.distance,.run-chip span,.ticker-row i,.facility span{color:var(--gold)}
.distance strong,.distance span{background:linear-gradient(180deg,var(--gold) 35%,var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.topbar nav a:hover,.topbar nav a.active{color:var(--gold)}
.race-steps button.done{border-color:#fac60166}
@media(max-width:520px){.logo img{height:25px}.hero h1{font-size:1rem}.hero-logo{width:100%}}
/* Desktop: station photos at ~51% of cover (three 20% steps out); the left feather starts where the photo now begins. */
@media(min-width:801px){.race-photo i{background-size:calc(max(100cqw,80cqh)*.512) auto;-webkit-mask-image:linear-gradient(90deg,transparent 49%,#000 68%),linear-gradient(0deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent 49%,#000 68%),linear-gradient(0deg,transparent,#000 22%)}}

/* Find us: the one light section, with real photos from the club's Google listing. */
.visit{background:var(--paper);color:#141210;padding:120px 5%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:60px;align-items:center}
.visit>*{max-width:650px}.visit-copy{justify-self:end;width:100%}
.visit .overline{color:var(--red-deep)}.visit em{color:var(--red)}
.visit h2{font-size:clamp(64px,8.6vw,132px);margin:22px 0 38px}
.visit-list{margin:0 0 40px;display:grid}
.visit-list>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;padding:17px 0;border-top:1px solid #14121026}
.visit-list>div:last-child{border-bottom:1px solid #14121026}
.visit-list dt{font-size:10px;font-weight:800;letter-spacing:2px;color:var(--red-deep);padding-top:4px}
.visit-list dd{margin:0;font-size:16px;line-height:1.55;font-weight:500}
.visit-list a{border-bottom:2px solid var(--gold);font-weight:700}
.visit-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.visit-photos figure{margin:0}.visit-photos figure:last-child{margin-top:56px}
.visit-photos img{display:block;width:100%;aspect-ratio:3/4.3;object-fit:cover;object-position:center 62%}
.visit-photos figcaption{font-size:11px;letter-spacing:.4px;color:#5d564e;margin-top:10px}
.contact>p:not(.overline){font-size:17px;color:#e7dfd4;margin-bottom:30px}
@media(max-width:800px){.visit{grid-template-columns:1fr;padding:90px 5%;gap:44px}.visit-copy{justify-self:start}.visit h2{font-size:17vw}.visit-list>div{grid-template-columns:92px minmax(0,1fr)}}