/* ============================================================
   Lise Fløvik — nettsted
   Formspråk: heldekkende fargeflater, luftig typografi, geometriske
   merker. Palett: kornblå fargeflate, marineblå dybde, terrakotta
   aksent, kjølig off-white.
   ============================================================ */

:root {
  /* LYS SIDE, FARGE SOM INNSLAG.
     Kremhvit grunn bærer nesten alt. Salvie er tint og merker, ikke tema.
     Terrakotta er handling. Den mørke flaten er punktum, ikke bakteppe.

     Salvie og terrakotta er komplementære — det er derfor de holder
     hverandre oppe uten å slåss. Alle forhold er målt, se
     verktoy/kontrast.mjs, som leser verdiene rett ut av denne blokka. */
  --light: #F7F5F0;          /* kremhvit — sidens grunn */
  --light-2: #EFEBE3;        /* litt dypere krem */
  --sage: #B3BDAD;           /* salvie — merker og rammer */
  --sage-tint: #DDE3D8;      /* lys salvie — de få fargeflatene */
  --sage-deep: #5A6654;      /* mørk salvie — tekstsikre merker (5,6:1) */
  --deep: #2E332B;           /* mørk skogbrun — den tunge flaten */
  --accent: #A83F26;         /* terrakotta — handling. Moerknet fra #B4462A:
                                som lenketekst paa salvietinten laa den paa
                                4,17:1, altsaa under AA. Naa 4,7:1 der og
                                5,7:1 paa krem. */
  --accent-lift: #E8A184;    /* lys terrakotta — kun på den mørke flaten */
  --text: #2A2A24;           /* varm nesten-sort — 13,2:1 på krem */
  --muted: #5C6157;          /* dempet — 6,0:1 på krem, 5,0:1 på salvietint */
  --hairline: #DFDBD2;

  /* Fargeflatene er nå så lyse at de bærer samme tekst som kremgrunnen.
     Det er hele poenget: ingen egen tekstpalett per flate lenger. */
  --panel: var(--sage-tint);
  --on-panel: var(--text);
  --on-panel-soft: var(--muted);
  --panel-card: #FFFFFF;
  --panel-line: rgba(42,42,36,.18);
  --panel-mid: var(--sage-deep);
  --on-deep-soft: #B9BFB4;   /* dempet tekst på den mørke flaten — 6,9:1 */

  --sans: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 400; font-size: 17px; line-height: 1.6;
  color: var(--text); background: var(--light);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 700px) { .wrap { padding: 0 24px; } }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--deep); color: var(--light); padding: 14px 22px;
  text-decoration: none; font-size: 15px;
}
.skip:focus { left: 0; }

/* ---------- METADATA-STEMMEN ----------
   Stikktitler, kategorier og datoer settes i mono. Det gir siden en annen
   tekstur enn den luftige grotesken, og skiller «merkelapp» tydelig fra
   «tekst» uten å måtte rope med farge eller vekt. Mono er bredere enn
   grotesk, så sperringen er strammere enn den var. */
.label, .row .k, .p-row .when, .p-row .cat, .tl .when,
.field label, .media-note, .hero .role, .navtoggle {
  font-family: var(--mono);
  font-weight: 400;
}

.label {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.on-colour .label { color: var(--on-panel-soft); }

/* ---------- NAV (ligger over fargeflaten) ---------- */
nav.site { position: absolute; top: 0; left: 0; right: 0; z-index: 30; }
nav.site .inner {
  max-width: 1280px; margin: 0 auto; padding: 34px 48px 20px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  border-bottom: 1px solid var(--panel-line);
}
.mark {
  font-size: 17px; font-weight: 400; letter-spacing: .42em;
  text-transform: uppercase; text-decoration: none; color: var(--on-panel);
  white-space: nowrap;
}
.navlinks { display: flex; gap: 40px; list-style: none; align-items: baseline; }

/* Spraakvelgeren staar sist, loesrevet fra sidelenkene med en skillelinje,
   og i mono — den er en bryter, ikke en side. */
.navlinks .lang { padding-left: 24px; border-left: 1px solid var(--panel-line); }
.navlinks .lang a {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
}
.navlinks a {
  font-size: 15px; text-decoration: none; color: var(--on-panel);
  padding-bottom: 3px; border-bottom: 1px solid transparent;
}
.navlinks a:hover { border-bottom-color: var(--panel-line); }
.navlinks a[aria-current="page"] { border-bottom-color: var(--on-panel); }

.navtoggle {
  display: none; background: none; border: 1px solid var(--panel-line);
  border-radius: 100px; padding: 8px 16px; color: var(--on-panel);
  font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; cursor: pointer;
}
/* Sammenklappingen skjer paa 1140px, ikke 900px. Navnetrekket baerer naa en
   grad ("Lise Fløvik, Ph.d.") og navigasjonen har faatt en spraakvelger.
   Maalt med vannrett oppsett: navnetrekk 281px + lenkerad 704px + padding
   96px + mellomrom 24px = 1106px. Brytepunktet ligger over det, med margin
   for at skriftlastingen kan gi litt andre bredder. */
@media (max-width: 1140px) {
  nav.site .inner { padding: 24px 24px 14px; }
  .navtoggle { display: block; }
  .navlinks {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 6px 24px 22px;
    background: var(--light);
    border-bottom: 1px solid var(--panel-line);
    /* Maa nullstilles: baseline hoerer til den vannrette raden, og ville
       her krympe hver rad til tekstbredden, saa skillelinjene ble frynsete. */
    align-items: stretch;
  }
  .navlinks.open { display: flex; }
  .navlinks a { display: block; padding: 13px 0; border-bottom: 1px solid var(--panel-line); }
  /* I nedtrekket er velgeren bare enda en rad — skillelinja hoerer til
     den vannrette raden og ville blitt en loes strek her. */
  .navlinks .lang { padding-left: 0; border-left: 0; }
}
/* Navnetrekket er langt; sperringen gir etter for det pa smale skjermer
   for at det aldri skal kollidere med menyknappen. */
@media (max-width: 560px) { .mark { font-size: 15px; letter-spacing: .22em; } }
@media (max-width: 400px) { .mark { font-size: 14px; letter-spacing: .12em; } }

/* ---------- FARGEFLATE / TOPP ---------- */
.panel { background: var(--panel); color: var(--on-panel); position: relative; }

/* Sidenes aapningsfelt ligger paa kremgrunnen, ikke paa en fargeflate.
   Fargen oeverst kommer fra portrettblokka i full salvie og fra det
   terrakotta merket — innslag, ikke bakteppe. Salvietinten er dermed
   reservert til de faa seksjonene lenger nede som trenger aa skille seg
   ut, og dekker ~15 % av siden i stedet for ~34 %. */
.hero, .page-top { background: var(--light); }
.hero { min-height: 88vh; display: flex; align-items: flex-end; padding: 0 0 84px; }
.hero .wrap {
  width: 100%; display: grid; grid-template-columns: 1.1fr .9fr;
  gap: 56px; align-items: end;
}
.hero .role {
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-panel-soft); margin-bottom: 22px;
}
.hero h1 {
  font-size: clamp(38px, 5.4vw, 70px); font-weight: 300; line-height: 1.02; letter-spacing: -.02em;
}
.hero .claim {
  font-size: 20px; line-height: 1.5; max-width: 40ch; font-weight: 300; margin-top: 26px;
}
.hero .cta-row { margin-top: 34px; }

/* Portrettet fyller den hoyre spalten. Hoyden regnes ut fra plassen mellom
   navigasjonen og bunnen av fargeflaten, saa det aldri kryper opp under
   menyen paa lave skjermer — bildet beskjaeres i stedet for aa flytte noe. */
.hero-portrait {
  justify-self: end; width: 100%; max-width: 400px;
  aspect-ratio: auto; height: min(calc(88vh - 240px), 480px);
}

@media (max-width: 900px) {
  .hero { min-height: auto; padding: 150px 0 72px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .hero-portrait { justify-self: start; max-width: 300px; height: 360px; }
}

/* Kortere topp på undersider */
.page-top { padding: 190px 0 92px; }
.page-top h1 {
  font-size: clamp(34px, 5vw, 62px); font-weight: 300; line-height: 1.05;
  letter-spacing: -.02em; margin: 18px 0 22px; max-width: 20ch;
}
.page-top .lede { font-size: 20px; font-weight: 300; max-width: 56ch; color: var(--on-panel-soft); }
@media (max-width: 900px) { .page-top { padding: 150px 0 68px; } }

/* Roterende merke i skjøten. Er en ekte lenke, ikke pynt — teksten lover
   en handling, og da maa den kunne klikkes og naas med tastatur.
   Den roterende SVG-teksten er skjult for skjermlesere; aria-label paa
   lenken gir det lesbare navnet. */
/* Merket er en handling, saa det baerer handlingsfargen. Terrakotta leser
   bade mot salvietinten over skjoeten (4,2:1) og mot kremgrunnen under
   (5,0:1) — den trenger ingen ring for aa loesne fra bakgrunnen. */
.badge {
  position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%);
  width: 116px; height: 116px; border-radius: 50%; background: var(--accent);
  display: grid; place-items: center; z-index: 5;
  text-decoration: none; color: var(--light);
  transition: background .2s ease;
}
.badge:hover { background: var(--deep); }
.badge svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  animation: spin 18s linear infinite;
}
/* Sperringen er stilt inn slik at teksten fyller 95,6 % av sirkelbanen:
   ringen leser som sammenhengende, men har igjen litt luft som buffer
   dersom skriften faller tilbake til en systemfont for webfonten er lastet. */
.badge text { font-size: 9.4px; letter-spacing: .30em; fill: currentColor; text-transform: uppercase; }
/* Den engelske teksten ("Get in touch") er 30 tegn mot 26 paa norsk og ville
   sprengt banen paa .30em — den ligger alt paa 98,6 % ved .22em. Egen
   sperring, maalt paa samme maate: .20em gir 96,0 %, altsaa samme fylling
   som den norske ringens 95,6 %. */
.badge--en text { letter-spacing: .20em; }
.badge-pil { position: relative; font-size: 19px; line-height: 1; transition: transform .2s ease; }
.badge:hover .badge-pil { transform: translateX(3px); }
/* Moerkt omriss — merket ligger i skjoeten, saa det maa lese bade mot
   salvietinten (9,9:1) og mot kremgrunnen (11,9:1). */
.badge:focus-visible { outline: 2px solid var(--deep); outline-offset: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- SEKSJONER ---------- */
section { padding: 120px 0; }
.section-tight { padding: 92px 0; }
.intro { padding: 190px 0 130px; }
.intro p {
  font-size: clamp(21px, 2.5vw, 33px); line-height: 1.45; font-weight: 300;
  max-width: 62ch; letter-spacing: -.01em;
}
.intro a { text-decoration: underline; text-underline-offset: 5px; }
.rule { width: 92px; height: 2px; background: var(--sage-deep); margin-top: 60px; }

/* Spoersmaalet er det karrierebuen over lander paa, saa det staar for seg
   etter streken i stedet for aa henge som siste setning i et sju linjers
   avsnitt. Maalt i 33px ble hele teksten 7 linjer; delt blir det 5 + 2, og
   spoersmaalet faar den vekten det fortjener. Mindre grad enn buen, saa det
   leser som en konklusjon og ikke som en ny paastand.

   Selektoren maa vaere .intro .intro-sporsmal, ikke bare .intro-sporsmal:
   .intro p over er klasse + element og slaar en ren klasse paa
   spesifisitet, uansett rekkefoelge i fila. */
.intro .intro-sporsmal {
  /* Minimumet er 18px, ikke 19: paa mobil bunner buen ut paa 21px, og 19
     ga bare 2px forskjell — det leser som en renderingsfeil, ikke som et
     valg. 18 gir 14 % mindre, som sammen med streken over er nok til at
     det tolkes som en konklusjon. */
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.5; font-weight: 300; max-width: 52ch;
  margin-top: 34px;
}

h2 { font-weight: 300; font-size: clamp(28px, 3.4vw, 46px); letter-spacing: -.02em; line-height: 1.1; margin-top: 16px; }
h3 { font-weight: 400; letter-spacing: -.01em; }
.prose { max-width: 62ch; }
.prose p { margin-bottom: 24px; font-weight: 300; font-size: 18px; }
.prose p:last-child { margin-bottom: 0; }
.lede { font-size: 20px; font-weight: 300; max-width: 56ch; color: var(--muted); }

/* ---------- KORT PÅ FARGEFLATE ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 74px; align-items: start; }
.c {
  background: var(--panel-card); border: 1px solid var(--panel-line);
  border-radius: 14px; padding: 30px 26px; color: var(--text);
}
.c:nth-child(2) { margin-top: 34px; }
.c:nth-child(3) { margin-top: 12px; }
.c:nth-child(4) { margin-top: 48px; }
.c h3 { font-size: 21px; margin-bottom: 10px; }
.c p { font-size: 15px; color: var(--muted); font-weight: 400; }

/* Forskyvningen over er komponert for FIRE kort. Med tre ga den 0/34/12,
   som leser som tilfeldig rot i stedet for rytme. Tre kort faar sin egen
   jevne trapp. */
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-3 .c:nth-child(2) { margin-top: 26px; }
.cards-3 .c:nth-child(3) { margin-top: 52px; }
@media (max-width: 1000px) { .cards { grid-template-columns: repeat(2, 1fr); } .c { margin-top: 0 !important; } }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }

/* Geometriske merker */
.glyph { display: flex; gap: 7px; margin-bottom: 24px; }
.glyph i { width: 26px; height: 26px; border-radius: 50%; background: var(--panel-mid); display: block; }
.glyph i.a { background: var(--accent); }
.glyph i.half { border-radius: 50% 0 0 50%; }

/* ---------- MØRK FLATE ---------- */
.deep { background: var(--deep); color: #fff; }
.deep .label { color: rgba(255,255,255,.55); }
.deep .lede { color: var(--on-deep-soft); }
.row {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; align-items: center;
  padding: 58px 0; border-bottom: 1px solid rgba(255,255,255,.16);
}
.row:last-child { border-bottom: 0; }
.row .mrk { display: flex; gap: 12px; justify-content: center; }
.row .mrk i { width: 62px; height: 62px; border-radius: 50%; background: #fff; display: block; }
.row .mrk i.a { background: var(--accent-lift); }
.row .mrk i.sq { border-radius: 5px; transform: rotate(45deg); }
.row h3 { font-size: 25px; margin-bottom: 12px; }
.row p { color: var(--on-deep-soft); font-weight: 300; }
.row .k {
  display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.66); margin-bottom: 12px;
}
.row.key .k { color: var(--accent-lift); }
@media (max-width: 900px) { .row { grid-template-columns: 1fr; gap: 26px; padding: 40px 0; } .row .mrk { justify-content: flex-start; } }

/* ---------- KNAPPER ---------- */
.btn {
  display: inline-block; text-decoration: none; font-size: 15px; letter-spacing: .03em;
  padding: 18px 38px; border-radius: 100px; background: var(--deep); color: #fff;
  border: 1px solid var(--deep); cursor: pointer; font-family: inherit;
  transition: transform .18s, opacity .18s, background .18s, color .18s;
}
.btn:hover { transform: translateY(-2px); opacity: .92; }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--deep); color: #fff; }
.btn-light { background: #fff; color: var(--deep); border-color: #fff; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-note { font-size: 15px; color: var(--muted); margin-top: 20px; max-width: 56ch; font-weight: 300; }
.deep .cta-note { color: var(--on-deep-soft); }
.panel .cta-note { color: var(--on-panel-soft); }

.textlink { text-decoration: underline; text-underline-offset: 5px; }
.textlink:hover { color: var(--accent); }

.center { text-align: center; }
.center h2, .center .lede, .center .cta-note { margin-left: auto; margin-right: auto; }
.center .cta-row { justify-content: center; margin-top: 34px; }

/* ---------- LISTER ---------- */
.p-row {
  display: grid; grid-template-columns: 150px 1fr auto; gap: 34px; align-items: baseline;
  padding: 28px 0; border-top: 1px solid var(--hairline); text-decoration: none;
}
.p-row:last-child { border-bottom: 1px solid var(--hairline); }
.p-row .when { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.p-row h3 { font-size: 23px; transition: color .18s; }
a.p-row:hover h3 { color: var(--accent); }
.p-row .cat { font-size: 13px; color: var(--muted); white-space: nowrap; }
@media (max-width: 780px) { .p-row { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- TO KOLONNER ---------- */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- BILDER ----------
   .media er en ramme med LAAST sideforhold. Plassholderteksten ligger som
   et lag UNDER bildet, saa naar et ekte bilde legges inn dekker det bare
   teksten — ingenting i layouten flytter seg.

   Slik legger du inn et bilde (ingen andre endringer noedvendig):

     <figure class="media" style="--ar: 4 / 5; --pos: 50% 30%">
       <p class="media-note">[ Portrett ]</p>
       <img src="bilder/portrett-800.jpg"
            srcset="bilder/portrett-500.jpg 500w, bilder/portrett-800.jpg 800w"
            sizes="(max-width: 900px) 90vw, 400px"
            alt="Lise Fløvik" width="800" height="1000" loading="lazy">
     </figure>

   --ar  styrer sideforholdet (standard 4/5).
   --pos styrer utsnittet — ansikter staar som regel best litt over midten,
         f.eks. 50% 30%. Bildet beskjaeres, det strekkes aldri. */
.media {
  position: relative; overflow: hidden; border-radius: 14px;
  aspect-ratio: var(--ar, 4 / 5);
  background: var(--light-2); border: 1px solid var(--hairline);
}
.media > img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos, 50% 50%);
}
.media-note {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 24px; font-family: var(--mono);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
/* Kantlinjen hoerer til tomtilstanden. Naar et bilde ligger der, skal ikke
   en 1px stripe ramme inn fotografiet. */
.media:has(img) { border-color: transparent; }
/* Moerk variant — brukes til video, der et lyst felt ville blitt et hull. */
.media--dark { background: var(--deep); border-color: transparent; }
.media--dark .media-note { color: rgba(255,255,255,.52); }

/* Tomme rammer fylles med full salvie. Det er her fargen faar vaere sterkest
   paa en ellers lys side — og naar fotografiene kommer, overtar de plassen. */
.media:not(.media--dark) { background: var(--sage); border-color: transparent; }
/* Moerk skogbrun, ikke moerk salvie: paa full salvie ligger sage-deep paa
   3,1:1, altsaa under AA for smaa bokstaver. --deep gir 6,7:1. */
.media-note { color: var(--deep); }

.portrait { width: 100%; max-width: 380px; }

/* ---------- VIDEOKORT ----------
   IKKE I BRUK akkurat naa. LO-foredraget ble tatt ut av forsiden og
   foredragssiden 2026-08-13 fordi det skal plasseres et annet sted senere.
   Reglene staar med vilje — de trengs igjen naar videoen kommer tilbake.
   Slik settes den inn:

     <a class="videocard" href="...">
       <span class="media media--dark videoframe" style="--ar: 16 / 9">
         <span class="media-note">[ plassholder ]</span>
         <span class="play"></span>
         <span class="tag">Bildetekst</span>
       </span>
     </a> */
.videocard { display: block; text-decoration: none; }
.videoframe { display: flex; align-items: flex-end; padding: 26px; }
.play {
  position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 78px; height: 78px; border-radius: 50%; background: var(--accent-lift);
  transition: transform .2s ease;
}
.play::after {
  content: ''; position: absolute; top: 50%; left: 55%; transform: translate(-50%,-50%);
  border-style: solid; border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--deep);
}
.videocard:hover .play { transform: translate(-50%,-50%) scale(1.07); }
.videoframe .tag {
  position: relative; z-index: 2; color: #fff; font-size: 15px;
  text-shadow: 0 1px 12px rgba(42,42,36,.6);
}
@media (prefers-reduced-motion: reduce) { .videocard:hover .play { transform: translate(-50%,-50%); } }

/* ---------- TIDSLINJE ---------- */
.timeline { border-top: 1px solid var(--hairline); margin-top: 20px; }
.tl {
  display: grid; grid-template-columns: 250px 1fr; gap: 44px;
  padding: 34px 0; border-bottom: 1px solid var(--hairline);
}
.tl .when { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tl h3 { font-size: 22px; margin-bottom: 8px; }
.tl p { color: var(--muted); font-weight: 300; }
@media (max-width: 780px) { .tl { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- SKJEMA ---------- */
.form { max-width: 520px; }
.field { margin-bottom: 22px; }
.field label {
  display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 9px;
}
.field input, .field textarea {
  width: 100%; font-family: inherit; font-size: 17px; font-weight: 300; color: var(--text);
  background: transparent; border: 0; border-bottom: 1px solid var(--hairline);
  padding: 12px 2px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); }
.privacy-note { font-size: 15px; color: var(--muted); margin-top: 18px; max-width: 46ch; font-weight: 300; }
.steps { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 34px; margin-top: 22px; }
.steps li { display: flex; gap: 10px; font-size: 16px; font-weight: 300; color: var(--on-panel-soft); }
.steps .n { opacity: .7; }

/* ---------- FOOTER ---------- */
footer.site { background: var(--deep); color: rgba(255,255,255,.72); padding: 60px 0; }
footer.site .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px; font-size: 15px; }
footer.site a { text-decoration: none; }
footer.site a:hover { color: var(--accent-lift); }

/* ---------- SCROLL-AVDEKKING ----------
   Skjules BARE når JavaScript har bekreftet at det kjører (.js-anim settes
   av site.js). Uten skriptet vises alt innhold som normalt — innhold skal
   aldri kunne forsvinne fordi en fil ikke lastet. */
.js-anim .rev { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.js-anim .rev.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .rev { opacity: 1; transform: none; }
  .badge svg { animation: none; }
  .badge:hover .badge-pil { transform: none; }
  html { scroll-behavior: auto; }
}