:root{
  --bg:#f1f4f0; --surface:#fff; --ink:#18221f; --muted:#5b6862;
  --line:#d5ddd7; --accent:#1f4d43; --accent-ink:#fff; --signal:#e9c23d;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#121816;--surface:#1a2320;--ink:#e8eee9;--muted:#9aa8a1;--line:#2c3833;--accent:#7fc2ad;--accent-ink:#0d1512;--signal:#e9c23d}
}
*{box-sizing:border-box}
html{scroll-padding-top:1rem}
body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}
.wrap{max-width:46rem;margin:0 auto;padding:2.5rem 1.25rem 4rem}
header h1{font:700 clamp(2rem,6vw,3rem)/1.05 "Bricolage Grotesque",system-ui,sans-serif;margin:0 0 .4rem;letter-spacing:-.02em}
header p{margin:0;color:var(--muted)}
header a{color:inherit}
nav{display:flex;gap:.5rem;flex-wrap:wrap;margin:2rem 0 1.5rem}
nav button{font:inherit;font-weight:600;padding:.55rem 1.1rem;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
nav button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.intro{max-width:38rem;margin:0 0 1.5rem;color:var(--muted)}
ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
li{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--signal);border-radius:6px;padding:1rem 1.15rem;display:grid;gap:.15rem}
li h2{font-size:1.1rem;margin:0}
li .meta{color:var(--muted);font-size:.92rem}
li a.kjop{justify-self:start;margin-top:.5rem;font-weight:600;color:var(--accent);text-underline-offset:3px}
li.kjopt{opacity:.55;border-left-color:var(--line)}
li.kjopt h2{text-decoration:line-through}
.badge{justify-self:start;font-size:.8rem;font-weight:600;background:var(--accent);color:var(--accent-ink);padding:.1rem .6rem;border-radius:999px}
.tom{color:var(--muted);padding:1.5rem 0}
footer{margin-top:3rem;color:var(--muted);font-size:.9rem}
.ramme{width:100%;height:80vh;min-height:32rem;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.hjelp{color:var(--muted);font-size:.92rem;margin:.75rem 0 0}
.hjelp a{color:var(--accent)}
.knapp{display:inline-block;margin:0 0 1rem;padding:.85rem 1.4rem;border-radius:8px;background:var(--accent);color:var(--accent-ink);font-weight:700;text-decoration:none}
.knapp:hover{filter:brightness(1.1)}