/* ============================================================
   Lise Fløvik — nettsted
   Formspråk: heldekkende fargeflater, luftig typografi, geometriske
   merker. Palett: salviehvit grunn, salvie fargeflate, plommekull
   dybde, burgunder aksent.
   ============================================================ */

:root {
  /* LYS SIDE, FARGE SOM INNSLAG.
     Salviehvit grunn bærer nesten alt — salvien ligger som et hint i
     den, og i full styrke på flatene og merkene. Burgunder er handling.
     Plommekullet er punktum, ikke bakteppe.

     Byttet 18. aug (Lise valgte «Salviehvit grunn» av fire komplette
     forslag): krem + salvie + TERRAKOTTA er blitt en gjenkjennelig
     AI-signatur. Burgunderen leser mer litterært, kler forskerrollen,
     og er dessuten mer lesbar overalt — lenkefargen gikk fra 5,7:1 til
     8,0:1 på grunnen. Salvien er beholdt urørt, fordi portrettene er
     tatt i en salviegrønn blazer som matcher den.

     Alle forhold er målt, se verktoy/kontrast.mjs, som leser verdiene
     rett ut av denne blokka og derfor ikke kan bli utdatert. */
  --light: #F3F6F1;          /* salviehvit — sidens grunn */
  --light-2: #E8EDE5;        /* litt dypere salviehvit */
  --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: #33262C;           /* plommekull — den tunge flaten */
  --accent: #7D3145;         /* burgunder — handling. Erstattet terrakotta
                                18. aug: krem+salvie+terrakotta er blitt en
                                gjenkjennelig AI-signatur, og burgunderen
                                leser mer litteraert. Den er dessuten
                                LESBARERE: 8,0:1 paa grunnen og 6,7:1 paa
                                salvietinten, mot terrakottaens 5,7 og 4,7. */
  --accent-lift: #E9A8B6;    /* rosé — kun på den mørke flaten (6,6:1) */
  --text: #2A2427;           /* varm nesten-sort — 14,0:1 på grunnen */
  --muted: #4C4247;          /* dempet — moerknet fra #5C6157 (6,0:1): paa
                                mobil leste vekt-300-tekst i den som blass.
                                Naa 8,0:1 paa grunnen, maalt i kontrast.mjs. */
  --label: #33262C;          /* merkelapper/stikktitler — samme sverte som
                                overskriftene (11,9:1 paa grunnen). Lise meldte to
                                ganger at de leste blast; mono + sperring baerer
                                fortsatt metadata-stemmen alene. */
  --hairline: #D8DED6;

  /* Fargeflatene er nå så lyse at de bærer samme tekst som grunnen.
     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: #CFC7CB;   /* dempet tekst på den mørke flaten — 8,7:1, fulgte med da flaten ble plommekull */

  --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: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--label);
}
.on-colour .label { color: var(--label); }

/* ---- SEKSJONSETIKETTER SOM LENKER (Lise 25. aug) ----
   Etiketten over hver forsideseksjon peker naa til den siden seksjonen
   handler om, slik lenkene i menyen gjoer. Den er ogsaa stoerre: 14px var
   riktig for en ren merkelapp, men for noe man skal treffe med en finger
   er den i minste laget.
   17px, ikke mer: h2-en under ligger paa 28-46px, og etiketten skal
   fortsatt lese som opptakt til overskriften — ikke som en konkurrent.
   Hover-understreken er MENYENS, som Lise ba om. Pila i tillegg, fordi en
   etikett midt paa siden ikke har menyens plassering til aa fortelle at
   den kan trykkes — samme rolle som pila paa kortene. */
.seksjonslenke {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-size: 17px; text-decoration: none;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  width: auto;
}
.seksjonslenke:hover { border-bottom-color: currentColor; }
.seksjonspil { font-size: 15px; }
.js-anim .seksjonslenke { transition: border-color .2s ease; }
.js-anim .seksjonspil { transition: transform .25s cubic-bezier(.22,.9,.3,1); }
.seksjonslenke:hover .seksjonspil,
.seksjonslenke:focus-visible .seksjonspil { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  .js-anim .seksjonspil { transition: none; }
  .seksjonslenke:hover .seksjonspil { transform: none; }
}

/* ---------- NAV (ligger over fargeflaten) ---------- */
/* Menyen foelger med nedover paa alle skjermer (Lise 19. aug — samme
   grep som mobil fikk 18.). Baren maa ha egen bunn siden den svever
   over salvie- og moerkflatene; uten den ville teksten rennet sammen
   med det som ruller under. Heroens 140px toppluft og sidetoppenes
   190px gir allerede klaring, saa komposisjonen flytter seg ikke. */
nav.site { position: fixed; top: 0; left: 0; right: 0; z-index: 30; background: var(--light); }
/* Ankerhopp (#main fra hopp-lenken) maa stoppe UNDER baren. */
html { scroll-padding-top: 96px; }
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: 13px;
  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: 13px; 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. */
/* Re-maalt 18. aug etter «egen forskning»/«my research» i nav-en:
   behovet vokste fra 1106 til 1148px. 1200 gir samme margin som foer. */
@media (max-width: 1200px) {
  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; } }

/* ---------- TALLBANDET (forskningssiden) ----------
   De verifiserte tallene teller seg opp i burgunder naar de rulles inn
   (telleren bor i site.js; uten JS staar sluttverdiene i markupen). */
.tall-band { padding: 64px 0 8px; }
.tall-rad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.tall-n { display: block; font-size: clamp(40px, 5vw, 60px); font-weight: 300;
  letter-spacing: -.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.tall-etikett { display: block; margin-top: 6px; font-family: var(--mono); font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--label); }
.js-anim .tall-rad > .rev:nth-child(2) { transition-delay: .1s; }
.js-anim .tall-rad > .rev:nth-child(3) { transition-delay: .2s; }
@media (max-width: 700px) { .tall-rad { grid-template-columns: 1fr; gap: 28px; } }

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

/* Sidenes aapningsfelt ligger paa grunnen, 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); }
/* Toppluften garanterer klaring til den absolutte nav-en naar innholdet
   er hoeyere enn 88vh (maalt: -1px klaring ved 1280×800 etter at heroen
   fikk tre claim-linjer). Paa hoeye vinduer endrer den ingenting —
   flex-end holder komposisjonen i bunn. */
.hero { min-height: 88vh; display: flex; align-items: flex-end; padding: 140px 0 84px; }
.hero .wrap {
  width: 100%; display: grid; grid-template-columns: 1.1fr .9fr;
  gap: 56px; align-items: end;
}
.hero .role {
  font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--label); margin-bottom: 22px;
}
.hero h1 {
  /* 70px var maks da overskriften var to linjer; «AI og arbeidslivet …»
     trenger tre, og paa 69px ble det fire brukne. 60px setter den i tre. */
  font-size: clamp(36px, 4.5vw, 52px); font-weight: 300; line-height: 1.06; letter-spacing: -.02em;
}
.hero .claim {
  font-size: 20px; line-height: 1.5; max-width: 40ch; font-weight: 300; margin-top: 26px;
}
/* Lise 25. aug: loeftet skal staa paa egen linje — «Men gapet kan lukkes»
   / «— ofte enklere enn mange tror.» Det harde skiftet gjoer nytte saa
   lenge spalten er bred nok til at linjene faktisk blir korte. Under
   620px er den ikke det: da brekker teksten uansett av seg selv, og et
   paatvunget skift i tillegg gir enslige ord paa egen linje. Derfor
   forsvinner det paa smale skjermer. */
.br-vid { display: inline; }
@media (max-width: 620px) { .br-vid { display: none; } }
/* Claimen staar i to avsnitt: problem + loefte, saa hvem jeg er.
   Luften mellom er mindre enn seksjonsluft, stoerre enn linjeskift. */
.hero .claim + .claim { margin-top: 18px; }
.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; }

  /* Menyen foelger med nedover (Lise 18. aug: skal alltid vaere lett aa
     naa). Absolutt posisjon over heroen holdt den bare oeverst paa
     siden. Baren maa ha egen bunn naar den svever over salvie- og
     moerkflatene, ellers renner teksten sammen med det som ruller
     under. Heroens 150px toppluft gir allerede klaring, saa
     komposisjonen flytter seg ikke. */
  /* Baren er fast paa alle bredder (se basisregelen); her er den bare
     lavere, saa ankerhoppet stopper hoyere opp. */
  html { scroll-padding-top: 84px; }
}

/* Kortere topp på undersider */
.page-top { padding: 190px 0 60px; }

/* ---------- SIDEMERKER ----------
   De fire undersidene aapnet med ren tekst, mens forsiden og om-siden
   har portrett. Ikke noe foto kunne fylt plassen uten aa bli pynt —
   men siden HAR et formspraak allerede: glyfene paa kortene, der formen
   betyr noe. Sidemerket er den samme regelen ett nivaa opp: merke,
   saa etikett, saa overskrift, som paa kortene.
   Hvert merke sier noe om sin egen side:
     Forskning · moensteret som ligger i stoeyen
     Foredrag  · én stemme, mange som hoerer
     Bloggen   · notater satt ned med ujevne mellomrom
     Kontakt   · to halvdeler som ennaa ikke har moettes
   Bygget i SVG og ikke som bildefil: de foelger paletten av seg selv,
   veier ingenting, og er skarpe paa alle skjermer. */
/* Merket staar i egen spalte til hoeyre, der portrettene staar paa
   forsiden og om-siden (Lise 19. aug). Griden er om-sidens .topp-split,
   saa alle fem sidene aapner likt.
   Bredden er mindre enn portrettenes 380: et portrett er tett, et merke
   er glissent, og i samme bredde ville geometrien blitt tynn luft i
   stedet for en komposisjon. */
/* IKKE .media: den klassen er en bilderamme — 4:5-format, ramme og
   grunnflate. Et portrett trenger den; en glissen geometri i samme ramme
   leser som en plassholder. Merket skal sveve fritt, slik glyfene
   ellers paa siden gjoer. */
.sidemerke-figur {
  margin: 0; justify-self: start; align-self: center;
  width: 100%; max-width: 300px;
}
.sidemerke { display: block; width: 100%; height: auto; overflow: visible; }
/* Terrakottadelen puster, som merkene ellers paa siden. Resten staar
   stille — beveger alt seg, leser ingenting som bevegelse. */
/* Den rolige driften ligger paa en YTRE gruppe og bruker `translate`,
   mens innfasingen under bruker `transform` paa selve figuren. De to
   egenskapene komponerer fritt, saa driften krasjer ikke med innslaget. */
.js-anim .sidemerke .drift-1 { animation: svev 4.6s ease-in-out infinite alternate; }
.js-anim .sidemerke .drift-2 { animation: svev 5.4s ease-in-out infinite alternate; animation-delay: .5s; }
.js-anim .sidemerke .drift-3 { animation: svev 6.1s ease-in-out infinite alternate; animation-delay: 1s; }

/* ---- INNSLAGET (Lise 19. aug: «mye mer bevegelse naar man ser dem») ----
   Hvert merke spiller sin egen mening naar det rulles inn, ikke bare en
   fade. Alle starter fra .on paa figuren, saa de gaar én gang, i det
   oeyeblikket merket faktisk kommer til syne.
   `both` holder start- og sluttbildet: uten den ville elementene staa
   ferdig tegnet foer animasjonen fikk begynne. */
.js-anim .sidemerke * { transform-box: fill-box; transform-origin: center; }

/* MERK spesifisiteten under: basisreglene skriver «.stoy circle» og
   «.spor circle», altsaa ett ELEMENTLEDD mer enn en ren klasserekke. Og
   `animation`-kortformen nullstiller animation-delay. Trappereglene maa
   derfor ogsaa ha elementleddet («circle.p3»), ellers faar alle prikkene
   forsinkelse 0 og kommer som én blokk — maalt, og det saa riktig ut i
   kildekoden hele veien. */

/* FORSKNING · stoeyen legger seg, streken trekkes, funnene faller paa plass */
@keyframes merke-prikk { from { opacity: 0; transform: scale(.3); } }
@keyframes merke-strek { from { stroke-dashoffset: 102; } to { stroke-dashoffset: 0; } }
@keyframes merke-funn  { from { opacity: 0; transform: scale(0); } 60% { transform: scale(1.35); } to { opacity: 1; transform: scale(1); } }
.js-anim .merke-forskning .strek { stroke-dasharray: 102; }
.js-anim .sidemerke-figur.rev.on .merke-forskning .stoy circle {
  animation: merke-prikk .5s ease both;
}
.js-anim .sidemerke-figur.rev.on .merke-forskning .strek {
  animation: merke-strek .75s cubic-bezier(.5,0,.2,1) .45s both;
}
.js-anim .sidemerke-figur.rev.on .merke-forskning .funn {
  animation: merke-funn .5s cubic-bezier(.3,1.4,.5,1) both;
}
.js-anim .sidemerke-figur.rev.on .merke-forskning .f1 { animation-delay: .55s; }
.js-anim .sidemerke-figur.rev.on .merke-forskning .f2 { animation-delay: .75s; }
.js-anim .sidemerke-figur.rev.on .merke-forskning .f3 { animation-delay: .95s; }

/* FOREDRAG · kilden slaar an, og lyden brer seg utover i tre kast */
@keyframes merke-kilde { from { opacity: 0; transform: scale(0); } 55% { transform: scale(1.3); } to { opacity: 1; transform: scale(1); } }
@keyframes merke-bue   { from { opacity: 0; transform: scale(.2); } }
.js-anim .sidemerke-figur.rev.on .merke-foredrag .kilde {
  animation: merke-kilde .55s cubic-bezier(.3,1.5,.5,1) both;
}
.js-anim .sidemerke-figur.rev.on .merke-foredrag .bue {
  transform-origin: 24px 60px; transform-box: view-box;
  animation: merke-bue .7s cubic-bezier(.2,.8,.3,1) both;
}
.js-anim .sidemerke-figur.rev.on .merke-foredrag .b1 { animation-delay: .3s; }
.js-anim .sidemerke-figur.rev.on .merke-foredrag .b2 { animation-delay: .48s; }
.js-anim .sidemerke-figur.rev.on .merke-foredrag .b3 { animation-delay: .66s; }

/* BLOGGEN · linjene skrives, én etter én, den burgunderfargede sist og saktest */
@keyframes merke-skriv { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.js-anim .merke-blogg .linje { stroke-dasharray: 100; }
.js-anim .sidemerke-figur.rev.on .merke-blogg .linje {
  animation: merke-skriv .5s cubic-bezier(.4,0,.2,1) both;
}
.js-anim .sidemerke-figur.rev.on .merke-blogg .l1 { animation-delay: .1s; }
.js-anim .sidemerke-figur.rev.on .merke-blogg .l2 { animation-delay: .28s; }
.js-anim .sidemerke-figur.rev.on .merke-blogg .l3 { animation-delay: .46s; }
.js-anim .sidemerke-figur.rev.on .merke-blogg .l4 { animation-delay: .68s; animation-duration: .85s; }

/* KONTAKT · to veier tegnes fra hver sin kant, og moetet faller paa plass
   der de krysser. Strekene har ULIK lengde, vekt og farge med vilje: to
   like streker leser som et lukk-kryss naar merket krymper til 128px paa
   mobil. Punktet er stort nok til aa dominere krysset, saa MOETET er
   motivet og ikke symbolet.
   Lengdene er 104 og 95 enheter; 118 i dasharray dekker begge med margin. */
@keyframes merke-vei { from { stroke-dashoffset: 118; } to { stroke-dashoffset: 0; } }
.js-anim .merke-kontakt .vei-a,
.js-anim .merke-kontakt .vei-b { stroke-dasharray: 118; }
.js-anim .sidemerke-figur.rev.on .merke-kontakt .vei-a {
  animation: merke-vei .62s cubic-bezier(.4,0,.2,1) both;
}
.js-anim .sidemerke-figur.rev.on .merke-kontakt .vei-b {
  animation: merke-vei .62s cubic-bezier(.4,0,.2,1) .2s both;
}
/* Punktet kommer SIST, etter at begge veiene er tegnet ferdig — ellers
   ligger moetet der foer noen har kommet fram. merke-funn er samme
   overskytende pop som funnene paa forskningsmerket bruker. */
.js-anim .sidemerke-figur.rev.on .merke-kontakt .krysspunkt {
  animation: merke-funn .5s cubic-bezier(.3,1.4,.5,1) .8s both;
}
.js-anim .sidemerke-figur.rev.on .merke-forskning circle.p1 { animation-delay: 0.00s; }
.js-anim .sidemerke-figur.rev.on .merke-forskning circle.p2 { animation-delay: 0.04s; }
.js-anim .sidemerke-figur.rev.on .merke-forskning circle.p3 { animation-delay: 0.08s; }
.js-anim .sidemerke-figur.rev.on .merke-forskning circle.p4 { animation-delay: 0.12s; }
.js-anim .sidemerke-figur.rev.on .merke-forskning circle.p5 { animation-delay: 0.16s; }
.js-anim .sidemerke-figur.rev.on .merke-forskning circle.p6 { animation-delay: 0.20s; }
.js-anim .sidemerke-figur.rev.on .merke-forskning circle.p7 { animation-delay: 0.24s; }
.js-anim .sidemerke-figur.rev.on .merke-forskning circle.p8 { animation-delay: 0.28s; }
.js-anim .sidemerke-figur.rev.on .merke-forskning circle.p9 { animation-delay: 0.32s; }
.js-anim .sidemerke-figur.rev.on .merke-forskning circle.p10 { animation-delay: 0.36s; }
.js-anim .sidemerke-figur.rev.on .merke-forskning circle.p11 { animation-delay: 0.40s; }
.js-anim .sidemerke-figur.rev.on .merke-forskning circle.p12 { animation-delay: 0.44s; }
.js-anim .sidemerke-figur.rev.on .merke-forskning circle.p13 { animation-delay: 0.48s; }
.js-anim .sidemerke-figur.rev.on .merke-forskning circle.p14 { animation-delay: 0.52s; }
.js-anim .sidemerke-figur.rev.on .merke-forskning circle.p15 { animation-delay: 0.56s; }
.js-anim .sidemerke-figur.rev.on .merke-forskning circle.p16 { animation-delay: 0.60s; }
.js-anim .sidemerke-figur.rev.on .merke-forskning circle.p17 { animation-delay: 0.64s; }
.js-anim .sidemerke-figur.rev.on .merke-forskning circle.p18 { animation-delay: 0.68s; }

/* Merket skal komme inn som PORTRETTENE gjoer — samme glid og samme pust
   av skala som .media.rev, saa de fem sidene aapner med én bevegelse.
   Foer dette hadde merket sin egen trinnvise fade per del; den leste som
   en annen effekt enn bildene paa forsiden og om-siden. */
.js-anim .sidemerke-figur.rev { transform: translateY(22px) scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .js-anim .sidemerke *, .js-anim .sidemerke-figur.rev.on .sidemerke * { animation: none; }
  .js-anim .sidemerke .strek, .js-anim .sidemerke .linje,
  .js-anim .sidemerke .vei-a, .js-anim .sidemerke .vei-b { stroke-dasharray: none; }
  .js-anim .sidemerke-figur.rev { transform: none; }
}
/* Samme grad som forsidens h1 (Lise 18. aug: overskriftene skal vaere
   like store overalt). Undersidene laa paa maks 62px mot heroens 52 og
   leste som en annen stoerrelsesfamilie. Maks-bredden foelger med opp
   fra 20ch til 24ch — ved mindre grad blir 20ch smalere i piksler, og
   overskriftene ville faatt flere linjer enn foer. */
.page-top h1 {
  font-size: clamp(36px, 4.5vw, 52px); font-weight: 300; line-height: 1.06;
  letter-spacing: -.02em; margin: 18px 0 22px; max-width: 24ch;
}
/* Samme vektgrep som .lede ellers: h1 beholder 300, ingressen tar 400.
   Denne regelen er egen fordi fargen er en annen paa aapningsfeltene. */
.page-top .lede { font-size: 20px; font-weight: 400; max-width: 56ch; color: var(--on-panel-soft); }
@media (max-width: 900px) { .page-top { padding: 150px 0 48px; } }

/* 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 grunnen under
   (5,0:1) — den trenger ingen ring for aa loesne fra bakgrunnen. */
.badge {
  /* Merket skal ha lik luft over og under seg: maalt ved 1280px var det
     14px over og 166px under med bottom -46. Balansepunktet var -122 ved
     116px; forstoerret til 140px (Lise, 18. aug) flyttes ankeret halve
     veksten ned, saa luften forblir balansert: 78/78. */
  position: absolute; left: 50%; bottom: -134px; transform: translateX(-50%);
  width: 140px; height: 140px; 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: 22px; 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 grunnen (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 {
  /* 33px-taket var fra da buen var sidens eneste store tekstflate;
     Lise ba om et hakk ned 18. aug. Sporsmalet under (maks 24px) beholder
     dermed sin ~14 %-differanse mot buen automatisk. */
  font-size: clamp(20px, 2.2vw, 28px); line-height: 1.5; font-weight: 300;
  max-width: 62ch; letter-spacing: -.01em;
}
/* Ingressen er delt i tre avsnitt, ett per perode i karrieren. 24 px er
   omtrent en halv linjehoyde i denne graden: nok til at periodene leser som
   atskilte, mindre enn en hel linje saa de fortsatt henger sammen som én vei.
   Delingen gjoer dessuten sluttlinja sterkere — "rollene har skiftet" krever
   at rollene faktisk OPPLEVES som skiftende foerst. */
.intro p + p { margin-top: 24px; }
.intro a { text-decoration: underline; text-underline-offset: 5px; }
.rule { width: 92px; height: 2px; background: var(--sage-deep); margin-top: 60px; }
.rule-accent { background: var(--accent); }

/* 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. */
/* Konklusjonen stod midtstilt og mindre fra 18. aug. Lise 25. aug: den
   skal flukte med de andre avsnittene og ha samme grad som dem. Grad,
   bredde og venstrekant er derfor identiske med .intro p — det er
   BURGUNDERSTREKEN over som markerer at buen er slutt, og den gjoer
   jobben alene naar avsnittet ellers oppfoerer seg som naboene.
   Klassen beholdes for luften over; alt annet arves. */
.intro .intro-sporsmal {
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.5; font-weight: 300; max-width: 62ch;
  margin-top: 34px;
}

/* Samme grep i loepende prosa: den siste tanken loeftes ut av veggen med
   tekst og staar for seg etter streken. Om meg var fem avsnitt paa samme
   vekt og samme grad — ingenting fortalte oeyet hvor det skulle stoppe.
   .prose .utdrag er to klasser (0,2,0) og slaar .prose p (0,1,1); det maa
   den, ellers vinner 18px-regelen uansett rekkefoelge i fila. */
.prose .utdrag {
  /* Gulvet maa vaere 20px, ikke 18: brodteksten rundt er 18px, og en clamp
     som bunner ut paa samme tall gjoer utdraget usynlig paa alt smalere enn
     ~1280px. 20 gir 11 % forskjell, som sammen med streken over er nok. */
  font-size: clamp(20px, 1.8vw, 23px);
  line-height: 1.5; font-weight: 300; max-width: 52ch;
  margin-top: 34px; margin-bottom: 0;
}
.prose .rule { margin-top: 44px; }

/* PROSAEN SKAL IKKE VAERE EN TEKSTVEGG (Lise 18. aug: «kun masse tekst
   paa groenn bakgrunn»). Tre grep, alle med sidens egne virkemidler:
   foerste avsnitt loefter seg som en inngang, geometriske merker deler
   fortellingen i kapitler, og avslutningen staar for seg etter streken.
   Ingenting nytt formspraak — bare det siden allerede bruker. */
.prose .inngang { font-size: clamp(20px, 1.9vw, 24px); line-height: 1.5; }
/* Merkene mellom avsnittene: samme geometri som ellers, men mindre — de
   er skilletegn, ikke overskrifter. Egen margin saa de puster likt over
   og under uavhengig av avsnittsmarginen. */
.prose .kapittelmerke { margin: 6px 0 30px; gap: 9px; }
.prose .kapittelmerke i { width: 22px; height: 22px; }
/* Merkene svever, som paa tidslinjen — hvert merke i sin egen takt, og
   hvert skille med sin egen bevegelse, saa siden puster hele veien ned. */
.prose .kapittelmerke i { animation: svev 4.2s ease-in-out infinite alternate; }
.prose .kapittelmerke i:nth-child(2) { animation-duration: 5.1s; animation-delay: .4s; }
.prose .kapittelmerke i:nth-child(3) { animation-duration: 5.8s; animation-delay: .8s; }
.prose .kapittelmerke.side i { animation-name: svev-side; }
.prose .kapittelmerke.pust i { animation-name: pust; }
@media (prefers-reduced-motion: reduce) {
  .prose .kapittelmerke i { animation: none; }
}
/* Forbeholdets sluttreplikk faar burgunder — sidens vink. To klasser
   (0,2,0) slaar .prose p (0,1,1), som alltid. */
.prose .aksent-linje { color: var(--accent); }

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; }
/* Ingressen laa paa vekt 300, samme som h1 og h2. Overskriftene beholder
   300 — det er sidens display-stemme — mens ingressen tar 400, som er
   broedtekstens vekt. Uten det er eneste forskjell mellom overskrift og
   ingress stoerrelsen, og det er derfor flere seksjoner leste flatt. */
.lede { font-size: 20px; font-weight: 400; max-width: 56ch; color: var(--muted); }
/* Ingress rett etter h2 skal ha samme luft overalt — seksjonen
   «Da arbeidslivet flyttet hjem» sto uten (Lises funn 18. aug). */
h2 + .lede { margin-top: 24px; }

/* ---------- KORT PÅ FARGEFLATE ---------- */
/* align-items: stretch, ikke start. Med start fikk hvert kort sin egen
   hoyde etter tekstmengden, saa tre kort med ulik tekstlengde ble tre ulike
   hoyder — det leste som slurv, ikke som rytme. */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 74px; align-items: stretch; }
.c {
  /* Kortet baerer fargen naar det ligger paa grunnen. Hvitt paa grunnen er
     1,09:1 — praktisk talt usynlig som form, bare kantlinja holdt det oppe.
     Det ble slik da "Tre traader" ble flyttet fra salvietint til grunnen i
     omrokeringen; hvitt paa salvie var 1,31:1 og fungerte.
     Salvietint paa grunnen gir 1,20:1, og den salviefargede kantlinja gjoer
     resten. */
  background: var(--sage-tint); border: 1px solid rgba(90,102,84,.45);
  border-radius: 14px; padding: 30px 26px; color: var(--text);
}
/* Forskyvningen 0/34/12/48 px er fjernet. Den var dekorativ asymmetri uten
   mening — tallene fulgte ingen regel — og sammen med ulike korthoyder
   leste den som feiljustering, ikke som bevegelse. Bevegelsen ligger naa i
   den forskjoevne innfasingen i stedet, der den kan bety noe: ett kort om
   gangen, i den rekkefoelgen de skal leses. */
/* Korttittel og broedtekst laa begge paa vekt 400 — eneste forskjell var
   stoerrelse og farge, og det er derfor kortene leste flatt. Skriftfila
   laster 300, 400 og 500, men 500 var ikke i bruk noe sted paa nettstedet.
   Tittelen tar den, og faar samtidig strammere sperring slik store
   overskrifter har. Broedteksten gaar motsatt vei, ned til 300, saa
   avstanden mellom de to nivaaene blir tydelig i vekt og ikke bare i grad. */
/* Ogsaa h2, for kort som baerer en seksjonsoverskrift — "Skriv direkte" paa
   kontaktsiden er semantisk en h2, men skal se ut som en korttittel. Uten
   dette arver den display-graden clamp(28-46px) og vekt 300, og kortet faar
   to ulike overskriftsspraak. */
.c h3, .c h2 { font-size: 22px; font-weight: 500; letter-spacing: -.015em; margin-bottom: 12px; }
.c p { font-size: 16px; color: var(--muted); font-weight: 400; line-height: 1.55; }

/* En ingress inne i et kort maa hente vekten sin tilbake. .c p er klasse +
   element og slaar .lede paa spesifisitet, saa ingressen falt til 300 og
   omgjorde vektkontrasten vi nettopp innfoerte. .c .lede er to klasser og
   vinner. Graden ligger her ogsaa, saa den slipper aa staa som inline-stil
   paa hvert enkelt kort. */
.c .lede { font-size: 18px; font-weight: 400; }

/* Kortet stables som flex-kolonne slik at pila kan skyves til bunnen med
   margin-top: auto. Da staar pilene paa linje paa tvers av kortene selv om
   tekstene er ulike lange — samme justeringstanke som like korthoyder. */
.c { display: flex; flex-direction: column; }
.c-pil {
  margin-top: auto; padding-top: 20px;
  font-size: 19px; line-height: 1; color: var(--sage-deep);
  transition: transform .2s ease, color .2s ease;
}

/* FORMATKORTENE paa foredragssiden: varigheten er metadata, ikke
   broedtekst — den sto begravd i avsnittet og motsa dessuten
   praktisk-teksten lenger nede (30–90 min mot «fra 20 minutter»).
   Mono og sperring som resten av metadata-familien. */
.formatkort .varighet {
  display: block; font-family: var(--mono); font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--label); margin-bottom: 12px;
}
/* Hover ligger allerede paa div.c (loeft, skala, rammefarge) — ingen
   egen regel her, den ville bare konkurrert med den.
   Trinnene i trioen kommer derimot etter hverandre, saa progresjonen
   foredrag → workshop → raadgivning leses som en stige. */
.js-anim .formatkort .c:nth-child(2) { transition-delay: .10s, .10s, 0s, 0s; }
.js-anim .formatkort .c:nth-child(3) { transition-delay: .20s, .20s, 0s, 0s; }

/* Bestillingsdelen henger under formatene i samme seksjon, saa
   boksen maa loesne fra prosaen ved siden av. */
.bestilling { align-items: start; }

/* Paa en fargeflate maa kortet gaa motsatt vei. Ligger det salvietinte
   kortet paa en salvietint seksjon — som "Omtale" og "Temaer" gjoer — blir
   det 1,00:1 og forsvinner helt. Der er hvitt riktig, og det var slik det
   var foer. Regelen er altsaa: kortet baerer farge paa noeytral grunn, og
   er noeytralt paa farget grunn. */
/* Rammene skal synes paa alle kort-bokser (Lises oenske 18. aug):
   panel-linjens 18 % forsvant paa hvitt mot tint. Salvielinje begge steder. */
.panel .c { background: var(--panel-card); border-color: rgba(90,102,84,.35); }

/* Kort som ER lenker faar en hover — de andre skal ikke ha det, for hover
   paa noe uklikkbart lover interaksjon som ikke finnes.
   Loeftet bruker `translate`, ikke `transform`: innfasingen eier allerede
   transform med .8s varighet, og en hover som arver den blir treg som sirup.
   translate er en egen egenskap med egen overgang.
   Selektoren maa ha nok spesifisitet til aa slaa .js-anim .rev, ellers
   forsvinner hover-overgangen i innfasingens. */
.cards a.c {
  text-decoration: none;
  transition: opacity .8s ease, transform .8s ease,
              translate .2s ease, border-color .2s ease;
}
.cards a.c h3 { transition: color .2s ease; }
.cards a.c:hover { translate: 0 -6px; scale: 1.02; border-color: var(--sage-deep); }
.cards a.c:hover h3 { color: var(--accent); }

/* Bevegelse INNE i kortet. Pila glir mot hoeyre og tar aksentfargen; merket
   loefter seg med en liten forsinkelse per prikk, saa det gaar som en boelge
   fra venstre. transform er trygt her — det er barna som flytter seg, ikke
   kortet, saa det kolliderer ikke med innfasingens transform. */
.cards a.c:hover .c-pil { transform: translateX(5px); color: var(--accent); }
.glyph i { transition: transform .25s ease; }
.cards a.c:hover .glyph i { transform: translateY(-3px); }
.cards a.c:hover .glyph i:nth-child(2) { transition-delay: .05s; }
.cards a.c:hover .glyph i:nth-child(3) { transition-delay: .10s; }

/* Lise 18. aug: hover-familien gjelder ALLE flater med samme
   fremvisning — ogsaa kort som ikke er lenker, innleggsradene og
   tallbandet. `translate`/`scale`-egenskapene komponerer fritt. */
.c { transition: translate .25s ease, scale .25s ease, border-color .2s ease, box-shadow .2s ease; }
div.c:hover { translate: 0 -6px; scale: 1.02; border-color: var(--sage-deep); }
div.c:hover .glyph i { transform: translateY(-3px); }
div.c:hover .glyph i:nth-child(2) { transition-delay: .05s; }
div.c:hover .glyph i:nth-child(3) { transition-delay: .10s; }
.tall-rad > div { transition: translate .25s ease, scale .25s ease; }
.tall-rad > div:hover { translate: 0 -5px; scale: 1.04; }

/* 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); }
@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; }
/* Merket er laget for aa staa OEVERST i et kort, saa det har bare luft
   under seg. Naar det staar under en overskrift — som i foredragsdelen —
   klistrer det seg til henne med 0 px. */
h2 + .glyph { margin-top: 30px; }
.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%; }
/* Paa den moerke flaten foelger glyfene moerk-palettens roller: dempet
   lys for noeytrale prikker, rosé for aksenten — burgunderen er
   1,6:1 mot plommekullet og forsvinner, samme regel som knappene
   og merket. */
.deep .glyph i { background: var(--on-deep-soft); }
.deep .glyph i.a { background: var(--accent-lift); }

/* MOBILSIGNATUREN — finnes bare paa smale skjermer.
   Paa desktop baerer portrettet og det burgunderfargede merket fargen
   over folden; paa mobil faller begge under skjermkanten, og toppen ble
   staaende helt salviehvit til man begynte aa rulle (Lise 18. aug: «matt
   og blass»). Denne raden gir samme fargeakkord som resten av siden —
   burgunder, salvie, burgunder — og svever som merkeprikkene, saa det
   er liv i bildet med én gang. Skjult over 700px, der den ville
   konkurrert med portrettet. */
.hero .glyph-mobil { display: none; }
.hero .glyph-mobil i { animation: svev 3.8s ease-in-out infinite alternate; }
.hero .glyph-mobil i:nth-child(2) { animation-duration: 4.6s; animation-delay: .5s; }
.hero .glyph-mobil i:nth-child(3) { animation-duration: 5.2s; animation-delay: .9s; }
@media (max-width: 700px) {
  .hero .glyph-mobil { display: flex; gap: 9px; margin-bottom: 26px; }
  .hero .glyph-mobil i { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .glyph-mobil i { animation: none; }
}

/* ---------- MØRK FLATE ---------- */
.deep { background: var(--deep); color: #fff; }
.deep .label { color: rgba(255,255,255,.82); }
.deep .lede { color: var(--on-deep-soft); }
/* Radene ble tegnet for en moerk flate som ikke finnes lenger — de bor
   utelukkende paa lys grunn (salvietint paa forskningssiden, krem naar
   tidslinjen sebrastripes). Basis er derfor LYS, og salvieflatene
   loefter bare den noeytrale merkeprikken til hvitt: paa tint gir
   salvieprikken 1,00:1 og forsvinner, mens hvitt gir 1,31:1 — samme
   forhold som kortene bruker. */
.row {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; align-items: center;
  padding: 58px 0; border-bottom: 1px solid rgba(42,42,36,.14);
}
.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: var(--sage-tint); display: block; }
.row .mrk i.a { background: var(--accent); }
.row .mrk i.d { background: var(--sage-deep); }
.row .mrk i.sq { border-radius: 5px; transform: rotate(45deg); }
.row h3 { font-size: 25px; margin-bottom: 12px; }
.row p { color: var(--muted); font-weight: 400; }
.row .k {
  display: block; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--label); margin-bottom: 12px;
}
.row.key .k { color: var(--accent); }
/* :not() i stedet for tre gjentatte regler — uten den ville denne
   selektoren (én klasse mer) slaatt aksent- og salviemerkene og gjort
   hele merkeraden hvit. */
.panel .row .mrk i:not(.a):not(.d) { background: #fff; }

/* SEBRA PAA TIDSLINJEN — samme logikk og stil som innleggslisten
   (Lises oenske 18. aug): annenhver periode faar salvieband med tynn
   ramme, resten staar paa grunnen, og hairlinene forsvinner siden to
   skillesystemer paa samme liste er ett for mye. Bandradene loefter
   merkeprikken til hvitt, akkurat som salvieflatene ellers. */
/* 24px, ikke 26: marginen maa matche wrap-paddingen paa mobil (24px),
   ellers stikker bandene utenfor skjermkanten og siden faar vannrett
   rulling. Maalt paa 375px: 26px ga 379px band i et 377px vindu.
   Samme verdi som innleggslisten bruker. */
.tl-sebra .row {
  padding-left: 24px; padding-right: 24px; margin: 0 -24px;
  border-bottom: 0; border-radius: 3px;
}
/* Begge farger skal LESE som bokser (Lise 18. aug) — med ramme bare paa
   salviebandene saa annenhver periode ut som en boks og annenhver som
   loes tekst. Samme ramme paa begge; kremradene faar den litt sterkere
   fordi lys ramme mot krem gir mindre optisk vekt enn mot tinten.
   SALVIE FOERST (19. aug): seksjonen staar paa grunnengrunn, saa en
   boks oeverst var flate-paa-flate og holdt bare paa rammen. Med
   salvie i foerste boks ser man med én gang at dette ER bokser, og
   vekslingen leses fra foerste oeyekast. */
.tl-sebra .row:nth-of-type(odd) {
  background: var(--sage-tint); border: 1px solid rgba(90,102,84,.45);
}
.tl-sebra .row:nth-of-type(even) {
  background: var(--light); border: 1px solid rgba(90,102,84,.42);
}
/* Den noeytrale prikken maa loefte seg fra sin EGEN rad: salvietint mot
   krem er 1,20:1 og forsvant nesten helt (Lises skjermbilde av
   «Klinisk praksis»). Full salvie gir 1,78:1 og er dessuten palettens
   definerte merkefarge. :not() saa terrakotta- og salviemerkene beholder
   sitt. */
.tl-sebra .row:nth-of-type(odd) .mrk i:not(.a):not(.d) { background: #fff; }
.tl-sebra .row:nth-of-type(even) .mrk i:not(.a):not(.d) { background: var(--sage); }

/* KOMPAKTE BOKSER (Lise 18. aug: «for store i forhold til innhold»).
   Maalt ved 1280px: merkekolonnen var 513px bred mens merkene i foerste
   rad fylte 25 av dem — naer halve boksen var tomrom — og radene var
   284px hoye rundt 166px innhold. Kolonnen faar naa bare bredden
   merkene trenger (tre merker à 46px + to mellomrom = 164), luften
   halveres, og teksten faar et lesetak saa den ikke renner ut i den
   frigjorte bredden. Gjelder BARE tidslinjen — Hovedfunn paa
   forskningssiden har to tunge kolonner og skal beholde sine maal. */
.tl-sebra .row {
  grid-template-columns: 170px minmax(0, 1fr);
  column-gap: 44px;
  /* 32px ga for lite loeft i topp og bunn (Lise 19. aug); 44 gir
     boksene luft uten aa naerme seg de 58 de hadde da merkekolonnen
     var 513px bred og alt leste som for stort. */
  padding-top: 44px; padding-bottom: 44px;
}
.tl-sebra .row .mrk { gap: 10px; }
.tl-sebra .row .mrk i { width: 46px; height: 46px; }
.tl-sebra .row > div:last-child { max-width: 64ch; }

@media (max-width: 900px) { .row { grid-template-columns: 1fr; gap: 26px; padding: 40px 0; } .row .mrk { justify-content: flex-start; } }
/* Paa mobil stables kolonnene, saa den faste merkekolonnen maa vike —
   ellers staar teksten i en 170px spalte. */
@media (max-width: 900px) {
  .tl-sebra .row { grid-template-columns: 1fr; row-gap: 20px; padding-top: 34px; padding-bottom: 34px; }
}

/* ---------- 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;
}
/* Speilingslogikk (Lise, 18. aug): fylt knapp blir omriss paa hover,
   omriss blir fylt — samme logikk begge veier. Kantfargen beholdes fra
   hvilestilen, saa den moerke knappen faar ghost-knappens hvileform og
   omvendt. Aksent- og lys-variantene foelger samme regel i sin kontekst,
   ellers hadde den globale hoveren gjort dem uleselige der de staar. */
.btn:hover { transform: translateY(-2px); background: transparent; color: var(--text); }
.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; }
.btn-light:hover { background: transparent; color: #fff; }

/* Handlingsknapp paa den moerke flaten, i slekt med merket i skjoeten.
   Merket bruker --accent, men det gaar bare paa grunnen: der ligger terrakotta
   paa 5,7:1, mens den mot den moerke flaten faller til 2,1:1 og pillen
   slutter aa lese som en knapp. --accent-lift er samme farge i den rollen
   paletten alltid har hatt for moerke underlag, og gir 6,1:1 begge veier —
   baade knappen mot flaten og teksten i knappen. */
/* Aksentknappen er kontekstavhengig, etter samme regel som kortene:
   den baerer terrakotta paa lys grunn, og den LYSE terrakottaen paa moerk.
   Grunnen er den samme som da knappen i bunnfeltet ble laget — burgunder
   mot den moerke flaten er 1,6:1 og pillen slutter aa lese som en knapp,
   mens den paa grunnen og salvie er 8,0:1 og 6,7:1.
   Klassen markerer handlingen som starter en samtale. Andre knapper er
   navigasjon og forblir moerke. */
.btn-accent { background: var(--accent); color: var(--light); border-color: var(--accent); }
.btn-accent:hover { background: transparent; color: var(--accent); }
.deep .btn-accent { background: var(--accent-lift); color: var(--deep); border-color: var(--accent-lift); }
.deep .btn-accent:hover { background: transparent; color: var(--accent-lift); }
/* Paa salviekortet er det FULL terrakotta som gjelder — den lyse varianten
   maaler 1,09:1 mot salvie og forsvinner. Full terrakotta gir 3,17:1 som
   flate, og kremteksten oppi 5,66:1. */
.c-booking .btn-accent { background: var(--accent); color: var(--light); border-color: var(--accent); }
.c-booking .btn-accent:hover { background: transparent; color: var(--accent); }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-note { font-size: 16px; color: var(--muted); margin-top: 20px; max-width: 56ch; font-weight: 400; }
.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; }

/* Avstandene her var maalt til 16 px mellom stikktittel og overskrift, og
   0 px mellom overskrift og ingress — ingressen klistret seg til
   overskriften. h2 arver margin-top: 16px fra den globale regelen, og
   .lede har ingen i det hele tatt, saa i en sentrert stabel ble det tett.
   Trappen er naa 24 / 24 / 40: hvert steg litt stoerre enn det forrige,
   saa oyet foelger nedover mot knappen. */
.center h2 { margin-top: 24px; }
.center .lede { margin-top: 24px; }
.center .cta-row { justify-content: center; margin-top: 40px; }
/* .glyph er display:flex, saa text-align paa .center gjoer ingenting med
   den — merket la seg helt ute til venstre mens resten stod midtstilt.
   Samme grep som knapperaden over, og av samme grunn. */
.center .glyph { justify-content: center; }

/* Avsluttende oppfordring paa moerk flate.
   Bunnpaddingen er mindre enn seksjonens vanlige 120 px: feltet gaar rett
   over i footeren, som har samme farge, saa de to leser som én blokk.
   Med 120 + 60 ble det 180 px doedt moerke mellom knappen og footerteksten.

   Aksenten ligger paa KNAPPEN, ikke paa stikktittelen. Foerst ga jeg den
   til stikktittelen, men da hadde flaten to terrakotta-elementer og
   aksenten sluttet aa peke paa noe. Den skal tilhoere handlingen alene. */
.deep.center { padding-bottom: 84px; }

/* ---------- LISTER ---------- */
.p-row {
  display: grid; grid-template-columns: 150px 1fr auto; gap: 34px; align-items: baseline;
  padding: 28px 22px; border-radius: 14px; text-decoration: none;
}
.p-row:last-child { border-bottom: 1px solid var(--hairline); }
/* "Kommer" laa som loes graa tekst og leste som en manglende dato — altsaa
   som noe som mangler. Som en liten ramme leser den i stedet som en STATUS,
   og da er tomheten et valg og ikke en forglemmelse.
   Omrisset, ikke fyll: raden ligger paa salvie paa bloggsiden og paa grunnen
   paa forsiden, og en fylt brikke ville forsvunnet paa den ene av dem. */
.p-row .when {
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--label);
  justify-self: start; padding: 5px 12px;
  border: 1px solid rgba(90,102,84,.55); border-radius: 100px;
}
/* text-wrap: balance fordeler ordene jevnt over linjene i stedet for aa
   fylle den foerste og la resten henge igjen. Uten den brakk den lengste
   overskriften som "…kanskje en av / de største" — to ord alene paa siste
   linje. Med balance: "…paa arbeidsplassen / er en omstilling — kanskje en
   av de største", altsaa et naturlig punkt og to jevne linjer.
   Gjoer ingenting naar overskriften uansett faar plass paa én linje, og
   ignoreres stille i eldre nettlesere. */
.p-row h3 { font-size: 23px; transition: color .18s; text-wrap: balance; }
a.p-row:hover h3 { color: var(--accent); }

.p-row .cat { font-size: 14px; color: var(--label); white-space: nowrap; }
/* Seriemerkene laa her saa lenge kategorien var en SKRIVEMAATE
   («Grensen», «Korreksjonen») og formen kunne laere leseren hvilken.
   Naa er kategorien et TEMA, og temaet er noe du kan trykke paa — da
   maa det se ut som knappen det filtrerer med, ikke som en glyf.
   Geometrien lever videre der den fortsatt betyr noe: paa de tre
   kortene om hva jeg deler. */
/* ---- Listen uten dato ----
   Ti tekster publisert samme dag ga ti like datoer under hverandre, og
   det leste som en dumpet bunke i stedet for et arbeid. Datoen staar
   fortsatt oeverst i hver artikkel, der den er sann og der den er
   nyttig — den forteller hvor ferske kildene er. I listen overtar
   kategorien plassen. Den sier dessuten noe datoen aldri sa: at det
   finnes fire ulike maater aa skrive paa.
   Raden som ennaa ikke er publisert beholder statusbrikken sin, og er
   dermed den eneste som ser annerledes ut — som den skal. */
/* Radene er BOKSER (Lise 18. aug: listen passet ikke lenger med resten).
   Samme flatelogikk som kortene: salvietint med ramme paa grunnen,
   papirhvitt paa salviepanelet. Luft mellom boksene i stedet for
   flush-stabling; de negative margene fra stripe-tiden er borte, saa
   boksene flukter med tekstspalten som kortene gjoer. */
/* ÉN KOLONNE (Lise 19. aug: «temaene til venstre fungerer ikke»).
   Kategorien sto i en 210px sidespalte der de lengste navnene brakk
   over to linjer og de tre «Forskningen oversatt» stablet seg synlig
   oppaa hverandre. Naa staar den OVER tittelen inne i boksen, som
   glyf og overskrift gjoer paa kortene ellers — og tittelen faar hele
   bredden, som er det man faktisk skanner etter. */
.p-row.uten-dato {
  position: relative;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 24px;
  border: 1px solid rgba(90,102,84,.45); border-radius: 14px;
  background: var(--sage-tint);
}
/* Ti like bokser under hverandre ble en lang, jevn stripe. Annenhver i
   den andre kortfargen gir listen puls uten aa innfoere en ny farge.
   Hvilke to farger avhenger av grunnen, som ellers paa siden: paa
   salviepanelet veksler den mellom papirhvitt og den dypere kremen, paa
   grunnen mellom salvietint og papirhvitt. Forsiden staar paa grunnen
   og ville ellers ikke fatt noen veksling i det hele tatt.
   Klassen settes av site.js etter SYNLIG rekkefoelge, ikke av
   :nth-child: naar filtret skjuler rader, ville tellingen i CSS talt de
   skjulte med og gitt to like bokser ved siden av hverandre. */
.p-row.uten-dato.annenhver { background: var(--panel-card); }
.panel .p-row.uten-dato { background: var(--panel-card); border-color: rgba(90,102,84,.35); }
.panel .p-row.uten-dato.annenhver { background: var(--light-2); }
/* Flex framfor nabo-marg: naar filtret skjuler rader, hopper gap-et over
   dem av seg selv. En margin-top fra «+ .p-row» ville blitt staaende
   igjen etter en rad som ikke lenger vises. */
.p-liste { display: flex; flex-direction: column; gap: 14px; }
/* [hidden] fra nettleserens eget ark taper mot .p-row sin display:grid,
   saa filtret trenger denne for at skjult faktisk skal bli skjult. */
.p-row[hidden] { display: none; }
/* ---- TEMAMERKET ----
   Hvert tema har sin egen geometri, og den staar likt paa filterknappen
   og paa brikken i raden: form = tema, og formen er det raskeste oeyet
   ser. Samme vokabular som glyfene paa kortene, bare i listestoerrelse.
     Omstilling  ·  hel + halv  — noe i ferd med aa bli noe annet
     AI i praksis·  én foran to — én som drar, flere som foelger
     Tillit      ·  to halvdeler vendt mot hverandre
     Regelverk   ·  kvadrater   — regelen har kanter
   Merkene svever, hvert i sin egen takt, slik merkene ellers paa siden
   gjoer. Ved hover loefter de seg i boelge, som glyfene paa kortene. */
.temamerke { display: inline-flex; gap: 5px; margin-right: 9px; vertical-align: -1px; }
.temamerke i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--sage-deep); display: block;
}
.temamerke i.a { background: var(--accent); }
.temamerke i.half { border-radius: 50% 0 0 50%; }
.temamerke i.vend { border-radius: 0 50% 50% 0; }
.temamerke i.sq { border-radius: 2px; }

.js-anim .p-row .temamerke i { animation: svev 4.4s ease-in-out infinite alternate; }
.js-anim .p-row .temamerke i:nth-child(2) { animation-duration: 5.3s; animation-delay: .45s; }
.js-anim .p-row .temamerke i:nth-child(3) { animation-duration: 6s; animation-delay: .9s; }
/* Radene arver ikke samme takt: uten dette pustet ti rader i kor og
   ble til én stor puls i stedet for ti smaa liv. */
.p-liste .p-row:nth-child(3n+2) .temamerke i { animation-duration: 5.1s; }
.p-liste .p-row:nth-child(3n) .temamerke i { animation-duration: 3.9s; }

.temamerke i { transition: transform .25s ease; }
a.p-row:hover .temamerke i, a.p-row:focus-visible .temamerke i { transform: translateY(-4px) scale(1.15); }
a.p-row:hover .temamerke i:nth-child(2) { transition-delay: .05s; }
a.p-row:hover .temamerke i:nth-child(3) { transition-delay: .1s; }

/* Brikken har samme form som filterknappen over — du skal kjenne igjen
   det du trykket paa naar du finner det igjen i listen — men lettere
   ramme, for den kan ikke trykkes. Hele raden er lenken, og en knapp
   inni en lenke er ugyldig markup og en felle for tastaturet. */
/* ---- DATO I LISTEN (Lise 26. aug) ----
   Da alle ti innleggene var publisert samme dag, sa datoen ingenting —
   ti like datoer leste som en bunke. Naa som det kommer innlegg loepende,
   forteller den noe: hva som er ferskt.
   Bare rader SOM HAR en dato faar .rad-topp; de eldre beholder brikken
   alene og ser ut som foer. Et tomt datofelt ville vaert verre enn ingen —
   det ville lest som en glipp.
   Wrapperen finnes fordi raden er én gridkolonne: uten den havner datoen
   paa egen linje under brikken i stedet for ved siden av. */
.p-row.uten-dato .rad-topp {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.p-row.uten-dato .dato {
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em;
  color: var(--muted);
}

.p-row.uten-dato .cat {
  justify-self: start; white-space: nowrap;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--label);
  padding: 5px 13px; border-radius: 100px;
  border: 1px solid rgba(90,102,84,.5);
}
/* Brikken foelger tittelen naar raden peker paa seg selv, ellers ville
   den blitt staaende igjen mens alt annet flyttet seg. */
a.p-row.uten-dato:hover .cat, a.p-row.uten-dato:focus-visible .cat {
  border-color: var(--accent); color: var(--accent);
}
.js-anim .p-row.uten-dato .cat { transition: border-color .2s ease, color .2s ease; }

/* Burgunder er handling. Her er handlingen «denne kan du klikke», og
   derfor er kanten usynlig til du peker paa raden — den er ikke pynt.
   Tittelen flytter seg syv piksler samtidig; det er den bevegelsen som
   gjoer at raden foeles som en knapp og ikke som en strek. */
.p-row.uten-dato::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 3px; background: var(--accent);
  transform: scaleY(0);
}
a.p-row.uten-dato:hover, a.p-row.uten-dato:focus-visible { border-color: var(--sage-deep); }
a.p-row.uten-dato:hover::before, a.p-row.uten-dato:focus-visible::before { transform: scaleY(1); }
a.p-row.uten-dato:hover h3, a.p-row.uten-dato:focus-visible h3 { transform: translateX(7px); }

.js-anim .p-row.uten-dato { transition: border-color .2s ease; }
.js-anim .p-row.uten-dato::before { transition: transform .3s cubic-bezier(.22,.9,.3,1); }
.js-anim .p-row.uten-dato h3 { transition: transform .3s cubic-bezier(.22,.9,.3,1), color .18s; }

@media (prefers-reduced-motion: reduce) {
  .js-anim .p-row.uten-dato::before,
  .js-anim .p-row.uten-dato h3 { transition: none; }
  a.p-row.uten-dato:hover h3, a.p-row.uten-dato:focus-visible h3 { transform: none; }
  /* Merkene staar stille, men beholder farge og form — det er dem
     temaet kjennes igjen paa. */
  .js-anim .p-row .temamerke i { animation: none; }
  .temamerke i { transition: none; }
  a.p-row:hover .temamerke i, a.p-row:focus-visible .temamerke i,
  .temaknapp:hover .temamerke i { transform: none; }
}

/* ---- TEMAFILTER ----
   Knappene bygges av site.js fra data-tema paa radene. Derfor kan de
   ikke komme i utakt med listen, og derfor ser ingen en doed knapperad
   hvis skriptet ikke kjoerer — plassholderen er tom og hidden til den
   faktisk virker.
   Formen er den samme som temabrikken i raden: du skal se at det du
   trykket paa er det samme merket du finner igjen nedover i listen. */
.temafilter { margin-top: 30px; }
/* Uten filter (ikke noe JS) beholder listen den luften den hadde. Med
   filter tar knapperaden over avstanden, og listen rykker naermere. */
.temafilter + .p-liste { margin-top: 44px; }
.temafilter:not([hidden]) + .p-liste { margin-top: 26px; }

.temaknapper { display: flex; flex-wrap: wrap; gap: 10px; }
/* Ramma er HEL salvie, ikke halvgjennomsiktig som brikkens. Maalt:
   rgba(90,102,84,.5) blandet mot salvietinten gir 1,7:1 — under de 3:1
   en kontrollflate maa ha for aa vaere til aa faa oeye paa. Solid gir
   4,05:1. At knappen dermed staar litt sterkere enn brikken i raden er
   riktig vei: den ene kan trykkes, den andre er en merkelapp. */
.temaknapp {
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--label);
  padding: 9px 16px; border-radius: 100px;
  border: 1px solid var(--sage-deep); background: transparent;
  cursor: pointer;
}
/* Hover kan ikke lenger vaere terrakotta — da ville den lignet en svak
   utgave av den valgte. Den loefter seg i stedet, og merket boelger. */
.temaknapp:hover { border-color: var(--deep); }
.temaknapp:hover .temamerke i { transform: translateY(-3px); }
.temaknapp:hover .temamerke i:nth-child(2) { transition-delay: .05s; }
.temaknapp:hover .temamerke i:nth-child(3) { transition-delay: .1s; }
/* Den valgte knappen er FYLT, ikke bare farget: en ramme alene skiller
   for daarlig naar fem knapper ligger ved siden av hverandre.
   Terrakotta og ikke naesten-sort, fordi burgunder er handling paa
   denne siden — og aa filtrere ER leserens handling. Den setter
   dessuten farge oeverst i en seksjon som ellers er salvie hele veien.
   Hvit tekst paa terrakotta er maalt til 5,66:1. */
.temaknapp[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
/* Merket maa bytte palett med underlaget — terrakotta paa terrakotta
   forsvinner, samme regel som glyfene foelger paa den moerke flaten. */
.temaknapp[aria-pressed="true"] .temamerke i { background: rgba(255,255,255,.5); }
.temaknapp[aria-pressed="true"] .temamerke i.a { background: #fff; }
/* Tallet er hjelp, ikke etikett — men i burgunder blir det ogsaa fire
   smaa varmepunkter i en ellers kjoelig rad. */
.temaknapp .antall { color: var(--accent); margin-left: 7px; }
.temaknapp[aria-pressed="true"] .antall { color: rgba(255,255,255,.72); }

/* Statuslinjen er BARE for skjermlesere. Tallet staar allerede paa
   knappen man nettopp trykket paa («KOMPETANSE 3»), saa en synlig linje
   under ville sagt det samme en gang til — og paa mobil kostet den en
   linje rett der plassen er dyrest. Men den som ikke ser knappen maa
   fortsatt faa vite at listen ble kortere, og det er dette feltet. */
.temafilter .status {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.js-anim .temaknapp { transition: background-color .2s ease, border-color .2s ease, color .2s ease, translate .2s ease; }
.js-anim .temaknapp:hover { translate: 0 -2px; }

@media (max-width: 780px) {
  /* 9px padding ga 36px hoeye knapper — under de 44px en tommel trenger.
     Sideluften er derimot strammet inn: med merkene paa ble knappene saa
     brede at raden gikk fra tre linjer til fire, og fire linjer knapper
     er 211px du maa rulle forbi foer du ser et eneste innlegg. Hoeyden
     roeres ikke — den er tommelens. */
  .temaknapp { padding: 13px 13px; letter-spacing: .06em; }
  .temaknapp .temamerke { gap: 4px; margin-right: 6px; }
  .temaknapp .temamerke i { width: 8px; height: 8px; }
  .temaknapper { gap: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .js-anim .temaknapp { transition: none; }
}

@media (max-width: 780px) { .p-row { grid-template-columns: 1fr; gap: 10px; } }
@media (max-width: 780px) { .p-row.uten-dato { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- TO KOLONNER ---------- */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: start; }

/* Sidetoppen paa Om meg: merkelappen skal staa OVER portrettet paa mobil
   (Lise 18. aug). Det krever at de to er soesken i griden — ligger
   merkelappen inne i tekstblokken, faar man aldri bildet imellom.
   Med denne strukturen faller mobilrekkefoelgen ut av seg selv naar
   griden kollapser: merkelapp, bilde, tekst. Paa skrivebord plasseres
   de eksplisitt, saa oppsettet er noeyaktig som foer: merkelapp og
   tekst i venstre kolonne, portrettet spenner begge radene til hoeyre.
   row-gap maa nullstilles — griden ville ellers lagt 72px mellom
   merkelappen og overskriften, som staar 18px fra hverandre. */
.topp-split { column-gap: 72px; row-gap: 0; }
/* Ingen margin her: overskriften baerer allerede sin egen topp-margin
   paa 18px, og en margin i tillegg ga 36 (maalt mot referansen). */
.topp-split > .label { grid-column: 1; grid-row: 1; }
.topp-split > .topp-tekst { grid-column: 1; grid-row: 2; }
/* Portrettet skal ligge paa SAMME sted som heroens paa forsiden, saa de to
   sidene aapner likt (Lise 19. aug). Maalt paa 1280x860 foer fiksen:
   loddrett laa de allerede likt (3-8px), men om-sidens laa 149px lenger
   mot venstre — den manglet justify-self, saa den klistret seg til
   venstre kant av spalten sin mens heroens laa mot hoeyre.
   Bredden foelger med opp fra 380 til heroens 400. */
.topp-split > .media.portrait {
  grid-column: 2; grid-row: 1 / span 2;
  justify-self: end; max-width: 400px;
}
.topp-split > .sidemerke-figur { grid-column: 2; grid-row: 1 / span 2; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 40px; }
  /* Paa om-siden stod portrettet sist — under fem avsnitt prosa. Paa
     mobil skal ansiktet komme foer historien. Rammer bare .portrait,
     saa kontakt-/foredrag-splittene beholder sin rekkefoelge. */
  .split .media.portrait { order: -1; }
  /* I sidetoppen staar merkelappen foerst og portrettet rett etter, saa
     der skal order-regelen over IKKE gjelde — den ville dyttet bildet
     forbi merkelappen. Grid-plasseringen fra skrivebordsoppsettet maa
     ogsaa vike, ellers laases alt til to kolonner. */
  .topp-split > .label,
  .topp-split > .topp-tekst,
  .topp-split > .media.portrait,
  .topp-split > .sidemerke-figur { grid-column: 1; grid-row: auto; order: 0; }
  .topp-split { row-gap: 26px; }
  .topp-split > .label { margin-bottom: 0; }
  /* I sidetoppen staar portrettet foerst, og i full bredde skjoev det
     overskriften til 641px — godt under folden, saa man moette et
     ansikt uten aa faa vite hvem det var. 220px gir varmen med én
     gang og loefter h1 opp i synsfeltet igjen. */
  /* justify-self: end hoerer til tokolonners-oppsettet. Naar alt staar
     under hverandre skal portrettet flukte med etiketten og overskriften,
     ikke sveve ut mot hoeyre kant. */
  .page-top .media.portrait { max-width: 220px; justify-self: start; }
  /* Merket staar mellom etiketten og overskriften, som portrettet gjoer.
     Men et merke er ikke et ansikt: i full bredde ville det skjoevet
     overskriften langt ned for lite igjen. 128px gir farge og form med én
     gang og lar h1 bli staaende i synsfeltet. */
  .page-top .sidemerke-figur { max-width: 128px; justify-self: start; }
}

/* ---------- MOBIL: LUFT OG LESBARHET ----------
   Maalt paa 375px: seksjonene arvet skrivebordsluften (120px topp+bunn,
   intro 190/130) — paa smal skjerm ble det doede soner paa over 240px
   mellom innholdsblokkene, og kortgriden laa 74px under overskriften.
   Mono-merkene (label, piller, stikktitler) laa paa 12px — i minste
   laget som lesetekst paa mobil; 13px er nok uten aa miste
   metadata-stemmen. */
@media (max-width: 700px) {
  section { padding: 76px 0; }
  .intro { padding: 96px 0 84px; }
  .cards { margin-top: 48px; }
  /* Under 700px krymper introens topp-luft, og -122 kolliderte med
     teksten (maalt: -4px klaring ved 375px). Paa mobil vokser merket
     mindre (124px) saa luften ikke klemmes. Maalt ved 375px: -85 ga
     33 over og 11 under mot introteksten — balansen ligger paa -74
     (22/22). */
  .badge { bottom: -74px; width: 124px; height: 124px; }
  /* Luften i mobilheroen var trang hele veien ned (maalt ved 375px:
     40px knapp→portrett, 22px portrett→merke, 44px merke→introtekst).
     Portrettet og merket er sidens to tyngste objekter og trenger rom
     rundt seg. Bunnluften i heroen styrer avstanden portrett→merke,
     siden merket henger fast i heroens underkant. */
  .hero { padding-bottom: 98px; }
  .hero .wrap { gap: 64px; }
  .intro { padding-top: 116px; }

  /* Kortene var 273px hoye hver — 866px for de tre, altsaa mer enn en
     mobilskjerm, og man maatte rulle for aa se at det ER tre (Lise 18.
     aug, iPhone Max). Plassen hentes fra luft og dekor, ALDRI fra
     broedteksten: den staar paa 16px og vekt 400 nettopp fordi den ble
     meldt for liten tre ganger tidligere. Maalt resultat: 231px per
     kort, 729px samlet. */
  .c { padding: 22px 20px; }
  .c .glyph { margin-bottom: 16px; gap: 6px; }
  .c .glyph i { width: 20px; height: 20px; }
  .c h3, .c h2 { font-size: 20px; margin-bottom: 8px; }
  .c-pil { padding-top: 14px; }
  .cards { gap: 18px; }

  /* Bevegelsen skal vaere TYDELIG paa mobil (Lise 18. aug: «ikke vaer
     konservativ»). Skjermen er liten, saa 22px forskyvning leser som
     et lite hikk; 34px og litt lengre varighet leser som at innholdet
     kommer inn. */
  .js-anim .rev { transform: translateY(34px); transition: opacity .85s ease, transform .85s cubic-bezier(.22,.9,.3,1); }
  /* Kortene staar under hverandre paa mobil og krysser folden ett om
     gangen — da er trappen bare treghet, og kort nummer tre ville
     ventet 300ms etter at man ser den. Nullstilles her. */
  .js-anim .cards .c { transition-delay: 0s; }
  /* Innleggsradene kommer fra siden i stedet for nedenfra: de er brede
     og lave, og en sidelengs inngang leser tydeligere paa smal skjerm. */
  .js-anim .p-liste .p-row.rev { transform: translateX(-28px); }
  .js-anim .p-liste .p-row.rev.on { transform: none; }

  /* Kontaktsidens lenker ER handlingene paa siden, men sto som ren
     tekst paa 20px hoyde — godt under de 44px som regnes som trygt
     trykkmaal for en tommel. Blokkvisning med luft gjoer hele linjen
     trykkbar uten aa endre hvordan teksten ser ut. Gjelder bare
     mobil; med musepeker er 20px rikelig. */
  .kontaktlenker a.textlink { display: inline-block; padding: 12px 0; }
  .kontaktlenker p { margin-bottom: 0; }

  /* Handlingsknappen paa den moerke sluttflaten sto klemt mellom
     ingressen og seksjonskanten (maalt: 40px over, 84px under). */
  .deep .cta-row { margin-top: 56px; }
  /* .deep.center, ikke .deep: den fyller allerede padding-bottom med to
     klasser lenger oppe i fila og ville vunnet spesifisitetsduellen. */
  .deep.center { padding-bottom: 104px; }
  .label, .row .k, .hero .role { font-size: 15px; }
  /* Seksjonslenkene maa staa ETTER regelen over: den treffer .label og
     dro dem tilbake til 15px, saa den stoerre etiketten forsvant paa
     mobil. Maalt: 17px ble 15. */
  .seksjonslenke { font-size: 18px; position: relative; }
  /* Trykkflaten var 28px hoey — under de 44 en tommel trenger. Pseudo-
     elementet utvider den uten aa flytte noe: teksten staar der den stod. */
  .seksjonslenke::after {
    content: ''; position: absolute; left: 0; right: 0;
    top: 50%; transform: translateY(-50%); height: 44px;
  }
  .p-row .when { font-size: 14px; }
  /* Vekt 300 rendrer tynt og blast paa mobilskjermer; loepeteksten gaar
     til 400 her. Overskriftene beholder 300 — de er store nok til aa
     baere det. */
  .c p, .row p, .prose p, .cta-note, .privacy-note { font-weight: 400; }
}

/* ---------- 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: 14px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--label); margin-bottom: 10px;
}
.field input, .field textarea {
  width: 100%; font-family: inherit; font-size: 17px; font-weight: 400; color: var(--text);
  background: transparent; border: 0; border-bottom: 1px solid rgba(90,102,84,.5);
  padding: 12px 2px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); }

/* ---- HONNINGKRUKKA ----
   Skjult for mennesker, men IKKE med display:none — den enkleste boten
   ser etter nettopp det og hopper over feltet. Den staar utenfor
   skjermen med hoeyde 0, saa den fyller ingenting og fanges ikke av
   tabulator (tabindex -1 i markupen gjoer resten). */
.honning {
  position: absolute; left: -9999px; width: 1px; height: 0;
  overflow: hidden; opacity: 0;
}

/* ---- KVITTERINGEN ----
   Erstatter skjemaet naar meldingen er sendt. Den skal vaere det eneste
   som staar der — et skjema som blir staaende ved siden av en takk
   inviterer til aa sende samme melding to ganger. */
.kvittering { padding: 8px 0 4px; }
.kvittering .glyph { margin-bottom: 20px; }
.kvittering h2 { margin-top: 0; }
.kvittering p { margin-top: 14px; max-width: 46ch; color: var(--muted); }
.js-anim .kvittering { animation: kvitt-inn .5s cubic-bezier(.22,.9,.3,1) both; }
@keyframes kvitt-inn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js-anim .kvittering { animation: none; } }

/* Knappen mens den sender: den skal se opptatt ut, ikke oedelagt. */
.form button[aria-busy="true"] { opacity: .72; cursor: progress; }
.skjemafeil { margin-top: 16px; color: var(--accent); font-size: 15px; }
.privacy-note { font-size: 16px; color: var(--muted); margin-top: 18px; max-width: 46ch; font-weight: 400; }
.steps { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 34px; margin-top: 22px; }
/* ---- BOOKINGKORTET ----
   Aa booke et moete var en dempet pille nederst i et lyst kort, under en
   LinkedIn-lenke (Lise 19. aug: «hvor underkommunisert dette er»). Kortet
   ligger naa paa den moerke flaten — sidens tyngste — saa det leser som et
   eget tilbud og ikke som en fotnote til skjemaet.
   Fargene foelger den moerke palettens roller, som glyfene og knappene
   ellers gjoer: rosé paa knappen (6,07:1), dempet lys i broedet. */
/* Salvie, ikke moerk (Lise 19. aug). Maalt paa alle tre nyansene:
     salvietint  1,20:1 mot grunnen — leser knapt som en egen blokk
     salvie      1,78:1 — leser som blokk, og taaler terrakottaknappen (3,17:1)
     moerk salvie 5,57:1 — men terrakotta blir 1,02:1 og FORSVINNER, saa
                  knappen maatte blitt hvit, og kortet mistet aksenten sin
   Mellomsalvie er den eneste som beholder bade tyngden og terrakottaen.
   Ramma i moerk salvie gjoer resten: 1,78:1 alene er for lite til aa
   avgrense en flate. */
.c.c-booking {
  background: var(--sage); border-color: var(--sage-deep); color: var(--deep);
}
.c.c-booking .label { color: var(--deep); }
.c.c-booking h2 { color: var(--deep); margin-top: 14px; }
/* IKKE --muted her: den maaler 4,33:1 mot salvie, altsaa under kravet.
   --deep gir 6,65:1. Det er hele grunnen til at broedteksten er sverte
   og ikke dempet paa dette ene kortet. */
.c.c-booking .lede { color: var(--deep); margin-top: 14px; max-width: 34ch; }
/* Utveien for den som heller vil ta det paa LinkedIn — den skal finnes,
   men ikke konkurrere med knappen. */
.kontakt-eller {
  margin-top: 22px; font-size: 15px; color: var(--deep);
}
.c.c-booking .kontakt-eller a { color: var(--deep); }
.c.c-booking .kontakt-eller a:hover { color: var(--accent); }
.c.c-booking .glyph i { background: var(--sage-deep); }
.c.c-booking .glyph i.a { background: var(--accent); }
.steps li { display: flex; gap: 10px; font-size: 17px; font-weight: 400; color: var(--on-panel-soft); }

/* Mobilreglene for skjema og steg MAA staa her, etter basisreglene:
   de ligger paa samme spesifisitet, og blokka paa ~535 taper mot
   basisregler som defineres lenger ned i fila. Samme felle som
   .intro-sporsmal og .c h3 tidligere. */
@media (max-width: 700px) {
  .field label { font-size: 15px; }
  .steps li { font-weight: 400; }
}
/* Trinn-numrene i aksentfargen. Det er sidens eneste farge utenom knappen,
   og den peker paa akkurat det som skal roeres: prosessen. 5,7:1 paa grunnen. */
.steps .n { color: var(--accent); }

/* ---------- FOOTER ---------- */
footer.site { background: var(--deep); color: rgba(255,255,255,.8); 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; }

/* Streken tegner seg selv naar den toner inn — bevegelse med retning,
   ikke bare fremtoning. */
.js-anim .rule.rev { width: 0; transition: opacity .8s ease, width .9s ease; }
.js-anim .rule.rev.on { width: 92px; }

/* Tidslinjens rader kommer i trapp, og merkeprikkene spretter paa plass
   et oeyeblikk etter raden sin — samme dans som kortenes glyfer. */
.js-anim .row.rev:nth-of-type(2) { transition-delay: .08s; }
.js-anim .row.rev:nth-of-type(3) { transition-delay: .16s; }
.js-anim .row.rev:nth-of-type(4) { transition-delay: .24s; }
.js-anim .row.rev:nth-of-type(5) { transition-delay: .32s; }
.js-anim .row.rev:nth-of-type(6) { transition-delay: .40s; }
/* (Salviemerket bor naa i .row-blokka, sammen med de oevrige merkene.) */
.js-anim .row.rev .mrk i { opacity: 0; transform: scale(.4); transition: opacity .45s ease, transform .45s ease; }
/* Kvadratene maa beholde rotasjonen gjennom pop-in — scale alene
   overstyrte rotate(45deg) og kvadratet ble staaende rett (Lises
   skjermbilde 18. aug). */
.js-anim .row.rev .mrk i.sq { transform: rotate(45deg) scale(.4); }
.js-anim .row.rev.on .mrk i.sq { transform: rotate(45deg) scale(1); }
.js-anim .row.rev.on .mrk i { opacity: 1; transform: scale(1); }
.js-anim .row.rev.on .mrk i:nth-child(2) { transition-delay: .12s; }
.js-anim .row.rev.on .mrk i:nth-child(3) { transition-delay: .24s; }

/* VARIASJON PER PERIODE (Lises oenske 18. aug: litt visuell interesse).
   Boksene skal ikke komme inn paa noeyaktig samme maate hele veien ned,
   men variasjonen maa lese som rytme og ikke som rot — derfor to
   vekslende bevegelser, ikke seks ulike.

   Radene glir inn fra hver sin side: kremradene fra venstre, bandene
   fra hoeyre, saa oyet trekkes fram og tilbake nedover tidslinjen.
   Transformen maa staa etter .rev-basisen for aa vinne, og .on maa
   nullstille begge veier. */
.js-anim .tl-sebra .row.rev:nth-of-type(odd) { transform: translateX(-34px); }
.js-anim .tl-sebra .row.rev:nth-of-type(even) { transform: translateX(34px); }
.js-anim .tl-sebra .row.rev.on { transform: none; }
/* Radene som venter til hoeyre stikker utenfor skjermkanten og ga
   vannrett rulling paa mobil (maalt: 409px innhold i et 375px vindu).
   Klippet legges paa SEKSJONEN, ikke paa .tl-sebra: bandene skal
   fortsatt kunne stikke 24px ut til hver side av tekstspalten, og
   clip lager ingen rullecontainer slik overflow:hidden gjoer. */
section:has(> .wrap > .tl-sebra) { overflow-x: clip; }

/* Merkene veksler mellom aa sprette OPP og aa falle NED paa plass.
   Kvadratene maa baere rotate(45deg) i hver eneste tilstand — uten den
   staar de rett opp og ned gjennom bevegelsen (samme felle som 18. aug).
   Selektorene har én klasse mer enn basisreglene og vinner derfor. */
.js-anim .tl-sebra .row:nth-of-type(even).rev .mrk i { transform: translateY(-18px) scale(.6); }
.js-anim .tl-sebra .row:nth-of-type(even).rev .mrk i.sq { transform: translateY(-18px) rotate(45deg) scale(.6); }
.js-anim .tl-sebra .row:nth-of-type(even).rev.on .mrk i { transform: scale(1); }
.js-anim .tl-sebra .row:nth-of-type(even).rev.on .mrk i.sq { transform: rotate(45deg) scale(1); }
/* ...og de kommer i motsatt rekkefoelge: hoeyre mot venstre paa bandene,
   venstre mot hoeyre paa grunnenradene. */
.js-anim .tl-sebra .row:nth-of-type(even).rev.on .mrk i:nth-child(1) { transition-delay: .24s; }
.js-anim .tl-sebra .row:nth-of-type(even).rev.on .mrk i:nth-child(3) { transition-delay: 0s; }

/* Glyfene faar samme entre som merkeprikkene — hele nettstedet puster
   likt. Utvidet fra .c.rev til alle .rev-flater (Lise 18. aug: minst
   ett animert element per seksjon), saa glyfene i splitter og paa den
   moerke sluttflaten spretter inn som kortenes. Hover-dansen maa
   eksplisitt vinne over on-tilstanden (spesifisitet), ellers doer den
   etter avdekking — det gjelder ogsaa div-kortene fra hover-familien. */
.js-anim .rev .glyph i { opacity: 0; transform: scale(.4); transition: opacity .45s ease, transform .45s ease; }
.js-anim .rev.on .glyph i { opacity: 1; transform: scale(1); }
.js-anim .rev.on .glyph i:nth-child(2) { transition-delay: .12s; }
.js-anim .rev.on .glyph i:nth-child(3) { transition-delay: .24s; }
.js-anim .cards a.c.rev.on:hover .glyph i { transform: translateY(-3px) scale(1); }
.js-anim div.c.rev.on:hover .glyph i { transform: translateY(-3px) scale(1); }

/* Hovedfunn og tidslinjer svarer paa hover: teksten loeftes frem og
   vokser et hint, merkene skalerer med. Og merkene SVEVER rolig hele
   tiden — `translate` komponerer med transform, saa svevet krasjer
   ikke med pop-in-skalaen eller kvadratenes rotasjon. */
.row > div:last-child { transition: transform .25s ease; transform-origin: left center; }
.row:hover > div:last-child { transform: translateY(-6px) scale(1.035); }
@keyframes svev { from { translate: 0 3px; } to { translate: 0 -3px; } }
/* svev-side og pust var i bruk paa kapittelmerkene (.side, .pust) men
   fantes ikke i arket — animation-name pekte i tomme luften, og de
   merkene stod bom stille mens naboene svevde. Her er de. */
@keyframes svev-side { from { translate: -3px 0; } to { translate: 3px 0; } }
@keyframes pust { from { scale: .88; } to { scale: 1.1; } }
.row .mrk i { animation: svev 3.8s ease-in-out infinite alternate; }
.row .mrk i:nth-child(2) { animation-duration: 4.6s; animation-delay: .5s; }
.row .mrk i:nth-child(3) { animation-duration: 5.2s; animation-delay: .9s; }
.row:hover .mrk i { transform: scale(1.2); }
.row:hover .mrk i.sq { transform: rotate(45deg) scale(1.2); }
.js-anim .row.rev.on:hover .mrk i { transform: scale(1.2); }
.js-anim .row.rev.on:hover .mrk i.sq { transform: rotate(45deg) scale(1.2); }

/* Innleggsradene glir mot hoeyre paa hover — listene svarer naar man tar i dem. */
a.p-row { transition: opacity .8s ease, transform .8s ease, translate .2s ease; }
a.p-row:hover { translate: 6px -4px; scale: 1.015; }

/* Kontaktstegene kommer inn ett og ett naar sidetoppen avdekkes. */
.js-anim .steps.rev li { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.js-anim .steps.rev.on li { opacity: 1; transform: none; }
.js-anim .steps.rev.on li:nth-child(2) { transition-delay: .12s; }
.js-anim .steps.rev.on li:nth-child(3) { transition-delay: .24s; }

/* Portretter glir inn med et pust av skala. */
.js-anim .media.rev { transform: translateY(22px) scale(.97); }
/* Uten denne LANDER de aldri. `.js-anim .rev.on { transform: none }` staar
   hundre linjer lenger opp og har noeyaktig samme spesifisitet (0,3,0), saa
   regelen over vinner paa rekkefoelge — ogsaa etter at .on er satt.
   Maalt paa den levende siden 19. aug: portrettet paa om-siden stod
   translateY(22px) scale(.97) i det uendelige. Det fades inn, saa det leser
   som bevegelse, og derfor har ingen sett det. */
.js-anim .media.rev.on { transform: none; }

/* Kortene staar side om side og krysser folden samtidig, saa de fikk alle
   sin .on i samme oeyeblikk og kom som én blokk. Med en liten forsinkelse
   per kort kommer de ett om gangen, i den rekkefoelgen de skal leses.
   100 ms er nok til at oyet oppfatter rekkefoelgen, og lite nok til at det
   fortsatt leser som én bevegelse — ikke som fire hendelser. */
/* Verdilista foelger transition-property paa .cards a.c:
   opacity, transform, translate, border-color. Forsinkelsen skal BARE gjelde
   innfasingen — med én enkelt verdi ville ogsaa hover blitt forsinket, saa
   kort nummer tre hadde reagert 200 ms etter musepekeren. */
/* Radene staar under hverandre, men fire av dem faar plass i viewporten
   samtidig og fikk derfor .on i samme oeyeblikk. Samme forskyvning som
   kortene. Soesken-kombinatoren i stedet for :nth-of-type: bloggsiden har
   naa BAADE <a> (publisert) og <div> (planlagt) i samme liste, og
   nth-of-type ville talt de to typene hver for seg og gitt to rader
   samme forsinkelse. nth-child duger ikke heller — paa forsiden staar
   stikktittelen foerst i samme forelder. Dette teller radene, uansett
   hva slags element de er. */
.js-anim .p-row.rev + .p-row.rev { transition-delay: .08s; }
.js-anim .p-row.rev + .p-row.rev + .p-row.rev { transition-delay: .16s; }
.js-anim .p-row.rev + .p-row.rev + .p-row.rev + .p-row.rev { transition-delay: .24s; }

/* Prosaen paa Om meg tonet inn i ett jafs — seks elementer som dukket opp
   samtidig leses som en blokk, ikke som en fortelling. Samme trapp som
   radene, litt tettere, siden avsnittene staar naermere hverandre.
   :nth-child, ikke :nth-of-type: streken er en <div> mellom <p>-ene, og
   den skal ha sitt eget trinn i trappa. */
.js-anim .prose > .rev:nth-child(2) { transition-delay: .07s; }
.js-anim .prose > .rev:nth-child(3) { transition-delay: .14s; }
.js-anim .prose > .rev:nth-child(4) { transition-delay: .21s; }
.js-anim .prose > .rev:nth-child(5) { transition-delay: .28s; }
.js-anim .prose > .rev:nth-child(6) { transition-delay: .35s; }
.js-anim .prose > .rev:nth-child(7) { transition-delay: .42s; }
/* Prosaen paa Om meg teller naa aatte ledd (inngang, to kapittelmerker,
   strek og avslutning kom til) — uten dette trinnet kom det siste
   samtidig med det foerste. */
.js-anim .prose > .rev:nth-child(8) { transition-delay: .49s; }

/* Sidetoppene var til slutt de eneste flatene uten innfasing — merkelapp,
   h1 og ingress sto bom stille mens alt under toner inn. Samme trapp som
   prosaen. Forsiden beroeres ikke: hero-en har ingen .page-top og skal
   staa ved lasting. */
.js-anim .page-top .rev:nth-child(2) { transition-delay: .07s; }
.js-anim .page-top .rev:nth-child(3) { transition-delay: .14s; }
.js-anim .page-top .rev:nth-child(4) { transition-delay: .21s; }
.js-anim .page-top .rev:nth-child(5) { transition-delay: .28s; }

/* I splitter leder venstresiden: hoeyre kolonne kommer .08s etter, som
   p-radene. En enkel delay-verdi er trygg her — split-barna arver
   to-egenskaps-transitionen fra .js-anim .rev, ikke firelista som
   kortene i .cards har. */
.js-anim .split > .rev:nth-child(2) { transition-delay: .08s; }

/* Sluttflaten kom foer som én blokk — hele .wrap hadde .rev, saa
   merkelapp, overskrift, glyf, ingress og knapp dukket opp samtidig.
   Naa har hvert ledd sitt eget trinn, og avslutningen bygger seg opp
   slik seksjonene ellers gjoer. */
.js-anim .deep .wrap > .rev:nth-child(2) { transition-delay: .09s; }
.js-anim .deep .wrap > .rev:nth-child(3) { transition-delay: .18s; }
.js-anim .deep .wrap > .rev:nth-child(4) { transition-delay: .27s; }
.js-anim .deep .wrap > .rev:nth-child(5) { transition-delay: .36s; }

.js-anim .cards .c:nth-child(2) { transition-delay: .10s, .10s, 0s, 0s; }
.js-anim .cards .c:nth-child(3) { transition-delay: .20s, .20s, 0s, 0s; }
.js-anim .cards .c:nth-child(4) { transition-delay: .30s, .30s, 0s, 0s; }

@media (prefers-reduced-motion: reduce) {
  .js-anim .rev { opacity: 1; transform: none; }
  /* Forsinkelsene maa nullstilles her ogsaa. Uten dette staar kortene
     riktignok synlige, men transition-delay henger igjen paa andre
     egenskaper som maatte endres senere. */
  .js-anim .cards .c { transition-delay: 0s; }
  .js-anim .prose > .rev { transition-delay: 0s; }
  .js-anim .page-top .rev, .js-anim .split > .rev { transition-delay: 0s; }
  .js-anim .rule.rev { width: 92px; transition: none; }
  .js-anim .row.rev { transition-delay: 0s; }
  .js-anim .row.rev .mrk i { opacity: 1; transform: none; transition: none; }
  .js-anim .tl-sebra .row.rev:nth-of-type(odd),
  .js-anim .tl-sebra .row.rev:nth-of-type(even) { transform: none; }
  .js-anim .tl-sebra .row:nth-of-type(even).rev .mrk i { transform: none; }
  .js-anim .tl-sebra .row:nth-of-type(even).rev .mrk i.sq { transform: rotate(45deg); }
  .js-anim .tl-sebra .row:nth-of-type(even).rev.on .mrk i:nth-child(1),
  .js-anim .tl-sebra .row:nth-of-type(even).rev.on .mrk i:nth-child(3) { transition-delay: 0s; }
  /* Kvadratene trenger egen nullstilling — linjen over taper spesifisitets-
     duellen mot .row .mrk i.sq, og diamanten ble staaende urotert under
     redusert bevegelse. Funnet i parallell-PR #57. */
  .js-anim .row.rev .mrk i.sq { transform: rotate(45deg); }
  .js-anim .media.rev { transform: none; }
  .js-anim .rev .glyph i { opacity: 1; transform: none; transition: none; }
  a.p-row:hover { translate: none; }
  .js-anim .steps.rev li { opacity: 1; transform: none; transition: none; }
  .row .mrk i { animation: none; }
  .row:hover > div:last-child { transform: none; }
  .row:hover .mrk i, .js-anim .row.rev.on:hover .mrk i { transform: scale(1); }
  .js-anim .row.rev.on:hover .mrk i.sq { transform: rotate(45deg); }
  .cards a.c:hover { translate: none; scale: none; }
  div.c:hover { translate: none; scale: none; }
  div.c:hover .glyph i { transform: none; }
  .tall-rad > div:hover { translate: none; scale: none; }
  .cards a.c:hover .c-pil,
  .cards a.c:hover .glyph i { transform: none; }
  .badge svg { animation: none; }
  .badge:hover .badge-pil { transform: none; }
  html { scroll-behavior: auto; }
}