*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:#e9e7e1;color:#111}
body{
  font-family:Arial,Helvetica,sans-serif;
  background-image:radial-gradient(#00000015 .65px,transparent .8px);
  background-size:7px 7px
}
img{display:block;max-width:100%}
.page{width:min(1450px,100%);margin:auto;padding:clamp(7px,1.4vw,20px)}
.hero{overflow:hidden;background:#111;box-shadow:0 8px 24px #0002}
.hero img{width:100%;height:auto}

.platforms{padding:clamp(25px,4vw,55px) clamp(4px,2vw,24px)}
.platform-title{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(10px,2vw,25px);margin-bottom:clamp(14px,2vw,26px)
}
.platform-title span{height:1px;background:#777}
.platform-title h1{
  margin:0;
  font:italic 700 clamp(30px,4vw,56px)/1 Georgia,serif;
  transform:rotate(-2deg)
}
.platform-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(2,auto);
  border-top:1px solid #c8c5bd;
  border-left:1px solid #c8c5bd;
  background:#efede7
}
.platform-grid a{
  display:block;overflow:hidden;background:#efede7;
  border-right:1px solid #c8c5bd;border-bottom:1px solid #c8c5bd;
  transition:transform .16s ease,box-shadow .16s ease
}
.platform-grid a:hover{transform:translateY(-3px);box-shadow:0 9px 18px #0002;z-index:2}
.platform-grid img{width:100%;aspect-ratio:1.7/1;object-fit:cover}

.album-section{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);
  align-items:center;gap:clamp(25px,6vw,90px);
  padding:clamp(20px,4vw,55px) clamp(12px,5vw,70px) clamp(55px,7vw,95px)
}
.album-art img{
  width:100%;max-height:650px;object-fit:contain;
  filter:drop-shadow(0 18px 22px #0002)
}
.album-copy{position:relative;padding:20px}
.handwriting{
  font:italic 700 clamp(48px,6vw,92px)/.86 Georgia,serif;
  transform:rotate(-5deg);
  letter-spacing:-.05em
}
.red-lines{margin:18px 0 28px 12%;width:65%;height:28px;position:relative}
.red-lines i{
  display:block;position:absolute;width:100%;height:4px;background:#e3262e;
  transform:rotate(-12deg);left:0
}
.red-lines i+ i{top:12px;left:12%;width:75%}
.album-copy p{font-size:clamp(11px,1.2vw,16px);font-weight:700;line-height:1.7;letter-spacing:.24em}
footer{
  background:#111;color:#ddd;text-align:center;padding:28px 15px;
  font-size:10px;letter-spacing:.3em
}

/* Планшет */
@media(max-width:850px){
  .platform-grid img{aspect-ratio:1.5/1}
  .album-section{grid-template-columns:55% 45%;gap:10px;padding-left:10px;padding-right:10px}
  .handwriting{font-size:clamp(38px,8vw,68px)}
}

/* Телефон: сохраняем именно 2 горизонтальных ряда по 4 площадки */
@media(max-width:600px){
  .page{padding:5px}
  .platforms{padding:24px 0 32px}
  .platform-title{padding:0 8px;margin-bottom:12px}
  .platform-title h1{font-size:30px}

  .platform-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:repeat(2,auto);
    width:100%;
  }
  .platform-grid a{
    min-width:0;
    aspect-ratio:1.42/1;
  }
  .platform-grid img{
    width:100%;
    height:100%;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:center;
  }

  .album-section{
    grid-template-columns:58% 42%;
    gap:0;
    padding:15px 0 42px
  }
  .album-art img{width:100%}
  .album-copy{padding:5px 8px 5px 2px}
  .handwriting{
    font-size:clamp(29px,9vw,48px);
    line-height:.9;
    letter-spacing:-.06em
  }
  .red-lines{margin:12px 0 14px 5%;width:85%;height:20px}
  .red-lines i{height:3px}
  .album-copy p{font-size:8px;line-height:1.55;letter-spacing:.12em}
  footer{padding:22px 8px;font-size:8px}
}

@media(max-width:420px){
  .platform-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-template-rows:repeat(2,auto) !important;
  }
  .platform-grid a{
    aspect-ratio:1.32/1;
  }
  .platform-grid img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
}

/* HQ platform icons */
.platform-grid img{
  object-fit:contain !important;
  object-position:center !important;
  background:#efede7;
}


/* ===== FINAL VERSION ===== */
.platform-banner{
  width:min(760px,88%);
  margin:0 auto clamp(18px,2.4vw,34px);
}
.platform-banner img{
  width:100%;
  height:auto;
  display:block;
  mix-blend-mode:multiply;
}
.album-section{
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
}
.album-copy-image{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}
.album-copy-image img{
  width:100%;
  max-width:680px;
  height:auto;
  object-fit:contain;
  mix-blend-mode:multiply;
}
.final-footer{
  position:relative;
  overflow:hidden;
  background:#111;
  color:#eee;
  padding:0 18px 28px;
  text-align:center;
}
.footer-brush{
  width:min(720px,92%);
  margin:-1px auto 18px;
  padding:20px 25px 17px;
  background:#111;
  position:relative;
}
.footer-brush:before,.footer-brush:after{
  content:"";
  position:absolute;
  left:-6%; right:-6%;
  height:10px;
  background:#111;
  transform:rotate(-1deg);
}
.footer-brush:before{top:-5px}
.footer-brush:after{bottom:-5px;transform:rotate(1deg)}
.footer-thanks{
  font:italic 700 clamp(27px,4vw,50px)/1.05 Georgia,serif;
  letter-spacing:.01em;
}
.footer-line{
  width:45%;
  height:2px;
  margin:11px auto 0;
  background:#eee;
  transform:rotate(-2deg);
}
.footer-brand{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  font-size:11px;
  letter-spacing:.28em;
}
.wave{opacity:.55;letter-spacing:0;font-size:15px}

@media(max-width:600px){
  .platform-banner{width:96%;margin-bottom:12px}
  .album-section{
    grid-template-columns:56% 44%;
    align-items:center;
    padding-top:14px;
    padding-bottom:35px;
  }
  .album-copy-image{padding-left:3px}
  .album-copy-image img{width:100%}
  .final-footer{padding:0 8px 22px}
  .footer-brush{width:100%;padding:14px 8px 12px;margin-bottom:15px}
  .footer-thanks{font-size:clamp(22px,7vw,34px)}
  .footer-brand{gap:8px;font-size:8px}
  .wave{font-size:9px}
}


/* ===== FINAL VISUAL REPLACEMENT ===== */
.final-visual{
  width:100%;
  margin:clamp(12px,2vw,28px) 0 0;
  overflow:hidden;
  background:#e9e7e1;
}
.final-visual img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
@media(max-width:600px){
  .final-visual{margin-top:8px}
}


/* ===== TEXT PLATFORM HEADING ===== */
.platform-banner{display:none}
.platform-heading{
  width:min(820px,92%);
  margin:0 auto clamp(18px,2.4vw,34px);
  text-align:center;
  position:relative;
  padding:4px 10px 12px;
}
.platform-heading-text{
  display:inline-block;
  color:#111;
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;
  font-size:clamp(34px,4.8vw,68px);
  font-weight:700;
  font-style:italic;
  line-height:1.05;
  letter-spacing:-.045em;
  transform:rotate(-2deg);
  text-shadow:.3px .3px 0 #111;
}
.platform-heading-strokes{
  width:52%;
  max-width:430px;
  height:20px;
  margin:3px auto 0;
  position:relative;
  transform:rotate(-3deg);
}
.platform-heading-strokes i{
  position:absolute;
  left:0;
  top:5px;
  width:100%;
  height:3px;
  background:#111;
  border-radius:60% 40% 55% 45%;
  transform:skewX(-18deg);
}
.platform-heading-strokes i+ i{
  left:11%;
  top:12px;
  width:78%;
  height:2px;
  opacity:.85;
  transform:skewX(22deg);
}
@media(max-width:600px){
  .platform-heading{width:100%;margin-bottom:12px;padding-bottom:7px}
  .platform-heading-text{font-size:clamp(28px,9vw,42px);letter-spacing:-.055em}
  .platform-heading-strokes{width:58%;height:14px}
  .platform-heading-strokes i{height:2px;top:3px}
  .platform-heading-strokes i+i{top:8px}
}

/* ===== COMPACT SPACING UPDATE ===== */
.platforms{
  padding-top:clamp(16px,2.2vw,30px);
  padding-bottom:clamp(16px,2.2vw,30px);
}
.platform-heading{
  margin-bottom:clamp(10px,1.4vw,18px);
  padding-top:0;
  padding-bottom:5px;
}
.final-visual{
  margin-top:0;
}
@media(max-width:600px){
  .platforms{
    padding-top:14px;
    padding-bottom:18px;
  }
  .platform-heading{
    margin-bottom:9px;
    padding-bottom:3px;
  }
  .platform-heading-strokes{
    margin-top:0;
  }
  .final-visual{
    margin-top:0;
  }
}