/* Primary display reference: Roboto Slab** / Slab* in 700/900 weights for the p9r.xyz wordmark */
:root{
  --pine:#1F7A5A;
  --coral:#F26A4B;
  --cream:#FFF1C7;
  --spruce:#18473B;
  --sky:#74C7E8;
  --snow:#F7F7EF;
  --yellow:#F8C84B;
  --brown:#5C3A21;
  --panel-count:6;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;overflow:hidden;background:var(--sky);color:var(--spruce)}
body{font-family:"Nunito Sans",system-ui,sans-serif;cursor:grab}
body.dragging{cursor:grabbing;user-select:none}

.panorama{position:relative;display:flex;width:600vw;height:100vh;overflow:hidden;background:linear-gradient(90deg,#74C7E8 0%,#74C7E8 63%,#4f8cac 82%,#18473B 100%)}
.panel{position:relative;flex:0 0 100vw;height:100vh;overflow:hidden;padding:7vh 7vw;background:transparent}
.panel:before{content:"";position:absolute;left:-8vw;right:-8vw;bottom:-9vh;height:38vh;background:var(--pine);border-radius:54% 46% 0 0/38% 44% 0 0;box-shadow:0 -12px 0 rgba(24,71,59,.16);z-index:4}
.panel:nth-of-type(odd):before{background:#2a8b66;transform:skewX(-4deg)}
.trailhead:before{background:#1F7A5A}.valley:before{height:43vh;background:#2C966D}.station:before{background:#1F7A5A}.pass:before{height:34vh;background:#2a8b66}.summit:before{background:#18473B}.camp:before{height:40vh;background:#12382F}
.panel:after{content:"";position:absolute;left:0;right:0;bottom:0;height:22vh;background:var(--cream);clip-path:polygon(0 36%,12% 26%,25% 38%,42% 20%,58% 36%,75% 22%,90% 34%,100% 25%,100% 100%,0 100%);opacity:.96;z-index:5}
.summit:after,.camp:after{background:#2B4B45;opacity:1}

.sky-strip,.mountains,.hills,.trail-line{position:absolute;left:0;top:0;width:600vw;height:100vh;pointer-events:none}
.sky-strip{z-index:1}.mountains{z-index:2}.hills{z-index:3}.trail-line{z-index:7;top:22vh;height:64vh;overflow:visible}
#routePath{fill:none;stroke:var(--coral);stroke-width:22;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 5px 0 rgba(92,58,33,.18))}

.peak{position:absolute;bottom:31vh;width:0;height:0;border-left:9vw solid transparent;border-right:9vw solid transparent;border-bottom:28vh solid #5C3A21;filter:drop-shadow(10px 8px 0 rgba(24,71,59,.13))}
.peak b{position:absolute;left:-4vw;top:6vh;width:0;height:0;border-left:4vw solid transparent;border-right:4vw solid transparent;border-bottom:8vh solid var(--snow)}
.p1{left:6vw}.p2{left:34vw;transform:scale(1.2)}.p3{left:73vw;transform:scale(.85)}.p4{left:139vw;transform:scale(1.3)}.p5{left:236vw}.p6{left:348vw;transform:scale(1.35)}.p7{left:425vw}.p8{left:488vw;transform:scale(1.45)}
.hills{top:auto;bottom:18vh;height:32vh;background:linear-gradient(90deg,#FFF1C7 0 10%,#F8C84B 10% 14%,#FFF1C7 14% 35%,#F8C84B 35% 39%,#FFF1C7 39% 64%,#F8C84B 64% 68%,#2B4B45 68% 100%);clip-path:polygon(0 58%,6% 40%,15% 56%,24% 32%,33% 54%,45% 38%,57% 58%,68% 36%,78% 56%,90% 34%,100% 52%,100% 100%,0 100%);opacity:.92}

.cloud{position:absolute;padding:1rem 1.5rem;border-radius:999px;background:var(--snow);font-family:"Zilla Slab",Georgia,serif;font-weight:700;color:var(--brown);box-shadow:1.4rem .2rem 0 -.2rem var(--snow),-.8rem .3rem 0 -.1rem var(--snow);animation:cloudFloat 9s ease-in-out infinite}
.cloud-a{left:38vw;top:11vh}.cloud-b{left:248vw;top:15vh;animation-delay:-3s}.cloud-c{left:380vw;top:9vh;animation-delay:-5s}.sun{position:absolute;left:19vw;top:12vh;width:8rem;height:8rem;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 18px rgba(248,200,75,.18)}.moon{position:absolute;left:500vw;top:13vh;width:7rem;height:7rem;border-radius:50%;background:var(--cream);box-shadow:-1.2rem .2rem 0 #4f8cac inset}.bird{position:absolute;font-size:3rem;color:var(--spruce);font-weight:900}.bird-one{left:164vw;top:19vh}.bird-two{left:418vw;top:25vh}

h1,h2{font-family:"Roboto Slab",Rockwell,Georgia,serif;margin:0;color:var(--brown);line-height:.92;letter-spacing:-.04em}h1{font-size:clamp(5rem,15vw,14rem)}h2{font-size:clamp(2.4rem,5.6vw,6.6rem)}p{font-size:clamp(1rem,1.4vw,1.35rem);line-height:1.35;margin:1rem 0 0}.label{display:block;font-family:"Zilla Slab",Georgia,serif;font-weight:700;text-transform:lowercase;color:var(--coral);letter-spacing:.08em;margin-bottom:.6rem}.sign,.plaque,.ranger-hut,.cloud-note,.rock-plaque,.camp-note{position:relative;z-index:9;max-width:min(47rem,70vw)}
.big-sign{margin-top:8vh;padding:2.2rem 2.4rem 2.5rem;background:var(--cream);border:.55rem solid var(--brown);border-radius:1.6rem;box-shadow:1rem 1rem 0 rgba(24,71,59,.35)}.big-sign:before,.big-sign:after{content:"";position:absolute;bottom:-24vh;width:1.4rem;height:24vh;background:var(--brown);border-radius:999px}.big-sign:before{left:17%}.big-sign:after{right:17%}
.draw-under{display:block;width:70%;height:1rem;margin:.75rem 0;background:var(--coral);border-radius:999px;transform-origin:left center;transform:scaleX(0);box-shadow:.4rem .35rem 0 rgba(92,58,33,.18)}.in-view .draw-under{animation:underlineDraw 1s cubic-bezier(.19,1,.22,1) forwards}.draw-under.final{width:36%}
.p-cliff{position:absolute;right:11vw;bottom:27vh;z-index:6;font-family:"Roboto Slab",serif;font-weight:900;font-size:31vw;color:#18473B;opacity:.18;line-height:.7}.post{position:absolute;left:72vw;bottom:34vh;z-index:8;padding:.8rem 1rem;background:var(--yellow);border:.35rem solid var(--brown);border-radius:.6rem;font-family:"Zilla Slab";font-weight:700;color:var(--brown);transform:rotate(5deg)}

.pine{position:absolute;z-index:8;width:0;height:0;border-left:2.2rem solid transparent;border-right:2.2rem solid transparent;border-bottom:7rem solid var(--spruce);filter:drop-shadow(.35rem .45rem 0 rgba(92,58,33,.2))}.pine:before{content:"";position:absolute;left:-1.65rem;top:2.2rem;border-left:1.65rem solid transparent;border-right:1.65rem solid transparent;border-bottom:5.2rem solid var(--pine)}.pine:after{content:"";position:absolute;left:-.38rem;top:7rem;width:.75rem;height:2.8rem;background:var(--brown)}.cluster-one{right:22vw;bottom:25vh}.cluster-two{right:16vw;bottom:23vh;transform:scale(.8)}.valley-pine-a{left:54vw;bottom:25vh}.valley-pine-b{left:65vw;bottom:27vh;transform:scale(1.25)}.station-pine{right:18vw;bottom:26vh;transform:scale(1.4)}.hidden-bird{position:absolute;left:-.4rem;top:1.4rem;color:var(--yellow);font-size:1.2rem;opacity:0;transform:translateY(.8rem);transition:.35s}.interactive-pine:hover .hidden-bird{opacity:1;transform:translateY(-.5rem)}

.plaque{margin:12vh auto 0;padding:2rem;background:#FFF1C7;border:.45rem solid var(--brown);border-radius:2rem;transform:rotate(-2deg);box-shadow:.75rem .75rem 0 rgba(24,71,59,.24)}.switchback-nine{position:absolute;left:33vw;bottom:21vh;z-index:6;font-family:"Roboto Slab";font-size:48vw;font-weight:900;color:rgba(242,106,75,.22);line-height:.72}.boulder{position:absolute;left:16vw;bottom:24vh;z-index:9;width:9rem;height:5.5rem;background:#5C3A21;border-radius:55% 45% 46% 52%;box-shadow:.5rem .5rem 0 rgba(24,71,59,.3);display:grid;place-items:center;color:var(--cream);font-family:"Roboto Slab";font-weight:900}.boulder span{opacity:0;transition:.25s}.boulder:hover span{opacity:1}.flower,.mushroom{position:absolute;z-index:9;bottom:24vh}.flower{width:1rem;height:1rem;border-radius:50%;background:var(--yellow);box-shadow:1rem 0 0 var(--yellow),.5rem -.8rem 0 var(--coral)}.flower-a{left:28vw}.flower-b{left:80vw;transform:scale(1.4)}.mushroom{left:22vw;width:1.6rem;height:1.2rem;background:var(--coral);border-radius:1rem 1rem .2rem .2rem;box-shadow:0 1.1rem 0 -.25rem var(--cream)}

.ranger-hut{margin:13vh 0 0 9vw;padding:4.2rem 2rem 1.8rem;background:var(--cream);border:.45rem solid var(--brown);border-radius:1rem;box-shadow:.85rem .85rem 0 rgba(24,71,59,.22)}.ranger-hut .roof{position:absolute;left:-1.2rem;right:-1.2rem;top:-3.5rem;height:4.8rem;background:var(--coral);clip-path:polygon(0 100%,50% 0,100% 100%)}.elevation-ruler{position:absolute;right:10vw;top:16vh;z-index:9;width:5rem;height:55vh;background:var(--cream);border:.35rem solid var(--brown);display:flex;flex-direction:column;justify-content:space-around;align-items:center;font-family:"Zilla Slab";font-weight:700;color:var(--brown)}.flag{position:absolute;left:56vw;top:28vh;z-index:9;padding:.8rem 1rem;background:var(--coral);color:var(--cream);font-family:"Zilla Slab";font-weight:700;border-radius:.5rem;transform:rotate(7deg)}.compass-flower{position:absolute;left:62vw;bottom:27vh;z-index:9;width:5rem;height:5rem;background:var(--yellow);clip-path:polygon(50% 0,60% 38%,100% 50%,60% 62%,50% 100%,40% 62%,0 50%,40% 38%)}

.cloud-note{margin:8vh auto 0;padding:2rem 3rem;background:var(--snow);border-radius:999px;box-shadow:2rem .3rem 0 -.1rem var(--snow),-1.7rem .5rem 0 0 var(--snow),.8rem 1rem 0 -.2rem rgba(92,58,33,.12)}.rope-bridge{position:absolute;left:18vw;right:17vw;bottom:35vh;z-index:8;height:5rem;border-top:.7rem solid var(--coral);border-bottom:.35rem dashed var(--brown);border-radius:50%;transform:rotate(-2deg)}.rope-bridge span{position:relative;display:inline-block;width:1rem;height:4rem;background:var(--brown);margin-left:13vw;top:.6rem}.pika{position:absolute;bottom:29vh;z-index:9;width:2.5rem;height:2rem;border-radius:50%;background:#5C3A21;color:var(--yellow);text-align:center;line-height:1.2rem}.pika-a{left:24vw}.pika-b{right:26vw}.cloud-peak-label{position:absolute;right:15vw;top:22vh;z-index:8;font-family:"Roboto Slab";font-size:6vw;font-weight:900;color:var(--snow);letter-spacing:.2em;text-shadow:.4rem .4rem 0 rgba(24,71,59,.2)}

.summit-card{margin:12vh 0 0 8vw;padding:2rem;background:#F7F7EF;border:.45rem solid var(--brown);border-radius:1.4rem;box-shadow:.9rem .9rem 0 rgba(0,0,0,.22)}.summit h2,.camp h2{color:var(--cream)}.summit-card h2{color:var(--brown)}.xyz-peaks{position:absolute;right:10vw;bottom:25vh;z-index:8;display:flex;gap:1rem}.xyz-peaks span{display:grid;place-items:center;width:11rem;height:15rem;background:var(--spruce);color:var(--snow);font-family:"Roboto Slab";font-weight:900;font-size:5rem;clip-path:polygon(50% 0,100% 100%,0 100%)}.star{position:absolute;z-index:9;width:1rem;height:1rem;background:var(--yellow);clip-path:polygon(50% 0,62% 37%,100% 50%,62% 63%,50% 100%,38% 63%,0 50%,38% 37%);animation:blink 1.8s ease-in-out infinite}.star-one{right:34vw;top:18vh}.star-two{right:22vw;top:12vh;animation-delay:.4s}.star-three{right:14vw;top:24vh;animation-delay:.8s}

.camp-note{margin:12vh 0 0 10vw;color:var(--cream);max-width:40rem}.camp-note .label{color:var(--yellow)}.tent{position:absolute;left:55vw;bottom:25vh;z-index:9;width:13rem;height:9rem;background:var(--coral);clip-path:polygon(50% 0,100% 100%,0 100%);filter:drop-shadow(.8rem .8rem 0 rgba(0,0,0,.25));transition:.3s}.tent span{position:absolute;left:50%;bottom:0;width:4rem;height:6rem;background:#7a341d;clip-path:polygon(50% 0,100% 100%,0 100%);transform:translateX(-50%)}.tent:hover{background:var(--yellow);filter:drop-shadow(0 0 2rem rgba(248,200,75,.8))}.campfire{position:absolute;left:43vw;bottom:24vh;z-index:9;width:5rem;height:3rem;background:var(--brown);border-radius:50%}.campfire i{display:block;margin:-2rem auto 0;width:2.4rem;height:4rem;background:var(--yellow);clip-path:polygon(50% 0,85% 55%,50% 100%,18% 55%);animation:flame .7s ease-in-out infinite alternate}.night-pines span{position:absolute;bottom:25vh;z-index:8;width:0;height:0;border-left:3rem solid transparent;border-right:3rem solid transparent;border-bottom:10rem solid #0D2822}.night-pines span:nth-child(1){right:9vw}.night-pines span:nth-child(2){right:16vw;transform:scale(.8)}.night-pines span:nth-child(3){right:4vw;transform:scale(1.2)}

.trail-nav{position:fixed;left:50%;bottom:1.6rem;z-index:20;transform:translateX(-50%);display:flex;gap:.4rem;padding:.55rem;background:rgba(255,241,199,.9);border:.25rem solid var(--brown);border-radius:999px;box-shadow:.5rem .5rem 0 rgba(24,71,59,.2)}.trail-nav button{position:relative;border:0;background:transparent;padding:.7rem .85rem;border-radius:999px;font-family:"Zilla Slab",Georgia,serif;font-weight:700;color:var(--brown);cursor:pointer}.trail-nav button.active{color:var(--coral)}.nav-underline{position:absolute;bottom:.45rem;left:.75rem;width:4rem;height:.28rem;background:var(--coral);border-radius:999px;transition:transform .35s,width .35s}

@keyframes underlineDraw{0%{transform:scaleX(0) rotate(-1deg)}65%{transform:scaleX(1.05) rotate(1deg)}100%{transform:scaleX(1) rotate(-.5deg)}}
@keyframes cloudFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(1.2rem)}}
@keyframes blink{0%,100%{opacity:.35;transform:scale(.75)}50%{opacity:1;transform:scale(1.25)}}
@keyframes flame{from{transform:scaleY(.85) rotate(-4deg)}to{transform:scaleY(1.15) rotate(5deg)}}

@media (max-width:760px){.panel{padding:6vh 6vw}.big-sign{max-width:86vw}h1{font-size:22vw}h2{font-size:12vw}.trail-nav{max-width:94vw;overflow:hidden}.trail-nav button{font-size:.78rem;padding:.55rem .5rem}.cloud-note{border-radius:2rem}.xyz-peaks span{width:26vw;height:32vw;font-size:14vw}.tent{left:50vw;width:10rem;height:7rem}}