/* KS Science — brand styles
   purple #481890 · ink #2A0F5E · mint #9EE1CB · teal #1D9E79 · lavender #A48FCA · pale #EDEAFF */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=DM+Sans:wght@400;500;700&display=swap');

:root{
  --purple:#481890;--purple-deep:#380060;--ink:#2A0F5E;--purple-mid:#5E33B5;
  --mint:#9EE1CB;--mint-light:#D6F5EA;--teal:#1D9E79;--teal-dark:#147A5C;
  --lav:#A48FCA;--pale:#EDEAFF;--pale-2:#F6F4FF;
  --text:#231A3D;--text2:#5B5277;--text3:#8A82A3;--border:#E1DCF2;--white:#fff;
  --display:'Fredoka',system-ui,sans-serif;--body:'DM Sans',system-ui,sans-serif;
  --r:14px;--r-lg:22px;--pill:999px;
  --shadow:0 10px 30px rgba(42,15,94,.10);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--body);font-size:1.05rem;line-height:1.6;color:var(--text);background:var(--white)}
img{max-width:100%;height:auto;display:block}
a{color:var(--purple)}
a:focus-visible,button:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.wrap{width:min(100% - 2.5rem,1100px);margin-inline:auto}

h1,h2,h3{font-family:var(--display);line-height:1.08;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:700}
h2{font-size:clamp(1.7rem,3.5vw,2.4rem);font-weight:600;color:var(--ink)}
h3{font-size:1.25rem;font-weight:600;color:var(--ink)}
p{max-width:62ch}
.kicker{font-family:var(--display);font-weight:500;color:var(--teal);letter-spacing:.02em;margin-bottom:.25rem}
.underline{display:block;width:120px;height:6px;border-radius:6px;background:var(--teal);margin:.9rem 0 1.2rem}

/* Nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:600;font-size:1.2rem}
.brand img{width:40px;height:40px;border-radius:50%}
.brand small{display:block;font-family:var(--body);font-weight:500;font-size:.72rem;color:var(--text3);letter-spacing:.02em}
.nav nav{display:flex;gap:.25rem;align-items:center}
.nav nav a{color:var(--text2);text-decoration:none;font-weight:500;font-size:.95rem;padding:.45rem .8rem;border-radius:var(--pill)}
.nav nav a:hover{background:var(--pale);color:var(--ink)}
.nav nav a[aria-current]{background:var(--pale);color:var(--purple)}
.nav nav a.btn{margin-left:.5rem;color:#fff;background:var(--purple);padding:.55rem 1rem;font-size:.95rem}
.nav nav a.btn:hover{background:var(--purple-mid)}

/* Buttons + pills */
.btn{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--display);font-weight:600;font-size:1.02rem;text-decoration:none;cursor:pointer;padding:.8rem 1.4rem;border-radius:var(--pill);border:2px solid transparent;line-height:1.1;transition:transform .12s ease,background .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn-mint{background:var(--mint);color:var(--ink)}
.btn-mint:hover{background:#B4EAD8}
.btn-purple{background:var(--purple);color:#fff}
.btn-purple:hover{background:var(--purple-mid)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-outline{background:#fff;color:var(--purple);border-color:var(--purple)}
.btn-outline:hover{background:var(--pale)}
.btn-lg{font-size:1.15rem;padding:1rem 1.8rem}
.pills{display:flex;flex-wrap:wrap;gap:.5rem}
.pill{display:inline-block;font-family:var(--body);font-weight:700;font-size:.78rem;padding:.35rem .8rem;border-radius:var(--pill);background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.pill.on{background:rgba(158,225,203,.16);border-color:var(--mint);color:var(--mint)}
.tag{display:inline-block;font-weight:700;font-size:.72rem;padding:.25rem .65rem;border-radius:var(--pill);background:var(--pale);color:var(--purple)}
.tag.mint{background:var(--mint-light);color:var(--teal-dark)}
.tag.lav{background:#EFE9FA;color:#6C4BB0}
.badge{position:absolute;top:12px;left:12px;font-family:var(--display);font-weight:600;font-size:.8rem;padding:.25rem .7rem;border-radius:var(--pill);background:var(--teal);color:#fff}

/* Hero */
.hero{position:relative;overflow:hidden;background:var(--purple) url('../assets/hero-home.jpg') right center/cover no-repeat;color:#fff;padding:4.5rem 0 4rem;isolation:isolate}
.hero::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--purple) 0%,var(--purple) 42%,rgba(72,24,144,.55) 62%,rgba(72,24,144,0) 100%)}
.hero.small{background:var(--purple) url('../assets/hero-pattern.jpg') center/cover no-repeat}
.hero.small::before{background:linear-gradient(90deg,var(--purple) 0%,var(--purple) 40%,rgba(72,24,144,.7) 60%,rgba(72,24,144,.35) 100%)}
.hero .wrap{position:relative;z-index:2;display:grid;gap:1.1rem}
.hero .kicker{color:var(--mint)}
.hero h1{max-width:14ch;text-shadow:0 4px 18px rgba(0,0,0,.25)}
.hero .lede{font-size:1.15rem;color:#E4DDF9;max-width:52ch}
.hero .cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.4rem}

.doodles{display:none}
.doodles svg{width:100%;height:100%}
.hero.small{padding:3.2rem 0 2.8rem}
.hero.small h1{font-size:clamp(2rem,4.5vw,3rem)}

/* Under construction notice */
.notice{background:var(--mint-light);border:2px dashed var(--teal);border-radius:var(--r-lg);padding:1.2rem 1.4rem;display:flex;gap:1rem;align-items:center;margin:2rem auto 0;width:min(100% - 2.5rem,1100px)}
.notice .icon{font-size:1.8rem;line-height:1}
.notice strong{font-family:var(--display);font-weight:600;color:var(--ink);font-size:1.1rem;display:block}
.notice p{color:var(--text2);font-size:.95rem;margin:0}
.badge.soon{background:var(--lav)}
.card.soon{pointer-events:none;opacity:.85}

/* Sections */
.section{padding:3rem 0}
.section.tint{background:var(--pale-2)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.section-head p{color:var(--text2);margin:0}

/* Freebie cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1.4rem}
.card{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:var(--text);transition:transform .15s ease,box-shadow .15s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .thumb{aspect-ratio:4/3;background:var(--pale);display:grid;place-items:center;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .thumb[data-label]::before,.previews .ph[data-label]::before{content:attr(data-label);font-family:var(--display);font-weight:600;font-size:1.25rem;line-height:1.15;color:var(--purple);text-align:center;padding:1rem 1.2rem;max-width:90%}
.previews .ph{display:grid;place-items:center}
.previews .ph[data-label]::before{font-size:1.05rem;color:var(--lav)}
.related .card .thumb[data-label]::before{font-size:1.05rem}
.card .thumb.web{background:linear-gradient(135deg,var(--purple),var(--purple-mid));color:var(--mint);font-family:var(--display);font-size:1.4rem;font-weight:600}
.card .body{padding:1rem 1.1rem 1.2rem;display:grid;gap:.5rem}
.card p{font-size:.92rem;color:var(--text2)}
.card .tags{display:flex;gap:.35rem;flex-wrap:wrap}
.card .go{font-family:var(--display);font-weight:600;color:var(--purple);margin-top:.2rem}
.card .body .tag{justify-self:start}
.cards.compact{grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:.8rem}
.card.mini .thumb{aspect-ratio:16/10}
.card.mini .body{padding:.7rem .8rem .8rem}
.card.mini h3{font-size:1rem}

/* About */
.about{display:grid;grid-template-columns:260px 1fr;gap:2.5rem;align-items:center}
.about img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:30% 70% 70% 30% / 30% 30% 70% 70%;border:6px solid var(--mint)}
.about p{margin-bottom:.9rem}
.about .pills .pill{background:var(--pale);color:var(--purple);border-color:transparent}

/* Freebie page */
.crumb{font-size:.85rem;color:var(--text3);margin:1.2rem 0 0}
.crumb a{color:var(--text3)}
.two{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:start}
.included{list-style:none;display:grid;gap:.5rem;max-width:34rem}
.included li{padding:.55rem .9rem .55rem 2.2rem;background:var(--pale-2);border-radius:var(--r);position:relative;font-size:.98rem}
.included li::before{content:"";position:absolute;left:.85rem;top:.95rem;width:.7rem;height:.7rem;border-radius:50%;background:var(--teal)}
.download{background:var(--purple);color:#fff;border-radius:var(--r-lg);padding:1.6rem;display:grid;gap:.7rem;position:sticky;top:5rem}
.download h3{color:#fff;font-size:1.5rem}
.download p{color:#E4DDF9;font-size:.95rem}
.download .meta{font-size:.8rem;color:var(--mint)}
.previews{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.previews figure{margin:0}
.previews img,.previews .ph{border-radius:var(--r);background:var(--pale);aspect-ratio:8.5/11;width:100%;box-shadow:var(--shadow)}
.previews figcaption{font-size:.85rem;color:var(--text3);margin-top:.5rem;text-align:center}
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem}
.related .card .thumb{aspect-ratio:16/10}
.related .card.bundle{border:2px solid var(--teal)}
.related .card .label{font-size:.75rem;font-weight:700;color:var(--teal);text-transform:none}

/* Store CTA + footer */
.store{background:var(--ink);color:#fff;padding:3.5rem 0}
.store h2{color:#fff;max-width:26ch}
.store p{color:#CFC4EA;font-size:1.05rem}
.store .actions{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-top:1.2rem}
.store .kicker{color:var(--mint)}
.store .follow{color:#CFC4EA;font-size:.95rem;margin-top:1rem}
.store .follow strong{color:var(--mint)}
.download .thanks{font-size:.88rem;color:#E4DDF9;border-top:1px solid rgba(255,255,255,.18);padding-top:.7rem;margin-top:.2rem}
.download .thanks a{color:var(--mint);font-weight:700}
.hero-note{font-size:.95rem;color:#E4DDF9;margin-top:.2rem}
.hero-note a{color:var(--mint);font-weight:700}
.store .follow a{color:var(--mint)}
.footer{background:var(--purple-deep);color:#CFC4EA;padding:2rem 0;font-size:.9rem}
.footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer .brand{color:#fff}
.footer .brand small{color:#B9ADD9}
.footer nav{display:flex;gap:1.2rem;flex-wrap:wrap}
.footer nav a{color:#CFC4EA;text-decoration:none}
.footer nav a:hover{color:var(--mint)}
.footer .fine{width:100%;font-size:.8rem;color:#9C90BF}

@media(max-width:760px){
  .brand small{display:none}
  .nav nav a.btn{white-space:nowrap;padding:.5rem .9rem}
  .hero{background-position:78% center}
  .hero::before{background:linear-gradient(180deg,var(--purple) 0%,rgba(72,24,144,.9) 55%,rgba(72,24,144,.45) 100%)}
  .nav nav a:not(.btn){display:none}
  .about,.two{grid-template-columns:1fr}
  .about img{max-width:220px}
  .download{position:static}
}
@media(prefers-reduced-motion:no-preference){
  .doodles .float{animation:float 9s ease-in-out infinite}
  .doodles .float.d2{animation-duration:12s;animation-delay:-4s}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
}

/* quiet link row (home favorites) */
.linkrow{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-top:1.2rem}
.linkrow a{display:flex;align-items:center;gap:1rem;text-decoration:none;color:var(--text);padding:.6rem;border-radius:var(--r);border:1px solid var(--border);background:#fff}
.linkrow a:hover{border-color:var(--purple)}
.linkrow img{width:84px;height:63px;object-fit:cover;border-radius:8px;flex:none}
.linkrow strong{display:block;font-family:var(--display);font-weight:600;color:var(--ink);font-size:1.05rem}
.linkrow span{font-size:.9rem;color:var(--text2)}
/* related resources as a list */
.related.list{grid-template-columns:1fr;gap:.6rem;max-width:44rem}
.related.list .card{flex-direction:row;align-items:center;gap:1rem;padding:.9rem 1.1rem;border-radius:var(--r)}
.related.list .card .body{padding:0;gap:.15rem}
.related.list .card h3{font-size:1.05rem}
.related.list .card p{font-size:.9rem}
.related.list .card.bundle{border:2px solid var(--teal)}
.related.list .card::after{content:"→";margin-left:auto;font-family:var(--display);font-weight:600;color:var(--purple);flex:none}

/* ---- lighter palette pass: purple only for hero + buttons ---- */
.hero.small{background:var(--pale-2);color:var(--ink);border-bottom:1px solid var(--border)}
.hero.small::before{background:linear-gradient(90deg,var(--pale-2) 0%,var(--pale-2) 45%,rgba(246,244,255,.6) 65%,rgba(246,244,255,.15) 100%)}
.hero.small h1{color:var(--ink);text-shadow:none}
.hero.small .lede{color:var(--text2)}
.hero.small .kicker{color:var(--teal)}
.hero.small .pill{background:#fff;border-color:var(--border);color:var(--text2)}
.hero.small .pill.on{background:var(--mint-light);border-color:var(--mint);color:var(--teal-dark)}
.download{background:#fff;color:var(--text);border:2px solid var(--border)}
.download h3{color:var(--ink)}
.download p{color:var(--text2)}
.download .meta{color:var(--text3)}
.download .btn-mint{background:var(--purple);color:#fff}
.download .btn-mint:hover{background:var(--purple-mid)}
.download .btn-ghost{color:var(--purple);border-color:var(--purple)}
.download .btn-ghost:hover{background:var(--pale)}
.download .thanks{color:var(--text2);border-top-color:var(--border)}
.download .thanks a{color:var(--purple)}
.store{background:var(--mint-light);color:var(--ink)}
.store h2{color:var(--ink)}
.store p,.store .follow{color:var(--text2)}
.store .kicker{color:var(--teal-dark)}
.store .follow strong{color:var(--teal-dark)}
.store .btn-mint{background:var(--purple);color:#fff}
.store .btn-mint:hover{background:var(--purple-mid)}
.store .btn-ghost{color:var(--ink);border-color:var(--ink)}
.store .btn-ghost:hover{background:rgba(42,15,94,.06)}
.footer{background:#fff;color:var(--text2);border-top:1px solid var(--border)}
.footer .brand{color:var(--ink)}
.footer .brand small{color:var(--text3)}
.footer nav a{color:var(--text2)}
.footer nav a:hover{color:var(--purple)}
.footer .fine{color:var(--text3)}
.section.tint{background:#FAFAFC}
.card .thumb.web{background:var(--mint-light);color:var(--teal-dark)}
.included li{background:#FAFAFC;border:1px solid var(--border)}
.previews img,.previews .ph{background:#fff}
.linkrow a{background:#fff}

.footer nav a.icon{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:50%;color:#fff;vertical-align:middle}
.footer nav a.icon.pinterest{background:#E60023}
.footer nav a.icon.email{background:var(--purple)}
.footer nav a.icon:hover{filter:brightness(1.15);transform:translateY(-1px)}

/* sale bar */
.salebar{display:block;text-align:center;background:var(--purple);color:#fff;font-size:.95rem;padding:.55rem 1rem;text-decoration:none;font-family:var(--display)}
.salebar strong{color:var(--mint)}
.salebar:hover{background:var(--purple-mid)}