/* ==========================================================================
   HJEM — Vandringen
   Én lang vegg, fire rom. Rullingen er skrittene dine.
   Alle mål på veggen er i «veggenheter» (u = 1 % av skjermhøyden).
   Øyehøyden ligger rundt 44u. Gulvet begynner på 84u.
   ========================================================================== */

html.js body.hjem { overflow-x: hidden; background: var(--blekk); }

.vandring { position: relative; height: 100vh; }
.scene {
  --u: 1vh; --u: 1svh;
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: var(--blekk); touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
html:not(.js) .scene { position: relative; overflow-x: auto; }
.scene::after { /* svak vignett: rommet er mørkere i kantene av synsfeltet */
  content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background: radial-gradient(ellipse 80% 75% at 50% 42%, rgba(0,0,0,0) 55%, rgba(0,0,0,.22) 100%);
}

/* ---------- Veggen ---------- */
.vegg {
  position: absolute; left: 0; top: 0;
  height: calc(84 * var(--u)); width: calc(var(--total, 1275) * var(--u));
  will-change: transform; transform: translate3d(0,0,0);
}
.rom {
  position: absolute; top: 0; height: 100%;
  left: calc(var(--x) * var(--u)); width: calc(var(--w) * var(--u));
  background-color: var(--veggfarge, var(--kalk)); color: var(--blekk);
  /* lyset kommer ovenfra: veggen er lysest under lampene og mørkner mot gulvet;
     skilleveggene skygger for veggen der de møtes */
  background-image:
    linear-gradient(180deg, rgba(255,247,228,.10) 0, rgba(255,247,228,0) 24%, rgba(0,0,0,0) 58%, rgba(0,0,0,.10) 86%, rgba(0,0,0,.17) 100%),
    linear-gradient(90deg, rgba(0,0,0,.16) 0, rgba(0,0,0,0) calc(4 * var(--u)), rgba(0,0,0,0) calc(100% - 4 * var(--u)), rgba(0,0,0,.16) 100%);
  transition: background-color 1.2s var(--ease), color 1.2s var(--ease);
}
.rom::before { /* kalkmaling: korn + skyer */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--flekker), var(--korn);
  background-size: 900px 900px, 240px 240px;
  opacity: .09; mix-blend-mode: multiply;
}
.rom::after { /* gulvlist */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(1.5 * var(--u));
  background: var(--list, #cfc5b2);
  background-image: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 35%, rgba(0,0,0,.12));
  box-shadow: 0 calc(-.15 * var(--u)) 0 rgba(0,0,0,.08), 0 calc(-.9 * var(--u)) calc(1 * var(--u)) rgba(0,0,0,.10);
}
.p { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y, 0) * var(--u)); }

.rom-forhall { --veggfarge: var(--kalk); }
.rom-gull    { --veggfarge: #2a211d; --list: #1d1714; color: #e6d7b8; }
.rom-oker    { --veggfarge: #e2d1b0; --list: #cbb792; }
.rom-rodt    { --veggfarge: #170d0c; --list: #0d0807; color: #d8a79c; }
.rom-kull { --veggfarge: #c6ae87; --list: #9d875f; }
.rom-sluse { --veggfarge: #33302d; --list: #24211f; color: #d9d0c1; }
.rom-kritt { --veggfarge: #24332d; --list: #1a2420; color: #e1e7dd; }
.rom-utgang  { --veggfarge: var(--kalk); }

/* kryssfiner i atelieret: plateskjøter og årer */
.rom-kull::before {
  background-image:
    repeating-linear-gradient(90deg, transparent 0 calc(39.6 * var(--u)), rgba(60,40,20,.55) calc(39.6 * var(--u)) calc(39.8 * var(--u))),
    repeating-linear-gradient(177deg, rgba(120,80,40,.0) 0 7px, rgba(120,80,40,.13) 7px 8px, rgba(120,80,40,0) 8px 19px),
    var(--flekker), var(--korn);
  background-size: auto, auto, 700px 700px, 240px 240px;
  opacity: .4;
}

/* ---------- Vinylbokstavene i forhallen ---------- */
.vinyl { margin: 0; font-weight: 400; }
.vinyl .v1, .vinyl .v2 {
  font-family: var(--f-katalog); font-size: calc(30 * var(--u)); line-height: .78;
  letter-spacing: -.025em; color: var(--blekk); white-space: nowrap;
}
.vinyl .v2 { font-style: italic; letter-spacing: -.01em; }
.vinyl .v3 { color: var(--blekk-2); font-size: max(11px, calc(1.25 * var(--u))); line-height: 1.7; }

.veggtekst { width: calc(33 * var(--u)); font-size: max(14px, calc(1.78 * var(--u))); line-height: 1.55; }
.veggtekst p { margin: 0 0 1em; }
.veggtekst p:first-child::first-line { font-style: italic; }
.veggtekst .hint { color: var(--blekk-2); margin-top: 2.2em; font-size: max(10px, calc(1.15 * var(--u))); }
.veggtekst.lys { color: #d9c9a6; }
.mob { display: none; }

.romskilt { display: flex; align-items: flex-start; gap: calc(1.4 * var(--u)); }
.romskilt b { font: 400 calc(6.5 * var(--u))/0.8 var(--f-katalog); }
.romskilt .arkiv { font-size: max(10px, calc(1.1 * var(--u))); opacity: .8; padding-top: calc(.4 * var(--u)); }
.rom-gull .romskilt b { color: var(--gull); }
.rom-rodt .romskilt b { color: #9e1b12; }

/* nisjen bak madonnaen */
.nisje {
  width: calc(62 * var(--u)); height: calc(78 * var(--u));
  border-radius: calc(31 * var(--u)) calc(31 * var(--u)) 0 0;
  background: #231b18;
  box-shadow: inset 0 calc(1.2 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.55), inset 0 0 0 1px rgba(184,145,58,.18);
}

/* ---------- Verkene ---------- */
.verk {
  margin: 0; height: calc(var(--h) * var(--u)); width: calc(var(--h) * var(--ar) * var(--u));
  cursor: zoom-in; --lys: 0;
}
.verk img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.verk:focus-visible { outline-offset: calc(1.5 * var(--u)); }

.maleri img {
  box-shadow:
    calc(.38 * var(--u)) 0 0 #16120f,                                        /* blindrammens side */
    0 calc(1.6 * var(--u)) calc(3.2 * var(--u)) calc(-.5 * var(--u)) rgba(0,0,0,.52),   /* slagskygge fra lampa */
    0 calc(.25 * var(--u)) calc(.6 * var(--u)) rgba(0,0,0,.38);              /* kontaktskygge */
}
.maleri::before { /* opphengswirene, fra skinnen i taket */
  content: ""; position: absolute; z-index: 1; left: 21%; right: 21%; bottom: calc(100% - .3 * var(--u));
  height: calc(var(--y) * var(--u) + 2 * var(--u)); pointer-events: none;
  border-left: 1px solid var(--wire, rgba(0,0,0,.17)); border-right: 1px solid var(--wire, rgba(0,0,0,.17));
}
.morkt .maleri { --wire: rgba(255,255,255,.085); }
.maleri::after { /* skygge når lampa er av */
  content: ""; position: absolute; inset: 0; z-index: 3; background: #0b0807; pointer-events: none;
  opacity: calc((1 - var(--lys)) * var(--dim, .22)); will-change: opacity;
}
.morkt .maleri { --dim: .62; }
.glod {
  position: absolute; inset: -14%; z-index: 0; border-radius: 40%;
  background: var(--sig); filter: blur(calc(7 * var(--u)));
  opacity: calc(var(--lys) * .30); will-change: opacity; pointer-events: none;
}
.morkt .glod { opacity: calc(var(--lys) * .42); }
.lampe {
  position: absolute; z-index: 4; left: 32%; width: 36%; top: calc(-3.4 * var(--u)); height: calc(1 * var(--u));
  border-radius: calc(.6 * var(--u));
  background: linear-gradient(#d9b56a, #86652a 60%, #5d451c);
  box-shadow: 0 calc(.3 * var(--u)) calc(.6 * var(--u)) rgba(0,0,0,.35);
}
.lampe::before { content: ""; position: absolute; left: 50%; top: 100%; width: calc(.35 * var(--u)); height: calc(2.5 * var(--u)); background: #6d5322; transform: translateX(-50%); }
.lampe::after { /* glødetråden */
  content: ""; position: absolute; left: 6%; right: 6%; bottom: calc(-.25 * var(--u)); height: calc(.35 * var(--u));
  background: #fff4d6; border-radius: 50%; opacity: var(--lys); box-shadow: 0 0 calc(1.2 * var(--u)) #ffe6a8;
}
.kjegle {
  position: absolute; z-index: 3; left: -22%; right: -22%; top: calc(-2.6 * var(--u)); height: 90%;
  background: radial-gradient(ellipse 50% 62% at 50% 0%, rgba(255,238,205,.62), rgba(255,238,205,.18) 45%, rgba(255,238,205,0) 72%);
  mix-blend-mode: soft-light; opacity: var(--lys); pointer-events: none; will-change: opacity;
}
.morkt .kjegle { mix-blend-mode: screen; background: radial-gradient(ellipse 50% 62% at 50% 0%, rgba(255,226,170,.30), rgba(255,226,170,.08) 45%, rgba(255,226,170,0) 72%); }

/* etikettene ved siden av verkene */
.etikett {
  width: calc(15 * var(--u)); padding: calc(1.1 * var(--u)) calc(1.2 * var(--u)) calc(1.3 * var(--u));
  background: #f4efe5; color: var(--blekk);
  box-shadow: 0 1px 0 rgba(0,0,0,.05), calc(.3 * var(--u)) calc(.5 * var(--u)) calc(1 * var(--u)) rgba(0,0,0,.14);
  font-size: max(10px, calc(1.2 * var(--u))); line-height: 1.35;
}
.etikett .nr { font-family: var(--f-arkiv); font-size: max(9px, calc(1 * var(--u))); letter-spacing: .1em; color: var(--blekk-2); }
.etikett .t { display: block; font: italic 400 max(13px, calc(1.9 * var(--u)))/1.1 var(--f-katalog); margin: calc(.5 * var(--u)) 0 calc(.6 * var(--u)); }
.etikett .tk { display: block; color: var(--blekk-2); }
.rom-gull .etikett { background: #1c1613; color: #e6d7b8; box-shadow: inset 0 0 0 1px rgba(184,145,58,.35); }
.rom-gull .etikett .nr, .rom-gull .etikett .tk { color: #b7a684; }

/* ---------- Sitatet i okerrommet ---------- */
.sitat {
  margin: 0; writing-mode: vertical-rl; transform: rotate(180deg);
  font: 400 calc(6.2 * var(--u))/1.05 var(--f-katalog); color: #6e4a22; letter-spacing: -.01em; white-space: nowrap;
}
.sitat i { display: block; color: #a0662a; }

/* ---------- Mørkerommet ---------- */
.safelys {
  width: calc(7 * var(--u)); height: calc(3.6 * var(--u)); border-radius: calc(.6 * var(--u)) calc(.6 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u));
  background: #8d1209; box-shadow: 0 0 calc(3 * var(--u)) calc(.6 * var(--u)) rgba(210,30,15,.55);
  transition: background .6s, box-shadow .6s;
}
.safelys::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: calc(170 * var(--u)); height: calc(120 * var(--u));
  transform: translate(-50%, -40%); pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, rgba(190,25,12,.30), rgba(190,25,12,.08) 40%, transparent 70%);
  transition: opacity .8s;
}
.snor { position: absolute; left: 0; top: 0; width: 100%; height: calc(40 * var(--u)); overflow: visible; pointer-events: none; }
.snor path { fill: none; stroke: #6e5a52; stroke-width: 1.4; }

@property --sv { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.trykk { transform-origin: 50% 0; transform: rotate(calc(var(--rot) * 1deg + var(--sv))); top: calc(var(--top, 20) * var(--u)); }
.trykk:hover { animation: svai 2.6s var(--ease); }
@keyframes svai { 0% { --sv: 0deg } 20% { --sv: 1.6deg } 45% { --sv: -1.1deg } 70% { --sv: .5deg } 100% { --sv: 0deg } }
.papirkant {
  position: relative; display: block; width: 100%; height: 100%; padding: calc(.9 * var(--u));
  background: #b86a5e; box-shadow: calc(.3 * var(--u)) calc(.8 * var(--u)) calc(1.4 * var(--u)) rgba(0,0,0,.55);
  transition: background-color 1.2s var(--ease);
}
.trykk img {
  box-shadow: none; opacity: 0; filter: contrast(.3) brightness(1.7) sepia(.4);
  transition: opacity 3.4s var(--ease) var(--d, 0s), filter 4.2s var(--ease) var(--d, 0s);
}
.rom-rodt.fremkalt .trykk img { opacity: 1; filter: none; }
.rodt-lag {
  position: absolute; z-index: 3; inset: calc(.9 * var(--u)); pointer-events: none;
  background: #d8190b; mix-blend-mode: multiply; opacity: .94;
  --px: -999px; --py: -999px;
  -webkit-mask-image: radial-gradient(circle calc(14 * var(--u)) at var(--px) var(--py), transparent 0 50%, #000 100%);
          mask-image: radial-gradient(circle calc(14 * var(--u)) at var(--px) var(--py), transparent 0 50%, #000 100%);
  transition: opacity 1s var(--ease);
}
.trykk.sann .rodt-lag { opacity: 0; }
.klype {
  position: absolute; z-index: 5; left: 50%; top: calc(-1.8 * var(--u)); width: calc(1.1 * var(--u)); height: calc(3.6 * var(--u));
  transform: translateX(-50%); border-radius: calc(.25 * var(--u));
  background: linear-gradient(90deg, #7d664a, #a88c66 45%, #6b563d);
}
.trykk figcaption {
  position: absolute; left: calc(1 * var(--u)); top: calc(100% + 1.4 * var(--u)); white-space: nowrap;
  font-size: max(9px, calc(1 * var(--u))); color: #a3665c; transform: rotate(calc(var(--rot) * -1deg));
}
.morkeromstekst { width: calc(40 * var(--u)); color: #c9786b; font-size: max(10px, calc(1.15 * var(--u))); line-height: 1.75; }

.bryter { display: grid; justify-items: center; gap: calc(.8 * var(--u)); color: inherit; }
.bryter .plate { width: calc(4.6 * var(--u)); height: calc(7.4 * var(--u)); background: #d9d2c4; border-radius: calc(.4 * var(--u)); display: grid; place-items: center; box-shadow: 0 calc(.4 * var(--u)) calc(1 * var(--u)) rgba(0,0,0,.5); }
.bryter .vippe { width: calc(1.8 * var(--u)); height: calc(3.6 * var(--u)); background: #efe9dd; border-radius: calc(.3 * var(--u)); box-shadow: 0 calc(.9 * var(--u)) 0 #b3aa99 inset; transition: box-shadow .25s; }
.bryter[aria-pressed="true"] .vippe { box-shadow: 0 calc(-.9 * var(--u)) 0 #b3aa99 inset; }
.bryter .arkiv { font-size: max(9px, calc(1 * var(--u))); }

/* Lyset på: rommet blir et vanlig, hvitt rom */
.rom-rodt.lys-pa { --veggfarge: #dcd8cf; --list: #c6c0b3; color: var(--blekk); }
.rom-rodt.lys-pa .papirkant { background: #f4f0e7; box-shadow: calc(.3 * var(--u)) calc(.8 * var(--u)) calc(1.4 * var(--u)) rgba(0,0,0,.22); }
.rom-rodt.lys-pa .rodt-lag { opacity: 0; }
.rom-rodt.lys-pa .safelys { background: #3a2a27; box-shadow: none; }
.rom-rodt.lys-pa .safelys::after { opacity: 0; }
.rom-rodt.lys-pa .trykk figcaption, .rom-rodt.lys-pa .morkeromstekst { color: var(--blekk-2); }
.rom-rodt.lys-pa .snor path { stroke: #8f857a; }
.rom-rodt.flimmer { animation: flimmer .7s steps(1) 1; }
@keyframes flimmer { 0% { filter: brightness(.3) } 12% { filter: brightness(1.2) } 20% { filter: brightness(.35) } 34% { filter: brightness(1.1) } 42% { filter: brightness(.6) } 60%,100% { filter: none } }

/* ---------- Atelieret ---------- */
.tegning { transform: rotate(calc(var(--rot) * 1deg)); }
.tegning img { box-shadow: calc(.2 * var(--u)) calc(.5 * var(--u)) calc(1.2 * var(--u)) rgba(60,40,20,.35); }
.teipbit {
  position: absolute; z-index: 4; width: calc(9 * var(--u)); height: calc(2.8 * var(--u));
  background: rgba(236,226,196,.86); box-shadow: 0 1px 2px rgba(0,0,0,.12);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%);
}
.teipbit.a { left: calc(-3 * var(--u)); top: calc(-.8 * var(--u)); transform: rotate(-38deg); }
.teipbit.b { right: calc(-3 * var(--u)); top: calc(-.6 * var(--u)); transform: rotate(33deg); }
.lapp {
  width: calc(24 * var(--u)); padding: calc(2 * var(--u)) calc(2.2 * var(--u)); background: var(--papir);
  transform: rotate(2.2deg); box-shadow: calc(.3 * var(--u)) calc(.6 * var(--u)) calc(1.2 * var(--u)) rgba(60,40,20,.28);
}
.lapp::before { content: ""; position: absolute; left: 50%; top: calc(.9 * var(--u)); width: calc(1.1 * var(--u)); height: calc(1.1 * var(--u)); border-radius: 50%; background: var(--signal); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.lapp p { margin: 0; font: italic 400 calc(3.1 * var(--u))/1.05 var(--f-katalog); }

.fargekart { width: calc(80 * var(--u)); }
.fk-tittel { margin: 0 0 calc(2 * var(--u)); font-size: max(10px, calc(1.1 * var(--u))); color: #4b3c26; }
.fk-tittel span { text-transform: none; letter-spacing: .02em; }
.fk-grid { display: grid; grid-template-columns: repeat(4, calc(14.4 * var(--u))); gap: calc(1.6 * var(--u)) calc(1.4 * var(--u)); }
.provelapp {
  position: relative; display: grid; align-content: start; text-align: left;
  padding: calc(1 * var(--u)) calc(1 * var(--u)) calc(1.2 * var(--u)); background: #f3eee4;
  transform: rotate(var(--r, 0deg)); box-shadow: calc(.2 * var(--u)) calc(.4 * var(--u)) calc(.8 * var(--u)) rgba(60,40,20,.25);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.provelapp:hover, .provelapp:focus-visible { transform: rotate(0deg) translateY(calc(-.8 * var(--u))); box-shadow: calc(.4 * var(--u)) calc(1.2 * var(--u)) calc(1.6 * var(--u)) rgba(60,40,20,.3); }
.provelapp .klatt { height: calc(5.6 * var(--u)); background: var(--c); border-radius: 46% 54% 40% 60% / 58% 44% 56% 42%; margin-bottom: calc(.9 * var(--u)); box-shadow: inset calc(-.4 * var(--u)) calc(-.6 * var(--u)) calc(1 * var(--u)) rgba(0,0,0,.18); }
.provelapp:nth-child(3n) .klatt { border-radius: 60% 40% 55% 45% / 45% 60% 40% 55%; }
.provelapp:nth-child(4n) .klatt { border-radius: 38% 62% 50% 50% / 50% 40% 60% 50%; }
.provelapp b { font: italic 400 max(12px, calc(1.6 * var(--u)))/1.05 var(--f-katalog); color: var(--blekk); }
.provelapp i { font: normal max(9px, calc(.95 * var(--u)))/1.4 var(--f-arkiv); letter-spacing: .08em; color: #6d6150; }

/* ---------- Utgangen ---------- */
.gjestebok { width: calc(58 * var(--u)); }
.bok {
  display: grid; grid-template-columns: 1fr 1fr; position: relative; z-index: 2;
  transform: perspective(calc(90 * var(--u))) rotateX(22deg); transform-origin: 50% 100%;
  filter: drop-shadow(0 calc(1.2 * var(--u)) calc(1.2 * var(--u)) rgba(0,0,0,.3));
}
.side {
  min-height: calc(24 * var(--u)); padding: calc(2.2 * var(--u)) calc(2.4 * var(--u));
  background-color: #f5f0e5;
  background-image: repeating-linear-gradient(180deg, transparent 0 calc(2.6 * var(--u)), rgba(90,110,140,.22) calc(2.6 * var(--u)) calc(2.7 * var(--u)));
  background-position: 0 calc(1.4 * var(--u));
  font-size: max(12px, calc(1.45 * var(--u))); line-height: calc(2.7 * var(--u));
}
.side.v { border-radius: calc(.6 * var(--u)) 0 0 calc(.6 * var(--u)); box-shadow: inset calc(-2.4 * var(--u)) 0 calc(2 * var(--u)) calc(-1.4 * var(--u)) rgba(0,0,0,.22); background-color: #f2ecdf; }
.side.h { border-radius: 0 calc(.6 * var(--u)) calc(.6 * var(--u)) 0; }
.side p { margin: 0; }
.side .hand { font: italic 400 max(15px, calc(2.4 * var(--u)))/calc(2.7 * var(--u)) var(--f-katalog); color: #23324d; }
.side .hand.liten { font-size: max(12px, calc(1.6 * var(--u))); margin-top: calc(2.7 * var(--u)); }
.side .arkiv { font-size: max(9px, calc(1.05 * var(--u))); line-height: calc(2.7 * var(--u)); }
.side a { text-decoration: none; border-bottom: 1px solid rgba(27,23,20,.3); }
.side a:hover { border-bottom-color: var(--signal); }
.pult {
  position: absolute; z-index: 1; left: 50%; top: calc(100% - 2 * var(--u)); width: calc(3.2 * var(--u)); height: calc(30 * var(--u));
  transform: translateX(-50%); background: linear-gradient(90deg, #3b2d22, #5a4533 50%, #3b2d22);
}
.pult::after { content: ""; position: absolute; left: 50%; bottom: 0; width: calc(18 * var(--u)); height: calc(1.2 * var(--u)); transform: translateX(-50%); background: #2f241b; border-radius: 2px; box-shadow: 0 calc(.5 * var(--u)) calc(1.6 * var(--u)) calc(.2 * var(--u)) rgba(0,0,0,.45); }
.skriv {
  position: relative; z-index: 3; display: inline-block; margin: calc(2.4 * var(--u)) 0 0 calc(19 * var(--u));
  padding: calc(.8 * var(--u)) calc(1.4 * var(--u)); background: linear-gradient(#cfae63, #9c7a3e); color: #22190e;
  font-family: var(--f-arkiv); font-size: max(10px, calc(1.1 * var(--u))); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 calc(.4 * var(--u)) calc(.8 * var(--u)) rgba(0,0,0,.3);
}
.skriv span { display: inline-block; transition: transform .6s var(--ease); }
.skriv:hover span { transform: rotate(-20deg) translate(2px,-2px); }

.dorapning {
  display: block; width: calc(34 * var(--u)); height: calc(72 * var(--u)); text-decoration: none;
  border: calc(1.3 * var(--u)) solid #d4cab7; border-bottom: 0;
  box-shadow: calc(.4 * var(--u)) 0 calc(1 * var(--u)) rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.08);
  background: #1b1714;
}
.overligger {
  position: absolute; left: 50%; bottom: calc(100% + 2.6 * var(--u)); transform: translateX(-50%);
  background: var(--blekk); color: var(--kalk); padding: calc(.7 * var(--u)) calc(1.4 * var(--u)); white-space: nowrap;
  font-size: max(10px, calc(1.15 * var(--u)));
}
.overligger span { display: inline-block; transition: transform .6s var(--ease); }
.dorapning:hover .overligger span { transform: translateX(5px); }
.innsyn {
  position: absolute; inset: 0; overflow: hidden;
  /* gangen innenfor: tak, sidevegger og gulv løper mot ett forsvinningspunkt */
  background:
    conic-gradient(from 0deg at 50% 46%,
      #1d1815 0 25.3deg,                       /* tak */
      #3a312b 25.3deg 40deg, #4a3f37 100deg, #3a312b 154.7deg,   /* høyre vegg */
      #5c4630 154.7deg 165deg, #6e5539 180deg, #5c4630 205.3deg, /* gulv */
      #2c2521 205.3deg 260deg, #372e28 320deg, #2c2521 334.7deg, /* venstre vegg */
      #1d1815 334.7deg 360deg);
}
.innsyn::before { /* bakveggen i neste rom, lyst av sin egen lampe */
  content: ""; position: absolute; left: 18%; right: 18%; top: 14%; bottom: 22%;
  background: linear-gradient(180deg, #ddd5c6, #cfc7b8 40%, #b9b0a0);
  box-shadow: 0 0 calc(4 * var(--u)) rgba(255,240,210,.25), inset 0 0 0 1px rgba(0,0,0,.08);
  transition: background .8s var(--ease);
}
.dorapning::after { /* dørkarmen har dybde */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset calc(1 * var(--u)) 0 calc(1.2 * var(--u)) rgba(0,0,0,.55), inset calc(-.6 * var(--u)) 0 calc(1 * var(--u)) rgba(0,0,0,.35), inset 0 calc(.8 * var(--u)) calc(1 * var(--u)) rgba(0,0,0,.5);
}
.innsyn img {
  position: absolute; left: 50%; top: 30%; width: 40%; transform: translateX(-50%);
  box-shadow: 0 calc(.4 * var(--u)) calc(1 * var(--u)) rgba(0,0,0,.35);
  transition: transform 1.2s var(--ease);
}
.dorapning:hover .innsyn img, .dorapning:focus-visible .innsyn img { transform: translateX(-50%) scale(1.12); }
.dorapning:hover .innsyn::before { background: linear-gradient(180deg, #ebe4d6, #ddd6c8 40%, #c7beae); }

.smaskilt { color: var(--blekk-2); text-decoration: none; font-size: max(9px, calc(1.05 * var(--u))); border-left: 2px solid var(--blekk-2); padding-left: calc(1 * var(--u)); }
.smaskilt span { text-transform: none; letter-spacing: .02em; }
.smaskilt:hover { color: var(--blekk); }


/* ==========================================================================
   III · LYSSLUSEN — Byen, før forhenget til mørkerommet
   ========================================================================== */
.rom-sluse::before { opacity: .12; }
.sluse-tekst { color: #9e9384; font-size: max(9px, calc(1.05 * var(--u))); }
.sluse-tekst::after { content: " →"; }

/* forhenget mellom slusen og mørkerommet (erstatter veggenden) */
.vegg-ende.forheng { width: calc(15 * var(--u)); }
.vegg-ende.forheng .side { display: none; }
.vegg-ende.forheng .front {
  background:
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0) 18%, rgba(0,0,0,0) 80%, rgba(0,0,0,.45)),
    repeating-linear-gradient(90deg, #1b0b0a 0, #3b1411 calc(1 * var(--u)), #230d0c calc(1.8 * var(--u)), #140807 calc(2.6 * var(--u)));
  box-shadow: 0 0 calc(4 * var(--u)) rgba(0,0,0,.6);
  -webkit-mask-image: linear-gradient(180deg, #000 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 86% 100%, 70% 58%, 58% 55%, 44% 58%, 30% 100%, 0 100%);
}
.vegg-ende.forheng .snorbind {
  position: absolute; left: 34%; top: 54.5%; width: 34%; height: calc(1.2 * var(--u)); border-radius: 50%;
  background: linear-gradient(#e0bf6e, #8e6a28); box-shadow: 0 calc(.3 * var(--u)) calc(.6 * var(--u)) rgba(0,0,0,.6);
}

/* ==========================================================================
   IV · KULL — Atelieret: skissen som kan males ferdig
   ========================================================================== */
.maling {
  width: calc(var(--h) * var(--ar-skisse) * var(--u));
  transition: width 1.1s var(--ease) .15s;
}
.maling.malt { width: calc(var(--h) * var(--ar-ferdig) * var(--u)); transition-delay: .35s; }
.maling img.skisse { object-fit: cover; }
.maling .ferdig {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: hidden;
  filter: drop-shadow(calc(.2 * var(--u)) calc(.5 * var(--u)) calc(.8 * var(--u)) rgba(60,40,20,.3));
}
.maling .strok path {
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .55s cubic-bezier(.55,.05,.35,1) calc((7 - var(--i)) * .06s);
}
.maling.malt .strok path { stroke-dashoffset: 0; transition-delay: calc(var(--i) * .14s); }
.maling .vask { opacity: 0; transition: opacity .35s ease 0s; }
.maling.malt .vask { opacity: 1; transition: opacity .6s ease 1.25s; }

.penselkrukke {
  width: calc(15 * var(--u)); height: calc(26 * var(--u)); display: block; color: var(--blekk);
}
.penselkrukke .hylle {
  position: absolute; left: 0; right: 0; bottom: calc(5.2 * var(--u)); height: calc(1.3 * var(--u));
  background: linear-gradient(#caa97a, #9c7e55); box-shadow: 0 calc(.6 * var(--u)) calc(1 * var(--u)) rgba(60,40,20,.35);
}
.penselkrukke .hylle::before, .penselkrukke .hylle::after { /* knekter */
  content: ""; position: absolute; top: 100%; width: calc(1 * var(--u)); height: calc(3 * var(--u)); background: #6b5a44;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.penselkrukke .hylle::before { left: 12%; } .penselkrukke .hylle::after { right: 12%; transform: scaleX(-1); }
.penselkrukke .krukke { position: absolute; left: calc(3.4 * var(--u)); bottom: calc(6.5 * var(--u)); width: calc(8 * var(--u)); height: calc(18 * var(--u)); }
.penselkrukke .glass {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(8.4 * var(--u)); z-index: 2;
  border-radius: calc(.5 * var(--u)) calc(.5 * var(--u)) calc(1.4 * var(--u)) calc(1.4 * var(--u));
  background:
    linear-gradient(90deg, rgba(255,255,255,.35) 0 8%, rgba(255,255,255,0) 14% 80%, rgba(255,255,255,.18) 88%),
    linear-gradient(180deg, rgba(220,232,228,.18) 0 38%, rgba(150,140,70,.55) 38%, rgba(120,100,50,.7));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 calc(.4 * var(--u)) calc(.8 * var(--u)) rgba(60,40,20,.25);
}
.penselkrukke .pensel {
  position: absolute; bottom: calc(1 * var(--u)); width: calc(.75 * var(--u)); height: calc(15 * var(--u)); z-index: 1;
  background: linear-gradient(90deg, #8b5a2b, #c0874b 50%, #7a4d22); border-radius: calc(.4 * var(--u));
  transform-origin: 50% 100%; transition: transform .6s var(--ease);
}
.penselkrukke .pensel::before { /* holken */
  content: ""; position: absolute; left: -12%; right: -12%; top: calc(1.8 * var(--u)); height: calc(2 * var(--u));
  background: linear-gradient(90deg, #8d8d8a, #e3e3de 45%, #7c7c78);
}
.penselkrukke .pensel::after { /* bust med maling */
  content: ""; position: absolute; left: -18%; right: -18%; top: calc(-1.8 * var(--u)); height: calc(3.8 * var(--u));
  border-radius: 50% 50% 18% 18% / 70% 70% 18% 18%; background: var(--bust);
}
.penselkrukke .p1 { left: calc(1.6 * var(--u)); --bust: #e3c33a; transform: rotate(-9deg); }
.penselkrukke .p2 { left: calc(3.6 * var(--u)); --bust: #6b2f22; transform: rotate(3deg); height: calc(16.5 * var(--u)); }
.penselkrukke .p3 { left: calc(5.4 * var(--u)); --bust: #2a2522; transform: rotate(13deg); height: calc(13 * var(--u)); }
.penselkrukke:hover .p1 { transform: rotate(-14deg) translateY(calc(-.8 * var(--u))); }
.penselkrukke:hover .p2 { transform: rotate(0deg) translateY(calc(-1.4 * var(--u))); }
.penselkrukke:hover .p3 { transform: rotate(17deg); }
.penselkrukke.i-bruk .p2 { transform: translate(calc(-30 * var(--u)), calc(-18 * var(--u))) rotate(-60deg); transition: transform .5s var(--ease-inn); }
.penselkrukke .merkelapp {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: max(9px, calc(1 * var(--u)));
  padding: calc(.5 * var(--u)) 0; background: var(--papir); box-shadow: 0 1px 2px rgba(0,0,0,.2); transform: rotate(-1.5deg);
}
.penselkrukke .merkelapp .pa { display: none; }
.penselkrukke[aria-pressed="true"] .merkelapp .av { display: none; }
.penselkrukke[aria-pressed="true"] .merkelapp .pa { display: inline; }
.penselkrukke:hover .merkelapp { color: var(--signal); }

/* ==========================================================================
   V · KRITT — Klasserommet: veggen er en tavle
   ========================================================================== */
.rom-kritt::before {
  mix-blend-mode: normal; opacity: 1;
  background-image:
    radial-gradient(ellipse 22% 14% at 26% 30%, rgba(235,242,232,.07), transparent 70%),
    radial-gradient(ellipse 30% 12% at 62% 22%, rgba(235,242,232,.06), transparent 70%),
    radial-gradient(ellipse 18% 20% at 84% 64%, rgba(235,242,232,.05), transparent 70%),
    repeating-linear-gradient(172deg, rgba(235,242,232,.025) 0 2px, transparent 2px 38px);
  background-size: auto;
}
.rom-kritt .romskilt b { color: #f0f2ea; filter: url(#kritt); }
.rom-kritt .etikett { background: transparent; box-shadow: none; color: #e6ece2; padding-left: 0; filter: url(#kritt); }
.rom-kritt .etikett .nr, .rom-kritt .etikett .tk { color: rgba(230,236,226,.72); }
.rom-kritt .maleri { --dim: .35; --wire: rgba(255,255,255,.08); }
.tavletekst {
  margin: 0; white-space: nowrap; filter: url(#kritt);
  font: italic 400 calc(4.2 * var(--u))/1 var(--f-katalog); color: rgba(240,244,236,.9); transform: rotate(-1.2deg);
}
.tavletekst i { color: #f2b3c8; }
.krittlist {
  width: calc(188 * var(--u)); height: calc(1.5 * var(--u));
  background: linear-gradient(#a08058, #6f5639); box-shadow: 0 calc(.6 * var(--u)) calc(1 * var(--u)) rgba(0,0,0,.4);
}
.krittlist i, .krittlist b { position: absolute; bottom: 100%; height: calc(.7 * var(--u)); border-radius: calc(.2 * var(--u)); }
.krittlist i { left: calc(34 * var(--u)); width: calc(3.2 * var(--u)); background: #f2f0e8; }
.krittlist i.b { left: calc(40 * var(--u)); width: calc(2.2 * var(--u)); background: #f2b3c8; transform: rotate(-8deg); }
.krittlist i.c { left: calc(122 * var(--u)); width: calc(2.6 * var(--u)); background: #f0dd7a; }
.krittlist b { left: calc(150 * var(--u)); width: calc(5 * var(--u)); height: calc(1.6 * var(--u)); background: linear-gradient(#5a5650, #3c3935 60%, #c9c2b4 60%); }

.benk.skolestol { width: calc(13 * var(--u)); height: calc(15 * var(--u)); }
.benk.skolestol .rygg { position: absolute; left: 12%; right: 12%; top: 0; height: calc(4.6 * var(--u)); border-radius: calc(.8 * var(--u)); background: linear-gradient(#c89d64, #9d7443); box-shadow: 0 calc(.3 * var(--u)) calc(.6 * var(--u)) rgba(0,0,0,.35); }
.benk.skolestol .sete { top: calc(6.6 * var(--u)); height: calc(1.6 * var(--u)); background: linear-gradient(#caa06a, #8f683c); }
.benk.skolestol .bein { top: calc(3.8 * var(--u)); left: calc(1.4 * var(--u)); right: calc(1.4 * var(--u)); border-left-width: calc(.45 * var(--u)); border-right-width: calc(.45 * var(--u)); border-color: #5f625f; }
.benk.skolestol:hover .sete { background: linear-gradient(#d8ad76, #9d7443); }

/* ---------- Gulvet ---------- */
.gulv {
  position: absolute; left: 0; right: 0; top: calc(84 * var(--u)); bottom: 0; overflow: hidden;
  background: #5d4631; perspective: calc(36 * var(--u)); perspective-origin: 50% calc(-46 * var(--u));
}
.gulv-plan { position: absolute; left: 0; top: 0; width: 100%; height: calc(80 * var(--u)); transform-origin: 50% 0; transform: rotateX(62deg); }
.planker {
  position: absolute; left: 0; top: 0; height: 100%; width: calc((var(--total, 1275) + 400) * var(--u));
  background-color: #7e6144;
  /* eikeplanker med skjøter og ulik tone fra bord til bord (SVG-flis, 8 bord bred) */
  --planker: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='364' height='600' viewBox='0 0 364 600' shape-rendering='crispEdges'><rect width='364' height='600' fill='%237e6144'/><rect x='0.0' y='0' width='45.5' height='600' fill='%23856847'/><rect x='0.0' y='123' width='45.5' height='227' fill='%23725639'/><rect x='0.0' y='120' width='45.5' height='3' fill='%231f140b' fill-opacity='.7'/><rect x='0.0' y='123' width='45.5' height='1.5' fill='%23ffffff' fill-opacity='.08'/><rect x='0.0' y='423' width='45.5' height='177' fill='%23725639'/><rect x='0.0' y='420' width='45.5' height='3' fill='%231f140b' fill-opacity='.7'/><rect x='0.0' y='423' width='45.5' height='1.5' fill='%23ffffff' fill-opacity='.08'/><rect x='0.0' y='0' width='1.4' height='600' fill='%23ffffff' fill-opacity='.08'/><rect x='43.5' y='0' width='2' height='600' fill='%231f140b' fill-opacity='.68'/><rect x='45.5' y='0' width='45.5' height='600' fill='%23775b3e'/><rect x='45.5' y='303' width='45.5' height='227' fill='%2388694a'/><rect x='45.5' y='300' width='45.5' height='3' fill='%231f140b' fill-opacity='.7'/><rect x='45.5' y='303' width='45.5' height='1.5' fill='%23ffffff' fill-opacity='.08'/><rect x='45.5' y='0' width='1.4' height='600' fill='%23ffffff' fill-opacity='.08'/><rect x='89.0' y='0' width='2' height='600' fill='%231f140b' fill-opacity='.68'/><rect x='91.0' y='0' width='45.5' height='600' fill='%238d6f4e'/><rect x='91.0' y='63' width='45.5' height='227' fill='%237c5f41'/><rect x='91.0' y='60' width='45.5' height='3' fill='%231f140b' fill-opacity='.7'/><rect x='91.0' y='63' width='45.5' height='1.5' fill='%23ffffff' fill-opacity='.08'/><rect x='91.0' y='363' width='45.5' height='227' fill='%237c5f41'/><rect x='91.0' y='360' width='45.5' height='3' fill='%231f140b' fill-opacity='.7'/><rect x='91.0' y='363' width='45.5' height='1.5' fill='%23ffffff' fill-opacity='.08'/><rect x='91.0' y='0' width='1.4' height='600' fill='%23ffffff' fill-opacity='.08'/><rect x='134.5' y='0' width='2' height='600' fill='%231f140b' fill-opacity='.68'/><rect x='136.5' y='0' width='45.5' height='600' fill='%23725639'/><rect x='136.5' y='223' width='45.5' height='227' fill='%23927450'/><rect x='136.5' y='220' width='45.5' height='3' fill='%231f140b' fill-opacity='.7'/><rect x='136.5' y='223' width='45.5' height='1.5' fill='%23ffffff' fill-opacity='.08'/><rect x='136.5' y='523' width='45.5' height='77' fill='%23927450'/><rect x='136.5' y='520' width='45.5' height='3' fill='%231f140b' fill-opacity='.7'/><rect x='136.5' y='523' width='45.5' height='1.5' fill='%23ffffff' fill-opacity='.08'/><rect x='136.5' y='0' width='1.4' height='600' fill='%23ffffff' fill-opacity='.08'/><rect x='180.0' y='0' width='2' height='600' fill='%231f140b' fill-opacity='.68'/><rect x='182.0' y='0' width='45.5' height='600' fill='%2388694a'/><rect x='182.0' y='153' width='45.5' height='227' fill='%2375583b'/><rect x='182.0' y='150' width='45.5' height='3' fill='%231f140b' fill-opacity='.7'/><rect x='182.0' y='153' width='45.5' height='1.5' fill='%23ffffff' fill-opacity='.08'/><rect x='182.0' y='453' width='45.5' height='147' fill='%2375583b'/><rect x='182.0' y='450' width='45.5' height='3' fill='%231f140b' fill-opacity='.7'/><rect x='182.0' y='453' width='45.5' height='1.5' fill='%23ffffff' fill-opacity='.08'/><rect x='182.0' y='0' width='1.4' height='600' fill='%23ffffff' fill-opacity='.08'/><rect x='225.5' y='0' width='2' height='600' fill='%231f140b' fill-opacity='.68'/><rect x='227.5' y='0' width='45.5' height='600' fill='%237c5f41'/><rect x='227.5' y='333' width='45.5' height='227' fill='%23856847'/><rect x='227.5' y='330' width='45.5' height='3' fill='%231f140b' fill-opacity='.7'/><rect x='227.5' y='333' width='45.5' height='1.5' fill='%23ffffff' fill-opacity='.08'/><rect x='227.5' y='0' width='1.4' height='600' fill='%23ffffff' fill-opacity='.08'/><rect x='271.0' y='0' width='2' height='600' fill='%231f140b' fill-opacity='.68'/><rect x='273.0' y='0' width='45.5' height='600' fill='%23927450'/><rect x='273.0' y='93' width='45.5' height='227' fill='%23775b3e'/><rect x='273.0' y='90' width='45.5' height='3' fill='%231f140b' fill-opacity='.7'/><rect x='273.0' y='93' width='45.5' height='1.5' fill='%23ffffff' fill-opacity='.08'/><rect x='273.0' y='393' width='45.5' height='207' fill='%23775b3e'/><rect x='273.0' y='390' width='45.5' height='3' fill='%231f140b' fill-opacity='.7'/><rect x='273.0' y='393' width='45.5' height='1.5' fill='%23ffffff' fill-opacity='.08'/><rect x='273.0' y='0' width='1.4' height='600' fill='%23ffffff' fill-opacity='.08'/><rect x='316.5' y='0' width='2' height='600' fill='%231f140b' fill-opacity='.68'/><rect x='318.5' y='0' width='45.5' height='600' fill='%2375583b'/><rect x='318.5' y='253' width='45.5' height='227' fill='%238d6f4e'/><rect x='318.5' y='250' width='45.5' height='3' fill='%231f140b' fill-opacity='.7'/><rect x='318.5' y='253' width='45.5' height='1.5' fill='%23ffffff' fill-opacity='.08'/><rect x='318.5' y='553' width='45.5' height='47' fill='%238d6f4e'/><rect x='318.5' y='550' width='45.5' height='3' fill='%231f140b' fill-opacity='.7'/><rect x='318.5' y='553' width='45.5' height='1.5' fill='%23ffffff' fill-opacity='.08'/><rect x='318.5' y='0' width='1.4' height='600' fill='%23ffffff' fill-opacity='.08'/><rect x='362.0' y='0' width='2' height='600' fill='%231f140b' fill-opacity='.68'/></svg>");
  background-image: var(--korn), var(--planker);
  background-size: 240px 240px, calc(36.4 * var(--u)) calc(60 * var(--u));
  will-change: transform;
}
.planker::after { /* veggen kaster skygge ned på gulvet der de møtes */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.44), rgba(0,0,0,.16) 12%, rgba(0,0,0,0) 40%);
}
.gulv::after { /* takets lys legger seg som et mildt skjær på gulvet; nærmest deg er det mørkere */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(255,236,200,.12), rgba(255,236,200,0)),
    linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.16));
}
.teip {
  position: absolute; left: calc(var(--x) * var(--u)); top: calc(10 * var(--u));
  display: flex; gap: calc(2 * var(--u)); align-items: center;
  padding: calc(.9 * var(--u)) calc(2 * var(--u)); background: rgba(232,222,196,.9);
  font-family: var(--f-arkiv); font-size: calc(2.3 * var(--u)); letter-spacing: .2em; text-transform: uppercase; color: #3a2f25;
  transform: rotate(-1.5deg); white-space: nowrap;
}
.teip .pil { font-size: calc(3 * var(--u)); letter-spacing: 0; }

/* ---------- Forgrunn ---------- */
.forgrunn { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.vegg-ende { position: absolute; left: 0; top: 0; bottom: 0; width: calc(5.5 * var(--u)); will-change: transform; }
.vegg-ende i { position: absolute; top: 0; bottom: 0; }
.vegg-ende .front {
  left: 0; right: 0;
  background:
    linear-gradient(180deg, rgba(255,250,236,.16), rgba(255,250,236,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.14)),
    linear-gradient(90deg, #beb4a1, #d3cab8 30%, #c4baa7);
  box-shadow: 0 0 calc(3.6 * var(--u)) rgba(0,0,0,.42), 0 0 calc(1 * var(--u)) rgba(0,0,0,.25);
}
.vegg-ende .front::before { content: ""; position: absolute; inset: 0; background-image: var(--korn); opacity: .2; mix-blend-mode: multiply; }
.vegg-ende .side { width: var(--sw, 0px); background: var(--sf, #b5ab98); }
.vegg-ende .side.til-venstre { right: 100%; background-image: linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.08)); }
.vegg-ende .side.til-hoyre { left: 100%; background-image: linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.34)); }

.benk {
  position: absolute; left: 0; bottom: calc(4 * var(--u)); width: calc(28 * var(--u)); height: calc(8.5 * var(--u));
  pointer-events: auto; will-change: transform;
}
.benk .sete { position: absolute; left: 0; right: 0; top: 0; height: calc(2.6 * var(--u)); border-radius: calc(.5 * var(--u)); background: linear-gradient(#4a3a30, #251c17); box-shadow: 0 calc(.2 * var(--u)) 0 rgba(255,255,255,.08) inset; }
.benk .bein { position: absolute; left: calc(2.5 * var(--u)); right: calc(2.5 * var(--u)); top: calc(2.6 * var(--u)); bottom: 0; border-left: calc(.8 * var(--u)) solid #15110e; border-right: calc(.8 * var(--u)) solid #15110e; }
.benk::after { content: ""; position: absolute; left: -8%; right: -8%; bottom: calc(-1.4 * var(--u)); height: calc(2.4 * var(--u)); background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.45), transparent 70%); z-index: -1; }
.benk em {
  position: absolute; left: 50%; bottom: calc(100% + 1.2 * var(--u)); transform: translate(-50%, 6px); opacity: 0; white-space: nowrap;
  background: var(--blekk); color: var(--kalk); padding: .35rem .6rem; font-style: normal; font-size: .62rem;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.benk:hover em, .benk:focus-visible em { opacity: 1; transform: translate(-50%, 0); }
.benk:hover .sete { background: linear-gradient(#5a473b, #2d221c); }

/* ---------- Lysene tennes (første besøk) ---------- */
.morke { position: absolute; inset: 0; z-index: 30; background: #0c0a09; pointer-events: none; opacity: 0; }
.scene.tenner .morke { animation: tenner 1.9s steps(1) forwards; }
@keyframes tenner {
  0% { opacity: 1 } 38% { opacity: .15 } 44% { opacity: 1 } 56% { opacity: .35 } 60% { opacity: .9 } 70% { opacity: .08 } 76% { opacity: .5 } 84%, 100% { opacity: 0 }
}

/* ---------- Plantegningen ---------- */
.plan {
  position: fixed; z-index: 50; left: clamp(16px, 2.4vw, 36px); bottom: clamp(14px, 2.2vw, 28px);
  width: 250px; padding: 12px 14px 14px; background: var(--papir);
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.55);
  transform: rotate(-.8deg);
  background-image: linear-gradient(90deg, transparent 49.6%, rgba(0,0,0,.07) 49.8%, transparent 50.2%); /* brettekant */
}
.plan-tittel { margin: 0 0 10px; font-size: .6rem; color: var(--blekk-2); }
.plan-tittel span { color: var(--signal); }
.plan-rom { position: relative; display: flex; height: 38px; border: 1.5px solid var(--blekk); }
.plan-rom button {
  position: relative; height: 100%; border-left: 1.5px solid var(--blekk); display: grid; place-items: center;
  font: italic 400 .8rem/1 var(--f-katalog); color: var(--blekk);
  transition: background-color .4s;
}
.plan-rom button:first-child { border-left: 0; }
.plan-rom button::after { /* døråpning i skilleveggen */
  content: ""; position: absolute; left: -2px; bottom: 6px; width: 3px; height: 12px; background: var(--papir);
}
.plan-rom button:first-child::after { display: none; }
.plan-rom button:hover { background-color: rgba(0,0,0,.06); }
.plan-rom button .fp { position: absolute; left: 4px; top: 4px; width: 6px; height: 6px; background: var(--fc); }
.plan-rom .her-prikk {
  position: absolute; bottom: -9px; left: 0; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 0 3px rgba(179,38,30,.22); pointer-events: none;
}

/* ---------- Audioguiden (mobil) ---------- */
.guide { display: none; }

/* ---------- Betrakteren («Sett deg») ---------- */
.betrakter {
  position: fixed; inset: 0; z-index: 120; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 27rem);
  background: rgba(14,11,10,.985); color: #e7ddc9;
  opacity: 0; transition: opacity .6s var(--ease);
}
.betrakter[hidden] { display: none; }
.betrakter.vis { opacity: 1; }
.b-bilde { position: relative; display: grid; place-items: center; padding: 6vh 3vw 6vh 5vw; min-height: 0; }
.b-bilde img { max-width: 100%; max-height: 86vh; width: auto; height: auto; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); cursor: none; transform-origin: 0 0; }
.b-tekst { align-self: center; padding: 6vh 4vw 6vh 1vw; max-width: 27rem; opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease) .25s, transform .8s var(--ease) .25s; }
.betrakter.vis .b-tekst { opacity: 1; transform: none; }
.b-nr { color: #a89878; margin: 0 0 1.2rem; }
.b-tittel { font: italic 400 clamp(2.2rem, 4.2vw, 3.6rem)/.98 var(--f-katalog); margin: 0 0 1.1rem; letter-spacing: -.01em; }
.b-teknikk { color: #b5a687; margin: 0 0 1.6rem; }
.b-omtale { font-size: 1.08rem; line-height: 1.6; color: #d9cfbc; margin: 0 0 2rem; max-width: 24rem; }
.b-hint { color: #7c705f; margin: 0 0 2.2rem; font-size: .62rem; }
.b-nav { display: flex; gap: 2rem; margin-bottom: 2.6rem; }
.b-nav button, .b-lukk { color: #e7ddc9; padding: .4rem 0; border-bottom: 1px solid rgba(231,221,201,.3); }
.b-nav button:hover, .b-lukk:hover { border-bottom-color: var(--gull); color: #fff; }
.b-lukk span { color: #7c705f; }
.lupe {
  position: fixed; left: 0; top: 0; width: 30vh; height: 30vh; border-radius: 50%; pointer-events: none; z-index: 5;
  border: 1px solid rgba(184,145,58,.8); box-shadow: 0 16px 40px rgba(0,0,0,.6), inset 0 0 0 6px rgba(14,11,10,.35);
  background-repeat: no-repeat; opacity: 0; transform: scale(.6); transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.lupe.vis { opacity: 1; transform: scale(1); }

/* ---------- Pekeren ---------- */
.peker {
  position: fixed; left: 0; top: 0; z-index: 140; pointer-events: none;
  font-family: var(--f-arkiv); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--blekk); color: var(--kalk); padding: .32rem .55rem; opacity: 0; transition: opacity .25s;
  white-space: nowrap;
}
.peker.vis { opacity: 1; }
body.drar, body.drar * { cursor: grabbing !important; }
.scene { cursor: grab; }

/* ==========================================================================
   MOBIL — en egen komposisjon, ikke en sammenpresset desktop
   · Vinylen reiser seg loddrett langs veggen
   · Etikettene flytter ut av veggen og inn i en audioguide nederst
   · Plantegningen blir en tynn stripe i guiden
   · Mørkerommet: trykk for de sanne fargene
   ========================================================================== */
@media (max-width: 720px), (max-aspect-ratio: 4/5) {
  .rom { left: calc(var(--mx) * var(--u)); width: calc(var(--mw) * var(--u)); }
  .p { left: calc(var(--mx) * var(--u)); top: calc(var(--my, var(--y, 0)) * var(--u)); }
  .verk { height: calc(var(--mh, var(--h)) * var(--u)); width: calc(var(--mh, var(--h)) * var(--ar) * var(--u)); }
  .maleri::before { height: calc(var(--my, var(--y)) * var(--u) + 2 * var(--u)); }
  .trykk { top: calc(var(--top, 20) * var(--u)); }
  .desk { display: none; }
  .mob { display: inline; }

  .vinyl .v1, .vinyl .v2 {
    writing-mode: vertical-rl; transform: rotate(180deg); font-size: calc(11.5 * var(--u)); line-height: .9;
  }
  .vinyl .v1 { top: calc(46 * var(--u)); }
  .vinyl .v2 { top: calc(20 * var(--u)); }
  .vinyl .v1 { left: calc(3 * var(--u)); }
  .vinyl .v2 { left: calc(3 * var(--u)); }
  .vinyl .v3 { font-size: 10px; }
  .veggtekst { width: calc(28 * var(--u)); font-size: 14px; }
  .veggtekst.lys { width: calc(32 * var(--u)); }
  .romskilt b { font-size: calc(5 * var(--u)); }
  .nisje { width: calc(50 * var(--u)); height: calc(72 * var(--u)); border-radius: calc(25 * var(--u)) calc(25 * var(--u)) 0 0; }
  .etikett { display: none; }
  .maling { width: calc(var(--mh, var(--h)) * var(--ar-skisse) * var(--u)); }
  .maling.malt { width: calc(var(--mh, var(--h)) * var(--ar-ferdig) * var(--u)); }
  .penselkrukke { width: calc(13 * var(--u)); height: calc(24 * var(--u)); }
  .krittlist { width: calc(158 * var(--u)); }
  .krittlist i.c { left: calc(100 * var(--u)); } .krittlist b { left: calc(128 * var(--u)); }
  .tavletekst { white-space: normal; width: calc(30 * var(--u)); font-size: calc(3.6 * var(--u)); line-height: 1.1; }
  .vegg-ende.forheng { width: calc(9 * var(--u)); }
  .sitat { font-size: calc(5 * var(--u)) !important; }
  .morkeromstekst { width: calc(34 * var(--u)); font-size: 10px; }
  .lapp { width: calc(26 * var(--u)); }
  .lapp p { font-size: calc(2.8 * var(--u)); }
  .fargekart { top: calc(26 * var(--u)); }
  .gjestebok { width: calc(40 * var(--u)); }
  .bok { grid-template-columns: 1fr; transform: none; }
  .side { min-height: 0; padding: calc(1.6 * var(--u)) calc(2 * var(--u)); font-size: 13px; }
  .side.v { border-radius: calc(.6 * var(--u)) calc(.6 * var(--u)) 0 0; border-bottom: 3px dotted #b8ad98; box-shadow: none; }
  .side.h { border-radius: 0 0 calc(.6 * var(--u)) calc(.6 * var(--u)); }
  .side .hand { font-size: 17px; }
  .side .hand.liten { font-size: 13px; margin-top: .6em; }
  .side .arkiv { font-size: 9px; }
  .pult { display: none; }
  .skriv { margin: calc(2 * var(--u)) 0 0; font-size: 10px; }
  .dorapning { width: calc(30 * var(--u)); height: calc(70 * var(--u)); }
  .overligger { font-size: 10px; }
  .smaskilt { font-size: 9px; }
  .benk { display: none; }
  .scene { cursor: auto; }
  .plan { display: none; }

  .guide {
    display: block; position: fixed; z-index: 55; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
    background: var(--blekk); color: var(--kalk); box-shadow: 0 14px 30px -10px rgba(0,0,0,.6);
  }
  .guide-plan { position: relative; display: flex; height: 5px; }
  .guide-plan span { height: 100%; background: var(--fc); opacity: .75; }
  .guide-plan .her-prikk { position: absolute; top: -3px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--kalk); box-shadow: 0 0 0 2px var(--signal); }
  .guide-verk { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 12px; width: 100%; padding: 13px 14px 14px; text-align: left; color: var(--kalk); }
  .guide-verk .nr { font-size: .6rem; color: #a89878; }
  .guide-verk .tittel { font: italic 400 1.15rem/1.1 var(--f-katalog); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .guide-verk .se { font-size: .58rem; color: var(--gull); }
  .guide.tom .guide-verk .se { visibility: hidden; }

  .betrakter { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start; overflow-y: auto; }
  .b-bilde { display: block; text-align: center; padding: 70px 14px 10px; min-height: auto; }
  .b-bilde img { display: inline-block; }
  .b-bilde img { max-height: 60vh; cursor: auto; }
  .b-tekst { padding: 10px 22px 40px; }
  .b-tittel { font-size: 2.2rem; }
  .lupe { width: 42vw; height: 42vw; }
}

@media (prefers-reduced-motion: reduce) {
  .trykk:hover { animation: none; }
}