/* Little Creators Lab — shared stylesheet for every generated page.
   External file (not inlined) so it is cached once and reused across the home page, the
   lessons index and every lesson page. */

@font-face{font-family:Fredoka;src:url(fonts/fredoka-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Fredoka;src:url(fonts/fredoka-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Nunito;src:url(fonts/nunito-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Nunito;src:url(fonts/nunito-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Nunito;src:url(fonts/nunito-800.woff2) format('woff2');font-weight:800;font-display:swap}

:root{
  --bg:#FFF9F0; --bg2:#FDF0E0; --card:#fff; --line:#F0E2CE;
  --blue:#3C9DD8; --blue-d:#2B7FB4; --orange:#F5A03C; --orange-d:#E07E1B;
  --green:#4FBF7F; --ink:#22314A; --ink-s:#5B6B85;
  --r:18px; --sh:0 10px 30px rgba(34,49,74,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:Nunito,system-ui,-apple-system,Segoe UI,sans-serif;font-size:17px;line-height:1.6}
/* height:auto is required because the <img> tags carry width/height attributes (they reserve
   space and stop layout shift). Without it, max-width scales the width but the height stays
   at the attribute value and the picture stretches. */
img{max-width:100%;height:auto;display:block}

/* A grid/flex item defaults to min-width:auto, so a track will NOT shrink below its content's
   intrinsic size. With a 1920px-wide hero image that forces the column to 1920px and blows the
   whole page out sideways. This is the single most common CSS grid trap and it only appears
   above the breakpoint, which is why a narrow preview never showed it. */
.hero-g>*,.split>*,.grid3>*,.grid4>*,.pricing>*,.peek>*{min-width:0}

/* ---------------------------------------------------------------- lightbox */
.peek img[data-full]{cursor:zoom-in;transition:transform .18s ease,box-shadow .18s ease}
.peek img[data-full]:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(34,49,74,.20)}
.peek img[data-full]:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

.lb{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  background:rgba(20,28,42,.90);padding:26px}
.lb[open],.lb.on{display:flex}
.lb img{max-width:min(92vw,880px);max-height:88vh;width:auto;height:auto;border-radius:10px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);background:#fff}
.lb-cap{position:absolute;left:0;right:0;bottom:16px;text-align:center;color:#dfe6f0;
  font-size:.92rem;padding:0 70px}
.lb button{position:absolute;background:rgba(255,255,255,.13);color:#fff;border:0;
  width:52px;height:52px;border-radius:50%;font-size:26px;cursor:pointer;line-height:1;
  display:grid;place-items:center}
.lb button:hover{background:rgba(255,255,255,.26)}
.lb button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.lb-x{top:18px;right:18px}
.lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.lb-next{right:18px;top:50%;transform:translateY(-50%)}
@media(max-width:620px){
  .lb{padding:10px}
  .lb-prev{left:6px}.lb-next{right:6px}
  .lb button{width:44px;height:44px;font-size:22px}
  .lb-cap{padding:0 56px;font-size:.84rem}
}
/* the page must not scroll behind an open lightbox */
body.lb-open{overflow:hidden}
a{color:var(--blue-d)}
h1,h2,h3{font-family:Fredoka,Nunito,sans-serif;font-weight:600;line-height:1.15;margin:0 0 .5em}
h1,.as-h1{font-size:clamp(2rem,5vw,3.2rem)}
h2{font-size:clamp(1.5rem,3.4vw,2.3rem)}
h3{font-size:1.18rem}
p.muted,.muted{color:var(--ink-s)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:820px}
.centre{text-align:center}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:10px 16px;border-radius:8px;z-index:99}

.btn{display:inline-flex;align-items:center;gap:10px;font-family:Fredoka;font-weight:600;
  font-size:1.05rem;padding:15px 30px;border-radius:999px;text-decoration:none;border:0;cursor:pointer}
.btn-p{background:var(--orange);color:#fff;box-shadow:0 6px 0 var(--orange-d)}
.btn-p:hover{transform:translateY(2px);box-shadow:0 4px 0 var(--orange-d)}
.btn-s{background:#fff;color:var(--ink);border:2px solid var(--line)}

header{position:sticky;top:0;z-index:20;background:rgba(255,249,240,.94);
  backdrop-filter:blur(8px);border-bottom:2px solid var(--line)}
.nav{display:flex;align-items:center;gap:18px;padding:12px 0}
.nav img{height:46px;width:auto}
.nav nav{margin-left:auto;display:flex;gap:22px;align-items:center}
.nav nav a{color:var(--ink-s);text-decoration:none;font-weight:700}
.nav nav a:hover{color:var(--ink)}
@media(max-width:820px){.nav nav a:not(.btn){display:none}}

section{padding:64px 0}
section.tint{background:var(--bg2);border-top:2px solid var(--line);border-bottom:2px solid var(--line)}
.sec-head{text-align:center;max-width:60ch;margin:0 auto 40px}
.sec-head p{color:var(--ink-s);font-size:1.08rem;margin:0}

.hero{padding:56px 0 40px}
.hero-g{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media(max-width:900px){.hero-g,.split{grid-template-columns:1fr;gap:28px}}
.eyebrow{display:inline-block;background:#fff;border:2px solid var(--line);border-radius:999px;
  padding:7px 18px;font-weight:800;font-size:.82rem;letter-spacing:1.4px;color:var(--blue-d);
  margin-bottom:14px}
.lead{font-size:1.2rem;color:var(--ink-s);margin:0 0 26px;max-width:48ch}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.note{font-size:.92rem;color:var(--ink-s);margin-top:14px}
.hero-img{border-radius:var(--r);box-shadow:var(--sh);border:3px solid #fff}
.crumb{color:var(--ink-s);font-size:.92rem;margin:0 0 22px}

.strip{background:var(--bg2);border-top:2px solid var(--line);border-bottom:2px solid var(--line);padding:22px 0}
.strip ul{list-style:none;display:flex;gap:34px;justify-content:center;flex-wrap:wrap;
  margin:0;padding:0;font-weight:700;color:var(--ink-s)}
.strip li::before{content:"\2713";color:var(--green);font-weight:800;margin-right:9px}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.grid3{grid-template-columns:1fr}}
.card{background:var(--card);border:2px solid var(--line);border-radius:var(--r);
  padding:26px;box-shadow:var(--sh)}
.card p{margin:0;color:var(--ink-s)}
.ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:24px;margin-bottom:14px}

/* lesson cards — the part that grows as the series grows */
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:960px){.lgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.lgrid{grid-template-columns:1fr}}
.lcard{display:flex;flex-direction:column;background:#fff;border:2px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);text-decoration:none;color:inherit;
  transition:transform .15s ease,box-shadow .15s ease}
a.lcard:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(34,49,74,.16)}
.lthumb{position:relative;aspect-ratio:16/9;background:var(--bg2)}
.lthumb img{width:100%;height:100%;object-fit:cover}
.dur{position:absolute;right:10px;bottom:10px;background:rgba(34,49,74,.86);color:#fff;
  font-size:.78rem;font-weight:800;padding:4px 10px;border-radius:6px}
.lbody{padding:20px 22px 24px}
.lnum{font-size:.78rem;font-weight:800;letter-spacing:1.2px;color:var(--blue-d)}
.lbody h3{margin:6px 0 8px}
.lbody p{margin:0;color:var(--ink-s);font-size:.98rem}
.more{display:inline-block;margin-top:14px;font-weight:800;color:var(--orange-d)}
.lcard.soon{opacity:.72}
.lcard.soon .lthumb{display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,#FDF0E0,#FDF0E0 12px,#F8E6CF 12px,#F8E6CF 24px)}
.soonbadge{background:#fff;border:2px solid var(--line);border-radius:999px;padding:8px 20px;
  font-family:Fredoka;font-weight:600;color:var(--ink-s)}

.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
@media(max-width:900px){.pricing{grid-template-columns:1fr}}
.plan{background:#fff;border:2px solid var(--line);border-radius:var(--r);padding:28px;
  box-shadow:var(--sh);display:flex;flex-direction:column;height:100%;position:relative}
.plan.best{border-color:var(--orange);box-shadow:0 14px 36px rgba(224,126,27,.20)}
.tag{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--orange);
  color:#fff;font-family:Fredoka;font-weight:600;padding:6px 20px;border-radius:999px;
  font-size:.86rem;white-space:nowrap}
.price{font-family:Fredoka;font-weight:700;font-size:2.5rem;color:var(--ink);margin:6px 0 2px}
.was{color:var(--ink-s);text-decoration:line-through;font-size:1.05rem;margin-left:8px}
.pmeta{margin:0 0 4px;color:var(--ink-s)}
.plan ul{list-style:none;padding:0;margin:16px 0 24px;flex:1}
.plan li{padding:7px 0 7px 28px;position:relative;color:var(--ink-s)}
.plan li::before{content:"\2713";position:absolute;left:0;color:var(--green);font-weight:800}
.plan .btn{width:100%;justify-content:center}

.peek{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.peek.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.peek,.peek.three{grid-template-columns:repeat(2,1fr)}}
.peek img{border-radius:12px;border:2px solid var(--line);box-shadow:var(--sh);background:#fff}

.ticks{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(max-width:700px){.ticks{grid-template-columns:1fr}}
.ticks li{padding:10px 0 10px 32px;position:relative;font-weight:700}
.ticks li::before{content:"\2713";position:absolute;left:0;color:var(--green);font-weight:800}
.chapters{list-style:none;padding:0;margin:0}
.chapters li{padding:9px 0;border-bottom:1px solid var(--line);color:var(--ink-s)}
.chapters .t{display:inline-block;min-width:64px;font-weight:800;color:var(--blue-d);
  font-variant-numeric:tabular-nums}

.teach{display:flex;gap:24px;align-items:center;background:#fff;border:2px solid var(--line);
  border-radius:var(--r);padding:26px;box-shadow:var(--sh)}
.teach img{width:132px;height:132px;border-radius:50%;object-fit:cover;background:var(--bg2);flex:0 0 auto}
@media(max-width:600px){.teach{flex-direction:column;text-align:center}}

details{background:#fff;border:2px solid var(--line);border-radius:14px;padding:18px 22px;margin-bottom:12px}
details[open]{border-color:var(--blue)}
summary{font-family:Fredoka;font-weight:600;font-size:1.08rem;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--blue);font-weight:700}
details[open] summary::after{content:"\2013"}
details p{color:var(--ink-s);margin:12px 0 0}

.email{background:linear-gradient(160deg,var(--blue) 0%,var(--blue-d) 100%);color:#fff;
  border-radius:24px;padding:44px;text-align:center}
.email h2{color:#fff}
.email p{color:rgba(255,255,255,.92);max-width:52ch;margin:0 auto 22px}
.email form{display:flex;gap:10px;max-width:460px;margin:0 auto;flex-wrap:wrap}
.email input{flex:1;min-width:220px;padding:15px 18px;border-radius:999px;border:0;
  font-family:Nunito;font-size:1rem}

footer{background:var(--ink);color:#c9d3e2;padding:48px 0 30px;margin-top:60px;font-size:.94rem}
footer a{color:#fff}
footer h3{color:#fff;font-size:1rem}
.flogo{filter:brightness(0) invert(1);opacity:.92}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px}
@media(max-width:760px){.fgrid{grid-template-columns:1fr}}
.legal{border-top:1px solid rgba(255,255,255,.16);margin-top:30px;padding-top:20px;
  font-size:.82rem;color:#9aa8bd;line-height:1.55}

/* course cards — the top-level unit of navigation once there is more than one course */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:960px){.cgrid{grid-template-columns:1fr}}
.ccard{display:flex;flex-direction:column;background:#fff;border:2px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);text-decoration:none;color:inherit;
  transition:transform .15s ease,box-shadow .15s ease}
.ccard:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(34,49,74,.16)}
.ccard img{aspect-ratio:16/9;object-fit:cover;width:100%}
.ccard>div{padding:20px 22px 24px}
.ccard h3{margin:6px 0 4px;font-size:1.5rem}
.ccard p{margin:0;color:var(--ink-s);font-size:.98rem}
.clevel{font-weight:800;color:var(--orange-d);margin-bottom:8px!important;font-size:.9rem!important}

/* unit blocks + compact lesson rows: 62-72 cards would be an unusable wall of images */
.unit{padding:0;margin:0 0 40px;border:0}
.uhead{border-bottom:2px solid var(--line);padding-bottom:14px;margin-bottom:6px;position:relative}
.uhead h2{margin:4px 0 6px;font-size:1.6rem}
.uhead p{margin:0}
.unum{font-size:.78rem;font-weight:800;letter-spacing:1.2px;color:var(--blue-d)}
.ucount{position:absolute;right:0;top:2px;font-size:.82rem;font-weight:800;color:var(--ink-s)}
@media(max-width:600px){.ucount{position:static;display:block;margin-top:6px}}
.lrows{list-style:none;padding:0;margin:0}
.lrow{border-bottom:1px solid var(--line)}
.lrow a{display:flex;align-items:center;gap:16px;padding:13px 6px;text-decoration:none;color:inherit;border-radius:8px}
.lrow a:hover{background:#fff}
.lrow .n{flex:0 0 34px;height:34px;border-radius:9px;background:var(--bg2);display:grid;
  place-items:center;font-weight:800;font-size:.92rem;color:var(--blue-d)}
.lrow .ttl{flex:1;font-weight:700}
.lrow .meta{color:var(--ink-s);font-size:.88rem;white-space:nowrap}
.lrow.soon{opacity:.55;display:flex;align-items:center;gap:16px;padding:13px 6px}
.lrow.soon .n{background:transparent;border:2px dashed var(--line)}

/* prev/next — a parent works through in order, and with ~200 pages this is also what stops
   the deeper lessons becoming orphans a crawler never reaches */
.pn{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.pn{grid-template-columns:1fr}}
.pn a{background:#fff;border:2px solid var(--line);border-radius:14px;padding:16px 20px;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:4px}
.pn a:hover{border-color:var(--blue)}
.pn .next{text-align:right}
.pn span{font-size:.82rem;font-weight:800;color:var(--blue-d)}
.pn strong{font-family:Fredoka;font-weight:600;font-size:1.05rem}