html,
body {
  min-height: 100%;
}

/* ---------------------------------------------------------------
   GEMENSAM INNEHALLSKOLUMN
   Ett enda varde som stage-innehallet delar, sa att alla sektioner
   far samma vanster- och hogerkant. Aterbrukas i FAS 5D (2x2-grid)
   och 5E (hero) i stallet for flera nastan-lika max-width-varden.
   --------------------------------------------------------------- */
:root {
  --stage-max: 1240px;
  --stage-gutter: clamp(16px, 2.2vw, 32px);
}

body {
  margin: 0;
  color: rgba(226, 226, 224, 0.9);
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.45;
  background-color: #070709;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: "Arial Black", "Impact", "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

p,
li,
time,
span,
a {
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
}

/* Headern ligger kvar vid scroll. Pa desktop var den redan absolut
   positionerad ovanpa hero, sa fixed ar ett rakt byte utan layoutskift.
   Under 860 px ligger den i normalt flode - dar ar sticky det ratta
   valet, ocksa utan layoutskift. Ingen JavaScript. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  /* Nar headern ligger over innehall racker inte den gamla nastan
     genomskinliga bakgrunden - text och knappar lyste igenom. Detta
     ar en full-bredds morkgradient i sidans egen svarthet, sa att
     bandet inte far hard sidokant vid __inner:s 1120 px. */
  background: linear-gradient(
    to bottom,
    rgba(6, 6, 8, 0.98) 0%,
    rgba(6, 6, 8, 0.96) 72%,
    rgba(6, 6, 8, 0.82) 100%
  );
  border: 0;
}

/* Ankarmal far marginal sa att de inte hamnar bakom den fasta headern. */
#hero,
#upcoming-shows,
#featured-video,
#merch,
#band,
#shows,
#media,
#contact {
  scroll-margin-top: 76px;
}

.site-header__inner {
  /* V2: headern delar innehallets bredd. */
  max-width: var(--stage-max);
  margin: 0 auto;
  min-height: 32px;
  padding: 24px 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background:
    linear-gradient(to bottom, rgba(10, 9, 12, 0.32), rgba(8, 7, 10, 0.18));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42);
}

.site-header__left {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.site-header__follow {
  color: rgba(218, 214, 203, 0.82);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.92rem;
  font-weight: 900;
  font-family: "Times New Roman", Georgia, serif;
  white-space: nowrap;
}

.site-header__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
}

.site-header__nav li {
  display: flex;
  align-items: center;
}

.site-header__nav li + li::before {
  /* Dekorativ separator: tom alt-text haller den utanfor
     tillganglighetstradet. Forsta raden ar fallback for aldre webblasare. */
  content: "•";
  content: "•" / "";
  color: rgba(174, 166, 148, 0.52);
  margin-right: 5px;
  font-size: 0.48rem;
  transform: translateY(-1px);
}

.site-header__nav a {
  color: rgba(220, 216, 205, 0.84);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 1.03rem;
  font-weight: 900;
  font-family: "Times New Roman", Georgia, serif;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  transition: color 140ms ease, opacity 140ms ease;
}

.site-header__nav a:hover {
  color: rgba(255, 255, 255, 0.98);
}

.site-header__social {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-header__social a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  opacity: 0.96;
  transition: opacity 140ms ease, transform 140ms ease;
}

.site-header__social a:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.site-header__social a img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 36px;
  object-fit: contain;
}

/* FAS 7D: band-profile.js doljer sociala lankar utan giltig adress i
   MetalGigs. display pa lankarna ovan skulle annars vinna over [hidden]. */
a[data-social][hidden] {
  display: none;
}

/* ---------------------------------------------------------------
   HERO — Hero V1 artwork
   Artworken visas som en centrerad porträttplåt (2:3), i stil med
   ett skivomslag/poster. Bakom den ligger samma bild kraftigt
   suddad och nedmörkad, vilket fyller breda skärmar utan att
   kompositionen behöver beskäras hårt.
   --------------------------------------------------------------- */

#hero {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* Ingen bottenpadding: platens underkant AR sektionens underkant. Annars
     syns den suddade atmosfaren som en oskuggad ljus remsa under artworket -
     precis den horisontella linje som skarven ska sakna.
     Samma gutter som informationsgriddet, sa att hero-platen och
     slime-ytan far exakt samma vanster- och hogerkant. */
  padding: clamp(92px, 12vh, 148px) var(--stage-gutter) 0;
  background-color: #070709;
}

/* Suddad helskärmsbakgrund som fyller ytorna vid sidan om plåten. */
#hero::before {
  content: "";
  position: absolute;
  inset: -6%;
  z-index: 0;
  pointer-events: none;
  background-image: url("../images/hero/hero-v1.webp");
  background-repeat: no-repeat;
  background-position: center 22%;
  background-size: cover;
  filter: blur(34px) brightness(0.34) saturate(0.65) contrast(1.05);
}

/* Mörk vinjett så att plåten smälter in i sidans svärta. */
#hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at center 38%,
      rgba(6, 6, 9, 0) 38%,
      rgba(6, 6, 9, 0.55) 78%,
      rgba(6, 6, 9, 0.88) 100%
    ),
    linear-gradient(to bottom, rgba(6, 6, 9, 0.55) 0%, rgba(6, 6, 9, 0) 22%),
    linear-gradient(to bottom, rgba(6, 6, 9, 0) 72%, rgba(7, 7, 9, 0.96) 100%);
}

.hero__stage {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 1024 / 1536;
  max-height: min(84vh, 940px);
  overflow: hidden;
  /* Droppskuggan togs bort: den lade plåten som ett fysiskt tryck
     ovanpa sidan och var en av de starkaste poster-signalerna. */
  --hero-fade: linear-gradient(
    to bottom,
    #000 74%,
    rgba(0, 0, 0, 0.86) 86%,
    rgba(0, 0, 0, 0.42) 95%,
    rgba(0, 0, 0, 0) 100%
  );
}


.hero__art,
.hero__art img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__art img {
  object-fit: cover;
  object-position: center 30%;
}

@media (min-width: 700px) {
  /* 36 % ger reapern samma relativa tyngd som i V2-mallen: ruinstaden
     och himlen syns, bada skeletten ligger i nedre hornen och
     ornamentbandet far en oppen nederdel att vila pa. */
  .hero__art img {
    object-position: center 36%;
  }
}

/* Artworken tonas ut nedat sa att den loses upp i den suddade,
   morka bakgrunden bakom plåten i stallet for att kapas av en kant. */
.hero__art {
  -webkit-mask-image: var(--hero-fade);
  mask-image: var(--hero-fade);
}

/* Vinjett over artworken: satter plåten i sitt morker och ger
   CTA:n en morkare botten att sta emot. Ligger under .hero__content. */
.hero__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(7, 7, 9, 0) 56%,
      rgba(7, 7, 9, 0.3) 76%,
      rgba(7, 7, 9, 0.72) 90%,
      rgba(7, 7, 9, 0.94) 100%
    ),
    linear-gradient(
      to right,
      rgba(7, 7, 9, 0.5) 0%,
      rgba(7, 7, 9, 0) 10%,
      rgba(7, 7, 9, 0) 90%,
      rgba(7, 7, 9, 0.5) 100%
    ),
    linear-gradient(to bottom, rgba(7, 7, 9, 0.42) 0%, rgba(7, 7, 9, 0) 14%);
}

.hero__content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: clamp(18px, 4.5%, 42px) clamp(14px, 5%, 40px) clamp(20px, 5.5%, 46px);
}

.hero__logo {
  width: 100%;
  display: flex;
  justify-content: center;
}

.hero__logo img {
  display: block;
  width: min(86%, 460px);
  height: auto;
  /* Full opacitet: 0.94 slappte igenom artworket i sjalva bokstaverna
     och dampade den rena vitheten med ~13 luminanssteg.

     Offset/extruderad skugga (FAS 3D-C, variant B): en hard kopia utan
     blur forskjuten 7px hoger och 11px ner ger screen-print-djup - som
     ett tryckt logotyp-avtryck framfor artworket, inte en mjuk UI-skugga.
     Den tunna forsta skuggan hjalper konturen, den sista bottnar formen.
     Foljer logotypens alfaform, inte bildens rektangel. */
  opacity: 1;
  filter:
    drop-shadow(0 0 1px rgba(0, 0, 0, 0.9))
    drop-shadow(7px 11px 0 rgba(0, 0, 0, 0.82))
    drop-shadow(0 12px 28px rgba(0, 0, 0, 0.6));
}


.hero__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ---------------------------------------------------------------
   HERO — DESKTOPINTEGRATION
   Over 860 px vaxer plåten till 880 px och dess yttersta kantzoner
   tonas ut i sidled, sa att den skarpa artworken moter atmosfaren
   i stallet for att sluta i en rak rektangelkant. Atmosfaren ljusas
   upp fran brightness 0.34 till 0.72 och vinjetten dampas, sa att
   sidoytorna blir murk i stallet for dod svarta.
   Mobilen behaller sin portrattkomposition oforandrad.
   --------------------------------------------------------------- */

@media (min-width: 700px) {
  .hero__stage {
    /* V2: hero i full innehallsbredd med liggande beskarning.
       1024/756 = 1.354:1 ar samma proportion som mallens hero-omrade.
       object-position 44 % centrerar reapern med bada skeletten kvar. */
    max-width: var(--stage-max);
    max-height: none;
    aspect-ratio: 1024 / 756;
  }

  /* Lateral uttoning: bara de yttersta 5 % av bredden pavarkas -
     mitten (reapern) forblir helt skarp. */
  .hero__art {
    -webkit-mask-image: var(--hero-fade),
      linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: var(--hero-fade),
      linear-gradient(to right, transparent 0%, #000 5%, #000 95%, transparent 100%);
    mask-composite: intersect;
  }

  #hero::before {
    filter: blur(30px) brightness(0.72) saturate(0.72) contrast(1.02);
  }

  #hero::after {
    background:
      radial-gradient(
        ellipse at center 40%,
        rgba(6, 6, 9, 0) 46%,
        rgba(6, 6, 9, 0.28) 80%,
        rgba(6, 6, 9, 0.55) 100%
      ),
      linear-gradient(to bottom, rgba(6, 6, 9, 0.5) 0%, rgba(6, 6, 9, 0) 20%),
      linear-gradient(to bottom, rgba(6, 6, 9, 0) 78%, rgba(7, 7, 9, 0.9) 100%);
  }
}

/* ---------------------------------------------------------------
   RESPONSIV HEADER + HERO
   Ingen JavaScript: headern staplas och navigationen radbryts.
   --------------------------------------------------------------- */

/* Under 861 px behalls den tidigare fungerande portrattbehandlingen. */
@media (max-width: 860px) {
  .site-header {
    /* I flodet har - sticky haller den kvar utan att flytta nagot. */
    position: sticky;
  }

  #hero,
  #upcoming-shows,
  #featured-video,
  #merch,
  #band,
  #shows,
  #media,
  #contact {
    scroll-margin-top: 160px;
  }

  .site-header__inner {
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 16px 16px 14px;
  }

  .site-header__left {
    flex-direction: column;
    gap: 8px;
  }

  .site-header__nav ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 6px;
  }

  .site-header__nav a {
    font-size: 0.94rem;
    letter-spacing: 0.1em;
  }

  #hero {
    padding: 18px var(--stage-gutter) 26px;
  }
}

@media (max-width: 699px) {
  /* Portrattplåtens smalare cap galler bara dar den liggande
     behandlingen inte anvands. */
  .hero__stage {
    max-width: 560px;
    max-height: none;
  }
}

@media (max-width: 480px) {
  .site-header__follow {
    font-size: 0.82rem;
  }

  .site-header__social {
    gap: 3px;
  }

  .site-header__social a,
  .site-header__social a img {
    width: 30px;
    height: 30px;
    max-width: 30px;
  }

  .site-header__nav a {
    font-size: 0.86rem;
    letter-spacing: 0.08em;
  }

  .hero__logo img {
    width: min(92%, 320px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__nav a,
  .site-header__social a {
    transition: none;
  }
}

/* ---------------------------------------------------------------
   STAGE
   Ren wrapper. Den illustrerade ytan ligger inte har langre - den
   hor ihop med informationsomradets bredd och bars darfor av
   .news-shows, samma element som ornamenten linjerar mot.
   --------------------------------------------------------------- */

.stage {
  position: relative;
}

/* ---------------------------------------------------------------
   NEWS / SHOWS
   Modulart: Plague Top Ornament V1 som fristaende toppdekor,
   darunder vanlig mork HTML-yta. Ingen ram, ingen inbrand text.
   --------------------------------------------------------------- */

.news-shows {
  --ns-gap: clamp(26px, 3.6vw, 52px);
  isolation: isolate;
  margin: 0 auto;
  max-width: var(--stage-max);
  /* Luft i topp sa att rubrikerna gar fria fran ornamentets hangspetsar,
     som stracker sig ner over skarven in i slime-ytan. */
  padding: clamp(88px, 8.7vw, 120px) var(--stage-gutter) 0;
  display: grid;
  /*
    KOLUMNKVOT (FAS 15B-B). Var 1.16/0.84 = 58/42. Videorutan ar 16:9 och
    merchbilden 3:2, sa deras HOJD foljer kolumnens bredd - med den gamla
    kvoten blev videon 390 px hog och merchbilden 304, och rad 2 last aldrig
    som ett par. Vid 1.08/0.92 moter de tva formaten varandra av sig sjalva:
    338 mot 337 px, utan att nagot beskars eller stracktes.

    Bonusen ligger i rad 1: affischen och giguppgifterna i Upcoming Show fick
    aldrig plats i 499 px, och Latest News hade overskottsbredd den inte
    anvande. Ingen egen breakpoint behovs - @media (max-width: 860px) nedan
    satter redan en kolumn, sa den har raden galler per definition bara
    tvakolumnslaget.
  */
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(30px, 3.4vw, 54px) var(--ns-gap);
  align-items: start;
  position: relative;
  /* .hero__stage har z-index: 2 och #hero ar ingen stackningskontext, sa
     platen deltar i rot-kontexten. Utan ett hogre z-index har skulle platen
     malas OVER toppornamentets ovre halft och skarven skulle se ut som en
     rak avklippning igen. */
  z-index: 3;
}

/* 3:1-dekoration. Aldrig strackt, aldrig beskuren i sidled. */
.news-shows__ornament {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  pointer-events: none;
}

/* Bottenornamentet har ~20 % tom yta upptill (bbox borjar vid y144 av 724).
   Negativ margin kompenserar for den tomheten sa att ornamentmassan hamnar
   i det dodutrymme som tidigare fanns efter "View All Dates" - i stallet
   for att lagga till nytt tomrum under det. */
.news-shows__ornament--bottom {
  margin-top: clamp(-132px, -9vw, -36px);
}

/* Toppornamentet ligger over skarven mellan hero och slime-ytan: dess
   tata band hamnar mitt pa granslinjen sa att de tva ytorna binds ihop.
   Det bor i .news-shows och inte i #hero - hero har overflow: hidden och
   skulle annars kapa ornamentets nedre halft rakt av vid sin egen kant.
   translateY ar relativt ornamentets EGEN hojd. */
.news-shows__ornament--top {
  position: absolute;
  /* Basregelns grid-column: 1 / -1 skulle gora grid-AREAN till containing
     block, vilket forskjuter ornamentet en gutter inat pa varje sida och
     lagger top: 0 vid griddets content-box i stallet for vid skarven.
     Auto-placering ger padding-boxen som containing block. */
  grid-column: auto;
  grid-row: auto;
  /* Explicit width, inte left+right: for ett absolut positionerat ersatt
     element (img) skulle width: auto ge intrinsic 2172 px i stallet for
     att strackas mellan kanterna. */
  left: var(--stage-gutter);
  top: 0;
  width: calc(100% - 2 * var(--stage-gutter));
  height: auto;
  transform: translateY(-60%);
  z-index: 1;
  pointer-events: none;
}

/* I stapelt lage hanger ornamentet kortare ner over skarven, sa att det
   inte tacker den forsta rubriken nar kolumnerna ligger under varandra. */
@media (max-width: 860px) {
  .news-shows__ornament--top {
    transform: translateY(-70%);
  }
}

/* Innehallet dras upp under toppornamentets glesa hangspetsar. */
#latest-news {
  margin-top: 0;
  padding: 0;
}

/* Den illustrerade ytan mellan ornamenten. Absolut positionerad, sa
   den blir inget grid-item. Inset med samma gutter som griddet, vilket
   ger exakt samma bredd som Top- och Bottom Ornament - texturen slutar
   dar ornamenten slutar i stallet for att ga kant-till-kant. */
.news-shows::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--stage-gutter);
  right: var(--stage-gutter);
  z-index: -1;
  pointer-events: none;
  background-image: url("../images/ornaments/ornamentbg.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  opacity: 0.2;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 5%,
    rgba(0, 0, 0, 1) 13%,
    rgba(0, 0, 0, 1) 87%,
    rgba(0, 0, 0, 0.5) 96%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 5%,
    rgba(0, 0, 0, 1) 13%,
    rgba(0, 0, 0, 1) 87%,
    rgba(0, 0, 0, 0.5) 96%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* Kortet bar rubriken och panelen, precis som .upcoming-shows__card -
   samma padding, sa att de tva rubrikerna och deras linjer star i jamnhojd. */
.latest-news__card {
  /* width:100% + padding kraver border-box, annars svaller kortet
     ut over sin grid-kolumn och ger horisontell overflow. */
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 22px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.latest-news__card h2,
.upcoming-shows__card h2,
.featured-video__inner h2,
.merch__card h2,
.band__inner h2,
.shows__inner h2,
.merch-shop__inner h2,
.media__inner h2,
.contact__inner h2 {
  margin: 0 0 16px;
  padding-bottom: 10px;
  color: rgba(228, 221, 205, 0.92);
  font-family: "Times New Roman", Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: clamp(1rem, 1.6vw, 1.26rem);
  font-weight: 700;
  border-bottom: 1px solid rgba(150, 142, 124, 0.26);
}

/*
  BILDPANELEN (Cinematic V1). Bilden ar posten: den ligger som ett lager over
  hela panelen, och datum och text sitter ovanpa dess nedre del. Bilden ar
  absolut positionerad, sa panelens hojd styrs av formatet nedan och av texten -
  blir texten hogre vaxer panelen, inget klipps.

  overflow: hidden sitter pa bildytan och inte pa panelen: en panel med
  aspect-ratio och dold overflow hade inte kunnat vaxa med texten.
*/
.latest-news__panel {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: grid;
  border: 1px solid rgba(150, 142, 124, 0.24);
  background: rgb(8, 7, 10);
}

#latest-news[data-news-state="ready"] .latest-news__panel {
  min-height: 240px;
}

/* Medan svaret hamtas syns bara rubriken. En tom ram vore en halvfardig
   post; hellre ingenting an nagot som ser trasigt ut. */
#latest-news[data-news-state="loading"] .latest-news__panel {
  visibility: hidden;
}

/* Fokusramen sitter pa panelen: texten ligger over knappens nedre del och
   hade dolt en ram pa sjalva knappen. */
.latest-news__panel:has(.latest-news__open:focus-visible) {
  outline: 2px solid rgba(236, 230, 216, 0.95);
  outline-offset: 3px;
}

.latest-news__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
}

/* Knappen tacker hela bilden. Fokusringen ar panelens, se ovan. */
.latest-news__open {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: zoom-in;
  -webkit-appearance: none;
  appearance: none;
}

/* API:t har ingen fokuspunkt, sa beskarningen ar en enda installning: strax
   under mitten, eftersom texten tacker bildens nederkant och motivet annars
   hamnar bakom den. Hela bilden finns i forstoringen. */
.latest-news__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
  transition: transform 600ms ease, filter 600ms ease;
}

/* Samma benvita ruta som dialogernas stangknapp, i mindre format. */
.latest-news__zoom {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: rgba(8, 8, 10, 0.62);
  border: 1px solid rgba(228, 221, 205, 0.4);
  color: rgba(240, 236, 226, 0.94);
  font-family: Arial, sans-serif;
  font-size: 1.25rem;
  line-height: 1;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.latest-news__open:focus-visible .latest-news__zoom {
  border-color: rgba(244, 239, 226, 0.95);
  background: rgba(8, 8, 10, 0.95);
}

@media (hover: hover) {
  .latest-news__open:hover img {
    transform: scale(1.03);
    filter: brightness(1.07);
  }

  .latest-news__open:hover .latest-news__zoom {
    border-color: rgba(244, 239, 226, 0.95);
    background: rgba(8, 8, 10, 0.95);
  }
}

/*
  Texten ovanpa bilden. Gradienten borjar vid textens overkant med nastan full
  tackning, och tonar ut i luften ovanfor - sa ar kontrasten densamma hur ljus
  bilden an ar, och hur manga rader det an blir. Klick pa gradienten gar
  igenom till bilden; sjalva texten gar att markera.
*/
.latest-news__content {
  --ln-fade: 96px;
  position: relative;
  z-index: 1;
  align-self: end;
  min-width: 0;
  padding: var(--ln-fade) clamp(18px, 2vw, 26px) clamp(16px, 1.8vw, 22px);
  background: linear-gradient(
    to top,
    rgba(5, 4, 6, 0.96) 0%,
    rgba(5, 4, 6, 0.86) calc(100% - var(--ln-fade)),
    rgba(5, 4, 6, 0.6) calc(100% - var(--ln-fade) * 0.66),
    rgba(5, 4, 6, 0.22) calc(100% - var(--ln-fade) * 0.33),
    rgba(5, 4, 6, 0) 100%
  );
  pointer-events: none;
}

.latest-news__body,
.latest-news__read {
  pointer-events: auto;
}

/* Specificiteten matchar .latest-news__content p nedan, som annars vinner
   och ger datumet brodtextens storlek. */
.latest-news__content .latest-news__date {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 9px;
  color: rgba(226, 222, 212, 0.88);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.latest-news__content .latest-news__date[hidden] {
  display: none;
}

.latest-news__content .latest-news__date::before {
  content: "";
  flex: 0 0 18px;
  height: 1px;
  background: rgba(176, 84, 70, 0.98);
}

.latest-news__content p {
  margin: 0;
  color: rgba(222, 222, 218, 0.84);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* Nyhetstexten: gigtitelns serif och ljusa ton i alla langder. Ingen
   versalsattning - texten star kvar som bandet skrev den. Enkla radbrytningar
   inom ett stycke behalls, och langa ord och adresser bryts i stallet for att
   spranga panelen. */
.latest-news__body p {
  color: rgba(252, 252, 250, 0.98);
  font-family: "Times New Roman", Georgia, serif;
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1.32;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.latest-news__body p + p {
  margin-top: 0.6em;
}

/* Kort text ar postens rubrik. */
.latest-news__card--short .latest-news__body p {
  font-size: clamp(1.55rem, 2.5vw, 2.15rem);
  letter-spacing: 0.02em;
  line-height: 1.16;
}

/* Lang text: nagra rader av forsta stycket, sa att bilden far synas. Resten
   finns i dialogen, och knappen under visar att det finns mer. */
.latest-news__card--long .latest-news__body p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  font-size: 1.06rem;
}

/* Inget ruta runt knappen: en tunn blodrod understrykning, och hela raden
   ar tryckyta (minst 44 px). */
.latest-news__read {
  display: inline-block;
  min-height: 44px;
  margin: 0 0 -10px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(240, 236, 226, 0.94);
  font-family: Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-decoration: underline;
  text-decoration-color: rgba(190, 92, 76, 0.95);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms ease;
}

.latest-news__read:hover {
  color: rgb(255, 255, 255);
}

.latest-news__read:focus-visible {
  outline: 2px solid rgba(236, 230, 216, 0.95);
  outline-offset: 2px;
}

/* Tomt och otillgangligt lage - samma dampade ton som Upcoming Shows
   "No upcoming shows announced.". Ett besked, inte ett felmeddelande. */
.latest-news__content .latest-news__status {
  color: rgba(214, 210, 202, 0.66);
  font-size: 0.82rem;
}

/*
  UTAN BILD (eller nar den inte gick att ladda): ingen bildruta och ingen
  platshallare, utan en mork textpanel med sidans egen textur och samma
  sattning. Texten har hela panelen, sa forhandsvisningen far fler rader.
*/
.latest-news__card--text-only .latest-news__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse at center, rgba(5, 4, 6, 0.1), rgba(5, 4, 6, 0.85)),
    url("../images/ornaments/ornamentbg.webp");
  background-position: center top;
  background-size: cover;
  opacity: 0.55;
}

.latest-news__card--text-only .latest-news__content {
  padding-top: clamp(16px, 1.8vw, 22px);
  background: none;
}

.latest-news__card--long.latest-news__card--text-only .latest-news__body p {
  -webkit-line-clamp: 6;
  line-clamp: 6;
}

/* Formatet. Staplat far panelen ett eget format; i tvakolumnslaget foljer den
   i stallet raden, sa att underkanten linjerar med Upcoming Shows nar posten
   ar den lagre av de tva. Ar den hogst vaxer raden som forut. Bara en
   publicerad post - ett besked behover ingen stor ram. */
@media (max-width: 860px) {
  /* min-height: auto, annars vaxer panelen inte med en text som ar hogre an
     formatet. */
  #latest-news[data-news-state="ready"] .latest-news__card:not(.latest-news__card--text-only) .latest-news__panel {
    min-height: auto;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 620px) {
  #latest-news[data-news-state="ready"] .latest-news__card:not(.latest-news__card--text-only) .latest-news__panel {
    aspect-ratio: 1 / 1;
  }
}

@media (min-width: 861px) {
  .latest-news__card--long .latest-news__body p {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  #latest-news[data-news-state="ready"] {
    align-self: stretch;
  }

  #latest-news[data-news-state="ready"] .latest-news__card {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  #latest-news[data-news-state="ready"] .latest-news__panel {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .latest-news__media img,
  .latest-news__zoom,
  .latest-news__read {
    transition: none;
  }

  .latest-news__open:hover img {
    transform: none;
  }
}

/*
  HELA NYHETEN. Skalet ar Contact-dialogen; det enda som ar eget ar textytan,
  som scrollar under rubriken pa samma satt som kontaktformularet.
*/
.latest-news-dialog__text {
  min-height: 0;
  padding: 6px clamp(18px, 3.4vw, 34px) clamp(18px, 2.4vw, 24px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 142, 124, 0.5) transparent;
}

.latest-news-dialog__text:focus {
  outline: none;
}

.latest-news-dialog__text:focus-visible {
  outline: 1px solid rgba(236, 230, 216, 0.55);
  outline-offset: -8px;
}

.latest-news-dialog__text p {
  margin: 0;
  color: rgba(226, 224, 218, 0.92);
  font-size: 1rem;
  line-height: 1.65;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.latest-news-dialog__text p + p {
  margin-top: 0.9em;
}

.latest-news-dialog__text .latest-news-dialog__date {
  margin-bottom: 12px;
  color: rgba(212, 212, 212, 0.8);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-align: center;
  text-transform: uppercase;
}

#upcoming-shows {
  margin-top: 0;
  padding-right: 0;
  position: relative;
}

.upcoming-shows__card {
  box-sizing: border-box;
  padding: 22px;
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: 100%;
}

/* ---------------------------------------------------------------
   Upcoming Show - startsidans gigkort (FAS 6D / 6D.2)

   Startsidan visar EN spelning, inte hela kalendern. Kortet ar en
   teaser: affischen till vanster, giguppgifterna till hoger, och
   vagen vidare nederst innanfor samma ram.

   Formsprak: tryckt gigannons, inte modernt UI-kort. Rat vinkel,
   tunn linje, morkt papper. Ingen radie, ingen slagskugga utat,
   ingen gradient.
   --------------------------------------------------------------- */

/*
  Sjalva kortet. Ramen gar runt bade spelningen och VIEW ALL SHOWS.

  Den inre haarlinjen fyra pixlar innanfor ytterlinjen ar hela knepet:
  tva tunna regler med luft emellan ar hur en gammal annons ar satt,
  och det gor kortet till en tryckt yta i stallet for en UI-ruta -
  utan en enda ny bildfil.
*/
.upcoming-shows__panel {
  box-sizing: border-box;
  padding: clamp(16px, 1.5vw, 21px);
  border: 1px solid rgba(150, 142, 124, 0.32);
  border-radius: 0;
  background: rgba(8, 7, 10, 0.5);
  box-shadow:
    inset 0 0 0 4px rgba(8, 7, 10, 0.55),
    inset 0 0 0 5px rgba(150, 142, 124, 0.13),
    inset 0 0 38px rgba(0, 0, 0, 0.5);
}

/*
  Avdelaren mellan spelningen och vagen vidare. Den sitter pa __feature
  och inte pa lanken, for att en inline-block-knapp bara hade fatt en
  linje lika bred som sig sjalv. Star kvar aven i tomt lage, dar den
  skiljer beskedet fran lanken - vilket ar precis lika riktigt.
*/
.upcoming-shows__feature {
  padding-bottom: clamp(14px, 1.4vw, 18px);
  border-bottom: 1px solid rgba(150, 142, 124, 0.18);
}

/* VIEW ALL SHOWS och VIEW ON METALGIGS ar inte gigets huvudhandling utan
   vagen till kalendern, sa de star nederst i kortet med luft omkring sig.
   flex-wrap later dem brytas till tva rader i den smala kolumnen. */
.upcoming-shows__ctas {
  margin-top: clamp(14px, 1.4vw, 18px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.upcoming-shows__ctas .upcoming-shows__cta {
  margin-top: 0;
}

.upcoming-shows__show {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 1.7vw, 22px);
}

/* --- Affischen ------------------------------------------------- */

.upcoming-shows__poster-link {
  display: block;
  flex: 0 0 auto;
  text-decoration: none;
}

/*
  RUTAN AGER STORLEKEN, ALDRIG BILDEN.

  En gigaffisch ar drygt tusen pixlar bred i original. Far den bestamma
  sitt eget matt spricker 42-procentskolumnen och sidan far sidoscroll.
  Darfor sitter bredden har, och flex: 0 0 auto sa att rutan varken
  krymps av en lang titel bredvid eller vaxer av bilden inuti - aven nar
  den ligger som direkt flexbarn (gig utan lank att klicka pa).
*/
.upcoming-shows__poster {
  flex: 0 0 auto;
  width: clamp(112px, 15vw, 168px);
  max-width: 100%;
  /* MetalGigs publicerar affischer i 4:5. Rutan har sitt matt fore
     bilden, sa raden under hoppar aldrig till nar den anlander. */
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(175, 171, 160, 0.26);
  background: rgba(10, 9, 12, 0.6);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.6);
}

/*
  Under 860 px staplas kolumnerna och kortet far hela stagebredden. Da
  blir 15vw en orimligt liten affisch i en bred ruta - bredden far folja
  en storre andel av skarmen, med tak sa att den inte tar over pa en
  telefon. Golvet 120 px galler i praktiken fran 500 px och nedat.
*/
@media (max-width: 860px) {
  .upcoming-shows__poster {
    width: clamp(120px, 24vw, 180px);
  }
}

.upcoming-shows__poster-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  /* contain, inte cover: en gigaffisch bar text och grafik anda ut i
     kanten, och det som beskars ar ofta datumet eller ett bandnamn.
     Hellre en smal remsa bakgrund an en kapad affisch. */
  object-fit: contain;
}

/* Syns nar posterUrl ar null och nar bilden inte gick att hamta - da
   tas img-elementet bort och den har satts in i stallet. Ingen bildasset. */
.upcoming-shows__poster-placeholder {
  padding: 0 8px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.56rem;
  font-weight: 700;
  color: rgba(214, 210, 202, 0.32);
}

/* --- Uppgifterna ----------------------------------------------- */

.upcoming-shows__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Ta hela den plats affischen lamnar over - utan detta krymper
     kolumnen till innehallets bredd och titeln bryts i onodan. */
  flex: 1 1 auto;
  /* min-width: 0 later en lang titel brytas i stallet for att trycka
     komponenten bredare an kolumnen. Utan den blir det sidoscroll. */
  min-width: 0;
  padding-top: 1px;
}

/* Datumet ar metadata OVANFOR titeln, satt som nyhetskortets datum -
   samma roll, samma behandling, sa de tva korten laser som slaktingar. */
.upcoming-shows__date {
  display: block;
  margin-bottom: 7px;
  color: rgba(212, 212, 212, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Samma serif-versaler som nyhetskortets rubrik. Kortets tyngdpunkt. */
.upcoming-shows__title {
  margin: 0 0 12px;
  font-family: "Times New Roman", Georgia, serif;
  color: rgba(252, 252, 250, 0.98);
  letter-spacing: 0.07em;
  font-size: clamp(0.98rem, 1.15vw, 1.12rem);
  line-height: 1.24;
  font-weight: 700;
  /* "Farsoth + Repuked @ Blodfest NKPG" maste kunna brytas var som
     helst pa 360 px. */
  overflow-wrap: anywhere;
}

.upcoming-shows__title-link {
  font-family: inherit;
  color: inherit;
  text-decoration: none;
  transition: color 140ms ease;
}

.upcoming-shows__title-link:hover {
  color: rgba(255, 255, 255, 1);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Haarlinjen mellan gigets namn och var det gar av stapeln. Samma
   avdelare som under sektionsrubriken, bara svagare. */
.upcoming-shows__place {
  align-self: stretch;
  padding-top: 10px;
  border-top: 1px solid rgba(150, 142, 124, 0.2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.upcoming-shows__venue {
  color: rgba(226, 224, 218, 0.86);
  font-size: 0.86rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.upcoming-shows__city {
  color: rgba(210, 206, 198, 0.6);
  font-size: 0.78rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* --- Biljetter -------------------------------------------------- */

/* Samma aterhallna outline som sidans ovriga actions, men mindre: det
   har ar en sekundar handling i en teaser, inte sidans huvudsyfte. */
.upcoming-shows__tickets {
  margin-top: 14px;
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid rgba(197, 190, 172, 0.42);
  color: rgba(244, 243, 239, 0.95);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.6rem;
  font-weight: 700;
  background: rgba(12, 11, 14, 0.7);
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

/* TICKETS och METALGIGS i samma rad. Raden ager avstandet uppat. */
.upcoming-shows__actions {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.upcoming-shows__actions .upcoming-shows__tickets {
  margin-top: 0;
}

.upcoming-shows__tickets:hover {
  background: rgba(17, 15, 20, 0.88);
  border-color: rgba(214, 206, 186, 0.68);
  color: rgba(255, 255, 255, 1);
}

/* --- Installt --------------------------------------------------- */

/*
  Ett installt gig ligger kvar en kort tid hos MetalGigs sa att den som
  redan sett det far veta. Beskedet maste alltsa na fram - men utan
  modern varningsestetik. Affischen tonas ned, titeln stryks over och
  etiketten satts i en dampad, torr plague-rod som hor hemma i paletten.
*/
.upcoming-shows__show--cancelled .upcoming-shows__poster {
  opacity: 0.42;
}

.upcoming-shows__show--cancelled .upcoming-shows__date,
.upcoming-shows__show--cancelled .upcoming-shows__title {
  color: rgba(214, 210, 202, 0.46);
  text-decoration: line-through;
}

.upcoming-shows__status {
  margin-top: 12px;
  padding-top: 8px;
  align-self: stretch;
  border-top: 1px solid rgba(146, 68, 58, 0.42);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.58rem;
  font-weight: 700;
  color: rgba(163, 78, 66, 0.95);
}

/* --- Neutralt besked -------------------------------------------- */

/* Bade den statiska fallbacken och den tomma listan. Ingen affischruta,
   inget datum - det finns inget att visa. */
.upcoming-shows__empty {
  margin: 0;
  color: rgba(214, 210, 202, 0.66);
  font-size: 0.82rem;
}

.upcoming-shows__cta {
  margin-top: 16px;
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid rgba(197, 190, 172, 0.46);
  color: rgba(248, 248, 246, 0.97);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.67rem;
  font-weight: 700;
  background: rgba(12, 11, 14, 0.72);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

/* ---------------------------------------------------------------
   NEWS / SHOWS — responsivt
   Under 860 px staplas kolumnerna. Ornamentet visas alltid i full
   bredd med bevarad 3:1-proportion.
   --------------------------------------------------------------- */

@media (max-width: 860px) {
  .news-shows {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    /* Ornamentet hanger kortare in over skarven i stapelt lage,
       sa rubriken behover mindre luft an pa desktop. */
    padding-top: clamp(0px, 3.6vw, 30px);
  }

  #upcoming-shows {
    margin-top: 0;
    padding-top: 26px;
  }

  /* Uttonad avdelare mellan de staplade sektionerna. Ren CSS, ingen asset.
     I tvakolumnslaget behovs den inte - gapet och rubrikernas linjer racker. */
  #upcoming-shows::before {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    top: 0;
    height: 1px;
    background: linear-gradient(
      to right,
      rgba(158, 150, 132, 0) 0%,
      rgba(158, 150, 132, 0.26) 16%,
      rgba(158, 150, 132, 0.26) 84%,
      rgba(158, 150, 132, 0) 100%
    );
  }
}

@media (max-width: 620px) {
  /* Texturen dampas ytterligare pa liten skarm - texten star tatare
     mot bakgrunden dar och lasbarheten gar fore. */
  .news-shows::before {
    opacity: 0.13;
  }

  .latest-news__card {
    padding: 18px;
  }

  .upcoming-shows__card {
    padding: 18px;
  }
}

/* ---------------------------------------------------------------
   FEATURED VIDEO
   Fristaende sektion direkt mot sidans svarta botten. Inget kort,
   ingen ram runt sektionen, ingen ornamentbg - bara typografi,
   en akta 16:9-yta och en kantig play-markor.
   --------------------------------------------------------------- */

/* Rad 2 i stage-griddet - inte langre en egen fullbreddssektion. */
.featured-video {
  margin: 0;
  padding: 0;
}

/*
  SAMMA INSET SOM NEWS OCH SHOW (FAS 15B-B). Sektionen hade padding 0, sa
  rubriken FEATURED VIDEO borjade 22 px till vanster om LATEST NEWS rakt
  ovanfor och hairlinen under den var 44 px bredare. Nu delar alla fyra
  cellerna samma inset och rubrikerna linjerar i sin kolumn.
*/
.featured-video__inner {
  box-sizing: border-box;
  width: 100%;
  padding: 22px;
}

/* Videoytan. aspect-ratio haller 16:9 pa alla bredder - ingen fast
   hojd, ingen portrattkollaps. Hairline definierar ytan, inget mer. */
.featured-video__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  text-decoration: none;
  background-color: rgba(9, 9, 12, 0.94);
  border: 1px solid rgba(150, 142, 124, 0.24);
  box-shadow: inset 0 0 60px 12px rgba(0, 0, 0, 0.55);
  transition: border-color 160ms ease;
  /* Ramen ar en <button> sedan 11E (och en <div> nar spelaren laddats).
     Knappens UA-stil nollas, och content-box star uttryckligen sa att
     rutan har exakt samma matt som nar den var en lank. */
  box-sizing: content-box;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.featured-video__frame:disabled {
  cursor: default;
}

.featured-video__frame:hover,
.featured-video__frame:focus-visible {
  border-color: rgba(196, 186, 164, 0.42);
}

/* Fokus: en benvit linje innanfor ramen. Den ritas som ett eget lager
   ovanfor thumbnailen - en vanlig outline hade hamnat UNDER bilden, som ar
   positionerad - och andrar varken rutans matt eller grannarnas plats. */
.featured-video__frame:focus-visible {
  outline: none;
}

.featured-video__frame:focus-visible::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 2;
  border: 1px solid rgba(228, 221, 205, 0.7);
  pointer-events: none;
}

/* Thumbnailen fyller rutan. cover beskar bara YouTubes egna svarta kanter
   pa en 4:3-reserv - en 16:9-bild i en 16:9-ruta beskars inte. */
.featured-video__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Diskret morkning sa att den benvita triangeln syns aven mot en ljus
   bild. Ingen gradient, bara en jamn ton - och bara nar en bild finns. */
.featured-video__frame--has-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 8, 0.22);
  pointer-events: none;
}

/* Over en bild far triangeln en tat, mork kant - ingen glow, ingen farg -
   sa att den inte flyter ihop med ett ljust eller fargstarkt motiv. */
.featured-video__frame--has-thumb .featured-video__play {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.9)) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.75));
}

/* Spelaren tar exakt samma ruta som forhandsvisningen. */
.featured-video__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Ingen vald video: en lagmald rad i den morka rutan, ingen play-knapp. */
.featured-video__empty {
  position: absolute;
  inset: 0;
  margin: auto;
  height: max-content;
  text-align: center;
  color: rgba(214, 210, 202, 0.66);
  font-size: 0.82rem;
}

/* Watch Now finns bara nar det finns en video att titta pa. visibility och
   inte display: platsen star kvar, sa att sektionen behaller sin hojd. */
.featured-video:not([data-video-state="ready"]) .featured-video__cta {
  visibility: hidden;
}

/* Kantig play-markor: en naken benvit triangel, inga runda horn. */
.featured-video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-left: clamp(20px, 2.6vw, 30px) solid rgba(228, 221, 205, 0.78);
  border-top: clamp(13px, 1.7vw, 19px) solid transparent;
  border-bottom: clamp(13px, 1.7vw, 19px) solid transparent;
  transition: border-left-color 160ms ease;
  /* Ovanfor thumbnailen och dess morkning. */
  z-index: 1;
}

.featured-video__frame:hover .featured-video__play,
.featured-video__frame:focus-visible .featured-video__play {
  border-left-color: rgba(244, 239, 226, 0.95);
}

/*
  WATCH NOW OCH SHOP NOW ar samma knapp (FAS 15B-B). Rad 2:s tva celler
  hade tidigare var sitt knappsystem - den ena serif i 0.86rem, den andra
  sans i 0.67rem - vilket brot paret. Tickets och View All Shows ar med
  flit KVAR i det mindre systemet: de ar handlingar inne i gigkortet, inte
  cellens egen vag vidare, och i det stora formatet blir View All Shows
  bred nog att dominera kortet.
*/
.featured-video__cta,
.merch__cta {
  margin-top: 18px;
  display: inline-block;
  padding: 11px clamp(18px, 3vw, 30px);
  border: 1px solid rgba(158, 148, 128, 0.5);
  color: rgba(240, 234, 222, 0.95);
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Times New Roman", Georgia, serif;
  letter-spacing: 0.2em;
  font-size: clamp(0.74rem, 1.2vw, 0.86rem);
  font-weight: 700;
  background: rgba(12, 11, 14, 0.72);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

/* ---------------------------------------------------------------
   MERCH — endast strukturellt frikopplad i denna fas.
   Kortets egen design ar oforandrad och designas i en senare fas.
   Det medvetna morka mellanrummet ovanfor ar Featured Videos
   rena avslut - ingen fade, ingen ornamentik.
   --------------------------------------------------------------- */

/* Rad 2 i stage-griddet. Ingen egen maxbredd langre - kolumnen styr.
   Sedan FAS 13B ar cellen en teaser (#latest-merch); hela katalogen ar
   #merch efter The Band. */
#latest-merch {
  margin: 0;
  padding: 0;
}

/*
  Samma barande princip som .latest-news__card och .upcoming-shows__card:
  genomskinligt, utan ram och utan skugga. Teasern var tidigare den enda av
  de fyra cellerna med synlig ytterram, egen gradient och slagskugga utat,
  och last darfor som ett frammande element i gruppen. Rubrikens hairline
  och bildens egen ram bar cellen nu, precis som i de andra tre.
*/
.merch__card {
  padding: 22px;
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: 100%;
}

/*
  TEASERBILDEN (FAS 15A). Platshallaren [Vinyl / Album Product] ar borta;
  har star nu Johnnys egen merchbild.

  NATURLIG RENDERING, INGEN CROP. Bilden ar en komplett scen i 3:2 med egen
  bakgrund - loggan och "Latest Merch" star hogst upp, patchen och skallarna
  langst ned. object-fit: cover hade kapat toppen eller botten beroende pa
  cellens hojd, sa bilden far i stallet behalla sitt eget format och skalas
  bara med kolumnen. Height: auto tillsammans med width/height-attributen i
  HTML:en ger webblasaren mattet direkt, sa cellen inte hoppar nar bilden
  laddas.

  Ramen ar samma hairline som .featured-video__frame, sa att de tva cellerna
  pa rad 2 lases som ett par. Ingen radie och ingen skugga: bilden ar redan
  morkt inramad i sitt eget motiv.
*/
/*
  Samma nedtrappning av insetet pa liten skarm som .latest-news__card och
  .upcoming-shows__card far i sin egen 620-regel. Den star HAR och inte
  daruppe med de andra tva: basreglerna for .featured-video__inner och
  .merch__card kommer senare i filen an det blocket, och skulle med samma
  specificitet vinna over det. Utan den har regeln hamnar rubrikerna pa
  34/34/38/38 px i stapelt lage i stallet for att linjera.
*/
@media (max-width: 620px) {
  .featured-video__inner,
  .merch__card {
    padding: 18px;
  }
}

.merch__image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(150, 142, 124, 0.24);
}

.upcoming-shows__cta:hover,
.featured-video__cta:hover,
.merch__cta:hover {
  background: rgba(17, 15, 20, 0.86);
  border-color: rgba(214, 206, 186, 0.7);
  color: rgba(255, 255, 255, 1);
  transform: translateY(-1px);
}

/* ---------------------------------------------------------------
   VARLDEN FORTSATTER (FAS 13E-B1)
   Samma slimebakgrund som .news-shows::before, fortsatt bakom The Band
   och Merch - samma asset, samma bredd, samma dampning. Stage-lagret
   rors inte: dess bottenfade under bottenornamentet star kvar, och det
   har lagret tonar in fran samma morker strax under.

   VARFOR EGEN RUTSTORLEK OCH INTE cover. Stage-lagret ar cover over en
   hog, smal yta, sa bilden (3:1) blir hojdbunden och forstoras ca
   1.7-3x. Samma cover har hade vaxt med varje ny produkt och zoomat
   upp texturen till suddiga flackar. En fast rutstorlek i stage-skala
   med repeat-y haller samma kornighet hur lang katalogen an blir.
   --------------------------------------------------------------- */

.stage-continuation {
  --slime-tile: 1500px;
  position: relative;
  /* Egen stacking context, sa att lagret nedan (z-index -1) hamnar
     bakom sektionernas innehall men fortfarande over sidans svarta botten. */
  isolation: isolate;
}

/* Exakt samma bredd som stage-texturen: stage-kolumnen minus en gutter
   pa varje sida, centrerad. */
.stage-continuation::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: min(calc(100% - 2 * var(--stage-gutter)), var(--stage-max));
  margin: 0 auto;
  z-index: -1;
  pointer-events: none;
  background-image: url("../images/ornaments/ornamentbg.webp");
  background-repeat: repeat-y;
  background-position: center top;
  background-size: auto var(--slime-tile);
  opacity: 0.2;
  /* Tonar in under bottenornamentet och ut mot footern - samma mjuka
     profil som stage-lagrets kanter, i pixlar sa att den inte glider
     nar ytan vaxer. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.6) 70px,
    rgba(0, 0, 0, 1) 180px,
    rgba(0, 0, 0, 1) calc(100% - 200px),
    rgba(0, 0, 0, 0.5) calc(100% - 80px),
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.6) 70px,
    rgba(0, 0, 0, 1) 180px,
    rgba(0, 0, 0, 1) calc(100% - 200px),
    rgba(0, 0, 0, 0.5) calc(100% - 80px),
    rgba(0, 0, 0, 0) 100%
  );
}

/* I stapelt lage ar stage hogre, och dess textur darmed storre. */
@media (max-width: 860px) {
  .stage-continuation {
    --slime-tile: 1900px;
  }
}

/* Samma extra dampning som stage-lagret pa liten skarm. */
@media (max-width: 620px) {
  .stage-continuation::before {
    opacity: 0.13;
  }
}

/* ---------------------------------------------------------------
   THE BAND (FAS 8C)
   Egen yta EFTER stage-varlden: ingen slime, inget ornament, ingen
   ram. Bandet ska lasa som nasta del av samma sida, inte som ett
   femte kort - darfor samma innehallsbredd och samma rubrikstil som
   sektionerna ovan, men utan kortets panel.
   --------------------------------------------------------------- */

.band {
  max-width: var(--stage-max);
  margin: 0 auto;
  padding: clamp(30px, 4.2vw, 56px) var(--stage-gutter) clamp(18px, 2.6vw, 34px);
}

.band__inner {
  display: grid;
  gap: clamp(14px, 1.8vw, 22px);
}

/*
  FARSOTHKORSET (FAS 14C-A). Bandets egen symbol som dekor i hogerspaltens
  yta, bakom innehallet. Ren dekoration: den ligger i ett ::after och nar
  darfor varken skarmlasare eller markor.

  INGEN 100vw. Forsta forsoket lade korset i sidmarginalen med
  calc((100% - 100vw) / 2), vilket gav horisontell scroll i Firefox -
  100vw raknar in rullningslisten. Symbolen ar darfor ankrad mot sidans
  EGNA hogerkant, vilket bade webblasare renderar likadant.

  ANKRAT I band__content, INTE i hela sektionen. Korset satt forst i
  .band::after och centrerades alltsa i sektionen - da gled det nedat nar
  full bio fallades ut och sektionen blev tre ganger sa hog. Foto- och
  textraden har samma hojd oavsett panelen, sa harifran star symbolen
  stilla. Offsetterna aterger exakt den plats korset hade forut:

  - VERTIKALT: mitten av band__content ligger 50px under den gamla
    mitten (sektionens rubrik och padding drog upp den). Uppmatt till
    samma 50px pa 1280, 1366, 1440, 1600 och 1920 px, sa det ar en
    konstant och inte nagot som behover raknas per bredd.
  - HORISONTELLT: band__content slutar en sidmarginal innanfor sektionens
    padding-box, sa gutter-varden dras av for att na samma hogerkant.

  Doljs under 1280 px: darunder staplas foto och text, och symbolen skulle
  ligga rakt bakom brodtexten i stallet for i en oppen yta.
*/
.band__content {
  position: relative;
}

.band__content::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--stage-gutter) * -1);
  width: clamp(230px, 24vw, 360px);
  aspect-ratio: 1024 / 1536;
  transform: translateY(calc(-50% - 50px));
  z-index: -1;
  pointer-events: none;
  background-image: url("../images/main/farsotkors.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.28;
}

@media (max-width: 1279px) {
  .band__content::after {
    display: none;
  }
}

/*
  BANDET OCH TEXTEN SIDA VID SIDA (14A). Fotot till vanster, presentationen
  till hoger, ungefar 45/55 - bilden ar nastan kvadratisk (1412x1536) och far
  darfor bara halften utan att sektionen blir orimligt hog.

  Under 861 px staplas de, samma brytpunkt som sidans ovriga tvakolumnslagen,
  och fotot kommer forst precis som i DOM-ordningen.
*/
.band__content {
  display: grid;
  gap: clamp(20px, 2.6vw, 40px);
  align-items: start;
}

@media (min-width: 861px) {
  .band__content {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    /* Overkanterna linjerar. Spalten var kortare an fotot i 14A och
       centrerades darfor; med medlemslistan (14B) ar de nastan lika hoga, och
       da ar en fast overkant bade lugnare och stabilare - texten flyttar sig
       inte vertikalt nasta gang innehallet vaxer. */
    align-items: start;
  }
}

/*
  HELA BANDET SYNS. Ingen crop, ingen aspect-ratio och ingen object-fit:
  medlemmarna star anda ut mot bildens kanter, och en kvadratisk ruta hade
  kapat ytterpersonerna. Bilden behaller sitt eget format och skalas bara.
  Ramen ar samma tryckta dubbellinje som produktkorten - inget filter, ingen
  radie, ingen slagskugga: fotot ska synas, inte dekoreras.
*/
.band__photo {
  margin: 0;
  /* Ca 5 px mer luft an fore 2026-10: clamp(8px, 0.8vw, 12px) + 5px. */
  padding: clamp(13px, calc(0.8vw + 5px), 17px);
  border: 1px solid rgba(150, 142, 124, 0.26);
  background: rgba(7, 6, 9, 0.62);
  box-shadow:
    inset 0 0 0 4px rgba(8, 7, 10, 0.55),
    inset 0 0 0 5px rgba(150, 142, 124, 0.11),
    inset 0 0 38px rgba(0, 0, 0, 0.5);
}

.band__photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Staplat lage: fotot far inte bli en halv skarmhojd hogt bara for att
   kolumnen ar bred. */
@media (max-width: 860px) {
  .band__photo {
    max-width: 460px;
  }
}

.band__text {
  min-width: 0;
}

/*
  TEXTEN HAR EN LASBAR RAD, INTE HELA BREDDEN. Stycken, inte en klump:
  presentationen ar tre stycken plus avslutningen.
*/
.band__bio {
  margin: 0;
  max-width: 62ch;
  color: rgba(224, 222, 216, 0.86);
  font-size: clamp(0.95rem, 1.05vw, 1.02rem);
  line-height: 1.62;
}

.band__bio + .band__bio {
  margin-top: 0.9em;
}

/* Albumtitlar. <cite> ar elementet for ett verks titel; kursiven ar den
   typografiska konventionen for skivtitlar. */
.band__bio cite {
  font-style: italic;
  color: rgba(244, 240, 230, 0.94);
}

/* "Stay brutal." - bandets egen avslutning. Serif-versaler som sidans
   rubriker, men liten: en signatur, inte en slogan. */
.band__signoff {
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  font-family: "Times New Roman", Georgia, serif;
  color: rgba(228, 221, 205, 0.82);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.74rem;
  font-weight: 700;
}

/*
  FAKTARADEN. Presentationsort och presentationsgenre, avdelade av samma
  tunna linje som storlekarna i merchkorten. Listan ligger en avdelarbredd
  till vanster och klipps tillbaka, sa att linjen framfor det forsta faltet
  pa VARJE rad forsvinner - ocksa nar raden bryts pa mobil.
*/
.band__facts {
  margin: clamp(16px, 1.8vw, 22px) 0 0 -12px;
  padding: 11px 0 0;
  border-top: 1px solid rgba(150, 142, 124, 0.2);
  clip-path: inset(0 0 0 12px);
  display: flex;
  flex-wrap: wrap;
  row-gap: 4px;
}

.band__fact {
  padding: 0 11px;
  border-left: 1px solid rgba(150, 142, 124, 0.34);
  color: rgba(212, 212, 212, 0.78);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.6;
  text-transform: uppercase;
}

/*
  MEDLEMMARNA (14B). En tryckt roster, inte fem kort: namn till vanster,
  roll till hoger och en haarlinje mellan raderna - samma tunna linjer som
  faktaraden och sektionsrubrikerna anvander. Ingen ram, ingen ruta, ingen
  bakgrund; listan vilar direkt pa slimen som resten av spalten.
*/
.band__members {
  margin: clamp(18px, 2vw, 26px) 0 0;
}

/* Tydligare an brodtext, klart mindre an THE BAND. Samma serif-versaler
   som sidans ovriga rubriker. */
.band__members-title {
  margin: 0 0 4px;
  font-family: "Times New Roman", Georgia, serif;
  color: rgba(228, 221, 205, 0.82);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.76rem;
  font-weight: 700;
}

.band__members-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
  Namnet till vanster, rollen i en egen kolumn som borjar vid radens mitt.
  Tva lika breda kolumner i stallet for space-between: rollerna hamnar da
  nara namnen OCH linjerar under varandra, i stallet for att flyta ut mot
  spaltens ytterkant dar de tappade kontakten med sitt namn.
*/
.band__member {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
  padding: 7px 0;
  border-top: 1px solid rgba(150, 142, 124, 0.16);
}

/* Namnet ar radens primara uppgift: samma benvita serif som titlarna. */
.band__member-name {
  font-family: "Times New Roman", Georgia, serif;
  color: rgba(240, 236, 226, 0.92);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

/* Rollen ar metadata - dovare och mindre, som faktaraden. */
.band__member-role {
  color: rgba(210, 206, 198, 0.62);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* De tva sekundara vagarna vidare pa samma rad. Radens egen marginal ar
   den lanken hade forut, sa dess plats ar oforandrad; pa smal skarm
   radbryts de i stallet for att krympa. */
.band__actions {
  margin: clamp(14px, 1.8vw, 20px) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px clamp(18px, 2vw, 26px);
}

.band__actions .band__link {
  margin-top: 0;
}

/* Sekundar: en textlank, inte en knapp. De ifyllda CTA-knapparna hor
   till sidans egna handlingar (Read More, Watch Now, Shop Now). */
.band__link {
  display: inline-block;
  margin-top: clamp(14px, 1.8vw, 20px);
  color: rgba(205, 205, 200, 0.72);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(150, 142, 124, 0.34);
  padding-bottom: 2px;
  transition: color 140ms ease, border-color 140ms ease;
}

.band__link:hover {
  color: rgba(248, 248, 246, 0.95);
  border-bottom-color: rgba(197, 190, 172, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .band__link {
    transition: none;
  }
}

/* Knappen ar en <button> men ska lasa som lanken bredvid: UA-stilarna nollas
   och .band__link bar farg, storlek och understrykning. */
.band__disclosure {
  font-family: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(150, 142, 124, 0.34);
  padding: 0 0 2px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.band__disclosure-arrow {
  margin-left: 8px;
}

/* Tangentbordsfokus: samma benvita linje som videorutans fokuslage. */
.band__disclosure:focus-visible {
  outline: 1px solid rgba(228, 221, 205, 0.7);
  outline-offset: 4px;
}

/* ---------------------------------------------------------------
   FULL BIOGRAPHY (FAS 14C)
   Hela bandhistoriken i full bredd under foto- och textspalten. Ingen
   ruta och ingen ljus panel - bara en haarlinje, luft och typografi,
   som resten av sidan. Falls ihop av assets/js/band-bio.js.
   --------------------------------------------------------------- */

/* min-width: 0 - faktadelens auto-fit-grid raknar annars sina kolumner mot
   max-width nedan och spranger band__inners auto-spar pa smal skarm. */
.band__full {
  min-width: 0;
  margin: clamp(26px, 3vw, 40px) 0 0;
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid rgba(150, 142, 124, 0.2);
}

.band__full[hidden] {
  display: none;
}

/*
  CENTRERAD INNEHALLSYTA (FAS 17A). Panelens haarlinje ovan gar kvar i full
  bredd som overgang fran medlemslistan, men rubrik, text och faktadel delar
  en centrerad spalt. Det ar BEHALLAREN som centreras - brodtexten star kvar
  vansterstalld. Sidmarginalerna kommer fran sektionens egen gutter.
*/
.band__full-head,
.band__full-text,
.band__credits-block {
  max-width: 820px;
  margin-inline: auto;
}

/*
  THE STORY OF FARSOTH. Samma serif-versaler som sidans h2:or, ett steg
  under THE BAND. Underrubriken ar dov metadata i samma stil som faktaraden.
*/
.band__full-head {
  margin-bottom: clamp(22px, 2.6vw, 30px);
}

.band__full-title {
  margin: 0;
  font-family: "Times New Roman", Georgia, serif;
  color: rgba(232, 226, 212, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: clamp(0.98rem, 1.25vw, 1.12rem);
  font-weight: 700;
}

.band__full-subtitle {
  margin: 8px 0 0;
  color: rgba(212, 206, 190, 0.62);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.6;
  text-transform: uppercase;
}

/* Sliten avdelare: samma haarlinjefarg som resten av sidan, uttonad mot
   andarna och bruten av en gles mask, sa att den ser tryckt och nott ut i
   stallet for ritad med linjal. Ingen bildfil. */
.band__full-head::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: clamp(14px, 1.6vw, 18px);
  background: linear-gradient(
    90deg,
    rgba(150, 142, 124, 0.42),
    rgba(150, 142, 124, 0.3) 55%,
    rgba(150, 142, 124, 0)
  );
  -webkit-mask-image: repeating-linear-gradient(
    90deg,
    #000 0 37px,
    rgba(0, 0, 0, 0.35) 37px 41px,
    #000 41px 89px,
    rgba(0, 0, 0, 0.55) 89px 92px,
    #000 92px 131px
  );
  mask-image: repeating-linear-gradient(
    90deg,
    #000 0 37px,
    rgba(0, 0, 0, 0.35) 37px 41px,
    #000 41px 89px,
    rgba(0, 0, 0, 0.55) 89px 92px,
    #000 92px 131px
  );
}

/* Spalten begransar radlangden, sa styckena behover inget eget tak. */
.band__full-text p {
  margin: 0;
  color: rgba(230, 225, 214, 0.86);
  font-size: 1.03rem;
  line-height: 1.7;
}

.band__full-text p + p {
  margin-top: 1.3em;
}

@media (max-width: 620px) {
  .band__full-text p {
    font-size: 0.98rem;
    line-height: 1.66;
  }

  .band__full-text p + p {
    margin-top: 1.15em;
  }
}

.band__full-text cite {
  font-style: italic;
  color: rgba(244, 240, 230, 0.94);
}

.band__full-text .band__signoff {
  margin-top: clamp(14px, 1.6vw, 20px);
}

/*
  FAKTADELEN. Grupperna delar bredden nar det finns plats och staplar nar
  det inte gor det; bandlistan tar alltid hela raden.
*/
.band__credits-block {
  margin: clamp(26px, 3vw, 38px) auto 0;
  padding-top: clamp(18px, 2vw, 26px);
  border-top: 1px solid rgba(150, 142, 124, 0.18);
  display: grid;
  gap: clamp(18px, 2.2vw, 28px) clamp(24px, 3vw, 44px);
  /* Tva kolumner i den centrerade spalten (17A): fyra grupper blir 2 x 2
     i stallet for tre plus en ensam. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.band__factgroup--wide {
  grid-column: 1 / -1;
}

.band__factgroup-title {
  margin: 0 0 8px;
  font-family: "Times New Roman", Georgia, serif;
  color: rgba(212, 206, 190, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.7rem;
  font-weight: 700;
}

.band__credits {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Samma rad som medlemslistan ovan: namn till vanster, uppgiften bredvid. */
.band__credit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid rgba(150, 142, 124, 0.14);
}

.band__credit-name {
  font-family: "Times New Roman", Georgia, serif;
  color: rgba(240, 236, 226, 0.9);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.band__credit-role {
  color: rgba(210, 206, 198, 0.62);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.band__credit-role cite {
  font-style: italic;
  letter-spacing: 0.06em;
  text-transform: none;
  color: rgba(226, 220, 206, 0.78);
}

/* Banden som en rad, avdelade av samma haarlinje som faktaraden ovan - och
   med samma klippning, sa att linjen framfor radens forsta namn forsvinner
   ocksa nar raden bryts. */
.band__bands {
  list-style: none;
  margin: 0 0 0 -12px;
  padding: 0;
  clip-path: inset(0 0 0 12px);
  display: flex;
  flex-wrap: wrap;
  row-gap: 4px;
}

.band__bands li {
  padding: 0 11px;
  border-left: 1px solid rgba(150, 142, 124, 0.3);
  color: rgba(222, 218, 208, 0.78);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.7;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------
   UPCOMING SHOWS (#shows)
   Hela kalendern fran MetalGigs, direkt efter The Band. Samma bredd,
   gutter och h2 som grannarna, och samma kort som teasern i news-shows:
   korten ar .upcoming-shows__show med teaserns ram, sa affisch,
   typografi, status och knappar delas i stallet for att skrivas om.
   --------------------------------------------------------------- */

.shows {
  max-width: var(--stage-max);
  margin: 0 auto;
  padding: clamp(30px, 4.2vw, 56px) var(--stage-gutter) clamp(18px, 2.6vw, 34px);
}

/* Samma besked-ton som teaserns tomma lage. */
.shows__status {
  margin: 0;
  color: rgba(214, 210, 202, 0.66);
  font-size: 0.82rem;
}

/*
  Flex och inte grid: en rad som inte fylls (ett ensamt gig, eller det
  sista av ett udda antal) centreras av justify-content i stallet for att
  hamna i vanster kolumn. Korten har fast andel av bredden, sa ett
  ensamt kort far samma storlek som ett i en full rad.

  min-width: 0 later en lang titel brytas i stallet for att trycka kortet
  bredare an sin andel och ge sidan horisontell scroll.
*/
.shows__list {
  --shows-gap: clamp(14px, 1.6vw, 20px);
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--shows-gap);
}

.shows__list > li {
  flex: 0 0 100%;
  min-width: 0;
}

/* Tva kort per rad pa bred skarm, last radvis - narmaste gig forst. */
@media (min-width: 1000px) {
  .shows__list > li {
    flex-basis: calc((100% - var(--shows-gap)) / 2);
  }
}

/* Teaserpanelens tryckta dubbellinje, nu runt varje kort. */
.shows__card {
  box-sizing: border-box;
  height: 100%;
  padding: clamp(16px, 1.5vw, 21px);
  border: 1px solid rgba(150, 142, 124, 0.32);
  background: rgba(8, 7, 10, 0.5);
  box-shadow:
    inset 0 0 0 4px rgba(8, 7, 10, 0.55),
    inset 0 0 0 5px rgba(150, 142, 124, 0.13),
    inset 0 0 38px rgba(0, 0, 0, 0.5);
}

/* Affischen ovanfor uppgifterna pa mobil. Bredden ar tak, inte mal:
   en 4:5-affisch over hela telefonbredden hade tryckt ned allt annat. */
@media (max-width: 620px) {
  .shows__card {
    flex-direction: column;
  }

  .shows__card .upcoming-shows__poster {
    width: min(100%, 220px);
  }

  .shows__card .upcoming-shows__info {
    align-self: stretch;
  }
}

/* ---------------------------------------------------------------
   MEDIA (FAS 16B)
   Releases, Videos och Photos. Egen yta mellan The Band och Merch,
   inuti .stage-continuation - slimen bakom kommer darifran, har finns
   ingen egen bakgrund. Samma bredd, gutter och h2 som grannarna.

   EGET NAMNRUM: .media__*, .releases__*, .videos__*, .photos__*.
   Featured Video i 2x2-griddet ager .featured-video__*, och de tva far
   aldrig dela regler.

   REDAKTIONELL UPPSTALLNING. Pa bred skarm star varje dels rubrik i en
   smal vansterspalt och innehallet i en bred hogerspalt, som ett
   innehallsregister i ett skivhaften. Det skiljer Media fran 2x2-griddet
   ovanfor och fran The Bands foto/text-par, utan kort, ramar eller ny
   ornamentik. Under 861 px staplas rubrik och innehall.

   I denna fas bara skalet: rubriker, statusrader och dolda, tomma
   listor. Stage, rail och collage far sin form nar det finns innehall.
   --------------------------------------------------------------- */

.media {
  max-width: var(--stage-max);
  margin: 0 auto;
  padding: clamp(30px, 4.2vw, 56px) var(--stage-gutter) clamp(18px, 2.6vw, 34px);
}

/* Varje del avdelas fran den forra med samma svaga hairline som Full
   biography. Den forsta delen star direkt under h2:ans egen linje och far
   ingen egen - annars dubbla linjer. */
.media__part {
  display: grid;
  gap: clamp(10px, 1.4vw, 16px) clamp(24px, 3vw, 44px);
  padding: clamp(6px, 0.8vw, 10px) 0 clamp(8px, 1vw, 14px);
}

.media__part + .media__part {
  margin-top: clamp(22px, 3vw, 40px);
  padding-top: clamp(20px, 2.6vw, 34px);
  border-top: 1px solid rgba(150, 142, 124, 0.2);
}

@media (min-width: 861px) {
  .media__part {
    grid-template-columns: minmax(9rem, 2fr) minmax(0, 10fr);
    align-items: start;
  }
}

/* Delens rubrik: tydligt under MEDIA, tydligt over Latest Release. Samma
   serif-versaler som sidans ovriga rubriker. */
.media__part-title {
  font-family: "Times New Roman", Georgia, serif;
  color: rgba(232, 226, 212, 0.88);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: clamp(0.88rem, 1.1vw, 1rem);
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* minmax(0, ...) i kolumnen och min-width har: en framtida rail med
   overflow-x far aldrig trycka ut sidan. */
.media__part-body {
  min-width: 0;
}

/* Etikett inom en del (Latest Release, Previous Releases). Samma familj
   som faktagruppernas rubriker i The Band. */
.media__label {
  margin: 0 0 8px;
  font-family: "Times New Roman", Georgia, serif;
  color: rgba(212, 206, 190, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.7rem;
  font-weight: 700;
}

.releases__previous {
  margin-top: clamp(18px, 2.2vw, 28px);
}

/* Samma besked-ton som Merch och Upcoming Shows tomma lagen. */
.media__status {
  margin: 0;
  color: rgba(214, 210, 202, 0.66);
  font-size: 0.82rem;
}

/* Text for skarmlasare som inte syns - t.ex. att en lank oppnas i ny flik. */
.media__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
  RELEASES (FAS R2, R2B). Skivomslag i mork ram, serif-versaler och benvita
  hairlines - samma vokabular som Videos och Photos, inga kort, ingen
  butiksestetik. Fylls av assets/js/releases.js.

  EN ALBUMLAYOUT FOR ALLA. Varje fullangdare - kommande som utgiven - star
  likadant: stort omslag till vanster, statusrad, titel och albumets singlar
  till hoger. Under 700 px staplas omslag och text.

  SINGLARNA ar mindre omslag i ett rutnat med tre kolumner, samma kort under
  ett album och bland de fristaende. Aldrig klickbara.

  OMSLAGEN ar kvadratiska och star i en kvadratisk ruta med contain - de
  beskars eller forvrangs aldrig.

  ACCENTEN. Dov plague-rod (samma ton som installda gig) i statusraden och
  en hairline langs albumets vanstra kant: tydlig for kommande, diskretare
  for utgivna.
*/
.releases {
  --release-album: 360px;
  --release-single: 150px;
}

/* Releases rubrikspalt ar nagot smalare an grannarnas (R2C): albumen
   borjar ca 35 px langre till vanster vid 1440 px. Rubriken star kvar. */
@media (min-width: 861px) {
  .releases.media__part {
    grid-template-columns: minmax(9rem, 1.65fr) minmax(0, 10.35fr);
  }
}

.releases__previous[hidden],
.releases [data-releases-status][hidden] {
  display: none;
}

.releases__frame {
  display: block;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  background-color: rgba(9, 9, 12, 0.94);
  border: 1px solid rgba(150, 142, 124, 0.3);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

.releases__cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Klickbart album: samma dampade lyft som fotonas oppna-knapp. */
.releases__open {
  cursor: pointer;
  color: inherit;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 140ms ease;
}

.releases__open .releases__cover {
  filter: brightness(0.94);
  transition: filter 160ms ease;
}

.releases__open:hover {
  border-color: rgba(228, 221, 205, 0.7);
}

.releases__open:hover .releases__cover {
  filter: brightness(1.04);
}

.releases__open:focus-visible {
  outline: 2px solid rgba(236, 230, 216, 0.95);
  outline-offset: 3px;
}

.releases__title,
.releases__album-title {
  margin: 0;
  font-family: "Times New Roman", Georgia, serif;
  color: rgba(240, 236, 226, 0.92);
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.releases__title {
  font-size: clamp(0.76rem, 0.95vw, 0.9rem);
  letter-spacing: 0.02em;
}

.releases__meta {
  margin: 4px 0 0;
  color: rgba(205, 205, 200, 0.62);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* Statusraden: samma dova plague-rod som installda gig. */
.releases__badge {
  margin: 0 0 6px;
  color: rgba(176, 84, 70, 0.98);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* --- Albumet ---------------------------------------------------- */

.releases__album {
  display: grid;
  gap: clamp(14px, 2vw, 20px);
  padding-left: clamp(12px, 1.6vw, 20px);
  border-left: 1px solid rgba(146, 68, 58, 0.55);
}

.releases__album--released {
  border-left-color: rgba(146, 68, 58, 0.28);
}

.releases__album--released .releases__album-text > .releases__badge {
  color: rgba(176, 84, 70, 0.72);
}

.releases__album + .releases__album,
.releases__album + .releases__loose,
.releases__loose + .releases__album {
  margin-top: clamp(30px, 4vw, 52px);
}

/*
  FRISTAENDE SINGLAR mellan albumen (R2C): samma kolumner och samma indrag
  som ett album, men tom omslagsspalt - singelrutnatet hamnar i den hogra
  innehallskolumnen, i samma storlek som albumens singlar. Ingen synlig
  kantlinje: de hor inte till nagot album.
*/
.releases__loose {
  display: grid;
  padding-left: clamp(12px, 1.6vw, 20px);
  border-left: 1px solid transparent;
}

/* Inramad av samma hairline som under albumtitlarna (R2D), ovan och under,
   bara over singelkolumnen. */
.releases__loose > .releases__singles {
  padding: clamp(16px, 2vw, 22px) 0;
  border-top: 1px solid rgba(150, 142, 124, 0.2);
  border-bottom: 1px solid rgba(150, 142, 124, 0.2);
}

@media (min-width: 700px) {
  .releases__loose {
    grid-template-columns: var(--release-album) minmax(0, 1fr);
    column-gap: clamp(14px, 2vw, 20px);
  }

  .releases__loose > .releases__singles {
    grid-column: 2;
  }
}

.releases__album > .releases__frame {
  max-width: var(--release-album);
}

.releases__album-title {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.releases__album-text {
  min-width: 0;
}

.releases__album-text > .releases__meta {
  margin-top: 8px;
}

@media (min-width: 700px) {
  .releases__album {
    grid-template-columns: var(--release-album) minmax(0, 1fr);
    align-items: center;
  }
}

/* --- Singlarna --------------------------------------------------- */

.releases__singles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px 16px;
  grid-template-columns: repeat(3, minmax(0, var(--release-single)));
}

.releases__album-text > .releases__singles {
  margin-top: clamp(18px, 2.4vw, 26px);
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid rgba(150, 142, 124, 0.2);
}

.releases__single {
  min-width: 0;
}

.releases__single > .releases__frame {
  margin-bottom: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.releases__single .releases__meta,
.releases__single .releases__badge {
  font-size: 0.58rem;
  letter-spacing: 0.12em;
}

.releases__single .releases__badge {
  margin: 2px 0 0;
}

/* Under 700 px delar singlarna bredden lika - tre i bredd. */
@media (max-width: 699px) {
  .releases__singles {
    gap: 16px 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .releases__open,
  .releases__open .releases__cover {
    transition: none;
  }
}

/*
  WEBSITE VIDEOS - SCEN OCH RAIL (FAS 16I).

  En stor 16:9-scen for den valda videon och en rail under - en mork
  filmremsa, inte ett kortrutnat. Samma vokabular som resten av sidan:
  morkt papper, tunna benvita linjer, serif-versaler, ingen YouTube-rod.
  Eget namnrum: Featured Video i 2x2-griddet ager .featured-video__*, och
  de tva delar inga regler.

  SCENEN BEHALLER SITT FOTAVTRYCK. aspect-ratio ar 16:9 fore och efter Play:
  facaden och spelaren fyller exakt samma ruta, sa inget flyttar sig nar
  iframen tar over.
*/
/*
  CENTRERAD KOLUMN (FAS 17C, 17C-1). Rubrikerna VIDEOS och PHOTOS star
  kvar dar RELEASES har sin; videons scen, titel och rail - och fotonas
  collage - delar en kolumn pa hogst 880 px, centrerad over hela
  Media-bredden. Kolumnen spanner darfor bada gridspalterna och hamnar pa en
  egen rad under rubriken - pa samma rad hade den overlappat rubrikspalten.
  Collaget ar proportionellt och behaller sin komposition i den bredden.
*/
.videos .media__part-body,
.photos .media__part-body {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 880px;
  justify-self: center;
}

.videos__stage {
  display: grid;
  gap: clamp(10px, 1.2vw, 14px);
}

.videos__screen {
  position: relative;
  /* border-box: ramen ligger INOM kolumnens bredd, inte 2 px utanfor. */
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: rgba(9, 9, 12, 0.94);
  border: 1px solid rgba(150, 142, 124, 0.24);
  box-shadow: inset 0 0 60px 12px rgba(0, 0, 0, 0.55);
}

/*
  hqdefault ar 4:3 med svarta balkar ovan och under bilden. cover i en
  16:9-ruta skar bort just balkarna, inte motivet. Tonen dampas mot sidans
  sepia i stallet for YouTubes mattade farger.
*/
.videos__thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.35) sepia(0.12) brightness(0.82);
}

/* Samma jamna dampning som Featured Videos tumnagel - bara nar en bild finns. */
.videos__screen--has-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 6, 8, 0.72) 0%, rgba(6, 6, 8, 0.18) 55%, rgba(6, 6, 8, 0.1) 100%);
  pointer-events: none;
}

.videos__player,
.videos__screen iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Atgarden ligger nere till vanster over tumnageln, som en graverad etikett. */
.videos__actions {
  position: absolute;
  left: clamp(12px, 2vw, 22px);
  right: clamp(12px, 2vw, 22px);
  bottom: clamp(12px, 2vw, 20px);
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

/*
  PLAY VIDEO och WATCH ON YOUTUBE ar samma knappform: en ram i benvitt pa
  mork botten, serif-versaler. Inga rundade horn, ingen glans, ingen rod.
*/
.videos__action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 16px;
  background: rgba(8, 8, 10, 0.78);
  border: 1px solid rgba(228, 221, 205, 0.55);
  color: rgba(240, 236, 226, 0.94);
  font-family: "Times New Roman", Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.videos__action:hover,
.videos__action:focus-visible {
  border-color: rgba(244, 239, 226, 0.95);
  background: rgba(8, 8, 10, 0.92);
}

.videos__action:focus-visible,
.videos__pick:focus-visible {
  outline: 1px solid rgba(228, 221, 205, 0.7);
  outline-offset: 3px;
}

.videos__action[disabled] {
  cursor: progress;
  opacity: 0.7;
}

/* Samma benvita triangel som Featured Videos play-markor, i mindre skala. */
.videos__play-icon {
  width: 0;
  height: 0;
  border-left: 11px solid rgba(228, 221, 205, 0.9);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

/* Extern lank: en diskret pil som bara ar dekor. */
.videos__action--watch::after {
  content: "\2197";
  font-family: Arial, sans-serif;
  letter-spacing: 0;
}

/* Fallbackens besked: en lugn rad, inte ett felmeddelande. */
.videos__note {
  margin: 0;
  color: rgba(214, 210, 202, 0.78);
  font-size: 0.8rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Den valda videons titel, under scenen. Langa titlar bryts. */
.videos__now {
  margin: 0;
  font-family: "Times New Roman", Georgia, serif;
  color: rgba(240, 236, 226, 0.92);
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/*
  RAILEN (18A). Tre videor at gangen, ingen scroll: fler an tre bladdras
  med pilarna i .videos__browse, en position per klick. De dolda videorna
  bar hidden. Railen ar alltid exakt sin kolumns bredd och kan aldrig ge
  sidan horisontell overflow.
*/
.videos__rail {
  list-style: none;
  margin: clamp(16px, 2vw, 22px) 0 0;
  padding: 0;
  display: flex;
  gap: clamp(10px, 1.4vw, 16px);
  min-width: 0;
}

.videos__rail[hidden],
.videos__item[hidden] {
  display: none;
}

/* Tre delar bredden jamnt. Taket hindrar en eller tva videor fran att bli
   lika stora som scenen. */
.videos__item {
  flex: 1 1 0;
  min-width: 0;
  max-width: 320px;
}

/* Pilarna och railen pa en rad. Railens toppmarginal flyttas till raden. */
.videos__browse {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 1.2vw, 14px);
  margin: clamp(16px, 2vw, 22px) 0 0;
}

.videos__browse .videos__rail {
  margin: 0;
}

/*
  GLIDNINGEN (18D). Fonstret klipper, railen glider med transform: ett steg
  ar en tredjedel av fonstret plus ett mellanrum. Sjalva transform satts
  inline av website-videos.js. Ett varv runt (--rewind) ar en langre glidning forbi
  alla videor. padding/margin ger fokusramen plats inom klippningen.
*/
.videos__viewport {
  min-width: 0;
  overflow: hidden;
  padding: 4px;
  margin: -4px;
}

.videos__browse .videos__rail {
  --rail-gap: clamp(10px, 1.4vw, 16px);
  gap: var(--rail-gap);
  transition: transform 250ms ease-out;
}

.videos__browse .videos__rail--rewind {
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
}

.videos__browse .videos__item {
  flex: 0 0 calc((100% - 2 * var(--rail-gap)) / 3);
  max-width: none;
}

/* Dubbla serif-pilar, « och », utan ram (18C). Dampad benvit som vilar,
   ljusare vid hover och fokus. Klickytan ar hela den osynliga knappen. */
.videos__nav {
  display: grid;
  place-items: center;
  width: 44px;
  height: 56px;
  margin: 0;
  padding: 0 0 0.12em;
  background: none;
  border: 0;
  color: rgba(214, 206, 188, 0.55);
  font-family: "Times New Roman", Georgia, serif;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: color 140ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.videos__nav:hover,
.videos__nav:focus-visible {
  color: rgba(244, 239, 226, 0.95);
}

.videos__nav:focus-visible {
  outline: 1px solid rgba(228, 221, 205, 0.7);
  outline-offset: -2px;
}

.videos__pick {
  display: grid;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 0 0 4px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 140ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.videos__pick:hover,
.videos__pick[aria-current="true"] {
  opacity: 1;
}

.videos__pick-frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: rgba(9, 9, 12, 0.94);
  border: 1px solid rgba(150, 142, 124, 0.24);
}

/*
  VALD: inte bara farg. Ramen blir tjock och benvit, en markering lagger sig
  over bildens overkant - och de ovriga ar tydligt nedtonade.
*/
.videos__pick[aria-current="true"] .videos__pick-frame {
  border-color: rgba(236, 230, 216, 0.9);
  box-shadow: inset 0 0 0 1px rgba(236, 230, 216, 0.9);
}

.videos__pick[aria-current="true"] .videos__pick-frame::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  z-index: 1;
  background: rgba(236, 230, 216, 0.95);
}

.videos__pick-title {
  font-family: "Times New Roman", Georgia, serif;
  color: rgba(240, 236, 226, 0.92);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@media (max-width: 620px) {
  .videos__nav {
    width: 32px;
    height: 48px;
    font-size: 1.6rem;
  }

  .videos__pick-title {
    font-size: 0.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .videos__action,
  .videos__nav,
  .videos__pick,
  .videos__browse .videos__rail {
    transition: none;
  }
}

/*
  PHOTOS - REDAKTIONELLT COLLAGE (FAS 16K).

  Ett uppslag, inte ett rutnat: en stor huvudbild och de ovriga i ett
  asymmetriskt men komponerat monster. Bilderna behaller sina egna
  proportioner - width 100 %, height auto, ingen beskarning - och ramas in
  med samma hairline som Media i ovrigt. Ingen tonning: fotona ar redan
  behandlade av fotografen.

  ALLT AR KLASSER, INGA ID:N. photos.js satter --lead pa forsta bilden och
  en orienteringsklass pa varje bild; placeringen foljer av dem och av
  rutnatets automatiska flode. Ingen grid-area och ingen dense-packning: DOM-
  ordningen ar laseordningen.

  UPPSLAGET (fran 700 px), 24 kolumner:
    - huvudbilden tar 16 kolumner och tva rader
    - de tva nasta staplas av sig sjalva i den hogra 8-kolumnsspalten
      bredvid - med sidans verkliga bilder (0,92 bredvid 1,40 + 0,70) blir
      spalten nastan exakt lika hog som huvudbilden
    - darefter: staende 8 kolumner, liggande 12, bred (>= 1,6) 16
    - en bred bild foljd av en staende blir 17 + 7: sa nara lika hoga de
      kan bli utan att nagon av dem beskars
  24 kolumner och inte 12 just for det sista: 8 + 4 lamnade ett hal pa over
  hundra pixlar under den breda bilden. Uppslaget ar proportionellt och
  skalar ned till surfplattebredd utan att bli trangt; under 700 px gar
  collaget over till en kolumn.

  Faller ett annat antal bilder ut blir raderna ojamnare, men ingenting
  overlappar och inget hamnar ur ordning.
*/
.photos__collage {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(10px, 1.4vw, 16px);
  align-items: start;
}

/* display: grid ovan hade annars vunnit over [hidden]. */
.photos__collage[hidden],
.photos__credit[hidden] {
  display: none;
}

.photos__item {
  margin: 0;
  min-width: 0;
}

.photos__img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  background-color: rgba(9, 9, 12, 0.94);
  border: 1px solid rgba(150, 142, 124, 0.24);
}

/* En bild som inte laddade: en mork yta i bildens format i stallet for ett
   trasig-bild-tecken. */
.photos__item--failed {
  aspect-ratio: var(--photo-ratio);
  background-color: rgba(9, 9, 12, 0.94);
  border: 1px solid rgba(150, 142, 124, 0.24);
}

.photos__item--failed .photos__img {
  display: none;
}

/*
  FASTA BILDPLATSER (FAS B1). De sju forsta bilderna far platsens format,
  inte sitt eget: rutan ager proportionen och bilden fyller den med cover.
  Proportionerna ar sidans verkliga bilder, avrundade - med dagens foton ar
  utsnittet under en procent, och en ny bild pa samma plats rubbar inte
  collaget. Gallar aven i en kolumn under 700 px.

  Knappen och bilden ligger absolut i rutan, sa att bildens egna matt aldrig
  far driva rutans hojd. Utsnittet ar bara visning: --photo-focus (satt av
  photos.js, mitten som standard) styr vad som syns, filen ar orord och
  lightboxen visar hela bilden. Ingen overflow: hidden pa rutan - den hade
  klippt knappens fokusram.

  Ligger efter --failed med flit: en bild som inte laddade behaller
  platsens format, inte sitt eget.
*/
.photos__item--slot {
  position: relative;
  aspect-ratio: var(--slot-ratio);
}

.photos__item--slot-1 { --slot-ratio: 0.92; }
.photos__item--slot-2 { --slot-ratio: 1.4; }
.photos__item--slot-3 { --slot-ratio: 0.7; }
.photos__item--slot-4 { --slot-ratio: 1.78; }
.photos__item--slot-5 { --slot-ratio: 0.67; }
.photos__item--slot-6 { --slot-ratio: 1.4; }
.photos__item--slot-7 { --slot-ratio: 1.4; }

.photos__item--slot .photos__open,
.photos__item--slot > .photos__img {
  position: absolute;
  inset: 0;
  height: 100%;
}

.photos__item--slot .photos__img {
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-focus, 50% 50%);
}

/*
  ZOOM OCH RAM (FAS B6). Samma teknik som MetalGigs Photo Manager och
  bandsidans pressbild: object-position OCH transform-origin i fokuspunkten,
  och scale(zoom / 100). Samma punkt i bada, annars glider fokus nar bilden
  zoomas - och samma tre egenskaper som kontrollpanelen, sa att utsnittet ar
  detsamma dar och har.

  Knappen ar ramen: overflow: hidden haller en inzoomad bild inom platsen.
  Hairline-kanten flyttar darfor fran bilden till knappen - pa bilden hade den
  skalats upp och klippts bort vid zoom. Fokusramen ritas fortfarande: ett
  elements egen overflow klipper aldrig dess outline.
*/
.photos__item--slot .photos__open {
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid rgba(150, 142, 124, 0.24);
  background-color: rgba(9, 9, 12, 0.94);
  transition: border-color 160ms ease;
}

.photos__item--slot .photos__open .photos__img {
  border: 0;
  transform: scale(var(--photo-zoom, 1));
  transform-origin: var(--photo-focus, 50% 50%);
}

.photos__item--slot .photos__open:hover {
  border-color: rgba(228, 221, 205, 0.55);
}

/* En gemensam credit, bara nar alla bilder har samma. Liten och sist. */
.photos__credit {
  margin: clamp(10px, 1.2vw, 14px) 0 0;
  color: rgba(205, 205, 200, 0.62);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Uppslaget. Specificiteten stiger med rollen: orientering < bred bredvid
   staende < huvudbildens sidospalt < huvudbilden sjalv. */
@media (min-width: 700px) {
  .photos__collage {
    grid-template-columns: repeat(24, minmax(0, 1fr));
  }

  .photos__item--portrait,
  .photos__item--square {
    grid-column: span 8;
  }

  .photos__item--landscape {
    grid-column: span 12;
  }

  .photos__item--wide {
    grid-column: span 16;
  }

  /* Bred bild direkt foljd av en staende: 17 + 7 ger nastan samma hojd. */
  .photos__item--wide:has(+ .photos__item--portrait) {
    grid-column: span 17;
  }

  .photos__item--wide + .photos__item--portrait {
    grid-column: span 7;
  }

  /* De tva bilderna direkt efter huvudbilden bildar dess sidospalt -
     oavsett orientering, sa att uppslaget alltid ar 16 + 8. */
  .photos__collage > .photos__item--lead + .photos__item,
  .photos__collage > .photos__item--lead + .photos__item + .photos__item {
    grid-column: span 8;
  }

  .photos__collage > .photos__item.photos__item--lead {
    grid-column: span 16;
    grid-row: span 2;
  }

  /*
    Platserna ager uppslaget nar de finns: samma 16 + 8 / 8, 17 + 7 och
    12 + 12 som orienteringsreglerna ovan gav dagens foton - nu oavsett
    vilken bild som ligger var.
  */
  .photos__collage > .photos__item.photos__item--slot-2,
  .photos__collage > .photos__item.photos__item--slot-3 {
    grid-column: span 8;
  }

  .photos__collage > .photos__item.photos__item--slot-4 {
    grid-column: span 17;
  }

  .photos__collage > .photos__item.photos__item--slot-5 {
    grid-column: span 7;
  }

  .photos__collage > .photos__item.photos__item--slot-6,
  .photos__collage > .photos__item.photos__item--slot-7 {
    grid-column: span 12;
  }

  /*
    Huvudbilden fyller exakt hojden av sidospalten bredvid (plats 2 + 3)
    i stallet for sitt eget 0,92: tva fasta format i spalten och ett i
    huvudbilden gar aldrig jamnt ut over alla bredder, och en ojamn
    underkant syns mer an en procent i proportion. Bara nar spalten finns -
    annars hade en ensam huvudbild fatt hojden noll.
  */
  .photos__collage > .photos__item--slot-1:has(~ .photos__item--slot-3) {
    aspect-ratio: auto;
    align-self: stretch;
  }
}

/*
  PHOTOS - KNAPPARNA OCH LIGHTBOXEN (FAS 16L).

  KNAPPEN AR OSYNLIG FOR LAYOUTEN. Den nollas helt och tar exakt bildens
  plats, sa att collagets komposition fran 16K ar pixel for pixel densamma.
  Det enda som tillkommer ar signalen att bilden gar att oppna: pekarmarkor,
  en liten ljusning vid hover och en tydlig fokusram.
*/
.photos__open {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.photos__open .photos__img {
  transition: filter 160ms ease, border-color 160ms ease;
}

.photos__open:hover .photos__img {
  filter: brightness(1.08);
  border-color: rgba(228, 221, 205, 0.55);
}

/* Fokusramen ligger UTANFOR fotot, mot sidans morka botten - lika synlig
   pa en ljus bild som pa en mork. */
.photos__open:focus-visible {
  outline: 2px solid rgba(236, 230, 216, 0.95);
  outline-offset: 3px;
}

/*
  LIGHTBOXEN. Dialogen tacker hela vyn och ar genomskinlig - dess egen yta
  runt innehallet ar "bakgrunden" man kan klicka pa for att stanga.
  Fotografiet ar i centrum och far aldrig beskaras: contain, och maxmatt
  som lamnar plats at knappar och metadata.
*/
.photos-lightbox {
  /* Dialogens marginal, och hur mycket hojd stang-raden (52 px) och
     metadata-raden (48 px) tar - resten ar bildens. */
  --lb-pad: clamp(12px, 2.4vw, 32px);
  --lb-reserve: calc(2 * var(--lb-pad) + 52px + 48px);
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: var(--lb-pad);
  padding-top: max(var(--lb-pad), env(safe-area-inset-top));
  padding-bottom: max(var(--lb-pad), env(safe-area-inset-bottom));
  border: 0;
  background: transparent;
  color: rgba(226, 226, 224, 0.9);
  overflow: hidden;
}

.photos-lightbox[open] {
  display: grid;
  place-items: center;
}

.photos-lightbox::backdrop {
  background: rgba(4, 4, 6, 0.94);
}

.photos-lightbox__frame {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  width: 100%;
  height: 100%;
  min-height: 0;
  padding-top: 52px;
  box-sizing: border-box;
}

.photos-lightbox__figure {
  grid-column: 2;
  margin: 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  gap: 12px;
}

.photos-lightbox__stage {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  touch-action: pan-y;
}

.photos-lightbox__img {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  /* Uttryckligt tak i vyns hojd: en procentsats loses inte mot en rad med
     obestamd hojd, och bilden fick aldrig ga utanfor vyn. */
  max-height: calc(100vh - var(--lb-reserve));
  max-height: calc(100dvh - var(--lb-reserve));
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid rgba(150, 142, 124, 0.3);
  background-color: rgba(9, 9, 12, 0.94);
}

.photos-lightbox__img[hidden],
.photos-lightbox__failed[hidden],
.photos-lightbox__credit[hidden],
.photos-lightbox__position[hidden] {
  display: none;
}

.photos-lightbox__failed {
  margin: 0;
  color: rgba(214, 210, 202, 0.72);
  font-size: 0.85rem;
}

.photos-lightbox__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
  color: rgba(205, 205, 200, 0.72);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
}

.photos-lightbox__position {
  color: rgba(205, 205, 200, 0.5);
}

/* Stang, foregaende och nasta: samma benvita ramknapp som videoscenens,
   minst 44 px. */
.photos-lightbox__close,
.photos-lightbox__nav {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  background: rgba(8, 8, 10, 0.8);
  border: 1px solid rgba(228, 221, 205, 0.5);
  color: rgba(240, 236, 226, 0.94);
  font-family: Arial, sans-serif;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.photos-lightbox__close {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1.7rem;
}

.photos-lightbox__nav--prev {
  grid-column: 1;
  grid-row: 1;
}

.photos-lightbox__nav--next {
  grid-column: 3;
  grid-row: 1;
}

.photos-lightbox__close:hover,
.photos-lightbox__nav:hover,
.photos-lightbox__close:focus-visible,
.photos-lightbox__nav:focus-visible {
  border-color: rgba(244, 239, 226, 0.95);
  background: rgba(8, 8, 10, 0.95);
}

.photos-lightbox__close:focus-visible,
.photos-lightbox__nav:focus-visible {
  outline: 2px solid rgba(236, 230, 216, 0.95);
  outline-offset: 3px;
}

/*
  Mobil: pilarna ligger over bildens kanter i stallet for i egna spalter,
  sa att fotot far hela bredden. DOM-ordningen - och darmed tabbordningen -
  ar densamma.
*/
@media (max-width: 620px) {
  .photos-lightbox__frame {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .photos-lightbox__figure {
    grid-column: 1;
    grid-row: 1;
  }

  .photos-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 44px;
    height: 44px;
  }

  .photos-lightbox__nav--prev {
    left: 0;
  }

  .photos-lightbox__nav--next {
    right: 0;
  }
}

/*
  SCROLLSPARR medan lightboxen ar oppen. Ren CSS: regeln galler bara sa
  lange dialogen har [open], sa den slapper av sig sjalv vid varje stangning
  och lamnar ingen klass efter sig. overflow: hidden pa html flyttar inte
  scrollpositionen, och scrollbar-gutter haller rullningslistens plats sa
  att sidan inte hoppar i sidled.
*/
html:has(.photos-lightbox[open]) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
  .photos__open .photos__img,
  .photos-lightbox__close,
  .photos-lightbox__nav {
    transition: none;
  }
}

/*
  ALBUMVYN (FAS R2) - en egen dialog for Releases, inte fotonas lightbox.
  Samma formsprak: nastan svart bakgrund, benvit ram, samma stangknapp.

  Desktop: omslaget till vanster, titel och latlista till hoger, aldrig
  hogre an vyn. Under 700 px: omslaget overst, latlistan under, och
  dialogen sjalv scrollar - inget hamnar utanfor skarmen.
*/
.release-dialog {
  --rd-pad: clamp(16px, 2.4vw, 32px);
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: var(--rd-pad);
  padding-top: max(var(--rd-pad), env(safe-area-inset-top));
  padding-bottom: max(var(--rd-pad), env(safe-area-inset-bottom));
  border: 0;
  background: transparent;
  color: rgba(226, 226, 224, 0.9);
  overflow: auto;
  overscroll-behavior: contain;
}

.release-dialog[open] {
  display: grid;
  place-items: center;
}

.release-dialog::backdrop {
  background: rgba(4, 4, 6, 0.94);
}

.release-dialog__frame {
  position: relative;
  box-sizing: border-box;
  display: grid;
  gap: clamp(16px, 2.4vw, 36px);
  width: 100%;
  max-width: 1080px;
  padding: 60px 0 8px;
}

.release-dialog__cover {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border: 1px solid rgba(150, 142, 124, 0.3);
  background-color: rgba(9, 9, 12, 0.94);
}

.release-dialog__body {
  min-width: 0;
}

.release-dialog__kicker {
  margin: 0 0 6px;
  color: rgba(205, 205, 200, 0.62);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.release-dialog__title {
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(146, 68, 58, 0.55);
  font-family: "Times New Roman", Georgia, serif;
  color: rgba(240, 236, 226, 0.94);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.release-dialog__tracks {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: track;
}

.release-dialog__track {
  counter-increment: track;
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(150, 142, 124, 0.16);
  font-size: 0.92rem;
  line-height: 1.4;
}

.release-dialog__track::before {
  content: counter(track, decimal-leading-zero);
  color: rgba(176, 84, 70, 0.9);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.release-dialog__track-title {
  font-family: "Times New Roman", Georgia, serif;
  color: rgba(236, 232, 222, 0.92);
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.release-dialog__track-time {
  color: rgba(205, 205, 200, 0.56);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

/* Utgavans text, nar den har en i stallet for en latlista. */
.release-dialog__description {
  margin: 14px 0 0;
  color: rgba(226, 224, 218, 0.92);
  font-size: 1rem;
  line-height: 1.65;
}

.release-dialog__description[hidden],
.release-dialog__tracks[hidden],
.release-dialog__spotify[hidden] {
  display: none;
}

/* Samma knappform som kontaktformularets, med en diskret rod ram. Minst 44 px
   hog, och ingen knapp alls utan verifierad adress. */
.release-dialog__spotify {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 44px;
  margin-top: 18px;
  padding: 0 22px;
  background: rgba(8, 8, 10, 0.78);
  border: 1px solid rgba(176, 84, 70, 0.75);
  color: rgba(240, 236, 226, 0.94);
  font-family: "Times New Roman", Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.release-dialog__spotify:hover,
.release-dialog__spotify:focus-visible {
  border-color: rgba(214, 112, 96, 0.98);
  background: rgba(8, 8, 10, 0.92);
}

.release-dialog__spotify:focus-visible {
  outline: 1px solid rgba(228, 221, 205, 0.7);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .release-dialog__spotify {
    transition: none;
  }
}

/* Samma benvita ramknapp som lightboxens. */
.release-dialog__close {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  background: rgba(8, 8, 10, 0.8);
  border: 1px solid rgba(228, 221, 205, 0.5);
  color: rgba(240, 236, 226, 0.94);
  font-family: Arial, sans-serif;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.release-dialog__close:hover,
.release-dialog__close:focus-visible {
  border-color: rgba(244, 239, 226, 0.95);
  background: rgba(8, 8, 10, 0.95);
}

.release-dialog__close:focus-visible {
  outline: 2px solid rgba(236, 230, 216, 0.95);
  outline-offset: 3px;
}

@media (min-width: 700px) {
  .release-dialog__frame {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
  }

  /* Omslaget far aldrig bli hogre an vyn minus ramens luft. */
  .release-dialog__cover {
    max-height: calc(100dvh - 2 * var(--rd-pad) - 68px);
    width: auto;
    max-width: 100%;
    justify-self: end;
  }
}

/* Under 700 px: lagom stort omslag, sa att latlistan borjar inom forsta
   skarmen. */
@media (max-width: 699px) {
  .release-dialog[open] {
    place-items: start center;
  }

  .release-dialog__cover {
    max-width: min(100%, 56dvh);
    justify-self: center;
  }
}

html:has(.release-dialog[open]) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
  .release-dialog__close {
    transition: none;
  }
}

/* ---------------------------------------------------------------
   CONTACT (FC3)
   En knapp pa sidan, formularet i en dialog. Sist i .stage-continuation,
   samma bredd, gutter och h2 som grannarna - slimen bakom kommer darifran.
   Mork botten, benvita hairlines och serif-versaler; pestrott bara for fel,
   samma ton som installda gig. Under 620 px staplas namn och e-post.

   DIALOGEN ar Releases albumvy: .release-dialog ger helskarmsytan,
   bakgrunden och scrollsparren, .release-dialog__close och __title
   stangknappen och rubriken. Har star bara det som skiljer.
   --------------------------------------------------------------- */
.contact {
  max-width: var(--stage-max);
  margin: 0 auto;
  padding: clamp(30px, 4.2vw, 56px) var(--stage-gutter) clamp(30px, 4.2vw, 56px);
}

.contact__noscript {
  margin: 0;
  color: rgba(214, 210, 202, 0.66);
  font-size: 0.82rem;
}

.contact__form {
  position: relative;
  display: grid;
  gap: clamp(14px, 1.8vw, 20px);
  max-width: 680px;
  margin: clamp(6px, 1vw, 12px) auto 0;
}

.contact__open[hidden],
.contact__error[hidden] {
  display: none;
}

.contact__submit.contact__open {
  display: block;
  margin: clamp(10px, 1.6vw, 18px) auto 0;
  /* Webblasarens tap-markering hade lyst igenom ovanpa den nyss oppnade dialogen. */
  -webkit-tap-highlight-color: transparent;
}

/*
  PANELEN - ett gammalt dokument: dubbel ram, benvit ute och blodrod inne, en
  anings mogel fran sidans egen textur, morkare mot kanterna. Ramen ligger
  over innehallet, utan att ta emot klick.

  HUVUDET STAR STILLA, BARA FORMULARET SCROLLAR. Panelen ar aldrig hogre an
  vyn, sa stangknappen ligger alltid kvar - och aldrig ovanpa ett falt.
*/
.contact-dialog {
  --rd-pad: clamp(10px, 2.4vw, 32px);
}

.contact-dialog[open] {
  place-items: center;
}

.contact-dialog__frame {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 2 * var(--rd-pad));
  max-height: calc(100dvh - 2 * var(--rd-pad));
  overflow: hidden;
  background-color: rgb(10, 9, 10);
  border: 1px solid rgba(206, 198, 178, 0.42);
  box-shadow: inset 0 0 70px 14px rgba(0, 0, 0, 0.6), 0 18px 60px rgba(0, 0, 0, 0.7);
}

.contact-dialog__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../images/ornaments/ornamentbg.webp");
  background-position: center top;
  background-size: cover;
  opacity: 0.09;
}

.contact-dialog__frame::after {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(146, 68, 58, 0.5);
}

/*
  Rubriken centrerad over en delare: tva blodroda linjer som tonar ut mot
  kanterna, med Farsoths eget kors dar de mots.
*/
.contact-dialog__head {
  position: relative;
  padding: clamp(14px, 2vw, 20px) 60px 0;
}

.contact-dialog__head::after {
  content: "";
  display: block;
  height: 30px;
  margin: 2px -40px 0;
  background:
    url("../images/main/farsotkors.webp") center / auto 100% no-repeat,
    linear-gradient(to left, rgba(146, 68, 58, 0.75), rgba(146, 68, 58, 0)) left center / calc(50% - 20px) 1px no-repeat,
    linear-gradient(to right, rgba(146, 68, 58, 0.75), rgba(146, 68, 58, 0)) right center / calc(50% - 20px) 1px no-repeat;
}

.contact-dialog .release-dialog__title {
  padding: 0;
  border: 0;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  letter-spacing: 0.16em;
  text-align: center;
}

.contact-dialog .release-dialog__title:focus {
  outline: none;
}

.contact-dialog .release-dialog__close {
  top: 11px;
  right: 11px;
  z-index: 2;
  width: 44px;
  height: 44px;
  background: transparent;
  border-color: rgba(206, 198, 178, 0.38);
  font-size: 1.45rem;
}

.contact-dialog .release-dialog__close:hover,
.contact-dialog .release-dialog__close:focus-visible {
  background: rgba(146, 68, 58, 0.22);
  border-color: rgba(244, 239, 226, 0.9);
}

.contact-dialog .contact__form {
  gap: 12px;
  align-content: start;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 6px clamp(18px, 3.4vw, 34px) clamp(18px, 2.4vw, 24px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 142, 124, 0.5) transparent;
}

.contact-dialog .contact__row {
  gap: 12px;
}

/* Skickat: bara bekraftelsen. Oppnas dialogen igen ar formularet tillbaka. */
[data-contact-state="sent"] .contact__form > :not(.contact__status) {
  display: none;
}

[data-contact-state="sent"] .contact__status {
  padding: clamp(12px, 3vw, 28px) 0 clamp(6px, 2vw, 16px);
  font-family: "Times New Roman", Georgia, serif;
  font-size: 1.2rem;
}

.contact__row {
  display: grid;
  gap: clamp(14px, 1.8vw, 20px);
}

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

.contact__field {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

/* Samma familj som .media__label. */
.contact__label {
  font-family: "Times New Roman", Georgia, serif;
  color: rgba(212, 206, 190, 0.82);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.7rem;
  font-weight: 700;
}

/* 1rem: mindre text far iOS Safari att zooma in sidan vid fokus. Underkanten
   nagot ljusare, som en skrivrad i ett dokument. */
.contact__input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 9px 12px;
  background-color: rgba(4, 4, 5, 0.82);
  border: 1px solid rgba(206, 198, 178, 0.26);
  border-bottom-color: rgba(228, 221, 205, 0.56);
  border-radius: 0;
  color: rgba(244, 240, 230, 0.96);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.contact__input--message {
  min-height: 118px;
  resize: vertical;
}

.contact__input:hover {
  border-color: rgba(228, 221, 205, 0.5);
}

/* Benvit kant och en tunn blodrod linje utanfor. Outline, inte box-shadow:
   den syns ocksa i Windows hogkontrastlage. */
.contact__input:focus-visible {
  background-color: rgb(3, 3, 4);
  border-color: rgba(244, 239, 226, 0.95);
  outline: 1px solid rgba(190, 92, 76, 0.95);
  outline-offset: 1px;
}

.contact__input[aria-invalid="true"] {
  border-color: rgba(190, 92, 76, 0.98);
}

.contact__error {
  margin: 0;
  color: rgba(206, 112, 96, 0.98);
  font-size: 0.82rem;
  line-height: 1.4;
}

/* Honeypoten: utanfor skarmen, inte display: none, som en del botar hoppar over. */
.contact__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact__privacy {
  margin: 2px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(146, 68, 58, 0.42);
  color: rgba(222, 218, 208, 0.8);
  font-size: 0.8rem;
  line-height: 1.45;
}

.contact__privacy p {
  margin: 0 0 6px;
}

.contact__privacy p:last-child {
  margin-bottom: 0;
}

/* Samma familj som faltens etiketter. */
.contact__privacy-title {
  margin: 0 0 6px;
  font-family: "Times New Roman", Georgia, serif;
  color: rgba(212, 206, 190, 0.82);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.7rem;
  font-weight: 700;
}

.contact__privacy a {
  color: rgba(248, 244, 234, 0.98);
  text-decoration: underline;
  text-decoration-color: rgba(190, 92, 76, 0.95);
  text-underline-offset: 3px;
}

.contact__privacy a:hover,
.contact__privacy a:focus-visible {
  color: rgba(255, 255, 255, 1);
}

.contact__privacy a:focus-visible {
  outline: 1px solid rgba(228, 221, 205, 0.7);
  outline-offset: 2px;
}

/* Samma ramknapp som .videos__action. */
.contact__submit {
  justify-self: start;
  min-height: 44px;
  margin: 0;
  padding: 0 22px;
  background: rgba(8, 8, 10, 0.78);
  border: 1px solid rgba(228, 221, 205, 0.55);
  border-radius: 0;
  color: rgba(240, 236, 226, 0.94);
  font-family: "Times New Roman", Georgia, serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.contact__submit:hover,
.contact__submit:focus-visible {
  border-color: rgba(244, 239, 226, 0.95);
  background: rgba(8, 8, 10, 0.92);
}

.contact__submit:focus-visible {
  outline: 1px solid rgba(228, 221, 205, 0.7);
  outline-offset: 3px;
}

.contact__submit[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.7;
}

/*
  SKICKA - popupens huvudhandling: storre, centrerad och med panelens dubbla
  ram. order: statusraden star visuellt ovanfor knappen, sa att beskedet syns
  dar besokaren just klickade, aven nar formularet ar scrollat pa en lag skarm.
*/
.contact-dialog .contact__submit {
  order: 1;
  justify-self: center;
  min-width: min(100%, 250px);
  min-height: 50px;
  padding: 0 28px;
  background: rgba(24, 14, 13, 0.92);
  border-color: rgba(228, 221, 205, 0.72);
  box-shadow: inset 0 0 0 3px rgb(10, 9, 10), inset 0 0 0 4px rgba(146, 68, 58, 0.72);
  font-size: 0.86rem;
  letter-spacing: 0.22em;
}

.contact-dialog .contact__submit:hover,
.contact-dialog .contact__submit:focus-visible {
  background: rgba(70, 26, 21, 0.72);
  border-color: rgba(248, 244, 234, 0.98);
}

.contact-dialog .contact__submit:focus-visible {
  outline: 2px solid rgba(240, 236, 226, 0.95);
  outline-offset: 3px;
}

.contact-dialog .contact__status {
  text-align: center;
}

/* Ingen tom rad mellan texten och knappen. */
.contact-dialog .contact__status:empty {
  margin-top: -12px;
}

/* Tom ar den osynlig men finns kvar, sa att skarmlasaren hor nasta besked. */
.contact__status {
  margin: 0;
  color: rgba(240, 236, 226, 0.92);
  font-size: 0.92rem;
  line-height: 1.45;
}

.contact__status:focus {
  outline: none;
}

.contact__status--error {
  color: rgba(206, 112, 96, 0.98);
}

/* Bara i lokal forhandsvisning - byggs av contact.js. */
.contact__preview {
  margin: 0;
  padding: 6px 10px;
  border: 1px dashed rgba(150, 142, 124, 0.42);
  color: rgba(214, 210, 202, 0.72);
  font-size: 0.74rem;
}

@media (prefers-reduced-motion: reduce) {
  .contact__input,
  .contact__submit {
    transition: none;
  }
}

/* ---------------------------------------------------------------
   MERCH (FAS 13B)
   Hela katalogen fran Merch Goblin. Egen yta efter The Band, utanfor
   stage-varlden - samma bredd, samma gutter och samma rubrikstil som
   sektionerna ovan, utan slime och utan ornament.

   EGET NAMNRUM: .merch-shop__*. Teasern i 2x2-griddet ager .merch__*,
   och de tva far aldrig dela regler.

   I denna fas bara grunden: rubrik, statusrad, en tom och dold lista och
   signaturen. Produktkorten designas nar det finns produkter att visa.
   --------------------------------------------------------------- */

.merch-shop {
  max-width: var(--stage-max);
  margin: 0 auto;
  padding: clamp(30px, 4.2vw, 56px) var(--stage-gutter) clamp(18px, 2.6vw, 34px);
}

/* Rubrik, galleri och signatur delar samma bredd, centrerade i sektionen. */
.merch-shop__inner {
  max-width: 950px;
  margin: 0 auto;
}

/* Samma besked-ton som Upcoming Shows tomma lage och Latest News status. */
.merch-shop__status {
  margin: 0;
  color: rgba(214, 210, 202, 0.66);
  font-size: 0.82rem;
}

/*
  GRIDET (Merch Design V1.2). 3 kolumner pa desktop och 2 pa mobil.
  minmax(0, 1fr) och inte 1fr: ett langt ord i en titel far aldrig tvinga
  en kolumn bredare an sin andel och ge sidan horisontell scroll.
*/
.merch-shop__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.7vw, 22px);
}

/* display: grid ovan hade annars vunnit over [hidden]. */
.merch-shop__grid[hidden] {
  display: none;
}

@media (max-width: 639px) {
  .merch-shop__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
  PRODUKTKORTET (Merch Design V1). En enda tunn linje runt morkt, genomskinligt
  papper over slimen. Ingen inre ram, ingen skugga, ingen radie.

  Rytmen ar bild, titel, pris och sist storlekarna under en egen hairline.
  Kortets bredd ags av gridet; har bestams bara insidan. --merch-inset ar
  samma marginal runt bilden och texten, sa att de linjerar.

  min-width: 0 pa kortet och dess kropp later en lang titel brytas i stallet
  for att trycka kolumnen bredare an sin andel.
*/
.merch-shop__item {
  --merch-inset: clamp(10px, 1.5vw, 20px);
  --merch-size-gutter: 9px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid rgba(150, 142, 124, 0.2);
  background: rgba(7, 6, 9, 0.62);
  transition: border-color 220ms ease;
}

/*
  RUTAN AGER STORLEKEN, ALDRIG BILDEN - samma regel som gigaffischen. En
  fast kvadrat ger ett jamnt rutnat trots olika bildformat, och contain
  beskar aldrig varan. Marginalen gor att en bild som inte ar helt kvadratisk
  star fritt pa papperet, i stallet for att sluta strax innan ramen.
*/
.merch-shop__media {
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  padding: var(--merch-inset);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.merch-shop__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  transition: transform 320ms ease, filter 320ms ease;
}

/* Bara dar det finns en riktig pekare. Overflow pa rutan haller skalningen
   inne, sa att kortet aldrig andrar storlek. */
@media (hover: hover) {
  .merch-shop__item:hover {
    border-color: rgba(150, 142, 124, 0.38);
  }

  .merch-shop__item:hover .merch-shop__image {
    transform: scale(1.02);
    filter: brightness(1.07);
  }
}

/* Utan bild, eller nar den inte gick att hamta: en lagmald rad i samma
   ruta, satt som affischrutans platshallare. Ingen bildasset. */
.merch-shop__placeholder {
  padding: 0 8px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.58rem;
  font-weight: 700;
  color: rgba(214, 210, 202, 0.36);
}

/* flex: 1 sa att storlekarna hamnar langst ned i kortet, och raderna linjerar
   aven nar titlarna ar olika langa. */
.merch-shop__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 0 var(--merch-inset) var(--merch-inset);
}

/* Serif-versaler som gigkortets titel, i sidans smutsiga benvitt. Kortets
   tyngdpunkt efter bilden. Titeln ar Merch Goblins, orord. */
.merch-shop__title {
  margin: 0;
  font-family: "Times New Roman", Georgia, serif;
  color: rgba(248, 244, 234, 0.98);
  letter-spacing: 0.06em;
  font-size: clamp(0.94rem, 1.15vw, 1.06rem);
  line-height: 1.22;
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* Priset ar det man letar efter: ljust, med ett kort blodrott streck till
   vanster. Strecket ar en kant, sa att det inte kan lasas som ett minustecken.
   Inte flex: Firefox bryter da belopp och valuta pa varsin rad. Marginalen
   nedat ar minsta avstandet till det som foljer, nar titeln trycker ned det. */
.merch-shop__price {
  margin: 8px 0 12px;
  padding-left: 8px;
  border-left: 2px solid rgba(176, 84, 70, 0.98);
  color: rgba(240, 236, 226, 0.94);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Det som foljer priset - storlekarna, eller slutsaltraden utan storlekar.
   Specificiteten vinner over deras egna marginaler langre ned. */
.merch-shop__body > .merch-shop__price + * {
  margin-top: auto;
}

/*
  STORLEKARNA AR UPPGIFTER, INTE KNAPPAR. Ren text i rad, avdelad av tunna
  lodrata linjer, under en egen hairline - ingen ruta, ingen hover, ingen
  pekare. Sa laser ONE SIZE och S-XXL som samma sorts upplysning.
  Linjerna ar kanter, inte genererat innehall, sa skarmlasare far bara
  storlekarna. Raden bryts i stallet for att spranga kortet.

  AVDELARE BARA MELLAN STORLEKAR. Varje storlek bar sin linje till vanster;
  listan ligger en avdelarbredd till vanster om kolumnen och klipps
  tillbaka dit med clip-path. Sa forsvinner linjen framfor den forsta
  storleken pa VARJE rad - ocksa nar raden bryts - och texten linjerar anda
  med titeln ovanfor.
*/
.merch-shop__sizes {
  list-style: none;
  align-self: stretch;
  margin: 0 0 0 calc(-1px - var(--merch-size-gutter));
  padding: 9px 0 0;
  border-top: 1px solid rgba(150, 142, 124, 0.2);
  clip-path: inset(0 0 0 calc(1px + var(--merch-size-gutter)));
  display: flex;
  flex-wrap: wrap;
  row-gap: 4px;
}

.merch-shop__size {
  padding: 0 var(--merch-size-gutter);
  border-left: 1px solid rgba(150, 142, 124, 0.34);
  color: rgba(222, 218, 208, 0.82);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* Slutsald produkt: bilden tonas ned som ett installt gigs affisch, och
   etiketten ar Shows "Cancelled" - torr plague-rod under en egen rod
   hairline. Riktig text, inte en badge ovanpa bilden. */
.merch-shop__item--sold-out .merch-shop__image {
  opacity: 0.42;
}

.merch-shop__sold-out {
  align-self: stretch;
  margin: 12px 0 0;
  padding-top: 8px;
  border-top: 1px solid rgba(146, 68, 58, 0.42);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgb(222, 112, 96);
}

/* Tva kolumner pa mobil: tatare storlekar, sa att S-XXL far plats pa en rad. */
@media (max-width: 639px) {
  .merch-shop__item {
    --merch-size-gutter: 6px;
  }

  .merch-shop__price {
    font-size: 0.74rem;
    letter-spacing: 0.1em;
  }

  .merch-shop__size {
    font-size: 0.64rem;
    letter-spacing: 0.08em;
  }
}

/* Mycket smala skarmar: priset far aldrig brytas, sa det far krympa i stallet.
   Under 300 px racker inte tva kolumner till korten. */
@media (max-width: 359px) {
  .merch-shop__price {
    padding-left: 6px;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 299px) {
  .merch-shop__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Teknisk signatur, inte reklam: mindre och dampare an band__link, sa att
   den aldrig tavlar med Farsoth eller produkterna. */
.merch-shop__powered {
  margin: clamp(26px, 3vw, 40px) 0 0;
  color: rgba(205, 205, 200, 0.62);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.merch-shop__powered a {
  color: rgba(205, 205, 200, 0.62);
  text-decoration: none;
  border-bottom: 1px solid rgba(150, 142, 124, 0.28);
  padding-bottom: 1px;
  transition: color 140ms ease, border-color 140ms ease;
}

.merch-shop__powered a:hover {
  color: rgba(248, 248, 246, 0.9);
  border-bottom-color: rgba(197, 190, 172, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .merch-shop__item,
  .merch-shop__image,
  .merch-shop__powered a {
    transition: none;
  }

  .merch-shop__item:hover .merch-shop__image {
    transform: none;
  }
}

footer {
  margin-top: 16px;
  border-top: 1px solid rgba(205, 205, 205, 0.12);
  background: linear-gradient(to bottom, rgba(8, 8, 12, 0.78), rgba(6, 6, 10, 0.92));
}

.site-footer__inner {
  /* V2: footern delar innehallets bredd. */
  max-width: var(--stage-max);
  margin: 0 auto;
  min-height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Skip-lank: utanfor skarmen tills den far tangentbordsfokus. */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 16px;
  background: rgba(8, 8, 10, 0.96);
  border: 1px solid rgba(228, 221, 205, 0.7);
  color: rgba(244, 239, 226, 0.98);
  font-family: "Times New Roman", Georgia, serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(calc(-100% - 16px));
}

.skip-link:focus {
  transform: none;
  outline: 1px solid rgba(228, 221, 205, 0.7);
  outline-offset: 3px;
}

.site-footer__inner p {
  margin: 0;
  color: rgba(220, 220, 220, 0.72);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}