/* ==========================================================================
   FRAMEWORKS: the hub and the three field guide pages

   The covers already say what these pages should look like: a dashed amber
   ascent over contour lines, waypoints ringed, the summit filled. So the
   hero is that drawing in three dimensions, and everything else is built
   from the site's own tokens. Nothing here is loaded by any other page.

   Motion rule, inherited from altitude.css: nothing in this file hides
   content. Every GSAP effect starts from a visible state, so a page with no
   JavaScript, or with a script that failed, still reads top to bottom.
   ========================================================================== */

/* ScrollTrigger cannot measure a page that scrolls smoothly by CSS; fw-motion.js
   gives in-page links the same glide instead */
html.has-gsap{scroll-behavior:auto}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- hero --------------------------------------------------------- */
.fwh{position:relative;overflow:hidden;isolation:isolate;
  padding-top:clamp(108px,13vh,160px);padding-bottom:clamp(36px,5vw,70px)}
.fwh__grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  gap:clamp(20px,3.6vw,60px);align-items:center}
.fwh__mark{
  font-family:var(--display);font-variation-settings:"wdth" 118,"wght" 800;
  text-transform:uppercase;font-size:clamp(2.55rem,6.3vw,5.7rem);line-height:.93;
  letter-spacing:-.012em;color:var(--bone);
}
.fwh__mark span{display:block}
/* a real trade mark sign, so the heading reads correctly to a search engine
   and a screen reader; the glyph is already raised, so it only needs sizing */
.fwh__mark sup,.get__name sup,.fwcard h3 sup{font-size:.4em;line-height:0;vertical-align:baseline;position:relative;
  top:-.78em;margin-left:.06em;font-variation-settings:"wdth" 100,"wght" 600}
.fwh__sub{
  margin-top:clamp(14px,1.6vw,22px);max-width:24ch;
  font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 800;
  text-transform:uppercase;font-size:clamp(1.02rem,1.75vw,1.5rem);line-height:1.12;
  letter-spacing:.006em;color:var(--summit);
}
.fwh .lead{margin-top:clamp(18px,2vw,26px);max-width:54ch}
.fwh__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,2.8vw,34px)}
.fwh__note{display:flex;align-items:center;gap:12px;color:var(--ash-2);margin-top:24px}
.fwh__note::before{content:"";width:22px;height:1px;background:var(--granite-2);flex:0 0 22px}

/* the entrance is CSS, not GSAP: a keyframe always ends on the visible state */
.fwh [data-in]{animation:enter var(--d-enter) var(--spring-gentle) both;animation-delay:calc(var(--i,0) * 70ms)}
@media (prefers-reduced-motion:reduce){.fwh [data-in]{animation:none !important}}

/* ---------- the ascent, in three dimensions ------------------------------ */
.ascent{position:relative;width:100%;max-width:660px;aspect-ratio:1/1;margin-inline:auto}
.ascent__gl{position:absolute;inset:-6% -10%;opacity:0;transition:opacity .9s var(--ease)}
.ascent__gl canvas{display:block;width:100%;height:100%}
.ascent.has-webgl .ascent__gl{opacity:1}
/* the flat drawing is the fallback, and what shows until WebGL is ready */
.ascent__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  transition:opacity .6s var(--ease),visibility 0s linear .6s}
.ascent.has-webgl .ascent__svg{opacity:0;visibility:hidden}
.ascent__labels{position:absolute;inset:-6% -10%;margin:0;padding:0;list-style:none;pointer-events:none}
.ascent__lab{
  position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:7px;
  padding:4px 6px;white-space:nowrap;pointer-events:auto;cursor:pointer;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ash);opacity:0;
  transition:color var(--d-ui) var(--spring-stiff),opacity .5s var(--ease);
  will-change:transform;
}
.ascent__lab.is-set{opacity:1}
.ascent__lab b{font-weight:700;color:var(--summit)}
.ascent__lab:hover,.ascent__lab:focus-visible,.ascent__lab.is-on{color:var(--bone)}
.ascent__lab--summit{font-size:.66rem;color:var(--bone)}
.ascent__lab--static{cursor:default}
.ascent__ctl{
  position:absolute;right:0;bottom:-4px;z-index:2;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ash-2);padding:8px 0;transition:color var(--d-micro) linear;
}
.ascent__ctl:hover{color:var(--summit)}
.ascent:not(.has-webgl) .ascent__ctl{display:none}

/* ---------- the book ------------------------------------------------------ */
.book3d{--bd:30px;position:relative;width:min(100%,330px);margin-inline:auto;perspective:1500px}
.book3d__body{position:relative;aspect-ratio:var(--ar,432/648);transform-style:preserve-3d;
  transform:rotateY(-27deg) rotateX(5deg);transition:transform .7s var(--spring-gentle)}
.book3d:hover .book3d__body{transform:rotateY(-14deg) rotateX(3deg)}
.book3d.is-gsap .book3d__body{transition:none}
.book3d__front,.book3d__back,.book3d__spine,.book3d__pages{position:absolute;top:0;bottom:0;backface-visibility:hidden}
.book3d__front{left:0;width:100%;height:100%;object-fit:cover;
  transform:translateZ(calc(var(--bd) / 2));border-radius:1px 3px 3px 1px;
  box-shadow:inset 3px 0 0 rgba(255,255,255,.035),inset 9px 0 12px -8px rgba(0,0,0,.7)}
.book3d__back{left:0;right:0;background:#0C0A08;transform:translateZ(calc(var(--bd) / -2)) rotateY(180deg)}
.book3d__spine{left:0;width:var(--bd);
  background:linear-gradient(90deg,#090807 0%,#1D1A15 48%,#0D0B09 100%);
  transform:translateX(calc(var(--bd) / -2)) rotateY(-90deg)}
.book3d__spine::after{content:"";position:absolute;left:50%;top:12%;bottom:62%;width:1px;background:var(--summit);opacity:.75}
.book3d__pages{right:0;top:4px;bottom:4px;width:calc(var(--bd) - 5px);
  background:repeating-linear-gradient(90deg,#CFC9BB 0 1px,#A9A293 1px 2px);
  transform:translateX(calc((var(--bd) - 5px) / 2 - 3px)) rotateY(90deg)}
.book3d::after{content:"";position:absolute;left:4%;right:-4%;bottom:-9%;height:11%;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.72),transparent 72%);filter:blur(7px)}

/* ---------- the offer ----------------------------------------------------- */
.get{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(34px,6vw,96px);align-items:center}
.get__name{font-size:var(--fs-h2);max-width:14ch}
.get__sub{margin-top:12px;color:var(--summit)}
.get .lead{margin-top:18px}
.get__list{display:flex;flex-direction:column;gap:13px;margin-top:26px;max-width:60ch}
.get__list li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;
  color:var(--ash);line-height:1.58;font-size:1.03rem}
.get__list li::before{content:"";width:7px;height:7px;margin-top:.62em;background:var(--summit)}
.get__list b{color:var(--bone);font-weight:600}
.get__acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:30px}
.get__fine{margin-top:18px;color:var(--ash-2);font-size:.92rem;line-height:1.6;max-width:58ch}
.get__spec{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:22px}
.get__spec li{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ash-2);display:flex;align-items:center;gap:8px}
.get__spec li::before{content:"";width:4px;height:4px;background:var(--summit)}
.tlink{font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--bone);border-bottom:1px solid var(--granite-2);padding-bottom:3px;
  transition:color var(--d-micro) linear,border-color var(--d-micro) linear}
.tlink:hover{color:var(--summit);border-color:var(--summit)}
[data-zone="light"] .tlink{color:var(--ink);border-color:var(--paper-3)}
[data-zone="light"] .tlink:hover{color:#8A5A00;border-color:#8A5A00}

/* ---------- explorer: tabs with one panel open ---------------------------- */
.xp__tabs{display:flex;gap:1px;background:var(--granite);border:1px solid var(--granite);overflow-x:auto;
  scrollbar-width:none}
.xp__tabs::-webkit-scrollbar{display:none}
.xp:not(.is-js) .xp__tabs{display:none}
.xp__tab{
  flex:1 0 auto;min-width:112px;padding:15px 14px 14px;text-align:left;background:var(--rock);
  border-top:2px solid transparent;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash);line-height:1.5;
  transition:background var(--d-ui) var(--spring-gentle),color var(--d-ui) var(--spring-gentle),
             border-color var(--d-ui) var(--spring-gentle);
}
.xp__tab b{display:block;color:var(--ash-2);font-weight:700;margin-bottom:2px;transition:color var(--d-ui) linear}
.xp__tab:hover{color:var(--bone)}
.xp__tab[aria-selected="true"]{background:var(--crag);color:var(--bone);border-top-color:var(--summit)}
.xp__tab[aria-selected="true"] b{color:var(--summit)}
.xp__panel{border:1px solid var(--granite);background:var(--slate);padding:clamp(22px,3.2vw,44px)}
.xp.is-js .xp__panel{border-top:0}
.xp:not(.is-js) .xp__panel+.xp__panel{margin-top:14px}
.xp__panel[hidden]{display:none}
.xp__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(22px,4vw,64px);align-items:start}
.xp__k{color:var(--summit);margin-bottom:12px;display:block}
.xp__panel h3{font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 700;
  font-size:clamp(1.35rem,2.3vw,2rem);line-height:1.12;color:var(--bone);margin-bottom:14px}
.xp__panel p{color:var(--ash);line-height:1.64;max-width:60ch}
.xp__panel p+p{margin-top:12px}
.xp__panel p strong{color:var(--bone);font-weight:600}
.xp__q{font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 600;
  font-size:clamp(1.12rem,1.6vw,1.4rem);line-height:1.34;color:var(--bone);
  border-left:2px solid var(--summit);padding-left:16px;margin-bottom:18px}
.meter{border:1px solid var(--granite);background:var(--rock);padding:clamp(18px,2.2vw,26px)}
.meter__eq{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;line-height:1.7;color:var(--bone)}
.meter__eq i{font-style:normal;color:var(--summit)}
.meter dl{margin-top:14px;display:flex;flex-direction:column}
.meter .row{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
  padding:9px 0;border-top:1px solid var(--granite)}
.meter dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ash-2);white-space:nowrap}
.meter dd{color:var(--bone);text-align:right;font-size:.98rem;line-height:1.45}

/* ---------- hub cards ----------------------------------------------------- */
.fwcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--granite);border:1px solid var(--granite)}
.fwcard{display:flex;flex-direction:column;background:var(--rock);
  transition:background var(--d-ui) var(--spring-gentle)}
.fwcard:hover,.fwcard:focus-within{background:var(--slate)}
.fwcard__pic{display:block;overflow:hidden;border-bottom:1px solid var(--granite);aspect-ratio:1/1;background:#0F0D0B}
.fwcard__pic img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--spring-gentle)}
.fwcard:hover .fwcard__pic img{transform:scale(1.035)}
.fwcard__in{display:flex;flex-direction:column;flex:1;padding:clamp(22px,2.6vw,34px)}
.fwcard__for{color:var(--summit);margin-bottom:12px}
.fwcard h3{font-family:var(--display);font-variation-settings:"wdth" 114,"wght" 800;text-transform:uppercase;
  font-size:clamp(1.3rem,2vw,1.72rem);line-height:1.02;color:var(--bone)}
.fwcard h3 small{display:block;margin-top:7px;font-size:.5em;letter-spacing:.03em;color:var(--ash);
  font-variation-settings:"wdth" 108,"wght" 700}
.fwcard__p{margin-top:14px;color:var(--ash);font-size:1.01rem;line-height:1.6}
.fwcard dl{margin-top:20px;border-top:1px solid var(--granite)}
.fwcard .row{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--granite)}
.fwcard dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ash-2);white-space:nowrap}
.fwcard dd{color:var(--bone);text-align:right;font-size:.94rem;line-height:1.4}
.fwcard__acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:auto;padding-top:24px}
.fwcard__acts .btn{padding:13px 20px}

/* ---------- the shared arithmetic (hub) ----------------------------------- */
.common{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--paper-3);border:1px solid var(--paper-3)}
.common li{background:var(--paper);padding:clamp(22px,2.8vw,36px)}
.common .data{color:#8A5A00;display:block;margin-bottom:12px}
.common h3{font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 700;
  font-size:clamp(1.14rem,1.6vw,1.4rem);line-height:1.2;color:var(--ink);margin-bottom:10px}
.common p{color:var(--ink-2);font-size:1.02rem;line-height:1.62}

/* ---------- contents, as a numbered run ----------------------------------- */
.parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,5vw,72px);border-top:1px solid var(--paper-3)}
.parts li{display:grid;grid-template-columns:3.2ch 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--paper-3);align-items:baseline}
.parts i{font-style:normal;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:#8A5A00}
.parts b{display:block;color:var(--ink);font-weight:600;line-height:1.35}
.parts span{display:block;color:var(--ink-2);font-size:.97rem;line-height:1.55;margin-top:3px}

/* ---------- responsive ---------------------------------------------------- */
@media (max-width:1080px){
  .fwcards{grid-template-columns:1fr}
  .fwcard{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .fwcard__pic{border-bottom:0;border-right:1px solid var(--granite);aspect-ratio:auto}
}
@media (max-width:960px){
  .fwh__grid{grid-template-columns:1fr}
  .ascent{max-width:520px}
  .get{grid-template-columns:1fr}
  .get .book3d{width:min(70%,280px)}
  .xp__grid{grid-template-columns:1fr}
  .common{grid-template-columns:1fr}
}
@media (max-width:720px){
  .fwcard{display:flex}
  .fwcard__pic{border-right:0;border-bottom:1px solid var(--granite);aspect-ratio:1/1}
  .parts{grid-template-columns:1fr}
  .ascent__gl,.ascent__labels{inset:-2% -4%}
  .ascent__lab{font-size:.54rem;letter-spacing:.12em}
  .xp__tab{min-width:96px;padding:13px 12px 12px}
}
@media (prefers-reduced-motion:reduce){
  .book3d__body,.fwcard__pic img{transition:none}
}