:root{--ink:#222;--brand:#6a4bc2;--bg:#fafafa;--card:#fff;--pastel:#fff4e3}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:#fafafa;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none}a:hover{opacity:.85}
.container{width:100%;max-width:1100px;margin:0 auto;padding:0 20px}.narrow{max-width:800px}
/* Header base */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #eee}
.header-inner{display:flex;align-items:center;gap:16px;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--brand)}
.brand .brand-mark{width:36px;height:36px}
.brand-name{font-weight:800;letter-spacing:-0.3px}
.nav{display:flex;gap:14px;align-items:center}
.nav-toggle{display:none;border:1px solid #e6e6e6;background:#fff;border-radius:10px;padding:8px 10px;font-size:18px;line-height:1}
/* Hero */
.hero{padding:40px 0 24px}
.hero-lines{ color:var(--brand); font-weight:800; letter-spacing:-0.5px; line-height:1.05; font-size:56px; margin:0 }
.hero-lines .line-2,.hero-lines .line-3{ color:#9C7DF0 }
.mascot img{max-width:420px}
/* Sections */
.about,.stories,.support,.newsletter{padding:28px 0}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sec-actions{display:flex;align-items:center;gap:8px}.search{border:1px solid #e6e6e6;border-radius:10px;padding:10px 12px;min-width:220px}
.grid{display:grid;grid-template-columns:1fr;gap:16px}
.card{background:var(--card);border:1px solid #eee;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px}
iframe.spotify{border-radius:12px;border:0;width:100%;height:180px}
.more-wrap{display:flex;justify-content:center;margin-top:8px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;border:1px solid #e6e6e6;background:#fff;color:var(--ink);font-weight:600}
.btn-coffee{background:#BD5FFF;border-color:#BD5FFF;color:#fff}
.site-footer{border-top:1px solid #eee;padding:20px 0;background:#fff}
.footer-grid{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.footer-nav a{margin-left:16px}.site-footer .brand{color:var(--brand)}
/* Newsletter layout */
.newsletter-grid{display:grid;grid-template-columns:220px 1fr;gap:22px;align-items:center}
.pastel{background:var(--pastel);border:1px solid #f1d6ab;border-radius:14px;padding:22px}
/* Mobile polish */
@media (max-width: 768px){
  .header-inner{gap:10px}
  .brand .brand-mark{width:30px;height:30px}
  .brand-name{font-size:16px}
  .nav-toggle{display:inline-flex}
  .nav{
    position:absolute;left:0;right:0;top:60px;
    display:none;flex-direction:column;gap:0;
    background:#fff;border-bottom:1px solid #eee
  }
  .nav a{padding:12px 20px;border-top:1px solid #f2f2f2}
  .nav.nav--open{display:flex}
  .hero-lines{font-size:28px;line-height:1.08}
  .mascot img{max-width:32vw}
  .about,.stories,.support,.newsletter{padding:20px 0}
  .sec-head{margin-bottom:8px}
  .pastel{padding:18px}
}