/* SproutKid — Resources / blog styling. Shares the brand palette + type with the rest of the site. */

:root{
  --bg:#EEF4FB; --ink:#1B2A4A; --ink-soft:#52617f; --peri:#7C9CF0; --peri-deep:#6f8bf0;
  --coral:#FF7A66; --gold:#FFC24B; --meadow:#6FCF97; --line:rgba(27,42,74,0.12);
  --display:"Bricolage Grotesque", system-ui, sans-serif;
  --body:"Hanken Grotesk", system-ui, sans-serif;
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:var(--body); color:var(--ink); line-height:1.65;
  background:
    radial-gradient(120% 60% at 90% 0%, #F1ECFB 0%, rgba(241,236,251,0) 50%),
    linear-gradient(180deg, #EEF4FB 0%, #EDEFFA 60%, #ECF5F1 100%);
  background-attachment:fixed; -webkit-font-smoothing:antialiased;
}
a{color:var(--peri-deep); text-decoration:none;}
a:hover{text-decoration:underline;}

/* top bar */
.topbar{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(18px,5vw,40px); background:rgba(238,244,251,0.82);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--display);
  font-weight:800; font-size:20px; letter-spacing:-0.02em; color:var(--ink);}
.brand .dot{width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff 0%, var(--peri) 38%, var(--coral) 78%, var(--gold) 100%);
  box-shadow:0 0 0 4px rgba(124,156,240,0.16);}
.topbar a.back{font-weight:600; font-size:14px; color:var(--ink-soft); margin-left:auto;}
.topbar select.lang-switch{margin-left:14px; font:inherit; font-size:13px; padding:5px 9px;
  border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink-soft); cursor:pointer;}

.wrap{max-width:760px; margin:0 auto; padding:clamp(34px,6vw,60px) clamp(20px,5vw,28px) 90px;}

/* hub hero */
.hub-hero{max-width:760px; margin:0 auto; padding:clamp(40px,7vw,72px) clamp(20px,5vw,28px) 8px; text-align:center;}
.eyebrow{font-family:var(--display); font-weight:700; font-size:0.82rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--peri-deep); margin:0 0 10px;}
.hub-hero h1{font-family:var(--display); font-weight:800; letter-spacing:-0.03em; line-height:1.05;
  font-size:clamp(2.1rem,5.5vw,3.1rem); margin:0 0 12px;}
.hub-hero p{color:var(--ink-soft); font-size:1.1rem; max-width:560px; margin:0 auto;}

/* article cards on the hub */
.cards{max-width:760px; margin:0 auto; padding:clamp(26px,4vw,40px) clamp(20px,5vw,28px) 80px;
  display:grid; gap:18px;}
.card{display:block; background:rgba(255,255,255,0.6); border:1px solid var(--line); border-radius:20px;
  padding:22px 24px; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;}
.card:hover{transform:translateY(-2px); text-decoration:none; border-color:rgba(124,156,240,0.5);
  box-shadow:0 14px 34px rgba(27,42,74,0.08);}
.card .tag{display:inline-block; font-family:var(--display); font-weight:700; font-size:0.72rem;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--peri-deep);
  background:rgba(124,156,240,0.12); padding:4px 10px; border-radius:999px; margin-bottom:12px;}
.card h2{font-family:var(--display); font-weight:800; letter-spacing:-0.02em; color:var(--ink);
  font-size:1.32rem; line-height:1.2; margin:0 0 8px;}
.card p{color:var(--ink-soft); margin:0 0 12px; font-size:1rem;}
.card .meta{font-size:0.85rem; color:var(--ink-soft);}
.card .more{font-weight:700; color:var(--peri-deep);}

/* article page */
.article-head{max-width:720px; margin:0 auto; padding:clamp(30px,5vw,52px) clamp(20px,5vw,28px) 0;}
.article-head .tag{display:inline-block; font-family:var(--display); font-weight:700; font-size:0.72rem;
  letter-spacing:0.05em; text-transform:uppercase; color:var(--peri-deep);
  background:rgba(124,156,240,0.12); padding:4px 10px; border-radius:999px; margin-bottom:14px;}
.article-head h1{font-family:var(--display); font-weight:800; letter-spacing:-0.03em; line-height:1.08;
  font-size:clamp(2rem,5vw,2.9rem); margin:0 0 12px;}
.article-head .meta{color:var(--ink-soft); font-size:0.9rem; margin:0;}
.article-head .standfirst{color:var(--ink-soft); font-size:1.12rem; margin:18px 0 0; line-height:1.6;}

article{max-width:720px; margin:0 auto; padding:8px clamp(20px,5vw,28px) 70px;}
article h2{font-family:var(--display); font-weight:700; letter-spacing:-0.02em;
  font-size:clamp(1.3rem,3vw,1.62rem); margin:40px 0 10px;}
article h3{font-family:var(--display); font-weight:700; font-size:1.12rem; margin:26px 0 6px;}
article p{margin:14px 0;}
article ul,article ol{margin:14px 0; padding-left:22px;}
article li{margin:8px 0;}
article strong{color:var(--ink);}
blockquote{margin:22px 0; padding:4px 20px; border-left:3px solid var(--peri);
  color:var(--ink-soft); font-style:italic;}
hr{border:none; border-top:1px solid var(--line); margin:44px 0;}

.callout{background:rgba(124,156,240,0.10); border:1px solid rgba(124,156,240,0.28);
  border-radius:16px; padding:16px 20px; margin:24px 0;}
.callout.warn{background:rgba(255,194,75,0.14); border-color:rgba(255,194,75,0.5);}
.callout h3{margin-top:4px;}

/* crisis / safety note box */
.safety-note{background:rgba(111,207,151,0.12); border:1px solid rgba(111,207,151,0.4);
  border-radius:16px; padding:16px 20px; margin:24px 0; font-size:0.97rem;}

/* "about SproutKid" soft CTA */
.sprout-cta{margin:42px 0 0; padding:24px 26px; border-radius:20px;
  background:linear-gradient(135deg, rgba(124,156,240,0.14), rgba(255,122,102,0.10));
  border:1px solid rgba(124,156,240,0.3);}
.sprout-cta .label{font-family:var(--display); font-weight:700; font-size:0.72rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--peri-deep); margin:0 0 6px;}
.sprout-cta h3{font-family:var(--display); font-weight:800; letter-spacing:-0.02em; font-size:1.25rem; margin:0 0 8px;}
.sprout-cta p{color:var(--ink-soft); margin:0 0 14px;}
.sprout-cta a.btn{display:inline-block; font-family:var(--display); font-weight:700; font-size:0.95rem;
  color:#fff; background:var(--peri-deep); padding:10px 20px; border-radius:999px;}
.sprout-cta a.btn:hover{text-decoration:none; background:#5d7be8;}

/* read-next + footer */
.read-next{max-width:720px; margin:0 auto; padding:0 clamp(20px,5vw,28px);}
.read-next h3{font-family:var(--display); font-weight:700; font-size:1.05rem; margin:0 0 12px;}
.read-next a{display:block; padding:6px 0;}
footer.site{border-top:1px solid var(--line); max-width:760px; margin:40px auto 0;
  padding:24px clamp(20px,5vw,28px) 40px; font-size:14px; color:var(--ink-soft);}
footer.site a{margin-right:18px; color:var(--ink-soft);}
footer.site .disc{display:block; margin-top:12px; font-size:12.5px; opacity:.85;}