/* ==========================================================================
   Prosjektside v2 — prøve etter estherramon.com/amoraprimerapasta

   Frittstående. Lenker med vilje ikke inn site.css: .wrap, .case-* og
   temareglene der er bygget for det enspaltede oppsettet og ville kollidert
   med dette. Ingen NRK-tema, ingen temabryter.

   RUTENETTET er målt i referansen ved 1280 × 720:

       30        320   479                              1250
       ├─ 290 ───┤─159─┤────────── 771 ─────────────────┤
       oppsummering  renne   den scrollende bildespalta
         22,7 %     12,4 %          60,2 %

   Tallene står som fr-enheter, så forholdet holder seg på alle bredder.
   ========================================================================== */

:root{
  --f-serif:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --f-grot:'Inter', system-ui, -apple-system, sans-serif;

  /* Nøytralt papir. Hvert prosjekt overstyrer det under — verdiene er målt
     fra prosjektets egne bilder, og er kopiert uendret fra site.css:606. */
  --papir:#FCFCFA;
  --strek:#E4E1DA;
  --aksent:#4A4A48;
  --brod:#2A2A2A;
  --blekk:#141414;
  --damp:#6B6B6B;   /* den grå bildeteksten til høyre i kolofonlinja */

  /* BREDDE, RENNE OG RYTME.

     Referansen er bygget i Readymag og skalerer HELE komposisjonen med
     vindusbredda: målt ved 1600 px ligger sidekanten på 37 px — 2,3 % av
     flata — og ingenting er låst til en midtstilt spalte. Rutenettet over er
     målt ved 1280 og var før skrevet inn som et tak på 1220 px innhold, så
     alt fra 1400 og oppover ble en smal midtstilt blokk med tomme kanter.
     Det er nettopp det motsatte av referansens inntrykk.

     Nå vokser margen, venstrespalta og renna med vinduet, og bare lesemålene
     står fast: 34em i bildespalta, spaltebredda til venstre.

     Målt bildespalte, før → etter: 771 på ENHVER skjerm → 789 ved 1280,
     887 ved 1440, 1002 ved 1600 og 1155 ved 1920. Venstrespalta: 290 → 352
     ved 1920. Renna: 159 → 173. */
  --marg:clamp(24px,2.5vw,56px);         /* sidekanten */
  --sak-maks:1760px;                     /* taket; over dette midtstilles saka */
  /* Venstrespalta. Kurven er satt slik at spalta ved 1280 lander på 294 og
     ikke under referansens målte 290: hver piksel den mister der, koster
     dugnadsåndens lange oppsummering en linje, og linjene har ingen plass å
     ta av i en spalte som er låst til 100vh. */
  --oppsum-b:clamp(248px,25vw,420px);    /* venstrespalta */
  --renne:clamp(48px,7.5vw,144px);       /* luft mellom venstrespalta og bildene */
  --hdr:54px;                            /* høyden på den faste toppen */

  /* Tre avstander i bildespalta, nå i vw slik at luften vokser i takt med
     bredda. En fast 64-piksels marg mellom to bilder som er blitt 1024 px
     brede leser som ingen marg i det hele tatt. */
  --luft-el:clamp(48px,5vw,88px);        /* mellom elementer i samme bolk */
  --luft-bolk:clamp(80px,8.4vw,144px);   /* mellom bolker */
  --luft-stor:clamp(104px,11vw,200px);   /* de store øyeblikkene i fortellinga */

  /* TYPESKALAEN. Bildespalta hadde ni ulike overskriftsgrader — h2 32-54,
     de to problemstillingene 30-60 og 36-86, ingressen 24-38, linsetitlene
     26-36, prinsippene 30-58, sluttsitatet 32-64 — og fire brødtekstgrader
     (15/17/19 + 13). Ingen av tallene betydde noe: de var valgt hver for seg.

     Nå er det ÉN tittelgrad, ÉN brødtekstgrad og ÉN etikettgrad. Det eneste
     unntaket er tall som fungerer som illustrasjon (.opptelling .tall).
     Venstrespalta beholder sine 15 px — den er låst til 100vh, og der koster
     hver piksel en lesbar linje. */
  --grad-tittel:clamp(30px,3.1vw,46px);
  --grad-brod:17px;
  --grad-liten:13px;
  /* ÉTT LESEMÅL, ikke to. Tittelmålet sto i ch og brødtekstmålet i em, og
     siden ch og em regnes mot elementets EGEN grad landet de på 466 og 578 px
     ved 1600 — to ragged høyrekanter i tekst, i tillegg til mediekanten.
     I piksler faller de sammen, og sida har da to kanter i alt: teksten her,
     bildene ved sidemargen. 560 px er ~68 tegn i 17 px Inter. */
  --maal-tekst:clamp(400px,40vw,560px);
  /* Etikettspalta i de merkede listene. Sto i ch mot to ulike grader — 14ch i
     .funn, 5ch i .prinsipper — og ga 160 px innrykk i den ene og 76 i den
     andre, rett under hverandre i samme spalte. Én verdi, én venstrekant. */
  --etikett-b:clamp(88px,8.5vw,124px);
}

/* PROSJEKTPALETTENE. Papiret er målt fra hvert prosjekts egne bilder, aksenten
   er prosjektets sekundærkulør. Kopiert verbatim fra site.css:606-635.
   --damp er ny her: den grå halvdelen av bildetekstlinja, holdt i samme
   kulørretning som brødteksten på hver side. */
body[data-prosjekt="dugnadsand"]{
  /* 55° gull, sekundært 205° blått. Metning 0,49, lyshet 0,44. */
  --papir:#F1EDC3; --strek:#DAD7B5; --aksent:#23597F;
  --brod:#37362A; --blekk:#1E1D15; --damp:#6E6C55;
}
body[data-prosjekt="saksblikk"]{
  /* 55° blek gul, sekundært 155° grønt. Metning 0,53, lyshet 0,62. */
  --papir:#FFFDE4; --strek:#F1EECD; --aksent:#227F58;
  --brod:#37362A; --blekk:#1E1D15; --damp:#6E6C55;
}
body[data-prosjekt="reliable-ai"]{
  /* 45° krem, sekundært 235° blått. Metning 0,86, lyshet 0,80. */
  --papir:#FFFBED; --strek:#FAEFCD; --aksent:#1A2381;
  --brod:#37342A; --blekk:#1E1C15; --damp:#6E6A55;
}
body[data-prosjekt="milanosport"]{
  /* 213° blått. Metning 0,41, lyshet 0,53. Eneste kalde prosjekt. */
  --papir:#D7E6F9; --strek:#C5D4E6; --aksent:#254D7E;
  --brod:#2A3037; --blekk:#15191E; --damp:#55606E;
}
body[data-prosjekt="unge-asylsokere"]{
  /* 35° oker. Metning 0,47, lyshet 0,49. */
  --papir:#F7E7CF; --strek:#E3D4BF; --aksent:#7F5924;
  --brod:#37312A; --blekk:#1E1A15; --damp:#6E6155;
}
body[data-prosjekt="personlige"]{
  /* 25° rosebrun, den minst mettede av de varme. Metning 0,39, lyshet 0,57. */
  --papir:#FBEADF; --strek:#EAD8CB; --aksent:#7E4B26;
  --brod:#372F2A; --blekk:#1E1915; --damp:#6E5D55;
}

/* LINJEBRUDD. Nettleseren bryter grådig, én linje av gangen, og etterlater
   gjerne ett ord alene på siste linje — «Vi utforsket løsningene med to /
   linser». `balance` lar den se hele blokka under ett og fordele ordene jevnt,
   `pretty` rydder bare bort horunger i brødtekst. Begge er responsive: de
   regner på nytt ved hver bredde, i motsetning til et hardkodet <br>.
   Der en frase ALDRI skal deles står det &nbsp; i markupet i stedet. */
:where(.sak-tittel,.spalte h2,.vending .spm,.prinsipper p,.sitat,.sitat p,
       .lead,.videre .tittel,.trapp p,.opptelling .hva,
       .vending .anslag,.funn .trinn,.linsetekst h3,.mockup-hint,
       .utgangspunkt .spm,.paastand,.nyretning h3,.behov .nokkel){text-wrap:balance;}
:where(.spalte p,.funn p,.linsetekst p,.oppsum-tekst p,.kolofon dd){text-wrap:pretty;}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--papir);
  color:var(--blekk);
  font-family:var(--f-grot);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
figure{margin:0;}
blockquote{margin:0;}

a:focus-visible{outline:2px solid var(--aksent);outline-offset:4px;}
/* Sto bare i site.css, og prosjektsidene lenker ikke inn den. Uten regelen
   rendret js/skjermmockup.js sine seks punktetiketter — «Et avgrenset
   kildegrunnlag», «Verktøyet forklarer seg selv» og de fire andre — som synlig
   svart tekst strødd oppå skjermbildet i mockupen. */
.visuelt-skjult{
  position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

.skip{position:absolute;left:-999px;background:var(--blekk);color:var(--papir);padding:12px 18px;z-index:200;}
.skip:focus{left:0;top:0;}

/* --------------------------------------------------------------------------
   TOPPEN. Fast, med papir i bunnen slik at bildespalta ruller under den
   uten å stikke fram bak navnet.
   -------------------------------------------------------------------------- */
.topp{
  position:fixed;inset:0 0 auto 0;z-index:50;
  height:var(--hdr);
  background:var(--papir);
}
/* Egen innerboks, ikke padding på den faste toppen: navnet skal stå på samme
   vertikal som oppsummeringa under, også når vinduet er bredere enn 1280. */
.topp-inn{
  max-width:calc(var(--sak-maks) + var(--marg) * 2);
  height:100%;margin:0 auto;padding:0 var(--marg);
  display:flex;align-items:center;justify-content:space-between;
}
.topp .navn,
.topp .tilbake{
  font-size:15px;font-weight:600;
  text-transform:uppercase;letter-spacing:.01em;
  margin:0;
}
.topp .tilbake{font-weight:400;}
.topp a:hover{color:var(--aksent);}

/* --------------------------------------------------------------------------
   SAKA. To spalter med en bred renne imellom.
   -------------------------------------------------------------------------- */
.sak{
  display:grid;
  /* Tre spor og ikke tre fr-andeler: venstrespalta og renna skal vokse etter
     sine egne kurver, mens ALT som blir til overs går til bildespalta. Med
     rene fr-andeler tok venstrespalta 22,7 % også ved 1900 px, og en
     metadataspalte på 430 px er ikke luft — den er bare bred. */
  grid-template-columns:var(--oppsum-b) var(--renne) minmax(0,1fr);
  max-width:calc(var(--sak-maks) + var(--marg) * 2);
  margin:0 auto;
  padding:0 var(--marg);
}
.oppsum{grid-column:1;}
.spalte{grid-column:3;}

/* --------------------------------------------------------------------------
   OPPSUMMERINGA. Står stille i én vindushøyde mens bildespalta ruller forbi.
   Rollene er forankret mot bunnen med margin-top:auto, slik de er i
   referansen (der de ligger på y 604 av 720).
   -------------------------------------------------------------------------- */
.oppsum{
  position:sticky;top:0;
  height:100vh;
  display:flex;flex-direction:column;
  padding:calc(var(--hdr) + 16px) 0 var(--marg);
}

/* LUFTEN OVER TITTELEN — det tydeligste grepet fra referansen, og grunnen til
   at den er et flex-ledd og ikke padding:

   spalta er låst til 100vh. En fast toppmarg som kler en kort oppsummering
   dytter en lang en ned i det innebygde rullefeltet i .oppsum-prosa — målt på
   dugnadsånden, som har 600 tegn i utfordringa: 128 px av teksten forsvant ved
   1440 × 900 da luften var padding. Som flex-ledd med krympefaktor 60 mot
   tekstens 1 gir luften etter FØR teksten gjør det, og bare på de sidene som
   trenger det. De korte oppsummeringene beholder hele luften.

   Målt i vh og ikke i piksler av samme grunn som ellers: 104 px er en helt
   annen andel av en 1080-skjerm enn av en 800. */
.oppsum::before{
  content:"";
  flex:0 60 clamp(24px,8vh,104px);
  /* Gulv, ikke 0: ved 1024 × 768 krympet begge leddene helt bort, og tittelen
     kom bort i UTFORDRING-etiketten under seg. Under gulvet er det bedre at
     teksten ruller enn at rytmen forsvinner. */
  min-height:12px;
}


/* TITTELEN. Det finnes bare én på sida — den samme som fyller åpningsskjermen
   reiser inn hit. Skriftgraden under er den den lander på; skriptet skalerer
   den opp og flytter den ut til midten av vindusflata ved scrollTop 0, og
   interpolerer inn igjen mens man scroller. transform-origin må stå i hjørnet
   for at regnestykket i js/prosjektside.js skal gå opp. */
.sak-tittel{
  font-family:var(--f-serif);
  font-weight:400;
  /* Ned fra clamp(30px,3.3vw,44px). Referansens tilbakeholdenhet ligger i at
     tittelen er en merkelapp på spalta, ikke sidas største element — det er
     bildene som skal bære. Skriptet skalerer den fortsatt opp til
     åpningsskjermen og regner ut reisen fra den målte sluttgraden, så
     åpningen er uendret.

     Hevet igjen 09.09.2026: 34 px var for lite, og tittelen er en tittel — den
     står på SAMME grad som overskriftene i bildespalta. Venstrespalta er
     samtidig bredere (352 → 420), så den lengste tittelen i porteføljen
     fortsatt får plass på to linjer og ikke flere. */
  font-size:var(--grad-tittel);
  line-height:1.08;
  letter-spacing:-.012em;
  /* Luften UNDER tittelen ligger ikke her, men som et flex-ledd i
     .oppsum-tekst::before — av samme grunn som luften over: en marg kan ikke
     gi etter når spalta er full, et flex-ledd kan. */
  margin:0;
  /* Blokka skal være akkurat så bred som den bredeste linja, ikke så bred som
     spalta. Skriptet skalerer HELE h1-en fra hjørnet og sentrerer den etter
     TEKSTENS bredde (målt med en Range), så en blokk med tom luft til høyre
     får den luften skalert med — ved 1280 ble det en 868 px bred boks som stakk
     18-84 px utenfor vindusflata og ga vannrett rullefelt på tre av sidene.
     Med fit-content faller de to breddene sammen, og skriptets tak på 80 % av
     flata holder. max-width hindrer at en lang tittel sprenger spalta. */
  width:fit-content;
  max-width:100%;
  transform-origin:0 0;
  position:relative;z-index:2;
  will-change:transform;
}

/* Teksten under tittelen. Denne, og bare denne, slås på når man scroller.
   Rullefeltet ligger her og ikke på .oppsum: et overflow på .oppsum ville
   klippet tittelen når den er skalert ut over spaltebredda. */
.oppsum-tekst{
  /* Basis auto og ikke 0: leddet over tittelen kan bare gi etter hvis
     flexboksen VET at summen er for høy, og med basis 0 er tekstens ønskede
     høyde usynlig for det regnestykket. */
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;
  transition:opacity .6s ease, visibility .6s ease;
}
/* Luften mellom tittelen og oppsummeringa. Samme konstruksjon som .oppsum
   ::before, ett nivå ned: krympefaktor 60 mot prosaens 1, så avstanden gir
   etter før teksten gjør det. */
.oppsum-tekst::before{
  content:"";
  flex:0 60 clamp(20px,4.6vh,56px);
  min-height:16px;
}

/* Bare prosaen ruller. Rollene ligger utenfor rulleflata, så de står synlig
   nederst i spalta uansett hvor lang teksten er — før lå de inni, og en lang
   utfordringstekst dyttet dem ut av syne.

   Basis auto og ikke 0, av samme grunn som på .oppsum-tekst: med basis 0 ser
   ikke flexboksen at teksten trenger mer plass enn den har, og da krymper
   leddet over aldri. */
.oppsum-prosa{flex:1 1 auto;min-height:0;overflow-y:auto;}
/* Klassen settes av js/prosjektside.js. Uten JS blir teksten aldri skjult. */
.oppsum-tekst.kan-skjules{opacity:0;visibility:hidden;}
.oppsum-tekst.kan-skjules.vist{opacity:1;visibility:visible;}

.oppsum-tekst h2{
  font-size:15px;font-weight:500;
  text-transform:uppercase;letter-spacing:.015em;
  margin:0 0 10px;
}
/* Leading og avsnittsmarg står med vilje STRAMT her, i motsetning til i
   bildespalta. Venstrespalta er låst til 100vh: hver piksel luft mellom
   linjene er en piksel mindre plass til teksten, og prøvde jeg 1.5/26 forsvant
   58 px av dugnadsåndens utfordring ned i det innebygde rullefeltet. Luften i
   denne spalta hører hjemme rundt tittelen, ikke inni prosaen. */
.oppsum-tekst p{
  margin:0 0 20px;
  color:var(--brod);
  font-size:15px;line-height:1.4;
}
.oppsum-tekst p:last-of-type{margin-bottom:0;}

/* Rollene. Svarte piller i referansen; her prosjektets blekk mot papiret. */
.roller{flex:none;padding-top:clamp(22px,3.2vh,38px);}
.roller h2{font-size:var(--grad-liten);letter-spacing:.04em;margin-bottom:12px;}
.roller ul{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;}
.roller li{
  background:var(--blekk);color:var(--papir);
  font-size:var(--grad-liten);line-height:1;
  text-transform:uppercase;letter-spacing:.02em;
  padding:9px 15px 10px;
  border-radius:999px;
}

/* --------------------------------------------------------------------------
   BILDESPALTA. Bilde først, kort bildetekst under, og noen få store
   serif-mellomtitler som deler den opp. All brødteksten om problem og
   løsning står til venstre — det er den flyttingen som gjør referansen stram.
   -------------------------------------------------------------------------- */
.spalte{padding:calc(100vh + var(--hdr)) 0 0;}
.spalte figure img{width:100%;}
.spalte :where(p,ul,ol,dl){margin:0;}

.spalte h2,
.spalte .nyretning h3{
  font-family:var(--f-serif);
  font-weight:400;
  font-size:var(--grad-tittel);
  line-height:1.05;
  letter-spacing:-.012em;
  margin:0;
  max-width:var(--maal-tekst);
}

/* Bildetekstlinja: prosjektets egen tekst til venstre, konteksten i grått
   til høyre. Rett fra referansen (PASTAS GALLO / WORK AT IBOO AGENCY). */
.kred{
  display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  margin-top:14px;
  font-size:var(--grad-liten);line-height:1.35;
  text-transform:uppercase;letter-spacing:.025em;
}
.kred .hoyre{color:var(--damp);text-align:right;max-width:20ch;}
/* Et enkeltord som er lengre enn boksen — «Domstoladministrasjonen» er 23
   tegn mot 20ch — flyter ellers ut av den og drar hele sida med seg. */
.kred span{overflow-wrap:anywhere;}

figcaption{
  margin-top:14px;
  font-size:var(--grad-liten);line-height:1.35;
  text-transform:uppercase;letter-spacing:.025em;
}

/* To bilder ved siden av hverandre. Bildetekstene er de samme små
   versalene som ellers — referansen har ingen setninger under bildene,
   bare korte merkelapper.

   Bildetekstene skyves ned til én felles bunnlinje. To bilder med ulikt
   format blir ulikt høye, og uten dette havnet tekstene under dem i
   forskjellig høyde — det var noe av det som gjorde spalta urolig. */
.par{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.4vw,26px);}
.par figure{display:flex;flex-direction:column;}
.par figcaption{margin-top:auto;padding-top:14px;}

/* Rader der begge er fotografi, og der beskjæring derfor er greit: samme
   format på begge, så raden blir en jevn stripe. Brukes ikke på skjermbilder
   — der ville beskjæringa spist innhold. */
.par.jevn figure img{aspect-ratio:3/2;object-fit:cover;}

/* En smalere rad, for stående skjermbilder som ikke skal fylle spalta.
   Et mobilskjermbilde i full spaltebredde blir over 1500 px høyt. Taket i
   piksler kom med den brede spalta: 62 % av 1024 er 635, og da vokser
   mobilskjermbildet igjen forbi det som er lesbart. */
.par.smale{max-width:min(62%,520px);}

/* Brødtekst i bildespalta. Brukes sparsomt — hovedregelen er at teksten står
   til venstre — men noen prosjekt er research-tunge og har funn som må stå ved
   siden av bildene. Smalere enn spalta: 771 px er for bredt for én tekstlinje. */
.spalte p{
  max-width:var(--maal-tekst);
  color:var(--brod);
  font-size:var(--grad-brod);line-height:1.6;
}

.sitat{
  font-family:var(--f-serif);
  font-weight:400;
  font-size:var(--grad-tittel);
  line-height:1.14;
  letter-spacing:-.01em;
  max-width:var(--maal-tekst);
}
.sitat p{margin:0;}

/* Demovideo. Samme bredde som bildene, ingen ramme rundt. */
.video video{width:100%;height:auto;display:block;background:var(--strek);}

/* Opptellinga på diplomsida: fire tall som sier omfanget av feltarbeidet. */
.opptelling{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,2.4vw,44px);}
.opptelling li{display:flex;flex-direction:column;gap:6px;}
.opptelling .tall{
  font-family:var(--f-serif);font-size:clamp(38px,4vw,58px);line-height:1;
  letter-spacing:-.02em;
}
.opptelling .hva{font-size:var(--grad-liten);line-height:1.4;color:var(--brod);}

.sitat cite{
  display:block;margin-top:16px;
  font-family:var(--f-grot);font-style:normal;
  font-size:var(--grad-liten);text-transform:uppercase;letter-spacing:.025em;color:var(--damp);
}

/* Kolofonen. Har ingen plass i referansens venstrespalte, men skal ikke
   forsvinne — den ligger nederst i bildespalta. */
.kolofon{
  padding-top:22px;
  border-top:1px solid var(--strek);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px 40px;
}
.kolofon div{min-width:0;}
.kolofon dt{
  font-size:var(--grad-liten);text-transform:uppercase;letter-spacing:.03em;
  color:var(--damp);margin:0 0 5px;
}
.kolofon dd{margin:0;font-size:15px;line-height:1.45;color:var(--brod);}

.videre{
  padding:26px 0 90px;
  border-top:1px solid var(--strek);
  display:flex;justify-content:space-between;gap:24px;
}
.videre .retning{
  display:block;font-size:var(--grad-liten);text-transform:uppercase;letter-spacing:.03em;
  color:var(--damp);margin-bottom:6px;
}
.videre .tittel{font-family:var(--f-serif);font-size:26px;line-height:1.1;}
.videre .neste{text-align:right;}
.videre a:hover .tittel{color:var(--aksent);}

/* --------------------------------------------------------------------------
   VERTIKAL RYTME I BILDESPALTA.

   Denne blokka står med vilje etter alle elementreglene over. Flere av dem
   nuller ut sin egen marg — .spalte p, .opptelling, .mockup — og lå rytmen
   først, ville de overstyrt den. Det var nettopp dét som gjorde spalta
   rotete: mockupen og avsnittet etter opptellinga fikk null luft over seg
   mens alt annet fikk 64, så avstandene hoppet fram og tilbake.

   Fire avstander, ikke flere: --luft-bolk mellom bolker, --luft-el mellom
   elementer i samme bolk, 24 fra overskrift til det den innleder, 16 mellom
   to avsnitt. De to første er nå fluide (se :root): 64 og 104 var målt mot en
   spalte på 771 px, og de samme tallene under et bilde på 1024 leser som
   halvparten så mye luft.
   -------------------------------------------------------------------------- */
.spalte > * + *{margin-top:var(--luft-el);}
.spalte > h2{margin-top:var(--luft-bolk);}
.spalte > h2 + *{margin-top:clamp(24px,2.4vw,40px);}
.spalte > p + p{margin-top:16px;}
.spalte > .sitat,
.spalte > .kolofon{margin-top:var(--luft-bolk);}
.spalte > .lenkelinje{margin-top:40px;}
.spalte > .videre{margin-top:var(--luft-bolk);}

/* --------------------------------------------------------------------------
   FORTELLINGA PÅ SAKSBLIKK-SIDA. Bolkene under bygger på elementene som
   allerede fantes i spalta — .sitat, .opptelling, .par, figure — og legger
   bare til de gradene og avstandene som skal til for at casen leses som ett
   sammenhengende scroll. Ingen bokser, ingen rammer: kontrasten ligger i
   skriftgrad, luft og bildebredde.
   -------------------------------------------------------------------------- */

/* VENDINGA. --p stryker den gamle problemstillingen ut, --q toner den nye
   inn. Begge står på 1 her, slik at bolken er ferdig lest uten JavaScript og
   for den som har skrudd av bevegelse; js/prosjektside.js setter dem lavere
   og teller dem opp mens man scroller forbi. */
.vending{--p:1;--q:1;}
.spalte > .vending{margin-top:var(--luft-stor);}

.vending .anslag{
  max-width:var(--maal-tekst);
  font-size:var(--grad-brod);line-height:1.5;
  color:var(--damp);
  text-transform:uppercase;letter-spacing:.025em;
}
.vending .spm{
  font-family:var(--f-serif);font-weight:400;
  letter-spacing:-.015em;line-height:1.03;
  color:var(--blekk);
  max-width:none;
  margin-top:18px;
}
/* Begge problemstillingene står på SAMME typografiske nivå. Den nye var før
   36-86 mot den gamles 30-60, og leste da som sidas hovedoverskrift — men
   poenget i bolken er at den ene erstattet den andre, ikke at den ene er
   viktigere. Vekten ligger i streken og i rekkefølgen, ikke i graden. */
.vending .spm{font-size:var(--grad-tittel);max-width:var(--maal-tekst);}

/* Streken. Bakgrunnen males per linjefragment — derfor box-decoration-break:
   clone — så prosenten gjelder hver linje for seg og hele påstanden strykes
   ut i én bevegelse i stedet for at bare den første linja får strek. */
.vending .strykbar{
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:0 .56em;
  background-size:calc(var(--p) * 100%) 2px;
}
.vending .etterpaa{
  margin-top:var(--luft-el);
  opacity:var(--q);
  transform:translateY(calc((1 - var(--q)) * 22px));
  transition:opacity .2s linear;
}
.vending .etterpaa .anslag{color:var(--brod);}

/* Aktivitetene. Samme opptelling som før, men satt som et eget øyeblikk:
   tallene er det man skal huske, ikke teksten under. */
.spalte > .opptelling.stor{margin-top:var(--luft-stor);gap:clamp(32px,3.4vw,56px);}
.opptelling.stor .tall{font-size:clamp(52px,6.4vw,96px);}
.opptelling.stor .hva{font-size:var(--grad-liten);max-width:18ch;}

/* Den metodiske overgangen. Bredere grad enn brødteksten ellers, og mye luft
   på begge sider — den skal lese som en pust, ikke som et avsnitt. */
.spalte > .lead{
  margin-top:var(--luft-stor);margin-bottom:var(--luft-bolk);
  max-width:var(--maal-tekst);
  font-size:var(--grad-brod);
  line-height:1.6;
  color:var(--blekk);
}

/* HØYREKANTEN. .bred brøt før ut av spalta med en hel sidemarg og endte helt
   ute ved vindusflata, mens alt annet stoppet ved spaltekanten. Da hadde sida
   to mediekanter — 1549 og 1600 ved en flate på 1600 — og høyresida leste som
   ujevn. Referansen har ÉN: alle bildene stopper på sidemargen, og
   kolofonlinja under toppbildet flukter med bildets kanter.

   Klassen er beholdt fordi den fortsatt betyr noe i markupet — «dette er et
   element i full spaltebredde» — men bredda er nå den samme som alle andre
   får. Kompensert i rutenettet: sidemargen og renna er strammet inn og
   --sak-maks hevet, så bildespalta ble BREDERE av omleggingen, ikke smalere
   (målt 1002 → 1000 ved 1600, 1155 → 1196 ved 1920). */
.bred{width:100%;}

/* En rad der de to bildene ikke er like brede. Det stående bildet får minst
   plass, så raden ikke blir en jevn stripe som alle de andre. */
.par.ulik{grid-template-columns:3fr 2fr;gap:16px;align-items:end;}

/* Prosessillustrasjonen. Ligger på papiret uten ramme, i full spaltebredde. */
.prosessfigur img{width:100%;height:auto;}

/* Linsene. Tegningen er en merkelapp på bolken, ikke motivet: den sto før på
   34 % av spalta, som ved 1000 px ble 340 bred og 724 HØY — tegningen er
   544 × 1158 — og eide dermed en hel skjermhøyde alene. Nå et fast, smalt
   spor, med luften rundt seg i stedet for størrelsen. */
.linsefigur{
  display:grid;grid-template-columns:clamp(80px,8vw,120px) 1fr;
  gap:clamp(40px,5vw,88px);align-items:center;
}
.linsefigur img{width:100%;height:auto;}
.linsetekst{display:flex;flex-direction:column;gap:clamp(40px,4.4vw,72px);}
/* Linsetitlene var en egen serifgrad på 26-36 px. De gjør nøyaktig samme jobb
   som .funn .trinn og .prinsipper .nr — de merker avsnittet under seg — og er
   satt som de, ikke som en overskriftsgrad til. */
.linsetekst h3{
  margin:0 0 10px;
  font-family:var(--f-grot);font-weight:500;
  font-size:var(--grad-liten);line-height:1.35;
  text-transform:uppercase;letter-spacing:.025em;
  color:var(--damp);
}
.linsetekst p{margin:0;max-width:var(--maal-tekst);color:var(--brod);font-size:var(--grad-brod);line-height:1.55;}

/* Funnene i tre trinn: observasjon, læring, konsekvens. Nummereringa er
   ledetråden — derfor ol og ikke ul — og trinnene står som versaler over
   hvert avsnitt slik at bolken kan skannes. */
.funn{list-style:none;margin:0;padding:0;display:grid;gap:clamp(48px,5vw,84px);}
.funn li{display:grid;grid-template-columns:var(--etikett-b) 1fr;gap:28px;align-items:baseline;}
.funn .trinn{
  font-size:var(--grad-liten);line-height:1.35;
  text-transform:uppercase;letter-spacing:.025em;
  color:var(--damp);
}
.funn p{
  margin:0;max-width:var(--maal-tekst);
  font-size:var(--grad-brod);line-height:1.5;color:var(--blekk);
}

/* DEMOEN. Opptaket er 3024 × 1710 med 95 svarte piksler på toppen. Ramma får
   sideforholdet til det som blir igjen, og videoen skyves opp med en negativ
   toppmarg oppgitt i prosent. Prosentmarger regnes mot rammas BREDDE, ikke
   høyde, så -3.1415 % er nøyaktig 95/3024 av bredda på enhver skjerm — derfor
   treffer klippet like presist på mobil som på desktop, uten media queries og
   uten object-fit (som ville skalert bildet og flyttet båndet). */
.demo-ramme{
  aspect-ratio:3024 / 1615;
  overflow:hidden;
  background:var(--papir);
}
.demo-ramme video{
  display:block;width:100%;height:auto;
  margin-top:-3.1415%;
}
.demo figcaption a{border-bottom-width:1px;}

/* Løsningsillustrasjonene. Papiret i dem er farget om til sidas eget, så de
   flyter ut i flata i stedet for å stå som plater oppå den. Derfor heller
   ingen ramme eller bakgrunn her. */
.losning img{width:100%;}

/* DE TRE PRINSIPPENE. Ett utsagn per skjermhøyde-ish: nummeret i margen,
   påstanden i stor serif. Ingen boks rundt — luften er skillet. */
.prinsipper,
.utgangspunkt ol{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(80px,8.4vw,140px);
}
.prinsipper li,
.utgangspunkt li{
  display:grid;grid-template-columns:var(--etikett-b) 1fr;gap:28px;align-items:baseline;
}
.prinsipper .nr,
.utgangspunkt .nr{
  font-size:var(--grad-liten);line-height:1.35;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--damp);
}
.prinsipper p,
.utgangspunkt .spm{
  margin:0;max-width:var(--maal-tekst);
  font-family:var(--f-serif);font-weight:400;
  font-size:var(--grad-tittel);
  line-height:1.06;letter-spacing:-.012em;
  color:var(--blekk);
}

/* TRAPPA. Tre steg med stigende høyde. Kantene tegnes med border i stedet for
   som bilde, så teksten blir stående som tekst og trappa skalerer med spalta. */
.trapp ol{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  align-items:end;
}
.trapp li{display:flex;flex-direction:column;justify-content:flex-end;min-width:0;}
.trapp p{
  margin:0 0 18px;max-width:26ch;
  font-size:var(--grad-brod);line-height:1.45;color:var(--blekk);
}
.trapp b{font-weight:600;}
.trapp .steg{
  border-top:1.5px solid var(--blekk);
  border-left:1.5px solid var(--blekk);
}
/* Bare det siste steget lukkes til høyre — ellers ville de tre kassene lest
   som tre separate bokser i stedet for én sammenhengende trapp. */
.trapp li:last-child .steg{border-right:1.5px solid var(--blekk);}
.trapp li:nth-child(1) .steg{height:96px;}
.trapp li:nth-child(2) .steg{height:168px;}
.trapp li:nth-child(3) .steg{height:240px;}

/* AVSLUTNINGA. Sensorsitatet er konklusjonen på casen og settes deretter.
   Avsnittet må hentes tilbake fra .spalte p, som ellers gir det 17 px. */
.spalte > .sitat.slutt{
  margin-top:calc(var(--luft-stor) * 1.3);
  font-size:var(--grad-tittel);
  line-height:1.08;
  max-width:var(--maal-tekst);
}
.spalte .sitat.slutt p{
  font-size:inherit;line-height:inherit;letter-spacing:inherit;
  max-width:none;color:inherit;
}
.spalte .sitat.slutt cite{margin-top:28px;}

/* Mockupen er sidas ene interaktive element og skal lese som noe man kan
   prøve. Den får derfor mer luft over seg enn rytmen ellers gir en overskrift
   det den innleder — 24-40 px var for lite til at overgangen fra «Prøv
   Saksblikk» leste som en overgang. */
.spalte > h2 + .mockup{margin-top:var(--luft-el);}

/* --------------------------------------------------------------------------
   SKJERMMOCKUPEN. Portert fra site.css:1375, uten NRK-reglene og uten
   avhengigheten til --fig-vid: her fyller den bildespalta på 771 px.
   js/skjermmockup.js og js/skjermer-*.js brukes uendret — de rører bare
   utsnitt og forklaring, ikke oppsettet.
   -------------------------------------------------------------------------- */
/* Fanerada og bruksanvisninga står på samme linje over skjermen: til sammen
   leser de som kontrollene til noe, ikke som en bildetekst under et bilde.
   Hintet lå før i en figcaption UNDER mockupen, der man har rukket å scrolle
   forbi før man får vite at det er noe å gjøre. */
.mockup-topp{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:20px 32px;flex-wrap:wrap;
  margin:0 0 clamp(16px,1.6vw,26px);
}
.mockup-hint{
  margin:0;flex:0 1 auto;max-width:34ch;
  font-size:var(--grad-liten);line-height:1.35;
  text-transform:uppercase;letter-spacing:.025em;
  color:var(--damp);text-align:right;
}
.mockup-faner{display:flex;gap:26px;justify-content:flex-start;margin:0;flex-wrap:wrap;}
/* Fanen er en hårstrek under den valgte, samme virkemiddel som resten av sida. */
.mockup-fane{
  font:inherit;font-size:var(--grad-liten);line-height:1;cursor:pointer;
  text-transform:uppercase;letter-spacing:.025em;
  padding:6px 0;border:0;border-bottom:1px solid transparent;border-radius:0;
  text-align:left;background:transparent;color:var(--damp);
  transition:color .2s, border-color .2s;
}
.mockup-fane:hover{color:var(--blekk);}
.mockup-fane[aria-selected="true"]{color:var(--blekk);border-bottom-color:var(--blekk);}

.mockup-scene{position:relative;}

/* MASKINA ER BORTE. .mac tegnet en MacBook i CSS — mørk ramme med 11 px
   luft rundt skjermen, hakk, avrundede hjørner, slagskygge og en fot som stakk
   20 px ut på hver side. Den gjorde tre ting, alle uheldige: den krympet det
   eneste elementet på sida man kan bruke, den la en grafisk stil på papiret
   som ingen annen bolk har, og foten ga en høyrekant til.

   Elementet står igjen i markupet — .mac-skjerm er både id-bærer og
   posisjoneringsflate for js/skjermmockup.js, og forklaringskortet plasseres
   mot .mockup-scene — men det tegner ingenting lenger. Hårstreken er det
   eneste som skiller prototypen fra papiret, som ellers på sida. */
.mac{position:relative;}
.mac::before,.mac::after{content:none;}
.mac-skjerm{
  position:relative;overflow:hidden;
  aspect-ratio:16/10;background:#fff;
  box-shadow:0 0 0 1px var(--strek);
  isolation:isolate;
}
.mac-skjerm > img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:filter .22s ease;
}
/* Med et aktivt felt blir hele skjermen uskarp, og et lyst slør vasker den
   mot papiret. */
.mockup.er-aktiv .mac-skjerm > img{filter:blur(2px) saturate(.94);}
.mac-skjerm::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--papir);opacity:0;transition:opacity .22s ease;
}
.mockup.er-aktiv .mac-skjerm::after{opacity:.45;}

/* Utsnittet: samme skjermbilde klippet til det aktive feltet, lagt skarpt
   oppå det uskarpe. JS setter de fire prosentene. */
.mockup-utsnitt{
  position:absolute;overflow:hidden;z-index:2;pointer-events:none;
  left:0;top:0;width:0;height:0;
  border-radius:3px;box-shadow:0 0 0 1.5px rgba(20,20,20,.34);
  opacity:0;visibility:hidden;transition:opacity .18s ease;
}
.mockup.er-aktiv .mockup-utsnitt{opacity:1;visibility:visible;}
.mockup-utsnitt img{position:absolute;max-width:none;object-fit:cover;}

/* Feltene er usynlige i hvile — markeringa er utsnittet og sløret. */
.punkt{
  position:absolute;margin:0;padding:0;border:0;border-radius:4px;
  background:transparent;cursor:pointer;z-index:0;
}
.punkt:hover,.punkt:focus-visible,.mockup.er-aktiv .punkt.er-valgt{outline:none;}
.punkt.er-valgt{z-index:3;}
.punkt:focus-visible{box-shadow:0 0 0 3px var(--aksent);}

.mockup-forklaring{
  position:absolute;top:0;left:0;z-index:4;pointer-events:none;
  width:min(320px, 38%);padding:15px 17px;border-radius:7px;
  background:var(--papir);
  box-shadow:0 0 0 1px rgba(20,20,20,.10), 0 14px 30px -16px rgba(0,0,0,.32);
  opacity:0;visibility:hidden;transition:opacity .2s ease;
}
.mockup.er-aktiv .mockup-forklaring{opacity:1;visibility:visible;}
.mockup-forklaring h3{
  margin:0 0 7px;font-family:var(--f-grot);font-weight:500;font-size:16px;
  line-height:1.3;letter-spacing:-.01em;color:var(--blekk);text-transform:none;
}
.mockup-forklaring p{margin:0;font-size:14px;line-height:1.55;color:var(--brod);}

/* Uten JavaScript står bildet der som et vanlig bilde, og da skal ikke
   bildeteksten be noen om å peke på felter som ikke finnes. */
.mockup:not(.er-klar) .mockup-faner,
.mockup:not(.er-klar) .mockup-hint{display:none;}

/* --------------------------------------------------------------------------
   PLAKATRAMMA. Milanosports oversiktsplansje er 1600 × 29438 og kan bare vises
   i en ramme man ruller inni.
   -------------------------------------------------------------------------- */
.plakat-ramme{
  max-height:min(62vh,560px);overflow-y:auto;
  background:#EDE7DA;border:1px solid var(--strek);
}
.plakat-ramme img{width:100%;height:auto;display:block;}

/* Lenke ut av sida — rapport, nettsted. */
/* Lenke ut av sida. Satt som etikett og ikke som brødtekst: den er en
   handling ved siden av innholdet, ikke en setning i det. */
.rapport{
  display:inline-block;
  color:var(--blekk);border-bottom:1px solid var(--blekk);
  font-size:var(--grad-liten);
  text-transform:uppercase;letter-spacing:.025em;
}
.rapport:hover{color:var(--aksent);border-color:var(--aksent);}


/* --------------------------------------------------------------------------
   FORTELLINGA PÅ RELIABLE AI-SIDA. Samme lov som bolkene over: én tittelgrad
   (--grad-tittel), én brødtekstgrad (--grad-brod), én etikettgrad
   (--grad-liten) og ett lesemål (--maal-tekst). Ingen nye grader er innført
   her — bare de oppsettene og avstandene som skal til for at casen leses som
   ett sammenhengende scroll.

   HEROEN har ingen egen regel: figuren bruker .mac og .mac-skjerm, akkurat
   som mockupen lenger ned, men mangler .mockup-klassen. js/skjermmockup.js
   plukker bare opp .mockup, så skjermbildet blir liggende som et stillbilde —
   samme hårstrek og samme 16:10-flate som prototypen, uten interaktiviteten.
   -------------------------------------------------------------------------- */

/* ANSLAGET, den lille versallinja som setter opp et øyeblikk. Lå før bare
   inni .vending; verdiene er de samme, den er bare løftet ut så begge sidene
   kan bruke den. */
.spalte .anslag{
  max-width:var(--maal-tekst);
  font-size:var(--grad-brod);line-height:1.5;
  color:var(--damp);
  text-transform:uppercase;letter-spacing:.025em;
}
/* Et anslag som innleder en bolk oppfører seg som en overskrift gjør: full
   bolkavstand over, og bare 24-40 ned til det den innleder. */
.spalte > .anslag{margin-top:var(--luft-bolk);}
.spalte > .anslag + *{margin-top:clamp(24px,2.4vw,40px);}

/* PÅSTANDENE. De tre setningene som bærer fortellinga — hva vi gjorde, hva vi
   avdekket, hvem vi avdekket det for — settes i tittelgraden og ikke som
   brødtekst. De er ikke overskrifter, så de er ikke h2; men de skal heller
   ikke leses som avsnitt, og på 17 px gjorde de nettopp det.

   Ingen ny grad: dette er den samme serifgraden som .spalte h2, .sitat og
   .prinsipper p. Hierarkiet i bolken kommer av at setningen MELLOM dem står i
   vanlig brødtekst. */
.spalte > .paastand{
  margin-top:var(--luft-stor);
  max-width:var(--maal-tekst);
  font-family:var(--f-serif);font-weight:400;
  font-size:var(--grad-tittel);
  line-height:1.08;letter-spacing:-.012em;
  color:var(--blekk);
}

/* DE TO UTGANGSPUNKTENE bruker prinsippoppsettet over — nummeret i margen,
   spørsmålet i stor serif, luften som skille. Begge spørsmålene står på samme
   typografiske nivå, av samme grunn som de to problemstillingene på
   saksblikk-sida: poenget er at de er to, ikke at det ene veier mer. */
.spalte > .utgangspunkt{margin-top:var(--luft-stor);}
.utgangspunkt > .anslag + ol{margin-top:var(--luft-bolk);}

/* --------------------------------------------------------------------------
   VERKSTEDSBILDENE. Dokumentasjon, ikke galleri: ingen bildetekster, og
   størrelsene varierer så sekvensen får rytme mellom tekstbolkene.
   -------------------------------------------------------------------------- */
/* En skisse som ikke skal fylle spalta. Den legges mot HØYRE og ikke mot
   venstre: sida har én mediekant (se HØYREKANTEN over), og et bilde som
   stopper midt i spalta ville lagt til en ny. */
.dok.smal{max-width:min(52%,560px);margin-left:auto;}

/* De to skissene ved siden av hverandre, der den andre er dyttet ned.
   Forskyvninga er det eneste virkemidlet — begge holder seg i .par.ulik sitt
   rutenett, og raden beholder høyrekanten. */
.par.ulik.forskjovet{align-items:start;}
.par.ulik.forskjovet > :last-child{margin-top:clamp(36px,5.6vw,104px);}

/* --------------------------------------------------------------------------
   BEHOVSKARTET. Ordene, setningene og sitatene står som de sto på plansjene
   fra intervjurundene, og ikonene er klippet ut av de samme plansjene. To
   grupper ved siden av hverandre — ingen tabell, ingen bokser. Det eneste
   skillet er hårstreken under gruppenavnet, som gjør de to lesbare som to.
   -------------------------------------------------------------------------- */
.spalte > .behovskart{
  margin-top:clamp(24px,2.4vw,40px);
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(36px,4.4vw,88px);
}
.behovsgruppe > h3{
  margin:0 0 clamp(26px,2.8vw,44px);
  padding-bottom:13px;
  border-bottom:1px solid var(--blekk);
  font-family:var(--f-grot);font-weight:500;
  font-size:var(--grad-liten);line-height:1.35;
  text-transform:uppercase;letter-spacing:.025em;
  color:var(--blekk);
}
.behovsgruppe ul{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(40px,4.2vw,72px);
}
.behov{display:grid;gap:12px;}
/* Ikonet er en merkelapp, ikke en illustrasjon: det står i etikettstørrelse
   pluss litt, ikke som et motiv. */
.behov > img{width:26px;height:auto;}
/* Nøkkelordet i tittelgraden. Spalta er halvparten av bildespalta, så de
   lengste — «Juridisk rådgivning» — går på én linje ved 1200 px og brytes til
   to under det. Ingen egen grad for dette; det er .spalte h2 sin. */
.behov .nokkel{
  margin:0;max-width:none;
  font-family:var(--f-serif);font-weight:400;
  font-size:var(--grad-tittel);
  line-height:1.04;letter-spacing:-.012em;
  color:var(--blekk);
}
.behov p{
  margin:0;max-width:var(--maal-tekst);
  font-size:var(--grad-brod);line-height:1.5;
  color:var(--brod);
}
/* Sitatet fra intervjuet. Samme grad som setningen over, men i kursiv serif —
   det skal leses som en annens stemme og ikke som enda et behov. */
.behov .rop{
  margin-top:2px;
  font-family:var(--f-serif);font-style:italic;
  line-height:1.35;
  color:var(--blekk);
}

/* --------------------------------------------------------------------------
   SPORSKIFTET. De to store overskriftene — dagens løsning, og de to nye
   retningene — får en hårstrek over seg i full spaltebredde. Det er det
   eneste stedet på sida en slik strek finnes, og det er med vilje: det er her
   casen bytter perspektiv, fra å forbedre det som er til å skissere det som
   kan bli.

   Streken ligger på en wrapper og ikke på h2-en selv, fordi .spalte h2 er
   låst til lesemålet på 560 px: en border-top der ble en 560 px lang stump
   midt i en spalte på 900, som leste som en feil og ikke som et skille.
   Wrapperen er full spaltebredde, overskrifta inni beholder målet sitt. */
.spalte > .sporskifte{
  margin-top:var(--luft-stor);
  padding-top:clamp(26px,2.8vw,44px);
  border-top:1px solid var(--blekk);
}
/* Overskrifta inni wrapperen når ikke .spalte > h2-reglene, så rytmen ned til
   det den innleder må settes her. Mockupen får elementavstand, som før. */
.spalte > .sporskifte + *{margin-top:clamp(24px,2.4vw,40px);}
.spalte > .sporskifte + .mockup{margin-top:var(--luft-el);}

/* --------------------------------------------------------------------------
   DE TO RETNINGENE. Én om gangen: merkelapp, tittel, hvem den er for, og så
   plansjen i full spaltebredde. Tittelen deler regel med .spalte h2 over.
   -------------------------------------------------------------------------- */
/* Full bolkavstand MELLOM de to retningene, men mindre ned fra
   bolkoverskrifta til den første: overskrifta og retningstittelen står i
   samme grad, og med 144 px imellom leste de som to sidestilte bolker i
   stedet for som «her er de to». */
.spalte > .nyretning{margin-top:var(--luft-bolk);}
.spalte > .sporskifte + .nyretning{margin-top:clamp(40px,4vw,72px);}
/* Merkelappen bærer både nummeret og hvem retningen er for. De sto på hver
   sin linje før, og «Ikke-jurist i kommune» sto da i samme grad og samme
   kulør 40 px over det samme ordparet inne i plansjen — et ekko, ikke en
   opplysning. */
.nyretning > .nr{
  display:block;max-width:var(--maal-tekst);
  font-size:var(--grad-liten);line-height:1.35;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--damp);
}
.nyretning > h3{margin-top:16px;}
/* «Nisje/spisset» skal ikke deles på skråstreken. */
.nyretning .helord{white-space:nowrap;}
.nyretning > figure{margin-top:clamp(28px,3vw,52px);}

/* SLUTTORDET. Siste setning i casen, satt som de andre påstandene, men med
   halvannen storluft over seg — samme grep som sensorsitatet på saksblikk. */
.spalte > .paastand.slutt{margin-top:calc(var(--luft-stor) * 1.3);}
.spalte > .paastand.slutt + .kolofon{margin-top:var(--luft-stor);}

/* --------------------------------------------------------------------------
   LAVE VINDUER. Oppsummeringa skal få plass i én vindushøyde også på en
   1366 × 768-skjerm, der flata blir rundt 660 px. Bare innstramming — ingen
   omlegging av oppsettet.
   -------------------------------------------------------------------------- */
@media (min-width:901px) and (max-height:820px){
  /* Grensa er flyttet fra 900 til 820: luften over tittelen måles nå i vh og
     krymper av seg selv, så en 1440 × 900-skjerm (760 px flate) trenger ikke
     lenger innstrammingen — den fikk før 12 px over tittelen og var dermed
     unntatt hele poenget med omlegginga. Under 820 er det fortsatt for trangt
     til å la clampene stå alene. */
  .oppsum{padding-top:calc(var(--hdr) + 16px);}
  /* Graden er IKKE strammet inn her lenger. Låsen på 26 px var en løsning fra
     før luften rundt tittelen ble elastiske flex-ledd: da spiste en stor
     tittel av teksten, nå gir leddene etter i stedet. Målt ved 1280 × 800 med
     låsen fjernet: tittelen 26 → 39,7 px, skjult rulling i prosaen 0-4 px på
     alle seks sidene. Låsen gjorde bare at h1 ble MINDRE enn seksjonstitlene
     på en helt vanlig laptop. */
  .oppsum-tekst h2{margin-bottom:7px;}
  .oppsum-tekst p{line-height:1.36;margin-bottom:16px;}
  .roller{padding-top:16px;}
  .roller h2{margin-bottom:8px;}
  .roller li{padding:6px 12px 7px;}
}

/* --------------------------------------------------------------------------
   RESPONSIVT. Under 900 px faller de to spaltene sammen til én.
   Oppsummeringa mister sticky og legger seg som en vanlig blokk over bildene.
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  :root{--marg:22px;}
  .sak{grid-template-columns:1fr;}
  .oppsum,.spalte{grid-column:1;}
  /* Venstrespalta forsvinner som spalte, men luften over tittelen skal ikke
     forsvinne med den — den er hele poenget i punkt 2, også her. */
  .oppsum{
    position:static;height:auto;
    /* Luften over tittelen kommer fra .oppsum::before også her — spalta er
       ikke lenger låst til 100vh, så leddet krymper ikke, og padding oppå det
       ville telt den samme luften to ganger. */
    padding:calc(var(--hdr) + 10px) 0 0;
  }
  .sak-tittel{font-size:clamp(30px,8vw,40px);}
  .oppsum-tekst::before{flex-basis:clamp(28px,7vw,40px);}
  .roller{margin-top:0;padding-top:32px;}
  .spalte{padding-top:clamp(48px,12vw,72px);}   /* nuller ut 100vh-luften */
  .spalte > * + *{margin-top:48px;}
  .spalte > h2,
  .spalte > .sitat,
  .spalte > .kolofon{margin-top:76px;}
  .spalte > h2 + *{margin-top:20px;}
  .spalte > p + p{margin-top:16px;}
  .par{grid-template-columns:1fr;gap:48px;}
  /* .smale finnes for at et stående skjermbilde ikke skal fylle en spalte på
     tusen piksler. Når raden er stablet til én spalte på en telefon, gjør taket
     bare bildene små — 215 av 346 tilgjengelige piksler. */
  .par.smale{max-width:none;}
  .opptelling{grid-template-columns:1fr 1fr;gap:20px;}
  .spalte > .vending,
  .spalte > .opptelling.stor,
  .spalte > .lead{margin-top:96px;}
  .spalte > .lead{margin-bottom:60px;}
  .vending .etterpaa{margin-top:48px;}
  .opptelling.stor{gap:26px;}
  .opptelling.stor .tall{font-size:clamp(46px,13vw,72px);}
  .bred{width:100%;}
  .par.ulik{grid-template-columns:1fr;gap:48px;}
  .linsefigur{grid-template-columns:1fr;gap:36px;justify-items:start;}
  .linsefigur img{max-width:118px;}
  .linsetekst{gap:32px;}
  .funn{gap:44px;}
  .funn li{grid-template-columns:1fr;gap:10px;}
  .prinsipper,
  .utgangspunkt ol{gap:64px;}
  .prinsipper li,
  .utgangspunkt li{grid-template-columns:1fr;gap:12px;}
  .prinsipper p,
  .utgangspunkt .spm{max-width:none;}
  .trapp ol{grid-template-columns:1fr;gap:32px;align-items:stretch;}
  .trapp li{flex-direction:column;}
  .trapp p{margin-bottom:12px;max-width:none;}
  .trapp .steg{border-right:1.5px solid var(--blekk);}
  .trapp li:nth-child(1) .steg{height:44px;}
  .trapp li:nth-child(2) .steg{height:72px;}
  .trapp li:nth-child(3) .steg{height:100px;}
  .spalte > .sitat.slutt{margin-top:112px;max-width:none;}

  /* Reliable AI. Påstandene og de to utgangspunktene får samme innstramming
     som de andre store øyeblikkene; behovskartet faller til én spalte, og de
     to gruppene skilles da av luft i stedet for av å stå side om side. */
  .spalte > .paastand,
  .spalte > .utgangspunkt{margin-top:96px;}
  .spalte > .paastand.slutt{margin-top:112px;}
  .spalte > .paastand{max-width:none;}
  .utgangspunkt > .anslag + ol{margin-top:44px;}
  .spalte > .behovskart{grid-template-columns:1fr;gap:64px;}
  .behov .nokkel,
  .behov p{max-width:none;}
  .dok.smal{max-width:none;}
  .par.ulik.forskjovet > :last-child{margin-top:0;}
  .spalte > .sporskifte{margin-top:96px;padding-top:24px;}
  .spalte > .nyretning{margin-top:76px;}
  .spalte > .sporskifte + .nyretning{margin-top:40px;}
  .kolofon{grid-template-columns:1fr;}
  .videre{flex-direction:column;}
  .videre .neste{text-align:left;}
}

@media (prefers-reduced-motion:reduce){
  .oppsum-tekst{transition:none;}
  /* Uten reisen gir en tom vindushøyde på toppen ingen mening. */
  .spalte{padding-top:calc(var(--hdr) + 24px);}
}