:root{
  --red:#ff1010;
  --black:#050505;
  --panel:#101010;
  --line:rgba(255,255,255,.12);
  --white:#f5f5f3;
  --muted:#9a9a9a;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--black);color:var(--white)}
body{font-family:Inter,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.page{
  min-height:100vh;
  width:min(100%,1440px);
  margin:auto;
  padding:24px 42px 18px;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(circle at 78% 50%,rgba(255,16,16,.08),transparent 34%),
    var(--black);
}
.topbar{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
}
.brand img{width:112px;height:auto;display:block}
.top-links{display:flex;gap:26px}
.top-links a{
  color:#888;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.14em;
  transition:.2s;
}
.top-links a:hover{color:var(--red)}

.main-grid{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  align-items:center;
  gap:70px;
  padding:30px 4vw;
}
.intro{max-width:650px}
.eyebrow{
  margin:0 0 18px;
  color:#888;
  font-size:10px;
  font-weight:800;
  letter-spacing:.2em;
}
.eyebrow i{
  display:inline-block;
  width:25px;height:2px;
  background:var(--red);
  vertical-align:middle;
  margin-right:9px;
}
h1{
  margin:0;
  font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(65px,8vw,118px);
  line-height:.8;
  letter-spacing:-.055em;
  font-weight:700;
}
h1 span{color:var(--red)}
.tagline{
  margin:25px 0 34px;
  color:#aaa;
  font-size:15px;
  letter-spacing:.03em;
}
.company{
  display:flex;
  gap:55px;
  border-top:1px solid var(--line);
  padding-top:22px;
  margin-bottom:30px;
}
.company div{display:flex;flex-direction:column;gap:6px}
.company small{
  color:#666;
  font-size:8px;
  font-weight:800;
  letter-spacing:.16em;
  margin-bottom:3px;
}
.company strong,.company a{font-size:12px;color:#c7c7c7}
.company a:hover{color:var(--red)}
.actions{display:flex;align-items:center;gap:24px}
.button{
  background:var(--red);
  color:white;
  padding:13px 17px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:.2s;
}
.button b{margin-left:15px;font-size:15px}
.button:hover{background:white;color:black}
.website{
  color:#777;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
}
.website:hover{color:white}

.music-card{
  background:rgba(16,16,16,.94);
  border:1px solid var(--line);
  padding:18px;
  width:min(100%,470px);
  justify-self:end;
  box-shadow:0 25px 70px rgba(0,0,0,.45);
}
.card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:4px 4px 14px;
}
.card-head small{
  display:block;
  color:#777;
  font-size:8px;
  font-weight:800;
  letter-spacing:.16em;
  margin-bottom:5px;
}
.card-head h2{margin:0;font-size:18px;letter-spacing:-.02em}
.spotify-dot{color:#1ed760;font-size:14px}
.music-card iframe{
  display:block;
  border:0;
  border-radius:10px;
  height:360px;
}
.spotify-link{
  display:block;
  padding:14px 4px 2px;
  color:#999;
  font-size:9px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.spotify-link span{color:var(--red);margin-left:8px}
.spotify-link:hover{color:white}

footer{
  border-top:1px solid var(--line);
  padding-top:15px;
  display:flex;
  justify-content:space-between;
  color:#555;
  font-size:9px;
  letter-spacing:.02em;
}
footer strong{color:#777}

@media(max-height:780px) and (min-width:801px){
  .page{padding-top:16px}
  .topbar{height:54px}
  .main-grid{padding-top:15px;padding-bottom:15px}
  .music-card{padding:14px}
  .music-card iframe{height:310px}
  .company{margin-bottom:20px}
}
@media(max-width:900px){
  .page{padding:18px 22px}
  .main-grid{grid-template-columns:1fr;gap:45px;padding:55px 0}
  .intro{max-width:none}
  .music-card{justify-self:start;width:min(100%,520px)}
}
@media(max-width:560px){
  .page{padding:14px 16px}
  .topbar{height:55px}
  .brand img{width:88px}
  .top-links{gap:12px}
  .top-links a{font-size:8px}
  .main-grid{padding:38px 0 30px;gap:35px}
  h1{font-size:59px}
  .company{gap:25px;flex-wrap:wrap}
  .actions{gap:15px}
  .music-card{padding:12px}
  .music-card iframe{height:350px}
  footer{flex-direction:column;gap:5px;font-size:8px}
}