:root { --black: #11110f; --offwhite: #f8f7f5; --cream: #eeece0; --line: #d7d4ca; }

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%; height: 100vh; min-height: 680px; position: relative; background: #111; }
.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 { position: absolute; z-index: 5; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px; }
.hero-logo { display: block; width: 274px; margin-bottom: 62px; }
.hero-logo img { width: 100%; display: block; }
.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 span { transition: opacity .2s ease;  }
.main-menu a .small { display: none; }
.main-menu a:hover span { opacity: .65; }
header.scrolled .main-menu { position: fixed; top: 0; left: 0; right: 0; padding: 10px; background: rgba(0,0,0,.5); }
.featured-release { background: #fff; padding: 164px 0; }
.featured-container { max-width: 1266px; }
.featured-release .row { 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; }

.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:58px; 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-header { padding: 120px 0 50px; }
.audio-header-title { font-size: 89px; line-height: 92px; max-width: 360px; }
.audio-header-desc { max-width: 430px; font-size: 18px; text-align: right; margin-left: auto; margin-top: -32px; }

.discography-list { min-height: 610px; background: var(--offwhite); padding: 136px 0 113px; }
.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: underline; }
.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 { width: 100%; height: 100%; border: 0; display: block; }

.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: 549px; 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: 549px; 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; }

.main-footer { height: 155px; background-image: url('../img/footer.svg'); background-repeat: repeat-x; background-position: center center; background-size: auto; 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) {
    .main-menu a:not(:last-child):after { content: '/'; margin-left: 56px; color: rgba(255,255,255,.35); }
}

@media (max-width: 1399.98px) {
    .hero-logo { width: 220px; margin-bottom: 50px; }
    .main-menu { gap: 40px; }
    .main-menu a { font-size: 15px; }
    .featured-container { max-width: 1100px; }
    .featured-cover { width: 500px; margin: 30px; }
    .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: 991.98px) {
    .featured-release { padding: 110px 0; }
    .featured-release .row { column-gap: 45px; }
    .featured-cover { width: 400px; }
    .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; }
    .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: 420px; }
    .contact-column { min-height: 500px; }
    .downloads { min-height: auto; padding: 110px 0; }
}

@media (max-width: 767.98px) {
    .hero { min-height: auto; }
    .hero-logo { width: 170px; margin-bottom: 30vh; }
    .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 { flex-direction: row; }
    header.scrolled .main-menu a { padding: 7px 10px; }
    header.scrolled .main-menu a .large { display: none; }
    header.scrolled .main-menu a .small { display: inline-block; font-size: 13px; }

    .audio-header { padding: 50px 0 40px; }
    .audio-header-title { font-size: 64px; line-height: 62px; }
    .audio-header-desc { margin-top: 20px; }

    .audio-player { flex-wrap: wrap; justify-content: center; padding: 10px; border-radius: 25px; gap: 5px 20px; }
    .audio-title { flex: none; width: 100%; }
    .audio-controls { width: calc(100% - 58px); }

    .featured-release { padding: 30px 0; }
    .featured-release .row { row-gap: 30px; }
    .featured-cover { width: min(75vw, 480px); margin: 0 auto; }
    .featured-release .featured-cover .vinilo { right: -10%; }
    .featured-container:hover .featured-cover .vinilo { right: -12%; }
    .album-year { font-size: 13px; }
    .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; }
    .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: 22px; }
    .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: 280px; }
    .download-row { font-size: 12px; }
    .main-footer { height: 72px; }
}