/* Free stand-in for Lateral Extended: Archivo at its widest (125%) */
body{font-stretch:108%}
h1,h2,h3,.big,.logo,.links a,.nav-cta,.btn,.eyebrow,.menu-links a,.menu-x,.menu-foot,.ttl,.cover,.tm-h,.news-h,.marquee .track,.date,.yr,.kind,.handle,.plats a,.quote,.post-meta,.legal,.menu-tag{font-stretch:125%}
.big,.tm-h,.news-h,.head h2,.about h2,.connect h2,.menu-links a{letter-spacing:-.02em;font-weight:800}
.hero .big{font-size:clamp(46px,7vw,118px)}
.wide .big{font-size:clamp(34px,5.3vw,88px)}
.pair .big{font-size:clamp(30px,3.7vw,60px)}
.tm-h{font-size:clamp(50px,11vw,176px)}
.news-h{font-size:clamp(44px,10vw,160px)}
.head h2,.about h2{font-size:clamp(36px,5.2vw,78px)}
.connect h2{font-size:clamp(40px,6.2vw,98px)}
.menu-links a{font-size:clamp(36px,6vw,90px)}
.ttl{font-size:clamp(17px,2vw,27px)}
.post h3{font-size:clamp(18px,1.9vw,28px)}
.cover b{font-size:clamp(12px,1.2vw,17px)}
.cover.front b{font-size:clamp(19px,2.2vw,32px)}
.logo{font-size:20px}
.btn,.nav-cta,.links a{letter-spacing:.1em}
.eyebrow{letter-spacing:.24em}
@media (max-width:820px){
.panel .hero .big{font-size:clamp(42px,13vw,72px)}
.panel .pair .big{font-size:clamp(26px,8vw,44px)}
.logo{font-size:17px}
}
/* album cover art */
.cover.art::after{display:none}
.panel .tile img.tile-cover{position:absolute;z-index:2;right:clamp(20px,6vw,96px);top:50%;width:clamp(150px,27vw,400px);height:auto;aspect-ratio:1;object-fit:cover;box-shadow:0 30px 70px rgba(0,0,0,.55);transform:translateY(-50%) rotate(3deg);opacity:1;transition:transform 1.1s var(--ease),opacity .8s ease;transition-delay:.55s}
.panel:not(.is-active) .tile img.tile-cover{transform:translateY(-40%) rotate(9deg);opacity:0}
.panel .tile:hover img.tile-cover{transform:translateY(-52%) rotate(1deg);transition-delay:0s}
@media (max-width:820px){
.panel .tile img.tile-cover{top:calc(16px + 3vh);right:16px;width:42vw;transform:rotate(3deg)}
.panel:not(.is-active) .tile img.tile-cover{transform:translateY(24px) rotate(9deg)}
.panel .tile:hover img.tile-cover{transform:rotate(1deg)}
}
.ic-ar{display:inline-block;width:.7em;height:.7em;vertical-align:.02em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square}
.rel a{grid-template-columns:70px 56px 1fr auto auto}
.rel .rc{width:56px;height:56px;object-fit:cover;box-shadow:0 8px 20px rgba(0,0,0,.4);transition:transform .3s var(--ease)}
.rel a:hover .rc{transform:scale(1.08) rotate(-3deg)}
@media (max-width:600px){.rel a{grid-template-columns:44px 44px 1fr auto}.rel .rc{width:44px;height:44px}}
.post-img.cv{background:#3a1a0c}
.post-img.cv img,.post.p2 .post-img img{width:44%;height:auto;aspect-ratio:1;box-shadow:0 22px 44px rgba(0,0,0,.45)}
.cover .ct[hidden]{display:none}
/* footer: logo left, legal links right, no social icons */
.foot .icons{display:none}
.foot{flex-wrap:nowrap;align-items:center}
.legal{margin-left:auto;justify-content:flex-end;align-items:center;text-align:right}
@media (max-width:700px){.foot{flex-wrap:wrap}.legal{margin-left:0;justify-content:flex-start;text-align:left}}
.grain{opacity:.045}
/* keep "LATEST NEWS" on one line on big screens */
.news-h{font-size:clamp(44px,9vw,136px);white-space:nowrap}
.news-grid{margin-top:calc(clamp(44px,9vw,136px) * -.24)}
@media (max-width:700px){.news-h{white-space:normal}.news-grid{margin-top:18px}}
/* short landscape screens (phones on their side) */
@media (max-height:520px) and (orientation:landscape){
.panel .hero .big{font-size:min(7vw,16vh)}
.hero .copy{gap:10px;padding:18px 28px}
.hero .sub,.hero .date{display:none}
.btn{padding:9px 16px;font-size:11px}
.cap{padding:16px 28px;gap:8px}
.wide .big,.pair .big{font-size:min(5.4vw,14vh)}
.pair .play,.wide .play{width:56px}
.tm-h{font-size:min(10vw,24vh)}
.fan{--cw:min(38vh,220px)}
.news-h{font-size:min(9vw,22vh)}
.news-grid{margin-top:calc(min(9vw,22vh) * -.24)}
.menu-links a{font-size:min(6vw,12vh)}
.menu-l{padding-top:10px;padding-bottom:12px}
.panel .tile img.tile-cover{width:min(30vw,58vh)}
}
/* marquee: fill set per word, outlined words light up on hover */
.marquee .track span.mq-f{color:inherit;-webkit-text-stroke:0}
.marquee .track span.mq-o{color:transparent;-webkit-text-stroke:1px var(--bone-dim);transition:color .35s ease,-webkit-text-stroke-color .35s ease}
.marquee .track span.mq-o:hover{color:var(--ember);-webkit-text-stroke-color:var(--ember)}
.marquee .track span.mq-x{display:inline-flex;align-items:center}
.marquee .track span.mq-x svg{height:.78em;width:auto;fill:currentColor}
/* last section: the red "Follow" block fills the screen so the footer sits at the very bottom, no empty space after it */
#connect .panel-in{display:flex;flex-direction:column}
#connect .connect{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center}
#connect .connect-in{width:100%}
#connect footer{flex:0 0 auto}