html, body{
  margin:0;
  padding:0;
  height:100%;
  background:#040390;

  /* viktig på PC for “to paneler som slutter likt” */
  overflow:hidden;
}

/* layout */
.layout{
  display:flex;
  height:100vh;          /* viktig: lik bunn på begge kolonner */
  align-items:stretch;
}

/* venstre hvite sidebar */
.mosaic-frame{
  background:#fff;
  width:190px;
  padding:12px 24px 12px 12px;
  box-sizing:border-box;

  height:100%;
  overflow-y:auto;       /* SCROLL I HVIT */
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}

/* mosaikk */
.mosaic{
  width:166px;
  font-size:0;
  line-height:0;
  overflow:hidden;
}

.row{
  display:flex;
  width:166px;
  overflow:hidden;
}

/* bilder */
.mosaic img{
  display:block;
  margin:0;
  padding:0;
  border:0;

  /* fallback først */
  image-rendering:auto;
  /* best for pixelart */
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

/* fjern horisontale hairline gaps */
.row img + img{
  margin-left:-1px;
}

/* fjern vertikale hairline gaps */
.mosaic .row + .row{
  margin-top:-1px;
}

/* ---------------- HEADER (HØYRE SIDE) ---------------- */
.header-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 16px 0;
}

.hero{
  width:320px;
  max-width:100%;
  height:auto;
  display:block;
  margin:0;
}

.about-btn{
  height:auto;
  display:block;
}

/* ---------------- BUGFIX-BILDE MED HOTSPOTS ---------------- */
.bugfix-wrap{
  position:relative;
  width:166px;
  max-width:100%;

  /* fallback (hvis aspect-ratio ikke støttes) */
  height:50px;

  /* best */
  aspect-ratio:166 / 50;

  transform:translateX(-1px);
}

.bugfix-img{
  position:absolute;

  /* fallback (hvis inset ikke støttes) */
  top:0;
  right:0;
  bottom:0;
  left:0;

  /* best */
  inset:0;

  width:100%;
  height:100%;
  display:block;

  /* fallback først */
  image-rendering:auto;
  /* best for pixelart */
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

.hotspot{
  position:absolute;
  width:12%;
  height:44%;
  border-radius:999px;
  background:transparent;
}

.hotspot:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}

.hs1{ left:31.5%; top:0.5%; }
.hs2{ left:44.2%; top:6.0%; }
.hs3{ left:58.0%; top:2.5%; }

/* knapper */
.buttons{
  width:166px;
  margin-top:20px;
  text-align:center;
}

.buttons a{
  display:block;
  margin:6px 0;
}

.buttons img{
  width:88px;
  height:auto;
  display:block;
  margin:0 auto;
}

/* høyre side */
.content{
  flex:1;
  padding:30px 40px;
  box-sizing:border-box;

  height:100%;
  overflow-y:auto;       /* SCROLL I BLÅ ved behov */
  overflow-x:hidden;
}

/* tekst */
.content h1{
  font:700 20px/1.2 system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  color:#fff;
  margin:0 0 10px 0;
}

.content p{
  font:14px/1.5 system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  color:#fff;
  margin:0 0 10px 0;
}

.facts{
  max-width:600px;
  margin:24px auto 0;
  padding:12px 14px;

  background:#0b0b0b;              /* mørk “profile box” */
  color:#fff;                      /* hvit tekst */
  border:2px dotted #00b7ff;       /* geocities-ish */
  box-shadow:4px 4px 0 #001a66;    /* litt “sticker” */
}

.facts-val{
  flex:1;
  color:#fff;
}

/* “Me [Just The Facts]” */
.facts-title{
  margin:0 0 10px 0;
  font:700 18px/1.2 Verdana, Arial, sans-serif;
  color:#ff00cc;
  text-align:center;
  letter-spacing:0.5px;
}

/* selve lista */
.facts-list{
  margin:0;
  padding:0;
  font:13px/1.5 Verdana, Arial, sans-serif;
}

/* en rad */
.facts-row{
  display:flex;
  gap:10px;
  padding:4px 0;
  border-bottom:1px dashed #c9c9c9;
}

.facts-row:last-child{
  border-bottom:0;
}

/* venstre label */
.facts-key{
  width:165px;
  flex:0 0 165px;
  font-weight:700;
  color:#0033cc;
}

/* litt ekstra geocities “bling” */
.facts-blink{
  animation:blink 1s steps(2, start) infinite;
}
@keyframes blink{ to{ visibility:hidden; } }

.facts-calvin {
  text-align: center;
  margin-top: 10px;
}

.facts-calvin img {
  margin: 0 4px;
}

/* ---------------- MOBILE ---------------- */
@media (max-width:640px){

  /* på mobil: vanlig nettside-scroll igjen */
  html, body{
    height:auto;
    overflow:auto;
  }

  .layout{
    flex-direction:column;
    height:auto;
  }

  .mosaic-frame{
    width:100%;
    height:auto;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }

  .mosaic-rail{
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    gap:16px;

    /* fallback: funker uten */
    overflow-x:visible;

    /* best: naturlig bredde */
    width:max-content;

    /* best mobil-opplevelse */
    scroll-snap-type:x mandatory;
  }

  .mosaic,
  .buttons{
    scroll-snap-align:start;
    flex:0 0 auto;
  }

  .buttons{
    display:flex;
    flex-direction:row;
    gap:12px;
    width:max-content;
    margin:0 auto;
  }

  .buttons a{
    display:block;
    margin:0;
  }

  .buttons img{
    display:block;
    margin:0;
  }

  .content{
    padding:18px;

    /* på mobil: content skal ikke være et “panel” */
    height:auto;
    overflow:visible;
  }

  .header-row{
    flex-direction:column;
    align-items:flex-start;
  }

  .hero{
    width:100%;
  }

  .content h1{
    font-size:24px;
  }

  .content p{
    font-size:18px;
  }
  
  .facts-list{
  font-size:18px;
}

  .facts-row{ flex-direction:column; gap:2px; }
  .facts-key{ width:auto; flex:auto; }

}