/* ============================================================
   ICE POP SHOP — shared stylesheet
   Design system carried over from the original one-pager.
   Palette comes from the book cover: ice-pop blue, sunny orange,
   red-and-white stripes, watercolor warmth.
   ============================================================ */

:root{
  --vanilla:#FDF9F2;        /* page background */
  --cream:#F6EEDF;          /* soft section band */
  --ink:#33305A;            /* deep blueberry text */
  --ink-soft:#5B5880;       /* secondary text */
  --raspberry:#E1526B;      /* primary accent / CTAs */
  --raspberry-deep:#C43D56; /* hover */
  --mint:#2FA39A;           /* secondary accent (teacher strip) */
  --mint-deep:#22857D;
  --mango:#F2A649;          /* small warm accent */
  --sky:#4FB3D9;            /* ice-pop blue */
  --stick:#D9B98C;          /* popsicle stick wood */
  --radius-pop:200px 200px 26px 26px;
}

/* ============ RESET / BASE ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}
body{
  font-family:'Nunito Sans','Segoe UI','Helvetica Neue',Arial,sans-serif;
  background:var(--vanilla);
  color:var(--ink);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  line-height:1.12;
  font-weight:700;
  letter-spacing:-0.01em;
}
img{max-width:100%;display:block}
a{color:var(--raspberry)}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--mint);
  outline-offset:3px;
  border-radius:4px;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.section-h{font-size:clamp(1.9rem,3.6vw,2.6rem);margin-bottom:22px}
.kicker{
  display:inline-block;
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mint-deep);
  margin-bottom:18px;
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-block;
  font-family:'Nunito Sans',Arial,sans-serif;
  font-weight:700;
  font-size:1.05rem;
  padding:16px 34px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  text-decoration:none;
  text-align:center;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn-primary{background:var(--raspberry);color:#fff;box-shadow:0 6px 18px rgba(225,82,107,.32)}
.btn-primary:hover{background:var(--raspberry-deep);transform:translateY(-2px)}
.btn-secondary{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn-secondary:hover{background:var(--ink);color:var(--vanilla)}
.btn-mint{background:var(--mint);color:#fff;box-shadow:0 6px 18px rgba(47,163,154,.3)}
.btn-mint:hover{background:var(--mint-deep);transform:translateY(-2px)}
.btn-mango{background:var(--mango);color:var(--ink);box-shadow:0 6px 18px rgba(242,166,73,.35)}
.btn-mango:hover{filter:brightness(.95);transform:translateY(-2px)}
.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;pointer-events:none}

/* ============ HEADER ============ */
header.site{padding:22px 0}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.wordmark{
  font-family:'Fraunces',Georgia,serif;
  font-weight:700;font-size:1.7rem;
  letter-spacing:-0.015em;
  color:var(--ink);text-decoration:none;
  display:flex;align-items:center;gap:11px;
}
.wordmark .pop{color:var(--raspberry)}
.wordmark svg{flex-shrink:0;transform:rotate(-7deg);transition:transform .2s ease}
.wordmark:hover svg{transform:rotate(-14deg) translateY(-1px)}
nav.top{display:flex;gap:10px;flex-wrap:wrap}
nav.top a{
  color:var(--ink);
  background:var(--cream);
  text-decoration:none;font-weight:700;font-size:.92rem;
  padding:9px 18px;border-radius:999px;
  transition:background .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease;
}
nav.top a:hover{
  background:var(--raspberry);color:#fff;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(225,82,107,.3);
}
nav.top a[aria-current="page"]{background:var(--ink);color:var(--vanilla)}

/* ============ PAGE HERO (interior pages) ============ */
.page-hero{padding:40px 0 48px}
.page-hero h1{font-size:clamp(2.2rem,4.6vw,3.4rem);margin-bottom:16px}
.page-hero p.lede{font-size:1.15rem;color:var(--ink-soft);max-width:38em}

/* ============ HOME HERO ============ */
.hero{padding:56px 0 88px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.6rem,5.5vw,4.2rem);margin-bottom:20px}
.hero h1 .pop{color:var(--raspberry)}
.hero p.lede{font-size:1.2rem;color:var(--ink-soft);max-width:34em;margin-bottom:34px}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
.cover-frame{
  justify-self:center;
  width:min(340px,80vw);
  border-radius:8px;
  box-shadow:0 30px 60px rgba(51,48,90,.28),0 8px 20px rgba(51,48,90,.18);
  transform:rotate(2.5deg);
  overflow:hidden;
}
.cover-frame img{width:100%;height:auto;display:block}

/* ============ DRIP DIVIDER ============ */
.drip{display:block;width:100%;height:52px;margin-bottom:-1px}

/* ============ SECTION BANDS ============ */
.band-cream{background:var(--cream);padding:72px 0 84px}
.band-plain{padding:80px 0}
.band-ink{background:var(--ink);color:var(--vanilla);padding:80px 0}
.band-ink h2{color:#fff}
.band-ink p{color:#C9C6E3}
.band-mint{background:var(--mint);color:#fff;padding:52px 0}
.band-mango{background:var(--mango);color:var(--ink);padding:64px 0}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.band-cream p,.band-plain p{color:var(--ink-soft)}
.band-cream p strong,.band-plain p strong{color:var(--ink)}

/* ============ POP CARDS (themes) ============ */
.pop-row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;row-gap:64px;margin-bottom:44px}
.pop-card{
  position:relative;border-radius:var(--radius-pop);
  padding:38px 14px 26px;text-align:center;color:#fff;
  font-weight:700;font-size:.98rem;line-height:1.3;min-height:150px;
  display:flex;align-items:flex-end;justify-content:center;
}
.pop-card::after{
  content:attr(data-ch);position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);
  width:16px;height:34px;background:var(--stick);border-radius:0 0 8px 8px;
  font-family:'Nunito Sans',Arial,sans-serif;font-size:.68rem;font-weight:800;
  color:#7A5F35;line-height:32px;text-align:center;
}
.pop-1{background:#E1526B}.pop-2{background:#F2A649}.pop-3{background:#2FA39A}
.pop-4{background:#7A77B8}.pop-5{background:#E98A9E}.pop-6{background:#4FB3D9}
.pop-7{background:#8CC152}.pop-8{background:#C43D56}

/* ============ CARDS / PRODUCTS ============ */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{
  background:#fff;border-radius:18px;padding:30px 26px;color:var(--ink);
  box-shadow:0 10px 28px rgba(51,48,90,.10);
  display:flex;flex-direction:column;gap:12px;
}
.card h3{font-size:1.25rem}
.card p{color:var(--ink-soft);font-size:.97rem;flex-grow:1}
.card .price{font-weight:800;font-size:1.15rem;color:var(--ink)}
.card .btn{width:100%;padding:14px 20px;font-size:.98rem}
.give-note{
  display:flex;align-items:center;gap:10px;
  font-weight:700;color:var(--raspberry);font-size:.92rem;
}

/* ============ EMBED SLOTS ============ */
.embed-slot{
  background:rgba(255,255,255,.06);
  border:2px dashed rgba(255,255,255,.35);
  border-radius:18px;padding:34px 28px;text-align:center;
}
.embed-slot p{margin-bottom:18px;font-size:.95rem}
.embed-clean{border:none;background:transparent;padding:0}

/* ============ TEACHER PAGE ============ */
details.province{
  background:#fff;border-radius:14px;margin-bottom:14px;
  box-shadow:0 6px 18px rgba(51,48,90,.08);
  overflow:hidden;
}
details.province summary{
  cursor:pointer;list-style:none;
  padding:20px 26px;font-weight:800;font-size:1.05rem;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
details.province summary::-webkit-details-marker{display:none}
details.province summary::after{content:"+";font-size:1.4rem;color:var(--mint-deep);font-weight:700}
details.province[open] summary::after{content:"–"}
details.province .province-body{padding:0 26px 24px}
.badge{
  display:inline-block;background:var(--cream);color:var(--ink-soft);
  border-radius:999px;padding:4px 14px;font-size:.8rem;font-weight:700;
}
.badge.live{background:var(--mint);color:#fff}
.grade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:6px}
.grade-card{
  background:var(--cream);border-radius:14px;padding:20px;
  display:flex;flex-direction:column;gap:10px;
}
.grade-card h4{font-family:'Fraunces',Georgia,serif;font-size:1.1rem}
.grade-card .subjects{font-size:.85rem;color:var(--ink-soft);flex-grow:1}
.grade-card .btn{padding:12px 18px;font-size:.92rem}

/* ============ SPREAD GALLERY ============ */
.spread-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.spread-row figure{
  border-radius:10px;overflow:hidden;
  box-shadow:0 10px 24px rgba(51,48,90,.15);
  background:#fff;
}
.spread-row figcaption{font-size:.82rem;color:var(--ink-soft);padding:10px 12px;text-align:center}

/* ============ FACT LIST ============ */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 40px;max-width:44em}
.facts div{padding:12px 0;border-bottom:1px dashed var(--stick)}
.facts dt{font-weight:800;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mint-deep)}
.facts dd{color:var(--ink-soft)}

/* ============ COUNTER / BIG NUMBER ============ */
.big-number{
  font-family:'Fraunces',Georgia,serif;font-weight:700;
  font-size:clamp(3rem,8vw,5.5rem);color:var(--raspberry);line-height:1;
}

/* ============ PROFILES (About) ============ */
.profile-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:48px;align-items:center}
.profile-photo{
  width:min(260px,70vw);aspect-ratio:1/1;border-radius:50%;
  background:linear-gradient(140deg,var(--raspberry) 0%,var(--mango) 100%);
  justify-self:center;display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:'Fraunces',Georgia,serif;font-size:1.1rem;
  overflow:hidden;box-shadow:0 16px 36px rgba(51,48,90,.2);
}
.profile-photo img{width:100%;height:100%;object-fit:cover}
.profile-photo.alt{background:linear-gradient(140deg,var(--sky) 0%,var(--mint) 100%)}

/* ============ STRIPE ACCENT ============ */
.stripe{
  height:10px;
  background:repeating-linear-gradient(45deg,#E1526B 0 22px,#fff 22px 44px);
}

.cols-2 p{margin-bottom:24px}
.grade-card .outcomes-list{font-size:.8rem;color:var(--ink-soft);line-height:1.6;margin:0}
.grade-card .outcomes-list strong{color:var(--mint-deep);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}

/* ============ FOOTER ============ */
footer.site{padding:44px 0 56px;text-align:center;color:var(--ink-soft);font-size:.92rem}
footer.site nav{display:flex;gap:24px;justify-content:center;margin-bottom:16px;flex-wrap:wrap}
footer.site a{color:var(--ink-soft);text-decoration:none;font-weight:600}
footer.site a:hover{color:var(--raspberry)}
footer.site .legal{margin-top:10px;font-size:.85rem}

/* ============ RESPONSIVE ============ */
@media (max-width:980px){
  .card-grid{grid-template-columns:1fr 1fr}
  .spread-row{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .pop-row{grid-template-columns:repeat(3,1fr);row-gap:56px}
  .grade-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .hero{padding:36px 0 64px}
  .hero-grid,.cols-2,.profile-grid{grid-template-columns:1fr;gap:36px}
  .cover-frame{order:-1;transform:rotate(0deg)}
  .facts{grid-template-columns:1fr}
  body{font-size:16px}
}
@media (max-width:560px){
  .card-grid{grid-template-columns:1fr}
  .spread-row{grid-template-columns:1fr}
  .pop-row{grid-template-columns:repeat(2,1fr)}
  .hero-ctas .btn{width:100%}
}