:root{--ink:#173f35;--orange:#e84b19;--cream:#f4f2eb;--line:#d7dad3}*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--cream);font-family:"DM Sans",sans-serif}
a{color:inherit;text-decoration:none}
button, a{outline-offset:4px}
    .wrap{max-width:1320px;margin:auto;padding-left:36px;padding-right:36px}
    .topbar{height:76px;padding:0 36px;display:flex;align-items:center;justify-content:space-between;background:#f7f6f0;position:relative;z-index:10}
    .wordmark{font-family:"Barlow Condensed",sans-serif;font-weight:900;font-size:24px;letter-spacing:.02em;display:flex;align-items:center;white-space:nowrap}
    .wordmark>span:last-child{color:var(--orange)}.mark{background:var(--orange);color:white;display:inline-grid;place-items:center;width:32px;height:32px;transform:skew(-12deg);font-size:24px;margin-right:12px}
    .topbar nav{display:flex;gap:30px;font-size:13px;font-weight:700}
    .topbar nav a:hover,.text-link:hover{color:var(--orange)}
    .nav-cta{background:var(--ink);color:white;padding:14px 20px;font-weight:800;font-size:13px}
    .nav-cta span{margin-left:18px}
    .hero{background:var(--orange);color:#fff;min-height:640px;display:flex;flex-direction:column;position:relative;overflow:hidden}
    .hero:before{content:"";position:absolute;right:-11%;top:-20%;width:60%;height:140%;background:repeating-linear-gradient(140deg,transparent 0 26px,rgba(255,255,255,.065) 27px 29px);transform:skew(-12deg)}
    .hero-grid{max-width:1320px;padding:64px 36px 20px;width:100%;margin:auto;flex:1;display:grid;grid-template-columns:1fr 260px;grid-template-rows:45px 1fr;position:relative}
    .eyebrow{grid-column:1/-1;font-size:13px;letter-spacing:.15em;font-weight:800}
    .dash{display:inline-block;width:32px;height:2px;background:white;vertical-align:middle;margin-right:12px}
    .hero-copy{align-self:center;padding-bottom:32px}.kicker{font-size:17px;font-weight:800;letter-spacing:.2em;margin:0 0 6px}
    .hero h1{font-family:"Barlow Condensed",sans-serif;font-weight:900;font-size:clamp(100px,14vw,205px);line-height:.72;letter-spacing:-.025em;margin:20px 0 38px}
    .hero h1 em{font-style:normal;color:#173f35}.hero-lead{max-width:500px;font-size:20px;line-height:1.45;font-weight:600}
    .hero-actions{display:flex;align-items:center;gap:30px;margin-top:30px}
    .button{display:inline-flex;justify-content:space-between;align-items:center;gap:38px;padding:18px 22px;font-weight:800;font-size:13px;letter-spacing:.035em}
    .button.light{background:white;color:var(--ink)}
    .button.dark{background:var(--ink);color:white;margin-top:22px}
    .button:hover{transform:translateY(-2px)}
    .text-link{font-size:14px;font-weight:800}
    .text-link span{margin-left:9px}
    .hero-side{align-self:end;display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:12px;padding-bottom:48px}
    .hero-big{font-family:"Barlow Condensed",sans-serif;font-size:100px;font-weight:900;line-height:.8}
    .hero-big span{font-size:35px}
    .hero-small{font-size:12px;font-weight:800;letter-spacing:.08em}
    .hero-rule{height:1px;width:100%;background:rgba(255,255,255,.6);margin:12px 0}
    .hero-bottom{border-top:1px solid rgba(255,255,255,.45);padding:17px max(36px,calc((100vw - 1248px)/2));display:flex;justify-content:space-between;font-size:11px;font-weight:800;letter-spacing:.13em}
    .hero-bottom b{font-size:20px;margin-left:16px}
    .intro,.info,.about{padding-top:105px;padding-bottom:115px}
    .section-head{display:grid;grid-template-columns:220px 1fr 300px;gap:30px;align-items:start;margin-bottom:48px}
    .section-index{font-size:12px;letter-spacing:.12em;font-weight:800;color:var(--orange)}

h2{font-family:"Barlow Condensed",sans-serif;font-size:clamp(62px,7vw,105px);line-height:.86;letter-spacing:-.015em;margin:0;font-weight:900}
h2 i{font-style:normal;color:var(--orange)}
    .section-head p{line-height:1.6;margin:8px 0;font-size:16px}
    .distance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    .distance{min-height:430px;background:#fff;padding:27px;display:flex;flex-direction:column;justify-content:space-between;border-top:5px solid var(--ink)}
    .distance.featured{background:var(--ink);color:white;border-color:var(--orange)}
    .tag{font-size:11px;font-weight:800;letter-spacing:.11em}
    .distance-num{font-family:"Barlow Condensed",sans-serif;font-size:112px;font-weight:900;line-height:.85;letter-spacing:-.04em}
    .distance-num small{font-size:38px;letter-spacing:0}
    .distance-num.kids{font-size:87px}
    .distance h3{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:30px;text-transform:uppercase;margin:16px 0 6px}
    .distance p{font-size:14px;line-height:1.6;max-width:270px}
    .distance>a,.subtle{font-weight:800;font-size:12px;letter-spacing:.07em}
    .distance>a{display:flex;justify-content:space-between;border-top:1px solid #718287;padding-top:18px}
    .subtle{opacity:.55}
    .route-section{background:#18343a;color:white;padding:105px 0 85px}
    .route-heading{margin-bottom:45px}
    .route-heading h2 i{color:#fb6332}
    .route-heading p{color:#d1dcda}
    .route-card{background:#f6f5ef;color:var(--ink)}
    .route-toolbar{min-height:72px;display:flex;justify-content:space-between;align-items:center;padding:18px 24px;font-size:13px;font-weight:800;gap:20px}
    .route-pill{display:inline-block;background:var(--orange);color:white;padding:9px 13px;margin-right:17px}
    .route-toolbar a{white-space:nowrap;border-bottom:1px solid var(--ink);padding-bottom:5px}
    .route-toolbar a span{margin-left:14px}#map{height:475px;background:#dbe6df;position:relative;overflow:hidden;isolation:isolate;z-index:0;border-top:1px solid #d7dad3;border-bottom:1px solid #d7dad3}#map 
    .leaflet-tile-pane{filter:saturate(.65) contrast(.98)}#map 
    .leaflet-control-zoom a{color:#173f35;background:#fff;border:0}#map 
    .leaflet-control-zoom{border:0;box-shadow:0 2px 14px #173f352b}#map 
    .course-label{background:#173f35;border:0;border-radius:2px;box-shadow:none;color:#fff;font-family:"DM Sans",sans-serif;font-weight:800;font-size:11px;letter-spacing:.08em;padding:5px 8px}#map 
    .course-label:before{display:none}.map-loading{padding:30px}
    .leaflet-container{font-family:"DM Sans",sans-serif}
    .profile{padding:24px 28px 16px}
    .profile-title{display:flex;justify-content:space-between;align-items:center;font-size:12px;gap:15px}
    .profile-title strong{letter-spacing:.12em}.profile-title span{color:#6d7c7d}
    .chart-wrap{height:145px;margin-top:12px}#elevation{width:100%;height:100%;overflow:visible;cursor:crosshair}
    .profile-axis{display:flex;justify-content:space-between;color:#738280;font-size:11px;font-weight:800;letter-spacing:.1em}
    .route-note{font-size:12px;color:#c4d3d0;margin-top:20px}
    .info-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
    .info-main,.info-side{padding:45px 50px 20px 0}
    .info-side{border-left:1px solid var(--line);padding-left:50px}
    .info h3{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;font-size:35px;margin:0 0 15px}
    .info-main p{font-size:18px;line-height:1.65;max-width:480px}.info dl{margin:20px 0}
    .info dl div{border-bottom:1px solid var(--line);padding:13px 0;display:flex;justify-content:space-between;gap:20px}
    .info dt{color:#68787a}.info dd{margin:0;font-weight:700;text-align:right}.fine{font-size:12px;color:#66777a;line-height:1.5}
    .signup{background:var(--orange);color:white;padding:100px 0}.signup .section-index{color:#fff}
    .signup-inner{display:grid;grid-template-columns:1fr 360px;gap:70px;align-items:end}.signup h2{margin:25px 0}
    .signup h2 i{color:var(--ink)}.signup p{font-size:17px;line-height:1.6;max-width:560px}
    .signup-box{background:white;color:var(--ink);padding:30px;min-height:260px}
    .box-label{font-size:12px;font-weight:800;letter-spacing:.12em}
    .signup-box strong{display:block;font-family:"Barlow Condensed";font-size:43px;margin-top:34px}
    .signup-box p{font-size:14px}.signup-box a{font-size:12px;font-weight:800;border-bottom:1px solid;padding-bottom:4px}
    .about{display:grid;grid-template-columns:1fr 1fr;gap:50px}.about h2{margin-top:30px;font-size:clamp(58px,6vw,90px)}
    .about-copy>p{font-size:20px;line-height:1.6;margin:40px 0}.about-copy>p a{text-decoration:underline}
    .partners{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .partners a{min-height:160px;border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;justify-content:space-between}
    .partners small{font-weight:800;color:#697779;letter-spacing:.1em}
    .partners strong{font-family:"Barlow Condensed";font-size:27px;line-height:1}.partners 
    .enerco{color:var(--orange);font-size:42px}

footer{background:var(--ink);color:white}
    .footer-inner{min-height:120px;display:flex;align-items:center;justify-content:space-between;gap:20px}
    
footer p,footer>a{font-size:12px;font-weight:700}
footer .wordmark{font-size:21px}@media(max-width:1000px){.topbar nav{display:none}
    .section-head{grid-template-columns:1fr 2fr}.section-head p{grid-column:2}
    .hero-grid{grid-template-columns:1fr}.hero-side{display:none}.hero h1{font-size:clamp(100px,18vw,180px)}
    .signup-inner{grid-template-columns:1fr 300px;gap:25px}}@media(max-width:700px){.wrap{padding-left:20px;padding-right:20px}
    .topbar{padding:0 20px;height:66px}.wordmark{font-size:19px}.mark{width:26px;height:26px;font-size:20px;margin-right:8px}
    .nav-cta{padding:11px;font-size:11px}.nav-cta span{display:none}.hero{min-height:630px}
    .hero-grid{padding:35px 20px 25px;grid-template-rows:40px 1fr}
    .hero h1{font-size:clamp(82px,20vw,145px);margin:24px 0 31px}.hero-lead{font-size:18px}
    .hero-actions{align-items:flex-start;flex-direction:column;gap:20px}.hero-bottom{padding:15px 20px}
    .hero-bottom span:last-child{display:none}.intro,.info,.about{padding-top:75px;padding-bottom:75px}
    .section-head{display:block;margin-bottom:32px}.section-head h2{margin:20px 0}.section-head p{max-width:450px}
    .distance-grid{grid-template-columns:1fr}.distance{min-height:320px}.distance-num{font-size:85px}
    .distance-num.kids{font-size:70px}.route-section{padding:75px 0}.route-toolbar{align-items:flex-start}
    .route-title{display:block;margin-top:12px;font-size:11px}.route-toolbar a{font-size:11px}#map{height:390px}
    .profile{padding:20px 15px}.profile-title{align-items:flex-start;flex-direction:column}.info-grid{grid-template-columns:1fr}
    .info-main,.info-side{padding:25px 0}.info-side{border-left:0;border-top:1px solid var(--line)}.signup{padding:75px 0}
    .signup-inner,.about{grid-template-columns:1fr}.signup-box{min-height:220px}.about-copy>p{margin-top:0}
    .footer-inner{min-height:180px;align-items:flex-start;justify-content:center;flex-direction:column;gap:0}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
    .button:hover{transform:none}}

/* Grundlayout för Leaflet-kartan */
#map .leaflet-pane,
#map .leaflet-tile,
#map .leaflet-marker-icon,
#map .leaflet-marker-shadow,
#map .leaflet-tile-container,
#map .leaflet-pane > svg,
#map .leaflet-pane > canvas,
#map .leaflet-control-container {
  position: absolute;
  left: 0;
  top: 0;
}

#map .leaflet-pane { z-index: 400; }
#map .leaflet-tile-pane { z-index: 200; }
#map .leaflet-overlay-pane { z-index: 400; }
#map .leaflet-marker-pane { z-index: 600; }
#map .leaflet-tooltip-pane { z-index: 650; }
#map .leaflet-popup-pane { z-index: 700; }
#map .leaflet-control-container { width: 100%; height: 100%; pointer-events: none; }
#map .leaflet-control { position: relative; pointer-events: auto; }


#map .km-marker {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid white;
  border-radius: 50%;
  background: #173f35;
  color: white;
  font: 800 14px "DM Sans", sans-serif;
  box-shadow: 0 2px 7px #173f3566;
}

#map .leaflet-tooltip {
  position: absolute;
  white-space: nowrap;
  pointer-events: none;
}
/* Banväljare */
.route-selector{display:flex;flex-wrap:wrap;gap:6px}
.route-option{border:1px solid #c7cec8;background:transparent;color:var(--ink);padding:10px 14px;cursor:pointer;font:800 13px "DM Sans",sans-serif;letter-spacing:.03em}
.route-option:hover,.route-option:focus-visible{border-color:var(--orange)}
.route-option.active{background:var(--orange);border-color:var(--orange);color:white}
#map .km-marker{display:grid;place-items:center;width:30px;height:30px;border:2px solid white;border-radius:50%;background:#173f35;color:white;font:800 14px "DM Sans",sans-serif;box-shadow:0 2px 7px #173f3566}
#map .leaflet-tooltip{position:absolute;white-space:nowrap;pointer-events:none}
@media(max-width:700px){.route-toolbar{gap:14px}.route-option{padding:9px 10px;font-size:12px}}

/* Samma val visas på distanskorten och i kartans banväljare. */
.distance.featured{background:#fff;color:var(--ink);border-color:var(--ink)}
.distance.selected{background:var(--ink);color:white;border-color:var(--orange);box-shadow:0 12px 30px #173f3529}
.distance-action{display:flex;justify-content:space-between;width:100%;padding:18px 0 0;border:0;border-top:1px solid #718287;background:transparent;color:inherit;cursor:pointer;text-align:left;font:800 12px "DM Sans",sans-serif;letter-spacing:.07em}
.distance-action:hover,.distance-action:focus-visible{color:var(--orange)}
.distance-action span{font-size:18px;line-height:12px}

/* Storviks IF: föreningens klubbmärke och gröna naturtoner. */
.hero-organizer{position:absolute;right:36px;top:38px;z-index:2;display:flex;align-items:center;gap:14px;padding:11px 17px 11px 12px;background:#f7f6f0;color:#173f35;box-shadow:0 10px 28px #173f3530}
.hero-organizer img{display:block;width:56px;height:auto;max-height:61px;object-fit:contain}
.hero-organizer span{display:flex;flex-direction:column;gap:4px}
.hero-organizer small{font-size:10px;font-weight:800;letter-spacing:.12em;color:#376b51}
.hero-organizer strong{font-family:"Barlow Condensed",sans-serif;font-size:19px;line-height:1.02;letter-spacing:.02em}
.hero-organizer:hover{transform:translateY(-2px)}
.hero-bottom{background:#173f35;border-color:#2d5b4e}
.hero-side .hero-rule{background:#d8ecdd}
.route-section{background:#173f35}
.route-pill{background:#2c7151}
.distance.selected{background:#173f35}
@media(max-width:700px){.hero-organizer{right:20px;top:26px;padding:7px 9px;gap:7px}.hero-organizer img{width:36px;max-height:39px}.hero-organizer small{font-size:8px}.hero-organizer strong{font-size:13px}.hero .eyebrow{max-width:45%;font-size:10px;line-height:1.5}}

/* Resultatarkiv */
.results{padding-top:100px;padding-bottom:100px}
.results-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.result-card{min-height:255px;padding:26px 30px;background:#173f35;color:#fff;display:flex;flex-direction:column;justify-content:space-between;transition:transform .2s,background-color .2s}
.result-card:nth-child(2){background:#286249}
.result-card:hover,.result-card:focus-visible{transform:translateY(-4px);background:#1d7451}
.result-card span{font-size:12px;font-weight:800;letter-spacing:.11em}
.result-card strong{font-family:"Barlow Condensed",sans-serif;font-size:100px;line-height:.8;letter-spacing:-.025em}
.result-card span:last-child{border-top:1px solid #ffffff73;padding-top:18px;display:flex;justify-content:space-between}
.result-card b{font-size:19px;line-height:12px}
.results-source{font-size:14px;color:#526c61;margin-top:20px}
.results-source a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:700px){.results{padding-top:75px;padding-bottom:75px}.results-grid{grid-template-columns:1fr}.result-card{min-height:210px}.result-card strong{font-size:84px}}

@media (min-width: 1001px) {
  .route-heading > p {
    align-self: end;
    margin-bottom: 0;
  }
}
/* Pallplatser i senaste upplagans resultatkort. */
.results-grid{grid-template-columns:minmax(0,2fr) minmax(250px,1fr);align-items:stretch}
.result-card-featured{gap:24px;min-height:0}
.result-top{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.result-card-featured .result-top strong{font-size:72px}
.podium-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px}
.podium-class{min-width:0}
.podium-class h3{font:800 15px "DM Sans",sans-serif;letter-spacing:.07em;margin:0 0 11px;color:#b9dbc4}
.podium-class ol{list-style:none;counter-reset:place;padding:0;margin:0}
.podium-class li{counter-increment:place;display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:7px 0;border-top:1px solid #ffffff38;font-size:14px;line-height:1.3}
.podium-class li:before{content:counter(place);font-weight:800;color:#f7a887}
.podium-class li span{min-width:0}
.podium-class time{font-variant-numeric:tabular-nums;font-weight:800;white-space:nowrap}
.result-card-featured .result-full{margin-top:auto}
@media(max-width:1000px){.results-grid{grid-template-columns:1fr}.result-card:not(.result-card-featured){min-height:210px}}
@media(max-width:600px){.podium-grid{grid-template-columns:1fr;gap:22px}.result-card-featured .result-top strong{font-size:64px}.result-card-featured{padding:24px}}