/* Cycle for Change — the homepage (live since Sept 2026; Pass 6 "brighten" Sept 29).
   Loaded by cfc-site/index.html and cfc-site/pledge/index.html.

   Creosote house tokens, unchanged. Pass 6: tar is no longer a canvas. The page,
   the hero and the photo planes sit on bone/paper; dark is allowed once (the ride
   log, where volt reads). Photos wear the high-key house grade (tools/grade.py).
   No grain. Sections breathe (--sec roughly doubled). --paper is bone a step
   lighter, for text on the creosote field and the poster tiles.
   Two families: Outfit for display and body, Space Mono for labels and data.
   Volt means one thing: live, and only ever sits on tar or asphalt. */

:root{
  --bone:#E8DFD0;
  --bone-2:#E1D7C5;
  --paper:#F6F1E7;
  --dust:#C4B7A2;
  --creosote:#5C6B4A;
  --asphalt:#2A2E28;
  --tar:#1A1D18;
  --volt:#C6FF00;
  --mute:#5F5E56;
  --creosote-ink:#4A5639;   /* creosote a step darker: small text on bone clears 4.5:1 (creosote itself is 4.35) */
  --creosote-lift:#7E8F6A;  /* creosote a step lighter: the green FOR on asphalt clears 3:1 for large type (Pass 6) */
  --dust-deep:#8A7C66;      /* dust a step darker: a hairline that has to be seen (3:1 on bone) */
  --line:rgba(42,46,40,.18);
  --line-d:rgba(232,223,208,.2);

  --display:"Outfit",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --gut:clamp(16px,4.2vw,56px);
  --maxw:1360px;
  --sec:clamp(76px,9.5vw,152px);   /* Pass 6: air is the cheapest high-fashion move */
  --nav-h:64px;   /* Pass 23d: the same bar height on every screen */
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}   /* the menu, the tooltip and the status lines all rely on it */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bone)}
@media (max-width:899px){html{scroll-padding-bottom:84px}}   /* the tally bar never covers a focused field (WCAG 2.4.11) */
body{
  margin:0;
  background:var(--bone);
  color:var(--asphalt);
  font-family:var(--display);
  font-weight:400;
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
[id]{scroll-margin-top:calc(var(--nav-h) + 12px)}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
table.sr{display:block}   /* a table ignores width:1px otherwise and widens the page on phones */
.skip{position:absolute;left:-9999px;top:0;z-index:90;padding:10px 14px;background:var(--asphalt);color:var(--bone);font-family:var(--mono);font-size:12px}
.skip:focus{left:0}
.hp{position:absolute;left:-9999px}

/* —— type —— */
.eyebrow{
  margin:0;
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  line-height:1.4;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.h1,.h2,.h3{margin:0;font-weight:800;text-wrap:balance}
.h1{font-size:clamp(2.75rem,4.6vw + 1.4rem,4.75rem);line-height:.94;letter-spacing:-.035em}
.h1 span{display:block}
.h2{font-size:clamp(2.25rem,3.6vw + 1.35rem,4.25rem);line-height:.97;letter-spacing:-.032em}
.h3{font-size:clamp(1.3rem,.9vw + 1.08rem,1.7rem);line-height:1.06;letter-spacing:-.02em}
.lede{margin:0;max-width:34ch;font-size:clamp(1.15rem,.7vw + 1rem,1.45rem);line-height:1.36}
.p{margin:0;max-width:56ch}
.mute{color:var(--mute)}
.num{font-variant-numeric:lining-nums tabular-nums}

/* —— the marks (Pass 8): cfc-site/rides/marks.svg, one stroke, currentColor —— */
.mk{width:22px;height:22px;flex:0 0 auto;color:inherit;display:block}
.mk--big{width:44px;height:44px;margin-bottom:14px}
.mk--org{width:26px;height:26px;margin-bottom:8px}
.fact .mk{margin-bottom:4px;color:var(--creosote-ink)}
.tile .mk{grid-column:1;grid-row:1 / span 2;align-self:start;width:20px;height:20px;margin-top:2px;color:var(--creosote-ink)}
@media (min-width:900px){.fact .mk{margin:0 4px 0 0;align-self:center}}

/* —— small utilities —— */
.stack16{display:flex;flex-direction:column;gap:16px}
.m0{margin:0}
.w31{max-width:31ch}.w38{max-width:38ch}.w40{max-width:40ch}
.h-w12{max-width:12ch}.h-w13{max-width:13ch}.h-w14{max-width:14ch}.h-w15{max-width:15ch}
.h2--calc{font-size:clamp(1.9rem,2vw + 1.3rem,2.9rem)}
.soft{color:rgba(232,223,208,.86)}
.on-creosote .soft{color:rgba(246,241,231,.86)}

/* —— buttons: square, mono, one job each —— */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:50px;
  padding:0 24px;
  border:1px solid transparent;
  border-radius:0;
  background:transparent;
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn--bone{background:var(--bone);color:var(--asphalt);border-color:var(--bone)}
.btn--ink{background:var(--asphalt);color:var(--bone);border-color:var(--asphalt)}
.btn--ghost{border-color:currentColor}
.btn--glass{border-color:rgba(232,223,208,.55);background:rgba(26,29,24,.28);color:var(--bone);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn--sm{min-height:36px;padding:0 14px;font-size:10.5px}
@media (hover:hover){
  .btn--ink:hover{background:var(--volt);border-color:var(--volt);color:var(--asphalt)}   /* volt replaces asphalt; the ghost button fills asphalt instead (volt never on bone) */
  .btn--bone:hover{background:var(--asphalt);border-color:var(--asphalt);color:var(--bone)}
  .on-creosote .btn--bone:hover{background:var(--asphalt);border-color:var(--asphalt);color:var(--paper)}
  .btn--ghost:hover{background:var(--asphalt);border-color:var(--asphalt);color:var(--bone)}
  .btn--glass:hover{background:var(--bone);border-color:var(--bone);color:var(--asphalt)}
}
.link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding-bottom:6px;
  border-bottom:1px solid currentColor;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
}
.link::after{content:"\2192";transition:transform .18s ease}
@media (hover:hover){.link:hover::after{transform:translateX(4px)}}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}

/* —— announcement —— */
.announce{
  display:block;
  background:var(--tar);
  color:var(--bone);
  text-align:center;
  text-decoration:none;
  padding:10px var(--gut);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  border-bottom:1px solid var(--line-d);
}
.announce b{font-weight:700}
.announce span{color:var(--dust)}

/* —— nav: clear over the hero photo (asphalt type on the bright sky), bone once you're past it —— */
.nav{
  position:sticky;
  top:env(safe-area-inset-top,0px);
  z-index:50;
  height:var(--nav-h);
  margin-bottom:calc(-1 * var(--nav-h));
  color:var(--asphalt);
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;
  border-bottom:1px solid transparent;
}
.nav[data-solid="true"]{background:rgba(232,223,208,.94);color:var(--asphalt);border-bottom-color:var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* Pass 23b: the nav is bone from the first pixel on every screen (Robert: the squares on the
   picture read as blocks). The hero photo fades in from under its edge, so there is no seam.
   On phones the Pledge button leaves the bar: the hero's own button, the menu and the tally
   bar all carry the pledge, and the bar is quieter without a second asphalt block.
   Pass 23d — Robert: "especially on mobile it just looks sloppy." The square was a 44px tile
   floating in a 56px strip. Now the bar is 64px everywhere and on phones the square IS the
   corner: the full bar height, flush to the screen's left edge, the wheel 28px inside it; the
   wordmark is set to it (12.5px, .1em); the menu glyph is two full lines, its right edge on the
   gutter. Three things, one weight each: the stamp, the name, the lines. */
.nav{background:rgba(232,223,208,.94);border-bottom-color:var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nav-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:14px;text-decoration:none;min-height:44px}
.brand svg{width:26px;height:26px;flex:0 0 auto}
/* the wheel in its asphalt square: the mark's own ground, the drawing untouched. On asphalt the
   currentColor arc and hub go bone and the creosote arc lifts a step so it still reads. */
.brand .brand-sq{width:44px;height:44px;padding:9px;background:var(--asphalt);color:var(--bone)}
.brand-sq path:nth-of-type(2){stroke:var(--creosote-lift)}
.brand-word{font-weight:800;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.brand-word i{color:var(--creosote-ink)}
.brand-word i{font-style:normal}
@media (max-width:899px){
  .nav .btn--sm{display:none}
  .nav-in{padding-left:0}                                   /* the stamp sits in the corner; everything else keeps the gutter */
  .brand{gap:16px}
  .brand .brand-sq{width:var(--nav-h);height:var(--nav-h);padding:18px}   /* 64px square, the wheel 28px */
  .menu-btn{margin-right:-9px}                               /* the lines' right edge lands on the gutter */
}
/* Pass 5: nav labels read at body size (a tiny, low-salience nav is the one people don't use) */
.nav-links{display:none;gap:clamp(18px,2.4vw,32px);font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:0}
.nav-links a{text-decoration:none;padding:8px 0;border-bottom:1px solid transparent}
@media (hover:hover){.nav-links a:hover{border-bottom-color:currentColor}}
.nav-right{display:flex;align-items:center;gap:8px}
.nav .btn--sm{min-height:44px;background:var(--asphalt);color:var(--bone);border-color:var(--asphalt)}   /* Pass 23: the same height as the wheel square and the menu square beside it */
.menu-btn{width:44px;height:44px;display:grid;place-items:center;background:none;border:0;padding:0;cursor:pointer}
.menu-btn i{display:block;width:26px;height:2px;background:currentColor;box-shadow:0 8px 0 currentColor;transform:translateY(-4px)}
@media (max-width:359px){.brand-word{display:none}}
@media (min-width:900px){
  .nav-links{display:flex}
  .menu-btn{display:none}
  .brand-word{font-size:14px}
}

/* —— full-screen menu (phone) —— */
.menu{
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  flex-direction:column;
  gap:28px;
  padding:calc(env(safe-area-inset-top,0px) + 14px) var(--gut) calc(env(safe-area-inset-bottom,0px) + 24px);
  background:var(--bone);
  color:var(--asphalt);
  overflow-y:auto;
}
.menu-top{display:flex;align-items:center;justify-content:space-between}
.menu-close{width:44px;height:44px;background:none;border:0;cursor:pointer;position:relative}
.menu-close::before,.menu-close::after{content:"";position:absolute;left:11px;top:21px;width:22px;height:2px;background:currentColor}
.menu-close::before{transform:rotate(45deg)}
.menu-close::after{transform:rotate(-45deg)}
.menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.menu-list a{display:flex;align-items:baseline;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;font-weight:800;font-size:clamp(2rem,9.5vw,2.75rem);line-height:1;letter-spacing:-.03em}
.menu-list a span{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.16em;color:var(--mute)}
.menu-foot{margin-top:auto;font-size:15px;color:var(--mute);display:flex;flex-direction:column;gap:6px}
.menu-foot b{color:var(--asphalt)}

/* —— hero —— */
/* Pass 23 (Oct 3, 2026): one photograph, full bleed. One kicker. The line. Two actions.
   Robert, after the Assos homepage: the restraint is the point. The photo is whole and bright
   (house grade), runs edge to edge under a clear nav, and dissolves into the bone the copy sits
   on — no scrim, no type over the picture (Pass 7 and 11 rules hold). Phones: the photo takes
   just over half the screen, the copy fits under it on the first screen. Desktop: the photo
   runs the full width and fades in from the left, so the copy keeps bone under it.
   Pass 12's "no photo above the fold on phones" is lifted by this brief; the wheel in its
   asphalt square (.brand-sq) is what fixes the logo-over-photo problem that rule came from.
   Pass 23b, the same evening — Robert, on his phone: "It's very blocky and doesn't really
   blend." So: the nav is bone on every screen (no squares needed on the picture; the only
   block left is the wheel's), the photo fades in from the nav's bone at its top and out into
   the page at its foot (a picture that sits in the paper, not a band on it), the grade is a
   deeper bone duotone (tools/grade.py strength .6, warm .10) so the concrete and the wall
   share the page's palette, both actions are hairline buttons, and the copy sits clear of the
   fade instead of inside it. */
.hero{
  position:relative;
  isolation:isolate;
  background:var(--bone);
  color:var(--asphalt);
  overflow:hidden;
}
.hero-media{position:relative;z-index:0;height:clamp(300px,50svh,620px);margin:0;padding-top:var(--nav-h);box-sizing:border-box;background:var(--bone);overflow:hidden}
.hero-media picture{
  display:block;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 44%,transparent 96%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 44%,transparent 96%);
}
/* the square photo in a near-square box: a push into the top-left keeps the helmet and the frame
   leading and lets the rim fall into the fade */
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:scale(1.3);transform-origin:12% 0}
.hero-in{
  position:relative;
  z-index:2;
  margin-top:clamp(-28px,-3svh,-16px);   /* the copy starts where the fade has all but finished */
  padding-bottom:clamp(28px,3.4vw,44px);
}
.hero-copy{display:flex;flex-direction:column;gap:clamp(16px,1.8vw,24px)}
/* the kicker: one mono line — the edition, the live mile, the base. Middots, never a slash. */
.kicker{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:0 .7em;
  margin:0;
  font-family:var(--mono);
  font-size:.75rem;   /* 12px; scales with the phone's text size */
  line-height:1.4;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--asphalt);
}
.kicker i{font-style:normal;color:var(--mute)}
.kicker b{font-weight:700}
.kicker abbr{text-decoration:none}
/* the actions, equal hairlines (Pass 23b: a solid block was the heaviest thing on the screen);
   they fill asphalt on hover. Pass 23c: four of them — the pledge and the three finds — two by two
   on phones, one row on desktop, all above the fold. The last ride is the quiet link under them. */
.hero-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hero-more{align-self:flex-start;margin-top:2px;min-height:44px;align-items:flex-end;color:var(--asphalt)}
.btn--hero{min-height:52px;padding:0 10px;font-size:.6875rem;letter-spacing:.1em;background:transparent;color:var(--asphalt);border-color:var(--asphalt)}
@media (hover:hover){.btn--hero:hover{background:var(--asphalt);border-color:var(--asphalt);color:var(--bone)}}
@media (max-width:359px){.hero-acts{grid-template-columns:minmax(0,1fr)}}
.hero .link{color:var(--asphalt)}
.dot{position:relative;flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--volt)}
.dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--volt);opacity:0;animation:ping 2.4s ease-out infinite}
.dot--bone{background:var(--bone)}
.dot--bone::after{border-color:var(--bone)}
@keyframes ping{0%{transform:scale(.4);opacity:.9}70%,100%{transform:scale(1.25);opacity:0}}

.how-lede{color:var(--mute);max-width:48ch;font-size:clamp(1.05rem,.6vw + .95rem,1.3rem)}
.road-tally{margin:0 0 14px;font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dust);line-height:1.5}
.road-tally b{font-weight:700;color:var(--bone)}

.specs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:0;
  border-top:1px solid var(--line-d);
}
.specs div{padding:14px 0 0;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px}
.specs div + div{padding-left:16px;border-left:1px solid var(--line-d)}
.specs div:not(:last-child){padding-right:12px}
.specs dd{margin:0;font-weight:800;font-size:clamp(1.75rem,2.2vw + 1.2rem,3.25rem);line-height:1;letter-spacing:-.03em}
.specs dt{font-family:var(--mono);font-size:9.5px;line-height:1.35;letter-spacing:.13em;text-transform:uppercase;color:var(--dust)}

@media (min-width:900px){
  .hero{display:grid;align-items:end;min-height:clamp(620px,84svh,880px)}
  /* the photo runs the full width under the nav; its left edge fades into the bone the copy
     sits on, its foot into the page */
  .hero-media{position:absolute;inset:0;height:auto;padding-top:var(--nav-h);z-index:-2}
  .hero-media picture{
    -webkit-mask-image:linear-gradient(to right,transparent 24%,#000 60%),linear-gradient(to bottom,transparent 0,#000 12%,#000 74%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent 24%,#000 60%),linear-gradient(to bottom,transparent 0,#000 12%,#000 74%,transparent 100%);
    mask-composite:intersect;
  }
  .hero-media img{object-position:62% 44%;transform:none}
  .hero-in{margin-top:0;padding-top:calc(var(--nav-h) + 48px);padding-bottom:clamp(40px,4.5vw,64px)}
  .hero-copy{max-width:760px;gap:clamp(20px,2vw,30px)}
  .hero-copy .h1{max-width:600px}
  .kicker{font-size:.8125rem}
  .hero-acts{grid-template-columns:repeat(4,minmax(0,1fr));max-width:760px}
  .btn--hero{padding:0 18px;font-size:.71875rem;letter-spacing:.14em}
  .nav .btn--sm{display:inline-flex}
  .specs{max-width:640px}
  .specs dt{font-size:10.5px}
}

/* —— facts: the three things people ask first —— */
.facts{background:var(--bone);border-bottom:1px solid var(--line)}
.facts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.fact{padding:20px 0;display:flex;flex-direction:column;gap:2px}
.fact + .fact{padding-left:16px;border-left:1px solid var(--line)}
.fact b{font-weight:800;font-size:clamp(1.35rem,1.6vw + 1rem,2.25rem);line-height:1;letter-spacing:-.03em}
.fact span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
@media (min-width:900px){.fact{padding:24px 0;flex-direction:row;align-items:baseline;gap:12px}.fact + .fact{padding-left:32px}.fact span{font-size:11px}}
/* Pass 5: the mechanism in one sentence, right under the three facts (the strongest
   claim the site makes: 100% to the orgs, the money never touches Robert) */
.facts-line{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;padding:14px 0 18px;border-top:1px solid var(--line);font-size:15.5px;line-height:1.45;color:var(--creosote-ink)}
.facts-line span{max-width:58ch}
@media (min-width:900px){.facts-line{font-size:16.5px}}

/* —— sections —— */
.s{padding-block:var(--sec)}
.s--bone2{background:var(--bone-2)}
.s--tar{background:var(--tar);color:var(--bone)}
.s--creosote{background:var(--creosote);color:var(--paper)}
.s-head{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(28px,4vw,56px)}
.s-head--row{gap:20px}
@media (min-width:900px){
  .s-head--row{flex-direction:row;align-items:flex-end;justify-content:space-between}
}

/* —— rows (facts in a list) —— */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rows li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.rows .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.rows .v{font-weight:800;font-size:1.2rem;letter-spacing:-.02em;white-space:nowrap}
.rows .v small{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;margin-left:4px}

.chips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;border:0;margin:0;padding:0;min-width:0}
.chips legend{padding:0;margin-bottom:10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dust)}
.chip{position:relative}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip span{display:grid;place-items:center;min-height:50px;border:1px solid rgba(232,223,208,.4);font-weight:800;font-size:1.2rem;letter-spacing:-.02em;transition:background-color .15s ease,color .15s ease}
.chip input:checked + span{background:var(--bone);border-color:var(--bone);color:var(--asphalt)}
.chip input:focus-visible + span{outline:2px solid var(--bone);outline-offset:3px}
.chips--bone .chip span{border-color:var(--asphalt);min-height:56px;font-size:1.05rem;gap:2px;align-content:center}
/* Pass 5: every chip says what it adds up to */
.chip small{font-family:var(--mono);font-weight:400;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);line-height:1.2}
.chips--bone .chip input:checked + span small{color:var(--dust)}
.chips--bone .chip input:checked + span{background:var(--asphalt);border-color:var(--asphalt);color:var(--bone)}
.chips--bone .chip input:focus-visible + span{outline-color:var(--asphalt)}
.chips--bone legend{color:var(--asphalt)}
.calc-line{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.calc-line b{font-family:var(--display);font-weight:800;letter-spacing:-.03em;text-transform:none}
.calc-line > b{font-size:1.6rem;color:var(--asphalt)}
.calc-kit b{font-size:inherit;font-family:var(--mono);font-weight:700;letter-spacing:inherit;text-transform:uppercase;color:var(--asphalt)}

/* —— how it works: a real sequence, so it's numbered —— */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 12px;padding:22px 0;border-top:1px solid var(--asphalt)}
.steps .mk--big{grid-column:1;grid-row:1 / span 3;width:32px;height:32px;margin:2px 0 0}
.steps .n{grid-column:2;font-family:var(--mono);font-size:11px;letter-spacing:.16em;padding-top:0}
.steps p{grid-column:2;margin:0;color:var(--mute);max-width:40ch}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
  .steps li{grid-template-columns:1fr;align-content:start;gap:10px;padding:18px 0 0}
  .steps .mk--big{grid-column:1;grid-row:auto;width:64px;height:64px;margin:0 0 10px}
  .steps .n{grid-column:1;padding:0 0 18px}
  .steps p{grid-column:1}
}

/* —— the board —— */
.board-grid{display:grid;gap:clamp(36px,5vw,80px)}
.board-copy{display:flex;flex-direction:column;gap:18px}
.form{display:flex;flex-direction:column;gap:22px;max-width:460px;margin-top:10px}
.f{display:flex;flex-direction:column;gap:6px}
.lab{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.lab i{font-style:normal;color:var(--mute);letter-spacing:.1em}
.field{
  width:100%;
  margin:0;
  padding:4px 0 9px;
  border:0;
  border-bottom:1px solid var(--asphalt);
  border-radius:0;
  background:transparent;
  color:inherit;
  font-family:var(--display);
  font-size:20px;
  line-height:1.3;
  appearance:none;
}
.field:focus{outline:0;box-shadow:0 1px 0 var(--asphalt)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--mute)}
.check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--asphalt)}
.form .btn{align-self:flex-start;min-width:180px}
.ok{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
/* Pass 5: hints, the org choice, the note under the button, the thank-you state */
.hint{margin:0;font-size:13.5px;line-height:1.4;color:var(--mute);max-width:40ch}
.orgpick{border:0;margin:0;padding:0;min-width:0;display:grid;gap:0}
.orgpick legend{padding:0;margin-bottom:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.orgpick legend i{font-style:normal;color:var(--mute);letter-spacing:.1em}
.orgpick label{display:grid;grid-template-columns:20px minmax(0,1fr);gap:0 12px;align-items:start;padding:11px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.3;cursor:pointer}
.orgpick label:last-of-type{border-bottom:1px solid var(--line)}
.orgpick input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--asphalt)}
.orgpick small{grid-column:2;display:block;font-size:13.5px;color:var(--mute);line-height:1.35}
.form-note{margin:-6px 0 0;font-size:14px;line-height:1.4;color:var(--mute);max-width:42ch}
.done{display:flex;flex-direction:column;gap:16px;padding-top:22px;border-top:1px solid var(--asphalt)}
.done .h2{font-size:clamp(2rem,3vw + 1.2rem,3.4rem)}
.done .p{font-size:1.1rem;max-width:40ch}
.done ol{margin:0;padding-left:1.2em;color:var(--mute);max-width:44ch}
.done li{margin-bottom:6px}
.done-acts{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.card-fig{margin:4px 0 0;max-width:340px}
.card-fig img{display:block;width:100%;height:auto;border:1px solid var(--asphalt)}
.card-fig figcaption{margin-top:8px}
.done .fine{margin:0;font-size:13.5px;color:var(--mute);max-width:44ch}
.board{align-self:start}
/* Pass 10 (Sept 30, 2026): the board is a sheet — paper, a hairline frame, bib numbers,
   your line on top as you type it, the open lines under it. The rows are painted by home.js
   (row(): .n .name[.open] .ago .org); keep the class names. */
.sheet{background:var(--paper);border:1px solid var(--asphalt);padding:16px 18px 4px}
.board-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--asphalt)}
.board-kicker{display:flex;align-items:center;gap:10px}
.mk--sheet{width:26px;height:26px;color:var(--creosote-ink)}
.slots{list-style:none;margin:0;padding:0}
.slots li{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:0 14px;padding:14px 0 13px;border-bottom:1px solid var(--dust)}
.slots li:last-child{border-bottom:0}
.slots .n{justify-self:start;min-width:40px;padding:5px 0 4px;border:1px solid var(--asphalt);font-weight:800;font-size:13px;line-height:1;letter-spacing:.02em;text-align:center;font-variant-numeric:tabular-nums}   /* the bib */
.slots li.nobib{grid-template-columns:minmax(0,1fr) auto}
.slots .name{font-weight:800;font-size:clamp(1.5rem,1.6vw + 1.1rem,2.4rem);line-height:1;letter-spacing:-.03em;text-transform:uppercase;overflow-wrap:anywhere}
.slots .open{color:var(--mute)}   /* dust on paper doesn't read; mute does */
.slots .open:not(#slotYou){font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.16em;color:var(--mute);align-self:end;padding-bottom:2px}   /* an open line: the number and a quiet word */
.slots .org{grid-column:2;display:block;padding:0;border:0;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:2px}   /* .org is also the vote section's card class; reset it here */
.slots .more{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.slots .ago{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);white-space:nowrap;align-self:start;padding-top:4px}
/* the swag: four poster tiles */
.swag{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.swag li{display:flex;flex-direction:column;justify-content:space-between;gap:22px;min-height:150px;padding:14px 14px 12px;background:var(--bone-2)}
.swag li:nth-child(4n+2),.swag li:nth-child(4n+3){background:var(--paper)}
.mk--swag{width:36px;height:36px;color:var(--creosote-ink)}
.swag b{display:block;font-weight:800;font-size:1.7rem;line-height:1;letter-spacing:-.03em}
.swag span{display:block;margin-top:5px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--creosote-ink)}
.tiers{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--asphalt)}
.tiers li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.tiers b{font-weight:800;font-size:1.5rem;letter-spacing:-.03em}
.tiers span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-align:right}
.tiers-note{margin-top:12px;font-size:15px}
@media (min-width:900px){.swag{grid-template-columns:repeat(4,minmax(0,1fr))}.swag li:nth-child(4n+2),.swag li:nth-child(4n+3){background:var(--bone-2)}.swag li:nth-child(2n){background:var(--paper)}}
@media (min-width:900px){.board-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* —— where it goes: the one colour field on the page —— */
.orgs-head{display:grid;gap:20px;margin-bottom:clamp(28px,4vw,56px)}
.orgs-head .eyebrow{color:var(--paper)}
.orgs{display:grid;gap:0}
.org{display:flex;flex-direction:column;gap:10px;padding:24px 0;border-top:1px solid rgba(246,241,231,.34)}
.org p{margin:0;max-width:44ch;flex:1 0 auto}
.org-acts{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px}
.vote-msg{margin:20px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.orgs-foot{margin-top:clamp(24px,3vw,40px);display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.orgs-foot .p{color:rgba(246,241,231,.95);font-size:15.5px;max-width:44ch}
.org .btn[aria-pressed="true"]{background:var(--paper);border-color:var(--paper);color:var(--creosote);opacity:1}
.org .btn[disabled]{opacity:.45;cursor:default}
@media (min-width:900px){
  .orgs-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}
  .orgs-head .eyebrow{grid-column:1 / -1}
  .orgs{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
  .org{padding:22px 0 0}
  .org-acts{margin-top:18px}
}

/* —— photo planes (Pass 6): the photo full-bleed and bright, the words on bone next to it.
   No gradient wash. On phones the photo comes first at 4:3, the copy under it. —— */
.plane{background:var(--bone);color:var(--asphalt)}
.plane-grid{display:grid;gap:clamp(20px,3vw,36px)}
.plane-fig{margin:0 calc(-1 * var(--gut));aspect-ratio:4/3;overflow:hidden;background:transparent;
  -webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,#000 80%,transparent 100%)}
.plane-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.plane-copy{display:flex;flex-direction:column;gap:18px}
@media (min-width:900px){
  .plane-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:clamp(32px,5vw,80px)}
  /* full-bleed to the left edge of the screen; the right edge dissolves toward the words */
  .plane-fig{aspect-ratio:5/4;margin:0 0 0 calc(-1 * max(var(--gut),(100vw - var(--maxw)) / 2 + var(--gut)));
    -webkit-mask-image:linear-gradient(to right,#000 72%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 10%,#000 84%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,#000 72%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 10%,#000 84%,transparent 100%);
    mask-composite:intersect}
  .plane--flip .plane-fig{order:2}
}

/* —— the directory: a town box, then compact rows with counts (Pass 5: the four
   giant numerals are gone; the one big number on the page is the mile count) —— */
.dir-search{display:flex;flex-direction:column;gap:8px;margin-bottom:clamp(24px,3vw,36px)}
.dir-search .lab{color:var(--mute)}
.dir-row{display:flex;gap:10px;align-items:stretch}
.dir-row .field{flex:1 1 auto;min-width:0;font-size:18px;padding:8px 0}
.dir-row .btn{flex:0 0 auto;min-height:46px}
.dir-quick{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);display:flex;flex-wrap:wrap;gap:6px 16px}
.dir-quick a{color:var(--asphalt)}
.tiles{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--asphalt)}
.tile{display:grid;grid-template-columns:28px 52px minmax(0,1fr);gap:2px 12px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none}
.tile b{grid-column:2;grid-row:span 2;font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.02em;font-variant-numeric:tabular-nums;margin:0}
.tile .h3{grid-column:3;font-size:1.15rem;line-height:1.15}
.tile p{grid-column:3;margin:0;font-size:14.5px;line-height:1.4;color:var(--mute)}
@media (hover:hover){.tile:hover .h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}}
@media (min-width:900px){
  .dir-search{max-width:640px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,64px)}
}

/* —— 2027: six dates —— */
.season{margin-top:clamp(40px,6vw,80px)}
/* the next thing on the calendar (this used to be a bar above the nav) */
.next-up{margin:0 0 clamp(20px,3vw,32px);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:12px 0;border-top:1px solid var(--asphalt);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.next-up b{color:var(--asphalt);font-weight:700}
.next-up a{color:var(--asphalt)}
/* Pass 8: the 2027 route map (tools/route-map.py), the lower 48 as one stroke, the six rides, Phoenix as home */
.route{margin:0 0 clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:10px;color:var(--asphalt)}
.route .route-map{display:block;width:100%;max-width:640px;height:auto}
.route figcaption{color:var(--mute)}
@media (min-width:900px){
  .season-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:start}
  .route{order:2;margin:0;position:sticky;top:calc(var(--nav-h) + 24px)}
  /* the list beside the map: three columns, the cause under the name */
  .season-grid .ride a{grid-template-columns:104px minmax(0,1fr) auto;gap:6px 18px}
  .season-grid .ride .d{font-size:2.2rem}
  .season-grid .ride .for{grid-column:2;font-size:14px}
  .season-grid .ride .tag{grid-row:1;grid-column:3}
}
.rides{list-style:none;margin:0;padding:0;border-top:1px solid var(--asphalt)}
.ride{border-bottom:1px solid var(--line)}
.ride a{display:grid;grid-template-columns:86px minmax(0,1fr);gap:4px 14px;padding:18px 0;text-decoration:none}
.ride .d{grid-row:1 / span 3;font-weight:800;font-size:1.9rem;line-height:1;letter-spacing:-.04em}
.ride .d small{display:block;margin-top:7px;line-height:1.45;font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.ride .what{grid-column:2;display:flex;flex-direction:column;gap:5px;min-width:0}
.ride .spec{font-family:var(--mono);font-size:10.5px;line-height:1.5;letter-spacing:.1em;text-transform:uppercase}
.ride .for{grid-column:2;font-size:15px;color:var(--mute)}
.tag{justify-self:start;align-self:start;display:inline-block;margin-top:4px;padding:3px 7px;border:1px solid var(--asphalt);font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.tag--soft{border-style:dashed;color:var(--mute);border-color:var(--mute)}
.ride .tag{grid-column:2}
@media (hover:hover){.ride a:hover .h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}}
@media (min-width:900px){
  .ride a{grid-template-columns:150px minmax(0,1.3fr) minmax(0,1fr) 130px;align-items:center;gap:24px;padding:22px 0}
  .ride .d{grid-row:auto;font-size:2.6rem}
  .ride .what,.ride .for{grid-column:auto}
  .ride .tag{grid-column:auto;justify-self:end;align-self:center;margin:0}
  .ride .spec{font-size:11px}
}
.season-foot{margin-top:24px}

/* —— from the road —— */
.log-grid{display:grid;gap:clamp(36px,5vw,72px)}
.s--tar .eyebrow{color:var(--dust)}
.log{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-d)}
.log li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--line-d)}
/* Pass 8: the bar is the ride, its length the miles against the longest ride shown; volt on tar is "live" */
.bar-mi{display:block;height:6px;background:var(--dust);opacity:.45;transform-origin:left;transform:scaleX(var(--w,0))}
.log li:first-child .bar-mi{background:var(--volt);opacity:1}
.log .when{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dust)}
.log .when b{display:block;margin-top:4px;font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.02em;text-transform:none;color:var(--bone)}
.log .mi{font-weight:800;font-size:1.6rem;letter-spacing:-.03em}
.log .mi small{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.12em;margin-left:4px;color:var(--dust)}
.chart-card{display:flex;flex-direction:column;gap:14px;min-width:0}
.chart-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.chart-head p{margin:0}
.chart{position:relative;width:100%;touch-action:pan-y;outline-offset:6px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.tip{position:absolute;top:0;left:0;z-index:3;pointer-events:none;padding:8px 10px;background:var(--bone);color:var(--asphalt);white-space:nowrap;transform:translate(-50%,-100%)}
.tip b{display:block;font-weight:800;font-size:1.05rem;letter-spacing:-.02em;line-height:1.1}
.tip span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
@media (min-width:900px){.log-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end}}
/* Pass 5: the homepage's own log — dated rows that change, so the page is never a poster */
.road{display:grid;gap:clamp(24px,3vw,40px)}
.road-side{display:flex;flex-direction:column;gap:14px;align-self:end}
.road-side .p{color:var(--dust);font-size:15.5px}
.road-side .link{align-self:flex-start;color:var(--bone)}
.log .when b{color:var(--bone)}
@media (min-width:900px){.road{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}

/* —— read —— */
.read-grid{display:grid;gap:clamp(36px,5vw,64px)}
.cards{
  display:flex;
  gap:14px;
  margin-inline:calc(-1 * var(--gut));
  padding-inline:var(--gut);
  overflow-x:auto;
  scroll-padding-inline:var(--gut);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.cards::-webkit-scrollbar{display:none}
.card{flex:0 0 min(76%,330px);display:flex;flex-direction:column;gap:12px;text-decoration:none}
.card figure{position:relative;margin:0;aspect-ratio:4/5;max-width:100%;overflow:hidden;background:transparent;
  -webkit-mask-image:linear-gradient(to bottom,#000 84%,transparent 100%);mask-image:linear-gradient(to bottom,#000 84%,transparent 100%)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.card:hover img{transform:scale(1.035)}}
.card .eyebrow{color:var(--mute)}
.card p{margin:0;font-size:15px;line-height:1.42;color:var(--mute);max-width:36ch}
.guides{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--asphalt)}
.guides a{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:1.08rem;line-height:1.3}
.guides a::after{content:"\2192";flex:0 0 auto;font-family:var(--mono);font-size:12px}
@media (hover:hover){.guides a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}}
@media (min-width:1000px){
  .read-grid{grid-template-columns:minmax(0,9fr) minmax(0,4fr);align-items:start}
  .cards{margin:0;padding:0;overflow:visible;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,28px)}
  .card{flex:none}
}

/* —— close (Pass 6): on bone-2, the finish line in color, no wash —— */
.close{background:var(--bone-2);color:var(--asphalt);display:grid}
.close figure{position:relative;margin:0;aspect-ratio:4/3;max-width:100%;overflow:hidden;background:transparent;
  -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,#000 78%,transparent 100%)}
.close img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.close-copy{display:flex;flex-direction:column;justify-content:center;gap:20px;padding:clamp(36px,6vw,96px) var(--gut) clamp(44px,6vw,96px)}
.close .eyebrow{color:var(--mute)}
.close .lede{color:var(--creosote-ink)}
@media (min-width:900px){
  .close{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .close figure{order:2;aspect-ratio:auto;min-height:460px;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 28%),linear-gradient(to bottom,transparent 0,#000 18%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent 0,#000 28%),linear-gradient(to bottom,transparent 0,#000 18%);
    mask-composite:intersect}
  .close-copy{padding-left:max(var(--gut),calc((100vw - var(--maxw)) / 2 + var(--gut)))}
}

/* —— footer —— */
.foot{background:var(--asphalt);color:var(--bone);padding-block:clamp(48px,7vw,96px) 32px}
.stack{margin:0 0 clamp(40px,6vw,80px);font-weight:800;font-size:clamp(4.4rem,21.4vw,13rem);line-height:.84;letter-spacing:-.035em;text-transform:uppercase}
.stack span{display:block}
.stack .for{color:var(--creosote-lift)}
.foot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 16px}
.foot-col{display:flex;flex-direction:column;gap:2px}
.foot-col .eyebrow{color:var(--dust);margin-bottom:10px}
.foot-col a{padding:6px 0;text-decoration:none;font-size:1.02rem}
@media (hover:hover){.foot-col a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}}
.signup{grid-column:1 / -1;display:flex;flex-direction:column;gap:8px}
.signup .field{border-bottom-color:var(--bone);margin-bottom:10px}
.signup .field:focus{box-shadow:0 1px 0 var(--bone)}
.signup .btn{align-self:flex-start}
.signup .note{margin:0 0 6px;font-size:14.5px;line-height:1.4;color:var(--dust);max-width:32ch}
.foot-crisis{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;margin-top:clamp(36px,5vw,64px);padding-top:16px;border-top:1px solid var(--line-d);font-size:15px}
.foot-crisis .eyebrow{color:var(--dust)}
.foot-crisis b{font-weight:800}
.foot-line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 16px;margin-top:22px;padding-top:12px;border-top:1px solid var(--line-d);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dust)}
@media (min-width:900px){
  .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.4fr);gap:clamp(24px,4vw,56px)}
  .signup{grid-column:auto}
}

/* —— the tally, everywhere (phone) —— */
.bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(26,29,24,.96);
  color:var(--bone);
  border-top:1px solid var(--line-d);
  transform:translateY(110%);
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.bar[data-on="true"]{transform:none}
.bar-tally{display:flex;align-items:center;gap:10px;min-width:0}
.bar-tally b{font-weight:800;font-size:1.35rem;letter-spacing:-.03em;line-height:1}
.bar-tally span:last-child{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dust);line-height:1.3}
.bar .btn{min-height:44px;padding:0 18px}
@media (min-width:900px){.bar{display:none}}

/* —— motion: Pass 5 retired the scroll-driven "rise" on sections. Everything is visible
   at rest; the only motion left is the live dot, the hover states and the desktop film. —— */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .dot::after{display:none}
}

}

/* —— questions —— */
.faq-h{margin:0 0 12px}
.faq + .faq-h{margin-top:clamp(28px,4vw,44px)}
.faq{margin:0;display:grid;gap:0;border-top:1px solid var(--asphalt)}
.faq > div{display:grid;gap:8px;padding:20px 0;border-bottom:1px solid var(--line)}
.faq dt{font-weight:800;font-size:clamp(1.2rem,.9vw + 1rem,1.55rem);line-height:1.1;letter-spacing:-.02em}
.faq dd{margin:0;max-width:56ch;color:var(--mute);line-height:1.5}
.faq dd a{color:var(--asphalt)}
@media (min-width:900px){
  .faq > div{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;padding:24px 0}
}

/* —— the pledge page —— */
.nav--static{margin-bottom:0}
.tally-line{margin:0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.tally-line .wrap{display:flex;align-items:center;gap:10px;min-height:38px;padding-block:8px}
.tally-num{color:var(--asphalt);font-weight:700}
.board-s{padding-top:clamp(40px,6vw,80px)}
.board-copy .h1{font-size:clamp(2.75rem,5vw + 1.5rem,5.25rem)}
.board-s .lede{max-width:40ch}
.specs--dark{margin-bottom:clamp(32px,5vw,56px);max-width:none}
@media (min-width:900px){.specs--dark{max-width:none}}

/* —— Pass 4 (Sept 28, 2026): /pledge/ "What you get on the board" (SYN's join-the-club list) —— */
.perks-h{margin:28px 0 0}
.perks{margin-top:10px}
.perks li{display:grid;grid-template-columns:22px auto minmax(0,1fr);align-items:baseline;gap:0 12px}
.perks .mk{align-self:center;color:var(--creosote-ink)}
.perks b{font-size:1.1rem;white-space:nowrap}
.perks span{font-family:var(--display);font-size:.95rem;letter-spacing:0;text-transform:none;text-align:right;max-width:30ch;color:var(--mute);line-height:1.35}

/* —— Pass 11 (Sept 30, 2026): marks where the page still read as words — the doors' kicker, the
   six rides (type before the name, status in the tag), next up, the field-note cards, the guides
   list, the questions, and three facts under Find your people. Sized per context; creosote-ink. —— */
.eyebrow--mk{display:inline-flex;align-items:center;gap:8px}
.mk--eyebrow{width:16px;height:16px;color:var(--creosote-ink)}
.mk--h3{display:inline-block;width:19px;height:19px;vertical-align:-3px;margin-right:9px;color:var(--creosote-ink)}
.tag .mk--tag{display:inline-block;width:12px;height:12px;vertical-align:-2px;margin-right:6px}
.next-up-k{display:inline-flex;align-items:center;gap:7px}
.mk--inline{width:14px;height:14px;color:var(--creosote-ink)}
.mk--li{width:18px;height:18px;color:var(--creosote-ink)}
/* Pass 22: the two-column grid only where the dt has its mark — a dt without one was squeezed into the
   20px column (one word per line on a phone). Without :has the mark just sits above the words. */
.faq dt:has(> .mk--dt){display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start}
.mk--dt{width:20px;height:20px;margin-top:2px;color:var(--creosote-ink)}
.plane-facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.plane-facts li{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--creosote-ink)}
.plane-facts .mk{width:18px;height:18px}
/* Pass 22: the three facts are doors now (/rides/no-drop/, /rides/lgbtq/, /tonight/) — same mark and type,
   a hairline under the words so they read as tappable, 44px tall for a thumb */
.plane-facts{gap:0 22px}
.plane-facts a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
@media (hover:hover){.plane-facts a:hover{color:var(--asphalt)}}

/* —— Pass 22 (Oct 2, 2026): the ten riders —— */
/* focus you can see: a dark button's ring was currentColor (bone) on bone. Dark buttons ring in asphalt;
   bone buttons sit on dark ground (footer, tally bar) and ring in bone; on the creosote field, paper. */
.btn--ink:focus-visible,.nav .btn--sm:focus-visible,.hero .btn--hero:focus-visible{outline:2px solid var(--asphalt);outline-offset:3px}
.foot .btn--bone:focus-visible,.bar .btn--bone:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.on-creosote .btn--bone:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
/* the tally line's dot is ink: it marks the count, it isn't live (volt only sits on asphalt) */
.dot--ink{background:var(--asphalt)}
.dot--ink::after{display:none}
/* the rate chips say what they total at 10,000 mi, not a price */
.chip small{letter-spacing:.02em;text-align:center}
.chip small i{display:block;font-style:normal;letter-spacing:0}
@media (max-width:479px){
  .chips--bone{grid-template-columns:repeat(4,minmax(0,1fr))}
  .chips--bone .chip:last-child{grid-column:1 / -1}
  .chips--bone .chip:last-child span{min-height:48px}
}
.calc-at{white-space:nowrap}
/* thumbs: the text opt-in, the thank-you links, the vote buttons and the quick links are 44px tall */
.check{min-height:44px;align-items:center}
.check input{margin:0}
.link{position:relative}
.link::before{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}   /* a text link's hit area is 44px tall; the look doesn't change */
.org .btn--sm{min-height:44px}
.dir-quick{row-gap:0;align-items:center}
.dir-quick a{display:inline-flex;align-items:center;min-height:44px}
.next-up a{position:relative}
.next-up a::before{content:"";position:absolute;left:0;right:0;top:-14px;bottom:-14px}