/* My Garden Songs — design tokens
   paper   #FBF7EE  (cream from the character art)
   ink     #3A3428  (sketchy linework charcoal)
   leaf    #4F7245  (garden green — primary)
   terra   #BF5B3E  (terracotta pot / Diggy's scarf)
   sun     #E8A93C  (Poppy's beanie yellow)
   sky     #7FA9CE  (Rosy & Lilly's denim blue)
*/
:root{
  --paper:#FBF7EE; --paper-2:#F4EDDD; --ink:#3A3428; --ink-soft:#6B6353;
  --leaf:#4F7245; --leaf-deep:#3D5A36; --terra:#BF5B3E; --sun:#E8A93C; --sky:#7FA9CE;
  --radius:22px;
  --display:'Baloo 2',system-ui,sans-serif;
  --body:'Lora',Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:1.06rem;line-height:1.75}
img{max-width:100%;height:auto;display:block}
a{color:var(--leaf-deep)}
h1,h2,h3{font-family:var(--display);line-height:1.15;color:var(--ink);margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.5vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.45rem,3vw,2rem);font-weight:700}
h3{font-size:1.15rem;font-weight:700}
main{display:block}

/* header */
.site-header{display:flex;align-items:center;gap:1rem;padding:.8rem clamp(1rem,4vw,2.5rem);
  background:var(--paper);position:sticky;top:0;z-index:50;
  border-bottom:2px dashed rgba(58,52,40,.18)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);
  font-family:var(--display);font-weight:800;font-size:1.2rem}
.brand img{border-radius:50%;box-shadow:0 0 0 3px var(--sun)}
.site-header nav{margin-left:auto;display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}
.site-header nav a{font-family:var(--display);font-weight:600;text-decoration:none;
  color:var(--ink);font-size:1rem;padding:.15rem .1rem;border-bottom:3px solid transparent}
.site-header nav a:hover{border-bottom-color:var(--sun)}
.nav-cta{background:var(--terra);color:#fff!important;padding:.4rem .95rem!important;
  border-radius:999px;border-bottom:none!important}
.nav-cta:hover{background:#A84E34}
.nav-toggle,.nav-btn{display:none}

/* hero */
.hero{padding:clamp(2.5rem,7vw,5rem) clamp(1rem,4vw,2.5rem) clamp(2rem,5vw,3.5rem);
  text-align:center;background:
  radial-gradient(60rem 30rem at 50% -12rem, rgba(232,169,60,.16), transparent 70%), var(--paper)}
.hero-inner{max-width:52rem;margin:0 auto}
.eyebrow{font-family:var(--display);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;font-size:.82rem;color:var(--terra);margin:0 0 1rem}
.eyebrow a{color:var(--terra);text-decoration:none}
.lede{font-size:1.15rem;color:var(--ink-soft);max-width:44rem;margin:.4rem auto 1.6rem}
.btn-row{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.btn{font-family:var(--display);font-weight:700;text-decoration:none;
  padding:.65rem 1.4rem;border-radius:999px;display:inline-block;font-size:1rem}
.btn-green{background:var(--leaf);color:#fff;box-shadow:0 3px 0 var(--leaf-deep)}
.btn-green:hover{background:var(--leaf-deep)}
.btn-terra{background:var(--terra);color:#fff;box-shadow:0 3px 0 #8E4229}
.btn-terra:hover{background:#A84E34}
.btn-line{border:2.5px solid var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.text-link{font-family:var(--display);font-weight:700;text-decoration:none;
  border-bottom:3px solid var(--sun)}

/* signature: hand-drawn soil divider */
.soil{height:46px;background-repeat:repeat-x;background-size:auto 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 46' preserveAspectRatio='none'%3E%3Cpath d='M0 26 Q 20 14 40 24 T 80 22 T 120 27 T 160 20 T 200 26 T 240 21 T 280 26 T 320 22 L 320 46 L 0 46 Z' fill='%234F7245'/%3E%3Cpath d='M0 34 Q 26 26 53 33 T 107 32 T 160 35 T 213 31 T 267 35 T 320 32 L 320 46 L 0 46 Z' fill='%233D5A36'/%3E%3Cg stroke='%233D5A36' stroke-width='3' stroke-linecap='round' fill='none'%3E%3Cpath d='M30 24 v-9 M30 17 q -6 -2 -8 -8 M30 17 q 6 -2 8 -8'/%3E%3Cpath d='M150 22 v-8 M150 16 q -5 -1 -7 -7 M150 16 q 5 -1 7 -7'/%3E%3Cpath d='M262 25 v-9 M262 18 q -6 -2 -8 -8 M262 18 q 6 -2 8 -8'/%3E%3C/g%3E%3C/svg%3E")}

/* sections */
section{padding:clamp(2rem,5vw,3.5rem) clamp(1rem,4vw,2.5rem)}
.page-head{max-width:52rem;margin:0 auto;text-align:center;padding-bottom:1rem}
.band{max-width:68rem;margin:0 auto}
.band.narrow{max-width:46rem}
.section-lede{color:var(--ink-soft);max-width:40rem}
.center{text-align:center;margin-top:1.8rem}
.small{font-size:.9rem;color:var(--ink-soft)}
.friends{background:var(--paper-2);text-align:center}
.friends h2{margin-bottom:.2em}
.friend-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1.4rem;max-width:66rem;margin:2rem auto 0;align-items:end}
.friend-row figure{margin:0}
.friend-row img{margin:0 auto;max-height:230px;width:auto;
  filter:drop-shadow(0 8px 14px rgba(58,52,40,.18))}
.friend-row figcaption{margin-top:.7rem}
.friend-row strong{display:block;font-family:var(--display);font-size:1.15rem}
.friend-row span{display:block;font-size:.88rem;color:var(--ink-soft);line-height:1.45;
  max-width:15rem;margin:0 auto}

/* cards */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.3rem;margin-top:1.6rem}
.card{background:#fff;border:2px solid rgba(58,52,40,.14);border-radius:var(--radius);
  padding:1.4rem 1.4rem 1.2rem;text-decoration:none;color:var(--ink);
  box-shadow:0 4px 0 rgba(58,52,40,.08);transition:transform .15s ease, box-shadow .15s ease;
  display:flex;flex-direction:column}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 0 rgba(79,114,69,.25)}
.card-emoji{font-size:2rem;line-height:1;margin-bottom:.5rem}
.card p{color:var(--ink-soft);font-size:.95rem;margin:.2rem 0 1rem;flex:1}
.card-more{font-family:var(--display);font-weight:700;font-size:.92rem;color:var(--terra)}

/* why band */
.why{background:linear-gradient(180deg,var(--paper) 0%, var(--paper-2) 100%)}
.why-inner{max-width:46rem;margin:0 auto;text-align:center}

/* lyrics */
.lyrics{background:var(--paper-2);border-radius:var(--radius)}
.stanza{margin:0 0 1.6rem}
.stanza-label{font-family:var(--display);font-weight:700;font-size:.82rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--leaf-deep);
  display:inline-block;background:rgba(79,114,69,.12);border-radius:999px;padding:.15rem .8rem}
.stanza p{margin:.5rem 0 0;font-size:1.08rem;line-height:1.9}
.echo{color:var(--terra);font-style:italic}
.teaches{background:rgba(232,169,60,.14);border-radius:14px;padding:.7rem 1rem}

/* faq */
.faq{background:#fff;border:2px solid rgba(58,52,40,.14);border-radius:18px;
  margin:0 0 1rem;padding:.55rem 1.6rem .55rem 1.5rem}
.faq summary{font-family:var(--display);font-weight:700;cursor:pointer;padding:.85rem .2rem;
  list-style-position:outside}
.faq p{margin:.1rem 0 1.1rem;color:var(--ink-soft);padding-right:.4rem}

/* creator photos */
.photo-grid{display:grid;gap:1.2rem;margin:1.6rem 0 .4rem}
.photo-grid figure{margin:0}
.photo-grid img{border-radius:var(--radius);width:100%;
  box-shadow:0 6px 0 rgba(58,52,40,.10)}
.photo-grid figcaption{font-size:.88rem;color:var(--ink-soft);margin-top:.5rem;
  font-style:italic;text-align:center}
.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media (max-width:560px){.photo-pair{grid-template-columns:1fr}}

/* footer */
.site-footer{background:var(--leaf-deep);color:#EDE7D6;padding:2.5rem clamp(1rem,4vw,2.5rem) 1.5rem}
.footwrap{max-width:68rem;margin:0 auto;display:grid;gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.site-footer h3{color:var(--sun);font-size:1rem;margin-bottom:.6rem}
.site-footer a{display:block;color:#EDE7D6;text-decoration:none;margin:.3rem 0;
  font-family:var(--display);font-weight:500}
.site-footer a:hover{color:var(--sun)}
.site-footer p{font-size:.92rem;line-height:1.6}
.footlogo{border-radius:50%;margin-bottom:.6rem}
.legal{max-width:68rem;margin:2rem auto 0;border-top:1px solid rgba(237,231,214,.25);
  padding-top:1rem;font-size:.8rem;color:rgba(237,231,214,.75);text-align:center}

/* focus */
a:focus-visible,summary:focus-visible,.nav-btn:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}

/* mobile nav */
@media (max-width:760px){
  .nav-btn{display:flex;flex-direction:column;gap:5px;margin-left:auto;cursor:pointer;padding:.5rem}
  .nav-btn span{width:26px;height:3px;background:var(--ink);border-radius:2px}
  .site-header nav{display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--paper);flex-direction:column;gap:0;padding:.5rem 1.2rem 1.2rem;
    border-bottom:2px dashed rgba(58,52,40,.18)}
  .site-header nav a{padding:.6rem 0;font-size:1.1rem}
  .nav-toggle:checked ~ nav{display:flex}
  .nav-cta{text-align:center;margin-top:.5rem}
  .friend-row img{max-height:180px}
}