* { box-sizing: border-box; }
html, body { margin: 0; background: #050505; }
body { font-family: Arial, sans-serif; }
.reference { position: relative; width: 100%; max-width: 1672px; margin: 0 auto; line-height: 0; container-type: inline-size; }
.reference img { display: block; width: 100%; height: auto; }
.hotspot { position: absolute; display: block; z-index: 2; line-height: normal; text-decoration: none; }
.hotspot:focus-visible { outline: 2px solid #ffd35c; outline-offset: 1px; border-radius: 3px; }
.target { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.site-header { position: absolute; z-index: 5; inset: 0 0 auto; height: 3.84cqw; background: #050505; border-bottom: 0; font-family: Arial, Helvetica, sans-serif; line-height: 1; }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; top: 4.6cqw; border-top: 1px solid rgba(214, 171, 66, .42); }
.header-brand { position: absolute; left: 4.95%; top: .34cqw; width: 15.45%; height: 3.36cqw; background-image: url('/assets/viper-records-select-reference.png'); background-repeat: no-repeat; background-size: 100cqw auto; background-position: -4.95cqw -.34cqw; }
.header-nav { position: absolute; left: 25.45%; top: 0; width: 42.5%; height: 100%; display: flex; align-items: center; justify-content: space-between; }
.header-nav a, .language-switch a { color: #f3f0e9; text-decoration: none; text-transform: uppercase; font-size: .64cqw; font-weight: 400; letter-spacing: .018cqw; white-space: nowrap; }
.header-nav a:hover, .language-switch a:hover { color: #f4c94f; }
.header-nav a[aria-current="page"] { position: relative; color: #e9c84e; }
.header-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.54cqw; height: .08cqw; min-height: 1px; background: #d7ad37; box-shadow: 0 0 .35cqw rgba(238, 195, 66, .5); }
.language-switch { position: absolute; left: 76.15%; top: 0; width: 4.65%; height: 100%; border-left: 1px solid rgba(224, 187, 81, .8); display: flex; align-items: center; justify-content: center; gap: .58cqw; }
.language-switch .active { color: #e9c84e; }
.language-switch .divider { color: rgba(230, 226, 215, .55); font-size: .6cqw; }
.header-cta { position: absolute; left: 83.72%; top: .78cqw; width: 11.35%; height: 2.48cqw; border: 1px solid #b58a25; color: #ecd38a; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: .65cqw; font-size: .64cqw; font-weight: 600; letter-spacing: .025cqw; text-transform: uppercase; white-space: nowrap; }
.header-cta span { font-size: .9cqw; line-height: 1; }
/* Homologação da seção de lançamentos; o header e o hero permanecem intocados. */
.featured-releases { position: absolute; z-index: 4; left: 0; top: 26.25cqw; width: 63.4%; height: 11.05cqw; overflow: hidden; background: #08090b; border-right: 1px solid rgba(214,171,66,.28); color: #f3f0e9; line-height: 1; font-family: Arial, Helvetica, sans-serif; }
.releases-heading { position: absolute; left: 7.15%; top: 1.34cqw; margin: 0; color: #e8e5dc; font-size: .68cqw; font-weight: 400; letter-spacing: .115cqw; text-transform: uppercase; white-space: nowrap; }
.releases-heading::after { content: ""; display: inline-block; width: 1.5cqw; height: 1px; margin: 0 0 .2cqw .55cqw; background: #d8ae39; vertical-align: middle; }
.all-releases { position: absolute; right: 4.7%; top: 1.42cqw; color: #dfbd4c; font-size: .55cqw; font-weight: 600; letter-spacing: .035cqw; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.all-releases:hover { color: #ffe17a; }
.release-grid { position: absolute; left: 6.95%; right: .8%; top: 3.14cqw; height: 6.85cqw; display: grid; grid-template-columns: 23.1% 24.5% 24.5% 24.5%; gap: 1.1%; }
.release-card { min-width: 0; height: 100%; display: flex; align-items: center; gap: .62cqw; padding: .22cqw; border: 1px solid rgba(207,173,76,.2); background: rgba(9,10,12,.46); color: #eee; text-decoration: none; }
.release-card:hover { border-color: rgba(232,184,68,.65); }
.release-cover { flex: 0 0 5.95cqw; width: 5.95cqw; height: 5.95cqw; background-image: url('/assets/viper-records-select-reference.png'); background-repeat: no-repeat; background-size: 100cqw auto; }
.release-cover.top { background-position: -4.55cqw -29.72cqw; }
.release-cover.last-chance { background-position: -18.67cqw -29.72cqw; }
.release-cover.city { background-position: -33.73cqw -29.72cqw; }
.release-cover.mente-rica { background-position: -49.22cqw -29.72cqw; }
.release-info { flex: 1 1 auto; min-width: 0; align-self: flex-start; padding-top: .68cqw; }
.release-title { overflow: hidden; margin: 0 0 .35cqw; color: #f4f0e7; font-size: .56cqw; font-weight: 600; letter-spacing: 0; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.release-artist { margin: 0 0 .36cqw; color: #dfbd4c; font-size: .48cqw; letter-spacing: .055cqw; text-transform: uppercase; }
.release-meta { margin: 0; color: #b8b7b1; font-size: .46cqw; white-space: nowrap; }
.release-play { flex: 0 0 1.62cqw; width: 1.62cqw; height: 1.62cqw; margin: auto .15cqw 0 0; padding: 0; border: 1px solid #d5aa32; border-radius: 50%; background: #0b0c0e; color: #e4bd47; font-size: .62cqw; line-height: 1; cursor: pointer; }
.release-play:hover { background: #d5aa32; color: #090a0c; }
/* Homologação de Nossos Artistas; mantém a mesma faixa e retratos da baseline. */
.featured-artists { position: absolute; z-index: 4; left: 63.4%; top: 26.25cqw; width: 36.6%; height: 11.05cqw; overflow: hidden; background: #08090b; color: #f3f0e9; line-height: 1; font-family: Arial, Helvetica, sans-serif; }
.artists-heading { position: absolute; left: 5.4%; top: 1.34cqw; margin: 0; color: #e8e5dc; font-size: .68cqw; font-weight: 400; letter-spacing: .115cqw; text-transform: uppercase; white-space: nowrap; }
.artists-heading::after { content: ""; display: inline-block; width: 1.5cqw; height: 1px; margin: 0 0 .2cqw .55cqw; background: #d8ae39; vertical-align: middle; }
.all-artists { position: absolute; right: 12.4%; top: 1.42cqw; color: #dfbd4c; font-size: .55cqw; font-weight: 600; letter-spacing: .035cqw; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.all-artists:hover { color: #ffe17a; }
.artist-grid { position: absolute; left: 5.4%; right: 12.4%; top: 3.14cqw; height: 6.85cqw; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.6%; }
.artist-card { position: relative; min-width: 0; height: 100%; overflow: hidden; border: 1px solid rgba(207,173,76,.2); background: #101113; color: #eee; text-decoration: none; text-align: center; }
.artist-card:hover { border-color: rgba(232,184,68,.65); }
.artist-photo { position: absolute; inset: 0; width: 100%; height: 100%; background-image: url('/assets/viper-records-select-reference.png'); background-repeat: no-repeat; background-size: 100cqw auto; }
.artist-photo.kalix { background-position: -65.43cqw -29.48cqw; }
.artist-photo.luna { background-position: -75.48cqw -29.48cqw; }
.artist-photo.vertex { background-position: -85.80cqw -29.48cqw; }
.artist-photo.luna-amora { inset: 0 0 auto; width: 100%; height: calc(100% - 1cqw); background: #08090b; object-fit: contain; object-position: center; }
.artist-card::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 1.62cqw; background: linear-gradient(180deg,rgba(7,8,10,.63),rgba(7,8,10,.93)); pointer-events: none; }
.artist-card.artist-amora::after { display: none; }
.artist-caption { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 1.42cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .14cqw; }
.artist-card.artist-amora .artist-caption { height: 1cqw; background: #08090b; }
.artist-name { margin: 0; color: #e9c84e; font-size: .55cqw; font-weight: 700; letter-spacing: .06cqw; line-height: 1; text-transform: uppercase; }
.artist-genre { margin: 0; color: #d5d2ca; font-size: .43cqw; letter-spacing: .055cqw; line-height: 1; text-transform: uppercase; white-space: nowrap; }
/* Homologação do ecossistema: mantém a faixa compacta e a arte decorativa da direita. */
.ecosystem-live { position: absolute; z-index: 4; left: 0; top: 37.32cqw; width: 83.5%; height: 11.42cqw; overflow: hidden; background: #08090b; color: #f1eee7; font-family: Arial, Helvetica, sans-serif; line-height: 1; }
.ecosystem-intro { position: absolute; left: 5.6%; top: 2.95cqw; width: 37%; }
.ecosystem-heading { margin: 0; color: #efede7; font-family: Georgia, 'Times New Roman', serif; font-size: 1.52cqw; font-weight: 400; line-height: 1.08; text-transform: uppercase; }
.ecosystem-heading span { display: block; white-space: nowrap; }
.ecosystem-heading em { color: #d5ad3e; font-style: normal; }
.ecosystem-copy { max-width: 31cqw; margin: .25cqw 0 0; color: #c9c8c3; font-size: .72cqw; line-height: 1.18; }
.ecosystem-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: .7cqw; min-width: 14.5cqw; height: 1.88cqw; margin-top: .25cqw; padding: 0 .9cqw; border: 1px solid #bd922c; color: #e8c64b; font-size: .53cqw; font-weight: 600; letter-spacing: .045cqw; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.ecosystem-cta:hover { background: rgba(213,173,62,.1); }
.ecosystem-pillars { position: absolute; left: 42.1%; right: 3.7%; top: 1.62cqw; height: 8.9cqw; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.ecosystem-pillar { position: relative; min-width: 0; padding: 3.47cqw .3cqw 0 2.15cqw; border-left: 1px solid rgba(202,166,62,.35); }
.ecosystem-icon { position: absolute; top: 0; left: 2.15cqw; width: 2.9cqw; height: 2.9cqw; display: grid; place-items: center; border: 1px solid #c69b2e; border-radius: 50%; }
.ecosystem-icon img { display: block; width: 1.28cqw; height: 1.28cqw; }
.ecosystem-pillar h3 { max-width: 100%; margin: 0 0 .48cqw; color: #f1eee7; font-size: .65cqw; font-weight: 500; letter-spacing: .035cqw; line-height: 1.16; text-transform: uppercase; }
.ecosystem-pillar p { max-width: 100%; margin: 0; color: #c9c8c3; font-size: .65cqw; line-height: 1.22; }
/* Homologação do banner Select; a faixa fotográfica original continua como fundo. */
.select-banner { position: absolute; z-index: 4; left: 0; top: 48.73cqw; width: 100%; height: 7.54cqw; overflow: hidden; color: #f1eee7; font-family: Arial, Helvetica, sans-serif; line-height: 1; }
.select-banner-mask { position: absolute; z-index: 0; background: #050506; pointer-events: none; }
.select-brand-mask { left: 4.4cqw; top: .52cqw; width: 15.3cqw; height: 6.55cqw; }
.select-description-mask { left: 55.55cqw; top: .55cqw; width: 18.3cqw; height: 6.72cqw; }
.select-submit-mask { left: 76.35cqw; top: .48cqw; width: 11.5cqw; height: 6.65cqw; }
.select-brand { position: absolute; z-index: 1; left: 5.25cqw; top: 1.05cqw; width: 14.2cqw; height: 5.95cqw; color: #f1eee7; text-transform: uppercase; }
.select-brand-name { width: 14.2cqw; height: 1.12cqw; margin: 0; overflow: hidden; color: transparent; font-size: 1.06cqw; font-weight: 700; line-height: 1; white-space: nowrap; background-image: url('/assets/viper-records-select-reference.png'); background-repeat: no-repeat; background-size: 100cqw auto; background-position: -5.25cqw -49.78cqw; }
.select-brand-title { width: 14.2cqw; height: 2cqw; margin: .12cqw 0 0; overflow: hidden; color: transparent; font-size: 2cqw; font-weight: 800; line-height: .96; white-space: nowrap; background-image: url('/assets/viper-records-select-reference.png'); background-repeat: no-repeat; background-size: 100cqw auto; background-position: -5.25cqw -50.95cqw; }
.select-brand-tagline { margin: .95cqw 0 0; color: #e3c451; font-size: .55cqw; font-weight: 500; letter-spacing: .19cqw; line-height: 1.45; }
.select-brand-tagline span { display: block; white-space: nowrap; }
.select-description { position: absolute; z-index: 1; left: 56.15cqw; top: .78cqw; width: 17.1cqw; margin: 0; color: #dfded9; font-size: .67cqw; line-height: 1.34; }
.select-learn { position: absolute; z-index: 2; left: 56.15cqw; top: 4.72cqw; width: 12.45cqw; height: 1.95cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 .8cqw; border: 1px solid #bd922c; color: #e8c64b; font-size: .52cqw; font-weight: 600; letter-spacing: .025cqw; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.select-submit { position: absolute; z-index: 1; left: 77.1cqw; top: .73cqw; width: 10.3cqw; color: #f0eee8; text-decoration: none; }
.select-submit-heading { margin: 0; color: #f1eee7; font-size: .78cqw; font-weight: 500; letter-spacing: .12cqw; line-height: 1.25; text-transform: uppercase; }
.select-submit-heading span { display: block; }
.select-submit-heading strong { color: #e9c84e; font-weight: 500; }
.select-submit-copy { margin: .18cqw 0 .7cqw; color: #d8d6cf; font-size: .62cqw; line-height: 1.18; }
.select-submit-button { width: 10.55cqw; height: 1.72cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 .7cqw; background: #e8c14a; color: #090909; font-size: .53cqw; font-weight: 700; letter-spacing: .02cqw; text-transform: uppercase; white-space: nowrap; }
.select-learn:hover { background: rgba(213,173,62,.1); }
.select-submit:hover .select-submit-button { background: #f5d66b; }
.site-header a, .all-releases, .release-play, .artist-card, .all-artists, .ecosystem-cta, .select-learn, .select-submit { cursor: pointer; }
.header-nav a:focus-visible, .language-switch a:focus-visible, .header-brand:focus-visible, .header-cta:focus-visible, .all-releases:focus-visible, .release-play:focus-visible, .artist-card:focus-visible, .all-artists:focus-visible, .ecosystem-cta:focus-visible, .select-learn:focus-visible, .select-submit:focus-visible, .hotspot:focus-visible { outline: 2px solid #e4bd47; outline-offset: 2px; }
.header-cta:hover { border-color: #d8ae39; color: #ffe17a; background: rgba(213,173,62,.08); }
.release-play:hover { border-color: #e2bd4b; background: #c59c32; color: #08090b; }
.select-learn:hover, .ecosystem-cta:hover { border-color: #d8ae39; color: #ffe17a; }
.responsive-hero { display: none; }
@media (max-width: 900px) {
.reference { height: calc(56.28cqw + var(--hero-shift)); }
.reference > img { position: absolute; z-index: 0; top: var(--hero-shift); left: 0; clip-path: inset(46.65% 0 0); }
.responsive-hero {
position: absolute;
z-index: 3;
top: 3.84cqw;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 43cqw;
padding: 3.2cqw 5.2cqw;
overflow: hidden;
color: #f4f0e9;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.25;
background-image: linear-gradient(90deg, rgba(5,5,6,.97) 0%, rgba(5,5,6,.91) 36%, rgba(5,5,6,.42) 72%, rgba(5,5,6,.16) 100%), url('/assets/studio-hero.png');
background-position: center, 62% 52%;
background-size: cover;
}
.responsive-hero-copy { width: 57%; max-width: 440px; }
.responsive-hero-eyebrow { margin: 0 0 .65cqw; color: #e4c65d; font-size: 1.15cqw; letter-spacing: .22cqw; text-transform: uppercase; }
.responsive-hero h1 { margin: 0; color: #f2eee6; font-family: Georgia, 'Times New Roman', serif; font-size: 4.4cqw; font-weight: 700; line-height: .98; letter-spacing: .015cqw; }
.responsive-hero-kicker { margin: .7cqw 0 0; color: #e7c94c; font-size: 1.15cqw; font-weight: 600; letter-spacing: .14cqw; line-height: 1.3; text-transform: uppercase; }
.responsive-hero-description { max-width: 39cqw; margin: .85cqw 0 0; color: #e2e0dc; font-size: 1.42cqw; line-height: 1.38; }
.responsive-hero-actions { display: flex; flex-wrap: wrap; gap: .8cqw; margin-top: 1.3cqw; }
.responsive-hero-actions a { min-height: 3.2cqw; display: inline-flex; align-items: center; justify-content: center; gap: .8cqw; padding: 0 1.35cqw; border: 1px solid #bd922c; background: transparent; color: #f0eee8; font-size: 1.12cqw; font-weight: 400; text-decoration: none; text-transform: uppercase; }
.responsive-hero-actions a:first-child { border: 1px solid #f3cf77; border-radius: 9px; background: linear-gradient(180deg, #ffda78 0%, #eab748 54%, #bf811d 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 2px 5px rgba(0,0,0,.35); color: #120d04; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; letter-spacing: .2cqw; }
.responsive-hero-platforms { display: flex; flex-wrap: wrap; align-items: center; gap: 1.35cqw; margin-top: 1.35cqw; color: #e7e5df; font-size: 1.15cqw; }
.responsive-hero-platforms span { display: inline-flex; align-items: center; gap: .35cqw; white-space: nowrap; }
.responsive-hero-platforms img { display: block; width: 1.6cqw; height: 1.6cqw; object-fit: contain; filter: grayscale(1) brightness(2.5); }
.responsive-hero-note { position: absolute; right: 4.5%; bottom: 7%; width: 18%; margin: 0; color: #e4c65d; font-size: .95cqw; letter-spacing: .16cqw; line-height: 1.75; text-align: right; text-transform: uppercase; }
.featured-releases, .featured-artists { top: calc(26.25cqw + var(--hero-shift)); }
.ecosystem-live { top: calc(37.32cqw + var(--hero-shift)); }
.select-banner { top: calc(48.73cqw + var(--hero-shift)); }
.hotspot { display: none; }
}
@media (max-width: 640px) {
html, body { max-width: 100%; overflow-x: clip; }
.reference { --hero-shift: 126.25cqw; }
.reference::after { content: ""; position: absolute; z-index: 3; top: 158cqw; left: 0; width: 100%; height: 5.57cqw; background: #050505; pointer-events: none; }
.site-header { height: 24.5cqw; }
.site-header::after { top: 24.5cqw; }
.header-brand { left: 3%; top: .9cqw; width: 34%; height: 9.2cqw; background-size: 200cqw auto; background-position: -6.9cqw -.38cqw; }
.header-nav { left: 3%; top: 9.5cqw; width: 94%; height: 13.3cqw; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: repeat(2,1fr); gap: .3cqw 1.2cqw; align-items: center; justify-content: initial; }
.header-nav a, .language-switch a { font-size: 2.35cqw; letter-spacing: .018cqw; }
.header-nav a { justify-self: center; }
.language-switch { left: 76.5%; top: 16.1cqw; width: 20%; height: 6.4cqw; gap: 1cqw; border-left: 0; }
.language-switch .divider { font-size: 2.2cqw; }
.header-cta { left: 59%; top: .7cqw; width: 38%; height: 8cqw; gap: .7cqw; padding: 0 1.5cqw; font-size: clamp(8px, 2.1cqw, 10px); letter-spacing: .025cqw; }
.header-cta .cta-label { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
.header-cta span { flex: 0 0 auto; font-size: 2.5cqw; }
.responsive-hero { top: 24.5cqw; height: 128cqw; padding: 7cqw 6cqw 6cqw; justify-content: flex-start; background-image: linear-gradient(180deg, rgba(5,5,6,.76) 0%, rgba(5,5,6,.58) 48%, rgba(5,5,6,.18) 100%), url('/assets/studio-hero.png'); background-position: center, 62% center; }
.responsive-hero-copy { width: 100%; max-width: none; margin-inline: auto; text-align: center; }
.responsive-hero-eyebrow { margin-bottom: 1.8cqw; font-size: 2.7cqw; letter-spacing: .42cqw; }
.responsive-hero h1 { width: 100%; max-width: 100%; font-size: clamp(24px, 7.1cqw, 32px); white-space: nowrap; }
.responsive-hero-viper { color: #e8c14a; }
.responsive-hero-kicker { width: 100%; max-width: 100%; margin: 2cqw auto 0; font-size: clamp(10px, 2.25cqw, 12px); letter-spacing: .12cqw; line-height: 1.3; white-space: normal; text-wrap: balance; }
.responsive-hero-description { width: 100%; max-width: 100%; margin: 2.2cqw auto 0; font-size: clamp(13px, 3.35cqw, 15px); line-height: 1.36; overflow-wrap: anywhere; }
.responsive-hero-actions { flex-direction: column; gap: 2cqw; margin-top: 3.2cqw; }
.responsive-hero-actions a { width: 100%; max-width: 100%; min-height: 10.5cqw; padding: 0 3cqw; gap: 1.8cqw; font-size: 2.75cqw; }
.responsive-hero-platforms { justify-content: center; gap: 2.2cqw; margin-top: 2.4cqw; font-size: 2.8cqw; }
.responsive-hero-platforms span { gap: 1cqw; }
.responsive-hero-platforms img { width: 4.1cqw; height: 4.1cqw; }
.responsive-hero-note { display: none; }
.featured-releases { top: 105cqw; width: 100%; height: 27cqw; }
.releases-heading { left: 3%; top: 1.5cqw; font-size: 1.55cqw; letter-spacing: .16cqw; }
.all-releases { right: 3%; top: 1.65cqw; font-size: 1.15cqw; }
.release-grid { left: 3%; right: 3%; top: 4.2cqw; height: 21.5cqw; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); gap: 1.2cqw 1.4%; }
.release-card { gap: 1cqw; padding: .5cqw; }
.release-cover { flex-basis: 9.8cqw; width: 9.8cqw; height: 9.8cqw; }
.release-info { padding-top: 1.2cqw; }
.release-title { margin-bottom: .8cqw; font-size: 2.2cqw; }
.release-artist { margin-bottom: .7cqw; font-size: 1.8cqw; letter-spacing: .08cqw; }
.release-meta { font-size: 1.6cqw; }
.release-play { flex-basis: 3cqw; width: 3cqw; height: 3cqw; margin-right: .3cqw; font-size: 1.35cqw; }
.featured-artists { top: 133cqw; left: 0; width: 100%; height: 25cqw; }
.artists-heading { left: 3%; top: 1.5cqw; font-size: 1.55cqw; letter-spacing: .16cqw; }
.all-artists { right: 3%; top: 1.65cqw; font-size: 1.15cqw; }
.artist-grid { left: 3%; right: 3%; top: 5cqw; height: 16.5cqw; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2%; }
.artist-card::after { height: 4.5cqw; }
.artist-caption { height: 4.1cqw; gap: .35cqw; }
.artist-card.artist-amora .artist-caption { height: 4.1cqw; }
.artist-name { font-size: 1.5cqw; letter-spacing: .08cqw; }
.artist-genre { font-size: 1.1cqw; letter-spacing: .07cqw; }
}
@media (min-width: 641px) and (max-width: 900px) {
.reference { --hero-shift: 9cqw; height: 167.44cqw; }
.site-header { height: 9cqw; }
.site-header::after { top: 9cqw; }
.header-brand { left: 3%; top: .55cqw; width: 18%; height: 6.1cqw; background-size: 115cqw auto; background-position: -5.7cqw -.39cqw; }
.header-nav { left: 23%; top: .45cqw; width: 46.5%; height: 8cqw; display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.2fr) minmax(0,.85fr) minmax(0,1.3fr); grid-template-rows: repeat(2,1fr); gap: .2cqw 1cqw; align-items: center; justify-content: initial; }
.header-nav a, .language-switch a { font-size: 1.8cqw; letter-spacing: .025cqw; }
.header-nav a { justify-self: center; }
.header-nav a[aria-current="page"]::after { bottom: -.75cqw; height: .14cqw; }
.language-switch { left: 61.2%; top: 5cqw; width: 7%; height: 2.8cqw; gap: .4cqw; border-left: 0; }
.language-switch .divider { font-size: 1.2cqw; }
.header-cta { left: 79.5%; top: .2cqw; width: 20%; height: 4.5cqw; gap: 0; font-size: 1.45cqw; align-items: center; justify-content: center; }
.header-cta .cta-label { position: absolute; inset: 0; display: grid; place-items: center; white-space: nowrap; }
.header-cta > span:last-child { position: absolute; top: 50%; right: .8cqw; transform: translateY(-50%); font-size: 1.7cqw; line-height: 1; }
.responsive-hero { top: 9cqw; height: 48.4cqw; flex-direction: row; align-items: center; justify-content: flex-start; padding: 4cqw 5%; background-position: center, 62% 52%; }
.responsive-hero-viper { color: #e8c14a; }
.responsive-hero-copy { width: 59%; max-width: none; }
.responsive-hero-eyebrow { margin-bottom: 1cqw; font-size: 1.8cqw; letter-spacing: .24cqw; }
.responsive-hero h1 { font-size: 4.6cqw; }
.responsive-hero-kicker { max-width: 100%; margin-top: 1cqw; font-size: 1.7cqw; letter-spacing: .12cqw; }
.responsive-hero-description { max-width: 55cqw; margin-top: 1.3cqw; font-size: 1.8cqw; line-height: 1.4; }
.responsive-hero-actions { gap: 1cqw; margin-top: 1.8cqw; }
.responsive-hero-actions a { min-height: 4.2cqw; gap: 1cqw; padding: 0 1.5cqw; font-size: 1.4cqw; }
.responsive-hero-platforms { gap: 1.5cqw; margin-top: 1.8cqw; font-size: 1.55cqw; }
.responsive-hero-platforms span { gap: .45cqw; }
.responsive-hero-platforms img { width: 2.1cqw; height: 2.1cqw; }
.responsive-hero-note { right: 4.5%; bottom: 8%; width: 24%; font-size: 1.3cqw; letter-spacing: .2cqw; line-height: 1.7; }
.featured-releases { top: 58.4cqw; left: 0; width: 100%; height: 31.5cqw; border-right: 0; border-bottom: 1px solid rgba(214,171,66,.28); }
.releases-heading { left: 4%; top: 2cqw; font-size: 1.8cqw; letter-spacing: .2cqw; }
.releases-heading::after { width: 3cqw; margin-left: 1cqw; }
.all-releases { right: 4%; top: 2.2cqw; font-size: 1.45cqw; }
.release-grid { left: 4%; right: 4%; top: 5.4cqw; height: 24cqw; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); gap: 1.1cqw 1.2%; }
.release-card { gap: 1.25cqw; padding: .55cqw; background: #090a0c; }
.release-cover { flex-basis: 10.4cqw; width: 10.4cqw; height: 10.4cqw; background-size: 186cqw auto; }
.release-cover.top { background-position: -8.46cqw -55.3cqw; }
.release-cover.last-chance { background-position: -34.72cqw -55.3cqw; }
.release-cover.city { background-position: -62.74cqw -55.3cqw; }
.release-cover.mente-rica { background-position: -91.55cqw -55.3cqw; }
.release-info { padding-top: 1cqw; }
.release-title { margin-bottom: .65cqw; font-size: 1.65cqw; }
.release-artist { margin-bottom: .55cqw; font-size: 1.4cqw; letter-spacing: .09cqw; }
.release-meta { font-size: 1.25cqw; }
.release-play { flex-basis: 2.8cqw; width: 2.8cqw; height: 2.8cqw; margin-right: .4cqw; font-size: 1.25cqw; }
.featured-artists { top: 90.9cqw; left: 0; width: 100%; height: 25.5cqw; border-top: 0; border-bottom: 1px solid rgba(214,171,66,.28); }
.artists-heading { left: 4%; top: 2cqw; font-size: 1.8cqw; letter-spacing: .2cqw; }
.artists-heading::after { width: 3cqw; margin-left: 1cqw; }
.all-artists { right: 4%; top: 2.2cqw; font-size: 1.45cqw; }
.artist-grid { left: 4%; right: 4%; top: 5.2cqw; height: 18cqw; gap: 1.5%; }
.artist-photo { background-size: 250cqw auto; }
.artist-photo:not(.luna-amora) { height: 13.5cqw; }
.artist-photo.kalix { background-position: -163.575cqw -73.7cqw; }
.artist-photo.luna { background-position: -188.7cqw -73.7cqw; }
.artist-photo.vertex { background-position: -214.5cqw -73.7cqw; }
.artist-card::after { height: 3cqw; }
.artist-caption { height: 2.8cqw; gap: .25cqw; }
.artist-card.artist-amora .artist-caption { height: 2.8cqw; }
.artist-name { font-size: 1.55cqw; letter-spacing: .08cqw; }
.artist-genre { font-size: 1.25cqw; letter-spacing: .07cqw; }
.ecosystem-live { top: 117.4cqw; left: 0; width: 100%; height: 41.5cqw; border-bottom: 1px solid rgba(214,171,66,.28); }
.ecosystem-intro { left: 5%; top: 2.8cqw; width: 90%; }
.ecosystem-heading { font-size: 2.35cqw; line-height: 1.1; }
.ecosystem-heading span { display: block; white-space: normal; }
.ecosystem-copy { max-width: 100%; margin-top: .7cqw; font-size: 1.5cqw; line-height: 1.35; }
.ecosystem-cta { min-width: 20cqw; height: 3.8cqw; margin-top: .8cqw; padding: 0 1.5cqw; font-size: 1.3cqw; }
.ecosystem-pillars { left: 5%; right: 5%; top: 18cqw; height: 21cqw; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); gap: 1.5cqw 2%; }
.ecosystem-pillar { padding: 1cqw 1cqw 0 6cqw; }
.ecosystem-icon { top: 1cqw; left: 1cqw; width: 4cqw; height: 4cqw; }
.ecosystem-icon img { width: 1.8cqw; height: 1.8cqw; }
.ecosystem-pillar h3 { margin-bottom: .6cqw; font-size: 1.5cqw; letter-spacing: .06cqw; }
.ecosystem-pillar p { font-size: 1.4cqw; line-height: 1.3; }
.select-banner { top: 159.9cqw; height: 7.54cqw; background-image: url('/assets/viper-records-select-reference.png'); background-repeat: no-repeat; background-size: 100cqw auto; background-position: 0 -48.73cqw; }
.select-banner-mask { display: none; }
.select-brand, .select-description, .select-learn, .select-submit { opacity: 0; }
}
.home-position-1 {top:66.3%;}
.home-position-2 {top:86.5%;}
.home-position-3 {left:5.2%;top:35.4%;width:16.9%;height:5.2%;}
.home-position-4 {left:23%;top:35.4%;width:13.8%;height:5.2%;}