:root { color-scheme: dark; --ink:#edf4ea; --muted:#bdcabb; --forest:#07261f; --deep:#041a15; --lime:#d5ef75; --line:#ffffff26; font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:var(--deep); color:var(--ink); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:radial-gradient(circle at 82% 0%, #24694d 0, var(--forest) 30rem, var(--deep) 66rem); line-height:1.5; }
main, footer { width:min(100% - 40px, 1120px); margin:0 auto; }
nav { display:flex; align-items:center; justify-content:space-between; padding:25px 0; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-weight:850; letter-spacing:.13em; font-size:.82rem; text-decoration:none; }
.brand img { border-radius:10px; }
.nav-links { display:flex; gap:25px; }
a { color:inherit; } .nav-links a, footer a { color:var(--muted); font-size:.9rem; text-decoration:none; } .nav-links a:hover, footer a:hover { color:var(--lime); }
.hero { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; min-height:660px; padding:55px 0 95px; }
.eyebrow { margin:0; color:var(--lime); font-size:.72rem; font-weight:850; letter-spacing:.16em; }
h1,h2,h3 { margin:0; line-height:1.02; letter-spacing:-.045em; } h1 { margin:17px 0 23px; font-size:clamp(3.5rem, 7.5vw, 6.6rem); } h1 em { color:var(--lime); font-style:normal; } h2 { font-size:clamp(2.3rem, 4.5vw, 4.3rem); } h3 { margin:18px 0 12px; font-size:1.55rem; }
.lede { max-width:500px; margin:0; color:var(--muted); font-size:1.16rem; }
.cta { display:inline-flex; gap:11px; align-items:center; margin-top:31px; padding:14px 19px; border-radius:999px; background:var(--lime); color:#122118; font-weight:850; text-decoration:none; } .cta:hover { background:#efffb4; }
.availability { margin:16px 0 0; color:var(--muted); font-size:.83rem; }
.trail-card { overflow:hidden; border:1px solid var(--line); border-radius:28px; background:#0c3429; box-shadow:0 28px 80px #0005; transform:rotate(2deg); }
.map-art { position:relative; height:365px; overflow:hidden; background:radial-gradient(ellipse at 18% 24%, #719660 0 2%, transparent 2.3%),radial-gradient(ellipse at 75% 44%, #4f805b 0 3%, transparent 3.4%),linear-gradient(135deg,#233f35,#143e32 50%,#0c3429); } .map-art::before,.map-art::after { content:""; position:absolute; border:1px solid #b2c58732; border-radius:50%; transform:rotate(-22deg); } .map-art::before { width:500px; height:210px; top:-45px; left:-110px; } .map-art::after { width:420px; height:170px; right:-165px; bottom:-50px; }
.route { position:absolute; display:block; width:265px; height:170px; border:7px solid transparent; border-top-color:#d5ef75; border-right-color:#d5ef75; border-radius:45% 60%; transform:rotate(32deg); } .route.one { top:96px; left:54px; } .route.two { top:67px; left:109px; width:160px; height:220px; border-top-color:transparent; border-right-color:transparent; border-bottom-color:#f3b05a; transform:rotate(-55deg); }
.pin { position:absolute; top:156px; left:201px; width:22px; height:22px; border:5px solid white; border-radius:50%; background:#e37155; box-shadow:0 0 0 7px #e3715544; } .map-art span { position:absolute; right:21px; bottom:18px; color:#d9e7d5; font-size:.62rem; font-weight:800; letter-spacing:.13em; }
.trail-info { padding:27px; } .trail-info h2 { margin:11px 0 22px; font-size:2.1rem; } .stats { display:flex; gap:20px; border-top:1px solid var(--line); padding-top:18px; } .stats span { color:var(--muted); font-size:.77rem; } .stats b { display:block; color:var(--ink); font-size:1.2rem; }
.intro { max-width:760px; padding:90px 0 42px; } .intro h2 { margin:16px 0; } .intro > p:last-child,.race-day p,.live p,.closing p { color:var(--muted); font-size:1.08rem; }
.feature-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); } article { min-height:285px; padding:38px; border-bottom:1px solid var(--line); } article:nth-child(odd) { border-right:1px solid var(--line); } article p { margin:0; color:var(--muted); } .number { color:var(--lime); font-weight:800; font-size:.8rem; }
.race-day { display:grid; grid-template-columns:1fr .8fr; gap:80px; margin:116px 0; padding:58px; border:1px solid var(--line); border-radius:25px; background:linear-gradient(120deg,#153f32,#0b2e26); } .race-day h2,.live h2,.closing h2 { margin:16px 0 20px; } .race-day ul { margin:0; padding:0; list-style:none; align-self:center; } .race-day li { padding:16px 0; border-bottom:1px solid var(--line); font-weight:700; } .race-day li span { display:inline-block; width:36px; color:var(--lime); font-size:.8rem; }
.live { padding:44px 0 116px; max-width:720px; } .closing { padding:75px 24px 94px; border-top:1px solid var(--line); text-align:center; } .closing img { border-radius:18px; } .closing h2 { max-width:700px; margin:22px auto; } .closing p { max-width:630px; margin:0 auto; } .text-link { display:inline-block; margin-top:27px; color:var(--lime); font-weight:800; }
footer { display:flex; justify-content:space-between; padding:25px 0 35px; color:#81978e; font-size:.8rem; border-top:1px solid var(--line); } footer span:last-child { display:flex; gap:20px; }
@media (max-width:720px) { main,footer { width:min(100% - 28px,1120px); } nav { padding:17px 0; } .nav-links { gap:14px; }.nav-links a { font-size:.78rem; }.hero,.race-day { grid-template-columns:1fr; gap:38px; }.hero { padding:60px 0 68px; min-height:0; }.trail-card { transform:none; }.map-art { height:260px; }.intro { padding-top:62px; }.feature-grid { grid-template-columns:1fr; } article,article:nth-child(odd) { min-height:0; padding:30px 7px; border-right:0; }.race-day { margin:75px 0; padding:32px 25px; gap:30px; }.live { padding-bottom:75px; } footer { gap:14px; flex-direction:column; }.closing { padding-left:0;padding-right:0; } }