/* ============================================================
   שני & מושיקו · Hero
   המרת תבנית ENCHANTED WEDDINGS ל-RTL עברית
   ============================================================ */

:root {
  /* פלטת התבנית */
  --c-cream:      #FBF8F1;
  --c-cream-soft: #F5EFE3;
  --c-beige:      #EAD9C9;
  --c-terracotta: #C3937C;
  --c-terracotta-d: #A87760;
  --c-grey:       #787878;
  --c-grey-soft:  #B4ADA4;
  --c-ink:        #3A332C;

  /* טיפוגרפיה — מקור: Cormorant + Montserrat → עברית: Frank Ruhl Libre + Heebo */
  --font-display: "Frank Ruhl Libre", "Cormorant", Georgia, serif;
  --font-body:    "Heebo", "Montserrat", system-ui, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; color-scheme: light; }   /* r19c — מבטיח שה-iframe של Google Maps לא יקבל dark mode מהמערכת */

/* ============================================================
   Global background (r17b) — שמנת חלק, ללא מרקם/gradient.
   ----
   אחרי 5 נסיונות (r16 SVG noise, r16b-d alpha tuning, r17 gradient),
   נושא הרקע נדחה לסוף הליטוש. ייתכן בעתיד תמונת נייר אקוורל אמיתית
   מ-Nano Banana, אבל לעת עתה: שמנת חלק נקי = רקע אמין שעובד תמיד.
   ניקוי שולי האסטים מ-r17 (_clean_edges.py) נשמר. */
body {
  font-family: var(--font-body);
  color: var(--c-grey);
  background: var(--c-cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

/* ============================================================
   Hero r17d — תמונה לצד כיתוב (סגנון ישן, נקי)
   ----
   מובייל-קודם: stack אנכי (קשת למעלה, כיתוב מתחת).
   דסקטופ (≥720px): 2 עמודות. דסקטופ RTL → כיתוב ימין, קשת שמאל.
   ----
   הענפים: 2 אסטים קיימים (branch-1, branch-3) — בשוליים, אסימטרי וטבעי.
   שלכת: windLeaves גלובלי (initWindLeaves) רץ גם פה — body-level container.
   אנימציה: fade-up עדין על תמונה+כיתוב בלבד. אין וילון/חבק/חשיפה.
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;          /* fallback */
  min-height: 100dvh;         /* r17e: dynamic viewport — נכון בנייד עם סרגל דפדפן */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 2.5vh, 56px) clamp(16px, 4vw, 36px) clamp(52px, 9vh, 96px);
  background: var(--c-cream);
  overflow: hidden;
  gap: clamp(12px, 2.4vh, 36px);
}

/* ─── עמודת תמונה (קשת) + ענף חצי-מוסתר מאחור ──────────────────────── */
/* r17g: width 54vw→49vw — פיצוי לרוחב על aspect 5/5.5→5/6 (קשת מוארכת).
   isolation: stacking context מקומי → הענף החצי-מוסתר (z:0) מתחת לקשת (z:1). */
.hero-art {
  position: relative;
  z-index: 2;
  width: clamp(176px, 49vw, 480px);
  margin: 0 auto;
  isolation: isolate;
}
/* ענף חצי-מוסתר מאחורי הקשת — פינה שמאלית-תחתונה.
   r17f-fix: גובה "נמוך" — `--branch-y: -32%` → מציץ בשליש התחתון של שפת התמונה.
   ה-CSS-var מקל על כיוון מהיר אם צריך עוד. */
.hero-art-branch {
  --branch-y: -32%;
  position: absolute;
  bottom: var(--branch-y);
  left: -22%;
  width: 76%;
  height: auto;
  z-index: 0;
  opacity: 0.72;
  filter: saturate(0.92);
  pointer-events: none;
  user-select: none;
  transform: rotate(-22deg);
}
.hero-arch {
  position: relative;
  z-index: 1;                            /* מעל הענף החצי-מוסתר */
  margin: 0;
  width: 100%;
  aspect-ratio: 5 / 6;                   /* r17g: 5/5.5→5/6 — קשת מוארכת יותר (פחות שטוחה) */
  border-radius: 50% 50% 18px 18px / 38% 38% 18px 18px;
  overflow: hidden;
  background: #cbb19a;
  box-shadow:
    0 22px 50px rgba(58, 51, 44, 0.14),
    0 6px 18px rgba(58, 51, 44, 0.08);
}
.hero-arch::after {
  /* hairline פנימי טרקוטה — עוקב את עקומת הקשת */
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(195, 147, 124, 0.45);
  border-radius: 48% 48% 12px 12px / 36% 36% 12px 12px;
  z-index: 2;
  pointer-events: none;
}
/* r17f-fix: סלקטור כפול + display:block — בטוח ב-iOS Safari לכל מכשיר.
   r17g: object-position מבוטא ע"י משתנה `--photo-pos` (default: `center 75%`) →
   רגלי הסוסים בולטות במקום שייחתכו. ערך 0%→100% (יותר → פושר אחורה את התמונה מעלה
   כך שהבטם של התמונה ייראה). קל-לכיוון. */
.hero-arch > img,
.hero-arch-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--photo-pos, center 75%);
  z-index: 0;
}

/* ─── עמודת כיתוב ───────────────────────────────────────────────────── */
.hero-text {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 480px;
  padding: 0 clamp(12px, 3vw, 24px);
  margin: 0 auto;
}

/* ─── דסקטופ ≥720px: שתי עמודות (כיתוב ימין, תמונה שמאל ב-RTL) ──────── */
@media (min-width: 720px) {
  .hero {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(36px, 6vw, 84px);
    padding: clamp(40px, 8vh, 100px) clamp(24px, 6vw, 80px) clamp(48px, 8vh, 100px);
  }
  .hero-art {
    flex: 0 1 clamp(320px, 38vw, 540px);
    width: auto;
    margin: 0;
  }
  .hero-arch {
    aspect-ratio: 4 / 5;
    max-height: 70vh;
  }
  .hero-text {
    flex: 0 1 480px;
    text-align: right;
    align-items: flex-start;
    margin: 0;
  }
}

/* ─── ענפים בוטניים בשוליים — עדינים, אסימטרי ────────────────────── */
.hero-deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;                            /* מתחת לתוכן (z:2), מעל רקע השמנת */
  opacity: 0.32;
  filter: saturate(0.95);
}
/* branch-1 — פינה ימנית עליונה (RTL: צד הכיתוב, מעל לכיתוב) */
.hero-deco--branch-1 {
  top: -4%;
  right: -4%;
  width: clamp(140px, 20vw, 280px);
  transform: rotate(15deg);
}
/* branch-2 — פינה שמאלית תחתונה (צד התמונה, מתחת) */
.hero-deco--branch-2 {
  bottom: -3%;
  left: -3%;
  width: clamp(120px, 18vw, 240px);
  transform: scaleX(-1) rotate(20deg);
}
@media (min-width: 720px) {
  .hero-deco { opacity: 0.40; }
  .hero-deco--branch-1 {
    top: 4%; right: 1%;
    width: clamp(180px, 16vw, 320px);
  }
  /* r18c: ענף המקורי הוסט לצד שמאל-אמצע (top:18%) — הפרדה אנכית ברורה מ-
     .hero-scatter--bg הצומח מעלה מהפינה השמאלית-תחתונה (foliage שלו ב-y≈400+).
     "אחד גבוה, אחד נמוך": branch-2 גבוה, scatter-bg נמוך. אוויר ויזואלי ביניהם. */
  .hero-deco--branch-2 {
    bottom: auto;
    top: 18%;
    left: -2%;
    width: clamp(120px, 9vw, 180px);
  }
}

/* ─── r18: תפזורת אסטים נוספת — מילוי שטחים מתים ──────────────────────
   3 elements (אסטים קיימים, וריאציות דרך scale/rotate/opacity, אפס משקל נוסף).
   z:1 → מתחת לטקסט/קשת (z:2). pointer-events:none. אסור לחצות טקסט במלוא ה-opacity. */
.hero-scatter {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  filter: saturate(0.92);
}
/* (A) ענף רקע גדול:
   דסקטופ (r18b) — צומח מהפינה השמאלית-תחתונה כלפי מעלה (scaleY(-1) להפיכת
   ענף branch-3 שמשתלשל מטה → לצמיחה מעלה), עוטף את הטקסט מאחור.
   מובייל (r18b) — מבטא תחתון-ימני בנוכחות אמיתית (30vw, opacity 0.42).
   ממוקם מתחת ל-cta ומימין ל-scroll, כדי לא לחצות טקסט. */
.hero-scatter--bg {
  bottom: 0;
  right: -6%;
  width: 30vw;
  opacity: 0.42;
  transform: rotate(25deg);
}
/* (B) ספריג פינה:
   דסקטופ — שמאל-עליון בולט. מובייל (r18b) — נראה בפועל (25vw, opacity 0.42). */
.hero-scatter--sprig {
  top: 3%;
  left: -3%;
  width: 25vw;
  opacity: 0.42;
  transform: rotate(-22deg) scaleX(-1);
}
/* (C) מבטא ליד בסיס הקשת מצד פנים (צד הטקסט):
   דסקטופ — קטן בולט ליד מרכז-תחתון.
   מובייל (r18b) — מבטא ימני-אמצע נראה (20vw, opacity 0.40). */
.hero-scatter--accent {
  top: 32%;
  right: -3%;
  width: 20vw;
  opacity: 0.40;
  transform: rotate(55deg);
}
@media (min-width: 720px) {
  .hero-scatter--bg {
    /* r18b: anchor לתחתית + scaleY(-1) — ענף צומח מעלה (לא משתלשל). */
    bottom: 4%;
    top: auto;
    left: 1%;
    right: auto;
    width: clamp(280px, 28vw, 440px);
    opacity: 0.32;
    transform: scaleY(-1) rotate(-8deg);
  }
  .hero-scatter--sprig {
    top: 10%;
    left: 4%;
    width: clamp(90px, 7vw, 130px);
    opacity: 0.42;
    transform: rotate(-22deg) scaleX(-1);
  }
  .hero-scatter--accent {
    top: auto;
    bottom: 14%;
    left: 47%;
    right: auto;
    width: clamp(80px, 6vw, 110px);
    opacity: 0.38;
    transform: rotate(48deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scatter { /* sanity — אין כאן אנימציה, רק להבטיח שום reveal/transition לא יתפוס */ }
}

/* ─── G1: שפת אסטים סקשן 00 — תוספת sage על ההירו (ערבוב גוונים) ──────────
   filter: hue-rotate על אסטי watercolor טרקוטה → ירק-זית מעושן (smoky sage/olive).
   רק תוספת מעל הקיים; pointer-events:none; z:1 (מתחת לטקסט z:2). */
.hero-sage {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  filter: hue-rotate(72deg) saturate(0.55) brightness(0.92);
}
/* G2b: הוזז למרחב חופשי — לא בפינה הימנית-עליונה (שם hero-deco--branch-1). */
.hero-sage--mr {
  top: 50%;
  right: -3%;
  width: clamp(46px, 13vw, 90px);
  opacity: 0.30;
  transform: rotate(28deg);
}
/* G2b: הוזז למיקום פנימי — לא יותר ב-bottom 22% שם hero-scatter--accent. */
.hero-sage--mid {
  bottom: 42%;
  left: 28%;
  width: clamp(40px, 5vw, 100px);
  opacity: 0.22;
  transform: rotate(-15deg) scaleX(-1);
}
@media (min-width: 720px) {
  .hero-sage--mr {
    top: 52%;                           /* G2b: היה 28% (קצה ימני-עליון) */
    right: -1%;
    width: clamp(80px, 8vw, 140px);
    opacity: 0.42;
    transform: rotate(32deg);
  }
  .hero-sage--mid {
    bottom: 38%;                        /* G2b: היה 22% (קרוב מדי ל-accent) */
    left: 25%;
    width: clamp(70px, 7vw, 130px);
    opacity: 0.30;
  }
}

/* ─── אנימציית כניסה: fade-up עדין ───────────────────────────────── */
html.js [data-hero-anim] { opacity: 0; transform: translateY(16px); }
html.js [data-hero-anim="art"]  { animation: heroFadeUp 0.9s cubic-bezier(.2,.7,.25,1) 0.10s forwards; }
html.js [data-hero-anim="text"] { animation: heroFadeUp 0.9s cubic-bezier(.2,.7,.25,1) 0.25s forwards; }
@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-hero-anim] { opacity: 1; transform: none; animation: none; }
}

.hero-eyebrow,
.story-eyebrow,
.agenda-eyebrow,
.map-eyebrow,
.rsvp-eyebrow,
.playlist-eyebrow,
.album-eyebrow {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--c-grey);
  text-transform: uppercase;
  letter-spacing: 0.32em;     /* 5px ב-16px = ~0.31em */
  margin-bottom: clamp(1.5rem, 4vw, 2.2rem);
  white-space: nowrap;
}

/* hero-block · תווית תאריך אחידה לסקשנים (לוז + אישור הגעה).
   ממוקמת בין ה-eyebrow לכותרת. flex אופקי עם שני קווים דקים מסביב לטקסט.
   יורש justify-content מהתוכן של ה-text-align של ההורה — בדסקטופ מיושר ימין,
   במובייל ממורכז. ה-eyebrow שמעליו מקבל margin-bottom קטן יותר כדי שהפיל
   תיכנס יפה בסידור החדש. */
.section-date-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Heebo", sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #C3937C;
  letter-spacing: 1.5px;
  margin-top: clamp(-0.6rem, -1.5vw, -0.4rem);  /* התנגדות חלקית ל-eyebrow margin-bottom */
  margin-bottom: clamp(1.2rem, 3vw, 1.8rem);
  white-space: nowrap;
  /* כדי שיתיישר עם ה-eyebrow מימין בדסקטופ */
  align-self: inherit;
}
.section-date-pill .date-pill-line {
  display: inline-block;
  width: 26px;
  height: 1px;
  background: rgba(195, 147, 124, 0.55);
  flex-shrink: 0;
}
.section-date-pill .date-pill-text {
  line-height: 1;
}

.hero-title,
.story-title,
.agenda-title,
.map-title,
.rsvp-title,
.playlist-title,
.album-title {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--c-terracotta);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin-bottom: clamp(1.4rem, 3.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.05em;
}

/* r17d: כותרת ההירו — סגנון ישן (Frank Ruhl Libre, טרקוטה עמוקה) */
.hero .hero-title {
  color: #9A6B52;
  font-weight: 700;
}
.hero .hero-title-line {
  font-size: clamp(2.4rem, 5.6vw, 3.9rem);
}
.hero .hero-eyebrow {
  color: #8a7a6a;
  font-size: 0.85rem;
}

/* hero-block · בלוק תאריך מודגש (אופציה ב) — מחליף את ה-eyebrow הישן.
   יורש text-align ו-align-items מ-.hero-text (center במובייל / right בדסקטופ).
   מבנה: "יום ראשון" eyebrow קטן + "23.08.2026" גדול ב-Frank Ruhl Libre +
   קו מפריד דק. ה-margin-bottom שווה ל-eyebrow הישן (clamp 1.5-2.2rem) +
   קצת פחות במובייל לחיסכון במקום. */
.hero-date {
  display: flex;
  flex-direction: column;
  align-items: inherit;          /* יורש מ-.hero-text */
  margin-bottom: clamp(1.2rem, 3vw, 1.6rem);
  width: 100%;
}
.hero-date-eyebrow {
  font-family: "Heebo", sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #8a7a6a;
  letter-spacing: 4px;
  margin-bottom: clamp(0.4rem, 1.2vw, 0.55rem);
  line-height: 1;
}
.hero-date-main {
  font-family: "Frank Ruhl Libre", serif;
  font-weight: 500;
  color: #9A6B52;
  font-size: clamp(2.25rem, 4.6vw, 2.875rem);   /* 36px במובייל → 46px בדסקטופ */
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin: 0;
}
.hero-date-divider {
  display: block;
  width: 120px;
  height: 1px;
  background: rgba(195, 147, 124, 0.5);
  margin-top: clamp(0.55rem, 1.5vw, 0.75rem);
}
@media (max-width: 480px) {
  .hero-date {
    margin-bottom: 0.5rem;       /* כיול נוסף לשמירה על 100dvh */
  }
  .hero-date-eyebrow {
    font-size: 12px;
    margin-bottom: 0.3rem;
  }
  .hero-date-main {
    font-size: 2.25rem;          /* 36px לפי המוקאפ */
  }
  .hero-date-divider {
    width: 96px;
    margin-top: 0.4rem;
  }
}
.hero .hero-lede {
  color: #6b6b6b;
  /* hero-block · 1.0625rem (17px) → 1.125rem (18px) — קריא ובולט יותר */
  font-size: clamp(1.0625rem, 1.55vw, 1.125rem);
  line-height: 1.6;
  max-width: 38ch;
}
@media (min-width: 720px) {
  .hero .hero-lede { margin-inline: 0; }
}

.hero-title-line,
.story-title-line,
.agenda-title-line,
.map-title-line,
.rsvp-title-line,
.playlist-title-line,
.album-title-line {
  font-size: clamp(2.4rem, 5.6vw, 3.9rem);   /* 60px במקור */
  display: block;
}

.hero-amp {
  font-weight: 400;
  font-style: italic;
  color: var(--c-terracotta-d);
  padding-inline: 0.05em;
}

.hero-dot,
.story-dot,
.agenda-dot,
.map-dot,
.rsvp-dot,
.playlist-dot,
.album-dot {
  color: var(--c-terracotta-d);
  margin-inline-start: -0.05em;
}

.hero-lede,
.story-lede,
.agenda-lede,
.map-lede,
.rsvp-lede,
.playlist-lede,
.album-lede {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-grey);
  margin-bottom: clamp(1.8rem, 4vw, 2.4rem);
  max-width: 42ch;
}
.hero-lede strong,
.story-lede strong,
.agenda-lede strong,
.map-lede strong,
.rsvp-lede strong,
.playlist-lede strong,
.album-lede strong {
  color: var(--c-ink);
  font-weight: 500;
}

/* כפתור CTA — pill מתאר טרקוטה (אותו עיצוב כמו EXPLORE בתבנית) */
.hero-cta,
.story-cta,
.agenda-cta,
.map-cta,
.album-cta {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--c-terracotta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.95rem 2.6rem;
  border: 1.5px solid var(--c-terracotta);
  border-radius: 50px;
  background: transparent;
  cursor: pointer;
  transition:
    background 0.35s var(--ease),
    color 0.35s var(--ease),
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}
.hero-cta:hover,
.story-cta:hover,
.agenda-cta:hover,
.map-cta:hover,
.album-cta:hover {
  background: var(--c-terracotta);
  color: var(--c-cream);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -16px rgba(195, 147, 124, 0.7);
}

/* ============================================================
   רמז גלילה r17e — עיגול + חץ + "המשך" + bounce רך, בולט וקריא.
   ============================================================ */
.hero-scroll {
  position: absolute;
  bottom: clamp(12px, 2.4vh, 28px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  font-family: var(--font-body);
}
.hero-scroll-circle {
  width: clamp(38px, 9vw, 44px);
  height: clamp(38px, 9vw, 44px);
  border: 1.5px solid #C3937C;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9A6B52;
  animation: heroScrollBounce 1.8s cubic-bezier(.55, 0, .45, 1) infinite;
}
.hero-scroll-circle svg {
  width: 60%;
  height: 60%;
  display: block;
}
.hero-scroll-text {
  color: #9A6B52;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
@keyframes heroScrollBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ─── G2c-fix: counter ספירה לאחור — קופסאות מסוגרות (גרסה א) ────────────────
   כל יחידה = .cd-box מכילה cd-num + cd-hr + cd-lab. אי-אפשר שיתהפכו מבנית.
   direction:ltr על המיכל → ימים בקצה שמאל, שניות בקצה ימין. */
.hero-countdown {
  display: flex;
  direction: ltr;
  justify-content: center;
  gap: clamp(6px, 2vw, 10px);
  flex-wrap: nowrap;
  width: 100%;
  margin-top: clamp(18px, 4vw, 26px);
}
.hero-countdown .cd-box {
  width: clamp(64px, 19vw, 82px);
  box-sizing: border-box;
  text-align: center;
  border: 1px solid rgba(195, 147, 124, 0.55);   /* C3937C @55% — כמו הכפתור */
  background: rgba(255, 255, 255, 0.4);
  border-radius: 14px;
  padding: clamp(10px, 3vw, 15px) 8px 12px;
}
.hero-countdown .cd-num {
  display: block;
  font-family: 'Frank Ruhl Libre', serif;
  font-weight: 500;
  font-size: clamp(26px, 7.5vw, 35px);
  line-height: 1;
  color: #9A6B52;
  font-variant-numeric: tabular-nums;
}
.hero-countdown .cd-hr {
  display: block;
  width: 26px;
  height: 1px;
  background: rgba(195, 147, 124, 0.4);
  margin: 8px auto 6px;
}
.hero-countdown .cd-lab {
  display: block;
  font-family: 'Heebo', sans-serif;
  font-weight: 400;
  font-size: clamp(11px, 3vw, 12px);
  letter-spacing: 1px;
  color: #8a7a6a;
}
/* ביום החתונה — JS דורס ל-text חגיגי בתוך הקונטיינר */
.hero-countdown.is-elapsed {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4vw, 1.85rem);
  color: #9A6B52;
  text-align: center;
  display: block;
}

@media (max-width: 480px) {
  .hero-eyebrow {
    white-space: normal;
    letter-spacing: 0.24em;
    margin-bottom: 0.6rem;                 /* r17f: 0.85→0.6 (פיצוי על קשת גבוהה יותר) */
  }
  .hero .hero-title { margin-bottom: 0.45rem; } /* hero-block: 0.6→0.45 לחיסכון מקום */
  .hero .hero-title-line { font-size: clamp(2rem, 7.8vw, 3.2rem); }
  .hero .hero-lede {
    /* hero-block · 0.92rem → 1.0625rem (17px) במובייל, line-height 1.6 */
    font-size: 1.0625rem;
    line-height: 1.6;
    margin-bottom: 0.7rem;                 /* hero-block: 0.85→0.7 לחיסכון מקום */
    max-width: 34ch;
  }
  .hero .hero-cta { padding: 0.78rem 2rem; font-size: 0.8rem; }
  /* G2c-fix: ה-clamp בקופסאות עצמן מטפל ברספונסיביות. בלי overrides נוספים. */
  /* r18: דחיפת הזר הימני-עליון אל מחוץ ל-viewport יותר —
     בצילום נייד אמיתי הוא חצה את התאריך/שמות. עכשיו רק קצה מציץ מהפינה. */
  .hero-deco--branch-1 {
    top: -10%;
    right: -14%;
    width: clamp(110px, 18vw, 200px);
    transform: rotate(22deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-circle { animation: none; }
}

/* ============================================================
   הופעת אלמנטים בטעינה (baseline ללא GSAP)
   GSAP יוכל להחליף את האנימציה הזו בעתיד דרך data-anim
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* משתמשים בתכונת translate הנפרדת כדי לא לבטל את transform של אלמנטים מסובבים/ממוקזים */
  [data-anim] {
    opacity: 0;
    translate: 0 18px;
    animation: animIn 1.05s var(--ease) forwards;
  }
  [data-anim="eyebrow"] { animation-delay: 0.15s; }
  [data-anim="title-1"] { animation-delay: 0.35s; }
  [data-anim="title-2"] { animation-delay: 0.55s; }
  [data-anim="lede"]    { animation-delay: 0.85s; }
  [data-anim="cta"]     { animation-delay: 1.05s; }
  [data-anim="leaf-tr"] { animation-delay: 0.9s; animation-duration: 1.3s; }
  [data-anim="leaf-bl"] { animation-delay: 1.05s; animation-duration: 1.3s; }
  [data-anim="petals"]  { animation-delay: 0.6s; animation-duration: 1.6s; }
  [data-anim="scroll"]  { animation-delay: 1.5s; }
}
@keyframes animIn {
  to { opacity: var(--anim-opacity, 1); translate: 0 0; }
}
/* שמירת אטימויות מיוחדות (עלים שקופים חלקית, נקודות מאוד שקופות) */
.hero-leaf, .agenda-leaf, .map-leaf, .rsvp-leaf, .playlist-leaf, .album-leaf { --anim-opacity: 0.92; }
.story-whisper { --anim-opacity: 0.38; }
.story-dots, .agenda-dots, .map-dots, .rsvp-dots, .playlist-dots, .album-dots { --anim-opacity: 0.45; }
.album-stage             { --anim-opacity: 0.6; }
.album-branch            { --anim-opacity: 0.7; }
[data-anim="form"]       { animation-delay: 0.3s; animation-duration: 1.4s; }
[data-anim="frame"]      { animation-delay: 0.45s; animation-duration: 1.4s; }
[data-anim="overlap"]    { animation-delay: 0.4s; animation-duration: 1.4s; }
[data-anim="overlap-2"]  { animation-delay: 0.6s; animation-duration: 1.4s; }
[data-anim="stage"]      { animation-delay: 0.15s; animation-duration: 1.7s; }
[data-anim="branch"]     { animation-delay: 0.35s; animation-duration: 1.5s; }
[data-anim="string"]     { animation-delay: 0.25s; animation-duration: 1.4s; }
[data-anim="hanger-1"]   { animation-delay: 0.55s; animation-duration: 1.3s; }
[data-anim="hanger-2"]   { animation-delay: 0.7s;  animation-duration: 1.3s; }
[data-anim="hanger-3"]   { animation-delay: 0.85s; animation-duration: 1.3s; }
[data-anim="list"]       { animation-delay: 1.15s; animation-duration: 1.1s; }

/* r32 · ציר זמן — stagger ידני לפי nth-child (5 פריטים, פיגור עוקב) */
[data-anim="timeline-item"] { animation-duration: 1.2s; }
.story-timeline > .timeline-item:nth-child(1)[data-anim="timeline-item"] { animation-delay: 0.20s; }
.story-timeline > .timeline-item:nth-child(2)[data-anim="timeline-item"] { animation-delay: 0.35s; }
.story-timeline > .timeline-item:nth-child(3)[data-anim="timeline-item"] { animation-delay: 0.50s; }
.story-timeline > .timeline-item:nth-child(4)[data-anim="timeline-item"] { animation-delay: 0.65s; }
.story-timeline > .timeline-item:nth-child(5)[data-anim="timeline-item"] { animation-delay: 0.80s; }

/* ============================================================
   Wind Leaves — אפקט שלכת ברקע · r38
   ----
   container fixed מעל הרקע ומתחת לכל תוכן (z-index: 1).
   pointer-events: none → לא חוסם קליקים על תוכן.
   overflow: hidden → עלים שיוצאים לא יוצרים גלילה אופקית.
   ----
   .wind-leaf מקבל transform inline מ-initWindLeaves (rAF).
   will-change: transform → GPU layer קבוע, החלקה מקסימלית.
   ============================================================ */
.wind-leaves {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;       /* מתחת לכל תוכן (z:2+), מעל הרקע */
}
.wind-leaf {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;     /* width נקבע inline; height proportional */
  will-change: transform;
  pointer-events: none;
  user-select: none;
}

/* ============================================================
   GSAP gate — כשה-script הזדהה ש-GSAP+ScrollTrigger נטענו, הוא מוסיף
   .gsap-ready על <html>. אז אנחנו מבטלים את ה-CSS keyframes על
   הסקשן שמטופל ע"י GSAP (כרגע רק .story), כדי שלא תהיה כפילות.
   אם CDN נכשל ו-class לא נוסף — ה-baseline של ה-CSS keyframes פועל.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  html.gsap-ready .story [data-anim],
  html.gsap-ready .agenda [data-anim],
  html.gsap-ready .album [data-anim],
  html.gsap-ready .map [data-anim],
  html.gsap-ready .playlist [data-anim],
  html.gsap-ready .rsvp [data-anim],
  html.gsap-ready .footer [data-anim] {
    /* r37 — הסר את ה-exclusion של timeline-item: עכשיו initGsapStoryTimeline
       מטפל בהם, אז ה-CSS keyframes baseline צריך להיות מנוטרל.
       nofaq · .faq הוסר מהרשימה. */
    animation: none;
    /* GSAP יקבע opacity/translate ראשוניים מיד עם init */
  }
  /* r32 · timeline-item מוחרג מה-gate — GSAP בסקשן 02 לא נוגע בו (initGsapStory
     מטפל ב-.story-text/.story-arch/.story-overlap/.story-dots בלבד). הפריטים
     ממשיכים לקבל את ה-CSS keyframes baseline (stagger nth-child), ויהיו
     מוכנים ל-GSAP עתידי בשלב E בלי להישבר עכשיו. */

  /* Overscale תמונות פנימיות — מונע חשיפת רקע ה-figure (var(--c-beige))
     בזמן parallax. עם position:absolute + top:-15% + height:130%,
     התמונה תמיד מכסה את ה-figure גם כש-yPercent דוחף אותה למעלה.
     (margin-top:% יחסי לרוחב — לא יציב. top:% עם position:absolute
     יחסי לגובה ה-positioning context, אמין יותר.) */
  html.gsap-ready .story-arch-img,
  html.gsap-ready .story-overlap-img,
  html.gsap-ready .agenda-arch-img,
  html.gsap-ready .agenda-overlap-img {
    position: absolute;
    top: -15%;
    left: 0;
    width: 100%;
    height: 130%;
  }

  /* ⚠️ r27 — Album: ילדי .album-stack (stage, string, hanger-1/2/3) יש להם
     data-anim → ה-gate למעלה ינטרל את ה-CSS keyframes שלהם. בלי override,
     הם יישארו ב-initial state של ה-baseline (opacity:0, translate:0 18px)
     לעולם, גם אחרי שה-GSAP מנפש את ה-container .album-stack ב-opacity 0→1.
     ----
     הפתרון: למקם אותם במצב הסופי שלהם תמיד. GSAP מנפש את ה-container
     כיחידה, הילדים יורשים את ה-opacity דרך הקומפוזיציה ב-rendering layer
     של הדפדפן (parent opacity 0 × child opacity 1 = 0; parent 1 × child
     0.6 = 0.6 ל-stage). היישור הפנימי הקפדני (clothesline↔hangers) נשמר
     כי כל הילדים יושבים במיקומם המקורי, ורק ה-transform על ה-container
     מזיז את כולם ביחד. */
  html.gsap-ready .album-stack [data-anim] {
    animation: none;
    opacity: var(--anim-opacity, 1);
    translate: 0 0;
  }
}

/* ============================================================
   Section 02 — הסיפור שלנו
   קצב מתחלף מול ה-Hero: תמונה מימין, טקסט משמאל
   ============================================================ */
.story {
  position: relative;
  min-height: 100vh;
  display: grid;
  /* r32 · 3 עמודות: אומנות (start=ימין ב-RTL) | ציר זמן (אמצע) | טקסט (end=שמאל) */
  grid-template-columns: 7fr clamp(180px, 17vw, 240px) 5fr;
  align-items: center;
  /* gap קטן יותר עם 3 עמודות (היה clamp(2rem, 6vw, 5rem) ב-2 עמודות) */
  gap: clamp(1.4rem, 4vw, 3.2rem);
  padding-block: clamp(3rem, 8vw, 6rem);
  /* ריווח אסימטרי: יותר אוויר בצד הטקסט (end=שמאל ב-RTL) */
  padding-inline-start: clamp(1.5rem, 4vw, 4rem);
  padding-inline-end: clamp(2rem, 9vw, 7rem);
  background: transparent;     /* r17b — מציג את שמנת ה-body */
  overflow: hidden;
}

/* ---------- עמודת טקסט (שמאל) ---------- */
.story-text {
  position: relative;
  z-index: 2;
  max-width: 480px;
  justify-self: end;   /* ב-RTL: end = שמאל */
}

/* ---------- עמודת אומנות (ימין) ---------- */
.story-art {
  position: relative;
  width: 100%;
  height: clamp(440px, 70vh, 720px);
  justify-self: start;   /* ב-RTL: start = ימין */
}

/* תמונה ראשית — קשת בפינה תחתונה-שמאלית (פונה לטקסט).
   z-index: 1 (r15) — מעל אלמנטי הענפים שב-z:0, יוצר אפקט שכבות:
   ענפים בקצוות שמסומנים כ"מאחורי הקשת" יושבים מתחת אליה. */
.story-arch {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: clamp(160px, 26vw, 280px);
  overflow: hidden;
  background: var(--c-beige);
  box-shadow:
    0 30px 80px -40px rgba(58, 51, 44, 0.35),
    0 12px 32px -16px rgba(195, 147, 124, 0.25);
}
.story-arch-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  display: block;
}

/* תמונה קטנה חופפת — מונחת בתחתית, עם צל דרמטי */
.story-overlap {
  position: absolute;
  bottom: -7%;
  left: 18%;
  width: 28%;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  background: var(--c-beige);
  z-index: 3;
  /* צל בפינה הימנית-עליונה (בהשראת התבנית) */
  box-shadow:
    10px -10px 22px -6px rgba(58, 51, 44, 0.28),
    0 22px 48px -22px rgba(58, 51, 44, 0.4);
}
.story-overlap-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* r32b · object-position סופי 25% 60% (היה center 35% ב-r32a, הזוג ישב
     בעליון-שמאלי עם אוויר מימין ולמטה). 3 איטרציות: 30% 45% → 25% 45% →
     20% 45% → 25% 60% (סופי). הציר האופקי 25% דוחף את ה-frame של ה-source
     שמאלה כך שהזוג זז ימינה בפריים ומגיע למרכז. הציר האנכי 60% מציב את
     הזוג בערך באמצע אנכית של ה-frame הנראה (אחרי שה-overscale top:-15%
     ו-parallax yPercent:-10 שניהם פעילים). */
  object-position: 25% 60%;
  display: block;
}

/* עיטור בוטני · 5 אלמנטים בעומק (r15) — מתכון "עשיר ומאוזן".
   ----
   קונספט מרכזי: שכבות באמצעות z-index.
   - .story-arch ב-z:1 → קשת התמונה
   - .story-whisper ב-z:0 (default) → רוב האלמנטים מתחת לקשת
   - אלמנט שצריך להיות "מאחורי הקשת" → z:0 (יוסתר ע"י הקשת ב-z:1)
   - אלמנט שצריך להיות "מעל" הקשת → לא בשימוש כרגע (כל ה-whisper מתחת)
   - .story-overlap ב-z:3, .story-text ב-z:2 → תמיד מעל הכל

   8 כללי המתכון:
   1. ממוקמים ביחס ל-.story (לא ל-.story-art).
   2. גדלים מדורגים יותר: xl (350-450) → lg (260-340) → md (160-220) → sm (75-150).
   3. איזון דו-צדדי: לא רק שמאל; חלק בקצה ימני, בעיקר מאחורי הקשת.
   4. אפקט עומק: אלמנט גדול חלק מאחורי הקשת = שכבת רקע אינטגרלית.
   5. opacity 0.40-0.55 ברגיל, 0.55-0.65 ל"מאחורי" (חלקם מוסתרים), עד 0.75 ל-PNG שקוף.
   6. saturate 0.85-0.90, z-index 0 לכולם (הקשת ב-z:1 קובעת מי אחורי/קדמי).
   7. שילוב אסטים שונים: branch-1/2/3 + leaf-4 — מגוון יוצר עניין.
   8. rotate בלבד (אין scaleX) — ענפים אסימטריים.
   ---- */
.story-whisper {
  position: absolute;
  height: auto;
  z-index: 0;        /* מתחת לקשת (z:1) → "מאחורי התמונה" */
  pointer-events: none;
}

/* === צד שמאל (קצה הטקסט) — 3 אלמנטים מדורגים אנכית === */

/* (1) lg — branch-2 שמאל-תחתון, ענף עיקרי בשמאל */
.story-whisper--lg {
  bottom: -10%;
  left: -8%;
  width: clamp(260px, 28vw, 340px);
  opacity: 0.45;
  transform: rotate(-28deg);
  filter: saturate(0.88);
}

/* (2) md — branch-3 שמאל-עליון, ענף דרמטי נופל אלכסונית פנימה */
.story-whisper--md {
  top: -5%;
  left: -3%;
  width: clamp(160px, 18vw, 220px);
  opacity: 0.40;
  transform: rotate(125deg);
  filter: saturate(0.85);
}

/* (3) sm — leaf-4 שמאל-אמצע, אקצנט עלים בודדים.
   opacity 0.75 (PNG עם שטח שקוף משמעותי). */
.story-whisper--sm {
  top: 42%;
  left: -3%;
  width: clamp(110px, 11vw, 150px);
  opacity: 0.75;
  transform: rotate(70deg);
  filter: saturate(0.85);
}

/* === צד ימין (קצה התמונה) — 2 אלמנטים, חלקם מאחורי הקשת === */

/* (4) xl-back — branch-3 (וורטיקלי) ימין-עליון, רוב מאחורי הקשת.
   ----
   r15 → r15b לקח: הקדמה הקודמת (top:-12% w:440 rotate:215) הציגה
   "שורש קטוע" — חצי ענף בולט, נראה מקרי. גם r15b ניסיון 1 (top:-32%
   rotate:180) דחק את כל ה-img מחוץ למסך → אין שום עלים נראים.
   ----
   הגישה הסופית: branch-3 **בתוך** הסקשן (top: 11%, חיובי!), בלי rotate.
   - branch-3 במקור: שורש למטה, עלים מתפזרים מעל ולצדדים בקצה העליון
   - בלי rotate, ה-img יושב כך שהשורש נמצא ב-y=359 (עמוק על הקשת),
     והעלים בקצה העליון של ה-PNG ב-y=99 (קצת מעל הקשת y=135).
   - תוצאה: רוב הענף (224px) מאחורי הקשת, מוסתר. רק 36px עליונים
     של ה-PNG = העלים האחרונים — מציצים בעדינות מעל הקשת.
   - האפקט: כמו ענף שצמח מאחורי התמונה, רק קצה העלים נראה. אינטגרלי
     ומכוון, לא חצי ענף תלוש. */
/* (4) xl-tr — branch-1 ימין-עליון, אלכסוני גדול, נוכחות עשירה יותר.
   ----
   r15c → r15d לקח: rotate 135° ב-top -10% הציג רק טיפים של עלים — עדין
   מדי, לא נוכחות בולטת. תיקון:
   - top: -18% (גבוה יותר) → ה-bounding box מתחיל מעל הסקשן יותר, כך
     שהחלק התחתון של ה-bounding box (האמצע-עשיר של ה-image אחרי rotate)
     נכנס דווקא לאזור הנראה (y=0-135 על השמנת מעל הקשת).
   - rotate 215° (במקום 135°): הופך את כיוון הענף. עם branch-1
     (שורש שמאל-עליון, עלים ימין-תחתון של ה-PNG), rotate 215° clockwise:
     השורש הולך לעין הימני של ה-bounding box (מציץ מהקצה הימני, חלקו
     מחוץ למסך), העלים הולכים לעין השמאלי — בולטים פנימה לכיוון מרכז.
   - width: 500 (במקום 460) → קצת יותר נוכחות. */
.story-whisper--xl-tr {
  top: -18%;
  right: -8%;
  width: clamp(380px, 35vw, 500px);
  opacity: 0.55;
  transform: rotate(215deg);
  filter: saturate(0.88);
}

/* (5) xl-br — branch-3 ימין-תחתון, אלכסוני גדול שעולה מהפינה.
   ----
   branch-3 במקור: ענף וורטיקלי-מתפתל, שורש בתחתית ה-PNG, עלים מתפזרים
   למעלה ולצדדים.
   rotate -45° (counter-clockwise): השורש מסתובב לפינה הימנית-תחתונה של
   ה-bounding box, העלים פונים לשמאל-עליון. תוצאה: ענף עולה אלכסונית
   מהפינה הימנית-תחתונה של הסקשן לכיוון מרכז-שמאל. הקשת מכסה את החלק
   העליון של הענף → אפקט "ענף יוצא מאחורי הקשת". */
.story-whisper--xl-br {
  bottom: -8%;
  right: -8%;
  width: clamp(340px, 32vw, 460px);
  opacity: 0.55;
  transform: rotate(-45deg);
  filter: saturate(0.85);
}

/* ─── G1: שפת אסטים סקשן 00 — תוספת sage על הסטורי + עלה מרכזי ─────────────
   3 אלמנטים חדשים בנוסף ל-5 ה-story-whisper הקיימים. רק תוספת מעל הקיים.
   pointer-events:none; z:0 (מתחת לכל הטקסט/הקשת). */
.story-corner {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* (TL sage) — פינה שמאלית-עליונה, מאוזנת מול .story-whisper--md (טרקוטה).
   filter hue-rotate על branch-2 (טרקוטה) → ירק-זית מעושן. נראה בנייד+דסקטופ. */
.story-corner--tl-sage {
  top: -2%;
  left: -4%;
  width: clamp(120px, 16vw, 280px);
  opacity: 0.38;
  filter: hue-rotate(62deg) saturate(0.52) brightness(0.92);
  transform: rotate(-12deg);
}
/* (BR sage) — פינה ימנית-תחתונה, מאוזנת מול .story-whisper--xl-br (טרקוטה).
   filter על branch-1 (טרקוטה) → ירק-זית. */
.story-corner--br-sage {
  bottom: -3%;
  right: -3%;
  width: clamp(140px, 18vw, 320px);
  opacity: 0.34;
  filter: hue-rotate(56deg) saturate(0.55) brightness(0.95);
  transform: rotate(165deg);
}
/* (CENTER) — עלה מרכזי חיוור מאוד, ירק-זית. opacity 0.15 — מעשיר אבל
   לא מפריע לקריאת הטיימליין. ממוקם פיזית במרכז הסקשן. */
.story-corner--center {
  top: 50%;
  left: 50%;
  width: clamp(180px, 22vw, 380px);
  opacity: 0.15;
  filter: hue-rotate(58deg) saturate(0.45) brightness(0.95);
  transform: translate(-50%, -50%) rotate(22deg);
}

/* ─── G1c: 16 אסטים לאורך צדי הטיימליין — שני צדדים מאוזנים ─────────────────
   פי 2 בכמות הענפים מ-G1b (היה 4 ענפים + 4 עלים; עכשיו 12 ענפים + 4 עלים).
   כל צד: 6 ענפים + 2 עלים כמילוי משני. ערבוב טרקוטה (ללא filter) + sage
   (hue-rotate) שווה ב-2 הצדדים. וריאציה אורגנית: scale/rotate/flip שונה לכל אחד.
   z:0 + pointer-events:none. צמודים לקצוות (left/right: -3% to -6%). */
.story-side {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ─── שמאל — 8 אלמנטים (6 ענפים + 2 עלים) ─────────────────────────────── */
.story-side--l1 {
  /*   7% — sage · branch-2 */
  top: 7%; left: -5%;
  width: clamp(85px, 15vw, 165px);
  opacity: 0.42;
  filter: hue-rotate(65deg) saturate(0.52) brightness(0.92);
  transform: rotate(-22deg);
}
.story-side--l2 {
  /* G2b: 18% → 28% — היה בתוך whisper--md (TL). עכשיו בגאפ md/sm. */
  top: 28%; left: -3%;
  width: clamp(95px, 16vw, 180px);
  opacity: 0.46;
  transform: rotate(18deg) scaleX(-1);
}
.story-side--l3 {
  /* G2b iter2: 38% → 42%, מקטין רוחב — להתרחקות נוספת מ-sm whisper (38-52%). */
  top: 44%; left: -4%;
  width: clamp(65px, 10vw, 115px);
  opacity: 0.45;
  filter: hue-rotate(60deg) saturate(0.55) brightness(0.92);
  transform: rotate(-35deg);
}
.story-side--l4 {
  /*  42% — טרקוטה · branch-3 */
  top: 42%; left: -6%;
  width: clamp(95px, 16vw, 185px);
  opacity: 0.44;
  transform: rotate(-12deg);
}
.story-side--l5 {
  /* G2b: 54% נשאר — בגאפ sm/lg. */
  top: 54%; left: -3%;
  width: clamp(85px, 14vw, 160px);
  opacity: 0.42;
  filter: hue-rotate(62deg) saturate(0.50) brightness(0.95);
  transform: rotate(38deg) scaleX(-1);
}
.story-side--l6 {
  /* G2b: 66% → 73% — מרחק מ-sm. */
  top: 73%; left: -4%;
  width: clamp(75px, 12vw, 130px);
  opacity: 0.48;
  transform: rotate(48deg);
}
.story-side--l7 {
  /* G2b: 78% הוסר (חפיפה עם lg). l7 הוסטה ל-83%. */
  top: 83%; left: -5%;
  width: clamp(85px, 14vw, 160px);
  opacity: 0.40;
  filter: hue-rotate(58deg) saturate(0.55);
  transform: rotate(-18deg);
}
.story-side--l8 {
  /*  90% — טרקוטה · branch-3 (flipped X) */
  top: 90%; left: -3%;
  width: clamp(90px, 15vw, 170px);
  opacity: 0.44;
  transform: rotate(22deg) scaleX(-1);
}

/* ─── ימין — 8 אלמנטים (6 ענפים + 2 עלים) ─────────────────────────────── */
.story-side--r1 {
  /*  10% — טרקוטה · branch-3 */
  top: 10%; right: -5%;
  width: clamp(90px, 15vw, 170px);
  opacity: 0.44;
  transform: rotate(160deg);
}
.story-side--r2 {
  /* G2b: 22% נשאר — שולי xl-tr הימני. */
  top: 22%; right: -3%;
  width: clamp(85px, 14vw, 160px);
  opacity: 0.42;
  filter: hue-rotate(64deg) saturate(0.52) brightness(0.93);
  transform: rotate(180deg) scaleX(-1);
}
.story-side--r3 {
  /* G2b: 34% → 48% — מקום הגאפ הצר בין xl-tr ל-xl-br. */
  top: 48%; right: -4%;
  width: clamp(75px, 12vw, 140px);
  opacity: 0.46;
  transform: rotate(195deg);
}
.story-side--r4 {
  /*  46% — sage · leaf-4 (עלה accent) */
  top: 46%; right: -3%;
  width: clamp(65px, 11vw, 115px);
  opacity: 0.45;
  filter: hue-rotate(58deg) saturate(0.55);
  transform: rotate(-30deg);
}
.story-side--r5 {
  /* G2b: 58% נשאר. */
  top: 58%; right: -4%;
  width: clamp(85px, 14vw, 160px);
  opacity: 0.40;
  filter: hue-rotate(60deg) saturate(0.50) brightness(0.95);
  transform: rotate(165deg) scaleX(-1);
}
.story-side--r6 {
  /* G2b: 70% נשאר. */
  top: 70%; right: -5%;
  width: clamp(85px, 14vw, 160px);
  opacity: 0.46;
  transform: rotate(140deg);
}
.story-side--r7 {
  /* G2b: 82% נשאר. */
  top: 82%; right: -3%;
  width: clamp(75px, 12vw, 135px);
  opacity: 0.42;
  filter: hue-rotate(56deg) saturate(0.55) brightness(0.92);
  transform: rotate(20deg);
}
.story-side--r8 {
  /*  93% — טרקוטה · branch-2 */
  top: 93%; right: -4%;
  width: clamp(90px, 15vw, 170px);
  opacity: 0.44;
  transform: rotate(155deg);
}

/* ─── G1: הגדלת עיגולי הטיימליין (×1.5 דסקטופ, ×2 מובייל) — היחיד בקומפוזיציה
   שמשתנה (אישור מפורש של המשתמש). "נוכחות מרכזית" — חיזוק תמונות הזוג. */


/* ============================================================
   r32 · ציר זמן אנכי בין אומנות לטקסט (5 תחנות, 3 עם תמונה)
   ----
   הקונטיינר (<ol>) יושב בעמודה האמצעית של ה-grid (z-index: 2 מעל ה-arch).
   קו אנכי דק טרקוטה עובר במרכז דרך כל התחנות; נקודה על הקו פר תחנה;
   תמונה עגולה ב-1/3/5 (timeline-item--with-img); ב-2/4 רק טקסט.
   data-anim="timeline-item" — מוחרג מ-GSAP gate (ראה למטה).
   ============================================================ */
.story-timeline {
  position: relative;
  z-index: 2;        /* מעל ה-arch (z:1), מתחת ל-overlap (z:3) */
  list-style: none;
  margin: 0;
  padding: clamp(0.5rem, 2vw, 1.5rem) 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 2.6vw, 2.2rem);
  align-self: center;
  width: 100%;
}

/* r32a · קו מקוטע במקום קו רצוף — כל פריט מקבל קטע-קו ::after שמתחיל
   מתחת לתוכן ורץ עד הפריט הבא, בתוך אזור ה-gap של ה-flex parent.
   ----
   זה מבטל את ה"קו דרך הטקסט": ב-r32 השתמשנו ב-.story-timeline::before
   רצוף שעבר 50% מהרוחב, והטקסט הממורכז הוצב מעליו → המילים נחתכו.
   ב-r32a הקו "קופץ" מעל התוכן בין תחנה לתחנה, נראה רק בקטעי המעבר. */

.timeline-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
}

.timeline-item::after {
  content: "";
  position: absolute;
  /* top:100% ממקם את הקו מתחת ל-bounding box של הפריט, בתוך אזור
     ה-gap (1.4-2.2rem בדסקטופ / 1.6-2.4rem בנייד) של ה-flex parent. */
  top: 100%;
  right: 50%;
  width: 1px;
  height: clamp(1.4rem, 2.6vw, 2.2rem);
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(195, 147, 124, 0.42) 25%,
    rgba(195, 147, 124, 0.42) 100%);
  pointer-events: none;
}
/* הפריט האחרון לא צריך קו "לתחנה הבאה" */
.timeline-item:last-child::after { display: none; }

/* נקודה על הקו — עיגול טרקוטה עם דונאט קרם וטבעת חיצונית עדינה */
.timeline-dot {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-terracotta);
  box-shadow:
    0 0 0 2px var(--c-cream),
    0 0 0 3px rgba(195, 147, 124, 0.35);
  margin-block: 0.15rem 0.4rem;
}

/* תמונה עגולה — מסגרת לבנה דקה + צל עדין בטרקוטה.
   G1: width ×1.5 (clamp 60/6vw/84 → 90/9vw/126). */
.timeline-img-wrap {
  width: clamp(90px, 9vw, 126px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-beige);
  border: 2px solid var(--c-cream);
  box-shadow:
    0 6px 14px -8px rgba(195, 147, 124, 0.55),
    0 0 0 1px rgba(195, 147, 124, 0.22);
  margin-bottom: 0.35rem;
}
.timeline-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* תאריך — קטן, אותיות מרווחות, צבע terracotta-d */
.timeline-date {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--c-terracotta-d);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* כותרת — Frank Ruhl Libre, טרקוטה */
.timeline-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(0.92rem, 1.4vw, 1.05rem);
  font-weight: 500;
  color: var(--c-terracotta);
  line-height: 1.25;
  letter-spacing: 0.005em;
  max-width: 16ch;
}

/* משפט — italic display, אפור */
.timeline-line {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.78rem, 1.25vw, 0.88rem);
  font-weight: 400;
  color: var(--c-grey);
  line-height: 1.4;
  max-width: 22ch;
}

/* קונפטי נקודות טרקוטה — מצד שמאל של הקומפוזיציה */
.story-dots {
  position: absolute;
  inset: 8% 14% 8% -6%;
  pointer-events: none;
  opacity: 0.45;
  background-image:
    radial-gradient(circle, var(--c-terracotta) 1.4px, transparent 1.8px),
    radial-gradient(circle, var(--c-terracotta) 1px, transparent 1.4px);
  background-size: 78px 78px, 56px 56px;
  background-position: 0 0, 26px 30px;
  mix-blend-mode: multiply;
  mask-image: radial-gradient(ellipse at 70% 50%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 30%, transparent 75%);
}

/* ---------- רספונסיביות נייד ---------- */
@media (max-width: 860px) {
  .story {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: auto;
    padding-block-start: clamp(2rem, 6vw, 3rem);
    padding-block-end: clamp(3rem, 8vw, 4rem);
    padding-inline-start: clamp(1.2rem, 5vw, 2rem);
    padding-inline-end: clamp(1.6rem, 6vw, 2.4rem);
    gap: clamp(2.5rem, 8vw, 3.5rem);
    text-align: right;
  }
  .story-art {
    order: -1;
    height: clamp(380px, 65vh, 540px);
    justify-self: stretch;
  }
  .story-arch {
    border-bottom-left-radius: clamp(110px, 30vw, 200px);
  }
  .story-overlap {
    bottom: -8%;
    left: 6%;
    width: 38%;
  }
  .story-text { max-width: 100%; }
  .story-eyebrow { white-space: normal; letter-spacing: 0.26em; }
  .story-title-line { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  /* במובייל רק האלמנט הגדול (1) נשאר — אין מקום ל-5 בעמודה צרה.
     אלמנטים 2-5 מוסתרים. עיקרון "פחות במובייל". */
  .story-whisper--md,
  .story-whisper--sm,
  .story-whisper--xl-tr,
  .story-whisper--xl-br { display: none; }
  .story-whisper--lg {
    bottom: -4%;
    left: -10%;
    width: 36vw;
    opacity: 0.35;
    transform: rotate(-28deg);
  }

  /* r32 · ציר זמן בנייד — סדר חדש: art (order:-1) → text (default) → timeline (order:1)
     הטיימליין יורד לתחתית אחרי הטקסט/CTA, מציג את ה"סיפור" כמעבר רגוע למטה. */
  .story-text { order: 0; }
  .story-timeline {
    order: 1;
    align-self: stretch;
    padding-block: clamp(1rem, 4vw, 2rem) 0.5rem;
    gap: clamp(1.6rem, 5vw, 2.4rem);
  }
  /* G1: ×2 במובייל (clamp 56/16vw/72 → 112/32vw/144) — נוכחות מרכזית */
  .timeline-img-wrap { width: clamp(112px, 32vw, 144px); }
  .timeline-title { font-size: clamp(0.95rem, 4vw, 1.05rem); max-width: 22ch; }
  .timeline-line { font-size: clamp(0.82rem, 3.2vw, 0.9rem); max-width: 28ch; }
  .timeline-date { font-size: 0.66rem; letter-spacing: 0.22em; }
}

/* ============================================================
   Section 03 — מה מצפה לכם / לוח הזמנים
   קצב מתחלף: טקסט מימין (start), תמונה משמאל (end) — מראָה ל-Hero
   ============================================================ */
.agenda {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 5fr 7fr;   /* תמונה רחבה משמאל, טקסט צר מימין */
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding-block: clamp(3rem, 8vw, 6rem);
  /* ריווח אסימטרי: יותר אוויר בצד הטקסט (start = ימין ב-RTL) */
  padding-inline-start: clamp(2rem, 9vw, 7rem);
  padding-inline-end: clamp(1.5rem, 4vw, 4rem);
  background: transparent;     /* r17b — מציג את שמנת ה-body */
  overflow: hidden;
}

/* ---------- עמודת טקסט (ימין) ---------- */
.agenda-text {
  position: relative;
  z-index: 2;
  max-width: 480px;
  justify-self: start;   /* ב-RTL: start = ימין */
}

/* ---------- עמודת אומנות (שמאל) ---------- */
.agenda-art {
  position: relative;
  width: 100%;
  height: clamp(500px, 78vh, 760px);
  justify-self: end;     /* ב-RTL: end = שמאל */
}

/* תמונה ראשית — מלבן נקי עם פינות מעוגלות (בלי קשת דרמטית).
   z-index: 1 (r18) — מעל אלמנטי .agenda-whisper שב-z:0, יוצר אפקט שכבות:
   ענפים בקצוות שנמצאים ב-z:0 יושבים מתחת לתמונה. */
.agenda-arch {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--c-beige);
  box-shadow:
    0 30px 80px -40px rgba(58, 51, 44, 0.35),
    0 12px 32px -16px rgba(195, 147, 124, 0.25);
}
.agenda-arch-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  display: block;
}

/* תמונה קטנה חופפת — portrait, ממוקמת על תחתית-ימין של הראשית (פונה לטקסט) */
.agenda-overlap {
  position: absolute;
  bottom: -7%;
  right: 18%;            /* ב-RTL: end-side of art = קרוב לטקסט */
  width: 28%;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  background: var(--c-beige);
  z-index: 3;
  /* צל בפינה שמאלית-עליונה (מראָה ל-section 02 שהיה בצד ימני-עליון) */
  box-shadow:
    -10px -10px 22px -6px rgba(58, 51, 44, 0.28),
    0 22px 48px -22px rgba(58, 51, 44, 0.4);
}
.agenda-overlap-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

/* עיטור בוטני · 3 אלמנטים בעומק (r18) — מתכון r15d מותאם לסקשן 03.
   ----
   וריאציה מ-02: הקצב הפוך (טקסט ימין, תמונה שמאל), והאסטים גם בפינות
   הפוכות + סבובים שונים. אותה שפה (z-index, opacity, גדלים מדורגים),
   ביצוע ייחודי לסקשן 03. */
.agenda-whisper {
  position: absolute;
  height: auto;
  z-index: 0;        /* מתחת ל-.agenda-arch (z:1) → "מאחורי התמונה" */
  pointer-events: none;
}

/* (1) xl-bl — branch-3 שמאל-תחתון אלכסוני, עולה מהפינה השמאלית-תחתונה.
   המקבילה ל-xl-tr/xl-br של 02 אבל בפינה הפוכה ובאסט אחר. */
.agenda-whisper--xl-bl {
  bottom: -10%;
  left: -8%;
  width: clamp(340px, 32vw, 460px);
  opacity: 0.55;
  transform: rotate(45deg);
  filter: saturate(0.88);
}

/* (2) md-tr — branch-2 ימין-עליון, אקצנט בקצה הטקסט מעל ה-eyebrow.
   02 השתמש ב-branch-2 כ-lg שמאל-תחתון; כאן md ימין-עליון = תפקיד שונה. */
.agenda-whisper--md-tr {
  top: -5%;
  right: -5%;
  width: clamp(160px, 18vw, 220px);
  opacity: 0.45;
  transform: rotate(-30deg);
  filter: saturate(0.85);
}

/* (3) sm-tl — leaf-4 שמאל-עליון, עלים מציצים מעל קצה ה-arch.
   02 השתמש ב-leaf-4 ב-sm שמאל-אמצע; כאן sm שמאל-עליון = פינה אחרת. */
.agenda-whisper--sm-tl {
  top: -3%;
  left: -3%;
  width: clamp(100px, 11vw, 140px);
  opacity: 0.75;     /* PNG עם שטח שקוף */
  transform: rotate(-45deg);
  filter: saturate(0.9);
}

/* (4) md-br — branch-1 ימין-תחתון אלכסוני (r18b → r18c → r18d).
   ----
   r18b: bottom -5%, right -5%, width 260 → נגע בכפתור "איך מגיעים"
   r18c: bottom -10%, right -12%, width 210 → כמעט נעלם, אובד
   r18d (נקודת אמצע): bottom -7%, right -8%, width 240
   ענף נוכח ויפה, כפתור חופשי. */
.agenda-whisper--md-br {
  bottom: -7%;
  right: -8%;
  width: clamp(175px, 19vw, 240px);
  opacity: 0.50;
  transform: rotate(-135deg);
  filter: saturate(0.88);
}

/* קונפטי נקודות טרקוטה — בצד ימין של הקומפוזיציה */
.agenda-dots {
  position: absolute;
  inset: 8% -6% 8% 14%;
  pointer-events: none;
  opacity: 0.45;
  background-image:
    radial-gradient(circle, var(--c-terracotta) 1.4px, transparent 1.8px),
    radial-gradient(circle, var(--c-terracotta) 1px, transparent 1.4px);
  background-size: 78px 78px, 56px 56px;
  background-position: 0 0, 26px 30px;
  mix-blend-mode: multiply;
  mask-image: radial-gradient(ellipse at 30% 50%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 50%, #000 30%, transparent 75%);
}

/* ============================================================
   רשימת לוח הזמנים (פורמט "תפריט" מהתבנית)
   כל פריט: כותרת+תיאור מימין, שעה משמאל, קו מקווקו ביניהם
   ============================================================ */
.agenda-list {
  list-style: none;
  margin: 0 0 clamp(1.8rem, 4vw, 2.5rem) 0;
  padding: 0;
}
.agenda-item {
  padding-block: clamp(0.8rem, 1.8vw, 1.15rem);
}
.agenda-item + .agenda-item {
  border-top: 1px solid rgba(120, 120, 120, 0.12);
}

.item-row {
  display: flex;
  align-items: end;
  gap: 0.65rem;
}
.item-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.3vw, 1.3rem);
  font-weight: 500;
  color: var(--c-ink);
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
}
.item-leader {
  flex: 1;
  height: 0;
  border-bottom: 1px dotted rgba(120, 120, 120, 0.45);
  margin-bottom: 0.35em;
  min-width: 0.8rem;
}
.item-time {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.3vw, 1.2rem);
  font-weight: 500;
  color: var(--c-terracotta);
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}
.item-desc {
  margin: 0.35em 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--c-grey);
}

/* ---------- רספונסיביות נייד ---------- */
@media (max-width: 860px) {
  .agenda {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: auto;
    padding-block-start: clamp(2rem, 6vw, 3rem);
    padding-block-end: clamp(3rem, 8vw, 4rem);
    padding-inline-start: clamp(1.6rem, 6vw, 2.4rem);
    padding-inline-end: clamp(1.2rem, 5vw, 2rem);
    gap: clamp(2.5rem, 8vw, 3.5rem);
    text-align: right;
  }
  .agenda-art {
    order: -1;
    height: clamp(380px, 60vh, 520px);
    justify-self: stretch;
  }
  .agenda-overlap {
    bottom: -8%;
    right: 6%;
    width: 38%;
  }
  .agenda-text { max-width: 100%; }
  .agenda-eyebrow { white-space: normal; letter-spacing: 0.26em; }
  .agenda-title-line { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  /* עלים בנייד (r18c) — שינוי מדיניות מהותי.
     ----
     רקע: עד r18b הסתרנו אסטים במובייל ("לפעמים אפס במובייל"). זה היה
     שגוי לפרויקט הזה — האתר נשלח בעיקר ב-WhatsApp ונפתח בעיקר בנייד.
     הנייד הוא הפלטפורמה העיקרית, ולכן חייב להיות מעוצב כמו הדסקטופ.
     ----
     מתכון נייד: 2-3 אסטים מותאמים לעמודה צרה. במבנה אנכי (תמונה למעלה,
     טקסט+רשימה למטה) — אסטים בפינות התמונה (עליונות) + פינה תחתונה
     שלא חוסמת CTA. */
  .agenda-whisper { display: block; }

  /* (1) xl-bl במובייל — branch-3 בפינה שמאלית-תחתונה של הסקשן.
     רוב הענף מחוץ למסך, חלק מציץ מתחת לטקסט/CTA. */
  .agenda-whisper--xl-bl {
    bottom: -5%;
    left: -12%;
    width: 38vw;
    opacity: 0.45;
  }

  /* (2) sm-tl במובייל — leaf-4 בקצה השמאלי-עליון של הסקשן,
     מציץ מעל הקצה השמאלי-עליון של תמונת heart-frame. */
  .agenda-whisper--sm-tl {
    top: -2%;
    left: -3%;
    width: 22vw;
    opacity: 0.7;
  }

  /* (3) md-tr במובייל — branch-2 בקצה הימני-עליון, מעל ה-art.
     לא חוסם את ה-eyebrow שמתחיל מתחת לתמונה (במובייל ה-eyebrow אחרי ה-art). */
  .agenda-whisper--md-tr {
    top: -3%;
    right: -8%;
    width: 28vw;
    opacity: 0.40;
  }

  /* md-br מוסתר בנייד — בעמודה הצרה הוא יחסום את ה-CTA בכל כיול סביר.
     שני האסטים העליונים + xl-bl התחתון נותנים נוכחות מאוזנת. */
  .agenda-whisper--md-br { display: none; }

  /* רשימת לוח הזמנים בנייד */
  .item-title { font-size: clamp(1.05rem, 4.6vw, 1.25rem); }
  .item-time  { font-size: clamp(1rem, 4.4vw, 1.2rem); }
  .item-desc  { font-size: 0.9rem; }
}

/* ─── G2 (Agenda): 10 אסטים לאורך הצדדים — שכפול G1c לסקשן ארוך-בינוני ──────
   Mobile 1.6×vp ארוך, Desktop 1.0×vp. ערבוב טרקוטה+sage מאוזן (5+5).
   8 ענפים + 2 עלים, alternating L→R לאורך הסקשן. z:0 + pointer-events:none. */
.agenda-side {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* G2b iter2: l1 14%→18%, l4 הוסר מ-HTML (היה חופף xl-bl). מקטינים מעט. */
.agenda-side--l1 { top: 18%; left: -4%; width: clamp(75px, 12vw, 135px); opacity: 0.42; filter: hue-rotate(65deg) saturate(0.52) brightness(0.92); transform: rotate(-22deg); }
.agenda-side--l2 { top: 28%; left: -3%; width: clamp(80px, 13vw, 155px); opacity: 0.46; transform: rotate(18deg) scaleX(-1); }
.agenda-side--l3 { top: 45%; left: -4%; width: clamp(60px, 10vw, 110px); opacity: 0.45; filter: hue-rotate(60deg) saturate(0.55) brightness(0.92); transform: rotate(-35deg); }
.agenda-side--l4 { top: 62%; left: -5%; width: clamp(80px, 13vw, 155px); opacity: 0.44; transform: rotate(-12deg); }
.agenda-side--l5 { top: 78%; left: -3%; width: clamp(80px, 13vw, 150px); opacity: 0.42; filter: hue-rotate(62deg) saturate(0.50) brightness(0.95); transform: rotate(35deg) scaleX(-1); }

.agenda-side--r1 { top: 24%; right: -5%; width: clamp(80px, 13vw, 155px); opacity: 0.44; transform: rotate(160deg); }
.agenda-side--r2 { top: 38%; right: -3%; width: clamp(80px, 13vw, 155px); opacity: 0.42; filter: hue-rotate(64deg) saturate(0.52) brightness(0.93); transform: rotate(190deg); }
.agenda-side--r3 { top: 54%; right: -4%; width: clamp(75px, 12vw, 145px); opacity: 0.46; transform: rotate(180deg) scaleX(-1); }
.agenda-side--r4 { top: 70%; right: -3%; width: clamp(65px, 10vw, 115px); opacity: 0.45; filter: hue-rotate(58deg) saturate(0.55); transform: rotate(-30deg); }
.agenda-side--r5 { top: 80%; right: -4%; width: clamp(80px, 13vw, 150px); opacity: 0.44; transform: rotate(155deg); }

/* ============================================================
   Section 04 — מפה וניווט / איך מגיעים אלינו
   קצב מתחלף: מפה מימין (start), טקסט משמאל (end) — כמו סקשן 02
   ============================================================ */
.map {
  position: relative;
  min-height: 100vh;
  display: grid;
  /* מפה רחבה (start=ימין ב-RTL), טקסט צר (end=שמאל ב-RTL) */
  grid-template-columns: 7fr 5fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding-block: clamp(3rem, 8vw, 6rem);
  /* ריווח אסימטרי: יותר אוויר בצד הטקסט (end=שמאל ב-RTL) */
  padding-inline-start: clamp(1.5rem, 4vw, 4rem);
  padding-inline-end: clamp(2rem, 9vw, 7rem);
  background: transparent;     /* r17b — מציג את שמנת ה-body */
  overflow: hidden;
}

/* ---------- עמודת טקסט (שמאל) ---------- */
.map-text {
  position: relative;
  z-index: 2;
  max-width: 480px;
  justify-self: end;   /* ב-RTL: end = שמאל */
}

/* ---------- עמודת אומנות (ימין) — כרטיס מפה ---------- */
.map-art {
  position: relative;
  width: 100%;
  height: clamp(460px, 72vh, 720px);
  justify-self: start;   /* ב-RTL: start = ימין */
  z-index: 1;            /* r19 — מעל .map-whisper שב-z:0, יוצר שכבות */
}

/* כרטיס מפה — פינות מעוגלות רגילות (r19e — פתרון שורש לכתמים שחורים).
   ----
   ההיסטוריה: עד r19d היה border-bottom-left-radius: clamp(160px, 26vw, 280px) =
   קשת ענקית בפינה השמאלית-תחתונה (כדי "לפנות" לטקסט בצד שמאל ולתאם לקשתות של
   01/02/03). זה אילץ את ה-iframe המלבני להיחתך לצורה לא-מלבנית, וגוגל השאיר
   edge artifacts שחורים בקצה ה-WebGL canvas שלהם. 4 ניסיונות לעקוף (clip-path,
   overlays, isolation, translateZ) לא פתרו לחלוטין.
   ----
   הפתרון שורש: לוותר על הקשת. פינות 16px אחידות = אין יותר חיתוך אגרסיבי,
   ה-iframe מלבני נקי, אין שום edge artifact. הסגנון נשמר — 16px תואם לכרטיסי
   המידע (.map-overlap), הפולארואידים (.album-polaroid) וכל הכרטיסים באתר.
   הקשת הדרמטית שמורה לתמונות (.story-arch, .agenda-arch) שיש עליהן שליטה
   מלאה — לא ל-iframes. */
.map-arch {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--c-beige);
  box-shadow:
    0 24px 48px -28px rgba(195, 147, 124, 0.30),
    0 8px 18px -10px rgba(195, 147, 124, 0.18);
}
.map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--c-beige);   /* r19c — מונע flash שקוף/לבן/כהה בטעינה */
  filter: saturate(0.78) contrast(0.96) brightness(1.03);
  /* r19e — אין יותר צורך ב-clip-path: ה-arch כעת מלבן עם פינות 16px,
     ה-iframe מתאים בדיוק, אין חיתוך אגרסיבי, אין edge artifacts לחתוך. */
}

/* סמן טרקוטה מודגש במרכז המפה — חזותי בלבד, לא לוכד קליקים */
.map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  margin-left: -9px;
  pointer-events: none;
  z-index: 4;
}
.map-pin-dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--c-terracotta);
  box-shadow:
    0 0 0 3px var(--c-cream),
    0 8px 18px -6px rgba(168, 119, 96, 0.65);
}
.map-pin-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--c-terracotta);
  opacity: 0;
  animation: pinPulse 2.6s ease-out infinite;
}
@keyframes pinPulse {
  0%   { transform: scale(0.5); opacity: 0; }
  35%  { opacity: 0.55; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* כרטיס מידע חופף — שם המקום, מחליף את תמונת ה-overlap בסקשנים הקודמים */
.map-overlap {
  position: absolute;
  bottom: -7%;
  left: 18%;
  width: 28%;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  background: var(--c-cream-soft);
  border: 1px solid rgba(195, 147, 124, 0.35);
  z-index: 3;
  /* צל בפינה ימנית-עליונה (כמו הסקשנים הקודמים).
     r19c — היה rgba(58,51,44,*) = #3A332C כהה → יצר "כתם שחור" באזור שמאל
     של המפה (הצל הראשון 10px -10px יוצא מהקלף כלפי שמאל-עליון, לתוך החלל
     שמאחורי הקצה השמאלי של ה-arch). הוחלף לטרקוטה רכה. */
  box-shadow:
    10px -10px 22px -6px rgba(195, 147, 124, 0.18),
    0 18px 36px -18px rgba(195, 147, 124, 0.28);
  /* פריסה פנימית — טור ממורכז */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(1.2rem, 2.2vw, 1.8rem) clamp(0.9rem, 1.8vw, 1.4rem);
  gap: clamp(0.45rem, 1vw, 0.7rem);
}
.map-overlap-mark {
  width: clamp(28px, 3.4vw, 38px);
  height: clamp(28px, 3.4vw, 38px);
  border-radius: 50%;
  background: var(--c-terracotta);
  position: relative;
  box-shadow: 0 6px 14px -6px rgba(168, 119, 96, 0.7);
  margin-bottom: 0.25rem;
}
.map-overlap-mark::after {
  content: "";
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: var(--c-cream);
}
.map-overlap-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--c-grey);
  text-transform: uppercase;
  letter-spacing: 0.3em;
}
.map-overlap-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--c-ink);
  letter-spacing: 0.02em;
}
.map-overlap-desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--c-grey);
  line-height: 1.3;
}

/* קונפטי נקודות טרקוטה */
.map-dots {
  position: absolute;
  inset: 8% 14% 8% -6%;
  pointer-events: none;
  opacity: 0.45;
  background-image:
    radial-gradient(circle, var(--c-terracotta) 1.4px, transparent 1.8px),
    radial-gradient(circle, var(--c-terracotta) 1px, transparent 1.4px);
  background-size: 78px 78px, 56px 56px;
  background-position: 0 0, 26px 30px;
  mix-blend-mode: multiply;
  mask-image: radial-gradient(ellipse at 70% 50%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 30%, transparent 75%);
}

/* עיטור בוטני · 4 אלמנטים בעומק (r19) — מתכון אסטים מאושר עם ריסון.
   ----
   ייחודיות 04: ה-iframe של Google Maps עמוס וצבעוני בפני עצמו, ולכן:
   (א) opacity ממוצע 0.42 (לעומת 0.55 ב-02/03)
   (ב) saturate 0.78-0.82 (לעומת 0.85-0.92)
   (ג) בלי branch-1 (הצבעוני) — שני branch-2 בפינות הפוכות + branch-3 + leaf-4
   (ד) פינות שונות מ-02 (lg-bl/md-tl/sm/xl-tr/xl-br) ומ-03 (xl-bl/md-tr/sm-tl/md-br):
       כאן md-tl/sm-bl/md-tr/lg-br = שילוב שלא הופיע. */
.map-whisper {
  position: absolute;
  height: auto;
  z-index: 0;          /* מתחת ל-.map-art (z:1) → "מאחורי המפה" */
  pointer-events: none;
}

/* (1) md-tl — branch-2 שמאל-עליון, אקצנט מעל קצה ה-eyebrow של הטקסט.
   זווית 50° = ענף עולה אלכסונית מימין לשמאל. width משווה ל-md ב-02. */
.map-whisper--md-tl {
  top: -5%;
  left: -6%;
  width: clamp(170px, 19vw, 240px);
  opacity: 0.42;
  transform: rotate(50deg);
  filter: saturate(0.82);
}

/* (2) sm-bl — leaf-4 שמאל-תחתון, עלים קטנים מתחת לכפתורי ה-CTA.
   רוב העלה מחוץ למסך, רק קצה מציץ. לא חוסם CTA (כפתורים ב-justify-self:end
   ושני כפתורים ברצף — sm-bl יושב מתחת לקצה התחתון של הטקסט). */
.map-whisper--sm-bl {
  bottom: 3%;
  left: -2%;
  width: clamp(85px, 9vw, 115px);
  opacity: 0.55;
  transform: rotate(160deg);
  filter: saturate(0.85);
}

/* (3) md-tr — branch-3 ימין-עליון, מציץ מעבר לקצה העליון-ימני של המפה.
   מאחורי ה-map-art (z:0 < z:1) → השפעת "ענף מאחורי המסגרת". */
.map-whisper--md-tr {
  top: -6%;
  right: -6%;
  width: clamp(150px, 17vw, 210px);
  opacity: 0.40;
  transform: rotate(-35deg);
  filter: saturate(0.80);
}

/* (4) lg-br — branch-2 (שני) ימין-תחתון אלכסוני, ענף גדול שעולה אלכסונית
   מהפינה הימנית-תחתונה. זווית -150° = "שיקוף" של md-tl ביחס למרכז. */
.map-whisper--lg-br {
  bottom: -10%;
  right: -8%;
  width: clamp(230px, 26vw, 320px);
  opacity: 0.32;
  transform: rotate(-150deg);
  filter: saturate(0.78);
}

/* ============================================================
   שני כפתורי ניווט — Waze ראשי (מילוי), Google Maps משני (קווי)
   ============================================================ */
.map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.7rem, 1.5vw, 1rem);
  margin-top: 0.25rem;
}
/* CTA ראשי — מילוי טרקוטה (Waze) */
.map-cta--primary {
  background: var(--c-terracotta);
  color: var(--c-cream);
}
.map-cta--primary:hover {
  background: var(--c-terracotta-d);
  color: var(--c-cream);
}
/* CTA משני נשאר עם סגנון המתאר המשותף — אין צורך באוברייד */

/* ---------- רספונסיביות נייד ---------- */
@media (max-width: 860px) {
  .map {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: auto;
    padding-block-start: clamp(2rem, 6vw, 3rem);
    padding-block-end: clamp(3rem, 8vw, 4rem);
    padding-inline-start: clamp(1.2rem, 5vw, 2rem);
    padding-inline-end: clamp(1.6rem, 6vw, 2.4rem);
    gap: clamp(2.5rem, 8vw, 3.5rem);
    text-align: right;
  }
  .map-art {
    order: -1;
    /* r19b — הוגדל מ-(380, 65vh, 540) ל-(440, 70vh, 600) כדי שהמפה תיראה יציבה
       בעמודה הצרה ותכיל את צ'יפ "פתיחה במפות" + הסמן בלי לחתוך תוכן משמעותי. */
    height: clamp(440px, 70vh, 600px);
    justify-self: stretch;
  }
  /* r19f — קשת מוחזרת רק בנייד.
     בדסקטופ (r19e) הקשת הענקית 280px גרמה ל-WebGL edge artifacts שחורים של גוגל.
     בנייד: הקשת קטנה יותר (80-150px), ובנוסף ה-.map-overlap card יושב בדיוק על
     הפינה השמאלית-תחתונה ומסתיר אזורי artifacts פוטנציאליים. כאן הקשת מחזירה
     את הסגנון הדרמטי שתואם לסקשנים 02/03 בלי תקלות ויזואליות. */
  .map-arch {
    border-bottom-left-radius: clamp(80px, 22vw, 150px);
  }
  .map-overlap {
    bottom: -8%;
    left: 6%;
    width: 44%;
  }
  .map-overlap-title { font-size: clamp(1.05rem, 4.2vw, 1.3rem); }
  .map-overlap-desc  { font-size: 0.85rem; }
  .map-overlap-eyebrow { font-size: 0.62rem; letter-spacing: 0.24em; }
  .map-text { max-width: 100%; }
  .map-eyebrow { white-space: normal; letter-spacing: 0.26em; }
  .map-title-line { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .map-actions { flex-direction: column; align-items: stretch; }
  .map-cta { text-align: center; }

  /* אסטים בנייד (r19f — הגדלה משמעותית, אפקט שכבות).
     ----
     היסטוריה:
     r19  → md-tl/md-tr offsets לא-סימטריים → "פזורים".
     r19b → mirror סימטרי, 22vw/14vw — מסודר אבל קטן מדי, "כמעט לא נראה".
     r19f → md-tl נשאר קטן+סימטרי (אקצנט), אבל md-tr ו-sm-bl גדלים משמעותית:
            * md-tr 50vw → חופף על פינת המפה (מתחת ל-map-art z:1 → אפקט שכבות)
            * sm-bl 52vw → חצי מאחורי הכפתורים (מתחת ל-text z:2 → אפקט שכבות)
            opacity מוגבר (0.45-0.55) כדי שיראו, אבל לא מסתיר תוכן. */
  .map-whisper { display: block; }

  /* md-tl — אקצנט קטן בקצה השמאלי-עליון של הסקשן (לפני המפה ב-RTL נייד) */
  .map-whisper--md-tl {
    top: -3%;
    left: -8%;
    width: 22vw;
    opacity: 0.38;
  }

  /* md-tr — גדול (r19f→r19g), z:3 = מעל ה-iframe (היה z:0 מאחוריו).
     אפקט הפוך: העלה מציץ על פינת המפה הימנית-עליונה, מסתיר חלק קטן ממנה.
     שמור מאזור הסיכה האדומה/מרכז המפה/הצ'יפ Kahi event resort. */
  .map-whisper--md-tr {
    top: -4%;
    right: -14%;
    width: 50vw;
    opacity: 0.50;
    z-index: 3;
  }

  /* sm-bl — הועלה לאזור מעל הכפתורים (r19g): היה bottom:3% (מתחת לכפתורים,
     מאחוריהם). עכשיו bottom:22% = סמוך לטקסט "וכ-30 דקות נסיעה מתל אביב",
     מתחת ל-eyebrow/title. הוקטן מ-52vw ל-42vw כדי לא לכסות את הטקסט.
     transform:rotate(-30deg) overrides את ה-160deg של הדסקטופ → פונה
     כלפי מעלה ומעט שמאלה, כעלה גדל כלפי השמיים. */
  .map-whisper--sm-bl {
    bottom: 22%;
    left: -10%;
    width: 42vw;
    opacity: 0.50;
    transform: rotate(-30deg);
  }

  /* lg-br מוסתר בנייד — בעמודה הצרה ייחסם CTA בכל כיול סביר. */
  .map-whisper--lg-br { display: none; }
}

/* ─── G2 (Map): 4 sage accents — שפת סקשן 00 ערבוב גוונים ─────────────────────
   בלי מרכזי (המפה אינטראקטיבית). pointer-events:none — לא חוסם את ה-iframe. */
.map-sage {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  filter: hue-rotate(62deg) saturate(0.52) brightness(0.92);
}
/* G2b iter2 — 4 sage מפוזרים אנכית בלי חפיפה: ml (25%) - tr (42%) - mr (65%) - bl (78%). */
.map-sage--ml { top: 25%;     left: -3%;  width: clamp(60px, 10vw, 110px); opacity: 0.44; transform: rotate(-25deg); }
.map-sage--tr { top: 42%;     right: -3%; width: clamp(70px, 11vw, 135px); opacity: 0.40; transform: rotate(155deg); }
.map-sage--mr { top: 65%;     right: -3%; width: clamp(55px, 9vw, 100px);  opacity: 0.42; transform: rotate(35deg); }
.map-sage--bl { bottom: 8%;   left: -4%;  width: clamp(75px, 12vw, 150px); opacity: 0.42; transform: rotate(-12deg); }

/* ============================================================
   Section 05 — RSVP / אישור הגעה
   קצב מתחלף הפוך מסקשן 04: טקסט מימין (start), טופס משמאל (end)
   ============================================================ */
.rsvp {
  position: relative;
  min-height: 100vh;
  display: grid;
  /* טקסט צר (start=ימין ב-RTL), טופס רחב (end=שמאל ב-RTL) */
  grid-template-columns: 5fr 7fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding-block: clamp(3rem, 8vw, 6rem);
  /* ריווח אסימטרי: יותר אוויר בצד הטקסט (start=ימין ב-RTL) */
  padding-inline-start: clamp(2rem, 9vw, 7rem);
  padding-inline-end: clamp(1.5rem, 4vw, 4rem);
  background: transparent;     /* r17b — מציג את שמנת ה-body */
  overflow: hidden;
}

/* ---------- עמודת טקסט (ימין) ---------- */
.rsvp-text {
  position: relative;
  z-index: 2;
  max-width: 480px;
  justify-self: start;   /* ב-RTL: start = ימין */
}

/* ---------- עמודת אומנות (שמאל) — כרטיס הטופס + עיטורים ---------- */
.rsvp-art {
  position: relative;
  width: 100%;
  justify-self: end;     /* ב-RTL: end = שמאל */
  /* גובה גמיש לפי תוכן הטופס */
  min-height: clamp(440px, 60vh, 620px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- הטופס עצמו ככרטיס עם קשת בפינה ימנית-עליונה (פונה לטקסט בימין) ---------- */
.rsvp-form {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 540px;
  box-sizing: border-box;
  background: var(--c-cream-soft);
  border: 1px solid rgba(195, 147, 124, 0.22);
  /* קשת בפינה ימנית-עליונה — פונה לטקסט ב-RTL */
  border-top-right-radius: clamp(120px, 18vw, 200px);
  border-top-left-radius: 16px;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 16px;
  padding: clamp(1.8rem, 3.6vw, 2.8rem) clamp(1.7rem, 3.4vw, 2.6rem);
  box-shadow:
    0 30px 80px -40px rgba(58, 51, 44, 0.32),
    0 12px 32px -16px rgba(195, 147, 124, 0.25);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.8vw, 1.35rem);
}
/* בני־הטופס לא חורגים מה-content-box של הכרטיס */
.rsvp-form > *,
.rsvp-reveal-inner > * {
  min-width: 0;
  max-width: 100%;
}

/* ---------- שדה בודד — תווית מעל קלט ---------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;          /* מונע גלישה כשה-input ב-grid/flex */
}
.field-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--c-grey);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  /* נגד גלישה: letter-spacing מוסיף trailing space לאחרי האות האחרונה.
     ב-RTL זה דוחף את הקצה הימני (start) החוצה. padding-inline-end מקזז */
  padding: 0 0.24em 0 0;
  text-align: start;     /* ב-RTL: ימין */
}
.field-input {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--c-ink);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid rgba(120, 120, 120, 0.32);
  border-radius: 0;
  padding: 0.55rem 0;
  outline: none;
  width: 100%;           /* מבטיח שהקלט נשאר בתוך גבולות ה-field */
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  transition:
    border-color 0.25s var(--ease),
    color 0.25s var(--ease);
  -webkit-appearance: none;
  appearance: none;
  text-align: start;     /* ב-RTL: ימין */
}
.field-input::placeholder {
  color: rgba(120, 120, 120, 0.55);
  text-align: start;
}
.field-input:focus {
  border-bottom-color: var(--c-terracotta);
}
.field-input:invalid:not(:placeholder-shown) {
  border-bottom-color: rgba(168, 119, 96, 0.8);
}
/* שדה צר — לדוגמה "מספר אורחים" כשהוא לבד.
   align-self: start ב-flex column ב-RTL = צמוד לימין; width מגדיר רוחב מידתי. */
.field--narrow {
  width: clamp(10rem, 26vw, 13rem);
  align-self: start;
}

/* ============================================================
   Reveal — שלבי טופס שנפתחים בהדרגה לפי data-attending
   טכניקה: grid-template-rows 0fr → 1fr לאנימציית גובה אוטומטי
   ============================================================ */
.rsvp-reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    grid-template-rows 0.55s var(--ease),
    opacity 0.45s var(--ease),
    transform 0.45s var(--ease);
  pointer-events: none;
}
.rsvp-reveal-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.8vw, 1.35rem);
}

/* שלב 2 (after-choice) נחשף כשכל ערך נבחר ל-attending (yes/maybe/no) */
.rsvp-form[data-attending="yes"]   [data-reveal="after-choice"],
.rsvp-form[data-attending="maybe"] [data-reveal="after-choice"],
.rsvp-form[data-attending="no"]    [data-reveal="after-choice"] {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* שלב 3 (with-guests) נחשף במסלולי "מגיעים" + "מתלבט/ת" — שניהם דורשים
   מספר אורחים. במסלול "לא נוכל להגיע" השדה נשאר מוסתר. */
.rsvp-form[data-attending="yes"]   [data-reveal="with-guests"],
.rsvp-form[data-attending="maybe"] [data-reveal="with-guests"] {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ---------- קבוצת radio מעוצבת ככרטיסיות ---------- */
.field--choice { gap: 0.6rem; }
.choice-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* r30 — שלישייה אחידה (כן/אולי/לא) */
  gap: clamp(0.5rem, 1.2vw, 0.8rem);
}
.choice {
  position: relative;
  cursor: pointer;
  user-select: none;
}
/* הסתרת ה-radio הנייטיב, שמירה על נגישות מקלדת */
.choice input[type="radio"] {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.choice-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.85rem, 1.6vw, 1rem) 1rem;
  border: 1.5px solid rgba(195, 147, 124, 0.5);
  border-radius: 50px;
  background: transparent;
  color: var(--c-terracotta);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-align: center;
  transition:
    background 0.25s var(--ease),
    color 0.25s var(--ease),
    border-color 0.25s var(--ease),
    transform 0.25s var(--ease);
}
.choice:hover .choice-box {
  border-color: var(--c-terracotta);
  background: rgba(195, 147, 124, 0.08);
}
.choice input[type="radio"]:focus-visible + .choice-box {
  outline: 2px solid var(--c-terracotta);
  outline-offset: 3px;
}
.choice input[type="radio"]:checked + .choice-box {
  background: var(--c-terracotta);
  color: var(--c-cream);
  border-color: var(--c-terracotta);
}

/* ---------- כפתור שליחה — primary pill עם spinner ---------- */
.rsvp-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--c-cream);
  background: var(--c-terracotta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 2.6rem;
  border: 1.5px solid var(--c-terracotta);
  border-radius: 50px;
  cursor: pointer;
  margin-top: 0.25rem;
  transition:
    background 0.3s var(--ease),
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    opacity 0.3s var(--ease);
}
.rsvp-submit:hover:not(:disabled) {
  background: var(--c-terracotta-d);
  border-color: var(--c-terracotta-d);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -16px rgba(168, 119, 96, 0.7);
}
.rsvp-submit:disabled        { cursor: not-allowed; opacity: 0.55; }
.rsvp-submit:disabled.is-sending { cursor: progress; opacity: 0.85; }
.rsvp-submit-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(251, 248, 241, 0.45);
  border-top-color: var(--c-cream);
  border-radius: 50%;
  animation: rsvpSpin 0.85s linear infinite;
}
.rsvp-submit.is-sending .rsvp-submit-spinner { display: inline-block; }
.rsvp-submit.is-sending .rsvp-submit-label::after { content: "..."; }
@keyframes rsvpSpin { to { transform: rotate(360deg); } }

/* ---------- הודעת סטטוס ---------- */
.rsvp-msg {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--c-grey);
}
.rsvp-msg.is-err { color: #B85C5C; }
.rsvp-msg.is-ok  { color: var(--c-terracotta-d); }

/* ---------- מצב הצלחה — מחליף את תוכן הטופס ---------- */
.rsvp-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(0.5rem, 1.5vw, 1rem) 0;
  gap: 0.65rem;
}
.rsvp-done .done-emoji {
  font-size: clamp(2.4rem, 5vw, 3rem);
  line-height: 1;
  margin-bottom: 0.3rem;
}
.rsvp-done h3 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  font-weight: 500;
  color: var(--c-terracotta);
  line-height: 1.15;
  margin: 0;
}
.rsvp-done p {
  font-size: 1rem;
  color: var(--c-grey);
  max-width: 36ch;
  line-height: 1.55;
  margin: 0;
}

/* כפתור "הוסף ליומן" — pill ghost עדין, מופיע רק במסלול "מגיעים" */
.rsvp-cal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: clamp(0.9rem, 2vw, 1.3rem);
  padding: 0.75rem 1.9rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--c-terracotta);
  background: transparent;
  border: 1.5px solid var(--c-terracotta);
  border-radius: 50px;
  letter-spacing: 0.14em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    background 0.3s var(--ease),
    color 0.3s var(--ease),
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.rsvp-cal-btn:hover {
  background: var(--c-terracotta);
  color: var(--c-cream);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -16px rgba(168, 119, 96, 0.7);
}
.rsvp-cal-btn:focus-visible {
  outline: 2px solid var(--c-terracotta);
  outline-offset: 3px;
}
.rsvp-cal-icon {
  font-size: 1.1em;
  line-height: 1;
}

/* עיטור בוטני · 4 אלמנטים בעומק (r20) — מתכון אסטים מאושר עם ריסון לטופס.
   ----
   ייחודיות 05: הסקשן הוא טופס אינטראקטיבי (שדות, choice boxes, כפתור שליחה).
   ה-form יושב במרכז עמודת art (max-width: 540px) ומקבל פוקוס. האסטים יושבים
   בקצוות הסקשן (לא בתוך .rsvp-art) ולא מתחת למרכז הטופס. opacity ממוצע 0.43
   (דומה ל-04 הריסון). branch-1 חוזר אחרי שלא היה ב-04, אבל בפינה הפוכה (lg-bl).
   ----
   קצב מתחלף הפוך מ-04: טקסט-ימין, טופס-שמאל. האיזון הדו-צדדי שומר 2 בכל צד. */
.rsvp-whisper {
  position: absolute;
  height: auto;
  z-index: 0;          /* מתחת ל-.rsvp-text (z:2) ו-.rsvp-form (z:2) — מציצים מהצדדים */
  pointer-events: none;
}

/* (1) sm-tr — leaf-4 ימין-עליון, אקצנט קל מעל eyebrow "נשמח לראותכם".
   פינה לא בשימוש ב-02 (xl-tr) ולא ב-03 (sm-tl); ייחודית ל-05. */
.rsvp-whisper--sm-tr {
  top: -3%;
  right: -4%;
  width: clamp(95px, 10vw, 130px);
  opacity: 0.70;     /* PNG עם שטח שקוף משמעותי */
  transform: rotate(-50deg);
  filter: saturate(0.90);
}

/* (2) md-br — branch-3 ימין-תחתון, ענף שיורד מהפינה הימנית-תחתונה של הסקשן.
   מתחת ל-lede, רחוק מטקסט. branch-3 השתמש ב-02 ימין-תחתון ו-03 שמאל-תחתון —
   כאן 05 ימין-תחתון = פינה לא מדויקת ל-02 (שם xl-br) ולא ל-03 (xl-bl). */
.rsvp-whisper--md-br {
  bottom: -6%;
  right: -5%;
  width: clamp(180px, 20vw, 240px);
  opacity: 0.40;
  transform: rotate(-145deg);
  filter: saturate(0.85);
}

/* (3) md-tl — branch-2 שמאל-עליון, מציץ מעל קצה הטופס בצד השמאל הסקשן.
   הטופס יושב משמאל; קצה הטופס משמאל-עליון = קצה הסקשן. branch-2 השתמש
   ב-02 lg שמאל-תחתון ו-03 md-tr — כאן md-tl = פינה שונה. */
.rsvp-whisper--md-tl {
  top: -5%;
  left: -5%;
  width: clamp(170px, 19vw, 230px);
  opacity: 0.42;
  transform: rotate(-55deg);
  filter: saturate(0.88);
}

/* (4) lg-bl — branch-1 שמאל-תחתון אלכסוני, ענף דרמטי שעולה מהפינה השמאלית-תחתונה.
   branch-1 חוזר אחרי r20: לא בשימוש ב-04 (ריסון מול מפה). כאן הוא חוזר ב-lg-bl
   = פינה הפוכה משלו ב-02 (xl-tr) וב-03 (md-br). מאוזן ל-md-tl בקצה ההפוך. */
.rsvp-whisper--lg-bl {
  bottom: -10%;
  left: -8%;
  width: clamp(280px, 30vw, 380px);
  opacity: 0.42;
  transform: rotate(45deg);
  filter: saturate(0.85);
}

/* ---------- קונפטי טרקוטה ---------- */
.rsvp-dots {
  position: absolute;
  inset: 8% -6% 8% 14%;
  pointer-events: none;
  opacity: 0.45;
  background-image:
    radial-gradient(circle, var(--c-terracotta) 1.4px, transparent 1.8px),
    radial-gradient(circle, var(--c-terracotta) 1px, transparent 1.4px);
  background-size: 78px 78px, 56px 56px;
  background-position: 0 0, 26px 30px;
  mix-blend-mode: multiply;
  mask-image: radial-gradient(ellipse at 30% 50%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 50%, #000 30%, transparent 75%);
  z-index: 0;
}

/* ---------- רספונסיביות נייד ---------- */
@media (max-width: 860px) {
  .rsvp {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: auto;
    padding-block-start: clamp(2.5rem, 8vw, 3.5rem);
    padding-block-end: clamp(3rem, 8vw, 4rem);
    padding-inline-start: clamp(1.2rem, 5vw, 2rem);
    padding-inline-end: clamp(1.2rem, 5vw, 2rem);
    gap: clamp(1.8rem, 6vw, 2.5rem);
    text-align: right;
  }
  .rsvp-text { max-width: 100%; }
  .rsvp-eyebrow { white-space: normal; letter-spacing: 0.26em; }
  .rsvp-title-line { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .rsvp-art {
    min-height: auto;
    justify-self: stretch;
  }
  .rsvp-form {
    max-width: 100%;
    padding: clamp(1.4rem, 6vw, 2rem) clamp(1.2rem, 5vw, 1.6rem);
    border-top-right-radius: clamp(100px, 24vw, 160px);
  }
  .field--narrow { max-width: 100%; align-self: stretch; }
  .rsvp-submit { width: 100%; padding-block: 1.05rem; }

  /* r21 — תיקון "האם תגיעו?" בנייד.
     ----
     ה-`<legend class="field-label">` של ה-choice fieldset (eyebrow uppercase
     עם letter-spacing 0.24em) חרג זעיר מצד ימין (start ב-RTL) של ה-fieldset
     בעמודה הצרה — האות 'ה' של "האם" נגעה כמעט בקצה. הוספת padding-inline-start
     ב-0.5em דוחפת את הטקסט פנימה זעיר. (בדסקטופ יש כבר 0.24em — נטו תוספת
     0.5em כולל בנייד כדי להבטיח נשימה.) */
  .field--choice > .field-label {
    padding-inline-start: 0.5em;
  }

  /* r30 — 3 כפתורי בחירה בנייד (במקום 2). בעמודה הצרה (375px) שלוש תיבות
     ברוחב ~90-100px כל אחת. "לא מגיעים" (8 תווים + רווח + letter-spacing
     0.12em) חורגת ל-2 שורות עם font-size 0.85rem. הקטנת font-size +
     letter-spacing + padding-inline → הכפתורים אחידים בשורה אחת. */
  .choice-box {
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    padding-inline: 0.4rem;
  }

  /* אסטים בנייד (r20) — 3 אסטים מ-4, md-br מוסתר.
     ----
     במבנה אנכי (טופס למעלה, טקסט+lede למטה — שים לב: ב-rsvp ה-art order:auto,
     כלומר טקסט למעלה בנייד גם!). בעצם בנייד: text קודם (eyebrow/title/lede),
     אחריו art (form). ה-md-br בקצה הימני-תחתון של הסקשן ייפול אחרי הטופס,
     ובעמודה הצרה ייחסם הטופס/כפתור שליחה → display:none. */
  .rsvp-whisper { display: block; }

  /* sm-tr במובייל — leaf-4 בקצה הימני-עליון של הסקשן, מציץ מעל ה-eyebrow.
     r20a: זעיר ימינה+מעלה (top -2%→-4%, right -4%→-7%) כדי לפנות לאות נ'
     של "נשמח לראותכם" שנגעה בעלה. גודל/opacity/זווית ללא שינוי. */
  .rsvp-whisper--sm-tr {
    top: -4%;
    right: -7%;
    width: 22vw;
    opacity: 0.65;
  }

  /* md-tl במובייל — branch-2 בקצה השמאלי-עליון, אקצנט מעל ה-title */
  .rsvp-whisper--md-tl {
    top: -3%;
    left: -6%;
    width: 28vw;
    opacity: 0.40;
  }

  /* lg-bl במובייל — branch-1 בקצה השמאלי-תחתון של הסקשן.
     רוב הענף מחוץ למסך, חלק מציץ מתחת לטופס/כפתור שליחה (z:0 < form z:2). */
  .rsvp-whisper--lg-bl {
    bottom: -5%;
    left: -12%;
    width: 40vw;
    opacity: 0.38;
  }

  /* md-br מוסתר בנייד — בעמודה הצרה ייחסם את כפתור השליחה / קצה הטופס. */
  .rsvp-whisper--md-br { display: none; }
}

/* ─── G2 (RSVP): 2 sage accents + עלה מרכזי op 0.15 (אושר מפורשות) ────────────
   pointer-events:none — לא חוסם שדות/כפתורים בטופס. z:0 (מתחת לטופס z:2). */
.rsvp-extra {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* G2b: tr (היה top:6%) → top:38% — היה חופף ב-82.8% עם rsvp-whisper--sm-tr.
   bl (היה bottom:8%) → bottom:38% — היה חופף ב-100% עם rsvp-whisper--lg-bl. */
.rsvp-extra--sage-tr {
  top: 38%; right: -3%;
  width: clamp(65px, 11vw, 130px);
  opacity: 0.40;
  filter: hue-rotate(64deg) saturate(0.52) brightness(0.92);
  transform: rotate(165deg);
}
.rsvp-extra--sage-bl {
  bottom: 38%; left: -3%;
  width: clamp(70px, 12vw, 145px);
  opacity: 0.42;
  filter: hue-rotate(58deg) saturate(0.55);
  transform: rotate(-15deg);
}
/* עלה מרכזי חיוור (op 0.15) — מעשיר את אזור הטופס בלי להפריע לקריאה.
   z:0 מתחת לטופס; pointer-events:none — שדות הטופס פעילים מעליו. */
.rsvp-extra--center {
  top: 50%; left: 50%;
  width: clamp(220px, 35vw, 460px);
  opacity: 0.15;
  filter: hue-rotate(55deg) saturate(0.40) brightness(0.98);
  transform: translate(-50%, -50%) rotate(18deg);
}

/* ============================================================
   Section 06 — Playlist / הפסקול שלנו
   פריסה ממורכזת (לא קצב מתחלף) — eyebrow/title/lede במרכז + נגן Spotify
   ============================================================ */
.playlist {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(3rem, 8vw, 6rem);
  padding-inline: clamp(1.5rem, 6vw, 4rem);
  background: transparent;     /* r17b — מציג את שמנת ה-body */
  overflow: hidden;
  text-align: center;
}

/* ---------- ראש הסקשן — ממורכז ---------- */
.playlist-head {
  position: relative;
  z-index: 2;
  max-width: 540px;
  margin-inline: auto;
}
/* כותרת ממורכזת — override ל-flex column מהמולטי-סלקטור */
.playlist-title { align-items: center; }
/* ה-lede ממורכז גם אופקית (max-width עם margin auto) */
.playlist-lede {
  margin-inline: auto;
  margin-bottom: 0;        /* ה-gap של הסקשן מטפל במרווח לנגן */
}

/* ---------- במה לנגן + עיטורים ---------- */
.playlist-stage {
  position: relative;
  width: 100%;
  max-width: 660px;
  margin-inline: auto;
}

/* כרטיס הנגן — border-radius עדין + צל זהה לשאר הסקשנים */
.playlist-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--c-beige);   /* רקע רך בזמן טעינת ה-iframe */
  box-shadow:
    0 30px 80px -40px rgba(58, 51, 44, 0.35),
    0 12px 32px -16px rgba(195, 147, 124, 0.25);
}
/* ה-iframe מולא את הכרטיס; גובה קבוע שמציג רשימת שירים נעימה.
   H2b · גם div.spotify-placeholder לוקח את אותם מאפיינים — בדיוק אותה תיבה
   = אפס CLS בעת ה-replaceWith. */
.playlist-iframe {
  display: block;
  width: 100%;
  height: 400px;
  border: 0;
  background: #1a1a1a;          /* רקע כהה תואם ל-Spotify למניעת flash בזמן הטעינה */
}

/* H2b · placeholder עדין בגוון שמנת — לא לבן, לא כהה — לפני שה-iframe האמיתי
   נטען ע"י IntersectionObserver. אותו רוחב/גובה/border-radius של ה-iframe
   האמיתי (יורש מ-.playlist-iframe + מהמסגרת .playlist-frame). */
.spotify-placeholder {
  background: #FBF8F1;
}

/* עיטור בוטני · 4 אלמנטים בעומק (r21) — מתכון אסטים מאושר, פריסה ממורכזת.
   ----
   ייחודיות 06: פריסה ממורכזת (לא קצב מתחלף), iframe של Spotify ב-#1a1a1a כהה
   שדורש פוקוס. האסטים יושבים ב-4 פינות הסקשן (לא ב-.playlist-stage) ולא נוגעים
   ב-iframe. עיקרון 11 כבר מיושם — `.playlist-frame` ב-`border-radius: 16px`
   (לא קשת ענקית), אז אין WebGL edge artifacts כמו ב-04.
   ----
   איזון: 4 פינות סביב המרכז (לא צד-מול-צד). שני אלכסונים — lg-tr ↔ md-bl
   (סטייטמנט ענפים גדולים) + md-tl ↔ sm-br (אקצנטים קטנים). */
.playlist-whisper {
  position: absolute;
  height: auto;
  z-index: 0;        /* מתחת ל-.playlist-head (z:2) ו-.playlist-stage (z:auto) */
  pointer-events: none;
}

/* (1) md-tl — leaf-4 שמאל-עליון, אקצנט מעל ה-eyebrow "הפסקול שלנו".
   פינה שלא בשימוש ב-02 (sm)/03 (sm-tl)/04 (md-tl + branch-2)/05 (md-tl + branch-2).
   md-tl + leaf-4 = שילוב חדש לחלוטין. */
.playlist-whisper--md-tl {
  top: -4%;
  left: -4%;
  width: clamp(120px, 13vw, 165px);
  opacity: 0.60;
  transform: rotate(-30deg);
  filter: saturate(0.90);
}

/* (2) lg-tr — branch-3 ימין-עליון אלכסוני, סטייטמנט גדול.
   ענף שיורד מהפינה הימנית-עליונה אלכסונית, מאזן את md-tl.
   branch-3 בשימוש ב-02 (md/xl-br), 03 (xl-bl), 05 (md-br) — lg-tr חדש. */
.playlist-whisper--lg-tr {
  top: -8%;
  right: -5%;
  width: clamp(240px, 26vw, 340px);
  opacity: 0.42;
  transform: rotate(135deg);
  filter: saturate(0.85);
}

/* (3) md-bl — branch-1 שמאל-תחתון אלכסוני, סטייטמנט מאזן.
   ענף שעולה אלכסונית מהפינה השמאלית-תחתונה — mirror של lg-tr.
   branch-1 בשימוש ב-02 (xl-tr), 03 (md-br), 05 (lg-bl) — md-bl חדש. */
.playlist-whisper--md-bl {
  bottom: -8%;
  left: -6%;
  width: clamp(200px, 22vw, 280px);
  opacity: 0.45;
  transform: rotate(45deg);
  filter: saturate(0.85);
}

/* (4) sm-br — branch-2 ימין-תחתון, אקצנט שקט.
   הקטן בקבוצה, מאזן את md-tl.
   branch-2 בשימוש ב-02 (lg), 03 (md-tr), 04 (md-tl + lg-br), 05 (md-tl) — sm-br חדש. */
.playlist-whisper--sm-br {
  bottom: -3%;
  right: -3%;
  width: clamp(115px, 13vw, 165px);
  opacity: 0.50;
  transform: rotate(-135deg);
  filter: saturate(0.88);
}

/* ---------- קונפטי טרקוטה — מאחורי הנגן ---------- */
.playlist-dots {
  position: absolute;
  inset: -10% -8% -10% -8%;
  pointer-events: none;
  opacity: 0.45;
  background-image:
    radial-gradient(circle, var(--c-terracotta) 1.4px, transparent 1.8px),
    radial-gradient(circle, var(--c-terracotta) 1px, transparent 1.4px);
  background-size: 78px 78px, 56px 56px;
  background-position: 0 0, 26px 30px;
  mix-blend-mode: multiply;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 35%, transparent 78%);
  z-index: 0;
}

/* ---------- רספונסיביות נייד ---------- */
@media (max-width: 860px) {
  .playlist {
    padding-block: clamp(2.5rem, 8vw, 4rem);
    padding-inline: clamp(1.2rem, 5vw, 2rem);
    gap: clamp(1.8rem, 6vw, 2.5rem);
    min-height: auto;
  }
  .playlist-head { max-width: 100%; }
  .playlist-eyebrow { white-space: normal; letter-spacing: 0.26em; }
  .playlist-title-line { font-size: clamp(2rem, 9vw, 2.8rem); }
  .playlist-iframe { height: 360px; }

  /* אסטים בנייד (r21) — 3 אסטים מ-4, sm-br מוסתר.
     במבנה ממורכז, האסטים מסביב לנגן (לא מעליו). md-tl/lg-tr בפינות עליונות,
     md-bl בפינה תחתונה-שמאלית. sm-br בקצה ימני-תחתון של הסקשן ייפול קרוב
     לקצה הנגן בעמודה הצרה — display:none. */
  .playlist-whisper { display: block; }

  .playlist-whisper--md-tl {
    top: -2%;
    left: -4%;
    width: 22vw;
    opacity: 0.55;
  }

  .playlist-whisper--lg-tr {
    top: -3%;
    right: -10%;
    width: 38vw;
    opacity: 0.40;
  }

  .playlist-whisper--md-bl {
    bottom: -4%;
    left: -10%;
    width: 32vw;
    opacity: 0.42;
  }

  /* sm-br מוסתר בנייד — בעמודה הצרה הוא יחפוף עם הנגן בקצה הימני-תחתון. */
  .playlist-whisper--sm-br { display: none; }
}

/* ============================================================
   Section 07 — Album / רגעים משותפים
   קצב מתחלף: תמונה מימין (start), טקסט משמאל (end) — דפוס Story/Map
   ============================================================ */
.album {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding-block: clamp(3rem, 8vw, 6rem);
  padding-inline-start: clamp(1.5rem, 4vw, 4rem);
  padding-inline-end: clamp(2rem, 9vw, 7rem);
  background: transparent;     /* r17b — מציג את שמנת ה-body */
  overflow: hidden;
}

/* ---------- עמודת טקסט (שמאל) ---------- */
.album-text {
  position: relative;
  z-index: 2;
  max-width: 480px;
  justify-self: end;     /* ב-RTL: end = שמאל */
}

/* ---------- עמודת אומנות (ימין) — מארחת את הפולארויד ממורכז ---------- */
.album-art {
  position: relative;
  width: 100%;
  height: clamp(460px, 72vh, 720px);
  justify-self: start;       /* ב-RTL: start = ימין */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;                /* r22 — מעל .album-whisper שב-z:0 → המעגל/חבל/פולארואידים נשארים מעל */
}

/* ============================================================
   חוט כביסה + 3 תמונות תלויות + במה אובלית רכה ברקע
   ============================================================ */
.album-stack {
  position: relative;
  /* Stack מעט גדול יותר לתמיכה בפולארואידים מוגדלים */
  width: clamp(460px, 95%, 720px);
  height: clamp(560px, 68vw, 760px);
}

/* "במה" — אובל בז' רך מאחורי כל הרכיבים.
   הוקטנה בגרסה 7 (inset -10% -14% → -4% -6%) כדי שלא תבלע את התמונות המוגדלות */
.album-stage {
  position: absolute;
  inset: -4% -6% -4% -6%;
  background: var(--c-beige);
  border-radius: 50%;
  opacity: 0.6;
  z-index: 0;
  transform: rotate(-2deg);
  mask-image: radial-gradient(ellipse at center, #000 55%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 55%, transparent 90%);
}

/* r23 — תמונת חבל+אטבים אמיתית (clothesline-1.png).
   ----
   מחליפה את ה-SVG המצויר (.album-string) + 3 ה-CSS clothespins ב-DESKTOP בלבד.
   בנייד נשאר ה-SVG הישן (יוחלף בבלוק נפרד אחרי אישור הדסקטופ).
   ----
   חישוב מיקום: התמונה (3168×1344) יש בה אטבים ב-17%/50%/83% של הרוחב.
   ה-hangers ממוקמים כך שמרכזי clothespin שלהם ב-21.5%/50%/78.5% של ה-stack.
   נדרש: img_width = 0.864 × stack_width ≈ 86%. עם `left: 7%` התמונה ממורכזת,
   ו-3 האטבים בתמונה נופלים בדיוק על 3 מרכזי ה-hangers.
   ----
   z-index: 2 — מעל .album-stage (z:0) ומתחת ל-.album-hanger (z:3/4) →
   גוף הפולארואיד מכסה את תחתית האטב, נקודת ה"תלייה" נשארת חשופה. */
.album-clothesline-img {
  position: absolute;
  /* r23a — top -2% → 1% (~23px). r23c — 1% → 3% (תוספת ~15px).
     המראה הרצוי: רק החצי העליון של האטב מציץ מעל הפולארואיד, החצי התחתון
     נעלם מאחוריו (כמו אטב כביסה אמיתי שתופס תמונה — קו ה-overlap עובר
     באמצע גובה האטב, לא בקצה התחתון). z-index:2 < hanger z:3/4 נשאר.
     החבל בתמונה נשאר ~1px מעל קצה ה-hanger העליון (h1 top=166) → לא נכנס. */
  /* r23g — top 3%→0.5% (~19px עליה). 1.5% לא הספיק (אטב-2 עדיין חודר
     לתוכן), 1% גם לא הספיק. 0.5% הוא הגבול העליון של הטווח שהמשתמש ציין.
     הערה גיאומטרית: אורך האטב בתמונה (~80px) גדול מ-padding-top של
     הפולארואיד (~14px) → לא ניתן ל"שוליים לבנים בלבד" בלי שהאטב ירחף.
     0.5% הוא הפשרה: אטב-2 בקצה הכתפיים (לא על פנים), חופף על פולארואיד-2
     באופן ש"מהדק". אטב-1/3 חופפים יותר עמוק (כי hangers ב-top:14% גבוה
     יותר מ-h2 ב-19%) — מגבלה גיאומטרית של ה-image השטוח האופקי. */
  top: 0.5%;
  /* r23e — הקטנת התמונה ב-~12%: width 86%→76%. left 7%→12% מפצה כך
     שמרכז התמונה נשאר ב-50% (אטב-2 נשאר על hanger-2). 86 - 76 = 10pp ↓,
     left + width/2 = 12 + 38 = 50% ✓ */
  left: 12%;
  width: 76%;
  height: auto;
  /* r23d — z-index 2→5 (מעל hangers שהם 3/4). היפוך אופי החיבור: עכשיו
     האטב והחבל יושבים *מעל* הפולארואידים = אטב כביסה אמיתי לפני התמונה
     שהוא מהדק (לא מאחוריה). כל גוף האטב גלוי, החבל עובר על הקצה העליון
     של הפולארואידים (טבעי — אטב כביסה במציאות תופס מהקצה החיצוני). */
  z-index: 5;
  pointer-events: none;
  /* r23a — fade בקצה השמאלי הפיזי: בתמונת ה-clothesline-1.png הקצה השמאלי
     מסתיים ב-fray (סיבי חבל קרועים). gradient מ-transparent ל-black ב-40px
     הראשונים מטשטש את הקצה כך שייראה "נמוג" במקום קצוץ באוויר.
     לא נוגע ב-width/left/translate → היישור האופקי של 3 האטבים נשמר. */
  mask-image: linear-gradient(to right, transparent 0, transparent 5px, black 40px);
  -webkit-mask-image: linear-gradient(to right, transparent 0, transparent 5px, black 40px);
}

/* r23 → r23b — דסקטופ: הסתר את ה-SVG המצויר + 3 ה-clothespin המצוירים.
   הם מוחלפים ב-.album-clothesline-img.
   ----
   r23b — specificity מוגבר (descendant selectors `.album-stack .album-string` ו-
   `.album-hanger .album-clothespin`). ב-r23 השתמשתי בסלקטור single-class שב-CSS
   מאוחר יותר נדרס ע"י `.album-clothespin { display: block; ... }` בשורה ~2154
   (same specificity → סדר מנצח). התוצאה: האטבים החומים-אפורים המצוירים עדיין
   הציצו מתחת לאטבים הצהובים של clothesline-1.png. specificity 0,2,0 גובר. */
@media (min-width: 861px) {
  .album-stack .album-string,
  .album-hanger .album-clothespin { display: none; }
}

/* r24 — נייד (≤860): מחליפים את ה-SVG+clothespin המצוירים בתמונה האמיתית.
   ----
   חישוב מיקום: בנייד 3 פולארואידים ב-left: 0%/27%/54%, width: 46% (r22a) →
   מרכזי ה-hangers ב-23%/50%/77% של ה-stack. אטבי התמונה ב-17%/50%/83% של רוחב
   התמונה. נדרש: img_width × (83-17) = stack_width × (77-23), כלומר
   img_width = stack × 54/66 = stack × 0.818 ≈ 82%. עם left:9% התמונה ממורכזת
   (left + width/2 = 9 + 41 = 50% ✓), אטב-2 בתמונה (50% מהרוחב) נופל על
   מרכז hanger-2 בדיוק.
   ----
   z-index: 5 + mask-image (fade שמאלי) — נשארים זהים לדסקטופ (לא תלויי-מדיה,
   הם מחוץ ל-media query).
   ----
   המגבלה הגיאומטרית (זהה לדסקטופ ואף חמורה יותר): אורך האטב היחסי לפולארואיד
   גדל ככל שהתמונה קטנה. בנייד stack ~370px, img ~300px width / ~128px height,
   אטב ~35px > padding-top של פולארואיד ~11px. top הופך לפשרה. */
@media (max-width: 860px) {
  .album-stack .album-string,
  .album-hanger .album-clothespin { display: none; }

  .album-clothesline-img {
    top: 3%;
    left: 9%;
    width: 82%;
  }
}

/* החוט עצמו — SVG שנמתח לרוחב ה-stack בקלות קעור */
.album-string {
  position: absolute;
  top: 12%;
  left: -3%;
  width: 106%;
  height: 60px;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

/* ============================================================
   Hanger — אטב כביסה + פולארויד אחד תלוי
   ============================================================ */
.album-hanger {
  position: absolute;
  /* הוגדל בגרסה 7 מ-30% ל-43% (~+43%) — נוכחות חזקה על החוט */
  width: 43%;
  z-index: 3;
  /* טרנספורם בסיסי שמסובב את כל ה-hanger (אטב + פולארויד יחד) */
  transform-origin: 50% 0;   /* סובב סביב נקודת התלייה (האטב למעלה) */
}
.album-hanger--1 {
  left: 0%;
  top: 14%;
  transform: rotate(-4deg);
}
.album-hanger--2 {
  /* התמונה ה"ראשית" — מרכז, מעט נמוך יותר (החוט מתעקל למטה במרכז) */
  left: 28.5%;
  top: 19%;
  transform: rotate(2deg);
  z-index: 4;                /* קדמי מעל השכנות (הכיתוב חייב להיות קריא) */
}
.album-hanger--3 {
  /* r23f — חריג מקומי: left 57%→53% (~26px שמאלה) כדי שמרכז ה-hanger
     יתיישר עם מרכז אטב-3 של clothesline-1.png אחרי הקטנת התמונה ב-r23e.
     הסיבה: h-1 ו-h-3 ב-rotation שונה (h-1: rotate(-4°), h-3: rotate(-2°)),
     לא סימטריים סביב 50%. הקטנת התמונה גילתה את הא-סימטריה. */
  left: 53%;
  top: 14%;
  transform: rotate(-2deg);
}

/* אטב כביסה — מלבן עץ עם "חריץ קפיץ" באמצע, יוצא מעל הפולארויד */
.album-clothespin {
  display: block;
  width: clamp(13px, 1.3vw, 18px);
  height: clamp(20px, 2vw, 28px);
  background: linear-gradient(180deg, #b08568 0%, #95684e 60%, #855a44 100%);
  border-radius: 2px 2px 3px 3px;
  position: absolute;
  top: -10px;                /* מציץ מעל ה-figure */
  left: 50%;
  margin-left: -7px;         /* חצי מרוחב ה-clothespin (~14px ÷ 2) */
  z-index: 2;
  box-shadow: 0 2px 4px rgba(58, 51, 44, 0.32);
}
.album-clothespin::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 50%;
  width: 1.5px;
  margin-left: -0.75px;
  background: rgba(58, 51, 44, 0.28);
  border-radius: 1px;
}

/* הפולארויד עצמו (משותף ל-3 ה-hangers) */
.album-polaroid {
  position: relative;
  z-index: 1;
  width: 100%;
  background: #fdfaf3;
  padding: clamp(9px, 1vw, 14px);
  border-radius: 4px;
  margin: 0;
  display: flex;
  flex-direction: column;
  /* gap קטן יותר — מצמצם את ההפרש לפולארויד המרכזי שיש לו כיתוב */
  gap: clamp(4px, 0.6vw, 8px);
  box-shadow:
    8px 10px 22px -8px rgba(58, 51, 44, 0.30),
    0 22px 44px -22px rgba(58, 51, 44, 0.38);
}
.album-polaroid-img {
  width: 100%;
  aspect-ratio: 1 / 1;                /* פולארויד קלאסי = תמונה ריבועית */
  object-fit: cover;
  object-position: center;            /* ברירת מחדל; overrides נקודתיים אם צריך */
  display: block;
  border-radius: 2px;
  background: var(--c-beige);         /* fallback בזמן טעינה */
}
/* התאמות crop ספציפיות לכל תמונה */
.album-hanger--2 .album-polaroid-img { object-position: center 42%; }  /* ring-hands: טבעת מעל המרכז */
.album-hanger--1 .album-polaroid-img { object-position: center 60%; }  /* field-walk: שביל בחלק התחתון */
.album-hanger--3 .album-polaroid-img { object-position: center 50%; }  /* snow-dogs: ממורכז */

/* כיתוב בחלק הלבן התחתון של הפולארויד — שתי שורות ממורכזות.
   גדלים מצומצמים כדי שהפולארויד המרכזי לא ייצא דרמטית גבוה מהאחרים. */
.album-polaroid-cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* תחתית רחבה מהראש (פולארויד אותנטי) — אבל קומפקטי */
  padding-block: clamp(1px, 0.3vw, 3px) clamp(6px, 1vw, 12px);
  gap: 0.25em;
}
.album-polaroid-cap-title {
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 1.05vw, 0.85rem);
  font-weight: 400;
  color: var(--c-terracotta);
  letter-spacing: 0.02em;
  line-height: 1.05;
  unicode-bidi: plaintext;
}
.album-polaroid-cap-date {
  font-family: var(--font-body);
  font-size: clamp(0.55rem, 0.8vw, 0.66rem);
  font-weight: 400;
  color: var(--c-grey);
  letter-spacing: 0.22em;
  line-height: 1;
}

/* עיטור בוטני · 3 אלמנטים בעומק (r22) — מתכון אסטים מאושר עם ריסון.
   ----
   ייחודיות 07: הסקשן עמוס מטבעו (מעגל "במה" + חבל + 3 פולארואידים + אטבים +
   טקסט+כפתור). לכן רק 3 אסטים (לא 4-5), opacity ממוצע 0.47 — למסגרת עדינה,
   לא לרוויה. האסטים מחוץ ל-.album-art ול-.album-text → מציצים מהקצוות.
   ----
   איזון: 2 בצד הטקסט (lg-bl + md-tl) + 1 בצד הפולארואידים (md-br).
   האסט הימני-תחתון מאזן את המעגל הכבד מצד ימין. אין אסט רביעי = נשימה. */
.album-whisper {
  position: absolute;
  height: auto;
  z-index: 0;        /* מתחת ל-.album-text (z:2) ו-.album-art (z:1, r22) */
  pointer-events: none;
}

/* (1) lg-bl — branch-3 שמאל-תחתון, ענף שעולה מהפינה כלפי פנים-מעלה.
   bottom -10% (לא -5%) כדי לשמור 40-60px מהכפתור "להעלות תמונות".
   rotate 160° = ענף וורטיקלי הפוך → "עולה אלכסונית מקצה השמאל-תחתון". */
.album-whisper--lg-bl {
  bottom: -10%;
  left: -6%;
  width: clamp(290px, 30vw, 330px);
  opacity: 0.45;
  transform: rotate(160deg);
  filter: saturate(0.85);
}

/* (2) md-tl — leaf-4 שמאל-עליון, אקצנט מעל ה-eyebrow "רגעים משותפים".
   rotate 28° = עלים מתפתלים פנימה, נטויים לכיוון מרכז. */
.album-whisper--md-tl {
  top: -3%;
  left: -3%;
  width: clamp(140px, 14vw, 170px);
  opacity: 0.50;
  transform: rotate(28deg);
  filter: saturate(0.88);
}

/* (3) md-br — branch-1 ימין-תחתון, מאחורי קצה התחתון של המעגל.
   z:0 < .album-art z:1 → המעגל/פולארואידים נשארים מעל branch-1. */
.album-whisper--md-br {
  bottom: -6%;
  right: -5%;
  width: clamp(220px, 23vw, 270px);
  opacity: 0.45;
  transform: rotate(48deg);
  filter: saturate(0.85);
}

/* קונפטי נקודות טרקוטה — מאחורי הפולארויד */
.album-dots {
  position: absolute;
  inset: 8% 14% 8% -6%;
  pointer-events: none;
  opacity: 0.45;
  z-index: 0;
  background-image:
    radial-gradient(circle, var(--c-terracotta) 1.4px, transparent 1.8px),
    radial-gradient(circle, var(--c-terracotta) 1px, transparent 1.4px);
  background-size: 78px 78px, 56px 56px;
  background-position: 0 0, 26px 30px;
  mix-blend-mode: multiply;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 35%, transparent 78%);
}

/* ============================================================
   CTA ראשי — pill ממולא טרקוטה עם אייקון מצלמה
   ============================================================ */
.album-cta--primary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--c-terracotta);
  color: var(--c-cream);
}
.album-cta--primary:hover {
  background: var(--c-terracotta-d);
  color: var(--c-cream);
}
.album-cta-icon {
  font-size: 1.05em;
  line-height: 1;
}

/* ---------- רספונסיביות נייד ---------- */
@media (max-width: 860px) {
  .album {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: auto;
    padding-block-start: clamp(2rem, 6vw, 3rem);
    padding-block-end: clamp(3rem, 8vw, 4rem);
    padding-inline-start: clamp(1.2rem, 5vw, 2rem);
    padding-inline-end: clamp(1.6rem, 6vw, 2.4rem);
    gap: clamp(2.5rem, 8vw, 3.5rem);
    text-align: right;
  }
  .album-art {
    order: -1;
    height: clamp(400px, 64vh, 520px);
    justify-self: stretch;
  }
  .album-stack {
    width: clamp(310px, 98%, 380px);
    height: clamp(400px, 100vw, 500px);
  }
  /* "במה" — בנייד inset קטן (תואם להקטנת הבמה בדסקטופ) */
  .album-stage {
    inset: -3% -5% -3% -5%;
    opacity: 0.55;
  }
  /* r22a — 3 פולארואידים בנייד (לא 2 כפי שהיה ב-r22).
     ----
     היה: hanger--3 ב-display:none, ו-hanger--1/2 ב-width:62% spread 38%.
     מצב זה החביא את snow-dogs (השלישי) לגמרי בנייד.
     ----
     עכשיו: כל ה-3 מוצגים. width הוקטן מ-62% ל-46% (מקצת יותר רחב מ-43%
     של הדסקטופ — נוכחות במסך קטן). spread מקביל לדסקטופ (28.5%) אבל מצומצם
     ל-27% כדי להבטיח 100% הקצה הימני (54+46=100). שמירה על מבנה החבל
     המתעקל: hanger--1/3 ב-top:14%, hanger--2 (האמצעי) ב-top:19%. */
  .album-hanger--1 {
    left: 0%;
    top: 14%;
    width: 46%;
  }
  .album-hanger--2 {
    left: 27%;
    top: 19%;
    width: 46%;
  }
  .album-hanger--3 {
    left: 54%;
    top: 14%;
    width: 46%;
    display: block;        /* ביטול ה-display:none מ-r22 */
  }
  /* החוט קצר יותר במובייל (רק מכסה איפה ש-2 הפולארואידים תלויים) */
  .album-string {
    top: 11%;
    left: -3%;
    width: 106%;
  }
  .album-polaroid {
    padding: clamp(10px, 3vw, 14px);
    gap: clamp(6px, 2.2vw, 10px);
  }
  .album-polaroid-cap {
    padding-block: 3px clamp(12px, 3.6vw, 18px);
  }
  .album-polaroid-cap-title { font-size: clamp(0.75rem, 3.2vw, 0.9rem); }
  .album-polaroid-cap-date  { font-size: clamp(0.58rem, 2.2vw, 0.68rem); }
  .album-text { max-width: 100%; }
  .album-eyebrow { white-space: normal; letter-spacing: 0.26em; }
  .album-title-line { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .album-cta--primary { width: 100%; justify-content: center; }

  /* אסטים בנייד (r22) — 2 אסטים מ-3, md-br מוסתר.
     ----
     בנייד הסקשן עמוס עוד יותר (פולארואידים מוגדלים + טקסט+כפתור full-width).
     הסקשן מבנה אנכי: art למעלה, text למטה. שני אסטים בלבד:
     - lg-bl נשמר בקצה השמאלי-תחתון (מתחת לכפתור, מאחוריו) — אבל קטן יותר (30vw)
     - md-tl עובר ל-RIGHT-TOP בנייד (היה left בדסקטופ) — מציץ מעל הפינה
       הימנית-עליונה של ה-.album-art (מעל המעגל). שינוי פיזי בלבד.
     - md-br מוסתר — בעמודה הצרה יחפוף עם הפולארואידים. */
  .album-whisper { display: block; }

  .album-whisper--lg-bl {
    bottom: -3%;
    left: -10%;
    width: 30vw;
    opacity: 0.42;
  }

  /* leaf-4 — flip לימין בנייד (היה שמאל-עליון בדסקטופ).
     left:auto + right:-4% מחליפים את ה-left:-3% של הדסקטופ. */
  .album-whisper--md-tl {
    top: -2%;
    left: auto;
    right: -4%;
    width: 22vw;
    opacity: 0.50;
  }

  /* md-br מוסתר בנייד — בעמודה צרה ייחסם פולארואיד הימני (snow-dogs). */
  .album-whisper--md-br { display: none; }
}

/* ============================================================
   Section 08 — Footer / סיום חם ואלגנטי
   פריסה ממורכזת — סוגרת את האתר בנקודה רגועה.
   גוון רקע מעט עמוק יותר (cream-soft) לסימון "סוף".
   ============================================================ */
.footer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: clamp(4rem, 9vw, 6.5rem) clamp(1.8rem, 3.5vw, 2.6rem);
  padding-inline: clamp(1.5rem, 6vw, 4rem);
  background: var(--c-cream-soft);
  overflow: hidden;
}

/* קו עליון עדין — מבדיל מהסקשן הקודם בלי קשיחות */
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(160px, 24vw, 280px);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(195, 147, 124, 0.45) 50%,
    transparent 100%);
}

/* ---------- עיטור ממורכז: קו · יהלום · קו ---------- */
.footer-ornament {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.6rem, 1.4vw, 0.95rem);
  margin-bottom: clamp(1.5rem, 3.4vw, 2.2rem);
  position: relative;
  z-index: 2;
}
.footer-ornament-line {
  display: block;
  width: clamp(36px, 5vw, 56px);
  height: 1px;
  background: var(--c-terracotta);
  opacity: 0.55;
}
.footer-ornament-diamond {
  display: block;
  width: 8px;
  height: 8px;
  background: var(--c-terracotta);
  transform: rotate(45deg);
  opacity: 0.85;
}

/* ---------- השמות — הגיבור הטיפוגרפי ---------- */
.footer-names {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6.5vw, 4.4rem);
  font-weight: 500;
  color: var(--c-terracotta);
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 0 0 clamp(0.85rem, 2vw, 1.2rem);
  position: relative;
  z-index: 2;
}
.footer-amp {
  font-weight: 400;
  font-style: italic;
  color: var(--c-terracotta-d);
  padding-inline: 0.08em;
}

/* ---------- תאריך ---------- */
.footer-date {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.8vw, 1.05rem);
  font-weight: 400;
  color: var(--c-grey);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  margin: 0 0 clamp(0.4rem, 1vw, 0.55rem);
  position: relative;
  z-index: 2;
}

/* ---------- מקום ---------- */
.footer-place {
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1.5vw, 0.95rem);
  font-weight: 300;
  color: var(--c-grey);
  letter-spacing: 0.1em;
  margin: 0 0 clamp(1.8rem, 4vw, 2.6rem);
  position: relative;
  z-index: 2;
}

/* ---------- ברכת סיום — Frank Ruhl Libre נטוי ---------- */
.footer-blessing {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.8vw, 1.7rem);
  font-weight: 400;
  font-style: italic;
  color: var(--c-ink);
  line-height: 1.4;
  letter-spacing: 0.01em;
  max-width: 32ch;
  margin: 0 0 clamp(1.6rem, 3.5vw, 2.2rem);
  position: relative;
  z-index: 2;
}
.footer-blessing-dot {
  color: var(--c-terracotta-d);
}

/* ---------- קישור עדין חזרה ל-RSVP (nofaq · הוסר קישור FAQ) ---------- */
.footer-link {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--c-terracotta);
  text-decoration: none;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(195, 147, 124, 0.4);
  transition:
    color 0.3s var(--ease),
    border-color 0.3s var(--ease),
    transform 0.3s var(--ease);
  /* r33 — מרווח קטן בין שני הקישורים. ה-last-of-type מקבל מרווח גדול לפני
     הקרדיט (משחזר את הריווח של r25 לפני הוספת הכפתור השני). */
  margin-bottom: clamp(0.7rem, 1.6vw, 1.1rem);
  position: relative;
  z-index: 2;
}
.footer-link:last-of-type {
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.footer-link:hover {
  color: var(--c-terracotta-d);
  border-bottom-color: var(--c-terracotta-d);
  transform: translateY(-1px);
}
.footer-link:focus-visible {
  outline: 2px solid var(--c-terracotta);
  outline-offset: 4px;
  border-radius: 2px;
}
/* nofaq · .footer-link--ghost (וריאציה רכה ל-FAQ) הוסר — אין יותר כפתור FAQ. */

/* ---------- קרדיט תחתון רחב מאוד עם קו עדין מעליו ---------- */
.footer-credit {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 300;
  color: var(--c-grey-soft);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid rgba(180, 173, 164, 0.22);
  width: 100%;
  max-width: 280px;
  position: relative;
  z-index: 2;
}

/* ---------- r25 · אסטים בוטניים בפינות תחתונות — מאופק לפוטר ----------
   2 אסטים בלבד (לא 3-4), פינות תחתונות בלבד (סגירה רכה מלמטה).
   z-index 0 → מתחת לכל תוכן הפוטר (.footer-* ב-z:2).
   opacity 0.40 בדסקטופ / 0.35 בנייד — שקוף יותר מסקשנים אחרים.
   saturate 0.88 — מנמיך עצימות, אל מתחרה בשמות. */
.footer-whisper {
  position: absolute;
  width: clamp(160px, 18vw, 200px);
  height: auto;
  opacity: 0.40;
  pointer-events: none;
  filter: saturate(0.88);
  z-index: 0;
  --anim-opacity: 0.40;
}
/* md-bl · branch-2 (שקוף-עדין, אופקי) — שמאל-תחתון. סיבוב 45° → הענף עולה
   אלכסונית מהפינה לכיוון מרכז הפוטר. וריאציה: לא היה ב-07. */
.footer-whisper--md-bl {
  bottom: 6%;
  left: -3%;
  transform: rotate(45deg);
}
/* md-br · branch-3 (וורטיקלי-מתפתל) — ימין-תחתון. סיבוב -45° → mirror
   רך לאסט השמאלי. וריאציה: branch-3 היה ב-07 ב-lg-bl, כאן ב-md-br. */
.footer-whisper--md-br {
  bottom: 6%;
  right: -3%;
  transform: rotate(-45deg);
}

/* ---------- רספונסיביות נייד ---------- */
@media (max-width: 860px) {
  .footer {
    padding-block: clamp(3rem, 9vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem);
    padding-inline: clamp(1.2rem, 5vw, 2rem);
  }
  .footer-names {
    font-size: clamp(2.2rem, 11vw, 3.4rem);
  }
  .footer-date {
    letter-spacing: 0.28em;
  }
  .footer-blessing {
    font-size: clamp(1.15rem, 5vw, 1.4rem);
  }
  .footer-link {
    font-size: 0.74rem;
    letter-spacing: 0.18em;
  }
  .footer-credit {
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    max-width: 220px;
  }
  /* r25 — נייד: 2 אסטים גם בנייד (בפינות תחתונות, לא מפריעים). שקופים יותר,
     קטנים יותר. bottom שלילי + offset שלילי גדול → רק חלק קטן מציץ פנימה
     מהפינה, השאר מחוץ לפוטר → הקרדיט והקישור חופשיים מהבחינה הויזואלית. */
  .footer-whisper {
    width: 22vw;
    opacity: 0.35;
  }
  .footer-whisper--md-bl { bottom: -2%; left: -10%; }
  .footer-whisper--md-br { bottom: -2%; right: -10%; }
}

/* nofaq · Section 09 (FAQ) הוסר לחלוטין מ-HTML/CSS/JS. */

/* ─── G3: שפת אסטים על הסקשנים האחרונים — Playlist/Album/Footer (nofaq · FAQ הוסר).
   ערבוב טרקוטה+sage מעל ה-whispers הקיימים. pointer-events:none, z:0.
   רק ענפים (אסור leaf-* בודד). filter ל-sage:
     filter: hue-rotate(60deg) saturate(0.5) brightness(0.92);
   ============================================================ */

/* === Playlist (06): 4 sage accents מפוזרים — קצר, יש embed === */
.playlist-sage {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  filter: hue-rotate(62deg) saturate(0.50) brightness(0.92);
}
.playlist-sage--ml { top: 35%; left: -3%;  width: clamp(70px, 11vw, 130px); opacity: 0.40; transform: rotate(-25deg); }
.playlist-sage--mr { top: 68%; right: -3%; width: clamp(70px, 11vw, 130px); opacity: 0.42; transform: rotate(165deg); }
.playlist-sage--tc { top: 12%; left: 30%; width: clamp(55px, 9vw, 110px); opacity: 0.34; transform: rotate(20deg); }
.playlist-sage--bc { bottom: 12%; right: 32%; width: clamp(60px, 10vw, 115px); opacity: 0.36; transform: rotate(-15deg); }

/* === Album (07): 4 sage accents עדינים — בלי עומס על פולארואידים === */
.album-sage {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  filter: hue-rotate(58deg) saturate(0.52) brightness(0.93);
}
.album-sage--mt { top: 5%; right: 28%; width: clamp(60px, 10vw, 120px); opacity: 0.38; transform: rotate(170deg); }
.album-sage--ml { top: 42%; left: -3%; width: clamp(75px, 12vw, 140px); opacity: 0.40; transform: rotate(-25deg); }
.album-sage--mr { top: 32%; right: -3%; width: clamp(70px, 11vw, 130px); opacity: 0.38; transform: rotate(155deg); }
.album-sage--mb { bottom: 6%; left: 32%; width: clamp(65px, 10vw, 125px); opacity: 0.40; transform: rotate(15deg); }

/* nofaq · .faq-sage (6 אסטים) הוסר — סקשן FAQ נמחק. */

/* === Footer (08): גוון sage על אחד מהקיימים (md-bl) — 2 אסטים סה"כ === */
.footer-whisper--md-bl {
  filter: hue-rotate(60deg) saturate(0.50) brightness(0.92);
}

/* ============================================================
   Section 00 — Envelope (r40b — raster + monogram)
   ----
   overlay מסך מלא (z-index 9999) על רקע שמנת. סטאק שכבות (מאחור→קדימה):
     z:1 envelope-leaf--tr/bl  (env-sprig.webp באותו אסט × 2, אחד mirrored)
     z:2 envelope-petals       (env-petals.webp, מסביב למעטפה)
     z:2 envelope-twine        (env-twine.webp, מאחורי המעטפה למטה)
     z:3 envelope-card         (button: shape + meta)
       └ envelope-shape: img envelope.webp + monogram overlay על החותם
   המונוגרמה (HTML חי) — Frank Ruhl Libre 500 עם CSS text-shadow לאפקט חריטה
   בשעווה (צל עליון כהה + highlight תחתון בהיר → אותיות "שקועות").
   החותם ב-envelope.webp נמצא ב-(50%, 59.9%) של התמונה, קוטר 11.42% של רוחב.
   ============================================================ */
.envelope-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--c-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.6rem;
  overflow: hidden;
  isolation: isolate;
}

/* === דקורציה רחוקה: כל ענף "צומח" מהקצה הקרוב למרכז — גבעול בקצה, עלים פנימה === */
.envelope-deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
/* branch-1 (טבעי: גבעול bottom-left, עלים up-right) ב-TL → rotate(90deg) להפניית גבעול TL, עלים inward */
.envelope-deco--branch-tl {
  top: -7%;
  left: -8%;
  width: clamp(200px, 28vw, 420px);
  opacity: 0.22;
  transform: rotate(90deg);
}
/* branch-3 (טבעי: גבעול top-right, עלים down-left משתלשלים) ב-BR → rotate(90deg) להפניית גבעול BR */
.envelope-deco--branch-br {
  bottom: -8%;
  right: -8%;
  width: clamp(180px, 26vw, 380px);
  opacity: 0.24;
  transform: rotate(90deg);
}
/* leaf-2 (טבעי: גבעול bottom-left, חוד up-right) ב-ML → rotate(45deg) להפניית גבעול שמאלה, חוד פנימה */
.envelope-deco--leaf-ml {
  top: 55%;
  left: 2%;
  width: clamp(70px, 9vw, 130px);
  opacity: 0.32;
  transform: rotate(45deg);
}
/* leaf-3 (טבעי: גבעול bottom-right, גוף up-left) ב-MR → rotate(-45deg) להפניית גבעול ימינה, גוף פנימה */
.envelope-deco--leaf-mr {
  top: 22%;
  right: 5%;
  width: clamp(80px, 10vw, 150px);
  opacity: 0.30;
  transform: rotate(-45deg);
}
/* leaf-1 (טבעי: גבעול bottom, חוד top) ב-TR2 קרוב לקצה העליון → rotate(180deg) להפניית גבעול למעלה */
.envelope-deco--leaf-tr2 {
  top: 8%;
  right: 22%;
  width: clamp(60px, 7vw, 100px);
  opacity: 0.22;
  transform: rotate(180deg);
}
/* leaf-4 (טבעי: גבעול bottom, עלים מעלה) ב-BL2 קרוב לקצה התחתון → rotate(0deg) (טבעי) */
.envelope-deco--leaf-bl2 {
  bottom: 12%;
  left: 22%;
  width: clamp(70px, 8vw, 120px);
  opacity: 0.26;
  transform: rotate(0deg);
}

/* === ענפי watercolor בפינות (env-sprig.webp, 2 אינסטנסים — אחד CSS mirrored) === */
.envelope-leaf {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.envelope-leaf--tr {
  top: -5%;
  right: -7%;
  width: clamp(200px, 26vw, 400px);
  opacity: 0.45;
  --anim-opacity: 0.45;
  transform: rotate(155deg);
}
.envelope-leaf--bl {
  bottom: -7%;
  left: -7%;
  width: clamp(220px, 28vw, 420px);
  opacity: 0.42;
  --anim-opacity: 0.42;
  transform: rotate(-25deg) scaleX(-1);
}

/* === עלעלים מפוזרים סביב המעטפה (P1) — filter מחמם להחליש את הגוונים האפורים === */
.envelope-petals {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.3);
  width: clamp(420px, 58vw, 720px);
  opacity: 0.48;
  --anim-opacity: 0.48;
  pointer-events: none;
  user-select: none;
  z-index: 2;
  /* מחמם את הגוונים האפורים-קרים (נוצות פמפס) לכיוון הפלטה הטרקוטה */
  filter: saturate(1.35) sepia(0.12) hue-rotate(-6deg) brightness(1.02);
}

/* === vignette עדין בשולי המסך (radial darkening 2-3%) === */
.envelope-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(58, 51, 44, 0.025) 75%,
    rgba(58, 51, 44, 0.05) 100%
  );
}

/* כפתור — reset של appearance + cursor */
.envelope-card {
  position: relative;
  z-index: 3;
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;                    /* מרווח 64px כדי לפנות מקום לקצוות החוט המתפזרים */
  padding: 0;
  font: inherit;
  color: inherit;
}
.envelope-card:focus-visible {
  outline: 2px solid var(--c-terracotta);
  outline-offset: 8px;
  border-radius: 4px;
}

/* === צורת המעטפה — raster image + twine + seal + monogram (כולם פנימיים).
   r41d: perspective על ההורה מספיק לאלמנט 3D יחיד (הדש). הסרת preserve-3d
   מונעת בעיות קומפוזיציה ש-Chromium מאלצן ל-Skia: pixel pipeline נקי יותר. */
.envelope-shape {
  position: relative;
  width: clamp(320px, 42vw, 600px);
  aspect-ratio: 1200 / 712;
  filter:
    drop-shadow(0 22px 36px rgba(58,51,44,0.20))
    drop-shadow(0 6px 10px rgba(58,51,44,0.10));
  transition: transform 0.45s var(--ease);
  perspective: 1200px;
}
.envelope-card:hover .envelope-shape,
.envelope-card:focus-visible .envelope-shape {
  transform: translateY(-4px);
}

/* === r41f: מודל שכבות פיזי — interior(1) < card(2) < body(3) < flap(4) < twine(5) < seal(6) < monogram(7).
   ה-V ב-envelope-body.webp שקוף לחלוטין → דרך פתח ה-V רואים את ה-interior (CSS gradient חם).
   הכרטיס יושב בין ל-body — הbody מסתיר את חלקו התחתון. === */

/* z:1 — פנים המעטפה (CSS layer). gradient: כהה יותר למעלה (סמלי לעומק) → חם למטה.
   clip-path משולש מורחב 3px מ-V (TL=(0,0), TR=(100%,0), V_tip @ 63%) כדי לכסות את
   ה-feather edge של ה-body ולמנוע "תפר אור" של overlay cream דולף. */
.env-interior {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, #5C4734 0%, #7A6048 30%, #8A7460 80%);
  clip-path: polygon(-0.3% -0.3%, 100.3% -0.3%, 50% 63.5%);
  -webkit-clip-path: polygon(-0.3% -0.3%, 100.3% -0.3%, 50% 63.5%);
}

/* z:3 — גוף המעטפה (אזור ה-V שקוף ב-WebP) */
.envelope-body {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* === r41f: עטיפת הכרטיס z:2 — בין interior ל-body. אין clip-path/overflow:
   ה-body (z:3) מסתיר פיזית את הכרטיס שמתחת לקודקוד ה-V; רק החלק שמעבר
   לפתח ה-V נראה (מודל שכבות פיזי, לא mask).
   ב-t=3.0 (תחילת match-cut) — JS מעלה z ל-50 (מעל body) דרך gsap.set. === */
.envelope-card-clip {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* === r41e: כרטיס הזמנה — גובה גדל ל-90% (חלק תחתון נשאר במעטפה).
   תוכן מעוגן לעליון (justify-content: flex-start + padding-top גדול),
   כך שאחרי slide-up רואים את כל ה-5 רכיבים מעל קצה המעטפה.
   h2c-card · משטח קלף חם (#F7EFDF) במקום שמנת — מובחן ויזואלית מהמעטפה,
   נמס ל-#FBF8F1 במהלך match-cut (GSAP). === */
.envelope-card-inside {
  position: absolute;
  top: 4%;
  left: 11%;                     /* (100-78)/2 = 11% */
  width: 78%;
  height: 92%;                   /* r41e: כמעט מלא — תחתון יבחר ב-מעטפה */
  background: #F7EFDF;           /* h2c-card · קלף חם (כעת ב-GSAP transition לשמנת) */
  /* h2c-card · צל רך מסביב + highlight פנימי עליון (linen-look). בלי border */
  box-shadow:
    0 12px 30px rgba(154, 107, 82, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  pointer-events: none;
  user-select: none;
  display: flex;
  flex-direction: column;
}

/* h2c-card · טקסטורת noise עדינה — SVG fractalNoise data-URI inline.
   באמצעות div נפרד (לא background על cardInside) כדי שנוכל לדהות אותו
   בנפרד ב-match-cut. opacity ~0.045 → כמעט שקוף, רק מרגישים את התחושה.
   רץ מעל ה-background של cardInside, מתחת לתוכן (z:0). */
.envelope-card-texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.42  0 0 0 0 0.30  0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  background-repeat: repeat;
}

/* h2c-card · ענף watercolor במרכז מעל השמות. ערבוב טרקוטה+sage ע"י filter
   (hue-rotate 50deg → ירק-זית מעושן). שקיפות נמוכה ~0.25 → "רמז" עדין,
   לא מתחרה עם השמות. ה-sprig נמס ל-0 ב-match-cut יחד עם הטקסטורה. */
.envelope-card-sprig {
  position: absolute;
  top: 4%;
  left: 50%;
  width: 42%;
  max-width: 130px;
  height: auto;
  transform: translateX(-50%) rotate(-3deg);
  transform-origin: 50% 50%;
  opacity: 0.28;
  filter: hue-rotate(50deg) saturate(0.55) brightness(0.94);
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* h2c-card · ה-frame עכשיו מעל הטקסטורה והענף (z:2) */
.envelope-card-inside .envelope-card-frame {
  position: relative;
  z-index: 2;
}

/* h2c-card · הספארקל ✦ הוחבא — ה-sprig מחליף אותו. ה-element עדיין קיים
   ב-DOM (GSAP timeline מצפה לו ועושה לו fade), רק שקוף ויזואלית. */
.envelope-card-ornament {
  visibility: hidden;
}
.envelope-card-frame {
  flex: 1;
  margin: 3%;
  border: 1px solid rgba(195, 147, 124, 0.35);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;    /* r41e: מעוגן לעליון — תחתון cream ריק */
  gap: 0.4em;
  padding: 4% 5% 6%;              /* padding-top קטן — תוכן צמוד לראש */
  box-sizing: border-box;
}
.envelope-card-ornament {
  font-family: "Frank Ruhl Libre", serif;
  font-size: clamp(0.85rem, 1.3vw, 1.4rem);
  color: var(--c-terracotta);
  opacity: 0.7;
  line-height: 1;
  margin-bottom: 0.1em;
}
.envelope-card-names {
  margin: 0;
  font-family: "Frank Ruhl Libre", serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 3.4rem);    /* r41d: פי ~1.7 מ-r41c */
  color: #9A6B52;                              /* r41d: צבע מלא */
  letter-spacing: 0.025em;
  white-space: nowrap;
  line-height: 1.1;
}
.envelope-card-amp {
  font-style: italic;
  color: var(--c-terracotta-d);
  font-weight: 400;
  margin-inline: 0.18em;
}
.envelope-card-divider {
  display: block;
  width: 38%;
  height: 1px;
  background: rgba(195, 147, 124, 0.55);
  margin: 0.25em 0;
}
.envelope-card-date {
  margin: 0;
  font-family: "Heebo", sans-serif;
  font-weight: 500;                            /* r41d: 400→500 — קצת מודגש */
  font-size: clamp(0.85rem, 1.4vw, 1.4rem);    /* r41d: גדל */
  letter-spacing: 0.22em;
  color: var(--c-ink);
  text-transform: uppercase;
}
.envelope-card-venue {
  margin: 0.15em 0 0;
  font-family: "Heebo", sans-serif;
  font-weight: 300;
  font-size: clamp(0.6rem, 0.95vw, 0.95rem);
  letter-spacing: 0.1em;
  color: var(--c-grey);              /* #787878 */
}

/* === חוט יוטה — z:5 ב-r41f (עלה מ-3 כי body z:3, flap z:4) === */
.envelope-twine {
  position: absolute;
  top: 79%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-1deg);
  width: 90%;
  height: auto;
  pointer-events: none;
  user-select: none;
  opacity: 0.85;
  z-index: 5;
}

/* === r41d: הדש המשולש — div עוטף שני ילדים: img + shade overlay.
   ה-shade מאפשר הכהיה בלי filter (filter על אלמנט 3D = פלאש שחור ב-Chromium).
   z:4. transform-origin: top center. background: transparent. === */
.envelope-flap {
  position: absolute;
  inset: 0;
  z-index: 4;                    /* r41f: ב-1.25s JS משנה ל-0 (מאחורי הכל) */
  transform-origin: 50% 0%;
  background: transparent;
  pointer-events: none;
  user-select: none;
}
.envelope-flap-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
/* שכבת הכהיה מעל ה-img של ה-flap — מונפשת ב-tween (opacity 0→0.22) במקום
   filter: brightness שגרם לפלאש שחור. mix-blend-mode: multiply שומר על הצבע
   של הלינן ורק מכהה אותו אורגנית. */
.envelope-flap-shade {
  position: absolute;
  inset: 0;
  background: #3A332C;
  opacity: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  /* clip-path בדיוק של פוליגון הדש — כדי שהשכבה לא תכתים מעבר לקו ה-V */
  clip-path: polygon(0% 0%, 100% 0%, 50% 63%);
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 63%);
}

/* === חותם שעווה — z:6 ב-r41f === */
.env-seal {
  position: absolute;
  top: 67%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15%;
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  z-index: 6;
}

/* === מונוגרמה חיה מינימלית — "ש | מ" בלבד, ממורכזת על מרכז env-seal === */
.envelope-monogram {
  position: absolute;
  top: 67%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* ~60% מקוטר env-seal (15%) × scale ×1.25 — מונוגרמה ביחס דומה לנוכחי */
  width: calc(9% * 1.25);
  aspect-ratio: 1;
  pointer-events: none;
  user-select: none;
  z-index: 7;                   /* r41f: מעל env-seal (6) */

  /* אפקט חריטה: blend multiply + opacity + blur עדין שמתאים לרכות הרסטר */
  mix-blend-mode: multiply;
  opacity: 0.88;
  filter: blur(0.3px);
}

.env-mono-svg {
  width: 100%;
  height: 100%;
  display: block;
  /* גוון השעווה (#C37A5A) מוכהה ב-18% — נדגם מ-env-seal.webp */
  color: #9F6449;
}

/* === היררכיית טקסט: subtitle דומיננטי + CTA pill בולט === */
.envelope-meta {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3rem;
  --anim-opacity: 1;
  margin-top: 0.5rem;
}
.envelope-subtitle {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.7vw, 2.6rem);     /* 30 → 42px @1440 */
  font-weight: 600;                            /* 500 → 600 */
  color: #9A6B52;                              /* גוון מעמיק יותר מ-#A87760 */
  letter-spacing: 0.03em;
  line-height: 1.18;
  margin: 0;
  text-shadow: 0 2px 8px rgba(58, 51, 44, 0.15);  /* הצללה נושמת רכה */
}
.envelope-hint {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.55vw, 1.4rem);   /* 18.7 → 22-24px @1440 */
  font-weight: 500;
  color: var(--c-terracotta);
  letter-spacing: 0.04em;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.55em 1.5em;                       /* padding נדיב יותר */
  border: 1.5px solid rgba(195, 147, 124, 0.85); /* border בולט יותר */
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);       /* רקע אטום יותר */
  animation: envelopeHintPulse 2.4s var(--ease) infinite;
  box-shadow: 0 2px 8px rgba(58, 51, 44, 0.08);
}
.envelope-hint-icon {
  display: inline-block;
  font-size: 1em;                              /* גדול יותר (היה 0.8em) */
  opacity: 0.85;
  transform: translateY(-0.05em);
  color: var(--c-terracotta-d);
}
.envelope-hint-text {
  display: inline-block;
}

@keyframes envelopeHintPulse {
  0%, 100% { opacity: 0.55; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-2px); }
}

/* נעילת גלילה כשהמעטפה סגורה */
html.envelope-closed,
html.envelope-closed body {
  overflow: hidden;
}

/* h2c-card · Splash overlay — נעילת גלילה בזמן ה-splash, ה-overlay עצמו,
   ומעבר fade-out. ה-splash מופיע מהשנייה הראשונה (class מוסף ב-<head>) ויורד
   ע"י JS כש-env-body+env-flap נטענו. */
html.splash-active,
html.splash-active body {
  overflow: hidden;
}
.splash-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;                /* מעל envelope-overlay (9999) ומעל mute (10000) */
  background: #FBF8F1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  /* fade-out transition מועבר ע"י JS עם class is-fading. transition הוגדר ישירות
     כדי לא להאט את ההופעה הראשונה. */
  will-change: opacity;
}
.splash-overlay.is-fading {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease-out;
}
.splash-overlay[hidden],
html:not(.splash-active) .splash-overlay {
  display: none;
}
.splash-mono {
  width: clamp(110px, 18vw, 180px);
  height: auto;
  color: #9A6B52;                /* טרקוטה — אותו צבע כמו המונוגרמה בחותם */
  animation: splashFadeIn 0.22s ease-out;
}
@keyframes splashFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .splash-mono { animation: none; }
}

/* prefers-reduced-motion — pulse בלבד מבוטל. המעטפה עצמה סטטית. */
@media (prefers-reduced-motion: reduce) {
  .envelope-hint {
    animation: none;
    opacity: 0.85;
  }
  .envelope-shape { transition: none; }
}

/* ============================================================
   r41+r42 — כפתור השתקה צף (🔊/🔇)
   מיקום: פינה תחתונה-שמאלית — RTL מנתב פעולות ראשיות לימין, לכן
   פעולה משנית (mute) בשמאל. ברירת מחדל: opacity:0 + pointer-events:none
   + visibility:hidden — אינו נמצא ב-tab order עד שמופיע.
   ב-JS: הוספת class .is-visible אחרי 'playing' event → fade-in רך.
   ב-'ended' event: הסרת .is-visible → fade-out 0.6s ואז visibility:hidden
   (אוטומטית דרך step-end transition).
   ============================================================ */
.bg-song-toggle {
  position: fixed;
  left: clamp(1rem, 3vw, 1.6rem);
  bottom: clamp(1rem, 3vw, 1.6rem);
  z-index: 10000;                          /* מעל envelope-overlay (9999) ומעל הכל */
  width: 44px;                             /* r41e: גודל מגע 44×44 קבוע */
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(195, 147, 124, 0.55);   /* r41e: טרקוטה במקום אפור */
  background: var(--c-cream);              /* r41e: שמנת אטומה, שייכות לשפה */
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(58, 51, 44, 0.10);
  padding: 0;
  /* מצב מוסתר */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 0.45s ease,
    transform 0.45s ease,
    visibility 0s linear 0.6s,             /* visibility משתהה עד אחרי fade */
    background 0.2s ease,
    box-shadow 0.2s ease;
}
.bg-song-toggle.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    visibility 0s linear 0s,               /* מיד visible */
    background 0.2s ease,
    box-shadow 0.2s ease;
}
.bg-song-toggle:hover {
  background: #fff;
  border-color: rgba(195, 147, 124, 0.8);
  box-shadow: 0 4px 14px rgba(58, 51, 44, 0.16);
}
.bg-song-toggle:focus-visible {
  outline: 2px solid var(--c-terracotta);
  outline-offset: 3px;
}
.bg-song-toggle-svg {
  width: 22px;
  height: 22px;
  color: #C3937C;                          /* טרקוטה — שייכות לשפה */
  display: block;
}
.bg-song-toggle-off { display: none; }
.bg-song-toggle[aria-pressed="true"] .bg-song-toggle-on  { display: none; }
.bg-song-toggle[aria-pressed="true"] .bg-song-toggle-off { display: block; }

@media (prefers-reduced-motion: reduce) {
  .bg-song-toggle {
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    transform: none;
  }
  .bg-song-toggle.is-visible {
    transition: opacity 0.2s ease, visibility 0s linear 0s;
    transform: none;
  }
}

/* === נייד (375px) === */
@media (max-width: 860px) {
  .envelope-overlay { gap: 1.4rem; }
  .envelope-card    { gap: 1.4rem; }
  .envelope-shape   { width: min(82vw, 420px); }   /* 82% של viewport, max 420 */

  /* r41e: הזמנה במובייל — טיפוגרפיה קומפקטית, גובה כמעט מלא, מעוגן לעליון */
  .envelope-card-inside { height: 95%; top: 3%; }
  .envelope-card-frame  { gap: 0.25em; padding: 4% 4% 5%; margin: 2.5%; justify-content: flex-start; }
  .envelope-card-ornament { font-size: 0.8rem; }
  .envelope-card-names {
    font-size: clamp(1.05rem, 4.4vw, 1.6rem);    /* ~16-26px בנייד */
    letter-spacing: 0.02em;
    line-height: 1.05;
  }
  .envelope-card-divider { width: 32%; margin: 0.12em 0; }
  .envelope-card-date {
    font-size: clamp(0.62rem, 2.4vw, 0.92rem);   /* ~9-14px בנייד */
    letter-spacing: 0.18em;
  }
  .envelope-card-venue {
    font-size: clamp(0.5rem, 1.9vw, 0.72rem);    /* ~7-11px */
    letter-spacing: 0.06em;
  }
  .envelope-subtitle {
    font-size: 1.65rem;          /* ~26px בנייד */
    letter-spacing: 0.03em;
  }
  .envelope-hint {
    font-size: 1.05rem;          /* ~17px בנייד */
    padding: 0.5em 1.3em;
  }

  /* פינות sprigs */
  .envelope-leaf--tr {
    width: 44vw;
    top: -3%;
    right: -7%;
    opacity: 0.46;
    --anim-opacity: 0.46;
  }
  .envelope-leaf--bl {
    width: 48vw;
    bottom: -4%;
    left: -8%;
    opacity: 0.44;
    --anim-opacity: 0.44;
  }

  /* petals פנימיים */
  .envelope-petals {
    width: 86vw;
    opacity: 0.5;
    --anim-opacity: 0.5;
  }

  /* דקורציות חדשות במובייל — איזון לשליש התחתון הריק */
  .envelope-deco--branch-tl {
    width: 46vw;
    top: -3%;
    left: -10%;
    opacity: 0.24;
  }
  .envelope-deco--branch-br {
    width: 50vw;
    bottom: -3%;
    right: -10%;
    opacity: 0.28;
  }
  .envelope-deco--leaf-ml {
    width: 18vw;
    top: 48%;
    left: 1%;
    opacity: 0.32;
  }
  .envelope-deco--leaf-mr {
    width: 20vw;
    top: 18%;
    right: 3%;
    opacity: 0.30;
  }
  .envelope-deco--leaf-tr2 { display: none; }   /* פחות עומס בנייד */
  .envelope-deco--leaf-bl2 {
    width: 22vw;
    bottom: 18%;
    left: 6%;
    opacity: 0.28;
  }
}