:root{
  --paper:#f5f0e3; --card:#fbf8ef; --ink:#1f2d26; --ink-2:#3f463f; --muted:#7d7b6c; --line:rgba(31,45,38,.16);
  --rust:#a6532c; --green:#2f5a46; --mustard:#c48f2c; --slate:#3e6172; --brick:#8a3b2c; --gold:#c98b2e;
  --sky-top:#f5f0e3; --sky-mid:#f3e2c2; --sky-low:#efc99a; --sun:#e39a4f;
  --m1:#c3c7ae; --m2:#93a88f; --m3:#5c7d68; --m4:#2c4a3e;
  --display:"Rammetto One","National Park",system-ui,sans-serif;
  --body:"Grandstander","Grandstander Thin","National Park",system-ui,sans-serif;
  
  --mono:"Courier Prime","Courier New",monospace; --script:"Yellowtail",cursive;
  --max:1120px; --pad:clamp(20px,5vw,64px); --indent:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.8 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
svg{display:block}
::selection{background:var(--rust);color:var(--paper)}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.label{font:700 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--rust)}

/* paper grain + topo */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%231f2d26' stroke-opacity='.04'%3E%3Cpath d='M-20 120c80-40 160 30 250-10s170-60 240-20 130 30 190 10'/%3E%3Cpath d='M-20 152c90-40 160 30 250-5s170-60 240-15 130 30 190 10'/%3E%3Cpath d='M-20 188c90-30 170 35 255 0s160-55 235-15 135 30 190 15'/%3E%3Cpath d='M-20 380c70 30 150-40 240-10s160 60 250 20 120-30 190-10'/%3E%3Cpath d='M-20 414c80 30 150-35 240-5s160 55 250 15 120-25 190-5'/%3E%3Cellipse cx='460' cy='540' rx='80' ry='36'/%3E%3Cellipse cx='460' cy='540' rx='50' ry='21'/%3E%3Cellipse cx='130' cy='280' rx='64' ry='26'/%3E%3C/g%3E%3C/svg%3E")}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:30;transition:background .4s,box-shadow .4s}
.nav.scrolled{background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.mark{display:flex;align-items:center;gap:10px;font:700 19px/1 var(--body);text-decoration:none}
.mark svg{width:30px;height:30px}
.links{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px)}
.links a{text-decoration:none;font:600 15px/1 var(--body);color:var(--ink-2);letter-spacing:.01em}
.links a:not(.pill):hover{color:var(--rust)}
.pill{display:inline-flex;align-items:center;gap:7px;padding:10px 17px;border-radius:999px;background:var(--green);color:var(--paper)!important;text-decoration:none;transition:background .25s,transform .25s}
.pill:hover{background:var(--rust);transform:translateY(-1px)}
.pill svg{width:16px;height:16px}

/* hero */
.hero{position:relative;height:max(680px,100svh);max-height:1050px;overflow:hidden;
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-top) 22%,var(--sky-mid) 52%,var(--sky-low) 72%,var(--sky-low) 100%)}
.layer{position:absolute;left:0;right:0;bottom:0;height:100%;will-change:transform}
.layer svg{width:100%;height:100%}
.sun{position:absolute;left:72%;top:42%;width:clamp(110px,11vw,170px);aspect-ratio:1;border-radius:50%;background:var(--sun);box-shadow:0 0 0 22px rgba(227,154,79,.16),0 0 0 48px rgba(227,154,79,.08);will-change:transform}
.cloud{position:absolute;height:14px;border-radius:9px;background:#fbf6ea;opacity:.9;will-change:transform}
.cloud::before{content:"";position:absolute;left:22%;right:30%;top:-12px;height:14px;border-radius:9px;background:inherit}
.hero-c{position:relative;z-index:5;padding-top:clamp(110px,16vh,170px)}
.hero h1{font:400 clamp(58px,9vw,128px)/.95 var(--display);letter-spacing:.01em;margin:0;text-transform:uppercase}
.hero .role{font:500 clamp(22px,2.4vw,28px)/1.25 var(--body);color:var(--rust);margin:16px 0 0}
.hero .tag{font:400 clamp(19px,1.8vw,22px)/1.65 var(--body);max-width:560px;margin:18px 0 0;color:var(--ink-2)}
.loc{display:flex;align-items:center;gap:10px;margin-top:24px;font:700 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.loc::before{content:"";width:28px;height:1.5px;background:currentColor}
.trailhead{position:absolute;left:50%;bottom:6.5%;z-index:6;transform:translateX(-50%);width:120px}
.scroll-cue{position:absolute;left:50%;bottom:22px;z-index:6;transform:translateX(-50%);font:700 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);display:none}

/* trail overlay */
.page{position:relative}
.trail-svg{position:absolute;left:0;top:0;pointer-events:none;z-index:1;overflow:visible}
.trail-bg{fill:none;stroke:rgba(31,45,38,.18);stroke-width:2.5;stroke-dasharray:2 10;stroke-linecap:round}
.trail-fg{fill:none;stroke:var(--rust);stroke-width:3;stroke-dasharray:10 9;stroke-linecap:round}
.hiker{fill:var(--rust)}
.hiker-ring{fill:none;stroke:var(--rust);stroke-width:2;opacity:.35;transform-box:fill-box;transform-origin:center;animation:ring 2.2s ease-out infinite}
@keyframes ring{0%{transform:scale(.6);opacity:.6}100%{transform:scale(2.1);opacity:0}}
main,footer{position:relative;z-index:2}

/* section heads with markers */
.sec{padding-block:clamp(90px,11vw,150px)}
.sec-head{position:relative;padding-left:0;margin-bottom:clamp(36px,5vw,60px)}
.sec-head h2{font:400 clamp(38px,5.4vw,66px)/1.05 var(--display);margin:16px 0 0}
.sec-head p{max-width:600px;color:var(--ink-2);margin:16px 0 0;font-size:19px}
.marker{position:absolute;left:0;top:-6px;width:44px;height:44px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);display:grid;place-items:center;color:var(--ink);transition:background .4s,color .4s,border-color .4s}
.marker svg{width:20px;height:20px}
.marker.on{background:var(--ink);color:var(--paper)}

/* experience trail */
.sec-head.exp{padding-left:0;width:calc(50% - 90px)}
.sec-head.exp .marker{left:auto;right:-112px;top:40%}
.stops-end{width:2px;height:2px;margin-left:calc(50% - 1px)}
.stops{position:relative;padding-top:10px}
.stop{position:relative;width:calc(50% - 90px);margin-bottom:clamp(30px,4vw,60px)}
.stop:nth-child(odd){margin-right:auto;text-align:left}
.stop:nth-child(even){margin-left:auto}
.stop+.stop{margin-top:-90px}
.stop .pin{position:absolute;top:2px;width:52px;height:52px}
.stop:nth-child(odd) .pin{right:-86px}
.stop:nth-child(even) .pin{left:-86px}
.pin .disc{position:absolute;inset:0;border-radius:50%;background:var(--paper);border:2px solid var(--ink);display:grid;place-items:center;transition:background .5s var(--ease),transform .5s var(--ease),color .4s}
.pin .disc svg{width:22px;height:22px}
.pin.on .disc{background:var(--rust);border-color:var(--rust);color:var(--paper);transform:scale(1.08)}
.pin .flag{position:absolute;top:-24px;left:50%;transform:translateX(-50%);font:700 10px/1 var(--mono);letter-spacing:.14em;white-space:nowrap;color:var(--muted)}
.wp{font:700 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.stop h3{font:400 clamp(32px,3.8vw,46px)/1.05 var(--display);margin:0;text-transform:uppercase}
.stop .sub{font:500 20px/1.4 var(--body);color:var(--rust);margin:10px 0 16px}
.stop p{margin:0 0 14px;color:var(--ink-2)}
.stop.life h3{color:var(--green)}
.stop .card{transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .stop .card{opacity:0;transform:translateY(30px)}
.js .stop.in .card{opacity:1;transform:none}

/* permit */
.permit-wrap{padding-left:0}
.permit{position:relative;background:var(--card);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);font-family:var(--mono);color:var(--ink);max-width:900px}
.permit::before{content:"";position:absolute;inset:8px;border:1px solid var(--line);pointer-events:none}
.p-head{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:start;padding:28px 32px 20px;border-bottom:2px solid var(--ink)}
.p-head .agency{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.p-head h3{font:400 clamp(22px,2.6vw,30px)/1.15 var(--display);margin:8px 0 0;text-transform:uppercase}
.p-head .form{text-align:right;font-size:12px;letter-spacing:.1em;text-transform:uppercase;line-height:1.6}
.p-head .form b{display:block;font-size:22px}
.p-fields{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:2px solid var(--ink)}
.p-fields div{padding:12px 18px;border-right:1px solid var(--line)}
.p-fields div:last-child{border-right:0}
.p-fields span{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.p-fields b{font-size:15px}
.p-items{list-style:none;margin:0;padding:6px 32px 10px;counter-reset:it}
.p-items li{display:grid;grid-template-columns:28px 34px 190px 1fr;gap:10px;align-items:baseline;padding:12px 0;border-bottom:1px dashed var(--line);counter-increment:it;font-size:15px;line-height:1.6;transition:opacity .5s}
.p-items li:last-child{border-bottom:0}
.p-items li::before{content:counter(it,decimal-leading-zero);color:var(--muted);font-size:12px}
.box{width:20px;height:20px;border:1.5px solid var(--ink);position:relative;top:4px}
.box svg{position:absolute;left:-1px;top:-8px;width:26px;height:26px;overflow:visible}
.box path{fill:none;stroke:var(--rust);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:0;transition:stroke-dashoffset .4s var(--ease)}
.js .p-items li:not(.ok) .box path{stroke-dashoffset:40}
.js .p-items li:not(.ok){opacity:.55}
.p-items strong{font-weight:700;letter-spacing:.06em}
.p-items em{font-style:normal;color:var(--ink-2)}
.p-foot{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;padding:22px 32px 30px;border-top:2px solid var(--ink)}
.endorse{max-width:440px}
.endorse span{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.endorse b{font-size:13px;letter-spacing:.08em;line-height:1.7}
.sig{min-width:220px;text-align:center}
.sig .s{font:400 42px/1.1 var(--script);color:var(--slate);display:inline-block;transform:rotate(-4deg);clip-path:inset(-20px -30px -20px -20px);transition:clip-path 1.1s var(--ease);padding-right:6px}
.js .permit:not(.signed) .sig .s{clip-path:inset(-20px 100% -20px -20px)}
.sig small{display:block;border-top:1px solid var(--ink);padding-top:6px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.stamp{position:absolute;right:270px;bottom:20px;width:116px;height:116px;color:var(--rust);opacity:.85;transform:rotate(-14deg);pointer-events:none}
.js .permit:not(.stamped) .stamp{opacity:0;transform:rotate(-24deg) scale(1.6);transition:opacity .3s,transform .3s}
.permit.stamped .stamp{animation:stamp .5s cubic-bezier(.3,1.6,.5,1) both}
.permit.stamped{animation:thud .35s .18s ease-out}
@keyframes stamp{0%{opacity:0;transform:rotate(-30deg) scale(2.4)}70%{opacity:.95;transform:rotate(-12deg) scale(.94)}100%{opacity:.85;transform:rotate(-14deg) scale(1)}}
@keyframes thud{0%{transform:none}30%{transform:translate(2px,3px)}100%{transform:none}}

/* points of interest */
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(36px,4vw,56px) clamp(20px,3vw,40px);padding-left:0}
.poi{text-align:center;text-decoration:none;color:inherit}
.patch{width:min(196px,100%);margin:0 auto;filter:drop-shadow(0 6px 0 rgba(31,45,38,.16));transition:transform .5s cubic-bezier(.2,.8,.2,1.4)}
.poi:hover .patch{transform:rotate(-7deg) scale(1.05)}
.js .poi .patch{transform:scale(.6) rotate(-20deg);opacity:0;transition:transform .7s cubic-bezier(.2,.8,.2,1.3),opacity .5s}
.js .poi.in .patch{transform:none;opacity:1}
.js .poi.in:hover .patch{transform:rotate(-7deg) scale(1.05)}
.poi h3{font:600 22px/1.2 var(--body);margin:22px 0 6px}
.poi p{margin:0 auto;max-width:280px;color:var(--ink-2);font-size:17px;line-height:1.6}
.poi .go{display:inline-block;margin-top:12px;font:700 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--rust);border-bottom:1.5px solid currentColor;padding-bottom:3px}
.patch text{font-family:var(--body);font-weight:700;letter-spacing:.12em;text-transform:uppercase}

/* summit */
.summit{position:relative}
.flag-marker{position:absolute;left:0;top:-58px;width:44px;height:60px;color:var(--rust)}
.end{background:var(--ink);color:var(--paper);border-radius:28px;padding:clamp(40px,6vw,76px);position:relative;overflow:hidden}
.end .label{color:var(--mustard)}
.end h2{font:400 clamp(38px,5.4vw,66px)/1.05 var(--display);margin:14px 0 22px}
.end p{max-width:640px;color:#ddd7c6;margin:0 0 16px;font-size:19px}
.end .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;position:relative;z-index:1}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;border:1.5px solid rgba(245,240,227,.35);text-decoration:none;font:600 16px/1 var(--body);color:var(--paper);transition:.25s}
.btn:hover{border-color:var(--paper);background:rgba(245,240,227,.08)}
.btn.solid{background:var(--mustard);border-color:var(--mustard);color:var(--ink)}
.btn.solid:hover{background:#d8a443}
.btn svg{width:16px;height:16px}
.end .peaks{position:absolute;right:-20px;bottom:-4px;width:min(560px,62%);opacity:.12}

.foot{padding:44px 0 64px;font:700 11px/1.8 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

.rv{transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .rv{opacity:0;transform:translateY(24px)}
.js .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv,.js .stop .card,.js .poi .patch{opacity:1!important;transform:none!important}
  .layer,.sun,.cloud{transform:none!important}
  .hiker-ring{animation:none}
}

@media (max-width:900px){
  .links a:not(.pill){display:none}
  :root{--indent:52px}
  .stop,.stop:nth-child(odd),.stop:nth-child(even){width:auto;margin:0 0 56px;padding-left:var(--indent)}
  .stop+.stop{margin-top:0}
  .sec-head.exp{padding-left:var(--indent);width:auto}
  .sec-head.exp .marker{left:0;right:auto;top:-6px}
  .stops-end{margin-left:20px}
  .stop:nth-child(odd) .pin,.stop:nth-child(even) .pin{left:-2px;right:auto;width:44px;height:44px}
  .pin .flag{display:none}
  .badges{grid-template-columns:repeat(2,1fr)}
  .p-fields{grid-template-columns:1fr 1fr}
  .p-fields div:nth-child(2){border-right:0}
  .p-fields div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .p-items li{grid-template-columns:26px 30px 1fr}
  .p-items li em{grid-column:3}
  .stamp{width:92px;height:92px;right:16px;bottom:auto;top:12px}
  .p-foot{grid-template-columns:1fr}
  .sun{left:66%;top:50%}
}
@media (max-width:560px){
  body{font-size:18px}
  :root{--indent:44px}
  .marker{width:36px;height:36px}.marker svg{width:16px;height:16px}
  .stop .pin,.stop:nth-child(odd) .pin,.stop:nth-child(even) .pin{width:36px;height:36px}
  .pin .disc svg{width:16px;height:16px}
  .badges{grid-template-columns:1fr 1fr;gap:30px 12px}
  .poi h3{font-size:18px}.poi p{font-size:15px}
  .p-head{grid-template-columns:1fr;padding:22px 18px 16px}.p-head .form{text-align:left}
  .p-items{padding:4px 18px 8px}.p-foot{padding:20px 18px}
  .permit{box-shadow:5px 5px 0 var(--ink)}
  .flag-marker{width:36px;height:50px;top:-48px}
  .trailhead{width:96px}
}