/* klarning.no — stilarket, tredje utgave (2026-10-07).
 *
 * Appens formspråk, løftet med grep fra referansene brukeren valgte (o-p-e-n.com · sketch.com ·
 * sequel.co), ikke kopiert:
 *   · UTSAGNET: General Sans 400 med ETT kursivt Erode-ord («én dom om *dagen*.») — Sequels grep,
 *     våre låste fonter. Store tekster i normal vekt, aldri fet.
 *   · ET 12-KOLONNERS RUTENETT under alt (.ramme + .rutenett), hårlinjer i tabellene.
 *   · TOPPEN er slank og fast, med en levende linje (Opens klokke) og en pille (Sequel).
 *   · KORTNETTET (Sketch): appens fem papirer, ett per kort, det visuelle ut til kanten.
 *   · FOTO i full bredde med parallakse (rullestyrt CSS) og papirets korn over alt.
 *   · TALLENE lette (General Sans 300) i rader med hårlinjer og små etiketter (Sequel).
 *   · BEVEGELSE i datagrafikken: prikker som faller på plass, streker som tegnes. Sparsomt.
 * Papirene er appens (ios/Klarning/Pigment.swift). Ingen inline-stil: CSP-en er style-src 'self'.
 */

@font-face { font-family: Erode; src: url(/fonter/erode-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Erode; src: url(/fonter/erode-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Erode; src: url(/fonter/erode-400i.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "General Sans"; src: url(/fonter/generalsans-300.woff2) format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url(/fonter/generalsans-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url(/fonter/generalsans-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonter/plexmono-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Old Standard TT"; src: url(/fonter/oldstandard-400i.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --serif: Erode, Georgia, serif;
  --sans: "General Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --tall: "Old Standard TT", Georgia, serif;
  --maks: 1320px;
  --kant: clamp(18px, 4.5vw, 56px);
  --renne: clamp(14px, 1.8vw, 26px);
  --luft: clamp(56px, 9vw, 112px);
  --topph: 68px;
  --les: 42rem;
  --fjaer: cubic-bezier(.2, .8, .2, 1);
}

/* ── papirene ───────────────────────────────────────────────────────────── */
.reg-papir {
  --bg: #f1efeb; --bg2: #ebe7e0; --tekst: #222a3c; --tekst2: #39435c; --dempet: #5a6171; --svak: #656a76;
  --hair: rgba(34, 42, 60, .14); --kort: #e8e4da; --kort2: #e1dccf; --aksent: #4e6b82;
  --fylt: #222a3c; --tom: rgba(34, 42, 60, .13); --varm: #b4572f; --kald: #4f6f94; --sol: #d9b85f;
}
.reg-blekk {
  --bg: #283149; --bg2: #1d2433; --tekst: #eeeae0; --tekst2: #c7ccd6; --dempet: #a8b0c0; --svak: #8a93a6;
  --hair: rgba(238, 234, 224, .14); --kort: #2b3550; --kort2: #323d5a; --aksent: #92acc1;
  --fylt: #eeeae0; --tom: rgba(238, 234, 224, .16); --varm: #d7826c; --kald: #9bb6d0; --sol: #e3d08f;
}
.reg-lyng {
  --bg: #342239; --bg2: #231726; --tekst: #ece7ee; --tekst2: #d3c9da; --dempet: #b5a9be; --svak: #9a8fa5;
  --hair: rgba(236, 231, 238, .14); --kort: #3a2a40; --kort2: #44334b; --aksent: #a795b5;
  --fylt: #ece7ee; --tom: rgba(236, 231, 238, .16); --varm: #d7826c; --kald: #9bb6d0; --sol: #e3d08f;
}
.reg-terreng {
  --bg: #253537; --bg2: #1c2829; --tekst: #eeeae0; --tekst2: #cdd5d1; --dempet: #a6b5af; --svak: #92a29c;
  --hair: rgba(238, 234, 224, .14); --kort: #2c3f41; --kort2: #34494b; --aksent: #8aa092;
  --fylt: #eeeae0; --tom: rgba(238, 234, 224, .16); --varm: #d7826c; --kald: #9bb6d0; --sol: #e3d08f;
}
.reg-kull {
  --bg: #392f22; --bg2: #221b14; --tekst: #ece6dd; --tekst2: #d8cfc2; --dempet: #b5ab9c; --svak: #978d7f;
  --hair: rgba(236, 230, 221, .14); --kort: #3f3427; --kort2: #483c2e; --aksent: #b3a48b;
  --fylt: #ece6dd; --tom: rgba(236, 230, 221, .16); --varm: #d7826c; --kald: #9bb6d0; --sol: #e3d08f;
}

/* et papir bærer også tekstfargen sin — ellers arver en lys flate forsidens lyse tekst */
.reg-papir, .reg-blekk, .reg-lyng, .reg-terreng, .reg-kull { color: var(--tekst); }

/* ── grunnen ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--tekst);
  font: 400 1.125rem/1.55 var(--serif);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* papirkornet — over alt, svakt, som i appen */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: url(/bilder/korn.png); mix-blend-mode: overlay; opacity: .07;
}
main { display: block; }
body:not(.forside) main { padding-top: var(--topph); }
p { margin: 0 0 .9em; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: var(--svak); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--aksent); outline-offset: 3px; border-radius: 3px; }
img, svg { max-width: 100%; }
.hopp { position: absolute; left: -999px; top: 8px; background: var(--tekst); color: var(--bg); padding: .5rem .8rem; z-index: 99; font-family: var(--sans); }
.hopp:focus { left: 8px; }
.liten { font: 400 .82rem var(--sans); color: var(--dempet); }
.bt { font: 400 .7rem/1.5 var(--mono); color: var(--svak); margin: .8rem 0 0; letter-spacing: .01em; }

.ramme { max-width: var(--maks); margin-inline: auto; padding-inline: var(--kant); }
.rutenett { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--renne); }
@media (max-width: 56rem) { .rutenett > * { grid-column: 1 / -1 !important; } }

/* ── typografien ────────────────────────────────────────────────────────── */
.utsagn {
  font: 400 clamp(2.3rem, 1.45rem + 3.4vw, 4.5rem)/1 var(--sans);
  letter-spacing: -.038em; margin: 0 0 .35em; text-wrap: balance;
}
.utsagn.stor { font-size: clamp(3rem, 1.5rem + 5.8vw, 6.6rem); line-height: .94; letter-spacing: -.048em; }
.utsagn em, .bk-tittel em, .app-tittel em, .fot-utsagn em, .fot-signatur em {
  font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.012em; font-size: 1.07em;
}
.deck { font: italic 400 clamp(1.12rem, 1rem + .5vw, 1.4rem)/1.42 var(--serif); color: var(--dempet); max-width: 31em; margin: 0 0 1.5rem; text-wrap: pretty; }
.etikett {
  display: inline-block; font: 500 .66rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--dempet); border: 1px solid var(--hair); border-radius: 999px; padding: .5em .9em .45em; margin: 0 0 1.2rem;
}
.pille {
  display: inline-flex; align-items: center; gap: .5em; font: 500 .88rem/1 var(--sans); text-decoration: none;
  background: var(--tekst); color: var(--bg); border-radius: 999px; padding: .78rem 1.15rem .74rem; white-space: nowrap;
  transition: transform .4s var(--fjaer), background .3s;
}
.pille span { transition: transform .4s var(--fjaer); }
.pille:hover span { transform: translateX(3px); }
.app-knapp { display: inline-block; line-height: 0; }
.app-knapp img { display: block; }
.handling { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
/* «last ned» med appens ikon: mykere enn Apples merke, som står én gang, nederst på forsiden */
.last-ned { display: inline-flex; align-items: center; gap: .8rem; font: 500 1rem/1 var(--sans); color: inherit; text-decoration: none; }
.last-ned .app-ikon { display: block; width: 48px; height: 48px; border-radius: 11px; box-shadow: 0 8px 20px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .18); }
.last-ned span:last-child { transition: transform .4s var(--fjaer); }
.last-ned:hover span:last-child { transform: translateX(3px); }
.pillerad { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.pille.svak { background: transparent; color: var(--tekst); box-shadow: inset 0 0 0 1px var(--hair); }
.naermest { display: flex; align-items: baseline; gap: .7rem; margin: 0 0 1.3rem; }
.naermest .etikett { margin: 0; }
.naermest a { font: 500 1.1rem/1 var(--sans); text-decoration-color: var(--hair); }

/* «det vi har lært»: inngangene på forsiden, nederst på stedene og artiklene, og samlesida */
.laert { padding: clamp(96px, 12vw, 170px) 0 clamp(40px, 6vw, 80px); background: linear-gradient(var(--bg2), var(--bg)); }
.laert-rad { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: clamp(14px, 2vw, 22px); }
.laert-kort {
  display: flex; flex-direction: column; gap: .7rem; padding: clamp(22px, 3vw, 34px); border-radius: 26px; text-decoration: none; color: var(--tekst);
  background: linear-gradient(color-mix(in srgb, var(--tekst) 4%, transparent), color-mix(in srgb, var(--tekst) 8%, transparent));
  box-shadow: inset 0 0 0 1px var(--hair); transition: transform .5s var(--fjaer), box-shadow .4s;
}
.laert-kort:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tekst) 30%, transparent); }
.laert-kort .etikett { align-self: flex-start; margin: 0; }
.laert-kort h3 { font: 400 clamp(1.45rem, 1.2rem + .9vw, 1.9rem)/1.08 var(--sans); letter-spacing: -.03em; margin: .3rem 0 0; text-wrap: balance; }
.laert-svar { font: 400 1.02rem/1.5 var(--serif); color: var(--tekst2); margin: 0; }
.laert-her { font: italic 400 .98rem/1.45 var(--serif); color: var(--dempet); margin: 0; }
.laert-les { margin-top: auto; padding-top: .6rem; font: 500 .9rem/1 var(--sans); }
.laert-les span { display: inline-block; transition: transform .4s var(--fjaer); }
.laert-kort:hover .laert-les span { transform: translateX(3px); }
.les-mer { margin-top: var(--luft); max-width: none !important; }
.artikkel h2.gruppe { font: 500 .66rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--dempet); margin: var(--luft) 0 1.1rem; }
.les-mer .pille { margin-top: 1.2rem; }
.laert-liste { display: grid; gap: clamp(14px, 2vw, 22px); margin-top: clamp(28px, 4vw, 48px); max-width: 62rem !important; }
.laer-steder { margin-top: var(--luft); max-width: 62rem !important; }
.laer-steder-tekst { color: var(--tekst2); margin: 0 0 1.2rem; }

/* rangeringen: plass · sted · merke · tall · dato. Merket er SVG med fast forhold (prikken holder seg rund) */
.rangering { list-style: none; padding: 0; margin: 1.5rem 0 .4rem; }
.rangering li { display: grid; grid-template-columns: 1.6rem minmax(8rem, 13rem) minmax(0, 1fr) 4.6rem 5.4rem; align-items: center; gap: .9rem; padding: .6rem 0; border-top: 1px solid var(--hair); font: 400 .98rem/1.25 var(--sans); }
.rangering li:last-child { border-bottom: 1px solid var(--hair); }
.r-nr { font: 400 .78rem var(--mono); color: var(--svak); }
.r-sted a { text-decoration-color: var(--hair); }
.r-merke { display: block; width: 100%; height: auto; overflow: visible; }
.r-spor { fill: var(--hair); }
.r-fyll, .r-prikk { fill: currentColor; }
.r-linje { stroke: var(--hair); stroke-width: 1.5; }
.r-tall { text-align: right; font-variant-numeric: tabular-nums; }
.r-dato { font: 400 .78rem var(--mono); color: var(--dempet); text-align: right; }
@media (max-width: 40rem) {
  .rangering li { grid-template-columns: 1.3rem minmax(0, 1fr) auto; row-gap: .35rem; }
  .r-merke { grid-column: 2 / -1; grid-row: 2; }
  .r-dato { grid-column: 2 / -1; text-align: left; }
}

/* ── toppen: ordmerket til venstre, tid og sol til høyre — ingenting annet ─── */
.topp {
  --tt: #eeeae0; --tbg: 29, 36, 51;
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--topph);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 var(--kant); color: var(--tt); font-family: var(--sans);
  transition: background .5s, color .5s, border-color .5s; border-bottom: 1px solid transparent;
}
.topp[data-under="papir"] { --tt: #222a3c; --tbg: 241, 239, 235; }
.topp[data-under="blekk"] { --tbg: 40, 49, 73; }
.topp[data-under="terreng"] { --tbg: 37, 53, 55; }
.topp[data-under="lyng"] { --tbg: 52, 34, 57; }
.topp[data-under="kull"] { --tbg: 57, 47, 34; }
.topp.rullet { background: rgba(var(--tbg), .74); -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px); border-bottom-color: rgba(127, 127, 127, .12); }
.ordmerke { font-weight: 500; font-size: .76rem; letter-spacing: .38em; text-transform: uppercase; text-decoration: none; }
.ordmerke span { display: inline-block; }
.topp-live { margin: 0; font: 400 .74rem/1 var(--mono); letter-spacing: .03em; display: flex; gap: .9em; opacity: .86; cursor: default; }
.topp-live span + span::before { content: "·"; margin-right: .9em; opacity: .6; }
.topp-live .topp-tid[hidden] { display: none; }
@media (max-width: 30rem) { .topp-live .topp-sol { display: none; } }

.foreldet:not([hidden]) { position: fixed; top: var(--topph); inset-inline: 0; z-index: 49; margin: 0; padding: .7rem var(--kant); background: #d7826c; color: #222a3c; font: 500 .85rem/1.4 var(--sans); text-align: center; }

/* ── foto: full bredde, parallakse (side.js), korn ──────────────────────── */
.foto { position: absolute; inset: 0; z-index: -1; margin: 0; overflow: hidden; }
.foto img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; }
.foto::after { content: ""; position: absolute; inset: 0; }

/* ── helten ─────────────────────────────────────────────────────────────── */
.helt {
  --bg: #1d2433; --tekst: #f2eee6; --dempet: #ddd7cb; --svak: #bdb6a9; --hair: rgba(242, 238, 230, .2);
  position: relative; isolation: isolate; overflow: hidden; color: var(--tekst);
  min-height: max(680px, 100svh); display: flex; align-items: flex-end;
}
.helt .foto img { object-position: 50% 46%; }
.helt .foto::after { background:
  linear-gradient(90deg, rgba(12, 15, 22, .62) 0%, rgba(12, 15, 22, .28) 42%, rgba(12, 15, 22, 0) 66%),
  linear-gradient(180deg, rgba(12, 15, 22, .4) 0%, rgba(12, 15, 22, 0) 22%, rgba(12, 15, 22, 0) 62%, rgba(18, 22, 32, .7) 100%); }
.helt-innhold { width: 100%; padding-top: 140px; padding-bottom: clamp(44px, 7vw, 104px); align-items: end; row-gap: 40px; }
.helt-tekst { grid-column: 1 / span 7; will-change: transform, opacity; }
.helt-tekst .deck { color: var(--dempet); }
.helt-eks { grid-column: 9 / span 4; justify-self: end; width: min(340px, 100%); will-change: transform; }
.helt-eks .bt { color: var(--svak); text-align: center; }

/* ── utsnittet av appens front ──────────────────────────────────────────── */
.eksemplar {
  margin: 0; background: #f1efeb; color: #222a3c; text-align: center;
  border-radius: 36px; padding: 30px 24px 36px; width: 100%;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .32), 0 2px 0 rgba(255, 255, 255, .5) inset;
}
.eksemplar p { margin: 0; }
.eks-sted { font: 500 .72rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; margin-bottom: 1.1rem !important; }
.eks-dag { font: 400 1.22rem/1.2 var(--serif); }
.eks-dag span { display: block; font: 400 .7rem var(--mono); color: #656a76; letter-spacing: .06em; margin-top: .2rem; }
/* Heltallet er appens tegning (`Heltall`, HjemForside.swift), ikke en tolkning: ↑ 30 · høy 155 (tracking −15,5) ·
   ° 97 · ↓ 14 · lav 39 (−3,9) · ° 24, og ↓lav flyttet (15, −34) inn under gradtegnet. Alt under er de punktene
   delt på sin egen størrelse. Størrelsen følger kortet slik den følger skjermen i appen: 155 av 393 pt (kortets bredde, med polstringen). */
.eksemplar { container-type: inline-size; }   /* NB: kortet får da ingen innholdsbredde — gi det alltid en bredde (et auto-spor klapper det til polstringen) */
.eks-tall { font: italic 400 7rem/1 var(--tall); font-size: calc(39.4cqi + 18px); color: #c36a53; margin: 1.3rem 0 1.1rem !important; display: flex; justify-content: center; align-items: flex-start; }
.eks-tall span { line-height: 1; }
.eks-pil { font-size: .194em; position: relative; top: .867em; margin-right: .133em; }
.eks-hoy { letter-spacing: -.1em; }
.eks-grader { display: flex; flex-direction: column; align-items: flex-start; position: relative; top: .013em; }
.eks-grader > .grad { font-size: .626em; }
.eks-lav { display: flex; align-items: flex-start; font-size: .252em; color: #6281a2; position: relative; left: .385em; top: -.872em; }
.eks-lav .pil { font-size: .359em; position: relative; top: .429em; margin-right: .071em; }
.eks-lav .tall { letter-spacing: -.1em; }
.eks-lav .grad { font-size: .615em; }
.eks-dom { font: 400 1.25rem/1.32 var(--serif); text-wrap: balance; }
.eksemplar.natt { background: linear-gradient(#342239, #231726); color: #ece7ee; box-shadow: 0 30px 70px rgba(0, 0, 0, .35); }
.eksemplar.natt .eks-dag span { color: #b5a9be; }
.eksemplar.natt .eks-tall { color: #d7826c; }
.eksemplar.natt .eks-lav { color: #9bb6d0; }

/* ── kortnettet ─────────────────────────────────────────────────────────── */
.bento-seksjon { background: linear-gradient(var(--bg), var(--bg2)); padding: clamp(84px, 10vw, 150px) 0; }
.seksjon-hode { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem 2rem; flex-wrap: wrap; margin-bottom: clamp(26px, 4vw, 46px); }
.seksjon-hode .utsagn { margin: 0; }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--renne); }
.bento-kort {
  position: relative; overflow: hidden; border-radius: 28px; color: var(--tekst);
  background: linear-gradient(var(--bg), var(--bg2)); display: flex; flex-direction: column; min-height: 440px;
}
.bento-kort.reg-papir { background: linear-gradient(#e2ddd1, #d6d0c2); }
.bk-a { grid-column: span 7; min-height: 620px; }
.bk-b { grid-column: span 5; min-height: 620px; }
.bk-c { grid-column: span 7; }
.bk-d { grid-column: span 5; }
.bk-e { grid-column: span 12; }
@media (max-width: 60rem) { .bk-a, .bk-b, .bk-c, .bk-d { grid-column: span 6; } }
@media (max-width: 44rem) { .bento-kort { grid-column: 1 / -1 !important; min-height: 400px; } }
.bk-tekst { padding: clamp(24px, 3vw, 34px) clamp(24px, 3vw, 34px) 0; position: relative; z-index: 1; }
.bk-tittel { font: 400 clamp(1.45rem, 1.2rem + .9vw, 1.9rem)/1.04 var(--sans); letter-spacing: -.03em; margin: 0 0 .5rem; }
.bk-brod { font: 400 1rem/1.45 var(--serif); color: var(--dempet); max-width: 30em; margin: 0; }
.bk-visuell { flex: 1; display: flex; align-items: flex-end; justify-content: center; padding: 26px 24px 0; }
.bk-c .bk-visuell, .bk-d .bk-visuell { align-items: center; padding-bottom: 32px; }
/* skjermene i kortene: en telefonramme der appens innhold ruller (side.js) */
.bento-kort .skjerm-ramme { width: min(300px, 70%); height: clamp(340px, 31vw, 450px); }
.bento-kort .skjerm { will-change: transform; }
/* timeraden panorerer sidelengs mens kortet rulles forbi */
.panorer { width: 100%; overflow: hidden; border-radius: 18px; box-shadow: 0 22px 50px rgba(0, 0, 0, .28); }
.panorer .utsnitt { width: 128%; max-width: none; height: auto; display: block; border-radius: 0; box-shadow: none; will-change: transform; }

/* dag blir natt — sola går ned og papiret blir lyng mens kortet rulles gjennom (side.js: --natt) */
.bk-e { --natt: 0; min-height: clamp(460px, 42vw, 560px); isolation: isolate; background: none; color: #222a3c; transition: color .45s ease; }
.bk-e .bk-brod { color: #5a6171; max-width: 26em; transition: color .45s ease; }
.bk-e.natt { color: #ece7ee; }
.bk-e.natt .bk-brod { color: #b5a9be; }
.bk-e .bk-tekst { max-width: 30rem; padding-top: clamp(30px, 4vw, 48px); }
.bk-e .bk-visuell { position: absolute; inset: 0; z-index: -1; padding: 0; display: block; }
.dagnatt { position: absolute; inset: 0; }
.dn-himmel { position: absolute; inset: 0; background: linear-gradient(#ebe6da, #d8d1c1); }
.dn-himmel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#3a2640, #1f1424); opacity: var(--natt); }
.dn-himmel::before { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 2px; border-radius: 50%; z-index: 1;
  background: #fff; opacity: calc(var(--natt) * 1.4 - .5);
  box-shadow: 14vw 6vw rgba(255,255,255,.8), 22vw 14vw rgba(255,255,255,.5), 31vw 4vw #fff, 38vw 18vw rgba(255,255,255,.6), 46vw 9vw rgba(255,255,255,.9),
    54vw 22vw rgba(255,255,255,.5), 61vw 7vw #fff, 69vw 15vw rgba(255,255,255,.7), 77vw 5vw rgba(255,255,255,.6), 83vw 19vw rgba(255,255,255,.8),
    9vw 24vw rgba(255,255,255,.5), 27vw 26vw rgba(255,255,255,.6), 50vw 29vw rgba(255,255,255,.4), 72vw 27vw rgba(255,255,255,.6); }
.dn-horisont { position: absolute; left: 0; right: 0; top: 74%; height: 1px; background: #222a3c; opacity: .14; transition: background .45s ease; }
.bk-e.natt .dn-horisont { background: #ece7ee; }
.dn-eks { position: absolute; right: clamp(20px, 7%, 120px); bottom: -28px; width: min(300px, 40%); }
.dn-eks .eksemplar { border-radius: 34px 34px 0 0; padding-bottom: 40px; }
.dn-dag { opacity: calc(1 - var(--natt)); }
.dn-natt { opacity: var(--natt); }
@media (max-width: 44rem) { .bk-e { min-height: 600px; } .dn-eks { right: 50%; transform: translateX(50%); width: min(290px, 80%); } .dn-horisont { top: 62%; } }

/* morgenvarselet */
.varsel { width: 100%; }
.varsel-boble {
  background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 22px; padding: 14px 16px 15px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}
.varsel-boble p { margin: 0; }
.vb-topp { display: flex; justify-content: space-between; font: 500 .68rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--dempet); margin-bottom: .7rem !important; }
.vb-app { display: inline-flex; align-items: center; gap: .55em; }
.vb-ikon { display: block; width: 18px; height: 18px; border-radius: 4.5px; }
.vb-tittel { font: 500 .98rem/1.3 var(--sans); }
.vb-tekst { font: 400 1rem/1.4 var(--serif); color: var(--tekst2); }

/* på et lyst kort er varselet lyst, som på en lys låseskjerm */
.reg-papir .varsel-boble { background: rgba(255, 255, 255, .78); border-color: rgba(34, 42, 60, .08); box-shadow: 0 24px 60px rgba(34, 42, 60, .18); }

/* skjermene — ekte opptak av appen, kuttet av kortets underkant */
.skjerm-ramme { overflow: hidden; border-radius: 40px 40px 0 0; box-shadow: 0 30px 70px rgba(0, 0, 0, .26); }
.reg-papir .skjerm-ramme { box-shadow: 0 26px 60px rgba(34, 42, 60, .2); }
.skjerm { display: block; width: 100%; height: auto; }

/* ── båndene: bildet fritt, teksten i himmelen, kortet over nedre kant ─── */
.baand { --overlapp: clamp(96px, 11vw, 170px); background: linear-gradient(var(--bg), var(--bg2)); color: var(--tekst); padding-bottom: clamp(84px, 10vw, 150px); }
.baand-speilet { --overlapp: clamp(56px, 6vw, 90px); }
.baand-bilde {
  --tekst: #f4f0e8; --dempet: #e2dccf; --hair: rgba(244, 240, 232, .3);
  position: relative; isolation: isolate; overflow: hidden; height: clamp(560px, 86vh, 940px); color: var(--tekst);
}
.baand-bilde .foto::after { background:
  linear-gradient(100deg, rgba(12, 15, 22, .5) 0%, rgba(12, 15, 22, .18) 45%, rgba(12, 15, 22, 0) 70%),
  linear-gradient(180deg, rgba(12, 15, 22, .7) 0%, rgba(12, 15, 22, .42) 26%, rgba(12, 15, 22, .1) 48%, rgba(12, 15, 22, 0) 62%, rgba(12, 15, 22, .18) 100%); }
.baand-tittel { position: relative; padding-top: calc(var(--topph) + clamp(36px, 6vw, 90px)); text-shadow: 0 2px 28px rgba(8, 10, 16, .38); }
.baand-tittel > * { max-width: 54rem; }
.baand-tittel .deck { max-width: 36rem; }
.baand-tittel .etikett { border-color: rgba(244, 240, 232, .4); color: var(--dempet); }
.baand-under { position: relative; z-index: 2; margin-top: calc(var(--overlapp) * -1); align-items: start; row-gap: 28px; }
.baand-kort {
  grid-column: 1 / span 7; background: linear-gradient(var(--kort), color-mix(in srgb, var(--kort) 80%, var(--bg2)));
  border: 1px solid var(--hair); border-radius: 28px; padding: clamp(22px, 3vw, 38px); box-shadow: 0 40px 100px rgba(0, 0, 0, .22); will-change: transform;
}
.reg-papir .baand-kort { background: linear-gradient(#f6f4ef, #ece8e0); }
.baand-side { grid-column: 9 / span 4; padding-top: calc(var(--overlapp) + 12px); }
.baand-speilet .baand-kort { grid-column: 6 / span 7; grid-row: 1; }
.baand-speilet .baand-side { grid-column: 1 / span 4; grid-row: 1; }
.side-tekst { font: italic 400 1.1rem/1.5 var(--serif); color: var(--dempet); margin-bottom: 1.4rem; }
@media (max-width: 56rem) {
  .baand-side { padding-top: 0; } .baand-bilde { height: clamp(520px, 78vh, 760px); }
  .baand-speilet .baand-kort, .baand-speilet .baand-side { grid-row: auto; }
}

/* ── pausene: foto, ett utsagn, et glasspanel ───────────────────────────── */
.pause { position: relative; isolation: isolate; overflow: hidden; color: var(--tekst); padding: clamp(110px, 14vw, 210px) 0; }
.pause.morkt .foto::after { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 66%, transparent), color-mix(in srgb, var(--bg2) 90%, transparent)); }
.pause.lys .foto::after { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 30%, transparent), color-mix(in srgb, var(--bg) 72%, transparent)); }
.pause-innhold { align-items: center; row-gap: 40px; }
.pause-tekst { grid-column: 1 / span 5; }
.pause .glass { grid-column: 7 / span 6; }
.glass {
  background: color-mix(in srgb, var(--bg) 64%, transparent); -webkit-backdrop-filter: blur(22px) saturate(130%); backdrop-filter: blur(22px) saturate(130%);
  border: 1px solid var(--hair); border-radius: 26px; padding: clamp(22px, 3vw, 36px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .14);
}
.figurkort { margin: 0; }
.figur-svar { font: 400 1.12rem/1.45 var(--serif); color: var(--tekst2); }
.regioner p { margin: 0 0 .55rem; line-height: 1.7; }
.regioner .region { display: block; font: 500 .62rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--dempet); margin-top: .9rem; }
.regioner p:first-child .region { margin-top: 0; }
.regioner a { margin-right: .75rem; white-space: nowrap; font-size: 1rem; text-decoration-color: var(--hair); }
.sentrert { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sentrert .deck { margin-inline: auto; }
.slutt { padding: clamp(140px, 18vw, 260px) 0; }
.slutt .pris { font: 500 .95rem/1.5 var(--sans); color: var(--tekst); margin: -.6rem 0 0; text-wrap: balance; }

/* ── artiklene (funnet, stedene, personvern) ────────────────────────────── */
.art-helt { position: relative; isolation: isolate; overflow: hidden; color: var(--tekst); margin-top: calc(var(--topph) * -1); padding: calc(var(--topph) + clamp(80px, 12vw, 170px)) 0 clamp(48px, 7vw, 88px); }
.art-helt .foto::after { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 60%, var(--bg) 100%); }
.art-helt-innhold > * { max-width: 56rem; }
/* artikkelen står på rutenettets venstrekant, som overskriften over den — ikke i en midtkolonne */
.artikkel { max-width: var(--maks); margin: 0 auto; padding: 0 var(--kant); }
.artikkel > * { max-width: var(--les); }
.artikkel > .app { max-width: 62rem; }
.art-hode { padding-top: clamp(32px, 7vw, 88px); }
.folio { font: 400 .72rem var(--mono); color: var(--svak); letter-spacing: .02em; margin-bottom: 1.3rem; }
h1 { font: 500 clamp(2.5rem, 1.6rem + 4.2vw, 4.4rem)/1.03 var(--serif); letter-spacing: -.018em; margin: 0 0 .32em; text-wrap: balance; }
h1.utsagn { font: 400 clamp(2.5rem, 1.5rem + 4vw, 5rem)/1 var(--sans); letter-spacing: -.042em; }
.artikkel h2 { font: italic 400 clamp(1.4rem, 1.2rem + .8vw, 1.75rem)/1.2 var(--serif); margin: 0 0 .55em; }
.avsnitt { margin-top: var(--luft); }
.naa { font-size: 1.2rem; color: var(--tekst); border-left: 2px solid var(--varm); padding-left: 1rem; margin-top: 1.4rem; }
.liste { margin: 0 0 1.6rem; }
.liste div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--hair); }
.liste dt { font: 500 .66rem/2.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--dempet); }
.liste dd { margin: 0; font-size: 1.02rem; }
@media (max-width: 34rem) { .liste div { grid-template-columns: 1fr; gap: .2rem; } }
.tabell { width: 100%; border-collapse: collapse; font: 400 .9rem/1.4 var(--sans); margin: 0 0 1.2rem; font-variant-numeric: tabular-nums; }
.tabell caption { text-align: left; font: italic 400 1.05rem var(--serif); color: var(--dempet); padding-bottom: .5rem; }
.tabell th, .tabell td { padding: .55rem .4rem .55rem 0; border-bottom: 1px solid var(--hair); text-align: right; font-weight: 400; }
.tabell th[scope="row"], .tabell thead th:first-child { text-align: left; }
.tabell thead th { color: var(--dempet); font-size: .8rem; }
.lenke { font: 500 .95rem var(--sans); text-decoration: none; border-bottom: 1px solid var(--svak); padding-bottom: 1px; }
.lenke:hover { border-bottom-color: currentColor; }

/* prikkradene */
.prikker { margin: 0; }
.prikk-rad { display: grid; grid-template-columns: 8rem 1fr auto; align-items: center; gap: .9rem; padding: .7rem 0; border-bottom: 1px solid var(--hair); }
.prikk-rad:first-child { border-top: 1px solid var(--hair); }
.prikk-led { font: 400 .9rem/1.2 var(--sans); color: var(--dempet); }
.prikk-rekke { display: flex; gap: clamp(5px, 1.2vw, 9px); }
.p { display: block; width: clamp(11px, 2.6vw, 17px); aspect-ratio: 1; border-radius: 50%; background: var(--tom); }
.p.fylt { background: var(--fylt); }
.prikk-tall { font: 300 1.6rem/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.prikk-tall .av { font: 400 .76rem var(--sans); color: var(--dempet); letter-spacing: 0; }
.prikker figcaption { font: italic 400 1rem/1.45 var(--serif); color: var(--dempet); margin-top: .9rem; }
@media (max-width: 34rem) { .prikk-rad { grid-template-columns: 1fr auto; row-gap: .45rem; } .prikk-led { grid-column: 1 / -1; } }

/* grafene */
.graf { display: block; width: 100%; height: auto; margin: 1rem 0 0; overflow: visible; }
.graf .pr { fill: var(--dempet); }
.graf .pr.varm { fill: var(--varm); }
.graf .snitt { stroke: var(--svak); stroke-width: 1; stroke-dasharray: 3 3; }
.graf .idag { stroke: var(--varm); stroke-width: 1.6; }
.graf .idag-p { fill: var(--varm); }
.graf .akse { stroke: var(--hair); stroke-width: 1; }
.graf .rt { fill: var(--svak); font: 400 10.5px var(--mono); }
.graf .natt { fill: var(--tom); }
.graf .dag { fill: var(--sol); }
.graf .linje { fill: none; stroke: var(--tekst2); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.graf .varm { fill: var(--varm); }
.graf .kald { fill: var(--kald); }
.graf .strek { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* ── stedet: appens kort ────────────────────────────────────────────────── */
.sted { max-width: 68rem; margin: 0 auto; padding: 0 var(--kant); }
.sted-hode { padding-top: clamp(28px, 6vw, 80px); max-width: 46rem; }
.sted-region { margin: 0 0 .8rem; }
.sted-region a { text-decoration: none; }
.sted-region .etikett { margin: 0; }
.sted h1 { font-size: clamp(3.2rem, 1.8rem + 6vw, 6.4rem); line-height: .98; margin-bottom: .15em; }
.sted .deck { margin-bottom: .6rem; }
.sted-nyhet { font: 400 1.15rem/1.4 var(--serif); color: var(--tekst); }
.gruppe { font: 500 .66rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--dempet); margin: var(--luft) 0 1.1rem; }
.kortene { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--renne); }
@media (min-width: 52rem) { .kortene { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kort.bred { grid-column: 1 / -1; } }
.kort { background: linear-gradient(var(--kort), color-mix(in srgb, var(--kort) 70%, var(--bg2))); border-radius: 24px; padding: clamp(22px, 3vw, 32px); }
.sporsmal { font: italic 400 1.38rem/1.2 var(--serif); margin: 0 0 .55rem; }
.kort-svar { font: 400 1.12rem/1.45 var(--serif); color: var(--tekst2); margin: 0; text-wrap: pretty; }
.kort-tillegg { font: 400 1rem/1.45 var(--serif); color: var(--dempet); margin: .6rem 0 0; }
.kort.bred .graf { max-width: 36rem; }
.rader { margin: 1.1rem 0 0; }
.rader div { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: baseline; padding: .55rem 0; border-top: 1px solid var(--hair); }
.rader dt { font: 400 .92rem var(--sans); color: var(--dempet); }
.rader dd { margin: 0; text-align: right; }
.rader .v { font: 300 1.3rem var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rader .s { display: block; font: 400 .7rem var(--mono); color: var(--svak); }
.tom { font-style: italic; color: var(--dempet); }
.naboer ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; max-width: 46rem; }
.naboer li { display: flex; justify-content: space-between; padding: .6rem 0; border-top: 1px solid var(--hair); }
.naboer li span { font: 400 .8rem var(--sans); color: var(--dempet); }

/* /steder */
.stedliste { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 2rem; }
@media (min-width: 40rem) { .stedliste { columns: 3; } }
.stedliste li { break-inside: avoid; display: flex; justify-content: space-between; gap: .8rem; padding: .5rem 0; border-top: 1px solid var(--hair); }
.stedliste span { font: 300 .95rem/1.7 var(--sans); color: var(--dempet); font-variant-numeric: tabular-nums; }
.stedliste span.varm { color: var(--varm); }
.stedliste span.kald { color: var(--kald); }
.steder .region .gruppe { margin-top: 2.8rem; }

/* ── appboksen ──────────────────────────────────────────────────────────── */
.app { margin: var(--luft) 0 0; background: linear-gradient(var(--kort2), var(--kort)); border-radius: 28px; padding: clamp(22px, 4vw, 42px); display: grid; gap: 1.6rem 2.8rem; align-items: center; }
.app.med-eksemplar { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 46rem) { .app.med-eksemplar { grid-template-columns: auto minmax(0, 1fr); } }
.app .eksemplar { border-radius: 30px; width: 280px; max-width: 100%; padding: 24px 20px 30px; box-shadow: 0 18px 40px rgba(0, 0, 0, .2); justify-self: center; }
.app .eks-dom { font-size: 1.1rem; }
.app-tittel { font: 400 clamp(1.7rem, 1.3rem + 1.5vw, 2.5rem)/1.02 var(--sans); letter-spacing: -.035em; margin: 0 0 .6rem; text-wrap: balance; }
.app-brod { color: var(--tekst2); margin: 0 0 1.3rem; max-width: 28em; }


/* ── personvern og hjelp ────────────────────────────────────────────────── */
.enkel section { margin-top: 2.6rem; }
.enkel section:first-child { padding-top: clamp(32px, 7vw, 88px); margin-top: 0; }
.enkel .merke { font: 500 .66rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--dempet); margin-bottom: .7rem; }
.enkel .ingress { font: italic 400 clamp(1.2rem, 1.05rem + .7vw, 1.5rem)/1.35 var(--serif); color: var(--dempet); }
.enkel ul { padding-left: 1.1rem; }

/* ── bunnen · kull ──────────────────────────────────────────────────────── */
.fot {
  --bg: #392f22; --bg2: #221b14; --tekst: #ece6dd; --tekst2: #d8cfc2; --dempet: #b5ab9c; --svak: #978d7f; --hair: rgba(236, 230, 221, .14); --aksent: #b3a48b;
  position: relative; background: linear-gradient(var(--bg), var(--bg2)); color: var(--tekst); padding: clamp(84px, 10vw, 150px) 0 44px;
}
main:not(:has(> .pause:last-child)) + .fot { margin-top: var(--luft); }
.fot-arkiv { align-items: start; row-gap: 1.4rem; }
.fot-utsagn { grid-column: 1 / span 6; font: 400 clamp(1.9rem, 1.3rem + 2.2vw, 3.3rem)/1.02 var(--sans); letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.fot-tekst { grid-column: 8 / span 5; font: 400 1.08rem/1.55 var(--serif); color: var(--tekst2); margin: .3rem 0 0; }
.tallrad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(48px, 6vw, 80px) 0 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.tallrad > div { padding: 24px clamp(14px, 2vw, 28px) 26px; border-left: 1px solid var(--hair); }
.tallrad > div:first-child { border-left: 0; padding-left: 0; }
.tallrad dt .etikett { margin: 0 0 1.6rem; }
.tallrad dd { margin: 0; font: 300 clamp(2.6rem, 1.8rem + 2.6vw, 4.4rem)/1 var(--sans); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.tallrad small { display: block; font: italic 400 .95rem/1.35 var(--serif); letter-spacing: 0; color: var(--dempet); margin-top: .7rem; max-width: 16em; }
@media (max-width: 52rem) { .tallrad { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tallrad > div:nth-child(3) { border-left: 0; padding-left: 0; } .tallrad > div:nth-child(n+3) { border-top: 1px solid var(--hair); } }
.fot-signatur { font: 400 clamp(3rem, .6rem + 7.4vw, 8.6rem)/.92 var(--sans); letter-spacing: -.05em; margin: clamp(56px, 8vw, 110px) 0 clamp(44px, 6vw, 80px); text-wrap: balance; }
.fot-tabell { border-top: 1px solid var(--hair); padding-top: 28px; row-gap: 28px; }
.fot-tabell > div { grid-column: span 3; }
.fot-tabell > .fot-kilder { grid-column: 7 / span 6; }
.fot-tabell .etikett { margin-bottom: 1rem; }
.fot-tabell ul { list-style: none; padding: 0; margin: 0; }
.fot-tabell li { margin: 0 0 .45rem; }
.fot-tabell li a { font: 400 .95rem var(--sans); text-decoration: none; color: var(--tekst2); }
.fot-tabell li a:hover { color: var(--tekst); }
.fot-kilder p:not(.etikett) { font: 400 .95rem/1.5 var(--serif); color: var(--dempet); }
.fot :focus-visible { outline-color: #b3a48b; }

/* ── bevegelse: sparsomt, og bare der det sier noe ──────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* kort og titler avdekkes når de kommer inn i bildet — bare når side.js har satt .bevegelse */
  .bevegelse [data-avdekk] { transition: opacity 1s var(--fjaer), transform 1.15s var(--fjaer); }
  .bevegelse [data-avdekk]:not(.vist) { opacity: 0; transform: translate3d(0, 40px, 0); }
  .bevegelse .baand-kort[data-avdekk] { transition: opacity 1s var(--fjaer); }
  .bevegelse .bento .bento-kort:nth-child(2) { transition-delay: .1s; }
  .bevegelse .bento .bento-kort:nth-child(4) { transition-delay: .1s; }
  .bevegelse .baand-side[data-avdekk] { transition-delay: .15s; }

  /* helten trer fram: bildet fra litt nærmere, teksten og fronten opp */
  .bevegelse .helt .foto { transform: scale(1.07); transition: transform 2.8s cubic-bezier(.2, .7, .2, 1); }
  .bevegelse .helt.inne .foto { transform: none; }
  .bevegelse .helt .helt-tekst > *, .bevegelse .helt .helt-eks > * { transition: opacity 1.1s var(--fjaer), transform 1.2s var(--fjaer); }
  .bevegelse .helt:not(.inne) .helt-tekst > *, .bevegelse .helt:not(.inne) .helt-eks > * { opacity: 0; transform: translate3d(0, 30px, 0); }
  .bevegelse .helt .helt-tekst > :nth-child(2) { transition-delay: .12s; }
  .bevegelse .helt .helt-tekst > :nth-child(3) { transition-delay: .24s; }
  .bevegelse .helt .helt-eks > * { transition-delay: .35s; }

  /* ordmerket klarner opp når sida åpnes — «klarning» */
  .ordmerke span { animation: klarner 1.8s var(--fjaer) .15s both; }
  @keyframes klarner { from { filter: blur(7px); opacity: .15; letter-spacing: .72em; } }

  /* datagrafikken — skjult FØRST når side.js har satt .bevegelse, og bare til figuren er sett */
  .graf .pr, .graf .idag-p, .graf rect { transform-box: fill-box; transform-origin: center; }
  .graf rect.varm { transform-origin: center bottom; }
  .graf rect.kald { transform-origin: center top; }
  .graf .dag { transform-origin: left center; }

  .bevegelse [data-anim="prikker"]:not(.vist) .p.fylt { opacity: 0; transform: scale(.2); }
  .bevegelse [data-anim="prikker"].vist .p.fylt { animation: fyll .55s cubic-bezier(.3, 1.5, .6, 1) both; }
  @keyframes fyll { from { opacity: 0; transform: scale(.2); } }

  .bevegelse [data-anim="dato"]:not(.vist) .pr { opacity: 0; }
  .bevegelse [data-anim="dato"].vist .pr { animation: fall .7s cubic-bezier(.2, .9, .3, 1.15) both; }
  @keyframes fall { from { opacity: 0; transform: translateY(-28px); } }

  .bevegelse [data-anim="trend"]:not(.vist) .pr { opacity: 0; }
  .bevegelse [data-anim="trend"].vist .pr { animation: fram .55s var(--fjaer) both; }
  @keyframes fram { from { opacity: 0; transform: scale(.2); } }

  .bevegelse [data-anim]:not(.vist) .strek { stroke-dashoffset: 1; }
  .bevegelse [data-anim].vist .strek { animation: tegn 1.2s cubic-bezier(.6, 0, .2, 1) both; }
  @keyframes tegn { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

  .bevegelse [data-anim]:not(.vist) .idag-p { opacity: 0; }
  .bevegelse [data-anim].vist .idag-p { animation: puls .9s cubic-bezier(.2, 1.4, .4, 1) both; }
  @keyframes puls { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.8); } }

  .bevegelse [data-anim="mnd"]:not(.vist) rect { transform: scaleY(0); }
  .bevegelse [data-anim="mnd"].vist rect { animation: vokse .7s var(--fjaer) both; }
  @keyframes vokse { from { transform: scaleY(0); } }

  .bevegelse [data-anim="lys"]:not(.vist) .dag { transform: scaleX(0); }
  .bevegelse [data-anim="lys"].vist .dag { animation: feie 1.4s cubic-bezier(.6, 0, .2, 1) both; }
  @keyframes feie { from { transform: scaleX(0); } }

  .bevegelse [data-anim="rangering"]:not(.vist) li { opacity: 0; transform: translateX(-12px); }
  .bevegelse [data-anim="rangering"].vist li { animation: inn .6s var(--fjaer) both; }
  .bevegelse [data-anim="rangering"]:not(.vist) .r-fyll { transform: scaleX(0); }
  .bevegelse [data-anim="rangering"].vist .r-fyll { transform-box: fill-box; transform-origin: left; animation: feie 1.1s cubic-bezier(.6, 0, .2, 1) both; animation-delay: inherit; }
  .bevegelse [data-anim="rangering"]:not(.vist) .r-prikk { opacity: 0; }
  .bevegelse [data-anim="rangering"].vist .r-prikk { animation: fram .7s var(--fjaer) both; animation-delay: inherit; }
  @keyframes inn { from { opacity: 0; transform: translateX(-12px); } }

  .bevegelse [data-anim="tall"]:not(.vist) > div { opacity: 0; transform: translateY(14px); }
  .bevegelse [data-anim="tall"].vist > div { animation: oppover .9s var(--fjaer) both; }
  @keyframes oppover { from { opacity: 0; transform: translateY(14px); } }

  .bevegelse [data-anim="varsel"]:not(.vist) .varsel-boble { opacity: 0; transform: translateY(-26px) scale(.96); }
  .bevegelse [data-anim="varsel"].vist .varsel-boble { animation: varsel 1s cubic-bezier(.2, 1.25, .3, 1) .25s both; }
  @keyframes varsel { from { opacity: 0; transform: translateY(-26px) scale(.96); } }
}