/* ===== HOME PAGE ===== */

/* Hero */
.home-hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem); }
.home-hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.35fr 1fr; gap: 3rem; align-items: center; }
.home-hero__title { font-size: clamp(2.8rem, 8vw, 6rem); line-height: .9; text-transform: uppercase; margin: 1rem 0 1.4rem; }
.home-hero__cta { display: flex; gap: .8rem; margin-top: 2rem; flex-wrap: wrap; }

.home-hero__card { position: relative; }
.mini-player { background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: 1.4rem; box-shadow: var(--sh-2); }
.mini-player__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.mini-player__art { height: 150px; border-radius: var(--r); background: var(--grad-heat); display: grid; place-items: center; margin-bottom: 1.1rem; position: relative; overflow: hidden; }
.mini-player__art .wave { height: 46px; }
.mini-player__art .wave i { background: rgba(27,15,8,.85); width: 5px; }
.mini-player h3 { font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.1; }
.mini-player p { color: var(--muted); font-size: .9rem; margin: .5rem 0 1.1rem; }

/* Stack the hero copy + player card so both are fully visible on small screens */
@media (max-width: 820px) {
  .home-hero__inner { grid-template-columns: 1fr; gap: 2.2rem; }
}

/* Explore / bento */
.explore__head { max-width: 720px; margin-bottom: 3rem; display: flex; flex-direction: column; gap: 1rem; }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(150px, auto); gap: 1rem;
  grid-template-areas:
    "ep ep merch collab"
    "ep ep merch collab"
    "serv partners about about"
    "contact contact about about"; }
.bento__episodes { grid-area: ep; } .bento__merch { grid-area: merch; }
.bento__services { grid-area: serv; } .bento__collab { grid-area: collab; }
.bento__partners { grid-area: partners; } .bento__about { grid-area: about; }
.bento__contact { grid-area: contact; }

.bento__cell {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  padding: 1.5rem; display: flex; flex-direction: column;
  transition: transform .4s var(--ease), border-color .4s;
}
.bento__cell::after { content: ""; position: absolute; inset: 0; background: var(--grad-ember); opacity: 0; transition: opacity .4s; }
.bento__cell:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.bento__cell:hover::after { opacity: 1; }
.bento__cell > * { position: relative; z-index: 1; }
.bento__icon { font-size: 1.7rem; margin-bottom: auto; }
.bento__body { margin-top: 1rem; }
.bento__tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--flame-2); }
.bento__cell h3 { font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.05; margin: .5rem 0 .5rem; }
.bento__episodes h3 { font-size: 1.7rem; }
.bento__about h3 { font-size: 1.5rem; }
.bento__cell p { color: var(--muted); font-size: .9rem; }
.bento__go { margin-top: 1rem; font-weight: 600; font-size: .88rem; color: var(--text); transition: color .25s; }
.bento__cell:hover .bento__go { color: var(--flame-2); }
.bento__episodes { background: linear-gradient(150deg, rgba(255,91,62,.14), var(--surface)); }
.bento__about { background: linear-gradient(150deg, rgba(168,92,255,.14), var(--surface)); }

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); grid-template-areas:
    "ep ep" "merch collab" "serv partners" "about about" "contact contact"; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; grid-template-areas: "ep" "merch" "collab" "serv" "partners" "about" "contact"; }
}

/* Merch teaser */
.merch-teaser__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; }
.merch-teaser__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.mt-card { background: #fff; border-radius: var(--r-lg); border: 1px solid rgba(25,16,22,.08); padding: 1.2rem; text-align: center; transition: transform .35s var(--ease), box-shadow .35s; }
.mt-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px -24px rgba(25,16,22,.3); }
.mt-card__art { border-radius: var(--r); aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 1rem; }
.mt-card__art svg { width: 70%; }
.mt-card__art .tb-shot { width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 14px 20px rgba(25,16,22,.28)); }
.mt-card h4 { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.mt-card .price { font-family: var(--mono); color: var(--flame-1); font-weight: 700; margin-top: .3rem; display: block; }
@media (max-width: 700px) { .merch-teaser__grid { grid-template-columns: 1fr 1fr; } .merch-teaser__head { flex-direction: column; align-items: flex-start; } }
@media (max-width: 440px) { .merch-teaser__grid { grid-template-columns: 1fr; } }

/* Numbers */
.numbers { background: var(--bg-2); border-block: 1px solid var(--line); }
.numbers__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.numbers__item b { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1; background: var(--grad-heat); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; }
.numbers__item span { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .6rem; display: block; }
@media (max-width: 620px) { .numbers__grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }

/* Join */
.join__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.join__form { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; }
.join__form .btn { align-self: flex-start; }
.join__note { font-family: var(--mono); font-size: .78rem; color: var(--flame-2); min-height: 1.2em; }
@media (max-width: 820px) { .join__inner { grid-template-columns: 1fr; } }