/* ==========================================================================
   משה נחמני — אתר-מוזיאון וירטואלי
   Design System — Agent-3 (UI/UX)
   גופנים (יש לטעון ב-<head> של כל עמוד, ראה DESIGN_SYSTEM.md):
   Frank Ruhl Libre, Cormorant Garamond, Heebo, EB Garamond — Google Fonts
   ========================================================================== */

/* ---------- 1. Design Tokens ---------- */
:root{
  /* פלטה — קיר שיש קרם משולב זהב (Calacatta Gold), בתאורה מוזיאלית בהירה, זהב כאקסנט */
  --wall:        #6b5f45;
  --wall-deep:   #191410;   /* קיר בקצוות/וינייטה — כהה יותר */
  /* היסטוריה: v=3 תוקן cache ישן. v=4 ניסה לתקן "הרקע לפעמים ריק" ע"י הקטנת
     הקובץ מ-3600×3600 ל-2400×2400 — זה פתר את בעיית-העיטוי, אבל יצר טשטוש אמיתי
     שירין תפס מיד (מסכי Retina/2x-3x צריכים בפועל ~3600px בצלע הארוכה כדי להיראות
     חדים ב-cover ברוחב viewport טיפוסי — 2400px היה ממש נמוך מדי, לא "מספיק"). v=5:
     הפתרון הנכון — WEBP במקום JPEG, באותה רזולוציה מקורית מלאה (3600×3600, בלי שום
     פשרה בחדות), רק קידוד יעיל יותר: 350KB במקום 930KB (-62%) על אותם פיקסלים
     בדיוק. שיפור נוסף: ה-filter (saturate/contrast/brightness) שהיה על ההורה
     (מכריח רסטריזציה-מחדש של כל האלמנט בכל paint — עלות אמיתית, בנפרד מגודל-הקובץ)
     עכשיו אפוי ישירות בתוך התמונה עצמה (PIL ImageEnhance, אותם ערכים בדיוק) — אז
     ה-filter הוסר לגמרי מ-.museum-room::before/#hero-stage::before למטה. שתי
     הבעיות (עטיה + טשטוש) מטופלות יחד בלי לוותר על אף אחת מהן. */
  --marble-img:  url('../assets/marble-bg-hires.webp?v=5');
  /* שינוי 60 (תיקון מובייל): עוצמת שכבות-התאורה (וינייטה) שמעל קיר-השיש, כמשתנים —
     ברירת-המחדל היא הדסקטופ. במסך צר/גבוה (מובייל), אותה אליפסה יחסית ל-100% 100%
     של הקופסה מכסה חלק גדול בהרבה מהשטח הנראה (כי הקופסה עצמה צרה וגבוהה), אז אותה
     עוצמה בדיוק "שוטפת" את מרקם השיש/הזהב הרבה יותר משנראה בדסקטופ — נמדד ויזואלית
     (השוואת שני צילומי-מסך, DPR=1 ו-DPR=2, לאותו קרופ ליד המסגרת) לא כבאג-רזולוציה
     (התמונה עצמה 2200×2200, cover אף פעם לא מגדיל אותה מעבר לגודל הטבעי במובייל) אלא
     כטשטוש-קונטרסט אמיתי מהוינייטה עצמה. מוקטן במדיה-קווארי למטה. */
  --marble-vignette-top:    .22;
  --marble-vignette-bottom: .22;
  --marble-vignette-side:   .14;
  --gold:        #C6A34E;
  --gold-light:  #D9B96A;
  --gold-deep:   #8F711F;
  /* צבעי כותרות ייעודיים — עשירים ומעומעמים יותר מ-gold-light כדי לא להיבלע בקיר השיש הבהיר */
  --title-en:    #8A5A18;   /* זהב עתיק כהה — כותרת ראשית אנגלית */
  --title-he:    #2E2010;   /* דיו-ברונזה כהה — כותרת משנה עברית */
  --cream:       #EFE7D2;
  --cream-deep:  #E2D6B4;
  --wood:        #3E2A1C;
  --wood-light:  #5A3D28;
  --text-on-wall:    #F0E7D0;
  --text-on-placard: #2A211A;
  --ink:         #1B140F;   /* טקסט כהה בסיסי מחוץ לחדר (footer/forms bg-light) */

  /* מצבי משוב — מרוסנים לתוך הפלטה, לא צבעי-אזעקה גנריים */
  --state-ok:    #7C9A6E;
  --state-ok-bg: #223626;
  --state-err:   #C97B6E;
  --state-err-bg:#3A1F1C;

  /* סקאלת ריווח */
  --sp-1: .5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-6: 3rem;
  --sp-8: 4rem;
  --sp-12: 6rem;
  --sp-16: 8rem;

  /* רדיוסים */
  --r-sm: 3px;
  --r-md: 8px;
  --r-lg: 18px;

  /* צללים */
  --shadow-frame:   0 22px 46px rgba(0,0,0,.45);
  --shadow-frame-hi:0 30px 64px rgba(0,0,0,.55);
  --shadow-soft:    0 8px 24px rgba(0,0,0,.25);
  --shadow-placard: 0 4px 16px rgba(0,0,0,.35);
  --shadow-nav:     0 8px 30px rgba(0,0,0,.35);

  /* easings — קפיצי לאינטראקציה, חלק לחשיפות/מעברים */
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-smooth: cubic-bezier(0,0,.2,1);

  /* משכי זמן */
  --dur-fast: 220ms;
  --dur-base: 450ms;
  --dur-slow: 750ms;

  /* טיפוגרפיה — זיווג יוקרתי, שונה לכל שפה */
  --font-display-he: 'Frank Ruhl Libre', 'Times New Roman', serif;
  --font-display-en: 'Cormorant Garamond', Georgia, serif;
  --font-body-he: 'Heebo', system-ui, sans-serif;
  --font-body-en: 'EB Garamond', Georgia, serif;

  /* מסגרת זהב מפוסלת — עקבית בכל האתר (מבוססת על תמונת רפרנס), רק העובי משתנה.
     תמונת המקור נחתכה בדיוק לגבולות המסגרת עצמה (ללא הרקע הלבן שסביבה),
     כך שה-border-image יושב טבעית על גבולות כל תמונה, בלי מסגרת לבנה. */
  --frame-w: 27px;
  --frame-img: url('../assets/gold-frame-trimmed.jpg');

  color-scheme: dark;
}

/* גוף הטקסט לפי שפה פעילה */
:root[lang="he"]{ --font-display: var(--font-display-he); --font-body: var(--font-body-he); }
:root[lang="en"]{ --font-display: var(--font-display-en); --font-body: var(--font-body-en); }

/* ---------- 2. Reset & Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:auto; /* גלילה חלקה מנוהלת ע"י Lenis (Agent-4); לא CSS scroll-behavior, כדי שלא יתנגשו */
  /* זום-אאוט כללי לכל האתר: מקטין את בסיס ה-rem כך שכל טיפוגרפיה, ריווח (--sp-*)
     ופדינג מבוסס-rem בכל עמוד מצטמצם באופן עקבי, בלי לגעת בכל כלל בנפרד. */
  font-size: 88%;
}
html,body{ margin:0; padding:0; background:var(--wall); }
body{
  font-family: var(--font-body, var(--font-body-he));
  color: var(--text-on-wall);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }

/* דו-לשוניות: מציגים רק את גוש השפה הפעילה. Agent-4 קובע document.documentElement.lang */
[lang="he"] .i18n-en, [lang="en"] .i18n-he{ display:none !important; }
:root[dir="ltr"] { direction:ltr; }
:root[dir="rtl"] { direction:rtl; }

/* מיקוד נגיש */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.skip-link{
  position:fixed; right:1rem; top:-4rem; z-index:200;
  background:var(--cream); color:var(--text-on-placard);
  padding:.75rem 1.25rem; border-radius:var(--r-sm);
  transition: top var(--dur-fast) var(--ease-smooth);
}
.skip-link:focus{ top:1rem; }

/* ---------- 3. Typography ---------- */
.display-xl{
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.08;
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  color: var(--text-on-wall);
}
.display-lg{
  font-family: var(--font-display);
  font-weight:500;
  letter-spacing:.015em;
  line-height:1.15;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
}
.eyebrow{
  font-family: var(--font-body);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.72rem;
  color: var(--gold-light);
  opacity:.9;
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
}
/* עותק בתוך hero-ui__caption יושב הכי קרוב לצלע-המסגרת — מוסיפים הצללה כפולה חזקה יותר
   כדי שיישאר קריא גם מעל תבליט-הגילוף המוזהב, בלי תלות רק בוויניאטה האחורית. */
.hero-ui__caption .eyebrow{
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 2px 14px rgba(0,0,0,.75);
}
/* ריווח נוסף בין "מוזיאון וירטואלי" לכותרת השם מתחתיה (ירין: "תן קצת ריווח בין
   הטקסט 'מוזיאון וירטואלי' לכותרת הראשית") — .hero-ui__gap הכללי (var(--sp-2))
   נשאר בין שאר האיברים, כאן מוסיפים עוד קצת רק אחרי ה-eyebrow. */
.hero-ui .eyebrow{ font-size:1rem; margin-bottom:.5rem; }
.lede{
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: var(--text-on-wall);
  opacity:.88;
  max-width: 46ch;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
.body-text{ font-family: var(--font-body); font-size:1rem; opacity:.92; }

/* ---------- 4. סביבת המוזיאון — הקיר ---------- */
.museum-room{
  position:relative;
  min-height:100vh;
  background: var(--wall);
  overflow:hidden;
  isolation:isolate;
}
.museum-room::before{ /* קיר שיש (Marble) משולב זהב — תמונה אחת שלמה, קבועה וממורכזת ביחס למסך (ללא חזרה/תפירה),
     כך שהיא נשארת חדה ואחידה גם בעמודים ארוכים, בלי קווי-תפר של אריחים חוזרים. */
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(12,9,4,.12), rgba(12,9,4,.12)),
    radial-gradient(ellipse 120% 70% at 50% -10%, rgba(255,255,255,var(--marble-vignette-top)), transparent 60%),
    radial-gradient(ellipse 130% 65% at 50% 110%, rgba(0,0,0,var(--marble-vignette-bottom)), transparent 68%),
    radial-gradient(ellipse 90% 130% at -10% 50%, rgba(0,0,0,var(--marble-vignette-side)), transparent 58%),
    radial-gradient(ellipse 90% 130% at 110% 50%, rgba(0,0,0,var(--marble-vignette-side)), transparent 58%),
    var(--marble-img);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, cover;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: center, center, center, center, center, center 38%;
  background-attachment: scroll, scroll, scroll, scroll, scroll, fixed;
  background-color: var(--wall);
  /* filter הוסר — אפוי עכשיו ישירות בתוך marble-bg-hires.webp עצמו (ר' ההערה
     ליד --marble-img למעלה). זה גם מסיר עלות-רסטריזציה אמיתית מכל paint. */
  z-index:0;
}
/* באג אמיתי שדווח משני מכשירים נפרדים (ירין + האמן): "לפעמים הרקע לא מוצג".
   הסיבה: אותה בעיה בדיוק שכבר תועדה ותוקנה ב-#hero-stage::before למעלה —
   background-attachment:fixed ביחד עם filter על אותו אלמנט הוא צירוף לא-אמין
   בדפדפני מובייל (בעיקר Safari/WebKit ל-iOS): לפעמים נכשל compositing של השכבה
   ה-fixed בכלל בתוך הקשר עם filter, והרקע פשוט לא נצבע. שם זה תוקן כי #hero-stage
   כבר position:fixed בעצמו (fixed על השכבה מיותר); כאן .museum-room אינו fixed,
   אז fixed על השכבה עדיין נותן אפקט פרלקס אמיתי בדסקטופ — משאירים אותו שם,
   ומכבים רק במובייל, איפה שהוא לא אמין ולא קריטי לעיצוב. */
/* תוקן שוב — וזה היה שורש הטשטוש במובייל (ירין: "במחשב חד, בטלפון מטושטש"):
   background-attachment:scroll הופך את "אזור-המיקום" של הרקע לתיבת האלמנט כולה,
   ו-.museum-room מכיל את כל העמוד — 430×9343px בגלריה בטלפון. background-size:cover
   על תיבה כזו חייב למתוח תמונה ריבועית 3400px לגובה 9343px — פי 2.75 מעל הרזולוציה
   הטבעית שלה, ומכאן הטשטוש. בדסקטופ השכבה נשארה fixed, ושם אזור-המיקום הוא ה-viewport
   בלבד (1440×900 → 0.42x, כלומר הקטנה) — ולכן שם זה נראה חד. נמדד ואומת ישירות.
   הפתרון שפותר את שתי הבעיות יחד: האלמנט עצמו position:fixed (אזור-המיקום = viewport
   → חד), בלי background-attachment:fixed (החלק שנכשל ב-compositing ב-WebKit). */
@media (max-width:900px){
  .museum-room::before{ position:fixed; background-attachment: scroll; }
}
/* תמונת-מקור חדשה (בקשת ירין, שלח background.avif מהדסקטופ — 740×740, טושטש קודם
   ב-2400px היה נמוך מדי): הוגדלה ב-AI אמיתי (OpenCV dnn_superres/FSRCNN ×4,
   740→2960, אותה שיטה שכבר אומתה בפרויקט הזה) + עוד קצת Lanczos ל-3400×3400,
   ואז WEBP (312KB). מוחל רק בעמודים בלי הירו (:not(:has(#hero-stage)) — גלריה/
   פרויקט-בעבודה/הזמנה/יצירת-קשר) — בקשת ירין המפורשת: "תשאיר את הבית כמו שהוא,
   לא רוצה לפגוע באנימציות". ב-index.html גם ה-hero וגם אזור-האודות שמתחתיו
   (.museum-room::before הרגיל) נשארים בדיוק על התמונה הישנה — אין תפר בין השניים
   באותו עמוד, כמו שהיה מתוכנן במקור ("אותו רקע בדיוק שממשיך אל שאר האתר"). */
body:not(:has(#hero-stage)) .museum-room::before{
  background-image:
    linear-gradient(rgba(12,9,4,.12), rgba(12,9,4,.12)),
    radial-gradient(ellipse 120% 70% at 50% -10%, rgba(255,255,255,var(--marble-vignette-top)), transparent 60%),
    radial-gradient(ellipse 130% 65% at 50% 110%, rgba(0,0,0,var(--marble-vignette-bottom)), transparent 68%),
    radial-gradient(ellipse 90% 130% at -10% 50%, rgba(0,0,0,var(--marble-vignette-side)), transparent 58%),
    radial-gradient(ellipse 90% 130% at 110% 50%, rgba(0,0,0,var(--marble-vignette-side)), transparent 58%),
    url('../assets/marble-bg-pages.webp?v=1');
}
.museum-room::after{ /* טקסטורת גרגר שיש עדינה — SVG noise, מוסיפה מרקם עדין שממסך רכות של הגדלת התמונה */
  content:"";
  position:absolute; inset:0;
  opacity:.07; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(../%23n)'/%3E%3C/svg%3E");
  z-index:0;
}
.museum-room__inner{ position:relative; z-index:2; }

/* וינייטה כללית למיקוד המבט */
.museum-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(ellipse 80% 70% at 50% 40%, transparent 55%, rgba(0,0,0,.24) 100%);
}

/* תקרה: רמז בהיר בראש המסך */
.museum-ceiling{
  position:absolute; top:0; left:0; right:0; height:14vh; min-height:90px; z-index:1;
  background: linear-gradient(180deg, rgba(255,247,225,.16), transparent);
  pointer-events:none;
}

/* ספוטים שקועים — למקם מעל כל מסגרת (Agent-4 ממקם בפועל לפי מיקום היצירה) */
.spotlight{
  position:absolute; top:-4%; left:50%; transform:translateX(-50%);
  width:min(30vw,320px); height:220px;
  background: radial-gradient(circle, rgba(255,244,214,.32), transparent 72%);
  filter: blur(4px);
  pointer-events:none; z-index:1;
}

/* ---------- 7. שלט-חדר ---------- */
.room-sign{
  text-align:center;
  padding: var(--sp-8) var(--sp-3) var(--sp-4);
  position:relative; z-index:3;
}
/* ריווח נוסף מתחת לניווט הקבוע, רק בכניסה ל"על האמן" (ירין: "השלט צמוד לכותרת,
   תן קצת הפרדה, בלי לפגוע בחלקות המעבר-חזרה") — רק padding-top על השלט עצמו,
   לא נוגע בגובה #hero-scroll-track או בחישובי ה-scroll שקובעים את קצב האנימציה,
   אז זה לא משפיע על תזמון הגלילה. */
/* מרווח-נחיתה (ירין: "אחרי האנימציה זה קופץ ישר למידע ולא לשלט — תוסיף קצת
   שיש, אבל קצת"). הסיבה היא הגלילה החלקה: בסוף המסע התנופה נושאת את המשתמש
   מעבר לנקודת p=1, ובלי שוליים הוא נוחת כבר בתוך הטקסט. 12vh נותנים לתנופה
   לאן לנחות כך שהשלט הוא מה שנראה — בלי "חדר ריק" שצריך לגלול דרכו. */
#aboutRoom .room-sign{ padding-top: calc(var(--sp-8) + 2rem + 12vh); }
/* לוחית-שלט מוזיאלית — כל כותרת יושבת על גבי "שלט" שיש-קרם עם מסמרי זהב בפינות,
   כדי שהכותרת תיקרא כתווית תלויה על הקיר ולא כטקסט צף ישירות מעל השיש. */
.room-sign__title{
  display:block;
  width:fit-content;
  max-width:min(92vw, 720px);
  margin-inline:auto;
  position:relative;
  padding: clamp(1rem,3vw,1.5rem) clamp(1.8rem,6vw,3.4rem) clamp(.9rem,2.4vw,1.2rem);
  background:
    radial-gradient(circle 3px at 15px 15px, var(--gold-deep) 55%, transparent 58%),
    radial-gradient(circle 3px at calc(100% - 15px) 15px, var(--gold-deep) 55%, transparent 58%),
    radial-gradient(circle 3px at 15px calc(100% - 15px), var(--gold-deep) 55%, transparent 58%),
    radial-gradient(circle 3px at calc(100% - 15px) calc(100% - 15px), var(--gold-deep) 55%, transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 38%),
    linear-gradient(155deg, #F4EDDC 0%, #E9DDBE 55%, #DED0A6 100%);
  border-radius: 4px;
  border: 1px solid rgba(143,113,31,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(110,82,20,.25),
    0 20px 44px rgba(15,10,3,.4),
    0 4px 14px rgba(15,10,3,.22);
}
/* גרסה מוקטנת לכותרות-משנה בתוך קיר (למשל "האולם הראשי") — אותה לוחית, קנה מידה עדין יותר */
.room-sign__title.title-bilingual--section{
  padding: clamp(.8rem,2vw,1.15rem) clamp(1.4rem,4vw,2.2rem) clamp(.7rem,1.8vw,.95rem);
}
.room-sign__sub{
  margin-top:.5rem;
  font-family: var(--font-body);
  color: var(--text-on-wall);
  opacity:.65;
  letter-spacing:.05em;
  font-size:.95rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.room-sign__rule{
  width:64px; height:1px; margin:1.1rem auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ---------- 7B. כותרות דו-לשוניות — אנגלית ראשית (סקריפט מחובר יוקרתי) + עברית משנה ----------
   כל כותרת עמוד/קטע באתר מוצגת תמיד בשתי השורות גם יחד — לא כפוף למתג השפה (i18n-he/en),
   כדי שהזהות הכפולה תישאר גלויה תמיד: שורה ראשית אנגלית בגופן סקריפט מחובר,
   ומתחתיה תרגום עברי בגופן התצוגה היוקרתי הרגיל של האתר. */
.title-bilingual{ display:block; }
.title-bilingual__en{
  display:block;
  font-family:'Parisienne', cursive;
  font-weight:400;
  color: var(--title-en);
  letter-spacing:.02em;
  line-height:1.2;
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  /* הדגשה: הילה בהירה צמודה (מפרידה מהאזורים הכהים של השיש) + צל חם רך (מפריד מהלבן הבהיר) */
  text-shadow: 0 1px 1px rgba(255,255,255,.6), 0 2px 6px rgba(255,255,255,.3), 0 5px 20px rgba(30,18,4,.35);
}
.title-bilingual__he{
  display:block;
  font-family: var(--font-display-he);
  font-weight:500;
  color: var(--title-he);
  opacity:1;
  letter-spacing:.12em;
  margin-top:.35rem;
  font-size: clamp(.95rem, 1.6vw, 1.25rem);
  /* הילה בהירה מאחורי הדיו הכהה — אפקט "חרוט באבן", קריא על כל גוון בשיש */
  text-shadow: 0 1px 1px rgba(255,255,255,.7), 0 2px 10px rgba(255,255,255,.4);
}
/* כותרת-משנה בתוך קיר (למשל "האולם הראשי" בעמוד הגלריה) — קנה מידה מוקטן */
.title-bilingual--section .title-bilingual__en{ font-size: clamp(1.7rem, 3.8vw, 2.7rem); }
.title-bilingual--section .title-bilingual__he{ font-size: clamp(.78rem, 1.3vw, .95rem); margin-top:.25rem; }
/* תוקן (ירין: במובייל הכותרות האלה — "האולם הראשי"/"הגלריה המשנית"/"חדר הסקיצות"/
   "מאחורי הקלעים" — קטנות מדי, קשה להבחין שעברת לקטע חדש). ה-vw בתוך ה-clamp נופל
   מתחת למינימום במסכים צרים, אז בפועל תמיד מקבלים בדיוק את המינימום — כאן מוגדל. */
@media (max-width:640px){
  .title-bilingual--section .title-bilingual__en{ font-size: 2.1rem; }
  .title-bilingual--section .title-bilingual__he{ font-size: 1rem; }
}
/* כותרת בתוך שלט קרם (למשל "קטלוג הדפסת קנבס") — צבעים על רקע בהיר, לא קיר שיש */
/* ממורכזת במפורש: בעמוד RTL יישור ברירת המחדל של h2 הוא ימין, מה שדוחק את הכותרת לקצה במקום למרכז השלט */
.title-bilingual--onboard{ text-align:center; }
.title-bilingual--onboard .title-bilingual__en{ color: var(--gold-deep); text-shadow:none; font-size: clamp(1.6rem,3.2vw,2.2rem); }
.title-bilingual--onboard .title-bilingual__he{ color: var(--text-on-placard); opacity:.62; text-shadow:none; font-size:.85rem; margin-top:.2rem; }
/* כותרת הגיבור — הרגע הראשון באתר, קנה מידה גדול יותר. יושבת על תמונת שמן כהה עם וילון-צל
   (לא קיר השיש), ולכן שומרת על הגוון הבהיר המקורי שקריא היטב שם. */
/* הוקטן (ירין: "הטקסט צריך להיות קטן יותר, הציור הרבה יותר גדול ממנו") */
/* הוגדל שוב (ירין: "תעשה את כל הטקסט יותר גדול, גם אם זה אומר שהדיב יהיה רחב
   יותר מהתמונה מעליו — זה בסדר, זה יראה יפה יותר") — .hero-ui הוא position:fixed
   על כל ה-viewport, אז אין מגבלת-רוחב אמיתית מהתמונה הממוסגרת; ההגדלה כאן מספיקה. */
.title-bilingual--hero .title-bilingual__en{
  font-size: clamp(2.6rem, 6.5vw, 4.8rem);
  color: var(--gold-light);
  text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 6px 24px rgba(0,0,0,.45);
}
.title-bilingual--hero .title-bilingual__he{
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  color: var(--text-on-wall);
  opacity:.85;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
/* במסכים צרים מאוד (~360px, לא iPhone רגיל) ה-vw בתוך ה-clamp נופל מתחת למינימום
   כמו בבאג המתועד למעלה עבור title-bilingual--section — "Moshe Nahmani" ב-2.6rem
   חורג מעבר לקצה המסך במקום לרדת שורה (span עם white-space:normal לא נשבר בפועל
   בשורה הזו). כאן מקטינים את הרצפה רק בטווח הצר הזה, כדי שלא ייחתך. */
@media (max-width:400px){
  .title-bilingual--hero .title-bilingual__en{ font-size: 2.1rem; }
}

/* ---------- 8. מסגרת זהב מפוסלת — אחידה לכל האתר, לפי תמונת הרפרנס ----------
   גודל מבוסס-גובה (לא רוחב): כל מסגרת מקבלת גובה יחסי-למסך (clamp עם vh), והרוחב נגזר
   אוטומטית מיחס-הממדים של היצירה עצמה. כך: (1) גובה התמונה תמיד מוגבל ביחס לגובה המסך —
   המשתמש רואה את כל היצירה בלי לגלול; (2) כששתי מסגרות יושבות באותה שורה עם אותה מחלקת
   גודל, הן מקבלות בדיוק אותו גובה — התלייה נשארת סימטרית תמיד. */
.artwork-frame{
  position:relative;
  display:inline-flex;
  align-items:center; justify-content:center;
  border-style: solid;
  border-width: var(--frame-w);
  border-color: var(--gold); /* גיבוי לפני טעינת תמונת המסגרת */
  border-image-source: var(--frame-img);
  border-image-slice: 8.2% 10.2% 8.2% 10.2%;
  border-image-width: 1;
  border-image-repeat: round;
  box-shadow: var(--shadow-frame);
  height: var(--frame-h, clamp(190px, 34vh, 360px));
  width:auto; max-width:100%;
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-smooth);
}
.artwork-frame img{
  display:block; width:auto; height:100%; max-width:100%;
  aspect-ratio: var(--ar, auto);
  object-fit:contain; /* לעולם לא חיתוך/מתיחה — היצירה במלואה, בגרסתה המקורית, תמיד בתוך תקרת הגובה */
  background:#0b0b0d;
}
.artwork-frame:hover,.artwork-frame:focus-within{
  transform: scale(1.03);
  box-shadow: var(--shadow-frame-hi);
}
/* תוקן (ירין: "כשעובר עם העכבר, המסגרות נהיות כאילו מולבנות") — brightness(1.25)
   על הספוטלייט העדין-ממילא היה נראה כמו הבהרה/הלבנה על הפינה העליונה של המסגרת.
   הוסר — hover עדיין מורגש (scale+shadow על .artwork-frame עצמו), רק בלי זה. */

/* גדלים יחסיים — תקרת גובה יחסית למסך (vh) עם רצפת/תקרת פיקסלים */
.artwork--sm{ --frame-h: clamp(165px, 27vh, 255px); }
.artwork--md{ --frame-h: clamp(190px, 32vh, 340px); }
.artwork--lg{ --frame-h: clamp(205px, 36vh, 375px); }
.artwork--xl{ --frame-h: clamp(220px, 39vh, 425px); }
/* גדלים לתמונות לרוחב (landscape) — תקרת גובה נמוכה יותר (הרוחב כבר מפצה על כך),
   כך שהנפח החזותי נשאר קרוב לזה של יצירה לאורך באותו קיר */
.artwork--wide{ --frame-h: clamp(155px, 25vh, 255px); }
.artwork--wide-lg{ --frame-h: clamp(170px, 29vh, 290px); }

/* מסגרות בגוון ייעודי — חלופה למסגרת הזהב עבור יצירות נבחרות. שינוי 61: הגרסה הקודמת
   (border-color שטוח + נקודות-rivet מצוירות ב-CSS) עדיין נראתה "סתם צבע" ליד המסגרת
   המוזהבת המפוסלת — בדיוק מה שירין ביקש לתקן: "פאטרן כמו האחרות, רק בצבע אחר". הפתרון:
   אותה תמונת-המסגרת המפוסלת בדיוק (gold-frame-trimmed.jpg), שוחזרה בפייתון/PIL עם
   ImageOps.colorize על מפת-הבהירות שלה (משמר את כל תבליט-הגילוף המקורי, רק צובע מחדש) —
   כך שכל וריאנט הוא בדיוק אותו פאטרן פיסול, בגוון אחר. הגוונים נגזרו מ---frame-trim/
   --frame-rivet הקודמים כדי להישאר עקביים עם מה שכבר תואם לכל וריאנט. אין יותר צורך
   בעיטור ::before/::after — למדליוני-הפינה יש כבר גילוף אמיתי בתוך התמונה עצמה.
   שינוי 62: --frame-w כאן הושאר בטעות על ברירת-המחדל הגלובלית (27px, כמו הזהב) — ומכיוון
   ש-box-sizing:border-box גלובלי (שורה 85), הגדלת ה-border ישירות מכווצת את שטח-התוכן
   שבו מוצגת היצירה עצמה (לא רק "מוסיף מסביב") — בדיוק מה שירין דיווח כ"מכסה את הציורים",
   בולט בעיקר ביצירות צרות/גבוהות כמו "דוד". גם עבה מדי בשביל "עדין ואלגנטי" שביקש.
   17px (במקום 27px) — עדיין מספיק כדי שתבליט-הגילוף ייקרא בבירור, אבל משאיר משמעותית
   יותר שטח ליצירה עצמה ומרגיש קליל יותר ליד הזהב הכבד-בכוונה. */
.frame-onyx{
  --frame-w:17px;
  border-image-source:url('../assets/frame-onyx.jpg');
  border-image-slice: 8.2% 10.2% 8.2% 10.2%; border-image-width:1; border-image-repeat:round;
}
/* שינוי (בקשת יערין, וידאו-רפרנס "מסגרת ספה"): מסגרת שטוחה ופשוטה, בלי תבליט-גילוף —
   רק על יצירות שלא במסגרת זהב (האולם הראשי נשאר עם מסגרת הזהב המפוסלת המקורית),
   באותו גוון-צבע שכבר משויך לכל יצירה (חום לגלריה המשנית, אפור לסדרת דוד). border-image
   מבוטל (border-image:none) כדי שה-border-color השטוח יראה במקום התמונה המפוסלת. */
/* תוקן שוב (ירין: "דק יותר, ועדיין נראה כמו צבע שטוח — תוסיף עומק כמו מסגרת אמיתית"):
   --frame-w ירד ל-11px (מ-17), וה-border-color השטוח הוחלף ב-border-image gradient —
   כהה→בהיר→כהה על פני עובי המסגרת, מדמה פרופיל-עץ מעוגל שתופס אור מכיוון אחד,
   בדיוק כמו במסגרת האמיתית בצילום שהוא שלח. */
/* תוקן (ירין: "גימור מבריק/מתכתי — אני רוצה מאט", וגם "ב-hover חצי מהמסגרת נהיה
   לבן, כמו לג"): הגרדיאנט הקודם קפץ עד גוונים בהירים מדי (כמעט-לבנים) שקראו כברק
   מתכתי, ואותו קפיצת-בהירות בשילוב עם transform:scale על hover כנראה גרמה
   לחוסר-עקביות בציור מחדש של ה-border-image במעבר. עכשיו: טווח גוונים צר וכהה
   יותר (מאט אמיתי, בלי הבהוב). */
/* תוקן סופית (ירין: "עדיין חצי מהמסגרות מולבנות ב-hover, תחזיר אותן כמו שהיו"):
   border-image-source:linear-gradient() כ-live CSS gradient, בשילוב transform:scale
   על hover (ה-.artwork-frame:hover הבסיסי), גרם לבאג עקבי — ריצוד/הלבנה בציור-מחדש
   של הגרדיאנט באמצע האנימציה. הפתרון האמיתי: לא גרדיאנט חי, אלא קובץ-תמונה אמיתי
   (בדיוק כמו מסגרת-הזהב המקורית, gold-frame-trimmed.jpg — שם, עם border-image
   שמצביע ל-url אמיתי, hover+scale אף פעם לא גרם לבעיה) — נוצר מראש ב-PIL באותם
   גוונים בדיוק, ונטען כתמונה סטטית רגילה. */
.frame-walnut{
  --frame-w:8px;
  /* תוקן שוב (ירין: "יש לך ריבועים מוזרים בתוך המסגרת, תעשה אותן פשוט בלי הקוביות
     האלה, חלק") — border-image עם border-image-repeat:round יצר אריחים חוזרים
     נראים-לעין על צלעות ארוכות (במיוחד בפריימים הגבוהים). חזרה לצבע שטוח פשוט,
     בלי טקסטורה/border-image בכלל — אין יותר סיכון לתפרים או לבאג ה-hover הישן. */
  border-style:solid; border-color:#6b4a30; border-image:none;
  /* תיקון לפי הצילום ששלח יערין מהווידאו: יש פס-מפריד ("מאט") דק בגוון בהיר, שונה
     מצבע המסגרת עצמה, בין היצירה למסגרת — לא רק border שטוח צמוד ישירות לתמונה. */
  padding: 3px; background-color: var(--cream);
  box-shadow: var(--shadow-frame), inset 0 0 0 1px rgba(0,0,0,.18);
}
.frame-ivory{
  --frame-w:17px;
  border-image-source:url('../assets/frame-ivory.jpg');
  border-image-slice: 8.2% 10.2% 8.2% 10.2%; border-image-width:1; border-image-repeat:round;
}
.frame-bone{
  --frame-w:17px;
  border-image-source:url('../assets/frame-bone.jpg');
  border-image-slice: 8.2% 10.2% 8.2% 10.2%; border-image-width:1; border-image-repeat:round;
}
/* גוון אפור-כחלחל — ייעודי לסדרת דוד. הוכהה (ירין: "קצת יותר כהה") וגם עבר לגימור
   מאט כמו frame-walnut למעלה, מאותה סיבה בדיוק. */
.frame-slate{
  --frame-w:8px;
  /* תוקן שוב (ירין: "בלי הקוביות המוזרות, חלק") — אותו תיקון כמו frame-walnut למעלה. */
  border-style:solid; border-color:#54575f; border-image:none;
  padding: 3px; background-color: var(--cream);
  box-shadow: var(--shadow-frame), inset 0 0 0 1px rgba(0,0,0,.18);
}
/* האולם הראשי — מסגרת הזהב נשארת עקבית לכל האתר (--frame-w גלובלי), אבל כאן דקה
   ומינימליסטית יותר לבקשת ירין, בלי להשפיע על החלון בעמוד הבית או דפים אחרים. */
/* הודק שוב ל-11px (מ-17), לבקשת ירין: "דק יותר, בכל תמונה" — כולל הזהב */
#wallMain .artwork-frame{ --frame-w:8px; }

/* ניסיון זמני (בקשת ירין: "רק להסתיר בינתיים, לראות איך זה נראה, אם ארצה בחזרה
   שיהיה טרי ולא מאפס") — מסתיר את המסגרות בגלריה המשנית בלבד, בלי לגעת ב-HTML
   (ה-class frame-slate/frame-walnut נשאר על כל יצירה בדיוק כמו שהיה). לביטול
   מלא וחזרה למסגרות המדויקות שהיו: למחוק את כל הבלוק הזה בין השורות, שום דבר
   אחר לא צריך להשתנות. */
#wallSecondary .artwork-frame{
  border:none; box-shadow:none; padding:0; background:none;
}
#wallSecondary .artwork-frame:hover,#wallSecondary .artwork-frame:focus-within{
  box-shadow:none;
}

/* ---------- 9. לוחית (Placard) ---------- */
.placard{
  background: var(--cream);
  color: var(--text-on-placard);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-placard);
  max-width: 320px;
  border-inline-start: 3px solid var(--gold);
}
.placard__title{
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight:600;
}
.placard__meta{
  font-family: var(--font-body);
  font-size:.78rem;
  opacity:.7;
  margin-top:.15rem;
}
.placard__text{
  font-family: var(--font-body);
  font-size:.9rem;
  line-height:1.6;
  margin-top:.6rem;
  opacity:.9;
}
.placard--name-only{ text-align:center; max-width:none; border-inline-start:0; border-top:2px solid var(--gold); padding-top:.6rem; background:transparent; color:var(--text-on-wall); box-shadow:none; }
.placard--name-only .placard__title{ font-size:.95rem; letter-spacing:.02em; text-shadow: 0 2px 10px rgba(0,0,0,.6); }

/* לוחית-שם — כמו שלט הכותרות, בקנה מידה של תווית מוזיאלית תחת כל יצירה בגלריה המשנית */
.placard.placard--name-only.placard--sign{
  display:inline-block;
  width:fit-content;
  max-width:100%;
  margin-top:.9rem;
  border-top:0;
  padding: .6rem 1.5rem .5rem;
  position:relative;
  background:
    radial-gradient(circle 2.4px at 11px 11px, var(--gold-deep) 55%, transparent 58%),
    radial-gradient(circle 2.4px at calc(100% - 11px) 11px, var(--gold-deep) 55%, transparent 58%),
    radial-gradient(circle 2.4px at 11px calc(100% - 11px), var(--gold-deep) 55%, transparent 58%),
    radial-gradient(circle 2.4px at calc(100% - 11px) calc(100% - 11px), var(--gold-deep) 55%, transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 40%),
    linear-gradient(155deg, #F4EDDC 0%, #E9DDBE 55%, #DED0A6 100%);
  border-radius:3px;
  border:1px solid rgba(143,113,31,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(110,82,20,.25),
    0 10px 22px rgba(15,10,3,.32);
  /* השלט בהיר (קרם/זהב) — הטקסט חייב לרשת גוון-דיו כהה וקריא, לא את --text-on-wall
     הבהיר שמיועד לקיר השיש הכהה. בלי זה השם כמעט נבלע בתוך צבע השלט עצמו. */
  color: var(--title-en);
  font-family: var(--font-display);
  font-weight:600;
  letter-spacing:.03em;
}
.placard.placard--name-only.placard--sign .i18n-he{
  color: var(--title-he);
  font-family: var(--font-display-he);
  font-weight:500;
}
.placard.placard--name-only.placard--sign .placard__title{
  color: inherit;
  text-shadow:none;
}

/* שלט גדול — לכיתובים עצמאיים (כמו "בסטודיו · מודיעין" מתחת לסליידשואו), בולט יותר
   מתוויות-השם הקטנות שבגלריה המשנית, וקריא בבירור בכל רוחב מסך כולל טאבלט/מובייל. */
.placard--sign-lg{
  padding: .85rem 2.4rem .75rem;
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
}

/* שלט קטן לפסקת-פתיח (lede) מתחת לכותרת עמוד — אותה לוחית קרם-וזהב עם מסמרי הפינות,
   אך בגופן-גוף רגיל (לא כותרת) כדי שפסקה שלמה תישאר קריאה ונוחה, לא תווית שם. */
.lede-sign{
  display:block;
  width:fit-content;
  max-width:min(90vw, 560px);
  padding: .9rem 1.8rem;
}
.lede-sign .lede{
  font-family: var(--font-body);
  font-weight:400;
  font-size: clamp(.92rem, 1.3vw, 1.05rem);
  letter-spacing:normal;
  color: var(--text-on-placard);
  opacity:.85;
  text-shadow:none;
  max-width:none;
}
.placard.placard--name-only.placard--sign.lede-sign .i18n-he,
.placard.placard--name-only.placard--sign.lede-sign .i18n-en{
  font-family: var(--font-body);
  font-weight:400;
  color:inherit;
}

/* ---------- 10. ניווט מוזיאוני ----------
   פס-לינטל ארד-כהה קבוע בראש כל עמוד — כמו קורת הכניסה מעל שער מוזיאון: כהה ויציב
   כדי לשמור על ניגודיות גבוהה מול כל רקע שיש שגולל מתחתיו, עם קו-זהב דק בתחתית
   וזוהר מרכזי עדין, בקנה מידה גדול יותר מהניווט הגנרי הקודם. */
.museum-nav{
  position:fixed; inset-inline:0; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--sp-4);
  padding: clamp(1rem,2vw,1.5rem) clamp(1.3rem,4vw,3.2rem);
  background:
    radial-gradient(ellipse 60% 140% at 50% 0%, rgba(198,163,78,.14), transparent 70%),
    linear-gradient(180deg, rgba(15,11,8,.96) 0%, rgba(15,11,8,.96) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(198,163,78,.3);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  transition: padding var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth);
}
.museum-nav::after{
  content:""; position:absolute; inset-inline:0; bottom:-1px; height:1px;
  background: linear-gradient(90deg, transparent, var(--gold-light) 25%, var(--gold) 50%, var(--gold-light) 75%, transparent);
  opacity:.65; pointer-events:none;
}
.museum-nav.is-scrolled{
  padding-block: clamp(.6rem,1.1vw,.85rem);
  box-shadow: var(--shadow-nav);
}
.museum-nav__brand{
  display:flex; flex-direction:column; line-height:1.15;
  white-space:nowrap; flex:none;
  transition: transform var(--dur-base) var(--ease-smooth);
}
.museum-nav__brand:hover{ transform: translateY(-1px); }
.museum-nav__brand-en{
  display:block;
  font-family:'Parisienne', cursive;
  font-weight:400;
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  color: var(--gold-light);
  letter-spacing:.02em;
}
.museum-nav__brand-he{
  display:block;
  font-family: var(--font-display-he);
  font-weight:500;
  font-size: clamp(.68rem, .9vw, .82rem);
  letter-spacing:.14em;
  color: var(--text-on-wall);
  opacity:.72;
  margin-top:.1rem;
}
.museum-nav.is-scrolled .museum-nav__brand-en{ font-size:1.35rem; }
.museum-nav.is-scrolled .museum-nav__brand-he{ opacity:0; max-height:0; margin:0; overflow:hidden; }
.museum-nav__links{ display:flex; align-items:center; gap: clamp(1.4rem,2.6vw,2.6rem); }
.museum-nav__link{
  font-family: var(--font-body);
  font-size: clamp(.82rem,.95vw,.92rem);
  letter-spacing:.05em;
  color: var(--text-on-wall);
  opacity:.78;
  position:relative;
  padding-block:.35rem;
}
.museum-nav__link::after{
  content:""; position:absolute; inset-inline:0; bottom:-2px; height:1px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light)); transform:scaleX(0); transform-origin:center;
  transition: transform var(--dur-fast) var(--ease-smooth);
}
.museum-nav__link:hover,.museum-nav__link[aria-current="page"]{ opacity:1; color:var(--gold-light); }
.museum-nav__link:hover::after,.museum-nav__link[aria-current="page"]::after{ transform:scaleX(1); }
.museum-nav__lang{
  border:1px solid rgba(198,163,78,.55);
  border-radius: 999px;
  padding:.45rem 1.15rem;
  font-size:.78rem; letter-spacing:.08em;
  color: var(--gold-light);
  transition: background var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-smooth);
}
.museum-nav__lang:hover{ background: rgba(198,163,78,.16); transform:scale(1.05); box-shadow:0 6px 18px rgba(198,163,78,.25); }
.museum-nav__burger{ display:none; }

/* ---------- 11. כפתורים / CTA ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .95rem 2.1rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size:.92rem; letter-spacing:.03em;
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-base) var(--ease-smooth), background var(--dur-fast) var(--ease-smooth);
}
.btn--gold{
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #241a05;
  font-weight:600;
  box-shadow: 0 12px 30px rgba(198,163,78,.32);
}
.btn--gold:hover{ transform: translateY(-2px) scale(1.02); box-shadow: 0 18px 40px rgba(198,163,78,.45); }
.btn--ghost{
  border:1px solid rgba(240,231,208,.4);
  color: var(--text-on-wall);
}
.btn--ghost:hover{ background: rgba(240,231,208,.08); transform: translateY(-2px); }

/* ---------- 12. חשיפה בגלילה (hooks ל-IntersectionObserver של Agent-4) ----------
   Progressive enhancement: כברירת מחדל (בלי JS, או לפני שה-JS סיים לאתחל) התוכן גלוי לגמרי —
   כך שהעמוד לעולם לא "שבור" אם סקריפט נכשל לטעון. רק כש-JS מוסיף class js-ready ל-<body>
   (מיד לפני הפעלת IntersectionObserver) האלמנטים מתחילים דהויים ומחכים ל-is-visible. */
.js-ready .reveal{
  opacity:0; transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease-smooth), transform var(--dur-slow) var(--ease-smooth);
  transition-delay: calc(var(--stagger, 0) * 90ms);
}
.js-ready .reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .artwork-frame,.btn,.museum-nav__lang{ transition:none !important; }
}

/* ---------- 13. גלריה — קיר 1: תלייה סלונית ----------
   שורות מפורשות: כל שורה מקבצת יצירות מאותו כיוון (לאורך עם לאורך, לרוחב עם לרוחב)
   כדי שהתלייה תיראה מכוונת ולא מקרית, גם כשהיחסים בין היצירות שונים מאוד. */
.salon-wall{
  position:relative; z-index:3;
  max-width:1280px; margin-inline:auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-16);
  display:flex; flex-direction:column; align-items:center;
  gap: var(--sp-8);
}
.gallery-row{
  /* align-items:flex-start ולא flex-end: מיישר את המסגרות עצמן לפי הראש שלהן,
     כך ששתי מסגרות באותה שורה עם אותו class גובה יישבו תמיד באותו קו עליון ותחתון —
     בלי קשר לאורך הטקסט המשתנה בלוחית ההסבר שמתחתן (שהיה גורם למסגרת הקצרה-יותר-בטקסט
     להידחף למטה וליצור מראה לא-סימטרי בין שתי המסגרות). */
  display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center;
  gap: var(--sp-6) var(--sp-6);
  width:100%;
}
.gallery-row:nth-child(even){ transform: translateY(var(--sp-2)); } /* קומפוזיציה מאוזנת בין שורות */
.salon-item{ position:relative; display:flex; flex-direction:column; align-items:center; gap: var(--sp-2); }

/* ---------- 14. גלריה — קיר 2: גריד משני ----------
   גם כאן שורות מפורשות לפי כיוון התמונה, כמו האולם הראשי. */
.grid-wall{
  position:relative; z-index:3;
  max-width:1280px; margin-inline:auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-16);
  display:flex; flex-direction:column; align-items:center;
  gap: var(--sp-8);
}
.grid-wall figure{
  display:flex; flex-direction:column; align-items:center;
}
/* הוקטן (ירין: "חלק מהתמונות גדולות מדי, לא רואים אותן בלי לגלול") — התקרה
   הקודמת (עד 390px/37vh) הייתה גבוהה מדי לתמונה בודדת להיכנס לגמרי ב-viewport
   נמוך (מובייל, חלון דפדפן נמוך) יחד עם ה-nav+כותרת מעליה. */
.grid-wall .artwork-frame{ --frame-h: clamp(170px, 26vh, 280px); }
.grid-wall .artwork-frame.artwork--wide{ --frame-h: clamp(140px, 20vh, 210px); }
.grid-wall .artwork-frame.artwork--xl{ --frame-h: clamp(200px, 30vh, 320px); }
/* סדרת דוד — בדסקטופ גדולה (ירין: "הקטנת אותן גם במחשב, תעשה אותן יותר גדולות");
   ההקטנה שהוא ביקש הייתה על הטלפון בלבד, ומטופלת במדיה-קוורי למטה. */
/* השורה של "משה וים סוף" + "האנפה" + "הכד" (בקשת ירין: "נשארות קטנות מדי,
   גם בטלפון וגם במחשב"). שלושתן פורטרטים צרים-וגבוהים, ולכן באותו --frame-h
   של שאר הקיר הן נראות קטנות בהרבה משכנותיהן הרחבות: הגובה זהה, אבל השטח
   הנראה קטן כי הרוחב נגזר מיחס-ממדים צר. מגדילים את הגובה רק לשורה הזו —
   שלושתן יחד, כדי שהשורה תישאר מיושרת. */
/* שלושת הציורים (משה וים סוף · האנפה · הכד) הם צרים-וגבוהים מאוד —
   יחס רוחב/גובה של 0.44 עד 0.67 — ולכן בגובה 380px הם יצאו ברוחב
   170-250px בלבד ו"בקושי נראו". הגובה הועלה ל-560px.
   הבדיקה שהם עדיין נכנסים לשורה אחת: סכום יחסי הרוחב שלהם הוא
   1.67, כלומר 1.67x560 = 935px ועוד שני פערים של 64px = 1063px —
   בתוך רוחב המכל. */
.gallery-row--airy .artwork-frame{ --frame-h: clamp(380px, 52vh, 560px); }
/* אוויר מעל ומתחת לשורה — היא הגבוהה בעמוד וצריכה לנשום */
.gallery-row--airy{ margin-block: var(--sp-8); }

#wallDavidSeries .artwork-frame{ --frame-h: clamp(210px, 34vh, 380px); }
/* שורת שלוש היצירות הגבוהות-והצרות בגלריה המשנית (משה/האנפה/הכד) — ריווח נדיב
   בדסקטופ. היה inline ב-HTML; הועבר לכאן כדי שאפשר יהיה לצמצם אותו במובייל
   (inline תמיד גובר על מדיה-קוורי, ולכן שם זה לא היה ניתן לכיווץ). */
.gallery-row--airy{ gap: var(--sp-8) var(--sp-8); }
/* באג אמיתי שנמצא (ירין + האמן, שני מכשירים נפרדים): בתמונות לרוחב (חלון לנפש,
   מבט פנימה, יד רוחצת יד) המסגרת גובה-קבוע + width:auto;max-width:100% מהבסיס
   מתנגשים במסכים צרים — כשה-max-width חותך את הרוחב מתחת למה שהגובה+יחס-הממדים
   דורשים, ל-img נשאר height:100% נוקשה, וה-object-fit:contain ממלא את הפער
   ב-background:#0b0b0d (כמעט-שחור) של .artwork-frame img — בדיוק "הגבולות
   השחורים" שדווחו. תוקן ע"י מעבר לרוחב-מוביל במסכים צרים: 100% רוחב, גובה
   נגזר אוטומטית מה-aspect-ratio של כל תמונה — כך אין יותר התנגשות בין האילוצים
   ולכן אין מה שה-object-fit יצטרך "למלא". */
/* תוקן (ירין: "סדרת דוד נהייתה זעירה במובייל, 22px גובה בפועל") — הסלקטור הישן
   .grid-wall .artwork-frame תפס גם את #wallDavidSeries (אותו class-container
   משותף!), למרות שהתיקון תוכנן רק לתמונות-רוחב בודדות-בשורה בגלריה המשנית.
   שם ה-width:100% על כל מסגרת עבד כי יש תמונה אחת בשורה; בסדרת דוד יש 2-3 מסגרות
   זו-לצד-זו באותה שורה — כשלכולן width:100% בו-זמנית, ה-flex דוחס אותן לרוחב
   כמעט-אפס וה-height:auto (הנגזר מהרוחב) קורס יחד איתו. הסלקטור צומצם ל-
   #wallSecondary בלבד — בדיוק היכן שהבאג המקורי היה, בלי לגעת בסדרת דוד. */
/* צומצם עוד (ירין: "הכד/משה/האנפה — תעשה אותן קטנות, אני לא רואה את כולן בלי
   לגלול"): ה-width:100% נועד רק ליצירות-לרוחב (שם היה באג הפסים השחורים) — על
   שלוש היצירות הגבוהות-והצרות הוא גרם לכל אחת להיות ברוחב-מסך מלא, כלומר ~975px
   גובה בטלפון (יחס 742:1682) — הרבה מעבר למסך. הן חוזרות לגובה-מוביל עם תקרה
   שמחושבת כך ששלושתן נכנסות יחד בשורה אחת: רוחב פנוי 366px (430 פחות ריפוד
   ה-grid-wall) פחות 2 רווחים של 16px = 334px לתמונות; סכום יחסי-הרוחב שלהן הוא
   1.67 → גובה מרבי ~200px. לגובה כזה אין סיכון לפסים שחורים: הרוחב הנגזר (82-124px)
   רחוק מתקרת ה-max-width, כך שאין חיתוך ואין מה ש-object-fit ימלא. */
@media (max-width:900px){
  #wallSecondary .artwork-frame.artwork--wide,
  #wallSecondary .artwork-frame.artwork--xl{ width:100%; max-width:100%; height:auto; }
  #wallSecondary .artwork-frame.artwork--wide img,
  #wallSecondary .artwork-frame.artwork--xl img{ width:100%; height:auto; object-fit:contain; }
  #wallSecondary .artwork-frame:not(.artwork--wide):not(.artwork--xl){ --frame-h: clamp(130px, 20vh, 190px); }
  /* אותה שורה (משה/האנפה/הכד) — גדולה יותר גם בטלפון. ספציפיות זהה לכלל שמעל
     (ID + 3 מחלקות) ולכן הסדר הוא שמכריע: חייב להישאר *אחריו*. */
  /* התקרה כאן היא רוחב-המסך, לא טעם: שלוש התמונות צרות-וגבוהות, וסכום יחסי
     הרוחב שלהן הוא 1.67×הגובה. ב-430px (פחות מרווחי-עמוד ופערים) הגובה
     המקסימלי ששלושתן עדיין נכנסות בו לשורה אחת הוא ~213px. 265px דחק את
     "הכד" לשורה נפרדת ושבר את השורה — 205px מגדיל ושומר על השלושה יחד. */
  /* ירין ביקש במפורש שבטלפון הם **לא** חייבים להיות באותה שורה —
     וזו בדיוק הייתה המגבלה שכפתה 205px וגרמה להם להיראות זעירים.
     עכשיו כל ציור תופס שורה משלו ומקבל גובה אמיתי.
     58vh ולא יותר: הציור חייב להיראות **במלואו בלי לגלול**, ונשאר
     מקום לשלט-השם מתחתיו ולנשימה מסביב. */
    #wallSecondary .gallery-row--airy figure{ flex: 0 0 100%; }
    #wallSecondary .gallery-row--airy .artwork-frame:not(.artwork--wide){ --frame-h: min(58vh, 430px); }
  #wallSecondary .artwork-frame img{ background:none; }
  .gallery-row--airy{ gap: var(--sp-3) var(--sp-2); }

  /* סדרת דוד בטלפון (בקשת ירין): יצירה אחת בשורה, "נחשפת אחת-אחת כמו שאר
     הגלריות" — הערימה האנכית גורמת ל-IntersectionObserver לחשוף כל אחת בתורה
     בזמן הגלילה, במקום שתיים יחד. גודל מותאם כך שכל יצירה נכנסת במלואה במסך. */
  #wallDavidSeries .gallery-row{ flex-direction:column; align-items:center; }
  #wallDavidSeries .artwork-frame{ --frame-h: clamp(240px, 44vh, 420px); }
}

/* ---------- 15. גלריה — קיר 3: חדר הסקיצות (אוורירי, שונה) ---------- */
.sketches-wall{
  position:relative; z-index:3;
  max-width:1100px; margin-inline:auto;
  padding: var(--sp-8) var(--sp-4) var(--sp-16);
  display:grid;
  grid-template-columns: repeat(3, 1fr); /* 10 רישומים = 3 שורות מלאות + אחד בודד בשורה רביעית */
  gap: var(--sp-8) var(--sp-3);
  justify-items:center;
}
/* הרישום העשירי (בקשת ירין: "תעביר לאמצע, שיהיה יותר סימטרי") — לבד בשורה
   הרביעית, אז ממורכז לעמודה האמצעית במקום נדחף לעמודה הראשונה כברירת המחדל
   של grid auto-flow, כך שהוא מאוזן חזותית במקום דבוק לצד אחד. */
.sketches-wall figure:last-child{ grid-column: 2; }
.sketches-wall .artwork-frame{
  --frame-h: clamp(145px, 22vh, 220px);
  border-style:none; border-width:0; border-image-source:none;
  box-shadow: 0 18px 40px rgba(20,14,8,.28);
}
.sketches-wall .artwork-frame:hover,.sketches-wall .artwork-frame:focus-within{
  box-shadow: 0 22px 50px rgba(20,14,8,.36);
}
.sketches-wall .artwork-frame img{ background:transparent; }

/* מעבר קיר-לקיר */
.gallery-wall-section{ position:relative; padding-block: var(--sp-8); }
.gallery-wall-section + .gallery-wall-section{ border-top:1px solid rgba(198,163,78,.15); }

/* ---------- 16. Lightbox ----------
   עיצוב מחדש (בקשת ירין: "המיקום של כל תמונה משתנה, כפתורי הניווט על התמונה,
   רוצה זום") — הבעיה הישנה: flex-column עם justify-content:center על כל
   התוכן (תמונה+כיתוב יחד) גרם למיקום האנכי של כל תמונה להשתנות לפי הגובה
   הכולל שלה. הפתרון: "במה" (stage) קבועה עם שטח מובנה, קבוע, שמור מראש
   בצדדים לכפתורי קודם/הבא (padding-inline) — כך שהתמונה עצמה אף פעם לא
   יכולה להגיע לשם, ותמיד ממורכזת באותו אזור בדיוק בלי קשר ליחס-הממדים שלה.
   זום/פאן מלאים ב-JS (initLightbox ב-script.js): pinch, גלגלת עכבר, גרירה,
   דאבל-קליק/טאפ, וכפתורים מפורשים — "high-end" אמיתי, לא רק גימיק מגע. */
.lightbox{
  position:fixed; inset:0; z-index:200;
  display:flex; flex-direction:column;
  background: rgba(8,4,4,.92);
  opacity:0; visibility:hidden;
  transition: opacity var(--dur-base) var(--ease-smooth);
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__topbar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding: var(--sp-3) var(--sp-4);
}
.lightbox__zoomctrls{ display:flex; gap:var(--sp-2); }
.lightbox__stage{
  position:relative; flex:1 1 auto; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding-inline: 76px; /* "גדר" קבועה — התמונה לעולם לא נכנסת לרצועה הזו, שם יושבים prev/next */
  overflow:hidden; touch-action:none;
}
.lightbox__frame{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.lightbox__frame img{
  display:block; max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; background:transparent;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  cursor:zoom-in; touch-action:none; user-select:none; -webkit-user-drag:none;
  transition: transform .18s var(--ease-smooth);
}
.lightbox__frame img.is-zoomed{ cursor:grab; }
.lightbox__frame img.is-panning{ cursor:grabbing; transition:none; }
.lightbox__close,.lightbox__prev,.lightbox__next,.lightbox__zoom{
  position:relative; color:var(--cream); font-size:1.6rem;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(239,231,210,.3); border-radius:50%; background:rgba(0,0,0,.2);
  transition: background var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-spring);
  flex:0 0 auto; cursor:pointer;
}
.lightbox__close:hover,.lightbox__prev:hover,.lightbox__next:hover,.lightbox__zoom:hover{ background:rgba(239,231,210,.12); transform:scale(1.08); }
.lightbox__zoom{ font-size:1.25rem; }
.lightbox__zoom:disabled{ opacity:.35; cursor:default; transform:none; background:rgba(0,0,0,.2); }
.lightbox__prev,.lightbox__next{
  position:absolute; top:50%; transform:translateY(-50%); z-index:1;
}
.lightbox__prev{ inset-inline-start:var(--sp-3); }
.lightbox__next{ inset-inline-end:var(--sp-3); }
.lightbox__prev:hover,.lightbox__next:hover{ transform:translateY(-50%) scale(1.08); }
.lightbox__caption{
  flex:0 0 auto; text-align:center; color:var(--text-on-wall); font-family:var(--font-body);
  max-width:88vw; margin-inline:auto; padding: 0 var(--sp-8) var(--sp-4);
}
@media (max-width:640px){
  .lightbox__stage{ padding-inline:56px; }
  .lightbox__close,.lightbox__prev,.lightbox__next,.lightbox__zoom{ width:38px; height:38px; font-size:1.2rem; }
  .lightbox__prev{ inset-inline-start:var(--sp-2); }
  .lightbox__next{ inset-inline-end:var(--sp-2); }
  .lightbox__caption{ padding-inline:var(--sp-3); font-size:.9rem; }
}

/* ---------- 17. Hero — אופס מלא (שינוי 37): זום CSS טהור, בלי Three.js/displacement ----------
   #hero-stage קבועה על גבי קיר-השיש-וזהב (::before, זהה ל-.museum-room::before) וממרכזת
   את #heroArt — הציור הממוסגר. במנוחה #heroArt סטטי לגמרי (בלי טילט/תזוזה). script.js
   render() נוגע רק ב-transform (scale + transform-origin דינמי) של #heroArt ובכנפי
   heroWindow — לעולם לא ב-#hero-stage::before, כך שהרקע נשאר זהה לאורך כל המסע וממשיך
   ברצף אל חדר "על האמן". ראו הערת-HTML ב-index.html לארבעת שלבי הגלילה. */
/* תוקן (ירין: "הכיתוב צריך להיות מתחת לציור, לא עליו" — חוזר ומאשר בקשה קודמת):
   הציור היה ממורכז אנכית (align-items:center) על גבי כל ה-viewport, בעוד .hero-ui
   מעוגן לתחתית (justify-content:flex-end) — שני layers עצמאיים, position:fixed
   נפרדים, בלי שום קואורדינציה ביניהם, אז בגבהי-מסך נמוכים הם פשוט התנגשו. flex-start
   + padding-top מזיז את הציור למעלה (מתחת לניווט), ומשאיר אזור תחתון פנוי ובטוח
   לכיתוב. שינוי מיקום בתוך flex-container לא נוגע ב-transform-origin הפנימי של
   #heroArt עצמו — חישובי הזום ב-script.js render() לא מושפעים. */
/* הוחזר לקרוב-למקורי (ירין: "לא זו הבעיה — תחזיר את המנוחה נמוכה יותר, כמו שהיה,
   ותקן את זה שבגלילה הזום לא מראה את כל המסגרת העליונה" — התיקון האמיתי הוא ב-
   ORIGIN_Y_WINDOW ב-script.js, לא במיקום-המנוחה הזה). padding-top חזר ל-13vh
   (היה 5vh) — עדיין flex-start ולא center מלא, כדי לשמר את תיקון החפיפה עם הכיתוב. */
#hero-stage{ position:fixed; inset:0; width:100vw; height:100vh; z-index:1; overflow:hidden; background:var(--wall); display:flex; align-items:flex-start; justify-content:center; padding-top: clamp(5.5rem, 13vh, 8.5rem); }
#hero-stage::before{ /* אותה שכבת קיר-שיש בדיוק כמו .museum-room::before, ליצירת רצף חזותי מלא עם שאר האתר.
  תוקן: background-attachment:fixed על שכבת השיש + filter על ההורה הוא צירוף ידוע כאיטי —
  מכריח ריצוד/rasterize מחדש של הרקע (ה-KB הכבדים של marble-bg-hires.jpg) בכל אירוע-גלילה,
  בדיוק מה שגרם ל"לג בגלילה חזרה". גם מיותר לגמרי: #hero-stage כבר position:fixed, אז
  ה"רקע נשאר במקום" קורה ממילא בלי fixed על השכבה עצמה — scroll בכל השכבות, בלי אובדן
  אפקט ויזואלי, עם ביצועים אמיתיים. */
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(12,9,4,.12), rgba(12,9,4,.12)),
    radial-gradient(ellipse 120% 70% at 50% -10%, rgba(255,255,255,var(--marble-vignette-top)), transparent 60%),
    radial-gradient(ellipse 130% 65% at 50% 110%, rgba(0,0,0,var(--marble-vignette-bottom)), transparent 68%),
    radial-gradient(ellipse 90% 130% at -10% 50%, rgba(0,0,0,var(--marble-vignette-side)), transparent 58%),
    radial-gradient(ellipse 90% 130% at 110% 50%, rgba(0,0,0,var(--marble-vignette-side)), transparent 58%),
    var(--marble-img);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, cover;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: center, center, center, center, center, center 38%;
  background-color: var(--wall);
  /* filter הוסר — אפוי בתוך marble-bg-hires.webp עצמו, ר' ההערה ליד --marble-img. */
  z-index:0;
}
#hero-stage::after{ /* טקסטורת גרגר שיש עדינה — זהה ל-.museum-room::after, לרצף מלא עם שאר האתר */
  content:"";
  position:absolute; inset:0;
  opacity:.07; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(../%23n)'/%3E%3C/svg%3E");
  z-index:0;
}
/* #heroArt — הציור הממוסגר, סטטי במנוחה. אותה שפת-מסגרת בדיוק כמו .artwork-frame בגלריה
   (border-image מ-gold-frame-trimmed.jpg), אבל בלי transition/hover:scale — ה-transform
   נשלט אך ורק ע"י script.js render() לפי התקדמות הגלילה, פריים-פריים. */
.hero-art{
  position:relative; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  /* שינוי (בקשת יערין, "נסה בלי מסגרת"): המסגרת-הזהב המפוסלת (border-image) הוסרה —
     בלי border כלל, רק צל עדין (--shadow-soft, לא --shadow-frame-hi הכבד שהיה נועד
     ללוות דווקא מסגרת) לתת מעט הפרדה מקיר השיש. box-sizing:border-box גלובלי אומר
     שה-img שבפנים (width/height:100%) פשוט ממלא את כל תיבת .hero-art עכשיו — בלי
     "לגמד" את שטח-התוכן כמו שקרה כשה-border עדיין היה שם (ר' ההערה ב-.frame-onyx
     למעלה על אותה תופעה בגלריה). layoutHeroWindow() מודד את הגודל בפועל של heroArtImg
     בזמן ריצה, אז חישובי ה-crop של WIN_BOX/SCENE_BOX ממשיכים לעבוד נכון גם כשהגודל
     המדויק של heroArtImg משתנה קצת בלי המסגרת — הם יחסיים (שברים), לא פיקסלים קשיחים. */
  box-shadow: var(--shadow-soft);
  /* שינוי 60 (תיקון מובייל): aspect-ratio קבוע על הפריים עצמו — לא רק על ה-img שבתוכו.
     בלי זה, height:clamp(...) ו-max-width:78vw מתחרות זו בזו: במסכים צרים (מובייל)
     78vw כופה רוחב שצר יותר ממה שה-height שנבחר "רוצה", אבל height עצמו לא מצטמצם
     בהתאם (הוא לא auto, הוא קבוע) — כך שהתיבה יוצאת עם יחס-רוחב-גובה שגוי, וה-img
     שבפנים (object-fit:contain, --ar:921/560) נאלץ להשאיר פסי-רקע שחורים למעלה/למטה.
     עם aspect-ratio על .hero-art עצמו, הדפדפן מצמצם את שני הצירים יחד תמיד — height
     נגזר-בפועל גם מ-max-width כשזה המגביל, לא רק להיפך. */
  aspect-ratio: 921 / 560;
  /* הוגדל (ירין: "הציור צריך להיות הרבה יותר גדול מהטקסט") */
  height: clamp(260px, 46vh, 480px);
  max-width: 86vw;
  pointer-events:none;
  will-change: transform;
  transform-origin: 50% 42%;
}
.hero-art img{
  display:block; width:100%; height:100%;
  object-fit:cover;
  background:#0b0b0d;
  pointer-events:none; user-select:none; -webkit-user-drag:none;
}
/* "רק החלונות שבתמונה נפתחים" — Threshold Reveal מילולי: שני כנפי-חלון, קרופ מדויק מתוך
   הציור עצמו (geometry מחושבת ב-script.js layoutHeroWindow לפי הגודל המוצג בפועל של
   heroArtImg), כך שבמנוחה הן בלתי-נראות (פיקסל-בפיקסל זהות לתמונה שמתחתן), ואז נפערות
   בציר-Y מהצירים החיצוניים שלהן — בדיוק כמו חלון-צרפתי כפול — בעוד הנוף שמאחוריהן
   (שכבר גלוי באותה תמונה) נשאר דומם לגמרי. */
.hero-window{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  pointer-events:none;
  perspective: 1300px;
  transform-style: preserve-3d;
}
.hero-window__pane{
  position:absolute; top:0;
  background-repeat:no-repeat;
  background-image:url('../assets/1786885563207-_________.jpg');
  will-change:transform,opacity,filter;
  backface-visibility:hidden;
  transform:rotateY(0deg);
}
.hero-window__pane--left{ transform-origin:0% 50%; }
.hero-window__pane--right{ transform-origin:100% 50%; }
/* עמוד-התווך (מוליון) שבין שני כנפי-החלון — קרוֹפ נוסף, נפרד מהכנפיים, שדועך יחד איתן
   (script.js render()) כדי שהתווך המצויר לא יישאר "רצועת-חלון" קפואה במרכז הנוף שנחשף
   אחרי הפתיחה — בלי זה נשאר בדיוק "חלון נוסף" מאחורי החלון שנפתח. */
.hero-window__mullion{
  position:absolute; top:0;
  background-repeat:no-repeat;
  background-image:url('../assets/1786885563207-_________.jpg');
  will-change:opacity,filter;
}
/* שכבת-הסצנה שמאחורי הכנפיים (Threshold Reveal: Layer A "the scene", נפרדת לגמרי משכבת-
   הכנפיים) — נוף שקיעה/אופק נקי, בלי המסגרת/הסדק/העצים שמצוירים על הזכוכית עצמה. במנוחה
   מכוסה לגמרי ע"י שני הכנפיים שמעליה (זהות פיקסל-בפיקסל לתמונה המקורית) ולכן בלתי-נראית;
   רק כשהכנפיים נפערות ודועכות (render()) היא נחשפת — כך שאחרי הפתיחה רואים נוף אחד נקי,
   לא "חלון נוסף" מצויר מתחתן. גודל/מיקום מחושבים ב-layoutHeroWindow יחד עם הכנפיים.
   סבב 4: ירין דייק את הבקשה — לא "אותה תמונה בדיוק" (זה עדיין מראה את מסגרת-החלון/
   הסדק/העצים המצוירים, כי אלה חלק מהתמונה המקורית עצמה), אלא תמונה **חדשה** שמציגה
   את הנוף בלבד, בלי שום חלון בכלל — כאילו הקיר לא היה שם. נוצרה תמונה כזו ב-Gemini
   (gemini-2.5-flash-image, image-to-image על התמונה המקורית כרפרנס + prompt מפורש
   "אותו סגנון/צבעים/תאורה, בלי שום מסגרת/זכוכית/סדק/עצים, נוף-ים-ושקיעה רציף ומלא") —
   assets/hero-view-no-window.jpg (1280×800 native — סבב 6: נשמרה ברזולוציה המקורית
   שהמודל החזיר, בלי להקטין ל-921×560 כמו בסבב 5, כדי לא לזרוק פיקסלים לפני שהם ממילא
   עומדים להימתח ע"י הזום). background-size/position כאן הם רק ברירת-מחדל (cover+עיגון
   40%) — בפועל נדרסים inline ע"י layoutHeroWindow() ב-script.js לפי SCENE_BOX, אותה
   טכניקת קרופ-מדויק שמשמשת את הכנפיים (WIN_BOX) אבל עם קואורדינטות נפרדות, כי זו
   תמונה נפרדת ולא קרופ של התמונה המקורית. ראו script.js SCALE_KF (שינוי 59) — גם
   ברזולוציה מלאה, המתיחה שמפעיל #heroArt בזום העמוק (עד ×10 קודם) חרגה בהרבה מהפירוט
   הטבעי של המקור ונראתה מטושטשת; יעד-הזום המקסימלי הורד ל-×6 כדי שהמתיחה תישאר בתוך
   טווח שבו התמונה נשארת חדה. */
.hero-window-scene{
  position:absolute; top:0; overflow:hidden;
  background-repeat:no-repeat; background-size:cover; background-position:center 40%;
  background-image:url('../assets/hero-view-no-window.jpg');
}
/* הוסר: הכלל הזה הסתיר את כנפי-החלון תחת reduced-motion, ואז גם כשהאנימציה
   כן רצה לא היה מה להיפתח — השער היה "פתוח" מראש והאפקט המרכזי נעלם. עכשיו
   המסע רץ אצל כולם (ר' script.js), ולכן הכנפיים חייבות להיות שם. */
/* 480vh היה ארוך מדי לגלול (ירין: "לא רוצה שהמשתמש יגלול הרבה"). מכיוון שהאנימציה כולה
   נהוגה לפי p=0..1 (אחוז ההתקדמות בתוך הפס, לא מרחק-גלילה מוחלט — ר' render() ב-script.js),
   קיצור הפס משמעו "אותם 4 שלבים, אותה עקומת-ease, בפחות פיקסלים של גלילה" — לא "מהיר
   יותר" מבחינת חלקות התנועה עצמה, רק פחות מרחק גלילה כדי לעבור אותה. 480→300vh (-37%) —
   פשרה: עדיין ~75vh לשלב בממוצע, מספיק לשליטה חלקה, אבל בלי גלילה ארוכה ומייגעת. */
#hero-scroll-track{ position:relative; z-index:2; height:300vh; }

/* שלב ב'→ג': "החלון נפתח" — פרץ אור חם בנקודת המוקד של הצוהר, רגע לפני שהאור דועך
   והזום-אין ממשיך לכיוון הציור עצמו (ראו script.js sampleEntrance). */
.hero-glow{
  position:absolute; inset:0; z-index:2;
  opacity:0; pointer-events:none;
  mix-blend-mode:screen;
  /* Y תוקן מ-34% ל-16%: #hero-stage עבר מ-align-items:center ל-flex-start (הציור
     הוזז למעלה כדי לפנות מקום לכיתוב מתחת לו) — .hero-glow עצמו נשאר inset:0 יחסית
     ל-#hero-stage (כל ה-viewport, לא לתיבת הציור), אז האחוז-האנכי חושב מחדש כך
     שנקודת-האור תישאר על הצוהר בציור במיקומו החדש, לא על נקודה שרירותית. */
  background: radial-gradient(circle at 49.3% 17%, rgba(255,248,228,.95), rgba(255,214,140,.55) 32%, transparent 66%);
}
.hero-ui{
  position:fixed; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap: var(--sp-2);
  pointer-events:none;
  text-shadow: 0 4px 30px rgba(0,0,0,.7);
}
/* מבודד את בלוק הכיתוב מרקע השיש-וזהב העמוס שמאחוריו — ויניאטה רכה, בלי מסגרת/שלט קשיח,
   כדי לשמור על העיצוב המינימליסטי אך להעצים ניגודיות וקריאות. */
.hero-ui__caption{
  position:relative;
  padding: var(--sp-4) var(--sp-6);
  /* הוויניאטה כווצה בחזרה (הייתה 150%/160% — מוגדלת בכוונה כשהכיתוב עוד חפף את
     צלע-המסגרת התחתונה של הציור). עכשיו שהכיתוב יושב לגמרי מתחת לציור, על קיר-שיש
     שקט, אין יותר "קצה מסגרת עמוס" להיאבק בו — ויניאטה מכווצת יותר נראית כשלט קומפקטי
     ולא כמלבן אפור ריק וגדול מדי. */
  background: radial-gradient(ellipse 118% 135% at 50% 50%, rgba(10,8,6,.55), rgba(10,8,6,.28) 68%, transparent 84%);
}
/* הרחבה לצדדים — דסקטופ בלבד (ירין: "בפלאפון זה נראה מעולה עכשיו, תשאיר ככה, השינוי
   רק בדסקטופ") — תיבת הכיתוב מקבלת min-width מפורש, רחב יותר מהציור הממוסגר מעליה
   (.hero-art, ~660-789px לפי height:clamp), כדי שהיא "תבלוט" מעבר לקצוות המסגרת. */
@media (min-width:900px){
  .hero-ui__caption{ min-width: min(920px, 90vw); }
}
.hero-ui__title{ font-family:var(--font-display); font-size:clamp(2.6rem,7vw,6rem); color:var(--text-on-wall); letter-spacing:.02em; }
.hero-ui__sub{ font-family:var(--font-body); color:var(--gold-light); opacity:.9; font-size:clamp(1.05rem,1.6vw,1.3rem); }

/* גרסת #hero-scroll-track (המסלול המונפש) — הכותרת למעלה, קשת-הסף למטה, הציור הממוסגר
   תופס את המרכז מאחוריהן (#hero-stage, z-index נמוך יותר). */
/* padding-bottom צומצם (ירין: "יותר זיווג בין הציור לכיתוב, פחות רווח") — עכשיו
   שהטקסט קטן יותר והציור גדול יותר, הפער נסגר משני הכיוונים גם בלי לגעת בעיגון עצמו. */
#hero-scroll-track .hero-ui{
  justify-content:flex-end;
  /* padding-top הוגדל (ירין: "קצת יותר הפרדה בין הציור לתיבת הטקסט") — דסקטופ
     בלבד; ה-override למובייל (@media max-width:1200px למטה) לא נגע, כי ירין
     אמר במפורש שהמובייל "נראה מעולה" ולא לגעת בו. */
  padding-block: var(--sp-8) clamp(2rem,5vh,3.5rem);
}
.hero-ui__top{ display:flex; flex-direction:column; align-items:center; gap:.5rem; }

/* Threshold Reveal — רמז-גלילה: עכבר-מיני עם נקודה מונפשת שגולשת בתוכו, בתוך תיבת
   הכיתוב הכהה (.hero-ui__caption) — לא עוד על קיר-השיש ישירות, כי גוון-זהב על שיש
   בהיר נבלע (בקשת יערין). מנוגד/גדל/מיטשטש עם תחילת הגלילה (script.js render()). */
.hero-threshold{
  display:flex; justify-content:center;
  margin-top: var(--sp-3);
  color: var(--gold-light);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
}
.hero-threshold__mouse{ opacity:.92; }
.hero-ui__hint{
  font-family:var(--font-body); font-size:.88rem; letter-spacing:.06em;
  color:var(--text-on-wall); opacity:.82;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.hero-threshold__dot{ animation: hero-scroll-dot 1.7s ease-in-out infinite; }
@keyframes hero-scroll-dot{
  0%{ opacity:1; transform:translateY(0); }
  65%{ opacity:0; transform:translateY(15px); }
  66%{ opacity:0; transform:translateY(0); }
  100%{ opacity:0; transform:translateY(0); }
}
.no-fx .hero-threshold__dot{ animation:none; }

/* מכשיר-מגע אמיתי בלבד (לא רוחב-חלון) — עכבר נשאר ברירת המחדל בכל מקום אחר,
   כדי לא לגעת בהתנהגות הדסקטופ בשום צורה. */
.hero-threshold__finger{ display:none; }
.hero-threshold__fingertip{ animation: hero-scroll-finger 1.9s ease-in-out infinite; }
/* מלמטה למעלה — מחליקים כלפי מעלה כדי להתקדם, אז הסמן חייב להצביע על אותה
   תנועה. קודם הוא נע כלפי מטה, כלומר הראה בדיוק את ההפך ממה שצריך לעשות. */
@keyframes hero-scroll-finger{
  0%{ opacity:1; transform:translateY(0); }
  70%{ opacity:0; transform:translateY(-16px); }
  71%{ opacity:0; transform:translateY(0); }
  100%{ opacity:0; transform:translateY(0); }
}
.no-fx .hero-threshold__fingertip{ animation:none; }
@media (hover:none) and (pointer:coarse){
  .hero-threshold__mouse{ display:none; }
  .hero-threshold__finger{ display:block; }
}

/* Fallback ל-prefers-reduced-motion (או כשמשהו חסר): תמונה סטטית איכותית */
.hero-fallback{
  position:relative; width:100%; min-height:100vh;
  background-size:cover; background-position:center;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom: var(--sp-12);
}
.hero-fallback::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,11,.25), rgba(10,10,11,.85));
}
.hero-fallback .hero-ui{ position:relative; pointer-events:auto; }

/* ---------- 18. חדר "על האמן" — ביו + סליידשואו ---------- */
.about-room{ padding: var(--sp-4) var(--sp-4) var(--sp-16); position:relative; z-index:3; }
.about-grid{
  /* ‼ חזרה לטור אחד אחרי הסרת התעודות (25.9). להשאיר את הטור השני היה
     מותיר עמודה ריקה ברוחב 234px לצד הביוגרפיה — פער שנקרא כמו תקלה.
     הרוחב הוקטן ל-760 ולא נשאר 1060: שורת טקסט על פני 1060 פיקסלים ארוכה
     מדי לקריאה, וללא התעודות שום דבר כבר לא מקצר אותה. */
  max-width:760px; margin-inline:auto;
  display:grid;
  gap: clamp(2rem, 4.5vw, 4.25rem);
  grid-template-columns: minmax(0,1fr);
  align-items:start;
}
.about-grid > .bio-placard{ order:1; }
.about-certs{ order:2; display:flex; flex-direction:column; gap: var(--sp-3); position:sticky; top:6.5rem; }
.about-cert{
  display:block; margin:0; background:var(--cream); padding:.5rem .5rem .1rem;
  border-radius:var(--r-sm); text-decoration:none;
  box-shadow:0 10px 26px rgba(0,0,0,.26);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s;
}
.about-cert:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.34); }
.about-cert img{ width:100%; height:auto; border-radius:calc(var(--r-sm) - 3px); display:block; }
.about-cert__cap{
  display:block; padding:.5rem .25rem .6rem; text-align:center;
  font-size:.72rem; line-height:1.5; color:var(--text-on-placard); opacity:.82;
}
.about-cert__cap b{ display:block; font-size:.8rem; opacity:1; margin-bottom:.1rem; }
@media (max-width: 900px){
  .about-certs{ position:static; flex-direction:row; flex-wrap:wrap; justify-content:center; margin-top: var(--sp-4); }
  .about-cert{ flex:1 1 210px; max-width:260px; }
}
.bio-placard{
  background:var(--cream); color:var(--text-on-placard);
  padding: var(--sp-6); border-radius:var(--r-sm);
  box-shadow: var(--shadow-placard);
  border-top:4px solid var(--gold);
}
.bio-placard h3{ font-family:var(--font-display); font-size:1.6rem; margin-bottom:.25rem; }
.bio-placard .quote{ font-family:var(--font-display); font-style:italic; color:var(--gold-deep); margin:1rem 0; font-size:1.1rem; }
.bio-placard p{ font-family:var(--font-body); font-size:.96rem; line-height:1.75; margin-bottom:1rem; opacity:.92; }
/* ללא מסגרת — תמונות עבודה-בסטודיו מוצגות בגודל אחיד בדיוק (object-fit:cover
   על מסגרת קבועה), כך שהמעבר בין תמונה לתמונה הוא crossfade נקי בלי קפיצות
   גודל — התמונות המקוריות שונות מאוד ביחס-ממדים (מ-0.41 ועד 2.02) ולכן רק
   מסגרת אחידה עם קרופ ממורכז-עליון (שומר על הפנים/הציור) נותנת תחושת "רצף".
   הכיתוב (figcaption) יושב כאלמנט-אח רגיל מתחת ל-__frame ולא בתוכו —
   כך שהוא לעולם לא נבלע מתחת לתמונות ה-position:absolute המתחלפות. */
.studio-slideshow{ max-width:420px; margin-inline:auto; text-align:center; } /* מרכז את שלט-ה-inline-block (placard--sign) מתחת לפריים */
/* --lg — הגרסה שעברה לתחתית "על האמן" ולקטע "איכות מובטחת" (אותו מנגנון crossfade,
   רק גדול יותר). תוקן מ-680px (יערין: "אני צריך לגלול כדי לראות את כל התמונה" —
   680px רוחב × יחס 3/4 = כמעט 907px גובה, גבוה יותר מהרבה viewports). 500px נותן
   גדילה אמיתית מול ה-420px המקורי, בלי לחרוג מגובה-מסך טיפוסי. */
.studio-slideshow--lg{ max-width:min(500px, 82vw); }
/* יחס-הממדים רוכך מ-3/4 ל-1/1 (ירין: "קשה לראות מספיק מהתמונה, תזיז קצת אחורה") —
   הרבה מתמונות הסטודיו הן landscape רחבות (921-2048px), ותיבה תלולה-לגובה כמו 3/4
   קטעה חלק ניכר מהצדדים ב-object-fit:cover. ריבוע מצמצם את חומרת הקרופ משני
   הכיוונים (גם לתמונות רחבות, גם לגבוהות) בלי לוותר על מסגרת אחידה. */
.studio-slideshow__frame{
  position:relative; aspect-ratio: 1/1;
  border-radius: var(--r-md);
  overflow:hidden;
  box-shadow: var(--shadow-soft);
  background: rgba(0,0,0,.22);
}
.studio-slideshow__frame img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center 32%; opacity:0;
  transition: opacity .55s var(--ease-smooth);
}
.studio-slideshow__frame img.is-active{ opacity:1; }
.contact-row{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-4); align-items:center; }
.contact-row a{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-body); font-size:.9rem; color:var(--gold-light);
  border-bottom:1px solid transparent; transition:border-color var(--dur-fast) var(--ease-smooth);
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.contact-row a:hover{ border-color: var(--gold-light); }
.icon{ width:18px; height:18px; flex:none; }
/* .contact-row בתוך .bio-placard (בקשת יערין — עברו לסוף הביוגרפיה): הצבע/צל המקוריים
   נועדו לקיר-שיש כהה, ולא קריאים על קרם הפלאקט. כמו .contact-sign, דורסים לגוון כהה. */
.bio-placard .contact-row a{ color:var(--gold-deep); text-shadow:none; }
.bio-placard .contact-row a:hover{ border-color:var(--gold-deep); }

/* ---------- 19. "איך מזמינים" — שלט מידע, שלבים, טבלת מחירים ---------- */
.info-board{
  max-width:920px; margin-inline:auto; position:relative; z-index:3;
  padding: var(--sp-6); background:var(--cream); color:var(--text-on-placard);
  border-radius:var(--r-sm); box-shadow:var(--shadow-frame); border:10px solid var(--gold);
  border-image: linear-gradient(135deg, var(--gold-light), var(--gold) 45%, var(--gold-deep) 100%) 1;
}
.process-steps{
  display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-3);
  margin: var(--sp-8) 0 var(--sp-6);
  position:relative;
}
/* קו מחבר בין השלבים — רק כשכל 5 השלבים באמת יושבים בשורה אחת (דסקטופ רחב);
   בפריסות שמתקפלות ל-2-3 שורות הקו מוסתר (ראו 22. Responsive) כי הוא כבר לא ישר. */
.process-steps::before{
  content:"";
  position:absolute; z-index:0;
  top:27px; inset-inline:10%;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep) 12%, var(--gold-deep) 88%, transparent);
  opacity:.4;
}
.process-step{ text-align:center; position:relative; z-index:1; }
/* מדליית מספר — עיגול זהב נקי לתג שלב, ללא מסגרת מפוסלת (זו שמורה ליצירות עצמן בגלריה) */
.process-step__num{
  width:54px; height:54px; margin:0 auto .8rem;
  display:flex; align-items:center; justify-content:center;
  background: var(--cream-deep);
  border-radius:50%;
  border:2px solid var(--gold);
  font-family:var(--font-display); font-size:1.05rem; font-weight:700; letter-spacing:.02em;
  color:var(--gold-deep);
  box-shadow: 0 8px 16px rgba(0,0,0,.22);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.process-step:hover .process-step__num{ transform: scale(1.08) translateY(-2px); }
.process-step__title{ font-family:var(--font-display); font-size:1rem; margin-bottom:.3rem; }
.process-step__desc{ font-family:var(--font-body); font-size:.8rem; opacity:.78; line-height:1.5; }

.price-table{ width:100%; border-collapse:collapse; margin-top:var(--sp-3); font-family:var(--font-body); }
.price-table th,.price-table td{ padding:.7rem 1rem; text-align:start; border-bottom:1px solid rgba(42,33,26,.15); }
.price-table th{ font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; opacity:.6; }
.price-table td{ font-size:1rem; }
.price-table tr:last-child td{ border-bottom:0; }
.price-note{ margin-top:var(--sp-2); font-size:.8rem; opacity:.65; font-style:italic; }

/* ---------- 19ב. "איכות מובטחת" — תהליך הסריקה וההדפסה, בעמוד "איך מזמינים",
   באותו info-board רציף כמו "איך מזמינים" (בקשת יערין). שורות אייקון+טקסט עם
   קו-מפריד עדין במקום גריד 2×2 דחוס — יותר "spec sheet" מסודר, פחות "בלגן" טקסטואלי
   (בקשת יערין: "שפר את הטקסט, שיהיה מסודר יותר"). --gold-light על קרם היה ניגודיות
   חלשה מדי (שני גוונים חמים-בהירים קרובים) — gold-deep קריא בבירור. ---------- */
.quality-points{
  display:flex; flex-direction:column;
  max-width:640px; margin: var(--sp-6) auto 0;
}
.quality-point{
  display:flex; gap: var(--sp-4); align-items:flex-start;
  padding: var(--sp-4) 0; text-align:start;
  border-bottom:1px solid rgba(42,33,26,.12);
}
.quality-point:last-child{ border-bottom:0; padding-bottom:0; }
.quality-point:first-child{ padding-top:0; }
.quality-point__icon{
  flex:none; width:26px; height:26px; margin-top:.15rem; color:var(--gold-deep);
}
.quality-point__title{
  font-family:var(--font-display-he); color:var(--gold-deep); font-weight:600;
  font-size:1.05rem; margin-bottom:.3rem;
}
.quality-point__desc{ font-family:var(--font-body); font-size:.92rem; opacity:.85; line-height:1.7; }

/* ---------- 20. "צור קשר" — טופס ---------- */
.contact-board{
  max-width:640px; margin-inline:auto; position:relative; z-index:3;
  padding: var(--sp-6); background:var(--cream); color:var(--text-on-placard);
  border-radius:var(--r-sm); box-shadow:var(--shadow-frame); border:10px solid var(--gold);
  border-image: linear-gradient(135deg, var(--gold-light), var(--gold) 45%, var(--gold-deep) 100%) 1;
}
.field{ margin-bottom:var(--sp-3); }
.field label{ display:block; font-family:var(--font-body); font-size:.82rem; margin-bottom:.4rem; opacity:.75; }
.field-optional-tag{ opacity:.7; font-size:.92em; font-style:italic; }
.field input,.field textarea,.field select{
  width:100%; padding:.85rem 1rem; border-radius:var(--r-sm);
  border:1px solid rgba(42,33,26,.25); background:#fff; color:var(--text-on-placard);
  font-family:var(--font-body); font-size:.95rem;
  transition:border-color var(--dur-fast) var(--ease-smooth), box-shadow var(--dur-fast) var(--ease-smooth);
}
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--gold-deep); box-shadow:0 0 0 3px rgba(198,163,78,.2); outline:none; }
.field textarea{ resize:vertical; min-height:120px; }
.field select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23c6a34e' stroke-width='1.8'%3E%3Cpath d='M5 7.5 10 13 15 7.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:14px; padding-inline-end:2.4rem;
}
:root[dir="rtl"] .field select{ background-position:left 1rem center; }
:root[dir="ltr"] .field select{ background-position:right 1rem center; }
.field-error{ color:var(--state-err); font-size:.78rem; margin-top:.3rem; display:none; }
.field.has-error input,.field.has-error textarea{ border-color:var(--state-err); }
.field.has-error .field-error{ display:block; }
.form-msg{ padding:.85rem 1rem; border-radius:var(--r-sm); font-size:.9rem; margin-top:var(--sp-2); display:none; }
.form-msg.is-ok{ display:block; background:var(--state-ok-bg); color:#d9ecc9; }
.form-msg.is-err{ display:block; background:var(--state-err-bg); color:#f3d3cc; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* honeypot */

/* ---------- 21. Footer ----------
   "חדר הסיום" של המוזיאון — פס ארד-כהה קרוב לזה שבניווט (סוגר את החוויה באותה
   שפה חזותית), עם קו-זהב עדין בראש, שלוש עמודות מידע (מותג/ניווט/יצירת-קשר),
   ושורת סיום עם זכויות יוצרים וחזרה למעלה. */
.site-footer{
  position:relative; z-index:3;
  padding: var(--sp-8) var(--sp-4) var(--sp-6);
  background:
    radial-gradient(ellipse 70% 160% at 50% 0%, rgba(198,163,78,.1), transparent 65%),
    linear-gradient(180deg, #17110D 0%, #120D09 100%);
  box-shadow: 0 -22px 50px rgba(0,0,0,.35);
}
.site-footer::before{
  content:""; position:absolute; inset-inline:0; top:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--gold-light) 25%, var(--gold) 50%, var(--gold-light) 75%, transparent);
  opacity:.6; pointer-events:none;
}
.site-footer__inner{
  max-width:1080px; margin-inline:auto;
  display:grid; grid-template-columns: 1.3fr 1fr 1.3fr; gap: var(--sp-6) var(--sp-4);
}
.site-footer__brand-en{ margin:0 0 .2rem; font-family:'Parisienne',cursive; font-weight:400; font-size:1.9rem; color:var(--gold-light); letter-spacing:.02em; }
.site-footer__brand-he{ margin:0 0 .7rem; font-family:var(--font-display-he); font-weight:500; font-size:1rem; letter-spacing:.08em; color:var(--text-on-wall); opacity:.85; }
.site-footer__tagline{ margin:0; font-family:var(--font-body); font-size:.82rem; line-height:1.7; color:var(--text-on-wall); opacity:.5; max-width:300px; }
.site-footer__heading{
  font-family:var(--font-body); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-light); opacity:.7; margin:0 0 1rem;
}
.site-footer__links{ display:flex; flex-direction:column; gap:.7rem; list-style:none; margin:0; padding:0; }
.site-footer__links a{
  font-family:var(--font-body); font-size:.9rem; color:var(--text-on-wall); opacity:.72;
  width:fit-content; position:relative; padding-block:.1rem;
  transition: opacity var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
}
.site-footer__links a:hover{ opacity:1; color:var(--gold-light); }
.site-footer__contact{ display:flex; flex-direction:column; gap:.75rem; align-items:flex-start; }
.site-footer__contact a{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-body); font-size:.9rem; color:var(--text-on-wall); opacity:.72;
  transition: opacity var(--dur-fast) var(--ease-smooth), color var(--dur-fast) var(--ease-smooth);
}
.site-footer__contact a:hover{ opacity:1; color:var(--gold-light); }
.site-footer__contact .icon{ width:16px; height:16px; opacity:.85; flex:none; }
.site-footer__contact p{ margin:0; font-family:var(--font-body); font-size:.82rem; color:var(--text-on-wall); opacity:.48; }
.site-footer__rule{
  max-width:1080px; margin: var(--sp-6) auto var(--sp-4); height:1px;
  background: linear-gradient(90deg, transparent, rgba(198,163,78,.35), transparent);
}
.site-footer__bottom{
  max-width:1080px; margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-2);
  font-family:var(--font-body); font-size:.78rem; color:var(--text-on-wall); opacity:.5;
}
.back-to-top{
  display:inline-flex; align-items:center; gap:.4rem;
  opacity:.8; transition:opacity var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-spring), color var(--dur-fast) var(--ease-smooth);
}
.back-to-top:hover{ opacity:1; color:var(--gold-light); transform:translateY(-2px); }
@media (max-width:768px){
  .site-footer__inner{ grid-template-columns:1fr; gap:var(--sp-5); text-align:center; }
  .site-footer__tagline{ max-width:none; margin-inline:auto; }
  .site-footer__links,.site-footer__contact{ align-items:center; }
  .site-footer__bottom{ justify-content:center; text-align:center; }
}

/* ---------- 22. Responsive ---------- */
@media (max-width:640px){
  /* שינוי 60: קיר-השיש נראה "מטושטש" ספציפית במובייל — לא בעיית-רזולוציה (התמונה
     2200×2200, cover אף פעם לא מגדיל אותה מעל הגודל הטבעי כאן) אלא כי אותן אליפסות-
     תאורה (רואו --marble-vignette-* למעלה) מוגדרות יחסית ל-100%/100% של הקופסה —
     במסך צר-וגבוה הן מכסות חלק גדול בהרבה מהשטח הנראה (קרוב למסגרת) מאשר בדסקטופ
     הרחב, ושוטפות את הקונטרסט של מרקם השיש/הזהב. מקטין את העוצמה כאן בלבד. */
  :root{
    --marble-vignette-top:    .10;
    --marble-vignette-bottom: .14;
    --marble-vignette-side:   .07;
  }
  /* שינוי 62: ירין — יותר מדי גלילה במובייל לפני שמגיעים לתוכן האמיתי. הכוריאוגרפיה
     מונעת-אחוזים (p = scrollY/scrollable ב-getProgress()), אז קיצור הטראק לא משנה
     את הקצב/החלקות היחסית בין השלבים — רק את המרחק הפיזי שצריך לגלול כדי לעבור אותם
     (בדיוק אותה טכניקה כמו שינוי בדסקטופ בעבר, 480vh→300vh). 300vh→210vh במובייל בלבד. */
  /* ירין: "פחות גלילה בטלפון, לוקח יותר מדי זמן להגיע לאתר". 210→150vh (-29%).
     כל האנימציה מחושבת לפי p=0..1 בתוך הפס (ר' getProgress ב-script.js), אז אותם
     4 שלבים ואותה עקומה — פשוט פחות פיקסלים של גלילה כדי לעבור אותם. */
  #hero-scroll-track{ height:150vh; }

  /* תוקן (ירין: "בטלפון הציור עדיין גבוה מדי, הניווט מכסה אותו") — #hero-stage
     ירש את ה-padding-top של הדסקטופ (13vh) בלי override למובייל, אבל .museum-nav
     עצמו עובר flex-wrap:wrap ב-768px (למטה) ומראה את כל קישורי-הניווט בשורה שנייה
     קבועה — כלומר גבוה משמעותית מהניווט החד-שורתי בדסקטופ שה-13vh כוילו מולו.
     override נפרד וגבוה יותר, קבוע יחסית (לא תלוי vh, כדי לא להיות רגיש לנידנוד
     address-bar בדפדפן מובייל), נותן מספיק מרווח קבוע גם כשהניווט בשתי שורות. */
  #hero-stage{ padding-top: clamp(7.5rem, 21vh, 10.5rem); }

  /* ירין: במובייל התמונה הממוסגרת מציגה רק חלק מהחלון (78vw + מסגרת עבה גוזלות שטח),
     והכיתוב לפעמים יושב עליה. במנוחה בלבד: בלי מסגרת, רוחב מלא מקצה לקצה — layoutHeroWindow
     ב-script.js מחשב מחדש את קרופ-הכנפיים לפי הגודל המוצג בפועל (יש כבר resize listener),
     אז שינוי המידות כאן בלבד מספיק. */
  .hero-art{
    border-width:0;
    box-shadow:none;
    max-width:100vw;
    width:100vw;
    height:auto;
    aspect-ratio: 921 / 560;
  }
  #hero-scroll-track .hero-ui{
    padding-block: var(--sp-4) clamp(2.5rem,7vh,4.5rem);
  }
}
@media (max-width:1024px){
  .about-grid{ grid-template-columns:1fr; }
  .studio-slideshow{ margin-inline:auto; }
  .process-steps{ grid-template-columns:repeat(3,1fr); row-gap:var(--sp-6); }
  .process-steps::before{ display:none; }
}
@media (max-width:900px){
  .museum-nav__links{ gap:var(--sp-2); }
  .gallery-row:nth-child(even){ transform:none; }
}

/* ---------- "פרויקט בעבודה" — תיעוד תהליך, לא תלייה מוזיאלית. תמונות תיעוד
   (סטודיו, רפרנס, שלבי עבודה) בגריד נקי, בלי מסגרת מוזהבת — כדי שיקראו כ"מאחורי
   הקלעים" ולא כיצירות גמורות שתלויות בגלריה. ---------- */
/* הוקטן (ירין: "אני צריך לגלול כדי לראות את כל הציור") — 560px רוחב × יחס-גובה
   1.42 (1019×1446 המקור) = כמעט 800px גובה, גבוה מדי לviewport טיפוסי. */
.progress-hero{
  display:block; margin:0 auto var(--sp-8); max-width:min(400px,78vw);
  border-radius:4px; box-shadow: var(--shadow-frame);
}
.progress-hero img{ display:block; width:100%; height:auto; border-radius:4px; }
/* flex ולא grid (ירין: "לא אוהב את הרווח הריק שנשאר אחרי שהסרתי תמונה") — עם grid,
   5 פריטים (לא מתחלק ב-3) משאירים תא ריק שקוף בשורה האחרונה. flex-wrap עם
   justify-content:center ממרכז את הפריט הבודד שנשאר בשורה האחרונה במקום להשאיר
   שם חור — בלי תלות במספר התמונות בדיוק. */
.progress-grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-3);
  max-width:1100px; margin-inline:auto; padding-bottom:var(--sp-12);
}
.progress-grid figure{ margin:0; cursor:pointer; flex:0 1 calc(33.333% - var(--sp-3) * 2 / 3); }
.progress-grid figure:focus-visible{ outline:2px solid var(--gold-light); outline-offset:4px; border-radius:4px; }
.progress-grid img{
  display:block; width:100%; height:260px; object-fit:cover;
  border-radius:3px; filter:saturate(.94);
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  transition: transform var(--dur-base) var(--ease-smooth);
}
.progress-grid figure:hover img{ transform:translateY(-4px); }
@media (max-width:768px){
  .progress-grid figure{ flex-basis: calc(50% - var(--sp-3) / 2); }
}
@media (max-width:480px){
  .progress-grid figure{ flex-basis: 100%; }
}
/* תוקן (ירין: "תוודא שהכל באתר ידידותי למובייל") — הניווט המלא (כל הקישורים +
   השם) אף פעם לא נכנס בשורה אחת במסך צר, וגלש מעבר לקצה (גם שם האתר "Moshe
   Nahmani" נחתך). כפתור-ההמבורגר (museum-nav__burger) והלוגיקה שלו ב-script.js
   (toggle על .is-open, aria-expanded) כבר היו קיימים ומוכנים — רק לא היה להם שום
   CSS שמפעיל אותם. עכשיו: במסך צר, museum-nav__links מוסתר כברירת מחדל ונפתח
   כתפריט-נפתח מתחת לניווט בלחיצה על הכפתור. */
@media (max-width:768px){
  /* תוקן שוב (ירין: "בטלפון כשנכנסים לתפריט מהכותרת, זה נראה גרוע, כמה כפתורים
     נחתכים... שהתפריט ייקח את כל המסך ולא רק חצי ממנו, ושהכפתור עצמו יהיה
     איקון המבורגר שמתאים לכותרת") — כפתור-פיל עם טקסט הוחלף באיקון המבורגר
     אמיתי (3 פסים שהופכים ל-X בפתיחה), והתפריט הנפתח החלקי הוחלף במסך-מלא
     (position:fixed, inset:0, 100dvh) כדי שכל 6 הפריטים + מתג השפה ייכנסו
     בנוחות בלי חיתוך. */
  .museum-nav__burger{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:5px; width:2.6rem; height:2.6rem; padding:0; flex:none;
    border:1px solid rgba(198,163,78,.4); border-radius:8px;
    background:transparent; position:relative; z-index:101;
    transition: background var(--dur-fast) var(--ease-smooth);
  }
  .museum-nav__burger:hover,.museum-nav__burger[aria-expanded="true"]{ background:rgba(198,163,78,.16); }
  .museum-nav__burger-bar{
    display:block; width:1.3rem; height:2px; border-radius:2px;
    background:var(--gold-light);
    transition: transform var(--dur-fast) var(--ease-smooth), opacity var(--dur-fast) var(--ease-smooth);
  }
  .museum-nav__burger[aria-expanded="true"] .museum-nav__burger-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .museum-nav__burger[aria-expanded="true"] .museum-nav__burger-bar:nth-child(2){ opacity:0; }
  .museum-nav__burger[aria-expanded="true"] .museum-nav__burger-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .museum-nav__links{
    display:none;
    position:fixed; inset:0; height:100dvh; z-index:99;
    flex-direction:column; align-items:center; justify-content:center;
    gap:var(--sp-4);
    padding:6rem var(--sp-4) var(--sp-6);
    background: linear-gradient(180deg, rgba(15,11,8,.99), rgba(15,11,8,.97));
  }
  .museum-nav__links.is-open{ display:flex; }
  .museum-nav__links .museum-nav__link{ font-size:1.2rem; padding-block:.5rem; }
  .museum-nav__links .museum-nav__lang{ margin-top:var(--sp-3); }
  .process-steps{ grid-template-columns:repeat(2,1fr); }
  .salon-wall,.grid-wall{ gap:var(--sp-4); }
  .sketches-wall{ grid-template-columns:repeat(2,1fr); }
  .price-table th,.price-table td{ padding:.55rem .6rem; font-size:.85rem; }
  .info-board,.contact-board{ padding:var(--sp-4); border-width:6px; }
}
@media (max-width:480px){
  .sketches-wall{ grid-template-columns:1fr 1fr; }
  .process-steps{ grid-template-columns:1fr; }
  .lightbox__prev,.lightbox__next{ width:38px; height:38px; font-size:1.2rem; }
}

/* ---------- קישורי המקצועות הנוספים (בשורת "צייר · מעסה · חוקר") ----------
   מסומנים בקו-תחתון עדין בלבד: זו שורת-זהות, לא ניווט — הדגשה חזקה מדי הייתה
   מושכת את העין מהכותרת עצמה. */
.pro-link{
  color:var(--gold-deep); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px;
  transition:color .2s;
}
.pro-link:hover{ color:var(--gold); }

/* התעודה עצמה היא הטריגר ללייטבוקס — אותו סמן כמו ביצירות בגלריה */
.about-cert a{ display:block; cursor:zoom-in; }
.about-cert a:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

/* ---------- קישורי המקצועות הנוספים בניווט (אותה תבנית כמו בדפי הנחיתה) ----------
   מפריד אנכי כדי שיהיה ברור ששני אלה יוצאים מהאתר הזה ולא ניווט בתוכו;
   שניהם נפתחים בלשונית חדשה. */
.museum-nav__sep{
  width:1px; height:18px; background:var(--gold-deep); opacity:.45;
  margin-inline:.45rem; flex:none; align-self:center; list-style:none;
}
.museum-nav__link--x{ color:var(--gold-light); }
.museum-nav__link--x:hover{ color:var(--gold); }
@media (max-width:900px){
  .museum-nav__sep{ width:100%; height:1px; margin-block:.5rem; margin-inline:0; }
}

/* מרווח בין הטקסט לאימוג'י בכפתורי-החוץ שבניווט (ירין: "הם קרובים מדי").
   רווח רגיל נבלע בין עברית לאימוג'י — margin נותן שליטה עקבית. */
.nav-emoji{ margin-inline-start:.4em; display:inline-block; }

/* ══ עמודים משפטיים ══
   ‼ נוספו 25.9. טיפוגרפיה של קריאה ארוכה: שורה קצרה, ריווח נדיב,
   וכותרות שקטות — אלה עמודים שקוראים בהם, לא סורקים. */
.legal-doc{
  position:relative; z-index:3;
  max-width:62ch; margin-inline:auto;
  /* ‼ **משטח קריא מעל קיר השיש.** בבדיקה הראשונה הטקסט ישב ישירות על
     טקסטורת השיש של החדר והורידי הזהב עברו מתחת לאותיות — במסמך קצר
     זה ניחא, במסמך משפטי ארוך זה פשוט לא נקרא. הלוח מתנהג כמו שלט
     מוזיאוני: משטח שקט מעל הקיר, לא ניתוק ממנו.
     ‼ **הפינוי מהניווט נעשה בריפוד של הסקשן ולא במרג'ין של הלוח.**
     מרג'ין עליון של ילד קורס עם ההורה, ולכן הכותרת נחתה מאחורי
     הניווט הקבוע — נמדד: ה-h1 ישב ב-43px מתחת לניווט בגובה 88.
     ריפוד לא קורס. */
  margin-block: 0 var(--sp-10);
  padding: clamp(1.75rem, 4vw, 3rem);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.07);
}
/* ‼ 6.10 — צבע הטקסט נקבע לפי הלוח. עד היום הטקסט ירש את הקרם של הקיר (#F0E7D0) גם על הלוח הלבן:
   ניגודיות של כ-1.2:1 — כמעט בלתי קריא, ונכשל בתקן הנגישות (4.5:1). נמדד באתר החי. */
.legal-doc{ color: var(--text-on-placard); }
.legal-doc a{ color: #6B5418; }   /* ~6.5:1 על הלוח הבהיר */
.legal-doc .legal-table th, .legal-doc .legal-table td{ border-color: rgba(42,33,26,.18); }
@media (prefers-color-scheme: dark){
  .legal-doc{ background: rgba(20,18,16,.88); border-color: rgba(255,255,255,.09); color: var(--text-on-wall); }
  .legal-doc a{ color: var(--gold-light); }
  .legal-doc .legal-table th, .legal-doc .legal-table td{ border-color: rgba(198,163,78,.3); }
}
.legal-doc p, .legal-doc li{ opacity:.9; }
.legal-doc h1{ font-size:clamp(1.6rem,1.2rem+1.4vw,2.3rem); margin:0 0 .3rem; }
.legal-doc__updated{ font-size:.82rem; opacity:.62; margin:0 0 2rem; }
.legal-doc h2{ font-size:1.08rem; font-weight:600; margin:2rem 0 .6rem; }
.legal-doc p, .legal-doc li{ font-size:.95rem; line-height:1.85; opacity:.86; margin:0 0 .8rem; }
.legal-doc ul{ padding-inline-start:1.15rem; margin:0 0 .8rem; }
.legal-doc a{ text-decoration:underline; text-underline-offset:3px; }
.legal-doc strong{ opacity:1; font-weight:600; }

.form-consent{
  font-size:.8rem; line-height:1.7; opacity:.72; margin:.6rem 0 0;
}
.form-consent a{ text-decoration:underline; text-underline-offset:2px; }


/* פינוי הניווט הקבוע בעמודים המשפטיים — ר' ההערה ב-.legal-doc */
.legal-room{ padding-top: clamp(7rem, 11vh, 9.5rem); }

/* 2.10 — אייפד לאורך (ירין: "ההדר של משה באייפד מאונך נראה גרוע"). בין 769 ל-1100 פיקסלים הניווט
   המלא לא נכנס: כל פריט נשבר לשתי שורות ("אודות / האמן"), והפריטים האחרונים (עיסוי רפואי, חוקר פרטי,
   EN) נחתכו מחוץ למסך. ההמבורגר נדלק רק מתחת ל-768. עכשיו גם בטווח הזה — אותו תפריט מסך-מלא כמו בטלפון.
   כללי הטלפון (עד 768) לא השתנו. */
@media (min-width:769px) and (max-width:1100px){
  .museum-nav__burger{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:5px; width:2.8rem; height:2.8rem; padding:0; flex:none;
    border:1px solid rgba(198,163,78,.4); border-radius:8px;
    background:transparent; position:relative; z-index:101;
    transition: background var(--dur-fast) var(--ease-smooth);
  }
  .museum-nav__burger:hover,.museum-nav__burger[aria-expanded="true"]{ background:rgba(198,163,78,.16); }
  .museum-nav__burger-bar{
    display:block; width:1.4rem; height:2px; border-radius:2px; background:var(--gold-light);
    transition: transform var(--dur-fast) var(--ease-smooth), opacity var(--dur-fast) var(--ease-smooth);
  }
  .museum-nav__burger[aria-expanded="true"] .museum-nav__burger-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .museum-nav__burger[aria-expanded="true"] .museum-nav__burger-bar:nth-child(2){ opacity:0; }
  .museum-nav__burger[aria-expanded="true"] .museum-nav__burger-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .museum-nav__links{
    display:none;
    position:fixed; inset:0; height:100dvh; z-index:99;
    flex-direction:column; align-items:center; justify-content:center;
    gap:var(--sp-4);
    padding:6rem var(--sp-4) var(--sp-6);
    background: linear-gradient(180deg, rgba(15,11,8,.99), rgba(15,11,8,.97));
  }
  .museum-nav__links.is-open{ display:flex; }
  .museum-nav__links .museum-nav__link{ font-size:1.35rem; padding-block:.55rem; }
  .museum-nav__links .museum-nav__lang{ margin-top:var(--sp-3); }
  .museum-nav__sep{ width:3rem; height:1px; background:rgba(198,163,78,.35); }
}

/* ── הסכמה בטפסים (6.10, תיקון 13 לחוק הגנת הפרטיות) ── */
.form-consent-box{display:flex;flex-direction:column;gap:.5rem;margin:.25rem 0 1rem}
.form-check{display:flex;align-items:flex-start;gap:.65rem;cursor:pointer;font-size:.95rem;line-height:1.55}
.form-check input{flex:none;width:1.25rem;height:1.25rem;margin-top:.15rem;accent-color:#C6A34E;cursor:pointer}
.form-check a,.form-check .legal-link{color:inherit;text-decoration:underline;text-underline-offset:3px;font-weight:600}
.form-check.is-error span{color:#E0735F}
.form-check.is-error input{outline:2px solid #E0735F;outline-offset:2px}
.form-notice{font-size:.82rem;line-height:1.6;opacity:.78;margin:0}

/* טבלת העוגיות במדיניות הפרטיות (6.10) */
.legal-table{width:100%;border-collapse:collapse;font-size:.92em;margin:.5rem 0 1rem}.legal-table th,.legal-table td{border:1px solid rgba(198,163,78,.35);padding:.55rem .7rem;text-align:start;vertical-align:top}.legal-table th{font-weight:700;background:rgba(127,127,127,.08)}.legal-table code{font-size:.9em}