/* ==============================================
   J.HONK Website – Shared Styles
   Fonts: Poppins (body), Courier Prime (headings)
   WCAG 2.1 AA compliant
   All sizes in rem. 1 rem = root font-size.
   ============================================== */


/* ==============================================
   CENTRAL FONT SIZE – the one knob to rule them all.
   Change this single value to scale the entire website.
   100%  = 16px (browser default, respects user settings)
   112.5% = 18px
   87.5% = 14px
   ============================================== */
html {
    font-size: 100%;
    scroll-behavior: smooth;
}


/* ---------- LOCAL FONT FACES ---------- */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/poppins-latin-ext-300-normal.woff2') format('woff2'),
         url('../fonts/poppins-latin-300-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/poppins-latin-ext-400-normal.woff2') format('woff2'),
         url('../fonts/poppins-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/poppins-latin-ext-500-normal.woff2') format('woff2'),
         url('../fonts/poppins-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/poppins-latin-ext-600-normal.woff2') format('woff2'),
         url('../fonts/poppins-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/poppins-latin-ext-700-normal.woff2') format('woff2'),
         url('../fonts/poppins-latin-700-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Courier Prime';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/courier-prime-latin-ext-400-normal.woff2') format('woff2'),
         url('../fonts/courier-prime-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Courier Prime';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/courier-prime-latin-ext-700-normal.woff2') format('woff2'),
         url('../fonts/courier-prime-latin-700-normal.woff2') format('woff2');
}


/* ---------- CSS VARIABLES ---------- */
:root {
    /* Colors */
    --petrol: #1a5c6b;
    --petrol-dark: #134a56;
    --petrol-darker: #0f3a44;
    --petrol-light: #237a8d;
    --pink: #d44da8;
    --pink-light: #d44da8;        /* lighter pink for decorative on dark bg */
    --pink-on-white: #b8368e;     /* darker pink for text on white – 5.2:1 contrast */
    --white: #ffffff;
    --off-white: #f5f7f8;
    --text-dark: #1a1a1a;
    --text-muted: #4a5a60;        /* 4.7:1 on white – AA pass */
    --shadow: rgba(0, 0, 0, 0.15);
    --focus-ring: #ffc107;        /* high-vis yellow focus ring */

    /* Layout */
    --radius: 0.375rem;           /* 6px */
    --max-w: 68.75rem;            /* 1100px */
}


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

body {
    font-family: 'Poppins', 'Segoe UI', Helvetica, Arial, sans-serif;
    background-color: var(--petrol);
    color: var(--white);
    line-height: 1.6;
    min-height: 100vh;
    font-size: 1rem;              /* 16px */
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}


/* ---------- WCAG: FOCUS STYLES ---------- */
*:focus-visible {
    outline: 0.1875rem solid var(--focus-ring);   /* 3px */
    outline-offset: 0.125rem;                     /* 2px */
}


/* ---------- SKIP NAVIGATION (WCAG) ---------- */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;                   /* 16px */
    background: var(--focus-ring);
    color: var(--text-dark);
    padding: 0.5rem 1rem;         /* 8px 16px */
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.875rem;          /* 14px */
    z-index: 1000;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 0.5rem;                  /* 8px */
}


/* ---------- NAVIGATION ---------- */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--petrol-dark);
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1);   /* 1px */
}

.navbar-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;            /* 0 24px */
    height: 4rem;                 /* 64px */
}

.nav-brand {
    font-size: 1.625rem;          /* 26px */
    font-weight: 700;
    color: var(--pink-light);     /* decorative, not body text */
    letter-spacing: 0.125rem;     /* 2px */
    white-space: nowrap;
}

.nav-brand-home {
    font-size: 1.625rem;          /* 26px */
    font-weight: 700;
    color: #ffffff;     /* decorative, not body text */
    letter-spacing: 0.125rem;     /* 2px */
    white-space: nowrap;
}


.nav-links {
    display: flex;
    gap: 0.25rem;                 /* 4px */
    list-style: none;
}

.nav-links a {
    display: block;
    padding: 0.5rem 1rem;         /* 8px 16px */
    font-size: 1rem;              /* 16px */
    font-weight: 500;
    letter-spacing: 0.05rem;      /* 0.8px */
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    border-radius: var(--radius);
    transition: color 0.25s, background 0.25s;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--white);
    background: rgba(255, 255, 255, 0.12);
}

.nav-links a.active {
    border-bottom: 0.125rem solid var(--pink);   /* 2px */
}

/* Mobile menu toggle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;              /* 8px */
}

.menu-toggle span {
    display: block;
    width: 1.5rem;                /* 24px */
    height: 0.125rem;             /* 2px */
    background: var(--white);
    margin: 0.3125rem 0;          /* 5px */
    border-radius: 0.0625rem;     /* 1px */
    transition: 0.3s;
}


/* ---------- PAGE HEADER (used on subpages) ---------- */
.page-header {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 3.125rem 1.5rem 1.875rem;   /* 50px 24px 30px */
}

.page-header h1 {
    font-size: 2.25rem;           /* 36px */
    font-weight: 700;
    margin-bottom: 0.5rem;        /* 8px */
}

.page-header .subtitle {
    font-size: 0.9375rem;         /* 15px */
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
}

/* used to override the white anchor in songs.html subtitle */
.page-header .subtitle a {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 0.1875rem;   /* 3px */
}

.page-header .accent-line {
    width: 3.125rem;              /* 50px */
    height: 0.1875rem;            /* 3px */
    background: var(--pink);
    margin-top: 1rem;             /* 16px */
    border-radius: 0.125rem;      /* 2px */
}


/* ---------- SECTION ON WHITE BACKGROUND ---------- */
.section-light {
    background: var(--off-white);
    padding: 3.125rem 1.5rem 3.75rem;   /* 50px 24px 60px */
    color: var(--text-dark);
}

.section-inner {
    max-width: var(--max-w);
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 2.5rem;        /* 40px */
}

.section-header h2 {
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-size: 1.75rem;           /* 28px */
    font-weight: 700;
    color: var(--petrol);
    margin-bottom: 0.375rem;      /* 6px */
}

.section-header p {
    font-size: 1.25rem;           /* 20px */
    color: var(--text-muted);
    font-weight: bold;
}

.section-header .accent-line {
    width: 3.125rem;              /* 50px */
    height: 0.1875rem;            /* 3px */
    background: var(--pink);
    margin: 0.875rem auto 0;      /* 14px */
    border-radius: 0.125rem;      /* 2px */
}


/* ---------- CONTENT BLOCKS ON PETROL ---------- */
.content-petrol {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 2.5rem 1.5rem 3.125rem;   /* 40px 24px 50px */
}

.content-petrol h2 {
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-size: 1.5rem;            /* 24px */
    margin-bottom: 1rem;          /* 16px */
}

.content-petrol p {
    margin-bottom: 0.875rem;      /* 14px */
    line-height: 1.7;
    font-weight: 300;
}

.content-petrol a {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 0.1875rem;   /* 3px */
}

.content-petrol a:hover {
    color: var(--pink-light);
}


/* ---------- COVER GRID ---------- */
.covers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;                  /* 24px */
}

.cover-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 0.125rem 0.625rem var(--shadow);   /* 0 2px 10px */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    gap: 1.125rem;                /* 18px */
    padding: 0.875rem;            /* 14px */
}

.cover-card:hover {
    transform: translateY(-0.1875rem);   /* -3px */
    box-shadow: 0 0.375rem 1.25rem rgba(0, 0, 0, 0.18);   /* 0 6px 20px */
}

.cover-card img {
    width: 6.875rem;              /* 110px */
    height: 6.875rem;             /* 110px */
    border-radius: 0.25rem;       /* 4px */
    object-fit: cover;
    flex-shrink: 0;
}

.cover-info {
    flex: 1;
    min-width: 0;
}

.cover-info h3 {
    font-size: 0.9375rem;         /* 15px */
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.1875rem;     /* 3px */
}

.cover-info .label {
    font-size: 0.75rem;           /* 12px */
    color: var(--text-muted);
    margin-bottom: 0.625rem;      /* 10px */
}

/* small "(Single)" tag inside a cover-card heading (was inline style in index) */
.cover-info .single-tag {
    font-weight: 300;
    font-size: 0.8125rem;         /* 13px */
}

.btn-yt {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;                /* 6px */
    font-size: 0.75rem;           /* 12px */
    font-weight: 500;
    color: var(--white);
    background: var(--petrol);
    padding: 0.375rem 0.875rem;   /* 6px 14px */
    border-radius: 1.25rem;       /* 20px */
    transition: background 0.25s;
}

.btn-yt:hover {
    background: var(--pink);
}

.btn-yt svg {
    width: 0.875rem;              /* 14px */
    height: 0.875rem;             /* 14px */
    fill: currentColor;
}


/* ---------- PHOTO GRID (photos.html) ---------- */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));   /* 300px */
    gap: 1.5rem;                  /* 24px */
}

.photo-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 0.125rem 0.625rem var(--shadow);
    transition: transform 0.3s ease;
}

.photo-card:hover {
    transform: translateY(-0.125rem);   /* -2px */
}

.photo-card img {
    width: 100%;
    height: 16.25rem;             /* 260px */
    object-fit: contain;
}

.photo-card figcaption {
    padding: 0.75rem 0.875rem;    /* 12px 14px */
    font-size: 0.75rem;           /* 12px */
    color: var(--text-muted);
    line-height: 1.5;
}

/* photos.html – notice above the gallery */
.photo-notice {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 1.5rem 1.875rem;   /* 0 24px 30px */
    font-size: 1rem;              /* 16px */
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    font-weight: bold;
}


/* ---------- PARTNER GRID ---------- */
.partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr));   /* 260px */
    gap: 1.5rem;                  /* 24px */
}

.partner-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 1.875rem;            /* 30px */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.125rem 0.625rem var(--shadow);
    transition: transform 0.3s;
    min-height: 10rem;            /* 160px */
}

.partner-card:hover {
    transform: translateY(-0.125rem);   /* -2px */
}

.partner-card img {
    max-height: 7.5rem;           /* 120px */
    max-width: 12.5rem;           /* 200px */
    object-fit: contain;
}


/* ---------- SONGS LIST ---------- */
.songs-list {
    list-style: none;
}

.songs-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.125rem;   /* 14px 18px */
    background: var(--white);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;        /* 8px */
    box-shadow: 0 0.0625rem 0.25rem var(--shadow);   /* 0 1px 4px */
    transition: transform 0.2s;
}

.songs-list li:hover {
    transform: translateX(0.25rem);   /* 4px */
}

.songs-list .song-title {
    font-size: 0.9375rem;         /* 15px */
    font-weight: 500;
    color: var(--text-dark);
}

.songs-list .song-link {
    font-size: 0.75rem;           /* 12px */
    font-weight: 500;
    color: var(--petrol);
    text-decoration: underline;
    text-underline-offset: 0.125rem;   /* 2px */
}

.songs-list .song-link:hover {
    color: var(--pink-on-white);
}


/* ---------- CONTACT CARD ---------- */
.contact-card {
    background: rgba(255, 255, 255, 0.08);
    border: 0.0625rem solid rgba(255, 255, 255, 0.15);   /* 1px */
    border-radius: var(--radius);
    padding: 2.25rem 2.5rem;      /* 36px 40px */
    max-width: 37.5rem;           /* 600px */
}

.contact-card h2 {
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-size: 1.375rem;          /* 22px */
    margin-bottom: 1.125rem;      /* 18px */
}

.contact-card p {
    font-weight: 300;
    margin-bottom: 0.5rem;        /* 8px */
    line-height: 1.6;
}

.contact-card .copyright-block {
    margin-top: 1.25rem;          /* 20px */
}

.contact-card .disclaimer {
    margin-top: 1.5rem;           /* 24px */
    font-size: 0.8125rem;         /* 13px */
    color: rgba(255, 255, 255, 0.6);
}

.contact-card .email-link {
    display: inline-block;
    margin-top: 0.625rem;         /* 10px */
    padding: 0.5rem 1.25rem;      /* 8px 20px */
    border: 0.0625rem solid rgba(255, 255, 255, 0.3);
    border-radius: 1.25rem;       /* 20px */
    font-size: 0.875rem;          /* 14px */
    transition: background 0.25s, border-color 0.25s;
}

.contact-card .email-link:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}


/* ---------- COZZMIC CLUB BANNER ---------- */
.cozzmic-banner {
    text-align: center;
    padding: 2.25rem 1.5rem;      /* 36px 24px */
    background: var(--petrol-dark);
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.06);
}

.cozzmic-banner img {
    max-width: 15rem;             /* 240px */
    margin: 0 auto 0.75rem;       /* 12px */
    opacity: 0.8;
    transition: opacity 0.3s;
}

.cozzmic-banner img:hover {
    opacity: 1;
}

.cozzmic-banner p {
    font-size: 0.8125rem;         /* 13px */
    color: rgba(255, 255, 255, 0.55);
}


/* ---------- FOOTER ---------- */
.footer {
    background: var(--petrol-darker);
    padding: 1.5rem;              /* 24px */
    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.625rem;                /* 10px */
}

.footer-copy {
    font-size: 0.75rem;           /* 12px */
    color: rgba(255, 255, 255, 0.55);
}

.footer-links {
    display: flex;
    gap: 1.125rem;                /* 18px */
}

.footer-links a {
    font-size: 0.75rem;           /* 12px */
    color: rgba(255, 255, 255, 0.55);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.125rem;   /* 2px */
    transition: color 0.25s, text-decoration-color 0.25s;
}

.footer-links a:hover {
    color: rgba(255, 255, 255, 0.85);
    text-decoration-color: rgba(255, 255, 255, 0.4);
}


/* ==============================================
   PAGE-SPECIFIC STYLES
   (moved here from inline <style> blocks)
   ============================================== */


/* ---------- index_enter.html – HERO ---------- */
.hero {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 3.4375rem 1.5rem 2.8125rem;   /* 55px 24px 45px */
    display: flex;
    align-items: center;
    gap: 3rem;                    /* 48px */
    animation: fadeUp 0.7s ease-out;
}

.hero-photo {
    flex-shrink: 0;
}

.hero-photo img {
    width: 21.875rem;             /* 350px */
    height: 21.875rem;            /* 350px */
    border-radius: 50%;
    object-fit: cover;
    border: 0.1875rem solid rgba(255, 255, 255, 0.2);   /* 3px */
    box-shadow: 0 0.5rem 1.75rem rgba(0, 0, 0, 0.3);    /* 0 8px 28px */
}

.hero-text {
    flex: 1;
}

.hero-label {
    display: inline-block;
    font-size: 0.6875rem;         /* 11px */
    font-weight: 600;
    letter-spacing: 0.15625rem;   /* 2.5px */
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 0.75rem;       /* 12px */
}

.hero-title {
    font-size: 3.75rem;           /* 60px */
    font-weight: 700;
	color: var(--pink-light);
    line-height: 1.1;
    margin-bottom: 1.125rem;      /* 18px */
}

.hero-desc {
    font-size: 1.125rem;          /* 18px */
    font-weight: 600;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    max-width: 35rem;             /* 560px */
}

.hero-desc a {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 0.1875rem;   /* 3px */
}

.hero-desc a:hover {
    color: var(--pink-light);
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;                /* 10px */
    margin-top: 1.25rem;          /* 20px */
}
.hero-badges img {
    height: 20px;
    width: auto;
    display: block;
}


.badge {
    font-size: 0.6875rem;         /* 11px */
    font-weight: 500;
    letter-spacing: 0.0625rem;    /* 1px */
    text-transform: uppercase;
    padding: 0.375rem 0.875rem;   /* 6px 14px */
    border: 0.0625rem solid rgba(255, 255, 255, 0.3);
    border-radius: 1.25rem;       /* 20px */
    color: rgba(255, 255, 255, 0.8);
}

.hero-sub {
    margin-top: 0.75rem;          /* 12px */
    font-size: 0.8125rem;         /* 13px */
    color: rgba(255, 255, 255, 0.65);
}

/* index_enter.html – staggered cover fade-in */
.cover-card {
    opacity: 0;
    animation: fadeUp 0.45s ease-out forwards;
}
.cover-card:nth-child(1)  { animation-delay: 0.05s; }
.cover-card:nth-child(2)  { animation-delay: 0.10s; }
.cover-card:nth-child(3)  { animation-delay: 0.15s; }
.cover-card:nth-child(4)  { animation-delay: 0.20s; }
.cover-card:nth-child(5)  { animation-delay: 0.25s; }
.cover-card:nth-child(6)  { animation-delay: 0.30s; }
.cover-card:nth-child(7)  { animation-delay: 0.35s; }
.cover-card:nth-child(8)  { animation-delay: 0.40s; }
.cover-card:nth-child(9)  { animation-delay: 0.45s; }
.cover-card:nth-child(10) { animation-delay: 0.50s; }
.cover-card:nth-child(11) { animation-delay: 0.55s; }
.cover-card:nth-child(12) { animation-delay: 0.60s; }
.cover-card:nth-child(13) { animation-delay: 0.65s; }
.cover-card:nth-child(14) { animation-delay: 0.70s; }
.cover-card:nth-child(15) { animation-delay: 0.75s; }
.cover-card:nth-child(16) { animation-delay: 0.80s; }


/* ---------- bio.html – BIO LAYOUT ---------- */
.bio-layout {
    display: flex;
    gap: 2.5rem;                  /* 40px */
    align-items: flex-start;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 1.5rem 3.125rem;   /* 0 24px 50px */
}

.bio-photo {
    flex-shrink: 0;
}

.bio-photo img {
    width: 12.5rem;               /* 200px */
    border-radius: var(--radius);
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.3);   /* 0 4px 16px */
}

.bio-text {
    flex: 1;
}

.bio-text h2 {
    font-family: 'Poppins', 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 2rem;          /* 22px */
    margin: 2.25rem 0 0.625rem;   /* 36px ... 10px */
    color: var(--white);
}

.bio-text h2:first-of-type {
    margin-top: 0;
}

.bio-text p {
    font-weight: 300;
    line-height: 1.7;
    margin-bottom: 1.25rem;      
    color: rgba(255, 255, 255, 0.9);
}

.lang-tag {
    display: inline-flex;
    font-size: 0.6875rem;         /* 11px */
    font-weight: 600;
    letter-spacing: 0.125rem;     /* 2px */
    text-transform: uppercase;
    padding: 0.25rem 0.75rem;     /* 4px 12px */
    border: 0.0625rem solid rgba(255, 255, 255, 0.3);
    border-radius: 0.875rem;      /* 14px */
    margin-bottom: 0.875rem;      /* 14px */
    color: rgba(255, 255, 255, 0.8);
}


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

.disco-section {
    margin-top: 1.875rem;         /* 30px */
}

.disco-section h3 {
    font-size: 1rem;              /* 16px */
    font-weight: 600;
    margin: 1rem 0 0.375rem;      /* 16px ... 6px */
}

.disco-section ul {
    list-style: none;
    padding: 0;
    margin: 0 0 0.625rem;         /* 10px */
}

.disco-section li {
    font-weight: 300;
    font-size: 0.875rem;          /* 14px */
    padding: 0.1875rem 0;         /* 3px */
    color: rgba(255, 255, 255, 0.85);
}

.bio-divider {
    border: none;
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.15);   /* 1px */
    margin: 2.5rem 0;             /* 40px */
}


/* ---------- contact.html – CONTACT FORM ---------- */
.contact-form-wrap {
    max-width: 36.25rem;          /* 580px */
    width: 100%;
}

.contact-form-wrap h2 {
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-size: 1.375rem;          /* 22px */
    margin-bottom: 1.375rem;      /* 22px */
}

.contact-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.form-group {
    margin-bottom: 1.125rem;      /* 18px */
}

.form-group label {
    display: block;
    font-size: 0.8125rem;         /* 13px */
    font-weight: 500;
    letter-spacing: 0.03125rem;   /* 0.5px */
    margin-bottom: 0.375rem;      /* 6px */
    color: rgba(255, 255, 255, 0.85);
}

.form-group label .required {
    color: var(--pink-light);
    margin-left: 0.125rem;        /* 2px */
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;        /* 12px 16px */
    font-family: 'Poppins', sans-serif;
    font-size: 0.9375rem;         /* 15px */
    color: var(--text-dark);
    background: var(--white);
    border: 0.125rem solid rgba(255, 255, 255, 0.2);   /* 2px */
    border-radius: var(--radius);
    transition: border-color 0.25s, box-shadow 0.25s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--pink);
    box-shadow: 0 0 0 0.1875rem rgba(212, 77, 168, 0.25);   /* 3px */
}

.form-group textarea {
    min-height: 9.375rem;         /* 150px */
    resize: vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #999;
}

.btn-send {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;                  /* 8px */
    padding: 0.75rem 2rem;        /* 12px 32px */
    font-family: 'Poppins', sans-serif;
    font-size: 0.9375rem;         /* 15px */
    font-weight: 600;
    color: var(--white);
    background: var(--pink);
    border: none;
    border-radius: 1.75rem;       /* 28px */
    cursor: pointer;
    transition: background 0.25s, transform 0.15s;
    letter-spacing: 0.03125rem;   /* 0.5px */
}

.btn-send:hover {
    background: var(--petrol-light);
    transform: translateY(-0.0625rem);   /* -1px */
}

.btn-send:active {
    transform: translateY(0);
}

.btn-send svg {
    width: 1.125rem;              /* 18px */
    height: 1.125rem;             /* 18px */
    fill: currentColor;
}

/* Status messages */
.form-status {
    margin-top: 1rem;             /* 16px */
    padding: 0.875rem 1.125rem;   /* 14px 18px */
    border-radius: var(--radius);
    font-size: 0.875rem;          /* 14px */
    font-weight: 500;
    display: none;
}

.form-status.success {
    display: block;
    background: rgba(76, 175, 80, 0.15);
    border: 0.0625rem solid rgba(76, 175, 80, 0.4);
    color: #a5d6a7;
}

.form-status.error {
    display: block;
    background: rgba(244, 67, 54, 0.15);
    border: 0.0625rem solid rgba(244, 67, 54, 0.4);
    color: #ef9a9a;
}

/* noscript warning (was inline style) */
.noscript-warning {
    padding: 0.875rem 1.125rem;   /* 14px 18px */
    background: rgba(244, 67, 54, 0.15);
    border: 0.0625rem solid rgba(244, 67, 54, 0.4);
    border-radius: var(--radius);
    color: #ef9a9a;
    font-size: 0.875rem;          /* 14px */
    margin-bottom: 1.125rem;      /* 18px */
}

/* Honeypot – hidden from humans */
.hp-field {
    position: absolute;
    left: -625rem;                /* -10000px equivalent, off-screen */
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
}

/* Two-column layout (contact page) */
.contact-columns {
    display: flex;
    gap: 3.125rem;                /* 50px */
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 1.5rem 5rem;       /* 0 24px 80px */
    align-items: flex-start;
}


/* ---------- media1.html – MEDIA GRID ---------- */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));   /* 320px */
    gap: 1.75rem;                 /* 28px */
}

.media-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 0.125rem 0.625rem var(--shadow);
}

.media-card img {
    width: 100%;
    height: auto;
}

.media-card .caption {
    padding: 1rem;                /* 16px */
    font-size: 0.875rem;          /* 14px */
    color: var(--text-dark);
    line-height: 1.5;
}


/* ---------- rechtliches.html – LEGAL ---------- */
.legal-content {
    max-width: 50rem;             /* 800px */
    margin: 0 auto;
    padding: 0 1.5rem 3.75rem;    /* 0 24px 60px */
}

.legal-content h2 {
    font-family: 'Courier Prime', 'Courier New', monospace;
    font-size: 1.375rem;          /* 22px */
    margin: 2.25rem 0 0.75rem;    /* 36px ... 12px */
    color: var(--white);
}

.legal-content h2:first-of-type {
    margin-top: 0;
}

.legal-content p {
    font-weight: 300;
    line-height: 1.7;
    margin-bottom: 0.75rem;       /* 12px */
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;         /* 15px */
}

.legal-content a {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 0.1875rem;   /* 3px */
}

.legal-content a:hover {
    color: var(--pink-light);
}

.legal-divider {
    border: none;
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.12);   /* 1px */
    margin: 2.25rem 0;            /* 36px */
}


/* ==============================================
   RESPONSIVE
   Breakpoints in rem:
   53.75rem = 860px
   43.75rem = 700px
   40rem    = 640px
   ============================================== */

@media (max-width: 53.75rem) {       /* 860px */
    .covers-grid {
        grid-template-columns: 1fr;
    }

    .page-header h1 {
        font-size: 1.75rem;            /* 28px */
    }

    /* index_enter.html – hero collapses */
    .hero {
        flex-direction: column;
        text-align: center;
        gap: 1.75rem;                  /* 28px */
        padding: 2.5rem 1.5rem;        /* 40px 24px */
    }

    .hero-desc {
        margin: 0 auto;
    }

    .hero-badges {
        justify-content: center;
    }

    .hero-title {
        font-size: 2.125rem;           /* 34px */
    }

    /* contact.html – columns stack */
    .contact-columns {
        flex-direction: column;
        gap: 2.5rem;                   /* 40px */
    }

    .contact-form-wrap {
        max-width: 100%;
    }
}

@media (max-width: 43.75rem) {       /* 700px – bio layout */
    .bio-layout {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .bio-photo img {
        width: 10rem;                  /* 160px */
    }
}

@media (max-width: 40rem) {          /* 640px */
    .nav-links {
        display: none;
        position: absolute;
        top: 4rem;                     /* 64px */
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--petrol-dark);
        padding: 0.75rem 1.5rem 1.25rem;   /* 12px 24px 20px */
        border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.1);
        gap: 0.125rem;                 /* 2px */
    }

    .nav-links.open {
        display: flex;
    }

    .menu-toggle {
        display: block;
    }

    .page-header h1 {
        font-size: 1.5rem;             /* 24px */
    }

    .cover-card {
        flex-direction: column;
        text-align: center;
        padding: 1.125rem;             /* 18px */
    }

    .cover-card img {
        width: 100%;
        height: auto;
        max-width: 13.75rem;           /* 220px */
        margin: 0 auto;
    }

    .photo-grid {
        grid-template-columns: 1fr;
    }

    .partner-grid {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        flex-direction: column;
        gap: 0.5rem;                   /* 8px */
    }

    .contact-card {
        padding: 1.5rem 1.25rem;       /* 24px 20px */
    }

    /* index_enter.html – hero further reduces */
    .hero-title {
        font-size: 1.75rem;            /* 28px */
    }

    .hero-photo img {
        width: 10rem;                  /* 160px */
        height: 10rem;                 /* 160px */
    }
}


/* ---------- ANIMATIONS ---------- */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(1rem);   /* 16px */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Respect reduced motion preference (WCAG) */
@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;
    }
}


/* ---------- PRINT STYLES ---------- */
@media print {
    .navbar,
    .menu-toggle,
    .skip-link,
    .cozzmic-banner {
        display: none;
    }

    body {
        background: white;
        color: black;
    }

    .footer {
        background: white;
        color: black;
        border-top: 0.0625rem solid #ccc;   /* 1px */
    }
}