/* Local Font Declarations - Self-Hosted */

/* NorseBold - Custom Viking Font */
@font-face {
    font-family: 'NorseBold';
    src: url('NorseBold-2Kge.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Anton */
@font-face {
    font-family: 'Anton';
    src: url('fonts/anton-v27-latin-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Bebas Neue */
@font-face {
    font-family: 'Bebas Neue';
    src: url('fonts/bebas-neue-v16-latin-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Pirata One */
@font-face {
    font-family: 'Pirata One';
    src: url('fonts/pirata-one-v23-latin-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Cinzel */
@font-face {
    font-family: 'Cinzel';
    src: url('fonts/cinzel-v26-latin-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Oswald */
@font-face {
    font-family: 'Oswald';
    src: url('fonts/oswald-v57-latin-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Merriweather - Blog Body Font */
@font-face {
    font-family: 'Merriweather';
    src: url('fonts/merriweather-v33-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    --bronze: #CD7F32;
    --bronze-light: #E8A060;
    --bronze-dark: #A0621F;
    --black: #000000;
    --white: #ffffff;
    --gray-light: #cccccc;
    --gray-dark: #333333;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Cinzel', serif;
    line-height: 1.6;
    color: var(--white);
    background: var(--black);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navigation */
.navbar {
    background: rgba(0, 0, 0, 0.95);
    color: white;
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    border-bottom: 2px solid var(--bronze);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.logo-img {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: 2px solid var(--bronze);
    box-shadow: 0 0 15px rgba(205, 127, 50, 0.3);
}

.nav-logo h2 {
    font-family: 'NorseBold', 'Anton', 'Impact', sans-serif;
    font-weight: normal;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.nav-menu {
    display: flex;
    list-style: none;
}

.nav-menu li {
    margin-left: 2rem;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    font-family: 'NorseBold', 'Anton', 'Impact', sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s;
    position: relative;
}

.nav-menu a:hover {
    color: var(--bronze-light);
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--bronze);
    transition: width 0.3s;
}

.nav-menu a:hover::after {
    width: 100%;
}

/* Navbar */
.navbar {
    background: #000000;
}

/* Hero Section */
.hero {
    background-color: #000000;
    color: white;
    text-align: center;
    padding: 150px 20px 100px;
    margin-top: 80px;
    position: relative;
    overflow: hidden;
    min-height: 700px;
}

.hero-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.hero-slideshow img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    display: block;
}

.hero-slideshow img.active {
    opacity: 1;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.8));
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-logo {
    margin-bottom: 2rem;
}

.hero-logo-img {
    height: 300px;
    width: 300px;
    border-radius: 50%;
    border: 3px solid var(--bronze);
    box-shadow: 0 0 40px rgba(205, 127, 50, 0.5),
                0 0 60px rgba(205, 127, 50, 0.3);
    transition: all 0.3s;
}

.hero-logo-img:hover {
    box-shadow: 0 0 50px rgba(205, 127, 50, 0.7),
                0 0 80px rgba(205, 127, 50, 0.4);
    transform: scale(1.02);
}

.hero-content h1 {
    font-family: 'NorseBold', 'Anton', 'Impact', sans-serif;
    font-size: 4rem;
    font-weight: normal;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-style: italic;
    color: var(--bronze-light);
}

.cta-button {
    background: transparent;
    color: var(--bronze-light);
    padding: 15px 40px;
    text-decoration: none;
    border: 2px solid var(--bronze);
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s;
    display: inline-block;
}

.cta-button:hover {
    background: var(--bronze);
    color: var(--black);
    box-shadow: 0 0 20px rgba(205, 127, 50, 0.6);
    transform: translateY(-2px);
}

/* Sections */
section {
    padding: 80px 0;
    outline: none !important;
}

section:focus {
    outline: none !important;
}

section *, section *:focus {
    outline: none !important;
}

.about {
    background-color: #111111;
    background-image:
        url("data:image/svg+xml,%3Csvg width='150' height='150' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M75 25 L100 50 L75 75 L50 50 Z M75 75 L100 100 L75 125 L50 100 Z M50 50 L25 75 L50 100 L75 75 Z M100 50 L125 75 L100 100 L75 75 Z' stroke='%23CD7F32' stroke-width='1.5' fill='none' opacity='0.06'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='140' height='140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M70 30 Q80 40 70 50 Q60 40 70 30 M40 70 Q50 80 40 90 Q30 80 40 70 M100 70 Q110 80 100 90 Q90 80 100 70' stroke='%23CD7F32' stroke-width='2' fill='none' opacity='0.07'/%3E%3C/svg%3E"),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 2px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 2px);
    background-size: 300px 300px, 260px 260px, 2px 2px, 2px 2px;
    background-position: 85% 50%, 12% 35%, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, repeat, repeat;
    border-top: 2px solid var(--bronze-dark);
    border-bottom: 2px solid var(--bronze-dark);
}

.about h2, .work h2, .gigs h2, .gallery h2, .services h2, .contact h2 {
    text-align: center;
    font-family: 'NorseBold', 'Anton', 'Impact', sans-serif;
    font-size: 3rem;
    font-weight: normal;
    margin-bottom: 3rem;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 3px;
    position: relative;
    outline: none;
    cursor: default;
}

.about h2:focus, .work h2:focus, .gigs h2:focus, .gallery h2:focus, .services h2:focus, .contact h2:focus {
    outline: none;
}

.about h2::after, .work h2::after, .gigs h2::after, .gallery h2::after, .services h2::after, .contact h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--bronze), transparent);
}

.about p {
    font-size: 1.2rem;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
    font-style: italic;
}

/* Work Section */
.work {
    background-color: #000000;
    background-image:
        url("data:image/svg+xml,%3Csvg width='180' height='180' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='90' cy='90' r='60' stroke='%23CD7F32' stroke-width='2' fill='none' opacity='0.05'/%3E%3Cpath d='M90 30 Q110 50 90 70 Q70 50 90 30 M30 90 Q50 110 70 90 Q50 70 30 90 M90 150 Q110 130 90 110 Q70 130 90 150 M150 90 Q130 110 110 90 Q130 70 150 90' stroke='%23CD7F32' stroke-width='2' fill='none' opacity='0.05'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='130' height='130' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M65 20 L80 35 L65 50 L50 35 Z M35 65 L50 80 L35 95 L20 80 Z M95 65 L110 80 L95 95 L80 80 Z' stroke='%23CD7F32' stroke-width='2' fill='none' opacity='0.06'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='110' height='110' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M55 15 Q65 25 55 35 Q45 25 55 15 M25 55 Q35 65 25 75 Q15 65 25 55 M85 55 Q95 65 85 75 Q75 65 85 55' stroke='%23CD7F32' stroke-width='2' fill='none' opacity='0.07'/%3E%3C/svg%3E"),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 2px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 2px);
    background-size: 350px 350px, 250px 250px, 200px 200px, 2px 2px, 2px 2px;
    background-position: 15% 30%, 82% 65%, 18% 85%, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
}

.work p {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 3rem;
    color: #cccccc;
    font-style: italic;
}

.video-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 2rem;
    justify-items: center;
}

.video-item {
    position: relative;
    border: 2px solid var(--bronze);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(205, 127, 50, 0.3);
    transition: all 0.3s;
}

.video-item:hover {
    box-shadow: 0 0 30px rgba(205, 127, 50, 0.5);
    transform: translateY(-5px);
}

.video-item iframe {
    width: 100%;
    max-width: 560px;
    height: 315px;
    border: none;
}

.video-title {
    font-family: 'NorseBold', 'Anton', 'Impact', sans-serif;
    font-weight: normal;
    color: var(--bronze-light);
    text-align: center;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.3;
    text-shadow: 0 0 10px rgba(205, 127, 50, 0.3);
}

/* Gigs Section */
.gigs {
    background-color: #1a1a1a;
    border-top: none;
    border-bottom: 2px solid var(--bronze-dark);
}

.gigs-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.gig-item {
    background: #000000;
    padding: 2rem;
    border: 2px solid var(--bronze);
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 0 15px rgba(205, 127, 50, 0.2);
    transition: all 0.3s;
}

.gig-item:hover {
    box-shadow: 0 0 30px rgba(205, 127, 50, 0.4);
    transform: translateY(-5px);
    border-color: var(--bronze-light);
}

.gig-item h3 {
    color: var(--bronze-light);
    margin-bottom: 1rem;
    font-family: 'NorseBold', 'Anton', 'Impact', sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.4rem;
}

.gig-date {
    color: var(--bronze-light);
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 10px rgba(205, 127, 50, 0.3);
}

.gig-details {
    color: #cccccc;
    font-style: italic;
    margin: 0;
}

.gig-ticket-btn {
    display: inline-block;
    margin-top: 1.2rem;
    padding: 0.6rem 1.5rem;
    background: transparent;
    color: var(--bronze-light);
    border: 2px solid var(--bronze);
    border-radius: 25px;
    text-decoration: none;
    font-family: 'NorseBold', 'Anton', 'Impact', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s;
}

.gig-ticket-btn:hover {
    background: var(--bronze);
    color: #000;
    box-shadow: 0 0 15px rgba(205, 127, 50, 0.5);
}

/* Gallery Section */
.gallery {
    background-color: #000000;
    background-image:
        url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 40 C120 50, 120 70, 100 80 C80 70, 80 50, 100 40 M60 80 C70 100, 90 100, 100 80 C110 100, 130 100, 140 80 M100 120 C120 130, 120 150, 100 160 C80 150, 80 130, 100 120' stroke='%23CD7F32' stroke-width='2' fill='none' opacity='0.05'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='145' height='145' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M72 25 L90 43 L72 61 L54 43 Z M72 84 L90 102 L72 120 L54 102 Z' stroke='%23CD7F32' stroke-width='2' fill='none' opacity='0.06'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='125' height='125' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='62' cy='62' r='30' stroke='%23CD7F32' stroke-width='2' fill='none' opacity='0.05'/%3E%3C/svg%3E"),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 2px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 2px);
    background-size: 380px 380px, 270px 270px, 230px 230px, 2px 2px, 2px 2px;
    background-position: 80% 60%, 13% 45%, 88% 80%, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
    color: white;
}

/* Gallery Filter Buttons */
.gallery-filters {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 0.75rem 2rem;
    background: transparent;
    border: 2px solid var(--bronze);
    color: var(--bronze);
    font-size: 1rem;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Anton', 'Impact', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.filter-btn:hover {
    background: var(--bronze);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(205, 127, 50, 0.4);
}

.filter-btn.active {
    background: var(--bronze);
    color: white;
    box-shadow: 0 4px 12px rgba(205, 127, 50, 0.5);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.gallery-item {
    position: relative;
    border: 2px solid var(--bronze);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(205, 127, 50, 0.3);
    transition: all 0.3s;
    aspect-ratio: 1;
    background: #000000;
}

.gallery-item:hover {
    transform: scale(1.05);
    box-shadow: 0 0 35px rgba(205, 127, 50, 0.5);
    border-color: var(--bronze-light);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Gallery video items */
.gallery-video-item {
    cursor: pointer;
}

.video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: all 0.3s;
    opacity: 0.9;
}

.gallery-video-item:hover .video-play-overlay {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

/* Lightbox video */
.lightbox-video-content {
    display: none;
    position: relative;
    width: 90vw;
    max-width: 1200px;
    background: #000000;
    border: 3px solid var(--bronze);
    border-radius: 8px;
    overflow: hidden;
}

.lightbox-video-content iframe {
    width: 100%;
    aspect-ratio: 16/9;
    border: none;
    display: block;
}

/* Services Section */
.services {
    background-color: #1a1a1a;
    background-image:
        url("data:image/svg+xml,%3Csvg width='170' height='170' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M85 25 L105 45 L105 65 L85 85 L65 65 L65 45 Z M85 85 L105 105 L105 125 L85 145 L65 125 L65 105 Z M25 85 L45 105 L45 125 L25 145 M145 85 L125 105 L125 125 L145 145' stroke='%23CD7F32' stroke-width='2' fill='none' opacity='0.06'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='155' height='155' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M77 30 Q87 40 77 50 Q67 40 77 30 M45 77 Q55 87 45 97 Q35 87 45 77 M110 77 Q120 87 110 97 Q100 87 110 77' stroke='%23CD7F32' stroke-width='2' fill='none' opacity='0.07'/%3E%3C/svg%3E"),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 2px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 2px);
    background-size: 340px 340px, 285px 285px, 2px 2px, 2px 2px;
    background-position: 12% 45%, 84% 55%, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, repeat, repeat;
    border-top: 2px solid var(--bronze-dark);
    border-bottom: 2px solid var(--bronze-dark);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.service-item {
    background: rgba(0, 0, 0, 0.9);
    border: 3px solid var(--bronze);
    border-radius: 8px;
    text-align: center;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.service-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 35px rgba(205, 127, 50, 0.5);
    border-color: var(--bronze-light);
}

.service-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
    position: relative;
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.service-item:hover .service-image img {
    transform: scale(1.1);
}

.service-item h3 {
    color: var(--bronze-light);
    margin: 1.5rem 1rem 1rem;
    font-family: 'NorseBold', 'Anton', 'Impact', sans-serif;
    font-size: 1.4rem;
    font-weight: normal;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.service-item p {
    line-height: 1.6;
    font-size: 0.95rem;
    color: #cccccc;
    padding: 0 1.5rem;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.service-link {
    display: inline-block;
    margin: 0 auto 1.5rem;
    padding: 0.8rem 2rem;
    background: transparent;
    color: var(--bronze);
    border: 2px solid var(--bronze);
    text-decoration: none;
    font-family: 'NorseBold', 'Anton', 'Impact', sans-serif;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.service-link:hover {
    background: var(--bronze);
    color: #000000;
    box-shadow: 0 0 20px rgba(205, 127, 50, 0.6);
}

/* Video Modal */
.video-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    justify-content: center;
    align-items: center;
}

.video-modal-content {
    position: relative;
    width: 90%;
    max-width: 900px;
    background: #000000;
    border: 3px solid var(--bronze);
    border-radius: 8px;
    overflow: hidden;
}

.video-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--bronze);
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10001;
    transition: color 0.3s ease;
    background: rgba(0, 0, 0, 0.8);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
}

.video-modal-close:hover {
    color: var(--bronze-light);
    background: rgba(0, 0, 0, 0.95);
    box-shadow: 0 0 15px rgba(205, 127, 50, 0.5);
}

.video-modal-body {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.video-modal-body iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Testimonials Section */
.testimonials {
    background-color: #111111;
    background-image:
        url("data:image/svg+xml,%3Csvg width='175' height='175' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M87 30 L107 50 L87 70 L67 50 Z M87 105 L107 125 L87 145 L67 125 Z M30 87 L50 107 L30 127 M144 87 L124 107 L144 127' stroke='%23CD7F32' stroke-width='2' fill='none' opacity='0.06'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='160' height='160' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='80' cy='80' r='45' stroke='%23CD7F32' stroke-width='2' fill='none' opacity='0.05'/%3E%3C/svg%3E"),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 2px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 2px);
    background-size: 330px 330px, 275px 275px, 2px 2px, 2px 2px;
    background-position: 88% 48%, 9% 52%, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, repeat, repeat;
    border-top: 2px solid var(--bronze-dark);
    border-bottom: 2px solid var(--bronze-dark);
}

.testimonials h2 {
    text-align: center;
    font-family: 'NorseBold', 'Anton', 'Impact', sans-serif;
    font-size: 3rem;
    font-weight: normal;
    margin-bottom: 3rem;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 3px;
    position: relative;
}

.testimonials h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--bronze), transparent);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.testimonial-card {
    position: relative;
    border: 2px solid var(--bronze);
    padding: 2rem;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(205, 127, 50, 0.2);
    transition: all 0.3s;
}

.testimonial-card::before {
    content: '"';
    position: absolute;
    top: -20px;
    left: 20px;
    font-size: 5rem;
    color: var(--bronze);
    opacity: 0.3;
    font-family: Georgia, serif;
    line-height: 1;
}

.testimonial-card:hover {
    box-shadow: 0 0 30px rgba(205, 127, 50, 0.4);
    transform: translateY(-5px);
    border-color: var(--bronze-light);
}

.testimonial-quote {
    font-style: italic;
    color: #cccccc;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.testimonial-author {
    text-align: right;
    color: var(--bronze-light);
    font-size: 0.95rem;
}

.testimonial-author strong {
    display: block;
    margin-bottom: 0.25rem;
}

.testimonial-role {
    color: #999999;
    font-style: italic;
    font-size: 0.85rem;
}

/* Gallery Caption */
.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.9);
    border-top: 2px solid var(--bronze);
    padding: 1rem;
    text-align: center;
    color: var(--bronze-light);
    font-family: 'NorseBold', 'Anton', 'Impact', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    transform: translateY(100%);
    transition: transform 0.3s;
}

.gallery-item:hover .gallery-caption {
    transform: translateY(0);
}

.gallery-cta {
    text-align: center;
    margin-top: 3rem;
}

/* Contact Section */
.contact {
    background-color: #111111;
    background-image:
        url("data:image/svg+xml,%3Csvg width='190' height='190' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='95' cy='95' r='50' stroke='%23CD7F32' stroke-width='2' fill='none' opacity='0.05'/%3E%3Cpath d='M95 45 Q105 55 95 65 Q85 55 95 45 M65 95 Q75 105 65 115 Q55 105 65 95 M125 95 Q135 105 125 115 Q115 105 125 95 M95 125 Q105 135 95 145 Q85 135 95 125' stroke='%23CD7F32' stroke-width='2' fill='none' opacity='0.05'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='140' height='140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M70 25 L85 40 L70 55 L55 40 Z M40 70 L55 85 L40 100 L25 85 Z M100 70 L115 85 L100 100 L85 85 Z' stroke='%23CD7F32' stroke-width='2' fill='none' opacity='0.06'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='115' height='115' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M57 20 Q67 30 57 40 Q47 30 57 20 M30 57 Q40 67 30 77 Q20 67 30 57' stroke='%23CD7F32' stroke-width='2' fill='none' opacity='0.07'/%3E%3C/svg%3E"),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 2px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 2px);
    background-size: 360px 360px, 260px 260px, 210px 210px, 2px 2px, 2px 2px;
    background-position: 88% 55%, 10% 38%, 85% 75%, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
    color: white;
    text-align: center;
}

.contact h2 {
    color: white;
}

.contact > .container > p {
    font-size: 1.2rem;
    margin-bottom: 3rem;
    color: #cccccc;
    font-style: italic;
}

.contact-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.contact-item {
    background: #111111;
    padding: 2rem;
    border: 2px solid var(--bronze);
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(205, 127, 50, 0.2);
    transition: all 0.3s;
}

.contact-item:hover {
    box-shadow: 0 0 30px rgba(205, 127, 50, 0.4);
    transform: translateY(-5px);
    border-color: var(--bronze-light);
}

.contact-item h3 {
    color: var(--bronze-light);
    margin-bottom: 1rem;
    font-family: 'NorseBold', 'Anton', 'Impact', sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-item p {
    font-size: 1rem;
    margin: 0;
    color: #cccccc;
}

.social-link {
    color: var(--white) !important;
    text-decoration: none;
    transition: all 0.3s;
    position: relative;
}

.social-link:visited {
    color: var(--white) !important;
}

.social-link:hover {
    color: var(--bronze-light) !important;
    text-shadow: 0 0 10px rgba(205, 127, 50, 0.5);
}

/* Footer */
footer {
    background: #000000;
    color: white;
    text-align: center;
    padding: 2rem 0;
    border-top: 2px solid var(--bronze-dark);
}

footer p {
    font-family: 'NorseBold', 'Anton', 'Impact', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666666;
    font-weight: normal;
}

/* Hamburger Menu */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    z-index: 1001;
    padding: 5px;
    background: none;
    border: none;
}

.hamburger span {
    width: 28px;
    height: 3px;
    background: #ffffff;
    margin: 3px 0;
    transition: 0.3s ease;
    border-radius: 2px;
    display: block;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .hamburger {
        display: flex !important;
        order: 3;
    }
    
    .nav-container {
        position: relative;
        justify-content: space-between;
        align-items: center;
    }
    
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 0;
        width: 100vw;
        height: 100vh;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.98);
        text-align: center;
        transition: left 0.3s ease;
        z-index: 1000;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .nav-menu li {
        margin: 2rem 0;
    }
    
    .nav-menu li a {
        font-size: 1.5rem;
        color: #ffffff;
        text-decoration: none;
        display: block;
        padding: 1rem;
    }
    
    .hero-logo-img {
        height: 150px;
        width: 150px;
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
        letter-spacing: 2px;
    }
    
    .hero {
        padding: 120px 20px 80px;
    }
    
    .about h2, .work h2, .services h2, .contact h2 {
        font-size: 2.5rem;
        letter-spacing: 2px;
    }
    
    .video-gallery {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .video-item {
        margin: 0 10px;
    }
    
    .video-item iframe {
        height: 250px;
        max-width: 100%;
    }
    
    .video-title {
        font-size: 1rem;
        padding: 0 1rem;
        line-height: 1.2;
    }

    .gallery-filters {
        gap: 0.5rem;
        margin-top: 1.5rem;
    }

    .filter-btn {
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
    }

    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .service-item {
        max-width: 500px;
        margin: 0 auto;
    }

    .service-image {
        height: 300px;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
    }
    
    .gigs-list {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .gig-item {
        margin: 0 10px;
    }
    
    .contact-info {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .contact-item {
        margin: 0 10px;
    }
    
    section {
        padding: 60px 0;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    .hero {
        padding: 100px 15px 60px;
    }
    
    .hero-logo-img {
        height: 100px;
        width: 100px;
    }
    
    .hero-content h1 {
        font-size: 1.8rem;
        letter-spacing: 1px;
        margin-bottom: 0.5rem;
    }
    
    .hero-content p {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }
    
    .cta-button {
        padding: 12px 30px;
        font-size: 0.9rem;
    }
    
    .about h2, .work h2, .gigs h2, .gallery h2, .services h2, .contact h2 {
        font-size: 1.8rem;
        letter-spacing: 1px;
        margin-bottom: 2rem;
    }
    
    .about p {
        font-size: 1rem;
        padding: 0 10px;
    }
    
    .work p {
        font-size: 1rem;
        padding: 0 10px;
    }
    
    .video-item {
        margin: 0 5px;
    }
    
    .video-item iframe {
        height: 180px;
    }
    
    .video-title {
        font-size: 0.9rem;
        padding: 0 0.5rem;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 0.8rem;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .service-image {
        height: 220px;
    }

    .service-item h3 {
        font-size: 1.2rem;
        margin: 1rem 0.5rem 0.5rem;
    }

    .service-item p {
        font-size: 0.9rem;
        padding: 0 1rem;
        margin-bottom: 1rem;
    }

    .service-link {
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .gig-item {
        padding: 1.5rem;
        margin: 0 5px;
    }
    
    .gig-item h3 {
        font-size: 1.2rem;
    }
    
    .contact-info {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .contact-item {
        padding: 1.5rem;
        margin: 0 5px;
    }
    
    section {
        padding: 50px 0;
    }
    
    .hamburger {
        display: flex !important;
    }
    
    .nav-menu {
        top: 0;
        height: 100vh;
    }
    
    .nav-menu li a {
        font-size: 1.2rem;
    }
    
    .nav-logo h2 {
        font-size: 1.2rem;
    }
    
    .logo-img {
        height: 40px;
        width: 40px;
    }
}

/* Blog Page Styles */
.blog-hero {
    background-color: #000000;
    background-image:
        url("data:image/svg+xml,%3Csvg width='185' height='185' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M92 35 Q102 45 92 55 Q82 45 92 35 M50 92 Q60 102 50 112 Q40 102 50 92 M135 92 Q145 102 135 112 Q125 102 135 92' stroke='%23CD7F32' stroke-width='2' fill='none' opacity='0.06'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg width='150' height='150' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M75 25 L95 45 L75 65 L55 45 Z M75 85 L95 105 L75 125 L55 105 Z' stroke='%23CD7F32' stroke-width='2' fill='none' opacity='0.05'/%3E%3C/svg%3E"),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 2px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 2px);
    background-size: 340px 340px, 280px 280px, 2px 2px, 2px 2px;
    background-position: 14% 35%, 83% 68%, 0 0, 0 0;
    background-repeat: no-repeat, no-repeat, repeat, repeat;
    color: white;
    text-align: center;
    padding: 120px 20px 80px;
    margin-top: 80px;
}

/* Uniform hero spacing for all non-main pages */
.gallery-hero,
.gigs-hero,
.contact-hero {
    padding: 3rem 0;
    margin-top: 80px;
}

/* All separate page heroes - standard grey */
.gigs-hero,
.gallery-hero,
.contact-hero {
    background-color: #1a1a1a;
    background-image: none;
}

/* Wichcraft hero - standard grey */
.wichcraft-hero {
    background-color: #1a1a1a;
    background-image: none;
}

/* Wichcraft intro section - match page background */
.wichcraft-intro {
    background: #1a1a1a;
}

/* Consistent tight spacing for content sections below heroes */
.gallery-full,
.gigs,
.wichcraft-intro,
.contact-page {
    padding-top: 0.75rem;
}

.blog-hero h1 {
    font-family: 'NorseBold', 'Anton', 'Impact', sans-serif;
    font-size: 3.5rem;
    font-weight: normal;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.blog-hero p {
    font-size: 1.2rem;
    color: var(--bronze-light);
    font-style: italic;
}

.blog-filters {
    text-align: center;
    margin-bottom: 3rem;
}

.filter-btn {
    background: transparent;
    color: var(--bronze-light);
    padding: 10px 25px;
    margin: 0 0.5rem;
    border: 2px solid var(--bronze);
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--bronze);
    color: var(--black);
    box-shadow: 0 0 15px rgba(205, 127, 50, 0.5);
}

.blog-content {
    background-color: #111111;
    background-image:
        url("data:image/svg+xml,%3Csvg width='165' height='165' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M82 28 L102 48 L82 68 L62 48 Z M82 97 L102 117 L82 137 L62 117 Z' stroke='%23CD7F32' stroke-width='2' fill='none' opacity='0.06'/%3E%3C/svg%3E"),
        repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 2px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 2px);
    background-size: 310px 310px, 2px 2px, 2px 2px;
    background-position: 90% 45%, 0 0, 0 0;
    background-repeat: no-repeat, repeat, repeat;
    padding: 80px 0;
    border-top: 2px solid var(--bronze-dark);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
}

.blog-card {
    background: #000000;
    border: 2px solid var(--bronze);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(205, 127, 50, 0.2);
    transition: all 0.3s;
    cursor: pointer;
}

.blog-card:hover {
    box-shadow: 0 0 20px rgba(205, 127, 50, 0.5);
    transform: translateY(-5px);
    border-color: var(--bronze-light);
}

.blog-card-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
    border-bottom: 2px solid var(--bronze);
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}

.blog-card-content {
    padding: 2rem;
}

.blog-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.blog-date {
    color: var(--bronze-light);
    font-size: 0.9rem;
    font-style: italic;
}

.blog-reading-time {
    color: #888;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.post-reading-time {
    color: #888;
    font-size: 0.85rem;
    font-style: italic;
}

.blog-category {
    background: var(--bronze);
    color: var(--black);
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-card h3 {
    font-family: 'NorseBold', 'Anton', 'Impact', sans-serif;
    font-weight: normal;
    color: var(--bronze-light);
    margin-bottom: 1rem;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.blog-excerpt {
    font-family: 'Merriweather', Georgia, serif;
    color: #e0e0e0;
    line-height: 1.7;
    margin-bottom: 1rem;
    font-size: 16px;
    font-weight: 400;
}

.blog-read-more {
    color: var(--bronze-light);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.blog-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 2000;
    overflow-y: auto;
    padding: 2rem;
}

.blog-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-modal-content {
    background: #000000;
    border: 3px solid var(--bronze);
    border-radius: 15px;
    padding: 3rem;
    max-width: 800px;
    position: relative;
    box-shadow: 0 0 40px rgba(205, 127, 50, 0.5);
}

.blog-modal-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 2rem;
    color: var(--bronze-light);
    cursor: pointer;
    background: none;
    border: none;
    line-height: 1;
}

.blog-modal-close:hover {
    color: var(--bronze);
}

.blog-modal h2 {
    font-family: 'NorseBold', 'Anton', 'Impact', sans-serif;
    font-weight: normal;
    color: var(--bronze-light);
    margin-bottom: 1.5rem;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.blog-modal-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    align-items: center;
}

.blog-modal-content p {
    color: #cccccc;
    line-height: 1.8;
    margin-bottom: 1rem;
}

/* Post Modal */
.post-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    padding: 2rem;
}

.post-modal-content {
    position: relative;
    width: 90%;
    max-width: 900px;
    background: #000000;
    border: 3px solid var(--bronze);
    border-radius: 15px;
    padding: 3rem;
    margin: auto;
    box-shadow: 0 0 40px rgba(205, 127, 50, 0.6);
}

.post-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    color: var(--bronze);
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10001;
    transition: color 0.3s ease;
    background: rgba(0, 0, 0, 0.8);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
}

.post-modal-close:hover {
    color: var(--bronze-light);
    background: rgba(0, 0, 0, 0.95);
    box-shadow: 0 0 15px rgba(205, 127, 50, 0.5);
}

.post-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--bronze-dark);
}

.post-meta {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.post-category {
    background: var(--bronze);
    color: var(--black);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.post-date {
    color: var(--bronze-light);
    font-size: 1rem;
    font-style: italic;
}

.post-modal-body h2 {
    font-family: 'NorseBold', 'Anton', 'Impact', sans-serif;
    font-weight: normal;
    color: var(--bronze-light);
    margin-bottom: 2rem;
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.2;
}

.post-image {
    width: 100%;
    margin-bottom: 2rem;
    border: 2px solid var(--bronze);
    border-radius: 10px;
    overflow: hidden;
}

.post-image img {
    width: 100%;
    height: auto;
    display: block;
}

.post-content {
    font-family: 'Merriweather', Georgia, serif;
    color: #e8e8e8;
    line-height: 1.8;
    font-size: 18px;
    font-weight: 400;
}

.post-content p {
    font-family: 'Merriweather', Georgia, serif;
    color: #e8e8e8;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-size: 18px;
    font-weight: 400;
}

.post-content img {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 1.5rem 0;
    border: 2px solid var(--bronze);
    border-radius: 10px;
    display: block;
}

.post-content figure.post-image {
    margin: 1.5rem 0;
    padding: 0;
    border: 2px solid var(--bronze);
    border-radius: 10px;
    overflow: hidden;
}

.post-content figure.post-image img {
    margin: 0;
    border: none;
    border-radius: 0;
}

.post-content figure.post-image figcaption {
    background: #000000;
    border-top: 1px solid var(--bronze);
    padding: 0.6rem 1rem;
    color: var(--bronze-light);
    font-size: 0.9rem;
    font-style: italic;
    text-align: center;
}

.post-content h3 {
    color: var(--bronze-light);
    font-size: 1.5rem;
    font-family: 'NorseBold', 'Anton', 'Impact', sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--bronze-dark);
}

.post-content h4 {
    color: var(--bronze);
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 2rem;
    margin-bottom: 0.8rem;
    letter-spacing: 0.5px;
}

.post-content a {
    color: #f4c585;
    text-decoration: underline;
    font-weight: bold;
    transition: color 0.3s ease;
}

.post-content a:hover {
    color: #ffd699;
    text-decoration: underline;
}

/* Post Share Buttons */
.post-share {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--bronze-dark);
}

.post-share h4 {
    color: var(--bronze-light);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    font-family: 'NorseBold', 'Anton', 'Impact', sans-serif;
    font-weight: normal;
}

.share-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.share-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border: 2px solid var(--bronze);
    background: transparent;
    color: var(--bronze);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.share-btn:hover {
    background: var(--bronze);
    color: var(--black);
    box-shadow: 0 0 15px rgba(205, 127, 50, 0.5);
    transform: translateY(-2px);
}

.share-btn svg {
    flex-shrink: 0;
}

/* Individual button colors on hover */
.share-facebook:hover {
    background: #1877F2;
    border-color: #1877F2;
    color: white;
}

.share-twitter:hover {
    background: #000000;
    border-color: #000000;
    color: white;
}

.share-linkedin:hover {
    background: #0A66C2;
    border-color: #0A66C2;
    color: white;
}

.share-copy:hover {
    background: var(--bronze);
    border-color: var(--bronze);
    color: var(--black);
}

/* Copy notification */
.copy-notification {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--bronze);
    color: var(--black);
    padding: 1rem 2rem;
    border-radius: 10px;
    font-weight: bold;
    box-shadow: 0 0 20px rgba(205, 127, 50, 0.6);
    z-index: 10002;
    opacity: 0;
    transition: all 0.3s ease;
}

.copy-notification.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Post Navigation */
.post-navigation {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid var(--bronze-dark);
    text-align: center;
}

.back-to-blog-btn {
    display: inline-block;
    padding: 0.8rem 2rem;
    background: transparent;
    border: 2px solid var(--bronze);
    color: var(--bronze);
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.back-to-blog-btn:hover {
    background: var(--bronze);
    color: var(--black);
    box-shadow: 0 0 15px rgba(205, 127, 50, 0.5);
    transform: translateY(-2px);
}
    font-size: 1.05rem;
}

.post-content p {
    margin-bottom: 1.5rem;
}

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

/* Full Gallery Page */
.gallery-full {
    background-color: #1a1a1a;
    padding: 0.75rem 0 80px;
}

.gallery-full .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 0;
}

.gallery-full .gallery-item .gallery-caption {
    transform: translateY(0);
    font-size: 0.9rem;
    padding: 0.75rem;
}

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 3000;
    align-items: center;
    justify-content: center;
}

.lightbox.active {
    display: flex;
}

.lightbox-container {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-content {
    max-width: 100%;
    max-height: 90vh;
    border: 3px solid var(--bronze);
    box-shadow: 0 0 40px rgba(205, 127, 50, 0.6);
}

.lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 40px;
    color: var(--bronze);
    cursor: pointer;
    background: rgba(0, 0, 0, 0.8);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
    font-weight: bold;
    transition: all 0.3s ease;
    z-index: 10002;
}

.lightbox-close:hover {
    color: var(--bronze-light);
    background: rgba(0, 0, 0, 0.95);
    box-shadow: 0 0 15px rgba(205, 127, 50, 0.5);
}

@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .blog-hero h1 {
        font-size: 2.5rem;
    }

    .filter-btn {
        margin: 0.25rem;
        padding: 8px 20px;
    }

    .blog-modal-content {
        padding: 2rem;
        margin: 1rem;
    }

    .gallery-full .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .blog-hero h1 {
        font-size: 1.8rem;
    }

    .blog-filters {
        margin-bottom: 2rem;
    }

    .filter-btn {
        display: block;
        width: 100%;
        max-width: 300px;
        margin: 0.5rem auto;
    }

    .blog-modal-content {
        padding: 1.5rem;
    }

    /* On very small phones, use the full screen for reading */
    .post-modal {
        padding: 0;
    }

    .post-modal-content {
        width: 100%;
        min-height: 100vh;
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding: 1.25rem 1rem;
        padding-top: 3.5rem;
    }

    .blog-modal h2 {
        font-size: 1.5rem;
    }

    .gallery-full .gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* Socials Page Styles */
.socials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.social-card {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    text-decoration: none;
    color: #333;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.social-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

.social-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
}

.social-card:hover .social-icon {
    transform: scale(1.1);
}

.social-icon.facebook {
    background: linear-gradient(135deg, #1877f2, #0c63d4);
    color: white;
}

.social-icon.instagram {
    background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4);
    color: white;
}

.social-icon.youtube {
    background: linear-gradient(135deg, #ff0000, #cc0000);
    color: white;
}

.social-icon.linkedin {
    background: linear-gradient(135deg, #0077b5, #005885);
    color: white;
}

.social-card h3 {
    font-size: 1.5rem;
    margin: 0;
    color: #333;
}

.social-card p {
    font-size: 1rem;
    color: #666;
    margin: 0;
}

@media (max-width: 768px) {
    .socials-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Wichcraft & Wordery Page Styles */
.wichcraft-hero {
    background-color: #1a1a1a;
    color: white;
    text-align: center;
    padding: 5rem 0;
}

.wichcraft-hero h1 {
    font-family: 'NorseBold', 'Anton', 'Impact', sans-serif;
    font-size: 3.5rem;
    font-weight: normal;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.wichcraft-hero p {
    font-size: 1.2rem;
    color: var(--bronze-light);
    font-style: italic;
}

.wichcraft-intro {
    background: #1a1a1a;
    padding: 3rem 0;
    text-align: center;
}

.intro-text {
    font-size: 1.25rem;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
    color: #cccccc;
}

.wichcraft-events {
    padding: 4rem 0;
    background: #1a1a1a;
}

.event-series {
    display: grid;
    gap: 3rem;
    margin-bottom: 4rem;
}

.event-card {
    background: #000000;
    border: 2px solid var(--bronze);
    border-radius: 15px;
    padding: 3rem;
    box-shadow: 0 0 20px rgba(205, 127, 50, 0.3);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

.event-number {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(205, 127, 50, 0.1);
    color: var(--bronze);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
}

.event-card h2 {
    color: var(--bronze);
    margin-bottom: 0.5rem;
    font-size: 2rem;
}

.event-card h3 {
    color: var(--bronze-light);
    margin-bottom: 1rem;
    font-size: 1.3rem;
    font-style: italic;
}

.event-card p {
    color: #cccccc;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.event-features {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.event-features li {
    padding: 0.75rem 1rem;
    background: transparent;
    border-radius: 8px;
    color: #cccccc;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.event-features li:before {
    content: "✓";
    color: var(--bronze);
    font-weight: bold;
    font-size: 1.2rem;
}

.main-series {
    border-left: 5px solid var(--bronze);
}

.slam {
    border-left: 5px solid var(--bronze);
}

.slam .event-number {
    background: rgba(205, 127, 50, 0.1);
    color: var(--bronze);
}

.writing-group {
    border-left: 5px solid var(--bronze);
}

.writing-group .event-number {
    background: rgba(205, 127, 50, 0.1);
    color: var(--bronze);
}

.writing-group h2 {
    color: var(--bronze);
}

.facebook-cta {
    background: #000000;
    border: 2px solid var(--bronze);
    border-radius: 15px;
    padding: 3rem;
    text-align: center;
    color: white;
}

.facebook-cta h2 {
    color: var(--bronze);
    margin-bottom: 1rem;
    font-size: 2rem;
}

.facebook-cta p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bronze);
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.cta-button:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(205, 127, 50, 0.3);
    background: var(--bronze-light);
}

@media (max-width: 768px) {
    .wichcraft-hero h1 {
        font-size: 2.5rem;
    }

    .event-card {
        padding: 2rem;
    }

    .event-features {
        grid-template-columns: 1fr;
    }

    .facebook-cta {
        padding: 2rem;
    }

    .cta-button {
        font-size: 1rem;
        padding: 0.875rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .wichcraft-hero h1 {
        font-size: 1.8rem;
    }

    .event-card h2 {
        font-size: 1.5rem;
    }
}

/* Contact Page Styles */
.contact-page {
    padding: 2rem 0 3rem;
    background: #1a1a1a;
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.contact-layout-single {
    max-width: 600px;
    margin: 0 auto;
}

.contact-form-section,
.contact-info-section {
    background: #000000;
    padding: 1.5rem;
    border-radius: 15px;
    border: 2px solid var(--bronze);
    box-shadow: 0 4px 12px rgba(205, 127, 50, 0.2);
}

.contact-form-section h2,
.contact-info-section h2 {
    color: var(--bronze);
    margin-bottom: 1.25rem;
    font-size: 1.75rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--bronze-light);
    font-weight: 700;
    font-size: 1.1rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.875rem;
    border: 2px solid var(--bronze-dark);
    border-radius: 8px;
    font-family: 'Merriweather', Georgia, serif;
    font-size: 1rem;
    background: #000000;
    color: white;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--bronze);
    background: #000000;
}

.form-group textarea {
    resize: vertical;
    min-height: 150px;
}

.form-intro {
    color: #cccccc;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.submit-btn {
    background: var(--bronze);
    color: white;
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.submit-btn:hover {
    background: var(--bronze-light);
    transform: translateY(-2px);
}

.form-success {
    text-align: center;
    padding: 2rem;
    background: rgba(205, 127, 50, 0.1);
    border: 2px solid var(--bronze);
    border-radius: 15px;
    animation: fadeIn 0.6s ease-in;
}

.form-success h3 {
    color: var(--bronze);
    font-size: 1.8rem;
    margin-bottom: 1rem;
    font-family: 'NorseBold', 'Anton', 'Impact', sans-serif;
}

.form-success p {
    color: #e8e8e8;
    font-size: 1.1rem;
    line-height: 1.6;
}

.contact-method {
    margin-bottom: 2.5rem;
}

.contact-method h3 {
    color: var(--bronze-light);
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    background: #000000;
    border-radius: 8px;
    border: 2px solid #444;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-bottom: 0.75rem;
}

.contact-link:hover {
    border-color: var(--bronze);
    transform: translateX(5px);
    box-shadow: 0 0 10px rgba(205, 127, 50, 0.3);
}

.contact-link svg {
    flex-shrink: 0;
}

/* Colorful Social Media Icons */
.contact-link[href*="facebook"] svg {
    color: #1877f2;
}

.contact-link[href*="instagram"] svg {
    color: #E4405F;
}

.contact-link[href*="youtube"] svg {
    color: #FF0000;
}

.contact-link[href*="linkedin"] svg {
    color: #0077b5;
}

.contact-link[href*="mailto"] svg {
    color: var(--bronze);
}

.contact-link svg {
    flex-shrink: 0;
}

.social-links {
    display: flex;
    flex-direction: column;
}

@media (max-width: 968px) {
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

@media (max-width: 768px) {
    .contact-page {
        padding: 2rem 0;
    }

    .contact-form-section h2,
    .contact-info-section h2 {
        font-size: 1.5rem;
    }

    /* Mobile share buttons */
    .share-buttons {
        gap: 0.5rem;
    }

    .share-btn {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
    }

    .share-btn svg {
        width: 16px;
        height: 16px;
    }

    /* Mobile blog readability - go full width */
    .post-modal {
        padding: 0.5rem;
        align-items: flex-start;
    }

    .post-modal-content {
        width: 100%;
        padding: 1.5rem 1.25rem;
        border-radius: 10px;
    }

    .post-modal-body h2 {
        font-size: 1.8rem;
    }

    .post-content,
    .post-content p {
        font-size: 17px;
        line-height: 1.75;
    }

    .blog-excerpt {
        font-size: 15px;
    }
}

/* Breadcrumbs */
.breadcrumbs {
    background: #0d0d0d;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(205, 127, 50, 0.2);
}

.breadcrumbs .container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.breadcrumbs a {
    color: var(--bronze);
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}

.breadcrumbs a:hover {
    color: var(--bronze-light);
}

.breadcrumb-separator {
    color: #555;
    font-size: 0.85rem;
}

.breadcrumb-current {
    color: #aaaaaa;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

/* Back to Top Button */
#backToTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    background: var(--bronze);
    color: white;
    border: none;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(205, 127, 50, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

#backToTopBtn:hover {
    background: var(--bronze-light);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(205, 127, 50, 0.6);
}

#backToTopBtn.show {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 768px) {
    #backToTopBtn {
        width: 45px;
        height: 45px;
        bottom: 20px;
        right: 20px;
        font-size: 20px;
    }
}
/* =============================================
   LISTEN PAGE — On the Dole
   ============================================= */

.listen-hero {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1008 50%, #0a0a0a 100%);
}

/* Album header: art on left, info on right */
.album-section {
    padding: 60px 0 40px;
    background: #000;
    scroll-margin-top: 80px;
}

.album-header {
    display: flex;
    gap: 50px;
    align-items: flex-start;
}

.album-art-wrap {
    flex: 0 0 280px;
}

.album-art {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(205, 127, 50, 0.35);
    display: block;
}

.album-info {
    flex: 1;
}

.album-info h2 {
    font-family: 'NorseBold', serif;
    font-size: 2.8rem;
    color: var(--bronze);
    margin-bottom: 6px;
}

.album-meta {
    font-family: 'Oswald', sans-serif;
    color: #888;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
}

.album-blurb {
    font-family: 'Merriweather', serif;
    color: #e8e8e8;
    line-height: 1.8;
    font-size: 1rem;
    margin-bottom: 30px;
}

.album-blurb em {
    color: var(--bronze-light, #f4c585);
    font-style: italic;
}

/* Streaming buttons */
.stream-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.stream-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--bronze);
    color: var(--bronze);
    background: transparent;
    font-family: 'Oswald', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}

.stream-btn:hover {
    background: var(--bronze);
    color: #000;
}

.stream-note {
    font-family: 'Merriweather', serif;
    font-size: 0.8rem;
    color: #666;
    margin-top: 4px;
}

/* Discography Overview Grid */
.discography-overview {
    padding: 50px 0 20px;
    background: #000;
}

.discography-overview h2 {
    font-family: 'NorseBold', serif;
    font-size: 2rem;
    color: var(--bronze);
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.discog-grid {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

.discog-card {
    text-decoration: none;
    text-align: center;
    width: 200px;
    transition: transform 0.25s;
}

.discog-card:hover {
    transform: translateY(-6px);
}

.discog-card img {
    width: 100%;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(205, 127, 50, 0.25);
    transition: box-shadow 0.25s;
    display: block;
}

.discog-card:hover img {
    box-shadow: 0 10px 36px rgba(205, 127, 50, 0.55);
}

.discog-card-title {
    font-family: 'Oswald', sans-serif;
    color: #e8e8e8;
    font-size: 1rem;
    margin-top: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.discog-card-year {
    font-family: 'Merriweather', serif;
    color: #888;
    font-size: 0.78rem;
    margin-top: 4px;
}

.album-section + .album-section {
    border-top: 1px solid #1a1a1a;
}

/* Spotify embed section */
.spotify-section {
    padding: 20px 0 40px;
    background: #000;
}

.spotify-placeholder {
    border: 1px dashed #333;
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    color: #666;
    font-family: 'Merriweather', serif;
    font-size: 1rem;
}

/* Track listing */
.tracklist-section {
    padding: 50px 0 70px;
    background: #0a0a0a;
}

.tracklist-section h2 {
    font-family: 'NorseBold', serif;
    color: var(--bronze);
    font-size: 2rem;
    margin-bottom: 30px;
}

.tracklist {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: none;
}

.tracklist li {
    display: flex;
    align-items: baseline;
    gap: 24px;
    padding: 18px 0;
    border-bottom: 1px solid #1a1a1a;
    transition: background 0.15s;
}

.tracklist li:last-child {
    border-bottom: none;
}

.tracklist li:hover {
    background: #0f0f0f;
    padding-left: 8px;
    margin-left: -8px;
}

.track-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.4rem;
    color: var(--bronze);
    opacity: 0.6;
    min-width: 32px;
    flex-shrink: 0;
}

.track-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.track-title {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    color: #e8e8e8;
    letter-spacing: 0.03em;
}

.track-tagline {
    font-family: 'Merriweather', serif;
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
}

/* Latest Release section on home page */
.latest-release {
    padding: 60px 0;
    background: #050505;
}

.latest-release h2 {
    text-align: center;
    font-family: 'NorseBold', serif;
    color: var(--bronze);
    font-size: 2rem;
    margin-bottom: 40px;
}

.release-card {
    display: flex;
    gap: 40px;
    align-items: center;
    background: #0f0f0f;
    border: 1px solid #1e1e1e;
    border-radius: 10px;
    padding: 36px;
    max-width: 780px;
    margin: 0 auto;
    box-shadow: 0 4px 24px rgba(205, 127, 50, 0.1);
}

.release-card-art {
    flex: 0 0 160px;
}

.release-card-art img {
    width: 100%;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(205, 127, 50, 0.3);
    display: block;
}

.release-card-info {
    flex: 1;
}

.release-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    color: var(--bronze);
    opacity: 0.8;
    margin-bottom: 6px;
}

.release-card-info h3 {
    font-family: 'NorseBold', serif;
    color: #e8e8e8;
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.release-card-info p {
    font-family: 'Merriweather', serif;
    color: #999;
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.release-card-info .cta-button {
    display: inline-block;
}

/* Responsive */
@media (max-width: 768px) {
    .album-header {
        flex-direction: column;
        gap: 30px;
    }

    .album-art-wrap {
        flex: none;
        width: 220px;
        margin: 0 auto;
    }

    .album-info h2 {
        font-size: 2rem;
    }

    .release-card {
        flex-direction: column;
        gap: 24px;
        text-align: center;
        padding: 24px;
    }

    .release-card-art {
        flex: none;
        width: 140px;
        margin: 0 auto;
    }

    .tracklist li {
        gap: 16px;
    }
}

/* Rubber stamp — Coming Soon */
.stamp-coming-soon {
    display: inline-block;
    color: #cc1111;
    border: 3px double #cc1111;
    padding: 5px 14px;
    font-family: 'Oswald', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transform: rotate(-4deg);
    opacity: 0.85;
    margin-bottom: 14px;
    box-shadow: inset 0 0 0 1px rgba(204,17,17,0.15);
}