:root{
  --bg:#0A0A0A;
  --text:#EDEDEB;
  --muted:#6E6E6A;

  --edge:clamp(16px,2.2vw,28px);
  --img-w:clamp(300px,38vw,560px);
  --gap:6px;

  --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:11px;
  line-height:1.3;
  font-weight:400;
  letter-spacing:0.02em;
  text-transform:uppercase;            /* ALT I CAPS */
  font-feature-settings:"cv05" 1,"ss01" 1;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{display:block;width:100%;height:auto;}
video{display:block;width:100%;height:auto;}
ul{list-style:none;margin:0;padding:0;}

.cap{letter-spacing:0.02em;}

/* ---------------- MASTHEAD (fixed) ---------------- */
.masthead{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:var(--edge);
  pointer-events:none;
  mix-blend-mode:difference;
}
.masthead a,.masthead .nav{pointer-events:auto;}
.m-brand{font-weight:600;letter-spacing:0.01em;line-height:1.3;}
.m-brand span{display:block;}
.nav{display:flex;gap:var(--s5);font-weight:600;letter-spacing:0.01em;}
.nav a{transition:opacity .2s;}
.nav a:hover{opacity:.5;}
.nav a.current{opacity:.45;}

/* ---------------- STREAM (ARBEIDER) ---------------- */
/* Sammenhengende kolonne. Bildene bøyes bakover mot kantene (styrt av scroll i JS). */
html.arbeider,html.arbeider body{background:#000;}
body{overflow-x:hidden;}
.stream{
  --h:74vh;
  display:flex;flex-direction:column;align-items:center;gap:2vh;
  padding:calc(50vh - var(--h)/2) 0;
}
@supports (height:1svh){.stream{--h:74svh;padding:calc(50svh - var(--h)/2) 0;}}
.project{
  width:100%;height:var(--h);
  display:flex;align-items:center;justify-content:center;
  will-change:transform,opacity;
}
.project img{
  width:auto;height:100%;
  max-width:calc(100vw - 2*var(--edge));object-fit:contain;
}

.ann-fixed{
  position:fixed;left:0;right:0;top:50%;transform:translateY(-50%);
  z-index:25;pointer-events:none;
  mix-blend-mode:difference;color:#fff;
  transition:opacity .22s ease;
}
.ann-fixed.swap{opacity:0;}
.af{position:absolute;top:0;display:flex;white-space:nowrap;}
.af-left{left:var(--edge);}
.af-left .af-index{width:140px;}
.af-right{right:var(--edge);gap:var(--s7);}

/* ---------------- PROSESS ---------------- */
/* Landskapsmedie dratt helt ut til høyre kant. Tekst forankret til venstre. */
.process{padding-bottom:var(--s9);}
.proc-item{
  position:relative;
  display:grid;
  grid-template-columns:1fr;         /* media styres med egne marginer */
  min-height:70vh;
  padding:var(--s9) 0;
}
.proc-media{
  width:clamp(60%,72vw,78%);
  margin-left:auto;                  /* skyver helt ut til høyre kant */
  margin-right:0;
}
.proc-media video,
.proc-media .ph{width:100%;height:auto;display:block;}
.proc-media video{aspect-ratio:16/9;object-fit:cover;background:#141414;}
/* landskaps-placeholder 16:9 */
.proc-media .ph{
  aspect-ratio:16/9;
  background:#141414;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);letter-spacing:0.06em;font-size:11px;
}

/* ---------------- OM ---------------- */
.about{min-height:100vh;display:flex;align-items:center;padding:var(--s9) var(--edge);}
.about-inner{max-width:620px;margin:0 auto;}
.about .label{color:var(--muted);letter-spacing:0.02em;margin-bottom:var(--s6);}
.about-inner p{margin:0 0 var(--s5);font-size:14px;line-height:1.65;letter-spacing:0.02em;}
.about-inner p.lead{font-size:17px;line-height:1.55;}
.founders{margin-top:var(--s7);display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);}
.founders h3{margin:0 0 8px;font-size:11px;font-weight:500;letter-spacing:0.02em;color:var(--muted);}
.founders p{font-size:12.5px;line-height:1.6;margin:0;letter-spacing:0.02em;}

/* ---------------- FOOTER (fixed) ---------------- */
.footbar{
  position:fixed;bottom:0;left:0;right:0;z-index:30;
  display:flex;justify-content:space-between;
  padding:var(--edge);
  pointer-events:none;
  mix-blend-mode:difference;
}

/* ---------------- TABLET ---------------- */
@media (max-width:1023px){
  :root{--img-w:clamp(320px,56vw,520px);}
  .af-left .af-index{width:70px;}
  .proc-media{width:82%;}
}

/* ---------------- MOBILE ---------------- */
@media (max-width:767px){
  :root{--img-w:calc(100vw - 2*var(--edge));--gap:var(--s7);}
  .ann-fixed{top:auto;bottom:var(--s5);transform:none;}
  .af-left .af-index{width:auto;margin-right:var(--s5);}
  .af-right{gap:var(--s4);}

  /* prosess stabler: tekst over, fullbredde landskapsmedie under */
  .process{padding-top:var(--s9);}
  .proc-item{min-height:0;padding:var(--s7) 0;}
  .proc-media{width:100%;}

  .masthead{padding:var(--s4) var(--edge);}
  .nav{gap:var(--s4);}
  .footbar{display:none;}

  .about{padding:var(--s9) var(--edge);}
  .founders{grid-template-columns:1fr;gap:var(--s6);}
  .about-inner p.lead{font-size:15px;}
}