/* Jost, SIL Open Font License 1.1 — /lisens/jost-OFL.txt.
   164 er ordmerkets vekt, kalibrert mot originalen: stammen er 3,440 % av
   versalhøyden mot originalens 3,448 %. Den fila røres ikke.
   400 er meny og linja under ordmerket — 164 er for tynn i småtekst. */
@font-face {
  font-family: Jost;
  src: url(/jost-164.woff2) format('woff2');
  font-weight: 164;
  font-display: block;
  unicode-range: U+0020, U+0041-0052, U+0061-0072;
}
@font-face {
  font-family: Jost;
  src: url(/jost-400.woff2) format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* Registrerte variabler kan interpoleres. Uten @property kan de ikke
   animeres, og da står pølen stille på midten — sida er fortsatt hel. */
@property --x     { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --y     { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --kulor { syntax: '<angle>';      inherits: true; initial-value: 210deg; }

:root {
  --skrift: #cacaca;
  --sperring: 0.5348em;
  --ordmellomrom: -0.1831em;
}

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  background: #000;
  color: var(--skrift);
  font-family: Jost, Futura, "Century Gothic", "Avenir Next", Avenir,
               "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Tre rader: tomrom, ordmerket, meny. Ytterradene er like store, så
     ordmerket står i den optiske midten. Med «auto 1fr auto» og ingen
     toppnavigasjon lå det halve menyhøyden for høyt. */
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  overflow-x: hidden;
}

/* z-index er 0 og ikke negativt med vilje: body har selv background #000,
   og body skaper ingen stacking context her. Et pseudoelement med negativ
   z-index males da FØR body sin egen bakgrunn og blir usynlig. Skalaen er
   pøl 0, korn 1, ordmerket 2, menyen 3.

   Lysheten har tak på 0.38. Det er ikke en smaksverdi: ved 0.45 falt
   kontrasten mot ordmerkets #cacaca til 3,62:1 i den teale enden av
   fargebåndet, altså under WCAG AA. Ved 0.38 er verste tilfelle 4,86:1.
   Legibiliteten ligger i modellen, ikke i en vignett lagt oppå. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle 55vmax at var(--x) var(--y),
      oklch(0.38 0.18 var(--kulor)) 0%,
      oklch(0.16 0.07 var(--kulor)) 45%,
      #000 78%);
  animation: drift 38s ease-in-out infinite alternate;
}

/* Driften slutter for godt ved første pekerinngang. En drift som tar over
   igjen etter en pause, føles som om sida rykker til seg kontrollen. */
html.peker body::before { animation: none; }

@keyframes drift {
  0%   { --x: 28%; --y: 32%; --kulor: 200deg; }
  50%  { --x: 71%; --y: 57%; --kulor: 268deg; }
  100% { --x: 38%; --y: 73%; --kulor: 322deg; }
}

/* Kornet. feTurbulence som data-URI — ingenting hentes utenfra. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.15;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* Midtraden. .midt stabler ordmerket og linja under som én enhet — som to
   frittstående barn ville de havnet i samme celle og lagt seg oppå hverandre. */
.midt, .ordmerke { grid-row: 2; align-self: center; }
.midt { display: grid; justify-items: center; gap: 1.9rem; }

h1, .ordmerke {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: clamp(1.05rem, 1.4385vw, 3.4rem);
  font-weight: 164;
  text-transform: uppercase;
  letter-spacing: var(--sperring);
  word-spacing: var(--ordmellomrom);
  /* Sperringen legges også etter siste bokstav og gjør elementet for bredt. */
  margin-right: calc(var(--sperring) * -1);
  line-height: 1;
  white-space: nowrap;
}

/* Raden festes eksplisitt, ikke av rekkefølgen. Blir den plassert implisitt,
   havner menyen rett under ordmerket i stedet for nederst på skjermen. */
.meny {
  grid-row: 3;
  align-self: end;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
  padding: 0 1.5rem 3.5rem;
  z-index: 3;
}

.meny a {
  color: var(--skrift);
  text-decoration: none;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-bottom: 0.35em;
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s, opacity 0.4s;
  opacity: 0.75;
}
.meny a:hover, .meny a:focus-visible {
  border-bottom-color: currentColor;
  opacity: 1;
}

/* Linja under ordmerket. Samme typografi som en menylenke, men den er ikke
   en lenke — den skal ikke se ut som noe man kan trykke på. */
.venter {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
}

@media (max-width: 800px) {
  .midt   { gap: 1.4rem; }
  .meny   { padding-bottom: 2rem; gap: 1.25rem; }
  .meny a, .venter { font-size: 0.75rem; }
}