.art { padding-block: var(--s-7) var(--s-8); }
.art-in { display: grid; gap: var(--s-5); max-width: 44em; min-width: 0; }
.art-sti { display: flex; flex-wrap: wrap; gap: var(--s-2); color: var(--ink-3); font-size: var(--t-small); }
.art-sti a { color: var(--ink-2); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.art-sti a:hover { text-decoration: underline; }
.art h1 { font-size: var(--t-1); }
.art-svar { padding: var(--s-4) var(--s-5); border-left: 3px solid var(--go); background: var(--surface); border-radius: 0 var(--r-control) var(--r-control) 0; box-shadow: var(--lift-1); }
.art-svar p { font-size: var(--t-lead); line-height: 1.5; color: var(--ink); }
.art-kropp { display: grid; gap: var(--s-4); min-width: 0; }
.art-kropp h2 { font-size: var(--t-2); margin-top: var(--s-5); scroll-margin-top: 96px; }
.art-kropp h3 { font-size: var(--t-3); margin-top: var(--s-3); }
.art-kropp p, .art-kropp li { color: var(--ink-2); overflow-wrap: anywhere; }
.art-kropp b, .art-kropp strong { color: var(--ink); font-weight: 620; }
.art-kropp a:not(.btn) { color: var(--ink); }
.art-kropp ul:not(.art-liste) { margin: 0; padding-left: 1.25em; display: grid; gap: var(--s-2); }


.art-steg { list-style: none; margin: 0; padding: var(--s-5); display: grid; gap: var(--s-4); counter-reset: steg; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
.art-steg li { counter-increment: steg; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--s-3); align-items: start; color: var(--ink-2); }
.art-steg li::before { content: counter(steg); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); color: var(--ink); font: 650 var(--t-small)/1 var(--font-text); }
.art-steg-t { font-size: var(--t-small); color: var(--ink-3); margin-bottom: calc(-1 * var(--s-2)); }


.art-cta { display: grid; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-card); background: var(--surface-2); margin-top: var(--s-4); }
.art-cta p { color: var(--ink-2); }
.art-cta .row .btn { white-space: normal; text-align: center; }


.art-neste { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.art-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.art-liste a { display: grid; gap: var(--s-1); padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); text-decoration: none; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.art-liste a:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.art-liste b { font: 620 var(--t-3)/1.25 var(--font-display); letter-spacing: -.012em; color: var(--ink); }
.art-liste span { color: var(--ink-2); font-size: var(--t-small); }
.art-dato { color: var(--ink-3); font-size: var(--t-small); }


.art-kropp blockquote { margin: 0; padding: var(--s-3) var(--s-4); border-left: 3px solid var(--line-strong); color: var(--ink); font-size: var(--t-lead); }
.art-kropp ol { margin: 0; padding-left: 1.4em; display: grid; gap: var(--s-2); }
.art-bilete { margin: 0; display: grid; gap: var(--s-2); }
.art-bilete img { width: 100%; height: auto; border-radius: var(--r-card); display: block; background: var(--surface); }
.art-bilete figcaption { color: var(--ink-3); font-size: var(--t-small); }
.art-kjelde { display: block; }
.art-kjelde a { color: var(--ink-2); }
.art-gruppe { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.art-gruppe h2 { font-size: var(--t-3); }
.art-neste h2 { font-size: var(--t-2); }

@media (max-width: 860px) {
  .art { padding-block: var(--s-6) var(--s-7); }
  .art-svar { padding: var(--s-3) var(--s-4); }
  .art-steg { padding: var(--s-4); }
  .art-cta { padding: var(--s-4); }
  .art-liste a { padding: var(--s-4); }
}