:root {
  --bone: #e9e5d6; --olive: #3e4731; --pine: #1e2a1d; --blaze: #ff6a13;
  --head: 'Saira Extra Condensed', 'Arial Narrow', sans-serif; --body: 'IBM Plex Sans', system-ui, sans-serif;
  --cut: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  --cx-bg: #f6f3e8; --cx-surface: #dfdac6; --cx-text: var(--pine); --cx-muted: #565c49; --cx-line: #9a9a82;
  --cx-accent: var(--pine); --cx-on-accent: var(--bone); --cx-radius: 0; --cx-font: var(--body); --cx-head-font: var(--head); --cx-head-weight: 800;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bone); color: var(--pine); font: 400 1.0625rem/1.5 var(--body); }
a { color: inherit; }
main { display: block; outline: none; min-height: 60vh; }
:focus-visible { outline: 3px solid var(--blaze); outline-offset: 2px; }
.top { display: flex; gap: 24px; align-items: center; padding: 12px clamp(16px, 4vw, 48px); background: var(--pine); color: var(--bone); }
.top a { text-decoration: none; }
.top a:hover { text-decoration: underline; }
.mark { margin-right: auto; font: 800 1.75rem/1 var(--head); }
.range { position: relative; display: flex; align-items: flex-end; min-height: min(84vh, 760px); padding: clamp(24px, 5vw, 64px) clamp(16px, 4vw, 48px); background: var(--olive); overflow: hidden; }
.topo { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #93a077; stroke-width: 1.5; }
.sign { position: relative; color: var(--bone); max-width: 100%; }
.sign h1 { margin: 0; font: 800 clamp(5rem, 22vw, 20rem)/0.82 var(--head); letter-spacing: -0.01em; }
.sign p { margin: 20px 0; max-width: 40ch; font-size: 1.25rem; }
.blaze { display: inline-block; padding: 14px 40px 14px 24px; background: var(--blaze); color: var(--pine); font: 800 1.5rem/1 var(--head); text-decoration: none; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%); }
.blaze:hover { background: #fff; }
.kit { padding: clamp(40px, 7vw, 80px) clamp(16px, 4vw, 48px); scroll-margin-top: 0; }
.kit h2 { margin: 0; font: 800 clamp(3rem, 9vw, 7rem)/0.9 var(--head); }
.trails { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 14px 0 28px; padding: 0; list-style: none; }
.trails a[aria-current] { font-weight: 700; color: #a63e00; }
.markers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 20px; }
.marker { position: relative; display: flex; flex-direction: column; padding: 14px 14px 26px; background: #f6f3e8; color: var(--pine); text-decoration: none; clip-path: var(--cut); }
.marker:hover { background: var(--pine); color: var(--bone); }
.marker-photo { display: block; aspect-ratio: 1; background: #fff; margin-bottom: 12px; }
.marker-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.marker-name { font: 700 1.5rem/1.05 var(--head); overflow-wrap: break-word; }
.marker-price { margin-top: 4px; font-weight: 500; }
.marker-chip { position: absolute; top: 22px; left: 22px; padding: 2px 8px; background: var(--blaze); color: var(--pine); font-weight: 600; font-size: 0.8125rem; }
.pdp h1 { font: 800 clamp(3rem, 7vw, 5.5rem)/0.92 var(--head); }
.pdp-photo { background: #fff; clip-path: var(--cut); }
.pdp-add { background: var(--blaze); border-color: var(--blaze); color: var(--pine); font-weight: 700; }
.opt[aria-pressed='true'] { background: var(--pine); border-color: var(--pine); color: var(--bone); }
.bag h1 { font: 800 clamp(3rem, 7vw, 5.5rem)/0.92 var(--head); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; padding: 28px clamp(16px, 4vw, 48px); background: var(--pine); color: var(--bone); }
.foot [data-footer-links] { width: 100%; }
.foot p { margin: 0; max-width: 60ch; }
.state h1 { font: 800 4rem/1 var(--head); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }