/* Hot Perks Site — front-end styles
   Palette: midnight #04060F · cobalt #2B4BFF · bone #F2F3F7 · paper #F4F4F1
   Type: Archivo (variable width). Extended (wdth 125) for display, normal width for text. */

:root{
  --hp-bg:#04060F;
  --hp-ink:#F2F3F7;
  --hp-muted:rgba(242,243,247,.72);
  --hp-paper:#F4F4F1;
  --hp-paper-ink:#04060F;
  --hp-blue:#2B4BFF;
  --hp-blue-hover:#4762FF;
  --hp-blue-soft:#8AA0FF;
  --hp-line:rgba(242,243,247,.16);
  --hp-line-dark:rgba(4,6,15,.14);
  --hp-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --hp-pad:clamp(20px,5vw,64px);
  --hp-max:1280px;
}

html{scroll-behavior:smooth;background:var(--hp-bg)}

.hp-body{margin:0;background:var(--hp-bg);color:var(--hp-ink);font-family:var(--hp-display);font-stretch:100%;font-weight:400;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
.hp-body *,.hp-body *::before,.hp-body *::after{box-sizing:border-box}
.hp-body img{max-width:100%;height:auto;display:block}
.hp-body a{color:inherit;text-decoration:none}
.hp-body h1,.hp-body h2,.hp-body h3,.hp-body p,.hp-body ul,.hp-body figure{margin:0;padding:0}
.hp-body ul{list-style:none}
.hp-body :focus-visible{outline:3px solid var(--hp-blue-soft);outline-offset:3px;border-radius:4px}
.hp-paper :focus-visible{outline-color:var(--hp-blue)}

.hp-skip{position:absolute;left:-9999px;top:8px;background:#fff;color:#000;padding:10px 16px;z-index:10000;border-radius:6px;font-weight:700}
.hp-skip:focus{left:8px}

/* Type */
.hp-display{font-weight:800;font-stretch:125%;text-transform:uppercase;letter-spacing:-.01em;line-height:.96}
.hp-eyebrow{font-size:.74rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--hp-blue-soft)}
.hp-paper .hp-eyebrow{color:var(--hp-blue)}
.hp-meta{font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.72}

/* Buttons */
.hp-btn{display:inline-flex;align-items:center;gap:.7em;border-radius:999px;padding:1em 1.8em;font-size:.78rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;line-height:1;transition:transform .2s,background .2s,color .2s,border-color .2s;cursor:pointer;border:1.5px solid transparent}
.hp-body .hp-btn--blue{background:var(--hp-blue);color:#fff}
.hp-body .hp-btn--blue:hover{background:var(--hp-blue-hover);transform:translateY(-2px)}
.hp-btn--line{border-color:currentColor;background:transparent}
.hp-btn--line:hover{background:var(--hp-ink);color:var(--hp-bg);border-color:var(--hp-ink)}
.hp-paper .hp-btn--line:hover{background:var(--hp-paper-ink);color:var(--hp-paper);border-color:var(--hp-paper-ink)}

/* Intro (logo splash, once per session) */
.hp-intro{display:none;position:fixed;inset:0;z-index:9999;background:var(--hp-bg);place-items:center;transition:opacity .7s ease,visibility 0s linear .7s}
html.hp-intro-on .hp-intro{display:grid;animation:hp-intro-out .7s ease 2.6s forwards}
@keyframes hp-intro-out{to{opacity:0;visibility:hidden}}
.hp-intro.is-done{opacity:0;visibility:hidden}
.hp-intro__inner{display:flex;flex-direction:column;align-items:center;gap:28px}
.hp-intro__logo{width:min(64vw,340px);height:auto;animation:hp-pop 1.1s cubic-bezier(.2,.7,.2,1) both}
.hp-intro__bar{width:min(46vw,190px);height:2px;background:rgba(242,243,247,.16);overflow:hidden;border-radius:2px}
.hp-intro__bar::after{content:"";display:block;height:100%;background:var(--hp-blue);transform:translateX(-100%);animation:hp-load 1.5s ease-in-out forwards}
@keyframes hp-pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes hp-load{to{transform:none}}

/* Header */
.hp-header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:28px;padding:18px var(--hp-pad);transition:background .3s,padding .3s,border-color .3s;border-bottom:1px solid transparent}
.hp-header.is-stuck{background:rgba(4,6,15,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding-top:11px;padding-bottom:11px;border-bottom-color:var(--hp-line)}
.admin-bar .hp-header{top:32px}
@media(max-width:782px){.admin-bar .hp-header{top:46px}}
.hp-brand{display:block;line-height:0}
.hp-brand img{height:36px;width:auto}
.hp-nav{margin-left:auto}
.hp-nav ul{display:flex;gap:36px}
.hp-nav a{font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;transition:color .2s}
.hp-nav a:hover{color:var(--hp-blue-soft)}
.hp-burger{display:none;width:44px;height:44px;border:0;background:none;color:inherit;cursor:pointer;position:relative;margin-left:auto}
.hp-burger span{position:absolute;left:10px;right:10px;height:2px;background:currentColor;transition:transform .25s,top .25s}
.hp-burger span:nth-child(1){top:17px}
.hp-burger span:nth-child(2){top:25px}
.hp-burger[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
.hp-burger[aria-expanded="true"] span:nth-child(2){top:21px;transform:rotate(-45deg)}
@media(max-width:860px){
  .hp-nav,.hp-header__cta{display:none}
  .hp-burger{display:block}
  .hp-brand img{height:32px}
}

/* Mobile menu */
.hp-menu{display:none;position:fixed;inset:0;z-index:40;background:var(--hp-bg);padding:112px var(--hp-pad) 40px;flex-direction:column;justify-content:space-between;overflow-y:auto}
.hp-menu.is-open{display:flex}
.hp-menu__link{display:block;padding:16px 0;border-bottom:1px solid var(--hp-line);font-weight:800;font-stretch:125%;text-transform:uppercase;font-size:clamp(1.5rem,7vw,2.3rem);line-height:1.1}
.hp-menu .hp-btn{align-self:flex-start;margin-top:32px}

/* Hero */
.hp-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:130px var(--hp-pad) clamp(56px,10vh,120px);overflow:hidden;isolation:isolate;
  background:
    radial-gradient(90% 75% at 88% -5%,#1d3cc0 0%,rgba(29,60,192,0) 62%),
    radial-gradient(75% 60% at -5% 105%,#0b1a55 0%,rgba(11,26,85,0) 68%),
    var(--hp-bg)}
.hp-hero__mark{position:absolute;right:-6vw;bottom:-8vw;width:min(58vw,720px);height:auto;opacity:.07;z-index:-3;pointer-events:none}
.hp-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:0;transition:opacity 1.4s ease}
.hp-hero__video.is-ready{opacity:.5}
.hp-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(4,6,15,.6) 0%,rgba(4,6,15,.15) 38%,rgba(4,6,15,.92) 100%)}
.hp-hero__inner{max-width:var(--hp-max);width:100%;margin:0 auto}
.hp-hero h1{font-size:clamp(2.35rem,8.6vw,7.2rem);margin:20px 0 24px}
.hp-hero__lead{max-width:32em;color:var(--hp-muted);font-size:clamp(1.02rem,1.6vw,1.22rem)}
.hp-hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

/* Sections */
.hp-section{padding:clamp(72px,11vw,150px) var(--hp-pad);overflow-x:clip}
.hp-wrap{max-width:var(--hp-max);margin:0 auto}
.hp-paper{background:var(--hp-paper);color:var(--hp-paper-ink)}

.hp-about{text-align:center}
.hp-about h2{font-size:clamp(1.9rem,5.2vw,3.8rem);margin-bottom:28px}
.hp-about p{max-width:36em;margin:0 auto;color:var(--hp-muted);font-size:clamp(1.05rem,1.7vw,1.3rem)}
.hp-paper.hp-about p{color:rgba(4,6,15,.72)}
.hp-about .hp-btn{margin-top:36px}

/* Featured release */
.hp-feature{display:grid;gap:clamp(30px,5vw,80px);align-items:center;margin-bottom:clamp(64px,9vw,130px)}
@media(min-width:900px){.hp-feature{grid-template-columns:1fr 1fr}}
.hp-feature__cover{position:relative;width:100%;max-width:620px;margin-right:14px;margin-bottom:14px}
.hp-feature__cover::before{content:"";position:absolute;inset:14px -14px -14px 14px;background:var(--hp-blue)}
.hp-feature__cover>img,.hp-feature__cover>.hp-cover-ph{position:relative;width:100%;aspect-ratio:1/1;object-fit:cover}
.hp-feature__artist{font-weight:700;font-stretch:112%;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1rem,2vw,1.35rem);margin:14px 0 8px;color:var(--hp-blue)}
.hp-feature h2{font-size:clamp(2.5rem,7.2vw,5.6rem);margin-bottom:20px}
.hp-feature__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hp-prose{max-width:38em;margin-top:22px;font-size:1.05rem;opacity:.85}
.hp-prose p+p{margin-top:1em}

/* Release grid */
.hp-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:34px;flex-wrap:wrap}
.hp-sec-head h2{font-size:clamp(1.9rem,5vw,3.8rem)}
.hp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(min-width:1000px){.hp-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}}
.hp-card{display:block;background:#fff;border-radius:14px;overflow:hidden;transition:transform .25s,box-shadow .25s}
.hp-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px -20px rgba(4,6,15,.45)}
.hp-card__cover{position:relative;aspect-ratio:1/1;background:#dfe2ee;overflow:hidden}
.hp-card__cover>img,.hp-card__cover>.hp-cover-ph{width:100%;height:100%;object-fit:cover}
.hp-card__tag{position:absolute;top:10px;right:10px;background:var(--hp-blue);color:#fff;border-radius:8px;font-size:.66rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;padding:.75em 1em;line-height:1}
.hp-card__body{padding:16px 16px 20px}
.hp-card__title{font-weight:800;font-stretch:112%;text-transform:uppercase;font-size:1rem;line-height:1.15}
.hp-card__artists{margin-top:7px;color:var(--hp-blue);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.4}
.hp-more{display:flex;justify-content:center;margin-top:48px}

.hp-cover-ph{display:grid;place-items:center;background:linear-gradient(135deg,#0b1a55,#04060F)}
.hp-cover-ph img{width:34%;opacity:.9}

/* Follow */
.hp-follow h2{font-size:clamp(1.9rem,6vw,4.6rem);text-align:center;margin-bottom:48px}
.hp-rows{border-top:1px solid var(--hp-line);max-width:980px;margin:0 auto}
.hp-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px 6px;border-bottom:1px solid var(--hp-line);font-weight:800;font-stretch:120%;text-transform:uppercase;font-size:clamp(1.15rem,3.2vw,2rem);line-height:1.1;transition:padding .25s,color .25s}
.hp-row:hover{color:var(--hp-blue-soft);padding-left:18px}
.hp-row span{font-size:1.3em;transition:transform .25s}
.hp-row:hover span{transform:translateX(6px)}

/* Stream + social icons */
.hp-stream{text-align:center}
.hp-stream h2{margin-bottom:28px}
.hp-stream h2+h2{margin-top:clamp(56px,8vw,100px)}
.hp-spotify{max-width:720px;margin:0 auto}
.hp-spotify iframe{display:block;width:100%;border-radius:16px}
.hp-social{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.hp-social__item{display:grid;place-items:center;width:64px;height:64px;border-radius:999px;background:rgba(242,243,247,.07);border:1px solid var(--hp-line);color:var(--hp-ink);transition:background .2s,transform .2s,border-color .2s}
.hp-social__item svg{width:26px;height:26px}
.hp-social__item:hover{background:var(--hp-blue);border-color:var(--hp-blue);transform:translateY(-3px);color:#fff}
@media(max-width:420px){
  .hp-social{gap:10px}
  .hp-social__item{width:52px;height:52px}
  .hp-social__item svg{width:22px;height:22px}
}

/* Footer */
.hp-foot{background:var(--hp-bg);padding:clamp(64px,10vw,120px) var(--hp-pad) clamp(40px,6vw,64px);border-top:1px solid var(--hp-line)}
.hp-foot .hp-foot__inner{text-align:center;display:flex;flex-direction:column;align-items:center}
.hp-foot .hp-foot__logo{height:clamp(40px,5vw,52px);width:auto}
.hp-foot__cta{margin-top:30px}
.hp-foot__copy{margin-top:clamp(40px,7vw,72px);font-size:.74rem;letter-spacing:.1em;color:var(--hp-muted)}
.hp-foot__social{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;margin-top:22px}
.hp-foot__social a{color:var(--hp-ink);opacity:.85;transition:color .2s,opacity .2s,transform .2s}
.hp-foot__social a svg{width:22px;height:22px;display:block}
.hp-foot__social a:hover{color:var(--hp-blue-soft);opacity:1;transform:translateY(-2px)}

/* Talent / roster page */
.hp-page-head--talent{padding-bottom:clamp(48px,7vw,90px)}
.hp-roster{padding-top:clamp(40px,6vw,70px)}
.hp-artist{display:grid;gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(48px,8vw,96px) 0;border-bottom:1px solid var(--hp-line-dark)}
.hp-artist:first-child{padding-top:0}
.hp-artist:last-child{border-bottom:0;padding-bottom:0}
@media(min-width:860px){
  .hp-artist{grid-template-columns:minmax(0,420px) 1fr}
  .hp-artist--flip{grid-template-columns:1fr minmax(0,420px)}
  .hp-artist--flip .hp-artist__photo{order:2}
  .hp-artist--flip .hp-artist__info{order:1}
}
.hp-artist__photo{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:#dfe2ee}
.hp-artist__photo img{width:100%;height:100%;object-fit:cover;object-position:top center}
.hp-artist__num{color:var(--hp-blue);margin-bottom:10px}
.hp-artist__role{margin-top:10px;font-weight:700;letter-spacing:.03em;color:var(--hp-blue)}
.hp-artist__bio{margin-top:20px;color:rgba(4,6,15,.78)}
.hp-artist .hp-btn{margin-top:28px}
.hp-artist h2.hp-display{font-size:clamp(2.1rem,5.5vw,3.6rem)}

.hp-reveal{transition:opacity .7s ease,transform .7s ease}
html.hp-js .hp-reveal{opacity:0;transform:translateY(28px)}
html.hp-js .hp-reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.hp-js .hp-reveal{opacity:1;transform:none}}
/* Failsafe: if the script never starts (slow network, caching plugin), never leave the page hidden or stuck on the intro. */
html.hp-nojs-fallback .hp-reveal{opacity:1!important;transform:none!important}
html.hp-nojs-fallback .hp-intro{display:none!important}

/* Inner pages (archive, single) */
.hp-page-head{padding:clamp(140px,20vw,220px) var(--hp-pad) clamp(48px,7vw,90px);background:
  radial-gradient(80% 90% at 90% 0%,#1d3cc0 0%,rgba(29,60,192,0) 60%),var(--hp-bg)}
.hp-page-head h1{font-size:clamp(2.2rem,8vw,6rem)}
.hp-single{padding-top:clamp(120px,16vw,180px)}
.hp-single .hp-feature{margin-bottom:0}
.hp-back{display:inline-block;margin-bottom:34px;font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.hp-back:hover{color:var(--hp-blue)}
.hp-empty{text-align:center;padding:60px 0;opacity:.7}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* Language switch (Talent page) */
.hp-lang{display:flex;align-items:center;gap:10px;margin-top:26px;font-size:.78rem;font-weight:700;letter-spacing:.22em}
.hp-lang a{color:rgba(242,243,247,.55);text-decoration:none;padding:6px 2px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.hp-lang a:hover,.hp-lang a.is-on{color:#F2F3F7;border-bottom-color:var(--hp-blue-soft)}
.hp-lang span{color:rgba(242,243,247,.3)}