:root { --black: #11110f; --offwhite: #f8f7f5; --cream: #eeece0; --line: #d7d4ca; --sm-padding-safe: 20px; }

html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--black); font-family: 'Lilex', monospace; font-size: 18px; font-weight: 400; }
a { color: inherit; text-decoration: none; }
a:hover, a:focus { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.hero { width: 100%; min-height: 300px; position: relative; background: url(../img/epk/header.jpg) no-repeat center center/cover #000; padding: 100px 0; }
.hero-swiper, .hero-swiper .swiper-wrapper, .hero-swiper .swiper-slide { width: 100%; height: 100%; }
.hero-slide { background-size: cover; background-position: center center; background-repeat: no-repeat; }
.hero-content { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.main-logo { margin-bottom: 20px; width: 275px; }
.claim { font-size: 16px; font-weight: 600; color: #FFF; text-align: center; max-width: 80%; margin: 0; }
.beige-section { background: var(--offwhite); }
.section-padding { padding: 120px 0; }
.main-menu { display: flex; align-items: center; justify-content: center; gap: 56px; }
.main-menu a { color: #fff; font-size: 18px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.main-menu a.featured-link { border: 1px solid rgba(255,255,255,.75); border-radius: 100px; padding: 6px 15px; }
.main-menu a span { transition: opacity .2s ease; }
.main-menu a:hover span { opacity: .65; }
.main-menu-scrolled { display: none; }
.featured-release { background: #fff; }
.featured-container { max-width: 1266px; }
.featured-release .row-gap { column-gap: 88px; }
.featured-cover { position: relative; display: block; width: 500px; max-width: 500px; margin-right: 70px; }
.featured-cover .cover-img { transition: all 0.3s ease; position: relative; z-index: 100; width: 100%; height: auto; display: block; }
.featured-cover .vinilo { transition: right ease 0.3s; position: absolute; right: -13%; top: 0; z-index: 50; width: 100%; }
.featured-container:hover .featured-cover .cover-img { transform: scale(1.02); }
.featured-container:hover .featured-cover .vinilo { right: -25%;  }
.release-info { width: 430px; }
.release-info h1 { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 400; }
.release-year { margin-top: 4px; font-size: 18px; line-height: 1.2; }
.social-links { display: flex; align-items: center; gap: 24px; margin-top: 30px; }
.social-links a { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; }
.social-links img { width: 28px; max-height: 28px; }

.skeleton-loading { color: #000; width: 100%; min-height: 50px; margin-bottom: 10px; border-radius: 15px; position: relative; overflow: hidden; background: rgba(0,0,0,.15); }
.skeleton-loading::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(0,0,0,.15), transparent); animation: skeleton-loading 1.4s infinite; }
@keyframes skeleton-loading { 100% { transform: translateX(100%); } }

.audio-players { display:flex; flex-direction:column; gap:16px; width:100%; }
.audio-player { display:flex; align-items:center; gap:20px; min-height:82px; padding:0 28px 0 36px; background:#f5f4f3; border-radius:50px; box-sizing:border-box; }
.audio-title { flex:1; font-family:monospace; font-size:22px; letter-spacing:.5px; color:#222; }
.audio-controls { display:flex; align-items:center; gap:14px; background:#fff; padding:10px 18px; border-radius:30px; }
.audio-play { display:flex; align-items:center; justify-content:center; width:20px; height:24px; padding:0; border:0; background:none; color:#000; cursor:pointer; font-size:17px; }
.audio-progress { width:100%; height:3px; margin:0; padding:0; cursor:pointer; accent-color:#000; }
.audio-time { display:flex; align-items:center; gap:8px; white-space:nowrap; font-family:monospace; font-size:20px; color:#000; }
.spotify-link { display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.spotify-link img { display:block; width:38px; height:38px; }

.audio-section { padding: 120px 0; }
.audio-header { padding: 0; margin-bottom: 50px; }
.audio-header-title { font-size: 89px; line-height: 88px; max-width: 360px; }
.audio-header-desc { max-width: 360px; font-size: 18px; text-align: right; margin-left: auto; margin-top: -32px; }

.booking-text { text-align: center; max-width: 500px; margin: 0 auto; }
.booking-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 30px; margin-top: 50px; margin-bottom: 60px; justify-content: center; }
.booking-links li { display: inline-block; }
.booking-links li a { display: block; position: relative; background: #FFF no-repeat center left 12px; border-radius: 100px; border: 1px solid #EBEBEB; font-size: 16px; font-weight: 500; padding: 5px 15px 5px 40px; }
.booking-links li a.active, .booking-links li a:active, .booking-links li a:hover, .booking-links li a:focus { text-decoration: none; color: #000; border-color: #CCC; }
.booking-links li a label { font-size: 14px; color: #7B7978; position: absolute; top: -30px; left: 50%; transform: translate(-50%, 0); }
.booking-links li a.booking-email { background-image: url(../img/booking-email.svg); }
.booking-links li a.booking-phone { background-image: url(../img/booking-phone.svg); }
.booking-links li a.booking-ws { background-image: url(../img/booking-ws.svg); }
.booking-card { background: #FFF; border: 1px solid #EBEBEB; padding: 40px; }
.booking-data { display: flex; justify-content: space-between; font-size: 18px; }
.booking-data:not(:last-child) { margin-bottom: 20px; }
.booking-data-title { font-weight: 600; }
.booking-data-text { font-weight: 400; }
.booking-data-text a { text-decoration: underline; }

.big-title { font-size: 64px; font-weight: 400; margin-bottom: 30px; }
.big-p { font-size: 24px; }

.featured-text-1 { background: #111; color: #FFF; }
.featured-text-2 { color: #F50F86;}
.featured-text-3 { font-weight: 800; }

.video-header { padding: 40px 0 80px; background: #FFF url(../img/arrows.svg) no-repeat center bottom 40px; text-align: center; }
.video-header-title { font-size: 25px; font-weight: 600; }
.video-header-text { font-size: 20px; font-weight: 400; margin-bottom: 0; max-width: 768px; margin: 0 auto; }

.band-card { height: 100%; display: flex; padding: 50px; justify-content: center; flex-direction: column; }
.band-swiper { height: 100%; min-height: 720px; }
.band-swiper .swiper-slide { height: 100%; background-size: cover; background-position: center center; }

.hero-player { margin: 50px 0; min-height: 0; display: flex; align-items:center; max-width:100%; padding:10px 12px 10px 25px; border:1px solid rgba(255,255,255,.45); border-radius:50px; background:rgba(255,255,255,.18); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.hero-player-title { flex:1; color:#fff; font-size:16px; font-style:italic; white-space:nowrap; }
.hero-player .audio-time { font-size: 16px; }
.hero-player .audio-controls { padding: 7px 15px; }
.hero-player .audio-progress { -webkit-appearance:none; appearance:none; width:133px; height:5px; background:transparent; outline:none; border:none; margin:0; padding:0; cursor:pointer; }
.hero-player .audio-progress::-webkit-slider-runnable-track { width:133px; height:5px; background:url(../img/epk/player-sections.svg) no-repeat center / 100% 100%; border-radius:5px; }
.hero-player .audio-progress::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:10px; height:10px; border-radius:50%; background:#000; cursor:pointer; margin-top:-2.5px; }
.hero-player .audio-progress::-moz-range-track { width:133px; height:5px; background:url(../img/epk/player-sections.svg) no-repeat center / 100% 100%; border-radius:5px; }
.hero-player .audio-progress::-moz-range-thumb { width:10px; height:10px; border-radius:50%; background:#000; cursor:pointer; border:none; }

.discography-list { padding: 136px 0 30px; }
.albums-container { max-width: 1586px; }
/*.album-card { width: 282px; }*/
.album-card img { width: 100%; object-fit: cover; display: block; margin-bottom: 22px; transition: opacity .2s ease; max-width: 100%; }
.album-card img:hover { opacity: .82; }
.album-card h2 { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 400; }
.album-card h2 a:hover { text-decoration: none; color: #000; }
.album-year { margin-top: 4px; font-size: 16px; line-height: 1.2; }

.video-section { width: 100%; background: #111; overflow: hidden; }
.video-holder { width: 100%; height: min(77.2vh, 56.25vw); position: relative; }
.video-holder iframe, .video-holder video { width: 100%; height: 100%; border: 0; display: block; }
.video-holder video { object-fit: contain; background: #000; }

.about { min-height: 871px; background: #fff; padding: 193px 0 216px; }
.about-container { max-width: 1042px; }
.about .row { --bs-gutter-x: 95px; }
.about-title { margin: 0; font-size: 154px; line-height: .93; font-weight: 300; letter-spacing: -.055em; text-transform: uppercase; }
.about-copy { margin: 0 0 4px; max-width: 330px; font-size: 18px; line-height: 1.38; text-align: right; }

.photo-carousel { width: 100%; height: 340px; overflow: hidden; background: #111; }
.photos-swiper, .photos-swiper .swiper-wrapper { height: 100%; }
.photos-swiper .swiper-wrapper { transition-timing-function: linear !important; }
.photos-swiper .swiper-slide { height: 340px; overflow: hidden; }
.photos-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.contact-column { min-height: 653px; display: flex; align-items: center; justify-content: center; padding: 80px; }
.contact-data { background: var(--offwhite); }
.contact-content { width: 100%; max-width: 610px; text-align: center; }
.contact-data h2 { margin: 0 0 137px; font-size: 44px; line-height: 1; font-weight: 400; }
.contact-data a { display: block; font-size: 18px; line-height: 1.8; }
.contact-instagram { background: #fff; }
.instagram-link { display: inline-flex; flex-direction: column; align-items: center; gap: 13px; font-size: 18px; font-weight: 600; }
.instagram-link img { width: 52px; height: 52px; }

.downloads { min-height: 927px; background: var(--cream); padding: 136px 0 133px; }
.downloads-container { max-width: 1024px; }
.downloads h2 { margin: 0 0 106px; text-align: center; font-size: 44px; line-height: 1; font-weight: 400; }
.download-list { width: 100%; }
.download-row { display: flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 82px; border-bottom: 1px solid var(--line); font-size: 18px; }
.download-links { display: flex; gap: 47px; flex: 0 0 auto; }
.download-links a:hover { text-decoration: underline; }

.concerts-list { margin-top: 40px; }
.show-item { padding-bottom: 20px; border-bottom: 2px solid #e7e7e7; }
.show-item:not(:last-child) { margin-bottom: 20px; }
.buy-tickets { border: 1px solid #858585; border-radius: 4px; padding: 6px 10px; transition: all ease 0.2s; }
.buy-tickets.active, .buy-tickets:active, .buy-tickets:hover, .buy-tickets:focus { text-decoration: none; background-color: #e7e7e7; color: #000; }

.main-footer { height: 80px; background-image: url('../img/footer.svg'); background-repeat: repeat-x; background-position: center center; background-size: auto 65%; background-color: #272624; }

.cookie-banner { position: fixed; z-index: 1000; left: 20px; right: 20px; bottom: 20px; display: none; }
.cookie-banner.active { display: block; }
.cookie-inner { width: min(980px, 100%); margin: 0 auto; background: #111; color: #fff; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 12px 45px rgba(0,0,0,.28); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.cookie-copy strong { display: block; margin-bottom: 5px; font-size: 15px; }
.cookie-copy p { margin: 0; max-width: 760px; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.75); }
.cookie-copy a { text-decoration: underline; }
.cookie-button { flex: 0 0 auto; border: 1px solid #fff; background: #fff; color: #111; padding: 10px 18px; font-family: inherit; font-size: 12px; cursor: pointer; }

@media (min-width: 768px) {
    header.scrolled .main-menu { position: fixed; top: 0; left: 0; right: 0; padding: 10px; background: rgba(0,0,0,.5); z-index: 2500; }
    .main-menu a:not(:last-child):after { content: '/'; margin-left: 56px; color: rgba(255,255,255,.35); }
}

@media (max-width: 1399.98px) {
    .audio-controls { max-width: 290px; }
    .hero-logo { width: 220px; margin-bottom: 50px; }
    .main-menu { gap: 30px; }
    .main-menu a:not(:last-child):after { margin-left: 30px; }
    .main-menu a { font-size: 15px; }
    .featured-container { max-width: 1100px; }
    .featured-cover { width: 500px; }
    .release-info { width: 360px; }
    .albums-container { max-width: 1180px; }
    /*.album-card, .album-card img { width: 245px; }*/
    /*.album-card img { height: 245px; }*/
    .album-card h2 { font-size: 20px; }
    .about-title { font-size: 128px; }
    .about-copy { font-size: 17px; }
}
@media (max-width: 1200px) {
    .main-menu { gap: 25px; }
    .main-menu a:not(:last-child):after { margin-left: 25px; }
    .booking-data { flex-direction: column; gap: 5px; }
    .booking-data { margin-bottom: 20px; }
    .booking-col:last-child .booking-data:last-child { margin-bottom: 0; }
    .audio-header-desc { margin-top: 0; }
}

@media (max-width: 1080px) {
    .featured-cover { margin-bottom: 40px; }
}
@media (max-width: 991.98px) {    
    .main-menu { gap: 12px; }
    .main-menu a:not(:last-child):after { margin-left: 12px; }    
    .section-padding { padding: 90px 0; }
    .featured-release .row { column-gap: 0; }
    .featured-cover { width: 400px; margin-bottom: 30px; }
    .release-info { width: 300px; }
    .release-info h1 { font-size: 30px; }
    .discography-list { min-height: auto; padding: 90px 0 70px; }
    .albums-container { max-width: 820px; }
    /*.album-card, .album-card img { width: 210px; }
    .album-card img { height: 210px; }*/
    .album-card h2 { font-size: 18px; }
    .band-swiper { min-height: 400px; }
    .about { min-height: auto; padding: 130px 0; }
    .about-container { max-width: 820px; }
    .about-title { font-size: 105px; }
    .about-copy { font-size: 16px; }
    .photo-carousel, .photos-swiper .swiper-slide { height: 290px; }
    .contact-column { min-height: 500px; }
    .downloads { min-height: auto; padding: 110px 0; }
}

@media (max-width: 767.98px) {
    .section-padding { padding: 70px 0; }
    .hero { min-height: auto; padding: 50px 0; }
    .main-logo { width: 170px; }
    .main-menu { flex-direction: column; gap: 0; }
    .main-menu a { display: block; padding: 13px 0; font-size: 17px; text-align: center; }
    header.scrolled .main-menu-not-scrolled { opacity: 0; pointer-events: none; }
    header.scrolled .main-menu-scrolled { display: flex; flex-direction: row; position: fixed; top: 0; left: 0; right: 0; padding: 10px; background: rgba(0,0,0,.5); z-index: 2500; }
    header.scrolled .main-menu-scrolled a { padding: 7px 10px; display: inline-block; font-size: 13px; }
    .audio-section { padding: 50px var(--sm-padding-safe); }
    .audio-header { padding: 0; }
    .audio-header-title { font-size: 26px; line-height: 62px; }
    .audio-header-desc { font-size: 16px; text-align: left; max-width: 100%; }
    
    .video-header { padding: 30px 0 50px; background-position: center bottom 30px; }
    .video-header-title { font-size: 22px; }
    .video-header-text { font-size: 14px; display: none; }

    .band-card { padding-left: calc(var(--sm-padding-safe) + 12px); padding-right: calc(var(--sm-padding-safe) + 12px); }

    .audio-player { flex-wrap: wrap; justify-content: center; padding: 10px; border-radius: 25px; gap: 5px 20px; }
    .audio-title { flex: none; width: 100%; text-align: center; font-size: 16px; font-weight: 600; }
    .audio-controls { width: calc(100% - 58px); justify-content: space-between; max-width: none; }
    .audio-time { font-size: 16px; }

    .hero-player { flex-direction:column; align-items:flex-start; gap:10px; width:auto; padding:14px; border-radius: 30px; margin: 30px 0; }
    .hero-player .audio-controls { width: 100%; justify-content: space-between; } 
    .hero-player-title { padding:0 7px; font-size:14px; }
    .hero-player-controls { width:240px; max-width:100%; box-sizing:border-box; }
    .spotify-link img { width: 32px; height: 32px; }

    .booking-links { gap: 50px 10px; }

    .big-title { font-size: 26px; }
    .big-p { font-size: 16px; }
    .band-swiper { min-height: 360px; }

    .featured-release { padding: 80px 0; }
    .featured-release .row { row-gap: 5px; }
    .featured-cover { width: min(75vw, 480px); margin: 0 auto 30px; }
    .featured-release .featured-cover .vinilo { right: -10%; }
    .featured-container:hover .featured-cover .vinilo { right: -12%; }
    .release-info { width: auto; text-align: center; }
    .release-info h1 { font-size: 30px; }
    .social-links { justify-content: center; }
    .discography-list { padding: 75px 0 55px; }
    .albums-container { padding-left: 25px; padding-right: 25px; }
    .album-card { width: 100%; margin-bottom: 40px; }
    .album-card img { width: 100%; height: auto; }
    .album-card h2 { font-size: 18px; }
    .video-holder { height: 56.25vw; }
    .booking-data { font-size: 16px; }
    .booking-text { font-size: 16px; }
    .about { padding: 95px 0; }
    .about-container { padding-left: 30px; padding-right: 30px; }
    .about .row { --bs-gutter-x: 0; row-gap: 55px; }
    .about-title { font-size: clamp(70px, 19vw, 108px); }
    .about-copy { max-width: 480px; margin: 0 auto; font-size: 17px; text-align: left; }
    .photo-carousel, .photos-swiper .swiper-slide { height: 340px; }
    .contact-column { min-height: 360px; padding: 55px 30px; }
    .contact-data { text-align: center; }
    .contact-content { max-width: none; }
    .contact-data h2 { margin-bottom: 65px; font-size: 36px; }
    .contact-data a { margin-left: auto; margin-right: auto; }
    .downloads { padding: 90px 20px; }
    .downloads h2 { margin-bottom: 70px; font-size: 36px; }
    .download-row { min-height: 68px; font-size: 14px; }
    .download-links { gap: 24px; }
    .main-footer { height: 95px; }
    .cookie-inner { align-items: stretch; flex-direction: column; gap: 15px; }
    .cookie-button { width: 100%; }
    .main-footer { background-size: 40% auto; }
}

@media (max-width: 575.98px) {
    .hero-slide { background-position: 55% center; }
    .hero-logo { width: 150px; }
    .release-info h1 { font-size: 26px; }
    .album-card h2 { font-size: 16px; }
    .about-title { font-size: clamp(62px, 18vw, 90px); }
    .about-copy { font-size: 15px; }
    .photo-carousel, .photos-swiper .swiper-slide { height: 180px; }
    .download-row { font-size: 12px; }
    .main-footer { height: 72px; }
}