/* Courant — felles grunnlag.
   Alle flater lenker denne først, og legger sin egen fil etter. Hensikten er
   at forsiden og undersidene ikke skal drive fra hverandre når to økter
   arbeider parallelt.

   Endres en verdi her, endres den overalt. Legg sidespesifikke ting i sidens
   egen fil, ikke her. */

@font-face {
  font-family: "Fraunces";
  src: url("../assets/Fraunces.woff2") format("woff2-variations"),
       url("../assets/Fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* Kursiven lå i assets uten å være registrert, så <em> ble skråstilt av
   nettleseren i stedet for tegnet. Merkevarens eget ord står i kursiv. */
@font-face {
  font-family: "Fraunces";
  src: url("../assets/Fraunces-Italic.woff2") format("woff2-variations"),
       url("../assets/Fraunces-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Mørk halvdel: strømmen, før forståelsen */
  --natt:      #0B1210;
  --skog:      #16241D;
  --skog-lys:  #22342B;
  --dugg:      #A8B2AA;
  --lys-på-mørk:      #F4F6F2;
  --lys-på-mørk-svak: rgba(240,243,236,.86);

  /* Lys halvdel: feltjournalen */
  --papir:     #F2F0E9;
  --papir-lys: #FAF9F5;
  --blekk:     #14160F;
  --dis:       #666A61;   /* 4,85:1 mot papir. Ikke lysne uten å måle på nytt */
  --hårstrek:  #CFCCC2;

  /* Den ene aksenten. Opptrer der noe skal gjøres, ikke som pynt. */
  --segl:      #6E2436;
  --segl-lys:  #8E3247;
  /* Samme nyanse som --segl, hevet til den lyshet mørk skogbunn krever.
     3,49:1 mot --skog. Grafisk element, ikke tekst. Metningen holdes oppe
     slik at fargen fortsatt leses som burgunder og ikke som rosa. */
  --segl-på-mørk: #D13D61;

  --display: "Fraunces", "Iowan Old Style", Charter, Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --mykt: cubic-bezier(.22,.61,.36,1);
  --brekk: 52rem;   /* under denne: én kolonne */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papir);
  color: var(--blekk);
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: 1.125rem;
  line-height: 1.55;
}

:focus-visible { outline: 2px solid var(--segl-lys); outline-offset: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 1rem; top: -5rem; z-index: 90;
  background: var(--papir-lys); color: var(--blekk);
  padding: .8rem 1.1rem; min-height: 44px;
  display: inline-flex; align-items: center;
  font: 500 .9rem/1 var(--sans); text-decoration: none;
  transition: top .2s var(--mykt);
}
.skip:focus { top: 1rem; }

/* Etiketten som navngir en seksjon. Mono, aldri større enn dette. */
.merkelapp {
  font: 500 .7rem/1.4 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--dis);
}

/* Hårstrek i stedet for kort. Innhold ligger rett på flaten. */
.rad { padding: 1.1rem 0; border-top: 1px solid var(--hårstrek); }
.rad:last-child { border-bottom: 1px solid var(--hårstrek); }

/* Alt som kan trykkes er minst 44 px. Ingen unntak. */
.knapp {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .75rem 1.3rem;
  font: 500 .92rem/1 var(--sans); text-decoration: none; cursor: pointer;
  border: 1px solid var(--segl); background: transparent; color: var(--segl);
}
.knapp:hover { background: var(--segl); color: #FBF6F7; }
.knapp--fylt { background: var(--segl); color: #FBF6F7; }
.knapp--fylt:hover { background: var(--segl-lys); }

/* Arbeidsflatens egne elementer. Skjules helt i presentasjonsmodus. */
.arbeidslinje {
  position: sticky; top: 0; z-index: 80;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .4rem clamp(1.25rem, 4vw, 3.5rem);
  background: var(--blekk); color: #E9E9E2;
  font: 500 .68rem/1.4 var(--mono); letter-spacing: .04em;
}
.arbeidslinje button {
  font: inherit; color: inherit; background: transparent; cursor: pointer;
  border: 1px solid rgba(233,233,226,.4); padding: .3rem .6rem;
  min-height: 44px; min-width: 44px;
}
.arbeidslinje button[aria-pressed="true"] { background: #E9E9E2; color: var(--blekk); }

[data-modus="presentasjon"] .arbeidslinje,
[data-modus="presentasjon"] .kolofon { display: none; }

.feltid { display: none; }
[data-felter="vis"] .feltid {
  display: inline-block;
  font: 600 .64rem/1 var(--mono); letter-spacing: .06em;
  background: var(--segl); color: #FBF6F7;
  padding: .2rem .36rem; margin-right: .45rem; vertical-align: .18em;
}
[data-felter="vis"] [data-felt] { outline: 1px dashed rgba(110,36,54,.4); outline-offset: 5px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}