:root{
  /* Layout: a live relief map fills the page behind everything. Ink type sits in the pale sky
     and on fog banks, left-aligned. A route profile is pinned to the bottom edge. One visual
     world, single theme by choice. */
  --paper:#E6ECEB;
  --paper-rgb:230,236,235;
  --ink:#15222C;
  --ink-soft:#3F4F5A;
  --water:#1B5574;
  --route:#C2163F;
  --rule:rgba(21,34,44,.2);
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --map:"Spectral",Georgia,"Times New Roman",serif;
  --gutter:clamp(1.25rem,5.5vw,5.5rem);
  --bar:3.25rem;
  --head:4.25rem;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--paper)}
html.locked{overflow:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.5;font-stretch:100%;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
h1,h2,p,ul{margin:0}
ul{padding:0;list-style:none}

#scene{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.no-gl #scene{display:none}
.no-gl body{background:linear-gradient(#D9E4E8,#EEF1EC 45%,#9FB3A4 46%,#5F7F78)}

/* Map lettering pinned to places in the landscape */
#features{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.feat{position:absolute;left:0;top:0;white-space:nowrap;opacity:0;will-change:transform,opacity;text-align:center;
  text-shadow:0 0 7px rgba(var(--paper-rgb),.95),0 0 2px rgba(var(--paper-rgb),.9)}
.feat--water{font:italic 500 1rem/1 var(--map);letter-spacing:.14em;color:var(--water)}
.feat--peak,.feat--pass{font:560 .75rem/1.25 var(--body);font-stretch:108%;color:var(--ink);font-variant-numeric:tabular-nums}
.feat--peak span,.feat--pass span{display:block;font-weight:400}
.feat--peak::after{content:"";display:block;width:0;height:0;margin:.3rem auto 0;border:4px solid transparent;border-top:0;border-bottom:7px solid var(--ink)}
.feat--pass::after{content:"";display:block;width:1px;height:1.4rem;margin:.3rem auto 0;background:var(--ink)}

/* Header */
.top{position:fixed;inset:0 0 auto 0;height:var(--head);z-index:8;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:0 var(--gutter);pointer-events:none;
  background:rgba(var(--paper-rgb),.96)}
.top::after{content:"";position:absolute;left:0;right:0;top:100%;height:1.75rem;pointer-events:none;
  background:linear-gradient(to bottom,rgba(var(--paper-rgb),.96),rgba(var(--paper-rgb),0))}
.top > *{pointer-events:auto}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--display);font-stretch:122%;font-weight:640;font-size:1.2rem;letter-spacing:-.01em}
.brand svg{width:1.75rem;height:1.75rem;flex:none}
.top__nav{display:none;align-items:center;gap:clamp(1.1rem,2.2vw,2.1rem);font-size:.95rem;font-weight:500}
.top__nav a{text-decoration:none;padding:.4rem 0}
.top__nav a:hover{text-decoration:underline;text-underline-offset:5px}
.top__nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.top__nav .top__contact{border:1px solid var(--ink);padding:.45rem .95rem;border-radius:2px}
.top__nav .top__contact:hover{background:var(--ink);color:var(--paper);text-decoration:none}
.top__menu{font:inherit;font-size:.95rem;font-weight:560;color:var(--ink);background:none;border:1px solid var(--ink);border-radius:2px;padding:.45rem .9rem;cursor:pointer}
@media (min-width:860px){.top__nav{display:flex}.top__menu{display:none}}

/* Phone menu */
.menu{position:fixed;inset:0;z-index:7;background:var(--paper);padding:calc(var(--head) + 2rem) var(--gutter) 2rem;overflow:auto}
.menu[hidden]{display:none}
.menu ul{display:grid}
.menu a{display:block;padding:.85rem 0;border-bottom:1px solid var(--rule);text-decoration:none;font-family:var(--display);font-stretch:120%;font-weight:560;font-size:1.75rem;letter-spacing:-.015em}

/* The route: beats of copy with clear flying between them */
#route{position:relative;z-index:2}
.beat{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end}
.beat + .beat{margin-top:78vh}
.fog{padding:7.5rem var(--gutter) calc(var(--bar) + 2rem);
  background:linear-gradient(to top,rgba(var(--paper-rgb),0) 0,rgba(var(--paper-rgb),.97) calc(var(--bar) + 1rem),rgba(var(--paper-rgb),.93) calc(100% - 8rem),rgba(var(--paper-rgb),.55) calc(100% - 4.5rem),rgba(var(--paper-rgb),0) 100%)}
.copy{max-width:35rem;display:grid;gap:1.1rem;justify-items:start}
.copy h2{font-family:var(--display);font-stretch:118%;font-weight:580;font-size:clamp(1.75rem,3.1vw + .9rem,3.1rem);line-height:1.04;letter-spacing:-.022em;text-wrap:balance}
.copy p{color:var(--ink-soft);max-width:33rem}
.link{font-weight:620;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;padding:.3rem 0}
.link:hover{text-decoration-thickness:2px}
.btn{display:inline-block;background:var(--route);color:#F8FAF8;text-decoration:none;font-weight:620;padding:.9rem 1.35rem;border-radius:2px}
.btn:hover{background:#A31035}

.beat--hero{justify-content:space-between}
.hero__head{padding:calc(var(--head) + clamp(1.5rem,3.5vh,2.75rem)) var(--gutter) 0}
.hero__head h1{font-family:var(--display);font-stretch:120%;font-weight:600;font-size:clamp(2.3rem,7.4vw + .55rem,6.25rem);line-height:.97;letter-spacing:-.03em;max-width:11.5ch;text-wrap:balance;
  text-shadow:0 0 22px rgba(var(--paper-rgb),.85),0 0 4px rgba(var(--paper-rgb),.5)}
.beat--hero .fog{padding-top:6rem}
.hint{display:flex;align-items:center;gap:.7rem;font-size:.9rem;font-weight:560;color:var(--ink)}
.hint::before{content:"";width:1px;height:1.6rem;background:var(--ink)}

.practices{display:grid;width:100%;max-width:33rem;grid-template-columns:1fr;border-top:1px solid var(--rule)}
.practices li{padding:.62rem 0;border-bottom:1px solid var(--rule);font-weight:560}
@media (min-width:560px){.practices{grid-template-columns:1fr 1fr;column-gap:1.75rem}}

.foot{margin-top:2.25rem;padding-top:1rem;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:.875rem;color:var(--ink-soft);max-width:35rem}
.foot a{text-underline-offset:4px}
.foot span{margin-left:auto}

@media (min-width:900px){
  .beat--hero{justify-content:flex-end}
  .hero__head{padding:7.5rem var(--gutter) 0;
    background:linear-gradient(to top,rgba(var(--paper-rgb),.93) 0,rgba(var(--paper-rgb),.93) calc(100% - 8rem),rgba(var(--paper-rgb),.55) calc(100% - 4.5rem),rgba(var(--paper-rgb),0) 100%);
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(var(--gutter) + 36rem),transparent calc(var(--gutter) + 62rem));
    mask-image:linear-gradient(to right,#000 0,#000 calc(var(--gutter) + 36rem),transparent calc(var(--gutter) + 62rem))}
  .hero__head h1{font-size:clamp(3.5rem,5.4vw,5.25rem);text-shadow:none}
  .beat--hero .fog{padding-top:1.6rem;background:linear-gradient(to top,rgba(var(--paper-rgb),0) 0,rgba(var(--paper-rgb),.97) calc(var(--bar) + 1rem),rgba(var(--paper-rgb),.93) 100%)}
  .fog{-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(var(--gutter) + 36rem),transparent calc(var(--gutter) + 62rem));
       mask-image:linear-gradient(to right,#000 0,#000 calc(var(--gutter) + 36rem),transparent calc(var(--gutter) + 62rem))}
}

/* Route profile: where you are along the valley */
.profile{position:fixed;inset:auto 0 0 0;height:var(--bar);z-index:5;display:flex;align-items:stretch;gap:.9rem;padding:0 var(--gutter);
  background:var(--paper);border-top:1px solid var(--rule);font-size:.8125rem;font-weight:560;font-variant-numeric:tabular-nums}
.profile__read{display:flex;align-items:center;white-space:nowrap;min-width:4.6rem}
.profile__read--alt{justify-content:flex-end}
.profile__read small{font-size:inherit;font-weight:400;color:var(--ink-soft);margin-left:.3rem}
.profile__track{position:relative;flex:1;min-width:0}
.profile__track svg{position:absolute;inset:.45rem 0 0 0;width:100%;height:calc(100% - .45rem);display:block}
.profile__sky{fill:rgba(21,34,44,.13)}
.profile__floor{fill:rgba(21,34,44,.42)}
.profile__tick{position:absolute;bottom:0;width:1px;height:.4rem;background:var(--paper)}
.profile__pin{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:var(--route);will-change:transform}
.profile__pin::before{content:"";position:absolute;top:.2rem;left:50%;width:.5rem;height:.5rem;margin-left:-.25rem;border-radius:50%;background:var(--route)}
html.locked .profile{display:none}

/* Subpages: empty for now */
.page{min-height:100vh;min-height:100svh;padding:calc(var(--head) + clamp(2.5rem,9vh,6rem)) var(--gutter) 4rem}
.page__inner{max-width:44rem;display:grid;gap:1.25rem;justify-items:start}
.page h1{font-family:var(--display);font-stretch:120%;font-weight:600;font-size:clamp(2.5rem,7vw + .5rem,5.5rem);line-height:.98;letter-spacing:-.03em;width:100%;padding-bottom:1.25rem;border-bottom:1px solid var(--ink)}
.page p{color:var(--ink-soft)}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}