:root {
  --paper: #FAF9F6;
  --ink: #0F0E0C;
  --acc: #FF4D00;
  --line: rgba(15, 14, 12, .14);
  --line-soft: rgba(15, 14, 12, .1);
  --muted-45: rgba(15, 14, 12, .45);
  --muted-55: rgba(15, 14, 12, .55);
  --muted-6: rgba(15, 14, 12, .6);
  --muted-66: rgba(15, 14, 12, .66);
  --paper-55: rgba(250, 249, 246, .55);
  --paper-66: rgba(250, 249, 246, .66);
  --paper-75: rgba(250, 249, 246, .75);
  --mark: url('../assets/rodeo-mark.png');
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Archivo, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--acc); color: var(--paper); }
input { font-family: inherit; }
input::placeholder { color: rgba(15, 14, 12, .28); }
img { max-width: 100%; display: block; }

.mono { font-family: 'Space Mono', monospace; }

@keyframes rodeoRing {
  0% { transform: scale(.55); opacity: .9; }
  100% { transform: scale(1.7); opacity: 0; }
}
@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: none; }
}

/* ---------- Header / Nav ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px clamp(20px, 4vw, 44px);
  background: rgba(250, 249, 246, .88);
  backdrop-filter: blur(14px);
}
.site-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
  background: linear-gradient(180deg, rgba(15, 14, 12, .07), transparent);
  pointer-events: none;
}
@media (prefers-contrast: more) {
  .site-header::after { display: none; }
}

.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark {
  width: 20px; height: 20px;
  background: var(--ink);
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
  flex: none;
}
.logo-word { font-weight: 900; font-stretch: 118%; font-size: 17px; letter-spacing: -0.01em; }

.nav-right { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); }

.nav-links {
  display: flex;
  gap: clamp(14px, 2vw, 26px);
  font-size: 10px;
  letter-spacing: .18em;
}
.nav-links a { transition: color .15s ease; }
.nav-links a:hover { color: var(--acc); }
.nav-links .current { color: var(--acc); }

.nav-toggle {
  display: none;
  width: 38px; height: 38px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.nav-toggle-bars { position: relative; width: 20px; height: 14px; }
.nav-toggle-bars span {
  position: absolute; left: 0; right: 0; height: 1.5px; background: var(--ink);
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 6px; }
.nav-toggle-bars span:nth-child(3) { top: 12px; }
.nav-open .nav-toggle-bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle-bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 890;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 84px clamp(20px, 5vw, 44px) 28px;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform .3s ease, opacity .3s ease, visibility 0s linear .3s;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.nav-open .mobile-menu {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform .3s ease, opacity .3s ease;
}
.mobile-menu a { font-weight: 800; font-stretch: 115%; font-size: 22px; letter-spacing: -0.01em; }
.mobile-menu a.current { color: var(--acc); }

@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
}

/* below this, the CTA button's nowrap text no longer fits next to the toggle without help */
@media (max-width: 400px) {
  .nav-right { gap: 10px; }
  .nav-right .btn-sm { padding: 9px 14px; font-size: 9.5px; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 32px;
  border-radius: 999px;
  border: none;
  font-weight: 800;
  font-stretch: 110%;
  font-size: 14px;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .1s ease-out;
  white-space: nowrap;
  font-family: Archivo, system-ui, sans-serif;
}
.btn:active { transform: scale(.97); }
.btn-sm { padding: 11px 22px; font-size: 11px; letter-spacing: .1em; }

.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { background: var(--acc); color: var(--ink); }

.btn-light { background: var(--paper); color: var(--ink); }
.btn-light:hover { background: var(--acc); }

.btn-outline-light { border: 1px solid rgba(250, 249, 246, .5); color: var(--paper); background: transparent; }
.btn-outline-light:hover { border-color: var(--acc); color: var(--acc); }

.btn-outline-dark { border: 1px solid rgba(15, 14, 12, .3); color: var(--ink); background: transparent; }
.btn-outline-dark:hover { border-color: var(--acc); color: var(--acc); }

.btn-icon {
  width: 14px; height: 14px; flex: none;
  background: var(--ink);
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
}
.btn-icon-acc {
  width: 13px; height: 13px; flex: none;
  background: var(--acc);
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
}

/* ---------- Sections / type ---------- */

.section-label {
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--muted-45);
}

section { scroll-margin-top: 64px; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 120px clamp(20px, 5vw, 72px) clamp(36px, 6vh, 60px);
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}
.hero img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 32%;
}
.hero .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 14, 12, .52) 0%, rgba(15, 14, 12, .06) 42%, rgba(15, 14, 12, .88) 100%);
}
.hero-content { position: relative; }
.hero-kicker { font-size: 10.5px; letter-spacing: .26em; color: rgba(250, 249, 246, .85); }
.hero h1 {
  margin: 12px 0 0;
  font-weight: 900; font-stretch: 118%;
  font-size: clamp(84px, 16.5vw, 220px);
  line-height: .88;
  letter-spacing: -0.035em;
}
.hero-tag {
  font-weight: 700;
  font-size: clamp(11px, 1.4vw, 14px);
  letter-spacing: .3em;
  color: var(--acc);
  margin-top: 20px;
}
.hero-row {
  display: flex; flex-wrap: wrap; gap: 28px;
  align-items: flex-end; justify-content: space-between;
  margin-top: 34px;
}
.hero-row p { margin: 0; max-width: 400px; font-size: 15px; line-height: 1.6; color: rgba(250, 249, 246, .78); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* generic page hero (non-home pages) */
.page-hero { padding: clamp(150px, 20vh, 220px) clamp(20px, 5vw, 72px) clamp(50px, 7vw, 80px); }
.page-hero .section-label { color: var(--acc); font-size: 10.5px; letter-spacing: .26em; }
.page-hero h1 {
  margin: 20px 0 0;
  font-weight: 900; font-stretch: 118%;
  font-size: clamp(44px, 7.4vw, 110px);
  line-height: .94; letter-spacing: -0.03em;
  max-width: 14ch;
}
.page-hero p { margin: 28px 0 0; max-width: 440px; font-size: 16px; line-height: 1.7; color: var(--muted-66); }

.story-hero-grid { display: flex; flex-wrap: wrap; gap: 32px clamp(48px, 7vw, 110px); margin-top: clamp(40px, 6vw, 72px); }
.story-hero-grid > div { flex: 1 1 300px; max-width: 420px; font-size: 16px; line-height: 1.75; color: var(--muted-6); }
.story-hero-grid p { margin: 0; }
.story-hero-grid p + p { margin-top: 18px; }

.tunnel-band { position: relative; min-height: 62vh; overflow: hidden; background: var(--ink); }
.tunnel-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tunnel-band-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px clamp(20px, 5vw, 72px);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 9.5px; letter-spacing: .2em; color: rgba(250, 249, 246, .85);
  background: linear-gradient(180deg, rgba(15, 14, 12, 0), rgba(15, 14, 12, .6));
}

.principles { padding: clamp(90px, 12vw, 160px) clamp(20px, 5vw, 72px); }
.principles-list { margin-top: 34px; border-top: 1px solid var(--line); }
.principle-row {
  padding: clamp(26px, 4vw, 44px) 0; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px clamp(32px, 5vw, 80px); align-items: baseline;
}
.principle-head { display: flex; align-items: baseline; gap: 14px; }
.principle-n { font-size: 11px; color: var(--acc); }
.principle-title { font-weight: 900; font-stretch: 118%; font-size: clamp(24px, 3vw, 36px); letter-spacing: -0.01em; }
.principle-desc { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted-6); max-width: 460px; }

.name-split { background: #ECEAE3; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.name-split img { width: 100%; height: 100%; min-height: 440px; object-fit: cover; }
.name-copy { padding: clamp(70px, 9vw, 130px) clamp(20px, 5vw, 72px); display: flex; flex-direction: column; justify-content: center; }
.name-copy h2 { margin: 24px 0 0; font-weight: 900; font-stretch: 118%; font-size: clamp(34px, 4vw, 54px); line-height: .98; letter-spacing: -0.02em; }
.name-copy p { margin: 26px 0 0; max-width: 440px; font-size: 16px; line-height: 1.75; color: var(--muted-6); }
.name-copy .tag { font-weight: 700; font-size: 12px; letter-spacing: .28em; color: var(--acc); margin-top: 34px; }

.cta-band {
  position: relative; overflow: hidden; background: var(--ink); color: var(--paper);
  text-align: center; padding: clamp(90px, 13vw, 170px) clamp(20px, 5vw, 72px);
}
.cta-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.cta-band .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 14, 12, .55), rgba(15, 14, 12, .75)); }
.cta-band-content { position: relative; }
.cta-mark { width: 54px; height: 54px; background: var(--acc); -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; margin: 0 auto; }
.cta-band h2 { margin: 28px 0 0; font-weight: 900; font-stretch: 118%; font-size: clamp(36px, 5.6vw, 76px); line-height: .94; letter-spacing: -0.025em; }
.cta-band .btn { margin-top: 36px; }
.cta-note { font-size: 9.5px; letter-spacing: .16em; color: rgba(250, 249, 246, .55); margin-top: 18px; }

/* ---------- Ticker strip ---------- */

.ticker {
  display: flex; flex-wrap: wrap; gap: 12px 32px;
  justify-content: space-between;
  padding: 16px clamp(20px, 5vw, 72px);
  border-bottom: 1px solid var(--line);
  font-size: 9.5px; letter-spacing: .22em; color: var(--muted-55);
}
.ticker .acc { color: var(--acc); }

/* ---------- Why section ---------- */

.why { padding: clamp(90px, 12vw, 160px) clamp(20px, 5vw, 72px); }
.why-grid { display: flex; flex-wrap: wrap; gap: 48px clamp(48px, 7vw, 110px); margin-top: 34px; }
.why-grid h2 {
  flex: 1 1 460px; margin: 0;
  font-weight: 900; font-stretch: 118%;
  font-size: clamp(38px, 5.2vw, 76px);
  line-height: .96; letter-spacing: -0.02em;
}
.why-grid h2 .acc { color: var(--acc); }
.why-copy { flex: 1 1 300px; max-width: 420px; display: flex; flex-direction: column; gap: 18px; font-size: 15px; line-height: 1.7; color: var(--muted-6); }
.why-copy p { margin: 0; }

/* ---------- Ground (3-up image grid) ---------- */

.ground { padding: clamp(80px, 10vw, 130px) clamp(20px, 5vw, 72px); background: #ECEAE3; }
.ground-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(16px, 2.4vw, 32px); margin-top: 38px; }
.ground-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ground-grid img.mono { filter: grayscale(1) contrast(1.04); }
.ground-title { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; }
.ground-title .n { font-size: 10px; color: var(--acc); }
.ground-title .t { font-weight: 900; font-stretch: 118%; font-size: 22px; letter-spacing: -0.01em; }
.ground-desc { font-size: 13.5px; color: var(--muted-55); margin-top: 6px; }

/* ---------- Dusk band ---------- */

.band {
  position: relative; min-height: 64vh; display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden; background: var(--ink); color: var(--paper);
  padding: 80px clamp(20px, 5vw, 72px);
}
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band .scrim { position: absolute; inset: 0; background: rgba(15, 14, 12, .38); }
.band-content { position: relative; }
.band-kicker { font-size: 10.5px; letter-spacing: .3em; color: var(--acc); }
.band-title { font-weight: 900; font-stretch: 118%; font-size: clamp(42px, 8.6vw, 124px); line-height: .92; letter-spacing: -0.03em; margin-top: 18px; }

/* ---------- Founding split ---------- */

.founding {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  background: var(--ink); color: var(--paper);
}
.founding-copy { padding: clamp(70px, 9vw, 130px) clamp(20px, 5vw, 72px); }
.founding-copy .section-label { color: var(--acc); }
.founding-copy h2 { margin: 26px 0 0; font-weight: 900; font-stretch: 118%; font-size: clamp(40px, 4.8vw, 66px); line-height: .96; letter-spacing: -0.02em; }
.founding-list { margin-top: 40px; border-top: 1px solid rgba(250, 249, 246, .16); }
.founding-item { padding: 22px 0; border-bottom: 1px solid rgba(250, 249, 246, .16); display: grid; grid-template-columns: 130px 1fr; gap: 16px; }
.founding-item .k { font-size: 10px; letter-spacing: .18em; color: rgba(250, 249, 246, .5); }
.founding-item .v { font-size: 15px; line-height: 1.6; color: rgba(250, 249, 246, .85); }
.founding-copy .btn { margin-top: 40px; }
.founding-note { font-size: 9.5px; letter-spacing: .16em; color: rgba(250, 249, 246, .45); margin-top: 18px; }
.founding img { width: 100%; height: 100%; min-height: 440px; object-fit: cover; }

/* ---------- Footer ---------- */

.site-footer { padding: clamp(70px, 9vw, 110px) clamp(20px, 5vw, 72px) 36px; }
.footer-wordmark { display: flex; align-items: center; gap: clamp(12px, 2vw, 24px); }
.footer-mark { width: clamp(40px, 8vw, 110px); height: clamp(40px, 8vw, 110px); background: var(--ink); -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; flex: none; }
.footer-word { font-weight: 900; font-stretch: 118%; font-size: clamp(64px, 13vw, 180px); line-height: .9; letter-spacing: -0.03em; }
.footer-row { display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); margin-top: 40px; padding-top: 22px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 24px; font-size: 10px; letter-spacing: .18em; }
.footer-links a:hover { color: var(--acc); }
.footer-copy { font-size: 10px; letter-spacing: .18em; color: var(--muted-45); }

/* ---------- Waitlist modal ---------- */

.ob-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--paper); color: var(--ink);
  display: none; flex-direction: column;
}
.ob-overlay.open { display: flex; }
.ob-topbar { display: flex; justify-content: space-between; align-items: center; padding: 20px clamp(20px, 4vw, 44px); }
.ob-brand { display: flex; align-items: center; gap: 10px; }
.ob-brand-mark { width: 16px; height: 16px; background: var(--ink); -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.ob-brand-label { font-size: 10px; letter-spacing: .2em; }
.ob-close {
  width: 38px; height: 38px; border: 1px solid rgba(15, 14, 12, .25); border-radius: 999px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px;
  transition: border-color .2s ease, transform .1s ease-out; background: transparent;
}
.ob-close:hover { border-color: var(--ink); }
.ob-close:active { transform: scale(.92); }
.ob-body { flex: 1; overflow: auto; display: flex; }
.ob-body-inner { margin: auto; width: min(92vw, 620px); padding: 32px 0 80px; }

.ob-step { display: none; animation: fadeUp .45s ease both; }
.ob-step.active { display: block; }
.ob-step-n { font-size: 10.5px; letter-spacing: .24em; color: var(--acc); }
.ob-step h2 { margin: 14px 0 0; font-weight: 900; font-stretch: 118%; font-size: clamp(30px, 4.4vw, 50px); letter-spacing: -0.02em; }
.ob-step-sub { font-size: 10px; letter-spacing: .16em; color: var(--muted-55); margin-top: 12px; }

.ob-form { display: flex; flex-direction: column; gap: 28px; margin-top: 36px; max-width: 520px; }
.ob-field label { font-size: 9px; letter-spacing: .2em; color: var(--muted-55); }
.ob-field input {
  display: block; width: 100%; margin-top: 8px; padding: 10px 0;
  font-size: 26px; font-weight: 600; font-stretch: 105%;
  border: none; border-bottom: 1px solid rgba(15, 14, 12, .25);
  background: transparent; outline: none; color: var(--ink);
}
.ob-field input:focus { border-bottom-color: var(--acc); }
.ob-error { font-size: 10px; letter-spacing: .14em; color: var(--acc); display: none; }
.ob-error.show { display: block; }
.ob-submit-row { display: flex; align-items: center; gap: 20px; }
.ob-submit {
  display: inline-flex; align-items: center; gap: 10px; padding: 18px 34px;
  border-radius: 999px; background: var(--ink); color: var(--paper); border: none;
  font-weight: 800; font-stretch: 110%; font-size: 14px; letter-spacing: .06em;
  cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .1s ease-out;
}
.ob-submit:hover { background: var(--acc); color: var(--ink); }
.ob-submit:active { transform: scale(.97); }
.ob-submit-note { font-size: 9px; letter-spacing: .16em; color: var(--muted-45); }

.ob-done {
  position: absolute; inset: 0; background: var(--ink); color: var(--paper);
  display: none; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px; animation: fadeUp .5s ease both;
}
.ob-done.show { display: flex; }
.ob-done-close {
  position: absolute; top: 20px; right: 24px; width: 38px; height: 38px;
  border: 1px solid rgba(250, 249, 246, .3); border-radius: 999px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px;
  transition: border-color .2s ease, color .2s ease, transform .1s ease-out; background: transparent; color: var(--paper);
}
.ob-done-close:hover { border-color: var(--acc); color: var(--acc); }
.ob-done-close:active { transform: scale(.92); }
.ob-rings { position: relative; width: 130px; height: 130px; display: flex; align-items: center; justify-content: center; }
.ob-ring { position: absolute; inset: 0; border: 1px solid var(--acc); border-radius: 999px; animation: rodeoRing 2.2s ease-out infinite; }
.ob-ring.d2 { animation-delay: 1.1s; }
.ob-ring-mark { width: 86px; height: 86px; background: var(--acc); -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.ob-done-line { font-weight: 900; font-stretch: 118%; font-size: clamp(34px, 5vw, 56px); letter-spacing: -0.02em; margin-top: 14px; }
.ob-done p { margin: 14px 0 0; max-width: 400px; font-size: 15px; line-height: 1.65; color: rgba(250, 249, 246, .66); }
.ob-done-btn {
  display: inline-flex; margin-top: 32px; padding: 16px 36px; border-radius: 999px;
  background: var(--paper); color: var(--ink); font-weight: 800; font-stretch: 110%;
  font-size: 13px; letter-spacing: .08em; cursor: pointer; border: none;
  transition: background-color .2s ease, transform .1s ease-out;
}
.ob-done-btn:hover { background: var(--acc); }
.ob-done-btn:active { transform: scale(.97); }

body.ob-locked { overflow: hidden; }

/* ---------- Founder / host application modal ---------- */

.host-disc-row { display: flex; gap: 10px; margin-top: 32px; flex-wrap: wrap; }
.host-disc {
  flex: 1; min-width: 100px; padding: 16px 18px; border: 1px solid rgba(15, 14, 12, .22);
  background: transparent; color: var(--ink); cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .1s ease-out;
  font-family: 'Space Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-align: center;
}
.host-disc:hover { border-color: var(--ink); }
.host-disc:active { transform: scale(.96); }
.host-disc.selected { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.host-alt { margin-top: 24px; font-size: 9.5px; letter-spacing: .1em; color: var(--muted-55); }
.host-alt a { color: var(--ink); text-decoration: underline; }
.host-alt a:hover { color: var(--acc); }

/* ---------- Quick waitlist modal (GET THE APP / LET'S GO / START) ---------- */

.wl-overlay {
  position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(10, 9, 8, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .4s cubic-bezier(.16,1,.3,1), visibility 0s linear .4s;
}
.wl-overlay.open { opacity: 1; visibility: visible; transition: opacity .4s cubic-bezier(.16,1,.3,1); }
.wl-panel {
  position: relative; width: 100%; max-width: 460px; background: var(--paper); color: var(--ink);
  border-radius: 16px; padding: clamp(30px, 5vw, 46px); overflow: hidden;
  transform: translateY(26px) scale(.97); opacity: 0;
  transition: transform .5s cubic-bezier(.83,0,.17,1), opacity .5s cubic-bezier(.16,1,.3,1);
}
.wl-overlay.open .wl-panel { transform: none; opacity: 1; }
.wl-panel .wl-mark { width: 40px; height: 40px; margin-bottom: 22px; background: var(--acc); -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.wl-panel h3 { font-weight: 900; font-stretch: 118%; font-size: clamp(28px, 5vw, 40px); letter-spacing: -.02em; line-height: .95; text-transform: uppercase; margin: 0; }
.wl-panel .wl-lead { font-size: 14.5px; line-height: 1.6; color: var(--muted-6); margin-top: 14px; max-width: 340px; }
.wl-form { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.wl-field {
  width: 100%; padding: 16px 18px; border: 1px solid rgba(15, 14, 12, .2); border-radius: 10px;
  font-family: Archivo, sans-serif; font-size: 15px; color: var(--ink); background: #fff; transition: border-color .3s;
}
.wl-field:focus { outline: none; border-color: var(--acc); }
.wl-submit {
  width: 100%; padding: 17px; border: none; border-radius: 10px; background: var(--ink); color: var(--paper);
  font-family: Archivo, sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .04em; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px; transition: background .3s, transform .1s ease-out;
}
.wl-submit .wl-submit-mark { width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; transition: transform .5s ease; }
.wl-submit:disabled { opacity: .55; pointer-events: none; }
.wl-submit:hover .wl-submit-mark { transform: rotate(180deg); }
.wl-submit:active:not(:disabled) { transform: scale(.98); }
.wl-error { font-size: 10.5px; letter-spacing: .1em; color: var(--acc); margin-top: -2px; display: none; }
.wl-error.show { display: block; }
.wl-form .cf-turnstile { margin: 4px 0 8px; overflow: hidden; }
.wl-form .cf-turnstile[hidden] { display: none; }
.wl-fine { font-family: 'Space Mono', monospace; font-size: 9.5px; letter-spacing: .12em; color: var(--muted-45); margin-top: 6px; text-align: center; }
.wl-close {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(15, 14, 12, .16); background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .25s, transform .25s;
}
.wl-close:hover { background: rgba(15, 14, 12, .06); transform: rotate(90deg); }
.wl-close:active { transform: rotate(90deg) scale(.9); }
.wl-close::before, .wl-close::after { content: ''; position: absolute; width: 13px; height: 1.5px; background: var(--ink); }
.wl-close::before { transform: rotate(45deg); } .wl-close::after { transform: rotate(-45deg); }
.wl-panel .wl-success { display: none; text-align: center; }
.wl-panel.done .wl-form, .wl-panel.done .wl-lead, .wl-panel.done .wl-head { display: none; }
.wl-panel.done .wl-success { display: block; animation: wlPop .6s cubic-bezier(.83,0,.17,1); }
@keyframes wlPop { 0% { opacity: 0; transform: scale(.9); } 100% { opacity: 1; transform: none; } }
.wl-success .wl-burst { width: 56px; height: 56px; background: var(--acc); -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; margin: 0 auto 20px; animation: spinIn .8s cubic-bezier(.83,0,.17,1); }
@keyframes spinIn { 0% { transform: scale(0) rotate(-60deg); } 100% { transform: scale(1) rotate(0); } }
.wl-success h3 { margin-bottom: 12px; }
body.wl-locked { overflow: hidden; }

/* ---------- FAQ ---------- */

.faq-block { max-width: 860px; }
.faq-group-label { font-size: 10px; letter-spacing: .22em; color: var(--muted-45); margin-top: 34px; }
.faq-group-label:first-child { margin-top: 0; }
.faq-list { border-top: 1px solid var(--line); margin-top: 14px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 24px 0;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q { font-weight: 800; font-stretch: 115%; font-size: clamp(17px, 2vw, 21px); }
.faq-icon { font-size: 14px; color: var(--acc); transition: transform .2s ease; flex: none; }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-a { margin: 0; padding: 0 0 24px; font-size: 15px; line-height: 1.7; color: rgba(15, 14, 12, .65); max-width: 640px; }
.faq-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 64px; }
.faq-write { font-size: 9.5px; letter-spacing: .16em; color: var(--muted-45); }
.faq-write a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Events ---------- */

.event-list { border-top: 1px solid var(--line); }
.event-row {
  padding: clamp(24px, 3.4vw, 38px) 0; border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 14px clamp(24px, 4vw, 64px); align-items: baseline;
}
.event-meta { font-size: 11px; letter-spacing: .14em; color: var(--muted-55); }
.event-meta .acc { color: var(--acc); }
.event-title { font-weight: 900; font-stretch: 118%; font-size: clamp(22px, 2.8vw, 32px); letter-spacing: -0.01em; }
.event-desc { font-size: 14px; color: var(--muted-55); margin-top: 6px; }
.event-status-wrap { display: flex; justify-content: flex-end; }
.event-status { padding: 9px 18px; border-radius: 999px; border: 1px solid var(--ink); font-size: 9.5px; letter-spacing: .16em; }
.event-status.full { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.event-note { font-size: 9.5px; letter-spacing: .16em; color: var(--muted-45); margin-top: 22px; }

.host-band {
  position: relative; min-height: 60vh; overflow: hidden; background: var(--ink); color: var(--paper);
  display: flex; align-items: flex-end;
}
.host-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.host-band .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 14, 12, .15), rgba(15, 14, 12, .72)); }
.host-band-inner { position: relative; padding: 60px clamp(20px, 5vw, 72px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; width: 100%; }
.host-band-title { font-weight: 900; font-stretch: 118%; font-size: clamp(30px, 4.6vw, 60px); line-height: .96; letter-spacing: -0.02em; margin-top: 14px; max-width: 16ch; }
.host-band-copy { margin: 16px 0 0; max-width: 420px; font-size: 15px; line-height: 1.65; color: rgba(250, 249, 246, .75); }


/* ---------- Journal ---------- */

.featured-story {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(24px, 4vw, 56px); border-top: 1px solid var(--line);
  padding-top: clamp(24px, 3.4vw, 40px); align-items: center;
}
.featured-media { position: relative; overflow: hidden; }
.featured-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.featured-badge { position: absolute; top: 14px; left: 14px; padding: 8px 14px; border-radius: 999px; background: var(--acc); color: var(--ink); font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.featured-meta { font-size: 10px; letter-spacing: .18em; color: var(--muted-55); }
.featured-title { font-weight: 900; font-stretch: 118%; font-size: clamp(28px, 3.6vw, 48px); line-height: .98; letter-spacing: -0.02em; margin-top: 14px; }
.featured-desc { margin: 16px 0 0; max-width: 480px; font-size: 15px; line-height: 1.7; color: rgba(15, 14, 12, .62); }
.featured-readmore { font-size: 10px; letter-spacing: .2em; color: var(--muted-45); margin-top: 22px; }

.article-list { border-top: 1px solid var(--line); }
.article-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 12px clamp(24px, 4vw, 64px); align-items: center;
  padding: clamp(22px, 3vw, 32px) 0; border-bottom: 1px solid var(--line);
}
.article-meta { font-size: 10.5px; letter-spacing: .14em; color: var(--muted-55); }
.article-body { grid-column: span 2; }
.article-title { font-weight: 800; font-stretch: 115%; font-size: clamp(19px, 2.2vw, 25px); letter-spacing: -0.005em; }
.article-desc { font-size: 13.5px; color: var(--muted-55); margin-top: 6px; }
.article-read { font-size: 10px; letter-spacing: .16em; color: var(--muted-45); text-align: right; }
.journal-note { font-size: 9.5px; letter-spacing: .16em; color: var(--muted-45); margin-top: 22px; }

.subscribe-band { background: var(--ink); color: var(--paper); padding: clamp(80px, 11vw, 140px) clamp(20px, 5vw, 72px); }
.subscribe-inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; }
.subscribe-mark { width: 44px; height: 44px; background: var(--acc); -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.subscribe-title { font-weight: 900; font-stretch: 118%; font-size: clamp(32px, 5vw, 64px); line-height: .95; letter-spacing: -0.025em; margin-top: 22px; max-width: 18ch; }

/* ---------- Toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px);
  background: var(--ink); color: var(--paper); padding: 13px 22px; border-radius: 999px;
  font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: .14em;
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
  z-index: 3000; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Focus & scrollbar ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
}

/* ---------- Reduced transparency / higher contrast ---------- */
/* Translucent chrome (header, subpage nav, waitlist scrim) goes frostier
   or solid instead of just staying blurred when the user has asked for it. */

@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  nav {
    background: var(--ink);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .wl-overlay {
    background: rgba(10, 9, 8, .92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .site-header { border-bottom: 1px solid var(--ink); }
  nav { border-bottom: 1px solid #fff; }
  .btn-outline-light { border-color: var(--paper); }
  .btn-outline-dark { border-color: var(--ink); }
  .wl-field { border-color: var(--ink); }
}

html {
  scrollbar-color: rgba(15, 14, 12, .3) var(--paper);
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb {
  background: rgba(15, 14, 12, .28);
  border-radius: 999px;
  border: 2px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover { background: var(--acc); }

/* ---------- Scroll progress ---------- */

.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 0%;
  background: var(--acc);
  z-index: 950;
  pointer-events: none;
}

/* ---------- Grain, dark sections only ---------- */

.hero, .band, .cta-band, .host-band, .tunnel-band, .founding, .subscribe-band, .story-cards {
  position: relative;
}
.hero::after, .band::after, .cta-band::after, .host-band::after,
.tunnel-band::after, .founding::after, .subscribe-band::after, .story-cards::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* ---------- Scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.16,.8,.24,1), transform .7s cubic-bezier(.16,.8,.24,1);
}
.reveal.in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}

/* ---------- Hero load sequence ---------- */

@media (prefers-reduced-motion: no-preference) {
  .hero-kicker { animation: fadeUp .7s .08s cubic-bezier(.16,.8,.24,1) both; }
  .hero h1 { animation: fadeUp .85s .2s cubic-bezier(.16,.8,.24,1) both; }
  .hero-tag { animation: fadeUp .7s .38s cubic-bezier(.16,.8,.24,1) both; }
  .hero-row { animation: fadeUp .8s .5s cubic-bezier(.16,.8,.24,1) both; }
  .hero img { animation: heroZoom 12s cubic-bezier(.16,.8,.24,1) both; }
}
@keyframes heroZoom {
  0% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
  .page-hero .section-label { animation: fadeUp .6s .05s cubic-bezier(.16,.8,.24,1) both; }
  .page-hero h1 { animation: fadeUp .75s .16s cubic-bezier(.16,.8,.24,1) both; }
  .page-hero p { animation: fadeUp .7s .32s cubic-bezier(.16,.8,.24,1) both; }
}

/* ---------- Story cards ---------- */

@property --ang {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.story-card--light { background: var(--card-light); color: var(--ink); }
.story-card--dark { background: var(--card-dark); color: var(--paper); }
.story-card--burst { border: 1px solid rgba(250, 249, 246, .12); }

.story-card-top { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; }
.story-card--light .story-card-top { color: rgba(15, 14, 12, .5); }
.story-card--dark .story-card-top { color: rgba(250, 249, 246, .5); }
.story-card-dot { color: var(--acc); font-size: 8px; }
.story-card-live { display: flex; align-items: center; gap: 6px; }
.story-card-live span:last-child { color: var(--acc); }
.story-card-pulse { width: 7px; height: 7px; border-radius: 999px; background: var(--acc); animation: rodeoPulse 1.4s ease-in-out infinite; }

.story-card-title { font-weight: 900; font-stretch: 116%; font-size: clamp(23px, 3vw, 28px); line-height: .98; letter-spacing: -0.02em; margin: 12px 0 0; }

.story-card-panel {
  flex: 1; min-height: 0; border-radius: 15px; margin-top: 14px;
  padding: 16px; display: flex; flex-direction: column; box-sizing: border-box;
  background: var(--paper); color: var(--ink);
}
.story-card-panel--bordered { border: 1px solid rgba(15, 14, 12, .1); }
.story-card-panel--routes { padding: 0; overflow: hidden; }

.story-card-foot { font-size: 9px; letter-spacing: .13em; margin-top: 14px; }
.story-card--light .story-card-foot { color: rgba(15, 14, 12, .45); }
.story-card--dark .story-card-foot { color: rgba(250, 249, 246, .45); }
.story-card-foot--split { display: flex; justify-content: space-between; }

.live-panel-label { font-size: 8.5px; letter-spacing: .15em; color: rgba(15, 14, 12, .5); }

/* readiness */
.readiness-ring-wrap { flex: 1; display: flex; align-items: center; justify-content: center; }
.readiness-ring { position: relative; width: 128px; height: 128px; display: flex; align-items: center; justify-content: center; }
.readiness-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--acc) var(--ang), rgba(15, 14, 12, .1) var(--ang) 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 84%, #000 85%);
  mask: radial-gradient(closest-side, transparent 84%, #000 85%);
}
.readiness-ring-text { text-align: center; }
.readiness-ring-num { font-weight: 800; font-stretch: 112%; font-size: 46px; line-height: 1; letter-spacing: -0.03em; }
.readiness-ring-label { font-size: 8px; letter-spacing: .2em; color: rgba(15, 14, 12, .5); margin-top: 3px; }
.hrv-row { display: flex; align-items: center; gap: 8px; opacity: 0; }
.hrv-icon { width: 10px; height: 10px; flex: none; background: var(--acc); -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.hrv-text { font-size: 8.5px; font-weight: 700; letter-spacing: .06em; color: var(--acc); }
.panel-foot-row { border-top: 1px solid rgba(15, 14, 12, .1); margin-top: 12px; padding-top: 10px; display: flex; justify-content: space-between; align-items: baseline; }
.panel-foot-main { font-weight: 900; font-stretch: 114%; font-size: 14px; }
.panel-foot-sub { font-size: 8px; letter-spacing: .08em; color: rgba(15, 14, 12, .5); }

/* live run */
.live-elapsed-wrap { margin-top: 12px; }
.live-elapsed { font-weight: 800; font-stretch: 112%; font-size: clamp(34px, 6vw, 44px); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.live-stats-row { display: flex; gap: 16px; margin-top: 14px; border-top: 1px solid rgba(15, 14, 12, .1); padding-top: 12px; }
.live-stat { flex: 1; }
.live-stat-val { font-weight: 800; font-stretch: 112%; font-size: 22px; letter-spacing: -0.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.live-ahead-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.live-ahead-icon { width: 10px; height: 10px; flex: none; background: var(--acc); -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.live-ahead-text { font-size: 8.5px; font-weight: 700; letter-spacing: .06em; color: var(--acc); font-variant-numeric: tabular-nums; }
.live-split-strip { margin-top: auto; background: var(--ink); color: var(--paper); border-radius: 10px; padding: 10px 12px; display: flex; justify-content: space-between; font-size: 8.5px; letter-spacing: .06em; }
.live-split-strip span:last-child { color: rgba(250, 249, 246, .55); }

/* routes — real OpenStreetMap tiles + a real, road-following route */
.route-map {
  position: relative; height: 130px; flex: none;
  overflow: hidden;
  background: #ECEAE3;
}
.route-map-mosaic {
  position: absolute; top: 0; left: 0;
  width: 560px; height: 260px;
  transform: scale(.5); transform-origin: top left;
}
.route-tile { position: absolute; width: 256px; height: 256px; display: block; }
.route-line-svg { position: absolute; top: 0; left: 0; width: 560px; height: 260px; transform: scale(.5); transform-origin: top left; }
.route-line {
  fill: none; stroke: #0F0E0C; stroke-width: 6; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: dashDraw 4.5s ease-in-out infinite;
}
.route-line-dot { fill: #0F0E0C; }
.route-match-badge {
  position: absolute; right: 10px; top: 10px;
  font-size: 8.5px; font-weight: 700; letter-spacing: .08em;
  color: var(--paper); background: var(--ink); padding: 4px 9px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.route-body { padding: 14px 14px 16px; display: flex; flex-direction: column; flex: 1; }
.route-name-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.route-name { font-weight: 900; font-stretch: 114%; font-size: 15px; }
.route-meta { font-size: 8px; color: rgba(15, 14, 12, .55); white-space: nowrap; }
.route-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.route-tag { padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(15, 14, 12, .16); font-size: 7.5px; letter-spacing: .06em; }
.route-tag--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* crew */
.crew-panel-head { display: flex; justify-content: space-between; align-items: baseline; }
.crew-kudos-count { font-size: 8.5px; font-weight: 700; color: var(--acc); font-variant-numeric: tabular-nums; }
.crew-rows { margin-top: 6px; display: flex; flex-direction: column; }
.crew-row-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(15, 14, 12, .09); }
.crew-row-item:last-child { border-bottom: none; }
.crew-avatar-circle {
  width: 30px; height: 30px; border-radius: 999px; background: var(--ink); color: var(--paper);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 10.5px; flex: none;
}
.crew-row-text { flex: 1; min-width: 0; }
.crew-row-name { font-weight: 800; font-size: 12.5px; }
.crew-row-note { font-size: 8px; letter-spacing: .04em; color: rgba(15, 14, 12, .5); margin-top: 2px; }
.crew-row-burst { width: 12px; height: 12px; flex: none; background: var(--acc); -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.crew-ticker { margin-top: auto; background: var(--ink); color: var(--paper); border-radius: 10px; padding: 10px 11px; display: flex; align-items: center; gap: 9px; }
.crew-ticker-icon {
  width: 12px; height: 12px; flex: none; background: var(--acc);
  -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat;
  animation: rodeoPulse 1.4s ease-in-out infinite;
}
.crew-ticker-text { font-size: 8.5px; letter-spacing: .04em; }

@keyframes ringFill { 0% { --ang: 0deg; } 100% { --ang: 295deg; } }
@keyframes rodeoPulse { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@keyframes dashDraw { 0% { stroke-dashoffset: 1; } 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .readiness-ring::before { animation: none; --ang: 295deg; }
  .hrv-row { animation: none; opacity: 1; }
  .story-card-pulse, .crew-ticker-icon { animation: none; opacity: 1; }
  .route-line { animation: none; stroke-dashoffset: 0; }
}

/* ---------- Custom cursor, the burst ---------- */

.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  border-radius: 999px;
  opacity: 0;
  z-index: 4000;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--ink);
  transition: opacity .2s ease, background-color .25s ease;
}
.cursor-ring {
  width: 28px; height: 28px;
  border: 1px solid var(--acc);
  background: transparent;
  transition: opacity .2s ease, width .3s cubic-bezier(.2,.8,.2,1), height .3s cubic-bezier(.2,.8,.2,1), border-width .3s ease, border-color .3s ease;
}
body.cursor-ready .cursor-dot,
body.cursor-ready .cursor-ring { opacity: 1; }

body.cursor-ready * { cursor: none; }
body.cursor-ready input,
body.cursor-ready textarea { cursor: text; }

/* ==================================================================
   LANDING-PAGE NAV / FOOTER / GRAIN SYSTEM
   Ported from index.html so every page shares the same fixed
   mix-blend-mode nav, starburst mark, and dark footer bar. Uses bare
   `nav` / `footer` element selectors plus .n-*, .m-menu, .f-*, .grain
   and .mark, none of which collide with the classes above.
   ================================================================== */

.grain{
  position:fixed;inset:-50%;width:200%;height:200%;
  pointer-events:none;z-index:9000;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation:grainShift .42s steps(4) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}
  50%{transform:translate(1%,-2%)}75%{transform:translate(-1%,2%)}100%{transform:translate(0,0)}
}

.mark{
  display:inline-block;background:currentColor;
  -webkit-mask:var(--mark) center/contain no-repeat;
  mask:var(--mark) center/contain no-repeat;
}

nav{
  position:fixed;top:0;left:0;right:0;z-index:800;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 34px;color:#fff;
  background:rgba(15,14,12,.5);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.08);
  transform:translateY(-80px);transition:transform .9s var(--ease-out, cubic-bezier(.16,1,.3,1)) .2s;
}
body.ready nav{transform:translateY(0)}
nav .n-mark{width:26px;height:26px;color:#fff}
nav .n-word{font-weight:900;font-stretch:118%;font-size:19px;letter-spacing:-.02em;font-family:Archivo,system-ui,sans-serif}
nav .n-left{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
nav .n-links{display:flex;gap:26px;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.18em}
@media(max-width:1100px){
  nav .n-links{gap:16px;font-size:10px;letter-spacing:.14em}
}
nav .n-links a{color:inherit;text-decoration:none;opacity:.75;transition:opacity .3s}
nav .n-links a:hover,nav .n-links a.current{opacity:1}
nav .n-cta{
  font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  color:#fff;background:none;text-decoration:none;border:1px solid rgba(255,255,255,.5);
  padding:10px 20px;border-radius:999px;cursor:pointer;
  transition:background-color .35s ease, color .35s ease, border-color .35s ease, transform .1s ease-out;
}
nav .n-cta:hover{background:#fff;color:#000}
nav .n-cta:active{transform:scale(.96)}
nav .n-toggle{
  display:none;width:34px;height:34px;border:none;background:transparent;cursor:pointer;
  padding:0;align-items:center;justify-content:center;
}
nav .n-toggle-bars{position:relative;width:20px;height:14px}
nav .n-toggle-bars span{
  position:absolute;left:0;right:0;height:1.5px;background:#fff;
  transition:transform .25s ease,opacity .2s ease,top .25s ease;
}
nav .n-toggle-bars span:nth-child(1){top:0}
nav .n-toggle-bars span:nth-child(2){top:6px}
nav .n-toggle-bars span:nth-child(3){top:12px}
@media(max-width:760px){
  nav .n-links{display:none}
  nav .n-toggle{display:flex}
}

.m-menu{
  position:fixed;inset:0;z-index:950;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:26px;padding:34px;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s;
}
.m-menu.open{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .35s ease}
.m-menu a{
  color:var(--paper);text-decoration:none;font-weight:900;font-stretch:118%;
  font-size:clamp(30px,9vw,52px);letter-spacing:-.02em;text-transform:uppercase;
}
.m-menu a.current{color:var(--acc)}
.m-menu .m-note{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.24em;color:rgba(250,249,246,.5);margin-top:10px}

/* dark footer bar (replaces the old huge-wordmark .site-footer treatment) */
footer.site-footer-dark{
  background:var(--ink);border-top:1px solid rgba(250,249,246,.14);
  padding:34px;display:flex;justify-content:space-between;align-items:center;gap:20px 32px;flex-wrap:wrap;
  font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.18em;color:rgba(250,249,246,.45);
}
footer.site-footer-dark .f-brand{display:flex;align-items:center;gap:10px}
footer.site-footer-dark .f-mark{width:18px;height:18px;color:var(--paper)}
footer.site-footer-dark .f-word{font-family:Archivo,system-ui,sans-serif;font-weight:900;font-stretch:118%;font-size:16px;letter-spacing:-.02em;color:var(--paper)}
footer.site-footer-dark .f-links{display:flex;gap:20px;flex-wrap:wrap}
footer.site-footer-dark .f-links a{color:inherit;text-decoration:none;transition:color .25s}
footer.site-footer-dark .f-links a:hover{color:var(--acc)}
@media(max-width:640px){footer.site-footer-dark{justify-content:center;text-align:center}}

/* mono-label with divider line, matching index.html's section markers */
.mono-label{
  font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.26em;
  color:var(--muted-45);display:flex;align-items:center;gap:14px;margin-bottom:28px;
}
.mono-label::after{content:'';flex:1;height:1px;background:var(--line)}
.mono-label.on-dark::after{background:rgba(250,249,246,.18)}

@media (prefers-reduced-motion:reduce){
  .grain{display:none}
}

/* the ring blooms around whatever's hovered; the dot stays put so it never eclipses a letter */
body.cursor-burst .cursor-ring {
  width: 38px; height: 38px;
  border-width: 1.5px;
  border-color: var(--acc);
}
body.cursor-burst .cursor-dot { background: var(--acc); }