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

/* ── פונטים מקומיים ── */
@font-face {
  font-family: 'Gveret Levin';
  src: url('../fonts/gveret-levin-hebrew.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0590-05FF, U+200C-2010, U+FB1D-FB4F, U+25CC;
}
@font-face {
  font-family: 'Gveret Levin';
  src: url('../fonts/gveret-levin-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+20AC;
}
@font-face {
  font-family: 'Assistant';
  src: url('../fonts/assistant-hebrew.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Assistant';
  src: url('../fonts/assistant-latin.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
                 U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --wall:     #DED1C1;
  --ink:      #2A2320;
  --ink-soft: rgba(42, 35, 32, .74);   /* ניגודיות 5:1 על הקיר — עובר AA */
  --hair:     rgba(42, 35, 32, .26);
  --shadow:   74, 52, 34;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --sans:     'Assistant', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand:     'Gveret Levin', 'Assistant', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

/* ── הקיר: אריח אחד שחוזר על עצמו = רצף בלי תפר, מקצה המגילה לקצה ── */
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: clip;
  background-color: var(--wall);
  background-image:
    radial-gradient(135% 55% at 50% 0%,  rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(var(--shadow), .16) 100%),
    url('../media/wall-tile.jpg');
  background-size: 100% 100%, 100% 100%, 512px 512px;
  background-repeat: no-repeat, no-repeat, repeat;
}
img { display: block; max-width: 100%; }
figure { margin: 0; }

/* ── דף פתיחה ── */


@keyframes logoIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── מסך 1 · הסרט — נעוץ על כל המסך ומתנגן לאט לפי הגלילה ── */

/* הפוסטר (פריים ראשון) הוא רקע — לא יכול להיערם על הקנבס בשום דפדפן */

.home__film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home__film { z-index: 1; }
/* החלקה של התחתית לתוך הרקע — שלא יראו תפר כשהסיפור מגיע */

/* נגישות: טקסט מוסתר לקוראי מסך וגוגל */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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






/* סימון מונפש: טבעת שמתפשטת מהנקודה שהגעת אליה */

@keyframes railRing {
  0%   { transform: scale(.7); opacity: .85; }
  65%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}




/* רמז גלילה */


@keyframes cueRun {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ── המגילה ── */
.story {
  position: relative;
  padding: 7svh 0 0;
}
/* החיבור בין סוף הסרטון לעמוד הבא: מתחיל באותו גוון בדיוק של סוף הסרטון
   (#DDD0BB) ונמס לתוך הקיר — כך שאין תפר ואין "קטע לבן" תלוש. */
.story::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 52svh;
  background: linear-gradient(to bottom,
      #DDD0BB 0%,
      #DDD0BB 26%,
      rgba(221, 208, 187, .74) 58%,
      rgba(221, 208, 187, 0) 100%);
  pointer-events: none;
  z-index: 0;
}
.story > * { position: relative; z-index: 1; }

/* המנות: גדולות, גולשות מעט, ויושבות במרחב — עם צל מגע מתחת */
.dish { position: relative; display: block; }
.dish::before {                      /* צל המגע: מה שהופך "מדבקה" לחפץ */
  content: '';
  position: absolute;
  inset: auto 8% -2% 8%;
  height: 15%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--shadow), .40), rgba(var(--shadow), 0) 70%);
  filter: blur(11px);
  z-index: 0;
}
.dish picture {
  position: relative;
  z-index: 1;
  display: block;
  will-change: transform;
  transform-origin: 50% 100%;
}
.dish img { width: 100%; height: auto; }

.dish--pizza { width: 88%; margin: 0 auto 9svh -13%; }
.dish--salad { width: 82%; margin: 9svh -11% 0 auto; }

/* הטקסט */
.story__text {
  max-width: 21rem;
  margin-inline: auto;
  padding: 0 4%;
  text-align: center;
  text-wrap: pretty;
  color: var(--ink);
}
.story__text p {
  margin: 0 0 1.75em;
  font-family: var(--hand);
  font-size: clamp(19px, 5.3vw, 25px);
  line-height: 2.1;
}
/* השורה הראשונה מעט גדולה — נותנת היררכיה במקום בלוק אחיד */
.story__text .lead { font-size: 1.07em; }
.story__text .lead-last { margin-bottom: 0; }

/* שורת הפתיחה — גוף קטן, מרווח אותיות. זה מה שנותן תחושת הידוק */
.eyebrow {
  font-family: var(--sans) !important;
  font-weight: 300;
  font-size: clamp(11px, 3vw, 12.5px) !important;
  letter-spacing: .24em;
  color: var(--ink-soft);
  line-height: 1.6 !important;
  margin-bottom: 2.4em !important;
}

/* סוגר — קו דק וחתימה */
.story__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1em;
  padding: 9svh 0 13svh;
}
.rule {
  display: block;
  width: 46px; height: 1px;
  background: var(--hair);
}
.sign {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(11px, 3vw, 12.5px);
  letter-spacing: .24em;
  color: var(--ink-soft);
}

/* ── כניסה עדינה: תנועה קטנה, רכה, עם טשטוש שמתפזר ── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(5px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out), filter 900ms var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; filter: none; }
/* נכנסים בזה אחר זה, לא בבת אחת */
.story__text > *:nth-child(2) { transition-delay: 70ms; }
.story__text > *:nth-child(3) { transition-delay: 140ms; }
.story__text > *:nth-child(4) { transition-delay: 210ms; }
.story__foot > *:nth-child(2) { transition-delay: 120ms; }

.dish {
  opacity: 0;
  transform: translateY(30px) scale(1.015);
  transition: opacity 1100ms var(--ease-out), transform 1100ms var(--ease-out);
}
.dish.is-in { opacity: 1; transform: none; }
.dish::before { transition: opacity 1100ms var(--ease-out); }
.dish:not(.is-in)::before { opacity: 0; }

/* ── מחשב ── */
@media (min-width: 900px) {
  .film { min-height: 600vh; min-height: 600svh; }   /* מחשב: מרווח גדול עוד יותר */

  .story { padding: 10vh 0 0; }
  .dish--pizza { width: 47%; margin: 0 auto 10vh -7%; }
  .dish--salad { width: 41%; margin: 10vh -6% 0 auto; }
  .story__text { max-width: 32rem; }
  .story__text p { font-size: clamp(24px, 2.2vw, 36px); line-height: 1.95; }
  .story__foot { padding: 12vh 0 14vh; }
}

/* ── נגישות: בלי תנועה — הכול גלוי וסטטי ── */
@media (prefers-reduced-motion: reduce) {


  .reveal, .dish { opacity: 1; transform: none; filter: none; transition: none; }
  .dish::before { opacity: 1 !important; }

  .home__film { display: none; }   /* הסרט נשאר פוסטר סטטי — בלי סקראב */
  .film { min-height: 100svh; }    /* בלי מסלול ארוך */
  .film__pin { position: static; } /* בלי נעיצה */
}
.flat .intro { display: none; }
.flat .reveal, .flat .dish { opacity: 1; transform: none; filter: none; transition: none; }
.flat .cue { display: none; }
.flat .rail { display: none; }
.flat .home__film { display: none; }
.flat .film { min-height: 100svh; }
.flat .film__pin { position: static; }

/* ═══════════════════════════════════════════════════════════
   סבב 2 — טיפוגרפיה יוקרתית, הדר, כתוביות סיפור, אירועים,
   גלריה, יצירת קשר ופוטר.
   ═══════════════════════════════════════════════════════════ */

/* ── Frank Ruhl Libre — סריפי קלאסי לכותרות (OFL, מקומי) ── */
@font-face { font-family:'Frank Ruhl Libre'; src:url('../fonts/frank-ruhl-400-hebrew.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family:'Frank Ruhl Libre'; src:url('../fonts/frank-ruhl-400-latin.woff2')  format('woff2'); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Frank Ruhl Libre'; src:url('../fonts/frank-ruhl-500-hebrew.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family:'Frank Ruhl Libre'; src:url('../fonts/frank-ruhl-500-latin.woff2')  format('woff2'); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Frank Ruhl Libre'; src:url('../fonts/frank-ruhl-700-hebrew.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family:'Frank Ruhl Libre'; src:url('../fonts/frank-ruhl-700-latin.woff2')  format('woff2'); font-weight:700; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --serif:  'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
  --accent: #3D2B1F;                 /* אדום עגבנייה עמוק — לכפתורים בלבד */
  --rail:   clamp(18px, 5vw, 64px);
}

/* ── טיפוגרפיה: גוף הטקסט עובר ל-Assistant; כתב יד רק לחתימה ── */
.story__text p {
  font-family: var(--sans) !important;
  font-weight: 300;
  line-height: 1.8;
}
.story__text .lead { font-weight: 400; }
.story__text .eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: .04em;
}
.story__foot .sign {
  font-family: var(--hand);
  font-size: clamp(26px, 7vw, 36px);
  margin: 0;
}

/* ── הדר מינימליסטי ── */
.head {
  position: fixed; inset: 0 0 auto; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px var(--rail);
  background: linear-gradient(to bottom, rgba(222,209,193,.92), rgba(222,209,193,0));
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s var(--ease-out);
}
.head.is-on { opacity: 1; }
.head__logo, .head__cta { pointer-events: auto; }
.head__logo {
  font-family: var(--serif); font-weight: 700;
  font-size: 15px; letter-spacing: .16em;
  color: var(--ink); text-decoration: none;
  text-transform: uppercase; direction: ltr;
}
.head__logo span { margin: 0 6px; opacity: .5; }
.head__cta {
  font-size: 14px; font-weight: 500;
  color: var(--ink); text-decoration: none;
  border: 1px solid var(--hair); border-radius: 999px;
  padding: 8px 16px; min-height: 38px;
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.34);
  transition: background-color .25s, border-color .25s;
}
.head__cta:hover { background: rgba(255,255,255,.62); border-color: rgba(42,35,32,.42); }

/* ── כתוביות הסיפור על הסרט ── */






@media (min-width: 900px) {


}

/* ── כותרות מקטעים ── */
.sec__kicker {
  margin: 0 0 10px;
  text-align: center;
  font-size: 12px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sec__title {
  margin: 0 0 clamp(28px, 6vh, 54px);
  text-align: center;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(27px, 8vw, 48px);
  line-height: 1.2;
  text-wrap: balance;
}

/* ── אירועי הבוטיק ── */
.events { padding: clamp(64px, 13vh, 130px) var(--rail) 0; }
.card {
  margin: 0 auto clamp(38px, 8vh, 76px);
  max-width: 34rem;
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(42,35,32,.10);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 44px -26px rgba(74,52,34,.55);
}
.card__ph { aspect-ratio: 16 / 10; overflow: hidden; }
.card__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__title {
  margin: 0; padding: 20px 22px 8px;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(20px, 5.4vw, 27px);
  line-height: 1.25;
}
.card__text {
  margin: 0; padding: 0 22px 24px;
  font-weight: 300; font-size: 16.5px; line-height: 1.8;
  color: var(--ink-soft);
}

/* ── גלריה ── */
.gallery { padding: clamp(56px, 11vh, 110px) var(--rail) 0; }
.gallery__grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  margin: 0 auto; max-width: 62rem;
}
.gallery__grid img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  border-radius: 10px;
  box-shadow: 0 14px 32px -22px rgba(74,52,34,.55);
}
@media (min-width: 900px) { .gallery__grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }

/* ── יצירת קשר ── */
.inquiry { padding: clamp(64px, 13vh, 130px) var(--rail) 0; }
.inquiry__sub {
  margin: -18px auto clamp(26px, 5vh, 40px);
  max-width: 30rem; text-align: center;
  font-weight: 300; font-size: 16.5px; line-height: 1.8;
  color: var(--ink-soft); text-wrap: pretty;
}
.lead {
  margin: 0 auto; max-width: 30rem;
  display: grid; gap: 14px;
}
.lead__f { display: grid; gap: 7px; }
.lead__f span {
  font-size: 13px; font-weight: 500; color: var(--ink-soft);
  letter-spacing: .02em;
}
.lead__f input, .lead__f select {
  font: inherit; font-size: 17px; color: var(--ink);
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(42,35,32,.16);
  border-radius: 10px;
  padding: 14px 15px; min-height: 52px;
  width: 100%;
  -webkit-appearance: none; appearance: none;
}
.lead__f select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: left 18px top 51%, left 13px top 51%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.lead__f input:focus, .lead__f select:focus {
  outline: 2px solid var(--accent); outline-offset: 1px;
  background: #fff;
}
.btn {
  font: inherit; font-size: 17px; font-weight: 500;
  border: 0; border-radius: 999px; cursor: pointer;
  min-height: 54px; padding: 0 28px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .18s var(--ease-out), filter .2s;
}
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 12px 28px -14px rgba(61,43,31,.7); }
.btn--primary:hover { filter: brightness(1.08); }
.btn--primary:active { transform: scale(.985); }
.lead__alt {
  margin: 4px 0 0; text-align: center;
  font-size: 14px; color: var(--ink-soft);
}
.wa-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ── פוטר ── */
.foot {
  margin-top: clamp(64px, 13vh, 130px);
  padding: clamp(34px, 7vh, 60px) var(--rail) calc(clamp(34px, 7vh, 60px) + env(safe-area-inset-bottom));
  text-align: center;
  border-top: 1px solid var(--hair);
}
.foot__name { margin: 0 0 8px; font-family: var(--serif); font-weight: 700; font-size: 19px; }
.foot__line { margin: 0 0 14px; font-size: 14.5px; font-weight: 300; color: var(--ink-soft); }
.foot__meta { margin: 0; font-size: 13px; color: var(--ink-soft); }

/* ── כפתור וואטסאפ צף ── */
.wa-float {
  position: fixed; z-index: 70;
  inset: auto calc(var(--rail) * .72) calc(18px + env(safe-area-inset-bottom)) auto;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent);
  box-shadow: 0 14px 30px -10px rgba(61,43,31,.75);
  opacity: 0; transform: translateY(14px) scale(.92);
  transition: opacity .35s var(--ease-out), transform .4s var(--ease-out);
  pointer-events: none;
}
.wa-float.is-on { opacity: 1; transform: none; pointer-events: auto; }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }
.wa-float:active { transform: scale(.94); }

/* ── תיקון חפיפת התמונות הצפות במובייל ── */
@media (max-width: 899px) {
  .dish--pizza { width: 84%; margin: 0 auto 7svh -8%; }
  .dish--salad { width: 78%; margin: 7svh -8% 0 auto; }
  .story { padding-top: 4svh; }
}
@media (prefers-reduced-motion: reduce) {
  .head, .wa-float, .film__over, .card, .gallery__grid img { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   סבב 3 — Editorial איטלקי: קווי שיער, אוויר, בלי קופסאות AI.
   ═══════════════════════════════════════════════════════════ */

/* קישור דילוג מעל הסרטון */
.skip {
  position: absolute; z-index: 5;
  top: calc(14px + env(safe-area-inset-top)); left: var(--rail);
  font-size: 13px; font-weight: 500; letter-spacing: .02em;
  color: rgba(255,255,255,.9); text-decoration: none;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(20,14,10,.28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color .25s;
}
.skip:hover { background: rgba(20,14,10,.45); }
.skip span { display: inline-block; margin-right: 4px; }

/* מיד אחרי הסרט */
.hero-copy {
  padding: clamp(58px, 12vh, 120px) var(--rail) clamp(30px, 6vh, 56px);
  text-align: center;
}
.hero-copy__title {
  margin: 0 0 18px;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(30px, 9vw, 58px);
  line-height: 1.14; text-wrap: balance;
}
.hero-copy__sub {
  margin: 0 auto 28px; max-width: 32rem;
  font-weight: 300; font-size: 17px; line-height: 1.8;
  color: var(--ink-soft); text-wrap: pretty;
}
.hero-copy .btn { display: inline-flex; }

/* ── אירועים: פריסת מגזין ── */
.ed {
  display: grid; gap: 18px;
  max-width: 40rem; margin: 0 auto;
  padding: clamp(30px, 6vh, 54px) 0;
  border-top: 1px solid rgba(28,25,23,.12);
}
.ed:first-of-type { border-top: 0; padding-top: 0; }
.ed__ph { margin: 0; }
.ed__ph img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: 3px;
  box-shadow: 0 26px 50px -34px rgba(74,52,34,.75);
}
.ed__title {
  margin: 0 0 10px;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(22px, 6vw, 32px); line-height: 1.2;
}
.ed__text {
  margin: 0; max-width: 34rem;
  font-weight: 300; font-size: 17px; line-height: 1.8;
  color: var(--ink-soft);
}
@media (min-width: 900px) {
  .ed { grid-template-columns: 1.15fr 1fr; gap: 46px; align-items: center; max-width: 62rem; }
  .ed--flip .ed__ph { order: 2; }
  .ed--flip .ed__body { order: 1; }
}

/* ── איך זה עובד ── */
.how { padding: clamp(56px, 11vh, 110px) var(--rail) 0; }
.how__list {
  list-style: none; margin: 0 auto; padding: 0; max-width: 34rem;
  counter-reset: step;
}
.how__list li {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  padding: 20px 0;
  border-top: 1px solid rgba(28,25,23,.12);
}
.how__list li:first-child { border-top: 0; }
.how__n {
  font-family: var(--serif); font-weight: 700;
  font-size: 15px; line-height: 1;
  color: var(--accent);
  border: 1px solid rgba(61,43,31,.35);
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
}
.how__list p { margin: 0; font-weight: 300; font-size: 17px; line-height: 1.7; }

/* ── שאלות נפוצות ── */
.faq { padding: clamp(56px, 11vh, 110px) var(--rail) 0; }
.faq__list { margin: 0 auto; max-width: 34rem; }
.faq__list > div { padding: 22px 0; border-top: 1px solid rgba(28,25,23,.12); }
.faq__list > div:first-child { border-top: 0; }
.faq dt {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(17px, 4.6vw, 21px); margin-bottom: 7px;
}
.faq dd {
  margin: 0; font-weight: 300; font-size: 16.5px; line-height: 1.8;
  color: var(--ink-soft);
}

/* ── כפתור טרקוטה ── */
.btn--primary { background: #3D2B1F; }
.btn--primary:hover { filter: brightness(1.09); }


/* ── כפתור ההדר: בדיוק כמו באתר החי — עדין, לא אדום מלא ── */
.site-header__cta,
.site-header a[class*="cta"]{
  background:rgba(255,255,255,.34) !important;
  color:var(--ink) !important;
  border:1px solid var(--hair, rgb(42 35 32 / 26%)) !important;
  box-shadow:none !important;
  border-radius:999px !important;
  font-weight:500 !important;
}
.site-header__cta:hover,
.site-header a[class*="cta"]:hover{
  background:rgba(255,255,255,.62) !important;
  border-color:rgb(42 35 32 / 42%) !important;
}


/* ── התמונות שהועברו מהאתר החי: גלויות תמיד ────────────────
   באתר המקור הן מוסתרות בהתחלה ומתגלות באנימציית גלילה של
   המנוע הישן. כאן המנוע שונה, ולכן הן נשארו נסתרות.
   מסירים את מצב ההסתרה — התמונות מוצגות תמיד. */
.dish,
figure.dish,
.story .dish{
  opacity:1 !important;
  filter:none !important;
  transform:none !important;
  transition:none !important;
  visibility:visible !important;
}
.dish picture,
.dish img{
  opacity:1 !important;
  filter:none !important;
  visibility:visible !important;
}
.dish::before{ opacity:1 !important; }


/* ═══ הדר: זכוכית קפואה בסגנון Apple ═══════════════════════ */
.site-header, .head, header[class*="head"]{
  background:rgba(245,239,229,.58) !important;
  -webkit-backdrop-filter:blur(20px) saturate(170%) !important;
  backdrop-filter:blur(20px) saturate(170%) !important;
  border-bottom:1px solid rgba(42,35,32,.10) !important;
  box-shadow:none !important;
}
@supports not (backdrop-filter: blur(1px)){
  .site-header, .head, header[class*="head"]{ background:rgba(245,239,229,.92) !important; }
}
/* הלוגו: בלי כרטיס לבן, בלי רקע, בלי מסגרת — שקוף לגמרי */
.site-header img, .head img, header[class*="head"] img,
.site-header svg, .head svg{
  background:none !important;
  background-color:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  filter:none !important;
}
.site-header__logo, .head__logo, [class*="logo"]{
  background:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
}


/* ── הלוגו: הלבן צרוב בתוך קובץ ה-PNG ─────────────────────
   multiply גורם ללבן להיעלם על רקע בהיר — הלוגו נשאר לבדו,
   בלי כרטיס, בלי מסגרת, בלי רקע. */
header img[src*="logo"], .head img[src*="logo"], .site-header img[src*="logo"],
header [class*="logo"] img, .site-header__logo img{
  mix-blend-mode:multiply !important;
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  border-radius:0 !important;
}
@supports (mix-blend-mode: multiply){
  header img[src*="logo"], .site-header img[src*="logo"]{ background:transparent !important; }
}


/* ── הלוגו: הסרת הכרטיס הלבן בפועל (A.brand) ───────────────── */
a.brand, .brand, header a[class*="brand"]{
  background:none !important;
  background-color:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  min-height:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
a.brand img, .brand img{ mix-blend-mode:multiply !important; background:transparent !important; }

/* ── כפתור ההדר: עדין ושקוף — החלטת אביתר (לא אספרסו כהה) ── */
.site-header__cta{
  background:rgba(255,255,255,.34) !important;
  color:var(--ink) !important;
  border:1px solid rgba(42,35,32,.26) !important;
  border-radius:999px !important;
  font-weight:500 !important;
  box-shadow:none !important;
  transition:background-color .22s ease, border-color .22s ease, transform .18s ease !important;
}
.site-header__cta:hover{ background:rgba(255,255,255,.62) !important; border-color:rgba(42,35,32,.42) !important; }
.site-header__cta:active{ transform:scale(.97) !important; }


/* ═══ מובייל: ביטול קפיצות הגלילה (Safari/Chrome iOS) ═════════
   סרגל הכתובות של הטלפון משתנה בגלילה וגורם לריצוד ולקפיצות.
   הפתרון: יחידות dvh/svh + חסימת overscroll + pan-y בלבד. */
html{
  overscroll-behavior-y:none;
  -webkit-text-size-adjust:100%;
}
body{
  overscroll-behavior-y:none;
  touch-action:pan-y;
}
/* כל מסך "במה" — גובה דינמי אמיתי, לא 100vh סטטי */
.film__pin, .film__stage, .menu__pin, .stage, [class*="__pin"]{
  height:100dvh;
  min-height:100svh;
}
@supports not (height: 100dvh){
  .film__pin, .film__stage, .menu__pin, [class*="__pin"]{ height:100svh; }
}
/* מניעת גלילה אופקית שנגררת מהקרוסלה */
.menu, .menu__pin{ overflow-x:clip; }


/* ═══ טיפוגרפיה לפי האפיון: Assistant נקי ומודרני ═══════════
   הטקסט הצף על הסרטון עובר ל-Assistant במשקל גבוה, עם ניגודיות
   גבוהה כדי שלא ייבלע בסינר השחור או בתוספות הבהירות. */
.film__line, .film__caption .film__line, [class*="film__caption"]{
  font-family:'David Libre', var(--serif) !important;
  font-weight:700 !important;
  letter-spacing:-0.005em !important;
}
.film__kicker{
  font-family:'Assistant', var(--sans) !important;
  font-weight:500 !important;
  letter-spacing:0.2em !important;
}
/* כיתוב מעל אזור כהה — הילה כהה עדינה ששומרת על קריאות */
.film__caption[data-cap="1"] .film__line,
.film__caption[data-cap="3"] .film__line{
  text-shadow:0 1px 2px rgb(20 14 10 / 55%), 0 2px 14px rgb(20 14 10 / 45%) !important;
}
/* כותרות המקטעים והקרוסלה — גם הן Assistant לפי האפיון */
.menu__title, .mcard__t, .sec__title, .hero-copy__title{
  font-family:'David Libre', var(--serif) !important;
  font-weight:700 !important;
  letter-spacing:-0.01em !important;
}
.story__text p, .sec__kicker, .mcard__p, .how__list p, .faq dd, .lead__f span{
  font-family:'Assistant', var(--sans) !important;
}


/* ═══ שוט 1: הכותרת מפוצלת לשני צידי השף ══════════════════════
   "איטליה" מצד אחד ו"אצלך בבית" מצד שני, באותו גודל ובאותה
   משקל — כך השף עולה ביניהם ונוצר אפקט העומק. */
.film__caption[data-cap="0"]{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  align-items:baseline !important;
  gap:min(30vw, 148px) !important;      /* מרווח מכויל — שורה אחת בכל צד */
  align-items:center !important;
  inset-inline:12px !important;          /* כמעט נוגע בשוליים */
  inset-block-start:23vh !important;
}
.film__caption[data-cap="0"] .film__half{
  font-family:'David Libre', var(--serif) !important;
  font-weight:700 !important;
  font-size:clamp(1.15rem, 5.05vw, 1.95rem) !important;
  line-height:1.18 !important;
  letter-spacing:-0.03em !important;
  white-space:nowrap !important;      /* שורה אחת בכל צד */
  block-size:auto !important;
  color:#2A2320 !important;
  text-shadow:0 1px 2px rgb(245 239 229 / 50%) !important;
  display:block !important;
}
.film__caption[data-cap="0"] .film__kicker.film__half{
  grid-column:1 !important;
  text-align:right !important;
  margin:0 !important;
  padding:0 !important;
}
.film__caption[data-cap="0"] .film__kicker.film__half::after{ display:none !important; }
.film__caption[data-cap="0"] .film__line.film__half{
  grid-column:2 !important;
  grid-row:1 !important;
  text-align:left !important;
  margin:0 !important;
}





/* ═══ שוטים 2–4: ניגודיות ומיקום לפי האפיון ═══════════════════ */

/* שוט 2 · מעל הסינר השחור → טקסט בהיר עם הצללה כהה, קריא מאוד */
.film__caption[data-cap="1"]{
  inset-block-start:16vh !important;
  inset-inline:var(--gutter) !important;
}
.film__caption[data-cap="1"] .film__line{
  color:#FFF8EF !important;
  font-weight:700 !important;
  text-shadow:0 1px 3px rgb(15 10 8 / 75%), 0 3px 18px rgb(15 10 8 / 60%) !important;
  max-width:min(19ch, 62vw) !important;
  margin:0 auto !important;
}

/* שוט 3 · מבט-על → מעל המנה, בלי לכסות אותה */
.film__caption[data-cap="2"]{
  inset-block-start:7.5vh !important;
  inset-inline:var(--gutter) !important;
}
.film__caption[data-cap="2"] .film__line{
  color:#2A2320 !important;
  max-width:min(21ch, 66vw) !important;
  margin:0 auto !important;
}

/* שוט 4 · המגש הריק → טקסט בגוון קרם חם שמתמזג עם העץ */
.film__caption[data-cap="3"]{
  inset-block-start:auto !important;
  inset-block-end:30vh !important;
  inset-inline:var(--gutter) !important;
}
.film__caption[data-cap="3"] .film__line{
  color:#F6EADA !important;
  text-shadow:0 1px 3px rgb(70 45 25 / 70%), 0 3px 16px rgb(70 45 25 / 50%) !important;
  max-width:min(26ch, 74vw) !important;
  margin:0 auto !important;
}


/* שוט 1: שני החצאים באותו קו ואותו גובה בדיוק */
.film__caption[data-cap="0"] .film__half{
  align-self:baseline !important;
  margin-block:0 !important;
  padding-block:0 !important;
}
.film__caption[data-cap="0"]{ align-items:baseline !important; }
