/* Forsiden. Lastes etter nicepage.css, index.css, upgrade.css og
   modal-upgrade.css.
   NB: index.css:726 setter FieldGothic No.82 på alle <a> med !important,
   så lenker som skal ha No.75 trenger !important her. */

:root {
  /* ── FLATER
     Rent #000 er slukkede piksler på en OLED-skjerm, altså et hull.
     Nesten-svart leser som en flate, som noe det er trykket på. Og en
     knekt hvit i stedet for ren hvit varmer opp hele siden uten at en
     eneste farge er innført. To linjer, ingen ser dem, alle merker dem.*/
  --tk-bg:        #0b0b0c;
  --tk-ink:       #f3f0ea;
  --tk-paper:     #efeae1;
  --tk-paper-ink: #14140f;

  --tk-line:      rgba(255,255,255,0.10);
  --tk-line-hi:   rgba(255,255,255,0.24);
  --tk-faint:     rgba(255,255,255,0.30);
  --tk-mid:       rgba(255,255,255,0.55);
  --tk-body:      rgba(243,240,234,0.72);

  --tk-gap:       4px;
  --tk-edge:      clamp(20px, 4vw, 48px);
  --tk-max:       1360px;
  --tk-row:       clamp(185px, 22vw, 330px);

  --tk-display:   "FieldGothicTEST-No.75", "Arial Narrow", Arial, sans-serif;
  --tk-util:      "FieldGothicTEST-No.82", "Arial Narrow", Arial, sans-serif;

  /* Systemets egen monospace til alt som er data: kategori, årstall,
     løpenummer, seksjonslinjer, org.nr. Ingen nedlasting, ingen ekstra
     forespørsel, og på Mac er det SF Mono. Grepet er hentet fra måten
     redaksjonelle sider i 2026 setter metadata: display-font til det
     som skal leses, monospace til det som skal avleses. På en filmside
     leser det dessuten som kamerarapport og klaff.*/
  --tk-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
             "Liberation Mono", monospace;

  --tk-ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --accent:       #ffffff;   /* overstyres per flis i index.html*/

}


/*   GRUNNLAG*/
/* Kryssfade mellom forsiden, OSS og KONTAKT i stedet for et hvitt blink.
   Legg den samme regelen i About.css og Contact.css så virker den begge
   veier. Nettlesere som ikke støtter den navigerer helt som før.*/
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.32s; }

html {
  scroll-behavior: smooth;
  background: var(--tk-bg);
  scrollbar-gutter: stable;
}

body.u-body {
  background: var(--tk-bg) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.u-backlink,
section.u-backlink,
.u-grey-80 {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

h1, h2, h3, .taket-tagline__line1, .taket-tagline__line2 { text-wrap: balance; }
p { text-wrap: pretty; }

a:focus-visible,
button:focus-visible,
[data-project]:focus-visible {
  outline: 1.5px solid rgba(255,255,255,0.85);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  z-index: 10000;
  background: #fff; color: #000;
  font-family: var(--tk-util);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 20px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Synlig scrollbar på desktop. macOS skjuler sin til du scroller,
   og da har en side med full skjermhøyde i hero null signal om
   at det finnes mer. Dette er ikke pynt, det er den opprinnelige
   scroll-indikatoren.*/
@media (min-width: 768px) {
  html {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.30) rgba(255,255,255,0.05);
  }
  html::-webkit-scrollbar { width: 11px; }
  html::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
  html::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.28);
    border: 3px solid var(--tk-bg);
    background-clip: padding-box;
    border-radius: 999px;
    min-height: 48px;
  }
  html::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.5);
    background-clip: padding-box;
  }
}


/*   HERO*/
.u-body .u-section-1 {
  min-height: 100vh !important;
  height: 100vh !important;
  min-height: 100svh !important;
  height: 100svh !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
  display: block !important;
}

.u-body .u-section-1 .u-sheet-1 {
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Logoanimasjonen*/
.u-section-1 .u-image-1.hero-video {
  position: relative;
  z-index: 3;
  display: block !important;
  width: auto !important;
  height: min(92vh, 900px) !important;
  aspect-ratio: 715 / 792;
  max-width: 90vw !important;
  margin: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 90%, transparent 100%);
  transition: transform 1.6s var(--tk-ease);
}

/* Stum loop bak logoen. Ligger død til front-motion.js har
   bekreftet at videos/reel.mp4 finnes og lar seg spille.*/
.hero-reel {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 1.8s ease;
  pointer-events: none;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.8s ease;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.78) 72%, rgba(0,0,0,0.94) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 30%);
}

/* Når loopen faktisk spiller: film fyller rommet, logoen blir
   en tittel over den.*/
.u-section-1.is-live .hero-reel  { opacity: 1; }
.u-section-1.is-live .hero-scrim { opacity: 1; }
.u-section-1.is-live .hero-video { transform: scale(0.62); }


/* ── Scroll-hintet ──*/
.scroll-cue {
  display: block;
  position: absolute;
  left: 50%;
  bottom: clamp(22px, 3.4vh, 40px);
  transform: translateX(-50%);
  z-index: 6;
  width: 1px;
  height: 64px;
  overflow: hidden;
  background: rgba(255,255,255,0.09);
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.scroll-cue.is-on  { opacity: 1; }
.scroll-cue.is-off { opacity: 0 !important; }

.scroll-cue::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 100%;
  background: linear-gradient(to bottom,
    transparent 0%, rgba(255,255,255,0.9) 50%, transparent 100%);
  animation: tk-drip 2.8s var(--tk-ease) infinite;
}
@keyframes tk-drip {
  0%   { transform: translateY(-100%); }
  46%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}


/* ── Pillene nede til høyre
   Markupen er ute av index.html. Stilen ligger igjen, så det holder å
   lime denne blokken tilbake i hero hvis du vil ha dem:
     <div class="hero-actions">
       <a class="hero-btn" href="About.html">OSS</a>
       <a class="hero-btn" href="Contact.html">KONTAKT</a>
     </div>*/
.hero-actions {
  position: absolute;
  right: var(--tk-edge);
  bottom: clamp(30px, 6vh, 70px);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
}
.hero-btn {
  font-family: var(--tk-display) !important;
  font-size: clamp(1.15rem, 1.5vw, 1.6rem) !important;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #fff;
  text-decoration: none;
  text-align: center;
  background: #000;
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 10px;
  padding: 0.42em 0.7em 0.5em;
  min-width: 7.6em;
  box-sizing: border-box;
  transition: background 0.24s ease, color 0.24s ease;
}
@media (hover: hover) {
  .hero-btn:hover { background: #fff; color: #000; }
}


/*   STICKY NAV*/
.taket-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 8000;
  height: 60px;
  padding: 0 var(--tk-edge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  opacity: 1;
  pointer-events: all;
  transform: none;
  transition: background 0.35s ease, border-color 0.35s ease;
}
.taket-nav.is-solid {
  background: rgba(0,0,0,0.82);
  border-bottom-color: var(--tk-line);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}
.taket-nav__logo {
  height: 22px; width: auto; display: block;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}
.taket-nav__logo:hover { opacity: 1; }

.taket-nav__links {
  display: flex; gap: 8px;
  list-style: none; margin: 0; padding: 0;
}
.taket-nav__links a {
  font-family: var(--tk-display) !important;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: #fff;
  text-decoration: none;
  opacity: 0.55;
  padding: 5px 16px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.taket-nav__links a:hover { opacity: 1; border-color: rgba(255,255,255,0.3); }
.taket-nav__links a.is-active { opacity: 1; border-color: rgba(255,255,255,0.55); }


/*   KUNDE- OG FESTIVALSTRIPE
   Eneste horisontale bevegelse på siden. Stopper ved hover
   så navnene kan leses, og står helt stille ved redusert
   bevegelse.*/
.strip {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--tk-line);
  border-bottom: 1px solid var(--tk-line);
  padding: clamp(14px, 1.8vh, 22px) 0;
  background: var(--tk-bg);
  /* mykner kantene så navnene glir inn og ut, ikke kuttes*/
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.strip__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
/* Settes av front-motion.js når gruppene er klonet. Uten JavaScript
   står navnene stille og lesbare i stedet for å gli halvveis ut.*/
.strip__track.is-ready { animation: tk-marquee 46s linear infinite; }
.strip:hover .strip__track { animation-play-state: paused; }

@keyframes tk-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.strip__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.strip__item {
  display: inline-flex;
  align-items: center;
  font-family: var(--tk-mono);
  font-size: clamp(0.68rem, 0.85vw, 0.8rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  white-space: nowrap;
  padding: 0 clamp(22px, 3vw, 44px);
}
/* Festivaler får en tynn ramme, så øyet skiller kunde fra utvalg*/
.strip__item--fest {
  color: rgba(255,255,255,0.42);
}
.strip__item--fest::before {
  content: "";
  width: 5px; height: 5px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  margin-right: 12px;
  flex-shrink: 0;
}


/*   ARBEID
     rad 1-2   KLASSEKAMPEN (12 br, 2 rader)      = 2:1
     rad 3     JEGERHELTFUCKA (7)  | NEUW (5 br,
     rad 4     TAKET (7)           |  3 rader)    = 9:16
     rad 5     BLÅ (7)             |
     rad 6     KEO (6)             | FØRSTE SØNDAG (6)
     rad 7     SÅ LANGT (4) | FAR SOM SØNN (4) | MINIDESK (4)*/
.u-body .u-section-2 {
  margin: 0 !important;
  padding: 0 0 clamp(60px, 7vw, 100px) !important;
}
.u-body .u-section-2 .u-sheet-1 {
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  position: static !important;
}
.u-section-2 .u-image-1,
.u-section-2 .u-text-7 { display: none !important; }

.work-head {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--tk-max);
  margin: clamp(46px, 6vh, 84px) auto 0;
  padding: 0 var(--tk-edge) 13px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  position: relative;
}
/* Hårstreken står 0,6 grader skjevt. Grepet er hentet rett fra OSS-siden
   deres, der .about-header__cut allerede står i -1,2 grader. Den lille
   ujevnheten er signaturen deres, og det er akkurat den typen villet feil
   som skiller noe laget fra noe generert.*/
.work-head::after {
  content: "";
  position: absolute;
  left: var(--tk-edge); right: var(--tk-edge); bottom: 0;
  height: 1px;
  background: var(--tk-line-hi);
  transform: rotate(-0.55deg);
  transform-origin: left center;
}
.work-head__label,
.work-head__meta {
  font-family: var(--tk-mono);
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.work-head__label { color: rgba(255,255,255,0.62); }
.work-head__meta  { color: rgba(255,255,255,0.30); }

/* Rammen rundt rutenettet. Bakgrunnen her er det som blir synlig i
   fugene, så mellomrommene leser som streker i en struktur og ikke som
   svarte hull mellom bilder som svever. Det er kontaktarket, og det er
   den enkeltendringen som gjør siden mest grafisk.*/
.work-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--tk-max);
  margin: clamp(16px, 2vh, 26px) auto 0;
  padding: 0 var(--tk-edge);
}

.desk-projects {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr);
  /* Rad 7 er trioen nederst, lavere så de tre små flisene lander
     på omtrent 16:9. Legger du til et prosjekt må denne justeres.*/
  grid-template-rows: repeat(6, var(--tk-row)) calc(var(--tk-row) * 0.72);
  grid-auto-rows: var(--tk-row);
  grid-auto-flow: row;
  gap: 1px;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  margin: 0 !important;
  padding: 0;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.16);
}

.desk-proj {
  position: relative;
  display: block;
  overflow: hidden;
  min-width: 0;
  background: #0b0b0b;
  text-decoration: none;
  border-radius: 0;
  aspect-ratio: auto !important;
  height: auto !important;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s var(--tk-ease);
}
.desk-proj.is-visible { opacity: 1; transform: translateY(0); }

.desk-proj--wide { grid-column: span 12 !important; grid-row: span 2 !important; }
.desk-proj--tall { grid-column: span 5  !important; grid-row: span 3 !important; }
.desk-proj--l    { grid-column: span 7  !important; }
.desk-proj--s    { grid-column: span 5  !important; }
.desk-proj--h    { grid-column: span 6  !important; }
.desk-proj--t    { grid-column: span 4  !important; }

.desk-proj:nth-child(1)  { transition-delay: 0s    !important; }
.desk-proj:nth-child(2)  { transition-delay: 0s    !important; }
.desk-proj:nth-child(3)  { transition-delay: 0.06s !important; }
.desk-proj:nth-child(4)  { transition-delay: 0s    !important; }
.desk-proj:nth-child(5)  { transition-delay: 0s    !important; }
.desk-proj:nth-child(6)  { transition-delay: 0s    !important; }
.desk-proj:nth-child(7)  { transition-delay: 0.06s !important; }
.desk-proj:nth-child(8)  { transition-delay: 0s    !important; }
.desk-proj:nth-child(9)  { transition-delay: 0.06s !important; }
.desk-proj:nth-child(10) { transition-delay: 0.12s !important; }

/* Mediepakken. Egen wrapper så parallaksen kan bo her mens
   hover-zoomen bor på bildet, uten at de to slåss om transform.*/
.desk-proj__media {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.desk-proj__img,
.desk-proj__video {
  position: absolute;
  left: 0;
  top: -6%;
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.7s var(--tk-ease), opacity 0.55s ease;
}
.desk-proj__video {
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
.desk-proj__video.is-playing { opacity: 1; }

.desk-proj[data-slug="minidesk"] .desk-proj__img { object-position: center 40%; }
.desk-proj[data-slug="keo"]      .desk-proj__img { object-position: center 38%; }

@media (hover: hover) {
  .desk-proj:hover .desk-proj__img,
  .desk-proj:hover .desk-proj__video { transform: scale(1.05); }
}

/* Parallakse drevet av scroll, uten en eneste linje JavaScript.
   Kjører på kompositor-tråden og koster derfor ingenting.*/
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .desk-proj__media {
      animation: tk-parallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes tk-parallax {
      from { transform: translate3d(0, -4%, 0); }
      to   { transform: translate3d(0,  4%, 0); }
    }
  }
}

/* Gradientene er slakket fra 0.34 og 0.72 til 0.26 og 0.60.
   Det er nok til at teksten leses, og bildene blir merkbart
   lysere uten at en eneste farge er endret.*/
.desk-proj__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(14px, 1.5vw, 22px) clamp(16px, 1.8vw, 26px);
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.26) 0%,
    rgba(0,0,0,0)    24%,
    rgba(0,0,0,0)    52%,
    rgba(0,0,0,0.60) 100%);
  transition: background 0.45s ease;
}
@media (hover: hover) {
  .desk-proj:hover .desk-proj__overlay {
    background: linear-gradient(to bottom,
      rgba(0,0,0,0.34) 0%,
      rgba(0,0,0,0.04) 24%,
      rgba(0,0,0,0.04) 52%,
      rgba(0,0,0,0.70) 100%);
  }
}

.desk-proj__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

/* "Se film +" ved hover, samme grep som Crisp bruker med sin READ MORE.
   Typografi, ikke et svevende ikon. Den skyver ikke på noe, den ligger
   mellom kategorien og løpenummeret og fader inn.*/
.desk-proj__more {
  margin-left: auto;
  margin-right: 14px;
  font-family: var(--tk-mono);
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.32s ease, transform 0.42s var(--tk-ease);
}
.desk-proj__more i {
  font-style: normal;
  color: var(--accent);
  margin-left: 0.5em;
}
@media (hover: hover) {
  .desk-proj:hover .desk-proj__more { opacity: 1; transform: translateX(0); }
}
.desk-proj:focus-visible .desk-proj__more { opacity: 1; transform: translateX(0); }

/* På de minste flisene er det ikke plass, og da er den bare støy*/
.desk-proj--t .desk-proj__more { display: none; }

.desk-proj__type {
  font-family: var(--tk-mono);
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  transition: color 0.25s ease;
}
.desk-proj__year {
  font-style: normal;
  margin-left: 0.9em;
  color: rgba(255,255,255,0.42);
  transition: color 0.25s ease;
}

/* Løpenummer som på et kontaktark. Får filmens egen farge ved hover.*/
.desk-proj__index {
  font-family: var(--tk-mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.34);
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
}

@media (hover: hover) {
  .desk-proj:hover .desk-proj__type  { color: #fff; }
  .desk-proj:hover .desk-proj__year  { color: rgba(255,255,255,0.7); }
  .desk-proj:hover .desk-proj__index { color: var(--accent); }
}

.desk-proj__foot { display: block; }

.desk-proj__logo {
  display: block;
  width: auto; height: auto;
  max-width: min(280px, 60%);
  max-height: 58px;
  object-fit: contain;
  object-position: left bottom;
  filter: drop-shadow(0 2px 16px rgba(0,0,0,0.85));
  transition: transform 0.4s var(--tk-ease);
}
.desk-proj--t .desk-proj__logo { max-height: 40px; max-width: min(200px, 72%); }

@media (hover: hover) {
  .desk-proj:hover .desk-proj__logo { transform: translateY(-4px); }
}

/* Klassekampen-logoen er kundens egen, i deres røde. Den ligger over
   loopen, så merkevaren står der også når stillbildet er dekket av film.
   Litt løftet lysstyrke, ellers drukner den mørke rødfargen i bildet.*/
/* ── Kundelogo midt på flisa
   På kundearbeid er merkevaren tittelen, og da hører den hjemme midt i
   bildet, ikke som en etikett i hjørnet. inset 0 med margin auto sentrerer
   begge veier og lar transform stå ledig til hover-løftet.
   Gjelder den brede og den stående flisa, altså kundearbeidet. Egne
   filmer beholder tittellogoen nede til venstre.*/
.desk-proj--wide .desk-proj__logo,
.desk-proj--tall .desk-proj__logo {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  object-position: center;
  z-index: 1;
}

.desk-proj--wide .desk-proj__logo {
  max-width: min(600px, 46%);
  max-height: clamp(58px, 6.4vw, 104px);
  /* Den mørke #A80000 drukner i bildet uten et lite løft*/
  filter: drop-shadow(0 2px 24px rgba(0,0,0,0.95)) brightness(1.28) saturate(1.1);
}

.desk-proj--tall .desk-proj__logo {
  max-width: min(360px, 66%);
  max-height: clamp(52px, 6vw, 96px);
  filter: drop-shadow(0 2px 22px rgba(0,0,0,0.9));
}

/* Bunnteksten står igjen midtstilt under logoen*/
.desk-proj--wide .desk-proj__foot,
.desk-proj--wide .desk-proj__kicker { text-align: center; }
.desk-proj--wide .desk-proj__rule,
.desk-proj--tall .desk-proj__rule { margin-left: auto; margin-right: auto; }

/* Tekstetikett der en film ikke har egen tittellogo*/
.desk-proj__kicker {
  display: block;
  font-family: var(--tk-mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 2px 14px rgba(0,0,0,0.9);
}

.desk-proj__rule {
  display: block;
  height: 1px;
  width: 0;
  margin-top: 12px;
  background: rgba(255,255,255,0.85);
  transition: width 0.45s var(--tk-ease), background 0.3s ease;
}


@media (hover: hover) {
  .desk-proj:hover .desk-proj__rule { width: 64px; background: var(--accent); }
}

/* Innfelt ramme som tegnes ved hover. Trykkspråk, ingen svevende ikoner.
   Dette erstatter musepekeren med avspillingstrekanten.*/
.desk-proj__overlay::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255,255,255,0.34);
  opacity: 0;
  transition: opacity 0.35s ease, inset 0.5s var(--tk-ease);
  pointer-events: none;
}
@media (hover: hover) {
  .desk-proj:hover .desk-proj__overlay::after { opacity: 1; inset: 13px; }
}
.desk-proj:focus-visible .desk-proj__overlay::after { opacity: 1; inset: 13px; }

/* Aksentstrek langs underkanten. Ti filmer, ti farger, og det eneste
   stedet farge kommer inn i et ellers svart og hvitt oppsett.*/
.desk-proj::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  z-index: 3;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--tk-ease);
  pointer-events: none;
}
@media (hover: hover) {
  .desk-proj:hover::after { transform: scaleX(1); }
}
.desk-proj:focus-visible::after { transform: scaleX(1); }
.desk-proj:focus-visible .desk-proj__rule { width: 64px; background: var(--accent); }

/* Mangler logofila, settes navnet i FieldGothic. Pa kundeflisene ma den
   sentreres pa samme mate som logoen den erstatter.*/
.desk-proj--wide .desk-proj__fallback,
.desk-proj--tall .desk-proj__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0 8%;
}

.desk-proj__fallback {
  display: block;
  font-family: var(--tk-display);
  font-size: clamp(1.5rem, 2.4vw, 2.6rem);
  line-height: 0.94;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.85);
}
.desk-proj--t .desk-proj__fallback { font-size: clamp(1.2rem, 1.8vw, 1.7rem); }


/*   MUSEPEKEREN ER FJERNET
   Her lå en 62 piksler grå skive med en avspillingstrekant. Den
   leste som et UI-element som svevde oppå bildet, ikke som en
   peker. Trykkspråket på flisa gjør jobben bedre: innfelt ramme
   som tegnes, og en aksentstrek i filmens egen farge.

   Vil du likevel ha en peker, er den moderne varianten en liten
   hvit prikk uten ramme og uten ikon, i mix-blend-mode difference,
   som inverterer det den ligger over. Si fra, så bygger jeg den.*/

/*   BAK KAMERAET
   Sidelengs rail med ulike høyder. Asymmetrien er med vilje:
   en perfekt jevn rad med like bilder er nettopp det som
   får en side til å se maskingenerert ut.*/
.bts {
  padding: clamp(40px, 6vw, 78px) 0 clamp(30px, 4vw, 54px);
  border-top: 1px solid var(--tk-line);
}
.bts.is-empty { display: none; }

.bts__head {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--tk-max);
  margin: 0 auto clamp(16px, 2vw, 26px);
  padding: 0 var(--tk-edge);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}
.bts__label,
.bts__meta {
  font-family: var(--tk-mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bts__label { color: rgba(255,255,255,0.62); }
.bts__meta  { color: rgba(255,255,255,0.30); }

.bts__rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 var(--tk-edge) 14px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.bts__rail::-webkit-scrollbar { display: none; }

.bts__item {
  flex: 0 0 auto;
  margin: 0;
  height: clamp(180px, 22vw, 290px);
  width: clamp(150px, 18vw, 240px);
  overflow: hidden;
  background: #0b0b0b;
  scroll-snap-align: start;
}
.bts__item--tall { height: clamp(210px, 26vw, 340px); width: clamp(140px, 16vw, 210px); }
.bts__item--wide { width: clamp(240px, 30vw, 400px); }
.bts__item.is-missing { display: none; }

.bts__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.05);
  transform: scale(1.02);
  transition: filter 0.5s ease, transform 0.6s var(--tk-ease);
}
@media (hover: hover) {
  .bts__item:hover img { filter: grayscale(0); transform: scale(1.06); }
}


/*   KONTAKT
   Fire felter og fem knapper. Jo færre felter, jo flere
   sender. Ingen avrundede hjørner på inputene, bare
   hårstreker, så det ser ut som resten av siden og ikke
   som et innebygd skjema fra en tjeneste.*/
.kontakt {
  border-top: 1px solid var(--tk-line);
  padding: clamp(52px, 7vw, 100px) 0 clamp(44px, 6vw, 84px);
}

/* ── DEN LYSE SEKSJONEN, ANDRE FORSØK
   Første versjon var et lysfelt i full skjermbredde. Den leste som
   tilfeldig, og grunnen er konkret: alt annet på siden respekterer
   den samme 1360-rammen, mens lysfeltet ignorerte den. Et farget
   belte som går forbi kanten alt annet stopper ved, ser ut som en
   feil og ikke som et valg.

   Nå er det et ark. Nøyaktig samme bredde og samme kanter som
   filmrutenettet over, lagt oppå den svarte siden. Da leser det som
   ett element i systemet: det ene hvite arket i et ellers svart
   kontaktark.

   Vil du ha det svart igjen: slett ordet kontakt--paper fra
   section-taggen i index.html. Ett ord, alt annet står.*/
.kontakt--paper {
  background: transparent;
  border-top: 0;
  padding: clamp(30px, 4vw, 56px) var(--tk-edge) clamp(50px, 6vw, 92px);
}

.kontakt--paper .kontakt__inner {
  background: var(--tk-paper);
  color: var(--tk-paper-ink);
  max-width: calc(var(--tk-max) - 2 * var(--tk-edge));
  margin: 0 auto;
  padding: clamp(30px, 3.6vw, 62px) clamp(26px, 3.4vw, 58px) clamp(34px, 4vw, 64px);

  /* To spalter, ellers blir arket en smal tekstremse i et stort tomt
     felt. Det var den andre grunnen til at det føltes tilfeldig.*/
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  column-gap: clamp(30px, 4.5vw, 76px);
  align-content: start;
}

.kontakt--paper .kontakt__head  { grid-column: 1 / -1; grid-row: 1; margin-bottom: clamp(22px, 2.6vw, 36px); }
.kontakt--paper .kontakt__title { grid-column: 1; grid-row: 2; }
.kontakt--paper .kontakt__lead  { grid-column: 1; grid-row: 3; margin-bottom: 22px; }
.kontakt--paper .kontakt__alt   { grid-column: 1; grid-row: 4; align-self: start; margin: 0; }
.kontakt--paper .kontakt__form  { grid-column: 2; grid-row: 2 / 5; }
.kontakt--paper .kontakt__done  { grid-column: 2; grid-row: 2 / 5; }

/* ── DEN LYSE SEKSJONEN
   Resten av siden er kinosalen. Her går lyset på. Å veksle mellom lyse
   og mørke felt nedover siden er et av de grepene som leser som mest
   redaksjonelt akkurat nå, og stedet det gir mest mening er nettopp der
   noen skal ta kontakt: da åpner siden seg i det øyeblikket den ber om
   noe. Papiret er selv skillet, så hårstreken over er unødvendig.*/
.kontakt--paper {
  background: var(--tk-paper);
  color: var(--tk-paper-ink);
  border-top: 0;
  padding-top: clamp(60px, 8vw, 116px);
  padding-bottom: clamp(56px, 7vw, 100px);
}

.kontakt--paper .kontakt__label { color: rgba(20,20,15,0.62); }
.kontakt--paper .kontakt__meta  { color: rgba(20,20,15,0.38); }
.kontakt--paper .kontakt__head::after { background: rgba(20,20,15,0.24); }

.kontakt--paper .kontakt__title { color: var(--tk-paper-ink); }
.kontakt--paper .kontakt__lead  { color: rgba(20,20,15,0.72); }
.kontakt--paper .field__label   { color: rgba(20,20,15,0.5); }

.kontakt--paper .field__input {
  color: var(--tk-paper-ink);
  background: rgba(255,255,255,0.55);
  border-color: rgba(20,20,15,0.22);
}
.kontakt--paper .field__input::placeholder { color: rgba(20,20,15,0.32); }
.kontakt--paper .field__input:hover { border-color: rgba(20,20,15,0.4); }
.kontakt--paper .field__input:focus {
  border-color: rgba(20,20,15,0.85);
  background: #fff;
}

.kontakt--paper .chip span {
  color: rgba(20,20,15,0.6);
  border-color: rgba(20,20,15,0.26);
}
.kontakt--paper .chip:hover span { color: var(--tk-paper-ink); border-color: rgba(20,20,15,0.55); }
.kontakt--paper .chip input:checked + span {
  color: var(--tk-paper);
  background: var(--tk-paper-ink);
  border-color: var(--tk-paper-ink);
}
.kontakt--paper .chip input:focus-visible + span {
  outline-color: rgba(20,20,15,0.85);
}

.kontakt--paper .kontakt__send {
  color: var(--tk-paper);
  background: var(--tk-paper-ink);
  border-color: var(--tk-paper-ink);
}
.kontakt--paper .kontakt__send:hover {
  background: transparent;
  color: var(--tk-paper-ink);
}

.kontakt--paper .kontakt__status     { color: rgba(20,20,15,0.5); }
.kontakt--paper .kontakt__status.is-ok  { color: #1f7a45; }
.kontakt--paper .kontakt__status.is-err { color: #a33a24; }

.kontakt--paper .kontakt__alt   { color: rgba(20,20,15,0.5); }
.kontakt--paper .kontakt__alt a {
  color: var(--tk-paper-ink);
  border-bottom-color: rgba(20,20,15,0.3);
}
.kontakt--paper .kontakt__alt a:hover { border-bottom-color: var(--tk-paper-ink); }

.kontakt--paper .kontakt__done { border-color: rgba(20,20,15,0.22); }
.kontakt--paper .kontakt__done h3 { color: var(--tk-paper-ink); }
.kontakt--paper .kontakt__done p  { color: rgba(20,20,15,0.72); }

/* Tastaturfokus må snus på lys bakgrunn, ellers er ringen usynlig*/
.kontakt--paper a:focus-visible,
.kontakt--paper button:focus-visible,
.kontakt--paper .field__input:focus-visible {
  outline-color: rgba(20,20,15,0.85);
}
.kontakt__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--tk-edge);
}

.kontakt__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 13px;
  position: relative;
  margin-bottom: clamp(26px, 3.4vw, 44px);
}
.kontakt__head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--tk-line-hi);
  transform: rotate(-0.4deg);
  transform-origin: left center;
}
.kontakt__label,
.kontakt__meta {
  font-family: var(--tk-mono);
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.kontakt__label { color: rgba(255,255,255,0.62); }
.kontakt__meta  { color: rgba(255,255,255,0.30); }

.kontakt__title {
  /* !important fordi index.css tvinger No.82 pa alle h1 til h6*/
  font-family: var(--tk-display) !important;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 12px;
}
.kontakt__lead {
  font-family: var(--tk-util);
  font-size: clamp(0.88rem, 1vw, 0.98rem);
  line-height: 1.55;
  color: var(--tk-body);
  max-width: 46ch;
  margin: 0 0 clamp(24px, 3vw, 34px);
}

/* ── Pillene ──*/
.chips {
  border: 0;
  padding: 0;
  margin: 0 0 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chips .field__label {
  flex: 1 0 100%;
  padding: 0;
  margin-bottom: 4px;
}
.chip { display: inline-flex; cursor: pointer; }
.chip input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.chip span {
  display: inline-block;
  font-family: var(--tk-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  padding: 9px 16px 10px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.chip:hover span { color: #fff; border-color: rgba(255,255,255,0.5); }
.chip input:checked + span {
  color: #000;
  background: #fff;
  border-color: #fff;
}
.chip input:focus-visible + span {
  outline: 1.5px solid rgba(255,255,255,0.85);
  outline-offset: 3px;
}

/* ── Feltene ──*/
.kontakt__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.field { display: block; margin-bottom: 18px; }
.kontakt__row .field { margin-bottom: 0; }

.field__label {
  display: block;
  font-family: var(--tk-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  margin-bottom: 8px;
}

.field__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--tk-util);
  font-size: 1rem;
  color: #fff;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 0;
  padding: 13px 14px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.field__input::placeholder { color: rgba(255,255,255,0.26); }
.field__input:hover { border-color: rgba(255,255,255,0.3); }
.field__input:focus { border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.06); }
.field__input--area { resize: vertical; min-height: 118px; line-height: 1.55; }

/* Spamfellen skal ikke kunne treffes av et menneske*/
.kontakt__honey {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.kontakt__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.kontakt__send {
  font-family: var(--tk-display) !important;
  font-size: 0.98rem;
  letter-spacing: 0.05em;
  color: #000;
  background: #fff;
  border: 1.5px solid #fff;
  border-radius: 999px;
  padding: 10px 28px 11px;
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease;
}
.kontakt__send:hover { background: transparent; color: #fff; }
.kontakt__send[disabled] { opacity: 0.45; cursor: default; }

.kontakt__status {
  font-family: var(--tk-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.kontakt__status.is-ok  { color: #7ad39a; }
.kontakt__status.is-err { color: #e08a7a; }

.kontakt__alt {
  font-family: var(--tk-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.34);
  margin: 28px 0 0;
}
.kontakt__alt a {
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.22);
  padding-bottom: 2px;
}
.kontakt__alt a:hover { color: #fff; border-color: rgba(255,255,255,0.6); }

/* Etter vellykket sending byttes skjemaet ut med en kvittering*/
.kontakt__done {
  border: 1px solid rgba(255,255,255,0.18);
  padding: clamp(24px, 3vw, 36px);
}
.kontakt__done h3 {
  font-family: var(--tk-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1;
  color: #fff;
  margin: 0 0 10px;
}
.kontakt__done p {
  font-family: var(--tk-util);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--tk-body);
  margin: 0;
}


/*   FOOTER*/
.site-footer {
  display: block;
  background: var(--tk-bg);
  border-top: 1px solid var(--tk-line);
  padding: clamp(60px, 8vw, 110px) 0 clamp(36px, 4vw, 56px);
  margin: 0 !important;
}
.site-footer__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--tk-max);
  margin: 0 auto;
  padding: 0 var(--tk-edge);
  text-align: center;
}

/* Midtstilt, slik den var. Jeg hadde satt den venstrestilt og helt ut
   mot skjermkanten som et redaksjonelt typografigrep, men da sto den
   til venstre mens ikonene og org.nr under sto midtstilt, og da leser
   hele footeren som om noe har rykket ut av stilling.*/
.taket-tagline {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--tk-max);
  margin: 0 auto clamp(24px, 3vw, 40px);
  padding: 0 var(--tk-edge);
  text-align: center;
  overflow: hidden;
}

.taket-tagline__line1,
.taket-tagline__line2 {
  display: block;
  font-family: var(--tk-display);
  font-size: clamp(3.2rem, 9.6vw, 10rem);
  line-height: 0.88;
  letter-spacing: -0.025em;
  margin: 0;
  white-space: nowrap;
  text-wrap: nowrap;
}
.taket-tagline__line1 { color: var(--tk-ink); }

/* Andre linje er fylt med et rasterpunkt-mønster i stedet for flat grå.
   Halvtone i 2026 er ikke nostalgi, det er trykkspråk: det får en flate
   til å se ut som noe som er kjørt gjennom en presse.*/
.taket-tagline__line2 {
  color: rgba(255,255,255,0.20);
  background-image: radial-gradient(rgba(255,255,255,0.62) 1.1px, transparent 1.2px);
  background-size: 5px 5px;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .taket-tagline__line2 {
    background-image: none;
    -webkit-text-fill-color: rgba(255,255,255,0.22);
  }
}

.taket-tagline__sep {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--tk-line-hi);
  margin: clamp(20px, 2.4vw, 30px) auto 0;
}

/* Skalerer sakte opp mens den kommer inn i skjermen. Drevet av scroll,
   uten JavaScript, og hopper over i nettlesere som ikke kan det.*/
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .taket-tagline {
      animation: tk-tagline linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 55%;
    }
    @keyframes tk-tagline {
      from { transform: scale(0.94) translateY(22px); opacity: 0.25; }
      to   { transform: scale(1)    translateY(0);    opacity: 1; }
    }
  }
}

.taket-social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
}
.taket-social-icons a {
  width: 50px; height: 50px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.22s ease, background 0.22s ease;
}
.taket-social-icons a:hover {
  border-color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.06);
}
.taket-social-icons svg { width: 21px; height: 21px; }

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 22px;
  margin: 40px 0 0 !important;
  font-family: var(--tk-mono);
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tk-faint);
}
.site-footer__meta a {
  color: var(--tk-mid);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  padding-bottom: 2px;
  text-transform: none;
  letter-spacing: 0.04em;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.site-footer__meta a:hover { color: #fff; border-color: rgba(255,255,255,0.6); }


/*   MODALEN*/
.project-modal__desc { max-width: 68ch !important; }

/* Stillbilder i stedet for spiller, for prosjekter der kunden ikke har
   gitt klarsignal til publisering ennå. Ett stort bilde med en klikkbar
   rad under. Samme ramme som spilleren, så modalen ser lik ut enten det
   er film eller bilder inni.*/
.stills {
  display: block;
  background: #000;
  line-height: 0;
}

.stills__main {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62vh;
  object-fit: contain;
  background: #000;
}

.stills__row {
  display: flex;
  gap: 1px;
  background: rgba(255,255,255,0.14);
  border-top: 1px solid rgba(255,255,255,0.14);
}

.stills__thumb {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.stills__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.42;
  transition: opacity 0.3s ease;
}
.stills__thumb.is-active img { opacity: 1; }
@media (hover: hover) {
  .stills__thumb:hover img { opacity: 0.8; }
}
.stills__thumb.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: #fff;
}
.stills__thumb:focus-visible {
  outline: 1.5px solid rgba(255,255,255,0.85);
  outline-offset: -3px;
}

.series {
  display: flex;
  gap: clamp(8px, 1vw, 14px);
  margin: 0 0 24px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--tk-line);
}
.series__item {
  flex: 1 1 0;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0; margin: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--tk-mono);
  -webkit-tap-highlight-color: transparent;
}
.series__num {
  display: block;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.3);
  transition: color 0.3s ease;
}
.series__track {
  display: block;
  position: relative;
  height: 1px;
  margin: 7px 0 6px;
  background: rgba(255,255,255,0.14);
  overflow: hidden;
  transition: background 0.3s ease;
}
.series__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: #fff;
}
.series__label {
  display: block;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.26);
  transition: color 0.3s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.series__item.is-active .series__num   { color: #fff; }
.series__item.is-active .series__label { color: rgba(255,255,255,0.62); }
.series__item.is-done   .series__fill  { width: 100%; }

@media (hover: hover) {
  .series__item:hover .series__num   { color: rgba(255,255,255,0.85); }
  .series__item:hover .series__label { color: rgba(255,255,255,0.5); }
  .series__item:hover .series__track { background: rgba(255,255,255,0.3); }
}
.series__item:focus-visible { outline: 1.5px solid rgba(255,255,255,0.8); outline-offset: 4px; }


/*   NETTBRETT*/
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --tk-row: clamp(150px, 21vw, 210px); }
}


/*   MOBIL*/
@media (max-width: 767px) {

  .u-section-1 .u-image-1.hero-video {
    height: min(74vh, 620px) !important;
    max-width: calc(100vw - 32px) !important;
    margin: 0 !important;
  }
  .u-section-1.is-live .hero-video { transform: scale(0.7); }

  .hero-actions { display: none; }
  .scroll-cue { height: 48px; bottom: 20px; }

  .taket-nav {
    height: 52px;
    padding: 0 18px;
    background: rgba(0,0,0,0.82);
    border-bottom-color: var(--tk-line);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
  }
  .taket-nav__logo { height: 18px; }
  .taket-nav__links { gap: 2px; }
  .taket-nav__links a { font-size: 0.82rem; padding: 4px 11px; letter-spacing: 0.04em; }

  .strip { padding: 12px 0; }
  .strip__track { animation-duration: 30s; }
  .strip__item { font-size: 0.68rem; padding: 0 18px; letter-spacing: 0.16em; }

  .work-head,
  .bts__head {
    margin-top: clamp(34px, 5vh, 56px);
    padding-left: 18px;
    padding-right: 18px;
  }
  .work-head::after { left: 18px; right: 18px; }
  .work-head__label, .work-head__meta,
  .bts__label, .bts__meta { font-size: 10px; letter-spacing: 0.14em; }

  .work-wrap { padding: 0 18px; margin-top: 20px; }
  .desk-projects {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: auto;
    /* MÅ være start, ikke stretch. Alt inni en flis er absolutt
       plassert, så flisa har null egenhøyde. Med stretch vinner
       radhøyden over aspect-ratio, raden blir null, og hele
       rutenettet kollapser til en strek. Det var mobilbuggen.*/
    align-items: start;
    gap: 1px;
  }
  .desk-proj,
  .desk-proj--wide,
  .desk-proj--tall,
  .desk-proj--l,
  .desk-proj--s,
  .desk-proj--h,
  .desk-proj--t {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
  .desk-proj--wide { aspect-ratio: 2 / 1 !important; }
  .desk-proj--tall { aspect-ratio: 9 / 16 !important; }

  .desk-proj__logo,
  .desk-proj--t .desk-proj__logo { max-height: 46px; max-width: 66%; }

  .desk-proj__more { display: none; }

  .desk-proj__type,
  .desk-proj__index {
    background: rgba(0,0,0,0.42);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 0;
    padding: 5px 9px 6px;
  }

  .bts__rail { padding-left: 18px; padding-right: 18px; }
  .bts__item { height: clamp(160px, 44vw, 220px); width: clamp(130px, 36vw, 180px); }
  .bts__item--tall { height: clamp(190px, 52vw, 260px); width: clamp(120px, 32vw, 160px); }
  .bts__item--wide { width: clamp(200px, 56vw, 280px); }

  .kontakt--paper { padding-left: 18px; padding-right: 18px; }
  .kontakt--paper .kontakt__inner {
    grid-template-columns: 1fr;
    max-width: none;
    padding: 26px 20px 30px;
  }
  .kontakt--paper .kontakt__head,
  .kontakt--paper .kontakt__title,
  .kontakt--paper .kontakt__lead,
  .kontakt--paper .kontakt__form,
  .kontakt--paper .kontakt__alt {
    grid-column: 1;
    grid-row: auto;
  }
  .kontakt--paper .kontakt__lead { margin-bottom: 22px; }
  .kontakt--paper .kontakt__alt { margin-top: 24px; }

  .kontakt__row { grid-template-columns: 1fr; gap: 18px; }
  .kontakt__row .field { margin-bottom: 0; }
  .kontakt__inner { padding: 0 18px; }
  .kontakt__send { width: 100%; }
  .kontakt__actions { gap: 12px; }

  .site-footer { padding-top: clamp(48px, 12vw, 70px); }
  .site-footer__inner { text-align: center; }
  /* upgrade.css venstrestiller denne på mobil med !important, så den
     må overstyres eksplisitt her for at footeren skal henge sammen.*/
  .taket-tagline {
    padding: 0 18px;
    text-align: center !important;
  }
  .taket-tagline__sep { margin-left: auto !important; margin-right: auto !important; }
  .taket-tagline__line1,
  .taket-tagline__line2 {
    /* Sto på 15vw og rant ut av skjermkanten. VI LAGER FILM er tretten
       tegn, og i en fet smal grotesk blir det rundt 6,5em bredt.*/
    font-size: clamp(1.9rem, 9.6vw, 4rem);
    letter-spacing: -0.03em;
  }
  .taket-social-icons { justify-content: center; gap: 14px; }
  .taket-social-icons a { width: 46px; height: 46px; }
  .site-footer__meta {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    font-size: 0.75rem;
  }

  .series { gap: 8px; margin-bottom: 20px; padding-bottom: 16px; }
  .series__label { display: none; }
  .series__num { font-size: 10px; }
}


/*   REDUSERT BEVEGELSE
   Alt som beveger seg av seg selv står stille. Ingen korn
   som flimrer, ingen stripe som går, ingen parallakse.*/
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .strip__track { animation: none; transform: none; width: 100%; }
  .strip__group { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .strip { -webkit-mask-image: none; mask-image: none; }

  .scroll-cue::after { animation: none; background: rgba(255,255,255,0.45); }

  .desk-proj {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .taket-tagline { animation: none !important; transform: none !important; opacity: 1 !important; }
  .desk-proj__media { animation: none !important; transform: none !important; }
  .desk-proj__img,
  .desk-proj__video,
  .desk-proj__logo,
  .desk-proj__rule,
  .hero-video,
  .hero-reel,
  .hero-scrim,
  .bts__item img,
  .hero-btn,
  .taket-nav { transition: none !important; }
}