.ifpi-stat-page .venue-page-hero {
  border-bottom: 1px solid var(--border);
}

.ifpi-stat-page .venue-page-hero h1 {
  max-width: 760px;
}

.ifpi-stat-page .venue-page-hero .lead {
  max-width: 760px;
}

.ifpi-editor-note {
  max-width: 760px;
  margin-top: 20px;
  color: var(--text-muted);
  font-size: 0.88rem;
}

/* ------------------------------------------------------------
   FOLDFIGUREN
   Heltebildet er en moerk gradient i BEGGE temaer, saa figuren her
   har faste farger med vilje. Den arver ikke --data-hoy/--data-mass,
   som er stilt inn mot kortflaten.

   ENDRET 05.09.2026: figuren viste seks aarssoeyler for IFPIs
   innspilt-marked, altsaa 1,5 av bransjens 7,2 milliarder. Naar sida
   dekker hele verdikjeden, maa folden ramme hele verdikjeden. Figuren
   er naa fire vannrette soeyler, gjenbrukt fra .ifpi-formatrad, med
   .ifpi-skala som felles linjal. Reglene under maler den komponenten
   i heltefargene; geometrien og responsen er husets egen og dupliseres
   ikke.
   ------------------------------------------------------------ */
.ifpi-stat-page .ifpi-hero-figur {
  --data-hoy: var(--accent);
  /* #6b7688 og ikke lysere: malt 4,05:1 mot heltebakgrunnen, altsaa godt over
     3:1-kravet, samtidig som store soeyleflater ikke overdoever heroen. */
  --data-mass: #6b7688;
  --data-grunn: #8b95a4;
  --data-spor: #262b36;
  margin: 26px 0 0;
}

/* Etikettene i foldfiguren. Uten disse arver de --text, som er naer-svart i
   lyst tema, paa en flate som er moerk i BEGGE temaer. Samme felle som tok
   aarsetikettene i den gamle heltefiguren 04.09.2026; designgaten ser den
   ikke, fordi heroen ligger utenfor <main>. */
.ifpi-stat-page .ifpi-hero-figur .ifpi-forstorring__tittel,
.ifpi-stat-page .ifpi-hero-figur .ifpi-formatrad__navn,
.ifpi-stat-page .ifpi-hero-figur .ifpi-formatrad__tall { color: var(--hero-ink); }

.ifpi-stat-page .ifpi-hero-figur .ifpi-formatrad__merk,
.ifpi-stat-page .ifpi-hero-figur .ifpi-formatrad__andel,
.ifpi-stat-page .ifpi-hero-figur .ifpi-skala__merke { color: var(--hero-ink-muted); }

/* Linjalen deler kant med heltebildet, ikke med kortflaten. */
.ifpi-stat-page .ifpi-hero-figur .ifpi-skala {
  border-bottom-color: rgba(255, 255, 255, 0.22);
  margin-top: 12px;
}

.ifpi-stat-page .ifpi-hero-figur .ifpi-tegnforklaring {
  margin: 0 0 14px;
}

.ifpi-stat-page .ifpi-hero-figur .ifpi-tegnforklaring li { color: var(--hero-ink); }

.ifpi-stat-page .ifpi-hero-figur__note {
  margin: 12px 0 0;
  color: var(--hero-ink-faint);
  font-size: 0.86rem;
}

/* Todelt helte fra 1024. Under det stables alt, og figuren staar etter
   knappene: primaerhandlingen skal ikke skyves under folden paa mobil. */
@media (min-width: 1024px) {
  .ifpi-stat-page .venue-page-hero .container {
    display: grid;
    align-items: start;
    column-gap: clamp(32px, 4vw, 68px);
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    grid-template-areas:
      "smule   smule"
      "merke   figur"
      "tittel  figur"
      "meta    figur"
      "ingress figur"
      "knapper figur"
      "notat   figur";
  }

  /* Lesebredden styres av kolonnen her, ikke av 820px-taket i style.css. */
  .ifpi-stat-page .venue-page-hero .container > * { max-width: none; }

  .ifpi-stat-page .venue-page-hero .breadcrumb { grid-area: smule; }
  .ifpi-stat-page .venue-page-hero .section-badge {
    grid-area: merke;
    justify-self: start;
  }
  .ifpi-stat-page .venue-page-hero h1 { grid-area: tittel; }
  .ifpi-stat-page .venue-page-hero .venue-hero-meta { grid-area: meta; }
  .ifpi-stat-page .venue-page-hero .lead { grid-area: ingress; }
  .ifpi-stat-page .venue-page-hero .hero-actions { grid-area: knapper; }
  .ifpi-stat-page .venue-page-hero .ifpi-editor-note { grid-area: notat; }

  /* start, ikke center: figuren skal moete teksten i overkant. En sentrert
     figur ville lagt et tomrom over noekkeltallene. */
  .ifpi-stat-page .ifpi-hero-figur {
    align-self: start;
    grid-area: figur;
    margin-top: 6px;
  }
}

.ifpi-editor-note a {
  color: inherit;
  font-weight: 700;
  text-underline-offset: 3px;
}

.ifpi-key-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.ifpi-key-card {
  min-width: 0;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--bg-card);
  padding: 22px;
}

.ifpi-key-card strong,
.ifpi-key-card span {
  display: block;
}

.ifpi-key-card strong {
  /* --accent-ink, ikke --accent: den rene gule aksenten gir 1,56:1 mot det lyse
     kortet og faller under AA selv for stor tekst. --accent-ink er samme
     merkefarge nedtonet i lys modus og identisk gul i mørk modus. */
  color: var(--accent-ink);
  font-family: "Outfit", sans-serif;
  font-size: clamp(2rem, 4vw, 3.35rem);
  letter-spacing: -0.045em;
  line-height: 1;
}

.ifpi-key-card span {
  margin-top: 9px;
  color: var(--text);
  font-weight: 700;
  line-height: 1.4;
}

.ifpi-key-card small {
  display: block;
  margin-top: 7px;
  color: var(--text-muted);
  line-height: 1.45;
}

.ifpi-data-label {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  margin-bottom: 14px;
  padding: 3px 10px;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ifpi-data-label--calculated {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
  color: var(--text);
}

.ifpi-chart {
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--bg-card);
  /* margin-inline: 0 er ikke pynt. Nettleserens standard for <figure> er
     margin: 1em 40px, og figurene sto derfor 80 px smalere enn broedteksten,
     tabellene og resten av kolonnen (malt 04.09.2026: 1080 mot 1160 px).
     Ett rutenett, en venstrekant. */
  margin: 24px 0 0;
  padding: clamp(18px, 4vw, 34px);
}

.ifpi-chart figcaption {
  color: var(--text);
  font-weight: 800;
  text-wrap: balance;
}

.ifpi-chart__note {
  max-width: 74ch;
  margin-top: 8px;
  color: var(--text-muted);
  /* Se merknaden paa .ifpi-table-note: 13,5 px er gulvet for metodetekst. */
  font-size: 0.87rem;
  line-height: 1.55;
}

/* En merknad som foelger en akse innleder NESTE felt, den avslutter ikke det
   forrige. Uten dette sto den 8 px under aarsraden og 22 px over figuren den
   gjelder, og leste som bildetekst til feil felt. */
.ifpi-akse + .ifpi-chart__note { margin-top: 26px; }

.ifpi-table-note {
  margin-top: 12px;
  color: var(--text-muted);
  /* Ikke under 0,87rem: akse-, kilde- og metodetekst under en figur skal maale
     minst 13,5 px (DESIGN-WORKFLOW, «Datagrafikk og kildehenvisninger»).
     0,82rem malte 13,1 px. */
  font-size: 0.87rem;
}

/* ============================================================
   DATAGRAFIKK
   ------------------------------------------------------------
   Geometrien ligger som ekte inline SVG i HTML-en. Hver koordinat
   er regnet fra data/ifpi-norge-marked-2025.json, ikke tegnet av
   JavaScript ved lasting: siden er komplett med JS slaatt av.

   ALL TEKST ER HTML, aldri SVG-tekst. Malt 04.09.2026: figurflaten
   er 234 px inne i 390-viewporten og 1012 px inne i 1280. En SVG
   som skaleres 4,3x kan ikke holde et fast punktgulv, og
   13,5 px-kravet til akse- og dataetiketter ville broetet paa
   mobil. Derfor preserveAspectRatio="none" med hoeyden fra CSS, og
   etikettene i et rutenett med de samme seks kolonnene som soeylene.
   Rutenettcellene og soeylene deler senterlinje fordi begge deler
   bredden i seks like felt: justeringen foelger av konstruksjonen
   og kan ikke gli fra hverandre naar bredden endrer seg.

   TO DATAFARGER, begge med en navngitt jobb:
   --data-hoy  stoerrelsen figuren fremhever (norsk repertoar,
               aarets vekst, stroemming). Husets aksent.
   --data-mass konteksten den maales mot (totalmarkedet, det som
               ikke er stroemming).
   Aksenten er derfor fortsatt sparsom: den er alltid det ene
   tallet figuren handler om, aldri hele figuren.

   Verdiene er malt mot kortflaten 04.09.2026. Kravet er 3:1
   (WCAG 1.4.11, grafikk som baerer mening):
     lyst   --data-hoy  #A87F00 = 3,53:1   --data-mass #5b6472 = 5,73:1
     moerkt --data-hoy  #FFC107 = 10,79:1  --data-mass #6b7688 = 3,83:1
   Den rene aksenten #FFC107 maaler 1,70:1 mot den lyse kortflaten
   og kan derfor ikke baere en flate i lyst tema. #A87F00 er samme
   merkefarge moerknet, etter samme prinsipp som --accent-ink.
   ============================================================ */
.ifpi-stat-page {
  --data-hoy: #A87F00;
  --data-mass: #5b6472;
  --data-spor: #e9ebef;
  --data-grunn: #8a8a8a;
}

[data-theme="dark"] .ifpi-stat-page {
  --data-hoy: #FFC107;
  --data-mass: #6b7688;
  --data-spor: #222835;
  --data-grunn: #606a7e;
}

.ifpi-graf {
  display: block;
  width: 100%;
}

.d-mass { fill: var(--data-mass); }
.d-hoy { fill: var(--data-hoy); }
.d-spor { fill: var(--data-spor); }
/* Klammen under baandet sier hvilken del av det som forstoerres lenger nede.
   Den avloeser trakten som sto her fram til 04.09.2026.

   FORKASTET: trakten var en polygon fra baandets skille (842,81) ut til full
   bredde, i en SVG med preserveAspectRatio="none". Vertikaler og horisontaler
   overlever den strekkingen; diagonaler gjoer det ikke. Over 1 012 px bredde og
   30 px hoeyde ble skraakanten en 1 px strek med 2 graders helning, og fyllet
   (--data-spor) maalte 1,33:1 mot kortflaten. Leseren saa ikke en trakt, men
   en strek som saa ut som en tegnefeil. En klamme bruker bare vertikaler og
   horisontaler, og kan derfor ikke forvrenges av det samme strekket. */
.d-brakett {
  fill: none;
  stroke: var(--data-grunn);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* Alle streker er non-scaling: uten den ville en 1 px grunnlinje bli 3 px paa
   desktop og et halvt piksel paa mobil, fordi SVG-ene strekkes i to akser. */
.d-grunnlinje,
.d-ref,
.d-skille-baand,
.d-akse-merke,
.d-linje {
  vector-effect: non-scaling-stroke;
}

.d-grunnlinje {
  stroke: var(--data-grunn);
  stroke-width: 1;
}

.d-ref {
  stroke: var(--data-grunn);
  stroke-width: 1;
  stroke-dasharray: 5 5;
}

/* .d-skille sto her fram til 04.09.2026 og delte omsetningsfigurens nivaafelt
   fra vekstfeltet. Nivaafeltet er borte, figuren har ett felt, og skillet har
   ingenting aa skille. */

/* Trinnlinjene i vannfallet: den korte streken fra toppen av ett trinn bort til
   foten av det neste. Uten den leser de fem svevende trinnene som fem loesrevne
   klosser, og det er nettopp SAMMENHENGEN mellom dem figuren handler om.

   Streken staar stille som grunnlinja og de stiplede referanselinjene: den
   legger ikke til en verdi, den viser at neste trinn starter der forrige
   sluttet. Samme behandling som .d-ref i andelsfiguren, som ogsaa ligger paa en
   datastyrt hoeyde og likevel er ramme. Mattere enn grunnlinja fordi den er
   kort og ligger inne i plottet, ikke under det. */
.d-trinnlinje {
  stroke: var(--data-grunn);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}

/* Skillene inne i formatbaandet males i kortfargen: de er mellomrom, ikke
   streker, og skal lese som luft mellom segmentene. */
.d-skille-baand {
  stroke: var(--bg-card);
  stroke-width: 2;
}

/* Skalamerkene under de forstoerrede soeylene staar paa 25, 50 og 75
   millioner og binder hver soeyle til linjalen over.

   FORSOEKT OG FORKASTET 04.09.2026: samme merker tegnet TVERS GJENNOM soeyla,
   i kortfargen, altsaa med samme virkemiddel som skillene i baandet. Malt paa
   390 og 1280: fysisk salg leste da som fire like blokker, ikke som en soeyle
   paa 87,8 av 100. Et skille inne i en flate betyr at flaten er delt, og det
   er den ikke. Merkene ligger derfor UNDER soeyla, 4 px hoeye, i aksefargen,
   altsaa samme spraak som merkene paa linjalen. */
.d-akse-merke {
  stroke: var(--data-grunn);
  stroke-width: 1;
}

.d-linje {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Tre signaler skiller seriene, ikke bare farge: heltrukket mot stiplet, og
   navnet i tegnforklaringen. Kontrollert i lys og moerk modus. */
.d-linje--mass {
  stroke: var(--data-mass);
  stroke-dasharray: 8 6;
}

.d-linje--hoy { stroke: var(--data-hoy); }

.d-gap { stroke: none; }

/* Flaten mellom kurvene er to ulike utsagn, og har derfor to toner: gul der
   norsk repertoar ligger over markedet, graa der det har falt under. */
.d-gap--over {
  fill: var(--data-hoy);
  opacity: 0.16;
}

.d-gap--under {
  fill: var(--data-mass);
  opacity: 0.42;
}

/* Flaten under publikumskurven. Den baerer ingen egen maaling, den gjoer
   pandemifallet til et hull i stedet for en knekk paa en tynn strek, og den er
   derfor svak med vilje: linja over har full kontrast og eier tallet. */
.d-flate {
  fill: var(--data-hoy);
  stroke: none;
  opacity: 0.15;
}

/* Loddrett merke i publikumsfiguren. Loddrett og ikke skraatt av samme grunn
   som aksebruddet ligger i CSS: figurene har preserveAspectRatio="none", og
   bare vannrette og loddrette linjer overlever den strekkingen uendret. */
.d-lodd {
  stroke: var(--data-grunn);
  stroke-width: 1;
  stroke-dasharray: 4 5;
  vector-effect: non-scaling-stroke;
}

/* Publikumsfiguren. Hoeyere enn de andre fordi kurven spenner fra 23 til 62
   prosent OG skalaen starter paa null: uten hoeyde ville pandemifallet, som er
   figurens hele poeng, blitt en grunn bulk. */
.ifpi-graf--publikum { height: clamp(178px, 20vw, 248px); }

/* De to trettenaars-figurene deler hoeyde med vilje: de er samme system, samme
   kilde og samme akse, bare med hvert sitt spoersmaal. Ulik hoeyde ville sagt
   at de maalte ulike ting. */
.ifpi-graf--konsert,
.ifpi-graf--eksport { height: clamp(170px, 19vw, 238px); }

/* Stoerrelsesfiguren har to soeyler paa 100 prosent hver. Hoeyden ER
   opploesningen: 12 prosent maa vaere lesbart som en stripe i bunnen. Paa 390
   gir 168 px en stripe paa 20 px. */
.ifpi-graf--storrelse { height: clamp(168px, 19vw, 236px); }

/* Rettighetsfiguren. Gramos soeyler er en firedel av TONOs paa felles skala, og
   det er nettopp poenget. 40,7 av 220 viewBox-enheter gir 26 px paa 390. */
.ifpi-graf--rettigheter { height: clamp(166px, 18vw, 228px); }

/* Ett felt, ikke to. Fram til 04.09.2026 hadde figuren et nivaafelt oeverst med
   seks graa soeyler over 2020 til 2025 og en gul hette per aar. Nivaafeltet var
   den samme soeylerekka som heltefiguren i folden, og vekstfeltet gjorde hele
   arbeidet. Figuren er derfor ett felt.

   05.09.2026 ble det feltet lagt om fra prosent til kroner. Soeylehoeyden var
   aarsveksten i prosent mens tallet under aarstallet var nivaaet i milliarder:
   to stoerrelser som ikke kunne leses mot hverandre, og 2020 sto som en tom
   plass fordi startaaret ikke har noen vekst. Figuren er naa et vannfall der
   hoeyden ER kronene, og 2020 er grunnlinja i stedet for et hull i raden.

   Hoeyere enn foer med vilje: fem trinn deler plottet mellom seg, saa det
   minste trinnet (53,1 av 450 mill.) maaler 11,8 prosent av hoeyden. Med den
   gamle rammen ville det blitt 17,7 px paa 390. Naa: 20,1 px. */
.ifpi-graf--omsetning { height: clamp(170px, 17vw, 225px); }
/* overflow: visible fordi klammens hoeyre tapp staar paa x=1000, altsaa
   noeyaktig paa baandets hoeyrekant. SVG-er klipper som standard, og en
   sentrert 1 px strek der ville mistet halve bredden sin og landet ett piksel
   innenfor kanten den skal peke paa. */
.ifpi-graf--baand {
  height: 72px;
  overflow: visible;
}
.ifpi-graf--indeks { height: clamp(186px, 21vw, 258px); }
.ifpi-graf--andel { height: clamp(132px, 15vw, 182px); }

/* ------------------------------------------------------------
   PLOTTGRID MED Y-AKSE
   Andelsfeltet fikk trunkert skala 04.09.2026 og trenger derfor
   merkede ender. Merkene kan ikke ligge i SVG-en (all tekst er
   HTML, se toppen av datagrafikk-blokka), saa de faar en egen
   kolonne til venstre.

   BEGGE felt i repertoarfiguren ligger i denne griden, ogsaa
   indeksfeltet som ikke har merker. Uten det ville de to feltene
   hatt ulik venstrekant, og de deler aarsakse: soeylene i det
   nederste feltet og punktene i det oeverste maa staa loddrett
   over hverandre. Etikettraden ligger i samme kolonne som SVG-en,
   saa justeringen mellom soeyle og aarstall foelger av griden og
   kan ikke gli naar bredden endrer seg.
   ------------------------------------------------------------ */
.ifpi-plott {
  display: grid;
  grid-template-columns: var(--yakse, 58px) minmax(0, 1fr);
}

/* «450 mill. kr» maaler 93 px og rant ut i plottet med standardkolonnen paa
   58 px, som er stilt inn for «22 %». Kolonnen er ikke luft: et merke som
   ligger oppaa figuren peker ikke lenger paa aksen sin. */
.ifpi-plott--bred-akse { --yakse: 100px; }

.ifpi-plott__akse {
  position: relative;
  min-width: 0;
}

/* Merkene sitter paa viewBox-koordinatene til skalaens ender, ikke paa
   cellens topp og bunn: 22 % ligger paa y=20 og 15 % paa y=240 av 260,
   altsaa 7,69 og 92,31 prosent ned. Prosent paa top for et absolutt
   posisjonert element regnes fra containerens hoeyde, mens prosent paa
   padding ville blitt regnet fra BREDDEN. Derfor absolutt posisjon. */
/* Venstrestilt, ikke hoeyrestilt mot aksen: bruddmerket skal ligge mellom
   tallet og plottet, altsaa der aksen faktisk brytes. Med hoeyrestilte tall
   overlappet de to. */
.ifpi-plott__merke {
  position: absolute;
  left: 0;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.87rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ifpi-plott__merke--topp { top: 7.69%; }

/* Tekstvarianten av aksen. Staar bare paa smale skjermer, se merknaden i
   560-blokka lenger nede. */
.ifpi-plott__skalatekst { display: none; }
.ifpi-plott__merke--bunn { top: 92.31%; }

/* Aksebruddet. To skraa streker ved grunnlinja er den vanlige maaten aa si
   at skalaen ikke starter paa null. Tegnet i CSS og ikke i SVG-en fordi
   figurene har preserveAspectRatio="none": en diagonal inne i SVG-en ville
   blitt strukket til nesten vannrett paa desktop, samme felle som tok
   trakten i formatfiguren. */
.ifpi-plott__akse--brutt::before,
.ifpi-plott__akse--brutt::after {
  content: '';
  position: absolute;
  right: 0;
  width: 13px;
  height: 1px;
  background: var(--data-grunn);
  transform: rotate(-25deg);
}

/* To parallelle streker paa grunnlinja, 6 px fra hverandre. Tegnet med
   rotate og ikke med en gradient: en repeating-linear-gradient i en 10 px
   boks kuttet den nederste streken paa cellekanten (malt 04.09.2026), og
   to eksplisitte streker er forutsigbare i alle stoerrelser. */
.ifpi-plott__akse--brutt::before { top: calc(92.31% - 3px); }
.ifpi-plott__akse--brutt::after { top: calc(92.31% + 3px); }

/* --- Etikettrutenettet under figurene --- */
.ifpi-akse {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 10px;
}

/* Vannfallet har fem trinn og ikke seks aar: 2020 er grunnlinja figuren maaler
   fra, ikke en kolonne. En tom sjettedel til venstre leste som en feil. */
.ifpi-akse--fem { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* To soeyler som sammenlignes mot hverandre: stoerrelsesfiguren og
   rettighetsfiguren. */
.ifpi-akse--to { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Trettenaars-aksen for de to Kunst i tall-figurene. Alle tretten cellene
   finnes, saa aksestreken er sammenhengende og hvert aar har sin egen kolonne,
   men bare fire av dem er merket. Med tretten etiketter maalte cella 24 px paa
   390, og «2012» maaler 30: alle tretten ville overlappet hverandre.
   Foerste og siste etikett staar inntil hver sin kant og ikke sentrert paa
   soeyla, av samme grunn som .ifpi-skala__merke--null og --slutt: sentrert paa
   3,85 prosent stikker «2012» tre piksler utenfor figuren. */
.ifpi-akse--tretten { grid-template-columns: repeat(13, minmax(0, 1fr)); }

.ifpi-akse--tretten .ifpi-akse__celle:first-child {
  align-items: flex-start;
  text-align: left;
}

.ifpi-akse--tretten .ifpi-akse__celle:last-child {
  align-items: flex-end;
  text-align: right;
}

.ifpi-akse__celle {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border-top: 1px solid var(--border);
  padding: 9px 2px 0;
  text-align: center;
}

.ifpi-akse__celle--naa {
  border-top-color: var(--data-hoy);
}

/* Ren akse uten verdier. Indekslinjene var sidens eneste figur uten aarsmerker
   fram til 04.09.2026: leseren kunne ikke se hvilket aar venstre og hoeyre kant
   var. Etikettraden 250 px lenger nede tilhoerer andelsfeltet og har en
   merknad imellom seg og linjene, saa koblingen holdt ikke. Verdiene ligger
   fortsatt bare ett sted, i tegnforklaringen og merknaden: dette er en akse,
   ikke en tallrad nummer to. */
.ifpi-akse--bar-aar .ifpi-akse__celle { padding-bottom: 2px; }

.ifpi-akse__aar {
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.ifpi-akse__verdi {
  color: var(--text);
  font-family: "Outfit", sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.ifpi-akse__vekst {
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ifpi-akse__celle--naa .ifpi-akse__aar,
.ifpi-akse__celle--naa .ifpi-akse__verdi {
  color: var(--text);
}

/* --- Tidsakse for figurer der avstanden mellom maalingene foelger tiden ---
   Publikumsserien er maalt i 1991, 1994, 1997, 2000, 2004, 2008, 2012, 2016,
   2021, 2023 og 2025. Et likt fordelt rutenett ville gjort femaarsspranget
   2016 til 2021 like bredt som toaarsspranget 2023 til 2025, altsaa loeyet om
   tempoet i seriens viktigste periode. Derfor ligger merkene paa prosentandelen
   av tidsspennet, samme koordinat som punktet i SVG-en.

   Fire merker og ikke elleve: paa 390 px er plottet 314 px, altsaa 28,5 px per
   maaling, mens «1991» maaler 30. Alle elleve ville overlappet. De fire
   merkene staar paa 2, 38,7, 72,6 og 98 prosent, altsaa minst 80 px fra
   hverandre paa 390. Resten av serien staar i tabellen under figuren.

   2021 staar paa EGEN rad. Merket ligger paa 86,7 prosent og ville kollidert
   med sluttmerket paa 98 (35 px mellom to 30 px etiketter). Egen rad er ikke
   bare en loesning paa kollisjonen: pandemiaaret er ikke en maaling i samme
   serie som de andre, og det skal ikke leses som det. Streken opp fra merket
   binder det til den stiplede loddrette linja i figuren. */
.ifpi-tidsakse {
  position: relative;
  height: 5.6em;
  border-top: 1px solid var(--border);
  margin-top: 10px;
}

.ifpi-tidsakse__merke {
  position: absolute;
  top: 9px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform: translateX(-50%);
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.ifpi-tidsakse__merke small {
  color: var(--text);
  font-family: "Outfit", sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Foerste og siste merke kan ikke sentreres paa punktet uten aa stikke utenfor
   figuren. De starter og slutter derfor paa punktet i stedet. */
.ifpi-tidsakse__merke--start {
  left: 2%;
  transform: none;
}

.ifpi-tidsakse__merke--slutt {
  right: 2%;
  transform: none;
}

.ifpi-tidsakse__merke--m2004 { left: 38.7%; }
.ifpi-tidsakse__merke--m2016 { left: 72.6%; }

/* translateX(-80 %) og ikke -50 %: merket ligger paa 86,7 prosent, og
   «23 %, pandemi» maaler 85 px. Sentrert ville teksten rukket forbi
   hoeyrekanten paa 390 px, der plottet er 314 px bredt. Med -80 % ligger den
   nesten hele veien til venstre for punktet, og streken staar fortsatt paa
   86,7 prosent. */
.ifpi-tidsakse__merke--pandemi {
  top: auto;
  bottom: 0;
  left: 86.7%;
  transform: translateX(-80%);
  color: var(--text);
}

.ifpi-tidsakse__merke--pandemi small { color: var(--text-muted); }

/* Streken opp fra merket. Uten den ville tallet paa rad to vaere en loes
   opplysning under figuren i stedet for et punkt paa den. Den gaar ikke helt
   opp til aksen: paa 390 px passerer den 1 px fra sluttmerket paa rad en. */
.ifpi-tidsakse__merke--pandemi::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 80%;
  width: 1px;
  height: 1.4em;
  background: var(--data-grunn);
}

/* --- Tegnforklaring --- */
.ifpi-tegnforklaring {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.ifpi-tegnforklaring li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
}

.ifpi-tegnforklaring li::before {
  content: '';
  width: 16px;
  height: 12px;
  flex: none;
  border-radius: 2px;
  background: var(--data-mass);
}

.ifpi-tegnforklaring li.er-hoy::before { background: var(--data-hoy); }

/* Linjefigurens forklaring viser strekformen, ikke bare fargen. */
.ifpi-tegnforklaring--linje li::before {
  height: 4px;
  border-radius: 999px;
}

.ifpi-tegnforklaring--linje li:not(.er-hoy)::before {
  background: repeating-linear-gradient(to right, var(--data-mass) 0 5px, transparent 5px 9px);
}

/* Referanselinja i andelsfiguren var bare forklart i merknaden over figuren
   fram til 04.09.2026. Den stiplede streken ER sidens tese: 2025 er det eneste
   aaret under 2020-nivaaet, og paa 390 px er avstanden mellom soeyletoppen og
   linja 3,6 px. Naar forskjellen er saa liten, maa leseren i det minste vite
   hva linja betyr uten aa lete etter det i broedteksten. */
.ifpi-tegnforklaring--ref .er-ref::before {
  height: 3px;
  border-radius: 0;
  background: repeating-linear-gradient(to right, var(--data-grunn) 0 5px, transparent 5px 10px);
}

/* Vannfallets grunnlinje er ikke null kroner, den er 2020-nivaaet. Aksen kan
   bare si «0», og en figur som maa leses sammen med broedteksten for aa vite
   hva bunnen er, taaler ikke aa bli sendt videre alene. Ett ledd, ikke to:
   figuren har en datafarge, og en fargeforklaring til den ville gjentatt
   bildeteksten. */
.ifpi-tegnforklaring--grunn .er-grunn::before {
  height: 3px;
  border-radius: 0;
  background: var(--data-grunn);
}

.ifpi-tegnforklaring__tall {
  color: var(--text-muted);
  font-weight: 700;
}

/* --- Formatfiguren: baand, trakt og forstoerrede rader --- */
.ifpi-baand-etiketter {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 20px;
  margin-top: 20px;
}

.ifpi-baand-etikett {
  min-width: 0;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
}

/* Abonnementet fyller 84,3 prosent av baandflaten og var uten etikett fram til
   04.09.2026: figuren viste sidens stoerste enkelttall som en unavngitt gul
   flate, og kunne derfor ikke leses uten broedteksten ved siden av. Etiketten
   ligger under den gule delen fordi det er den den gjelder, ikke i en egen rad. */
.ifpi-baand-etikett small {
  display: block;
  max-width: 72ch;
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 0.87rem;
  font-weight: 500;
  line-height: 1.5;
}

.ifpi-baand-etikett strong {
  font-family: "Outfit", sans-serif;
  font-variant-numeric: tabular-nums;
}

.ifpi-baand-etikett--rest {
  color: var(--text-muted);
  text-align: right;
}

/* Forstoerringen er en egen maaling, ikke en fortsettelse av baandet, og faar
   derfor sin egen overkant. Baandet maaler andel av 1 497,4 millioner; radene
   under maaler kroner paa en skala som slutter paa 100 millioner. To skalaer i
   samme figur maa ha et synlig skille, ellers leses den ene som den andre. */
.ifpi-forstorring {
  border-top: 1px solid var(--border);
  margin-top: 26px;
  padding-top: 22px;
}

.ifpi-forstorring__tittel {
  margin: 0 0 6px;
  color: var(--text);
  font-family: "Outfit", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
}

.ifpi-forstorring__skala {
  max-width: 74ch;
  margin: 0;
  color: var(--text-muted);
  /* Samme gulv som .ifpi-chart__note: metodetekst under 13,5 px er for liten. */
  font-size: 0.87rem;
  line-height: 1.55;
}

/* --- Linjalen over de forstoerrede soeylene ---
   Den sto ikke her fram til 04.09.2026, og det var figurens verste feil: uten
   en skala ble den stoerste av de fire (fysisk salg, 87,8 mill.) tegnet i FULL
   bredde, rett ved siden av etiketten «5,9 % av markedet». En full soeyle og
   et lite prosenttall paa samme linje motsier hverandre, og bildeteksten maatte
   forklare bort figuren. Naa slutter sporet paa 100 millioner: fysisk salg
   fyller 87,8 prosent, ingen soeyle naar kanten, og enden betyr noe.

   Linjalen ligger OVER radene, ikke under. Leseren maa vite hva sporet er foer
   den foerste soeylen leses, ikke etterpaa. Underkanten er aksen.

   Merkene staar paa kolonnegrensene i et firekolonners rutenett, altsaa
   noeyaktig paa 25, 50, 75 og 100 prosent av samme bredde som soeylene fyller.
   Justeringen foelger av konstruksjonen og kan ikke gli naar bredden endrer
   seg, samme prinsipp som .ifpi-akse. */
.ifpi-skala {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--border);
  margin: 18px 0 22px;
  padding-bottom: 7px;
}

.ifpi-skala__merke {
  position: relative;
  grid-row: 1;
  justify-self: end;
  /* «4 500 mill. kr» i foldfiguren brakk over to linjer paa 390 og skjoev
     linjalens underkant ned. Merket er ett tall, ikke en setning. */
  white-space: nowrap;
  /* Hoeyrestilt i cella og skjoevet en halv egenbredde ut: tallet staar da
     sentrert PAA merket, ikke til venstre for det. */
  transform: translateX(50%);
  color: var(--text-muted);
  font-size: 0.87rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ifpi-skala__merke:nth-child(2) { grid-column: 1; }
.ifpi-skala__merke:nth-child(3) { grid-column: 2; }
.ifpi-skala__merke:nth-child(4) { grid-column: 3; }
.ifpi-skala__merke:nth-child(5) { grid-column: 4; }

/* Merkestrekene gaar NED fra aksen, mot dataene de gjelder. */
.ifpi-skala__merke::after {
  content: '';
  position: absolute;
  right: 50%;
  bottom: -6px;
  width: 1px;
  height: 5px;
  background: var(--data-grunn);
}

/* Foerste og siste tall kan ikke sentreres paa merket uten aa stikke utenfor
   figuren. De staar derfor inntil hver sin kant, med merket i kanten. */
.ifpi-skala__merke--null {
  grid-column: 1;
  justify-self: start;
  transform: none;
}

.ifpi-skala__merke--null::after { right: auto; left: 0; }

.ifpi-skala__merke--slutt { transform: none; }

.ifpi-skala__merke--slutt::after { right: 0; }

.ifpi-formatrad + .ifpi-formatrad { margin-top: 22px; }

.ifpi-formatrad__topp {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 16px;
  margin-bottom: 8px;
}

.ifpi-formatrad__navn {
  color: var(--text);
  font-weight: 800;
}

.ifpi-formatrad__tall {
  color: var(--text);
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Andelen av hele markedet er en ANNEN maaling enn soeyla over, og skal ikke
   staa paa samme linje som den. Fram til 04.09.2026 sto «5,9 % av markedet»
   inntil «87,8 mill. kr», rett over en soeyle i full bredde. Naa ligger den
   nederst i raden, i merknadstekstens vekt og stoerrelse, med markedet
   navngitt i selve etiketten. */
.ifpi-formatrad__andel {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* width: 100% er ikke valgfritt. Uten den faller SVG-en tilbake paa
   viewBox-bredden 1000 px som egenbredde, og siden fikk horisontal rulling paa
   768 og 390 (malt 04.09.2026: scrollWidth 1052 mot 768). */
.ifpi-formatrad__stolpe {
  display: block;
  width: 100%;
  /* 12 px soeyle + 5 px aksestripe under den. Hoeyden maa matche viewBox-en
     (0 0 1000 17) slik at y-aksen staar 1:1 og de 4 px hoeye merkene ikke
     strekkes med hoeyden slik preserveAspectRatio="none" ellers gjoer. */
  height: 17px;
}

/* Rutenettet rundt de fire radene. Uten det ville .ifpi-skala vaere div nummer
   en i .ifpi-forstorring, og :nth-of-type i stagger-reglene lenger nede ville
   telt den med. */
.ifpi-formatrader {
  margin: 0;
}

.ifpi-formatrad__merk {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 18px;
  margin: 9px 0 0;
  color: var(--text-muted);
  font-size: 0.87rem;
}

/* --- Tallene som fullverdig alternativ --- */
.ifpi-tallboks {
  border-top: 1px solid var(--border);
  margin-top: 24px;
}

.ifpi-tallboks > summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding: 11px 2px;
  color: var(--text);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 800;
  list-style: none;
}

.ifpi-tallboks > summary::-webkit-details-marker { display: none; }

.ifpi-tallboks > summary::before {
  content: '\25B8';
  color: var(--data-hoy);
  font-size: 1.05rem;
  line-height: 1;
}

.ifpi-tallboks[open] > summary::before { content: '\25BE'; }

.ifpi-tallboks > summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.ifpi-tallboks .table-scroll { margin-bottom: 4px; }

@media (hover: hover) and (pointer: fine) {
  .ifpi-tallboks > summary:hover { color: var(--accent-ink); }
}

.ifpi-compare {
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--bg-card);
  margin-top: 28px;
  padding: clamp(20px, 4vw, 34px);
}

.ifpi-compare h3 {
  margin-top: 0;
  font-size: clamp(1.3rem, 3vw, 1.75rem);
}

.ifpi-compare__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px;
  margin-top: 18px;
}

/* Etiketten ligger ved siden av kontrollen, ikke rundt den: en <label> som
   omslutter <select> arver nettleserens kontrollflate som malt bakgrunn og
   maaler dermed feil kontrast. */
.ifpi-compare__field {
  display: grid;
  gap: 6px;
}

.ifpi-compare__field label {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ifpi-compare__controls select {
  min-width: 128px;
  min-height: 46px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  padding: 0 34px 0 12px;
  font: inherit;
  font-size: 1rem;
}

.ifpi-compare__controls select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Nedtrekkene staar laast i DOM og aapnes av JS naar datagrunnlaget er lastet.
   Uten JS, og naar lastingen feiler, kan de derfor ikke stilles paa aar som
   boksen ikke kan regne ut. Ingen opasitet: teksten skal holde AA ogsaa her,
   saa laasen baeres av kanten, fargen og pekeren. */
.ifpi-compare__controls select:disabled {
  border-color: var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: not-allowed;
}

.ifpi-compare__output {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--border);
  margin-top: 22px;
  overflow: hidden;
}

.ifpi-compare__result {
  background: var(--bg);
  padding: 20px;
}

/* Direkte barn, ikke etterkommere. Etikettregelen ble skrevet da <span> var
   etiketten og ingenting annet. Da norskandelen fikk to tall i samme <strong>
   05.09.2026, arvet de tallene bade display: block, 0,78rem og dempet farge:
   de stablet seg loddrett i etikettstoerrelse. Med > treffer regelen bare
   etiketten, og tall inne i <strong> beholder sin egen skrift. */
.ifpi-compare__result > span,
.ifpi-compare__result > strong,
.ifpi-compare__result > small {
  display: block;
}

.ifpi-compare__result > span {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.ifpi-compare__result strong {
  margin-top: 7px;
  color: var(--text);
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  letter-spacing: -0.035em;
}

/* Pila mellom de to andelene er en forbindelse, ikke et tegn i tallet. Den skal
   derfor lese svakere enn tallene den binder sammen: mindre, mattet, med luft
   paa hver side. Outfit har ingen U+2192, saa glyfen kommer fra systemets sans
   uansett hva vi gjoer, og en pil i full stoerrelse og full farge ville stukket
   ut som feil skrift. Malt 05.09.2026: hele uttrykket «18,6 % -> 17,8 %» maaler
   228 px i en celle paa 322 px, altsaa smalere enn de 300 px «-0,8
   prosentpoeng» tok. */
.ifpi-compare__pil {
  color: var(--text-muted);
  margin: 0 0.28em;
  font-size: 0.62em;
  vertical-align: 0.16em;
}

.ifpi-compare__result small {
  margin-top: 5px;
  color: var(--text-muted);
  line-height: 1.4;
}

.ifpi-definition-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--border-strong);
  margin: 24px 0 0;
}

.ifpi-definition-list > div {
  border-bottom: 1px solid var(--border);
  padding: 20px 18px 20px 0;
}

.ifpi-definition-list > div:nth-child(even) {
  border-left: 1px solid var(--border);
  padding-left: 20px;
}

.ifpi-definition-list dt {
  color: var(--text);
  font-weight: 800;
}

.ifpi-definition-list dd {
  margin: 8px 0 0;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Hel ramme, ikke sidestripe. Fram til 04.09.2026 sto boksen med en 4 px gul
   border-left. En farget sidekant er ingen betydningsbaerer: den peker ikke paa
   noe, den kan ikke leses av en skjermleser, og den staar i strid med at husets
   egen varselboks (.tips-hack) bruker hel ramme. To kantspraak for to
   naboblokker leser som to systemer. Flaten er --bg-elevated og ikke --bg-card:
   metodeboksen skal skille seg fra figurkortene den staar mellom, og tonen er
   husets egen for lettet smaaskrift. */
.ifpi-source-box {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elevated);
  margin-top: 24px;
  padding: 20px 22px;
}

.ifpi-source-box p {
  margin: 0;
  color: var(--text);
}

.ifpi-source-box p + p {
  margin-top: 10px;
}

.ifpi-source-box a {
  font-weight: 800;
  text-underline-offset: 3px;
}

.ifpi-calculation {
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.86rem;
}

@media (max-width: 768px) {
  .ifpi-key-grid,
  .ifpi-compare__output,
  .ifpi-definition-list {
    grid-template-columns: 1fr;
  }

  .ifpi-definition-list > div:nth-child(even) {
    border-left: 0;
    padding-left: 0;
  }

  .ifpi-baand-etikett--rest { text-align: left; }

  .ifpi-compare__controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .ifpi-compare__controls select {
    width: 100%;
  }
}

/* Smalere kortpadding paa smale skjermer gir plottet 314 til 322 px, altsaa
   54 px per aarsetikett. Det er nok til at «+13,6 %» staar paa en linje.

   FORSOEKT OG FORKASTET 04.09.2026: full bredde med margin-inline: -20px.
   Layouten var riktig (boksen malte 0 til 390), men figuren ble likevel malt
   fra 20 til 369. Aarsaken er .js-reveal.is-inview i style.css, som setter
   clip-path: inset(0) ogsaa paa .venue-fakta. Seksjonen klipper da alle barna
   sine til sin egen boks, og et barn kan ikke gaa utenfor den saa lenge
   avsloeringslaget er aktivt. Diagnosen sto ikke i getBoundingClientRect, som
   rapporterte den riktige, men umalte boksen; den kom fram ved aa male figuren
   i en testfarge og lese pikselraden. Verdt aa vite for animasjonspasset. */
@media (max-width: 560px) {
  .ifpi-chart { padding-inline: 14px; }

  /* Y-aksekolonnen kollapser under 560 px. Med 50 px akse ble plottet 270 px,
     altsaa 45 px per aarsetikett, og «18,6 %» maalte 43 px: 1,9 px luft paa
     390 og MINUS 3,1 px paa 360, der etikettene overlappet hverandre.
     En akse som spiser figurens lesbarhet er en daarlig akse. Paa smale
     skjermer merkes skalaens ender i tekst i stedet, over figuren, med
     retningen skrevet ut. Trunkeringen er da fortsatt synlig for leseren,
     og plottet beholder full bredde. */
  .ifpi-plott { grid-template-columns: minmax(0, 1fr); }

  .ifpi-plott__akse { position: static; }

  /* :empty og ikke :not(--brutt). Regelen skal treffe avstandskolonnen i rad to,
     som er tom med vilje. Vannfallets akse er ikke brutt (skalaen starter paa
     null), men den har en skalatekst som skal staa ogsaa paa mobil. Med den
     gamle selektoren forsvant den teksten. */
  .ifpi-plott__akse:empty { display: none; }

  .ifpi-plott__merke,
  .ifpi-plott__akse--brutt::before,
  .ifpi-plott__akse--brutt::after { display: none; }

  .ifpi-plott__skalatekst {
    display: block;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 0.87rem;
    font-weight: 700;
  }

  .ifpi-akse__celle { padding-inline: 1px; }

  .ifpi-akse__verdi { font-size: 0.95rem; }

  /* Plottet er 314 til 322 px her. «75» sentrert paa 75 prosent slutter da
     1,5 px foer «100 mill. kr» begynner, altsaa en kollisjon. 25 og 75 er
     mellomtrinn: strekene i soeylene staar der uansett, og linjalen klarer seg
     med endepunktene og midten. */
  .ifpi-skala__merke--fin { display: none; }
}

@media (max-width: 430px) {
  .ifpi-key-card {
    padding: 18px;
  }

  .ifpi-key-card strong {
    font-size: 2.35rem;
  }
}

/* ============================================================
   FORSTAAELSESLAGET OG BRUKSLAGET (06.09.2026)
   Fem komponenter kom til i samme runde, og de svarer paa hvert sitt
   spoersmaal eieren stilte: forstaar leseren det han ser, og kan han ta det
   med seg videre.

   1. .ifpi-badge-aar        hvilket aar gjelder seksjonen
   2. .ifpi-lesenokkel       hva slags tall er dette, foer foerste tall
   3. .ifpi-betyr            hva skal jeg ta med meg fra denne figuren
   4. .ifpi-figuraksjon      del figuren, kopier faktumet, bygg den inn
   5. .ifpi-siter            referanse og nedlasting

   INGEN AV DEM ER ET KORT TIL. Sida har allerede tre kortspraak (.ifpi-chart,
   .ifpi-key-card og .tips-hack) pluss to rammede bokser (.ifpi-source-box og
   .ifpi-compare). Et fjerde ville gjort flatene til stoey. Noekkelen og
   betydningslinja baeres derfor av streker og typografi, ikke av flater, og
   bare de to som faktisk skal se ut som noe man tar tak i (siteringsboksene)
   faar flate.
   ============================================================ */

/* --- 1. AARET I SEKSJONSMERKET -------------------------------------------
   Sju kilder har sju ulike siste aar, og forvekslingsfaren er sidens stoerste.
   Aaret staar derfor i merket over hver overskrift, altsaa der leseren
   befinner seg naar han leser tallet.

   FORSOEKT OG FORKASTET: aaret som en underlinje i hver snarveispille. Malt
   paa 1 280: pilleraden gikk fra 1 023 til 1 611 px mot 1 160 px tilgjengelig,
   altsaa fra én til to rader, og den klebrige baren fra 65 til 115 px. En
   navigasjonsbar som tar 19 prosent av skjermhoeyden er en daarlig byttehandel
   paa en side som allerede er for lang. Merket koster null piksler.

   Aaret arver merkets egen farge. En dempet variant ville lagt et nytt
   kontrastkrav paa en amberflate der --accent-ink allerede er den maalte
   kombinasjonen. Skillet baeres av vekten og av midtpunktet. */
.ifpi-stat-page .ifpi-badge-aar {
  font-weight: 500;
}

.ifpi-stat-page .ifpi-badge-aar::before {
  content: '\00B7';
  margin: 0 7px;
  font-weight: 700;
}

/* --- 2. LESENOEKKELEN ----------------------------------------------------
   Staar foerst i <main> og er sidens bruksanvisning. To streker og ingen flate:
   den skal lese som en noekkel man ser paa én gang, ikke som en seksjon man
   leser. Den gule overstreken er eneste sted paa sida der aksenten brukes som
   ren markering, og den er der fordi noekkelen skal finnes igjen naar leseren
   ruller tilbake for aa sjekke hva et tall betydde. */
.ifpi-lesenokkel {
  margin: 0 0 44px;
  padding-top: 22px;
  border-top: 2px solid var(--accent);
}

.ifpi-lesenokkel h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.ifpi-lesenokkel__inngang {
  max-width: 62ch;
  margin: 0 0 4px;
  color: var(--text);
  text-wrap: pretty;
}

.ifpi-lesenokkel__liste {
  margin: 18px 0 0;
  border-top: 1px solid var(--border);
}

.ifpi-lesenokkel__liste > div {
  display: grid;
  gap: 4px 26px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.ifpi-lesenokkel__liste dt,
.ifpi-lesenokkel__liste dd {
  margin: 0;
}

/* Nivaanavnet og kildemerket staar over hverandre i venstre spalte: navnet er
   svaret paa «hva slags tall er dette», merket er svaret paa «hvem maalte det». */
.ifpi-lesenokkel__liste dt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.ifpi-lesenokkel__nivaa {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Kildene staar som egne merker og ikke som én lang etikett: «Kunst i tall,
   Menon, Music Norway» brakk pilla over to linjer, og en pille som brekker er
   en pille som brukes feil. */
.ifpi-lesenokkel__kilder {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ifpi-lesenokkel__liste dd {
  /* 62ch. Uten taket maalte linja 153 tegn paa 1 280, altsaa dobbelt saa lang
     som lesbarhetsgrensen, fordi hoeyre spalte hadde hele containeren. */
  max-width: 62ch;
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.62;
  text-wrap: pretty;
}

.ifpi-lesenokkel__utgang {
  max-width: 74ch;
  margin: 18px 0 0;
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.62;
  text-wrap: pretty;
}

@media (min-width: 760px) {
  .ifpi-lesenokkel__liste > div {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    align-items: start;
  }
}

/* --- 3. «DET BETYR AT» ---------------------------------------------------
   Konklusjonen under hver figur. Streken over er den samme hairlinen som
   skiller resten av innholdet, og teksten staar i --text mens figurnotatet og
   kildelinja staar i --text-muted: forskjellen paa metode og konklusjon er en
   rolleforskjell, ikke en flateforskjell.

   Merket «Det betyr at» er den foerste halvdelen av setningen, ikke en etikett
   over den. En egen etikettlinje ni ganger nedover sida ville vaert nettopp den
   versaletiketten husets antimoensterliste avviser. */
.ifpi-betyr {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.ifpi-betyr__merke {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.005em;
}

/* --- 4. HANDLINGSRADEN UNDER FIGUREN -------------------------------------
   Knappene staar SIST i figuren, etter kildelinja. Over figuren ville de
   konkurrert med figurteksten om det foerste blikket. Under den moeter de
   leseren i det oeyeblikket han har bestemt seg for om figuren var verdt noe.

   Alle staar `hidden` i markupen og vises av skriptet, som .byliste-del i
   bylistene. Uten JavaScript kan de verken dele, kopiere eller bygge inn, og en
   knapp uten handling er en loegn om hva sida kan. */
.ifpi-figuraksjon {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.ifpi-figurknapp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}

/* HIDDEN MAA VINNE OVER display: inline-flex.
   [hidden] { display: none } i nettleserens egen stilark har lavest mulig
   spesifisitet, saa enhver display-verdi i sidens CSS slaar den ut. Uten denne
   regelen sto alle 23 knappene synlige uten JavaScript, altsaa knapper som
   ikke kunne gjoere noe. Malt 06.09.2026 med JavaScript av.
   MERK: .byliste-del i templates/by-konserter-shell.html har samme moenster og
   sannsynligvis samme feil. Den fila eies av en annen leveranse. */
.ifpi-figurknapp[hidden] {
  display: none;
}

/* Delepilen: samme ledd som bylistenes .byliste-del, en grad opp og ut. Bare
   delehandlingen har den. Kopiering og innbygging blir vaerende paa sida, og et
   symbol som peker ut ville sagt noe annet enn det knappen gjoer. */
.ifpi-figurknapp--del::after {
  content: '\2197';
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
  .ifpi-figurknapp:hover { border-color: var(--text-muted); }
}

/* Stempelet er nettstedets eget, med de samme fargene .byliste-del og
   .copy-link-btn bruker. Bekreftelsen paa en kopiering skal se lik ut overalt:
   det er den samme handlingen. */
.ifpi-figurknapp.is-kopiert {
  border-color: rgba(34, 197, 94, 0.55);
  background: rgba(34, 197, 94, 0.18);
  color: var(--text);
}

.ifpi-figurknapp.is-kopiert::after { content: '\2713'; }

/* --- 5. SITERING OG NEDLASTING ------------------------------------------
   De to eneste nye flatene paa sida. Referansen SKAL se ut som noe man tar tak
   i, og den skal kunne markeres og kopieres for haand ogsaa uten JavaScript. */
.ifpi-siter {
  display: grid;
  gap: 16px;
  margin: 24px 0 8px;
}

@media (min-width: 860px) {
  .ifpi-siter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ifpi-siter__rad {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
}

.ifpi-siter__rad h3 {
  margin: 0;
  font-size: 0.98rem;
}

.ifpi-siter__tekst {
  /* flex: 1 gjoer de to boksene like hoeye i rutenettet, slik at knappene under
     dem lander paa samme linje. Uten den staar den ene knappen 30 px hoeyere
     enn den andre, og raden leser som to ulike komponenter. */
  flex: 1;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.6;
  /* Referansene inneholder lange adresser uten mellomrom. Uten dette skyver de
     boksen ut av spalten paa 390 px. */
  overflow-wrap: anywhere;
}

.ifpi-siter__tekst--kode {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.82rem;
}

.ifpi-nedlast {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 18px 0 0;
}

.ifpi-nedlast__merk {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ============================================================
   BEVEGELSESLAGET (IF-1 til IF-39)
   Kartlagt i docs/ANIMASJONSPASS-IFPI-STATISTIKK-2026-09-02.md,
   docs/ANIMASJONSPASS-STATISTIKK-2026-09-04.md og
   docs/ANIMASJONSPASS-STATISTIKK-2-2026-09-05.md (samlesiden, ni figurer).
   Husets lag ligger i css/style.css og js/main.js og gjenbrukes her:
   .hero-rise, .hero-rise--hold, .js-reveal/.is-inview, reviewHeroRise,
   reviewOfIn og reviewFocusLand. Ingenting av det dupliseres.

   Fire regler hele blokka holder:
   - Alt som beveger seg ligger i @media (prefers-reduced-motion: no-preference).
   - Hviletilstanden i DOM er den ferdige, synlige siden. Ingen opacity: 0
     venter paa en klasse som kanskje aldri kommer: .js-reveal og .is-inview
     settes av JS, og uten JS staar hele siden ferdig.
   - Bare transform, opacity og clip-path. Ingen transition: all.
   - Bare husets kurver: --ease-out-quart til ankomst, --ease-in-out-quart til
     de to klipperne som reiser gjennom en figur, --ease-bounce til de to
     stempeloeyeblikkene (Beregnet-merket og kopieringsbekreftelsen).
   - Lesenoekkelen oeverst i <main> har med vilje INGEN avsloering. Den er
     bruksanvisningen paa resten av sida, og en forklaring som toner inn er en
     forklaring som ikke staar der naar leseren trenger den.
   - Ikke alt beveger seg. Tre av ni figurer staar stille med begrunnelse,
     skrevet ned der reglene deres ville staatt.
   ============================================================ */

/* Trykk-svaret skal eie oeyeblikket paa touch. Ikke bevegelse, derfor utenfor
   bevegelsesblokka: samme plassering som style.css gir .review-article. */
.ifpi-stat-page .hero-actions .btn,
.ifpi-stat-page .venue-quicknav a,
.ifpi-stat-page .faq-question,
.ifpi-stat-page .info-card--link,
.ifpi-stat-page .ifpi-tallboks > summary,
.ifpi-stat-page .ifpi-compare__controls select,
/* Handlings- og siteringsknappene kom til 06.09.2026 og er piller, som
   .byliste-del i bylistene. */
.ifpi-stat-page .ifpi-figurknapp {
  -webkit-tap-highlight-color: transparent;
}

/* IF-12, fargen: en radutheving er orientering, ikke bevegelse, og gjelder
   derfor ogsaa ved redusert bevegelse. Bak pekergaten, ellers henger
   uthevingen igjen etter et tapp paa mobil. --bg-elevated holder AA for
   --text-muted i begge temaer (malt 6,55:1 lyst, 5,23:1 moerkt). */
@media (hover: hover) and (pointer: fine) {
  .ifpi-stat-page .compare-table tbody tr:hover {
    background-color: var(--bg-elevated);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* --- IF-1: heroen reiser seg ---
     .hero-rise og .hero-rise-1..4 (0/60/120/180 ms) kommer fra style.css.
     De to siste trinnene i koreografien finnes ikke som husklasser, og settes
     her i stedet for aa utvide et lag 1 300 andre sider deler.
     h1 har .hero-rise--hold: den forflytter seg uten aa tone. Animerer man
     opacity paa LCP-elementet, flyttes LCP-tidspunktet til animasjonens slutt. */
  .ifpi-stat-page .hero-actions.hero-rise { animation-delay: 240ms; }
  /* Heltefiguren laa paa 0 ms, altsaa foran overskriften den skal illustrere:
     .hero-rise uten talltrinn arver 0 ms fra style.css. Den er nummer seks i
     lesningen paa mobil (etter knappene) og hoeyre halvdel paa desktop, og
     ligger derfor mellom knappene og redaksjonsnotatet. */
  .ifpi-stat-page .ifpi-hero-figur.hero-rise { animation-delay: 300ms; }
  .ifpi-stat-page .ifpi-editor-note.hero-rise { animation-delay: 360ms; }

  /* --- IF-2: statstripa deles ut ---
     Fire tall, 50 ms mellom hvert, etter at heroen har landet. Kolonnene har
     flex: 1 1 0 og fast bredde, saa ankomsten flytter ingenting. */
  .ifpi-stat-page .stat-strip .stat-num-item {
    animation: reviewHeroRise 400ms var(--ease-out-quart) var(--stat-d, 0ms) both;
  }
  .ifpi-stat-page .stat-strip .stat-num-item:nth-child(1) { --stat-d: 260ms; }
  .ifpi-stat-page .stat-strip .stat-num-item:nth-child(2) { --stat-d: 310ms; }
  .ifpi-stat-page .stat-strip .stat-num-item:nth-child(3) { --stat-d: 360ms; }
  .ifpi-stat-page .stat-strip .stat-num-item:nth-child(4) { --stat-d: 410ms; }

  /* IF-3 teller opp de samme fire tallene. Uten fast sifferbredde vandrer
     tallet sidelengs mens det teller. Settes her fordi opptellingen bare
     kjoerer naar bevegelse er greit. */
  .ifpi-stat-page .stat-num-item strong { font-variant-numeric: tabular-nums; }

  /* --- IF-4: seksjonsavsloering ---
     Kroken er data-motion="hub" paa <main>. Regelverket ligger i style.css
     (.js-reveal / .is-inview).

     RETTET 04.09.2026. Husets .js-reveal setter opacity: 0 og lar .is-inview
     slaa den paa igjen. Hviletilstanden for en seksjon var dermed «usynlig», og
     .is-inview kommer fra en IntersectionObserver som ikke alltid kan kjoere.
     Malt paa denne sida med Playwright, alle seks seksjonene paa opacity 0:
       - utskrift (emulateMedia print) uten at leseren hadde rullet
       - fane som ikke var synlig; Chromium kjoerer ikke observatoeren uten
         rendering, og alt som rendrer uten fokus ser den samme tomme sida
     I tillegg sto alt under folden paa 0 ved ankerhopp til #formater og ved
     rulling som skjedde foer observatoeren rakk aa melde inn.
     Figurene, forstoerringen og noekkelkortene var allerede unntatt lenger
     nede i fila. Seksjonene som INNEHOLDER dem var det ikke, og fila paastod
     likevel i toppen at hviletilstanden var den ferdige sida.

     Rettelsen snur avhengigheten i stedet for aa lappe symptomet: hviletilstanden
     er den ferdige seksjonen, og ankomsten baeres av en animasjon som bare
     finnes naar .is-inview faktisk lander. Uteblir klassen, staar seksjonen
     ferdig. Samme koreografi som foer naar observatoeren fungerer, samme
     varighet og kurve som husets overgang.

     Scopet til .ifpi-stat-page med vilje: hviletilstanden i style.css er felles
     for over 1 300 sider og skal ikke endres herfra. */
  .ifpi-stat-page main[data-motion="hub"] .venue-fakta.js-reveal {
    opacity: 1;
    transform: none;
  }

  .ifpi-stat-page main[data-motion="hub"] .venue-fakta.js-reveal.is-inview {
    animation: reviewHeroRise var(--dur-reveal) var(--ease-out-quart) backwards;
  }

  /* IF-5 og IF-6 ble fjernet 04.09.2026: de animerte <progress>-radene i
     .ifpi-bar-row, som ikke finnes lenger. IF-22 til IF-29 under er laget som
     erstatter dem, skrevet mot de fire inline-SVG-figurene.
     ============================================================
     FIGURLAGET (IF-22 til IF-28), animasjonspass 04.09.2026.
     Dokumentert i docs/ANIMASJONSPASS-STATISTIKK-2026-09-04.md.

     Ett verb per figurtype, og verbet er paastanden figuren gjoer:
       vokser fra grunnlinja  = dette er en MENGDE (soeyler)
       fylles fra venstre     = dette er en ANDEL av noe helt (baand og rader)
       tegnes fra venstre     = dette er TID som gaar (indekslinjene)
     Ingenting toner bare inn, og ingen tall beveger seg: etikettene under
     figurene er svaret leseren kom for og staar ferdig fra foerste frame.

     Hviletilstanden er den ferdige figuren. Alle regler her ligger enten paa
     .is-inview (settes av js/main.js, altsaa ingen JS = ingen animasjon, bare
     den ferdige figuren) eller paa heltefiguren, som kjoerer paa last uten JS.
     ============================================================ */

  /* Aarsrytmen. data-aar staar paa hver dataflate i de tre aarsfigurene, saa
     hero, omsetning og andel deler ett og samme takstslag: 45 ms per aar,
     venstre mot hoeyre. Aaret er informasjonen, derfor er delayen bundet til
     aaret og ikke til posisjonen i DOM. */
  .ifpi-graf [data-aar="2020"] { --aar-d: 0ms; }
  .ifpi-graf [data-aar="2021"] { --aar-d: 45ms; }
  .ifpi-graf [data-aar="2022"] { --aar-d: 90ms; }
  .ifpi-graf [data-aar="2023"] { --aar-d: 135ms; }
  .ifpi-graf [data-aar="2024"] { --aar-d: 180ms; }
  .ifpi-graf [data-aar="2025"] { --aar-d: 225ms; }

  /* Trettenaarsrytmen (05.09.2026). Siden har naa TO aarsfamilier: IFPIs seks
     aar (2020 til 2025) og Kunst i talls tretten aar (2012 til 2024). De kan
     ikke dele --aar-d, for da maatte 2020 hatt to verdier: 0 ms som startaar i
     den ene familien, 240 ms som niende aar i den andre.

     Loesningen er en egen variabel og ikke en mer spesifikk selektor paa
     --aar-d. To regler med lik spesifisitet avgjoeres av rekkefoelgen i fila,
     og en rytme som gaar i stykker naar noen sorterer blokka er ikke en rytme
     man kan stole paa. Med to navn finnes feilen ikke.

     30 ms og ikke 45: tolv sprang gir 360 ms sveip, mot 540 ms med husets
     seksaarstakt. Over omtrent 400 ms slutter en soeylerekke aa lese som EN
     bevegelse gjennom tiden og begynner aa lese som tretten hendelser. */
  .ifpi-graf--konsert [data-aar="2012"] { --tid-d: 0ms; }
  .ifpi-graf--konsert [data-aar="2013"] { --tid-d: 30ms; }
  .ifpi-graf--konsert [data-aar="2014"] { --tid-d: 60ms; }
  .ifpi-graf--konsert [data-aar="2015"] { --tid-d: 90ms; }
  .ifpi-graf--konsert [data-aar="2016"] { --tid-d: 120ms; }
  .ifpi-graf--konsert [data-aar="2017"] { --tid-d: 150ms; }
  .ifpi-graf--konsert [data-aar="2018"] { --tid-d: 180ms; }
  .ifpi-graf--konsert [data-aar="2019"] { --tid-d: 210ms; }
  .ifpi-graf--konsert [data-aar="2020"] { --tid-d: 240ms; }
  .ifpi-graf--konsert [data-aar="2021"] { --tid-d: 270ms; }
  .ifpi-graf--konsert [data-aar="2022"] { --tid-d: 300ms; }
  .ifpi-graf--konsert [data-aar="2023"] { --tid-d: 330ms; }
  .ifpi-graf--konsert [data-aar="2024"] { --tid-d: 360ms; }

  /* Soeyler vokser fra sin egen underkant. fill-box er noedvendig: uten den
     regnes origo fra SVG-viewporten og soeylene ville skalert fra midten av
     hele figuren. I omsetning og andel er grunnlinja nullpunktet paa hver sin
     skala.

     05.09.2026: .ifpi-graf--hero sto her og finnes ikke lenger. Foldfiguren er
     bygget av .ifpi-formatrad, som fyller fra venstre, ikke av soeyler som
     vokser fra bunnen. Konsertfiguren kom til i animasjonspasset samme dag.
     Storrelses-, rettighets- og eksportfiguren staar med vilje uten regler;
     begrunnelsen staar samlet lenger nede i blokka. */
  .ifpi-graf--omsetning .d-hoy,
  .ifpi-graf--andel .d-hoy,
  .ifpi-graf--konsert .d-hoy,
  .ifpi-graf--konsert .d-mass {
    transform-box: fill-box;
    transform-origin: bottom;
  }

  /* Fyll vokser fra venstre kant av sin egen flate. Sporet under staar stille:
     det er beholderen, ikke maalingen. */
  .ifpi-graf--baand .d-hoy,
  .ifpi-formatrad__stolpe .d-mass,
  .ifpi-formatrad__stolpe .d-hoy {
    transform-box: fill-box;
    transform-origin: left;
  }

  /* Figurene baerer sin egen ankomst gjennom dataflatene. Uten dette ville
     figuren tone inn OG soeylene vokse: to bevegelser paa samme innhold.
     Samme grep som .ifpi-key-grid over. */
  .ifpi-chart[data-motion-reveal].js-reveal,
  .ifpi-forstorring[data-motion-reveal].js-reveal { opacity: 1; transform: none; }

  /* IF-22 sto her og animerte heltefigurens seks aarssoeyler. Heltefiguren ble
     fjernet 05.09.2026, og regelen med den. Arvtakeren er IF-36 rett under.

     --- IF-36: foldfigurens fire stroemmer fylles (animasjonspass 05.09.2026) ---
     Sidens tese: fire inntektsstroemmer paa EN skala, og konsertene er tre
     ganger den nest stoerste. Fyllet fra venstre er husets andelsverb, og her
     er andelen av linjalen 0 til 4 500 nettopp paastanden.

     Lik varighet paa alle fire, ikke lik fart. Konsertsoeyla skal tilbakelegge
     888 av 1 000 enheter paa den samme tida som utlandssoeyla bruker paa 129:
     forskjellen i FART er forskjellen i stoerrelse, og det er den leseren skal
     kjenne. Lik fart ville gjort de tre smaa ferdige med en gang og gjort
     figuren til en ventetid.

     Kjoerer paa last uten JS, som heltefiguren gjorde, og starter 420 ms:
     etter at blokka selv har reist seg (300 ms) og etter overskriften og
     ingressen den illustrerer. 400 ms er husets verdi for akkurat denne
     komponenten (IF-26 bruker den paa de forstoerrede radene). */
  .ifpi-hero-figur .ifpi-formatrad:nth-of-type(1) { --rad-d: 0ms; }
  .ifpi-hero-figur .ifpi-formatrad:nth-of-type(2) { --rad-d: 60ms; }
  .ifpi-hero-figur .ifpi-formatrad:nth-of-type(3) { --rad-d: 120ms; }
  .ifpi-hero-figur .ifpi-formatrad:nth-of-type(n+4) { --rad-d: 180ms; }
  .ifpi-hero-figur .ifpi-formatrad__stolpe .d-hoy,
  .ifpi-hero-figur .ifpi-formatrad__stolpe .d-mass {
    animation: ifpiBaandUt 400ms var(--ease-out-quart) calc(420ms + var(--rad-d, 0ms)) backwards;
  }

  /* --- IF-38: konsertsoeylene, tretten aar ---
     Samme verb som de andre soeylefigurene, men trettenaarsrytmen (--tid-d).
     Pandemiaarene er de to graa soeylene midt i sveipet, saa hullet i 2020 og
     2021 kommer paa sin plass i tiden og ikke som en egen hendelse.
     Grunnlinja staar stille. */
  .ifpi-chart[data-motion-reveal].is-inview .ifpi-graf--konsert .d-hoy,
  .ifpi-chart[data-motion-reveal].is-inview .ifpi-graf--konsert .d-mass {
    animation: ifpiSoyleOpp 380ms var(--ease-out-quart) calc(120ms + var(--tid-d, 0ms)) backwards;
  }

  /* --- IF-39: de tre avtaletypene ---
     Samme komponent, samme keyframe og samme takt som IF-26, men her betyr
     starten noe ekstra: baandene er FORSKJOEVNE. Artistavtalen starter paa
     15 prosent, lisensavtalen paa 25, distribusjonsavtalen paa 0. Fyllet
     vokser fra baandets egen venstrekant, altsaa fra nedre grense i
     intervallet, og de tre ulike startpunktene blir synlige nettopp fordi det
     er der bevegelsen begynner. Figurens paastand er at avtaletypen betyr mer
     enn satsen, og startpunktet er halve den paastanden.

     Kroken er .ifpi-chart--avtale og ikke .ifpi-chart: de forstoerrede
     formatradene ligger ogsaa i en .ifpi-chart[data-motion-reveal], og en
     bredere selektor ville gitt dem to slag. */
  .ifpi-chart--avtale .ifpi-formatrad:nth-of-type(1) { --rad-d: 0ms; }
  .ifpi-chart--avtale .ifpi-formatrad:nth-of-type(2) { --rad-d: 60ms; }
  .ifpi-chart--avtale .ifpi-formatrad:nth-of-type(n+3) { --rad-d: 120ms; }
  .ifpi-chart--avtale[data-motion-reveal].is-inview .ifpi-formatrad__stolpe .d-hoy {
    animation: ifpiBaandUt 400ms var(--ease-out-quart) var(--rad-d, 0ms) backwards;
  }

  /* TRE FIGURER SOM MED VILJE IKKE BEVEGER SEG (05.09.2026).
     Siden er 18 636 px paa 1280 og 29 552 px paa 390, med ni figurer. Beveger
     alle seg, betyr ingen av dem noe. Disse tre er vurdert og forkastet, hver
     paa sin egen grunn, ikke for aa spare arbeid:

     .ifpi-graf--storrelse. To soeyler paa 100 prosent, samme aar, ingen tid og
     ingen rekkefoelge. Paastanden er en KONTRAST mellom to tall som staar ved
     siden av hverandre, og den er komplett i det oeyeblikket begge er malt.
     Geometrien sier det samme: det graa feltet starter ikke paa grunnlinja,
     saa et fyll nedenfra ville latt soeyla sveve over aksen mens det pagikk.
     Figuren er H3 rett under en figur som beveger seg, og at konklusjonen
     staar stille mens opptakten til den beveger seg er i seg selv et utsagn.

     .ifpi-graf--rettigheter. Fire soeyler i to par, ingen tid. Det eneste
     bevegelse kunne lagt til var en rekkefoelge (krevd inn, saa til
     fordeling), og den rekkefoelgen ville paastatt en aarsakskjede figuren
     ikke tegner: soeylene staar ved siden av hverandre som to maalinger, ikke
     oppaa hverandre som inn og ut.

     .ifpi-graf--eksport. Tretten stablede soeyler, altsaa samme form som
     IF-38, og fristende av den grunn alene. Men seksjonens paastand er at
     VEKSTEN er konserthonorar, altsaa at det gule vokser raskere enn det
     graa. Ett slag per aar (begge flatene sammen) skalerer soeyla med et
     konstant skille og sier dermed ikke det: det sier bare «dette er en
     mengde». To slag per aar ville sagt det, men det er 26 animerte flater
     paa sidens siste figur, paa det datagrunnlaget siden selv merker som det
     tynneste. En bevegelse som ikke baerer paastanden skal kuttes, ikke
     dempes, og siden skal ende i ro. */

  /* --- IF-23: omsetningsfiguren, vannfallet ---
     Ett slag per aar. Samme aarsrytme som andelsfiguren, saa de to
     IFPI-aarsfigurene sveiper venstre mot hoeyre i samme takt, og 2021 har
     45 ms i begge. (Heltefiguren var den tredje fram til 05.09.2026.) Figuren har ingen 2020-kolonne, saa foerste slag lander 165 ms.

     Origo er fortsatt `bottom` og det er noeyaktig riktig for et vannfall:
     trinnets egen underkant ER fjoraarets nivaa, saa scaleY(0 til 1) vokser fra
     der forrige trinn sluttet. Bevegelsen sier «dette ble lagt oppaa», ikke
     «dette staar paa null». Trinnlinjene mellom trinnene animerer ikke: de er
     ramme, og en ramme som beveger seg er en ramme man ikke kan maale mot. */
  .ifpi-chart[data-motion-reveal].is-inview .ifpi-graf--omsetning .d-hoy {
    animation: ifpiSoyleOpp 380ms var(--ease-out-quart) calc(120ms + var(--aar-d, 0ms)) backwards;
  }

  /* --- IF-24: formatbaandet fylles ---
     Sporet og den graa resten staar stille. Det gule fyller fra venstre og
     bremser inn mot resten: reisen ER de 93,6 prosentene, og landingen skjer i
     grensesnittet mellom stroemming og fysisk salg. 620 ms fordi et fyll som
     skal leses som en andel trenger lengre reise enn en ankomst. */
  .ifpi-chart[data-motion-reveal].is-inview .ifpi-graf--baand .d-hoy {
    animation: ifpiBaandUt 620ms var(--ease-out-quart) 120ms backwards;
  }

  /* --- IF-25: formatskillene tennes ---
     Foerst hvor stor stroemmingen er, saa hvordan den deler seg. Merket under
     baandet lander samtidig, fordi det peker paa den samme grensen. */
  .ifpi-chart[data-motion-reveal].is-inview .ifpi-graf--baand .d-skille-baand,
  .ifpi-chart[data-motion-reveal].is-inview .ifpi-graf--baand .d-brakett {
    animation: ifpiSkilleInn 200ms var(--ease-out-quart) 640ms backwards;
  }

  /* Skalastrekene i de forstoerrede soeylene staar stille mens fyllet vokser
     forbi dem. Det er nettopp poenget: linjalen er fast, maalingen beveger seg. */

  /* --- IF-26: de forstoerrede radene ---
     Egen utloeser (data-motion-reveal paa .ifpi-forstorring), ikke figurens.
     Radene ligger 300 px under baandet og leses som en egen handling; hektet
     paa baandets utloeser ville de vaert ferdige foer leseren kom dit.
     Radene deles ut ovenfra og ned, som stoerrelsen de er sortert etter. */
  .ifpi-forstorring[data-motion-reveal] .ifpi-formatrad:nth-of-type(1) { --rad-d: 0ms; }
  .ifpi-forstorring[data-motion-reveal] .ifpi-formatrad:nth-of-type(2) { --rad-d: 60ms; }
  .ifpi-forstorring[data-motion-reveal] .ifpi-formatrad:nth-of-type(3) { --rad-d: 120ms; }
  .ifpi-forstorring[data-motion-reveal] .ifpi-formatrad:nth-of-type(n+4) { --rad-d: 180ms; }
  .ifpi-forstorring[data-motion-reveal].is-inview .ifpi-formatrad__stolpe .d-mass,
  .ifpi-forstorring[data-motion-reveal].is-inview .ifpi-formatrad__stolpe .d-hoy {
    animation: ifpiBaandUt 400ms var(--ease-out-quart) var(--rad-d, 0ms) backwards;
  }

  /* --- IF-27 (indekslinjene) og IF-37 (publikumskurven) tegnes ---
     Regelen er felles med vilje: den treffer hver .d-serier-gruppe i en figur
     som er meldt inn, og begge figurene sier det samme, «tid som gaar».
     05.09.2026 fikk publikumsfiguren en .d-serier-gruppe rundt flaten og linja
     si og arver dermed slaget uten en eneste ny linje CSS. Klippet er ETT
     klipp om begge, ellers driver flate og linje fra hverandre paa subpiksel.

     De to stedene paa siden der --ease-in-out-quart hoerer hjemme. Tokenet er
     husets kurve for forflytning som skal akselerere OG bremse, og disse to er
     de eneste bevegelsene her som reiser GJENNOM en figur i stedet for aa
     ankomme i den. Indeksklipperen gaar fra 2020 til 2025 og bremser inn i det
     siste aaret, som er nettopp der de to linjene krysser hverandre.
     Publikumsklipperen gaar fra 1991 til 2025 og bremser inn i 2025, som er
     tallet overskriften lover. Samme mekanisme, samme begrunnelse, og fortsatt
     ingen tredje kurve paa siden.

     Pandemifallet i 2021 ligger 88 prosent ut i publikumsfigurens reise,
     altsaa der klipperen allerede har begynt aa bremse. Det stupet er figurens
     ene dramatiske trekk, og det tegnes derfor langsomt.
     Klippet gaar til inset(-4 %) og ikke inset(0): fill-box er geometriens
     boks UTEN strek, og inset(0) ville barbert de runde endene og toppunktet
     med rundt en piksel, permanent, fordi fill-mode holder sluttverdien.
     Den stiplede referanselinja staar utenfor gruppa. Den er ramme. */
  .ifpi-chart[data-motion-reveal].is-inview .d-serier {
    animation: ifpiLinjeTegnes 560ms var(--ease-in-out-quart) 120ms backwards;
  }

  /* --- IF-28: andelssoeylene ---
     Samme aarsrytme som de to andre aarsfigurene. Starten er lagt til 380 ms og
     ikke etter at linjene over er ferdig tegnet: de to feltene deler aarsakse,
     og med denne starten passerer soeylene aarene omtrent naar klipperen over
     dem gjoer det. Ett tidssveip gjennom begge feltene, ikke to figurer etter
     hverandre. Ventet det til 560 ms, sto det nederste feltet tomt saa lenge at
     leseren rakk aa lure paa om det manglet noe. */
  .ifpi-chart[data-motion-reveal].is-inview .ifpi-graf--andel .d-hoy {
    animation: ifpiSoyleOpp 360ms var(--ease-out-quart) calc(380ms + var(--aar-d, 0ms)) backwards;
  }

  /* --- IF-7: noekkelkortene deles ut ---
     Griden selv staar stille og kortene baerer ankomsten, samme grep som
     .venue-chips.hero-rise i style.css. Uten dette ville griden tone inn OG
     kortene reise seg: to bevegelser paa det samme innholdet. */
  .ifpi-key-grid[data-motion-reveal].js-reveal { opacity: 1; transform: none; }
  .ifpi-key-grid[data-motion-reveal] .ifpi-key-card:nth-child(1) { --kort-d: 0ms; }
  .ifpi-key-grid[data-motion-reveal] .ifpi-key-card:nth-child(2) { --kort-d: 60ms; }
  .ifpi-key-grid[data-motion-reveal] .ifpi-key-card:nth-child(3) { --kort-d: 120ms; }
  .ifpi-key-grid[data-motion-reveal] .ifpi-key-card:nth-child(n+4) { --kort-d: 180ms; }
  .ifpi-key-grid[data-motion-reveal].is-inview .ifpi-key-card {
    animation: reviewHeroRise 400ms var(--ease-out-quart) var(--kort-d, 0ms) both;
  }

  /* --- IF-8: Beregnet-stempelet ---
     Merket er sidens redelighetsgrep, og et lite stempel gjoer at oeyet ser
     det. --ease-bounce er reservert stempeloeyeblikk: dette er det ENE
     bruksstedet paa siden, aldri paa tallene og aldri paa kortene. Merket i
     seksjonen «Sammenlign to aar» staar bevisst utenfor. */
  .ifpi-key-grid[data-motion-reveal].is-inview .ifpi-data-label--calculated {
    animation: ifpiStempelInn 250ms var(--ease-bounce) calc(var(--kort-d, 0ms) + 250ms) both;
  }

  /* --- IF-11: trykk-svaret ---
     .info-card--link:active fantes fra foer, men var scopet til
     .review-article, saa «Les videre»-kortene her hadde null trykkrespons.
     .btn:active har allerede scale(0.97) globalt og roeres ikke.
     Overgangen staar inne i :active, som i style.css: da beholder elementene
     sine egne hover-overganger uendret. Piller og kontroller presses litt
     hardere (0,97) enn kortflatene (0,98). */
  /* --- IF-29: tallboksene ---
     .ifpi-tallboks > summary kom til med figurene 04.09.2026 og var sidens
     eneste trykkflate uten trykk-svar. Den er en bred rad, ikke en pille, og
     presses derfor som en kortflate. */
  .ifpi-stat-page .info-card--link:active,
  .ifpi-stat-page .ifpi-tallboks > summary:active {
    transform: scale(0.98);
    transition: transform var(--dur-press) var(--ease-out-quart);
  }
  .ifpi-stat-page .venue-quicknav a:active,
  .ifpi-stat-page .faq-question:active,
  .ifpi-stat-page .ifpi-compare__controls select:active,
  /* IF-50: de nye pillene presses som alle andre piller paa sida. */
  .ifpi-stat-page .ifpi-figurknapp:active {
    transform: scale(0.97);
    transition: transform var(--dur-press) var(--ease-out-quart);
  }

  /* IF-51: kopieringsstempelet. NOEYAKTIG samme oeyeblikk som .byliste-del i
     bylistene og .copy-link-btn i husets eget lag: 260 ms, --ease-bounce, ett
     stempel. Bevegelsen baerer en tilstandsendring leseren ellers ikke ville
     sett, siden knappen ikke flytter seg og teksten byttes paa stedet.
     Deler leseren i stedet (navigator.share), staar nettleserens eget deleark
     for bekreftelsen, og knappen stempler ingenting: en bekreftelse paa noe vi
     ikke vet utfallet av er verre enn ingen. */
  .ifpi-stat-page .ifpi-figurknapp.is-kopiert {
    animation: ifpiKopiert 260ms var(--ease-bounce);
  }

  /* --- IF-12, overgangen --- */
  @media (hover: hover) and (pointer: fine) {
    .ifpi-stat-page .compare-table tbody tr {
      transition: background-color var(--dur-hover) ease;
    }
  }

  /* --- IF-14: fokusringen lander ---
     reviewFocusLand finnes i style.css, men er scopet til .review-article.
     Selve ringen er global og staar uroert: bare landingen ligger her. */
  .ifpi-stat-page main a:focus-visible,
  .ifpi-stat-page .venue-quicknav a:focus-visible,
  .ifpi-stat-page .hero-actions .btn:focus-visible,
  .ifpi-stat-page .faq-question:focus-visible,
  .ifpi-stat-page .ifpi-tallboks > summary:focus-visible,
  .ifpi-stat-page .ifpi-compare__controls select:focus-visible {
    animation: reviewFocusLand 140ms var(--ease-out-quart);
  }
}

/* Soeyla vokser fra sin egen underkant: tallet er en mengde. Brukt av
   IF-23, IF-28 og IF-38. */
@keyframes ifpiSoyleOpp {
  from { transform: scaleY(0); }
  to { transform: none; }
}

/* Fyllet vokser fra venstre kant: tallet er en andel av noe helt.
   Brukt av IF-24, IF-26, IF-36 og IF-39. */
@keyframes ifpiBaandUt {
  from { transform: scaleX(0); }
  to { transform: none; }
}

/* Formatskillene tennes naar baandet er fullt. Bare opasitet: skillene staar
   allerede paa plass, de skal ikke fly inn. */
@keyframes ifpiSkilleInn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Serien tegnes fra venstre mot hoeyre: tiden gaar. Brukt av IF-27
   (2020 til 2025) og IF-37 (1991 til 2025). Klippet starter paa 104 % fra
   hoeyre (ikke 100 %) saa den runde enden i 2020 ikke stikker fram som en prikk
   foer tegningen begynner, og ender paa -4 % saa streken aldri barberes. */
@keyframes ifpiLinjeTegnes {
  from { clip-path: inset(-4% 104% -4% -4%); }
  to { clip-path: inset(-4%); }
}

/* Kopieringsstempelet (IF-51). Samme geometri som bylistenes
   byliste-kopiert: én liten sammentrekning, ingen farge i bevegelsen, fordi
   fargen allerede er byttet av .is-kopiert. */
@keyframes ifpiKopiert {
  from { transform: scale(1.06); }
  to { transform: none; }
}

/* Beregnet-merket stemples ned. Det ene stempeloeyeblikket i figurlaget. */
@keyframes ifpiStempelInn {
  from { opacity: 0; transform: scale(1.12); }
  to { opacity: 1; transform: none; }
}