/* --- A LITTLE THROUPLE TEA — Tropical Dark Theme --- */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&display=swap');

/* Color tokens pulled from cover art */
:root {
  --ink:#eaf7ff;
  --ink-strong:#ffffff;
  --muted:#9fd6d6;

  --bg-dark:#0e3441;
  --bg-deeper:#072129;
  --sea:#18a5a6;
  --leaf:#1d8b4a;
  --sun:#ff7a1a;
  --sun-soft:#ffc247;

  --card:#0f3b46;
  --card-border:#155e6e;
  --radius:16px;
  --radius-lg:24px;
  --shadow:0 10px 28px rgba(0,0,0,.35);
  --shadow-strong:0 16px 40px rgba(0,0,0,.5);
}

* { box-sizing:border-box }
html,body { margin:0; padding:0 }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(255,122,26,.18), transparent),
    linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-deeper) 70%);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Layout */
.wrap { max-width:1100px; margin:0 auto; padding:0 20px }

/* Header */
.site-header {
  position:sticky; top:0; z-index:30;
  background:linear-gradient(180deg, rgba(7,33,41,.85), rgba(7,33,41,.65));
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid rgba(24,165,166,.25);
}
.site-header .wrap { display:flex; align-items:center; justify-content:space-between; height:66px }
.brand img { height:44px; display:block }
.nav a {
  margin-left:18px; text-decoration:none;
  color:var(--ink); font-weight:800; letter-spacing:.2px;
}
.nav a:hover { color:var(--sun); text-shadow:0 0 12px rgba(255,122,26,.35) }

/* Hero */
.hero { position:relative; min-height:66vh; display:grid; place-items:center; overflow:hidden }
.hero::before {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(7,33,41,.30), rgba(7,33,41,.75)),
    url("images/hero-art.jpg");
  background-size:cover; background-position:center;
  filter:saturate(110%);
  animation: heroShift 18s ease-in-out infinite alternate;
}
@keyframes heroShift {
  from{ background-position:center top }
  to{   background-position:center bottom }
}
.hero .wrap { position:relative; text-align:center; padding:72px 0 }
.hero h1 {
  margin:0 0 8px;
  font-size:clamp(2.2rem, 2.6vw + 2.2rem, 4.4rem);
  line-height:1.05;
  color:var(--ink-strong);
  text-shadow:0 6px 24px rgba(0,0,0,.35);
  font-family:'Baloo 2', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
  letter-spacing:.5px;
}
.subtitle,.tag { color:var(--ink); opacity:.95 }
.tag { margin:2px 0 18px; font-weight:700 }
.cta-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:999px; border:2px solid transparent;
  text-decoration:none; font-weight:900; letter-spacing:.2px; box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn.primary { background:var(--sun); color:#1b0d04 }
.btn.primary:hover { transform:translateY(-1px); box-shadow:var(--shadow-strong); filter:brightness(1.05) }
.btn { background:transparent; color:var(--ink); border-color:rgba(234,247,255,.5) }
.btn:hover { border-color:var(--sun); color:var(--ink-strong) }

/* Trailer */
.player { margin-top:22px; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:#000; box-shadow:var(--shadow) }
.player iframe { width:100%; height:100%; border:0 }

/* Sections */
section { scroll-margin-top:86px }
.listen { padding:60px 0; background:
  radial-gradient(800px 300px at 8% 0%, rgba(24,165,166,.08), transparent),
  linear-gradient(180deg, transparent, rgba(24,165,166,.08)) }
.about { padding:60px 0 }
.hosts { padding:60px 0; background:
  radial-gradient(800px 300px at 92% 0%, rgba(29,139,74,.10), transparent),
  linear-gradient(180deg, rgba(29,139,74,.08), transparent) }
.subscribe { padding:60px 0 }

.listen h2,.about h2,.hosts h2,.subscribe h2 {
  font-size:2rem; margin:0 0 16px; color:var(--sun-soft);
  font-family:'Baloo 2', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
  letter-spacing:.3px;
}

/* Platform cards */
.platforms { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px }
.card {
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  padding:16px; display:flex; align-items:center; gap:12px;
  text-decoration:none; color:var(--ink);
  box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card img { height:28px; filter:brightness(1.1) saturate(1.2) }
.card span { font-weight:800 }
.card:hover { border-color:var(--sun); transform:translateY(-2px); box-shadow:var(--shadow-strong) }

/* About grid */
.grid { display:grid; gap:24px; grid-template-columns:1.2fr .8fr }
.bullets { padding-left:18px }
.bullets li { margin:6px 0 }
.soft {
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius-lg);
  padding:18px;
  box-shadow:var(--shadow);
}
.note { color:var(--muted); margin-top:10px }

/* Hosts */
.host-grid { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
.host-card {
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius-lg);
  padding:16px; text-align:center;
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease;
}
.host-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-strong) }
.host-card img { width:100%; height:240px; object-fit:cover; border-radius:12px; display:block }
.host-card h3 {
  color:var(--sun-soft); margin:.5rem 0 .25rem;
  font-family:'Baloo 2', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
  letter-spacing:.2px;
}

/* Subscribe */
.inline-form { display:flex; gap:10px; flex-wrap:wrap }
.inline-form input {
  flex:1; min-width:220px; padding:12px 14px;
  color:#eaf7ff; background:#0b2a33; border:1px solid var(--card-border); border-radius:10px;
}
.inline-form input::placeholder { color:#8fb4b8 }
.inline-form button { cursor:pointer }
.social { margin-top:12px; display:flex; gap:14px; flex-wrap:wrap }
.social a { text-decoration:none; color:var(--sea); font-weight:900 }
.social a:hover { color:var(--sun); text-shadow:0 0 10px rgba(255,122,26,.35) }

/* Success message */
.subscribe-success {
  margin-top: 1rem; padding: 1rem;
  border-radius: 12px;
  background: #ecfdf5; color: #065f46; font-weight: 600;
}

/* Footer */
.site-footer {
  padding:24px 0; border-top:1px solid var(--card-border);
  color:var(--muted); background:#071c22; text-align:center;
}

/* Small screens */
@media (max-width: 860px){
  .grid { grid-template-columns:1fr }
  .hero { min-height:58vh }
  .inline-form { flex-direction:column; align-items:stretch }
  .inline-form .btn { width:100% }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}