/* Кольори та шрифти всього сайту. Еталонні кольори: #F7F7F7 та #F1181C. */
:root{
--ink:#080a0d;
--paper:#F7F7F7;
--muted:#9aa0a6;
--red:#F1181C;
--line:#292d32;
--display:'Barlow Condensed',sans-serif;
--body:Inter,sans-serif
}
*{
box-sizing:border-box
}
html{
scroll-behavior:smooth
}
body{
margin:0;
background:var(--ink);
color:var(--paper);
font-family:var(--body);
font-size:16px;
line-height:1.6
}
a{
color:inherit;
text-decoration:none
}
/* Верхнє меню. */
.topbar{
height:82px;
position:absolute;
z-index:10;
top:0;
left:0;
right:0;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 4.5vw;
border-bottom:1px solid rgba(247,247,247,.14)
}
.brand{
font:800 25px/1 var(--display);
letter-spacing:.04em
}
.brand span{
color:var(--red)
}
nav{
display:flex;
gap:34px;
font:600 14px var(--display);
letter-spacing:.12em;
text-transform:uppercase
}
nav a{
position:relative
}
nav a:after{
content:'';
position:absolute;
bottom:-8px;
left:0;
width:0;
height:2px;
background:var(--red);
transition:.25s
}
nav a:hover:after{
width:100%
}
.menu{
display:none;
color:var(--paper);
background:none;
border:0;
font:600 14px var(--display)
}
/* Перший екран і його фонове зображення. */
.hero{
min-height:100svh;
position:relative;
display:flex;
align-items:center;
padding:120px 7vw 70px;
overflow:hidden
}
.hero-art{
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(8,10,13,.94) 0%,rgba(8,10,13,.68) 38%,rgba(8,10,13,.1) 73%),linear-gradient(0deg,rgba(8,10,13,.82),transparent 42%),url('hero.png') center/cover no-repeat;
transform:scale(1.01)
}
.hero-copy{
z-index:1;
max-width:860px
}
.eyebrow,.section-no{
font:600 13px var(--display);
letter-spacing:.18em;
color:#b8bdc2;
text-transform:uppercase
}
.eyebrow span{
display:inline-block;
width:34px;
height:2px;
background:var(--red);
vertical-align:middle;
margin-right:12px
}
.hero h1,.manifest h2,.section-head h2,.contact h2{
font:800 clamp(4.6rem,10vw,9.5rem)/.79 var(--display);
letter-spacing:-.035em;
margin:32px 0 30px;
text-transform:uppercase
}
.hero h1 em{
color:transparent;
-webkit-text-stroke:1.5px var(--paper);
font-style:normal
}
.lead{
font-size:clamp(1rem,1.5vw,1.28rem);
max-width:510px;
color:#c4c7ca
}
.hero-actions{
display:flex;
gap:12px;
margin-top:34px
}
.button{
min-width:180px;
padding:15px 20px;
font:700 14px var(--display);
letter-spacing:.08em;
text-transform:uppercase;
text-align:center;
border:1px solid #777;
transition:.25s
}
.button.primary{
background:var(--red);
border-color:var(--red)
}
.button b{
float:right
}
.button:hover{
transform:translateY(-2px);
background:var(--paper);
color:#111;
border-color:var(--paper)
}
.scroll{
position:absolute;
z-index:1;
right:4.5vw;
bottom:38px;
writing-mode:vertical-rl;
font:600 11px var(--display);
letter-spacing:.18em;
color:#aaa
}
.scroll span{
display:inline-block;
height:55px;
width:1px;
background:#777;
margin-top:12px
}
/* Спільні внутрішні відступи основних розділів. */
.manifest,.music,.band,.contact{
padding:120px 7vw;
border-top:1px solid var(--line)
}
.manifest-grid{
display:grid;
grid-template-columns:1.25fr .75fr;
gap:8vw
}
.manifest h2{
font-size:clamp(4rem,7.2vw,8rem);
margin-top:44px
}
.manifest h2 span,.contact h2 span{
color:var(--red)
}
.manifest-copy{
padding-top:70px;
color:#bdc1c5
}
.manifest-copy>p{
max-width:500px;
font-size:1.08rem
}
.fact{
border-top:1px solid var(--line);
margin-top:55px;
padding-top:25px;
display:flex;
gap:22px;
align-items:center
}
.fact strong{
font:800 74px/1 var(--display);
color:var(--red)
}
.fact span{
font:500 13px/1.4 var(--display);
letter-spacing:.1em;
text-transform:uppercase
}
.section-head{
display:flex;
justify-content:space-between;
align-items:end;
margin-bottom:55px
}
.section-head h2{
font-size:clamp(4.5rem,8vw,8.5rem);
margin:22px 0 0
}
.aside{
max-width:320px;
color:var(--muted)
}
/* Список пісень та розкривні блоки. */
.tracks{
border-top:1px solid var(--line)
}
.track{
display:grid;
grid-template-columns:65px 1fr 60px;
align-items:center;
gap:22px;
padding:34px 20px;
border-bottom:1px solid var(--line);
transition:.25s
}
.track:hover{
background:#11151a;
padding-left:30px
}
.track.feature{
background:linear-gradient(90deg,rgba(241,24,28,.16),transparent 65%)
}
.track-index{
font:600 14px var(--display);
color:#666
}
.status{
font:600 11px var(--display);
letter-spacing:.15em;
color:var(--red)
}
.track h3{
font:700 clamp(2rem,4vw,4.2rem)/1 var(--display);
text-transform:uppercase;
margin:8px 0
}
.track p{
margin:0;
color:var(--muted)
}
.arrow{
font-size:28px;
color:#777
}
/* Сітка з картками учасників гурту. */
.members{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:45px 20px
}
.members article>span{
font:600 11px var(--display);
color:#777
}
.portrait{
aspect-ratio:4/3;
margin:9px 0 18px;
display:grid;
place-items:center;
font:800 clamp(3rem,7vw,7rem)/1 var(--display);
color:rgba(247,247,247,.16);
filter:saturate(.75);
overflow:hidden;
position:relative
}
.portrait:after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(145deg,transparent 45%,rgba(241,24,28,.28))
}
.p1{
background:#202831
}
.p2{
background:#352b35
}
.p3{
background:#28313a
}
.p4{
background:#24282b
}
.p5{
background:#382928
}
.p6{
background:#20242b
}
.members h3{
font:700 28px/1 var(--display);
margin:0
}
.members p{
margin:7px 0;
color:var(--muted);
font-size:.9rem
}
.quote{
min-height:480px;
display:grid;
place-items:center;
text-align:center;
padding:80px 7vw;
background:linear-gradient(120deg,#171b20,#0b0d10)
}
.quote p{
font:700 clamp(2.4rem,5.3vw,6rem)/1.05 var(--display);
text-transform:uppercase
}
.quote span{
color:var(--red)
}
/* Контактний розділ. */
.contact-grid{
display:grid;
grid-template-columns:1.2fr .8fr;
gap:8vw;
align-items:end
}
.contact h2{
font-size:clamp(4.5rem,8vw,9rem)
}
.contact-grid>div{
padding-bottom:30px
}
.contact-grid p{
color:var(--muted)
}
.contact-grid a{
display:block;
font:700 clamp(1.4rem,2.7vw,2.8rem) var(--display);
border-bottom:1px solid #777;
padding:15px 0
}
.contact-grid a b{
float:right
}
.contact small{
display:block;
margin-top:22px;
color:#777
}
footer{
padding:30px 4.5vw;
border-top:1px solid var(--line);
display:flex;
justify-content:space-between;
align-items:center;
color:#777;
font-size:12px
}
footer div{
display:flex;
gap:20px
}
.reveal{
animation:enter .9s ease both
}
@keyframes enter{
from{
opacity:0;
transform:translateY(25px)
}
to{
opacity:1;
transform:none
}

}
/* Мобільна версія для екранів до 760 px. */
@media(max-width:760px){
.topbar{
height:70px;
padding:0 22px
}
.menu{
display:block
}
.menu i{
display:inline-block;
width:18px;
height:1px;
background:var(--paper);
margin:0 0 4px 8px
}
nav{
position:absolute;
top:70px;
left:0;
right:0;
padding:25px;
display:none;
flex-direction:column;
background:#0b0d10;
border-bottom:1px solid var(--line)
}
nav.open{
display:flex
}
.hero{
padding:105px 22px 65px;
align-items:flex-end
}
.hero-art{
background-position:68% center
}
.hero h1{
font-size:clamp(3.8rem,18vw,6rem)
}
.hero-actions{
flex-direction:column;
align-items:stretch
}
.scroll{
display:none
}
.manifest,.music,.band,.contact{
padding:80px 22px
}
.manifest-grid,.contact-grid{
grid-template-columns:1fr
}
.manifest h2{
font-size:15vw
}
.manifest-copy{
padding-top:0
}
.section-head{
display:block
}
.aside{
margin-top:20px
}
.track{
grid-template-columns:35px 1fr 20px;
padding:25px 0;
gap:8px
}
.track:hover{
padding-left:5px
}
.track p{
font-size:.86rem
}
.members{
grid-template-columns:1fr 1fr;
gap:35px 12px
}
.members h3{
font-size:23px
}
.contact h2{
font-size:16vw
}
footer{
align-items:flex-start;
gap:20px;
flex-wrap:wrap
}
footer p{
order:3;
width:100%
}

}

.band-stage{
width:100%;
margin:0 0 55px;
overflow:hidden;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
background:#11151a
}
.band-stage img{
display:block;
width:100%;
aspect-ratio:2.55/1;
object-fit:cover;
object-position:center;
filter:saturate(.9) contrast(1.04)
}

.contact-soon{
display:block;
font:700 clamp(1.4rem,2.7vw,2.8rem) var(--display);
border-bottom:1px solid #777;
padding:15px 0
}

@media(max-width:760px){
.band-stage{
margin-bottom:38px
}
.band-stage img{
aspect-ratio:4/3
}

}

@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto
}
.reveal{
animation:none
}
*{
transition:none!important
}

}

/* Structured content update */
.topbar{
position:fixed;
z-index:100;
background:linear-gradient(180deg,rgba(8,10,13,.96),rgba(8,10,13,.78));
backdrop-filter:blur(12px)
}

.brand{
display:inline-flex;
gap:.22em;
position:relative;
letter-spacing:.015em
}
.brand .brand-otto{
color:var(--paper)
}
.brand .brand-brenz{
color:var(--red)
}

.brand-distressed:after{
content:'';
position:absolute;
inset:0;
pointer-events:none;
opacity:.42;
background:repeating-linear-gradient(111deg,transparent 0 3px,rgba(8,10,13,.95) 3px 4px,transparent 4px 9px);
mix-blend-mode:multiply
}

.story{
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
margin-top:30px
}
.story summary{
cursor:pointer;
list-style:none;
padding:18px 0;
font:700 16px var(--display);
letter-spacing:.08em;
text-transform:uppercase
}
.story summary::-webkit-details-marker{
display:none
}
.story summary span{
float:right;
color:var(--red);
font-size:12px
}
.story[open] summary span{
font-size:0
}
.story[open] summary span:after{
content:'Weniger';
font-size:12px
}
.story-body{
padding-bottom:18px
}

.track{
display:block;
padding:0
}
.track:hover{
padding-left:0
}
.track summary{
display:grid;
grid-template-columns:65px 1fr 60px;
align-items:center;
gap:22px;
padding:26px 20px;
cursor:pointer;
list-style:none
}
.track summary::-webkit-details-marker{
display:none
}
.track-title strong{
display:block;
font:700 clamp(1.7rem,3.3vw,3.4rem)/1 var(--display);
text-transform:uppercase
}
.track-title .status{
display:block;
margin-bottom:5px
}
.track-toggle{
font:300 34px/1 var(--display);
color:#777;
transition:.25s
}
.track[open] .track-toggle{
transform:rotate(45deg);
color:var(--red)
}
.track-detail{
display:grid;
grid-template-columns:1fr auto;
gap:30px;
margin:0 60px 0 85px;
padding:0 0 28px;
color:var(--muted)
}
.track-detail p{
margin:0
}
.track-detail span{
font:600 11px var(--display);
letter-spacing:.13em;
text-transform:uppercase
}

.member-card{
min-width:0
}
.member-card>summary{
list-style:none;
cursor:pointer
}
.member-card>summary::-webkit-details-marker{
display:none
}
.member-card summary>span{
font:600 11px var(--display);
color:#777
}
.member-card summary>b{
display:inline-block;
margin-top:9px;
color:#777;
font:600 11px var(--display);
letter-spacing:.12em;
text-transform:uppercase
}
.member-card summary>b:after{
content:' +';
color:var(--red);
font-size:15px
}
.member-card[open] summary>b:after{
content:' −'
}
.portrait small{
position:absolute;
left:14px;
bottom:12px;
font:600 10px var(--display);
letter-spacing:.15em;
color:#777;
z-index:1
}
.member-story{
border-left:2px solid var(--red);
margin-top:18px;
padding:3px 0 3px 16px
}
.member-story p{
font-size:.94rem
}

.contact-form{
display:grid;
gap:15px
}
.contact-form label span{
display:block;
margin-bottom:5px;
font:600 11px var(--display);
letter-spacing:.13em;
text-transform:uppercase;
color:#858b91
}
.contact-form input,.contact-form select,.contact-form textarea{
width:100%;
border:1px solid #3c4249;
background:#0d1014;
color:var(--paper);
padding:13px 14px;
font:inherit;
border-radius:0
}
.contact-form textarea{
resize:vertical
}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
outline:2px solid var(--red);
outline-offset:1px
}
.contact-form .button{
cursor:pointer;
margin-top:5px
}
.contact-form small{
color:#777;
line-height:1.45
}

@media(max-width:760px){
.track summary{
grid-template-columns:35px 1fr 20px;
padding:22px 0;
gap:8px
}
.track-detail{
display:block;
margin:0 0 0 43px;
padding:0 18px 22px 0
}
.track-detail p{
font-size:.86rem;
margin-bottom:8px
}

}

.logo-link{
display:block;
height:34px;
line-height:0
}
.logo-link img{
display:block;
width:auto;
height:100%;
object-fit:contain
}
.footer-logo{
height:30px
}
.logo-link:after{
display:none
}

@media(max-width:760px){
.logo-link{
height:29px
}
.footer-logo{
height:27px
}

}

.portrait img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center 22%;
position:relative;
z-index:0
}
.portrait:after{
z-index:1;
pointer-events:none
}

/* Сторінка Impressum і Datenschutz. */
.legal-page{
min-height:100vh;
padding:140px 7vw 80px;
max-width:1040px
}
.legal-page h1{
font:800 clamp(4rem,9vw,8rem)/.85 var(--display);
text-transform:uppercase;
margin:0 0 70px
}
.legal-page h1 span,.legal-page h2 span{
color:var(--red)
}
.legal-section{
border-top:1px solid var(--line);
padding:42px 0
}
.legal-section h2{
font:700 clamp(2rem,4vw,3.6rem)/1 var(--display);
text-transform:uppercase;
margin:0 0 24px
}
.legal-section h3{
font:700 1.25rem var(--display);
text-transform:uppercase;
margin:30px 0 8px
}
.legal-section p{
max-width:760px;
color:#bdc1c5
}
.legal-section a{
color:var(--paper);
border-bottom:1px solid var(--red)
}

@media(max-width:760px){
.legal-page{
padding:110px 22px 60px
}

}

.contact-grid{
align-items:center
}
.contact h2{
margin:0
}
.contact-grid>div{
padding-bottom:0
}

/* Фото учасників: усі шість карток мають однаковий квадратний формат. */
.portrait{
aspect-ratio:1/1
}

.member-card:nth-child(4) .portrait img{
object-position:center 32%
}

.member-card:nth-child(5) .portrait img{
object-position:center 36%
}

/* Розкривний блок з адресою в Impressum. */
.legal-contact{
max-width:760px;
margin:20px 0 30px;
border:1px solid var(--line);
background:#0d1014
}

.legal-contact summary{
cursor:pointer;
list-style:none;
padding:15px 18px;
font:700 .9rem var(--display);
letter-spacing:.08em;
text-transform:uppercase
}

.legal-contact summary::-webkit-details-marker{
display:none
}

.legal-contact summary:after{
content:' +';
float:right;
color:var(--red);
font-size:1.1rem
}

.legal-contact[open] summary:after{
content:' −'
}

.legal-contact address{
padding:0 18px 18px;
color:#bdc1c5;
font-style:normal
}

.spotify-profile{
display:inline-block;
border-bottom:1px solid var(--red);
padding-bottom:4px;
color:var(--paper)
}

.privacy-check{
display:grid!important;
grid-template-columns:18px 1fr;
gap:10px;
align-items:start
}
.privacy-check input{
width:18px;
height:18px;
margin-top:3px
}
.privacy-check span{
margin:0!important;
font:400 .82rem/1.45 var(--body)!important;
letter-spacing:0!important;
text-transform:none!important;
color:#858b91!important
}
.privacy-check a{
display:inline!important;
padding:0!important;
border-bottom:1px solid var(--red)!important;
font:inherit!important
}
.hp-field{
position:absolute!important;
left:-9999px!important
}
.form-status{
margin:0;
min-height:1.5em;
font-size:.9rem
}
.form-status.success{
color:#98d6a4
}
.form-status.error{
color:var(--red)
}

.social-block{
margin-top:34px;
padding-top:24px;
border-top:1px solid var(--line)
}
.social-block>p{
font:600 11px var(--display);
letter-spacing:.13em;
text-transform:uppercase
}
.social-links{
display:grid;
grid-template-columns:1fr 1fr;
gap:0 18px
}
.social-links a{
font:700 1rem var(--display);
padding:9px 0
}

@media(max-width:760px){
.contact h2{
margin-bottom:42px
}
.social-links{
grid-template-columns:1fr
}

}

/* Основні кольори бренду задані на початку файлу: білий #F7F7F7 і червоний #F1181C. */

/* Значки социальных сетей */
.social-icon-link {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.social-icon-link svg {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    color: #F7F7F7;
    transition: color 0.2s ease, transform 0.2s ease;
}

.social-icon-link:hover svg {
    color: #F1181C;
    transform: translateY(-1px);
}

/* Верхняя ссылка на Spotify */
.spotify-profile.social-icon-link {
    display: inline-flex !important;
}

/* Розкривний блок із текстом пісні */
.lyrics {
    grid-column: 1 / -1;
    margin-top: 20px;
    border-top: 1px solid #3a3f45;
    border-bottom: 1px solid #24282d;
    background: linear-gradient(
        90deg,
        rgba(241, 24, 28, 0.055),
        transparent 58%
    );
}

/* Рядок із назвою Songtext */
.lyrics > summary {
    display: grid;
    grid-template-columns: 1fr auto 22px;
    align-items: center;
    gap: 14px;
    padding: 16px 2px;
    cursor: pointer;
    list-style: none;
}

.lyrics > summary::-webkit-details-marker {
    display: none;
}

.lyrics > summary strong {
    font: 700 14px var(--display);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper);
}

/* Напис Text anzeigen / Text schließen */
.lyrics-action {
    font: 600 11px var(--display) !important;
    letter-spacing: 0.13em !important;
    text-transform: uppercase;
    color: #9ca1a7;
}

/* Червоний плюс */
.lyrics-toggle {
    font: 300 25px/1 var(--display);
    color: #F1181C;
    text-align: center;
    transition: transform 0.25s ease;
}

/* Поворот плюса після відкриття */
.lyrics[open] .lyrics-toggle {
    transform: rotate(45deg);
}

.lyrics[open] .lyrics-action {
    font-size: 0 !important;
}

.lyrics[open] .lyrics-action::after {
    content: "Text schließen";
    font-size: 11px;
}

/* Поле з повним текстом */
.lyrics-body {
    max-width: 720px;
    padding: 7px 28px 30px;
    border-left: 2px solid #F1181C;
}

.lyrics-text {
    margin: 0;
    white-space: pre-line;
    font-size: 1rem;
    line-height: 1.85;
    color: #d5d6d7;
}

/* Вигляд на телефоні */
@media (max-width: 760px) {
    .lyrics {
        margin-top: 18px;
    }

    .lyrics > summary {
        grid-template-columns: 1fr auto 20px;
        padding: 15px 0;
    }

    .lyrics-body {
        padding: 5px 14px 24px;
    }

    .lyrics-text {
        font-size: 0.94rem;
        line-height: 1.75;
    }
}

/* Підпис під текстом пісні */
.lyrics-signature {
    margin: 28px 0 0 !important;
    padding-top: 14px;
    border-top: 1px solid #3a3f45;
    color: #8f9499 !important;
    font: 600 12px var(--display) !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Контейнер для зовнішніх музичних плеєрів */
.multi-player {
    width: 100%;
    margin-top: 24px;
}

/* Область, у якій показується вибраний плеєр */
.music-player-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 152px;
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid rgba(247, 247, 247, 0.14);
    border-radius: 12px;
    background:
        radial-gradient(circle at 75% 50%, rgba(241, 24, 28, 0.08), transparent 45%),
        #111111;
}

/* Попередження до вибору платформи розташоване безпосередньо у блоці плеєра */
.music-player-placeholder {
    margin: 0;
    padding: 30px 20px;
    color: rgba(247, 247, 247, 0.65);
    font-size: 14px;
    text-align: center;
}

/* Загальні параметри зовнішніх плеєрів */
.music-player-frame iframe {
    display: block;
    width: 100%;
    margin: 0;
    border: 0;
}

/* Apple Music не розтягуємо на весь екран: так світлий плеєр виглядає акуратніше */
.music-player-frame .player-apple {
    max-width: 660px;
    margin: 12px auto;
    border-radius: 10px;
}

/* Spotify використовує всю доступну ширину */
.music-player-frame .player-spotify {
    max-width: 100%;
}

/* YouTube зберігає правильні пропорції відео */
.music-player-frame .player-youtube {
    width: 100%;
    height: auto;
    min-height: 250px;
    aspect-ratio: 16 / 9;
}

/* Amazon Music показуємо компактно по центру */
.music-player-frame .player-amazon {
    max-width: 500px;
    margin: 12px auto;
    border-radius: 14px;
}

/* Чотири рівні кнопки в один ряд */
.music-platform-buttons {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

/* Оформлення кнопок */
.platform-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid rgba(247, 247, 247, 0.2);
    border-radius: 8px;
    background: #292929;
    color: #F7F7F7;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

/* Наведення на кнопку */
.platform-button:hover {
    border-color: #F1181C;
    background: #353535;
    transform: translateY(-1px);
}

/* Активна музична платформа */
.platform-button.is-active {
    border-color: #F1181C;
    background: #F1181C;
    color: #F7F7F7;
}

/* Платформа, для якої ще немає посилання на конкретну пісню */
.platform-button:disabled {
    border-color: rgba(247, 247, 247, 0.08);
    background: #171717;
    color: rgba(247, 247, 247, 0.3);
    cursor: not-allowed;
    transform: none;
}

/* На вузькому екрані кнопки стають сіткою 2 × 2 */
@media (max-width: 760px) {
    .music-platform-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .platform-button {
        font-size: 12px;
    }

    .music-player-frame .player-youtube {
        min-height: 200px;
    }
}


/* Song cover artwork */
.track > summary{
grid-template-columns:42px 88px minmax(0,1fr) 32px;
gap:22px;
padding:24px 20px
}
.track-art{
display:block;
width:88px;
height:88px;
overflow:hidden;
border-radius:5px;
background:linear-gradient(135deg,#292d32,#11151a);
box-shadow:inset 0 0 0 1px rgba(247,247,247,.1)
}
.track-cover{
display:block;
width:100%;
height:100%;
object-fit:contain
}
.track-cover[hidden]{display:none}
.track-title{min-width:0}
.track-title strong{overflow-wrap:anywhere}
.track > summary > .track-toggle{text-align:center}
.track > summary:focus-visible{
outline:2px solid var(--red);
outline-offset:-2px
}
@media(max-width:760px){
.track > summary{
grid-template-columns:60px minmax(0,1fr) 20px;
gap:12px;
padding:20px 0
}
.track > summary > .track-index{display:none}
.track-art{width:60px;height:60px}
.track > .track-detail{margin-left:0;padding-right:0}
}

/* Enlarge artwork while a song accordion is open. */
.track[open] > summary{
    grid-template-columns:42px 240px minmax(0,1fr) 32px;
}
.track[open] > summary > .track-art{
    width:240px;
    height:240px;
}
@media(max-width:760px){
    .track[open] > summary{
        grid-template-columns:minmax(0,1fr) 20px;
        gap:18px 12px;
    }
    .track[open] > summary > .track-art{
        grid-column:1 / -1;
        width:min(100%,280px);
        height:auto;
        aspect-ratio:1;
    }
    .track[open] > summary > .track-title{
        grid-column:1;
    }
    .track[open] > summary > .track-toggle{
        grid-column:2;
    }
}

/* Dedicated video section: no third-party requests before loading. */
.videos{padding:120px 7vw;border-top:1px solid var(--line)}
#video{scroll-margin-top:100px}
.video-channel{border-bottom:1px solid var(--red);padding-bottom:4px;color:var(--paper)}
.video-stage{aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);border-radius:6px;background:radial-gradient(ellipse at 50% 45%,rgba(241,24,28,.18),transparent 65%),#11151a}
.video-consent{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px;text-align:center}
.video-kicker{font:600 13px var(--display);letter-spacing:.2em;color:var(--muted)}
.video-load{display:flex;align-items:center;gap:16px;border:0;background:none;color:var(--paper);font:700 clamp(1.4rem,3vw,2.4rem) var(--display);text-transform:uppercase;cursor:pointer;padding:10px}
.video-play{display:grid;place-items:center;width:70px;height:70px;border-radius:50%;background:var(--red);font-size:24px;padding-left:4px}
.video-load:hover .video-play{background:var(--paper);color:var(--ink)}
.video-load:focus-visible{outline:2px solid var(--red);outline-offset:6px}
.video-consent p{margin:0;color:var(--muted);font-size:.85rem;max-width:420px}
.video-stage iframe{display:block;width:100%;height:100%;border:0}
.video-direct{margin:16px 0 0;color:var(--muted);font-size:.85rem}
.video-direct a:hover{color:var(--paper)}
@media(max-width:760px){
.videos{padding:80px 22px}
.video-consent{gap:10px;padding:12px}
.video-play{width:44px;height:44px;font-size:18px}
.video-kicker{font-size:10px}
.video-consent p{font-size:.72rem;line-height:1.4}
}