/* ============================================================
   SipurimKids landing page — design system

   Ported from the approved concept. Loaded only by home-jewish.html,
   so nothing here can affect Kahavat or the shared reader.
   Colours are the brand tokens from kahavat.css where they match, with
   the concept's extra hues added; type is the concept's serif/sans pair.
   ============================================================ */
.sk {
  --ink:#243B53; --ink-2:#334E68; --ink-3:#5C7189;
  --paper:#FFF9EE; --cream:#F8F0DF; --cream-2:#F1E4CB;
  --honey:#E5B955; --honey-dark:#A97716;
  --clay:#C9704E; --clay-soft:#F3D0BF;
  --sage:#7E9B76; --sage-soft:#DCE8D7;
  --sky:#8DB7C8; --sky-soft:#DDECF1;
  --plum:#785E78;
  --shadow:0 18px 50px rgba(56,42,20,.10);
  --shadow-sm:0 9px 24px rgba(56,42,20,.09);
  --radius:26px; --radius-sm:18px;
  --serif:'Frank Ruhl Libre','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --sans:'Nunito','Avenir Next',Avenir,'Segoe UI',system-ui,sans-serif;

  background:var(--paper); color:var(--ink);
  font-family:var(--sans); line-height:1.55;
}
.sk *{box-sizing:border-box}
.sk img,.sk svg{display:block;max-width:100%}
.sk a{color:inherit;text-decoration:none}
.sk button,.sk input,.sk select{font:inherit}
.sk .wrap{width:min(1180px,calc(100% - 40px));margin:auto}

/* header */
.sk-header{position:sticky;top:0;z-index:40;background:rgba(255,249,238,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(36,59,83,.08)}
.sk-nav{height:78px;display:flex;align-items:center;gap:26px}
.sk-brand{display:flex;align-items:center;gap:11px;min-width:max-content}
.sk-brand__mark{width:43px;height:43px;filter:drop-shadow(0 4px 5px rgba(77,55,23,.08))}
.sk-brand__name{font:700 25px/1 var(--serif);letter-spacing:-.5px}
.sk-brand__name .kids{color:var(--clay)}
.sk-navlinks{display:flex;gap:24px;margin-left:16px;font-weight:700;font-size:14px;color:var(--ink-2)}
.sk-navlinks a:hover{color:var(--clay)}
.sk-navactions{margin-left:auto;display:flex;align-items:center;gap:10px}
.sk-lang{display:flex;border:1px solid rgba(36,59,83,.13);border-radius:999px;padding:3px;background:#fff}
.sk-lang button{border:0;background:transparent;color:var(--ink-2);padding:7px 11px;border-radius:999px;cursor:pointer;font-weight:800;font-size:12px}
.sk-lang button.active{background:var(--ink);color:#fff}
.sk-iconbtn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(36,59,83,.12);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink)}

/* shared bits */
.sk .eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:1.6px;font-weight:850;color:var(--clay)}
.sk h1,.sk h2,.sk h3{font-family:var(--serif);margin:0;line-height:1.1;letter-spacing:-.5px;color:var(--ink)}
.sk h1{font-size:clamp(40px,5.4vw,70px)}
.sk h2{font-size:clamp(30px,3.8vw,46px)}
.sk h3{font-size:24px}
.sk .lede{font-size:18px;color:var(--ink-2);max-width:650px}
.sk .btn{border:0;border-radius:999px;padding:13px 19px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .2s,box-shadow .2s}
.sk .btn:hover{transform:translateY(-1px)}
.sk .btn-primary{background:var(--ink);color:#fff;box-shadow:0 10px 25px rgba(36,59,83,.18)}
.sk .btn-secondary{background:#fff;color:var(--ink);border:1px solid rgba(36,59,83,.12)}
.sk .btn-warm{background:var(--honey);color:#44300b}
.sk .section{padding:76px 0}
.sk .section-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:28px}
.sk .section-head p{margin:8px 0 0;color:var(--ink-2)}
.sk .link-arrow{font-weight:800;color:var(--clay);white-space:nowrap}
.sk .link-arrow:hover{text-decoration:underline}

/* hero */
.sk-hero{padding:60px 0 30px;overflow:hidden}
.sk-hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:58px;align-items:center}
.sk-hero__copy h1{max-width:720px}
.sk-hero__copy .accent{color:var(--clay);font-style:italic}
.sk-hero__copy .lede{margin:24px 0 26px}
.sk-hero__ctas{display:flex;gap:11px;flex-wrap:wrap}
.sk-hero__meta{display:flex;gap:18px;align-items:center;margin-top:28px;color:var(--ink-2);font-size:13px;font-weight:700;flex-wrap:wrap}
.sk-hero__meta span{display:flex;gap:7px;align-items:center}
.sk-dot{width:5px;height:5px;background:var(--honey);border-radius:50%}
/* the arch: a story doorway, echoing the brand mark */
.sk-window{position:relative;min-height:500px;border-radius:46% 46% 28px 28px;background:linear-gradient(180deg,#DDECF1,#EFF3E3 62%,#F4E4BF);box-shadow:var(--shadow);overflow:hidden;border:9px solid #fff}
.sk-window img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sk-window__orbit{position:absolute;border:1px solid rgba(255,255,255,.5);border-radius:50%;width:390px;height:390px;right:-120px;top:-100px}
/* The badge sits over artwork whose brightness varies scene to scene, so it
   carries its own opaque ground rather than relying on the image behind it —
   at 93% white over a pale sky the label was almost unreadable. */
.sk-window__badge{position:absolute;left:20px;bottom:20px;background:#fff;padding:12px 16px;border-radius:16px;
  box-shadow:0 10px 26px rgba(20,14,4,.28);display:flex;gap:10px;align-items:center;font-size:12px;font-weight:800;max-width:250px}
.sk-window__badge-txt{display:block;min-width:0}
.sk-window__badge small{display:block;color:var(--clay);text-transform:uppercase;letter-spacing:.9px;font-size:10px;font-weight:850}
.sk-window__badge strong{display:block;font-size:15px;font-family:var(--serif);color:var(--ink);line-height:1.2;margin-top:2px}
.sk-window{display:block;text-decoration:none}
.sk-window:hover .sk-window__badge{transform:translateY(-2px)}
.sk-window__badge{transition:transform .2s}
.sk-window__spark{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--honey);flex:none;color:#4a3408}

/* journeys */
.sk-series{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sk-series__card{position:relative;min-height:340px;border-radius:var(--radius);overflow:hidden;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--shadow-sm);transition:transform .25s;background:linear-gradient(160deg,#8DB7C8,#DDECF1 55%,#C9A96A)}
.sk-series__card:hover{transform:translateY(-4px)}
.sk-series__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sk-series__veil{position:absolute;inset:30% 0 0;background:linear-gradient(transparent,rgba(22,35,49,.8))}
.sk-series__body{position:relative;color:#fff}
.sk-series__pill{display:inline-flex;background:rgba(255,255,255,.18);backdrop-filter:blur(5px);padding:6px 10px;border-radius:999px;font-size:11px;font-weight:800;margin-bottom:10px}
.sk-series__card h3{font-size:27px;color:#fff}
.sk-series__card p{font-size:13px;margin:8px 0 0;color:rgba(255,255,255,.88)}

/* featured */
.sk-featured{background:var(--cream);border-block:1px solid rgba(36,59,83,.05)}
.sk-featured__card{display:grid;grid-template-columns:.88fr 1.12fr;background:#fff;border-radius:32px;overflow:hidden;box-shadow:var(--shadow)}
.sk-featured__art{min-height:430px;position:relative;overflow:hidden;background:linear-gradient(180deg,#BBD6DE,#F6E4BC)}
.sk-featured__art img{width:100%;height:100%;object-fit:cover}
.sk-featured__copy{padding:46px 50px;align-self:center}
.sk-featured__value{display:inline-block;padding:7px 10px;border-radius:999px;background:var(--sage-soft);color:#445B3D;font-weight:800;font-size:12px}
.sk-featured__copy h2{font-size:clamp(28px,3.4vw,42px);margin:14px 0 13px}
.sk-featured__copy p{color:var(--ink-2);font-size:17px}
.sk-quote{margin:25px 0;padding:18px 20px;border-left:3px solid var(--honey);background:var(--paper);border-radius:0 14px 14px 0;font-family:var(--serif);font-size:19px}

/* values */
.sk-valgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.sk-val{background:#fff;border:1px solid rgba(36,59,83,.08);border-radius:18px;padding:18px 15px;min-height:132px;display:flex;flex-direction:column;justify-content:space-between;transition:.2s;cursor:pointer;text-align:start;color:inherit;font:inherit}
.sk-val__body{display:block}
.sk-val:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.sk-val__icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:19px}
.sk-val strong{font-family:var(--serif);font-size:17px;display:block}
.sk-val small{color:var(--ink-3)}

/* library */
.sk-library{background:#fff}
.sk-tools{display:flex;gap:10px;margin-bottom:22px;align-items:center;flex-wrap:wrap}
.sk-search{flex:1;position:relative;min-width:240px}
.sk-search input{width:100%;height:48px;border-radius:999px;border:1px solid rgba(36,59,83,.13);padding:0 18px 0 45px;background:var(--paper);outline:none;color:var(--ink)}
.sk-search input:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(141,183,200,.18)}
.sk-search svg{position:absolute;left:16px;top:15px}
.sk-select{height:48px;border-radius:999px;border:1px solid rgba(36,59,83,.13);padding:0 16px;background:var(--paper);color:var(--ink);font-weight:700}
/* browse: left filter rail + results, mirroring the Kahavat stories page */
.sk-browse{display:grid;grid-template-columns:232px minmax(0,1fr);gap:26px;align-items:start}
.sk-filters{position:sticky;top:96px;background:var(--paper);border:1px solid rgba(36,59,83,.09);border-radius:20px;padding:16px 16px 18px;max-height:calc(100vh - 120px);overflow-y:auto}
.sk-filters__head{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:1.2px;color:var(--ink-3);margin-bottom:12px}
.sk-clear{border:0;background:transparent;color:var(--clay);font-weight:800;font-size:12px;cursor:pointer;text-transform:none;letter-spacing:0}
.sk-fgroup+.sk-fgroup{margin-top:18px;padding-top:16px;border-top:1px solid rgba(36,59,83,.08)}
.sk-fgroup h4{font-family:var(--serif);font-size:15px;margin:0 0 8px;color:var(--ink)}
.sk-opt{display:flex;width:100%;align-items:center;gap:8px;border:0;background:transparent;padding:6px 8px;border-radius:10px;cursor:pointer;font-size:13px;color:var(--ink-2);text-align:start;line-height:1.25}
.sk-opt:hover{background:var(--cream)}
.sk-opt.is-on{background:var(--ink);color:#fff;font-weight:800}
.sk-opt b{margin-inline-start:auto;font-weight:700;font-size:11px;opacity:.72}
.sk-optmore{border:0;background:transparent;color:var(--clay);font-weight:800;font-size:12px;cursor:pointer;padding:6px 8px}
.sk-check-opt{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);cursor:pointer;padding:2px 8px}
.sk-resultbar{font-size:13px;color:var(--ink-3);font-weight:700;margin-bottom:12px}
.sk-filtertoggle{display:none}

.sk-storygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.sk-story{border:1px solid rgba(36,59,83,.08);border-radius:20px;overflow:hidden;background:var(--paper);transition:transform .2s,box-shadow .2s;display:block}
.sk-story:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
/* these are block boxes; as inline spans the fixed height was ignored and
   the text ran over the image */
.sk-story__thumb{display:block;height:155px;position:relative;overflow:hidden;background:var(--cream-2)}
.sk-story__thumb img{width:100%;height:100%;object-fit:cover}
.sk-story__soon{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-3);font-size:11px;font-weight:800;text-align:center;padding:10px}
.sk-story__info{display:block;padding:15px 15px 17px}
.sk-story__meta{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--clay);font-weight:850;min-height:13px}
.sk-story__info h3{font-size:19px;margin:5px 0}
.sk-story__info p{font-size:12px;color:var(--ink-2);margin:0}
.sk-story__tag{display:inline-block;margin-top:11px;padding:5px 8px;border-radius:999px;background:#fff;border:1px solid rgba(36,59,83,.08);font-size:10px;font-weight:800}
.sk-none{display:none;padding:28px;border-radius:18px;background:var(--paper);color:var(--ink-2);text-align:center}
.sk-none.show{display:block}
.sk-more{display:flex;justify-content:center;margin-top:26px}

/* mission */
.sk-mission{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
.sk-mission__art{border-radius:32px;background:linear-gradient(150deg,#F1D5C5,#F5EACB);min-height:420px;overflow:hidden;position:relative}
.sk-mission__art img{width:100%;height:100%;object-fit:cover}
.sk-mission .lede{margin:18px 0}
.sk-checks{display:grid;gap:11px;margin-top:25px}
.sk-check{display:flex;gap:11px;align-items:flex-start}
.sk-check i{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:var(--sage-soft);font-style:normal;color:#48623f;font-size:12px;flex:none}
.sk-check strong{display:block}
.sk-check span{font-size:13px;color:var(--ink-2)}

/* footer */
.sk-footer{background:var(--ink);color:#fff;padding:58px 0 28px}
.sk-footer__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px}
.sk-footer p{color:#C9D3DD;max-width:350px}
.sk-footer__title{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:#97ABBC;font-weight:850;margin-bottom:12px}
.sk-footer__links{display:grid;gap:9px;font-size:13px;color:#DFE7ED}
.sk-footer__bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;gap:20px;color:#AFC0CD;font-size:12px;flex-wrap:wrap}

/* Dark theme. The landing page previously ignored the site toggle, so going
   from a parchment home into a dark story page was a jarring flip. It now
   follows data-theme like every other page. The accent hues stay; the
   surfaces invert and the ink blue lifts, since it cannot read on dark. */
html[data-theme="dark"] .sk {
  --ink:#EFE6D7; --ink-2:#C3CFDC; --ink-3:#8B9AAA;
  --paper:#101822; --cream:#16202C; --cream-2:#1D2836;
  --honey:#EFC468; --clay:#E0855F; --sage:#9BB98C; --sky:#8FA9C6;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --shadow-sm:0 9px 24px rgba(0,0,0,.4);
}
html[data-theme="dark"] .sk-header{background:rgba(16,24,34,.92);border-bottom-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .sk-lang,
html[data-theme="dark"] .sk-iconbtn,
html[data-theme="dark"] .sk-val,
html[data-theme="dark"] .sk-featured__card{background:#1A2532;border-color:rgba(255,255,255,.10)}
html[data-theme="dark"] .sk-lang button.active{background:var(--honey);color:#2A1E06}
html[data-theme="dark"] .sk-library{background:#141D28}
html[data-theme="dark"] .sk-filters,
html[data-theme="dark"] .sk-story{background:#1A2532;border-color:rgba(255,255,255,.09)}
html[data-theme="dark"] .sk-opt.is-on{background:var(--honey);color:#2A1E06}
html[data-theme="dark"] .sk-story__tag{background:#22303F;border-color:rgba(255,255,255,.10)}
html[data-theme="dark"] .sk-search input,
html[data-theme="dark"] .sk-select{background:#141D28;border-color:rgba(255,255,255,.12);color:var(--ink)}
html[data-theme="dark"] .btn-primary{background:var(--honey);color:#2A1E06;box-shadow:none}
html[data-theme="dark"] .btn-secondary{background:#1A2532;color:var(--ink);border-color:rgba(255,255,255,.14)}
html[data-theme="dark"] .sk-window{border-color:#1A2532}
html[data-theme="dark"] .sk-quote{background:#141D28}
html[data-theme="dark"] .sk-footer{background:#0B1219}

/* Hebrew reverses the whole page, so the directional bits flip with it. */
.sk[dir="rtl"] .sk-navactions{margin-left:0;margin-right:auto}
.sk[dir="rtl"] .sk-navlinks{margin-left:0;margin-right:16px}
.sk[dir="rtl"] .sk-search svg{left:auto;right:16px}
.sk[dir="rtl"] .sk-search input{padding:0 45px 0 18px}
.sk[dir="rtl"] .sk-quote{border-left:0;border-right:3px solid var(--honey);border-radius:14px 0 0 14px}
.sk[dir="rtl"] .sk-window__badge{left:auto;right:20px}

@media(max-width:1000px){
  .sk-browse{grid-template-columns:1fr}
  .sk-filters{position:static;max-height:none;display:none}
  .sk-filters.open{display:block}
  .sk-filtertoggle{display:inline-flex;align-items:center}
  .sk-storygrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .sk-navlinks{display:none}
  .sk-hero__grid,.sk-mission,.sk-featured__card{grid-template-columns:1fr}
  .sk-hero{padding-top:36px}
  .sk-window{min-height:380px}
  .sk-series{grid-template-columns:1fr 1fr}
  .sk-series__card:last-child{grid-column:1/-1}
  .sk-valgrid{grid-template-columns:repeat(3,1fr)}
  .sk-storygrid{grid-template-columns:repeat(2,1fr)}
  .sk-footer__grid{grid-template-columns:1.4fr 1fr 1fr}
  .sk-featured__copy{padding:34px}
  .sk-featured__art{min-height:320px}
}
@media(max-width:560px){
  .sk-valgrid{grid-template-columns:repeat(2,1fr)}
  .sk-storygrid{grid-template-columns:1fr}
  .sk-footer__grid{grid-template-columns:1fr}
}