/* FlowView – nettsiden
 *
 * Retningen: svart rom, én belyst gjenstand. Gjenstanden er timeboka til en
 * salong. Alt er gråtoner, bortsett fra rødt – og rødt betyr alltid kroner
 * som er tapt. Brukes det til noe annet, slutter det å bety noe.
 *
 * Formregel for hjørner:
 *   papir (timeboka, utskriften)  4px   – ekte papir har skarpe hjørner
 *   felt (inndata)               12px
 *   flater (glass)               20px
 *   kontroller (knapper, brikker) pille
 */

/* Skriftene ligger på egen server, så siden ikke henter noe fra andre
   verter og ingen tredjepart ser hvem som besøker den. Alle tre er under
   SIL Open Font License 1.1 – lisensene ligger i fonts/. Bare latin-
   utvalget er med; det dekker æ, ø og å. */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/schibsted-grotesk.woff2') format('woff2');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/eb-garamond-kursiv.woff2') format('woff2');
}
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/kalam-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/kalam-400.woff2') format('woff2');
}

:root {
  /* Mørk eik, kalkstein og terrakotta. Eika er rommet, kalksteinen er
     skrifta og papiret, og terrakotta betyr tapte kroner og ingenting annet. */
  --bunn: #1d1511;
  --bunn-2: #271c16;
  --kort: #3a2b22;
  --lys-1: #3a2a20;
  --lys-2: #22180f;
  --tekst-sterk: #f1e7d6;
  --knapp-hover: #f5ecdd;
  --flate: rgba(232, 220, 200, 0.04);
  --flate-2: rgba(232, 220, 200, 0.07);
  --kant: rgba(232, 220, 200, 0.12);
  --kant-sterk: rgba(232, 220, 200, 0.24);

  --tekst: #e8dcc8;
  --tekst-2: #b8a891;
  --tekst-3: #a39380;

  --papir: #d8c8ae;
  --grafitt: #2b1f18;
  --grafitt-2: #5f4b3e;

  --rod: #df7a5c;
  --rod-blekk: #8a321c;

  --sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'EB Garamond', 'Iowan Old Style', Georgia, serif;
  --hand: 'Kalam', 'Bradley Hand', 'Segoe Print', cursive;

  --side: clamp(16px, 4vw, 48px);
  --maks: 1240px;
  --r-papir: 4px;
  --r-felt: 12px;
  --r-flate: 20px;
  --r-pille: 999px;
  --ut: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Den første, svarte utgaven. Vises med ?palett=svart i adressen. */
:root[data-palett='svart'] {
  --bunn: #000;
  --bunn-2: #101010;
  --kort: #262626;
  --lys-1: #1d1d1c;
  --lys-2: #0a0a0a;
  --tekst-sterk: #f4f4f2;
  --knapp-hover: #fff;
  --flate: rgba(255, 255, 255, 0.035);
  --flate-2: rgba(255, 255, 255, 0.06);
  --kant: rgba(255, 255, 255, 0.1);
  --kant-sterk: rgba(255, 255, 255, 0.22);
  --tekst: #ececea;
  --tekst-2: #a6a6a3;
  --tekst-3: #929290;
  --papir: #d9d9d6;
  --grafitt: #262626;
  --grafitt-2: #5e5e5b;
  --rod: #ff6a5e;        /* på mørk bunn, 7,4:1 */
  --rod-blekk: #b3261e;  /* på papir, 4,6:1 */
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(120% 70% at 50% -10%, var(--lys-1) 0%, var(--lys-2) 45%, var(--bunn) 75%) no-repeat,
    var(--bunn);
  color: var(--tekst);
  font: 400 1.0625rem/1.55 var(--sans);
  font-feature-settings: 'ss01' on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Filmkorn. Står stille – det er lys på en flate, ikke et effektlag. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23k)'/></svg>");
}

img, svg { display: block; max-width: 100%; }

[hidden] { display: none !important; }

a { color: inherit; }

::selection { background: var(--tekst); color: var(--bunn); }

:focus-visible {
  outline: 2px solid var(--tekst);
  outline-offset: 3px;
  border-radius: 4px;
}

.hopp {
  position: absolute;
  left: var(--side);
  top: -100px;
  z-index: 200;
  background: var(--tekst);
  color: var(--bunn);
  padding: 10px 16px;
  border-radius: var(--r-pille);
  text-decoration: none;
}
.hopp:focus { top: 12px; }

.ramme {
  width: 100%;
  max-width: var(--maks);
  margin-inline: auto;
  padding-inline: var(--side);
}

.skjult {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- Skrift */

.tittel,
.overskrift {
  margin: 0;
  font-weight: 400;
  color: var(--tekst);
  text-wrap: balance;
}

.tittel {
  font-size: clamp(3.1rem, 0.9rem + 7.2vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.052em;
}

.overskrift {
  font-size: clamp(2.3rem, 1rem + 4.2vw, 4.9rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.tittel span,
.overskrift span { display: block; }

/* Kursiv serif bærer den menneskelige halvdelen av setningen. Serifen har
   lavere x-høyde enn groteskene, så den løftes litt for å stå like tungt. */
.tittel em,
.overskrift em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  letter-spacing: -0.03em;
  color: var(--tekst-sterk);
}

.ingress {
  margin: 0;
  max-width: 34ch;
  color: var(--tekst-2);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.5;
}
.ingress strong { color: var(--tekst); font-weight: 500; }

.liten { font-size: 0.875rem; line-height: 1.5; }
.svak { color: var(--tekst-2); }
.tall { font-variant-numeric: tabular-nums; }
.rodt { color: var(--rod); }

.merkelapp {
  display: inline-flex;
  justify-self: start;
  width: max-content;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  border: 1px solid var(--kant);
  border-radius: var(--r-pille);
  background: var(--flate);
  color: var(--tekst-2);
  font-size: 0.875rem;
  line-height: 1;
}
.merkelapp::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tekst-2);
}

/* ---------------------------------------------------------------- Knapper */

.knapp {
  --knapp-bunn: var(--tekst);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--r-pille);
  background: var(--knapp-bunn);
  color: var(--bunn);
  font: 500 1rem/1 var(--sans);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ut), background-color 0.18s var(--ut), box-shadow 0.25s var(--ut);
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
.knapp:hover {
  --knapp-bunn: var(--knapp-hover);
  transform: translateY(-1px);
  box-shadow: 0 0 40px -6px rgba(255, 255, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.knapp:active { transform: scale(0.97); }

.knapp--glass {
  --knapp-bunn: var(--flate-2);
  color: var(--tekst);
  border: 1px solid var(--kant-sterk);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.knapp--glass:hover {
  --knapp-bunn: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.knapp--liten { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }

.lenke {
  color: var(--tekst);
  text-decoration: underline;
  text-decoration-color: var(--kant-sterk);
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.18s var(--ut);
}
.lenke:hover { text-decoration-color: var(--tekst); }

/* ---------------------------------------------------------------- Toppen */

.topp {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-block: 14px;
}
.topp::before {
  content: '';
  position: absolute;
  inset: 0 0 -32px;
  z-index: -1;
  /* Innhold som ruller under toppen skal ikke være lesbart bak logoen. Tett
     bakgrunn øverst som toner ut nedover, slik at det ikke blir en kant. Den
     ligger på 94 % og ikke 100, så gløden i bunnfargen fortsatt kommer
     gjennom. */
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bunn) 94%, transparent) 0%, color-mix(in srgb, var(--bunn) 90%, transparent) 55%, transparent 100%);
  pointer-events: none;
}

.topp__rad {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.merke {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  border-radius: 6px;
}
.merke { min-height: 44px; }
/* Toppen viser monogrammet (FV), bunnen ordet. De står aldri sammen. */
.merke img { display: block; height: 38px; width: auto; flex: none; }
.merke--bunn img { height: 16px; }
:root[data-palett='svart'] .merke img { filter: saturate(0) brightness(1.08); }

.meny {
  display: flex;
  gap: 2px;
  padding: 5px;
  border: 1px solid var(--kant);
  border-radius: var(--r-pille);
  background: color-mix(in srgb, var(--bunn-2) 60%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.meny a {
  padding: 9px 16px;
  border-radius: var(--r-pille);
  color: var(--tekst-2);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color 0.18s var(--ut), background-color 0.18s var(--ut);
}
.meny a:hover { color: var(--tekst); background: var(--flate-2); }
.meny a[aria-current='page'] { color: var(--tekst); background: var(--flate-2); }

.topp__hoyre { justify-self: end; display: flex; align-items: center; gap: 8px; }

@media (max-width: 959px) {
  .topp__rad { grid-template-columns: 1fr auto; }
  .meny { display: none; }
}
@media (max-width: 520px) {
  .mobil-skjul { display: none; }
}

/* ---------------------------------------------------------------- Historien
 *
 * Forsida er én scene. Rullingen er tida: nå-linja går nedover tirsdagen og
 * stempler hullene, og til slutt blir én dag til et år. Rullefeltet oppfører
 * seg helt vanlig – det er innholdet som svarer. Ingen scroll-jacking.
 *
 * Grunnoppsettet under står stille: alt under hverandre, ferdig stemplet.
 * .historie--levende settes av js/historie.js, og bare når redusert
 * bevegelse ikke er slått på.
 *
 * Fire tall fra skriptet styrer alt, hvert fra 0 til 1:
 *   --inn   åpningen viker, arket reiser seg og legger seg flatere
 *   --dag   nå-linja fra 09 til 17
 *   --aar   én dag blir til 46
 */

.historie {
  /* Lyskjegla bak timeboka er bredere enn skjermen. clip (ikke hidden) holder
     den innenfor uten å ødelegge position: sticky. */
  overflow-x: clip;
  --inn: 0;
  --dag: 0;
  --aar: 0;
  --tilt-x: 18deg;
  --tilt-z: -3deg;
  position: relative;
}

.historie__scene {
  position: relative;
  padding-block: clamp(28px, 5vw, 64px) clamp(56px, 8vw, 96px);
}

.helt__rutenett {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 32px;
  align-items: start;
}
.helt__rutenett > .tittel { grid-column: 1 / span 8; }

.helt__side {
  grid-column: 9 / -1;
  display: grid;
  gap: 24px;
  padding-top: clamp(8px, 2vw, 28px);
}

.helt__handling {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}

.scene {
  position: relative;
  width: min(720px, 100%);
  margin: clamp(40px, 6vw, 80px) auto 0;
  perspective: 1500px;
  perspective-origin: 50% 0%;
}

/* Lyskjeglen over bordet. */
.scene::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -18%;
  width: 150%;
  height: 130%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 45% 50% at var(--lx, 50%) var(--ly, 45%), rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 55%, transparent 72%);
  pointer-events: none;
}

/* Skyggen arket kaster på bordet. */
.scene::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 8%;
  bottom: -4%;
  height: 26%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.95), transparent 70%);
  filter: blur(18px);
  z-index: -1;
}

.ark-holder {
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50% 0%;
  transform:
    rotateX(calc(var(--tilt-x) * (1 - var(--inn) * 0.72)))
    rotateZ(calc(var(--tilt-z) * (1 - var(--inn) * 0.5)));
}

.tapskort {
  width: min(100%, 300px);
  margin: 28px 0 0 auto;
  padding: 18px 20px 20px;
  border: 1px solid var(--kant);
  border-radius: var(--r-flate);
  background: color-mix(in srgb, var(--bunn-2) 75%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.tapskort__dag { margin: 0; color: var(--tekst-2); font-size: 0.875rem; }
.tapskort__sum {
  margin: 6px 0 4px;
  color: var(--rod);
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.tapskort__hva { margin: 0; min-height: 2.6em; color: var(--tekst-2); font-size: 0.875rem; }

.historie__aar {
  display: grid;
  gap: 22px;
  justify-items: start;
  margin-top: clamp(64px, 9vw, 120px);
}
.historie__aar .ingress { max-width: 30ch; }

.bunke,
.naa,
.rull-hint { display: none; }

@media (max-width: 1023px) {
  .helt__rutenett > .tittel,
  .helt__side { grid-column: 1 / -1; }
  .helt__side { padding-top: 0; }
  .ingress { max-width: 40ch; }
}

@media (max-width: 640px) {
  .historie { --tilt-x: 10deg; --tilt-z: -2deg; }
  .tapskort { width: 100%; }
}


/* ---- Levende: scenen står fast, og rullingen driver den.
 *
 * Hele timeboka er i bildet fra første stund. Hvor den står og hvor stor
 * den er, regner js/historie.js ut fra skjermen og skriver som --x, --y og
 * --s. Rullingen flytter bare tida – og til slutt året. */

.historie--levende {
  height: 380vh;
  /* Opp under den faste toppen, så scenen fyller hele skjermen fra start. */
  margin-top: calc(var(--topp-h, 0px) * -1);
}

.historie--levende .historie__scene {
  opacity: calc(1 - var(--ut, 0));
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding: 0;
  overflow: hidden;
}

.historie--levende .scene {
  position: absolute;
  left: 0;
  top: 0;
  width: min(640px, calc(100% - 2 * var(--side)));
  margin: 0;
  transform-origin: 50% 0;
  transform:
    translate(calc(var(--x, 0) * 1px - 50%), calc(var(--y, 0) * 1px))
    scale(var(--s, 1));
}

/* PC: tekst til venstre, timeboka til høyre. */
.historie--levende .historie__apning {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  row-gap: 26px;
  transform: translateY(-50%);
  opacity: calc(1 - var(--aar) * 3);
}
.historie--levende .historie__apning > .tittel,
.historie--levende .historie__apning > .helt__side {
  grid-column: 1 / span 5;
  padding-top: 0;
}
.historie--levende .historie__apning .tittel { font-size: clamp(3rem, 1rem + 4.4vw, 6rem); }
.historie--levende .historie__apning .ingress { max-width: 36ch; }

.historie--levende .tapskort {
  position: absolute;
  right: max(var(--side), calc((100% - var(--maks)) / 2 + var(--side)));
  bottom: 28px;
  margin: 0;
  opacity: calc(1 - var(--aar) * 3);
}

.historie--levende .historie__aar {
  position: absolute;
  left: max(var(--side), calc((100% - var(--maks)) / 2 + var(--side)));
  top: 50%;
  width: min(40%, 520px);
  margin: 0;
  opacity: calc(var(--aar) * 1.8 - 0.4);
  transform: translateY(calc(-50% + (1 - var(--aar)) * 48px));
}

.historie--levende .rull-hint {
  position: absolute;
  left: max(var(--side), calc((100% - var(--maks)) / 2 + var(--side)));
  bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 16px 10px 18px;
  border: 1px solid var(--kant-sterk);
  border-radius: var(--r-pille);
  background: color-mix(in srgb, var(--bunn-2) 75%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--tekst-2);
  font-size: 0.875rem;
  white-space: nowrap;
  opacity: calc(1 - var(--inn) * 5);
  pointer-events: none;
}
.rull-hint svg { width: 14px; height: 14px; animation: dytt 1.8s var(--ut) infinite; }
@keyframes dytt { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }

/* Mobil og nettbrett: overskrift og knapp over, timeboka under. Ved første
   rull viker overskriften, og arket vokser til hele skjermen. */
@media (max-width: 1023px) {
  .historie--levende .historie__apning {
    top: var(--topp-h, 76px);
    transform: translateY(calc(var(--inn) * -40px));
    row-gap: 18px;
    opacity: calc(1 - var(--inn) * 1.6);
  }
  .historie--levende .historie__apning > .tittel,
  .historie--levende .historie__apning > .helt__side { grid-column: 1 / -1; }
  .historie--levende .historie__apning .tittel { font-size: clamp(2.5rem, 1.2rem + 5vw, 4.2rem); }
  .historie--levende .historie__apning .ingress,
  .historie--levende .historie__apning .lenke { display: none; }

  .historie--levende .tapskort {
    left: var(--side);
    right: var(--side);
    bottom: 14px;
    width: auto;
    padding: 14px 16px 16px;
    opacity: calc(min(var(--inn) * 3, 1) - var(--aar) * 3);
  }
  .historie--levende .tapskort__sum { font-size: 2rem; }

  .historie--levende .historie__aar {
    top: calc(var(--topp-h, 76px) + 8px);
    right: var(--side);
    width: auto;
    transform: translateY(calc((1 - var(--aar)) * 32px));
  }
  .historie--levende .historie__aar .regnestykke__linje { font-size: clamp(1.9rem, 1rem + 3.4vw, 3rem); }
  .historie--levende .historie__aar .ingress { font-size: 1rem; }

  .historie--levende .rull-hint {
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
  }
}

/* Stabelen av uker bak arket, i årsdelen. */
.historie--levende .bunke {
  display: block;
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}
.bunke span {
  position: absolute;
  inset: 0;
  padding: 18px 22px;
  border-radius: var(--r-papir);
  background: color-mix(in srgb, var(--papir) calc(100% - var(--i) * 9%), var(--grafitt));
  box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.8);
  color: var(--grafitt-2);
  font: 400 1.15rem/1 var(--hand);
  text-align: right;
  opacity: calc(var(--aar) * 3);
  transform:
    translate3d(calc(var(--aar) * var(--i) * -24px), calc(var(--aar) * var(--i) * -18px), calc(var(--i) * -1px))
    rotate(calc(var(--aar) * var(--i) * -1.4deg));
}

/* Nå-linja: slik en kalender viser klokka, bare i blyant. */
.historie--levende .naa {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--topp) + var(--dag) * 8 * var(--rad));
  z-index: 4;
  border-top: 2px solid var(--grafitt);
  opacity: calc((var(--inn) - 0.85) * 7 - var(--aar) * 6);
  pointer-events: none;
}
.naa::before {
  content: '';
  position: absolute;
  left: 2.3rem;
  top: -6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--grafitt);
}
.naa__kl {
  position: absolute;
  left: -4px;
  top: -10px;
  padding: 3px 5px;
  border-radius: 3px;
  background: var(--grafitt);
  color: var(--papir);
  font: 600 0.6875rem/1 var(--sans);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .naa::before { left: 1.7rem; }
  .naa__kl { font-size: 0.625rem; }
}

/* ---------------------------------------------------------------- Timeboka */

.ark {
  --rad: 50px;
  --topp: 58px;
  position: relative;
  max-width: 720px;
  margin-inline: auto;
  padding: 18px 22px 26px;
  border-radius: var(--r-papir);
  background: var(--papir);
  color: var(--grafitt);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 40px 60px -20px rgba(0, 0, 0, 0.9),
    0 90px 120px -40px rgba(0, 0, 0, 0.8);
}

/* Lyset faller ovenfra: sterkest øverst til venstre, mørkere mot kanten
   nærmest oss. Gjør papiret til en ting i rommet og ikke et kort. */
.ark::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  background:
    radial-gradient(90% 70% at 30% 10%, rgba(255, 255, 255, 0.28), transparent 60%),
    linear-gradient(to bottom, transparent 55%, rgba(0, 0, 0, 0.22));
  mix-blend-mode: soft-light;
}

/* Papirfiber. */
.ark::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
}

.ark__hode {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.55);
}
.ark__dag {
  font: 600 1.05rem/1 var(--sans);
  letter-spacing: -0.01em;
}
.ark__uke {
  font: 400 1.15rem/1 var(--hand);
  color: var(--grafitt-2);
}

.bok {
  position: relative;
  display: grid;
  grid-template-columns: 2.6rem 1fr 1fr;
  grid-template-rows: var(--topp) repeat(8, var(--rad));
}

/* Linjene i boka. Trykt, ikke skrevet – derfor rette og svake. */
.bok::before {
  content: '';
  position: absolute;
  inset: var(--topp) 0 0 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(var(--rad) - 1px),
    rgba(0, 0, 0, 0.14) calc(var(--rad) - 1px) var(--rad)
  );
  pointer-events: none;
}
.bok::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(2.6rem + (100% - 2.6rem) / 2);
  border-left: 1px solid rgba(0, 0, 0, 0.14);
  pointer-events: none;
}

.bok__navn {
  grid-row: 1;
  align-self: center;
  padding-left: 12px;
  font: 400 1.5rem/1 var(--hand);
  color: var(--grafitt);
}

.bok__kl {
  grid-column: 1;
  padding-top: 7px;
  font: 500 0.8125rem/1 var(--sans);
  color: var(--grafitt-2);
  font-variant-numeric: tabular-nums;
}

.post {
  position: relative;
  z-index: 1;
  margin: 3px 6px 3px 8px;
  padding: 7px 8px 0 10px;
  font: 400 1.18rem/1.1 var(--hand);
  color: var(--grafitt);
}
.post--lang { border-left: 2px solid color-mix(in srgb, var(--grafitt) 75%, transparent); }
.post small {
  display: block;
  margin-top: 3px;
  font-size: 0.95rem;
  color: var(--grafitt-2);
}
.post--pause { color: var(--grafitt-2); font-weight: 300; }

/* Tomme timer og uteblivelser. Stempelet er det eneste rødt på arket. */
.tap {
  position: relative;
  z-index: 1;
  margin: 3px 6px 3px 8px;
  border-radius: 3px;
}
.tap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--rod-blekk) 11%, transparent) 0 6px, color-mix(in srgb, var(--rod-blekk) 4%, transparent) 6px 12px);
}

.stempel {
  position: absolute;
  right: 6px;
  top: 50%;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 4px 8px 3px;
  border: 1.5px solid var(--rod-blekk);
  border-radius: 3px;
  color: var(--rod-blekk);
  font: 600 0.8125rem/1.1 var(--sans);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translateY(-50%) rotate(-3deg);
  mix-blend-mode: multiply;
}
.stempel b { font-weight: 700; }

.tap--uteble .post {
  margin: 0;
  padding-top: 4px;
}
.tap--uteble .post::after {
  content: '';
  position: absolute;
  left: 6px;
  right: 40%;
  top: calc(4px + 0.58em);
  height: 2px;
  background: var(--rod-blekk);
  transform-origin: left center;
  border-radius: 2px;
}

/* Tegnes bare når skriptet kjører. Uten JavaScript står alt ferdig stemplet. */
html.js .ark [data-tap]::before { opacity: 0; transition: opacity 0.35s var(--ut); }
html.js .ark [data-tap] .stempel {
  opacity: 0;
  transform: translateY(-50%) scale(1.5) rotate(-10deg);
}
html.js .ark [data-tap].tap--uteble .post::after { transform: scaleX(0); }

html.js .ark [data-tap].stemplet::before { opacity: 1; }
html.js .ark [data-tap].stemplet .stempel {
  opacity: 1;
  transform: translateY(-50%) scale(1) rotate(-3deg);
  transition: transform 0.32s cubic-bezier(0.3, 1.5, 0.5, 1), opacity 0.1s linear;
}
html.js .ark [data-tap].stemplet.tap--uteble .post::after {
  transform: scaleX(1);
  transition: transform 0.3s var(--ut);
}

@media (max-width: 640px) {
  .ark {
    --rad: 46px;
    --topp: 48px;
    padding: 14px 12px 18px;
  }
  .bok { grid-template-columns: 2rem 1fr 1fr; }
  .bok::after { left: calc(2rem + (100% - 2rem) / 2); }
  .bok__navn { font-size: 1.3rem; padding-left: 8px; }
  .post { margin-inline: 4px; padding: 6px 4px 0 6px; font-size: 1rem; }
  .post small { font-size: 0.85rem; }
  .tap { margin-inline: 4px; }
  .stempel { right: 4px; padding: 3px 6px 2px; font-size: 0.75rem; gap: 5px; }
  .stempel span { display: none; }
}

/* ---------------------------------------------------------------- Bolker */

.bolk { padding-block: clamp(72px, 11vw, 150px); position: relative; }
.bolk--forst { padding-top: clamp(32px, 6vw, 72px); }

.bolk__hode {
  display: grid;
  gap: 22px;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.bolk__hode .ingress { max-width: 46ch; }

/* Regnestykket i årsdelen av scenen. */
.regnestykke__linje {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(2rem, 1rem + 3.6vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--tekst-2);
  text-wrap: balance;
}
.regnestykke__linje strong {
  display: block;
  color: var(--rod);
  font-weight: 400;
}

/* ---------------------------------------------------------------- Analysen */

.analyse {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

.panel {
  border: 1px solid var(--kant);
  border-radius: var(--r-flate);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}

.skjema { padding: clamp(20px, 3vw, 36px); }

.gruppe {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 30px;
}
.gruppe + .gruppe {
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--kant);
}
.gruppe legend {
  float: left;
  width: 100%;
  margin-bottom: 4px;
  padding: 0;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.gruppe legend span {
  margin-right: 10px;
  color: var(--tekst-3);
  font-variant-numeric: tabular-nums;
}
.gruppe legend + * { clear: both; }

.sporsmaal {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
  row-gap: 6px;
  align-items: end;
}
.sporsmaal label,
.sporsmaal .etikett { color: var(--tekst); font-size: 1rem; line-height: 1.35; }
.sporsmaal output {
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sporsmaal input[type='range'],
.sporsmaal select,
.sporsmaal .dager,
.sporsmaal .hjelp { grid-column: 1 / -1; }
.hjelp { margin: 0; color: var(--tekst-2); font-size: 0.875rem; line-height: 1.5; max-width: 58ch; }

/* Skyveren. Tykk nok for en tommel mellom to kunder. */
input[type='range'] {
  --fylt: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(to right, var(--tekst) var(--fylt), rgba(255, 255, 255, 0.14) var(--fylt));
}
input[type='range']::-moz-range-track {
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.14);
}
input[type='range']::-moz-range-progress {
  height: 4px;
  border-radius: 99px;
  background: var(--tekst);
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--tekst-sterk);
  border: 0;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.08), 0 4px 12px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.18s var(--ut);
}
input[type='range']::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tekst-sterk);
  border: 0;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.08), 0 4px 12px rgba(0, 0, 0, 0.5);
}
input[type='range']:hover::-webkit-slider-thumb { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.12), 0 4px 12px rgba(0, 0, 0, 0.5); }
input[type='range']:focus-visible { outline: none; }
input[type='range']:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--bunn), 0 0 0 5px var(--tekst); }
input[type='range']:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--bunn), 0 0 0 5px var(--tekst); }

.dager { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.dag {
  min-width: 58px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--kant-sterk);
  border-radius: var(--r-pille);
  background: transparent;
  color: var(--tekst-2);
  font: 500 0.9375rem/1 var(--sans);
  cursor: pointer;
  transition: background-color 0.18s var(--ut), color 0.18s var(--ut), border-color 0.18s var(--ut);
}
.dag:hover { color: var(--tekst); border-color: var(--tekst-2); }
.dag[aria-pressed='true'] { background: var(--tekst); border-color: var(--tekst); color: var(--bunn); }

/* Tjenestene */
.tjenester { display: grid; gap: 10px; }
.tjenester__hode,
.tjeneste {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 0.9fr)) 44px;
  gap: 8px;
  align-items: center;
}
.tjenester__hode {
  color: var(--tekst-3);
  font-size: 0.8125rem;
  padding-inline: 4px;
}
.celle { display: grid; gap: 4px; min-width: 0; }
.celle__navn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; color: var(--tekst-3); font-size: 0.75rem; }

.felt {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--kant);
  border-radius: var(--r-felt);
  background: rgba(255, 255, 255, 0.04);
  color: var(--tekst);
  font: 400 1rem/1 var(--sans);
  font-variant-numeric: tabular-nums;
  transition: border-color 0.18s var(--ut), background-color 0.18s var(--ut);
}
.felt:hover { border-color: var(--kant-sterk); }
.felt:focus { outline: none; border-color: var(--tekst); background: rgba(255, 255, 255, 0.07); }
.felt[aria-invalid='true'] { border-color: var(--rod); }
.felt::placeholder { color: var(--tekst-3); }
input[type='number'].felt { -moz-appearance: textfield; }
input[type='number'].felt::-webkit-inner-spin-button,
input[type='number'].felt::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.fjern {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-pille);
  background: transparent;
  color: var(--tekst-3);
  cursor: pointer;
  transition: color 0.18s var(--ut), background-color 0.18s var(--ut);
}
.fjern:hover { color: var(--tekst); background: var(--flate-2); }
.fjern svg { width: 16px; height: 16px; }

.tjenester__under {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
.snitt { margin: 0; color: var(--tekst-2); font-size: 0.875rem; }
.snitt button {
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tekst);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--kant-sterk);
  text-underline-offset: 0.25em;
  cursor: pointer;
}

@media (max-width: 640px) {
  .tjenester__hode { display: none; }
  .tjeneste {
    grid-template-columns: repeat(3, minmax(0, 1fr)) 44px;
    padding: 12px;
    border: 1px solid var(--kant);
    border-radius: var(--r-felt);
    row-gap: 8px;
  }
  .celle__navn { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .tjeneste .celle--navn { grid-column: 1 / 4; }
  .tjeneste .fjern { grid-column: 4; grid-row: 1; align-self: end; }
  .tjeneste .celle:not(.celle--navn) { grid-row: 2; }
}

/* Svaret ved siden av */
.svar {
  position: sticky;
  top: 96px;
  padding: clamp(22px, 3vw, 34px);
  display: grid;
  gap: 22px;
  overflow: hidden;
}
.svar::before {
  content: '';
  position: absolute;
  inset: -40% -30% auto auto;
  width: 90%;
  height: 90%;
  background: radial-gradient(circle, color-mix(in srgb, var(--rod) 14%, transparent), transparent 65%);
  pointer-events: none;
}
.svar > * { position: relative; }

.svar__tomme { margin: 0; color: var(--tekst-2); }
.svar__tomme strong { color: var(--tekst); font-weight: 500; font-variant-numeric: tabular-nums; }

.svar__sum { margin: 0; }
.svar__sum span { display: block; color: var(--tekst-2); font-size: 0.9375rem; margin-bottom: 8px; }
.svar__sum strong {
  display: block;
  color: var(--rod);
  font-weight: 400;
  font-size: clamp(2.6rem, 1.5rem + 3vw, 4.2rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fordeling { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.fordeling li { display: grid; gap: 6px; }
.fordeling__rad { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9375rem; }
.fordeling__rad span:first-child { color: var(--tekst-2); }
.fordeling__rad span:last-child { font-variant-numeric: tabular-nums; }
.stolpe { height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.stolpe i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--rod); transition: width 0.4s var(--ut); }

.svar__papir {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--kant);
  color: var(--tekst-2);
  font-size: 0.9375rem;
}
.svar__papir strong { color: var(--tekst); font-weight: 500; font-variant-numeric: tabular-nums; }

.svar .knapp { width: 100%; }

/* Fast sum nederst på telefon, mens man drar i skyverne. */
.fast-sum {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 18px;
  border: 1px solid var(--kant-sterk);
  border-radius: var(--r-pille);
  background: color-mix(in srgb, var(--bunn-2) 85%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  transform: translateY(140%);
  transition: transform 0.35s var(--ut);
}
.fast-sum.synlig { transform: none; }
.fast-sum p { margin: 0; font-size: 0.8125rem; color: var(--tekst-2); line-height: 1.2; }
.fast-sum strong { display: block; color: var(--rod); font-size: 1.25rem; font-weight: 500; font-variant-numeric: tabular-nums; }

@media (max-width: 959px) {
  .analyse { grid-template-columns: 1fr; }
  .svar { position: relative; top: 0; }
  .fast-sum { display: flex; }
}

/* ---------------------------------------------------------------- Rapporten */

.rapport {
  margin-top: clamp(20px, 3vw, 40px);
  padding: clamp(22px, 4vw, 56px);
}

.rapport__hode {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 16px 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--kant);
}
.rapport__hode h2 {
  margin: 0;
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}
.rapport__hode h2 em { font-family: var(--serif); font-style: italic; font-size: 1.08em; }
.rapport__dato { margin: 0; color: var(--tekst-3); font-size: 0.875rem; }

.rapport__oppsummering {
  margin: 28px 0 0;
  max-width: 62ch;
  color: var(--tekst-2);
  font-size: 1.125rem;
}
.rapport__oppsummering strong { color: var(--tekst); font-weight: 500; }
.rapport__oppsummering .rodt { font-weight: 500; }

.tiltak {
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: tiltak;
}
.tiltak > li {
  counter-increment: tiltak;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: 8px 24px;
  padding-block: 28px;
  border-top: 1px solid var(--kant);
}
.tiltak > li::before {
  content: counter(tiltak);
  grid-row: 1 / span 3;
  color: var(--tekst-3);
  font-size: 1.5rem;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.tiltak h3 {
  margin: 0;
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.tiltak__verdi {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  text-align: right;
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tiltak__verdi small { display: block; color: var(--tekst-3); font-size: 0.8125rem; }
.tiltak__tekst { grid-column: 2 / -1; margin: 0; max-width: 64ch; color: var(--tekst-2); }
.tiltak__tekst strong { color: var(--tekst); font-weight: 500; }
.tiltak__fv {
  grid-column: 2 / -1;
  margin: 8px 0 0;
  max-width: 64ch;
  padding-left: 14px;
  border-left: 2px solid var(--kant-sterk);
  color: var(--tekst-2);
  font-size: 0.9375rem;
}
.tiltak__fv b { color: var(--tekst); font-weight: 500; }

@media (max-width: 640px) {
  .tiltak > li { grid-template-columns: 2rem minmax(0, 1fr); }
  .tiltak > li::before { grid-row: 1; }
  .tiltak__verdi { grid-column: 2; grid-row: auto; text-align: left; }
  .tiltak__tekst, .tiltak__fv { grid-column: 1 / -1; }
}

.rapport__regnestykke {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 8px;
  border: 1px solid var(--kant);
  border-radius: 14px;
  overflow: hidden;
  background: var(--kant);
}
.rapport__regnestykke div { padding: 20px 22px; background: var(--bunn-2); }
.rapport__regnestykke dt { color: var(--tekst-2); font-size: 0.875rem; margin-bottom: 8px; }
.rapport__regnestykke dd { margin: 0; font-size: 1.6rem; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rapport__regnestykke dd small { font-variant-numeric: normal; display: block; margin-top: 6px; color: var(--tekst-3); font-size: 0.8125rem; letter-spacing: 0; line-height: 1.4; }

@media (max-width: 760px) { .rapport__regnestykke { grid-template-columns: 1fr; } }

.rapport__handling {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 36px;
}
.rapport__merknad { margin: 24px 0 0; max-width: 70ch; color: var(--tekst-3); font-size: 0.875rem; }

/* ---------------------------------------------------------------- Hva du får */

.ukebrev-rad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.ukebrev-scene { position: relative; padding: clamp(10px, 3vw, 40px) 0; overflow-x: clip; }   /* gløden under stikker ut til sidene: ikke la den lage sideveis rulling */
.ukebrev-scene::before {
  content: '';
  position: absolute;
  inset: -20% -10%;
  background: radial-gradient(ellipse 50% 45% at 50% 50%, rgba(255, 255, 255, 0.1), transparent 70%);
  pointer-events: none;
}

.ukebrev {
  position: relative;
  max-width: 440px;
  margin-inline: auto;
  padding: 18px 20px 22px;
  border: 1px solid var(--kant-sterk);
  border-radius: 26px;
  background: color-mix(in srgb, var(--kort) 75%, transparent);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 50px 80px -30px rgba(0, 0, 0, 0.9);
}
.ukebrev__fra { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--tekst-2); font-size: 0.875rem; }
.ukebrev__fra img { width: 28px; height: 28px; border-radius: 7px; }
.ukebrev__fra span:last-child { margin-left: auto; color: var(--tekst-3); }
.ukebrev h3 { margin: 0 0 12px; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.ukebrev p { margin: 0 0 10px; color: var(--tekst); font-size: 0.975rem; line-height: 1.5; }
.ukebrev p:last-child { margin-bottom: 0; }
.ukebrev .rodt { font-variant-numeric: tabular-nums; }

.ukebrev-fot { margin: 16px auto 0; max-width: 440px; color: var(--tekst-3); font-size: 0.8125rem; text-align: center; }

.funksjoner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 5vw, 72px);
  margin: clamp(64px, 9vw, 120px) 0 0;
}
.funksjoner div { padding-block: 30px 34px; border-top: 1px solid var(--kant); transition: border-color 0.5s var(--ut); }
.funksjoner div:hover { border-top-color: var(--kant-sterk); }
.funksjoner dt { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.025em; margin-bottom: 10px; }
.funksjoner dd { margin: 0; color: var(--tekst-2); max-width: 44ch; font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty; }

@media (max-width: 860px) {
  .ukebrev-rad, .funksjoner { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- Pris */

.pris {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}

.pris__tall {
  margin: 18px 0 0;
  font-size: clamp(5rem, 2rem + 12vw, 12rem);
  line-height: 0.82;
  letter-spacing: -0.06em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.pris__tall em {
  display: block;
  margin-top: 0.22em;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.24em;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--tekst-2);
}

.pris__vilkaar { margin: 0; padding: 0; list-style: none; display: grid; }
.pris__vilkaar li {
  display: flex;
  gap: 14px;
  padding-block: 16px;
  border-top: 1px solid var(--kant);
}
.pris__vilkaar li:last-child { border-bottom: 1px solid var(--kant); }
.pris__vilkaar svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--tekst-2); }

.pris__time {
  margin: 28px 0 0;
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.pris__time span { color: var(--tekst-2); }

.pris .knapp { margin-top: 28px; }

@media (max-width: 860px) { .pris { grid-template-columns: 1fr; align-items: start; } }

/* ---------------------------------------------------------------- Oss og spørsmål */

.oss {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
}
.oss__tekst p { margin: 0 0 18px; color: var(--tekst-2); max-width: 52ch; font-size: 1.125rem; }
.oss__tekst p strong { color: var(--tekst); font-weight: 500; }

.sporsmaal-liste { border-top: 1px solid var(--kant); }
.sporsmaal-liste details { border-bottom: 1px solid var(--kant); }
.sporsmaal-liste summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding-block: 18px;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
}
.sporsmaal-liste summary::-webkit-details-marker { display: none; }
.sporsmaal-liste summary::after {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  color: var(--tekst-2);
  transition: transform 0.25s var(--ut);
}
.sporsmaal-liste details[open] summary::after { transform: rotate(45deg); }
.sporsmaal-liste details p { margin: 0 0 26px; max-width: 58ch; color: var(--tekst-2); font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty; }
.sporsmaal-liste details ul { margin: 0 0 26px; padding-left: 1.25em; max-width: 58ch; color: var(--tekst-2); font-size: 1.0625rem; line-height: 1.6; }
.sporsmaal-liste details li { margin-bottom: 12px; padding-left: 4px; text-wrap: pretty; }
.sporsmaal-liste details li::marker { color: var(--tekst-3); }
.sporsmaal-liste details li strong { color: var(--tekst); font-weight: 500; }
.sporsmaal-liste details p + p { margin-top: -12px; }

@media (max-width: 860px) { .oss { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Slutten */

.slutt {
  padding-block: clamp(96px, 14vw, 200px);
  text-align: center;
  position: relative;
}
.slutt::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 60% at 50% 55%, rgba(255, 255, 255, 0.09), transparent 70%);
  pointer-events: none;
}
.slutt > * { position: relative; }
.slutt .overskrift { font-size: clamp(2.8rem, 1rem + 6vw, 6.4rem); }
.slutt p { margin: 24px auto 32px; color: var(--tekst-2); }

.bunn {
  padding-block: 36px 48px;
  border-top: 1px solid var(--kant);
  color: var(--tekst-3);
  font-size: 0.875rem;
}
.bunn__rad {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
}
.bunn ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.bunn a { color: var(--tekst-2); text-decoration: none; }
.bunn nav a { display: inline-flex; align-items: center; min-height: 44px; }
.bunn nav ul { gap: 0 20px; }
.bunn__foretak a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.bunn a:hover { color: var(--tekst); }

.mangler {
  color: var(--rod);
  font-style: normal;
  border-bottom: 1px dashed currentColor;
}

/* ---------------------------------------------------------------- Undersider */

.underside { padding-block: clamp(36px, 6vw, 80px) clamp(72px, 10vw, 140px); }

.start {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.start__steg { margin: 36px 0 0; padding: 0; list-style: none; counter-reset: steg; }
.start__steg li {
  counter-increment: steg;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 4px 12px;
  padding-block: 18px;
  border-top: 1px solid var(--kant);
}
.start__steg li::before { content: counter(steg); grid-row: 1 / span 2; color: var(--tekst-3); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.start__steg b { font-weight: 500; }
.start__steg span { color: var(--tekst-2); font-size: 0.9375rem; }

.skjema--start { display: grid; gap: 22px; }
.skjema--start .knapp { justify-self: start; }
.felt-gruppe { display: grid; gap: 8px; }
.felt-gruppe label { font-size: 0.9375rem; }
.felt-gruppe label i { font-style: normal; color: var(--tekst-3); }
.felt-feil { margin: 0; color: var(--rod); font-size: 0.875rem; }
.felt-feil:empty { display: none; }
select.felt { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tekst-2) 50%), linear-gradient(135deg, var(--tekst-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
select.felt option { background: var(--bunn-2); color: var(--tekst); }

.avkryss { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9375rem; color: var(--tekst-2); cursor: pointer; }
.avkryss input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--tekst); flex: none; }

.honning { display: none; }

.melding { margin: 0; padding: 16px 18px; border-radius: var(--r-felt); border: 1px solid var(--kant-sterk); background: var(--flate-2); }
.melding--feil { border-color: var(--rod); }
.melding:empty { display: none; }

/* «Lag konto selv», øverst i panelet på start.html når appen er satt opp. */
.konto-selv { display: grid; gap: 14px; justify-items: start; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--kant); }
.konto-selv h2 { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; }
.konto-selv p { margin: 0; color: var(--tekst-2); max-width: 46ch; }

.takk { display: grid; gap: 16px; }
.takk h2 { margin: 0; font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); font-weight: 400; letter-spacing: -0.04em; line-height: 1; }
.takk p { margin: 0; color: var(--tekst-2); max-width: 52ch; }

@media (max-width: 860px) { .start { grid-template-columns: 1fr; } }

.tekstside { max-width: 68ch; }
.tekstside h2 { margin: 48px 0 12px; font-size: 1.4rem; font-weight: 500; letter-spacing: -0.02em; }
.tekstside p, .tekstside li { color: var(--tekst-2); }
.tekstside ul { padding-left: 1.2em; }

/* ---------------------------------------------------------------- Bevegelse og utskrift */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.utskrift-hode { display: none; }

.rapport:focus, .takk:focus { outline: none; }

/* Ukebrevet kommer inn linje for linje mens det rulles fram – som en
   melding som blir skrevet. --r settes av js/historie.js. */
html.rull .ukebrev { --r: 0; transform: translateY(calc((1 - min(var(--r) * 4, 1)) * 24px)) scale(calc(0.97 + min(var(--r) * 4, 1) * 0.03)); opacity: calc(var(--r) * 5); }
html.rull .ukebrev > :not(.ukebrev__fra) {
  opacity: calc((var(--r) - var(--fra)) * 7);
  transform: translateY(calc((1 - min(max((var(--r) - var(--fra)) * 7, 0), 1)) * 10px));
}

/* Mellom sidene: toppen står, innholdet toner over. */
@view-transition { navigation: auto; }
.topp { view-transition-name: topp; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Bunnen: juridiske lenker og foretaksopplysninger (e-handelsloven § 8). */
.bunn nav ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.bunn__foretak { margin-top: 18px; }
.bunn__foretak p { margin: 0; max-width: 80ch; line-height: 1.7; }
.bunn__foretak a { color: var(--tekst-2); text-decoration: underline; text-underline-offset: 0.2em; }

.tekstside__dato { margin: 14px 0 0; color: var(--tekst-3); font-size: 0.875rem; }
.tekstside code { font-size: 0.9em; padding: 1px 5px; border-radius: 4px; background: var(--flate-2); color: var(--tekst); }
.tekstside a:not(.knapp) { color: var(--tekst); text-decoration: underline; text-decoration-color: var(--kant-sterk); text-underline-offset: 0.2em; }
.pris__mva { margin: 14px 0 0; }
.pris__mva:has(.mangler), .pris__mva:empty { margin-top: 10px; }

/* «Du bytter ikke bookingsystem». Første spørsmål hos den som allerede har
   et system, og svaret hører hjemme rett etter historien, ikke nederst. */
.sammen { padding-block: clamp(48px, 7vw, 96px); border-top: 1px solid var(--kant); }
.sammen__rad {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 20px clamp(28px, 5vw, 72px);
  align-items: start;
}
.sammen__tittel {
  margin: 0;
  font-size: clamp(1.75rem, 1rem + 2.6vw, 3rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.sammen__tekst { margin: 0; max-width: 52ch; color: var(--tekst-2); font-size: 1.125rem; line-height: 1.55; }
@media (max-width: 860px) { .sammen__rad { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Finpuss
 *
 * Det som gjør at siden føles dyr er ikke flere effekter, men at få ting er
 * gjort ordentlig: flater med kant og fatning, tekst med luft og størrelse,
 * og bevegelse som har vekt. Alt her er ren stil oppå det som allerede står.
 */

/* Flater som maskinert utstyr: selve flaten (kjernen) ligger i en
   fatning. Fatningen er en spredt skygge, så kurvene følger hverandre av
   seg selv, og ingenting endres i HTML-en. */
.panel,
.ukebrev {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--tekst) 9%, transparent),
    0 0 0 6px color-mix(in srgb, var(--tekst) 3.5%, transparent),
    0 0 0 7px color-mix(in srgb, var(--tekst) 9%, transparent),
    0 44px 80px -44px rgba(0, 0, 0, 0.7);
}
.ukebrev { box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--tekst) 10%, transparent),
    0 0 0 6px color-mix(in srgb, var(--tekst) 3.5%, transparent),
    0 0 0 7px color-mix(in srgb, var(--tekst) 9%, transparent),
    0 50px 80px -30px rgba(0, 0, 0, 0.85); }

/* Lesbarhet: pen brytning, og litt mer luft rundt de viktigste avsnittene. */
p, li, dd, summary { text-wrap: pretty; }
h1, h2, h3, .tittel, .overskrift { text-wrap: balance; }
.ingress { line-height: 1.55; }
.oss__tekst p, .sammen__tekst { line-height: 1.6; }

/* Fokus: samme uttrykk som resten, men mykere kant. */
:focus-visible { outline-offset: 4px; }

/* Bevegelse med vekt. Alt som kommer inn under åpningen løftes 22 px og tones
   inn, én gang, med en lang, bløt bremsing. reveal settes av skriptet i
   <head> bare når nettleseren kan og personen ikke har bedt om mindre
   bevegelse – uten det står alt synlig. */
html.reveal [data-inn] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 0.9s var(--ut), transform 1.1s var(--ut);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html.reveal [data-inn].inne { opacity: 1; transform: none; }

/* Åpningen: én koreografert inngang, ikke spredte effekter. Overskriften
   løftes linje for linje, så teksten, så timeboka. Bare på første innlasting. */
@keyframes stig {
  from { opacity: 0; transform: translate3d(0, 30px, 0); }
}
@keyframes stig-ark {
  from { opacity: 0; transform: translate3d(0, 46px, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  html.js .historie__apning .tittel > * { animation: stig 1.1s var(--ut) backwards; }
  html.js .historie__apning .tittel > :nth-child(2) { animation-delay: 0.09s; }
  html.js .historie__apning .tittel > :nth-child(3) { animation-delay: 0.18s; }
  html.js .historie__apning .helt__side > * { animation: stig 1.1s var(--ut) 0.42s backwards; }
  html.js .historie__apning .helt__side > :nth-child(2) { animation-delay: 0.54s; }
  html.js .scene .ark { animation: stig-ark 1.5s var(--ut) 0.3s backwards; }
}

/* Lyset følger pekeren med en myk forsinkelse (js/historie.js). */
@property --lx { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --ly { syntax: '<percentage>'; inherits: true; initial-value: 45%; }
.scene { transition: --lx 1.1s var(--ut), --ly 1.1s var(--ut); }

/* Spørsmål og svar åpner seg med en glidende bevegelse der nettleseren kan
   (Chrome og Safari nyere enn 2025); ellers åpner de som før. */
.sporsmaal-liste { interpolate-size: allow-keywords; }
.sporsmaal-liste details::details-content {
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transition: block-size 0.55s var(--ut), opacity 0.45s var(--ut), content-visibility 0.55s allow-discrete;
}
.sporsmaal-liste details[open]::details-content { block-size: auto; opacity: 1; }

/* Bunnen: mer luft, og logoen får plass. */
.bunn { padding-block: 56px 64px; }
.bunn__rad { align-items: center; }

/* ---------------------------------------------------------------- Mobilmeny
 *
 * En <details>, så den virker uten JavaScript. Bare synlig der den vanlige
 * menyen er skjult. Panelet ligger under toppen og fyller bredden.
 */
.mobilmeny { display: none; }
@media (max-width: 959px) { .mobilmeny { display: block; } }

.mobilmeny summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--kant-sterk);
  border-radius: var(--r-pille);
  background: var(--flate-2);
  color: var(--tekst);
  font: 500 0.9375rem/1 var(--sans);
  list-style: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ut), border-color 0.25s var(--ut);
}
.mobilmeny summary::-webkit-details-marker { display: none; }
.mobilmeny summary:hover, .mobilmeny[open] summary { background: rgba(232, 220, 200, 0.12); border-color: var(--tekst-3); }
@media (max-width: 400px) {
  .mobilmeny summary { padding: 0 14px; }
  .topp__hoyre .knapp--liten { padding: 0 15px; }
}

.mobilmeny__panel {
  position: absolute;
  left: var(--side);
  right: var(--side);
  top: calc(100% + 2px);
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--kant-sterk);
  border-radius: var(--r-flate);
  /* Tett bakgrunn: innholdet bak skal ikke kunne leses gjennom menyen. */
  background: var(--bunn-2);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8), inset 0 1px 0 color-mix(in srgb, var(--tekst) 9%, transparent);
}
.mobilmeny__panel a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 18px;
  border-radius: 14px;
  color: var(--tekst);
  font-size: 1.375rem;
  letter-spacing: -0.025em;
  text-decoration: none;
  transition: background-color 0.25s var(--ut);
}
.mobilmeny__panel a:hover, .mobilmeny__panel a[aria-current='page'] { background: var(--flate-2); }

/* ---------------------------------------------------------------- Dørene
 *
 * Forsiden er scenen. Det som før lå under den som ett langt dokument, er
 * egne sider, og hit kommer man ved å trykke: en liste, ikke en rullegardin. */
.dorer { padding-block: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 48px); }
.dorer__liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--kant); }
.dorer__liste li { border-bottom: 1px solid var(--kant); }
.dorer__liste a {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 8px clamp(24px, 4vw, 64px);
  align-items: baseline;
  padding: clamp(24px, 3.4vw, 40px) 4px;
  color: inherit;
  text-decoration: none;
  transition: padding-inline 0.5s var(--ut), background-color 0.5s var(--ut);
}
.dorer__liste a:hover, .dorer__liste a:focus-visible { padding-inline: 18px; background: var(--flate); }
.dorer__navn { font-size: clamp(1.9rem, 1rem + 3vw, 3.5rem); line-height: 1; letter-spacing: -0.04em; }
.dorer__tekst { color: var(--tekst-2); font-size: 1.0625rem; line-height: 1.5; max-width: 46ch; }
@media (max-width: 760px) { .dorer__liste a { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Egne sider */
.ramme--smal { max-width: calc(880px + 2 * var(--side)); }
.slutt--liten { padding-block: clamp(64px, 9vw, 128px) clamp(56px, 8vw, 112px); }
.slutt--liten .overskrift { font-size: clamp(2.4rem, 1rem + 5vw, 5rem); }
.pris__fot { margin-top: clamp(40px, 6vw, 72px); }
.pris__fot p { margin: 0; max-width: 62ch; color: var(--tekst-2); font-size: 1.0625rem; line-height: 1.6; }
.oss__tekst { max-width: 58ch; }
.oss__tekst p { margin: 0 0 22px; }
.underside .sammen { margin-top: clamp(48px, 7vw, 96px); }

/* Bunnen: sidene og de juridiske lenkene i hver sin rad. */
.bunn__rad--juss { margin-top: 4px; }
.bunn__rad--juss a { font-size: 0.8125rem; color: var(--tekst-3); }
.bunn__rad--juss a:hover { color: var(--tekst-2); }

/* Utskrift. Ligger sist i fila med vilje: reglene for .panel og .rapport lenger opp
   (fatning med spredte skygger, avrundede hjørner) ville ellers vunnet over dem
   og gitt en avrundet, skyggelagt boks midt på arket. Målet er én ren A4-side:
   ingen ramme, full bredde innenfor margene, og bare rapporten. */
@media print {
  @page { size: A4; margin: 14mm 16mm; }

  html, body { background: #fff !important; color: #000; font-size: 10pt; line-height: 1.4; }
  body::before, body::after, .topp, .historie, .bolk__hode, .skjema, .svar, .fast-sum,
  .bolk:not(#analyse), .slutt, .bunn, .rapport__handling, .hopp { display: none !important; }

  /* Fjern all bredde- og luftstyring fra siden; @page gir margene. */
  .ramme, .bolk, #analyse, .analyse { display: block; width: auto; max-width: none; margin: 0; padding: 0; }

  .rapport, .rapport::before, .rapport::after {
    width: auto; max-width: none; margin: 0; padding: 0;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important;
  }
  [data-inn] { opacity: 1 !important; transform: none !important; }

  .rapport__hode { padding: 0 0 4mm; border-color: #bbb; }
  .rapport__hode h2 { color: #000; font-size: 20pt; }
  .rapport__oppsummering { margin: 4mm 0 3mm; max-width: none; color: #222; font-size: 11pt; }
  .rapport__oppsummering strong { color: #000; }

  .tiltak { margin: 0; }
  .tiltak > li { padding: 3mm 0; border-color: #bbb; break-inside: avoid; }
  .tiltak h3 { color: #000; }
  .tiltak__tekst { max-width: none; }
  .tiltak__tekst, .tiltak__fv, .rapport__merknad, .rapport__dato, .rapport__regnestykke dt,
  .tiltak__verdi small, .tiltak > li::before { color: #333; }
  .tiltak__tekst strong, .tiltak__fv b { color: #000; }
  .rodt { color: #b3261e !important; }

  .rapport__regnestykke { margin: 4mm 0 0; border: 1px solid #bbb; border-radius: 0; background: #bbb; break-inside: avoid; }
  .rapport__regnestykke div { padding: 3mm 4mm; background: #fff; }
  .rapport__regnestykke dd { color: #000; font-size: 15pt; }

  .rapport__merknad { max-width: none; margin-top: 3mm; font-size: 9pt; }

  .utskrift-hode { display: block !important; margin: 0 0 4mm; font: italic 500 16pt var(--serif); }
}