/*
  מערכת קנה מידה
  כל המידות נכתבות ב-rem, כאשר 1rem = 10px בקנבס העיצוב.
  קנבס העיצוב: 1920×1080 (זהה לארטבורד ב-Illustrator).
  גודל ה-rem מחושב מהמסך, כך שהפרופורציות נשמרות בכל רזולוציה.
*/
/* ---------- גופן: Narkiss Block (גרסת TRIAL, מתיקיית narkiss block) ---------- */
@font-face {
  font-family: "Narkiss Block";
  src: url("narkiss block/NarkissBlock-Hairline-TRIAL.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Narkiss Block";
  src: url("narkiss block/NarkissBlock-Thin-TRIAL.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Narkiss Block";
  src: url("narkiss block/NarkissBlock-Extralight-TRIAL.otf") format("opentype");
  font-weight: 250;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Narkiss Block";
  src: url("narkiss block/NarkissBlock-Light-TRIAL.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Narkiss Block";
  src: url("narkiss block/NarkissBlock-Regular-TRIAL.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Narkiss Block";
  src: url("narkiss block/NarkissBlock-Medium-TRIAL.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Narkiss Block";
  src: url("narkiss block/NarkissBlock-Semibold-TRIAL.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Narkiss Block";
  src: url("narkiss block/NarkissBlock-Heavy-TRIAL.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Narkiss Block";
  src: url("narkiss block/NarkissBlock-Black-TRIAL.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

html {
  /* מקום קבוע לפס הגלילה, כדי שהתוכן יישאר באותו מקום בעמודים ארוכים וקצרים.
     שומרים אותו משני הצדדים, כדי שהתוכן יהיה בדיוק באמצע החלון (ולא קצת שמאלה ממנו) */
  scrollbar-gutter: stable both-edges;
  font-size: 10px; /* fallback */
  font-size: min(calc(100vw / 192), calc(100vh / 108));
}
@supports (height: 100svh) {
  html { font-size: min(calc(100vw / 192), calc(100svh / 108)); }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #F7F7F7;
  color: #111111;
  font-family: "Narkiss Block", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.5;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* הקנבס: רוחב קבוע ביחידות עיצוב, ממורכז */
.canvas {
  width: 100%;
  max-width: 192rem;
  margin-inline: auto;
}

/* ---------- עמוד הבית ---------- */

/* המסך הראשון: הארטבורד צמוד לתחתית החלון */
.home {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden; /* הגנה: קווים עבים והגריד לא יוצרים גלילה */
  /* יוצא מרוחב הקנבס כדי שהגריד יכסה את כל רוחב המסך גם במסכים רחבים */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* במה ביחס 1920×1080, כמו הארטבורד */
.stage {
  position: relative;
  width: 192rem;
  max-width: 100%;
  aspect-ratio: 1920 / 1080;
}

/*
  גריד: נמצא ב-grid.js ומצויר על canvas מאחורי האותיות.
  משבצות של כ-213×213 בקנבס העיצוב (9 עמודות), מיושרות לקצה השמאלי ולתחתית הארטבורד.
*/
.home { position: relative; }
.home-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.stage-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.stage-lines path {
  fill: none;
  stroke: #000000;
  /* קצוות חדים שבולטים חצי עובי מעבר לנקודת הסיום, כמו הקווים האופקיים והפינות,
     כך שכל האותיות נשארות מיושרות למעלה ולמטה בכל עובי */
  stroke-linecap: square;
  stroke-miterlimit: 10;
  /* העובי נשלט מ-main.js לפי מיקום העכבר ולפי השפה, 14 לפני תזוזה ראשונה */
  stroke-width: var(--stroke, 14px);
}

/* הקו של ה-י' דק יותר במקור (12.79 מול 14), היחס נשמר גם כשהעובי משתנה.
   בגלל שהוא דק יותר, הקצוות שלו בולטים פחות מהאחרים. לכן:
   - מרימים אותו, כדי שהראש שלו יישאר מיושר לראש שאר האותיות בכל עובי.
   - מזיזים אותו ואת ה-ל' מעט ימינה ככל שהעובי גדל, כדי שהרווחים בין כל האותיות
     יישארו שווים בכל עובי (ה-ה' משני הצדדים נשארות במקום). */
.stage-lines path.thin {
  stroke-width: calc(var(--stroke, 14px) * 12.79 / 14);
  transform: translate(calc(var(--stroke, 14px) * (1 - 12.79 / 14) / 6),
                       calc(var(--stroke, 14px) * (1 - 12.79 / 14) / -2));
}
.stage-lines path.lamed {
  transform: translateX(calc(var(--stroke, 14px) * (1 - 12.79 / 14) / 3));
}

[hidden] { display: none !important; }

/* ---------- מעבר שפה ---------- */
/*
  כתוב לאורך, בשוליים שליד המילה, והחלק התחתון שלו מיושר לחלק התחתון של המילה
  (HILA והילה: y=1025.4).
  השוליים שלו 70 מהקצה (כמו הלוגו ושם הפרויקט): בצד ימין באנגלית, ובצד שמאל בעברית.
*/
.lang-toggle {
  position: absolute;
  z-index: 1;
  top: auto;
  bottom: 5.46rem;            /* התחתית מיושרת לתחתית המילה (y=1025.4) */
  left: 184rem;               /* הצד הימני 70 מהקצה (כמו השוליים של שם הפרויקט והלוגו) */
  transform: translateX(-50%) rotate(180deg);  /* קריאה מלמטה למעלה */
  writing-mode: vertical-rl;
  padding: 0;
  border: 0;
  background: none;
  color: #111111;
  font: inherit;
  font-size: 2rem;
  text-transform: inherit;
  line-height: 1;
  cursor: pointer;
  text-underline-offset: 0.4rem;
}
html[lang="he"] .lang-toggle { left: 8rem; }   /* הצד השמאלי 70 מהקצה */
.lang-toggle:hover { text-decoration: underline; }
.lang-toggle:focus-visible { outline: 0.2rem solid #FF0000; outline-offset: 0.4rem; }

/* ---------- רשימת פרויקטים ---------- */
/*
  מעל המילה. התחתית שלה 60 מעל ראש HILA (y=800).
  מיושרת לשוליים: הקצה השמאלי של ה-H כשהיא הכי דקה (מרכז הרגל ב-80, פחות חצי מעובי 20 = 70).
  המיקום קבוע ולא זז כשהקווים מתעבים.
*/
.project-list {
  position: absolute;
  z-index: 1;
  bottom: 28rem;
  left: 7rem;
  font-size: 1.9rem;
  line-height: 1.4;
  color: #111111;
}
.project-list ul {
  display: grid;
  row-gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* הרווחים בטקסט (3 בין המספר לשם, 15 לפני התחומים) נשמרים כמו שהם כתובים */
.project-list li { white-space: pre; }
.project-title {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  white-space: inherit;
  text-decoration: none;
  cursor: pointer;
  text-underline-offset: 0.3rem;
}
/* בזמן ריחוף על פרויקט, כל שאר השורות ברשימה הופכות לאפור בהיר.
   המחלקות נקבעות ב-hover.js, באותו רגע שבו התמונה מופיעה, ובאותו מעבר (--hover-fade) */
:root {
  --hover-fade: 0.12s cubic-bezier(0.4, 0, 0.2, 1);  /* משך ועקומה משותפים לכל מעברי הריחוף */
}
.project-list li { transition: color var(--hover-fade); }
.project-list ul.has-active li:not(.is-active) { color: #C4C4C4; }

/* ריחוף על כל הכפתור (מספר או שם) מסמן קו תחתון רק מתחת לשם */
.project-title:hover .project-name { text-decoration: underline; }
.project-title:focus-visible { outline: 0.2rem solid #FF0000; outline-offset: 0.3rem; }

/* מספר הפרויקט וסוג הפרויקט: Light. שם הפרויקט: Medium */
.project-num,
.project-tags { font-weight: 300; }
.project-num { font-variant-numeric: tabular-nums; }  /* ספרות ברוחב אחיד, כדי ששמות הפרויקטים יתחילו באותו קו */
.project-name { font-weight: 500; }

/* ---------- תמונת פרויקט בריחוף ---------- */
/*
  בצד ימין, מעל המילה. התחתית באותו קו עם תחתית רשימת הפרויקטים (y=800),
  והקצה הימני מיושר לקצה החיצוני של האות האחרונה כשהיא הכי דקה.
  כל התמונות באותה מסגרת בדיוק: 540 × 720 (3:4), מ-y=80 עד y=800.
  תמונה בפרופורציה קצת שונה נחתכת מעט, כדי למלא את המסגרת.
*/
.project-preview {
  position: absolute;
  z-index: 1;
  bottom: 34rem;              /* התחתית ב-y=740: מעל ה-ל' של הילה גם כשהקווים הכי עבים (y=760) */
  right: 22rem;               /* 1920 - 1700: ה-A נגמרת ב-1690, ועוד חצי עובי 20 */
  height: 66rem;              /* הראש נשאר באותו מקום (y=80) */
  aspect-ratio: 3 / 4;        /* מסגרת קבועה לכל התמונות: 495 × 660 */
  margin: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--hover-fade);
}
.project-preview.is-visible { opacity: 1; }
/* כל התמונות של הפרויקטים נמצאות כאן מראש, זו על זו, ורק אחת מוצגת.
   הרוחב של המסגרת נקבע ב-hover.js לפי הפרופורציות של התמונה המוצגת. */
.preview-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* תמונה שלא בדיוק 3:4 נחתכת מעט מהצדדים או מלמעלה ולמטה */
  opacity: 0;
  transition: opacity var(--hover-fade);   /* מעבר רך גם כשעוברים ישר מפרויקט לפרויקט */
}
.preview-img.is-shown { opacity: 1; }
.preview-caption { z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .project-preview, .project-list li, .preview-img { transition: none; }
}

/* שם, שנה וסוג הפרויקט: על התמונה, בפינה השמאלית העליונה, 20 מהקצה השמאלי ו-20 מהקצה העליון. השורות מיושרות לשמאל */
.preview-caption {
  position: absolute;
  top: 1.36rem;              /* פחות מ-2rem כי לגופן יש רווח מעל האותיות; כך הרווח הנראה למעלה שווה לרווח משמאל (20) */
  left: 2rem;
  display: grid;
  justify-items: start;
  text-align: left;
  white-space: nowrap;
  font-size: 1.6rem;
  font-weight: 600;          /* NarkissBlock-Semibold */
  line-height: 1.4;
  color: var(--caption-color, #FFFFFF);   /* לבן, או הצבע שנקבע לפרויקט ב-hover.js */
}

/* ---------- יציאה לעמוד פרויקט ---------- */
/* הרשימה, התמונה וכפתור השפה דוהים; הגריד והאותיות נעלמים בגל (transition.js, grid.js) */
.project-list,
.project-preview,
.lang-toggle { transition: opacity 0.35s ease; }
body.is-leaving .project-list,
body.is-leaving .project-preview,
body.is-leaving .lang-toggle { opacity: 0 !important; }
body.is-leaving { pointer-events: none; }

/* ---------- עמוד פרויקט ---------- */
/* בלי גריד ובלי המילה. אותם שוליים כמו בעמוד הבית: 70 משמאל (הקצה של ה-H כשהיא הכי דקה) */
.project {
  position: relative;
  padding-inline: 7rem;
  padding-block: 0 8rem;
  animation: project-in 0.6s ease both;
}
@keyframes project-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .project { animation: none; } }

/* הכותרת יושבת בפינה השמאלית העליונה מעל התוכן, כדי שהתוכן הראשון יוכל להיות במרכז המסך */
.project-header {
  position: absolute;
  z-index: 1;
  top: 6rem;
  left: 7rem;
  right: 7rem;               /* באותו רוחב כמו אזור התוכן, כדי שהיישור לשולי המדיה יהיה זהה */
  display: grid;
  gap: 7rem;
  font-size: 1.9rem;
  line-height: 1.4;
}
.project-back {
  justify-self: start;
  color: #111111;
  font-weight: 300;
  text-decoration: none;
  text-underline-offset: 0.3rem;
}
.project-back:hover { text-decoration: underline; }
.project-back:focus-visible { outline: 0.2rem solid #FF0000; outline-offset: 0.3rem; }

/* שם, שנה ותחום צמודים זה לזה */
/* שם הפרויקט, השנה והתחום באותה שורה; טקסט ההסבר ישר מתחתם */
.project-heading { display: grid; gap: 2.4rem; line-height: 1.25; }
.project-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 3rem;
}
.project-year,
.project-kind { font-weight: 300; }
/* בין השם לשנה רווח כפול (60) מאשר בין השנה לתחום (30) */
.project-title-row .project-heading-name { margin-right: 3rem; }
.project-heading-name {
  margin: 0;
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
}

/* תוכן הפרויקט: ברוחב מלא בין השוליים (70 מכל צד) */
.project-content {
  display: grid;
  gap: 4rem;
}
/* בלוק בגובה מסך שלם, שהתוכן שלו נמצא בדיוק במרכז העמוד */
.project-center {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
}
/* הלוגו המונפש של פסטיבל הסרטים: 600 מתוך 1920 ברוחב הארטבורד, במרכז לרוחב ו-80 מתחת למרכז לגובה */
.project-media.project-logo { width: 60rem; transform: translateY(8rem); }
/* תמונת הפוסטרים: ברוחב המדיה הרגיל, ומעט מעל סוף המסך הראשון */
.project-media.project-posters { margin-top: -12rem; }
/*
  תמונות וסרטונים בעמודי הפרויקטים: רוחב אחיד של 1440 בקנבס, במרכז.
  זה מגדיר את השוליים של המדיה: 240 מכל צד (הטקסט נשאר בשוליים של 70).
*/
:root { --media-width: 144rem; }
.project-media {
  display: block;
  width: var(--media-width);
  max-width: 100%;
  height: auto;
  justify-self: center;
}

/* תיאור הפרויקט: מתחת לשם, לשנה ולתחום. עד 740 רוחב */
.project-description {
  display: grid;
  gap: 0;                    /* מעבר שורה אחד בין פסקאות, בלי שורה ריקה */
  max-width: 74rem;
  font-size: 1.9rem;
  text-transform: none;       /* טקסט ההסבר באותיות רגילות, לא רק גדולות */
  font-weight: 300;
  line-height: 1.5;
}
.project-description p {
  margin: 0;
  text-wrap: pretty;   /* הדפדפן מאזן את השורות כדי שלא תישאר מילה אחת לבד בשורה האחרונה */
}

/*
  שורה של כמה תמונות/סרטונים ברוחב המדיה (--media-width), כולם באותו גובה.
  כל פריט מקבל --ratio (רוחב / גובה), והרוחב שלו בשורה נקבע לפי היחס הזה.
*/
.project-row {
  display: flex;
  gap: 4rem;                 /* כמו הרווח בין השורות לתמונה שמעליהן */
  width: var(--media-width);
  max-width: 100%;
  justify-self: center;
}
.project-row > img,
.project-row > video {
  display: block;
  flex: calc(var(--ratio)) 1 0;
  min-width: 0;
  aspect-ratio: var(--ratio);
  height: auto;
  object-fit: cover;
}

/*
  טקסטי ההסבר מיושרים לשוליים של התמונות והסרטונים.
  הרווח מחושב מהרוחב האמיתי של אזור התוכן, כך שהיישור מדויק גם כשיש פס גלילה:
  (רוחב התוכן - רוחב המדיה) / 2.
*/
:root { --media-inset: calc((100% - var(--media-width)) / 2); }
/* שם הפרויקט, השנה, התחום וטקסט ההסבר שאחריהם: כולם מיושרים לשוליים של המדיה (INDEX נשאר ב-70) */
.project-heading { margin-left: var(--media-inset); }

/* גוש טקסט בתוך התוכן: באותו עיצוב כמו טקסט ההסבר, עם מרווח מהמדיה שמעליו ומתחתיו */
.project-text-block {
  justify-self: start;
  margin-block: 6rem;
  margin-left: var(--media-inset);
}

/* גוש טקסט בעברית: מימין לשמאל, מיושר לשוליים הימניים של התמונות והסרטונים */
.project-text-block--rtl {
  justify-self: end;
  margin-left: 0;
  margin-right: var(--media-inset);
  text-align: right;
}

/* ---------- פלטת צבעים בעמוד פרויקט ---------- */
/* ברוחב המדיה, בגובה 400. כל צבע תופס חלק לפי --size (כולם 1 = חלקים שווים) */
.project-palette {
  display: flex;
  width: var(--media-width);
  max-width: 100%;
  height: 40rem;
  justify-self: center;
}
.swatch {
  flex: var(--size, 1) 1 0;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  padding: 2rem;
  background: var(--c);
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.5;
  white-space: nowrap;
}

/* תמונת הדגלים: חצי מרוחב המדיה (750), מיושרת לשוליים השמאליים של המדיה */
.project-media.project-flags {
  width: calc(var(--media-width) / 2);
  justify-self: start;
  margin-left: var(--media-inset);
}

/*
  הדגלים והכרטיס ממלאים את כל רוחב המדיה, משול לשול.
  הדגלים נשארים בחצי מרוחב המדיה ובפרופורציה שלהם, והם קובעים את גובה השורה.
  הכרטיס ממלא את שאר הרוחב באותו גובה; מה שלא נכנס נחתך מהחלק העליון שלו.
*/
.project-row.project-flags-row {
  height: calc(var(--media-width) / 2 * 1739 / 1254);
}
.project-flags-row > img {
  height: 100%;
  aspect-ratio: auto;
}
.project-flags-row > img:first-child {
  flex: 0 0 calc(var(--media-width) / 2);
}
.project-flags-row > img:last-child {
  flex: 1 1 0;
  object-fit: cover;
  object-position: center bottom;   /* חותכים מלמעלה */
}

/*
  עמוד שבו התוכן מתחיל מיד מתחת לכותרת (בלי פריט במרכז המסך הראשון):
  הכותרת יושבת בזרימה הרגילה של העמוד, והתוכן מתחיל אחריה. השוליים זהים לשאר העמודים.
*/
.project.project--flow { padding-top: 6rem; }
.project--flow .project-header {
  position: static;
  margin-bottom: 10rem;
}

/* מדיה בחצי מרוחב המדיה: מהשוליים השמאליים של המדיה ועד אמצע המסך */
.project-media.project-media--small-left {
  width: calc(var(--media-width) / 2);
  justify-self: start;
  margin-left: var(--media-inset);
}

/* שורה עם רווח גדול בין הפריטים (120 במקום 40) */
.project-row.project-row--wide-gap { gap: 12rem; }

/* שתי תמונות באותו רוחב, אחת ליד השנייה, מיושרות למעלה (הגובה של כל אחת לפי הפרופורציות שלה) */
.project-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 4rem;
  width: var(--media-width);
  max-width: 100%;
  justify-self: center;
}
.project-pair > img,
.project-pair > video {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- תמונה חתוכה עם כפתור Show more ---------- */
/* במצב סגור התיבה בפרופורציה --collapsed-ratio (כאן: של התמונה שלידה), והשאר מוסתר */
.project-collapse { display: grid; gap: 2rem; justify-items: start; }
.project-collapse-box {
  width: 100%;
  overflow: hidden;
  aspect-ratio: var(--collapsed-ratio);
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.project-collapse-box.is-open { aspect-ratio: auto; }
.project-collapse-box img { display: block; width: 100%; height: auto; }
.project-more {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #111111;
  font: inherit;
  font-size: 1.9rem;
  font-weight: 500;          /* כמו טקסטי ההסבר, במשקל בולט יותר */
  text-transform: none;
  cursor: pointer;
  text-underline-offset: 0.3rem;
}
.project-more:hover { text-decoration: underline; }
.project-more:focus-visible { outline: 0.2rem solid #FF0000; outline-offset: 0.3rem; }
@media (prefers-reduced-motion: reduce) { .project-collapse-box { transition: none; } }

/* כותרת משנה בתוך התוכן: באותו פונט כמו טקסטי ההסבר (Light, אותיות רגילות, 19),
   מיושרת לשוליים של המדיה, 100 מהתוכן שמעליה ומהתוכן שמתחתיה, כמו שאר הטקסטים */
.project-subheading {
  justify-self: start;
  margin: 6rem 0 6rem var(--media-inset);
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 1.5;
  text-transform: none;
}
/* שורה צפופה (20 בין הפריטים), לשורות עם הרבה פריטים קטנים */
.project-row.project-row--tight { gap: 2rem; }

/* ---------- כותרת האתר בעמוד הבית ---------- */
/*
  בפינה השמאלית העליונה, בדיוק במקום של INDEX בעמודי הפרויקטים:
  60 מראש העמוד, ו-70 מהקצה השמאלי של הקנבס (הקנבס ברוחב 1920 במרכז המסך).
  יושבת ישירות באזור של מסך הבית (שמתחיל בראש העמוד), ולא בארטבורד שצמוד לתחתית.
*/
.site-title {
  position: absolute;
  z-index: 1;
  top: 6rem;
  left: calc((100% - min(192rem, 100%)) / 2 + 7rem);
  margin: 0;
  font-size: 1.9rem;
  line-height: 1.4;
  color: #111111;
  white-space: pre;
}

/* בזמן המעבר מעמוד הבית לעמוד אחר גם הלוגו והקישורים דוהים */
.site-title,
.site-nav { transition: opacity 0.35s ease; }
body.is-leaving .site-title,
body.is-leaving .site-nav { opacity: 0; }

/* קישורים בעמוד הבית: באותה שורה כמו LOGOS (השורה האחרונה ברשימת הפרויקטים, 60 מעל המילה),
   והצד הימני מיושר לקצה החיצוני של ה-A כשהיא הכי דקה (x=1700), כמו תמונות הריחוף */
.site-nav {
  position: absolute;
  z-index: 1;
  bottom: 28rem;
  right: 22rem;
  display: flex;
  gap: 4rem;
  font-size: 1.9rem;
  line-height: 1.4;
  font-weight: 500;            /* כמו שמות הפרויקטים */
}
.site-nav a {
  color: #111111;
  text-decoration: none;
  text-underline-offset: 0.3rem;
}
.site-nav a:hover { text-decoration: underline; }
.site-nav a:focus-visible { outline: 0.2rem solid #FF0000; outline-offset: 0.3rem; }

/* ---------- עמוד about ---------- */
/* INDEX באותו מקום ובאותו עיצוב כמו בעמודי הפרויקטים */
.about-back {
  font-weight: 300;
  text-decoration: none;
  text-underline-offset: 0.3rem;
}
.about-back:hover { text-decoration: underline; }
.about-back:focus-visible { outline: 0.2rem solid #FF0000; outline-offset: 0.3rem; }

/*
  התמונה: מיושרת לשוליים השמאליים (x=70, כמו INDEX), והתחתית 100 מעל המילה.
  המסגרת 400 × 557 (אותו חיתוך כמו קודם): ומה שעודף נחתך מהחלק העליון של התמונה.
*/
:root { --about-bottom: 28.9rem; --about-photo-h: calc(108rem - 23.3rem - var(--about-bottom)); --about-photo-w: calc(var(--about-photo-h) * 400 / 557); --about-text-w: 56rem; }
.about-photo {
  position: absolute;
  z-index: 1;
  top: 23.3rem;               /* מיושרת לראש הטקסט */
  bottom: var(--about-bottom);  /* התחתית בקו הבסיס של שורת הכפתורים */
  left: 7rem;                 /* מיושרת לשוליים השמאליים, כמו הלוגו */
  width: var(--about-photo-w);
  height: var(--about-photo-h);
  max-width: none;
  object-fit: cover;
  object-position: center bottom;   /* חותכים מלמעלה */
  display: block;
}

/* הטקסט וכפתור קורות החיים: מימין לתמונה (שמיושרת לשוליים השמאליים). הקו התחתון מיושר לתחתית התמונה (y=760) */
.about-text {
  position: absolute;
  z-index: 1;
  top: 22.57rem;              /* ראש האותיות בשורה הראשונה בגובה ראש התמונה (y=233) */
  font-size: 1.9rem;          /* כמו טקסטי ההסבר בעמודי הפרויקטים */
  width: var(--about-text-w);
  max-width: none;
  left: calc(7rem + var(--about-photo-w) + 6rem);   /* מימין לתמונה, 60 ממנה */
  gap: 1.5em;                 /* שורה ריקה בין הפסקאות */
}

/* כניסה רכה לעמוד: רק התמונה והטקסט. הלוגו, הכפתורים, מעבר השפה והמילה כבר היו בעמוד הבית ונשארים במקום */
.about-page .about-photo,
.about-page .about-text { animation: project-in 0.6s ease both; }
@media (prefers-reduced-motion: reduce) {
  .about-page .about-photo, .about-page .about-text { animation: none; }
}
/* הקישור לעמוד הנוכחי מסומן בקו תחתון */
.site-nav a[aria-current="page"] { text-decoration: underline; }

/* כפתור קורות החיים: מתחת לטקסט, כמו כפתור Show more (19, Medium, אותיות רגילות) */
.about-cv {
  /* מתחת לפסקת הטקסט, מיושר לצד השמאלי שלה */
  justify-self: start;
  line-height: 1.5;
  font-size: 1.9rem;
  color: #111111;
  font-weight: 500;
  text-decoration: none;
  text-underline-offset: 0.3rem;
}
.about-cv:hover { text-decoration: underline; }
.about-cv:focus-visible { outline: 0.2rem solid #FF0000; outline-offset: 0.3rem; }

/* הלוגו בעמודי הפרויקטים, במקום INDEX: באותו מקום (60 מלמעלה, 70 משמאל), וחוזר לעמוד הבית */
.project-logo-mark {
  display: block;
  height: 5rem;
  width: auto;
}
.project-back:has(.project-logo-mark):hover,
.about-back:has(.project-logo-mark):hover { text-decoration: none; opacity: 0.6; }
.project-back:has(.project-logo-mark) { transition: opacity 0.2s ease; }

/* בזמן ריחוף על פרויקט שלושת הכפתורים נעלמים, באותו רגע ובאותו מעבר כמו התמונה והאפרת הרשימה */
.stage:has(.project-list ul.has-active) .site-nav {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hover-fade);
}

/* מעבר מעמוד הבית לעמוד about: רק הרשימה ותמונת הריחוף נעלמות (הגריד נמחק ב-grid.js) */
body.is-leaving-about .project-list,
body.is-leaving-about .project-preview { opacity: 0 !important; }
body.is-leaving-about { pointer-events: none; }



/*
  כפתור השפה בעמודים הפנימיים: יושב באזור קבוע על המסך שבנוי בדיוק כמו האזור של המילה בעמוד הבית
  (ארטבורד 1920×1080 צמוד לתחתית המסך), ולכן הוא תמיד באותו מקום כמו בעמוד הבית ובעמוד about.
*/
.page-stage-frame {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.page-stage-frame .lang-toggle { pointer-events: auto; }
.lang-toggle.lang-toggle--page.is-he { left: 8rem; }

/*
  שם הפרויקט לאורך, בצד שמאל, כשגוללים מתחת לכותרת: מיושר לשוליים של עמוד הבית (x=70),
  בגובה של הלוגו (y=60), קריאה מלמטה למעלה כמו כפתור השפה. השם ב-Medium, ומתחתיו השנה והנושא ב-Light.
*/
.project-side-name {
  position: fixed;
  z-index: 2;
  top: 6rem;                 /* בגובה של הלוגו (שכבר גלל למעלה ויצא מהמסך) */
  left: calc((100% - min(192rem, 100%)) / 2 + 7rem);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 1.9rem;
  line-height: 1.4;
  white-space: nowrap;
  text-align: end;           /* השנה והנושא מיושרים לקצה של השם (למעלה, בסוף הקריאה) */
  color: #111111;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);   /* הופעה רכה ואיטית */
}
/* כפתור: לחיצה גוללת לראש העמוד. ניתן ללחיצה רק כשהוא מוצג */
.project-side-name {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  text-transform: inherit;
  cursor: pointer;
  text-underline-offset: 0.3rem;
}
.project-side-name.is-visible { opacity: 1; pointer-events: auto; }
.project-side-name:hover .project-side-title {
  text-decoration: underline;
  text-underline-offset: 0.1rem;   /* קרוב לאותיות */
}
.project-side-name:focus-visible { outline: 0.2rem solid #FF0000; outline-offset: 0.4rem; }
@media (prefers-reduced-motion: reduce) { .project-side-name { transition: none; } }

.project-side-name > span { display: block; }
.project-side-title { font-weight: 500; }
.project-side-meta { font-weight: 300; }

/* בעמודי הפרויקטים: הקישורים בחלק העליון, בגובה של הלוגו (60 מלמעלה),
   והצד הימני מיושר לצד הימני של כפתור השפה (70 מהקצה). גוללים יחד עם הלוגו */
.site-nav.site-nav--top {
  top: 6rem;
  bottom: auto;
  right: 7rem;
}

/* ---------- Previous Project / Next Project בסוף עמוד הפרויקט ---------- */
/* ברוחב המדיה: Previous בשוליים השמאליים, Next בשוליים הימניים. 50 מתחת לתוכן */
.project-pager {
  display: flex;
  justify-content: space-between;
  width: var(--media-width);
  max-width: 100%;
  margin: 5rem auto 0;
  font-size: 1.9rem;
  line-height: 1.4;
  font-weight: 500;            /* כמו שמות הפרויקטים והכפתורים */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.project-pager.is-visible { opacity: 1; pointer-events: auto; }
.project-pager a {
  color: #111111;
  text-decoration: none;
  text-underline-offset: 0.3rem;
}
.project-pager a:hover { text-decoration: underline; }
.project-pager a:focus-visible { outline: 0.2rem solid #FF0000; outline-offset: 0.3rem; }
@media (prefers-reduced-motion: reduce) { .project-pager { transition: none; } }

/* בסוף העמוד: הכפתורים Previous / Next מיושרים לתחתית של כפתור השפה.
   העמוד לפחות בגובה המסך, כך שגם בעמוד קצר הכפתורים בתחתית המסך ולא למעלה */
.project:has(.project-pager) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding-bottom: 4.81rem;    /* קו הבסיס של הכפתורים בגובה התחתית של כפתור השפה (y=1025.4 בארטבורד) */
}
.project:has(.project-pager) > .project-pager { margin-top: auto; }
.project:has(.project-pager) > .project-content { margin-bottom: 5rem; }   /* 50 לפחות בין התוכן לכפתורים */

/*
  מדיה עם רקע לבן: הלבן מקבל את צבע הרקע של האתר.
  במצב multiply לבן כפול צבע הרקע (#F7F7F7) נותן בדיוק את צבע הרקע, ושחור נשאר שחור.
*/
.project-media--blend { mix-blend-mode: multiply; }
/* בסרטונים הרקע "לבן" הוא בדרך כלל אפור בהיר מאוד (בגלל הדחיסה): מגבירים מעט את הניגודיות
   כדי שהרקע יהיה לבן מלא, ואז הוא מקבל בדיוק את צבע הרקע של האתר. השחור נשאר שחור */
video.project-media--blend { filter: contrast(1.1); }
/* לעמוד הפרויקט צבע רקע משלו, כדי שהערבוב יעבוד גם בזמן הכניסה הרכה לעמוד (שבה התוכן הוא שכבה נפרדת) */
.project { background: #F7F7F7; }

/* המוושן של Area of Interest: מעט קטן יותר מרוחב המדיה (1200 במקום 1440), במרכז */
.project-media.project-aoi-motion { width: calc(var(--media-width) - 24rem); }

/* הדגשה בתוך טקסטי ההסבר (למשל שם הפרויקט): במשקל Medium, בלי נטוי (לגופן אין גרסה נטויה) */
.project-description em { font-style: normal; font-weight: 500; }

/* עמודה עם כמה פריטים אחד מתחת לשני (בתוך שורה של שניים): ברוחב העמודה, 40 ביניהם */
.project-stack { display: grid; gap: 4rem; align-content: start; }
.project-stack > img,
.project-stack > video { display: block; width: 100%; height: auto; }

/* עמודה שבה הפריט האחרון מוצמד לתחתית השורה (מסתיים יחד עם הפריט שבעמודה השנייה) */
.project-stack.project-stack--to-bottom { position: relative; align-self: stretch; }
.project-stack.project-stack--to-bottom > :last-child { position: absolute; left: 0; bottom: 0; z-index: 2; }
/* הסרטון המוגדל מתחת לתמונה, גם בדפדפנים שמציירים סרטונים בשכבה נפרדת (כמו Safari) */
.project-stack.project-stack--to-bottom > video { position: relative; z-index: 1; }

/* סרטון הפונט המתחלף בנקודת אור: מוגדל מעט סביב המרכז שלו, בלי להזיז את שאר הפריטים.
   הרקע שלו נבלע ברקע האתר, ולכן רק האות נראית גדולה יותר */
.project-font-video { transform: scale(1.15); }

/* תמונת הפונט בנקודת אור: יורדת בגובה השוליים הריקים שבתחתית התמונה (8.25% מגובהה),
   כך שהשורה האחרונה של האותיות מסתיימת בדיוק בקו התחתון של תמונת האתר בטלפון */
.project-stack.project-stack--to-bottom > img:last-child { transform: translateY(8.25%); }

/*
  מדיה ולידה פריט נוסף: הראשון ברוחב --beside-width מרוחב המדיה ובפרופורציה --beside-ratio
  (מה שלא נכנס נחתך), צמוד לשול השמאלי של המדיה. השני מימין, באותו גובה, ברוחב לפי הפרופורציה שלו.
*/
.project-beside {
  --beside-w: calc(var(--media-width) * var(--beside-width));
  display: flex;
  align-items: flex-start;
  gap: 4rem;
  width: var(--media-width);
  max-width: 100%;
  justify-self: center;
}
.project-beside > :first-child {
  display: block;
  flex: none;
  width: var(--beside-w);
  aspect-ratio: var(--beside-ratio);
  object-fit: cover;
}
.project-beside > :last-child {
  display: block;
  min-width: 0;
  height: calc(var(--beside-w) / (var(--beside-ratio)));
  width: auto;
}

/*
  מדיה חתוכה: מציגה רק חלק מהסרטון/התמונה.
  --crop-x/--crop-y/--crop-w/--crop-h הם החלק שרואים, ו--full-w הוא הרוחב המלא של הקובץ (בפיקסלים של הקובץ).
*/
.project-crop {
  overflow: hidden;
  aspect-ratio: var(--crop-w) / var(--crop-h);
}
.project-crop > video,
.project-crop > img {
  display: block;
  width: calc(100% * var(--full-w) / var(--crop-w));
  max-width: none;
  margin-left: calc(-100% * var(--crop-x) / var(--crop-w));
  margin-top: calc(-100% * var(--crop-y) / var(--crop-w));
}

/*
  טקסט ולידו קישור: הטקסט בשוליים השמאליים של המדיה, הקישור בשוליים הימניים,
  והשורה התחתונה של שניהם על אותו קו (baseline)
*/
.project-text-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;       /* לדפדפנים שלא מכירים last baseline: אותה תוצאה, כי גובה השורה זהה */
  align-items: last baseline;
  gap: 6rem;
  width: var(--media-width);
  max-width: 100%;
  justify-self: center;
  margin-block: 6rem;
}
.project-link {
  flex: none;
  font-size: 1.9rem;
  line-height: 1.5;
  font-weight: 500;            /* כמו הכפתורים About me / Instagram / E-mail */
  color: #111111;
  text-decoration: none;
  text-underline-offset: 0.3rem;
}
.project-link:hover { text-decoration: underline; }
.project-link:focus-visible { outline: 0.2rem solid #FF0000; outline-offset: 0.3rem; }

/*
  שורה מוקטנת: שני הפריטים באותו גובה (--h), הראשון בשול השמאלי של המדיה והאחרון בשול הימני.
  מה שמתפנה מההקטנה עובר לרווח שביניהם.
*/
.project-row.project-row--scaled { justify-content: space-between; }
.project-row.project-row--scaled > img {
  flex: none;
  height: var(--h);
  width: auto;
}

/*
  שורה של תמונות עם משפט מתחת לכל אחת (עמוד Random).
  התמונות באותו גובה וממלאות את רוחב המדיה, עם רווח של 80 ביניהן
*/
.project-row.project-row--captions { gap: 8rem; }
.project-row > .project-figure {
  flex: calc(var(--ratio)) 1 0;
  min-width: 0;
  margin: 0;
}
.project-figure > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio);
}
.project-figure > figcaption {
  margin-top: 1.2rem;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  text-transform: none;
}
.project-row.project-row--captions + .project-row.project-row--captions { margin-top: 2rem; }

/* רשת של פריטים באותו רוחב (עמוד Logos): ברוחב המדיה, 40 בין הפריטים */
.project-grid {
  display: grid;
  gap: 4rem;
  width: var(--media-width);
  max-width: 100%;
  justify-self: center;
}
.project-grid--3 { grid-template-columns: repeat(3, 1fr); }
.project-grid > img {
  display: block;
  width: 100%;
  height: auto;
  /* הגדלה בתוך המקום של הפריט (--zoom). השוליים הלבנים שיוצאים ממנו נבלעים ברקע */
  transform: scale(var(--zoom, 1));
}

/* עמוד about: מסגרת ברוחב הקנבס בראש העמוד, כדי שהכותרת תשב בדיוק כמו בעמודי הפרויקטים */
.about-heading-frame {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 192rem;
  margin-inline: auto;
  pointer-events: none;
}
/* בעמוד about הכותרת מיושרת לשוליים של העמוד (70, כמו התמונה והלוגו) ולא לשוליים של המדיה */
.about-heading-frame .project-heading { margin-left: 0; }

/*
  עברית (html.is-he, נקבע ב-lang.js): בעמודי הפרויקטים הטקסטים עוברים לצד השני,
  צמודים לשול הימני של המדיה (במקום לשמאלי). התמונות והסרטונים נשארים במקומם.
*/
html.is-he .project-page .project-heading {
  direction: rtl;
  margin-left: 0;
  margin-right: var(--media-inset);
}
/* בין השם לשנה רווח כפול, עכשיו בצד השמאלי של השם */
html.is-he .project-page .project-title-row .project-heading-name { margin-right: 0; margin-left: 3rem; }
html.is-he .project-page .project-text-block,
html.is-he .project-page .project-subheading {
  justify-self: end;
  direction: rtl;
  margin-left: 0;
  margin-right: var(--media-inset);
}
/* טקסט וקישור באותה שורה: הטקסט בשול הימני והקישור בשול השמאלי */
html.is-he .project-page .project-text-row { direction: rtl; }

/*
  עמוד הבית בעברית: תמונת הסדר הפוך מאנגלית.
  רשימת הפרויקטים בצד ימין, צמודה לשול הימני (70 מהקצה) ומיושרת לימין.
  תמונות הריחוף והקישורים בצד שמאל: הצד השמאלי שלהם מיושר לקצה החיצוני של ה-ה' השמאלית
  כשהיא הכי דקה (x=310), כמו שבאנגלית הצד הימני שלהם מיושר ל-A.
*/
html.is-he body:not(.about-page) .home .project-list {
  left: auto;
  right: 7rem;
  direction: rtl;
  text-align: right;
}
html.is-he body:not(.about-page) .home .project-preview {
  right: auto;
  left: 31rem;
}
/* הכיתוב על התמונה: בפינה הימנית העליונה, 20 מהצד הימני (כמו שבאנגלית הוא 20 מהצד השמאלי) */
html.is-he body:not(.about-page) .home .preview-caption {
  left: auto;
  right: 2rem;
  direction: rtl;
  justify-items: start;
  text-align: right;
}
html.is-he body:not(.about-page) .home .site-nav {
  right: auto;
  left: 31rem;
  direction: rtl;
}

/* בין הבתים בעברית: סרטון המסלול צמוד לשול הימני, והרשימה העברית משמאלו (80 ממנו).
   בקובץ העברי יש 31 שקופים מעל הטקסט (מתוך 5299) */
html.is-he .project-beside.project-beside--list { flex-direction: row-reverse; }
html.is-he .project-beside.project-beside--list > img {
  margin-left: 0 !important;
  margin-right: 4rem;
  margin-top: calc(var(--h) * -31 / 5299) !important;
}

/* השם האנכי בעמודי הפרויקטים: בעברית בצד ימין (70 מהקצה), במקום בצד שמאל */
html.is-he .project-side-name {
  left: auto;
  right: calc((100% - min(192rem, 100%)) / 2 + 7rem);
}

/* עברית: הלוגו בפינה הימנית העליונה (70 מהקצה) בכל העמודים, במקום בשמאלית */
html.is-he .site-title {
  left: auto;
  right: calc((100% - min(192rem, 100%)) / 2 + 7rem);
}
html.is-he .project-header .project-back { justify-self: end; }
/* עברית: הכפתורים בעמודי הפרויקטים בפינה השמאלית העליונה (70 מהקצה), וקצת עליי ראשון מימין */
html.is-he .site-nav.site-nav--top {
  right: auto;
  left: 7rem;
  direction: rtl;
}

/* עברית: "הפרויקט הקודם" בשול הימני ו"הפרויקט הבא" בשול השמאלי (הפוך מאנגלית) */
html.is-he .project-pager { flex-direction: row-reverse; }

/*
  עמוד "קצת עליי" בעברית: תמונת מראה של האנגלית, כמו בשאר האתר בעברית.
  התמונה צמודה לשול הימני, הטקסט משמאלה (60 ממנה), הכותרת מיושרת לשול הימני,
  והכפתורים בצד שמאל, באותו מקום כמו בעמוד הבית בעברית.
*/
html.is-he .about-page .about-photo {
  left: auto;
  right: 7rem;
}
html.is-he .about-page .about-text {
  left: auto;
  right: calc(7rem + var(--about-photo-w) + 6rem);
}
html.is-he .about-heading-frame .project-heading { direction: rtl; }
html.is-he .about-heading-frame .project-title-row .project-heading-name { margin-right: 0; margin-left: 3rem; }
html.is-he .about-page .site-nav {
  right: auto;
  left: 31rem;
  direction: rtl;
}

/* בזוג תמונות: פריט שנמצא מעל הפריט שלידו כשהם חופפים (למשל app מעל הסרטון המוגדל של הפונט). המיקום והגודל לא משתנים */
.project-pair > .project-pair-front { position: relative; z-index: 3; }