/* ══════════════════════════════════════════════════════════════════════
   raffaello.css — שכבת עיצוב שנייה לאתר מרקוס
   ──────────────────────────────────────────────────────────────────────
   מה זה עושה: מחליף את השפה העיצובית של כל האתר *מתחת לסרטון* בשפה של
   אתר הרפרנס (רפאלו): שמנת חמה, סריף דק, זהב עדין, בלי צללים, בלי
   פינות מעוגלות, כפתור פחם אחד, הרבה אוויר.

   מה זה לא נוגע: ‎.film‎ (הסרטון, הפריימים, הכיתובים, הפס והחצים)
   ו-‎.site-header‎. אלה נשארים בדיוק כפי שאושרו.

   איך מבטלים: מוחקים את שורת ה-link ל-raffaello.css מתוך index.html,
   או מריצים את ROLLBACK-raffaello.sh. הקובץ הזה לא משנה HTML או JS.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. טוקנים מקומיים: מחליפים את הצבע והגופן רק בתוך המקטעים ────────
   מכוון לתחילית של המקטעים ולא ל-‎:root‎ — כדי שהסרטון וההדר לא יזוזו
   אפילו בפיקסל. כל הרכיבים שמשתמשים ב-var() מקבלים את הערך החדש מכאן. */
.hero-copy,
.story,
.menu,
.events,
.atmos,
.gallery,
.faq,
.inquiry,
.site-footer{
  --paper:#F6F2EA;
  --paper-soft:#FBF8F1;
  --wall:#F6F2EA;
  --film-surface:#F6F2EA;

  --ink:#2A2521;
  --ink-soft:#5B5147;
  --ink-muted:#8A7C6D;
  --body-ink:#4A423A;

  --accent:#2A2521;
  --accent-hover:#3B332B;
  --accent-ink:#2A2521;
  --on-accent:#F8F5EE;

  --line:rgba(42,37,33,.13);
  --line-strong:rgba(42,37,33,.30);
  --hair-2:rgba(42,37,33,.12);

  --radius-control:0px;
  --radius-image:0px;
  --radius-pill:0px;

  --display:'David Libre','Frank Ruhl Libre',Georgia,'Times New Roman',serif;
  --body:'Assistant',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:var(--display);
  --font-body:var(--body);

  --gold:#A9814C;
  --cream:#F6F2EA;
  background-color:#F6F2EA;
  color:#2A2521;
}

/* ── 2. רקע: שמנת שטוחה, בלי טפט הקיר ובלי תפרים ───────────────────── */
.hero-copy,
.story,
.menu,
.events,
.atmos,
.gallery,
.faq,
.inquiry{
  background-color:#F6F2EA !important;
  background-image:none !important;
}

/* החיבור אל הסרטון: הסרט נגמר בגוון הקיר (#DDD0BB), וכאן הוא נמס לשמנת.
   זה "הגשר" היחיד — משם והלאה הכל שטוח. */
.hero-copy{
  background-image:linear-gradient(180deg,#DDD0BB 0%,#E9DED1 24%,#F6F2EA 68%) !important;
  padding-block:clamp(46px,8vw,86px) clamp(58px,10vw,110px) !important;
}
.story::before{ display:none !important; }

/* ── 3. טיפוגרפיה ──────────────────────────────────────────────────── */
.sec__kicker{
  font-family:var(--display) !important;
  font-weight:500 !important;
  font-size:clamp(11px,3vw,12.5px) !important;
  letter-spacing:.24em !important;
  color:#A9814C !important;
  margin-block-end:14px !important;
  text-transform:none;
}

h1,h2,h3,.sec__title,.menu__title,.mcard__t,.ed__title,.faq__q,.site-footer__name{
  font-family:var(--display) !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  line-height:1.24 !important;
  color:#2A2521 !important;
}
.sec__title,.menu__title,.inquiry .sec__title{
  font-size:clamp(29px,6.6vw,40px) !important;
}

/* גוף הטקסט — Assistant 300, מרווח שורות נדיב, רוחב קריאה צר */
.hero-copy__sub,.inquiry__sub,.mcard__p,.ed__text,.faq__a p,
.site-footer__line,.site-footer__staging,.story__text p{
  font-family:var(--body) !important;
  font-weight:300 !important;
  color:#5B5147 !important;
  line-height:1.95 !important;
  text-wrap:pretty;
}

/* ── 4. בלי צללים ובלי פינות מעוגלות באף רכיב מתחת לסרטון ───────────── */
.mcard,.mcard__media,.atmos__fig,.atmos__fig img,.gallery img,.shot,
.dish picture,.dish img,.site-footer__logo,.inquiry__wa{
  border-radius:0 !important;
}
.mcard__media,.atmos__fig img,.dish::before,.site-footer__logo{ box-shadow:none !important; }
.dish::before{ display:none !important; }

/* ── 5. כפתורים — מלבן פחם קטן, כמו ברפרנס ─────────────────────────── */
.hero-copy .btn,
.inquiry .btn,
.inquiry__wa{
  border-radius:0 !important;
  background:#2A2521 !important;
  color:#F8F5EE !important;
  font-family:var(--body) !important;
  font-weight:400 !important;
  font-size:13px !important;
  letter-spacing:.09em !important;
  padding:16px 32px !important;
  box-shadow:none !important;
  min-height:0 !important;
  border:0 !important;
}
.hero-copy .btn:hover,
.inquiry .btn:hover,
.inquiry__wa:hover{ background:#3B332B !important; }
.btn--primary svg{ fill:currentColor; }

/* ── 6. פתיח (מתחת לסרטון) ─────────────────────────────────────────── */
.hero-copy{
  text-align:center;
}
.hero-copy__sub{
  max-width:34rem !important;
  margin:0 auto clamp(26px,4vw,36px) !important;
  font-size:clamp(16px,1.3vw,18.5px) !important;
}
.hero-copy .btn{ margin:0 auto; display:inline-block; }

/* ── 7. הסיפור ─────────────────────────────────────────────────────── */
.story{ padding-block:0 clamp(40px,7vw,90px) !important; }
.story__text p{
  font-size:clamp(17px,4.6vw,21px) !important;
  line-height:2 !important;
  color:#4A423A !important;
}
/* הפסקאות עצמן עוברות לסריף/סאנס של הרפרנס — רק החתימה נשארת בכתב יד */
.story__text .hand,
.story__text p.hand{
  font-family:var(--body) !important;
  font-weight:300 !important;
  letter-spacing:0 !important;
  font-size:clamp(17px,4.6vw,21px) !important;
  line-height:2 !important;
  color:#4A423A !important;
}
/* הדמויות צולמו על רקע בז' — multiply מטמיע אותן בשמנת בלי תפר של מלבן */
.dish img{ mix-blend-mode:multiply; }
.story__text .eyebrow{
  color:#A9814C !important;
  font-weight:500 !important;
  letter-spacing:.24em !important;
}
.sign{
  font-family:'Gveret Levin',var(--body) !important;
  color:#A9814C !important;
  font-size:clamp(30px,8vw,42px) !important;
}
.story__foot .rule,
.rule{ background:rgba(169,129,76,.55) !important; }

/* ── 8. השולחן ─────────────────────────────────────────────────────── */
.menu{ padding-block:clamp(30px,6vw,70px) clamp(50px,8vw,100px) !important; }
.mcard__n{
  color:#8A6531 !important;
  font-family:var(--body) !important;
  font-size:10.5px !important;
  letter-spacing:.32em !important;
  opacity:1 !important;
}
.mcard__t{
  font-size:clamp(20px,5vw,23px) !important;
  margin-block:0 8px !important;
}
.mcard__p{
  font-size:14.5px !important;
  line-height:1.9 !important;
  color:#5B5147 !important;
}
.mcard__ico{ stroke:#A9814C !important; }
.menu__hint{
  font-family:var(--body) !important;
  color:#6F6154 !important;
  letter-spacing:.14em !important;
}

/* ── 9. סוגי האירועים ─────────────────────────────────────────────── */
.events{ padding-block:clamp(46px,9vw,100px) !important; }
.ed--icon{
  border-top:1px solid rgba(42,37,33,.12) !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:0 !important;
}
.ed__ico{
  border:0 !important;
  border-radius:0 !important;
  width:30px !important;
  height:30px !important;
  justify-self:start !important;
  margin-block-end:14px;
  color:#A9814C !important;
}
.ed__ico svg{ width:27px !important; height:27px !important; stroke-width:1 !important; }
.ed__title{
  font-size:clamp(21px,5.2vw,25px) !important;
  margin-block:0 10px !important;
}
.ed__text{
  font-size:15px !important;
  line-height:1.95 !important;
  max-width:42ch !important;
}

/* ── 10. גלריות ───────────────────────────────────────────────────── */
.atmos{ padding-block:clamp(46px,9vw,100px) 0 !important; }
.atmos__grid{ gap:12px !important; }
.gallery{ padding-block:clamp(46px,9vw,100px) !important; }
.gallery__grid{ gap:12px !important; }

/* ── 11. שאלות ────────────────────────────────────────────────────── */
.faq{ padding-block:clamp(40px,8vw,90px) !important; }
.faq__q{
  font-size:clamp(17px,4.4vw,20px) !important;
  font-weight:500 !important;
  color:#2A2521 !important;
}
.faq__q::after{ border-color:#A9814C !important; }
.faq__a p{ font-size:15px !important; line-height:1.95 !important; }

/* ── 12. יצירת קשר ────────────────────────────────────────────────── */
.inquiry{ padding-block:clamp(52px,10vw,110px) clamp(56px,10vw,116px) !important; text-align:center; }
.inquiry__sub{ max-width:32rem !important; margin-inline:auto !important; }
.inquiry__alt{
  font-family:var(--body) !important;
  font-size:13.5px !important;
  color:#8A7C6D !important;
  letter-spacing:.04em !important;
}
.inquiry__alt a{ color:#2A2521 !important; border-color:#A9814C !important; }
.note--staging{ color:#8A7C6D !important; font-size:12px !important; }

/* ── 13. הדר — לא נוגעים. הוא זכוכית קפואה (החלטה מאושרת של אביתר),
   הוא מוסתר לגמרי בזמן הסרט, וכפתור ההדר נשאר עדין ושקוף. ─────────── */

/* ── 14. פוטר ─────────────────────────────────────────────────────── */
.site-footer{
  background:#F6F2EA !important;
  border-block-start:1px solid rgba(169,129,76,.45) !important;
  padding-block:clamp(40px,6vw,72px) calc(clamp(32px,5vw,60px) + env(safe-area-inset-bottom,0px)) !important;
}
.site-footer__logo{
  background:transparent !important;
  padding:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  height:44px !important;
}
.site-footer__name{
  font-size:1.3rem !important;
  letter-spacing:.06em !important;
}
.site-footer__line{ font-size:13px !important; line-height:1.85 !important; max-width:38ch !important; }
.site-footer__nav a{
  font-size:12px !important;
  letter-spacing:.1em !important;
  color:#5B5147 !important;
}
.site-footer__by{ font-size:12.5px !important; color:#8A7C6D !important; letter-spacing:.04em !important; }
.site-footer__staging{
  border-block-start:1px solid rgba(42,37,33,.1) !important;
  font-size:11.5px !important;
}
.credit,.credit span{ color:#6F6154 !important; font-size:11px !important; letter-spacing:.06em !important; }
.credit__logo{ opacity:.85; }
.wa-link{ color:#2A2521 !important; border-color:#A9814C !important; }

/* ── 14. מצב כהה: המקטעים נשארים שמנת כמו הרפרנס ──────────────────── */
@media (prefers-color-scheme: dark){
  .hero-copy,.story,.menu,.events,.atmos,.gallery,.faq,.inquiry{
    background-color:#F6F2EA !important;
    color:#2A2521 !important;
  }
  .site-footer{ background:#F6F2EA !important; }
}

/* ── 15. מחשב: מרווחים גדולים, טיפוגרפיה מעט גדולה ────────────────── */
@media (min-width:900px){
  .sec__title,.menu__title{ font-size:clamp(34px,3.3vw,46px) !important; }
  /* הפתיח: הצהרה ממורכזת אחת, והכפתור מתחתיה — כמו ברפרנס */
  .hero-copy{
    display:flex !important;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:clamp(26px,4vh,40px);
    padding-block:clamp(110px,13vh,170px) clamp(80px,11vh,140px) !important;
  }
  .hero-copy__sub{
    grid-column:auto !important;grid-row:auto !important;
    max-width:44ch !important;text-align:center !important;margin:0 !important;
    font-size:19px !important;
  }
  .hero-copy .btn{ grid-column:auto !important;grid-row:auto !important;justify-self:auto !important; }
  .story__text p{ font-size:clamp(18px,1.45vw,23px) !important; line-height:1.95 !important; }
  .events{ padding-block:clamp(60px,10vh,120px) !important; }
  .ed__title{ font-size:clamp(24px,2vw,30px) !important; }
  .ed__text{ font-size:15.5px !important; }
  .mcard__t{ font-size:22px !important; }
  .mcard__p{ font-size:14.5px !important; }
  .faq__q{ font-size:20px !important; }
  .faq__a p{ font-size:15.5px !important; }
  .inquiry .sec__title{ font-size:clamp(38px,4vw,56px) !important; }
  .atmos,.gallery{ padding-block:clamp(60px,10vh,120px) !important; }
}