*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f6f1e7;color:#261d14;font-family:Georgia,'Times New Roman',serif}
.homepage{width:min(100%,1672px);margin:0 auto;overflow:hidden}
.hero{position:relative;width:100%;aspect-ratio:1672/501;overflow:hidden;line-height:0}
.hero-image{position:absolute;top:0;left:0;display:block;width:100%;height:auto}
.hero-hot{position:absolute;display:block;background:transparent;border:0;cursor:pointer;padding:0;z-index:2}
.hero-hot.home{left:33.2%;top:2.07%;width:4.5%;height:9.8%}
.hero-hot.music{left:39%;top:2.07%;width:5%;height:9.8%}
.hero-hot.about{left:45%;top:2.07%;width:5%;height:9.8%}
.hero-hot.licensing{left:51.2%;top:2.07%;width:6.5%;height:9.8%}
.hero-hot.projects{left:58.5%;top:2.07%;width:6%;height:9.8%}
.hero-hot.blog{left:65%;top:2.07%;width:5.5%;height:9.8%}
.hero-hot.contact{left:70.7%;top:2.07%;width:6%;height:9.8%}
.hero-hot.listen{left:23.4%;top:66.9%;width:15.1%;height:12.6%}
.hero-hot.licensebtn{left:39.8%;top:66.9%;width:18.5%;height:12.6%}
.hero-hot:focus-visible{outline:2px solid #b67b20;outline-offset:2px;border-radius:8px}

.primary-categories{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;gap:18px;padding:34px 5.2% 24px;background:#fffdf8;text-align:center}
.primary-categories a{display:flex;min-width:0;flex-direction:column;align-items:center;gap:7px;color:#8b5d1d;text-decoration:none;line-height:1.15}
.primary-categories strong{font-size:clamp(12px,.95vw,16px);font-weight:400;letter-spacing:.045em}
.primary-categories span{color:#4c4030;font-size:clamp(12px,.9vw,15px)}
.genre-categories{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px clamp(18px,3vw,48px);padding:20px 5% 48px;background:#fffdf8}
.genre-categories a{color:#927143;text-decoration:none;font-size:13px;line-height:1.5;white-space:nowrap}
.genre-categories a span{margin-left:5px;color:#786b59;font-size:12px}
.primary-categories a:hover,.genre-categories a:hover{color:#b17821}

.featured-section{padding:10px 5.2% 82px;background:#fffdf8}
.featured-section h1{margin:0 0 25px;font-size:clamp(22px,1.65vw,29px);font-weight:400;line-height:1.25}
.featured-section h1 span{margin-left:8px;color:#8a795e;font-size:.72em}
.featured-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.15vw,36px)}
.featured-card{min-width:0;margin:0;padding:0}
.featured-cover{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#eee5d6}
.featured-card h2{display:-webkit-box;min-height:2.7em;margin:12px 0 0;overflow:hidden;color:#261d14;font-size:clamp(15px,1.12vw,19px);font-weight:400;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}
.about-art{display:block;width:100%;aspect-ratio:1672/121;background-image:url('assets/jqmusic-home-edited.png');background-position:center bottom;background-repeat:no-repeat;background-size:100% auto}
.about-mobile{display:none}

#toast{position:fixed;left:50%;bottom:24px;z-index:10;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:11px 18px;border-radius:999px;background:rgba(25,20,15,.92);color:#fff;font:15px/1.3 system-ui,sans-serif;transition:.2s}
#toast.show{transform:translate(-50%,0);opacity:1}
.now-playing{position:fixed;left:50%;bottom:18px;z-index:20;display:flex;width:min(760px,calc(100vw - 28px));align-items:center;gap:14px;padding:12px 16px;transform:translate(-50%,140%);border:1px solid rgba(155,105,29,.35);border-radius:18px;background:rgba(255,252,246,.97);box-shadow:0 10px 35px rgba(50,35,18,.22);color:#21180f;font-family:Georgia,'Times New Roman',serif;line-height:1.2;transition:.28s ease}
.now-playing.show{transform:translate(-50%,0)}
.now-playing button{width:38px;height:38px;border:0;border-radius:50%;background:#ad761e;color:#fff;font-size:16px;cursor:pointer}
.now-playing #closePlayer{background:transparent;color:#6e512d;font-size:26px}
.now-playing strong{display:block;font-size:18px}
.now-playing span{display:block;margin-top:2px;color:#7b6a55;font-size:12px}
.progress{display:grid;flex:1;grid-template-columns:38px 1fr 38px;align-items:center;gap:8px}
.progress span{margin:0;text-align:center}
.progress input{width:100%;accent-color:#ad761e}

@media(max-width:700px){
  .hero{width:100%;height:100.2vw;aspect-ratio:auto}
  .hero-image{left:-39vw;width:178vw;max-width:none}
  .hero-hot{display:none}
  .primary-categories{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;padding:28px 7% 22px}
  .primary-categories a:last-child{grid-column:1/-1}
  .primary-categories strong{font-size:12px}
  .primary-categories span{font-size:12px}
  .genre-categories{gap:10px 16px;padding:20px 6% 38px}
  .genre-categories a{font-size:11px}
  .genre-categories a span{font-size:10px}
  .featured-section{padding:6px 6% 52px}
  .featured-section h1{margin-bottom:20px;font-size:23px}
  .featured-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}
  .featured-card h2{min-height:2.7em;margin-top:9px;font-size:15px}
  .about-art{display:none}
  .about-mobile{display:block;padding:26px 6% 34px;background:#efe6d7}
  .about-mobile a{display:flex;justify-content:space-between;align-items:center;gap:14px;color:#79551f;text-decoration:none;font-size:14px;line-height:1.5}
  .about-mobile a span{flex:none;font-size:12px}
  .now-playing{gap:9px;padding:10px 12px}
  .now-playing strong{font-size:16px}
  .progress{display:none}
}