/* Clean theme (A): bright + blush accents, lots of whitespace */

:root{
  --bg: #fff7fb;
  --surface: rgba(255,255,255,.78);
  --surface-2: rgba(255,255,255,.62);
  --stroke: rgba(27,16,32,.10);
  --stroke-2: rgba(27,16,32,.14);
  --text: #1b1020;
  --muted: rgba(27,16,32,.68);
}

body{
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 15% 0%, rgba(255,221,242,.55) 0%, rgba(255,221,242,0) 58%),
    radial-gradient(900px 600px at 90% 10%, rgba(255,246,209,.55) 0%, rgba(255,246,209,0) 55%),
    linear-gradient(180deg, var(--bg) 0%, #ffffff 60%, #ffffff 100%);
}

.card{
  background: var(--surface);
  border: 1px solid var(--stroke);
}

.hero-clean{
  padding: 34px 0 10px;
}

.hero-clean .hero-inner{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 900px){
  .hero-clean .hero-inner{ grid-template-columns: 1fr; }
}

.brandline{
  display:flex;
  align-items:center;
  gap: 12px;
}

.brandline img{
  width: 72px;
  height: 72px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid var(--stroke);
  box-shadow: 0 18px 40px rgba(27,16,32,.10);
}

.hero-title{
  margin: 12px 0 10px;
  font-size: clamp(34px, 4.1vw, 56px);
  letter-spacing: -0.03em;
}

.hero-kicker{ color: var(--muted); font-weight: 800; }

.host-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}

@media (max-width: 700px){
  .host-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.host-card{
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 10px;
  text-align:center;
}

.host-card img{
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--stroke);
}

.host-name{ display:block; margin-top: 8px; font-weight: 900; color: var(--text); }

/* chips for episodes page */
.chip{
  appearance:none;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.65);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 800;
  cursor: pointer;
}

.chip.active{
  border-color: rgba(176,53,119,.35);
  background: rgba(255,221,242,.65);
}