/* Battle Ratz one-page site.
   Field-navigation look: topographic contour textures, waypoint markers, a route-style schedule,
   sand + charcoal surfaces with Battle Ratz yellow as the accent. Anton display, Space Mono labels, Rubik body. */
:root{--ink:#0b0b0b;--black:#050505;--panel:#141414;--panel2:#1b1b1b;--line:#2a2a2a;--line2:#3d3d3d;--sand:#efe8d3;--sand2:#e3dabd;--muted:#a6a699;--yellow:#f2e641;--yellow2:#e0d42a;--yellow-dk:#8a7f00;--white:#fff;--green:#8fe08a;--max:1320px;--r:6px;
--disp:'Anton','Impact','Arial Narrow',sans-serif;--mono:'Space Mono','Courier New',monospace;--body:'Rubik',Arial,Helvetica,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--ink);color:var(--white);font:16px/1.65 var(--body)}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
.wrap{width:min(calc(100% - clamp(32px,5vw,96px)),var(--max));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:#000;padding:.75rem;z-index:100}.skip:focus{left:1rem;top:1rem}
h1,h2,h3{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.012em;line-height:1}
.eyebrow{font-family:var(--mono);font-weight:700;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow)}
.eyebrow::before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--yellow);margin-right:.6rem;vertical-align:1px}
.muted{color:var(--muted)}

/* header: sand bar */
.top{position:sticky;top:0;z-index:30;background:var(--sand);color:#000;border-top:4px solid var(--yellow);border-bottom:2px solid #000}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand{display:flex;align-items:center;gap:.7rem}
.brand img{width:48px;height:auto}
.brand b{display:block;font-family:var(--disp);font-weight:400;font-size:1.6rem;letter-spacing:.03em;text-transform:uppercase;line-height:.95;color:#000}
.brand small{display:block;font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6b6650;margin-top:.15rem}
.links{display:flex;align-items:center;gap:1.5rem;margin-left:auto}
.links a{color:#000;padding:1rem 0;font-family:var(--mono);font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;position:relative}
.links a::after{content:'';position:absolute;left:0;right:0;bottom:.55rem;height:3px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .18s}
.links a:hover::after,.links a:focus-visible::after{transform:scaleX(1)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:50px;padding:.8rem 1.4rem;border:2px solid #000;border-radius:var(--r);background:var(--yellow);color:#000;font-family:var(--mono);font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s;text-align:center}
.button:hover,.button:focus-visible{background:var(--yellow2);transform:translateY(-1px)}
.button.secondary{background:transparent;color:inherit;border-color:currentColor}
.button.secondary:hover,.button.secondary:focus-visible{background:var(--yellow);color:#000;border-color:var(--yellow)}
.button[aria-disabled=true]{opacity:.55;pointer-events:none}
.mobile-register{display:none}

/* hero: photo fading into contour lines */
.hero{position:relative;overflow:hidden;border-bottom:2px solid #000;background:#050505 url('desert-march.png') right 38%/cover no-repeat}
.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#050505 0%,#050505 30%,rgba(5,5,5,.78) 52%,rgba(5,5,5,.3) 78%,rgba(5,5,5,.15) 100%),linear-gradient(0deg,#050505 0%,rgba(5,5,5,.6) 22%,transparent 55%),linear-gradient(180deg,rgba(5,5,5,.55),transparent 30%)}
.hero::after{content:'';position:absolute;inset:0;background:url('topo-dark.svg') center/900px 900px;opacity:.9;mix-blend-mode:screen}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);min-height:min(78vh,760px);align-items:center;padding:clamp(3.5rem,7vw,6.5rem) 0}
.hero-copy{max-width:720px}
.hero h1{font-size:clamp(3.4rem,7.4vw,6.8rem);margin:.8rem 0 1.4rem;color:#fff}
.hero h1 span{color:var(--yellow)}
.lead{max-width:600px;color:#e2e2d8;font-size:clamp(1.05rem,1.6vw,1.22rem)}
.actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem;align-items:center}
.hero-kicker{display:flex;gap:1.2rem 2rem;flex-wrap:wrap;margin-top:2.4rem;padding-top:1.4rem;border-top:2px dashed #3a3a3a}
.hero-kicker div{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#bdbdb0}
.hero-kicker b{display:block;font-family:var(--disp);font-weight:400;font-size:1.5rem;letter-spacing:.02em;color:#fff;margin-top:.1rem}
.waypoint{display:inline-flex;align-items:center;gap:.6rem;background:rgba(10,10,10,.85);color:#fff;border:2px solid var(--yellow);border-radius:999px;padding:.55rem 1rem .55rem .7rem;font-family:var(--mono);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.waypoint i{width:12px;height:12px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px rgba(242,230,65,.25)}
.waypoint b{color:var(--yellow)}

/* ticker */
.ticker{background:var(--sand);color:#000;border-bottom:2px solid #000;overflow:hidden;font-family:var(--mono);font-weight:700;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}
.ticker-track{display:flex;width:max-content;animation:ticker 48s linear infinite}
.ticker-track:hover{animation-play-state:paused}
.ticker span{padding:.8rem 1.6rem;white-space:nowrap;display:inline-flex;align-items:center;gap:1.6rem}
.ticker span::after{content:'';width:8px;height:8px;border-radius:50%;background:#000}
@keyframes ticker{to{transform:translateX(-50%)}}

/* sections */
section{padding:clamp(4rem,7vw,6.5rem) 0}
.sectionhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:end;gap:2rem 4rem;margin-bottom:2.6rem}
.sectionhead h2{font-size:clamp(2.6rem,5.4vw,4.8rem);margin:.6rem 0 0}
.sectionhead p{max-width:540px;color:var(--muted);margin:0 0 .35rem}
.sectionhead p a{color:var(--yellow);text-decoration:underline;text-underline-offset:3px}
.events{background:var(--ink)}

/* route-style schedule */
.schedule{position:relative;padding-left:66px;counter-reset:wp}
.schedule::before{content:'';position:absolute;left:19px;top:14px;bottom:14px;border-left:3px dashed var(--line2)}
.run{counter-increment:wp;position:relative;display:grid;grid-template-columns:150px minmax(0,1fr) minmax(200px,.55fr) 210px;gap:1.6rem;align-items:start;padding:1.7rem 1.6rem;border:2px solid var(--line);border-radius:var(--r);background:var(--panel);margin-bottom:1.1rem;transition:border-color .15s}
.run:hover{border-color:#6a6a5a}
.run::before{content:counter(wp,decimal-leading-zero);position:absolute;left:-66px;top:1.5rem;width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--yellow);border:3px solid var(--yellow);font-family:var(--mono);font-weight:700;font-size:.8rem;display:grid;place-items:center}
.run.next{border-color:var(--yellow);background:var(--panel2)}
.run.next::before{background:var(--yellow);color:#000}
.run.next::after{content:'Next up';position:absolute;top:-13px;right:1.3rem;background:var(--yellow);color:#000;border-radius:999px;font-family:var(--mono);font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;padding:.3rem .75rem}
.run.package{border-style:dashed;background:#101010}
.run.package::before{content:'+';font-size:1.1rem;border-color:#6a6a5a;color:#cfcfc2;background:var(--panel)}
.run-date{font-family:var(--mono);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.76rem;line-height:1.1;color:#cfcfc2}
.run-date .d{display:block;font-family:var(--disp);font-weight:400;font-size:clamp(2.6rem,4vw,3.6rem);letter-spacing:.01em;margin:.25rem 0 .15rem;line-height:.95;color:#fff}
.run.next .run-date .d{color:var(--yellow)}
.run-date .y{color:var(--muted)}
.run h3{font-size:clamp(1.9rem,3vw,2.5rem);margin:0 0 .25rem}
.where{font-family:var(--mono);font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow);margin:0 0 .7rem}
.run p.muted{margin:0 0 .7rem}
.badges{display:flex;gap:.4rem;flex-wrap:wrap;margin:.6rem 0 0}
.badge{border:1.5px solid #5a5a50;border-radius:999px;padding:.2rem .6rem;font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.badge.status{color:var(--green);border-color:#3e6b3a}
.badge.soon{color:#cfcfc2;border-color:#5a5a50}
.badge.live{color:#000;background:var(--yellow);border-color:var(--yellow)}
.badge.warn{color:#ffb86b;border-color:#8a5a22}
.badge.off{color:#ff9da1;border-color:#8e3438}
.run-facts{display:grid;gap:0}
.fact{padding:.55rem 0;border-bottom:1px solid #ffffff1a}.fact:last-child{border-bottom:0}
.fact b{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:#8f9088;font-weight:700}
.fact span{font-weight:700;font-size:1.05rem}
.run-actions{display:grid;gap:.8rem}
.run-actions small{font-size:.8rem;color:var(--muted);line-height:1.4}
.live-note{font-size:.82rem;color:var(--muted);margin:1.2rem 0 0 66px}.live-note b{color:var(--yellow)}.live-note a{text-decoration:underline;text-underline-offset:3px}
.empty-state{border:2px dashed var(--line2);border-radius:var(--r);padding:2.5rem;text-align:center}.empty-state h3{font-size:2rem;margin:0 0 .5rem}

/* sand "how it works" block */
.how{background:var(--sand) url('topo-light.svg') center/900px 900px;color:#111;border-block:2px solid #000}
.how .eyebrow,.how .sectionhead p{color:#56553f}
.oplist{list-style:none;margin:0;padding:1.6rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;position:relative}
.oplist::before{content:'';position:absolute;left:21px;right:21px;top:calc(1.6rem + 21px);border-top:3px dashed #9a9480}
.oplist li{position:relative;padding-right:1rem}
.oplist .num{position:relative;z-index:1;width:42px;height:42px;border-radius:50%;background:var(--yellow);border:3px solid #000;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:.8rem;margin-bottom:1.1rem}
.oplist h3{font-size:1.75rem;margin:0 0 .5rem}
.oplist p{margin:0;color:#3e3c2c}

/* quote banner */
.banner{background:var(--black) url('topo-dark.svg') center/900px 900px;padding:clamp(2.5rem,5vw,4rem) 0;border-bottom:2px solid #000}
.banner-text{margin:0;max-width:1000px;padding-left:1.6rem;border-left:6px solid var(--yellow);font-family:var(--disp);font-size:clamp(1.5rem,3.4vw,2.9rem);line-height:1.1;text-transform:uppercase;color:#fff;letter-spacing:.015em}
.banner-text small{display:block;margin-top:.6rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--yellow)}

/* photo strip on sand */
.paper{background:var(--sand) url('topo-light.svg') center/900px 900px;color:#111;padding:clamp(3rem,5vw,4.5rem) 0}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;align-items:start;padding:.5rem 0}
.gallery figure{margin:0;background:#fff;border:1px solid #c9c2a8;border-radius:3px;padding:.6rem .6rem 1rem;box-shadow:0 14px 34px rgba(40,35,10,.2);max-width:360px;justify-self:center;width:100%}
.gallery figure:nth-child(1){transform:rotate(-1.5deg)}.gallery figure:nth-child(2){transform:rotate(1deg) translateY(1rem)}.gallery figure:nth-child(3){transform:rotate(-.8deg)}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.92) contrast(1.05)}
.gallery figcaption{margin-top:.7rem;font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#444}

/* sponsors */
.sponsor-strip{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center}
.sponsor-strip a,.sponsor-strip span{display:flex;align-items:center;justify-content:center;width:200px;height:96px;padding:.8rem;border:2px solid var(--line2);border-radius:var(--r);background:#000;transition:transform .15s,border-color .15s}
.sponsor-strip a:hover,.sponsor-strip a:focus-visible{transform:translateY(-3px);border-color:var(--yellow)}
.sponsor-strip .light{background:#f5f5f0}
.sponsor-strip img{max-height:70px;max-width:100%;object-fit:contain}

/* cta */
.cta{background:#34321c url('topo-dark.svg') center/900px 900px;color:#fff;padding:clamp(3.5rem,6vw,5.5rem) 0;border-block:2px solid #000}
.cta .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2rem}
.cta h2{font-size:clamp(2.6rem,6vw,5.2rem);margin:0 0 .6rem}.cta h2 span{color:var(--yellow)}
.cta p{margin:0;color:#d6d1b4;font-weight:500;max-width:600px}

/* footer */
.footer{padding:3rem 0;background:var(--black);border-top:4px solid var(--yellow)}
.footgrid{display:grid;grid-template-columns:1fr 2fr;gap:3rem;align-items:start}
.footbrand{display:flex;align-items:center;gap:.9rem}.footbrand img{width:60px}
.footbrand b{font-family:var(--disp);font-weight:400;font-size:2.2rem;letter-spacing:.03em;text-transform:uppercase;line-height:.95}.footbrand b span{color:var(--yellow)}
.social-links{display:flex;gap:.7rem;flex-wrap:wrap}
.social-links a{display:inline-flex;align-items:center;min-height:40px;padding:.5rem .8rem;border:2px solid var(--line2);border-radius:999px;color:#fff;font-family:var(--mono);font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}
.social-links a:hover,.social-links a:focus-visible{border-color:var(--yellow);color:var(--yellow)}
.legal{margin-top:1.4rem;color:#777a72;font-size:.8rem}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:2rem;padding-top:1rem;border-top:1px solid #ffffff1a}
.copyright{color:var(--muted);font-size:.82rem}.copyright a{text-decoration:underline;text-underline-offset:3px}

/* responsive */
@media(max-width:1100px){.run{grid-template-columns:130px minmax(0,1fr) 200px}.run-actions{grid-column:2/-1;grid-template-columns:repeat(2,minmax(0,1fr))}.run-actions small{grid-column:1/-1}}
@media(max-width:1000px){.oplist{grid-template-columns:1fr;gap:1.8rem}.oplist::before{left:21px;right:auto;top:1.6rem;bottom:0;border-top:0;border-left:3px dashed #9a9480}.oplist li{padding-left:62px;padding-right:0}.oplist .num{position:absolute;left:0;top:-.2rem;margin:0}}
@media(max-width:900px){
.links{display:none}.nav>.button{display:none}
.mobile-register{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:40;background:var(--yellow);color:#000;min-height:54px;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;border-top:2px solid #000}
.footer{padding-bottom:5.5rem}
.hero{background-position:72% 30%}.hero::before{background:linear-gradient(90deg,rgba(5,5,5,.9) 0%,rgba(5,5,5,.75) 60%,rgba(5,5,5,.5) 100%),linear-gradient(0deg,#050505 0%,rgba(5,5,5,.6) 22%,transparent 55%)}.hero-grid{padding:3rem 0 3.5rem;min-height:0}
.sectionhead{grid-template-columns:1fr}.sectionhead p{margin-top:.4rem}
.gallery{grid-template-columns:1fr}.gallery figure{justify-self:start}.gallery figure:nth-child(2){transform:rotate(1deg)}
.schedule{padding-left:52px}.schedule::before{left:15px}.live-note{margin-left:52px}
.run{grid-template-columns:1fr;gap:1rem;padding:1.4rem 1.2rem}.run::before{left:-52px;width:34px;height:34px;font-size:.7rem;top:1.3rem}
.run-date{display:flex;align-items:baseline;gap:.6rem}.run-date .d{font-size:2.2rem;margin:0}
.run-actions{grid-column:auto;grid-template-columns:1fr}
.cta .wrap{grid-template-columns:1fr}
}
@media(max-width:560px){
.wrap{width:min(calc(100% - 28px),var(--max))}.brand img{width:40px}.brand b{font-size:1.3rem}.brand small{display:none}
.hero h1{font-size:3.2rem}.actions{display:grid}.waypoint{justify-content:center;font-size:.66rem}
.footgrid{grid-template-columns:1fr}
.footer-bottom{align-items:flex-start;flex-direction:column}
.sponsor-strip a,.sponsor-strip span{width:calc(50% - .6rem)}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}.ticker-track{flex-wrap:wrap;width:auto}.ticker-track>span:nth-child(n+4){display:none}}