/* ================================================================
   AARSSIDENE: KALENDEREN UTEN BOKSER (resept 21.10.2026)
   Lastes av templates/annual-shell.html etter malens egen stilblokk. Her
   ligger de nye delene: rutenettet uten hull, raden paa mobil, turneraden
   med billettstubbene, tekstraden og den dokkede maanedsstripa.
   Grepet er det samme overalt: innholdet staar rett paa flaten, skilt med
   typografi, luft og haarstrek. Ingen pille (bare filterknappene), ingen
   versaletikett utenom Anton, ingen skygge, ingen sidestripe, og kant bare
   som 1 px haarstrek (2 px over en turné). Gult bare paa det kjoepbare.
   ================================================================ */

/* Aksentblekket paa lyst flate er ink, ikke oker (samlet loesning 21.10.2026):
   oker-gul tekst paa hvitt er lesbar paa papiret men leses som et svakt blekk
   paa skjerm. Gult staar bare som understrek, flate eller soeyle. Paa moerk
   flate er aksenten fortsatt amber. Plakaten setter sitt eget par og er
   uberoert. */
.aarbok { --accent-ink: var(--text); }
[data-theme="dark"] .aarbok { --accent-ink: var(--accent); }

/* ---- KORTET ---------------------------------------------------------
   Fotoet med 4 px radius og ingenting oppaa, teksten rett paa sidebunnen.
   Grunnkomponentens skall (radius, kant, flate, skygge, loeft) nulles her,
   scopet til aarboka, saa de andre sidene som bruker .concert-card staar
   uroert. */
.aarbok .concert-annual-grid .concert-card {
  position: relative;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  background: none;
  color: var(--text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.aarbok .concert-annual-grid .concert-card-img,
.aarbok .concert-annual-grid .concert-card-img-wrap {
  border-radius: 4px;
  overflow: hidden;
}
.aarbok .concert-annual-grid .concert-card-img-wrap img { object-position: center 28%; }
.aarbok .concert-annual-grid .concert-card-info {
  padding: 12px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.aarbok .concert-annual-grid .concert-card-date {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-muted);
}
.aarbok .concert-annual-grid .concert-card-artist {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: var(--text);
  text-wrap: balance;
}
.aarbok .concert-annual-grid .concert-card-sted {
  margin: 4px 0 0;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-muted);
  text-wrap: pretty;
}
/* Scenen staar i sin egen span inne i stedlinja (dublettvakten leser den);
   den arver linja og er ikke en egen etikett. */
.aarbok .concert-annual-grid .concert-card-venue { font: inherit; color: inherit; }
.aarbok .concert-annual-grid .concert-card-meta {
  display: block;
  margin: 6px 0 0;
}
/* Raden er en <div>: en lenke inne i en lenke er ugyldig, og raden har to
   handlinger. Hovedlenka (.aar-hoved, artistnavnet) strekkes over hele raden
   med ::after, saa hele flaten er et trykk til konsertsiden, og billettlenka
   ligger over den (z-index 2). Fokusringen tegnes rundt hele raden. */
.aarbok .aar-hoved {
  color: inherit;
  text-decoration: none;
}
.aarbok .aar-hoved::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.aarbok .aar-hoved:focus-visible { outline: none; }
.aarbok .aar-hoved:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .aarbok .aar-hoved:hover {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
}

/* ---- BILLETTSLOTEN ----------------------------------------------------
   «Billetter →» som tekstlenke, eller «Utsolgt» som dempet tekst. Lenka har en
   trykkflate paa minst 44 px, men tar bare linjehoeyde i layouten (negativ
   marg tar den ekstra hoeyden tilbake), saa raden ikke vokser. Ingen ramme,
   ingen flate, ingen understrek: pila er det som sier at det er en lenke, og
   den bærer aksenten (aldri gul tekst paa hvitt: --accent-ink er moerk
   oker i lyst tema). */
.aarbok .aar-billett {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  flex: none;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--text);
  text-decoration: none;
}
.aarbok a.aar-billett {
  min-height: 44px;
  min-width: 44px;
  padding-inline: 8px;
  margin-inline: -8px;
  margin-block: -14px;
  -webkit-tap-highlight-color: transparent;
}
/* Lenka og pila har samme farge i begge temaer: sidens lenkefarge. */
.aarbok a.aar-billett > span { color: inherit; }
.aarbok a.aar-billett:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-radius: 4px; }
.aarbok .aar-billett--utsolgt {
  z-index: auto;
  font-weight: 600;
  color: var(--text-muted);
}
@media (hover: hover) and (pointer: fine) {
  .aarbok a.aar-billett:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
}
.aarbok .aar-korttopp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 12px;
  margin: 0 0 4px;
}
.aarbok .aar-korttopp { min-height: 1.35rem; }
.aarbok .aar-korttopp .concert-card-date { margin: 0; }
.aarbok .aar-korttopp .aar-billett { line-height: 1; }
.aarbok .aar-korttopp .aar-billett { margin-inline-start: auto; }
.aarbok .aar-handling {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 18px;
  margin: 6px 0 0;
}
.aarbok .aar-handling .annual-turne-hale { margin: 0; }

/* ---- STATUS SOM TEKST -------------------------------------------------
   Hoeyst én per kveld, og bare naar den endrer beslutningen. Utsolgt er ren,
   dempet tekst: ingen understrek, ingen flate, ingen farge (21.10.2026, den
   gule understreken er borte). Salgsstatusen paa kort og rader staar i
   billettsloten (.aar-billett); her er det plakaten, oppslagene og
   hendelsene (avlyst, ny dato). */
.aar-markert,
.aarbok .aar-salg--utsolgt {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
}
.aarbok .aar-salg,
.aarbok .aar-hendelse {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}
.aarbok .aar-salg--faa-igjen,
.aarbok .aar-hendelse { color: var(--text); }
.aarbok .aar-hendelse--avlyst { color: var(--text-muted); }

/* ---- MOBIL: KORTET ER EN RAD ------------------------------------------
   72 px kvadratisk miniatyr til venstre og teksten til hoeyre. Raden er
   skannbar og trykkflaten er hele raden (minst 72 px hoey). En spalte, og
   dermed aldri et hull. */
@media (max-width: 719px) {
  .aarbok .concert-annual-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .aarbok .concert-annual-grid > .concert-card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
  }
  .aarbok .concert-annual-grid > .concert-card .concert-card-img { width: 72px; }
  .aarbok .concert-annual-grid > .concert-card .concert-card-img-wrap { aspect-ratio: 1 / 1; }
  .aarbok .concert-annual-grid > .concert-card .concert-card-info { padding: 0; }
  .aarbok .concert-annual-grid > .concert-card .concert-card-artist { font-size: 1.05rem; }
}

/* ---- RUTENETT UTEN HULL -----------------------------------------------
   Tolv spor fra 720 px. Et bildekort spenner 12/k spor i en rad med k kort:
   to, tre og fire i full rad, og raddelingen i scripts/lib/aar-rader.js gir
   kortene i en ufullstendig maaned klassen aar-b{k}-{s} («i bredden med k
   spalter staar kortet i en rad med s kort»). Alt annet i kalenderen
   (sesong, maaned, turnérad, tekstrad) staar i full bredde. Raden er luft,
   ikke kant: 30 px under hvert kort.
   Standardspennet staar i :where() (spesifisitet null), saa raddelingens
   klasser alltid vinner, og hver klasse gjelder bare i sin egen bredde. */
@media (min-width: 720px) {
  .aarbok .concert-annual-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 0;
  }
  .aarbok .concert-annual-grid > * { grid-column: 1 / -1; }
  .aarbok .concert-annual-grid > :where(.concert-card:not(.concert-card--turne, .concert-card--tekstrad)) {
    grid-column: span 6;
    margin-bottom: 30px;
  }
  /* Tittelen er to linjer hoey bare naar kortene staar side om side, saa
     stedet staar paa samme linje tvers over raden. */
  /* Ingen fast tittelhoeyde: en enlinjes tittel skal ha stedet rett under seg,
     ikke et hull. Høyrekolonnen i datolinja holdes av .aar-korttopp (under). */
}
@media (min-width: 720px) and (max-width: 979px) {
  .aarbok .concert-annual-grid > .aar-b2-3 { grid-column: span 4; }
}
@media (min-width: 980px) and (max-width: 1179px) {
  .aarbok .concert-annual-grid > :where(.concert-card:not(.concert-card--turne, .concert-card--tekstrad)) { grid-column: span 4; }
  .aarbok .concert-annual-grid > .aar-b3-2 { grid-column: span 6; }
}
@media (min-width: 1180px) {
  .aarbok .concert-annual-grid > :where(.concert-card:not(.concert-card--turne, .concert-card--tekstrad)) { grid-column: span 3; }
  .aarbok .concert-annual-grid > .aar-b4-2 { grid-column: span 6; }
  .aarbok .concert-annual-grid > .aar-b4-3 { grid-column: span 4; }
}
/* Et kort i en rad paa to faar et lavere bildeformat, saa raden ikke blir
   dobbelt saa hoey som raden paa fire over den. */
@media (min-width: 980px) and (max-width: 1179px) {
  .aarbok .concert-annual-grid > .aar-b3-2 .concert-card-img-wrap { aspect-ratio: 3 / 2; }
}
@media (min-width: 1180px) {
  .aarbok .concert-annual-grid > .aar-b4-2 .concert-card-img-wrap { aspect-ratio: 3 / 2; }
}
/* Én kveld med bilde i maaneden er en rad i full bredde, som paa mobil, og
   aldri et staaende kort ved siden av tre tomme felt. */
@media (min-width: 720px) {
  .aarbok .concert-annual-grid > .concert-card.aar-alene {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    column-gap: 22px;
    align-items: center;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border);
  }
  .aarbok .concert-annual-grid > .concert-card.aar-alene .concert-card-info { padding: 0; }
}

/* ---- TEKSTRADEN --------------------------------------------------------
   Turnédatoen uten egen side, og konserten med side men uten eget foto.
   Fotoets plass holdes av datoen: dagtallet i Anton og maaneden under, uten
   flate. Raden staar i full bredde etter maanedens bildekort. */
.aarbok .concert-annual-grid > :is(.concert-card--turne, .concert-card--tekstrad) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.aarbok .aar-rad__dato {
  display: grid;
  justify-items: start;
  gap: 2px;
  margin: 0;
}
.aarbok .aar-rad__dato b {
  font-family: "Anton", var(--font-sans);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.aarbok .aar-rad__dato span {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}
.aarbok .concert-annual-grid > :is(.concert-card--turne, .concert-card--tekstrad) .concert-card-info { padding: 0; }
.aarbok .annual-turne-hale {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}
@media (min-width: 720px) {
  .aarbok .concert-annual-grid > :is(.concert-card--turne, .concert-card--tekstrad) { align-items: center; }
  .aarbok .concert-annual-grid > :is(.concert-card--turne, .concert-card--tekstrad) .concert-card-info {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto minmax(20rem, auto);
    align-items: baseline;
    column-gap: 24px;
  }
  .aarbok .concert-annual-grid > :is(.concert-card--turne, .concert-card--tekstrad) :is(.concert-card-sted, .concert-card-meta, .aar-handling) { margin: 0; }
  .aarbok .concert-annual-grid > :is(.concert-card--turne, .concert-card--tekstrad) .aar-handling { justify-content: space-between; }
  .aarbok .concert-annual-grid > :is(.concert-card--turne, .concert-card--tekstrad) .concert-card-artist { min-height: 0; }
}

/* ---- TURNERADEN -------------------------------------------------------
   Baksiden av en turnéplakat: 2 px strek i tekstfarge over, navnet i Anton,
   antallet dempet, og datoene i spalter med dagtallet hoeyrestilt foran byen.
   «Scener og billetter» folder ut billettstubbene. */
.aarbok .aar-turne {
  grid-column: 1 / -1;
  margin-top: 26px;
  padding-top: 16px;
  border-top: 2px solid var(--text);
}
.aarbok .concert-annual-grid > .aar-turne + .aar-turne { margin-top: 34px; }
.aar-turne__hode {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
}
.aar-turne--uten-foto .aar-turne__hode { grid-template-columns: minmax(0, 1fr); }
.aar-turne__foto {
  display: block;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: 4px;
}
.aar-turne__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 26%;
}
.aar-turne__navnblokk { min-width: 0; }
.aarbok .aar-turne__navn {
  margin: 0;
  font-family: "Anton", var(--font-sans);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--text);
}
.aar-turne__fakta {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
}
/* Datolista: dagtallet i fast bredde, hoeyrestilt og tabulaert, byen etter.
   Hver dato er udelelig, saa et tall aldri staar alene nederst i en spalte. */
.aar-turne__rute {
  columns: 2;
  column-gap: 20px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.aar-turne__rute > li {
  display: grid;
  grid-template-columns: 2.5ch minmax(0, 1fr);
  column-gap: 0.6em;
  margin: 0;
  padding: 3px 0;
  break-inside: avoid;
  font-family: var(--font-display);
  font-size: 0.98rem;
  line-height: 1.3;
  color: var(--text);
}
.aar-turne__rute b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.aar-turne__rute span { font-weight: 400; }
/* Under et filter staar lista ute, fordi den navngir kvelder filteret kan
   ha skjult; folden staar da aapen med stubbene som er igjen. */
.er-filtrert .aar-turne__rute { display: none; }

/* Folden. Bryteren er en understreket lenke med en chevron som snur. */
.aar-turne__mer { margin-top: 12px; }
.aar-turne__vis {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  -webkit-tap-highlight-color: transparent;
}
.aar-turne__vis::-webkit-details-marker { display: none; }
.aar-turne__vis::after {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.aar-turne__mer[open]:not(.er-lukket) .aar-turne__vis::after { transform: translateY(4px) rotate(225deg); }
.aar-turne__mer:not([open]) .aar-turne__vis-aapen,
.aar-turne__mer[open] .aar-turne__vis-lukket { display: none; }
.aar-turne__vis:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) {
  .aar-turne__vis:hover { text-decoration-thickness: 2px; }
}
/* Aapning og lukking: grid-template-rows 0fr til 1fr pluss opasitet, aldri
   hoeyde. Klassen er-lukket settes av skriptet i malen; uten skript folder
   <details> seg ut som vanlig. */
.aar-turne__fold {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
}
.aar-turne__mer.er-lukket .aar-turne__fold { grid-template-rows: 0fr; opacity: 0; }
.aar-turne__innhold { min-height: 0; overflow: hidden; }

/* ---- BILLETTSTUBBENE --------------------------------------------------
   Én per kveld, som en tabell med haarstreker: dag, ukedag, by og scene,
   status og pil. Hver stubb er et .concert-card (filteret, bryteren og
   tellerne leser den), men ikke et kort. */
.aar-turne__stubber {
  margin-top: 4px;
  border-top: 1px solid var(--border);
}
.aarbok .aar-dato {
  position: relative;
  display: grid;
  grid-template-columns: 2.5ch 3.2ch minmax(0, 1fr) auto auto;
  column-gap: 10px;
  align-items: baseline;
  min-height: 56px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  background: none;
  color: var(--text);
  text-decoration: none;
  break-inside: avoid;
  -webkit-tap-highlight-color: transparent;
}
.aarbok .aar-dato .concert-card-artist {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.aar-dato__dag {
  grid-column: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.aar-dato__ukedag {
  grid-column: 2;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}
.aar-dato__sted { grid-column: 3; min-width: 0; }
.aar-dato__by {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
}
.aar-dato__scene {
  font-size: 0.88rem;
  color: var(--text-muted);
}
.aarbok .aar-dato .concert-card-meta { grid-column: 4; justify-self: end; margin: 0; }
.aarbok .aar-dato__billett { grid-column: 5; justify-self: end; align-self: center; }
/* Smal flate: stedet faar hele bredden, og billettlenka staar under det, ved
   stedets venstrekant, i stedet for aa presse stedsnavnet til tre linjer. */
@media (max-width: 559px) {
  .aarbok .aar-dato .aar-dato__sted { grid-column: 3 / -1; }
  .aarbok .aar-dato .concert-card-meta { grid-column: 3 / -1; grid-row: 3; justify-self: start; }
  .aarbok .aar-dato .aar-dato__billett { grid-column: 3 / -1; grid-row: 2; justify-self: start; margin-top: 2px; }
}
.aarbok .aar-dato.is-gjennomfort { color: var(--text-muted); }
@media (hover: hover) and (pointer: fine) {
  .aarbok .aar-dato .aar-hoved:hover { text-decoration: none; }
  .aarbok .aar-dato .aar-hoved:hover .aar-dato__by {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
}
.aar-turne__slutt { margin: 0; padding: 12px 0 0; }
.aar-turne__hele {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-ink);
  text-decoration: none;
}
.aar-turne__hele::after { content: '\2192'; }

@media (min-width: 720px) {
  .aarbok .aar-turne {
    display: grid;
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    column-gap: 32px;
    margin-top: 6px;
  }
  .aarbok .concert-annual-grid > .aar-turne + .aar-turne { margin-top: 30px; }
  .aar-turne__hode { grid-column: 1; grid-row: 1; align-self: start; }
  /* Spaltene holder plakatbredde: to datoer skal ikke staa 400 px fra
     hverandre fordi raden er bred. */
  .aar-turne__rute { grid-column: 2; grid-row: 1; max-width: 30rem; margin-top: 0; }
  .aar-turne__mer { grid-column: 1 / -1; }
  .aar-turne__rute--k3 { columns: 3; max-width: 45rem; }
  .aar-turne__rute--k4 { columns: 4; max-width: 60rem; }
  .er-filtrert .aar-turne__mer { grid-row: 1; grid-column: 2; margin-top: 0; }
  .aar-turne__stubber { columns: 2; column-gap: 40px; }
}

/* ---- DEN DOKKEDE STRIPA ----------------------------------------------
   Samme figur som plakatens stripe, rett under headeren. Hoeyden er fast
   (--aar-dokk-h) fordi filterbaren paa brede skjermer fester seg rett under
   den. Ingen skygge: kanten under er en haarstrek.
   LYST tema (samlet loesning 21.10.2026): stripa er en lys flate med moerkt
   blekk. Maanedsnavnene staar i --text-muted (#555 paa hvitt, 7,5:1) og
   aktiv maaned i --text med full soeyle og en amberstrek under: markeringen
   leses uten aa se paa fargen alene. Amber er understrek og soeyle, aldri
   tekstfarge paa hvitt. Maanedene uten kapittel er dempet, men ikke borte.
   MOERKT tema er uendret fra foer (moerk flate, hvitt blekk, amber soeyle). */
:root { --aar-dokk-h: 42px; }
.aar-dokk {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 190;
  height: var(--aar-dokk-h);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  color: var(--text);
  transform: translateY(-100%);
  visibility: hidden;
}
[data-theme="dark"] .aar-dokk {
  border-bottom-color: rgba(255, 255, 255, 0.12);
  background: rgba(8, 8, 8, 0.86);
  color: var(--hero-ink);
}
.aar-dokk.is-dokket { transform: none; visibility: visible; }
html.aar-dokket .site-header { box-shadow: none; }
@media (min-width: 768px) {
  html.aar-dokket .aarbok .hub-filterbar { top: calc(var(--header-h) + var(--aar-dokk-h)); }
}
.aar-dokk__rad {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  height: var(--aar-dokk-h);
  margin: 0;
  padding: 0;
  list-style: none;
}
.aar-dokk__rad > li { margin: 0; }
.aar-dokk__m {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  height: 100%;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.aar-dokk__sok {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 14px;
  border-bottom: 1px solid var(--border-strong);
}
.aar-dokk__sok i {
  display: block;
  width: 100%;
  max-width: 14px;
  border-radius: 2px 2px 0 0;
  background: color-mix(in srgb, var(--text-muted) 70%, transparent);
  transition: background-color var(--dur-hover) ease;
}
.aar-dokk__navn {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-muted);
  transition: color var(--dur-hover) ease;
}
.aar-dokk__m.is-aktiv { box-shadow: inset 0 -3px 0 var(--accent); }
.aar-dokk__m.is-aktiv .aar-dokk__sok i { background: var(--text); }
.aar-dokk__m.is-aktiv .aar-dokk__navn { color: var(--text); font-weight: 800; }
.aar-dokk__m--stille .aar-dokk__sok i { background: color-mix(in srgb, var(--text-muted) 30%, transparent); }
.aar-dokk__m--stille .aar-dokk__navn { color: color-mix(in srgb, var(--text-muted) 75%, var(--bg)); }
.aar-dokk__m:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 4px; }
[data-theme="dark"] .aar-dokk__sok { border-bottom-color: rgba(255, 255, 255, 0.18); }
[data-theme="dark"] .aar-dokk__sok i { background: rgba(255, 255, 255, 0.30); }
[data-theme="dark"] .aar-dokk__navn { color: var(--hero-ink-faint); }
[data-theme="dark"] .aar-dokk__m.is-aktiv { box-shadow: none; }
[data-theme="dark"] .aar-dokk__m.is-aktiv .aar-dokk__sok i { background: var(--accent); }
[data-theme="dark"] .aar-dokk__m.is-aktiv .aar-dokk__navn { color: var(--hero-ink); font-weight: 700; }
[data-theme="dark"] .aar-dokk__m--stille .aar-dokk__sok i { background: rgba(255, 255, 255, 0.13); }
[data-theme="dark"] .aar-dokk__m--stille .aar-dokk__navn { color: rgba(155, 161, 175, 0.55); }
@media (hover: hover) and (pointer: fine) {
  a.aar-dokk__m:hover .aar-dokk__navn { color: var(--text); }
  [data-theme="dark"] a.aar-dokk__m:hover .aar-dokk__navn { color: var(--accent); }
}
@media (min-width: 721px) {
  .aar-dokk__navn { font-size: 0.8rem; }
  .aar-dokk__sok i { max-width: 22px; }
}

/* ---- OVERGANGEN FRA HEROEN ---------------------------------------------
   Plakaten er moerk i begge temaer. I lyst tema endte den mot hvitt i en hard
   kant; naa toner den ut i sidens flate over 72 px (gradient fra plakatens
   farge til --bg). I moerkt tema er flatene naesten like, saa overgangen er
   usynlig der. Strekket ligger i plakatens flyt, under kreditteringen, saa
   ingen tekst staar paa gradienten. */
.aarplakat::after {
  content: '';
  flex: none;
  display: block;
  height: 72px;
  margin-bottom: -18px;
  background: linear-gradient(to bottom, #0a0c10, var(--bg));
}

/* ---- BEVEGELSE ---------------------------------------------------------
   Trykk: scale(.985) paa 140 ms paa kort, rader og stubber. Bildezoom 1.02
   over 300 ms ease-out bare med ekte peker. Avsloeringen i js/main.js
   staggeres 40 ms og kappes her paa 6, og den skjer bare ved foerste
   innlasting. Folden aapner paa 240 ms og lukker paa 160 ms, og chevronen
   snur paa 200 ms. Ingen sprett. Redusert bevegelse: bare opasitet. */
@media (prefers-reduced-motion: no-preference) {
  .aarbok .concert-annual-grid .concert-card,
  .aarbok .aar-dato { transition: scale 140ms var(--ease-out-quart); }
  .aarbok .concert-annual-grid > .concert-card.js-rise.is-inview {
    transition:
      opacity var(--dur-reveal) var(--ease-out-quart) calc(min(var(--i, 0), 6) * 40ms),
      transform var(--dur-reveal) var(--ease-out-quart) calc(min(var(--i, 0), 6) * 40ms),
      scale 140ms var(--ease-out-quart);
  }
  .aarbok .concert-annual-grid .concert-card:active,
  .aarbok .aar-dato:active { transform: none; scale: 0.985; }
  .aarbok .concert-annual-grid .concert-card-img-wrap img { transition: transform 300ms ease-out; }
  .aar-turne__vis::after { transition: transform 200ms var(--ease-out-quart); }
  .aar-turne__fold {
    transition: grid-template-rows 240ms var(--ease-out-quart), opacity 240ms var(--ease-out-quart);
  }
  .aar-turne__mer.er-lukket .aar-turne__fold {
    transition-duration: 160ms;
  }
  .aar-dokk { transition: transform 180ms var(--ease-out-quart), visibility 0s linear 180ms; }
  .aar-dokk.is-dokket { transition: transform 260ms var(--ease-out-quart), visibility 0s; }
}
@media (hover: hover) and (pointer: fine) {
  .aarbok .concert-annual-grid .concert-card:hover { transform: none; box-shadow: none; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .aarbok .concert-annual-grid .concert-card:hover .concert-card-img-wrap img { transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .aarbok .concert-annual-grid .concert-card:active,
  .aarbok .aar-dato:active { transform: none; scale: none; }
  .aar-turne__fold { grid-template-rows: 1fr; transition: opacity 160ms linear; }
  .aar-turne__mer.er-lukket .aar-turne__fold { grid-template-rows: 1fr; }
}