/* Cycle for Change — shared chrome for every page that is NOT the homepage.
   Tokens, base type, the header + mobile menu, the tally line, buttons, eyebrows
   and the footer. Every value here is copied from /home.css so inner pages match
   the homepage exactly. Markup comes from scripts/chrome.js.
   Loaded first on every inner page; a section's own sheet (/events/events.css,
   /rides/rides.css, /styles.css, /tonight/tonight.css) comes after it.
   Creosote house: Outfit + Space Mono. Volt = "live" only (the tally dot, hover). */

:root{
  --bone:#E8DFD0;
  --bone-2:#E1D7C5;
  --paper:#F6F1E7;
  --dust:#C4B7A2;
  --creosote:#5C6B4A;
  --creosote-ink:#4A5639;   /* creosote a step darker: small text on bone clears 4.5:1 (Pass 5) */
  --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 */
  --asphalt:#2A2E28;
  --tar:#1A1D18;
  --volt:#C6FF00;
  --mute:#5F5E56;
  --line:rgba(42,46,40,.18);
  --line-d:rgba(232,223,208,.2);

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

  --gut:clamp(16px,4.2vw,56px);
  --gutter:var(--gut);
  --maxw:1360px;
  --sec:clamp(64px,9vw,128px);
  --nav-h:64px;   /* Pass 23d: the same bar height on every screen (home.css) */
}

/* —— base (same as home) —— */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bone)}
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;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--creosote)}
@media (hover:hover){a:hover{text-decoration-color:currentColor}}
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,.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.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 scale (home's .h1/.h2/.h3, applied to the elements inner pages use) —— */
h1,h2,h3,h4{margin:0;font-weight:800;text-wrap:balance}
h1{font-size:clamp(2.75rem,5vw + 1.5rem,5.25rem);line-height:.94;letter-spacing:-.035em}
h2{font-size:clamp(1.6rem,1.6vw + 1.1rem,2.4rem);line-height:1;letter-spacing:-.028em}
h3{font-size:clamp(1.3rem,.9vw + 1.08rem,1.7rem);line-height:1.06;letter-spacing:-.02em}
h4{font-size:1.1rem;line-height:1.2;letter-spacing:-.01em}
p{margin:0 0 1em}
.lede{margin:0;max-width:34ch;font-size:clamp(1.15rem,.7vw + 1rem,1.45rem);line-height:1.36}
.mute{color:var(--mute)}
.num{font-variant-numeric:lining-nums tabular-nums}

.eyebrow{
  margin:0;
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  line-height:1.4;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.eyebrow a{text-decoration:none}

/* —— buttons (identical to home) —— */
.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,.btn-solid,.btn-dark{background:var(--asphalt);color:var(--bone);border-color:var(--asphalt)}
.btn--ghost{border-color:currentColor}
.btn:not([class*="btn--"]):not(.btn-solid):not(.btn-dark){border-color:currentColor}   /* a bare .btn is a ghost */
.btn--sm{min-height:36px;padding:0 14px;font-size:10.5px}
@media (hover:hover){
  .btn--bone:hover,.btn--ink:hover,.btn-solid:hover,.btn-dark:hover{background:var(--volt);border-color:var(--volt);color:var(--asphalt)}
  .btn--ghost:hover,.btn:not([class*="btn--"]):not(.btn-solid):not(.btn-dark):hover{background:var(--asphalt);border-color:var(--asphalt);color:var(--bone)}
}
.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}

/* —— header: home's solid nav state, always on —— */
.nav{
  position:sticky;
  top:env(safe-area-inset-top,0px);
  z-index:50;
  height:var(--nav-h);
  background:rgba(232,223,208,.94);
  color:var(--asphalt);
  border-bottom:1px solid 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}
/* Pass 23d (Oct 3, 2026, from home.css): the wheel in its asphalt square — the drawing untouched; on
   asphalt the currentColor arc and hub go bone and the creosote arc lifts a step. On phones the square
   is the bar's corner: the full bar height, flush to the screen's left edge, the wheel 28px inside. */
.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{font-style:normal;color:var(--creosote-ink)}
@media (max-width:899px){
  .nav-in{padding-left:0}
  .brand{gap:16px}
  .brand .brand-sq{width:var(--nav-h);height:var(--nav-h);padding:18px}
  .menu-btn{margin-right:-9px}
}
/* Pass 5: nav labels read at body size, same as the homepage */
.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}
.nav-links a[aria-current="page"]{border-bottom-color:currentColor}
@media (hover:hover){.nav-links a:hover{border-bottom-color:currentColor}}
.nav-right{display:flex;align-items:center;gap:8px}
.nav .btn--sm{background:var(--asphalt);color:var(--bone);border-color:var(--asphalt)}
@media (max-width:899px){.nav .btn--sm{min-height:40px;background:transparent;color:var(--asphalt);border-color:var(--asphalt)}}   /* Pass 23d: a hairline beside the stamp on phones, not a second block */
.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}
}

/* —— mobile menu (identical to home) —— */
.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)}

/* —— the running tally, under the nav on every inner page —— */
.tally-line{margin:0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.6875rem;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-line .dot{width:8px;height:8px;border-radius:50%;background:var(--asphalt);flex:0 0 auto}
.tally-num{color:var(--asphalt);font-weight:700}

/* —— page body spacing —— */
main{display:block}
main.wrap{padding-block:clamp(40px,6vw,80px) 0}

/* —— the pledge block that closes every inner page (markup in scripts/chrome.js) —— */
.pledge{margin:var(--sec) 0 0;padding:clamp(28px,4vw,48px) clamp(22px,3.5vw,48px);background:var(--asphalt);color:var(--bone);max-width:820px}
.pledge-num{margin:0 0 14px;font-weight:800;font-size:clamp(4rem,12vw,7rem);line-height:.84;letter-spacing:-.045em;color:var(--bone)}
.pledge-line{margin:0 0 14px;font-size:clamp(1.3rem,.9vw + 1.08rem,1.7rem);line-height:1.06;letter-spacing:-.02em;max-width:24ch}
.pledge-copy{margin:0 0 24px;max-width:52ch;color:var(--bone-2)}
.pledge .cta-row{align-items:center;gap:12px 20px}
.pledge .link{color:var(--bone)}
.wrap>.pledge{margin-inline:calc(-1 * var(--gut))}
@media (min-width:640px){.wrap>.pledge{margin-inline:0}}

/* —— footer (identical to home) —— */
.foot{margin-top:var(--sec);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}
.lab{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.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)}
.ok{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.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}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.link::after,.nav{transition:none}
}

/* —— dark pages (/tonight/): same chrome, flipped —— */
.theme-dark .nav{background:rgba(26,29,24,.94);color:var(--bone);border-bottom-color:var(--line-d)}
.theme-dark .nav .btn--sm{background:var(--bone);color:var(--asphalt);border-color:var(--bone)}
.theme-dark .tally-line{color:var(--dust);border-bottom-color:var(--line-d)}
.theme-dark .tally-num{color:var(--bone)}
.theme-dark .skip{background:var(--bone);color:var(--asphalt)}