/* ---------- Fonter (selvhostet, ingen tredjepart) ----------
   ITF Free Font License + SIL Open Font License 1.1. Se assets/fonts/lisenser/
   Variable filer: én per stil dekker hele vektaksen 100-900.
   ---------------------------------------------------------- */
@font-face{
  font-family:'Boska';
  src:url('../assets/fonts/boska-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Boska';
  src:url('../assets/fonts/boska-italic.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Switzer';
  src:url('../assets/fonts/switzer-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Switzer';
  src:url('../assets/fonts/switzer-italic.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Zodiak';
  src:url('../assets/fonts/zodiak-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Zodiak';
  src:url('../assets/fonts/zodiak-italic.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../assets/fonts/ibm-plex-mono-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../assets/fonts/ibm-plex-mono-italic.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('../assets/fonts/fraunces-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('../assets/fonts/fraunces-italic.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Satoshi';
  src:url('../assets/fonts/satoshi-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Satoshi';
  src:url('../assets/fonts/satoshi-italic.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap;
}
/* ---------- Design DNA ----------
   Referanser, målt 16.09.2026 ved 1440 px:
   victoria-miro.com: serif vekt 400, verket bærer fargen, null radius på knapper.
   hauserwirth.com: mørk flate som største areal, null skygger, 8 px-rytme.
   Aksent #A83A20 er hentet ut av det røde kvadratet i Eivinds eget maleri (verk 5).
   --------------------------------- */
:root{
  --c-bg:#161412;
  --c-flate:#1E1B18;
  --c-tekst:#EDE8DF;
  --c-dempet:#A39B8E;
  --c-linje:rgba(237,232,223,.16);
  --c-aksent:#A83A20;
  --c-paa-aksent:#F7F1E8;
  --c-aksent-tekst:#E0703F;
  --c-fokus:#E0703F;

  --font-display:'Boska', Georgia, serif;
  --font-body:'Switzer', system-ui, sans-serif;
  --font-meta:'Switzer', system-ui, sans-serif;
  --display-vekt:400;
  --display-spor:-.01em;
  --display-lh:.96;

  --t-xs:.8125rem;
  --t-s:.9375rem;
  --t-m:1.0625rem;
  --t-l:1.375rem;
  --t-h2:clamp(3rem, 6vw, 5.5rem);
  --t-h1:clamp(4.5rem, 11vw, 11rem);
  --t-mega:clamp(5.5rem, 17vw, 17.5rem);

  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:64px; --s-7:96px; --s-8:128px;
  --gutter:clamp(16px, 3vw, 40px);
  --maks:1440px;
  --radius:0;
  --ease:cubic-bezier(.16,1,.3,1);

  --z-dekor:1; --z-sticky:100; --z-dokk:200; --z-overlay:300; --z-panel:400; --z-varsel:500;
}

html[data-palette="2"]{
  --c-bg:#F1ECE3; --c-flate:#E8E1D5; --c-tekst:#1B1917; --c-dempet:#6A6258;
  --c-linje:rgba(27,25,23,.16); --c-aksent:#A83A20; --c-paa-aksent:#F7F1E8;
  --c-aksent-tekst:#A83A20; --c-fokus:#A83A20;
}
html[data-palette="3"]{
  --c-bg:#2A2826; --c-flate:#33302D; --c-tekst:#ECE6DC; --c-dempet:#A9A194;
  --c-linje:rgba(236,230,220,.16); --c-aksent:#D9A646; --c-paa-aksent:#1E1B16;
  --c-aksent-tekst:#D9A646; --c-fokus:#D9A646;
}
html[data-font="2"]{
  --font-display:'Zodiak', Georgia, serif;
  --font-meta:'IBM Plex Mono', ui-monospace, monospace;
  --display-spor:-.02em; --display-lh:.98;
}
html[data-font="3"]{
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Satoshi', system-ui, sans-serif;
  --font-meta:'Satoshi', system-ui, sans-serif;
  --display-vekt:350; --display-spor:-.02em; --display-lh:.98;
}

/* ---------- Grunnlag ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--c-bg);color:var(--c-tekst);font:400 var(--t-m)/1.6 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ol,ul,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,.display{font-family:var(--font-display);font-weight:var(--display-vekt);letter-spacing:var(--display-spor);line-height:var(--display-lh)}
h2{font-size:var(--t-h2)}
em{font-style:italic}
:focus-visible{outline:2px solid var(--c-fokus);outline-offset:3px;border-radius:2px}
.hopp{position:absolute;left:var(--gutter);top:-100px;z-index:var(--z-varsel);background:var(--c-tekst);color:var(--c-bg);padding:12px 16px}
.hopp:focus{top:12px}
.plassholder{color:var(--c-dempet);font-style:italic}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.knapp{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 28px;border:1px solid var(--c-tekst);background:transparent;color:var(--c-tekst);font:500 var(--t-s)/1.2 var(--font-body);text-decoration:none;border-radius:var(--radius);cursor:pointer;transition:background-color .25s var(--ease), color .25s var(--ease)}
.knapp:hover{background:var(--c-tekst);color:var(--c-bg)}
.knapp--aksent{background:var(--c-aksent);border-color:var(--c-aksent);color:var(--c-paa-aksent)}
.knapp--aksent:hover{background:var(--c-tekst);border-color:var(--c-tekst);color:var(--c-bg)}
.knapp--linje{border-color:var(--c-linje)}

/* ---------- Topp ---------- */
.topp{position:absolute;inset:0 0 auto;z-index:var(--z-sticky);display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--gutter)}
.topp__navn{font:var(--display-vekt) var(--t-l)/1 var(--font-display);letter-spacing:var(--display-spor);text-decoration:none;min-height:44px;display:flex;align-items:center}
.topp__nav{display:flex;gap:var(--s-1)}
.topp__nav a{font-size:var(--t-s);text-decoration:none;min-height:44px;display:flex;align-items:center;padding:0 var(--s-1);color:var(--c-dempet);transition:color .2s}
.topp__nav a:hover{color:var(--c-tekst)}

/* ---------- Hero 1: veggen ---------- */
.hero[hidden]{display:none}
.hero--vegg{min-height:100svh;display:grid;grid-template-rows:1fr auto;gap:var(--s-5);padding:calc(var(--s-7) + var(--s-2)) var(--gutter) var(--s-5);max-width:var(--maks);margin:0 auto}
.vegg{display:flex;align-items:center;justify-content:center;gap:clamp(24px, 5vw, 88px)}
.vegg__verk{overflow:hidden}
.vegg__verk img{width:100%}
.vegg__verk--a{width:min(24vw, 420px)}
.vegg__verk--b{width:min(34vw, 600px)}
.vegg__verk--c{width:min(22vw, 400px)}
.hero__tekst{display:grid;grid-template-columns:1fr minmax(260px, 380px);align-items:end;gap:var(--s-5)}
.hero__tittel{font-size:var(--t-h1)}
.hero__line{display:block;overflow:hidden;padding:.12em .16em .12em 0;margin:-.12em -.16em -.12em 0}
.hero__line-in{display:block}
.hero__side{display:grid;gap:var(--s-3);justify-items:start;padding-bottom:.6em}
.hero__side p{color:var(--c-dempet)}

/* ---------- Hero 2: typografisk ---------- */
.hero--typo{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--s-8) var(--gutter) var(--s-5);max-width:var(--maks);margin:0 auto}
.hero__tittel--stor{font-size:var(--t-mega);line-height:.9}
.hero__tittel--stor .hero__line + .hero__line{padding-left:.6em}
.hero__strek{border:0;border-top:1px solid var(--c-linje);margin:var(--s-5) 0 var(--s-3)}
.hero__rad{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);flex-wrap:wrap;color:var(--c-dempet);font-family:var(--font-meta);font-size:var(--t-s)}

/* ---------- Verk ---------- */
.verk{max-width:var(--maks);margin:0 auto;padding:var(--s-8) var(--gutter)}
.seksjon__hode{display:flex;justify-content:space-between;align-items:end;gap:var(--s-5);margin-bottom:var(--s-7)}
.seksjon__ingress{max-width:26em;color:var(--c-dempet)}
.verk__liste{display:grid;grid-template-columns:repeat(4, 1fr);gap:var(--s-6) var(--s-5)}
.verk__knapp{display:grid;gap:4px;width:100%;padding:0;border:0;background:none;text-align:left;cursor:zoom-in}
.verk__ramme{display:flex;align-items:flex-end;justify-content:flex-start;aspect-ratio:4/3;margin-bottom:var(--s-2)}
.verk__ramme img{max-height:100%;width:auto;object-fit:contain;transition:transform .3s var(--ease)}
@media (hover:hover) and (pointer:fine){.verk__knapp:hover img{transform:scale(1.02)}}
.verk__nr{font:var(--display-vekt) var(--t-l)/1.1 var(--font-display);font-style:italic}
.verk__teknikk{font:400 var(--t-xs)/1.4 var(--font-meta);color:var(--c-dempet)}
.verk__flere{display:none;margin:var(--s-5) auto 0}

/* ---------- Teknikk ---------- */
.teknikk{background:var(--c-flate)}
.teknikk{display:grid;grid-template-columns:5fr 6fr;gap:var(--s-7);align-items:center;padding:var(--s-8) max(var(--gutter), calc((100vw - var(--maks)) / 2 + var(--gutter)))}
.teknikk__bilde img{width:100%;max-width:520px;margin-left:auto}
.teknikk__tekst{display:grid;gap:var(--s-3);max-width:34em}
.teknikk__tekst h2{margin-bottom:var(--s-2)}

/* ---------- Kjøp: aksentflaten ---------- */
.kjop{
  --c-bg:var(--c-aksent); --c-tekst:var(--c-paa-aksent);
  --c-dempet:var(--c-paa-aksent); --c-fokus:var(--c-paa-aksent);
  background:var(--c-bg);color:var(--c-tekst)
}
.kjop__inner{max-width:var(--maks);margin:0 auto;padding:var(--s-8) var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5) var(--s-7);align-items:start}
.kjop h2{grid-row:span 2}
.kjop__steg{counter-reset:steg;display:grid;gap:var(--s-3)}
.kjop__steg li{counter-increment:steg;display:grid;grid-template-columns:48px 1fr;align-items:baseline;font-size:var(--t-l);line-height:1.35;border-top:1px solid color-mix(in srgb, var(--c-tekst) 30%, transparent);padding-top:var(--s-3)}
.kjop__steg li::before{content:counter(steg);font:var(--display-vekt) var(--t-l)/1 var(--font-display);font-style:italic}
.kjop__knapper{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.knapp--lys{background:var(--c-tekst);color:var(--c-aksent);border-color:var(--c-tekst)}
.knapp--lys:hover{background:transparent;color:var(--c-tekst)}
.knapp--linje-lys{border-color:var(--c-tekst)}
.knapp--linje-lys:hover{background:var(--c-tekst);color:var(--c-aksent)}

/* ---------- Bunn ---------- */
.bunn{max-width:var(--maks);margin:0 auto;padding:var(--s-6) var(--gutter) var(--s-5)}
.bunn__rad{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);flex-wrap:wrap;color:var(--c-dempet);font-size:var(--t-s)}
.bunn__rad a{min-height:44px;display:inline-flex;align-items:center}
.bunn__navn{font:var(--display-vekt) var(--t-l)/1 var(--font-display);color:var(--c-tekst);text-decoration:none}
.footer__credit{margin-top:var(--s-5);padding-top:var(--s-3);border-top:1px solid var(--c-linje);display:flex;justify-content:center;font-size:var(--t-xs);color:var(--c-dempet)}
.footer__credit-logo{position:relative;display:inline-flex;align-items:center;min-height:44px;padding-right:1.2em;color:var(--c-dempet);text-decoration:none;transition:color .25s}
.footer__credit-logo:hover{color:var(--c-tekst)}
.footer__credit-dot{color:var(--c-aksent-tekst)}
.footer__credit-spark{position:absolute;right:0;top:50%;width:.85em;height:.85em;margin-top:-.5em;color:var(--c-aksent-tekst)}

/* ---------- Visning (dialog) ---------- */
.visning{border:0;padding:var(--s-5) var(--s-5) var(--s-4);background:var(--c-bg);color:var(--c-tekst);max-width:min(92vw, 900px);max-height:92vh}
.visning::backdrop{background:rgba(10,9,8,.88)}
.visning__bilde{max-height:72vh;max-width:min(84vw, 820px);width:auto;margin:0 auto}
.visning__info{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-3)}
.visning__nr{font:var(--display-vekt) var(--t-l)/1 var(--font-display);font-style:italic}
.visning__lukk-form{display:flex;justify-content:flex-end;margin:calc(var(--s-4) * -1) calc(var(--s-4) * -1) var(--s-1) 0}
.visning__lukk{min-height:44px;min-width:44px;padding:0 var(--s-2);border:0;background:none;color:var(--c-dempet);cursor:pointer;font-size:var(--t-s)}
.visning__lukk:hover{color:var(--c-tekst)}

/* ---------- Design Lab ---------- */
.lab{position:fixed;left:20px;bottom:20px;z-index:var(--z-panel);display:flex;flex-direction:column-reverse;align-items:flex-start;gap:10px;font-family:system-ui, sans-serif}
.lab__toggle,.lab__panel{background:rgba(15,20,25,.4);-webkit-backdrop-filter:blur(30px) saturate(210%);backdrop-filter:blur(30px) saturate(210%);border:.5px solid rgba(255,255,255,.12);box-shadow:0 8px 32px 0 rgba(0,0,0,.2), inset 0 1.5px .5px rgba(255,255,255,.25), inset 0 -1px 2px rgba(255,255,255,.05), inset 0 10px 20px rgba(255,255,255,.05);color:#F5F1EA}
.lab__toggle{width:48px;height:48px;border-radius:100px;font-size:20px;cursor:pointer;transition:transform .2s var(--ease)}
.lab__toggle:active{transform:scale(.97)}
.lab__panel{border-radius:24px;padding:14px 16px 12px;display:grid;gap:8px}
.lab__panel[hidden]{display:none}
.lab__rad{display:flex;align-items:center;gap:6px;font-size:16px}
.lab__rad button{width:44px;height:44px;border-radius:100px;border:.5px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#F5F1EA;font-size:14px;cursor:pointer;transition:background-color .2s var(--ease), color .2s var(--ease)}
@media (hover:hover) and (pointer:fine){.lab__rad button:hover{background:rgba(255,255,255,.14)}}
.lab__rad button[aria-pressed="true"]{background:#F5F1EA;color:#161412}
.lab__skjult{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.design-lab__credit{display:flex;align-items:center;justify-content:center;gap:6px;padding-top:6px;border-top:.5px solid rgba(255,255,255,.12);font-size:11px;color:rgba(245,241,234,.72)}
.design-lab__credit-logo{position:relative;display:inline-flex;align-items:center;min-height:32px;padding-right:1.1em;font:700 13px/1 var(--font-body);color:#F5F1EA;text-decoration:none}

.design-lab__credit-dot{color:var(--c-aksent-tekst)}
.design-lab__credit-spark{position:absolute;right:0;top:6px;width:.8em;height:.8em;color:var(--c-aksent-tekst);transition:transform .3s var(--ease)}
@media (hover:hover) and (pointer:fine){.design-lab__credit-logo:hover .design-lab__credit-spark{transform:rotate(90deg) scale(1.2)}}

/* ---------- Skjul-tilstander (settes bare av skriptet i head) ---------- */
.anim-hero :is(.hero__sub, .hero__frame){opacity:0}
.anim-hero .hero__line-in{transform:translateY(125%)}
.anim-reveal .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.anim-reveal .reveal.is-in{opacity:1;transform:none}

/* ---------- Mobil: ruter i stedet for å ramse opp ---------- */
@media (max-width:820px){
  .topp__nav a:first-child{display:none}
  .hero--vegg{min-height:0;padding-top:88px;gap:var(--s-4)}
  .vegg__verk--a,.vegg__verk--c{display:none}
  .vegg__verk--b{width:100%}
  .hero__tekst{grid-template-columns:1fr;gap:var(--s-3)}
  .hero__side{padding-bottom:0}
  .hero--typo{min-height:78svh;padding-bottom:var(--s-4)}
  .hero__rad p:nth-child(2){display:none}
  .verk{padding:var(--s-6) var(--gutter)}
  .seksjon__hode{display:grid;gap:var(--s-2);margin-bottom:var(--s-4)}
  .verk__liste{grid-template-columns:repeat(2, 1fr);gap:var(--s-4) var(--s-2)}
  .verk__kort--ekstra{display:none}
  .verk.is-apen .verk__kort--ekstra{display:block}
  .verk__ramme{margin-bottom:var(--s-1)}
  .verk__nr{font-size:var(--t-m)}
  .verk__flere{display:flex}
  .teknikk{grid-template-columns:1fr;gap:var(--s-4);padding:var(--s-6) var(--gutter)}
  .teknikk__bilde{display:none}
  .kjop__inner{grid-template-columns:1fr;padding:var(--s-6) var(--gutter);gap:var(--s-4)}
  .kjop h2{grid-row:auto}
  .kjop__steg li{font-size:var(--t-m);padding-top:var(--s-2);grid-template-columns:36px 1fr}
  .bunn__rad{display:grid;gap:0}
  .footer__credit{justify-content:flex-start}
  .visning{padding:var(--s-4) var(--s-2) var(--s-3)}
  .visning__bilde{max-width:100%}
  .lab{left:12px;bottom:12px}
}