:root{
  --cream:#FBF1E2;
  --paper:#FFFDF8;
  --butter:#F6E1BA;
  --ink:#3A2A1E;
  --ink-soft:#7A6652;
  --poppy:#D1453A;
  --poppy-deep:#A52E28;
  --navy:#243357;
  --navy-deep:#182540;
  --line:rgba(58,42,30,0.12);
  --teal:#0E9E96;
  --teal-deep:#0B7871;
  --grass-deep:#2E8A37;
  --sunny:#F6C445;
  --sunny-deep:#A8750A;
  --sky-deep:#1F6FA8;
  --pink-deep:#C13468;
}
*{box-sizing:border-box;}
html,body{direction:rtl;}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--cream);color:var(--ink);font-family:'Heebo','Segoe UI',sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;display:block;}
h1,h2{font-family:'Secular One','Heebo',sans-serif;font-weight:400;line-height:1.25;margin:0;}
p{margin:0;}
a{color:inherit;}
.act-wrap{max-width:1120px;margin:0 auto;padding-inline:20px;}

/* top menu: same as the home page (styles.css .topnav) */
.topnav{position:sticky;top:0;z-index:50;background:rgba(255,253,248,0.94);backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(36,51,87,0.08);}
.topnav-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:32px;padding-block:4px;flex-wrap:wrap;max-width:none;}
.nav-toggle{display:none;}
.topnav-brand{font-family:'Gveret Levin',cursive;font-weight:400;font-size:2.2rem;color:var(--navy-deep);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:10px;}
.topnav-brand img{height:40px;width:auto;display:block;}
.topnav-links{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.topnav-links a:not(.topnav-cta):not(:last-of-type)::after{content:'';display:inline-block;width:1px;height:14px;background:var(--line);margin-inline-start:14px;vertical-align:middle;}
.topnav-links a{text-decoration:none;color:var(--ink-soft);font-weight:600;font-size:0.92rem;white-space:nowrap;position:relative;}
.topnav-links a:hover,.topnav-links a[aria-current="page"]{color:var(--poppy-deep);}
.topnav-links a.topnav-cta{background:var(--poppy);color:#fff;padding:9px 18px;border-radius:999px;font-weight:700;margin-inline-start:6px;}
.topnav-links a.topnav-cta:hover{background:var(--poppy-deep);color:#fff;}
@media (min-width:901px){
  .topnav-brand{order:-1;}
  .topnav-links{flex:1;}
  .topnav-links a.topnav-cta{margin-inline-start:auto;}
  .topnav-links a:not(.topnav-cta):not(:last-of-type):nth-last-child(2)::after{display:none;}
}
@media (max-width:900px){
  .topnav-inner{gap:10px;}
  .topnav-brand{font-size:1.7rem;order:-1;gap:8px;}
  .topnav-brand img{height:32px;}
  .nav-toggle{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:5px;width:34px;height:34px;background:none;border:none;cursor:pointer;padding:0;}
  .nav-toggle span{display:block;height:2.5px;width:100%;background:var(--navy-deep);border-radius:2px;transition:transform .2s ease, opacity .2s ease;}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
  .topnav-links{display:none;position:absolute;top:calc(100% + 6px);left:12px;right:auto;z-index:60;width:max-content;min-width:200px;max-width:calc(100vw - 24px);flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 28px rgba(36,51,87,0.16);padding:6px 18px 14px;font-size:0.95rem;}
  .topnav-links.open{display:flex;}
  .topnav-links a{padding:12px 0;border-bottom:1px solid var(--line);}
  .topnav-links a:nth-last-child(2){border-bottom:none;}
  .topnav-links a:not(.topnav-cta):not(:last-of-type)::after{display:none;}
  .topnav-links a.topnav-cta{margin:14px 0 4px;text-align:center;border-bottom:none;padding:10px 14px;}
}

/* heading */
.act-head{text-align:center;max-width:760px;margin:0 auto 18px;}
.act-kicker{display:inline-block;background:var(--butter);color:var(--sunny-deep);font-weight:800;font-size:.85rem;padding:3px 12px;border-radius:999px;margin-bottom:6px;}
.act-head h1{font-size:2.1rem;color:var(--navy);margin-bottom:6px;}
.act-lead{color:var(--ink-soft);font-size:1rem;line-height:1.55;}
.act-lead-short{display:none;}
.act-back-mob{display:none;}
.act-short{display:none;}

/* cards */
.act-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:clamp(1000px, calc(60vh + 460px), 1280px);margin:0 auto;}
.act-card{--accent:var(--teal);--accent-deep:var(--teal-deep);background:var(--paper);border-radius:22px;border:1px solid var(--line);box-shadow:0 8px 24px rgba(58,42,30,.08);overflow:hidden;display:flex;flex-direction:column;}
.act-card.age-a{--accent:#F9DC9C;--accent-deep:var(--sunny-deep);}
.act-card.age-b{--accent:#BEDDF4;--accent-deep:var(--sky-deep);}
.act-card.age-c{--accent:#F7C6DA;--accent-deep:var(--pink-deep);}
.act-thumb{position:relative;display:block;width:100%;padding:14px 56px 0;margin:0;border:0;background:var(--accent);cursor:zoom-in;height:clamp(90px, calc(50vh - 242px - var(--promo-h,0px)), 380px);overflow:hidden;}
.act-thumb img{width:100%;height:auto;border-radius:6px 6px 0 0;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:transform .25s ease;}
.act-thumb:hover img,.act-thumb:focus-visible img{transform:translateY(-6px);}
.act-peek{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:rgba(36,51,87,.88);color:#fff;font-weight:700;font-size:.9rem;padding:6px 16px;border-radius:999px;white-space:nowrap;}
.act-body{padding:14px 18px 16px;display:flex;flex-direction:column;flex:1;}
.act-age{align-self:flex-start;background:var(--accent);color:var(--accent-deep);font-family:'Secular One',sans-serif;font-size:1.15rem;padding:2px 14px;border-radius:999px;margin-bottom:6px;}
.act-body h2{font-size:1.12rem;color:var(--navy);margin-bottom:4px;}
.act-body ul{margin:0 0 8px;padding:0 18px 0 0;color:var(--ink);font-size:.92rem;line-height:1.5;}
.act-body li{margin-bottom:1px;}
.act-body li::marker{color:var(--accent-deep);}
.act-meta{color:var(--ink-soft);font-size:.82rem;margin-top:auto;margin-bottom:10px;}
.act-btns{display:flex;gap:10px;}
.act-btns .act-btn{flex:1;}

.act-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:800;font-size:.95rem;padding:8px 14px;border-radius:999px;background:var(--poppy);color:#fff;text-decoration:none;border:2px solid var(--poppy);cursor:pointer;transition:background .2s;white-space:nowrap;}
.act-btn:hover{background:var(--poppy-deep);border-color:var(--poppy-deep);}
.act-btn-ghost{background:#fff;color:var(--navy);border-color:var(--navy);}
.act-btn-ghost:hover{background:var(--navy);border-color:var(--navy);color:#fff;}
.act-btn:focus-visible,.act-thumb:focus-visible,.act-close:focus-visible{outline:3px solid var(--sky-deep);outline-offset:3px;}

.act-note{text-align:center;color:var(--ink-soft);margin:34px auto 18px;max-width:640px;}
.act-home{text-align:center;margin:22px 0 10px;}

/* tall screens: cards grow with the screen height, the waves stay behind their lower part,
   and the last (pink) wave colour runs down to the footer - no empty band anywhere */
main.act-wrap{flex:1;display:flex;flex-direction:column;width:100%;}
.act-stage{flex:1;display:flex;flex-direction:column;}
.act-grid-wrap{position:relative;padding-bottom:22px;}
.act-grid-wrap .act-grid{position:relative;z-index:1;}
.act-space{flex:.3;}
.act-fill{flex:1;}
.act-foot{margin-top:0;}
/* the home page's footer waves, thicker, sitting behind the lower half of the booklet cards */


.act-foot{background:var(--cream);text-align:center;padding:24px 20px;color:var(--ink-soft);font-size:.92rem;}
.act-foot div{margin-top:6px;}

/* preview modal */
.act-modal{position:fixed;inset:0;z-index:100;background:rgba(24,37,64,.78);display:flex;align-items:center;justify-content:center;padding:20px;}
.act-modal[hidden]{display:none;}
.act-modal-box{background:var(--paper);border-radius:18px;width:min(760px,100%);height:100%;max-height:100%;display:flex;flex-direction:column;overflow:hidden;}
.act-modal-bar{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);}
.act-modal-bar h2{flex:1;font-size:1.3rem;color:var(--navy);}
.act-modal-bar .act-btn{padding:8px 18px;}
.act-close{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:#fff;font-size:1.7rem;line-height:1;color:var(--navy);cursor:pointer;}
.act-pages{overflow-y:auto;padding:20px;display:grid;grid-template-columns:1fr;justify-items:center;gap:22px;background:var(--cream);flex:1;}
.act-pages figure{width:100%;max-width:min(600px, calc((100vh - 170px) * 0.707));}
.act-pages figure{margin:0;}
.act-pages img{width:100%;height:auto;border-radius:4px;box-shadow:0 4px 14px rgba(0,0,0,.15);background:#fff;}
.act-pages figcaption{text-align:center;color:var(--ink-soft);font-size:.85rem;margin-top:6px;}
body.act-lock{overflow:hidden;}

@media (max-width:900px){
  .act-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto;gap:12px;}
  .act-lead{font-size:.88rem;}
  .act-lead-long{display:none;}
  .act-lead-short{display:block;}
  .act-head h1{font-size:1.6rem;}
  .act-waves{display:none;}
  /* phone: no stretching spacers - the sizes follow the screen height instead, and the leftover splits above and below */
  .act-space,.act-fill{display:none;}
  .act-stage{flex:none;}
  .act-foot{padding:14px 16px;font-size:.82rem;}
  main.act-wrap{justify-content:flex-start;padding-block:10px 14px;}
  .act-grid-wrap{padding-bottom:0;}
  html .act-grid{gap:clamp(12px, calc(5.7vh - 36px), 22px);}
  html .act-body{padding:clamp(10px, calc(4.5vh - 28px), 16px) 14px;}
  .act-body h2{margin-bottom:clamp(2px,.8vh,8px);}
  .act-meta{margin:2px 0 8px;}
  html .act-btns .act-btn{padding-block:clamp(7px, calc(2.3vh - 12.4px), 10px);}
  html .act-head{margin:0 auto clamp(14px, calc(4.5vh - 24px), 22px);}
  .act-back-mob{display:inline-block;margin-bottom:clamp(6px,1.4vh,14px);font-size:.85rem;font-weight:700;color:var(--navy);text-decoration:none;padding:5px 12px;border:1.5px solid var(--line);border-radius:999px;background:#fff;}
  /* phone/tablet: each booklet is a compact row - thumbnail on the right, details beside it */
  .act-card{flex-direction:row;border-radius:18px;}
  /* phone: text only - the page preview stays one tap away (צפייה מקדימה) */
  .act-thumb{display:none;}
  .act-peek{display:none;}
  .act-body{padding:10px 12px 12px;}
  .act-age{font-size:1rem;margin-bottom:2px;}
  .act-body h2{font-size:1rem;}
  .act-body ul{display:none;}
  .act-short{display:block;font-size:.84rem;color:var(--ink);margin:0 0 2px;}
  .act-meta{margin:2px 0 8px;}
  .act-btns{gap:8px;}
  .act-btns .act-btn{padding-inline:8px;font-size:.84rem;border-width:1.5px;}
  .act-body{padding:10px 14px 12px;}
  .act-pages{grid-template-columns:1fr;}
}
/* short phones: the activity lines give way so the three booklets still fit */
@media (max-width:520px){
  .act-head h1{font-size:2rem;}
  .act-btns .act-btn{padding-inline:8px;font-size:.84rem;}
  .act-modal{padding:0;}
  .act-modal-box{border-radius:0;height:100%;}
  .act-modal-bar h2{font-size:1.05rem;}
}
@media (prefers-reduced-motion:reduce){.act-thumb img{transition:none;}}

/* cookie consent strip (analytics.js) - same look as the home page */
.cookie-banner{position:fixed;z-index:70;left:0;right:0;bottom:0;background:#fff;color:var(--ink);border-top:1px solid var(--line);padding:12px 40px;text-align:center;font-size:0.78rem;line-height:1.4;}
.cookie-banner[hidden]{display:none;}
.cookie-text{margin:0 auto;max-width:640px;}
.cookie-accept{background:none;border:none;padding:2px 4px;cursor:pointer;font:inherit;font-weight:700;color:var(--navy-deep);text-decoration:underline;}
.cookie-close{position:absolute;top:4px;left:6px;width:32px;height:32px;background:none;border:none;cursor:pointer;font-size:1.3rem;line-height:1;color:var(--ink);}
.cookie-policy-link{color:var(--navy-deep);}
.act-cookie-link{background:none;border:none;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer;}
@media (min-width:761px){.cookie-banner{left:auto;right:16px;bottom:16px;width:340px;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(24,37,64,0.12);padding:14px 16px 14px 40px;text-align:start;}}

/* social icons in the footer - same as the home page */
.act-social{display:flex;gap:20px;justify-content:center;align-items:center;margin-bottom:6px;}
.act-social a{display:flex;align-items:center;}
.act-ig{color:var(--pink-deep);}
.act-fb{color:var(--sky-deep);}

/* party decor: bunting across the top + a little confetti on the sides (replaces the waves) */
.act-party{position:absolute;inset:64px 0 0 0;pointer-events:none;z-index:0;overflow:hidden;}
.act-bunting{display:block;width:100%;height:var(--bunt);background:url(images/bunting.svg) repeat-x center top/auto 100%;}
:root{--bunt:clamp(40px,4.2vw,70px);}
.cf{position:absolute;display:block;opacity:.6}
.cf-c{width:10px;height:10px;border-radius:50%}
.cf-r{width:14px;height:6px;border-radius:2px}
.cf-p{width:10px;height:10px;clip-path:polygon(50% 0,100% 100%,0 100%)}
main.act-wrap{position:relative;z-index:1;}
html .act-head{padding-top:calc(var(--bunt) + 10px);} /* title always starts below the flags */
@media (max-width:900px){ :root{--bunt:30px;} .cf{display:none;} }

/* short screens: everything still fits in one screen without scrolling */
@media (min-width:901px) and (max-height:920px){
  .act-thumb{height:clamp(90px, calc(50vh - 270px), 380px);}
  .act-body ul{display:none;}
  .act-short{display:block;font-size:.92rem;color:var(--ink);margin:0 0 4px;}
  .act-body h2{margin-bottom:2px;}
}
@media (max-width:900px) and (max-height:960px){
  .act-meta{display:none;}
  .act-short{margin-bottom:8px!important;}
  .act-head h1{font-size:1.45rem;}
  .act-back-mob{margin-bottom:6px;}
  .act-foot{padding:10px 16px;}
  .act-social{margin-bottom:2px;}
  .act-social svg{width:22px;height:22px;}
}

/* very short phones (iPhone SE): drop the one-line descriptions and the intro line */
@media (max-width:900px) and (max-height:700px){
  .act-short,.act-lead-short{display:none!important;}
  .act-back-mob{font-size:.8rem;padding:3px 10px;margin-bottom:4px;}
  html .act-head{margin-bottom:10px;}
  html .act-grid{gap:8px;}
  html .act-body{padding:8px 12px;}
  .act-foot{font-size:.75rem;}
}

/* bottom bar - copied from styles.css so the booklets page matches the home page */
  /* ---------- promo banner: sticky bottom bar with WhatsApp + waitlist buttons (all widths) ---------- */
  .promo-banner{
    position:fixed;left:0;right:0;bottom:0;z-index:55;
    background:var(--navy-deep);color:#fff;text-align:center;
    font-family:'Heebo',sans-serif;
    box-shadow:0 -6px 18px rgba(24,37,64,0.18);
    /* desktop: one row - WhatsApp (right) · text · waitlist (left) */
    display:flex;align-items:center;justify-content:space-between;gap:28px;
    padding:10px 24px calc(10px + env(safe-area-inset-bottom));
    font-weight:700;font-size:1.05rem;
  }
  .promo-banner b{color:var(--sunny);}
  .promo-text{margin:0;order:1;}
  .promo-actions{display:contents;}
  .promo-btn{
    display:flex;align-items:center;justify-content:center;gap:6px;
    min-height:44px;border-radius:999px;padding:8px 22px;
    font-weight:700;font-size:0.95rem;line-height:1.15;text-decoration:none;color:#fff;
    white-space:nowrap;
  }
  .promo-wa{order:0;}
  .promo-buy{order:2;}
  .promo-btn svg{width:20px;height:20px;flex:none;}
  .wa-short{display:none;}
  .promo-ext{display:none;}
  @media (min-width:1200px){ .promo-ext{display:inline;} }
  @media (min-width:761px) and (max-width:960px){ html .promo-banner{font-size:0.98rem;gap:12px;padding-inline:12px;} html .promo-btn{padding:10px 16px;font-size:0.95rem;} } /* longer bar sentences only where they fit on one line */
  @media (max-width:389px){ .wa-long{display:none;} .wa-short{display:inline;} } /* one line on small phones */
  /* WhatsApp: green outline + green label on navy (all widths) - recognisable without shouting over the red CTA */
  .promo-wa{background:rgba(37,211,102,0.10);color:#25D366;border:2px solid #25D366;}
  .promo-wa svg{color:#25D366;}
  .promo-buy{background:var(--poppy);}
  .promo-wa:hover,.promo-wa:active{background:rgba(37,211,102,0.20);}
  /* rotating bar sentences (script.js) */
  .promo-line{display:none;}
  .promo-line.active{display:inline;animation:promoIn .45s ease;}
  @keyframes promoIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
  @media (prefers-reduced-motion:reduce){ .promo-line.active{animation:none;} }
  .promo-buy:hover,.promo-buy:active{background:var(--poppy-deep);}
  @media (max-width:760px){
    /* phone: text on top, the two buttons side by side under it */
    /* slim and soft: small text, low pill buttons */
    .promo-banner{display:block;padding:6px 12px calc(6px + env(safe-area-inset-bottom));font-size:0.76rem;line-height:1.3;font-weight:500;box-shadow:0 -3px 10px rgba(24,37,64,0.12);}
    .promo-actions{display:flex;gap:8px;margin-top:5px;}
    .promo-btn{flex:1 1 0;min-width:0;min-height:34px;padding:4px 6px;gap:5px;font-size:0.82rem;white-space:normal;}
    .promo-wa{border-width:1.5px;}
    .promo-btn svg{width:16px;height:16px;}
  }
  @media (min-width:761px){
    .promo-banner{justify-content:center;gap:22px;padding-block:14px calc(14px + env(safe-area-inset-bottom));font-size:1.2rem;}
    .promo-actions{display:flex;gap:10px;order:2;}
    .promo-text{order:1;}
    .promo-btn{min-height:50px;padding:10px 28px;font-size:1.05rem;}
    .promo-btn svg{width:22px;height:22px;}
    .promo-buy{order:0;}
    .promo-wa{order:1;}
  }

:root{--sunny:#F6C445;}
body{padding-bottom:var(--promo-h,78px);}
.cookie-banner{bottom:var(--promo-h,78px)!important;}

/* with the bottom bar, phones under ~900px tall lose the one-line descriptions; very short ones also the back pill */
@media (max-width:900px) and (max-height:900px){ .act-short{display:none!important;} }
@media (max-width:900px) and (max-height:820px){ .act-back-mob{display:none;} .act-lead-short{display:none;} }
@media (max-width:900px) and (max-height:700px){ .act-foot .act-social{display:none;} }
@media (min-width:901px) and (max-height:800px){
  .act-short,.act-meta{display:none!important;}
  .act-lead{font-size:.9rem;line-height:1.45;}
  .act-thumb{height:clamp(80px, calc(50vh - 290px), 380px);}
  .act-foot{padding-block:10px;}
  .act-social{display:none;}
}

/* desktop: the booklet images take whatever height is left, so there is never a gap above the footer
   and never a scrollbar (overrides the fixed thumbnail heights above) */
@media (min-width:901px){
  .act-space,.act-fill{display:none;}
  main.act-wrap{flex:1;min-height:0;}
  .act-stage{flex:1;min-height:0;display:flex;flex-direction:column;}
  .act-grid-wrap{flex:1;min-height:0;display:flex;padding-bottom:18px;}
  .act-grid-wrap .act-grid{flex:1;min-height:0;align-items:stretch;}
  .act-card{min-height:0;}
  html .act-thumb{height:auto;flex:1 1 0;min-height:80px;max-height:620px;}
  body{height:100vh;height:100dvh;}
}