/* ============================================================================
   portfolio.css — תיק העבודות של יוסף
   The Yosef portfolio.

   עקרון-על: המסגרת היא Yosef (שחור עמוק, קרם, זהב — סטודיו ומעבדה).
   כל קייס נכנס לעולם הוויזואלי של עצמו דרך [data-world].
   האחידות היא מתודולוגית, לא אסתטית.

   Core principle: the frame is Yosef (deep black, cream, gold — studio and lab).
   Each case enters its own visual world via [data-world].
   The consistency is methodological, not aesthetic.
   ========================================================================== */

/* ── גופנים מקומיים / self-hosted fonts ─────────────────────────────────── */
@font-face{font-family:'Secular One';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/SecularOne-400-hebrew.woff2') format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;}
@font-face{font-family:'Secular One';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/SecularOne-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2192,U+2212,U+2215;}
@font-face{font-family:'Heebo';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/Heebo-400-hebrew.woff2') format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;}
@font-face{font-family:'Heebo';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/Heebo-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2192,U+2212,U+2215;}
@font-face{font-family:'Heebo';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/Heebo-500-hebrew.woff2') format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;}
@font-face{font-family:'Heebo';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/Heebo-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2192,U+2212,U+2215;}
@font-face{font-family:'Heebo';font-style:normal;font-weight:700;font-display:swap;
  src:url('../assets/fonts/Heebo-700-hebrew.woff2') format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;}
@font-face{font-family:'Heebo';font-style:normal;font-weight:700;font-display:swap;
  src:url('../assets/fonts/Heebo-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2192,U+2212,U+2215;}
@font-face{font-family:'Heebo';font-style:normal;font-weight:900;font-display:swap;
  src:url('../assets/fonts/Heebo-900-hebrew.woff2') format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;}
@font-face{font-family:'Heebo';font-style:normal;font-weight:900;font-display:swap;
  src:url('../assets/fonts/Heebo-900-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2192,U+2212,U+2215;}

/* ── טוקנים / tokens ────────────────────────────────────────────────────── */
:root{
  /* המסגרת — Yosef / the frame */
  --bg:#0C0C10;            /* שחור עמוק ניטרלי — מבדיל מהנייבי של הפורטל */
  --bg-2:#131319;
  --bg-3:#1A1A22;
  --fg:#F2ECE0;            /* קרם */
  --muted:#A9A398;
  --dim:#6F6B64;
  --line:rgba(242,236,224,.10);
  --line-2:rgba(242,236,224,.22);

  /* זהב-המותג — נדגם מהלוגו. צבע-פעולה בלעדי: מופיע רק על לחיץ */
  /* brand gold — sampled from the logo. Exclusive action colour: clickable only */
  --gold:#D9A441;
  --gold-bright:#F0C463;
  --gold-dim:rgba(217,164,65,.16);

  /* עולם-הקייס — נדרס פר-סקשן ב-[data-world] */
  /* case world — overridden per section via [data-world] */
  --world:var(--gold);
  --world-soft:rgba(217,164,65,.13);
  --world-deep:#14141A;

  --font-display:'Secular One',system-ui,sans-serif;
  --font-body:'Heebo',system-ui,sans-serif;

  /* ריווח סקשנים — שני ערכים בלבד / section rhythm — exactly two values */
  --sec-lg:clamp(84px,13vw,140px);
  --sec-sm:clamp(46px,8vw,72px);

  --maxw:1080px;
  --r:18px;
  --r-lg:26px;
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:520ms;
}

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

html,body{overflow-x:clip}          /* שער חובה: אפס גלישה אופקית */
html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.5;
  text-align:right;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}

/* רקע-מעבדה: רשת עדינה מאוד, נותנת תחושת שרטוט בלי רעש */
/* lab background: a very faint grid — a drafting feel without noise */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:74px 74px;
  opacity:.30;
  mask-image:radial-gradient(120% 80% at 50% 0%,#000 0%,transparent 72%);
}
body>*{position:relative;z-index:1}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:22px}
.narrow{max-width:760px;margin-inline:auto}

/* ── טיפוגרפיה / typography ─────────────────────────────────────────────── */
h1,h2,h3,.display{font-family:var(--font-display);font-weight:400;line-height:1.0;letter-spacing:-.015em}
h1{font-size:clamp(34px,6.4vw,62px)}
h2{font-size:clamp(27px,4.6vw,42px)}
h3{font-size:clamp(20px,3vw,26px)}
p{line-height:1.5}
.lead{font-size:clamp(17px,2.2vw,21px);color:var(--muted);line-height:1.62}

/* תווית-מעבדה: קטנה, מרווחת, נותנת דיוק */
.label{
  font-family:var(--font-body);font-size:12px;font-weight:700;
  letter-spacing:.19em;color:var(--dim);text-transform:uppercase;
}
.label--world{color:var(--world)}

/* ── חשיפה בגלילה / reveal on scroll ────────────────────────────────────── */
.rv{opacity:0;transform:translateY(15px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-i]{transition-delay:calc(var(--i,0)*72ms)}

/* ── סרגל עליון / topbar ────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:16px;
  padding:12px 22px;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
/* המילה בלבד — הטאגליין נעלם בגודל הזה והפך למריחה */
/* wordmark only — the tagline turned to mush at this size */
.topbar img{height:34px;width:auto;display:block}
@media (min-width:700px){.topbar img{height:42px}}
.topbar .spacer{margin-inline-start:auto}
.topbar a{
  color:var(--gold);text-decoration:none;font-size:14.5px;font-weight:500;
  border-bottom:1px solid transparent;transition:border-color .16s
}
.topbar a:hover{border-bottom-color:var(--gold)}

/* ── הוו / the hook ─────────────────────────────────────────────────────── */
.hook{padding-block:clamp(48px,9vw,92px) var(--sec-sm);text-align:center}
.hook__logo{width:min(620px,84vw);height:auto;margin-inline:auto;display:block}
.hook h1{margin-top:clamp(20px,4vw,34px)}
.hook h1 em{font-style:normal;color:var(--gold)}
.hook .lead{margin-top:20px;max-width:37ch;margin-inline:auto;text-align:center}

/* מד-נתון — תחושת מעבדה, לא באנר שיווקי */
.stat{
  margin-top:clamp(32px,5vw,48px);
  display:inline-flex;align-items:baseline;gap:14px;flex-wrap:wrap;justify-content:center;
  border:1px solid var(--line-2);border-radius:99px;
  padding:13px 26px;background:var(--bg-2);
}
.stat b{font-family:var(--font-display);font-size:clamp(26px,4vw,34px);color:var(--gold);line-height:1}
.stat span{font-size:14.5px;color:var(--muted)}

/* ── כניסה לפי כוונה / entry by intent ──────────────────────────────────── */
.intent{padding-block:var(--sec-sm)}
.intent h2{text-align:center}
.intent__hint{
  text-align:center;color:var(--dim);font-size:14px;margin-top:12px;
}
.routes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:13px;margin-top:clamp(26px,4vw,36px);
}
.route{
  display:block;width:100%;text-align:right;cursor:pointer;
  font-family:inherit;font-size:16px;color:var(--fg);
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:19px 20px 17px;
  transition:border-color .18s,background .18s,transform .18s var(--ease);
}
.route:hover{background:var(--bg-3);border-color:var(--line-2);transform:translateY(-2px)}
.route[aria-pressed="true"]{border-color:var(--gold);background:var(--gold-dim)}
.route b{display:block;font-weight:700;margin-bottom:6px;line-height:1.35}
.route span{display:block;font-size:13.5px;color:var(--muted);line-height:1.5}
.route[aria-pressed="true"] b{color:var(--gold-bright)}

.escape{
  display:block;text-align:center;margin-top:22px;
  color:var(--gold);text-decoration:none;font-size:15px;font-weight:500;
}
.escape:hover{text-decoration:underline;text-underline-offset:4px}

/* ── קייס / case ────────────────────────────────────────────────────────── */
.case{padding-block:var(--sec-lg);position:relative}
/* הילת עולם-הקייס — כך הקייס "נכנס לעולם שלו" בלי לשבור את המסגרת */
.case::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(80% 46% at 50% 0%,var(--world-soft) 0%,transparent 70%);
}
.case__head{text-align:center;margin-bottom:clamp(34px,5vw,52px)}
.case__client{
  font-family:var(--font-display);font-size:clamp(28px,4.8vw,44px);
  color:var(--world);line-height:1;
}
.case__what{margin-top:14px;color:var(--muted);font-size:clamp(16px,2.2vw,19px);max-width:42ch;margin-inline:auto}

/* רמת הוכחה — תג היושר */
.proof{
  display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  border:1px solid var(--line-2);border-radius:99px;padding:7px 16px;
  font-size:13px;font-weight:500;color:var(--fg);background:var(--bg-2);
}
.proof i{width:7px;height:7px;border-radius:50%;background:var(--world);font-style:normal;flex:none}
.proof--verified i{box-shadow:0 0 9px var(--world)}

/* שלד הקייס — שמונה חלקים */
.beats{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.beat{background:var(--bg);padding:clamp(22px,3.4vw,32px)}
.beat h3{margin-bottom:12px}
.beat p+p{margin-top:12px}
.beat p{color:var(--muted)}
.beat strong{color:var(--fg);font-weight:500}

/* ציטוט אמיתי */
.quote{
  margin-top:16px;border-inline-start:2px solid var(--world);
  padding:2px 0 2px 0;padding-inline-start:16px;
}
.quote p{color:var(--fg);font-size:16.5px;line-height:1.58}
.quote cite{display:block;margin-top:8px;font-style:normal;font-size:13px;color:var(--dim)}

/* לוח מספרים — תחושת מעבדה */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;margin-top:18px;background:var(--line)}
.figure{background:var(--bg-2);padding:18px 16px}
.figure b{display:block;font-family:var(--font-display);font-size:clamp(24px,3.4vw,31px);color:var(--world);line-height:1}
.figure span{display:block;margin-top:7px;font-size:13px;color:var(--muted);line-height:1.45}
.figure em{font-style:normal;color:var(--dim);font-size:12px}
.after-figures{margin-top:16px}

/* טקסט מודגש בכותרת התחתונה נשאר קריא / footer emphasis stays legible */
footer strong{color:var(--muted);font-weight:700}

/* גלריית מכשירים — "מכשיר-CSS", בלי מסגרות מצוירות */
.hint{text-align:center;color:var(--dim);font-size:13.5px;margin-bottom:14px}
.shots{
  display:flex;gap:16px;overflow-x:auto;padding:4px 22px 18px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.shots::-webkit-scrollbar{height:6px}
.shots::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.shot{flex:none;width:200px;scroll-snap-align:center;background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
.shot img{
  width:100%;height:auto;display:block;border-radius:22px;
  border:1px solid var(--line-2);
  box-shadow:0 18px 44px rgba(0,0,0,.62),0 0 0 1px rgba(0,0,0,.4);
  transition:transform .2s var(--ease),border-color .2s;
}
.shot:hover img{transform:translateY(-4px);border-color:var(--world)}
.shot figcaption{margin-top:10px;font-size:12.5px;color:var(--dim);text-align:center}

/* ── דיאלוג תמונה / image dialog ────────────────────────────────────────── */
dialog{
  border:0;padding:0;background:transparent;max-width:min(94vw,520px);max-height:92vh;
  color:var(--fg);
}
dialog::backdrop{background:rgba(4,4,7,.9);backdrop-filter:blur(6px)}
dialog img{width:100%;height:auto;display:block;border-radius:20px;border:1px solid var(--line-2)}
dialog .dlg-cap{margin-top:12px;text-align:center;font-size:14px;color:var(--muted)}
dialog .dlg-close{
  display:block;margin:14px auto 0;background:var(--bg-2);color:var(--gold);
  border:1px solid var(--line-2);border-radius:99px;padding:9px 22px;
  font-family:inherit;font-size:14.5px;font-weight:500;cursor:pointer;
}
dialog .dlg-close:hover{background:var(--bg-3)}

/* ── סיום ו-CTA / closing ───────────────────────────────────────────────── */
/* למעלה קצר — הקייס כבר סיפק את הפסקה הגדולה מתחתיו */
/* short on top — the case above already supplied the large break */
.close{padding-block:var(--sec-sm) var(--sec-lg);text-align:center}
.close h2{max-width:19ch;margin-inline:auto}
.close .lead{margin-top:18px;max-width:40ch;margin-inline:auto;text-align:center}
.cta{
  display:inline-block;margin-top:clamp(28px,4vw,38px);
  background:var(--gold);color:#12100A;text-decoration:none;
  font-family:var(--font-body);font-weight:700;font-size:17px;
  padding:16px 36px;border-radius:99px;
  transition:background .18s,transform .18s var(--ease);
}
.cta:hover{background:var(--gold-bright);transform:translateY(-2px)}
.cta-note{margin-top:18px;font-size:14px;color:var(--muted)}

/* כלל בית: שום CTA לא נצמד לשוליים התחתונים */
/* house rule: no CTA ever touches the bottom edge */
footer{
  padding-block:var(--sec-sm) clamp(60px,10vw,96px);
  border-top:1px solid var(--line);text-align:center;
  color:var(--dim);font-size:13px;line-height:1.9;
}
footer a{color:var(--gold);text-decoration:none}
footer a:hover{text-decoration:underline;text-underline-offset:3px}

/* ── תנועה מופחתת / reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
}

@media (max-width:600px){
  .shots{padding-inline:22px}
  .shot{width:172px}
}