/* Cycle for Change — /nov7/, the page Robert shares for Cycling 4 one·n·ten (Oct 8, 2026).
   Loaded after /chrome.css (tokens, type, buttons, header, footer). Light page, Lane Paint:
   the stencil spells CYCLE FOR, the blank is filled with one·n·ten on the smeared-rose plate.
   Phones: everything down to the RunSignup button fits the first screen (checked 360×640 up to 430×932).
   Desktop: the words left, the picture right, its edges dissolving into the page. No type on the photo. */

/* —— first screen —— */
.rp-ph{display:block}
.rp-ph img{display:block;width:100%;height:clamp(150px,27svh,240px);object-fit:cover;object-position:64% 60%;
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 72%,transparent 100%)}
.rp-in{padding-block:2px clamp(40px,6vw,72px)}
.rp-when{margin:0 0 12px}
.rp-sign{--h:clamp(36px,11.2vw,60px);display:flex;flex-wrap:wrap;align-items:flex-end;gap:calc(var(--h) * .24);margin:0 0 16px;line-height:1;letter-spacing:0}
.rp-mark{display:block;height:var(--h);width:auto;color:var(--asphalt)}
.rp-plate{display:block;background:var(--creosote);color:var(--paper);font-weight:900;font-size:calc(var(--h) * .56);line-height:1.05;padding:.26em .36em .1em;letter-spacing:-.01em;white-space:nowrap}
.rp-lede{margin:0 0 18px;max-width:30ch;font-size:clamp(1.1rem,.6vw + 1rem,1.4rem);line-height:1.34}
.rp-pick{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:460px}
.rp-pick li{display:flex;flex-direction:column;gap:3px;padding-top:9px;border-top:3px solid var(--asphalt);font-size:15px;line-height:1.3;color:var(--mute)}
.rp-mi{display:flex;align-items:baseline;gap:5px;color:var(--asphalt);font-weight:800;font-size:17px}
.rp-mi .num{font-weight:900;font-size:clamp(2rem,2vw + 1.4rem,2.75rem);line-height:.9;letter-spacing:-.035em}
.rp-acts{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:460px}
.rp-go{width:100%;min-height:54px}

/* short phones: a smaller picture so the button still makes the first screen */
@media (max-width:759px) and (max-height:700px){
  .rp-ph img{height:clamp(120px,21svh,170px)}
  .rp-lede{margin-bottom:14px}
  .rp-pick{margin-bottom:16px}
}

/* —— the sections below —— */
.rp-s{padding-block:clamp(48px,7vw,96px);border-top:1px solid var(--line)}
.rp-s h2{margin:0 0 18px;max-width:16ch}
.rp-cols{display:grid;gap:18px}
.rp-where{margin:0 0 14px;font-size:17px;line-height:1.45}
.rp-col-a .link{margin-bottom:28px}
.rp-day{list-style:none;margin:0 0 32px;padding:0;border-top:3px solid var(--asphalt)}
.rp-day li{display:grid;gap:2px;padding:13px 0;border-bottom:1px solid var(--dust)}
.rp-t{font-weight:800}
.rp-facts{margin:0 0 12px;font-size:16px;border-top:3px solid var(--asphalt)}
.rp-facts div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--dust)}
.rp-facts dt{font-weight:800;flex:0 0 auto}
.rp-facts dd{margin:0;text-align:right;max-width:30ch}
.rp-checked{margin:0 0 24px;font-size:13px;font-weight:600;color:var(--mute)}
.rp-col-b > .btn{width:100%;min-height:54px}
.rp-why{background:var(--paper)}
.rp-why .lede,.rp-after .lede{margin-bottom:16px}
.rp-why p{max-width:52ch}
.rp-links{gap:14px 24px}
.rp .foot{margin-top:0}   /* the last section runs straight into the footer */

@media (min-width:520px){
  .rp-day li{grid-template-columns:8.5em minmax(0,1fr);gap:16px}
}

/* —— desktop: words left, picture right —— */
@media (min-width:900px){
  .rp-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;max-width:var(--maxw);margin-inline:auto}
  .rp-ph{order:2;padding-right:var(--gut)}
  .rp-ph img{height:min(720px,calc(100svh - 150px));min-height:520px;aspect-ratio:auto;object-position:50% 40%;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 97.5%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 88%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 97.5%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 88%,transparent 100%);
    mask-composite:intersect}
  .rp-in{order:1;padding-block:clamp(40px,5vw,72px)}
  .rp-sign{--h:clamp(56px,5.2vw,84px);margin-bottom:24px}
  .rp-lede{margin-bottom:24px;max-width:34ch}
  .rp-pick{margin-bottom:26px}
  .rp-acts{flex-direction:row;align-items:center;gap:24px;max-width:none}
  .rp-go,.rp-col-b > .btn{width:auto;padding-inline:32px}
  .rp-cols{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(32px,5vw,96px);align-items:start}
}
.nw{white-space:nowrap}

/* —— the film (Oct 8, 2026): the 26-second cut from the group rides, 9:16 as it was made, words burned in.
   Same behaviour as "From the ride" on ride pages: no download until it's wanted, phones wait for a tap,
   wide screens play it muted while it's on screen. No sound on the site (the Instagram cut carries the music). —— */
.rp-film-line{margin:0;max-width:34ch;font-size:17px;line-height:1.45;color:var(--mute)}
.rp-film-fig{margin:0;width:100%;max-width:360px}
.rp-film-frame{position:relative;background:var(--tar)}
.rp-film-frame video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:var(--tar);cursor:pointer}
.rp-film-play{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;padding:0;border:0;border-radius:50%;background:var(--paper);color:var(--asphalt);display:grid;place-items:center;cursor:pointer;transition:opacity .2s ease,transform .2s ease}
.rp-film-play svg{width:28px;height:28px;margin-left:5px;fill:currentColor}
@media (hover:hover){.rp-film-play:hover{transform:scale(1.06)}}
.rp-film-play:focus-visible{outline:3px solid var(--asphalt);outline-offset:4px}
.rp-film-fig[data-playing="true"] .rp-film-play{opacity:0;transform:scale(.9);pointer-events:none}
.rp-film-cap{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;margin-top:8px}
.rp-film-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0;background:none;border:0;color:var(--asphalt);font:700 15px/1.2 var(--display);cursor:pointer}
.rp-film-ico{display:inline-flex}
.rp-film-ico svg{width:16px;height:16px;fill:currentColor}
.rp-film-ico--pause,.rp-film-btn[data-playing="true"] .rp-film-ico--play{display:none}
.rp-film-btn[data-playing="true"] .rp-film-ico--pause{display:inline-flex}
.rp-film-btn [data-film-label]{border-bottom:1px solid var(--dust-deep);padding-bottom:2px}
.rp-film-btn:focus-visible{outline:2px solid var(--asphalt);outline-offset:3px}
.rp-film-where{flex:1 1 auto;font-size:14px;font-weight:600;color:var(--mute)}
.rp-film-len{font-size:14px;font-weight:600;color:var(--mute);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.rp-film-play{transition:none}}
@media (min-width:900px){.rp-film-fig{max-width:400px}}

/* —— Oct 8, 2026 (Robert): on desktop the hero is the riding wall — three panels of group-ride footage edge to
   edge, the left side washed light so the words sit on it. Phones keep the still, the two rides and the
   RunSignup button on the first screen (a still, not a film, on phones); the wall never loads there. —— */
.rp-wall,.rp-wall-btn{display:none}
@media (min-width:900px){
  .rp-hero{position:relative;display:flex;align-items:center;max-width:none;margin:0;overflow:hidden;
    min-height:clamp(600px,calc(100svh - 104px),820px);background:var(--bone)}
  .rp-ph{display:none}
  .rp-wall{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;z-index:0}
  .rp-hero{--edge:max(var(--gut),calc((100% - var(--maxw)) / 2 + var(--gut)))}
  .rp-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,rgba(225,223,219,.96) 0,rgba(225,223,219,.94) calc(var(--edge) + 540px),rgba(225,223,219,.7) calc(var(--edge) + 640px),rgba(225,223,219,0) calc(var(--edge) + 760px))}
  .rp-in{position:relative;z-index:2;width:100%}
  .rp-in > *{max-width:640px}
  .rp-wall-btn{display:inline-flex;align-items:center;min-height:44px;margin-top:18px;padding:0;background:none;border:0;
    border-bottom:1px solid var(--dust-deep);color:var(--mute);font:700 14px/1.2 var(--display);cursor:pointer}
  .rp-wall-btn[hidden]{display:none}
  .rp-wall-btn:focus-visible{outline:2px solid var(--asphalt);outline-offset:3px}
}