/* Bloggens artikelstil — bygger på ../tokens.css (B33) och ../stil.css (topp, fot, knappar).
   Allt är avgränsat under .artikel så att sajtens topp, meny och fot ser likadana ut som på övriga sidor. */
.hopp{position:absolute;left:-999px;top:8px;background:var(--yta);color:var(--ink);padding:10px 14px;border-radius:var(--r4);z-index:80}
.hopp:focus{left:8px}

.artikel{max-width:41rem;margin:0 auto;padding:clamp(28px,5vw,64px) 20px clamp(56px,8vw,96px);font-size:18px;line-height:1.7;color:var(--text);overflow-wrap:anywhere}
@media (min-width:720px){.artikel{font-size:19px}}
.artikel .brod{font-size:15px;color:var(--mut);margin-bottom:18px}
.artikel .brod a{color:var(--mut);text-decoration:none;display:inline-block;padding:10px 2px}
.artikel .brod a:hover{color:var(--ink)}
.artikel .meta{font-size:15px;color:var(--mut);margin:0 0 12px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.artikel .ah .meta::before{content:"Guide";font-size:13px;font-weight:600;color:var(--acc);background:var(--acc-svag);padding:3px 10px;border-radius:var(--rund)}
.artikel h1{font:300 clamp(36px,6.4vw,58px)/1.05 var(--disp);letter-spacing:-.03em;color:var(--ink);margin:.1em 0 .45em;text-wrap:balance}
.artikel h2{font:400 clamp(27px,4vw,36px)/1.15 var(--disp);letter-spacing:-.02em;color:var(--ink);margin:2em 0 .55em;scroll-margin-top:84px;text-wrap:balance}
.artikel h3{font:600 19px/1.35 var(--sans);color:var(--ink);margin:1.6em 0 .4em}
.artikel p{margin:0 0 1.1em;max-width:68ch}
.artikel .ingress{font-size:clamp(19px,2.2vw,22px);line-height:1.55;color:var(--mut);max-width:none}
.artikel .ah{padding-bottom:clamp(20px,3vw,32px);margin-bottom:8px;border-bottom:1px solid var(--linje)}
.artikel ul,.artikel ol{margin:0 0 1.2em;padding-left:1.3em;max-width:68ch}
.artikel li{margin:.4em 0}
.artikel li::marker{color:var(--acc)}
.artikel a{color:var(--acc);text-underline-offset:.18em;text-decoration-thickness:.07em}
.artikel strong{color:var(--ink);font-weight:600}
.artikel code{font:.85em/1 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--panel);color:var(--ink);padding:.18em .45em;border-radius:6px;overflow-wrap:anywhere}
.artikel blockquote{margin:1.4em 0;padding:16px 20px;border-radius:var(--r3);background:var(--panel);border-left:3px solid var(--acc);color:var(--text)}
.artikel blockquote p{margin:.3em 0}

.artikel .toc{position:relative;background:var(--yta);border:1px solid var(--linje);border-radius:var(--r2);padding:18px 20px 10px;margin:28px 0 8px;box-shadow:var(--sk-2)}
.artikel .toc-t{font-size:13px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.08em;margin:0 0 4px}
.artikel .toc ol{margin:0;padding-left:1.4em;font-size:16.5px;line-height:1.35;max-width:none}
.artikel .toc li{margin:0}
.artikel .toc li::marker{color:var(--mut);font-variant-numeric:tabular-nums}
.artikel .toc a{display:flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none}
.artikel .toc a:hover{color:var(--acc)}

.artikel .jur,.artikel .obs{background:var(--var-svag);color:var(--text);border-radius:var(--r3);padding:14px 18px;font-size:16px;line-height:1.55;max-width:none;border:1px solid color-mix(in srgb,var(--var) 25%,transparent)}
.artikel .sam{background:var(--acc-svag);border-radius:var(--r2);padding:6px clamp(18px,3vw,26px) 12px;margin:2.4em 0}
.artikel .sam h2{margin-top:.7em}
.artikel .cta{position:relative;overflow:hidden;isolation:isolate;background:var(--natt);color:var(--natt-text);border-radius:var(--r2);padding:clamp(22px,4vw,32px);margin:2.4em 0;box-shadow:var(--sk-3)}
.artikel .cta::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 80% at 100% 0%,color-mix(in srgb,var(--hero2) 55%,transparent),transparent 70%),var(--korn);opacity:.9}
.artikel .cta p{margin:0 0 .9em;color:var(--natt-text)}
.artikel .cta .cta-t{font:400 clamp(24px,3vw,30px)/1.2 var(--disp);letter-spacing:-.02em;color:#fff}
.artikel .cta a{color:#fff}
.artikel .cta .lank{display:inline-flex;align-items:center;min-height:44px;margin-left:8px;color:#c9d5ff;text-decoration:none}
.artikel .cta .sm{color:var(--natt-mut)}
.artikel .cta .sm a{color:#c9d5ff}
.artikel .knapp.stor{background:#fff;color:#0b1533;min-height:52px;padding:0 24px;font-size:16.5px;text-decoration:none}
.artikel .sm{font-size:.85em;color:var(--mut)}

.artikel table{overflow-wrap:normal;word-break:normal;hyphens:auto;-webkit-hyphens:auto;border-collapse:collapse;width:100%;min-width:0;font-size:16px;line-height:1.5;margin:1.4em 0;background:var(--yta);border:1px solid var(--linje);border-radius:var(--r3);overflow:hidden;display:table}
.artikel th,.artikel td{overflow-wrap:break-word;text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--linje)}
.artikel th{color:var(--mut);font-weight:600;font-size:14px;background:var(--panel)}
@media (max-width:640px){
  .artikel table{border:0;background:none;display:block}
  .artikel table,.artikel tbody,.artikel tr,.artikel td{display:block}
  .artikel thead{position:absolute;left:-9999px}
  .artikel tr{border:1px solid var(--linje);border-radius:var(--r3);padding:6px 2px;margin:0 0 12px;background:var(--yta)}
  .artikel td{border:0;padding:5px 12px}
  .artikel td:first-child{font-weight:600;color:var(--ink)}
}

/* index */
.artikel.index{max-width:1160px}
.artikel.index .ah{max-width:44rem;border-bottom:0}
.artikel .artiklar{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px;max-width:none}
.artikel .artiklar li{margin:0}
.artikel .kort,.artikel .utvald{position:relative;background:var(--yta);border:1px solid var(--linje);border-radius:var(--r2);padding:22px 24px;box-shadow:var(--sk-1);transition:box-shadow .2s,transform .2s,border-color .2s;height:100%}
.artikel .kort:hover,.artikel .utvald:hover{box-shadow:var(--sk-2);transform:translateY(-2px);border-color:var(--linje2)}
.artikel .kort h2,.artikel .utvald h2{margin:0 0 .4em;font:400 clamp(23px,2.6vw,27px)/1.2 var(--disp);letter-spacing:-.015em}
.artikel .kort h2 a,.artikel .utvald h2 a{color:var(--ink);text-decoration:none;display:block}
.artikel .kort h2 a::after,.artikel .utvald h2 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.artikel .kort p,.artikel .utvald p{font-size:16.5px;color:var(--mut);margin:0 0 .5em}
.artikel .utvald{margin-top:8px;background:var(--natt);border-color:transparent;overflow:hidden;isolation:isolate;padding:clamp(24px,4vw,40px);box-shadow:var(--sk-3)}
.artikel .utvald::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 90% at 90% 10%,color-mix(in srgb,var(--hero2) 60%,transparent),transparent 70%),radial-gradient(45% 70% at 10% 100%,color-mix(in srgb,var(--hero3) 45%,transparent),transparent 70%),var(--korn)}
.artikel .utvald h2 a{color:#fff}
.artikel .utvald p,.artikel .utvald .meta{color:var(--natt-mut)}
.artikel .utvald .ah-x::before{background:rgba(255,255,255,.14);color:#fff}
@media (min-width:760px){.artikel .artiklar{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.artikel .artiklar{grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion:reduce){.artikel .kort,.artikel .utvald{transition:none}}
@media print{.topp,.mobilmeny,footer,.avslut,.artikel .cta,.artikel .toc{display:none}body{background:#fff;color:#000}}

/* tryckytor ≥44 (svep 27a85e1) */
.artikel .brod a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 6px}
.artikel a[href="index.html"]{display:inline-flex;align-items:center;min-height:44px}