/* Amalie Bie Kaarud — portefølje
   Stilene er oversatt fra design/Portfolio.dc.html. Fargene og fontene kommer
   fra temaet build.js skriver inn som CSS-variabler i index.html. */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* toppflaten (body::before) legges av mot body-boksen */
  position: relative;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; text-transform: inherit; cursor: pointer; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* ---------- animasjoner ---------- */

@keyframes bob {
  0%, 20%  { transform: translateY(0) rotate(45deg); }
  40%      { transform: translateY(11px) rotate(45deg); }
  55%      { transform: translateY(2px) rotate(45deg); }
  70%      { transform: translateY(7px) rotate(45deg); }
  85%,100% { transform: translateY(0) rotate(45deg); }
}
@keyframes fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes tittelFall {
  0%   { opacity: 0; transform: translateY(-240px);
         animation-timing-function: cubic-bezier(0.45, 0, 0.75, 0.35); }
  8%   { opacity: 1; }
  52%  { transform: translateY(0);
         animation-timing-function: cubic-bezier(0.3, 0, 0.25, 1); }
  70%  { transform: translateY(-26px); }
  85%  { transform: translateY(0); }
  93%  { transform: translateY(-7px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes starFall {
  0%   { opacity: 0; transform: translateY(-240px) rotate(-16deg);
         animation-timing-function: cubic-bezier(0.45, 0, 0.75, 0.35); }
  8%   { opacity: 1; }
  52%  { transform: translateY(0) rotate(0deg);
         animation-timing-function: cubic-bezier(0.3, 0, 0.25, 1); }
  70%  { transform: translateY(-26px) rotate(5deg); }
  85%  { transform: translateY(0) rotate(0deg); }
  93%  { transform: translateY(-7px) rotate(-2deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}
@keyframes starFadeIn {
  0%   { opacity: 0; transform: scale(0.85) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.92) translateY(14px); }
  55%  { opacity: 1; transform: scale(1.02) translateY(-4px); }
  75%  { transform: scale(0.99) translateY(2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes megShine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- toppflaten ---------- */

/* Fra Figma: en varm rødtone over om meg og hero, med et fint korn oppå.
   Tonen er gradienten fra designet (#853131 på 20 % som toner ut i
   rgba(194,0,0,0)), kornet en liten svg-flis: monotont #530000 på 2 %
   med 1,8 px grain. Flata slutter der case-lista begynner — main.js
   måler høyden og setter --topp-hoyde.

   Tonen og kornet ligger i to lag med vilje. Kornet må tones ut mot
   slutten, ellers står det en svak strek der det brått tar slutt. Men en
   maske på gradienten tvinger den gjennom sitt eget lag, og der mister
   den dithering-en nettleseren ellers gir den — da trapper de 26
   fargenivåene seg synlig ned over 1500 px, og tonen blir stripet.
   Derfor: gradient uten maske, korn med. */
body::before,
body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topp-hoyde, 1100px);
  z-index: -1;
  pointer-events: none;
}

body::before {
  background-image:
    linear-gradient(180deg, rgba(133, 49, 49, 0.2), rgba(194, 0, 0, 0));
}

body::after {
  background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'><filter%20id='k'%20x='0'%20y='0'%20width='1'%20height='1'%20color-interpolation-filters='sRGB'><feTurbulence%20type='fractalNoise'%20baseFrequency='0.55'%20numOctaves='1'%20stitchTiles='stitch'/><feComponentTransfer><feFuncA%20type='linear'%20slope='4'%20intercept='-1.5'/></feComponentTransfer><feColorMatrix%20values='0%200%200%200%200.325%200%200%200%200%200%200%200%200%200%200%200%200%200%200.02%200'/></filter><rect%20width='180'%20height='180'%20filter='url(%23k)'/></svg>");
  mask-image: linear-gradient(180deg, #000 85%, transparent);
}

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 16px;
  z-index: 20;
  /* Nav-en ligger i flyten (det er det som får sticky til å virke),
     men skal ikke skyve hero nedover. Fast høyde gjør regnestykket
     eksakt: 4 marg + 34 høyde = 38, pluss hero-overlappen på 120.
     Avstanden opp til kortet blir 4 + om-seksjonens 16px padding. */
  margin: 4px 16px -158px auto;
  height: 34px;
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
  padding: 7px 28px;
  background: var(--footer-bg);
  color: var(--footer-fg);
  /* lys, dempet ramme — #915555 i standardtemaet */
  border: 1px solid color-mix(in srgb, var(--footer-fg) 34%, var(--accent));
  border-radius: 8px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent),
    0 0 5px color-mix(in srgb, var(--accent) 70%, transparent);
}

.nav__topp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--footer-fg);
}
.nav__topp-tekst { display: none; }

.nav__lenker {
  display: flex;
  gap: 28px;
  font-size: 14px;
  font-weight: 500;
}
.nav__lenker { color: var(--footer-fg); }
.nav__lenker a { color: var(--footer-fg); }
.nav__lenker a:hover { opacity: 0.65; }

/* hover-sonen strekkes ned gjennom nav-ens padding, ellers faller pekeren
   ut av gruppa i springet fra teksten til nedtrekket. Negativ marg gjør at
   marg-boksen er uendret, så nav-en ser like ut */
.nav__gruppe {
  position: static;
  padding-bottom: 12px;
  margin-bottom: -12px;
}

/* nedtrekket posisjoneres mot nav-en (sticky = containing block),
   ikke mot "Caser", slik at det kan vokse innover i stedet for
   ut over høyre skjermkant */
.nav__nedtrekk {
  display: grid;
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  width: max-content;
  min-width: 240px;
  max-width: min(380px, calc(100vw - 32px));
  /* topp-paddingen er både luft ned fra nav-en og en usynlig bro
     for musa — ::before starter der panelet faktisk skal tegnes */
  padding: 22px 8px 12px;
  visibility: hidden;
  opacity: 0;
  /* nådefrist: menyen blir stående — og klikkbar — i 240 ms etter at
     pekeren forlater den, så et lite rykk lukker den ikke lenger */
  transition: opacity 160ms ease 240ms, visibility 0s linear 400ms;
}
.nav__gruppe:focus-within .nav__nedtrekk,
.nav__gruppe.er-apen .nav__nedtrekk {
  visibility: visible;
  opacity: 1;
  transition: opacity 120ms ease, visibility 0s;
}

/* Med mus åpner hover som før. Uten mus henger :hover igjen etter et trykk,
   og nedtrekket ble stående åpent — der styrer .er-apen (main.js) alene. */
@media (hover: hover) {
  .nav__gruppe:hover .nav__nedtrekk {
    visibility: visible;
    opacity: 1;
    transition: opacity 120ms ease, visibility 0s;
  }
}

/* panelet tegnes bak lenkene, med luft over slik at mus\u00ads\u00adpranget
   fra "Caser" ned i menyen ikke lukker den */
.nav__nedtrekk::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--footer-bg);
  border: 1px solid color-mix(in srgb, var(--footer-fg) 34%, var(--accent));
  border-radius: 8px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent),
    0 0 5px color-mix(in srgb, var(--accent) 70%, transparent);
  z-index: -1;
}

.nav__case {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--footer-fg);
  transition: background 150ms ease, transform 150ms ease, color 150ms ease;
}
.nav__case:hover {
  background: var(--footer-fg);
  color: var(--footer-bg);
  transform: translateX(4px);
}

/* ---------- hero ---------- */

.hero {
  min-height: 54vh;
  scroll-margin-top: 0;
  display: grid;
  align-content: center;
  padding: 120px 32px 96px;
  position: relative;
}

.hero__tittel {
  margin: 0 auto;
  max-width: 1000px;
  width: 100%;
  text-align: center;
  font-family: var(--font-header);
  font-size: clamp(26px, 2.2vw, 42px);
  font-weight: var(--header-weight);
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: pretty;
  /* stjernene skal falle bak tittelen, ikke over den */
  position: relative;
  z-index: 3;
  opacity: 0;
}
body.er-skrevet .hero__tittel { animation: tittelFall 1100ms linear forwards; }

.hero__ord {
  display: inline-block;
  margin-right: 0.04em;
}

.hero__stjerne {
  position: absolute;
  object-fit: contain;
  opacity: 0;
}
body.er-skrevet .hero__stjerne--1 { animation: starFall 1100ms linear 0ms forwards; }
body.er-skrevet .hero__stjerne--2 { animation: starFall 1100ms linear 190ms forwards; }
body.er-skrevet .hero__stjerne--3 { animation: starFall 1100ms linear 380ms forwards; }

.hero__stjerne--1 { left: 8%; top: 26%; width: 90px; height: 90px; }
.hero__stjerne--2 { left: 76%; top: 52%; width: 110px; height: 110px; }
.hero__stjerne--3 { left: 36%; top: 84%; width: 68px; height: 68px; z-index: 2; }

.hero__pil {
  position: absolute;
  left: 50%; bottom: 88px;
  margin-left: -22px;
  width: 44px; height: 44px;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  transition: transform 200ms ease;
}
.hero__pil:hover { transform: scale(1.15); }
.hero__pil > span {
  display: block;
  width: 14px; height: 14px;
  border-right: 1.5px solid var(--fg);
  border-bottom: 1.5px solid var(--fg);
  animation: bob 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

/* ---------- om meg ---------- */

.om {
  scroll-margin-top: 0;
  display: grid;
  align-content: center;
  padding: 16px;
  position: relative;
  z-index: 5;
}

.om__kort {
  display: grid;
  align-content: center;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--footer-bg);
  color: var(--footer-fg);
  backdrop-filter: blur(8px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent),
    0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
}

.om__rutenett {
  margin: 0 auto;
  max-width: 1200px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

.om__portrett {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color 300ms ease;
}
.om__portrett:hover { border-color: #8fc4f0; }

.om__foto, .om__tegning {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.om__tegning { opacity: 0; transition: opacity 300ms ease; }
.om__portrett:hover .om__tegning { opacity: 1; }

.om__tekst {
  display: grid;
  gap: 20px;
  max-width: 720px;
}
.om__hei {
  margin: 0;
  font-family: var(--font-header);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-wrap: pretty;
}
.om__brod {
  margin: 0;
  color: #fde7e7;
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* lenkene erstatter cv-en på mobil, og er skjult på desktop */
.om__lenker {
  display: none;
  margin: 0;
  gap: 28px;
  font-size: 17px;
  font-weight: 600;
}
.om__lenker a {
  color: var(--footer-fg);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: #ff3b3b;
}
.om__lenker a:hover { opacity: 0.65; }

/* ---------- caser ---------- */

.caser {
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 32px;
}

.case {
  padding: 120px 0;
  scroll-margin-top: 88px;
  border-top: 1px solid transparent;
  border-image: linear-gradient(to right, transparent, var(--border) 15%, var(--border) 85%, transparent) 1;
}

.case__topp {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.case__intro { display: grid; gap: 16px; }

.case__merkelapper { display: flex; flex-wrap: wrap; gap: 8px; }
.merkelapp {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 50%, var(--bg));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 60%, transparent),
    inset 0 -1px 1.5px color-mix(in srgb, black 8%, transparent),
    0 1px 2px color-mix(in srgb, black 6%, transparent);
}

.case__tittel {
  margin: 0;
  font-family: var(--font-header);
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: var(--header-weight);
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: pretty;
}
.case__lede {
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 640px;
  text-wrap: pretty;
}

.case__meta {
  margin: 0;
  display: grid;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
}
.case__meta-rad {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.case__meta dt { color: var(--muted); }
.case__meta dd { margin: 0; }

.case__hero { margin-top: 48px; }
/* hero-mockupene har egen skygge og ligger litt bredere enn tekstspalta
   (1210 mot 1136 = 106,5%). min() holder dem innenfor vindusbredden så
   sida ikke får vannrett scroll. */
.case__hero--bred {
  width: min(106.5%, calc(100vw - 32px));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}
.case__tekst { position: relative; }

/* Bryteren skal stå rett under nav-ens venstre kant, uansett skjermbredde.
   Nav-en er høyrestilt mot vindukanten, mens casene ligger i et sentrert
   1200px-nett — så avstanden måles i main.js og legges i --bryter-innrykk.
   Uten js faller vi tilbake til `auto`, altså høyrestilt som før. */
.case__bryter-rad {
  margin-top: 24px;
  margin-bottom: -16px;
  margin-left: var(--bryter-innrykk, auto);
  margin-right: 0;
  width: fit-content;
  display: flex;
  position: sticky;
  /* nav-en står fast med 16px topp og er 34px høy — 58px gir 8px luft
     mellom nav-ens underkant og bryteren når begge er festet */
  top: 58px;
  z-index: 5;
}
.case__bryter {
  padding: 8px 16px;
  /* etiketten skal alltid stå på én linje */
  white-space: nowrap;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--font-body);
  font-weight: 500;
  background: var(--bg);
  color: var(--muted);
  transition: all 200ms ease;
}
.case__bryter.is-on {
  border-color: var(--fg);
  background: var(--fg);
  color: var(--bg);
}

.case__kort {
  margin-top: 40px;
  max-width: 680px;
  display: grid;
  gap: 20px;
  animation: bounceIn 550ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.case__kort .blokk-p { font-size: 18px; }

.case__full {
  margin-top: 40px;
  display: grid;
  gap: 56px;
  animation: fadein 300ms ease both;
}

.case__seksjon {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.case__seksjon-tittel {
  margin: 0;
  font-family: var(--font-header);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  position: static;
  align-self: start;
}
.case__blokker {
  display: grid;
  /* Låst spor: en figur som strekker seg ut over spalta (journey-kartet)
     skal ikke dra brødteksten med seg. */
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  max-width: 680px;
}

/* ---------- innholdsblokker ---------- */

.blokk-p {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--fg);
  text-wrap: pretty;
}
.blokk-p strong { font-weight: 600; color: var(--fg); }

.blokk-h {
  margin: 16px 0 0;
  font-family: var(--font-header);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.blokk-liste {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg);
}

.figur { margin: 12px 0; display: grid; gap: 8px; }
.figur figcaption { font-size: 13px; color: var(--muted); }
.figur-par {
  margin: 12px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.figur-par .figur { margin: 0; }

/* bildefelt: plassholder til et bilde legges i assets/caser/ */
.slot {
  width: 100%;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--surface) 70%, var(--bg));
  border: 1px dashed var(--border);
  overflow: hidden;
}
.slot--fylt {
  display: block;
  border: 0;
  /* plassholderflaten fra .slot skal ikke ligge bak et ferdig bilde */
  background: transparent;
  object-fit: cover;
  height: auto;
}
/* figurbilder i teksten står i en tynn ramme, slik diagrammene gjør i figma */
.figur .slot--fylt {
  border: 1px solid var(--accent);
  border-radius: 10px;
}
/* bilder som har sin egen kant fra før står uten ramme */
.figur--uten-ramme .slot--fylt {
  border: 0;
  border-radius: 0;
}

.slot__tekst {
  padding: 0 24px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

/* ---------- bunn ---------- */

.bunn {
  background: var(--footer-bg);
  color: var(--footer-fg);
  padding: 96px 32px 48px;
  display: flex;
}
.bunn__inner {
  margin: 0 auto;
  max-width: 1500px;
  width: 100%;
  display: grid;
  gap: 64px;
}
.bunn__rutenett {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.bunn__tittel {
  margin: 0;
  font-family: var(--font-header);
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: var(--header-weight);
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: pretty;
}
.bunn__kontakt {
  position: relative;
  display: grid;
  gap: 12px;
  font-size: 18px;
  justify-items: end;
  text-align: right;
}
.bunn__kontakt a {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: #ff3b3b;
}
.bunn__stripe {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--footer-border);
  font-size: 13px;
  color: var(--footer-muted);
}

.meg {
  position: relative;
  display: inline-block;
  cursor: default;
}
.meg__linje {
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--footer-fg) 50%, transparent);
  background-size: 200% 100%;
  animation: megShine 1.4s linear infinite;
}

.meg__boks {
  position: fixed;
  width: 150px; height: 150px;
  pointer-events: none;
  z-index: 50;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.meg__boks img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- desktop ---------- */

@media (min-width: 1024px) {
  .nav__topp-tekst { display: inline; }

  .om__rutenett {
    margin: 0 auto 0 0;
    max-width: none;
    grid-template-columns: auto 1fr;
    gap: 40px;
    align-items: center;
  }
  .om__portrett {
    width: auto;
    height: min(48vh, 520px);
    aspect-ratio: 472 / 520;
  }
  /* Teksten starter et stykke ned, som i designet — og går da klar av
     nav-en, som ellers legger seg oppå «Utdanning» på lave skjermer. */
  .om__innhold {
    align-self: start;
    padding-top: clamp(60px, 9vh, 90px);
  }
  .om__kort { min-height: auto; padding: 12px 32px 12px 12px; }
  .hero__stjerne--1 { width: 170px; height: 170px; }
  .hero__stjerne--2 { width: 200px; height: 200px; }
  .hero__stjerne--3 { width: 126px; height: 126px; }
  .case__topp {
    grid-template-columns: 1fr minmax(240px, 320px);
    gap: 64px;
    align-items: end;
  }
  .case__seksjon {
    grid-template-columns: minmax(120px, 200px) 1fr;
    gap: 40px;
  }
  .case__seksjon-tittel {
    position: sticky;
    top: 72px;
  }
  .bunn__rutenett {
    grid-template-columns: 0.85fr 1fr;
    gap: 40px;
    align-items: end;
  }
}

@media (max-width: 640px) {
  .figur-par { grid-template-columns: 1fr; }
  .nav { gap: 16px; padding: 7px 16px; }
  .nav__lenker { gap: 16px; }
  .case { padding: 80px 0; }
}

/* ---------- redusert bevegelse ---------- */

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

/* portrettrammen skjules når bildene ennå ikke er lagt i assets/ */
.om__portrett--tom {
  display: none;
}

/* mangler portrettbildene, får teksten hele bredden */
.om__rutenett--enkel {
  grid-template-columns: 1fr;
}
.om__rutenett--enkel .om__tekst {
  max-width: 680px;
}

/* ---------- om meg: innhold og cv ---------- */

.om__innhold {
  display: grid;
  gap: 32px;
}

/* ---------- erfaring og utdanning ---------- */

.om__cv {
  display: grid;
  gap: 32px;
}

.tidslinje__tittel {
  margin: 0 0 12px;
  font-family: var(--font-header);
  font-size: 14px;
  font-weight: 600;
  color: var(--footer-fg);
}

.tidslinje__rad {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 12px;
  padding-bottom: 18px;
  position: relative;
}

.tidslinje__spor {
  display: grid;
  justify-items: center;
  grid-template-rows: auto 1fr;
}
.tidslinje__prikk {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 6px;
}
.tidslinje__strek {
  width: 1px;
  height: 100%;
  background: color-mix(in srgb, var(--footer-fg) 20%, transparent);
  margin-top: 2px;
}
.tidslinje__rad:last-child .tidslinje__strek { display: none; }

.tidslinje__innhold {
  display: grid;
  gap: 2px;
  padding-bottom: 2px;
}
.tidslinje__rolle {
  font-size: 14px;
  font-weight: 600;
  color: var(--footer-fg);
  line-height: 1.3;
}
.tidslinje__sted { font-size: 13px; color: var(--footer-fg); opacity: 0.75; }
.tidslinje__aar  { font-size: 12px; color: var(--footer-fg); opacity: 0.55; }

.case { position: relative; }
.case--forste {
  border-top: none;
  border-image: none;
  /* luft mellom hero og første case, og plass til stjerna som
     henger ned under pila */
  padding-top: clamp(200px, 24vh, 320px);
}

/* ---------- bredt bilde uten bildetekst (IMGBRED) ---------- */

/* Ramma ligger rett i .case__full, som er like bred som case-spalta og
   sentrert i vinduet. Den strekkes ut til 16px fra hver vinduskant — bredere
   enn tekstspalta, slik bildet ligger i figma, men aldri bredere enn vinduet,
   så sida ikke får vannrett scroll. */
.bredbilde-ramme {
  width: calc(100vw - 32px);
  /* nullstiller figure-marginene, men beholder venstreforskyvninga */
  margin: 0 0 0 calc(50% - 50vw + 16px);
}
/* bildetekst under et bredt bilde følger bildets egen bredde. Flex, fordi
   hver tekst får bredden sin fra designfila: den starter der sin del av bildet
   starter og løper fram til neste tekst. */
.bredbilde-tekst {
  display: flex;
  margin: 8px auto 0;
  font-size: 13px;
  color: var(--muted);
}
/* Luften mellom to tekster tas fra teksten foran. Legges den på teksten etter,
   dyttes den innover og treffer ikke lenger kanten på sin egen bildedel. */
.bredbilde-tekst--par > span:not(:last-child) { padding-right: 16px; }

/* På smal skjerm er bildet så lite at en tekst på 21 % av bredda blir en
   remse på fem linjer. Da deler tekstene bredda likt i stedet — de står
   fortsatt over hver sin halvdel av bildet. */
@media (max-width: 640px) {
  .bredbilde-tekst > span { margin-left: 0 !important; flex: 1 1 0 !important; }
}
/* maksbredda kommer fra designfila, som inline max-width */
.bredbilde {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* ---------- frittstående bilde (IMGPLAIN) ---------- */

.figur--flat { justify-items: center; }
.flatbilde {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
}
.slot--flat { margin: 0 auto; }

/* ---------- desktop-tillegg ---------- */

@media (min-width: 1024px) {
  .om__cv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
}

/* over 1400px står teksten og cv-en side om side, slik designet gjør */
@media (min-width: 1400px) {
  .om__innhold {
    grid-template-columns: minmax(0, 520px) minmax(0, 640px);
    gap: 48px;
    align-items: start;
  }
}

@media (max-width: 1023px) {
  /* hero-en følger mobiloppsettet i Figma (390px-rammen): 358 høy,
     nav-en 4px inn fra toppen, tittelen 126px ned */
  .hero { min-height: 358px; padding: 104px 20px 48px; }
  .nav { margin-bottom: -38px; }
  .hero__tittel { font-size: 36px; letter-spacing: -0.035em; }
  .hero__pil { bottom: 40px; }
  /* to stjerner på mobil: én oppe til venstre, én nede til høyre */
  .hero__stjerne--1 { left: 16px; top: 9px; width: 98px; height: 88px; }
  .hero__stjerne--2 { display: none; }
  .hero__stjerne--3 {
    left: auto; right: 20px;
    top: auto; bottom: 5px;
    width: 97px; height: 87px;
  }
  /* hero-en og første case ligger inntil hverandre i Figma, så første
     casen får samme topp-luft som de andre */
  .case--forste { padding-top: 88px; }
  /* på mobil kommer teksten før portrettet, slik som i designet */
  .om__innhold { order: 1; }
  .om__portrett { order: 2; }
  /* cv-en er for tung på liten skjerm — vi viser lenker i stedet */
  .om__cv { display: none; }
  .om__lenker { display: flex; flex-wrap: wrap; }
}

/* ---------- journey: veldig bredt bilde som blas vannrett ---------- */

/* Rammen får tilstandsklassene, ikke figuren: i utvidet visning flyttes den
   ut av teksten og over i <body>, fordi case-teksten har en transform-
   animasjon som ellers ville låst position:fixed inne i seg. */
.journey__ramme {
  --journey-hoyde: 300px;
  --journey-flate: #fff;
  position: relative;
  background: var(--journey-flate);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

/* Selve scrolleruta. Bildet er delt i fliser som ligger på rad, så ruta
   oppfører seg som ett sammenhengende, veldig bredt bilde. */
.journey__rute {
  height: var(--journey-hoyde);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--fg) 25%, transparent) transparent;
}
.journey__rute:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
/* Innzoomet er kartet høyere enn ruta, og da skal man kunne dra oppover og
   nedover også. Ved zoom 1 fyller det ruta akkurat, så da er det ingenting
   å blas i loddrett. */
.journey__ramme.er-zoomet .journey__rute { overflow-y: auto; }
.journey__ramme.er-zoomet .journey__rute::-webkit-scrollbar { width: 8px; }
.journey__rute::-webkit-scrollbar { height: 8px; }
.journey__rute::-webkit-scrollbar-track { background: transparent; }
.journey__rute::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: color-mix(in srgb, var(--fg) 22%, transparent);
}

/* Sporet er boksen kartet fyller; js setter bredde og høyde etter zoomen.
   Laget inni er selve flisrekka, og den skaleres med transform mens man
   zoomer, så bevegelsen går på skjermkortet og ikke gjennom ny layout. */
.journey__spor {
  height: 100%;
  width: max-content;
}
.journey__lag {
  display: flex;
  height: 100%;
  width: max-content;
  transform-origin: 0 0;
}
.journey__flis {
  flex: none;
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Musebruk: dra for å bla. Berøring blar med fingeren som vanlig. */
@media (hover: hover) {
  .journey__rute { cursor: grab; }
}
.journey__ramme.er-dratt .journey__rute { cursor: grabbing; }
.journey__ramme.er-dratt .journey__flis { pointer-events: none; }

/* Toning i kantene viser at det er mer å se den veien. */
.journey__ramme::before,
.journey__ramme::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: 2;
}
.journey__ramme::before {
  left: 0;
  background: linear-gradient(to right, var(--journey-flate), transparent);
}
.journey__ramme::after {
  right: 0;
  background: linear-gradient(to left, var(--journey-flate), transparent);
}
.journey__ramme.har-mer-for::before,
.journey__ramme.har-mer-etter::after { opacity: 1; }

/* Blapiler for mus. */
.journey__pil {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--journey-flate) 88%, transparent);
  color: var(--fg);
  font-size: 15px;
  line-height: 1;
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
}
.journey__pil--for { left: 10px; }
.journey__pil--etter { right: 10px; }
.journey__pil:hover { transform: scale(1.08); }
.journey__pil[disabled] { display: none; }
.journey__ramme:hover .journey__pil,
.journey__ramme:focus-within .journey__pil { opacity: 1; }

/* Zoom: samme knappespråk som blapilene, nede i venstre hjørne. */
.journey__zoom {
  position: absolute;
  left: 10px;
  bottom: 12px;
  z-index: 3;
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 180ms ease;
}
.journey__ramme:hover .journey__zoom,
.journey__ramme:focus-within .journey__zoom,
.journey__ramme.er-zoomet .journey__zoom { opacity: 1; }
.journey__zoomknapp {
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--journey-flate) 88%, transparent);
  color: var(--fg);
  font-size: 16px;
  line-height: 1;
  transition: transform 180ms ease, background 150ms ease, color 150ms ease;
}
.journey__zoomknapp:hover:not([disabled]) { transform: scale(1.08); }
.journey__zoomknapp[disabled] { opacity: 0.32; }

.journey__utvid {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--journey-flate) 88%, transparent);
  color: var(--fg);
  font-size: 13px;
  line-height: 1;
  transition: background 150ms ease, color 150ms ease;
}
.journey__utvid:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.journey__hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 3;
  margin: 0;
  transform: translateX(-50%);
  padding: 7px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 82%, transparent);
  color: var(--bg);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 300ms ease;
}
.journey__ramme.er-rort .journey__hint { opacity: 0; }

/* Tynn strek nederst som viser hvor i kartet man er. */
.journey__linje {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 3px;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  pointer-events: none;
}
.journey__linje-fyll {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
}

/* ---------- utvidet visning ---------- */

.journey-bakteppe {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: color-mix(in srgb, var(--fg) 55%, transparent);
  animation: fadein 200ms ease both;
}

.journey__ramme.er-utvidet {
  position: fixed;
  inset: 16px;
  z-index: 100;
  border-radius: 12px;
  animation: fadein 200ms ease both;
}
/* I utvidet visning fyller ruta vinduet. Hvor stort kartet vises inni den,
   styrer zoomen i js — og den slipper det aldri større enn flisenes egen
   oppløsning. */
.journey__ramme.er-utvidet .journey__rute { height: 100%; }
.journey__ramme.er-utvidet .journey__utvid { top: 14px; right: 14px; }

@media (min-width: 700px) {
  .journey__ramme { --journey-hoyde: 420px; }
}

@media (hover: none) {
  .journey__pil { display: none; }
  .journey__zoom { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .journey__rute { scroll-behavior: auto; }
}