/* PelegSoft -׳¨׳›׳™׳‘׳™׳: ׳’׳™׳‘׳•׳¨, ׳›׳¨׳˜׳™׳¡׳™׳, ׳›׳₪׳×׳•׳¨׳™׳, ׳˜׳₪׳¡׳™׳ */

/* ---- ׳׳–׳•׳¨ ׳’׳™׳‘׳•׳¨ (׳“׳£ ׳”׳‘׳™׳×) ---- */
.hero {
    position: relative; /* ׳œ׳¢׳™׳’׳•׳Ÿ ׳©׳¢׳•׳Ÿ ׳”׳˜׳™׳¨׳” */
    /* flex:1 -׳ž׳ž׳œ׳ ׳׳× ׳©׳˜׳— ׳”׳×׳•׳›׳Ÿ ׳©׳ ׳©׳׳¨ ׳ž׳¢׳œ ׳”׳₪׳•׳˜׳¨ (׳‘׳ž׳§׳•׳ ׳’׳•׳‘׳”-׳ž׳¡׳š ׳§׳‘׳•׳¢ ׳©׳“׳—׳£ ׳׳×
       ׳”׳₪׳•׳˜׳¨ ׳ž׳×׳—׳× ׳œ׳§׳• ׳”׳’׳œ׳™׳œ׳”). ׳›׳š ׳”׳’׳™׳‘׳•׳¨ + ׳”׳₪׳•׳˜׳¨ ׳ ׳›׳ ׳¡׳™׳ ׳™׳—׳“ ׳œ׳ž׳¡׳š ׳׳—׳“. */
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: clamp(2rem, 7vh, 6rem);
    padding-inline: 1rem; /* ׳©׳”׳˜׳§׳¡׳˜ ׳œ׳ ׳™׳™׳—׳×׳š ׳‘׳ž׳¡׳›׳™׳ ׳¦׳¨׳™׳ */
    gap: 1.2rem;
}

/* ---- ׳©׳¢׳•׳Ÿ ׳˜׳™׳¨׳” ׳ž׳•׳–׳”׳‘ (׳×׳œ׳•׳™ ׳¢׳œ ׳©׳¨׳©׳¨׳×) ---- */
.tower-clock {
    position: absolute;
    top: -1.4rem; /* ׳¢׳•׳œ׳” ׳׳œ ׳ž׳׳—׳•׳¨׳™ ׳”׳¡׳¨׳’׳œ -׳”׳—׳•׳˜ ׳ž׳›׳•׳¡׳” ׳¢"׳™ ׳”-header ׳•׳ ׳¨׳׳” ׳™׳•׳¦׳ ׳ž׳ž׳ ׳• */
    right: clamp(0.5rem, 4vw, 3rem); /* ׳¦׳“ ׳™׳ž׳™׳Ÿ -׳›׳“׳™ ׳œ׳ ׳œ׳”׳¡׳×׳™׳¨ ׳׳× ׳”׳™׳¨׳— (׳ž׳©׳ž׳׳œ) */
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transform-origin: top center;
    animation: clock-sway 6s ease-in-out infinite;
    /* ׳¢׳ž׳¢׳•׳ ׳—׳œ׳§ ׳‘׳”׳×׳׳ ׳œ׳ž׳¦׳‘ ׳”׳×׳׳•׳¨׳” */
    transition: filter 1.5s ease, opacity 1.5s ease;
}
.tower-clock:hover .tower-clock-face { box-shadow:
    0 0 0 3px #FFE7A3, 0 0 0 9px #8A5F22, 0 0 0 10px #6b4718,
    0 10px 24px rgba(13, 62, 120, 0.5), 0 0 18px 4px rgba(255, 210, 120, 0.6),
    inset 0 2px 7px rgba(255, 255, 255, 0.6), inset 0 -7px 14px rgba(120, 80, 20, 0.4); }

/* ׳©׳œ׳˜ ׳¢׳¥ ׳ž׳¢׳•׳¦׳‘ ׳ž׳×׳—׳× ׳œ׳©׳¢׳•׳Ÿ -׳ž׳¦׳™׳’ ׳׳× ׳ž׳¦׳‘ ׳”׳™׳•׳ ׳”׳ ׳‘׳—׳¨, ׳ ׳¢׳œ׳ ׳¢׳ fade ׳׳—׳¨׳™ 4 ׳©׳ ׳™׳•׳× */
.tower-clock-label {
    margin-top: 16px;
    padding: 0.22rem 0.7rem;
    background: linear-gradient(180deg, #9a6a3c, var(--c-wood) 58%, var(--c-wood-deep));
    border: 2px solid rgba(255, 231, 163, 0.6);
    border-radius: 10px;
    color: var(--c-paper);
    font-family: var(--heading-font, 'Suez One'), 'Heebo', serif;
    font-size: clamp(0.62rem, 1.5vw, 0.82rem);
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    box-shadow: 0 3px 8px rgba(13, 62, 120, 0.4), inset 0 1px 0 rgba(255, 231, 163, 0.45);
    transition: opacity 0.6s ease, transform 0.15s;
}
.tower-clock-label.is-hidden { opacity: 0; pointer-events: none; }
/* ׳‘׳ž׳¢׳‘׳¨ ׳¢׳›׳‘׳¨ ׳¢׳œ ׳”׳©׳¢׳•׳Ÿ -׳”׳›׳™׳×׳•׳‘ ׳ž׳•׳₪׳™׳¢ (׳’׳•׳‘׳¨ ׳¢׳œ ׳”-fade) */
.tower-clock:hover .tower-clock-label { opacity: 1; pointer-events: auto; }
.tower-clock:active .tower-clock-label { transform: translateY(1px) scale(0.97); }

/* ---- מסגרת הפוקוס של השעון ----
   הוא ‎div‎ עם ‎role="button"‎ ו-‎tabindex="0"‎, ולכן לחיצה נותנת לו פוקוס
   והדפדפן מצייר את טבעת ברירת המחדל - **מלבן סביב כל האלמנט**, שכולל גם
   את שלט הכיתוב שמתחתיו, ולכן הוא נראה כמסגרת ריקה תלויה באוויר.
   ‎:focus-visible‎ ולא ‎:focus‎: הטבעת נשארת למי שמנווט במקלדת (היא הדרך
   היחידה שלו לדעת איפה הוא), ונעלמת בלחיצת עכבר או נגיעה. */
.tower-clock:focus { outline: none; }
.tower-clock:focus-visible { outline: none; }
.tower-clock:focus-visible .tower-clock-face {
    outline: 3px solid var(--c-gold-light, #ffe7a3);
    outline-offset: 4px;
}

/* ׳¢׳ž׳¢׳•׳ ׳”׳©׳¢׳•׳Ÿ ׳œ׳₪׳™ ׳©׳¢׳× ׳”׳™׳•׳ (׳×׳•׳׳ ׳œ׳”׳—׳©׳›׳× ׳”׳¡׳¦׳ ׳”) */
body[data-daytime="dawn"]  .tower-clock { filter: brightness(0.86) saturate(0.95); }
body[data-daytime="dusk"]  .tower-clock { filter: brightness(0.78) saturate(0.9); }
body[data-daytime="night"] .tower-clock { filter: brightness(0.5) saturate(0.8); opacity: 0.9; }
.tc-ring {
    width: 15px; height: 15px;
    border: 3px solid #C99A2E;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}
.tc-chain {
    width: 4px;
    height: clamp(12px, 3.2vh, 30px);
    background: linear-gradient(90deg, #7a531a 0%, #E9CB80 45%, #fff7e0 52%, #E9CB80 60%, #7a531a 100%);
    margin-top: -2px;
}
.tower-clock-face {
    position: relative;
    width: clamp(88px, 14vw, 134px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, #FFF7DE 0%, #F3E1A8 45%, #E9CB80 70%, #CDA23A 100%);
    border: 4px solid #B8841E;
    box-shadow:
        0 0 0 3px #FFE7A3,
        0 0 0 9px #8A5F22,
        0 0 0 10px #6b4718,
        0 10px 24px rgba(13, 62, 120, 0.5),
        inset 0 2px 7px rgba(255, 255, 255, 0.6),
        inset 0 -7px 14px rgba(120, 80, 20, 0.4);
}
.tc-num {
    position: absolute;
    transform: translate(-50%, -50%);
    font-family: 'Cinzel', 'Suez One', serif;
    font-weight: 700;
    color: #5A381E;
    font-size: clamp(7px, 1.3vw, 11px);
    line-height: 1;
}

.tc-hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform-origin: 50% 100%;
    border-radius: 4px;
    transform: rotate(0deg); /* ׳ž׳¢׳•׳“׳›׳Ÿ ׳‘-JS */
}
.tc-hour { width: 4.5px; height: 26%; margin-left: -2.25px; background: #5A381E; }
.tc-min  { width: 3px;   height: 36%; margin-left: -1.5px;  background: #7B4F28; }
.tc-sec  { width: 2px;   height: 40%; margin-left: -1px;    background: #E0452E; }
.tc-center {
    position: absolute;
    left: 50%; top: 50%;
    width: 11px; height: 11px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #FFF3D0, #C99A2E);
    border: 1.5px solid #7B4F28;
    z-index: 2;
}

@keyframes clock-sway {
    0%, 100% { transform: rotate(-2deg); }
    50%      { transform: rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
    .tower-clock { animation: none; }
}

@media (max-width: 640px) {
    .tower-clock { top: -1.2rem; right: 0.4rem; }
}

.hero-title {
    position: relative;
    /* ׳’׳•׳₪׳Ÿ ׳”׳œ׳•׳’׳• ׳ ׳©׳œ׳˜ ׳ž׳₪׳׳ ׳œ ׳”׳ ׳™׳”׳•׳œ ׳“׳¨׳š ׳”׳ž׳©׳×׳ ׳™׳ --logo-font / --logo-weight */
    font-family: var(--logo-font, 'Titan One'), 'Suez One', serif;
    font-weight: var(--logo-weight, 900);
    /* ׳’׳•׳“׳œ ׳‘׳¡׳™׳¡ ֳ— ׳ž׳›׳₪׳™׳œ ׳”׳ ׳©׳œ׳˜ ׳ž׳₪׳׳ ׳œ ׳”׳ ׳™׳”׳•׳œ (--logo-scale) */
    font-size: calc(clamp(2.8rem, 8vw, 5.6rem) * var(--logo-scale, 1));
    letter-spacing: 0.04em;
    color: var(--c-gold);
    /* ׳©׳™׳₪׳•׳¢ ׳–׳”׳‘ ׳ž׳•׳×׳׳ ׳œ׳₪׳œ׳˜׳× ׳”׳׳×׳¨: ׳œ׳•׳‘׳Ÿ ג† ׳–׳”׳‘-׳‘׳”׳™׳¨ ג† ׳–׳”׳‘ ג† ׳–׳”׳‘-׳¢׳ž׳•׳§ ג† ׳ ׳’׳™׳¢׳× ׳¢׳¥ (--c-wood)
       ׳”׳ ׳’׳™׳¢׳” ׳”׳—׳•׳ž׳” ׳‘׳×׳—׳×׳™׳× ׳§׳•׳©׳¨׳× ׳׳× ׳”׳–׳”׳‘ ׳œ׳¢׳¥ ׳”׳›׳₪׳×׳•׳¨׳™׳/׳”׳¡׳¨׳’׳œ. ׳ž׳¢׳œ: ׳‘׳¨׳§ ׳œ׳‘׳Ÿ ׳ ׳¢. */
    background:
        linear-gradient(105deg,
            transparent 38%, rgba(255, 255, 255, 0.95) 47%,
            rgba(255, 255, 255, 0.6) 52%, transparent 61%) 200% 0 / 250% 100% no-repeat,
        linear-gradient(180deg,
            #fffdf6 3%, var(--c-gold-light) 24%, var(--c-gold) 46%,
            var(--c-gold-deep) 78%, #B07C22 94%, var(--c-wood) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* ׳”׳¦׳’׳” "׳ž׳™׳•׳—׳“׳×" ׳”׳§׳©׳•׳¨׳” ׳œ׳₪׳œ׳˜׳”:
       (1) ׳׳׳•׳˜׳œ׳™׳™׳Ÿ ׳“׳§ ׳‘׳’׳•׳•׳Ÿ ׳¢׳¥ -׳ž׳—׳‘׳¨ ׳œ׳¨׳›׳™׳‘׳™ ׳”׳¢׳¥ ׳‘-UI
       (2) ׳׳§׳¡׳˜׳¨׳•׳–׳™׳™׳× 3D ׳‘׳’׳•׳•׳ ׳™ ׳¢׳¥ ׳¢׳ž׳•׳§׳™׳
       (3) ׳”׳¦׳œ׳œ׳× ׳¢׳•׳ž׳§ ׳‘׳›׳—׳•׳œ-׳œ׳™׳œ׳” ׳ž׳”׳₪׳œ׳˜׳”
       (4) ׳”׳™׳œ׳” ׳§׳¡׳•׳ž׳” ׳›׳₪׳•׳œ׳”: ׳–׳”׳‘ ׳—׳ ׳ž׳‘׳₪׳ ׳™׳ + ׳–׳•׳”׳¨ ׳‘׳’׳•׳•׳Ÿ ׳©׳ž׳™׳™׳ ׳ž׳‘׳—׳•׳¥ (׳©׳™׳™׳š ׳œ׳¡׳¦׳ ׳”) */
    /* **קו המתאר הוא צל אחד עם טשטוש זעיר, ולא ארבעה בארבעה כיוונים.**
       נמדד שהכותרת נעלה את **כל עמוד הבית** ל-‎50fps‎ במסך ‎120Hz‎ בזמן
       ששאר העמודים רצים ב-‎120‎: שרשרת הפילטרים מרוצה מחדש בכל פריים של
       ‎title-shine‎ (שמנפישה ‎background-position‎, כלומר חוט ראשי), ומה
       שקובע הוא **מספר השכבות**. תשע שכבות ברדיוסים זעירים נמדדו ‎50fps‎
       בדיוק כמו המקור -כלומר לא הבלוּר.

       ‎drop-shadow(0 0 0.7px)‎ הוא טבעת סביב **כל** הצורה בשכבה אחת
       במקום ארבע העתקות, ולכן נשארות שש -ואפשר לשמור על כל שאר המראה:
       שתי ההבלטות ושלושת הזוהרים.

       **‎-webkit-text-stroke‎ נוסה כאן ונפסל.** הוא אמנם נתן ‎120fps‎,
       אבל ‎-webkit-text-fill-color: transparent‎ פירושו שאין מילוי
       שיכסה את חצי הקו הפנימי -‎paint-order‎ מצייר מילוי **שקוף** מעליו-
       ולכן נראתה מסגרת חומה רציפה שלא הייתה שם קודם, וכך דווח. נמדד:
       ‎11.7%‎ מהפיקסלים שונים מהמקור בהפרש מרבי ‎508‎, מול ‎3.4%‎ ובהפרש
       ‎149‎ בטבעת. **מדד "ההפרש קטן" אינו מדד "נראה אותו דבר"** -
       ההפרש של ה-‎stroke‎ היה מרוכז בקו אחד חד, וזה בדיוק מה שהעין
       תופסת.

       **וזה לא היה האנימציה:** כיבוי ‎title-shine‎, ‎title-float‎ או שתיהן
       השאיר את העמוד על ‎60‎, וכך גם ביטול ה-‎background-clip‎; רק
       ‎filter: none‎ שחרר אותו. ‎will-change: auto‎ נמדד כמרע (‎24fps‎). */
    filter:
        drop-shadow(0 0 0.7px var(--c-wood-deep))
        drop-shadow(0 2px 0 #4a2f19)
        drop-shadow(0 3px 0 #3a2513)
        drop-shadow(0 8px 18px rgba(13, 62, 120, 0.6))
        drop-shadow(0 0 13px rgba(255, 209, 90, 0.55))
        drop-shadow(0 0 30px rgba(77, 168, 232, 0.4));
    /* ׳¨׳§ ׳×׳ ׳•׳¢׳•׳× ׳–׳•׳œ׳•׳× ׳œ-GPU (transform + background-position) -׳—׳œ׳§, ׳‘׳œ׳™ jank */
    will-change: transform;
    animation:
        hero-pop 0.9s cubic-bezier(0.2, 1.6, 0.4, 1) both,
        title-shine 6s 1s linear infinite,
        title-float 7s 1s ease-in-out infinite;
}

@keyframes title-shine {
    0%, 100% { background-position: 200% 0, 0 0; }
    45%, 55% { background-position: -60% 0, 0 0; }
}

@keyframes title-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-title { animation: hero-pop 0.9s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
}
/* פרופיל הביצועים: בלי נצנוץ הכותרת. ‎title-shine‎ מניע ‎background-position‎ -
   חוט ראשי, ~44 ציורים בשנייה (נמדד) -ולכן הוא המתג הראשון שהפרופילים
   החסכוניים מכבים. אותה צורה בדיוק של כלל צמצום-התנועה שמעל: הכניסה
   (hero-pop) נשארת -בלעדיה הכותרת מוקפאת על שקיפות 0 ואינה מופיעה כלל. */
body.perf-shine-off .hero-title { animation: hero-pop 0.9s cubic-bezier(0.2, 1.6, 0.4, 1) both; }

.hero-tagline {
    font-family: var(--heading-font, 'Suez One'), serif;
    font-size: clamp(1.2rem, 3vw, 1.9rem);
    color: #fff;
    text-shadow: 0 2px 10px rgba(13, 62, 120, 0.75);
    animation: hero-pop 0.9s 0.15s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

.hero-subtitle {
    max-width: min(34rem, 92vw);
    color: #f2f8ff;
    font-size: clamp(1rem, 2vw, 1.15rem);
    text-shadow: 0 1px 6px rgba(13, 62, 120, 0.7);
    animation: hero-pop 0.9s 0.3s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
/* ---- הבלוקים שהעורך מייצר לא מוסיפים מרווח ----
   שני השדות עברו לעורך מלא, ולכן שורה היא היום ‎<p>‎ ולא ‎<br>‎. למרג'ין
   ברירת המחדל של הדפדפן (‎1em‎ מלמעלה ומלמטה) יש כאן שתי בעיות: הוא מרחיק
   את הכתובית מהסלוגן שמעליה, והוא **שונה ממה שהיה** -עד כה השורות היו
   באותה פסקה והמרווח ביניהן היה ה-‎line-height‎ בלבד.
   ‎:first-child‎/‎:last-child‎ אינם מספיקים כי הבלוקים אחים זה לזה. */
.hero-subtitle > p,
.hero-note > p { margin: 0; }
.hero-subtitle > p + p,
.hero-note > p + p { margin-top: 0.35em; }

/* ---- ברכה לפי שעת היום (מעל שם האתר) ----
   כל ארבעת הנוסחים ב-DOM, וה-CSS מציג את המתאים לפי ‎body[data-daytime]‎ -
   ההחלפה חיה בלי שורת JS (scene.js כבר מעדכן את המאפיין כל דקה), והיא
   מכבדת גם את ‎?time=‎ ואת שעון הדמה. נערכת בפאנל: עמודים ← בית. */
.hero-greeting {
    max-width: min(34rem, 92vw);
    font-family: var(--heading-font, 'Suez One'), serif;
    font-size: clamp(1.05rem, 2.6vw, 1.5rem);
    color: var(--c-gold-light, #FFE7A3);
    text-shadow: 0 2px 8px rgba(13, 62, 120, 0.8), 0 0 14px rgba(255, 209, 90, 0.25);
    animation: hero-pop 0.9s cubic-bezier(0.2, 1.6, 0.4, 1) both;
    /* הברכה פותחת את הכותרת ואינה פסקה נפרדת -מצמצם את ה-gap של הגיבור */
    margin-bottom: -0.35rem;
}
.hero-greeting .hero-greet { display: none; }
body[data-daytime="dawn"]  .hero-greeting .hero-greet[data-gt="dawn"],
body[data-daytime="day"]   .hero-greeting .hero-greet[data-gt="day"],
body[data-daytime="dusk"]  .hero-greeting .hero-greet[data-gt="dusk"],
body[data-daytime="night"] .hero-greeting .hero-greet[data-gt="night"] { display: block; }
/* הבלוקים של העורך המלא -אותו כלל של הכתובית ושורת ההערה */
.hero-greeting .hero-greet > p { margin: 0; }
.hero-greeting .hero-greet > p + p { margin-top: 0.3em; }

.hero-actions {
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
    justify-content: center;
    animation: hero-pop 0.9s 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

@keyframes hero-pop {
    from { opacity: 0; transform: translateY(24px) scale(0.92); }
    to   { opacity: 1; transform: none; }
}

/* ׳ž׳¨׳•׳•׳— ׳©׳“׳•׳—׳£ ׳׳× ׳˜׳§׳¡׳˜ ׳”׳’׳™׳‘׳•׳¨ ׳œ׳ž׳¢׳œ׳” ׳›׳“׳™ ׳©׳”׳˜׳™׳¨׳” (׳”׳¡׳¦׳ ׳”) ׳×׳™׳©׳׳¨ ׳’׳œ׳•׳™׳” ׳ž׳×׳—׳×.
   flex:1 ׳‘׳œ׳‘׳“ -׳ž׳ž׳œ׳ ׳׳× ׳”׳©׳˜׳— ׳”׳₪׳ ׳•׳™ ׳‘׳×׳•׳š ׳”׳’׳™׳‘׳•׳¨ ׳‘׳œ׳™ ׳œ׳›׳₪׳•׳× ׳’׳•׳‘׳” ׳©׳’׳•׳¨׳ ׳œ׳’׳œ׳™׳œ׳”. */
.hero-spacer { flex: 1; min-height: 0; }

/* ---- ׳ž׳¢׳‘׳¨-׳ ׳’׳™׳¢׳” ׳׳œ ׳”׳¡׳¦׳ ׳” ׳©׳ž׳׳—׳•׳¨ ----
   ׳”׳¡׳¦׳ ׳” (׳›׳•׳œ׳œ ׳”׳“׳ž׳•׳™׳•׳× ׳”׳ž׳”׳œ׳›׳•׳×) ׳™׳•׳©׳‘׳× ׳ž׳׳—׳•׳¨׳™ ׳”׳×׳•׳›׳Ÿ. ׳”׳×׳•׳›׳Ÿ ׳©׳§׳•׳£ ׳‘׳׳–׳•׳¨׳™׳• ׳”׳¨׳™׳§׳™׳
   ׳׳š "׳‘׳•׳œ׳¢" ׳׳× ׳”׳ ׳’׳™׳¢׳•׳×, ׳›׳š ׳©׳œ׳—׳™׳¦׳” ׳¢׳œ ׳“׳ž׳•׳× ׳₪׳’׳¢׳” ׳‘׳×׳•׳›׳Ÿ ׳•׳œ׳ ׳‘׳“׳ž׳•׳× (׳”׳§׳₪׳™׳¦׳” ׳œ׳ ׳¢׳‘׳“׳”
   -׳‘׳¢׳™׳§׳¨ ׳‘׳ž׳•׳‘׳™׳™׳œ, ׳©׳ ׳”׳×׳•׳›׳Ÿ ׳ž׳›׳¡׳” ׳׳× ׳¨׳•׳‘ ׳”׳ž׳¡׳š). ׳œ׳›׳Ÿ ׳”-.content ׳ž׳•׳•׳×׳¨ ׳¢׳œ ׳׳™׳¨׳•׳¢׳™
   ׳ž׳’׳¢, ׳•׳¨׳§ ׳”׳×׳•׳›׳Ÿ ׳”׳׳ž׳™׳×׳™ (׳”׳©׳¢׳•׳Ÿ, ׳”׳˜׳§׳¡׳˜׳™׳, ׳”׳›׳₪׳×׳•׳¨׳™׳, ׳”׳›׳¨׳˜׳™׳¡׳™׳) ׳—׳•׳–׳¨ ׳œ׳§׳‘׳œ ׳׳•׳×׳.
   ׳›׳š ׳ ׳’׳™׳¢׳” ׳‘׳׳–׳•׳¨ ׳¨׳™׳§ "׳¢׳•׳‘׳¨׳×" ׳׳œ ׳”׳“׳ž׳•׳× ׳©׳‘׳¡׳¦׳ ׳”. */
.content { pointer-events: none; }
.tower-clock, .hero-title, .hero-tagline, .hero-subtitle, .hero-note, .hero-greeting, .hero-actions,
.about-card, .cms-card,
/* ׳›׳œ ׳׳œ׳ž׳ ׳˜ ׳׳™׳ ׳˜׳¨׳׳§׳˜׳™׳‘׳™ ׳‘׳×׳•׳š ׳”׳×׳•׳›׳Ÿ ׳—׳™׳™׳‘ ׳œ׳§׳‘׳œ ׳׳™׳¨׳•׳¢׳™ ׳ž׳’׳¢ (׳׳—׳¨׳× ׳”׳•׳ ׳œ׳ ׳œ׳—׳™׳¥ -׳›׳ž׳•
   ׳©׳§׳¨׳” ׳œ׳›׳₪׳×׳•׳¨ "׳—׳–׳¨׳” ׳œ׳˜׳™׳¨׳”" ׳‘-404). ׳׳–׳•׳¨׳™׳ ׳¨׳™׳§׳™׳ ׳ ׳©׳׳¨׳™׳ pointer-events:none ׳•׳ž׳¢׳‘׳™׳¨׳™׳
   ׳׳× ׳”׳ ׳’׳™׳¢׳” ׳׳œ ׳”׳“׳ž׳•׳™׳•׳× ׳©׳‘׳¡׳¦׳ ׳”. */
.content a, .content button, .content [role="button"] { pointer-events: auto; }

/* ---- ׳›׳₪׳×׳•׳¨׳™׳ ׳‘׳¡׳’׳ ׳•׳Ÿ ׳ž׳©׳—׳§ ---- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.8rem;
    border-radius: 14px;
    font-family: 'Heebo', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    border: none;
    transition: transform 0.15s, filter 0.2s, box-shadow 0.15s;
}

.btn:active { transform: translateY(2px) scale(0.98); }

.btn-gold {
    color: var(--c-wood-deep);
    background: linear-gradient(180deg, var(--c-gold-light), var(--c-gold) 55%, var(--c-gold-deep));
    box-shadow:
        0 4px 0 var(--c-gold-deep),
        0 8px 20px rgba(13, 62, 120, 0.4),
        inset 0 1px 0 #fff;
}

.btn-gold:hover { filter: brightness(1.08); transform: translateY(-2px); }

.btn-wood {
    color: var(--c-paper);
    background: linear-gradient(180deg, #9a6a3c, var(--c-wood) 55%, var(--c-wood-deep));
    box-shadow:
        0 4px 0 var(--c-wood-deep),
        0 8px 20px rgba(13, 62, 120, 0.4),
        inset 0 1px 0 rgba(255, 231, 163, 0.5);
}

.btn-wood:hover { filter: brightness(1.1); transform: translateY(-2px); }

/* ---- ׳ž׳§׳˜׳¢׳™׳ ׳•׳›׳¨׳˜׳™׳¡׳™׳ ---- */
.section {
    position: relative;
    padding: clamp(2.5rem, 6vh, 5rem) 0;
}

.section-title {
    text-align: center;
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    color: var(--c-night);
    margin-bottom: 2rem;
    text-shadow: 0 1px 0 #fff;
}

.page-title {
    text-align: center;
    font-size: clamp(2rem, 5vw, 3rem);
    color: #fff;
    text-shadow: 0 2px 12px rgba(13, 62, 120, 0.8);
    margin: clamp(1.5rem, 5vh, 3.5rem) 0 1.5rem;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.4rem;
}

.card {
    background: rgba(255, 246, 230, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid rgba(211, 154, 26, 0.45);
    border-radius: 18px;
    padding: 1.6rem;
    box-shadow: 0 10px 30px rgba(13, 62, 120, 0.25), inset 0 1px 0 #fff;
    transition: transform 0.25s, box-shadow 0.25s;
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(13, 62, 120, 0.35), inset 0 1px 0 #fff;
}

.card-icon { font-size: 2.2rem; margin-bottom: 0.6rem; }

.card h3 { color: var(--c-night); margin-bottom: 0.5rem; font-size: 1.25rem; }

.card p { color: #4a3826; font-size: 0.98rem; }

/* ׳œ׳•׳— "׳ž׳’׳™׳œ׳”" ׳œ׳¢׳ž׳•׳“׳™ ׳×׳•׳›׳Ÿ */
.panel {
    background: rgba(255, 246, 230, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 2px solid rgba(211, 154, 26, 0.45);
    border-radius: 20px;
    padding: clamp(1.5rem, 4vw, 2.8rem);
    box-shadow: 0 12px 36px rgba(13, 62, 120, 0.3), inset 0 1px 0 #fff;
    margin-bottom: 2rem;
}

.panel h2 { color: var(--c-night); margin-bottom: 0.8rem; }

.panel p + p { margin-top: 0.8rem; }

.panel ul { padding-inline-start: 1.4rem; margin-top: 0.6rem; }

/* ---- ׳₪׳¨׳˜׳™ ׳§׳©׳¨ ---- */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.2rem;
    margin-top: 1rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: rgba(255, 255, 255, 0.65);
    border-radius: 14px;
    padding: 1rem 1.2rem;
    border: 1px solid rgba(211, 154, 26, 0.35);
    font-weight: 500;
    transition: transform 0.2s, background 0.2s;
}

.contact-item:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.85); }

.contact-item .ci-icon { font-size: 1.6rem; }

/* ---- ׳¢׳ž׳•׳“ 404 ---- */
.error-hero {
    text-align: center;
    padding: clamp(3rem, 12vh, 7rem) 1rem 2rem;
    color: #fff;
    text-shadow: 0 2px 12px rgba(13, 62, 120, 0.8);
}

.error-hero .big { font-size: clamp(4rem, 14vw, 8rem); font-family: var(--heading-font, 'Suez One'), serif; }

/* ---- ׳ž׳’׳™׳œ׳” ׳ž׳©׳₪׳˜׳™׳× (׳ž׳•׳“׳׳œ ׳×׳ ׳׳™ ׳©׳™׳ž׳•׳© / ׳₪׳¨׳˜׳™׳•׳×) ---- */
.scroll-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: transparent; /* ׳¨׳§׳¢ ׳©׳§׳•׳£ -׳”׳׳×׳¨ ׳ ׳©׳׳¨ ׳’׳œ׳•׳™ ׳ž׳׳—׳•׳¨ */
    /* **בלי אנימציית opacity על השכבה הזאת.** היא ‎fixed; inset: 0‎, כלומר
       אנימציה עליה מקדמת לקומפוזיטור שכבה **בגודל מסך מלא** -באייפון
       ‎1179x2556‎, כ-12MB טקסטורה- והיא שקופה לגמרי, כלומר אינה מציירת דבר.
       זו בדיוק העלות שכבר נמדדה כאן על ‎.say-layer‎ הריקה (11.8MB), והיא
       נגבית מעל סצנה שכבר מחזיקה ~60MB. מי שצריך לעמעם הוא הקלף, ולו יש
       עמעום משלו ב-‎scroll-fade‎. */
}
.scroll-modal[hidden] { display: none; }
/* ---- הרגע שבין הלחיצה על "הבנתי" לבין ההסרה מה-DOM ----
   הסרת השכבה מכריחה את הדפדפן לצייר מחדש את כל מה שהיה מתחתיה, ומתחתיה כאן
   יושבת הסצנה: שמיים, טירה, מים, עשרות דמויות ופילטרים. זה נמדד כהשהיה
   מורגשת בטלפון -ומי שאישר את האבחון הוא המקרה ההפוך: מגילה שנפתחה מתוך
   הודעת הפרטיות (ומתחתיה רק שכבה שטוחה) נסגרת מיד.

   לכן הסגירה בשני שלבים. כאן השלב הראשון: העלמה **לעין בלבד**, שהיא שינוי
   opacity על שכבה שכבר מקודמת -פעולה של הקומפוזיטור, בלי ציור מחדש. השכבה
   נשארת בעץ (ולכן גם בולעת את ה-click שיגיע אחריה), וההסרה בפועל קורית
   אחר כך, כשכבר לא מסתכלים.

   **ההעלמה עברה מהשכבה אל הקלף עצמו.** קודם היא ישבה על ‎.scroll-modal‎,
   שהיא מסך מלא, וזה חייב להשאיר אותה מקודמת כל הזמן. הקלף הוא הדבר היחיד
   שנראה שם, הוא קטן, והוא ממילא מקודם (יש לו ‎filter‎ ואנימציה) -כלומר אותה
   העלמה מיידית בלי שכבה של 12MB. השכבה עצמה נשארת אטומה ולכן ממשיכה לבלוע
   את ה-click שיגיע אחרי ה-pointerdown (‎opacity‎ אינו מסיר מהיפ-טסט, וכאן
   היא בכלל אינה מעומעמת).

   animation: none הוא תנאי ולא קישוט: ל-‎.scroll-doc‎ יש ‎scroll-fade‎ עם
   both, וקיבוע כזה גובר בקסקייד גם על opacity שנכתב כאן. אותה מלכודת
   שכבר מתועדת בפרויקט על מעברי העמודים. */
.scroll-modal.is-closing .scroll-doc {
    animation: none;
    transition: none;
    opacity: 0;
}
.scroll-modal.is-closing .scroll-win { animation: none; }


/* ================= חלון החשיפה של המגילה =================

   **הפרישה בנויה משתי הזזות שמתקזזות, ולא מ-‎clip-path‎.** החלון עולה בדיוק
   בגובהו והקלף שבתוכו יורד באותו שיעור; טרנספורמים מצטרפים במורד העץ, ולכן
   הקלף עומד במקומו המדויק בכל שלב, והקצה התחתון של החלון הוא קו הפרישה -
   גאומטריה זהה לחלוטין ל-‎inset(0 0 N% 0)‎ שהיה כאן.

   **למה בכלל להחליף.** ‎clip-path‎ אינה ברשימת התכונות ש-WebKit מריץ
   בקומפוזיטור (‎opacity, transform, translate, scale, rotate, filter,
   backdrop-filter‎), ובאג 185816 של WebKit -"הרצת אנימציות clip-path
   בקומפוזיטור", פתוח מאז 2018- מצהיר על כך במפורש. כלומר הפרישה התקדמה
   **רק** כשהחוט הראשי הספיק לחשב סגנון ולצייר. וכיוון ששעון האנימציה נגזר
   מהזמן ולא מהפריימים, חוט ראשי שנתקע לשנייה אינו מאט את הפרישה אלא **מדלג**
   עליה: המגילה נצבעת פעם אחת באמצע, נתקעת שם, וקופצת לפתוחה. זה בדיוק מה
   שדווח באייפון, ושוחזר כאן בכרום תחת האטת מעבד x20 -קפיצה של 97-100%
   ושלושה מצבים בלבד לכל הפרישה.

   ‎transform‎ כן רץ בקומפוזיטור, ולכן הפרישה ממשיכה לזוז גם כשהחוט הראשי
   עסוק. אותה תנועה בדיוק, רק שאי אפשר להקפיא אותה. */
.scroll-win {
    position: relative;
    width: min(94vw, 60vh);
    aspect-ratio: 600 / 900;
    overflow: hidden;
    animation: scroll-win 0.62s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
/* בסיום מסירים את הגזירה, אחרת הצל היה נשאר חתוך לגבולות הקלף לתמיד.
   בזמן הפרישה הוא כן חתוך, וזה נכון: אין צל מתחת לקו שעוד לא נפרש. */
.scroll-modal.is-open .scroll-win { overflow: visible; }

.scroll-doc { animation-play-state: paused; }

.scroll-doc {
    position: absolute;
    inset: 0;
    background: center / contain no-repeat;
    /* **צל רך אחד ולא שתי הילות** (בקשת המשתמש). הישן היה כחול רווי ברדיוס
       34px ועוד אחד מעליו, ושלושה דברים הפכו אותו להילה במקום לצל: פילטרים
       מחושבים בשרשרת, ולכן השני צויר סביב הכתם המטושטש של הראשון (הכלל:
       הדוק קודם, רך אחריו); הטשטוש היה כפול מההיסט ולכן התפשט למעלה ולצדדים
       כמו למטה; והכחול הרווי מעל סצנה כחולה נקרא כאור נפלט ולא כצל. כאן:
       מגע דהוי בגוון הדיו של הקלף, ומעליו שכבה רכה שההיסט שלה גדול מחצי
       הטשטוש. ‎box-shadow‎ אינו תחליף -לקלף יש אלפא אמיתי, והוא היה מצייר
       מלבן שצף בשוליים השקופים. */
    filter: drop-shadow(0 2px 3px rgba(38, 24, 10, 0.30))
            drop-shadow(0 12px 18px rgba(20, 32, 54, 0.22));
    transform-origin: top center;
    /* ‎-8px‎ ו-‎scaleX(0.92)‎ נשמרו מהאנימציה המקורית כדי שהתנועה תיראה זהה:
       ההזזה נטו של הקלף היא ‎-100% + (100% - 8px) = -8px‎, בדיוק כמו קודם,
       והיא מתכנסת ל-0 באותה עקומה. ‎scroll-fade‎ הוא בדיוק ה-‎admin-fade‎ של
       0.25s שהוסר מהשכבה, כי העמעום היה עד כה מכפלה של השניים. */
    animation: scroll-sheet 0.62s cubic-bezier(0.22, 0.9, 0.3, 1) both,
               scroll-fade  0.25s ease both;
}
@keyframes scroll-win {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}
@keyframes scroll-sheet {
    from { transform: translateY(calc(100% - 8px)) scaleX(0.92); }
    to   { transform: translateY(0) scaleX(1); }
}
@keyframes scroll-fade { from { opacity: 0; } to { opacity: 1; } }
.scroll-doc.is-terms         { background-image: url('/images/scene/terms-of-use.webp'); }
.scroll-doc.is-privacy       { background-image: url('/images/scene/privacy-policy.webp'); }
.scroll-doc.is-accessibility { background-image: url('/images/scene/accessibility-statement.webp'); }

/* ׳©׳˜׳— ׳”׳›׳×׳™׳‘׳” -׳ž׳×׳—׳× ׳œ׳›׳•׳×׳¨׳× ׳”׳ž׳•׳“׳₪׳¡׳× ׳‘׳’׳¨׳₪׳™׳§׳”, ׳‘׳×׳•׳š ׳׳–׳•׳¨ ׳”׳§׳œ׳£ ׳”׳₪׳ ׳™׳ž׳™ */
.scroll-content {
    position: absolute;
    top: 16%;
    bottom: 11%;
    left: 15%;
    /* ׳™׳ž׳™׳Ÿ 10% (׳‘׳ž׳§׳•׳ 15%) -׳ž׳–׳™׳– ׳׳× ׳₪׳¡ ׳”׳’׳œ׳™׳œ׳” (׳‘-iOS ׳×׳ž׳™׳“ ׳‘׳§׳¦׳” ׳”׳™׳ž׳ ׳™ ׳”׳₪׳™׳–׳™) ׳™׳ž׳™׳ ׳”
       ׳׳œ ׳©׳•׳œ׳™ ׳”׳§׳œ׳£. padding-inline-start (=׳™׳ž׳™׳Ÿ ׳‘-RTL) ׳ž׳¨׳—׳™׳§ ׳׳× ׳×׳—׳™׳œ׳× ׳”׳˜׳§׳¡׳˜ ׳ž׳”׳₪׳¡. */
    right: 10%;
    overflow-y: auto;
    /* עיגון הגלילה מזיז את המיקום מעצמו כשהתוכן מתחלף, וכאן התוכן מוחלף
       בכל פתיחה (innerHTML מהתבנית) -ואז המסמך נפתח באמצע הטקסט. */
    overflow-anchor: none;
    padding-inline-start: 1.5rem;
    padding-inline-end: 0.5rem;
    color: #4a3418;
    font-family: 'Heebo', sans-serif;
    text-align: right;
    /* ׳¡׳§׳¨׳•׳œ ׳ž׳¢׳•׳¦׳‘ ׳×׳•׳׳-׳§׳œ׳£ (׳—׳•׳§: ׳›׳œ ׳¡׳§׳¨׳•׳œ ׳ž׳¢׳•׳¦׳‘) */
    scrollbar-width: thin;
    scrollbar-color: #8a5f22 transparent;
}
.scroll-content::-webkit-scrollbar { width: 9px; }
.scroll-content::-webkit-scrollbar-track { background: transparent; }
.scroll-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #a9761f, #6b4718);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 8px;
}

.scroll-title {
    font-family: var(--heading-font, 'Suez One'), serif;
    color: #5A381E;
    font-size: clamp(1.3rem, 3.5vw, 1.9rem);
    text-align: center;
    margin-bottom: 0.15rem;
}
.scroll-meta {
    text-align: center;
    font-size: 0.78rem;
    color: #7a5a30;
    margin-bottom: 1rem;
}
.scroll-content h3 {
    font-family: var(--heading-font, 'Suez One'), serif;
    color: #6b4718;
    font-size: 1.02rem;
    margin: 0.9rem 0 0.25rem;
}
.scroll-content p { font-size: 0.9rem; line-height: 1.7; margin-bottom: 0.5rem; }
.scroll-content a { color: #8a4b12; text-decoration: underline; }

/* רשימות וקוד בתוך המגילה. עד כה הם נשענו על ברירת המחדל של הדפדפן -
   הצהרת הנגישות בנויה מרשימות, וגודל הגופן שלהן לא תאם את הפסקאות שסביבן. */
.scroll-content ul, .scroll-content ol {
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0 0 0.6rem;
    padding-inline-start: 1.3rem;
}
.scroll-content li { margin-bottom: 0.25rem; }
.scroll-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.86em;
    background: rgba(122, 82, 34, 0.12);
    border-radius: 4px;
    padding: 0.05em 0.3em;
    /* כתובת/שם קובץ הוא טקסט לועזי בתוך משפט עברי -בלי ‎unicode-bidi‎
       ה-bidi הופך את סדר המקטעים (חוק מתועד בפרויקט). */
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* שני פריטים בשתי שורות: "הבנתי" למעלה, ומתחתיו "פתיחה כעמוד מלא".
   ‎column‎ ולא ‎wrap‎ -בשורה אחת הקישור נקרא כפעולה מתחרה לצד הכפתור,
   ובמסך רחב הם ממילא לא היו נשברים. הסדר הוא סדר המרקאפ. */
.scroll-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    margin: 1.3rem 0 0.5rem;
}
/* הקישור לעמוד המלא משני לכפתור "הבנתי" ולכן אינו כפתור בעצמו: שתי צורות
   זהות זו לצד זו נקראות כשתי פעולות מתחרות (אותו לקח של "הסתרת המידע"
   בכרטיס הפרויקט). */
.scroll-perma {
    font-size: 0.82rem;
    color: #8a4b12;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.scroll-perma:hover { color: #6b4718; }
.scroll-ok {
    font-family: var(--heading-font, 'Suez One'), serif;
    font-size: 1rem;
    cursor: pointer;
    color: var(--c-wood-deep);
    background: linear-gradient(180deg, var(--c-gold-light), var(--c-gold) 55%, var(--c-gold-deep));
    border: 2px solid #b8841e;
    border-radius: 12px;
    padding: 0.5rem 1.6rem;
    box-shadow: 0 4px 0 #8a5f22, 0 6px 14px rgba(90, 56, 30, 0.4), inset 0 1px 0 #fff;
    transition: transform 0.12s, filter 0.2s;
}
.scroll-ok:hover { filter: brightness(1.06); transform: translateY(-1px); }
.scroll-ok:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a5f22; }

@media (prefers-reduced-motion: reduce) {
    /* **‎.scroll-win‎ חייב להופיע כאן.** בלי אנימציה אין ‎fill‎, ולכן
       ה-‎transform‎ חוזר לבסיס והחלון והקלף נמצאים במקומם -אבל אם החלון
       נשאר עם האנימציה שלו הוא מקובע ב-‎translateY(-100%)‎ והמסמך פשוט
       אינו נראה. ‎overflow: visible‎ כי ‎is-open‎ נקבע ב-JS מ-‎animationend‎,
       שאינו נורה כשאין אנימציה. */
    .scroll-modal, .scroll-win, .scroll-doc { animation: none; }
    .scroll-win { overflow: visible; }
}

/* ==== ׳¢׳ž׳•׳“ ׳׳•׳“׳•׳× (׳¢׳œ ׳§׳œ׳£ ׳₪׳ ׳˜׳–׳™׳”, ׳‘׳’׳•׳“׳œ ׳§׳‘׳•׳¢ + ׳’׳œ׳™׳œ׳” ׳₪׳ ׳™׳ž׳™׳×) ==== */
/* flex:1 (׳›׳ž׳• ׳¢׳ž׳•׳“ ׳”׳‘׳™׳×) -׳ž׳ž׳œ׳ ׳׳× ׳”׳©׳˜׳— ׳ž׳¢׳œ ׳”׳₪׳•׳˜׳¨ ׳›׳š ׳©׳”׳₪׳•׳˜׳¨ ׳ ׳›׳ ׳¡ ׳œ׳ž׳¡׳š ׳׳—׳“ ׳‘׳“׳¡׳§׳˜׳•׳₪,
   ׳•׳™׳™׳©׳•׳¨-׳œ׳¨׳׳© ׳›׳“׳™ ׳©׳”׳›׳¨׳˜׳™׳¡ ׳™׳™׳©׳‘ ׳’׳‘׳•׳”. (׳‘׳ž׳•׳‘׳™׳™׳œ min-height ׳ ׳“׳¨׳¡ ׳œ"׳”׳¦׳¦׳× ׳₪׳•׳˜׳¨".) */
.about {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(0.6rem, 2vh, 1.6rem) 1rem;
}
/* ׳”׳§׳œ׳£ -׳™׳—׳¡ ׳˜׳‘׳¢׳™ ׳§׳‘׳•׳¢ (׳‘׳œ׳™ ׳ž׳×׳™׳—׳”!). ׳”׳¨׳•׳—׳‘ ׳ž׳•׳’׳‘׳œ ׳’׳ ׳¢"׳™ ׳’׳•׳‘׳” ׳”׳ž׳¡׳š ׳›׳š ׳©׳”׳›׳¨׳˜׳™׳¡ ׳×׳ž׳™׳“
   ׳‘׳“׳™׳•׳§ ׳‘׳’׳•׳“׳œ ׳”׳§׳œ׳£ (׳‘׳œ׳™ letterbox) ׳•׳”׳×׳•׳›׳Ÿ ׳œ׳¢׳•׳œ׳ ׳œ׳ ׳—׳•׳¨׳’ ׳ž׳ž׳ ׳•. */
.about-card {
    position: relative;
    /* ׳”׳¡׳§׳׳œ׳” ׳ž׳›׳₪׳™׳œ׳” ׳׳× ׳”׳’׳•׳“׳œ; ׳”׳×׳§׳¨׳” ׳”׳—׳™׳¦׳•׳ ׳™׳× (94vw / 70vh) ׳ž׳•׳ ׳¢׳× ׳—׳¨׳™׳’׳” ׳ž׳”׳ž׳¡׳š ׳’׳ ׳‘׳”׳’׳“׳œ׳” */
    /* ‎96.5vw‎ ולא ‎94vw‎: במובייל **הרוחב** הוא שקובע (נמדד 89% מהמסך ב-390
       וב-430), ובאנכי נשארו שם 227px פנויים עד הפוטר -כלומר כל מה שהיה
       חסר לצדדים היה התקרה הזאת. */
    width: min(calc(min(30rem, 99vw, 82vh) * var(--card-scale-mobile, 1)), 99vw, 78vh);
    aspect-ratio: 700 / 894;
    background: url('/images/parchment.webp') center / 100% 100% no-repeat;
    filter: drop-shadow(0 16px 34px rgba(6, 20, 40, 0.45)) drop-shadow(0 0 0 rgba(255, 214, 120, 0));
    animation: about-reveal 1.15s cubic-bezier(0.18, 1.25, 0.35, 1) both;
}
/* ׳ž׳—׳©׳‘/׳˜׳׳‘׳œ׳˜ (׳ž׳¢׳œ ׳ž׳•׳‘׳™׳™׳œ): ׳§׳œ׳£ ׳”׳׳•׳“׳•׳× ׳’׳“׳•׳œ ׳™׳•׳×׳¨ ׳•׳ž׳ž׳•׳¨׳›׳– ׳׳ ׳›׳™׳× ׳‘׳׳ž׳¦׳¢ ׳”׳ž׳¡׳š,
   ׳‘׳“׳™׳•׳§ ׳›׳ž׳• ׳§׳œ׳₪׳™ ׳”-CMS. ׳‘׳ž׳•׳‘׳™׳™׳œ (ג‰₪640px) ׳ ׳©׳׳¨ ׳ž׳“׳•׳™׳§ ׳›׳₪׳™ ׳©׳”׳•׳. */
/* ‎70vh‎ ולא ‎62vh‎ (+13%), **וזה חורג במכוון מהמרווח שהיה** (בקשת המשתמש
   המפורשת, אחרי שהמגבלה הוצגה).

   במחשב האיבר שקובע הוא ה-‎vh‎ ולא ה-‎vw‎: ליחס הקלף אין דרך להתרחב
   לצדדים בלי לגדול גם לגובה, ולכן "רחב יותר" פירושו בהכרח "גבוה יותר".
   נמדד המרווח שהיה בין תחתית הקלף לפוטר - 1920x1080: 67px, 1500x950: 45,
   1280x800: 21, 1366x768: 16, iPad לרוחב: 15, 1024x640: 13 - כלומר
   ‎~3%‎ בלבד. ‎70vh‎ נבחר כערך הגדול ביותר שעדיין נכנס במלואו ב-1500x950
   (התקרה שם היא ‎71.4vh‎), ובמסכים נמוכים ממנו העמוד **מוסיף גלילה**
   כדי להגיע לתחתית הקלף. העמודים אינם נעולי-גלילה, ולכן זו גלילה
   ולא חיתוך. */
@media (min-width: 641px) {
    .about { align-items: center; }
    .about-card { width: min(calc(min(52rem, 94vw, 70vh) * var(--card-scale-desktop, 1)), 94vw, 71vh); }
}
/* ׳”׳‘׳–׳§-׳§׳¡׳: ׳׳œ׳•׳ž׳× ׳׳•׳¨ ׳ž׳œ׳•׳›׳¡׳ ׳× ׳©׳¡׳•׳—׳₪׳× ׳₪׳¢׳ ׳׳—׳× ׳¢׳œ ׳¦׳•׳¨׳× ׳”׳§׳œ׳£ (mask ׳œ׳¦׳•׳¨׳× ׳”׳§׳œ׳£) */
.about-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.55) 50%, transparent 58%);
    background-size: 250% 100%;
    -webkit-mask: url('/images/parchment.webp') center / 100% 100% no-repeat;
    mask: url('/images/parchment.webp') center / 100% 100% no-repeat;
    animation: about-shimmer 1.5s ease-out 0.35s both;
}
@keyframes about-reveal {
    0%   { opacity: 0; transform: scale(0.35) rotate(-7deg);
           filter: drop-shadow(0 16px 34px rgba(6, 20, 40, 0.45)) drop-shadow(0 0 70px rgba(255, 214, 120, 0.95)); }
    55%  { opacity: 1; transform: scale(1.05) rotate(1.5deg);
           filter: drop-shadow(0 16px 34px rgba(6, 20, 40, 0.45)) drop-shadow(0 0 38px rgba(255, 214, 120, 0.75)); }
    100% { opacity: 1; transform: scale(1) rotate(0);
           filter: drop-shadow(0 16px 34px rgba(6, 20, 40, 0.45)) drop-shadow(0 0 0 rgba(255, 214, 120, 0)); }
}
@keyframes about-shimmer {
    0%   { background-position: 210% 0; opacity: 0; }
    25%  { opacity: 1; }
    100% { background-position: -90% 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .about-card { animation: none; }
    .about-card::before { display: none; }
}
/* ׳׳–׳•׳¨ ׳”׳×׳•׳›׳Ÿ ׳”׳₪׳ ׳™׳ž׳™ -׳™׳•׳©׳‘ ׳¢׳œ ׳©׳˜׳— ׳”׳§׳œ׳£ ׳”׳ ׳§׳™ (׳‘׳™׳Ÿ ׳”׳§׳™׳©׳•׳˜׳™׳), ׳•׳’׳•׳œ׳œ ׳׳ ׳”׳×׳•׳›׳Ÿ ׳׳¨׳•׳š */
.about-inner {
    position: absolute;
    /* ‎15%/14%‎ ולא ‎17%/17%‎ -אזור הכתיבה נמתח לצדדים עד גבול הציור עצמו
       (בקשת המשתמש). נמדד מ-‎parchment.webp‎: מוט הלפיד נגמר ב-‎~15%‎ משמאל
       והקצה המרוט של המגילה ב-‎~13%‎ מימין, ולכן אלה הגבולות ולא בחירה
       אסתטית. רוחב אזור הכתיבה: 66% -> 71% מרוחב הקלף. */
    /* הערכים כאן הם ה**בסיס**, ו-‎lib/about_pos.php‎ מחזיק אותו מספר -שינוי
       באחד חייב להיעשות בשני. הנפילה-לאחור אינה קישוט: היא מה שמצייר את
       הכרטיס נכון גם בעמוד שנשמר לפני שהכוונון נוסף. */
    inset: var(--ab-t, 21%) var(--ab-r, 18%) var(--ab-b, 22%) var(--ab-l, 22%);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 0 0.4rem 2.2rem; /* ׳¨׳™׳₪׳•׳“ ׳×׳—׳×׳•׳Ÿ -׳©׳”׳›׳₪׳×׳•׳¨׳™׳ ׳™׳©׳‘׳• ׳ž׳¢׳œ ׳׳–׳•׳¨ ׳”׳“׳”׳™׳™׳” */
    color: #3a2a15;
    /* ׳“׳”׳™׳™׳” ׳‘׳§׳¦׳” ׳”׳¢׳œ׳™׳•׳Ÿ/׳×׳—׳×׳•׳Ÿ -׳˜׳§׳¡׳˜ ׳ ׳’׳œ׳œ ׳ ׳ž׳•׳’ ׳׳œ ׳”׳§׳œ׳£ ׳‘׳ž׳§׳•׳ ׳œ׳”׳™׳—׳×׳š ׳¢׳œ׳™׳•.
       **׳”׳¨׳¦׳•׳¢׳” ׳”׳×׳—׳×׳•׳ ׳” ׳”׳™׳™׳×׳” 2% ׳‘׳œ׳‘׳“** (98%->100%) ׳•׳œ׳›׳Ÿ ׳”׳©׳•׳¨׳” ׳”׳׳—׳¨׳•׳ ׳” ׳ ׳¨׳׳×׳”
       ׳—׳×׳•׳›׳” ׳‘׳—׳“׳•׳×; ׳”׳™׳•׳ ׳”׳™׳ ׳ ׳₪׳¨׳¡׳× ׳¢׳œ ~12% ׳•׳‘׳›׳ž׳” ׳¢׳¦׳™׳¨׳•׳×, ׳›׳š ׳©׳”׳ ׳ž׳•׳’׳” ׳ž׳“׳•׳¨׳’׳×
       ׳•׳œ׳ ׳œ׳™׳ ׳™׳׳¨׳™׳× -׳–׳” ׳ž׳” ׳©׳’׳•׳¨׳ ׳œ׳” ׳œ׳”׳™׳¨׳׳•׳× ׳¨׳›׳” ׳•׳œ׳ ׳›׳ž׳• ׳§׳•. */
    --about-fade: linear-gradient(to bottom,
        transparent 0,
        rgba(0, 0, 0, 0.45) 2.5%,
        #000 7%,
        #000 82%,
        rgba(0, 0, 0, 0.75) 90%,
        rgba(0, 0, 0, 0.35) 96%,
        transparent 100%);
    -webkit-mask-image: var(--about-fade);
    mask-image: var(--about-fade);
    /* ׳¡׳¨׳’׳œ ׳’׳œ׳™׳œ׳” ׳ž׳¢׳•׳¦׳‘ (׳—׳•׳/׳–׳”׳‘, ׳ž׳×׳׳™׳ ׳œ׳§׳œ׳£) */
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 80, 26, 0.55) transparent;
    animation: about-content 0.7s ease-out 0.55s both;
}
@keyframes about-content {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .about-inner { animation: none; }
}
.about-inner::-webkit-scrollbar { width: 8px; }
.about-inner::-webkit-scrollbar-track { background: transparent; }
.about-inner::-webkit-scrollbar-thumb {
    background: rgba(120, 80, 26, 0.5); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}
.about-inner::-webkit-scrollbar-thumb:hover { background: rgba(120, 80, 26, 0.75); background-clip: padding-box; }

.about-portrait { width: clamp(8rem, 48%, 11rem); aspect-ratio: 700 / 579; margin-top: 0.9rem; margin-bottom: 0.15rem; }
.about-portrait img {
    width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(74, 47, 20, 0.4));
}
.about-greeting {
    font-family: var(--heading-font, 'Suez One'), serif;
    color: #8a5a1a;
    font-size: calc(clamp(0.95rem, 2.3vw, 1.2rem) * var(--ab-ts, 1.02) * var(--ab-sg, 1));
}
.about-name {
    font-family: var(--logo-font, 'Titan One'), 'Suez One', serif;
    font-size: calc(clamp(1.7rem, 5.2vw, 2.5rem) * var(--ab-ts, 1.02) * var(--ab-sn, 1));
    line-height: 1.05;
    background: linear-gradient(180deg, #a06e22 6%, #7a4f18 55%, #4a2f12 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 0 rgba(255, 250, 235, 0.5));
}
.about-role {
    color: #6b4a1e;
    font-size: calc(clamp(0.85rem, 1.9vw, 1.05rem) * var(--ab-ts, 1.02) * var(--ab-sr, 1));
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.about-text {
    color: #3a2a15;
    font-size: calc(clamp(0.82rem, 1.6vw, 0.95rem) * var(--ab-ts, 1.02));
    line-height: 1.55;
    margin-bottom: 0.5rem;
}
/* ׳’׳•׳£ ׳”׳¢׳¨׳™׳›׳” ׳”׳¢׳©׳™׳¨׳” (WYSIWYG) ׳©׳œ ׳”׳׳•׳“׳•׳× */
.about-body > *:first-child { margin-top: 0; }
.about-body p { margin: 0 0 0.5rem; }
.about-body h2, .about-body h3 { font-family: var(--heading-font, 'Suez One'), serif; color: #4a2f12; margin: 0.6rem 0 0.3rem; line-height: 1.2; }
.about-body h2 { font-size: 1.25em; } .about-body h3 { font-size: 1.1em; }
.about-body ul, .about-body ol { margin: 0 0 0.5rem; padding-inline-start: 1.3rem; text-align: start; }
.about-body li { margin-bottom: 0.2rem; }
.about-body a { color: #7a4f18; font-weight: 700; text-decoration: underline; }
.about-skills {
    list-style: none;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 0.35rem;
    margin: 0.6rem 0 0.9rem;
}
.about-skill {
    display: inline-flex; align-items: center; gap: 0.2rem;
    padding: 0.13rem 0.44rem;
    font-size: calc(0.63rem * var(--ab-ts, 1.02)); font-weight: 700;
    color: #4a2f14;
    background: rgba(120, 80, 26, 0.14);
    border: 1px solid rgba(120, 80, 26, 0.4);
    border-radius: 999px;
}
.about-skill-icon { font-size: 0.74rem; }
/* ‎gap‎ נדיב יותר (בקשת המשתמש): בשני כפתורים באותו גודל, ‎0.45rem‎ נקרא
   כרכיב אחד מפוצל ולא כשתי פעולות נפרדות. */
.about-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; padding-bottom: 0.3rem; }

/* ==== ׳¢׳ž׳•׳“׳™ CMS (׳×׳•׳›׳Ÿ ׳©׳ ׳•׳¦׳¨ ׳‘׳ ׳™׳”׳•׳œ) ==== */
/* flex:1 (׳›׳ž׳• ׳¢׳ž׳•׳“ ׳”׳‘׳™׳×) -׳”׳₪׳•׳˜׳¨ ׳ ׳›׳ ׳¡ ׳œ׳ž׳¡׳š ׳׳—׳“ ׳‘׳“׳¡׳§׳˜׳•׳₪. (׳‘׳ž׳•׳‘׳™׳™׳œ min-height ׳ ׳“׳¨׳¡ ׳œ׳”׳¦׳¦׳”.) */
.cms-page {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(1.2rem, 5vh, 3.5rem) 1rem;
}
.cms-card {
    position: relative;
    width: min(52rem, 94vw);
    padding: clamp(1.4rem, 4vw, 2.8rem);
    border-radius: 18px;
    box-shadow: 0 18px 46px rgba(6, 20, 40, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    animation: hero-pop 0.7s cubic-bezier(0.2, 1.35, 0.4, 1) both;
}
/* ׳©׳›׳‘׳× ׳”׳¨׳§׳¢ ׳©׳œ ׳”׳›׳¨׳˜׳™׳¡ -׳ ׳•׳©׳׳× ׳׳× ׳ž׳™׳œ׳•׳™ ׳”׳×׳‘׳ ׳™׳× ׳•׳׳× ׳¨׳ž׳× ׳”׳©׳§׳™׳₪׳•׳× (--cms-bg-opacity),
   ׳›׳š ׳©׳”׳×׳•׳›׳Ÿ ׳ ׳©׳׳¨ ׳׳˜׳•׳ ׳•׳”׳¨׳§׳¢ ׳‘׳œ׳‘׳“ ׳ž׳©׳×׳§׳£ */
.cms-bglayer {
    position: absolute; inset: 0; z-index: 0;
    border-radius: inherit; overflow: hidden; pointer-events: none;
    opacity: var(--cms-bg-opacity, 1);
}
/* ׳”׳×׳•׳›׳Ÿ ׳ž׳¢׳œ ׳©׳›׳‘׳× ׳”׳¨׳§׳¢ (׳‘׳×׳‘׳ ׳™׳•׳× ׳©׳׳™׳ ׳Ÿ ׳§׳œ׳£/׳ž׳’׳™׳œ׳” -׳‘׳–׳¨׳™׳ž׳” ׳¨׳’׳™׳œ׳”).
   ׳—׳•׳‘׳” ׳œ׳”׳—׳¨׳™׳’ ׳’׳ ׳׳× ׳×׳‘׳ ׳™׳•׳× ׳”׳ž׳’׳™׳œ׳”, ׳׳—׳¨׳× ׳”-inner ׳©׳œ׳”׳Ÿ ׳”׳•׳₪׳š ׳œ-position:relative
   ׳•׳”-inset (׳ž׳™׳§׳•׳ ׳¢׳œ ׳©׳˜׳— ׳”׳§׳œ׳£ ׳”׳ ׳§׳™) ׳œ׳ ׳—׳œ -> ׳”׳˜׳§׳¡׳˜ ׳—׳•׳¨׳’ ׳ž׳”׳ž׳’׳™׳œ׳”. */
.cms-page:not(.cms-bg-parchment):not(.cms-bg-document01):not(.cms-bg-document02):not(.cms-bg-document03) .cms-title,
.cms-page:not(.cms-bg-parchment):not(.cms-bg-document01):not(.cms-bg-document02):not(.cms-bg-document03) .cms-inner { position: relative; z-index: 1; }
.cms-title {
    /* ׳›׳•׳×׳¨׳× ׳”׳¢׳ž׳•׳“ ׳”׳™׳ **׳›׳•׳×׳¨׳×**: ׳ ׳’׳–׳¨׳× ׳ž׳’׳•׳₪׳Ÿ ׳”׳›׳•׳×׳¨׳•׳× ׳•׳œ׳ ׳ž׳’׳•׳₪׳Ÿ ׳”׳œ׳•׳’׳•.
       ׳§׳•׳“׳ ׳”׳™׳ ׳™׳©׳‘׳” ׳¢׳œ --logo-font, ׳•׳œ׳›׳Ÿ "׳’׳•׳₪׳Ÿ ׳”׳›׳•׳×׳¨׳•׳× ׳”׳¨׳׳©׳™׳•׳×" ׳œ׳ ׳©׳™׳ ׳” ׳׳•׳×׳”. */
    /* ‎--page-title-font‎ נפלט רק כשנבחר גופן ייעודי לכותרת העמוד; אחרת
       הנפילה-לאחור היא גופן הכותרות, כלומר ההתנהגות שהייתה כאן תמיד. */
    font-family: var(--page-title-font, var(--heading-font, 'Suez One')), serif;
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    line-height: 1.1; margin-bottom: 1rem;
}
.cms-content { font-size: clamp(1rem, 1.9vw, 1.12rem); line-height: 1.75; }
.cms-content h1 { font-size: 1.9em; margin: 1.2rem 0 0.6rem; font-family: var(--heading-font, 'Suez One'), serif; line-height: 1.15; }
.cms-content h2 { font-size: 1.5em; margin: 1.2rem 0 0.5rem; font-family: var(--heading-font, 'Suez One'), serif; }
.cms-content h3 { font-size: 1.25em; margin: 1rem 0 0.4rem; font-family: var(--heading-font, 'Suez One'), serif; }
.cms-content h4 { font-size: 1.1em; margin: 0.9rem 0 0.35rem; font-family: var(--heading-font, 'Suez One'), serif; }
.cms-content h5 { font-size: 0.98em; margin: 0.8rem 0 0.3rem; font-weight: 800; }
.cms-content h6 { font-size: 0.88em; margin: 0.7rem 0 0.3rem; font-weight: 800; letter-spacing: 0.02em; opacity: 0.85; }
.cms-content p { margin: 0 0 0.9rem; }
.cms-content ul, .cms-content ol { margin: 0 0 0.9rem; padding-inline-start: 1.4rem; }
.cms-content li { margin-bottom: 0.3rem; }
.cms-content a { color: var(--c-gold-deep); font-weight: 700; text-decoration: underline; }
/* ‎<code>‎ בתוך תוכן עמוד -שם קובץ או דומיין בתוך משפט עברי. ‎unicode-bidi‎
   חובה: ‎direction‎ לבדו אינו מספיק על אלמנט inline, וה-bidi הופך את סדר
   המקטעים (חוק מתועד בפרויקט). */
.cms-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.86em;
    background: rgba(122, 82, 34, 0.12);
    border-radius: 4px;
    padding: 0.05em 0.3em;
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}
.cms-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 0.5rem 0; display: inline-block; }
.cms-content img.cms-w25 { width: 25%; } .cms-content img.cms-w50 { width: 50%; }
.cms-content img.cms-w75 { width: 75%; } .cms-content img.cms-w100 { width: 100%; }
.cms-content img.cms-center { display: block; margin-inline: auto; }
/* ׳ž׳¡׳’׳¨׳•׳× ׳œ׳×׳ž׳•׳ ׳” (׳¡׳¨׳’׳œ ׳¢׳™׳¦׳•׳‘ ׳”׳×׳ž׳•׳ ׳” ׳‘׳¢׳•׳¨׳š; ׳”׳¢׳•׳‘׳™/׳”׳¦׳‘׳¢/׳”׳¢׳™׳’׳•׳œ ׳ ׳©׳ž׳¨׳™׳ ׳›-inline
   ׳•׳œ׳›׳Ÿ ׳’׳•׳‘׳¨׳™׳ ׳¢׳œ ׳”׳¢׳¨׳›׳” ׳”׳ž׳•׳›׳ ׳”). **׳—׳™׳™׳‘ ׳œ׳—׳•׳œ ׳¢׳œ ׳›׳œ ׳”׳”׳§׳©׳¨׳™׳** -׳¢׳ž׳•׳“ CMS, ׳©׳œ׳•׳©׳×
   ׳”׳¢׳•׳¨׳›׳™׳ ׳•׳›׳¨׳˜׳™׳¡ ׳”׳₪׳¨׳•׳™׳§׳˜ -׳׳—׳¨׳× ׳”׳ž׳¡׳’׳¨׳× ׳ ׳¨׳׳™׳× ׳‘׳¢׳•׳¨׳š ׳•׳ ׳¢׳œ׳ž׳× ׳‘׳׳×׳¨, ׳׳• ׳œ׳”׳₪׳š. */
/* ג€Ž.pf-gal-stage/.pf-gal-oneג€Ž ׳‘׳¨׳©׳™׳ž׳” ׳›׳“׳™ ׳©׳”׳ž׳¡׳’׳¨׳× ׳©׳ ׳‘׳—׳¨׳” **׳œ׳×׳ž׳•׳ ׳”** ׳‘׳¢׳•׳¨׳š ׳×׳¢׳‘׳•׳¨
   ׳׳œ **׳”׳‘׳ž׳”** ׳›׳©׳”׳×׳™׳׳•׳¨ ׳”׳•׳₪׳š ׳œ׳’׳œ׳¨׳™׳”. ׳”׳Ÿ ׳—׳•׳œ׳§׳•׳× ׳׳× ׳׳•׳×׳ ׳›׳œ׳œ׳™׳ ׳•׳œ׳ ׳ž׳¢׳×׳™׳§׳•׳× ׳׳×
   ׳¢׳¨׳›׳™ ׳”׳’׳‘׳•׳œ, ׳׳—׳¨׳× ׳”׳©׳ ׳™׳™׳ ׳”׳™׳• ׳ž׳×׳₪׳¦׳œ׳™׳ ׳‘׳©׳™׳ ׳•׳™ ׳”׳‘׳. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) img.imgf-gold,
.pf-gal-stage.imgf-gold, .pf-gal-one.imgf-gold   { border: 4px solid var(--c-gold-deep); box-shadow: 0 0 0 1px var(--c-gold-light), 0 4px 12px rgba(6,20,40,0.3); }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) img.imgf-wood,
.pf-gal-stage.imgf-wood, .pf-gal-one.imgf-wood   { border: 5px solid #5f3c1a; box-shadow: 0 4px 12px rgba(6,20,40,0.3); }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) img.imgf-white,
.pf-gal-stage.imgf-white, .pf-gal-one.imgf-white  { border: 5px solid #fff; box-shadow: 0 5px 16px rgba(6,20,40,0.4); }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) img.imgf-dark,
.pf-gal-stage.imgf-dark, .pf-gal-one.imgf-dark   { border: 4px solid #1a2540; box-shadow: 0 4px 12px rgba(6,20,40,0.35); }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) img.imgf-shadow,
.pf-gal-stage.imgf-shadow, .pf-gal-one.imgf-shadow { box-shadow: 0 6px 18px rgba(6,20,40,0.45); }
/* ---- ׳ž׳¡׳›׳•׳× ׳œ׳×׳ž׳•׳ ׳” (ג€Žimgm-*ג€Ž) ----
   ׳ ׳‘׳—׳¨׳•׳× ׳ž׳×׳₪׳¨׳™׳˜ ׳”׳§׳œ׳™׳§-׳™׳ž׳ ׳™ ג† "׳ž׳¡׳’׳¨׳×, ׳¢׳™׳’׳•׳œ ׳•׳ž׳¡׳›׳”". **׳—׳™׳™׳‘׳•׳× ׳œ׳—׳•׳œ ׳‘׳›׳œ ׳”׳”׳§׳©׳¨׳™׳**
   ׳›׳ž׳• ׳”׳ž׳¡׳’׳¨׳•׳× -׳׳—׳¨׳× ׳”׳¦׳•׳¨׳” ׳ ׳¨׳׳™׳× ׳‘׳¢׳•׳¨׳š ׳•׳ ׳¢׳œ׳ž׳× ׳‘׳׳×׳¨.

   ג€Žclip-pathג€Ž ׳•׳œ׳ ג€Žmask-imageג€Ž: ׳”׳•׳ ׳ ׳×׳ž׳š ׳¨׳—׳‘ ׳™׳•׳×׳¨, ׳œ׳ ׳“׳•׳¨׳© ׳ ׳›׳¡ ׳—׳™׳¦׳•׳ ׳™, ׳•׳ ׳©׳׳¨ ׳—׳“
   ׳‘׳›׳œ ׳’׳•׳“׳œ. **׳ž׳¡׳›׳” ׳’׳•׳–׳¨׳× ׳׳× ׳”׳×׳ž׳•׳ ׳” ׳•׳œ׳›׳Ÿ ׳ž׳¡׳’׳¨׳× ׳•׳¢׳™׳’׳•׳œ ׳₪׳™׳ ׳•׳× ׳׳™׳ ׳ ׳ ׳¨׳׳™׳ ׳¢׳œ׳™׳”** -
   ׳”׳ ׳ž׳¦׳•׳™׳¨׳™׳ ׳ž׳—׳•׳¥ ׳œ׳׳–׳•׳¨ ׳”׳’׳–׳™׳¨׳”. ׳”׳“׳™׳׳œ׳•׳’ ׳׳•׳ž׳¨ ׳׳× ׳–׳” ׳‘׳ž׳₪׳•׳¨׳© ׳‘׳ž׳§׳•׳ ׳œ׳”׳©׳׳™׳¨ ׳׳×
   ׳”׳ž׳©׳×׳ž׳© ׳œ׳’׳œ׳•׳× ׳©׳”׳”׳’׳“׳¨׳” "׳œ׳ ׳¢׳•׳‘׳“׳×". */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) img[class*="imgm-"],
.pf-gal img[class*="imgm-"] { border: 0 !important; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text, .pf-gal) img.imgm-circle  { clip-path: circle(50%); }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text, .pf-gal) img.imgm-hex     { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text, .pf-gal) img.imgm-shield  { clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 50% 100%, 0% 60%); }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text, .pf-gal) img.imgm-diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text, .pf-gal) img.imgm-star    { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text, .pf-gal) img.imgm-wave    { clip-path: polygon(0% 0%, 100% 0%, 100% 86%, 75% 100%, 50% 86%, 25% 100%, 0% 86%); }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text, .pf-gal) img.imgm-notch   { clip-path: polygon(14% 0%, 86% 0%, 100% 14%, 100% 86%, 86% 100%, 14% 100%, 0% 86%, 0% 14%); }
/* ׳§׳©׳× ׳•׳¢-׳œ׳” ׳ ׳‘׳ ׳•׳× ׳‘-ג€Žborder-radiusג€Ž ׳•׳œ׳ ׳‘-ג€Žclip-pathג€Ž: ׳¢׳§׳•׳ž׳” ׳—׳œ׳§׳” ׳׳™׳ ׳” ׳ ׳™׳×׳ ׳×
   ׳œ׳×׳™׳׳•׳¨ ׳‘׳₪׳•׳œ׳™׳’׳•׳Ÿ ׳‘׳œ׳™ ׳¢׳©׳¨׳•׳× ׳ ׳§׳•׳“׳•׳×, ׳•׳›׳׳Ÿ ׳“׳™ ׳‘׳©׳×׳™ ׳₪׳™׳ ׳•׳×. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text, .pf-gal) img.imgm-arch    { border-radius: 50% 50% 8px 8px / 38% 38% 8px 8px !important; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text, .pf-gal) img.imgm-leaf    { border-radius: 56% 8px 56% 8px !important; }
/* ---- ׳œ׳‘ ׳•-fade: ג€Žmask-imageג€Ž ׳•׳œ׳ ג€Žclip-pathג€Ž ----
   ׳œ-ג€Žclip-path: path()ג€Ž ׳™׳© ׳§׳•׳׳•׳¨׳“׳™׳ ׳˜׳•׳× **׳ž׳•׳—׳œ׳˜׳•׳×**, ׳•׳œ׳›׳Ÿ ׳”׳•׳ ׳ ׳©׳‘׳¨ ׳‘׳›׳œ ׳’׳•׳“׳œ ׳׳—׳¨.
   ג€Žmask-imageג€Ž ׳¢׳ SVG ׳ž׳•׳˜׳ž׳¢ ׳•-ג€Žmask-size: 100% 100%ג€Ž ׳ ׳ž׳×׳— ׳œ׳›׳œ ׳ž׳™׳“׳”, ׳•-fade ׳”׳•׳
   ׳‘׳›׳œ׳œ ׳’׳¨׳“׳™׳׳ ׳˜ -׳©׳ ׳“׳¢׳™׳›׳” ׳¨׳›׳” ׳‘׳œ׳×׳™ ׳׳₪׳©׳¨׳™׳× ׳‘׳₪׳•׳œ׳™׳’׳•׳Ÿ. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text, .pf-gal) img.imgm-heart {
    --pf-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M50 92C22 70 4 50 4 31 4 15 16 6 28 6c9 0 17 5 22 13 5-8 13-13 22-13 12 0 28 9 28 25 0 19-18 39-50 61z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-image: var(--pf-heart); mask-image: var(--pf-heart);
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* ׳“׳¢׳™׳›׳” ׳¨׳›׳” ׳‘׳§׳¦׳•׳•׳× -"׳×׳ž׳•׳ ׳” ׳©׳ž׳×׳ž׳–׳’׳× ׳‘׳¨׳§׳¢" ׳•׳œ׳ ׳¦׳•׳¨׳” ׳—׳×׳•׳›׳” */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text, .pf-gal) img.imgm-fade {
    --pf-fade: radial-gradient(ellipse 78% 78% at 50% 50%, #000 52%, rgba(0,0,0,0.55) 76%, transparent 100%);
    -webkit-mask-image: var(--pf-fade); mask-image: var(--pf-fade);
}

/* ---- מיכל של תמונה ממוסכת אינו מצייר מאחוריה ----
   **מסכה גוזרת את התמונה מהעמוד; היא אינה חלון אל קופסה.** כל מיכל שמצייר
   רקע, מסגרת או צל ממשיך לצייר אותם בדיוק באזור שהמסכה הסירה, ואז במקום
   שקוף רואים את הקופסה. נמדד באריח הגלריה: ‎.works-thumb‎ נושא
   ‎background: rgba(8, 20, 40, 0.35)‎, ועל עמוד בהיר זה בדיוק האפור שדווח.

   **בעורך עצמו זה מעולם לא נראה** -שם התמונה יושבת בפסקה בלי מיכל- ולכן
   בדיקה שנעשתה שם יצאה נקייה. אותו כלל חל גם על במת הגלריה שבכרטיס
   הפרויקט (‎.pf-gal-stage‎), שהרקע שלה הוא גרדיאנט כהה.

   ‎:has()‎ נתמך בכל דפדפן מודרני וכבר בשימוש בפרויקט. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-thumb:has(img[class*="imgm-"]),
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-item:has(img[class*="imgm-"]),
.pf-gal-stage:has(img[class*="imgm-"]),
.pf-gal-one:has(img[class*="imgm-"]) {
    background: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
/* ‎overflow: hidden‎ + ‎border-radius‎ על המיכל גוזרים את קצוות הצורה, ולכן
   הם יורדים יחד עם הרקע -אחרת הלב נחתך בפינות הקופסה. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-thumb:has(img[class*="imgm-"]),
.pf-gal-stage:has(img[class*="imgm-"]) { border-radius: 0; overflow: visible; }


/* ׳ž׳¡׳’׳¨׳× ׳©׳ ׳§׳‘׳¢׳” ׳™׳“׳ ׳™׳× (׳¢׳•׳‘׳™/׳¦׳‘׳¢) -׳׳•׳×׳• ׳˜׳™׳₪׳•׳œ, ׳›׳•׳œ׳œ ׳—׳™׳©׳•׳‘ ׳”׳¨׳•׳—׳‘ ׳¢׳ ׳”׳ž׳¡׳’׳¨׳× */
/* ---- מעבר עכבר על תמונה ("imgh-*") ----
   נבחר מתפריט הקליק-ימני. **חייב להיות מוגדר בכל ההקשרים** כמו המסגרות
   והמסכות, אחרת האפקט נראה בעורך ונעלם באתר.

   ‎@media (hover: hover)‎: במגע אין ריחוף, ומצב שנתקע "מוגדל" אחרי נגיעה
   נקרא כתקלה -אותו כלל שכבר נקנה כאן בכיתוב של גלריית העבודות.
   ‎transform‎ ו-‎filter‎ בלבד: שניהם פנויים על התמונה, ואינם מתנגשים
   ב-‎clip-path‎ של המסכה או בגבול של המסגרת. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) img[class*="imgh-"] {
    transition: transform 0.28s ease, filter 0.28s ease, box-shadow 0.28s ease, opacity 0.28s ease;
}
@media (hover: hover) {
    :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) img.imgh-zoom:hover   { transform: scale(1.06); }
    :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) img.imgh-lift:hover   { transform: translateY(-6px); box-shadow: 0 14px 28px -12px rgba(2, 8, 22, 0.75); }
    :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) img.imgh-tilt:hover   { transform: perspective(700px) rotateX(5deg) rotateY(-5deg) translateY(-4px); }
    :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) img.imgh-bright       { filter: brightness(0.88); }
    :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) img.imgh-bright:hover { filter: brightness(1.06); }
    :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) img.imgh-glow:hover   { filter: drop-shadow(0 0 10px rgba(255, 209, 90, 0.75)); }
    :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) img.imgh-color        { filter: grayscale(1); }
    :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) img.imgh-color:hover  { filter: grayscale(0); }
}
/* מי שביקש צמצום תנועה מקבל את שינוי הצבע/הבהירות בלבד -הם אינם תנועה */
@media (prefers-reduced-motion: reduce) {
    :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) img[class*="imgh-"] { transition: filter 0.2s ease; }
    :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) img.imgh-zoom:hover,
    :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) img.imgh-lift:hover,
    :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) img.imgh-tilt:hover { transform: none; }
}

:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) img[style*="border-width"] { border-style: solid; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) img { box-sizing: border-box; }
.cms-content img.cms-imgr { float: right; margin: 0.2rem 0 0.6rem 0.9rem; }
.cms-content img.cms-imgl { float: left;  margin: 0.2rem 0.9rem 0.6rem 0; }
.cms-content::after { content: ''; display: block; clear: both; } /* ׳”׳›׳œ׳× floats ׳©׳œ ׳×׳ž׳•׳ ׳•׳× */

/* --- ׳›׳₪׳×׳•׳¨׳™ CTA ׳‘׳×׳•׳š ׳×׳•׳›׳Ÿ CMS (׳ ׳©׳ž׳¨׳™׳ ׳›-<a class="cms-btn">) --- */
:is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.5rem 1rem; margin: 0.2rem 0.25rem;
    border-radius: 11px; font-weight: 700; font-size: 0.95rem; text-decoration: none;
    color: var(--c-wood-deep);
    background: linear-gradient(180deg, var(--c-gold-light), var(--c-gold) 55%, var(--c-gold-deep));
    box-shadow: 0 3px 0 var(--c-gold-deep), 0 6px 14px rgba(13, 62, 120, 0.3), inset 0 1px 0 #fff;
    transition: transform 0.15s, filter 0.2s;
}
:is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-btn:hover { filter: brightness(1.08) saturate(1.05); transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 0 var(--c-gold-deep), 0 12px 22px rgba(13, 62, 120, 0.4), inset 0 1px 0 #fff; }
:is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-btn:active { transform: translateY(1px) scale(0.99); box-shadow: 0 1px 0 var(--c-gold-deep); }
:is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-btn:focus-visible { outline: 3px solid rgba(255, 209, 90, 0.6); outline-offset: 2px; }
:is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-btn.cms-btn-2 {
    color: #eef5ff;
    background: linear-gradient(180deg, #2a6bb0, #144a8a 60%, #0d2f5e);
    box-shadow: 0 3px 0 #0d2f5e, 0 6px 14px rgba(13, 62, 120, 0.3), inset 0 1px 0 rgba(255,255,255,0.3);
}
:is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-btn.cms-btn-wood {
    color: #f7ecd8;
    background: linear-gradient(180deg, #8a5a2c, #5f3c1a 60%, #3f2810);
    box-shadow: 0 3px 0 #3f2810, 0 6px 14px rgba(13, 62, 120, 0.28), inset 0 1px 0 rgba(255,231,163,0.4);
}
:is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-btn.cms-btn-green {
    color: #eafff0;
    background: linear-gradient(180deg, #3fae62, #2b8a49 60%, #1c5f32);
    box-shadow: 0 3px 0 #1c5f32, 0 6px 14px rgba(13, 62, 120, 0.28), inset 0 1px 0 rgba(255,255,255,0.3);
}
:is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-btn.cms-btn-red {
    color: #fff0ec;
    background: linear-gradient(180deg, #d9573f, #b23a26 60%, #7f2415);
    box-shadow: 0 3px 0 #7f2415, 0 6px 14px rgba(13, 62, 120, 0.28), inset 0 1px 0 rgba(255,255,255,0.28);
}
:is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-btn.cms-btn-ghost {
    color: var(--c-gold-deep);
    background: rgba(255, 246, 230, 0.15);
    border: 2px solid var(--c-gold-deep);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.cms-bg-blue :is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-btn.cms-btn-ghost,
.cms-bg-night :is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-btn.cms-btn-ghost,
.cms-bg-wood :is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-btn.cms-btn-ghost { color: var(--c-gold-light); border-color: var(--c-gold-light); }

/* הכפתורים כאן מגיעים ממאגר הכפתורים ונושאים ‎cms-btn‎ כמו בכל מקום אחר;
   מה שמשתנה הוא הגודל בלבד -כרטיס האודות קומפקטי, וכפתור בגודל של תוכן
   עמוד היה בולע אותו. הערכה עצמה אחת, ולכן היא אינה יכולה להתפצל. */
.about-actions .cms-btn {
    padding: 0.34rem 0.72rem; margin: 0;
    border-radius: 9px; font-size: 0.78rem;
}
.about-actions .cms-btn:hover { transform: translateY(-1px) scale(1.01); }
/* --- ׳×׳’׳™ ׳”׳×׳—׳•׳ž׳™-׳”׳×׳ž׳—׳•׳× ׳‘׳×׳•׳š CMS (icon + text) --- */
:is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin: 0.6rem 0 1rem; padding: 0; list-style: none; }
:is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.24rem 0.7rem; font-size: 0.85rem; font-weight: 700;
    color: #4a2f14; background: rgba(120, 80, 26, 0.14);
    border: 1px solid rgba(120, 80, 26, 0.4); border-radius: 999px;
}
.cms-bg-blue :is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-chip, .cms-bg-night :is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-chip, .cms-bg-wood :is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-chip {
    color: #f7ecd8; background: rgba(255, 231, 163, 0.14); border-color: rgba(255, 231, 163, 0.4);
}
:is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-chip-i { font-size: 1.05em; }

/* --- ׳˜׳‘׳œ׳׳•׳× ׳‘׳×׳•׳›׳Ÿ CMS (׳ž׳’׳•׳•׳Ÿ ׳¢׳™׳¦׳•׳‘׳™׳) --- */
:is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-table {
    width: 100%; border-collapse: collapse; margin: 0.8rem 0;
    font-size: 0.95em; line-height: 1.5;
}
:is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-table th, :is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-table td {
    padding: 0.5rem 0.7rem; text-align: start; vertical-align: top;
}
:is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-table th { font-weight: 800; }
/* ׳–׳”׳‘ (׳‘׳¨׳™׳¨׳× ׳ž׳—׳“׳œ) */
:is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-table-gold th {
    background: linear-gradient(180deg, var(--c-gold), var(--c-gold-deep));
    color: var(--c-wood-deep); border: 1px solid var(--c-gold-deep);
}
:is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-table-gold td { border: 1px solid rgba(211, 154, 26, 0.5); }
/* ׳₪׳¡׳™׳ */
:is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-table-striped th { background: rgba(211, 154, 26, 0.28); border-bottom: 2px solid var(--c-gold-deep); }
:is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-table-striped tbody tr:nth-child(odd) td { background: rgba(211, 154, 26, 0.10); }
:is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-table-striped td { border-bottom: 1px solid rgba(211, 154, 26, 0.3); }
/* ׳ž׳¡׳’׳¨׳× ׳ž׳œ׳׳” */
:is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-table-bordered th, :is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-table-bordered td { border: 2px solid rgba(211, 154, 26, 0.55); }
:is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-table-bordered th { background: rgba(211, 154, 26, 0.22); }
/* ׳ž׳™׳ ׳™׳ž׳œ׳™ */
:is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-table-minimal th { border-bottom: 2px solid currentColor; }
:is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-table-minimal td { border-bottom: 1px solid rgba(128, 128, 128, 0.35); }
/* ׳”׳×׳׳ž׳× ׳’׳‘׳•׳œ׳•׳× ׳œ׳¨׳§׳¢׳™׳ ׳›׳”׳™׳ */
.cms-bg-blue :is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-table td, .cms-bg-night :is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-table td, .cms-bg-wood :is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-table td { border-color: rgba(255, 231, 163, 0.35); }
.cms-bg-blue :is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-table-striped tbody tr:nth-child(odd) td,
.cms-bg-night :is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-table-striped tbody tr:nth-child(odd) td,
.cms-bg-wood :is(.cms-content, .pf-rte-ed, .pf-detail-text, .about-actions, .cms-actions, .pf-hidden-card) .cms-table-striped tbody tr:nth-child(odd) td { background: rgba(255, 231, 163, 0.10); }
/* ׳‘׳¢׳•׳¨׳š -׳¨׳ž׳– ׳•׳™׳–׳•׳׳œ׳™ ׳©׳”׳×׳׳™׳ ׳ ׳™׳×׳ ׳™׳ ׳œ׳¢׳¨׳™׳›׳” */
.wysiwyg-editor .cms-table td:empty::after, .wysiwyg-editor .cms-table th:empty::after { content: '\00a0'; }

/* --- ׳×׳‘׳ ׳™׳•׳× ׳¨׳§׳¢ --- */
/* ==== ׳×׳‘׳ ׳™׳•׳× ׳§׳œ׳£/׳ž׳’׳™׳œ׳”: ׳§׳œ׳£ + document01/02/03 -׳׳•׳×׳” ׳₪׳¨׳™׳¡׳” ׳‘׳“׳™׳•׳§ (׳›׳ž׳• ׳§׳œ׳£ ׳”׳׳•׳“׳•׳×),
   ׳¨׳§ ׳×׳ž׳•׳ ׳× ׳ž׳’׳™׳œ׳” ׳©׳•׳ ׳”. ׳”׳×׳ž׳•׳ ׳” ׳•׳”׳™׳—׳¡ ׳œ׳›׳œ ׳×׳‘׳ ׳™׳× ׳“׳¨׳š ׳ž׳©׳×׳ ׳™ CSS. ==== */
.cms-bg-parchment  { --doc-img: url('/images/parchment.webp');       --doc-ar: 700 / 894; }
.cms-bg-document01 { --doc-img: url('/images/scene/document01.webp'); --doc-ar: 900 / 1143; }
.cms-bg-document02 { --doc-img: url('/images/scene/document02.webp'); --doc-ar: 900 / 1149; }
.cms-bg-document03 { --doc-img: url('/images/scene/document03.webp'); --doc-ar: 900 / 1099; }

/* ׳™׳™׳©׳•׳¨ ׳œ׳¨׳׳© (flex-start) ׳‘׳ž׳§׳•׳ ׳ž׳¨׳›׳•׳– -׳›׳“׳™ ׳©׳”׳§׳œ׳£ ׳™׳™׳©׳‘ ׳’׳‘׳•׳” */
.cms-page.cms-bg-parchment,
.cms-page.cms-bg-document01,
.cms-page.cms-bg-document02,
.cms-page.cms-bg-document03 { align-items: flex-start; padding: clamp(0.6rem, 2vh, 1.6rem) 1rem; }

.cms-bg-parchment .cms-card,
.cms-bg-document01 .cms-card,
.cms-bg-document02 .cms-card,
.cms-bg-document03 .cms-card {
    position: relative;
    /* ‎96.5vw‎ ולא ‎94vw‎: במובייל **הרוחב** הוא שקובע (נמדד 89% מהמסך ב-390
       וב-430), ובאנכי נשארו שם 227px פנויים עד הפוטר -כלומר כל מה שהיה
       חסר לצדדים היה התקרה הזאת. */
    width: min(calc(min(30rem, 99vw, 82vh) * var(--card-scale-mobile, 1)), 99vw, 78vh);
    aspect-ratio: var(--doc-ar, 700 / 894);
    border: none; border-radius: 0;
    box-shadow: none;
    padding: 0;
    color: #3a2a15;
    animation: about-reveal 1.15s cubic-bezier(0.18, 1.25, 0.35, 1) both;
}
/* ׳ž׳—׳©׳‘/׳˜׳׳‘׳œ׳˜ (׳ž׳¢׳œ ׳ž׳•׳‘׳™׳™׳œ): ׳”׳§׳œ׳£ ׳’׳“׳•׳œ ׳™׳•׳×׳¨ ׳•׳ž׳ž׳•׳¨׳›׳– ׳׳ ׳›׳™׳× ׳‘׳׳ž׳¦׳¢ ׳”׳ž׳¡׳š.
   ׳‘׳ž׳•׳‘׳™׳™׳œ (ג‰₪640px) ׳ ׳©׳׳¨ ׳ž׳“׳•׳™׳§ ׳›׳₪׳™ ׳©׳”׳•׳ -׳œ׳ ׳ ׳•׳’׳¢׳™׳ ׳‘׳•. ׳—׳™׳™׳‘ ׳œ׳‘׳•׳ *׳׳—׳¨׳™* ׳›׳œ׳œ ׳”׳‘׳¡׳™׳¡
   ׳©׳œ ׳”׳¨׳•׳—׳‘ (׳׳•׳×׳” ׳¡׳₪׳¦׳™׳₪׳™׳•׳×) ׳›׳“׳™ ׳œ׳’׳‘׳•׳¨ ׳¢׳œ׳™׳•. */
@media (min-width: 641px) {
    .cms-page.cms-bg-parchment,
    .cms-page.cms-bg-document01,
    .cms-page.cms-bg-document02,
    .cms-page.cms-bg-document03 { align-items: center; }
    .cms-bg-parchment .cms-card,
    .cms-bg-document01 .cms-card,
    .cms-bg-document02 .cms-card,
    .cms-bg-document03 .cms-card { width: min(calc(min(52rem, 94vw, 70vh) * var(--card-scale-desktop, 1)), 94vw, 71vh); }
}
/* ׳×׳ž׳•׳ ׳× ׳”׳ž׳’׳™׳œ׳” ׳¢׳œ ׳©׳›׳‘׳× ׳”׳¨׳§׳¢ (׳¢׳ ׳”׳©׳§׳™׳₪׳•׳× ׳•׳”׳¦׳œ) */
.cms-bg-parchment .cms-bglayer,
.cms-bg-document01 .cms-bglayer,
.cms-bg-document02 .cms-bglayer,
.cms-bg-document03 .cms-bglayer {
    background: var(--doc-img) center / 100% 100% no-repeat;
    filter: drop-shadow(0 16px 34px rgba(6, 20, 40, 0.45));
    overflow: visible;
}
/* ׳”׳‘׳–׳§-׳§׳¡׳ ׳¢׳œ ׳¦׳•׳¨׳× ׳”׳ž׳’׳™׳œ׳” -׳ž׳¢׳œ ׳©׳›׳‘׳× ׳”׳¨׳§׳¢ */
.cms-bg-parchment .cms-card::before,
.cms-bg-document01 .cms-card::before,
.cms-bg-document02 .cms-card::before,
.cms-bg-document03 .cms-card::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.55) 50%, transparent 58%);
    background-size: 250% 100%;
    -webkit-mask: var(--doc-img) center / 100% 100% no-repeat;
    mask: var(--doc-img) center / 100% 100% no-repeat;
    animation: about-shimmer 1.5s ease-out 0.35s both;
}
/* ׳׳–׳•׳¨ ׳”׳×׳•׳›׳Ÿ ׳”׳₪׳ ׳™׳ž׳™ -׳™׳•׳©׳‘ ׳¢׳œ ׳©׳˜׳— ׳”׳ž׳’׳™׳œ׳” ׳”׳ ׳§׳™ ׳‘׳™׳Ÿ ׳”׳§׳™׳©׳•׳˜׳™׳, ׳•׳’׳•׳œ׳œ ׳׳ ׳”׳×׳•׳›׳Ÿ ׳׳¨׳•׳š */
.cms-bg-parchment .cms-inner,
.cms-bg-document01 .cms-inner,
.cms-bg-document02 .cms-inner,
.cms-bg-document03 .cms-inner {
    position: absolute;
    /* ׳™׳ž׳™׳Ÿ 11% (׳‘׳ž׳§׳•׳ 16%) -׳ž׳–׳™׳– ׳׳× ׳₪׳¡ ׳”׳’׳œ׳™׳œ׳” (׳‘-iOS ׳×׳ž׳™׳“ ׳‘׳§׳¦׳” ׳”׳™׳ž׳ ׳™) ׳™׳ž׳™׳ ׳” ׳׳œ ׳©׳•׳œ׳™
       ׳”׳ž׳’׳™׳œ׳”; ׳¨׳™׳₪׳•׳“ ׳™׳ž׳ ׳™ 1.4rem ׳ž׳¨׳—׳™׳§ ׳׳× ׳×׳—׳™׳œ׳× ׳”׳˜׳§׳¡׳˜ ׳”-RTL ׳ž׳”׳₪׳¡ -> ׳‘׳œ׳™ ׳—׳₪׳™׳₪׳”. */
    inset: 22% 11% 21% 16%;
    overflow-y: auto; overflow-x: hidden;
    padding: 0 1.4rem 1rem 0.4rem;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 98%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 98%, transparent 100%);
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 80, 26, 0.55) transparent;
    animation: about-content 0.7s ease-out 0.55s both;
}
.cms-bg-parchment .cms-inner::-webkit-scrollbar,
.cms-bg-document01 .cms-inner::-webkit-scrollbar,
.cms-bg-document02 .cms-inner::-webkit-scrollbar,
.cms-bg-document03 .cms-inner::-webkit-scrollbar { width: 8px; }
.cms-bg-parchment .cms-inner::-webkit-scrollbar-track,
.cms-bg-document01 .cms-inner::-webkit-scrollbar-track,
.cms-bg-document02 .cms-inner::-webkit-scrollbar-track,
.cms-bg-document03 .cms-inner::-webkit-scrollbar-track { background: transparent; }
.cms-bg-parchment .cms-inner::-webkit-scrollbar-thumb,
.cms-bg-document01 .cms-inner::-webkit-scrollbar-thumb,
.cms-bg-document02 .cms-inner::-webkit-scrollbar-thumb,
.cms-bg-document03 .cms-inner::-webkit-scrollbar-thumb {
    background: rgba(120, 80, 26, 0.5); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}
@media (prefers-reduced-motion: reduce) {
    .cms-bg-parchment .cms-card, .cms-bg-document01 .cms-card,
    .cms-bg-document02 .cms-card, .cms-bg-document03 .cms-card { animation: none; }
    .cms-bg-parchment .cms-card::before, .cms-bg-document01 .cms-card::before,
    .cms-bg-document02 .cms-card::before, .cms-bg-document03 .cms-card::before { display: none; }
    .cms-bg-parchment .cms-inner, .cms-bg-document01 .cms-inner,
    .cms-bg-document02 .cms-inner, .cms-bg-document03 .cms-inner { animation: none; }
}
.cms-bg-parchment .cms-title {
    background: linear-gradient(180deg, #a06e22, #4a2f12);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* ׳”׳›׳•׳×׳¨׳× ׳™׳•׳©׳‘׳× ׳¢׳œ ׳¨׳׳© ׳”׳’׳œ׳™׳œ ׳©׳œ ׳”׳§׳œ׳£ (׳ž׳×׳—׳× ׳œ׳§׳¦׳” ׳”׳¢׳œ׳™׳•׳Ÿ ׳”׳ž׳’׳•׳œ׳’׳œ, ׳ž׳¢׳œ ׳׳–׳•׳¨ ׳”׳’׳œ׳™׳œ׳”) */
.cms-bg-parchment > .cms-card > .cms-title {
    position: absolute; top: 16.5%; left: 15%; right: 15%; z-index: 2; margin: 0;
    transform: translateY(-50%);
    font-size: clamp(1.4rem, 3.6vw, 2.1rem);
}
.cms-bg-parchment .cms-content a { color: #7a4f18; }

.cms-bg-blue .cms-card { border: 2px solid var(--c-gold-deep); color: #eef5ff; }
.cms-bg-blue .cms-bglayer {
    background: linear-gradient(180deg, rgba(20, 74, 138, 0.9), rgba(9, 34, 68, 0.92));
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.cms-bg-blue .cms-title, .cms-bg-night .cms-title, .cms-bg-wood .cms-title {
    background: linear-gradient(180deg, #fffdf6, var(--c-gold) 55%, var(--c-gold-deep));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cms-bg-blue .cms-content a, .cms-bg-night .cms-content a, .cms-bg-wood .cms-content a { color: var(--c-gold-light); }

.cms-bg-wood .cms-card { border: 2px solid var(--c-gold-deep); color: #f7ecd8; }
.cms-bg-wood .cms-bglayer { background: linear-gradient(180deg, #6a4622, #3f2810); }
.cms-bg-night .cms-card { border: 2px solid #3a4d80; color: #dfe8ff; }
.cms-bg-night .cms-bglayer { background: linear-gradient(180deg, rgba(13, 24, 56, 0.94), rgba(7, 13, 28, 0.96)); }
.cms-bg-plain .cms-card { border: 2px solid rgba(211, 154, 26, 0.5); color: #2a1c0e; }
.cms-bg-plain .cms-bglayer { background: rgba(255, 246, 230, 0.94); }
.cms-bg-plain .cms-title { color: var(--c-night); }

/* ---- ללא רקע: התוכן יושב ישירות על הסצנה ----
   **אין כאן כרטיס כלל**, ולכן אין גם מה שמפריד את הטקסט מהנוף. הקריאוּת
   מגיעה מ**הילה** סביב האותיות ולא מרקע חצי-שקוף -רקע כזה הוא בדיוק
   ה"כלום" שהאפשרות הזאת באה לבטל, ובחצי שקיפות הוא נראה כתקלה ולא
   כבחירה. אותו פתרון שכבר נקנה כאן בטקסט שיושב על הקיסוס של הקלף.

   ‎drop-shadow‎ ולא ‎text-shadow‎ בכותרת: אם יוגדר לה מילוי מדורג
   (‎background-clip: text‎) הצל מצויר **מעל** הטקסט השקוף ומכסה אותו. */
.cms-page.cms-bg-none { align-items: center; }
.cms-bg-none .cms-card {
    background: none;
    border: none;
    box-shadow: none;
    color: #f3f7ff;
    padding: clamp(0.8rem, 2.6vw, 1.8rem);
}
/* שכבת הרקע יורדת לגמרי, ואיתה גם מחוון השקיפות שמפעיל אותה -אין על
   מה להחיל אותו, ומחוון שנשמר ואינו משפיע נקרא כתקלה. */
.cms-bg-none .cms-bglayer { display: none; }
.cms-bg-none .cms-title {
    color: #fff;
    filter:
        drop-shadow(0 2px 3px rgba(5, 14, 32, 0.92))
        drop-shadow(0 0 14px rgba(5, 14, 32, 0.75));
}
.cms-bg-none :is(.cms-inner, .cms-content) {
    color: #f3f7ff;
    text-shadow:
        0 1px 2px rgba(5, 14, 32, 0.9),
        0 0 12px rgba(5, 14, 32, 0.65);
}
/* כותרות פנימיות בזהב, כמו בתבניות הכהות -לבן על לבן מאבד את ההיררכיה */
.cms-bg-none .cms-content :is(h1, h2, h3, h4) { color: var(--c-gold-light, #f2d489); }
.cms-bg-none .cms-content a { color: #ffdf9a; }
/* טבלאות וציטוטים צריכים גבול גלוי -בלי קלף מתחתם הם נעלמים */
.cms-bg-none .cms-content :is(td, th) { border-color: rgba(255, 255, 255, 0.35); }
.cms-bg-none .cms-content blockquote { border-inline-start-color: rgba(255, 223, 154, 0.65); }

/* ==== ׳׳ ׳™׳ž׳¦׳™׳™׳× ׳˜׳¢׳™׳ ׳” ׳‘׳™׳Ÿ ׳¢׳ž׳•׳“׳™׳ (׳”׳¡׳•׳’ ׳ ׳‘׳—׳¨ ׳‘׳ ׳™׳”׳•׳œ: pageLoader) ====
   ׳ž׳•׳¦׳’׳× ׳ž׳¨׳’׳¢ ׳”׳œ׳—׳™׳¦׳” ׳¢׳œ ׳§׳™׳©׳•׳¨ ׳•׳¢׳“ ׳©׳”׳¢׳ž׳•׳“ ׳”׳‘׳ ׳ž׳¦׳•׳™׳¨. ׳ž׳•׳¡׳×׳¨׳× ׳›׳‘׳¨׳™׳¨׳× ׳ž׳—׳“׳œ ׳•׳ ׳“׳œ׳§׳×
   ׳“׳¨׳š ׳ž׳—׳œ׳§׳× is-on ׳ž׳”-JS, ׳‘׳”׳©׳”׳™׳” ׳§׳¦׳¨׳” ׳›׳“׳™ ׳©׳ ׳™׳•׳•׳˜ ׳ž׳”׳™׳¨ ׳œ׳ ׳™׳‘׳”׳‘ ׳׳•׳×׳”. */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 140;                 /* ׳ž׳¢׳œ ׳”׳›׳•׳œ, ׳›׳•׳œ׳œ ׳₪׳׳ ׳œ ׳”׳ ׳’׳™׳©׳•׳× */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;         /* ׳œ׳ ׳—׳•׳¡׳ ׳ž׳’׳¢ */
    opacity: 0;
    /* fade ׳§׳¦׳× ׳׳¨׳•׳š ׳™׳•׳×׳¨ ׳œ׳™׳¦׳™׳׳” ׳—׳œ׳§׳” -׳ž׳•׳ ׳¢ "׳§׳₪׳™׳¦׳”" ׳ž׳”׳ž׳¡׳š ׳”׳›׳”׳” ׳œ׳¨׳’׳™׳œ */
    transition: opacity 0.32s ease;
}
/* ׳”׳¨׳§׳¢ ׳”׳ž׳¢׳•׳ž׳¢׳ ׳§׳‘׳•׳¢ ׳¢׳œ ׳”׳˜׳•׳¢׳Ÿ (׳—׳•׳¥ ׳ž׳¡׳¨׳’׳œ ׳”׳”׳×׳§׳“׳ž׳•׳×), ׳׳‘׳œ ׳ ׳¨׳׳” ׳¨׳§ ׳›׳©׳”׳©׳§׳™׳₪׳•׳× > 0.
   ׳›׳š ׳›׳©׳”׳˜׳•׳¢׳Ÿ ׳“׳•׳”׳”, ׳”׳¨׳§׳¢ ׳”׳›׳”׳” ׳“׳•׳”׳” ׳™׳—׳“ ׳׳™׳×׳• (fade), ׳‘׳ž׳§׳•׳ ׳œ׳”׳™׳¢׳œ׳ ׳ž׳™׳™׳“׳™׳× -> ׳‘׳œ׳™ ׳”׳‘׳”׳•׳‘. */
.page-loader:not([data-loader="bar"]) { background: rgba(13, 62, 120, 0.42); }
/* ׳›׳©׳¢׳ž׳¢׳•׳ FADE ׳ž׳•׳₪׳¢׳œ (#ptDim ׳§׳™׳™׳): ׳”׳¦׳¢׳™׳£ ׳”׳›׳—׳•׳œ ׳”׳§׳‘׳•׳¢ ׳©׳œ ׳”׳˜׳•׳¢׳Ÿ ׳©׳§׳•׳£, ׳›׳“׳™ ׳©׳©׳›׳‘׳×
   ׳”׳¢׳ž׳¢׳•׳ (z138, ׳›׳”׳” ׳•׳ž׳•׳“׳’׳©׳×) ׳×׳”׳™׳” ׳–׳• ׳©׳ž׳—׳©׳™׳›׳” ׳׳× ׳”׳¡׳¦׳ ׳” -׳ ׳¨׳׳™׳× ׳‘׳‘׳™׳¨׳•׳¨ ׳•׳œ׳ ׳ž׳•׳¡׳×׳¨׳×
   ׳ž׳׳—׳•׳¨׳™ ׳”׳¦׳¢׳™׳£. ׳”׳ ׳§׳•׳“׳•׳×/׳”׳¡׳₪׳™׳ ׳¨ ׳©׳œ ׳”׳˜׳•׳¢׳Ÿ ׳ ׳©׳׳¨׳™׳ ׳’׳œ׳•׳™׳™׳ ׳ž׳¢׳œ׳™׳”. */
/* ‎html.pt-fade‎ ולא ‎html:has(#ptDim)‎ -‎#ptDim‎ נפלט בדיוק כשהמעבר דלוק,
   והמחלקה נפלטת מאותו תנאי. ‎:has()‎ שנושאו השורש ייקר כל חישוב סגנון
   במסמך פי שישה (ראה ההערה ליד תג ה-‎<html>‎ ב-‎templates/layout.php‎). */
html.pt-fade .page-loader:not([data-loader="bar"]) { background: transparent; }
.page-loader.is-on { opacity: 1; pointer-events: auto; }
/* **‎opacity: 0‎ אינו עוצר אנימציות.** הטוען מוסתר בשקיפות (לא ב-display),
   ולכן הנקודות/הטבעת/הניצוץ שלו רצו לנצח, בלתי-נראים -אנימציות תמידיות על
   שכבה בגודל מסך מלא, בחינם. מושהות כשאינו מוצג; ‎pt-cover‎ מציג אותו עוד
   לפני ה-JS (פריים ראשון של ניווט) ולכן חייב להחזיר אותן לרוץ. ‎paused‎ ולא
   ‎none‎: ההשהיה שומרת את הפאזה, וה-JS שמדליק ‎is-on‎ אינו צריך לדעת דבר. */
.page-loader:not(.is-on) * { animation-play-state: paused; }
html.pt-cover .page-loader:not(.is-on) * { animation-play-state: running; }
/* ׳”׳’׳¢׳” ׳ž׳ ׳™׳•׳•׳˜ ׳₪׳ ׳™׳ž׳™: ׳ž׳¦׳™׳’׳™׳ ׳׳× ׳”׳˜׳•׳¢׳Ÿ ׳›׳‘׳¨ ׳‘׳₪׳¨׳™׳™׳ ׳”׳¨׳׳©׳•׳Ÿ (׳œ׳₪׳ ׳™ ׳”-JS), ׳›׳“׳™ ׳œ׳›׳¡׳•׳× ׳׳×
   ׳¨׳’׳¢ ׳”׳—׳™׳œ׳•׳£ ׳‘׳™׳Ÿ ׳”׳¢׳ž׳•׳“׳™׳ ׳‘׳œ׳™ ׳”׳‘׳–׳§. ׳”-JS ׳ž׳¡׳™׳¨ ׳׳× pt-cover ׳›׳©׳”׳¢׳ž׳•׳“ ׳ž׳•׳›׳Ÿ. */
html.pt-cover #pageLoader { opacity: 1; pointer-events: auto; }
.pl-box { display: flex; align-items: center; justify-content: center; }

/* --- ׳˜׳‘׳¢׳× ׳ž׳¡׳×׳•׳‘׳‘׳× --- */
.pl-ring {
    width: 3.4rem; height: 3.4rem; border-radius: 50%;
    border: 4px solid rgba(255, 231, 163, 0.25);
    border-top-color: var(--c-gold);
    border-right-color: var(--c-gold-light);
    box-shadow: 0 0 18px rgba(255, 209, 90, 0.45);
    animation: pl-spin 0.9s linear infinite;
}
@keyframes pl-spin { to { transform: rotate(360deg); } }

/* --- ׳©׳œ׳•׳© ׳ ׳§׳•׳“׳•׳× ׳§׳•׳₪׳¦׳•׳× --- */
.pl-dots { display: flex; gap: 0.55rem; }
.pl-dots i {
    width: 0.85rem; height: 0.85rem; border-radius: 50%;
    background: linear-gradient(180deg, var(--c-gold-light), var(--c-gold-deep));
    box-shadow: 0 0 12px rgba(255, 209, 90, 0.5);
    animation: pl-bounce 0.85s ease-in-out infinite;
}
.pl-dots i:nth-child(2) { animation-delay: 0.14s; }
.pl-dots i:nth-child(3) { animation-delay: 0.28s; }
@keyframes pl-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.55; }
    40%           { transform: translateY(-0.75rem); opacity: 1; }
}

/* --- ׳ ׳™׳¦׳•׳¥ גœ¨ (׳›׳•׳›׳‘ ׳׳¨׳‘׳¢-׳§׳¦׳•׳•׳× ׳§׳¢׳•׳¨ ׳¢׳ ׳–׳•׳”׳¨ ׳•׳ ׳™׳¦׳•׳¦׳•׳×-׳œ׳•׳•׳™׳™׳Ÿ) --- */
.pl-sparkle { width: 4.2rem; height: 4.2rem; overflow: visible; }
.plk-star { fill: var(--c-gold-light); filter: drop-shadow(0 0 5px var(--c-gold)) drop-shadow(0 0 12px rgba(255, 209, 90, 0.6)); }
.plk-main { transform-origin: 28px 28px; animation: pl-twinkle 1.5s ease-in-out infinite; }
.plk-core { fill: #fffbe6; transform-origin: 28px 28px; animation: pl-core 1.5s ease-in-out infinite; }
.plk-mini { transform-box: fill-box; transform-origin: center; }
.plk-mini-1 { animation: pl-twinkle 1.5s ease-in-out 0.5s infinite; }
.plk-mini-2 { animation: pl-twinkle 1.5s ease-in-out 0.95s infinite; }
@keyframes pl-twinkle {
    0%, 100% { transform: scale(0.55) rotate(0deg); opacity: 0.45; }
    50%      { transform: scale(1) rotate(20deg); opacity: 1; }
}
@keyframes pl-core {
    0%, 100% { transform: scale(0.5); opacity: 0.6; }
    50%      { transform: scale(1.1); opacity: 1; }
}

/* --- ׳˜׳™׳¨׳” ׳ž׳׳•׳™׳¨׳× (SVG) ׳¢׳ ׳“׳’׳œ׳™׳ ׳ž׳×׳ ׳•׳₪׳₪׳™׳ ׳•׳—׳œ׳•׳ ׳•׳× ׳©׳ ׳“׳œ׳§׳™׳ --- */
.pl-castle {
    width: 7.5rem; height: 6.4rem;
    overflow: visible;                       /* ׳”׳“׳’׳œ׳™׳ ׳—׳•׳¨׳’׳™׳ ׳ž׳¢׳œ ׳”-viewBox */
    filter: drop-shadow(0 6px 14px rgba(6, 20, 40, 0.5))
            drop-shadow(0 0 16px rgba(255, 209, 90, 0.35));
}
.plc { animation: pl-castle-bob 2s ease-in-out infinite; transform-origin: 50% 100%; }
.plc-body   { fill: #efe6d2; stroke: var(--c-wood-deep); stroke-width: 1.6; stroke-linejoin: round; }
.plc-roof   { fill: #4d94d6; stroke: #235688; stroke-width: 1.4; stroke-linejoin: round; }
.plc-gate   { fill: var(--c-wood-deep); }
.plc-gate-line { stroke: rgba(255, 231, 163, 0.35); stroke-width: 1; } /* ׳—׳¨׳™׳¥ ׳”׳“׳œ׳× */
.plc-shadow { fill: rgba(6, 20, 40, 0.28); }
.plc-pole   { fill: var(--c-wood-deep); }
.plc-cloth  { fill: var(--c-red); transform-origin: 0% 50%; animation: pl-flag 1s ease-in-out infinite; }
.plc-flagwrap-2 .plc-cloth { animation-delay: 0.25s; } /* ׳©׳ ׳™ ׳”׳“׳’׳œ׳™׳ ׳œ׳ ׳ž׳×׳ ׳•׳₪׳₪׳™׳ ׳‘׳¡׳ ׳›׳¨׳•׳Ÿ */
/* ׳—׳œ׳•׳ ׳•׳× ׳©׳ ׳“׳œ׳§׳™׳ ׳‘׳–׳” ׳׳—׳¨ ׳–׳” -"׳ž׳™׳©׳”׳• ׳¢׳•׳‘׳¨ ׳‘׳˜׳™׳¨׳” ׳¢׳ ׳œ׳₪׳™׳“" */
.plc-win { fill: var(--c-gold); animation: pl-window 1.8s ease-in-out infinite; }
.plc-win-2 { animation-delay: 0.6s; }
.plc-win-3 { animation-delay: 1.2s; }
@keyframes pl-castle-bob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-3px) rotate(-1deg); }
}
@keyframes pl-flag {
    0%, 100% { transform: skewY(0deg) scaleX(1); }
    50%      { transform: skewY(-10deg) scaleX(0.86); }
}
@keyframes pl-window {
    0%, 100% { fill: #6b5a3a; }            /* ׳—׳œ׳•׳Ÿ ׳›׳‘׳•׳™ */
    35%, 55% { fill: var(--c-gold-light); }/* ׳ ׳“׳œ׳§ */
}

/* ׳‘׳¡׳™׳¡ ׳ž׳©׳•׳×׳£ ׳œ׳˜׳•׳¢׳ ׳™׳ ׳”׳ž׳׳•׳™׳¨׳™׳ */
.pl-art { overflow: visible; filter: drop-shadow(0 6px 14px rgba(6, 20, 40, 0.5)) drop-shadow(0 0 14px rgba(255, 209, 90, 0.3)); }
.pl-dev, .pl-laptop, .pl-server { width: 7rem; height: 6rem; }
.pl-screwdriver, .pl-gear { width: 6rem; height: 5.4rem; }

/* --- ׳ž׳₪׳×׳—/׳× ׳ž׳•׳œ ׳ž׳¡׳š --- */
.pld-shadow { fill: rgba(6, 20, 40, 0.28); }
.pld-desk { fill: #6a4a2a; }
.pld-monitor { fill: #2a3446; }
.pld-screen { fill: #12325c; }
.pld-stand { fill: #2a3446; }
.pld-code rect { fill: #7fd4ff; animation: pl-typeline 1.8s steps(1) infinite; }
.pld-code rect:nth-child(2) { fill: #a9f0c0; animation-delay: 0.45s; }
.pld-code rect:nth-child(3) { fill: var(--c-gold-light); animation-delay: 0.9s; }
.pld-code rect:nth-child(4) { fill: #7fd4ff; animation-delay: 1.35s; }
.pld-cursor { fill: var(--c-gold-light); animation: pl-caret 1s steps(1) infinite; }
.pld-head { fill: #f2c9a0; }
.pld-hair { fill: #4a3120; }
.pld-phones { fill: none; stroke: #2a3446; stroke-width: 2; }
.pld-earcup { fill: #2a3446; }
.pld-glass { fill: rgba(180,225,255,0.5); stroke: #2a3446; stroke-width: 0.9; }
.pld-glass-bridge { stroke: #2a3446; stroke-width: 0.9; }
.pld-eye { fill: #2a2018; }
.pld-nose { fill: none; stroke: #c99a6a; stroke-width: 0.7; stroke-linecap: round; stroke-linejoin: round; }
.pld-mouth { fill: none; stroke: #a56a4a; stroke-width: 0.8; stroke-linecap: round; }
.pld-torso { fill: #3a7bd5; }
.pld-chair { fill: none; stroke: #2a3446; stroke-width: 2.4; stroke-linecap: round; }
.pld-arm { fill: none; stroke: #f2c9a0; stroke-width: 3; stroke-linecap: round; transform-origin: 52px 40px; animation: pl-type 0.5s ease-in-out infinite; }
.pld-arm-2 { animation-delay: 0.25s; }
.pld-keyboard { fill: #dfe6ef; stroke: #9aa7b8; stroke-width: 0.8; }
.pld-mug { fill: #e0452e; }
.pld-mug-handle { fill: none; stroke: #e0452e; stroke-width: 1.6; }
.pld-steam { fill: none; stroke: rgba(255,255,255,0.6); stroke-width: 1.2; stroke-linecap: round; animation: pl-steam 2s ease-in-out infinite; }
.pld-steam-2 { animation-delay: 1s; }
@keyframes pl-type { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.5px); } }
@keyframes pl-typeline { 0%, 40% { opacity: 1; } 41%, 100% { opacity: 0.12; } }
@keyframes pl-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes pl-steam { 0% { opacity: 0; transform: translateY(2px); } 40% { opacity: 0.8; } 100% { opacity: 0; transform: translateY(-3px); } }

/* --- ׳œ׳׳₪׳˜׳•׳₪ (׳›׳¡׳•׳£-׳׳₪׳•׳¨ ׳ž׳•׳“׳¨׳ ׳™, ׳ž׳¡׳š ׳›׳—׳•׳œ ׳¨׳š) --- */
.pll-shadow { fill: rgba(6, 20, 40, 0.28); }
.pll-lid { fill: #c8cdd6; stroke: #9aa2ae; stroke-width: 1; }
.pll-screen { fill: #17324f; }
.pll-dot { fill: #6a7688; }
.pll-base { fill: #d5dae2; stroke: #9aa2ae; stroke-width: 1; stroke-linejoin: round; }
.pll-hinge { fill: #aab2be; }
.pll-touch { fill: #bcc4cf; }
.pll-body { animation: pl-laptop-bob 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.pll-code rect { fill: #86c8ff; animation: pl-typeline 1.6s steps(1) infinite; }
.pll-code rect:nth-child(2) { fill: #a9f0c0; animation-delay: 0.4s; }
.pll-code rect:nth-child(3) { fill: #ffd9a0; animation-delay: 0.8s; }
.pll-code rect:nth-child(4) { fill: #86c8ff; animation-delay: 1.2s; }
@keyframes pl-laptop-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* --- ׳©׳¨׳× ׳¢׳•׳‘׳“ --- */
.pls-shadow { fill: rgba(6, 20, 40, 0.28); }
.pls-rack { fill: #1c2736; }
.pls-rack-in { fill: #2a3547; }
.pls-foot { fill: #141d29; }
.pls-slot { fill: #101826; stroke: #3a4759; stroke-width: 0.6; }
.pls-bay { fill: #46566c; }
.pls-grille { fill: #46566c; }
.pls-led { animation: pl-blink 1.2s steps(1) infinite; }
.pls-led-1, .pls-led-4, .pls-led-7 { fill: #4bd07a; }
.pls-led-2, .pls-led-5, .pls-led-8 { fill: var(--c-gold); }
.pls-led-3, .pls-led-6 { fill: #4bd07a; }
.pls-led-1 { animation-delay: 0s; }   .pls-led-2 { animation-delay: 0.5s; }
.pls-led-3 { animation-delay: 0.25s; } .pls-led-4 { animation-delay: 0.75s; }
.pls-led-5 { animation-delay: 0.15s; } .pls-led-6 { animation-delay: 0.9s; }
.pls-led-7 { animation-delay: 0.6s; }  .pls-led-8 { animation-delay: 0.35s; }
@keyframes pl-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.22; } }

/* --- ׳ž׳‘׳¨׳’ ׳ž׳¡׳×׳•׳‘׳‘ ׳ž׳¢׳œ ׳‘׳•׳¨׳’ --- */
.plw-shadow { fill: rgba(6, 20, 40, 0.28); }
.plw-screw { fill: #9aa2ae; stroke: #6b7480; stroke-width: 1; }
.plw-screw-slot { stroke: #4a5058; stroke-width: 1.4; stroke-linecap: round; }
.plw-handle { fill: #e0452e; }
.plw-collar { fill: #b8371f; }
.plw-ridge { fill: none; stroke: rgba(0,0,0,0.16); stroke-width: 1.4; stroke-linecap: round; }
.plw-shaft { fill: #d3d8df; }
.plw-tip { fill: #9aa2ae; }
.plw-spin { transform-origin: 36px 49px; animation: pl-spin 1.4s cubic-bezier(0.45, 0, 0.55, 1) infinite; }

/* --- ׳’׳œ׳’׳œ׳™ ׳©׳™׳ ׳™׳™׳ (׳ž׳¡׳×׳•׳‘׳‘׳™׳ ׳ž׳ ׳•׳’׳“ ׳•׳ž׳©׳•׳œ׳‘׳™׳) --- */
.plg-body  { fill: var(--c-gold); stroke: var(--c-gold-deep); stroke-width: 1; }
.plg-body-2 { fill: var(--c-gold-light); }
.plg-cog   { fill: var(--c-gold); }
.plg-cog-2 { fill: var(--c-gold-light); }
.plg-hole  { fill: #2a3547; }
.plg-a { transform-origin: 27px 32px; animation: pl-spin 3s linear infinite; }
.plg-b { transform-origin: 49px 24px; animation: pl-spin-rev 2.25s linear infinite; } /* 8:6 ׳©׳™׳ ׳™׳™׳ -> ׳ž׳”׳™׳¨׳•׳× ׳”׳₪׳•׳›׳” ׳•׳ž׳ ׳•׳’׳“׳× */
@keyframes pl-spin-rev { to { transform: rotate(-360deg); } }

/* ׳¦׳ž׳¦׳•׳ ׳×׳ ׳•׳¢׳” -׳›׳œ ׳”׳˜׳•׳¢׳ ׳™׳ ׳”׳ž׳׳•׳™׳¨׳™׳ ׳ ׳¢׳¦׳¨׳™׳ */
@media (prefers-reduced-motion: reduce) {
    .pld-arm, .pld-code rect, .pld-cursor, .pld-steam, .pll-body, .pll-code rect,
    .pls-led, .plw-spin, .plg-a, .plg-b { animation: none; }
    .pld-code rect, .pll-code rect, .pld-cursor { opacity: 1; }
    .pls-led { opacity: 1; }
}

/* --- ׳¡׳¨׳’׳œ ׳”׳×׳§׳“׳ž׳•׳× ׳‘׳¨׳׳© ׳”׳ž׳¡׳š --- */
.pl-bar {
    position: absolute; top: 0; inset-inline: 0; height: 4px;
    background: linear-gradient(90deg, transparent, var(--c-gold-light), var(--c-gold), transparent);
    background-size: 45% 100%;
    background-repeat: no-repeat;
    box-shadow: 0 0 12px rgba(255, 209, 90, 0.6);
    animation: pl-bar 1.1s ease-in-out infinite;
}
@keyframes pl-bar {
    from { background-position: -50% 0; }
    to   { background-position: 150% 0; }
}

/* ׳¦׳ž׳¦׳•׳ ׳×׳ ׳•׳¢׳”: ׳ž׳©׳׳™׳¨׳™׳ ׳—׳™׳•׳•׳™ ׳¡׳˜׳˜׳™-׳›׳ž׳¢׳˜, ׳‘׳œ׳™ ׳¡׳™׳‘׳•׳‘/׳§׳₪׳™׳¦׳” */
@media (prefers-reduced-motion: reduce) {
    .pl-ring, .pl-dots i, .pl-bar,
    .plk-main, .plk-mini, .plk-core,
    .plc, .plc-cloth, .plc-win { animation: none; }
    .plk-star, .plk-core { opacity: 1; }
    .pl-ring { border-top-color: var(--c-gold); }
    .pl-bar  { background-position: 50% 0; }
    .plc-win { fill: var(--c-gold-light); } /* ׳—׳œ׳•׳ ׳•׳× ׳“׳œ׳•׳§׳™׳ ׳‘׳§׳‘׳™׳¢׳•׳× */
}

/* ==== ׳ž׳ ׳™׳¢׳× ׳”׳‘׳–׳§ ׳‘׳¨׳ž׳× ׳”׳“׳₪׳“׳₪׳Ÿ ׳‘׳—׳™׳œ׳•׳£ ׳‘׳™׳Ÿ ׳¢׳ž׳•׳“׳™׳ ====
   @view-transition ׳’׳•׳¨׳ ׳œ׳“׳₪׳“׳₪׳Ÿ (Safari 18+/Chrome) ׳œ׳”׳—׳–׳™׳§ ׳׳× ׳”׳¢׳ž׳•׳“ ׳”׳™׳©׳Ÿ ׳¢׳“ ׳©׳”׳—׳“׳©
   ׳ž׳•׳›׳Ÿ ׳•׳œ׳¢׳©׳•׳× cross-fade ׳§׳¦׳¨ -> ׳׳™׳Ÿ ׳₪׳¨׳™׳™׳ ׳œ׳‘׳Ÿ/׳¨׳™׳§ ׳‘׳–׳ž׳Ÿ ׳”׳—׳™׳œ׳•׳£. ׳”׳˜׳•׳¢׳Ÿ ׳ž׳•׳¦׳’ ׳ž׳©׳ ׳™
   ׳”׳¦׳“׳“׳™׳ (׳™׳•׳¦׳+׳ ׳›׳ ׳¡) ׳•׳œ׳›׳Ÿ ׳”-cross-fade ׳”׳•׳ ׳˜׳•׳¢׳Ÿג†’׳˜׳•׳¢׳Ÿ, ׳©׳§׳•׳£ ׳œ׳—׳œ׳•׳˜׳™׳Ÿ -׳¨׳§ ׳ž׳•׳ ׳¢ ׳׳×
   ׳”׳”׳‘׳–׳§. ׳“׳₪׳“׳₪׳ ׳™׳ ׳™׳©׳ ׳™׳ ׳ž׳×׳¢׳œ׳ž׳™׳ ׳•׳ ׳©׳׳¨׳™׳ ׳¢׳ ׳”׳˜׳•׳¢׳Ÿ ׳‘׳œ׳‘׳“. */
/* @view-transition { navigation: auto } ׳ ׳₪׳œ׳˜ ׳›׳¢׳× ׳ž-layout.php ׳¢׳ ׳×׳ ׳׳™: ׳ž׳›׳•׳‘׳”
   ׳›׳©׳¢׳ž׳¢׳•׳ ׳”-FADE ׳ž׳•׳₪׳¢׳œ, ׳›׳™ ׳”-snapshots ׳©׳œ ׳”-VT ׳™׳•׳©׳‘׳™׳ ׳‘-top-layer ׳•׳ž׳¡׳×׳™׳¨׳™׳ ׳׳×
   ׳©׳›׳‘׳× ׳”׳¢׳ž׳¢׳•׳ ׳”׳—׳™׳” (׳”׳”׳׳¨׳” ׳”׳”׳“׳¨׳’׳×׳™׳× ׳œ׳ ׳ ׳¨׳׳™׳× ׳‘׳׳™׳™׳₪׳•׳Ÿ). ׳¨׳׳” layout.php ($pfOn). */
::view-transition-old(root) { animation: pt-veil-out 0.28s ease both; }
::view-transition-new(root) { animation: pt-veil-in 0.28s ease both; }
@keyframes pt-veil-out { to { opacity: 0; } }
@keyframes pt-veil-in  { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.15s; }
}

/* ---- ׳¢׳ž׳¢׳•׳ ׳×׳׳•׳¨׳” (FADE) ׳‘׳ž׳¢׳‘׳¨ ׳‘׳™׳Ÿ ׳¢׳ž׳•׳“׳™׳ ----
   ׳©׳›׳‘׳” ׳›׳”׳” ׳©׳“׳•׳”׳” ׳₪׳ ׳™׳ž׳” ׳‘׳™׳¦׳™׳׳” ׳ž׳”׳¢׳ž׳•׳“ ׳•׳ž׳—׳•׳¦׳” ׳‘׳›׳ ׳™׳¡׳” ׳œ׳¢׳ž׳•׳“ ׳”׳‘׳ -׳×׳—׳•׳©׳× "׳¢׳ž׳¢׳•׳ ׳׳•׳¨׳•׳×".
   ׳”׳¢׳•׳¦׳ž׳” ׳•׳”׳ž׳©׳š ׳ ׳§׳‘׳¢׳™׳ ׳‘׳ ׳™׳”׳•׳œ ׳“׳¨׳š --pt-dim / --pt-dim-dur. ׳™׳•׳©׳‘׳× ׳ž׳×׳—׳× ׳œ׳˜׳•׳¢׳Ÿ (z 138 < 140). */
.pt-dim {
    position: fixed; inset: 0; z-index: 138;
    background: #05192f; opacity: 0; pointer-events: none;
    /* ׳”-fade ׳ž׳‘׳•׳¦׳¢ ׳‘-JS ׳“׳¨׳š Web Animations ׳¢׳œ opacity ׳‘׳œ׳‘׳“ -> ׳”׳“׳₪׳“׳₪׳Ÿ ׳ž׳¨׳™׳¥ ׳׳•׳×׳•
       ׳‘-compositor (GPU) ׳‘-60fps, ׳—׳œ׳§ ׳’׳ ׳›׳©׳”-main-thread ׳¦׳•׳‘׳¢ ׳׳× ׳”׳¡׳¦׳ ׳” ׳‘-2-3fps.
       ׳œ׳ ׳ž׳©׳×׳ž׳©׳™׳ ׳‘-translateZ(0)/will-change ׳§׳‘׳•׳¢׳™׳ -׳©׳›׳‘׳× GPU ׳§׳‘׳•׳¢׳” ׳¢׳œ ׳׳œ׳ž׳ ׳˜ ׳ž׳¡׳š-׳ž׳œ׳
       ׳’׳¨׳ž׳” ׳œ׳”׳‘׳”׳•׳‘ (re-composite ׳©׳œ ׳›׳œ ׳”׳ž׳¡׳š) ׳‘׳¡׳™׳•׳. Chrome ׳ž׳§׳ž׳₪׳– ׳׳ ׳™׳ž׳¦׳™׳™׳× opacity ׳œ׳‘׳“. */
}
/* ׳”׳’׳¢׳ ׳• ׳ž׳ ׳™׳•׳•׳˜ ׳₪׳ ׳™׳ž׳™ (pt-cover): ׳”׳¡׳¦׳ ׳” ׳›׳‘׳¨ ׳ž׳•׳—׳©׳›׳× ׳¢׳•׳“ ׳œ׳₪׳ ׳™ ׳”׳¦׳‘׳™׳¢׳” ׳”׳¨׳׳©׳•׳ ׳” (׳‘׳œ׳™ ׳”׳‘׳–׳§),
   ׳•׳”-JS ׳ž׳¨׳™׳¥ ׳׳× ׳”׳”׳׳¨׳” ׳”׳”׳“׳¨׳’׳×׳™׳× ׳‘-uncover. */
html.pt-cover #ptDim { opacity: var(--pt-dim, 0.55); }

/* ---- ׳ž׳¢׳‘׳¨׳™ ׳›׳ ׳™׳¡׳” ׳œ׳¢׳ž׳•׳“ (׳ ׳‘׳—׳¨ ׳‘׳₪׳׳ ׳œ ׳”׳ ׳™׳”׳•׳œ: display.pageTransition) ---- */
/* ׳›׳œ ׳׳₪׳§׳˜ = ׳©׳×׳™ ׳׳ ׳™׳ž׳¦׳™׳•׳× ׳ ׳₪׳¨׳“׳•׳×: ׳”׳•׳₪׳¢׳” ׳ž׳”׳™׳¨׳” (opacity) + ׳”׳×׳ ׳•׳¢׳” ׳¢׳¦׳ž׳”, ׳׳¨׳•׳›׳” ׳•׳׳™׳˜׳™׳× ׳‘׳¡׳•׳₪׳”.
   ׳‘׳’׳¨׳¡׳” ׳”׳§׳•׳“׳ž׳× ׳”׳©׳×׳™׳™׳ ׳”׳™׳• ׳ž׳׳•׳—׳“׳•׳× ׳•׳ ׳’׳ž׳¨׳• ׳™׳—׳“, ׳•׳œ׳›׳Ÿ ׳›׳œ ׳”׳׳₪׳§׳˜׳™׳ ׳ ׳¨׳׳• ׳›׳ž׳• "׳”׳•׳₪׳¢׳”" ׳–׳”׳” -
   ׳”׳¢׳™׳Ÿ ׳¨׳׳×׳” ׳¨׳§ ׳׳× ׳”׳©׳§׳™׳₪׳•׳× ׳‘׳¢׳•׳“ ׳”׳×׳ ׳•׳¢׳” ׳›׳‘׳¨ ׳”׳¡׳×׳™׳™׳ž׳”. ׳¢׳›׳©׳™׳• ׳”׳×׳ ׳•׳¢׳” ׳”׳™׳ ׳”׳’׳™׳‘׳•׳¨. */
/* ׳—׳©׳•׳‘: easing ׳ž׳¡׳•׳’ ease-out/easeOutExpo ׳ž׳¡׳™׳™׳ ~85% ׳ž׳”׳×׳ ׳•׳¢׳” ׳‘׳¨׳‘׳¢ ׳”׳–׳ž׳Ÿ ׳”׳¨׳׳©׳•׳Ÿ, ׳•׳׳–
   ׳–׳•׳—׳œ -׳‘׳¢׳™׳Ÿ ׳–׳” ׳ ׳¨׳׳” ׳›׳ž׳• "׳§׳₪׳™׳¦׳”" ׳•׳œ׳ ׳›׳ž׳• ׳ž׳¢׳‘׳¨. ׳œ׳›׳Ÿ ease-in-out ׳©׳ž׳₪׳–׳¨ ׳׳× ׳”׳×׳ ׳•׳¢׳”
   ׳œ׳׳•׳¨׳š ׳›׳œ ׳”׳ž׳©׳š: ׳”׳×׳•׳›׳Ÿ ׳ ׳ž׳¦׳ ׳‘׳ž׳§׳•׳ ׳©׳•׳ ׳” ׳‘׳‘׳™׳¨׳•׳¨ ׳‘׳ž׳©׳š ׳›׳ž׳” ׳ž׳׳•׳× ׳ž׳™׳œ׳™׳©׳ ׳™׳•׳×. */
/* ׳ž׳©׳š ׳׳¨׳•׳š (1.6s) ׳‘׳›׳•׳•׳ ׳”: ׳ ׳ž׳“׳“ ׳‘-WebKit ׳©׳§׳¦׳‘ ׳”׳₪׳¨׳™׳™׳ž׳™׳ ׳‘׳–׳ž׳Ÿ ׳˜׳¢׳™׳ ׳× ׳”׳¢׳ž׳•׳“ ׳ ׳ž׳•׳š ׳ž׳׳•׳“
   (׳™׳—׳™׳“׳•׳× ׳‘׳•׳“׳“׳•׳×), ׳•׳׳– ׳׳ ׳™׳ž׳¦׳™׳” ׳‘׳× 0.8 ׳©׳ ׳™׳™׳” ׳ž׳¦׳•׳™׳¨׳× ׳‘׳©׳ ׳™ ׳₪׳¨׳™׳™׳ž׳™׳ -׳›׳œ׳•׳ž׳¨ "׳§׳₪׳™׳¦׳”"
   ׳•׳œ׳ ׳ž׳¢׳‘׳¨. ׳ž׳©׳š ׳›׳₪׳•׳œ = ׳₪׳™ ׳©׳ ׳™׳™׳ ׳₪׳¨׳™׳™׳ž׳™׳, ׳•׳œ׳›׳Ÿ ׳”׳×׳ ׳•׳¢׳” ׳ ׳¨׳׳™׳× ׳’׳ ׳‘׳ž׳›׳©׳™׳¨ ׳¢׳ž׳•׳¡. */
.content[data-pagetrans="fade"]       { animation: pt-fadein 1s ease-out both; }
/* ׳”׳”׳•׳₪׳¢׳” ׳ž׳”׳™׳¨׳” (0.35s) ׳•׳”׳×׳ ׳•׳¢׳” ׳׳¨׳•׳›׳”: ׳”׳×׳•׳›׳Ÿ ׳ ׳¨׳׳” ׳›׳‘׳¨ ׳‘׳”׳×׳—׳œ׳” ׳•׳–׳– ׳œ׳×׳•׳š ׳ž׳§׳•׳ž׳•,
   ׳‘׳ž׳§׳•׳ ׳œ׳”׳™׳©׳׳¨ ׳©׳§׳•׳£ ׳‘׳–׳ž׳Ÿ ׳©׳”׳•׳ ׳–׳– -׳›׳š ׳¨׳•׳׳™׳ ׳׳× ׳”׳×׳ ׳•׳¢׳” ׳•׳œ׳ ׳ž׳¡׳š ׳¨׳™׳§. */
.content[data-pagetrans="slide-up"]   { animation: pt-fadein 0.35s ease-out both, pt-slideup 1.6s cubic-bezier(0.45, 0.02, 0.25, 1) both; }
.content[data-pagetrans="slide-side"] { animation: pt-fadein 0.35s ease-out both, pt-slideside 1.6s cubic-bezier(0.45, 0.02, 0.25, 1) both; }
.content[data-pagetrans="zoom"]       { animation: pt-fadein 0.35s ease-out both, pt-zoom 1.6s cubic-bezier(0.45, 0.02, 0.25, 1) both; }
.content[data-pagetrans="blur"]       { animation: pt-fadein 0.35s ease-out both, pt-blur 1.6s cubic-bezier(0.45, 0.02, 0.25, 1) both; }
@keyframes pt-fadein    { from { opacity: 0; } to { opacity: 1; } }
/* ׳ž׳¢׳‘׳¨ ׳™׳¦׳™׳׳” -׳¨׳¥ ׳‘׳œ׳—׳™׳¦׳” ׳¢׳œ ׳§׳™׳©׳•׳¨, ׳œ׳₪׳ ׳™ ׳©׳”׳¢׳ž׳•׳“ ׳”׳‘׳ ׳ ׳˜׳¢׳Ÿ. ׳‘׳ž׳›׳©׳™׳¨ ׳׳™׳˜׳™ ׳–׳”׳• ׳”׳—׳œ׳§
   ׳©׳”׳ž׳©׳×׳ž׳© ׳‘׳׳ž׳× ׳¨׳•׳׳”: ׳ž׳©׳•׳‘ ׳ž׳™׳™׳“׳™ ׳‘׳¨׳’׳¢ ׳”׳ ׳’׳™׳¢׳”, ׳‘׳ž׳§׳•׳ ׳”׳ž׳×׳ ׳” ׳ž׳•׳œ ׳”׳¢׳ž׳•׳“ ׳”׳™׳©׳Ÿ. */
.content.pt-leaving { animation: pt-leave 0.28s ease-in forwards !important; }
/* ׳₪׳׳Ÿ-׳ž׳¦׳œ׳ž׳”: ׳”׳›׳¨׳˜׳™׳¡ ׳ ׳₪׳×׳— ׳‘׳×׳–׳ž׳•׳Ÿ ׳©׳œ ׳”-JS (׳ž׳¡׳™׳™׳ ׳ž׳¢׳˜ ׳œ׳₪׳ ׳™ ׳©׳”׳ž׳¦׳œ׳ž׳” ׳¢׳•׳¦׳¨׳×), ׳•׳œ׳›׳Ÿ
   ׳׳ ׳™׳ž׳¦׳™׳™׳× ׳”׳ž׳¢׳‘׳¨ ׳©׳œ ׳”-content ׳—׳™׳™׳‘׳× ׳œ׳¨׳“׳×. **׳׳ ׳™׳ž׳¦׳™׳™׳× CSS ׳’׳•׳‘׳¨׳× ׳‘׳§׳¡׳§׳™׳™׳“ ׳¢׳œ
   style.opacity ׳”׳™׳©׳™׳¨**, ׳•׳œ׳›׳Ÿ pt-fadein ׳”׳“׳œ׳™׳§׳” ׳׳× ׳”׳›׳¨׳˜׳™׳¡ ׳‘׳¢׳¦׳ž׳” ׳‘׳׳ž׳¦׳¢ ׳”׳ ׳¡׳™׳¢׳”
   ׳•׳׳– ׳”-JS ׳¢׳™׳ž׳¢׳ ׳׳•׳×׳• ׳ž׳—׳“׳© -׳ ׳ž׳“׳“: opacity ׳ž׳œ׳ ׳‘-946ms ׳‘׳¢׳•׳“ ׳”-JS ׳₪׳×׳— ׳׳•׳×׳• ׳¨׳§
   ׳‘-1219ms, ׳›׳œ׳•׳ž׳¨ ׳”׳›׳¨׳˜׳™׳¡ ׳ ׳“׳œ׳§, ׳ ׳›׳‘׳” ׳•׳ ׳“׳œ׳§ ׳©׳•׳‘. */
/* ---- בזמן נסיעת המצלמה: הכרטיס מוסתר, והאפקט ממתין לסוף הנסיעה ----

   **‎visibility: hidden‎ ולא רק ‎opacity: 0‎.** האחרון אינו מבטיח שהדפדפן לא
   ירסטר את האלמנט, וכאן מדובר באלמנט בגודל מסך מלא בדיוק כשכל העולם זז.
   הסתרה מלאה = אפס עלות ציור לאורך כל הנסיעה.

   **‎paused‎ ולא ‎animation: none‎.** עם ‎none‎ האנימציה **נוצרת** רק כשהמחלקה
   יורדת: היא ‎pending‎ לפריים, ועד שהיא נכנסת לתוקף מצויר סגנון הבסיס -עמוד
   גלוי. זה מקור ההבזק. עם ‎paused‎ היא קיימת מרגע ההכנסה ועומדת על פריים 0,
   והחשיפה היא הסרת מחלקה אחת: אין ‎pending‎ ואין חלון של סגנון בסיס.

   **וההסרה קורית כשהמצלמה כבר עצרה** (‎panRevealWhenStopped‎), ולא 260ms
   לפניה כפי שהיה. ‎pt-blur‎ מנפיש ‎filter‎ ו-‎pt-zoom‎ מנפיש ‎transform‎ על
   אלמנט מסך-מלא; להריץ אותם **מעל** תריסר שכבות שכבר נעות זו הוצאה כפולה
   באותו פריים, ובאייפון היא נראית. עכשיו כל אחד מקבל את הזמן שלו: קודם
   הנסיעה, אחריה האפקט -וההגדרה בפאנל עושה בדיוק את מה שהיא אומרת. */
.content.pan-hold { visibility: hidden; animation-play-state: paused !important; }
@keyframes pt-leave { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.96); } }
@media (prefers-reduced-motion: reduce) {
    @keyframes pt-leave { from { opacity: 1; } to { opacity: 0; } }
}
/* ׳׳ ׳™׳ž׳¦׳™׳•׳× ׳”׳×׳ ׳•׳¢׳” ׳ ׳•׳’׳¢׳•׳× ׳¨׳§ ׳‘-transform/filter -> ׳׳™׳Ÿ ׳”׳×׳ ׳’׳©׳•׳× ׳¢׳ ׳”-opacity ׳©׳œ׳ž׳¢׳œ׳” */
@keyframes pt-slideup   { from { transform: translateY(120px); } to { transform: none; } }
@keyframes pt-slideside { from { transform: translateX(160px); } to { transform: none; } }
@keyframes pt-zoom      { from { transform: scale(0.72); }      to { transform: none; } }
@keyframes pt-blur      { from { filter: blur(22px); }          to { filter: blur(0); } }
/* "׳¦׳ž׳¦׳•׳ ׳×׳ ׳•׳¢׳”" (iOS: ׳ ׳’׳™׳©׳•׳× ג†’ ׳×׳ ׳•׳¢׳” ג†’ ׳¦׳ž׳¦׳•׳ ׳×׳ ׳•׳¢׳”, ׳•׳’׳ ׳ž׳¢׳¨׳›׳•׳× ׳׳—׳¨׳•׳×).
   ׳œ׳ ׳ž׳‘׳˜׳œ׳™׳ ׳׳× ׳”׳ž׳¢׳‘׳¨ ׳•׳œ׳ ׳ž׳©׳˜׳—׳™׳ ׳׳× ׳›׳•׳œ׳ ׳œ׳׳•׳×׳” ׳”׳•׳₪׳¢׳” (׳׳– ׳׳™ ׳׳₪׳©׳¨ ׳œ׳”׳‘׳—׳™׳Ÿ ׳‘׳™׳Ÿ ׳”׳׳₪׳§׳˜׳™׳) -
   ׳ž׳©׳׳™׳¨׳™׳ ׳׳× ׳׳•׳₪׳™ ׳”׳׳₪׳§׳˜ ׳‘׳×׳ ׳•׳¢׳” ׳ž׳•׳§׳˜׳ ׳× ׳ž׳׳•׳“: ׳¢׳©׳™׳¨׳™׳× ׳ž׳”׳ž׳¨׳—׳§ ׳”׳ž׳§׳•׳¨׳™. */
@media (prefers-reduced-motion: reduce) {
    /* ׳”׳ž׳©׳š ׳׳¨׳•׳š ׳’׳ ׳›׳׳Ÿ (1.2s): ׳‘׳ž׳›׳©׳™׳¨ ׳¢׳ž׳•׳¡ ׳׳ ׳™׳ž׳¦׳™׳” ׳©׳œ ׳—׳¦׳™ ׳©׳ ׳™׳™׳” ׳ž׳§׳‘׳œ׳× ׳©׳ ׳™ ׳₪׳¨׳™׳™׳ž׳™׳
       ׳‘׳œ׳‘׳“ ׳•׳œ׳ ׳ ׳¨׳׳™׳×. ׳×׳ ׳•׳¢׳” ׳§׳˜׳ ׳” + ׳–׳ž׳Ÿ ׳׳¨׳•׳š = ׳¢׳“׳™׳Ÿ ׳œ׳¨׳’׳™׳©׳™׳, ׳•׳¢׳“׳™׳™׳Ÿ ׳ž׳•׳¨׳’׳©. */
    .content[data-pagetrans="fade"]       { animation: pt-fadein 0.9s ease-out both; }
    .content[data-pagetrans="slide-up"]   { animation: pt-fadein 0.4s ease-out both, pt-slideup-rm 1.2s ease-out both; }
    .content[data-pagetrans="slide-side"] { animation: pt-fadein 0.4s ease-out both, pt-slideside-rm 1.2s ease-out both; }
    .content[data-pagetrans="zoom"]       { animation: pt-fadein 0.4s ease-out both, pt-zoom-rm 1.2s ease-out both; }
    .content[data-pagetrans="blur"]       { animation: pt-fadein 0.4s ease-out both, pt-blur-rm 1.2s ease-out both; }
    .content[data-pagetrans="none"]       { animation: none !important; }
}
/* ---- ׳‘׳™׳¦׳•׳¢׳™׳ ׳‘׳ž׳•׳‘׳™׳™׳œ: filter: drop-shadow ׳¢׳œ ׳׳œ׳ž׳ ׳˜׳™׳ ׳’׳“׳•׳œ׳™׳ ----
   ׳ ׳ž׳“׳“ ׳‘׳ž׳ ׳•׳¢ WebKit (׳¡׳₪׳׳¨׳™) ׳‘׳׳ž׳•׳œ׳¦׳™׳™׳× ׳׳™׳™׳₪׳•׳Ÿ: ׳‘׳™׳˜׳•׳œ ׳”-filter ׳”׳¢׳œ׳” ׳׳× ׳§׳¦׳‘ ׳”׳₪׳¨׳™׳™׳ž׳™׳
   ׳©׳œ ׳”׳¢׳ž׳•׳“ ׳ž-3 ׳œ-10 fps (׳₪׳™ 3.3). drop-shadow ׳ž׳—׳™׳™׳‘ ׳׳× ׳”׳ž׳ ׳•׳¢ ׳œ׳¨׳¡׳˜׳¨ ׳ž׳—׳“׳© ׳׳×
   ׳”׳׳œ׳ž׳ ׳˜ ׳›׳•׳œ׳• ׳‘׳›׳œ ׳₪׳¨׳™׳™׳; ׳¢׳œ ׳›׳¨׳˜׳™׳¡ ׳‘׳ž׳¡׳š ׳ž׳œ׳ ׳•׳¢׳œ ׳”׳˜׳™׳¨׳” ׳–׳” ׳—׳•׳ ׳§ ׳׳× ׳›׳œ ׳”׳¢׳ž׳•׳“ ׳•׳׳–
   ׳׳ ׳™׳ž׳¦׳™׳•׳× ׳§׳¦׳¨׳•׳× (׳›׳ž׳• ׳ž׳¢׳‘׳¨ ׳”׳¢׳ž׳•׳“) ׳ž׳¦׳•׳™׳¨׳•׳× ׳‘׳©׳ ׳™ ׳₪׳¨׳™׳™׳ž׳™׳ ׳•׳ ׳¨׳׳•׳× ׳›׳§׳₪׳™׳¦׳”.
   ׳‘׳ž׳•׳‘׳™׳™׳œ ׳ž׳—׳œ׳™׳₪׳™׳ ׳œ-box-shadow (׳–׳•׳œ -׳ž׳¦׳•׳™׳¨ ׳‘׳§׳•׳ž׳₪׳•׳–׳™׳˜׳•׳¨) ׳׳• ׳ž׳•׳•׳×׳¨׳™׳. */
@media (max-width: 640px) {
    /* ׳‘׳œ׳™ box-shadow! ׳”׳§׳œ׳£ ׳”׳•׳ ׳×׳ž׳•׳ ׳” ׳‘׳¦׳•׳¨׳” ׳œ׳-׳ž׳œ׳‘׳ ׳™׳× ׳¢׳œ ׳¨׳§׳¢ ׳©׳§׳•׳£: drop-shadow ׳¢׳•׳§׳‘
       ׳׳—׳¨׳™ ׳¦׳•׳¨׳× ׳”׳¦׳™׳•׳¨, ׳׳‘׳œ box-shadow ׳ž׳¦׳™׳™׳¨ ׳ž׳œ׳‘׳Ÿ -׳•׳‘׳–׳ž׳Ÿ ׳”׳ž׳¢׳‘׳¨, ׳›׳©׳”׳›׳¨׳˜׳™׳¡ ׳ž׳•׳§׳˜׳Ÿ/׳ž׳•׳–׳–,
       ׳”׳ž׳œ׳‘׳Ÿ ׳”׳–׳” ׳ ׳¨׳׳” ׳›׳ž׳• "׳ž׳¡׳’׳¨׳×" ׳¡׳‘׳™׳‘ ׳”׳¢׳ž׳•׳“. ׳”׳¦׳œ׳œ׳” ׳ž׳¦׳•׳™׳¨׳× ׳ž׳ž׳™׳œ׳ ׳‘׳×׳•׳š ׳’׳¨׳₪׳™׳§׳× ׳”׳§׳œ׳£. */
    .cms-bg-parchment .cms-card, .cms-bg-document01 .cms-card,
    .cms-bg-document02 .cms-card, .cms-bg-document03 .cms-card,
    .about-card {
        filter: none;
        box-shadow: none;
    }
    /* ׳›׳׳Ÿ ׳™׳•׳©׳‘ ׳”-drop-shadow ׳”׳™׳§׳¨ ׳©׳œ ׳”׳§׳œ׳£ (׳¢׳œ ׳©׳›׳‘׳× ׳”׳¨׳§׳¢, ׳œ׳ ׳¢׳œ ׳”׳›׳¨׳˜׳™׳¡) */
    .cms-bg-parchment .cms-bglayer, .cms-bg-document01 .cms-bglayer,
    .cms-bg-document02 .cms-bglayer, .cms-bg-document03 .cms-bglayer { filter: none; }
    .about-card::before,
    .cms-bg-parchment .cms-card::before, .cms-bg-document01 .cms-card::before,
    .cms-bg-document02 .cms-card::before, .cms-bg-document03 .cms-card::before { display: none; } /* ׳”׳‘׳–׳§ ׳”׳׳•׳¨ -׳¨׳¥ ׳ž׳¢׳œ ׳׳œ׳ž׳ ׳˜ ׳¢׳ ׳§ */
    /* ׳›׳•׳×׳¨׳× ׳”׳’׳™׳‘׳•׳¨: 9 drop-shadow ׳ž׳©׳•׳¨׳©׳¨׳™׳ ׳¢׳œ ׳׳œ׳ž׳ ׳˜ ׳ž׳•׳ ׳₪׳© -> 3 ׳‘׳œ׳‘׳“ ׳‘׳ž׳•׳‘׳™׳™׳œ */
    /* שלוש שכבות בלבד, **ובלי קו המתאר** -כפי שהיה כאן מאז ומתמיד:
       במסך של ‎390px‎ הכותרת קטנה, וטבעת של ‎0.7px‎ עליה אינה נראית
       ממילא. */
    .hero-title {
        filter:
            drop-shadow(0 2px 0 #4a2f19)
            drop-shadow(0 8px 18px rgba(13, 62, 120, 0.6))
            drop-shadow(0 0 13px rgba(255, 209, 90, 0.55));
    }
    /* ׳‘׳ž׳•׳‘׳™׳™׳œ: ׳”׳×׳•׳›׳Ÿ/׳”׳¡׳¦׳ ׳” ׳ž׳ž׳œ׳׳™׳ ׳›׳ž׳¢׳˜ ׳׳× ׳›׳œ ׳”׳’׳•׳‘׳”, ׳׳‘׳œ ׳”׳₪׳•׳˜׳¨ ׳ž׳•׳’׳‘׳” ׳ž׳¢׳˜ ׳›׳š ׳©׳§׳¦׳”
       ׳”׳¢׳œ׳™׳•׳Ÿ ׳©׳œ׳• (׳§׳™׳©׳•׳¨׳™ ׳”׳ž׳¡׳ž׳›׳™׳) ׳ž׳¦׳™׳¥ ׳‘׳×׳—׳×׳™׳× ׳”׳ž׳¡׳š -׳•׳§׳¦׳× ׳¡׳§׳¨׳•׳œ ׳—׳•׳©׳£ ׳׳× ׳”׳©׳׳¨.
       ׳׳•׳×׳• ׳˜׳™׳₪׳•׳œ ׳œ׳›׳œ ׳”׳¢׳ž׳•׳“׳™׳: ׳‘׳™׳× (.hero), ׳׳•׳“׳•׳× (.about) ׳•-CMS (.cms-page). */
    .hero,
    .about,
    .cms-page { min-height: calc(100dvh - 4.2rem - 5.5rem); }
}

/* ׳œ׳›׳¨׳˜׳™׳¡ ׳”׳×׳•׳›׳Ÿ ׳¢׳¦׳ž׳• ׳™׳© ׳׳ ׳™׳ž׳¦׳™׳™׳× ׳›׳ ׳™׳¡׳” ׳ž׳©׳œ׳• (hero-pop / about-reveal) -׳”׳™׳ ׳–׳”׳” ׳‘׳›׳œ
   ׳”׳¢׳ž׳•׳“׳™׳, ׳ž׳ž׳œ׳׳× ׳׳× ׳”׳ž׳¡׳š ׳‘׳ž׳•׳‘׳™׳™׳œ, ׳•׳ž׳›׳¡׳” ׳œ׳’׳ž׳¨׳™ ׳¢׳œ ׳׳₪׳§׳˜ ׳”׳ž׳¢׳‘׳¨: ׳ž׳” ׳©׳¨׳•׳׳™׳ ׳”׳•׳ ׳×׳ž׳™׳“
   "׳”׳›׳¨׳˜׳™׳¡ ׳§׳•׳₪׳¥", ׳‘׳œ׳™ ׳§׳©׳¨ ׳œ׳׳₪׳§׳˜ ׳©׳ ׳‘׳—׳¨. ׳›׳©׳™׳© ׳ž׳¢׳‘׳¨ ׳₪׳¢׳™׳œ -׳”׳ž׳¢׳‘׳¨ ׳”׳•׳ ׳”׳׳₪׳§׳˜, ׳•׳”׳›׳¨׳˜׳™׳¡
   ׳ ׳›׳ ׳¡ ׳™׳—׳“ ׳׳™׳×׳•. (data-pagetrans="none" ׳©׳•׳ž׳¨ ׳¢׳œ ׳”׳”׳×׳ ׳”׳’׳•׳× ׳”׳ž׳§׳•׳¨׳™׳×.) */
.content[data-pagetrans]:not([data-pagetrans="none"]) .cms-card,
.content[data-pagetrans]:not([data-pagetrans="none"]) .about-card,
.content[data-pagetrans]:not([data-pagetrans="none"]) .about-inner { animation: none; }

/* ׳’׳¨׳¡׳׳•׳× ׳ž׳¨׳•׳¡׳ ׳•׳× -׳×׳–׳•׳–׳” ׳©׳œ ׳₪׳™׳§׳¡׳œ׳™׳ ׳‘׳•׳“׳“׳™׳, ׳œ׳ ׳ž׳¡׳—׳¨׳¨׳× ׳׳‘׳œ ׳ž׳‘׳“׳™׳œ׳” ׳‘׳™׳Ÿ ׳”׳׳₪׳§׳˜׳™׳ */
@keyframes pt-slideup-rm   { from { transform: translateY(30px); } to { transform: none; } }
@keyframes pt-slideside-rm { from { transform: translateX(38px); } to { transform: none; } }
@keyframes pt-zoom-rm      { from { transform: scale(0.93); }      to { transform: none; } }
@keyframes pt-blur-rm      { from { filter: blur(7px); }           to { filter: blur(0); } }

/* ============================================================================
   ׳×׳™׳§ ׳¢׳‘׳•׳“׳•׳× (Portfolio) -׳×׳‘׳ ׳™׳× 1: ׳§׳¨׳•׳¡׳œ׳× 3D ׳ž׳¡׳×׳•׳‘׳‘׳× (Coverflow)
   ׳”׳¡׳œ׳™׳™׳“׳¨ ׳¢׳¦׳ž׳• ׳ž׳•׳ ׳¢ ׳‘-js/portfolio.js (׳˜׳¨׳ ׳¡׳₪׳•׳¨׳ž׳™׳ ׳ž׳—׳•׳©׳‘׳™׳ ׳œ׳›׳œ ׳©׳§׳•׳₪׳™׳×).
   ============================================================================ */
.pf-page {
    pointer-events: auto;                 /* .content ׳ž׳•׳•׳×׳¨ ׳¢׳œ ׳׳™׳¨׳•׳¢׳™׳ -׳›׳׳Ÿ ׳¦׳¨׳™׳š ׳׳™׳ ׳˜׳¨׳׳§׳¦׳™׳” */
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    /* ׳”׳§׳•׳ ׳¡׳•׳œ׳” ׳ ׳™׳×׳ ׳× ׳œ׳”׳’׳“׳œ׳” ׳¢׳“ 300%, ׳•׳׳– ׳”׳©׳§׳•׳₪׳™׳•׳× ׳—׳•׳¨׳’׳•׳× ׳”׳¨׳‘׳” ׳ž׳¢׳‘׳¨ ׳œ׳ž׳¡׳š -׳ ׳ž׳“׳“
       ג€Žbody.scrollWidthג€Ž ׳©׳œ 2629px ׳‘׳—׳œ׳•׳Ÿ 1414, ׳›׳œ׳•׳ž׳¨ ׳’׳œ׳™׳œ׳” ׳׳•׳₪׳§׳™׳× ׳©׳œ ׳”׳׳×׳¨ ׳›׳•׳œ׳•.
       ג€Žclipג€Ž ׳•׳œ׳ ג€Žhiddenג€Ž: ג€Žhiddenג€Ž ׳¢׳œ ׳¦׳™׳¨ ׳׳—׳“ ׳ž׳›׳¨׳™׳— ג€Žautoג€Ž ׳¢׳œ ׳”׳©׳ ׳™ ׳•׳”׳™׳” ׳™׳•׳¦׳¨ scroll
       container ׳©׳§׳•׳˜׳¢ ׳׳× ׳”׳¡׳¦׳ ׳” ׳©׳ž׳׳—׳•׳¨. */
    overflow-x: clip;
    padding: clamp(1rem, 4vh, 3rem) clamp(0.6rem, 3vw, 2rem) clamp(1.2rem, 4vh, 3rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.8rem, 2.4vh, 1.6rem);
    color: var(--c-paper, #fff6e6);
}
/* ׳”׳›׳•׳×׳¨׳× ׳•׳”׳˜׳§׳¡׳˜ ׳ž׳¢׳œ ׳”׳§׳•׳ ׳¡׳•׳œ׳” (on top): ׳”׳‘׳ž׳” (.pf-stage) ׳™׳•׳¦׳¨׳× stacking context
   ׳‘׳’׳œ׳œ ׳”-perspective ׳•׳¦׳™׳™׳¨׳” ׳ž׳¢׳œ ׳”׳›׳•׳×׳¨׳× ׳›׳©׳”׳˜׳§׳¡׳˜ ׳ž׳•׳–׳– ׳œ׳×׳•׳›׳” (--pf-ty). z-index
   ׳ž׳¢׳œ׳” ׳׳× ׳”׳›׳™׳×׳•׳‘ ׳§׳“׳™׳ž׳”; pointer-events:none ׳›׳“׳™ ׳©׳œ׳ ׳™׳—׳¡׳•׳ ׳׳× ׳’׳¨׳™׳¨׳× ׳”׳§׳¨׳•׳¡׳œ׳”. */
.pf-head { text-align: center; max-width: 46rem; position: relative; z-index: 3; pointer-events: none; }
.pf-head a, .pf-head button { pointer-events: auto; } /* ׳׳ ׳™׳×׳•׳•׳¡׳₪׳• ׳§׳™׳©׳•׳¨׳™׳ ׳‘׳›׳™׳×׳•׳‘ */
.pf-heading {
    margin: 0;
    /* ׳’׳•׳₪׳Ÿ/׳’׳•׳“׳œ/׳¦׳‘׳¢ ׳ ׳©׳œ׳˜׳™׳ ׳ž׳”׳ ׳™׳”׳•׳œ (׳×׳™׳§ ׳¢׳‘׳•׳“׳•׳× ג† ׳˜׳™׳₪׳•׳’׳¨׳₪׳™׳”). ׳›׳©׳œ׳ ׳”׳•׳’׳“׳¨
       ׳¦׳‘׳¢, ׳”-fill ׳©׳§׳•׳£ ׳•׳’׳¨׳“׳™׳׳ ׳˜ ׳”׳–׳”׳‘ ׳ž׳•׳¦׳’; ׳¦׳‘׳¢ ׳ž׳₪׳•׳¨׳© ׳ž׳ž׳œ׳ ׳׳× ׳”׳˜׳§׳¡׳˜ ׳•׳ž׳›׳¡׳” ׳¢׳œ׳™׳•. */
    font-family: var(--pf-h-font, var(--logo-font, 'Titan One')), system-ui, sans-serif;
    font-size: calc(clamp(1.9rem, 5.2vw, 3.4rem) * var(--pf-h-scale, 1));
    line-height: 1.05;
    background: linear-gradient(180deg, #fffefb 4%, var(--c-gold-light, #ffe7a3) 46%, var(--c-gold, #ffd15a) 74%, var(--c-gold-deep, #d39a1a) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: var(--pf-h-color, transparent); color: var(--pf-h-color, transparent);
    filter: drop-shadow(0 2px 0 rgba(90, 56, 30, 0.55)) drop-shadow(0 6px 16px rgba(13, 62, 120, 0.45));
    letter-spacing: 0.5px;
}
.pf-intro {
    margin: 0.5rem 0 0;
    font-family: var(--pf-i-font, inherit);
    font-size: calc(clamp(0.95rem, 2.2vw, 1.2rem) * var(--pf-i-scale, 1));
    font-weight: 600;
    color: var(--pf-i-color, #f3ecdd);
    text-shadow: 0 1px 3px rgba(13, 30, 60, 0.6);
}

/* ---- ׳”׳‘׳ž׳”: ׳ž׳™׳›׳œ ׳”׳₪׳¨׳¡׳₪׳§׳˜׳™׳‘׳” ---- */
.pf-stage {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1150px;                          /* ׳₪׳¨׳¡׳₪׳§׳˜׳™׳‘׳” ׳—׳–׳§׳” = 3D ׳“׳¨׳ž׳˜׳™ */
    perspective-origin: 50% 45%;
    padding-inline: clamp(2.6rem, 6vw, 4.5rem);   /* ׳ž׳§׳•׳ ׳œ׳—׳™׳¦׳™ ׳”׳ ׳™׳•׳•׳˜ */
}
.pf-viewport {
    position: relative;
    width: 100%;
    height: clamp(260px, 44vw, 540px);
    transform-style: preserve-3d;
    /* ׳ž׳™׳§׳•׳, ׳”׳˜׳™׳™׳× ׳₪׳œ׳˜׳₪׳•׳¨׳ž׳” (3D ׳œ׳ž׳¢׳œ׳”/׳œ׳ž׳˜׳”) ׳•׳’׳•׳“׳œ ׳”׳§׳•׳ ׳¡׳•׳œ׳” (׳ž׳—׳©׳‘) */
    transform: translate(var(--pf-ox, 0%), var(--pf-oy, 0%)) rotateX(var(--pf-tilt, 0deg)) scale(var(--pf-w, 1), var(--pf-h, 1));
    transform-origin: center center;
    /* ---- צביטה לזום חייבת להישאר אפשרית ----
       pan-y מתיר **רק** גלילה אנכית: צביטה אינה ברשימה, ולכן היא נחסמה מעל
       הקרוסלה - שהיא רוב עמוד תיק העבודות - גם כשנעילת הזום כבויה. נמדד:
       עם data-zoomlock="0" ומטא-viewport פתוח, visualViewport.scale נשאר
       1.00 בדיוק אחרי מחוות צביטה אמיתית, בעוד שבבית ובאודות הוא עלה ל-2.20.
       מבחינת המשתמש זה "נעילת הזום לא עובדת בתיק העבודות, הוא נעול תמיד".
       pinch-zoom מוסיף את הצביטה בלי לוותר על המחווה האופקית של הקרוסלה. */
    touch-action: pan-y pinch-zoom;
    cursor: grab;
}
/* ---- תקרת גובה לפי החלון, ולא רק לפי רוחבו ----
   **כל גבהי הבמה נגזרו מ-‎vw‎ בלבד** (‎44vw‎ כאן, וערכים משלהן בתבניות 2/4/7),
   כלומר מ**רוחב** המסך. במסך **רחב ונמוך** זה נשבר: iPad בלנדסקייפ הוא 1194
   רוחב - מעל סף ה-1024 ולכן הוא מקבל את פריסת המחשב - עם גובה של 716 בלבד.
   **נמדד על האתר החי:** תחתית שלט הכיתוב נחתה על **716 מתוך 716**, כלומר על
   הפיקסל האחרון, והעמוד נעול-גלילה (‎scrollHeight === clientHeight‎) - אז מה
   שאינו נכנס פשוט אבוד. אותו דבר בלפטופ 1440x820, שם נשארו 55px.

   **‎max-height‎ ולא ארבעה ‎clamp‎ מתוקנים:** כלל אחד חל על כל התבניות, כולל
   כאלה שיתווספו, ואינו נוגע ב-‎height‎ של אף אחת מהן. הוא נכנס לתוקף **רק**
   כשאין גובה - בכל מקום אחר ה-‎clamp‎ הקיים נמוך ממנו ממילא.

   **58dvh הוא הערך הנדיב ביותר שאינו נוגע במחשב** (בקשת המשתמש), ונמדד ולא
   נבחר: ב-1500x950 ‎58dvh = 551‎ וב-1920x1080 ‎626‎, שניהם מעל תקרת ה-‎clamp‎
   (540) ולכן אפס שינוי; ב-54dvh המחשב כבר מתכווץ. במובייל התקרה תמיד גבוהה
   מ-300px של הכלל שם, ולכן גם שם אפס שינוי.

   **‎dvh‎ ולא ‎vh‎** -חוק מתועד כאן: באייפון ‎vh‎ נמדד מול ה-viewport ה**גדול**,
   בלי סרגלי ספארי, וזו בדיוק הרצועה שנחתכת. שורת ה-‎vh‎ נשארת לפניו כנפילה
   לאחור לדפדפן ישן.

   **התקרה פר-תבנית ופרופורציונלית לתקרת ה-‎clamp‎ שלה** (‎58/540‎ = כ-‎0.107dvh‎
   לכל פיקסל), ולא מספר אחד לכולן. תקרה אחידה נמדדה כפוגעת דווקא בתבנית
   הגבוהה: הצינור מבקש 640px, ו-‎58dvh‎ כיווץ אותו **גם ב-1500x950** (806→695)
   וגם ב-1920 - כלומר בדיוק מה שהתבקש לא לגעת בו. עם היחס, כל תבנית נשארת על
   תקרת ה-‎clamp‎ שלה במחשב ומצטמצמת רק כשאין גובה.
   המשתנה הוא **מספר טהור** ולא אורך, כדי ששורת ה-‎vh‎ תוכל לשמש כנפילה לאחור:
   ערך עם ‎dvh‎ בתוך משתנה היה נכשל בזמן החישוב ונופל ל-‎initial‎ במקום לכלל
   שמעליו. */
.pf-viewport { --pf-vcap: 58; max-height: calc(var(--pf-vcap) * 1vh); }
.pf-viewport { max-height: calc(var(--pf-vcap) * 1dvh); }
/* ---- כשהעמוד נעול לזום, חוזרים למצב הקודם ----
   ‎touch-action‎ מוכרע ב-compositor **לפני** שה-JS רץ, ולכן אילו הצביטה הייתה
   מותרת תמיד, ‎prevMulti‎ (שמונע ריבוי-נגיעות) היה מקבל ‎touchmove‎ שאינו ניתן
   לביטול והנעילה הייתה נחלשת דווקא באייפון - שם היא כל הסיפור, כי הוא מתעלם
   מ-‎user-scalable=no‎. ‎data-zoomlock‎ נכתב מחדש בכל החלה (טעינה, ניווט SPA
   ותצוגה מקדימה בניהול), ולכן הכלל הזה עוקב אחרי המתג בזמן אמת. */
main.content[data-zoomlock="1"] .pf-viewport { touch-action: pan-y; }
main.content[data-zoomlock="1"] .pf-tpl-4 .pf-viewport { touch-action: none; }

/* **נעילת הזום חוסמת גם הקשה כפולה, לא רק צביטה** (בקשת המשתמש).
   ‎pan-y‎ שלמעלה מסלק את הצביטה מהקרוסלה, אבל "הקש-פעמיים-להגדלה" היא מחווה
   נפרדת שהמשיכה לעבוד בכל שאר העמוד - כלומר הזום היה נעול לפי מחווה אחת
   ופתוח לפי אחרת, וזה נקרא כנעילה שלא עובדת. ‎manipulation‎ מבטל את ההקשה
   הכפולה בלבד ומשאיר גלילה כרגיל, ולכן הוא בטוח על כל אזור התוכן. */
main.content[data-zoomlock="1"] { touch-action: manipulation; }

/* אותו טיפול לכל פקד שנלחץ **ברצף** בתיק העבודות: נקודות, צ'יפים, כפתורי
   הכיתוב, חיצי הגלריה, הממוזערות והלייטבוקס. בכולם הנגיעה השנייה נקראה
   כהקשה כפולה והמסך קפץ בהגדלה. חל תמיד, גם כשנעילת הזום כבויה: זום שנפתח
   מלחיצה על כפתור אינו כוונת המשתמש בשום מצב. */
.pf-dot, .pf-chip, .pf-cap-more, .pf-cap-link,
.pf-gal-nav, .pf-gal-thumb,
.pf-lb-nav, .pf-lb-x, .pf-detail-close { touch-action: manipulation; }
.pf-viewport.pf-dragging { cursor: grabbing; }
/* ---- הסמן אומר מה הלחיצה תעשה ----
   הבמה כולה ‎grab‎ ("אפשר לגרור"), אבל על הכרטיס ה**פעיל** שיש לו קישור לחיצה
   אינה גוררת אלא **פותחת את האתר**, ושם הסמן חייב להיות אצבע. הבחירה מוגבלת
   ל-‎a.pf-frame‎ ולכן היא מדויקת מעצם המרקאפ: ‎pages/portfolio.php‎ פולט ‎<a>‎
   רק כש-‎link‎ אינו ריק **ואין וידאו** (בווידאו הלחיצה פותחת נגן, והכרטיס ‎div‎).
   ‎.pf-active‎ הכרחי: על כרטיס צדדי הלחיצה רק ממרכזת אותו, כלומר היא עדיין
   ניווט בקרוסלה ולא יציאה לאתר אחר.
   **וצריך לבטל במפורש את ה-‎pointer‎ של הדפדפן על הכרטיס הצדדי.** ‎<a>‎ מקבל
   ‎cursor: pointer‎ מגיליון ברירת המחדל של הדפדפן, ולכן נמדד שגם שכן מקושר
   הראה אצבע -בעוד שלחיצה עליו רק **ממרכזת** אותו ואינה יוצאת לשום אתר. שם
   ‎grab‎ הוא הנכון: השכן הוא עדיין חלק מהקרוסלה, בדיוק כמו הבמה שמאחוריו.
   **ה-specificity כאן הוא המימוש, ולכן גם הסדר:** השכן הוא (0,3,1) בגלל
   ה-‎:not()‎, הפעיל (0,2,1), וכלל הגרירה חייב לגבור על **שניהם** -ולכן הוא
   נכתב גם הוא כ-(0,3,1) ויושב אחרון. ‎cursor‎ אמנם עובר בירושה, אבל אלמנט
   שמגדיר לעצמו ערך מפסיק לרשת, ולכן אי אפשר להסתמך כאן על ה-viewport. */
.pf-slide:not(.pf-active) a.pf-frame { cursor: grab; }
.pf-slide.pf-active a.pf-frame { cursor: pointer; }
.pf-viewport.pf-dragging .pf-slide a.pf-frame { cursor: grabbing; }
.pf-viewport.pf-dragging .pf-slide { transition: none; }
/* ---- ‎will-change‎ הוסר לגמרי, ולא "רק בזמן תנועה" ----
   **נמדד:** ספירת שכבות ה-compositing עם ‎pf-dragging‎ ובלעדיה זהה (118 מול
   127; הגרירה אפילו מפחיתה) - כלומר הרמז לא הוסיף **שום** שכבה. וזה הגיוני:
   כל שקופית נושאת ‎transform‎ תלת-מימדי בתוך ‎preserve-3d‎, ואלמנט כזה מקודם
   לשכבה משלו ממילא. הרמז היה עלות בלי תמורה.
   וגרוע מזה - הוא הודלק ב-‎pointerdown‎ וכובה בסוף ההתייצבות, כלומר בדיוק
   בשתי הנקודות שבהן המשתמש מצפה לתגובה. MDN מפורש: ‎will-change‎ נועד להינתן
   **מראש** ("give the browser time to do the optimizations"), והדלקה ברגע
   האינטראקציה גובה את מחיר בניית השכבות בלי להספיק להרוויח מהן. */
/* ---- ההתייצבות אחרי שחרור האצבע ----
   המעבר הרגיל (0.66s, easing עם כניסה איטית) נועד ללחיצה על חץ: שם התנועה
   מתחילה מאפס. אחרי זריקה באצבע התנועה **כבר במהירות**, ו-easing שמאיץ
   מהתחלה קורא כאילו התנועה נלקחה מהיד וגורם אחר מסיים אותה.
   ‎cubic-bezier(0.16, 1, 0.3, 1)‎ = יציאה מהירה והאטה ארוכה בסוף - ההמשך
   הטבעי של הזריקה. קצר יותר (0.42s) כי חצי מהדרך כבר נעשה באצבע. */
.pf-viewport.pf-settling .pf-slide {
    /* ‎visibility‎ חייב להופיע גם כאן ובאותו משך של ה-‎opacity‎. בלעדיו הוא
       מתחלף **מיד** בעוד שהכרטיס עוד דוהה, כלומר הוא נמחק באמצע התנועה -
       וזה בדיוק מה שנקרא "התמונות נעלמות כשהקונסולה עוצרת" בקיר המעוקל. */
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.32s ease-out, filter 0.32s ease-out, visibility 0.32s;
}
@media (prefers-reduced-motion: reduce) {
    .pf-viewport.pf-settling .pf-slide { transition-duration: 0.01s; }
}   /* ׳’׳¨׳™׳¨׳” 1:1 -׳¢׳•׳§׳‘ ׳׳—׳¨׳™ ׳”׳׳¦׳‘׳¢ */
/* ---- ׳ ׳™׳•׳•׳˜/׳ ׳§׳•׳“׳•׳×/׳ž׳•׳ ׳”: ׳”׳’׳“׳¨׳” ׳ ׳₪׳¨׳“׳× ׳œ׳ž׳—׳©׳‘ ׳•׳œ׳ž׳•׳‘׳™׳™׳œ ----
   PHP ׳׳™׳ ׳• ׳™׳•׳“׳¢ ׳‘׳׳™׳–׳” ׳ž׳›׳©׳™׳¨ ׳ž׳“׳•׳‘׳¨, ׳•׳œ׳›׳Ÿ ׳”׳•׳ ׳₪׳•׳œ׳˜ ׳׳× **׳©׳×׳™** ׳”׳×׳¦׳•׳¨׳•׳×
   (׳¡׳™׳•׳ž׳× ג€Ž-dג€Ž ׳œ׳ž׳—׳©׳‘, ג€Ž-mג€Ž ׳œ׳ž׳•׳‘׳™׳™׳œ) ׳•׳”-media query ׳›׳׳Ÿ ׳‘׳•׳—׳¨ ׳׳™׳–׳• ׳ž׳”׳Ÿ ׳—׳œ׳”.
   ג€Ž.pf-nav-slotג€Ž ׳”׳•׳ ׳¢׳•׳×׳§ ׳©׳œ ׳”׳—׳™׳¦׳™׳ ׳‘׳ž׳™׳§׳•׳ ׳ž׳¡׳•׳™׳; ׳ž׳•׳¦׳’ ׳¨׳§ ׳”׳¢׳•׳×׳§ ׳©׳ž׳×׳׳™׳
   ׳œ׳ž׳›׳©׳™׳¨ ׳”׳ ׳•׳›׳—׳™ (׳¨׳׳” ג€Žpf-navd-*ג€Ž / ג€Žpf-navm-*ג€Ž ׳œ׳ž׳˜׳”). */
/* ג€Ž.pf-pageג€Ž ׳‘׳¡׳œ׳§׳˜׳•׳¨ ׳׳™׳ ׳• ׳§׳™׳©׳•׳˜: ג€Ž.pf-navrowג€Ž ׳ž׳’׳“׳™׳¨ ג€Ždisplay: flexג€Ž ׳‘׳׳•׳×׳”
   specificity ׳•׳ž׳׳•׳—׳¨ ׳™׳•׳×׳¨ ׳‘׳§׳•׳‘׳¥, ׳•׳›׳š **׳›׳œ** ׳©׳œ׳•׳©׳× ׳”׳ž׳™׳§׳•׳ž׳™׳ ׳”׳•׳¦׳’׳• ׳™׳—׳“. */
.pf-page .pf-nav-slot { display: none; }
@media (min-width: 641px) {
    .pf-nonav-d .pf-nav, .pf-nonav-d .pf-nav-slot { display: none !important; }
    .pf-nodots-d .pf-dots { display: none; }
    .pf-nocounter-d .pf-counter { display: none; }
    .pf-nodots-d.pf-nocounter-d .pf-controls { display: none; }
    .pf-navd-sides  .pf-nav-slot[data-pos="sides"]  { display: block; }
    .pf-navd-top    .pf-nav-slot[data-pos="top"],
    .pf-navd-bottom .pf-nav-slot[data-pos="bottom"] { display: flex; }
}
@media (max-width: 640px) {
    .pf-nonav-m .pf-nav, .pf-nonav-m .pf-nav-slot { display: none !important; }
    .pf-nodots-m .pf-dots { display: none; }
    .pf-nocounter-m .pf-counter { display: none; }
    .pf-nodots-m.pf-nocounter-m .pf-controls { display: none; }
    .pf-navm-sides  .pf-nav-slot[data-pos="sides"]  { display: block; }
    .pf-navm-top    .pf-nav-slot[data-pos="top"],
    .pf-navm-bottom .pf-nav-slot[data-pos="bottom"] { display: flex; }
    /* ׳©׳§׳™׳₪׳•׳× ׳”׳›׳¨׳˜׳™׳¡׳™׳ -׳’׳¨׳¡׳× ׳”׳ž׳•׳‘׳™׳™׳œ. ׳ž׳©׳›׳×׳‘׳× ׳׳× ׳”׳ž׳׳₪׳™׳™׳Ÿ ׳•׳œ׳ ׳׳× ׳”׳ž׳©׳×׳ ׳”, ׳›׳™
       ׳”׳×׳¦׳•׳’׳” ׳”׳ž׳§׳“׳™׳ž׳” ׳‘׳ ׳™׳”׳•׳œ ׳›׳•׳×׳‘׳× ׳׳× ג€Ž--pf-opacityג€Ž inline (׳•-inline ׳’׳•׳‘׳¨).
       ג€Ž.pf-pageג€Ž ׳‘׳¡׳œ׳§׳˜׳•׳¨: ׳”׳›׳œ׳œ ׳©׳œ ג€Ž.pf-frameג€Ž ׳™׳•׳©׳‘ ׳ž׳׳•׳—׳¨ ׳™׳•׳×׳¨ ׳‘׳§׳•׳‘׳¥ ׳•׳‘׳׳•׳×׳”
       specificity, ׳•-media query ׳œ׳‘׳“׳• ׳׳™׳ ׳• ׳ž׳ ׳¦׳— ׳׳•׳×׳•. */
    .pf-page .pf-frame { opacity: var(--pf-opacity-m, 1); }
    .pf-page .pf-slide:not(.pf-active) .pf-frame {
        opacity: calc(var(--pf-opacity-m, 1) * var(--pf-opacity-bm, 1));
    }
}
.pf-track {
    list-style: none; margin: 0; padding: 0;
    position: absolute; inset: 0;
    transform-style: preserve-3d;
}

/* ---- ׳©׳§׳•׳₪׳™׳× ׳‘׳•׳“׳“׳× ---- */
.pf-slide {
    position: absolute;
    top: 50%; left: 50%;
    width: clamp(230px, 40vw, 600px);
    aspect-ratio: 16 / 10;
    margin: 0;
    /* **בלי ‎transform-style: preserve-3d‎ כאן.** ההקשר התלת-מימדי חי ב-‎.pf-viewport‎
       וב-‎.pf-track‎; על השקופית עצמה הוא רק אומר "גם הילדים שלי חיים ב-3D" -
       וכל ילד כזה מקודם לשכבת compositing נפרדת. אבל אף ילד כאן אינו תלת-מימדי:
       ‎.pf-frame‎ בלי transform, ‎.pf-reflection‎ עם ‎scaleY(-1)‎ דו-מימדי, ‎.pf-play‎
       עם ‎translate/scale‎. נמדד: 9 שכבות ‎a.pf-frame‎ + 5 שכבות ‎::after‎ שנוצרו
       על לא דבר. */
    /* **‎will-change‎ קבוע על כל השקופיות = שכבת GPU קבועה לכל אחת.** בקרוסלה
       של 15 פרויקטים, כל אחת עם תמונה, השתקפות וזוהר, זה עשרות שכבות שיושבות
       בזיכרון הגרפי בו-זמנית. ב-iOS זה מגיע ללחץ זיכרון, המערכת משחררת
       טקסטורות, והמשטח מצויר **ריק** עד ל-repaint הבא - מה שנראה כ"התמונות
       נעלמות ומופיעות רק כשמזיזים את הקרוסלה".
       זו אותה מלכודת שכבר מתועדת כאן על ‎.pf-frame‎ (ריבוי שכבות מנע מהפאנל
       ה-fixed להיצבע), רק שכאן היא נשארה על ההורה.
       היום הרמז ניתן **רק בזמן תנועה** - שם הוא באמת עוזר - ובמנוחה השכבות
       משתחררות. */
    will-change: auto;
    /* ‎backface-visibility‎ יושב **רק כאן**, על השקופית. הוא היה גם על ‎.pf-frame‎
       וגם על ‎.pf-img‎ "לחידוד קצוות ב-3D", וכל אחד מהם מקדם את האלמנט לשכבת
       compositing נפרדת - כלומר שלוש שכבות לכרטיס במקום אחת. נמדד: 9 שכבות
       ‎a.pf-frame‎ נוספות על 14 שכבות ‎li.pf-slide‎, בעמוד שכבר החזיק 127 שכבות
       ו-84MB ברוחב טלפון. */
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    visibility: visible;
    /* ‎visibility‎ **כן** מונפש, וזה מה שפוספס קודם: לפי המפרט כל ערך ביניים של
       פונקציית התזמון ממופה ל-‎visible‎, ולכן מעבר עליו משאיר את הכרטיס גלוי
       לכל אורך הדעיכה ומחביא אותו רק בסוף - ובחזרה הוא נדלק מיד. כך הכרטיס
       דוהה כמו קודם, אבל כשהוא בחוץ הוא באמת יוצא מהציור ומשחרר את השכבה
       שלו, במקום להישאר ‎opacity: 0‎ ולהחזיק טקסטורה. (‎transition-delay‎ הוא
       מה שהיה מעכב גם את החזרה - לא ‎transition‎.) */
    /* JS ׳“׳•׳¨׳¡ ׳׳× ׳”-transform; ׳”׳ž׳¢׳‘׳¨ ׳ ׳•׳×׳Ÿ ׳׳× ׳”׳×׳ ׳•׳¢׳” ׳”׳—׳œ׳§׳” */
    /* **‎--pf-dim‎ ולא ‎filter‎ ב-transition.** ‎filter‎ אינו רץ ב-compositor:
       כל ערך חדש מכריח רסטור מחדש של הכרטיס כולו, ועם transition זה קורה בכל
       פריים של המעבר ולכל שכן. ההכהיה עברה לשכבת ‎::after‎ שה-‎opacity‎ שלה
       משתנה - וזה מהדברים הבודדים שה-compositor עושה בלי לצייר מחדש. */
    transition: transform 0.66s cubic-bezier(0.22, 0.61, 0.24, 1), opacity 0.5s ease,
                filter 0.5s ease, visibility 0.5s;
    opacity: 0;
    pointer-events: none;
}
/* שקופית מחוץ לחלון הראייה: יוצאת מהציור בסוף הדעיכה (ראה ההערה על ‎visibility‎) */
.pf-slide.pf-off { visibility: hidden; }
.pf-slide.pf-live { pointer-events: auto; }
/* ‎<picture>‎ הוא ‎inline‎ כברירת מחדל, והתמונה שבתוכו לא הייתה ממלאת את הכרטיס */
.pf-pic { display: block; width: 100%; height: 100%; }
/* שכבת ההכהיה של השכנים. יושבת על ‎.pf-frame‎ (ולא על ‎.pf-slide‎) כדי לכסות
   בדיוק את הכרטיס עם הפינות המעוגלות שלו, ו-‎pointer-events: none‎ כדי שלא
   תחטוף את הלחיצה שאמורה למרכז את השכן. */
.pf-frame::after {
    content: ''; position: absolute; inset: 0;
    border-radius: inherit;
    background: #05101f;
    opacity: var(--pf-dim, 0);
    pointer-events: none;
    /* אותו קצב של המסגרת (‎--pf-lit‎): שתי שכבות הבהירות של אותו כרטיס חייבות
       להשתנות יחד, אחרת רואים אותן כשתי תנועות נפרדות */
    transition: opacity var(--pf-lit, 0.28s) ease;
    z-index: 3;
}
.pf-viewport.pf-dragging .pf-frame::after { transition: none; }       /* ׳¨׳§ ׳©׳§׳•׳₪׳™׳•׳× ׳ ׳¨׳׳•׳× ׳ž׳§׳‘׳œ׳•׳× ׳׳™׳¨׳•׳¢׳™׳ */
.pf-frame {
    position: relative;
    display: block;
    width: 100%; height: 100%;
    border-radius: clamp(12px, 1.6vw, 20px);
    overflow: hidden;
    background: #0d1b30;
    border: 1px solid rgba(255, 231, 163, 0.35);
    box-shadow:
        0 26px 55px -14px rgba(6, 16, 36, 0.72),
        0 8px 20px rgba(6, 16, 36, 0.4),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    text-decoration: none;
    /* **המעבר בין "כרטיס רקע" ל"כרטיס פעיל" חייב transition, כי המחלקה בינארית.**
       ‎.pf-active‎ נקבע לפי הכרטיס הקרוב למרכז, כלומר היא עוברת משכן לשכן ברגע
       אחד באמצע הגרירה -ובלי transition השקיפות קפצה בבת-אחת מ-‎--pf-opacity‎
       ל-‎--pf-opacity * --pf-opacity-b‎. נמדד בגרירה איטית בטלפון (טבעת, 85%
       שקיפות רקע): **קפיצה של 0.150 בפריים בודד, בשני כרטיסים באותו פריים** -
       אחד נדלק והשני נכבה. כל שאר התנועה חלקה, ולכן דווקא זה נקרא כ"לאג".
       המשך זהה ל-‎--pf-dim‎ ול-‎opacity‎ של ‎.pf-slide‎ (0.5s): שלוש שכבות
       הבהירות של אותו כרטיס חייבות להשתנות באותו קצב, אחרת רואים אותן נפרדות.
       **‎box-shadow‎ כן נכנס, וזה נמדד ולא הונח.** הוא אינו רץ ב-compositor,
       ולכן הנטייה הראשונה הייתה להשאיר אותו בחוץ (אותו שיקול שהוציא את ‎filter‎
       מה-transition והעביר את ההכהיה ל-‎::after‎). אבל בטבעת ההילה הכחולה עוברת
       מ-‎22px/0.4‎ ל-‎34px/0.65‎ -כלומר בלעדיו נשארת קפיצה **נראית** בדיוק ברגע
       שכל השאר כבר חלק. נמדד: בלי transition ‎box-shadow‎ השתנה **פעמיים בלבד,
       שתיהן בדיוק בפריים ההחלפה**; איתו -118 שינויים מדורגים. והמחיר נמדד
       בשלוש ריצות מול שלוש ריצות ביקורת: ‎0-1‎ פריימים מעל 32ms בשני הצדדים,
       מרבי 22-35ms מול 26-35ms -כלומר אפס. זה קורה פעם אחת למעבר שקופית ולא
       בכל פריים של גרירה, ושם ההבדל מול ‎filter‎.
       **‎pf-dragging‎ אינו מבטל את זה** (הוא מכבה transition על ‎.pf-slide‎ ועל
       ‎::after‎ בלבד) -וזו הכוונה: בגרירה זה בדיוק הרגע שבו צריך את הריכוך. */
    /* **0.28s ולא 0.5s.** בקיר המעוקל הכרטיסים צמודים זה לזה והמסגרת היא כל
       מה שמבדיל את הנושא משכניו - ובקצב של 0.5s ההעברה נמשכת בדיוק כל אורך
       תנועת הכרטיס, כלומר **באמצע כל מעבר אף כרטיס אינו ממוסגר**. נמדד בסרט
       פריימים ב-390px: ב-168ms שני הכרטיסים נראים זהים ובלי מסגרת. בקצב מהיר
       יותר ההעברה נגמרת ברבע הראשון והנושא ברור לכל אורך הדרך, והריכוך שבשבילו
       ה-transition נוסף (קפיצת שקיפות של 0.150 בפריים אחד בטבעת) נשמר במלואו. */
    transition: opacity var(--pf-lit, 0.28s) ease, border-color var(--pf-lit, 0.28s) ease,
                box-shadow var(--pf-lit, 0.28s) ease;
    opacity: var(--pf-opacity, 1);                /* ׳¨׳ž׳× ׳©׳§׳™׳₪׳•׳× ׳”׳›׳¨׳˜׳™׳¡׳™׳ (׳ ׳©׳œ׳˜ ׳‘׳ ׳™׳”׳•׳œ) */
    /* **בלי backface-visibility כאן.** הוא יושב על .pf-slide ההורה, שגם נושא
       את ה-transform התלת-מימדי, ולכן הכפלתו על הכרטיס ועל התמונה רק הוסיפה שתי
       שכבות compositing לכל פריט (נמדד: 9 שכבות a.pf-frame מעל 14 שכבות li.pf-slide,
       בעמוד שכבר החזיק 127 שכבות ו-84MB ברוחב טלפון). ה-outline השקוף נשאר -
       הוא מכריח החלקת-קצה בסיבוב ואינו יוצר שכבה. */
    outline: 1px solid transparent;
}
/* ---- שקיפות כרטיסי הרקע (מד נפרד בניהול) ----
   **מכפיל** על השקיפות הכללית ולא ערך במקומה: כך "שקיפות הכרטיסים" ממשיכה
   לחול על כולם -כולל המרכזי -והמד הזה רק מרחיק עוד את מי שמאחור. ‎1‎ כברירת
   מחדל, ולכן הוספת הפקד לא שינתה שום אתר קיים.
   הסלקטור הוא ‎:not(.pf-active)‎ ולא "השכן הראשון": בטבעת ובצינור יש כמה
   כרטיסים ברקע בו-זמנית, וכולם שייכים לאותה החלטה. */
.pf-page .pf-slide:not(.pf-active) .pf-frame {
    opacity: calc(var(--pf-opacity, 1) * var(--pf-opacity-b, 1));
}
/* ג€Ž--pf-posג€Ž = "׳›׳™׳•׳•׳Ÿ ׳”׳×׳ž׳•׳ ׳”" ׳©׳ ׳’׳¨׳¨ ׳‘׳₪׳׳ ׳œ "׳×׳ž׳•׳ ׳” ׳¨׳׳©׳™׳×" ׳©׳‘׳ ׳™׳”׳•׳œ, ׳•׳ ׳₪׳œ׳˜ ׳¢׳œ ׳”׳©׳§׳•׳₪׳™׳×.
   ׳”׳›׳¨׳˜׳™׳¡ ׳‘׳§׳¨׳•׳¡׳œ׳” ׳”׳•׳ ׳”׳™׳—׳™׳“ ׳©׳—׳•׳×׳š ׳‘׳©׳ ׳™ ׳”׳¦׳™׳¨׳™׳ (ג€Žheight: 100%ג€Ž ׳‘׳™׳—׳¡ ׳§׳‘׳•׳¢), ׳•׳œ׳›׳Ÿ ׳“׳•׳•׳§׳
   ׳›׳׳Ÿ ׳”׳›׳™׳•׳•׳Ÿ ׳”׳›׳™ ׳ž׳©׳ž׳¢׳•׳×׳™ -׳•׳›׳׳Ÿ ׳”׳•׳ ׳₪׳©׳•׳˜ ׳œ׳ ׳”׳•׳—׳œ: ׳”׳¢׳¨׳š ׳”׳’׳™׳¢ ׳¨׳§ ׳‘-ג€Ždata-coverג€Ž, ׳©׳ ׳§׳¨׳
   ׳‘׳₪׳×׳™׳—׳× ׳›׳¨׳˜׳™׳¡ ׳”׳₪׳¨׳˜׳™׳. */
.pf-img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pf-pos, 50% 50%); display: block; user-select: none; }

/* ---- "הכול נראה": ‎contain‎ + מילוי שוליים מהתמונה עצמה ----
   הכרטיס הוא ‎aspect-ratio: 16/10‎ קבוע, ו-‎cover‎ חותך כל תמונה שאינה ביחס
   הזה. בתיק **מגוון** זה בולט: צילום בפורטרט (856×1600) מאבד את רוב גובהו
   לצד צילום מסך של קוד שנכנס במלואו.
   ‎contain‎ לבדו פותר את החיתוך ומחליף אותו בפסים ריקים, ולכן השוליים
   מתמלאים ב**אותה תמונה** מטושטשת ומוחשכת -בדיוק הפתרון שכבר מוכח כאן
   בגלריית התיאור (‎.pf-gal‎): המסגרת תמיד מלאה, שום פרט לא נחתך, והצבע
   תמיד מתאים לתמונה כי הוא בא ממנה.
   **‎::before‎ ולא שכבה נוספת במרקאפ:** ‎::after‎ כבר תפוס בהכהיית השכנים
   (‎--pf-dim‎), וכל אלמנט אמיתי שהיה נוסף כאן היה מקודם לשכבת compositing
   משלו בכל אחד מ-15 הכרטיסים.
   **‎--pf-refl‎ הוא ה-640w ולא המקור** (ראה portfolio.php): השכבה מטושטשת
   ב-22px, אין שום הפרש נראה, ויש הפרש של פי 6 בזיכרון. */
.pf-page[data-pf-fit="contain"] .pf-img { object-fit: contain; position: relative; z-index: 1; }
.pf-page[data-pf-fit="contain"] .pf-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--pf-refl);
    background-size: cover;
    background-position: center;
    /* ההגדלה מכסה את הקצוות שהטשטוש "אוכל" -בלעדיה נשארת מסגרת שקופה דקה */
    transform: scale(1.2);
    filter: blur(22px) brightness(0.5) saturate(1.15);
    pointer-events: none;
    z-index: 0;
}
/* בלי תמונה (וידאו בלבד\הדגמה) אין ממה לגזור מילוי, והשכבה הייתה יוצאת
   ריבוע כהה על הגרדיאנט שכבר שם */
.pf-page[data-pf-fit="contain"] .pf-slide:not([style*="--pf-refl"]) .pf-frame::before { display: none; }
/* ׳©׳›׳‘׳× ׳”׳—׳©׳›׳”/׳”׳“׳’׳©׳” -׳”׳©׳§׳•׳₪׳™׳•׳× ׳”׳¦׳“׳“׳™׳•׳× ׳›׳”׳•׳× ׳™׳•׳×׳¨, ׳”׳₪׳¢׳™׳œ׳” ׳ž׳•׳׳¨׳× */
.pf-frame-glow {
    position: absolute; inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(120% 80% at 50% 8%, rgba(255, 255, 255, 0.16), transparent 46%),
        linear-gradient(180deg, transparent 40%, rgba(6, 14, 32, 0.5) 100%);
    opacity: 0.9;
    transition: opacity 0.5s ease, background 0.5s ease;
    pointer-events: none;
}
.pf-slide.pf-active .pf-frame {
    border-color: rgba(255, 231, 163, 0.7);
    box-shadow:
        0 40px 80px -18px rgba(4, 12, 30, 0.8),
        0 12px 30px rgba(4, 12, 30, 0.5),
        0 0 0 1px rgba(255, 231, 163, 0.5),
        0 0 40px rgba(255, 209, 90, 0.22);
}
/* **שתי שכבות גם כאן, והשנייה שקופה בכוונה.** ל-‎.pf-frame-glow‎ כבר היה
   ‎transition: background‎, אבל הוא לא עשה דבר: גרדיאנטים ניתנים ל-interpolation
   רק כששני הצדדים באותו **מבנה** (אותו סוג, אותו מספר שכבות ואותו מספר עצירות
   צבע), וכאן המצב הלא-פעיל נשא שתי שכבות והפעיל אחת. נמדד בגרירה: ‎bg 2 -> 1‎
   בפריים שבו ‎pf-active‎ עברה -כלומר החלפה חדה בדיוק ברגע שכל השאר חלק.
   ה-‎linear-gradient‎ שנוסף כאן שקוף לגמרי (‎rgba(...,0)‎) ולכן המראה לא השתנה
   כהוא זה; מה שהשתנה הוא שעכשיו יש למה לעבור. */
.pf-slide.pf-active .pf-frame-glow {
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
        linear-gradient(180deg, transparent 40%, rgba(6, 14, 32, 0) 100%);
    opacity: 0.5;
}

/* ---- ׳”׳©׳×׳§׳₪׳•׳× ׳¨׳¦׳₪׳” ׳ž׳×׳—׳× ׳œ׳©׳§׳•׳₪׳™׳× ---- */
.pf-reflection {
    position: absolute;
    top: 100%; left: 0; right: 0;
    height: 42%;
    margin-top: 2px;
    background-image: var(--pf-refl);
    background-size: cover;
    background-position: bottom center;
    transform: scaleY(-1);
    border-radius: clamp(12px, 1.6vw, 20px);
    opacity: 0.22;
    filter: blur(1px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent 72%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent 72%);
    pointer-events: none;
}
.pf-slide.pf-active .pf-reflection { opacity: 0.32; }

/* ---- ׳×׳’ ׳”׳₪׳¢׳œ׳× ׳•׳™׳“׳׳• ׳¢׳œ ׳”׳›׳¨׳˜׳™׳¡ ---- */
.pf-play {
    position: absolute; top: 50%; left: 50%;
    width: clamp(46px, 8vw, 72px); height: clamp(46px, 8vw, 72px);
    display: grid; place-items: center;
    border: 0; padding: 0; cursor: pointer;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 34%, rgba(255, 244, 214, 0.97), rgba(232, 172, 62, 0.94));
    color: #16233e;
    box-shadow: 0 8px 22px rgba(6, 16, 36, 0.5), 0 0 0 6px rgba(255, 231, 163, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    z-index: 4;
    opacity: 0; transform: translate(-50%, -50%) scale(0.7);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 1.3, 0.4, 1);
    pointer-events: none;
}
.pf-play svg { width: 42%; height: 42%; margin-inline-start: 7%; }   /* ׳ž׳¨׳›׳•׳– ׳׳•׳₪׳˜׳™ ׳©׳œ ׳”׳ž׳©׳•׳œ׳© */
.pf-slide.pf-has-video.pf-active .pf-play { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; animation: pf-play-pulse 2.4s ease-in-out infinite; }
.pf-slide.pf-has-video.pf-live:not(.pf-active) .pf-play { opacity: 0.5; transform: translate(-50%, -50%) scale(0.78); pointer-events: auto; }
.pf-slide.pf-has-video .pf-frame:hover .pf-play { opacity: 1; transform: translate(-50%, -50%) scale(1.06); pointer-events: auto; }
.pf-play:hover { background: radial-gradient(circle at 50% 34%, #fff6da, #ffd15a); }
.pf-play:focus-visible { outline: 3px solid var(--c-gold, #ffd15a); outline-offset: 4px; opacity: 1; }
@keyframes pf-play-pulse {
    0%, 100% { box-shadow: 0 8px 22px rgba(6, 16, 36, 0.5), 0 0 0 6px rgba(255, 231, 163, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
    50%      { box-shadow: 0 8px 22px rgba(6, 16, 36, 0.5), 0 0 0 13px rgba(255, 231, 163, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
}
/* ׳›׳¨׳˜׳™׳¡ ׳•׳™׳“׳׳• ׳œ׳œ׳ ׳×׳ž׳•׳ ׳× ׳₪׳•׳¡׳˜׳¨ */
.pf-img-video { display: grid; place-items: center; background: radial-gradient(120% 100% at 50% 0%, #1a3358, #091730); }
.pf-img-video-icon { font-size: clamp(2rem, 6vw, 3.4rem); opacity: 0.5; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)); }

/* ---- ׳ ׳’׳Ÿ ׳•׳™׳“׳׳• ׳ž׳•׳˜׳ž׳¢ ׳‘׳×׳•׳š ׳›׳¨׳˜׳™׳¡ ׳”׳§׳¨׳•׳¡׳œ׳” (׳ž׳×׳œ׳‘׳© ׳¢׳œ ׳”׳›׳¨׳˜׳™׳¡ ׳¢׳¦׳ž׳•) ---- */
.pf-inline-player {
    position: absolute; inset: 0; z-index: 6;
    background: #000;
    border-radius: inherit;                       /* ׳ž׳×׳œ׳‘׳© ׳¢׳œ ׳¢׳™׳’׳•׳œ ׳”׳›׳¨׳˜׳™׳¡ */
    overflow: hidden;
    animation: pf-inline-in 0.26s ease both;
}
@keyframes pf-inline-in { from { opacity: 0; } to { opacity: 1; } }
.pf-inline-player iframe, .pf-inline-player video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border: 0; display: block; background: #000; object-fit: contain;
}
/* ׳‘׳–׳ž׳Ÿ ׳ ׳™׳’׳•׳Ÿ -׳ž׳¡׳×׳™׳¨׳™׳ ׳׳× ׳×׳’ ׳”׳”׳₪׳¢׳œ׳”, ׳”׳”׳©׳×׳§׳₪׳•׳× ׳•׳׳₪׳§׳˜ ׳”׳”׳™׳œ׳” ׳©׳œ ׳”׳›׳¨׳˜׳™׳¡ */
.pf-playing-slide .pf-play,
.pf-playing-slide .pf-frame-glow { display: none; }
.pf-playing-slide .pf-reflection { opacity: 0; }
.pf-inline-close {
    position: absolute; top: 0.45rem; inset-inline-end: 0.45rem; z-index: 3;
    width: 2rem; height: 2rem; display: grid; place-items: center;
    padding: 0; cursor: pointer;
    border-radius: 50%;
    border: 1px solid rgba(255, 231, 163, 0.5);
    background: rgba(13, 27, 48, 0.85); color: var(--c-gold-light, #ffe7a3);
    transition: background 0.15s, transform 0.12s, border-color 0.15s;
}
.pf-inline-close:hover { background: rgba(200, 60, 60, 0.7); color: #fff; border-color: rgba(255, 120, 120, 0.7); transform: scale(1.08); }
.pf-inline-close svg { width: 52%; height: 52%; }
.pf-inline-close:focus-visible { outline: 3px solid var(--c-gold, #ffd15a); outline-offset: 2px; }

/* ---- ׳—׳™׳¦׳™ ׳ ׳™׳•׳•׳˜ ---- */
.pf-nav {
    position: absolute;
    /* **‎manipulation‎ מבטל את "הקש-פעמיים-להגדלה" על הכפתור.** בטלפון שתי
       נגיעות מהירות בחץ נקראות כמחווה של זום, והמסך קפץ בהגדלה במקום להחליף
       שקופית - וזה קרה גם כשנעילת הזום דלוקה, כי הנעילה חלה על ה-‎viewport‎
       של הקרוסלה ולא על הכפתורים שמעליו. הערך משאיר גלילה וצביטה כרגיל
       ומבטל רק את הזום שבהקשה כפולה, וזו ההתנהגות הנכונה לכל כפתור. */
    touch-action: manipulation;
    top: calc(50% - clamp(10px, 4vw, 30px));
    transform: translateY(-50%);
    z-index: 60;
    width: clamp(2.6rem, 4.4vw, 3.5rem);
    height: clamp(2.6rem, 4.4vw, 3.5rem);
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 231, 163, 0.5);
    background: linear-gradient(180deg, rgba(21, 45, 82, 0.82), rgba(13, 30, 60, 0.9));
    color: var(--c-gold-light, #ffe7a3);
    cursor: pointer;
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 20px rgba(4, 12, 30, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transition: transform 0.16s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.pf-nav svg { width: 46%; height: 46%; }
.pf-nav.pf-prev { inset-inline-start: clamp(0.1rem, 1.4vw, 1rem); }
.pf-nav.pf-next { inset-inline-end: clamp(0.1rem, 1.4vw, 1rem); }
.pf-nav:hover { background: linear-gradient(180deg, rgba(30, 60, 105, 0.92), rgba(18, 40, 76, 0.95)); border-color: var(--c-gold, #ffd15a); transform: translateY(-50%) scale(1.08); box-shadow: 0 10px 26px rgba(4, 12, 30, 0.6), 0 0 18px rgba(255, 209, 90, 0.3); }
.pf-nav:active { transform: translateY(-50%) scale(0.96); }
.pf-nav:focus-visible { outline: 3px solid var(--c-gold, #ffd15a); outline-offset: 3px; }

/* ׳”׳•׳“׳¢׳× ׳”׳¢׳•׳’׳™׳•׳× ׳”׳™׳©׳ ׳” (.cookie-note) ׳”׳•׳¡׳¨׳” -׳™׳© ׳›׳¢׳× ׳”׳•׳“׳¢׳× "׳ž׳“׳™׳ ׳™׳•׳× ׳₪׳¨׳˜׳™׳•׳×"
   ׳—׳“-׳₪׳¢׳ž׳™׳× ׳”׳ ׳©׳œ׳˜׳× ׳ž׳”׳ ׳™׳”׳•׳œ; ׳”׳¢׳™׳¦׳•׳‘ ׳©׳œ׳” ׳‘-.privacy-notice ׳‘׳”׳ž׳©׳š ׳”׳§׳•׳‘׳¥. */

/* ---- ׳›׳™׳×׳•׳‘ ׳”׳₪׳¨׳•׳™׳§׳˜ ׳”׳₪׳¢׳™׳œ ---- */
/* ׳’׳•׳“׳œ ׳•׳”׳–׳–׳” ׳׳ ׳›׳™׳× ׳ ׳©׳œ׳˜׳™׳ ׳ž׳”׳ ׳™׳”׳•׳œ, ׳ ׳₪׳¨׳“ ׳œ׳ž׳—׳©׳‘ ׳•׳œ׳ž׳•׳‘׳™׳™׳œ (--pf-ts/--pf-ty).
   ׳”-scale ׳¢׳œ ׳”-font-size ׳•׳œ׳ transform: ׳”׳›׳™׳×׳•׳‘ ׳™׳•׳©׳‘ ׳‘׳–׳¨׳™׳ž׳”, ׳•-transform ׳”׳™׳”
   ׳ž׳§׳˜׳™׳Ÿ ׳׳× ׳”׳ž׳¨׳׳” ׳‘׳œ׳™ ׳œ׳₪׳ ׳•׳×/׳œ׳×׳₪׳•׳¡ ׳׳× ׳”׳ž׳§׳•׳ ׳©׳ž׳×׳—׳×׳™׳•. */
.pf-caption {
    text-align: center;
    /* ג€Žwidth: 100%ג€Ž ׳—׳•׳‘׳” ׳ž׳׳– ׳©׳”׳©׳œ׳˜ ׳ ׳›׳ ׳¡: ׳¢׳“ ׳׳– ׳”׳›׳™׳×׳•׳‘ ׳”׳™׳” ׳˜׳§׳¡׳˜ ׳‘׳–׳¨׳™׳ž׳” ׳•׳œ׳›׳Ÿ ׳§׳™׳‘׳œ
       ׳¨׳•׳—׳‘ ׳ž׳”׳×׳•׳›׳Ÿ, ׳׳‘׳œ ׳×׳•׳›׳Ÿ ׳”׳©׳œ׳˜ ׳›׳•׳œ׳• ג€Žabsoluteג€Ž -׳¨׳•׳—׳‘׳• ׳”׳˜׳‘׳¢׳™ 0, ׳•׳”-ג€Žmax-widthג€Ž
       ׳œ׳‘׳“׳• ׳׳™׳ ׳• ׳ ׳•׳×׳Ÿ ׳¨׳•׳—׳‘ ׳׳œ׳ ׳¨׳§ ׳×׳§׳¨׳”. ׳ ׳ž׳“׳“: ג€Ž.pf-captionג€Ž ׳‘׳¨׳•׳—׳‘ 0 ׳•׳”׳©׳œ׳˜ ׳ ׳¢׳œ׳. */
    width: 100%;
    max-width: 42rem;
    min-height: 3.2rem;
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    /* ג€Ž--pf-cap-liftג€Ž (׳ ׳ž׳“׳“ ׳—׳™ ׳‘-portfolio.js) ׳ž׳¨׳™׳ ׳׳× ׳”׳›׳™׳×׳•׳‘ ׳׳œ ׳×׳•׳š ׳”׳ž׳§׳•׳ ׳”׳¨׳™׳§
       ׳©׳‘׳×׳—׳×׳™׳× ׳”׳§׳¨׳•׳¡׳œ׳” ׳›׳š ׳©׳™׳™׳©׳׳¨ ׳¨׳§ ׳¨׳•׳•׳— ׳§׳œ -׳–׳”׳• ׳ž׳¦׳‘ ׳‘׳¨׳™׳¨׳× ׳”׳ž׳—׳“׳œ (ג€Ž--pf-ty=0ג€Ž).
       ג€Ž--pf-tyג€Ž ׳”׳•׳ ׳ž׳¡׳₪׳¨ (ג€Ž-40..40ג€Ž) ׳•׳œ׳ ׳׳—׳•׳– (׳׳—׳•׳– ׳‘-margin ׳ ׳ž׳“׳“ ׳œ׳₪׳™ ׳¨׳•׳—׳‘ ׳”׳”׳•׳¨׳”,
       ׳•-25% ׳ ׳×׳ ׳• 105px); ג€Ž0.12remג€Ž ׳œ׳™׳—׳™׳“׳” -> ׳˜׳•׳•׳— ׳©׳œ ׳›-ג€Žֲ±4.8remג€Ž, ׳”׳–׳–׳” ׳ ׳©׳œ׳˜׳×. */
    margin-block-start: calc(var(--pf-cap-lift, 0px) + var(--pf-ty, 0) * 0.12rem);
    /* ׳”׳”׳¨׳ž׳” ׳ž׳•׳—׳œ׳× ׳₪׳¢׳ ׳׳—׳× ׳‘׳¡׳•׳£ ׳”׳ž׳¢׳‘׳¨ (׳¨׳׳” settleCaption), ׳•׳œ׳›׳Ÿ ׳”׳™׳ ׳¦׳¨׳™׳›׳”
       ׳œ׳”׳—׳œ׳™׳§ -׳׳—׳¨׳× ׳–׳• ׳§׳₪׳™׳¦׳” ׳™׳—׳™׳“׳” ׳׳‘׳œ ׳’׳“׳•׳œ׳”. */
    transition: margin-block-start 0.25s ease;
}

/* ---- ׳©׳œ׳˜ ׳”׳›׳™׳×׳•׳‘ ----
   ׳›׳•׳×׳¨׳×, ׳×׳§׳¦׳™׳¨, ׳₪׳¢׳•׳œ׳•׳× ׳•׳ž׳¡׳₪׳•׳¨ ׳¢׳œ **׳¨׳§׳¢ ׳׳—׳“**: ג€Žimages/scene/infobg.webpג€Ž -
   ׳©׳œ׳˜ ׳¢׳¥ ׳ž׳¦׳•׳™׳¨ ׳‘׳¡׳’׳ ׳•׳Ÿ ׳”׳¡׳¦׳ ׳”. ׳”׳¨׳§׳¢ ׳”׳•׳ ׳”׳×׳ž׳•׳ ׳” ׳•׳×׳• ׳œ׳: ׳‘׳œ׳™ ׳ž׳¡׳’׳¨׳×, ׳‘׳œ׳™ ׳¦׳œ, ׳‘׳œ׳™
   ׳©׳›׳‘׳× ׳”׳—׳©׳›׳” ׳•׳‘׳œ׳™ ׳¦׳‘׳¢ ׳ž׳×׳—׳×׳™׳”. ׳”׳×׳ž׳•׳ ׳” ׳›׳‘׳¨ ׳ ׳•׳©׳׳× ׳׳× ׳”׳¦׳•׳¨׳”, ׳”׳’׳‘׳•׳œ ׳•׳”׳’׳•׳•׳Ÿ ׳©׳œ׳”,
   ׳•׳›׳œ ׳©׳›׳‘׳” ׳©׳ž׳•׳¡׳™׳₪׳™׳ ׳ž׳¢׳œ׳™׳” ׳”׳™׳ ׳¢׳™׳¦׳•׳‘ ׳©׳ ׳™ ׳©׳ž׳×׳—׳¨׳” ׳‘׳¨׳׳©׳•׳Ÿ.

   **ג€Žaspect-ratioג€Ž ׳•׳œ׳ ׳’׳•׳‘׳” ׳œ׳₪׳™ ׳”׳×׳•׳›׳Ÿ.** ׳–׳• ׳×׳ž׳•׳ ׳× ׳©׳œ׳˜ ׳ž׳¦׳•׳™׳¨, ׳•׳ž׳×׳™׳—׳” ׳œ׳’׳•׳‘׳”
   ׳ž׳©׳×׳ ׳” ׳”׳™׳™׳×׳” ׳ž׳¢׳•׳•׳×׳× ׳׳× ׳”׳¢׳¥, ׳׳× ׳”׳§׳™׳¡׳•׳¡ ׳•׳׳× ׳”׳₪׳˜׳¨׳™׳•׳×. ׳”׳₪׳¨׳•׳₪׳•׳¨׳¦׳™׳” ׳§׳‘׳•׳¢׳”
   (900x600 ׳ž׳”׳ž׳§׳•׳¨) ׳•׳”׳×׳•׳›׳Ÿ ׳ž׳×׳׳™׳ ׳׳× ׳¢׳¦׳ž׳• ׳׳œ׳™׳” -׳œ׳ ׳œ׳”׳₪׳š. */
.pf-cap-board {
    position: relative;
    /* ׳©׳œ׳•׳©׳” ׳’׳‘׳•׳œ׳•׳×, ׳•׳”׳§׳˜׳Ÿ ׳©׳‘׳”׳ ׳§׳•׳‘׳¢:
       - ג€Ž100%ג€Ž: ׳œ׳ ׳œ׳’׳œ׳•׳© ׳ž׳¨׳•׳—׳‘ ׳”׳¢׳ž׳•׳“.
       - ג€Ž34remג€Ž: ׳×׳§׳¨׳” ׳ž׳•׳—׳œ׳˜׳× -׳©׳œ׳˜ ׳¢׳ ׳§ ׳’׳•׳–׳œ ׳׳× ׳›׳œ ׳×׳©׳•׳ž׳× ׳”׳œ׳‘ ׳ž׳”׳§׳¨׳•׳¡׳œ׳”.
       - ג€Ž--pf-board-h * ׳”׳™׳—׳¡ג€Ž: **׳×׳§׳¨׳× ׳’׳•׳‘׳” ׳©׳ ׳ž׳“׳“׳× ׳—׳™** ׳‘-ג€ŽpositionCaptionג€Ž -׳”׳ž׳§׳•׳
         ׳©׳ ׳©׳׳¨ ׳ž׳×׳—׳× ׳œ׳§׳¨׳•׳¡׳œ׳”. ׳×׳§׳¨׳” ׳§׳‘׳•׳¢׳” ׳‘-ג€Žvhג€Ž ׳ ׳ž׳“׳“׳” ׳›׳œ׳ ׳ž׳¡׳₪׳™׳§׳”: ׳‘-1280x800 ׳”׳©׳œ׳˜
         ׳ ׳—׳×׳š ׳‘-71px, ׳•׳‘-1920x1080 ׳ ׳©׳׳¨׳• 91px ׳¨׳™׳§׳™׳. ׳”-ג€Ž26vhג€Ž ׳”׳•׳ ׳¨׳§ ׳’׳™׳‘׳•׳™ ׳œ׳₪׳ ׳™
         ׳”׳ž׳“׳™׳“׳” ׳”׳¨׳׳©׳•׳ ׳”. */
    /* **׳•׳¨׳¦׳₪׳”, ׳œ׳ ׳¨׳§ ׳×׳§׳¨׳”.** ׳œ׳˜׳™׳₪׳•׳’׳¨׳₪׳™׳” ׳™׳© ׳ž׳™׳ ׳™׳ž׳•׳ ׳§׳¨׳™׳׳•ײ¼׳× ׳‘-ג€Žremג€Ž, ׳•׳œ׳›׳Ÿ ׳ž׳×׳—׳×
       ׳œ׳¨׳•׳—׳‘ ׳ž׳¡׳•׳™׳ ׳”׳˜׳§׳¡׳˜ ׳ž׳₪׳¡׳™׳§ ׳œ׳”׳×׳›׳•׳•׳¥ ׳¢׳ ׳”׳©׳œ׳˜ ׳•׳’׳•׳œ׳© ׳ž׳”׳§׳œ׳£ -׳ ׳ž׳“׳“ ׳‘-1280x800:
       ׳©׳œ׳˜ 202px, ׳§׳œ׳£ 66px ׳’׳•׳‘׳”, ׳×׳•׳›׳Ÿ 89px. ׳¢׳“׳™׳£ ׳©׳œ׳˜ ׳‘׳ž׳™׳“׳” ׳§׳¨׳™׳׳” ׳©׳’׳•׳œ׳© ׳ž׳¢׳˜ ׳׳œ
       ׳ž׳×׳—׳× ׳œ׳§׳™׳₪׳•׳œ (׳”׳ž׳©׳×׳ž׳© ׳’׳•׳œ׳œ) ׳ž׳׳©׳¨ ׳©׳œ׳˜ ׳–׳¢׳™׳¨ ׳©׳”׳˜׳§׳¡׳˜ ׳‘׳•׳¨׳— ׳ž׳ž׳ ׳•. */
    /* **׳”׳¨׳¦׳₪׳” ׳¢׳œ׳×׳” ׳ž-21rem ׳œ-24rem.** ׳‘׳“׳¡׳§׳˜׳•׳₪ ׳”׳§׳¨׳•׳¡׳œ׳” ׳׳•׳›׳œ׳× ׳׳× ׳”׳’׳•׳‘׳”, ׳”׳©׳œ׳˜ ׳ ׳©׳׳¨
       ׳¢׳œ ׳”׳¨׳¦׳₪׳” ׳©׳œ׳•, ׳•׳׳– ׳©׳œ׳•׳© ׳©׳•׳¨׳•׳× ׳×׳™׳׳•׳¨ + ׳›׳•׳×׳¨׳× ׳©׳ ׳©׳‘׳¨׳× ׳œ׳©׳×׳™׳™׳ ׳₪׳©׳•׳˜ ׳œ׳ ׳ ׳›׳ ׳¡׳•
       (׳ ׳ž׳“׳“: ׳×׳•׳›׳Ÿ ׳’׳‘׳•׳” ׳‘-24px ׳ž׳©׳˜׳— ׳”׳›׳×׳™׳‘׳”, ׳”׳›׳•׳×׳¨׳× ׳¢׳œ ׳§׳•׳¨׳× ׳”׳¢׳¥ ׳•׳”׳ ׳§׳•׳“׳•׳× ׳—׳×׳•׳›׳•׳×).
       ׳¨׳¦׳₪׳” ׳’׳‘׳•׳”׳” ׳™׳•׳×׳¨ ׳ ׳•׳×׳ ׳× ׳’׳ ׳’׳•׳‘׳” ׳•׳’׳ **׳¨׳•׳—׳‘ ׳©׳•׳¨׳”** -׳›׳œ׳•׳ž׳¨ ׳™׳•׳×׳¨ ׳˜׳§׳¡׳˜ ׳‘׳›׳œ
       ׳©׳•׳¨׳”, ׳•׳–׳• ׳”׳‘׳§׳©׳” ׳¢׳¦׳ž׳”. ׳”׳•׳ ׳’׳•׳œ׳© ׳ž׳¢׳˜ ׳ž׳×׳—׳× ׳œ׳§׳™׳₪׳•׳œ, ׳•׳–׳• ׳”׳”׳¢׳“׳₪׳” ׳”׳ž׳×׳•׳¢׳“׳×. */
    /* ג€Ž--pf-board-minג€Ž: ׳”׳¨׳¦׳₪׳”. ׳‘׳ž׳¡׳š ׳¦׳¨ ׳”׳™׳ ׳™׳•׳¨׳“׳× (׳¨׳׳” ׳”-media query ׳œ׳ž׳˜׳”), ׳›׳™ ׳©׳
       ׳”׳™׳ ׳–׳• ׳©׳—׳•׳¡׳ž׳× ׳׳× ׳”׳©׳œ׳˜ ׳ž׳œ׳”׳×׳›׳•׳•׳¥ ׳׳œ ׳”׳ž׳§׳•׳ ׳©׳‘׳׳ž׳× ׳ ׳©׳׳¨. */
    width: clamp(min(100%, var(--pf-board-min, 24rem)), calc(var(--pf-board-h, 26vh) * var(--pf-board-ratio, 1.63)), min(100%, 34rem));
    margin-inline: auto;
    aspect-ratio: var(--pf-board-ratio, 1.63);
    /* ׳”׳×׳•׳›׳Ÿ ׳ ׳ž׳“׳“ ׳ž׳•׳œ **׳¨׳•׳—׳‘ ׳”׳©׳œ׳˜** ׳•׳œ׳ ׳ž׳•׳œ ׳—׳œ׳•׳Ÿ ׳”׳“׳₪׳“׳₪׳Ÿ: ׳›׳š ׳”׳˜׳§׳¡׳˜ ׳ž׳×׳›׳•׳•׳¥ ׳™׳—׳“
       ׳¢׳ ׳”׳©׳œ׳˜ ׳•׳©׳•׳ž׳¨ ׳¢׳œ ׳׳•׳×׳” ׳₪׳¨׳•׳₪׳•׳¨׳¦׳™׳” ׳‘׳›׳œ ׳¨׳•׳—׳‘ ׳ž׳¡׳š, ׳‘׳œ׳™ ׳¡׳“׳¨׳× media queries. */
    container-type: inline-size;
}
/* ---- ׳©׳§׳™׳₪׳•׳× ׳”׳©׳œ׳˜ ----
   **׳”׳¨׳§׳¢ ׳‘-ג€Ž::beforeג€Ž ׳•׳œ׳ ׳¢׳œ ׳”׳œ׳•׳—, ׳•-ג€Žopacityג€Ž ׳¢׳œ׳™׳• ׳‘׳œ׳‘׳“.** ג€Žopacityג€Ž ׳¢׳œ ׳”׳œ׳•׳— ׳”׳™׳”
   ׳ž׳¢׳ž׳¢׳ ׳’׳ ׳׳× ׳”׳›׳•׳×׳¨׳×, ׳”׳×׳™׳׳•׳¨ ׳•׳”׳›׳₪׳×׳•׳¨׳™׳ -׳•׳–׳• ׳‘׳“׳™׳•׳§ ׳”׳ ׳§׳•׳“׳” ׳©׳‘׳” ׳©׳§׳™׳₪׳•׳× ׳ž׳₪׳¡׳™׳§׳”
   ׳œ׳”׳™׳•׳× ׳׳₪׳©׳¨׳•׳× ׳•׳ž׳×׳—׳™׳œ׳” ׳œ׳”׳™׳•׳× ׳‘׳¢׳™׳™׳× ׳§׳¨׳™׳׳•ײ¼׳×. ׳׳•׳×׳• ׳©׳™׳§׳•׳œ ׳‘׳“׳™׳•׳§ ׳›׳ž׳• ׳‘׳ž׳“ ׳”׳©׳§׳™׳₪׳•׳×
   ׳©׳œ ׳₪׳׳ ׳œ ׳”׳ ׳™׳”׳•׳œ, ׳©׳ ׳–׳• ׳©׳§׳™׳₪׳•׳× ׳©׳œ ׳”׳¨׳§׳¢׳™׳ ׳•׳œ׳ ׳©׳œ ׳”׳₪׳׳ ׳œ. */
.pf-cap-board::before {
    content: ''; position: absolute; inset: 0;
    background: var(--pf-board-img) center / 100% 100% no-repeat;
    opacity: var(--pf-board-op, 1);
    pointer-events: none;
}

/* ---- ׳©׳˜׳— ׳”׳›׳×׳™׳‘׳” ----
   ג€Žinsetג€Ž ׳”׳•׳ **׳ž׳“׳™׳“׳” ׳•׳œ׳ ׳ ׳™׳—׳•׳©**: ׳”׳¢׳¨׳›׳™׳ ׳ ׳’׳–׳¨׳• ׳ž-ג€Žtools/make-infobg.phpג€Ž, ׳©׳ž׳•׳¦׳
   ׳׳× ׳”׳¨׳¦׳£ ׳”׳‘׳”׳™׳¨ ׳”׳׳¨׳•׳š ׳‘׳™׳•׳×׳¨ ׳‘׳©׳•׳¨׳•׳× ׳”׳׳ž׳¦׳¢ (׳”׳§׳œ׳£) ׳•׳ž׳“׳₪׳™׳¡ ׳׳× ׳’׳‘׳•׳œ׳•׳×׳™׳• ׳‘׳׳—׳•׳–׳™׳.
   ׳©׳™׳ ׳•׳™ ׳‘׳×׳ž׳•׳ ׳” = ׳”׳¨׳¦׳” ׳ž׳—׳“׳© ׳©׳œ ׳”׳›׳œ׳™ ׳•׳¢׳“׳›׳•׳Ÿ ׳׳¨׳‘׳¢׳× ׳”׳ž׳¡׳₪׳¨׳™׳ ׳›׳׳Ÿ. */
.pf-cap-inner {
    position: absolute;
    /* **׳”׳¦׳“׳“׳™׳ ׳ž׳ ׳•׳¦׳œ׳™׳ ׳™׳•׳×׳¨ ׳ž׳”׳ž׳“׳™׳“׳”.** ׳”׳›׳œ׳™ ׳œ׳•׳§׳— ׳׳× ׳”׳¨׳¦׳£ ׳”׳‘׳”׳™׳¨ ׳”׳׳¨׳•׳š ׳‘׳™׳•׳×׳¨,
       ׳•׳”׳§׳¦׳•׳•׳× ׳©׳œ ׳”׳§׳œ׳£ ׳ž׳•׳¦׳œ׳œ׳™׳ ׳•׳ž׳¢׳•׳’׳œ׳™׳ -׳•׳œ׳›׳Ÿ ׳”׳•׳ ׳¢׳•׳¦׳¨ ׳‘׳¢׳¨׳š 4-6% ׳œ׳₪׳ ׳™ ׳”׳’׳‘׳•׳œ
       ׳”׳׳ž׳™׳×׳™ (׳ ׳ž׳“׳“: ׳©׳˜׳— ׳›׳×׳™׳‘׳” 73% ׳ž׳¨׳•׳—׳‘ ׳”׳©׳œ׳˜ ׳‘׳¢׳•׳“ ׳©׳”׳§׳œ׳£ ׳¢׳¦׳ž׳• ~86%). ׳”׳˜׳§׳¡׳˜
       ׳ ׳—׳×׳š ׳©׳ ׳‘׳œ׳™ ׳¡׳™׳‘׳”. ג€Ž--pf-board-xג€Ž ׳ž׳ ׳¦׳œ ׳׳× ׳”׳”׳₪׳¨׳© ׳•׳ ׳©׳׳¨ ׳‘׳×׳•׳š ׳”׳§׳œ׳£; ׳”׳’׳•׳‘׳”
       ׳ ׳©׳׳¨ ׳›׳₪׳™ ׳©׳ ׳ž׳“׳“ -׳©׳ ׳׳™׳Ÿ ׳ž׳¨׳•׳•׳— ׳ž׳™׳•׳×׳¨. */
    --pf-board-x: 0.9;
    /* ׳’׳ ׳œ׳ž׳˜׳”: 29.9% ׳‘׳×׳‘׳ ׳™׳× ׳‘׳¨׳™׳¨׳× ׳”׳ž׳—׳“׳œ ׳”׳•׳ ׳”׳¨׳‘׳” ׳ž׳¢׳‘׳¨ ׳œ׳§׳¦׳” ׳”׳§׳œ׳£ (׳”׳›׳œ׳™ ׳¢׳•׳¦׳¨
       ׳‘׳§׳• ׳”׳¦׳œ׳œ׳™׳×), ׳•׳›׳©׳”׳›׳•׳×׳¨׳× ׳ ׳©׳‘׳¨׳× ׳œ׳©׳×׳™ ׳©׳•׳¨׳•׳× ׳”׳ž׳•׳ ׳” ׳ ׳—׳×׳š ׳©׳. */
    --pf-board-y: 0.88;
    /* ׳”׳×׳—׳×׳™׳× ׳ ׳“׳™׳‘׳” ׳™׳•׳×׳¨ ׳ž׳”׳¨׳׳©: ׳©׳ ׳”׳ž׳“׳™׳“׳” ׳©׳ž׳¨׳ ׳™׳× ׳‘׳ž׳™׳•׳—׳“ (29.9% ׳‘׳‘׳¨׳™׳¨׳× ׳”׳ž׳—׳“׳œ,
       ׳”׳¨׳‘׳” ׳ž׳×׳—׳× ׳œ׳§׳¦׳” ׳”׳§׳œ׳£), ׳•׳‘׳¨׳׳© ׳™׳•׳©׳‘׳× ׳§׳•׳¨׳× ׳”׳¢׳¥ ׳•׳׳™׳Ÿ ׳œ׳׳Ÿ ׳œ׳”׳×׳¨׳—׳‘. */
    --pf-board-y2: 0.68;
    inset: calc(var(--pf-board-t, 12%) * var(--pf-board-y)) calc(var(--pf-board-e, 8%) * var(--pf-board-x))
           calc(var(--pf-board-b, 12%) * var(--pf-board-y2)) calc(var(--pf-board-s, 8%) * var(--pf-board-x));
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    /* ׳”׳ž׳¨׳•׳•׳— ׳§׳˜׳Ÿ ׳ž׳‘׳¢׳‘׳¨: ׳¢׳ ׳›׳•׳×׳¨׳× ׳©׳ ׳©׳‘׳¨׳× ׳œ׳©׳×׳™ ׳©׳•׳¨׳•׳× **׳•׳¢׳** ׳œ׳•׳—׳™׳× ׳”׳›׳×׳•׳‘׳×, ׳׳¨׳‘׳¢׳×
       ׳”׳ž׳¨׳•׳•׳—׳™׳ ׳”׳™׳• ׳”׳”׳‘׳“׳œ ׳‘׳™׳Ÿ ׳ž׳•׳ ׳” ׳©׳ ׳›׳ ׳¡ ׳‘׳§׳œ׳£ ׳œ׳‘׳™׳Ÿ ׳ž׳•׳ ׳” ׳©׳™׳•׳©׳‘ ׳¢׳œ ׳§׳•׳¨׳× ׳”׳¢׳¥. */
    gap: 0.5cqw;
    /* **׳”׳›׳™׳×׳•׳‘ ׳™׳•׳©׳‘ ׳ž׳¢׳˜ ׳ž׳¢׳œ ׳”׳ž׳¨׳›׳–** (׳‘׳§׳©׳× ׳”׳ž׳©׳×׳ž׳©). ׳”׳ž׳¨׳›׳•׳– ׳—׳™׳œ׳§ ׳׳× ׳”׳¢׳•׳“׳£ ׳©׳•׳•׳”
       ׳‘׳©׳•׳•׳” (׳ ׳ž׳“׳“ 22px ׳ž׳¢׳œ ׳•-22 ׳ž׳×׳—׳× ׳‘׳ž׳•׳‘׳™׳™׳œ, 32/32 ׳‘׳“׳¡׳§׳˜׳•׳₪), ׳‘׳¢׳•׳“ ׳©׳‘׳×׳—׳×׳™׳×
       ׳”׳§׳œ׳£ ׳™׳© ׳ž׳ž׳™׳œ׳ ׳™׳•׳×׳¨ ׳©׳•׳œ׳™׳™׳ ׳ž׳¦׳•׳™׳¨׳™׳ -׳•׳œ׳›׳Ÿ ׳”׳˜׳§׳¡׳˜ ׳ ׳¨׳׳” ׳ ׳ž׳•׳š ׳ž׳“׳™. ׳¨׳™׳₪׳•׳“
       ׳×׳—׳×׳•׳Ÿ ׳ž׳§׳˜׳™׳Ÿ ׳׳× ׳×׳™׳‘׳× ׳”׳×׳•׳›׳Ÿ, ׳•׳”׳ž׳¨׳›׳– ׳¢׳•׳œ׳” ׳‘׳—׳¦׳™׳•. ג€Žcqwג€Ž ׳•׳œ׳ ג€Žpxג€Ž: ׳”׳›׳•׳œ ׳›׳׳Ÿ
       ׳ ׳ž׳“׳“ ׳ž׳•׳œ ׳¨׳•׳—׳‘ ׳”׳©׳œ׳˜. */
    /* 4cqw ׳•׳œ׳ ׳™׳•׳×׳¨: ׳”׳›׳•׳×׳¨׳× ׳ ׳©׳‘׳¨׳× ׳œ׳©׳×׳™ ׳©׳•׳¨׳•׳× ׳“׳•׳•׳§׳ ׳‘׳ž׳¡׳š ׳¦׳¨, ׳•׳©׳ ׳”׳¢׳•׳“׳£ ׳”׳¢׳œ׳™׳•׳Ÿ
       ׳§׳˜׳Ÿ ׳ž׳œ׳›׳×׳—׳™׳œ׳” -׳”׳¨׳ž׳” ׳’׳“׳•׳œ׳” ׳™׳•׳×׳¨ ׳”׳™׳™׳×׳” ׳ž׳›׳ ׳™׳¡׳” ׳׳× ׳”׳©׳•׳¨׳” ׳”׳¨׳׳©׳•׳ ׳” ׳ž׳×׳—׳× ׳œ׳§׳•׳¨׳”. */
    padding-block-end: 4cqw;
    text-align: center;
    /* ׳¨׳׳” ג€ŽfitCaptionג€Ž ׳‘-js/portfolio.js: ׳›׳©׳”׳×׳•׳›׳Ÿ ׳’׳‘׳•׳” ׳ž׳©׳˜׳— ׳”׳›׳×׳™׳‘׳” ׳”׳•׳ ׳ ׳¦׳ž׳“
       ׳œ׳¨׳׳©׳•, ׳›׳“׳™ ׳©׳”׳’׳œ׳™׳©׳” ׳×׳¨׳“ ׳׳œ ׳©׳•׳œ׳™ ׳”׳§׳œ׳£ ׳•׳œ׳ ׳×׳¢׳œ׳” ׳¢׳œ ׳§׳•׳¨׳× ׳”׳¢׳¥. */
    /* ׳”׳§׳œ׳£ **׳‘׳”׳™׳¨** (׳ ׳ž׳“׳“ ג€Ž253,244,206ג€Ž), ׳•׳œ׳›׳Ÿ ׳”׳˜׳§׳¡׳˜ ׳›׳”׳” ׳•׳‘׳œ׳™ ׳¦׳œ -׳˜׳§׳¡׳˜ ׳‘׳”׳™׳¨ ׳¢׳
       ׳”׳™׳œ׳” ׳›׳”׳”, ׳©׳”׳×׳׳™׳ ׳œ׳¨׳§׳¢ ׳”׳›׳—׳•׳œ ׳”׳§׳•׳“׳, ׳”׳™׳” ׳‘׳œ׳×׳™ ׳§׳¨׳™׳ ׳›׳׳Ÿ. */
    color: #4a2f12;
}
.pf-cap-inner.is-tight { justify-content: flex-start; }
/* ׳”׳ž׳¡׳₪׳•׳¨ (׳ ׳§׳•׳“׳•׳× + ׳ž׳•׳ ׳”) ׳™׳•׳©׳‘ ׳‘׳×׳•׳š ׳”׳§׳œ׳£, ׳‘׳œ׳™ ׳§׳• ׳ž׳₪׳¨׳™׳“ ׳•׳‘׳œ׳™ ׳¨׳§׳¢ ׳ž׳©׳œ׳•:
   ׳›׳œ ׳”׳™׳›׳¨ ׳ ׳•׳¡׳£ ׳”׳•׳ ׳©׳›׳‘׳” ׳ž׳¢׳œ ׳”׳×׳ž׳•׳ ׳”. ׳¨׳§ ׳ž׳¨׳•׳•׳—. */
/* ג€Žmargin-topג€Ž ׳§׳˜׳Ÿ: ׳”׳ž׳¡׳₪׳•׳¨ ׳”׳•׳ ׳”׳©׳•׳¨׳” ׳”׳׳—׳¨׳•׳ ׳”, ׳•׳›׳œ ׳₪׳™׳§׳¡׳œ ׳›׳׳Ÿ ׳ ׳’׳¨׳¢ ׳ž׳”׳˜׳§׳¡׳˜ */
.pf-cap-board .pf-controls { width: 100%; gap: 1.2cqw; margin-top: 0.5cqw; }

/* ---- "׳‘׳œ׳™ ׳©׳œ׳˜" ----
   ׳‘׳—׳™׳¨׳” ׳×׳§׳₪׳” ׳‘׳ ׳™׳”׳•׳œ, ׳•׳œ׳ ׳”׳™׳¢׳“׳¨ ׳”׳’׳“׳¨׳”: ׳”׳›׳™׳×׳•׳‘ ׳—׳•׳–׳¨ ׳œ׳”׳™׳•׳× ׳˜׳§׳¡׳˜ ׳¢׳œ ׳”׳ ׳•׳£, ׳›׳₪׳™
   ׳©׳”׳™׳” ׳œ׳₪׳ ׳™ ׳©׳”׳©׳œ׳˜ ׳ ׳•׳¡׳£. ׳•׳œ׳›׳Ÿ ׳’׳ ׳”׳¦׳‘׳¢׳™׳ ׳—׳•׳–׳¨׳™׳ ׳œ׳‘׳”׳™׳¨-׳¢׳-׳”׳™׳œ׳”: ׳¢׳œ ׳”׳ ׳•׳£ ׳”׳›׳”׳”
   ׳”׳˜׳§׳¡׳˜ ׳”׳—׳•׳ ׳©׳œ ׳”׳§׳œ׳£ ׳׳™׳ ׳• ׳ ׳§׳¨׳ ׳›׳œ׳œ. */
.pf-noboard .pf-cap-board {
    width: 100%; max-width: 42rem; aspect-ratio: auto; background: none;
    padding: 0.2rem 0;
}
.pf-noboard .pf-cap-inner {
    position: static; inset: auto; gap: 0.4rem; color: inherit;
}
.pf-noboard .pf-cap-title { color: var(--pf-t-color, #fffaf0); text-shadow: 0 2px 8px rgba(6, 16, 36, 0.7); }
.pf-noboard .pf-cap-desc  { color: rgba(255, 250, 240, 0.94); text-shadow: 0 1px 6px rgba(6, 16, 36, 0.85); }
.pf-noboard .pf-cap-more  { color: var(--c-gold-light, #ffe7a3); background: rgba(9, 26, 52, 0.55); border-color: rgba(255, 231, 163, 0.5); }
.pf-noboard .pf-dot       { border-color: rgba(255, 231, 163, 0.55); background: rgba(255, 246, 230, 0.18); }
.pf-noboard .pf-counter   { color: var(--pf-c-color, #e9e0cf); }
.pf-noboard .pf-counter .pf-cur { color: var(--pf-c-color, var(--c-gold-light, #ffe7a3)); }
/* ׳‘׳œ׳™ ׳©׳œ׳˜ ׳׳™׳Ÿ ג€Žcontainerג€Ž ׳©׳ž׳ž׳ ׳• ׳œ׳’׳–׳•׳¨ ג€Žcqwג€Ž -׳—׳•׳–׳¨׳™׳ ׳œ׳™׳—׳™׳“׳•׳× ׳ž׳•׳—׳œ׳˜׳•׳× */
.pf-noboard .pf-cap-title { font-size: calc(clamp(1.15rem, 3vw, 1.8rem) * var(--pf-ts, 1) * var(--pf-t-scale, 1)); }
.pf-noboard .pf-cap-desc  { font-size: calc(0.95rem * var(--pf-ts, 1)); }
.pf-noboard .pf-cap-link, .pf-noboard .pf-cap-more {
    flex: 0 1 auto; min-height: calc(2.5rem * var(--pf-ts, 1)); padding: 0.5rem 1.15rem; gap: 0.4rem;
    font-size: calc(0.92rem * var(--pf-ts, 1));
}
.pf-noboard .pf-cap-actions { gap: 0.55rem; margin-top: 0.4rem; }
.pf-noboard .pf-controls { margin-top: 0.5rem; gap: 0.6rem; }
/* ׳”׳×׳§׳¦׳™׳¨: **׳©׳×׳™ ׳©׳•׳¨׳•׳× ׳‘׳“׳™׳•׳§**, ׳’׳ ׳›׳©׳”׳•׳ ׳§׳¦׳¨ ׳׳• ׳—׳¡׳¨. ׳₪׳¨׳•׳™׳§׳˜ ׳‘׳œ׳™ ׳×׳™׳׳•׳¨ ׳”׳™׳” ׳ž׳§׳¦׳¨
   ׳׳× ׳”׳œ׳•׳— ׳•׳ž׳–׳™׳– ׳׳× ׳”׳ ׳§׳•׳“׳•׳× ׳•׳”׳ž׳•׳ ׳” ׳©׳ž׳×׳—׳×׳™׳• -׳׳•׳×׳” ׳ž׳œ׳›׳•׳“׳× ׳©׳›׳‘׳¨ ׳×׳•׳§׳ ׳” ׳‘׳›׳•׳×׳¨׳×. */
.pf-cap-desc {
    /* **׳—׳•׳‘׳” ׳©׳œ׳ ׳™׳¦׳˜׳ž׳¦׳.** ג€Ž.pf-cap-innerג€Ž ׳”׳•׳ ׳¢׳ž׳•׳“׳× flex ׳‘׳’׳•׳‘׳” ׳§׳‘׳•׳¢, ׳•׳₪׳¨׳™׳˜
       flex ׳ž׳¦׳˜׳ž׳¦׳ ׳ž׳×׳—׳× ׳œ׳’׳•׳‘׳” ׳”׳×׳•׳›׳Ÿ ׳©׳œ׳• ׳›׳©׳¦׳₪׳•׳£ -׳›׳š ׳”׳›׳•׳×׳¨׳× ׳§׳™׳‘׳œ׳” **׳©׳•׳¨׳” ׳׳—׳×**
       ׳‘׳ž׳§׳•׳ ׳©׳×׳™׳™׳ (׳ ׳ž׳“׳“), ׳•׳”׳©׳•׳¨׳™׳™׳” ׳”׳©׳ ׳™׳™׳” ׳ ׳—׳×׳›׳” **׳‘׳œ׳™** ׳©׳œ׳•׳© ׳ ׳§׳•׳“׳•׳×: ׳”׳—׳™׳×׳•׳š
       ׳ ׳¢׳©׳” ׳¢"׳™ ׳”-flex ׳•׳œ׳ ׳¢"׳™ ׳”-ג€Žline-clampג€Ž, ׳•׳œ׳›׳Ÿ ׳”׳•׳ ׳œ׳ ׳ž׳¡׳ž׳Ÿ ׳“׳‘׳¨. */
    flex: 0 0 auto;
    margin: 0; max-width: 100%;
    /* **׳©׳œ׳•׳© ׳©׳•׳¨׳•׳× ׳•׳œ׳ ׳©׳×׳™׳™׳.** ׳”׳ž׳¡׳₪׳¨ ׳§׳‘׳•׳¢ ׳œ׳›׳œ ׳”׳©׳§׳•׳₪׳™׳•׳× (׳•׳–׳” ׳ž׳” ׳©׳©׳•׳ž׳¨ ׳¢׳œ
       ׳”׳ ׳§׳•׳“׳•׳× ׳•׳”׳ž׳•׳ ׳” ׳‘׳ž׳§׳•׳ž׳), ׳׳‘׳œ ׳”׳•׳ ׳”׳™׳” ׳ž׳•׳’׳“׳¨ ׳›׳©׳”׳×׳§׳¦׳™׳¨ ׳¢׳¦׳ž׳• ׳ ׳—׳×׳š ׳‘-150 ׳×׳•׳•׳™׳
       ׳•׳©׳˜׳— ׳”׳›׳×׳™׳‘׳” ׳”׳™׳” ׳¦׳¨ ׳‘-6% -׳›׳œ׳•׳ž׳¨ ׳’׳ ׳ž׳” ׳©׳›׳Ÿ ׳ ׳©׳œ׳— ׳œ׳ ׳”׳™׳” ׳ ׳›׳ ׳¡. */
    min-height: calc(3 * 1.32em);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    /* ג€Ž-webkit-line-clampג€Ž ׳ž׳•׳¡׳™׳£ "ג€¦" ׳‘׳¢׳¦׳ž׳• ׳›׳©׳”׳•׳ ׳—׳•׳×׳š; ג€Žtext-overflowג€Ž ׳ž׳₪׳•׳¨׳©
       ׳ž׳›׳¡׳” ׳’׳ ׳׳× ׳”׳ž׳§׳¨׳” ׳©׳œ ׳©׳•׳¨׳” ׳‘׳•׳“׳“׳× ׳׳¨׳•׳›׳” ׳‘׳œ׳™ ׳¨׳•׳•׳—׳™׳. */
    text-overflow: ellipsis;
    /* ג€Žcqwג€Ž = ׳׳—׳•׳– ׳ž׳¨׳•׳—׳‘ ׳”׳©׳œ׳˜. ׳”׳˜׳§׳¡׳˜ ׳ž׳×׳›׳•׳•׳¥ ׳™׳—׳“ ׳¢׳ ׳”׳©׳œ׳˜ ׳•׳œ׳›׳Ÿ ׳”׳™׳—׳¡ ׳‘׳™׳ ׳• ׳œ׳‘׳™׳Ÿ
       ׳”׳§׳œ׳£ ׳§׳‘׳•׳¢ ׳‘׳›׳œ ׳¨׳•׳—׳‘ ׳ž׳¡׳š -׳¢׳ ג€Žremג€Ž ׳”׳•׳ ׳”׳™׳” ׳’׳•׳œ׳© ׳ž׳”׳§׳œ׳£ ׳‘׳ž׳¡׳š ׳¦׳¨. */
    font-size: calc(clamp(0.62rem, 2.7cqw, 0.9rem) * var(--pf-ts, 1));
    line-height: 1.32;      /* ׳×׳•׳׳ ׳œ-ג€Žmin-heightג€Ž ׳©׳œ׳ž׳¢׳œ׳” -׳©׳œ׳•׳© ׳©׳•׳¨׳•׳× ׳‘׳“׳™׳•׳§ */
    color: rgba(74, 47, 18, 0.88);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
/* ג€Žhiddenג€Ž ׳ ׳©׳œ׳˜ ׳ž׳”-JS ׳›׳©׳׳™׳Ÿ ׳×׳§׳¦׳™׳¨, ׳׳‘׳œ ׳”׳ž׳§׳•׳ ׳ ׳©׳ž׳¨ -׳¨׳׳” ׳”׳”׳¢׳¨׳” ׳¢׳œ ׳”׳’׳•׳‘׳” ׳”׳§׳‘׳•׳¢ */
.pf-cap-desc[hidden] { display: block; visibility: hidden; }
/* ...׳׳œ׳ ׳׳ **׳œ׳׳£ ׳₪׳¨׳•׳™׳§׳˜** ׳׳™׳Ÿ ׳×׳§׳¦׳™׳¨ (ג€Ž$anyExcerptג€Ž ׳‘-PHP): ׳׳– ׳׳™׳Ÿ ׳œ׳ž׳™ ׳œ׳©׳ž׳•׳¨
   ׳ž׳§׳•׳, ׳•׳©׳œ׳•׳© ׳”׳©׳•׳¨׳•׳× ׳”׳¨׳™׳§׳•׳× ׳¨׳§ ׳“׳•׳—׳§׳•׳× ׳׳× ׳”׳›׳•׳×׳¨׳× ׳׳œ ׳§׳•׳¨׳× ׳”׳¢׳¥. */
.pf-caption.pf-nodesc .pf-cap-desc { display: none; }

/* ---- "בלי לוח" -מתג פר-פרויקט ----
   כשהוא כבוי יורד **כל** הכיתוב: לוח העץ, הכותרת, התקציר, לוחית הכתובת
   והכפתורים. הנקודות והמונה נשארים -הם מנגנון הניווט של הקרוסלה ולא תוכן
   הפרויקט, והסתרתם הייתה מקפיצה את הפריסה בכל מעבר בין שקופית עם לוח לאחת
   בלעדיו (אותו חוק גובה קבוע ששאר השלט בנוי עליו).
   ‎display: none‎ ולא ‎visibility‎: כאן דווקא **רוצים** שהמקום יתפנה. */
.pf-caption.pf-capoff .pf-cap-board {
    background: none; aspect-ratio: auto; width: auto; max-width: none;
    padding: 0; container-type: normal;
}
.pf-caption.pf-capoff .pf-cap-board::before { display: none; }   /* תמונת הרקע */
.pf-caption.pf-capoff .pf-cap-inner {
    position: static; inset: auto; padding: 0; gap: 0; color: inherit;
}
.pf-caption.pf-capoff :is(.pf-cap-title, .pf-cap-desc, .pf-cap-url, .pf-cap-actions) {
    display: none !important;   /* גובר על ‎[hidden]{display:block}‎ של התקציר */
}
/* הנקודות והמונה מקבלים את הצבעים של "בלי שלט" -הם יושבים על הנוף עכשיו,
   וגוני הקלף הכהים אינם נקראים שם. */
.pf-caption.pf-capoff .pf-dot { border-color: rgba(255, 231, 163, 0.55); background: rgba(255, 246, 230, 0.18); }
.pf-caption.pf-capoff .pf-counter { color: var(--pf-c-color, #e9e0cf); }
.pf-caption.pf-capoff .pf-counter .pf-cur { color: var(--pf-c-color, var(--c-gold-light, #ffe7a3)); }
.pf-caption.pf-capoff .pf-controls { margin-top: 0.5rem; gap: 0.6rem; }

/* ---- ׳›׳×׳•׳‘׳× ׳”׳§׳™׳©׳•׳¨ ׳¢׳œ ׳”׳©׳œ׳˜ (׳ž׳×׳’ "׳”׳•׳¡׳₪׳” ׳œ׳׳×׳¨" ׳₪׳¨-׳₪׳¨׳•׳™׳§׳˜) ----
   ׳©׳œ׳˜-׳“׳¨׳š ׳§׳˜׳Ÿ ׳•׳œ׳ ׳›׳₪׳×׳•׳¨: ׳”׳₪׳¢׳•׳œ׳” ׳›׳‘׳¨ ׳§׳™׳™׳ž׳× ׳‘"׳¦׳₪׳™׳™׳” ׳‘׳₪׳¨׳•׳™׳§׳˜", ׳•׳›׳׳Ÿ ׳”׳ž׳™׳“׳¢ ׳”׳•׳
   **׳ž׳™** ׳”׳›׳×׳•׳‘׳×. ׳”׳’׳•׳•׳Ÿ ׳—׳•׳ ׳›׳ž׳• ׳©׳׳¨ ׳”׳˜׳§׳¡׳˜ ׳¢׳œ ׳”׳§׳œ׳£, ׳¢׳ ׳§׳• ׳×׳—׳×׳•׳Ÿ ׳¢׳“׳™׳Ÿ ׳©׳׳•׳ž׳¨
   "׳׳₪׳©׳¨ ׳œ׳œ׳—׳•׳¥" ׳‘׳œ׳™ ׳œ׳¦׳™׳™׳¨ ׳¢׳•׳“ ׳›׳₪׳×׳•׳¨ ׳¢׳œ ׳©׳œ׳˜ ׳¦׳₪׳•׳£. */
/* **׳œ׳•׳—׳™׳× ׳ ׳—׳•׳©׳× ׳—׳¨׳•׳˜׳”, ׳œ׳ ׳©׳•׳¨׳× ׳˜׳§׳¡׳˜.** ׳–׳• ׳›׳×׳•׳‘׳× ׳₪׳¨׳¡׳•׳ž׳™׳× -׳”׳™׳ ׳”׳“׳‘׳¨ ׳©׳”׳ž׳‘׳§׳¨
   ׳׳ž׳•׳¨ ׳œ׳–׳›׳•׳¨ ׳׳—׳¨׳™ ׳©׳”׳©׳œ׳˜ ׳ž׳×׳—׳œ׳£, ׳•׳œ׳›׳Ÿ ׳”׳™׳ ׳‘׳’׳•׳“׳œ ׳©׳œ ׳›׳•׳×׳¨׳×-׳ž׳©׳ ׳” ׳•׳‘׳¢׳œ׳× ׳’׳•׳£ ׳ž׳©׳œ׳”:
   ׳ž׳×׳›׳× ׳—׳ž׳” ׳¢׳œ ׳”׳§׳œ׳£, ׳׳•׳× ׳—׳¨׳•׳˜׳” ׳‘׳”׳™׳¨-׳¢׳œ-׳›׳”׳”, ׳•׳ž׳¡׳’׳¨׳× ׳₪׳ ׳™׳ž׳™׳× ׳©׳ž׳—׳–׳™׳¨׳” ׳׳•׳¨. */
.pf-cap-url {
    display: inline-flex; align-items: center; gap: 0.45em;
    /* ׳›׳ž׳• ׳”׳›׳•׳×׳¨׳× ׳•׳”׳×׳§׳¦׳™׳¨: ׳₪׳¨׳™׳˜ flex ׳‘׳¢׳ž׳•׳“׳” ׳¦׳₪׳•׳₪׳” ׳ž׳¦׳˜׳ž׳¦׳ ׳ž׳×׳—׳× ׳œ׳’׳•׳‘׳”׳• -׳ ׳ž׳“׳“
       ׳©׳”׳œ׳•׳—׳™׳× ׳™׳¨׳“׳” ׳ž-25px ׳œ-16px ׳“׳•׳•׳§׳ ׳‘׳©׳§׳•׳₪׳™׳× ׳”׳¢׳ž׳•׳¡׳”, ׳›׳œ׳•׳ž׳¨ ׳”׳׳•׳× ׳ ׳—׳×׳›׳”. */
    flex: 0 0 auto;
    /* ׳¨׳•׳•׳— ׳ž׳×׳—׳×: ׳”׳œ׳•׳—׳™׳× ׳•׳”׳›׳₪׳×׳•׳¨׳™׳ ׳ ׳’׳¢׳• ׳–׳” ׳‘׳–׳” ׳•׳ ׳§׳¨׳׳• ׳›׳’׳•׳© ׳׳—׳“ */
    max-width: 100%; margin: 0.22em 0 0.42em;
    padding: 0.3em 0.95em 0.34em;
    position: relative; overflow: hidden;   /* ׳œ׳‘׳¨׳§ ׳©׳¨׳¥ ׳¢׳œ ׳”׳ž׳×׳›׳× */
    /* ׳ ׳ž׳“׳“ ׳ž׳•׳œ ׳¨׳•׳—׳‘ ׳”׳©׳œ׳˜ (ג€Žcqwג€Ž) ׳›׳ž׳• ׳©׳׳¨ ׳”׳˜׳§׳¡׳˜ -׳¨׳׳” ׳”׳”׳¢׳¨׳” ׳‘-ג€Ž.pf-cap-descג€Ž.
       ׳’׳“׳•׳œ ׳ž׳”׳×׳§׳¦׳™׳¨ ׳•׳ž׳×׳—׳¨׳” ׳‘׳›׳•׳×׳¨׳× ׳‘׳›׳•׳•׳ ׳”: ׳–׳• ׳”׳₪׳¢׳•׳œ׳”, ׳œ׳ ׳”׳¢׳¨׳× ׳©׳•׳œ׳™׳™׳. */
    font-family: var(--pf-t-font, var(--heading-font, 'Suez One')), serif;
    font-size: calc(clamp(0.72rem, 3.25cqw, 1.12rem) * var(--pf-ts, 1));
    font-weight: 800; line-height: 1.25; letter-spacing: 0.01em;
    /* ׳’׳•׳‘׳” ׳©׳•׳¨׳” ׳©׳ž׳•׳¨ ׳’׳ ׳›׳©׳”-ג€Žspanג€Ž ׳¨׳™׳§: ׳׳œ׳ž׳ ׳˜ ׳¨׳™׳§ ׳ž׳×׳›׳•׳•׳¥ (׳ ׳ž׳“׳“ 12px ׳ž׳•׳œ 23),
       ׳•׳–׳• ׳‘׳“׳™׳•׳§ ׳”׳§׳₪׳™׳¦׳” ׳©׳”׳©׳ž׳™׳¨׳” ׳¢׳œ ׳”׳ž׳§׳•׳ ׳ ׳•׳¢׳“׳” ׳œ׳ž׳ ׳•׳¢. */
    min-height: 1.25em;
    /* **׳§׳¨׳™׳׳•ײ¼׳× ׳œ׳₪׳ ׳™ ׳”׳›׳•׳œ.** ׳”׳˜׳§׳¡׳˜ ׳œ׳‘׳Ÿ-׳©׳ž׳ ׳× ׳ž׳œ׳ (׳•׳œ׳ ׳’׳•׳•׳Ÿ ׳–׳”׳•׳‘), ׳¢׳œ ׳”׳—׳œ׳§
       ׳”׳›׳”׳” ׳©׳œ ׳”׳ž׳×׳›׳× -׳ ׳ž׳“׳“ ׳™׳—׳¡ ׳ ׳™׳’׳•׳“׳™׳•׳× 6.4:1 ׳ž׳•׳œ 2.9:1 ׳‘׳’׳¨׳¡׳× ׳”׳–׳”׳‘-׳¢׳œ-׳–׳”׳‘. */
    color: #fffaf0;
    text-decoration: none;
    border-radius: 999px;
    /* ׳ ׳—׳•׳©׳×/׳–׳”׳‘ ׳¢׳×׳™׳§: ׳›׳”׳” ׳‘׳§׳¦׳•׳•׳× ׳•׳‘׳”׳™׳¨ ׳‘׳ž׳¨׳›׳– -׳›׳š ׳–׳” ׳ ׳§׳¨׳ ׳›׳ž׳×׳›׳× ׳ž׳¢׳•׳’׳œ׳× ׳•׳œ׳
       ׳›׳ž׳œ׳‘׳Ÿ ׳¦׳‘׳•׳¢. ׳”׳¨׳§׳¢ ׳”׳©׳ ׳™ ׳”׳•׳ ׳‘׳¨׳§ ׳¦׳¨ ׳©׳¨׳¥ ׳‘׳׳œ׳›׳¡׳•׳Ÿ. */
    /* ׳”׳ž׳×׳›׳× ׳›׳”׳” ׳™׳•׳×׳¨ ׳ž׳‘׳¢׳‘׳¨: ׳”׳›׳™׳×׳•׳‘ ׳”׳•׳ ׳”׳¢׳™׳§׳¨, ׳•׳”׳ž׳¦׳¢ ׳¨׳§ ׳¦׳¨׳™׳š ׳œ׳”׳—׳–׳™׳§ ׳׳•׳×׳•.
       ׳”׳‘׳”׳™׳¨ ׳ ׳©׳׳¨ ׳‘׳©׳•׳œ׳™׳™׳ ׳”׳¢׳œ׳™׳•׳ ׳™׳ ׳‘׳œ׳‘׳“, ׳›׳“׳™ ׳©׳”׳׳•׳× ׳œ׳ ׳×׳©׳‘ ׳¢׳œ ׳׳–׳•׳¨ ׳‘׳”׳™׳¨. */
    background:
        linear-gradient(180deg, rgba(255, 236, 179, 0.28), rgba(255, 236, 179, 0) 46%),
        linear-gradient(135deg, #4a2a0b 0%, #7d4f14 30%, #a5701f 50%, #7d4f14 70%, #4a2a0b 100%);
    border: 1px solid rgba(46, 26, 6, 0.85);
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 208, 0.45),      /* ׳§׳¦׳” ׳¢׳œ׳™׳•׳Ÿ ׳©׳ž׳—׳–׳™׳¨ ׳׳•׳¨ */
        inset 0 -1px 0 rgba(40, 22, 4, 0.6),
        0 2px 5px rgba(74, 47, 18, 0.34);
    /* ׳”׳׳•׳× ׳—׳¨׳•׳˜׳”: ׳¦׳œ ׳›׳”׳” ׳ž׳×׳—׳× -׳‘׳œ׳™ ׳–׳” ׳–׳• ׳ž׳“׳‘׳§׳” ׳•׳œ׳ ׳—׳¨׳™׳˜׳”. ׳‘׳œ׳™ ׳”׳™׳œ׳” ׳–׳”׳•׳‘׳”,
       ׳”׳™׳ ׳ž׳¨׳›׳›׳× ׳׳× ׳”׳§׳¦׳” ׳•׳₪׳•׳’׳¢׳× ׳“׳•׳•׳§׳ ׳‘׳§׳¨׳™׳׳•ײ¼׳×. */
    text-shadow: 0 1px 1px rgba(38, 20, 2, 0.85);
    /* ׳”׳›׳×׳•׳‘׳× ׳”׳™׳ LTR ׳’׳ ׳‘׳¢׳ž׳•׳“ RTL -׳׳—׳¨׳× ׳ ׳§׳•׳“׳”/׳¡׳œ׳׳© ׳§׳•׳₪׳¦׳™׳ ׳œ׳¦׳“ ׳”׳œ׳ ׳ ׳›׳•׳Ÿ */
    direction: ltr;
    transition: opacity var(--pf-cap-anim, 0.26s) ease, transform var(--pf-cap-anim, 0.26s) ease,
                box-shadow 0.2s ease, filter 0.2s ease;
}
.pf-cap-url span { position: relative; z-index: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ׳‘׳œ׳™ ׳׳™׳™׳§׳•׳Ÿ (׳‘׳§׳©׳× ׳”׳ž׳©׳×׳ž׳©): ׳¢׳œ ׳œ׳•׳—׳™׳× ׳¦׳¨׳” ׳”׳•׳ ׳’׳–׳œ ׳׳× ׳”׳¨׳•׳—׳‘ ׳ž׳”׳›׳×׳•׳‘׳× ׳¢׳¦׳ž׳”,
   ׳•׳›׳×׳•׳‘׳× ׳”׳™׳ ׳”׳“׳‘׳¨ ׳”׳™׳—׳™׳“ ׳©׳¦׳¨׳™׳š ׳œ׳”׳™׳§׳¨׳ ׳›׳׳Ÿ. */
.pf-cap-url svg { display: none; }
/* **׳‘׳¨׳§ ׳©׳¢׳•׳‘׳¨ ׳¢׳œ ׳”׳ž׳×׳›׳×** -׳׳ ׳™׳ž׳¦׳™׳” ׳§׳œ׳” ׳©׳ž׳•׳©׳›׳× ׳׳× ׳”׳¢׳™׳Ÿ ׳‘׳œ׳™ ׳œ׳”׳–׳™׳– ׳׳× ׳”׳œ׳•׳—׳™׳×
   ׳•׳‘׳œ׳™ ׳œ׳”׳‘׳”׳‘ ׳¢׳œ ׳”׳˜׳§׳¡׳˜: ׳”׳™׳ ׳¨׳¦׳” ׳ž׳×׳—׳×׳™׳• (ג€Žz-indexג€Ž), ׳׳—׳× ׳œ-6 ׳©׳ ׳™׳•׳×. */
.pf-cap-url::after {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 244, 214, 0.42) 50%, transparent 62%);
    transform: translateX(-140%);
    animation: pf-url-shine 6s ease-in-out 1.2s infinite;
}
@keyframes pf-url-shine {
    0%, 72%  { transform: translateX(-140%); }
    88%, 100% { transform: translateX(140%); }
}
@media (prefers-reduced-motion: reduce) { .pf-cap-url::after { animation: none; opacity: 0; } }
.pf-cap-url:hover {
    filter: brightness(1.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 208, 0.7),
        inset 0 -1px 0 rgba(60, 33, 6, 0.5),
        0 3px 10px rgba(120, 76, 20, 0.45),
        0 0 14px rgba(255, 209, 90, 0.4);
}
.pf-cap-url:active { transform: translateY(1px); }

/* **׳₪׳¨׳•׳™׳§׳˜ ׳‘׳œ׳™ ׳×׳§׳¦׳™׳¨: ׳”׳œ׳•׳—׳™׳× ׳¢׳•׳œ׳” ׳׳œ ׳”׳׳ž׳¦׳¢.** ׳ž׳§׳•׳ ׳”׳×׳§׳¦׳™׳¨ ׳ ׳©׳ž׳¨ ׳×׳ž׳™׳“ (׳©׳×׳™
   ׳©׳•׳¨׳•׳×) ׳›׳“׳™ ׳©׳”׳ ׳§׳•׳“׳•׳× ׳•׳”׳ž׳•׳ ׳” ׳œ׳ ׳™׳–׳•׳–׳• ׳‘׳™׳Ÿ ׳©׳§׳•׳₪׳™׳•׳× -׳׳‘׳œ ׳›׳©׳׳™׳Ÿ ׳˜׳§׳¡׳˜ ׳–׳” ׳ž׳©׳׳™׳¨
   ׳—׳œ׳œ ׳¨׳™׳§ ׳ž׳¢׳œ ׳”׳œ׳•׳—׳™׳×, ׳•׳”׳™׳ ׳ ׳¨׳׳™׳× ׳×׳œ׳•׳™׳” ׳‘׳×׳—׳×׳™׳× ׳”׳§׳œ׳£. ׳”׳”׳¨׳ž׳” ׳”׳™׳ ׳‘-ג€Žtopג€Ž ׳•׳œ׳
   ׳‘-ג€Žtransformג€Ž ׳ž׳©׳×׳™ ׳¡׳™׳‘׳•׳×: ג€Žtransformג€Ž ׳×׳₪׳•׳¡ ׳‘׳׳ ׳™׳ž׳¦׳™׳™׳× ׳”׳”׳—׳œ׳₪׳” ׳•׳‘׳œ׳—׳™׳¦׳”, ׳•-ג€Žtopג€Ž
   ׳¢׳œ ׳׳œ׳ž׳ ׳˜ ג€Žrelativeג€Ž **׳׳™׳ ׳• ׳ž׳©׳ ׳” ׳׳× ׳”׳₪׳¨׳™׳¡׳”** -׳›׳œ׳•׳ž׳¨ ׳”׳’׳•׳‘׳” ׳”׳©׳ž׳•׳¨ ׳ ׳©׳׳¨ ׳‘׳“׳™׳•׳§
   ׳›׳₪׳™ ׳©׳”׳•׳. ׳”׳¢׳¨׳š ׳”׳•׳ ׳›׳—׳¦׳™ ׳ž׳’׳•׳‘׳” ׳”׳×׳§׳¦׳™׳¨, ׳‘׳׳•׳×׳Ÿ ׳™׳—׳™׳“׳•׳× ׳©׳œ׳•. */
/* **׳¨׳§ ׳›׳©׳”׳ž׳§׳•׳ ׳‘׳׳ž׳× ׳©׳ž׳•׳¨.** ׳‘-ג€Žpf-nodescג€Ž (׳׳£ ׳₪׳¨׳•׳™׳§׳˜ ׳‘׳œ׳™ ׳×׳§׳¦׳™׳¨) ׳”׳×׳§׳¦׳™׳¨ ׳™׳•׳¨׳“
   ׳ž׳”׳–׳¨׳™׳ž׳” ׳œ׳’׳ž׳¨׳™, ׳•׳׳– ׳”׳”׳¨׳ž׳” ׳›׳‘׳¨ ׳œ׳ ׳ ׳›׳ ׳¡׳× ׳œ׳—׳œ׳œ ׳¨׳™׳§ ׳׳œ׳ **׳ž׳˜׳₪׳¡׳× ׳¢׳œ ׳”׳›׳•׳×׳¨׳×** -
   ׳ ׳ž׳“׳“ ׳©׳”׳œ׳•׳—׳™׳× ׳›׳™׳¡׳×׳” ׳׳× ׳©׳•׳¨׳×׳” ׳”׳©׳ ׳™׳™׳”. */
.pf-caption:not(.pf-nodesc) .pf-cap-inner:has(.pf-cap-desc[hidden]) .pf-cap-url {
    top: calc(-1 * clamp(0.62rem, 2.7cqw, 0.9rem) * var(--pf-ts, 1) * 1.35);
}
/* ג€Žprefers-reduced-motionג€Ž ׳ž׳›׳•׳‘׳“ ׳“׳¨׳š ׳”-ג€Žtransitionג€Ž ׳”׳›׳œ׳œ׳™ ׳©׳œ ׳”׳›׳™׳×׳•׳‘ */
/* ׳”׳ž׳§׳•׳ ׳©׳ž׳•׳¨ ׳’׳ ׳›׳©׳œ׳₪׳¨׳•׳™׳§׳˜ ׳”׳–׳” ׳׳™׳Ÿ ׳›׳×׳•׳‘׳×: ׳”׳©׳•׳¨׳” ׳ ׳‘׳ ׳™׳× ׳¨׳§ ׳›׳©׳ž׳™׳©׳”׳• ׳‘׳™׳§׳© ׳׳•׳×׳”
   (ג€Ž$anyLinkUrlג€Ž ׳‘-PHP), ׳•׳ž׳¨׳’׳¢ ׳©׳”׳™׳ ׳§׳™׳™׳ž׳× ׳”׳™׳ ׳—׳™׳™׳‘׳× ׳œ׳”׳™׳•׳× ׳‘׳’׳•׳‘׳” ׳§׳‘׳•׳¢ -׳׳—׳¨׳×
   ׳”׳ ׳§׳•׳“׳•׳× ׳•׳”׳ž׳•׳ ׳” ׳©׳ž׳×׳—׳×׳™׳” ׳§׳•׳₪׳¦׳™׳ ׳‘׳›׳œ ׳ž׳¢׳‘׳¨ ׳‘׳™׳Ÿ ׳©׳§׳•׳₪׳™׳•׳×. */
.pf-cap-url[hidden] { display: inline-flex; visibility: hidden; }
.pf-caption.pf-cap-swap .pf-cap-url { opacity: 0; transform: translateY(6px); }
.pf-caption[data-capanim="none"] .pf-cap-url { transition: none; }
.pf-caption[data-capanim="none"].pf-cap-swap .pf-cap-url { opacity: 1; transform: none; }
/* ׳‘׳©׳œ׳˜ ׳¦׳¨ ׳”׳œ׳•׳—׳™׳× ׳ž׳¦׳˜׳ž׳¦׳ž׳× ׳‘׳¨׳™׳₪׳•׳“ ׳•׳œ׳ ׳‘׳’׳•׳“׳œ ׳”׳׳•׳× -׳”׳›׳×׳•׳‘׳× ׳”׳™׳ ׳›׳œ ׳”׳ž׳™׳“׳¢ ׳›׳׳Ÿ */
@container (max-width: 320px) {
    .pf-cap-url { padding-inline: 0.6em; }
    /* **בלוח צר שני הכפתורים עוברים לשתי שורות.** בשורה אחת נשארו להם כ-90px
       כל אחד, ו"צפייה בפרויקט" נחתך (נמדד ‎scrollWidth > clientWidth‎ בכל
       התבניות). תווית שאי אפשר לקרוא גרועה מכפתור שתופס עוד שורה. */
    .pf-cap-actions { flex-direction: column; gap: 1.4cqw; }
    .pf-cap-link, .pf-cap-more { width: 100%; }
}
.pf-caption.pf-cap-swap .pf-cap-desc { opacity: 0; transform: translateY(6px); }
/* --pf-ts ׳ž׳•׳›׳₪׳œ ׳‘׳›׳œ ׳©׳“׳” ׳‘׳ ׳₪׳¨׳“: ׳”-clamp ׳ ׳×׳•׳Ÿ ׳‘-rem/vw, ׳•׳œ׳›׳Ÿ font-size ׳¢׳œ ׳”׳”׳•׳¨׳”
   ׳œ׳ ׳”׳™׳” ׳ž׳©׳₪׳™׳¢ ׳¢׳œ׳™׳• ׳›׳œ׳œ. */
/* ׳’׳•׳‘׳” ׳©׳ž׳•׳¨ ׳œ׳©׳•׳¨׳” ׳׳—׳× ׳’׳ ׳›׳©׳׳™׳Ÿ ׳›׳•׳×׳¨׳×, ׳•׳—׳™׳×׳•׳š ׳‘׳©׳×׳™׳™׳ -׳׳—׳¨׳× ׳₪׳¨׳•׳™׳§׳˜ ׳‘׳œ׳™ ׳›׳•׳×׳¨׳×
   ׳׳• ׳¢׳ ׳›׳•׳×׳¨׳× ׳׳¨׳•׳›׳” ׳ž׳–׳™׳– ׳׳× ׳›׳œ ׳ž׳” ׳©׳ž׳×׳—׳×׳™׳• (׳ ׳ž׳“׳“: ׳§׳₪׳™׳¦׳” ׳©׳œ 78px ׳‘׳ ׳§׳•׳“׳•׳×). */
.pf-cap-title {
    flex: 0 0 auto;         /* ׳¨׳׳” ׳”׳”׳¢׳¨׳” ׳‘-ג€Ž.pf-cap-descג€Ž -׳׳—׳¨׳× ׳”׳›׳•׳×׳¨׳× ׳ ׳—׳×׳›׳× ׳‘׳œ׳™ "ג€¦" */
    /* **׳‘׳œ׳™ ׳–׳” ׳”׳›׳•׳×׳¨׳× ׳’׳•׳œ׳©׳× ׳¢׳œ ׳ž׳¡׳’׳¨׳× ׳”׳¢׳¥.** ג€Ždisplay: -webkit-boxג€Ž ׳׳™׳ ׳• ׳ž׳¦׳˜׳ž׳¦׳
       ׳œ׳¨׳•׳—׳‘ ׳”׳”׳•׳¨׳” ׳ž׳¢׳¦׳ž׳• (׳‘׳©׳•׳ ׳” ׳ž׳₪׳¡׳§׳” ׳¨׳’׳™׳œ׳”), ׳•׳œ׳›׳Ÿ ׳›׳•׳×׳¨׳× ׳׳¨׳•׳›׳” ׳ ׳ž׳×׳—׳” ׳ž׳¢׳‘׳¨ ׳œ׳©׳˜׳—
       ׳”׳›׳×׳™׳‘׳” ׳•׳ ׳§׳¨׳׳” ׳›"׳ ׳—׳×׳›׳×". ׳”׳×׳§׳¦׳™׳¨ ׳œ׳ ׳¡׳‘׳œ ׳ž׳–׳” ׳›׳™ ׳”׳™׳” ׳œ׳• ג€Žmax-widthג€Ž ׳ž׳œ׳›׳×׳—׳™׳œ׳”. */
    max-width: 100%;
    margin: 0;
    min-height: 1.25em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    /* ׳’׳•׳₪׳Ÿ/׳’׳•׳“׳œ/׳¦׳‘׳¢ ׳ž׳”׳ ׳™׳”׳•׳œ (׳×׳™׳§ ׳¢׳‘׳•׳“׳•׳× ג† "׳¢׳™׳¦׳•׳‘ ׳›׳•׳×׳¨׳× ׳”׳₪׳¨׳•׳™׳§׳˜"). ׳§׳•׳“׳ ׳œ׳ ׳”׳™׳”
       ׳›׳׳Ÿ ג€Žfont-familyג€Ž ׳›׳œ׳œ, ׳•׳œ׳›׳Ÿ ׳©׳•׳ ׳‘׳•׳¨׳¨ ׳’׳•׳₪׳Ÿ ׳‘׳ ׳™׳”׳•׳œ ׳œ׳ ׳”׳©׳₪׳™׳¢ ׳¢׳œ ׳”׳›׳•׳×׳¨׳× ׳”׳–׳•.
       ג€Ž--pf-tsג€Ž (׳’׳•׳“׳œ ׳”׳›׳™׳×׳•׳‘ ׳₪׳¨-׳×׳‘׳ ׳™׳×) ׳ž׳•׳›׳₪׳œ ׳‘׳’׳•׳“׳œ ׳©׳ ׳‘׳—׳¨ ׳›׳׳Ÿ. */
    font-family: var(--pf-t-font, var(--heading-font, 'Suez One')), serif;
    /* ׳ ׳ž׳“׳“ ׳ž׳•׳œ ׳¨׳•׳—׳‘ ׳”׳©׳œ׳˜ (ג€Žcqwג€Ž) ׳•׳œ׳ ׳ž׳•׳œ ׳—׳œ׳•׳Ÿ ׳”׳“׳₪׳“׳₪׳Ÿ -׳¨׳׳” ׳”׳”׳¢׳¨׳” ׳‘-ג€Ž.pf-cap-descג€Ž */
    font-size: calc(clamp(0.9rem, 4.4cqw, 1.5rem) * var(--pf-ts, 1) * var(--pf-t-scale, 1));
    font-weight: 800;
    /* ׳—׳•׳ ׳›׳”׳” ׳¢׳œ ׳”׳§׳œ׳£ ׳”׳‘׳”׳™׳¨. ג€Ž--pf-t-colorג€Ž (׳‘׳•׳¨׳¨ ׳”׳¦׳‘׳¢ ׳‘׳ ׳™׳”׳•׳œ) ׳¢׳“׳™׳™׳Ÿ ׳’׳•׳‘׳¨ -
       ׳–׳• ׳¨׳§ ׳‘׳¨׳™׳¨׳× ׳”׳ž׳—׳“׳œ, ׳•׳”׳™׳ ׳”׳•׳×׳׳ž׳” ׳œ׳©׳œ׳˜. */
    color: var(--pf-t-color, #4a2f12);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
/* ---- ׳׳ ׳™׳ž׳¦׳™׳™׳× ׳”׳”׳—׳œ׳₪׳” ׳‘׳™׳Ÿ ׳₪׳¨׳•׳™׳§׳˜׳™׳ ----
   ׳ ׳‘׳—׳¨׳× ׳‘׳ ׳™׳”׳•׳œ (ג€Ždata-capanimג€Ž). ׳‘׳¨׳™׳¨׳× ׳”׳ž׳—׳“׳œ ׳”׳™׳ ׳¢׳ž׳¢׳•׳; ג€Žnoneג€Ž ׳ž׳—׳œ׳™׳£ ׳ž׳™׳“.
   **׳”׳׳ ׳™׳ž׳¦׳™׳” ׳—׳œ׳” ׳¢׳œ ׳©׳˜׳— ׳”׳›׳×׳™׳‘׳”, ׳œ׳ ׳¢׳œ ׳”׳©׳œ׳˜** -׳—׳•׳¥ ׳ž-ג€Žswingג€Ž/ג€Žflipג€Ž ׳©׳›׳œ ׳”׳¢׳ ׳™׳™׳Ÿ
   ׳‘׳”׳ ׳”׳•׳ ׳×׳ ׳•׳¢׳× ׳”׳©׳œ׳˜ ׳¢׳¦׳ž׳•. */
/* ג€Ž--pf-cap-animג€Ž **׳—׳™׳™׳‘ ׳œ׳”׳™׳©׳׳¨ ׳–׳”׳” ׳œ׳—׳œ׳•׳Ÿ ׳”-swap ׳‘-js/portfolio.js** (260ms).
   ׳›׳©׳”׳ ׳ ׳₪׳¨׳“׳• (0.35s ׳ž׳•׳œ 180ms) ׳”׳›׳™׳×׳•׳‘ ׳“׳”׳” ׳œ׳©׳œ׳™׳©, ׳”׳ž׳—׳œ׳§׳” ׳™׳¨׳“׳” ׳•׳”׳•׳ ׳—׳–׳¨ -
   ׳•׳–׳” ׳ž׳” ׳©׳ ׳¨׳׳” ׳›׳”׳‘׳”׳•׳‘/׳§׳₪׳™׳¦׳” ׳‘׳ž׳¢׳‘׳¨ ׳‘׳™׳Ÿ ׳₪׳¨׳•׳™׳§׳˜׳™׳. */
.pf-caption { --pf-cap-anim: 0.26s; }
.pf-cap-title, .pf-cap-desc, .pf-cap-actions, .pf-cap-inner .pf-controls {
    transition: opacity var(--pf-cap-anim) ease, transform var(--pf-cap-anim) ease;
}
.pf-caption[data-capanim="none"] .pf-cap-title,
.pf-caption[data-capanim="none"] .pf-cap-desc,
.pf-caption[data-capanim="none"] .pf-cap-actions,
.pf-caption[data-capanim="none"] .pf-cap-inner .pf-controls { transition: none; }

/* fade (׳‘׳¨׳™׳¨׳× ׳ž׳—׳“׳œ) + rise: ׳׳•׳×׳” ׳“׳¢׳™׳›׳”, ׳”׳”׳‘׳“׳œ ׳”׳•׳ ׳ž׳¨׳—׳§ ׳”׳”׳™׳¡׳˜ */
.pf-caption.pf-cap-swap .pf-cap-title,
.pf-caption.pf-cap-swap .pf-cap-desc { opacity: 0; transform: translateY(6px); }
.pf-caption[data-capanim="rise"].pf-cap-swap .pf-cap-title,
.pf-caption[data-capanim="rise"].pf-cap-swap .pf-cap-desc,
.pf-caption[data-capanim="rise"].pf-cap-swap .pf-cap-actions { opacity: 0; transform: translateY(22px); }
.pf-caption[data-capanim="zoom"].pf-cap-swap .pf-cap-title,
.pf-caption[data-capanim="zoom"].pf-cap-swap .pf-cap-desc,
.pf-caption[data-capanim="zoom"].pf-cap-swap .pf-cap-actions { opacity: 0; transform: scale(0.86); }
.pf-caption[data-capanim="none"].pf-cap-swap .pf-cap-title,
.pf-caption[data-capanim="none"].pf-cap-swap .pf-cap-desc { opacity: 1; transform: none; }

/* ---- ׳׳₪׳§׳˜׳™׳ ׳©׳ž׳–׳™׳–׳™׳ ׳׳× ׳”׳©׳œ׳˜ ׳¢׳¦׳ž׳• ----
   **׳”׳₪׳¨׳¡׳₪׳§׳˜׳™׳‘׳” ׳™׳•׳©׳‘׳× ׳¢׳œ ג€Ž.pf-captionג€Ž ׳•׳œ׳ ׳¢׳œ ׳”׳©׳œ׳˜.** ׳œ-ג€Ž.pf-cap-boardג€Ž ׳™׳©
   ג€Žcontainer-type: inline-sizeג€Ž, ׳©׳’׳•׳¨׳¨ ג€Žcontain: layoutג€Ž -׳•׳–׳” ׳”׳•׳₪׳š ׳׳•׳×׳•
   ׳œ-containing block ׳•׳ž׳©׳˜׳— ׳׳× ׳”׳×׳œ׳×-׳ž׳ž׳“ ׳©׳œ ׳¢׳¦׳ž׳•. ׳ž׳”׳”׳•׳¨׳” ׳–׳” ׳¢׳•׳‘׳“ ׳›׳¨׳’׳™׳œ.

   **׳œ׳ž׳” ׳—׳¦׳™-׳¡׳™׳‘׳•׳‘ ׳ž׳¡׳₪׳™׳§ ׳œ׳”׳™׳₪׳•׳š ׳ž׳œ׳:** ׳—׳œ׳•׳Ÿ ׳”׳”׳—׳œ׳₪׳” (ג€Žpf-cap-swapג€Ž) ׳ ׳ž׳©׳š ׳‘׳“׳™׳•׳§
   ׳¢׳“ ׳”׳¨׳’׳¢ ׳©׳‘׳• ׳”׳×׳•׳›׳Ÿ ׳ž׳×׳—׳œ׳£. ׳׳₪׳§׳˜ ׳©׳ž׳¡׳×׳•׳‘׳‘ ׳œ-90ֲ° ׳ž׳’׳™׳¢ ׳œ׳©׳ ׳›׳©׳”׳©׳œ׳˜ **׳¢׳œ ׳”׳§׳¦׳”**
   ׳•׳‘׳œ׳×׳™ ׳ ׳¨׳׳”, ׳•׳׳– ׳—׳•׳–׳¨ ׳œ-0 ׳¢׳ ׳”׳×׳•׳›׳Ÿ ׳”׳—׳“׳©. ׳”׳×׳•׳¦׳׳” ׳ ׳§׳¨׳׳× ׳›׳”׳™׳₪׳•׳š ׳©׳œ 180ֲ° ׳‘׳œ׳™
   ׳©׳׳£ ׳₪׳¨׳™׳™׳ ׳™׳¨׳׳” ׳˜׳§׳¡׳˜ ׳”׳₪׳•׳š. */
.pf-caption[data-capanim="swing"] .pf-cap-board,
.pf-caption[data-capanim="flip"]  .pf-cap-board,
.pf-caption[data-capanim="coin"]  .pf-cap-board,
.pf-caption[data-capanim="cube"]  .pf-cap-board,
.pf-caption[data-capanim="door"]  .pf-cap-board,
.pf-caption[data-capanim="drop"]  .pf-cap-board,
.pf-caption[data-capanim="unroll"] .pf-cap-board,
.pf-caption[data-capanim="spin"]  .pf-cap-board {
    transition: transform var(--pf-cap-anim) cubic-bezier(0.34, 1.35, 0.5, 1),
                opacity var(--pf-cap-anim) ease;
    backface-visibility: hidden;
}
.pf-caption[data-capanim="coin"],
.pf-caption[data-capanim="cube"],
.pf-caption[data-capanim="door"],
.pf-caption[data-capanim="spin"],
.pf-caption[data-capanim="flip"] { perspective: 1200px; perspective-origin: 50% 45%; }

/* ׳ ׳“׳ ׳•׳“ ׳•׳”׳˜׳™׳” -׳×׳ ׳•׳¢׳” ׳§׳˜׳ ׳”, ׳ž׳¦׳™׳¨ ׳”׳×׳œ׳™׳™׳” ׳©׳‘׳¨׳׳© ׳”׳©׳œ׳˜ */
.pf-caption[data-capanim="swing"] .pf-cap-board,
.pf-caption[data-capanim="flip"]  .pf-cap-board { transform-origin: 50% 8%; }
.pf-caption[data-capanim="swing"].pf-cap-swap .pf-cap-board { transform: rotate(-3deg); }
.pf-caption[data-capanim="flip"].pf-cap-swap  .pf-cap-board { transform: rotateX(34deg); }

/* ׳”׳™׳₪׳•׳š ׳ž׳˜׳‘׳¢ -׳¦׳™׳¨ ׳׳ ׳›׳™, ׳¢׳“ ׳”׳™׳¢׳œ׳ž׳•׳× ׳ž׳•׳—׳œ׳˜׳× */
.pf-caption[data-capanim="coin"].pf-cap-swap .pf-cap-board { transform: rotateY(90deg); }
/* ׳’׳œ׳’׳•׳œ -׳׳•׳×׳• ׳¨׳¢׳™׳•׳Ÿ ׳¢׳œ ׳”׳¦׳™׳¨ ׳”׳׳•׳₪׳§׳™ */
.pf-caption[data-capanim="cube"].pf-cap-swap .pf-cap-board { transform: rotateX(90deg); }
/* ׳“׳œ׳× -׳ ׳₪׳×׳—׳× ׳ž׳”׳§׳¦׳”. ג€ŽRTLג€Ž: ׳”׳¦׳™׳¨ ׳‘׳§׳¦׳” ׳”׳™׳ž׳ ׳™, ׳›׳š ׳©׳”׳™׳ ׳ ׳₪׳×׳—׳× ׳׳œ ׳×׳•׳š ׳”׳¢׳ž׳•׳“ */
.pf-caption[data-capanim="door"] .pf-cap-board { transform-origin: 100% 50%; }
.pf-caption[data-capanim="door"].pf-cap-swap .pf-cap-board { transform: rotateY(-78deg); opacity: 0.25; }
/* ׳ ׳₪׳™׳œ׳” -׳™׳•׳¦׳ ׳ž׳œ׳ž׳¢׳œ׳”, ׳•׳”-easing ׳”׳§׳•׳₪׳¦׳ ׳™ ׳ž׳—׳–׳™׳¨ ׳׳•׳×׳• ׳‘׳ ׳—׳™׳×׳” */
.pf-caption[data-capanim="drop"].pf-cap-swap .pf-cap-board { transform: translateY(-52%) rotate(-5deg); opacity: 0; }
/* ׳₪׳¨׳™׳©׳× ׳ž׳’׳™׳œ׳” -׳ž׳×׳§׳₪׳œ ׳׳œ ׳”׳§׳¦׳” ׳”׳¢׳œ׳™׳•׳Ÿ */
.pf-caption[data-capanim="unroll"] .pf-cap-board { transform-origin: 50% 0; }
.pf-caption[data-capanim="unroll"].pf-cap-swap .pf-cap-board { transform: scaleY(0.02); opacity: 0.4; }
/* ׳¡׳—׳¨׳•׳¨ -׳ž׳×׳¨׳—׳§ ׳‘׳¢׳•׳ž׳§ ׳×׳•׳š ׳›׳“׳™ ׳¡׳™׳‘׳•׳‘ */
.pf-caption[data-capanim="spin"].pf-cap-swap .pf-cap-board {
    transform: translateZ(-320px) rotateZ(-14deg) scale(0.72); opacity: 0;
}

/* ׳‘׳׳₪׳§׳˜׳™׳ ׳©׳ž׳¢׳œ׳™׳ž׳™׳ ׳׳× ׳”׳©׳œ׳˜ ׳׳™׳Ÿ ׳˜׳¢׳ ׳œ׳¢׳ž׳¢׳ ׳’׳ ׳׳× ׳”׳˜׳§׳¡׳˜ ׳©׳‘׳×׳•׳›׳• -׳”׳•׳ ׳ž׳ž׳™׳œ׳
   ׳׳™׳ ׳• ׳ ׳¨׳׳”, ׳•׳”׳“׳¢׳™׳›׳” ׳”׳›׳₪׳•׳œ׳” ׳¨׳§ ׳’׳•׳¨׳¢׳× ׳ž׳”׳—׳“׳•׳× ׳‘׳¨׳’׳¢ ׳”׳—׳–׳¨׳”. */
.pf-caption[data-capanim="coin"].pf-cap-swap .pf-cap-title,
.pf-caption[data-capanim="coin"].pf-cap-swap .pf-cap-desc,
.pf-caption[data-capanim="cube"].pf-cap-swap .pf-cap-title,
.pf-caption[data-capanim="cube"].pf-cap-swap .pf-cap-desc,
.pf-caption[data-capanim="door"].pf-cap-swap .pf-cap-title,
.pf-caption[data-capanim="door"].pf-cap-swap .pf-cap-desc,
.pf-caption[data-capanim="drop"].pf-cap-swap .pf-cap-title,
.pf-caption[data-capanim="drop"].pf-cap-swap .pf-cap-desc,
.pf-caption[data-capanim="unroll"].pf-cap-swap .pf-cap-title,
.pf-caption[data-capanim="unroll"].pf-cap-swap .pf-cap-desc,
.pf-caption[data-capanim="spin"].pf-cap-swap .pf-cap-title,
.pf-caption[data-capanim="spin"].pf-cap-swap .pf-cap-desc { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .pf-cap-title, .pf-cap-desc, .pf-cap-actions, .pf-cap-inner .pf-controls,
    .pf-caption .pf-cap-board { transition: none !important; }
    .pf-caption.pf-cap-swap .pf-cap-board { transform: none !important; }
}
/* ׳”׳₪׳¢׳•׳œ׳” ׳”׳¨׳׳©׳™׳× -׳–׳”׳‘ ׳ž׳œ׳. ׳”׳’׳׳•׳ž׳˜׳¨׳™׳” ׳ž׳©׳•׳×׳₪׳× ׳œ-ג€Ž.pf-cap-moreג€Ž ׳•׳ž׳•׳’׳“׳¨׳× ׳™׳—׳“ ׳׳™׳×׳•
   ׳‘׳”׳ž׳©׳š; ׳›׳׳Ÿ ׳¨׳§ ׳”׳¦׳‘׳¢ ׳•׳”׳ž׳©׳§׳œ. ׳‘׳œ׳™ ג€Žmargin-topג€Ž: ׳”׳ž׳¨׳•׳•׳— ׳™׳•׳©׳‘ ׳¢׳œ ג€Ž.pf-cap-actionsג€Ž,
   ׳•׳×׳•׳¡׳₪׳× ׳›׳׳Ÿ ׳”׳’׳“׳™׳œ׳” ׳׳× ׳©׳•׳¨׳× ׳”׳₪׳¢׳•׳œ׳•׳× ׳¨׳§ ׳›׳©׳”׳™׳” ׳§׳™׳©׳•׳¨ -׳›׳œ׳•׳ž׳¨ ׳”׳–׳™׳–׳” ׳׳× ׳”׳ ׳§׳•׳“׳•׳×. */
.pf-cap-link {
    font-size: calc(clamp(0.62rem, 2.9cqw, 0.92rem) * var(--pf-ts, 1));
    color: var(--c-ink, #1f150e);
    background: linear-gradient(180deg, var(--c-gold-light, #ffe7a3), var(--c-gold, #ffd15a) 60%, var(--c-gold-deep, #d39a1a));
    border: 1px solid rgba(122, 79, 40, 0.6);
    box-shadow: 0 2px 6px rgba(74, 47, 18, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.pf-cap-link[hidden] { display: none; }   /* ׳’׳•׳‘׳¨ ׳¢׳œ display:inline-flex -׳‘׳œ׳™ ׳§׳™׳©׳•׳¨ ׳׳™׳Ÿ ׳›׳₪׳×׳•׳¨ */
.pf-cap-link:hover { filter: brightness(1.05); box-shadow: 0 4px 10px rgba(74, 47, 18, 0.35); }

/* ׳”׳›׳•׳×׳¨׳× ׳₪׳•׳×׳—׳× ׳’׳ ׳”׳™׳ ׳׳× ׳”׳›׳¨׳˜׳™׳¡, ׳׳‘׳œ ׳¨׳§ ׳›׳©׳™׳© ׳ž׳” ׳œ׳₪׳×׳•׳—. ׳”׳’׳™׳©׳” ׳ž׳”׳ž׳§׳œ׳“׳× ׳ž׳•׳‘׳˜׳—׳×
   ׳“׳¨׳š ׳›׳₪׳×׳•׳¨ "׳₪׳¨׳˜׳™ ׳”׳₪׳¨׳•׳™׳§׳˜" -׳”׳›׳•׳×׳¨׳× ׳”׳™׳ ׳¨׳ž׳– ׳ ׳•׳¡׳£ ׳œ׳¢׳›׳‘׳¨/׳ž׳’׳¢ ׳‘׳œ׳‘׳“. */
.pf-caption.pf-has-detail .pf-cap-title { cursor: pointer; pointer-events: auto; }
.pf-caption.pf-has-detail .pf-cap-title:hover { color: #7a4f28; }

/* ׳©׳•׳¨׳× ׳”׳₪׳¢׳•׳œ׳•׳×: "׳₪׳¨׳˜׳™ ׳”׳₪׳¨׳•׳™׳§׳˜" (׳ž׳©׳ ׳™, ׳ž׳×׳׳¨) ׳•"׳¦׳₪׳™׳™׳” ׳‘׳₪׳¨׳•׳™׳§׳˜" (׳¨׳׳©׳™, ׳–׳”׳‘).
   ג€Žmin-heightג€Ž ׳§׳‘׳•׳¢ ׳œ׳©׳•׳¨׳” ׳•׳œ׳©׳ ׳™ ׳”׳›׳₪׳×׳•׳¨׳™׳ ׳’׳ ׳™׳—׳“: ׳₪׳¨׳•׳™׳§׳˜ ׳‘׳œ׳™ ׳§׳™׳©׳•׳¨, ׳‘׳œ׳™ ׳×׳™׳׳•׳¨ ׳׳•
   ׳‘׳œ׳™ ׳©׳ ׳™׳”׳ ׳”׳™׳” ׳ž׳§׳¦׳¨ ׳׳× ׳”׳›׳™׳×׳•׳‘ ׳•׳ž׳–׳™׳– ׳׳× ׳”׳ ׳§׳•׳“׳•׳× ׳•׳”׳ž׳•׳ ׳” ׳ž׳˜׳”. */
/* **׳₪׳¨׳•׳™׳§׳˜ ׳¢׳ ׳’׳ ׳×׳™׳׳•׳¨ ׳•׳’׳ ׳§׳™׳©׳•׳¨ ׳ž׳¦׳™׳’ ׳׳× ׳©׳ ׳™ ׳”׳›׳₪׳×׳•׳¨׳™׳ -׳•׳–׳” ׳”׳ž׳§׳¨׳” ׳”׳¦׳₪׳•׳£.**
   ׳©׳˜׳— ׳”׳›׳×׳™׳‘׳” ׳©׳œ ׳”׳©׳œ׳˜ ׳”׳•׳ 56% ׳ž׳¨׳•׳—׳‘׳• ׳‘׳œ׳‘׳“, ׳•׳œ׳›׳Ÿ ׳©׳ ׳™ ׳›׳₪׳×׳•׳¨׳™׳ ׳‘׳’׳•׳“׳œ ׳§׳‘׳•׳¢ ׳”׳™׳•
   ׳ ׳©׳‘׳¨׳™׳ ׳œ׳©׳×׳™ ׳©׳•׳¨׳•׳× ׳•׳“׳•׳—׳§׳™׳ ׳׳× ׳”׳ž׳¡׳₪׳•׳¨ ׳׳œ ׳ž׳—׳•׳¥ ׳œ׳§׳œ׳£. ׳”׳₪׳×׳¨׳•׳Ÿ: ׳”׳ ׳—׳•׳œ׳§׳™׳ ׳׳×
   ׳”׳¨׳•׳—׳‘ (ג€Žflex: 1 1 0ג€Ž) ׳•׳ž׳¦׳˜׳ž׳¦׳ž׳™׳ ׳™׳—׳“, ׳•׳”׳×׳•׳•׳™׳× ׳ ׳—׳×׳›׳× ׳‘-ellipsis ׳‘׳ž׳§׳•׳ ׳œ׳’׳œ׳•׳©. */
.pf-cap-actions {
    display: flex; align-items: stretch; justify-content: center;
    gap: 2cqw; width: 100%;
    /* ׳׳•׳•׳™׳¨ ׳ž׳¢׳œ ׳”׳›׳₪׳×׳•׳¨׳™׳ (׳‘׳§׳©׳× ׳”׳ž׳©׳×׳ž׳©): ׳”׳ ׳ ׳¦׳ž׳“׳• ׳œ׳›׳×׳•׳‘׳×/׳œ׳×׳§׳¦׳™׳¨ ׳•׳ ׳§׳¨׳׳• ׳›׳”׳ž׳©׳š
       ׳©׳œ׳”׳. ׳”׳¢׳¨׳š ׳‘-ג€Žcqwג€Ž ׳›׳“׳™ ׳©׳™׳×׳›׳•׳•׳¥ ׳¢׳ ׳”׳©׳œ׳˜, ׳•׳”׳•׳ **׳§׳‘׳•׳¢ ׳œ׳›׳œ ׳”׳©׳§׳•׳₪׳™׳•׳×** ׳•׳œ׳›׳Ÿ
       ׳׳™׳ ׳• ׳ž׳–׳™׳– ׳׳× ׳”׳ ׳§׳•׳“׳•׳× ׳•׳”׳ž׳•׳ ׳”. */
    margin-top: 2.5cqw;
    min-height: calc(clamp(1.4rem, 6.1cqw, 2.15rem) * var(--pf-ts, 1));
}
/* ׳©׳ ׳™ ׳”׳›׳₪׳×׳•׳¨׳™׳ **׳–׳•׳’** ׳•׳œ׳ ׳©׳ ׳™ ׳¢׳™׳¦׳•׳‘׳™׳ ׳©׳”׳–׳“׳ž׳ ׳• ׳™׳—׳“: ׳׳•׳×׳” ׳’׳׳•׳ž׳˜׳¨׳™׳” ׳‘׳“׳™׳•׳§ (׳’׳•׳‘׳”,
   ׳¢׳™׳’׳•׳œ, ׳¨׳™׳₪׳•׳“, ׳’׳•׳“׳œ ׳׳™׳™׳§׳•׳Ÿ), ׳•׳”׳׳™׳™׳§׳•׳Ÿ ׳ž׳•׳‘׳™׳œ ׳׳× ׳”׳˜׳§׳¡׳˜ ׳‘׳©׳ ׳™׳”׳. ׳ž׳” ׳©׳ž׳‘׳“׳™׳œ ׳”׳•׳
   ׳¨׳§ ׳”׳ž׳©׳§׳œ -׳–׳”׳‘ ׳ž׳œ׳ ׳œ׳₪׳¢׳•׳œ׳” ׳”׳¨׳׳©׳™׳×, ׳•׳ž׳×׳׳¨ ׳›׳”׳” ׳œ׳©׳ ׳™׳™׳”. */
.pf-cap-link, .pf-cap-more {
    box-sizing: border-box;
    flex: 1 1 0; min-width: 0; max-width: 15rem;
    display: inline-flex; align-items: center; justify-content: center; gap: 1.2cqw;
    min-height: calc(clamp(1.4rem, 6.1cqw, 2.15rem) * var(--pf-ts, 1));
    padding: 0 2.2cqw;
    border-radius: 999px;
    font-family: inherit; font-weight: 800; line-height: 1;
    text-decoration: none;
    transition: transform 0.15s ease, filter 0.2s ease, background 0.2s ease,
                border-color 0.2s ease, box-shadow 0.2s ease;
}
/* ׳”׳×׳•׳•׳™׳× ׳ ׳—׳×׳›׳×, ׳œ׳ ׳’׳•׳œ׳©׳× -׳›׳š ׳¨׳•׳—׳‘ ׳”׳›׳₪׳×׳•׳¨ ׳ ׳§׳‘׳¢ ׳¢"׳™ ׳”׳©׳œ׳˜ ׳•׳œ׳ ׳¢"׳™ ׳׳•׳¨׳š ׳”׳˜׳§׳¡׳˜ */
.pf-cap-link span, .pf-cap-more span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.pf-cap-link svg, .pf-cap-more svg { flex: 0 0 auto; width: 1.15em; height: 1.15em; }
/* ׳‘׳©׳œ׳˜ ׳¦׳¨ ׳”׳׳™׳™׳§׳•׳Ÿ ׳’׳•׳–׳œ ׳׳× ׳”׳ž׳§׳•׳ ׳ž׳”׳×׳•׳•׳™׳× ׳•׳”׳™׳ ׳ ׳—׳×׳›׳× ("׳¦׳₪׳™׳™׳” ׳‘..."). ׳”׳׳™׳™׳§׳•׳Ÿ ׳”׳•׳
   ׳§׳™׳©׳•׳˜; ׳”׳ž׳™׳œ׳” ׳”׳™׳ ׳”׳ž׳™׳“׳¢ -׳•׳œ׳›׳Ÿ ׳”׳•׳ ׳–׳” ׳©׳™׳•׳¨׳“. ג€Ž@containerג€Ž ׳•׳œ׳ media query: ׳ž׳”
   ׳©׳§׳•׳‘׳¢ ׳”׳•׳ ׳¨׳•׳—׳‘ **׳”׳©׳œ׳˜**, ׳©׳ ׳’׳–׳¨ ׳’׳ ׳ž׳’׳•׳‘׳” ׳”׳—׳œ׳•׳Ÿ ׳•׳œ׳ ׳¨׳§ ׳ž׳¨׳•׳—׳‘ ׳”׳ž׳¡׳š. */
@container (max-width: 26rem) {
    .pf-cap-link svg, .pf-cap-more svg { display: none; }
    /* ׳’׳ ׳”׳¨׳™׳₪׳•׳“ ׳™׳•׳¨׳“: ׳‘׳œ׳¢׳“׳™׳• "׳¦׳₪׳™׳™׳” ׳‘׳₪׳¨׳•׳™׳§׳˜" ׳¢׳“׳™׳™׳Ÿ ׳ ׳—׳×׳š ׳‘׳׳™׳™׳₪׳•׳Ÿ -׳ ׳ž׳“׳“ ׳₪׳¢׳¨ ׳©׳œ
       2px ׳‘׳™׳Ÿ ׳¨׳•׳—׳‘ ׳”׳×׳•׳•׳™׳× ׳œ׳¨׳•׳—׳‘ ׳”׳₪׳ ׳•׳™, ׳•׳–׳” ׳ž׳¡׳₪׳™׳§ ׳›׳“׳™ ׳œ׳§׳¦׳¥ ׳׳•׳×. */
    .pf-cap-link, .pf-cap-more { padding: 0 0.8cqw; gap: 0; }
}
.pf-cap-link:hover, .pf-cap-more:hover { transform: translateY(-2px); }
.pf-cap-link:active, .pf-cap-more:active { transform: translateY(0); }
.pf-cap-link:focus-visible, .pf-cap-more:focus-visible {
    outline: 2px solid var(--c-gold, #ffd15a); outline-offset: 3px;
}
/* ׳”׳ž׳©׳ ׳™ ׳¢׳œ ׳”׳§׳œ׳£ ׳”׳‘׳”׳™׳¨ = ׳ž׳×׳׳¨ ׳—׳•׳, ׳œ׳ "׳–׳›׳•׳›׳™׳× ׳›׳”׳”". ׳”׳’׳¨׳¡׳” ׳”׳›׳”׳” ׳ ׳‘׳ ׳×׳” ׳œ׳¨׳§׳¢
   ׳”׳›׳—׳•׳œ ׳©׳”׳™׳” ׳›׳׳Ÿ ׳§׳•׳“׳, ׳•׳¢׳œ ׳”׳¢׳¥ ׳”׳™׳ ׳ ׳§׳¨׳׳” ׳›׳›׳×׳. */
.pf-cap-more {
    cursor: pointer;
    font-size: calc(clamp(0.6rem, 2.7cqw, 0.88rem) * var(--pf-ts, 1));
    color: #4a2f12;
    background: rgba(255, 252, 240, 0.55);
    border: 1.5px solid rgba(122, 79, 40, 0.55);
}
.pf-cap-more[hidden] { display: none; }
.pf-cap-more:hover { background: rgba(255, 255, 255, 0.85); border-color: #7a4f28; }

/* ================= ׳¡׳™׳ ׳•׳Ÿ ׳œ׳₪׳™ ׳×׳’׳™׳•׳× =================
   ׳©׳•׳¨׳× ׳¦'׳™׳₪׳™׳ ׳‘׳™׳Ÿ ׳”׳›׳•׳×׳¨׳× ׳œ׳§׳¨׳•׳¡׳œ׳”. ג€Ž.pf-headג€Ž ׳ž׳•׳•׳×׳¨ ׳¢׳œ ׳׳™׳¨׳•׳¢׳™׳ ׳›׳“׳™ ׳œ׳ ׳œ׳—׳¡׳•׳ ׳׳×
   ׳’׳¨׳™׳¨׳× ׳”׳§׳¨׳•׳¡׳œ׳”, ׳•׳œ׳›׳Ÿ ׳”׳¦'׳™׳₪׳™׳ ׳ž׳—׳–׳™׳¨׳™׳ ג€Žpointer-eventsג€Ž ׳‘׳ž׳₪׳•׳¨׳©. */
.pf-filters {
    position: relative; z-index: 3;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem;
    margin: 0.9rem auto 0.2rem;
    max-width: 46rem; padding-inline: 0.8rem;
    pointer-events: auto;
}
.pf-chip {
    cursor: pointer; font-family: inherit;
    font-size: 0.85rem; font-weight: 700; line-height: 1;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    color: #eae2d2;
    background: rgba(9, 26, 52, 0.5);
    border: 1.5px solid rgba(255, 231, 163, 0.35);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    transition: transform 0.14s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pf-chip:hover { transform: translateY(-2px); background: rgba(255, 231, 163, 0.18); border-color: rgba(255, 231, 163, 0.6); }
.pf-chip:active { transform: translateY(0); }
/* ---- טלפון מסובב לרוחב: רחב אבל **נמוך מאוד** ----
   כל הטיפוגרפיה של גוש הכותרת נגזרת מהרוחב (‎5.2vw‎), ובמסך מסובב
   הרוחב דווקא גדול - אז הכותרת יוצאת ענקית בזמן שמה שנגמר הוא הגובה.
   זו אותה מלכודת שכבר תועדה כאן על במת הקרוסלה ("גובה הבמה חייב
   להיגזר גם מהגובה"), והפעם היא בגוש הכותרת: **נמדד ב-844x390
   שהכותרת+המבוא+הצ'יפים תופסים 173px מתוך 323 הפנויים (54%)**,
   והקרוסלה נדחקת מתחת לקצה.
   ‎dvh‎ ולא ‎vh‎ (חוק מתועד: באייפון ‎vh‎ נמדד מול ה-viewport הגדול,
   בלי סרגלי ספארי - בדיוק הרצועה שנחתכת). התנאי כולל ‎orientation‎
   כדי שחלון דפדפן נמוך במחשב לא יקבל טיפוגרפיה של טלפון. */
@media (max-height: 560px) and (orientation: landscape) {
    .pf-page { padding-block: 0.7rem 0.9rem; gap: 0.5rem; }
    .pf-heading { font-size: calc(clamp(1.3rem, 5.2dvh, 2.2rem) * var(--pf-h-scale, 1)); }
    .pf-intro { margin-top: 0.2rem; font-size: calc(clamp(0.78rem, 3dvh, 1rem) * var(--pf-i-scale, 1)); }
    .pf-filters { margin-top: 0.4rem; gap: 0.3rem; }
    .pf-chip { font-size: 0.76rem; padding: 0.3rem 0.7rem; }
}

/* הקלף בטלפון מסובב: **נגזר מהרוחב ולא מהגובה.**
   לקלף יש ‎aspect-ratio‎ של הציור (לאורך), והרוחב מוגבל ב-‎62vh‎ כדי
   שייכנס לגובה - נכון לאורך ובמחשב, אבל במסך מסובב הגובה הוא 390px
   והקלף יוצא **רצועה של 206px בתוך חלון של 844** (נמדד): אזור
   הכתיבה יורד ל-121px וטופס יצירת הקשר ל-94px. כאן הרוחב קובע
   והעמוד נגלל - בדיוק כמו שהוא מתנהג בטלפון לאורך. */
@media (max-height: 560px) and (orientation: landscape) {
    .about-card,
    .cms-bg-parchment .cms-card,
    .cms-bg-document01 .cms-card,
    .cms-bg-document02 .cms-card,
    .cms-bg-document03 .cms-card { width: min(24rem, 46vw); }
    .cms-page.cms-bg-parchment,
    .cms-page.cms-bg-document01,
    .cms-page.cms-bg-document02,
    .cms-page.cms-bg-document03 { align-items: center; }
}

.pf-chip:focus-visible { outline: 2px solid var(--c-gold, #ffd15a); outline-offset: 2px; }
.pf-chip.is-on {
    color: var(--c-ink, #1f150e);
    background: linear-gradient(180deg, var(--c-gold-light, #ffe7a3), var(--c-gold, #ffd15a) 60%, var(--c-gold-deep, #d39a1a));
    border-color: rgba(122, 79, 40, 0.5);
    box-shadow: 0 4px 12px rgba(13, 62, 120, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
@media (max-width: 640px) {
    /* ׳—׳•׳§ ׳”׳ž׳•׳‘׳™׳™׳œ: ׳”׳¦'׳™׳₪׳™׳ ׳ ׳©׳‘׳¨׳™׳ ׳œ׳©׳•׳¨׳•׳× ׳•׳œ׳ ׳ ׳—׳×׳›׳™׳, ׳•׳‘׳’׳•׳“׳œ ׳©׳ ׳•׳— ׳œ׳׳¦׳‘׳¢ */
    .pf-filters { gap: 0.35rem; margin-top: 0.7rem; padding-inline: 0.5rem; }
    .pf-chip { font-size: 0.8rem; padding: 0.45rem 0.8rem; }
    /* **׳”׳¨׳¦׳₪׳” ׳™׳•׳¨׳“׳× ׳‘׳ž׳¡׳š ׳¦׳¨.** ג€Ž24remג€Ž ׳©׳ ׳”׳™׳ ׳›׳ž׳¢׳˜ ׳›׳œ ׳¨׳•׳—׳‘ ׳”׳ž׳¡׳š, ׳•׳œ׳›׳Ÿ ׳’׳•׳‘׳” ׳”׳©׳œ׳˜
       ׳ ׳’׳–׳¨ ׳ž׳ž׳ ׳” ׳•׳œ׳ ׳ž׳”׳ž׳§׳•׳ ׳©׳ ׳©׳׳¨ -׳ ׳ž׳“׳“ ׳‘׳׳™׳™׳₪׳•׳Ÿ (664px ׳’׳œ׳•׳™׳™׳): ׳”׳©׳œ׳˜ ׳ ׳’׳ž׳¨
       103-196px **׳ž׳×׳—׳×** ׳œ׳§׳¦׳” ׳”׳×׳—׳×׳•׳Ÿ, ׳‘׳›׳œ ׳”׳×׳‘׳ ׳™׳•׳×, ׳›׳œ׳•׳ž׳¨ ׳”׳›׳₪׳×׳•׳¨׳™׳ ׳•׳”׳ž׳¡׳₪׳•׳¨ ׳₪׳©׳•׳˜
       ׳œ׳ ׳ ׳¨׳׳™׳. ׳¢׳ ׳¨׳¦׳₪׳” ׳ ׳ž׳•׳›׳” ׳™׳•׳×׳¨ ׳”׳•׳ ׳ž׳×׳›׳•׳•׳¥ ׳׳œ ׳ž׳” ׳©׳™׳©. */
    /* ---- איזון השלט במסך צר ----
       הרצפה ‎24rem‎ היא כמעט כל רוחב הטלפון (367 מתוך 390), ולכן השלט יצא
       ברוחב מלא ובגובה 228px -יותר מהמקום שנשאר מתחת לקרוסלה, כך שהוא גם נחתך
       מלמטה וגם נשען על הגרפיקה של הסצנה.
       **תקציב הגובה במסך 390x664:** סרגל 46 + כותרת ~120 + צ'יפים ~60 = 226;
       הבמה 218 (‎56vw‎); רווח 24 -> נשארים ~185 לשלט. ברוחב 78% (304px) הגובה
       הוא 189 -כמעט בדיוק, ובנוסף נשארת רצועת נוף משני הצדדים במקום שהשלט
       ייגע בקצוות. הרצפה יורדת כדי שהחישוב לפי המקום הפנוי יוכל לפעול בכלל. */
    .pf-cap-board { --pf-board-min: 11rem; max-width: 78%; }
    /* הטקסט נמדד מול **רוחב השלט**, וברוחב קטן יותר הרצפות ב-‎rem‎ הן ששולטות -
       ואז התוכן גבוה מהקלף ובורח ממנו. ירידה של ~12% מחזירה את היחס. */
    .pf-cap-title { font-size: calc(clamp(0.82rem, 4.4cqw, 1.5rem) * var(--pf-tsm, 1) * var(--pf-t-scale, 1)); }
    .pf-cap-desc  { font-size: calc(clamp(0.56rem, 2.7cqw, 0.9rem) * var(--pf-ts, 1)); }
    .pf-cap-url   { font-size: calc(clamp(0.64rem, 3.25cqw, 1.12rem) * var(--pf-ts, 1)); }
    .pf-cap-link  { font-size: calc(clamp(0.56rem, 2.9cqw, 0.92rem) * var(--pf-tsm, 1)); }
    .pf-cap-more  { font-size: calc(clamp(0.54rem, 2.7cqw, 0.88rem) * var(--pf-tsm, 1)); }
    .pf-cap-link, .pf-cap-more,
    .pf-cap-actions { min-height: calc(clamp(1.2rem, 6.1cqw, 2.15rem) * var(--pf-ts, 1)); }
}

/* ================= ׳›׳¨׳˜׳™׳¡ ׳”׳₪׳¨׳•׳™׳§׳˜ (׳ž׳©׳˜׳— ׳”׳§׳¨׳™׳׳”) =================
   ׳”׳₪׳¨׳“׳” ׳ž׳›׳•׳•׳ ׳× ׳‘׳™׳Ÿ "׳œ׳“׳₪׳“׳£" ׳œ"׳œ׳§׳¨׳•׳": ׳”׳§׳¨׳•׳¡׳œ׳” ׳”׳™׳ ׳—׳•׳•׳™׳” ׳•׳œ׳›׳Ÿ ׳”׳›׳™׳×׳•׳‘ ׳©׳‘׳” ׳§׳¦׳¨
   ׳•׳§׳‘׳•׳¢-׳’׳•׳‘׳”, ׳•׳›׳œ ׳”׳×׳™׳׳•׳¨ ׳”׳ž׳¢׳•׳¦׳‘ ׳—׳™ ׳›׳׳Ÿ -׳¢׳ ׳ž׳§׳•׳ ׳œ׳’׳œ׳•׳œ ׳•׳‘׳œ׳™ ׳œ׳”׳×׳—׳¨׳•׳× ׳‘׳₪׳¨׳•׳™׳§׳˜׳™׳
   ׳”׳׳—׳¨׳™׳. ׳‘׳ž׳•׳‘׳™׳™׳œ ׳–׳” ׳’׳™׳œ׳™׳•׳Ÿ ׳ž׳¡׳š-׳ž׳œ׳, ׳‘׳ž׳—׳©׳‘ ׳—׳œ׳•׳Ÿ ׳¢׳œ ׳”׳¡׳¦׳ ׳”. */
.pf-detail {
    position: fixed; inset: 0; z-index: 210;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(0.6rem, 3vw, 2rem);
    background: rgba(4, 14, 30, 0.62);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    pointer-events: auto;               /* .content ׳ž׳•׳•׳×׳¨ ׳¢׳œ ׳׳™׳¨׳•׳¢׳™׳ -׳›׳׳Ÿ ׳¦׳¨׳™׳š */
    animation: pf-detail-in 0.22s ease both;
}
.pf-detail[hidden] { display: none; }
@keyframes pf-detail-in { from { opacity: 0; } to { opacity: 1; } }
.pf-detail-card {
    position: relative;
    display: flex; flex-direction: column;
    /* הריפוד האופקי של אזור הגלילה כמשתנה, כי ‎.pf-detail-media‎ צריך לבטל אותו
       בדיוק כדי לצאת מקצה לקצה. שני מספרים נפרדים היו נפרדים זה מזה בשינוי הבא. */
    --pf-detail-pad: clamp(1.6rem, 5vw, 2rem);
    width: min(46rem, 100%); max-height: min(86vh, 52rem);
    border-radius: 18px; overflow: hidden;
    color: #f2ece0;
    background: linear-gradient(180deg, #15406f, #0a2244 70%, #07182f);
    border: 1.5px solid rgba(255, 231, 163, 0.45);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    animation: pf-detail-rise 0.28s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
@keyframes pf-detail-rise { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
/* ================= המעבר מהקרוסלה אל כרטיס הפרויקט =================
   נבחר פר-פרויקט בניהול (‎coverOpen‎) ונפלט כ-‎data-pfopen‎. בלי הערך הזה
   ממשיכה לרוץ ‎pf-detail-rise‎ שלמעלה, ולכן פרויקט קיים אינו משתנה מעצמו.

   **הסלקטור הוא המאפיין לבדו ולא ‎.pf-detail-card[data-pfopen]‎, וזה בכוונה:**
   את אותו מאפיין נושאת גם התצוגה המקדימה שבניהול (‎.pf-cover-pvwrap‎), ולכן
   שניהם רצים על **אותם כללים** ולא על העתק שלהם - אותו עיקרון שכבר בשימוש
   ב-‎pf-ov-*‎. המחיר: ‎[data-pfopen]‎ הוא (0,1,0) בדיוק כמו ‎.pf-detail-card‎,
   כלומר הוא מנצח **רק מפני שהוא מאוחר יותר בקובץ** - אסור להזיז אותו למעלה.

   **כולן ‎transform‎/‎opacity‎ בלבד**, מאותה סיבה שכבר תועדה כאן על ‎pf-canim-*‎.
   הפרספקטיבה ב-‎flip‎ יושבת **בתוך** ה-‎transform‎ ולא כ-‎perspective‎ על ההורה:
   ‎perspective‎ על ‎.pf-detail‎ היה הופך אותו ל-containing block של כל ילד
   ‎fixed‎/‎absolute‎ שבתוכו - אותה מלכודת שכבר הפילה כאן את הכרטיס עצמו. */
[data-pfopen="zoom"] { animation: pf-open-zoom 0.34s cubic-bezier(0.22, 0.9, 0.3, 1) both; }
[data-pfopen="pop"]  { animation: pf-open-pop 0.44s cubic-bezier(0.34, 1.42, 0.44, 1) both; }
[data-pfopen="fade"] { animation: pf-open-fade 0.3s ease both; }
[data-pfopen="rise"] { animation: pf-open-rise 0.44s cubic-bezier(0.16, 1, 0.3, 1) both; }
[data-pfopen="flip"] { animation: pf-open-flip 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) both; }
/* ‎card‎ נמדד בזמן אמת ורץ ב-JS (ראה ‎openFromCard‎). הכלל כאן הוא מה שרץ
   כשאין מה למדוד - בתצוגה המקדימה שבניהול, שאין בה כרטיס מקור, וגם באתר אם
   המלבן יצא ריק. "זינוק מגודל קטן" הוא בן המשפחה הקרוב ביותר. */
[data-pfopen="card"] { animation: pf-open-pop 0.44s cubic-bezier(0.34, 1.42, 0.44, 1) both; }
/* כשה-JS כן מדד -הוא הבעלים של התנועה, ואנימציית ה-CSS חייבת לרדת: שתיהן
   כותבות ‎transform‎ במשכים שונים, והמעבר ביניהן הוא קפיצה. */
.pf-detail.pf-open-js .pf-detail-card { animation: none; }
@keyframes pf-open-zoom { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes pf-open-pop  { from { opacity: 0; transform: scale(0.68); } to { opacity: 1; transform: none; } }
@keyframes pf-open-fade { from { opacity: 0; } to { opacity: 1; } }
/* המרחק כמשתנה: זו האפשרות היחידה שנמדדת בפיקסלים ולא ביחס, ולכן היא היחידה
   שאינה מתכווצת מעצמה בתצוגה המקדימה -שם הכרטיס בגובה ~150px במקום ~500, ו-54px
   היו מקפיצים אותו על הפקדים שמתחתיו. ‎admin.css‎ מקטין את המשתנה באותו יחס. */
@keyframes pf-open-rise { from { opacity: 0; transform: translateY(var(--pf-open-rise, 54px)); } to { opacity: 1; transform: none; } }
@keyframes pf-open-flip {
    from { opacity: 0; transform: perspective(1300px) rotateX(-16deg) scale(0.94); }
    to   { opacity: 1; transform: perspective(1300px) rotateX(0deg) scale(1); }
}
/* צמצום תנועה: המעבר נשאר, בלי התנועה. חייב לבוא **אחרי** כל הכללים שלמעלה -
   הוא באותה specificity בדיוק, ולכן הוא מנצח רק בסדר. */
@media (prefers-reduced-motion: reduce) {
    [data-pfopen] { animation: pf-open-fade 0.25s ease both; }
}
.pf-detail-close {
    /* ׳¢׳™׳’׳•׳œ ׳§׳˜׳Ÿ ׳•׳ž׳׳•׳₪׳§ -׳”׳•׳ ׳™׳•׳©׳‘ ׳ž׳¢׳œ ׳”׳×׳•׳›׳Ÿ ׳•׳œ׳ ׳׳ž׳•׳¨ ׳œ׳”׳×׳—׳¨׳•׳× ׳‘׳•. ׳‘׳ž׳’׳¢ ׳”׳•׳ ׳—׳•׳–׳¨
       ׳œ-2.2rem ׳›׳“׳™ ׳œ׳”׳™׳©׳׳¨ ׳™׳¢׳“ ׳ ׳’׳™׳¢׳” ׳¡׳‘׳™׳¨ (׳—׳•׳§ ׳”׳ž׳•׳‘׳™׳™׳œ). */
    /* ג€Žinset-inline-endג€Ž ׳‘-RTL ׳”׳•׳ ׳”׳¦׳“ ׳”**׳©׳ž׳׳œ׳™**, ׳•׳œ׳›׳Ÿ ׳¢׳¨׳š ׳’׳“׳•׳œ ׳™׳•׳×׳¨ ׳ž׳–׳™׳– ׳׳×
       ׳”׳›׳₪׳×׳•׳¨ ׳™׳ž׳™׳ ׳” -׳₪׳ ׳™׳ž׳”, ׳׳œ ׳×׳•׳š ׳”׳›׳¨׳˜׳™׳¡ ׳•׳œ׳ ׳¢׳œ ׳”׳₪׳™׳ ׳” ׳¢׳¦׳ž׳”. */
    /* **‎z-index‎ מעל שכבת הטקסט של ה-overlay.** היא ‎z-index: 3‎ ובסגנונות
       "במרכז"/"יריעה מלאה" היא ‎inset: 0‎ -כלומר מכסה את כל התמונה, ואיתה את
       כפתור הסגירה. נמדד שהלחיצה נחתה עליה ולא עליו. 5 מציב אותו גם מעל
       כפתור "מידע נוסף" (4), שהוא השכבה הגבוהה הבאה בכרטיס. */
    /* **‎right‎ פיזי ולא ‎inset-inline-end‎** (בקשת המשתמש: "לצד ימין למעלה").
       הכרטיס יורש ‎direction: rtl‎, ושם ‎inset-inline-end‎ הוא הצד ה**שמאלי** -
       ושם הכפתור נחת על הלוגו שבפינת התמונה ונבלע בו. אותו שיקול בדיוק
       שכבר תועד כאן על הצמדת הפאנל ועל ‎justify-content: right/left‎: כשמדובר
       בצד שהמשתמש **רואה**, הערך חייב להיות פיזי. */
    position: absolute; top: 0.6rem; right: 0.95rem; z-index: 5;
    width: 1.75rem; height: 1.75rem; padding: 0; cursor: pointer;
    display: grid; place-items: center;
    border-radius: 50%;
    color: #fff6e6;
    background: rgba(7, 24, 47, 0.72);
    border: 1.5px solid rgba(255, 231, 163, 0.45);
    transition: background 0.15s, transform 0.12s;
}
.pf-detail-close svg { width: 0.82rem; height: 0.82rem; }
@media (pointer: coarse) {
    .pf-detail-close { width: 2.2rem; height: 2.2rem; }
    .pf-detail-close svg { width: 1rem; height: 1rem; }
}
.pf-detail-close:hover { background: rgba(255, 231, 163, 0.25); transform: scale(1.06); }
.pf-detail-close:focus-visible { outline: 2px solid var(--c-gold, #ffd15a); outline-offset: 3px; }
/* ׳—׳•׳§ ׳”׳¡׳§׳¨׳•׳œ ׳”׳ž׳¢׳•׳¦׳‘ */
.pf-detail-scroll {
    overflow-y: auto;
    /* הריפוד האופקי גדול מהאנכי, בכוונה: כאן יושב הטקסט של הכרטיס, ובמובייל
       הכרטיס תופס את כל רוחב המסך -כלומר זה גם המרחק מקצה המסך עצמו. */
    padding-block: clamp(1rem, 3vw, 1.7rem);
    padding-inline: var(--pf-detail-pad);
}

/* **אין פס גלילה בכרטיס** (בקשת המשתמש).
   קודם היה כאן פס משלנו (‎.pf-dsb‎) שנבנה ב-JS עם ידית באורך קבוע, כי אורך
   הידית של פס נייטיבי נגזר מיחס התוכן ואי אפשר לקבוע אותו. שניהם ירדו: גם
   הפס שלנו וגם הנייטיבי. הגלילה עצמה -גלגלת, אצבע ומקלדת -עובדת כרגיל.
   **שני הכיוונים נדרשים:** ‎scrollbar-width‎ לפיירפוקס, ‎::-webkit-scrollbar‎
   לשאר. וחשוב שלא יחזור לכאן כלל שמעצב פס נייטיבי: כלל כזה שיושב **אחרי**
   ההסתרה מנצח אותה בקסקייד ומחזיר את הפס לחיים -בדיוק הבאג שהיה כאן פעם,
   ואז נראו שני פסים זה לצד זה. */
.pf-detail-scroll { scrollbar-width: none; }
.pf-detail-scroll::-webkit-scrollbar { width: 0; height: 0; }

/* **התמונה מקצה לקצה** (בקשת המשתמש): היא יוצאת מהריפוד של אזור הגלילה
   בשוליים שליליים בדיוק בגודלו, ולכן נצמדת לשתי הדפנות של הכרטיס בזמן
   שהטקסט שמתחתיה שומר על המרווח שלו. בלי המשתנה המשותף שני המספרים היו
   נפרדים בשינוי הבא והתמונה הייתה חורגת או משאירה פס.
   הגבול והעיגול ירדו: הם צוירו סביב תמונה שיושבת **בתוך** הכרטיס, ועל תמונה
   שנוגעת בדפנות הם נקראים כקו כפול לצד מסגרת הכרטיס עצמו. */
.pf-detail-media {
    margin: 0 calc(-1 * var(--pf-detail-pad)) 1rem;
    border-radius: 0;
    border: 0;
    overflow: hidden;
}
.pf-detail-media[hidden] { display: none; }
/* ---- ׳”׳×׳ž׳•׳ ׳” ׳”׳¨׳׳©׳™׳× ׳‘׳›׳¨׳˜׳™׳¡ ׳”׳₪׳¨׳˜׳™׳ ----
   **"׳ž׳™׳œ׳•׳™" ׳—׳™׳™׳‘ ׳’׳•׳‘׳” ׳§׳‘׳•׳¢ ׳•׳œ׳ ג€Žmax-heightג€Ž.** ׳¢׳ ג€Žheight: autoג€Ž ׳”׳ž׳¡׳’׳¨׳× ׳ž׳§׳‘׳œ׳× ׳‘׳“׳™׳•׳§
   ׳׳× ׳”׳’׳•׳‘׳” ׳”׳˜׳‘׳¢׳™ ׳©׳œ ׳”׳×׳ž׳•׳ ׳”, ׳•׳œ׳›׳Ÿ ׳׳™׳Ÿ ׳’׳œ׳™׳©׳” - ג€Žobject-fit: coverג€Ž ׳œ׳ ׳—׳•׳×׳š ׳›׳œ׳•׳
   ׳•-ג€Žobject-positionג€Ž (׳›׳™׳•׳•׳Ÿ ׳”׳×׳ž׳•׳ ׳” ׳©׳ ׳’׳¨׳¨ ׳‘׳ ׳™׳”׳•׳œ) ׳₪׳©׳•׳˜ ׳׳™׳ ׳• ׳ž׳©׳₪׳™׳¢. ׳×׳ž׳•׳ ׳” **׳¨׳—׳‘׳”**
   ׳œ׳ ׳ ׳—׳×׳›׳” ׳›׳׳Ÿ ׳׳£ ׳₪׳¢׳, ׳•׳œ׳›׳Ÿ ׳”׳’׳¨׳™׳¨׳” ׳ ׳¨׳׳×׳” "׳œ׳ ׳¢׳•׳‘׳“׳×" ׳‘׳›׳¨׳˜׳™׳¡. ׳”-ג€Ž--pf-hג€Ž ׳”׳•׳ ׳”׳’׳•׳‘׳”
   ׳©׳œ ׳”׳’׳•׳“׳œ ׳©׳ ׳‘׳—׳¨, ׳•׳‘"׳”׳›׳œ׳”" ׳ž׳•׳—׳–׳¨ ג€Žheight: autoג€Ž -׳©׳ ׳׳™-׳—׳™׳×׳•׳š ׳”׳•׳ ׳›׳œ ׳”׳›׳•׳•׳ ׳”. */
.pf-detail-img { display: block; width: 100%; height: var(--pf-h, 38vh); object-fit: cover; }
/* ׳’׳•׳“׳œ/׳”׳×׳׳ž׳”/׳ž׳¡׳’׳¨׳× ׳©׳œ ׳”׳×׳ž׳•׳ ׳” ׳”׳¨׳׳©׳™׳× -׳ ׳‘׳—׳¨׳™׳ ׳₪׳¨-׳₪׳¨׳•׳™׳§׳˜ ׳‘׳ ׳™׳”׳•׳œ.
   ג€Žfullג€Ž ׳”׳•׳ "׳›׳ž׳” ׳©׳ ׳›׳ ׳¡ ׳‘׳ž׳¡׳š" ׳•׳œ׳ "׳‘׳œ׳™ ׳’׳‘׳•׳œ", ׳׳—׳¨׳× ׳×׳ž׳•׳ ׳” ׳’׳‘׳•׳”׳” ׳“׳•׳—׳§׳× ׳׳× ׳›׳œ
   ׳”׳˜׳§׳¡׳˜ ׳׳œ ׳ž׳×׳—׳× ׳œ׳§׳™׳₪׳•׳œ ׳•׳”׳›׳¨׳˜׳™׳¡ ׳ ׳¨׳׳” ׳¨׳™׳§. */
.pf-detail-media.pf-cover-s    { --pf-h: 18vh; }
.pf-detail-media.pf-cover-m    { --pf-h: 27vh; }
.pf-detail-media.pf-cover-l    { --pf-h: 38vh; }
.pf-detail-media.pf-cover-full { --pf-h: 62vh; }
/* ---- ארבעה מצבי התאמה ----
   ‎cover‎ (ברירת המחדל, בכלל ‎.pf-detail-img‎ למעלה) ממלא וחותך.
   ‎contain‎ מראה את התמונה במלואה: ‎height: auto‎ **בכוונה** -אי-חיתוך הוא כל
   הכוונה כאן, ולכן המסגרת מקבלת את גובה התמונה עד התקרה.
   ‎fill‎ ו-‎none‎, לעומת זאת, חייבים גובה **קבוע**: עם ‎height: auto‎ המסגרת
   מקבלת בדיוק את גובה התמונה, ואז אין מה למתוח ואין מה לחתוך -שני המצבים
   היו נראים זהים ל-‎contain‎. זו אותה מלכודת שכבר תועדה כאן על "מילוי". */
/* **בהכלה התמונה נוגעת בשתי הדפנות, והגובה נגזר ממנה** (בקשת המשתמש).
   ‎max-height: var(--pf-h)‎ חתך את **גובה** התיבה בלי לצמצם את רוחבה: היחס
   שלה נשבר, ו-‎object-fit: contain‎ מילא את ההפרש ב-letterbox. נמדד על תמונה
   1200x768 (יחס 1.56) בתיבה 734x342 (יחס 2.15) -המצויר יצא 534px ונשארו
   **101px חור בכל צד**. האלמנט עצמו כן נגע בדפנות, ולכן מדידה שלו בלבד
   דיווחה "0/0" בזמן שעל המסך היו חורים; מה שקובע הוא הפיקסל המצויר.
   התקרה נשארת כרשת ביטחון בלבד (‎80vh‎), למקרה של תמונת פורטרט קיצונית
   שאחרת הייתה דוחפת את כל הטקסט אל מתחת לקיפול. */
.pf-detail-media.pf-fit-contain .pf-detail-img {
    object-fit: contain; background: rgba(6, 20, 42, 0.55);
    width: 100%; height: auto; max-height: 80vh;
}
.pf-detail-media.pf-fit-fill .pf-detail-img { object-fit: fill; }
.pf-detail-media.pf-fit-none .pf-detail-img { object-fit: none; background: rgba(6, 20, 42, 0.55); }
.pf-detail-media.imgf-gold   { border: 4px solid var(--c-gold-deep, #d39a1a); }
.pf-detail-media.imgf-wood   { border: 5px solid #5f3c1a; }
.pf-detail-media.imgf-white  { border: 5px solid #fff; }
.pf-detail-media.imgf-dark   { border: 4px solid #1a2540; }
.pf-detail-media.imgf-shadow { box-shadow: 0 8px 22px rgba(6, 20, 40, 0.55); }

/* ================= אנימציית הכניסה של התמונה הראשית =================
   נבחרת פר-פרויקט בניהול ונפלטת כמחלקה ‎pf-canim-*‎ על ‎.pf-detail-media‎.
   **כולן ‎transform‎/‎opacity‎ בלבד.** אלה שתי התכונות שהקומפוזיטור מנפיש בלי
   לצייר מחדש; אנימציה על ‎filter‎, ‎width‎ או ‎background-position‎ הייתה מחזירה
   בדיוק את מה שנמדד כאן בקרוסלה -רסטור מלא של הכרטיס בכל פריים.
   האנימציה מוחלת על **התמונה** ולא על המסגרת: המסגרת נושאת את הגבול, את
   העיגול ואת ה-‎overflow‎ שגוזר, ולכן הזזה שלה הייתה מזיזה את המסגרת עצמה. */
.pf-canim-fade img { animation: pf-ci-fade 0.7s ease both; }
.pf-canim-zoom img { animation: pf-ci-zoom 0.8s cubic-bezier(0.22, 0.61, 0.24, 1) both; }
.pf-canim-rise img { animation: pf-ci-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.pf-canim-tilt img { animation: pf-ci-tilt 0.85s cubic-bezier(0.22, 0.61, 0.24, 1) both; }
/* "נסיעה איטית" היא היחידה שאינה חד-פעמית: תנועה מתמשכת ועדינה, ארוכה מספיק
   שלא תיקרא כאנימציה אלא כחיוּת. ‎alternate‎ ולא ‎infinite‎ רגיל, אחרת יש קפיצה
   חדה בכל חזרה למצב ההתחלה. */
.pf-canim-kenburns img { animation: pf-ci-kb 22s ease-in-out infinite alternate; }
@keyframes pf-ci-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pf-ci-zoom { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
@keyframes pf-ci-rise { from { opacity: 0; transform: translateY(14%); } to { opacity: 1; transform: translateY(0); } }
@keyframes pf-ci-tilt {
    from { opacity: 0; transform: perspective(900px) rotateX(12deg) scale(1.06); }
    to   { opacity: 1; transform: perspective(900px) rotateX(0deg) scale(1); }
}
@keyframes pf-ci-kb {
    from { transform: scale(1.06) translate3d(-1.2%, -1%, 0); }
    to   { transform: scale(1.14) translate3d(1.2%, 1.4%, 0); }
}
/* "ברק" -רצועת אור שחולפת פעם אחת. שכבה נפרדת ולא ‎filter‎ על התמונה, ומכיוון
   שהיא ‎::after‎ על המסגרת היא נגזרת יחד איתה בפינות המעוגלות. */
.pf-canim-shine { position: relative; }
.pf-canim-shine::after {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.42) 50%, transparent 62%);
    transform: translateX(-120%);
    animation: pf-ci-shine 1.5s ease-out 0.25s both;
}
@keyframes pf-ci-shine { to { transform: translateX(120%); } }
/* צמצום תנועה: הכול נשאר, בלי התנועה. הכניסה מתקצרת לעמעום, והנסיעה האיטית
   נעצרת על פריים אחד -אחרת היא רצה לנצח מול מי שביקש במפורש שלא. */
@media (prefers-reduced-motion: reduce) {
    .pf-canim-zoom img, .pf-canim-rise img,
    .pf-canim-tilt img { animation: pf-ci-fade 0.3s ease both; }
    .pf-canim-kenburns img { animation: none; }
    .pf-canim-shine::after { animation: none; opacity: 0; }
}

/* ================= "׳ž׳¡׳š ׳ž׳œ׳": ׳”׳×׳ž׳•׳ ׳” ׳”׳™׳ ׳”׳ž׳¡׳š =================
   ׳’׳•׳“׳œ ׳×׳ž׳•׳ ׳” ׳—׳ž׳™׳©׳™ (ג€Žscreenג€Ž) ׳©׳׳™׳ ׳• ׳¢׳•׳“ ׳¢׳¨׳š ׳©׳œ ג€Ž--pf-hג€Ž ׳׳œ׳ **׳ž׳¦׳‘ ׳׳—׳¨ ׳©׳œ ׳”׳›׳¨׳˜׳™׳¡**:
   ׳”׳×׳ž׳•׳ ׳” ׳ž׳ž׳œ׳׳× ׳׳× ׳”׳×׳¦׳•׳’׳”, ׳•׳”׳˜׳§׳¡׳˜ -׳›׳•׳×׳¨׳×, ׳×׳’׳™׳•׳×, ׳×׳™׳׳•׳¨ ׳•׳”׳›׳₪׳×׳•׳¨׳™׳ -׳ž׳—׳›׳” ׳ž׳׳—׳•׳¨׳™
   "׳ž׳™׳“׳¢ ׳ ׳•׳¡׳£" ׳•׳ž׳—׳œ׳™׳§ ׳ž׳œ׳ž׳˜׳” ׳›׳™׳¨׳™׳¢׳” ׳׳—׳×. ׳œ׳›׳Ÿ ׳”׳•׳ ׳ ׳©׳œ׳˜ ׳‘׳ž׳—׳œ׳§׳” ׳¢׳œ ג€Ž.pf-detailג€Ž
   ׳•׳œ׳ ׳‘׳ž׳©׳×׳ ׳” ׳’׳•׳‘׳”: ׳׳™׳Ÿ ׳›׳׳Ÿ "׳›׳ž׳” ׳’׳‘׳•׳”׳” ׳”׳×׳ž׳•׳ ׳”" ׳׳œ׳ "׳ž׳™ ׳×׳•׳₪׳¡ ׳׳× ׳”׳ž׳¡׳š".
   ׳”׳¨׳§׳¢ ׳©׳—׳•׳¨ ׳•׳œ׳ ׳›׳—׳•׳œ-׳”׳›׳¨׳˜׳™׳¡: ׳‘-"׳”׳›׳œ׳”" ׳ ׳©׳׳¨׳™׳ ׳₪׳¡׳™׳ ׳‘׳¦׳“׳“׳™׳, ׳•׳©׳—׳•׳¨ ׳ ׳§׳¨׳ ׳›׳ž׳¡׳š
   ׳§׳•׳œ׳ ׳•׳¢ ׳‘׳¢׳•׳“ ׳©׳›׳—׳•׳œ ׳ ׳§׳¨׳ ׳›׳›׳¨׳˜׳™׳¡ ׳©׳”׳×׳ž׳•׳ ׳” ׳œ׳ ׳ž׳™׳œ׳׳”. */
.pf-detail.is-screen { padding: 0; background: rgba(2, 6, 14, 0.92); }
.pf-detail.is-screen .pf-detail-card {
    width: 100%; max-width: none; height: 100%; max-height: none;
    border-radius: 0; border: 0; box-shadow: none;
    background: #04080f;
}
.pf-detail.is-screen .pf-detail-scroll { position: relative; flex: 1; overflow: hidden; padding: 0; }
.pf-detail.is-screen .pf-detail-media {
    position: absolute; inset: 0; margin: 0;
    border: 0; border-radius: 0; box-shadow: none; background: #04080f;
}
/* ג€Ž--pf-hג€Ž ׳׳™׳ ׳• ׳¨׳œ׳•׳•׳ ׳˜׳™ ׳›׳׳Ÿ: ׳”׳’׳•׳‘׳” ׳”׳•׳ ׳’׳•׳‘׳” ׳”׳×׳¦׳•׳’׳”, ׳‘׳©׳ ׳™ ׳ž׳¦׳‘׳™ ׳”׳”׳×׳׳ž׳” */
.pf-detail.is-screen .pf-detail-img { width: 100%; height: 100%; }
.pf-detail.is-screen .pf-detail-media.pf-fit-contain .pf-detail-img {
    height: 100%; max-height: none; background: transparent;
}
/* ---- ׳™׳¨׳™׳¢׳× ׳”׳ž׳™׳“׳¢ ----
   ג€ŽtranslateY(100%)ג€Ž ׳•׳œ׳ ג€Ždisplay:noneג€Ž: ׳›׳š ׳”׳₪׳×׳™׳—׳” ׳”׳™׳ ׳×׳ ׳•׳¢׳” ׳•׳œ׳ ׳”׳‘׳–׳§, ׳•׳”׳×׳•׳›׳Ÿ
   ׳›׳‘׳¨ ׳‘׳–׳¨׳™׳ž׳” ׳•׳œ׳›׳Ÿ ׳’׳•׳‘׳”׳• ׳™׳“׳•׳¢ ׳‘׳¨׳’׳¢ ׳”׳¨׳׳©׳•׳Ÿ. */
.pf-detail.is-screen .pf-detail-body {
    position: absolute; inset-inline: 0; bottom: 0; z-index: 3;
    max-height: 78%; overflow-y: auto;
    /* **הריפוד התחתון נגזר מהכפתור ואינו מספר משלו.** קודם היה כאן ‎4.6rem‎
       קשיח מול כפתור שתופס ‎bottom + גובה‎ -שני מספרים נפרדים שהתפצלו, ונמדד
       שהם **חופפים ב-4px**: "הסתרת המידע" נחת בדיוק על "צפייה בפרויקט", ושני
       כפתורי זהב זהים זה על זה נקראים כתקלה. שניהם נגזרים היום מ-‎--pf-more-*‎. */
    padding: 1.1rem clamp(1rem, 4vw, 2.2rem) var(--pf-more-space);
    background: linear-gradient(180deg, rgba(10, 34, 68, 0.86), rgba(7, 24, 47, 0.97) 28%);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1.5px solid rgba(255, 231, 163, 0.4);
    box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.5);
    transform: translateY(100%);
    transition: transform 0.34s cubic-bezier(0.22, 0.9, 0.3, 1);
    /* ׳—׳•׳§ ׳”׳¡׳§׳¨׳•׳œ ׳”׳ž׳¢׳•׳¦׳‘ */
    scrollbar-width: thin; scrollbar-color: rgba(255, 231, 163, 0.45) transparent;
}
.pf-detail.is-screen .pf-detail-body::-webkit-scrollbar { width: 5px; }
.pf-detail.is-screen .pf-detail-body::-webkit-scrollbar-track { background: transparent; margin: 1.6rem 0; border-radius: 999px; }
.pf-detail.is-screen .pf-detail-body::-webkit-scrollbar-thumb {
    background: rgba(255, 231, 163, 0.4); border-radius: 999px;
    border: 1px solid transparent; background-clip: content-box;
}
.pf-detail.is-screen.is-info .pf-detail-body { transform: none; }
@media (prefers-reduced-motion: reduce) { .pf-detail.is-screen .pf-detail-body { transition: none; } }
/* ---- ׳›׳₪׳×׳•׳¨ "׳ž׳™׳“׳¢ ׳ ׳•׳¡׳£" ----
   ׳™׳•׳©׳‘ ׳¢׳œ ׳”׳›׳¨׳˜׳™׳¡ ׳•׳œ׳ ׳‘׳×׳•׳š ׳”׳™׳¨׳™׳¢׳”, ׳›׳š ׳©׳”׳•׳ ׳ ׳©׳׳¨ ׳‘׳ž׳§׳•׳ž׳• ׳›׳©׳”׳™׳ ׳¢׳•׳œ׳” ׳•׳™׳•׳¨׳“׳× -
   ׳›׳₪׳×׳•׳¨ ׳©׳ ׳•׳¡׳¢ ׳¢׳ ׳”׳×׳•׳›׳Ÿ ׳©׳”׳•׳ ׳₪׳•׳×׳— ׳§׳•׳¨׳ ׳›׳©׳ ׳™ ׳›׳₪׳×׳•׳¨׳™׳ ׳©׳•׳ ׳™׳. */
.pf-detail {
    /* המרחק שהכפתור תופס מתחתית הכרטיס: המיקום שלו, גובהו, ומרווח נשימה עד
       שורת הפעולות שביריעה. מקור אחד לשניהם -ראה ההסבר על הריפוד למעלה. */
    --pf-more-bottom: clamp(1rem, 3.5vh, 2rem);
    /* ‎4.9rem‎ = גובה הכפתור (‎~2.8rem‎) + מרווח נשימה עד שורת הפעולות. נמדד:
       ב-‎4.2rem‎ נשארו 21px בלבד והשניים עדיין נקראו כזוג. */
    --pf-more-space: calc(var(--pf-more-bottom) + 4.9rem);
}
.pf-detail-more {
    position: absolute; z-index: 4;
    inset-inline: 0; bottom: var(--pf-more-bottom);
    margin-inline: auto; width: max-content;
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.62rem 1.35rem; cursor: pointer;
    font-family: inherit; font-size: 0.98rem; font-weight: 800;
    color: #08203d; border-radius: 999px;
    background: linear-gradient(180deg, var(--c-gold-light, #ffe7a3), var(--c-gold, #ffd15a));
    border: 1.5px solid var(--c-gold-deep, #d39a1a);
    box-shadow: 0 4px 0 var(--c-gold-deep, #d39a1a), 0 12px 26px rgba(0, 0, 0, 0.5);
    transition: transform 0.14s, box-shadow 0.14s, background 0.2s;
}
.pf-detail-more[hidden] { display: none; }
.pf-detail-more:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--c-gold-deep, #d39a1a), 0 16px 30px rgba(0, 0, 0, 0.55); }
.pf-detail-more:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--c-gold-deep, #d39a1a); }
.pf-detail-more:focus-visible { outline: 3px solid rgba(255, 209, 90, 0.65); outline-offset: 3px; }
.pf-detail-more-i { width: 1.05rem; height: 1.05rem; transition: transform 0.28s; }
.pf-detail.is-info .pf-detail-more-i { transform: rotate(180deg); }
/* **כשהיריעה פתוחה הוא אינו עוד הפעולה הראשית אלא הדרך לסגור.** הוא יושב אז
   מיד מתחת ל"צפייה בפרויקט", ושני כפתורי זהב מלאים באותה צורה ובאותו גודל
   נקראים כשתי פעולות מתחרות -בדיוק מה שנראה על המסך. אותה צורה, בלי המשקל. */
.pf-detail.is-info .pf-detail-more {
    color: var(--c-gold-light, #ffe7a3);
    background: rgba(7, 24, 47, 0.72);
    border-color: rgba(255, 231, 163, 0.5);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.pf-detail.is-info .pf-detail-more:hover {
    background: rgba(255, 231, 163, 0.2);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.pf-detail.is-info .pf-detail-more:active { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); }
/* ׳”׳×׳•׳•׳™׳× ׳ž׳×׳—׳œ׳₪׳× ׳‘-JS ׳•׳œ׳ ׳‘-ג€Ž::afterג€Ž: ׳›׳©׳”׳™׳¨׳™׳¢׳” ׳₪׳×׳•׳—׳” ׳”׳›׳₪׳×׳•׳¨ ׳”׳•׳₪׳š ׳œ"׳¡׳’׳™׳¨׳”",
   ׳•׳©׳×׳™ ׳”׳ž׳™׳œ׳™׳ ׳‘׳׳•׳¨׳š ׳©׳•׳ ׳” -ג€Žvisibility: hiddenג€Ž ׳¢׳œ ׳”׳™׳©׳ ׳” ׳”׳™׳™׳×׳” ׳ž׳©׳׳™׳¨׳” ׳׳×
   **׳¨׳•׳—׳‘׳”** ׳•׳ž׳’׳œ׳™׳©׳” ׳׳× ׳”׳—׳“׳©׳” ׳ž׳”׳›׳₪׳×׳•׳¨. */
/* ---- ׳ž׳•׳‘׳™׳™׳œ: ׳”׳™׳¨׳™׳¢׳” ׳’׳‘׳•׳”׳” ׳™׳•׳×׳¨, ׳”׳›׳₪׳×׳•׳¨ ׳§׳¨׳•׳‘ ׳™׳•׳×׳¨ ׳œ׳׳’׳•׳“׳œ ---- */
@media (max-width: 640px) {
    /* **מעדכנים את המשתנה, לא את הריפוד.** כאן ישבו ‎padding-bottom: 4.2rem‎
       ו-‎bottom: 0.9rem‎ כשני מספרים נפרדים, והם דרסו את ‎--pf-more-space‎ -
       נמדד באייפון שהפער בין הכפתור לשורת הפעולות נשאר **8px** בזמן שבדסקטופ
       הוא כבר היה 32. בדיוק הפיצול שבגללו הריפוד נגזר מהמשתנה מלכתחילה. */
    .pf-detail { --pf-more-bottom: 0.9rem; }
    .pf-detail.is-screen .pf-detail-body { max-height: 84%; }
    .pf-detail-more { font-size: 0.92rem; padding: 0.6rem 1.15rem; }
}

/* ================= הטקסט **על** התמונה הראשית =================
   נבחר פר-פרויקט בניהול (‎coverOverlay‎) ונפלט כמחלקה ‎pf-ov-*‎.

   **המחלקה יושבת על ‎.pf-detail-hero‎ ולא על ‎.pf-detail‎, וזה לא שרירותי:**
   כך אותם כללים בדיוק חלים גם על התצוגה המקדימה שבפאנל הניהול, שאינה יכולה
   להחזיק ‎.pf-detail‎ (הוא ‎position: fixed‎ על כל המסך). התצוגה המקדימה
   **אינה יכולה להתפצל מהאתר** כי היא רצה על הכללים האלה עצמם ולא על העתק
   שלהם; מה שמוגדר לה בנפרד ב-‎admin.css‎ הוא גודל הטיפוגרפיה בלבד.
   **‎pf-ov-on‎ ו-‎pf-ov-any‎ הן שתי מחלקות שונות בכוונה.** הראשונה אומרת "אני
   המארח של ה-overlay" ונושאת ‎position: relative‎; השנייה היא סמן בלבד על
   ‎.pf-detail‎, למה שיושב **מחוץ** ל-hero (כפתור הסגירה). **נמדד מה קורה
   כששתיהן אותה מחלקה:** ‎.pf-detail‎ קיבל את ה-‎position: relative‎ הזה במקום
   ה-‎fixed‎ שלו, צנח לתוך זרימת המסמך והכרטיס יצא מהמסך (מלבן ‎[850,0,1440,64]‎
   במקום ‎[0,0,1440,900]‎). סלקטור ‎.pf-ov-on‎ בלי הורה הוא גלובלי, וזה בדיוק
   מה שהופך אותו למסוכן כשאותה מחלקה משרתת שני תפקידים.

   **‎.pf-detail-hero‎ הוא ‎static‎ בכל שאר המצבים ואינו משנה דבר.** הוא הופך
   ל-containing block רק כאן, וזה גם מה ששומר על ‎is-screen‎: שם שני ילדיו
   ממשיכים להימדד מול ‎.pf-detail-scroll‎, כפי שהיה מאז ומתמיד.

   **כל סגנון מביא את שכבת ההחשכה שלו.** אין כאן "טקסט בלי רקע": על תמונה
   בהירה זה פשוט בלתי קריא, כלומר הגדרה שהתוצאה שלה תקלה. מה שמשתנה בין
   הסגנונות הוא **צורת** ההחשכה, והעוצמה נשלטת ב-‎--pf-ov-dim‎ (0..1). */
.pf-detail-hero { position: static; }
.pf-ov-on {
    position: relative;
    overflow: hidden;                   /* יריעה שגולשת נגזרת בגבול התמונה */
}
.pf-detail-hero.pf-ov-on {
    /* המרווחים השליליים עוברים מהתמונה אל העוטף: ה-‎body‎ נמדד מול העוטף,
       ובלי זה הוא היה צר מהתמונה ברוחב הריפוד של אזור הגלילה בכל צד. */
    margin-inline: calc(-1 * var(--pf-detail-pad));
    margin-bottom: 1rem;
}
.pf-ov-on .pf-detail-media { margin: 0; }
/* **גובה מסגרת קבוע -ב"מילוי" בלבד.** שם התמונה ממלאת וחותכת ממילא, ולכן
   הגובה הוא של **הגודל שנבחר**, עם רצפה: "קטן" הוא 18vh, ובגובה כזה שכבת
   הטקסט מכסה את התמונה כולה ואין שום סיבה לשים אותה עליה. */
.pf-detail-hero.pf-ov-on .pf-detail-img {
    height: max(var(--pf-h, 38vh), 15rem); max-height: none;
}
/* **ב"הכלה" הגובה נגזר מהתמונה, גם כאן.** הגובה הכפוי שבר את יחס התיבה
   ו-‎object-fit‎ מילא את ההפרש ב-letterbox -נמדדו 101px חור בכל צד, בדיוק
   הבאג שתוקן במצב הרגיל. "הכלה" אומרת שהתמונה נראית במלואה ונוגעת בשתי
   הדפנות, ובחירת overlay אינה משנה את זה; אם התמונה נמוכה, שכבת הטקסט
   שעליה נגללת בתוכה. */
.pf-detail-hero.pf-ov-on .pf-detail-media.pf-fit-contain .pf-detail-img {
    width: 100%; height: auto; max-height: 80vh;
}
.pf-ov-on .pf-detail-body {
    position: absolute; z-index: 3;
    --pf-ov-pad: clamp(1rem, 3.5vw, 1.7rem);
    /* ה-fallback אינו קישוט: ‎--pf-detail-pad‎ מוגדר על ‎.pf-detail-card‎ ואינו
       קיים בתצוגה המקדימה שבניהול. בלעדיו ה-‎calc‎ פסול והריפוד **כולו** נופל. */
    padding: var(--pf-ov-pad) calc(var(--pf-detail-pad, 1rem) + 0.2rem);
    /* מעולם לא גולש מהתמונה: מה שלא נכנס נגלל בפנים. */
    max-height: 100%; overflow-y: auto;
    /* **הפס מוסתר ולא מעוצב** -חוק הכרטיס הוא "אין פס גלילה כאן כלל", והוא חל
       גם על השכבה הזאת. נמדד בסגנון "עמודה בצד": פס אפור מלא לאורך אמצע
       התמונה. הגלילה עצמה -גלגלת, אצבע ומקלדת -עובדת כרגיל.
       **שני הכיוונים נדרשים:** ‎scrollbar-width‎ לפיירפוקס, ‎::-webkit-‎ לשאר. */
    scrollbar-width: none;
}
.pf-ov-on .pf-detail-body::-webkit-scrollbar { width: 0; height: 0; }
/* **צל טקסט על הכול.** ההחשכה מטפלת בממוצע, אבל תמונה אינה אחידה: פרט בהיר
   מתחת לאות בודדת מוחק אותה גם כשהרקע הכללי כהה. */
.pf-ov-on .pf-detail-body :is(.pf-detail-title, .pf-detail-text) {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 0 14px rgba(0, 0, 0, 0.45);
}
.pf-ov-on .pf-detail-text { color: var(--pf-db-color, #f4efe4); }
/* כפתור הסגירה יושב על התמונה ולא על רקע הכרטיס -מקבל בסיס אטום משלו.
   הוא אח של אזור הגלילה, ולכן זה הכלל היחיד שנתלה על ‎.pf-detail‎ עצמו -
   ודרך ‎pf-ov-any‎, שאינה נושאת מיקום. */
.pf-detail.pf-ov-any .pf-detail-close { background: rgba(4, 12, 26, 0.72); }

/* ---- 1. רצועה תחתונה: הנפוץ ביותר, ומה שהעין מצפה לו ----
   **הדעיכה יושבת מעל התוכן ולא בתוכו**, וזה לא פרט: כשהגרדיאנט נפרס על
   ה-‎body‎ עצמו הוא נמדד באחוזים מגובהו, ולכן כותרת קצרה נוחתת בדיוק באזור
   השקוף שלו. נמדד במצב "כותרת וכפתורים בלבד" -כותרת זהב על תמונה בהירה,
   בלי שום החשכה מתחתיה. היום ה-‎body‎ אטום לכל אורכו וה-‎::before‎ מרכך את
   המעבר **מחוץ** לו, כך שהקריאוּת אינה תלויה באורך הטקסט. */
.pf-ov-bottom .pf-detail-body,
.pf-ov-top .pf-detail-body { inset-inline: 0; background: rgba(4, 14, 30, var(--pf-ov-dim, 0.7)); }
.pf-ov-bottom .pf-detail-body { bottom: 0; }
.pf-ov-top .pf-detail-body { top: 0; }
.pf-ov-bottom .pf-detail-body::before,
.pf-ov-top .pf-detail-body::before {
    content: ''; position: absolute; inset-inline: 0; height: 4.5rem;
    pointer-events: none;
}
.pf-ov-bottom .pf-detail-body::before {
    bottom: 100%;
    background: linear-gradient(180deg, rgba(4, 14, 30, 0), rgba(4, 14, 30, var(--pf-ov-dim, 0.7)));
}
.pf-ov-top .pf-detail-body::before {
    top: 100%;
    background: linear-gradient(0deg, rgba(4, 14, 30, 0), rgba(4, 14, 30, var(--pf-ov-dim, 0.7)));
}
/* ---- 3. במרכז: כרזה ----
   **מכסה את התמונה כולה, ולכן צריך יותר החשכה מרצועה.** ברצועה העין עדיין
   רואה תמונה נקייה מעליה ומשלימה את ההקשר; כאן כל מה שיש הוא הטקסט, ותמונה
   עמוסה מתחתיו (צילום מסך, למשל) מתחרה בכל אות. נמדד ב-0.55: כותרת שהתערבבה
   בטקסט שבתוך התמונה עצמה. */
/* שלושת הסגנונות שהטקסט בהם פרוס על שטח גדול חולקים החשכה מוגברת. ברצועה
   העין רואה תמונה נקייה לצידה ומשלימה את ההקשר; כאן הטקסט **הוא** מה שיש,
   ותמונה עמוסה מתחתיו מתחרה בכל אות. */
.pf-ov-center .pf-detail-body,
.pf-ov-sheet .pf-detail-body,
.pf-ov-side .pf-detail-body { --pf-ov-cover: min(0.94, calc(var(--pf-ov-dim, 0.7) + 0.14)); }
.pf-ov-center .pf-detail-body {
    inset: 0;
    display: flex; flex-direction: column; justify-content: center;
    background: rgba(4, 14, 30, var(--pf-ov-cover));
}
/* ---- 4. כרטיס צף ----
   **הרקע כאן אטום יותר משאר הסגנונות** (‎+0.12‎): לקופסה יש גבול נראה, ורקע
   חצי-שקוף בתוך מסגרת זהב נקרא כתקלה ולא כזכוכית. */
.pf-ov-card .pf-detail-body {
    inset-inline: clamp(0.8rem, 4%, 2.2rem);
    bottom: clamp(0.8rem, 4%, 1.6rem);
    max-height: calc(100% - 1.6rem);
    padding: var(--pf-ov-pad);
    border-radius: 16px;
    border: 1.5px solid rgba(255, 231, 163, 0.45);
    background: rgba(7, 24, 47, calc(var(--pf-ov-dim, 0.7) + 0.12));
    backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* ---- 5. עמודה בצד ----
   **הכיוון פיזי ולא לוגי.** הגרדיאנט של CSS אינו מכיר ‎inline-start‎, ולכן
   ‎to left‎: הוא מתחיל מהצד הימני -שהוא צד הטקסט ב-RTL -ודועך שמאלה אל
   התמונה. עם ‎inset-inline-start‎ לבדו הגרדיאנט היה מתהפך מול הטקסט. */
@media (min-width: 641px) {
    .pf-ov-side .pf-detail-body {
        inset-block: 0; inset-inline-start: 0; width: 54%;
        display: flex; flex-direction: column; justify-content: center;
        /* **הדעיכה מתחילה רק אחרי שהעמודה נגמרה.** בגרסה הראשונה היא התחילה
           מיד, ולכן הכותרת -שיושבת בראש העמודה, בצידה הרחב -כבר הייתה על
           אזור חשוף למחצה. נמדד: כותרת זהב שהתערבבה בכיתוב הגדול שבתוך
           צילום המסך שמאחור. */
        background: linear-gradient(to left,
            rgba(4, 14, 30, var(--pf-ov-cover)) 0%,
            rgba(4, 14, 30, var(--pf-ov-cover)) 56%,
            rgba(4, 14, 30, calc(var(--pf-ov-cover) * 0.7)) 79%,
            rgba(4, 14, 30, 0) 100%);
    }
    .pf-ov-side .pf-detail-title { padding-inline: 0.4rem; }
}
/* ---- 6. יריעה מלאה: לתיאור ארוך שצריך מקום ---- */
.pf-ov-sheet .pf-detail-body {
    inset: 0;
    background: linear-gradient(180deg,
        rgba(4, 14, 30, calc(var(--pf-ov-cover) * 0.88)) 0%,
        rgba(4, 14, 30, var(--pf-ov-cover)) 100%);
}
/* ---- התמונה נוגעת בדפנות הכרטיס (בקשת המשתמש) ----
   התמונה כבר יוצאת מהריפוד **האופקי** בשוליים שליליים; כאן יורד גם האנכי.
   ‎pf-has-cover‎ = יש תמונה על המסך, ולכן אין למה להפריד מלמעלה - היא הדבר
   הראשון בכרטיס. ‎pf-cover-only‎ = אין מתחתיה כותרת, תגיות, תיאור או כפתורים,
   ואז גם הרצועה התחתונה היא רקע על לא דבר והתמונה ממלאת את הכרטיס.
   שתי המחלקות נכתבות ב-‎syncCoverEdges‎, אחרי שכל תוכן הכרטיס כבר נקבע. */
.pf-detail.pf-has-cover .pf-detail-scroll { padding-top: 0; }
.pf-detail.pf-cover-only .pf-detail-scroll { padding-bottom: 0; }
.pf-detail.pf-cover-only .pf-detail-media { margin-bottom: 0; }
/* **וכשכל התוכן על התמונה, גם אין מתחתיה כלום.** ‎pf-ov-any‎ בלי ‎pf-ov-head‎
   פירושו שהכותרת, התיאור והכפתורים כולם בשכבה שעל התמונה, ולכן ‎margin-bottom‎
   של ה-hero ו-‎padding-bottom‎ של אזור הגלילה הם רצועת רקע על לא דבר. נמדד
   בדסקטופ: 16px + 27.2px = **44px רקע ריק** מתחת לתמונה, ב**כל ארבע**
   ההתאמות (מילוי/הכלה/מתיחה/מקורי) ובכל ששת הסגנונות -כלומר זה מעולם לא היה
   באג של "מתיחה" אלא של המצב עצמו. במובייל זה כבר תוקן בזמנו ולכן לא נראה שם,
   וזו הסיבה שהדיווח הגיע דווקא מהמחשב.
   ‎pf-ov-head‎ מוחרג: שם התיאור באמת יושב מתחת לתמונה וצריך את ההפרדה. */
.pf-detail.pf-ov-any:not(.pf-ov-head) .pf-detail-scroll { padding-bottom: 0; }
.pf-detail.pf-ov-any:not(.pf-ov-head) .pf-detail-hero { margin-bottom: 0; }
/* ‎display: flex‎ גובר על תכונת ‎hidden‎ -בלי הכלל הזה שורת פעולות ריקה
   ממשיכה לתפוס את ה-‎margin-top‎ שלה (נמדדו 23px מתחת לתמונה). */
.pf-detail-actions[hidden] { display: none; }
.pf-detail-title[hidden] { display: none; }
/* ---- התיאור שנשאר מתחת (מצב "כותרת וכפתורים בלבד") ----
   ‎hidden‎ נכתב מ-JS גם כשהמצב פעיל אך התיאור יצא ריק, אחרת הריפוד לבדו
   נראה כפס בתחתית הכרטיס. */
.pf-detail-under { padding-top: 0.2rem; }
.pf-detail-under[hidden] { display: none; }
/* ---- מובייל ----
   "עמודה בצד" יורדת לרצועה תחתונה: ב-390px חצי מסך הוא ~180px, כלומר עמודה
   שכל מילה בה נשברת. שאר הסגנונות רק מצטמצמים. */
@media (max-width: 640px) {
    /* **תמונה לבדה בכרטיס מקבלת אותו כולו.** במובייל ‎.pf-detail-card‎ הוא
       ‎height: 100%‎, ולכן תמונה של 319px השאירה 345px רקע ריק מתחתיה כשאין לה
       שום שכן. ‎flex: 1‎ חייב לשבת גם על אזור הגלילה -הוא מעולם לא ביקש גובה
       מהכרטיס, וזו אותה סיבה בדיוק שמתועדת אצל ‎is-screen‎ ואצל ה-overlay. */
    .pf-detail.pf-cover-only .pf-detail-scroll {
        flex: 1; min-height: 0; display: flex; flex-direction: column;
    }
    .pf-detail.pf-cover-only .pf-detail-hero { flex: 1; }
    .pf-detail.pf-cover-only .pf-detail-media { height: 100%; }
    .pf-detail.pf-cover-only .pf-detail-img,
    .pf-detail.pf-cover-only .pf-detail-media.pf-fit-contain .pf-detail-img { height: 100%; max-height: none; }
    .pf-detail-hero.pf-ov-on .pf-detail-img { height: max(var(--pf-h, 30vh), 11.5rem); }
    /* גם כאן: ב"הכלה" הגובה מהתמונה, אחרת חוזר ה-letterbox בצדדים */
    .pf-detail-hero.pf-ov-on .pf-detail-media.pf-fit-contain .pf-detail-img { height: auto; }
    .pf-ov-on .pf-detail-body { --pf-ov-pad: 0.9rem; }
    /* **התמונה מקבלת את הכרטיס כשאין תוכן מתחתיה.** במובייל ‎.pf-detail-card‎
       הוא ‎height: 100%‎ (מסך מלא), ולכן תמונה של 199px השאירה שלושה רבעים
       מהמסך ריקים בזמן שכל הטקסט נדחס לתוכה ונגלל -נמדד באייפון 14. כשיש
       תיאור מתחת (‎pf-ov-head‎) זה **לא** חל: שם לשאר הכרטיס יש תוכן. */
    /* **‎flex: 1‎ חייב לשבת גם על אזור הגלילה עצמו.** ‎.pf-detail-card‎ הוא
       ‎flex column‎, אבל ‎.pf-detail-scroll‎ מעולם לא ביקש ממנו גובה -הוא נמדד
       לפי התוכן. בלי זה ה-‎flex: 1‎ של ה-hero מחלק שטח שאינו קיים, ונמדד
       באייפון שהתמונה נשארה 250px בכרטיס של 844 (‎is-screen‎ עושה בדיוק את
       אותו דבר, מאותה סיבה). */
    .pf-detail.pf-ov-any:not(.pf-ov-head) .pf-detail-scroll {
        flex: 1; min-height: 0;
        display: flex; flex-direction: column; padding-block: 0;
    }
    .pf-detail.pf-ov-any:not(.pf-ov-head) .pf-detail-hero { flex: 1; margin-block: 0; }
    .pf-detail.pf-ov-any:not(.pf-ov-head) .pf-detail-img { height: 100%; }
    /* ‎contain‎ מוחרג: מתיחת התמונה לגובה הכרטיס שוברת את יחס התיבה ומחזירה
       את החורים בצדדים. שם היא נשארת בפרופורציה שלה, ממורכזת בשטח. */
    .pf-detail.pf-ov-any:not(.pf-ov-head) .pf-detail-media.pf-fit-contain .pf-detail-img { height: auto; }
    .pf-detail.pf-ov-any:not(.pf-ov-head) .pf-detail-media { height: 100%; }
    .pf-ov-side .pf-detail-body {
        inset-inline: 0; inset-block: auto 0; width: auto;
        background: linear-gradient(180deg,
            rgba(4, 14, 30, 0) 0%,
            rgba(4, 14, 30, calc(var(--pf-ov-dim, 0.7) * 0.9)) 55%,
            rgba(4, 14, 30, var(--pf-ov-dim, 0.7)) 100%);
    }
    .pf-ov-card .pf-detail-body { inset-inline: 0.7rem; bottom: 0.7rem; border-radius: 13px; }
    /* הכותרת מוותרת על המקום שהיא שומרת לכפתור הסגירה כשהיא אינה בשורתו */
    .pf-ov-bottom .pf-detail-title,
    .pf-ov-card .pf-detail-title { padding-inline: 0.2rem; }
}
/* **‎is-screen‎ גובר, והעוטף חייב לחזור ל-‎static‎ שם.** שני המצבים מזיזים את
   אותו ‎.pf-detail-body‎, ולכן ה-JS ממילא מכבה את ה-overlay במסך מלא; הכלל
   כאן הוא רשת הביטחון שלא תשאיר containing block זר אם מצב אחד ידלוף. */
.pf-detail.is-screen .pf-detail-hero { position: static; margin: 0; overflow: visible; }
/* ================= ׳’׳œ׳¨׳™׳™׳× ׳”׳×׳™׳׳•׳¨ =================
   ׳ ׳‘׳ ׳™׳× ׳‘-ג€Žjs/portfolio.jsג€Ž ׳›׳©׳×׳™׳׳•׳¨ ׳”׳₪׳¨׳•׳™׳§׳˜ ׳”׳•׳ **׳¨׳§ ׳×׳ž׳•׳ ׳•׳×**. ׳”׳©׳₪׳” ׳”׳•׳•׳™׳–׳•׳׳œ׳™׳×
   ׳”׳™׳ ׳©׳œ ׳”׳¡׳¦׳ ׳”: ׳–׳”׳‘ ׳¢׳ž׳•׳§, ׳›׳—׳•׳œ-׳œ׳™׳œ׳™ ׳•׳¦׳œ ׳¨׳š -׳•׳œ׳ "׳’׳œ׳¨׳™׳” ׳’׳ ׳¨׳™׳×". */
/* **הגלריה נמתחת מקצה לקצה של הכרטיס** (בקשת המשתמש), בדיוק כמו התמונה
   הראשית. היא יושבת בתוך ‎.pf-detail-text‎, כלומר **בתוך** הריפוד של אזור
   הגלילה -ולכן היא זו שצריכה לצאת ממנו, ולא התמונה הראשית שכבר יצאה.
   זו נקודה שקל לפספס: כשתיאור הפרויקט הוא תמונות בלבד הוא מומר לגלריה,
   והתמונה שרואים על המסך אינה ‎.pf-detail-media‎ אלא ‎.pf-gal‎. */
.pf-gal { margin: 0.2rem calc(-1 * var(--pf-detail-pad)) 0.4rem; }
/* ---- שורת סינון התגיות של גלריית התיאור ----
   הצ'יפים עצמם יורשים את ‎.wg-chip‎ (הגלריה יושבת ב-‎.pf-detail-text‎, שהוא
   אחד מארבעת ההקשרים), ולכן כאן רק המיקום: הגלריה **יוצאת** מריפוד הכרטיס
   בשוליים שליליים, והשורה צריכה לחזור פנימה כדי שלא תיצמד לדפנות.
   ‎grid-column‎ של ‎.wg-filters‎ אינו רלוונטי כאן -‎.pf-gal‎ אינו ‎grid‎. */
.pf-gal-filters {
    margin-inline: var(--pf-detail-pad);
    margin-bottom: 0.5rem;
}
/* ממוזערת שסוננה החוצה: ‎[hidden]‎ מפורש, כי ‎.pf-gal-thumb‎ הוא פריט flex
   ו-‎display‎ שלו גובר על ‎hidden‎ -אותה מלכודת שכבר תועדה כאן פעמיים */
.pf-gal-thumb[hidden] { display: none; }

/* בלי עיגול פינות כשנוגעים בדפנות: הקשת משאירה פערים משולשים בין הבמה לבין
   דופן הכרטיס, וזה נקרא כתמונה שלא הצליחה להימתח. */
.pf-gal .pf-gal-stage,
.pf-gal .pf-gal-one { border-radius: 0; }

/* ---- ׳”׳‘׳ž׳” ----
   ׳™׳—׳¡ ׳§׳‘׳•׳¢ ׳•׳œ׳ ׳’׳•׳‘׳” ׳œ׳₪׳™ ׳”׳×׳ž׳•׳ ׳”: ׳×׳ž׳•׳ ׳•׳× ׳‘׳’׳“׳œ׳™׳ ׳©׳•׳ ׳™׳ ׳”׳™׳• ׳ž׳§׳₪׳™׳¦׳•׳× ׳׳× ׳”׳›׳¨׳˜׳™׳¡
   ׳‘׳›׳œ ׳ž׳¢׳‘׳¨, ׳•׳–׳” ׳ž׳•׳¨׳’׳© ׳”׳¨׳‘׳” ׳™׳•׳×׳¨ ׳ž׳—׳™׳×׳•׳š ׳§׳œ. */
/* **׳‘׳œ׳™ ׳ž׳¡׳’׳¨׳× ׳•׳¦׳œ ׳›׳‘׳¨׳™׳¨׳× ׳ž׳—׳“׳œ.** ׳”׳™׳• ׳›׳׳Ÿ ׳’׳‘׳•׳œ ׳–׳”׳‘ ׳•׳¦׳œ ׳§׳‘׳•׳¢׳™׳, ׳•׳”׳ ׳”׳•׳₪׳™׳¢׳• ׳’׳
   ׳¢׳œ ׳×׳ž׳•׳ ׳•׳× ׳©׳œ׳ ׳”׳•׳’׳“׳¨׳” ׳œ׳”׳Ÿ ׳ž׳¡׳’׳¨׳× ׳‘׳¢׳•׳¨׳š -׳›׳œ׳•׳ž׳¨ ׳¢׳™׳¦׳•׳‘ ׳©׳ ׳›׳₪׳” ׳‘׳ž׳§׳•׳ ׳œ׳”׳™׳’׳–׳¨
   ׳ž׳”׳‘׳—׳™׳¨׳”. ׳ž׳¡׳’׳¨׳× ׳ž׳•׳₪׳™׳¢׳” **׳¨׳§** ׳›׳©׳ ׳‘׳—׳¨׳” (ג€Žimgf-*ג€Ž, ׳¨׳׳” ג€ŽapplyDecoג€Ž). ׳”׳¨׳§׳¢ ׳ ׳©׳׳¨:
   ׳”׳•׳ ׳œ׳ ׳§׳™׳©׳•׳˜ ׳׳œ׳ ׳ž׳” ׳©׳ž׳ž׳œ׳ ׳׳× ׳”׳©׳•׳œ׳™׳™׳ ׳›׳©׳”׳×׳ž׳•׳ ׳” ׳׳™׳ ׳” ׳‘׳™׳—׳¡ ׳”׳‘׳ž׳”. */
.pf-gal-stage {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    overflow: hidden;
    background: radial-gradient(120% 100% at 50% 0%, #16325c, #0a1830);
}
.pf-gal-track { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.pf-gal-slide {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden;
    transform: scale(1.06);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s;
}
/* **ג€Žcontainג€Ž ׳•׳œ׳ ג€Žcoverג€Ž, ׳¢׳ ׳¨׳§׳¢ ׳ž׳˜׳•׳©׳˜׳© ׳©׳ž׳ž׳œ׳ ׳׳× ׳”׳©׳•׳œ׳™׳™׳.**
   ג€Žcoverג€Ž ׳¢׳œ ׳‘׳ž׳” ׳‘׳™׳—׳¡ ׳§׳‘׳•׳¢ ׳—׳•׳×׳š ׳›׳œ ׳×׳ž׳•׳ ׳” ׳©׳׳™׳ ׳” ׳‘׳׳•׳×׳• ׳™׳—׳¡ (׳ ׳ž׳“׳“: ׳‘׳׳ ׳¨ ׳©׳׳™׳‘׳“ ׳—׳œ׳§
   ׳ž׳”׳›׳™׳×׳•׳‘ ׳”׳×׳—׳×׳•׳Ÿ), ׳•-ג€Žcontainג€Ž ׳œ׳‘׳“׳• ׳ž׳©׳׳™׳¨ ׳₪׳¡׳™׳ ׳©׳—׳•׳¨׳™׳. ׳”׳¨׳§׳¢ ׳›׳׳Ÿ ׳”׳•׳ **׳”׳×׳ž׳•׳ ׳”
   ׳¢׳¦׳ž׳”** ׳ž׳˜׳•׳©׳˜׳©׳× ׳•׳ž׳•׳—׳©׳›׳× -׳”׳ž׳¡׳’׳¨׳× ׳×׳ž׳™׳“ ׳ž׳œ׳׳”, ׳©׳•׳ ׳₪׳¨׳˜ ׳œ׳ ׳ ׳—׳×׳š, ׳•׳”׳¦׳‘׳¢ ׳×׳ž׳™׳“ ׳ž׳×׳׳™׳. */
.pf-gal-bg {
    position: absolute; inset: 0;
    background: center / cover no-repeat;
    filter: blur(26px) brightness(0.45) saturate(1.1);
    transform: scale(1.2);   /* ׳ž׳›׳¡׳” ׳׳× ׳”׳©׳•׳œ׳™׳™׳ ׳©׳”-blur ׳ž׳¨׳›׳š */
}
/* **ג€Ž.pf-galג€Ž ׳‘׳¡׳œ׳§׳˜׳•׳¨ ׳׳™׳ ׳• ׳§׳™׳©׳•׳˜.** ג€Ž.pf-detail-text imgג€Ž (׳©׳ž׳’׳“׳™׳¨ ג€Žheight: autoג€Ž)
   ׳™׳•׳©׳‘ ׳ž׳׳•׳—׳¨ ׳™׳•׳×׳¨ ׳‘׳§׳•׳‘׳¥ ׳•׳‘׳׳•׳×׳• specificity ׳‘׳“׳™׳•׳§ -(0,1,1) ׳ž׳•׳œ (0,1,1) - ׳•׳œ׳›׳Ÿ
   ׳ ׳™׳¦׳—, ׳•׳”׳×׳ž׳•׳ ׳” ׳ ׳ž׳×׳—׳” ׳œ׳’׳•׳‘׳”׳” ׳”׳˜׳‘׳¢׳™ ׳•׳’׳œ׳©׳” ׳ž׳”׳‘׳ž׳” (׳ ׳ž׳“׳“: 842px ׳‘׳×׳•׳š ׳‘׳ž׳” ׳©׳œ 425).
   ׳ž׳—׳œ׳§׳” ׳ ׳•׳¡׳₪׳× ׳ž׳›׳¨׳™׳¢׳”. ׳׳•׳×׳• ׳©׳™׳§׳•׳œ ׳‘-ג€Ž.pf-gal-one imgג€Ž. */
.pf-gal .pf-gal-slide img {
    position: relative;
    width: 100%; height: 100%; object-fit: contain; display: block;
    margin: 0; border-radius: 0; max-width: 100%;
    filter: drop-shadow(0 8px 22px rgba(4, 12, 28, 0.5));
}
.pf-gal-slide.is-on {
    opacity: 1; visibility: visible; transform: scale(1);
    transition: opacity 0.5s ease, transform 6s ease-out, visibility 0s;
}
/* ׳”׳›׳™׳•׳•׳Ÿ ׳”׳™׳•׳¦׳: ׳‘׳œ׳¢׳“׳™׳• ׳”׳ž׳¢׳‘׳¨ ׳ ׳¨׳׳” ׳–׳”׳” ׳œ׳©׳ ׳™ ׳”׳¦׳“׳“׳™׳ ׳•׳׳™ ׳׳₪׳©׳¨ ׳œ׳“׳¢׳× ׳œ׳׳Ÿ ׳”׳œ׳›׳ ׳• */
.pf-gal-slide.out-l { opacity: 0; visibility: visible; transform: translateX(-4%) scale(1.02); }
.pf-gal-slide.out-r { opacity: 0; visibility: visible; transform: translateX(4%) scale(1.02); }

/* ---- ׳—׳™׳¦׳™׳ ----
   ׳ž׳•׳₪׳™׳¢׳™׳ ׳ž׳œ׳׳™׳ ׳‘-hover ׳•׳‘׳ž׳™׳§׳•׳“, ׳•׳©׳§׳•׳₪׳™׳-׳œ׳ž׳—׳¦׳” ׳‘׳ž׳ ׳•׳—׳”: ׳”׳ ׳¢׳•׳–׳¨׳™׳ ׳›׳©׳¦׳¨׳™׳š ׳׳•׳×׳
   ׳•׳œ׳ ׳—׳•׳¦׳¦׳™׳ ׳‘׳™׳Ÿ ׳”׳¦׳•׳₪׳” ׳œ׳×׳ž׳•׳ ׳” ׳›׳©׳œ׳. ׳‘׳ž׳’׳¢ ׳׳™׳Ÿ hover ׳•׳œ׳›׳Ÿ ׳”׳ ׳ž׳œ׳׳™׳ ׳×׳ž׳™׳“. */
.pf-gal-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
    padding: 0; cursor: pointer; border-radius: 50%;
    color: #16233e;
    background: linear-gradient(180deg, var(--c-gold-light, #ffe7a3), var(--c-gold, #ffd15a));
    border: 1.5px solid rgba(122, 79, 40, 0.6);
    box-shadow: 0 5px 14px rgba(4, 12, 28, 0.5);
    opacity: 0.55;
    transition: opacity 0.2s ease, transform 0.15s ease, filter 0.2s ease;
}
.pf-gal-stage:hover .pf-gal-nav { opacity: 1; }
.pf-gal-nav:hover { filter: brightness(1.07); transform: translateY(-50%) scale(1.08); }
.pf-gal-nav:active { transform: translateY(-50%) scale(0.96); }
.pf-gal-nav:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 2px; }
.pf-gal-nav svg { width: 1.1rem; height: 1.1rem; }
.pf-gal-prev { inset-inline-start: 0.7rem; }
.pf-gal-next { inset-inline-end: 0.7rem; }
@media (pointer: coarse) { .pf-gal-nav { opacity: 0.92; } }

.pf-gal-count {
    position: absolute; inset-block-end: 0.7rem; inset-inline-end: 0.9rem;
    padding: 0.2rem 0.65rem; border-radius: 999px;
    font-size: 0.78rem; font-weight: 800; letter-spacing: 0.5px;
    color: var(--c-gold-light, #ffe7a3);
    background: rgba(6, 16, 34, 0.72);
    border: 1px solid rgba(255, 231, 163, 0.35);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.pf-gal-count b { color: #fff; }

/* ---- ׳ž׳ž׳•׳–׳¢׳¨׳•׳× ----
   ׳’׳œ׳™׳œ׳” ׳׳•׳₪׳§׳™׳× ׳•׳œ׳ ׳©׳‘׳™׳¨׳” ׳œ׳©׳•׳¨׳•׳×: ׳ž׳¡׳₪׳¨ ׳”׳×׳ž׳•׳ ׳•׳× ׳׳™׳ ׳• ׳™׳“׳•׳¢ ׳ž׳¨׳׳©, ׳•׳¨׳©׳× ׳©׳ ׳©׳‘׳¨׳×
   ׳”׳™׳™׳×׳” ׳“׳•׳—׳₪׳× ׳׳× ׳”׳›׳¨׳˜׳™׳¡ ׳œ׳’׳•׳‘׳” ׳ž׳©׳×׳ ׳”. ׳—׳•׳§ ׳”׳₪׳¨׳•׳™׳§׳˜ -׳¡׳¨׳’׳œ ׳’׳œ׳™׳œ׳” ׳ž׳¢׳•׳¦׳‘. */
.pf-gal-thumbs {
    display: flex; gap: 0.5rem; margin-top: 0.6rem;
    overflow-x: auto; padding-bottom: 0.3rem;
    scrollbar-width: thin; scrollbar-color: rgba(255, 231, 163, 0.4) transparent;
}
.pf-gal-thumbs::-webkit-scrollbar { height: 6px; }
.pf-gal-thumbs::-webkit-scrollbar-track { background: transparent; }
.pf-gal-thumbs::-webkit-scrollbar-thumb { background: rgba(255, 231, 163, 0.35); border-radius: 999px; }
.pf-gal-thumb {
    flex: 0 0 auto; width: 4.6rem; height: 3.2rem;
    padding: 0; cursor: pointer; overflow: hidden;
    border-radius: 9px;
    border: 2px solid transparent;
    background: rgba(10, 24, 48, 0.6);
    opacity: 0.55;
    transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.pf-gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-gal-thumb:hover { opacity: 0.85; transform: translateY(-2px); }
.pf-gal-thumb.is-on {
    opacity: 1; border-color: var(--c-gold, #ffd15a);
    box-shadow: 0 0 0 2px rgba(255, 209, 90, 0.25);
}
.pf-gal-thumb:focus-visible { outline: 2px solid var(--c-gold, #ffd15a); outline-offset: 2px; }

/* ---- ׳×׳ž׳•׳ ׳” ׳‘׳•׳“׳“׳× ----
   ׳œ׳ ׳’׳œ׳¨׳™׳” ׳©׳œ ׳₪׳¨׳™׳˜ ׳׳—׳“ (׳›׳₪׳×׳•׳¨׳™׳ ׳ž׳™׳•׳×׳¨׳™׳) ׳׳œ׳ **׳×׳ž׳•׳ ׳” ׳ž׳ž׳•׳¡׳’׳¨׳×**: ׳ž׳¡׳’׳¨׳× ׳–׳”׳‘
   ׳¢׳‘׳” ׳™׳•׳×׳¨, ׳–׳•׳”׳¨ ׳¢׳“׳™׳Ÿ, ׳•׳×׳ ׳•׳¢׳× Ken Burns ׳׳™׳˜׳™׳× ׳ž׳׳•׳“ ׳©׳”׳•׳₪׳›׳× ׳×׳ž׳•׳ ׳” ׳¡׳˜׳˜׳™׳× ׳œ׳œ׳•׳—
   ׳©׳ž׳™׳©׳”׳• ׳¢׳™׳¦׳‘ -׳‘׳œ׳™ ׳œ׳’׳ ׳•׳‘ ׳×׳©׳•׳ž׳× ׳œ׳‘. */
/* ׳’׳ ׳›׳׳Ÿ: ׳‘׳œ׳™ ׳ž׳¡׳’׳¨׳× ׳•׳¦׳œ ׳›׳₪׳•׳™׳™׳ -׳¨׳§ ׳ž׳” ׳©׳ ׳‘׳—׳¨ ׳‘׳¢׳•׳¨׳š */
.pf-gal-one {
    position: relative; margin: 0;
    aspect-ratio: 16 / 10;
    border-radius: 16px; overflow: hidden;
}
.pf-gal .pf-gal-one img {
    position: relative;
    width: 100%; height: 100%; object-fit: contain; display: block;
    margin: 0; border-radius: 0; max-width: 100%;
    filter: drop-shadow(0 10px 26px rgba(4, 12, 28, 0.55));
    animation: pf-kenburns 18s ease-in-out infinite alternate;
}
/* ׳–׳•׳”׳¨ ׳₪׳ ׳™׳ž׳™ ׳¢׳“׳™׳Ÿ ׳‘׳§׳¦׳•׳•׳× -׳ ׳•׳×׳Ÿ ׳¢׳•׳ž׳§ ׳‘׳œ׳™ ׳œ׳©׳ ׳•׳× ׳׳× ׳”׳×׳ž׳•׳ ׳” ׳¢׳¦׳ž׳” */
.pf-gal-one .pf-gal-glow {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(120% 90% at 50% -10%, rgba(255, 231, 163, 0.16), transparent 55%),
        radial-gradient(120% 80% at 50% 110%, rgba(4, 12, 28, 0.5), transparent 55%);
}
@keyframes pf-kenburns {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to   { transform: scale(1.08) translate3d(-1.5%, -1%, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .pf-gal-one img { animation: none; }
    .pf-gal-slide, .pf-gal-slide.is-on { transition: opacity 0.2s ease, visibility 0s; transform: none; }
}
/* ׳—׳•׳§ ׳”׳ž׳•׳‘׳™׳™׳œ: ׳™׳—׳¡ ׳’׳‘׳•׳” ׳™׳•׳×׳¨ (׳×׳ž׳•׳ ׳•׳× ׳ ׳¨׳׳•׳× ׳’׳“׳•׳œ׳•׳× ׳™׳•׳×׳¨ ׳‘׳ž׳¡׳š ׳¦׳¨), ׳—׳™׳¦׳™׳
   ׳•׳ž׳ž׳•׳–׳¢׳¨׳•׳× ׳§׳˜׳ ׳™׳ ׳™׳•׳×׳¨ -׳׳‘׳œ ׳›׳•׳œ׳ ׳ ׳©׳׳¨׳™׳, ׳›׳™ ׳”׳ ׳“׳¨׳š ׳”׳ ׳™׳•׳•׳˜ ׳”׳™׳—׳™׳“׳” ׳‘׳ž׳’׳¢. */
@media (max-width: 640px) {
    .pf-gal-stage, .pf-gal-one { aspect-ratio: 4 / 3; }
    .pf-gal-nav { width: 2.1rem; height: 2.1rem; }
    .pf-gal-nav svg { width: 0.95rem; height: 0.95rem; }
    .pf-gal-thumb { width: 3.5rem; height: 2.5rem; }
    .pf-gal-count { font-size: 0.72rem; inset-block-end: 0.5rem; inset-inline-end: 0.6rem; }
}

/* ׳”׳›׳•׳×׳¨׳× ׳ž׳ž׳•׳¨׳›׳–׳× -׳”׳™׳ ׳›׳•׳×׳¨׳× ׳©׳œ ׳›׳¨׳˜׳™׳¡, ׳œ׳ ׳×׳—׳™׳œ׳× ׳₪׳¡׳§׳”. **׳¨׳™׳₪׳•׳“ ׳¡׳™׳ž׳˜׳¨׳™** ׳‘׳©׳ ׳™
   ׳”׳¦׳“׳“׳™׳: ג€Žpadding-inline-endג€Ž ׳œ׳‘׳“׳• (׳”׳ž׳§׳•׳ ׳œ׳›׳₪׳×׳•׳¨ ׳”׳¡׳’׳™׳¨׳”) ׳”׳™׳” ׳ž׳–׳™׳– ׳׳× ׳”׳ž׳¨׳›׳–
   ׳©׳ž׳׳œ׳”, ׳•׳›׳•׳×׳¨׳× "׳›׳ž׳¢׳˜ ׳ž׳ž׳•׳¨׳›׳–׳×" ׳ ׳§׳¨׳׳× ׳›׳×׳§׳œ׳”. */
/* ׳›׳•׳×׳¨׳× ׳›׳¨׳˜׳™׳¡ ׳”׳₪׳¨׳˜׳™׳. ׳’׳•׳₪׳Ÿ/׳’׳•׳“׳œ/׳¦׳‘׳¢ ׳ ׳©׳œ׳˜׳™׳ ׳‘׳ ׳™׳”׳•׳œ ׳“׳¨׳š ג€Ž--pf-d-*ג€Ž (׳‘׳œ׳•׳§
   ג€ŽdetailTextג€Ž), ׳‘׳׳•׳×׳• ׳“׳₪׳•׳¡ ׳©׳œ ׳›׳•׳×׳¨׳× ׳”׳“׳£, ׳”׳ž׳‘׳•׳, ׳›׳•׳×׳¨׳× ׳”׳₪׳¨׳•׳™׳§׳˜ ׳•׳”׳ ׳™׳’׳•׳Ÿ -
   ׳•׳‘׳œ׳¢׳“׳™׳• ׳–׳• ׳”׳™׳™׳×׳” ׳”׳›׳•׳×׳¨׳× ׳”׳™׳—׳™׳“׳” ׳‘׳׳×׳¨ ׳©׳׳™׳Ÿ ׳¢׳œ׳™׳” ׳©׳œ׳™׳˜׳”. */
.pf-detail-title {
    margin: 0 0 0.6rem;
    font-family: var(--pf-d-font, var(--heading-font, 'Suez One')), system-ui, sans-serif;
    font-size: calc(clamp(1.25rem, 4vw, 1.75rem) * var(--pf-d-scale, 1)); font-weight: 800;
    color: var(--pf-d-color, var(--c-gold-light, #ffe7a3));
    text-align: center;
    padding-inline: 2.4rem;             /* ׳ž׳§׳•׳ ׳œ׳›׳₪׳×׳•׳¨ ׳”׳¡׳’׳™׳¨׳”, ׳•׳‘׳׳•׳×׳” ׳ž׳™׳“׳” ׳ž׳ ׳’׳“ */
}
/* ׳”׳×׳’׳™׳•׳× ׳ž׳×׳™׳™׳©׳¨׳•׳× ׳¢׳ ׳”׳›׳•׳×׳¨׳× ׳©׳ž׳¢׳œ׳™׳”׳Ÿ */
.pf-detail-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; margin: 0 0 0.9rem; }
.pf-detail-tags[hidden] { display: none; }
.pf-detail-tag {
    font-size: 0.78rem; font-weight: 700; line-height: 1;
    padding: 0.32rem 0.7rem; border-radius: 999px;
    color: var(--c-gold-light, #ffe7a3);
    background: rgba(255, 231, 163, 0.12);
    border: 1px solid rgba(255, 231, 163, 0.35);
}
/* גוף הטקסט בחלון התיאור. גופן/גודל/צבע נשלטים בניהול דרך ‎--pf-db-*‎ (בלוק
   ‎detailBodyText‎), בדיוק כמו הכותרת שמעליו. עד כה היה כאן גודל קשיח בלבד -
   הכותרת הייתה ניתנת לעיצוב והטקסט לא, וזה נקרא כחוסר. ברירת המחדל היא גופן
   הגוף של האתר, כלומר אתר קיים אינו משנה את מראהו מעצמו. */
.pf-detail-text {
    font-family: var(--pf-db-font, var(--body-font, 'Heebo')), system-ui, sans-serif;
    font-size: calc(clamp(0.95rem, 2.4vw, 1.05rem) * var(--pf-db-scale, 1));
    line-height: 1.75;
    color: var(--pf-db-color, inherit);
}
.pf-detail-text > :first-child { margin-top: 0; }
.pf-detail-text > :last-child { margin-bottom: 0; }
.pf-detail-text p { margin: 0 0 0.75em; }
.pf-detail-text ul, .pf-detail-text ol { margin: 0 0 0.75em; padding-inline-start: 1.4em; }
.pf-detail-text li { margin-bottom: 0.3em; }
.pf-detail-text h3, .pf-detail-text h4 { margin: 1.1em 0 0.35em; color: var(--c-gold-light, #ffe7a3); font-size: 1.15em; }
.pf-detail-text a { color: var(--c-gold, #ffd15a); text-decoration: underline; }
.pf-detail-text a:hover { color: var(--c-gold-light, #ffe7a3); }
/* ׳×׳ž׳•׳ ׳•׳× ׳‘׳×׳™׳׳•׳¨ ׳”׳₪׳¨׳•׳™׳§׳˜ -׳׳•׳×׳Ÿ ׳ž׳—׳œ׳§׳•׳× ׳¨׳•׳—׳‘ ׳©׳”׳¢׳•׳¨׳š ׳ž׳˜׳ž׳™׳¢ */
.pf-detail-text img { max-width: 100%; height: auto; border-radius: 10px; margin: 0.4em 0; }
.pf-detail-text img.cms-w25 { width: 25%; } .pf-detail-text img.cms-w50 { width: 50%; }
.pf-detail-text img.cms-w75 { width: 75%; } .pf-detail-text img.cms-w100 { width: 100%; }
.pf-detail-text img.cms-center { display: block; margin-inline: auto; }

/* ---- תמונה בתיאור מעורב, גם היא מקצה לקצה ----
   **המקרה השלישי, וזה שנראה על המסך בפועל.** תיאור שיש בו טקסט **וגם** תמונות
   אינו מומר לגלריה (ההמרה קורית רק כשאין טקסט כלל), ולכן התמונה נשארת ‎<img>‎
   רגיל בתוך ‎.pf-detail-text‎ -כלומר בתוך הריפוד. תיקון ‎.pf-detail-media‎
   ותיקון ‎.pf-gal‎ לא נגעו בו, וזו הסיבה שהרווח נשאר.

   **התנאים חשובים:** רק תמונה שהיא ילד ישיר, שאינה צפה לצד (‎cms-imgl/r‎) ואין
   לה רוחב מוגדר (‎cms-w25/50/75‎) -בשלושת המקרים האלה המשתמש ביקש במפורש
   תמונה שאינה תופסת את כל הרוחב, ומתיחה לדפנות הייתה מבטלת את הבחירה שלו. */
.pf-detail-text > img:not(.cms-imgl):not(.cms-imgr):not(.cms-w25):not(.cms-w50):not(.cms-w75) {
    display: block;
    width: calc(100% + 2 * var(--pf-detail-pad));
    max-width: none;
    margin-inline: calc(-1 * var(--pf-detail-pad));
    border-radius: 0;
}
/* ׳’׳ ׳›׳׳Ÿ: ׳‘׳œ׳™ ׳”-float, ׳™׳™׳©׳•׳¨ ׳©׳ ׳‘׳—׳¨ ׳‘׳¢׳•׳¨׳š ׳ ׳©׳ž׳¨ ׳׳š ׳œ׳ ׳ ׳¨׳׳” ׳‘׳›׳¨׳˜׳™׳¡ ׳”׳₪׳¨׳•׳™׳§׳˜ ׳‘׳׳×׳¨ */
.pf-detail-text img.cms-imgr { float: right; margin: 0.2rem 0 0.6rem 0.9rem; }
.pf-detail-text img.cms-imgl { float: left;  margin: 0.2rem 0.9rem 0.6rem 0; }
.pf-detail-text::after { content: ''; display: block; clear: both; }
/* ׳ž׳ž׳•׳¨׳›׳–׳•׳× ׳•׳œ׳ ׳¦׳ž׳•׳“׳•׳× ׳œ׳§׳¦׳”: ׳–׳• ׳©׳•׳¨׳× ׳”׳¡׳™׳•׳ ׳©׳œ ׳”׳›׳¨׳˜׳™׳¡, ׳•׳”׳ž׳‘׳˜ ׳ž׳’׳™׳¢ ׳׳œ׳™׳” ׳׳—׳¨׳™
   ׳˜׳§׳¡׳˜ ׳ž׳™׳•׳©׳¨-׳”׳×׳—׳œ׳” -׳›׳₪׳×׳•׳¨ ׳‘׳•׳“׳“ ׳©׳ ׳¦׳ž׳“ ׳œ׳¦׳“ ׳ ׳§׳¨׳ ׳›׳©׳׳¨׳™׳× ׳©׳œ ׳”׳₪׳¡׳§׳” ׳•׳œ׳ ׳›׳₪׳¢׳•׳œ׳”. */
.pf-detail-actions {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 0.6rem; margin-top: 1.4rem;
}
.pf-detail-link, .pf-detail-play {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 1.25rem;
    cursor: pointer; font-family: inherit; font-weight: 800; font-size: 0.98rem;
    text-decoration: none; border-radius: 999px;
    transition: transform 0.15s ease, filter 0.2s ease;
}
.pf-detail-link[hidden], .pf-detail-play[hidden] { display: none; }
.pf-detail-link svg, .pf-detail-play svg { width: 1.05em; height: 1.05em; }
.pf-detail-link {
    color: var(--c-ink, #1f150e);
    background: linear-gradient(180deg, var(--c-gold-light, #ffe7a3), var(--c-gold, #ffd15a) 60%, var(--c-gold-deep, #d39a1a));
    border: 1px solid rgba(122, 79, 40, 0.5);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.pf-detail-play {
    color: var(--c-gold-light, #ffe7a3);
    background: rgba(255, 255, 255, 0.07);
    border: 1.5px solid rgba(255, 231, 163, 0.45);
}
.pf-detail-link:hover, .pf-detail-play:hover { transform: translateY(-2px); filter: brightness(1.06); }
.pf-detail-link:active, .pf-detail-play:active { transform: translateY(0); }

@media (max-width: 640px) {
    /* ׳—׳•׳§ ׳”׳ž׳•׳‘׳™׳™׳œ: ׳’׳™׳œ׳™׳•׳Ÿ ׳ž׳¡׳š-׳ž׳œ׳ -׳§׳¨׳™׳׳” ׳ ׳•׳—׳” ׳‘׳ž׳§׳•׳ ׳—׳œ׳•׳Ÿ ׳§׳˜׳Ÿ ׳‘׳×׳•׳š ׳ž׳¡׳š ׳§׳˜׳Ÿ */
    /* **הכרטיס מתכווץ לתוכן, אבל נשאר ברוחב מלא.** ‎height: 100%‎ נתן גיליון
       מסך-מלא תמיד, וזה נכון לתיאור ארוך -אבל פרויקט שיש בו תמונה רחבה,
       כותרת וכפתור בלבד השאיר **45% מהמסך ריק** (נמדד באייפון 14: 299px
       מתוך 664, מול 5% בדסקטופ). ‎height: auto‎ עם ‎max-height: 100%‎ נותן את
       שני המצבים מאותו כלל: תוכן קצר -כרטיס בגובהו; תוכן ארוך -מגיע לתקרה
       ונגלל כמו קודם.
       **הרוחב, הריפוד והפינות נשארים בדיוק כפי שהיו** -נוסה כאן ריפוד
       ‎0.6rem‎ עם פינות מעוגלות, וזה גרר את התמונה 10px פנימה מכל צד: בהכלה
       היא אמורה לגעת בדפנות, וזה מה שנמדד לפני (0/0) מול אחרי (1/1) בכל
       רוחב מתחת ל-640. הגובה הוא הבעיה שנפתרה כאן, לא הרוחב. */
    .pf-detail { padding: 0; }
    .pf-detail-card {
        width: 100%; height: auto; max-height: 100%;
        border-radius: 0; border: 0;
    }
    /* ׳—׳•׳§ ׳”׳ž׳•׳‘׳™׳™׳œ: ׳׳•׳×׳ ׳’׳“׳œ׳™׳, ׳ ׳ž׳•׳›׳™׳ ׳™׳•׳×׳¨ -׳›׳׳Ÿ ׳”׳ž׳¡׳š ׳§׳¦׳¨ ׳•׳”׳×׳ž׳•׳ ׳” ׳“׳•׳—׳§׳× ׳׳× ׳”׳˜׳§׳¡׳˜.
       ׳“׳¨׳š ג€Ž--pf-hג€Ž ׳‘׳œ׳‘׳“, ׳›׳š ׳©׳’׳ "׳ž׳™׳œ׳•׳™" (׳’׳•׳‘׳”) ׳•׳’׳ "׳”׳›׳œ׳”" (max-height) ׳ž׳×׳¢׳“׳›׳ ׳™׳. */
    .pf-detail-media                { --pf-h: 30vh; }
    .pf-detail-media.pf-cover-s     { --pf-h: 16vh; }
    .pf-detail-media.pf-cover-m     { --pf-h: 23vh; }
    .pf-detail-media.pf-cover-l     { --pf-h: 30vh; }
    .pf-detail-media.pf-cover-full  { --pf-h: 48vh; }
    .pf-detail-actions > * { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .pf-detail, .pf-detail-card { animation: none; }
}

/* ---- ׳₪׳§׳“׳™׳: ׳ ׳§׳•׳“׳•׳× + ׳ž׳•׳ ׳” ---- */
.pf-controls { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.pf-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
/* ׳”׳ ׳§׳•׳“׳•׳× ׳•׳”׳ž׳•׳ ׳” ׳™׳•׳©׳‘׳™׳ ׳¢׳œ **׳”׳§׳œ׳£ ׳”׳‘׳”׳™׳¨** ׳©׳œ ׳”׳©׳œ׳˜, ׳•׳œ׳›׳Ÿ ׳”׳’׳‘׳•׳œ ׳—׳•׳ ׳•׳œ׳ ׳–׳”׳‘:
   ׳ž׳¡׳’׳¨׳× ׳–׳”׳‘ ׳¢׳œ ׳‘׳–' ׳›׳ž׳¢׳˜ ׳׳™׳ ׳” ׳ ׳¨׳׳™׳×. ׳”׳ ׳§׳•׳“׳” ׳”׳₪׳¢׳™׳œ׳” ׳ ׳©׳׳¨׳× ׳–׳”׳‘ -׳©׳ ׳”׳™׳ ׳‘׳•׳œ׳˜׳×. */
.pf-dot {
    width: 0.7rem; height: 0.7rem; padding: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(122, 79, 40, 0.5);
    background: rgba(122, 79, 40, 0.14);
    cursor: pointer;
    transition: transform 0.18s ease, background 0.2s ease, border-color 0.2s ease, width 0.25s ease;
}
.pf-dot:hover { background: rgba(122, 79, 40, 0.34); transform: scale(1.15); }
/* ׳‘׳©׳œ׳˜ ׳”׳ž׳§׳•׳ ׳ž׳•׳’׳‘׳œ -׳”׳ ׳§׳•׳“׳•׳× ׳ž׳×׳›׳•׳•׳¦׳•׳× ׳׳™׳×׳• ׳‘׳ž׳§׳•׳ ׳œ׳”׳™׳©׳‘׳¨ ׳œ׳©׳×׳™ ׳©׳•׳¨׳•׳× */
/* ׳¨׳•׳•׳— ׳‘׳™׳Ÿ ׳”׳›׳₪׳×׳•׳¨׳™׳ ׳œ׳ ׳§׳•׳“׳•׳×: ׳”׳ ׳©׳×׳™ ׳©׳›׳‘׳•׳× ׳©׳•׳ ׳•׳× (׳₪׳¢׳•׳œ׳” ׳ž׳•׳œ ׳ ׳™׳•׳•׳˜), ׳•׳‘׳œ׳™
   ׳¨׳•׳•׳— ׳”׳›׳₪׳×׳•׳¨ ׳ ׳¨׳׳” ׳™׳•׳©׳‘ ׳¢׳œ ׳”׳ ׳§׳•׳“׳•׳×. ׳™׳—׳™׳“׳× ג€Žcqwג€Ž ׳›׳“׳™ ׳©׳”׳•׳ ׳™׳×׳›׳•׳•׳¥ ׳¢׳ ׳”׳©׳œ׳˜. */
.pf-cap-inner .pf-controls { margin-top: 1.2cqw; }
/* ׳”׳›׳™׳×׳•׳‘ ׳ ׳—׳©׳£ ׳¨׳§ ׳›׳©׳”׳”׳¨׳ž׳” ׳”׳×׳™׳™׳¦׳‘׳” (׳¨׳׳” portfolio.js) -׳¢׳ž׳¢׳•׳ ׳§׳¦׳¨ ׳‘׳ž׳§׳•׳ ׳§׳₪׳™׳¦׳•׳× */
.pf-caption { transition: opacity 0.3s ease, margin-block-start 0.25s ease; }
.pf-page:not(.pf-cap-ready) .pf-caption { opacity: 0; }
/* ׳₪׳¨׳™׳˜ ׳™׳—׳™׳“: ׳׳™׳Ÿ ׳œ׳׳Ÿ ׳œ׳ ׳•׳•׳˜, ׳•׳œ׳›׳Ÿ ׳”׳ ׳§׳•׳“׳•׳×, ׳”׳ž׳•׳ ׳” ׳•׳”׳—׳™׳¦׳™׳ ׳™׳•׳¨׳“׳™׳ ׳œ׳’׳ž׳¨׳™ -
   "1 / 1" ׳•׳ ׳§׳•׳“׳” ׳‘׳•׳“׳“׳× ׳ž׳¨׳ž׳–׳™׳ ׳¢׳œ ׳ž׳©׳”׳• ׳©׳׳™׳ ׳• ׳§׳™׳™׳. */
.pf-page.pf-single .pf-controls,
.pf-page.pf-single .pf-nav { display: none; }
.pf-cap-inner .pf-dots { gap: 1.5cqw; }
.pf-cap-inner .pf-dot { width: 2cqw; height: 2cqw; max-width: 0.7rem; max-height: 0.7rem; border-width: 1px; }
.pf-cap-inner .pf-dot.pf-on { width: 4.6cqw; max-width: 1.6rem; }
.pf-dot.pf-on {
    width: 1.6rem; border-radius: 999px;
    /* ׳¦׳‘׳¢ ׳”׳ ׳™׳’׳•׳Ÿ (׳”׳ ׳§׳•׳“׳” ׳”׳₪׳¢׳™׳œ׳”) ׳ ׳©׳œ׳˜ ׳ž׳”׳ ׳™׳”׳•׳œ; ׳‘׳¨׳™׳¨׳× ׳ž׳—׳“׳œ -׳’׳¨׳“׳™׳׳ ׳˜ ׳”׳–׳”׳‘ */
    background: var(--pf-c-color, linear-gradient(90deg, var(--c-gold, #ffd15a), var(--c-gold-light, #ffe7a3)));
    border-color: var(--pf-c-color, var(--c-gold, #ffd15a));
}
.pf-dot:focus-visible { outline: 2px solid var(--c-gold, #ffd15a); outline-offset: 2px; }
.pf-counter {
    font-family: var(--pf-c-font, inherit);
    font-size: calc(0.85rem * var(--pf-c-scale, 1));
    font-weight: 700; letter-spacing: 1px;
    color: var(--pf-c-color, #e9e0cf);
}
.pf-counter .pf-cur { color: var(--pf-c-color, var(--c-gold-light, #ffe7a3)); }
/* ׳¢׳œ ׳”׳§׳œ׳£ ׳”׳‘׳”׳™׳¨: ׳—׳•׳ ׳›׳”׳”, ׳•׳‘׳’׳•׳“׳œ ׳©׳ ׳’׳–׳¨ ׳ž׳¨׳•׳—׳‘ ׳”׳©׳œ׳˜ */
.pf-cap-inner .pf-counter {
    font-size: calc(clamp(0.52rem, 2.3cqw, 0.8rem) * var(--pf-c-scale, 1));
    line-height: 1.15;
    color: var(--pf-c-color, rgba(74, 47, 18, 0.75));
}
.pf-cap-inner .pf-counter .pf-cur { color: var(--pf-c-color, #7a4f28); }

/* ---- ׳ž׳¦׳‘ ׳¨׳™׳§ (׳¢׳“׳™׳™׳Ÿ ׳׳™׳Ÿ ׳₪׳¨׳™׳˜׳™׳) ---- */
.pf-empty {
    text-align: center;
    padding: clamp(1.5rem, 5vh, 3.5rem) 1rem;
    color: var(--c-paper, #fff6e6);
}
.pf-empty-icon { font-size: clamp(3rem, 9vw, 5rem); filter: drop-shadow(0 6px 14px rgba(6, 16, 36, 0.5)); }
.pf-empty-title { margin: 0.6rem 0 0.2rem; font-size: clamp(1.15rem, 3vw, 1.6rem); font-weight: 800; text-shadow: 0 2px 6px rgba(6, 16, 36, 0.6); }
.pf-empty-sub { margin: 0; font-size: clamp(0.9rem, 2.2vw, 1.05rem); color: #e9e0cf; }
.pf-empty-admin { margin: 1rem auto 0; max-width: 24rem; font-size: 0.82rem; font-weight: 700; color: #16233e; background: rgba(255, 231, 163, 0.9); border: 1px dashed rgba(122, 79, 40, 0.5); border-radius: 10px; padding: 0.5rem 0.9rem; }
.pf-empty-ghosts { display: flex; justify-content: center; gap: 1rem; margin-top: 1.6rem; perspective: 900px; }
.pf-empty-ghosts span {
    width: clamp(70px, 20vw, 150px); aspect-ratio: 16 / 10;
    border-radius: 14px;
    border: 1.5px dashed rgba(255, 231, 163, 0.35);
    background: rgba(255, 246, 230, 0.06);
}
.pf-empty-ghosts span:first-child { transform: rotateY(32deg) scale(0.86); opacity: 0.6; }
.pf-empty-ghosts span:last-child  { transform: rotateY(-32deg) scale(0.86); opacity: 0.6; }

/* ---- ׳ž׳•׳‘׳™׳™׳œ ---- */
@media (max-width: 640px) {
    .pf-slide { width: clamp(200px, 74vw, 330px); }
    /* ׳’׳׳•׳ž׳˜׳¨׳™׳™׳× ׳ž׳•׳‘׳™׳™׳œ -׳ ׳₪׳¨׳“׳× ׳ž׳”׳ž׳—׳©׳‘ (׳ž׳×׳™׳—׳” + ׳”׳–׳–׳” ׳œ׳₪׳™ ׳ž׳©׳×׳ ׳™ ׳”-M) */
    .pf-viewport { height: clamp(210px, 56vw, 300px);
        transform: translate(var(--pf-oxm, 0%), var(--pf-oym, 0%)) rotateX(var(--pf-tilt-m, 0deg)) scale(var(--pf-wm, 1), var(--pf-hm, 1)); }
    /* ׳’׳•׳“׳œ/׳”׳–׳–׳× ׳”׳›׳™׳×׳•׳‘ -׳’׳¨׳¡׳× ׳”׳ž׳•׳‘׳™׳™׳œ. **׳—׳™׳™׳‘ ׳œ׳©׳›׳×׳‘ ׳׳× ׳”׳ž׳׳₪׳™׳™׳Ÿ ׳¢׳¦׳ž׳•** ׳•׳œ׳ ׳׳×
       ג€Ž--pf-tsג€Ž: ׳”׳×׳¦׳•׳’׳” ׳”׳ž׳§׳“׳™׳ž׳” ׳‘׳ ׳™׳”׳•׳œ ׳›׳•׳×׳‘׳× ׳׳•׳×׳• ׳›-inline ׳¢׳œ ג€Ž.pf-pageג€Ž, ׳•-inline
       ׳’׳•׳‘׳¨ ׳¢׳œ media query -׳›׳š ׳©׳¢׳¨׳š ׳”׳ž׳—׳©׳‘ ׳”׳™׳” ׳ž׳ ׳¦׳— ׳’׳ ׳‘׳ž׳¡׳š ׳§׳˜׳Ÿ. ׳׳•׳×׳• ׳“׳₪׳•׳¡ ׳©׳›׳‘׳¨
       ׳ ׳”׳•׳’ ׳›׳׳Ÿ ׳œ׳¨׳•׳—׳‘/׳’׳•׳‘׳” (ג€Ž--pf-wmג€Ž ׳ ׳›׳ ׳¡ ׳œ-transform ׳•׳œ׳ ׳œ׳ž׳©׳×׳ ׳”). */
    .pf-cap-title { font-size: calc(clamp(1.15rem, 3vw, 1.8rem) * var(--pf-tsm, 1) * var(--pf-t-scale, 1)); }
    .pf-cap-link  { font-size: calc(0.95rem * var(--pf-tsm, 1)); }
    .pf-cap-more  { font-size: calc(0.9rem * var(--pf-tsm, 1)); }
    /* **ההרמה חייבת להיכלל גם כאן.** הכלל הזה דרס את ‎margin-block-start‎ ובכך
       ביטל את ‎--pf-cap-lift‎ במובייל לגמרי (נמדד: המשתנה ‎-24px‎ וה-‎margin-top‎
       בפועל ‎0px‎) -ולכן השלט נשאר במקום שהזרימה נתנה לו, מתחת לקצה המסך, בעמוד
       שאינו נגלל. שריד מהפיצול מחשב/מובייל, שבוטל מזמן. */
    .pf-caption   { margin-block-start: calc(var(--pf-cap-lift, 0px) + var(--pf-tym, 0) * 0.12rem); }
    .pf-stage { padding-inline: 1.6rem; }
    /* ׳”׳ž׳—׳œ׳§׳” ׳”׳™׳ ג€Žpf-navm-*ג€Ž ׳‘׳ž׳•׳‘׳™׳™׳œ (׳”׳₪׳™׳¦׳•׳œ ׳œ׳ž׳—׳©׳‘/׳ž׳•׳‘׳™׳™׳œ) */
    .pf-navm-sides .pf-nav.pf-prev { inset-inline-start: -0.2rem; }
    .pf-navm-sides .pf-nav.pf-next { inset-inline-end: -0.2rem; }
}

/* ---- ׳ž׳™׳§׳•׳ ׳›׳₪׳×׳•׳¨׳™ ׳”׳ ׳™׳•׳•׳˜: ׳©׳•׳¨׳” ׳ ׳₪׳¨׳“׳× (top/bottom) ---- */
.pf-navrow { display: flex; align-items: center; justify-content: center; gap: 1.2rem; }
.pf-navrow .pf-nav { position: static; transform: none; top: auto; }
.pf-navrow .pf-nav:hover { transform: scale(1.08); }
.pf-navrow .pf-nav:active { transform: scale(0.96); }

/* ---- ׳©׳§׳•׳₪׳™׳•׳× ׳“׳ž׳•: ׳¨׳§׳¢ ׳’׳¨׳“׳™׳׳ ׳˜ ׳‘׳ž׳§׳•׳ ׳×׳ž׳•׳ ׳” ---- */
.pf-img-demo { display: block; }
.pf-grad-1 { background: linear-gradient(135deg, #1e3a8a, #0ea5e9 55%, #22d3ee); }
.pf-grad-2 { background: linear-gradient(135deg, #7c2d12, #ea580c 50%, #f59e0b); }
.pf-grad-3 { background: linear-gradient(135deg, #0b3d2e, #059669 55%, #34d399); }
.pf-grad-4 { background: linear-gradient(135deg, #3b0764, #7c3aed 50%, #c084fc); }
.pf-grad-5 { background: linear-gradient(135deg, #083344, #0891b2 50%, #67e8f9); }
.pf-grad-6 { background: linear-gradient(135deg, #7f1d1d, #dc2626 50%, #fb923c); }
.pf-reflection.pf-grad-1, .pf-reflection.pf-grad-2, .pf-reflection.pf-grad-3,
.pf-reflection.pf-grad-4, .pf-reflection.pf-grad-5, .pf-reflection.pf-grad-6 { background-image: none; }

/* ---- ׳×׳’ "׳ž׳¦׳‘ ׳”׳“׳’׳ž׳”" ---- */
.pf-demo-badge {
    display: inline-block; margin-top: 0.6rem;
    padding: 0.28rem 0.9rem; border-radius: 999px;
    font-size: 0.82rem; font-weight: 800;
    color: #16233e; background: linear-gradient(180deg, var(--c-gold-light, #ffe7a3), var(--c-gold, #ffd15a));
    border: 1px solid rgba(122, 79, 40, 0.5);
    box-shadow: 0 4px 12px rgba(13, 62, 120, 0.35);
}

/* ---- ׳”׳¢׳“׳₪׳× ׳×׳ ׳•׳¢׳” ׳ž׳•׳₪׳—׳×׳×: ׳‘׳œ׳™ ׳˜׳©׳˜׳•׳©/׳¡׳™׳‘׳•׳‘ ׳ž׳¡׳—׳¨׳¨, ׳ž׳¢׳‘׳¨׳™׳ ׳§׳¦׳¨׳™׳ ---- */
@media (prefers-reduced-motion: reduce) {
    .pf-slide { transition: transform 0.25s ease, opacity 0.25s ease; }
    .pf-reflection { display: none; }
}

/* ============================================================================
   ׳”׳×׳׳ž׳•׳× ׳œ׳₪׳™ ׳×׳‘׳ ׳™׳× (2-7). ׳ž׳ ׳•׳¢ ׳”-transform ׳‘-portfolio.js; ׳›׳׳Ÿ ׳”׳¨׳§׳¢/׳”׳¦׳•׳¨׳”/׳”׳₪׳¨׳¡׳₪׳§׳˜׳™׳‘׳”.
   ============================================================================ */
/* ׳”׳©׳×׳§׳₪׳•׳× ׳¨׳œ׳•׳•׳ ׳˜׳™׳× ׳¨׳§ ׳œ׳×׳‘׳ ׳™׳•׳× ׳”"׳©׳˜׳•׳—׳•׳×" (1/5/6); ׳‘׳˜׳‘׳¢׳×/׳¦׳™׳ ׳•׳¨/׳–׳¨׳§׳•׳¨/׳§׳™׳¨ ׳ž׳›׳‘׳™׳ */
.pf-tpl-2 .pf-reflection, .pf-tpl-3 .pf-reflection,
.pf-tpl-4 .pf-reflection, .pf-tpl-7 .pf-reflection { display: none; }

/* 2 -Classic: ׳§׳™׳¨ ׳ž׳¢׳•׳§׳œ, ׳™׳•׳×׳¨ ׳©׳§׳•׳₪׳™׳•׳× ׳’׳œ׳•׳™׳•׳× -׳₪׳¨׳¡׳₪׳§׳˜׳™׳‘׳” ׳—׳–׳§׳” ׳œ׳§׳™׳₪׳•׳œ ׳“׳¨׳ž׳˜׳™ */
.pf-tpl-2 .pf-stage { perspective: 1300px; }
/* ‎--pf-vcap‎: תקרת הגובה לפי החלון, ביחס לתקרת ה-‎clamp‎ כאן (ראה ‎.pf-viewport‎) */
.pf-tpl-2 .pf-viewport { height: clamp(240px, 40vw, 480px); --pf-vcap: 52; }

/* 3 -Circle: ׳˜׳‘׳¢׳×. ׳₪׳¨׳¡׳₪׳§׳˜׳™׳‘׳” ׳¢׳ž׳•׳§׳”, ׳–׳•׳”׳¨ ׳ ׳™׳׳•׳Ÿ, ׳¨׳¦׳₪׳” ׳ž׳©׳×׳§׳₪׳× */
.pf-tpl-3 .pf-stage { perspective: 1500px; perspective-origin: 50% 50%; }
.pf-tpl-3 .pf-viewport { overflow: visible; }
.pf-tpl-3 .pf-frame { border-width: 2px; border-color: rgba(120, 230, 255, 0.6); box-shadow: 0 0 22px rgba(80, 210, 255, 0.4), 0 20px 40px -12px rgba(2, 8, 22, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.pf-tpl-3 .pf-slide.pf-active .pf-frame { border-color: rgba(150, 240, 255, 0.95); box-shadow: 0 0 34px rgba(90, 220, 255, 0.65), 0 26px 50px -14px rgba(2, 8, 22, 0.85); }
.pf-tpl-3 .pf-stage::after {   /* ׳¨׳¦׳₪׳” ׳ž׳©׳×׳§׳₪׳× ׳ž׳×׳—׳× ׳œ׳˜׳‘׳¢׳× */
    content: ''; position: absolute; left: 50%; bottom: 4%;
    width: min(80%, 900px); height: 40px; transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(120, 230, 255, 0.28), transparent 70%);
    filter: blur(6px); pointer-events: none;
}

/* 4 -Hurricane: ׳¦׳™׳ ׳•׳¨ ׳׳ ׳›׳™ -׳’׳‘׳•׳” ׳™׳•׳×׳¨, ׳ ׳™׳•׳•׳˜ ׳׳ ׳›׳™, ׳—׳™׳¦׳™׳ ׳ž׳¡׳•׳‘׳‘׳™׳ */
.pf-tpl-4 .pf-stage { perspective: 1350px; perspective-origin: 50% 50%; }   /* ׳¦׳™׳œ׳™׳ ׳“׳¨ ׳׳ ׳›׳™ -׳ž׳¨׳›׳– ׳¡׳™׳ž׳˜׳¨׳™ */
/* ‎pinch-zoom‎ ולא ‎none‎: הצינור תופס את הציר האנכי למחווה שלו, אבל צביטה
   חייבת להישאר (ראה ההערה ב-‎.pf-viewport‎). כשהעמוד נעול הכלל למעלה מחזיר
   אותו ל-‎none‎. */
.pf-tpl-4 .pf-viewport { height: clamp(360px, 62vw, 640px); --pf-vcap: 69; overflow: visible; touch-action: pinch-zoom;
    /* ׳‘׳œ׳™ ׳”׳˜׳™׳™׳× ׳₪׳œ׳˜׳₪׳•׳¨׳ž׳” -׳”׳™׳ ׳ž׳×׳ ׳’׳©׳× ׳¢׳ ׳”׳¦׳™׳œ׳™׳ ׳“׳¨ ׳”׳׳ ׳›׳™ */
    transform: translate(var(--pf-ox, 0%), var(--pf-oy, 0%)) scale(var(--pf-w, 1), var(--pf-h, 1)); }
@media (max-width: 640px) { .pf-tpl-4 .pf-viewport { transform: translate(var(--pf-oxm, 0%), var(--pf-oym, 0%)) scale(var(--pf-wm, 1), var(--pf-hm, 1)); } }
.pf-tpl-4 .pf-nav svg { transform: rotate(90deg); }

/* 5 -Straight: ׳§׳•׳ ׳¡׳•׳œ׳” ׳©׳˜׳•׳—׳”, ׳›׳”׳” ׳•׳ ׳§׳™׳™׳” */
.pf-tpl-5 .pf-frame { border-radius: clamp(10px, 1.3vw, 16px); }
.pf-tpl-5 .pf-slide.pf-active .pf-frame { box-shadow: 0 30px 60px -16px rgba(2, 8, 22, 0.8), 0 0 0 1px rgba(255, 231, 163, 0.4); }

/* 6 -My Portfolio: ׳©׳‘׳™׳œ -׳₪׳¨׳¡׳₪׳§׳˜׳™׳‘׳” ׳ ׳ž׳•׳›׳” ׳ž׳”׳¦׳“ */
.pf-tpl-6 .pf-stage { perspective: 1050px; perspective-origin: 50% 60%; }
.pf-tpl-6 .pf-viewport { overflow: visible; }

/* 7 -Spotlight: ׳₪׳¨׳•׳™׳§׳˜ ׳׳—׳“ ׳’׳“׳•׳œ ׳‘׳ž׳¨׳›׳– */
/* **הקלף כאן רחב מהבמה בכוונה** (ספוטלייט -פרויקט אחד גדול), ולכן הוא חורג
   ממנה למעלה ולמטה. במסך נמוך זה מה שנחתך גם אחרי שהבמה כווצה - נמדד ‎-10px‎
   ב-iPad landscape אחרי התקרה, ו-‎-76‎ לפניה - ולכן גם רוחבו נגזר מהגובה
   הפנוי. ‎88dvh‎ נמדד כערך שאינו נוגע במחשב: ב-1500x950 ו-1920x1080 הוא מעל
   תקרת ה-‎clamp‎ (820px) ולכן אינו משנה דבר. */
.pf-tpl-7 .pf-slide { width: clamp(280px, 62vw, 820px); }
.pf-tpl-7 .pf-slide { width: clamp(280px, min(62vw, 88dvh), 820px); }
.pf-tpl-7 .pf-viewport { height: clamp(240px, 42vw, 520px); --pf-vcap: 56; }
.pf-tpl-7 .pf-frame-glow { opacity: 0.3; }

/* ---- ׳”׳•׳“׳¢׳× ׳ž׳“׳™׳ ׳™׳•׳× ׳₪׳¨׳˜׳™׳•׳× ׳—׳“-׳₪׳¢׳ž׳™׳× (׳‘׳›׳ ׳™׳¡׳” ׳œ׳׳×׳¨) ----
   ׳©׳›׳‘׳×-׳¢׳œ ׳¢׳ ׳¨׳§׳¢ ׳ž׳•׳—׳©׳š ׳©׳¢׳•׳¦׳ž׳×׳• ׳ ׳©׳œ׳˜׳× ׳‘---priv-op (׳ž׳”׳ ׳™׳”׳•׳œ), ׳•׳§׳œ׳£ ׳‘׳¡׳’׳ ׳•׳Ÿ ׳”׳׳×׳¨. */
.privacy-notice {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: clamp(0.8rem, 3vw, 2rem);
    background: rgba(6, 20, 40, calc(var(--priv-op, 0.55)));
    animation: priv-fade 0.3s ease both;
}
.privacy-notice[hidden] { display: none; }
@keyframes priv-fade { from { opacity: 0; } to { opacity: 1; } }
.privacy-card {
    width: min(40rem, 100%);
    background: linear-gradient(180deg, #fff6e6, #fff0d6);
    border: 2px solid #D39A1A;
    border-radius: 16px;
    padding: 1.1rem 1.3rem;
    color: #4a3620;
    box-shadow: 0 16px 40px rgba(6, 20, 40, 0.5), inset 0 1px 0 #fff;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    animation: priv-rise 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes priv-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.privacy-body {
    flex: 1 1 16rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}
.privacy-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}
/* ׳§׳™׳©׳•׳¨ ׳œ׳ž׳¡׳ž׳š ׳ž׳“׳™׳ ׳™׳•׳× ׳”׳₪׳¨׳˜׳™׳•׳× (׳₪׳•׳×׳— ׳׳× ׳”׳ž׳’׳™׳œ׳”) -׳§׳™׳©׳•׳¨ ׳ž׳¡׳•׳ž׳Ÿ ׳‘׳§׳• ׳×׳—׳×׳•׳Ÿ */
.privacy-link {
    padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-weight: 700;
    color: #a9700e;
    text-decoration: underline; text-underline-offset: 3px;
}
.privacy-link[hidden] { display: none; }
.privacy-link:hover { color: #5A381E; }
.privacy-link:focus-visible { outline: 2px solid #D39A1A; outline-offset: 3px; border-radius: 4px; }
.privacy-ok {
    flex: 0 0 auto;
    padding: 0.6rem 1.4rem;
    border: 1px solid #b8841e;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.98rem;
    color: #5A381E;
    background: linear-gradient(180deg, #FFE7A3, #FFD15A 55%, #D39A1A);
    box-shadow: 0 3px 0 #8a5f22, inset 0 1px 0 #fff;
    transition: transform 0.15s, filter 0.2s;
}
.privacy-ok:hover { filter: brightness(1.05); transform: translateY(-1px); }
.privacy-ok:active { transform: translateY(2px); box-shadow: 0 1px 0 #8a5f22; }
@media (max-width: 640px) {
    .privacy-card { flex-direction: column; align-items: stretch; text-align: center; gap: 0.9rem; padding: 1rem 1.1rem; }
    /* ׳‘׳¢׳ž׳•׳“׳”, flex-basis:16rem ׳”׳•׳₪׳š ׳œ**׳’׳•׳‘׳”** (256px) ׳•-flex-grow ׳ž׳•׳×׳— ׳׳× ׳”׳›׳¨׳˜׳™׳¡
       ׳œ׳’׳•׳‘׳” ׳¢׳ ׳§. flex:0 0 auto ׳ž׳—׳–׳™׳¨ ׳׳•׳×׳• ׳œ׳”׳™׳¦׳ž׳“ ׳œ׳×׳•׳›׳Ÿ. */
    .privacy-body { flex: 0 0 auto; align-items: center; }
    .privacy-ok { width: 100%; }
}

/* ================= התמונות שבתוך התיאור: התאמה ואנימציה =================
   **אלה לא התמונה הראשית.** הראשית היא ‎.pf-detail-media‎ ונשלטת ב-‎coverFit‎;
   כאן מדובר בתמונות שהוטמעו בגוף התיאור בעורך, ותיאור שכולו תמונות הופך
   לגלריה. פרויקט יכול להציג את אלה בזמן ש"הצגת התמונה בתיאור" כבוי לגמרי -
   ולכן הן צריכות הגדרות משלהן.

   **הסלקטור נושא מחלקה נוספת על אותו אלמנט** (‎(0,3,1)‎ מול ‎(0,2,1)‎): הכללים
   של הגלריה מגדירים ‎object-fit: contain‎ ואנימציית Ken Burns, ובאותה
   specificity ההכרעה הייתה נופלת על סדר השורות בקובץ - בדיוק המלכודת שכבר
   תועדה כאן על ‎.pf-detail-text img‎. */
.pf-gal .pf-gal-stage.pf-gfit-cover img,
.pf-gal .pf-gal-one.pf-gfit-cover img   { object-fit: cover; }
.pf-gal .pf-gal-stage.pf-gfit-contain img,
.pf-gal .pf-gal-one.pf-gfit-contain img { object-fit: contain; }
.pf-gal .pf-gal-stage.pf-gfit-fill img,
.pf-gal .pf-gal-one.pf-gfit-fill img    { object-fit: fill; }
.pf-gal .pf-gal-stage.pf-gfit-none img,
.pf-gal .pf-gal-one.pf-gfit-none img    { object-fit: none; }

/* אנימציה. ‎none‎ מכבה במפורש את ה-Ken Burns שתמונה יחידה מקבלת מאז ומתמיד;
   בלי בחירה כלל שום מחלקה אינה מוחלת והמראה נשאר כפי שהיה. */
.pf-gal .pf-gal-stage.pf-ganim-none img,
.pf-gal .pf-gal-one.pf-ganim-none img     { animation: none; }
.pf-gal .pf-gal-stage.pf-ganim-fade img,
.pf-gal .pf-gal-one.pf-ganim-fade img     { animation: pf-ci-fade 0.7s ease both; }
.pf-gal .pf-gal-stage.pf-ganim-zoom img,
.pf-gal .pf-gal-one.pf-ganim-zoom img     { animation: pf-ci-zoom 0.8s cubic-bezier(0.22, 0.61, 0.24, 1) both; }
.pf-gal .pf-gal-stage.pf-ganim-rise img,
.pf-gal .pf-gal-one.pf-ganim-rise img     { animation: pf-ci-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.pf-gal .pf-gal-stage.pf-ganim-tilt img,
.pf-gal .pf-gal-one.pf-ganim-tilt img     { animation: pf-ci-tilt 0.85s cubic-bezier(0.22, 0.61, 0.24, 1) both; }
.pf-gal .pf-gal-stage.pf-ganim-kenburns img,
.pf-gal .pf-gal-one.pf-ganim-kenburns img { animation: pf-ci-kb 22s ease-in-out infinite alternate; }
.pf-gal .pf-gal-stage.pf-ganim-shine,
.pf-gal .pf-gal-one.pf-ganim-shine        { position: relative; }
.pf-gal .pf-gal-stage.pf-ganim-shine::after,
.pf-gal .pf-gal-one.pf-ganim-shine::after {
    content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.42) 50%, transparent 62%);
    transform: translateX(-120%);
    animation: pf-ci-shine 1.5s ease-out 0.25s both;
}
@media (prefers-reduced-motion: reduce) {
    .pf-gal .pf-gal-stage[class*="pf-ganim-"] img,
    .pf-gal .pf-gal-one[class*="pf-ganim-"] img { animation: none; }
    .pf-gal .pf-gal-stage.pf-ganim-shine::after,
    .pf-gal .pf-gal-one.pf-ganim-shine::after { animation: none; opacity: 0; }
}

/* ================= לייטבוקס לתמונות שבכרטיס הפרויקט =================
   אותה אנטומיה של ההגדלה בספריית המדיה שבניהול (‎.media-zoom-*‎), בצבעי האתר.
   שלושה דברים כאן נקנו שם בבאגים ואסור לחזור עליהם:

   1. ‎minmax(0, 1fr)‎ ולא ‎1fr‎ בשורת הבמה. ‎1fr‎ הוא ‎minmax(auto, 1fr)‎, כלומר
      השורה אינה יורדת מתחת לגובה התוכן -ותמונה גבוהה מהמסך פשוט גולשת החוצה.
   2. ‎align-self/justify-self: stretch‎ על הבמה, שדורסים את ‎place-items: center‎
      של השכבה. בלעדיהם גובה הבמה הוא ‎auto‎, ו-‎max-height: 100%‎ של התמונה
      נמדד מול ‎auto‎ -כלומר אינו מגביל דבר.
   3. התמונה ‎position: absolute‎ בתוך במה ‎relative‎. ‎max-height: 100%‎ על פריט
      grid רגיל נמדד מול גובה שנחשב "לא מוגדר" בזמן חישוב הגודל הפנימי. */
.pf-lb {
    /* **מעל כרטיס הפרטים (‎z-index: 210‎) ולא מתחתיו.** נמדד: הלייטבוקס נפתח
       (‎hidden: false‎) אבל הצילום הראה את הכרטיס - הוא צויר מאחוריו וכל
       הפיצ'ר נראה כאילו אינו עובד. אותה מלכודת בדיוק שכבר תועדה כאן על
       דיאלוג מחיקת המדיה מול בורר התמונות בניהול. */
    /* **מעל שכבות הניהול, לא רק מעל כרטיס הפרויקט.** באתר מספיק היה לעבור
       את ‎.pf-detail‎ (210), אבל הלייטבוקס משמש גם כתצוגה המקדימה בספריית
       המדיה - ושם הוא נפתח מתוך דיאלוגים שיושבים ב-220 עד 240 וצויר מאחוריהם.
       250 מעל כולם, וזו אותה מלכודת שכבר תועדה כאן על דיאלוג מחיקת המדיה. */
    position: fixed; inset: 0; z-index: 250;
    display: grid; place-items: center; gap: 0.7rem;
    grid-template-rows: minmax(0, 1fr) auto;
    /* הריפוד יושב במשתנה כי החיצים (שילדי ה**במה**) מקזזים אותו כדי להישאר
       בדיוק במקום שבו היו כשהיו ילדי השכבה -ראה ‎.pf-lb-prev/next‎ */
    --pf-lb-pad: clamp(1rem, 4vw, 3rem);
    padding: var(--pf-lb-pad);
    background: rgba(4, 12, 28, var(--pf-lb-op, 0.92));
    animation: pf-lb-in 0.2s ease both;
    pointer-events: auto;
}
.pf-lb[hidden] { display: none; }
.pf-lb.pf-lb-blur { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
@keyframes pf-lb-in { from { opacity: 0; } to { opacity: 1; } }
.pf-lb-stage { position: relative; align-self: stretch; justify-self: stretch; min-width: 0; min-height: 0; }
.pf-lb-img {
    position: absolute; inset: 0; margin: auto;
    width: auto; height: auto; max-width: 100%; max-height: 100%;
    object-fit: contain; border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
    animation: pf-ci-zoom 0.35s cubic-bezier(0.22, 0.61, 0.24, 1) both;
}
/* שורת המידע: כיתוב ומונה ברצועה אחת, כמו בניהול */
.pf-lb-bar {
    display: flex; align-items: center; gap: 0.9rem;
    max-width: 100%; padding: 0.4rem 1rem; border-radius: 999px;
    background: rgba(8, 20, 38, 0.72);
    border: 1px solid rgba(255, 231, 163, 0.3);
}
.pf-lb-bar:empty, .pf-lb-bar.is-empty { display: none; }
.pf-lb-cap { font-size: 0.85rem; color: rgba(255, 246, 230, 0.9); overflow-wrap: anywhere; }
.pf-lb-cap:empty { display: none; }
.pf-lb-count { font-size: 0.8rem; font-weight: 800; color: var(--c-gold, #ffd15a); direction: ltr; white-space: nowrap; }
.pf-lb-count:empty { display: none; }
.pf-lb-x {
    position: absolute; top: clamp(0.6rem, 2vw, 1.2rem); inset-inline-start: clamp(0.6rem, 2vw, 1.2rem);
    z-index: 3; width: 2.6rem; height: 2.6rem;
    display: grid; place-items: center; cursor: pointer;
    border-radius: 50%; color: #fff6e6;
    background: rgba(7, 24, 47, 0.75); border: 1.5px solid rgba(255, 231, 163, 0.45);
    transition: background 0.2s ease, transform 0.2s ease;
}
.pf-lb-x svg { width: 55%; height: 55%; }
.pf-lb-x:hover { background: rgba(14, 40, 74, 0.92); transform: scale(1.06); }
/* חיצי הדפדוף מוצגים רק כשיש יותר מתמונה אחת -שני כפתורים מתים נקראים כתקלה.
   הרוחב יושב במשתנה כי הוא נכנס גם לחישוב המיקום במצב וידאו (זוג ממורכז),
   ושני מספרים נפרדים היו מתפצלים בשינוי הבא. */
.pf-lb { --pf-lb-nav-w: 3rem; }
.pf-lb-nav {
    /* מעל הנגן (4) ומעל לוכד ההחלקה (5) -שניהם יושבים באותה במה */
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
    width: var(--pf-lb-nav-w); height: var(--pf-lb-nav-w); display: none; place-items: center; cursor: pointer;
    border-radius: 50%; color: #fff6e6;
    background: rgba(7, 24, 47, 0.72); border: 1.5px solid rgba(255, 231, 163, 0.45);
    transition: background 0.2s ease, transform 0.2s ease;
}
.pf-lb-nav svg { width: 55%; height: 55%; }
.pf-lb.has-many .pf-lb-nav { display: grid; }
/* אותו צד בדיוק של החיצים בקרוסלה ושל ההגדלה בניהול: ב-RTL "הקודמת" יושבת
   מימין ומצביעה ימינה, "הבאה" משמאל ומצביעה שמאלה. היה כאן הפוך, וזה נקרא
   כשני חצים שמצביעים זה אל זה. */
/* **קיזוז הריפוד.** החיצים עברו להיות ילדי הבמה (כדי שבמצב וידאו אפשר יהיה
   להוריד אותם מתחת לנגן), והבמה מתחילה אחרי ריפוד השכבה - בלי הקיזוז הם נעו
   פנימה, נמדד 48px בדסקטופ. עם הקיזוז מצב התמונה נשאר במיקום האופקי המדויק
   שהיה לו קודם. */
.pf-lb-prev { inset-inline-start: calc(clamp(0.5rem, 2vw, 1.4rem) - var(--pf-lb-pad)); }
.pf-lb-next { inset-inline-end: calc(clamp(0.5rem, 2vw, 1.4rem) - var(--pf-lb-pad)); }
.pf-lb-nav:hover { background: rgba(14, 40, 74, 0.92); transform: translateY(-50%) scale(1.06); }
/* ---- סרטון בלייטבוקס ----
   הנגן מוזרק לתוך ‎.pf-lb-stage‎ (אותו ‎__wgPlayer.build‎ של הגלריה), ולכן די
   כאן בגאומטריה: יחס 16:9 בתוך גבולות הבמה, ממורכז.
   **‎max-width/max-height‎ ולא ‎inset: 0‎** -הנגן אינו תמונה שמתאימה את עצמה,
   ובלי תקרה הוא היה נמתח על כל הבמה ומקבל פרופורציה שרירותית. */
/* **במצב וידאו החיצים יורדים אל מתחת לנגן.** ה-‎<iframe>‎ מכסה את כל רוחב
   הבמה, ולכן חץ שיושב בצד נחבא מאחוריו לגמרי - נמדד באייפון ש-
   ‎elementFromPoint‎ במרכז החץ מחזיר ‎IFRAME‎, כלומר הנגיעה נוחתת על יוטיוב
   ולא על כפתור הניווט (ובדסקטופ חפיפה של 22px מתוך 48). הבמה שומרת להם
   רצועה בריפוד התחתון, והנגן מתכווץ אליה מעצמו כי הוא ממורכז בתיבת התוכן. */
/* **‎container-type: size‎ ולא ניחוש של הגובה הפנוי.** הרוחב של הנגן נגזר
   מהגובה שנשאר לו, וכל עוד הוא חושב מ-‎100vh‎ פחות קבוע הוא **החטיא**: נמדד
   שהקבוע 8rem נתן 822px בעוד שהגובה בפועל היה 745, ולכן ‎max-height‎ כיווץ את
   הגובה בזמן שהרוחב נשאר -כלומר הפרופורציה נשברה בכל אחת מהצורות (16:9 יצא
   1.885, 1:1 יצא 1.104). ‎100cqh‎ הוא תיבת התוכן של הבמה עצמה, כלומר המספר
   האמיתי. הבמה היא ‎1fr‎ ברשת השכבה, ולכן גודלה מוגדר ואינו תלוי בתוכן -
   התנאי לשימוש ב-‎size‎. חל **רק במצב וידאו**, שלא לגעת בתמונות. */
.pf-lb.is-video .pf-lb-stage {
    display: grid; place-items: center; padding-bottom: 3.9rem;
    container-type: size;
}
.pf-lb.is-video .pf-lb-nav {
    top: auto; bottom: 0; transform: none;
    /* זוג ממורכז מתחת לנגן. ‎inset-inline‎ ולא ‎left/right‎: ב-RTL "הקודמת"
       יושבת מימין, וזה בדיוק מה שהמאפיין הלוגי נותן. */
    inset-inline-end: auto; inset-inline-start: auto;
}
.pf-lb.is-video .pf-lb-prev { inset-inline-start: calc(50% - var(--pf-lb-nav-w) - 0.45rem); }
.pf-lb.is-video .pf-lb-next { inset-inline-end: calc(50% - var(--pf-lb-nav-w) - 0.45rem); }
.pf-lb.is-video .pf-lb-nav:hover { transform: scale(1.06); }
/* **צורת הנגן וגודלו הם משתנים ולא מספרים קשיחים** (ניהול ← לייטבוקס ←
   סרטונים). ‎--pf-lb-vr‎ משרת גם את ה-‎aspect-ratio‎ וגם את חישוב הרוחב
   שנגזר מהגובה הפנוי, ולכן שני המספרים לעולם אינם מתפצלים: הצבה של
   ‎16 / 9‎ נותנת ‎calc((100vh - 8rem) * 16 / 9)‎ שהוא ביטוי תקין, כי משתנה
   מוצב כרצף טוקנים לפני הפרסור. ריל וטיקטוק הם ‎9 / 16‎. */
.pf-lb { --pf-lb-vr: 16 / 9; --pf-lb-vw: 100%; }
.pf-lb.is-video .wg-player {
    position: relative;
    inset: auto;
    width: min(var(--pf-lb-vw), calc(100cqh * var(--pf-lb-vr)));
    max-width: 100%;
    aspect-ratio: var(--pf-lb-vr);
    max-height: 100%;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
    animation: pf-ci-zoom 0.35s cubic-bezier(0.22, 0.61, 0.24, 1) both;
}
/* "מילוי" = הנגן מקבל את תיבת הבמה כפי שהיא, בלי פרופורציה משלו */
.pf-lb.is-video.pf-lb-vfill .wg-player { width: var(--pf-lb-vw); height: 100%; aspect-ratio: auto; }
/* ---- לוכד ההחלקה שמעל הנגן ----
   ‎<iframe>‎ בולע את המגע, ולכן החלקה שמתחילה על הסרטון לא מגיעה לדף כלל -
   נמדד: אפס פריימים שבהם הבמה זזה, בדיוק במקום שבו האצבע מונחת באופן טבעי.
   השכבה הזאת יושבת מעליו כ**אח** של הנגן (ולא בתוכו), ולכן המאזין שמדלג על
   ‎.wg-player‎ ממשיך לרוץ והגרירה עובדת. היא נעלמת בנגיעה הראשונה כדי
   שהשליטה בנגן תחזור אליו. z נמוך מהחיצים, שאסור שייחסמו. */
/* **‎z-index: 5‎ ולא 2** -ל-‎.wg-player‎ עצמו יש 4 (הוא נבנה כשכבה מעל אריח
   הגלריה), ולכן לוכד נמוך ממנו יושב מתחת ל-‎<iframe>‎ ואינו לוכד דבר. נמדד:
   ‎elementFromPoint‎ במרכז הסרטון החזיר ‎IFRAME‎ למרות שהלוכד היה בעץ. */
.pf-lb-vcatch { position: absolute; inset: 0; z-index: 5; background: transparent; }
@media (prefers-reduced-motion: reduce) { .pf-lb.is-video .wg-player { animation: none; } }
/* במגע אין hover, והחיצים הם דרך הניווט היחידה -ולכן הם מלאים תמיד */
@media (pointer: coarse) { .pf-lb-nav, .pf-lb-x { background: rgba(7, 24, 47, 0.9); } }
/* התמונה שאפשר לפתוח בלייטבוקס מסמנת את עצמה */
.pf-lb-able { cursor: zoom-in; }
@media (prefers-reduced-motion: reduce) {
    .pf-lb { animation: none; }
    .pf-lb-img { animation: none; }
}
/* מובייל: הכפתורים קטנים יותר והריפוד צר, אחרת הבמה כמעט נעלמת */
@media (max-width: 640px) {
    .pf-lb { --pf-lb-pad: 0.7rem; gap: 0.5rem; --pf-lb-nav-w: 2.5rem; }
    .pf-lb-x { width: 2.3rem; height: 2.3rem; }
    .pf-lb-cap { font-size: 0.78rem; }
    .pf-lb.is-video .pf-lb-stage { padding-bottom: 3.3rem; }
}

/* התמונות בכרטיס מסמנות שאפשר להגדיל אותן. המחלקה על הכרטיס ולא על
   ‎.pf-page‎: ה-JS מעביר אותו ל-‎body‎ ומרגע זה הוא אינו יורש ממנו כלום.
   הממוזערות של הגלריה מוחרגות -הן ניווט, לא תוכן להגדלה. */
.pf-detail.pf-lb-on .pf-detail-text img,
.pf-detail.pf-lb-on .pf-detail-img { cursor: zoom-in; }
.pf-detail.pf-lb-on .pf-gal-thumbs img { cursor: pointer; }

/* ============================================================
   גלריית עבודות (‎.works-gal‎) -בלוק אחד שמוצג בכל מקום
   ============================================================
   **למה בלוק HTML ולא מבנה נתונים ייעודי:** הגלריה נדרשה גם בתיאור פרויקט
   וגם בעמוד רגיל. מבנה נתונים היה מחייב שני מסלולי שמירה, שני רנדררים ושני
   עורכים -שיתפצלו בשינוי הראשון. בלוק שנשמר בתוך התוכן עצמו עובר דרך
   ‎pages_sanitize_html‎ הקיים (שמשאיר ‎class‎ ו-‎data-*‎), נערך באותו דיאלוג,
   ומוצג באותם כללים.
   הכללים מוגדרים ב**כל ארבעת ההקשרים** -אחרת הגלריה נראית בעורך ונעלמת
   באתר, בדיוק כמו שקרה כאן ב-float של יישור התמונה. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal {
    display: grid;
    /* ‎auto-fill‎ ולא ‎auto-fit‎: ‎auto-fit‎ מותח פריט בודד על כל הרוחב, ותמונה
       אחת בגלריה נראית אז כתמונה ראשית ענקית ולא כפריט בגלריה. */
    /* **הגודל נמדד מול המיכל ולא מול המסך.** קלף התוכן באתר הזה צר (נמדד
       346px בדסקטופ), ו-‎15rem‎ נתן שם **עמודה אחת** -כלומר "גלריה" שהיא
       בעצם תמונות בזו אחר זו. הערכים נבחרו כך שבקלף הצר יוצא 3/2/1 עמודות
       (קטן/בינוני/גדול), ובקלף רחב הם ממשיכים להתמלא מעצמם. */
    /* **‎auto-fit‎ עם תקרה לפריט, ולא ‎auto-fill‎ ולא ‎1fr‎.** ‎auto-fill‎ יוצר
       מסילות גם כשאין מה למלא אותן, ובחלון רחב זה השאיר שתי עמודות ריקות
       בצד -נראה כשגיאת פריסה. ‎auto-fit‎ מקפל אותן, אבל עם ‎1fr‎ הוא מותח
       פריט **בודד** על כל הרוחב, ותמונה אחת נראית אז כתמונה ראשית ענקית.
       התקרה (‎--wg-max‎) פותרת את שניהם, ו-‎justify-content: center‎ ממרכז
       את השורה החלקית האחרונה. */
    /* **‎1fr‎ ולא ‎--wg-max‎ במסילה.** ‎repeat(auto-fit, minmax(a, b))‎ סופר את
       מספר המסילות לפי ה-‎b‎ כשהוא אורך מוגדר -כלומר תקרה של 12rem הפכה
       למסילה **קבועה** של 12rem, ובמובייל זה נתן עמודה אחת במקום שתיים
       (נמדד: ‎grid-template-columns: 192px‎ ברוחב פנוי של 347). לכן הספירה
       חוזרת ל-‎1fr‎ (נגזרת מה-‎min‎), והתקרה עברה אל **הפריט** -כך גם תמונה
       בודדת אינה נמתחת על כל הרוחב. */
    grid-template-columns: repeat(auto-fit, minmax(min(var(--wg-min, 8.5rem), 100%), 1fr));
    justify-content: center;
    gap: var(--wg-gap, 1rem);
    margin: 1.4rem auto;
    max-width: 70rem;
    padding: 0;
    list-style: none;
    clear: both;
}
/* **התקרות הועלו.** ‎--wg-max‎ מונע מתמונה בודדת להימתח על כל הרוחב, אבל
   הערכים הישנים (11/15/22rem) היו נמוכים מכדי שההבדל ייקרא: נמדד שבחלון
   הגלריה שברוחב 1115px "גדול" נתן פריט של 352px, כלומר שליש -ומי שבחר
   "תמונה גדולה" ראה תמונה קטנה עם הרבה רקע סביבה. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-size="s"] { --wg-min: 6.5rem; --wg-max: 13rem; --wg-gap: 0.7rem; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-size="l"] { --wg-min: 15rem; --wg-max: 32rem; --wg-gap: 1.3rem; }

/* ---- תמונה שכובתה בדיאלוג (מתג פר-תמונה) ----
   הפריט נשאר ב-HTML כי הוא מקור-האמת של הגלריה (ראה ‎wgBuild‎ ב-admin.js),
   ולכן ההסתרה נעשית כאן. ‎display: none‎ ולא ‎visibility‎/‎opacity‎: זו רשת
   ‎grid‎, ופריט מוסתר-אך-קיים היה משאיר משבצת ריקה באמצע -וזה נקרא כתקלת
   פריסה ולא כתמונה שכובתה. ה-‎<img>‎ שבתוכו ממילא נפלט בלי ‎src‎, כך שגם
   ההורדה נחסכת ולא רק התצוגה.
   **הכלל חייב לשבת לפני כלל הפריט הרגיל** -שניהם באותה specificity, ולכן
   מי שמאוחר יותר מנצח; ‎[data-wg-off]‎ הוא (0,2,0)+‎:is()‎ מול (0,1,0)+‎:is()‎
   של הפריט, כלומר הוא גובר ממילא -אבל אין סיבה להסתמך על זה כשאפשר גם סדר. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-item[data-wg-off] { display: none; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    text-decoration: none;
    /* **הפריט עצמו שקוף.** רקע כהה קבוע נראה טוב על כרטיס הפרויקט הכהה,
       ועל קלף הקלף הבהיר של עמוד CMS הוא יוצא חום-אפרפר עכור מאחורי כל
       תמונה. המסגרת, העיגול והצל עברו ל-‎.works-thumb‎ (התמונה), והכיתוב
       יורש את צבע המיכל -כך הבלוק נראה נכון בשני הרקעים בלי שני עיצובים. */
    color: inherit;
    background: none;
    border: 0;
    width: 100%;
    max-width: var(--wg-max, 15rem);
    justify-self: center;
    /* ‎transform‎ ו-‎box-shadow‎ בלבד -שניהם רצים ב-compositor. ‎filter‎ על
       פריט גדול מכריח רסטור מחדש בכל פריים, וזה כבר נמדד כאן כיקר. */
    transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.3, 1),
                box-shadow 0.28s ease, border-color 0.28s ease;
    isolation: isolate;
}
/* **התיבה בפרופורציה קבועה.** תמונות בגדלים שונים היו יוצרות רשת משוננת
   שגובה כל שורה בה נקבע לפי התמונה הגבוהה ביותר -וזה נקרא כתקלה ולא כגלריה. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-thumb {
    display: block;
    position: relative;
    aspect-ratio: var(--wg-ratio, 4 / 3);
    overflow: hidden;
    border-radius: 14px;
    /* **בלי מילוי מתחת לתמונה.** היה כאן ‎rgba(8, 20, 40, 0.35)‎ כרקע
       לתמונה שאינה ממלאת את האריח, אבל מילוי מתחת לתמונה הוא בדיוק מה
       שהופך שקיפות לבלתי אפשרית: תמונה עם ערוץ אלפא הראתה אותו דרך
       האזורים השקופים, ועל עורך בהיר הוא מתחבר לאפור-כחלחל ‎rgb(168,173,180)‎ -
       בדיוק מה שדווח כ"הרקע השקוף הופך לאפור".
       ההתאמה ברירת המחדל היא ‎cover‎, ולכן ברוב האריחים הרקע ממילא לא נראה
       מעולם; והאריח ממשיך להיקרא כאריח מהמסגרת, מהעיגול ומהצל. */
    /* **בלי מסגרת כברירת מחדל.** הייתה כאן ‎1px‎ חומה קבועה, ובורר המסגרת
       פתח על "רגילה" -כלומר מי שלא בחר מסגרת קיבל מסגרת, ובצדק קרא לזה
       "יש מסגרת למרות שלא מסומן". היום ברירת המחדל היא ללא, ו"רגילה" היא
       בחירה מפורשת (‎data-wg-frame="plain"‎). */
    border: 0;
    box-shadow: 0 10px 26px -14px rgba(2, 8, 22, 0.85);
    transition: border-color 0.28s ease, box-shadow 0.28s ease;
}
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-ratio="square"] { --wg-ratio: 1 / 1; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-ratio="wide"]   { --wg-ratio: 16 / 9; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-ratio="tall"]   { --wg-ratio: 3 / 4; }
/* ‎auto‎ = גובה טבעי; אז אין ‎aspect-ratio‎ והרשת נעשית masonry-למראה */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-ratio="auto"] .works-thumb { aspect-ratio: auto; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* ההגדלה ב-hover יושבת על התמונה ולא על הפריט, כך שהמסגרת והכיתוב
       נשארים במקומם והתמונה זזה בתוכם -אחרת כל הכרטיס "נושם" והרשת רועדת. */
    transition: transform 0.5s cubic-bezier(0.22, 0.9, 0.3, 1);
    margin: 0;
    border: 0;
    border-radius: 0;
}
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-ratio="auto"] .works-item img { height: auto; }

/* ---- שורת סינון התגיות ----
   **אותו עיצוב של הצ'יפים בתיק העבודות** (‎.pf-chip‎), כי זו אותה פעולה
   בדיוק ואין סיבה שתיראה אחרת. ההבדל היחיד הוא ההקשר: כאן הצבעים נגזרים
   מהמיכל (‎--wg-cap-t‎), כדי שהשורה תיקרא גם על קלף בהיר של עמוד CMS וגם
   על הכרטיס הכהה -אותו שיקול שכבר הכריע בכיתוב של הגלריה.
   ‎grid-column: 1 / -1‎ חובה: הרשת היא ‎grid‎, ובלעדיו השורה הייתה נכנסת
   כפריט ותופסת משבצת של תמונה. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .wg-filters {
    grid-column: 1 / -1;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem;
    /* **מקום לתנועת ה-hover.** הצ'יפ עולה 2px, והשורה נמדדת לפי גובהו
       במנוחה -כלומר הוא יוצא מגבולותיה, וכל הורה שגוזר (חלון הגלריה,
       כרטיס הפרויקט) חותך לו את הקצה העליון. נמדד שהוא נראה קטוע.
       הריפוד מקוזז ב-‎margin‎ כדי שהפריסה לא תזוז בגללו. */
    padding-block: 4px;
    margin-block: -4px 0.3rem;
}
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .wg-chip {
    cursor: pointer; font-family: inherit;
    font-size: 0.85rem; font-weight: 700; line-height: 1;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    color: var(--wg-cap-t, inherit);
    background: rgba(127, 127, 127, 0.12);
    border: 1.5px solid rgba(127, 127, 127, 0.35);
    transition: transform 0.14s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    touch-action: manipulation;   /* נלחץ ברצף -בלי הקשה-כפולה-להגדלה */
}
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .wg-chip:hover {
    transform: translateY(-2px);
    background: rgba(255, 231, 163, 0.18);
    border-color: rgba(255, 231, 163, 0.6);
}
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .wg-chip:active { transform: translateY(0); }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .wg-chip:focus-visible {
    outline: 2px solid var(--c-gold, #ffd15a); outline-offset: 2px;
}
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .wg-chip.is-on {
    color: var(--c-ink, #1f150e);
    background: linear-gradient(180deg, var(--c-gold-light, #ffe7a3), var(--c-gold, #ffd15a) 60%, var(--c-gold-deep, #d39a1a));
    border-color: rgba(122, 79, 40, 0.5);
    box-shadow: 0 4px 12px rgba(13, 62, 120, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* פריט שסונן החוצה -‎hidden‎ מפורש, כי פריט הרשת הוא ‎display: block‎
   וזה גובר על ‎hidden‎ (אותה מלכודת של שורת הפעולות בכרטיס) */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-item[hidden] { display: none; }

/* ---- פריט וידאו בגלריה ----
   הפריט נשאר בדיוק אותו מבנה (תמונת פוסטר + כיתוב) ומה שמסמן אותו כווידאו
   הוא ‎data-wg-vtype‎ בלבד -כך אין כאן סוג פריט שני ברשת, וכל הכוונון הקיים
   (יחס, מסגרת, פינות, צל, אפקט מעבר עכבר) ממשיך לחול עליו כמו על תמונה.
   הכללים מוגדרים בארבעת ההקשרים, אחרת הכפתור נראה בעורך ונעלם באתר. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-item[data-wg-vtype] { cursor: pointer; }
/* ---- כפתור הניגון: שתי שכבות, צורה ומשולש ----
   **‎::before‎ = הצורה, ‎::after‎ = המשולש.** שכבה אחת עם שני ‎background‎
   הייתה מקבעת את צבע המשולש בתוך ה-data URI (אי אפשר להחליף צבע ב-SVG
   מקודד ממשתנה CSS), כלומר כל סגנון היה דורש SVG משלו. כאן המשולש הוא
   ‎mask‎ וה-‎background-color‎ נותן את צבעו, ולכן סגנון חדש הוא שתי שורות.
   שניהם ממורכזים ובגודל ‎--wg-play‎, כך שגודל וסגנון עצמאיים זה מזה. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-item[data-wg-vtype] .works-thumb {
    --wg-play: 2.9rem;
    --wg-play-fill: #2b1c08;                       /* צבע המשולש */
    --wg-play-bg: rgba(255, 244, 214, 0.97);       /* צבע הצורה */
    --wg-play-radius: 50%;
    --wg-play-border: 0 solid transparent;
    --wg-play-tri: 34%;                            /* גודל המשולש בתוך הצורה */
}
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-item[data-wg-vtype] .works-thumb::before,
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-item[data-wg-vtype] .works-thumb::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: var(--wg-play);
    height: var(--wg-play);
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.2, 1.3, 0.4, 1), opacity 0.25s ease;
    z-index: 2;
}
/* הצורה */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-item[data-wg-vtype] .works-thumb::before {
    background: var(--wg-play-bg);
    border: var(--wg-play-border);
    border-radius: var(--wg-play-radius);
    box-shadow: 0 6px 14px rgba(4, 12, 30, 0.5);
}
/* המשולש -‎mask‎ ולא ‎background-image‎, כדי שהצבע יגיע ממשתנה */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-item[data-wg-vtype] .works-thumb::after {
    background: var(--wg-play-fill);
    z-index: 3;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='%23000'/%3E%3C/svg%3E") center / var(--wg-play-tri) no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='%23000'/%3E%3C/svg%3E") center / var(--wg-play-tri) no-repeat;
}
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-item[data-wg-vtype]:hover .works-thumb::before,
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-item[data-wg-vtype]:hover .works-thumb::after {
    transform: translate(-50%, -50%) scale(1.08);
}

/* ---- סגנונות הכפתור ----
   כל סגנון הוא רק החלפת משתנים, ולכן הוא אינו יכול להיפרד מהגאומטריה
   (מיקום, גודל, מעבר) שמוגדרת פעם אחת למעלה. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-play="gold"] .works-thumb {
    --wg-play-bg: linear-gradient(180deg, #fff4d6, #e8ac3e);
    --wg-play-fill: #3a2a10;
}
/* יוטיוב: מלבן מעוגל ורחב, לא עיגול -זו הצורה שמזוהה מיד */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-play="yt"] .works-thumb {
    --wg-play-bg: #f00;
    --wg-play-fill: #fff;
    --wg-play-radius: 22%;
    --wg-play-tri: 30%;
}
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-play="yt"] .works-thumb::before {
    width: calc(var(--wg-play) * 1.42);
}
/* אותה צורה של יוטיוב, אטומה למחצה -נותנת לתמונה להיראות מתחתיה במקום
   לחסום אותה. הגבול הלבן הוא מה שמחזיק את הצורה קריאה על צילום בהיר,
   שם אדום ב-58% לבדו נבלע. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-play="ytsoft"] .works-thumb {
    --wg-play-bg: rgba(255, 0, 0, 0.58);
    --wg-play-fill: #fff;
    --wg-play-radius: 22%;
    --wg-play-tri: 30%;
    --wg-play-border: 1.5px solid rgba(255, 255, 255, 0.75);
}
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-play="ytsoft"] .works-thumb::before {
    width: calc(var(--wg-play) * 1.42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-item[data-wg-vtype]:hover .works-gal[data-wg-play="ytsoft"] .works-thumb::before,
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-play="ytsoft"] .works-item[data-wg-vtype]:hover .works-thumb::before {
    background: rgba(255, 0, 0, 0.85);      /* במעבר עכבר הוא נעשה מלא -רמז שהוא לחיץ */
}
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-play="ring"] .works-thumb {
    --wg-play-bg: rgba(10, 20, 40, 0.28);
    --wg-play-fill: #fff;
    --wg-play-border: 2px solid rgba(255, 255, 255, 0.92);
}
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-play="dark"] .works-thumb {
    --wg-play-bg: rgba(10, 20, 40, 0.86);
    --wg-play-fill: var(--c-gold-light, #ffe7a3);
    --wg-play-border: 1px solid rgba(255, 231, 163, 0.5);
}
/* "משולש בלבד": אין צורה, ולכן המשולש עצמו צריך צל כדי להיקרא על תמונה בהירה */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-play="bare"] .works-thumb {
    --wg-play-fill: #fff;
    --wg-play-tri: 100%;
}
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-play="bare"] .works-thumb::before { display: none; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-play="bare"] .works-thumb::after {
    filter: drop-shadow(0 3px 10px rgba(4, 12, 30, 0.85));
}
/* "בלי כפתור" -הפריט עדיין מנגן בלחיצה, רק בלי הסימון */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-play="none"] .works-thumb::before,
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-play="none"] .works-thumb::after { display: none; }

/* ---- גודל ---- */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-playsize="s"] .works-thumb { --wg-play: 2.1rem; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-playsize="l"] .works-thumb { --wg-play: 4rem; }
/* ---- הנגן ----
   נבנה בזמן ריצה ומוזרק אל ‎.works-thumb‎, בדיוק כמו ‎.pf-inline-player‎ שנכנס
   אל ‎.pf-frame‎ של השקופית. ‎<video>‎ ו-‎<iframe>‎ אינם יכולים להישמר במרקאפ
   (שני המסננים מסלקים אותם), ולכן זו הדרך היחידה. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-thumb.is-playing::before,
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-thumb.is-playing::after { opacity: 0; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-thumb.is-playing img { visibility: hidden; }
.wg-player { position: absolute; inset: 0; z-index: 4; background: #000; border-radius: inherit; overflow: hidden; }
.wg-player iframe, .wg-player video { width: 100%; height: 100%; border: 0; display: block; object-fit: contain; background: #000; }
.wg-player-x {
    position: absolute; top: 0.35rem; inset-inline-end: 0.35rem; z-index: 5;
    width: 2rem; height: 2rem; display: grid; place-items: center;
    padding: 0; cursor: pointer; border-radius: 50%;
    border: 1px solid rgba(255, 231, 163, 0.5);
    background: rgba(10, 20, 40, 0.72);
    color: var(--c-gold-light, #ffe7a3);
}
.wg-player-x svg { width: 62%; height: 62%; }
.wg-player-x:hover { background: rgba(10, 20, 40, 0.92); }

/* ---- הכיתוב: על התמונה או מתחתיה ----
   שתי גישות שונות ולא וריאציה אחת: "על" הוא שכבה עם דעיכה שחייבת קריאוּת
   מעל צילום כלשהו, "מתחת" הוא שורת טקסט בזרימה שגוררת את גובה הכרטיס. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-cap {
    display: block;
    padding: 0.6rem 0.75rem 0.7rem;
    font-size: 0.9rem;
    line-height: 1.35;
}
/* **זהב על קלף בהיר אינו קריא** -זה כבר תועד כאן בדיאלוגים. הצבע נגזר
   מהמיכל: דיו כהה על עמוד CMS ובעורך, זהב בהיר בכרטיס הפרויקט הכהה. */
:is(.cms-content, .wysiwyg-editor) .works-gal { --wg-cap-t: #3a2a15; --wg-cap-s: #5b4a2c; }
:is(.pf-rte-ed, .pf-detail-text) .works-gal { --wg-cap-t: var(--c-gold-light, #ffe7a3); --wg-cap-s: #dce9f7; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-cap-t {
    display: block;
    font-family: var(--heading-font, 'Suez One'), system-ui, sans-serif;
    font-size: 1.02em;
    color: var(--wg-cap-t, #3a2a15);
    /* שתי שורות לכל היותר: כותרת ארוכה הייתה מותחת כרטיס אחד ברשת ושוברת
       את יישור השורה כולה. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-cap-s {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.12rem;
    font-size: 0.86em;
    color: var(--wg-cap-s, #5b4a2c);
}
/* "על התמונה": השכבה יושבת בתחתית הכרטיס עם דעיכה מתחתיה. הדעיכה ב-‎::before‎
   של ה-‎.works-cap‎ ולא רקע על הטקסט עצמו -רקע אטום על טקסט קצר נראה כפס
   שנחתך באמצע התמונה, ודעיכה נקראת כחלק מהתמונה. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-cap="on"] .works-cap {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 2;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
    padding-top: 2.4rem;
    background: linear-gradient(to top, rgba(3, 10, 24, 0.92) 0%, rgba(3, 10, 24, 0.72) 42%, rgba(3, 10, 24, 0) 100%);
}
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-cap="on"] .works-cap-t,
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-cap="hover"] .works-cap-t { color: #fff; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-cap="on"] .works-cap-s,
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-cap="hover"] .works-cap-s { color: rgba(255,255,255,0.88); }
/* "מופיע במעבר עכבר": אותו כיתוב, שמחליק מלמטה. במגע אין hover, ולכן שם
   הוא מוצג תמיד -כיתוב שמתגלה במחווה שאינה קיימת הוא כיתוב שנעלם. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-cap="hover"] .works-cap {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 2;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
    padding-top: 2.4rem;
    background: linear-gradient(to top, rgba(3, 10, 24, 0.92) 0%, rgba(3, 10, 24, 0.72) 42%, rgba(3, 10, 24, 0) 100%);
    opacity: 0;
    transform: translateY(28%);
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 0.9, 0.3, 1);
}
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-cap="hover"] .works-item:hover .works-cap,
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-cap="hover"] .works-item:focus-visible .works-cap {
    opacity: 1;
    transform: none;
}
@media (hover: none) {
    :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-cap="hover"] .works-cap { opacity: 1; transform: none; }
}
/* "ללא כיתוב" -גם כשיש טקסט בנתונים. מתג תצוגה, לא מחיקה. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-cap="none"] .works-cap { display: none; }

/* ---- אפקטי מעבר עכבר ----
   כולם ‎transform‎/‎opacity‎ בלבד. הפריט עצמו מקבל הבלטה משותפת (מסגרת זהב
   וצל עמוק) בכל האפקטים, כי זה מה שאומר "אפשר ללחוץ"; האפקט מוסיף מעליה. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-item:hover .works-thumb,
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-item:focus-visible .works-thumb {
    border-color: var(--c-gold, #ffd15a);
    box-shadow: 0 18px 38px -16px rgba(2, 8, 22, 0.95), 0 0 0 1px rgba(255, 209, 90, 0.35);
}
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-item:focus-visible { outline: none; }
/* זום -התמונה בלבד גדלה בתוך המסגרת */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-hover="zoom"] .works-item:hover img,
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-hover="zoom"] .works-item:focus-visible img { transform: scale(1.08); }
/* הרמה -הכרטיס כולו עולה מעט */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-hover="lift"] .works-item:hover,
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-hover="lift"] .works-item:focus-visible { transform: translateY(-6px); }
/* הטיה קלה -רמז תלת-ממדי; הפרספקטיבה בתוך ה-‎transform‎ ולא על ההורה,
   אחרת ההורה הופך ל-containing block של כל ילד ‎fixed‎ שבתוכו (מלכודת
   שכבר הפילה כאן את כרטיס הפרויקט). */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-hover="tilt"] .works-item:hover,
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-hover="tilt"] .works-item:focus-visible { transform: perspective(700px) rotateX(5deg) rotateY(-5deg) translateY(-4px); }
/* ברק -פס אור שחולף על התמונה. ‎::after‎ על הפריט, מעל התמונה ומתחת לכיתוב. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-hover="shine"] .works-item::after {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.42) 50%, transparent 62%);
    transform: translateX(-120%);
    transition: transform 0.7s cubic-bezier(0.22, 0.9, 0.3, 1);
    pointer-events: none;
}
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-hover="shine"] .works-item:hover::after,
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-hover="shine"] .works-item:focus-visible::after { transform: translateX(120%); }
/* חשיפה -התמונה מעומעמת במנוחה ונדלקת במעבר. ‎opacity‎ ולא ‎filter‎: זול
   בהרבה, ועל רשת שלמה זה מורגש. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-hover="reveal"] .works-item img { opacity: 0.72; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-hover="reveal"] .works-item:hover img,
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-hover="reveal"] .works-item:focus-visible img { opacity: 1; transform: scale(1.04); }

/* ============================================================
   הגדרות נוספות של הגלריה -כולן ‎data-wg-*‎ על ‎.works-gal‎
   ============================================================
   **מאפיין חסר = ההתנהגות שהייתה כאן קודם**, ולכן גלריה שנבנתה לפני
   התוספת נראית בדיוק כפי שנראתה. כל כלל מוגדר בארבעת ההקשרים, כמו שאר
   הגלריה -אחרת הוא נראה בעורך ונעלם באתר. */

/* ---- עד כמה תמונות בשורה ----
   **תקרה ולא מספר קבוע.** ‎repeat(N, ...)‎ כופה בדיוק N עמודות גם כשאין להן
   מקום, ואז ארבע תמונות על מסך צר הן 80px כל אחת. כאן המסילה היא
   ‎max(--wg-min, החלק שנופל לעמודה)‎: כשיש מקום נכנסות בדיוק N, וכשאין -
   ‎--wg-min‎ מנצח ונכנסות פחות, בלי כלל נפרד למובייל.

   ‎minmax(..., 1fr)‎ ולא רוחב קבוע: ‎auto-fit‎ סופר את המסילות לפי הגבול העליון
   כשהוא אורך מוגדר -אותה מלכודת שכבר תועדה כאן פעמיים. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-cols="1"] { --wg-cols: 1; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-cols="2"] { --wg-cols: 2; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-cols="3"] { --wg-cols: 3; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-cols="4"] { --wg-cols: 4; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-cols="5"] { --wg-cols: 5; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-cols="6"] { --wg-cols: 6; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[style*="--wg-cols"],
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal:is([data-wg-cols="1"], [data-wg-cols="2"], [data-wg-cols="3"], [data-wg-cols="4"], [data-wg-cols="5"], [data-wg-cols="6"]) {
    grid-template-columns: repeat(auto-fit, minmax(
        max(var(--wg-min, 8.5rem),
            (100% - (var(--wg-cols) - 1) * var(--wg-gap, 1rem)) / var(--wg-cols)), 1fr));
}
/* התקרה היא **החלטת הרוחב**, ולכן תקרת הפריט יורדת -אחרת נבחרו 3 בשורה
   והתקבלו שלוש תמונות קטנות עם רווח ביניהן. אלא אם נבחר גם רוחב מסגרת,
   שהוא הבחירה הספציפית יותר. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal:is([data-wg-cols="1"], [data-wg-cols="2"], [data-wg-cols="3"], [data-wg-cols="4"], [data-wg-cols="5"], [data-wg-cols="6"]):not([data-wg-box]) .works-item { max-width: none; }

/* ---- רוחב המסגרת (הקופסה שהתמונה בתוכה) ----
   כוונון מדויק שגובר על שלוש המידות המוכנות של "גודל התמונות". שני המשתנים
   נקבעים יחד: ‎--wg-min‎ קובע כמה עמודות נכנסות, ו-‎--wg-max‎ הוא התקרה של
   הפריט -בלי שניהם מסגרת בודדת הייתה נמתחת על כל הרוחב. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-box="8"]  { --wg-min: 8rem;  --wg-max: 8rem; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-box="10"] { --wg-min: 10rem; --wg-max: 10rem; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-box="12"] { --wg-min: 12rem; --wg-max: 12rem; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-box="14"] { --wg-min: 14rem; --wg-max: 14rem; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-box="16"] { --wg-min: 16rem; --wg-max: 16rem; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-box="20"] { --wg-min: 20rem; --wg-max: 20rem; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-box="24"] { --wg-min: 24rem; --wg-max: 24rem; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-box="32"] { --wg-min: 32rem; --wg-max: 32rem; }
/* "מלא" -בלי תקרה: הפריטים מתחלקים ברוחב המיכל. עם תמונה אחת זו תמונה
   ראשית ענקית, וזו בדיוק הבחירה שנעשתה כאן במפורש. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-box="full"] { --wg-min: 14rem; --wg-max: none; }

/* ---- מרווח בין התמונות ---- */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-gap="tight"] { --wg-gap: 0.4rem; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-gap="wide"]  { --wg-gap: 1.9rem; }

/* ---- מסגרת התמונה ----
   על ‎.works-thumb‎ ולא על הפריט: הפריט שקוף ונושא גם את הכיתוב, ומסגרת
   סביבו הייתה עוטפת גם את הטקסט. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-frame="none"]  .works-thumb { border: 0; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-frame="plain"] .works-thumb { border: 1px solid rgba(120, 90, 40, 0.35); }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-frame="gold"]  .works-thumb { border: 2px solid var(--c-gold, #ffd15a); }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-frame="wood"]  .works-thumb { border: 3px solid var(--c-wood-deep, #4a2f12); }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-frame="light"] .works-thumb { border: 2px solid rgba(255, 255, 255, 0.85); }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-frame="dark"]  .works-thumb { border: 2px solid rgba(8, 18, 36, 0.85); }

/* ---- עיגול הפינות ----
   גם על הפריט: הוא ‎overflow: hidden‎, ופינה מרובעת שלו נראית מאחורי
   פינה מעוגלת של התמונה. ‎circle‎ נועד לפרופורציית ריבוע. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-radius="sharp"] :is(.works-item, .works-thumb)  { border-radius: 0; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-radius="round"] :is(.works-item, .works-thumb)  { border-radius: 24px; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-radius="circle"] .works-thumb { border-radius: 50%; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-radius="circle"] .works-item { border-radius: 0; overflow: visible; }

/* ---- צל ---- */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-shadow="none"] .works-thumb { box-shadow: none; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-shadow="deep"] .works-thumb { box-shadow: 0 20px 44px -16px rgba(2, 8, 22, 0.95); }

/* ---- אנימציית כניסה ----
   **‎backwards‎ ולא ‎both‎.** עם ‎both‎ האנימציה ממשיכה להחיל את הפריים
   האחרון שלה גם אחרי שהסתיימה, וקיבוע כזה גובר בקסקייד -כלומר ה-‎transform‎
   של אפקט מעבר-העכבר (הרמה/הטיה) היה מפסיק לעבוד מרגע שהכניסה נגמרה.
   זו בדיוק המלכודת שכבר נמדדה כאן במעברי העמודים. */
@keyframes wg-in-fade { from { opacity: 0; } }
@keyframes wg-in-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes wg-in-zoom { from { opacity: 0; transform: scale(0.92); } }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-anim="fade"] .works-item { animation: wg-in-fade 0.55s ease backwards; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-anim="rise"] .works-item { animation: wg-in-rise 0.55s cubic-bezier(0.22, 0.9, 0.3, 1) backwards; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-anim="zoom"] .works-item { animation: wg-in-zoom 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) backwards; }
/* השהיה מדורגת -הרשת נבנית פריט אחרי פריט ולא קופצת כגוש אחד.
   שמונה בלבד: מעבר לזה ההמתנה מורגשת כאיטיות ולא כאפקט. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-anim] .works-item:nth-child(2) { animation-delay: 0.06s; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-anim] .works-item:nth-child(3) { animation-delay: 0.12s; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-anim] .works-item:nth-child(4) { animation-delay: 0.18s; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-anim] .works-item:nth-child(5) { animation-delay: 0.24s; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-anim] .works-item:nth-child(6) { animation-delay: 0.3s; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-anim] .works-item:nth-child(7) { animation-delay: 0.36s; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-anim] .works-item:nth-child(n+8) { animation-delay: 0.42s; }

/* ---- יישור הכיתוב ----
   בלי המאפיין הטקסט מיושר ל-‎start‎ (ימין ב-RTL), ולכן "ימין" אינו נפלט
   כלל -בלוק קיים נשאר זהה. הערכים **פיזיים**: המשתמש בחר "שמאל" כפי שהוא
   רואה אותו, ו-‎start/end‎ היו מתהפכים לפי כיוון המסמך. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-align="center"] .works-cap { text-align: center; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-align="left"]   .works-cap { text-align: left; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-align="right"]  .works-cap { text-align: right; }

/* ---- גופן הכיתוב ----
   ה-‎font-family‎ עצמו יושב כ-‎style‎ על ‎.works-gal‎ (CSS אינו יכול לתרגם שם
   גופן שנבחר בפאנל, ורשימת כללים פר-גופן הייתה מתיישנת בגופן הבא). הכותרת
   מגדירה גופן משלה (‎--heading-font‎) ולכן היא **חייבת** לרשת במפורש, אחרת
   הבחירה משפיעה רק על התיאור. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-capfont] :is(.works-cap-t, .works-cap-s) { font-family: inherit; }

/* ---- גודל הכיתוב ---- */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-capsize="s"] .works-cap { font-size: 0.78rem; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-capsize="l"] .works-cap { font-size: 1.05rem; }

/* ---- עיצוב הכיתוב ---- */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-capstyle="bold"] .works-cap-t { font-weight: 800; letter-spacing: 0.01em; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-capstyle="bold"] .works-cap-s { font-weight: 600; }
/* "עדין": הכותרת יורדת ממשקל התצוגה שלה ונעשית שקטה -מתאים לגלריה שבה
   התמונה היא העיקר והטקסט הוא רק תווית. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-capstyle="soft"] .works-cap-t {
    font-family: inherit; font-weight: 500; font-size: 0.95em; opacity: 0.92;
}
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-capstyle="soft"] .works-cap-s { opacity: 0.78; }
/* קו מפריד מעל הכיתוב. ‎currentColor‎ בשקיפות ולא צבע קבוע: הכיתוב מופיע גם
   על קלף בהיר וגם על כרטיס כהה, וקו אחד קבוע היה נעלם באחד מהם. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-capstyle="line"] .works-cap {
    border-top: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    margin-top: 0.5rem; padding-top: 0.55rem;
}
/* הכותרת כתגית. ‎display‎ חוזר ל-‎inline-block‎ ולכן ‎line-clamp‎ אינו חל -
   ולכן חיתוך בשלוש נקודות בשורה אחת, אחרת כותרת ארוכה מותחת את התגית. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-capstyle="badge"] .works-cap-t {
    display: inline-block; max-width: 100%;
    padding: 0.14rem 0.6rem; border-radius: 999px;
    background: color-mix(in srgb, currentColor 12%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
    font-size: 0.9em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- גודל הכותרת (עקיפה על גודל הכיתוב) ----
   **אחרי בלוק "עיצוב הכיתוב", וזה לא סידור אקראי:** ‎badge‎ קובע ‎font-size‎
   משלו באותה specificity בדיוק, ולכן מי שמאוחר יותר בקובץ מנצח -נמדד שגודל
   הכותרת פשוט לא השתנה כל עוד הבלוק ישב לפניו.
   ב-‎em‎ ולא ב-‎rem‎: כך שני הכוונונים מצטרפים -"כיתוב גדול" עם "כותרת גדולה"
   נותן כותרת גדולה בתוך כיתוב גדול, ולא מספר מוחלט שמבטל את הראשון. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-titlesize="s"]  .works-cap-t { font-size: 0.9em; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-titlesize="l"]  .works-cap-t { font-size: 1.28em; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-titlesize="xl"] .works-cap-t { font-size: 1.6em; }

/* ---- עיצוב הכותרת (עקיפה על "עיצוב הכיתוב") ----
   אחרי כללי הגודל, מאותו טעם: אלה שכבות שמצטברות על אותה כותרת, והאחרונה
   בקובץ היא זו שמכריעה כשהן נוגעות באותו מאפיין. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-titlestyle="bold"] .works-cap-t { font-weight: 800; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-titlestyle="soft"] .works-cap-t { font-weight: 500; opacity: 0.9; }
/* בעברית אין אותיות גדולות, ולכן "ריווח" ולא ‎text-transform‎ -שאינו עושה דבר */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-titlestyle="caps"] .works-cap-t { letter-spacing: 0.14em; font-weight: 700; }
/* קו תחתון מצויר ב-‎border-bottom‎ על ‎inline-block‎ ולא ב-‎text-decoration‎:
   כך הוא בעובי ובמרחק שנקבעים כאן, ונגמר בסוף המילה ולא בסוף השורה. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-titlestyle="under"] .works-cap-t {
    display: inline-block;
    padding-bottom: 0.18em;
    border-bottom: 2px solid color-mix(in srgb, currentColor 55%, transparent);
}
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-titlestyle="badge"] .works-cap-t {
    display: inline-block; max-width: 100%;
    padding: 0.14em 0.6em; border-radius: 999px;
    background: color-mix(in srgb, currentColor 12%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* צל טקסט ולא ‎filter‎: זול, ולא מקדם את הכיתוב לשכבת compositor משלו */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-titlestyle="shadow"] .works-cap-t {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(0, 0, 0, 0.35);
}



/* סמן: פריט מקושר הוא לחיץ, פריט בלי קישור אינו מתחזה ללחיץ */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) a.works-item { cursor: pointer; }
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) div.works-item { cursor: default; }

/* בעורך הבלוק אטומי (‎contenteditable="false"‎) -מסמנים אותו ככזה, כדי
   שיהיה ברור שעורכים אותו מהדיאלוג ולא בהקלדה בתוכו. */
:is(.wysiwyg-editor, .pf-rte-ed) .works-gal {
    outline: 1px dashed rgba(255, 209, 90, 0.45);
    outline-offset: 6px;
}

@media (max-width: 640px) {
    /* ‎:not([data-wg-box])‎ -רוחב מפורש שנבחר בפאנל אינו נדרס כאן. הוא בטוח
       ממילא: הספירה עטופה ב-‎min(..., 100%)‎, ולכן במסך צר יוצאת עמודה אחת. */
    :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal:not([data-wg-box]) { --wg-min: 7.5rem; --wg-max: 12rem; }
    :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal { --wg-gap: 0.6rem; margin: 1rem 0; }
    :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-size="l"]:not([data-wg-box]) { --wg-min: 10rem; --wg-max: 16rem; }
    /* אין כאן כלל לעמודות: הנוסחה של "עד N בשורה" מצטמצמת מעצמה כש-‎--wg-min‎
       (שיורד כאן ל-7.5rem) גדול מהחלק שנופל לעמודה. */
    :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-cap { padding: 0.45rem 0.55rem 0.5rem; font-size: 0.8rem; }
    /* ההטיה יורדת במגע: אין hover, והיא הייתה נתקעת אחרי נגיעה */
    :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-hover="tilt"] .works-item:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-item,
    :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-item img,
    :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-cap { transition: none; }
    :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-item:hover { transform: none; }
    :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-hover="shine"] .works-item::after { display: none; }
    /* אנימציית הכניסה יורדת לגמרי -כולל ההשהיה המדורגת, אחרת פריטים
       היו נשארים בלתי נראים עד שתורם מגיע. */
    :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text) .works-gal[data-wg-anim] .works-item { animation: none; animation-delay: 0s; }
}

/* ---- חלון גלריית העבודות ----
   אותו דפוס של כרטיס הפרטים: ‎fixed‎ על כל המסך, הכרטיס במרכז, גלילה פנימית
   **בלי פס גלילה** (חוק הכרטיס חל גם כאן). ה-JS מעביר אותו ל-‎body‎ מאותה
   סיבה בדיוק -‎position: fixed‎ בתוך אב עם ‎transform‎ נמדד מול האב. */
.pf-works {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.8rem, 3vw, 2.4rem);
    background: rgba(3, 10, 24, 0.78);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.32s ease;
}
.pf-works.is-open { opacity: 1; }
.pf-works[hidden] { display: none; }
.pf-works-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(72rem, 100%);
    max-height: 100%;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(14, 30, 58, 0.98), rgba(8, 20, 42, 0.98));
    border: 1px solid rgba(255, 231, 163, 0.45);
    box-shadow: 0 34px 80px -30px rgba(0, 0, 0, 0.9);
    transform: translateY(18px) scale(0.98);
    transition: transform 0.36s cubic-bezier(0.22, 0.9, 0.3, 1);
    overflow: hidden;
}
.pf-works.is-open .pf-works-card { transform: none; }
.pf-works-head {
    position: relative;               /* עוגן לכפתור הסגירה שיצא מהזרימה */
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid rgba(255, 231, 163, 0.22);
}
/* **הכותרת ממורכזת, והריפוד סימטרי.** כפתור הסגירה תופס מקום בצד אחד בלבד,
   ולכן מרכוז בתוך השטח שנשאר היה מזיז אותה הצידה -כותרת "כמעט ממורכזת"
   נקראת כתקלה. השמירה על המקום נעשית בריפוד זהה משני הצדדים (‎--pf-works-x‎),
   בדיוק כמו בכותרת כרטיס הפרטים. */
.pf-works-head { --pf-works-x: 2.9rem; }
.pf-works-title {
    flex: 1 1 auto;
    margin: 0;
    padding-inline: var(--pf-works-x);
    text-align: center;
    font-family: var(--pf-d-font, var(--heading-font, 'Suez One')), system-ui, sans-serif;
    font-size: clamp(1.05rem, 2.4vw, 1.45rem);
    color: var(--c-gold-light, #ffe7a3);
    /* כותרת ארוכה לא תדחוף את כפתור הסגירה מהמסך */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* הכפתור יוצא מזרימת השורה כדי שהמרכוז יימדד מול הכותרת כולה ולא מול
   השארית שאחריו */
.pf-works-close {
    position: absolute;
    inset-inline-start: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    flex: 0 0 auto;
    width: 1.9rem; height: 1.9rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; cursor: pointer;
    color: #ffe7a3;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 231, 163, 0.4);
    transition: background 0.2s ease, transform 0.2s ease;
}
.pf-works-close svg { width: 0.85rem; height: 0.85rem; }
.pf-works-close:hover { background: rgba(255, 209, 90, 0.22); }
/* ה-‎transform‎ נושא כבר את המרכוז האנכי, ולכן הלחיצה מוסיפה עליו ולא דורסת */
.pf-works-close:active { transform: translateY(-50%) scale(0.94); }
.pf-works-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.4rem 1.1rem 1.2rem;
    /* בלי פס גלילה -חוק הכרטיס. הגלילה עצמה עובדת: גלגלת, אצבע ומקלדת. */
    scrollbar-width: none;
}
.pf-works-scroll::-webkit-scrollbar { width: 0; }
/* הגלריה ממלאת את החלון: כאן היא **התוכן** ולא בלוק בתוך מאמר */
.pf-works-body .works-gal { margin-block: 0.6rem; max-width: none; }
@media (max-width: 640px) {
    .pf-works { padding: 0.6rem; }
    .pf-works-card { width: 100%; border-radius: 14px; }
    /* הריפוד קטן, ולכן גם ההיסט של הכפתור והשמירה הסימטרית עליו */
    .pf-works-head { padding: 0.7rem 0.8rem; --pf-works-x: 2.4rem; }
    .pf-works-close { inset-inline-start: 0.8rem; }
    .pf-works-scroll { padding: 0.3rem 0.7rem 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
    .pf-works, .pf-works-card { transition: none; }
    .pf-works-card { transform: none; }
}

/* ==== ׳˜׳•׳₪׳¡ ׳™׳¦׳™׳¨׳× ׳§׳©׳¨ (׳¢׳œ ׳§׳œ׳£ ׳”׳ž׳’׳™׳œ׳”) ====
   ׳”׳¢׳ž׳•׳“ ׳ž׳©׳×׳ž׳© ׳‘׳ž׳—׳œ׳§׳•׳× ׳”׳§׳œ׳£ ׳”׳§׳™׳™׳ž׳•׳× (ג€Žcms-bg-document02ג€Ž), ׳•׳œ׳›׳Ÿ ׳›׳׳Ÿ ׳™׳© ׳¨׳§ ׳׳×
   ׳ž׳” ׳©׳©׳™׳™׳š ׳œ**׳˜׳•׳₪׳¡**: ׳”׳©׳“׳•׳×, ׳ž׳¦׳‘׳™ ׳”׳•׳•׳œ׳™׳“׳¦׳™׳”, ׳›׳₪׳×׳•׳¨ ׳”׳©׳œ׳™׳—׳” ׳•׳ž׳¦׳‘ ׳”׳”׳¦׳œ׳—׳”.
   ׳”׳¦׳‘׳¢׳™׳ ׳”׳ ׳¦׳‘׳¢׳™ ׳“׳™׳• ׳¢׳œ ׳§׳œ׳£ (ג€Ž#3a2a15ג€Ž ׳•׳’׳•׳•׳ ׳™׳•) ׳•׳œ׳ ׳¦׳‘׳¢׳™ ׳”׳₪׳׳ ׳œ ׳”׳›׳”׳”. */
/* שטח כתיבה נדיב יותר מברירת המחדל של המגילה: ברירת המחדל (‎22% 11% 21% 16%‎)
   נמדדה 365x364 בדסקטופ -מתאימה לפסקה, לא לטופס בן חמישה שדות. הגבולות
   נגזרו מהציור עצמו: הפנס תופס עד ~17% משמאל, הקיסוס עד ~12% מימין,
   והגלילים העליון והתחתון עד ~15%. */
.contact-page .cms-inner {
    /* ‎top‎ ו-‎right‎ נדיבים מהמדידה הגאומטרית: הטקסט **לא** חרג מהתיבה (נמדד
       590..923 בתוך 585..940), אבל הקיסוס והנצנוצים המצוירים בפינה הימנית-
       עליונה יושבים מעל הקלף ובלעו את התו הראשון של כל שורה. גבול שנגזר
       מהציור ולא מהתיבה. */
    /* **הורחב חזרה לצדדים (בקשת המשתמש).** הוא הוצר בשעתו ל-‎17%/24%‎, אבל
       הגבולות שנמדדו מהציור עצמו הם **‎12%‎ מימין ו-‎17%‎ משמאל** (הפנס) -
       ראה ההערה מעל. ‎13%/19%‎ נשאר בתוכם עם שוליים של ‎1-2%‎, ומרחיב את
       אזור הכתיבה מ-‎59%‎ ל-‎68%‎ מרוחב הקלף. */
    inset: 27% 13% 14% 19%;
    /* הריפוד הימני נשאר ‎1.4rem‎ כמו בכלל הבסיס, וזה **לא** מרווח אסתטי:
       פס הגלילה של אזור הכתיבה יושב בקצה הימני, ובלעדיו התו הראשון של כל
       שורה נחתך תחתיו (נמדד: "יש" הוצג כ-"ש" בכל שורה). */
    padding: 0 1.4rem 0.6rem 0.3rem;
}
.contact-page .cms-title.cf-title {
    /* רווח מעל ומתחת (בקשת המשתמש): הכותרת היא הדבר הראשון באזור הכתיבה,
       ובלי מרווח היא נצמדת גם לראש הקלף וגם לטקסט הפתיחה. */
    position: static; margin: 0.5rem 0 1rem; text-align: center;
    font-size: clamp(1.15rem, 3.4vw, 1.6rem);
    /* צבע דיו על קלף. ‎.cms-bg-parchment .cms-title‎ נותן את המילוי המדורג
       רק ל-‎parchment‎, ולכן הוא נקבע כאן במפורש. */
    background: linear-gradient(180deg, #8a5f22, #4a2f12);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cf-intro {
    margin: 0 0 0.9rem; font-size: 0.92rem; line-height: 1.6;
    color: #55401f; text-align: center;
}
.cf-note { text-align: center; color: #55401f; }
/* הילה בגוון הקלף סביב הטקסט. נמדד ש''נשמח לשמוע'' **אינו** חורג מהתיבה
   (scrollWidth == clientWidth), אלא יושב מעל הקיסוס והפרחים המצוירים בשוליים -
   ושם הוא פשוט אינו קריא. ההילה מפרידה אותו מהציור בלי להסתיר אותו. */
.cf-intro, .cf-label, .cf-agree > span, .cf-count, .contact-page .cms-title.cf-title {
    text-shadow: 0 0 4px rgba(253, 246, 226, 0.95), 0 0 9px rgba(253, 246, 226, 0.8), 0 1px 0 rgba(253, 246, 226, 0.9);
}
/* לכותרת יש מילוי מדורג (‎background-clip: text‎), ושם ‎text-shadow‎ מצויר מעל
   הטקסט השקוף ומכסה אותו -ולכן היא מקבלת ‎drop-shadow‎ במקום. */
.contact-page .cms-title.cf-title {
    text-shadow: none;
    filter: drop-shadow(0 0 5px rgba(253, 246, 226, 0.95)) drop-shadow(0 0 10px rgba(253, 246, 226, 0.75));
}
.cf-form { display: flex; flex-direction: column; gap: 0.72rem; }
/* ‎display‎ גובר על תכונת ‎hidden‎ -מלכודת שכבר תועדה כאן שלוש פעמים. בלי זה
   ‎form.hidden = true‎ של מצב ההצלחה נכתב, אבל הטופס נשאר על המסך מתחת
   להודעה (נמדד בצילום: ‎hidden‎ הוא true והשדות מוצגים). */
.cf-form[hidden] { display: none; }

/* ׳ž׳œ׳›׳•׳“׳× ׳”׳“׳‘׳©: ׳ž׳•׳¡׳×׳¨׳× ׳ž׳”׳¢׳™׳Ÿ ׳•׳ž׳§׳•׳¨׳׳™ ׳ž׳¡׳š, ׳•׳׳™׳ ׳” ׳ ׳’׳™׳©׳” ׳‘׳ž׳§׳œ׳“׳×.
   ג€Ždisplay: noneג€Ž ׳œ׳‘׳“׳• -׳—׳œ׳§ ׳ž׳”׳‘׳•׳˜׳™׳ ׳ž׳“׳œ׳’׳™׳ ׳¢׳œ ׳©׳“׳•׳× ׳ž׳•׳¡׳×׳¨׳™׳ ׳œ׳’׳ž׳¨׳™. */
.cf-hp {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap;
}

.cf-field { display: flex; flex-direction: column; gap: 0.28rem; }
.cf-label { font-size: 0.82rem; font-weight: 800; color: #4a3316; padding-inline: 4%; }
.cf-under { padding-inline: 4%; }
.cf-req { color: #b03a24; }
.cf-opt { font-weight: 500; font-size: 0.76rem; color: #7c6540; }

/* השדות צרים מרוחב אזור הכתיבה וממורכזים (בקשת המשתמש): כך הם מתרחקים
   מהקיסוס, מהתליון ומהגלובוס המצוירים בשוליים, במקום להיצמד אליהם. */
.cf-form input[type="text"],
.cf-form input[type="email"],
.cf-form textarea {
    width: 92%; max-width: 100%; min-width: 0; box-sizing: border-box;
    margin-inline: auto;
    padding: 0.5rem 0.7rem;
    border: 1.5px solid rgba(120, 80, 26, 0.42); border-radius: 10px;
    background: rgba(255, 252, 240, 0.72); color: #2f2210;
    font-family: inherit; font-size: 0.92rem; line-height: 1.5;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.cf-form textarea { resize: vertical; min-height: 5.5rem; }
.cf-form input::placeholder, .cf-form textarea::placeholder { color: rgba(90, 70, 40, 0.5); }
/* ‎:not(.cf-cb)‎ הכרחי: ‎.cf-cb‎ הוא ‎<input>‎ בתוך ‎.cf-form‎ גם הוא, ובלי
   ההחרגה הכלל הגנרי הזה גובר על ‎.cf-cb:checked/:hover‎ (אותה specificity,
   ומאוחר יותר בקובץ). נמדד: אחרי לחיצה על התיבה ה-‎background‎ חזר ל-‎#fffdf5‎
   (מה-‎:focus‎ הזה) במקום המילוי הזהב של ‎:checked‎, וסימן ה-✓ הלבן נבלע ברקע
   כמעט-לבן -"שום דבר לא קורה בלחיצה" (בקשת המשתמש). אותה מלכודת שכבר
   תועדה כאן על ‎.admin-panel input‎ מול ‎.admin-switch‎. */
.cf-form input:not(.cf-cb):hover, .cf-form textarea:hover { border-color: rgba(120, 80, 26, 0.7); }
.cf-form input:not(.cf-cb):focus, .cf-form textarea:focus {
    outline: none; border-color: #8a5f22; background: #fffdf5;
    box-shadow: 0 0 0 3px rgba(198, 148, 44, 0.28);
}
/* ׳©׳“׳” ׳”׳׳™׳ž׳•׳× ׳§׳¦׳¨ -׳ž׳¡׳₪׳¨ ׳‘׳Ÿ ׳©׳×׳™ ׳¡׳₪׳¨׳•׳× ׳׳™׳ ׳• ׳–׳§׳•׳§ ׳œ׳©׳•׳¨׳” ׳ž׳œ׳׳” */
.cf-field-q input { max-width: 7rem; }

/* ׳ž׳¦׳‘׳™ ׳”׳•׳•׳œ׳™׳“׳¦׳™׳”. ׳”׳¦׳‘׳¢ ׳œ׳‘׳“׳• ׳׳™׳ ׳• ׳ž׳¡׳₪׳™׳§ (׳—׳•׳§ ׳ ׳’׳™׳©׳•׳×), ׳•׳œ׳›׳Ÿ ׳™׳© ׳’׳ ׳˜׳§׳¡׳˜ ׳©׳’׳™׳׳”
   ׳•׳’׳ ג€Žaria-invalidג€Ž -׳”׳˜׳‘׳¢׳× ׳”׳™׳ ׳”׳—׳™׳–׳•׳§ ׳•׳œ׳ ׳”׳ž׳™׳“׳¢. */
.cf-field.is-bad input,
.cf-field.is-bad textarea {
    border-color: #b03a24; background: rgba(255, 236, 232, 0.75);
    box-shadow: 0 0 0 3px rgba(176, 58, 36, 0.16);
}
/* ‎:not(.cf-cb)‎: בלעדיו הכלל הזה (0,2,1) גובר על ‎.cf-cb:checked‎ (0,2,0) בכל
   מקרה, וגבול הצ'קבוקס המסומן היה ירוק במקום הזהב של ‎:checked‎. */
.cf-field.is-good input:not(.cf-cb),
.cf-field.is-good textarea { border-color: #3f7a45; }
.cf-err { margin: 0; min-height: 1em; font-size: 0.76rem; font-weight: 700; color: #a8341f; }
.cf-err:empty { min-height: 0; }
.cf-under { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.cf-under .cf-err { flex: 1 1 auto; }
.cf-count {
    flex: 0 0 auto; font-size: 0.74rem; font-weight: 700;
    color: #8a7250; unicode-bidi: isolate;
}
.cf-count.is-ok { color: #3f7a45; }

/* ---- ׳×׳™׳‘׳× ׳”׳”׳¡׳›׳ž׳” ----
   ׳”׳¨׳™׳‘׳•׳¢ ׳”׳ ׳™׳™׳˜׳™׳‘׳™ ׳ž׳¦׳•׳™׳¨ ׳¢"׳™ ׳ž׳¢׳¨׳›׳× ׳”׳”׳₪׳¢׳œ׳” ׳•׳׳™׳ ׳• ׳ž׳×׳׳™׳ ׳œ׳§׳œ׳£; ׳”׳§׳œ׳˜ ׳ ׳©׳׳¨ (׳”׳•׳
   ׳ž׳§׳•׳¨-׳”׳׳ž׳× ׳•׳ ׳’׳™׳© ׳‘׳ž׳§׳œ׳“׳×) ׳•׳¨׳§ ׳ž׳¨׳׳”׳• ׳ž׳•׳—׳œ׳£. ׳׳•׳×׳• ׳©׳™׳§׳•׳œ ׳©׳œ ג€Ž.admin-cbג€Ž ׳‘׳₪׳׳ ׳œ. */
.cf-agree { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.cf-cb {
    appearance: none; -webkit-appearance: none;
    flex: 0 0 auto; position: relative; margin: 0.1rem 0 0;
    width: 1.05rem; height: 1.05rem; cursor: pointer;
    border: 1.5px solid rgba(120, 80, 26, 0.55); border-radius: 6px;
    background: rgba(255, 252, 240, 0.8);
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.cf-cb:hover, .cf-cb:active { border-color: #8a5f22; box-shadow: 0 0 0 3px rgba(198, 148, 44, 0.25); }
.cf-cb:checked {
    background: linear-gradient(180deg, #d9a83a, #a06e22);
    border-color: #6b4715;
}
/* ׳”׳¡׳™׳ž׳Ÿ ׳‘-ג€Žclip-pathג€Ž ׳•׳œ׳ ׳›׳×׳•: ג€Žגœ“ג€Ž ׳ ׳’׳–׳¨ ׳ž׳”׳’׳•׳₪׳Ÿ ׳•׳ž׳©׳×׳ ׳” ׳‘׳™׳Ÿ ׳ž׳¢׳¨׳›׳•׳× */
.cf-cb:checked::after {
    content: ''; position: absolute; inset: 0;
    background: #fffdf2;
    clip-path: polygon(19% 47%, 12% 57%, 40% 80%, 88% 26%, 79% 18%, 39% 62%);
}
.cf-cb:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(198, 148, 44, 0.4); }
.cf-field.is-bad .cf-cb { border-color: #b03a24; box-shadow: 0 0 0 3px rgba(176, 58, 36, 0.16); }
/* מלכודת שנמדדה: ‎.cf-field.is-bad .cf-cb‎ הוא (0,3,0) וגובר על ‎.cf-cb:hover‎
   (0,2,0) בכל מצב -כלומר במצב שגיאה הובר/לחיצה על התיבה לא היו משנים דבר
   (נמדד: ‎border/box-shadow‎ זהים לחלוטין לפני ואחרי הובר ולחיצה). כלל ייעודי
   שגובר גם על זה, ומעצים את הטבעת האדומה במקום להחליף אותה לזהב -אחרת
   הובר "מבטל" את סימון השגיאה. */
.cf-field.is-bad .cf-cb:hover, .cf-field.is-bad .cf-cb:active {
    border-color: #8f2c19;
    box-shadow: 0 0 0 4px rgba(176, 58, 36, 0.4);
}
/* ‎text-wrap: balance‎ + גופן מעט קטן: השורה אמורה להיכנס בשורה אחת בשטח
   הכתיבה הצר של המגילה (בקשת המשתמש). כשהיא בכל זאת נשברת -היא נשברת
   לשתי שורות מאוזנות ולא למילה בודדת בשורה שנייה. */
.cf-agree > span { font-size: 0.63rem; line-height: 1.5; color: #3f2c10; font-weight: 400; text-wrap: balance; }
/* שורת ההסכמה יושבת בתיבה משלה. היא **תנאי לשליחה** ולא הערת שוליים, ובלי
   הפרדה מהרקע המאויר היא נקראה כטקסט קטן ודחוס בין השדות (בקשת המשתמש). */
/* הדגשה ולא תיבה: מסגרת מקווקוות מסביב נקראת כפתק שהודבק על המגילה
   (בקשת המשתמש). כאן רקע שנמוג -כמו הערה שנכתבה בשולי המסמך עצמו.
   הדעיכה **סימטרית** (בקשת המשתמש): פס דיו בצד ההתחלה ורקע שנקטע בקו חד
   בצד השני נקרא כהדגשה שנעצרה באמצע, ולכן הפס ירד ושני הקצוות נמוגים.
   הדעיכה נגמרת ב-4% -כדי שהפס הנראה יהיה כמעט ברוחב המלא (בקשת המשתמש). */
/* הרוחב **נגזר מאותו כלל** של שדות הטופס (`width: 92%; margin-inline: auto`)
   ולא ממספר משלו: השדה הזה יושב על אותה `<div class="cf-field">` בדיוק כמו
   שדה "אימות אנושי" -אבל בלי `width:92%` הקופסה שלו תופסת את מלוא ה-100%
   של העמודה, בעוד שהקלט מצטמצם ל-92% וממורכז. נמדד ב-744px: השדה יצא
   253-506px (253 רוחב) מול הקלט 264-496 (232 רוחב) -פער של 10-11px בכל צד.
   אותו כלל בדיוק סוגר את הפער במקום מרווח קשיח שהיה נכון רק ברוחב אחד. */
.cf-field-agree {
    width: 92%; max-width: 100%; margin-inline: auto;
    padding: 0.5rem 0.95rem;
    border: 0; border-radius: 10px;
    background: linear-gradient(to left,
        rgba(255, 250, 235, 0) 0%,
        rgba(255, 250, 235, 0.72) 4%,
        rgba(255, 250, 235, 0.72) 96%,
        rgba(255, 250, 235, 0) 100%);
    transition: background 0.18s ease;
}
/* **הרקע אינו משתנה בריחוף** (בקשת המשתמש). היה כאן חיזוק מ-0.72 ל-0.97,
   והוא נקרא כהבהוב של הרצועה כשהעכבר סתם עובר מעליה. המשוב האינטראקטיבי
   נשאר במקום שבו הוא באמת נדרש -הקישורים ותיבת הסימון, שלכל אחד מהם
   ‎:hover‎/‎:active‎ משלו. */
/* 80% שקיפות (בקשת המשתמש) -הרקע האדום נועד לסמן ולא לכסות: הוא יושב על
   הקלף המצויר, ובאטימות גבוהה הוא נקרא כמלבן זר שהודבק עליו. */
.cf-field-agree.is-bad {
    background: linear-gradient(to left,
        rgba(255, 232, 226, 0) 0%,
        rgba(255, 232, 226, 0.2) 4%,
        rgba(255, 232, 226, 0.2) 96%,
        rgba(255, 232, 226, 0) 100%);
}
.cf-field-agree .cf-err { margin-top: 0.3rem; }
/* הילה חלשה בלבד: הרקע כבר מפריד מהציור, אבל מרגע שהקצוות נמוגים התו
   הראשון והאחרון של כל שורה יושבים על רקע חלקי. הילה מלאה כאן מטשטשת. */
.cf-field-agree .cf-agree > span { text-shadow: 0 0 5px rgba(253, 246, 226, 0.75); }
/* ׳”׳§׳™׳©׳•׳¨׳™׳ ׳œ׳ž׳¡׳ž׳›׳™׳ ׳”׳ ג€Žbuttonג€Ž ׳•׳œ׳ ג€Žaג€Ž: ׳”׳ ׳₪׳•׳×׳—׳™׳ ׳׳× ׳ž׳•׳“׳׳œ ׳”׳ž׳’׳™׳œ׳” ׳•׳׳™׳Ÿ ׳œ׳”׳
   ׳›׳×׳•׳‘׳×. ׳”׳ ׳ž׳¢׳•׳¦׳‘׳™׳ ׳›׳§׳™׳©׳•׳¨ ׳›׳“׳™ ׳©׳™׳™׳§׳¨׳׳• ׳›׳›׳–׳”. */
.cf-doclink {
    background: none; border: 0; padding: 0 0.1rem; cursor: pointer;
    font: inherit; font-weight: 800; color: #6b4212;
    text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 2px;
    text-decoration-color: rgba(160, 110, 34, 0.6);
    border-radius: 4px; transition: color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
/* שינוי גוון בלבד (‎#6b4212 → #3f2810‎) לא נראה על הקלף -נמדד הפרש בהירות
   של אחוזים בודדים, וזה נקרא כ"אין הובר". הסימון הוא **שטח**: הדגשה בגוון
   הזהב שיוצאת מעבר לאותיות ב-‎box-shadow‎ (ולא ‎padding‎, שהיה מזיז את הטקסט).
   וגם ‎:active‎ -במגע ‎:hover‎ אינו מופעל כלל (אין עכבר), ולכן בטלפון ההדגשה
   לא נראתה בשום שלב. ‎:active‎ מגיב מיידית להקשה. */
.cf-doclink:hover, .cf-doclink:active {
    color: #3f2810; text-decoration-color: currentColor;
    background-color: rgba(198, 148, 44, 0.3);
    box-shadow: 0 0 0 3px rgba(198, 148, 44, 0.3);
}
.cf-doclink:focus-visible { outline: 2px solid rgba(160, 110, 34, 0.7); outline-offset: 2px; border-radius: 4px; }

/* הרוחב נגזר **מאותו כלל** של שדות הטופס ושל תיבת ההסכמה
   (‎width: 92%; margin-inline: auto‎) ולא ממספר משלו: בלעדיו הפס תופס את
   מלוא ה-100% של העמודה בעוד שכל השאר מצטמצם ל-92% וממורכז, והוא נקרא
   כרכיב זר שרחב מהטופס שהוא מדבר עליו. אותה מלכודת בדיוק שכבר תועדה
   כאן על ‎.cf-field-agree‎. */
.cf-formerr {
    width: 92%; max-width: 100%; margin-inline: auto; box-sizing: border-box;
    padding: 0.55rem 0.7rem; border-radius: 10px;
    border: 1.5px solid rgba(176, 58, 36, 0.45); background: rgba(255, 236, 232, 0.8);
    color: #8f2c19; font-size: 0.84rem; font-weight: 700; text-align: center;
}
.cf-formerr[hidden] { display: none; }

/* רווח נדיב אחרי הכפתור (בקשת המשתמש): הוא האחרון בטופס, ובלי מרווח הוא נדבק לקצה אזור הגלילה */
.cf-actions { display: flex; justify-content: center; margin: 0.4rem 0 2rem; }
/* ג€Ž.cms-btnג€Ž ׳ž׳•׳’׳“׳¨ ׳‘׳”׳§׳©׳¨׳™ ׳”׳×׳•׳›׳Ÿ ׳‘׳œ׳‘׳“, ׳•׳œ׳›׳Ÿ ׳”׳›׳₪׳×׳•׳¨ ׳›׳׳Ÿ ׳ž׳§׳‘׳œ ׳׳× ׳”׳¢׳¨׳›׳” ׳‘׳ž׳₪׳•׳¨׳© -
   ׳׳•׳×׳• ׳©׳™׳§׳•׳œ ׳©׳œ ׳©׳•׳¨׳× ׳”׳₪׳¢׳•׳œ׳•׳× ׳‘׳›׳¨׳˜׳™׳¡ ׳”׳׳•׳“׳•׳×. */
.contact-page .cms-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    padding: 0.5rem 1.25rem; border-radius: 11px;
    /* ‎font-family: inherit‎ הכרחי: הכפתור כאן הוא ‎<button>‎ ולא ‎<a>‎, ואלמנטי
       טופס **אינם יורשים** גופן -הוא נפל לגופן המערכת, שמעוות את העברית. */
    font-family: inherit;
    font-weight: 800; font-size: 0.95rem; letter-spacing: 0.01em;
    text-decoration: none; cursor: pointer;
    color: var(--c-wood-deep, #3a2a15);
    background: linear-gradient(180deg, var(--c-gold-light, #ffe7a3), var(--c-gold, #ffd15a) 55%, var(--c-gold-deep, #d39a1a));
    border: 1px solid var(--c-gold-deep, #d39a1a);
    box-shadow: 0 3px 0 var(--c-gold-deep, #d39a1a), 0 6px 14px rgba(13, 62, 120, 0.22);
    transition: transform 0.15s, filter 0.2s, box-shadow 0.2s;
}
/* בריחוף הכפתור **אינו** מגדיל את הצל התחתון: צל של ‎6px‎ בצבע מלא מתחת
   לכפתור זהוב נקרא ככפתור שני שמציץ מאחוריו (בקשת המשתמש). הוא נשאר באותו
   עובי, והמשוב הוא הרמה והבהרה בלבד. */
.contact-page .cms-btn:hover { filter: brightness(1.07); transform: translateY(-2px); box-shadow: 0 3px 0 var(--c-gold-deep, #d39a1a), 0 10px 18px rgba(13, 62, 120, 0.28); }
.contact-page .cms-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--c-gold-deep, #d39a1a); }
.contact-page .cms-btn-ghost {
    color: #7a4f18; background: rgba(255, 246, 230, 0.5);
    border: 2px dashed #a06e22; box-shadow: none;
}
.contact-page .cms-btn-ghost:hover { box-shadow: none; background: rgba(255, 246, 230, 0.8); }

/* ---- ׳ž׳¦׳‘ ׳©׳œ׳™׳—׳” ----
   ׳”׳›׳₪׳×׳•׳¨ **׳—׳¡׳•׳** ׳•׳œ׳ ׳¨׳§ ׳ž׳¢׳•׳ž׳¢׳: ׳œ׳—׳™׳¦׳” ׳©׳ ׳™׳™׳” ׳‘׳–׳ž׳Ÿ ׳©׳”׳¨׳׳©׳•׳ ׳” ׳‘׳“׳¨׳š ׳©׳•׳œ׳—׳× ׳₪׳ ׳™׳™׳”
   ׳›׳₪׳•׳œ׳”. ׳”׳¨׳•׳—׳‘ ׳ž׳§׳•׳‘׳¢ ׳œ׳¨׳•׳—׳‘ ׳©׳ ׳ž׳“׳“ ׳‘׳¨׳’׳¢ ׳”׳—׳¡׳™׳ž׳”, ׳׳—׳¨׳× "׳©׳•׳œ׳—ג€¦" ׳ž׳§׳¦׳¨ ׳׳•׳×׳•
   ׳•׳”׳›׳₪׳×׳•׳¨ ׳§׳•׳₪׳¥ ׳‘׳“׳™׳•׳§ ׳›׳©׳ž׳¡׳×׳›׳œ׳™׳ ׳¢׳œ׳™׳•. */
.cf-submit { position: relative; min-width: 0; }
.cf-submit:disabled { cursor: progress; filter: saturate(0.75); transform: none; }
.cf-submit .cf-spin {
    display: none; flex: 0 0 auto;
    width: 1rem; height: 1rem; border-radius: 50%;
    border: 2px solid rgba(58, 42, 21, 0.28); border-top-color: #3a2a15;
    animation: cf-spin 0.7s linear infinite;
}
.cf-submit.is-busy .cf-spin { display: block; }
@keyframes cf-spin { to { transform: rotate(360deg); } }

/* ---- ׳ž׳¦׳‘ ׳”׳¦׳œ׳—׳” ---- */
.cf-done { text-align: center; padding: 0.8rem 0 0.4rem; }
.cf-done[hidden] { display: none; }
.cf-done.is-in { animation: cf-done-in 0.45s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
.cf-done-mark {
    width: 3.2rem; height: 3.2rem; margin: 0 auto 0.7rem;
    display: grid; place-items: center;
    border-radius: 50%; font-size: 1.7rem; font-weight: 900;
    color: #fffdf2; background: linear-gradient(180deg, #4f9a58, #2f6f38);
    box-shadow: 0 4px 0 #245a2c, 0 8px 18px rgba(13, 62, 120, 0.25);
    animation: cf-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 0.1s both;
}
.cf-done-txt {
    margin: 0 0 1rem; font-size: 0.98rem; font-weight: 700; line-height: 1.6; color: #3f5f2f;
}
.cf-done-txt:focus { outline: none; }
/* ---- ספירה לחזרה אוטומטית לעמוד הבית ----
   טקסט משני ודק: הוא **הודעה** ולא פעולה, וכל משקל נוסף היה מתחרה
   ב"שליחת פנייה נוספת" שמעליו. ‎[hidden]‎ מפורש -‎.cf-done‎ הוא
   ‎text-align: center‎ ולא flex, אבל הכלל נשמר לעקביות עם השאר. */
.cf-back {
    margin: 0.85rem 0 0; font-size: 0.78rem; line-height: 1.5;
    color: #6b5a3c; opacity: 0.85;
}
.cf-back[hidden] { display: none; }
.cf-back b { font-weight: 800; font-variant-numeric: tabular-nums; }
/* ‎tabular-nums‎ אינו קישוט: בלעדיו רוחב הספרה משתנה בכל שנייה והשורה
   כולה רוקדת סביב הכפתור שאחריה. */
.cf-back-stay {
    margin-inline-start: 0.5rem;
    background: none; border: none; padding: 0;
    font: inherit; color: var(--c-gold-deep, #8a6a1e);
    text-decoration: underline; cursor: pointer;
}
.cf-back-stay:hover, .cf-back-stay:focus-visible { color: #5d4712; }
@media (pointer: coarse) { .cf-back-stay { display: inline-block; min-height: 2.75rem; } }
@keyframes cf-done-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cf-pop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* ׳™׳¢׳“׳™ ׳ ׳’׳™׳¢׳”: ׳×׳™׳‘׳× ׳”׳”׳¡׳›׳ž׳” ׳•׳”׳›׳₪׳×׳•׳¨׳™׳ ׳’׳“׳œ׳™׳ ׳‘׳ž׳’׳¢ (׳—׳•׳§ ׳”׳ž׳•׳‘׳™׳™׳œ) */
@media (pointer: coarse) {
    .cf-agree { min-height: 2.75rem; align-items: center; }
    .cf-cb { width: 1.25rem; height: 1.25rem; }
    .contact-page .cms-btn { min-height: 2.75rem; }
}
/* במובייל הקלף כבר בגודלו המרבי (‎94vw‎), ולכן מה שמתכווץ הוא הטיפוגרפיה
   ולא הקלף: נמדד ששטח הכתיבה יורד ל-247px, ובגודל של הדסקטופ המילה
   האחרונה של כל שורה נחתכה. */
@media (max-width: 640px) {
    /* הקישוטים המצוירים (תליון ימני, גלובוס, פנס) חודרים פנימה כ-20% מכל צד,
       ובמובייל הם בלעו את התוויות (נמדד: "שם מלא" הוצג חתוך מתחת לגלובוס).
       שטח הכתיבה מצטמצם למרכז הנקי -צר יותר, אבל קריא. */
    /* הורחב לצדדים יחד עם הדסקטופ (בקשת המשתמש): 53% -> 62% מרוחב הקלף.
       הגבולות זהים -הם אחוזים מהציור ולכן אינם תלויים בגודל המסך- ורק
       השוליים כאן נדיבים ב-2% נוספים, כי בקלף קטן כל אחוז הוא פחות
       פיקסלים והתו הראשון קרוב יותר לקישוט. */
    .contact-page .cms-inner { inset: 24% 15% 13% 25%; padding: 0 1.4rem 0.5rem 0.2rem; }
    .contact-page .cms-title.cf-title { font-size: 1.05rem; margin: 0.3rem 0 0.75rem; }
    .cf-intro { font-size: 0.76rem; margin-bottom: 0.6rem; }
    .cf-form { gap: 0.55rem; }
    .cf-label { font-size: 0.73rem; }
    .cf-opt { font-size: 0.68rem; }
    .cf-form input[type="text"], .cf-form input[type="email"], .cf-form textarea {
        padding: 0.4rem 0.5rem; font-size: 0.82rem;
    }
    .cf-form textarea { min-height: 4.2rem; }
    .cf-agree > span { font-size: 0.6rem; }
    .cf-err, .cf-formerr { font-size: 0.7rem; }
    .cf-count { font-size: 0.68rem; }
    .contact-page .cms-btn { padding: 0.5rem 1.1rem; font-size: 0.84rem; }
    .cf-done-mark { width: 2.6rem; height: 2.6rem; font-size: 1.4rem; }
    .cf-done-txt { font-size: 0.86rem; }
}
@media (prefers-reduced-motion: reduce) {
    .cf-done.is-in, .cf-done-mark { animation: none; }
    .cf-submit .cf-spin { animation-duration: 2s; }
}


/* ==== שורת כפתורי הפעולה בסוף עמוד CMS ====
   הכפתורים מגיעים ממאגר הכפתורים ונושאים ‎cms-btn‎ כמו בכל מקום -ולכן
   ‎.cms-actions‎ נוסף לרשימת ההקשרים של הכללים שלהם, אחרת לא היה להם עיצוב
   כלל (הם אינם בתוך ‎.cms-content‎). השורה יושבת בתוך ‎.cms-inner‎ ולכן היא
   נגללת עם התוכן. */
.cms-actions {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem;
    margin-top: 1.2rem; padding-top: 0.9rem;
    border-top: 1px solid rgba(120, 80, 26, 0.22);
}
/* ברקעים הכהים הקו העליון בהיר, אחרת הוא נעלם */
.cms-bg-blue .cms-actions, .cms-bg-night .cms-actions, .cms-bg-wood .cms-actions {
    border-top-color: rgba(255, 231, 163, 0.28);
}
.cms-actions .cms-btn { margin: 0; }

/* ==================== יועץ הטירה (צ'אט AI) ====================
   הקלף הוא **תמונה** עם שטח כתיבה מצויר, ולכן כל הפריסה נגזרת מהמדידה
   שב-‎data/chatbg.json‎ (‎--chat-ratio‎ ו-‎--chat-t/r/b/l‎) ולא ממספרים בקוד:
   לשני הקלפים יחס שונה (0.697 מול 0.733) והדמות תופסת אצל כל אחד רוחב אחר.
   אותו נימוק בדיוק של שלטי הכיתוב בתיק העבודות. */

/* כלי נגישות: תווית שקיימת לקורא מסך ואינה נראית */
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap;
}

.chat-modal {
    position: fixed;
    inset: 0;
    z-index: 130;               /* מעל התוכן והפוטר, מתחת לפאנל הניהול (125+) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2vh 1rem;
    background: rgba(6, 18, 38, 0.62);
    /* בלי ‎backdrop-filter‎: הסצנה מאחור היא חלק מהחוויה, וטשטוש הופך אותה
       לכתם צבע -אותו שיקול שכבר תועד כאן על שקיפות חלונות העריכה. */
}
.chat-modal[hidden] { display: none; }

/* ---- כשפאנל הניהול פתוח, הצ'אט יורד מתחתיו ----
   **כדי שאפשר יהיה לכוון את מיקום הטקסט בזמן אמת** (בקשת המשתמש): הצ'אט
   ב-z:130 והפאנל ב-125, כלומר הצ'אט כיסה אותו לגמרי ואי אפשר היה לגעת
   במחוונים בזמן שהוא פתוח.
   **‎body.admin-on‎ ולא ‎:has()‎.** ההערה הקודמת כאן נימקה ‎:has()‎ בכך
   ש"הפאנל אינו מסמן היום שהוא פתוח" -היום הוא כן (‎adminBodyFlag‎), ונמדד
   שהמחיר של ‎:has()‎ שנושאו ה-‎body‎ הוא **פי שישה על כל חישוב סגנון במסמך**:
   נושא כזה מסמן את כל המסמך כ"מושפע", ולכן כל פריים של כל אנימציה בסצנה
   שילם עליו. עם הפאנל הפתוח (23,655 אלמנטים) זה תפס את החוט הראשי דרך קבע.
   ראה ההערה המלאה ליד תג ה-‎<html>‎ ב-‎templates/layout.php‎. */
body.admin-on .chat-modal { z-index: 118; }
/* וההחשכה יורדת -אחרת חצי מהפאנל נראה מבעד לשכבה כהה בזמן שמכווננים */
body.admin-on .chat-modal { background: rgba(6, 18, 38, 0.28); }

/* ---- הכרטיס ----
   ‎aspect-ratio‎ מהמדידה, וגובה קודם לרוחב: הקלף פורטרטי, ועל מסך רחב מה
   שנגמר הוא הגובה. ‎dvh‎ ולא ‎vh‎ -חוק מתועד: באייפון ‎vh‎ נמדד מול ה-viewport
   הגדול, בלי סרגלי ספארי, והקצוות יוצאים מהמסך. */
.chat-card {
    position: relative;
    aspect-ratio: var(--chat-ratio, 0.7);
    height: min(96dvh, 900px);
    max-width: 100%;
    /* אנימציית הכניסה: זום מתוך הדלת, מסונכרן ב-JS עם פרץ האור */
    opacity: 0;
    transform: scale(0.24) translateY(6%);
    transition: opacity 0.5s ease, transform 0.72s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.chat-modal.is-in .chat-card { opacity: 1; transform: none; }

.chat-bg { display: block; position: absolute; inset: 0; }

/* ---- להבת הנר ----
   הלהבה **מצוירת** בקלף; מה שנוסף כאן הוא ההילה החיה סביבה. ‎screen‎ מוסיף
   אור ואינו צובע, ולכן הציור נשאר כפי שהוא ורק מקבל נשימה.
   שתי אנימציות בקצבים שאינם כפולה זה של זה (1.9s ו-2.7s) -בקצב אחד העין
   קולטת את המחזור אחרי שניים-שלושה סיבובים וזה מפסיק להיקרא כלהבה. */
.chat-candle {
    position: absolute;
    width: calc(var(--flame-r, 8%) * 2);
    aspect-ratio: 1;
    translate: -50% -50%;
    pointer-events: none;
    mix-blend-mode: screen;
    background: radial-gradient(closest-side,
                rgba(255, 246, 214, 0.9) 0%, rgba(255, 214, 130, 0.5) 32%,
                rgba(255, 170, 60, 0.18) 60%, rgba(255, 150, 40, 0) 100%);
    animation: candle-glow 1.9s ease-in-out infinite, candle-sway 2.7s ease-in-out infinite;
}
.chat-candle[hidden] { display: none; }
@keyframes candle-glow {
    0%, 100% { opacity: 0.72; scale: 0.94; }
    38%      { opacity: 1;    scale: 1.06; }
    64%      { opacity: 0.84; scale: 0.99; }
}
@keyframes candle-sway {
    0%, 100% { translate: -50% -50%; }
    50%      { translate: -49.2% -51.4%; }
}
.chat-bg img { width: 100%; height: 100%; object-fit: fill; display: block; }

/* ---- אזור הכתיבה ----
   ממוקם בדיוק על הקלף המצויר לפי המדידה. ‎inset‎ לוגי לא מתאים כאן: המדידה
   פיזית (הדמות עומדת בצד שמאל בשני הקלפים), ובעמוד RTL ‎inset-inline-start‎
   היה מתהפך ומניח את הטקסט על המכשף. */
.chat-inner {
    position: absolute;
    top: var(--chat-t, 15%);
    right: var(--chat-r, 9%);
    bottom: var(--chat-b, 20%);
    left: var(--chat-l, 43%);
    display: flex;
    flex-direction: column;
    min-height: 0;              /* בלעדיו אזור ההודעות אינו מתכווץ ואינו נגלל */
    gap: 0.5rem;
}

/* **הכותרת ממורכזת וה-‎✕‎ מוחלט.** ב-‎space-between‎ היא נדחקה אל הקצה הימני
   של שטח הכתיבה, בדיוק אל הקיסוס והזהב המצוירים -וזה מה שנקרא "בצד מדי".
   ריפוד סימטרי בשני הצדדים, אחרת המרכוז מזויף (אותה מלכודת של כותרת כרטיס
   הפרויקט). */
.chat-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 2.4rem;
    min-height: 2rem;
}
.chat-title {
    margin: 0;
    font-family: var(--heading-font, 'Suez One'), serif;
    font-size: clamp(0.95rem, 2.6cqw, 1.25rem);
    color: #4a2c10;
    /* **הילה בגוון הקלף, לא הזזה.** נמדד ‎scrollWidth == clientWidth‎ -הכותרת
       אינה נחתכת כלל; היא פשוט יושבת מעל הקיסוס והזהב המצוירים בשוליים, ושם
       היא אינה קריאה. אותה מסקנה בדיוק שכבר תועדה על קלף יצירת הקשר.
       ‎text-shadow‎ ולא ‎drop-shadow‎: אין כאן מילוי מדורג. */
    text-shadow:
        0 0 5px rgba(247, 235, 205, 0.95),
        0 0 9px rgba(247, 235, 205, 0.85),
        0 1px 0 rgba(255, 250, 235, 0.9);
}
.chat-x {
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    translate: 0 -50%;
    flex: 0 0 auto;
    width: 1.9rem; height: 1.9rem;
    border-radius: 50%;
    border: 1px solid rgba(90, 55, 20, 0.35);
    background: rgba(255, 250, 235, 0.7);
    color: #6b431a;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}
.chat-x:hover { background: #fff; transform: scale(1.08); }

/* ---- ההודעות ----
   פס גלילה מעוצב (חוק הפרויקט), ובגוון הקלף כדי שלא ייראה כרכיב זר עליו. */
.chat-log {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-inline-end: 0.35rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(122, 82, 34, 0.5) transparent;
}
.chat-log::-webkit-scrollbar { width: 8px; }
.chat-log::-webkit-scrollbar-track { background: transparent; }
.chat-log::-webkit-scrollbar-thumb {
    background: rgba(122, 82, 34, 0.45); border-radius: 999px;
    border: 2px solid transparent; background-clip: padding-box;
}

.chat-msg {
    max-width: 92%;
    padding: 0.45rem 0.7rem;
    border-radius: 12px;
    font-size: clamp(0.78rem, 2.1cqw, 0.95rem);
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
    animation: chat-msg-in 0.28s ease-out both;
}
@keyframes chat-msg-in { from { opacity: 0; transform: translateY(6px); } }
/* היועץ: ללא בועה -הטקסט יושב ישירות על הקלף, כמו כתב יד עליו */
.chat-msg-bot { align-self: flex-start; color: #40260e; background: rgba(255, 252, 240, 0.42); }
/* המבקר: בועה כחולה-דיו, הצבע היחיד שכבר קיים על שני הקלפים */
.chat-msg-me {
    align-self: flex-end;
    background: linear-gradient(180deg, rgba(30, 74, 140, 0.92), rgba(20, 54, 108, 0.92));
    color: #eaf2ff;
    border: 1px solid rgba(255, 231, 163, 0.35);
}
.chat-msg-err { align-self: stretch; background: rgba(150, 40, 25, 0.14); color: #7e2314; border: 1px solid rgba(150, 40, 25, 0.35); }

/* Game button inside an advisor reply (added by chat.js when the visitor asked
   to play). Block-level so it sits under the teaser text, gold like the site's CTAs. */
.chat-game-btn {
    display: block;
    width: max-content;
    max-width: 100%;
    margin-top: 0.55rem;
    padding: 0.42rem 0.95rem;
    min-height: 2.4rem;
    line-height: 1.5;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffe7a3, #d9a93c);
    color: #3a2408;
    border: 1px solid rgba(120, 78, 16, 0.55);
    box-shadow: 0 2px 6px rgba(40, 20, 0, 0.28);
    font-weight: 700;
    text-decoration: none;
    white-space: normal;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.chat-game-btn:hover, .chat-game-btn:focus-visible { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(40, 20, 0, 0.35); }

/* מחוון הקלדה -שלוש נקודות, לא טקסט: טקסט "כותב..." מתחלף בהודעה ונקרא כקפיצה */
.chat-typing { display: inline-flex; gap: 0.25rem; align-items: center; }
.chat-typing i {
    width: 0.4rem; height: 0.4rem; border-radius: 50%;
    background: #7a5222; display: block;
    animation: chat-dot 1.05s ease-in-out infinite;
}
.chat-typing i:nth-child(2) { animation-delay: 0.16s; }
.chat-typing i:nth-child(3) { animation-delay: 0.32s; }
@keyframes chat-dot { 0%, 100% { opacity: 0.28; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* ---- הצעות פתיחה ---- */
.chat-starters { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.chat-starter {
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(122, 82, 34, 0.45);
    background: rgba(255, 250, 235, 0.6);
    color: #5d3a14;
    font-size: clamp(0.68rem, 1.8cqw, 0.8rem);
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.chat-starter:hover { background: #fff; border-color: rgba(122, 82, 34, 0.8); }

/* ---- שורת הקלט ---- */
.chat-form { display: flex; gap: 0.4rem; align-items: flex-end; }
.chat-form textarea {
    flex: 1 1 auto;
    min-width: 0;
    /* **‎overflow: hidden‎ כברירת מחדל.** ‎textarea‎ מציג פס גלילה ברגע
       שהתוכן חורג ולו בפיקסל, ובשורה אחת עם ריפוד זה קורה מעיגול של
       ‎line-height‎ -פס גלילה על שדה ריק. הגובה נקבע ב-JS לפי התוכן, וה-JS
       הוא זה שמחזיר ‎auto‎ כשבאמת נגמר המקום. */
    overflow-y: hidden;
    min-height: 2.4rem;
    max-height: 7rem;
    padding: 0.4rem 0.6rem;
    border-radius: 10px;
    border: 1px solid rgba(122, 82, 34, 0.45);
    background: rgba(255, 252, 242, 0.85);
    color: #3a220c;
    font: inherit;
    font-size: clamp(0.78rem, 2.1cqw, 0.92rem);
    resize: none;
    line-height: 1.5;
}
.chat-form textarea:focus { outline: 2px solid rgba(122, 82, 34, 0.6); outline-offset: 1px; }
.chat-send {
    flex: 0 0 auto;
    width: 2.2rem; height: 2.2rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 231, 163, 0.5);
    background: linear-gradient(180deg, #e8b74e, #c8902f);
    color: #3a220c;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform 0.18s ease, filter 0.18s ease;
}
.chat-send:hover:not(:disabled) { transform: scale(1.08); filter: brightness(1.08); }
.chat-send:disabled { opacity: 0.45; cursor: default; }
.chat-send-ico { display: block; rotate: 180deg; font-size: 0.9rem; line-height: 1; }

.chat-note { margin: 0; font-size: 0.72rem; color: #7e4a1c; }
.chat-note[hidden] { display: none; }

/* ---- ההבהרה הרגולטורית של הצ'אט ----
   גלויה מתחת לשדה הכתיבה עד להודעה הראשונה או עד סגירה ידנית, ומכאן
   ואילך היא צ׳יפ ‎⚠️‎ בכותרת (‎.chat-note-badge‎). ‎flex-shrink: 0‎ הוא
   התנאי כל עוד היא מוצגת: הקלף מוגבל לשטח הכתיבה המצויר
   (‎--chat-t/r/b/l‎), וב-flex צפוף פריט מצטמצם מתחת לגובה התוכן -כלומר
   ההבהרה הייתה נחתכת בדיוק במסך הצר, שם היא נחוצה לא פחות. מה שמתכווץ
   במקומה הוא יומן השיחה. */
.chat-ai-note {
    flex: 0 0 auto;
    margin: 0.4rem 0 0;
    font-size: 0.68rem;
    line-height: 1.45;
    color: #6f4a22;
    text-align: center;
    /* **רצועה בגוון הקלף, ולא הילה בלבד.** נמדד ‎scrollWidth == clientWidth‎
       ואפס חריגה מ-‎.chat-inner‎ -הטקסט אינו חתוך, הוא יושב מעל העיטור
       המצויר ושם אינו קריא. זו המסקנה שכבר נקנתה בקלף יצירת הקשר, אבל
       שם די היה בהילה; כאן **לא**: במובייל שטח הכתיבה צר (‎194px‎) והעיטור
       שמתחתיו צפוף (פרחים, כדור בדולח), וההילה נבלעה בו. נמדד בצילום.
       רצועה עובדת בכל הקלפים -יש כמה, ולכל אחד עיטור אחר- ולכן היא
       הפתרון היציב, ולא כיול פר-קלף.

       ‎rgba‎ ולא צבע אטום: הקלף עדיין נראה מאחוריה, כלומר היא נקראת כחלק
       מהמגילה ולא כתיבה זרה שהודבקה עליה. */
    background: rgba(253, 246, 226, 0.9);
    border: 1px solid rgba(122, 82, 34, 0.28);
    border-radius: 9px;
    padding: 0.32rem 0.45rem;
    /* עמודה פנויה ל-‎✕‎ בכל השורות. **הוא עולה שורה** (נמדד ‎27→42px‎
       בדסקטופ, ‎43→59px‎ ב-390), וזה מחיר שהתקבל במודע: הרצועה יורדת
       היום עם ההודעה הראשונה, ולכן השורה הנוספת קיימת רק במסך הפתיחה
       שבו היומן מחזיק הודעה אחת -נמדד שנשארו שם ‎700px‎ פנויים בדסקטופ
       ו-‎327px‎ ב-390. ההערה הישנה כאן ("מה שמתכווץ הוא יומן השיחה")
       נכתבה כשההבהרה הייתה קבועה לכל אורך השיחה. */
    padding-inline-end: 1.45rem;
    text-shadow: 0 0 3px rgba(253, 246, 226, 0.9);
    position: relative;
}
/* ‎display‎ גובר על ‎hidden‎ -כאן זה ‎block‎ של ‎<p>‎ ולכן זה עובד ממילא,
   אבל הכלל נשאר מפורש: זו מלכודת שכבר חזרה בפרויקט שש פעמים. */
.chat-ai-note[hidden] { display: none; }
.chat-ai-note b { color: #5a3a16; }
.chat-ai-note a {
    color: #8a4b12;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}
.chat-ai-note a:hover { color: #6b4718; }

/* ה-‎✕‎ של ההבהרה -**מוחלט, בעמודה שהריפוד פינה לו**. פריט inline בתוך
   פסקה ממורכזת נגרר לסוף השורה האחרונה ומזיז את המרכוז לפי אורך הטקסט,
   וכאן הטקסט נערך בניהול ומשתנה בין הקלפים (נוסח זכר/נקבה) ובין הרוחבים.

   **גרסה שנפסלה במדידה: הכפתור על צלע הרצועה, חצי בחוץ.** היא נועדה
   לחסוך את הריפוד, ונשענה על ‎9px‎ "שוליים ריקים" שנמדדו בקצה -אבל אלה
   ה-‎padding‎ עצמו, והטקסט צמוד אליו. נמדד שהכפתור נחת **על "לפנייה
   אישית"**, שהוא האחרון בשורה ולכן יושב בדיוק שם, ובנוסף הוסיף
   ‎scrollWidth‎ של ‎8px‎ לפסקה. הצילום הראה את זה בבירור; מדד "אינו מוסיף
   שורה" עבר עליו בהצלחה, כי הוא באמת לא הוסיף -הוא כיסה.

   ממורכז אנכית: הרצועה היא שורה אחת בדסקטופ ושלוש ב-390, והעמודה
   הפנויה משותפת לכולן. */
.chat-note-x {
    position: absolute;
    inset-inline-end: 0.24rem;
    top: 50%;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 1.05rem;
    height: 1.05rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(90, 55, 20, 0.3);
    background: rgba(255, 250, 235, 0.72);
    color: #7a5322;
    font-size: 0.56rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
/* ‎transform: scale‎ ו-‎translate‎ כנכס נפרד מצטברים, ולכן המרכוז האנכי
   אינו נדרס בריחוף. */
.chat-note-x:hover { background: #fff; color: #3f2708; transform: scale(1.14); }
.chat-note-x:focus-visible { outline: 2px solid rgba(122, 82, 34, 0.7); outline-offset: 2px; }

/* צ׳יפ החזרה, בכותרת ובצד הנגדי ל-‎✕‎ של החלון. ‎.chat-head‎ כבר מרפד
   ‎2.4rem‎ **סימטרית** בשני הצדדים (מרכוז הכותרת), ולכן יש כאן מקום בלי
   לגעת בפריסה. */
.chat-note-badge {
    position: absolute;
    inset-inline-end: 0;
    top: 50%;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(90, 55, 20, 0.3);
    background: rgba(255, 250, 235, 0.66);
    font-size: 0.72rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}
/* ‎display: grid‎ גובר על ‎hidden‎ -בלי זה הצ׳יפ נראה על המסך בזמן
   שהמאפיין ‎true‎. המלכודת שכבר עלתה כאן בעורך, בפוטר ובכרטיס. */
.chat-note-badge[hidden] { display: none; }
/* ‎scale‎ ב-‎transform‎ ו-‎translate‎ כנכס נפרד: הם מצטברים, ולכן המרכוז
   האנכי אינו נדרס בריחוף. */
.chat-note-badge:hover { background: #fff; transform: scale(1.1); }
.chat-note-badge:focus-visible { outline: 2px solid rgba(122, 82, 34, 0.7); outline-offset: 2px; }

/* ================= עמוד מסמך משפטי =================
   ‎/terms‎, ‎/privacy‎, ‎/accessibility‎ -**אותה מגילה של המודאל**, ולא עיצוב
   שני: ‎.scroll-doc‎ ו-‎.scroll-content‎ משותפים, ולכן תמונת המגילה, אזור
   הכתיבה שנמדד באחוזים, הטיפוגרפיה ופס הגלילה מוגדרים פעם אחת בלבד.
   מה שנוסף כאן הוא **המיכל** שנותן למגילה פרופורציה בתוך עמוד, במקום
   ‎.scroll-win‎ שעושה זאת בתוך מודאל. */
.legal-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(0.6rem, 2vh, 1.6rem) 1rem clamp(1rem, 3vh, 2rem);
}
.legal-scroll {
    position: relative;
    aspect-ratio: 600 / 900;
    /* **חובה: ‎.content‎ הוא ‎pointer-events: none‎** (הוא מוותר על האירועים
       כדי שהסצנה שמאחוריו תהיה אינטראקטיבית), ורק ‎a‎/‎button‎/‎[role=button]‎
       מקבלים ‎auto‎ בחזרה. אזור הגלילה הוא ‎<div>‎, ולכן הוא לא קיבל אירועי
       גלגלת ומגע כלל: נמדד ש-‎elementFromPoint‎ במרכז הטקסט מחזיר ‎BODY‎,
       ושגלגלת של 400 הזיזה את **החלון** ב-124px בעוד ש-‎scrollTop‎ של
       המסמך נשאר 0. במודאל זה לא קרה -הוא יושב מחוץ ל-‎.content‎.
       זה הכלל המתועד: כל אלמנט אינטראקטיבי חדש בתוך ‎.content‎ חייב
       ‎pointer-events: auto‎, אחרת הוא פשוט אינו מגיב. */
    pointer-events: auto;
    /* **הגובה הוא מה שמגבילים, לא הרוחב.** היחס כאן הוא ‎1:1.5‎, ולכן
       ‎width: 78vh‎ (הניסיון הראשון) נתן מגילה בגובה ‎117vh‎ שחרגה מהמסך
       -נמדד ‎741x1112‎ בחלון של 950. מגבילים את הצלע שנגמרת.

       ‎9rem‎ הם הסרגל העליון, הפוטר והריפוד; ‎96vw * 1.5‎ הוא הגבול השני,
       שתופס במובייל -שם **הרוחב** הוא שנגמר קודם.

       ‎dvh‎ ולא ‎vh‎ (חוק מתועד): באייפון ‎vh‎ נמדד מול ה-viewport הגדול,
       בלי סרגלי ספארי, ואז תחתית המגילה יוצאת מהאזור הנראה. שורת ה-‎vh‎
       נשארת לפניה כנפילה-לאחור. */
    height: min(calc(100vh - 9rem), calc(96vw * 1.5));
    height: min(calc(100dvh - 9rem), calc(96vw * 1.5));
}
/* ‎.scroll-doc‎ נושא במודאל את אנימציות הפרישה, ומוגדר שם
   ‎animation-play-state: paused‎ -כלומר בעמוד הוא היה נתקע על פריים 0 של
   ‎scroll-fade‎, שהוא ‎opacity: 0‎, והמגילה לא הייתה נראית כלל. כאן היא
   פשוט קיימת, עם כניסה רכה משלה. */
.legal-scroll .scroll-doc {
    animation: scroll-fade 0.35s ease both;
    animation-play-state: running;
}
@media (prefers-reduced-motion: reduce) {
    .legal-scroll .scroll-doc { animation: none; opacity: 1; }
}

/* שורת המעבר בין המסמכים, בתוך המגילה. הכפתורים בגוון הזהב של הקלף
   ולא ‎cms-btn‎ -אלה חיים בהקשר של קלף עמוד, וכאן הרקע הוא נייר. */
.legal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin: 1.6rem 0 0.4rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(122, 82, 34, 0.28);
}
.legal-nav a {
    font-size: 0.84rem;
    color: #6b4718;
    text-decoration: none;
    border: 1px solid rgba(122, 82, 34, 0.45);
    border-radius: 10px;
    padding: 0.35rem 0.8rem;
    background: rgba(255, 246, 226, 0.5);
    transition: background 0.18s, color 0.18s;
}
.legal-nav a:hover { background: rgba(211, 154, 26, 0.22); color: #4a3418; }

/* ---- מובייל ----
   הקלף פורטרטי וצר, ובטלפון אין מקום לשוליים. ‎container-type‎ נותן ל-‎cqw‎
   להימדד מול הכרטיס עצמו, כך שהיחס בין הטקסט לקלף קבוע בכל רוחב מסך -
   בלי סדרת media queries. */
.chat-card { container-type: inline-size; }
@media (max-width: 640px) {
    .chat-modal { padding: 1vh 0.4rem; }
    .chat-card { height: min(94dvh, 780px); }
}
/* **יעדי נגיעה לפי ‎pointer: coarse‎ ולא לפי רוחב** -טאבלט עובר כל סף רוחב
   ובכל זאת נוגעים בו באצבע. נמדד ב-390: 42px ו-38px, שניהם מתחת ל-44 שהפרויקט
   מחייב. ‎2.75rem‎ הוא בדיוק 44px, אותו ערך של שאר הפקדים בפאנל. */
@media (pointer: coarse) {
    .chat-x { width: 2.75rem; height: 2.75rem; font-size: 1rem; }
    .chat-send { width: 2.75rem; height: 2.75rem; }
    .chat-starter { min-height: 2.2rem; }
    .chat-note-badge { width: 2.4rem; height: 2.4rem; font-size: 0.95rem; }

    /* ה-‎✕‎ של ההבהרה נשאר קטן בציור ומקבל שטח נגיעה מורחב ב-‎::before‎ -
       הגדלת הכפתור עצמו הייתה בולעת חצי מרצועה שרוחבה ‎194px‎ באייפון.
       **‎2.2rem‎ ולא ‎2.75rem‎ שהפרויקט מחייב, וזו החלטה ולא השמטה:** שטח
       של 44px מפינת הרצועה מגיע אל "לפנייה אישית" שמתחתיו -הקישור
       שהרגולציה מחייבת- וסגירה שנוגעת בו במקום היא באג חמור בהרבה
       מכפתור נוחות שקצת קטן. הוא גם הפקד היחיד כאן שהמצב שלו הפיך
       (הצ׳יפ בכותרת) והוא מיותר ממילא אחרי ההודעה הראשונה.

       השטח ממורכז על הכפתור בעמודה שלו: אופקית העמודה רחבה ‎23px‎ ומשני
       צדדיה יש עוד שוליים, ואנכית הרצועה גבוהה ‎42-59px‎ -כלומר ‎35px‎
       נכנסים בלי לגעת ב"לפנייה אישית" שממורכז לצידו.

       ‎inset-inline-end + width‎ ו-‎top + height‎ -משוואה מלאה ולא עודפת.
       ‎inset‎ בארבעה צדדים יחד עם ‎width/height‎ הוא מה שגרם לדפדפן לוותר
       על ‎left‎ ולהשאיר את שטח הנגיעה במקום הלא-נכון (מלכודת דלת הטירה). */
    .chat-note-x::before {
        content: '';
        position: absolute;
        inset-inline-end: -0.28rem;
        top: 50%;
        width: 2.2rem;
        height: 2.2rem;
        translate: 0 -50%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .chat-card { transition: opacity 0.2s ease; transform: none; }
    .chat-candle { animation: none; opacity: 0.8; }
    .chat-msg { animation: none; }
    .chat-typing i { animation: none; opacity: 0.6; }
}

/* ============================================================
   קלפי הבתים -לחיצה על דלת של בית פותחת קלף עם תמונה וטקסט
   ============================================================
   בנוי על אותם עקרונות של קלף הצ'אט, ובכוונה **לא** משתמש באותן מחלקות:
   שם יש נר, שיחה ושדה קלט, וכאן זו תצוגת תוכן בלבד. מה שכן משותף הוא
   המודל -‎aspect-ratio‎ מהמדידה, שטח כתיבה ב-‎inset‎ ממנה, וכניסה מנקודת
   הלחיצה. */

/* ---- הדלת שעל הבית ---- */
.hdoor {
    position: absolute;
    translate: -50% -50%;       /* המלבן נמדד ממרכזו -כך גרירה בפאנל אינטואיטיבית */
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    pointer-events: auto;       /* חובה -‎.scene‎ כולה none */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation; /* בלי "הקש-פעמיים-להגדלה" בטלפון */
}
/* יעד נגיעה: דלת מצוירת של בית היא ~20px בטלפון. ‎left/top‎ בלבד ולא ‎inset‎ -
   ‎inset‎ קובע ארבעה צדדים, וביחד עם ‎width/height‎ המשוואה עודפת וב-RTL
   הדפדפן מוותר על ‎left‎; זה כבר נמדד ותועד כאן על דלת הטירה. */
.hdoor::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 46px);
    height: max(100%, 46px);
    translate: -50% -50%;
}
.hdoor:focus-visible { outline: 3px solid var(--c-gold-light, #ffe7a3); outline-offset: 3px; border-radius: 4px; }

/* ההילה היא מה שמסגיר שאפשר ללחוץ. ‎screen‎ מוסיף אור ואינו צובע, ולכן
   הציור של הבית נשאר כפי שהוא -אותו שיקול של הילת הנר. */
.hdoor-glow {
    position: absolute;
    inset: -18%;
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: screen;
    background: radial-gradient(closest-side,
                rgba(255, 231, 163, 0.55) 0%, rgba(255, 210, 120, 0.22) 45%, transparent 72%);
    animation: hdoor-call 3.4s ease-in-out infinite;
}
@keyframes hdoor-call {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
}
.hdoor:hover .hdoor-glow { opacity: 1; animation: none; }

/* ---- זכוכית מגדלת במעבר עכבר ----
   ההילה אומרת "יש כאן משהו"; הזכוכית אומרת **מה** קורה בלחיצה -מסתכלים
   פנימה. מצוירת ב-SVG מוטבע בגוונים של האתר (רים זהב, זכוכית כחלחלה,
   מתאר כהה לניגודיות מול בית בהיר) ולא באמוג'י 🔍, שגופן המערכת מצייר
   אחרת בכל מכשיר ואינו נשלט בצבע.

   **רק ב-‎hover: hover‎.** במגע אין מעבר עכבר, וסימן שמתגלה במחווה שאינה
   קיימת הוא סימן שנעלם -אותו כלל שכבר נקנה כאן בכיתוב של גלריית העבודות
   ובדלת הטירה; שם ההילה והכיתוב החד-פעמי הם מה שמסגיר את הדלת.

   ‎::after‎ ולא אלמנט במרקאפ: הדלת נפלטת בשני מקומות (‎templates/scene.php‎
   ו-‎syncDoors‎ ב-‎js/housecard.js‎), ושני מרקאפים היו נפרדים בשינוי הראשון. */
@media (hover: hover) {
    .hdoor::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        /* יחסי לדלת אבל עם רצפה ותקרה: דלת מצוירת נעה בין ~20px ל~60px,
           ואייקון שנגזר רק מאחוזים היה זעיר בבתים הקטנים. */
        width: clamp(19px, 64%, 34px);
        aspect-ratio: 1;
        translate: -50% -50%;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%230d284e' stroke-width='4.6' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6.4'/%3E%3Cpath d='M14.7 14.7 20.4 20.4'/%3E%3C/g%3E%3Ccircle cx='10' cy='10' r='6.4' fill='%23bfe1ff' fill-opacity='.32'/%3E%3Cg fill='none' stroke='%23ffe7a3' stroke-width='2.1' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6.4'/%3E%3Cpath d='M14.7 14.7 20.4 20.4'/%3E%3C/g%3E%3Cpath d='M6.7 8.3a4.6 4.6 0 0 1 3-2.6' fill='none' stroke='%23ffffff' stroke-width='1.3' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E") center / contain no-repeat;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
        opacity: 0;
        scale: 0.72;
        /* ‎scale‎ ולא ‎transform‎: ‎translate‎ כבר תפוס במרכוז, והם נכסים נפרדים
           שמצטברים -אותו תרגיל של קפיצת הדמויות מול ההליכה. */
        transition: opacity 0.18s ease, scale 0.18s cubic-bezier(0.2, 1.4, 0.4, 1);
        pointer-events: none;   /* הדלת היא שנלחצת, לא האייקון */
        z-index: 1;             /* מעל ההילה */
    }
    .hdoor:hover::after, .hdoor:focus-visible::after { opacity: 1; scale: 1; }
    @media (prefers-reduced-motion: reduce) {
        .hdoor::after { transition: opacity 0.18s ease; scale: 1; }
    }
}

/* הכיתוב מעל הדלת. במגע הוא מוצג פעם אחת ונעלם -אותה החלטה של דלת הטירה:
   תווית שנשארת תלויה מעל הסצנה היא רעש, וההילה היא מה שנשאר. */
.hdoor-hint {
    position: absolute;
    left: 50%;
    bottom: 100%;
    translate: -50% 0;
    margin-bottom: 0.35rem;
    padding: 0.16rem 0.5rem;
    border-radius: 999px;
    background: rgba(13, 40, 78, 0.86);
    border: 1px solid rgba(255, 231, 163, 0.5);
    color: #ffe7a3;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.hdoor:hover .hdoor-hint, .hdoor:focus-visible .hdoor-hint { opacity: 1; }
/* ---- שלט קבוע ליד הדלת (‎titlePos‎ = ‎door‎/‎both‎) ----
   אותו אלמנט של הרמז, ולכן אין כאן שני כיתובים שיכולים להיפרד. השינויים
   הם מה שהופך רמז חולף לשלט: הוא נשאר, הוא נושם לשתי שורות (כותרת אמיתית
   ארוכה מ"פרטים", ו-‎nowrap‎ היה מגליש אותה מהסצנה), ויש לו צל שמפריד אותו
   מהשמיים. */
.hdoor[data-hctitle] .hdoor-hint {
    opacity: 1;
    white-space: normal;
    text-align: center;
    text-wrap: balance;
    /* **‎width: max-content‎ ולא רק ‎max-width‎.** הבלוק הממוקם נמדד מול הדלת,
       שרוחבה עשרות פיקסלים בודדים -נמדד ששלט של 104px נדחס ל-58 והתפרק
       לארבע שורות. ‎max-content‎ מחזיר אותו לשורה אחת, והתקרה היא מה שמחזיר
       גלישה לשורה שנייה בכותרת ארוכה. */
    width: max-content;
    max-width: min(46vw, 11rem);
    line-height: 1.25;
    border-radius: 8px;
    background: rgba(13, 40, 78, 0.9);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.38);
}
/* מעבר עכבר על שלט קבוע לא אמור "להדליק" מה שכבר דלוק -רק להבליט */
/* **שלט לזמן קצוב הוא מחלקה ולא אנימציה.**
   הגרסה הראשונה הסתירה אותו באנימציה עם ‎forwards‎, וריחוף נאלץ לכבות אותה -
   מה שהחזיר אותה לרוץ **מההתחלה** ברגע שהעכבר ירד. דווח בדיוק כך: "הוא נעלם
   ואז שוב מופיע". ‎js/housecard.js‎ מוסיף ‎is-faded‎ פעם אחת בתום הזמן, וריחוף
   הוא ‎opacity‎ רגיל שמנצח אותה בסדר הקסקייד -כלומר אין שום דבר שמתאפס. */
.hdoor[data-hctitle] .hdoor-hint { transition: opacity 0.4s ease, scale 0.18s ease, background 0.18s, box-shadow 0.18s; }
.hdoor[data-hctitle="timed"].is-faded .hdoor-hint { opacity: 0; }
/* ריחוף: **בולט בבירור** (בקשת המשתמש) -מסגרת זהב, רקע כהה יותר, הגדלה קלה
   וצל. ‎scale‎ הוא נכס עצמאי ולכן אינו מתנגש ב-‎translate‎ שממרכז את השלט. */
.hdoor[data-hctitle]:hover .hdoor-hint,
.hdoor[data-hctitle]:focus-within .hdoor-hint {
    opacity: 1;
    scale: 1.07;
    color: #fff6dc;
    background: rgba(16, 48, 92, 0.98);
    border-color: var(--c-gold, #ffd15a);
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(255, 209, 90, 0.35);
}
@media (pointer: coarse) {
    .hdoor::before { width: max(100%, 56px); height: max(100%, 56px); }
    .hdoor-hint { animation: hdoor-hint-once 3.5s ease-in-out forwards; }
    /* במגע הרמז נעלם אחרי 3.5 שניות; שלט אינו נעלם. */
    .hdoor[data-hctitle] .hdoor-hint { animation: none; font-size: 0.62rem; max-width: min(40vw, 8rem); }
}
@keyframes hdoor-hint-once {
    0%   { opacity: 0; }
    9%   { opacity: 1; }
    86%  { opacity: 1; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hdoor-glow { animation: none; opacity: 0.6; }
    .hdoor-hint { animation: none; }
}

/* ---- הקלף ---- */
.hcard-modal {
    position: fixed;
    inset: 0;
    z-index: 130;               /* מעל התוכן והפוטר, מתחת לפאנל הניהול (125+) */
    display: flex;
    align-items: center;
    justify-content: center;
    /* **בלי ריפוד.** המרווח סביב הקלף נקבע במחווני הגודל שבניהול ("% מהמסך"),
       וריפוד קבוע כאן מקטין את התיבה שהאחוזים נמדדים מולה -כלומר ‎100%‎ היה
       יוצא ‎96%‎ **וגם** חורג ממנה ונחתך. ברירת המחדל היא ‎94/96‎, אז יש
       מרווח ממילא. */
    padding: 0;
    /* מיכל למידות הקלף. **‎cqw‎ ולא ‎vw‎:** ‎100vw‎ כולל את פס הגלילה, ולכן
       ‎--hc-maxw: 100‎ ביקש רוחב גדול מהמסך בפועל, נחתך ב-‎max-width‎ -
       ו**היחס נשבר**. נמדד ב-‎390‎: ‎380x229‎ ביחס ‎1.662‎ במקום ‎1.707‎.
       השכבה היא ‎fixed; inset: 0‎, כלומר גודלה מוגדר ואינו תלוי בתוכן -
       התנאי ל-‎container-type: size‎. אין בה ילד ‎position: fixed‎, ולכן
       ה-‎contain‎ שהיא גוררת אינו הופך אותה ל-containing block של אף אחד
       (המלכודת שכבר תועדה כאן על ‎@container‎ בפאנל). */
    container-type: size;
    background: rgba(6, 18, 38, 0.62);
    /* בלי ‎backdrop-filter‎ -הסצנה מאחור היא חלק מהחוויה */
}
.hcard-modal[hidden] { display: none; }
/* כשפאנל הניהול פתוח הקלף יורד מתחתיו, כדי שאפשר יהיה לכוון בזמן אמת -
   אותה החלטה בדיוק שכבר תועדה כאן על הצ'אט. */
body.admin-on .hcard-modal { z-index: 118; background: rgba(6, 18, 38, 0.28); }

.hcard-card {
    position: relative;
    aspect-ratio: var(--hc-ratio, 0.7);
    /* גובה קודם לרוחב בקלף פורטרטי, ורוחב קודם ברוחבי -‎min()‎ על שניהם
       נותן את הקטן מביניהם ולכן עובד לשניהם בלי מחלקה נפרדת.
       ‎dvh‎ ולא ‎vh‎ -חוק מתועד: באייפון ‎vh‎ מתעלם מסרגלי ספארי.

       **בלי מכסה בפיקסלים.** היו כאן ‎min(…, 900px)‎ ו-‎min(…, 1100px)‎, ולכן
       המחוונים -שהתווית שלהם אומרת "% מהמסך" -הפסיקו להשפיע לגמרי מעל גודל
       מסך מסוים: נמדד ב-‎1500x950‎ שקלף שהוגדר ‎96%‎ גובה ו-‎93%‎ רוחב יצא
       ‎1100x893‎, כלומר **שניהם** נחתכו במכסה וגרירת המחוון לא שינתה דבר.
       מכסה בפיקסלים סותר הבטחה שנוסחה באחוזים; מי שרוצה קלף קטן יותר מזיז
       את המחוון. */
    /* **מימד בודד קובע, והשני נגזר מהיחס.** קודם היו כאן ‎height‎ ו-‎max-width‎
       יחד, וכשהרוחב היה זה שנחסם הדפדפן חתך אותו אבל **השאיר את הגובה** -
       כלומר היחס נשבר והתמונה (‎object-fit: fill‎) נמתחה. נמדד ב-‎1500x950‎
       במצב ‎100/100‎: ‎1500x950‎ במקום ‎1500x878‎, יחס ‎1.58‎ במקום ‎1.71‎.
       היום הגובה הוא הקטן מבין השניים -הגובה המבוקש, או הרוחב המבוקש מתורגם
       לגובה דרך היחס- ו-‎aspect-ratio‎ גוזר ממנו את הרוחב. זה בדיוק מה
       שההערה בפאנל מבטיחה: "הקטן מבין השניים הוא שקובע, והיחס נשמר תמיד". */
    /* שורת ה-‎dvh/vw‎ היא נפילה-לאחור לדפדפן בלי container queries; מי שתומך
       לוקח את השנייה, ושם היחידות נמדדות מול השכבה עצמה (בלי פס הגלילה). */
    height: min(calc(var(--hc-h, 94) * 1dvh),
                calc(var(--hc-maxw, 96) * 1vw / var(--hc-ratio, 0.7)));
    height: min(calc(var(--hc-h, 94) * 1cqh),
                calc(var(--hc-maxw, 96) * 1cqw / var(--hc-ratio, 0.7)));
    /* רשת ביטחון: הקלף לעולם אינו חורג מהשכבה, גם אם משתנה נשמר פגום */
    max-height: 100%;
    max-width: 100%;
    opacity: 0;
    transform: translate(var(--from-x, 0), var(--from-y, 0)) scale(0.22);
    /* המשך נבחר פר-בית ופר-כיוון. **מספר טהור והיחידה כאן** -משתנה שמכיל
       זמן נכשל בתוך ‎calc‎ ונופל ל-‎initial‎ בלי שגיאה (מלכודת ‎--pf-vcap‎).
       השקיפות מהירה ב-‎0.72‎ מהתנועה, כפי שהיה כשהמספרים היו קבועים. */
    transition: opacity calc(var(--hc-dur, 620) * 0.72ms) ease,
                transform calc(var(--hc-dur, 620) * 1ms) cubic-bezier(0.2, 0.9, 0.25, 1);
}
.hcard-modal.is-open .hcard-card { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .hcard-card { transform: none; transition: opacity 0.2s ease; }
}

/* ‎object-fit: fill‎ ולא ‎contain‎: לכרטיס כבר יש בדיוק היחס של התמונה
   (‎--hc-ratio‎ מהמדידה), ולכן מתיחה מלאה היא בדיוק הצורה -ו-‎contain‎ היה
   משאיר פס בגלל עיגול תת-פיקסלי. */
.hcard-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
}

/* אזור הכתיבה -יושב על שטח הקלף הנקי שנמדד ב-‎make-housecards.php‎ */
.hcard-inner {
    position: absolute;
    inset: var(--hc-t, 20%) var(--hc-r, 10%) var(--hc-b, 18%) var(--hc-l, 45%);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 0.3rem;
    color: #3a2a15;
    text-align: center;
    /* סרגל גלילה מעוצב -חוק בפרויקט */
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 80, 26, 0.55) transparent;
}
/* **‎overflow-anchor: none‎** -התוכן של הקלף מוחלף בכל פתיחה, ועיגון
   הגלילה של הדפדפן מנסה "לשמר את המקום" מול תוכן שכבר אינו קיים ומחזיר
   את הגולל לאמצע. אותה שורה בדיוק שכבר נקנתה כאן במגילות. */
.hcard-inner { overflow-anchor: none; }
.hcard-inner::-webkit-scrollbar { width: 7px; }
.hcard-inner::-webkit-scrollbar-track { background: transparent; }
.hcard-inner::-webkit-scrollbar-thumb {
    background: rgba(120, 80, 26, 0.5); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}
.hcard-inner::-webkit-scrollbar-thumb:hover { background: rgba(120, 80, 26, 0.75); background-clip: padding-box; }

.hcard-title {
    font-family: var(--heading-font, 'Suez One'), serif;
    font-size: calc(clamp(1.05rem, 2.6vw, 1.6rem) * var(--hc-ts, 1));
    line-height: 1.15;
    margin: 0 0 0.5rem;
    background: linear-gradient(180deg, #a06e22 6%, #7a4f18 55%, #4a2f12 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    /* ‎drop-shadow‎ ולא ‎text-shadow‎: למילוי מדורג הצל נצבע **מעל** הטקסט
       השקוף ומכסה אותו -כלל שכבר נקנה כאן בקלף יצירת הקשר. */
    filter: drop-shadow(0 1px 0 rgba(255, 250, 235, 0.55));
}
.hcard-title[hidden] { display: none; }

.hcard-body {
    font-size: calc(clamp(0.8rem, 1.6vw, 0.95rem) * var(--hc-ts, 1));
    line-height: 1.55;
    color: #3a2a15;
}

/* ---- Auto fit (default) ----
   `js/housecard.js` (applyFit) reads the real viewport - width AND height -
   and writes two pure numbers: the card height in px and the body font size
   in px, the latter derived from the writing area's width so the text grows
   with the card instead of being clamped to the viewport. The unit is applied
   here (a variable holding a length fails inside calc(), documented trap).
   (0,2,0) beats the (0,1,0) base rules above; max-width/max-height safety
   nets on .hcard-card still apply. */
.hcard-card[data-hcfit="auto"] {
    height: calc(var(--hc-auto-h, 520) * 1px);
}
.hcard-card[data-hcfit="auto"] .hcard-title {
    font-size: calc(var(--hc-auto-fs, 16) * 1.5px * var(--hc-ts, 1));
}
.hcard-card[data-hcfit="auto"] .hcard-body {
    font-size: calc(var(--hc-auto-fs, 16) * 1px * var(--hc-ts, 1));
}

/* ---- לוח כתיבה לקלף שאין בו מגילה מצוירת ----
   רוב הקלפים הם ציור עם מגילה, ושטח הכתיבה נמדד מהפיקסלים. צילום שולחן
   עבודה הוא קלף לכל דבר אבל **אין בו מגילה**, ולכן ‎hc_measure‎ מחזירה ריק
   בצדק -וטקסט בחום כהה (‎#3a2a15‎, נבחר לקלף) נעלם על צילום כהה.
   כאן מצויר לו לוח קלף משלו, באותה שפה: נייר חם, מסגרת זהב דקה וצל רך. */
.hcard-card.has-scrim .hcard-inner {
    padding: clamp(0.6rem, 2.2cqw, 1.4rem);
    border-radius: 14px;
    border: 1px solid rgba(122, 79, 24, 0.45);
    background:
        linear-gradient(180deg, rgba(253, 244, 214, 0.96), rgba(240, 224, 184, 0.94));
    box-shadow: 0 10px 26px rgba(6, 18, 38, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.hcard-body > *:first-child { margin-top: 0; }
.hcard-body > *:last-child { margin-bottom: 0; }
.hcard-body p { margin: 0 0 0.5rem; }
.hcard-body h2, .hcard-body h3 {
    font-family: var(--heading-font, 'Suez One'), serif;
    color: #4a2f12; margin: 0.7rem 0 0.3rem; line-height: 1.2;
}
.hcard-body h2 { font-size: 1.2em; } .hcard-body h3 { font-size: 1.08em; }
/* **רשימה מיושרת להתחלה ולא למרכז.** האזור כולו ממורכז, ובמרכוז ה-‎li‎
   הסימון נשאר בקצה הריפוד והטקסט נודד למרכז -נמדד שהתבליטים ישבו מנותקים
   בקצה הימני. הרשימה עצמה ממורכזת כבלוק (‎inline-block‎), והשורות בתוכה
   מיושרות להתחלה. */
.hcard-body ul, .hcard-body ol {
    display: inline-block;
    text-align: start;
    margin: 0 0 0.5rem;
    padding-inline-start: 1.15rem;
}
.hcard-body li { margin-bottom: 0.18rem; }
.hcard-body a { color: #7a4f18; font-weight: 700; text-decoration: underline; }
.hcard-body img { max-width: 100%; height: auto; border-radius: 8px; }

/* פיזית שמאל-למעלה, לא ‎inset-inline‎: הקלף הוא **תמונה** עם עיטור מצויר,
   והצד שפנוי בה נקבע בציור ולא בכיוון הכתיבה. */
.hcard-close {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 2;
    width: 2.2rem; height: 2.2rem;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 231, 163, 0.55);
    background: rgba(13, 40, 78, 0.8);
    color: #ffe7a3;
    font-size: 1rem;
    cursor: pointer;
    touch-action: manipulation;
}
.hcard-close:hover { background: rgba(20, 58, 105, 0.92); }
@media (pointer: coarse) { .hcard-close { width: 2.75rem; height: 2.75rem; } }

/* ---- אנימציות הפתיחה/סגירה של קלף הבית ----
   מצב ה"סגור" מוגדר פר-סוג, וה-JS מחליף את ‎data-hcanim‎ בין סוג הכניסה
   לסוג היציאה אחרי שהקלף נפתח. תוספת של סוג היא **שני כללים ולא קוד**.
   ברירת המחדל (‎door‎) כבר מוגדרת על ‎.hcard-card‎ עצמו. */
.hcard-modal:not(.is-open) .hcard-card[data-hcanim="zoom"] { opacity: 0; transform: scale(0.55); }
.hcard-modal:not(.is-open) .hcard-card[data-hcanim="fade"] { opacity: 0; transform: none; }
.hcard-modal:not(.is-open) .hcard-card[data-hcanim="rise"] { opacity: 0; transform: translateY(9%); }
.hcard-modal:not(.is-open) .hcard-card[data-hcanim="drop"] { opacity: 0; transform: translateY(-9%); }
/* הפרספקטיבה **בתוך** ה-transform ולא על ההורה: ‎perspective‎ על השכבה היה
   הופך אותה ל-containing block של כל ילד ‎fixed‎ -מלכודת שכבר הפילה כאן את
   כרטיס הפרויקט ואת קלף הצ'אט. */
.hcard-modal:not(.is-open) .hcard-card[data-hcanim="flip"] { opacity: 0; transform: perspective(1200px) rotateY(78deg); }
.hcard-modal:not(.is-open) .hcard-card[data-hcanim="none"] { opacity: 0; transform: none; transition: none; }
.hcard-card[data-hcanim="none"] { transition: none; }

/* ---- הצגת דלת הבית לפי פלטפורמה ----
   ‎data-hcshow‎ נפלט **רק כשיש הגבלה**, ולכן "הכול" הוא היעדר מאפיין ואף
   כלל כאן אינו חל עליו. ‎~=‎ מתאים אסימון בתוך רשימה מופרדת ברווחים.
   הספים זהים לשאר הפרויקט: מובייל עד 640, טאבלט עד 1024. */
@media (max-width: 640px) {
    .hdoor[data-hcshow]:not([data-hcshow~="mobile"]) { display: none; }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .hdoor[data-hcshow]:not([data-hcshow~="tablet"]) { display: none; }
}
@media (min-width: 1025px) {
    .hdoor[data-hcshow]:not([data-hcshow~="desktop"]) { display: none; }
}

/* ---- הצגת **עמוד** לפי פלטפורמה ----
   אותו מאפיין ואותם ספים של דלת הבית, על שני נשאים: הקישור בתפריט וגוף
   העמוד. **מה שמוסתר הם ילדי ה-‎<main>‎ ולא הוא עצמו** -ההודעה יושבת בתוכו
   (כדי לשרוד את ניווט ה-SPA, שמחליף רק אותו), ולכן הסתרת ה-main הייתה
   מעלימה גם אותה.

   **הקישור מוסתר ב-‎display: none‎ ולא בשקיפות:** שקיפות אינה מסירה
   מהיפ-טסט (חוק מתועד בפרויקט), והתוצאה הייתה קישור בלתי נראה שאפשר
   ללחוץ עליו. */
.content > .pf-hidden-note { display: none; }
@media (max-width: 640px) {
    .nav-link[data-pfshow]:not([data-pfshow~="mobile"]) { display: none; }
    .content[data-pfshow]:not([data-pfshow~="mobile"]) > *:not(.pf-hidden-note) { display: none; }
    .content[data-pfshow]:not([data-pfshow~="mobile"]) > .pf-hidden-note { display: grid; }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .nav-link[data-pfshow]:not([data-pfshow~="tablet"]) { display: none; }
    .content[data-pfshow]:not([data-pfshow~="tablet"]) > *:not(.pf-hidden-note) { display: none; }
    .content[data-pfshow]:not([data-pfshow~="tablet"]) > .pf-hidden-note { display: grid; }
}
@media (min-width: 1025px) {
    .nav-link[data-pfshow]:not([data-pfshow~="desktop"]) { display: none; }
    .content[data-pfshow]:not([data-pfshow~="desktop"]) > *:not(.pf-hidden-note) { display: none; }
    .content[data-pfshow]:not([data-pfshow~="desktop"]) > .pf-hidden-note { display: grid; }
}
.pf-hidden-note {
    place-items: center;
    min-height: 58vh;
    padding: 2rem 1rem;
    width: 100%;
}
.pf-hidden-card {
    display: grid;
    justify-items: center;
    gap: 0.9rem;
    max-width: min(26rem, 92vw);
    padding: 1.8rem 1.6rem;
    text-align: center;
    border-radius: 18px;
    color: #fff;
    background: rgba(13, 40, 78, 0.88);
    border: 2px solid rgba(255, 231, 163, 0.45);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.pf-hidden-ico { font-size: 2.2rem; line-height: 1; }
.pf-hidden-card p { margin: 0; font-size: 1.02rem; font-weight: 700; }
/* שורת "איפה כן" -משנית לשורה שמעליה, והמכשירים עצמם מודגשים בזהב */
.pf-hidden-where { font-size: 0.92rem !important; font-weight: 500 !important; color: rgba(233, 242, 252, 0.88); }
.pf-hidden-where b { color: var(--c-gold-light, #ffe7a3); font-weight: 800; }

/* סרגל מצב הזזת הבתים -מוצג כשהפאנל מוסתר לטובת הגרירה */
.house-move-bar {
    position: fixed;
    left: 50%;
    bottom: 1.2rem;
    translate: -50% 0;
    z-index: 126;              /* מעל הסצנה והקלף, מתחת לדיאלוגים */
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    background: rgba(13, 40, 78, 0.94);
    border: 1px solid rgba(255, 231, 163, 0.5);
    color: #eaf2ff;
    font-size: 0.85rem;
    box-shadow: 0 8px 26px rgba(6, 20, 44, 0.5);
}
.house-move-bar[hidden] { display: none; }
/* **הסרגל אינו בולע גרירות.** נמדד באייפון שהוא יושב בדיוק מעל הבתים
   (‎elementFromPoint‎ על מרכז הבית החזיר ‎DIV.house-move-bar‎) והנגיעה לא
   הגיעה אליהם -אותה מלכודת בדיוק של הפוטר מול דלת הבית. ‎none‎ על המיכל
   ו-‎auto‎ על מה שבאמת אינטראקטיבי. */
.house-move-bar { pointer-events: none; }
.house-move-bar button { pointer-events: auto; }
.house-move-bar button {
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 231, 163, 0.6);
    background: var(--c-gold, #d39a1a);
    color: #2a1c05;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
}
/* במסך צר הסרגל עולה למעלה: הבתים יושבים על קו הקרקע בתחתית, ושם הוא
   מסתיר בדיוק את מה שגוררים. */
@media (max-width: 640px) {
    .house-move-bar {
        font-size: 0.76rem; padding: 0.5rem 0.7rem;
        width: max-content; max-width: 94vw;
        bottom: auto; top: 4.2rem;
    }
}

/* ---- במצב הזזת בתים הקלף מתפנה מהדרך ----
   ‎.content‎ הוא ‎z:10‎ ומכסה את מרכז המסך, ולכן בית שנמצא מאחוריו אינו ניתן
   לתפיסה כלל -נמדד ‎elementFromPoint‎ שהחזיר ‎ARTICLE.about-card‎ על מרכז
   הבית. שקיפות **וגם** ‎pointer-events: none‎: שקיפות לבדה אינה מסירה
   מהיפ-טסט, חוק שכבר תועד כאן שלוש פעמים. */
body.house-move .content {
    opacity: 0.28;
    transition: opacity 0.25s ease;
}
/* **גם הילדים, לא רק המיכל.** לקלף וליורשיו יש ‎pointer-events: auto‎
   מפורש (חוק בפרויקט: כל אלמנט אינטראקטיבי ב-‎.content‎ מחזיר אותם), וילד
   עם ‎auto‎ נשאר יעד גם כשההורה ‎none‎ -נמדד ‎ARTICLE.about-card‎ על מרכז
   הבית אחרי שהמיכל כובה. */
body.house-move .content,
body.house-move .content * { pointer-events: none !important; }
body.house-move .footer,
body.house-move .social-bar { opacity: 0.28; pointer-events: none; }

/* **גם חלונות העריכה יורדים במצב הזזה, לא רק הפאנל.**
   ‎enterMove‎ מסתיר את ‎#adminPanel‎, אבל עורך העמוד ועורך הפרויקט נפתחים
   ב**חלון על ה-body** -והוא נשאר על המסך ומכסה בדיוק את הסצנה שאמורים
   לגרור בה. נמדד: ‎elementFromPoint‎ על מרכז הבית החזיר ‎DIV.admin-ufield‎,
   כלומר שדה מספרי של החלון; הגרירה נחתה עליו במקום על הבית, ומה שנראה
   היה "כל האובייקטים משתנים והבית מקפץ".

   ‎display: none‎ ולא הסרה: העורך נשאר בתוך החלון על כל מאזיניו ומחסנית
   הביטול שלו, וחוזר כמו שהיה ביציאה מהמצב. */
body.house-move .pf-zoom-overlay,
body.house-move .pg-win-overlay { display: none !important; }

/* ==== הפתיחה הקסומה של דלת הבית ====
   פרץ אור וניצוצות **מהדלת עצמה**, בסגנון פרץ שערי הטירה (‎.door-flash‎)
   ובמידות של דלת קטנה. השכבה נבנית ב-JS בלחיצה ומוסרת בסוף.

   **מתחת לקלף** (129 מול 130) -הקלף מגיח *מתוך* האור ולא מאחוריו; וכשפאנל
   הניהול פתוח שניהם יורדים מתחתיו, אותה החלטה בדיוק שכבר תועדה על הקלף.
   ‎--fx/--fy‎ נכתבים ב-JS ממרכז הדלת בפועל. */
.hcfx {
    position: fixed;
    inset: 0;
    z-index: 129;
    pointer-events: none;
    contain: strict;      /* בולם reflow -שכבה חולפת מעל עמוד שלם */
}
body.admin-on .hcfx { z-index: 117; }
.hcfx > i {
    position: absolute;
    left: var(--fx, 50%);
    top: var(--fy, 50%);
    translate: -50% -50%;
    border-radius: 50%;
    opacity: 0;
}
/* ליבה: אור לבן-זהוב שנפתח מהפתח */
.hcfx-core {
    width: 15rem; height: 15rem;
    background: radial-gradient(closest-side,
        #fff 0%, #fffdf2 14%, rgba(255, 245, 210, 0.85) 30%,
        rgba(255, 224, 148, 0.42) 54%, rgba(255, 208, 118, 0) 78%);
    animation: hcfx-core 0.92s cubic-bezier(0.15, 0.75, 0.3, 1) forwards;
}
@keyframes hcfx-core {
    0%   { opacity: 0;    scale: 0.06; }
    18%  { opacity: 1;    scale: 0.6; }
    55%  { opacity: 0.62; scale: 1; }
    100% { opacity: 0;    scale: 1.22; }
}
/* טבעות מתפשטות -הן שנותנות את תחושת ה"שער שנפתח" */
.hcfx-ring {
    width: 5.2rem; height: 5.2rem;
    border: 3px solid rgba(255, 240, 196, 0.9);
    box-shadow: 0 0 1.4rem rgba(255, 222, 140, 0.65), inset 0 0 0.9rem rgba(255, 236, 180, 0.5);
    animation: hcfx-ring 1s cubic-bezier(0.12, 0.7, 0.25, 1) forwards;
}
.hcfx-ring2 { animation-duration: 1.15s; animation-delay: 0.14s; }
@keyframes hcfx-ring {
    0%   { opacity: 0;    scale: 0.14; }
    14%  { opacity: 0.95; }
    100% { opacity: 0;    scale: 3.4; }
}
/* ניצוצות: זווית, מרחק, גודל ומשך מוגרלים פר-פתיחה ב-JS */
.hcfx-spark {
    width: 0.42rem; height: 0.42rem;
    background: var(--c-gold-light, #ffe7a3);
    box-shadow: 0 0 0.6rem rgba(255, 231, 163, 0.95);
    scale: var(--s, 1);
    animation: hcfx-spark var(--t, 0.6s) cubic-bezier(0.16, 0.8, 0.3, 1) forwards;
}
@keyframes hcfx-spark {
    0%   { opacity: 0;   translate: -50% -50%; }
    22%  { opacity: 1; }
    100% { opacity: 0;
           translate: calc(-50% + cos(var(--a, 0deg)) * var(--d, 60px))
                      calc(-50% + sin(var(--a, 0deg)) * var(--d, 60px)); }
}
/* הקלף מגיח עטוף הילה זהובה שדועכת -מה שקושר את הפרץ לקלף.
   ‎drop-shadow‎ ולא ‎box-shadow‎: לקלף יש פינות מצוירות בתמונה עצמה, וצל
   מלבני היה מסגיר אותן. מדולג בצמצום תנועה ובמתג הכבוי. */
body:not(.hcfx-off) .hcard-modal.is-open .hcard-card {
    animation: hcfx-halo 1.1s ease-out;
}
/* שלושת הפריימים נושאים את **אותו מבנה פילטר** ונבדלים רק בערכים -
   ‎filter: none‎ בסוף היה מבטל את הפילטר ומכריח בנייה מחדש של הרסטור על
   אלמנט גדול, הלקח שכבר נמדד כאן על הצל של הטירה בנסיעה. */
@keyframes hcfx-halo {
    0%   { filter: drop-shadow(0 0 2.2rem rgba(255, 226, 150, 0.95)) brightness(1.16); }
    55%  { filter: drop-shadow(0 0 1.1rem rgba(255, 226, 150, 0.42)) brightness(1.04); }
    100% { filter: drop-shadow(0 0 0 transparent) brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
    body .hcard-modal.is-open .hcard-card { animation: none; }
}

/* ==== טוען קלף הבית ====
   הקלף אינו נחשף עד שהרקע והתמונות שבו ירדו (בקשת המשתמש): הרקע הוא webp
   של ~120KB, ובפתיחה ראשונה הוא מגיע אחרי שהכרטיס כבר על המסך -רגע של
   מסגרת ריקה. הטוען בנוי כולו ב-CSS, בשפה של האתר: טבעת זהב שמסתובבת,
   ליבה פועמת, ושלושה ניצוצות שמקיפים אותה. */
.hcard-modal.is-loading .hcard-card { visibility: hidden; }  /* נשאר בפריסה -המדידה של הזום מהדלת תלויה בו */
.hcard-load {
    position: absolute;
    inset: 0;
    display: none;
    place-items: center;
    z-index: 4;
    pointer-events: none;
}
/* **מופיע רק אם הטעינה באמת לוקחת זמן.** רקע שכבר במטמון נטען בשני
   פריימים, והבזק של טוען במצב הזה נקרא כגמגום -אותה השהיה של 180ms שכבר
   נהוגה כאן בטוען המעבר בין העמודים. ההשהיה ב-CSS ולא בטיימר: אין מה
   לבטל, ואין מצב שבו הטיימר יורה אחרי שהקלף כבר נחשף.

   **‎0.11s‎ ו-‎0.15s‎ ולא ‎0.16‎ ו-‎0.22‎.** נמדד ברשת ‎fast3g‎ שהטוען הגיע
   למלוא הבהירות רק ‎418ms‎ אחרי הנגיעה בדלת -‎116‎ מהם ההמתנה ל-‎click‎
   (תוקן ב-‎housecard.js‎) ו-‎380‎ ההשהיה והעמעום כאן. חלון כזה נקרא כ"לחצתי
   וכלום לא קרה" גם כשהכול עובד. ההגנה מפני הבזק נשמרת: כשהרקע במטמון
   ‎preload‎ נפתר במיקרוטסק, כלומר ‎is-loading‎ יורד עוד **לפני** הפריים
   הראשון ואף השהיה אינה מספיקה כדי שהטוען ייראה. */
.hcard-modal.is-loading .hcard-load {
    display: grid;
    opacity: 0;
    animation: hcl-in 0.15s ease 0.11s forwards;
}
@keyframes hcl-in { to { opacity: 1; } }
.hcard-load > * { grid-area: 1 / 1; }
/* טבעת: גרדיאנט חרוטי שנחתך לטבעת ב-mask -כך יש לה זנב דוהה ולא קו אחיד */
.hcl-ring {
    width: 5.4rem; height: 5.4rem; border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(255, 231, 163, 0) 0 55%, var(--c-gold, #ffd15a) 88%, var(--c-gold-light, #ffe7a3) 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    filter: drop-shadow(0 0 12px rgba(255, 209, 90, 0.5));
    animation: hcl-spin 1.05s linear infinite;
}
/* ליבה: אור רך שפועם, כאילו הקלף נדלק מבפנים */
.hcl-core {
    width: 2.1rem; height: 2.1rem; border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, #fff8e0, var(--c-gold, #ffd15a) 55%, rgba(255, 209, 90, 0) 72%);
    animation: hcl-pulse 1.6s ease-in-out infinite;
}
/* ניצוצות מקיפים -‎transform-origin‎ במרכז הטבעת, ולכן די בסיבוב אחד לכל אחד */
.hcl-spark {
    width: 0.42rem; height: 0.42rem; border-radius: 50%;
    background: var(--c-gold-light, #ffe7a3);
    box-shadow: 0 0 10px rgba(255, 231, 163, 0.9);
    transform-origin: 50% 3.35rem;
    animation: hcl-orbit 2.4s linear infinite;
}
.hcl-spark:nth-child(4) { animation-delay: -0.8s; opacity: 0.85; }
.hcl-spark:nth-child(5) { animation-delay: -1.6s; opacity: 0.7; }
.hcl-txt {
    margin-top: 8.4rem;             /* מתחת לטבעת, באותה משבצת רשת */
    font-family: var(--heading-font, 'Suez One'), serif;
    font-size: 1.02rem; font-weight: 400;
    color: var(--c-gold-light, #ffe7a3);
    text-shadow: 0 2px 10px rgba(6, 20, 40, 0.8);
    animation: hcl-fade 1.6s ease-in-out infinite;
}
@keyframes hcl-spin  { to { rotate: 360deg; } }
@keyframes hcl-orbit { to { rotate: 360deg; } }
@keyframes hcl-pulse { 0%, 100% { transform: scale(0.86); opacity: 0.75; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes hcl-fade  { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .hcl-ring, .hcl-core, .hcl-spark, .hcl-txt { animation: none; }
    .hcl-core { opacity: 1; }
}

/* ================= תפריט קליק-ימני על אובייקטי הסצנה =================
   נפתח על אובייקט קרקע או על בית במצב ההזזה, ומחזיק את שלוש הפעולות שאינן
   מיקום: היפוך, שכבה והסרה. יושב על ה-‎body‎ ולא בסצנה -היא ‎pointer-events:
   none‎, נושאת ‎filter‎ בלילה ו-‎transform‎ בפאן, ותפריט בתוכה היה מוחשך
   ונגרר עם העולם (אותה מלכודת של בועת הדיבור).

   **ערכת הפאנל הכהה ולא ערכת הדיאלוג הבהיר:** הוא מרחף מעל **הסצנה**, ורקע
   בהיר על נוף בהיר אינו נקרא כתפריט. */
.scene-ctx {
    position: fixed;
    z-index: 200;                  /* מעל סרגל ההזזה (126) ומעל הקלף (10) */
    min-width: 12.5rem;
    padding: 0.35rem;
    border-radius: 0.85rem;
    background: linear-gradient(180deg, rgba(18, 48, 92, 0.98), rgba(9, 27, 55, 0.98));
    border: 1px solid rgba(255, 209, 90, 0.42);
    box-shadow: 0 14px 38px rgba(4, 14, 32, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    color: #eaf2ff;
    font-size: 0.9rem;
    text-align: start;
    opacity: 0;
    scale: 0.96;
    transform-origin: top right;   /* RTL: נפרס מנקודת הלחיצה שמימין */
    transition: opacity 0.12s ease, scale 0.12s ease;
}
.scene-ctx.is-in { opacity: 1; scale: 1; }
.scene-ctx[hidden] { display: none; }

/* כותרת: מי האובייקט שנלחץ. בלעדיה תפריט זהה נפתח על כל דבר, ובסצנה
   צפופה אי אפשר לדעת על מה הוא חל. */
.scene-ctx-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.5rem 0.45rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--c-gold-light, #ffe7a3);
    font-weight: 800;
    font-size: 0.86rem;
}
.scene-ctx-head img {
    width: 1.5rem; height: 1.5rem;
    object-fit: contain;
    flex: 0 0 auto;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
/* ‎min-width: 0‎ הכרחי: בלעדיו פריט flex אינו יורד מתחת לרוחב התוכן, ומול
   חץ החזרה שנדחף ב-‎margin-inline-start: auto‎ השם התכווץ ל**אפס** ונעלם. */
.scene-ctx-head > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.scene-ctx [data-act] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.5rem 0.55rem;
    border: 0;
    border-radius: 0.55rem;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
    touch-action: manipulation;    /* בלי "הקש-פעמיים-להגדלה" בטלפון */
}
.scene-ctx [data-act]:hover,
.scene-ctx [data-act]:focus-visible {
    background: rgba(255, 209, 90, 0.16);
    outline: none;
}
.scene-ctx [data-act]:focus-visible { box-shadow: inset 0 0 0 1px rgba(255, 209, 90, 0.7); }
.scene-ctx-i {
    flex: 0 0 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    color: var(--c-gold-light, #ffe7a3);
}
/* **חצים ב-SVG ולא בתווים.** ‎›‎ ו-‎➜‎ אינם נתמכים בגופן העברי והכפתור יצא
   **ריק** -אותו כשל שכבר תועד כאן על ‎↻‎ ("ט רענון"). וב-RTL הכיוון הפוך:
   "קדימה/יש המשך" הוא **שמאלה**, "חזרה" הוא **ימינה** -אותו כלל של חצי
   ה-UNDO בעורך. */
.scene-ctx-i svg,
.scene-ctx-more svg { width: 1.05rem; height: 1.05rem; display: block; }
.scene-ctx .scene-ctx-back svg { width: 1rem; height: 1rem; display: block; margin: auto; }
/* תג "הפוך" -המצב הנוכחי, כדי שהפעולה תיקרא כמתג ולא כפקודה חד-כיוונית */
.scene-ctx-on {
    margin-inline-start: auto;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: rgba(255, 209, 90, 0.2);
    border: 1px solid rgba(255, 209, 90, 0.45);
    color: var(--c-gold-light, #ffe7a3);
    font-size: 0.72rem;
    font-weight: 700;
}
.scene-ctx-sep {
    height: 1px;
    margin: 0.25rem 0.3rem;
    background: rgba(255, 255, 255, 0.12);
}
/* ההסרה היא הפעולה היחידה שאין ממנה דרך חזרה, ולכן היא נבדלת בצבע */
.scene-ctx [data-act="del"] { color: #ffb3b8; }
.scene-ctx [data-act="del"] .scene-ctx-i { color: #ff9aa1; }
.scene-ctx [data-act="del"]:hover,
.scene-ctx [data-act="del"]:focus-visible { background: rgba(226, 86, 95, 0.22); }

/* יעד נגיעה במגע -חוק המובייל */
@media (pointer: coarse) {
    .scene-ctx { min-width: 14rem; font-size: 0.95rem; }
    .scene-ctx [data-act] { min-height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .scene-ctx { transition: none; scale: 1; }
}

/* ---- המסך השני של התפריט: בחירת עמוד יעד ----
   באותו אלמנט ולא בדיאלוג: הפאנל מוסתר במצב ההזזה, ודיאלוג היה מכסה בדיוק
   את הסצנה שעובדים מולה. */
.scene-ctx-head { position: relative; }
/* חץ החזרה. ‎›‎ ולא ‎‹‎ -ב-RTL "אחורה" הוא ימינה, אותו כלל של UNDO בעורך.

   **הסלקטור חייב לגבור על ‎.scene-ctx [data-act]‎** (0,2,0), שנותן
   ‎width: 100%‎ לכל פריט בתפריט: הכפתור נושא ‎data-act="back"‎ ולכן הוא נתפס
   בו, ונמדד שהוא בלע ‎191‎ מתוך ‎206px‎ של שורת הכותרת -שם הבית נדחס לרוחב
   **0** ונעלם, בזמן ש-‎textContent‎ שלו תקין (בדיקה שקוראת טקסט לא תופסת
   את זה). */
.scene-ctx .scene-ctx-back {
    margin-inline-start: auto;
    flex: 0 0 auto;
    width: 1.6rem;
    min-height: 0;
    height: 1.6rem;
    padding: 0;
    border: 1px solid rgba(255, 209, 90, 0.35);
    border-radius: 0.45rem;
    background: rgba(255, 255, 255, 0.06);
    color: var(--c-gold-light, #ffe7a3);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}
.scene-ctx .scene-ctx-back:hover,
.scene-ctx .scene-ctx-back:focus-visible { background: rgba(255, 209, 90, 0.2); outline: none; }
/* "טוען…", "אין עמוד אחר", ו"להעביר אל:" -טקסט ולא פריט שאפשר ללחוץ עליו */
.scene-ctx-note {
    padding: 0.4rem 0.55rem;
    color: rgba(233, 242, 252, 0.72);
    font-size: 0.82rem;
}
.scene-ctx-lead { padding-bottom: 0.15rem; font-weight: 700; }
.scene-ctx-note.is-err { color: #ffb3b8; }
/* המשולש שמסמן "נפתח מסך נוסף" */
.scene-ctx-more {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    color: rgba(255, 231, 163, 0.6);
}
/* ברשימה ארוכה -גלילה בתוך התפריט ולא תפריט שיוצא מהמסך.
   סרגל מעוצב, חוק הפרויקט. */
.scene-ctx { max-height: min(70vh, 26rem); overflow-y: auto; overscroll-behavior: contain; }
.scene-ctx::-webkit-scrollbar { width: 8px; }
.scene-ctx::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.22); border-radius: 99px; }
.scene-ctx::-webkit-scrollbar-thumb {
    background: rgba(255, 209, 90, 0.45);
    border-radius: 99px;
}
.scene-ctx::-webkit-scrollbar-thumb:hover { background: rgba(255, 209, 90, 0.7); }
.scene-ctx { scrollbar-width: thin; scrollbar-color: rgba(255, 209, 90, 0.45) rgba(0, 0, 0, 0.22); }

/* ---- שורת הערה מתחת לכתובית (עמוד הבית) ----
   טקסט **משני**: קטן מהכתובית, עמום יותר, ובאותה משפחה. בחירת המכשירים
   נפלטת כ-‎data-show‎, ו**"הכול" הוא היעדר המאפיין** -כך אף כלל אינו חל
   עליו ואי אפשר להסתיר בטעות שורה שלא הוגבלה. אותו דפוס של ‎data-hcshow‎. */
.hero-note {
    margin: 0.5rem 0 0;
    font-size: clamp(0.78rem, 1.5vw, 0.95rem);
    line-height: 1.6;
    color: rgba(233, 242, 252, 0.72);
    text-shadow: 0 1px 3px rgba(6, 20, 44, 0.6);
}
@media (max-width: 640px) {
    .hero-note[data-show]:not([data-show~="mobile"]) { display: none; }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .hero-note[data-show]:not([data-show~="tablet"]) { display: none; }
}
@media (min-width: 1025px) {
    .hero-note[data-show]:not([data-show~="desktop"]) { display: none; }
}

/* ================= קישורים בתוך תוכן העמודים =================
   הצבע, המשקל וקו התחתון נערכים בטאב הטיפוגרפיה. **כל אחד מהם נפלט רק
   כשהוגדר**, ולכן ‎var(...)‎ עם נפילה לאחור לערך שכבר היה -אתר שלא נגע בזה
   נשאר זהה בדיוק. אותו דפוס של ‎--page-title-font‎.

   ההקשרים כולם, כמו בכל כלי עריכה כאן: עמוד CMS, העורך שבפאנל, תיאור
   הפרויקט וכרטיס הפרטים -אחרת ההגדרה נראית בעורך ונעלמת באתר. */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text, .about-body) a {
    color: var(--link-color, inherit);
    font-weight: var(--link-weight, 700);
    /* ‎currentColor‎: הקו עוקב אחרי הצבע גם כשרק אחד מהשניים הוגדר */
    text-decoration-color: currentColor;
    text-underline-offset: 0.16em;
    transition: color 0.16s ease, text-decoration-color 0.16s ease, opacity 0.16s ease;
}
/* **מעבר העכבר הוא הגדרה בפני עצמה.** בלעדיו קישור נראה זהה לפני ואחרי,
   ובעמוד עברי עם קלף בהיר זה בדיוק ההבדל בין "טקסט צבעוני" ל"אפשר ללחוץ". */
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text, .about-body) a:hover,
:is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text, .about-body) a:focus-visible {
    color: var(--link-hover, var(--link-color, inherit));
}
/* קו תחתון: **מצב ולא ערך**, ולכן מחלקה על ה-body ולא משתנה */
body.lu-always :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text, .about-body) a { text-decoration-line: underline; }
body.lu-none   :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text, .about-body) a { text-decoration-line: none; }
body.lu-hover  :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text, .about-body) a { text-decoration-line: none; }
body.lu-hover  :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text, .about-body) a:hover,
body.lu-hover  :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text, .about-body) a:focus-visible { text-decoration-line: underline; }
/* במגע אין ‎hover‎, ולכן "קו במעבר בלבד" משאיר את הקישור בלי שום סימן -
   שם הוא חוזר להיות קבוע. אותו כלל של כיתוב גלריית העבודות. */
@media (pointer: coarse) {
    body.lu-hover :is(.cms-content, .wysiwyg-editor, .pf-rte-ed, .pf-detail-text, .about-body) a { text-decoration-line: underline; }
}

/* ============================================================
   הודעת המצב הסטטי (‎#liteToast‎)
   ------------------------------------------------------------
   מוצגת למבקר שהמחשב שלו קיבל את האתר **ללא תנועה**, כדי שסצנה
   קפואה לא תיקרא כתקלה. נשלטת בטאב "⚡ ביצועים".

   **‎transition‎ ולא ‎animation‎, וזה תנאי ולא העדפה:** במצב הסטטי
   ‎html.peleg-lite *‎ מכבה ‎animation‎ ב-‎!important‎ -כלומר הודעה
   שנכנסת באנימציה לא הייתה נראית בדיוק במצב שנועדה לו.
   ============================================================ */
.lite-toast {
    position: fixed;
    z-index: 119;               /* מעל התוכן, הפוטר וכפתור הנגישות (115); מתחת לפאנל (125) */
    inset-inline: 0;
    bottom: calc(1.1rem + env(safe-area-inset-bottom));
    margin-inline: auto;
    width: min(34rem, calc(100% - 2rem));
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    border-radius: 0.85rem;
    background: var(--lt-bg, #7B4F28);
    color: var(--lt-fg, #FFF3D0);
    border: 2px solid rgba(255, 231, 163, 0.55);
    box-shadow: 0 6px 22px rgba(6, 18, 38, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    font-size: 0.95rem;
    line-height: 1.5;
    /* מחוץ למצב הסטטי (תצוגה מקדימה בפאנל) הרקע עשוי להיות עמוס */
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: translateY(0.9rem);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto;
}
/* ‎display: flex‎ גובר על ‎hidden‎ -בפעם השביעית בפרויקט הזה */
.lite-toast[hidden] { display: none !important; }
.lite-toast.is-on { opacity: 1; transform: translateY(0); }
.lite-toast-txt { flex: 1 1 auto; min-width: 0; }
.lite-toast-x {
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.14);
    color: inherit;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}
.lite-toast-x:hover { background: rgba(255, 255, 255, 0.26); }
.lite-toast-x:active { transform: scale(0.94); }

/* במובייל כפתור הנגישות מרחף בפינה תחתונה (‎0.9rem‎ + גודלו), ולכן
   ההודעה עולה מעליו -אחרת היא יושבת בדיוק עליו. */
@media (max-width: 640px) {
    .lite-toast {
        bottom: calc(1.1rem + var(--a11y-size, 2.3rem) + 0.8rem + env(safe-area-inset-bottom));
        font-size: 0.9rem;
        padding: 0.75rem 0.85rem;
    }
    body.a11y-m-bar .lite-toast,
    body.a11y-m-tl .lite-toast,
    body.a11y-m-tr .lite-toast { bottom: calc(1.1rem + env(safe-area-inset-bottom)); }
}

/* יעד נגיעה אמיתי לכפתור הסגירה (חוק המובייל) */
@media (pointer: coarse) {
    .lite-toast-x { width: 2.6rem; height: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .lite-toast { transform: none; }
    .lite-toast.is-on { transform: none; }
}

/* ============================================================
   מונה ה-FPS של ה-DEBUG (‎.fps-hud‎) -כלי בדיקה למי שמחובר בלבד.
   ------------------------------------------------------------
   **הוא ‎pointer-events: auto‎, בשינוי מהכלל שנקנה כאן פעמיים** (אייקוני
   הרשתות בפוטר, "לראש הרשימה" בתפריט): הכלל ההוא מגן על מה שמתחת
   לאלמנט **שאי אפשר להזיז**, וכאן המונה נגרר לכל מקום ויש לו תפריט
   קליק-ימני -כלומר הוא פקד ולא קישוט. ‎contextmenu‎ אינו נורה כלל על
   אלמנט עם ‎pointer-events: none‎, ולכן זה תנאי ולא העדפה.
   **ובלי אנימציה:** מד שמנפיש את עצמו משנה בדיוק את מה שהוא מודד.
   ============================================================ */
.fps-hud {
    position: fixed;
    z-index: 121;              /* מעל הכל שבאתר, מתחת לפאנל (125) */
    top: calc(0.6rem + env(safe-area-inset-top));
    inset-inline-start: 0.6rem;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.3rem 0.55rem;
    border-radius: 0.5rem;
    background: rgba(6, 18, 38, 0.82);
    border: 1px solid rgba(255, 231, 163, 0.35);
    color: #FFF3D0;
    font: 700 0.95rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    direction: ltr;
    unicode-bidi: isolate;     /* "16.7 / 42ms" הוא טקסט לועזי בתוך עמוד RTL */
    user-select: none;
    cursor: grab;
    /* הגרירה היא ‎pointer‎, ובלי זה הדפדפן מפרש אותה כגלילה ובולע אותה */
    touch-action: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
/* ‎display: flex‎ גובר על ‎hidden‎ (בפעם השביעית בפרויקט הזה). המונה נבנה
   פעם אחת ומוסתר -ולא נוצר מחדש- כדי שמאזיני הגרירה לא יצטברו. */
.fps-hud[hidden] { display: none; }
.fps-hud.is-dragging { cursor: grabbing; }
/* מרגע שהמשתמש הזיז אותו, ה-JS כותב ‎left/top‎ inline. ‎inset-inline-start‎
   הוא ‎right‎ במסמך RTL, ושני הצדדים יחד **מותחים** את הקופסה -ולכן הוא
   חייב לרדת. אותה מלכודת שכבר תועדה כאן על הצמדת הפאנל. */
.fps-hud.is-moved { inset-inline-start: auto; inset-inline-end: auto; }
/* חיווי שאפשר לגרור. הגרירה עצמה עובדת מכל שטח המונה -ידית של פיקסלים
   בודדים בתוך קופסה של ‎~130x30‎ אינה יעד. */
.fps-hud-grip { font-size: 0.8rem; font-style: normal; opacity: 0.45; letter-spacing: -0.05em; }
.fps-hud b { font-size: 1.15rem; }
.fps-hud span { font-size: 0.7rem; font-weight: 400; opacity: 0.7; }
.fps-hud i { font-size: 0.7rem; font-style: normal; font-weight: 400; opacity: 0.75; }
/* אותם ספים של דוח בדיקת העומס שבטאב הביצועים */
.fps-hud.is-good b { color: #7CE38B; }
.fps-hud.is-mid  b { color: #F5C451; }
.fps-hud.is-bad  b { color: #FF8A80; }
/* בפאנל פתוח הוא יורד מתחתיו, כמו כל שכבה אחרת באתר */
body.admin-on .fps-hud { z-index: 116; }

/* תפריט הקליק-ימני של המונה. **יורש את ‎.scene-ctx‎ במלואו** -זה אותו
   רכיב (תפריט שמרחף מעל הסצנה), וערכה שנייה לו הייתה מתפצלת בשינוי
   העיצוב הראשון. מה שנוסף כאן הוא הרוחב והסימון בלבד. */
/* תקרת גובה גבוהה מזו של תפריט הסצנה (‎26rem‎): כאן יש שישה מתגים,
   שני קישורים ומקרא, ובתקרה ההיא שני הקישורים התחתונים נחתכו. ‎dvh‎
   ולא ‎vh‎ (חוק מתועד), ובדפדפן שאינו תומך הכלל נופל -וברירת המחדל
   של ‎.scene-ctx‎ שמעליו ממשיכה לחול. */
.fps-ctx {
    min-width: 15rem;
    max-width: min(21rem, calc(100vw - 1rem));
    max-height: min(88dvh, 40rem);
    transform-origin: top left;
}
.fps-ctx .scene-ctx-i { font-size: 1rem; }
.fps-ctx [data-act].is-on { color: var(--c-gold-light, #ffe7a3); }
/* שורת המצב: **האתר סטטי, וזה נאמר במפורש.** בלעדיה הפקד מציג ‎☐‎ בזמן
   שהאתר אינו זז -פער שנקרא כתקלה של הכלי ולא כמצב של האתר. */
.fps-ctx-lite {
    margin: 0 0.15rem 0.2rem;
    padding: 0.4rem 0.55rem;
    border-radius: 0.5rem;
    background: rgba(255, 209, 90, 0.14);
    border: 1px solid rgba(255, 209, 90, 0.32);
    color: var(--c-gold-light, #ffe7a3);
    font-weight: 700;
}
/* **"פעיל, אבל לא מהפקד הזה" -וזו הבחנה אמיתית.** ‎dbgLite‎ הוא מתג
   ה**דמה**; כשהמצב הסטטי הגיע מהגלאי או מ-‎?lite=1‎ הדמה כבויה בצדק,
   ולחיצה עליה לא תשנה דבר במראה. ‎☐‎ לצד אתר שאינו זז נקרא כתקלה, ו-‎☑‎
   מלא טוען שהפקד הזה הדליק אותו.

   הגרסה הראשונה פתרה את זה ב-‎◉‎ ונמדדה כחורגת -עיגול מלא בין ריבועים,
   וגופן שמצייר אותו גדול מהם (המלכודת המתועדת של תו סמל תלוי-גופן).
   מה שנושא את ההבחנה היום הוא **התג** שלצידו, והסימון נשאר במשפחה
   ומעומעם: מסומן, אבל לא על ידך. */
/* ---- המקרא: שלוש שורות ערך→משמעות, וסולם צבעים ----
   הגרסה הראשונה הייתה פסקה אחת עם ‎<br>‎, והיא נקראה כגוש טקסט שנשבר
   באמצע מילים -בדיוק מה שהמקרא בא למנוע. היום זו **רשת** של שלוש
   עמודות (ערך · יחידה · משמעות), ולכן המספרים מיושרים זה מתחת לזה
   והעין מוצאת מיד את השורה שהיא מחפשת. */
.fps-ctx-legend {
    margin: 0.35rem 0.15rem 0.1rem;
    padding: 0.5rem 0.6rem 0.55rem;
    border-radius: 0.6rem;
    background: rgba(0, 0, 0, 0.26);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(233, 242, 252, 0.8);
    font-size: 0.76rem;
    line-height: 1.45;
    text-align: start;
}
.fps-ctx-legend-h {
    margin-bottom: 0.3rem;
    color: var(--c-gold-light, #ffe7a3);
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.9;
}
.fps-ctx-leg-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: baseline;
    gap: 0 0.35rem;
    padding: 0.2rem 0;
}
.fps-ctx-leg-row + .fps-ctx-leg-row { border-top: 1px solid rgba(255, 255, 255, 0.06); }
/* ‎tabular-nums‎: שלושת המספרים בעמודה אחת, ובלעדיו ספרה צרה מזיזה את
   כל השורה. ‎text-align: end‎ כדי שהם יסתיימו באותו קו. */
.fps-ctx-leg-row b {
    min-width: 2.5rem;
    color: #eaf2ff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: end;
}
.fps-ctx-leg-row em { font-style: normal; font-size: 0.68rem; opacity: 0.5; }
.fps-ctx-scale { display: flex; gap: 0.3rem; margin-top: 0.5rem; }
.fps-ctx-scale span {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 0;
    padding: 0.2rem 0.15rem;
    border-radius: 0.4rem;
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}
.fps-ctx-scale i {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}
/* אותם שלושה צבעים של המספר שבמונה -שינוי באחד מחייב את השני */
.fps-ctx-scale .is-good { color: #7CE38B; }
.fps-ctx-scale .is-mid  { color: #F5C451; }
.fps-ctx-scale .is-bad  { color: #FF8A80; }
.fps-ctx-scale .is-good i { background: #7CE38B; }
.fps-ctx-scale .is-mid  i { background: #F5C451; }
.fps-ctx-scale .is-bad  i { background: #FF8A80; }
.fps-ctx-leg-note { margin: 0.45rem 0 0; font-size: 0.72rem; opacity: 0.6; }
.fps-ctx-why {
    margin: -0.15rem 0.15rem 0.25rem;
    padding: 0 0.55rem 0.35rem;
    font-size: 0.8rem;
    opacity: 0.85;
}
.fps-ctx [data-act].is-elsewhere .scene-ctx-i { opacity: 0.55; }
.fps-ctx [data-act].is-elsewhere .scene-ctx-on {
    background: rgba(255, 209, 90, 0.14);
    font-weight: 600;
}

/* והחיווי על המונה עצמו, שהוא מה שרואים בלי לפתוח כלום. ‎::after‎ ולא
   אלמנט במרקאפ: הוא פריט flex אחרון בקופסה, בלי לגעת ב-‎querySelector‎
   של ‎b‎/‎i‎ שהלולאה כותבת אליהם. */
.fps-hud.is-lite::after {
    content: '🐢';
    font-size: 0.85rem;
    line-height: 1;
    filter: saturate(1.2);
}
.fps-hud.is-lite {
    border-color: rgba(255, 209, 90, 0.7);
    background: rgba(48, 30, 8, 0.86);
}