/* =====================================================================
   YOUR THEME — edit these to recolor / rebrand the whole site at once.
   Light "magical girl" palette: pale pink + periwinkle, with your
   orange / green / blue kept as the accent pops. ✧･ﾟ
   ===================================================================== */
:root{
  /* --- Surface (light) --- */
  --bg:        #fae096;   /* page background (green)          */
  --card:      #ffffff;   /* cards & panels                        */
  --card-soft: #fff7fc;   /* secondary panels                      */
  --ink:       #314e29;   /* main text (bluer-toned plum)          */
  --muted:     #80a243;   /* secondary text                        */
  --line:      #f6d7e8;   /* soft pink borders                     */
  --line-2:    #e6dffb;   /* soft lavender borders                 */

  /* --- Accents --- */
  --primary:   #ff8e1f;   /* orange  — buttons, eyebrows           */
  --secondary: #96c98d;   /* green   — badges / tags               */
  --blue:      #7df5f2;   /* blue    — sparkles, glows, hovers      */
  --pink:      #ff9ecb;   /* pink    — decoration, the brand dot    */
  --lavender:  #b8adff;   /* periwinkle — soft "bluer purple"       */
  --link:      #7b5ce0;   /* readable periwinkle for links         */
  --live:      #ff6b9d;   /* "live now" pink                       */

  /* --- Type --- */
  --display: "Baloo 2", system-ui, sans-serif;
  --body:    "Nunito", system-ui, sans-serif;

  /* --- Shape & softness --- */
  --radius: 22px;
  --radius-sm: 15px;
  --maxw: 1080px;
  --shadow:    0 10px 26px rgba(255,142,196,.20);
  --shadow-sm: 0 6px 16px rgba(184,173,255,.18);
}

/* =====================================================================
   Base
   ===================================================================== */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:
    radial-gradient(720px 420px at 8% -6%,  rgba(255,158,203,.40), transparent 60%),
    radial-gradient(680px 420px at 100% 0%, rgba(184,173,255,.38), transparent 58%),
    radial-gradient(620px 460px at 60% 110%,rgba(125,245,242,.30), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  cursor:url('cursor.png') 13 13, auto;
}
a, button, .btn, .link-card, .nav-toggle, label, summary{
  cursor:url('cursor-pointer.png') 16 14, pointer;
}
img{ max-width:100%; display:block; }
a{ color:var(--link); text-decoration:none; font-weight:700; }
a:hover{ text-decoration:underline; text-decoration-color:var(--blue); text-decoration-thickness:2px; }

h1,h2,h3{ font-family:var(--display); line-height:1.15; margin:0 0 .4em; font-weight:700; color:var(--ink); }
h1{ font-size:clamp(2.1rem, 5vw, 3.4rem); }
h2{ font-size:clamp(1.5rem, 3.2vw, 2.1rem); }
h3{ font-size:1.2rem; }
p{ margin:0 0 1rem; }
.muted{ color:var(--muted); }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px; }

/* Eyebrow — soft candy pill */
.eyebrow{
  display:inline-block; font-family:var(--display); font-weight:700;
  font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  color:#d9690a; margin-bottom:.6rem;
  padding:.3em .85em; border:2px solid var(--line); border-radius:999px;
  background:#fff3e6; box-shadow:var(--shadow-sm);
}

/* =====================================================================
   Header / nav  (same markup on every page)
   ===================================================================== */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.78); backdrop-filter:blur(12px);
  border-bottom:2px solid var(--line);
  box-shadow:0 6px 18px rgba(255,158,203,.16);
}
.head-inner{ display:flex; align-items:center; gap:18px; padding:12px 22px; max-width:var(--maxw); margin:0 auto; }
.brand{ font-family:var(--display); font-weight:800; font-size:1.3rem; color:var(--ink); text-decoration:none; white-space:nowrap; }
.brand .dot{ color:var(--pink); }

/* status pill */
.status{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.82rem; color:var(--muted); font-weight:700;
  padding:.32em .85em; border:2px solid var(--line); border-radius:999px;
  background:#fff;
}
.status .led{ width:9px; height:9px; border-radius:50%; background:var(--muted); }
.status.is-live{ color:#c23a6b; border-color:var(--live); background:#fff0f5; }
.status.is-live .led{ background:var(--live); box-shadow:0 0 0 0 rgba(255,107,157,.6); animation:pulse 1.8s infinite; }

nav.main{ margin-left:auto; }
nav.main ul{ display:flex; gap:4px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
nav.main a{
  display:block; color:var(--muted); font-weight:800; font-size:.92rem;
  padding:.45em .75em; border-radius:999px; text-decoration:none;
}
nav.main a:hover{ color:var(--ink); background:#ffe9f3; text-decoration:none; }
nav.main a.active{ color:#fff; background:var(--pink); }

.nav-toggle{
  display:none; margin-left:auto; background:#fff; color:var(--ink);
  border:2px solid var(--line); border-radius:999px; padding:.45em .9em;
  font-family:var(--display); font-weight:800;
}

/* =====================================================================
   Layout pieces
   ===================================================================== */
.section{ padding:56px 0; }
.section.tight{ padding:34px 0; }
.page-head{ padding:48px 0 8px; }

/* Hero */
.hero{ position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding:54px 0 40px; }
.hero .lead{ font-size:1.15rem; color:var(--muted); max-width:46ch; }
.sparkle{ position:absolute; pointer-events:none; font-size:1.6rem; color:var(--lavender); opacity:.8; animation:twinkle 3s ease-in-out infinite; }
.sparkle.s1{ top:6%;  left:42%; color:var(--pink); }
.sparkle.s2{ top:60%; left:2%;  color:var(--blue); animation-delay:.6s; font-size:1.2rem; }
.sparkle.s3{ top:18%; right:2%; color:var(--lavender); animation-delay:1.2s; }

/* Buttons & link cards */
.btn{
  display:inline-block; font-family:var(--display); font-weight:800;
  padding:.7em 1.3em; border-radius:999px; border:2px solid transparent;
  box-shadow:var(--shadow-sm);
}
.btn-primary{ background:var(--primary); color:#5a2c00; border-color:#ffd9a8; }
.btn-primary:hover{ filter:brightness(1.04); transform:translateY(-2px); text-decoration:none; }
.btn-ghost{ background:#fff; color:var(--ink); border-color:var(--pink); }
.btn-ghost:hover{ background:#ffeef6; transform:translateY(-2px); text-decoration:none; }

.links{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-top:6px; }
.link-card{
  display:flex; align-items:center; gap:12px;
  background:var(--card); border:2px solid var(--line); border-radius:var(--radius-sm);
  padding:14px 16px; color:var(--ink); text-decoration:none; font-weight:800;
  box-shadow:var(--shadow-sm);
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.link-card:hover{ transform:translateY(-4px); border-color:var(--pink); box-shadow:var(--shadow); text-decoration:none; }
.link-card .ico{ font-size:1.3rem; }
.link-card small{ display:block; color:var(--muted); font-weight:700; }

/* Cards / panels */
.panel{ background:var(--card); border:2px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-sm); }
.grid{ display:grid; gap:18px; }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-auto{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }

/* Image frames + placeholders */
.frame{ border-radius:var(--radius); overflow:hidden; border:2px solid var(--line); background:var(--card); box-shadow:var(--shadow-sm); }
.frame img{ width:100%; height:100%; object-fit:cover; }
.ph{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:
    repeating-linear-gradient(135deg, rgba(255,158,203,.22) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, #fff0f7, #f1ecff);
  color:#a193c4; font-family:var(--display); font-weight:800; padding:24px; min-height:160px;
}
.ph.portrait{ aspect-ratio:3/4; }
.ph.square{ aspect-ratio:1/1; }
.ph.wide{ aspect-ratio:16/9; }

/* Member cards */
.member{ background:var(--card); border:2px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.member .body{ padding:16px 18px; }
.member h3{ margin-bottom:.35em; }
.member .role{
  display:inline-block; font-weight:800; font-size:.8rem; color:#3f7a47;
  background:#eaf6e6; border:2px solid #cfe9c8; border-radius:999px; padding:.15em .7em;
}

/* Responsive embeds */
.embed{ position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; border:2px solid var(--line); background:#efe9ff; box-shadow:var(--shadow-sm); }
.embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.embed.tall{ aspect-ratio:auto; height:480px; }
.embed.audio{ aspect-ratio:auto; height:166px; }

/* Live page */
.live-wrap{ display:grid; grid-template-columns:1fr 340px; gap:18px; }
.live-wrap .embed.chat{ aspect-ratio:auto; height:100%; min-height:420px; }

/* Schedule table */
.sched{ width:100%; border-collapse:separate; border-spacing:0; background:var(--card); border:2px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.sched th, .sched td{ padding:14px 16px; text-align:left; border-bottom:2px solid var(--line); }
.sched th{ font-family:var(--display); color:#c23a6b; background:#fff5fa; width:140px; }
.sched tr:last-child td, .sched tr:last-child th{ border-bottom:0; }
.sched td .off{ color:var(--muted); }

/* Forms */
.field{ margin-bottom:16px; }
.field label{ display:block; font-weight:800; margin-bottom:6px; }
.field input, .field textarea{
  width:100%; padding:12px 14px; border-radius:var(--radius-sm);
  border:2px solid var(--line); background:#fff; color:var(--ink);
  font-family:var(--body); font-size:1rem;
}
.field input:focus, .field textarea:focus{ outline:3px solid var(--blue); outline-offset:1px; border-color:var(--blue); }

/* Footer */
.site-foot{ border-top:2px solid var(--line); margin-top:40px; background:rgba(255,255,255,.5); }
.foot-inner{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; padding:26px 22px; max-width:var(--maxw); margin:0 auto; color:var(--muted); font-size:.92rem; font-weight:700; }
.foot-inner a{ color:var(--link); }

/* =====================================================================
   Motion + accessibility
   ===================================================================== */
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,107,157,.6);} 70%{ box-shadow:0 0 0 8px rgba(255,107,157,0);} 100%{ box-shadow:0 0 0 0 rgba(255,107,157,0);} }
@keyframes twinkle{ 0%,100%{ transform:scale(1) rotate(0deg); opacity:.85; } 50%{ transform:scale(1.25) rotate(15deg); opacity:1; } }
:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; border-radius:6px; }

@media (max-width:820px){
  .hero{ grid-template-columns:1fr; }
  .grid.cols-2, .grid.cols-3{ grid-template-columns:1fr; }
  .live-wrap{ grid-template-columns:1fr; }
  .live-wrap .embed.chat{ min-height:380px; }
  nav.main{ display:none; width:100%; margin:0; order:3; }
  nav.main.open{ display:block; }
  nav.main ul{ flex-direction:column; gap:2px; padding-top:8px; }
  .nav-toggle{ display:inline-block; }
  .head-inner{ flex-wrap:wrap; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto !important; transition:none !important; }
}

.rules{ list-style:none; padding-left:0; margin:0; }
.rules li{ position:relative; padding:6px 0 6px 1.8em; }
.rules li::before{ content:"♡"; position:absolute; left:0; color:var(--pink); }

.rules.two-col{ columns:2; column-gap:2.5rem; }
.rules.two-col li{ break-inside:avoid; }   /* keep each ♡ line whole */
@media (max-width:560px){ .rules.two-col{ columns:1; } }