/* ZENGA - קונספט א׳ · סגנון משותף לכל העמודים */
:root{
  --ink:#141310;
  --ink-soft:#3b3830;
  --ink-faint:#645f54;
  --washi:#f3efe4;
  --washi-deep:#e9e3d4;
  --paper:#faf7ef;
  --vermilion:#a33227;
  --ai:#33505f;
  --moss:#5d6a45;
  --line:rgba(20,19,16,.14);
  --serif:'Frank Ruhl Libre',Georgia,serif;
  --sans:'Assistant','Segoe UI',system-ui,sans-serif;
  --display:'Gveret Levin','Frank Ruhl Libre',cursive;
  --jp:'Noto Serif JP',serif;
  --max:1230px;
  --card-cream:#faf7ee;
  --stone:#e8e7e3;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--washi);color:var(--ink);font-family:var(--sans);
  font-weight:300;font-size:18px;line-height:1.85;overflow-x:hidden;
  transition:background .8s var(--ease),color .8s var(--ease);
}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url('../img/washi.jpg');background-size:760px;
  opacity:.5;mix-blend-mode:multiply;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px;position:relative;z-index:1}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
[id]{scroll-margin-top:96px}
:focus-visible{outline:2px solid var(--vermilion);outline-offset:3px}
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:200;background:var(--washi);padding:12px 20px}
.skip:focus{inset-inline-start:0}

/* ---------- nav ---------- */
.topbar{
  position:fixed;top:0;right:0;left:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 34px;border-bottom:1px solid transparent;
  transition:background .5s var(--ease),padding .5s var(--ease),border-color .5s;
}
.topbar.solid{
  background:color-mix(in srgb,var(--washi) 90%,transparent);
  backdrop-filter:blur(14px);padding:11px 34px;border-bottom-color:var(--line);
}
.brandmark{display:flex;align-items:center;gap:11px;text-decoration:none;transition:opacity .45s var(--ease),visibility .45s}
/* הסמל בסרגל נכנס רק כשהסרגל הופך למוצק בגלילה - בכל עמודי האתר.
   בראש כל עמוד הסרגל שקוף והסמל נסתר, ולכן הבר נראה זהה בכל מקום.
   ההסתרה היא בשקיפות ולא ב-display, כדי שהמקום יישמר והתפריט
   לא יקפוץ הצידה כשהסמל נכנס. */
.topbar:not(.solid) .brandmark{opacity:0;visibility:hidden}
.brandmark img{height:38px;width:auto;transition:height .4s var(--ease)}
.navlinks{display:flex;gap:28px;list-style:none;align-items:center}
.navlinks a{
  text-decoration:none;font-size:15.5px;color:var(--ink-soft);letter-spacing:.02em;
  padding-bottom:3px;border-bottom:1px solid transparent;transition:.35s var(--ease);
}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--vermilion)}
/* פריט תפריט שעדיין אין לו עמוד */
.nav-soon{font-size:15.5px;color:var(--ink-faint);letter-spacing:.02em;opacity:.5;cursor:default;padding-bottom:3px;border-bottom:1px solid transparent}
.hd-cta{
  text-decoration:none;font-size:14.5px;letter-spacing:.06em;color:var(--vermilion);
  border:1px solid color-mix(in srgb,var(--vermilion) 45%,transparent);border-radius:2px;
  padding:9px 18px;transition:.35s var(--ease);white-space:nowrap;
}
.hd-cta:hover{background:var(--vermilion);color:var(--washi);border-color:var(--vermilion)}

/* לשונית תפריט אנכית - נייד */
.menu-tab{
  display:none;position:fixed;right:0;left:auto;top:44vh;z-index:70;
  background:var(--vermilion);color:#f7f3e9;border:0;cursor:pointer;
  padding:14px 9px;border-radius:3px 0 0 3px;font-family:var(--sans);
  font-size:13px;letter-spacing:.06em;line-height:1.45;min-height:44px;min-width:32px;
  flex-direction:column;align-items:center;gap:0;
}
.menu-tab span{display:block}

/* ---------- hero ---------- */
.hero{
  min-height:100svh;display:grid;place-items:center;position:relative;
  padding:84px 0 44px;overflow:hidden;
}
.hero-trees{position:absolute;inset:0;pointer-events:none;overflow:hidden;isolation:isolate}
.hero-trees .tree{
  position:absolute;bottom:0;height:auto;opacity:.4;
  mix-blend-mode:multiply;filter:saturate(0);
}
.tree-l{right:5vw;width:clamp(190px,19vw,300px)}
.tree-l2{right:18vw;bottom:6%;width:clamp(110px,11vw,175px);opacity:.22}
.tree-c{right:34vw;bottom:0;width:clamp(90px,9vw,145px);opacity:.14;transform:scaleX(-1)}
.hero-inner{
  text-align:center;position:relative;z-index:2;width:100%;
  display:flex;flex-direction:column;align-items:center;
  min-height:calc(100svh - 128px);
}

/* מדרגה 1 · זהות - לוגו ושם. שקטים בכוונה: הלוגו כבר אומר Zenga,
   ולכן השם לא צריך להיות כותרת שנייה בגודל 55px. */
.hero-id{width:100%}
.hero-logo{
  width:clamp(150px,16vw,214px);margin:0 auto 12px;display:block;
  opacity:0;animation:fadeUp 1.5s var(--ease) .2s forwards;
}
.hero-name{
  font-family:var(--serif);font-weight:400;margin:0 auto;
  /* p גלובלי מוגבל ל-68ch, ובלי איפוס הוא נצמד לימין ויוצא מהציר המרכזי */
  width:100%;max-width:none;
  font-size:clamp(17px,1.9vw,22px);line-height:1.4;letter-spacing:.1em;
  color:var(--ink-soft);
  opacity:0;animation:fadeUp 1.3s var(--ease) .45s forwards;
}

/* מדרגה 2 · המסר - האלמנט הדומיננטי היחיד בהירו */
.hero-focus{
  position:relative;width:100%;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.hero-focus::before{
  content:'';position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:min(620px,88vw);aspect-ratio:1;border-radius:50%;
  z-index:-1;pointer-events:none;
  background:radial-gradient(circle at center,color-mix(in srgb,var(--paper) 95%,transparent) 0%,color-mix(in srgb,var(--paper) 78%,transparent) 40%,color-mix(in srgb,var(--paper) 34%,transparent) 64%,transparent 77%);
}
.hero-rule{
  width:1px;height:0;background:var(--ink);margin:0 auto 22px;opacity:.3;
  animation:growLine 1.4s var(--ease) .7s forwards;
}
@keyframes growLine{to{height:34px}}
.hero-tag{
  font-family:var(--serif);font-weight:300;margin:0;position:relative;
  font-size:clamp(34px,6vw,68px);line-height:1.18;letter-spacing:.005em;
  opacity:0;animation:fadeUp 1.3s var(--ease) .85s forwards;
}
/* הדגשה בשַׁשַׁר בתוך טקסט רץ - גלובלית, לא רק בהירו */
.t-ink{color:var(--ink)}
.t-red{color:var(--vermilion)}
.kanji-sm{
  margin:16px auto 0;width:100%;max-width:none;
  font-family:var(--jp);font-weight:200;line-height:1.2;
  font-size:clamp(21px,2.5vw,29px);letter-spacing:.14em;color:var(--ink-faint);
  opacity:0;animation:fadeUp 1.3s var(--ease) 1s forwards;
}

/* מדרגה 3 · מה יש כאן, ולאן ממשיכים */
.hero-foot{position:relative;width:100%;margin-top:auto;padding-top:26px}
/* משטח נייר רך מתחת לשורה התחתונה - האורנים יושבים בדיוק שם,
   ובלעדיו הכפתורים והתוויות נקראים על גבי ענפים. */
.hero-foot::before{
  content:'';position:absolute;inset:-26px -6% -22px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--paper) 90%,transparent) 0%,color-mix(in srgb,var(--paper) 62%,transparent) 46%,transparent 78%);
}
.hero-sub{
  margin:0 auto;width:100%;max-width:none;
  font-family:var(--sans);font-weight:400;
  font-size:clamp(13px,1.35vw,15px);line-height:1.6;letter-spacing:.14em;
  color:var(--ink-soft);
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:0 16px;
  opacity:0;animation:fadeUp 1.3s var(--ease) 1.15s forwards;
}
.hero-sub b{font-weight:400;display:inline-flex;align-items:center;gap:16px}
.hero-sub b::after{content:'';width:4px;height:4px;border-radius:50%;background:var(--vermilion);opacity:.7}
.hero-sub b:last-child::after{display:none}
.hero-cta{
  margin-top:20px;display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;
  opacity:0;animation:fadeUp 1.3s var(--ease) 1.3s forwards;
}
.lnk{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-size:16px;letter-spacing:.04em;padding:14px 30px;border-radius:2px;min-height:48px;
  border:1px solid var(--vermilion);color:var(--vermilion);background:transparent;
  transition:.4s var(--ease);
}
.lnk::after{content:'←';transition:transform .35s var(--ease)}
.lnk:hover{background:var(--vermilion);color:var(--washi)}
.lnk:hover::after{transform:translateX(-5px)}
.lnk.quiet{border-color:var(--line);color:var(--ink-soft)}
.lnk.quiet:hover{background:transparent;color:var(--ink);border-color:var(--ink-faint)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- כותרת עמוד פנימי ---------- */
.page-head{padding:clamp(130px,17vh,190px) 0 clamp(40px,6vh,70px);position:relative}
.page-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5.4vw,60px);line-height:1.24}
body.inner .page-head h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(42px,6.6vw,76px);line-height:1.16;letter-spacing:.01em;
}
.page-head .kick{
  font-family:var(--serif);font-size:12.5px;letter-spacing:.44em;color:var(--ink-faint);
  text-transform:uppercase;margin-bottom:18px;display:block;
}
/* משקל 200 נראה אפור על רקע הוואשי - 400 מחזיר נוכחות שחורה מלאה */
.page-head .lede{margin-top:24px;max-width:none;color:var(--ink);font-weight:400;text-wrap:pretty}

/* ---------- כללי ---------- */
section{position:relative;z-index:1}
.band{padding:clamp(80px,12vh,140px) 0}
.band.tight{padding-top:0}
.band.cream{
  background:color-mix(in srgb,var(--card-cream) 86%,transparent);
  border-block:1px solid var(--line);
}
.eyebrow{
  display:flex;align-items:center;gap:16px;margin-bottom:40px;
  font-family:var(--serif);font-size:12.5px;letter-spacing:.44em;color:var(--ink-faint);
  text-transform:uppercase;
}
.eyebrow::after{content:'';flex:1;height:1px;background:var(--line)}
h2.big{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(30px,4.4vw,50px);line-height:1.3;margin-bottom:30px;
}
h3.sub{font-family:var(--serif);font-weight:400;font-size:25px;margin:44px 0 20px;line-height:1.4}
.lede{font-size:20px;font-weight:200;line-height:1.9;color:var(--ink-soft);max-width:62ch}
.lede.nobreak{max-width:none;color:var(--ink);text-wrap:pretty}
p{margin-bottom:1.3em;max-width:68ch}
p:last-child{margin-bottom:0}
.prose a{color:var(--vermilion);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--vermilion) 40%,transparent)}
.prose a:hover{border-bottom-color:var(--vermilion)}
.ul{list-style:none;margin:18px 0 0}
.ul li{position:relative;padding-inline-start:20px;margin-bottom:10px;color:var(--ink-soft);max-width:66ch}
.ul li::before{content:'';position:absolute;inset-inline-start:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--vermilion);opacity:.7}

/* ---------- שלוש דלתות ---------- */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,58px)}
.door{
  display:flex;flex-direction:column;text-decoration:none;
  background:var(--card-cream);border:1px solid var(--line);border-top:2px solid var(--vermilion);
  padding:clamp(30px,3.6vw,44px) clamp(24px,2.8vw,36px) clamp(26px,3.2vw,38px);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.door:hover{transform:translateY(-5px);box-shadow:0 18px 38px -26px rgba(28,24,18,.4)}
.door h3{font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.35;margin-bottom:12px}
.door p{font-size:16.5px;color:var(--ink-soft);line-height:1.8;margin:0;max-width:36ch}
.doors.ctr .door .go{margin-top:auto;padding-top:18px;justify-content:center}
.door .go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:14.5px;letter-spacing:.1em;color:var(--vermilion)}
.door .go::after{content:'←';transition:transform .35s var(--ease)}
.door:hover .go::after{transform:translateX(-6px)}
.door:hover h3{color:var(--vermilion)}

/* ---------- כרטיסי תוכן ---------- */
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:20px}
.work{background:var(--washi);padding:clamp(30px,3.4vw,46px);display:flex;flex-direction:column;gap:16px;transition:background .7s var(--ease)}
.work:hover{background:var(--paper)}
.work .num{font-size:13px;color:var(--vermilion);letter-spacing:.13em}
.work h3{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.4}
.work p{font-size:16.5px;color:var(--ink-soft);line-height:1.8;margin:0}
.work .meta{margin-top:auto;padding-top:20px;border-top:1px solid var(--line);font-size:13.5px;letter-spacing:.1em;color:var(--ink-faint)}
.panels{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.panel{background:var(--washi);padding:clamp(32px,4vw,56px)}
.panel h3{font-family:var(--serif);font-weight:400;font-size:28px;margin-bottom:18px}
.panel p{font-size:17px;color:var(--ink-soft)}

/* ---------- אודות ---------- */
/* כותרת עם דיוקן: הטקסט נצמד לימין, התמונה יושבת משמאל וממורכזת מולו */
.ph-split .ph-grid{
  display:grid;grid-template-columns:1fr auto;
  gap:clamp(28px,5vw,72px);align-items:center;
}
.ph-portrait{
  width:clamp(150px,16vw,220px);aspect-ratio:1;object-fit:cover;object-position:50% 22%;
  border-radius:50%;border:1px solid var(--line);
  filter:grayscale(1) contrast(1.04);transition:filter 1.2s var(--ease);
}
.ph-portrait:hover{filter:none}

/* גוף הטקסט: עמודה אחת צמודה לימין */
.about-prose{max-width:900px}
/* דיו מלא ומשקל 400 - על רקע הוואשי המרקמי משקל 300 נקרא אפור ולא שחור */
.about-prose p,.about-prose .ul li{max-width:none;color:var(--ink);font-weight:400}
.about-prose h3.sub,.about-prose .bookbox{clear:both}

/* ציורי דיו קטנים בתוך הטקסט - צפים לשמאל, הטקסט מקיף את העיגול */
/* העיגול הוא מעטפת עם רקע וואשי, והתמונה עצמה מוכפלת (multiply) כדי שנייר הסריקה הלבן ייעלם */
.ink-dot{
  display:block;float:inline-end;
  width:clamp(124px,15.5vw,182px);aspect-ratio:1;
  border-radius:50%;overflow:hidden;
  border:1px solid rgba(20,19,16,.18);background:var(--washi);
  margin-block:6px 22px;margin-inline-start:clamp(22px,2.8vw,38px);
  shape-outside:circle(50%);shape-margin:16px;
  transition:transform .7s var(--ease);
}
.ink-dot img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.ink-dot:hover{transform:scale(1.04)}
/* מסגור פרטני לכל ציור */
.ink-dot.dot-enso img{object-position:50% 48%}
.ink-dot.dot-bird img{object-position:100% 30%;transform:scale(1.3);transform-origin:66% 32%}
.ink-dot.dot-scape img{object-position:50% 100%;transform:scale(1.12);transform-origin:34% 88%}
.bookbox{
  margin-top:clamp(44px,6vh,72px);border:1px solid var(--line);background:var(--card-cream);
  padding:clamp(28px,3.6vw,48px);
  display:grid;grid-template-columns:170px 1fr;gap:clamp(24px,3vw,42px);align-items:start;
}
.book-cover{margin:0}
.book-cover img{width:170px;border:1px solid var(--line);box-shadow:0 12px 30px rgba(20,19,16,.14)}
.book-txt{display:grid;gap:14px}
.bookbox .en{font-family:var(--serif);font-size:clamp(21px,2.6vw,30px);direction:ltr;text-align:start;line-height:1.4}
.bookbox .yr{font-size:13.5px;letter-spacing:.2em;color:var(--ink-faint)}

/* ---------- ציטוט ---------- */
.quote-band{padding:clamp(52px,8vh,96px) 0;background:transparent;border-block:1px solid var(--line)}
.quote-band.slim{padding:clamp(56px,9vh,96px) 0}
.quote-band .wrap{position:relative;z-index:1}
.quote-band blockquote{
  background:var(--card-cream);border:1px solid var(--line);
  box-shadow:0 16px 40px rgba(20,19,16,.05);
  padding:clamp(30px,3.6vw,54px);
  max-width:1000px;margin-inline:auto;
}
/* סימן הציטוט: היה קו של 1px ונקרא אפור. עכשיו מרכאה גדולה בששר - הסימן
   היחיד בעמוד שמכריז "ציטוט", ולכן מותר לו להיות גדול. */
.quote-band blockquote::before{
  content:'\201D';
  display:block;width:auto;height:auto;background:none;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(78px,9.5vw,138px);line-height:.72;
  color:var(--vermilion);
  margin:0 0 clamp(8px,1.4vw,20px);
  text-align:start;
}
.q-cols{column-count:2;column-gap:clamp(30px,4vw,56px);column-rule:1px solid var(--line)}
.q-cols p{max-width:none;margin-bottom:0}
.q-cols p + p{margin-top:1.1em}
.quote-band cite{display:block;margin-top:clamp(22px,2.8vw,34px);text-align:center}

/* ---------- מי אני בעמוד הבית ---------- */
.center{text-align:center}
h2.big.center{margin-bottom:clamp(34px,5vh,58px)}
.me{display:grid;grid-template-columns:1fr 230px;gap:clamp(30px,4.5vw,64px);align-items:center}
.me-photo{margin:0;order:2}
.me-photo img{
  width:230px;height:230px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line);filter:grayscale(1) contrast(1.05);
  transition:filter 1s var(--ease);
}
.me-photo img:hover{filter:none}
.me-text p{color:var(--ink);max-width:none;font-size:18px;line-height:1.9}
.me-more{margin-top:1.6em}

/* ---------- אייקון אנסו ---------- */
/* מאגר הצורה - svg נסתר שכל הדלתות מושכות ממנו את משיחת המכחול */
.enso-def{position:absolute;width:0;height:0;overflow:hidden}
.door-ico{
  display:block;width:76px;height:76px;margin:0 auto 22px;color:var(--vermilion);
  transition:color .5s var(--ease);
}
.door-ico svg{width:100%;height:100%;display:block;overflow:visible}
/* הקשת שבתוך המסכה נמשחת ומגלה את הדיו - כמו מכחול שנע על הנייר */
.enso-sweep{stroke-dasharray:1;stroke-dashoffset:1}
.door.in .enso-sweep{animation:ensoDraw 1.25s cubic-bezier(.42,.02,.28,1) .15s forwards}
.door.rv.d1.in .enso-sweep{animation-delay:.4s}
.door.rv.d2.in .enso-sweep{animation-delay:.65s}
.door:hover .door-ico{color:color-mix(in srgb,var(--vermilion) 78%,var(--ink))}
@keyframes ensoDraw{to{stroke-dashoffset:0}}
.doors.ctr .door{text-align:center}
.doors.ctr .door p{margin-inline:auto}

/* ---------- מה זה זן-גה ---------- */
/* התמונה מתמרכזת אנכית מול עמודת הטקסט, ולא נצמדת לראש הפרק
   (בקשת יעל, 23.8) - הטקסט גבוה מהתמונה, וההצמדה לראש הותירה
   בור ריק מתחתיה. */
.zg{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.5vw,64px);align-items:center}
.zg-fig{margin:0;order:2;max-width:440px;margin-inline-start:auto}
.zg-text{order:1}
/* הסרת "המסגרת" של הסריקה (בקשת יעל, 23.8) - שולי הנייר של הציור
   נראו כמלבן בהיר על גבי הוואשי. מסכה רכה בארבעת הקצוות מוססת את
   הגבול, כך שהדיו נראה כאילו צויר על הדף עצמו. */
.zg-fig img{
  width:100%;height:auto;
  filter:saturate(.55) brightness(1.12);
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-composite:intersect;
}
/* שם הציור והצייר בשורה אחת, מופרדים בנקודה - כמו שורת הקרדיט
   שמתחת לפרק. text-wrap:nowrap כדי שהשורה לא תישבר באמצע. */
.zg-fig figcaption{
  margin-top:14px;font-size:13px;letter-spacing:.06em;
  color:var(--ink-faint);line-height:1.7;text-wrap:nowrap;
}
.zg-eq{
  border:1px solid var(--line);background:var(--card-cream);
  padding:22px 24px;text-align:center;max-width:none;
  font-family:var(--serif);font-size:clamp(18px,2.1vw,25px);color:var(--ink);
  margin-bottom:1.6em;
}
/* הטקסט ההסברי הוא לב הפרק, לא הערת שוליים - דיו מלא ולא ink-soft
   (בקשת יעל, 23.8). */
.zg-text p{max-width:none;color:var(--ink)}
.zg-eq .ga{color:var(--vermilion)}

blockquote{font-family:var(--serif);font-weight:300;font-size:clamp(20px,2.4vw,28px);line-height:1.78;max-width:34ch}
blockquote p{max-width:none;margin-bottom:1.1em}
blockquote::before{content:'';display:block;width:52px;height:1px;background:var(--vermilion);margin-bottom:32px}
cite{display:block;margin-top:28px;font-style:normal;font-family:var(--sans);font-size:15px;letter-spacing:.16em;color:var(--ink-faint)}

/* ---------- רצועת ציורי זן ---------- */
.artstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.artstrip figure{background:var(--paper);margin:0;padding:20px;display:flex;flex-direction:column;gap:12px}
.artstrip img{width:100%;height:190px;object-fit:contain;filter:saturate(.85);mix-blend-mode:multiply}
.artstrip figcaption{font-size:13px;letter-spacing:.06em;color:var(--ink-faint);line-height:1.6;margin-top:auto}
.credit{margin-top:20px;font-size:13.5px;color:var(--ink-faint);letter-spacing:.04em;max-width:none}
.credit a{color:inherit}

/* ---------- ליווי אישי: יצירה משמאל, טקסט מימין ---------- */
.prose.wide{max-width:none}
.prose.wide p{max-width:none}
.solo{
  display:grid;grid-template-columns:1fr minmax(260px,390px);
  gap:clamp(30px,4.5vw,64px);align-items:center;
}
.solo-txt{order:1}
.solo-txt p{max-width:none}
/* בלי מסגרת ובלי משטח - הדיו יושב ישירות על הנייר, כמו ציור על מגילה */
.soloart{order:2;margin:0;max-width:none}
.soloart img{width:100%;height:auto;display:block;mix-blend-mode:multiply;filter:contrast(1.04)}
.soloart figcaption{
  margin-top:16px;font-size:13px;line-height:1.7;letter-spacing:.02em;
  color:var(--ink-faint);text-align:center;
}

/* גריד תמונות סדנאות */
.wsgrid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,26px);align-items:start;
  margin-top:clamp(44px,6vh,72px);
}
.wsgrid figure{margin:0;overflow:hidden;border:1px solid var(--line);background:var(--card-cream)}
.wsgrid img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.5) contrast(1.03);transition:filter 1s var(--ease)}
.wsgrid figure:hover img{filter:none}
.ws-tall img{aspect-ratio:3/4}
.ws-wide{grid-column:span 2}
.ws-wide img{aspect-ratio:16/9}
.wsgrid figure:nth-child(2){margin-top:clamp(18px,3vw,44px)}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.5vw,64px);align-items:start}
.cols2 .prose p,.cols2 .prose ul{max-width:none}

/* ---------- הרצאות: תמונה לאורך ---------- */
.lect{display:grid;grid-template-columns:1fr 340px;gap:clamp(30px,4.5vw,64px);align-items:start}
.lect-fig{margin:0;order:2}
.lect-txt{order:1}
.lect-fig img{width:100%;border:1px solid var(--line);filter:grayscale(1) contrast(1.04);transition:filter 1s var(--ease)}
.lect-fig img:hover{filter:none}
.lect-fig figcaption{margin-top:12px;font-size:13px;letter-spacing:.06em;color:var(--ink-faint);text-align:center}
.lect-txt p.lede{max-width:none}

/* ---------- ציפור ---------- */
.birds-band{padding:clamp(30px,5vh,56px) 0;background:var(--washi);border-block:1px solid var(--line)}
.birds{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(18px,3vw,44px);align-items:end}
.birds figure{margin:0;position:relative}
.birds figure::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:url('../img/washi.jpg');background-size:760px;background-attachment:fixed;
  opacity:.5;mix-blend-mode:multiply;
}
.birds img{width:100%;filter:saturate(0) contrast(1.02);mix-blend-mode:multiply}
.birds .flip{padding-bottom:clamp(14px,2.5vw,34px)}

/* ---------- מה אומרים עליי (מסוע כרטיסיות) ---------- */
.tsec{
  --tbg:#121210;--ttext:#f0ebdf;--tsoft:#b9b2a2;--tline:rgba(240,235,223,.16);
  background:var(--tbg);color:var(--ttext);padding:clamp(70px,11vh,120px) 0;
  border-block:1px solid var(--tline);overflow:hidden;
}
.tsec .kick{display:block;text-align:center;font-size:12.5px;letter-spacing:.44em;color:var(--tsoft);text-transform:uppercase;margin-bottom:12px}
.tsec h2{text-align:center;font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.4vw,48px);margin-bottom:clamp(34px,5vh,56px)}
.tcar{position:relative;overflow:hidden;max-width:1320px;margin:0 auto;
  -webkit-mask-image:linear-gradient(to left,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(to left,transparent,#000 7%,#000 93%,transparent);
}
/* gap:0 בכוונה - הרווח נוצר ממרג' על הכרטיסייה, כדי שרוחב היחידה יישאר אחיד ל-JS */
.ttrack{display:flex;gap:0;will-change:transform;direction:ltr;align-items:stretch}
.tcard{
  flex:0 0 auto;width:min(384px,78vw);direction:rtl;
  margin-inline-end:clamp(16px,2vw,26px);
  padding:clamp(28px,3vw,38px);
  background:rgba(240,235,223,.045);border:1px solid var(--tline);
  display:flex;flex-direction:column;
}
/* קו שינגון קצר במקום מרכאה - הציטוט עצמו כבר עטוף במרכאות */
.tcard::before{
  content:'';display:block;width:34px;height:2px;
  background:var(--vermilion);margin-bottom:22px;
}
.tcard p{font-size:17px;line-height:1.85;color:var(--ttext);margin:0;max-width:none}
.tcard .who{margin-top:auto;padding-top:22px;font-size:13.5px;letter-spacing:.16em;color:var(--tsoft)}
.tnav{display:flex;justify-content:center;gap:12px;margin-top:clamp(30px,4vh,46px)}
.tnav button{
  width:48px;height:48px;border-radius:50%;border:1px solid var(--tline);
  background:transparent;color:var(--ttext);cursor:pointer;font-size:17px;
  display:grid;place-items:center;transition:.35s var(--ease);
}
.tnav button:hover{border-color:var(--ttext);background:rgba(240,235,223,.08)}

/* ---------- לוגואים - טיקר ---------- */
.ltick{
  position:relative;overflow:hidden;margin-top:clamp(30px,4vw,48px);
  -webkit-mask-image:linear-gradient(to left,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(to left,transparent,#000 6%,#000 94%,transparent);
}
.logos{list-style:none;display:flex;direction:ltr;will-change:transform}
.logo-i{
  flex:0 0 auto;width:clamp(140px,17.4vw,250px);direction:rtl;
  padding:0 clamp(6px,.8vw,12px);text-align:center;
}
.logo-c{
  width:clamp(84px,8.4vw,104px);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--line);background:var(--card-cream);
  display:grid;place-items:center;margin:0 auto;overflow:hidden;
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.logo-i:hover .logo-c{border-color:var(--vermilion);transform:translateY(-3px)}
.logo-c img{width:66%;height:66%;object-fit:contain;display:block;mix-blend-mode:multiply}
.logo-t{
  display:block;margin-top:11px;font-size:13px;line-height:1.5;
  color:var(--ink-soft);max-width:16ch;margin-inline:auto;
}

/* ---------- יצירת קשר ---------- */
.contact-band{background:var(--paper);border-block:1px solid var(--line)}
.cbox{
  background:var(--card-cream);border:1px solid var(--line);border-top:2px solid var(--vermilion);
  padding:clamp(28px,4vw,58px);box-shadow:0 18px 44px rgba(20,19,16,.06);
}
.contact-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(30px,4.4vw,60px);align-items:stretch}
.cinfo{border-inline-end:1px solid var(--line);padding-inline-end:clamp(22px,3.2vw,50px)}
.cinfo-h{font-family:var(--serif);font-size:clamp(24px,2.8vw,33px);font-weight:400;line-height:1.25;margin:0 0 12px}
.cinfo-p{font-size:16.5px;color:var(--ink-soft);max-width:32ch;margin:0 0 30px;line-height:1.7}
.cinfo a{display:block;text-decoration:none;font-family:var(--serif);font-size:clamp(19px,2.1vw,25px);margin-bottom:0;transition:.4s var(--ease)}
.cinfo a:hover{color:var(--vermilion)}
.cinfo .lbl{font-size:12.5px;letter-spacing:.22em;color:var(--ink-faint);margin-bottom:5px}
.cinfo .blk{margin-bottom:24px}
.cinfo-sig{font-size:15px;color:var(--ink-faint);max-width:34ch;margin:28px 0 0;padding-top:18px;border-top:1px solid var(--line)}
form{display:grid;gap:20px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field label{display:block;font-size:13.5px;letter-spacing:.1em;color:var(--ink);margin-bottom:9px}
.field .req{color:var(--vermilion);margin-inline-start:4px}
.field input,.field textarea{
  width:100%;background:#fffdf7;border:1px solid var(--line);border-bottom:1.5px solid var(--ink-faint);
  padding:14px 16px;font-family:var(--sans);font-size:17px;font-weight:300;color:var(--ink);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);min-height:52px;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint);opacity:.7}
.field input:hover,.field textarea:hover{border-color:var(--ink-faint)}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--vermilion);box-shadow:0 0 0 3px rgba(163,50,39,.13)}
.field textarea{resize:vertical;min-height:126px;line-height:1.7}
.f-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:4px}
.btn{
  background:var(--vermilion);color:#fff;border:0;cursor:pointer;
  padding:17px 56px;font-family:var(--serif);font-size:17px;letter-spacing:.2em;
  transition:.35s var(--ease);min-height:52px;box-shadow:0 8px 20px rgba(163,50,39,.22);
}
.btn:hover{background:var(--ink);transform:translateY(-2px);box-shadow:0 12px 26px rgba(20,19,16,.24)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.formnote{font-size:14.5px;color:var(--ink-soft);margin:0}

/* ---------- פוטר ---------- */
/* כל הטקסט בפוטר לבן מלא (בקשת יעל, 23.8) - הרקע כהה,
   והטקסט המשני שהיה #a49c8c נבלע בו. --fsoft נשאר כמשתנה
   כדי לא לשבור את המבנה, אבל ערכו לבן. */
footer{
  --fbg:#121210;--ftext:#fff;--fsoft:#fff;--fline:rgba(255,255,255,.16);
  background:var(--fbg);color:var(--ftext);position:relative;z-index:1;
  padding:clamp(56px,8vh,86px) 0 30px;
}
.f-grid{display:grid;grid-template-columns:1.35fr .8fr 1fr;gap:clamp(30px,5vw,72px);align-items:start}
.f-mark{
  height:96px;width:96px;margin:0 0 20px;padding:14px;
  border-radius:50%;background:#fff;object-fit:contain;
}
.f-name{font-family:var(--serif);font-size:clamp(21px,2.4vw,26px);font-weight:500;color:var(--ftext);margin:0 0 12px}
.f-desc{font-size:15.5px;line-height:1.9;color:var(--fsoft);max-width:42ch;margin:0}
.f-h{font-size:12.5px;letter-spacing:.3em;color:var(--fsoft);font-weight:400;font-family:var(--sans);margin:0 0 20px}
.f-col ul{list-style:none;display:grid;gap:11px}
.f-col a{font-size:16px;color:var(--ftext);text-decoration:none;transition:color .35s var(--ease)}
.f-col a:hover{color:var(--vermilion)}
.f-contact li{display:flex;align-items:center;gap:12px;min-height:28px}
.f-ico{width:20px;height:20px;flex:0 0 20px;color:var(--fsoft)}
.f-ico svg{width:100%;height:100%;display:block}
.f-bar{
  margin-top:clamp(40px,6vh,64px);padding-top:24px;border-top:1px solid var(--fline);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13.5px;letter-spacing:.06em;color:var(--fsoft);
}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}

/* ---------- רספונסיבי ---------- */
@media(max-width:1000px){
  .artstrip{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:960px){
  .zg,.quote-grid{grid-template-columns:1fr}
  .lect,.cols2{grid-template-columns:1fr}
  .solo{grid-template-columns:1fr}
  .soloart{max-width:420px;margin-inline:auto}
  .lect-fig{max-width:300px;margin-inline:auto}
  .wsgrid{grid-template-columns:repeat(2,1fr)}
  .ws-wide{grid-column:span 2}
  .quote-grid{padding-inline:24px}
  .quote-band blockquote{margin-inline-start:0}
  .q-cols{column-count:1;column-rule:none}
  .me{grid-template-columns:1fr;justify-items:center;text-align:center}
  .me-photo{order:0}
  .me-text{text-align:start}
  .panels,.contact-grid{grid-template-columns:1fr}
  .cinfo{border-inline-end:0;border-bottom:1px solid var(--line);padding-inline-end:0;padding-bottom:26px}
  .works{grid-template-columns:1fr}
  .doors{grid-template-columns:1fr;gap:32px}
}
@media(max-width:860px){
  .topbar nav .navlinks{
    position:fixed;inset:0;background:var(--washi);flex-direction:column;justify-content:center;
    gap:22px;transform:translateX(105%);visibility:hidden;
    transition:transform .5s var(--ease),visibility 0s linear .5s;z-index:65;
  }
  .topbar nav .navlinks.open{transform:none;visibility:visible;transition:transform .5s var(--ease),visibility 0s}
  .topbar.solid{backdrop-filter:none;background:var(--washi)}
  .navlinks a{font-size:22px;font-family:var(--serif)}
  .nav-soon{font-size:22px;font-family:var(--serif)}
  .menu-tab{display:flex}
  .hd-cta{display:none}
}
@media(max-width:720px){
  body{font-size:17px}
  .wrap{padding:0 22px}
  .topbar{padding:12px 20px}
  .artstrip{grid-template-columns:1fr}
  .ph-split .ph-grid{grid-template-columns:1fr;justify-items:start;gap:26px}
  .ph-portrait{order:-1;width:132px}
  .ink-dot{width:104px;margin-block:4px 14px;margin-inline-start:18px}
  .bookbox{grid-template-columns:1fr;justify-items:center;text-align:center}
  .bookbox .en{text-align:center}
  .book-txt{text-align:start}
  .birds{grid-template-columns:1fr}
  .birds .flip{display:none}
  .f2{grid-template-columns:1fr}
  .btn{width:100%;padding-inline:20px}
  .f-actions{gap:14px}
  .f-grid{grid-template-columns:1fr;gap:38px}
  .f-bar{justify-content:center;text-align:center}
  .wsgrid{grid-template-columns:1fr}
  .ws-wide{grid-column:span 1}
  .hero-trees .tree{opacity:.3}
}
@media(prefers-reduced-motion:reduce){
  .enso-sweep{stroke-dashoffset:0;animation:none !important}
  *{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .hero-logo,.hero-name,.hero-sub,.hero-tag,.kanji-sm,.hero-cta{opacity:1}
  .hero-rule{height:34px}
}

/* === lumi:about-rimon === */
/* עמוד "מי אני": במקום עיגולי הדיו הצפים - רימון אחד בדיו כסימן מים שקט ברקע.
   הרימון חולץ מציור "שנה טובה" של גלית; הוא דקורטיבי בלבד ולכן aria-hidden. */
.rimon-band{position:relative;overflow:clip}
.rimon-band > .wrap{position:relative;z-index:1}
.band-rimon{
  position:absolute;z-index:0;
  inset-inline-end:clamp(6px,2.6vw,44px);
  top:clamp(170px,22vh,330px);
  width:clamp(190px,24vw,360px);height:auto;
  opacity:.11;mix-blend-mode:multiply;
  pointer-events:none;-webkit-user-select:none;user-select:none;
}
/* מתחת ל-1280px נגמרים השוליים הפנויים משמאל לטקסט, ולכן הרימון מתעמעם */
@media(max-width:1279px){
  .band-rimon{opacity:.055}
}
@media(max-width:860px){
  .band-rimon{
    inset-inline-end:4px;top:clamp(90px,14vh,180px);
    width:clamp(150px,42vw,250px);opacity:.05;
  }
}
/* === /lumi:about-rimon === */

/* === lumi:says-paper === */
/* "מה אומרים עליי" - היה פס שחור (#121210) שנחת באמצע אתר של נייר וואשי.
   עכשיו: מזרן נייר כהה-מעט, כרטיסי שמנת עם קו שיער, דיו במקום לבן, שַׁשַׁר כהדגשה יחידה. */
.tsec{
  --tbg:var(--washi-deep);
  --ttext:var(--ink);
  --tsoft:var(--ink-faint);
  --tline:var(--line);
  border-block:1px solid var(--line);
}
.tsec .kick{color:var(--ink-faint)}
.tsec h2{color:var(--ink)}

/* ההיעלמות בקצוות עדינה יותר - על רקע בהיר אין צורך במסכה רחבה */
.tcar{
  -webkit-mask-image:linear-gradient(to left,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(to left,transparent,#000 4%,#000 96%,transparent);
}

.tcard{
  background:var(--card-cream);
  border:1px solid var(--line);
  box-shadow:0 10px 28px rgba(20,19,16,.05);
}
.tcard::before{width:28px;height:2px;margin-bottom:14px;background:var(--vermilion);opacity:1}
.tcard p{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(15.5px,1.55vw,16.5px);line-height:1.75;color:var(--ink-soft);
}
.tcard .who{font-family:var(--sans);color:var(--ink-faint);padding-top:14px;font-size:12.5px}

.tnav button{border-color:var(--line);color:var(--ink)}
.tnav button:hover{border-color:var(--ink);background:rgba(20,19,16,.05)}

/* --- הנמכה: הסקשן היה 807px גובה. חצי המסוע יורדים (הוא נע לבד בלולאה),
   והריווח מתהדק - בלי לפגוע בקריאות ובניגודיות. --- */
.tnav{display:none}
.tsec{padding:clamp(38px,5.2vh,58px) 0}
.tsec .kick{font-size:11.5px;letter-spacing:.4em;margin-bottom:9px}
.tsec h2{font-size:clamp(25px,3vw,33px);margin-bottom:clamp(20px,2.6vh,28px)}

/* --- הכרטיסיות היו מסיביות: 352px ברוחב, ריפוד 28 וצל מרחף.
   עכשיו רצועה שקטה - צרות יותר, בלי צל, וקו שיער בלבד. --- */
.tcard{
  width:min(286px,74vw);padding:clamp(18px,1.7vw,23px);
  box-shadow:none;
  background:color-mix(in srgb,var(--card-cream) 62%,transparent);
  margin-inline-end:clamp(12px,1.3vw,18px);
}
.tcard::before{width:22px;height:2px;margin-bottom:12px}
.tcard p{font-size:clamp(13.5px,1.15vw,14.5px);line-height:1.7}
.tcard .who{padding-top:12px;font-size:11.5px}

/* בנייד הרצועה צרה, ולכן ההיעלמות צריכה להיות ארוכה יותר - אחרת המילים
   נקטעות באמצע במקום להתמוסס */
@media(max-width:860px){
  .tcar{
    -webkit-mask-image:linear-gradient(to left,transparent,#000 11%,#000 89%,transparent);
    mask-image:linear-gradient(to left,transparent,#000 11%,#000 89%,transparent);
  }
  .tcard{padding:22px 22px}
}
/* === /lumi:says-paper === */

/* === lumi:logo-ring === */
/* העיגולים של "עם מי עבדתי" - הטבעת לא נסגרה למעלה-שמאל.
   הסיבה: overflow:hidden יחד עם border-radius:50% בתוך שכבת קומפוזיציה
   (ל-.logos יש will-change:transform בגלל הטיקר). כרום מרסטר את חיתוך
   הפינה העגולה פעם אחת לשכבה ואוכל נתח מהמסגרת. התמונה ממילא בגודל 66%
   וממורכזת, ולכן ה-overflow מיותר - הסרתו סוגרת את הטבעת בלי לפגוע בביצועים. */
.logo-c{overflow:visible}
/* === /lumi:logo-ring === */

/* === lumi:round4 === */
/* מבנה משותף לעמוד הסדנאות ולעמוד ההרצאות: תמונה אחת משמאל, הטקסט מימין.
   מחליף את .lect ואת גלריית ה-.wsgrid בת ארבע התמונות. */
.split{display:grid;grid-template-columns:1fr 340px;gap:clamp(30px,4.5vw,64px);align-items:start}
.split-fig{margin:0;order:2;position:sticky;top:104px}
.split-txt{order:1}
.split-fig img{
  width:100%;height:auto;border:1px solid var(--line);
  transition:filter 1s var(--ease);
}
.split-fig figcaption{
  margin-top:12px;font-size:13px;letter-spacing:.06em;
  color:var(--ink-faint);text-align:center;
}
/* בהרצאות התמונה בשחור-לבן (בקשת יעל); בסדנאות רק מרוככת */
#hartsaot .split-fig img{filter:grayscale(1) contrast(1.04)}
#sadnaot .split-fig img{filter:saturate(.5) contrast(1.03)}
.split-fig img:hover{filter:none}
/* בתוך עמודה צרה שלושת הכרטיסים נערמים במקום לעמוד זה לצד זה */
.split-txt .works{grid-template-columns:1fr;margin-top:0}
.split-txt p.lede{max-width:none}
@media(max-width:860px){
  .split{grid-template-columns:1fr;gap:26px}
  .split-fig{order:1;position:static;max-width:340px;margin-inline:auto}
  .split-txt{order:2}
}

/* טיקר הלוגואים ירד אל מתחת ל"מה זה זן-גה" ויושב על השמנת */
.lgband{padding:clamp(44px,6.5vh,74px) 0}
.lgband .ltick{margin-top:clamp(22px,3vw,34px)}

/* סימני מים - רימון וציפור. היו חיוורים מדי מכדי שייראו, ולכן הועלו. */
.band-rimon{opacity:.26}
@media(max-width:1279px){.band-rimon{opacity:.2}}
@media(max-width:860px){.band-rimon{opacity:.14}}

.band-bird{
  position:absolute;z-index:0;
  inset-inline-end:clamp(-30px,-1vw,0px);
  bottom:clamp(10px,3vh,48px);
  width:clamp(170px,20vw,300px);height:auto;
  opacity:.24;mix-blend-mode:multiply;
  pointer-events:none;-webkit-user-select:none;user-select:none;
}
@media(max-width:1279px){.band-bird{opacity:.16;width:clamp(150px,20vw,230px)}}
@media(max-width:860px){.band-bird{opacity:.1;width:clamp(120px,34vw,190px);bottom:6px}}
/* === /lumi:round4 === */

/* === lumi:round5 === */
/* מיקום סימני המים בעמוד הבית. הכלל: הם יושבים רק בשוליים הריקים -
   לעולם לא מאחורי טקסט, כדי לא לפגוע בניגודיות. */

/* ציפור - בפינה השמאלית-תחתונה של "מי אני", מתחת לתמונה העגולה */
#intro > .band-bird{
  inset-inline-end:clamp(-26px,-1.2vw,4px);
  inset-inline-start:auto;
  top:auto;
  bottom:clamp(14px,2.5vh,34px);
  width:clamp(150px,17vw,240px);
  opacity:.3;
}
@media(max-width:1023px){
  #intro > .band-bird{width:clamp(120px,17vw,180px);opacity:.2}
}
@media(max-width:860px){
  #intro > .band-bird{
    inset-inline-end:-18px;bottom:8px;
    width:clamp(110px,30vw,160px);opacity:.13;
  }
}

/* רימון - בשוליים הימניים של פסקת הציטוט, לצד הכרטיס ולא מתחתיו */
.quote-band > .band-rimon{
  inset-inline-start:clamp(-34px,-1.4vw,8px);
  inset-inline-end:auto;
  top:50%;
  transform:translateY(-50%);
  width:clamp(160px,19vw,250px);
  opacity:.32;
}
@media(max-width:1023px){
  .quote-band > .band-rimon{width:clamp(120px,16vw,170px);opacity:.22}
}
@media(max-width:860px){
  .quote-band > .band-rimon{
    inset-inline-start:-26px;top:auto;bottom:10px;transform:none;
    width:clamp(105px,28vw,150px);opacity:.14;
  }
}
/* === /lumi:round5 === */


/* === lumi:about-bird === */
/* הציפור והרימון ירדו מדף הבית ועברו לרקע של עמוד "מי אני".
   שם הציפור נצמדה לקצה ונחתכה - כאן היא נכנסת פנימה. */
.rimon-band .band-bird{
  inset-inline-end:clamp(10px,2.4vw,46px);
  bottom:clamp(24px,5vh,90px);
  opacity:.2;
}
@media (max-width:860px){
  .rimon-band .band-bird{inset-inline-end:6px;opacity:.12;width:clamp(120px,32vw,180px)}
}
/* === /lumi:about-bird === */


/* === lumi:round6 === */
/* סבב הערות 23.8 ערב - הירו של דף הבית */

/* הלוגו בהדר מתחרה בלוגו הגדול של ההירו - אבל רק בראש העמוד.
   ברגע שההירו נגלל מחוץ למסך התחרות נגמרת, ולכן במקום להסתיר
   את הסמל לצמיתות אנחנו נותנים לו להיכנס עם הסרגל המוצק,
   בדיוק כמו בכל שאר העמודים. הכלל נמצא למעלה: .topbar:not(.solid) .brandmark */

/* הלוגו המרכזי יורד מעט, והשם נצמד אליו */
body.home .hero-id{margin-top:clamp(18px,5vh,58px)}

/* הילה אחת בלבד, ביצתית, סביב הלוגו והכותרת.
   קודם היו שתיים - .hero-focus::before ו-.hero-foot::before -
   ושתיהן נקראו כאליפסות פחוסות. שתיהן כבויות, ובמקומן אחת. */
.hero-focus::before{display:none}
.hero-foot::before{display:none}
body.home .hero-inner::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  top:clamp(-30px,-3vh,10px);left:50%;translate:-50% 0;
  width:min(620px,84vw);height:min(760px,80vh);
  border-radius:50% 50% 47% 47% / 58% 58% 42% 42%;
  background:radial-gradient(ellipse at 50% 44%,
    color-mix(in srgb,var(--paper) 82%,transparent) 0%,
    color-mix(in srgb,var(--paper) 60%,transparent) 34%,
    color-mix(in srgb,var(--paper) 26%,transparent) 58%,
    color-mix(in srgb,var(--paper) 8%,transparent) 76%,
    transparent 92%);
  filter:blur(6px);
}

/* פסקת הפתיחה - הטקסט הקטן שמתחת ל-禅画 */
.hero-note{
  margin:20px auto 0;width:100%;max-width:64ch;
  font-family:var(--sans);font-weight:400;
  font-size:clamp(13px,1.3vw,15px);line-height:1.85;
  color:var(--ink-soft);text-wrap:pretty;
  opacity:0;animation:fadeUp 1.3s var(--ease) 1.5s forwards;
}

/* העץ נכנס פנימה וגבוה יותר - הצמרת עוברת חלקית מאחורי הטקסט */
.tree-l{right:3vw;width:clamp(220px,24vw,370px);opacity:.2}
.tree-l2{right:20vw;bottom:0;width:clamp(130px,14vw,215px);opacity:.1}
.tree-c{right:38vw;bottom:0;width:clamp(100px,10vw,160px);opacity:.05}

@media (max-width:860px){
  body.home .hero-id{margin-top:clamp(10px,3vh,28px)}
  .hero-note{max-width:42ch;font-size:13px;line-height:1.75;margin-top:16px}
  body.home .hero-inner::before{width:92vw;height:62vh;top:0}
  .tree-l{right:-4vw;width:clamp(180px,52vw,260px);opacity:.15}
  .tree-l2{right:26vw;opacity:.1}
  .tree-c{opacity:.07}
}
@media (prefers-reduced-motion:reduce){.hero-note{opacity:1;animation:none}}
/* === /lumi:round6 === */


/* === lumi:round7 === */
/* כתב היד של הכותרות בעמודים הפנימיים - Ktav Yad CLM (Culmus, GPL).
   הגופן קיים רק בגרסה נטויה, ולכן font-style מוצהר normal
   כדי שהדפדפן לא יטה אותו פעם שנייה בסינתזה. */
@font-face{
  font-family:'Ktav Yad CLM';
  src:url('../fonts/KtavYadCLM-MediumItalic.woff2') format('woff2');
  font-weight:400 500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Ktav Yad CLM';
  src:url('../fonts/KtavYadCLM-BoldItalic.woff2') format('woff2');
  font-weight:600 700;font-style:normal;font-display:swap;
}

body:not(.home) .page-head h1{
  font-family:'Ktav Yad CLM','Gveret Levin',var(--serif),cursive;
  font-weight:500;
  font-size:clamp(40px,6.4vw,74px);
  /* לכתב יד יש זנבות ארוכים - שורה צפופה מדי מפילה אותם על הטקסט שמתחת */
  line-height:1.42;
  letter-spacing:0;
  padding-block-end:.08em;
}
/* === /lumi:round7 === */


/* === lumi:pagetrees === */
/* רקע עצים אחד לכל האתר, מקובע לחלון הדפדפן - כמו באתר הישן.
   כל מקטע שקוף הוא חלון אל אותה תמונה, ולכן בגלילה נפגשים בה שוב ושוב.
   z-index:-1 מציב את השכבה מעל צבע הרקע של הדף אך מתחת לרקעי המקטעים,
   ולכן מקטע אטום (cream / tsec / contact / footer) מכסה אותה לגמרי. */
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    url('../img/pine-left.png'),
    url('../img/pine-right.png'),
    url('../img/pine-left.png');
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-position:
    right -3vw bottom -2vh,
    right 19vw bottom -1vh,
    right 36vw bottom 0;
  background-size:auto 94vh, auto 54vh, auto 36vh;
  filter:grayscale(1);
  /* העצים היו .14 עם מסכה של 30% במרכז - כלומר .042 בפועל, כמעט בלתי נראים.
     מעלים את הבסיס ומעמיקים את המסכה, כך שהשוליים מתחזקים פי 1.8
     ואילו עמודת הטקסט במרכז כמעט לא משתנה והניגודיות נשמרת. */
  opacity:.25;
  -webkit-mask-image:linear-gradient(to left,#000 0%,#000 5%,rgba(0,0,0,.2) 22%,rgba(0,0,0,.17) 72%,#000 94%);
  mask-image:linear-gradient(to left,#000 0%,#000 5%,rgba(0,0,0,.2) 22%,rgba(0,0,0,.17) 72%,#000 94%);
}

/* שכבת העצים הפרטית של ההירו מיותרת עכשיו - אותה תמונה כבר קבועה
   מאחורי כל העמוד, וכפילות הייתה מכפילה את הדיו רק במסך הראשון. */
.hero-trees{display:none}

@media (max-width:860px){
  body::after{
    background-position:right -14vw bottom -2vh, right 34vw bottom 0, right 62vw bottom 0;
    background-size:auto 70vh, auto 40vh, auto 26vh;
    opacity:.24;
  }
}
/* === /lumi:pagetrees === */

/* === lumi:heroA === */
/* הירו של דף הבית בלבד - סבב 23.8, 20:15 */

/* הלוגו יורד עוד מעט מהתפריט */
body.home .hero-id{margin-top:clamp(34px,8vh,96px)}

/* הקו שבין הלוגו לכותרת מתארך - קו אנכי ארוך יותר, נשימה לפני המסר */
body.home .hero-rule{animation-name:growLineHome;margin-bottom:26px}
@keyframes growLineHome{to{height:78px}}

/* שלוש ההצעות יושבות עכשיו מתחת ל"ציורי זן ומדיטציה" */
body.home .hero-focus .hero-sub{margin-top:20px}
body.home .hero-focus .hero-note{margin-top:22px}

/* 禅画 עבר לתחתית, ממורכז מעל הכפתורים */
body.home .hero-foot .kanji-sm{margin:0 auto 18px}

/* ההילה יורדת - מרכזה יושב על "ציורי זן ומדיטציה" ולא על הלוגו */
body.home .hero-inner::before{
  top:clamp(78px,13vh,168px);
  height:min(690px,72vh);
}

@media (max-width:860px){
  body.home .hero-id{margin-top:clamp(16px,4vh,40px)}
  @keyframes growLineHome{to{height:52px}}
  body.home .hero-rule{margin-bottom:18px}
  body.home .hero-focus .hero-sub{margin-top:16px}
  body.home .hero-foot .kanji-sm{margin-bottom:14px}
  body.home .hero-inner::before{top:clamp(54px,10vh,110px);height:56vh}
}
@media(prefers-reduced-motion:reduce){body.home .hero-rule{height:78px}}
/* === /lumi:heroA === */

/* === lumi:fontcredit === */
/* קרדיט הגופנים - חובת רישוי (Ktav Yad CLM מופץ ב-GNU GPL v2) */
.f-fonts{
  margin:14px 0 0;width:100%;max-width:none;
  font-family:var(--sans);font-size:11.5px;line-height:1.85;
  letter-spacing:.02em;color:var(--fsoft);opacity:.66;
}
.f-fonts a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.f-fonts a:hover{opacity:1;color:#fff}
/* === /lumi:fontcredit === */

/* === lumi:mobileA === */
/* התאמת מובייל מלאה - 23.8. נבדק ב-360 / 390 / 430. */

@media(max-width:860px){

  /* לשונית התפריט הייתה מלבן אדום שיושב באמצע גובה המסך ומכסה טקסט
     וכפתורים בכל גלילה. במקומה כפתור עגול קבוע בפינה העליונה. */
  .menu-tab{
    display:flex; top:10px; right:auto; left:14px;
    width:48px; height:48px; min-width:48px; min-height:48px; padding:0;
    border-radius:50%; align-items:center; justify-content:center;
    box-shadow:0 3px 16px rgba(30,35,32,.2);
  }
  .menu-tab span{display:none}
  .menu-tab::before,.menu-tab::after{
    content:''; position:absolute; left:50%; translate:-50% 0;
    width:19px; height:1.6px; border-radius:2px; background:#f7f3e9;
    transition:top .3s var(--ease), rotate .3s var(--ease), box-shadow .2s linear;
  }
  .menu-tab::before{top:16px; box-shadow:0 7px 0 #f7f3e9}
  .menu-tab::after{top:30px}
  .menu-tab[aria-expanded="true"]::before{top:23px; rotate:45deg; box-shadow:none}
  .menu-tab[aria-expanded="true"]::after{top:23px; rotate:-45deg}
  .menu-tab:focus-visible{outline:2px solid var(--ink); outline-offset:3px}

  /* התפריט הפתוח מתחיל מתחת לכפתור כדי שלא יסתיר את הפריט הראשון */
  .topbar nav .navlinks{padding-top:76px}

  /* יעדי מגע - 44px לפי WCAG. בפוטר הקישורים היו 21px גובה. */
  .f-col ul a,.f-contact a{
    display:inline-flex; align-items:center; min-height:44px; padding-block:2px;
  }
  .f-contact li{align-items:center}

  /* טקסט זעיר: תוויות מקטע, שמות ממליצים וקרדיט הגופנים */
  .eyebrow{font-size:13px}
  .lbl,.f-h{font-size:13px}
  .who,.kick{font-size:12.5px}
  .f-fonts{font-size:12px; line-height:1.95}

  /* כרטיסי יצירת הקשר - הטלפון והדוא"ל היו 35px גובה */
  .contact-band a[href^="tel"],.contact-band a[href^="mailto"],
  #contact a[href^="tel"],#contact a[href^="mailto"]{
    display:inline-flex; align-items:center; min-height:44px;
  }

  /* הלוגו בהדר - יעד מגע מלא */
  .brandmark{display:inline-flex; align-items:center; min-height:44px}

  /* קישורי הניווט בפוטר - כל השורה לחיצה, לא רק שתי המילים */
  .f-col ul li{display:flex}
  .f-col ul a{flex:1}

  /* פסקת "וכן:" מתחת לטיקר הלוגואים - נשמה לפני הפוטר */
  .credit{line-height:1.9}
}

/* מסכים צרים במיוחד - 360 ומטה */
@media(max-width:380px){
  .wrap{padding:0 18px}
  .lnk{padding:13px 20px; font-size:15px}
  .hero-cta{gap:10px}
  .tcard{width:250px}
}
/* === /lumi:mobileA === */

/* === lumi:round8 === */
/* טלפון בששר בכל בלוקי פרטי הקשר (לא בפוטר - שם הרקע שחור) */
.cinfo .blk a[href^="tel:"]{
  color:var(--vermilion);
  font-weight:400;
  letter-spacing:.02em;
}
.cinfo .blk a[href^="tel:"]:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- פרלקסה עדינה ---------- */
html.has-parallax body::before{
  inset:-820px 0;
  translate:0 var(--par-bg, 0px);
  will-change:transform;
}
html.has-parallax .tree-l,
html.has-parallax .tree-l2,
html.has-parallax .tree-c{
  translate:0 var(--par-tree, 0px);
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){
  html body::before{translate:none}
  .tree-l,.tree-l2,.tree-c{translate:none}
}
html.a11y-stop body::before,
html.a11y-stop .tree-l,
html.a11y-stop .tree-l2,
html.a11y-stop .tree-c{translate:none}

/* ---------- העדפות נגישות ---------- */
html.a11y-z1 body{zoom:1.12}
html.a11y-z2 body{zoom:1.28}
html.a11y-links main a:not(.lnk):not(.btn):not(.brandmark),
html.a11y-links footer a{
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  font-weight:400;
}
html.a11y-stop *,
html.a11y-stop *::before,
html.a11y-stop *::after{
  animation-duration:.001s !important;
  animation-iteration-count:1 !important;
  transition-duration:.001s !important;
  scroll-behavior:auto !important;
}
html.a11y-stop .rv{opacity:1 !important; transform:none !important}

/* ---------- כפתור ופאנל הנגישות ---------- */
.a11y-btn{
  position:fixed; inset-inline-start:18px; bottom:18px; z-index:90;
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--washi); color:var(--ink);
  border:1px solid var(--line); cursor:pointer;
  box-shadow:0 4px 16px rgba(28,26,22,.14);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.a11y-btn:hover{background:var(--vermilion); color:#fff; border-color:var(--vermilion)}
.a11y-btn svg{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round}
.a11y-btn svg circle{fill:currentColor; stroke:none}

.a11y-panel{
  position:fixed; inset-inline-start:18px; bottom:76px; z-index:91;
  width:min(268px, calc(100vw - 36px));
  background:var(--card-cream, #faf7ee);
  border:1px solid var(--line);
  box-shadow:0 10px 34px rgba(28,26,22,.16);
  padding:18px 18px 14px;
  display:flex; flex-direction:column; gap:10px;
}
.a11y-panel[hidden]{display:none}
.a11y-h{
  font-family:var(--serif); font-size:18px; font-weight:400;
  margin:0 0 2px; padding-bottom:8px; border-bottom:1px solid var(--line);
}
.a11y-row{display:flex; flex-direction:column; gap:7px}
.a11y-lbl{font-size:13.5px; color:var(--ink-soft); letter-spacing:.04em}
.a11y-seg{display:flex; gap:6px}
.a11y-seg button{
  flex:1; min-height:44px; padding:6px 4px;
  font-family:inherit; font-size:13.5px; line-height:1.3;
  background:transparent; color:var(--ink);
  border:1px solid var(--line); cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.a11y-seg button[aria-pressed="true"]{background:var(--vermilion); color:#fff; border-color:var(--vermilion)}
.a11y-opt{
  min-height:44px; text-align:start; padding:8px 12px;
  font-family:inherit; font-size:14.5px;
  background:transparent; color:var(--ink);
  border:1px solid var(--line); cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.a11y-opt::after{content:'כבוי'; font-size:12.5px; color:var(--ink-faint)}
.a11y-opt[aria-pressed="true"]{border-color:var(--vermilion); color:var(--vermilion)}
.a11y-opt[aria-pressed="true"]::after{content:'פועל'; color:var(--vermilion)}
.a11y-reset{
  min-height:44px; font-family:inherit; font-size:13.5px;
  background:transparent; color:var(--ink-soft);
  border:0; border-top:1px solid var(--line); cursor:pointer; padding-top:10px;
}
.a11y-link{
  font-size:13.5px; color:var(--ink-soft);
  min-height:44px; display:flex; align-items:center;
  text-decoration:underline; text-underline-offset:3px;
}
.a11y-link:hover{color:var(--vermilion)}

@media (max-width:860px){
  .a11y-btn{inset-inline-start:14px; bottom:14px}
  .a11y-panel{inset-inline-start:14px; bottom:70px}
}

/* ---------- עמוד הצהרת הנגישות ---------- */
.a11y-doc{max-width:80ch}
.a11y-doc h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(21px,2.4vw,26px);
  margin:34px 0 12px;
}
.a11y-doc h2:first-of-type{margin-top:8px}
.a11y-doc p, .a11y-doc li{color:var(--ink); font-size:17px; line-height:1.9}
.a11y-doc ul{padding-inline-start:22px; margin:10px 0 6px}
.a11y-doc li{margin-bottom:6px}
.a11y-doc .a11y-contact{
  background:var(--card-cream, #faf7ee);
  border:1px solid var(--line);
  padding:22px 24px; margin-top:26px;
}
.a11y-doc .a11y-contact a{color:var(--vermilion)}
.a11y-doc .a11y-updated{margin-top:22px; font-size:14.5px; color:var(--ink-soft)}

/* קישור הנגישות בשורת הקופירייט */
.f-bar .f-legal{display:inline-flex; align-items:center; gap:10px}
.f-bar .f-legal a{text-decoration:underline; text-underline-offset:3px}
.f-bar .f-legal a:hover{color:var(--vermilion)}
/* === /lumi:round8 === */


/* === lumi:cglass === שקיפות בטופס יצירת קשר - העצים שברקע נראים דרכו */
/* שכבת העצים היא body::after ב-position:fixed וב-z-index:-1, כלומר היא נצבעת
   מעל רקע ה-body ומתחת לרקעים של המקטעים. ברגע ש-.contact-band ו-.cbox
   חצי-שקופים העצים נחשפים דרכם - בלי HTML נוסף, בלי שכבה כפולה, ובלי
   לשבור את הרישום המדויק מול שאר המקטעים השקופים בעמוד. */
.contact-band{
  background:color-mix(in srgb,var(--paper) 34%,transparent);
}
.cbox{
  /* יושב על הבאנד, ולכן האטימות בפועל באזור הכרטיס היא ~62% -
     מספיק כדי שהכרטיס עדיין ייקרא ככרטיס, מעט מספיק כדי שהעצים יעברו. */
  background:color-mix(in srgb,var(--card-cream) 42%,transparent);
  box-shadow:0 18px 44px rgba(20,19,16,.05);
}
.field input,.field textarea{
  background:color-mix(in srgb,#fffdf7 82%,transparent);
}
.field input:focus,.field textarea:focus{
  background:color-mix(in srgb,#fffdf7 96%,transparent);
}
/* התוויות הזעירות בבאנד היו ב---ink-faint על 12.5px, כלומר 4.4-5.0:1 עוד לפני
   השקיפות. ענף כהה שעובר מתחתיהן מפיל אותן מתחת ל-AA, ולכן הן יורדות כאן
   ל---ink-soft. ההבדל הוויזואלי זניח והניגודיות עולה מעל 8:1. */
.contact-band .eyebrow span,
.contact-band .cinfo .lbl,
.contact-band .cinfo-sig{
  color:var(--ink-soft);
}
/* מי שמבקש ניגודיות מוגברת מקבל נייר אטום, בלי עצים מאחורי הטקסט. */
@media (prefers-contrast:more){
  .contact-band{background:var(--paper)}
  .cbox{background:var(--card-cream)}
  .field input,.field textarea{background:#fffdf7}
}
/* === /lumi:cglass === */

/* === lumi:round9 === */
/* תיקון AA: ה-placeholder היה --ink-faint ב-70% שקיפות ונמדד 3.31:1 מול
   סיבי הנייר. עכשיו אטום, וגם מעט כהה יותר - עדיין בהיר מהטקסט שמוקלד. */
.field input::placeholder,
.field textarea::placeholder{
  color:#5b5649;
  opacity:1;
}
/* === /lumi:round9 === */

/* === lumi:round10 === */
/* עמוד "מי אני" - הקטנת שתי הכותרות לבקשת הלקוחה.
   הבורר חייב לכלול body:not(.home) כדי לגבור על כלל כתב היד שבבלוק heroA. */
body:not(.home) .page-head.ph-split h1{font-size:clamp(34px,4.3vw,64px)}
.about-prose h2.big{font-size:clamp(26px,3.2vw,43px)}

/* "עם מי עבדתי" - בלי כיתוב מתחת ללוגו. השם נשאר ב-alt של התמונה
   ולכן קורא מסך עדיין מקריא אותו. */
.logo-t{display:none}
.logo-i{margin-bottom:0}
/* === /lumi:round10 === */

/* === lumi:cglass2 === רק הכרטיס שקוף, רקע המקטע חוזר לנייר אטום */
/* מחליף את ההתנהגות של lumi:cglass לפי בקשת יעל: הרצועה של יצירת קשר
   חוזרת לנייר אטום כמו במקור, והעצים נשארים רק בתוך כרטיס הטופס.
   כדי שהעץ בכרטיס יישאר באותו מקום בדיוק כמו שכבת העצים של הדף,
   השכבה הפנימית משתמשת באותן תמונות, אותו background-position ואותו
   background-size, עם background-attachment:fixed - כלומר היא מעוגנת
   לחלון ולא לכרטיס, בדיוק כמו body::after. הכרטיס הוא חלון, לא תמונה
   נפרדת שרק דומה. */
.contact-band{
  background:var(--paper);
}
.cbox{
  position:relative;
  isolation:isolate;
  background:var(--card-cream);
}
.cbox::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    url('../img/pine-left.png'),
    url('../img/pine-right.png'),
    url('../img/pine-left.png');
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-attachment:fixed,fixed,fixed;
  background-position:
    right -3vw bottom -2vh,
    right 19vw bottom -1vh,
    right 36vw bottom 0;
  background-size:auto 94vh, auto 54vh, auto 36vh;
  filter:grayscale(1);
  /* body::after הוא .14 עם מסכה שמחלישה אותו ל-32% במרכז, שם יושב
     הכרטיס. .14 * .32 = .045, ולכן העץ בכרטיס יוצא בעוצמה זהה למה
     שהיה - בלי מסכה, שכאן היא מיותרת. */
  opacity:.045;
}
/* השדות נשארים כפי שהם - שקיפות קלה, כך שהעץ עובר גם מתחתיהם. */
.field input,.field textarea{
  background:color-mix(in srgb,#fffdf7 82%,transparent);
}
.field input:focus,.field textarea:focus{
  background:color-mix(in srgb,#fffdf7 96%,transparent);
}
/* הכותרת הזעירה "יצירת קשר" יושבת מחוץ לכרטיס, ומעל נייר אטום -
   ולכן היא חוזרת לצבע המקורי. התוויות שבתוך הכרטיס נשארות כהות
   יותר, כי שם עדיין עובר ענף מתחתיהן. */
.contact-band .eyebrow span{
  color:var(--ink-faint);
}
@media (prefers-contrast:more){
  .cbox::before{display:none}
  .field input,.field textarea{background:#fffdf7}
}
/* === /lumi:cglass2 === */

/* === lumi:rhythm === ריתמוס הטקסט בעמודים הפנימיים */
/* התבנית שיעל ביקשה: קאנג'י פותח בששר במקום כותרת גדולה, פסקה קצרה
   ברוחב שורה מוגבל, מרווח לבן גדול בין בלוק לבלוק, ועוגן אופקי
   שמתחלף - כך שהעין יורדת בזיגזג ולא בטור אחד. אין כרטיס, אין מסגרת
   ואין רקע נפרד. המספרים נמדדו מצילום ההפניה: פער 187px בין בלוקים,
   40px בין הקאנג'י לטקסט, רוחב שורה מקסימלי 481px (~50 תווים). */
.rhythm{
  --rhy-measure:31em;
  --rhy-gap:clamp(96px,16vh,190px);
  --rhy-lead:clamp(20px,2.4vh,34px);
}
/* .prose מגביל ל-900px. בתוך הריתמוס ההגבלה עוברת לבלוק עצמו
   (--rhy-measure), ולכן המכל נפתח לרוחב המלא - אחרת טווח התנועה
   האופקית של הבלוקים נחתך בשליש. */
.prose.rhythm{max-width:none}
.rhythm>.rhy{
  max-width:var(--rhy-measure);
  margin-block:var(--rhy-gap);
}
.rhythm>.rhy:first-child{margin-block-start:0}
.rhythm>.rhy:last-child{margin-block-end:0}

/* העוגן המתחלף. margin-inline הוא לוגי - הערך הראשון הוא ה-start
   (ימין בעברית) והשני ה-end. חובה לוגי ולא left/right, אחרת הכיוון
   מתהפך. הסבב הוא ימין ← שמאל ← מרכז, בדיוק כמו בהפניה, והוא רץ
   מעצמו לפי nth-child כך שאפשר להוסיף או להוריד בלוקים בלי לתחזק
   מחלקות מיקום ידניות. */
.rhythm>.rhy:nth-child(3n+1){margin-inline:0 auto}
.rhythm>.rhy:nth-child(3n+2){margin-inline:auto 0}
.rhythm>.rhy:nth-child(3n+3){margin-inline:auto}

/* הקאנג'י הוא הששר היחיד בבלוק, ומיושר לקצה הפתיחה של הפסקה.
   ב-HTML הוא תמיד aria-hidden ו-lang="ja" - קורא מסך לא אמור להקריא
   אותו באמצע טקסט עברי, וגם לא לנסות להגות אותו בעברית. */
.rhy-k{
  display:block;
  font-family:var(--jp);font-weight:400;
  font-size:clamp(20px,2.1vw,25px);line-height:1;
  letter-spacing:.1em;color:var(--vermilion);
  /* הילת נייר צרה. במקום שהנייר בהיר היא בלתי נראית, ורק היכן שענף
     כהה עובר מתחת לגליף היא מרימה את הרקע המקומי מעל 4.5:1 */
  text-shadow:0 0 2px var(--paper),0 0 5px var(--paper),0 0 9px var(--paper);
  margin-block-end:var(--rhy-lead);
}
/* כשיש גם כיתוב עברי זעיר, הוא יושב על אותה שורה עם הקאנג'י במקום
   להיערם מתחתיו - שתי שורות זעירות אחת מעל השנייה יוצרות בדיוק את
   העומס שהתבנית הזאת באה להסיר. */
.rhy-top{
  display:flex;align-items:baseline;
  gap:14px;margin-block-end:var(--rhy-lead);
}
.rhy-top .rhy-k{margin-block-end:0}

/* === lumi:enso === */
/* עמוד הסדנאות - עיגול דיו אדום במקום הסימנית היפנית.
   קישוט טהור: aria-hidden ב-HTML, ולכן אין לו alt ואין לו תפקיד סמנטי.
   הגודל נגזר מגובה השורה של הכיתוב שלצידו כדי ששניהם יישבו על אותו קו. */
.rhy-e{
  display:block;flex:0 0 auto;
  width:clamp(104px,11vw,148px);aspect-ratio:304/272;
  background:url('../img/enso-red.png') center/contain no-repeat;
  /* אותה הילת נייר שהגנה על הקאנג'י מענף כהה שעובר מתחתיו */
  filter:drop-shadow(0 0 3px var(--paper)) drop-shadow(0 0 7px var(--paper));
}
/* ב-flex עם align-items:baseline לאלמנט ריק אין קו בסיס, ולכן
   מיישרים את השורה למרכז כשהקישוט הוא עיגול ולא גליף. */
.rhy-top:has(.rhy-e){align-items:center;gap:16px}
@media (prefers-contrast:more){
  .rhy-e{filter:none}
}
/* כפתור "צור קשר" בתחתית מקטע "מה אני מציעה" בדף הבית, ממורכז. */
.offer-cta{
  display:flex;justify-content:center;
  margin-block-start:clamp(44px,5.5vh,66px);
}
.offer-cta .btn{min-width:min(260px,80vw);justify-content:center;text-align:center}
/* === /lumi:enso === */

.rhythm .rhy .num{
  display:block;font-size:13px;letter-spacing:.13em;
  color:var(--ink-soft);
}

.rhythm .rhy h2,.rhythm .rhy h3{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(21px,1.85vw,26px);line-height:1.45;
  margin:0 0 clamp(14px,1.7vh,22px);
}
.rhythm .rhy h2.big{font-size:clamp(25px,2.4vw,32px)}
.rhythm .rhy p{
  max-width:none;
  font-size:clamp(16.5px,1.1vw,17.5px);
  line-height:2.05;
  text-align:start;
}
.rhythm .rhy p+p{margin-block-start:1.4em}
.rhythm .rhy ul{margin:0;padding-inline-start:1.15em}
.rhythm .rhy ul li{
  font-size:clamp(16px,1.05vw,17px);
  line-height:1.95;margin-block-end:.5em;
}
.rhythm .rhy .meta{
  margin-block-start:22px;padding:0;border:0;
  font-size:13.5px;letter-spacing:.1em;color:var(--ink-soft);
}
.rhythm .rhy .credit{margin-block-start:14px}

/* תמונה כבלוק בריתמוס - היא משתתפת בסבב העוגנים כמו כל בלוק אחר,
   בלי מסגרת ובלי משטח מתחתיה. שתי התמונות בעמודים האלה הן פורטרט
   גבוה, ולכן ההגבלה היא על הגובה ולא רק על הרוחב - הגבלת רוחב בלבד
   הופכת אותן לעמוד שלם. width:fit-content מצמיד את המסגרת לתמונה
   עצמה, כדי שהכיתוב לא ירחף מתחת לקופסה רחבה ממנה. */
.rhythm>.rhy--fig{width:fit-content;max-width:min(430px,54%)}
.rhy--fig img{width:auto;max-width:100%;max-height:clamp(340px,50vh,500px)}
.rhy--fig figcaption{
  margin-block-start:12px;font-size:13px;
  letter-spacing:.06em;color:var(--ink-soft);
}
/* הספר: הכריכה והטקסט זה לצד זה, בלי משטח הקרם והמסגרת. */
.rhythm>.rhy--book{max-width:min(640px,84%)}
.rhy--book .bk{display:flex;gap:clamp(20px,3vw,34px);align-items:flex-start}
.rhy--book .bk img{width:clamp(112px,13vw,158px);flex:none}
.rhy--book .yr{
  display:block;font-size:13px;letter-spacing:.12em;
  color:var(--ink-soft);margin-block-end:10px;
}
.rhy--book .en{font-family:var(--serif);font-size:clamp(19px,1.7vw,24px);line-height:1.4;margin-block-end:14px}

/* בנייד המרווחים של ההפניה נראים כמו דף ריק, והעוגן המתחלף חסר
   משמעות ברוחב של 390px. לכן: טור אחד ברוחב מלא, ומרווחים מצומצמים. */
@media (max-width:860px){
  .rhythm{--rhy-gap:clamp(74px,9vh,104px)}
  .rhythm>.rhy,
  .rhythm>.rhy:nth-child(3n+1),
  .rhythm>.rhy:nth-child(3n+2),
  .rhythm>.rhy:nth-child(3n+3){
    max-width:none;margin-inline:0;
  }
  .rhythm>.rhy--fig{max-width:none}
  .rhythm>.rhy--book{max-width:none}
  .rhy--book .bk{flex-direction:column}
  .rhy--book .bk img{width:clamp(130px,42vw,180px)}
}
/* === /lumi:rhythm === */

/* === lumi:ink === */
/* יעל: הטקסט במקטע זן-גה ובעמודים הפנימיים לא נקרא.
   הסיבה איננה הגודל אלא הצבע. שלוש דרגות הדיו הרכות - 141310,
   3b3830 ו-645f54 - יושבות מעל נייר עם סיבי וואשי כהים ומעל שכבת
   העצים, ושתי השכבות האלה מורידות כל גוון רך אל מתחת לסף הנוחות.

   במקום מלחמת ספציפיות מול עשרות כללים קיימים, מוגדרים כאן טוקני
   הדיו מחדש על המכל עצמו. כל כלל שמשתמש ב-var(--ink*) יורש שחור
   מלא, וגם כללים שייכתבו בעתיד. הששר אינו טוקן דיו ולכן אינו מושפע,
   וכך גם הפוטר הלבן שמשתמש ב---ftext.
   ארבעת העמודים הפנימיים, והם בלבד, מכילים .page-head. */
body:has(.page-head){
  --ink:#000;
  --ink-soft:#000;
  --ink-faint:#000;
  /* color יורש כערך מחושב. בלי ההצהרה הזאת אלמנט שאין לו כלל צבע
     משלו - כותרת או פסקה רגילה - ימשיך לרשת את הערך שחושב אצל האב
     לפני שהטוקן הוגדר מחדש, ויישאר 141310. */
  color:var(--ink);
}
#zenga{
  --ink:#000;
  --ink-soft:#000;
  --ink-faint:#000;
  color:var(--ink);
}
/* מקטע יצירת הקשר זהה בכל ששת העמודים. הוא נשאר בגווניו המקוריים
   כדי שלא ייפער הבדל בין דף הבית לפנימיים, וכדי שקו התחתית של שדות
   הטופס - שגם הוא נגזר מ---ink-faint - לא ישחיר. */
body:has(.page-head) .contact-band{
  --ink:#141310;
  --ink-soft:#3b3830;
  --ink-faint:#645f54;
  color:var(--ink);
}
/* --ink-faint משמש גם כמסגרת ההובר של קישור שקט. שם הוא נועד להיות
   רמז ולא קו שחור, ולכן מוחזר לערכו המקורי. */
body:has(.page-head) .lnk.quiet:hover,
#zenga .lnk.quiet:hover{border-color:#645f54}
/* === /lumi:ink === */

/* === lumi:navright === */
/* התפריט מוצמד לימין.
   הבר הוא flex עם שלושה ילדים: הסמל, הניווט וכפתור "צרו קשר".
   עם justify-content:space-between הניווט נדחף אל אמצע הבר - ב-1440
   הוא נמדד 554px מהקצה הימני. כאן הוא נצמד לתחילת השורה (ימין ב-RTL),
   ורק הכפתור נדחף אל הקצה הנגדי ב-margin אוטומטי.
   הכל בערכים לוגיים (start/end) כדי שלא יתהפך אם הכיוון ישתנה.
   דסקטופ בלבד: מתחת ל-861px הניווט הופך לשכבה מלאה עם .menu-tab
   והכפתור מוסתר, ולכן אין שם מה להצמיד. */
@media(min-width:861px){
  .topbar{justify-content:flex-start; gap:26px}
  .hd-cta{margin-inline-start:auto}

  /* הסמל שמור בשקיפות ולא ב-display, כדי שהבר לא יקפוץ.
     אבל בראש כל עמוד הוא נסתר, ואז הרוחב השמור שלו היה מרחיק
     את התפריט כ-93px מהקצה בלי סיבה נראית לעין.
     לכן הוא מתכווץ לרוחב אפס כשהבר שקוף, ונפתח כשהוא הופך למוצק -
     באותם .45s ובאותה עקומת האטה של הופעת הסמל עצמו.
     התוצאה היא הזזה רכה ומכוונת, לא קפיצה: הסמל פותח לעצמו מקום. */
  .brandmark{
    overflow:hidden;
    max-inline-size:120px;
    transition:opacity .45s var(--ease), visibility .45s,
               max-inline-size .45s var(--ease), margin-inline-end .45s var(--ease);
  }
  .topbar:not(.solid) .brandmark{
    max-inline-size:0;
    margin-inline-end:-26px;   /* מבטל את ה-gap כשהסמל מכווץ */
  }

  /* מי שביקש לצמצם תנועה מקבל את המצב הסופי בלי הזזה */
  html.a11y-stop .brandmark,
  html.a11y-stop .topbar:not(.solid) .brandmark{transition:none}
}
@media(prefers-reduced-motion:reduce){
  .brandmark{transition:opacity .45s var(--ease), visibility .45s}
}
/* === /lumi:navright === */


/* === lumi:plain === */
/* יעל 24/8 21:23: הטקסט בעמודים הפנימיים צמוד לימין וללא קישוט.
   מבטל את שני המאפיינים של סבב הריתמוס - העוגן האופקי המתחלף
   וסמני הקאנג'י/האנסו - ומשאיר את המבנה, המידה והמרווח.
   הבלוק מגיע אחרון בקובץ ולכן גובר על lumi:rhythm ו-lumi:enso
   בלי לערוך אותם, כדי שאפשר יהיה לחזור אחורה בהסרת הבלוק הזה בלבד. */

/* עוגן קבוע בקצה הפתיחה. לוגי ולא left/right - בעברית זה ימין. */
.rhythm>.rhy,
.rhythm>.rhy:nth-child(3n+1),
.rhythm>.rhy:nth-child(3n+2),
.rhythm>.rhy:nth-child(3n+3){
  margin-inline:0 auto;
}

/* הקישוט יורד. שניהם aria-hidden ב-HTML ולכן ההסתרה כאן לא נוגעת
   בשום תוכן שקורא מסך מקריא, וההיררכיה הסמנטית לא משתנה. */
.rhy-k,
.rhy-e{display:none}

/* .rhy-top היה flex עם מרווח בין הקאנג'י לכיתוב שלצידו. בלי הקאנג'י
   הכיתוב נשאר לבד, ולכן המרווח מתאפס והשורה חוזרת להיות בלוק רגיל. */
.rhy-top{display:block;gap:0}

/* המרווח בין הבלוקים נקבע כדי לתת לקאנג'י מקום לנשום. בלי הקאנג'י
   ובלי הזיגזג הוא נקרא כדף ריק, ולכן מצטמצם בכשליש. */
.rhythm{--rhy-gap:clamp(58px,7.5vh,96px)}

@media (max-width:860px){
  .rhythm{--rhy-gap:clamp(48px,6vh,72px)}
}
/* === /lumi:plain === */


/* === lumi:r12 === */
/* יעל 24/8 21:53 - שלושת העמודים הפנימיים עברו לפריסת .solo:
   טקסט בימין, תמונה יחידה בשמאל, בלי עיטורים. */

/* התמונה קטנה יותר. עמודת התמונה של .solo נקבעה עבור ציור רוחבי;
   בעמודים שבהם התמונה היא פורטרט גבוה, הגבלת רוחב בלבד הופכת אותה
   לעמוד שלם, ולכן ההגבלה כאן היא על הגובה. */
.solo{grid-template-columns:1fr minmax(220px,320px)}
.soloart img{max-height:clamp(300px,44vh,430px);width:auto;margin-inline:auto}
.soloart--photo img{mix-blend-mode:normal;filter:none}

/* צילום הוא לא ציור דיו - הוא צריך קצה. */
.soloart--photo img{border:1px solid var(--line)}

.solo-cta{margin-block-start:clamp(26px,3.4vh,40px)}

/* רשימת מבנה הסדנה: הרמה הראשונה נושאת שם מודגש, והרמה השנייה היא
   קהלי היעד. המשפט הסוגר יורד לשורה נפרדת כדי לא להיצמד לפריט האחרון. */
.ws-modes>li{margin-block-end:1.1em}
.ws-modes>li>ul{list-style:none;margin-block:.7em 0;padding-inline-start:20px}
.ws-modes>li>ul>li{position:relative;padding-inline-start:16px;margin-block-end:8px;max-width:66ch}
.ws-modes>li>ul>li::before{
  content:'';position:absolute;inset-inline-start:0;top:.85em;
  width:5px;height:1px;background:var(--ink-faint);border-radius:0;opacity:1;
}
.ws-modes .mode-note{display:block;margin-block-start:.8em}

@media (max-width:860px){
  .solo{grid-template-columns:1fr}
  .soloart{order:2}
  .soloart img{max-height:clamp(240px,38vh,340px)}
}
/* === /lumi:r12 === */


/* === lumi:r13 === */
/* יעל 24/8 22:13: שורות הפתיחה בעמודים הפנימיים צמודות יותר.
   המרווח בין פסקאות היה 23.4px - כמעט שורה שלמה - ומפרק שתי שורות
   שאמורות להיקרא כרצף אחד. הצמצום הוא על המרווח בלבד: גובה השורה
   בתוך הפסקה לא נגע, כדי שהטקסט עצמו לא ייצפף. */
.solo-txt p{margin-block-end:.62em}
.solo-txt p+p{margin-block-start:0}
/* הרשימה והכפתור נשארים מופרדים - הצמצום נועד לפסקאות רצות בלבד. */
.solo-txt p+ul,
.solo-txt p+.ul{margin-block-start:1.5em}
/* === /lumi:r13 === */


/* === lumi:r14 === */
/* יעל 24/8 22:16: "הכתב לא קריא, יש יותר שחור?"
   הצבע כבר שחור מלא (000) מבלוק lumi:ink - מדדתי. מה שמחוויר את
   הטקסט הוא המשקל: Assistant במשקל 300 הוא קו דק שנבלע בסיבי
   הוואשי ובשכבת העצים. העלאה ל-400 מעבה את הקו בלי להגדיל את
   הגופן ובלי לשנות אף מילה. */
body:has(.page-head) .prose p,
body:has(.page-head) .prose li,
body:has(.page-head) .solo-txt p,
body:has(.page-head) .solo-txt li,
body:has(.page-head) .rhythm .rhy p,
body:has(.page-head) .rhythm .rhy li{
  font-weight:400;
}
/* הכותרות המשניות והשמות המודגשים ברשימת מבנה הסדנה - עוד דרגה. */
body:has(.page-head) .ws-modes strong{font-weight:600}
/* === /lumi:r14 === */

/* === lumi:terms === */
/* accessibility.html הפך ל-terms.html (תקנון). הצהרת הנגישות ורישיונות הגופנים
   הם עכשיו שני סעיפי h2, ותת-הפרקים של ההצהרה ירדו ל-h3. */
.a11y-doc h2{
  padding-block-end:9px;
  border-block-end:1px solid var(--line);
  margin-block-start:52px;
}
.a11y-doc h2:first-of-type{margin-block-start:8px}
.a11y-doc h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(17.5px,1.8vw,19.5px);
  letter-spacing:.01em;
  margin:26px 0 8px;
}
.a11y-doc h2 + p{margin-block-start:14px}
.a11y-doc a{color:var(--vermilion)}
/* === /lumi:terms === */

/* === lumi:fwa === */
/* אייקון וואטסאפ ליד מספר הטלפון בפוטר. הריפוד מגדיל את יעד המגע ל-40px,
   והמרג'ין השלילי מבטל את הגידול בגובה השורה כדי שהרשימה תישאר צפופה. */
.f-contact .f-wa{
  display:inline-flex;align-items:center;justify-content:center;
  inline-size:40px;block-size:40px;padding:10px;
  margin-block:-10px;margin-inline-start:-6px;
  color:var(--fsoft);opacity:.85;
  transition:color .3s var(--ease),opacity .3s var(--ease);
}
.f-contact .f-wa svg{inline-size:20px;block-size:20px;display:block}
.f-contact .f-wa:hover,.f-contact .f-wa:focus-visible{color:var(--vermilion);opacity:1}
/* === /lumi:fwa === */

/* === lumi:names === */
/* יעל ביקשה להחזיר את שם המקום מתחת לכל עיגול ב"עם מי עבדתי".
   מבטל את .logo-t{display:none} של lumi:round10. */
.logo-t{display:block}
.logos{align-items:flex-start}
.logo-i{padding-block-end:4px}
.logo-t{
  margin-block-start:12px;
  font-size:12.5px;line-height:1.55;letter-spacing:.01em;
  color:var(--ink-soft);max-inline-size:15ch;margin-inline:auto;
  text-wrap:balance;
}
@media (max-width:860px){
  .logo-t{font-size:11.5px;line-height:1.5;margin-block-start:9px}
}
/* === /lumi:names === */

/* === lumi:ringclip === */
/* טבעת ההובר של הלוגואים נחתכה בקשת של 33 מעלות בראש העיגול.
   הסיבה: ל-.ltick יש overflow:hidden (וגם mask-image, שממילא חותך לקופסת הגבול),
   ובזמן הובר .logo-c מורם ב-translateY(-3px) - כלומר יוצא 3px מעל הקופסה ונחתך.
   חתך אופקי בעומק 3px בעיגול ברדיוס 52 נותן בדיוק כ-33 מעלות, וזה מה שנמדד.
   overflow-clip-margin לא היה עוזר כאן, כי המסכה חותכת לפי border-box בכל מקרה.
   לכן: ריפוד אנכי אמיתי בתוך הקופסה, ופיצוי במרג'ין כדי לא להזיז את הפריסה. */
.ltick{padding-block:8px;margin-block-start:calc(clamp(30px,4vw,48px) - 8px);margin-block-end:-8px}
.lgband .ltick{margin-block-start:calc(clamp(22px,3vw,34px) - 8px)}
/* === /lumi:ringclip === */

/* === lumi:fmark === */
/* הלוגו בעיגול הלבן בפוטר נראה חתוך בצדדים. הסיבה אינה ב-CSS:
   img/logo-mark.png הוא חיתוך צמוד של הלוגו - שוליים של 5px משמאל
   ו-2px מימין, כלומר קצה המכחול היבש בימין נחתך בגבול הקובץ עצמו.
   נבנה img/logo-mark-full.png מ-logo.png עם 6% שוליים סביב הדיו,
   ולכן הקצוות שלמים. העיגול גדל מעט כדי שהלוגו יישאר באותו גודל
   ויקבל מרווח נשימה בצדדים. הכותרת בסרגל העליון לא נגעה. */
.f-mark{width:104px;height:104px;padding:8px}
/* === /lumi:fmark === */

/* === lumi:innerfs === */
/* הגדלה של פיקסל אחד בטקסט הגוף בעמודים הפנימיים בלבד (body.inner).
   dfont הפוטר ואזור יצירת הקשר לא נגעו. */
body.inner main .rhy p,
body.inner main .prose p,
body.inner main .prose li,
body.inner main .solo-txt p,
body.inner main .solo-txt li,
body.inner main .a11y-doc p,
body.inner main .a11y-doc li{font-size:19px;line-height:1.86}
body.inner main .rhy p{font-size:17.5px;line-height:2.06}
@media (max-width:860px){
  body.inner main .rhy p,
  body.inner main .prose p,
  body.inner main .prose li,
  body.inner main .solo-txt p,
  body.inner main .solo-txt li,
  body.inner main .a11y-doc p,
  body.inner main .a11y-doc li{font-size:18px}
  body.inner main .rhy p{font-size:17px}
}
/* === /lumi:innerfs === */

/* === lumi:hero3 === */
/* 1. פסקת ההירו: פיקסל אחד למעלה ושחור מוחלט */
.hero-note{font-size:clamp(14px,1.3vw,16px);color:#000}
@media (max-width:860px){ .hero-note{font-size:14px} }

/* 2. הקו האנכי בהירו ממורכז בין השם לכותרת.
   .hero-focus הוא flex:1 עם justify-content:center, ולכן כל המרווח הפנוי
   נערם מעל הקו ורק 26px נשארו מתחתיו. מרג'ין auto בפלקס בולע את המרווח
   הפנוי לפני ש-justify-content מקבל אותו, ומחלק אותו שווה בשווה בין כל
   המרג'ינים ה-auto. שלושה כאלה: מעל הקו, מתחת לקו, ומתחת לפסקה - כך
   הקו ממורכז בדיוק וגם נשמר אוויר לפני שורת הקאנג'י והכפתורים.
   נמדד בשישה רחבים: A=B בכל אחד מהם. */
body.home .hero-rule{margin-block-start:auto;margin-block-end:auto}
body.home .hero-focus .hero-note{margin-block-end:auto}
/* === /lumi:hero3 === */

/* === lumi:herosub === */
/* שורת סדנאות / הרצאות / ליווי רגשי: שחור מוחלט,
   והנקודות המפרידות בששר מלא בלי הנמכת אטימות. */
.hero-sub{color:#000}
.hero-sub b::after{background:var(--vermilion);opacity:1}
/* === /lumi:herosub === */

/* === lumi:heroup === */
/* הרמת הלוגו והשם בהירו. המרווח מהסרגל העליון היה 76px בדסקטופ
   ו-34px בנייד; ירד בכ-45%. .hero-focus הוא flex:1 ולכן המרווח
   שהתפנה מתחלק אוטומטית בין הקו לכותרת ולפסקה, והקו נשאר ממורכז. */
body.home .hero-id{margin-top:clamp(18px,4.2vh,50px)}
@media (max-width:860px){ body.home .hero-id{margin-top:clamp(10px,2.2vh,24px)} }
/* === /lumi:heroup === */

/* === lumi:strong === */
/* הקאנג'י 禅画 בהירו - שחור מוחלט במקום דיו דהוי */
.kanji-sm{color:#000;font-weight:400}

/* יעל: הכפתורים חוזרים למצב העדין - מסגרת 1px ומשקל אות רגיל, כמו
   שהיו. מה שנשאר מהחיזוק הוא הטקסט בלבד: שחור מלא במקום ששר דהוי
   ואפור. המסגרת ממשיכה להיות ששר, ובמעבר עכבר הכפתור מתמלא. */
.lnk{color:#000}
.lnk::after{color:var(--vermilion)}
.lnk:hover{background:var(--vermilion);color:#fff;border-color:var(--vermilion)}
.lnk:hover::after{color:#fff}
.lnk.quiet{border-color:var(--line);color:#000}
.lnk.quiet::after{color:var(--ink-soft)}
.lnk.quiet:hover{background:transparent;color:#000;border-color:var(--ink)}

.hd-cta{color:#000}
.hd-cta:hover{background:var(--vermilion);color:#fff;border-color:var(--vermilion)}

/* כפתורי הוואטסאפ בעמודים הפנימיים יושבים בתוך .prose, ושם כלל
   כללי לקישורים צבע אותם בששר וגבר על .lnk. אותו טקסט שחור. */
.prose .lnk,.solo-txt .lnk,.rhy .lnk{color:#000}
.prose .lnk:hover,.solo-txt .lnk:hover,.rhy .lnk:hover{color:#fff}
/* === /lumi:strong === */

/* === lumi:heroup2 === */
/* הרמת גוש ההירו ב-50px: מהלוגו העליון ועד הקאנג'י 禅画, בלי הכפתורים.
   ההזזה נעשית ב-position:relative/top ולא במרג'ין, כי מרג'ין היה משנה
   את הפריסה - .hero-focus הוא flex:1 ו-.hero-foot נעוץ לתחתית, ולכן כל
   שינוי גובה היה מזיז גם את הכפתורים. top לא נוגע בפריסה בכלל. */
body.home .hero-id{position:relative;top:-50px}
body.home .hero-focus{top:-50px}
body.home .hero-foot .kanji-sm{position:relative;top:-50px}
/* ההילה מאחורי הכותרת נעה יחד עם התוכן, אחרת היא נשארת מאחור */
body.home .hero-inner::before{margin-top:-50px}
/* === /lumi:heroup2 === */

/* === lumi:labels === */
/* יעל: הכותרות הקטנות מעל הכותרת הראשית - "אודות", "מה אני מציעה",
   "עדויות" - גדלות ב-2px. כולן היו 12.5px בדסקטופ. */
.eyebrow,
.page-head .kick,
.tsec .kick{font-size:14.5px}
@media(max-width:860px){
  .eyebrow{font-size:15px}
  .tsec .kick{font-size:13.5px}
  .page-head .kick{font-size:14.5px}
}

/* קישור חזרה לדף הבית בעמודים הפנימיים. לינק טקסטואלי ולא כפתור:
   בלי מסגרת ובלי מילוי, קו תחתון מופיע רק במעבר עכבר. החץ מצביע
   ימינה כי בעברית זה כיוון החזרה. */
.backlink{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--serif);font-size:15px;letter-spacing:.02em;
  color:var(--ink-soft);text-decoration:none;
  border-block-end:1px solid transparent;
  padding-block:10px;margin-block:-10px 20px;
}
.backlink-a{font-size:1.15em;line-height:1;transition:transform .3s var(--ease)}
.backlink:hover,.backlink:focus-visible{color:var(--vermilion);border-block-end-color:var(--vermilion)}
.backlink:hover .backlink-a{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){.backlink-a{transition:none}.backlink:hover .backlink-a{transform:none}}
@media(max-width:860px){.backlink{font-size:14.5px;margin-block-end:16px}}
/* === /lumi:labels === */

/* === lumi:book === */
/* יעל: מקטע הספר ב"מי אני" ממורכז באמצע העמוד, ולא צמוד לימין כמו
   שאר בלוקי הריתמוס. הכיתוב מימין והכריכה משמאל, כשהכריכה ממורכזת
   אנכית מול הפסקה. row-reverse ולא שינוי סדר ב-HTML, כדי שקורא מסך
   ימשיך לקרוא כריכה ואז טקסט. */
.about-prose.rhythm>.rhy--book{margin-inline:auto}
.rhy--book .bk{flex-direction:row-reverse;align-items:center;justify-content:center}
.rhy--book .bk>div{flex:1 1 auto;min-width:0}
@media (max-width:860px){
  .rhy--book .bk{flex-direction:column;align-items:center}
  .rhy--book .bk>div{width:100%}
}

/* יעל: הטקסט של הספר ממורכז - הכותרת האנגלית, הפסקה והקישור. */
.rhy--book .bk>div p{text-align:center}

/* הכותרת "הספר" עברה לתוך עמודת הטקסט, כדי שתתמרכז מול הפסקאות
   ולא מול הבלוק כולו (שכולל גם את הכריכה). */
.rhy--book .bk>div .sub{text-align:center;margin-block-start:0}
/* שם הספר, באנגלית ובעברית, בהטיה */
.bk-t{font-style:italic}
/* השם באנגלית מודגש. משקל 700 של Frank Ruhl Libre נטען בעמוד,
   ולכן זו אות אמיתית ולא הדגשה מסונתזת. */
.rhy--book .en .bk-t{font-weight:700}
/* === /lumi:book === */

/* === lumi:intro === */
/* 1. כתב היד בכותרת של עמוד "מי אני" גדל בפיקסל אחד, בדסקטופ בלבד.
   calc על ה-clamp ולא הגדלת התקרה, כי ב-1440 הכותרת יושבת על 4.3vw
   ולא על התקרה - הרמת התקרה לא הייתה משנה שם כלום. */
@media (min-width:861px){
  body:not(.home) .page-head.ph-split h1{font-size:calc(clamp(34px,4.3vw,64px) + 1px)}
}

/* 2. מקטע "מי אני" בדף הבית - דיו שחור מלא, כמו בעמודים הפנימיים.
   הטוקנים מוגדרים מחדש על המקטע, ובנוסף color מפורש - כי color יורש
   כערך מחושב, ולכן כותרת שאין לה צבע משלה לא הייתה מושפעת. */
body.home #intro{
  --ink:#000;
  --ink-soft:#000;
  --ink-faint:#000;
  color:var(--ink);
}
/* === /lumi:intro === */


/* === lumi:btnbold === */
/* יעל: הדגשת הטקסט שבתוך הכפתורים בלבד - המסגרת נשארת עדינה 1px.
   הכפתורים היו במשקל 300 (דק) ולכן הטקסט נראה חלש מול המסגרת.
   Assistant טעון ב-600, ולכן זה משקל אמיתי ולא הדגשה סינתטית.
   כפתור השליחה בסריף עולה ל-500 (משקל טעון) - הוא ממילא מלא בששר
   ולבן, ו-700 עם ריווח אותיות 0.2em היה כבד מדי. */
.lnk,.hd-cta{font-weight:600}
.prose .lnk,.solo-txt .lnk,.rhy .lnk{font-weight:600}
.btn{font-weight:500}
/* === /lumi:btnbold === */


/* === lumi:quietline === */
/* יעל: הקו של "מי אני" נראה דק מזה שלידו. בפועל שניהם 1px - ההבדל
   היה בצבע: הכפתור השקט קיבל קו דיו ב-14% שקיפות, כמעט שקוף, ולכן
   נקרא כדק יותר. חיזוק ל-55% נותן קו באותו משקל ויזואלי של הששר,
   בלי לשנות עובי ובלי לבטל את ההיררכיה - הששר נשאר הפעולה הראשית. */
.lnk.quiet{border-color:color-mix(in srgb,var(--ink) 55%,transparent)}
.lnk.quiet:hover{border-color:var(--ink)}
/* === /lumi:quietline === */


/* === lumi:namethin === */
/* יעל: דיקוק השם בהירו. פרנק רול ליברה טעון גם ב-300, ולכן זה משקל
   אמיתי של הגופן ולא הדקה סינתטית. השם ממילא תפקידו זהות שקטה מתחת
   ללוגו - משקל 300 עם ריווח האותיות הקיים נותן קו דק ואוורירי. */
.hero-name{font-weight:300}
/* === /lumi:namethin === */


/* === lumi:tsize === */
/* יעל: להגדיל את הפונט של התגובות בכרטיסי "מה אומרים עליי".
   היה clamp(13.5,1.15vw,14.5) - קטן מדי בקריאה. עולה לטווח
   15.5-16.5 בדסקטופ ו-15 מינימום, עם ריווח שורות מעט גדול יותר
   כדי שהגוש לא יידחס. שם הממליצה עולה יחד איתו כדי לשמור פרופורציה.
   הכרטיס מקבל רוחב מעט גדול יותר כדי שהטקסט לא יתארך לגובה. */
.tcard{width:min(320px,78vw)}
.tcard p{font-size:clamp(15px,1.35vw,16.5px);line-height:1.78}
.tcard .who{font-size:12.5px}
@media (max-width:860px){
  .tcard{width:min(300px,80vw)}
  .tcard p{font-size:15.5px}
}
/* === /lumi:tsize === */


/* === lumi:quotebox === */
/* יעל: לעגל מעט את הפינות של תיבת הציטוט בדף הבית, ולצבוע את
   שורת הייחוס בשחור. הייחוס היה --ink-faint (#645f54) ונבלע
   בנייר; שחור מלא נותן לו מעמד של חתימה. העיגול עדין בכוונה -
   14px על תיבה של 1000px נקרא כריכוך ולא כ"כרטיס מעוגל". */
.quote-band blockquote{border-radius:14px}
.quote-band cite{color:#000}
@media (max-width:640px){
  .quote-band blockquote{border-radius:10px}
}
/* === /lumi:quotebox === */


/* === lumi:fbar === */
/* יעל: הסרת "Zenga · ציורי זן ומדיטציה" מהפוטר, ו-Zenga עובר לשורת
   הזכויות. אחרי ההסרה נשאר ילד יחיד ב-.f-bar, ו-space-between היה
   מצמיד אותו לימין בלבד. מרכוז בכל הרחבים מחזיר את השורה לאיזון. */
.f-bar{justify-content:center;text-align:center}
/* === /lumi:fbar === */


/* === lumi:hwthin === */
/* יעל: הכותרת בכתב יד בעמודים הפנימיים צריכה להיות דקה עוד יותר.
   ל-Ktav Yad CLM יש שני קבצים בלבד - Medium ו-Bold - ולכן אין
   משקל דק יותר להחליף אליו: 400 ו-500 מצביעים על אותו קובץ.
   הפתרון: קו מתאר דק בצבע הנייר, שמרוכז על קו הגליף ולכן מכרסם
   0.3px מהדיו מכל צד. התוצאה משיכה דקה יותר ב-25% בערך.
   נבחר על פני feMorphology כי הפילטר עובד בפיקסלים שלמים של המסך,
   ולכן במסך רגיל הוא היה מוחק פיקסל מלא (כ-60% מהדיו) ובמסך רטינה
   חצי מזה - כלומר תוצאה שונה לגמרי בין מסכים. הקו רציף וזהה בשניהם. */
.page-head h1{
  -webkit-text-stroke:.6px var(--paper);
}
/* === /lumi:hwthin === */


/* === lumi:rulevc === */
/* הקו האנכי בהירו: margin:auto מרכז אותו במרווח הפנוי, אבל העין
   מודדת מהדיו - וה-h1 מתחתיו נושא חצי-leading גדול מעל האותיות,
   ולכן הקו נראה נדבק לשם ומרוחק מהכותרת. ההזזה למטה מאזנת את
   שני המרווחים מדיו לדיו; היא ויזואלית בלבד ולא נוגעת בפריסה. */
.hero .hero-rule{
  transform:translateY(min(calc(.8px + .524vw), 8.4px));
}
/* === /lumi:rulevc === */


/* === lumi:selfhost === */
/* הפונטים עברו לאירוח עצמי. קודם הדפדפן היה צריך לפנות לשני דומיינים
   חיצוניים - googleapis לקובץ ה-CSS, ואז gstatic לקבצי הפונט עצמם -
   שרשרת שגורמת לטקסט להופיע בפונט מערכת ורק אז להתחלף.
   עכשיו הקבצים מקומיים ומצומצמים, ומפוצלים לעברית/לטינית לפי
   unicode-range: העברית - שהיא כמעט כל הטקסט בעמוד - שוקלת 18KB
   ו-6KB ונטענת מראש ב-preload, והלטינית נמשכת ברקע רק לפי הצורך. */
@font-face{
  font-family:'Frank Ruhl Libre';
  src:url('../fonts/frl-heb.woff2') format('woff2');
  font-weight:300 900;font-style:normal;font-display:swap;
  unicode-range:U+0590-05FF,U+200C-200E,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face{
  font-family:'Frank Ruhl Libre';
  src:url('../fonts/frl-lat.woff2') format('woff2');
  font-weight:300 900;font-style:normal;font-display:swap;
  unicode-range:U+0020-007E,U+00A0,U+00A9,U+00AB,U+00BB,U+00B7,U+00D7,U+2013,U+2014,U+2018,U+2019,U+201C,U+201D,U+2022,U+2026,U+2190,U+2192,U+2122,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Assistant';
  src:url('../fonts/asst-heb.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0590-05FF,U+200C-200E,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face{
  font-family:'Assistant';
  src:url('../fonts/asst-lat.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0020-007E,U+00A0,U+00A9,U+00AB,U+00BB,U+00B7,U+00D7,U+2013,U+2014,U+2018,U+2019,U+201C,U+201D,U+2022,U+2026,U+2190,U+2192,U+2122,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Gveret Levin';
  src:url('../fonts/gveret-heb.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Noto Serif JP';
  src:url('../fonts/jp.woff2') format('woff2');
  font-weight:200 900;font-style:normal;font-display:swap;
}
/* === /lumi:selfhost === */

/* === lumi:fbmetrics === */
/* גיבוי תואם-מטריקות: עד שהפונט האמיתי מגיע, הדפדפן מצייר פונט מערכת.
   כאן הוא מקבל את אותו רוחב, גובה-אות ובסיס-שורה כמו הפונט האמיתי,
   כך שההחלפה לא מזיזה שורות ולא משנה את גודל הטקסט - רק את צורת
   האות. המספרים נמדדו בדפדפן מול טקסט עברי אמיתי. */
@font-face{
  font-family:'FRL fallback';
  src:local('Georgia'),local('Times New Roman');
  size-adjust:104.42%;
  ascent-override:91.9%;
  descent-override:31.6%;
  line-gap-override:0%;
}
@font-face{
  font-family:'Assistant fallback';
  src:local('Arial'),local('Segoe UI'),local('Helvetica');
  size-adjust:95.29%;
  ascent-override:107.0%;
  descent-override:30.4%;
  line-gap-override:0%;
}
@font-face{
  font-family:'Ktav Yad fallback';
  src:local('Georgia'),local('Times New Roman');
  size-adjust:141.33%;
  ascent-override:75.0%;
  descent-override:43.2%;
  line-gap-override:0%;
}
:root{
  --serif:'Frank Ruhl Libre','FRL fallback',Georgia,serif;
  --sans:'Assistant','Assistant fallback','Segoe UI',system-ui,sans-serif;
  --display:'Gveret Levin','Frank Ruhl Libre','FRL fallback',cursive;
}
.page-head h1{
  font-family:'Ktav Yad CLM','Ktav Yad fallback','Gveret Levin',var(--serif),cursive;
}
/* === /lumi:fbmetrics === */

/* === lumi:hwspace === */
/* לפונט כתב היד יש רווח-מילה רחב מהרגיל, ובגודל כותרת הוא נמתח
   ומפרק את השם לשלושה איים. צמצום קל מחזיר אותו לשורה אחת קריאה.
   סבב שני (25.8): 0.12em- עדיין השאיר את שלוש המילים רחוקות זו מזו
   בהשוואה מול שאר הפונטים. 0.26em- מהדק אותן ליחידה אחת בלי שהזנבות
   הארוכים של הגליפים ייגעו זה בזה. */
body:not(.home) .page-head h1{
  font-family:'Ktav Yad CLM','Ktav Yad fallback','Gveret Levin',var(--serif),cursive;
  word-spacing:-.26em;
}
/* === /lumi:hwspace === */

/* === lumi:innerinset === */
/* יעל: בעמודים הפנימיים הטקסט מתחיל צמוד מדי לשוליים הימניים.
   העמודה נכנסת פנימה משני הצדדים כדי לשמור על המרכוז ועל האיזון
   מול תמונות ומפרידים שיושבים באותו .wrap. הערך נזיל ולכן ההזחה
   גדלה עם המסך ונעלמת מעצמה כשאין מקום. */
@media (min-width:861px){
  body.inner .wrap{padding-inline:clamp(32px,5.6vw,84px)}
}
/* יעל, סבב שני: אותו טיפול גם במובייל. במקום 22/18px הצמודים,
   ההזחה נזילה ומתרחבת עם רוחב המסך ונעצרת ב-40px בטאבלט צר.
   ב-390px זה יוצא כ-33px לכל צד - הטקסט נושם מהקצה בלי לגזול
   יותר מדי מרוחב השורה. */
@media (max-width:860px){
  body.inner .wrap{padding-inline:clamp(24px,8.5vw,40px)}
}
/* === /lumi:innerinset === */

/* === lumi:h1optical === */
/* יעל: הכותרת הגדולה יושבת מתמטית על אותו קו כמו הטקסט, אבל בגלל
   הגודל ובגלל כתב היד היא נקראת כאילו היא בולטת החוצה. ההזחה כאן
   היא תיקון אופטי בלבד - בערך שליש מגובה האות, ולכן היא גדלה
   ומתכווצת יחד עם הכותרת בכל רוחב מסך. */
body.inner .page-head h1{padding-inline-start:.3em}
/* === /lumi:h1optical === */

/* === lumi:nowrapterm === */
/* המונח LI-CBT נשבר לשתי שורות במסכים צרים כי הדפדפן מתייחס
   למקף שבתוכו כנקודת שבירה חוקית. ה-nowrap מחזיק אותו כיחידה אחת. */
.nw{white-space:nowrap}
/* === /lumi:nowrapterm === */

/* === lumi:navink === */
/* יעל: הפונט בתפריט העליון בשחור מלא. הקישור הפעיל וה-hover נשארים
   שחורים גם הם - הסימון היחיד שמבדיל אותם הוא הקו התחתון בשַׁשַׁר,
   כמו שכבר נעשה ל-hd-cta בסבב קודם. */
.navlinks a{color:#000}
.navlinks a:hover,
.navlinks a[aria-current="page"]{color:#000}
/* === /lumi:navink === */

/* === lumi:fcredit === */
/* שורת הפוטר חוזרת לשני קצוות: הזכויות והתקנון בימין, הקרדיט בשמאל.
   המרכוז של lumi:fbar נכון היה רק כשנשאר בשורה ילד יחיד. */
.f-bar{justify-content:space-between;text-align:start;align-items:baseline}
.f-credit{display:inline-flex;align-items:center;gap:.34em;white-space:nowrap}
.f-credit a{text-decoration:underline;text-underline-offset:3px}
.f-credit a:hover{color:var(--vermilion)}
/* התו ❤ ללא variation-selector נשאר טקסט חד-צבעי ויורש את לובן הפוטר,
   במקום להיפול לפונט האמוג'י הצבעוני של המערכת. */
.f-heart{
  font-family:'Segoe UI Symbol','Apple Symbols',serif;
  color:#fff;font-size:1.05em;line-height:1;
}
@media (max-width:640px){
  .f-bar{justify-content:center;text-align:center}
  .f-credit{white-space:normal}
}
/* === /lumi:fcredit === */

/* === lumi:artfade === */
/* הפייד סביב הציור של סנגאי היה באחוזים (9% לרוחב, 8% לגובה) - וזה מחק
   תוכן: הדיו האמיתי בסריקה מתחיל ב-0.55% מהשמאל (הכיתוב והחותם האדום)
   ונגמר ב-97.8% (קצה העיגול). לכן הכיתוב נמחק משמאל והעיגול מימין.
   הפתרון: פייד בפיקסלים קבועים (10px = כ-2.3% ברוחב תצוגה של 440px)
   במקום באחוזים, ובמקום להסתיר את שולי הנייר של הסריקה - למזג אותם
   עם הוואשי דרך mix-blend-mode:multiply, בדיוק כמו בעמוד ליווי רגשי.
   נמדד: הפרש הצבע בין הנייר של הסריקה לנייר של העמוד ירד ל-4.8/255
   (כמעט בלתי נראה), ונפח הדיו בפס השמאלי עלה פי 3.4. */
.zg-fig img{
  mix-blend-mode:multiply;
  filter:saturate(.45) brightness(1.22);
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 8px,#000 calc(100% - 8px),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 8px,#000 calc(100% - 8px),transparent 100%);
  mask-composite:intersect;
}

/* שורת הקרדיט של הציור - ממורכזת מתחת לתמונה, לא צמודה לימין. */
.zg-fig figcaption{text-align:center}

/* בנייד השורה ארוכה מרוחב המסך, אז מותר לה להישבר - ואז המרכוז
   מחזיק את שתי השורות על אותו ציר. */
@media (max-width:560px){
  .zg-fig figcaption{text-wrap:balance;white-space:normal}
}
/* === /lumi:artfade === */


/* === lumi:batch9 === */
/* יעל, 26.8 - באטש התיקונים: פוטר בשלוש שורות, פרק זן-גה מורחב,
   ופייד לציור בעמוד ליווי רגשי. */

/* שורת השירותים בפוטר, בין השם לתיאור. אותו ריתמוס כמו ההירו:
   שלוש מילים מופרדות בנקודה, קטנות ומרווחות. */
.f-serv{
  font-size:14px;letter-spacing:.14em;color:var(--fsoft);
  margin:0 0 10px;opacity:.9;
}

/* הקרדיט מתחת לציור בעמוד הבית התארך (נוסף שם המוזיאון), ולכן
   אסור לו יותר nowrap - הוא היה גולש מחוץ לתמונה. */
.zg-fig figcaption{white-space:normal;text-wrap:balance}

/* כותרת הפרק נושאת עכשיו גם את הקאנג'י. הוא נשאר קטן ודהוי כדי
   שלא יתחרה בכותרת העברית. */
.kanji-inl{
  font-size:.62em;color:var(--ink-faint);
  margin-inline-start:.28em;vertical-align:.06em;
}

/* החלק השני של הפרק ("מהם ציורי הזן") ממשיך את עמודת הטקסט ולא
   נמתח על כל רוחב העמוד - שורה של 1100px אינה קריאה. הוא נצמד
   לקצה הימני, כלומר ממשיך בדיוק את הציר של הטקסט שמעליו. */
.zg-more{
  max-width:74ch;margin-inline-end:auto;
  margin-block-start:clamp(34px,4vw,56px);
}
.zg-more p{max-width:none;color:var(--ink)}
.zg-more .sub{margin-block-end:.5em}
@media (max-width:860px){
  .zg-more{max-width:none}
}

/* יעל ביקשה שהציור בעמוד ליווי רגשי ייראה כמו זה שבעמוד הבית -
   בלי מסגרת הסריקה. אותו פייד בפיקסלים קבועים; --photo מוחרג
   כי שם מדובר בתצלום אמיתי שצריך קצה חד. */
.soloart:not(.soloart--photo) img{
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 8px,#000 calc(100% - 8px),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent 0,#000 10px,#000 calc(100% - 10px),transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 8px,#000 calc(100% - 8px),transparent 100%);
  mask-composite:intersect;
}
/* והקרדיט ממורכז מתחת לציור, לא צמוד לימין. */
/* אותו טיפול צבע כמו הציור בעמוד הבית: הרמת בהירות והורדת רוויה
   מעלות את נייר הסריקה (201,192,177) עד לגובה הוואשי, וכך המלבן
   האפרפר סביב האנסו נעלם והדיו נראה כאילו צויר על הדף. */
.soloart:not(.soloart--photo) img{filter:brightness(1.22)}
/* שם הציור בשורה אחת, שם המוזיאון בשורה שנייה - אחרת השורה נשברת
   באמצע הגרשיים ונראית מבולגנת בגלל כיווניות מעורבת. */
.soloart:not(.soloart--photo) figcaption{text-align:center;text-wrap:balance}
/* בלוק הספר: יעל ביקשה שייראה כמו הצילום ששלחה - שם אנגלי שנשבר
   אחרי הנקודתיים, ומתחתיו שם עברי צמוד. ברוחב של 640px השורה
   השנייה נשברה לשלוש; הרחבת הבלוק ל-880px נותנת לה 688px של
   עמודת טקסט, מספיק לשורה אחת. רק בדסקטופ - בנייד ממילא טור אחד. */
@media (min-width:861px){
  .rhythm>.rhy--book{max-width:min(880px,100%)}
}
.rhy--book .en{line-height:1.3;margin-block-end:10px}
.rhy--book .bk>div>p+p{margin-block-start:0}
/* יעל: הכותרות בעמודים הפנימיים צריכות להיות דקות כמו זו של
   "ד״ר גלית אבימן". נמדד: הפונט, המשקל וקו-המתאר זהים בכל
   העמודים - ההבדל הוא בגודל בלבד (62.9px מול 74px). קו מתאר
   קבוע של 0.6px מכרסם אחוז גדול יותר מאות קטנה, ולכן הכותרת
   הגדולה נראתה עבה יותר. המרה ל-em מקטינה את המשיכה באותו יחס
   בכל גודל: 0.0095em = 0.6px ב-62.9px ו-0.70px ב-74px. */
.page-head h1{-webkit-text-stroke:.0095em var(--paper)}
/* === /lumi:batch9 === */
/* === lumi:bkspace === */
/* יעל, 26.8 ערב - שלושה תיקונים.

   1. ארבע שורות שם הספר (שתיים באנגלית, שתיים בעברית) הן יחידה
      אחת ולכן צריכות ריווח שורה הדוק. קודם כל הבלוק ישב בפסקה
      אחת עם line-height של 2.06, ולכן השם, ההסבר ושנת ההוצאה
      נראו כארבע פסקאות נפרדות. הפיצול ל-bk-he ו-bk-body מאפשר
      ריווח צפוף לשם ורגיל לטקסט, עם מרווח אמיתי ביניהם. */
/* הסלקטור חייב לכלול body.inner main כי הכלל הכללי
   "body.inner main .rhy p" קובע line-height:2.06 בספציפיות
   גבוהה יותר מסלקטור של שתי מחלקות. */
body.inner main .rhy--book .en{line-height:1.3;margin-block-end:4px}
body.inner main .rhy--book .bk-he{margin-block:0;line-height:1.45}
body.inner main .rhy--book .bk-body{margin-block:1.5em 0;line-height:2.06}

/* 2. הקישור להוצאה: שחור וצמוד לפסקה, ששר רק בהובר. הוא הפניה
      ביבליוגרפית ולא קריאה לפעולה, ולכן אין סיבה שימשוך את העין
      לפני שקוראים את הטקסט. */
body.inner main .rhy--book .bk-link{margin-block-start:.35em}
.rhy--book .bk-link a{
  color:var(--ink);
  border-bottom-color:color-mix(in srgb,var(--ink) 28%,transparent);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.rhy--book .bk-link a:hover,
.rhy--book .bk-link a:focus-visible{
  color:var(--vermilion);border-bottom-color:var(--vermilion);
}

/* 3. "חזרה לדף הבית" ירד מראש העמוד לתחתיתו, בצד שמאל. flex-end
      בכיוון RTL הוא הקצה השמאלי. הקישור נשאר אחרון ב-main, כך
      שגם בניווט מקלדת הוא מגיע בסוף התוכן - סדר הגיוני. */
.backband{padding-block:0 clamp(34px,5vw,64px)}
.backband .wrap{display:flex;justify-content:flex-end}
.backband .backlink{margin-block:0}
/* === /lumi:bkspace === */

/* === lumi:fadeless === */
/* יעל: הפייד סביב ציור סנגאי חזק מדי. הרוחב יורד מ-10/8 פיקסלים
   ל-5/4 - עדיין מרכך את קצה הסריקה, אבל בלי לאכול דיו בקצוות. */
.soloart:not(.soloart--photo) img{
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000 5px,#000 calc(100% - 5px),transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 4px,#000 calc(100% - 4px),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent 0,#000 5px,#000 calc(100% - 5px),transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 4px,#000 calc(100% - 4px),transparent 100%);
  mask-composite:intersect;
}
/* === /lumi:fadeless === */
/* === lumi:ctagap === */
/* יעל 26/8: הכפתורים בעמודים הפנימיים ("להזמנת הרצאה" / "להזמנת סדנה" /
   "לתיאום שיחת היכרות" / "שלחו הודעה") נצמדו לפסקה שמעליהם.
   הסיבה: בבלוק lumi:r13 אופס margin-block-start לכל p+p בתוך .solo-txt
   כדי לצמצם את המרווח בין פסקאות רצות - והכפתור, שגם הוא p, נבלע
   באיפוס. מה שנשאר הפריד ביניהם היה .62em בלבד. הכללים כאן מחזירים
   לכפתור מרווח משלו בכל אחד משני המבנים: .solo-txt בעמודי ההרצאות,
   הסדנאות והליווי, ו-.rhythm .rhy בעמוד "מי אני". */
p.solo-cta,
.solo-txt p+p.solo-cta,
.rhythm .rhy p+p.solo-cta{
  margin-block-start:clamp(32px,4.4vh,48px);
}
/* === /lumi:ctagap === */

/* === lumi:zgtop === */
/* יעל: מקטע "מה זה זן-גה" צמוד מדי לרצועה שמעליו. .band.tight
   מאפסת את הריפוד העליון, ולכן ה-eyebrow יושב ממש על התפר.
   מחזירים ריפוד עליון ל-#zenga בלבד - כשני שלישים מרצועה מלאה,
   מספיק כדי לנשום בלי לפתוח חור בין החלקים. */
#zenga{padding-block-start:clamp(58px,8vh,104px)}
/* === /lumi:zgtop === */

/* === lumi:nosel === */
/* יעל: לחיצה ארוכה בנייד הדגישה את ההמלצה בכחול. במגע, "החזק כדי
   לעצור" מתנגש עם מחוות בחירת הטקסט של מערכת ההפעלה - הדפדפן
   מפרש את אותה אצבע כסימון טקסט ופותח ידיות בחירה ותפריט העתקה.
   מבטלים בחירה במסועים במכשירי מגע בלבד. בדסקטופ, שבו המסוע נעצר
   בריחוף ובחירה היא פעולה מכוונת, הטקסט נשאר בר-העתקה. */
@media (hover:none), (pointer:coarse){
  .tcar,
  .ltick{
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
  }
}
/* === /lumi:nosel === */

/* === lumi:strong-prose === */
/* הדגשה בגוף הטקסט. משקל הבסיס בעמודים הפנימיים הוא 400, ולכן
   ברירת המחדל של הדפדפן (700) קופצת יותר מדי לאסתטיקה של הנייר.
   600 הוא המשקל שכבר משמש להדגשות ב-.ws-modes. */
body:has(.page-head) .solo-txt strong,
body:has(.page-head) .prose strong,
body:has(.page-head) .rhy strong{font-weight:600}
/* === /lumi:strong-prose === */

/* === lumi:samestyle === */
/* יעל, 28.8: "מי אני" ו"מה זה זן-גה" בדף הבית צריכים להיראות זהים.
   הצבע כבר זהה - שני המקטעים מגדירים מחדש --ink ל-#000 (lumi:ink
   ו-lumi:intro), ולכן שניהם כבר בשחור מלא.
   מה שנשאר הוא הגודל: .me-text p היה נעול על 18px ו-1.9, בעוד שזן-גה
   יורש את בסיס ה-body. במסכים צרים מ-720px הבסיס יורד ל-17px, וזן-גה
   ירד איתו בזמן ש"מי אני" נשאר 18px. מבטלים את הנעילה ומצהירים על
   אותו גובה שורה לשלוש הפסקאות, כדי שלא ייווצר פער מחדש. */
body.home #intro .me-text p,
body.home #zenga .zg-text p,
body.home #zenga .zg-more p{
  font-size:inherit;
  line-height:1.85;
}

/* תת-הכותרות בכרטיסי "מה אני מציעה" - דיו שחור מלא. הריחוף נשאר
   ששר: ל-.door:hover h3 סגוליות גבוהה יותר ולכן הוא גובר. */
.door h3{color:#000}
/* === /lumi:samestyle === */

/* === lumi:aboutfs === */
/* יעל, 28.8: הטקסטים בעמוד "מי אני" באותו גודל כמו בסדנאות,
   בהרצאות ובליווי רגשי. הצבע כבר שחור מלא בארבעת העמודים
   מ-lumi:ink, ונמדד ברינדור עצמו - גרעין האות (0,0,0) מול
   נייר (243,238,220), שקיפות אפקטיבית 1.000. כאן משתנה רק הגודל.

   שני פערים היו:
   1. הפסקאות. "מי אני" הוא העמוד הפנימי היחיד שבנוי במבנה
      .rhy ולא ב-.solo-txt.prose, ולכן ב-lumi:innerfs תפס אותו הכלל
      הצר יותר: 17.5px במקום 19px, ובנייד 17px במקום 18px.
   2. שורת התיאור מתחת לשם - 20px, גדולה מגוף הטקסט של שאר העמודים.

   מיושרים את שניהם ל-19px / 18px בנייד, עם גובה שורה 1.86 - בדיוק
   הערכים של .solo-txt.prose p בשלושת העמודים האחרים.
   הסלקטורים נשארים צרים: .rhy קיים רק ב-about, ו-.ph-split קיים
   רק שם, ולכן דף הבית ושאר העמודים לא מושפעים. */
body.inner main .rhy p{font-size:19px;line-height:1.86}
body:not(.home) .page-head.ph-split .ph-txt p.lede{font-size:19px;line-height:1.86}
@media (max-width:860px){
  body.inner main .rhy p{font-size:18px}
  body:not(.home) .page-head.ph-split .ph-txt p.lede{font-size:18px}
}

/* פסקת תיאור הספר בקופסת הספר. ב-lumi:bkspace היא קובעה על 2.06
   במפורש, כדי להיות זהה לפסקאות הרגילות שהיו אז 2.06 - וגם בספציפיות
   גבוהה יותר, שאם לא כן הכלל הכללי היה גובר עליה. עכשיו הפסקאות עברו
   ל-1.86 והיא נשארה מאחור, ולכן היא זזה איתן. הכוונה המקורית נשמרת:
   ריווח זהה לטקסט רץ, וצפוף רק בשם הספר. */
body.inner main .rhy--book .bk-body{line-height:1.86}
/* === /lumi:aboutfs === */
/* lumi:zg-img-center - בקשת יעל, 28.8 ------------------------------
   ה-figure כולל גם את שורת הקרדיט, ולכן align-items:center מרכז את
   הקופסה כולה - והציור עצמו נשאר 29px מעל מרכז הטקסט, בדיוק חצי
   מגובה הקרדיט. כאן ה-figure נמתח לגובה השורה ומחולק לשלושה:
   רווח, ציור, קרדיט. שני הרווחים שווים, ולכן הציור ממורכז אל הטקסט
   בדיוק - בלי מספר קסם שיסטה אם הגופן או הניסוח ישתנו.
   minmax(0,1fr) ולא 1fr: כך גובה הקרדיט לא נכנס לחישוב החלוקה,
   והמרכוז נשאר מדויק גם כששורת הקרדיט נשברת לשתי שורות.
   מעל 960px בלבד - מתחת לזה הפריסה חד-טורית וממילא אין למה למרכז. */
@media (min-width:961px){
  #zenga .zg-fig{
    align-self:stretch;
    display:grid;
    grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);
  }
  #zenga .zg-fig img{grid-row:2}
  #zenga .zg-fig figcaption{grid-row:3;align-self:start}
}