/* ═══ MOBILE ═══════════════════════════════════════════════
   Generated from the pages themselves — one rule per photograph
   actually used, so a file can never be referenced here and be
   missing from img/m/. A phone downloads the 1000px set; the
   desktop files are never requested below 820px.
   ───────────────────────────────────────────────────────── */
@media(max-width:820px){
  .bg[style*='b-peach.jpg']{background-image:url('./img/m/b-peach.jpg')!important}
  .bg[style*='c-table.jpg']{background-image:url('./img/m/c-table.jpg')!important}
  .bg[style*='d-service.jpg']{background-image:url('./img/m/d-service.jpg')!important}
  .bg[style*='e-dusk.jpg']{background-image:url('./img/m/e-dusk.jpg')!important}
  .bg[style*='f-dish.jpg']{background-image:url('./img/m/f-dish.jpg')!important}
  .bg[style*='p-chef-a.jpg']{background-image:url('./img/m/p-chef-a.jpg')!important}
  .bg[style*='p-chef-b.jpg']{background-image:url('./img/m/p-chef-b.jpg')!important}
  .bg[style*='p-evt-a.jpg']{background-image:url('./img/m/p-evt-a.jpg')!important}
  .bg[style*='p-evt-b.jpg']{background-image:url('./img/m/p-evt-b.jpg')!important}
  .bg[style*='p-pop-a.jpg']{background-image:url('./img/m/p-pop-a.jpg')!important}
  .bg[style*='p-pop-b.jpg']{background-image:url('./img/m/p-pop-b.jpg')!important}
  .bg[style*='p-priv-a.jpg']{background-image:url('./img/m/p-priv-a.jpg')!important}
  .bg[style*='p-priv-b.jpg']{background-image:url('./img/m/p-priv-b.jpg')!important}
  .bg[style*='p-priv-c.jpg']{background-image:url('./img/m/p-priv-c.jpg')!important}
  .bg[style*='p-wrk-a.jpg']{background-image:url('./img/m/p-wrk-a.jpg')!important}
  .bg[style*='p-wrk-b.jpg']{background-image:url('./img/m/p-wrk-b.jpg')!important}
}

/* ═══ THE PHONE ══════════════════════════════════════════════
   The desktop build had exactly three mobile rules: hide the nav,
   nudge the hero crop, hide the ticks. Hiding the nav left a phone
   with NO way to reach the other six pages — the one thing a
   mobile visitor needs most. Everything below fixes that and the
   things that only break at 390px.
   ───────────────────────────────────────────────────────── */
@media(max-width:820px){

  /* ── the bar ─────────────────────────────────────────── */
  .hdr{inset:12px 0 auto 0}
  .hdr-in{width:94%;padding:9px 12px;gap:8px}
  .mark{width:clamp(76px,22vw,96px)}
  .tools{gap:7px}
  .pill{height:38px;min-width:38px;padding:0 14px;font-size:.7rem}  /* 38px = thumb */
  .pill.mode{width:38px;padding:0}

  /* the burger — same pill, so nothing new was invented */
  .burger{display:inline-flex;order:-1}
  .sheet{position:fixed;inset:0;z-index:90;display:grid;align-content:center;
    justify-items:center;gap:6px;background:var(--app-dark);
    opacity:0;visibility:hidden;transition:opacity .42s var(--ease),visibility .42s}
  .sheet.on{opacity:1;visibility:visible}
  .sheet a{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
    font-size:2rem;line-height:1.75;color:var(--ink);padding:.25rem 1rem}
  [dir=rtl] .sheet a{font-family:'Alef',sans-serif;font-style:normal;font-weight:400;font-size:1.6rem}
  .sheet a.here{color:var(--glow)}
  body.locked{overflow:hidden}

  /* ── type · tuned for 390, not scaled down from 1440 ──── */
  .gate h1.brand{font-size:clamp(2.9rem,15vw,4.2rem);line-height:1}
  .gate h1{font-size:clamp(2.1rem,10.5vw,3rem)}
  [dir=rtl] .gate h1{font-size:clamp(1.9rem,9vw,2.6rem)}
  .gate .def{font-size:.82rem;padding:0 .5rem}
  .gate .sub{font-size:.68rem;letter-spacing:.16em;line-height:1.9}
  .gate .in{padding:0 1.4rem;margin-top:1.1rem}
  .gate-mark{width:clamp(148px,44vw,210px)}

  .s.word{padding:4.5rem 0}
  .s.word .in{width:100%;padding:0 1.5rem}
  .lede{font-size:clamp(1.85rem,8.6vw,2.5rem);line-height:1.18}
  [dir=rtl] .lede{font-size:clamp(1.6rem,7.4vw,2.1rem);line-height:1.34}
  .lede.sm{font-size:clamp(1.5rem,7vw,2rem)}
  .say{font-size:1rem;line-height:1.85;max-width:100%;margin-top:1.4rem}
  .dish{font-size:1rem}
  .kicker{font-size:.62rem;letter-spacing:.2em;margin-bottom:1.1rem}
  .triad{font-size:.66rem;letter-spacing:.18em}

  /* ── touch ───────────────────────────────────────────── */
  .cta{min-height:52px;padding:1rem 2rem;font-size:.7rem}
  .ch{padding:1.05rem 1.15rem;min-height:56px}
  .foot .links{gap:14px 20px;font-size:.68rem}
  .foot .links a{padding:6px 0}

  /* ── the caption sits lower, clear of the frame ──────── */
  .cap{bottom:26px;padding:0 1.4rem;font-size:11px}
  [dir=rtl] .cap{font-size:12px}

  /* ── the CV becomes two lines per role, not a squeeze ── */
  .cv li{display:block;padding:.95rem 0}
  .cv b{display:block;font-size:1.1rem}
  .cv span{display:block;margin-top:.2rem;font-size:.64rem}

  /* ── the band between photographs, proportional ──────── */
  .s.pic + .s.pic,.s.gate + .s.pic{border-top-width:20px}
}
/* a phone that is also short (landscape) must not crop the words */
@media(max-width:820px) and (max-height:520px){
  .s{min-height:auto;padding:5.5rem 0}
  .s.gate,.s.pic{min-height:100svh}
}

/* ═══ THE HEADER, ON A PHONE ═════════════════════════════════
   Rotem: "ההדר לא נראה טוב, אולי צריך את כפתור התאורה והשפה
   להכניס לדרופדאון". Four controls plus a wordmark on 390px was
   a crowded row. Now: the mark, and one button. The language and
   the theme live inside the menu, on the app's dark ground, where
   there is room for them to be 44px and legible.
   ───────────────────────────────────────────────────────── */
@media(max-width:820px){
  .tools .lang, .tools > .mode{display:none}      /* out of the bar */
  .hdr-in{padding:8px 14px}
  .mark{width:clamp(84px,24vw,104px)}
  .burger{height:42px;min-width:42px;font-size:1rem}

  .sheet-tools{display:flex;gap:10px;margin-top:2.2rem}
  .sheet-tools .pill{height:44px;min-width:56px;padding:0 18px;font-size:.74rem;
    border-color:var(--hair-dark);background:rgba(255,255,255,.05);color:var(--ink)}
  .sheet-tools .pill.mode{width:44px;min-width:44px;padding:0;font-size:1.05rem}
  .sheet-tools .pill:active{background:rgba(255,255,255,.14)}
}

/* ═══ PORTRAIT FRAMES ════════════════════════════════════════
   Rotem: "יש את אותן תמונות בדיוק בפורמט פורטרט, אולי זה מתאים
   יותר למובייל". Correct — a 3:2 landscape inside a 390×844
   viewport loses most of the frame to object-fit:cover. img/m/ is
   now the 4:5 master crop (16 of 22 exist as real masters; the six
   GPT frames are centre-cropped, noted in the build).
   The rules that point at img/m/ are generated above and unchanged
   — only the files behind them are now portrait.
   ───────────────────────────────────────────────────────── */
@media(max-width:820px){
  .s.pic .bg{inset:0;background-position:center}   /* no parallax overscan */
  .plate img{object-position:center 44%}
}