/* ==========================================================================
   sigurdsverden.no — hovedstilark
   Struktur:
     1. Grunnlag        3. Forsidens planetmeny
     2. Topplinje       4. Overlay-meny
                        5. Bunntekst
   ========================================================================== */

/* --- Skriften Pally ------------------------------------------------------- */
/* Ligger lokalt i assets/fonts. Ingen ekstern tjeneste, ingen sporing. */

@font-face {
  font-family: "Pally";
  src: url("../fonts/pally-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pally";
  src: url("../fonts/pally-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pally";
  src: url("../fonts/pally-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --- Skriften Outfit -------------------------------------------------- */
/* Brukt på planetmenyens tekster og sideoverskrifter. Manuset bruker den
   kommersielle skriften Annuario til kapitteltitler — den er ikke lisensiert
   for web. Paytone One ble prøvd først, men ble vurdert som for fet — Outfit
   (Google Fonts, SIL Open Font License) er valgt i stedet. Ligger lokalt i
   assets/fonts, som Pally. Ingen ekstern tjeneste, ingen sporing. */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* --- 1. GRUNNLAG ---------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  color: var(--white);
  background: var(--black);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }

/* Skjuler noe visuelt, men lar skjermlesere lese det */
.kun-skjermleser {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Hopp-til-innhold: synlig først når man tabber til den */
.hopp-lenke {
  position: absolute; left: 8px; top: -60px; z-index: 1000;
  padding: 10px 16px; border-radius: 8px;
  background: var(--gronn); color: var(--black); font-size: 16px;
  transition: top .15s ease;
}
.hopp-lenke:focus { top: 8px; }

/* --- Bakgrunnsvideoen ----------------------------------------------------- */
/* Ligger bakerst, dekker hele skjermen, og ruller ikke med resten. */

.bakgrunn {
  position: fixed;
  inset: 0;
  z-index: -99;
  width: 101vw;      /* 101vw fjerner en hårfin lys stripe i kanten */
  height: 100vh;
  height: 100dvh;    /* korrekt høyde på mobil når adressefeltet skjuler seg */
  overflow: hidden;
  background: var(--dark-blue);
}
.bakgrunn video,
.bakgrunn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

/* Har brukeren slått av animasjoner i systemet, vises stillbildet i stedet */
@media (prefers-reduced-motion: reduce) {
  .bakgrunn video { display: none; }
}

/* --- Sigurd-laget --------------------------------------------------------- */
/* Sigurd, jordkloden og fotballmålet er IKKE en del av videoen. Det er et eget
   bilde som legges oppå romvideoen. Videoen er bare stjernehimmelen.
   Verdiene under er målt på den publiserte siden. */

.sigurd {
  position: fixed;
  inset: 0;                    /* bildet fyller hele skjermen, slik Nikolai har komponert det */
  z-index: -80;                /* foran videoen (-99), bak innholdet */
  /* To lag i ett element: Sigurd, bane og mål øverst, atmosfæreglansen under.
     Begge bildene er 16:9 og like store, så de ligger nøyaktig oppå hverandre. */
  background-image: url("../img/sigurd-bane-2000.webp"), url("../img/sigurd-atmos-2000.webp");
  background-size: cover;
  background-position: 55% calc(100% + 4dvh);   /* Sigurd står ca. 55 % fra venstre; 4dvh ned gir luft under topplinja */
  background-repeat: no-repeat;
  animation: sigurd-inn .9s ease-out both;
}

@keyframes sigurd-inn {
  from { opacity: 0; transform: translate3d(5px, 5px, 0); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sigurd { animation: none; }
}

/* Nettbrett og andre stående skjermer: bildet fyller høyden og beskjæres på
   siden. 71 % flytter Sigurd mot venstre (ca. 27 % fra venstre kant), slik at
   planetene som står i en kolonne til høyre ikke havner oppå ham. */
@media (max-width: 991px), (max-aspect-ratio: 13/10) { .sigurd { background-position: 71% calc(100% + 4dvh); } }

/* Brede og lave skjermer (ultrabrede PC-er, telefon på tvers): hele bildet vises
   i full høyde under topplinja, midtstilt, med myke kanter. Dermed kommer hodet
   aldri bak topplinja, og bildet blir ikke beskåret. */
@media (min-aspect-ratio: 19/10) {
  .sigurd {
    inset: 76px auto 0 50%;
    width: calc((100dvh - 76px) * 16 / 9);
    margin-left: calc((100dvh - 76px) * -8 / 9);
    background-size: 100% 100%;
    background-position: 0 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  }
}

/* Mobil: bildet blir en vanlig blokk øverst på siden, og innholdet ruller under */
@media (max-width: 479px) {
  .sigurd {
    position: static;
    inset: auto;
    width: 100vw;
    height: 90vh;
    background-image: url("../img/sigurd-bane-800.webp"), url("../img/sigurd-atmos-800.webp");
    background-size: auto 94%;
    background-position: 57% 100%;
    border-bottom: 10px solid var(--black);
    filter: drop-shadow(0 2px 7px rgba(0, 0, 0, .7));
  }
}

/* --- 2. TOPPLINJE --------------------------------------------------------- */

.topplinje {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  background: var(--black);
}
.topplinje__innhold {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 40px;
  min-height: var(--navbar-height);
}

.merke { display: flex; align-items: center; padding-top: 9px; }
.merke__ikon { width: 1.5rem; mix-blend-mode: difference; }
.merke__navn {
  margin-left: 10px;
  font-size: 30px;
  line-height: 1.2;
  color: var(--white);
  white-space: nowrap;
}

.topplinje__hoyre { display: flex; align-items: center; gap: 22px; }

/* Handlekurv */
.kurv { display: flex; align-items: center; gap: 8px; }
.kurv__ikon { width: 30px; }
.kurv__antall {
  display: grid; place-items: center;
  min-width: 26px; height: 26px; padding: 0 6px;
  border-radius: 999px;
  background: var(--white); color: var(--black);
  font-size: 15px; font-weight: 700;
}

/* Menyknappen: tre streker som blir til et kryss når menyen er åpen */
.menyknapp {
  display: flex; flex-direction: column; justify-content: space-around;
  width: 30px; height: 24px;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.menyknapp .strek {
  width: 24px; height: 3px; border-radius: 5px;
  background: var(--white);
  transition: transform .25s ease, opacity .2s ease;
}
.menyknapp[aria-expanded="true"] .strek--topp { transform: translateY(9px) rotate(45deg); }
.menyknapp[aria-expanded="true"] .strek--midt { opacity: 0; }
.menyknapp[aria-expanded="true"] .strek--bunn { transform: translateY(-9px) rotate(-45deg); }

/* --- 3. FORSIDENS PLANETMENY ---------------------------------------------- */
/* Hvert punkt er en lenke som inneholder et himmellegeme og en tekst under.
   Posisjonene er i prosent, hentet direkte fra Webflow, slik at de følger
   illustrasjonen når vindusstørrelsen endres. */

.planetmeny__punkt {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 20rem;
  max-width: 42vw;
  transition: transform .3s ease;
}
.planetmeny__punkt:hover,
.planetmeny__punkt:focus-visible { transform: scale(1.06); }
.planetmeny__punkt:focus-visible { outline: 3px solid var(--gronn); outline-offset: 12px; border-radius: 12px; }

.planetmeny__tekst {
  padding-top: 20px;
  color: var(--white);
  font-family: "Outfit", var(--font);
  font-size: 34px;
  font-weight: 400;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}

/* Posisjoner — nøyaktig som i Webflow */
.planetmeny__punkt--satelitt { left: 11%; bottom: 41%; }
.planetmeny__punkt--saturn   { left: min(75%, calc(100% - 330px)); bottom: 32%; }

/* Månen ligger høyest og er den eneste som kan komme i klem mot topplinja
   på lave skjermer. min() velger den laveste av to verdier: enten 60 % av
   vindushøyden, eller så høyt at det alltid blir minst ~40 px himmel
   mellom topplinja og månen. På høye skjermer gjelder prosenten, på lave
   overtar sikringen. */
.planetmeny__punkt--mane {
  left: 63%;
  bottom: min(60%, calc(100vh - 385px));   /* reserve for eldre nettlesere */
  bottom: min(60%, calc(100dvh - 385px));  /* dvh tar hensyn til nettleserens egne linjer */
}

/* Himmellegemene har ulik størrelse. Verdiene er målt på den
   publiserte siden: satellitt 320 px, måne 220 px, Saturn 200 px. */
.planetmeny__bilde           { width: 320px; }
.planetmeny__bilde--mane     { width: 220px; }
.planetmeny__bilde--saturn   { width: 200px; }

/* Lave, brede skjermer (typisk en bærbar, eller et vindu som ikke er
   maksimert). Her er det lite loddrett plass, så himmellegemene krymper
   litt for at de ikke skal trenge seg sammen. */
@media (min-width: 992px) and (max-height: 820px) and (min-aspect-ratio: 13/10) {
  .planetmeny__bilde         { width: 250px; }
  .planetmeny__bilde--mane   { width: 175px; }
  .planetmeny__bilde--saturn { width: 160px; }
  .planetmeny__tekst         { font-size: 28px; padding-top: 14px; }
  .planetmeny__punkt--saturn { bottom: 26%; }
}

/* Nettbrett og andre stående skjermer.

   MERK brytepunktet: det tar hensyn til skjermens FORM, ikke bare bredden.
   En iPad Pro i stående format er 1024 piksler bred — bredt nok til å bli
   forvekslet med en PC. Men bildet er høyt og smalt, og PC-oppsettet
   forutsetter et bredt bilde. Uten formkravet forsvinner Sigurd utenfor
   skjermkanten på nettopp den skjermen.

   Opprinnelig kommentar:
   MERK: i dagens Webflow-side er planetmenyen helt skjult i dette området,
   slik at besøkende mellom 480 og 991 piksler kun har hamburgermenyen.
   Her er den beholdt, men skalert ned. Vil du ha den skjult som før,
   bytt ut hele blokken under med:  .planetmeny__punkt { display: none; }   */
@media (max-width: 991px), (max-aspect-ratio: 13/10) {
  .planetmeny__punkt { width: 13rem; }
  .planetmeny__bilde         { width: 190px; }
  .planetmeny__bilde--mane   { width: 140px; }
  .planetmeny__bilde--saturn { width: 130px; }
  .planetmeny__tekst { font-size: 21px; padding-top: 12px; }

  /* Sigurd står til venstre i bildet på smale skjermer. Punktene samles
     derfor i en loddrett kolonne til høyre, i den frie himmelen — slik at
     han ser opp mot dem. */
  .planetmeny__punkt--satelitt { left: 56%; bottom: 70%; }
  .planetmeny__punkt--mane     { left: 56%; bottom: 47%; }
  .planetmeny__punkt--saturn   { left: 56%; bottom: 25%; }
}

/* Mobil: punktene stables i en loddrett liste under hverandre */
@media (max-width: 479px) {
  .planetmeny {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 140px;
    padding-bottom: 60px;
  }
  /* Punktene beholder bredden på 20rem (320 px) også på mobil — akkurat som
     i originalen. Setter man dem til 100 % blir himmellegemene for store og
     teksten for liten i forhold til dem. */
  .planetmeny__punkt {
    position: static;
    width: 20rem;
    max-width: 92vw;
    margin-bottom: 180px;
  }
  .planetmeny__bilde         { width: 80%; }
  .planetmeny__bilde--mane   { width: 60%; }
  .planetmeny__bilde--saturn { width: 80%; }
  .planetmeny__tekst {
    width: 80%;
    margin-top: 20px;
    padding-top: 0;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--white);
    font-size: 30px;
  }
  /* På mobil ruller siden, så bakgrunnen får rulle med */
  .bakgrunn { position: fixed; }
}


/* --- Opp-pil ---------------------------------------------------------- */
/* Vises bare på mobil, der siden faktisk kan rulles. På PC og nettbrett
   ligger alt innenfor ett skjermbilde, og pilen ville vært meningsløs. */

/* Størrelsen settes ALLTID, ikke bare på mobil. Uten fast bredde og høyde
   strekker pilen seg over hele siden — og siden den er en lenke, legger den
   seg da oppå alt annet og fanger klikkene. */
.til-toppen {
  display: none;                 /* vises kun der siden faktisk ruller */
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 48px;
  color: var(--white);
}
.til-toppen svg { width: 32px; height: 32px; }
.til-toppen:active { opacity: .6; }
.til-toppen:focus-visible {
  outline: 3px solid var(--gronn);
  outline-offset: 4px;
  border-radius: 50%;
}

/* Forsiden ruller bare på mobil */
@media (max-width: 479px) { .til-toppen { display: flex; } }


/* Lave, liggende skjermer — først og fremst en telefon som er snudd på tvers.
   Her er det bare rundt 390 piksler høyde å gå på. Den loddrette kolonnen
   fra nettbrettoppsettet får ikke plass, og punktene legger seg oppå
   hverandre. Derfor: samme spredte plassering som på PC, men kraftig
   nedskalert, og Sigurd rammet inn som på en bred skjerm. */

/* MERK: her brukes dvh, ikke vh. På mobil regner vh med at nettleserens
   adresselinje og knapperad er skjult — den er altså STØRRE enn det man
   faktisk ser. Regner man klaring i vh, blir månen skjøvet for høyt opp og
   havner bak topplinja på en ekte telefon, selv om det ser riktig ut i test. */

@media (max-height: 450px) and (min-aspect-ratio: 13/10) {

  .planetmeny__punkt { position: fixed; width: 9rem; }
  .planetmeny__bilde         { width: 130px; }
  .planetmeny__bilde--mane   { width:  92px; }
  .planetmeny__bilde--saturn { width:  84px; }
  .planetmeny__tekst { font-size: 15px; padding-top: 8px; }

  .planetmeny__punkt--satelitt { left:  6%; bottom: 30%; }
  .planetmeny__punkt--mane {
    left: 55%;
    bottom: min(52%, calc(100vh - 250px));   /* reserve */
    bottom: min(52%, calc(100dvh - 250px));
  }
  .planetmeny__punkt--saturn   { left: 78%; bottom: 14%; }

  .bunntekst { padding: 8px 20px; font-size: 12px; }
}

/* --- 4. OVERLAY-MENY ------------------------------------------------------ */

.overlaymeny {
  position: fixed;
  inset: 0;
  z-index: 998;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  padding: var(--navbar-height) 40px 40px;
  background: var(--black);
  overflow-y: auto;

  /* Lukket tilstand */
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.overlaymeny[data-apen="true"] { opacity: 1; visibility: visible; }

.overlaymeny__lenke {
  width: 20rem;
  max-width: 100%;
  margin: 8px 0;
  padding: 10px 0;
  border-radius: 20px;
  color: var(--white);
  font-size: 25px;
  text-align: center;
  transition: width .2s ease, background-color .2s ease, color .2s ease;
}
.overlaymeny__lenke:hover,
.overlaymeny__lenke:focus-visible {
  width: 15rem;
  background: var(--gronn);
  color: var(--black);
}
.overlaymeny__lenke[aria-current="page"] { color: var(--fire-red); }
.overlaymeny__lenke[aria-current="page"]:hover { color: var(--black); }

@media (max-width: 479px) {
  .topplinje__innhold { padding: 5px 14px; }
  .merke__navn        { font-size: 21px; }
  .topplinje__hoyre   { gap: 16px; }
  .kurv__ikon         { width: 26px; }

  .overlaymeny { align-items: center; padding-left: 20px; padding-right: 20px; }
  .overlaymeny__lenke { margin: 4px 0; font-size: 22px; }
}

/* Låser bakgrunnen mens menyen er åpen */
body.meny-apen { overflow: hidden; }

/* --- 5. BUNNTEKST --------------------------------------------------------- */
/* Denne er skjult i dagens Webflow-side. Her er den synlig, fordi
   organisasjonsnummer og lenke til salgsbetingelser bør være lett å finne
   i en norsk nettbutikk. Vil du skjule den: sett display: none. */

.bunntekst {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  padding: 12px 40px;
  font-size: 14px;
  color: rgba(255, 255, 255, .72);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
  pointer-events: none;                 /* slipper klikk gjennom til illustrasjonen */
}
.bunntekst a { pointer-events: auto; text-decoration: underline; text-underline-offset: 3px; }
.bunntekst a:hover { color: var(--gronn); }

@media (max-width: 479px) {
  .bunntekst { position: static; justify-content: center; text-align: center; padding: 20px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   6. UNDERSIDER — felles ramme
   Sidene som ikke er forsiden har romvideoen som bakgrunn, en overskrift
   i hvitt, og innholdet samlet i en sandbeige plate.
   ══════════════════════════════════════════════════════════════════════════ */

.underside { padding-bottom: 60px; }
.underside--feil { padding-bottom: 24px; }

.sidetittel {
  margin: 112px 0 10px;
  font-family: "Outfit", var(--font);
  font-size: 54px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--white);
  text-align: center;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}

.plate {
  width: min(1280px, calc(100% - 40px));
  margin: 32px auto;
  padding: 40px 60px;
  border-radius: 40px;
  background: var(--egg-white);
  color: var(--black);
}

/* Undersider ruller, så opp-pilen skal vises på alle skjermstørrelser */
.til-toppen--alltid { display: flex; }

/* På undersider ruller innholdet. Da kan ikke bunnteksten ligge fast nederst
   i vinduet — den ville lagt seg oppå teksten. Her flyter den med. */
.bunntekst--i-flyt {
  position: static;
  justify-content: center;
  margin-top: 8px;
  padding: 18px 24px 28px;
  text-align: center;
}

@media (max-width: 991px) {
  .sidetittel { margin-top: 96px; font-size: 38px; }
  .plate      { padding: 28px 24px; border-radius: 28px; }
}
@media (max-width: 479px) {
  .sidetittel { margin-top: 88px; font-size: 30px; }
  .plate      { width: calc(100% - 20px); padding: 20px 16px; border-radius: 22px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   7. BØKENE
   ══════════════════════════════════════════════════════════════════════════ */

.bokrutenett {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.bokkort {
  display: flex;
  gap: 20px;
  padding: 20px;
  border: 3px solid var(--black);
  border-radius: 40px;
  background: var(--white);
  box-shadow: var(--shadow);          /* -8px 8px 0 — designets signatur */
}

/* Omslaget. Sideforholdet 246/340 er bokas faktiske form, målt på
   omslagsfilen. Da fyller omslaget boksen helt uten å bli beskåret. */
.bokkort__omslag {
  flex: 0 0 246px;
  width: 246px;
  aspect-ratio: 246 / 340;
  align-self: flex-start;
  border-radius: 20px;
  overflow: hidden;
  background: #363636;
}
.bokkort__omslag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

/* Bøker uten ferdig omslag: samme bilde, men slørt og gråtonet.
   Det er slik originalen markerer «omslaget er ikke klart ennå». */
.bokkort__omslag--kommer img { filter: blur(3px) brightness(2) grayscale(1); }

.bokkort__innhold {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
}

.bokkort__tittel {
  margin: 0 0 12px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.12;
  color: var(--black);
}

.bokkort__tekst {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--black);
}

.bokkort__bunn { margin-top: 18px; }

/* «Kommer i 2027» skal leses som noe å glede seg til, ikke som en
   fotnote. Derfor større, svart og med litt tyngde — ikke grå. */
.bokkort__status {
  margin: 18px 0 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  text-align: right;
  color: var(--black);
}

/* Bok 3 og 4 — bare en tittel, ingen tekst ennå */
.bokkort--tom .bokkort__tittel { color: var(--grey-outline); }
.bokkort--tom .bokkort__innhold { justify-content: flex-start; }

/* --- Knappene ------------------------------------------------------------- */

.knapp {
  display: inline-block;
  padding: 5px 15px;
  border: 2px solid var(--black);
  border-radius: 10px;
  background: var(--egg-white);
  box-shadow: var(--shadow-small);    /* -4px 4px 0 */
  color: var(--black);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.knapp:hover      { transform: translate(-2px, 2px); box-shadow: -2px 2px 0 rgba(0,0,0,.25); }
.knapp:active     { transform: translate(-4px, 4px); box-shadow: none; }
.knapp:focus-visible { outline: 3px solid var(--dark-blue); outline-offset: 3px; }

.knapp--utdrag { width: 240px; max-width: 100%; margin: 10px 0; background: var(--gronn); font-weight: 500; }
.knapp--kjop   { background: var(--gronn); font-weight: 500; }

.pris {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--black);
}

/* --- Mindre skjermer ------------------------------------------------------ */

@media (max-width: 1100px) {
  .bokkort__omslag { flex-basis: 200px; width: 200px; }
  .bokkort__tittel { font-size: 27px; }
}

/* Under 900 piksler får ikke to kort ved siden av hverandre plass */
@media (max-width: 900px) {
  .bokrutenett { grid-template-columns: minmax(0, 1fr); }
  .bokkort__omslag { flex-basis: 246px; width: 246px; }
  .bokkort__tittel { font-size: 32px; }
}

/* På mobil legges omslaget over teksten i stedet for ved siden av */
@media (max-width: 620px) {
  .bokkort {
    flex-direction: column;
    align-items: center;
    padding: 16px;
    border-radius: 28px;
  }
  .bokkort__omslag {
    flex-basis: auto;
    align-self: center;
    width: min(246px, 70%);
  }
  .bokkort__innhold { width: 100%; }
  .bokkort__tittel  { font-size: 26px; text-align: center; }
  .bokkort__tekst   { font-size: 15px; }
  .bokkort__status  { text-align: center; font-size: 20px; }
  .knapp--utdrag    { display: block; width: 100%; }
  .bokkort__bunn    { text-align: center; }
  .pris             { text-align: center; }
}


/* ══════════════════════════════════════════════════════════════════════════
   8. KARUSELL
   Brukes på «Hvem er Sigurd?». Ett bilde med tekst ved siden av, og piler
   og prikker for å bla. Fungerer med mus, tastatur og fingersveip.
   ══════════════════════════════════════════════════════════════════════════ */

.karusell {
  position: relative;
  border-radius: 24px;
  background: var(--white);
  overflow: hidden;
}

.karusell__vindu { overflow: hidden; }

.karusell__spor {
  display: flex;
  margin: 0;
  padding: 0;          /* MÅ være 0 — <ul> har 40px fra nettleseren, og da
                          blir hvert slide 40px smalere enn vinduet. Da
                          forskyver bildene seg 40px mer for hvert slide. */
  list-style: none;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .karusell__spor { transition: none; }
}

/* Fast todelt rutenett. Bildekolonnen er like bred på alle slides, slik at
   teksten starter på nøyaktig samme sted uansett hvor bredt bildet er.
   Med flex-grow på teksten flyttet hele komposisjonen seg fra slide til slide. */
.karusell__slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 44% 1fr;
  align-items: center;
  gap: 24px;
  min-height: 414px;
  padding: 24px 70px;
}

.karusell__bilde {
  justify-self: center;          /* midtstilt i sin egen kolonne */
  width: var(--bildebredde, 340px);
  max-width: 100%;
  max-height: 366px;
  height: auto;
  object-fit: contain;
}

.karusell__tekst {
  margin: 0;
  max-width: 30ch;
  font-size: 25px;
  line-height: 1.4;
  color: var(--black);
}

/* Pilene */
.karusell__pil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 2px solid var(--black);
  border-radius: 50%;
  background: var(--egg-white);
  box-shadow: var(--shadow-small);
  color: var(--black);
  cursor: pointer;
}
.karusell__pil svg { width: 20px; height: 20px; }
.karusell__pil--forrige { left: 12px; }
.karusell__pil--neste   { right: 12px; }
.karusell__pil:hover    { background: var(--gronn); }
.karusell__pil:focus-visible { outline: 3px solid var(--dark-blue); outline-offset: 3px; }
.karusell__pil[disabled] { opacity: .35; cursor: default; box-shadow: none; }

/* Prikkene */
.karusell__prikker {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0 0 18px;
}
.karusell__prikk {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid var(--black);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.karusell__prikk[aria-current="true"] { background: var(--black); }
.karusell__prikk:focus-visible { outline: 3px solid var(--dark-blue); outline-offset: 3px; }

@media (max-width: 900px) {
  .karusell__slide { gap: 18px; padding: 20px 56px; grid-template-columns: 42% 1fr; }
  .karusell__tekst { font-size: 21px; }
}

/* På mobil legges bildet over teksten */
@media (max-width: 620px) {
  .karusell__slide {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 0;
    padding: 20px 16px 8px;
  }
  /* --mobilbredde og --mobilhoyde kan settes per slide i HTML når et bilde
     trenger mer plass enn standard. Standard er 74 % og 320 px. */
  .karusell__bilde {
    width: min(var(--bildebredde, 340px), var(--mobilbredde, 74%));
    max-width: var(--mobilbredde, 74%);
    max-height: var(--mobilhoyde, 320px);
    margin-top: var(--mobilned, 0);   /* dytter bildet litt ned når et motiv trenger det */
  }
  .karusell__tekst { font-size: 19px; text-align: center; max-width: 34ch; }
  .karusell__pil   { width: 40px; height: 40px; top: auto; bottom: 8px; transform: none; }
  .karusell__pil--forrige { left: 8px; }
  .karusell__pil--neste   { right: 8px; }
  .karusell__prikker { padding-bottom: 14px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   9. KARAKTERGALLERI
   ══════════════════════════════════════════════════════════════════════════ */

.skillelinje {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 44px 0 28px;
}
.skillelinje::before,
.skillelinje::after {
  content: "";
  flex: 1 1 auto;
  height: 3px;
  background: var(--black);
}
.skillelinje__tekst {
  flex: 0 1 auto;
  font-size: 20px;
  line-height: 1.4;
  color: var(--black);
  text-align: center;
}
/* På brede skjermer flyter setningen som én linje. På smale skjermer brekker
   den etter «karakterene», slik at «i Sigurds verden!» står for seg selv. */
.skillelinje__linje2 { display: inline; }
@media (max-width: 620px) {
  .skillelinje__linje2 { display: block; }
}

.karakterer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.karakter { display: flex; }

/* Hele karakteren er en knapp som åpner kortet */
.karakter__knapp {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 6px;
  border: 0;
  border-radius: 20px;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.karakter__knapp:hover .karakter__bilde,
.karakter__knapp:focus-visible .karakter__bilde {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.karakter__knapp:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }
.karakter__knapp:hover .karakter__navn { text-decoration: underline; }

/* Teksten ligger skjult i lista og hentes inn i kortet av main.js.
   Den står her for at den skal være lett å redigere i HTML-fila. */
.karakter__tekst { display: none; }

.karakter__bilde {
  width: 250px;
  max-width: 100%;
  aspect-ratio: 1;
  border: 3px solid var(--black);
  border-radius: 50%;
  box-shadow: var(--shadow-small);
  background-color: var(--white);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform .15s ease, box-shadow .15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .karakter__bilde { transition: none; }
}

/* Karakterer uten tegning ennå */
.karakter__bilde--mangler {
  display: grid;
  place-items: center;
  background: var(--grey);
  color: var(--dark-grey);
  font-size: 15px;
  text-align: center;
}

.karakter__navn {
  font-size: 25px;
  line-height: 1.3;
  color: var(--black);
  text-align: center;
}

@media (max-width: 900px) {
  .karakterer      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .karakter__bilde { width: 210px; }
  .karakter__navn  { font-size: 22px; }
  .skillelinje     { gap: 14px; }
  .skillelinje__tekst { font-size: 18px; }
}
@media (max-width: 520px) {
  .karakterer      { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .karakter__bilde { width: 140px; }
  .karakter__navn  { font-size: 18px; }
  .skillelinje     { flex-direction: column; gap: 12px; margin: 32px 0 22px; }
  .skillelinje::before, .skillelinje::after { width: 60%; flex: 0 0 auto; }
}


/* ══════════════════════════════════════════════════════════════════════════
   10. KARAKTERKORT
   Kortet som spretter opp når man klikker en karakter i galleriet.
   Bruker <dialog>, som gir Escape-lukking og fokuslås gratis.
   ══════════════════════════════════════════════════════════════════════════ */

.karakterkort {
  width: min(860px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 28px;
  border: 3px solid var(--black);
  border-radius: 32px;
  background: var(--egg-white);
  box-shadow: var(--shadow);
  color: var(--black);
  overflow: auto;
}
.karakterkort::backdrop { background: rgba(0, 0, 0, .55); }

.karakterkort {
  display: none;
  grid-template-columns: 300px 1fr;
  align-items: center;
  gap: 28px;
}
.karakterkort[open] { display: grid; }

.karakterkort__bilde {
  width: 300px;
  max-width: 100%;
  aspect-ratio: 1;
  border: 3px solid var(--black);
  border-radius: 24px;
  box-shadow: var(--shadow-small);
  background-color: var(--white);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.karakterkort__navn {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--black);
  font-size: 32px;
  line-height: 1.2;
}
.karakterkort__tekst {
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
}

.karakterkort__lukk {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 2px solid var(--black);
  border-radius: 50%;
  background: var(--egg-white);
  color: var(--black);
  cursor: pointer;
}
.karakterkort__lukk svg { width: 20px; height: 20px; }
.karakterkort__lukk:hover { background: var(--fire-red); }
.karakterkort__lukk:focus-visible { outline: 3px solid var(--dark-blue); outline-offset: 3px; }

@media (max-width: 700px) {
  .karakterkort {
    grid-template-columns: 1fr;
    justify-items: center;
    /* Ekstra luft på toppen skyver tegningen ned, vekk fra lukkeknappen,
       og gir jevnere balanse mellom bilde og tekst. */
    padding: 46px 20px 30px;
    gap: 22px;
  }
  .karakterkort__bilde { width: 240px; }
  .karakterkort__navn  { font-size: 26px; text-align: center; }
  .karakterkort__tekst { font-size: 17px; }
  .karakterkort__lukk  { top: 12px; right: 12px; width: 38px; height: 38px; }
}

/* Lav og liggende skjerm — mobil på tvers. Her er høyden knapp, så kortet
   krympes til det får plass uten at man må rulle inni det. */
@media (max-height: 520px) and (min-aspect-ratio: 13/10) {
  .karakterkort {
    grid-template-columns: 190px 1fr;
    padding: 20px 22px;
    gap: 22px;
    border-radius: 26px;
  }
  .karakterkort__bilde { width: 190px; border-radius: 20px; }
  .karakterkort__navn  { font-size: 24px; margin-bottom: 10px; padding-bottom: 8px; }
  .karakterkort__tekst { font-size: 16px; line-height: 1.45; }
  .karakterkort__lukk  { top: 10px; right: 10px; width: 36px; height: 36px; }
  .karakterkort__lukk svg { width: 17px; height: 17px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   11. ILLUSTRASJONER
   Sju filmer der Nikko tegner, hver ved siden av et utdrag fra boka.
   Denne siden har ingen sandbeige plate — innholdet ligger rett på
   romvideoen, med hvit tekst, slik som i dag.
   ══════════════════════════════════════════════════════════════════════════ */

.ingress {
  width: min(620px, calc(100% - 40px));
  margin: 28px auto 0;
  font-size: 20px;
  line-height: 1.45;
  color: var(--white);
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}

.nedpil {
  display: block;
  width: 34px;
  height: 56px;
  margin: 34px auto 0;
  color: var(--white);
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .6));
}

.tegninger {
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto;
  padding-top: 72px;
}

.tegning {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  gap: 48px;
  margin-bottom: 120px;
}

/* Annenhver tegning speilvendes: sitatet til venstre, filmen til høyre.
   `order` flytter dem visuelt uten å endre rekkefølgen i HTML, slik at
   skjermlesere fortsatt leser film før sitat. */
.tegning:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.tegning:nth-child(even) .tegning__ramme { order: 2; }
.tegning:nth-child(even) .tegning__sitat { order: 1; }

/* Rammen er akkurat så stor som filmen i den. Filmene har ulikt format —
   én er kvadratisk, resten er brede — så høyden begrenses i stedet for
   bredden. Da får alle sju omtrent like stor tyngde på siden. */
.tegning__ramme {
  position: relative;
  justify-self: center;
  max-width: 100%;
  border-radius: 40px;
  overflow: hidden;
  background: var(--white);
  line-height: 0;
}

.tegning__film {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 500px;
  height: auto;
}

/* Knappen for å stoppe og starte filmen */
.tegning__knapp {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: var(--white);
  cursor: pointer;
}
.tegning__knapp:hover { background: rgba(0, 0, 0, .75); }
.tegning__knapp:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.tegning__ikon { width: 26px; height: 26px; }

/* Viser pause når filmen går, og play når den står stille */
.tegning__ikon--spill { display: none; }
.tegning__ramme[data-stoppet="true"] .tegning__ikon--pause { display: none; }
.tegning__ramme[data-stoppet="true"] .tegning__ikon--spill { display: block; }

.tegning__sitat {
  margin: 0;
  font-size: 25px;
  font-style: italic;
  line-height: 1.3;
  color: var(--white);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .65);
}
.tegning__sitat p { margin: 0 0 18px; }
.tegning__sitat p:last-child { margin-bottom: 0; }

@media (max-width: 991px) {
  .tegninger { padding-top: 56px; }
  .tegning   { gap: 32px; margin-bottom: 88px; }
  .tegning__sitat { font-size: 21px; }
  .tegning__ramme { border-radius: 30px; }
  .ingress { font-size: 18px; }
}

/* På smale skjermer legges filmen over sitatet, og alle får samme rekkefølge */
@media (max-width: 700px) {
  .tegning,
  .tegning:nth-child(even) { grid-template-columns: 1fr; gap: 20px; margin-bottom: 64px; }
  .tegning:nth-child(even) .tegning__ramme { order: 0; }
  .tegning:nth-child(even) .tegning__sitat { order: 0; }
  .tegning__sitat { font-size: 18px; }
  .tegning__ramme { border-radius: 22px; }
  .tegning__film  { max-height: 62vh; }
  .tegning__knapp { right: 10px; bottom: 10px; width: 44px; height: 44px; }
  .tegning__ikon  { width: 22px; height: 22px; }
  .nedpil { width: 26px; height: 44px; margin-top: 26px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   12. LÆRERE
   Ren tekstside: hvitt kort inni den sandbeige plata, robotene under,
   og kontaktopplysningene nederst.
   ══════════════════════════════════════════════════════════════════════════ */

/* Lesbar linjelengde: teksten skal ikke bli 110 tegn bred på en stor skjerm */
.tekstkort {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 34px 44px;
  border-radius: 32px;
  background: var(--white);
  box-shadow: var(--shadow-small);
  color: var(--black);
}
.tekstkort p {
  margin: 0 0 22px;
  font-size: 18px;
  line-height: 1.55;
}
.tekstkort p:last-child { margin-bottom: 0; }
.tekstkort a { color: var(--black); text-underline-offset: 3px; }
.tekstkort a:hover { color: var(--fire-red); }

.laerere__robot {
  display: block;
  width: 240px;
  max-width: 60%;
  height: auto;
  margin: 40px auto 0;
}

.laerere__kontakt {
  margin: 18px 0 0;
  font-size: 20px;
  line-height: 1.5;
  color: var(--black);
  text-align: center;
}
.laerere__kontakt a { color: var(--black); text-underline-offset: 3px; }
.laerere__kontakt a:hover { color: var(--fire-red); }

@media (max-width: 991px) {
  .tekstkort { padding: 26px 24px; border-radius: 24px; }
  .tekstkort p { font-size: 17px; }
  .laerere__kontakt { font-size: 18px; }
}
@media (max-width: 479px) {
  .tekstkort { padding: 20px 18px; border-radius: 20px; }
  .tekstkort p { font-size: 16px; margin-bottom: 18px; }
  .laerere__robot { width: 170px; margin-top: 30px; }
  .laerere__kontakt { font-size: 16px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   13. FOLKA BAK
   Ett hvitt kort per person: rundt portrett til venstre, navn,
   rolle og en kort tekst til høyre.
   ══════════════════════════════════════════════════════════════════════════ */

.folka {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.person {
  display: grid;
  grid-template-columns: 260px 1fr;
  align-items: center;
  gap: 40px;
  padding: 30px 40px 30px 30px;
  border-radius: 32px;
  background: var(--white);
  box-shadow: var(--shadow-small);
  color: var(--black);
}

.person__bilde {
  width: 260px;
  max-width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  background: var(--grey);
}

/* Vises til portrettet er på plass */
.person__bilde--mangler {
  display: grid;
  place-items: center;
  border: 3px dashed var(--grey-outline);
  color: var(--dark-grey);
  font-size: 17px;
  line-height: 1.3;
  text-align: center;
}

.person__navn {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
}
.person__rolle {
  margin: 6px 0 20px;
  font-size: 19px;
  line-height: 1.3;
}
.person__tekst p:last-child {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
}

@media (max-width: 991px) {
  .person { grid-template-columns: 190px 1fr; gap: 28px; padding: 24px 26px 24px 24px; border-radius: 26px; }
  .person__bilde { width: 190px; }
  .person__navn  { font-size: 25px; }
  .person__rolle { font-size: 17px; margin-bottom: 16px; }
  .person__tekst p:last-child { font-size: 17px; }
}

/* På smale skjermer legges portrettet over teksten, midtstilt */
@media (max-width: 620px) {
  .person {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 18px;
    padding: 24px 20px;
    border-radius: 22px;
    text-align: center;
  }
  .person__bilde { width: 170px; }
  .person__navn  { font-size: 23px; }
  .person__tekst p:last-child { font-size: 16px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   14. KONTAKT
   Tre hvite kort inni plata: kontaktopplysninger, sosiale medier, bokomslag.
   ══════════════════════════════════════════════════════════════════════════ */

.kontaktkort,
.hvittkort {
  padding: 30px 40px;
  border-radius: 32px;
  background: var(--white);
  box-shadow: var(--shadow-small);
  color: var(--black);
}
.kontaktkort + .hvittkort,
.hvittkort + .hvittkort { margin-top: 26px; }

.kontaktkort {
  display: flex;
  align-items: center;
  gap: 34px;
}
.kontaktkort__bilde {
  flex: 0 0 200px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
}
.kontaktkort__tekst p { margin: 0; font-size: 19px; line-height: 1.5; }
.kontaktkort__lenker { margin-top: 20px !important; }
.kontaktkort a { color: var(--black); text-underline-offset: 3px; }
.kontaktkort a:hover { color: var(--fire-red); }

.hvittkort__tittel {
  margin: 0 0 22px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.hvittkort__brodtekst {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  text-align: center;
}
.hvittkort__brodtekst a { color: var(--black); text-underline-offset: 3px; }
.hvittkort__brodtekst a:hover { color: var(--fire-red); }

.sosiale {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sosial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--black);
  font-size: 18px;
  text-decoration: none;
}
.sosial__ikon { width: 54px; height: 54px; }
a.sosial:hover { color: var(--fire-red); }
a.sosial:focus-visible { outline: 3px solid var(--dark-blue); outline-offset: 4px; border-radius: 12px; }

/* Kanal uten konto ennå — grå og ikke klikkbar */
.sosial--av { color: var(--grey-outline); cursor: default; }

@media (max-width: 991px) {
  .kontaktkort, .hvittkort { padding: 24px 22px; border-radius: 26px; }
  .kontaktkort__bilde { flex-basis: 150px; width: 150px; height: 150px; }
  .kontaktkort__tekst p { font-size: 17px; }
  .hvittkort__tittel { font-size: 25px; }
  .sosiale { gap: 32px; }
  .sosial__ikon { width: 46px; height: 46px; }
}
@media (max-width: 620px) {
  .kontaktkort { flex-direction: column; text-align: center; gap: 20px; }
  .kontaktkort__bilde { flex-basis: auto; width: 140px; height: 140px; }
  .kontaktkort, .hvittkort { padding: 22px 18px; border-radius: 22px; }
  .kontaktkort__tekst p { font-size: 16px; }
  .hvittkort__tittel { font-size: 22px; margin-bottom: 18px; }
  .hvittkort__brodtekst { font-size: 16px; }
  .sosiale { gap: 22px; }
  .sosial { font-size: 15px; }
  .sosial__ikon { width: 40px; height: 40px; }
}


/* Mellomtitler i tekstkortet — brukes på Salgsbetingelser */
.tekstkort__tittel {
  margin: 34px 0 12px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.tekstkort__tittel:first-child { margin-top: 0; }

@media (max-width: 479px) {
  .tekstkort__tittel { font-size: 20px; margin-top: 28px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   15. FEILSIDE (404)
   Vises når noen skriver en adresse som ikke finnes. Ingen sandbeige plate —
   bare Sigurds romhimmel, en beskjed og veien videre.
   ══════════════════════════════════════════════════════════════════════════ */

/* Høyden trekker fra bunnteksten, ellers får en side som får plass
   likevel en rullefelt. 65 px er bunnteksten, 8 px er luft. */
.underside--feil {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 73px);    /* reserve for eldre nettlesere */
  min-height: calc(100dvh - 73px);
  padding: 96px 20px 24px;
}

.feilside {
  width: min(620px, 100%);
  text-align: center;
  color: var(--white);
}

.feilside__kode {
  margin: 0;
  font-size: 96px;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--white);
  opacity: .55;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .6);
}

.feilside__tittel {
  margin: 8px 0 18px;
  font-size: 44px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--white);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}

.feilside__tekst {
  margin: 0 0 30px;
  font-size: 20px;
  line-height: 1.5;
  color: var(--white);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}

/* Linjeskift som bare gjelder brede skjermer. På mobil brekker teksten
   naturlig og ser bra ut, så der slås det av. */
.bare-brede-skjermer { display: inline; }
@media (max-width: 620px) {
  .bare-brede-skjermer { display: none; }
}

.feilside__knapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 0;
}

.feilside__bilde {
  display: block;
  width: 280px;
  max-width: 70%;
  height: auto;
  margin: 42px auto 0;
}

@media (max-width: 991px) {
  .feilside__kode   { font-size: 76px; }
  .feilside__tittel { font-size: 34px; }
  .feilside__tekst  { font-size: 18px; }
  .feilside__bilde  { width: 220px; margin-top: 34px; }
}
@media (max-width: 479px) {
  /* bunnteksten stables på to linjer her og blir 90 px høy */
  .underside--feil  { padding-top: 88px; min-height: calc(100vh - 98px); min-height: calc(100dvh - 98px); }
  .feilside__kode   { font-size: 62px; }
  .feilside__tittel { font-size: 27px; }
  .feilside__tekst  { font-size: 16px; margin-bottom: 24px; }
  .feilside__bilde  { width: 170px; margin-top: 28px; }
}

/* Lav, liggende skjerm: da er det ikke plass til robotene */
@media (max-height: 520px) and (min-aspect-ratio: 13/10) {
  .underside--feil  { min-height: calc(100dvh - 73px); padding: 72px 20px 12px; }
  .feilside__kode   { font-size: 40px; }
  .feilside__tittel { font-size: 24px; margin: 2px 0 10px; }
  .feilside__tekst  { font-size: 16px; margin-bottom: 16px; }
  .feilside__bilde  { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   16. UTDRAG FRA TEKSTEN
   Fem korte utdrag fra manuset til "Sigurd og det store smellet", presentert
   som ekte sider/oppslag fra boka — kremhvitt papir (varmere enn nettsidens
   sandbeige), sidetall i ytterhjørnet, og et svakt bokrygg-skille mellom
   sidene i dobbeltoppslagene. Brødteksten står i en serif-skrift (bare her)
   for å skille utdragene fra resten av Pally-typografien på nettsiden.
   ══════════════════════════════════════════════════════════════════════════ */

.tilbake-lenke {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 20px;
  color: var(--black);
  font-family: var(--font);
  font-size: 18px;
  text-decoration: none;
}
.tilbake-lenke:hover { text-decoration: underline; }
.tilbake-lenke svg { width: 19px; height: 19px; flex: 0 0 auto; }

.utdrag-liste {
  display: flex;
  flex-direction: column;
  gap: 44px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Kort kontekstlinje over hvert utdrag — hjelper leseren inn i scenen */
.utdrag-kontekst {
  max-width: 960px;
  margin: 0 auto 14px;
  font-family: var(--font);
  font-size: 18px;
  font-style: normal;
  line-height: 1.5;
  color: #55503f;
  text-align: center;
}

/* --- Oppslaget: én eller to sider, som slått opp i boka ------------------ */

.oppslag {
  --papir: #F4EEDF;          /* kremfarget papir — varmere enn --egg-white */
  position: relative;
  background: var(--papir);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 22px 44px rgba(0, 0, 0, .18), 0 3px 10px rgba(0, 0, 0, .10);
}

.oppslag--enkel {
  width: min(560px, 100%);
  margin: 0 auto;
}

.oppslag--dobbel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "venstre hoyre";
  width: min(960px, 100%);
  margin: 0 auto;
}
.oppslag--dobbel.oppslag--med-bunnbilde {
  grid-template-areas:
    "venstre hoyre"
    "bilde   bilde";
}

.side {
  position: relative;
  min-width: 0;
  padding: 22px 32px 24px;
}
.side--venstre {
  grid-area: venstre;
  box-shadow: inset -14px 0 24px -18px rgba(0, 0, 0, .55);
}
.side--hoyre {
  grid-area: hoyre;
  box-shadow: inset 14px 0 24px -18px rgba(0, 0, 0, .55);
}

.side__kapittel {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 24px;
}
.side__ikon {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: #363636;
}
.side__kapitteltittel {
  margin: 0;
  font-family: var(--font);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.15;
  color: var(--black);
}

.side__tekst {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.42;
  color: #1a1a1a;
}
.side__tekst p { margin: 0 0 9px; }
.side__tekst p:last-child { margin-bottom: 0; }

.side__bilde {
  display: block;
  width: 100%;
  height: auto;
  margin: 20px 0;
}
.side__bilde--midtstilt {
  width: min(240px, 70%);
  margin-left: auto;
  margin-right: auto;
}
.side__bilde--topp { margin-top: 0; }

/* Siden med tankespøkelset: bildet fyller hele venstresiden fra topp til
   bunn, uten tekst-marger og uten papirkant nederst. Siden er et grid-felt
   som strekker seg (align-self: stretch) til nøyaktig samme høyde som
   tekstsiden ved siden av — det var derfor et tidligere fast høyde-forhold
   (aspect-ratio) ga en synlig papirstripe nederst, når tekstsiden var noen
   piksler høyere enn det forholdet tilsa. Bildet er posisjonert absolutt
   inni siden, slik at det ikke selv påvirker hvor høy raden blir (det
   ville presset raden opp mot bildets egen, mye høyere naturlige format).
   Bildet er smalere enn siden — det stilles til venstre i full høyde, og
   resten av siden (inn mot bokrygg/tekstsiden) fylles med papirfargen i
   stedet for hvitt eller strekking. */
.side--bilde-full {
  position: relative;
  padding: 0;
  background: var(--papir);
  overflow: hidden;
}
.side__bilde-full {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
  max-width: 100%;
}

/* Sidetallene er tatt ut på Kjetils ønske — elementene ligger fortsatt i
   HTML-en (enkelt å skru på igjen), men vises ikke. */
.side__sidetall {
  display: none;
  position: absolute;
  bottom: 18px;
  right: 44px;
  margin: 0;
  font-family: "Iowan Old Style", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: #6b6558;
}
.side--venstre .side__sidetall { left: 44px; right: auto; }

.oppslag__bilde-bunn {
  grid-area: bilde;
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 720px) {
  .oppslag--dobbel,
  .oppslag--dobbel.oppslag--med-bunnbilde {
    grid-template-columns: 1fr;
    grid-template-areas:
      "venstre"
      "hoyre"
      "bilde";
    row-gap: 18px;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }
  .oppslag--dobbel .side {
    background: var(--papir);
    border-radius: 14px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .16), 0 2px 6px rgba(0, 0, 0, .08);
    padding: 32px 28px 48px;
  }
  /* Bildesiden skal fortsatt være uten tekst-marger på mobil. Her ligger
     bildesiden i egen rad (stables over teksten), uten en sidestilt
     tekstside å strekke seg etter — derfor trenger den her et eget,
     fast høyde-forhold (i motsetning til på desktop, der den strekker
     seg til tekstsidens faktiske høyde). */
  .oppslag--dobbel .side--bilde-full { padding: 0; overflow: hidden; aspect-ratio: 4 / 5; }
  .oppslag--dobbel .side--venstre,
  .oppslag--dobbel .side--hoyre {
    box-shadow: 0 14px 28px rgba(0, 0, 0, .16), 0 2px 6px rgba(0, 0, 0, .08);
  }
  .oppslag--dobbel .side--venstre .side__sidetall { left: 28px; }
  .oppslag--dobbel .side--hoyre .side__sidetall { right: 28px; }
  .oppslag--dobbel .oppslag__bilde-bunn {
    border-radius: 14px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .16), 0 2px 6px rgba(0, 0, 0, .08);
  }
}

@media (max-width: 479px) {
  .side { padding: 24px 20px 40px; }
  .side__tekst { font-size: 15px; }
  .side__kapitteltittel { font-size: 20px; }
  .side__ikon { flex-basis: 52px; width: 52px; height: 52px; }
  .oppslag--enkel { width: 100%; }
}