/* ===== GoHike Shared Design System ===== */
:root {
  --pine: #1B3A1A; --pine-light: #2D5A27; --evergreen: #436B3A; --sage: #7DA37D;
  --trail: #D4954B; --trail-dark: #B8732A; --sky: #6CB4D9;
  --pebble: #F5F2EB; --pebble-dark: #EBE6DC; --stone: #D9D2C5;
  --white: #FFFFFF; --text: #1A1A1A; --text-muted: #6B6B6B;
  --font-heading: 'Outfit', 'Noto Sans SC', sans-serif;
  --font-body: 'Inter', 'Noto Sans SC', -apple-system, sans-serif;
  --max-width: 1280px; --radius: 20px; --radius-lg: 32px;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body { font-family:var(--font-body); background:var(--pebble); color:var(--text); -webkit-font-smoothing:antialiased; overflow-x:hidden }

/* Image lazy load */
.img-lazy { opacity:0; transition:opacity .6s ease }
.img-lazy.loaded { opacity:1 }
.img-cover { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }

/* Trail loader */
.trail-loader { position:fixed; top:0; left:0; right:0; height:3px; z-index:9999; background:linear-gradient(90deg,transparent,var(--trail),transparent); transform-origin:left; transform:scaleX(0); transition:transform .6s ease }
.trail-loader.loading { transform:scaleX(.3); animation:loaderLoop 1.5s ease-in-out infinite }
@keyframes loaderLoop { 0%{transform:scaleX(.3) translateX(-100%)} 50%{transform:scaleX(.1) translateX(200%)} 100%{transform:scaleX(.3) translateX(500%)} }

/* Nav */
.nav { position:fixed; top:0; left:0; right:0; z-index:100; padding:0 32px; height:72px; display:flex; align-items:center; justify-content:space-between; transition:all .3s }
.nav.scrolled { background:rgba(245,242,235,.88); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid rgba(27,58,26,.06) }
.nav-logo { font-family:var(--font-heading); font-size:22px; font-weight:800; color:var(--pine); text-decoration:none; display:flex; align-items:center; gap:10px; letter-spacing:-.5px }
.nav-logo-mark { width:34px; height:34px; border-radius:10px; background:var(--pine); color:var(--trail); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:900 }
.nav-logo-mark svg { width:18px; height:18px }
.nav-links { display:flex; gap:36px; align-items:center; list-style:none }
.nav-links a { font-family:var(--font-body); text-decoration:none; color:var(--pine); font-weight:500; font-size:14px; transition:color .2s; position:relative; letter-spacing:.3px }
.nav-links a:hover { color:var(--trail) }
.nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--trail); border-radius:1px; transition:width .3s }
.nav-links a:hover::after { width:100% }
.nav-links a.active { color:var(--trail) }
.nav-links a.active::after { width:100% }
.nav-btn { background:var(--trail)!important; color:white!important; padding:10px 24px; border-radius:50px; font-weight:600!important; font-size:13px!important; transition:all .3s!important }
.nav-btn::after { display:none!important }
.nav-btn:hover { background:var(--trail-dark)!important; transform:translateY(-1px); box-shadow:0 6px 20px rgba(212,149,75,.35) }
.nav-mobile { display:none; background:none; border:none; cursor:pointer; padding:4px; z-index:101 }
.nav-mobile span { display:block; width:22px; height:2px; background:var(--pine); margin:5px 0; border-radius:2px; transition:.3s }
.nav-mobile.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px) }
.nav-mobile.active span:nth-child(2) { opacity:0 }
.nav-mobile.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px) }

/* Section */
.section { padding:100px 48px; position:relative }
.section-inner { max-width:var(--max-width); margin:0 auto }
.sec-tagline { font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--trail-dark); margin-bottom:16px }
.sec-title { font-family:var(--font-heading); font-size:clamp(32px,5vw,52px); font-weight:800; color:var(--pine); letter-spacing:-1px; line-height:1.1; margin-bottom:16px }
.sec-subtitle { font-size:16px; color:var(--text-muted); max-width:500px; margin-bottom:64px; line-height:1.5 }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:10px; padding:16px 32px; border-radius:50px; font-family:var(--font-body); font-size:15px; font-weight:600; text-decoration:none; transition:all .3s; border:none; cursor:pointer; position:relative; overflow:hidden }
.btn-primary { background:var(--pine); color:var(--white); box-shadow:0 8px 30px rgba(27,58,26,.2) }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 36px rgba(27,58,26,.3) }
.btn-ghost { background:transparent; color:var(--pine); border:2px solid var(--stone); padding:14px 32px }
.btn-ghost:hover { border-color:var(--pine); background:rgba(27,58,26,.03) }
.btn .btn-icon { transition:transform .3s }
.btn:hover .btn-icon { transform:translateX(3px) }

/* Tags */
.tag-easy { background:#52B788; color:white; padding:4px 14px; border-radius:50px; font-size:11px; font-weight:700 }
.tag-medium { background:var(--trail); color:white; padding:4px 14px; border-radius:50px; font-size:11px; font-weight:700 }
.tag-hard { background:var(--pine); color:white; padding:4px 14px; border-radius:50px; font-size:11px; font-weight:700 }

/* Elevation bar */
.elevation-bar { width:48px; height:4px; background:var(--stone); border-radius:2px; overflow:hidden; display:inline-block; vertical-align:middle; margin:0 6px }
.elevation-fill { height:100%; border-radius:2px }
.elevation-low { background:#52B788; width:18% }
.elevation-mid { background:var(--trail); width:45% }
.elevation-high { background:var(--pine); width:82% }

/* Trail divider */
.trail-divider { position:relative; height:24px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--pebble) }
.trail-divider-inner { display:flex; gap:24px; align-items:center; opacity:.1 }
.trail-divider-inner svg { width:48px; height:8px; color:var(--pine) }
.trail-divider.dark { background:var(--pebble-dark) }

/* Footer */
.footer { background:#0F2210; color:rgba(255,255,255,.6); padding:64px 48px 32px }
.footer-grid { max-width:var(--max-width); margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px }
.footer p { font-size:13px; line-height:1.6; margin-top:12px }
.footer h5 { color:white; font-family:var(--font-heading); font-size:14px; font-weight:700; margin-bottom:16px }
.footer ul { list-style:none } .footer li { margin-bottom:8px }
.footer a { color:rgba(255,255,255,.5); text-decoration:none; font-size:13px; transition:color .2s }
.footer a:hover { color:var(--trail) }
.footer-bottom { max-width:var(--max-width); margin:48px auto 0; padding-top:24px; border-top:1px solid rgba(255,255,255,.08); font-size:12px; color:rgba(255,255,255,.3); text-align:center }

/* Card */
.card { background:white; border-radius:var(--radius); border:1px solid var(--stone); transition:all .35s; overflow:hidden }
.card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,.08) }

/* Scroll reveal */
.reveal { opacity:0; transform:translateY(40px); transition:all .8s cubic-bezier(.16,1,.3,1) }
.reveal.visible { opacity:1; transform:translateY(0) }

/* Hero (page header) */
.page-hero { padding:120px 48px 80px; background:var(--pebble); position:relative; overflow:hidden }
.page-hero-inner { max-width:var(--max-width); margin:0 auto; position:relative; z-index:1 }
.page-hero h1 { font-family:var(--font-heading); font-size:clamp(40px,6vw,68px); font-weight:900; color:var(--pine); letter-spacing:-1.5px; line-height:1.1; margin-bottom:20px; animation:fadeInUp .8s .1s ease both }
.page-hero p { font-size:17px; color:var(--text-muted); max-width:560px; line-height:1.6; animation:fadeInUp .8s .2s ease both }
@keyframes fadeInUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
.page-hero-bg { position:absolute; right:-10%; top:0; width:60%; height:100%; background:linear-gradient(165deg,rgba(27,58,26,.05) 0%,rgba(67,107,58,.03) 40%,rgba(108,180,217,.02) 100%); clip-path:polygon(25% 0,100% 0,100% 100%,0% 100%) }

/* Route card */
.route-card-img { height:200px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center }
.route-card-img .img-lazy { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0 }
.route-card-img .img-placeholder { font-size:48px; z-index:0; transition:opacity .4s }
.route-card-img .img-lazy.loaded~.img-placeholder { opacity:0 }
.route-card:hover .route-card-img .img-lazy.loaded { transform:scale(1.06); transition:transform .6s ease }
.route-card-tag { position:absolute; top:14px; left:14px; z-index:2 }
.route-card-content { padding:22px }
.route-card-content h3 { font-family:var(--font-heading); font-size:20px; font-weight:700; color:var(--pine); margin-bottom:6px }
.route-card-content .desc { font-size:13px; color:var(--text-muted); line-height:1.5; margin-bottom:14px }
.route-card-meta { display:flex; gap:14px; font-size:12px; color:var(--text-muted); font-weight:500; padding-top:14px; border-top:1px solid var(--pebble-dark); flex-wrap:wrap; align-items:center }

/* Filter bar */
.filter-bar { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:40px }
.filter-chip { padding:8px 20px; border-radius:50px; font-size:13px; font-weight:600; border:1.5px solid var(--stone); background:white; color:var(--text-muted); cursor:pointer; transition:all .25s; font-family:var(--font-body) }
.filter-chip:hover { border-color:var(--trail); color:var(--trail) }
.filter-chip.active { background:var(--pine); border-color:var(--pine); color:white }

/* Event card */
.event-card { display:grid; grid-template-columns:200px 1fr; gap:0; align-items:stretch }
.event-date { background:var(--pine); color:white; padding:28px 20px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center }
.event-date .month { font-family:var(--font-heading); font-size:14px; font-weight:600; text-transform:uppercase; opacity:.7 }
.event-date .day { font-family:var(--font-heading); font-size:40px; font-weight:900; line-height:1; margin:4px 0 }
.event-date .year { font-size:12px; opacity:.6 }
.event-content { padding:28px }
.event-content h3 { font-family:var(--font-heading); font-size:22px; font-weight:700; color:var(--pine); margin-bottom:8px }
.event-content .desc { font-size:14px; color:var(--text-muted); line-height:1.6; margin-bottom:16px }
.event-meta { display:flex; gap:20px; flex-wrap:wrap; font-size:12px; color:var(--text-muted) }
.event-meta span { display:inline-flex; align-items:center; gap:4px }

/* Back link */
.back-link { display:inline-flex; align-items:center; gap:6px; color:var(--trail-dark); font-size:14px; font-weight:600; text-decoration:none; margin-bottom:32px; transition:gap .2s }
.back-link:hover { gap:10px }
.back-link svg { width:16px; height:16px }

/* Stats row */
.stats-row { display:flex; gap:32px; margin-bottom:48px; flex-wrap:wrap }
.stat-item { display:flex; flex-direction:column; gap:4px }
.stat-value { font-family:var(--font-heading); font-size:28px; font-weight:900; color:var(--trail) }
.stat-label { font-size:12px; color:var(--text-muted); font-weight:500 }

/* Responsive */
@media(max-width:968px) {
  .nav-links { display:none; position:fixed; top:72px; left:0; right:0; flex-direction:column; gap:0; background:rgba(245,242,235,.96); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); padding:16px 0; border-bottom:1px solid rgba(27,58,26,.08); box-shadow:0 12px 30px rgba(0,0,0,.06) }
  .nav-links.open { display:flex }
  .nav-links a { display:block; padding:14px 32px; font-size:15px; width:100% }
  .nav-links a.nav-btn { display:inline-block; margin:8px 32px; width:auto }
  .nav-mobile { display:block }
  .section, .page-hero { padding:80px 24px }
  .footer-grid { grid-template-columns:1fr 1fr }
  .event-card { grid-template-columns:1fr }
  .event-date { flex-direction:row; gap:12px; padding:20px 24px; align-items:center }
  .event-date .day { font-size:32px }
}
@media(max-width:600px) {
  .section, .page-hero { padding:60px 16px }
  .footer { padding:48px 16px 24px }
  .footer-grid { grid-template-columns:1fr }
  .filter-bar { gap:8px }
  .filter-chip { padding:6px 16px; font-size:12px }
  .stats-row { gap:16px }
  .stat-value { font-size:22px }
}