/* ==========================================================================
   Grammofon – stiler etter godkjente skisser
   Farger og mål ligger som variabler øverst, så de kan endres ett sted.
   ========================================================================== */

/* ---------- Skrifter (lagret lokalt) ---------- */
@font-face { font-family: 'Figtree'; font-weight: 400; font-display: swap; src: url('../fonts/figtree-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-weight: 400; font-display: swap; src: url('../fonts/figtree-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-weight: 500; font-display: swap; src: url('../fonts/figtree-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-weight: 500; font-display: swap; src: url('../fonts/figtree-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-weight: 600; font-display: swap; src: url('../fonts/figtree-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-weight: 600; font-display: swap; src: url('../fonts/figtree-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 600; font-display: swap; src: url('../fonts/bricolage-grotesque-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 600; font-display: swap; src: url('../fonts/bricolage-grotesque-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 800; font-display: swap; src: url('../fonts/bricolage-grotesque-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 800; font-display: swap; src: url('../fonts/bricolage-grotesque-latin-ext-800-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Variabler ---------- */
:root {
  --sort: #141414;
  --bakgrunn: #F6F5F2;
  --kort: #FFFFFF;
  --kant: #E4E1DA;
  --aksent: #1F5E63;
  --tekst: #1C1C1C;
  --tekst-2: #333333;
  --dempet: #4A4A4A;
  --dempet-2: #5A5A5A;
  --merke: #ECEAE4;
  --fare: #B32D2E;

  --font: 'Figtree', system-ui, sans-serif;
  --font-overskrift: 'Bricolage Grotesque', 'Figtree', sans-serif;

  --maks: 1160px;
  --kant-x: 24px;
  --radius-kort: 12px;
  --radius-cover: 6px;
  --skygge-cover: 0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.08);
  --skygge-stor: 0 2px 4px rgba(0,0,0,.1), 0 16px 40px rgba(0,0,0,.14);
}

/* ---------- Grunnlag ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--bakgrunn); color: var(--tekst); font-family: var(--font); font-size: 16px; line-height: 1.5; }
img { max-width: 100%; height: auto; }
a { color: var(--sort); }
a:hover { color: var(--dempet); }
h1, h2, h3 { font-family: var(--font-overskrift); font-weight: 800; margin: 0; }
:focus-visible { outline: 3px solid var(--aksent); outline-offset: 2px; }
.skjult { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hopp-til-innhold:focus { position: fixed; top: 8px; left: 8px; z-index: 10; width: auto; height: auto; clip: auto; padding: 10px 16px; background: var(--kort); border-radius: 999px; }

.ramme { max-width: var(--maks); margin: 0 auto; padding: 0 var(--kant-x); }
.innhold { padding-bottom: 64px; position: relative; isolation: isolate; }

/* Full bredde inne i .ramme (bånd og fargeflater). */
.fullbredde { width: 100vw; margin-left: calc(50% - 50vw); }

/* Utgivelsesside: dempet farge fra coveret bak toppen av siden, som glir over i bakgrunnen. */
.coverfarge { position: absolute; z-index: -1; top: 0; left: 50%; width: 100vw; height: 620px; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--coverfarge) 0%, color-mix(in srgb, var(--coverfarge) 45%, var(--bakgrunn)) 55%, var(--bakgrunn) 100%); }

/* ---------- Topp ---------- */
.topp { background: var(--sort); color: #FFF; }
.topp__indre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; }
.topp__logo { display: block; line-height: 0; padding: 4px 0; }
.topp__logo img { height: 40px; width: auto; }
.meny { display: flex; flex-wrap: wrap; gap: 6px; }
/* Menyen viser hvor man er med en hvit strek under, ikke petrol, så petrol er forbeholdt knapper som «Lytt nå». */
.meny a { position: relative; padding: 10px 14px; border-radius: 999px; color: rgba(255,255,255,.82); text-decoration: none; font-weight: 500; font-size: 15px; }
.meny a:hover { background: rgba(255,255,255,.1); color: #FFF; }
.meny a[aria-current="page"] { color: #FFF; font-weight: 600; }
.meny a[aria-current="page"]::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: #FFF; }
.meny a.meny__butikk { padding: 9px 14px; border: 1px solid #6A6A6A; font-weight: 600; }

/* ---------- Bunn ---------- */
.bunn { background: var(--sort); color: #CFCFCF; }
.bunn__indre { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; padding-top: 32px; padding-bottom: 32px; font-size: 14px; line-height: 1.7; }
.bunn a { color: #FFF; }
.bunn__logo { height: 28px; width: auto; display: block; margin-bottom: 6px; }
.bunn nav { display: flex; flex-direction: column; }

/* ---------- Felles byggeklosser ---------- */
.brodsmuler { padding: 20px 0; font-size: 14px; color: var(--dempet-2); display: flex; flex-wrap: wrap; gap: 8px; }
.knapp { display: inline-block; text-align: center; padding: 12px 20px; border-radius: 999px; background: var(--aksent); color: #FFF; font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid var(--aksent); }
.knapp:hover { color: #FFF; filter: brightness(1.12); }
.knapp--omriss { background: transparent; color: var(--sort); border-color: var(--sort); }
.knapp--omriss:hover { color: var(--sort); background: rgba(0,0,0,.04); filter: none; }
.knapp--liten { padding: 8px 14px; font-size: 13px; }

/* Lytteknapper: hodetelefoner glir inn ved hover og tastaturfokus. */
.knapp--lytt::before { content: ''; display: inline-block; width: 0; height: 1.15em; margin-right: 0; vertical-align: -.2em; opacity: 0; background: currentColor;
  -webkit-mask: var(--hodetelefoner) center / contain no-repeat; mask: var(--hodetelefoner) center / contain no-repeat;
  --hodetelefoner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15v-3a8 8 0 0 1 16 0v3'/%3E%3Crect x='3.5' y='13' width='5' height='7.5' rx='2'/%3E%3Crect x='15.5' y='13' width='5' height='7.5' rx='2'/%3E%3C/svg%3E"); }
.knapp--lytt:hover::before, .knapp--lytt:focus-visible::before { width: 1.25em; margin-right: .5em; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .knapp--lytt { transition: transform .15s ease; }
  .knapp--lytt::before { transition: width .28s cubic-bezier(.3, 1.5, .5, 1), margin .28s cubic-bezier(.3, 1.5, .5, 1), opacity .18s ease; }
  .knapp--lytt:hover { transform: translateY(-1px); }
  .knapp--lytt:hover::before { animation: lytt-bob .7s ease-in-out .28s infinite; }
}
@keyframes lytt-bob { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-2px) rotate(-7deg); } 75% { transform: translateY(-2px) rotate(7deg); } }
.knapper { display: flex; flex-wrap: wrap; gap: 8px; }
.knapper .knapp { flex: 1 1 140px; }
.kort { background: var(--kort); border: 1px solid var(--kant); border-radius: var(--radius-kort); }
.merkelapp { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .4px; padding: 4px 10px; border-radius: 999px; background: var(--merke); color: var(--tekst-2); }
.merkelapp--aksent { background: var(--aksent); color: #FFF; font-size: 13px; }
.overtittel { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--aksent); }
.seksjon { margin-top: 56px; }
.seksjon__topp { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.seksjon__topp a { font-size: 14px; font-weight: 600; }
.h2 { font-size: 24px; margin: 0 0 12px; }
.h2--stor { font-size: 30px; }

/* Cover */
.cover { display: block; position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-cover); overflow: hidden; background: #3B3F5C; box-shadow: var(--skygge-cover); }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Myk inntoning når coveret er lastet (cover.js). Til da vises fargen fra coveret. */
.js .cover img { opacity: 0; transition: opacity .5s ease; }
.js .cover img.er-lastet { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .cover img { transition: none; } }
/* Uten cover: vinylplate på lys flate, uten skygge rundt flaten. */
.cover--plate { background: var(--merke); box-shadow: none; }
.cover--plate img { object-fit: contain; padding: 6%; }
.cover--stor { border-radius: 8px; box-shadow: var(--skygge-stor); }

/* Vinylplate bak coveret i lister. Når man holder over kortet, krymper coveret mot venstre
   og plata glir fram til høyre, innenfor kortets egen rute (ingenting dekker naboen). */
.cover-ramme { position: relative; display: block; }
.cover-ramme .cover { position: relative; z-index: 1; transform-origin: left center; transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s; }
.cover-vinyl { position: absolute; z-index: 0; inset: 3%; border-radius: 50%; background: url('../img/plate.svg') center / contain no-repeat;
  transform: translateX(0) scale(.76) rotate(0); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.utg-kort:hover .cover-ramme .cover, .utg-kort:focus-within .cover-ramme .cover { transform: scale(.76); box-shadow: 6px 8px 22px rgba(0,0,0,.25); }
.utg-kort:hover .cover-vinyl, .utg-kort:focus-within .cover-vinyl { transform: translateX(14%) scale(.76) rotate(140deg); }
@media (prefers-reduced-motion: reduce) { .cover-ramme .cover, .cover-vinyl { transition: none; } }
@media (hover: none) { .cover-vinyl { display: none; } }

/* Rutenett med utgivelser */
.utg-rutenett { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; }
.utg-kort { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.utg-kort__tittel { font-weight: 600; font-size: 15px; }
.utg-kort__meta { font-size: 13px; color: var(--dempet-2); }

/* ---------- Utgivelsesside ---------- */
.utgivelse { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.utgivelse__venstre { flex: 0 1 380px; min-width: 260px; display: flex; flex-direction: column; gap: 16px; }
/* Cover, knapper og faktaboks følger med når teksten til høyre er lang.
   Bare når kolonnene står ved siden av hverandre og skjermen er høy nok til at alt får plass. */
@media (min-width: 960px) and (min-height: 800px) {
  .utgivelse__venstre { position: sticky; top: 56px; }
}
.utgivelse__hoyre { flex: 999 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
/* Under hverandre (mobil og nettbrett): cover, knapper og faktaboks i full bredde. */
@media (max-width: 959px) {
  .utgivelse { flex-direction: column; align-items: stretch; gap: 28px; }
  .utgivelse__venstre, .utgivelse__hoyre { flex: 1 1 auto; width: 100%; min-width: 0; }
  .utgivelse__venstre .cover { width: 100%; max-width: none; }
}
.utgivelse__artist { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--aksent); }
.utgivelse__artist a { color: inherit; text-decoration: none; }
.utgivelse__tittel { font-size: 56px; line-height: 1; letter-spacing: -1px; overflow-wrap: anywhere; }
.brodtekst { font-size: 17px; line-height: 1.7; color: var(--tekst-2); max-width: 680px; }
.brodtekst p { margin: 0 0 14px; }
.brodtekst p:last-child { margin-bottom: 0; }

.fakta { margin: 0; padding: 18px 20px; display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; font-size: 15px; }
.fakta dt { color: var(--dempet-2); }
.fakta dd { margin: 0; font-weight: 600; }
.fakta dd a { color: var(--aksent); }
.fakta__hint { font-weight: 400; font-size: 13px; color: var(--dempet-2); }
.fakta__mangler { color: var(--fare); }

.tabell-boks { overflow-x: auto; }
.spor { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.spor th { text-align: left; color: var(--dempet-2); font-size: 13px; text-transform: uppercase; letter-spacing: .6px; padding: 12px 16px; font-weight: 600; border-bottom: 1px solid var(--kant); }
.spor td { padding: 14px 16px; vertical-align: top; }
.spor tbody tr + tr td { border-top: 1px solid #F0EEE9; }
.spor__nr { color: var(--dempet-2); }
.spor__tittel { font-weight: 600; }
.spor__artist { font-weight: 400; color: var(--dempet); }
/* «Se tekst» i egen kolonne til høyre, som en liten pille i aksentfargen. */
.spor__lenke { width: 1%; text-align: right; white-space: nowrap; }
.spor .spor__lenke { text-align: center; }
.spor__lenke a { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #E6EEEE; color: #1F4A4D; font-weight: 600; font-size: 12px; line-height: 1.4; text-decoration: none; white-space: nowrap; vertical-align: 1px; }
.spor__lenke a:hover { background: var(--aksent); color: #FFF; }
.spor__tid, .spor th.spor__tid { text-align: right; font-variant-numeric: tabular-nums; }
.spor__cd td { background: #FAF9F6; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--dempet-2); padding: 10px 16px; }

.medvirkende { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 20px; font-size: 15px; }

.anm-rutenett { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.anm { margin: 0; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.anm__topp { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.anm__dato { font-size: 13px; color: var(--dempet-2); }
.anm blockquote { margin: 0; font-family: var(--font-overskrift); font-weight: 600; font-size: 20px; line-height: 1.35; }
.anm figcaption { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; margin-top: auto; }
.anm figcaption span { color: var(--dempet); }
.anm figcaption a { font-weight: 600; color: var(--aksent); }

/* ---------- Sangtekst ---------- */
.sangtekst { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; padding-top: 12px; }
.sangtekst__tekst { flex: 999 1 520px; min-width: 0; max-width: 680px; }
.sangtekst__tittel { font-size: 52px; line-height: 1.05; letter-spacing: -1px; overflow-wrap: anywhere; }
.sangtekst__kreditt { margin: 12px 0 0; font-size: 17px; color: var(--dempet); }
.sangtekst__vers { margin-top: 36px; padding-top: 32px; border-top: 1px solid #DEDAD2; display: flex; flex-direction: column; gap: 30px; font-size: 20px; line-height: 1.75; }
.sangtekst__vers p { margin: 0; white-space: pre-line; }
.sangtekst__side { flex: 0 1 320px; min-width: 260px; display: flex; flex-direction: column; gap: 16px; }
.sangtekst__kort { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.sangtekst__liste { padding: 16px 18px; }
.sangtekst__liste h2 { font-family: var(--font); font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--dempet-2); margin-bottom: 8px; }
.sangtekst__liste ol { margin: 0; padding: 0 0 0 20px; font-size: 15px; line-height: 1.9; }
.sangtekst__liste [aria-current] { font-weight: 600; color: var(--aksent); }
.sangtekst__utg-tittel { font-weight: 600; font-size: 18px; }
.sangtekst__utg-meta { font-size: 14px; color: var(--dempet); }
.liten-dempet { font-size: 13px; color: var(--dempet-2); }

/* ---------- Sidetopp og filtre (Utgivelser, Utgivelsesplan) ---------- */
.sidetopp { padding: 48px 0 24px; }
.sidetopp--med-tall { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; justify-content: space-between; padding-bottom: 28px; }
.sidetopp--med-tall > div:first-child { flex: 1 1 480px; min-width: 0; }
.sidetittel { font-size: 52px; line-height: 1.05; letter-spacing: -1px; }
.ingress { margin: 14px 0 0; font-size: 18px; line-height: 1.6; color: var(--dempet); max-width: 620px; }
.nokkeltall { display: flex; gap: 12px; flex-wrap: wrap; }
.nokkeltall__boks { padding: 14px 18px; min-width: 130px; border-radius: 10px; }
.nokkeltall__tall { font-family: var(--font-overskrift); font-weight: 800; font-size: 28px; }

.filter-etikett { font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--dempet-2); }
.filter-label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 4px 0 12px; }
.segment { display: flex; flex-wrap: wrap; gap: 4px; background: var(--merke); padding: 4px; border-radius: 999px; }
.segment a { min-height: 40px; display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; color: var(--sort); font-weight: 600; font-size: 14px; text-decoration: none; }
.segment a:hover { background: rgba(255,255,255,.6); }
.segment a[aria-current] { background: var(--kort); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.labeltekst { margin: 0 0 16px; max-width: 760px; font-size: 16px; line-height: 1.6; color: var(--dempet); }

.filterlinje { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; padding: 14px 0 8px; border-top: 1px solid #DEDAD2; }
.piller { display: flex; flex-wrap: wrap; gap: 6px; }
.pille { min-height: 44px; display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 999px; border: 1px solid #CFCCC4; background: var(--kort); color: var(--sort); font-weight: 600; font-size: 14px; text-decoration: none; }
.pille:hover { border-color: var(--sort); color: var(--sort); }
.pille[aria-current] { background: var(--sort); border-color: var(--sort); color: #FFF; }
.sokeskjema { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.felt { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--dempet-2); }
/* Søkefelt, nedtrekkslister og knapp får samme høyde i alle nettlesere (Safari overser ellers høyden på select). */
.felt input, .felt select { box-sizing: border-box; height: 44px; margin: 0; padding: 0 12px; border-radius: 8px; border: 1px solid #CFCCC4; background-color: var(--kort); font-family: inherit; font-size: 15px; line-height: normal; color: var(--tekst); }
.felt input { width: 240px; max-width: 100%; -webkit-appearance: none; appearance: none; }
.felt select { min-width: 180px; padding-right: 38px; -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23141414' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
.felt input:focus, .felt select:focus { border-color: var(--aksent); outline: 2px solid color-mix(in srgb, var(--aksent) 30%, transparent); outline-offset: 0; }
.sokeskjema__knapp { box-sizing: border-box; height: 44px; padding: 0 18px; display: inline-flex; align-items: center; }
.aktive-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; }
.aktive-filter .merkelapp { font-size: 13px; }
.aktive-filter .merkelapp a { margin-left: 4px; text-decoration: none; font-weight: 800; }

.artistboks { margin-top: 20px; padding: 20px; display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: flex-start; }
.artistboks__bilde { margin: 0; flex: 0 1 260px; min-width: 200px; }
.artistboks__bilde img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.artistboks__bilde figcaption { margin-top: 6px; }
.artistboks__tekst { flex: 999 1 380px; min-width: 0; }
.artistboks .brodtekst { font-size: 16px; }
.artistboks__presse { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--aksent); }
.argruppe { padding-top: 36px; }
.argruppe__topp { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.h2--stor { font-size: 30px; }
.utg-rutenett--stor { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 28px 20px; }
.utg-kort__tekst { display: flex; flex-direction: column; gap: 2px; }
.utg-kort__artist { font-size: 14px; color: var(--dempet); }
.utg-rutenett--stor .utg-kort__tittel { font-size: 16px; color: var(--sort); }
.utg-rutenett--stor .utg-kort__meta { margin-top: 4px; }
.utg-kort:hover .utg-kort__tittel { text-decoration: underline; }
.vis-flere { display: flex; justify-content: center; padding-top: 40px; }
.tomt { padding: 40px 0; font-size: 17px; color: var(--dempet-2); }

/* Utgivelsesplan */
.plan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.plan__rad { padding: 14px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.plan__dato { width: 84px; flex: 0 0 84px; text-align: center; border-right: 1px solid var(--merke); padding-right: 16px; }
.plan__dag { font-family: var(--font-overskrift); font-weight: 800; font-size: 30px; line-height: 1; }
.plan__ukedag { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--dempet-2); margin-top: 4px; }
.plan__cover { width: 72px; height: 72px; flex: 0 0 72px; }
.plan__cover .cover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.plan__cover--mangler { border-radius: 6px; border: 1.5px dashed #BDB8AE; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; font-weight: 600; color: #6B665D; line-height: 1.2; }
.plan__info { flex: 1 1 260px; min-width: 0; }
.plan__artist { font-size: 14px; }
.plan__tittel { font-weight: 600; font-size: 18px; text-decoration: none; }
.plan__tittel:hover { text-decoration: underline; }
.plan__merker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.merkelapp--singel { background: #E6EEEE; color: #1F4A4D; }
.merkelapp--omriss { background: transparent; border: 1px solid #CFCCC4; padding: 3px 10px; text-decoration: none; }
.plan .merkelapp--aksent { font-size: 12px; }
.plan__katalognr { flex: 0 0 auto; text-align: right; font-size: 13px; color: var(--dempet-2); display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.plan__katalognr strong { font-size: 14px; color: var(--tekst); font-variant-numeric: tabular-nums; }
.plan__katalognr .plan__ikke-satt { color: #9A4A12; }

/* ---------- Forside ---------- */
/* Stort promofelt i full bredde rett under toppmenyen. Bildet beskjæres med «Utsnitt» fra admin. */
.hero { position: relative; overflow: hidden; background: var(--sort); color: #FFF; height: clamp(420px, 64vh, 580px); }
.hero__bakgrunn, .hero__bakgrunn > img, .hero__bakgrunn .promo__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__bakgrunn > img, .hero__bakgrunn .promo__video { object-fit: cover; display: block; }
.hero__bakgrunn .promo__video-ramme { position: absolute; top: 50%; left: 50%; width: max(100%, calc(100% * 16 / 9 * var(--hero-h, 580) / 580)); aspect-ratio: 16 / 9; min-height: 100%; transform: translate(-50%, -50%); }
.hero__bakgrunn .promo__lyd { z-index: 4; }
.hero--med-tekst .hero__bakgrunn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,.78) 0%, rgba(10,10,10,.45) 38%, rgba(10,10,10,0) 68%), linear-gradient(0deg, rgba(10,10,10,.35), rgba(10,10,10,0) 40%); pointer-events: none; }
.hero__hellenke { position: absolute; inset: 0; z-index: 2; }
.hero__indre { position: relative; z-index: 3; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 32px; pointer-events: none; }
.hero__indre a { pointer-events: auto; }
.hero__tekst { max-width: 560px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.hero__over { font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,.85); }
.hero__tittel { font-size: clamp(34px, 5vw, 60px); line-height: 1.02; letter-spacing: -1px; }
.hero__undertittel { margin: 0; font-size: 20px; color: rgba(255,255,255,.9); }
.hero__tekst .knapp { margin-top: 10px; padding: 14px 26px; font-size: 16px; text-shadow: none; }
.hero__cover { position: relative; flex: 0 0 auto; width: clamp(220px, 26vw, 340px); aspect-ratio: 1 / 1; margin-right: 6%; transform: rotate(4deg); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.hero__cover img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; box-shadow: 0 20px 50px rgba(0,0,0,.5); display: block; }
.hero__vinyl { position: absolute; inset: 4%; border-radius: 50%; background: url('../img/plate.svg') center / contain no-repeat; transform: translateX(26%) rotate(30deg); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.hero__cover:hover { transform: rotate(1deg) scale(1.02); }
.hero__cover:hover .hero__vinyl { transform: translateX(38%) rotate(160deg); }
@media (prefers-reduced-motion: reduce) { .hero__cover, .hero__vinyl { transition: none; } }

.forside-intro { padding: 56px 0 40px; }
.forside-intro__tittel { font-size: 52px; line-height: 1.05; letter-spacing: -1px; max-width: 820px; }
.forside-intro .ingress { margin-top: 16px; }
.promo { padding-bottom: 56px; }
.promo__bilde { display: block; border-radius: var(--radius-kort); overflow: hidden; background: #2A1F18; box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 18px 48px rgba(0,0,0,.16); }
.promo__bilde img { width: 100%; height: auto; display: block; }
.promo__bilde--video { position: relative; }
.promo__video { width: 100%; height: auto; display: block; background: #2A1F18; }
.promo__video-ramme { position: relative; aspect-ratio: 16 / 9; }
.promo__video-ramme iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.promo__lyd { position: absolute; right: 14px; bottom: 14px; padding: 8px 14px; border-radius: 999px; border: 0; background: rgba(20,20,20,.72); color: #FFF; font-family: inherit; font-weight: 600; font-size: 13px; cursor: pointer; }
.promo__lyd:hover { background: rgba(20,20,20,.9); }
.promo__linje { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 4px 0; }
.promo__over { font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--dempet-2); }
.promo__tittel { font-weight: 600; font-size: 18px; }
.forside-seksjon { padding: 8px 0 48px; }
.forside-seksjon--siste { padding-bottom: 8px; }
.forside-seksjon .seksjon__topp { margin-bottom: 20px; }
.forside-seksjon .seksjon__topp a { font-size: 15px; }
.forside-seksjon__ingress { margin: 6px 0 20px; font-size: 16px; color: var(--dempet); }
.forside-seksjon__lenke { display: inline-block; margin-top: 16px; font-weight: 600; font-size: 15px; }
.utg-rutenett--forside { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 28px 20px; }
.utg-rutenett--forside .utg-kort { gap: 10px; }
.utg-rutenett--forside .utg-kort__tittel { font-size: 16px; text-decoration: none; }
.utg-kort__lytt { align-self: flex-start; }

.labelkort-rutenett { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.labelkort { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: var(--kort); border: 1px solid var(--kant); border-radius: var(--radius-kort); text-decoration: none; min-height: 140px; }
.labelkort:hover { border-color: var(--sort); }
.labelkort__navn { font-family: var(--font-overskrift); font-weight: 800; font-size: 22px; }
.labelkort__tekst { font-size: 14px; line-height: 1.5; color: var(--dempet); flex-grow: 1; }
.labelkort__lenke { font-size: 14px; font-weight: 600; color: var(--aksent); }
.labelkort--hoved { background: var(--sort); border-color: var(--sort); color: #FFF; }
.labelkort--hoved:hover { color: #FFF; }
.labelkort--hoved .labelkort__tekst { color: #CFCFCF; }
.labelkort--hoved .labelkort__lenke { color: #FFF; }

/* Artiststripe på forsiden: pressebilder med navnet over bildet. */
.artiststripe { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.artistkort { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--merke); text-decoration: none; }
.artistkort img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.artistkort::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.72)); }
.artistkort__navn { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 10px; color: #FFF; font-family: var(--font-overskrift); font-weight: 800; font-size: 17px; line-height: 1.15; }
.artistkort:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .artistkort img { transition: none; } }

/* Mørkt bånd i full bredde (forsiden). */
.band { background: var(--sort); color: #FFF; margin-top: 8px; margin-bottom: 56px; }
.band__indre { padding-top: 48px; padding-bottom: 52px; }
.band .seksjon__topp a { color: #FFF; }
.listekort--mork { background: #1F1F1F; border: 1px solid #2E2E2E; border-radius: 10px; }
.listekort--mork .listekort__meta { color: #BDBDBD; }
.listekort--mork .merkelapp { align-self: flex-start; }

/* Spillelistekort (forside og Spillelister) */
.liste-rutenett { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.liste-rutenett--bred { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.listekort { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; border-radius: 10px; }
.listekort > .merkelapp { align-self: flex-start; }
.listekort--stor { gap: 8px; border-radius: var(--radius-kort); }
.listekort__merker { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.listekort__merker .merkelapp--aksent { font-size: 12px; }
.listekort__lat { font-weight: 600; font-size: 16px; }
.listekort--stor .listekort__lat { font-size: 18px; }
.listekort__meta, .listekort__artist { font-size: 14px; color: var(--dempet-2); }
.listekort__artist { color: var(--dempet); }
.listekort__beskrivelse { margin: 0; font-size: 14px; line-height: 1.5; color: var(--dempet); font-style: italic; }
.listekort__lenke { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--aksent); }

/* ---------- Nyheter ---------- */
.fremhevet { margin-top: 28px; background: var(--sort); color: #FFF; border-radius: 14px; padding: 32px; display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; }
.fremhevet__tekst { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.fremhevet__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: #BDBDBD; }
.merkelapp--mork { background: #2E2E2E; color: #FFF; font-size: 13px; }
.fremhevet__tittel { font-size: 36px; line-height: 1.1; }
.fremhevet__ingress { margin: 0; font-size: 18px; line-height: 1.6; color: #E0E0E0; }
.fremhevet__knapper { margin-top: 6px; }
.fremhevet__knapper .knapp { flex: 0 0 auto; }
.knapp--lys-omriss { background: transparent; border-color: #6A6A6A; color: #FFF; }
.knapp--lys-omriss:hover { border-color: #FFF; filter: none; }
.fremhevet__terning { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 16px; font-size: 13px; color: #BDBDBD; }
.fremhevet__terning-tall { font-family: var(--font-overskrift); font-weight: 800; font-size: 72px; line-height: 1; color: #FFF; }
.argruppe > .argruppe__topp.h2--stor { margin-bottom: 16px; }
.nyhet-rutenett { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.nyhetskort { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.nyhetskort__topp { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.nyhetskort__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--dempet-2); }
.nyhetskort__topp .merkelapp--aksent { font-size: 13px; }
.nyhetskort__tittel { font-family: var(--font); font-weight: 600; font-size: 19px; line-height: 1.3; }
.nyhetskort__tittel a { text-decoration: none; }
.nyhetskort__tittel a:hover { text-decoration: underline; }
.nyhetskort__tekst { margin: 0; font-size: 15px; line-height: 1.6; color: var(--dempet); }
.nyhetskort__bunn { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 14px; padding-top: 6px; color: var(--dempet-2); }
.nyhetskort__bunn a { font-weight: 600; color: var(--aksent); }

.nyhet__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; font-size: 14px; color: var(--dempet-2); }
.nyhet__meta a.merkelapp { text-decoration: none; }
.nyhet__tittel { font-size: 44px; line-height: 1.08; letter-spacing: -.5px; overflow-wrap: anywhere; }
.nyhet__ingress { margin: 16px 0 0; font-size: 20px; line-height: 1.55; color: var(--tekst-2); }
.nyhet__bilde { margin: 28px 0 0; }
.nyhet__bilde img { border-radius: 8px; display: block; }
.nyhet__tekst { margin-top: 28px; }
.pressemelding { padding-top: 12px; margin-bottom: 24px; }

/* ---------- For pressen ---------- */
.presse-topp { display: flex; flex-wrap: wrap; gap: 28px; align-items: stretch; justify-content: space-between; padding-bottom: 28px; }
.presse-topp > div:first-child { flex: 1 1 480px; min-width: 0; }
.pressekontakt { flex: 0 1 340px; min-width: 260px; background: var(--sort); color: #FFF; border-radius: var(--radius-kort); padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
.pressekontakt a { color: #FFF; }
.pressekontakt__etikett { font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #BDBDBD; }
.pressekontakt__navn { font-family: var(--font-overskrift); font-weight: 800; font-size: 22px; }
.pressekontakt p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #CFCFCF; }
.filterlinje--bunnkant { border-bottom: 1px solid #DEDAD2; padding-bottom: 14px; }
.presse-seksjon { padding-top: 48px; scroll-margin-top: 16px; }
.pressebilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px 20px; }
.pressebilde { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pressebilde__bilde { aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: var(--merke); }
.pressebilde__bilde img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pressebilde figcaption { display: flex; flex-direction: column; gap: 2px; }
.pressebilde__artist { font-weight: 600; font-size: 16px; }
.pressebilde .knapp { align-self: flex-start; }
.presse-cover { margin: 0; }
.presse-cover__last-ned { font-size: 13px; font-weight: 600; color: var(--aksent); }
.presse-cover__px { font-weight: 400; color: var(--dempet-2); }
.meldinger { list-style: none; margin: 0; padding: 0; }
.meldinger__rad { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 16px 20px; }
.meldinger__rad + .meldinger__rad { border-top: 1px solid var(--merke); }
.meldinger__dato { flex: 0 0 90px; font-size: 14px; color: var(--dempet-2); font-variant-numeric: tabular-nums; }
.meldinger__tekst { flex: 1 1 320px; min-width: 0; }
.meldinger__artist { display: block; font-size: 14px; color: var(--dempet); }
.meldinger__tittel { display: block; font-weight: 600; font-size: 16px; text-decoration: none; }
.meldinger__tittel:hover { text-decoration: underline; }
.meldinger__les { font-size: 14px; font-weight: 600; color: var(--aksent); }
.logoer { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.logokort { overflow: hidden; }
.logo-flate { padding: 40px 32px; display: flex; justify-content: center; border-bottom: 1px solid var(--merke); }
.logo-flate img { height: 44px; width: auto; display: block; }
.logo-flate--mork { background: var(--sort); }
.logokort__bunn { padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 600; }
.logokort__bunn a { font-size: 14px; color: var(--aksent); }

/* ---------- Menyknapp (mobil og nettbrett) ---------- */
.meny-knapp { display: none; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #6A6A6A; background: transparent; color: #FFF; font-family: inherit; font-weight: 600; font-size: 15px; cursor: pointer; }
.meny-knapp__strek, .meny-knapp__strek::before, .meny-knapp__strek::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s; }
.meny-knapp__strek { position: relative; }
.meny-knapp__strek::before, .meny-knapp__strek::after { content: ''; position: absolute; left: 0; }
.meny-knapp__strek::before { top: -6px; }
.meny-knapp__strek::after { top: 6px; }
.topp--apen .meny-knapp__strek { background: transparent; }
.topp--apen .meny-knapp__strek::before { transform: translateY(6px) rotate(45deg); }
.topp--apen .meny-knapp__strek::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 860px) {
  .js .meny-knapp { display: inline-flex; }
  /* Menyen legger seg over innholdet i stedet for å skyve siden ned. */
  .topp { position: relative; z-index: 150; }
  .js .meny { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 2px; padding: 8px 16px 20px; background: var(--sort); border-top: 1px solid #2A2A2A; box-shadow: 0 18px 30px rgba(0,0,0,.35); max-height: calc(100vh - 90px); overflow-y: auto; }
  .js .topp--apen .meny { display: flex; }
  .js .meny a { padding: 12px 16px; font-size: 17px; border-radius: 10px; }
  .js .meny a[aria-current="page"] { background: rgba(255,255,255,.08); }
  .js .meny a[aria-current="page"]::after { left: 0; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; }
  .js .meny a.meny__butikk { align-self: flex-start; margin-top: 8px; }
}

/* ---------- Spotify-spiller (lastes først ved klikk) ---------- */
.spotify-spiller { display: flex; flex-direction: column; gap: 6px; }
.spotify-spiller__knapp { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 680px; padding: 14px 18px; border-radius: var(--radius-kort); border: 1px solid var(--kant); background: var(--kort); color: var(--tekst); font-family: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.spotify-spiller__knapp:hover { border-color: var(--aksent); }
.spotify-spiller__knapp strong { display: block; font-size: 16px; }
.spotify-spiller__ikon { flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--aksent); color: #FFF; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; padding-left: 3px; }
.spotify-spiller__info { color: var(--dempet); font-size: 14px; }
.spotify-spiller__merk { margin: 0; font-size: 12px; color: var(--dempet-2); }
.spotify-spiller--lastet iframe { width: 100%; max-width: 680px; border: 0; border-radius: 12px; display: block; }

/* ---------- Terningkast som terning ---------- */
.terning { display: inline-block; flex: none; vertical-align: middle; }
.terning rect { fill: var(--aksent); }
.terning circle { fill: #FFF; }
.terning--stor rect { fill: #FFF; }
.terning--stor circle { fill: var(--sort); }
.fremhevet__terning { gap: 10px; }

/* ---------- «Ny» og nedtelling ---------- */
/* «Ny»: rødt klistremerke på skrå over hjørnet av coveret, samme rødfarge som etiketten på vinylplata. */
.ny-merke { position: absolute; z-index: 3; top: -14px; right: -12px; width: 66px; height: 66px; transform: rotate(14deg); filter: drop-shadow(0 3px 5px rgba(0,0,0,.3)); transition: transform .45s cubic-bezier(.2,.7,.2,1), top .45s cubic-bezier(.2,.7,.2,1), right .45s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.ny-merke svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ny-merke polygon { fill: #C62F27; }
.ny-merke text { fill: #FFF; font-family: var(--font-overskrift); font-weight: 800; font-size: 25px; letter-spacing: .5px; }
.ny-merke .ny-merke__liten { font-family: var(--font); font-weight: 700; font-size: 9px; letter-spacing: 1.4px; }
/* Ved hover krymper coveret til 76 % mot venstre (midtstilt i høyden). Merket følger hjørnet og blir litt mindre. */
.utg-kort:hover .ny-merke, .utg-kort:focus-within .ny-merke { top: calc(12% - 12px); right: calc(24% - 10px); transform: rotate(-8deg) scale(.82); }
@media (prefers-reduced-motion: reduce) { .ny-merke { transition: none; } }
@media (hover: none) { .utg-kort:hover .ny-merke { top: -14px; right: -12px; transform: rotate(14deg); } }
/* Nedtellingen står under ukedagen, så coverne står på linje. */
.nedtelling { display: inline-block; margin-top: 8px; padding: 3px 8px; border-radius: 999px; background: var(--merke); color: var(--tekst-2); font-size: 11px; font-weight: 700; white-space: nowrap; }
.nedtelling--i-dag { background: var(--aksent); color: #FFF; }

/* ---------- Årstall og måneder som følger med ---------- */
.argruppe__topp { position: sticky; top: 0; z-index: 3; background: var(--bakgrunn); padding: 12px 0 10px; margin-bottom: 6px; box-shadow: 0 1px 0 var(--kant); }
.argruppe { padding-top: 24px; }

/* ---------- Labellogoer ---------- */
.labelkort__logo { display: flex; align-items: center; height: 60px; margin-bottom: 4px; }
.labelkort__logo img { max-height: 60px; max-width: 100%; width: auto; height: auto; }
.labelinfo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 4px 0 16px; }
.labelinfo .labeltekst { margin: 0; flex: 1 1 420px; }
.labelinfo__logo img { max-height: 36px; width: auto; height: auto; display: block; }

/* ---------- Bunntekst: følg oss og labeler ---------- */
.bunn__etikett { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #8A8A8A; margin-bottom: 2px; }
.bunn__labeler { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-top: 22px; padding-bottom: 28px; border-top: 1px solid #2A2A2A; }
.bunn .bunn__logoer { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 34px; flex: 1 1 auto; }
.bunn__logoer a { display: inline-flex; opacity: .75; transition: opacity .2s; }
.bunn__logoer a:hover { opacity: 1; }
.bunn__logoer img { height: 30px; width: auto; display: block; }
.bunn__kopi { font-size: 13px; color: #8A8A8A; }

/* ---------- Beste sitat under tittelen på utgivelsen ---------- */
.toppsitat { display: inline-flex; align-items: center; gap: 14px; margin-top: 16px; padding: 12px 18px 12px 12px; border-radius: var(--radius-kort); background: var(--kort); border: 1px solid var(--kant); text-decoration: none; color: var(--tekst); max-width: 640px; }
.toppsitat:hover { border-color: var(--aksent); color: var(--tekst); }
.toppsitat__tekst { display: flex; flex-direction: column; gap: 2px; }
.toppsitat__sitat { font-family: var(--font-overskrift); font-weight: 600; font-size: 18px; line-height: 1.35; }
.toppsitat__kilde { font-size: 13px; color: var(--dempet-2); }

/* ---------- Nedtelling i promofeltet ---------- */
.hero__dato { margin: 0; display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); font-size: 14px; font-weight: 600; text-shadow: none; }

/* ---------- «Kommer snart» i Utgivelser ---------- */
.kommer { margin: 20px 0 8px; padding: 18px 20px; border-radius: var(--radius-kort); background: var(--sort); color: #FFF; }
.kommer__topp { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.kommer__tittel { font-size: 20px; }
.kommer__topp a { color: #FFF; font-size: 14px; font-weight: 600; }
.kommer__rad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kommer__kort { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; background: #1F1F1F; color: #FFF; text-decoration: none; }
.kommer__kort:hover { background: #2A2A2A; color: #FFF; }
.kommer__cover { flex: 0 0 64px; width: 64px; }
.kommer__cover .cover { box-shadow: none; }
.kommer__info { display: flex; flex-direction: column; min-width: 0; }
.kommer__dato { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #9FD3D6; }
.kommer__navn { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kommer .liten-dempet { color: #BDBDBD; }

/* ---------- Artisttopp når Utgivelser er filtrert på artist ---------- */
.artisttopp { position: relative; margin-top: 20px; height: 340px; border-radius: var(--radius-kort); overflow: hidden; background: var(--sort); color: #FFF; }
.artisttopp__bilde { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.artisttopp::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,10,.8), rgba(10,10,10,0) 60%); }
.artisttopp__tekst { position: absolute; z-index: 1; left: 28px; right: 28px; bottom: 24px; display: flex; flex-direction: column; gap: 6px; }
.artisttopp__navn { font-size: clamp(32px, 5vw, 56px); line-height: 1; letter-spacing: -1px; }
.artisttopp__meta { font-size: 15px; color: rgba(255,255,255,.9); }
.artisttopp__meta a { color: #FFF; font-weight: 600; }
.artisttopp__foto { position: absolute; z-index: 1; right: 14px; top: 12px; font-size: 11px; color: rgba(255,255,255,.75); }
.artistbio { margin-top: 18px; max-width: 760px; font-size: 16px; }

/* ---------- Vanlige sider, Kontakt og 404 ---------- */
.side { max-width: 720px; padding-top: 12px; }
.side .sidetittel { margin-bottom: 24px; }
.side__tekst h2 { font-size: 26px; margin: 32px 0 12px; }
.side__tekst h3 { font-size: 20px; margin: 24px 0 8px; }
.side__tekst ul, .side__tekst ol { padding-left: 22px; margin: 0 0 14px; }
.side__tekst img { border-radius: 8px; }
.ikke-funnet { padding-top: 56px; }
.ikke-funnet__sok { margin-top: 28px; }
.ikke-funnet__lenker { margin-top: 28px; max-width: 560px; }

.kontakt-topp { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; justify-content: space-between; padding-top: 12px; }
.kontakt-topp > div:first-child { flex: 1 1 420px; min-width: 0; }
.kontakt-firma { padding: 18px 22px; font-size: 16px; line-height: 1.6; }
.kontakt-firma p { margin: 0; }
.kontakt-firma p + p { margin-top: 10px; }
.kontaktpersoner { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.kontaktperson { padding: 16px 18px; display: flex; gap: 16px; align-items: center; }
.kontaktperson__bilde { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: 0 0 72px; }
.kontaktperson__navn { font-family: var(--font-overskrift); font-weight: 800; font-size: 20px; }
.kontaktperson__lenker { display: flex; flex-direction: column; margin-top: 6px; font-size: 15px; }
.kontakt-skjema { max-width: 720px; margin-top: 48px; }
.kontaktskjema { display: flex; flex-direction: column; gap: 14px; }
.kontaktskjema__rad { display: flex; flex-wrap: wrap; gap: 14px; }
.kontaktskjema__rad .felt { flex: 1 1 240px; }
.kontaktskjema .felt { font-size: 13px; }
.kontaktskjema .felt input { width: 100%; }
.kontaktskjema textarea { min-height: 44px; padding: 10px 12px; border-radius: 8px; border: 1px solid #CFCCC4; background: var(--kort); font-family: inherit; font-size: 15px; color: var(--tekst); resize: vertical; }
.kontaktskjema .knapp { align-self: flex-start; }
.kontaktskjema__honning { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kontaktskjema__melding { margin: 0; padding: 12px 16px; border-radius: 8px; font-weight: 600; }
.kontaktskjema__melding--ok { background: #E6EEEE; color: #1F4A4D; }
.kontaktskjema__melding--feil { background: #F6E3DD; color: #8A2E12; }

/* ---------- Reservemal ---------- */
.side-innhold { max-width: 720px; padding-top: 40px; }
.side-innhold h1 { font-size: 44px; margin-bottom: 20px; }

/* ---------- Mobil ---------- */
@media (max-width: 960px) and (min-width: 641px) {
  .artiststripe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  :root { --kant-x: 16px; }
  .topp__logo img { height: 32px; }
  .meny a { padding: 8px 11px; font-size: 14px; }
  .utgivelse__tittel, .sangtekst__tittel, .sidetittel, .forside-intro__tittel { font-size: 40px; }
  .forside-intro { padding-top: 36px; }
  .kommer__rad { grid-template-columns: 1fr; }
  .artisttopp { height: 280px; }
  .artisttopp__tekst { left: 18px; right: 18px; bottom: 18px; }
  /* Mobil: coveret oppe til høyre, teksten nederst over en mørk toning. */
  .hero { height: 540px; }
  .hero__indre { flex-direction: column; justify-content: space-between; align-items: stretch; gap: 16px; padding-top: 24px; padding-bottom: 28px; }
  .hero--med-tekst .hero__bakgrunn::after { background: linear-gradient(0deg, rgba(10,10,10,.85) 0%, rgba(10,10,10,.45) 42%, rgba(10,10,10,0) 70%); }
  .hero__cover { order: -1; align-self: flex-end; width: 128px; margin: 0 22px 0 0; }
  .hero__tekst { gap: 8px; }
  .hero__undertittel { font-size: 17px; }
  .artiststripe { grid-template-columns: repeat(6, 42%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .artistkort { scroll-snap-align: start; }
  .nyhet__tittel { font-size: 34px; }
  .fremhevet { padding: 24px 20px; }
  .fremhevet__tittel { font-size: 28px; }
  .nyhet-rutenett { grid-template-columns: 1fr; }
  .pressebilder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .utg-rutenett--forside { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .utg-rutenett--stor { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .felt, .felt input, .sokeskjema { width: 100%; }
  .plan__katalognr { flex-basis: 100%; flex-direction: row; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--merke); padding-top: 10px; }
  .sangtekst__vers { font-size: 18px; }
}

.artistsnarvei { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.artistsnarvei .pille { background: var(--kort); color: var(--aksent); border-color: #CFCCC4; font-size: 14px; padding: 7px 14px; min-height: 0; }
.artistsnarvei .pille:hover { background: var(--aksent); border-color: var(--aksent); color: #FFF; }
.utgivelse__artist a:hover { text-decoration: underline; }
/* Utgivelser: én rolig rad med format til venstre, søk og sortering til høyre. */
.skjult-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sokerad { display: flex; gap: 10px; align-items: center; }
.sokefelt { position: relative; display: block; }
.sokefelt input, .sorterfelt select { box-sizing: border-box; height: 44px; margin: 0; border-radius: 999px; border: 1px solid #CFCCC4; background-color: var(--kort);
  font-family: inherit; font-size: 15px; color: var(--tekst); -webkit-appearance: none; appearance: none; }
.sokefelt input { width: 300px; padding: 0 46px 0 18px; }
.sokefelt__knapp { position: absolute; right: 4px; top: 4px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--dempet-2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.sokefelt__knapp:hover { background: var(--aksent); color: #FFF; }
.sorterfelt select { padding: 0 38px 0 16px; cursor: pointer; background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23141414' stroke-width='1.8'/%3E%3C/svg%3E"); }
.sokefelt input:focus, .sorterfelt select:focus { border-color: var(--aksent); outline: 2px solid color-mix(in srgb, var(--aksent) 30%, transparent); outline-offset: 0; }
.filterlinje:has(.sokerad) { align-items: center; padding: 16px 0 6px; }
@media (max-width: 760px) { .sokerad { width: 100%; } .sokefelt { flex: 1; } .sokefelt input { width: 100%; } }

/* 404: søk. */
.ikke-funnet__sok { margin: 20px 0 8px; }
.ikke-funnet__sok .sokefelt input { width: 420px; max-width: 100%; }

/* Kort løfter seg litt ved hover. Av for dem som har valgt redusert bevegelse. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .nyhetskort, .listekort, .labelkort, .anm, .plan__rad, .kommer__kort {
    transition: transform .2s ease, box-shadow .2s ease; }
  .nyhetskort:hover, .listekort:hover, .labelkort:hover, .anm:hover, .plan__rad:hover, .kommer__kort:hover {
    transform: translateY(-3px); box-shadow: 0 10px 24px -12px rgba(20, 20, 20, .28); }
}

/* Pressepakke på pressemeldingen: alt radio og presse trenger på ett sted. */
.pressepakke { margin: 32px 0 24px; padding: 22px; }
.pressepakke .h2 { margin: 0 0 14px; }
.pressepakke__topp { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.pressepakke__cover { flex: 0 0 96px; }
.pressepakke__cover .cover { width: 96px; }
.pressepakke__tittel { margin: 0 0 6px; font-weight: 600; font-size: 17px; }
.pressepakke__fakta { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; font-size: 14px; }
.pressepakke__fakta div { display: flex; gap: 8px; }
.pressepakke__fakta dt { color: var(--dempet-2); min-width: 74px; }
.pressepakke__fakta dd { margin: 0; font-weight: 600; }
.pressepakke__under { margin: 22px 0 10px; font-size: 16px; }
.pressepakke__bilder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pressepakke__bilder figure { margin: 0; }
.pressepakke__bilder img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
.pressepakke__bilder figcaption { font-size: 12px; color: var(--dempet-2); margin-top: 4px; }
@media (max-width: 640px) { .pressepakke__bilder { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pressepakke__fakta { grid-template-columns: 1fr; } .pressepakke { padding: 16px; } }

/* Internt varsel, bare for innloggede. */
.internt-varsel { margin: 0 0 18px; padding: 10px 14px; border-radius: 8px; background: #FFF6DB; border: 1px solid #EBD38A; font-size: 14px; }

/* Utskrift av utgivelsesplanen: ren liste uten meny, cover og knapper. */
.bare-utskrift { display: none; }
.skriv-ut { margin: 28px 0 0; text-align: center; }
@media print {
  @page { margin: 14mm 12mm; }
  html, body { background: #FFF !important; color: #000; font-size: 10pt; }
  #wpadminbar, .topp, .bunn, .piller, .filter-label, .labelinfo, .filterlinje, .nokkeltall, .ingress, .overtittel,
  .plan__cover, .plan__merker .merkelapp--omriss, .nedtelling, .skriv-ut, .hopp-til-innhold { display: none !important; }
  html { margin-top: 0 !important; }
  .bare-utskrift { display: block; }
  .utskrift-topp { margin: 0 0 4mm; font-size: 9pt; color: #444; }
  .sidetopp { padding: 0 !important; margin: 0 0 2mm !important; display: block !important; border: 0 !important; }
  .sidetittel { font-size: 20pt !important; margin: 0 !important; }
  .argruppe { margin: 5mm 0 0 !important; }
  .argruppe__topp { position: static !important; background: none !important; padding: 0 0 1mm !important; border-bottom: 1.5pt solid #000 !important; box-shadow: none !important; }
  .argruppe__topp .h2--stor { font-size: 13pt !important; }
  .plan { gap: 0 !important; }
  .plan__rad { display: grid !important; grid-template-columns: 22mm 1fr auto; gap: 4mm; align-items: baseline; padding: 1.6mm 0 !important;
    border: 0 !important; border-bottom: 0.5pt solid #BBB !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; break-inside: avoid; }
  .plan__dato { display: flex !important; gap: 2mm; align-items: baseline; border: 0 !important; padding: 0 !important; width: auto !important; }
  .plan__dag { font-size: 10pt !important; font-weight: 700; }
  .plan__dag::after { content: '.'; }
  .plan__ukedag { font-size: 8pt !important; }
  .plan__info { display: flex !important; flex-wrap: wrap; gap: 0 3mm; align-items: baseline; }
  .plan__artist { font-size: 10pt !important; color: #000 !important; order: 0; }
  .plan__artist::after { content: ' –'; }
  .plan__tittel { font-size: 10pt !important; font-weight: 700; color: #000 !important; text-decoration: none; }
  .plan__merker { display: inline-flex !important; gap: 2mm; margin: 0 !important; }
  .plan__merker .merkelapp { background: none !important; border: 0 !important; padding: 0 !important; font-size: 8pt !important; color: #555 !important; }
  .plan__katalognr { border: 0 !important; padding: 0 !important; margin: 0 !important; display: block !important; text-align: right; }
  .plan__katalognr span { display: none; }
  .plan__katalognr strong { font-size: 9pt; font-family: inherit; }
  .plan__ikke-satt { color: #000 !important; background: none !important; border: 1pt solid #000 !important; padding: 0 1.5mm !important; }
  a { color: inherit !important; }
}

/* ---------- Varselstripe, søk og rullegardin i toppen ---------- */
.varsel { background: var(--aksent); color: #FFF; font-size: 14px; }
.varsel[hidden] { display: none; }
.varsel__indre { position: relative; display: flex; align-items: center; justify-content: center; padding-top: 9px; padding-bottom: 9px; }
.varsel__lenke { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; padding: 0 36px; color: #FFF; text-decoration: none; }
.varsel__lenke:hover { color: #FFF; }
.varsel__handling { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.varsel__lukk { position: absolute; right: var(--kant-x); top: 50%; transform: translateY(-50%); padding: 2px 8px; border: 0; background: none; color: #FFF; font-size: 22px; line-height: 1; opacity: .8; cursor: pointer; }
.varsel__lukk:hover { opacity: 1; }

.topp__indre { position: relative; }
.meny__punkt { position: relative; display: flex; }
.rull { display: none; position: absolute; left: -14px; top: calc(100% + 8px); z-index: 30; width: 440px; padding: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px;
  background: #FFF; color: var(--tekst); border: 1px solid var(--kant, #E4E1DA); border-radius: 12px; box-shadow: 0 18px 40px -18px rgba(20, 20, 20, .5); }
.rull::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
@media (min-width: 861px) { .meny__punkt:hover .rull, .meny__punkt:focus-within .rull { display: grid; } }
.rull__over { display: block; margin: 0 0 4px 10px; font-size: 12px; color: var(--dempet-2); }
.meny .rull a { display: block; padding: 9px 10px; border-radius: 8px; color: var(--tekst); font-size: 14px; font-weight: 500; }
.meny .rull a:hover { background: #F6F5F2; color: var(--tekst); }
.meny .rull a.rull__alle { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--kant, #E4E1DA); border-radius: 0; color: var(--aksent); font-weight: 600; }
.meny .rull a.rull__nyeste { display: flex; flex-direction: column; gap: 2px; padding: 12px; background: #F6F5F2; border-radius: 10px; }
.meny .rull a.rull__nyeste:hover { background: #EFEDE7; }
.rull__nyeste .cover { width: 100%; margin: 4px 0 8px; border-radius: 6px; }
.rull__tag { font-size: 12px; font-weight: 600; color: var(--aksent); }
.rull__tittel { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 16px; line-height: 1.25; }
.rull__artist { font-size: 13px; color: var(--dempet-2); }

.topp-sok { display: flex; align-items: center; }
.topp-sok__apne { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .82); cursor: pointer; }
.topp-sok__apne:hover { background: rgba(255, 255, 255, .1); color: #FFF; }
.js .topp-sok__apne { display: inline-flex; }
.meny { position: relative; }
.js .topp-sok__boks { display: none; position: absolute; left: 0; right: 0; top: 50%; z-index: 40; transform: translateY(-50%); } /* dekker bare menyen, aldri logoen */
.js .topp--sok .topp-sok__boks { display: block; }
.topp--sok .meny > a, .topp--sok .meny__punkt { visibility: hidden; }
.topp-sok__felt { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 8px 0 16px; border-radius: 999px; background: #2A2A2A; color: #FFF; }
.topp-sok__felt input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #FFF; font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none; }
.topp-sok__felt input::placeholder { color: rgba(255, 255, 255, .55); }
.topp-sok__felt input::-webkit-search-cancel-button { display: none; }
.topp-sok__lukk { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #FFF; font-size: 22px; line-height: 1; cursor: pointer; }
.topp-sok__lukk:hover { background: rgba(255, 255, 255, .12); }
.topp-sok__res { position: absolute; left: 0; right: 0; top: calc(100% + 8px); max-height: 70vh; overflow: auto; padding: 8px; background: #FFF; color: var(--tekst);
  border: 1px solid var(--kant, #E4E1DA); border-radius: 12px; box-shadow: 0 18px 40px -18px rgba(20, 20, 20, .5); }
.topp-sok__res[hidden] { display: none; }
.topp-sok__over { display: block; padding: 6px 10px 4px; font-size: 12px; color: var(--dempet-2); }
.topp-sok .topp-sok__rad { display: block; padding: 6px 10px; border-radius: 8px; color: var(--tekst); font-weight: 400; font-size: 15px; }
.topp-sok .topp-sok__rad:hover, .topp-sok .topp-sok__rad.er-valgt { background: #F6F5F2; color: var(--tekst); }
.topp-sok__innhold { display: flex; align-items: center; gap: 12px; }
.topp-sok__bilde { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 4px; background: #E4E1DA; object-fit: cover; }
.topp-sok__bilde--rund { display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 600; color: var(--dempet); }
.topp-sok__tekst { display: flex; flex-direction: column; min-width: 0; }
.topp-sok__tittel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.topp-sok__under { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--dempet-2); }
.topp-sok .topp-sok__alle { display: block; margin-top: 6px; padding: 12px 10px 8px; border-top: 1px solid var(--kant, #E4E1DA); border-radius: 0; color: var(--aksent); font-weight: 600; font-size: 14px; }
.topp-sok .topp-sok__alle:hover, .topp-sok .topp-sok__alle.er-valgt { background: transparent; color: var(--aksent); text-decoration: underline; }
.topp-sok__ingen { display: block; padding: 12px 10px; color: var(--dempet-2); }
@media (max-width: 860px) {
  .meny__punkt, .meny__punkt > a { display: block; }
  .rull { display: none !important; }
  .topp-sok { display: block; order: -1; width: 100%; padding: 4px 0 10px; }
  .js .topp-sok__apne, .js .topp-sok__lukk { display: none; }
  .js .topp-sok__boks { display: block; position: static; transform: none; }
  .topp--sok .meny > a, .topp--sok .meny__punkt { visibility: visible; }
  .topp-sok__res { position: static; margin-top: 8px; }
}

/* Kanallogo på spillelistekort */
.kanal-logo-boks { display: inline-flex; align-items: center; }
.kanal-logo { display: block; width: 78px; height: auto; }
.kanal-logo-boks--pille { padding: 4px 10px; border-radius: 999px; background: #FFF; }
.kanal-logo-boks--pille .kanal-logo { width: 64px; }

/* Delingsknapp på utgivelsessiden */
.del-knapp { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; padding: 10px 16px; border: 1px solid var(--kant); border-radius: 999px; background: #FFF; color: var(--sort); font-size: 14px; font-weight: 600; text-decoration: none; }
.del-knapp:hover { border-color: #1877F2; color: #1877F2; }

/* Samtykke (Facebook-piksel) */
.samtykke { position: fixed; left: 16px; bottom: 16px; z-index: 200; max-width: 380px; padding: 18px 20px; border-radius: 16px; background: #FFF; border: 1px solid var(--kant); box-shadow: 0 8px 30px rgba(0,0,0,.18); font-size: 14px; line-height: 1.5; }
.samtykke[hidden] { display: none; }
.samtykke__tittel { margin: 0 0 4px; font-weight: 700; }
.samtykke__tekst { margin: 0 0 12px; color: #444; }
.samtykke__knapper { display: flex; flex-wrap: wrap; gap: 8px; }
.samtykke-endre { margin-left: auto; padding: 0; border: 0; background: none; color: #8A8A8A; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.samtykke-endre:hover { color: #FFF; }
@media (max-width: 520px) { .samtykke { left: 8px; right: 8px; bottom: 8px; max-width: none; } }

/* Filterknapper som brytes over flere rader: ikke full pille rundt alt (mobil) */
@media (max-width: 640px) {
  .segment { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: 1fr 1fr; border-radius: 22px; gap: 2px; }
  .segment a { justify-content: center; text-align: center; padding: 8px 10px; font-size: 14px; }
}