/* ==============================================================
   HONK Music & Records – Modern Refresh
   Shared stylesheet for all pages
   Atmosphere: open sea / coastal / timeless
   Sister site: jivihonk.com (same design DNA, different colour mood)
   All sizes in rem (1rem = 16px). Fonts embedded locally.
   ============================================================== */

/* -------- LOCAL WEBFONTS --------------------------------------
   Place the .woff2 files into the /fonts/ folder.
   The site works without them too (system fallback stack below).
   --------------------------------------------------------------- */

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Courier Prime';
    src: url('../fonts/CourierPrime-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Courier Prime';
    src: url('../fonts/CourierPrime-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* -------- DESIGN TOKENS --------------------------------------- */
:root {
    /* Sea-photo derived palette */
    --sea-deep:    #0e2e3d;
    --sea-mid:     #1d4f6a;
    --sea-light:   #2d6184;   /* original honkmusic blue – kept as accent */
    --sea-shallow: #4a9ba8;
    --sand:        #d4c4a0;
    --pink:        #d44da8;   /* HONK brand pink */
    --pink-light:  #e88dcc;
    --warm:        #eb9b6d;   /* navbar warm tone */
    --warm-deep:   #d97f4a;
    --white:       #ffffff;
    --off-white:   #f5f7f8;
    --text-dark:   #1a1a1a;
    --text-muted:  #4a5a60;
    --shadow:      rgba(0, 30, 50, 0.15);
    --radius:      0.375rem;     /* 6px  */
    --radius-lg:   0.625rem;     /* 10px */
    --max-w:       68.75rem;     /* 1100px */
    --focus-ring:  #ffc107;

    /* Font stacks */
    --font-body:   'Poppins', 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-mono:   'Courier Prime', 'Courier New', monospace;
}

/* -------- BASE ------------------------------------------------ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    font-size: 100%; /* anchor: 1rem = 16px */
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--white);
    min-height: 100vh;

    /* The press-photo as a calm continuous backdrop on every page */
    background-image:
        linear-gradient(rgba(14, 46, 61, 0.40), rgba(14, 46, 61, 0.62)),
        url('../Pressfoto_32_Meer.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: var(--sea-mid); /* fallback */
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; height: auto; }

*:focus-visible {
    outline: 0.1875rem solid var(--focus-ring);
    outline-offset: 0.125rem;
}

.skip-link {
    position: absolute;
    top: -6.25rem; left: 1rem;
    background: var(--focus-ring); color: var(--text-dark);
    padding: 0.5rem 1rem; border-radius: var(--radius);
    font-weight: 600; font-size: 0.875rem;
    z-index: 1000; transition: top 0.2s;
}
.skip-link:focus { top: 0.5rem; }


/* -------- NAVIGATION ----------------------------------------- */
.navbar {
    position: sticky; top: 0; z-index: 100;
    background: var(--warm);
    backdrop-filter: blur(0.5rem);
    -webkit-backdrop-filter: blur(0.5rem);
    border-bottom: 0.0625rem solid rgba(255,255,255,0.10);
    box-shadow: 0 0.125rem 0.75rem rgba(0,0,0,0.18);
}
.navbar-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1.5rem; gap: 1rem;
    min-height: 4.75rem;
}

/* Brand: real logo image, sized for the bar */
.nav-brand {
    display: flex; align-items: center; gap: 0.875rem;
    line-height: 1.1;
    flex-shrink: 0;
}
.nav-brand .brand-logo {
    width: 3.5rem; height: 2.75rem;
    object-fit: contain;
    background: var(--white);
    padding: 0.1875rem 0.375rem;
    border-radius: var(--radius);
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.18);
    flex-shrink: 0;
}
.nav-brand .brand-text {
    display: flex; flex-direction: column;
    font-family: var(--font-mono);
}
.nav-brand .brand-name {
    font-size: 1rem; font-weight: 700; letter-spacing: 0.09rem;
    color: var(--white);
    text-shadow: 0 0.0625rem 0.25rem rgba(0,0,0,0.25);
}
.nav-brand .brand-tag {
    font-size: 0.625rem; letter-spacing: 0.15rem; text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    font-family: var(--font-body);
    font-weight: 500;
}

.nav-links {
    display: flex; gap: 0.25rem; list-style: none;
}
.nav-links a {
    display: block; padding: 0.5rem 0.875rem;
    font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.05rem;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
    border-radius: var(--radius);
    transition: color 0.25s, background 0.25s;
}
.nav-links a:hover {
    color: var(--white);
    background: rgba(255,255,255,0.15);
}
.nav-links a.active {
    color: var(--white);
    background: rgba(255,255,255,0.18);
    border-bottom: 0.125rem solid var(--pink);
    border-radius: var(--radius) var(--radius) 0 0;
}

.menu-toggle {
    display: none; background: none; border: none; cursor: pointer;
    padding: 0.5rem;
}
.menu-toggle span {
    display: block; width: 1.5rem; height: 0.125rem;
    background: var(--white);
    margin: 0.3125rem 0; border-radius: 0.0625rem;
    transition: 0.3s;
}


/* -------- PAGE HERO ------------------------------------------ */
.hero {
    max-width: var(--max-w); margin: 0 auto;
    padding: 5rem 1.5rem 3rem;
    text-align: center;
    animation: fadeUp 0.8s ease-out;
}
.hero-eyebrow {
    display: inline-block;
    font-size: 0.6875rem; font-weight: 600;
    letter-spacing: 0.1875rem; text-transform: uppercase;
    color: var(--white);
    padding: 0.375rem 1rem;
    border: 0.0625rem solid rgba(255,255,255,0.35);
    border-radius: 1.25rem;
    margin-bottom: 1.75rem;
    backdrop-filter: blur(0.25rem);
    background: rgba(255,255,255,0.06);
}
.hero-title {
    font-family: var(--font-mono);
    font-size: 3.5rem; font-weight: 700;
    line-height: 1.05; margin-bottom: 1.125rem;
    text-shadow: 0 0.125rem 1.125rem rgba(0,0,0,0.35);
}
.hero-title .pink { color: var(--pink-light); }
.hero-subtitle {
    font-size: 1.25rem; font-weight: 600;
    color: rgba(255,255,255,0.92);
    max-width: 38.75rem; margin: 0 auto;
    line-height: 1.7;
    text-shadow: 0 0.0625rem 0.625rem rgba(0,0,0,0.3);
}
.hero-divider {
    width: 3.75rem; height: 0.1875rem;
    background: var(--pink);
    margin: 1.875rem auto 0; border-radius: 0.125rem;
}

/* compact hero for subpages */
.hero.hero-compact {
    padding: 3.5rem 1.5rem 2.25rem;
}
.hero.hero-compact .hero-title {
    font-size: 2.5rem;
}


/* -------- INFO / NEWS PILL ----------------------------------- */
.info-banner {
    max-width: var(--max-w); margin: 0 auto;
    padding: 0 1.5rem 2.5rem;
    text-align: center;
}
.info-banner h2 {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 1.75rem; font-weight: 700;
    color: var(--sea-light);
    background: var(--white);
    padding: 0.5rem 1.75rem;
    border-radius: var(--radius);
    box-shadow: 0 0.25rem 1.125rem rgba(0,0,0,0.18);
    letter-spacing: 0.0625rem;
}

.lang-flag {
    width: 18px;
    height: auto;
    display: block;
	margin-right: 10px;
}

/* -------- CONTENT SECTIONS + WHITE CARDS --------------------- */
.content-section {
    max-width: var(--max-w); margin: 0 auto;
    padding: 0 1.5rem 2.5rem;
}

.card {
    background: var(--white);
    color: var(--text-dark);
    border-radius: var(--radius);
    padding: 2.25rem 2.5rem;
    box-shadow: 0 0.375rem 1.75rem rgba(0,30,50,0.22);
    margin-bottom: 1.75rem;
    border: 0.0625rem solid rgba(255,255,255,0.4);
}
.card h2 {
    font-family: var(--font-mono);
    font-size: 1.5rem; font-weight: 700;
    color: var(--sea-light);
    margin-bottom: 0.875rem;
    letter-spacing: 0.03rem;
}
.card h3 {
    font-family: var(--font-mono);
    font-size: 1.1875rem; font-weight: 700;
    color: var(--sea-light);
    margin: 1.25rem 0 0.625rem;
    letter-spacing: 0.03rem;
}
.card p, .card li {
    font-size: 0.9375rem; font-weight: 400;
    color: var(--text-dark);
    margin-bottom: 0.875rem; line-height: 1.75;
}
.card p:last-child, .card li:last-child { margin-bottom: 0; }
.card ul { padding-left: 1.25rem; margin-bottom: 0.875rem; }
.card a {
    text-decoration: underline;
    text-underline-offset: 0.1875rem;
    text-decoration-color: rgba(45,97,132,0.4);
    transition: color 0.2s, text-decoration-color 0.2s;
}
.card a:hover {
    text-decoration-color: var(--pink);
}
.card a.pink-accent { color: var(--pink); font-weight: 500; }

.card-flag-row {
    display: inline-flex; align-items: center; gap: 0.625rem;
    margin: 0.5rem 0 0.875rem;
    font-size: 0.75rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.0625rem;
    color: var(--sea-light);
}
.card-flag-row .flag {
    display: inline-grid; place-items: center;
    width: 1.75rem; height: 1.1875rem;
    background: var(--sea-light);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: 0.6875rem; font-weight: 700;
    border-radius: 0.125rem;
    letter-spacing: 0;
}
.card-flag-row .flag.de { background: #c8102e; }
.card-flag-row .flag.en { background: #012169; }


/* -------- RELEASES GRID -------------------------------------- */
.releases-row-label {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 1.25rem;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    margin: 0.5rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 0.0625rem dashed rgba(255,255,255,0.18);
}

.releases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.release-card {
    background: var(--white);
    color: var(--text-dark);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 0.375rem 1.5rem rgba(0,30,50,0.22);
    display: flex; flex-direction: column;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    opacity: 0;
    animation: fadeUp 0.6s ease-out forwards;
}
.release-card:nth-child(1) { animation-delay: 0.05s; }
.release-card:nth-child(2) { animation-delay: 0.15s; }
.release-card:nth-child(3) { animation-delay: 0.25s; }

.release-card:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 0.75rem 2.25rem rgba(0,30,50,0.32);
}
.release-cover {
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, var(--sea-shallow), var(--sea-mid));
    display: grid; place-items: center;
    color: rgba(255,255,255,0.85);
    font-family: var(--font-mono);
    font-size: 0.8125rem; letter-spacing: 0.0625rem;
    position: relative;
    overflow: hidden;
}
.release-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.release-cover .placeholder-mark {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    text-align: center; padding: 1.25rem;
    background: linear-gradient(135deg, var(--sea-shallow), var(--sea-deep));
    color: rgba(255,255,255,0.9);
    font-family: var(--font-mono);
    line-height: 1.5;
}
.release-info {
    padding: 1.125rem 1.25rem 1.375rem;
    display: flex; flex-direction: column;
    gap: 0.5rem; flex: 1;
}
.release-info h3 {
    font-family: var(--font-mono);
    font-size: 1.0625rem; font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
}
.release-info .label-line {
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.03rem;
}
.release-info .yt-link {
    margin-top: 0.5rem;
    display: inline-flex; align-items: center; gap: 0.375rem;
    font-size: 0.75rem; font-weight: 500;
    color: var(--white);
    background: var(--sea-light);
    padding: 0.375rem 0.875rem;
    border-radius: 1.25rem;
    align-self: flex-start;
    transition: background 0.25s;
}
.release-info .yt-link:hover {
    background: var(--pink);
    color: var(--white);
    text-decoration: none;
}
.release-info .yt-link svg {
    width: 0.8125rem; height: 0.8125rem;
    fill: currentColor;
}


/* -------- AVAILABILITY + STREAMING ICONS --------------------- */
.availability {
    max-width: var(--max-w); margin: 0 auto;
    padding: 1.25rem 1.5rem 1.25rem;
    text-align: center;
}
.availability-text {
    font-family: var(--font-mono);
    font-size: 1.375rem; font-weight: 700;
    color: var(--pink-light);
    letter-spacing: 0.09rem;
    line-height: 1.45;
    text-shadow: 0 0.125rem 0.875rem rgba(0,0,0,0.4);
}

.streaming-icons {
    max-width: var(--max-w); margin: 0 auto;
    padding: 0.5rem 1.5rem 3.5rem;
    display: flex; justify-content: center;
    align-items: center; flex-wrap: wrap;
    gap: 1rem;
}
.streaming-icons a {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 3.75rem; height: 3.75rem;
    background: var(--white);
    border-radius: 50%;
    box-shadow: 0 0.25rem 0.875rem rgba(0,0,0,0.25);
    transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
}
.streaming-icons a:hover {
    transform: translateY(-0.1875rem) scale(1.05);
    box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,0.35);
}
.streaming-icons a svg {
    width: 1.875rem; height: 1.875rem;
}
.streaming-icons a .icon-label {
    position: absolute;
    width: 0.0625rem; height: 0.0625rem;
    padding: 0; margin: -0.0625rem;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}


/* -------- COZZMIC BANNER ------------------------------------- */
.cozzmic-banner {
    text-align: center;
    padding: 2.75rem 1.5rem;
    background: rgba(14, 46, 61, 0.85);
    backdrop-filter: blur(0.5rem);
    -webkit-backdrop-filter: blur(0.5rem);
    border-top: 0.0625rem solid rgba(255,255,255,0.08);
}
.cozzmic-banner .cozzmic-mark {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 1.875rem; font-weight: 700;
    letter-spacing: 0.25rem;
    color: var(--white);
    padding: 0.625rem 1.75rem;
    border: 0.125rem solid rgba(255,255,255,0.5);
    border-radius: 0.25rem;
    margin-bottom: 0.875rem;
    transition: border-color 0.25s, color 0.25s;
}
.cozzmic-banner a:hover .cozzmic-mark {
    color: var(--pink-light);
    border-color: var(--pink-light);
}
.cozzmic-banner p {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.7);
    margin-top: 0.25rem;
}
.cozzmic-banner .cozzmic-link {
    display: block;
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.55);
    margin-top: 0.625rem;
    letter-spacing: 0.0625rem;
}


/* -------- FOOTER --------------------------------------------- */
.footer {
    background: rgba(8, 28, 38, 0.95);
    padding: 1.5rem;
    text-align: center;
    border-top: 0.0625rem solid rgba(255,255,255,0.06);
}
.footer-inner {
    max-width: var(--max-w); margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.75rem;
}
.footer-copy {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.55);
}
.footer-links {
    display: flex; gap: 1.125rem; flex-wrap: wrap;
    justify-content: center;
}
.footer-links a {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.6);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.125rem;
    transition: color 0.25s, text-decoration-color 0.25s;
}
.footer-links a:hover {
    color: rgba(255,255,255,0.95);
    text-decoration-color: rgba(255,255,255,0.4);
}


/* -------- ARTIST CARDS (artists.html) ----------------------- */
.artist-card {
    background: var(--white);
    color: var(--text-dark);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 0.375rem 1.75rem rgba(0,30,50,0.22);
    margin-bottom: 1.75rem;
    display: grid;
    grid-template-columns: 16rem 1fr;
}
.artist-card-history {
    background: var(--pink);
    color: var(--text-dark);
    border-radius: var(--radius);
    margin-bottom: 1.75rem;
	padding: 0px 0px 0px 40px;
}




.artist-card .artist-img {
    background: linear-gradient(135deg, var(--sea-shallow), var(--sea-deep));
    min-height: 16rem;
    display: grid; place-items: center;
}
.artist-card .artist-img img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.artist-card .artist-body {
    padding: 1.875rem 2rem;
}
.artist-card .artist-header {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 0.625rem; margin-bottom: 0.625rem;
}
.artist-card h2 {
    font-family: var(--font-mono);
    font-size: 1.5rem; font-weight: 700;
    color: var(--sea-light);
    letter-spacing: 0.03rem;
}
.artist-card .genre-pill {
    display: inline-block;
    font-size: 0.6875rem;
    text-transform: uppercase; letter-spacing: 0.1rem;
    background: var(--warm);
    color: var(--white);
    padding: 0.25rem 0.625rem;
    border-radius: 1rem;
    font-weight: 600;
}
.artist-card .genre-pill.jazz   { background: #e3c44a; color: var(--text-dark); }
.artist-card .genre-pill.world  { background: #4caf50; }
.artist-card .genre-pill.latin  { background: #c44ad4; }
.artist-card p {
    font-size: 0.9375rem;
    color: var(--text-dark);
    margin-bottom: 0.875rem; line-height: 1.7;
}
.artist-card .disco {
    background: var(--off-white);
    border-left: 0.1875rem solid var(--pink);
    padding: 0.75rem 1rem;
    margin-top: 0.875rem;
    border-radius: 0 var(--radius) var(--radius) 0;
}
.artist-card .disco strong {
    display: block; font-size: 0.8125rem;
    text-transform: uppercase; letter-spacing: 0.0625rem;
    color: var(--sea-light); margin-bottom: 0.375rem;
}
.artist-card .disco-list {
    list-style: none; padding: 0;
}
.artist-card .disco-list li {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 0.125rem;
}


/* -------- PARTNER GRID (partner.html) ----------------------- */
.partner-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.partner-tile {
    background: var(--white);
    border-radius: var(--radius);
    padding: 1.5rem 1.25rem;
    box-shadow: 0 0.25rem 1.25rem rgba(0,30,50,0.22);
    display: grid; place-items: center;
    aspect-ratio: 4 / 3;
    transition: transform 0.3s, box-shadow 0.3s;
}
.partner-tile:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 0.625rem 1.875rem rgba(0,30,50,0.32);
}
.partner-tile img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
}
.partner-tile .partner-name {
    font-family: var(--font-mono);
    font-size: 1rem; font-weight: 700;
    color: var(--sea-light);
    text-align: center;
}


/* -------- CATEGORY LIST (downloadCDs.html) ------------------- */
.category-list {
    list-style: none; padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
.category-list a {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--white);
    color: var(--text-dark);
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    box-shadow: 0 0.25rem 0.875rem rgba(0,30,50,0.18);
    transition: transform 0.2s, background 0.2s, color 0.2s;
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.03rem;
    border-left: 0.25rem solid var(--pink);
}
.category-list a:hover {
    transform: translateX(0.25rem);
    background: var(--sea-light);
    color: var(--white);
}
.category-list a::after {
    content: '→';
    font-size: 1.125rem;
    opacity: 0.6;
}


/* -------- CONTACT INFO (contact.html) ------------------------ */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
}
.contact-grid .card { margin-bottom: 0; }
.contact-mail {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--pink);
    background: var(--off-white);
    padding: 0.625rem 1rem;
    border-radius: var(--radius);
    margin: 0.5rem 0;
    letter-spacing: 0.03rem;
    word-break: break-all;
}
.contact-address {
    font-style: normal;
    line-height: 1.85;
    font-size: 0.9375rem;
    color: var(--text-dark);
}


/* -------- LICENSING DOWNLOAD BLOCK --------------------------- */
.download-block {
    background: var(--sea-light);
    color: var(--white);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    display: flex; align-items: center; gap: 1rem;
    margin: 1rem 0;
    transition: background 0.25s, transform 0.25s;
}
.download-block:hover {
    background: var(--pink);
    transform: translateY(-0.125rem);
}
.download-block .dl-icon {
    width: 2.5rem; height: 2.5rem;
    background: rgba(255,255,255,0.18);
    border-radius: 50%;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.download-block .dl-icon svg {
    width: 1.375rem; height: 1.375rem;
    fill: var(--white);
}
.download-block .dl-text strong {
    display: block;
    font-family: var(--font-mono);
    font-size: 1rem;
    letter-spacing: 0.0625rem;
    margin-bottom: 0.125rem;
}
.download-block .dl-text span {
    display: block;
    font-size: 0.8125rem;
    opacity: 0.85;
}

.licensing-preview {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
    margin-top: 1.25rem;
}
.licensing-preview img {
    border-radius: var(--radius);
    box-shadow: 0 0.25rem 1rem rgba(0,30,50,0.25);
    transition: transform 0.3s, box-shadow 0.3s;
}
.licensing-preview img:hover {
    transform: scale(1.02);
    box-shadow: 0 0.5rem 1.5rem rgba(0,30,50,0.4);
}


/* -------- CATEGORY PAGES (musikkategorien) ------------------- */
.cat-pills {
    max-width: var(--max-w); margin: 0 auto 1.5rem;
    padding: 0 1.5rem;
    display: flex; flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}
.cat-pills a {
    display: inline-block;
    padding: 0.4375rem 0.9375rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.03rem;
    color: var(--white);
    background: rgba(45,97,132,0.45);
    border: 0.0625rem solid rgba(255,255,255,0.15);
    border-radius: 1.5rem;
    transition: background 0.25s, border-color 0.25s, transform 0.2s;
    text-decoration: none;
}
.cat-pills a:hover {
    background: var(--sea-light);
    border-color: rgba(255,255,255,0.3);
    transform: translateY(-0.0625rem);
    text-decoration: none;
}
.cat-pills a.current {
    background: var(--pink);
    border-color: var(--pink-light);
    color: var(--white);
    font-weight: 500;
}

.releases-list {
    max-width: var(--max-w); margin: 0 auto;
    padding: 0 1.5rem 1.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
.release-row {
    background: var(--white);
    color: var(--text-dark);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 0.375rem 1.5rem rgba(0,30,50,0.22);
    display: grid;
    grid-template-columns: 11rem 1fr;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    opacity: 0;
    animation: fadeUp 0.6s ease-out forwards;
}
.release-row:nth-child(1) { animation-delay: 0.05s; }
.release-row:nth-child(2) { animation-delay: 0.10s; }
.release-row:nth-child(3) { animation-delay: 0.15s; }
.release-row:nth-child(4) { animation-delay: 0.20s; }
.release-row:nth-child(5) { animation-delay: 0.25s; }
.release-row:nth-child(6) { animation-delay: 0.30s; }
.release-row:nth-child(7) { animation-delay: 0.35s; }
.release-row:hover {
    transform: translateY(-0.1875rem);
    box-shadow: 0 0.75rem 2.25rem rgba(0,30,50,0.32);
}
.release-row .release-cover {
    aspect-ratio: 1 / 1;
    width: 100%;
}
.release-row .release-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.release-row .release-info {
    padding: 1.25rem 1.5rem 1.375rem;
    gap: 0.5rem;
}
.release-row .release-info h3 {
    font-family: var(--font-mono);
    font-size: 1.125rem; font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
    margin: 0;
}
.release-row .release-desc {
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 0.25rem 0 0.5rem;
}
.release-row .catalog {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--sea-light);
    letter-spacing: 0.03rem;
    margin: 0;
}
.release-row .listen-link {
    margin-top: 0.5rem;
    display: inline-flex; align-items: center; gap: 0.4375rem;
    font-family: var(--font-mono);
    font-size: 0.8125rem; font-weight: 600;
    color: var(--white);
    background: var(--sea-light);
    padding: 0.4375rem 1rem;
    border-radius: 1.5rem;
    align-self: flex-start;
    transition: background 0.25s, transform 0.2s;
    text-decoration: none;
}
.release-row .listen-link:hover {
    background: var(--pink);
    text-decoration: none;
    transform: translateY(-0.0625rem);
}
.release-row .listen-link svg {
    width: 0.875rem; height: 0.875rem;
    fill: currentColor;
}

.empty-state {
    max-width: var(--max-w); margin: 0 auto;
    padding: 3rem 1.5rem;
    text-align: center;
    color: rgba(255,255,255,0.85);
}
.empty-state .empty-card {
    background: rgba(14,46,61,0.55);
    border: 0.0625rem dashed rgba(255,255,255,0.25);
    border-radius: var(--radius);
    padding: 2.5rem 1.75rem;
    max-width: 32rem; margin: 0 auto;
}
.empty-state h3 {
    font-family: var(--font-mono);
    color: var(--white);
    margin-bottom: 0.625rem;
    font-size: 1.25rem;
}
.empty-state p {
    color: rgba(255,255,255,0.75);
    margin: 0;
    font-size: 0.9375rem;
}


/* -------- ANIMATIONS ----------------------------------------- */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(1rem); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
}


/* -------- RESPONSIVE ----------------------------------------- */
@media (max-width: 56.25rem) { /* 900px */
    .releases-grid    { grid-template-columns: repeat(2, 1fr); }
    .partner-grid     { grid-template-columns: repeat(2, 1fr); }
    .hero-title       { font-size: 2.625rem; }
    .artist-card      { grid-template-columns: 12rem 1fr; }
    .contact-grid     { grid-template-columns: 1fr; }
}

@media (max-width: 40rem) { /* 640px */
    body { background-attachment: scroll; }

    .nav-links {
        display: none;
        position: absolute; top: 4.75rem; left: 0; right: 0;
        flex-direction: column; gap: 0.125rem;
        background: rgba(14,46,61,0.97);
        padding: 0.75rem 1.5rem 1.25rem;
        border-bottom: 0.0625rem solid rgba(255,255,255,0.1);
    }
    .nav-links.open { display: flex; }
    .menu-toggle    { display: block; }
    .nav-brand .brand-tag { display: none; }

    .hero               { padding: 3rem 1.25rem 2rem; }
    .hero-title         { font-size: 2rem; }
    .hero-subtitle      { font-size: 0.9375rem; }
    .hero.hero-compact .hero-title { font-size: 1.75rem; }

    .info-banner h2     { font-size: 1.375rem; padding: 0.5rem 1.25rem; }
    .card               { padding: 1.5rem 1.375rem; }
    .releases-grid      { grid-template-columns: 1fr; }
    .partner-grid       { grid-template-columns: 1fr; }
    .category-list      { grid-template-columns: 1fr; }
    .availability-text  { font-size: 1.0625rem; }
    .cozzmic-banner .cozzmic-mark { font-size: 1.375rem; letter-spacing: 0.1875rem; padding: 0.5rem 1.25rem; }
    .footer-inner       { flex-direction: column; gap: 0.625rem; }

    .artist-card        { grid-template-columns: 1fr; }
    .artist-card .artist-img { min-height: 14rem; max-height: 18rem; }
    .artist-card .artist-body { padding: 1.5rem; }

    .streaming-icons a  { width: 3.125rem; height: 3.125rem; }
    .streaming-icons a svg { width: 1.5rem; height: 1.5rem; }

    .licensing-preview  { grid-template-columns: 1fr; }

    .release-row        { grid-template-columns: 1fr; }
    .release-row .release-cover { aspect-ratio: 16 / 9; }
    .cat-pills          { padding: 0 1rem; }
    .cat-pills a        { font-size: 0.75rem; padding: 0.375rem 0.75rem; }
}