/* ==== stil.css ==== */
/* Kystloggen — presentasjonen. VÅR, ikke hentet.
 *
 * Dette er hele stilarket. Fram til 22.09.2026 lå det ved siden av
 * `maler/tokens.css` — et utdrag av Digdirs designsystem, hentet og
 * versjonert — og `nettsted.skriv_stil()` satte de to sammen til én
 * `/stil.css`.
 *
 * ## HVORFOR tokens.css ER BORTE (22.09.2026)
 *
 * Fila argumenterte for seg selv med en setning som nå felte den:
 *
 *     «En fil som bærer 32 ubrukte fargevariabler ville påstått at vi
 *      bruker Digdirs palett. Det gjør vi ikke lenger, og da skal fila
 *      ikke se ut som om vi gjør det.»
 *
 * Fargene ble tatt ut 20.09. Det som sto igjen var SKJELETTET —
 * typeskala, avstandsrutenett, linjehøyder, kniping, radier,
 * kantbredder — og skjelettet er nå også vårt eget, fordi
 * designoverleveringen 22.09 fastsetter et annet:
 *
 *     typeskala     Digdir: 12, 14, 16, 18, 21, 24, 30, 36 px
 *                   vår:    12,5, 13, 13,5, 14, 14,5, 15, 17, 19, 26,
 *                           30 + fire clamp()-trinn for display
 *     avstand       Digdir: rent 4 px-rutenett
 *                   vår:    4, 6, 8, 10, 12, 14, 16, 18, 20, 24, 28,
 *                           32, 40, 44, 56, 64, 72 — 6, 10, 14, 18, 28
 *                           og 44 er ikke på et 4 px-rutenett
 *     radier        Digdir: 2, 4, 8 px
 *                   vår:    0 overalt, uten unntak
 *
 * Tre av fire tabeller i den fila var altså ubrukte etter 22.09, og
 * den fjerde (linjehøydene) er tre tall. Å beholde en hentet fil med
 * MIT-lisens, sha256 og en oppdateringsrutine for tre tall vi ikke
 * lenger har hentet, ville vært den samme påstanden fargene ble tatt
 * ut for å slippe å gjøre.
 *
 * Følgen er at /om/ ikke lenger fører Digdir under «det vi låner». Det
 * er ikke en utelatelse — det er at vi ikke låner det.
 *
 * ## Hva som er bundet, og hva som er fritt
 *
 * Markupkontrakten (docs/beslutninger/2026-09-19-markup-er-en-kontrakt.md)
 * sier at `data-felt`, `<table>/<caption>/<thead>/<th scope>`,
 * tabell-id-ene og `<time datetime>` ikke kan endres av en designrunde.
 * CSS-en er fri. Denne fila utnytter det bundne framfor å legge til
 * klasser: `td[data-felt="farge_mangler"]` finnes alt i kontrakten, og
 * en regel som henger på den kan ikke drive fra markupen.
 *
 * ## To regler for hvordan denne fila får lov til å røre markupen
 *
 * 1. INGEN ELEMENTER INNE I EN `data-felt`-CELLE som bærer en verdi.
 *    Publiseringsvaktens `FELTMERKE` fanger teksten fra `>` fram til
 *    første `<`. Pakker vi verdien i en `<span>` for å farge den, blir
 *    fangsten tom, og vakten er blind for akkurat den cellen — uten at
 *    noe feiler. Derfor gjør hver farget ting her det med `::before`
 *    eller på cellen selv.
 *
 *    DET ENE UNNTAKET, og det er markupens og ikke CSS-ens: en celle
 *    som bærer en SAMMENSATT streng («Eier: X → Y») er ikke én verdi.
 *    Den merkes `endringstekst` — et navn porten ikke leter etter — og
 *    hver VERDI får sin egen merking i et element inni. Da ser porten
 *    de to navnene hver for seg, som er det den skal. Regelen over
 *    gjelder fortsatt for celler som bærer ÉN verdi.
 *
 * 2. INGEN KLASSE SOM INNEHOLDER `navn` ELLER `eier` SOM HELT ORD.
 *    `NAVNEMERKE` leser `class="[^"]*\b(navn|eier)\b[^"]*"` som «her
 *    står det et navn». En presentasjonsklasse som het `po-navn` ville
 *    meldt hvert produksjonsområdenavn som et ukjent personnavn.
 *
 * ## Ingenting hentes i runtime
 *
 * Tre webfonter, alle hostet av oss selv. Ingen CDN, ingen
 * Google Fonts, ingen JavaScript som henter noe. Alt som ser ut som et
 * ikon her er en firkant eller en strek tegnet i CSS.
 */

/* ---------------------------------------------------------------- *
 * 1. IDENTITETEN: HAV, PAPIR OG RUST
 *
 * Paletten er designoverleveringens, med tre målte avvik. De står i
 * klartekst under, fordi et avvik som ikke står skrevet er et avvik
 * neste designrunde tar for en feil.
 *
 * ## To familier, og én aksent
 *
 * HAVET er den mettede flaten: heroen, headeren på undersidene,
 * kystseksjonen og bunnteksten. PAPIRET er alt annet. RUSTEN er den
 * eneste aksenten, og den opptrer BARE som skrift eller strek.
 *
 * ## Hvordan aksenten holdes fra trafikklyset
 *
 * Dette er den viktigste regelen i fila, og den har to ledd fordi ett
 * ikke holder.
 *
 * 1. MÅLT AVSTAND. Aksenten er rustoransje, og avstanden til de tre
 *    trafikklysfargene er dE2000 16,5 (rød), 32,8 (gul) og 46,9
 *    (grønn).
 * 2. FORM. Aksenten opptrer BARE som skrift eller strek. Trafikklyset
 *    opptrer BARE som fylt firkant. Ingenting på nettstedet er begge
 *    deler. Det er leddet som overlever at noen bytter en heksverdi:
 *    et tall kan endres, en regel om form må brytes med vilje.
 *
 * Merk at gul-avstanden FALT fra 48,5 til 32,8 da trafikklysgulen ble
 * overleveringens #c8992f i stedet for #f7d117. Det er fortsatt langt
 * — OWIDs gullaksent lå dE 6,0 fra den gamle gulen og ble forkastet —
 * men tallet står her framfor å bli husket feil.
 *
 * ## AVVIK 1: dempet blekk er en HEKSVERDI, ikke en alfa
 *
 * Overleveringen demper blekket med alfa 0,6–0,75 på papir, og
 * tabellhodet med `rgba(11,36,48,.6)`. MÅLT mot #e7dbd0:
 *
 *     alfa .75   5,99:1   OK
 *     alfa .65   4,49:1   under AA med 0,01
 *     alfa .60   3,91:1   under AA
 *
 * Papiret er L*88,1 og ikke hvitt, og det spiser hele slakken. Den
 * dempede teksten er derfor én fast verdi — #566266, som er blekk over
 * papir ved alfa 0,66 og gir 4,63:1 — framfor en alfa som er riktig på
 * én flate og feil på den neste. Samme øvelse som 21.09: «senket til
 * den minste endringen som passerer, ikke plukket på nytt».
 *
 * ## AVVIK 2: rød er #841e19, ikke #93211c
 *
 * `test_rutene_skilles_fra_hverandre_i_lyshet` krever at de tre
 * trafikklysfargene ligger minst 1,5 fra hverandre i LUMINANS, ikke
 * bare i kulør — rød og grønn er den klassiske forvekslingen, og to
 * ruter som er like lyse er to ruter ingen kan skille i gråtone
 * heller.
 *
 * Overleveringens rød #93211c og grønn #2f6b4f ligger 1,35 fra
 * hverandre. Rød er senket 10 % mot svart til #841e19, som gir 1,53.
 * dE2000 fra overleveringens verdi er 3,06 — mindre enn steget
 * mellom to nabotoner i en palett. Grønn og gul er urørt.
 *
 * ## AVVIK 3: gul har en ring, fordi gul ikke kan nå 3:1
 *
 * #c8992f mot papiret er 1,92:1, og WCAG 1.4.11 krever 3:1 for
 * grafikk som bærer informasjon. En gul som når 3:1 mot L*88-papir er
 * ikke gul lenger.
 *
 * Ruta har derfor en nøytral ring — #757c7d, 3,13:1 mot papir og
 * 3,45:1 mot den innfelte flata. Ringen er NØYTRAL og ikke en mørkere
 * gul, nettopp fordi synligheten da ville hengt på fargen som ikke kan
 * bære den. Samme løsning som sto her fra 20.09, med nye tall.
 *
 * ## Lys er standard, mørk er en OVERSETTELSE
 *
 * Papiret er hovedmodus. Mørk modus finnes og er målt, men den er en
 * oversettelse av identiteten og ikke en likeverdig tvilling: havet er
 * allerede mørkt, så i mørk modus må båndet være LYSERE enn flata det
 * ligger på for i det hele tatt å være en flate. Forholdet er bevart
 * (1,34:1), utførelsen er speilvendt.
 * ---------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* ---- havet: den mettede flaten ----
     Navnene er overleveringens egne (`--hav9` … `--hav3`), og det er
     med vilje: hver verdi kan slås opp i
     docs/design/overlevering/design_handoff_kystloggen/README.md uten
     en oversettelsestabell mellom seg. */
  --hav9:           #06161d;   /* hero, underside-header, kyst, bunn */
  --hav8:           #0b2430;   /* knapp i hvile — og blekket */
  --hav7:           #123241;   /* hover på mørk flate */
  --hav5:           #2f5f74;   /* søyler: lus og biomasse */
  --hav3:           #7ba0b1;   /* dempet tekst på mørk flate */
  --hav-sekundaer:  #9fb9c4;   /* sekundærtekst på mørk flate */
  --hav-tegn:       #c9d6dc;   /* tegnforklaring på mørk flate */

  /* Rollenavn for det de tre mørke tekstfargene FAKTISK gjør. Begge
     sett står, fordi `test_kontrast` måler på rollen og malene skriver
     rollen, mens overleveringen snakker i tall. */
  --hav:            var(--hav9);
  --hav-tittel:     #ffffff;   /* overskrift på mørk flate */
  --hav-tekst:      var(--hav-tegn);
  --hav-dempet:     var(--hav3);
  --hav-dis:        #0f2833;   /* havflaten i kartet, inne i båndet */

  /* ---- papir og blekk ----
     `--papir` er bunnen alt ligger på, `--papir2` den innfelte flaten
     (siteringsboks, arkivlinje, skjemafelt), `--papir3` linjene.

         papir    L*88,1  hue 72
         papir2   L*91,8  hue 75      1,10:1 mot papir — INNFELT, ikke
                                      løftet: den skal anes, ikke ses
         papir3   L*82,5              linjer, 1,19:1 mot papir */
  --papir:          #e7dbd0;
  --papir2:         #efe6dd;
  --papir3:         #d8c9bb;
  --ink:            #0b2430;

  /* AVVIK 1, se over. Ikke en alfa. */
  --ink-dempet:     #566266;   /* 4,63:1 mot papir, 5,11 mot papir2 */
  --ink-ring:       #757c7d;   /* 3,13:1 / 3,45:1 — AVVIK 3 */

  /* ---- aksenten: skrift og strek, aldri flate ---- */
  --rust:           #aa3e04;   /* 4,54:1 mot papir, 5,01 mot papir2 */
  --rust-moerk:     #8f390d;   /* under peker */
  --rust-lys:       #d9804a;   /* samme rolle, på mørk flate */
  --besokt:         #6b4a8c;

  /* Fokusmarkøren er overleveringens: `2px solid #aa3e04`, offset 2. */
  --fokus:          var(--rust);

  /* KNAPPEN. Flata er `--hav8` i hvile og `--hav7` under peker, og
     teksten i den er `--hav-tittel` og IKKE `--papir`.

     Forskjellen er mørk modus: der er papiret #121a1d, og «papirfarget
     tekst på en knapp» ville vært mørk skrift på mørk flate (1,68:1).
     Knappen er mørk i BEGGE moduser, så skriften i den må være lys i
     begge — nøyaktig samme felle som `.hero h1` gikk i 21.09. */
  --knapp-flate:    var(--hav8);
  --knapp-flate-pa: var(--hav7);
  --knapp-tekst:    var(--hav-tittel);

  /* TEKST PÅ EN SØYLEFARGET FLATE. `--hav5` er en MØRK flate i lys
     modus og en LYS flate i mørk (se mørkblokka), så en fast hvit
     tekst der ville vært 1,5:1 i den ene av dem. Samme felle som
     knappeteksten, og samme løsning: variabelen snur, flata gjør ikke. */
  --soyle-tekst:    #ffffff;

  /* ---- trafikklyset: DATA, aldri pynt ---- */
  --lys-rod:   #841e19;   /* AVVIK 2 */
  --lys-gul:   #c8992f;
  --lys-gronn: #2f6b4f;

  /* Skravuren for «ikke oppgitt». Den er den SAMME FORMEN på kart og i
     ruter — det er et krav i overleveringen, ikke en detalj: en leser
     som lærer at skravur betyr «forskriften sier ingenting» skal ikke
     måtte lære det på nytt i neste komponent. */
  --skravur-papir: repeating-linear-gradient(45deg,
      rgba(11,36,48,.55) 0 1.3px, transparent 1.3px 4.5px);
  --skravur-moerk: repeating-linear-gradient(45deg,
      #6f8a95 0 1.3px, transparent 1.3px 4.5px);

  /* ---- kart og grafer ---- */
  --kart-punkt:   #17262b;
  --kart-gitter:  #7d7668;   /* 3,31:1 mot papir */
  --kart-land:    #ded1c4;   /* kystlinjas landflate på papir */
  --kart-kyst:    #756e60;   /* kystlinja som strek, 3,37:1 mot landflata */
  --graf-linje:   #0b2e38;
  --graf-brakk:   #ddd0c1;   /* brakkleggingsbånd, 1,13:1 mot papir */

  /* ---- målebånd ----
     `--maal-tekst` er MÅLT PÅ NYTT 22.09.2026. Tallet 29em var målt
     mot glyffbreddene i SF Pro og Helvetica, fordi brødteksten da var
     systemets sans. Den er nå IBM Plex Sans, som er smalere: 4 519
     tegn fra /om/ satt i Plex Sans 15px gir 66 tegn per linje ved 29em
     mot 61 i SF Pro. 27em gir 61 igjen. Se docs/design/IBM-PLEX.md. */
  --maal-tekst:  27em;
  --maal-tittel: 22em;
  --maal-side:   1400px;     /* overleveringens innholdsbredde */
  --marg-side:   clamp(20px, 4vw, 56px);
}

/* Gamle navn peker hit. STÅR FØR `@media`, og det er ikke kosmetikk:
   `tests/test_kontrast.py` leser paletten ut av denne fila og deler den
   på mediespørringen. Ligger aliasene etter, faller de utenfor
   lys-halvdelen og prøven måler ingenting. */
:root {
  --farge-bunn:         var(--papir);
  --farge-ark:          var(--papir);
  --farge-innfelt:      var(--papir2);
  --farge-kant-svak:    var(--papir3);
  --farge-kant:         var(--ink-ring);
  --farge-kant-sterk:   var(--ink);
  --farge-tekst:        var(--ink);
  --farge-tekst-svak:   var(--ink-dempet);
  --farge-lenke:        var(--rust);
  --farge-lenke-aktiv:  var(--rust-moerk);
  --farge-lenke-besokt: var(--besokt);
  --farge-merke:        var(--ink);
  --farge-fokus:        var(--fokus);
  --farge-kart-punkt:   var(--kart-punkt);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* MØRK MODUS SNUR HVA BÅNDET GJØR. I lys modus er havet den
       mørkeste flaten på en lys side, og det er dét som gjør det til en
       flate. En enda mørkere verdi her ville gitt 1,04:1 mot det mørke
       papiret: båndet ville ikke finnes, og det eneste man SÅ var at
       flata under begynte.

       Verdiene under er lysere enn papiret, ikke mørkere, og forholdet
       (1,34:1) er nøyaktig det samme som papir/papir2 har … nei:
       som papir/hav har i lys modus. Rollen er bevart; utførelsen er
       speilvendt. Det er forskjellen på å oversette en identitet og å
       invertere heksverdiene i den. */
    --hav9:           #13343f;
    --hav8:           #1b4453;
    --hav7:           #24566a;
    --hav5:           #7fb2c9;
    --hav3:           #9fb3b4;
    --hav-sekundaer:  #b4c6c7;
    --hav-tegn:       #dfe7e6;
    --hav-tittel:     #fbf7ef;
    --hav-dis:        #1b4453;

    --papir:          #121a1d;
    --papir2:         #1b2429;
    --papir3:         #2f3b40;
    --ink:            #e9e4d8;
    --ink-dempet:     #a3aeaf;
    --ink-ring:       #7d8a8c;

    --rust:           #f0955a;
    --rust-moerk:     #f5ae7d;
    --rust-lys:       #f0955a;
    --besokt:         #c0a5db;

    --soyle-tekst:    #10191c;

    --lys-rod:   #e06070;
    --lys-gul:   #ffdc3d;
    --lys-gronn: #4fc98c;

    --skravur-papir: repeating-linear-gradient(45deg,
        rgba(233,228,216,.5) 0 1.3px, transparent 1.3px 4.5px);

    --kart-punkt:   #a8bcbd;
    --kart-gitter:  #7c898b;
    --kart-land:    #1c262a;
    --kart-kyst:    #6b7a7e;   /* 3,46:1 mot landflata i mørk modus */
    --graf-linje:   #9ec6d4;
    --graf-brakk:   #1e2a2f;
  }
}


/* ---------------------------------------------------------------- *
 * 2. SKRIFTENE, SKALAEN OG AVSTANDENE
 *
 * ## Tre skrifter, og hver har én jobb
 *
 *     Newsreader        ordmerket, overskriftene, nøkkeltallene,
 *                       ukessammendraget. Aldri brødtekst.
 *     IBM Plex Sans     brødtekst, etiketter, tabellhoder, celletekst
 *     IBM Plex Mono     TALLVERDIER I TABELLKOLONNER, og ingenting
 *                       annet — ikke etiketter, ikke overskrifter,
 *                       ikke datoer i løpende tekst
 *
 * Den tredje regelen er overleveringens harde krav 4, og den er verdt
 * å si hvorfor: en mono i løpende tekst leser som kode, og en dato i
 * en setning er ikke en måleverdi. Monoen er der for at en kolonne med
 * tall skal stå i flukt, og `tabular-nums` i en systemfont er et løfte
 * fonten kan innfri eller la være — se docs/design/IBM-PLEX.md.
 *
 * Kommer fontene aldri fram, faller de til Georgia, systemsansen og
 * systemmonoen, og siden er hel. `font-display: swap`, samme regel som
 * at siden skal virke uten stilark.
 *
 * ## Rotstørrelsen settes ikke
 *
 * 16px er leserens innstilling, og en side som overstyrer den
 * overstyrer noen som har skrudd den opp. Hele skalaen er relativ;
 * `--fs-*` heter etter px ved 16px rot, fordi det er slik
 * overleveringen oppgir dem.
 * ---------------------------------------------------------------- */

@font-face {
  /* Newsreader, SIL Open Font License 1.1. OFL krever at lisensteksten
     distribueres MED fonten, og det er et krav om filer og ikke om en
     kommentar: `nettsted.skriv_fonter()` kopierer både fila og
     `newsreader-OFL.txt` til nettstedets rot.

     opsz pinnet til 28 (MÅLT, ikke lest av navnetabellen), wght som
     akse 300–700. 300 er gulvet fordi hver displayoverskrift i
     designet står der. Se docs/design/NEWSREADER.md. */
  font-family: Newsreader;
  src: url("newsreader.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  /* IBM Plex Sans, OFL 1.1. wdth låst til 100, wght som akse 400–600.
     Se docs/design/IBM-PLEX.md. */
  font-family: "IBM Plex Sans";
  src: url("ibmplexsans.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  /* IBM Plex Mono, OFL 1.1. Én vekt, fordi den har én jobb. */
  font-family: "IBM Plex Mono";
  src: url("ibmplexmono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --skrift-tittel: Newsreader, ui-serif, Georgia, "Times New Roman", serif;
  --skrift-tekst: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
  --skrift-tall: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono",
                 Menlo, Consolas, monospace;

  /* ---- TYPESKALAEN, i px ved 16px rot ---- */
  --fs-12:  0.75rem;      /* tabellhode (12,5 rundet ned til rutenettet) */
  --fs-13:  0.8125rem;    /* etikett, metadata */
  --fs-14:  0.875rem;     /* tabellcelle, mono-tall (13,5–14) */
  --fs-15:  0.9375rem;    /* brødtekst, seksjonsetikett */
  --fs-17:  1.0625rem;    /* brødtekst, stor */
  --fs-19:  1.1875rem;    /* ordmerke i nav */
  --fs-22:  1.375rem;
  --fs-26:  1.625rem;     /* H2 blokk */
  --fs-30:  1.875rem;

  /* Displaystørrelsene er clamp() og ikke trinn: de skal krympe med
     skjermen, og et fast trinn på 104px er seks tegn per linje på en
     telefon. Verdiene er overleveringens, ordrett. */
  --fs-hero:    clamp(50px, 7vw, 104px);
  --fs-h1:      clamp(40px, 5vw, 76px);
  --fs-h1-lok:  clamp(46px, 6vw, 88px);
  --fs-h2:      clamp(28px, 3vw, 46px);
  --fs-sammendrag: clamp(22px, 2.1vw, 29px);
  --fs-nokkeltall: clamp(36px, 3.6vw, 52px);

  /* ---- LINJEHØYDER ---- */
  --lh-tett:   1.3;
  --lh-normal: 1.5;
  --lh-luft:   1.6;
  --lh-brod:   1.62;

  /* ---- KNIPING ----
     Newsreader i display vil ha negativ sperring; sansen vil ikke. */
  --knip-1: -0.01em;
  --knip-2: -0.02em;
  --knip-3: -0.03em;
  --knip-4: -0.035em;

  /* ---- AVSTAND ----
     Overleveringens skala, ordrett: 4, 6, 8, 10, 12, 14, 16, 18, 20,
     24, 28, 32, 40, 44, 56, 64, 72. Den er IKKE et rent 4 px-rutenett,
     og det er grunnen til at den står her og ikke er hentet. */
  --rom-4:  0.25rem;
  --rom-6:  0.375rem;
  --rom-8:  0.5rem;
  --rom-10: 0.625rem;
  --rom-12: 0.75rem;
  --rom-14: 0.875rem;
  --rom-16: 1rem;
  --rom-18: 1.125rem;
  --rom-20: 1.25rem;
  --rom-24: 1.5rem;
  --rom-28: 1.75rem;
  --rom-32: 2rem;
  --rom-40: 2.5rem;
  --rom-44: 2.75rem;
  --rom-56: 3.5rem;
  --rom-64: 4rem;
  --rom-72: 4.5rem;

  /* Seksjonenes egen luft, som klemmes på smal skjerm. */
  --rom-seksjon: clamp(36px, 4vw, 56px);
  --rom-seksjon-stor: clamp(44px, 5vw, 72px);

  /* HJØRNER ER 0 OVERALT. Variabelen finnes for at en fremtidig
     avgjørelse skal ha ett sted å bo, ikke for at noen skal skru på
     den i én regel. */
  --hjorne: 0;
}

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

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

body {
  margin: 0;
  background: var(--papir);
  color: var(--ink);

  font-family: var(--skrift-tekst);
  font-size: var(--fs-15);
  line-height: var(--lh-brod);
  font-weight: 400;

  /* TALL I KOLONNE ER HALVE FORSKJELLEN. Settes på body framfor på
     `.tall`, fordi tall står i captions, i overskrifter og i løpende
     tekst også — «1782 lokaliteter» skal ha samme sifferbredde som
     kolonnen under. */
  font-variant-numeric: tabular-nums;
}

/* ARKET ER BORTE (22.09.2026).

   Fram til i dag lå topplinja, `main` og bunnteksten på en hvit flate
   (`--ark`, #fffdf8) med kant, sentrert på papirbunnen, og avsnitt 1
   argumenterte for papiret nettopp med at «arkene løftes av bunnen».

   Overleveringen har ingen slik flate. Seksjonene ligger rett på
   papiret, og skillet mellom dem er en STREK og ikke en kant — bortsett
   fra der flata bytter til hav. Det er den samme lagdelingen løst med
   linjer i stedet for med ark, og den tåler at en seksjon går helt ut
   i kanten (heroen, kystseksjonen, bunnteksten), noe et sentrert ark
   ikke gjør.

   Innholdsbredden er derfor en regel om INNHOLD og ikke om en boks:
   hver seksjon setter den selv med `.ark`. */
.ark {
  /* `inline-size: 100%` OG `margin-inline: auto`. Begge trengs, og det
     er ikke belt-and-braces: heroen er en FLEX-KOLONNE, og en auto-marg
     i innlinjeaksen der slår ut `align-items: stretch` og krymper
     elementet til innholdet sitt. MÅLT: ordmerket sto midtstilt på
     forsiden mens det sto venstrestilt overalt ellers. */
  inline-size: 100%;
  max-width: var(--maal-side);
  margin-inline: auto;
  padding-inline: var(--marg-side);
}


/* ---------------------------------------------------------------- *
 * 3. HOPPELENKA, TOPPEN OG BUNNTEKSTEN
 *
 * Det tre sidene har felles, og som derfor står i `base.html.j2` og
 * `meny.html.j2`. Alt her er MØRK FLATE: toppen er et bånd i `--hav9`,
 * bunnteksten er den samme flata i den andre enden, og heroen på
 * forsiden er et fotografi med den samme flata under seg.
 *
 * Det er ikke en gradient og ikke en stemning. Mørk flate betyr
 * NAVIGASJON OG PROVENIENS på dette nettstedet — hvor du er, og hvor
 * tallene kommer fra. Alt som er DATA står på papir.
 * ---------------------------------------------------------------- */

/* HOPPELENKA. Menyen er seks lenker, og en som leser med tastatur skal
   slippe dem på hver av 2 279 sider. Synlig bare i fokus, og da som en
   ekte knapp — ikke som en 1x1-piksel som «teknisk sett» er der. */
.hopp {
  position: absolute;
  inset-inline-start: -10000px;
  top: 0;
  z-index: 10;
  background: var(--knapp-flate);
  color: var(--knapp-tekst);
  padding: var(--rom-12) var(--rom-20);
  text-decoration: none;
}

.hopp:focus {
  inset-inline-start: 0;
}

/* `main` tar imot fokus fra hoppelenka (`tabindex="-1"`), og skal ikke
   tegne en ring for det: leseren BA om å komme hit. */
main:focus { outline: none; }

/* ---- det mørke båndet ---- */

.sidetopp {
  background: var(--hav9);
  color: var(--hav-tegn);
}

/* MENYEN. Ordmerket til venstre, lenkene til høyre, og de brytes til
   ny linje under 640px framfor å scrolle. */
.hovedmeny {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--rom-10) var(--rom-24);
  padding-block: var(--rom-24) var(--rom-20);
}

.hovedmeny > .merke { margin-inline-end: auto; }

.hovedmeny ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rom-6) var(--rom-24);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  font-size: var(--fs-14);
}

.hovedmeny li { margin: 0; }

.hovedmeny a {
  color: var(--hav-sekundaer);
  text-decoration: none;
}

.hovedmeny a:visited { color: var(--hav-sekundaer); }
.hovedmeny a:hover { color: var(--hav-tittel); }

/* HVOR DU ER, markert på ATTRIBUTTET og ikke på en klasse. `aria-current`
   BETYR noe — en skjermleser sier det — mens en klasse bare ville sett
   slik ut. Streken er rust, som alt annet som markerer. */
.hovedmeny [aria-current="page"] {
  color: var(--hav-tittel);
  box-shadow: inset 0 -2px 0 0 var(--rust-lys);
}

/* ---- ordmerket ----
   «Kystloggen» i Newsreader. Markupen står ett sted,
   `maler/merke.html.j2`, slik at merket kan byttes uten at noen må
   finne igjen `<a class="merke">` i ni maler.

   ## Den ene aksentbruken, i to varianter

   Aksenten opptrer bare som skrift eller strek, aldri som flate. To
   varianter er tegnet, og begge står her fordi bytte mellom dem skal
   koste én klasse i `merke.html.j2`:

     .merke--strek     en tynn rustlinje under ordet. En logg er
                       LINJERT — linja er det som gjør den til en logg
                       framfor et ark.
     .merke--punktum   punktumet etter ordet i aksentfarge.
                       «Kystloggen.» — én ført oppføring, avsluttet.
                       Tegnet står i CSS og ikke i markupen: det er
                       ornament, og en skjermleser skal lese navnet,
                       ikke navnet med et punktum.

   MERKET STÅR PÅ MØRK FLATE OVERALT nå, fordi menyen gjør det. Fargene
   under er derfor båndets, ikke papirets. */
.merke {
  font-family: var(--skrift-tittel);
  font-weight: 400;
  font-size: var(--fs-19);
  line-height: 1;
  letter-spacing: var(--knip-1);
  color: var(--hav-tittel);
  text-decoration: none;
  position: relative;
  display: inline-block;
}

.merke--strek::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -0.2em;
  block-size: 2px;
  background: var(--rust-lys);
}

.merke--punktum::after {
  content: ".";
  color: var(--rust-lys);
}

/* Understrekingen ved peker ville ligget oppå loggstreken. Den flyttes
   ned, slik at de to er to streker og ikke én tykk. */
.merke:hover { text-decoration-line: underline; }
.merke--strek:hover::after { inset-block-end: -0.38em; }

/* ---- sidehodet: brødsmule, tittel og fakta, inne i båndet ---- */

.sidehode {
  padding-block: var(--rom-20) var(--rom-seksjon);
}

/* BRØDSMULA. `<ol>` og ikke `<ul>`: rekkefølgen ER informasjonen.
   Skilletegnet er et `::before` og ikke et tegn i markupen — en
   skjermleser skal lese «Forside, Lokaliteter, Lokalitet 31397», ikke
   «Forside skråstrek Lokaliteter skråstrek». */
.sti {
  margin: 0 0 var(--rom-18);
  font-size: var(--fs-13);
  color: var(--hav3);
}

.sti ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.sti li { margin: 0; }

.sti li + li::before {
  content: "/";
  margin-inline: 0.5em;
  color: var(--hav3);
  opacity: 0.6;
}

.sti a { color: var(--hav3); text-decoration: none; }
.sti a:visited { color: var(--hav3); }
.sti a:hover { color: var(--hav-tittel); text-decoration: underline; }
.sti [aria-current="page"] { color: var(--hav-tegn); }

/* ---- bunnteksten ----
 *
 * Attribusjonen er en LISENSPLIKT, ikke en kolofon. Den skal være
 * lesbar, og den skal ikke se bort-designet ut. Fire spalter som
 * brytes til én på telefon.
 */

.bunn {
  background: var(--hav9);
  color: var(--hav-tegn);
  margin-block-start: var(--rom-72);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
}

.bunn-spalter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--rom-32) var(--rom-44);
  padding-block: var(--rom-seksjon-stor) var(--rom-40);
}

/* Den første spalta er bredere: den bærer setningen om hvem som står
   bak, og den setningen er etterskriften til hver eneste side. */
.bunn-merke { grid-column: span 1; }

.bunn-ordmerke {
  font-family: var(--skrift-tittel);
  font-size: var(--fs-22);
  font-weight: 400;
  letter-spacing: var(--knip-1);
  color: var(--hav-tittel);
  margin: 0 0 var(--rom-10);
  position: relative;
  display: inline-block;
  padding-block-end: var(--rom-6);
  border-block-end: 2px solid var(--rust-lys);
}

.bunn h2 {
  font-family: var(--skrift-tekst);
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--rust-lys);
  margin: 0 0 var(--rom-12);
  padding: 0;
  border: 0;
  max-width: none;
}

.bunn p {
  margin: 0 0 var(--rom-10);
  max-width: 34em;
  color: var(--hav-sekundaer);
}

.bunn ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.bunn li { margin-block-end: var(--rom-10); }

/* KILDESETNINGENE er ordrett fra lisensgiverne og kan ikke kortes.
   Streken foran hver av dem er der for at en liste med fire setninger
   ikke skal lese som ett avsnitt. */
.bunn-kilder li {
  padding-inline-start: var(--rom-12);
  border-inline-start: 2px solid rgba(231, 219, 208, 0.22);
  color: var(--hav-sekundaer);
}

.bunn a { color: var(--hav-tegn); text-decoration: none; }
.bunn a:visited { color: var(--hav-tegn); }
.bunn a:hover { color: var(--rust-lys); text-decoration: underline; }

.bunn .mangler {
  color: var(--hav3);
  font-style: italic;
}

/* PROVENIENSLINJA. Egen strek over, fordi den ikke er en spalte til —
   den er en fotnote til HELE siden: hvilket øyeblikksbilde tallene er
   fra, og når vi hentet det. */
.bunn-proveniens {
  padding-block: var(--rom-20) var(--rom-seksjon);
  border-block-start: 1px solid rgba(231, 219, 208, 0.16);
  font-size: var(--fs-13);
  color: var(--hav3);
}

.bunn-proveniens p { max-width: 68em; color: var(--hav3); }

/* ---------------------------------------------------------------- *
 * 4. TYPOGRAFI, LENKER OG SEKSJONER
 *
 * ## Overskriftene er Newsreader i 300
 *
 * Hver displayoverskrift i overleveringen står i vekt 300, og
 * størrelsene er `clamp()` og ikke trinn: de skal krympe med skjermen.
 * Begrunnelsen for at fonten i det hele tatt HAR 300 står i
 * docs/design/NEWSREADER.md.
 *
 * ## Seksjonsetiketten er den eneste rusten på papir
 *
 * «Denne uka i registrene», «Kysten», «Følg med» — 15 px sans i 500,
 * i rustfarge, VANLIG SETNING og aldri versaler. Versaler i en etikett
 * er et rop, og aksenten roper alt den skal ved å være den eneste
 * fargen på siden.
 * ---------------------------------------------------------------- */

main {
  display: block;
  max-width: var(--maal-side);
  margin: 0 auto;
  padding: var(--rom-seksjon) var(--marg-side) var(--rom-72);
}

/* EN SIDETYPE SOM HAR EGNE FULLBREDDE-SEKSJONER setter bredden selv med
   en indre `.ark`, og skal ikke ha den fra `main` også — to lag
   sidemarg er dobbelt innrykk. Markøren er en klasse på `main` og ikke
   `:has()`: `:has()` finnes ikke i eldre nettlesere, og en layout som
   faller sammen der er en layout som feiler stille. */
main.fullbredde {
  max-width: none;
  padding-inline: 0;
  padding-block: 0;
}

/* ---- overskrifter ---- */

h1, h2, h3, h4 {
  font-family: var(--skrift-tittel);
  font-weight: 300;
  line-height: 1.05;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  line-height: 0.95;
  letter-spacing: var(--knip-3);
  margin: 0 0 var(--rom-20);
  max-width: var(--maal-tittel);
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: var(--knip-2);
  margin: var(--rom-seksjon) 0 var(--rom-16);
  max-width: var(--maal-tittel);
}

/* H2 I EN BLOKK er en annen rolle enn H2 som seksjonsoverskrift: den
   navngir en tabell eller en figur, ikke en del av siden. 26–30 px i
   400, som overleveringen sier. */
.blokk h2, h3 {
  font-size: var(--fs-26);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: var(--knip-1);
  margin: var(--rom-32) 0 var(--rom-12);
  max-width: var(--maal-tittel);
}

h4 {
  font-family: var(--skrift-tekst);
  font-size: var(--fs-15);
  font-weight: 600;
  letter-spacing: 0;
  margin: var(--rom-24) 0 var(--rom-8);
}

/* SEKSJONSETIKETTEN. Sans, 15 px, 500, rust, vanlig setning. */
.etikett {
  font-family: var(--skrift-tekst);
  font-size: var(--fs-15);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  color: var(--rust);
  margin: 0 0 var(--rom-8);
  text-transform: none;
}

/* På mørk flate er aksenten den lyse varianten. */
.sidetopp .etikett, .bunn .etikett, .mork .etikett { color: var(--rust-lys); }

/* SEKSJONSHODET: etiketten og overskriften over en strek. Overleveringen
   tegner den på forsiden, på områdesiden og på /om/. */
.seksjonshode {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rom-8) var(--rom-24);
  padding-block-end: var(--rom-12);
  border-block-end: 1px solid rgba(11, 36, 48, 0.3);
}

.seksjonshode h2 { margin: 0; }
.mork .seksjonshode { border-block-end-color: rgba(231, 219, 208, 0.28); }

/* ---- brødtekst ---- */

p, ul, ol {
  max-width: var(--maal-tekst);
  margin: 0 0 var(--rom-20);
}

li { margin-block-end: var(--rom-8); }
li:last-child { margin-block-end: 0; }

strong { font-weight: 600; }

/* EN DATO ER ETT ORD. «2012-01-02» brukket over to linjer på
   bindestreken er to tall som ser ut som et intervall. Gjelder hele
   nettstedet, ikke bare båndet der det ble oppdaget. */
time { white-space: nowrap; }

/* MONOEN ER BARE FOR TALLVERDIER I TABELLKOLONNER — overleveringens
   harde krav 4. `<code>` er unntaket, og det er ikke det samme: en
   filsti eller et feltnavn ER kode, og skal se ut som det. */
code {
  font-family: var(--skrift-tall);
  font-size: 0.92em;
  background: var(--papir2);
  padding: 0.1em 0.35em;
}

/* En verdi vi ikke har. Skal se BEVISST tom ut — ikke som data, og
   ikke som en feil. */
.mangler { color: var(--ink-dempet); }

/* ET UTKAST SKAL SE UT SOM ET UTKAST. Merket står på seksjoner der
   teksten ikke er vedtatt — i dag «Gjenbruk» på /om/. En setning om
   hva andre har lov til, som ingen har gått god for, skal ikke se
   ferdig ut. */
.utkast-merke {
  padding: var(--rom-10) var(--rom-14);
  background: var(--papir2);
  box-shadow: inset 3px 0 0 0 var(--rust);
  font-size: var(--fs-14);
  color: var(--ink-dempet);
}

/* ---- lenker ---- */

a {
  color: var(--rust);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

a:visited { color: var(--besokt); }

a:hover {
  color: var(--rust-moerk);
  text-decoration-thickness: 2px;
}

/* FOKUS. Overleveringens egen: `outline: 2px solid #aa3e04;
   outline-offset: 2px`. `:focus-visible` og ikke `:focus` — en
   museklikket lenke skal ikke etterlate en ramme. */
:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
}

/* På mørk flate er rusten for mørk til å være en ring. */
.sidetopp :focus-visible, .bunn :focus-visible, .mork :focus-visible {
  outline-color: var(--rust-lys);
}

/* ---- knapper og knappelenker ---- */

.knapp {
  display: inline-block;
  background: var(--knapp-flate);
  color: var(--knapp-tekst);
  border: 0;
  padding: var(--rom-12) var(--rom-24);
  font: 500 var(--fs-15) / 1 var(--skrift-tekst);
  text-decoration: none;
  cursor: pointer;
}

.knapp:visited { color: var(--knapp-tekst); }
.knapp:hover { background: var(--knapp-flate-pa); color: var(--knapp-tekst); }

/* SEKUNDÆRKNAPPEN er en ramme, ikke en flate: to fylte knapper ved
   siden av hverandre sier at begge er hovedhandlingen. */
.knapp--tynn {
  background: none;
  color: var(--hav-tegn);
  box-shadow: inset 0 0 0 1px rgba(231, 219, 208, 0.35);
}

.knapp--tynn:visited { color: var(--hav-tegn); }

.knapp--tynn:hover {
  background: var(--hav7);
  color: var(--hav-tittel);
}


/* ---------------------------------------------------------------- *
 * 5. FORSIDEN
 *
 * ## Heroen er et FOTOGRAFI, ikke en fargeflate
 *
 * Fram til 22.09.2026 var heroen `--hav` som flate, og begrunnelsen var
 * at havet skulle være den eneste mettede flaten på nettstedet. Den
 * regelen står — havet er fortsatt den eneste — men flata er nå et
 * bilde av det: snødekte fjell over mørkt hav (Wolfgang Hasselmann,
 * Unsplash-lisens, hostet av oss i tre bredder).
 *
 * Gradienten er bare NEDERST, og den er der for lesbarhet og ikke for
 * stemning: teksten står i bunnen, og uten den ville ordmerket ligget
 * oppå en fjellside. Verdiene er overleveringens, ordrett.
 *
 * ## Lysskimmeret respekterer `prefers-reduced-motion`
 *
 * 34 sekunder er lenge nok til at bevegelsen ikke leses som bevegelse,
 * men noen blir kvalme av den likevel. Den slås av, ikke dempes.
 * ---------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--hav9);
  color: var(--papir);

  /* Høyden er valgt slik at «Denne uka» starter over bretten på
     1440x900. Overleveringens verdi. */
  min-height: clamp(460px, 60vh, 560px);
}

.hero-bilde {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;

  /* IKKE FORHÅNDSBESKÅRET. Fila er portrett 2:3, som kilden leverte
     den, og utsnittet velges her. 42 % legger horisonten der båndet er
     høyest og fjellene under teksten. */
  object-position: center 42%;
}

.hero-slor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
      rgba(6, 22, 29, 0.45) 0%,
      rgba(6, 22, 29, 0) 22%,
      rgba(6, 22, 29, 0) 42%,
      rgba(6, 22, 29, 0.82) 72%,
      rgba(6, 22, 29, 0.96) 100%);
}

.hero-lys {
  position: absolute;
  inset-inline: -20%;
  top: 40%;
  block-size: 30%;
  pointer-events: none;
  background: radial-gradient(60% 50% at 50% 50%,
      rgba(231, 219, 208, 0.1), transparent 70%);
  animation: skimmer 34s ease-in-out infinite;
}

@keyframes skimmer {
  0%, 100% { transform: translate3d(-8%, 0, 0); }
  50%      { transform: translate3d(8%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-lys { animation: none; }
}

.hero-meny, .hero-bunn { position: relative; z-index: 2; }

.hero-bunn {
  margin-block-start: auto;
  padding-block-end: clamp(22px, 2.6vw, 32px);
}

.hero-tagline {
  margin: 0 0 var(--rom-14);
  font-size: var(--fs-13);
  line-height: var(--lh-tett);
  color: var(--hav-sekundaer);
  max-width: none;
}

.hero-ordmerke { inline-size: max-content; max-inline-size: 100%; }

.hero h1 {
  margin: 0;
  font-size: var(--fs-hero);
  line-height: 0.86;
  font-weight: 300;
  letter-spacing: var(--knip-4);
  color: var(--papir);
  max-width: none;
}

/* LINJALEN under ordmerket. En logg er linjert, og linja er det som
   gjør den til en logg framfor et ark: en heltrukken understrek med
   loddrette merker, som på en målestokk. Rent ornament, og derfor
   `aria-hidden` i markupen. */
.linjal {
  block-size: 10px;
  margin-block-start: clamp(12px, 1.6vw, 20px);
  border-block-end: 2px solid var(--rust);
  background: repeating-linear-gradient(90deg,
      var(--rust) 0 1px, transparent 1px 20px);
  background-position: bottom;
  background-size: 100% 8px;
  background-repeat: repeat-x;
}

.hero-losen {
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  font-family: var(--skrift-tittel);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(21px, 2.2vw, 30px);
  line-height: 1.2;
  color: var(--papir);
  max-width: none;
}

/* SØKESKJEMAET. Ett felt og én knapp, på papirflate midt i det mørke.
   Etiketten er skjult visuelt og ikke fjernet: en `placeholder` er
   ikke en etikett — den forsvinner i det noen begynner å skrive. */
.sok {
  display: flex;
  margin-block-start: clamp(18px, 2vw, 26px);
  max-inline-size: 700px;
  background: var(--papir);
}

.sok label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.sok input {
  flex: 1;
  min-inline-size: 0;
  border: 0;
  background: transparent;
  padding: 17px 18px;
  font: 400 clamp(15px, 1.3vw, 18px) / 1.2 var(--skrift-tekst);
  color: var(--ink);
}

.sok input::placeholder { color: var(--ink-dempet); }
.sok input:focus { outline: 2px solid var(--rust); outline-offset: -2px; }
.sok .knapp { padding-inline: 26px; }

/* ---- seksjonene på papir ---- */

.seksjon { padding-block: var(--rom-seksjon) var(--rom-seksjon-stor); }
.seksjon + .seksjon { padding-block-start: 0; }

/* MØRK SEKSJON i full bredde. Kystseksjonen er den ene på forsiden. */
.mork {
  background: var(--hav9);
  color: var(--hav-tegn);
  padding-block: var(--rom-seksjon-stor);
}

.mork h2 { color: var(--hav-tittel); }
.mork a { color: var(--hav-tegn); }
.mork a:visited { color: var(--hav-tegn); }
.mork a:hover { color: var(--rust-lys); }
.mork .tabellnote, .mork figcaption, .mork p { color: var(--hav-sekundaer); }

/* TABELLEN PÅ MØRK FLATE. Captionen er det viktigste på siden når man
   ikke vet hva man ser på, og en caption i blekkfarge på havbåndet er
   1,2:1 — altså borte. */
.mork caption { color: var(--hav-tegn); border-inline-start-color: var(--rust-lys); }
.mork thead th { color: var(--hav3); border-block-end-color: rgba(231,219,208,.45); }
.mork tbody th, .mork tbody td { border-block-end-color: rgba(231,219,208,.13); }
.mork tbody tr:hover { background: rgba(231, 219, 208, 0.05); }

/* ---- denne uka ---- */

.uke-datoer { margin: 0; font-size: var(--fs-14); color: var(--ink-dempet); }

.uke-topp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: var(--rom-24) clamp(32px, 5vw, 80px);
  margin-block-start: var(--rom-28);
  align-items: end;
}

.uke-sammendrag p {
  margin: 0 0 var(--rom-10);
  font-family: var(--skrift-tittel);
  font-size: var(--fs-sammendrag);
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: var(--knip-1);
  text-wrap: pretty;
  max-width: 34ch;
}

.uke-sammendrag p:last-child { margin-block-end: 0; }

/* TIDSLINJA. To punkter og en strek, og dagene mellom dem står som
   tall — ikke som en proporsjonal avstand alene: 32 dager tegnet som
   32 piksler er ikke lesbart, og 32 dager tegnet som hele bredden ville
   vært en påstand om at det er langt. */
.tidslinje { margin: 0; }

.tidslinje-spor {
  display: flex;
  align-items: center;
  gap: var(--rom-8);
}

.tidslinje-punkt {
  inline-size: 9px;
  block-size: 9px;
  flex: none;
  background: var(--ink-dempet);
  border-radius: 50%;
}

.tidslinje-punkt--oss { background: var(--rust); }
.tidslinje-strek { flex: 1; block-size: 1px; background: var(--papir3); }

.tidslinje-poster {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--rom-12);
  list-style: none;
  margin: var(--rom-8) 0 var(--rom-12);
  padding: 0;
  max-width: none;
  font-size: var(--fs-13);
}

.tidslinje-poster li { margin: 0; }
.tidslinje-poster li:last-child { text-align: right; }

.tidslinje-etikett {
  display: block;
  color: var(--ink-dempet);
  margin-block-end: 2px;
}

.tidslinje-gap {
  color: var(--rust);
  font-variant-numeric: tabular-nums;
}

/* ---- endringstypene ---- */

.typemerker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rom-8) var(--rom-10);
  list-style: none;
  margin: var(--rom-28) 0 var(--rom-20);
  padding: 0;
  max-width: none;
}

.typemerker li { margin: 0; }

.typemerke {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  padding: var(--rom-6) var(--rom-12);
  font-size: var(--fs-13);
  color: var(--ink);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(11, 36, 48, 0.25);
}

.typemerke:visited { color: var(--ink); }
.typemerke:hover { color: var(--rust); box-shadow: inset 0 0 0 1px var(--rust); }
.typemerke-tall { font-family: var(--skrift-tall); font-size: var(--fs-13); }

/* TYPER MED NULL VISES ALLTID, dempet. Et tall man bare ser når det er
   noe der, er et tall ingen kjenner normalverdien til. */
.typemerke--tom { color: var(--ink-dempet); box-shadow: inset 0 0 0 1px var(--papir3); }
.typemerke--tom:visited { color: var(--ink-dempet); }

/* ---- arkivlinja ---- */

/* ARKIVLINJA er en INNFELT flate og går derfor helt ut i kanten, som
   de mørke seksjonene. Den indre `.ark` holder innholdet på plass. */
.arkivlinje-flate {
  background: var(--papir2);
  margin-block-end: var(--rom-seksjon);
}

.arkivlinje { padding-block: var(--rom-24); }

.arkivtall {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rom-8) var(--rom-32);
  margin: 0 0 var(--rom-10);
  max-width: none;
  font-size: var(--fs-15);
}

.arkivtall strong {
  font-family: var(--skrift-tittel);
  font-weight: 400;
  font-size: var(--fs-26);
  line-height: 1;
  letter-spacing: var(--knip-1);
  margin-inline-end: 0.15em;
}

.arkivnote {
  margin: 0;
  max-width: none;
  font-size: var(--fs-13);
  color: var(--ink-dempet);
}

.arkivnote code { background: none; padding: 0; }

/* ---- kysten ---- */

.kyst-ingress { max-width: 44ch; margin: 0; font-size: var(--fs-14); }

.kyst-to {
  display: grid;
  /* `minmax(0, 1fr)` OG IKKE BARE ÉN KOLONNE. En `auto`-kolonne får
     bredden av innholdets min-content, og et `<svg>` med egne
     width/height-attributter bidrar med SIN EGEN bredde selv om det
     står `inline-size: 100%` på det. MÅLT 23.09.2026 ved 390 px:
     sporet ble 453 px, forsiden fikk vannrett rulling, og den var den
     ENESTE siden på nettstedet som hadde det. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rom-32) clamp(32px, 4vw, 64px);
  margin-block-start: var(--rom-32);
}

/* Samme sak en etasje ned: et rutenettfelt har `min-width: auto`, og
   et kart eller en tabell inni kan da presse feltet bredere enn
   sporet. */
.kyst-to > * { min-inline-size: 0; }

@media (min-width: 68.75rem) {
  /* 1100px: kart | tabell. Overleveringens brytpunkt. */
  .kyst-to { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
}

.kystkart {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/* Kartrammen på mørk flate har ingen egen bakgrunn: båndet ER
   bakgrunnen, og en ramme rundt kartet ville laget en boks i en boks. */
.mork .kartramme { margin: 0; }

.kart-omraader .omraade {
  fill: var(--ink-dempet);
  fill-opacity: 0.75;
  stroke: rgba(231, 219, 208, 0.3);
  stroke-width: 0.6;
}

.kart-omraader .lys-rod   { fill: var(--lys-rod); }
.kart-omraader .lys-gul   { fill: var(--lys-gul); }
.kart-omraader .lys-gronn { fill: var(--lys-gronn); }

/* «IKKE OPPGITT» ER SKRAVUR, og det er den SAMME formen som i rutene i
   tabellen. Et mønster kan ikke settes som `fill` uten en `<pattern>`
   i SVG-en; her er den løst som en gjennomsiktig flate med en stiplet
   kant, som er det nærmeste en enkelt path kommer. */
.kart-omraader .omraade--skravert {
  fill: #6f8a95;
  fill-opacity: 0.16;
  stroke: #6f8a95;
  stroke-dasharray: 3 3;
}

.kart-omraader a:hover .omraade { fill-opacity: 1; }
.kart-omraader a:focus-visible .omraade { stroke: var(--rust-lys); stroke-width: 2; }

/* LANDFLATENE. Fyll OG kant fra den samme ringen: kystlinja er
   flatens egen kant, og de kan derfor ikke bli uenige.

   PÅ MØRK FLATE er landet mørkere enn havet rundt — omvendt av et
   vanlig sjøkart, og det er med vilje: fargene på kartet er DATA
   (trafikklyset), og landet skal trekke seg tilbake bak dem. */
.kart-land path {
  fill: rgba(231, 219, 208, 0.07);
  stroke: var(--hav-tegn);
  stroke-width: 0.5;
  stroke-opacity: 0.55;
}

.kart-gitter line {
  stroke: var(--hav3);
  stroke-width: 0.4;
  stroke-opacity: 0.35;
}

.kart-gitter text {
  font-family: var(--skrift-tekst);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  fill: var(--hav3);
}

/* ---- femårsstripa ---- */

.stripe { display: inline-flex; gap: 3px; }

.rute {
  display: inline-block;
  inline-size: 18px;
  block-size: 14px;
  flex: none;
  box-shadow: inset 0 0 0 1px var(--ink-ring);
}

.rute.lys-rod   { background: var(--lys-rod); }
.rute.lys-gul   { background: var(--lys-gul); }
.rute.lys-gronn { background: var(--lys-gronn); }
.rute--skravert { background-image: var(--skravur-papir); }

/* SKRAVUREN ER DEN SAMME FORMEN OVERALT — det er et krav i
   overleveringen, ikke en detalj: en leser som lærer at skravur betyr
   «forskriften sier ingenting» skal ikke måtte lære det på nytt i neste
   komponent. Mønsteret bytter tegnfarge med flata, ikke form.

   `.sidetopp` står i lista fordi områdesidens tegnforklaring ligger i
   det mørke båndet og ikke i en `.mork`-seksjon. En rute som var hvit
   der ville sett ut som «ingen rute» framfor «ingen bestemmelse». */
.mork .rute--skravert,
.sidetopp .rute--skravert { background-image: var(--skravur-moerk); }

.mork .rute,
.sidetopp .rute { box-shadow: inset 0 0 0 1px rgba(231, 219, 208, 0.4); }

.historie {
  display: block;
  font-size: var(--fs-13);
  color: var(--ink-dempet);
}

.mork .historie { color: var(--hav3); }

.tegnforklaring {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rom-8) var(--rom-20);
  list-style: none;
  margin: var(--rom-16) 0;
  padding: 0;
  max-width: none;
  font-size: var(--fs-13);
  color: var(--hav-tegn);
}

.tegnforklaring li {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
}

/* Rutene i tegnforklaringen er mindre enn i stripa: der er de data, her
   er de en nøkkel. */
.tegnforklaring .rute { inline-size: 13px; block-size: 11px; }

.dekningsnote {
  font-size: var(--fs-13);
  color: var(--hav3);
  max-width: 56ch;
}

/* ---- endringscellen ----
 *
 * Firkanten står for den NYE verdien, og bare den. En celle har ett
 * `::before`, og av «grønn → gul» er det gul som gjelder fra nå.
 *
 * ORDET ER BÆREREN, som ellers: cellen inneholder «Trafikklysfarge:
 * grønn → gul» som tekst i vanlig tekstfarge. Slås stilarket av, står
 * setningen igjen alene og raden er like sann.
 */

.endring.lys-rod::before,
.endring.lys-gul::before,
.endring.lys-gronn::before {
  content: "";
  display: inline-block;
  inline-size: 0.75em;
  block-size: 0.75em;
  margin-inline-end: 0.5em;
  vertical-align: -0.02em;
  box-shadow: inset 0 0 0 1px var(--ink-ring);
}

.endring.lys-rod::before   { background: var(--lys-rod); }
.endring.lys-gul::before   { background: var(--lys-gul); }
.endring.lys-gronn::before { background: var(--lys-gronn); }
.mork .endring::before { box-shadow: inset 0 0 0 1px rgba(231,219,208,.4); }

/* ---- felles småting ---- */

.visuelt-skjult {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.videre {
  display: block;
  margin-block-end: var(--rom-12);
  inline-size: max-content;
  max-inline-size: 100%;
  font-weight: 500;
  text-decoration: none;
  border-block-end: 2px solid var(--rust);
}

.videre:hover { border-block-end-color: var(--rust-moerk); }

/* ---------------------------------------------------------------- *
 * 3. TABELLER
 *
 * Dette er en datatabellside. Alt annet er innramming.
 * ---------------------------------------------------------------- */

/* TASTATURTILGANG. `overflow-x: auto` gir et område som kan scrolles
   med mus og finger, men Chrome og Safari gir det ikke fokus av seg
   selv — bare Firefox gjør det. Uten `tabindex="0"` i markupen når en
   tastaturbruker aldri de avkuttede kolonnene på en telefon.

   `role="region"` og `aria-labelledby` følger med fordi et fokuspunkt
   uten navn er et fokuspunkt en skjermleser melder som «gruppe».
   Navnet peker på tabellens CAPTION og ikke på tabellen: navnet regnes
   av det refererte elementets tekstinnhold, og for en `<table>` ville
   det vært hele tabellen lest opp.

   Prisen er ett tabulatorstopp per tabell — fem på lokalitetssiden —
   og over 62rem, der ramma ikke scroller, er stoppet uten nytte. Å
   fjerne det der krever JavaScript som måler om noe faktisk kan
   scrolles, og det er en dyrere pris. */
.tabellramme {
  /* BRED TABELL SCROLLER I SIN EGEN BOKS, ikke dokumentet. Kravet er at
     SIDEN aldri får horisontal scroll på telefon.

     Og så slås den AV på brede skjermer, som ikke er en detalj: et
     element med `overflow-x: auto` får `overflow-y` beregnet til `auto`
     også (den ene aksen kan ikke være `visible` når den andre ikke er).
     Det gjør ramma til en scrollport, og `position: sticky` på et
     tabellhode fester seg da til RAMMA — som er nøyaktig like høy som
     tabellen, så hodet står stille og ser ut til å virke uten å gjøre
     det. Det var tilfellet i den gamle CSS-en.

     Over 62rem er ramma ikke en scrollport, og hodet fester seg til
     vinduet der det hører hjemme. Under 62rem scroller tabellen i
     stedet, og hodet er ikke klebrig — som er riktig bytte: på en
     telefon er en tabell uansett smalere enn skjermen er høy. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin-block-end: var(--rom-44);

  /* Fokusringen tegnes UTENFOR boksen (`outline-offset: 1px`), og en
     ramme som scroller klipper alt som stikker utenfor. Plassen her er
     til ringen, ikke til luft. */
  outline-offset: -1px;
}

@media (min-width: 62rem) {
  .tabellramme { overflow-x: visible; }
}

table {
  /* `separate` og ikke `collapse`: med `collapse` eier tabellen
     kantene, og en kant som eies av tabellen følger ikke med en
     klebrig celle når den løftes. Hvert skille er derfor en
     `border-block-end` på cellen selv. */
  border-collapse: separate;
  border-spacing: 0;

  /* 100 % PÅ SMAL SKJERM. Tabellen kan ikke bli smalere enn sitt eget
     minsteinnhold, så en tabell som trenger mer enn skjermen er bred
     vokser forbi 100 % og scroller i ramma. Det er målt og virker. */
  width: 100%;
  font-size: var(--fs-15);
  line-height: var(--lh-normal);
  margin: 0;
}

@media (min-width: 62rem) {
  /* FIT-CONTENT PÅ BRED SKJERM, og det er rettingen 20.09.2026.
     `width: 100%` strakk fargetabellen over hele arket — 1 152px for
     fire kolonner som trenger 666 — og hele slakken havnet i siste
     kolonne. Ved siden av sto noten bundet av 29em-målebåndet. Hver
     regel var riktig for seg, og sammen ga de en tabell som pekte mot
     høyre kant og en note som stoppet på midten.

     `fit-content` ALENE, ikke `max-content` + `max-width: 100%`. De to
     er samme ting for et vanlig blokkelement, og IKKE for en tabell:
     MÅLT i nettleser ga `max-content; max-width: 100%` 1 150px på
     fargetabellen, mens `fit-content` ga 580. En tabells brukte bredde
     regnes gjennom tabellalgoritmen, og et `max-width` på tabellboksen
     slår ut `max-content`-nøkkelordet framfor bare å kappe det.

     Førsteutkastet var den første varianten, og den gjorde ingenting.
     Den så riktig ut i CSS-en og var feil på skjermen — grunnen til at
     dette ble målt og ikke lest.

     `fit-content` er `min(max-content, max(min-content, stretch))`:
     tabellen blir så bred som innholdet trenger, og aldri bredere enn
     arket. Brede tabeller — lusetall med ni kolonner, lokalitetslista
     med 1 782 rader — fyller arket som før. Smale slutter der de
     slutter.

     Grensa er den SAMME 62rem som styrer scrollramma og det klebrige
     hodet. Tre regler på én grense er én ting å huske; tre grenser er
     tre steder å bomme. */
  table { width: fit-content; }
}

/* CAPTION ER ÉN LINJE. FORBEHOLDET ER EN NOTE.

   Første utgave la begge deler i captionen, og resultatet var fem
   linjer prosa før man så en tabellrad — «Lokalitetene i området,
   snapshot 2026-09-14. Kapasitetsenheten står ved tallet: den varierer
   mellom tonn, stykk, dekar og kvadratmeter, og et tall uten enhet er
   ubrukelig.» Det er to ulike ting: HVA tabellen er, og HVA MAN MÅ VITE
   for å lese den riktig. Den første skal stå der øyet lander, den andre
   der man ser etter når noe skurrer.

   Ingenting av forbeholdet er strøket — det er flyttet til
   `.tabellnote` under tabellen. Det er ikke småskrift i betydningen
   «det vi håper ingen leser»: noten har egen strek, egen plass og full
   bredde på målebåndet. Den er bare ikke i veien for tallene. */
caption {
  caption-side: top;
  text-align: left;

  /* Captionen ligger INNE i tabellen og dermed inne i scrollramma. En
     tabell som er bredere enn skjermen drar den med seg, og da er
     forbeholdet — som er det viktigste på siden — det første som
     havner utenfor kanten. MÅLT ved 390px: 29em er 464px, og halve
     setningen sto utenfor.

     `min()` lar målebåndet gjelde der det er plass, og skjermen
     gjelde der det ikke er. `vw` og ikke `%`, fordi prosenten her
     ville vært av TABELLEN, som er nettopp den som er for bred. */
  max-width: min(var(--maal-tekst), calc(100vw - 2 * var(--rom-16)));
  color: var(--farge-tekst);
  font-size: var(--fs-15);
  line-height: var(--lh-normal);
  padding: var(--rom-12) 0 var(--rom-12) var(--rom-16);
  margin-block-end: var(--rom-12);
  border-inline-start: var(--rom-4) solid var(--farge-merke);
}

/* NOTEN. Utenfor `.tabellramme`, og det er ikke tilfeldig: inne i
   ramma ville den fulgt tabellen sidelengs når tabellen scroller, og en
   note man må dra i for å lese er en note ingen leser. Samme feil
   captionen hadde før `min()`-taket. */
.tabellnote {
  max-width: var(--maal-tekst);
  margin: 0 0 var(--rom-44);
  padding-inline-start: var(--rom-16);
  border-inline-start: 1px solid var(--farge-kant-svak);
  color: var(--farge-tekst-svak);
  font-size: var(--fs-13);
  line-height: var(--lh-brod);
}

/* Noten hører til tabellen over seg, og avstanden skal si det.
   `:has()` framfor en egen klasse på ramma: faller den bort i en gammel
   nettleser, står noten bare litt lenger ned — den blir ikke feil. */
.tabellramme:has(+ .tabellnote) { margin-block-end: var(--rom-12); }

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--farge-hode);
  text-align: left;
  vertical-align: bottom;
  font-size: var(--fs-13);
  font-weight: 600;
  letter-spacing: var(--knip-1);
  line-height: var(--lh-tett);
  padding: var(--rom-8) var(--rom-12);
  border-block-end: 2px solid var(--farge-kant-sterk);
}

tbody th, tbody td {
  /* INGEN LODDRETTE STREKER. Et rutenett med streker i begge retninger
     gjør hver celle til en boks, og øyet må hoppe over en kant per
     kolonne. Radskillet er det eneste som bærer en tabell man leser
     langs. */
  border-block-end: 1px solid var(--farge-kant-svak);
  padding: var(--rom-8) var(--rom-12);
  text-align: left;
  vertical-align: top;
}

tbody th {
  font-weight: 500;
  white-space: nowrap;
}

/* Vekselvis tone. På en tabell med tre rader er den nesten usynlig; på
   /lokalitet/ med 1 782 rader og seks kolonner er den forskjellen på å
   kunne følge en rad tvers over og ikke. Tonen er 1,06:1 mot arket —
   den skal kunne ANES, ikke ses. */
tbody tr:nth-child(even) { background: var(--farge-stripe); }

tbody tr:last-child th, tbody tr:last-child td { border-block-end: 0; }

/* Tallkolonner høyrestilles. Sifrene er alt tabulære fra `body`. */
.tall { text-align: right; }
thead th.tall { text-align: right; }

/* `break-word`, IKKE `anywhere`. Forskjellen er ikke kosmetisk.

   `anywhere` lar nettleseren regne med bruddpunkter inne i ord når den
   finner tabellens MINSTE mulige bredde. Følgen er at en tabell alltid
   kan krympes til nesten ingenting, og siden `table` er 100 % bred,
   gjorde den det: MÅLT i nettleser ved 390px presset fargetabellen seg
   inn på skjermen framfor å scrolle, og cellene leste «forskrift/en»,
   «bestemmels/en». Scrollramma i avsnitt 3 ble aldri tatt i bruk fordi
   det aldri var noe å scrolle.

   `break-word` bryter det samme ordet når det FAKTISK ikke får plass,
   men teller ikke bruddet med i minstebredden. Tabellen blir da så
   bred som sitt lengste ord per kolonne, og det som ikke får plass
   scroller — som er hele poenget med ramma. */
tbody td, tbody th { overflow-wrap: break-word; }

/* Definisjonsliste: termen og forklaringen, der en punktliste ville
   gjort de tre gradene til likeverdige alternativer. De er ordinale. */
.grader {
  max-width: var(--maal-tekst);
  margin: 0 0 var(--rom-20);
}

.grader dt {
  font-weight: 600;
  margin-block-start: var(--rom-12);
}

.grader dd {
  margin: 0;
  padding-inline-start: var(--rom-16);
  border-inline-start: 1px solid var(--farge-kant-svak);
  color: var(--farge-tekst-svak);
}

/* ---------------------------------------------------------------- *
 * 4. DER KILDEN IKKE SIER NOE
 *
 * Uenighetsregelen i CSS. Cellene som sier «vi vet ikke» skal se
 * BEVISST tomme ut — ikke som data, og ikke som en feil.
 * ---------------------------------------------------------------- */

td[data-felt="farge_mangler"],
td[data-felt="eier_ukjent"],
td[data-felt="registerdata_mangler"] {
  color: var(--farge-tekst-svak);
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
}

/* Ingen bredderegler på fargecellene. Fram til 20.09.2026 sto det et
   `min-width: 11em` og et `max-width: 17em` her, og begge var der for å
   holde oppe ÉN celle med 62 tegn i seg. Da teksten ble kortet til
   «ikke oppgitt» — se `FARGE_MANGLER` i nettsted.py — falt behovet bort
   av seg selv. En CSS-regel som finnes for å kompensere for et
   innholdsvalg, er et innholdsvalg som burde vært gjort om. */

/* FELT-VERDI-TABELLENE har ett tak til, og det overlevde `fit-content`.
   Grunnen er én rad: `tillatelser` er en semikolonliste — «T-D-0009;
   T-D-0010; …» — og `max-content` legger hele lista på én linje. MÅLT:
   1 081px uten taket, 736 med. Taket tvinger den ene raden til å brekke
   og lar de 28 andre bestemme bredden.

   Ankrene er markupkontraktens egne og er stabile — se
   docs/beslutninger/2026-09-16-url-struktur.md — så en regel som henger
   på dem kan ikke drive fra malen. */
#akvakultur-register,
#enhetsregisteret-selskap { max-width: 46rem; }

/* ---------------------------------------------------------------- *
 * 5. TRAFIKKLYSET
 *
 * Fargen per produksjonsområde er DATA. Den bærer et
 * forvaltningsvedtak, og den er den eneste røde, gule eller grønne
 * tingen på hele nettstedet.
 *
 * ORDET ER BÆREREN, IKKE FARGEN. Cellen inneholder «rød», «gul» eller
 * «grønn» som tekst, satt i vanlig tekstfarge. Firkanten under er
 * tegnet med `::before` og finnes bare i CSS-en: slås stilarket av,
 * blir ordet stående alene og siden er like sann. Det er kravet fra
 * WCAG 1.4.1, men det er også kravet fra at noen skal kunne sitere
 * siden høyt.
 *
 * Firkanten er derfor heller ikke en verdi, og den kan ikke røre
 * cellens innhold — se regel 1 øverst i fila.
 * ---------------------------------------------------------------- */

td[data-felt="farge"]::before,
td[data-felt="prodomraade_status"]::before,
td[data-felt="farge_mangler"]::before {
  content: "";
  display: inline-block;
  inline-size: 0.8em;
  block-size: 0.8em;
  margin-inline-end: 0.55em;
  vertical-align: -0.02em;

  /* RINGEN ER NØYTRAL, og det er et valg. Var den en mørkere tone av
     samme farge, ville den gule firkantens synlighet hengt på den gule
     — og gul kan ikke nå 3:1 mot hvitt uten å slutte å være gul.
     #717a84 gir 3,58–4,36:1 mot hver flate en firkant står på. */
  border: 1px solid var(--ink-ring);
}

td.lys-rod::before   { background: var(--lys-rod); }
td.lys-gul::before   { background: var(--lys-gul); }
td.lys-gronn::before { background: var(--lys-gronn); }

/* PÅ MØRK FLATE er den nøytrale ringen for mørk til å gjøre jobben
   sin. Den er lys der, med samme begrunnelse: det er RINGEN som bærer
   at en gul rute er synlig, ikke gulen. */
.mork td[data-felt="prodomraade_status"]::before,
.mork td[data-felt="farge"]::before {
  border-color: rgba(231, 219, 208, 0.45);
}

/* BEVISST TOM, IKKE ØDELAGT. Samme rute, samme plass i rekka, stiplet
   og uten fyll: plassen finnes, og ingen har fylt den. En celle uten
   rute i det hele tatt ville sett ut som en rad der noe manglet. */
td[data-felt="farge_mangler"]::before {
  background: none;
  border-style: dashed;
}

/* ---------------------------------------------------------------- *
 * 6. LOKALITETSSIDEN
 *
 * 1 782 av 2 279 sider. Alt her er bygget for at den skal svare på
 * «hva er dette stedet, hva har skjedd med det, og hvor sikkert er
 * det» — i den rekkefølgen.
 * ---------------------------------------------------------------- */

.sidehode--lokalitet { padding-block-end: var(--rom-seksjon-stor); }

.sidehode-to {
  display: grid;
  gap: var(--rom-32) clamp(32px, 4vw, 64px);
  align-items: start;
}

@media (min-width: 68.75rem) {
  /* 1100px: fakta | kart. Overleveringens brytpunkt. */
  .sidehode-to { grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); }
}

.lok-tittel {
  font-size: var(--fs-h1-lok);
  line-height: 0.92;
  font-weight: 300;
  letter-spacing: var(--knip-3);
  color: var(--hav-tittel);
  margin: 0 0 var(--rom-14);
  max-width: 16em;
}

.lok-undertittel {
  margin: 0 0 var(--rom-28);
  font-size: var(--fs-15);
  color: var(--hav-sekundaer);
  max-width: none;
}

/* FAKTALISTA. `dl` og ikke `table`: fire etikett/verdi-par er en
   beskrivelsesliste, og en `<thead>` over dem ville vært semantikk vi
   fant på for å ha noe å fylle ut. */
.fakta {
  display: grid;
  /* 10,5rem og ikke 13: ved 13 fikk bare tre av fire par plass i
     venstre spalte på 1440, og det fjerde falt ned på en linje for seg
     med en tom halvside ved siden av. MÅLT i nettleser. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--rom-20) var(--rom-24);
  margin: 0 0 var(--rom-28);
}

.fakta > div { min-inline-size: 0; }

.fakta dt {
  font-size: var(--fs-13);
  color: var(--hav3);
  margin-block-end: var(--rom-4);
}

.fakta dd {
  margin: 0;
  font-size: var(--fs-17);
  line-height: var(--lh-tett);
  color: var(--hav-tegn);
}

.fakta a { color: var(--hav-tittel); text-decoration-color: var(--rust-lys); }
.fakta a:visited { color: var(--hav-tittel); }
.fakta a:hover { color: var(--rust-lys); }

.fakta-bi {
  display: block;
  margin-block-start: var(--rom-4);
  font-size: var(--fs-13);
  color: var(--hav3);
}

/* FARGERUTA I FAKTALISTA. Samme form som i tabellene — en leser som har
   lært at en fylt firkant betyr trafikklys, skal ikke måtte lære det på
   nytt her. Ordet står ved siden av, som overalt. */
.rute-foran::before {
  content: "";
  display: inline-block;
  inline-size: 0.72em;
  block-size: 0.72em;
  margin-inline-end: 0.45em;
  vertical-align: -0.02em;
  box-shadow: inset 0 0 0 1px rgba(231, 219, 208, 0.45);
}

.rute-foran.lys-rod::before   { background: var(--lys-rod); }
.rute-foran.lys-gul::before   { background: var(--lys-gul); }
.rute-foran.lys-gronn::before { background: var(--lys-gronn); }

.knapperad {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rom-10);
  margin: 0;
  max-width: none;
}

/* ---- posisjonskartet ---- */

.posisjon { margin: 0; }

.posisjonskart {
  display: block;
  inline-size: 100%;
  block-size: auto;
  /* Taket er der for at kartet ikke skal dra headeren dobbelt så høy
     som fakta ved siden av. Kvadratisk viewBox, så bredden følger. */
  max-block-size: 28rem;
  margin-inline: auto;
  background: var(--hav-dis);
  box-shadow: inset 0 0 0 1px rgba(231, 219, 208, 0.18);
}

/* PÅ POSISJONSKARTET er landet det man ser etter, og havet er
   bakgrunnen. Kontrasten snus derfor her: fyllet er tydeligere enn på
   oversiktskartet, der trafikklysfargene skal ha forrangen. */
.posisjonskart .kart-land path {
  fill: rgba(231, 219, 208, 0.13);
  stroke-opacity: 0.8;
}

.posisjon figcaption {
  margin-block-start: var(--rom-10);
  font-size: var(--fs-13);
  color: var(--hav3);
  max-width: none;
}

.posisjon-mangler { align-self: center; }

/* MARKØREN er en ring OG en prikk. Ringen alene er en sirkel på et
   kart; prikken alene forsvinner i en fjordarm. Sammen leses de som
   «her, nøyaktig». */
.kart-markor .markor-ring {
  fill: none;
  stroke: var(--rust-lys);
  stroke-width: 1.5;
}

.kart-markor .markor-prikk { fill: var(--rust-lys); }

/* ---- de to spaltene ---- */

.to-spalter {
  display: grid;
  gap: var(--rom-seksjon) clamp(32px, 4vw, 64px);
  align-items: start;
}

@media (min-width: 68.75rem) {
  .to-spalter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* EN BLOKK SOM ER MYE BREDERE ENN NABOEN skal få være det. Lusegrafen
   trenger plass; ukestripa gjør ikke. */
.to-spalter > .blokk:first-child:last-child { grid-column: 1 / -1; }

.blokk { min-inline-size: 0; }

.blokk-ingress {
  margin: calc(var(--rom-12) * -1) 0 var(--rom-20);
  font-size: var(--fs-14);
  color: var(--ink-dempet);
}

/* ---- de to tidsaksene ----
 *
 * OBSERVERT og OPPGITT har ULIK VISUELL FORM med vilje. Den første er
 * en loddrett akse med punkter — den leses nedover som en logg, og
 * nyeste post er i rust. Den andre er en TABELL, fordi kildens egne
 * datoer har en presisjonskolonne som må stå ved siden av hver rad.
 *
 * Forskjellen er ikke pynt. En flettet liste ville latt «17. juni 2024:
 * overført til X» (kildens påstand om noe som skjedde) stå ved siden av
 * «14. september 2026: eier_navn endret» (vår påstand om når vi så
 * det), og en leser ville lest begge som hendelser med dato.
 */

.historikk-forklaring {
  max-width: 62ch;
  font-size: var(--fs-14);
  color: var(--ink-dempet);
  margin-block-end: var(--rom-28);
}

.tidsakse {
  list-style: none;
  margin: 0 0 var(--rom-24);
  padding: 0 0 0 var(--rom-24);
  max-width: 62ch;
  position: relative;
}

/* Selve aksen: én strek gjennom hele lista. */
.tidsakse::before {
  content: "";
  position: absolute;
  inset-block: 0.55em 0.55em;
  inset-inline-start: 3px;
  inline-size: 1px;
  background: var(--papir3);
}

.tidsakse li {
  position: relative;
  margin: 0 0 var(--rom-18);
  padding-block-end: var(--rom-18);
  border-block-end: 1px solid rgba(11, 36, 48, 0.1);
}

.tidsakse li:last-child { border-block-end: 0; padding-block-end: 0; }

.tidsakse-punkt {
  position: absolute;
  inset-inline-start: calc(var(--rom-24) * -1);
  inset-block-start: 0.45em;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--ink-dempet);
}

/* NYESTE POST I RUST. Overleveringens krav, og det er ikke bare
   markering: en logg leses nedover, og øyet skal vite hvor toppen er. */
.tidsakse li:first-child .tidsakse-punkt { background: var(--rust); }

/* FØRSTE ØYEBLIKKSBILDE er en annen slags post: den sier hvor loggen
   BEGYNNER, ikke at noe skjedde. Åpen ring framfor fylt prikk. */
.tidsakse-forste .tidsakse-punkt {
  background: var(--papir);
  box-shadow: inset 0 0 0 1.5px var(--ink-dempet);
}

.tidsakse-topp {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.6em;
  margin: 0 0 var(--rom-4);
  max-width: none;
  font-size: var(--fs-13);
  color: var(--ink-dempet);
}

.tidsakse-topp time { color: var(--ink); font-weight: 500; }
.tidsakse-felt { color: var(--rust); }
.tidsakse-bi { font-style: italic; }

/* EN POST MED EN VERDENSDATO merkes, fordi resten av aksen er
   observasjonsdatoer. Rust som SKRIFT, ikke som flate — regelen fra
   avsnitt 1. */
.tidsakse-bi--verden { color: var(--rust); font-style: normal; }

.tidsakse-verdi {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5em;
  margin: 0;
  max-width: none;
  font-size: var(--fs-15);
}

.verdi-fra { color: var(--ink-dempet); }
.verdi-til { font-weight: 500; }
.pil { color: var(--ink-dempet); }

.tidsakse-forste .tidsakse-verdi {
  font-size: var(--fs-14);
  color: var(--ink-dempet);
}

.tomt {
  max-width: 62ch;
  padding: var(--rom-18) var(--rom-20);
  background: var(--papir2);
  color: var(--ink-dempet);
  font-size: var(--fs-14);
}

/* ---- lusegrafen ---- */

.graf { margin: 0 0 var(--rom-24); }

.lusegraf {
  display: block;
  inline-size: 100%;
  block-size: auto;

  /* En figur på papiret trenger en egen grunn for å leses som en
     figur. Innfelt flate, ikke hvit: nettstedet har ingen hvit flate. */
  background: var(--papir2);
}

/* SØYLENE ER ÉN FARGE. Ingen tiltaksgrense, ingen rust over en strek —
   grensa er ikke samlet inn, og en søyle farget etter en strek vi fant
   på ville vært en vurdering forkledd som data. Se `lusegraf()`. */
.lusegraf .soyler rect { fill: var(--hav5); }
.lusegraf .brakk rect { fill: var(--ink-dempet); opacity: 0.45; }

.lusegraf .akse line {
  stroke: var(--kart-gitter);
  stroke-width: 0.5;
}

.lusegraf .akse text {
  font-family: var(--skrift-tekst);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  fill: var(--ink-dempet);
}

figcaption {
  margin-block-start: var(--rom-10);
  max-width: var(--maal-tekst);
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
  color: var(--ink-dempet);
}

/* TEGNFORKLARINGEN under grafen. Ordet står ved hver form. */
.graf figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rom-6) var(--rom-18);
  max-width: none;
}

.tegn { display: flex; align-items: center; gap: 0.45em; }

.tegn-rute { inline-size: 12px; block-size: 12px; flex: none; }
.tegn-soyle { background: var(--hav5); }
.tegn-brakk { background: var(--ink-dempet); opacity: 0.45; block-size: 4px; }

/* ---- fisk til stede: ukestripa ---- */

.ukestripe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rom-6);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

/* EN RUTE PER OBSERVERT UKE, og ingen for uker vi ikke spurte i. En tom
   rute ville sett ut som «ingen fisk», og det er noe annet enn «vi vet
   ikke». Med to observerte uker er stripa to ruter, og det skal den
   være — se avvik 9 i oppdraget: at tallet er lite, skjules ikke. */
.ukerute {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: var(--rom-8) var(--rom-12);
  min-inline-size: 8rem;
  background: var(--papir2);
  box-shadow: inset 0 0 0 1px var(--papir3);
}

.ukerute--fisk {
  background: var(--hav5);
  box-shadow: none;
}

.ukerute-uke { font-size: var(--fs-12); color: var(--ink-dempet); }

.ukerute-svar {
  font-size: var(--fs-17);
  font-weight: 500;
  color: var(--ink);
}

.ukerute--fisk .ukerute-uke,
.ukerute--fisk .ukerute-svar { color: var(--soyle-tekst); }

/* ---- tallene i tabell ---- */

.tallboks {
  margin-block-start: var(--rom-20);
  border-block-start: 1px solid var(--papir3);
  padding-block-start: var(--rom-12);
}

.tallboks summary {
  cursor: pointer;
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--rust);
  padding-block: var(--rom-4);
}

.tallboks summary:hover { color: var(--rust-moerk); }
.tallboks[open] summary { margin-block-end: var(--rom-16); }

.tall-mono {
  font-family: var(--skrift-tall);
  font-variant-numeric: tabular-nums;
}

/* ---- siteringsboksen ---- */

.siterboks {
  background: var(--papir2);
  padding: var(--rom-24) var(--rom-28) var(--rom-28);
  margin-block-end: var(--rom-seksjon);
  box-shadow: inset 3px 0 0 0 var(--rust);
}

.siterboks-hode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rom-12);
  margin-block-end: var(--rom-16);
}

.siterboks h2 {
  margin: 0;
  font-size: var(--fs-26);
  font-weight: 400;
  max-width: none;
}

/* SITERINGSTEKSTEN. Markerbar, og den ER teksten — knappen kopierer
   den, den lager den ikke. Uten JavaScript er knappen skjult og
   teksten kan merkes med musa eller tastaturet. */
.siterbar {
  margin: 0 0 var(--rom-12);
  max-width: 78ch;
  font-size: var(--fs-15);
  line-height: var(--lh-luft);
  overflow-wrap: break-word;
}

.siterbar i { font-family: var(--skrift-tittel); font-size: 1.05em; }

.siterboks-note {
  margin: 0;
  max-width: 68ch;
  font-size: var(--fs-13);
  color: var(--ink-dempet);
}

.kopierknapp { font-size: var(--fs-13); padding: var(--rom-8) var(--rom-16); }

/* ---------------------------------------------------------------- *
 * 6b. OMRÅDESIDEN
 *
 * Tretten sider. FARGEN FØRST — det er det siden er til for.
 *
 * ## FYLLET SIER BELEGGET
 *
 * Tre grader, tre former, og ordet står uansett:
 *
 *     ordrett              heltrukket fyll
 *     kapitteloverskrift   heltrukket fyll, som ordrett: ordet STÅR,
 *                          bare i en overskrift
 *     kapittelhjemmel      tonet fyll (alfa .3) med 2 px innvendig kant
 *                          i full farge — det eneste leddet der vi tar
 *                          et steg kilden ikke tar
 *     ingen bestemmelse    skravur, samme mønster som på kartet og i
 *                          femårsstripa
 *
 * At skravuren er den SAMME formen overalt er et krav i
 * overleveringen, ikke en detalj: en leser som lærer at skravur betyr
 * «forskriften sier ingenting» skal ikke måtte lære det på nytt i
 * neste komponent.
 * ---------------------------------------------------------------- */

.runder { margin-block-start: var(--rom-40); }

.rundeliste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--rom-16);
  list-style: none;
  margin: var(--rom-16) 0 var(--rom-20);
  padding: 0;
  max-width: none;
}

.runde {
  margin: 0;
  padding: var(--rom-14) var(--rom-16) var(--rom-16);
  background: rgba(231, 219, 208, 0.05);
  box-shadow: inset 0 0 0 1px rgba(231, 219, 208, 0.16);
}

/* FLATA er fargen, og den ligger som et bånd øverst i blokka framfor
   som bakgrunn: en hel blokk i trafikklysfarge ville vært en mettet
   flate, og de er forbeholdt havet. */
.runde-flate {
  display: block;
  block-size: 10px;
  margin-block-end: var(--rom-12);
  background: rgba(231, 219, 208, 0.12);
}

.runde.lys-rod   .runde-flate { background: var(--lys-rod); }
.runde.lys-gul   .runde-flate { background: var(--lys-gul); }
.runde.lys-gronn .runde-flate { background: var(--lys-gronn); }

/* UTLEDET: tonet fyll med kant i full farge. Overleveringens egen
   oppskrift — «fyll i fargen med alfa ≈ .3 + 2 px innvendig kant i
   full farge». Den skiller «utledet av kapittelplassering» fra
   «ordlyd i forskriften» UTEN å bruke en annen farge. */
.runde--kapittelhjemmel .runde-flate { opacity: 0.3; }

.runde--kapittelhjemmel.lys-rod   .runde-flate { box-shadow: inset 0 0 0 2px var(--lys-rod); }
.runde--kapittelhjemmel.lys-gul   .runde-flate { box-shadow: inset 0 0 0 2px var(--lys-gul); }
.runde--kapittelhjemmel.lys-gronn .runde-flate { box-shadow: inset 0 0 0 2px var(--lys-gronn); }

/* BESLUTNING: fullt fyll som «ordlyd», men med en STIPLET underkant.
   Fargeordet står ordrett — det står bare i kunngjøringen og ikke i
   forskriften, og det er en forskjell i HVOR belegget er, ikke i hvor
   sikkert det er. Derfor ikke tonet ned som «utledet»: et gult område
   får ingen bestemmelse, og fraværet av en paragraf er ikke et
   svakere belegg for fargen. */
.runde--beslutning .runde-flate {
  border-block-end: 2px dashed rgba(231, 219, 208, 0.55);
}

.runde-sitat { font-size: var(--fs-12); margin-block-start: var(--rom-4); }
.runde-sitat summary { color: var(--rust-lys); cursor: pointer; }
.runde-sitat blockquote {
  margin: var(--rom-8) 0 0;
  padding-inline-start: var(--rom-10);
  border-inline-start: 2px solid var(--hav5);
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--hav-sekundaer);
}

/* INGEN BESTEMMELSE: skravur, samme mønster som overalt ellers. */
.runde--ingen .runde-flate {
  background-color: transparent;
  background-image: var(--skravur-moerk);
  box-shadow: inset 0 0 0 1px rgba(231, 219, 208, 0.25);
}

.runde p { margin: 0; max-width: none; }

.runde-aar {
  font-size: var(--fs-13);
  color: var(--hav3);
  margin-block-end: var(--rom-4);
}

.runde-farge {
  font-family: var(--skrift-tittel);
  font-size: var(--fs-26);
  font-weight: 400;
  line-height: 1;
  color: var(--hav-tittel);
  margin-block-end: var(--rom-8);
}

.runde-belegg {
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
  color: var(--hav-sekundaer);
  margin-block-end: var(--rom-8);
}

.runde-ellers {
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--hav-sekundaer);
  margin-block-end: var(--rom-4);
}

/* EN UENIGHET SKAL SE UT SOM EN. Ingen finnes i dag; regelen står
   likevel, fordi en framtidig uenighet ellers ville sett ut som enda
   en bekreftelse. */
.runde-ellers--uenig {
  color: var(--rust-lys);
  padding-inline-start: var(--rom-8);
  border-inline-start: 2px solid var(--rust-lys);
}

.runde-kilde { font-size: var(--fs-12); }
.runde-kilde a { color: var(--rust-lys); text-decoration: none; }
.runde-kilde a:visited { color: var(--rust-lys); }
.runde-kilde a:hover { text-decoration: underline; }

.rute--ordrett { background: var(--lys-gul); }

.rute--utledet {
  background: var(--lys-gul);
  opacity: 0.45;
  box-shadow: inset 0 0 0 2px var(--lys-gul);
}

.rute--beslutning {
  background: var(--lys-gul);
  border-block-end: 2px dashed var(--ink-dempet);
}

.saerskilt {
  max-width: 72ch;
  margin-block: var(--rom-20);
  padding: var(--rom-16) var(--rom-20);
  background: rgba(231, 219, 208, 0.06);
  box-shadow: inset 0 0 0 1px rgba(231, 219, 208, 0.18);
}

.saerskilt .etikett { margin-block-end: var(--rom-8); }

.saerskilt blockquote {
  margin: 0 0 var(--rom-10);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--hav-tekst);
}

.rundenote {
  max-width: 68ch;
  font-size: var(--fs-14);
  color: var(--hav-sekundaer);
  margin: 0;
}

.rundenote .rute-foran { white-space: nowrap; }

/* ---- tegnforklaring per runde ---- */

.rundefakta { margin-block: var(--rom-24); max-width: 72ch; }

.rundefakta-liste { margin: 0; }

.rundefakta-liste dt {
  font-family: var(--skrift-tittel);
  font-size: var(--fs-16);
  margin-block-start: var(--rom-14);
  color: var(--hav-tittel);
}

.rundefakta-liste dd { margin: var(--rom-4) 0 0; }

.rundefakta-kilde {
  font-family: var(--skrift-tekst);
  font-size: var(--fs-12);
  color: var(--hav-sekundaer);
  margin-inline-start: var(--rom-8);
}

.rundefakta-kilde a { color: var(--rust-lys); text-decoration: none; }
.rundefakta-kilde a:visited { color: var(--rust-lys); }
.rundefakta-kilde a:hover { text-decoration: underline; }

.rundefakta-hvor { color: var(--hav-sekundaer); font-size: var(--fs-12); }

.rundefakta-avvik {
  display: block;
  margin-block-start: var(--rom-4);
  padding-inline-start: var(--rom-10);
  border-inline-start: 2px solid var(--rust-lys);
  font-size: var(--fs-12);
  color: var(--hav-sekundaer);
}

/* ---- selskapsdata-delen på ukessiden ---- */

.egen-del {
  margin-block: var(--rom-32);
  padding: var(--rom-16) var(--rom-20);
  background: var(--papir2);
  box-shadow: inset 0 0 0 1px var(--papir3);
}

.egen-del > summary {
  font-family: var(--skrift-tittel);
  font-size: var(--fs-19);
  cursor: pointer;
}

.egen-del-tall {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.egen-del > .tabellnote { max-width: 68ch; margin-block-start: var(--rom-12); }

/* ---- søkefeltet i området ---- */

.omraadesok {
  display: flex;
  flex: 0 1 26rem;
  background: var(--papir2);
  box-shadow: inset 0 0 0 1px var(--papir3);
}

.omraadesok label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.omraadesok input {
  flex: 1;
  min-inline-size: 0;
  border: 0;
  background: transparent;
  padding: var(--rom-10) var(--rom-14);
  font: 400 var(--fs-14) / 1.2 var(--skrift-tekst);
  color: var(--ink);
}

.omraadesok input::placeholder { color: var(--ink-dempet); }
.omraadesok input:focus { outline: 2px solid var(--rust); outline-offset: -2px; }
.omraadesok .knapp { padding: var(--rom-10) var(--rom-18); }

/* ---- biomassegrafen ----
   Samme grammatikk som lusegrafen: søyler i `--hav5` på innfelt flate.
   Bredere søyler, fordi 104 måneder er noe helt annet enn 765 uker. */
.biomassegraf .soyler rect { fill: var(--hav5); }

/* ---------------------------------------------------------------- *
 * 6c. SELSKAPSSIDEN
 *
 * 481 sider. Nøkkeltallene i overskriften er sidens svar på «hvor stort
 * er dette», og de står som TALL og ikke i en setning: fire størrelser
 * noen vil sammenligne, er feil form for prosa.
 *
 * `dl` og ikke `table`. Fire etikett/verdi-par er en beskrivelsesliste;
 * en tabell ville krevd en `<caption>` og en `<thead>` vi måtte funnet
 * på. Rekkefølgen i markupen er tall-så-etikett fordi det er den
 * rekkefølgen en skjermleser skal lese dem i («128 — lokaliteter nå»).
 * At etiketten står UNDER tallet visuelt er `order`, og det er grensa
 * mellom fritt og bundet: markupen bærer betydningen.
 * ---------------------------------------------------------------- */

.nokkeltall {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rom-24) var(--rom-44);
  margin: var(--rom-32) 0 var(--rom-28);
  padding-block-start: var(--rom-16);
  border-block-start: 2px solid var(--rust-lys);
}

.nokkeltall > div {
  display: flex;
  flex-direction: column;
  min-inline-size: 7rem;
}

.nokkeltall dt {
  order: 2;                       /* etiketten UNDER tallet */
  font-size: var(--fs-13);
  line-height: var(--lh-tett);
  color: var(--hav3);
  max-inline-size: 16ch;
}

.nokkeltall dd {
  order: 1;
  margin: 0 0 var(--rom-6);
  font-family: var(--skrift-tittel);
  font-weight: 300;
  font-size: var(--fs-nokkeltall);
  line-height: 1;
  letter-spacing: var(--knip-2);
  color: var(--hav-tittel);
}

/* EN DATO ELLER EN SUM MED ENHET er ikke et tall på 52 px. «30. desember
   2022» i den størrelsen brekker over tre linjer og slutter å være et
   nøkkeltall. Verdien står mindre, men fortsatt i serifen: det er
   fortsatt svaret. */
.nokkeltall .nokkeltall-liten {
  font-size: var(--fs-22);
  line-height: 1.15;
  letter-spacing: var(--knip-1);
}

/* EIERSKAPSLINJA. «Kom til» og «Gikk ut» skal kunne skilles uten å lese
   ordet — men ordet står, som overalt ellers: en strek i kanten er en
   FORSTERKNING av teksten, aldri erstatningen for den. */
.retning-inn th { box-shadow: inset 3px 0 0 0 var(--lys-gronn); }
.retning-ut th { box-shadow: inset 3px 0 0 0 var(--ink-dempet); }
.retning-inn th, .retning-ut th { padding-inline-start: var(--rom-14); }

/* ---------------------------------------------------------------- *
 * 6d. ENDRINGSSIDENE
 *
 * Sidens eneste sidetype som er om TIDA framfor om en entitet, og
 * nettstedets egentlige produkt: registrene viser nå, og bevegelsen
 * finnes ikke noe annet sted.
 * ---------------------------------------------------------------- */

.ukenav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rom-10) var(--rom-24);
  align-items: baseline;
  margin-block-end: var(--rom-20);
  font-size: var(--fs-14);
}

.ukenav a { color: var(--hav-tegn); text-decoration: none; }
.ukenav a:visited { color: var(--hav-tegn); }
.ukenav a:hover { color: var(--rust-lys); text-decoration: underline; }
.ukenav .mangler { color: var(--hav3); }

.uke-sammendrag--bred p { max-width: 54ch; }

/* ---- filteret ----
 *
 * Skjemaet er `hidden` i markupen og slås på av skriptet.
 * LENKELISTA under er det som virker uten, og hver lenke går til en
 * EKTE side. En avkrysningsboks som ikke gjør noe er verre enn ingen
 * boks — samme regel som kopierknappen.
 */

.typefilter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rom-8) var(--rom-16);
  margin-block: var(--rom-24) var(--rom-16);
  padding: var(--rom-12) var(--rom-16);
  background: var(--papir2);
}

.typefilter-etikett {
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--ink-dempet);
}

.typefilter-boks {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font-size: var(--fs-13);
  cursor: pointer;
}

.typefilter-boks input { accent-color: var(--rust); }

/* DEN VALGTE TYPEN er merket med aksenten som STREK, ikke som flate —
   regelen fra avsnitt 1 gjelder her som overalt. */
.typemerke--valgt {
  color: var(--rust);
  box-shadow: inset 0 0 0 1px var(--rust), inset 0 -3px 0 0 var(--rust);
}

.typemerke--valgt:visited { color: var(--rust); }

/* ---- nedlastingslinja ---- */

.nedlasting {
  margin-block-start: var(--rom-20);
  max-width: none;
  font-size: var(--fs-14);
}

.nedlasting-note {
  display: block;
  margin-block-start: var(--rom-4);
  font-size: var(--fs-13);
  color: var(--ink-dempet);
}

/* ---- ukeoversikten ----
   En bred tabell med én kolonne per type. Den scroller i sin egen
   ramme på smal skjerm, som alle andre brede tabeller. */

#endringer-uker td.mangler { color: var(--ink-dempet); }

/* ---------------------------------------------------------------- *
 * 6e. OM-SIDEN
 *
 * Den ene siden som er en TEKST og ikke en tabell. Målebåndet gjelder
 * derfor strengt: `--maal-tekst` er 27em, MÅLT mot glyffbreddene i IBM
 * Plex Sans på de 4 519 tegnene som står her. Overleveringen sier
 * «maks ~760px», og 27em i 15px er 405px … som er for smalt for en
 * side med tabeller i seg. `--maal-om` er den egne verdien:
 * 760px, som er overleveringens, og den gjelder BARE denne siden.
 *
 * At de to tallene er ulike er ikke en motsigelse. `--maal-tekst` er
 * for en note ved siden av en tabell; dette er hovedteksten på en side
 * uten noe ved siden av.
 * ---------------------------------------------------------------- */

:root { --maal-om: 760px; }

.om-losen {
  margin: var(--rom-12) 0 0;
  font-family: var(--skrift-tittel);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-22);
  color: var(--hav-tegn);
  max-width: none;
}

.om-to {
  display: grid;
  gap: var(--rom-32) clamp(32px, 5vw, 72px);
  padding-block: var(--rom-seksjon) var(--rom-seksjon-stor);
}

@media (min-width: 62rem) {
  .om-to { grid-template-columns: 15rem minmax(0, 1fr); }

  /* KLEBRIG INNHOLDSLISTE. `top` regnes av seksjonsluften, ikke av et
     tall: lista skal stoppe der teksten begynner. */
  .om-innhold {
    position: sticky;
    top: var(--rom-32);
    align-self: start;
  }
}

.om-innhold ol {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  font-size: var(--fs-14);
}

.om-innhold li { margin-block-end: var(--rom-8); }
.om-innhold a { color: var(--ink); text-decoration: none; }
.om-innhold a:visited { color: var(--ink); }
.om-innhold a:hover { color: var(--rust); text-decoration: underline; }

.om-tekst { min-inline-size: 0; max-inline-size: var(--maal-om); }

/* HOVEDTEKSTEN har sitt eget målebånd. En `.tabellnote` inni beholder
   sitt: en note ved siden av en tabell leses på en annen måte enn et
   avsnitt i en artikkel. */
.om-tekst p, .om-tekst ul, .om-tekst ol, .om-tekst dl {
  max-width: var(--maal-om);
}

.om-tekst .tabellnote { max-width: var(--maal-tekst); }

.om-tekst h2 {
  font-size: var(--fs-30);
  margin-block-start: var(--rom-seksjon);
  padding-block-end: var(--rom-8);
  border-block-end: 1px solid var(--papir3);
  max-width: var(--maal-om);
}

.om-tekst h2:first-child { margin-block-start: 0; }

/* ---------------------------------------------------------------- *
 * 6f. SØKESIDEN
 *
 * Trefflista tegnes av `/sok.js`, og den er det ENESTE på nettstedet
 * som ikke står i kildekoden. Det bryter ikke regelen: et søketreff er
 * ikke et tall fra et register — det er en vei til siden der tallet
 * står, og den siden er statisk.
 * ---------------------------------------------------------------- */

.sok--side { max-inline-size: 700px; margin-block-start: var(--rom-24); }

.sokeresultat { min-block-size: 2em; }

.sok-melding {
  font-size: var(--fs-14);
  color: var(--ink-dempet);
  margin-block-end: var(--rom-20);
}

.sokeliste {
  list-style: none;
  margin: 0 0 var(--rom-seksjon);
  padding: 0;
  max-width: none;
}

.sokeliste li {
  margin: 0 0 var(--rom-20);
  padding-block-end: var(--rom-20);
  border-block-end: 1px solid rgba(11, 36, 48, 0.1);
  max-inline-size: 70ch;
}

.sokeliste li:last-child { border-block-end: 0; }

.sokeliste > li > a {
  font-family: var(--skrift-tittel);
  font-size: var(--fs-22);
  font-weight: 400;
  text-decoration: none;
  color: var(--ink);
}

.sokeliste > li > a:visited { color: var(--besokt); }
.sokeliste > li > a:hover { color: var(--rust); text-decoration: underline; }

.sok-utdrag {
  margin: var(--rom-6) 0 var(--rom-4);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  max-width: none;
}

/* TREFFET MARKERES MED EN STREK, ikke med en flate.
   Nettleserens `<mark>` er gul, og gul er DATA her — det er
   trafikklyset. Regelen fra avsnitt 1 gjelder: aksenten opptrer bare
   som skrift eller strek, og trafikklyset bare som fylt firkant.
   Et gult søketreff ville brutt begge. */
.sok-utdrag mark {
  background: none;
  color: inherit;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 0 var(--rust);
}

.sok-url {
  margin: 0;
  max-width: none;
  font-family: var(--skrift-tall);
  font-size: var(--fs-12);
  color: var(--ink-dempet);
}

.sok-uten {
  padding-block-start: var(--rom-32);
  border-block-start: 1px solid var(--papir3);
}

/* ---------------------------------------------------------------- *
 * 7. BUNNTEKSTEN
 *
 * Attribusjonen er en lisensplikt, ikke en kolofon. Den skal være
 * lesbar, og den skal ikke se bort-designet ut.
 * ---------------------------------------------------------------- */

footer {
  max-width: var(--maal-side);
  margin: 0 auto;
  padding: var(--rom-40) var(--rom-32) var(--rom-56);
  color: var(--farge-tekst-svak);
  font-size: var(--fs-15);
  line-height: var(--lh-normal);
}

footer h2 {
  font-size: var(--fs-17);
  color: var(--farge-tekst);
  border-block-end: 0;
  margin: 0 0 var(--rom-12);
  padding-block-end: 0;
}

footer ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--rom-20);
  max-width: var(--maal-tekst);
}

footer li {
  padding-inline-start: var(--rom-16);
  border-inline-start: 2px solid var(--farge-kant-svak);
  margin-block-end: var(--rom-12);
}

footer p { max-width: var(--maal-tekst); margin: 0; }

/* ---------------------------------------------------------------- *
 * 8. SMALE SKJERMER
 * ---------------------------------------------------------------- */

@media (max-width: 48rem) {
  /* Arket slutter å være et ark. Rammen rundt kostet 2rem i bredde på
     hver side, og på 360px er det 11 % av skjermen brukt på en kant. */
  body { background: var(--farge-ark); }

  .topp, .hero, main, footer {
    padding-inline: var(--rom-16);
    border-inline: 0;
  }

  /* Båndet beholder farge og strek, men ikke luften: 3rem over og under
     er en tredjedel av en telefonskjerm brukt på ingenting. */
  .hero { padding-block: var(--rom-32) var(--rom-24); }
  .nokkeltall { gap: var(--rom-20) var(--rom-32); }

  .topp { gap: var(--rom-8) var(--rom-16); }
  .topp nav { font-size: var(--fs-13); }

  main { padding-block: var(--rom-24) var(--rom-40); }

  h1 { font-size: var(--fs-30); }
  h2 { font-size: var(--fs-19); }

  /* Tabellen er alt i en scrollende ramme her (se avsnitt 3). Ramma
     får gå ut i margen, så en bred tabell bruker hele skjermen. */
  .tabellramme, .kartramme {
    margin-inline: calc(var(--rom-16) * -1);
    padding-inline: var(--rom-16);
  }
}

/* ---------------------------------------------------------------- *
 * 9. PAPIR
 *
 * En side som skal siteres blir skrevet ut. Uten dette skrives den ut
 * med grå flater og uten å si hvor lenkene peker.
 *
 * ## HVIT FLATE ER STANDARD, OG DET GJØR SKRIFTFARGER FARLIGE
 *
 * Nettleseren dropper bakgrunnsfarger ved utskrift med mindre leseren
 * har skrudd på «skriv ut bakgrunn». En skriftfarge som er lys FORDI
 * flata under er mørk, blir da nesten usynlig på hvitt papir.
 *
 * Det gjelder nøyaktig ett sted, og det er hero-båndet: `--hav-tittel`
 * og `--hav-tekst` er valgt for å stå på hav. Skrives siden ut uten
 * flata, er forsidens overskrift og alle fire nøkkeltallene borte.
 * Reglene under setter dem til svart framfor å stole på at båndet kom
 * med.
 *
 * SVG-FLATENE er motsatt: kart og graf setter `background` på selve
 * elementet, og der er det ikke fargen som er problemet — det er at
 * ramma og gradnettet skal stå igjen når flata forsvinner. De er tegnet
 * i strek og ikke i fyll, og overlever derfor.
 * ---------------------------------------------------------------- */

@media print {
  /* Navigasjon på papir er ni ord som ikke kan klikkes. Brødsmula blir
     stående: den sier hvor i nettstedet arket kom fra. */
  .topp nav { display: none; }
  body { background: #fff; color: #000; font-size: 10pt; }
  main, footer { max-width: none; border: 0; padding: 0; }

  /* Båndet er en flate på skjerm og en tekstblokk på papir. */
  .hero {
    max-width: none;
    padding: 0 0 var(--rom-24);
    background: #fff;
    color: #000;
    border-block-end: 2px solid #000;
  }
  .hero h1, .hero .ingress, .hero .datolinje,
  .nokkeltall dt, .nokkeltall dd, .hero a { color: #000; }

  /* `clamp(..., 1.4rem + 3.4vw, 3.5rem)` regner mot papirbredden ved
     utskrift, og 3,5rem på en A4 er en overskrift som tar en femtedel
     av arket. Tilbake til skalaens toppsteg. */
  .hero h1 { font-size: var(--fs-30); }
  .nokkeltall { border-block-start-color: #000; }

  .lusegraf, .kart { background: #fff; }

  .tabellramme, .kartramme { overflow: visible; }
  thead th { position: static; }
  tbody tr:nth-child(even) { background: none; }
  a { color: #000; }
  table, figure { break-inside: avoid; }
  thead { display: table-header-group; }
}