/* ==========================================================================
   SLOTTSFJELL ATELIER — stilark

   Alt utseende styres av verdiene i :root nedenfor: farger, skriftstørrelser,
   avstander, avrundinger og bevegelse. Resten av fila bruker bare disse
   verdiene, aldri egne tall. Skal du endre noe, endre det her, så følger
   hele nettsiden etter.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SKRIFTENE

   De lå før hos Google, hentet med en <link> i toppen av hver side. To ting
   var galt med det: lenka måtte lastes ferdig før nettleseren begynte å tegne
   sida, og Google fikk IP-adressa til hver eneste besøkende før de hadde valgt
   noe som helst. Nå ligger begge filene i mappa fonts/ hos oss.

   Begge er variable skrifter: én fil dekker alle vektene vi bruker. Utsnittet
   er «latin», som inneholder æ, ø og å.

   Bytter du skrift: legg woff2-fila i fonts/, endre navn og filnavn her, og
   endre --skrift eller --skrift-tittel nedenfor.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Playfair Display brukes til ett eneste sted: navnet øverst på forsida.
   Den er en klassisk antikva med stor forskjell på tykke og tynne streker,
   og det er den forskjellen som gjør at navnet bærer når det står stort.
   Fraunces, som er skrifta i alle andre overskrifter, er rundere og mykere,
   og blir ikke like tydelig i én linje med store bokstaver. */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/playfair-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {

  /* --- FARGER ---------------------------------------------------------- */

  /* HOVEDFARGE: babyblå. Bakgrunnen på hele sida. */
  --babyblaa:         #E4EFF7;  /* Grunnfarge. Bakgrunn på alle sider. */
  --babyblaa-dyp:     #D3E4F0;  /* Litt dypere babyblå. Brukes på annenhver seksjon. */
  --kort:             #F7FBFD;  /* Nesten hvit. Bakgrunn i kort og felt. */

  /* ANDREFARGE: marineblå. Bunnfeltet, overtitler, tall, «Atelier» i toppen. */
  --marine:           #1F3D63;
  --marine-mork:      #162C48;  /* Mørkere. Hover og trykk. */
  --marine-lys:       #B4C6DA;  /* Lys. Dempet tekst på marineblå bunn. */

  /* AKSENT: skogsgrønn. Knapper, streker, prikker, små detaljer. */
  --skog:             #2E5D3A;
  --skog-mork:        #285233;  /* Mørkere grønn. Knapper og liten tekst. */

  --tekst:            #2B2B2B;  /* Brødtekst og overskrifter. */
  --tekst-dempet:     #4F5B63;  /* Bildetekst, detaljer, mindre viktig tekst. */
  --tekst-lys:        #E4EFF7;  /* Tekst på marineblå bunn. */
  --tekst-svak:       #77848D;  /* Hjelpetekst inni felt. */

  --linje:            #C6D9E6;  /* Tynne skillelinjer og kantlinjer. */
  --linje-lys:        rgba(228, 239, 247, 0.22);  /* Skillelinjer på marineblå bunn. */

  /* Bilderammene. Dempet gull, som en klassisk rammelist. Gull mot blå vegg er
     den klassiske utstillingskombinasjonen.
     Lys og mørk brukes på hver sin side, så listen ser ut til å ha dybde. */
  --ramme:            #A8834E;
  --ramme-lys:        #C09B63;
  --ramme-mork:       #7E6238;

  --slor:             20, 26, 30;  /* Grunntonen i det mørke sløret over hero-bildet. */


  /* --- SKRIFT ---------------------------------------------------------- */
  /* Filene ligger i fonts/ og lastes av @font-face øverst i denne fila. */

  --skrift:           'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --skrift-tittel:    'Fraunces', Georgia, 'Times New Roman', serif;
  --skrift-ordmerke:  'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Tre vekter på hele siden. Ikke flere. */
  --vekt-vanlig:      400;
  --vekt-medium:      500;
  --vekt-halvfet:     600;

  /* Skriftstørrelser. Alt på siden bruker én av disse.
     clamp(minst, vokser med skjermen, størst) */
  --tekst-xs:         0.78rem;
  --tekst-s:          0.875rem;
  --tekst-m:          1rem;
  --tekst-l:          clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  --tekst-xl:         clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --tittel-xs:        1.25rem;
  --tittel-s:         clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem);
  --tittel-m:         clamp(1.75rem, 1.4rem + 1.6vw, 2.6rem);
  --tittel-l:         clamp(2.3rem, 1.7rem + 2.8vw, 3.8rem);
  /* Bare til navnet øverst på forsida.

     Toppen er 5.4rem og ikke mer. Ved 5.6rem er «SLOTTSFJELL ATELIER» 1065
     piksler bredt, og innholdet er 1064, så navnet brakk i to på store
     skjermer mens det sto på én linje på en mindre. Nå står det på én linje
     fra rundt 700 piksler og opp. På telefon brekker det i to, som det må,
     og det er greit: da står ordene under hverandre med vilje. */
  --tittel-xl:        clamp(1.9rem, 0.4rem + 6.4vw, 5.4rem);

  /* Tre linjeavstander. */
  --linje-tett:       1.15;   /* overskrifter */
  --linje-mid:        1.35;   /* sitat og store ingresser */
  --linje-luft:       1.65;   /* brødtekst */

  /* Sperring på store bokstaver. */
  --sperret:          0.14em;


  /* --- AVSTANDER ------------------------------------------------------- */
  /* Én trapp. Alle marger, luft og mellomrom henter herfra. */

  --rom-1:            0.25rem;
  --rom-2:            0.5rem;
  --rom-3:            0.75rem;
  --rom-4:            1rem;
  --rom-5:            1.5rem;
  --rom-6:            2.5rem;
  --rom-7:            4rem;
  --rom-8:            clamp(4rem, 3rem + 5vw, 7rem);  /* mellom seksjoner */

  --bredde:           1160px;                          /* maks innholdsbredde */
  --kant:             clamp(1.25rem, 4vw, 3rem);       /* luft mot skjermkanten */
  --topp-hoyde:       4.5rem;                          /* høyden på toppfeltet */
  --portrett:         5.5rem;                          /* lærerbildene */

  /* Bildestrømmen på forsida. Høyda styrer alt: bildene er 3:2, så bredda
     følger av den. Endrer du høyda, endre LYSBILDE_SIZES i byggsider.py
     til samme bredde, ellers henter nettleseren feil filstørrelse. */
  --strom-hoyde:      clamp(140px, 20vw, 240px);
  --strom-luft:       var(--rom-3);
  --kart-hoyde:       clamp(16rem, 40vw, 24rem);


  /* --- FORM ------------------------------------------------------------ */
  /* Tre avrundinger på hele siden. Ikke flere. */

  --rund-0:           0;
  --rund-m:           10px;
  --rund-pille:       999px;
  --rund-sirkel:      50%;

  --kant-tynn:        1px;
  --ramme-list:       7px;   /* bredden på rammelisten */
  --skygge:           0 16px 40px -28px rgba(31, 61, 99, 0.45);


  /* --- BEVEGELSE ------------------------------------------------------- */
  /* Én kurve og tre tempoer. Alt som beveger seg bruker disse. */

  --kurve:            cubic-bezier(0.22, 1, 0.36, 1);
  --fart-rask:        0.18s;
  --fart:             0.35s;
  --fart-rolig:       0.7s;

  --loft:             -3px;   /* hvor mye et kort løftes når man peker på det */

  /* Hvor lenge bildestrømmen bruker på én runde. Det er ikke farten direkte:
     én runde er hele raden, så tida må følge bredda for at farten skal føles
     lik på liten og stor skjerm. Sju bilder à 360 piksler pluss luft er rundt
     2600 piksler, og 47 s gir da omtrent 55 piksler i sekundet — nok til at
     den lever, lite nok til at den ikke stjeler blikket fra teksten. Se brekkpunktet
     nederst for telefon, der raden er smalere. */
  --strom-tid:        47s;
}


/* ==========================================================================
   GRUNNLAG
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--babyblaa);
  color: var(--tekst);
  font-family: var(--skrift);
  font-size: var(--tekst-m);
  font-weight: var(--vekt-vanlig);
  line-height: var(--linje-luft);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height: auto er ikke pynt. Bildene har width- og height-attributter i
   HTML-en, slik at nettleseren kan sette av riktig plass før bildet er lastet
   og sida ikke hopper. Uten denne linja tar den de tallene bokstavelig, og et
   galleribilde med height="1050" ble 1050 piksler høyt i en luke på 133. */
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--skrift-tittel);
  font-weight: var(--vekt-vanlig);
  line-height: var(--linje-tett);
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--tittel-l); }
h2 { font-size: var(--tittel-m); }
h3 { font-size: var(--tittel-s); }

/* Alle avsnitt får luft nedenfor, aldri ovenfor. Da blir avstanden mellom
   avsnitt lik overalt, uansett hva som står rundt. */
p { margin: 0 0 var(--rom-4); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

/* Tastaturfokus skal alltid være godt synlig. */
:focus-visible {
  outline: 3px solid var(--marine);
  outline-offset: 3px;
  border-radius: var(--rund-0);
}

/* Lenke rett til innholdet, for de som bruker tastatur eller skjermleser. */
.hopp-lenke {
  position: absolute;
  left: var(--kant);
  top: calc(var(--rom-8) * -1);
  z-index: 200;
  padding: var(--rom-3) var(--rom-5);
  background: var(--marine);
  color: var(--tekst-lys);
  border-radius: var(--rund-m);
  text-decoration: none;
  font-size: var(--tekst-s);
  transition: top var(--fart) var(--kurve);
}
.hopp-lenke:focus { top: var(--rom-4); }

/* Synlig bare for skjermlesere. */
.kun-skjermleser {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* <picture> er bare en beholder rundt bildet, som velger webp eller jpeg.
   Uten denne linja ville den selv blitt elementet i rutenettet eller
   flex-raden, og bildet havnet et hakk for dypt. */
picture { display: contents; }


/* --------------------------------------------------------------------------
   SEKSJONER SOM TONER INN

   Dette gjorde GSAP med ScrollTrigger før, 70 kilobyte hentet fra et fremmed
   nettsted for å flytte ting 28 piksler. Nå ser main.js etter elementene med
   en IntersectionObserver og setter klassen .er-synlig på dem.

   Merk rekkefølgen: startilstanden ligger bak .har-js, som main.js setter på
   <html> med én gang. Uten JavaScript får ingen elementer den klassen, og alt
   står synlig fra første stund. Innholdet skal aldri kunne bli usynlig fordi
   et skript ikke kjørte.
   -------------------------------------------------------------------------- */

.har-js [data-animer],
.har-js [data-animer-barn] > * {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity var(--fart-rolig) var(--kurve),
              transform var(--fart-rolig) var(--kurve);
  transition-delay: var(--forsinkelse, 0s);
}

.har-js [data-animer].er-synlig,
.har-js [data-animer-barn].er-synlig > * {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   BYGGEKLOSSER
   ========================================================================== */

.midt {
  width: 100%;
  max-width: var(--bredde);
  margin-inline: auto;
  padding-inline: var(--kant);
}

/* Ren tekst leses lettest i én smal spalte. Brukes på personvernsida.
   Samme bredde som .seksjon-topp, ellers står overskrifta og teksten under
   den med hver sin venstrekant. */
.midt.smal { max-width: 62ch; }

.seksjon { padding-block: var(--rom-8); }
.seksjon--dyp { background: var(--babyblaa-dyp); }
.seksjon--tett { padding-top: 0; }

/* Den lille teksten med store bokstaver over overskriftene. */
.overtittel {
  display: block;
  font-size: var(--tekst-xs);
  font-weight: var(--vekt-medium);
  letter-spacing: var(--sperret);
  text-transform: uppercase;
  color: var(--marine);
  margin-bottom: var(--rom-4);
}

/* --- Merkelapp ------------------------------------------------------------

   Den grønne pilla som sier «Gratis prøvedag». Den står to steder: i heroen,
   og øverst i priskortet. Én klasse, ikke to like, nettopp fordi de skal
   leses som samme tilbud gjentatt og ikke som to ulike ting.

   Grønn er allerede aksentfargen på knapper og prikker, så pilla legger
   ingen ny farge til sida. Lys tekst på --skog gir 6,56:1, godt over de
   4,5:1 AA krever. */
.merkelapp {
  display: inline-block;
  background: var(--skog);
  color: var(--tekst-lys);
  font-size: var(--tekst-xs);
  font-weight: var(--vekt-halvfet);
  letter-spacing: var(--sperret);
  text-transform: uppercase;
  padding: var(--rom-2) var(--rom-4);
  /* Sperringa legges bak siste bokstav også, og havner dermed inni høyre
     polstring. Trekkes den ikke fra, står ordet litt for langt til venstre
     i pilla. */
  padding-right: calc(var(--rom-4) - var(--sperret));
  border-radius: var(--rund-pille);
}

.ingress {
  font-size: var(--tekst-l);
  line-height: var(--linje-luft);
  color: var(--tekst-dempet);
  max-width: 58ch;
  margin-bottom: 0;
}

/* Overskrift og ingress hører sammen, så luften mellom dem er mindre enn
   luften ned til innholdet under. */
.seksjon-topp {
  max-width: 62ch;
  margin-bottom: var(--rom-7);
}
.seksjon-topp h1,
.seksjon-topp h2 { margin-bottom: var(--rom-5); }


/* --- Bilderamme -----------------------------------------------------------

   Én ramme, brukt tre steder: bildene i galleriet, bildet på om oss, og
   sitatet fra avisa. Med vilje IKKE på kort, priser eller lærere — da ville
   hele siden blitt rammer, og det er nettopp det som gjør en side rotete.

   Rammen er bygget slik en ekte ramme er: en list ytterst (border), et
   passepartout innenfor (padding + lys bakgrunn), og en hårtynn strek der
   passepartouten møter bildet.
--------------------------------------------------------------------------- */

.ramme {
  margin: 0;
  padding: var(--rom-4);
  background: var(--kort);
  border: var(--ramme-list) solid var(--ramme);
  /* Lys på oversiden, mørk på undersiden, så listen får dybde. */
  border-top-color: var(--ramme-lys);
  border-left-color: var(--ramme-lys);
  border-bottom-color: var(--ramme-mork);
  border-right-color: var(--ramme-mork);
  border-radius: var(--rund-0);
  box-shadow: var(--skygge);
  transition: transform var(--fart) var(--kurve);
}

/* Hårtynn strek rundt selve bildet, slik ekte innramming har. */
.ramme img {
  display: block;
  width: 100%;
  box-shadow: 0 0 0 var(--kant-tynn) rgba(31, 61, 99, 0.14);
}

.ramme__tekst {
  padding-top: var(--rom-4);
  font-size: var(--tekst-s);
  color: var(--tekst-dempet);
  text-align: center;
}

/* Litt smalere list på telefon, ellers spiser rammene opp bildet. */
@media (max-width: 559px) {
  .ramme { padding: var(--rom-3); border-width: 5px; }
}


/* --- Knapper -------------------------------------------------------------- */

.knapp {
  display: inline-flex;
  align-items: center;
  gap: var(--rom-2);
  padding: var(--rom-3) var(--rom-6);
  border: var(--kant-tynn) solid transparent;
  border-radius: var(--rund-pille);
  font-family: var(--skrift);
  font-size: var(--tekst-s);
  font-weight: var(--vekt-medium);
  line-height: var(--linje-luft);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--fart) var(--kurve),
              background-color var(--fart) var(--kurve),
              border-color var(--fart) var(--kurve);
}

.knapp--fylt {
  background: var(--skog-mork);
  color: #FFFFFF;
}
.knapp--fylt:hover { background: var(--skog); transform: translateY(var(--loft)); }

.knapp--tom {
  background: transparent;
  border-color: var(--linje);
  color: var(--tekst);
}
.knapp--tom:hover { border-color: var(--marine); transform: translateY(var(--loft)); }

/* Her sto .knapp--lys, en halvgjennomsiktig hvit knapp til bruk oppå
   hero-fotoet. Den hadde ingen andre brukssteder, og da fotoet gikk, gikk
   den med. Den andre knappen i hero-en er nå .knapp--tom, som er den samme
   knappen for lys bakgrunn. */

.knapp-rad {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rom-4);
  margin-top: var(--rom-6);
}


/* ==========================================================================
   TOPPEN — logo og meny
   ========================================================================== */

.topp {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  border-bottom: var(--kant-tynn) solid transparent;
  transition: background-color var(--fart) var(--kurve),
              border-color var(--fart) var(--kurve);
}

/* Når man har rullet, eller på undersidene, får toppen bakgrunn. */
.topp--fast,
.topp.er-rullet {
  background: rgba(228, 239, 247, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--linje);
}

.topp__innhold {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rom-5);
  min-height: var(--topp-hoyde);
}

.merke {
  display: inline-flex;
  align-items: center;
  gap: var(--rom-3);
  font-family: var(--skrift-tittel);
  font-size: var(--tittel-xs);
  font-weight: var(--vekt-vanlig);
  line-height: var(--linje-tett);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

/* Figuren med flammen. Høyden styrer alt; bredden følger av seg selv. */
.merke__logo {
  height: 2.4rem;
  width: auto;
  flex: 0 0 auto;
}
.merke__del2 { color: var(--marine); }

/* Over hero-bildet ligger toppen rett på fotoet, uten bakgrunn.
   Hero-bildet har lys himmel øverst, så teksten er mørk der. Bytter du til
   et hero-bilde som er MØRKT i toppen, må disse fire linjene settes til
   hvitt igjen, ellers forsvinner menyen. */
.topp:not(.er-rullet):not(.topp--fast) .merke { color: var(--tekst); }
.topp:not(.er-rullet):not(.topp--fast) .merke__del2 { color: var(--marine); }
.topp:not(.er-rullet):not(.topp--fast) .meny__lenke { color: var(--tekst); }
.topp:not(.er-rullet):not(.topp--fast) .meny-knapp { color: var(--tekst); border-color: rgba(43, 43, 43, 0.35); }

.meny { display: none; }

.meny__liste {
  display: flex;
  align-items: center;
  gap: var(--rom-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.meny__lenke {
  position: relative;
  font-size: var(--tekst-s);
  text-decoration: none;
  padding-block: var(--rom-1);
  transition: color var(--fart) var(--kurve);
}

/* Tynn strek som gror fram under lenka. */
.meny__lenke::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: var(--kant-tynn);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--fart) var(--kurve);
}
.meny__lenke:hover::after,
.meny__lenke[aria-current='page']::after { transform: scaleX(1); }

.meny-knapp {
  display: inline-flex;
  align-items: center;
  gap: var(--rom-2);
  background: transparent;
  border: var(--kant-tynn) solid var(--linje);
  border-radius: var(--rund-pille);
  padding: var(--rom-2) var(--rom-4);
  font-family: var(--skrift);
  font-size: var(--tekst-s);
  color: var(--tekst);
  cursor: pointer;
}

.meny-knapp__strek {
  display: block;
  width: 1em; height: 1.5px;
  background: currentColor;
  box-shadow: 0 5px currentColor;
}

/* Menyen som glir ned på mobil. */
.mobilmeny {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--babyblaa);
  padding: calc(var(--topp-hoyde) + var(--rom-5)) var(--kant) var(--rom-7);
  display: flex;
  flex-direction: column;
  gap: var(--rom-4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  /* visibility ventes ut til slutten når menyen lukkes, så den rekker å tone
     ut, men slås på med én gang når den åpnes, slik at tastaturfokus kan
     flyttes inn i den umiddelbart. */
  transition: opacity var(--fart) var(--kurve),
              transform var(--fart) var(--kurve),
              visibility 0s linear var(--fart);
}
.mobilmeny.er-apen {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--fart) var(--kurve),
              transform var(--fart) var(--kurve),
              visibility 0s linear 0s;
}

.mobilmeny__lenke {
  font-family: var(--skrift-tittel);
  font-size: var(--tittel-s);
  text-decoration: none;
  padding-block: var(--rom-4);
  border-bottom: var(--kant-tynn) solid var(--linje);
}
.mobilmeny__lenke[aria-current='page'] { color: var(--marine); }

@media (min-width: 800px) {
  .meny { display: block; }
  .meny-knapp { display: none; }
  .mobilmeny { display: none; }
}


/* ==========================================================================
   HERO — navnet, og lysbildene fra verkstedet under det

   Her lå det før et foto som fylte hele skjermen, med hvit tekst oppå. Det
   krevde et mørkt slør over hele bildet, en ekstra skygge bak selve
   tekstblokka, en parallakse etter musepekeren og en uttoning ved rulling,
   og kontrasten måtte måles med et skript fordi ingen fargekode kan si hva
   som står bak hvit tekst på et fotografi.

   Nå står teksten på sidas egen bakgrunn. Alt det andre kunne fjernes.
   ========================================================================== */

.hero {
  /* Toppfeltet ligger fast over sida, så det må gjøres plass til det. */
  padding-top: calc(var(--topp-hoyde) + var(--rom-6));
  padding-bottom: var(--rom-8);
  text-align: center;
  background: var(--babyblaa);
}

/* Navnet. Store bokstaver med sperring, som på en utstillingsplakat.
   Teksten står som «Slottsfjell Atelier» i content.js og gjøres stor her,
   ikke i innholdet: da leser en skjermleser navnet som et navn, ikke som
   sytten enkeltbokstaver. */
.hero__ordmerke {
  font-family: var(--skrift-ordmerke);
  font-size: var(--tittel-xl);
  font-weight: var(--vekt-medium);
  line-height: var(--linje-tett);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--marine);
  /* Sperringa legges bak siste bokstav også. Uten dette står ordet et par
     piksler til venstre for midten. */
  text-indent: 0.06em;
  margin-bottom: var(--rom-4);
}

.hero__tagline {
  font-size: var(--tekst-s);
  font-weight: var(--vekt-medium);
  letter-spacing: var(--sperret);
  text-transform: uppercase;
  color: var(--tekst-dempet);
  margin-bottom: var(--rom-6);
}

/* Merkelappen står mellom taglinen og ingressen. Taglinen har allerede
   --rom-6 under seg, så denne trenger bare luft nedover. */
.hero__merke { margin: 0 0 var(--rom-2); }

.hero__ingress {
  max-width: 54ch;
  margin: var(--rom-6) auto 0;
  font-size: var(--tekst-l);
  line-height: var(--linje-mid);
  color: var(--tekst-dempet);
}

.hero .knapp-rad { justify-content: center; }


/* ==========================================================================
   BILDESTRØMMEN — bildene som driver forbi under hero-teksten

   Én rad bilder som sklir sakte mot venstre og aldri stopper. Det er ingen
   piler og ingen prikker: dette er ikke noe man skal betjene, det er noe som
   foregår bak teksten.

   Slik går den rundt uten hopp: raden ligger i HTML-en to ganger, og sporet
   flyttes fra 0 til -50 %. Ved -50 % står kopi to nøyaktig der kopi én stod,
   og da kan animasjonen begynne på nytt uten at noe flytter seg. Derfor må
   de to radene være helt like — tar du bort et bilde fra den ene, må det
   bort fra den andre, ellers rykker det én gang i runden.
   ========================================================================== */

.bildestrom {
  /* Full bredde, uavhengig av .midt. Den skal gå ut av skjermen i begge
     ender, så det ser ut som den fortsetter forbi kanten. */
  overflow: hidden;
  margin-top: var(--rom-7);
  /* Ikke la strømmen ta imot klikk eller markering. Den er til pynt. */
  user-select: none;
}

.bildestrom__spor {
  display: flex;
  width: max-content;
  animation: bildestrom-driv var(--strom-tid) linear infinite;
}

.bildestrom__rad {
  display: flex;
  gap: var(--strom-luft);
  padding: 0 0 0 var(--strom-luft);
  margin: 0;
  list-style: none;
}

.bildestrom__ledd { flex: none; }

.bildestrom__bilde {
  display: block;
  height: var(--strom-hoyde);
  /* 3:2, samme utsnitt som bygg-verkstedbilder.py beskjærer til. Bredda
     følger av høyda, så hele raden er like høy uansett bilde. */
  aspect-ratio: 3 / 2;
  width: auto;
  object-fit: cover;
  border-radius: var(--rund-m);
  background: var(--babyblaa-dyp);
}

@keyframes bildestrom-driv {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Står pekeren over strømmen, bremser den ned til 40 % fart og tar seg opp
   igjen når pekeren går. Det skjer i main.js, ikke her: å bremse med en
   lengre animation-duration får raden til å hoppe, og forklaringa står ved
   bildestromFart() der. */

/* Har man bedt om mindre bevegelse, står strømmen helt stille. Da er den en
   vanlig rad bilder, og de sju alt-tekstene står der som før. */
@media (prefers-reduced-motion: reduce) {
  .bildestrom__spor { animation: none; }
}

/* Farten skal kjennes lik på alle skjermer, og det krever at tida følger
   bredda: én runde er hele raden, så en kort rad på kort tid er samme fart
   som en lang rad på lang tid.

   Raden er sju bilder brede, og hvert bilde er halvannen gang så bredt som
   --strom-hoyde, pluss --strom-luft mellom dem:

     telefon  (under 700px):  7 × (210 + 12) = 1554px  ÷ 28s = 56 px/s
     mellom   (700–1199px):   7 × (240 + 12) = 1764px  ÷ 33s = 53 px/s
     skjerm   (1200px og opp) 7 × (360 + 12) = 2604px  ÷ 47s = 55 px/s

   Uten det midterste trinnet krøp strømmen av gårde i 30 px/s på nettbrett,
   fordi høyda der er nede i 240 mens tida fortsatt stod i 60s. */
@media (max-width: 699px) {
  :root { --strom-tid: 28s; }
}

@media (min-width: 700px) and (max-width: 1199px) {
  :root { --strom-tid: 33s; }
}


/* ==========================================================================
   KORT — brukes til «hva vi tilbyr»
   ========================================================================== */

.kort-rutenett {
  display: grid;
  gap: var(--rom-5);
  grid-template-columns: 1fr;
}

.kort {
  background: var(--kort);
  border: var(--kant-tynn) solid var(--linje);
  border-radius: var(--rund-m);
  padding: var(--rom-6);
  transition: transform var(--fart) var(--kurve),
              border-color var(--fart) var(--kurve);
}
.kort:hover { transform: translateY(var(--loft)); border-color: var(--marine); }

/* Kort strek i terrakotta over hver korttittel. */
.kort__strek {
  display: block;
  width: var(--rom-6);
  height: 2px;
  background: var(--skog);
  margin-bottom: var(--rom-5);
}

.kort h3 { margin-bottom: var(--rom-4); }
.kort__tekst { color: var(--tekst-dempet); }

@media (min-width: 760px) {
  .kort-rutenett { grid-template-columns: repeat(3, 1fr); }
}


/* ==========================================================================
   KURS OG PRISER
   ========================================================================== */

.kurs-oppsett {
  display: grid;
  gap: var(--rom-7);
  grid-template-columns: 1fr;
  align-items: start;
}

.fakta + .fakta { margin-top: var(--rom-6); }

/* Friskus-lenka. Eneste lenka i venstrekolonnen, så den må skille seg fra
   brødteksten rundt. Understrekinga står der hele tida: en lenke som bare
   viser seg når man peker på den, finner ingen som ikke allerede leter. */
.fakta__lenke {
  margin-top: var(--rom-3);
  font-size: var(--tekst-s);
}
.fakta__lenke a {
  color: var(--skog-mork);
  font-weight: var(--vekt-medium);
  text-decoration: underline;
  text-underline-offset: var(--kant-tynn);
  transition: color var(--fart-rask) var(--kurve);
}
.fakta__lenke a:hover { color: var(--marine); }

.fakta__tittel {
  font-family: var(--skrift);
  font-size: var(--tekst-xs);
  font-weight: var(--vekt-halvfet);
  line-height: var(--linje-luft);
  letter-spacing: var(--sperret);
  text-transform: uppercase;
  color: var(--tekst-dempet);
  margin: 0 0 var(--rom-4);
}

.punktliste { list-style: none; margin: 0; padding: 0; }

.punktliste li {
  position: relative;
  padding-left: var(--rom-5);
  padding-block: var(--rom-2);
}

/* Liten terrakotta-prikk i stedet for vanlig kulepunkt. */
.punktliste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--rom-2) + 0.55em);
  width: 6px; height: 6px;
  border-radius: var(--rund-sirkel);
  background: var(--skog);
}

.tidliste { list-style: none; margin: 0; padding: 0; }
.tidliste li {
  padding-block: var(--rom-3);
  border-bottom: var(--kant-tynn) solid var(--linje);
  font-variant-numeric: tabular-nums;
}
.tidliste li:last-child { border-bottom: 0; }

/* --- De to semestrene --- */

.semesterliste { list-style: none; margin: 0; padding: 0; }

.semester {
  display: grid;
  gap: var(--rom-1);
  padding-block: var(--rom-4);
  border-bottom: var(--kant-tynn) solid var(--linje);
}
.semester:last-child { border-bottom: 0; }

.semester__navn { font-weight: var(--vekt-medium); }
.semester__periode { color: var(--tekst-dempet); }
.semester__maneder {
  font-size: var(--tekst-s);
  color: var(--tekst-dempet);
}

/* --- Prispanelet --- */

.priskort {
  display: block;
  background: var(--kort);
  border: var(--kant-tynn) solid var(--linje);
  border-radius: var(--rund-m);
  padding: var(--rom-6);
  box-shadow: var(--skygge);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--fart) var(--kurve),
              transform var(--fart) var(--kurve);
}
.priskort:hover {
  border-color: var(--marine);
  transform: translateY(var(--loft));
}

.priskort__topp { margin-bottom: var(--rom-5); }

/* Merkelappen står under månedsprisen, ikke over overskrifta «Priser».
   Rekkefølgen er poenget: man leser prisen, og svaret på den står rett
   under. */
.priskort__provedag { margin: var(--rom-4) 0 0; }
.priskort__undertittel {
  font-size: var(--tekst-s);
  color: var(--tekst-dempet);
  margin: var(--rom-1) 0 0;
}

.prisliste { list-style: none; margin: 0; padding: 0; }

.prisrad {
  padding-block: var(--rom-5);
  border-top: var(--kant-tynn) solid var(--linje);
}

.prisrad__topp {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rom-3);
}

.prisrad__navn { font-weight: var(--vekt-medium); }

/* Hvor mye rimeligere dette nivået er enn grunnprisen. */
.prisrad__avslag {
  flex: 0 0 auto;
  font-size: var(--tekst-xs);
  font-weight: var(--vekt-medium);
  letter-spacing: 0.04em;
  color: var(--skog-mork);
  white-space: nowrap;
}

/* Månedsprisen. Til opplysning — det er semesterprisen man betaler. */
.prisrad__maned {
  font-size: var(--tekst-s);
  color: var(--tekst-dempet);
  margin: var(--rom-1) 0 var(--rom-3);
}

/* Totalprisen for hvert semester. */
.prisrad__semestre { margin: 0; }

.prisrad__semestre > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rom-3);
  padding-block: var(--rom-1);
}

.prisrad__semestre dt {
  font-size: var(--tekst-s);
  color: var(--tekst-dempet);
}

.prisrad__semestre dd {
  margin: 0;
  font-family: var(--skrift-tittel);
  font-size: var(--tittel-xs);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Den ene raden som er trukket fram får marineblå tall. */
.prisrad--fremhevet .prisrad__semestre dd { color: var(--marine); }

.priskort__notis {
  font-size: var(--tekst-s);
  color: var(--tekst-dempet);
  margin: var(--rom-5) 0 0;
  padding-top: var(--rom-5);
  border-top: var(--kant-tynn) solid var(--linje);
}

@media (min-width: 900px) {
  .kurs-oppsett { grid-template-columns: 1fr 400px; gap: var(--rom-8); }
}


/* ==========================================================================
   GALLERI
   ========================================================================== */

.galleri {
  display: grid;
  gap: var(--rom-4);
  grid-template-columns: repeat(2, 1fr);
}

/* Bildene i galleriet henger i ramme. Løftes litt når man peker på dem,
   som når man bøyer seg fram mot et bilde på en vegg. */
.galleri__figur img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.galleri__figur:hover { transform: translateY(var(--loft)); }

@media (min-width: 760px) {
  .galleri { grid-template-columns: repeat(3, 1fr); gap: var(--rom-5); }
}


/* ==========================================================================
   AVSLUTNING — siste oppfordring før bunnen
   ========================================================================== */

.avslutning {
  text-align: center;
  padding-block: var(--rom-8);
  background: var(--babyblaa-dyp);
}
.avslutning h2 { margin-bottom: var(--rom-5); }
.avslutning p {
  margin-inline: auto;
  max-width: 46ch;
  color: var(--tekst-dempet);
}
.avslutning .knapp-rad { justify-content: center; }


/* ==========================================================================
   UNDERSIDER — felles topp
   ========================================================================== */

.sidetopp {
  padding-top: calc(var(--topp-hoyde) + var(--rom-8));
  padding-bottom: var(--rom-7);
}
.sidetopp h1 { margin-bottom: var(--rom-5); }

/* Teksten står i én spalte med lesbar bredde. Bildet ligger under, i
   bredden, i ramme. Da slipper vi å beskjære et liggende foto til en høy
   spalte, som aldri ble bra. */
.tekstblokk { max-width: 62ch; }
.tekstblokk + .tekstblokk { margin-top: var(--rom-7); }
.tekstblokk h2 { margin-bottom: var(--rom-5); }
.tekstblokk p { color: var(--tekst-dempet); }


/* ==========================================================================
   LÆRERE
   ========================================================================== */

.laerere {
  display: grid;
  gap: var(--rom-5);
  grid-template-columns: 1fr;
}

.laerer {
  display: flex;
  gap: var(--rom-5);
  background: var(--kort);
  border: var(--kant-tynn) solid var(--linje);
  border-radius: var(--rund-m);
  padding: var(--rom-5);
  align-items: flex-start;
}

.laerer__bilde,
.laerer__initial {
  flex: 0 0 var(--portrett);
  width: var(--portrett);
  height: var(--portrett);
  border-radius: var(--rund-sirkel);
  background: var(--marine);
}

.laerer__bilde { object-fit: cover; }

/* Vises når det ikke finnes portrettbilde ennå. */
.laerer__initial {
  display: grid;
  place-items: center;
  color: var(--tekst-lys);
  font-family: var(--skrift-tittel);
  font-size: var(--tittel-xs);
  letter-spacing: 0.02em;
}

.laerer__rolle {
  font-size: var(--tekst-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--skog-mork);
  margin: var(--rom-1) 0 var(--rom-4);
}
.laerer__bio { color: var(--tekst-dempet); font-size: var(--tekst-s); }

@media (min-width: 760px) {
  .laerere { grid-template-columns: repeat(2, 1fr); }
}


/* --- Sitatet fra avisa --- */

.omtale { text-align: center; }
.omtale h2 { margin-bottom: var(--rom-6); }

/* Sitatet henger i ramme, som en plakett ved siden av et bilde. */
.omtale__ramme {
  max-width: 34rem;
  margin-inline: auto;
  padding: var(--rom-7) var(--rom-6);
}

.omtale__sitat {
  font-family: var(--skrift-tittel);
  font-size: var(--tittel-m);
  line-height: var(--linje-mid);
  margin: 0;
  text-wrap: balance;
}

/* Kilden under sitatet. Den skal leses som en byline, ikke som en oppfordring
   om å trykke, så den er liten og dempet og får strek først når du peker på
   den. Saken ligger bak betalingsmur — en tydelig knapp ville sendt folk rett
   i den. Dempet tekst på --babyblaa-dyp er 5.36:1, som er sida sitt dårligste
   par etter at dette kom til. Over 4.5:1, så det står. */
.omtale__kilde {
  margin: var(--rom-4) 0 0;
  font-size: var(--tekst-s);
  color: var(--tekst-dempet);
}

.omtale__kilde a {
  color: inherit;
  text-decoration: none;
}

.omtale__kilde a:hover,
.omtale__kilde a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}


/* ==========================================================================
   KONTAKT
   ========================================================================== */

.kontakt-oppsett {
  display: grid;
  gap: var(--rom-7);
  grid-template-columns: 1fr;
  align-items: start;
}

/* --- Kopier e-post og telefon --- */

.direkte { display: grid; gap: var(--rom-4); }

.kopirad {
  display: grid;
  gap: var(--rom-2);
  padding: var(--rom-5) var(--rom-6);
  background: var(--kort);
  border: var(--kant-tynn) solid var(--linje);
  border-radius: var(--rund-m);
  transition: border-color var(--fart) var(--kurve);
}
.kopirad:hover { border-color: var(--marine); }

.kopirad__etikett {
  font-size: var(--tekst-xs);
  font-weight: var(--vekt-medium);
  letter-spacing: var(--sperret);
  text-transform: uppercase;
  color: var(--tekst-dempet);
}

/* Selve verdien. Stor, fordi det er den folk skal lese og kopiere. */
.kopiknapp {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--skrift-tittel);
  font-size: var(--tekst-xl);
  line-height: var(--linje-mid);
  color: var(--tekst);
  text-align: left;
  word-break: break-word;
  cursor: copy;
  transition: color var(--fart) var(--kurve);
}
.kopiknapp:hover { color: var(--marine); }
.kopiknapp.er-kopiert { color: var(--marine); }

.kopirad__lenke {
  justify-self: start;
  font-size: var(--tekst-s);
  color: var(--marine);
  text-decoration: none;
  border-bottom: var(--kant-tynn) solid transparent;
  transition: border-color var(--fart) var(--kurve);
}
.kopirad__lenke:hover { border-bottom-color: currentColor; }

/* Bekreftelsen «Kopiert» som toner inn. */
.kopimelding {
  font-size: var(--tekst-s);
  color: var(--marine);
  min-height: 1.4em;
  margin: var(--rom-4) 0 0;
}

/* Boble som følger etter musepekeren.

   Pekeren blir stående som den er. Boblen ligger midt under pekeren, men
   henger etter med en liten forsinkelse, så den i praksis ligger like bak
   pekeren i den retningen man beveger seg.
   Brukes over e-post, telefon og prislista. */
.folgeboble {
  position: fixed;
  top: 0; left: 0;
  z-index: 300;
  pointer-events: none;
  padding: var(--rom-2) var(--rom-4);
  background: var(--marine);
  color: var(--tekst-lys);
  border-radius: var(--rund-pille);
  font-family: var(--skrift);
  font-size: var(--tekst-s);
  font-weight: var(--vekt-medium);
  line-height: var(--linje-tett);
  white-space: nowrap;
  box-shadow: var(--skygge);
  opacity: 0;
  transform: translate3d(var(--boble-x, 0), var(--boble-y, 0), 0)
             translate(-50%, -50%) scale(0.85);
  transition: opacity var(--fart-rask) var(--kurve),
              scale var(--fart-rask) var(--kurve);
}
.folgeboble.er-synlig {
  opacity: 1;
  transform: translate3d(var(--boble-x, 0), var(--boble-y, 0), 0)
             translate(-50%, -50%) scale(1);
}

/* --- Adresse og kart --- */

.adressekort {
  background: var(--kort);
  border: var(--kant-tynn) solid var(--linje);
  border-radius: var(--rund-m);
  padding: var(--rom-6);
}
.adressekort h3 { margin-bottom: var(--rom-4); }
.adressekort address {
  font-style: normal;
  color: var(--tekst-dempet);
  margin-bottom: var(--rom-5);
}

/* Bilde av inngangen, så folk kjenner igjen døra. Også i ramme. */
.inngang { margin-top: var(--rom-7); }
.inngang img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.kart {
  margin-top: var(--rom-7);
  border: var(--kant-tynn) solid var(--linje);
  border-radius: var(--rund-m);
  overflow: hidden;
  line-height: 0;
  /* Rolig flate mens kartet lastes, så det ikke blir et hvitt hull. */
  background: var(--babyblaa-dyp);
  min-height: var(--kart-hoyde);
}
.kart iframe {
  display: block;
  width: 100%;
  height: var(--kart-hoyde);
  border: 0;
}

/* Før noen har trykket «Vis kart» står det bare en rolig flate her, med
   knappen midt på. Kartet er en ramme fra Google, og lastet det med én gang,
   fikk Google IP-adressa til hver besøkende uten at de hadde valgt det. */
.kart--tom {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--rom-4);
  padding: var(--rom-7) var(--rom-6);
  line-height: var(--linje-mid);
  text-align: center;
}

.kart__notis {
  max-width: 34ch;
  margin: 0;
  font-size: var(--tekst-s);
  color: var(--tekst-dempet);
}

@media (min-width: 900px) {
  .kontakt-oppsett { grid-template-columns: 1fr 380px; gap: var(--rom-8); }
}


/* ==========================================================================
   BUNNEN — det marineblå feltet
   ========================================================================== */

.bunn {
  background: var(--marine);
  color: var(--tekst-lys);
  padding-block: var(--rom-7) var(--rom-5);
}

.bunn__rutenett {
  display: grid;
  gap: var(--rom-6);
  grid-template-columns: 1fr;
}

.bunn__logo {
  height: 4rem;
  width: auto;
  margin-bottom: var(--rom-4);
}

.bunn__merke {
  font-family: var(--skrift-tittel);
  font-size: var(--tittel-xs);
  line-height: var(--linje-tett);
  margin-bottom: var(--rom-1);
}
.bunn__slagord { font-size: var(--tekst-s); color: var(--marine-lys); }

.bunn__tittel {
  font-family: var(--skrift);
  font-size: var(--tekst-xs);
  font-weight: var(--vekt-halvfet);
  line-height: var(--linje-luft);
  letter-spacing: var(--sperret);
  text-transform: uppercase;
  color: var(--marine-lys);
  margin: 0 0 var(--rom-4);
}

.bunn ul { list-style: none; margin: 0; padding: 0; }
.bunn li { padding-block: var(--rom-1); font-size: var(--tekst-s); }

.bunn a {
  color: var(--tekst-lys);
  text-decoration: none;
  border-bottom: var(--kant-tynn) solid transparent;
  transition: border-color var(--fart) var(--kurve);
}
.bunn a:hover { border-bottom-color: currentColor; }

.bunn :focus-visible { outline-color: var(--tekst-lys); }

.bunn__strek {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rom-2) var(--rom-5);
  align-items: baseline;
  justify-content: space-between;
  margin: var(--rom-7) 0 0;
  padding-top: var(--rom-5);
  border-top: var(--kant-tynn) solid var(--linje-lys);
  font-size: var(--tekst-xs);
  color: var(--marine-lys);
}

.bunn__personvern { color: var(--marine-lys); }

@media (min-width: 760px) {
  .bunn__rutenett { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}


/* ==========================================================================
   MINDRE BEVEGELSE
   Noen har slått på «reduser bevegelse» i systeminnstillingene sine.
   Da skrur vi av alt som beveger seg.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .kort:hover,
  .knapp:hover { transform: none; }
  .galleri__figur:hover img { transform: none; }
}