/* =========================================================
   Hooby — DXi.media artist page  (v3: Steven's edited comp)
   Desktop-first; tuned at 1440px, stacks down to 360px.
   ========================================================= */
:root{
  --bg:#030413;
  --bg-2:#04071a;
  --text:#e3e6f3;
  --ivory:#ecebf0;
  --lime:#bdfb38;
  --lime-ink:#0b0d12;
  --violet:#7a2cf0;
  --font-body:"Figtree","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-ui:"Inter","Figtree",system-ui,sans-serif;
  --font-type:"Cutive","Courier Prime","Courier New",serif;      /* typewriter serif */
  --font-sound:"Questrial","Figtree",sans-serif;
  --font-vision:"Cormorant SC","Cormorant Garamond",serif;
  --font-forward:"Cormorant Garamond","Times New Roman",serif;
  --font-forever:"Germania One","UnifrakturMaguntia",serif;
  --font-slab:"Alfa Slab One","Rockwell",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block}
ul{list-style:none;margin:0;padding:0}
p,h1,h2,h3{margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1440px;margin:0 auto;position:relative}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;border-radius:999px;font-family:var(--font-ui);font-weight:700;white-space:nowrap;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-lime{background:var(--lime);color:var(--lime-ink)}
.btn-lime:hover{box-shadow:0 0 22px rgba(189,251,56,.45)}
.btn-outline{border:1.5px solid rgba(255,255,255,.85);color:#fff;font-weight:500}
.btn-outline:hover{background:rgba(255,255,255,.08)}
.ico-arrow{width:18px;height:18px;flex:none}

/* 4-point rainbow sparkles */
.spk{position:absolute;pointer-events:none;filter:drop-shadow(0 0 8px rgba(255,140,220,.45))}
.spk-cyan{color:#19e3e0;filter:drop-shadow(0 0 7px rgba(25,227,224,.85))}

/* ---------- 1. header (logo only) ---------- */
.site-header{position:relative;z-index:20;background:var(--bg);border-bottom:1px solid #173e6d}
.header-inner{height:78px;display:flex;align-items:center;padding:0 35px}
.nav-logo{display:inline-flex;align-items:center;flex:none}
.nav-logo picture{display:block}
.nav-logo img{display:block;height:52px;width:auto;filter:drop-shadow(0 0 8px rgba(190,80,255,.35));transition:transform .2s ease}
.nav-logo:hover img{transform:rotate(-4deg) scale(1.04)}
.top-nav{margin-left:auto;display:flex;align-items:center;white-space:nowrap;font-family:var(--font-type);font-size:17px;color:var(--ivory);gap:34px}
.top-nav > a{transition:color .15s ease}
.top-nav > a:hover,.top-nav > a:focus-visible{color:var(--lime)}
.top-home{display:block;margin-left:6px;transition:transform .2s ease,filter .2s ease}
.top-home img{display:block;height:34px;width:auto}
.top-home:hover{transform:translateY(-2px) scale(1.06);filter:drop-shadow(0 0 8px rgba(255,120,60,.55))}

/* ---------- 2. hero ---------- */
.hero{position:relative;background:var(--bg);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(1px 1px at 12% 18%,#8fa0ff 50%,transparent 51%),
    radial-gradient(1px 1px at 22% 62%,#6b7cff 50%,transparent 51%),
    radial-gradient(1px 1px at 31% 8%,#a0b0ff 50%,transparent 51%),
    radial-gradient(1px 1px at 4% 88%,#7f8cff 50%,transparent 51%),
    radial-gradient(1px 1px at 72% 12%,#6b7cff 50%,transparent 51%),
    radial-gradient(1px 1px at 96% 60%,#8fa0ff 50%,transparent 51%)}
.hero-inner{height:800px}
.hero-copy{position:relative;z-index:3;top:130px;padding:20px 0 0 45px;width:540px}
.kicker{font-family:var(--font-type);font-size:18px;line-height:22px;color:#e6e6ec;letter-spacing:.2px}
.hooby{position:relative;margin:2px 0 0;line-height:1;height:150px}
.hooby picture{display:block}
.hooby-img{position:absolute;left:-40px;top:-10px;width:541px;max-width:none;height:auto;filter:drop-shadow(0 6px 18px rgba(150,60,255,.25))}
.spk-hooby{z-index:2;left:458px;top:-4px;width:44px;height:46px}
.tagline{font-family:var(--font-ui);font-weight:900;font-size:52px;line-height:50px;letter-spacing:-3.4px;margin-top:-6px}
.tagline .t-line2{font-size:1.192em;line-height:50px;letter-spacing:-.06em;word-spacing:.065em}
.tagline > span{display:block}
.t-lime{color:var(--lime)}
.t-purple{color:var(--violet)}
.t-cyan{background:linear-gradient(90deg,#03d6f0,#10c8f5 70%,#1fb6f7);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-text{margin-top:12px;max-width:400px;font-size:16.4px;line-height:20.6px;color:var(--text)}
.hero-actions{display:flex;gap:19px;margin-top:10px}
.btn-radio{height:37px;width:202px;font-size:17px;gap:22px}
.ico-play{width:12px;height:14px}
.follow{display:flex;align-items:center;gap:12px;height:37px}
.follow-label{font-family:var(--font-ui);font-weight:500;font-size:17px;color:#fff}
.follow-icons{display:flex;align-items:center;gap:8px}
.follow-icons a{display:block;transition:transform .2s ease,filter .2s ease}
.follow-icons a:hover,.follow-icons a:focus-visible{transform:translateY(-2px) scale(1.06);filter:drop-shadow(0 0 8px rgba(255,120,60,.55))}
.follow-icons img{display:block;height:36px;width:auto}

.hero-art{position:absolute;z-index:1;left:300px;top:0;width:1000px;height:800px}
.hero-art .hero-img{position:absolute;left:0;top:-115px;width:92%;opacity:.88;height:auto;max-width:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 84%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 84%,transparent 100%)}

/* stacked words on the right */
.hero-words{position:absolute;z-index:3;left:1030px;top:130px;width:410px;height:100%;color:var(--ivory)}
.w{position:absolute;white-space:nowrap;line-height:1}
.w .g{display:inline-block;line-height:1}
.w .spk{position:static;display:inline-block;vertical-align:middle}
.w-sound{left:46px;top:28px;font-family:var(--font-sound);font-size:47px;letter-spacing:.5px}
.w-sound .spk-a{width:56px;height:58px;margin:-14px 0 0 14px;vertical-align:top}
.w-vision{left:142px;top:108px;font-family:var(--font-vision);font-weight:700;font-size:56px;letter-spacing:.5px}
.w-vision .spk-b{width:26px;height:27px;margin:-26px 8px 0 0}
.w-forward{left:100px;top:200px;font-family:var(--font-forward);font-weight:500;color:#f1f0f4;font-size:64px;letter-spacing:-1.5px}
.w-forward .f1,.w-forward .f2{font-size:62px;letter-spacing:-1px}
.w-forward .f3{font-size:82px;letter-spacing:-2.5px}
.w-forward .f4{font-size:62px}
.w-forward .spk-c{width:26px;height:27px;margin:-58px 0 0 -10px}
.w-forever{left:117px;top:338px;font-family:var(--font-forever);font-size:60px;letter-spacing:2px}
.forever-img{display:block;width:3.9em;max-width:none;height:auto;margin:-.07em 0 0 -.17em;filter:drop-shadow(0 0 10px rgba(255,190,40,.18))}
.hero-words .spk-cyan{left:-14px;top:128px;width:18px;height:19px}
.hero-words .spk-big{left:-62px;top:368px;width:70px;height:73px}
.hero-words .spk-d{left:200px;top:410px;width:34px;height:35px}

/* ---------- wave divider (tiled, never stretched) ---------- */
.wave{position:relative;z-index:6;height:150px;margin:-28px 0 -44px;pointer-events:none;
  background:url(assets/wave-tile.png) repeat-x left top / 295px 150px;
  background-image:image-set(url(assets/wave-tile.webp) type("image/webp") 1x,url(assets/wave-tile@2x.webp) type("image/webp") 2x,url(assets/wave-tile.png) 1x,url(assets/wave-tile@2x.png) 2x)}

/* ---------- 3. DXi band ---------- */
.band-section{position:relative;z-index:4;padding:0 30px 0 0}
.band{display:flex;align-items:center;min-height:140px;padding:14px 0 0}
.band-seal{flex:none;margin-left:134px;width:246px}
.band-seal img{width:100%;height:auto}
.band-about{flex:1 1 auto;text-align:right;font-family:var(--font-type);font-size:21.5px;line-height:23px;color:#ecebf0;padding:22px 46px 0 20px}
.band-services{flex:none;align-self:stretch;border-left:1px solid #2a2f6a;margin:8px 0 6px;padding:2px 0 0 17px;display:flex;flex-direction:column;justify-content:space-between;width:222px}
.band-services li{display:flex;align-items:center;gap:16px;font-size:12.5px;font-weight:500;white-space:nowrap}
.band-services svg{width:22px;height:22px;flex:none}
.svc-purple{color:#c03cff}
.svc-cyan{color:#13d8ea}
.svc-yellow{color:#dcf53c}
.svc-orange{color:#ff5e1a}
.btn-visit{flex:none;margin-left:auto;height:36px;width:175px;font-size:15.5px;gap:18px;position:relative;top:-6px}
.br-d{display:inline}

/* ---------- 4. aliases ---------- */
.aliases{padding:4px 13px 14px}
.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;align-items:stretch}
.card{position:relative;display:flex;flex-direction:column;border:1px solid var(--bd);border-radius:11px;overflow:hidden;overflow:clip;background:var(--cbg);isolation:isolate}
.card-willy{--bd:#5a5056;--cbg:#0b0807;--pos:50% 50%}
.card-glitch{--bd:#2c3f7a;--cbg:#04020c;--pos:50% 50%}
.card-discursive{--bd:#4b5d4b;--cbg:#060509;--pos:50% 50%}
.card-revisionated{--bd:#5b3a86;--cbg:#07040e;--pos:50% 50%}
.card-ph8th{--bd:#7d6330;--cbg:#070708;--pos:50% 50%}
.card-art picture{display:contents}
.card-art .card-poster{display:none}
@media (prefers-reduced-motion:reduce){.card-art .card-video{display:none}.card-art .card-poster{display:block}.card:hover .card-bg{transform:none}}
.card-art{position:relative;aspect-ratio:1.645/1;overflow:hidden}
.card-art::after{content:"";position:absolute;inset:auto 0 0;height:8%;background:linear-gradient(180deg,transparent,var(--cbg));pointer-events:none}
.card-bg{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos);transition:transform .5s ease}
.card:hover .card-bg{transform:scale(1.02)}
.card-body{flex:1;display:flex;flex-direction:column;padding:12px 18px 14px}
.card-genre{font-family:var(--font-body);font-weight:600;font-size:11px;letter-spacing:2.4px;color:#eceef4;line-height:14px;margin-left:1px}
.card-copy{font-size:14.6px;line-height:15.4px;color:#f1f2f6;margin-top:6px;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.card-copy > span{display:block}
/* per-card copy from the comp */
.copy-willy{align-self:flex-start;font-family:var(--font-type);font-size:13px;line-height:16px;border:1.5px solid #e9e9ee;padding:5px 8px 5px 7px;margin:4px 0 0 -12px;color:#f2f1ee}
.copy-willy .big{font-size:17px;line-height:21px;margin-top:3px}
.copy-glitch{position:relative;z-index:2;font-family:var(--font-type);text-align:center;font-size:13.5px;line-height:17px;margin-top:-30px}
.copy-glitch > span + span{margin-top:9px}
.copy-glitch .big{font-size:19.5px;line-height:23px;margin-top:7px}
.copy-rev{font-family:var(--font-type);text-align:center;font-size:12px;line-height:14.5px;margin-top:6px;padding:0 17%}
.copy-rev .big{font-family:var(--font-slab);font-size:19px;line-height:24px;letter-spacing:1px;margin-top:1px;color:#f4f2ee}
.card-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;margin-top:auto;padding-top:12px}
.btn-learn{height:33px;width:152px;padding:0;font-size:13.6px;gap:26px;margin-left:-1px}
.btn-learn .ico-arrow{width:17px;height:17px}
.card-tags{flex:1 0 100%;font-family:var(--font-body);font-weight:600;font-size:8.8px;letter-spacing:1.3px;color:#dfe1ea;margin:0;white-space:normal;line-height:1.6}
.card-discursive .card-tags{letter-spacing:1.05px}
.card-discursive .card-tags i{margin:0 5px 0 4px}
.card-tags i{font-style:normal;margin:0 6px 0 5px}
.copy-ph8th{font-family:var(--font-type);font-size:13.5px;line-height:17px;margin-top:7px}
.copy-ph8th .big{font-size:20px;line-height:24px;margin-top:5px;color:#e9c46a}

/* ---------- 5. footer ---------- */
.site-footer{background:var(--bg-2);border-top:1px solid #1b2a52}
.footer-inner{height:64px;display:flex;align-items:center;padding:0 14px 0 38px}
.copyright{position:absolute;left:50%;transform:translateX(-62%);font-size:12px;color:#c7cadb;white-space:nowrap}
.legal{margin-left:auto;display:flex;align-items:center;font-size:11.2px;color:#c7cadb}
.legal span{margin:0 15px;color:#6f7590}
.legal a:hover{color:var(--lime)}
.socials{display:flex;align-items:center;gap:10px;margin-left:34px}
.socials a{display:block;transition:transform .2s ease,filter .2s ease}
.socials a:hover{transform:translateY(-2px) scale(1.06);filter:drop-shadow(0 0 8px rgba(255,120,60,.55))}
.socials img{height:54px;width:auto}

/* =========================================================
   Responsive
   ========================================================= */
@media (min-width:1441px){
  .hero{background:radial-gradient(ellipse at 50% 50%,#050722 0%,var(--bg) 70%)}
}
@media (max-width:860px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards > .card:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc(50% - 6.5px)}
  .hero-words{transform:scale(.74)}
  .band{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:22px 32px;padding:44px 24px 20px}
  .band-seal{margin-left:0;width:200px}
  .band-about{padding:0}
  .band-services{margin:0;align-self:auto;width:auto;gap:10px;border-left:0;border-top:1px solid #2a2f6a;padding:16px 0 0}
  .btn-visit{margin-left:auto;top:0;align-self:end}
}
@media (max-width:860px){
  .br-d{display:none}
  .hero-inner{height:auto;display:flex;flex-direction:column}
  .hero-copy{width:auto;padding:24px 24px 0;top:0}
  .hero-art{position:relative;order:2;left:auto;right:auto;top:auto;width:100%;height:auto;margin-top:8px}
  .hero-art .hero-img{position:relative;left:auto;top:auto;display:block;width:100%;max-width:640px;height:auto;margin:0 auto}
  .hero-words{position:relative;order:3;left:auto;right:auto;top:auto;transform:none;width:auto;height:auto;
    display:grid;justify-items:center;gap:6px;padding:0 24px 60px;text-align:center}
  .w{position:relative;left:auto;top:auto}
  .hero-words .spk-cyan,.hero-words .spk-big,.hero-words .spk-d{display:none}
  .w-sound{font-size:44px}.w-vision{font-size:42px}.w-forever{font-size:56px}
  .w-forward{font-size:70px}
  .w-forward .spk-c{margin-top:-50px}
  .footer-inner{height:auto;flex-wrap:wrap;gap:14px 24px;padding:18px 24px;justify-content:center}
  .copyright{position:static;transform:none;order:4;width:100%;text-align:center}
  .legal{margin-left:0}
  .socials{margin-left:0}
}
@media (max-width:760px){
  .header-inner{padding:0 16px;height:64px}
  .nav-logo img{height:44px}
  .top-nav{font-size:14.5px}
  .top-nav{gap:20px}
  .top-home{margin-left:2px}
  .top-home img{height:28px}
  .hero-copy{padding:18px 18px 0}
  .kicker{font-size:16px}
  .hooby{height:auto;margin:6px 0 -4px -16px}
  .hooby-img{position:static;display:block;width:min(108%,440px);margin:-6px 0 -22px}
  .spk-hooby{left:auto;right:4px;top:-8px;width:32px;height:34px}
  .tagline{font-size:clamp(34px,10.4vw,52px);line-height:1;letter-spacing:-.04em;margin-top:2px}
  .hero-text{font-size:16px;line-height:1.4;max-width:none}
  .hero-actions{margin-top:18px;flex-wrap:wrap;gap:12px}
  .btn-radio{width:auto;padding:0 22px;height:44px;flex:1 1 auto}
  .follow{height:44px}
  .follow-icons img{height:34px}
  .hero-art{margin-top:0}
  .hero-art .hero-img{aspect-ratio:1/.86;object-fit:cover;object-position:50% 30%}
  .hero-words{padding:0 18px 66px;gap:2px}
  .w-sound{font-size:36px}.w-vision{font-size:34px}.w-forever{font-size:46px}
  .w-sound .spk-a{width:40px;height:42px;margin:-8px 0 0 10px}
  .w-forward{font-size:56px}
  .w-forward .spk-c{width:20px;height:21px;margin-top:-40px}
  .wave{height:90px;margin:-30px 0 -24px;background-size:177px 90px}
  .band{display:flex;flex-direction:column;align-items:stretch;text-align:center;padding:34px 18px 20px;gap:20px}
  .band-seal{width:200px;align-self:center}
  .band-about{text-align:center;flex:none;font-size:19px;line-height:1.3}
  .band-services{border-left:0;border-top:1px solid #2a2f6a;padding:16px 0 0;flex:none;align-self:stretch}
  .btn-visit{width:100%;height:44px}
  .band-section{padding:0}
  .aliases{padding:8px 14px 18px}
  .card-copy{font-size:15px;line-height:1.3}
  .copy-willy{margin-left:-4px}
  .copy-glitch{margin-top:-18px}
  .card-foot{gap:14px}
  .copy-rev{padding:0 6%}
  .btn-learn{height:40px}
  .card-tags{font-size:9.5px}
  .legal span{margin:0 10px}
  .socials{gap:8px}
  .socials img{height:42px}
}
@media (max-width:640px){
  .cards{grid-template-columns:minmax(0,1fr);max-width:600px;margin:0 auto}
  .cards > .card:last-child:nth-child(odd){width:auto;justify-self:stretch}
}
@media (max-width:380px){
  .top-nav{font-size:13.5px}
  .top-nav{gap:14px}
  .top-home{margin-left:0}
}

.hero-video{aspect-ratio:1/1;background:transparent}