/* ==========================================================================
   DELADRED — The Bio
   Принципы, на которых собрано (и которые нельзя нарушать при правках):

   1. КРАСКА ПЛОСКАЯ. Никаких свечений и размытых теней. Только жёсткие
      смещения — так выглядит плохо совмещённая печать, а не Photoshop.
   2. РАЗНАЯ ПЛОТНОСТЬ. Рядом с кеглем 130px обязан жить кегль 9px.
      Пустой разворот сменяется забитым под завязку — это ритм печати.
   3. НАЛЕЗАЕТ. Логотип на фото, наклейки друг на друга, цифры за край.
      Ничего не сидит в своей аккуратной коробочке.
   4. НИКАКИХ ФЕЙКОВЫХ СТАТУСОВ. Ни «LIVE», ни пульсирующих точек,
      ни счётчиков. На обложках такого не бывает.
   ========================================================================== */

/* ---------- ПЕРЕМЕННЫЕ --------------------------------------------------- */
:root{
  --ink:      #08070a;
  --ink-2:    #0d0b11;
  --red:      #e21205;
  --red-hot:  #ff4a2b;
  --red-deep: #7d0300;
  --bone:     #f0eae0;
  --ash:      #a89d92;
  --ash-dim:  #6f665e;

  /* Anton — только латиница, поэтому кириллица падает на PT Sans Narrow.
     Подмена происходит поглифно, ломаться нечему. */
  --f-display: 'Anton', 'PT Sans Narrow', 'Arial Narrow', sans-serif;
  --f-narrow:  'PT Sans Narrow', 'Arial Narrow', sans-serif;
  --f-body:    'PT Sans', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
  --f-hand:    'Bad Script', 'Segoe Script', cursive;
  --f-script:  'Kaushan Script', 'Bad Script', cursive;

  --gut: clamp(1.1rem, 4vw, 3.6rem);
  --snap: cubic-bezier(.2,.9,.25,1);
}

/* ---------- RESET -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--ash);
  font:400 clamp(1rem,.4vw + .94rem,1.15rem)/1.6 var(--f-body);
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; text-align:left}
ol,ul{margin:0; padding:0; list-style:none}
dl,dd,h1,h2,h3,p{margin:0}
::selection{background:var(--red); color:#000}
:focus-visible{outline:2px solid var(--red-hot); outline-offset:3px}

.wrap{width:min(1340px, 100% - var(--gut)*2); margin-inline:auto}

.skip{
  position:absolute; left:.6rem; top:-4rem; z-index:9999;
  background:var(--red); color:#000; padding:.6rem 1rem;
  font:700 .7rem/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase;
}
.skip:focus{top:.6rem}

/* ---------- ФАКТУРА ------------------------------------------------------ */
.fx-grain,.fx-scan,.fx-vig{position:fixed; inset:-70px; z-index:9000; pointer-events:none}
.fx-grain{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.28; mix-blend-mode:overlay;
  animation:grain 1.1s steps(1) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-9px,6px)}
  40%{transform:translate(7px,-10px)} 60%{transform:translate(-12px,-5px)}
  80%{transform:translate(10px,8px)}
}
.fx-scan{background:repeating-linear-gradient(to bottom,rgba(0,0,0,.2) 0 1px,transparent 1px 4px); opacity:.55}
.fx-vig{background:radial-gradient(135% 100% at 50% 42%, transparent 40%, rgba(0,0,0,.78) 100%)}

/* ---------- ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА + БОКОВАЯ НАВИГАЦИЯ --------------------- */
/* Печатный «уголок», а не панель интерфейса. Плашка нужна: без неё
   переключатель наезжает на правые заголовки при прокрутке. */
.langswitch{
  position:fixed; top:.8rem; right:clamp(.8rem,3vw,1.8rem); z-index:8000;
  display:flex; gap:.35rem; align-items:center;
  background:#050408; padding:.3rem .55rem;
  font:700 .62rem/1 var(--f-mono); letter-spacing:.14em; color:var(--bone);
}
.langswitch__btn{opacity:.4; padding:.2rem}
.langswitch__btn:hover{opacity:.85}
.langswitch__btn.is-active{opacity:1; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px}
.langswitch span{opacity:.3}

/* ==========================================================================
   ЛИЦЕВАЯ СТОРОНА
   ========================================================================== */
.sleeve{position:relative; min-height:100svh; overflow:hidden; isolation:isolate}

/* Фото: настоящий дуотон через blend, а не подкрашивание фильтром.
   Контейнер залит бордовым, картинка отдаёт только светимость. */
.sleeve__photo{
  position:absolute; top:0; bottom:0; right:0; width:min(58%,880px);
  background:var(--red-deep); z-index:1;
  transform:translate3d(0,var(--py,0),0);
}
.sleeve__photo img{
  width:100%; height:100%; object-fit:cover; object-position:56% 30%;
  filter:grayscale(1) contrast(1.6) brightness(.6);
  mix-blend-mode:luminosity;
}
.sleeve__dots{
  position:absolute; inset:0;
  background-image:radial-gradient(circle,#000 .9px,transparent 1.1px);
  background-size:2.8px 2.8px; mix-blend-mode:multiply; opacity:.5;
}
/* Края выжигаются в чёрный наложением, а не маской: работает везде. */
.sleeve__burn{
  position:absolute; inset:-1px;
  background:
    linear-gradient(to right,  var(--ink) 0%, rgba(8,7,10,.92) 14%, rgba(8,7,10,.35) 34%, transparent 56%),
    linear-gradient(to top,    var(--ink) 1%, transparent 34%),
    linear-gradient(to bottom, var(--ink) 0%, transparent 22%),
    linear-gradient(to left,   var(--ink) 0%, transparent 16%),
    radial-gradient(70% 60% at 58% 42%, transparent 28%, rgba(8,7,10,.92) 100%);
}
@media (max-width:900px){
  .sleeve__photo{width:100%; opacity:.42}
  .sleeve__photo img{object-position:60% 26%}
}



.sleeve__body{
  position:relative; z-index:3; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(6rem,13vh,8rem) var(--gut) clamp(7rem,15vh,9rem);
}

/* --- логотип: буквы нарисованы вручную, не шрифт --- */
.wordmark{position:relative; width:100%; max-width:980px; margin:0}
.wordmark__svg{width:100%; height:auto; overflow:visible; display:block}
.wm-key{fill:#000; stroke:#000; stroke-width:15; stroke-linejoin:round; paint-order:stroke}
.wm-fill{fill:url(#wmRed); stroke:#280000; stroke-width:1.8; stroke-linejoin:round}
.wordmark__script{
  position:absolute; right:3%; bottom:-.34em;
  font-family:var(--f-script); font-size:clamp(1.4rem,4.2vw,3.1rem);
  color:var(--bone); transform:rotate(-5deg);
}
.wordmark{opacity:0; transform:translate3d(0,22px,0); animation:drop .8s .1s var(--snap) forwards}
@keyframes drop{to{opacity:1; transform:none}}

.sleeve__strap{
  margin-top:clamp(2.2rem,5vw,3.2rem);
  /* Разрядка чуть меньше прежней: при .34em запятая отрывалась от слова
     и висела сама по себе. */
  font:700 clamp(.6rem,1.4vw,.8rem)/1 var(--f-mono);
  letter-spacing:.26em; color:var(--red);
  opacity:0; animation:up .7s .55s var(--snap) forwards;
}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* наклейка «explicit» — как на настоящих обложках */
.advisory{
  position:absolute; right:6%; bottom:11%; z-index:4;
  width:max-content; background:#000; border:3px solid #fff;
  padding:.42rem .6rem .34rem; transform:rotate(-3.5deg);
  opacity:0; animation:up .5s 1.1s var(--snap) forwards;
}
.advisory b{display:block; font:400 clamp(.95rem,2.1vw,1.45rem)/.94 var(--f-display); color:#fff; letter-spacing:.03em}
.advisory i{
  display:block; margin-top:.32rem; background:#fff; color:#000; text-align:center;
  font:700 .48rem/1.6 var(--f-mono); font-style:normal; letter-spacing:.08em; padding:0 .3rem;
}
@media (max-width:900px){.advisory{right:auto; left:var(--gut); bottom:7.5rem; transform:rotate(-3deg) scale(.9); transform-origin:left bottom}}

/* наклейка «внутри» — как на плёнке настоящих изданий */
.hype{
  position:absolute; left:var(--gut); bottom:4.6rem; z-index:4; width:max-content;
  border:2px solid var(--red); background:rgba(8,7,10,.72);
  padding:.7rem 1rem .75rem; transform:rotate(-1.2deg);
  opacity:0; animation:up .5s .95s var(--snap) forwards;
}
.hype b{display:block; font:700 .56rem/1 var(--f-mono); letter-spacing:.24em; color:var(--red); margin-bottom:.4rem}
.hype ul{display:grid; gap:.14rem}
.hype li{font:700 .72rem/1.45 var(--f-narrow); letter-spacing:.05em; color:var(--bone)}
.hype li::before{content:"· "; color:var(--red)}
.hype em{display:block; margin-top:.5rem; font:700 .52rem/1 var(--f-mono); font-style:normal; letter-spacing:.28em; color:var(--ash-dim)}
@media (max-width:900px){.hype{display:none}}

/* печатная лента между разворотами: обрез по краям растворяется,
   поэтому строка не выглядит оборванной на полуслове */
.strip{
  border-block:1px solid rgba(226,18,5,.35); background:rgba(226,18,5,.045);
  padding:.5rem 0; overflow:hidden;
}
.strip span{
  display:block; white-space:nowrap;
  font:400 .55rem/1 var(--f-mono); letter-spacing:.34em;
  text-transform:uppercase; color:var(--ash-dim);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);
}

.sleeve__cat{
  position:absolute; top:1rem; left:var(--gut); z-index:5;
  font:400 .62rem/1 var(--f-mono); letter-spacing:.18em; color:var(--ash-dim);
}
.sleeve__cat em{font-style:normal; color:var(--red); margin-left:.6rem}
.sleeve__spine{
  position:absolute; left:.75rem; top:50%; transform:translateY(-50%); z-index:5;
  writing-mode:vertical-rl; font:400 .55rem/1 var(--f-mono);
  letter-spacing:.32em; color:var(--ash-dim); opacity:.5;
}
@media (max-width:1000px){.sleeve__spine{display:none}}

.sleeve__fineprint{
  position:absolute; left:var(--gut); right:var(--gut); bottom:1.1rem; z-index:5;
  font:700 .58rem/1.5 var(--f-narrow); letter-spacing:.055em;
  text-transform:uppercase; color:var(--ash-dim); opacity:.75;
}

/* ==========================================================================
   СТЕНА ИМЁН — один блок, кегли вперемешку, набито без просветов
   ========================================================================== */
.bandwall{
  padding:clamp(1rem,2.2vw,1.6rem) var(--gut);
  border-block:2px solid var(--red); background:#0b0910; overflow:hidden;
  /* Выключка по формату: строка растягивается ровно на всю ширину,
     как строка набора. Пробелы тянутся, имена — нет (внутри nbsp). */
  text-align:justify; text-align-last:justify;
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(.72rem,2.05vw,2.6rem); line-height:1.06;
  color:var(--bone); letter-spacing:-.005em;
}
.bandwall span{white-space:nowrap}
.bandwall b{color:var(--red); font-size:.5em; font-weight:400; vertical-align:.22em}
@media (max-width:700px){
  .bandwall{text-align:center; text-align-last:center; font-size:1rem; line-height:1.5}
}

/* ==========================================================================
   ЗАДНИК: ТРЕК-ЛИСТ + ВЫХОДНЫЕ ДАННЫЕ
   ========================================================================== */
.back{padding-block:clamp(2.4rem,6vh,4rem)}
.back__side{
  display:block; font:400 clamp(2rem,5vw,3.4rem)/.85 var(--f-display);
  color:transparent; -webkit-text-stroke:1.5px rgba(226,18,5,.5); letter-spacing:.02em;
}
.back__grid{display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:1fr}
@media (min-width:900px){.back__grid{grid-template-columns:1.7fr .9fr; align-items:start}}

.back__data{display:grid; gap:.9rem; justify-items:start}
.barcode{display:flex; align-items:flex-end; gap:2px; height:54px; background:#fff; padding:6px 8px 4px}
.barcode i{display:block; width:2px; height:100%; background:#000}
.barcode i:nth-child(3n){width:4px}
.barcode i:nth-child(4n){height:80%}
.barcode i:nth-child(5n){width:1px}
.barcode i:nth-child(7n){height:66%}
.barcode__num{
  background:#fff; color:#000; padding:0 8px 5px; margin-top:-9px;
  font:700 .58rem/1 var(--f-mono); letter-spacing:.1em;
}

/* плотный блок мелким кеглем — «нагромождение» по делу */
.cramped{
  font:700 .62rem/1.45 var(--f-narrow); letter-spacing:.055em;
  text-transform:uppercase; color:var(--ash-dim); text-align:justify;
}
.cramped--dim{opacity:.55; font-size:.56rem; text-align:left}
.cramped--wide{columns:2; column-gap:clamp(1.5rem,4vw,3rem); font-size:.64rem; line-height:1.55; text-align:justify}
@media (max-width:600px){.cramped--wide{columns:1}}

/* ---------- СПИСКИ С ОТБИВКОЙ ТОЧКАМИ ----------------------------------- */
.tracks li{border-bottom:1px solid rgba(240,234,224,.1)}
.tracks li > a{display:flex; align-items:baseline; gap:.8rem; padding:.6rem 0; position:relative; isolation:isolate}
.tracks--tight li{display:flex; align-items:baseline; gap:.8rem; padding:.42rem 0}
.tracks i{
  font:400 .6rem/1 var(--f-mono); font-style:normal; letter-spacing:.1em;
  color:var(--red); flex:none; min-width:1.9rem;
}
.tracks b{font:400 clamp(1.05rem,2.3vw,1.55rem)/1.1 var(--f-display); color:var(--bone); letter-spacing:.015em}
.tracks s{
  flex:1 1 auto; min-width:1.2rem; height:0; text-decoration:none;
  border-bottom:1px dotted rgba(240,234,224,.26); transform:translateY(-.3em);
}
.tracks em{font-style:normal; flex:none; font-size:.86rem; color:var(--ash-dim); text-align:right}
.tracks li > a::before{
  content:""; position:absolute; left:-.6rem; right:-.6rem; top:.05rem; bottom:.05rem;
  background:var(--red); z-index:-1; transform:scaleX(0); transform-origin:left;
  transition:transform .16s linear;
}
.tracks li > a:hover::before{transform:scaleX(1)}
.tracks li > a:hover b,.tracks li > a:hover i{color:#000}
.tracks li > a:hover em{color:rgba(0,0,0,.65)}
.tracks--tight li{transition:padding-left .18s var(--snap)}
.tracks--tight li:hover{padding-left:.6rem}
.tracks--tight li:hover b{color:var(--red-hot)}

/* ==========================================================================
   ОБЩЕЕ ДЛЯ СЕКЦИЙ
   Отступы намеренно разные — чтобы не было машинного ритма.
   ========================================================================== */
.sec{position:relative; overflow:hidden; isolation:isolate}
.sec .wrap{position:relative}
.sec--name   {padding-block:clamp(3.5rem,10vh,6.5rem) clamp(2.5rem,6vh,4rem)}
.sec--do     {padding-block:clamp(2.5rem,6vh,4rem)    clamp(3rem,7vh,4.5rem)}
.sec--sound  {padding-block:clamp(4rem,11vh,7.5rem)   clamp(3rem,7vh,4.5rem)}
.sec--rot    {padding-block:clamp(2.5rem,6vh,4rem)    clamp(4rem,10vh,6.5rem)}
.sec--contact{padding-block:clamp(3.5rem,9vh,5.5rem)}

/* Пять одинаковых шапок подряд читаются как размноженный шаблон.
   Поэтому у каждого разворота свой кегль заголовка и своё положение
   колонки: 03 — самый крупный, он и есть главный; 02 прижат вправо,
   05 отступает от левого края. */
.sec--name    .display{font-size:clamp(2.2rem,7.6vw,5.4rem)}
.sec--sound   .display{font-size:clamp(3rem,12vw,9.6rem)}
.sec--contact .display{font-size:clamp(2.2rem,7vw,5rem)}

@media (min-width:1000px){
  .sec--do .wrap{margin-inline:auto var(--gut); width:min(1150px, 100% - var(--gut)*3)}
  .sec--contact .wrap{margin-inline:clamp(0px,9vw,170px) auto}
  .sec--rot .wrap{margin-inline:auto clamp(0px,4vw,70px)}
}

/* ЗАГОЛОВОК: плоская краска со смещением, как непопадание при печати */
.display{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.7rem,10.5vw,8.2rem); line-height:.82;
  text-transform:uppercase; letter-spacing:-.012em; color:var(--red);
  transform:skewX(-9deg); transform-origin:left bottom;
  text-shadow:.042em .034em 0 #000, .082em .068em 0 rgba(125,3,0,.85);
}
.head{position:relative; z-index:2; margin-bottom:clamp(2rem,5vw,3.2rem)}
.head__num{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.35rem .9rem;
  margin-bottom:.9rem;
  font:700 .66rem/1.6 var(--f-mono); letter-spacing:.24em; color:var(--red);
}
.head__num em{
  font-style:normal; font-weight:400; letter-spacing:.17em;
  text-transform:uppercase; color:var(--ash-dim);
}
.head__num em::before{content:"— "; color:var(--red)}
.head__sub{
  font-family:var(--f-hand); font-size:clamp(1.1rem,2.4vw,1.5rem);
  color:var(--red-hot); margin-top:.55rem; transform:rotate(-.8deg); line-height:1.3;
}
.minihead{
  font:700 .6rem/1 var(--f-mono); letter-spacing:.28em; text-transform:uppercase;
  color:var(--red); margin-bottom:1rem;
}
.minihead::before{content:"▚  "}

.body{max-width:60ch; margin-bottom:1.1rem}
.scrawl{
  font-family:var(--f-hand); font-size:clamp(1.15rem,2.6vw,1.6rem);
  color:var(--red-hot); transform:rotate(-1.1deg); max-width:38ch; line-height:1.3;
}
.scrawl--right{margin-left:auto; text-align:right; transform:rotate(1deg); margin-top:.9rem}

/* ==========================================================================
   01 · СЛОВАРНАЯ СТАТЬЯ
   ========================================================================== */
.entry{position:relative; z-index:2; max-width:70rem}
.entry__word{
  font:400 clamp(2.4rem,7.5vw,5.2rem)/1 var(--f-display);
  color:var(--bone); letter-spacing:.015em;
}
.entry__gram{
  font:400 .68rem/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ash-dim); margin-top:.55rem;
}
.readings{
  margin-top:clamp(1.6rem,3.5vw,2.4rem);
  border-top:2px solid var(--red); padding-top:1.3rem;
  display:grid; gap:1.25rem; max-width:66rem;
}
.reading{display:grid; grid-template-columns:minmax(0,16rem) minmax(0,1fr); gap:.35rem 2.2rem; align-items:baseline}
@media (max-width:760px){.reading{grid-template-columns:1fr}}
.reading dt{font:700 1.02rem/1.25 var(--f-narrow); text-transform:uppercase; letter-spacing:.05em; color:var(--bone)}
.reading dt b{font-family:var(--f-mono); font-size:.82em; color:var(--red); margin-right:.5rem}
.reading dt em{font:400 .58em/1 var(--f-mono); font-style:normal; letter-spacing:.12em; color:var(--ash-dim); text-transform:lowercase}
.reading dd{max-width:56ch}
.blankline{display:inline-block; width:8.5rem; border-bottom:1px dashed rgba(240,234,224,.45); vertical-align:.12em}
.entry .scrawl{margin-top:1.6rem}

/* ==========================================================================
   02 · ЧЕМ ЗАНИМАЮСЬ
   ========================================================================== */
.do__grid{display:grid; gap:clamp(1.8rem,4vw,3.4rem); grid-template-columns:1fr}
@media (min-width:880px){.do__grid{grid-template-columns:1.1fr .95fr; align-items:start}}

.spec{border-top:2px solid var(--red); padding-top:.6rem}
.spec > div{display:flex; align-items:baseline; gap:.65rem; padding:.34rem 0; border-bottom:1px solid rgba(240,234,224,.07)}
.spec dt{
  font:400 .64rem/1.4 var(--f-mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ash-dim); flex:none;
}
.spec s{flex:1 1 auto; min-width:1rem; height:0; text-decoration:none; border-bottom:1px dotted rgba(240,234,224,.22); transform:translateY(-.25em)}
.spec dd{font:700 1rem/1.3 var(--f-narrow); color:var(--bone); text-align:right; flex:none; max-width:60%}
.spec--wry dd{font:400 1.3rem/1.15 var(--f-hand); color:var(--red-hot)}

/* каталог: строки релизов вместо карточек-плашек */
.rels{margin-top:clamp(2rem,5vw,3.2rem); max-width:1080px}
.rels .minihead{margin-bottom:.6rem}
.rel{
  padding:1.1rem 0; border-top:2px solid var(--red);
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.8rem 1.6rem; align-items:start;
}
.rel + .rel{border-top-width:1px; border-top-color:rgba(226,18,5,.4)}
@media (max-width:700px){.rel{grid-template-columns:1fr}}
.rel__cat{font:400 .66rem/1 var(--f-mono); letter-spacing:.12em; color:var(--red); padding-top:.7rem}
.rel__name{font:400 clamp(1.55rem,4.4vw,2.8rem)/1 var(--f-display); color:var(--bone); word-break:break-word}
.rel__desc{margin:.55rem 0 .8rem; max-width:46ch}
.rel__links a{
  font:400 .68rem/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--red); border-bottom:1px solid currentColor; margin-right:1.3rem; padding-bottom:2px;
}
.rel__links a:hover{color:var(--bone)}
.rel__fmt{font:400 .58rem/1 var(--f-mono); letter-spacing:.18em; color:var(--ash-dim); padding-top:.85rem; white-space:nowrap}

/* ==========================================================================
   03 · ЗВУК
   ========================================================================== */
.sound__top{position:relative; z-index:2}
.genres{font:700 clamp(.58rem,1.4vw,.74rem)/1 var(--f-mono); letter-spacing:.3em; color:var(--red); margin-top:1.6rem}

/* Список имён и живой кадр стоят в одном ряду: снимок закрывает правую
   половину разворота, которая иначе остаётся чёрным полем. */
.sound__band{
  display:grid; grid-template-columns:1fr;
  gap:clamp(1.6rem,3vw,2.6rem);
  margin-top:clamp(2.6rem,7vw,4.5rem);
}
@media (min-width:980px){
  .sound__band{
    grid-template-columns:minmax(0,1fr) minmax(0,clamp(250px,28vw,420px));
    align-items:end;
  }
}
.sound__names{min-width:0}

/* Та же обработка, что и на обложке: дуотон через светимость,
   растр поверх, края уводятся в фон наложением. */
.livepic{
  position:relative; margin:0; overflow:hidden; isolation:isolate;
  background:var(--red-deep); height:clamp(330px,38vw,540px);
}
.livepic img{
  width:100%; height:100%; object-fit:cover; object-position:52% 24%;
  filter:grayscale(1) contrast(1.32) brightness(.95);
  mix-blend-mode:luminosity;
}
.livepic__dots{
  position:absolute; inset:0;
  background-image:radial-gradient(circle,#000 .9px,transparent 1.1px);
  background-size:2.8px 2.8px; mix-blend-mode:multiply; opacity:.34;
}
.livepic__burn{
  position:absolute; inset:-1px;
  background:
    linear-gradient(to left,   var(--ink) 0%, transparent 17%),
    linear-gradient(to right,  var(--ink) 0%, transparent 17%),
    linear-gradient(to top,    var(--ink) 0%, transparent 15%),
    linear-gradient(to bottom, var(--ink) 0%, transparent 13%),
    radial-gradient(76% 70% at 50% 42%, transparent 46%, rgba(8,7,10,.78) 100%);
}
.livepic__cap{
  position:absolute; left:0; right:0; bottom:.5rem; z-index:2; text-align:center;
  font:700 .55rem/1.4 var(--f-mono); letter-spacing:.2em;
  text-transform:uppercase; color:var(--ash-dim);
}

.pantheon{position:relative; z-index:2}
.pantheon li{
  font:400 clamp(1.6rem,6.4vw,4.4rem)/.96 var(--f-display);
  text-transform:uppercase; color:var(--bone); letter-spacing:-.012em;
  transform:skewX(-7deg); transform-origin:left;
  transition:color .18s linear, text-shadow .18s linear;
}
.pantheon li:hover{color:var(--red); text-shadow:.04em .03em 0 #000}
.pantheon li em{
  font:400 .2em/1 var(--f-mono); font-style:normal; letter-spacing:.2em;
  color:var(--ash-dim); vertical-align:.85em; margin-left:.55em; text-transform:lowercase;
}

.sound__spread{position:relative; z-index:2; margin-top:clamp(2.6rem,7vw,4.4rem)}
/* Ширина в rem, а не в ch: ch считался бы по кеглю родителя (16px),
   и врезка схлопывалась в узкий столбик. */
.quote{margin:0 0 clamp(2rem,5vw,3.4rem); padding-left:clamp(.9rem,2.5vw,2rem); border-left:5px solid var(--red); max-width:min(100%,44rem)}
/* Узкая гарнитура, а не Anton: в ней есть кириллица, поэтому цитата
   выглядит одинаково и в русской, и в английской версии. */
.quote p{font:700 clamp(1.25rem,3.2vw,2.2rem)/1.22 var(--f-narrow); letter-spacing:.004em}
.quote .w{color:var(--bone); opacity:calc(.13 + .87 * var(--l,1)); transition:opacity .1s linear}

.sound__cols{display:grid; gap:clamp(1.4rem,3.5vw,2.8rem); grid-template-columns:1fr}
@media (min-width:880px){.sound__cols{grid-template-columns:1fr 1fr}}

.stamp{
  position:absolute; right:1%; bottom:-1.5rem; z-index:3;
  display:grid; justify-items:center; gap:.15rem; padding:.45rem 1rem .5rem;
  border:3px solid rgba(226,18,5,.6); color:rgba(226,18,5,.72);
  transform:rotate(-13deg); pointer-events:none;
}
.stamp b{font:400 clamp(1.3rem,3vw,2rem)/1 var(--f-display); letter-spacing:.09em}
.stamp i{font:700 .52rem/1 var(--f-mono); font-style:normal; letter-spacing:.22em}
@media (max-width:880px){.stamp{position:static; margin:2rem 0 0 auto; width:max-content; transform:rotate(-8deg)}}

.spin{margin-top:clamp(3rem,8vw,5rem); position:relative; z-index:2}

/* ==========================================================================
   04 · НАКЛЕЙКИ ВНАХЛЁСТ
   ========================================================================== */
.wall{
  position:relative; z-index:2; display:grid; align-items:start; grid-template-columns:1fr;
  gap:clamp(1.4rem,3vw,2.2rem); margin-top:clamp(1.2rem,3vw,2rem);
}
@media (min-width:1080px){.wall{grid-template-columns:1fr 1fr}}

/* ---------- БИЛЕТ --------------------------------------------------------
   Форма настоящего концертного билета: красная полоса-шапка, боксы полей
   с микроподписями, перфорация с высечками и вертикальный штрихкод на
   корешке. Единственная светлая поверхность на всём сайте — поэтому
   читается как физический предмет, приколотый к чёрному листу.          */
.ticket{
  --rot:0deg;
  position:relative; isolation:isolate;
  display:grid; grid-template-columns:minmax(0,1fr) 58px;
  background:#e7e1d3; color:#12100e;
  transform:rotate(var(--rot));
  box-shadow:0 14px 28px rgba(0,0,0,.55);
  font-family:var(--f-mono);
}
.ticket::after{ /* состаренная бумага */
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply; opacity:.16;
}
.ticket--a{--rot:-.6deg}
.ticket--b{--rot:.5deg}
.ticket--c{--rot:.45deg}
.ticket--d{--rot:-.5deg}

.ticket__body{min-width:0}
.ticket__band{
  display:flex; flex-wrap:wrap; gap:0 .9rem; align-items:center;
  background:#e0472a; color:#120a06; padding:.45rem .95rem;
  font:700 .66rem/1.7 var(--f-mono); letter-spacing:.11em; text-transform:uppercase;
  border-bottom:1px solid rgba(0,0,0,.5);
}
.ticket__in{display:grid; grid-template-columns:auto minmax(0,1fr)}
.ticket__fields{display:grid; align-content:start; border-right:1px solid rgba(0,0,0,.42)}
.ticket__fields > div{padding:.5rem .9rem; border-bottom:1px solid rgba(0,0,0,.24); min-width:8.8rem}
.ticket__fields > div:last-child{border-bottom:0}
.ticket__fields dt{font:400 .64rem/1.5 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:#3a3530}
.ticket__fields dd{margin:0; font:700 1.02rem/1.25 var(--f-narrow); text-transform:uppercase; color:#12100e}
.ticket__main{padding:1rem 1.2rem 1.2rem}
.ticket__pre{font:400 .6rem/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color:#3a3530}
.ticket__name{
  font:400 clamp(1.6rem,3.4vw,2.45rem)/1.04 var(--f-display);
  text-transform:uppercase; margin:.45rem 0 .62rem; letter-spacing:.01em;
}
.ticket__text{font:400 1rem/1.5 var(--f-body); color:#241f1a}

/* корешок с перфорацией */
.ticket__stub{
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:.6rem; padding:.75rem 0; border-left:2px dashed rgba(0,0,0,.45);
}
.ticket__stub::before,.ticket__stub::after{
  content:""; position:absolute; left:-9px; width:16px; height:16px;
  border-radius:50%; background:var(--ink);
}
.ticket__stub::before{top:-8px}
.ticket__stub::after{bottom:-8px}
/* Штрихкод рисуем градиентом: тянется на любую высоту и не тащит
   за собой сотню пустых элементов. */
.ticket__bars{
  flex:1 1 auto; min-height:70px; width:30px;
  background:repeating-linear-gradient(to bottom,
    #12100e 0 1px, transparent 1px 3px,
    #12100e 3px 5px, transparent 5px 6px,
    #12100e 6px 7px, transparent 7px 10px,
    #12100e 10px 12px, transparent 12px 13px);
}
.ticket__vert{writing-mode:vertical-rl; font:700 .58rem/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color:#3a3530}

@media (max-width:560px){
  .ticket__in{grid-template-columns:1fr}
  .ticket__fields{display:flex; flex-wrap:wrap; border-right:0; border-bottom:1px solid rgba(0,0,0,.3)}
  .ticket__fields > div{border-bottom:0; border-right:1px solid rgba(0,0,0,.24); flex:1 1 auto}
}

/* ==========================================================================
   05 · КОНТАКТЫ
   ========================================================================== */
.contacts{position:relative; z-index:2; max-width:760px}
.contacts li{border-bottom:1px solid rgba(240,234,224,.1)}
.contacts a,.contacts button{
  display:flex; align-items:baseline; gap:.9rem; width:100%;
  padding:.7rem 0; position:relative; isolation:isolate;
}
.contacts i{font:400 .58rem/1 var(--f-mono); font-style:normal; letter-spacing:.18em; text-transform:uppercase; color:var(--red); flex:none; min-width:5rem}
.contacts b{font:700 clamp(1.05rem,2.4vw,1.6rem)/1.1 var(--f-narrow); color:var(--bone); letter-spacing:.01em}
.contacts s{flex:1 1 auto; min-width:1.2rem; height:0; text-decoration:none; border-bottom:1px dotted rgba(240,234,224,.26); transform:translateY(-.32em)}
.contacts u{text-decoration:none; font:400 .58rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ash-dim); flex:none}
.contacts a::before,.contacts button::before{
  content:""; position:absolute; left:-.6rem; right:-.6rem; top:.05rem; bottom:.05rem;
  background:var(--red); z-index:-1; transform:scaleX(0); transform-origin:left;
  transition:transform .16s linear;
}
.contacts a:hover::before,.contacts button:hover::before{transform:scaleX(1)}
.contacts a:hover b,.contacts button:hover b,
.contacts a:hover i,.contacts button:hover i{color:#000}
.contacts a:hover u,.contacts button:hover u{color:rgba(0,0,0,.7)}
.copy.is-copied u::after{content:" · " attr(data-flash); color:var(--red-hot)}
.copy.is-copied:hover u::after{color:#000}

/* ==========================================================================
   RUNOUT
   ========================================================================== */
.runout{border-top:2px solid var(--red); padding-block:clamp(2.6rem,7vw,4.5rem); background:#0a080e}
.runout__end{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-top:clamp(2rem,5vw,3rem)}
.signature{font-family:var(--f-hand); font-size:clamp(2rem,6vw,3.4rem); color:var(--bone); transform:rotate(-3deg); transform-origin:left}
.matrix{font:400 .56rem/1.6 var(--f-mono); letter-spacing:.14em; color:var(--ash-dim); text-align:right}

/* ==========================================================================
   ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ — коротко и резко, без «премиальных» плавностей
   ========================================================================== */
.reveal{
  opacity:0; transform:translate3d(0,16px,0);
  transition:opacity .3s linear, transform .36s var(--snap);
  transition-delay:calc(var(--i,0) * 55ms);
}
.reveal.is-in{opacity:1; transform:none}
.ticket.reveal{transform:translate3d(0,26px,0) rotate(0deg)}
.ticket.reveal.is-in{transform:rotate(var(--rot))}

/* заголовок «печатается» слева направо */
.wipe{clip-path:inset(0 100% 0 -8%); transition:clip-path .55s var(--snap)}
.wipe.is-in{clip-path:inset(0 -14% 0 -8%)}

/* ==========================================================================
   ДОСТУПНОСТЬ / МОБИЛКА
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal{opacity:1; transform:none}
  .ticket.reveal{transform:rotate(var(--rot))}
  .wipe{clip-path:none}
  .wordmark,.sleeve__strap,.advisory{opacity:1; animation:none}
  .quote .w{opacity:1}
  .fx-grain{animation:none}
}
@media (pointer:coarse){
  .fx-grain{animation:none; opacity:.2}
}