/* ------------------------------------------------------------------
   fimbul.tech — Nivlheim Design System
   Sju farger, to skrifter, ingenting annet.
   Oransje er en peker, ikke en flate: maks én fylt oransje knapp per
   visning. Ingen gradienter. Ingen skygger i ro. Skiller er hårstreker.
   ------------------------------------------------------------------ */

:root{
  /* Fargepalett — verbatim fra Designmanual Nivlheim AS */
  --ink-900:#222222;
  --navy-700:#31394E;
  --grey-600:#777777;
  --grey-300:#c7c7c7;
  --grey-200:#e7e7e7;
  --grey-100:#f2f2f2;
  --white:#ffffff;
  --orange-500:#F1782C;

  /* Alfaderivater — den eneste tillatte fargematematikken */
  --white-a-16:rgba(255,255,255,.16);
  --white-a-64:rgba(255,255,255,.64);
  --orange-a-24:rgba(241,120,44,.24);
  --orange-a-40:rgba(241,120,44,.4);

  /* Skrift. Systemfallbackene er valgt for å ligge nær i bredde,
     slik at ombrekkingen ikke hopper mens Adobe-kittet laster. */
  --font-display:"gravesend-sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-text:"proxima-nova","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* Rom — 4 px-skala */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-9:96px; --space-10:128px;

  --sidepadding:20px;
  --bredde-topp:1180px;   /* topp og tittelfelt */
  --bredde-lese:880px;    /* lesestoff */
  --bredde-episode:760px; /* episodesiden */

  /* Form — nesten firkantet. Ingenting er «rundet». */
  --radius-md:3px;
  --radius-lg:4px;
  --strek:4px;

  /* Bevegelse — kort og flatt */
  --tid-trykk:80ms;
  --tid-hover:140ms;
  --tid-overlegg:200ms;
  --ease:cubic-bezier(.2,0,.2,1);

  --fokus-ytre:var(--ink-900);
}

@media (prefers-reduced-motion:reduce){
  :root{--tid-trykk:0ms;--tid-hover:0ms;--tid-overlegg:0ms}
}

/* ---------- Grunnlag ---------- */

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  font-family:var(--font-text);
  font-size:18px;
  line-height:1.7;
  color:var(--ink-900);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}

img{max-width:100%}

::selection{background:var(--orange-a-24)}

/* Tall som står alene skal ha tabulære siffer */
.tall{font-variant-numeric:tabular-nums}

/* Leses av skjermleser, vises ikke. Gir episodenummeret til dem som
   ikke ser det store sifferet ved siden av. */
.visuelt-skjult{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Fokus fjernes aldri. Ringen er totonet fordi oransje alene bare
   måler 2,81:1 mot hvitt og ikke klarerer 3:1. */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--orange-500),0 0 0 4px var(--fokus-ytre);
}

/* Mørke flater snur den ytre ringen til hvit */
.fimbul-topp,.fimbul-hero,.fimbul-episodehode,.fimbul-kontakt{--fokus-ytre:var(--white)}

/* Standardlenke: enkel understreking, ikke dobbel */
a{
  color:var(--ink-900);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-decoration-color:var(--orange-a-40);
  text-underline-offset:3px;
  transition:color var(--tid-hover) var(--ease),
             text-decoration-color var(--tid-hover) var(--ease);
}
a:hover{color:var(--orange-500);text-decoration-color:var(--orange-500)}

/* På mørk flate er lenkefargen hvit, med samme oransje understreking */
.fimbul-hero a,.fimbul-kontakt a,.fimbul-episodehode a{color:var(--white)}
.fimbul-hero a:hover,.fimbul-kontakt a:hover,.fimbul-episodehode a:hover{color:var(--white)}

.fimbul-inn{max-width:var(--bredde-topp);margin:0 auto;padding-inline:var(--sidepadding)}
.fimbul-inn--lese{max-width:var(--bredde-lese)}
.fimbul-inn--episode{max-width:var(--bredde-episode)}

/* Overtekst: 12 px halvfet versaler */
.fimbul-overtekst{
  margin:0;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.4;
}

/* ---------- Horisontlinjen ----------
   Hårstrek i full bredde med et 96×4 px oransje segment ved containerens
   venstre kant, forskjøvet 2 px opp slik at det ligger midt på streken. */

.fimbul-horisont{border-top:1px solid var(--white-a-16)}
.fimbul-horisont__peker{
  width:96px;height:var(--strek);
  background:var(--orange-500);
  margin-top:-2px;
}

/* ---------- Topp ---------- */

.fimbul-topp{background:var(--navy-700);color:var(--white)}

.fimbul-topp__inn{
  display:flex;flex-wrap:wrap;gap:var(--space-4);
  align-items:center;justify-content:space-between;
  padding-block:18px;
}

.fimbul-topp__merke{
  display:flex;align-items:center;gap:14px;
  color:var(--white);text-decoration:none;
}
.fimbul-topp__merke:hover{color:var(--white)}
.fimbul-topp__logo{display:block;width:44px;height:44px}
.fimbul-topp__tekst{display:flex;flex-direction:column;gap:3px}
.fimbul-topp__navn{
  font-family:var(--font-display);font-weight:700;font-size:22px;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.05;
}
.fimbul-topp__person{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;line-height:1.2;
}

.fimbul-nav{
  display:flex;align-items:center;gap:var(--space-4);
  font-size:14px;letter-spacing:.12em;text-transform:uppercase;
}
/* Gjennomsiktig kant i ro, slik at teksten ikke flytter seg på hover */
.fimbul-nav a{
  color:var(--white);text-decoration:none;
  padding-block:10px;
  border-bottom:2px solid transparent;
  transition:border-color var(--tid-hover) var(--ease);
}
.fimbul-nav a:hover{border-bottom-color:var(--white-a-64)}
.fimbul-nav a[aria-current="page"]{border-bottom-color:var(--orange-500)}
.fimbul-skille{color:var(--white-a-64)}

/* ---------- Forsidens tittelfelt ---------- */

.fimbul-hero{background:var(--navy-700);color:var(--white)}
.fimbul-hero__topp{padding-top:var(--space-8)}

/* Gravesend Sans har 0,087 em venstre sidebæring på store bokstaver.
   Uten korreksjon står navnet synlig innrykket mot teksten over og under. */
.fimbul-hero__navn{
  margin:28px 0 0;
  margin-left:-.087em;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(58px,14.5vw,176px);
  letter-spacing:.06em;line-height:.9;
  text-transform:uppercase;color:var(--white);
}

.fimbul-hero__horisont{margin-top:56px}

.fimbul-hero__spalter{
  display:grid;gap:var(--space-7);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  align-items:start;
  padding-top:var(--space-7);
}

.fimbul-hero__ingress{
  margin:0;
  font-size:clamp(20px,2.3vw,25px);
  line-height:1.6;max-width:26em;
}

.fimbul-hor{margin-top:40px;display:flex;flex-direction:column;gap:var(--space-3)}
.fimbul-hor__rad{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px}
.fimbul-hor__merkelapp{
  font-weight:700;font-size:16px;
  letter-spacing:.12em;text-transform:uppercase;
}
.fimbul-hor__rad a{font-size:18px;text-underline-offset:4px}
.fimbul-hor__annen{margin:0;font-size:16px}

.fimbul-hero__portrett{justify-self:start;max-width:340px;width:100%}
/* Bildet er allerede beskåret kvadratisk mot samme utsnitt som designet */
.fimbul-hero__portrett img{
  display:block;width:100%;height:auto;
  aspect-ratio:1/1;object-fit:cover;
}

/* ---------- Tallraden ----------
   Faktapåstander, ikke et banner. Ingen farge, ingen ramme, ingen animasjon. */

.fimbul-hero__bunn{padding-bottom:72px}
.fimbul-tall{
  margin-top:var(--space-8);
  border-top:1px solid var(--white-a-16);
  padding-top:var(--space-6);
  display:flex;flex-wrap:wrap;gap:32px 72px;
}
.fimbul-tall__post{display:flex;flex-direction:column;gap:10px}
.fimbul-tall__verdi{
  font-family:var(--font-display);font-weight:700;font-size:34px;
  letter-spacing:.04em;line-height:1;
  font-variant-numeric:tabular-nums;
}

/* ---------- Episodeoversiktens tittelfelt ---------- */

.fimbul-hero__navn--liten{
  margin:0;
  margin-left:-.087em;   /* samme sidebæringskorreksjon som FIMBUL */
  font-size:clamp(44px,8vw,96px);
  line-height:1;
}
.fimbul-oversikt__topp{padding-top:56px}
.fimbul-oversikt__horisont{margin-top:40px}
.fimbul-oversikt__ingress{padding:36px var(--sidepadding) 56px}
.fimbul-oversikt__ledetekst{
  margin:0;
  font-size:clamp(19px,2.4vw,23px);
  line-height:1.6;max-width:30em;
}
.fimbul-oversikt__ingress .fimbul-overtekst{margin-top:28px}
.fimbul-oversikt__liste{padding-top:var(--space-5)}

/* ---------- Episodeliste ---------- */

.fimbul-seksjon{padding-top:72px}

.fimbul-liste{list-style:none;margin:0;padding:0}
.fimbul-liste--forside{display:flex;flex-direction:column;gap:var(--space-8)}

/* Nummeret er en auto-spalte, ikke en absolutt plassering, så det blir
   stående i venstre marg også på smal skjerm. */
.fimbul-episode{
  display:grid;grid-template-columns:auto 1fr;
  gap:10px 28px;align-items:start;
}
/* Uten dette får 1fr-kolonnen min-width:auto og nekter å krympe under
   innholdets egenbredde, som gir vannrett skroll på smal skjerm. */
.fimbul-episode > div{min-width:0}
.fimbul-liste--oversikt .fimbul-episode{
  padding-block:44px;
  border-top:1px solid var(--grey-200);
}

/* At det står 030 forteller i seg selv at det finnes et arkiv.
   Ingen sidebæringskorreksjon her — designfilen har den bare på
   episodesidens store nummer, der sifrene er store nok til å synes. */
.fimbul-episode__nr{
  font-family:var(--font-display);font-weight:700;font-size:30px;
  letter-spacing:.04em;line-height:1.1;
  font-variant-numeric:tabular-nums;color:var(--grey-600);
}

/* Episodetitler settes i Proxima halvfet i setningsform. Uten disse to
   erklæringene arver de versalregelen fra designsystemets h1–h4. */
.fimbul-episode__tittel{
  margin:0 0 var(--space-4);
  font-family:var(--font-text);font-weight:700;
  font-size:clamp(23px,3vw,30px);line-height:1.3;
  text-transform:none;letter-spacing:0;
  color:var(--ink-900);
}
.fimbul-liste--oversikt .fimbul-episode__tittel{font-size:clamp(22px,3vw,28px)}
.fimbul-episode__tittel a{text-decoration-color:var(--orange-a-40)}

.fimbul-episode__sammendrag{margin:0 0 var(--space-5);font-size:18px;line-height:1.7}
.fimbul-episode__handling{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}
.fimbul-episode__lenke{font-size:17px}

.fimbul-alle{
  margin:56px 0 72px;
  padding-top:var(--space-6);
  border-top:1px solid var(--grey-200);
}
.fimbul-alle a{display:inline-flex;align-items:center;gap:10px;font-size:20px;font-weight:700}

/* ---------- Avspiller ----------
   Hele forklaringen står i knappen, ikke i en fotnote: brukeren skal vite
   hva som skjer før hun trykker. Ingenting lastes før den er trykket. */

.fimbul-avspiller{
  display:flex;align-items:center;gap:14px;
  width:100%;max-width:560px;min-height:56px;
  padding:14px 18px;text-align:left;
  background:var(--white);color:var(--ink-900);
  border:1px solid var(--grey-600);border-radius:var(--radius-md);
  font-family:var(--font-text);font-size:16px;line-height:1.45;font-weight:700;
  cursor:pointer;
  transition:color var(--tid-hover) var(--ease),border-color var(--tid-hover) var(--ease);
}
.fimbul-avspiller:hover{border-color:var(--ink-900);color:var(--orange-500)}
.fimbul-avspiller:active{transform:translateY(1px);transition-duration:var(--tid-trykk)}
.fimbul-avspiller svg{flex:0 0 auto}

.fimbul-avspiller--full{max-width:none;min-height:64px;padding:16px 20px;font-size:17px}

.fimbul-ramme{
  margin-top:var(--space-5);width:100%;max-width:560px;
  animation:fimbul-inn var(--tid-overlegg) var(--ease);
}
.fimbul-ramme--full{max-width:none;margin-top:var(--space-4)}
.fimbul-ramme iframe{display:block;width:100%;border:0}

@keyframes fimbul-inn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fimbul-ramme{animation:none}}

.fimbul-noscript{font-size:17px}

/* ---------- Søk ----------
   Hele listen ligger i HTML fra start. Skriptet skjuler bare elementer. */

.fimbul-sok{padding-top:var(--space-6)}
.fimbul-sok__felt{
  display:flex;align-items:center;gap:var(--space-3);
  border:1px solid var(--grey-600);   /* kontrollkant, må klarere 3:1 */
  border-radius:var(--radius-md);
  padding-inline:var(--space-4);min-height:56px;
  background:var(--white);
}
.fimbul-sok__felt svg{flex:0 0 auto;color:var(--grey-600)}
.fimbul-sok__felt input{
  flex:1 1 auto;min-width:0;
  border:none;outline:none;background:transparent;
  font-family:var(--font-text);font-size:18px;line-height:1.4;
  color:var(--ink-900);padding-block:14px;
}
.fimbul-sok__felt:focus-within{
  box-shadow:0 0 0 2px var(--orange-500),0 0 0 4px var(--ink-900);
}
.fimbul-sok__teller{margin:var(--space-3) 0 0;font-size:14px}

/* ---------- Mytefeltet ---------- */

.fimbul-myte{background:var(--grey-100);padding-block:var(--space-9)}
.fimbul-myte p{
  margin:0;
  font-size:clamp(20px,2.5vw,26px);
  line-height:1.8;color:var(--navy-700);
  max-width:25em;text-wrap:pretty;
}

/* ---------- Kontaktblokken ----------
   Sidens tyngste flate, og bevisst mørkere enn navy, slik at den ikke
   forsvinner i resten. Identisk på alle tre sider. */

.fimbul-kontakt{background:var(--ink-900);color:var(--white)}
.fimbul-kontakt__inn{padding-block:72px}
.fimbul-kontakt__strek{
  width:96px;height:var(--strek);
  background:var(--orange-500);margin-bottom:var(--space-6);
}
.fimbul-kontakt h2{
  margin:0 0 var(--space-5);
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(28px,4.4vw,44px);line-height:1.1;
  letter-spacing:.04em;text-transform:uppercase;color:var(--white);
}
.fimbul-kontakt__ingress{margin:0 0 36px;font-size:20px;line-height:1.6;max-width:34em}
.fimbul-kontakt__punkter{display:flex;flex-direction:column;gap:var(--space-5);align-items:flex-start}

/* Sidens eneste fylte oransje flate. Teksten er ink-900, ikke hvit:
   hvitt gir bare 2,81:1 mot oransje. */
.fimbul-knapp{
  display:inline-flex;align-items:center;gap:var(--space-3);
  min-height:56px;padding-inline:var(--space-5);
  background:var(--orange-500);color:var(--ink-900);
  border-radius:var(--radius-md);text-decoration:none;
  font-size:18px;font-weight:700;letter-spacing:.02em;
  transition:background-color var(--tid-hover) var(--ease);
}
.fimbul-kontakt a.fimbul-knapp{color:var(--ink-900)}
.fimbul-knapp:hover{background:var(--white)}
.fimbul-kontakt a.fimbul-knapp:hover{color:var(--ink-900)}

.fimbul-kontakt__tlf{
  display:inline-flex;align-items:center;gap:var(--space-3);
  font-size:18px;text-underline-offset:4px;
  /* Trykkflaten skal være 44 px. Teksten er 31 px høy, så den utvides
     med padding og trekkes tilbake med like stor negativ margin —
     klikkflaten vokser, den visuelle plasseringen står stille. */
  min-height:44px;
  padding-block:6.5px;
  margin-block:-6.5px;
}
.fimbul-kontakt__mer{margin:0;font-size:18px}
.fimbul-kontakt__mer a{text-underline-offset:4px}

/* ---------- Bunntekst ---------- */

.fimbul-bunn{background:var(--white)}
.fimbul-bunn__inn{padding:40px var(--sidepadding) var(--space-8);display:flex;flex-direction:column;gap:var(--space-4)}
.fimbul-bunn__lenker{margin:0;display:flex;flex-wrap:wrap;gap:8px 14px;font-size:16px}
.fimbul-bunn__lenker .fimbul-skille{color:var(--grey-600)}
.fimbul-bunn__info{margin:0;font-size:14px;line-height:1.5}

/* ---------- Episodesiden ---------- */

.fimbul-episodehode{background:var(--navy-700);color:var(--white)}
.fimbul-episodehode__topp{padding-top:var(--space-7)}

.fimbul-episodehode__nr{
  margin:0 0 20px;
  margin-left:-.05em;   /* Gravesend har 0,05 em sidebæring på siffer */
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(40px,7vw,64px);
  letter-spacing:.06em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--white);
}
/* Tittelen er lang og skal være rolig — ikke sperrede versaler */
.fimbul-episodehode__tittel{
  margin:0;
  font-family:var(--font-text);font-weight:700;
  font-size:clamp(28px,4.4vw,44px);line-height:1.25;
  text-transform:none;letter-spacing:0;
  color:var(--white);max-width:22em;text-wrap:pretty;
}
.fimbul-episodehode__horisont{margin-top:40px}
.fimbul-episodehode__byline{padding:28px var(--sidepadding) 44px}
.fimbul-episodehode__byline p{
  margin:0;font-size:14px;letter-spacing:.12em;
  text-transform:uppercase;line-height:1.5;
}

/* Bunnpadding lik kontaktblokkens egen toppluft, så artikkelen ikke støter
   rett i den mørke flaten. */
.fimbul-artikkel{padding-top:36px;padding-bottom:72px}
.fimbul-artikkel__ingress{margin:36px 0 0;font-size:clamp(19px,2.2vw,22px);line-height:1.55}

.fimbul-artikkel h2{
  margin:56px 0 0;
  font-family:var(--font-display);font-weight:700;font-size:24px;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.1;
  color:var(--ink-900);
}
.fimbul-artikkel__strek{width:48px;height:var(--strek);background:var(--orange-500);margin:14px 0 20px}
.fimbul-artikkel__strek--tett{margin:14px 0 8px}

.fimbul-notater{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-3)}
.fimbul-notater li{display:flex;gap:var(--space-3);align-items:flex-start}
.fimbul-notater svg{flex:0 0 auto;color:var(--grey-600);margin-top:5px}

.fimbul-transkripsjon__meta{margin:0 0 var(--space-5);font-size:12px;letter-spacing:.12em;text-transform:uppercase}

/* Det viktigste lesbarhetskravet på nettstedet: teksten skal kunne leses
   av en femtiåring på telefon i sollys. Ingen grå tekst på hvitt, ingen
   tynne vekter, ingen redusert opasitet. */
.fimbul-transkripsjon{
  display:flex;flex-direction:column;gap:var(--space-5);
  font-size:19px;line-height:1.8;max-width:34em;color:var(--ink-900);
}
.fimbul-transkripsjon p{margin:0}

/* ---------- Delingsblokken ----------
   Selve blokken er designsystemets egen og styres av nivlheim-share.css.
   Her ligger bare raden den står i. */
.del-rad{margin-top:40px;padding-top:24px;border-top:1px solid var(--grey-200)}

/* Uten JavaScript setter nivlheim-share.js aldri ready-merket, og blokken
   skjuler seg selv. Da skal hårstreken heller ikke bli stående alene.
   Skrevet som :not(:has()) med vilje: i en gammel nettleser uten :has()
   faller selektoren bort, og knappen virker fortsatt. */
.del-rad:not(:has(.nivlheim-share[data-nivlheim-share-ready])){display:none}

/* Skjult av søket */
[hidden]{display:none !important}
