/* fjellstadfeltet.no – skiltblått, oppmerkingsgult og asfalt */
@font-face{font-family:"Barlow";src:url(fonts/barlow-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/barlow-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/barlow-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --asfalt:#262a2e;
  --asfalt-2:#3a3f45;
  --skilt:#1b4f9c;
  --skilt-mork:#123a75;
  --gul:#f2c230;
  --betong:#eceeef;
  --kantstein:#868d94;
  --papir:#ffffff;
  --linje:#d6dadd;
  --display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --tekst:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --maks:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--betong);color:var(--asfalt);font:400 17px/1.55 var(--tekst)}
img{display:block;max-width:100%}
a{color:var(--skilt)}
a:hover{color:var(--skilt-mork)}
:focus-visible{outline:3px solid var(--gul);outline-offset:2px}
.wrap{max-width:var(--maks);margin:0 auto;padding:0 20px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- topp ---------- */
.topp{background:var(--asfalt);color:#fff}
.topp .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.merke{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.merke:hover{color:#fff}
.merke svg{width:34px;height:34px;flex:none}
.merke span{font:700 24px/1 var(--display);letter-spacing:.01em}
.nav{display:flex;gap:4px}
.nav a{color:#c9ced3;text-decoration:none;font:600 19px/1 var(--display);padding:10px 12px;border-radius:4px}
.nav a:hover{color:#fff;background:var(--asfalt-2)}
.nav a[aria-current=page]{color:var(--asfalt);background:var(--gul)}

/* ---------- hero: soneskiltet ---------- */
.hero{background:var(--papir);border-bottom:1px solid var(--linje)}
.hero .wrap{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:56px;align-items:center;padding-top:48px;padding-bottom:48px}
.soneskilt{background:var(--skilt);border-radius:14px;padding:10px;box-shadow:0 1px 0 var(--skilt-mork)}
.soneskilt-inner{border:4px solid #fff;border-radius:8px;color:#fff;text-align:center;padding:18px 14px 20px}
.soneskilt .sone{font:700 30px/1 var(--display);letter-spacing:.04em}
.soneskilt .p{font:700 150px/.9 var(--display);margin:6px 0 4px}
.soneskilt .navn{font:600 24px/1.05 var(--display);border-top:3px solid #fff;padding-top:12px;margin-top:8px}
.hero h1{font:700 clamp(40px,5.4vw,66px)/.98 var(--display);margin:0 0 18px;letter-spacing:-.005em}
.hero p.ingress{font-size:19px;max-width:58ch;margin:0 0 28px;color:var(--asfalt-2)}
.tall{display:flex;flex-wrap:wrap;gap:0;margin:0;padding:0}
.tall div{padding:2px 28px 2px 18px;border-left:6px solid var(--gul);margin:0 0 12px}
.tall dt{font-size:15px;color:var(--kantstein);font-weight:500}
.tall dd{margin:0;font:700 36px/1.1 var(--display)}
.tall dd small{font:600 20px/1 var(--display)}

/* ---------- graf ---------- */
.graf{padding-top:40px;padding-bottom:8px}
.graf h2,.logg-topp h2{font:700 30px/1.1 var(--display);margin:0 0 4px}
.graf p{margin:0 0 18px;color:var(--asfalt-2);font-size:16px}
.stolper{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;align-items:end;height:150px;border-bottom:2px solid var(--asfalt)}
.stolpe{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%;cursor:pointer;background:none;border:0;padding:0;font:inherit;color:inherit}
.stolpe i{display:block;background:var(--skilt);border-radius:3px 3px 0 0;min-height:2px;transition:background .15s}
.stolpe:hover i,.stolpe.aktiv i{background:var(--gul)}
.stolpe b{text-align:center;font:600 14px/1 var(--display);margin-bottom:4px}
.akse{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin-top:6px}
.akse span{text-align:center;font:600 14px/1.1 var(--display);color:var(--kantstein)}

/* ---------- filter ---------- */
.logg-topp{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--betong) 92%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--linje);margin-top:32px}
.logg-topp .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;padding-bottom:12px}
.filtre{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.seg{display:inline-flex;background:var(--papir);border:1px solid var(--linje);border-radius:6px;padding:3px;gap:2px;overflow-x:auto;max-width:100%}
.seg button{border:0;background:none;font:600 17px/1 var(--display);padding:8px 12px;border-radius:4px;cursor:pointer;color:var(--asfalt-2);white-space:nowrap}
.seg button[aria-pressed=true]{background:var(--asfalt);color:#fff}
select{font:500 16px var(--tekst);padding:8px 34px 8px 12px;border:1px solid var(--linje);border-radius:6px;background:var(--papir) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23262a2e' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center;appearance:none;color:var(--asfalt)}
.treff{font-size:15px;color:var(--kantstein)}

/* ---------- loggen ---------- */
.logg{padding-top:28px;padding-bottom:64px}
.maaned{display:grid;grid-template-columns:170px 1fr;gap:24px;padding:28px 0;border-top:1px solid var(--linje)}
.maaned:first-child{border-top:0}
.maaned h3{margin:0;font:700 28px/1 var(--display);position:sticky;top:84px;align-self:start}
.maaned h3 small{display:block;font:500 15px/1.4 var(--tekst);color:var(--kantstein);margin-top:6px}
.rutenett{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.kort{background:var(--papir);border-radius:6px;overflow:hidden;border:1px solid var(--linje);display:flex;flex-direction:column}
.kort button.bilde{all:unset;cursor:zoom-in;display:block;aspect-ratio:4/3;background:#cfd4d8}
.kort button.bilde:focus-visible{outline:3px solid var(--gul);outline-offset:-3px}
.kort img{width:100%;height:100%;object-fit:cover;object-position:center bottom}
.kort .meta{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px}
.kort .dato{font:700 21px/1.1 var(--display)}
.kort .kl{white-space:nowrap;font:600 17px/1 var(--display);color:var(--kantstein);margin-left:6px}
.kort p{margin:0;font-size:15px;color:var(--asfalt-2)}
.kategori{align-self:flex-start;font:600 15px/1 var(--display);background:var(--gul);color:var(--asfalt);padding:5px 8px 4px;border-radius:3px}
.tom{background:var(--papir);border:1px dashed var(--kantstein);border-radius:6px;padding:40px;text-align:center;color:var(--asfalt-2)}
.mer{display:block;margin:28px auto 0;font:600 19px/1 var(--display);background:var(--asfalt);color:#fff;border:0;border-radius:6px;padding:14px 22px;cursor:pointer}

/* ---------- lysboks ---------- */
.lysboks{position:fixed;inset:0;z-index:50;background:rgba(18,21,24,.96);display:none;flex-direction:column}
.lysboks.aapen{display:flex}
.lysboks figure{flex:1;margin:0;display:flex;align-items:center;justify-content:center;min-height:0;padding:56px 64px 8px}
.lysboks img{max-width:100%;max-height:100%;object-fit:contain;border-radius:3px}
.lysboks figcaption{color:#fff;padding:10px 20px 22px;text-align:center}
.lysboks figcaption .dato{font:700 24px/1.2 var(--display)}
.lysboks figcaption p{margin:4px auto 0;max-width:60ch;color:#c9ced3}
.lysboks .kategori{margin:8px auto 0;display:inline-block}
.lb-knapp{position:absolute;background:rgba(255,255,255,.1);color:#fff;border:0;width:48px;height:48px;border-radius:50%;cursor:pointer;font:600 26px/1 var(--tekst);display:grid;place-items:center}
.lb-knapp:hover{background:rgba(255,255,255,.2)}
.lb-lukk{top:12px;right:12px}
.lb-forrige{left:10px;top:50%;transform:translateY(-50%)}
.lb-neste{right:10px;top:50%;transform:translateY(-50%)}

/* ---------- tekstsider ---------- */
.side{background:var(--papir);border-bottom:1px solid var(--linje)}
.side .wrap{max-width:760px;padding-top:48px;padding-bottom:64px}
.side h1{font:700 clamp(38px,5vw,56px)/1 var(--display);margin:0 0 20px}
.side h2{font:700 28px/1.15 var(--display);margin:40px 0 10px}
.side p,.side li{max-width:68ch}
.side .ingress{font-size:20px;color:var(--asfalt-2)}
.boks{border-left:6px solid var(--gul);background:var(--betong);padding:16px 20px;border-radius:0 6px 6px 0;margin:24px 0}

/* ---------- bunn ---------- */
.bunn{color:var(--asfalt-2);font-size:15px}
.bunn .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:28px;padding-bottom:36px;border-top:1px solid var(--linje)}
.bunn nav{display:flex;gap:18px}

@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr;gap:28px;padding-top:28px;padding-bottom:32px}
  .soneskilt{max-width:210px}
  .soneskilt .p{font-size:104px}
  .maaned{grid-template-columns:1fr;gap:14px}
  .maaned h3{position:static}
  .rutenett{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .kort .dato{font-size:18px}
  .lysboks figure{padding:60px 8px 8px}
  .lb-forrige,.lb-neste{top:auto;bottom:16px;transform:none}
  .nav a{padding:8px 8px;font-size:17px}
  .merke span{font-size:20px}
}
@media (max-width:420px){
  .merke span{display:none}
  .tall div{padding-right:18px}
  .tall dd{font-size:30px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* skiltbilde i hero (lastes ned ved installasjon) */
.skiltbilde{margin:0}
.skiltbilde{display:flex;justify-content:center}
.skiltbilde img{width:100%;max-width:240px;height:auto;filter:drop-shadow(0 2px 6px rgba(38,42,46,.18))}
.skiltbilde figcaption{font-size:13px;color:var(--kantstein);margin-top:6px}
.soneskilt[hidden],.skiltbilde[hidden]{display:none}
@media (max-width:820px){.skiltbilde{justify-content:flex-start}.skiltbilde img{max-width:150px}}