*{
box-sizing:border-box;
margin:0;
padding:0;
}

body{

font-family:"Inter",sans-serif;

color:#ece7df;

background:

linear-gradient(
180deg,
#151311,
#0e0d0c
),

url("https://www.transparenttextures.com/patterns/grunge-wall.png");

min-height:100vh;

overflow-x:hidden;

border:10px solid #0c0b0a;

}



/* spotlight */

.spotlight{

position:fixed;

width:320px;
height:320px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(255,255,255,.22) 0%,
rgba(255,255,255,.10) 25%,
transparent 60%

);

pointer-events:none;

transform:translate(-50%,-50%);

z-index:3;

mix-blend-mode:soft-light;

}



/* ghost logo */

.ghost-logo{

position:fixed;

top:50%;
left:50%;

transform:translate(-50%,-50%);

width:900px;

opacity:.08;

pointer-events:none;

z-index:1;

}

.ghost-logo img{

width:100%;

}



/* hero */

.hero{

position:relative;

height:100vh;
min-height:700px;

display:flex;
align-items:center;
justify-content:center;

text-align:center;

overflow:hidden;

}

.hero-bg{

position:absolute;

width:100%;
height:100%;

object-fit:cover;

filter:brightness(.45);

}

.hero-overlay{

position:absolute;

width:100%;
height:100%;

background:linear-gradient(
180deg,
rgba(0,0,0,.2),
rgba(0,0,0,.6)
);

}

.hero-content{

position:relative;

z-index:4;

padding:0 20px;

}

h1{

font-family:"Bebas Neue";

font-size:180px;

letter-spacing:.14em;

line-height:.9;

}



/* nav */

.hero-nav{

margin-top:40px;

display:flex;

gap:30px;

justify-content:center;
flex-wrap:wrap;

}

.hero-nav a{

font-family:"Bebas Neue";

font-size:26px;

letter-spacing:.12em;

text-decoration:none;

color:#ece7df;

border-bottom:1px solid transparent;

}

.hero-nav a:hover{

border-bottom:1px solid #b69058;

color:#b69058;

}



/* floating logo */

.floating-logo{

position:fixed;

right:30px;
bottom:30px;

width:80px;

opacity:.18;

z-index:4;

}

.floating-logo img{

width:100%;

}



/* page */

.page{

max-width:1100px;

margin:auto;

padding:90px 24px;

text-align:center;

}



/* sections */

.info-block{

padding:90px 20px;

margin-bottom:50px;

background:rgba(20,18,16,.7);

}

h2{

font-family:"Bebas Neue";

font-size:64px;

letter-spacing:.1em;

margin-bottom:20px;

}

.info-text{

color:#c8c0b4;

margin-bottom:20px;

line-height:1.7;

font-size:16px;

}



/* video grid */

.video-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

margin-top:40px;

}

.video-card{

background:rgba(255,255,255,.02);

border:1px solid rgba(255,255,255,.08);

padding:18px;

text-align:left;

min-height:100%;

}

.video-label{

font-family:"Bebas Neue";

letter-spacing:.12em;

color:#b69058;

font-size:24px;

margin-bottom:12px;

display:block;

}

.video-frame{

aspect-ratio:16/9;

}

.video-frame iframe{

width:100%;
height:100%;

border:0;

}

.video-link{

display:flex;

flex-direction:column;

justify-content:center;

text-decoration:none;

color:#ece7df;

}

.next-text{

color:#c8c0b4;
line-height:1.6;

}



/* interlude */

.interlude{

font-family:"Bebas Neue";

font-size:140px;

letter-spacing:.15em;

color:rgba(255,255,255,.05);

margin:40px 0;

text-align:center;
line-height:.9;

}



/* shows */

.shows{

display:grid;

gap:10px;

}

.show-item{

display:flex;

justify-content:space-between;
align-items:flex-start;
gap:20px;

padding:16px;

border:1px solid rgba(255,255,255,.08);

background:rgba(255,255,255,.02);

text-decoration:none;

color:#ece7df;

}

.show-date{

color:#b69058;
flex:0 0 auto;

}

.show-place{

text-align:right;

}



/* poster */

.show-poster{

margin-top:25px;

max-width:760px;

margin-left:auto;
margin-right:auto;

border:1px solid rgba(255,255,255,.08);

overflow:hidden;

}

.show-poster img{

width:100%;
display:block;

}



/* contact */

.contact-card{

margin-top:20px;

}

.contact-card a{

color:#ece7df;

text-decoration:none;

border-bottom:1px solid transparent;

}

.contact-card a:hover{

border-bottom:1px solid #b69058;

color:#b69058;

}



/* footer */

.footer{

text-align:center;

padding:30px;

color:#9f9588;

}



/* tablet */

@media (max-width: 1024px){

h1{
font-size:128px;
}

.interlude{
font-size:92px;
}

.video-grid{
grid-template-columns:1fr 1fr;
}

.ghost-logo{
width:680px;
}

}



/* mobile */

@media (max-width: 768px){

body{
border-width:6px;
}

.spotlight{
display:none;
}

.ghost-logo{
width:420px;
opacity:.06;
}

.floating-logo{
width:58px;
right:18px;
bottom:18px;
}

.hero{
min-height:620px;
height:100svh;
}

.hero-content{
padding:0 16px;
}

h1{
font-size:78px;
letter-spacing:.1em;
line-height:.92;
}

.hero-nav{
gap:18px;
margin-top:28px;
}

.hero-nav a{
font-size:22px;
}

.page{
padding:60px 16px;
}

.info-block{
padding:60px 16px;
margin-bottom:32px;
}

h2{
font-size:46px;
margin-bottom:16px;
}

.info-text{
font-size:15px;
line-height:1.65;
margin-bottom:16px;
}

.video-grid{
grid-template-columns:1fr;
gap:16px;
margin-top:28px;
}

.video-card{
padding:16px;
}

.video-label{
font-size:22px;
}

.interlude{
font-size:54px;
letter-spacing:.08em;
margin:28px 0;
line-height:.95;
}

.show-item{
flex-direction:column;
align-items:flex-start;
}

.show-place{
text-align:left;
}

.show-poster{
margin-top:20px;
}

.footer{
padding:24px 16px;
}

}



/* small phones */

@media (max-width: 480px){

h1{
font-size:58px;
}

.hero-nav a{
font-size:20px;
}

h2{
font-size:40px;
}

.interlude{
font-size:40px;
}

.video-label{
font-size:20px;
}

}