/* ============================================================
   "ספר לי עליו" — החוברת כדף, בתוך עיצוב הכרזה.
   הטקסט: O-output/PROJECTS/sefer-li-alav/ספר-לי-עליו-טיוטה.md (המאסטר), מילה במילה.
   מהחוברת (v24) נלקחו: הנר, איורי הבוטניקה, עיגולי השלבים, כרטיסי הטיפים,
   הפסוקים המנוקדים בפרנק רוהל, ו"רגע לפני שנכנסים" מהכריכה האחורית.
   ============================================================ */
:root{
  --card:#f7efde;    /* נייר בהיר: הכרטיסים, כמו דפי החוברת */
  --verse:'Frank Ruhl Libre','Times New Roman',serif;
}
.sl section[id],.sl [id^="h-"]{scroll-margin-top:24px}
.sl img{height:auto}

/* ---------- פתיחה: הכותרת, והחוברת עם הנר ---------- */
.sl-hero{position:relative;overflow-x:clip;padding-block:clamp(40px,6vw,90px) clamp(56px,7vw,110px)}
.sl-hero-in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(24px,5vw,80px);align-items:center}
.sl-kick{font-family:var(--head);font-size:clamp(18px,1.6vw,22px);letter-spacing:.14em;color:var(--red);margin-bottom:clamp(14px,2vw,24px)}
.sl-h1{font-size:clamp(110px,17vw,250px);line-height:.8;margin-bottom:clamp(20px,3vw,34px)}
.sl-h1 .l{display:block;white-space:nowrap}
.sl-h1 .l2{margin-inline-start:.45em;color:var(--red);--mis-c:var(--orange)}
.sl-sub{font-family:var(--head);font-size:clamp(23px,2.3vw,31px);line-height:1.3;max-width:20em;border-inline-start:6px solid var(--brown);padding-inline-start:18px;margin-bottom:12px}
.sl-by{font-size:19px;padding-inline-start:24px}
.sl-cover{position:relative;width:min(100%,380px);margin-inline:auto}
.sl-cover::before{content:"";position:absolute;inset:-28px -36px auto auto;width:64%;height:74%;background-color:var(--orange);background-image:var(--grain-light)}
.sl-card{position:relative;background-color:var(--card);padding:18px;transform:rotate(-2deg);box-shadow:-14px 14px 0 var(--brown)}
.sl-card-in{border:1.5px solid var(--red);outline:1.5px solid var(--red);outline-offset:-7px;padding:22px 16px 18px;text-align:center}
.sl-card .k{font-family:var(--head);font-size:13px;letter-spacing:.2em;color:var(--red)}
.sl-card .t{font-family:var(--display);font-weight:700;font-size:58px;line-height:.85;margin-block:8px 2px}
.sl-card img{width:82%;margin:4px auto 0;mix-blend-mode:multiply}
@media (max-width:820px){
  .sl-hero-in{grid-template-columns:1fr;row-gap:44px}
  .sl-h1{font-size:clamp(100px,30vw,170px)}
  .sl-cover{width:min(66%,280px)}
  .sl-card .t{font-size:44px}
}

/* ---------- תוכן העניינים: פס חום ---------- */
.sl-toc{--focus:var(--orange);background-color:var(--brown);background-image:var(--grain-light);color:var(--paper);padding-block:clamp(44px,6vw,80px)}
.sl-toc-h{font-family:var(--display);font-weight:700;font-size:clamp(54px,6.4vw,92px);line-height:.85;color:var(--orange);margin-bottom:clamp(20px,3vw,34px)}
.sl-toc-list{list-style:none;columns:2;column-gap:clamp(28px,6vw,96px)}
.sl-toc-list > li{break-inside:avoid;border-top:1px solid rgba(244,239,228,.28)}
.sl-toc-list a{display:flex;align-items:baseline;gap:16px;padding-block:11px 9px;text-decoration:none;font-family:var(--head);font-size:clamp(20px,1.8vw,24px);line-height:1.25}
.sl-toc-list a:hover .t{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--orange);text-underline-offset:6px}
.sl-toc-list .n{flex-shrink:0;width:1.5em;font-family:var(--display);font-weight:700;font-size:1.6em;line-height:.8;color:var(--orange)}
.sl-toc-sub{display:flex;flex-wrap:wrap;gap:4px 18px;padding-bottom:12px;padding-inline-start:calc(clamp(20px,1.8vw,24px) * 2.4 + 16px);font-size:16.5px}
.sl-toc-sub a{display:inline;padding:0;font-family:inherit;font-size:inherit;text-decoration:underline;text-decoration-color:rgba(244,239,228,.4);text-underline-offset:5px}
.sl-toc-sub a:hover{text-decoration-color:var(--orange)}
.sl-toc-quick{margin-top:clamp(26px,3vw,40px)}
.sl-toc .btn-orange{--sh:var(--red)}
@media (max-width:760px){.sl-toc-list{columns:1}}

/* ---------- פסוק הפתיחה: עמוד שקט, כמו עמ' 2 בחוברת ---------- */
.sl-epi{text-align:center;padding-block:clamp(64px,8vw,120px) clamp(20px,3vw,40px)}
.sl-epi img{width:clamp(48px,4.6vw,62px);margin:0 auto 22px}
.sl-epi blockquote p{font-family:var(--verse);font-weight:500;font-size:clamp(24px,2.5vw,32px);line-height:1.75}
.sl-epi cite{display:block;margin-top:14px;font-style:normal;font-family:var(--head);font-size:15px;letter-spacing:.12em;color:var(--red)}

/* ---------- הפרקים ---------- */
.sl-sec{padding-block:clamp(64px,8vw,120px) 0}
.sl-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:clamp(28px,6vw,96px);align-items:start}
.sl-head{grid-column:1/-1;display:flex;align-items:center;gap:clamp(14px,2vw,24px);margin-bottom:clamp(24px,3vw,40px)}
.sl-num{flex-shrink:0;display:grid;place-items:center;width:clamp(50px,5vw,68px);aspect-ratio:1;border-radius:50%;background-color:var(--red);background-image:var(--grain-light);color:var(--paper);font-family:var(--head);font-size:clamp(24px,2.4vw,32px);line-height:1;padding-top:.1em}
.sl-head h2{font-size:clamp(56px,7vw,108px);line-height:.86;--mx:-3px;--my:2px}
.sl-text{border-inline-start:6px solid var(--brown);padding-inline-start:clamp(18px,2.4vw,30px)}
.sl-text p{font-size:19.5px;line-height:1.78;margin-bottom:20px;max-width:37em}
.sl-text p:last-child{margin-bottom:0}
.sl-text b{font-family:var(--head);font-weight:400}
.v{font-family:var(--verse);font-weight:500;font-size:1.06em;color:var(--red)}
.sl-ded{font-family:var(--head);font-size:clamp(21px,2vw,25px);line-height:1.5;color:var(--red);margin-top:30px;padding-top:18px;border-top:5px solid var(--brown);max-width:30em}
.sl-text .sl-ded{margin-bottom:0}
.sl-side{position:sticky;top:30px;display:flex;justify-content:center;padding-top:clamp(10px,4vw,60px)}
.sl-side img{width:min(100%,260px)}
@media (max-width:820px){
  .sl-grid{grid-template-columns:1fr}
  .sl-side{position:static;padding-top:34px}
  .sl-side img{width:min(52%,190px)}
}

/* פסוק מודגש עם המקור, כמו בחוברת */
.sl-verse{position:relative;margin-block:6px 26px;padding:4px clamp(16px,2vw,24px) 6px;margin-inline-start:calc(-1 * clamp(18px,2.4vw,30px) - 6px)}
.sl-verse p{font-family:var(--verse);font-weight:700;font-size:clamp(23px,2.2vw,29px);line-height:1.6;color:var(--red);margin-bottom:6px!important}
.sl-verse cite{font-style:normal;font-size:15.5px}

/* שלבי האבל: עיגולים ממוספרים */
.sl-stages{list-style:none;counter-reset:st;margin-block:6px 26px}
.sl-stages li{counter-increment:st;position:relative;padding-inline-start:52px;font-size:19.5px;line-height:1.78;margin-bottom:18px;max-width:calc(37em + 52px)}
.sl-stages li::before{content:counter(st);position:absolute;inset-inline-start:0;top:2px;width:36px;height:36px;border:2.5px solid var(--red);border-radius:50%;display:grid;place-items:center;font-family:var(--head);font-size:18px;line-height:1;padding-top:2px;color:var(--red)}

/* רשימות עם יהלום */
.sl-dots{list-style:none;margin-bottom:22px}
.sl-dots li{position:relative;padding-inline-start:28px;font-size:19.5px;line-height:1.78;margin-bottom:12px;max-width:calc(37em + 28px)}
.sl-dots li::before{content:"";position:absolute;inset-inline-start:2px;top:.72em;width:9px;height:9px;background-color:var(--red);transform:rotate(45deg)}
.sl-h3{font-family:var(--head);font-size:clamp(24px,2.3vw,30px);line-height:1.3;color:var(--red);margin-block:38px 14px}
.sl-text > .sl-h3:first-child{margin-top:0}

/* שלושה טיפים: כרטיסים */
.sl-tips-lead{max-width:44em;font-size:19.5px;line-height:1.78;margin-bottom:clamp(28px,3.4vw,44px)}
.sl-tips{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.6vw,36px)}
.sl-tip{background-color:var(--card);box-shadow:inset 0 0 0 3px var(--brown),-8px 8px 0 var(--red);padding:24px 24px 26px}
.sl-tip:nth-child(2){transform:rotate(-.8deg)}
.sl-tip .lab{display:flex;align-items:baseline;gap:10px;font-family:var(--head);font-size:15px;letter-spacing:.12em;color:var(--red);margin-bottom:6px}
.sl-tip .lab b{font-family:var(--display);font-weight:700;font-size:52px;line-height:.7;letter-spacing:0}
.sl-tip h3{font-family:var(--head);font-weight:400;font-size:clamp(25px,2.3vw,30px);line-height:1.25;margin-bottom:12px}
.sl-tip p{font-size:18.5px;line-height:1.72}
@media (max-width:980px){.sl-tips{grid-template-columns:1fr;max-width:40em}}

/* שאלות: גזיר */
.sl-qa{position:relative;border:3px dashed var(--brown);background-color:var(--card);padding:8px clamp(18px,2.4vw,28px);margin-block:4px 10px;max-width:40em}

/* החותם: הפסוק שסוגר את החוברת */
.sl-seal{text-align:center;padding-block:clamp(72px,9vw,130px) clamp(40px,5vw,70px)}
.sl-seal img{width:clamp(80px,9vw,110px);margin:0 auto 26px}
.sl-seal blockquote p{font-family:var(--verse);font-weight:500;font-size:clamp(25px,2.7vw,36px);line-height:1.7;max-width:24em;margin-inline:auto}
.sl-seal cite{display:block;margin-top:14px;font-style:normal;font-family:var(--head);font-size:15px;letter-spacing:.12em;color:var(--red)}
.sl-thanks{max-width:40em;margin:clamp(40px,5vw,64px) auto 0;padding-top:18px;border-top:1px solid rgba(30,47,58,.3);font-size:17px;line-height:1.7}
.sl-thanks b{font-family:var(--head);font-weight:400;color:var(--red)}

/* ---------- רגע לפני שנכנסים: הכריכה האחורית, ככרטיס על פס חום ---------- */
.sl-before{--focus:var(--orange);background-color:var(--brown);background-image:var(--grain-light);padding-block:clamp(64px,8vw,120px);margin-top:clamp(64px,8vw,110px);overflow-x:clip}
.sl-bc{position:relative;max-width:640px;margin-inline:auto;background-color:var(--card);color:var(--brown);padding:clamp(14px,2vw,20px);transform:rotate(-1deg);box-shadow:-14px 14px 0 var(--orange)}
.sl-bc-in{border:1.5px solid var(--red);outline:1.5px solid var(--red);outline-offset:-7px;padding:clamp(28px,4vw,44px) clamp(20px,4vw,44px) clamp(24px,3vw,34px)}
.sl-bc h2{font-size:clamp(56px,7vw,92px);line-height:.85;text-align:center;margin-bottom:clamp(20px,3vw,30px)}
.sl-bc .sl-dots{margin-bottom:0}
.sl-bc .sl-dots li{font-size:19px;line-height:1.6}
.sl-bc .out{margin-top:26px;padding-top:20px;border-top:5px solid var(--brown);text-align:center}
.sl-bc .out-h{font-family:var(--head);font-size:16px;letter-spacing:.16em;color:var(--red);margin-bottom:10px}
.sl-bc .out p{margin-bottom:8px}
.sl-bc .out .v{font-size:clamp(21px,2vw,25px);color:var(--brown);font-weight:700}
.sl-bc .out small{display:block;font-size:14.5px}


/* ============================================================
   תנועה. הכל עדין: האיורים צומחים לתוך הדף ומתנועעים קלות ברוח,
   הנר מהבהב, הפסוקים נכתבים מילה אחרי מילה.
   בלי JS, או בהעדפת "פחות תנועה", הכל עומד במקום וגלוי (המחלקה mo נוספת רק כשיש תנועה).
   ============================================================ */
.sl-verse::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:6px;background-color:var(--red);transform-origin:top}

/* הנר בכריכה: הילה חמה שנושמת, והכריכה נוטה קלות אחרי העכבר */
.sl-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.sl-candle,.sl-bc-candle{position:relative}
.sl-candle img,.sl-bc-candle img{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}
.glow{position:absolute;left:50.7%;top:21%;width:46%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,214,120,.62) 0,rgba(255,170,60,.26) 34%,rgba(255,170,60,0) 68%);mix-blend-mode:multiply;pointer-events:none;animation:flicker 3.4s ease-in-out infinite}
@keyframes flicker{0%,100%{opacity:.75;scale:1}18%{opacity:.95;scale:1.07}31%{opacity:.68;scale:.96}47%{opacity:.9;scale:1.04}63%{opacity:.72;scale:.98}82%{opacity:1;scale:1.09}}
.sl-cover .fl{position:absolute;z-index:3;pointer-events:none}
.sl-deco-a{width:clamp(110px,12vw,170px);bottom:-46px;inset-inline-end:-54px}
.sl-tilt{position:relative;z-index:1}
.sl-cover .sl-deco-o{z-index:0;width:clamp(70px,7vw,100px);top:-104px;inset-inline-start:24%;rotate:-14deg}
@media (max-width:820px){.sl-deco-a{inset-inline-end:-30px;bottom:-34px}.sl-cover .sl-deco-o{top:-130px;width:62px}}

/* פרחים: צומחים מלמטה, ואז מתנועעים */
.fl{display:block}
.fl img{transform-origin:50% 100%}
.mo .fl img{clip-path:inset(100% 0 0 0);transition:clip-path 1.9s cubic-bezier(.3,.6,.2,1)}
.mo .sl-cover .fl img{transition-delay:.9s}
.mo .fl.in img{clip-path:inset(-10% -10% 0 -10%);animation:sway 7s ease-in-out 1.9s infinite alternate}
@keyframes sway{from{rotate:-1.6deg}to{rotate:1.8deg}}

/* הופעה בגלילה */
.mo [data-rv]{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.mo [data-rv].in{opacity:1;transform:none}
.mo .sl-head .sl-num{opacity:0;scale:.7;transition:scale .8s cubic-bezier(.2,.7,.2,1) .1s,opacity .8s ease .1s}
.mo .sl-head.in .sl-num{opacity:1;scale:1}
.mo .sl-head .mis::after{transform:translate(0,0);transition:transform .9s cubic-bezier(.2,.7,.2,1) .35s}
.mo .sl-head.in .mis::after{transform:translate(-3px,2px)}
.mo .sl-verse::before{scale:1 0;transition:scale 1s cubic-bezier(.2,.7,.2,1) .3s}
.mo .sl-verse.in::before{scale:1 1}
.mo .sl-tip{transition-duration:1s;transform:translateY(50px) rotate(3deg)}
.mo .sl-tip.in{transform:none}
.mo .sl-tip.in:nth-child(2){transform:rotate(-.8deg)}
.sl-tip{transition:box-shadow .25s,translate .25s}
.sl-tip:hover{translate:3px -4px;box-shadow:inset 0 0 0 3px var(--brown),-12px 12px 0 var(--red)}

/* פתיחה */
.mo .sl-hero .l,.mo .sl-kick,.mo .sl-sub,.mo .sl-by{opacity:0;transform:translateY(40px);animation:rise 1.1s cubic-bezier(.2,.7,.2,1) forwards}
.mo .sl-kick{animation-delay:.05s}
.mo .sl-h1 .l1{animation-delay:.18s}
.mo .sl-h1 .l2{animation-delay:.36s}
.mo .sl-sub{animation-delay:.6s}
.mo .sl-by{animation-delay:.72s}
@keyframes rise{to{opacity:1;transform:none}}
.mo .sl-cover{opacity:0;transform:translateY(40px) rotate(-6deg);animation:rise 1.3s cubic-bezier(.2,.7,.2,1) .3s forwards}
.mo .sl-h1 .l2.mis::after{transform:translate(0,0);animation:mis-in 1s cubic-bezier(.2,.7,.2,1) 1.1s forwards}
@keyframes mis-in{to{transform:translate(-4px,3px)}}

/* פסוק שנכתב מילה אחרי מילה */
.w{display:inline-block}
.mo [data-words] .w{opacity:0;filter:blur(5px);transform:translateY(6px);transition:opacity .8s ease,filter .8s ease,transform .8s ease;transition-delay:calc(var(--i) * 85ms + .3s)}
.mo [data-words].in .w{opacity:1;filter:none;transform:none}

/* שלבי האבל: קו שמתמלא בזמן הקריאה */
.sl-stages{position:relative}
.sl-stages::before,.sl-stages-fill{content:"";position:absolute;inset-inline-start:17px;top:20px;bottom:24px;width:2px;background-color:rgba(30,47,58,.22)}
.sl-stages-fill{background-color:var(--red);transform-origin:top;scale:1 var(--p,1)}
.mo .sl-stages-fill{scale:1 var(--p,0)}
.sl-stages li::before{background-color:var(--paper);z-index:1;transition:background-color .4s,color .4s}
.sl-stages li.on::before{background-color:var(--red);color:var(--paper)}

/* שאלות: אקורדיון */
.qa-item{border-bottom:1px solid rgba(30,47,58,.22)}
.qa-item:last-child{border-bottom:0}
.qa-q{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;background:none;border:0;cursor:pointer;color:var(--red);font-family:var(--head);font-size:clamp(20px,1.8vw,23px);line-height:1.35;text-align:start}
.qa-q i{position:relative;flex-shrink:0;width:30px;height:30px;border:2.5px solid var(--red);border-radius:50%;transition:rotate .35s,background-color .25s}
.qa-q i::before,.qa-q i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2.5px;translate:-50% -50%;background-color:var(--red);transition:background-color .25s}
.qa-q i::after{rotate:90deg}
.qa-q[aria-expanded="true"] i{rotate:135deg;background-color:var(--red)}
.qa-q[aria-expanded="true"] i::before,.qa-q[aria-expanded="true"] i::after{background-color:var(--paper)}
.qa-q:hover{color:var(--brown)}
.qa-a{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.qa-a > div{overflow:hidden}
.qa-a p{font-size:19px;line-height:1.72;padding-bottom:18px}
.js.ready .qa-a{grid-template-rows:0fr}
.js.ready .qa-a.open{grid-template-rows:1fr}
.js.ready .qa-a:not(.open) > div{visibility:hidden;transition:visibility 0s linear .45s}
.sl-qa-fl{position:absolute;width:clamp(76px,8vw,104px);inset-inline-end:-30px;top:-74px;pointer-events:none}
@media (max-width:820px){.sl-qa-fl{inset-inline-end:-6px;top:-64px}}

/* רגע לפני שנכנסים */
.sl-bc-candle{width:96px;margin:-6px auto 6px}
.sl-bc-candle img{mix-blend-mode:multiply}
.mo.ready .sl-bc{transform:translateY(60px) rotate(4deg);opacity:0;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),opacity 1s}
.mo.ready .sl-bc.in{transform:rotate(-1deg);opacity:1}

/* בזמן הקריאה: פס התקדמות, מסילת פרקים (מחשב) ופס תחתון (טלפון) */
.sl-progress{position:fixed;top:0;inset-inline:0;height:4px;z-index:50;pointer-events:none}
.sl-progress span{display:block;height:100%;background-color:var(--orange);transform-origin:right;scale:var(--p,0) 1}
.sl-rail{position:fixed;inset-inline-end:clamp(12px,1.6vw,26px);top:50%;translate:0 -50%;z-index:45;display:flex;flex-direction:column;gap:8px;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s linear .3s}
.sl-rail.on{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}
.sl-rail a{position:relative;display:grid;place-items:center;width:30px;height:30px;border:2px solid var(--brown);border-radius:50%;background-color:var(--paper);font-family:var(--head);font-size:13px;line-height:1;padding-top:2px;text-decoration:none;transition:background-color .25s,color .25s,scale .25s}
.sl-rail a span{position:absolute;inset-inline-end:calc(100% + 10px);white-space:nowrap;padding:5px 10px 4px;background-color:var(--brown);color:var(--paper);font-size:15px;opacity:0;translate:6px 0;pointer-events:none;transition:opacity .2s,translate .2s}
.sl-rail a:hover span,.sl-rail a:focus-visible span{opacity:1;translate:0 0}
.sl-rail a.cur{background-color:var(--red);border-color:var(--red);color:var(--paper);scale:1.18}
.sl-bar{display:none}
@media (max-width:1360px){
  .sl-rail{display:none}
  .sl-bar{--focus:var(--orange);position:fixed;inset-inline:0;bottom:0;z-index:45;display:flex;align-items:center;gap:12px;padding:12px var(--gut) 14px;background-color:var(--brown);background-image:var(--grain-light);color:var(--paper);text-decoration:none;font-family:var(--head);font-size:16px;line-height:1.2;translate:0 110%;visibility:hidden;transition:translate .3s cubic-bezier(.2,.7,.2,1),visibility 0s linear .3s}
  .sl-bar.on{translate:0 0;visibility:visible;transition:translate .3s cubic-bezier(.2,.7,.2,1),visibility 0s}
  .sl-bar .n{flex-shrink:0;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background-color:var(--red);font-size:14px;padding-top:2px}
  .sl-bar .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sl-bar .up{flex-shrink:0;color:var(--orange);font-size:14.5px}
  .sl-bar .line{position:absolute;top:0;inset-inline:0;height:3px;background-color:rgba(244,239,228,.18)}
  .sl-bar .line span{display:block;height:100%;background-color:var(--orange);transform-origin:right;scale:var(--p,0) 1}
  .sl-progress{display:none}
}
@media (prefers-reduced-motion:reduce){.glow{animation:none}.sl-tilt{transform:none}}