:root{
  --ink:      #08070a;
  --ink-2:    #0d0b11;
  --red:      #e21205;
  --red-hot:  #ff4a2b;
  --red-deep: #7d0300;
  --bone:     #f0eae0;
  --ash:      #a89d92;
  --ash-dim:  #8a8076;
  --blood:    #1a0605;
  --blood-fog: rgba(26,6,5,.85);


  --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;

  --label:       700 .75rem/1.4 var(--f-mono);
  --label-track: .12em;

  --gut: clamp(1.1rem, 4vw, 3.6rem);
  --sec-pad: clamp(4rem, 11vh, 7rem);
  --block-gap: clamp(2.5rem, 6vw, 4rem);
  --snap: cubic-bezier(.2,.9,.25,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:#bdb2a6;
  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-hot); color:#000; padding:.6rem 1rem;
  font:var(--label); letter-spacing:var(--label-track); text-transform:uppercase;
}
.skip:focus{top:.6rem}

.fx-grain,.fx-scan,.fx-vig{position:fixed; inset:0; z-index:9000; pointer-events:none}
.fx-grain{overflow:hidden; opacity:.07}
html.sq body > .fx-grain{opacity:.16}
html.od body > .fx-grain{opacity:.14}
.fx-grain::before{
  content:""; position:absolute; inset:-70px;
  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");
  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:0; transition:opacity .2s}
.fx-vig{background:radial-gradient(135% 100% at 50% 42%, transparent 45%, rgba(0,0,0,.6) 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:0 .3rem;
  font:var(--label); letter-spacing:var(--label-track); color:var(--bone);
}
@media (max-width:700px){.langswitch{position:absolute}}
.langswitch__btn{opacity:.55; padding:.45rem .4rem}
.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}

.sleeve__photo{
  position:absolute; top:0; bottom:0; right:0; width:min(58%,880px);
  background:#1c0000 url(../img/dime-red.jpg) 56% 30%/cover no-repeat; z-index:1;
  transform:translate3d(0,var(--py,0),0);
}
html.gr .sleeve__photo{background-image:url(../img/dime-green.jpg)}
.sleeve__photo img{
  width:100%; height:100%; object-fit:cover; object-position:56% 30%; opacity:0;
}
.sleeve__photo img.tc{opacity:1}
.sleeve__dots{display:none}

.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{background-position:60% 26%}
  .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{animation:press .62s .15s steps(8,end) both}
@keyframes press{
  0%{clip-path:inset(-40% 100% -60% -10%)}
  55%{clip-path:inset(-40% -10% -60% -10%); translate:0 0}
  66%{translate:-7px 4px}
  77%{translate:6px -3px}
  88%{translate:-2px 1px}
  100%{clip-path:inset(-40% -10% -60% -10%); translate:0 0}
}
.wordmark__script{animation:slap .26s .78s cubic-bezier(.6,0,.9,.3) both}
@keyframes slap{0%{opacity:0; scale:2.6}100%{opacity:1; scale:1}}
.sleeve__photo{animation:jolt .3s .6s steps(4,end) both}
@keyframes jolt{0%{translate:0 0}25%{translate:-10px 5px}50%{translate:8px -4px}75%{translate:-4px 2px}100%{translate:0 0}}

.sleeve__strap{
  margin-top:clamp(2.2rem,5vw,3.2rem);

  font:700 clamp(.8rem,1.2vw,.95rem)/1.3 var(--f-mono);
  letter-spacing:.16em; color:var(--red-hot);
  animation:type .8s .95s steps(30,end) both;
}
@keyframes type{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}

.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);
  animation:slap .26s 1.15s cubic-bezier(.6,0,.9,.3) both;
}
.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);
  animation:slap .26s 1.32s cubic-bezier(.6,0,.9,.3) both;
}
.hype b{display:block; font:var(--label); letter-spacing:var(--label-track); color:var(--red-hot); margin-bottom:.35rem}
.hype p{font:400 1.25rem/1 var(--f-display); letter-spacing:.02em; color:var(--bone)}
.hype em{display:block; margin-top:.45rem; font:var(--label); font-style:normal; letter-spacing:var(--label-track); color:var(--red-hot)}
@media (max-width:900px){.hype{display:none}}

.sleeve__cat{
  position:absolute; top:.8rem; left:var(--gut); z-index:5;
  display:flex; align-items:center; gap:.65rem;
  font:var(--label); letter-spacing:var(--label-track); color:var(--ash-dim);
}
.sleeve__cat em{font-style:normal; color:var(--red-hot); margin-left:.6rem}

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

.bandwall{
  overflow:hidden; border-block:2px solid var(--red); background:#0b0910;
  padding-block:clamp(.7rem,1.6vw,1.1rem);
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(1.5rem,3.4vw,3rem); line-height:1;
  color:var(--bone); letter-spacing:.005em;
}
.bandwall__skew{transform-origin:50% 50%}
.bandwall__track{position:relative; display:flex; width:max-content}
.bandwall__echo{
  position:absolute; inset:0; display:flex; pointer-events:none;
  color:transparent; -webkit-text-stroke:2px var(--red-hot); opacity:0;
}
.bandwall__echo b{color:transparent}
.bandwall__run{position:relative; z-index:1; display:flex; align-items:center; gap:.45em; padding-right:.45em; white-space:nowrap}
.bandwall b{color:var(--red); font-size:.5em; font-weight:400}

.back{padding-block:var(--block-gap)}
.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{position:relative; display:grid; justify-self:end; align-self:end; width:max-content}
.barcode{display:flex; align-items:flex-end; justify-content:center; gap:2px; height:54px; background:#fff; padding:6px 8px 3px}
.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:2px 8px 5px; text-align:center;
  font:var(--label); line-height:1; letter-spacing:.06em;
}

.cramped{
  font:700 .7rem/1.45 var(--f-narrow); letter-spacing:.055em;
  text-transform:uppercase; color:var(--ash);
}
.cramped--wide{max-width:60ch; font:400 clamp(1.02rem,.3vw + .95rem,1.15rem)/1.65 var(--f-body); letter-spacing:0; text-transform:none; color:var(--ash); text-wrap:pretty}

.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:var(--label); font-style:normal; letter-spacing:var(--label-track);
  color:var(--red-hot); 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)}
@media (max-width:600px){
  .tracks li > a,.tracks--tight li{flex-wrap:wrap; row-gap:.15rem}
  .tracks s{display:none}
  .tracks em{flex:1 1 100%; text-align:left; padding-left:2.7rem}
}
.tracks--tight li:hover{padding-left:.6rem}
.tracks--tight li:hover b{color:var(--red-hot)}

.sec{position:relative; overflow:clip; isolation:isolate}
.sec .wrap{position:relative}
.sec{padding-block:var(--sec-pad)}

.sec--sound .display{font-size:clamp(2.8rem,9vw,6rem)}

.display{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.4rem,7vw,5rem); line-height:.86;
  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:var(--label); letter-spacing:var(--label-track); color:var(--red-hot);
}
.head__sub{
  font-family:var(--f-hand); font-size:clamp(1.1rem,2.4vw,1.5rem);
  color:var(--red-hot); margin-top:1rem; transform:rotate(-.8deg); line-height:1.3;
}
.minihead{
  font:var(--label); letter-spacing:var(--label-track); text-transform:uppercase;
  color:var(--red-hot); 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}

.entry{position:relative; z-index:2; max-width:70rem}
.entry__word{
  font:400 clamp(2rem,5vw,3.4rem)/1 var(--f-display);
  color:var(--bone); letter-spacing:.015em;
}
.entry__gram{
  font:var(--label); letter-spacing:var(--label-track); 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-hot); margin-right:.5rem}
.reading dt em{font:var(--label); font-style:normal; letter-spacing:var(--label-track); 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}

.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:var(--label); letter-spacing:var(--label-track); 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--long dd{flex:0 1 auto; max-width:min(60%,24rem); text-align:left; font:400 .98rem/1.45 var(--f-body); color:var(--ash); text-wrap:pretty}
.spec--wry dd{font:400 1.3rem/1.15 var(--f-hand); color:var(--red-hot)}

.rels{margin-top:var(--block-gap)}
.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:var(--label); letter-spacing:var(--label-track); color:var(--red-hot); 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 .3rem; max-width:46ch}
.rel__links a{
  font:var(--label); letter-spacing:var(--label-track); text-transform:uppercase;
  color:var(--red-hot); display:inline-block; padding:.5rem 0; margin-right:1.3rem;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;
}
.rel__links a:hover{color:var(--bone)}
.rel__fmt{font:var(--label); letter-spacing:var(--label-track); color:var(--ash-dim); padding-top:.85rem; white-space:nowrap}

.sound__top{position:relative; z-index:2}
.genres{font:var(--label); letter-spacing:var(--label-track); color:var(--red-hot); margin-top:1.6rem}

.sound__band{
  display:grid; grid-template-columns:1fr;
  gap:clamp(1.6rem,3vw,2.6rem);
  margin-top:var(--block-gap);
}
@media (min-width:980px){
  .sound__band{
    grid-template-columns:minmax(0,1fr) minmax(0,clamp(250px,28vw,420px));
    align-items:start;
  }
}
.sound__names{min-width:0}

.livepic{
  position:relative; margin:0; overflow:clip; isolation:isolate;
  background:var(--red-deep); height:clamp(330px,38vw,540px);
}
.livepic img{
  width:100%; height:100%; object-fit:cover; object-position:52% 24%; opacity:0;
}
.livepic img.tc{opacity:1}

.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:var(--label); letter-spacing:var(--label-track);
  text-transform:uppercase; color:var(--bone);
}

.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.solo::after{
  content:"соло"; display:inline-block; transform:skewX(7deg);
  font:700 .2em/1 var(--f-mono); letter-spacing:var(--label-track);
  color:var(--ash-dim); vertical-align:.85em; margin-left:.55em; text-transform:lowercase;
}
html[lang="en"] .pantheon li.solo::after{content:"solo"}

.sound__spread{position:relative; z-index:2; margin-top:var(--block-gap)}

.quote{margin:0 0 var(--block-gap); padding-left:clamp(.9rem,2.5vw,2rem); border-left:5px solid var(--red); max-width:min(100%,44rem)}

.quote p{font:700 clamp(1.25rem,3.2vw,2.2rem)/1.22 var(--f-narrow); letter-spacing:.004em}
.quote__src{display:block; margin-top:1rem; font:var(--label); font-style:normal; letter-spacing:var(--label-track); color:var(--ash)}
.quote__src::before{content:"— "; color:var(--red)}
.quote .w{color:var(--bone); opacity:calc(.13 + .87 * var(--l,1)); transition:opacity .1s linear}

.sound__cols{display:grid; gap:1.1rem; max-width:62ch}

.stamp{
  position:absolute; left:calc(min(62ch, 100%) + clamp(2rem,6vw,6rem)); bottom:0; 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:var(--label); font-style:normal; letter-spacing:var(--label-track)}
@media (max-width:880px){.stamp{position:static; margin:2rem 0 0 auto; width:max-content; transform:rotate(-8deg)}}


.wall{
  position:relative; z-index:2; display:grid; align-items:start; grid-template-columns:1fr;
  gap:clamp(1.4rem,3vw,2.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:var(--label); letter-spacing:var(--label-track); 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:var(--label); letter-spacing:var(--label-track); 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:var(--label); letter-spacing:var(--label-track); 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:var(--label); letter-spacing:var(--label-track); 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}
}

.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:var(--label); font-style:normal; letter-spacing:var(--label-track); text-transform:uppercase; color:var(--red-hot); 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:var(--label); letter-spacing:var(--label-track); 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{border-top:2px solid var(--red); padding-block:var(--sec-pad) var(--block-gap); background:#0a080e}
.runout__end{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-top:var(--block-gap)}
.signature{font-family:var(--f-hand); font-size:clamp(2rem,6vw,3.4rem); color:var(--bone); transform:rotate(-3deg); transform-origin:left}
.matrix{font:var(--label); letter-spacing:var(--label-track); color:var(--ash-dim); text-align:right}

.badge{display:block; width:30px; height:30px; flex:none}
.badge__svg{display:block; width:100%; height:100%}


.sec--name{background:#0e0a0a; --sec-bg:#0e0a0a}

.sec--do{background:#100c0b; --sec-bg:#100c0b}
.pick{width:clamp(88px,10vw,124px); height:auto; display:block; transform:rotate(-14deg); transition:transform .25s var(--snap)}
.pick:hover{transform:rotate(-4deg)}

.sec--sound{background:var(--blood); --sec-bg:var(--blood); padding-top:0}
.wave{position:relative; overflow:clip; height:46px; margin-bottom:var(--sec-pad);
  -webkit-mask:url(../img/kit/divider.svg) center/100% 100% no-repeat;
          mask:url(../img/kit/divider.svg) center/100% 100% no-repeat}
.wave__fill{position:absolute; top:0; bottom:0; left:0; width:200%;
  background:repeating-linear-gradient(90deg,var(--red-hot) 0,var(--red) 20%,var(--red-hot) 35%,var(--red) 50%)}
.sec--sound .livepic{background:#1c0000 url(../img/dime-live-red.webp) 52% 24%/cover no-repeat}
html.gr .sec--sound .livepic{background-image:url(../img/dime-live-green.webp)}
.livepic::after{content:""; position:absolute; inset:-1px; z-index:3; background:var(--blood); transform-origin:50% 0; transform:scaleY(var(--cur,0))}
.sec--sound .livepic__burn{background:
  linear-gradient(to left,   var(--blood) 0%, transparent 17%),
  linear-gradient(to right,  var(--blood) 0%, transparent 17%),
  linear-gradient(to top,    var(--blood) 0%, transparent 15%),
  linear-gradient(to bottom, var(--blood) 0%, transparent 13%),
  radial-gradient(76% 70% at 50% 42%, transparent 46%, var(--blood-fog) 100%)}

.sec--rot{background:#0c0909; --sec-bg:#0c0909}

.sec--contact{background:#120b0a; --sec-bg:#120b0a; border-top:2px solid var(--red)}

.runout__end{align-items:flex-end}
.crow{width:min(240px,60vw); height:auto; flex:none}

.sideb{background:var(--ink)}
.sideb__grid{display:grid; gap:2rem clamp(2rem,5vw,4rem); grid-template-columns:1fr; align-items:start}
@media (min-width:900px){.sideb__grid{grid-template-columns:minmax(0,1fr) minmax(0,320px)}}
.sideb__lists .minihead{margin-top:2.2rem}
.sideb__props{display:grid; justify-items:center; gap:1.2rem}
.sideb__props .cassette{width:min(100%,320px); height:auto; transform:rotate(-2deg)}

html.gr{--blood:#0c1600; --blood-fog:rgba(12,22,0,.8)}
html.gr .badge [fill="#e21205"],html.gr .cassette [fill="#e21205"],html.gr .pick [fill="#e21205"]{fill:var(--red)}
html.gr .pick [stroke="#7d0300"]{stroke:var(--red-deep)}
html.gr .sec--contact{border-top-color:var(--red)}

html.js-stamps .stamp:not(.is-down){opacity:0}
.stamp.is-down{animation:thud .42s cubic-bezier(.5,0,.75,0) both}
@keyframes thud{
  0%{opacity:0; scale:1.9}
  70%{opacity:1; scale:.95}
  85%{scale:1.02}
  100%{opacity:1; scale:1}
}


.intro{
  display:none;
  --i-bg:var(--bone); --i-spark:#e21205; --i-glow:rgba(226,18,5,.75); --i-blast:var(--ink); --i-flash:#050406;
  --i-1bg:var(--bone); --i-1fg:var(--ink); --i-2bg:var(--ink); --i-2fg:var(--bone);
  --i-3bg:var(--bone); --i-3fg:var(--red); --i-4bg:var(--bone); --i-4fg:var(--ink);
  --i-gA:var(--ink); --i-gB:#8a8076; --i-line:var(--ink);
}
html[data-pal="r"] .intro,html[data-pal="a"] .intro,html[data-pal="b"] .intro{
  --i-bg:#050406; --i-spark:#e21205; --i-glow:rgba(226,18,5,.85); --i-blast:var(--red); --i-flash:var(--red-hot);
  --i-1bg:var(--red); --i-1fg:var(--ink); --i-2bg:var(--bone); --i-2fg:var(--ink);
  --i-3bg:#050406; --i-3fg:var(--red); --i-4bg:#050406; --i-4fg:var(--bone);
  --i-gA:var(--red-hot); --i-gB:var(--red); --i-line:var(--red-hot);
}
html[data-pal="a"] .intro{--i-flash:#fff; --i-2bg:#fff}
html[data-pal="b"] .intro{--i-flash:#fcee0a; --i-2bg:#fcee0a; --i-2fg:#050406; --i-gA:var(--red); --i-gB:#00f0ff; --i-line:#fcee0a}

html.intro-on .intro{
  display:block; position:fixed; inset:0; z-index:9500; overflow:hidden; background:var(--i-bg);
  animation:intro-gone 0s 4.2s forwards,
            jolt .2s 1.42s steps(4,end), jolt .2s 1.87s steps(4,end), jolt .2s 2.32s steps(4,end), jolt .3s 2.77s steps(6,end);
}
@keyframes intro-gone{to{visibility:hidden}}
@keyframes jolt{0%{translate:0 0}25%{translate:-14px 7px}50%{translate:12px -6px}75%{translate:-6px 3px}100%{translate:0 0}}

.intro__string{
  position:absolute; left:0; right:0; top:50%; height:3px; margin-top:-1.5px;
  background:linear-gradient(90deg, transparent, var(--i-spark) 6%, var(--i-spark) 94%, transparent);
  box-shadow:0 0 10px 2px var(--i-glow), 0 0 38px 6px var(--i-glow);
  opacity:0; transform:translateY(0) scaleX(.003) scaleY(1);
  animation:string 1.3s linear both;
}
@keyframes string{
  0%{opacity:0; transform:translateY(0) scaleX(.003) scaleY(1)}
  5%{opacity:1} 9%{opacity:.2}
  13%{opacity:1; transform:translateY(0) scaleX(.003) scaleY(1)}
  19%{transform:translateY(0) scaleX(.03) scaleY(1.4); animation-timing-function:cubic-bezier(.16,1,.3,1)}
  52%{transform:translateY(0) scaleX(1) scaleY(1)}
  57%{transform:translateY(-10px) scaleX(1) scaleY(1.8)}
  62%{transform:translateY(9px) scaleX(1) scaleY(1.6)}
  67%{transform:translateY(-7px) scaleX(1) scaleY(1.4)}
  72%{transform:translateY(5px) scaleX(1) scaleY(1.3)}
  77%{transform:translateY(-4px) scaleX(1) scaleY(1.2)}
  82%{transform:translateY(3px) scaleX(1) scaleY(1.1)}
  88%{transform:translateY(-1.5px) scaleX(1) scaleY(1)}
  95%{opacity:1; transform:translateY(0) scaleX(1) scaleY(1)}
  100%{opacity:0; transform:translateY(0) scaleX(1) scaleY(1)}
}
.intro__blast{position:absolute; left:50%; top:50%; width:60px; height:60px; margin:-30px 0 0 -30px; border-radius:50%; background:var(--i-blast); transform:scale(0); animation:blast .24s 1.18s cubic-bezier(.7,0,.84,0) both}
@keyframes blast{0%{transform:scale(0)}100%{transform:scale(64)}}
.intro__flash{position:absolute; inset:0; z-index:5; background:var(--i-flash); opacity:0; animation:flash .34s 1.38s both}
@keyframes flash{0%{opacity:0}4%{opacity:1}35%{opacity:.75}100%{opacity:0}}

.intro__cut{
  position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; opacity:0;
  font:400 min(34vw,62vh)/.82 var(--f-display); letter-spacing:-.01em; text-transform:uppercase;
  animation:cut .45s linear;
}
@keyframes cut{from{opacity:1}to{opacity:1}}
.intro__cut span{position:relative; display:block}
.intro__cut span::before,.intro__cut span::after{content:attr(data-t); position:absolute; inset:0}
.intro__cut span::before{opacity:.38}
.intro__cut span::after{opacity:.16}

.intro__cut--1{background:var(--i-1bg); color:var(--i-1fg); animation-delay:1.42s}
.intro__cut--1 span{animation:squash .45s 1.42s both}
.intro__cut--1 span::before{animation:trail-y .45s 1.42s both}
.intro__cut--1 span::after{animation:trail-y2 .45s 1.42s both}
@keyframes squash{
  0%{transform:translateY(-60%) scale(.7,1.55)} 22%{transform:translateY(0) scale(1.38,.55)}
  40%{transform:scale(.9,1.12)} 58%{transform:scale(1.04,.97)} 75%,100%{transform:none}
}
@keyframes trail-y{0%{transform:translateY(-30%)}30%{transform:translateY(-7%)}50%,100%{transform:none; opacity:0}}
@keyframes trail-y2{0%{transform:translateY(-55%)}30%{transform:translateY(-14%)}50%,100%{transform:none; opacity:0}}

.intro__cut--2{background:var(--i-2bg); color:var(--i-2fg); animation-delay:1.87s}
.intro__cut--2 span{animation:stretch .45s 1.87s both}
.intro__cut--2 span::before{animation:trail-x .45s 1.87s both}
.intro__cut--2 span::after{animation:trail-x2 .45s 1.87s both}
@keyframes stretch{
  0%{transform:translateX(75%) scaleX(2.9) skewX(-18deg)} 30%{transform:translateX(-3%) scaleX(.85) skewX(6deg)}
  50%{transform:translateX(1%) scaleX(1.05) skewX(-2deg)} 70%,100%{transform:none}
}
@keyframes trail-x{0%{transform:translateX(22%)}35%{transform:translateX(6%)}55%,100%{transform:none; opacity:0}}
@keyframes trail-x2{0%{transform:translateX(44%)}35%{transform:translateX(12%)}55%,100%{transform:none; opacity:0}}

.intro__cut--3{background:var(--i-3bg); color:var(--i-3fg); animation-delay:2.32s}
.intro__cut--3 span{animation:slam .45s 2.32s both}
.intro__cut--3 span::before{animation:trail-s .45s 2.32s both}
.intro__cut--3 span::after{animation:trail-s2 .45s 2.32s both}
@keyframes slam{0%{transform:scale(3.4)}18%{transform:scale(.9)}30%{transform:scale(1.05)}42%{transform:scale(1)}100%{transform:scale(1.07)}}
@keyframes trail-s{0%{transform:scale(1.5)}40%,100%{transform:none; opacity:0}}
@keyframes trail-s2{0%{transform:scale(2.2)}40%,100%{transform:none; opacity:0}}

.intro__cut--4{background:var(--i-4bg); animation-duration:1.43s; animation-delay:2.77s}
.intro__logo{
  position:absolute; left:var(--lx,50%); top:var(--ly,42%); width:var(--lw,min(80vw,980px));
  translate:var(--lt,-50% -50%); animation:glitch .45s 2.77s steps(1,end) both;
}
.intro__svg{display:block; width:100%; height:auto; overflow:visible}
.intro__svg--a,.intro__svg--b{position:absolute; inset:0}
.intro__svg--a use{fill:var(--i-gA)}
.intro__svg--b use{fill:var(--i-gB)}
.intro__svg--a{animation:slice-a .45s 2.77s steps(1,end) both}
.intro__svg--b{animation:slice-b .45s 2.77s steps(1,end) both}
.intro__line{
  position:absolute; left:var(--lx,50%); top:calc(var(--ly,42%) + var(--lh,22vw) + clamp(1rem,3vh,2.2rem));
  translate:var(--lt2,-50% 0);
  font:700 clamp(1.15rem,2.6vw,2.2rem)/1 var(--f-mono); font-style:normal; letter-spacing:.22em; white-space:nowrap;
  color:var(--i-line); clip-path:inset(0 100% 0 0); animation:type .7s 3.3s steps(18,end) both;
}
@keyframes glitch{
  0%{transform:translate(-6%,0) skewX(-10deg)} 12%{transform:translate(5%,2%)} 24%{transform:translate(-3%,-3%) skewX(8deg)}
  36%{transform:translate(4%,1%)} 48%{transform:translate(-2%,0) skewX(-4deg)} 60%{transform:translate(1%,-1%)}
  72%{transform:translate(-.5%,0)} 84%,100%{transform:none}
}
@keyframes slice-a{
  0%{clip-path:inset(0 0 52% 0); transform:translateX(-18%)} 16%{clip-path:inset(0 0 38% 0); transform:translateX(12%)}
  32%{clip-path:inset(0 0 64% 0); transform:translateX(-9%)} 48%{clip-path:inset(0 0 46% 0); transform:translateX(5%)}
  64%{clip-path:inset(0 0 58% 0); transform:translateX(-2%)} 80%,100%{clip-path:inset(0 0 100% 0); transform:none}
}
@keyframes slice-b{
  0%{clip-path:inset(48% 0 0 0); transform:translateX(20%)} 16%{clip-path:inset(62% 0 0 0); transform:translateX(-14%)}
  32%{clip-path:inset(36% 0 0 0); transform:translateX(8%)} 48%{clip-path:inset(54% 0 0 0); transform:translateX(-4%)}
  64%{clip-path:inset(42% 0 0 0); transform:translateX(2%)} 80%,100%{clip-path:inset(100% 0 0 0); transform:none}
}

html.intro-on .wordmark{animation-delay:-2s}
html.intro-on .sleeve{animation:shake .28s 4.2s steps(5,end) both}
@keyframes shake{0%{translate:0 0}20%{translate:-14px 6px}40%{translate:12px -8px}60%{translate:-8px 4px}80%{translate:5px -2px}100%{translate:0 0}}
html.intro-on .sleeve__photo{animation-delay:4.2s}
html.intro-on .wordmark__script{animation-delay:4.25s}
html.intro-on .sleeve__strap{animation-delay:4.3s}
html.intro-on .advisory{animation-delay:4.4s}
html.intro-on .hype{animation-delay:4.48s}

.replay{
  font:inherit; letter-spacing:inherit; color:var(--ash-dim);
  padding:.5rem .15rem; margin:-.5rem 0; border-bottom:1px solid transparent;
}
.replay:hover{color:var(--red-hot); border-bottom-color:currentColor}

.ticket.reveal:not(.is-in){transition:opacity .14s steps(2,end), transform .14s steps(3,end)}
html.js-stamps .stamp:not(.is-down){scale:1.9; transition:opacity .15s steps(3,end), scale .15s steps(3,end)}



.ticket.reveal{opacity:0; transform:translate3d(0,-70px,0) rotate(-4deg); transition:opacity .1s linear, transform .32s cubic-bezier(.7,0,.84,0)}
.ticket--b.reveal,.ticket--d.reveal{transition-delay:.12s}
.ticket.reveal.is-in{opacity:1; transform:rotate(var(--rot))}

.wipe{position:relative}
.wipe::after{
  content:""; position:absolute; inset:-.08em -.32em -.22em -.14em; z-index:1;
  background:var(--sec-bg,var(--ink)); transform-origin:100% 50%; transform:scaleX(0);
}
html.scrub .wipe::after{transform:scaleX(1)}

.pantheon li:nth-child(1){--k:.45} .pantheon li:nth-child(2){--k:.63}
.pantheon li:nth-child(3){--k:.81} .pantheon li:nth-child(4){--k:.99}
@keyframes plate{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes rel-in{from{transform:translateY(26px)}to{transform:none}}
@keyframes pan-in{from{translate:calc(var(--pl,120px) * var(--k,.6) * -1) 0}to{translate:0 0}}
@keyframes curtain{from{transform:scaleY(1)}to{transform:scaleY(0)}}
@keyframes wave-run{from{transform:translateX(0)}to{transform:translateX(-40%)}}
@supports (animation-timeline: view()){
  html.scrub .wipe{view-timeline:--wipe block}
  html.scrub .wipe::after{animation:plate 1s linear both; animation-timeline:--wipe; animation-range:entry 0% entry 100%}
  html.scrub .rel{animation:rel-in 1s linear both; animation-timeline:view(); animation-range:entry 0% entry 100%}
  html.scrub .pantheon li{animation:pan-in 1s cubic-bezier(.33,1,.68,1) both; animation-timeline:view(); animation-range:entry 0% entry 100%}
  html.scrub .livepic{view-timeline:--lp block}
  html.scrub .livepic::after{animation:curtain 1s linear both; animation-timeline:--lp; animation-range:entry 0% entry 50%}
  html.scrub .wave__fill{animation:wave-run 1s linear both; animation-timeline:view(); animation-range:cover 0% cover 100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .ticket.reveal{opacity:1; transform:rotate(var(--rot))}
  .wordmark,.wordmark__script,.sleeve__photo,.sleeve__strap,.advisory,.hype,.sleeve{opacity:1; animation:none}
  .intro{display:none !important}
  .quote .w{opacity:1}
  .fx-grain::before{animation:none}
}
@media (pointer:coarse){
  .fx-grain{opacity:.06}
  .fx-grain::before{animation:none}
}

.back__data .bh{position:absolute; right:0; top:100%; white-space:nowrap; font:var(--label); letter-spacing:var(--label-track)}
.runout .wrap .ink{font:var(--label); letter-spacing:var(--label-track)}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.copy.is-failed u::after{color:var(--ash)}