:root{
  --fg:#f2f2f2;
  --muted:#b5b5b5;
  --line:rgba(255,255,255,.15);
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--fg);
}

/* BACKGROUND (desktop) */
body{
  background-image:url("assets/press-photo.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}

/* GRADIENT OVERLAY (desktop) */
.content{
  width:100%;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 60vh,
    rgba(0,0,0,.9) 110vh
  );
  padding-bottom:140px;
}

/* INTRO */
.intro{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  text-align:center;
  padding:0 24px 80px;
}

.intro h1{
  font-size:56px;
  letter-spacing:.12em;
  margin:0 0 28px;
}

/* LINKS */
a{ color:var(--fg); text-decoration:none; }
a:hover{ opacity:.85; }

/* SOCIALS */
.socials{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  justify-content:center;
  margin:0 0 32px;
}
.socials a{ color:var(--muted); }

/* BUTTONS */
.cta{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
}
.btn{
  padding:12px 20px;
  border:1px solid var(--fg);
  border-radius:999px;
}
.btn.ghost{ border-color:var(--line); }

/* SECTIONS */
.section{
  max-width:900px;
  margin:0 auto 84px;
  padding:0 24px;
}

/* HEADINGS */
.section h2{
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:20px;
  color:var(--muted);
  margin:0 0 24px;
}

/* Embedded frames (Spotify) */
.section iframe{
  border-radius:12px;
}

/* MAIN VIDEO */
.video-main{
  width:100%;
  aspect-ratio:16/9;
  margin:0 0 18px;
  border-radius:18px;
  background:#000;
}

/* VIDEO THUMBS */
.video-thumbs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.thumb{
  position:relative;
  display:block;
  border-radius:14px;
  overflow:hidden;
}

.thumb img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  transition:transform .25s ease;
}

.thumb:hover img{
  transform:scale(1.05);
}

/* play icon: triangle only (appears on hover) */
.thumb::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.16);
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
}

.thumb::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:0;
  height:0;
  border-left:22px solid rgba(255,255,255,.75);
  border-top:14px solid transparent;
  border-bottom:14px solid transparent;
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
}

.thumb:hover::before{ opacity:1; }
.thumb:hover::after{ opacity:1; }

/* RELEASES */
.releases{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:110px; /* bigger gap so long title fits */
}

.release{
  width:210px; /* 1.5x */
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.release img{
  width:100%;
  border-radius:14px;
  display:block;
  transition:transform .25s ease;
}

.release:hover img{
  transform:translateY(-6px) scale(1.03);
}

.release-title{
  margin-top:12px;
  font-size:15px;
  line-height:1.3;
  white-space:nowrap; /* keep on one line */
}

.release-label{
  margin-top:6px;
  font-size:13px;
  font-style:italic;
  color:var(--muted);
}

/* PRESS */
.press-list{
  max-width:720px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:28px;
  text-align:center;
}

.press-title{
  font-size:16px;
  line-height:1.45;
  font-style:italic;
}

.press-source{
  font-size:12px;
  letter-spacing:.14em;
  color:var(--muted);
  display:block;
  text-align:right; /* source sits closer to the right edge */
  margin-top:8px;
}

/* RESPONSIVE (tablet/phone layout) */
@media (max-width:900px){
  .intro h1{ font-size:40px; }
  .video-thumbs{ grid-template-columns:repeat(2,1fr); }
}

/* MOBILE HERO (iOS-friendly): use dedicated crop + earlier gradient */
@media (max-width:700px){
  body{
    background-image:url("assets/press-photo-mobile.jpg");
    background-attachment:scroll;
    background-position:top center;
  }

  .content{
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0) 45vh,
      rgba(0,0,0,.9) 90vh
    );
  }
}
@media (max-width:700px){
  body{
    background-image:url("assets/press-photo-mobile.jpg");
    background-size: contain;         /* <-- чтобы НЕ зумило */
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-color:#000;
  }

  /* вместо full-screen интро — нормальная высота под контент,
     чтобы не было огромной пустоты */
  .intro{
    min-height: unset;
    padding-top: 44vh;               /* под картинку */
    padding-bottom: 56px;
  }

  /* градиент начинается раньше */
  .content{
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0) 30vh,
      rgba(0,0,0,.9) 75vh
    );
  }
}
@media (max-width:700px){
  .releases{
    gap:48px;   /* или 40px, если хочется плотнее */
  }
}
/* MOBILE: add space before PRESS column */
@media (max-width: 700px){
  .two-col{
    flex-direction: column;
  }

  .two-col .press{
    margin-top: 72px;
  }
}
/* === FINAL BUTTON STYLE === */
.btn{
  padding:12px 20px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:999px;
  background:transparent;
}