/* ==========================================================================
   article.css — פריסת מאמר ארוך. נטען אחרי site.css ולפני ה-<style> של
   העמוד, כך שעמוד מדריך יכול עדיין לגבור על כל כלל שכאן.

   הבעיה שהקובץ הזה פותר: עמודי האתר בנויים כרשת כרטיסים ברוחב מלא.
   טקסט רץ ברוחב כזה נותן שורות של יותר ממאה תווים, שהעין מאבדת בהן
   את תחילת השורה הבאה. כאן נקבעת עמודה בקנה מידה של קריאה.
   ========================================================================== */

.art{padding:118px 0 70px}
.art-wrap{max-width:760px;margin:0 auto;padding:0 var(--gut)}

/* כותרת המדריך. היא div ולא header בכוונה: ב-site.css הכלל על header
   מגדיר את סרגל הניווט, כולל position:fixed ורקע נייבי, וכל <header>
   נוסף בעמוד היה נצבע וצף מעל התוכן. */
.art-head{margin-bottom:38px}
.art-kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13.5px;font-weight:700;color:var(--teal-deep);margin-bottom:14px;
}
.art h1{
  font-size:clamp(28px,4.2vw,44px);line-height:1.2;font-weight:700;
  color:var(--ink);margin:0 0 18px;text-wrap:balance;
}
.art-lead{font-size:19px;line-height:1.72;color:var(--text);margin:0;text-wrap:pretty}

/* גוף המאמר. המידה נקבעת ב-ch כדי שהשורה תישאר קריאה בכל גודל גופן:
   שורה של 66 תווים במקום 89 שהעמודה לבדה נתנה. */
.art-body{font-size:17px;line-height:1.85;color:var(--text);max-width:66ch}
.art-body > * + *{margin-top:22px}
.art-body h2{
  font-size:clamp(21px,2.4vw,27px);line-height:1.3;font-weight:700;
  color:var(--ink);margin-top:52px;margin-bottom:0;text-wrap:balance;
}
.art-body h2 + p{margin-top:14px}
.art-body p{margin:0;text-wrap:pretty}
.art-body strong{color:var(--ink);font-weight:700}
.art-body ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.art-body li{position:relative;padding-inline-start:22px;line-height:1.75}
.art-body li::before{
  content:"";position:absolute;inset-inline-start:0;top:11px;
  width:8px;height:8px;border-radius:var(--r-pill);background:var(--acc);
}

/* משפט מפתח שעומד בפני עצמו */
.art-body .pull{
  margin-top:34px;padding:22px 26px;
  background:var(--grad-card);border:1px solid var(--line);
  border-radius:var(--r-lg);font-size:18px;line-height:1.7;color:var(--ink);
}

/* תוכן עניינים. הוא מידע ולא קישוט: במדריך עם שבע כותרות הקורא רוצה
   לקפוץ לפרק שמעניין אותו בלי לגלול דרך הכול. */
.art-toc{
  margin:32px 0 0;padding:20px 24px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);
}
.art-toc h2{font-size:13.5px;font-weight:700;color:var(--muted-ink,var(--text-2));margin:0 0 12px;letter-spacing:.04em}
.art-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:9px;counter-reset:toc}
.art-toc li{counter-increment:toc;display:flex;gap:10px;align-items:baseline;font-size:15.5px}
.art-toc li::before{content:counter(toc) ".";color:var(--acc);font-weight:700;flex:none}
.art-toc a{color:var(--text);text-decoration:none;border-radius:var(--r-xs)}
.art-toc a:hover{color:var(--teal-deep);text-decoration:underline}

/* פס סיום המאמר */
.art-end{
  margin-top:56px;padding:30px 28px;border-radius:var(--r-xl);
  background:var(--navy);color:#dceaf2;
}
.art-end p{margin:0 0 18px;font-size:16.5px;line-height:1.75}
.art-end .btn{margin:0}

@media (max-width:760px){
  .art{padding:96px 0 54px}
  .art-body{font-size:16.5px}
  .art-body h2{margin-top:42px}
  .art-lead{font-size:17.5px}
  .art-end{padding:24px 20px}
}