@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Poppins:wght@400;500;600;700&display=swap');
:root{--charcoal:#284449;--teal:#028E80;--mint:#9ECAB6;--terracotta:#D36E46;--linen:#DDD8C3;--yellow:#FCBB47;--cream:#F8F6EF;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:"Poppins",Arial,sans-serif;color:var(--charcoal);background:var(--cream);line-height:1.6}
.container{width:min(1080px,calc(100% - 34px));margin:auto}
.hero{background:var(--yellow);padding:24px 0 76px;border-radius:0 0 38px 38px}
.hero-inner{text-align:center}.official-logo{display:block;width:min(570px,92%);margin:0 auto 2px}
.tagline{font-size:14px;margin:2px 0 22px}h1,h2,h3{font-weight:700}h1{font-size:clamp(38px,8vw,64px);letter-spacing:-2px;line-height:1;margin:0 0 16px}h2{font-size:clamp(28px,5vw,42px);letter-spacing:-1px;line-height:1.12;margin:0 0 16px}
.intro{max-width:690px;margin:0 auto 26px;font-size:17px}.button{display:inline-block;text-decoration:none;border:0;cursor:pointer;border-radius:999px;padding:14px 22px;font-weight:700;font-size:15px}
.primary,.secondary{background:var(--charcoal);color:white}
.quick-links{margin-top:-40px;position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.quick-card{color:var(--charcoal);text-decoration:none;border-radius:22px;padding:20px 15px;box-shadow:0 10px 30px rgba(40,68,73,.10);display:flex;flex-direction:column;min-height:142px}
.quick-card span{font-size:28px}.quick-card strong{font-size:17px;margin-top:12px}.quick-card small{opacity:.72}
.teal{background:var(--teal);color:white}
.yellow{background:var(--yellow)}.mint{background:var(--mint)}.terracotta{background:#E39573}.linen{background:#ECE8DC}
.section{padding:62px 0}.eyebrow{color:var(--teal);font-size:12px;font-weight:700;letter-spacing:2px;margin-bottom:10px}.dark-eyebrow{color:var(--charcoal)}
.feature-card{border-radius:28px;padding:38px;display:grid;grid-template-columns:1.45fr .55fr;gap:30px;background:white;box-shadow:0 8px 28px rgba(40,68,73,.08)}
.pill{display:inline-block;background:var(--teal);color:white;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;margin-bottom:14px}
.info-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.info-strip div{background:var(--linen);border-radius:16px;padding:10px 14px;font-size:13px}.cake-art{font-size:150px;display:flex;align-items:center;justify-content:center}
.info-strip div.terracotta{background:var(--terracotta);color:white}
.rhythm{display:flex;align-items:stretch;justify-content:space-between;gap:8px}.rhythm-item{background:white;border-radius:20px;padding:18px 10px;text-align:center;flex:1;box-shadow:0 6px 20px rgba(40,68,73,.07)}
.rhythm .rhythm-item.teal{background:#028E80 !important;color:#284449 !important}
.rhythm .rhythm-item.linen b,.rhythm .rhythm-item.linen small{color:#284449 !important}
.rhythm-item span{font-size:27px;display:block}.rhythm-item b{display:block;font-size:14px;margin:5px 0}.rhythm-item small{font-size:11px;opacity:.65}.arrow{display:flex;align-items:center;color:var(--terracotta);font-weight:700}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}.panel{border-radius:26px;padding:34px}.prayer-panel{background:var(--linen)}.worship-panel{background:var(--yellow)}
.reveal-btn{border:0;background:var(--charcoal);color:white;border-radius:999px;padding:12px 18px;font-weight:700}.reveal{max-height:0;overflow:hidden;transition:max-height .35s ease;margin-top:10px}.reveal.open{max-height:500px}
.sensory-section{background:#e5f1ed}.sensory-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center}.sensory-card{background:white;border-radius:24px;padding:28px;box-shadow:0 8px 28px rgba(40,68,73,.08)}
.event-list{display:grid;gap:12px}.event{display:flex;align-items:center;gap:18px;background:white;border-radius:20px;padding:14px 18px}.event h3,.event p{margin:0}.event p{opacity:.68;font-size:14px}
.datebox{width:62px;min-width:62px;height:68px;background:var(--yellow);border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center}.datebox span{font-size:10px;letter-spacing:1px;font-weight:700}.datebox b{font-size:26px;line-height:1}
.faq{display:grid;gap:10px}details{background:white;border-radius:18px;padding:0 20px}summary{cursor:pointer;font-weight:700;padding:19px 0;list-style:none}summary::-webkit-details-marker{display:none}summary:after{content:"+";float:right;color:var(--terracotta);font-size:22px}details[open] summary:after{content:"–"}details>div{padding:0 0 18px;opacity:.82}
.faq details{background:#9ECAB6 !important;border:3px solid #D36E46 !important;border-radius:22px !important;overflow:hidden}
footer{padding:48px 0 32px;text-align:center}.footer-logo{width:min(430px,86%);display:block;margin:auto}footer p{margin:14px 0 0;font-size:13px}.tiny{opacity:.55}
@media(max-width:760px){
.official-logo{width:100%}
.quick-links{grid-template-columns:1fr 1fr}
.feature-card{grid-template-columns:1fr;padding:28px}
.cake-art{font-size:88px}
.rhythm{display:flex;flex-direction:column;align-items:stretch;gap:8px;overflow:visible;padding-bottom:0}
.rhythm-item{min-width:0;width:100%;padding:16px 18px;display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;text-align:left;align-items:center}
.rhythm-item span{grid-row:1/3;font-size:30px;text-align:center}
.rhythm-item b{margin:0;font-size:16px}
.rhythm-item small{font-size:12px}
.arrow{justify-content:center;transform:rotate(90deg);height:22px;font-size:22px}
.two-col,.sensory-grid{grid-template-columns:1fr}
.section{padding:48px 0}
}

.playlist-buttons{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
@media(max-width:760px){.playlist-buttons{flex-direction:column;align-items:stretch}.playlist-buttons .button{text-align:center}}
.hero-scribble {
  font-family: "Architects Daughter", cursive;
  font-size: 26px;
  font-weight: 600;
  color: #028E80;
  margin: 18px 0 0;
  transform: rotate(-2deg);
  display: inline-block;
  letter-spacing: 1px;
}

.waving-hand {
  display: inline-block;
  animation: wave 2s ease-in-out infinite;
  transform-origin: 70% 70%;
}

@keyframes wave {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(14deg); }
  40% { transform: rotate(-8deg); }
  60% { transform: rotate(14deg); }
  80% { transform: rotate(-4deg); }
}


.hero-doodles {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin: -2px 0 2px;
  font-family: "Architects Daughter", cursive;
  font-size: 24px;
  font-weight: 600;
}

.hero-doodles span:nth-child(1) {
  color: #D36E46;
  transform: rotate(-12deg);
}

.hero-doodles span:nth-child(2) {
  color: #028E80;
  font-size: 32px;
  transform: rotate(5deg);
}

.hero-doodles span:nth-child(3) {
  color: #284449;
  font-size: 30px;
}

.hero-doodles span:nth-child(4) {
  color: #D36E46;
  transform: rotate(12deg);
}



.brunch-scribble {
  display: inline-block;
  font-family: "Architects Daughter", cursive;
  font-size: 24px;
  font-weight: 600;
  color: #028E80;
  margin: 0 0 10px;
  transform: rotate(-1.5deg);
  letter-spacing: 0.5px;
}

.rhythm-scribble {
  display: inline-block;
  font-family: "Architects Daughter", cursive;
  font-size: 22px;
  font-weight: 600;
  color: #028E80;
  margin: 4px 0 20px;
  transform: rotate(-1deg);
}

.rhythm .rhythm-item:nth-child(1) {
  background: var(--yellow);
}
.rhythm .rhythm-item:nth-child(3) {
  background: var(--mint);
}
.rhythm .rhythm-item:nth-child(5) {
  background: var(--terracotta);
}
.rhythm .rhythm-item:nth-child(7) {
  background: var(--linen);
}
.rhythm .rhythm-item:nth-child(9) {
  background: var(--yellow);
}

.question-highlight {
  color: #D36E46;
  font-weight: 700;
}

.sen-scribble{
  font-family:'Architects Daughter',cursive;
  font-size:22px;
  font-weight:600;
  color:#D36E46;
  margin:28px 0 12px;
  transform:rotate(-1deg);
}

.dates-scribble{
  font-family:'Architects Daughter',cursive;
  font-size:22px;
  font-weight:600;
  color:#D36E46;
  margin:4px 0 24px;
  transform:rotate(-1deg);
}

.faq-scribble{
  font-family:'Architects Daughter',cursive;
  font-size:22px;
  font-weight:600;
  color:#D36E46;
  margin:4px 0 24px;
  transform:rotate(-1deg);
}

.footer-scribble {
  font-family: 'Architects Daughter', cursive;
  font-size: 20px;
  font-weight: 600;
  color: #FCBB47;
  margin: 14px 0 0;
  transform: rotate(-1deg);
}

.rhythm .rhythm-item.teal{background:#028E80 !important;color:#284449 !important}
.prayer-panel strong{color:#D36E46 !important}

.playful-worship{
  background:#9ECAB6 !important;
  border:3px solid #ffffff;
  border-radius:26px;
  box-shadow:0 10px 24px rgba(40,68,73,.12);
  transform:rotate(-0.5deg);
  padding-bottom: 18px !important;
}

.playful-worship::before{
  content:"♪";
  position:absolute;
  top:18px;
  right:24px;
  font-size:34px;
  color:#FCBB47;
  transform:rotate(10deg);
}

.playful-worship{
  position:relative;
}
.playful-worship .playlist-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:22px;
  margin-left:0px;
  margin-right:0px;
  width:auto;
}


.playful-worship .playlist-buttons a{
  min-height:110px;
  box-sizing:border-box;
  min-width:0;
  background:#028E80 !important;
  border:4px solid white;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space:normal;
  font-size:16px;
  padding:18px 4px;
  box-shadow:0 6px 12px rgba(40,68,73,.12);
}

.playful-worship .playlist-buttons a:first-child{
  transform:rotate(-1deg);
}

.playful-worship .playlist-buttons a:last-child{
  transform:rotate(1deg);
}
.playlist-character{
  width:120px;
  height:auto;
  object-fit:contain;
  display:block;
  margin:0 auto 10px auto;
}
.headphones-character{
  transform:rotate(-8deg);
}

.playful-worship .playlist-buttons{
  position:relative;
}

.playful-worship .playlist-character{
  position:absolute;
  width:105px;
  height:auto;
  z-index:2;
  pointer-events:none;
  margin:0;
}

.playful-worship .headphones-character{
  width:60px;
  left:6%;
  top:48%;
  transform:translateY(-50%) rotate(-6deg);
}

.playful-worship .dinosaur-character{
  width:60px;
  left:58%;
  top:52%;
  transform:translateY(-50%) rotate(3deg);
}

.playful-worship .playlist-buttons a{
  padding-left:80px;
}
.grown-ups-note {
  font-size: 0.85em;
  opacity: 0.75;
  margin-top: 24px;
}

@media (max-width: 600px) {
  .playful-worship {
    padding: 12px 16px;
  }

  .playful-worship .playlist-buttons {
    gap: 8px;
  }
  .playful-worship .playlist-buttons a {
    min-height: 90px;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
}

  @media (max-width: 600px) {
  .rhythm-item {
    width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  .playful-worship .headphones-character {
    width: 50px;
  }

  .playful-worship .dinosaur-character {
    width: 54px;
  }
  /* Make Prayer & Worship the same width as the Home box */
.playful-worship,
.prayer-panel {
    width: calc(100% - 96px);
    margin: 0 auto;
    box-sizing: border-box;
    border-radius: 28px;
}

/* Prayer card */
.prayer-panel {
    padding: 26px 20px;
}

/* Worship card */
.playful-worship {
    padding: 22px 20px;
}

/* Smaller YouTube & Spotify cards */
.playful-worship .playlist-buttons {
    gap: 10px;
}

.playful-worship .playlist-buttons a {
    min-height: 96px;
    padding: 10px 8px 10px 40px;
    border-radius: 20px;
    flex: 1;
}

/* Smaller characters */
.playful-worship .headphones-character,
.playful-worship .dinosaur-character {
    width: 32px;
}

/* Smaller text inside the playlist cards */
.playful-worship .playlist-buttons strong {
    font-size: 1rem;
}
}
@media (max-width: 600px) {
  .rhythm-item {
    width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
}