@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Roboto+Slab:wght@700&display=swap');

:root{
--bg:#080808;
--panel:#111;
--panel2:#161311;
--text:#e6dfd2;
--muted:#938b80;
--rust:#a64d23;
--rust2:#713318;
--line:#38251c;
--max:1200px
}

*{
box-sizing:border-box
}

html{
scroll-behavior:smooth;
scroll-padding-top:90px
}

body{
margin:0;
background:var(--bg);
color:var(--text);
font-family:Oswald,Arial,sans-serif;
line-height:1.55;
background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 5px)
}

a{
color:inherit;
text-decoration:none
}

/* ШАПКА */

.site-header{
min-height:78px;
max-width:var(--max);
margin:auto;
padding:16px 28px;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:2px solid var(--rust2);
gap:24px
}

.logo{
font-size:25px;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
white-space:nowrap
}

.logo:first-letter{
color:var(--rust)
}

.logo span{
display:block;
color:var(--rust);
font-size:12px;
letter-spacing:.25em;
margin-left:31px;
margin-top:-4px
}

.site-header nav{
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
gap:8px 18px;
color:var(--muted);
font-size:14px;
text-transform:uppercase;
letter-spacing:.04em
}

.site-header nav a{
transition:.2s
}

.site-header nav a:hover{
color:#d46b35;
text-shadow:0 0 8px rgba(166,77,35,.35)
}

.menu-toggle{
display:none;
border:1px solid var(--rust2);
background:#0d0d0d;
color:var(--text);
font-size:22px;
padding:7px 11px;
cursor:pointer;
min-width:44px;
min-height:44px
}

/* ВЕРХНИЙ БАННЕР */

.hero-banner{
width:100%;
max-width:1856px;
margin:0 auto;
padding:0;
line-height:0;
overflow:hidden;
background:#080808;
border-bottom:1px solid var(--line)
}

.hero-banner img{
display:block;
width:100%;
height:auto;
max-width:1856px;
margin:0 auto
}

/* РАЗДЕЛЫ */

.section{
max-width:var(--max);
margin:auto;
padding:95px 28px
}

.section.alt{
max-width:none;
padding-left:max(28px,calc((100% - var(--max))/2 + 28px));
padding-right:max(28px,calc((100% - var(--max))/2 + 28px));
background:var(--panel2);
border-top:1px solid #241914;
border-bottom:1px solid #241914
}

.section-heading{
max-width:850px
}

.eyebrow{
color:#b45a2b;
letter-spacing:.28em;
font-size:12px;
font-weight:700
}

.section h2,
.about h2{
font-family:'Roboto Slab',serif;
font-size:clamp(42px,6vw,68px);
line-height:.95;
margin:14px 0 20px;
text-transform:uppercase
}

.section-heading>p:last-child,
.about>p:not(.eyebrow){
color:#aaa196;
font-size:18px
}

/* КАРТОЧКИ */

.feature-card,
.empty-card,
.photo-grid div,
.video-placeholder{
border:1px solid var(--line);
padding:30px;
background:#0d0d0d;
box-shadow:6px 6px 0 #0a0a0a
}

.feature-card,
.empty-card{
display:flex;
align-items:center;
gap:25px;
margin-top:40px
}

.feature-card>span{
font-size:64px;
color:var(--rust)
}

.icon,
.play{
font-size:34px;
color:var(--rust);
min-width:48px;
text-align:center
}

.cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top:42px
}

.cards article{
border:1px solid var(--line);
padding:30px;
background:#0d0d0d;
min-height:180px;
transition:.2s
}

.cards article:hover{
transform:translateY(-4px);
border-color:#6d361d
}

.cards span{
color:#b45a2b;
font-size:13px;
letter-spacing:.15em
}

.cards h3,
.feature-card h3,
.empty-card h3,
.video-placeholder h3{
font-size:25px;
margin:10px 0
}

.cards p,
.feature-card p,
.empty-card p,
.video-placeholder p{
color:var(--muted)
}

/* ФОТО */

.photo-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top:42px
}

.photo-grid div{
min-height:220px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
font-size:25px;
text-transform:uppercase;
letter-spacing:.08em
}

.photo-grid small{
color:var(--rust);
font-size:13px
}

/* ВИДЕО */

.video-placeholder{
margin-top:42px;
min-height:300px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center
}

/* КНОПКИ */

.hero-buttons{
display:flex;
gap:12px;
flex-wrap:wrap
}

.button{
border:1px solid #75401f;
padding:12px 22px;
display:inline-block;
margin-top:25px;
text-transform:uppercase;
letter-spacing:.08em;
font-weight:600;
background:#0d0d0d
}

.button:hover{
border-color:#c05d2b;
background:#1b100b
}

.button.primary{
background:#8d3f1c;
border-color:#a95727
}

.button.primary:hover{
background:#a64d23
}

/* БЛОК СВЯЗИ */

.about{
max-width:var(--max);
margin:auto;
padding:105px 28px
}

.about h2{
max-width:700px
}

/* ПОДВАЛ */

footer{
max-width:var(--max);
margin:auto;
padding:30px 28px;
display:flex;
justify-content:space-between;
border-top:2px solid var(--rust2);
color:var(--muted)
}

footer a:hover{
color:var(--rust)
}

/* СТРАНИЦА ПЕСЕН */

.songs-page>h1{
font-family:'Roboto Slab',serif;
font-size:clamp(48px,7vw,82px);
line-height:.95;
margin:14px 0
}

.songs-intro{
max-width:700px;
color:#aaa196;
font-size:19px
}

.song-list{
display:grid;
gap:22px;
margin-top:48px
}

.song-card{
display:grid;
grid-template-columns:100px 1fr;
border:1px solid var(--line);
background:#0d0d0d;
box-shadow:7px 7px 0 #0a0a0a
}

.song-card:hover{
border-color:#6d361d
}

.song-number{
font-family:'Roboto Slab',serif;
font-size:58px;
color:var(--rust);
padding:30px 24px;
border-right:1px solid var(--line)
}

.song-body{
padding:28px 32px
}

.song-meta{
color:#b45a2b;
text-transform:uppercase;
letter-spacing:.15em;
font-size:12px
}

.song-body h2{
font-size:32px;
margin:8px 0 6px
}

.song-note{
color:var(--muted);
margin:0 0 18px
}

.audio-placeholder{
border:1px solid #4b2a1b;
background:#111;
padding:14px 18px;
color:#b45a2b;
letter-spacing:.08em;
font-size:13px
}

.lyrics{
margin-top:18px;
border-top:1px solid var(--line);
padding-top:14px
}

.lyrics summary{
cursor:pointer;
color:#c5bdb0;
text-transform:uppercase;
letter-spacing:.08em
}

.lyrics-text{
margin-top:14px;
padding:18px;
background:#111;
color:#aaa196;
white-space:pre-line
}

/* ФОКУС */

.menu-toggle:focus-visible,
.site-header a:focus-visible,
.button:focus-visible,
summary:focus-visible{
outline:2px solid #d46b35;
outline-offset:3px
}

/* ПЛАНШЕТ */

@media(max-width:900px){

.site-header{
align-items:flex-start;
position:relative
}

.menu-toggle{
display:block
}

.site-header nav{
display:none;
position:absolute;
z-index:5;
left:0;
right:0;
top:77px;
background:#0d0d0d;
border-bottom:2px solid var(--rust2);
padding:16px 28px;
flex-direction:column;
gap:14px
}

.site-header nav.open{
display:flex
}

.cards,
.photo-grid{
grid-template-columns:1fr 1fr
}

}

/* ТЕЛЕФОН */

@media(max-width:600px){

.site-header{
padding:14px 18px
}

.logo{
font-size:20px
}

.logo span{
font-size:10px;
margin-left:25px
}

.menu-toggle{
font-size:20px;
padding:6px 10px
}

.site-header nav{
top:69px;
padding:14px 18px
}

.section,
.about{
padding:70px 22px
}

.section.alt{
padding-left:22px;
padding-right:22px
}

.cards,
.photo-grid{
grid-template-columns:1fr
}

.feature-card,
.empty-card{
align-items:flex-start
}

footer{
padding:25px 22px;
flex-direction:column;
gap:12px
}

.song-card{
grid-template-columns:1fr
}

.song-number{
border-right:0;
border-bottom:1px solid var(--line);
padding:18px 22px
}

.song-body{
padding:24px 22px
}

}

/* УМЕНЬШЕНИЕ АНИМАЦИИ */

@media(prefers-reduced-motion:reduce){

html{
scroll-behavior:auto
}

.site-header nav a,
.cards article{
transition:none
}

.cards article:hover{
transform:none
}

}