/* =========================================================
   Anna Hoelsæter Hansen — portfolio
   Scenografi og kostyme. Hardt, tysk, funksjonelt: sort/hvitt
   med én signalrød aksent. Rette kanter, ingen ornamentikk.
   Lyse sider (forside, about) er lobbyen. Works og enkeltverk
   er scenen — mørk bunn, som en black box.
   ========================================================= */

:root {
  --white: #fff;
  --black: #000;
  --red:   #e2001a;
  --grey:  #6b6b6b;
  --grey-dark: #9a9a9a;

  /* Temafarger, satt om per rute nedenfor. */
  --bg:    var(--white);
  --fg:    var(--black);
  --line:  var(--black);
  --muted: var(--grey);

  --font-display: "Archivo Black", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;

  --gap:    clamp(10px, 1.6vw, 22px);
  --margin: clamp(20px, 6vw, 96px);
}

body[data-route="works"],
body[data-route="work"] {
  --bg: var(--black);
  --fg: var(--white);
  --line: var(--white);
  --muted: var(--white);
}

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

/* Myk sideovergang der nettleseren støtter View Transitions
   (se rute() i app.js). Rene navnerom, ingen fallback nødvendig
   -- ukjente nettlesere ignorerer bare disse pseudo-elementene.
   Retningsbestemt i stedet for en flat krysstoning: den gamle
   siden glir svakt opp og bort, den nye kommer opp nedenfra. */
@keyframes side-ut {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(-18px); opacity: 0; }
}
@keyframes side-inn {
  from { transform: translateY(22px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0s;
}
:root.rute-byttes::view-transition-old(root) {
  animation: side-ut .3s cubic-bezier(.4, 0, .2, 1) both;
}
:root.rute-byttes::view-transition-new(root) {
  animation: side-inn .38s cubic-bezier(.16, .84, .44, 1) both;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, .55vw + 13px, 17px);
  line-height: 1.6;
  transition: background-color .3s ease, color .3s ease;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

::selection {
  background: var(--red);
  color: var(--black);
}
::-moz-selection {
  background: var(--red);
  color: var(--black);
}

/* Overskriftene får tabindex="-1" og et programmatisk .focus() ved
   hvert sideskifte (se rute() i app.js), rent for at skjermlesere
   skal havne et sted som gir mening -- ingen har faktisk tabbet seg
   dit. Ingen grunn til å vise en fokusring for det, spesielt ikke
   den røde kantlinja som ellers blinker opp rundt navnet på forsiden
   ved første innlasting. */
:is(h1, h2)[tabindex="-1"]:focus-visible {
  outline: none;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--red);
  color: var(--black);
  padding: .6em 1em;
  z-index: 20;
  font-weight: 700;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------
   Store, solide overskrifter. Ingen konturskrift, ingen skjevhet.
   --------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: .95;
  color: var(--fg);
  margin: 0;
}

/* ---------------------------------------------------------
   Masthead
   --------------------------------------------------------- */
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em 2.5em;
  padding: clamp(22px, 4vw, 42px) var(--margin);
}

.masthead__name {
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: clamp(11px, 1vw, 13px);
  color: var(--fg);
  transition: scale .15s cubic-bezier(.3, .7, .4, 1);
}

.masthead__nav {
  display: flex;
  align-items: baseline;
  gap: clamp(22px, 3vw, 40px);
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: clamp(10.5px, .85vw, 12px);
}

.masthead__nav a {
  position: relative;
  z-index: 0;
  padding: .4em .85em .3em;
  color: var(--fg);
  transition: color .15s ease .02s, scale .15s cubic-bezier(.3, .7, .4, 1);
}

/* En liten, skarpkantet takket flekk bak teksten på gjeldende/
   hover-lenke — som et revet klistremerke, ikke en myk blob.
   Den jitrer hele tiden, og humper ekstra når du hovrer. Sort
   med hvit skrift på lys bunn, snudd om på mørk bunn siden en
   sort flekk ville forsvunnet der. */
/* Ormete: formen kryper sakte og usymmetrisk rundt i hvile, og
   vrir seg frenetisk når du rører ved den. */
@keyframes blob-jitter {
  0%   { clip-path: polygon(14% 2%, 46% 0%, 74% 10%, 100% 26%, 92% 54%, 100% 82%, 70% 96%, 40% 100%, 10% 88%, 0% 50%); translate: 0 0; }
  16%  { clip-path: polygon(2% 14%, 34% 0%, 68% 8%, 96% 0%, 100% 38%, 86% 60%, 100% 90%, 62% 100%, 28% 92%, 0% 66%); translate: -3px 2px; }
  32%  { clip-path: polygon(20% 0%, 50% 12%, 82% 2%, 100% 30%, 88% 50%, 100% 76%, 66% 100%, 36% 88%, 6% 100%, 0% 40%); translate: 2px -3px; }
  50%  { clip-path: polygon(8% 6%, 40% 16%, 76% 0%, 100% 20%, 84% 46%, 100% 68%, 72% 100%, 38% 82%, 4% 96%, 0% 30%); translate: 3px 3px; }
  68%  { clip-path: polygon(16% 0%, 48% 8%, 80% 0%, 100% 34%, 90% 58%, 100% 86%, 58% 96%, 30% 100%, 2% 80%, 6% 20%); translate: -2px 3px; }
  84%  { clip-path: polygon(4% 10%, 36% 0%, 70% 14%, 100% 4%, 96% 40%, 100% 72%, 64% 100%, 30% 90%, 0% 100%, 0% 44%); translate: -3px -2px; }
  100% { clip-path: polygon(14% 2%, 46% 0%, 74% 10%, 100% 26%, 92% 54%, 100% 82%, 70% 96%, 40% 100%, 10% 88%, 0% 50%); translate: 0 0; }
}
@keyframes blob-hump {
  0%, 100% { rotate: 0deg; }
  20%      { rotate: -19deg; }
  45%      { rotate: 12deg; }
  70%      { rotate: -22deg; }
  88%      { rotate: 9deg; }
}

.masthead__nav a::before {
  content: "";
  position: absolute;
  inset: -10px -16px;
  z-index: -1;
  background: var(--black);
  opacity: 0;
  transform: scale(.6);
  animation: blob-jitter 3.2s ease-in-out infinite;
  transition: opacity .18s ease, transform .4s cubic-bezier(.34, 1.6, .64, 1);
}
body[data-route="works"] .masthead__nav a::before,
body[data-route="work"] .masthead__nav a::before {
  background: var(--white);
}

.masthead__nav a:hover::before,
.masthead__nav a:focus-visible::before,
.masthead__nav a[aria-current]::before {
  opacity: 1;
  transform: scale(1);
}
.masthead__nav a:hover::before,
.masthead__nav a:focus-visible::before {
  animation: blob-jitter 1.1s ease-in-out infinite, blob-hump .35s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .masthead__nav a::before { animation: none; }
  .cover__nav a::before { animation: none; }
  .carousel__dot[aria-current="true"] { animation: none; }
  .cover__name { transition: none; }
  .reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; }
  .works-preview { display: none; }
  .page__title { animation: none; }
}

.masthead__nav a:hover,
.masthead__nav a:focus-visible,
.masthead__nav a[aria-current] { color: var(--white); }
body[data-route="works"] .masthead__nav a:hover,
body[data-route="works"] .masthead__nav a:focus-visible,
body[data-route="works"] .masthead__nav a[aria-current],
body[data-route="work"] .masthead__nav a:hover,
body[data-route="work"] .masthead__nav a:focus-visible,
body[data-route="work"] .masthead__nav a[aria-current] { color: var(--black); }

/* På forsiden ligger navigasjonen nede, som i utkastet */
body[data-route="home"] .masthead,
body[data-route="home"] .colophon { display: none; }

main { flex: 1 0 auto; }

.colophon {
  padding: clamp(40px, 8vw, 110px) var(--margin) clamp(24px, 4vw, 44px);
  font-size: .82rem;
  color: var(--muted);
}
.colophon a { padding-bottom: 1px; border-bottom: 1px solid transparent; }
.colophon a:hover,
.colophon a:focus-visible { color: var(--red); border-bottom-color: var(--red); }

/* ---------------------------------------------------------
   Forside
   --------------------------------------------------------- */
.cover {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  padding-block: clamp(16px, 3vw, 32px);
  gap: clamp(16px, 3vw, 32px);
}

.cover__name {
  flex: 0 0 auto;
  font-size: clamp(1.3rem, 4.3vw, 3.5rem);
  padding-inline: var(--margin);
  text-align: center;
  transition: transform .3s ease-out;
}

.cover__name-short { display: none; }
.masthead__name-short { display: none; }

/* Under ca. 480px blir det fulle navnet trangt — vis en
   forkortet utgave i stedet, både på forsiden og i headeren. */
@media (max-width: 480px) {
  .cover__name-full { display: none; }
  .cover__name-short { display: inline; }
  .masthead__name-full { display: none; }
  .masthead__name-short { display: inline; }
}

.cover__band {
  flex: 1 1 auto;
  min-height: 0;
}
.cover__band .media {
  height: 100%;
  width: 100%;
}
.cover__band .media__lqip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cover__band .media__lqip,
.cover__band .media__full {
  /* Ankret på katten i bildet, slik at den alltid er synlig uansett
     hvor mye som beskjæres bort i høyden. */
  object-position: 27% 80%;
}

.cover__nav {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: clamp(48px, 22vw, 320px);
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.01em;
  font-size: clamp(23px, 3vw, 36px);
}
.cover__nav a {
  position: relative;
  z-index: 0;
  padding: .3em .7em .25em;
  color: var(--fg);
  transition: color .15s ease .02s, scale .15s cubic-bezier(.3, .7, .4, 1);
}

/* Samme ormete flekk-effekt som i hovedmenyen, bare skalert med
   em slik at den følger den mye større skriftstørrelsen her. */
.cover__nav a::before {
  content: "";
  position: absolute;
  inset: -.65em -1em;
  z-index: -1;
  background: var(--black);
  opacity: 0;
  transform: scale(.6);
  animation: blob-jitter 3.2s ease-in-out infinite;
  transition: opacity .18s ease, transform .4s cubic-bezier(.34, 1.6, .64, 1);
}

.cover__nav a:hover::before,
.cover__nav a:focus-visible::before {
  opacity: 1;
  transform: scale(1);
  animation: blob-jitter 1.1s ease-in-out infinite, blob-hump .35s ease-in-out infinite;
}

.cover__nav a:hover,
.cover__nav a:focus-visible { color: var(--white); }

/* ---------------------------------------------------------
   Sidegrunnlag
   --------------------------------------------------------- */
.page {
  padding: clamp(20px, 4vw, 60px) var(--margin) 0;
}

.page__title {
  font-size: clamp(2rem, 5.5vw, 4.5rem);
  margin-bottom: clamp(36px, 7vw, 96px);
}

/* Overskriften strammer seg lett til i løpet av de første ca. 220px
   du scroller -- drevet direkte av scrolleposisjonen, ikke musen,
   og helt uten JavaScript. Chrome/Edge i skrivende stund; andre
   nettlesere beholder bare den faste starttilstanden. */
@supports (animation-timeline: scroll()) {
  @keyframes titteljustering {
    from { letter-spacing: .01em; transform: scale(1.035); }
    to   { letter-spacing: -.01em; transform: scale(1); }
  }
  .page__title {
    transform-origin: left center;
    animation: titteljustering linear both;
    animation-timeline: scroll();
    animation-range: 0px 220px;
  }
}

/* ---------------------------------------------------------
   About
   --------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

@media (min-width: 820px) {
  .about { grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr); }
}

.about__bio p { margin: 0 0 1.4em; max-width: 46ch; }
.about__bio .lines { white-space: pre-line; }

.about__contact {
  margin-top: 2.4em;
  display: grid;
  gap: .45em;
  justify-items: start;
}
.about__contact a { border-bottom: 1px solid transparent; }
.about__contact a:hover,
.about__contact a:focus-visible { color: var(--red); border-bottom-color: var(--red); }

.about__portrait { margin: 0; }
/* Uten en fast aspect-ratio her styres boksens høyde av den vesle,
   uskarpe plassholder-versjonen av bildet mens den lastes -- og på
   ekte Netlify Image CDN kommer den noen ganger tilbake med feil
   proporsjoner, som gjorde portrettet superavlangt og innzoomet.
   Setter riktig forhold direkte, som alle andre bilder på siden. */
.about__portrait .media { aspect-ratio: 1743 / 1880; }

.about__credit {
  margin: .7em 0 0;
  font-size: .8rem;
  color: var(--muted);
}

/* ---------------------------------------------------------
   Works-oversikt: en ren tekstliste. Hold musen over en
   tittel, og et bilde av worket dukker opp og følger
   pekeren -- i stedet for et fast bilde ved siden av hver
   tittel. På berøringsskjerm vises et lite bilde i selve
   raden i stedet, siden det ikke finnes noen pekerposisjon.
   --------------------------------------------------------- */
.works-list {
  --pad: clamp(16px, 2.8vw, 32px);
  display: flex;
  flex-direction: column;
  margin-left: calc(var(--pad) * -1);
}

.work-row {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 28px);
  padding: clamp(14px, 2.4vw, 22px) var(--pad);
  border-top: 1px solid color-mix(in srgb, var(--line) 22%, transparent);
  transition: background-color .18s ease, padding-block .32s cubic-bezier(.4, 0, .2, 1);
}
.work-row:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--line) 22%, transparent);
}

/* "Push"-effekt: når du holder over en rad, klemmes radene rundt
   den lett sammen mens raden du peker på får litt mer albuerom --
   en levende liste i stedet for en helt statisk en. Bare der det
   finnes ordentlig hover og :has()-støtte (progressiv forbedring,
   listen fungerer helt fint uten også). */
@media (hover: hover) {
  @supports selector(:has(a)) {
    .works-list:has(.work-row:hover) .work-row:not(:hover) {
      padding-block: calc(clamp(14px, 2.4vw, 22px) * .55);
    }
    .works-list:has(.work-row:hover) .work-row:hover {
      padding-block: calc(clamp(14px, 2.4vw, 22px) * 1.3);
    }
  }
}

.work-row__thumb {
  position: relative;
  flex: none;
  width: clamp(52px, 7vw, 76px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.work-row__thumb .media,
.work-row__thumb .media img { width: 100%; height: 100%; object-fit: cover; }

/* Skjules der det finnes en presis peker (mus/trackpad) --
   der tar den store, flytende forhåndsvisningen over jobben. */
@media (pointer: fine) {
  .work-row__thumb { display: none; }
}

.work-row__text { min-width: 0; }

.work-row__title { margin: 0; }

.work-row__title-main {
  display: block;
  font-size: clamp(2rem, 5.6vw, 4.6rem);
  color: var(--fg);
  transition: color .18s ease;
}

.work-row__title-sub {
  display: block;
  margin-top: .5em;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(.85rem, 1.3vw, 1.1rem);
  max-width: 26ch;
  color: var(--muted);
  transition: color .18s ease;
}

.work-row__eyebrow {
  margin-bottom: .5em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  transition: color .18s ease;
}

.work-row:hover,
.work-row:focus-within { background-color: var(--red); }
.work-row:hover .work-row__title-main,
.work-row:focus-within .work-row__title-main,
.work-row:hover .work-row__title-sub,
.work-row:focus-within .work-row__title-sub,
.work-row:hover .work-row__eyebrow,
.work-row:focus-within .work-row__eyebrow { color: var(--black); }

/* Bildet som følger musepekeren i works-listen. Posisjonen
   settes fortløpende i JS -- her styrer vi bare utseende og
   av/på-toningen. */
.works-preview {
  position: fixed;
  top: 50%;
  right: clamp(24px, 5vw, 84px);
  transform: translateY(-50%);
  z-index: 40;
  width: clamp(220px, 22vw, 340px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.works-preview.is-visible { opacity: 1; }

/* To bildelag oppå hverandre -- det nye lastes ferdig skjult og
   krysstones inn først når det er klart (se visForhandsvisningsbilde()
   i app.js), så bildebyttet aldri viser et tomt glimt mens noe
   fortsatt laster. */
.works-preview__lag {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform: scale(.97);
  transition: opacity .4s ease, transform .6s cubic-bezier(.16, .84, .44, 1);
}
.works-preview__lag.is-fremst {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

@media (pointer: coarse) {
  .works-preview { display: none; }
}

/* På smalere skjermer er det ikke plass til en stor, fast bildeboks
   i margen uten at den dekker over teksten -- da holder vi oss til
   den lille, alltid synlige miniatyren i selve raden i stedet
   (styrt av .work-row__thumb sin egen pointer:fine-regel). */
@media (max-width: 1100px) {
  .works-preview { display: none; }
}

/* ---------------------------------------------------------
   Enkeltverk: tittel (stor hoveddel + liten underdel),
   karusell, ev. en rad med tre høydebilder, så beskrivelse
   og kreditter side om side.
   --------------------------------------------------------- */
.work__heading { margin-bottom: clamp(30px, 5vw, 64px); }
.work__title { margin-bottom: 0; max-width: 22ch; }
.work__eyebrow {
  margin-bottom: .6em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(.75rem, 1vw, .85rem);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}

.work__title-main {
  display: block;
  font-size: clamp(2.6rem, 8vw, 7rem);
}

.work__title-sub {
  display: block;
  margin-top: .4em;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  color: var(--muted);
  max-width: 38ch;
}

/* Karusell — går i full bredde, ut over sidemargene. */
.carousel {
  position: relative;
  margin-inline: calc(var(--margin) * -1);
}

.carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }

.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}
.carousel__slide .media { aspect-ratio: 16 / 10; }

@media (max-width: 700px) {
  .carousel__slide .media { aspect-ratio: 4 / 5; }
  .carousel__slide .media__lqip,
  .carousel__slide .media__full {
    object-position: var(--fokus-mobil, 50% 50%);
  }
}

.carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(30px, 3.6vw, 40px);
  height: clamp(30px, 3.6vw, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(128, 128, 128, .22);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 1.05rem;
  opacity: .6;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, opacity .15s ease, scale .15s cubic-bezier(.3, .7, .4, 1);
}
.carousel__nav:hover,
.carousel__nav:focus-visible { opacity: 1; background: rgba(128, 128, 128, .34); color: var(--red); }
.carousel__nav--prev { left: clamp(6px, 1.5vw, 14px); }

.carousel__counter {
  position: absolute;
  right: clamp(10px, 2vw, 18px);
  bottom: clamp(10px, 2vw, 18px);
  padding: .3em .65em;
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--white);
  background: rgba(0, 0, 0, .55);
  pointer-events: none;
}
.carousel__nav--next { right: clamp(6px, 1.5vw, 14px); }

.carousel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
}
.carousel__dot {
  width: 22px;
  height: 10px;
  background: var(--muted);
  opacity: .45;
  cursor: pointer;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 10'%3E%3Cpath d='M1,5 C4,1 7,1 10,5 C13,9 16,9 19,5 C22,1 25,1 28,5 C31,9 34,9 37,5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 10'%3E%3Cpath d='M1,5 C4,1 7,1 10,5 C13,9 16,9 19,5 C22,1 25,1 28,5 C31,9 34,9 37,5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: opacity .2s ease, width .2s ease, background-color .2s ease, scale .15s cubic-bezier(.3, .7, .4, 1);
}
.carousel__dot:hover { opacity: .8; }
/* Den aktive krusedullen kryper sakte bortover som en orm — en
   repeterende bølgetile som skyves gjennom masken i en loop. */
@keyframes squiggle-slither {
  from { -webkit-mask-position: 0 0; mask-position: 0 0; }
  to   { -webkit-mask-position: -20px 0; mask-position: -20px 0; }
}

.carousel__dot[aria-current="true"] {
  width: 40px;
  background: var(--red);
  opacity: 1;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath d='M0,5 C2.5,1 7.5,1 10,5 C12.5,9 17.5,9 20,5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath d='M0,5 C2.5,1 7.5,1 10,5 C12.5,9 17.5,9 20,5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 20px 10px;
  mask-size: 20px 10px;
  animation: squiggle-slither .9s linear infinite;
}

/* Rad med tre høydebilder — i rett linje, ingen forskyvning,
   med luft mellom bildene. */
.triptych {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gap);
  margin-block: clamp(40px, 7vw, 90px);
}
.triptych .media { aspect-ratio: 3 / 4; }

/* På smal skjerm blir det en sveipbar karusell i stedet for tre
   trange kolonner — neste bilde stikker inn fra høyre kant, som
   på Apples produktsider. Ingen piler eller prikker, bare sveip. */
@media (max-width: 700px) {
  .triptych {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .triptych::-webkit-scrollbar { display: none; }
  .triptych > .media {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }
}

/* Beskrivelse + kreditter */
.work__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(48px, 7vw, 96px);
}

@media (min-width: 820px) {
  .work__body { grid-template-columns: minmax(0, 1.4fr) minmax(230px, .8fr); }
}

.work__desc p { margin: 0 0 1.3em; max-width: 60ch; font-size: clamp(1rem, 1.05vw, 1.15rem); }

.work__credits { }
.work__credits-list { display: flex; flex-direction: column; }
.work__credits-item {
  padding-block: .8em;
  border-top: 1px solid color-mix(in srgb, var(--fg) 20%, transparent);
}
.work__credits-item:first-child { border-top: none; padding-top: 0; }
.work__credits-role {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .68rem;
  color: var(--muted);
  margin-bottom: .35em;
}
.work__credits-name {
  font-size: .96rem;
  line-height: 1.5;
  color: var(--fg);
}

.work__back {
  display: block;
  margin-top: clamp(56px, 8vw, 100px);
  margin-inline: calc(var(--margin) * -1);
  padding: clamp(24px, 4.5vw, 44px) var(--margin);
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  font-size: clamp(1.1rem, 2.8vw, 1.9rem);
  letter-spacing: -.01em;
  border-top: 1.5px solid var(--line);
  transition: background-color .15s ease, color .15s ease, scale .15s cubic-bezier(.3, .7, .4, 1);
}
.work__back:hover,
.work__back:focus-visible { background: var(--red); color: var(--black); }

/* ---------------------------------------------------------
   Scroll-reveal: elementer toner/glir svakt inn når de rulles
   inn i synsfeltet, i stedet for å bare stå der med en gang.
   --------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.16, .84, .44, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------
   Bildeinnlasting: uskarp miniatyr først, fullbilde toner inn
   --------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  background: rgba(128, 128, 128, .12);
}

.media__lqip {
  width: 100%;
  filter: blur(14px);
  transform: scale(1.06);
  opacity: 1;
  transition: opacity .45s ease .05s;
}

.media__full {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1);
  transition: opacity .55s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}

/* Hover-zoom: et lite, mykt innzoom på bilder i karusellen og
   høydebilde-raden når du holder musen over dem. Bare der det
   finnes en ordentlig hover (ikke berøringsskjerm), så det ikke
   blir en "sittende fast i zoomet tilstand"-følelse etter et trykk. */
@media (hover: hover) {
  .carousel__slide:hover .media__full,
  .triptych .media:hover .media__full {
    transform: scale(1.045);
  }
}

.media.is-loaded .media__full { opacity: 1; }
.media.is-loaded .media__lqip { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  body, .media__full, .media__lqip,
  .masthead__name, .masthead__nav a, .cover__nav a, .carousel__nav,
  .carousel__dot, .work__back, .lightbox__lukk { transition-duration: .01ms; }
}

/* ---------------------------------------------------------
   Beskjeder
   --------------------------------------------------------- */
.notice {
  padding: clamp(40px, 8vw, 100px) var(--margin);
  color: var(--muted);
  max-width: 46ch;
}


/* ---------------------------------------------------------
   Fullskjerm bildevisning
   --------------------------------------------------------- */
.is-zoomable { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 60px);
  background: rgba(0, 0, 0, .92);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }

.lightbox__bilde {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.lightbox__lukk {
  position: absolute;
  top: clamp(12px, 2.5vw, 24px);
  right: clamp(12px, 2.5vw, 24px);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--white);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  transition: color .15s ease, scale .15s cubic-bezier(.3, .7, .4, 1);
}
.lightbox__lukk:hover,
.lightbox__lukk:focus-visible { color: var(--red); }

@media (prefers-reduced-motion: reduce) {
  .lightbox { transition: none; }
}

/* ---------------------------------------------------------
   404-side
   --------------------------------------------------------- */
.page-404 {
  text-align: center;
  padding-top: clamp(60px, 14vw, 160px);
  padding-bottom: clamp(20px, 4vw, 40px);
}

.page-404__kode {
  font-size: clamp(5rem, 18vw, 11rem);
  line-height: .9;
  margin: 0 0 .3em;
}

.page-404__tekst {
  max-width: 40ch;
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
}

/* ---------------------------------------------------------
   Trykk-tilbakemelding: et lite, umiddelbart "trykk ned"-glimt
   ved klikk, uavhengig av hover-fargen. Bruker den frittstående
   CSS-egenskapen "scale" (ikke transform), slik at den ikke
   kolliderer med den JS-drevne fjærbevegelsen på de magnetiske
   lenkene (se magnetisk() i app.js, som nå bruker "translate").
   --------------------------------------------------------- */
.masthead__name:active { scale: .96; }
.masthead__nav a:active,
.cover__nav a:active { scale: .92; }
.work__back:active { scale: .985; }
.carousel__nav:active { scale: .88; }
.carousel__dot:active { scale: .8; }
.lightbox__lukk:active { scale: .85; }