/*
Theme Name: Rollfast Cycling Club
Theme URI: https://rollfast.us
Author: Rollfast
Description: One-page theme for the Rollfast Cycling Club: a scroll-driven film opening, ride and membership sections, the journal, and clean pages for every existing post.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: rollfast-cycling
*/
/* Layout: a pinned full-screen film in 4 chapters. Each scroll gesture snaps to the next chapter; the film plays between chapters with an eased start and stop. Copy sits low-left, off the action. Then a plain join section. */
:root{
  --black:#111111;
  --white:#ffffff;
  --sky:#6AAAE4;      /* PMS 284 C: accents on black, black text on it */
  --sky-hover:#9CC6EE;
  --mute:rgba(255,255,255,.78);
  --font-display:"Jost","Futura",system-ui,sans-serif;
  --font-body:"Archivo",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--black);scroll-behavior:auto}
body{background:var(--black);color:var(--white);font-family:var(--font-body);font-size:16px;line-height:1.6;margin:0}
.track{position:relative;height:400vh;height:400svh}
.snap{position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start;scroll-snap-stop:always;pointer-events:none}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--black)}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;pointer-events:none}
.rm .poster{display:none}
.shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.72) 0,rgba(0,0,0,.38) 30%,rgba(0,0,0,0) 55%),
             linear-gradient(to bottom,rgba(0,0,0,.4),rgba(0,0,0,0) 20%)}
.mark{position:absolute;left:50%;top:clamp(16%,24vh,28%);width:clamp(210px,34vw,470px);height:auto;opacity:0;transform:translateX(-50%) scale(.96);pointer-events:none}
.rm .mark{opacity:1}
.bar{position:absolute;top:0;left:0;height:3px;width:100%;background:var(--sky);transform-origin:left;transform:scaleX(0);margin-top:env(safe-area-inset-top,0px)}
.brand{position:absolute;top:calc(22px + env(safe-area-inset-top,0px));left:max(20px,env(safe-area-inset-left,0px));
  right:max(20px,env(safe-area-inset-right,0px));display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-display);font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:12px}
.brand a{color:var(--white);text-decoration:none;border-bottom:2px solid var(--sky);padding-bottom:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--sky);outline-offset:4px}

/* copy: low left, off the riders */
.copy{position:absolute;left:max(24px,env(safe-area-inset-left,0px));right:max(24px,env(safe-area-inset-right,0px));
  bottom:calc(clamp(40px,9vh,96px) + env(safe-area-inset-bottom,0px));max-width:760px}
.beat{position:absolute;left:0;bottom:0;width:100%;opacity:0;transform:translateY(18px);will-change:opacity,transform;pointer-events:none;
  text-shadow:0 2px 30px rgba(0,0,0,.5)}
.beat.on{pointer-events:auto}
.eyebrow{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--sky);margin:0 0 12px}
.beat h1,.beat h2{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(40px,6.4vw,84px);line-height:1;letter-spacing:-.02em;text-wrap:balance}
.beat p.sub{margin:14px 0 0;font-size:clamp(15px,1.5vw,19px);color:var(--mute);max-width:40ch}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{display:inline-flex;align-items:center;height:48px;padding:0 24px;font-family:var(--font-display);font-weight:600;font-size:14px;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:2px solid transparent;transition:background .15s,color .15s;text-shadow:none}
.btn.sky{background:var(--sky);color:var(--black)}
.btn.sky:hover{background:var(--sky-hover)}
.btn.line{border-color:var(--white);color:var(--white)}
.btn.line:hover{background:var(--white);color:var(--black)}

.dim{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none}
.beat.mission{width:min(1120px,calc(100vw - 48px));text-shadow:none}
.beat.mission h2{font-size:clamp(34px,5vw,68px)}
.beat.mission h2 em{font-style:normal;color:var(--sky)}
.beat.mission .sub{max-width:52ch;color:var(--mute);font-size:clamp(15px,1.4vw,18px);line-height:1.55}
.vals{list-style:none;margin:clamp(18px,2.6vh,30px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}
.vals li{padding:14px 18px 0 0;display:flex;flex-direction:column;gap:6px;min-width:0;opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.beat.mission.on .vals li{opacity:1;transform:none}
.beat.mission.on .vals li:nth-child(1){transition-delay:.15s}.beat.mission.on .vals li:nth-child(2){transition-delay:.3s}.beat.mission.on .vals li:nth-child(3){transition-delay:.45s}.beat.mission.on .vals li:nth-child(4){transition-delay:.6s}.beat.mission.on .vals li:nth-child(5){transition-delay:.75s}
.vals b{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,2vw,28px);letter-spacing:-.01em}
.vals span{color:var(--mute);font-size:14px;line-height:1.45}
@media (max-width:900px){.vals{grid-template-columns:1fr 1fr}.vals span{display:none}.vals li{padding:12px 0 12px;border-bottom:1px solid var(--line)}.vals li:last-child{grid-column:1 / -1}}
@media (max-width:900px) and (max-height:700px){.beat.mission .sub{display:none}}
.rm .beat.mission{display:none}

/* chapter dots */
.dots{position:absolute;right:max(18px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px}
.dots button{all:unset;cursor:pointer;width:12px;height:12px;border:2px solid var(--white);border-radius:50%;opacity:.6;transition:background .2s,opacity .2s}
.dots button.on{background:var(--sky);border-color:var(--sky);opacity:1}
.dots button:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.hint{position:absolute;right:max(24px,env(safe-area-inset-right,0px));bottom:calc(clamp(40px,9vh,96px) + env(safe-area-inset-bottom,0px));
  font-family:var(--font-display);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);text-align:center;transition:opacity .3s}
.hint i{display:block;width:1px;height:34px;background:var(--sky);margin:10px auto 0;animation:drip 1.8s ease-in-out infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.load{position:absolute;left:max(24px,env(safe-area-inset-left,0px));top:calc(54px + env(safe-area-inset-top,0px));
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-variant-numeric:tabular-nums;transition:opacity .6s}

/* ---------- the page under the film ---------- */
:root{--ink:#16191d;--line:rgba(255,255,255,.18);--line-dk:rgba(17,17,17,.16);--blue:#1D64A5;--blue-dk:#17507f;--red:#CE0E2D;--red-dk:#A50B24;--slate:#3b4651;}
.sec{padding-block:clamp(72px,11vw,150px);padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));scroll-margin-top:52px}
.dark{background:var(--black);color:var(--white)}
.light{background:var(--white);color:var(--black)}
.sky{background:var(--sky);color:var(--black)}
.wrap{max-width:1180px;margin:0 auto}
.h2{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(36px,6vw,80px);line-height:1;letter-spacing:-.02em;text-wrap:balance}
.h2 em{font-style:normal;color:var(--sky)}
.lede{margin:0;font-size:clamp(17px,1.6vw,21px);line-height:1.55;max-width:46ch;min-width:0}
.dark .lede{color:var(--mute)} .light .lede{color:var(--slate)} .sky .lede{color:var(--black)}
.sec .eyebrow{margin-bottom:18px}
.light .eyebrow{color:var(--blue)} .sky .eyebrow{color:var(--black)}
.sec .btn{height:auto;min-height:48px;padding:12px 24px;text-align:center}
.btn.ink{background:var(--black);color:var(--white)} .btn.ink:hover{background:#000;box-shadow:0 0 0 3px var(--white)}
.btn.blue{background:var(--blue);color:var(--white)} .btn.blue:hover{background:var(--blue-dk)}
.btn.red{background:var(--red);color:var(--white)} .btn.red:hover{background:var(--red-dk)}
/* donate: brand blue, so it reads as its own moment after the journal */
#support{background:var(--blue);color:var(--white)}
#support .eyebrow{color:var(--white);opacity:.85}
#support .h2 em{color:var(--white)}
#support .lede,#support p{color:rgba(255,255,255,.9)}
#support .btn.red{background:var(--white);color:var(--ink)} #support .btn.red:hover{background:#e6eef6}
#support a:focus-visible,#support summary:focus-visible{outline-color:var(--white)}
.btn.linedk{border-color:var(--black);color:var(--black)} .btn.linedk:hover{background:var(--black);color:var(--white)}
.light a:focus-visible,.sky a:focus-visible{outline-color:var(--black)}
.split{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,6vw,96px);align-items:end}


/* mobile menu */
.burger,.menu{display:none}
@media (max-width:820px){
  .nav .pill,.brand a{display:none}
  .burger{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;position:fixed;z-index:30;top:calc(5px + env(safe-area-inset-top,0px));right:max(8px,env(safe-area-inset-right,0px));width:48px;height:48px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .burger i{display:block;width:26px;height:2px;background:var(--white);box-shadow:0 1px 8px rgba(0,0,0,.45);transition:transform .25s ease,opacity .2s ease}
  .burger.open i:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .burger.open i:nth-child(2){opacity:0}
  .burger.open i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .menu{display:flex;position:fixed;inset:0;z-index:25;background:rgba(17,17,17,.97);flex-direction:column;justify-content:center;gap:34px;padding:80px max(28px,env(safe-area-inset-left,0px)) 48px}
  .menu[hidden]{display:none}
  .menu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
  .menu ul a{display:block;padding:8px 0;font-family:var(--font-display);font-weight:500;font-size:clamp(34px,10vw,48px);letter-spacing:-.02em;line-height:1.1;color:var(--white);text-decoration:none}
  .menu ul a:active{color:var(--sky)}
  .menu .btn{align-self:flex-start}
}

/* nav, appears once the film is done */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:calc(10px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) 10px max(20px,env(safe-area-inset-left,0px));
  background:rgba(17,17,17,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
  transform:translateY(-110%);transition:transform .35s ease;font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.nav.show{transform:none}
.nav img{height:24px;width:auto;display:block}
.nav ul{display:flex;gap:26px;list-style:none;margin:0 0 0 auto;padding:0}
.nav a{color:var(--white);text-decoration:none}
.nav ul a:hover{color:var(--sky)}
.nav .pill{background:var(--sky);color:var(--black);padding:10px 18px;transition:background .15s}
.nav .pill:hover{background:var(--sky-hover)}
@media (max-width:820px){.nav ul{display:none}.nav .pill{margin-left:auto}}

/* mission */
.values{list-style:none;margin:clamp(56px,8vw,104px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line)}
.values li{padding:22px 22px 0 0;display:flex;flex-direction:column;gap:10px;min-width:0}
.values b{font-family:var(--font-display);font-weight:500;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.01em}
.values span{color:var(--mute);font-size:15px;line-height:1.5}
@media (max-width:1000px){.split{grid-template-columns:1fr;align-items:start}
  .values{grid-template-columns:1fr}.values li{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:16px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}}
@media (max-width:520px){.values li{grid-template-columns:1fr;gap:4px}}

/* photo band */
@media (min-width:901px){.band{min-height:100vh;min-height:100svh}}
.band{position:relative;min-height:clamp(540px,86vh,800px);overflow:hidden;display:flex;align-items:flex-end;background:var(--black);color:var(--white);
  padding-block:clamp(40px,7vw,96px);padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));scroll-margin-top:52px}
.band picture{position:absolute;left:0;right:0;top:-5%;height:110%;display:block;will-change:transform}
.band img.bg{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.band-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.86) 0,rgba(0,0,0,.55) 38%,rgba(0,0,0,0) 72%)}
.band .wrap{position:relative;width:100%}
.band blockquote{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(28px,4.6vw,62px);line-height:1.08;letter-spacing:-.02em;max-width:19em;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.45)}
@media (min-width:901px){.band .wrap{max-width:none;margin:0}.band blockquote{font-size:clamp(26px,3.1vw,46px);max-width:min(15em,29vw)}}
@media (max-width:900px){.band{display:block;min-height:0;padding:0}
  .band picture{position:relative;top:0;height:min(124vw,680px);transform:none!important}
  .band-shade{display:none}
  .band .wrap{padding:30px max(24px,env(safe-area-inset-left,0px)) 56px max(24px,env(safe-area-inset-left,0px))}
  .band blockquote{text-shadow:none}}

.band .by{margin:22px 0 28px;font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--sky)}

/* rides */
.head{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,6vw,96px);align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.rides-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.rides{list-style:none;margin:0;padding:0;border-top:2px solid var(--black)}
.rides li{display:grid;grid-template-columns:84px 1fr auto;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line-dk)}
.rides .day{font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.rides h3{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.01em;line-height:1.15}
.rides p{margin:4px 0 0;color:var(--slate);font-size:15px}
.rides .pace{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;border:1.5px solid var(--black);padding:6px 10px;white-space:nowrap}
.note{margin:14px 0 0;font-size:13px;color:var(--slate)}
.aside{display:flex;flex-direction:column;gap:14px;min-width:0}
.aside .btn{width:100%}
.aside a.plain{color:var(--blue);font-weight:600;text-underline-offset:4px}
.camp{margin-top:18px;background:var(--black);color:var(--white);padding:28px;display:flex;flex-direction:column;gap:12px}
.camp h3{margin:0;font-family:var(--font-display);font-weight:500;font-size:28px;letter-spacing:-.01em;line-height:1.1}
.camp p{margin:0;color:var(--mute);font-size:15px}
.camp a{color:var(--sky);font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid var(--sky);align-self:flex-start;padding-bottom:3px}
@media (max-width:900px){.head,.rides-grid{grid-template-columns:1fr}.head{align-items:start}}
@media (max-width:560px){.rides li{grid-template-columns:60px 1fr}.rides .pace{grid-column:2;justify-self:start}}

.how{list-style:none;margin:0;padding:0;counter-reset:st;border-top:2px solid var(--black)}
.how li{counter-increment:st;display:grid;grid-template-columns:64px 1fr;column-gap:20px;padding:26px 0;border-bottom:1px solid var(--line-dk);align-items:baseline}
.how li::before{content:counter(st);grid-row:1 / span 2;font-family:var(--font-display);font-weight:500;font-size:clamp(40px,5vw,64px);line-height:.9;color:var(--blue);letter-spacing:-.03em}
.how b{font-family:var(--font-display);font-weight:500;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.01em;line-height:1.1}
.how span{grid-column:2;margin-top:6px;color:var(--slate);font-size:16px;line-height:1.5;max-width:44ch}
@media (max-width:560px){.how li{grid-template-columns:44px 1fr;column-gap:14px}}

.kinds{margin-top:clamp(56px,8vw,104px)}
.kinds .kinds-h{margin:0 0 18px;max-width:none;font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.kinds ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);border-top:2px solid var(--black)}
.kinds li{padding-top:22px;min-width:0}
.kinds h3{margin:0 0 10px;font-family:var(--font-display);font-weight:500;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.01em;line-height:1.1}
.kinds p{margin:0;color:var(--slate);font-size:16px;line-height:1.55;max-width:38ch}
@media (max-width:900px){.kinds ul{grid-template-columns:1fr;gap:0}.kinds li{padding:22px 0;border-bottom:1px solid var(--line-dk)}}

/* photo strip */
.strip{background:var(--black);overflow:hidden;padding-block:clamp(10px,1.4vw,18px)}
.strip-track{display:flex;gap:clamp(8px,1vw,14px);width:max-content;will-change:transform;padding-left:max(0px,env(safe-area-inset-left,0px))}
.strip-track img{height:clamp(220px,34vw,460px);width:auto;display:block;flex:none}
@media (prefers-reduced-motion:reduce){.strip{overflow-x:auto}}

.kinds .kinds-note{margin:clamp(28px,4vw,48px) 0 0;max-width:34em;color:var(--black);padding-left:22px;border-left:4px solid var(--blue);font-family:var(--font-display);font-weight:500;font-size:clamp(20px,2.3vw,30px);line-height:1.25;letter-spacing:-.01em;text-wrap:balance}

/* join */
.join2{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(36px,7vw,110px);align-items:start}
.price{margin:22px 0 22px;display:flex;align-items:baseline;gap:14px;font-family:var(--font-display)}
.price b{font-weight:500;font-size:clamp(64px,10vw,128px);line-height:.9;letter-spacing:-.03em}
.price span{font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase}
.join2 .lede{margin-bottom:28px}
.fine{margin:14px 0 0;font-size:13px}
.perks{list-style:none;margin:0;padding:0;border-top:2px solid var(--black)}
.perks li{padding:18px 0 18px 30px;border-bottom:1px solid rgba(17,17,17,.28);position:relative;min-width:0}
.perks li::before{content:"";position:absolute;left:0;top:26px;width:12px;height:12px;background:var(--black)}
.perks b{display:block;font-family:var(--font-display);font-weight:500;font-size:clamp(19px,1.9vw,24px);letter-spacing:-.01em}
.perks span{display:block;margin-top:2px;font-size:15px;line-height:1.45}
@media (max-width:900px){.join2{grid-template-columns:1fr}}

/* journal */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.5vw,48px);margin-top:clamp(40px,6vw,72px)}
.pcard{display:flex;flex-direction:column;gap:14px;padding-top:22px;border-top:2px solid var(--sky);color:var(--white);text-decoration:none;min-width:0}
.pcard .meta{font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sky)}
.pcard h3{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(22px,2.4vw,32px);line-height:1.12;letter-spacing:-.01em;text-wrap:balance;transition:color .15s}
.pcard p{margin:0;color:var(--mute);font-size:15px;line-height:1.55}
.pcard .more{margin-top:auto;font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.pcard:hover h3{color:var(--sky)}
.topics{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(36px,5vw,56px);align-items:center}
.topics span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-right:8px}
.chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1.5px solid var(--line);color:var(--white);text-decoration:none;font-size:14px;transition:background .15s,color .15s,border-color .15s}
.chip:hover{background:var(--sky);color:var(--black);border-color:var(--sky)}
.chip.all{border-color:var(--sky);color:var(--sky)} .chip.all:hover{background:var(--sky);color:var(--black)}
@media (max-width:900px){.posts{grid-template-columns:1fr}}

/* support */
.support{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,6vw,96px);align-items:end}
.support .lede{margin-bottom:26px}
.fine-dk{margin:16px 0 0;font-size:13px;color:var(--mute)}
@media (max-width:900px){.support{grid-template-columns:1fr;align-items:start}}

/* more from rollfast */
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:clamp(36px,5vw,64px);border-top:2px solid var(--black)}
.tile{display:flex;flex-direction:column;gap:10px;padding:24px 22px 28px 0;color:var(--black);text-decoration:none;border-bottom:1px solid var(--line-dk);min-width:0}
.tile h3{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.01em;line-height:1.1;transition:color .15s}
.tile p{margin:0;color:var(--slate);font-size:15px;line-height:1.5}
.tile .go{margin-top:auto;padding-top:10px;font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.tile:hover h3{color:var(--blue)}
.partners{margin-top:clamp(40px,6vw,72px);display:flex;flex-wrap:wrap;gap:12px 36px;align-items:baseline}
.partners span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--slate)}
.partners i{font-family:var(--font-display);font-style:normal;font-weight:500;font-size:clamp(18px,1.8vw,22px);color:var(--black)}
@media (max-width:1000px){.tiles{grid-template-columns:repeat(2,1fr)}.tile{padding-right:18px}}
@media (max-width:540px){.tiles{grid-template-columns:1fr}}

/* contact + footer */
.contact{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,6vw,96px);align-items:start}
.phone{font-family:var(--font-display);font-weight:500;font-size:clamp(34px,5vw,64px);letter-spacing:-.02em;line-height:1;margin:22px 0 6px;user-select:all}
.contact dl{margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.contact dl div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.contact dt{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.contact dd{margin:0}
.contact a{color:var(--white);text-underline-offset:4px;text-decoration-color:var(--sky)}
.contact a:hover{color:var(--sky)}
.foot{margin-top:clamp(56px,8vw,96px);padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-size:13px;color:var(--mute)}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
@media (max-width:520px){.contact dl div{grid-template-columns:1fr;gap:2px}}

/* reduced-motion copy of the film's why-we-ride step */
.rm-mission .vals li{opacity:1;transform:none}
.rm-mission h2{font-family:var(--font-display);font-weight:500;font-size:clamp(34px,5vw,68px);line-height:1;letter-spacing:-.02em;margin:0 0 18px}
.rm-mission h2 em{font-style:normal;color:var(--sky)}
.rm-mission .sub{max-width:52ch;color:var(--mute)}
/* reveal on scroll (only armed by script; everything shows without it) */
[data-rv]{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv-pre{opacity:0;transform:translateY(26px)}
@media (prefers-reduced-motion:reduce){[data-rv]{transition:none}.rv-pre{opacity:1;transform:none}}
@media (max-width:560px){.hint{display:none}}

/* Reduced motion: no pinning or snapping; closing frame and copy only. */
.rm html,html.rm{scroll-snap-type:none}
.rm .track{height:100vh;height:100svh}
.rm .hint,.rm .load,.rm .bar,.rm .dots{display:none}
.rm .beat{display:none}

/* ---------- WordPress additions ---------- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.admin-bar .nav{top:32px}
.admin-bar .burger{top:calc(37px + env(safe-area-inset-top,0px))}
@media (max-width:782px){.admin-bar .nav{top:46px}.admin-bar .burger{top:calc(51px + env(safe-area-inset-top,0px))}}
.strava{margin-top:6px;background:var(--black);color:var(--white);padding:22px 22px 18px;display:flex;flex-direction:column;gap:12px}
.strava h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--sky)}
.strava iframe{width:100%;max-width:300px;border:0;display:block;background:#fff}
.strava a{color:var(--white);font-size:14px;text-underline-offset:4px;text-decoration-color:var(--sky)}
.formwrap{margin-top:clamp(40px,6vw,72px);scroll-margin-top:60px}
.formwrap h3{margin:0 0 14px;font-family:var(--font-display);font-weight:500;font-size:clamp(24px,3vw,36px);letter-spacing:-.01em}
.formcard{background:var(--white);padding:clamp(4px,1.5vw,16px)}
/*x*/.formwrap .formcard{max-width:860px}
iframe.jot{width:100%;min-height:900px;border:0;display:block}
.fnote{margin:14px 0 0;font-size:14px}
.fnote a{color:inherit;text-underline-offset:4px}
.give{margin-top:26px}
.give summary{list-style:none;cursor:pointer;display:inline-flex}
.give summary::-webkit-details-marker{display:none}
.give[open] summary{margin-bottom:22px}
.give .formcard{max-width:760px}
.give iframe.jot{min-height:760px}

/* inner pages */
.inner{padding-top:56px;background:var(--black)}
.ph{background:var(--black);color:var(--white);padding:clamp(56px,9vw,120px) max(24px,env(safe-area-inset-left,0px)) clamp(36px,5vw,64px)}
.ph h1{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(36px,6vw,76px);line-height:1.02;letter-spacing:-.02em;max-width:18em;text-wrap:balance}
.ph .meta{margin:20px 0 0;font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--sky)}
.ph .meta a{color:inherit;text-decoration:none}
.entry-wrap{background:var(--white);color:var(--black);padding:clamp(48px,7vw,96px) max(24px,env(safe-area-inset-left,0px))}
.entry{max-width:720px;margin:0 auto;font-size:18px;line-height:1.7;color:#1d242b}
.entry>*{max-width:100%}
.entry h2,.entry h3,.entry h4{font-family:var(--font-display);font-weight:500;letter-spacing:-.01em;line-height:1.15;color:var(--black);margin:2em 0 .6em}
.entry h2{font-size:clamp(28px,3.6vw,40px)}.entry h3{font-size:clamp(23px,2.6vw,30px)}
.entry p{margin:0 0 1.3em}
.entry a{color:var(--blue);text-underline-offset:3px}
.entry img,.entry video{max-width:100%;height:auto}
.entry figure{margin:2em 0}.entry figcaption{font-size:14px;color:var(--slate);margin-top:8px}
.entry blockquote{margin:2em 0;padding-left:22px;border-left:4px solid var(--blue);font-family:var(--font-display);font-size:1.3em;line-height:1.35}
.entry ul,.entry ol{padding-left:1.3em;margin:0 0 1.3em}
.entry iframe,.entry .wp-block-embed__wrapper iframe{max-width:100%}
.entry .wp-block-embed__wrapper,.entry .is-type-video{position:relative}
.entry .wp-has-aspect-ratio iframe{position:absolute;inset:0;width:100%;height:100%}
.entry .aligncenter{display:block;margin-left:auto;margin-right:auto}
.entry .alignleft{float:left;margin:.3em 1.4em 1em 0}.entry .alignright{float:right;margin:.3em 0 1em 1.4em}
.entry::after{content:"";display:block;clear:both}
.entry-img{max-width:1180px;margin:0 auto;padding:0 max(24px,env(safe-area-inset-left,0px))}
.entry-img img{width:100%;height:auto;display:block}
.listing{background:var(--black);color:var(--white);padding:0 max(24px,env(safe-area-inset-left,0px)) clamp(64px,9vw,120px)}
.listing .posts{margin-top:0}
.pagination{max-width:1180px;margin:clamp(40px,6vw,72px) auto 0}
.nav-links{display:flex;gap:10px;flex-wrap:wrap}
.nav-links a,.nav-links span{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1.5px solid var(--line);color:var(--white);text-decoration:none;font-size:14px}
.nav-links a:hover{background:var(--sky);color:var(--black);border-color:var(--sky)}
.nav-links .current{background:var(--sky);color:var(--black);border-color:var(--sky)}
.empty{color:var(--mute);font-size:18px;max-width:36em}
