/* ==========================================================================
   Lyng (/artister/lyng/), sidenivå. Lastes bare av denne siden via
   meta.sideCss i data/artist-content/lyng.md, så artistmalen for de andre
   sidene er uendret. Laget 09.10.2026.

   1. Portrettheroen: eierens egne bilder er stående. Den felles heroen er
      laget for liggende fullbleed-foto og ville kuttet bort hodet eller
      skalert spilleren ned til en flekk. Her blir bildet et panel:
      desktop = tekst til venstre, fotoet som høyt panel til høyre med myk
      venstrekant; mobil = fotoet øverst som et omslag, og tittelen legger
      seg inn i den nedre fadingen. Kanten er en mask på selve bildet, så
      parallaksen i malen flytter fadingen med seg i stedet for å vise en
      hard kant.
   2. Figurene: tre SVG-figurer i brødteksten (tidslinja, lørdagsrekorden og
      Topplista uke for uke). Én felles bredde, 400 px, som konsertsidenes
      figurer (docs/DESIGNKRITIKK-KONSERTSIDE-FIGURER-2026-09-25.md), så ingen
      tekst i figuren blir mindre enn 13,5 px på 390.
   3. Bevegelse: main har data-motion="hub", og js/main.js melder figurene inn
      (.js-reveal, .is-inview). Uten JS eller med redusert bevegelse står alt
      ferdig tegnet. Tidslinjer og listelinjer tegnes lineært fordi bevegelsen
      koder tid (ANIMASJONSPASS-SJEKKLISTE punkt 8); alt som ankommer bruker
      --ease-out-quart.
   ========================================================================== */

/* ---------- 1. Portrettheroen ---------- */
.artist-hero--portrett .artist-hero-merke {
  margin: 0;
  gap: 10px;
  text-transform: none;
  letter-spacing: normal;
}
.artist-hero--portrett .artist-hero-merke .read-time {
  color: rgba(247, 243, 236, 0.78);
  font-weight: 500;
}
.artist-hero--portrett .artist-hero-meta { opacity: 1; }
.artist-hero--portrett .artist-hero-scroll { display: none; }
.artist-hero--portrett .artist-hero-image {
  filter: saturate(0.92);
}

@media (min-width: 820px) {
  .artist-hero--portrett .artist-hero-image {
    inset: 0 0 0 auto;
    width: 46%;
    height: 100%;
    object-position: 50% 30%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  }
  .artist-hero--portrett .artist-hero-overlay {
    background:
      linear-gradient(90deg, var(--artist-ink) 0%, var(--artist-ink) 50%, rgba(10, 10, 10, 0) 66%),
      linear-gradient(0deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0) 28%);
  }
  /* Prosent i padding regnes av heroens bredde, ikke av 1440-boksen. Derfor
     slipper innholdet maksbredden og sentreres med venstrepadding i stedet,
     ellers blir det et tomt felt foran panelet over 1440 px. */
  .artist-hero--portrett .artist-hero-content {
    max-width: none;
    padding-left: max(48px, calc((100% - 1440px) / 2 + 48px));
    padding-right: calc(46% + 24px);
  }
  .artist-hero--portrett .artist-hero-intent-answer {
    width: 100%;
    max-width: 640px;
  }
  /* En tynn gul strek der panelet begynner, så bildet leses som et bevisst
     utsnitt og ikke som et bilde som ikke rakk helt fram. */
  .artist-hero--portrett::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 18%;
    bottom: 18%;
    right: 46%;
    width: 2px;
    background: linear-gradient(180deg, rgba(255, 193, 7, 0) 0%, var(--artist-accent) 50%, rgba(255, 193, 7, 0) 100%);
    opacity: 0.55;
  }
  .artist-hero--portrett .artist-hero-attribution {
    right: 20px;
    bottom: 12px;
  }
}
/* Mellom 820 og 1199 px er tekstkolonnen 370-520 px. To kolonner i Raskt svar
   ville gitt svarteksten 120-230 px, så metaen legger seg under teksten. */
@media (min-width: 820px) and (max-width: 1199px) {
  .artist-hero--portrett .artist-hero-intent-answer {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .artist-hero--portrett .artist-hero-intent-meta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    white-space: normal;
  }
}

@media (max-width: 819px) {
  /* Omslagshøyden: kvadratisk-pluss på telefon, men aldri så høyt at Raskt svar
     havner under folden på nettbrett. */
  .artist-hero--portrett {
    --portrett-h: min(118vw, 620px);
    --portrett-h: min(118vw, 56svh, 620px);
  }
  .artist-hero--portrett .artist-hero-image {
    inset: 0 0 auto 0;
    width: 100%;
    height: var(--portrett-h);
    object-position: 50% 26%;
    -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
  }
  .artist-hero--portrett .artist-hero-overlay {
    background:
      linear-gradient(180deg, rgba(10, 10, 10, 0.6) 0%, rgba(10, 10, 10, 0) 16%),
      linear-gradient(180deg, rgba(10, 10, 10, 0) 40%, rgba(10, 10, 10, 0.55) 62%, rgba(10, 10, 10, 0) 100%);
  }
  .artist-hero--portrett .artist-hero-content {
    grid-template-rows: auto auto auto auto;
  }
  /* Tittelblokka starter nede i bildet: øyenbrynet og «Lyng» står i den
     nedre fadingen, ingressen under bildet. Merket flyttes ned under
     ingressen, ellers legger det seg over hodet til spilleren. */
  .artist-hero--portrett .artist-hero-title-block {
    order: 1;
    padding-top: calc(var(--portrett-h) - 196px);
  }
  .artist-hero--portrett .artist-hero-meta { order: 2; }
  .artist-hero--portrett .artist-hero-bottom { order: 3; margin-top: 24px; }
  .artist-hero--portrett .artist-hero-breadcrumb { order: 4; }
  .artist-hero--portrett .artist-hero-attribution {
    top: 12px;
    bottom: auto;
    right: 14px;
  }
}

/* ---------- Kontrast på papirflaten i mørk modus ----------
   Artistmalen beholder papirflaten (#f7f3ec) i begge temaer, men style.css gir
   p farge fra --text-muted, som i mørk modus er lys grå (#8b92a3): 2,82:1 mot
   papiret, målt av scripts/design-gate.js 09.10.2026. Det gjelder alle
   artistsider og er meldt som malfeil; her rettes det bare for denne siden.
   Gullfargen #B8860B på øyenbryn og kildenumre er 2,94:1 i begge temaer. */
.artist-page .artist-prose p { color: #3f3a33; }
.artist-page .artist-section-eyebrow,
.artist-page .artist-eeat-check { color: #7a5a06; }
.artist-page .artist-section-eyebrow::before { background: #7a5a06; }
.artist-page .artist-prose .info-card-icon { color: var(--artist-ink); }
/* FAQ-en følger temaet (style.css), men flaten var hvit også i mørk modus, så
   kategoriknappene fikk lys tekst på hvitt (1,20:1). I mørk modus får den
   nettstedets mørke flate, og da stemmer temaets egne farger igjen. */
[data-theme="dark"] .artist-page .artist-faq-section {
  background: var(--bg);
  border-top-color: var(--border);
}
[data-theme="dark"] .artist-page .artist-faq-section h2 { color: var(--text); }

/* Infokortene er fakta, ikke knapper: ingen skygge og ingen hover-løft
   (style.css gir .info-card skygge og hover som et klikkbart kort). Under
   480 px står ikonet til venstre for teksten i stedet for over den. */
.artist-page .artist-prose .info-card {
  border: 0;
  border-left: 3px solid var(--artist-accent-deep);
  border-radius: 0;
  box-shadow: none;
  transition: none;
}
.artist-page .artist-prose .info-card:hover {
  border-left-color: var(--artist-accent-deep);
  box-shadow: none;
}
@media (max-width: 480px) {
  .artist-page .artist-prose .info-card {
    flex-direction: row;
    align-items: center;
  }
}

/* Nøkkeltallene er en flex-rad i malen, så grid-reglene der virker ikke, og
   max-width 240 px sentrerer kolonnen på mobil. To og to opp til 855 px. */
@media (max-width: 855px) {
  .artist-page .artist-quick-stats-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
  }
  .artist-page .artist-quick-stat { max-width: none; }
}

/* Konsertkortet har ingen scenebilde her, så høyre kolonne ville stått tom. */
.artist-page .artist-concert-card:not(:has(.artist-concert-image)) {
  grid-template-columns: minmax(0, 1fr);
}
.artist-page .artist-concert-card:not(:has(.artist-concert-image)) .artist-concert-info {
  max-width: 680px;
}

/* Kildene står bak et klikk (meta.kilderBakKlikk), med tittel og dato per kilde. */
.artist-page .artist-eeat-tittel {
  display: block;
  margin-top: 2px;
  color: #4a4a4a;
  font-weight: 400;
  text-wrap: pretty;
}
.artist-page .artist-eeat-details { margin-top: 20px; }
.artist-page .artist-eeat-summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--artist-ink);
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--artist-ink);
  cursor: pointer;
  list-style: none;
}
.artist-page .artist-eeat-summary::-webkit-details-marker { display: none; }
.artist-page .artist-eeat-summary::after {
  content: "+";
  font-size: 18px;
  line-height: 1;
}
.artist-page .artist-eeat-details[open] > .artist-eeat-summary::after { content: "\2212"; }
.artist-page .artist-eeat-summary:hover { background: rgba(10, 10, 10, 0.05); }
.artist-page .artist-eeat-summary:focus-visible {
  outline: 2px solid var(--artist-accent-deep);
  outline-offset: 3px;
}
.artist-page .artist-eeat-details[open] > .artist-eeat-list { margin-top: 16px; }

/* ---------- 2. Figurene ---------- */
.artist-prose { container-type: inline-size; }

.lyng-figur {
  margin: 2.4em 0;
  max-width: 400px;
}
.lyng-figur__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.lyng-figur figcaption,
.lyng-foto figcaption {
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.55;
  color: #4a4a4a;
  text-wrap: pretty;
}
@container (min-width: 640px) {
  .lyng-figur {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 28px;
    align-items: end;
    max-width: none;
  }
  .lyng-figur figcaption { margin-top: 0; }
}

.lf-tekst {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  fill: var(--artist-ink);
}
.lf-tekst--sterk {
  font-family: var(--font-display);
  font-weight: 700;
}
.lf-tekst--demp { fill: #555049; }
.lf-tall { font-variant-numeric: tabular-nums; }

.lf-akse { stroke: var(--artist-ink); stroke-width: 2; stroke-linecap: round; }
.lf-akse--zoom { stroke-width: 2.5; }
.lf-aar line,
.lf-leder { stroke: #8f887d; stroke-width: 1.5; }
.lf-prikk { fill: var(--artist-ink); }
.lf-prikk--klynge,
.lf-prikk--rekord { fill: var(--artist-accent); stroke: var(--artist-ink); stroke-width: 2; }
.lf-trakt { fill: rgba(255, 193, 7, 0.2); }

.lf-stolpe { fill: #a39b8e; }
.lf-stolpe--hoved { fill: var(--artist-accent); stroke: var(--artist-ink); stroke-width: 1.5; }
.lf-stolpe--demp { fill: #d6cfc2; }

.lf-rutenett line { stroke: rgba(10, 10, 10, 0.18); stroke-width: 1; stroke-dasharray: 3 4; }
.lf-linje { fill: none; stroke: var(--artist-ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.lf-punkt { fill: var(--artist-paper); stroke: var(--artist-ink); stroke-width: 2; }
.lf-punkt--topp { fill: var(--artist-accent); }

/* Bildefiguren: Miami-bildet. Smalt og høyt i brødteksten, med kampen som
   etikett, så det leses som dokumentasjon og ikke som pynt. */
.lyng-foto { margin: 2.4em 0; }
.lyng-foto__ramme {
  max-width: 340px;
  border-radius: 6px;
  overflow: hidden;
  background: #d6cfc2;
}
.lyng-foto__ramme img {
  display: block;
  width: 100%;
  height: auto;
}
.lyng-foto__sted {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--artist-ink);
}
.lyng-foto__kreditt {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  color: #555049;
}
@container (min-width: 640px) {
  .lyng-foto {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 28px;
    align-items: end;
  }
  .lyng-foto figcaption { margin-top: 0; }
}

/* ---------- 3. Bevegelse ---------- */
@media (prefers-reduced-motion: no-preference) {
  .lf-prikk,
  .lf-punkt,
  .lf-stolpe,
  .lf-hendelse {
    transform-box: fill-box;
    transform-origin: center;
  }
  .lf-stolpe { transform-origin: left center; }

  /* Tidslinja: ti år tegnes lineært, klyngen i juli lander, og den
     forstørrede juli-aksen tegnes med hendelsene der streken når dem. */
  .lyng-figur--tid.is-inview .lf-prikk--start { animation: lyngPop 300ms var(--ease-out-quart) 100ms both; }
  .lyng-figur--tid.is-inview .lf-tegn { animation: lyngTegn 1100ms linear 200ms both; }
  .lyng-figur--tid.is-inview .lf-prikk--klynge { animation: lyngPop 360ms var(--ease-out-quart) 1300ms both; }
  .lyng-figur--tid.is-inview .lf-trakt { animation: lyngInn 400ms var(--ease-out-quart) 1550ms both; }
  .lyng-figur--tid.is-inview .lf-tegn--zoom { animation: lyngTegn 500ms linear 1700ms both; }
  .lyng-figur--tid.is-inview .lf-h1 { animation: lyngStig 320ms var(--ease-out-quart) 1760ms both; }
  .lyng-figur--tid.is-inview .lf-h2 { animation: lyngStig 320ms var(--ease-out-quart) 1810ms both; }
  .lyng-figur--tid.is-inview .lf-h3 { animation: lyngStig 320ms var(--ease-out-quart) 1920ms both; }
  .lyng-figur--tid.is-inview .lf-h4 { animation: lyngStig 320ms var(--ease-out-quart) 2150ms both; }

  /* Lørdagsrekorden: stolpene vokser i rekkefølge, størst først. */
  .lyng-figur--rekord.is-inview .lf-s1 { animation: lyngVoks 700ms var(--ease-out-quart) 150ms both; }
  .lyng-figur--rekord.is-inview .lf-s2 { animation: lyngVoks 700ms var(--ease-out-quart) 300ms both; }
  .lyng-figur--rekord.is-inview .lf-s3 { animation: lyngVoks 700ms var(--ease-out-quart) 450ms both; }

  /* Topplista: linja tegnes uke for uke, og hvert punkt lander når streken
     når det (andel av linjelengden, målt fra punktene i SVG-en). */
  .lyng-figur--lista.is-inview .lf-tegn--lista { animation: lyngTegn 1400ms linear 200ms both; }
  .lyng-figur--lista.is-inview .lf-punkt { animation: lyngPop 260ms var(--ease-out-quart) both; }
  .lyng-figur--lista.is-inview .lf-punkter circle:nth-child(1) { animation-delay: 200ms; }
  .lyng-figur--lista.is-inview .lf-punkter circle:nth-child(2) { animation-delay: 619ms; }
  .lyng-figur--lista.is-inview .lf-punkter circle:nth-child(3) { animation-delay: 689ms; }
  .lyng-figur--lista.is-inview .lf-punkter circle:nth-child(4) { animation-delay: 774ms; }
  .lyng-figur--lista.is-inview .lf-punkter circle:nth-child(5) { animation-delay: 844ms; }
  .lyng-figur--lista.is-inview .lf-punkter circle:nth-child(6) { animation-delay: 914ms; }
  .lyng-figur--lista.is-inview .lf-punkter circle:nth-child(7) { animation-delay: 999ms; }
  .lyng-figur--lista.is-inview .lf-punkter circle:nth-child(8) { animation-delay: 1083ms; }
  .lyng-figur--lista.is-inview .lf-punkter circle:nth-child(9) { animation-delay: 1198ms; }
  .lyng-figur--lista.is-inview .lf-punkter circle:nth-child(10) { animation-delay: 1314ms; }
  .lyng-figur--lista.is-inview .lf-punkter circle:nth-child(11) { animation-delay: 1398ms; }
  .lyng-figur--lista.is-inview .lf-punkter circle:nth-child(12) { animation-delay: 1515ms; }
  .lyng-figur--lista.is-inview .lf-punkter circle:nth-child(13) { animation-delay: 1600ms; }
}

@keyframes lyngTegn {
  from { stroke-dasharray: 1; stroke-dashoffset: 1; }
  to { stroke-dasharray: 1; stroke-dashoffset: 0; }
}
@keyframes lyngPop {
  from { opacity: 0; transform: scale(0.3); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes lyngInn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes lyngStig {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes lyngVoks {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}