:root{
  color-scheme: light only;
  --papir: #ffffff;
  --blekk: #111111;
  --gra:   #6a6a6a;
  --bla:   #0000ee;
  --strek: #dcdcdc;
  --mono:  'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

*{ box-sizing:border-box }

html, body{
  background:var(--papir) !important;
  color:var(--blekk) !important;
}
@media (prefers-color-scheme: dark){
  html, body{ background:var(--papir) !important; color:var(--blekk) !important }
  h1, p, .trigger{ color:var(--blekk) !important }
}
html{
  -webkit-text-size-adjust:100%;
  scrollbar-gutter:stable;   /* plassen til rullefeltet står alltid av, så
                                 innholdet ikke rykker sidelengs når det
                                 skrus av og på under bevegelsen */
}

body{
  margin:0;
  font-family:var(--mono);
  font-size:15px;
  line-height:1.7;
}

/* ---- Scenen ---- */
.stage{
  max-width:38em;
  margin:0 auto;
  padding:0 1.25rem 5rem;
  padding-top:calc(50vh - 9em);
  text-align:center;
  overflow:hidden;
  transition:padding-top .68s cubic-bezier(.19,.72,.22,1);
}
.stage.open{ padding-top:2.5rem }

/* Skinnen holder forsiden og teksten i samme kolonne.
   Når en tekst åpnes, flyttes hele kolonnen opp som ett stykke:
   forsiden går ut over kanten, teksten kommer opp i stedet. */
.rail{
  transition:transform .62s cubic-bezier(.5,.02,.3,1);
  will-change:transform;
}

/* ---- Tittelen ---- */
.masthead{ display:inline-block; text-align:left }

h1{
  font-size:21px;
  font-weight:600;
  letter-spacing:-.025em;
  line-height:1.35;
  margin:0;
}

.sub{
  font-size:14px;
  font-weight:400;
  color:var(--gra);
  margin:.55em 0 0;
}

.cursor{
  display:inline-block;
  width:.5em; height:.95em;
  background:var(--gra);
  vertical-align:-.12em;
  margin-left:.25em;
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0 } }

@media (min-width:560px){
  h1{ font-size:27px }
  .sub{ font-size:15px }
}

/* ---- Lenkerad ---- */
.links{
  margin:2.9em 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.9em 1.6em;
  font-size:13.5px;
}
.links a{
  color:var(--bla);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.55em;
  border-bottom:1px solid transparent;
}
.links a:visited{ color:var(--bla) }
@media (hover:hover){ .links a:hover{ border-bottom-color:var(--bla) } }
.links a:focus-visible{ outline:1px dotted var(--bla); outline-offset:3px }

.mark{ width:1.05em; height:1.05em; display:block; flex:none; fill:var(--bla) }

/* ---- Menyvalgene ---- */
.actions{
  margin:3.2em 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.8em 2.4em;
  font-size:15px;
}

.trigger{
  background:none;
  border:0;
  padding:0 0 0 1.8em;
  font:inherit;
  color:var(--blekk);
  cursor:pointer;
  position:relative;
}
.trigger::before{
  content:"\25B6";
  position:absolute;
  left:0;
  font-size:.78em;
  top:.2em;
  color:var(--bla);
  opacity:0;
  transition:opacity .12s;
}
.trigger[aria-expanded="true"]::before{ opacity:1 }
.trigger:focus-visible::before{ opacity:1 }
@media (hover:hover){ .trigger:hover::before{ opacity:1 } }
.trigger:focus-visible{ outline:1px dotted var(--blekk); outline-offset:4px }

/* ---- Panelene ---- */
.panel{
  display:none;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .5s .12s, transform .5s .12s;
  padding-top:3em;
  text-align:left;
}
.panel.showing{ display:block }
.panel.shown{ opacity:1; transform:none }

.panel p{ margin:0 0 1.1em; max-width:60ch }
.panel a{ color:var(--bla) }
.panel a:visited{ color:#551a8b }

hr{ border:0; border-top:1px solid var(--strek); margin:0 0 2.6em }

.pub{ margin:0 0 1.4em }
.pub .t{ margin:0 }
.pub .m{ margin:0; color:var(--gra); font-size:13px }

/* Knapp som ser ut som en lenke. Brukes til tekster som ligger her,
   fordi en ekte lenke fanges opp av enkelte appvisninger. */
.lenke{
  background:none;
  border:0;
  padding:0;
  font:inherit;
  color:var(--bla);
  text-decoration:underline;
  cursor:pointer;
  text-align:left;
}
.lenke:focus-visible{ outline:1px dotted var(--bla); outline-offset:2px }

/* ---- Leseren: teksten overtar siden ---- */
.reader{
  display:none;
  text-align:left;
  padding-top:2.5rem;
}
.reader.vises{ display:block }

.tilbake{
  background:none;
  border:0;
  padding:0;
  font:inherit;
  font-size:13.5px;
  color:var(--bla);
  cursor:pointer;
  margin:0 0 3em;
}
.tilbake:hover{ text-decoration:underline }

.tekst{ display:none }
.tekst.vises{ display:block }

.tekst h2:focus{ outline:none }
.tekst h2{
  font-size:20px;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.4;
  margin:0 0 .5em;
}
.tekst .kilde{
  color:var(--gra);
  font-size:13px;
  margin:0 0 2.6em;
}
.tekst p{ margin:0 0 1.2em; font-size:15.5px; line-height:1.85; max-width:34em }
.tekst .ingress{ font-weight:500 }

.tekst h3{
  font-size:15.5px;
  font-weight:600;
  margin:2.8em 0 1.1em;
  max-width:34em;
}

.tekst blockquote{
  margin:1.8em 0;
  padding-left:1.2em;
  border-left:2px solid var(--strek);
  color:var(--gra);
  max-width:34em;
}
.tekst blockquote p{ margin:0 }

.tekst sup{ font-size:.7em; vertical-align:super; line-height:0 }

.tekst .fot{
  margin-top:3em;
  padding-top:1.6em;
  border-top:1px solid var(--strek);
  max-width:34em;
}
.tekst .fot p{ font-size:13px; line-height:1.7; color:var(--gra); margin:0 0 .6em }
.tekst p:last-child{ margin-bottom:0 }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
}

/* ---- Enkelttekstsider (tekster/*.html) ---- */
.stage.enkelttekst{
  padding-top:3rem;
  text-align:left;
  overflow:visible;
}
.stage.enkelttekst .tilbake{
  display:inline-block;
  margin:0 0 3.5em;
  text-decoration:none;
}
.stage.enkelttekst .tekst{ display:block }