/* Standalone tokens match index.html; the harness checks parity. */
:root{color-scheme:light;
  --skog:#1e3d2f;
  --mose:#3d6645;
  --krem:#f6f1e9;
  --hvit:#ffffff;
  --graa:#606672;
  --lys:#e8e3d9;
  --bg:#faf8f3;
  --radius-sm:8px;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'DM Sans', system-ui, sans-serif;
}

*{box-sizing:border-box}
html{scroll-padding-top:20px}
body{margin:0;
  background:var(--krem);
  color:var(--skog);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5}
a{color:inherit;
  text-underline-offset:4px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--skog);
  outline-offset:4px}
header,main,footer{width:min(100% - 48px,1000px);
  margin-inline:auto}
header{display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-block:22px;
  border-bottom:1px solid var(--lys)}
header nav{display:flex;
  gap:24px}
.brand{font-family:var(--font-display);
  font-size:30px;
  font-weight:700;
  text-decoration:none}
header nav a{font-size:14px;
  text-decoration:none;
  padding-block:10px}
main{padding-block:36px 52px}
h1{font-family:var(--font-display);
  font-size:38px;
  line-height:1.12;
  letter-spacing:-.7px;
  margin:0 0 12px;
  max-width:760px}
.intro{margin:0 0 28px;
  color:var(--graa)}
h2{font-size:19px;
  line-height:1.3}
form{max-width:540px;
  margin-bottom:24px}
label{display:block;
  font-size:14px;
  font-weight:600;
  margin-bottom:7px}
label span{font-weight:400;
  color:var(--graa)}
.search-row{display:flex;
  gap:8px}
input{font:inherit;
  min-width:0;
  width:100%;
  padding:11px 14px;
  border:1px solid var(--graa);
  border-radius:var(--radius-sm);
  background:var(--hvit);
  color:var(--skog)}
button,.button{font:inherit;
  font-weight:600;
  display:inline-block;
  border:1px solid var(--skog);
  border-radius:var(--radius-sm);
  background:var(--skog);
  color:var(--hvit);
  padding:11px 22px;
  text-decoration:none;
  cursor:pointer}
.button:hover,button:hover{background:var(--mose)}
.alphabet{display:flex;
  flex-wrap:wrap;
  gap:2px;
  margin-block:0 30px;
  padding-bottom:14px;
  border-bottom:1px solid var(--lys)}
.alphabet a{min-width:38px;
  min-height:44px;
  display:grid;
  place-items:center;
  font-size:14px;
  text-decoration:none;
  border-radius:var(--radius-sm)}
.alphabet a:hover{background:var(--bg)}
.municipality-groups{columns:3;
  column-gap:40px}
.municipality-group{break-inside:avoid;
  margin-bottom:26px}
.municipality-group h2{margin:0 0 6px;
  padding-bottom:8px;
  border-bottom:1px solid var(--lys)}
ul{list-style:none;
  margin:0;
  padding:0}
.municipality-group a{display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:44px;
  padding-block:9px;
  text-decoration:none;
  font-size:15px}
.municipality-group a:hover span{text-decoration:underline}
.search-summary{display:flex;
  flex-wrap:wrap;
  gap:20px;
  font-size:14px}
.back{display:inline-block;
  margin-bottom:24px;
  font-size:14px}
.services{max-width:640px;
  margin-block:32px}
.services h2{font-size:18px}
.services li{border-top:1px solid var(--lys)}
.services li:last-child{border-bottom:1px solid var(--lys)}
.services li a{display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-block:20px;
  text-decoration:none;
  font-weight:600}
.services li a:hover>span:first-child{text-decoration:underline}
.service-meta{font-size:14px;
  color:var(--graa);
  font-weight:400;
  white-space:nowrap}
.service-meta span{margin-left:12px}
.text-link{display:inline-block;
  margin-block:10px;
  font-size:15px}
footer{padding-block:24px 40px;
  border-top:1px solid var(--lys);
  color:var(--graa);
  font-size:13px;
  display:flex;
  justify-content:space-between;
  gap:24px}
footer details{max-width:640px}
summary{cursor:pointer}
footer p{line-height:1.65}
.skip-link{position:absolute;
  left:16px;
  top:-100px;
  background:var(--hvit);
  padding:12px;
  z-index:2}
.skip-link:focus{top:12px}

@media(max-width:760px){.municipality-groups{columns:2;
  column-gap:28px}
}

@media(max-width:520px){header,main,footer{width:calc(100% - 40px)}
header{padding-block:15px}
header nav{gap:18px}
main{padding-block:28px 38px}
h1{font-size:32px}
.municipality-groups{columns:1}
.alphabet{gap:0}
.alphabet a{min-width:38px}
.services li a{padding-block:17px}
footer{display:block}
footer>a{display:inline-block;
  margin-top:18px}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}
}