/* ===========================================================
   FG KIDS — DESIGN SYSTEM
   Palette: cream + deep forest green + coral + teal
   Display: Fraunces (warm, characterful serif)
   Body: Work Sans
   Data/eyebrow: IBM Plex Mono (the "lab notebook" register)
   Signature motif: the recipe-card — torn top edge + punch hole,
   used for stats, curriculum units, and recipe teasers. It ties
   directly back to the printed Scratch Nutrition Manual.
=========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Work+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --cream:        #F7F2E7;
  --cream-soft:   #EFE7D3;
  --forest:       #16302A;
  --forest-2:     #1E4238;
  --forest-3:     #26503F;
  --coral:        #E2703F;
  --coral-dark:   #C25A2E;
  --teal:         #3D9188;
  --teal-light:   #7FC4B8;
  --ink:          #1C2620;
  --ink-soft:     #445048;
  --line:         rgba(28,38,32,0.14);
  --line-on-dark: rgba(247,242,231,0.16);
  --cream-on-dark:#F7F2E7;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --max: 1180px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 14px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.4rem, 5vw, 4.2rem); font-weight:800;}
h2{font-size:clamp(1.9rem, 3.4vw, 2.8rem);}
h3{font-size:clamp(1.3rem, 2vw, 1.6rem); font-weight:600;}
p{margin:0 0 1em;}
.container{max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad);}
section{padding:clamp(56px,8vw,108px) 0;}

/* focus visibility */
a:focus-visible, button:focus-visible{outline:3px solid var(--coral); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* -------------------- eyebrow / labels -------------------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--coral-dark);
  display:inline-flex;
  align-items:center;
  gap:.5em;
  margin-bottom:1em;
  font-weight:600;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--coral);display:inline-block;}
.on-dark .eyebrow{color:var(--teal-light);}
.on-dark .eyebrow::before{background:var(--teal-light);}

/* -------------------- nav -------------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(247,242,231,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--pad); max-width:var(--max); margin:0 auto;
}
.logo{
  display:flex; align-items:center; gap:.6em;
  font-family:var(--font-display); font-weight:800; font-size:1.25rem;
  text-decoration:none; color:var(--forest);
}
.logo-mark{
  width:34px; height:34px; border-radius:9px;
  background:var(--forest);
  display:flex; align-items:center; justify-content:center;
  color:var(--cream); font-family:var(--font-display); font-weight:800; font-size:1.05rem;
  flex:none;
}
.logo-mark span{color:var(--coral);}
nav.main-nav{display:flex; align-items:center; gap:2px;}
nav.main-nav a{
  font-size:.95rem; font-weight:600; text-decoration:none;
  color:var(--ink); padding:10px 16px; border-radius:8px;
  transition:background .15s ease;
}
nav.main-nav a:hover{background:var(--cream-soft);}
nav.main-nav a.current{color:var(--forest); background:var(--cream-soft);}
.btn-donate{
  background:var(--coral); color:#fff !important; padding:10px 20px !important;
  border-radius:999px !important; margin-left:8px;
}
.btn-donate:hover{background:var(--coral-dark) !important;}
.nav-toggle{display:none; background:none;border:none;font-size:1.6rem;color:var(--forest);}

@media (max-width:920px){
  nav.main-nav{
    position:fixed; inset:64px 0 0 0; background:var(--cream);
    flex-direction:column; align-items:stretch; padding:12px var(--pad);
    display:none; overflow-y:auto;
  }
  nav.main-nav.open{display:flex;}
  nav.main-nav a{padding:16px 4px; border-bottom:1px solid var(--line); border-radius:0;}
  .btn-donate{margin:12px 4px 0; text-align:center;}
  .nav-toggle{display:block;}
}

/* -------------------- buttons -------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-body); font-weight:700; font-size:.98rem;
  padding:14px 26px; border-radius:999px; text-decoration:none;
  border:2px solid transparent; cursor:pointer; transition:transform .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--coral); color:#fff;}
.btn-primary:hover{background:var(--coral-dark);}
.btn-outline{border-color:var(--forest); color:var(--forest); background:transparent;}
.btn-outline:hover{background:var(--forest); color:var(--cream);}
.on-dark .btn-outline{border-color:var(--cream); color:var(--cream);}
.on-dark .btn-outline:hover{background:var(--cream); color:var(--forest);}
.btn-teal{background:var(--teal); color:#fff;}
.btn-teal:hover{background:#317a72;}

/* -------------------- sections / bg -------------------- */
.on-dark{background:var(--forest); color:var(--cream);}
.on-dark h1,.on-dark h2,.on-dark h3{color:var(--cream);}
.on-dark p{color:rgba(247,242,231,0.92);}
.on-soft{background:var(--cream-soft);}
.section-tight{padding-top:clamp(40px,5vw,64px); padding-bottom:clamp(40px,5vw,64px);}

/* -------------------- hero -------------------- */
.hero{
  padding:clamp(64px,10vw,120px) 0 clamp(48px,7vw,80px);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(circle at 18% 20%, rgba(226,112,63,0.12), transparent 40%),
                     radial-gradient(circle at 82% 12%, rgba(61,145,136,0.14), transparent 42%);
  pointer-events:none;
}
.hero .container{position:relative;}
.badge-pill{
  display:inline-flex; align-items:center; gap:.5em;
  border:1.5px solid var(--line); border-radius:999px;
  padding:8px 18px; font-size:.85rem; font-weight:600; color:var(--ink-soft);
  margin-bottom:1.6em; background:rgba(255,255,255,.5);
}
.hero h1{max-width:16ch; margin-left:auto; margin-right:auto;}
/* homepage: oversized striking headline leads the page */
.hero-home{padding-top:clamp(44px,6vw,76px);}
.hero h1.hero-xl{
  max-width:none;
  font-size:clamp(2.7rem, 12.5vw, 7.6rem);
  line-height:0.94;
  letter-spacing:-0.025em;
  margin:0 auto .28em;
  text-wrap:balance;
}
.hero-org{
  font-family:var(--font-mono);
  font-size:clamp(.82rem, 1.6vw, 1.02rem);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 1.5em;
}
.hero .lede{max-width:56ch; margin:1.2em auto 2em; font-size:1.15rem; color:var(--ink-soft);}
.hero-ctas{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

/* -------------------- stat / recipe-card motif -------------------- */
.card{
  background:#fff;
  position:relative;
  border-radius:4px;
  padding:30px 26px 26px;
  box-shadow:0 1px 0 var(--line);
  border:1px solid var(--line);
}
/* torn top edge */
.card::before{
  content:"";
  position:absolute; top:-1px; left:0; right:0; height:10px;
  background-image: linear-gradient(135deg, var(--cream) 50%, transparent 50%),
                     linear-gradient(-135deg, var(--cream) 50%, transparent 50%);
  background-size: 16px 16px;
  background-position: 0 -5px;
  background-repeat: repeat-x;
}
/* punch hole */
.card::after{
  content:"";
  position:absolute; top:14px; left:22px;
  width:9px; height:9px; border-radius:50%;
  background:var(--cream); box-shadow:inset 0 1px 2px rgba(0,0,0,.18);
}
.on-dark .card::before{background-image: linear-gradient(135deg, var(--forest) 50%, transparent 50%), linear-gradient(-135deg, var(--forest) 50%, transparent 50%);}
.on-dark .card::after{background:var(--forest);}
.on-dark .card{background:var(--forest-2); border-color:var(--line-on-dark);}

.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:2em;}
@media (max-width:800px){.stat-grid{grid-template-columns:1fr;}}
.stat-num{font-family:var(--font-display); font-size:2.6rem; font-weight:800; color:var(--coral); line-height:1;}
.on-dark .stat-num{color:var(--teal-light);}
.stat-label{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-top:.6em; display:block;}
.on-dark .stat-label{color:rgba(247,242,231,.82);}
.stat-source{font-size:.82rem; color:var(--ink-soft); margin-top:.4em;}
.on-dark .stat-source{color:rgba(247,242,231,.68);}

/* -------------------- grids -------------------- */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:28px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr;}}

.section-head{max-width:64ch; margin-bottom:2.2em;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

/* -------------------- placeholder media -------------------- */
.ph{
  background:repeating-linear-gradient(135deg, var(--cream-soft), var(--cream-soft) 10px, #fff 10px, #fff 20px);
  border:1.5px dashed var(--line);
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); font-family:var(--font-mono); font-size:.78rem;
  text-align:center; padding:16px; letter-spacing:.02em;
  min-height:220px;
}
.on-dark .ph{background:repeating-linear-gradient(135deg, var(--forest-2), var(--forest-2) 10px, var(--forest-3) 10px, var(--forest-3) 20px); border-color:var(--line-on-dark); color:rgba(247,242,231,.7);}

/* -------------------- pillar / feature cards -------------------- */
.pillar{
  border-left:3px solid var(--coral);
  padding:6px 0 6px 22px;
}
.pillar h3{margin-bottom:.3em;}
.pillar .num{font-family:var(--font-mono); font-size:.75rem; color:var(--coral-dark); letter-spacing:.08em;}

/* -------------------- unit / curriculum card -------------------- */
.unit-card{
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:20px; position:relative;
}
.unit-card .u-num{
  font-family:var(--font-mono); font-size:.72rem; color:var(--teal);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:.5em; display:block;
}
.unit-card h4{font-family:var(--font-display); font-size:1.1rem; margin:0 0 .3em; font-weight:700;}
.unit-card .theme{font-size:.88rem; color:var(--ink-soft);}

/* -------------------- recipe teaser -------------------- */
.recipe-card{
  background:#fff; border-radius:4px; overflow:hidden;
  border:1px solid var(--line); position:relative;
}
.recipe-card .ph{min-height:170px; border-radius:0; border:none; border-bottom:1px solid var(--line);}
.recipe-card .body{padding:20px;}
.recipe-card h4{font-family:var(--font-display); font-size:1.15rem; margin:0 0 .4em;}
.recipe-card .swap{
  margin-top:.9em; padding-top:.9em; border-top:1px dashed var(--line);
  font-size:.86rem; color:var(--teal); font-weight:600;
}

/* -------------------- data visuals: donut + pictogram -------------------- */
.data-viz{display:flex; align-items:center; justify-content:center;}
.donut-num{
  font-family:var(--font-display); font-weight:800;
  font-size:2.6rem; fill:var(--ink);
}
.donut-label{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.05em;
  text-transform:uppercase; fill:var(--ink-soft);
}
.on-dark .donut-num{fill:var(--cream);}
.on-dark .donut-label{fill:rgba(247,242,231,.7);}
.donut-arc{transition:stroke-dasharray 1.3s cubic-bezier(.16,.84,.44,1);}
.pictogram-caption{
  font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft);
  text-align:center; margin-top:.9em;
}
.viz-card{display:flex; flex-direction:column; align-items:center; text-align:center;}

/* -------------------- carousel -------------------- */
.carousel{
  position:relative;
  width:100%;
  max-width:440px;      /* portrait blueprint — sized to the image, no empty panel */
  margin:0 auto;
}
.carousel-track{
  position:relative; aspect-ratio: 1100/1956;
  border-radius:16px; overflow:hidden;
  border:6px solid var(--teal); background:var(--forest);
}
.carousel-slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity .35s ease;
}
.carousel-slide.active{opacity:1; visibility:visible;}
.carousel-slide img{width:100%; height:100%; object-fit:cover; display:block;}
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:none;
  background:var(--forest); color:#fff; font-size:1.5rem; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(28,38,32,.2);
  transition:background .15s ease, transform .15s ease;
  z-index:2;
}
.carousel-arrow:hover{background:var(--coral); transform:translateY(-50%) scale(1.06);}
.carousel-arrow.prev{left:-64px;}   /* arrows sit OUTSIDE the frame */
.carousel-arrow.next{right:-64px;}
@media (max-width:600px){
  /* on narrow screens, tuck the arrows just inside the edges so they stay on-screen */
  .carousel{max-width:min(440px,84vw);}
  .carousel-arrow{background:rgba(22,48,42,0.8);}
  .carousel-arrow.prev{left:10px;}
  .carousel-arrow.next{right:10px;}
}
.carousel-dots{
  position:absolute; bottom:14px; left:0; right:0;
  display:flex; justify-content:center; gap:8px;
}
.carousel-dots button{
  width:9px; height:9px; border-radius:50%; border:none; padding:0;
  background:rgba(255,255,255,0.45); cursor:pointer;
}
.carousel-dots button.active{background:var(--coral);}

/* -------------------- FAQ accordion -------------------- */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:20px 0; font-family:var(--font-body); font-weight:700; font-size:1.02rem;
  display:flex; justify-content:space-between; align-items:center; color:var(--ink);
}
.faq-q .chev{transition:transform .2s ease; color:var(--coral); font-size:1.2rem;}
.faq-item.open .faq-q .chev{transform:rotate(180deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a p{padding-bottom:20px; color:var(--ink-soft); max-width:64ch;}

/* -------------------- partner tiers -------------------- */
.tier-card{
  background:#fff; border-radius:12px; border:1px solid var(--line);
  padding:30px 26px; display:flex; flex-direction:column; height:100%;
}
.tier-card.popular{border-color:var(--coral); box-shadow:0 0 0 2px var(--coral);}
.tier-tag{
  align-self:flex-start; font-family:var(--font-mono); font-size:.68rem;
  letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; border-radius:999px;
  background:var(--cream-soft); color:var(--ink-soft); margin-bottom:1em;
}
.tier-card.popular .tier-tag{background:var(--coral); color:#fff;}
.tier-card ul{padding-left:1.1em; margin:1em 0; color:var(--ink-soft); font-size:.94rem;}
.tier-card li{margin-bottom:.4em;}
.tier-card .btn{margin-top:auto; align-self:stretch; justify-content:center; text-align:center;}
/* consistent, never-stretch partner icons */
.tier-icons{display:flex; gap:12px; align-items:center; margin-bottom:1.1em; min-height:60px;}
.tier-icon{height:60px; width:auto; object-fit:contain;}

/* -------------------- footer -------------------- */
footer.site-footer{
  background:var(--forest); color:rgba(247,242,231,.85);
  padding:60px 0 30px;
}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px;}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;}}
footer.site-footer h4{color:var(--cream); font-family:var(--font-mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1em; font-weight:600;}
footer.site-footer a{display:block; text-decoration:none; color:rgba(247,242,231,.75); padding:5px 0; font-size:.94rem;}
footer.site-footer a:hover{color:#fff;}
.footer-bottom{
  max-width:var(--max); margin:40px auto 0; padding:24px var(--pad) 0;
  border-top:1px solid var(--line-on-dark);
  font-size:.85rem; color:rgba(247,242,231,.55);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.footer-logo{font-family:var(--font-display); font-weight:800; color:var(--cream); font-size:1.3rem; margin-bottom:.6em;}
.footer-tagline{max-width:32ch; font-size:.94rem;}

/* -------------------- misc utility -------------------- */
.center{text-align:center;}
.mt-0{margin-top:0;}
.divider{height:1px; background:var(--line); margin:3em 0; border:none;}
.on-dark .divider{background:var(--line-on-dark);}
.tag-row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:1.6em 0;}
.tag-chip{
  border:1.5px solid var(--line); border-radius:999px; padding:8px 16px;
  font-size:.85rem; font-weight:600; display:inline-flex; align-items:center; gap:.5em;
  color:var(--ink-soft);
}
.quote-block{
  font-family:var(--font-display); font-size:1.5rem; font-style:italic; font-weight:500;
  max-width:44ch; margin:1em auto; line-height:1.4; color:var(--forest);
}
.on-dark .quote-block{color:var(--cream);}
.cite{font-family:var(--font-mono); font-size:.78rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em;}

/* ===========================================================
   IMAGE / FIGURE HELPERS  (added — image-rich pass)
=========================================================== */
.media{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  box-shadow:0 1px 0 var(--line);
}
.media img{width:100%; height:100%; object-fit:cover; display:block;}
.on-dark .media{border-color:var(--line-on-dark);}
.media-band{
  border-radius:var(--radius); overflow:hidden; margin:0 auto;
  border:1px solid var(--line); box-shadow:0 10px 30px rgba(28,38,32,.10);
}
.media-band img{width:100%; display:block;}
figure.fig{margin:0;}
figure.fig figcaption{
  font-family:var(--font-mono); font-size:.74rem; letter-spacing:.03em;
  color:var(--ink-soft); margin-top:.8em; text-align:center;
}
.on-dark figure.fig figcaption{color:rgba(247,242,231,.7);}
/* fixed-ratio media so cards stay tidy */
.media.ratio-16-9{aspect-ratio:16/9;}
.media.ratio-4-3{aspect-ratio:4/3;}

/* card image thumbnails (replaces the dashed [Icon:] placeholders) */
.card-media{
  border-radius:10px; overflow:hidden; margin-bottom:16px;
  border:1px solid var(--line); aspect-ratio:16/9;
}
.card-media img{width:100%; height:100%; object-fit:cover; display:block;}
.on-dark .card-media{border-color:var(--line-on-dark);}

/* ===========================================================
   OUTCOME CARDS — secondary-colour accents (readability pass)
=========================================================== */
.outcome-card{padding-top:34px;}
.outcome-card::before{ /* colored top rule replaces default torn edge tint */
  height:5px; top:0; border-radius:4px 4px 0 0;
  background:var(--coral); background-image:none;
}
.outcome-card h3{color:var(--coral); margin-bottom:.35em;}
/* alternate the accent so the grid has rhythm */
.outcome-card.teal::before{background:var(--teal);}
.outcome-card.teal h3{color:var(--teal);}
.on-dark .outcome-card h3{color:var(--coral);}
.on-dark .outcome-card.teal h3{color:var(--teal-light);}
.on-dark .outcome-card.teal::before{background:var(--teal-light);}
/* keep the punch-hole subtle on accented cards */
.outcome-card::after{top:16px;}

/* ===========================================================
   ARTICLE / PRESS PAGE  (Evans partnership)
=========================================================== */
.article{max-width:760px; margin:0 auto;}
.article h2{margin-top:1.6em;}
.article h3{margin-top:1.3em; color:var(--forest);}
.article p, .article li{font-size:1.06rem; color:var(--ink-soft); line-height:1.7;}
.article ul{padding-left:1.2em;}
.article li{margin-bottom:.5em;}
.article .lede{font-size:1.24rem; color:var(--ink); line-height:1.55;}
.article figure.fig{margin:2.2em 0;}
.article .pull{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:1.5rem; line-height:1.4; color:var(--forest);
  border-left:3px solid var(--coral); padding:.2em 0 .2em 24px; margin:1.8em 0;
}
.byline{
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:1.6em;
  display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:center;
}
.byline .dot{width:4px;height:4px;border-radius:50%;background:var(--coral);}