:root {
  --ink: #080705;
  --yellow: #d49a16;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: #e1d4b7; font-family: "Courier New", Courier, monospace; }
a { color: inherit; }

.site-header { position: sticky; top: 0; z-index: 10; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 0 clamp(1.25rem, 4vw, 4.5rem); background: #070604; border-bottom: 1px solid rgba(212,154,22,.32); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.wordmark { color: var(--yellow); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 1.2rem; letter-spacing: .05em; text-decoration: none; text-transform: uppercase; }
.nav { display: flex; gap: clamp(1.5rem, 4vw, 4.5rem); text-transform: uppercase; font-size: clamp(.72rem, .85vw, .95rem); font-weight: 800; letter-spacing: .13em; white-space: nowrap; }
.nav a { position: relative; padding: 1.45rem 0 1.25rem; text-decoration: none; }
.nav a:hover, .nav a:focus-visible, .nav a.active, .nav a[aria-current="location"] { color: var(--yellow); }
.nav a::after { content: ""; position: absolute; right: 0; bottom: .78rem; left: 0; height: 3px; background: var(--yellow); transform: scaleX(0); transform-origin: center; transition: transform .2s ease; }
.nav a:hover::after, .nav a:focus-visible::after, .nav a.active::after, .nav a[aria-current="location"]::after { transform: scaleX(1); }
.lang-switch { display: flex; gap: .4rem; align-items: center; font-size: .68rem; font-weight: 900; letter-spacing: .1em; }
.lang-switch a { padding: .35rem .45rem; border: 1px solid #49371f; color: #8f836d; text-decoration: none; }
.lang-switch a[aria-current="page"], .lang-switch a:hover, .lang-switch a:focus-visible { border-color: var(--yellow); color: var(--yellow); }

.hero { position: relative; min-height: calc(100svh - 64px); background-image: linear-gradient(180deg, rgba(0,0,0,.08), transparent 30%, transparent 70%, rgba(0,0,0,.58)), url('assets/slopmongers-background.png'); background-size: cover; background-position: center top; border-bottom: 5px solid #251a0d; }
.scroll-cue { position: absolute; right: 2rem; bottom: 3.8%; display: flex; gap: .65rem; align-items: center; color: #d9c69e; font-size: .68rem; font-weight: 900; letter-spacing: .18em; text-decoration: none; text-transform: uppercase; }
.scroll-cue b { color: var(--yellow); font-size: 1.15rem; }

.section { padding: clamp(4rem, 9vw, 9rem) max(6vw, calc((100vw - 1320px) / 2)); border-bottom: 1px solid #3a2c1c; background: radial-gradient(circle at 20% 0, rgba(155,95,25,.1), transparent 32%), linear-gradient(115deg, #0b0906, #171008 55%, #080705); }
.section-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: clamp(3rem, 9vw, 9rem); align-items: start; }
.eyebrow { margin: 0 0 2rem; color: var(--yellow); text-transform: uppercase; letter-spacing: .18em; font-size: .75rem; font-weight: 800; }
h1, h2 { margin: 0; color: #d0a43d; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-weight: 900; line-height: .9; letter-spacing: .015em; text-transform: uppercase; text-shadow: 3px 3px 0 #26160b; }
h1 { font-size: clamp(4rem, 8.3vw, 9.5rem); }
h2 { font-size: clamp(3rem, 6vw, 7rem); }
.lead { margin: .3rem 0 0; max-width: 43rem; color: #c5b99f; font-size: clamp(1rem, 1.4vw, 1.3rem); line-height: 1.8; }
.band-copy { font-size: clamp(.88rem, 1vw, 1.05rem); line-height: 1.65; }
.band-copy p { margin: 0 0 1.05rem; }
.band-copy p:last-child { margin-bottom: 0; }
.revenge-line strong { color: var(--yellow); }
.tracklist { margin: 0; padding: 0; list-style: none; border-top: 1px solid #5b4629; }
.tracklist li { display: grid; grid-template-columns: 2rem 1fr auto; gap: 1rem; padding: 1.15rem .5rem; border-bottom: 1px solid #5b4629; text-transform: uppercase; }
.tracklist li span { color: #84765f; }
.band { min-height: calc(100svh - 64px); display: grid; align-content: center; padding-top: clamp(3rem, 5vw, 5rem); padding-bottom: clamp(3rem, 5vw, 5rem); background: linear-gradient(145deg, #25170c, #090705 70%); }
.band-grid { grid-template-columns: minmax(0, .8fr) repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3.2vw, 4rem); }
.band-portrait { position: relative; min-height: clamp(430px, 62vh, 660px); overflow: hidden; border: 1px solid rgba(212,154,22,.28); background: #080705; box-shadow: 0 18px 45px rgba(0,0,0,.42); }
.band-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(5,4,3,.28) 62%, rgba(5,4,3,.96) 100%); pointer-events: none; }
.band-portrait img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: center 42%; }
.band-portrait h2 { position: absolute; z-index: 1; right: 1.15rem; bottom: 1.1rem; left: 1.15rem; font-size: clamp(2.25rem, 3.4vw, 4.5rem); }
.placeholder { min-height: 55vh; display: grid; align-content: center; }
.media-section { min-height: calc(82svh - 64px); display: grid; align-content: center; padding-top: clamp(3rem, 6vw, 6rem); padding-bottom: clamp(3rem, 6vw, 6rem); }
.media-grid { display: grid; grid-template-columns: minmax(220px, .72fr) repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3.2vw, 4rem); align-items: stretch; }
.media-intro { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: .4rem; }
.media-intro h2 { font-size: clamp(2.7rem, 4.2vw, 5.2rem); }
.media-card { position: relative; min-height: clamp(390px, 52vw, 610px); overflow: hidden; border: 1px solid rgba(212,154,22,.3); background: #080705; color: #f1e5cb; box-shadow: 0 18px 45px rgba(0,0,0,.44); text-decoration: none; }
.media-card img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; filter: saturate(.72) contrast(1.08); transition: transform .45s ease, filter .45s ease; }
.media-card-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,4,3,.04) 28%, rgba(5,4,3,.38) 58%, rgba(5,4,3,.98) 100%); }
.media-card-copy { position: absolute; z-index: 1; right: 1.25rem; bottom: 1.2rem; left: 1.25rem; display: grid; gap: .55rem; }
.media-card-copy small { color: #cbbd9f; font-size: .65rem; font-weight: 800; letter-spacing: .12em; line-height: 1.45; text-transform: uppercase; }
.media-card-copy strong { color: var(--yellow); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(2.4rem, 4vw, 4.8rem); line-height: .9; letter-spacing: .02em; text-transform: uppercase; text-shadow: 3px 3px 0 #26160b; }
.media-card-copy b { color: #e1d4b7; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.media-card:hover img, .media-card:focus-visible img { transform: scale(1.035); filter: saturate(1) contrast(1.12); }
.media-card:hover .media-card-copy b, .media-card:focus-visible .media-card-copy b { color: var(--yellow); }
.media-card:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }

.subpage-main { min-height: calc(100svh - 64px); padding: clamp(4rem, 8vw, 8rem) max(6vw, calc((100vw - 1320px) / 2)); background: radial-gradient(circle at 20% 0, rgba(155,95,25,.12), transparent 32%), linear-gradient(115deg, #0b0906, #171008 55%, #080705); }
.subpage-head { display: grid; grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr); gap: clamp(2rem, 6vw, 7rem); align-items: end; margin-bottom: clamp(3rem, 7vw, 7rem); }
.subpage-head h1 { font-size: clamp(3.8rem, 8vw, 8rem); }
.subpage-head p { max-width: 42rem; color: #b9ad94; font-size: clamp(.95rem, 1.3vw, 1.2rem); line-height: 1.7; }
.back-link { display: inline-block; margin-bottom: 1.5rem; color: var(--yellow); font-size: .72rem; font-weight: 900; letter-spacing: .14em; text-decoration: none; text-transform: uppercase; }
.video-placeholder { position: relative; min-height: min(66vw, 720px); overflow: hidden; border: 1px solid rgba(212,154,22,.3); }
.video-placeholder img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.video-placeholder::after { content: "Videoer på vej"; position: absolute; right: 1.5rem; bottom: 1.3rem; left: 1.5rem; color: var(--yellow); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(3rem, 8vw, 8rem); line-height: .9; text-transform: uppercase; text-shadow: 4px 4px 0 #1d1209; }
html[lang="en"] .video-placeholder::after { content: "Videos incoming"; }
.gallery-grid { columns: 3 280px; column-gap: clamp(1rem, 2vw, 2rem); }
.gallery-grid figure { position: relative; break-inside: avoid; margin: 0 0 clamp(1rem, 2vw, 2rem); overflow: hidden; border: 1px solid rgba(212,154,22,.25); background: #080705; }
.gallery-grid img { width: 100%; height: auto; display: block; cursor: zoom-in; }
.gallery-grid figcaption { padding: .8rem .9rem; border-top: 1px solid rgba(212,154,22,.22); color: var(--yellow); font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.gallery-grid img:focus-visible { outline: 2px solid var(--yellow); outline-offset: -4px; }
.image-lightbox { position: fixed; z-index: 1100; inset: 0; width: 100%; height: 100%; display: grid; place-items: center; padding: clamp(.65rem, 2vw, 2rem); border: 0; background: rgba(0,0,0,.94); cursor: zoom-out; overflow: hidden; }
.image-lightbox img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; border: 1px solid rgba(212,154,22,.4); box-shadow: 0 22px 80px rgba(0,0,0,.8); }
.image-lightbox:focus-visible { outline: 2px solid var(--yellow); outline-offset: -4px; }
.media-drawer { position: fixed; z-index: 9; inset: 64px 0 0; display: none; overflow-y: auto; background: #080705; overscroll-behavior: contain; }
.media-drawer:target { display: block; }
.media-drawer-inner { min-height: 100%; padding: clamp(3rem, 7vw, 7rem) max(6vw, calc((100vw - 1320px) / 2)); background: radial-gradient(circle at 20% 0, rgba(155,95,25,.12), transparent 32%), linear-gradient(115deg, #0b0906, #171008 55%, #080705); }
.media-drawer .subpage-head h2 { font-size: clamp(3.8rem, 8vw, 8rem); }
.media-drawer-close { position: sticky; z-index: 1; top: 0; padding: .7rem .8rem; background: #0b0906; border: 1px solid rgba(212,154,22,.4); }
.press { min-height: calc(72svh - 64px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.25fr) minmax(0, .8fr); gap: clamp(1.5rem, 3vw, 4rem); align-items: end; background: var(--yellow); color: var(--ink); }
.contact-art { width: min(100%, 420px); height: auto; justify-self: start; object-fit: contain; pointer-events: none; }
.press .eyebrow, .press h2 { color: var(--ink); text-shadow: none; }
.press > a { overflow-wrap: anywhere; font-weight: 900; text-decoration-thickness: 2px; text-underline-offset: .35em; }
.label-footer { display: flex; justify-content: center; padding: 1.35rem 1rem 1.55rem; border-top: 1px solid rgba(212,154,22,.18); background: #050403; }
.label-footer a { display: inline-flex; align-items: center; gap: .85rem; color: #766b58; text-decoration: none; transition: color .2s ease; }
.label-footer span { font-size: .58rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.label-footer img { width: 92px; height: auto; opacity: .48; filter: saturate(.55); transition: opacity .2s ease, filter .2s ease; }
.label-footer a:hover, .label-footer a:focus-visible { color: #ad9d7e; }
.label-footer a:hover img, .label-footer a:focus-visible img { opacity: .78; filter: saturate(.8); }

.music-page { min-height: 100svh; background: #090704; }
.music-hero { min-height: calc(100svh - 64px); display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(330px, .8fr); column-gap: clamp(2rem, 4vw, 4.5rem); align-items: start; padding: clamp(2rem, 4vw, 4rem) max(3vw, calc((100vw - 1540px) / 2)); background: radial-gradient(circle at 50% 20%, rgba(126,72,18,.17), transparent 38%), linear-gradient(135deg, #070604, #171009 58%, #050403); }
.music-heading { grid-column: 1 / -1; padding-top: 1.25cm; text-align: center; }
.music-heading .eyebrow { margin-bottom: 1rem; }
.music-heading h1 { font-size: clamp(3.5rem, 6vw, 6rem); }
.music-heading > p:last-child { color: #8f836d; text-transform: uppercase; letter-spacing: .12em; }
.deck-wrap { width: 100%; margin: 2.25rem 0 0; text-align: center; }
.deck { position: relative; width: 100%; }
.deck > #deck-image { display: block; width: 100%; height: auto; }
.deck > .reel { position: absolute; z-index: 2; top: 42.31%; display: block; width: 4.92%; height: auto; aspect-ratio: 1; border-radius: 50%; opacity: 1; pointer-events: none; object-fit: contain; transform-origin: 50% 50%; will-change: transform; }
.reel-left { left: 18.60%; }
.reel-right { left: 32.96%; }
.deck-screen { position: absolute; z-index: 2; top: 27%; left: 50.3%; width: 39.5%; height: 23.8%; display: flex; flex-direction: column; justify-content: center; padding: 2.2% 3.2% 1.8%; color: #d69a17; overflow: hidden; text-align: left; text-transform: uppercase; text-shadow: 0 0 10px rgba(214,154,23,.3); }
.screen-kicker { color: #6f521b; font-size: clamp(.38rem, .65vw, .7rem); letter-spacing: .18em; }
.deck-screen strong { margin-top: .5rem; font-size: clamp(.75rem, 1.55vw, 1.45rem); letter-spacing: .07em; white-space: nowrap; }
.wave { flex: 0 0 40%; margin: 3% 0 2%; display: flex; align-items: center; gap: .8%; overflow: hidden; }
.wave i { width: 2%; height: 45%; background: #c18712; box-shadow: 0 0 4px rgba(193,135,18,.45); transform-origin: center; }
.wave i:nth-child(3n) { height: 92%; }
.wave i:nth-child(4n) { height: 68%; }
.wave i:nth-child(7n) { height: 100%; }
.wave.playing i { animation: tape-level .72s ease-in-out infinite alternate; }
.wave.playing i:nth-child(3n) { animation-delay: -.28s; }
.wave.playing i:nth-child(5n) { animation-delay: -.51s; }
@keyframes tape-level { from { transform: scaleY(.32); } to { transform: scaleY(1); } }
.time { display: flex; justify-content: space-between; color: #80601d; font-size: clamp(.38rem, .7vw, .75rem); }
.deck-buttons { position: absolute; z-index: 3; top: 55.2%; left: 49.4%; width: 42.2%; height: 15.2%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.35%; }
.deck-buttons button { border: 0; background: transparent; cursor: pointer; }
.deck-buttons button:hover { outline: 0; }
.deck-buttons button:focus-visible { outline: 1px solid rgba(212,154,22,.5); }
.deck-buttons button:active { transform: translateY(2px); }
.tape-label { width: min(46%, 610px); height: auto; margin: -3.2% auto 0; position: relative; z-index: 4; }
.music-lower { width: 100%; margin: 2.25rem 0 0; }
.track-panels { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.track-side > p { margin: 0 0 .75rem; color: var(--yellow); font-size: .7rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.music-tracks { list-style: none; margin: 0; padding: 0; border-top: 1px solid #49371f; }
.music-tracks li { border-bottom: 1px solid #49371f; font-size: clamp(.68rem, .8vw, .82rem); text-transform: uppercase; }
.track-select { width: 100%; display: grid; grid-template-columns: 2rem 1fr auto; gap: .75rem; padding: .65rem .4rem; border: 0; background: transparent; color: #c5b99f; font: inherit; text-align: left; text-transform: inherit; cursor: pointer; }
.track-select:hover strong, .track-select:focus-visible strong { color: var(--yellow); }
.track-select:focus-visible { outline: 1px solid rgba(212,154,22,.45); outline-offset: -1px; }
.music-tracks li span { color: #746953; }
.music-tracks li.active strong { color: var(--yellow); }
.audio-note { margin: 1.25rem 0 0; color: #655b4c; font-size: .68rem; letter-spacing: .12em; text-align: right; text-transform: uppercase; }

@media (max-width: 1100px) {
  .music-hero { display: block; }
  .deck-wrap { width: min(100%, 1000px); margin-inline: auto; }
  .music-lower { width: min(100%, 880px); margin: 3rem auto 0; }
  .track-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}

@media (max-width: 760px) {
  .site-header { min-height: 58px; gap: 1rem; padding: 0 .85rem; }
  .hero { min-height: 0; aspect-ratio: 1672 / 941; background-size: contain; background-position: center top; background-repeat: no-repeat; }
  .nav { width: auto; flex: 1; justify-content: space-between; gap: .5rem; font-size: .58rem; }
  .wordmark, .scroll-cue { display: none; }
  .lang-switch { font-size: .55rem; }
  .lang-switch a { padding: .28rem .32rem; }
  .section-grid { grid-template-columns: 1fr; gap: 3rem; }
  .band { min-height: auto; }
  .band-grid { grid-template-columns: 1fr; }
  .media-grid, .subpage-head { grid-template-columns: 1fr; }
  .media-intro { min-height: 220px; }
  .media-card { min-height: min(118vw, 560px); }
  .gallery-grid { columns: 1; }
  .media-drawer { top: 58px; }
  .band-portrait { min-height: min(78svh, 680px); }
  .press { min-height: auto; grid-template-columns: 1fr; align-items: start; }
  .contact-art { width: min(85vw, 360px); height: auto; justify-self: start; }
  .music-hero { min-height: calc(100svh - 58px); padding: 3rem .75rem 5rem; }
  .deck-wrap { margin-top: 2rem; }
  .deck { width: 100%; margin-left: 0; }
  .deck-screen { padding-top: 3%; }
  .screen-kicker { font-size: .32rem; letter-spacing: .1em; }
  .deck-screen strong { margin-top: .15rem; font-size: clamp(.4rem, 2.2vw, .62rem); letter-spacing: .03em; }
  .time { font-size: .32rem; }
  .tape-label { width: 74%; margin-top: -4%; }
  .music-lower { padding: 0 .75rem; margin-top: 3rem; }
  .track-panels { grid-template-columns: 1fr; gap: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wave.playing i { animation: none; }
}

/* Cookie consent */
.consent-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; align-items: end; padding: 1rem; background: rgba(0,0,0,.64); }
.consent-panel { width: min(100%, 920px); margin: 0 auto; padding: clamp(1.25rem, 3vw, 2.25rem); border: 1px solid rgba(212,154,22,.55); background: #0b0906; box-shadow: 0 24px 80px rgba(0,0,0,.72); }
.consent-panel h2 { margin-bottom: 1rem; font-size: clamp(2rem, 4vw, 3.5rem); }
.consent-panel p { max-width: 52rem; margin: 0; color: #c5b99f; font-size: .86rem; line-height: 1.65; }
.consent-panel a { color: var(--yellow); }
.consent-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.consent-button { min-height: 44px; padding: .8rem 1rem; border: 1px solid var(--yellow); background: var(--yellow); color: #080705; font: 900 .72rem/1 "Courier New", monospace; letter-spacing: .08em; cursor: pointer; text-transform: uppercase; }
.consent-button.secondary { background: transparent; color: var(--yellow); }
.consent-button.tertiary { border-color: #6d6048; background: transparent; color: #c5b99f; }
.consent-options { display: grid; gap: .8rem; margin-top: 1.35rem; }
.consent-option { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid #49371f; }
.consent-option strong { display: block; color: #e1d4b7; font-size: .82rem; text-transform: uppercase; }
.consent-option small { display: block; margin-top: .35rem; color: #8f836d; line-height: 1.45; }
.consent-option input { width: 1.25rem; height: 1.25rem; accent-color: var(--yellow); }
.consent-settings { position: fixed; z-index: 900; right: 1rem; bottom: 1rem; padding: .65rem .8rem; border: 1px solid rgba(212,154,22,.5); background: #0b0906; color: var(--yellow); font: 800 .62rem/1 "Courier New", monospace; letter-spacing: .08em; cursor: pointer; text-transform: uppercase; }
.policy { max-width: 880px; }
.policy h2 { margin: 3rem 0 1rem; font-size: clamp(2rem, 4vw, 3.8rem); }
.policy h3 { margin: 2rem 0 .65rem; color: var(--yellow); text-transform: uppercase; }
.policy p, .policy li { color: #c5b99f; line-height: 1.75; }
.policy table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; color: #c5b99f; font-size: .82rem; }
.policy th, .policy td { padding: .8rem; border: 1px solid #49371f; text-align: left; vertical-align: top; }
.policy th { color: var(--yellow); text-transform: uppercase; }

@media (max-width: 620px) {
  .consent-actions { display: grid; }
  .consent-button { width: 100%; }
  .policy table, .policy tbody, .policy tr, .policy th, .policy td { display: block; }
  .policy th { border-bottom: 0; }
}