/* The hero's ground in dark and light mode (helt-bakgrunn.js), and what light mode changes further down: the questions,
   and the reading section in its frame */
.hbg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--natt);
  -webkit-mask-image:linear-gradient(#000 76%,transparent);mask-image:linear-gradient(#000 76%,transparent)}
/* On a phone the left column is display:contents, so its parts must stand over the ground themselves */
.helt-v>:not(.prov){position:relative;z-index:1}
.hbg-lerret{position:absolute;inset:0;width:100%;height:100%;display:block}
.hb-bue{visibility:hidden}

/* ---- Light mode: the hero ---- */
.lys-modus .hbg{background:var(--papir)}
.lys-modus #helt{color:var(--blekk)}
.lys-modus .helt-under{color:#55564F}
.lys-modus .prov-rad{background:rgba(255,255,255,.86);box-shadow:inset 0 0 0 1px rgba(17,18,20,.12),0 14px 34px -22px rgba(17,18,20,.45)}
.lys-modus .prov-rad:focus-within{box-shadow:inset 0 0 0 1.5px var(--blekk),0 14px 34px -22px rgba(17,18,20,.45)}
.lys-modus #prov-felt{color:var(--blekk)}
.lys-modus #prov-felt::placeholder{color:#8A8B87}
.lys-modus .prov-samtykke{color:#6E6F6C}
.lys-modus .prov-melding{color:#55564F}
.lys-modus .prov-melding.feil{color:#B42318}
.lys-modus .prov-melding button{color:var(--blekk)}
.lys-modus .helt-v .fakta{border-top-color:rgba(17,18,20,.14)}
.lys-modus .fakta div{border-color:rgba(17,18,20,.14)}
.lys-modus .fakta dd{color:#5F605C}
.lys-modus .hv{box-shadow:0 0 0 1px rgba(17,18,20,.1),0 40px 80px -36px rgba(17,18,20,.42)}
.lys-modus .hc .sw-panel{box-shadow:0 0 0 1px rgba(17,18,20,.08),0 34px 70px -30px rgba(17,18,20,.45)}
/* The lime dot needs a thin ink edge to be seen on paper, as in the white parts of the page */
.lys-modus #helt .punkt,.lys-modus #ingress .punkt{box-shadow:0 0 0 .018em var(--blekk)}

/* ---- Light mode: the questions on paper ---- */
.lys-modus #ingress{color:var(--blekk)}
.lys-modus #ingress .stor .o{opacity:.2}
.lys-modus .spm{background:rgba(255,255,255,.92);box-shadow:inset 0 0 0 1px rgba(17,18,20,.1),0 6px 18px -12px rgba(17,18,20,.3);color:#3A3B38}
.lys-modus .spm.lys{background:var(--lime);color:var(--blekk);box-shadow:none}

/* ---- The reading section in a frame, as the phone section further down: a band lower than the screen, with the
   site breaking out over its top and bottom edge, and the same halftone behind it (helt-bakgrunn.js places it and
   draws the dots). The opposite of the ground: light in dark mode, black in light mode ---- */
/* A wider column for the site than before, so it is taller than the band and breaks out of it */
@media (min-width:1101px){#lese .pin{grid-template-columns:minmax(0,4.6fr) minmax(0,8fr);padding:70px calc(var(--marg) + 16px) 30px calc(var(--marg) + clamp(30px,5vw,72px))}}
@media (min-width:761px) and (max-width:1100px){#lese .pin{padding:140px calc(var(--marg) + 40px) 50px}}
.lese-ramme{position:absolute;left:var(--marg);right:var(--marg);top:30%;height:min(56vh,500px);z-index:-1;border-radius:26px;overflow:hidden}
#lese-prikker{position:absolute;inset:0;width:100%;height:100%;display:block}
/* The box is the opposite of the ground: light in dark mode (a grey-green, so the white arch still shows as it rises
   over it), black in light mode, as the phone band */
html:not(.lys-modus) .lese-ramme{background:#E9ECE3}
html:not(.lys-modus) #lese{color:var(--blekk)}
html:not(.lys-modus) .lese-tekst .lead{color:#55564F}
html:not(.lys-modus) .teller{color:#6E6F6C}
html:not(.lys-modus) .teller b{color:var(--blekk)}
html:not(.lys-modus) #lese .punkt{box-shadow:0 0 0 .018em var(--blekk)}
html:not(.lys-modus) #nettsted{box-shadow:0 0 0 1px rgba(17,18,20,.1),0 40px 90px -40px rgba(17,18,20,.42)}
.lys-modus .lese-ramme{background:var(--blekk)}
.lys-modus #lese{color:var(--tekst)}
@media (max-width:760px){
  #lese .pin{padding:84px 36px 48px}
  .lese-ramme{left:10px;right:10px;border-radius:18px}
}

/* The pages in the stack: each with its own address bar and the page under it. The further back, the more veiled; the
   veil follows the place (data-plass, set by side.js), so it moves when the stack is clicked */
#rom-s{cursor:pointer}
/* Every page in the stack has the same edge and shadow, since each of them can come to the front */
#rom>.ark{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 90px -30px rgba(0,0,0,.8)}
html:not(.lys-modus) #rom>.ark{box-shadow:0 0 0 1px rgba(17,18,20,.1),0 40px 90px -40px rgba(17,18,20,.42)}
.ark{display:flex;flex-direction:column}
.ark .nett-bar{position:relative;z-index:1;flex:none}
.ark img{flex:1;min-height:0;height:auto}
#rom>.ark::after,#nettsted::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:rgba(12,13,14,.55);opacity:0;transition:opacity .45s}
html:not(.lys-modus) #rom>.ark::after,html:not(.lys-modus) #nettsted::after{background:#E9ECE3}
#rom [data-plass="1"]::after{opacity:.22}
#rom [data-plass="2"]::after{opacity:.38}
#rom [data-plass="3"]::after{opacity:.54}

/* The reading steps, built as the phone steps. On the light box (dark mode) the lines are ink and the fill a darker
   green, since lime does not show on it */
.les-steg{margin-top:26px}
html:not(.lys-modus) .les-steg{border-top-color:rgba(17,18,20,.14)}
html:not(.lys-modus) .les-steg li{border-bottom-color:rgba(17,18,20,.14);color:#8A8B87}
html:not(.lys-modus) .les-steg li.aktiv{color:var(--blekk)}
html:not(.lys-modus) .les-steg li.aktiv::before{color:#5F7F0C}
html:not(.lys-modus) .les-steg li i b{background:#7EA414}
@media (max-width:760px){.les-steg{margin-top:12px}.les-steg li{padding:8px 0;font-size:15px}}

/* The menu over the light top of the page, the same as over the white parts */
.nav.over-lys{color:var(--blekk);background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(17,18,20,.08),0 8px 30px -18px rgba(17,18,20,.3)}
.nav.over-lys #logo circle{fill:currentColor}

/* The switch between light and dark mode in the menu (front page only). It shows the mode the page is in: the moon in
   dark mode, the sun in light mode */
.modus-knapp{display:grid;place-items:center;flex:none;width:38px;height:38px;margin:0 -10px 0 -6px;padding:0;border:0;border-radius:10px;background:none;color:inherit;cursor:pointer;transition:background-color .2s}
.modus-knapp:hover{background:rgba(127,127,127,.16)}
.modus-knapp svg{grid-area:1/1;width:19px;height:19px;transition:transform .55s cubic-bezier(.3,.8,.3,1),opacity .3s}
.modus-knapp .mk-sol{opacity:0;transform:rotate(-90deg) scale(.5)}
.lys-modus .modus-knapp .mk-sol{opacity:1;transform:none}
.lys-modus .modus-knapp .mk-mane{opacity:0;transform:rotate(90deg) scale(.5)}
@media (max-width:760px){.modus-knapp{margin:0 -12px 0 0}}