/* Cycle for Change — group rides directory (/rides/).
   Loads after /events/events.css and uses its tokens: bone ground, asphalt
   type, creosote once per screen as the accent, dust hairlines. Outfit for
   display and body, Space Mono labels. Only what rides adds. */

/* —— page heads —— */
.gr-head{padding-top:6px}
.gr-head .lede{margin-bottom:.6em}
.gr-dir h2{margin-top:1.6em}
.gr-note{font-size:.85rem;color:var(--mute);max-width:46em;margin:28px 0 0}

/* —— search —— */
.gr-search-wrap{border-top:1px solid var(--dust);border-bottom:1px solid var(--dust);background:var(--bone-2);padding:22px 0 20px;margin:22px 0 0}
.gr-search{display:flex;gap:10px;flex-wrap:wrap}
.gr-search input{flex:1 1 320px;min-width:0;font:500 1.02rem/1.4 var(--body);color:var(--asphalt);background:var(--bone);border:1px solid var(--asphalt);border-radius:0;padding:11px 14px}
.gr-search input:focus{outline:2px solid var(--asphalt);outline-offset:2px}
.gr-search .btn{white-space:nowrap}
.gr-status{font-family:var(--mono);font-size:.71875rem;letter-spacing:.06em;color:var(--creosote-ink);margin:14px 0 0;min-height:1.2em}
.gr-chip{font:400 .6875rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--asphalt);background:var(--bone);border:1px solid var(--dust);border-radius:0;padding:8px 11px;cursor:pointer;text-decoration:none}
.gr-chip:hover{border-color:var(--asphalt)}
.gr-chip[aria-pressed="true"]{background:var(--asphalt);color:var(--bone);border-color:var(--asphalt)}
.gr-chip--mk{display:inline-flex;align-items:center;gap:7px;padding-left:9px}
.gr-chip-mark{width:16px;height:16px;flex:none;color:currentColor}

/* —— the finder (Oct 1, 2026): every pick is a tile with its mark and a live count ——
   Built by filterPanel() in tools/build-rides.js; rides.js (and hub.js on /rides/) keep the
   counts true. Square corners, hairlines, asphalt when picked. A tile that would leave no
   rides goes quiet (aria-disabled). The week is the calendar's month strip, by day. */
.gr-field{position:relative;display:flex;flex:1 1 320px;min-width:0}
.gr-field input{flex:1 1 auto;width:100%;padding-left:42px}
.gr-field-mark{position:absolute;left:13px;top:50%;width:20px;height:20px;margin-top:-10px;color:var(--mute);pointer-events:none}
.gr-search .gr-geo{gap:8px;padding:0 18px}
.gr-geo-mark{width:17px;height:17px;flex:none}
.gr-filters{margin-top:22px;display:grid;gap:22px}
.gr-group{border:0;margin:0;padding:0;min-width:0}
.gr-filter-label{display:flex;align-items:center;gap:10px;width:100%;float:none;padding:0;margin:0 0 10px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.gr-filter-label::after{content:"";flex:1;height:1px;background:var(--dust)}
.gr-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.gr-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;min-height:92px;padding:12px 12px 11px;background:var(--paper);border:1px solid var(--dust);border-radius:0;color:var(--asphalt);text-align:left;cursor:pointer;font:inherit;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.gr-tile-mark{width:28px;height:28px;flex:none;margin-bottom:auto;color:currentColor}
.gr-tile-name{display:block;margin-top:10px;font-family:var(--display);font-weight:600;font-size:15px;line-height:1.12;letter-spacing:-.01em}
.gr-tile-sub{display:block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.03em;text-transform:uppercase;color:var(--creosote-ink)}
.gr-tile-n{position:absolute;top:11px;right:11px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.02em;line-height:1;color:var(--creosote-ink);font-variant-numeric:tabular-nums}
.gr-tile[aria-pressed="true"]{background:var(--asphalt);border-color:var(--asphalt);color:var(--bone)}
.gr-tile[aria-pressed="true"] .gr-tile-n,.gr-tile[aria-pressed="true"] .gr-tile-sub{color:var(--dust)}
.gr-tile[aria-pressed="true"]::after{content:"";position:absolute;right:12px;top:12px;width:10px;height:5px;border-left:1.7px solid var(--bone);border-bottom:1.7px solid var(--bone);transform:rotate(-45deg)}
.gr-tile[aria-pressed="true"] .gr-tile-n{right:32px}
.gr-tile[aria-disabled="true"]{background:transparent;border-style:dashed;color:var(--dust-deep);cursor:default}
.gr-tile[aria-disabled="true"] .gr-tile-n,.gr-tile[aria-disabled="true"] .gr-tile-sub{color:var(--dust-deep)}
.gr-tile:focus-visible,.gr-day:focus-visible{outline:2px solid var(--asphalt);outline-offset:2px}
@media (hover:hover){.gr-tile:not([aria-pressed="true"]):not([aria-disabled="true"]):hover{border-color:var(--asphalt)}}

.gr-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));max-width:620px;border:1px solid var(--dust);background:var(--paper)}
.gr-day{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-height:92px;padding:12px 2px 10px;border:0;border-right:1px solid var(--dust);border-radius:0;background:transparent;color:var(--asphalt);cursor:pointer;font:inherit}
.gr-day:last-child{border-right:0}
.gr-day-bar{display:block;width:calc(100% - 18px);max-width:30px;height:max(2px,calc(var(--h,0) * 34px));margin-bottom:4px;background:var(--asphalt);opacity:.82;transition:height .2s ease}
.gr-day-l{font-family:var(--display);font-weight:700;font-size:16px;line-height:1;letter-spacing:-.01em}
.gr-day-n{font-family:var(--mono);font-size:.6875rem;line-height:1;color:var(--creosote-ink);font-variant-numeric:tabular-nums}
.gr-day.is-today::before{content:"";position:absolute;top:8px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--creosote)}
.gr-day[aria-pressed="true"]{background:var(--asphalt);color:var(--bone)}
.gr-day[aria-pressed="true"] .gr-day-bar{background:var(--bone);opacity:1}
.gr-day[aria-pressed="true"] .gr-day-n{color:var(--dust)}
.gr-day[aria-pressed="true"].is-today::before{background:var(--bone)}
.gr-day[aria-disabled="true"]{color:var(--dust-deep);cursor:default}
.gr-day[aria-disabled="true"] .gr-day-n{color:var(--dust-deep)}
@media (hover:hover){.gr-day:not([aria-pressed="true"]):not([aria-disabled="true"]):hover{background:var(--bone)}}
@media (prefers-reduced-motion:reduce){.gr-day-bar,.gr-tile{transition:none}}

.gr-tonight{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:4px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--asphalt)}
.gr-tonight:hover{text-decoration:underline;text-decoration-color:var(--creosote)}
.gr-tonight-mark{width:16px;height:16px;flex:none;color:var(--creosote-ink)}

/* what's left: one big number, the picks in words, Clear */
.gr-result{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:22px;padding-top:16px;border-top:1px solid var(--asphalt)}
.gr-result-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0;min-width:0}
.gr-result-n{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,9vw,3.4rem);line-height:.9;letter-spacing:-.04em;color:var(--asphalt);font-variant-numeric:tabular-nums}
.gr-result .gr-status{margin:0;font-family:var(--display);font-size:1rem;letter-spacing:0;line-height:1.35;color:var(--asphalt);min-height:0}
.gr-clear{flex:none;display:inline-flex;align-items:center;min-height:44px;font:400 .6875rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--asphalt);background:none;border:0;padding:0 2px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* while the rides are below the fold: how many, and a way down to them */
.gr-jump{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:520px;margin:0 auto;min-height:54px;padding:0 18px;background:var(--asphalt);color:var(--bone);text-decoration:none;font-family:var(--mono);font-size:.71875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.gr-jump-n{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.01em;text-transform:none}
#gr-list,#results{scroll-margin-top:calc(var(--nav-h) + 12px)}

@media (max-width:560px){
  .gr-search .gr-field{flex:1 1 0}
  .gr-search .gr-geo{flex:none;padding:0 14px}
  .gr-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gr-tile{min-height:88px;padding:10px 10px 10px}
  .gr-tile-name{font-size:14px}
}
@media (min-width:900px){
  .gr-filters{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px 36px}
  .gr-group--disc{grid-column:1 / -1}
}

/* —— results —— */
.gr-results-wrap{padding-top:8px}
.gr-states{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 26px;font-size:.92rem}
.gr-states a{text-decoration:none;border-bottom:1px solid var(--dust)}
.gr-states a:hover{border-color:var(--asphalt)}
.gr-states small{font-family:var(--mono);color:var(--mute);font-size:.6875rem;margin-left:2px}
.gr-state{margin:0 0 34px}
.gr-state-head{font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-.01em;margin:0 0 12px;display:flex;align-items:baseline;gap:10px}
.gr-state-head a{text-decoration:none}
.gr-state-head a:hover{text-decoration:underline;text-decoration-color:var(--creosote)}
.gr-count{font-family:var(--mono);font-size:.6875rem;color:var(--mute);letter-spacing:.1em}
.gr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.gr-card{display:flex;flex-direction:column;gap:5px;padding:16px 18px;background:var(--bone-2);border:1px solid var(--dust);text-decoration:none;color:inherit}
.gr-card:hover{border-color:var(--asphalt)}
.gr-card-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.gr-disc,.gr-dist{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--creosote-ink)}   /* mute is 4.03 on bone-2; creosote-ink clears */
/* Pass 6: the discipline's mark (cfc-site/rides/marks.svg) opens every card */
.gr-mark{width:22px;height:22px;flex:0 0 auto;color:var(--asphalt);margin:-3px 0}
.gr-dist{color:var(--creosote-ink);white-space:nowrap}
.gr-card-name{font-family:var(--display);font-weight:700;font-size:1.15rem;line-height:1.1;letter-spacing:-.01em}
.gr-card-place{font-size:.9rem}
.gr-card-when{font-size:.88rem;color:var(--mute)}
.gr-card-stat{font-family:var(--mono);font-size:.6875rem;color:var(--asphalt)}
.gr-wait{font-style:normal;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.gr-wait--waits{color:var(--creosote-ink)}
.gr-wait--regroups{color:var(--asphalt)}
.gr-wait--drops{color:var(--mute)}
.gr-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.gr-tag{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--dust);padding:2px 7px;color:var(--asphalt)}
.gr-tag-warn{border-color:var(--creosote);color:var(--creosote-ink)}
.gr-tag-ok{background:var(--creosote-ink);border-color:var(--creosote-ink);color:var(--bone)}
.gr-empty{padding:20px 0;color:var(--mute)}
.gr-empty p{margin:0 0 10px}
.gr-empty-actions{display:flex;flex-wrap:wrap;gap:8px}
.gr-hub-foot{color:var(--mute);font-size:.9rem;margin:30px 0 0}
.gr-events{margin:10px 0 30px}
.gr-events .gr-state-head{margin-top:1.4em}
.gr-event-list{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.gr-event-list small{color:var(--mute);font-family:var(--mono);font-size:.6875rem}

/* —— why block + crisis —— */
.gr-why{max-width:820px;margin-top:20px}
.gr-why p{max-width:46em}
.crisis{margin:22px 0 0;padding:16px 18px;border:1px solid var(--asphalt);background:var(--bone-2);font-size:.95rem;line-height:1.5;max-width:46em}

/* —— ride page —— */
.gr-ride .ride{max-width:820px}
.gr-place{font-family:var(--mono);font-size:.71875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:-.2em 0 .8em}
.gr-ride .gr-tags{margin:0 0 1.2em}
.gr-next{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0 0 14px;padding:14px 18px;background:var(--asphalt);color:var(--bone)}
.gr-next-label{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dust)}
.gr-next-when{font-family:var(--display);font-weight:700;font-size:1.3rem;line-height:1.15;letter-spacing:-.01em}
.gr-next-rel{font-size:.88rem;color:var(--dust)}
.gr-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 26px}
.gr-minor{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.gr-share-alt{font-size:.85rem;color:var(--mute)}
.gr-toast{font-family:var(--mono);font-size:.6875rem;color:var(--creosote-ink)}
.gr-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0;margin:0 0 10px;border-top:1px solid var(--dust);border-left:1px solid var(--dust)}
.gr-fact{padding:14px 16px;border-right:1px solid var(--dust);border-bottom:1px solid var(--dust)}
.gr-fact dt{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:0 0 6px}
.gr-fact dd{margin:0;font-size:.98rem;line-height:1.4;display:flex;flex-direction:column}
.gr-fact dd small{color:var(--mute);font-size:.85rem}
.gr-map{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--creosote-ink);margin-top:4px;text-decoration:none}
.gr-first{margin:34px 0 0;padding:20px 22px;border:1px solid var(--dust);background:var(--bone-2)}
.gr-first h2{margin:0 0 12px;font-size:1.3rem}
.gr-first dl{margin:0;display:grid;gap:10px}
.gr-first dl>div{display:grid;grid-template-columns:74px 1fr;gap:12px;align-items:baseline}
.gr-first dt{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--creosote-ink)}
.gr-first dd{margin:0;font-size:.96rem;line-height:1.55}
.gr-about p{max-width:46em}
.gr-links h2{margin-top:1.8em}
.gr-linkrow{display:flex;flex-wrap:wrap;gap:10px}
.gr-verify{margin-top:1.6em}
.gr-related{margin-top:3em;display:grid;gap:8px}
.gr-related h2{margin:0 0 4px}
.gr-related a{text-decoration:none;font-weight:500;border-top:1px solid var(--dust);padding:10px 0 0}
.gr-related a:hover{text-decoration:underline;text-decoration-color:var(--creosote)}
.gr-related small{color:var(--mute);font-family:var(--mono);font-size:.6875rem;font-weight:400}

@media (max-width:640px){
  .gr-first dl>div{grid-template-columns:1fr;gap:2px}
  .gr-next-when{font-size:1.1rem}
}

/* —— Pass 3 (Sept 28, 2026): cards carry a Save star; the /rides/ hub is search-first —— */
.gr-card{position:relative}
.gr-card-top{padding-right:30px}
.gr-card-name{text-decoration:none;color:inherit}
.gr-card-name::after{content:"";position:absolute;inset:0}
.gr-card:hover .gr-card-name{text-decoration:underline;text-decoration-color:var(--creosote);text-underline-offset:3px}
.gr-card:focus-within{border-color:var(--asphalt)}
.gr-save{position:absolute;top:8px;right:8px;z-index:1;width:36px;height:36px;display:grid;place-items:center;background:none;border:0;cursor:pointer;color:var(--mute);font-size:18px;line-height:1}
.gr-save[aria-pressed="true"]{color:var(--creosote-ink)}
.gr-save:hover{color:var(--asphalt)}
.gr-save:focus-visible{outline:2px solid var(--asphalt);outline-offset:-4px}
.gr-save-btn[aria-pressed="true"]{border-color:var(--creosote-ink);color:var(--creosote-ink)}

/* Pass 6: the search hero sits on paper, not tar (tar is no longer a canvas) */
.gr-hub .gr-hero{background:var(--paper);color:var(--asphalt);padding-block:clamp(28px,5vw,64px) clamp(24px,4vw,44px);border-bottom:1px solid var(--line)}
.gr-hub .gr-hero .crumbs a,.gr-hub .gr-hero .crumbs [aria-current]{color:var(--mute)}
.gr-hub .gr-hero .eyebrow{color:var(--mute)}
.gr-hub .gr-hero h1{color:var(--asphalt)}
.gr-hub .gr-hero .lede{max-width:46ch;color:var(--creosote-ink);margin:0 0 22px}
.gr-hub .gr-search{max-width:760px}
.gr-hub .gr-search input{background:var(--bone);border-color:var(--asphalt);font-size:1.1rem;padding:14px 16px 14px 44px}
.gr-hub .gr-search input:focus{outline:2px solid var(--asphalt);outline-offset:2px}
.gr-hub .gr-search .btn--bone{background:var(--asphalt);color:var(--bone);border-color:var(--asphalt)}
.gr-quick{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.gr-hub .gr-hero .gr-chip{background:transparent;color:var(--asphalt);border-color:var(--asphalt)}
.gr-hub .gr-hero .gr-chip:hover{background:var(--bone-2)}
.gr-hub .gr-hero .gr-chip[aria-pressed="true"]{background:var(--asphalt);color:var(--bone);border-color:var(--asphalt)}
.gr-hub .gr-hero .gr-filter-label{color:var(--mute)}
.gr-hub .gr-hero select{background:transparent;color:var(--asphalt);border-color:var(--asphalt)}
.gr-hub .gr-hero select option{color:var(--asphalt)}
.gr-more{margin-top:12px}
.gr-more>summary{cursor:pointer;font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding:8px 0;list-style:none;display:inline-block}
.gr-more>summary::-webkit-details-marker{display:none}
.gr-more>summary::after{content:" +"}
.gr-more[open]>summary::after{content:" −"}
.gr-hub .gr-status{color:var(--creosote-ink)}
.gr-hub .gr-status:empty{display:none}

.gr-hub .gr-results-wrap{padding-block:clamp(24px,4vw,40px) 0;scroll-margin-top:80px}
.gr-results-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 16px;margin:0 0 14px}
.gr-results-count{margin:0;font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--creosote-ink)}
.gr-more-row{margin:18px 0 0}

.gr-match{margin:clamp(36px,5vw,60px) 0 0;padding:clamp(22px,3.5vw,36px);background:var(--bone-2);border-top:2px solid var(--asphalt);display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.gr-match-head .eyebrow{margin:0 0 .4em}
.gr-match h2{margin:0}
.gr-match-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:18px 28px;width:100%}
.gr-match fieldset{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.gr-match legend{font-weight:700;font-size:1.05rem;letter-spacing:-.01em;margin:0 0 10px;padding:0;width:100%}
.gr-match-note{margin:0;font-size:.9rem;color:var(--mute)}

.gr-hub .gr-why{margin-top:clamp(40px,6vw,72px);max-width:820px}
.gr-hub .gr-why h2{margin:0 0 12px}

@media (max-width:640px){
  .gr-hub .gr-search .btn{flex:1 1 100%}
}
.gr-hub .gr-hero .gr-tonight{align-self:center;margin:0 0 0 4px;letter-spacing:.08em}
.gr-hub .gr-more .gr-filters{margin-top:12px}

/* Freshness (Sept 30, 2026). tools/lib/rides-freshness.js picks the words; these carry them.
   The "Checked" line on every card, the checked block on every ride page, the banner on a
   ride that's off the lists (dark once per page: the Next-ride box is hidden when it shows). */
.gr-card-checked{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;color:var(--creosote-ink);margin-top:2px}
.gr-card-checked--look{color:var(--asphalt);font-weight:700}
.gr-checked{display:flex;gap:14px;align-items:flex-start;margin:0 0 14px;padding:14px 18px;border:1px solid var(--dust);border-left:3px solid var(--creosote);background:var(--bone-2)}
.gr-checked--look{border-left-color:var(--asphalt)}
.gr-checked-mark{width:22px;height:22px;flex:none;color:var(--creosote-ink);margin-top:1px}
.gr-checked--look .gr-checked-mark{color:var(--asphalt)}
.gr-checked p{margin:0 0 6px;font-size:.95rem;line-height:1.5}
.gr-checked p:last-child{margin-bottom:0}
.gr-checked-nudge{font-weight:600}
.gr-banner{margin:0 0 18px;padding:16px 20px;background:var(--asphalt);color:var(--bone)}
.gr-banner p{margin:0 0 6px;line-height:1.5}
.gr-banner p:last-child{margin:0}
.gr-banner a,.gr-banner .link{color:var(--bone)}
/* The world: the English name under a local one, the visitor notes, a country's "what to know" */
.gr-name-en{font-family:var(--mono);font-size:.71875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:-.3em 0 .5em}
.gr-visit{margin:34px 0 0;padding:20px 22px;border:1px solid var(--dust);background:var(--bone-2)}
.gr-visit h2{margin:0 0 10px;font-size:1.3rem}
.gr-visit p{margin:0;max-width:46em;line-height:1.55}
.gr-country-notes{margin:22px 0 8px}
.gr-country-notes dl>div{grid-template-columns:170px 1fr}
@media (max-width:600px){.gr-country-notes dl>div{grid-template-columns:1fr;gap:2px}}
/* By country (Sept 30, 2026): a country's name can take two lines plus its cities, so the tile grows */
.tile-p--country{aspect-ratio:auto;min-height:168px;gap:6px}
.tile-p--country .t{font-size:clamp(1rem,calc((100cqw - 24px) / (var(--l,8) * .7)),1.9rem)}
.tile-p--country .b{font-size:.8rem;line-height:1.25}
.tile-p--country .n{font-size:1.6rem}
.gr-checked>div{flex:1;min-width:0}
.gr-checked .link{white-space:normal}
.gr-card-en{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--creosote-ink);margin-top:-3px}

/* —— Pass 15 (Oct 1, 2026): step down, don't scroll ——
   Every page asks one question with a few big picks (tools/build-rides.js: directory,
   areaPage, cityPage, facetPage); each pick opens a short page (subPage) or the ride.
   The card is a row: the mark, the name, when · where, one mono line of small facts. */
.gr-head .gr-sub{margin:.2em 0 0;font-size:1rem;line-height:1.4;color:var(--mute)}
.gr-head .gr-sub b{font-weight:800;color:var(--asphalt);font-variant-numeric:tabular-nums}
.gr-why-line{max-width:46ch;margin:.7em 0 0;font-size:1rem;line-height:1.5;color:var(--creosote-ink)}
.gr-dot{font-style:normal;color:var(--dust-deep)}
.gr-steps{display:flex;flex-direction:column;gap:clamp(30px,5vw,48px);padding-top:clamp(20px,3vw,32px)}
.gr-steps > .pledge,.gr-steps > .back,.gr-steps > .gr-footline{margin-top:0}
.gr-dir .gr-step > h2.gr-filter-label,.gr-dir h2.gr-list-h{margin:0 0 12px;font-weight:400;font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:10px}
.gr-dir h2.gr-list-h::after{content:"";flex:1;height:1px;background:var(--dust)}
.gr-wide-doors{margin-top:6px}

/* doorways: the filter tile, as a link */
a.gr-tile{text-decoration:none}
.gr-door{min-height:96px}
@media (hover:hover){a.gr-door:hover{border-color:var(--asphalt);background:var(--bone)}}
a.gr-door:focus-visible{outline:2px solid var(--asphalt);outline-offset:2px}
.gr-week--doors{max-width:none}
a.gr-day{text-decoration:none}
@media (hover:hover){a.gr-day:hover{background:var(--bone)}}
.gr-week--doors .gr-day{min-height:104px}
.gr-week--doors .gr-day-bar{max-width:34px;height:max(2px,calc(var(--h,0) * 40px))}

/* the two picks: new to group rides / want to go fast */
.gr-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:8px}
.gr-pick{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) auto;column-gap:14px;row-gap:2px;align-items:start;padding:16px 16px 15px;background:var(--paper);border:1px solid var(--dust);border-left:3px solid var(--asphalt);color:var(--asphalt);text-decoration:none}
.gr-pick-mark{grid-row:1 / span 3;width:28px;height:28px;margin-top:2px}
.gr-pick-k{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--creosote-ink)}
.gr-pick-name{font-family:var(--display);font-weight:700;font-size:1.2rem;line-height:1.12;letter-spacing:-.01em}
.gr-pick-when{font-size:.9rem;color:var(--mute)}
.gr-pick-go{grid-column:3;grid-row:1 / span 3;align-self:center;font-size:1.3rem}
.gr-pick > :not(.gr-pick-mark):not(.gr-pick-go){grid-column:2}
@media (hover:hover){.gr-pick:hover{border-color:var(--asphalt)}.gr-pick:hover .gr-pick-name{text-decoration:underline;text-decoration-color:var(--creosote);text-underline-offset:3px}}
.gr-pick:focus-visible{outline:2px solid var(--asphalt);outline-offset:2px}

/* the way to the full list, the quiet foot line, nearby cities */
.gr-all-link{margin:0}
.gr-all-link .link{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.71875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--asphalt);text-decoration:underline;text-decoration-color:var(--creosote);text-underline-offset:4px}
.gr-all-mark{width:18px;height:18px;flex:none}
.gr-footline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;color:var(--mute)}
.gr-footline a{color:var(--asphalt);text-decoration:underline;text-decoration-color:var(--dust-deep);text-underline-offset:3px}
.gr-footline-mark{width:16px;height:16px;flex:none;color:var(--creosote-ink)}
.gr-near{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px}
.gr-near .gr-filter-label{width:100%;margin:0}
.gr-near a{font-size:.98rem;text-decoration:none;border-bottom:1px solid var(--dust)}
.gr-near a:hover{border-color:var(--asphalt)}
.gr-near small{font-family:var(--mono);font-size:.6875rem;color:var(--mute)}
.gr-tonight-row{margin:0}
.gr-steps .back{margin:0}
.gr-steps .town-box{margin:0}

/* a country's "what to know", folded */
details.gr-country-notes{margin:0}
details.gr-country-notes>summary{cursor:pointer;font-weight:700;font-size:1.05rem;list-style:none}
details.gr-country-notes>summary::-webkit-details-marker{display:none}
details.gr-country-notes>summary::after{content:" +";font-family:var(--mono);color:var(--mute)}
details.gr-country-notes[open]>summary{margin-bottom:12px}
details.gr-country-notes[open]>summary::after{content:" −"}

/* the row */
.gr-grid{gap:8px}
.gr-card{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px;row-gap:3px;align-items:start;padding:14px 46px 13px 14px;background:var(--paper);border:1px solid var(--dust)}
.gr-card > .gr-mark{grid-column:1;grid-row:1 / span 4;margin:1px 0 0;width:22px;height:22px}
.gr-card > :not(.gr-mark):not(.gr-save){grid-column:2;min-width:0}
.gr-card-name{font-size:1.08rem;line-height:1.15}
.gr-card-when{font-size:.9rem;line-height:1.35;color:var(--mute)}
.gr-card-meta{font-family:var(--mono);font-size:.6875rem;letter-spacing:.02em;line-height:1.55;color:var(--creosote-ink)}
.gr-card-meta .gr-wait{letter-spacing:.04em}
.gr-card-meta .gr-dist{font-size:inherit;letter-spacing:inherit;text-transform:none}
.gr-card-meta .gr-card-checked{display:inline;margin:0;font-size:inherit}
.gr-card-warn{color:var(--asphalt);font-weight:700}
.gr-card-meta > * + *::before{content:"\00B7";content:"\00B7" / "";display:inline-block;margin:0 .5em;color:var(--dust-deep);font-style:normal;font-weight:400}
.gr-card .gr-save{top:6px;right:6px}
.gr-state{margin:0 0 26px}
.gr-state:last-child{margin-bottom:0}
.gr-sub-page .gr-state-head,.gr-area .gr-state-head,.gr-all-page .gr-state-head{font-size:1.1rem;margin:0 0 10px}
.gr-sub-page .gr-results-wrap,.gr-all-page .gr-results-wrap{padding-top:clamp(18px,3vw,28px)}
.gr-sub-page .gr-results-wrap .back,.gr-all-page .gr-results-wrap .back{margin-top:2em}
.gr-sub-page .gr-footline,.gr-all-page .gr-footline{margin-top:1.2em}
.gr-finder--days{margin-top:16px;padding:16px 0 14px}
.gr-finder--days .gr-filters{margin-top:0}
.gr-finder--days .gr-week{max-width:none}
@media (min-width:900px){.gr-finder--days .gr-filters{grid-template-columns:1fr}}
/* the jump rows on a long short page: the week (to each day's group) or the towns */
.gr-jumpweek{display:block;margin-top:clamp(16px,3vw,24px)}
.gr-jumpweek .gr-week{max-width:620px}
.gr-jumprow{margin-top:clamp(16px,3vw,24px)}
.gr-day-group,.gr-sub-page .gr-state{scroll-margin-top:calc(var(--nav-h) + 16px)}
.gr-day-group .gr-state-head{font-size:1.25rem}
/* the ride page, lighter: marked facts, the drill and the evidence folded */
.gr-fact{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:12px;align-items:start}
.gr-fact-mark{grid-row:1 / span 2;width:20px;height:20px;margin-top:1px;color:var(--creosote-ink)}
.gr-fact dt,.gr-fact dd{grid-column:2}
.gr-fact dt{margin:0 0 3px}
details.gr-fold{margin:24px 0 0;padding:0;border:1px solid var(--dust);background:var(--bone-2)}
details.gr-fold>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;font-weight:700;font-size:1.05rem;line-height:1.3}
details.gr-fold>summary::-webkit-details-marker{display:none}
details.gr-fold>summary::after{content:"+";font-family:var(--mono);font-weight:400;font-size:18px;color:var(--mute)}
details.gr-fold[open]>summary::after{content:"\2212"}
details.gr-fold>dl{padding:0 18px 18px}
.gr-checked-more{margin-top:4px}
.gr-checked-more>summary{cursor:pointer;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--creosote-ink)}
.gr-checked-more p{margin:6px 0 0;font-size:.92rem;color:var(--mute)}
.gr-checked-line .link{white-space:normal}
/* the town strip on a city page: two across on a phone, the card's last line dropped */
.gr-steps .town-box{margin-top:0}
.gr-steps .town-strip{grid-template-columns:repeat(auto-fill,minmax(min(150px,46%),1fr))}
.gr-steps .town-strip a{padding:14px 12px;gap:4px}
.gr-steps .town-strip a b{font-size:1rem}
.gr-steps .town-strip a span:last-child{display:none}
.gr-steps .town-strip a .eyebrow{display:block}

/* —— Pass 16 (Oct 2, 2026): drawn maps, ride buttons, badges, photos —— */
/* the maps (tools/build-rides.js mapFigure / usMap; outlines from data/geo/outlines.json) */
.gr-map{margin:0;position:relative}
.gr-map-svg{display:block;width:100%;height:auto;overflow:visible}
.gr-map-land{fill:var(--paper);stroke:var(--asphalt);stroke-width:1.4;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.gr-map-dot{fill:var(--asphalt);opacity:.6}
.gr-map-dot--dim{fill:var(--dust-deep);opacity:.45}
.gr-map-hub{fill:var(--bone);stroke:var(--asphalt);stroke-width:1.6;vector-effect:non-scaling-stroke}
.gr-map-hub--here{fill:var(--asphalt)}
.gr-map-ring{fill:rgba(42,46,40,.06);stroke:var(--asphalt);stroke-width:1.2;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.gr-map-halo{fill:none;stroke:var(--asphalt);stroke-width:1.4;vector-effect:non-scaling-stroke}
.gr-map-here{fill:var(--asphalt);stroke:var(--paper);stroke-width:2;vector-effect:non-scaling-stroke}
.gr-map-labels text{font-family:var(--mono);font-size:16px;letter-spacing:.02em;fill:var(--asphalt);paint-order:stroke;stroke:var(--paper);stroke-width:4px;stroke-linejoin:round}
.gr-map-labels .gr-map-name{font-weight:700}
.gr-map-labels .gr-map-n{fill:var(--creosote-ink)}
.gr-map-labels a{cursor:pointer}
.gr-map-labels a:hover .gr-map-name,.gr-map-labels a:focus .gr-map-name{text-decoration:underline}
.gr-map-labels a:hover .gr-map-hub{fill:var(--asphalt)}
.gr-map-labels a:focus{outline:none}
.gr-map-labels a:focus-visible .gr-map-hub{stroke-width:3}
.gr-map figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;margin-top:10px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.gr-map figcaption span{display:inline-flex;align-items:center;gap:8px}
.gr-map figcaption a{color:var(--asphalt);text-decoration:underline;text-decoration-color:var(--creosote);text-underline-offset:3px}
.gr-map-cap-mark{width:16px;height:16px;flex:none;color:var(--creosote-ink)}
/* Pass 18 (Oct 2, 2026): what's on the map besides the outline (data/geo/detail.json) — quiet,
   one family: contours and roads in asphalt, water in dust cut back to the bone. Under the dots. */
.gr-map-edge{fill:none;stroke:var(--asphalt);stroke-width:1.4;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
.gr-map-detail{pointer-events:none}
.gr-map-pic{transition:opacity .2s ease}
.gr-map-zlayer{display:none;opacity:0;transition:opacity .2s ease}
.gr-map-lake{fill:var(--bone);stroke:var(--dust);stroke-width:.8;vector-effect:non-scaling-stroke}
.gr-map-river{fill:none;stroke:var(--dust);stroke-width:1.4;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.gr-map-road{fill:none;stroke:var(--asphalt);stroke-opacity:.42;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.gr-map--zoomable.is-live .gr-map-zlayer{display:inline}
.gr-map--zoomable.is-zoomed .gr-map-zlayer{opacity:1}
.gr-map--zoomable.is-zoomed .gr-map-pic{opacity:0}
.gr-map-shield rect{fill:var(--paper);stroke:var(--asphalt);stroke-opacity:.55;vector-effect:non-scaling-stroke}
.gr-map-shield text{font-family:var(--mono);font-weight:700;fill:var(--asphalt);fill-opacity:.8;letter-spacing:.02em}
@media (prefers-reduced-motion:reduce){.gr-map-pic,.gr-map-zlayer{transition:none}}
/* a state's or country's own map, in its header */
.gr-head--map{display:grid;gap:18px 32px;align-items:center}
.gr-head--map .gr-map--area{max-width:min(100%,440px);justify-self:center;width:100%}
.gr-head--map .gr-map--area .gr-map-svg{max-height:420px}
@media (min-width:900px){
  .gr-head--map{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .gr-head--map .gr-map--area{justify-self:end}
  .gr-head--map .gr-map--area .gr-map-svg{max-height:380px}
}
/* —— Pass 17 (Oct 2, 2026): on a phone the area map zooms (mapZoom + /rides/map.js) ——
   Nothing here shows until map.js marks the map .is-live, and it only does that up to 640px. */
.gr-map-regions,.gr-map-zoom,.gr-map-chips,.gr-map-back,.gr-map-reset{display:none}
.tiles-p > a[hidden]{display:none}
@media (max-width:640px){
  .gr-map--zoomable.is-live .gr-map-svg{overflow:hidden;touch-action:manipulation}
  .gr-map--zoomable.is-live .gr-map-labels{display:none}
  .gr-map--zoomable.is-live .gr-map-dots{opacity:.4;transition:opacity .2s ease}
  .gr-map--zoomable.is-live.is-zoomed .gr-map-dots{opacity:0}
  .gr-map--zoomable.is-live .gr-map-regions{display:inline;transition:opacity .2s ease}
  .gr-map--zoomable.is-live.is-zoomed .gr-map-regions{opacity:0;pointer-events:none}
  .gr-map--zoomable.is-live .gr-map-zoom{display:inline;opacity:0;pointer-events:none;transition:opacity .2s ease}
  .gr-map--zoomable.is-live .gr-map-zoom.is-on{opacity:1;pointer-events:auto}
  .gr-map--zoomable.is-live .gr-map-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
  .gr-map--zoomable.is-live.is-zoomed .gr-map-back{display:inline-flex;position:absolute;top:0;left:0;background:var(--paper)}
  .gr-map-reset.is-on{display:inline-flex;margin-top:12px}
  .gr-map-chips .gr-chip,.gr-map-back,.gr-map-reset{min-height:44px;align-items:center;gap:7px;-webkit-tap-highlight-color:transparent}
  .gr-map-chip-n{opacity:.7;font-variant-numeric:tabular-nums}
}
/* the overview: dark = several cities (zooms in), pale = one city (goes to it) */
.gr-map-reg{cursor:pointer;-webkit-tap-highlight-color:transparent}
.gr-map-reg:focus{outline:none}
.gr-map-reg-hit,.gr-map-zhit{fill:transparent}
.gr-map-reg-dot{fill:var(--asphalt);stroke:var(--paper);stroke-width:2;vector-effect:non-scaling-stroke;transition:fill .15s ease}
.gr-map-reg-n{font-family:var(--mono);font-size:15px;font-weight:700;fill:var(--bone);pointer-events:none;font-variant-numeric:tabular-nums}
.gr-map-reg--one .gr-map-reg-dot{fill:var(--bone);stroke:var(--asphalt);stroke-width:1.6}
.gr-map-reg--one .gr-map-reg-n{fill:var(--asphalt)}
.gr-map-reg-name{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.02em;fill:var(--asphalt);paint-order:stroke;stroke:var(--paper);stroke-width:4px;stroke-linejoin:round;pointer-events:none}
.gr-map-reg:active .gr-map-reg-dot,.gr-map-reg:focus-visible .gr-map-reg-dot{fill:var(--creosote-ink)}
.gr-map-reg--one:active .gr-map-reg-dot,.gr-map-reg--one:focus-visible .gr-map-reg-dot{fill:var(--bone-2);stroke-width:3}
/* a region's own layer, drawn for its zoom (font-size and halo set per layer on each name) */
.gr-map-zoom text{font-family:var(--mono);letter-spacing:.02em;fill:var(--asphalt);paint-order:stroke;stroke:var(--paper);stroke-linejoin:round}
.gr-map-zoom .gr-map-name{font-weight:700}
.gr-map-zoom .gr-map-n{fill:var(--creosote-ink)}
.gr-map-zoom a{cursor:pointer;-webkit-tap-highlight-color:transparent}
.gr-map-zoom a:focus{outline:none}
.gr-map-zoom a:active .gr-map-hub,.gr-map-zoom a:focus-visible .gr-map-hub{fill:var(--asphalt)}
.gr-map-zoom a:focus-visible .gr-map-name{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.gr-map--zoomable .gr-map-regions,.gr-map--zoomable .gr-map-zoom,.gr-map--zoomable .gr-map-dots,.gr-map-reg-dot{transition:none}}
/* where a city sits / where a ride starts */
.gr-map--where,.gr-map--ride{padding:16px;background:var(--bone-2);border:1px solid var(--dust)}
.gr-map--where .gr-map-svg,.gr-map--ride .gr-map-svg{max-height:340px;margin:0 auto;width:auto;max-width:100%}
.gr-map--ride{margin:20px 0 0}
/* the tap-a-state map */
.gr-map--us .gr-map-svg{max-height:none}
.gr-us-st{stroke:var(--bone);stroke-width:.9;vector-effect:non-scaling-stroke;fill:var(--asphalt);transition:fill-opacity .15s ease}
.gr-us-st--0{fill:var(--paper);fill-opacity:1}
.gr-us-st--1{fill-opacity:.16}
.gr-us-st--2{fill-opacity:.32}
.gr-us-st--3{fill-opacity:.55}
.gr-us-st--4{fill-opacity:.88}
.gr-map--us a:hover .gr-us-st,.gr-map--us a:focus-visible .gr-us-st{fill:var(--creosote-ink);fill-opacity:1}
.gr-map--us a:focus{outline:none}
.gr-us-code{font-family:var(--mono);font-size:24px;font-weight:700;letter-spacing:.02em;fill:var(--asphalt);pointer-events:none}
.gr-us-code--3,.gr-us-code--4{fill:var(--bone)}
.gr-map--us a:hover .gr-us-code,.gr-map--us a:focus-visible .gr-us-code{fill:var(--bone)}
.gr-us-key{justify-content:flex-start !important;gap:6px 16px !important}
.gr-us-sw{display:inline-block;width:14px;height:14px;background:var(--asphalt);vertical-align:-2px}
.gr-us-sw--1{opacity:.16}.gr-us-sw--2{opacity:.32}.gr-us-sw--3{opacity:.55}.gr-us-sw--4{opacity:.88}
@media (prefers-reduced-motion:reduce){.gr-us-st{transition:none}}

/* a city's header wears its contour (the route art), fading toward the words */
.gr-head--art{position:relative;isolation:isolate}
.gr-head-art{position:absolute;z-index:-1;right:0;top:-12px;width:min(72vw,520px);max-width:100%;height:auto;aspect-ratio:1;object-fit:cover;opacity:.32;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent 100%);mask-image:radial-gradient(closest-side,#000 40%,transparent 100%)}
@media (min-width:900px){.gr-head-art{opacity:.4;top:-40px}}

/* the short page's badge: the pick, drawn big */
.gr-head--badge{position:relative}
.gr-badge{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:88px;height:88px;margin:4px 0 12px;background:var(--asphalt);color:var(--bone)}
.gr-badge-mark{width:44px;height:44px}
.gr-badge-day{font-family:var(--display);font-weight:800;font-size:2.4rem;line-height:.9;letter-spacing:-.04em}
.gr-badge-sub{max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:.6875rem;letter-spacing:.04em;text-transform:uppercase;color:var(--dust)}
@media (min-width:900px){.gr-head--badge .gr-badge{position:absolute;right:var(--gut);top:24px;width:128px;height:128px}.gr-head--badge .gr-badge-mark{width:62px;height:62px}.gr-head--badge .gr-badge-day{font-size:3.4rem}.gr-head--badge .gr-badge-sub{font-size:.6875rem;max-width:110px}}

/* the ride button: a stamp with the mark, the words, an arrow */
.gr-btn{display:inline-grid;grid-template-columns:48px minmax(0,auto) 44px;align-items:stretch;min-height:52px;max-width:100%;background:var(--asphalt);color:var(--bone);border:1px solid var(--asphalt);text-decoration:none;font-family:var(--mono);font-size:.71875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.25}
.gr-btn-mk{display:grid;place-items:center;background:var(--bone);color:var(--asphalt);border-right:1px solid var(--asphalt);transition:background-color .18s ease}
.gr-btn-mark{width:22px;height:22px}
.gr-btn-t{display:flex;align-items:center;padding:10px 14px 10px 16px;min-width:0}
.gr-btn-go{display:grid;place-items:center;border-left:1px solid rgba(232,223,208,.22);font-size:16px;font-weight:400;transition:transform .18s ease}
.gr-btn--ghost{background:var(--paper);color:var(--asphalt)}
.gr-btn--ghost .gr-btn-mk{background:var(--asphalt);color:var(--bone)}
.gr-btn--ghost .gr-btn-go{border-left-color:var(--dust)}
.gr-btn--back{grid-template-columns:44px 48px minmax(0,auto)}
.gr-btn--back .gr-btn-go{grid-column:1;grid-row:1;border-left:0;border-right:1px solid var(--dust)}
.gr-btn--back .gr-btn-mk{grid-column:2;grid-row:1}
.gr-btn--back .gr-btn-t{grid-column:3;grid-row:1}
@media (hover:hover){
  .gr-btn:hover .gr-btn-go{transform:translateX(3px)}
  .gr-btn--back:hover .gr-btn-go{transform:translateX(-3px)}
  .gr-btn:not(.gr-btn--ghost):hover .gr-btn-mk{background:var(--volt)}   /* volt on asphalt only */
  .gr-btn--ghost:hover{border-color:var(--asphalt);background:var(--bone)}
}
.gr-btn:focus-visible{outline:2px solid var(--asphalt);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.gr-btn-go,.gr-btn-mk{transition:none}}
.gr-btn-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:2em}
.gr-btn-row .gr-btn{flex:1 1 280px}
.gr-all-link .gr-btn{width:100%;max-width:440px}
.gr-actions .gr-btn{flex:0 1 auto}
@media (max-width:560px){.gr-actions .gr-primary{width:100%}}

/* photos: Robert's, in the house grade, dissolving into the paper at both edges */
.gr-photo{margin:0;position:relative}
.gr-photo img{display:block;width:100%;height:auto;object-fit:cover;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 82%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 82%,transparent 100%)}
.gr-photo--wide img{aspect-ratio:4/3;max-height:520px}
.gr-photo--tall img{aspect-ratio:4/5;max-height:560px}
@media (max-width:899px){.gr-photo{margin-inline:calc(-1 * var(--gut))}}
@media (min-width:900px){.gr-photo--wide img{aspect-ratio:16/8;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%)}.gr-photo--tall{max-width:520px}}
.gr-photo figcaption{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-top:8px}

/* the outline tiles on /rides/: the US and the land, drawn */
.tile-p--outline .tile-art{object-fit:contain;padding:28% 10% 22%;opacity:.5}

/* —— Pass 20 (Oct 2, 2026): Find a ride — the front door, and a shorter way down ——
   /find-a-ride/ asks What kind of ride? (doors); /rides/ asks Where? (In the US / Outside the US,
   cities as a chip row); the US page keeps the map, the ten busiest states as rows, the rest folded. */
.gr-kinds{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.gr-kinds{grid-template-columns:repeat(4,minmax(0,1fr))}.gr-kinds--two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px}}
.gr-kind{min-height:118px}
.gr-kind .gr-tile-name{font-size:17px;margin-top:14px}
.gr-kind .gr-tile-sub{text-transform:none;letter-spacing:0;font-family:var(--body);font-size:.78125rem;line-height:1.3;color:var(--mute);margin-top:2px}
.gr-kind--ink{background:var(--asphalt);border-color:var(--asphalt);color:var(--bone)}
.gr-kind--ink .gr-tile-sub,.gr-kind--ink .gr-tile-n{color:var(--dust)}
@media (hover:hover){a.gr-kind--ink:hover{background:var(--asphalt);border-color:var(--asphalt)}a.gr-kind--ink:hover .gr-tile-name{text-decoration:underline;text-underline-offset:3px}}
.gr-find .gr-head{padding-bottom:4px}
.gr-jumpcities{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:12px 0 0}
.gr-jumpcities-l{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-right:4px}
.gr-jumpcities .gr-chip{min-height:44px;display:inline-flex;align-items:center;gap:6px}
.gr-chip-n{font-size:.6875rem;color:var(--creosote-ink)}
/* the US page's state rows */
.gr-rows-st{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;border-top:1px solid var(--dust)}
@media (min-width:760px){.gr-rows-st{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gr-row-st{display:grid;grid-template-columns:2.4em minmax(0,1fr) auto;align-items:baseline;gap:8px;min-height:46px;padding:12px 2px;border-bottom:1px solid var(--dust);color:var(--asphalt);text-decoration:none}
.gr-row-st b{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:-.01em}
.gr-row-st span{font-size:14px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-row-st i{font-style:normal;font-family:var(--mono);font-size:.6875rem;color:var(--creosote-ink);font-variant-numeric:tabular-nums}
@media (hover:hover){.gr-row-st:hover b{text-decoration:underline;text-decoration-color:var(--creosote);text-underline-offset:3px}}
/* folded: the long lists and the explaining, one tap away (and still in the page for search) */
.gr-fold{margin-top:14px;border-top:1px solid var(--asphalt)}
.gr-fold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;min-height:48px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase}
.gr-fold>summary::-webkit-details-marker{display:none}
.gr-fold>summary::before{content:"+";font-weight:700;width:1em}
.gr-fold[open]>summary::before{content:"–"}
.gr-about{margin-top:34px;border-top:1px solid var(--dust)}
.gr-about-body{max-width:62ch;padding:2px 0 8px}
.gr-about-body p{margin:0 0 .8em;font-size:1rem;line-height:1.55}
.gr-about-body a{color:var(--asphalt);text-decoration:underline;text-decoration-color:var(--creosote);text-underline-offset:3px}
/* Pass 20, Robert's call: the map lives on /rides/ itself (Where? is the map), so the list and the
   rest of the world are two wide doors under it */
.gr-hub .gr-map--us{margin-top:2px}
.gr-where-more{display:grid;grid-template-columns:1fr;gap:6px;margin-top:14px}
@media (min-width:760px){.gr-where-more{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gr-wide-door{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:64px;padding:12px 14px;background:var(--paper);border:1px solid var(--dust);color:var(--asphalt);text-decoration:none}
.gr-wide-door-mk{width:26px;height:26px;color:currentColor}
.gr-wide-door b{display:block;font-family:var(--display);font-weight:600;font-size:16px;line-height:1.15}
.gr-wide-door span span{display:block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--creosote-ink);margin-top:3px}
.gr-wide-door i{font-style:normal;font-family:var(--mono)}
@media (hover:hover){a.gr-wide-door:hover{border-color:var(--asphalt);background:var(--bone)}}
a.gr-wide-door:focus-visible{outline:2px solid var(--asphalt);outline-offset:2px}

/* Pass 22 — client (hub.js, rides.js, map.js; Oct 2, 2026, the ten riders) */
.gr-head{overflow:hidden}   /* the header art can't widen a phone page */
/* small mono labels: every one is in rem now (11px floor at the default size), so phone text size scales them */
/* thumb room: 44px tall on anything a thumb hits, the look kept by padding */
.gr-save{width:44px;height:44px}
.gr-card .gr-save{top:2px;right:2px}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;margin-block:-14px}
.crumbs ol{row-gap:0}
.gr-near a{display:inline-flex;align-items:center;gap:6px;min-height:44px;border-bottom:0;text-decoration:underline;text-decoration-color:var(--dust);text-underline-offset:5px}
@media (hover:hover){.gr-near a:hover{text-decoration-color:var(--asphalt)}}
.gr-near{row-gap:0}
.gr-chip{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.gr-more>summary{min-height:44px;display:inline-flex;align-items:center}
/* the drill's BRING / ARRIVE / PACE / CHECK: creosote-ink, and a touch heavier at this size */
.gr-first dt{font-weight:700}
/* the badge's place name at 11px: two short lines rather than cut off ("Colorado Springs") */
.gr-badge-sub{white-space:normal;text-align:center;line-height:1.1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
/* the map: a city's name is a link (its dot and words); a ride's dot is only a mark, so it looks it */
.gr-map-dot,.gr-map-dots{pointer-events:none;cursor:default}
.gr-map-hit{fill:transparent;stroke:none;pointer-events:all}
/* /rides/: the results — what the search read, the town's own page and guide, never a dead end */
.gr-hub .gr-results-head{align-items:flex-start}
.gr-hub .gr-results-count{font-family:var(--display);font-size:1.05rem;letter-spacing:0;line-height:1.35;color:var(--asphalt);max-width:46ch}
.gr-hub .gr-results-count:empty{display:none}
.gr-hub .gr-results-head .gr-clear{margin:-10px 0 0 auto}
.gr-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;margin:-6px 0 14px}
.gr-links a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--mono);font-size:.71875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--asphalt);text-decoration:underline;text-decoration-color:var(--creosote);text-underline-offset:4px}
.gr-links .gr-links-hint{font-size:.95rem;color:var(--mute)}
.gr-links .gr-chip{margin-left:-8px}
.gr-hub .gr-empty{padding:4px 0 8px;color:var(--asphalt)}
.gr-empty-why{margin:0 0 14px;max-width:52ch;font-size:1.05rem;line-height:1.45}
.gr-empty-why b{font-weight:700}
.gr-empty-actions .gr-chip{text-decoration:none}
.gr-empty-add{margin:14px 0 0;font-size:.95rem}
.gr-empty-add a{color:var(--asphalt);text-decoration:underline;text-decoration-color:var(--creosote);text-underline-offset:3px}
.gr-hero-alt{margin:10px 0 0}
.gr-hero-alt a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--asphalt);text-decoration:underline;text-decoration-color:var(--dust-deep);text-underline-offset:4px}
.gr-hero-alt-mk{width:16px;height:16px;flex:none;color:var(--creosote-ink)}
.gr-hub .gr-status.visually-hidden{margin:0}
/* the search box at 150% text: the field keeps room for its words (in rem, so it grows with the text) and
   Near me drops under it rather than squeezing it to "C"; the placeholder shortens to fit (rides.js) */
.gr-search{row-gap:8px}
@media (max-width:560px){.gr-search .gr-field{min-width:min(100%,11rem)}}

/* Pass 22 — server (tools/build-rides.js; Oct 2, 2026, the ten riders) */
/* the row's mono line: waits · pace · length · checked. Each item stays whole and the line wraps between items;
   every item carries its dot in the gap before it, and the one a wrap pushes to a line's start is clipped */
.gr-card-meta{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:1.4em;overflow:hidden}
.gr-card .gr-card-meta > *{white-space:nowrap;margin:0 0 0 -1.4em}
.gr-card-meta > *::before,.gr-card-meta > * + *::before{content:"\00B7";content:"\00B7" / "";display:inline-block;width:1.4em;margin:0;text-align:center;color:var(--dust-deep);font-style:normal;font-weight:400}
/* the ride page: When / Starts at / Distance / Pace on the first screen, above the buttons */
.gr-facts--key{margin:14px 0 14px}
@media (max-width:560px){.gr-facts--key{grid-template-columns:1fr}.gr-facts--key .gr-fact{padding:12px 14px}}
/* the lede moved under "About": the class is shared with .gr-fold's explaining (.gr-about), so reset it here */
.gr-ride .gr-about{margin-top:34px;border-top:0}
.gr-ride .gr-about-lede{max-width:46ch;margin:0 0 .8em}
/* the drill: the house fold summary (Outfit, sentence case), not the mono caps one at the foot of the sheet */
.gr-ride details.gr-first.gr-fold{padding:0}
.gr-ride details.gr-first.gr-fold>summary{min-height:48px;padding:14px 18px;font-family:var(--display);font-size:1.05rem;letter-spacing:0;text-transform:none;justify-content:space-between}
.gr-ride details.gr-first.gr-fold>summary::before{content:none}
.gr-ride details.gr-first.gr-fold>dl{padding:0 18px 18px}
/* "First group ride? Start here →" (ride pages, the beginner and no-drop pages) */
.gr-first-link{display:flex;align-items:center;gap:10px;min-height:44px;margin:10px 0 0;font-size:1rem;line-height:1.3}
.gr-first-link-mark{flex:none;width:22px;height:22px;color:var(--creosote-ink)}
.gr-first-link a{color:var(--asphalt);font-weight:600;text-decoration:underline;text-decoration-color:var(--creosote);text-underline-offset:3px}
.gr-head .gr-first-link--head{margin:.5em 0 0}
.gr-first-link--ride{margin:8px 0 0}
/* the foot line's about link is longer now; on a phone its two links stack instead of a dot leading line two */
@media (max-width:560px){.gr-footline .gr-dot{display:none}.gr-footline a{min-height:28px;display:inline-flex;align-items:center}}
/* a badge page's h1 never runs into the badge on desktop (London's Saturday at 1440) */
@media (min-width:900px){.gr-head--badge h1,.gr-head--badge .gr-sub,.gr-head--badge .gr-why-line,.gr-head--badge .gr-first-link{padding-right:calc(128px + 28px)}}