/* ============================================================
   pengeguide.css — delt stilark for hele nettstedet.

   Erstatter den dupliserte CSS-en som lå inline i forsiden og
   artikkelmalen. Endres en verdi her, endres den begge steder.

   Følger dokumentasjon/responsiv-standard.md:
     breakpoints i rem, clamp() med rem-komponent, svh ikke dvh,
     container queries på gjenbrukte komponenter, 44 px trykkflater.

   Annonseflatene ligger i maler/annonseslot.css og lastes separat.
   Ikke definer .ad-slot-høyder her.

   FARGEPALETTEN ER IKKE AVKLART. Tokenene under er kopiert uendret
   fra de godkjente utkastene. Ikke juster dem uten avklaring.
   ============================================================ */

:root{
  /* ---- palett ----
     Blått er nettstedets farge. Verdiene er de samme som lå i
     [data-tema="blaa"] og ble godkjent på styringsrentesiden.

     Navnene er fra den grønne utgaven og beskriver ROLLEN, ikke fargen:
     --spruce er den mørke flaten, --green er lenkefargen, --rust er
     aksenten. Å døpe dem om ville rørt hver eneste regel i stilarket for
     ingen annen gevinst enn navnet. */
  --bg:#f4f7fa;
  --wash:#e4edf4;
  --ink:#0e1c28;
  --ink-2:#263846;
  --muted:#4a5c6b;
  --rule:#d3dee7;
  --rule-2:#c2d2de;

  /* Den mørke flaten: masthead, tallpanel, knapper. Marineblå. */
  --spruce:#00325a;
  --spruce-2:#0b4a7a;
  --spruce-3:#155e94;
  --on-spruce:#ffffff;
  --on-spruce-dim:#a9c6dd;
  --linje:rgba(255,255,255,.1);        /* kantlinjer på mørk flate */

  /* Aksenten, gyllen.
     --rust brukes på .kicker, som er liten tekst og derfor krever 4,5:1.
     #a86f0e målte 3,95:1 mot bakgrunnen og ble mørknet til #8a5a05.
     --rust-dim brukes bare på mørk flate og på grafens punktmarkør. */
  --rust:#8a5a05;
  --rust-dim:#eaa93f;

  --green:#0b4a7a;                     /* lenkefargen */

  /* Retningsfarger på LYS flate, i tabeller og brødtekst.
     Opp er dyrere for leseren, ned er billigere. */
  --opp:#b3401f;
  --ned:#1c6b52;

  /* Gapfiguren i renteartikkelen. Egne navn fordi de beskriver en rolle i
     figuren, ikke en flate i grensesnittet, men verdiene er hentet rett fra
     paletten så figuren følger med hvis den endres. */
  --fig-anker:#00325a;      /* = --spruce, styringsrenten */
  --fig-nominell:#0b4a7a;   /* = --spruce-2, publisert nominell rente */
  --fig-effektiv:#eaa93f;   /* = --rust-dim, tillegget opp til effektiv */
  --fig-tekst:#0e1c28;      /* = --ink */
  --fig-akse:#4a5c6b;       /* = --muted */
  --fig-flate:#f4f7fa;      /* = --bg, bare delekortet trenger den tegnet */

  /* Retningsfarger på MØRK flate, i tallpanelet. Kan ikke være de samme:
     --ned måler 1,3:1 mot marineblått. Egne verdier, egne navn, og begge
     med i skript/kontrast.mjs så de ikke kan skli. */
  --pil-opp:#f0a97a;
  --pil-ned:#79c9e8;

  /* ---- typografi ----
     Skala med forholdstall 1,25. Ingen størrelse på siden står utenfor den.
     Grunnlinja er 1,25rem = 20 px på desktop, som er nøyaktig det VG, E24 og
     DN bruker på brødtekst (Aftenposten 19 px). Målt med computed values
     12. august 2026, ikke valgt etter smak.
     Trinnene på desktop: 0,8 - 1 - 1,25 - 1,5625 - 1,9531 - 2,4414 - 3,0518.

     Mobilenden bruker forholdstall 1,2 og ikke 1,25. Samme forholdstall i
     begge ender gir enten en h1 på 44 px på en 320 px-skjerm, eller en for
     liten h1 på desktop. Skalaen leseren ser er 1,25 der den ble målt.

     Hver clamp() har rem i midtverdien, og maks er aldri over 2,5x min.
     Ren vw i midten ville brutt zoom og dermed WCAG 1.4.4.
     Mellomleddet er regnet ut så minsteverdien treffer ved 320 px og
     maksverdien ved 1440 px. */
  --tekst-xs:clamp(0.7813rem,0.776rem + 0.027vw,0.8rem);
  --tekst-sm:clamp(0.9375rem,0.92rem + 0.089vw,1rem);
  --tekst-base:clamp(1.125rem,1.089rem + 0.179vw,1.25rem);
  --tekst-lg:clamp(1.35rem,1.289rem + 0.304vw,1.5625rem);
  --tekst-xl:clamp(1.62rem,1.525rem + 0.476vw,1.9531rem);
  --tekst-2xl:clamp(1.944rem,1.802rem + 0.711vw,2.4414rem);
  --tekst-3xl:clamp(2.3328rem,2.127rem + 1.027vw,3.0518rem);

  /* Visningstallet «4,25 %» på styringsrentesiden. Ligger to trinn over
     --tekst-3xl på den samme 1,25-skalaen (3,0518 - 3,8147 - 4,7684).
     Egen token fordi det er et tall som skal leses på avstand, ikke en
     overskrift, men det står på skalaen som alt annet. */
  --tall-stor:clamp(3.3592rem,2.957rem + 2.013vw,4.7684rem);

  /* ---- luft ---- */
  --luft-seksjon:clamp(1.875rem,4vw,3rem);
  --luft-blokk:clamp(1.375rem,3vw,2rem);

  --z-sticky:100;
}

/* ---------- grunnoppsett ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Archivo",system-ui,sans-serif;
  font-variation-settings:"wdth" 100,"wght" 400;
  font-size:var(--tekst-base);line-height:1.5;
  font-variant-numeric:tabular-nums;
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
  /* Lange sammensatte ord er normalt på norsk («tolvmånedersveksten»,
     «forsinkelsesrenter»). Ved 200 % tekststørrelse på 320 px sprenger de
     containeren. Bryt ordet framfor å la siden få vannrett rulling. */
  overflow-wrap:break-word;
}
img,picture,video,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-variation-settings:"wdth" 78,"wght" 750;letter-spacing:-0.018em;
  line-height:1.08;text-wrap:balance}
h1{font-size:var(--tekst-3xl)}
h2{font-size:var(--tekst-2xl)}
h3{font-size:var(--tekst-lg)}
.cond{font-variation-settings:"wdth" 78,"wght" 750;letter-spacing:-0.018em;
  line-height:1.05;text-wrap:balance}
.num{font-variation-settings:"wdth" 92,"wght" 620;letter-spacing:-0.02em}

/* Trygg sone: alt som ligger mot en skjermkant må kompensere for hakk
   og hjørneradius. Krever viewport-fit=cover i viewport-taggen. */
.wrap{
  width:100%;max-width:80rem;margin-inline:auto;
  padding-inline:max(clamp(1rem,4vw,2rem),env(safe-area-inset-left));
}

:focus-visible{outline:2px solid var(--rust);outline-offset:3px}

.hopp-til-innhold{
  position:absolute;left:-9999px;
  background:var(--bg);color:var(--ink);padding:0.75rem 1rem;z-index:calc(var(--z-sticky) + 1);
}
.hopp-til-innhold:focus{left:1rem;top:1rem;position:fixed}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ---------- masthead ---------- */
.mast{background:var(--spruce);color:var(--on-spruce)}
.mast .wrap{display:flex;align-items:center;gap:clamp(0.875rem,3vw,2.75rem);padding-block:1rem;flex-wrap:wrap}
.wordmark{font-variation-settings:"wdth" 72,"wght" 820;
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.375rem);
  letter-spacing:-0.035em;line-height:0.9;white-space:nowrap;
  display:inline-flex;align-items:center;min-block-size:2.75rem}
.wordmark span{color:var(--rust-dim)}
nav.main{margin-left:clamp(0.75rem,2vw,1.75rem);
  display:flex;gap:clamp(0.375rem,1.2vw,1rem);flex-wrap:wrap;
  font-size:var(--tekst-sm);font-variation-settings:"wdth" 88,"wght" 560}
/* 44 px trykkflate på alt som ikke er en inline-lenke i brødtekst. */
/* Målt: «Lån» var 25 px bred og «Bolig» 34 px. Høyden var 44 px, bredden
   ikke. Et menypunkt er ingen inline-lenke i en setning og har ikke
   unntaket i WCAG 2.5.8. */
nav.main a{min-block-size:2.75rem;min-inline-size:2.75rem;
  display:inline-flex;align-items:center;justify-content:center;
  border-bottom:2px solid transparent;
  transition:border-color .18s cubic-bezier(.22,1,.36,1)}
nav.main a:hover,nav.main a:focus-visible{border-bottom-color:var(--rust-dim)}
.searchbtn{display:inline-flex;align-items:center;justify-content:center;gap:0.4375rem;
  min-block-size:2.75rem;min-inline-size:2.75rem;
  background:none;border:1px solid var(--linje);color:var(--on-spruce);
  font:inherit;font-size:var(--tekst-sm);padding-inline:0.8125rem;border-radius:2px;
  cursor:pointer;transition:background .18s}
.searchbtn:hover{background:var(--spruce-2)}

/* ---------- brødsmuler ---------- */
.smuler{border-bottom:1px solid var(--rule);font-size:var(--tekst-xs)}
.smuler .wrap{display:flex;gap:0.5rem;align-items:center;min-block-size:2.75rem;
  color:var(--muted);flex-wrap:wrap}
.smuler a{color:var(--green);font-variation-settings:"wdth" 92,"wght" 560;
  display:inline-flex;align-items:center;min-block-size:2.75rem}
.smuler a:hover{text-decoration:underline}

/* ---------- seksjonsoverskrift ---------- */
/* flex-wrap slipper «Se alle 34 banker» ned på egen linje når raden blir for
   trang. Uten den dyttet lenken forsiden 117 px utenfor ved 200 % tekst. */
.sechead{display:flex;align-items:baseline;gap:1rem;margin:0 0 1.25rem;flex-wrap:wrap}
.sechead h2{font-size:var(--tekst-xl);margin:0;font-variation-settings:"wdth" 76,"wght" 780;
  letter-spacing:-0.015em}
.sechead .line{flex:1;height:1px;background:var(--rule-2)}
.sechead a{font-size:var(--tekst-sm);color:var(--green);
  font-variation-settings:"wdth" 92,"wght" 600;white-space:nowrap;
  display:inline-flex;align-items:center;min-block-size:2.75rem}
.sechead a:hover{text-decoration:underline}

.kicker{display:inline-block;font-size:var(--tekst-xs);letter-spacing:0.07em;
  text-transform:uppercase;font-variation-settings:"wdth" 90,"wght" 700;
  color:var(--rust);margin-bottom:0.75rem}
.tag{font-size:var(--tekst-xs);letter-spacing:0.05em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 660;color:var(--green);
  margin-bottom:0.375rem;display:block}
.dot{width:3px;height:3px;border-radius:50%;background:var(--rule-2);display:inline-block}

figure{margin:0}
figcaption{font-size:var(--tekst-sm);color:var(--muted);margin-top:0.5625rem;line-height:1.45}

.byline{display:flex;flex-wrap:wrap;gap:0.375rem 0.625rem;align-items:center;
  font-size:var(--tekst-sm);color:var(--muted)}
.byline a{color:var(--green);font-variation-settings:"wdth" 96,"wght" 600}
.byline a:hover{text-decoration:underline}
.byline b{font-variation-settings:"wdth" 100,"wght" 600;color:var(--ink-2)}

/* ---------- knapper ---------- */
.knapp,.cta{display:inline-flex;align-items:center;justify-content:center;
  min-block-size:2.75rem;padding-inline:1.25rem;
  background:var(--spruce);color:var(--on-spruce);
  font-size:var(--tekst-sm);font-variation-settings:"wdth" 92,"wght" 640;
  border-radius:2px;transition:background .18s;white-space:nowrap;
  text-align:center;min-width:0}
/* Ved 200 % tekststørrelse på 320 px er «Åpne kalkulatoren» bredere enn
   spalten, og nowrap dyttet hele verktøyboksen 50 px utenfor. Under
   30rem får knappeteksten brekke. */
@media(max-width:29.999rem){
  .knapp,.sechead a{white-space:normal}
}
.knapp:hover,.cta:hover{background:var(--spruce-3)}
.ghost{display:inline-flex;align-items:center;justify-content:center;
  min-block-size:2.75rem;padding-inline:1rem;
  border:1px solid var(--linje);color:var(--on-spruce);
  font-size:var(--tekst-sm);font-variation-settings:"wdth" 92,"wght" 600;
  border-radius:2px;transition:background .18s}
.ghost:hover{background:var(--spruce-2)}

/* ============================================================
   TALLPANEL
   auto-fit + minmax gir seks kolonner på desktop, tre på nettbrett
   og én på mobil uten en eneste breakpoint.
   ============================================================ */
.board{background:var(--spruce-2);color:var(--on-spruce);border-top:1px solid var(--linje)}
.board .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(10.5rem,100%),1fr));gap:0}
/* Malt for: 116 px celle, hvorav 72 px innhold og 44 px luft.
   Luften er strammet inn, tallene er ikke rort. */
.cell{padding:0.75rem 1.25rem 0.6875rem;border-right:1px solid var(--linje);text-align:center}
/* Ingen padding-unntak paa forste celle lenger: asymmetrisk innrykk
   ville dyttet det sentrerte innholdet ut av senter. */
.cell:last-child{border-right:0}
.cell .lab{font-size:var(--tekst-xs);letter-spacing:0.02em;color:var(--on-spruce-dim);
  margin-bottom:0.1875rem;font-variation-settings:"wdth" 92,"wght" 520}
/* Tall skal aldri brytes: «4,25 %» er én verdi, ikke to ord. */
.cell .val{font-size:var(--tekst-xl);line-height:1.1;display:flex;align-items:baseline;
  justify-content:center;gap:0.5rem;flex-wrap:wrap;white-space:nowrap}
.cell .val small{font-size:var(--tekst-sm);font-variation-settings:"wdth" 92,"wght" 600;letter-spacing:0}
.cell .src{font-size:var(--tekst-xs);color:var(--on-spruce-dim);margin-top:0.25rem;opacity:.85}
/* Retningspilene i tallpanelet. Måtte bli tokener: .down sto med en
   hardkodet grønn og var derfor det eneste stedet på nettstedet som IKKE
   fulgte med da paletten ble blå. Målt 1,51:1 mot panelflaten. */
.up{color:var(--pil-opp)}
.down{color:var(--pil-ned)}
.flat{color:var(--on-spruce-dim)}

/* Under 40rem stables cellene, og skillelinjen flytter fra høyre til bunn. */
@media(max-width:39.999rem){
  .cell{padding:0.6875rem 0;border-right:0;border-bottom:1px solid var(--linje)}
}

/* ============================================================
   ARTIKKELKORT — brukes i nyhetslista, i høyrespalten og på temasider.
   Derfor container query, ikke media query.
   Smaleste tilstand står først, uten @container, som fallback.
   ============================================================ */
.liste{container-type:inline-size;container-name:liste}
.row{display:grid;grid-template-columns:minmax(0,1fr);gap:0.25rem;
  padding-block:1.1875rem;border-top:1px solid var(--rule);align-items:start}
.row:first-of-type{border-top:0;padding-top:0}
.row .time{font-size:var(--tekst-sm);color:var(--muted);
  font-variation-settings:"wdth" 92,"wght" 560}
.row h3{margin:0 0 0.3125rem;font-size:var(--tekst-lg);
  font-variation-settings:"wdth" 82,"wght" 700;letter-spacing:-0.012em;line-height:1.18}
.row h3 a{transition:color .16s}
.row h3 a:hover{color:var(--green)}
.row p{margin:0;color:var(--ink-2);font-size:var(--tekst-sm);max-width:72ch}

@container liste (min-width:30rem){
  .row{grid-template-columns:4.625rem minmax(0,1fr);gap:clamp(0.875rem,2vw,1.75rem)}
  .row .time{padding-top:3px}
  /* Bildekolonnen finnes bare naar minst en sak i lista har et toppbilde,
     og da paa ALLE rader. Ellers ville tekstbredden hoppet fra rad til rad.
     Rader uten bilde faar en tom celle, ikke et generisk bilde. */
  .liste--bilder .row{grid-template-columns:4.625rem minmax(0,1fr) 7.5rem}
  /* .row har align-items:start, saa miniatyrbildet la seg i overkant av
     raden. Bare bildet midtstilles; tid og tekst skal fortsatt toppe. */
  .liste--bilder .rad-bilde{align-self:center}
}
.rad-bilde{display:none}
@container liste (min-width:30rem){
  .rad-bilde{display:block}
  .rad-bilde img{width:100%;aspect-ratio:3/2;object-fit:cover;
    border-radius:3px;background:var(--wash)}
}

/* Bakgrunnsstoff under nyhetslista. Bevisst annerledes enn .row: uten
   tidsstempel, med lettere vekt. Leseren skal se at det ikke er dagsnytt. */
.sechead-2{margin-top:2rem}
.bakgrunn{list-style:none;margin:0;padding:0}
.bakgrunn li{padding-block:0.9375rem;border-top:1px solid var(--rule)}
.bakgrunn li:first-child{border-top:0;padding-top:0}
.bakgrunn a{display:block;font-size:var(--tekst-base);
  font-variation-settings:"wdth" 88,"wght" 640;letter-spacing:-0.008em;
  line-height:1.25;color:var(--ink);text-decoration:none;transition:color .16s}
.bakgrunn a:hover{color:var(--green)}
.bakgrunn p{margin:0.25rem 0 0;color:var(--ink-2);font-size:var(--tekst-sm);
  max-width:72ch}

/* ---------- nyhetsoppsett med høyrespalte ---------- */
.newsgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
@media(min-width:80rem){
  .newsgrid{grid-template-columns:minmax(0,1fr) 18.75rem}
}

/* ---------- sammenlign / tabell ---------- */
.compare{background:var(--wash);border-block:1px solid var(--rule);
  padding-block:var(--luft-seksjon)}
.disclosure{font-size:var(--tekst-sm);color:var(--muted);margin:-0.5rem 0 1.125rem;max-width:70ch}
/* Tabellen får rulle i sin egen boks. Alternativet er at hele siden
   får vannrett rulling på mobil, og da er feilen bare flyttet. */
.tabellramme{overflow-x:auto;position:relative}
table.rates{width:100%;border-collapse:collapse;font-size:var(--tekst-sm);
  background:var(--bg);border:1px solid var(--rule);min-width:34rem}
table.rates th{text-align:left;font-size:var(--tekst-xs);letter-spacing:0.03em;
  text-transform:uppercase;color:var(--muted);
  font-variation-settings:"wdth" 92,"wght" 640;padding:0.75rem 1rem;
  border-bottom:1px solid var(--rule-2)}
table.rates td{padding:0.9375rem 1rem;border-top:1px solid var(--rule)}
table.rates tbody tr:first-child td{border-top:0}
table.rates .bank{font-variation-settings:"wdth" 96,"wght" 640}
table.rates .eff{font-variation-settings:"wdth" 92,"wght" 700;font-size:var(--tekst-base)}
.ad-merke{font-size:var(--tekst-xs);letter-spacing:0.05em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--rule-2);padding:2px 6px;border-radius:2px;
  font-variation-settings:"wdth" 92,"wght" 600;white-space:nowrap}

/* ---------- verktøykort ---------- */
.tools{padding-block:var(--luft-seksjon)}
.toolgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));gap:0;
  border-top:1px solid var(--rule-2)}
.tool{padding:1.25rem 1.5rem 1.375rem;border-bottom:1px solid var(--rule);
  border-right:1px solid var(--rule);transition:background .18s}
.tool:hover{background:var(--wash)}
.tool:last-child{border-right:0}
.tool h3{margin:0 0 0.375rem;font-size:var(--tekst-lg);
  font-variation-settings:"wdth" 84,"wght" 700;letter-spacing:-0.01em}
.tool p{margin:0;font-size:var(--tekst-sm);color:var(--muted);line-height:1.45}
.tool .arrow{color:var(--green);font-variation-settings:"wdth" 92,"wght" 700}
@media(max-width:39.999rem){.tool{border-right:0}}

/* ---------- datamodul ---------- */
.datamod{background:var(--spruce);color:var(--on-spruce);padding-block:var(--luft-seksjon)}
.datamod .wrap{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1.5rem,3vw,2.75rem);align-items:center}
@media(min-width:64rem){
  .datamod .wrap{grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr)}
}
.datamod h2{font-size:var(--tekst-2xl);margin:0 0 0.875rem;
  font-variation-settings:"wdth" 76,"wght" 780;letter-spacing:-0.02em;line-height:1.06}
.datamod p{margin:0 0 1.25rem;color:var(--on-spruce-dim);max-width:52ch}

/* ---------- forsidens toppsak ---------- */
.lead{padding-block:var(--luft-seksjon);border-bottom:1px solid var(--rule)}
/* Bare toppsakens egen wrap er todelt. Sto tidligere som «.lead .wrap», som
   også traff raden med de to sakene under og klemte den inn i venstre
   kolonne. Rader og toppsak deler seksjon, ikke rutenett. */
.lead .lead-topp{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem,3vw,2.75rem)}
@media(min-width:64rem){
  .lead .lead-topp{grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);align-items:start}
}
h1.lead-h{font-size:var(--tekst-3xl);margin:0 0 1.125rem}
.standfirst{font-size:var(--tekst-lg);color:var(--ink-2);max-width:60ch;margin:0 0 1.375rem}
.leadimg{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--wash)}

/* ---------- forsidens soner ----------
   Sone 1 er .lead over, pluss raden .toppto under. Sone 2 gjenbruker
   artikkelkortet (.liste--bilder), sone 3 er .bakgrunn i to spalter.
   Ingen sone har overskrift: den som leser en forside ser at det er saker,
   og en «Siste»-tittel over en tom liste er nettopp det vi vil unngå. */
.sone{padding-block:var(--luft-seksjon);border-bottom:1px solid var(--rule)}

/* Artikkelsiden setter «article{max-width:42rem}» for lesbar spaltebredde.
   Saksrader og toppkort er også <article>, og arvet den grensen: radene stoppet
   på 672 px midt i en 1216 px bred liste, med miniatyrbildet klemt inn på
   midten. Målt i nettleser, ikke synlig i koden. */
.row,.toppkort{max-width:none}

/* De to sakene under toppsaken. auto-fit gjør at én sak fyller bredden
   alene, som er tilfellet når vi bare har to saker totalt. */
.toppto{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:clamp(1.25rem,3vw,1.875rem);margin-top:clamp(1.5rem,3vw,2.375rem);
  padding-top:clamp(1.25rem,2.5vw,2rem);border-top:1px solid var(--rule)}
.toppkort img{width:100%;height:auto;background:var(--wash);
  margin-bottom:0.875rem;border-radius:3px}
/* Plassholder for en sak uten motiv, så overskriftene i raden står på linje.
   Samme forhold som bildene: 3:2. Ingen kantlinje, den skal være stille. */
.toppkort-tom{width:100%;aspect-ratio:3/2;background:var(--wash);
  margin-bottom:0.875rem;border-radius:3px}
.toppkort h3{margin:0 0 0.5rem;font-size:var(--tekst-xl);
  font-variation-settings:"wdth" 80,"wght" 760;letter-spacing:-0.018em;
  line-height:1.16}
.toppkort h3 a{color:var(--ink);transition:color .16s}
.toppkort h3 a:hover{color:var(--green)}
.toppkort p{margin:0;color:var(--ink-2);font-size:var(--tekst-sm)}
.toppkort .dato{display:block;margin-top:0.625rem;font-size:var(--tekst-sm);
  color:var(--muted)}

/* Sone 3 i to spalter. Kolonnene brytes på innholdsbredde, ikke på en
   media query, så en kort liste står i én spalte i stedet for å få en
   halvtom kolonne ved siden av seg. */
.bakgrunn--todelt{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(20.625rem,1fr));
  column-gap:clamp(1.5rem,4vw,2.75rem)}
/* .bakgrunn fjerner kantlinjen på første element. I to spalter ville da
   bare venstre kolonne mangle den, og radene så uryddige ut. Her skal alle
   ha den, så begge kolonnetopper er like. */
.bakgrunn--todelt li:first-child{border-top:1px solid var(--rule);
  padding-top:0.9375rem}

/* Annonseflatene mellom sonene. Egen wrap-variant fordi flaten skal ha luft
   over og under uten å arve seksjonens kantlinje. */
.wrap--flate{padding-block:clamp(1.25rem,3vw,1.75rem)}

/* ============================================================
   ARTIKKELSIDE
   ============================================================ */
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,4vw,3.5rem);
  padding-block:clamp(1.5rem,3.5vw,2.75rem)}
@media(min-width:80rem){
  .layout{grid-template-columns:minmax(0,1fr) 18.75rem;align-items:start}
}

/* Artikkelsidene er smalere enn resten av nettstedet, med vilje.
   .wrap er 80rem. Med et 300 px sidefelt og et gap paa 56 px ble
   tekstsporet 924 px bredt, mens article stopper paa 42rem = 672 px.
   Malt: 244 px doedt rom mellom brodtekst og hoyrespalte, der bare
   56 px er selve kolonneavstanden.

   Lesespalta er ikke problemet. 672 px er 59 tegn, og malt mot avisene
   12. august: DN 680 px, VG 580, E24 580, Aftenposten 579. Vaar ligger
   allerede oeverst i det omraadet.

   68,25rem = 42 (tekst) + 3,5 (gap) + 18,75 (sidefelt) + 4 (padding).
   Da er det ingen rest aa fordele, og gapet blir kolonneavstanden.

   Bordsmulen over maa foelge samme bredde, ellers starter den 94 px til
   venstre for artikkelen. Den ligger som .wrap inne i .smuler bare i
   artikkelmalene; paa styringsrentesiden er nestingen motsatt. */
.wrap.layout,
.smuler .wrap{max-width:68.25rem}
article{container-type:inline-size;container-name:artikkel;max-width:42rem}

.ingress{font-size:var(--tekst-lg);color:var(--ink-2);margin:0 0 1.375rem;max-width:36ch;
  font-variation-settings:"wdth" 100,"wght" 430}
@container artikkel (min-width:34rem){.ingress{max-width:52ch}}

/* Oppdateringsblokk på en sak som er innhentet av hendelsene. Står over
   ingressen, og skal leses som redaksjonens stemme i dag, ikke som en del av
   teksten slik den ble publisert. Derfor kantlinjen og den lille versalen,
   ikke bare fet skrift i et vanlig avsnitt. */
.oppdatering{margin:0 0 1.375rem;padding:0.875rem 1.125rem;background:var(--wash);
  border-left:3px solid var(--rust);font-size:var(--tekst-sm);color:var(--ink-2);
  line-height:1.5}
.oppdatering b{font-variation-settings:"wdth" 100,"wght" 650;color:var(--ink)}
.oppdatering a{color:var(--green);text-decoration:underline;
  text-underline-offset:0.15em}

article .byline{padding-block:0.875rem;border-block:1px solid var(--rule)}
article figure{margin-block:var(--luft-blokk)}
/* Ingen påtvunget 3:2 her. Artikkelbildet ER innholdet, og et object-fit:cover
   ville vist et beskåret utsnitt av et pressefoto vi ikke har lov til å endre.
   width/height står på <img>, så nettleseren reserverer riktig boks og vi får
   ingen layoutforskyvning selv om sideforholdet varierer fra bilde til bilde.
   Miniatyrer og lederbildet beholder cover: der er bildet et element i en
   flate, ikke gjengivelsen av materialet. Se dokumentasjon/bildestandard.md. */
article figure img{width:100%;height:auto;background:var(--wash)}

.oppsummert{background:var(--wash);border:1px solid var(--rule);
  padding:clamp(1.125rem,3vw,1.625rem);margin-block:var(--luft-blokk)}
.oppsummert h2{font-size:var(--tekst-sm);letter-spacing:0.06em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 700;margin:0 0 0.875rem;color:var(--muted)}
.oppsummert ul{margin:0;padding-left:1.1rem;display:grid;gap:0.625rem}
/* Grid-elementer har min-width:auto og krymper derfor ikke under sitt
   lengste ord. Ved 200 % tekststørrelse på 320 px stakk lista 192 px
   utenfor. Fikset her, ikke med overflow-x:hidden. */
.oppsummert li{min-width:0}
.oppsummert b{font-variation-settings:"wdth" 100,"wght" 650}
.oppsummert .kilde{color:var(--muted);font-size:var(--tekst-sm)}

.brod>p{margin:0 0 1.35em}
.brod h2{font-size:var(--tekst-xl);margin:2em 0 0.6em;max-width:32ch}
.brod h3{font-size:var(--tekst-lg);margin:1.8em 0 0.5em;max-width:38ch}

/* Gapfiguren. max-width og ikke full spaltebredde: viewBox er 340 enheter,
   og en figur som fylte 672 px ville skalert teksten ned til 7 px på mobil.
   Mellom 288 og 480 px leses minste tekst som 10,6 til 17,6 px. */
.gapfigur,.tidsfigur{display:block;width:100%;max-width:30rem;height:auto;
  margin-inline:auto;font-family:inherit}
.gapfigur-ramme{margin:var(--luft-blokk) 0;padding:1.25rem 0;
  border-block:1px solid var(--rule)}
.gapfigur-ramme figcaption{max-width:60ch;margin-inline:auto}
.brod h2:first-of-type{margin-top:1.4em}
/* Unntaket i standarden: lenker i brødtekst er Inline og trenger
   ikke 44 px høyde. */
/* .cta må unntas sammen med .knapp. Uten den slo denne regelen inn på
   «Prisliste» i rentetabellen og ga lenkefargen på grønn flate: målt
   2,12:1 i grønt tema og 1,42:1 i blått, mot kravet på 4,5:1. */
.brod a:not(.knapp):not(.cta){color:var(--green);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.brod blockquote{margin:1.8em 0;padding:0 0 0 1.2rem;border-left:1px solid var(--rule-2);
  font-size:var(--tekst-lg);color:var(--ink-2);max-width:52ch}
.brod blockquote cite{display:block;margin-top:0.625rem;font-size:var(--tekst-sm);
  font-style:normal;color:var(--muted)}

.tallboks{border:1px solid var(--rule);margin-block:var(--luft-blokk)}
.tallboks h2{font-size:var(--tekst-sm);letter-spacing:0.06em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 700;margin:0;padding:0.875rem 1.125rem;
  background:var(--spruce);color:var(--on-spruce)}
/* Tabeller får rulle i sin egen ramme. Ved 200 % tekststørrelse på 320 px
   stakk tallboksen 192 px utenfor, fordi .verdi har white-space:nowrap og
   tall ikke skal brytes. Rammen løser det uten overflow-x:hidden på siden. */
.tallboks .tabellramme{overflow-x:auto}
.tallboks table{width:100%;border-collapse:collapse;font-size:var(--tekst-sm)}
.tallboks td{padding:0.75rem 1.125rem;border-top:1px solid var(--rule);vertical-align:top}
.tallboks tr:first-child td{border-top:0}
.tallboks .verdi{font-variation-settings:"wdth" 92,"wght" 700;font-size:var(--tekst-base);
  white-space:nowrap;text-align:right}
.tallboks .kilde{color:var(--muted);font-size:var(--tekst-xs);display:block;margin-top:2px}

.verktoy{border:1px solid var(--rule-2);padding:clamp(1.125rem,3vw,1.5rem);
  margin-block:var(--luft-blokk);display:grid;gap:0.875rem}
.verktoy>*{min-width:0}
@container artikkel (min-width:32rem){
  .verktoy{grid-template-columns:1fr auto;align-items:center;gap:1.5rem}
}
.verktoy h3{margin:0 0 0.25rem;font-size:var(--tekst-lg)}
.verktoy p{margin:0;color:var(--muted);font-size:var(--tekst-sm)}

.kilder{margin-block:clamp(1.75rem,4vw,2.5rem) 0;padding-top:1.25rem;
  border-top:1px solid var(--rule-2)}
.kilder h2{font-size:var(--tekst-sm);letter-spacing:0.06em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 700;color:var(--muted);margin:0 0 0.75rem}
.kilder ol,.kilder ul{margin:0;padding-left:1.2rem;display:grid;gap:0.5625rem;font-size:var(--tekst-sm)}
.kilder li{min-width:0}
.kilder a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
.rettelse{margin-top:1.375rem;padding:0.875rem 1rem;background:var(--wash);
  font-size:var(--tekst-sm);color:var(--ink-2)}
.rettelse a{color:var(--green);text-decoration:underline}

/* ---------- høyrespalte ---------- */
aside{display:grid;gap:1.75rem;align-content:start}
.rail-sticky{position:static}
@media(min-width:80rem){
  .rail-sticky{position:sticky;top:1.5rem;align-self:start}
}
/* Er vinduet høyt nok til hele spalten, følger «Mest lest» også med.
   Under 62rem høyde ville bunnen av annonsen blitt permanent kuttet,
   og en annonse teller ikke som visning før halvparten er synlig. */
@media(min-width:80rem) and (min-height:62rem){
  aside{position:sticky;top:1.5rem;align-self:start}
}
.mestlest h2{font-size:var(--tekst-sm);letter-spacing:0.06em;text-transform:uppercase;
  font-variation-settings:"wdth" 92,"wght" 700;color:var(--muted);margin:0 0 0.75rem;
  padding-bottom:0.625rem;border-bottom:1px solid var(--rule-2)}
.mestlest ol{margin:0;padding:0;list-style:none;counter-reset:n}
.mestlest li{counter-increment:n;display:grid;grid-template-columns:1.4rem 1fr;gap:0.625rem;
  padding-block:0.75rem;border-top:1px solid var(--rule)}
.mestlest li:first-child{border-top:0}
.mestlest li::before{content:counter(n);color:var(--rust);
  font-variation-settings:"wdth" 92,"wght" 700;font-size:var(--tekst-sm)}
.mestlest a{font-size:var(--tekst-sm);font-variation-settings:"wdth" 88,"wght" 620;line-height:1.3}
.mestlest a:hover{color:var(--green)}

/* ---------- relaterte ---------- */
.relatert{border-top:1px solid var(--rule-2);padding-block:var(--luft-seksjon)}
.relatert h2{font-size:var(--tekst-lg);margin:0 0 1.125rem}
.relatertgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));gap:0}
.relatertgrid a{padding-block:1.125rem;border-top:1px solid var(--rule)}
@media(min-width:48rem){
  .relatertgrid a{padding:0 1.5rem;border-top:0;border-left:1px solid var(--rule)}
  .relatertgrid a:first-child{padding-left:0;border-left:0}
}
.relatertgrid h3{font-size:var(--tekst-base);margin:0;
  font-variation-settings:"wdth" 84,"wght" 680}
.relatertgrid a:hover h3{color:var(--green)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding-block:var(--luft-seksjon) 2.5rem;
  font-size:var(--tekst-sm)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));gap:2rem 1.75rem}
.fgrid h4{margin:0 0 0.75rem;font-size:var(--tekst-xs);letter-spacing:0.05em;
  text-transform:uppercase;color:var(--muted);font-variation-settings:"wdth" 92,"wght" 660}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:0.5rem}
.fgrid a{display:inline-flex;align-items:center;min-block-size:2.75rem}
.fgrid a:hover{color:var(--green)}

/* Eierskapslinjen står her bevisst. Pengeguide eies av samme selskap som
   driver flere lånetjenester, og det skal stå åpent. Ikke fjern den.
   Adressen skal ikke inn — den er offentlig i Brønnøysundregistrene. */
.eier{margin-top:2.25rem;padding-top:1.375rem;border-top:1px solid var(--rule);
  color:var(--muted);font-size:var(--tekst-xs);max-width:78ch}
.eier b{color:var(--ink-2);font-variation-settings:"wdth" 100,"wght" 620}

/* ---------- animasjon ---------- */
.rise{animation:rise .6s cubic-bezier(.16,1,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Tallpanelceller som er lenker. Styringsrentecellen går til temasiden.
   Hele cellen er klikkflaten, ikke bare tallet. */
.cell-lenke{position:relative;text-decoration:none;color:inherit}
/* Hoverflaten er et innfelt pseudoelement, ikke margin paa selve cellen.
   Med margin ble lenkecellene 8 px lavere enn nabocellene og startet 4 px
   lenger ned, saa etikettene i panelet ikke sto paa linje. Malt 13. august:
   103 px mot 111 px, topp 81 mot 77. */
.cell-lenke::after{
  content:"";position:absolute;inset:0.25rem;border-radius:3px;
  background:transparent;transition:background .18s;pointer-events:none;
}
.cell-lenke:hover::after,.cell-lenke:focus-visible::after{background:var(--spruce-3)}
/* Innholdet skal ligge over hoverflaten. */
.cell-lenke > *{position:relative;z-index:1}
.cell-pil{opacity:0;margin-left:.35em;transition:opacity .18s}
.cell-lenke:hover .cell-pil,.cell-lenke:focus-visible .cell-pil{opacity:1}

/* Skjult for øyet, lest av skjermleser. */
.visuelt-skjult{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Tabeller i brødtekst. Fagartiklene i artikler/*.md lager vanlige
   <table> uten klasse, og de var tidligere helt ustilte. */
.brod .tabellramme{overflow-x:auto;margin-block:var(--luft-blokk)}
.brod table{width:100%;border-collapse:collapse;font-size:var(--tekst-sm);
  background:var(--bg);border:1px solid var(--rule)}
.brod thead th{text-align:left;font-size:var(--tekst-xs);letter-spacing:0.03em;
  text-transform:uppercase;color:var(--muted);
  font-variation-settings:"wdth" 92,"wght" 640;padding:0.75rem 1rem;
  background:var(--wash);border-bottom:1px solid var(--rule-2)}
.brod td{padding:0.75rem 1rem;border-top:1px solid var(--rule)}
.brod tbody tr:first-child td{border-top:0}

/* Lister i brødtekst, blant annet kildelista nederst. */
.brod ul{margin-block:1em;padding-left:1.2rem;display:grid;gap:0.5rem}
.brod li{padding-left:2px;min-width:0}

/* FAQ. Artiklene lager <details> av avsnitt som starter med et spørsmål
   i fet skrift. Stilen lå tidligere bare i side-styringsrenten.css, så
   fagartiklene fikk nettleserens standardtrekant. */
.brod details{background:var(--wash);border:1px solid var(--rule);
  border-radius:4px;margin-bottom:0.625rem}
.brod summary{padding:1rem 1.25rem;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:1rem;align-items:center;
  font-variation-settings:"wdth" 96,"wght" 680;min-block-size:2.75rem}
.brod summary::-webkit-details-marker{display:none}
.brod summary::after{content:"+";font-size:1.4rem;color:var(--rust);
  transition:transform .25s cubic-bezier(.22,1,.36,1)}
.brod details[open] summary::after{transform:rotate(45deg)}
.brod details p{margin:0 1.25rem 1.125rem}

/* Vekselvis bakgrunn på FAQ-en, så det er lett å se hvor ett spørsmål
   slutter og det neste begynner. */
.brod details:nth-of-type(odd){background:var(--wash)}
.brod details:nth-of-type(even){background:var(--bg)}
.brod details[open]{background:var(--wash)}

/* ---------- rettelser etter gjennomgang ---------- */

/* FAQ: spørsmål og svar så like ut. Spørsmålet får nå tydelig mer vekt og
   litt mer størrelse, så hierarkiet er synlig uten å lese. */
.brod summary{font-size:var(--tekst-base);
  font-variation-settings:"wdth" 96,"wght" 720;color:var(--ink)}
.brod details p{font-size:var(--tekst-sm);
  font-variation-settings:"wdth" 100,"wght" 400;color:var(--ink-2)}

/* Hele raden er klikkflate, ikke bare teksten. summary er allerede
   blokknivå, men uten dette strakk ikke flex-innholdet seg helt ut. */
.brod summary{width:100%}

/* Spørsmålsteksten er en naken tekstnode i en flex-boks, og blir dermed et
   anonymt flex-element med min-width:auto. Det kan ikke krympe under sitt
   lengste ord, og overflow-wrap:break-word hjelper ikke, for den påvirker
   ikke min-content-bredden. «anywhere» gjør det. Ved 200 % tekst på 320 px
   stakk spørsmålene 78 px utenfor. Bryter bare når linja faktisk ikke får
   plass, så vanlig lesing ser uendret ut. */
.brod summary,.brod details p{overflow-wrap:anywhere}

/* Tallpanelceller som er lenker: hover-flaten gikk helt inntil kanten.
   Innrykk gir flaten luft mot nabocellen og mot panelkanten. */
/* margin er fjernet, se .cell-lenke::after over. */