/* ============================================================
   OHAD KRIEF — SHELL
   מקור אמת אחד למעטפת: משתנים, טיפוגרפיה, ניווט, פוטר,
   כרטיס שמלה, סוויטת Louvre. כל עמוד עיצוב קורא לקובץ הזה
   ומוסיף מעליו רק את מה שייחודי לו.
   עד 12.10.2026 הבלוק הזה היה מודבק בתוך כל עמוד בנפרד.
   ============================================================ */

/* ============================================================
   OHAD KRIEF — WIREFRAME SHELL
   מעטפת משותפת לכל עמודי האתר. תיקון כאן מתקן את כל העמודים.
   ============================================================ */

:root{
  /* ---------- סולם טיפוגרפי אחד לכל האתר ---------- */
  /* ארבע מדרגות: מובייל ≤600, טאבלט 601–900, לפטופ 901–1100,
     דסקטופ מעל. כל טוקן נוזלי בתוך המדרגה שלו (clamp עם vw),
     וקופץ למדרגה הבאה בנקודת השבירה. הערכים כאן הם הדסקטופ;
     שלוש המדרגות האחרות למטה, תחת "הסולם במסך צר". */
  --t-display:clamp(5rem,4.7vw + 1.75rem,6rem);  /* כותרת ראשית של עמוד — אחת לעמוד */
  --t-say:clamp(3.25rem,4.12vw + .4375rem,4.125rem);      /* כותרת סקשן ואמירה */
  --t-sub:clamp(1.625rem,.3vw + 1.4375rem,1.6875rem);       /* כותרת משנה, ציטוט קצר, מניין */
  --t-body:1.25rem;
  --t-body-sm:1rem;
  --t-label:.875rem;   /* 14px — רצפה לכל טקסט שנקרא, בכל רוחב מסך */
  --t-micro:.75rem;    /* 12px — מונים ואינדקסים בלבד, לא טקסט */

  /* הרווח האופקי בין תצלומים — רשתות וקרוסלות כאחד */
  --imgap:1.3vw;
  /* הרווח בין תצלום לשם שמתחתיו */
  --namegap:24px;

  --ground:#FBFBFC;
  --box:#E7E7EB;
  --box-2:#DDDDE3;
  --box-3:#D2D2DA;
  --box-4:#C7C7D1;
  --line:#CBCBD3;
  --line-soft:#E2E2E8;
  --ink:#1A1A1E;
  --ink-mid:#55555F;
  --ink-soft:#84848F;
  --sans:'FbEinstein','Segoe UI',sans-serif;
  --pad:clamp(4rem,4.12vw + 1.1875rem,4.875rem);   /* שוליים: 64 ב-1100 → 78 ב-1440 */
  /* גובה הכותרת. היא נדבקת למעלה, וכל אלמנט נדבק אחר מתייחס לערך הזה. */
  --head-h:67px;

  /* ============================================================
     הרשת של האתר
     שתים־עשרה עמודות ברוחב שווה, עם אותו רווח ביניהן. הרשת
     הזאת היא זו של הסוויטה בעמוד השמלה, והיא קבועה לכל האתר.
     --mod  רוחב עמודה אחת
     --cgap הרווח בין עמודות
     --step עמודה ועוד רווח — יחידת ההזחה
     הציר האנכי משתמש באותה יחידה: גבהים נמדדים בכפולות של
     --mod עם --cgap ביניהן, ולכן המודול ריבועי והרשת פועלת
     בשני הכיוונים. --rgap הוא רווח השורות כשהתוכן הוא שקובע
     את הגובה ולא המודול. */
  /* הרשת הסטנדרטית של האתר: 12 עמודות, מרזב 40, שוליים 80.
     --ggap ו---gpad הם מה שהמדריך מצייר, ולכן כל אלמנט
     שמתיישר לרשת חייב להשתמש בהם ולא בערכים משלו. */
  --ggap:2.5rem;
  /* שוליים אחד לכל העמוד. היו שני ערכים שונים — --pad להדר,
     לפוטר ולרוב הסקשנים, ו---gpad לרשת — והפער ביניהם הגיע
     ל-17px ברוחב דסקטופ, כך שחלק מהסקשנים ישבו שמאלה משאר
     העמוד. עכשיו שניהם אותו ערך, בכל רוחב מסך. */
  --gpad:var(--pad);
  --gcol:calc((100vw - 2 * var(--gpad) - 11 * var(--ggap)) / 12);

  /* הציר האנכי. עשרה פסים ממלאים בדיוק את גובה המסך פחות
     ההדר, ביחס 80:24 בין פס למרזב — בדיוק היחס שעבדנו איתו,
     רק שהוא נגזר מהחלון במקום להיות קבוע. לכן סקשן בגובה
     מסך הוא תמיד עשרה פסים, בכל מסך. */
  --vband:calc((100dvh - var(--head-h)) / 12.7);
  --vgap:calc(var(--vband) * .3);

  --cgap:var(--imgap);
  --rgap:clamp(48px,7vw,130px);
  --mod:calc((100vw - 2 * var(--pad) - 11 * var(--cgap)) / 12);
  --step:calc(var(--mod) + var(--cgap));
}

/* הרשת ככלי: כל אלמנט שצריך לשבת עליה מקבל את המחלקה הזאת,
   והילדים שלו נקבעים ב-grid-column. */
.grid12{
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:var(--cgap);row-gap:var(--rgap);
  align-items:start;
}
/* n מודולים לגובה, עם הרווחים שביניהם — כך שהציר האנכי
   מתיישר לאותה יחידה של הציר האופקי. */
.mod-1{height:calc(1 * var(--mod));}
.mod-2{height:calc(2 * var(--mod) + 1 * var(--cgap));}
.mod-3{height:calc(3 * var(--mod) + 2 * var(--cgap));}
.mod-4{height:calc(4 * var(--mod) + 3 * var(--cgap));}
.mod-5{height:calc(5 * var(--mod) + 4 * var(--cgap));}
.mod-6{height:calc(6 * var(--mod) + 5 * var(--cgap));}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#131317;
    --box:#26262E;
    --box-2:#2F2F38;
    --box-3:#383842;
    --box-4:#41414C;
    --line:#3A3A44;
    --line-soft:#26262E;
    --ink:#F0F0F3;
    --ink-mid:#A9A9B4;
    --ink-soft:#7C7C88;
  }
}
:root[data-theme="dark"]{
  --ground:#131317;
  --box:#26262E;
  --box-2:#2F2F38;
  --box-3:#383842;
  --box-4:#41414C;
  --line:#3A3A44;
  --line-soft:#26262E;
  --ink:#F0F0F3;
  --ink-mid:#A9A9B4;
  --ink-soft:#7C7C88;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
/* מקום לפס הגלילה נשמר תמיד. בלי זה עמוד ארוך מקבל פס
   ועמוד קצר לא, רוחב החלון משתנה בכמה-עשרה פיקסלים, וכל
   מה שמיושר לימין — כולל הנאבבר — קופץ במעבר בין עמודים. */
html{scrollbar-gutter:stable;}
/* שום אלמנט לא פותח גלילה אופקית. על body ולא על html: כשהוא על
   html, ה-overflow:hidden שהתפריט שם על body הפסיק לעבור לחלון,
   body הפך לקופסה גוזרת וההדר הנעוץ גלל החוצה עם התוכן. */
body{overflow-x:clip;}
/* הפוטר כהה, והגוף בהיר. כל פיקסל שנשאר מתחת לפוטר — בין אם
   מגלילת אינרציה ובין אם מאלמנט שעוד לא נחשף ומוזז כלפי מטה —
   נצבע בלבן. הרקע של html נצבע בצבע הפוטר, וכך אין פס. */
html{background:var(--frame);}
body{background:var(--ground);}

/* ---------- המרזב במסך צר ----------
   --ggap הוא 40px. רשת של שתים-עשרה עמודות היא אחד-עשר מרזבים,
   כלומר 440px של רווח בלבד — יותר מרוחב של טלפון. כל רשת כזו
   דחפה את העמוד הצידה. כאן המרזב נגזר מרוחב המסך. */
@media (max-width:1100px){ :root{--ggap:2rem;} }
@media (max-width:900px){  :root{--ggap:1.25rem;} }
@media (max-width:600px){  :root{--ggap:.625rem;} }

/* ---------- הרווח בין סקשנים ----------
   טוקן אחד לכל האתר. הוא נגזר מגובה המסך, ולכן בטלפון — מסך
   גבוה וצר — הוא נתן רווח של דסקטופ על תוכן קטן בהרבה.
   כאן הוא יורד בשתי מדרגות. */
:root{--sgap:clamp(8.75rem,14vh,12.5rem);}
@media (max-width:1100px){ :root{--sgap:clamp(6.25rem,11vh,8.125rem);} }
@media (max-width:900px){  :root{--sgap:clamp(4.5rem,8vh,5.5rem);} }
@media (max-width:600px){  :root{--sgap:clamp(3.5rem,7vh,4rem);} }
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:var(--t-body);
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
img{max-width:100%;display:block;}

/* ---------- placeholder ---------- */
.ph{background:var(--box);position:relative;}
.ph::after{
  content:attr(data-ph);
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:var(--t-micro);font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);text-align:center;padding:6px;
}
.ph-2{background:var(--box-2);}
.ph-3{background:var(--box-3);}

/* ---------- icons ---------- */
.ic{flex:0 0 auto;}
.ic-brand{fill:currentColor;}
.ic-line{stroke:currentColor;fill:none;}

/* ---------- type ---------- */
.h1{margin:0;font-weight:100;font-size:var(--t-display);letter-spacing:.02em;text-wrap:balance;}
.h2{margin:0;font-weight:100;font-size:var(--t-say);letter-spacing:.02em;text-wrap:balance;}
/* אמירה בסריף — כותרת סקשן. משותפת לכל העמודים. */
.say{
  margin:0;font-family:var(--serif);font-weight:300;
  font-size:var(--t-say);line-height:1.08;letter-spacing:.01em;
  color:var(--ink);text-wrap:balance;
}
/* כותרת שקטה — סריף קטן באותיות גדולות. אותה מדרגה של
   More from Épure בעמוד השמלה. */
.say-up{
  margin:0;font-family:var(--serif);font-weight:300;
  font-size:var(--t-sub);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);
}
.eyebrow{font-size:var(--t-body);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);}
.lead{margin:0;max-width:42ch;font-size:var(--t-body);line-height:1.65;color:var(--ink-mid);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 28px;border:1px solid var(--ink);
  font-size:var(--t-body);font-weight:400;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;background:transparent;cursor:pointer;
  font-family:var(--sans);
}
.btn-solid{background:var(--ink);color:var(--ground);}
.btn-sm{padding:10px 20px;}
/* אייקון בלבד, בלי מסגרת. לפעולה משנית שלא מתחרה ב-CTA */
.btn-plain{
  display:inline-flex;align-items:center;justify-content:center;
  padding:4px;border:0;background:transparent;cursor:pointer;
  color:var(--ink-mid);flex:0 0 auto;
}
.btn-plain:hover{color:var(--ink);}

/* ---------- header ---------- */
/* נוכחת תמיד למעלה, בכל גלילה ובכל עמוד */
.site-head{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px var(--pad);border-bottom:1px solid var(--line-soft);
  background:var(--ground);
}
.wordmark{height:22px;width:auto;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .wordmark{filter:invert(1);}
}
:root[data-theme="dark"] .wordmark{filter:invert(1);}
/* הרווח בין הפריטים נגזר מרוחב המסך: 34 בדסקטופ, יורד עד 20
   במסכים שבהם הנבבר המלא עוד מוצג (1101–1400). */
.site-nav{display:flex;gap:clamp(20px,2.4vw,34px);}
.site-nav a{
  font-size:var(--t-body);font-weight:400;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-mid);text-decoration:none;
}
.site-nav a[aria-current]{color:var(--ink);}
.burger{display:none;width:22px;height:14px;}

/* ---------- page intro ---------- */
.intro{
  padding:clamp(56px,8vw,110px) var(--pad) clamp(36px,4.6vw,64px);
  display:flex;flex-direction:column;gap:14px;align-items:flex-start;
}

/* ---------- section ---------- */
/* בלי פס מפריד — הריווח הוא מה שמפריד בין סקשן לסקשן */
.sec{padding:clamp(72px,10vw,150px) var(--pad);}
.sec-head{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-bottom:clamp(36px,4.6vw,64px);flex-wrap:wrap;row-gap:14px;
}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);}
.foot-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr .8fr;
  gap:clamp(26px,3.4vw,50px);
  padding:clamp(44px,6vw,76px) var(--pad) clamp(34px,4vw,54px);
}
/* --logo-inset מקזז את השוליים השקופים שיש בתוך קובץ הלוגו עצמו.
   כשיגיע הלוגו הווקטורי הערך חוזר ל-0. */
:root{--logo-inset:0px;}
.foot-brand{display:flex;flex-direction:column;gap:18px;align-items:flex-start;}
.wordmark-foot{height:26px;margin-inline-start:calc(var(--logo-inset) * -1);}
.foot-brand p{margin:0;max-width:34ch;font-size:var(--t-body);line-height:1.6;color:var(--ink-soft);}
.foot-col{display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.foot-col b{
  font-size:var(--t-body);font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);margin-bottom:6px;
}
.foot-col a{
  display:flex;align-items:center;gap:10px;
  font-size:var(--t-body);color:var(--ink-mid);text-decoration:none;
}
.foot-social{display:flex;gap:18px;margin-top:2px;}
.foot-social a{color:var(--ink-mid);}
.foot-bar{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  padding:20px var(--pad);border-top:1px solid var(--line-soft);
}
.foot-bar span{font-size:var(--t-body);color:var(--ink-soft);}
.foot-legal{display:flex;flex-wrap:wrap;gap:22px;}
.foot-legal a{font-size:var(--t-body);color:var(--ink-soft);text-decoration:none;}

/* ---------- floating whatsapp ---------- */
.wa{
  position:fixed;right:22px;bottom:22px;z-index:40;
  width:56px;height:56px;border-radius:50%;
  background:var(--ground);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);text-decoration:none;
  box-shadow:0 2px 14px rgba(0,0,0,.07);
}
.wa-ic{fill:currentColor;}

/* ---------- breakpoints ---------- */
/* שישה פריטים בריווח .3em לא נכנסים מתחת ל-1100 בלי למעוך
   את הלוגו — ולכן הטאבלט מקבל את תפריט המובייל. */
@media (max-width:1100px){
  .site-nav{display:none;}
  .burger{display:block;}
}
@media (max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .foot-grid{grid-template-columns:1fr;}
  .wa{right:14px;bottom:14px;width:50px;height:50px;}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;}
}

/* רשת השמלות — משותפת לקולקציות, לעמוד השמלה ולדף הבית */
.grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--imgap);
}
.card{display:flex;flex-direction:column;gap:var(--namegap);text-decoration:none;color:inherit;}
.card-media{
  position:relative;aspect-ratio:3/4;background:var(--box);
  overflow:hidden;touch-action:pan-y;
}
.card-media[data-shade="1"]{background:var(--box-2);}
.card-media[data-shade="2"]{background:var(--box-3);}
.card-media[data-shade="3"]{background:var(--box-4);}
.card-media .frameno{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:var(--t-micro);font-weight:500;letter-spacing:.16em;color:var(--ink-soft);
}
/* חצים בהאבר, בדסקטופ בלבד */
.card-nav{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 10px;pointer-events:none;
  opacity:0;transition:opacity .16s ease;
}
.card-media:hover .card-nav,
.card-media:focus-within .card-nav{opacity:1;}
.card-nav button{
  pointer-events:auto;
  width:34px;height:34px;padding:0;border-radius:50%;
  border:1px solid var(--line);background:var(--ground);color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.card-nav button[disabled]{opacity:.3;cursor:default;}
@media (hover:none){ .card-nav{display:none;} }

/* נקודות מצב */
.dots{
  position:absolute;left:0;right:0;bottom:10px;z-index:3;
  display:flex;justify-content:center;gap:5px;
  opacity:0;transition:opacity .18s ease;pointer-events:none;
}
.card-media:hover .dots,.card-media.touched .dots{opacity:1;}
@media (hover:none){ .dots{opacity:1;} }
.dots i{width:5px;height:5px;border-radius:50%;background:var(--ink-soft);opacity:.35;}
.dots i.on{opacity:1;background:var(--ink);}
.card-name{font-size:var(--t-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);}
.card-sub{font-size:var(--t-body);color:var(--ink-soft);margin-top:-6px;}

/* בלוק תוכן בגודל כרטיס שמלה.
   הכותרת מתחת לתמונה כמו בכל הכרטיסים, והאמירה יושבת בגדול בתוך התמונה.
   אותה שפה בדיוק לשני הבלוקים. */
.tile{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;}
.tile-media{position:relative;aspect-ratio:3/4;overflow:hidden;}
.tile-media .ph{position:absolute;inset:0;}
.tile-say{
  position:absolute;z-index:1;
  left:clamp(16px,1.6vw,24px);right:clamp(16px,1.6vw,24px);
  bottom:clamp(16px,1.6vw,24px);
  font-weight:100;font-size:var(--t-say);line-height:1.05;
  letter-spacing:.01em;color:var(--ink);text-wrap:balance;
}
.tile b{
  display:block;font-size:var(--t-body);font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);
}

@media (max-width:1100px){ .grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:900px){  .grid{grid-template-columns:repeat(2,1fr);} }


/* ---------- dress ---------- */
/* בנטו אחד שכולל גם את התמונות וגם את הטקסט, ונכנס במסך בלי גלילה.
   הגובה נגזר מהחלון פחות הכותרת הדביקה, ולכן התמונות ממלאות
   את המסגרות שלהן (object-fit: cover בבנייה). */
.dress{
  --dress-pad:clamp(18px,2.6vw,34px);
  /* רווח אחד לכל הבנטו — בין התמונות, בין התמונות לטקסט, ובין הטקסט לתמונה שמתחתיו */
  --g:var(--imgap);
  display:grid;
  grid-template-columns:1.36fr .88fr minmax(360px, 1.3fr);
  grid-template-rows:1fr 1fr;
  gap:var(--g);
  height:calc(100vh - var(--head-h) - (var(--dress-pad) * 2));
  min-height:520px;
  padding:var(--dress-pad) var(--pad);
}
.dress .ph{min-height:0;min-width:0;}
/* התמונה הגדולה משמאל, הטקסט בעמודה השלישית, והזוג ביניהם */
.g-key{grid-column:1;grid-row:1 / span 2;overflow:hidden;touch-action:pan-y;}
/* פג'יניישן על התמונה הגדולה — אותה שפה כמו בכרטיסי השמלה */
.g-key[data-shade="1"]{background:var(--box-2);}
.g-key[data-shade="2"]{background:var(--box-3);}
.g-key[data-shade="3"]{background:var(--box-4);}
.g-key::after{content:attr(data-ph) " " attr(data-n);}
.g-key .card-nav{padding:0 18px;}
.g-key .card-nav button{width:40px;height:40px;}
.g-key:hover .card-nav,.g-key:focus-within .card-nav{opacity:1;}
.g-key .dots{bottom:18px;opacity:1;}
.g-key .dots i{width:6px;height:6px;}

/* תא הטקסט — חלק מהבנטו, בלי מסגרת ובלי רקע */
.info{
  grid-column:3;grid-row:1 / span 2;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:20px;min-width:0;
  /* אוויר בין קיר התמונות לטקסט — על הטקסט בלבד, לא על התמונה.
     כך התמונה שמתחת יושבת על אותו רווח כמו כל שאר הבנטו. */
  --text-in:clamp(22px,3.4vw,68px);
}
.info-head,.info .lead,.actions{margin-left:var(--text-in);}
.info-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;width:calc(100% - var(--text-in));}
.info-title{display:flex;flex-direction:column;gap:20px;}
.info .lead{max-width:38ch;}
/* הכפתורים ישר מתחת לטקסט, ומתחתיהם תמונה שממלאת את שארית העמודה */
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;}
.actions .btn{padding:11px 22px;letter-spacing:.08em;}
.info-shot{flex:1;min-height:0;width:100%;margin-top:clamp(26px,3.4vw,56px);}

.more{padding:clamp(72px,10vw,150px) var(--pad);}
/* גליל: שלושה כרטיסים במסך, והרביעי מבצבץ כדי שיהיה ברור שאפשר לגלול */
.more .grid{
  /* אותו רווח בין תצלומים של כל האתר */
  --sg:var(--imgap);
  display:flex;gap:var(--sg);
  overflow-x:auto;scroll-snap-type:x proximity;
  margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
  scroll-padding-inline:var(--pad);padding-bottom:10px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch;
}
.more .grid .card{flex:0 0 calc((100% - 2 * var(--sg)) / 2.7);scroll-snap-align:start;}
@media (max-width:600px){ .more .grid .card{flex-basis:72vw;} }

@media (max-width:1100px){
  .dress{grid-template-columns:1.4fr 1fr;grid-template-rows:auto auto auto;height:auto;min-height:0;}
  .g-key{grid-column:1;grid-row:1 / span 2;aspect-ratio:3/4;}
  .dress .ph{aspect-ratio:4/5;}
  .info{grid-column:1 / -1;grid-row:auto;padding:clamp(14px,2vw,22px) 0 0;--text-in:0px;}
  .actions{margin-top:6px;}
  .info-shot{flex:none;aspect-ratio:16/9;}
}
@media (max-width:900px){
  .dress{grid-template-columns:1fr;}
  .g-key{grid-column:1;grid-row:auto;aspect-ratio:4/5;}
  .info{grid-column:1;}
}

/* ============================================================
   LOUVRE — real photography layer
   נספח בלבד. לא משנה אף חוק קיים במעטפת, רק מוסיף מעליו.
   ============================================================ */

/* התמונה הראשית — ארבע תמונות שמתחלפות בהצלבה.
   position:relative קריטי: שכבת התמונות ממוקמת יחסית אליו, לא לחלון. */
.g-key{position:relative;min-height:0;min-width:0;overflow:hidden;}
.g-key::after{content:none;}

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

@media (max-width:1100px){  }

/* התמונה שמתחת לטקסט */

/* כרטיסי הקרוסלה */
/* יחס הצילום עצמו — כך השמלה המלאה נכנסת בלי שהראש או השובל ייחתכו */
.card-media{background:var(--frame);aspect-ratio:2/3;}
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* בטאבלט ומטה הבנטו מתפרק לגובה אוטומטי. המסגרות הקטנות
   קיבלו את היחס שלהן מ-.dress .ph, ועכשיו הן .thumb — אז מחזירים אותו,
   אחרת הן קורסות לגובה אפס. */
@media (max-width:1100px){
  .thumb{aspect-ratio:4/5;}
}

@media (prefers-reduced-motion: reduce){
  
}

/* ============================================================
   מבנה חדש: סקשן ראשון — טקסט משמאל ותמונה אחת גדולה מימין.
   סקשן שני — סוויטה שהסרטון הוא העיקר בה.
   ============================================================ */
/* טקסט משמאל, תמונה מימין — נקבע במפורש ובעדיפות גבוהה,
   כדי שכללי הבנטו הישנים לא ישנו את הסדר באף רוחב מסך. */
section.dress{
  grid-template-columns:minmax(330px,.95fr) 1.1fr !important;
  grid-template-rows:1fr !important;
}
section.dress > .info{grid-column:1 !important;grid-row:1 !important;--text-in:0px;}
section.dress > .g-key{grid-column:2 !important;grid-row:1 !important;}

/* גובה מסך מלא: גובה החלון פחות ההדר. הריפוד נכלל בגובה
   (box-sizing: border-box), כך שהסקשן נגמר בדיוק בתחתית המסך. */
:root{--head-h:70px;}
@media (min-width:901px){
  section.dress{
    height:calc(100dvh - var(--head-h)) !important;
    min-height:520px;
    /* נשימה קטנה מתחת לנבבר — לא צמוד לגמרי ולא ריפוד מלא */
    padding-block:clamp(14px,2vh,28px) var(--dress-pad) !important;
  }
}

/* במסך צר הבנטו מתפרק לטור אחד — התצלום למעלה והטקסט מתחתיו,
   כמו בכל שאר העמודים: מה שמדבר ראשון זו השמלה ולא השם שלה. */
@media (max-width:900px){
  section.dress{
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto !important;
    height:auto !important;min-height:0;
  }
  section.dress > .g-key{grid-column:1 !important;grid-row:1 !important;aspect-ratio:2/3;}
  section.dress > .info{grid-column:1 !important;grid-row:2 !important;
    justify-content:flex-start;}
}
/* הטקסט יושב בתחתית העמודה, בקו אחד עם תחתית התמונה */
section.dress > .info{justify-content:flex-end;}
.dress .info-text{
  flex:none;height:auto;margin-bottom:0;
  justify-content:flex-end;
  max-width:44ch;
  padding-bottom:clamp(4px,1vh,16px);
}
.g-key img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---------- הסוויטה ---------- */
/* הסרטון תופס עמודה שלמה בגובה מלא, וארבעה צילומים מסביבו.
   גובה הסקשן נגזר מיחס הסרטון, וכל שאר התאים מתיישרים אליו. */
.suite{
  --g:var(--imgap);
  display:grid;
  /* רשת של 12 עמודות. לא כל תא מלא — העמודות הריקות הן הוייטספייס,
     והסקשן ארוך מגובה המסך כדי שהוא ייקרא כמסע ולא כלוח אחד. */
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:auto auto auto;
  --cgap:var(--imgap);
  column-gap:var(--cgap);
  row-gap:clamp(48px,7vw,130px);
  align-items:start;
  padding:clamp(100px,13vw,220px) var(--pad);
}
.s-film{
  grid-column:1 / 8;grid-row:1 / 3;
  position:relative;margin:0;overflow:hidden;
  background:var(--frame);aspect-ratio:4/5;
}
/* כל צילום בגודל וביחס משלו, ולא ארבעה תאים זהים */
.suite .s-img:nth-of-type(1){grid-column:9 / 13;grid-row:1;aspect-ratio:3/4;}
.suite .s-img:nth-of-type(2){grid-column:2 / 7; grid-row:3;aspect-ratio:3/4;}
.suite .s-img:nth-of-type(3){grid-column:8 / 12;grid-row:3;align-self:end;
  /* גובה 2:3 פחות מודול אחד. המודול = רוחב עמודה,
     והאחוז ב-padding נמדד מול רוחב ארבע העמודות של התא. */
  aspect-ratio:auto;height:auto;padding-bottom:calc(125% + 0.75 * var(--cgap));}


/* הציטוט יושב בשורה השנייה, אחרי צילום — לא בראש הסקשן */
.s-quote{
  grid-column:9 / 13;grid-row:2;
  margin:0;align-self:center;
  display:flex;flex-direction:column;gap:clamp(18px,2vw,28px);
}
/* ה-viewBox חתוך לגבולות הגליף, כך שהרווח שרואים מעליו
   שווה בדיוק לרווח שמתחת לכפתור. */
.s-quote-mark{display:block;}
.s-quote-mark{color:var(--ink);flex:0 0 auto;align-self:flex-start;}
/* אותו גודל של כותרת הסקשן השני, אבל אותיות רגילות —
   משפט שלם ברישיות מרווחות קשה לקריאה. */
.s-quote p{
  margin:0;font-family:var(--serif);font-weight:300;
  font-size:var(--t-sub);line-height:1.3;letter-spacing:.01em;
  text-transform:none;
  color:var(--ink);text-wrap:pretty;
}
.s-quote footer{margin:0;}
.s-quote .btn{padding:14px 20px !important;}
.s-film video{width:100%;height:100%;object-fit:cover;display:block;}

/* הצילומים לא תורמים גובה משל עצמם — הם ממוקמים מוחלט בתוך התא.
   כך הגובה של כל הבנטו נקבע אך ורק על ידי הסרטון, ושתי השורות
   מתחלקות בו שווה בשווה. */
.s-img{position:relative;overflow:hidden;background:var(--frame);min-width:0;min-height:0;}

/* הסוויטה נכנסת במסך: הגובה נגזר מהחלון ולא מיחס הסרטון.
   הסרטון והצילומים ממלאים את מה שיש (cover), ולכן אין כאן
   שום יחס קבוע שיכול לדחוף את הסקשן מעבר לגובה המסך. */

.s-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}

@media (max-width:1100px){
  .suite{grid-template-columns:repeat(2,1fr);grid-template-rows:auto;
    row-gap:clamp(30px,5vw,60px);}
  .s-film{grid-column:1 / -1;grid-row:auto;aspect-ratio:4/5;}
  .suite .s-img:nth-of-type(n){grid-column:auto;grid-row:auto;
    aspect-ratio:3/4;margin-top:0;margin-bottom:0;padding-bottom:0;align-self:auto;}
  .s-quote{grid-column:1 / -1;grid-row:auto;align-self:auto;}
}
@media (max-width:900px){
  /* גם במובייל זה בנטו. שתים-עשרה עמודות נותנות שליטה עדינה,
     וכל צילום נוגע בקצה אחר של המסך ברוחב אחר — זה מה שיוצר קצב.
     האחרון מוזח משני הצדדים, וזה מה שסוגר. */
  .suite{
    grid-template-columns:repeat(12,1fr);
    grid-template-rows:auto;
    row-gap:clamp(44px,12vw,86px);
    column-gap:0;
  }
  .s-film{grid-column:1 / -1;aspect-ratio:4/5;}
  .s-quote{
    grid-column:1 / -1;
    padding-inline:var(--pad);
    padding-block:clamp(6px,3vw,22px);
  }
  /* צר משמאל, נוגע בקצה */
  .suite .s-img:nth-of-type(1){grid-column:1 / 9; aspect-ratio:3/4;}
  /* רחב מימין, נוגע בקצה */
  .suite .s-img:nth-of-type(2){grid-column:4 / 13;aspect-ratio:4/5;}
  /* מוזח משני הצדדים — הסוגר */
  .suite .s-img:nth-of-type(3){grid-column:2 / 11;aspect-ratio:3/4;}
}

/* ---------- התמונה הראשית ---------- */
/* כל ארבעת המקורות הם הפריים המלא ב-2:3, וגם התא כמעט 2:3.
   cover ממלא את התא קצה אל קצה — ההפרש כה קטן שלא נחתך דבר מהשמלה,
   ובניגוד ל-contain הוא לא משאיר פסים כשהרשת מותחת את התא. */

/* הפס הדק שנשאר מעל ומתחת לתמונה נצבע ברקע העמוד, לא באפור
   של הפלייסהולדר — כך הוא נעלם לתוך הדף. */
/* שחור שאינו 000 — משמש כמסגרת מאחורי כל תמונה, במקום האפור של הפלייסהולדר */
:root{
  --frame:#141418;
  /* אין אפור: גם הטקסט המשני וגם הקווים הם שחור מרוכך, לא אפור */
  --ink:#121215;
  --ink-mid:#26262A;
  --ink-soft:#3D3D42;
  --line:#D6D6D8;
  --line-soft:#E6E6E8;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F4F4F5; --ink-mid:#D6D6D9; --ink-soft:#AFAFB4;
    --line:#34343A; --line-soft:#232328;
  }
}
:root[data-theme="dark"]{
  --ink:#F4F4F5; --ink-mid:#D6D6D9; --ink-soft:#AFAFB4;
  --line:#34343A; --line-soft:#232328;
}
.g-key{background:var(--frame);}

/* בטאבלט ומובייל המסגרת מקבלת את יחס הצילום עצמו */
@media (max-width:1100px){ .g-key{aspect-ratio:2/3;align-self:start;} }
@media (max-width:900px){  .g-key{aspect-ratio:2/3;align-self:start;} }

/* אזורי ניווט: חצי שמאלי וחצי ימני של התמונה. שקופים לגמרי —
   מה שמסמן אותם זה הסמן עצמו, שהופך לחץ. */

/* בקצה הרצף האזור עדיין מציג חץ, רק מעומעם */

@media (hover:none){  }

/* ---------- וייטספייס ---------- */
/* --pad הוא השוליים של כל העמוד: הדר, בנטו, סקשנים ופוטר נשענים עליו. */
:root{--pad:clamp(24px,5.2vw,78px);}

/* --g הוא הרווח היחיד בבנטו: בין התמונות, בין התמונות לטקסט,
   ובין הטקסט לתמונה שמתחתיו. --dress-pad הוא האוויר סביב הבנטו כולו. */
.dress{
  /* אותו ערך בדיוק כמו --sg של הקרוסלה, כדי שהרווחים בעמוד יהיו אחד */
  --g:var(--imgap);
  --dress-pad:clamp(26px,3.6vw,52px);
}
/* אוויר בין קיר התמונות לעמודת הטקסט, ובין הטקסט לתמונה שמתחתיו */
.info{gap:26px;--text-in:clamp(26px,4.2vw,88px);}
/* התמונה שמתחת לטקסט מיושרת לשורה השנייה של הבנטו:
   גובה של חצי מהבנטו פחות חצי מהרווח, ונדחפת לתחתית.
   כך היא מתחילה ונגמרת בדיוק כמו המסגרת שלצידה. */

/* ---------- קונטיינר הטקסט ---------- */
/* הטקסט לא מרוכז בעזרת מרווחים מחושבים אלא יושב בקונטיינר משלו.
   הקונטיינר תופס בדיוק את מה שנשאר מעל התמונה, וממרכז את תוכנו.
   לכן זה מחזיק בכל גובה חלון, בכל רוחב ובכל אורך טקסט. */
.info{gap:0;}
.info-text{
  flex:1;min-height:0;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:clamp(32px,2.8vw,44px);
  margin-inline-start:var(--text-in);
  width:calc(100% - var(--text-in));
}
/* ההזחה עברה לקונטיינר — הילדים כבר לא מזיחים בעצמם */
.info-head,.info .lead,.info .actions{margin-inline-start:0;}
.info-head{width:100%;}
.actions{margin-top:0;}

/* הסקשן השני והפוטר מקבלים אותו יחס של אוויר */
.more{padding:clamp(100px,12vw,200px) var(--pad);}
.site-foot .foot-grid{padding:clamp(60px,7vw,100px) var(--pad) clamp(44px,5vw,70px);}
.site-head{padding:26px var(--pad);}

/* ============================================================
   טיפוגרפיה — כיוון 05
   Cormorant Garamond לשמות, Jost לכל השאר.
   ============================================================ */
:root{
  --sans:'Jost','Segoe UI',system-ui,sans-serif;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
}
body{font-family:var(--sans);font-weight:300;}

/* השמות בסריף — Cormorant רץ קטן, ולכן גדל משמעותית מול הווירפריים */
.h1,.h2{font-family:var(--serif);font-weight:300;letter-spacing:.01em;}
/* במובייל הכותרות נגזרות מרוחב המסך בשיעור גבוה יותר, אחרת הן קטנות מדי */
/* כותרת העמוד במסך צר. התקרה חסומה על ידי השורה הארוכה ביותר
   באתר — "when you put it on" — שמעבר לכ-54px כבר נשברת. */
/* ---------- הסולם במסך צר ----------
   הכותרות ירדו מההתחלה, אבל הגוף, התוויות והטקסט הקטן היו
   זהים בדיוק בכל רוחב — 20px גוף על טור של טלפון נותן מעט
   מאוד תווים בשורה, ו-14px עם ריווח .2em תופס רוחב כמו משפט.
   כאן כל המדרגות יורדות יחד, כך שהיחסים ביניהן נשמרים. */
/* לפטופ 901–1100 */
@media (max-width:1100px){
  :root{
    --t-display:clamp(4rem,7vw + .0625rem,4.875rem);
    --t-say:clamp(2.625rem,4vw + .375rem,3.125rem);
    --t-sub:clamp(1.4375rem,1vw + .875rem,1.5625rem);
    --t-body:1.1875rem;
    --t-body-sm:1rem;
    --t-label:.875rem;
    --t-micro:.75rem;
    --pad:3.25rem;
  }
}
/* טאבלט 601–900 */
@media (max-width:900px){
  :root{
    --t-display:clamp(3.5rem,2vw + 2.75rem,3.875rem);
    --t-say:clamp(2.25rem,1.33vw + 1.75rem,2.5rem);
    --t-sub:clamp(1.25rem,.67vw + 1rem,1.375rem);
    --t-body:1.125rem;
    --t-body-sm:.9375rem;
    --t-label:.875rem;
    --t-micro:.75rem;
    --pad:2.25rem;
  }
}
/* מובייל ≤600 */
@media (max-width:600px){
  :root{
    --t-display:3rem;
    --t-say:1.875rem;
    --t-sub:1.1875rem;
    --t-body:1.0625rem;
    --t-body-sm:.875rem;
    --t-label:.875rem;
    --t-micro:.75rem;
    --pad:1.25rem;
  }
}

/* סימן הציטוט נגזר מהטקסט שמתחתיו ולא מגודל קבוע, ולכן הוא
   מתכווץ איתו. ה-SVG נכתב 60×37 במארקאפ — כאן הוא נשלט מה-CSS. */
.s-quote-mark{width:clamp(34px,4.2vw,60px);height:auto;}
@media (max-width:600px){
  .s-quote-mark{width:30px;}
}
/* הציטוט נקרא כהמשך של התצלום שמעליו. במסך צר הרווח בין הסימן
   לטקסט היה 28px — כמעט שורה שלמה — והציטוט נראה כבלוק מנותק. */
@media (max-width:900px){
  .s-quote{gap:clamp(8px,1.6vw,14px);}
  .bride-note{gap:clamp(6px,1.2vw,10px);margin-top:clamp(14px,2.6vw,22px);}
}
/* כותרת העמוד ממורכזת מרגע שהעמוד הופך לטור אחד. בדסקטופ היא
   נשענת על הקו השמאלי של הגריד, ובטור אחד אין לה מול מה
   להתיישר. justify-self מכווץ את התיבה לרוחב התוכן, ולכן
   בלעדיו text-align לא היה עושה כלום. */
@media (max-width:900px){
  .h1{text-align:center;justify-self:stretch;width:100%;}
}
.info .h1{line-height:1.02;}
.more .h2{
  font-family:var(--serif);font-weight:300;
  font-size:var(--t-sub);letter-spacing:.01em;text-transform:none;
}

/* כל השאר ב-Jost */
.site-nav a{
  font-size:var(--t-label);font-weight:400;letter-spacing:.12em;
  color:var(--ink);transition:opacity .22s ease;
}
/* האבר: הבהרה בלבד. בלי קו ובלי תנועה. */
.site-nav a:hover{opacity:.45;}
/* העמוד הנוכחי מסומן במשקל ולא בצבע או בקו —
   הכל כאן בלבן, ומשקל הוא ההבדל היחיד שלא מוסיף אלמנט. */
/* העמוד הנוכחי מסומן במשקל 500 ולא 600 — הדגשה עדינה
   שמספיקה כדי להבדיל בלי לצעוק. data-label יושב במארקאפ
   עצמו ולא נוסף בסקריפט, אחרת הרוחב השמור מגיע אחרי
   הרינדור הראשון והנאבבר קופץ בכל מעבר בין עמודים. */
.site-nav a{display:inline-block;}
.site-nav a::after{
  content:attr(data-label);
  display:block;height:0;overflow:hidden;visibility:hidden;
  white-space:nowrap;font-weight:500;
}
.site-nav a[aria-current]{font-weight:500;}
.eyebrow{font-weight:500;letter-spacing:.2em;}
.lead{font-size:var(--t-body);font-weight:300;letter-spacing:.01em;line-height:1.72;}
/* גודל אחיד לכל כפתור בעמוד — אין כפתור "קטן" וכפתור "גדול".
   הריפוד והריווח מוגדרים כאן במפורש, כדי שכללי הבנטו הישנים
   לא ישנו אותם בשורת הפעולות. */
.btn .ic-line{stroke:currentColor;fill:none;}
.btn{
  font-size:var(--t-label);font-weight:400;letter-spacing:.12em !important;
  padding:14px 28px !important;gap:10px;
}
.btn-sm{font-size:var(--t-label);}
/* שלושת הכפתורים בשורה אחת, בלי גלישה */
.actions{gap:10px;flex-wrap:nowrap;}
.actions .btn{white-space:nowrap;padding:14px 20px !important;}
@media (max-width:1100px){ .actions .btn{padding:12px 14px !important;letter-spacing:.08em !important;} }
/* במובייל הכפתורים ממלאים את השורה ולא בולטים ממנה */
@media (max-width:600px){ .actions{width:100%;} .actions .btn{flex:1 1 auto;min-width:0;text-align:center;} }
/* שם השמלה בקרוסלה נכתב כמו שם השמלה בעמוד — אותו סריף, אותו משקל,
   אותיות רגילות. רק קטן יותר, כי זו הפניה ולא הכותרת. */
.card-name{
  font-family:var(--serif);
  font-size:var(--t-body);
  font-weight:300;letter-spacing:.01em;text-transform:none;
  color:var(--ink);
}
.card-sub{font-size:var(--t-label);}
.card-sub,.foot-brand p,.foot-col a,.foot-bar span,.foot-legal a{font-weight:300;}
.foot-col b{font-weight:400;letter-spacing:.22em;}

/* ---------- וואטסאפ בנבבר ---------- */
/* היה גם ככפתור בשורת הפעולות וגם כבועה צפה בפינה — שניהם ירדו.
   כאן הוא ערוץ יצירת קשר ולא פעולה, ולכן יושב באזור השירות של העמוד. */
.head-right{
  display:flex;align-items:center;
  gap:clamp(20px,2.6vw,38px);
}
.head-wa{
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);text-decoration:none;
  transition:opacity .22s ease;flex:0 0 auto;
}
.head-wa:hover{opacity:.45;}

/* ---------- חשיפה בגלילה ---------- */
/* התכונה נוספת ב-JS, כך שאם הסקריפט לא רץ התוכן פשוט גלוי מלכתחילה
   ולא נשאר שקוף לנצח. */
/* שפת החשיפה של האתר, מוגדרת פעם אחת. הדגם הוא עמוד השמלה:
   תזוזה קצרה כלפי מעלה, דהייה ארוכה, והאטה שנגמרת כמעט בלי
   שמרגישים. הטוקנים כאן הם מה שכל עמוד משתמש בו. */
:root{
  --rev-y:28px;
  --rev-dur:2.2s;
  --rev-ease:cubic-bezier(.16,.8,.24,1);
}
[data-reveal]{
  opacity:0;transform:translateY(var(--rev-y));
  transition:opacity var(--rev-dur) var(--rev-ease),
             transform var(--rev-dur) var(--rev-ease);
  will-change:opacity, transform;
}
[data-reveal].in{opacity:1;transform:none;}

/* הסקשן הראשון של העמוד גלוי כבר בטעינה, ולכן תזוזה כלפי מעלה
   נראית שם כמו קפיצה ולא כמו חשיפה. שם זו דהייה בלבד. */
section.dress [data-reveal],
.hero [data-reveal]{transform:none;}

/* הפוטר נחשף כיחידה אחת, ולכן קצר יותר */
.site-foot [data-reveal]{transition-duration:1s;}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none;}
}

/* ---------- מובייל ---------- */
/* המבורגר: שני קווי שיער, באותה שפה של הקווים בעמוד */
.burger{
  display:none;width:24px;height:14px;padding:0;border:0;background:transparent;
  flex-direction:column;justify-content:center;gap:6px;cursor:pointer;
  color:var(--ink);
}
.burger span{display:block;height:1px;width:100%;background:currentColor;}
/* אזור הלחיצה 44px לפחות — הקווים נשארים באותו גודל ובאותו מקום */
.burger{box-sizing:content-box;padding:15px 10px;margin:-15px -10px;}
.burger:hover{opacity:.45;}
@media (max-width:1100px){ .burger{display:flex;} }

/* התפריט עצמו — שכבה מלאה מתחת לנבבר */
.mobile-menu{
  /* מתחיל מראש המסך ומתחת להדר (z 50) — כך אין רווח ביניהם גם
     כשגובה ההדר שונה מ---head-h */
  position:fixed;left:0;right:0;top:0;bottom:0;z-index:45;
  background:var(--ground);
  display:flex;align-items:flex-start;
  padding:calc(var(--head-h) + 11px + clamp(28px,6vh,60px)) var(--pad) clamp(28px,6vh,60px);
  overflow-y:auto;
}
/* display:flex שלמעלה גובר על תכונת hidden של הדפדפן,
   ולכן צריך לבטל אותו במפורש כשהתפריט סגור. */
.mobile-menu[hidden]{display:none;}
.mobile-menu nav{display:flex;flex-direction:column;gap:clamp(18px,3.4vh,30px);width:100%;}
.mobile-menu a{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(26px,7vw,38px);letter-spacing:.01em;
  color:var(--ink);text-decoration:none;
  transition:opacity .22s ease;
}
.mobile-menu a:hover{opacity:.45;}
body.menu-open{overflow:hidden;}

@media (max-width:600px){
  /* התמונות עד קצה המסך — הריפוד עובר לטקסט בלבד */
  section.dress{padding-inline:0 !important;}
  section.dress > .info{padding-inline:var(--pad);}
  .suite{padding-inline:0;}
  .suite .s-img,.suite .s-film{border-radius:0;}

  /* מרווח אחיד בין כל הסקשנים. הרווח שבין הראשון לשני נגזר משני
     ריפודים שנפגשים, ולכן כל סקשן מקבל חצי ממנו משני צדדיו — וכך
     כל המעברים בעמוד יוצאים זהים. */
  :root{--sec-gap:clamp(52px,13vw,84px);}
  section.dress{padding-bottom:var(--sec-gap) !important;}
  .suite{padding-block:var(--sec-gap);}
  .more{padding-block:var(--sec-gap);}
  .site-foot{margin-top:var(--sec-gap);}

  /* האייברו יורד בגודל כדי שלא יתחרה בשם השמלה.
     בדסקטופ ההפרש בגדלים עושה את העבודה, במובייל השם מתכווץ והם מתקרבים. */
  .eyebrow{font-size:var(--t-label);letter-spacing:.22em;}

  /* כל כפתור בעמוד באותה מידה גם במובייל — שורת הפעולות,
     הכפתור בציטוט והכפתור בקרוסלה. */
  .actions{gap:8px;}
  .btn,
  .s-quote .btn,
  .more .sec-head .btn{
    padding:10px 14px !important;
    font-size:var(--t-label);letter-spacing:.06em !important;gap:6px;
  }
  .btn .ic{width:18px;height:18px;}

  /* הכותרת והכפתור נשארים באותה שורה גם ברוחב טלפון.
     הפג'יניישן יורד לשורה משלו מתחתיהם. */
  .more .sec-head{flex-wrap:wrap;gap:12px;align-items:center;}
  .more .h2{flex:0 1 auto;}
  .more .sec-head .btn{flex:0 0 auto;margin-inline-start:auto;}
  .more-nav{order:3;flex:1 0 100%;justify-content:flex-start;transform:none;margin-top:4px;}
  /* הקווים נמתחים על כל רוחב השורה ומתחלקים בו שווה בשווה */
  .more-dots{width:100%;flex-wrap:nowrap;gap:6px;}
  .more-dots button{flex:1 1 0;width:auto;min-width:0;}
}

/* ---------- הפרדה בין חלקים ---------- */
/* בלי קווים. מה שמפריד הוא אוויר, ובפוטר — קרקע אחרת לגמרי. */
/* בלי קו מתחת לנבבר — מה שמפריד הוא האוויר */
.site-head{border-bottom:0;}

.site-foot{
  border-top:0;
  background:var(--frame);
  color:#F2F2F3;
  margin-top:clamp(40px,5vw,90px);
}
.site-foot .foot-brand p{color:#FFFFFF;}
.site-foot .foot-col b{color:#8E8E96;}
.site-foot .foot-col a{color:#DCDCE0;}
/* על הקרקע הכהה הבהרה עובדת הפוך: הורדת שקיפות רק מעמעמת.
   כאן ההאבר מבהיר את הטקסט ללבן מלא. */
.site-foot .foot-col a:hover,
.site-foot .foot-social a:hover,
.site-foot .foot-legal a:hover,
.site-foot .lockup:hover{opacity:1;color:#fff;}
.site-foot .foot-col a svg{color:#DCDCE0;}
.site-foot .foot-social a{color:#DCDCE0;}
.site-foot .lockup img{filter:invert(1);}
.site-foot .foot-bar{border-top:0;padding-top:0;}
.site-foot .foot-bar span,.site-foot .foot-legal a{color:#8E8E96;}

/* ---------- פג'יניישן ---------- */
/* לא נקודות — קווי שיער. אותה שפה של הקווים הדקים בשאר העמוד. */

/* אותה שפה של הפג'יניישן בסקשן השני — קווים ארוכים בעובי שניים.
   כאן בלבן, כי הם יושבים על הצילום. */

@media (prefers-reduced-motion: reduce){  }

/* ---------- מותג: אמבלם + וורדמארק ---------- */
.lockup{display:flex;align-items:center;gap:12px;text-decoration:none;}
.lockup .emblem{height:30px;width:auto;}
.lockup .word{height:16px;width:auto;}
/* בפוטר האמבלם לבדו, גדול — זו הנוכחות של המותג בתחתית העמוד */
.site-foot .lockup{display:block;}
.site-foot .lockup .emblem{height:clamp(74px,8.4vw,128px);width:auto;}
.site-foot .lockup .word{display:none;}

/* בנבבר רק הכיתוב — האמבלם נשאר לפוטר */
.site-head .lockup{margin-block:-4px;}
.site-head .lockup .emblem{display:none;}
.site-head .lockup .word{height:18px;}
.site-head .lockup{flex:0 0 auto;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .lockup img{filter:invert(1);}
}
:root[data-theme="dark"] .lockup img{filter:invert(1);}
@media (max-width:600px){ .site-foot .lockup .word{display:none;} }

/* ---------- כפתורים: קו חצי פיקסל + האבר ---------- */
.btn{
  border-width:.5px;
  transition:background-color .22s ease, color .22s ease, border-color .22s ease;
}
.btn:hover{background:var(--ink);color:var(--ground);border-color:var(--ink);}
.btn-solid:hover{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-plain{transition:color .22s ease, opacity .22s ease;}

/* ---------- פוטר ---------- */
.site-foot .foot-grid{grid-template-columns:1.5fr .9fr .9fr 1.1fr;}
.foot-brand{gap:20px;}
/* text-wrap:pretty מונע שורה אחרונה עם מילה בודדת.
   ה-nbsp בין שתי המילים האחרונות הוא הגיבוי לדפדפנים ישנים. */
.foot-brand p{font-size:var(--t-body);line-height:1.7;color:var(--ink-mid);max-width:32ch;text-wrap:pretty;}
/* שם הסטודיו פותח את המשפט — אותו גודל, רק בהיר יותר מהשאר */
.foot-brand p b{font-weight:400;letter-spacing:.02em;text-transform:none;color:inherit;}

.foot-col b{
  font-size:var(--t-label);font-weight:500;letter-spacing:.2em;
  color:var(--ink-soft);margin-bottom:10px;
}
.foot-col a{
  font-size:var(--t-body);color:var(--ink-mid);
  transition:opacity .22s ease;
}
.foot-col a svg{color:var(--ink-mid);}
/* האבר: הבהרה בלבד, כמו בכל שאר העמוד */
.foot-col a:hover{opacity:.45;}
.foot-col .ic{opacity:1;}

/* האייקונים בצבע הטקסט המלא — בלי שקיפות שהופכת אותם לאפורים */
.foot-social a{color:var(--ink-mid);transition:opacity .22s ease;}
.foot-social a:hover{opacity:.45;}

/* ---------- כותרת הסקשן השני ---------- */
/* כותרת אמיתית, והכפתור יושב מולה על אותו קו בסיס. קו השיער מתחתיהם
   סוגר את השורה ומפריד מהקרוסלה. */
.more .sec-head{
  display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,44px);
  flex-wrap:wrap;row-gap:16px;
  margin-bottom:clamp(30px,3.4vw,48px);
}
.more .h2{
  font-size:var(--t-sub);font-weight:300;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
/* ראה .say-up במעטפת — אותה מדרגה בדיוק */
.more .sec-head .btn{padding:11px 22px;}

/* פג'יניישן לקרוסלה — קו שיער לכל שמלה, אותה שפה של הגלריה הראשית.
   מראה כמה שמלות יש ואיפה נמצאים ביניהן. */
/* יושב בשורת הכותרת, בין השם לכפתור, ותופס את החלל שביניהם.
   font-size זהה לכותרת לא כדי להציג טקסט אלא כדי ש-em יהיה של הכותרת:
   יישור למרכז מציב את הקווים במרכז תיבת השורה, שגבוה ממרכז האותיות
   הקטנות. ההסטה מורידה אותם לגובה ה-x של הכותרת. */
.more-nav{
  display:flex;align-items:center;justify-content:flex-start;
  gap:clamp(14px,1.6vw,22px);
  flex:1 1 auto;min-width:0;flex-wrap:wrap;row-gap:12px;
  font-size:var(--t-sub);
  transform:translateY(.03em);
}
.more-dots{display:flex;gap:9px;flex-wrap:wrap;}
.more-dots button{
  width:clamp(34px,4.4vw,74px);height:2px;padding:0;border:0;border-radius:0;
  background:var(--ink);opacity:.22;cursor:pointer;
  transition:opacity .28s ease;
}
.more-dots button.on{opacity:1;}
.more-dots button:hover{opacity:.6;}
.more-dots button.on:hover{opacity:1;}
@media (prefers-reduced-motion: reduce){ .more-dots button{transition:none;} }
/* טאבלט לאורך: אותו סידור של המובייל — כותרת וכפתור בשורה,
   והפסים בשורה משלהם מתחתיהם, על כל הרוחב */
@media (min-width:601px) and (max-width:900px){
  .more .sec-head{flex-wrap:wrap;gap:12px;align-items:center;}
  .more .h2{flex:0 1 auto;}
  .more .sec-head .btn{flex:0 0 auto;margin-inline-start:auto;}
  .more-nav{order:3;flex:1 0 100%;justify-content:flex-start;transform:none;margin-top:4px;}
  .more-dots{width:100%;flex-wrap:nowrap;gap:6px;}
  .more-dots button{flex:1 1 0;width:auto;min-width:0;}
}

/* ---------- הסקשן השני על גובה מסך מלא ---------- */
/* הכותרת, הכפתור, הכרטיסים והפג'יניישן נכנסים יחד במסך אחד.
   גובה הכרטיס נגזר מהחלל שנשאר, והרוחב נגזר ממנו לפי יחס הצילום —
   כך שמספר הכרטיסים הנראים משתנה לפי גובה החלון במקום להיות קבוע. */
@media (min-width:1101px){
  .more{
    min-height:100vh;
    display:flex;flex-direction:column;justify-content:center;
    padding-block:clamp(40px,6vh,90px);
  }
  .more .sec-head{flex:none;}
  .more .grid{flex:0 1 auto;min-height:0;align-items:flex-start;}
  /* הרוחב הוא מה שמוביל — הגובה נגזר ממנו לפי יחס הצילום.
     התקרה דואגת שהכרטיס לא יחרוג מגובה המסך: מה שנשאר מהחלון
     אחרי ההדר, הריפוד, שורת הכותרת ושם השמלה, חלקי 1.5. */
  .more .grid .card{
    flex:0 0 auto;
    width:min(calc((100% - 2 * var(--sg)) / 2.7), calc((100vh - 320px) / 1.5));
  }
}

/* האבר על כרטיס שמלה — הבהרה עדינה של הכרטיס כולו,
   אותה שפה של הלינקים בעמוד, רק רכה יותר ואיטית יותר. */
.more .grid .card{transition:opacity .4s cubic-bezier(.2,.6,.2,1);}
.more .grid .card:hover{opacity:.74;}
@media (prefers-reduced-motion: reduce){ .more .grid .card{transition:none;} }

/* הקרוסלה של שאר הקולקציה — בלי פס גלילה */
.more .grid{scrollbar-width:none;-ms-overflow-style:none;}

/* גלילה אנכית מעל הקרוסלה נתקעה: scroll-snap גרם לקונטיינר לתפוס
   את הגלגלת ולהתייצב מחדש, ובטראקפד כל תזוזה אופקית זעירה הספיקה.
   בלי snap הגלילה האנכית עוברת לעמוד, והאופקית לא מגלשת אחורה. */
.more .grid{
  scroll-snap-type:none;
  overscroll-behavior-x:contain;
  overscroll-behavior-y:auto;
}
.more .grid .card{scroll-snap-align:none;}
.more .grid::-webkit-scrollbar{display:none;height:0;width:0;}

.foot-bar{padding-block:18px;}
.foot-bar span,.foot-legal a{font-size:var(--t-label);letter-spacing:.02em;}
.foot-legal a{transition:opacity .22s ease;}
.foot-legal a:hover{opacity:.45;}

/* טאבלט ומובייל: המותג ו-Visit ברוחב מלא, Collections ו-Studio
   זו לצד זו — הן רשימות קצרות, ובטור אחד הפוטר היה מסך וחצי. */
@media (max-width:900px){
  .site-foot .foot-grid{grid-template-columns:1fr 1fr;}
  .site-foot .foot-brand,.site-foot .foot-col:last-child{grid-column:1 / -1;}
}





/* ============================================================
   מדריך הרשת — כלי עבודה בלבד
   הרשת של האתר פרושה על כל עמוד ומרחפת מעליו: שתים־עשרה
   עמודות ממוספרות, וקווים אופקיים בכל צעד של מודול ועוד רווח.
   מקש G מדליק ומכבה. להסיר מהמעטפת לפני שהאתר עולה לאוויר.
   ============================================================ */
/* רשת סטנדרטית: 12 עמודות, מרזב 40px, שוליים 80px,
   קווים אופקיים כל 80px. */
.pagegrid{
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  padding-inline:var(--gpad);
  display:none;grid-template-columns:repeat(12,1fr);
  column-gap:var(--ggap);
}
body.showgrid .pagegrid{display:grid;}
.pagegrid span{
  position:relative;background:rgba(214,0,78,.05);
  border-inline:1px solid rgba(214,0,78,.18);
}
.pagegrid span::after{
  content:attr(data-n);position:absolute;top:7px;left:5px;
  font:400 10px/1 ui-monospace,monospace;color:rgba(214,0,78,.85);
}
/* הציר האנכי — פסים ולא קווים, באותו טיפול של העמודות:
   פס של 80px ומרזב של 40 ביניהם. הוא מתחיל מתחילת התוכן
   שמתחת להירו ולא מראש העמוד, ו---gp הוא ההיסט שהסקריפט
   מחשב כדי שהוא יישאר נעוץ שם בזמן גלילה.
   הפס והמרזב נגזרים מגובה החלון, ולכן עשרה פסים הם בדיוק
   מסך אחד בכל גודל. */
.pagegrid::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(
    to bottom,
    rgba(214,0,78,.05) 0,
    rgba(214,0,78,.05) var(--vband),
    transparent var(--vband),
    transparent calc(var(--vband) + var(--vgap)));
  background-position:0 var(--gp,0px);
}
/* קווי הגבול של הפסים, כמו הקווים שבצדי העמודות */
.pagegrid::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(214,0,78,.18) 0, rgba(214,0,78,.18) 1px,
    transparent 1px, transparent calc(var(--vband) - 1px),
    rgba(214,0,78,.18) calc(var(--vband) - 1px), rgba(214,0,78,.18) var(--vband),
    transparent var(--vband), transparent calc(var(--vband) + var(--vgap)));
  background-position:0 var(--gp,0px);
}

/* n פסים לגובה — הציר האנכי כפי שמכווינים אותו */
.vb-1{height:calc(1 * var(--vband));}
.vb-2{height:calc(2 * var(--vband) + 1 * var(--vgap));}
.vb-3{height:calc(3 * var(--vband) + 2 * var(--vgap));}
.vb-4{height:calc(4 * var(--vband) + 3 * var(--vgap));}
.vb-5{height:calc(5 * var(--vband) + 4 * var(--vgap));}
.vb-6{height:calc(6 * var(--vband) + 5 * var(--vgap));}
.vb-7{height:calc(7 * var(--vband) + 6 * var(--vgap));}
.vb-8{height:calc(8 * var(--vband) + 7 * var(--vgap));}
.vb-9{height:calc(9 * var(--vband) + 8 * var(--vgap));}
.vb-10{height:calc(10 * var(--vband) + 9 * var(--vgap));}
.gridtag{
  position:fixed;right:10px;bottom:10px;z-index:10000;pointer-events:none;
  font:400 10px/1 ui-monospace,monospace;letter-spacing:.1em;
  color:rgba(214,0,78,.85);display:none;
}
body.showgrid .gridtag{display:block;}

/* ============================================================
   האבר אחיד לכל תצלום לחיץ באתר
   בלי זום. צעיף כהה נפתח על התצלום, ומילה אחת ממורכזת
   נכנסת מעט מלמעלה. אותה התנהגות בכל עמוד ובכל רשת.
   ============================================================ */
.hov{position:relative;overflow:hidden;}
.hov::after{
  content:"";position:absolute;inset:0;z-index:3;
  background:rgba(28,26,24,.34);
  opacity:0;transition:opacity .3s ease-in-out;pointer-events:none;
}
.hov-view{
  position:absolute;inset:-10px 0 0;z-index:4;pointer-events:none;
  display:grid;align-content:center;text-align:center;
  color:#fff;text-transform:uppercase;
  font-size:var(--t-label);letter-spacing:.3em;font-weight:400;
  opacity:0;transition:.15s ease-in-out;
}
a.hov:hover::after,
a.hov:focus-visible::after,
a:hover > .hov::after,
a:focus-visible > .hov::after,
a:hover > * > .hov::after,
a:focus-visible > * > .hov::after{opacity:1;}
a:hover .hov-view,
a:focus-visible .hov-view{top:0;opacity:1;}
/* החצים של הקרוסלה בתוך הכרטיס נשארים מעל הצעיף */
.card-frame .card-nav{z-index:5;}
@media (hover:none){ .hov::after,.hov-view{display:none;} }


/* ---------- סרגל הגריד ----------
   כלי עבודה בלבד: G מדליק ומכבה, או ?grid בכתובת.
   משתמש באותם --gpad ו---ggap של הגריד האמיתי, כך שהקווים
   הם בדיוק קווי העמודות ולא קירוב. */
.grid-ruler{
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  display:none;padding-inline:var(--gpad);
}
html[data-grid] .grid-ruler{
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--ggap);
}
.grid-ruler i{
  position:relative;display:block;
  background:rgba(200,60,60,.06);
  box-shadow:inset 1px 0 0 rgba(200,60,60,.28), inset -1px 0 0 rgba(200,60,60,.28);
}
.grid-ruler i::after{
  content:attr(data-n);position:absolute;top:8px;left:50%;
  transform:translateX(-50%);
  font:500 10px/1 var(--sans);letter-spacing:.1em;
  color:rgba(200,60,60,.9);
}
.grid-flag{
  position:fixed;left:10px;bottom:10px;z-index:10000;display:none;
  font:500 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(200,60,60,.9);background:#fff;padding:5px 8px;
  box-shadow:0 0 0 1px rgba(200,60,60,.3);pointer-events:none;
}
html[data-grid] .grid-flag{display:block;}