/* ============================================================
   Summit — v2 · one mountain, one climb
   The actual mark is the page's spine: massive on load, docked
   top-right on scroll, gold route climbing its real left ridge.
   Gold always means the route, or value.
   ============================================================ */

:root{
  --sat:env(safe-area-inset-top, 0px);   /* read from JS for dock position */
  --paper:#eceff1;
  --ink:#2f3134;
  --ink-soft:#63666b;
  --line:#c9ced3;
  --hairline:#d7dbdf;
  --gold:#c1a36e;
  --gold-deep:#a07f47;

  --serif:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --col:660px;
  --pad:clamp(1.4rem,6vw,4rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(16px,1vw + 14px,18px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
em{font-style:italic;color:var(--gold-deep)}
strong{font-weight:650}
.gold{color:var(--gold-deep)}
.fine{font-size:.82rem;color:var(--ink-soft)}
.hint{font-weight:400;color:var(--ink-soft);font-size:.82rem}

/* ============================================================
   THE MOUNTAIN (fixed; JS drives transform)
   ============================================================ */
.mtn{
  position:fixed;
  top:0;left:0;
  width:1000px;                /* base size; JS scales via transform */
  aspect-ratio:1656.25/1334.2;
  transform-origin:0 0;
  z-index:30;                  /* floats above content once docked */
  pointer-events:none;
  will-change:transform;
}
.mtn::before{                  /* paper backdrop: on small screens the docked
                                  corner mark must fully mask text beneath it */
  content:"";position:absolute;inset:-16% -12%;
  background:radial-gradient(ellipse 62% 62% at 50% 52%,var(--paper) 55%,rgba(236,239,241,0) 78%);
}
@media(min-width:1200px){
  .mtn::before{                /* side dock overlaps nothing — soften the halo */
    background:radial-gradient(ellipse 58% 58% at 50% 52%,var(--paper) 30%,rgba(236,239,241,0) 70%);
  }
}
.mtn svg{position:relative;width:100%;height:100%;display:block;overflow:visible}

.mtn__ghost{fill:var(--ink);opacity:0}                 /* JS fades in after draw */
.mtn__facets .facet{
  fill:none;stroke:var(--ink);stroke-width:1.4px;
  stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.mtn__route{
  fill:none;stroke:var(--gold);stroke-width:5;
  stroke-linecap:round;stroke-linejoin:round;
  /* NO vector-effect here: non-scaling-stroke makes Chromium apply the
     dash pattern in screen space while the offset is in user space, so
     the drawn line runs ahead of the true progress when scaled down.
     JS counter-scales stroke-width each frame instead. */
}
.mtn__climber{fill:var(--gold);opacity:0}              /* appears once climbing starts */

.camp circle:first-child{
  fill:var(--paper);stroke:var(--gold);stroke-width:2px;
  vector-effect:non-scaling-stroke;
  transition:fill .4s;
}
.camp.passed circle:first-child{fill:var(--gold)}
.camp__hit{fill:transparent;stroke:none;cursor:pointer}
.camp{pointer-events:auto}
.camp text{
  font-family:var(--sans);font-size:34px;letter-spacing:.18em;
  text-transform:uppercase;fill:var(--ink-soft);text-anchor:end;
  opacity:0;transition:opacity .5s,fill .4s;
  /* soft feathered paper cloud behind the letters (SVG filter) so
     labels never clash with the mark's linework — no hard edges */
  filter:url(#labelHalo);
}
.camp.passed text{fill:var(--gold-deep)}               /* the climb so far, in gold */
.mtn--hero .camp text{opacity:.85}                     /* labels at hero scale */
.camp--r text{text-anchor:start}                       /* Camp 3 + Summit sit right of their dots */
@media(min-width:1200px){
  .camp text{opacity:.85}                              /* side dock is big enough to keep them */
  /* docked, the mark's right side is off-canvas — flip the right-hand
     labels to the left of their dots so they stay visible */
  .mtn:not(.mtn--hero) .camp--r text{text-anchor:end;transform:translateX(-88px)}
}

/* ============================================================
   LAYOUT — one narrow editorial column
   ============================================================ */
main{position:relative;z-index:20}
.beat{
  max-width:var(--col);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.beat{padding-block:clamp(5rem,14vh,9rem);position:relative;scroll-margin-top:245px}

/* wide screens: the docked mark sits half off-canvas on the right,
   so the content column moves left, out of its way */
@media(min-width:1200px){
  .beat,.foot{margin-left:clamp(4rem,9vw,11rem);margin-right:auto}
  .beat{scroll-margin-top:0}
}

/* below 1200px the mark docks centre-top: a fixed paper band masks
   content scrolling beneath it (band sits between content and mark) */
@media(max-width:1199px){
  body::before{
    content:"";position:fixed;left:0;right:0;
    /* extend well above the viewport top so nothing peeks out around
       notches / dynamic islands or during iOS URL-bar transitions */
    top:calc(-60px - env(safe-area-inset-top, 0px));
    height:calc(310px + 2 * env(safe-area-inset-top, 0px));
    z-index:25;pointer-events:none;
    background:linear-gradient(var(--paper) 82%,rgba(236,239,241,0));
    opacity:0;transition:opacity .35s;
  }
  body.docked::before{opacity:1}
}

/* current-stage label under the centre-docked mark (small screens only) */
.stage{
  position:fixed;left:0;right:0;z-index:31;
  text-align:center;pointer-events:none;
  font-size:.74rem;font-weight:650;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold-deep);
  opacity:0;transition:opacity .35s;
}
@media(min-width:1200px){.stage{display:none}}
.beat::before{                                          /* hairline between beats */
  content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);
  height:1px;background:var(--hairline);
}

.camp-label{
  font-size:.72rem;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold-deep);
  margin:0 0 1.6rem;
}
h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.9rem,5.2vw,2.9rem);
  line-height:1.12;letter-spacing:-.012em;
  margin:0 0 1.6rem;
}
.prose{color:var(--ink-soft);max-width:56ch;margin:0 0 2.2rem}
.aside{
  font-family:var(--serif);font-style:italic;
  color:var(--ink-soft);margin:2.4rem 0 0;max-width:46ch;
}

/* ============================================================
   HERO — 138svh: the extra 38svh is the dock runway, so the mark
   finishes its move before the first beat's content arrives
   ============================================================ */
.hero{
  min-height:138svh;
  position:relative;z-index:5;                          /* copy under the mountain layer */
}
.hero__copy{
  position:absolute;left:0;right:0;bottom:38svh;        /* sits in the FIRST viewport */
  width:100%;max-width:var(--col);margin-inline:auto;
  padding-inline:var(--pad);
  text-align:center;
  padding-bottom:clamp(1.6rem,5vh,3.5rem);
}
.wordmark{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1rem,5.6vw,2.2rem);        /* scales down so tracking never overflows */
  letter-spacing:.78em;text-indent:.78em;    /* indent balances trailing tracking */
  color:var(--ink);white-space:nowrap;
  margin:1.6rem 0 2.6rem;
}
.eyebrow{
  font-size:.72rem;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold-deep);margin:0 0 1rem;
}
h1{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.7rem,4.6vw,2.7rem);
  line-height:1.15;letter-spacing:-.01em;margin:0 0 1.8rem;
}
.hero__cue{
  display:inline-flex;flex-direction:column;align-items:center;gap:.3rem;
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;
}
.hero__cue span{color:var(--gold-deep);font-size:1rem;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.hero__cue:hover{color:var(--gold-deep)}

/* ============================================================
   TRUTHS (base camp ruled list)
   ============================================================ */
.truths{list-style:none;margin:2.4rem 0 0;padding:0}
.truths li{
  padding:1.15rem 0 1.15rem 1.6rem;position:relative;
  border-top:1px solid var(--hairline);
  color:var(--ink);max-width:56ch;
}
.truths li:last-child{border-bottom:1px solid var(--hairline)}
.truths li::before{
  content:"";position:absolute;left:0;top:1.78em;
  width:.55rem;height:.55rem;transform:translateY(-50%) rotate(45deg);
  border:1.5px solid var(--gold);
}

/* ============================================================
   CHIPS
   ============================================================ */
.chips{margin-top:2.2rem}
.chips__intro{color:var(--ink-soft);margin:0 0 1.1rem;font-family:var(--serif);font-style:italic}
.chips__row{display:flex;gap:.9rem;align-items:baseline;margin-bottom:1rem}
.chips__key{
  font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);min-width:3.2rem;
}
.chips__key--more{color:var(--gold-deep)}
.chips__set{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  font-family:var(--sans);font-size:.9rem;color:var(--ink);
  background:transparent;border:1px solid var(--line);border-radius:100px;
  padding:.5rem 1rem;cursor:pointer;min-height:42px;
  transition:border-color .18s,background .18s,color .18s;
}
.chip:hover{border-color:var(--gold)}
.chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#221d13;font-weight:600}
.chips__set--pain .chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ============================================================
   TOOLS — quiet surfaces, gold outputs
   ============================================================ */
.tool{
  display:grid;grid-template-columns:1fr;gap:1.8rem;
  border-top:1px solid var(--hairline);
  padding:2.2rem 0 2.6rem;
}
.tool:last-child{padding-bottom:0}
@media(min-width:760px){
  .tool{grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
}

.field{margin-bottom:1.4rem}
.field:last-child{margin-bottom:0}
.field label,.field__legend{display:block;font-weight:600;font-size:.95rem;margin:0 0 .6rem}
.field__row{display:flex;align-items:center;gap:.9rem}

input[type=range]{
  -webkit-appearance:none;appearance:none;flex:1;min-width:0;height:4px;border-radius:100px;
  background:linear-gradient(to right,var(--gold) 0 var(--fill,50%),var(--line) var(--fill,50%));
  cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--paper);border:2px solid var(--gold);box-shadow:0 1px 3px rgba(0,0,0,.18);cursor:grab;
}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--paper);border:2px solid var(--gold);cursor:grab}
input[type=range]::-moz-range-track{height:4px;border-radius:100px;background:var(--line)}
input[type=range]:focus-visible{outline:2px solid var(--gold-deep);outline-offset:6px}

.num,.num--prefix,.num--suffix{display:inline-flex;align-items:center;gap:.15rem}
.num input,input.num{
  width:4.8rem;font-family:var(--sans);font-size:.95rem;font-weight:600;color:var(--ink);
  background:transparent;border:none;border-bottom:1.5px solid var(--line);border-radius:0;
  padding:.45rem .2rem;text-align:right;min-height:42px;
  transition:border-color .18s;
}
.num input:focus-visible,input.num:focus-visible{outline:none;border-bottom-color:var(--gold-deep)}
.num--prefix span,.num--suffix span{color:var(--ink-soft);font-weight:600;font-size:.9rem}
.num--prefix input{width:5.2rem}
.num--suffix input{width:3.2rem}
input[type=number]::-webkit-inner-spin-button{opacity:.35}

.readout{
  font-family:var(--serif);font-weight:500;font-size:1.25rem;
  margin:.9rem 0 .35rem;line-height:1.2;
}
.readout__big{
  font-size:clamp(2.2rem,6vw,3rem);font-weight:600;color:var(--gold-deep);
  font-variant-numeric:tabular-nums;
}
.readout__cap{color:var(--ink-soft);font-size:.92rem;margin:.2rem 0 0;max-width:38ch}
.peaks{width:100%;max-width:300px;height:auto}

/* the answer comes first; sliders are tuning, not a form */
.tool__tune{
  font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 1.3rem;padding-top:1.2rem;
  border-top:1px dashed var(--line);
}
@media(min-width:760px){.tool__tune{border-top:none;padding-top:0}}

#rv-peak-current{fill:none;stroke:var(--line);stroke-width:1.5}
#rv-peak-potential{fill:rgba(193,163,110,.14);stroke:var(--gold);stroke-width:2}
#rv-peak-link{fill:none;stroke:var(--gold);stroke-width:1.5;stroke-dasharray:3 4}

.reclaim{margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--hairline)}
.reclaim label{display:block;font-family:var(--serif);font-size:1.05rem;margin-bottom:.7rem}
.reclaim input[type=range]{width:100%}

/* ============================================================
   SUMMIT
   ============================================================ */
.summary{margin:2.6rem 0 3rem}
.summary p{
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  font-family:var(--serif);font-size:clamp(1.05rem,2.6vw,1.35rem);
  margin:.9rem 0;
}
.summary__dots{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-.25em)}
.summary strong{font-variant-numeric:tabular-nums;white-space:nowrap}
.summary__per{font-family:var(--sans);font-size:.78rem;color:var(--ink-soft);white-space:nowrap}
.summary p.summary__total{
  margin-top:1.6rem;padding-top:1.5rem;
  border-top:1px solid var(--gold);
  font-size:clamp(1.25rem,3.4vw,1.8rem);
}
.summary__total strong{font-size:1.15em}
.summary__note{font-family:var(--sans);font-size:.82rem;color:var(--ink-soft);display:block;margin-top:1.4rem}
.summary__note .summary__dots{display:none}

.route-plan{
  list-style:none;counter-reset:leg;margin:0 0 3rem;padding:0;
}
.route-plan li{
  counter-increment:leg;
  padding:.85rem 0 .85rem 2.4rem;position:relative;
  border-top:1px solid var(--hairline);color:var(--ink-soft);
}
.route-plan li::before{
  content:counter(leg);
  position:absolute;left:.2rem;top:50%;transform:translateY(-50%);
  font-family:var(--serif);font-style:italic;color:var(--gold-deep);
}
.promise{
  font-family:var(--serif);font-weight:500;color:var(--ink);
  font-size:clamp(1.35rem,3.4vw,1.9rem);line-height:1.35;
  margin:0 0 3rem;
}

/* ============================================================
   SHARE / CONFIRM
   ============================================================ */
.share__note{
  font-family:var(--serif);font-style:italic;
  color:var(--ink-soft);max-width:48ch;margin:0 0 2rem;
}
.share__label{display:block;font-weight:600;font-size:.95rem;margin:0 0 .6rem}
textarea{
  width:100%;font-family:var(--sans);font-size:.95rem;color:var(--ink);
  background:transparent;border:1px solid var(--line);border-radius:10px;
  padding:.85rem 1rem;resize:vertical;margin-bottom:1.3rem;
}
textarea:focus-visible{outline:none;border-color:var(--gold-deep)}
.cta{
  display:inline-block;background:var(--gold);color:#221d13;
  font-weight:650;font-size:1rem;text-decoration:none;text-align:center;
  border:none;border-radius:100px;padding:.95rem 2rem;cursor:pointer;
  transition:background .2s,color .2s,transform .2s var(--ease);
}
.cta:hover{background:var(--gold-deep);color:#fff;transform:translateY(-2px)}
.share .fine{margin-top:1rem}
.confirm{padding-top:.5rem}
.confirm__head{font-family:var(--serif);font-size:1.3rem;margin:0 0 1.4rem}
.confirm__email{display:block;margin-top:.9rem;color:var(--ink-soft);font-size:.88rem}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  max-width:var(--col);margin-inline:auto;
  padding:3rem var(--pad) 4rem;
  border-top:1px solid var(--hairline);
  color:var(--ink-soft);font-size:.88rem;
}
.foot .fine{max-width:52ch}
.foot__thanks{
  font-family:var(--serif);font-style:italic;
  font-size:1.05rem;color:var(--ink);
  margin:0 0 1.2rem;
}

/* ============================================================
   VERY SMALL SCREENS
   ============================================================ */
@media(max-width:360px){
  .readout__big{font-size:1.9rem}
  .chips__row{flex-direction:column;gap:.55rem}
  .num input,input.num{width:4.2rem}
  .num--prefix input{width:4.6rem}
}

/* ============================================================
   MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero__cue span{animation:none}
  *{transition-duration:.001ms !important;animation-duration:.001ms !important}
}