/* ═══════════════════════════════════════════════════════════
   NORDRUTA — a long-distance trail
   Metaphor: survey sheet / topographic map × field notebook
   Chart palette validated with the dataviz validator:
     #C2452D · #1A6FA8 · #6B7A15  → all six checks PASS
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:#EDE7DA;
  --paper-2:#E3DBC9;
  --paper-3:#F5F1E8;
  --ink:#23201C;
  --ink-2:#4A443C;
  --ink-soft:#5B564C;        /* AA on paper AND paper-2 (5.9 / 5.3) */
  --ink-mute:#726B5E;        /* placeholders, on paper-3 fields (4.7) */
  --contour:#C6B79B;
  --rule:#BFB29A;

  /* data colours — validated, do not eyeball-edit */
  --route:#C2452D;
  --water:#1A6FA8;
  --moss:#6B7A15;
  /* text-only variants: the marks above are validated, these are for small type */
  --route-tx:#9E3722;
  --water-tx:#14567F;
  --moss-tx:#556211;

  --display:"Fraunces",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --e:cubic-bezier(.22,1,.36,1);
  --e-out:cubic-bezier(.25,.1,.25,1);

  --maxw:1240px;
  --pad:clamp(18px,3.6vw,56px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
main,section[id],#top{scroll-margin-top:70px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--mono);font-size:14px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--route);color:var(--paper-3)}

a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--route);outline-offset:2px;
}
.skip{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--ink);color:var(--paper);
  padding:10px 16px}
.skip:focus{left:8px;top:8px}
.visually-hidden{position:absolute!important;display:block!important;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;left:0;top:0}

/* ══ TYPE ══ */
.h1{
  font-family:var(--display);font-weight:600;font-optical-sizing:auto;
  font-size:clamp(2.4rem,6vw,5.1rem);line-height:1.02;letter-spacing:-.015em;
  margin:.16em 0 .5em;
}
.h1 em{font-style:italic;font-weight:400;color:var(--route)}
.h2{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.05;letter-spacing:-.01em;
  margin:.1em 0 .3em;
}
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft);margin:0;
}
.lede{max-width:58ch;color:var(--ink-2);line-height:1.75;margin:.5rem 0 0}
.note{max-width:var(--maxw);margin:22px auto 0;font-size:12.5px;color:var(--ink-2)}
.fine{font-size:11px;color:var(--ink-soft);max-width:76ch;margin:12px auto 0;line-height:1.7}
.head{max-width:var(--maxw);margin:0 auto clamp(26px,4vw,48px)}

/* ══ REVEAL — the survey line is drawn in ══ */
[data-rise]{
  opacity:.001;transform:translate3d(0,16px,0);
  transition:opacity .55s linear var(--d,0s),transform .8s var(--e) var(--d,0s);
}
[data-rise].in{opacity:1;transform:none}

/* ══ BUTTONS ══ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--ink);color:var(--paper-3);padding:14px 24px;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;border:2px solid var(--ink);
  transition:background .3s var(--e-out),color .3s var(--e-out),transform .18s var(--e-out);
}
.btn:hover{background:var(--route);border-color:var(--route);transform:translate3d(0,-2px,0);
  transition-duration:.16s}
.btn.btn-sm{padding:9px 15px;font-size:10px}
.btn.wide{width:100%;margin-top:6px}
.link{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);border-bottom:2px solid var(--rule);padding-bottom:3px;
  transition:color .3s var(--e-out),border-color .3s var(--e-out);
}
.link:hover{color:var(--route-tx);border-color:var(--route-tx);transition-duration:.16s}
.link-btn{border-bottom:2px solid var(--rule);font-family:var(--mono);font-size:12.5px}
.link-btn:hover{color:var(--route-tx);border-color:var(--route-tx)}

/* ══ NAV ══ */
.nav{
  position:sticky;top:0;z-index:800;display:flex;align-items:center;
  justify-content:space-between;gap:18px;padding:0 var(--pad);height:56px;
  background:rgba(237,231,218,.93);border-bottom:1px solid var(--rule);
  backdrop-filter:blur(6px);
}
.nav-mark{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;
  font-weight:500;letter-spacing:.2em}
.nav-mark svg{color:var(--route)}
.nav-links{display:flex;gap:22px}
.nav-links a{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);padding:4px 0;border-bottom:2px solid transparent;
  transition:color .3s var(--e-out),border-color .3s var(--e-out)}
.nav-links a:hover{color:var(--ink);border-color:var(--route);transition-duration:.16s}

/* ══ HERO ══ */
.hero{position:relative;padding:clamp(46px,8vw,104px) var(--pad) clamp(40px,6vw,84px);
  overflow:hidden}
.contours{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none}
.hero-in{position:relative;max-width:var(--maxw);margin:0 auto}
.hero-stats{display:flex;gap:clamp(20px,4vw,54px);flex-wrap:wrap;margin:30px 0 26px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:16px 0}
.stat{display:flex;flex-direction:column;gap:2px}
.stat b{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3vw,2.3rem);
  line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft)}
.stat.daylight b{color:var(--route)}
.hero-cta{display:flex;gap:22px;align-items:center;flex-wrap:wrap}

/* ══ CHART CARD (shared by all charts) ══ */
.route,.season{padding:clamp(46px,7vw,96px) var(--pad)}
.season{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.chart-card{
  max-width:var(--maxw);margin:0 auto;background:var(--paper-3);
  border:1px solid var(--rule);padding:clamp(16px,2.4vw,26px);
}
.chart-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  flex-wrap:wrap;margin-bottom:16px}
.chart-title{font-family:var(--display);font-weight:600;font-size:1.25rem;margin:0}
.chart-sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-soft);
  margin:3px 0 0}

.readout{display:flex;gap:16px;flex-wrap:wrap}
.ro{display:flex;flex-direction:column;min-width:64px}
.ro span{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--ink-soft)}
.ro b{font-family:var(--mono);font-size:15px;font-weight:500;font-variant-numeric:tabular-nums}
.ro.wide{min-width:130px}
.ro.wide b{font-size:12px}

/* elevation profile */
.profile-wrap{position:relative;touch-action:pan-y}
.profile{width:100%;height:clamp(180px,26vw,300px);overflow:visible;cursor:crosshair}
.p-area{fill:var(--route);fill-opacity:.14}
.p-line{fill:none;stroke:var(--route);stroke-width:2;vector-effect:non-scaling-stroke;
  stroke-linejoin:round}
.p-grid{stroke:var(--rule);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.7}
.p-cur{position:absolute;left:0;right:0;top:0;height:clamp(180px,26vw,300px);pointer-events:none}
.p-cur[hidden]{display:none}
.p-cur-line{position:absolute;top:0;bottom:0;width:1px;
  background:repeating-linear-gradient(var(--ink) 0 3px,transparent 3px 6px);
  transform:translateX(var(--x,0))}
.p-cur-dot{position:absolute;width:12px;height:12px;border-radius:50%;
  background:var(--route);border:2px solid var(--paper-3);
  transform:translate(calc(var(--x,0) - 6px),calc(var(--y,0) - 6px))}
.p-axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;
  color:var(--ink-soft);margin-top:6px;letter-spacing:.06em}

/* ══ STAGES ══ */
.stages{padding:clamp(46px,7vw,96px) var(--pad)}
.stage-list{max-width:var(--maxw);margin:0 auto;border-top:1px solid var(--rule)}
.stage{
  display:grid;grid-template-columns:44px 1.6fr repeat(3,minmax(64px,.7fr)) 96px;
  gap:14px;align-items:center;padding:15px 0;border-bottom:1px solid var(--rule);
  transition:background .18s var(--e-out),padding-left .18s var(--e-out);
}
.stage:hover{background:var(--paper-3);padding-left:10px;transition-duration:.16s}
.stage-n{font-family:var(--mono);font-size:10px;color:var(--ink-soft)}
.stage-name{font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,2vw,1.5rem);
  line-height:1.15}
.stage-name small{display:block;font-family:var(--mono);font-size:10px;font-weight:400;
  letter-spacing:.06em;color:var(--ink-soft);margin-top:2px;text-transform:uppercase}
.stage-v{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.stage-v span{display:block;font-size:10px;letter-spacing:.14em;color:var(--ink-soft);
  text-transform:uppercase}
.diff{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border:1px solid currentColor;text-align:center;white-space:nowrap}
.diff.easy{color:var(--moss-tx)}
.diff.mod{color:var(--water-tx)}
.diff.hard{color:var(--route-tx)}

/* ══ SMALL-MULTIPLE CHARTS ══ */
.charts{max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:20px}
.chart-card.sm{padding:18px}
.mini{position:relative}
.mini svg{width:100%;height:200px;overflow:visible}
.m-grid{stroke:var(--rule);stroke-width:1;opacity:.65}
.m-lab{font-family:var(--mono);font-size:9px;fill:var(--ink-soft)}
.m-band{fill:var(--water);fill-opacity:.2}
.m-line{fill:none;stroke:var(--water);stroke-width:2;stroke-linejoin:round}
.m-dot{fill:var(--water)}
.m-bar{fill:var(--water);rx:2}
.m-bar.hi{fill:var(--route)}
.m-cell:hover .m-bar{fill:var(--route)}
.m-hit{fill:transparent;cursor:pointer}
.m-tip{
  position:absolute;pointer-events:none;background:var(--ink);color:var(--paper-3);
  font-family:var(--mono);font-size:10.5px;padding:6px 9px;white-space:nowrap;
  transform:translate(-50%,-118%);opacity:0;transition:opacity .14s var(--e-out);z-index:5;
}
.m-tip.on{opacity:1}
.m-tip b{font-weight:500}
.chart-key{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin:10px 0 0;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-soft)}
.key-item{display:inline-flex;align-items:center;gap:6px}
.sw{width:10px;height:10px;flex:none;display:inline-block}
.sw-hi{background:var(--route)}
.sw-base{background:var(--water)}

/* ══ KIT ══ */
.kit{padding:clamp(46px,7vw,96px) var(--pad);border-top:1px solid var(--rule)}
.kit-grid{max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:0 34px}
.kit-group{border-top:1px solid var(--rule);padding-top:14px;margin-bottom:22px}
.kit-group h3{font-family:var(--display);font-weight:600;font-size:1.15rem;margin:0 0 10px}
.kit-item{display:flex;align-items:flex-start;gap:10px;padding:5px 0;cursor:pointer;
  font-size:13px;line-height:1.5}
.kit-item input{
  appearance:none;width:16px;height:16px;flex:none;margin-top:3px;
  border:2px solid var(--ink);background:var(--paper-3);
  transition:background .16s var(--e-out);
}
.kit-item input:checked{background:var(--moss);border-color:var(--moss)}
.kit-item input:checked+span{color:var(--ink-soft);text-decoration:line-through}
.kit-item span{transition:color .16s var(--e-out)}

/* ══ BOOK ══ */
.book{padding:clamp(46px,7vw,96px) var(--pad);background:var(--paper-2);
  border-top:1px solid var(--rule)}
.book-in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr .9fr;
  gap:clamp(28px,5vw,72px);align-items:start}
.book-live{margin-top:26px;border-top:1px solid var(--rule);padding-top:14px}
.book-live b{display:block;font-family:var(--display);font-weight:600;font-size:1.7rem;
  color:var(--route);line-height:1.2;margin-top:3px}
.form{display:flex;flex-direction:column;gap:14px;min-width:0}
/* grid items default to min-width:auto — a <select> with long option text
   would otherwise set a min-content floor and push the whole column wider
   than the viewport on small screens. */
.book-in > *,.row > *,.field{min-width:0}
.field input,.field select,.field textarea{width:100%;max-width:100%}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft)}
.field .opt{color:var(--ink-soft);letter-spacing:.08em}
.field input,.field select,.field textarea{
  background:var(--paper-3);border:1px solid var(--ink-mute);color:var(--ink);
  padding:12px 13px;font-family:var(--mono);font-size:13px;border-radius:0;
  transition:border-color .2s var(--e-out);
}
.field textarea{resize:vertical;min-height:80px}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-mute)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
/* no outline:none here — it used to out-specify the global focus ring */
.field input.err,.field textarea.err{border-color:var(--route);border-width:2px}
.form-msg{font-family:var(--mono);font-size:11.5px;margin:4px 0 0;min-height:1.3em;
  overflow-wrap:anywhere;word-break:break-word}
.form-msg.ok{color:var(--moss-tx)}
.form-msg.bad{color:var(--route-tx)}

/* ══ FOOTER ══ */
.foot{padding:24px var(--pad) 30px;border-top:1px solid var(--rule)}
.foot-row{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap}
.foot .fine{max-width:var(--maxw)}

/* ══ RESPONSIVE ══ */
@media (max-width:900px){
  .nav-links{display:none}
  .book-in{grid-template-columns:1fr}
  .stage{grid-template-columns:34px 1fr;gap:8px 10px}
  .stage-v.hide-sm{display:none}
  /* distance + difficulty share a second row instead of crushing into the index column */
  .stage-v{grid-column:2}
  .diff{grid-column:2;justify-self:start;margin-top:2px}
}
@media (max-width:560px){
  .row{grid-template-columns:1fr}
  .hero-stats{gap:18px}
  .readout{gap:12px}
  .ro{min-width:54px}
}

/* ══ REDUCED MOTION ══ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  [data-rise]{opacity:1;transform:none}
}

/* ── profile label layers (HTML, so they are never stretched by the viewBox) ── */
.p-ylab{position:absolute;left:0;top:0;height:clamp(180px,26vw,300px);width:100%;
  pointer-events:none}
.p-ylab span{position:absolute;left:4px;transform:translateY(-100%);padding-bottom:2px;
  font-family:var(--mono);font-size:10px;color:var(--ink-soft);background:transparent}
.p-axis{position:relative;height:1.3em}
.p-axis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.p-axis span:first-child{transform:none}
.p-axis span:last-child{transform:translateX(-100%)}

/* ══ PRINT — reveals must never hide content on paper ══ */
@media print{
  /* the itinerary is the most print-worthy thing here; IntersectionObserver
     has not fired for anything below the fold, so force every reveal open */
  [data-rise]{opacity:1!important;transform:none!important}
  .contours,.p-cur{display:none!important}
  .nav{position:static;backdrop-filter:none;border-bottom:1px solid #000}
  .btn,.btn-sm,.link,.link-btn,#kitReset{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .season,.book,.chart-card{background:#fff!important}
  .stage,.chart-card,.kit-group,.qa{break-inside:avoid;page-break-inside:avoid}
  .h1,.h2{break-after:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt}
}