/* Step by Step — Positive Marketing
   מקור: Claude Design export. גופנים מוגשים מקומית מתוך fonts/. */

/* ── גופנים ── */
@font-face{font-family:'Arimo';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/arimo-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:'Arimo';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/arimo-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Arimo';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/arimo-400-latin.woff2') format('woff2');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}
@font-face{font-family:'Arimo';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/arimo-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:'Arimo';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/arimo-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Arimo';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/arimo-700-latin.woff2') format('woff2');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}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/bricolage-grotesque-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/bricolage-grotesque-700-latin.woff2') format('woff2');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}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/caveat-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/caveat-400-latin.woff2') format('woff2');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}
@font-face{font-family:'Heebo';font-style:normal;font-weight:400;font-display:swap;src:url('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('fonts/heebo-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Heebo';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/heebo-400-latin.woff2') format('woff2');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}
@font-face{font-family:'Heebo';font-style:normal;font-weight:700;font-display:swap;src:url('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('fonts/heebo-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Heebo';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/heebo-700-latin.woff2') format('woff2');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}
@font-face{font-family:'Heebo';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/heebo-800-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:800;font-display:swap;src:url('fonts/heebo-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Heebo';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/heebo-800-latin.woff2') format('woff2');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}
@font-face{font-family:'Heebo';font-style:normal;font-weight:900;font-display:swap;src:url('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('fonts/heebo-900-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Heebo';font-style:normal;font-weight:900;font-display:swap;src:url('fonts/heebo-900-latin.woff2') format('woff2');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{
/* העיצוב הוא אחד ויחיד — בהיר. בלי ההצהרה הזו, דפדפנים שכופים מצב כהה
   (סמסונג אינטרנט, Brave, WebView) מזהים "דף שלא מכיר מצב כהה" וממציאים
   לו אחד: הנייר החם הושחר, הצהוב נצבע חרדל, והדיו הפך תכלת. only חוסם
   גם את ההשחרה האוטומטית של כרומיום. */
color-scheme:only light;

/* Brand palette — exact values from creative brief */
--bg-canvas:#EAE1D8; /* warm paper background */
--accent-primary:#F6C34D; /* sun yellow */
--accent-secondary:#AD9ECD; /* soft lavender */
--accent-light:#A9D7E0; /* pale sky blue */
--text-primary:#2B2B2B; /* near-black ink */
/* Derived neutrals (tints of canvas + ink, no new hues) */
--paper-warm:#F3EDE6; /* lighter paper for cards/notes */
--paper-deep:#DFD3C6; /* darker paper for wells */
--ink-soft:rgba(43,43,43,0.68);
--ink-faint:rgba(43,43,43,0.42);
--line:rgba(43,43,43,0.16);
/* Tints for section washes */
--wash-yellow:#F2DCA8;
--wash-lavender:#D7CEE4;
--wash-blue:#CFE6EB;
/* Semantic aliases */
--surface-page:var(--bg-canvas);
--surface-card:var(--paper-warm);
--text-body:var(--text-primary);
--text-muted:var(--ink-soft);
--border-hairline:var(--line);
--action-bg:var(--text-primary);
--action-fg:var(--bg-canvas);
--highlight:var(--accent-primary);
}
/* חלק מהדפדפנים שכופים מצב כהה מוותרים רק אם לדף יש "עיצוב כהה" משלו.
   אז הנה הוא: זהה לבהיר, ערך-בערך. הבלוק חייב להצהיר צבעים ממש —
   בלוק ריק לא נספר — ולכן הפלטה חוזרת כאן במלואה. */
@media (prefers-color-scheme:dark){
:root{
color-scheme:only light;
--bg-canvas:#EAE1D8;
--accent-primary:#F6C34D;
--accent-secondary:#AD9ECD;
--accent-light:#A9D7E0;
--text-primary:#2B2B2B;
--paper-warm:#F3EDE6;
--paper-deep:#DFD3C6;
--ink-soft:rgba(43,43,43,0.68);
--ink-faint:rgba(43,43,43,0.42);
--line:rgba(43,43,43,0.16);
--wash-yellow:#F2DCA8;
--wash-lavender:#D7CEE4;
--wash-blue:#CFE6EB;
}
body{background:#EAE1D8;color:#2B2B2B}
}
:root{
/* Families */
--font-display:'Bricolage Grotesque','Heebo',sans-serif; /* headlines; Heebo carries Hebrew glyphs */
--font-body:'Arimo','Heebo',sans-serif; /* supporting text, Hebrew-capable */
--font-hebrew:'Heebo',sans-serif; /* Hebrew display (Bricolage has no Hebrew) */
--font-accent:'Caveat',cursive; /* handwritten notes — stand-in for brand font "Leeor" */
/* Scale — editorial, generous */
--text-hero:clamp(3rem,9vw,7rem);
--text-h1:clamp(2.4rem,6vw,4.5rem);
--text-h2:clamp(1.8rem,4vw,3rem);
--text-h3:1.375rem;
--text-lead:1.25rem;
--text-body-size:1.0625rem;
--text-small:0.875rem;
--text-caption:0.75rem;
/* Weights */
--weight-display:700;
--weight-heavy:800;
--weight-body:400;
--weight-medium:500;
/* Rhythm */
--leading-tight:1.05;
--leading-heading:1.15;
--leading-body:1.65;
--tracking-caps:0.14em;
}
:root{
/* Spacing scale */
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:140px;
/* Layout */
--page-max:1200px;
--page-pad:clamp(20px,5vw,64px);
--section-gap:clamp(72px,12vw,160px); /* editorial breathing room */
/* Radii — mostly square; pills for actions, soft for photos */
--radius-none:0;
--radius-soft:6px;
--radius-photo:4px;
--radius-pill:999px;
/* Shadows — paper on a table, soft and warm */
--shadow-paper:0 2px 6px rgba(43,43,43,0.10),0 10px 24px rgba(43,43,43,0.08);
--shadow-object:0 6px 18px rgba(43,43,43,0.14),0 20px 40px rgba(43,43,43,0.10);
--shadow-lift:0 1px 3px rgba(43,43,43,0.08);
/* Motion — slow, premium, never bouncy */
--ease-drift:cubic-bezier(0.22,1,0.36,1); /* @kind other */
--dur-slow:900ms; /* @kind other */
--dur-med:500ms; /* @kind other */
--dur-fast:200ms; /* @kind other */
}
/* ── סגנונות ── */
*{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg-canvas);color:var(--text-primary);font-family:var(--font-body)}
a{color:var(--text-primary);text-decoration:none}a:hover{opacity:.85}
.nav{position:fixed;top:0;right:0;left:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:16px var(--page-pad)}
.nav img{width:96px;height:auto;filter:brightness(0)}
/* ── 1 · פתיחה ── */
/* dvh ולא svh: ‏svh הוא גובה המסך כששורת הכתובת פרושה במלואה, ולכן כשהיא
   מכווצת התיבה נמוכה מהשטח הנראה והתוכן שממורכז בתוכה יושב מעל המרכז
   האמיתי. dvh עוקב אחרי השטח הנראה בפועל בכל רגע. */
.hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 var(--page-pad)}
.hero h1{font-family:var(--font-hebrew);font-weight:900;font-size:clamp(2.5rem,7.5vw,5.5rem);line-height:1.12;margin:0;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--accent-primary)}
/* הרמז נשאר ישר מתחת לכותרת, אבל מבוטל לו המשקל בחישוב הגובה של העמודה:
   שולי תחתית שליליים בדיוק בגובה שהוא תופס. כך המרכוז מתייחס לכותרת בלבד
   והיא יושבת על קו האמצע, בלי להזיז את הרמז ממקומו. */
.hint{margin-top:7vh;margin-top:7dvh;margin-bottom:calc(-1 * (7vh + .96rem));margin-bottom:calc(-1 * (7dvh + .96rem));line-height:1.2;font-size:.8rem;letter-spacing:.16em;color:var(--ink-faint)}
/* ── 2 · הקומפוזיציה ── */
.assembly{height:320vh;position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.stage img{position:absolute;will-change:transform,opacity;opacity:0}
.cap{position:absolute;top:50%;right:0;left:0;transform:translateY(-50%);text-align:center;padding:0 var(--page-pad);z-index:8;pointer-events:none;opacity:0;transition:opacity .35s linear}
.capin{display:inline-block;max-width:min(90vw,780px)}
.cap p{font-family:var(--font-hebrew);font-weight:900;font-size:clamp(2.4rem,6.6vw,4.8rem);line-height:1.04;margin:0;-webkit-text-stroke:7px var(--bg-canvas);paint-order:stroke fill}
.cap p span{color:var(--accent-primary)}
.cap .cs{display:block;margin-top:clamp(16px,2.2vw,26px);font-family:var(--font-hebrew);font-weight:800;font-size:clamp(1.5rem,3.6vw,2.4rem);color:var(--text-primary);-webkit-text-stroke:6px var(--bg-canvas);paint-order:stroke fill}
.cap .rule{display:block;width:64px;height:2px;background:var(--text-primary);margin:clamp(18px,2.4vw,26px) auto 0;opacity:.5}
/* ── פרקים ── */
.ch{position:sticky;top:0;min-height:100vh;min-height:100svh;display:flex;align-items:center;background:var(--bg-canvas);border-radius:clamp(28px,6vw,58px) clamp(28px,6vw,58px) 0 0;box-shadow:0 -22px 54px rgba(43,43,43,.16)}
.chin{max-width:1150px;margin:0 auto;padding:9vh var(--page-pad);padding:9svh var(--page-pad);width:100%;display:grid;grid-template-columns:minmax(0,30rem) 1fr;gap:clamp(28px,5vw,64px);align-items:center;position:relative}
.txt{position:relative;z-index:8}
.ch h2{font-family:var(--font-hebrew);font-weight:900;font-size:clamp(2rem,5vw,3.6rem);line-height:1.14;margin:0 0 16px}
.ch h2 em{font-style:normal;color:var(--accent-primary)}
.ch h2 em.lav,.ch1 h2 em{color:var(--accent-secondary)}
#ch1 h2{color:var(--text-primary)}
#ch1 h2 em{color:var(--accent-secondary)}
.ch p{color:var(--ink-soft);line-height:1.75;margin:0 0 10px}
.ph{display:block;font-size:.72rem;letter-spacing:.14em;color:var(--ink-faint);margin-top:18px}
.txt>*{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease-drift),transform .8s var(--ease-drift)}
.txt>*:nth-child(2){transition-delay:.1s}.txt>*:nth-child(3){transition-delay:.2s}.txt>*:nth-child(4){transition-delay:.3s}.txt>*:nth-child(5){transition-delay:.4s}
.ch.on .txt>*{opacity:1;transform:none}
/* ── 3 · עליי ── */
.objf{position:relative;min-height:460px}
.objf img{position:absolute;opacity:0;transition:opacity .95s var(--ease-drift),transform .95s var(--ease-drift)}
.objf img:nth-child(1){transform:translateX(90px) rotate(calc(var(--r,0deg) + 9deg))}
.objf img:nth-child(2){transform:translateX(-90px) rotate(calc(var(--r,0deg) - 9deg))}
.objf img:nth-child(3){transform:translateY(-80px) rotate(calc(var(--r,0deg) + 6deg))}
.ch.on .objf img{opacity:1;transform:rotate(var(--r,0deg))}
.objf img:nth-child(2){transition-delay:.15s}.objf img:nth-child(3){transition-delay:.3s}
.btn2{display:inline-block;background:transparent;border:1.5px solid var(--text-primary);color:var(--text-primary);border-radius:999px;padding:12px 38px;font-weight:700;font-size:1rem;font-family:var(--font-hebrew);cursor:pointer;margin-top:8px}
.btn2:hover{opacity:.75}
/* ── 4 · פרק אופקי — כרטיסים ── */
.hwrap{height:300vh;position:relative;background:var(--paper-warm)}
.hpin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.htrack{display:flex;gap:clamp(18px,3vw,34px);padding:0 8vw;align-items:center;will-change:transform}
.hcard{flex:0 0 auto;width:min(72vw,500px);min-height:54vh;min-height:54svh;position:relative}
/* חיצי המסע בין הכרטיסים: קישוט שאומר שהכרטיסים הם תהליך הדרגתי, צעד
   אחרי צעד. בעברית המסע נע שמאלה ולכן החץ מצביע שמאלה. הם אינם .hcard,
   ולכן חיצי הדפדוף והמדידות לא סופרים אותם. */
.jarr{flex:0 0 auto;align-self:center;width:clamp(34px,5vw,52px);height:auto;color:var(--text-primary);pointer-events:none}
.hcard.intro{width:min(64vw,440px);display:flex;flex-direction:column;justify-content:center;position:relative}
.ideco{position:absolute;width:96px;bottom:-2%;left:-2%;transform:rotate(-7deg);pointer-events:none;z-index:0}
.qcard{height:min(54vh,470px);height:min(54svh,470px);perspective:1500px;cursor:pointer;background:none;border:none;padding:0;font:inherit;color:inherit;text-align:right}
.qin{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s var(--ease-drift)}
.qcard.flipped .qin{transform:rotateY(180deg)}
.face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--bg-canvas);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-paper);padding:clamp(24px,4vw,38px);padding-top:clamp(44px,7vh,56px);padding-top:clamp(44px,7svh,56px);display:flex;flex-direction:column;justify-content:center;overflow:hidden}
/* חזית הכרטיס: האיור למעלה, ומתחתיו השאלה ממורכזת במה שנשאר. קודם היא
   נדחפה לתחתית עם ריפוד גדול שיפנה מקום לתג ההיפוך, ונוצר חלל מת באמצע.
   עכשיו המקום לתג נשמר בריפוד של הפָּן עצמו, והשאלה יושבת במרכז. */
.face.fr{justify-content:flex-start;align-items:stretch;padding-bottom:clamp(60px,9vh,78px);padding-bottom:clamp(60px,9svh,78px)}
.face.fr .ico{display:block;height:clamp(56px,14vh,96px);height:clamp(56px,14svh,96px);width:auto;align-self:flex-start;margin-right:auto;position:static!important;max-width:40%;object-fit:contain}
/* השאלה גדולה יותר מהתשובה: היא הדבר היחיד בחזית הכרטיס. התקרה כאן
   אינה הגובה אלא הרוחב — שורה שתגלוש תישבר מחדש ותהרוס את החלוקה
   לשורות שנקבעה. */
.face.fr h3{font-size:clamp(1.7rem,4.2vw,2.6rem)}
.face.fr .ico{margin-bottom:clamp(10px,2vh,18px);margin-bottom:clamp(10px,2svh,18px)}
.face.fr .btm{margin:0;flex:1;display:flex;align-items:center;padding-bottom:0}
.face h3{font-family:var(--font-hebrew);font-weight:900;font-size:clamp(1.5rem,3.4vw,2.35rem);line-height:1.24;margin:0}
.face .n{position:absolute;top:18px;right:22px;font-size:.78rem;letter-spacing:.16em;color:var(--ink-faint)}
.face .fh{position:absolute;bottom:16px;left:16px;width:76px;height:76px;border-radius:999px;border:2px solid rgba(43,43,43,.55);background:var(--paper-warm);display:flex;align-items:center;justify-content:center;font-size:2.1rem;color:var(--text-primary);box-shadow:var(--shadow-paper)}
.face:not(.bk) .fh{animation:fhp 2.6s var(--ease-drift) infinite}
@keyframes fhp{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.face img{position:absolute;pointer-events:none}
.face.bk{transform:rotateY(180deg);background:var(--text-primary);border-color:var(--text-primary)}
.face.bk h3{color:var(--bg-canvas);font-size:clamp(1.45rem,2.9vw,2rem)}
.face.bk h3 em{font-style:normal;color:var(--accent-primary)}
.face.bk .bp{margin:14px 0 0;font-size:.98rem;line-height:1.75;color:rgba(234,225,216,.82)}
/* הסתייגות בסוף הכרטיס — כפופה לפסקה שמעליה ולא שווה לה במשקל */
.face.bk .bp.fine{margin-top:10px;font-size:.86rem;line-height:1.6;color:rgba(234,225,216,.62)}
.face.bk .n{color:rgba(234,225,216,.55)}
.face.bk .fh{border-color:rgba(234,225,216,.45);background:transparent;color:var(--bg-canvas);box-shadow:none}
/* ── 5 · מכנה משותף ── */
.clean{justify-content:center}
.clean .chin{display:block;text-align:center;max-width:820px}
.clean h2{margin-bottom:26px}
.clean .big{font-family:var(--font-hebrew);font-weight:800;font-size:clamp(1.4rem,3.2vw,2.1rem);line-height:1.5;color:var(--ink-soft)}
/* ── 6 · סגול ── */
.purple{background:var(--accent-secondary);overflow:hidden}
.kbg{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:5vh 0;padding:5svh 0;z-index:0}
.krow{white-space:nowrap;font-family:var(--font-hebrew);font-weight:900;font-size:clamp(3.2rem,8.5vw,7.4rem);line-height:1;color:rgba(43,43,43,.07);margin-right:-22vw;will-change:transform}
.krow:nth-child(2){color:rgba(234,225,216,.17)}
.purple .chin{display:block;padding-top:5vh;padding-top:5svh;padding-bottom:5vh;padding-bottom:5svh;text-align:right;max-width:1050px}
.plede{font-family:var(--font-hebrew);font-weight:900;font-size:clamp(1.95rem,4.4vw,3.4rem);line-height:1.12;color:var(--bg-canvas);margin:0 0 clamp(16px,2vw,24px)}
.vlist{list-style:none;margin:0;padding:0;text-align:right;display:flex;flex-wrap:wrap;gap:0 clamp(14px,2.2vw,30px)}
/* קו קצר מתחת ל"אבל ממש לא רק המוח.", באותה שפה של הקו שמתחת לכותרת
   הקומפוזיציה. */
.plrule{display:block;width:64px;height:2px;background:rgba(43,43,43,.45);margin:clamp(10px,1.4vw,14px) 0 clamp(14px,2vw,20px)}
.vlist li{font-family:var(--font-hebrew);font-weight:400;font-size:clamp(1.12rem,2.2vw,1.5rem);line-height:1.5;letter-spacing:-.01em;color:var(--text-primary);opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease-drift),transform .8s var(--ease-drift)}
.ch.on .vlist li{opacity:1;transform:none}
.vbr{flex-basis:100%;height:0;padding:0;margin:0}
.vlist li:nth-child(2){transition-delay:.08s}.vlist li:nth-child(3){transition-delay:.16s}.vlist li:nth-child(4){transition-delay:.24s}.vlist li:nth-child(5){transition-delay:.32s}.vlist li:nth-child(6){transition-delay:.4s}
.purple .txt h2{font-size:clamp(3rem,7.8vw,6.2rem);line-height:1.04;margin:0 0 6px}
/* לוח מפוזר. כל פריט ממוקם לפי מרכזו (--x/--y באחוזי הלוח) ומוטה לפי --r.
   הלוח נפרס לרוחב המסך המלא, כך שפתקים שממוקמים בקצוות באמת יוצאים מהמסך
   ונחתכים בו — זה חלק מהמראה ולא תקלה. החיתוך נעשה בפריסה ולא בקובץ, כדי
   שיישאר נכון בכל רוחב. */
.board{position:relative;z-index:2;margin:clamp(14px,2vw,22px) 0 0;
/* התכונות הלוגיות אינן מוכרות בכרום מתחת ל-87. בלי המשיכה הזו הלוח
   בן 100vw נשאר בתוך הריפוד של העמודה, גולש שמאלה, והפתק הראשון
   (שממוקם ב-14% מהקצה) יוצא מהמסך ואי אפשר להקיש עליו. העמוד כולו
   בעברית, ולכן הגיבוי הפיזי זהה בשני הכיוונים. */
width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-inline:calc(50% - 50vw);height:clamp(330px,44vh,430px);height:clamp(330px,44svh,430px)}
.stubs,.snotes{display:contents}
.board .stub,.board .snote{position:absolute;left:var(--x);top:var(--y)}
/* פריסת הלוח. במסך רחב הפתק הראשון עומד כעמוד בצד ושלוש המדבקות יורדות
   באלכסון לצידו; בנייד הכול נערם לארבע שורות. עמודה 1 = ימין. */
.st1{--x:80%;--y:13%;--r:-4deg}
.st2{--x:86%;--y:27%;--r:3deg}
.st3{--x:74%;--y:41%;--r:-3deg}
.st4{--x:89%;--y:2%;--r:2deg}
.sn1{--x:12%;--y:42%}
.sn2{--x:36%;--y:86%}
.sn3{--x:84%;--y:76%}
/* פתקים — נייר, לא כפתורים. להוספת פתק: button.snote עם data-note="X" + template#note-X */
/* פתקים — נייר, לא כפתורים */
.snote{width:min(27%,152px);border:none;background:none;padding:0;cursor:pointer;display:block;font:inherit;color:var(--text-primary);text-align:center;filter:drop-shadow(0 8px 16px rgba(43,43,43,.16));opacity:0;transform:translate(-50%,calc(-50% + 16px)) rotate(var(--r));transition:opacity .75s var(--ease-drift),transform .5s var(--ease-drift),filter .5s var(--ease-drift)}
.snote .pp{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;min-height:calc(clamp(124px,20.5vw,162px) / var(--ar));padding:var(--pt) var(--pr) var(--pb) var(--pl);background-image:var(--sheet);background-size:100% 100%;background-repeat:no-repeat}
.snote .tx{display:block;font-family:var(--font-hebrew);font-weight:600;font-size:.82rem;line-height:1.42;text-wrap:balance}
/* שני סימנים שהפתק לחיץ: השורה "לחצו לפתיחה" מודגשת יותר ומקווקוות,
   ותג עגול עם חץ בפינה — אותה שפה של התג המסתובב שעל הכרטיסים. */
.snote .op{display:block;margin-top:9px;font-family:var(--font-accent);font-weight:400;font-size:1rem;color:rgba(43,43,43,.78);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;text-decoration-thickness:1px}
.snote:hover .op{color:var(--text-primary)}
.snote:focus-visible .op{color:var(--text-primary)}
.tapy{position:absolute;top:-10px;right:-10px;z-index:4;width:34px;height:34px;border-radius:999px;
display:flex;align-items:center;justify-content:center;
background:var(--bg-canvas);color:var(--text-primary);font-size:1rem;line-height:1;
border:1.5px solid rgba(43,43,43,.5);box-shadow:0 2px 5px rgba(43,43,43,.18);
animation:tapp 2.8s var(--ease-drift) infinite}
/* הפתק הימני התחתון נחתך בשוליים הימניים, ולכן התג שלו עובר לצד שמאל.
   הבורר הזה חזק יותר מ-.tapy, כך שהוא גובר גם על ערכי הנייד. */
.sn3 .tapy{right:auto;left:-10px}
@keyframes tapp{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.snote:hover .tapy{background:var(--accent-primary);animation:none}
.snote:focus-visible .tapy{background:var(--accent-primary);animation:none}
.snote .tp{position:absolute;top:-9px;right:16%;width:64px;height:26px;background:linear-gradient(180deg,rgba(226,212,186,.95),rgba(208,191,160,.92));clip-path:polygon(4% 8%,96% 0,100% 88%,2% 100%);transform:rotate(-3deg);z-index:3}
.snote .clip{position:absolute;top:-19px;left:26%;width:40px;z-index:3;pointer-events:none}
.snote .fold{position:absolute;bottom:6px;left:8px;width:24px;height:24px;background:linear-gradient(45deg,rgba(43,43,43,.15) 0 50%,transparent 50%);transition:width .4s var(--ease-drift),height .4s var(--ease-drift)}
.snote:hover .fold{width:36px;height:36px}
.snote:focus-visible .fold{width:36px;height:36px}
.snote:hover{transform:translate(-50%,calc(-50% - 8px)) rotate(var(--r));filter:drop-shadow(0 16px 26px rgba(43,43,43,.24))}
.snote:focus-visible{transform:translate(-50%,calc(-50% - 8px)) rotate(var(--r));filter:drop-shadow(0 16px 26px rgba(43,43,43,.24))}
.ch.on .snote{opacity:1;transform:translate(-50%,-50%) rotate(var(--r))}
.snote:nth-child(2){transition-delay:.12s}.snote:nth-child(3){transition-delay:.24s}
.sn1 .pp{--pt:14%;--pb:8%;--pr:10%;--pl:17%}
.sn3 .pp{--pt:14%;--pb:8%;--pr:17%;--pl:10%}
.sn3 .tx{font-size:.78rem}
.sn1{--r:-9deg;--ar:.694;--sheet:url("images/notes/sheet-1.webp")}
.sn2{--r:5deg;--ar:.914;--sheet:url("images/notes/sheet-2.webp")}
.sn2 .pp{--pt:14%;--pb:9%;--pr:11%;--pl:11%}
.sn3{--r:-4deg;--ar:.694;--sheet:url("images/notes/sheet-3.webp")}
.stub{display:inline-flex;align-items:center;gap:9px;background:#F4F1EA;box-shadow:0 1px 1px rgba(43,43,43,.1),0 8px 18px rgba(43,43,43,.13);padding:10px 22px 10px 17px;font-family:var(--font-hebrew);position:relative}
.stub::before{content:"";position:absolute;right:9px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:999px;background:var(--accent-secondary);box-shadow:inset 0 0 0 1.5px rgba(43,43,43,.3)}
/* גיבוי פיזי לפני הלוגי, לכרום מתחת ל-87. בעברית inline-start הוא ימין. */
.stub b{font-weight:900;font-size:1.12rem;padding-right:12px;padding-inline-start:12px}
.stub .hrt{color:#b23b2e;font-size:1rem}
.stub small{color:var(--ink-soft);font-size:.76rem}
.stub b{font-variant-numeric:tabular-nums}
.stubnote{margin:clamp(8px,1.2vw,12px) 0 0;font-family:var(--font-hebrew);font-weight:600;font-size:.76rem;letter-spacing:.06em;color:rgba(43,43,43,.55)}
.board .stub{white-space:nowrap;opacity:0;
transform:translate(-50%,calc(-50% + 14px)) rotate(var(--r));
transition:opacity .7s var(--ease-drift),transform .7s var(--ease-drift)}
.ch.on .board .stub{opacity:1;transform:translate(-50%,-50%) rotate(var(--r))}
.board .stub:nth-child(2){transition-delay:.09s}
.board .stub:nth-child(3){transition-delay:.18s}
.board .stub:nth-child(4){transition-delay:.27s}
/* ── 7 · סיום ── */
.contact{background:var(--text-primary);color:var(--bg-canvas)}
.contact .chin{display:block;text-align:center;max-width:860px}
.contact h2{color:var(--bg-canvas)}
.contact .big{font-family:var(--font-hebrew);font-weight:800;font-size:clamp(1.3rem,3vw,1.9rem);line-height:1.55;color:rgba(234,225,216,.8);margin:0 0 30px}
.contact .big em{font-style:normal;color:var(--accent-primary)}
.btn{display:inline-block;background:var(--bg-canvas);color:var(--text-primary);border:none;border-radius:999px;padding:18px 58px;font-weight:700;font-size:1.25rem;font-family:var(--font-hebrew);cursor:pointer}
.contact .cdeco{position:absolute;width:min(20vw,150px);bottom:-14vh;bottom:-14svh;left:4%;transform:rotate(-7deg)}
/* בדסקטופ הכותרת התחתונה נשארת שורה אחת: ערימה בת שלוש שורות מגביהה את
   הקו העליון שלה עד מתחת לכפתור "בואו נכיר". בנייד היא נערמת (במדיה קווארי). */
.cfoot{position:absolute;bottom:0;right:0;left:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px clamp(16px,2.4vw,26px);padding:18px var(--page-pad);font-size:.85rem;color:rgba(234,225,216,.75);border-top:1px solid rgba(234,225,216,.14)}
.cfrule{display:block;width:1px;height:14px;background:rgba(234,225,216,.3)}
.cfsoc{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px clamp(16px,2.6vw,28px)}
.cfoot b{color:var(--bg-canvas);letter-spacing:.05em;font-family:var(--font-display);font-weight:700}
.cfoot a{display:inline-flex;align-items:center;gap:7px;color:rgba(234,225,216,.75);font-family:var(--font-hebrew);font-weight:600}
.cfoot a:hover{color:var(--bg-canvas);opacity:1}
.cfoot a svg{width:16px;height:16px;flex:0 0 auto}
/* חזרה לראש העמוד — פתק נייר קטן, לא כפתור צף גנרי. */
.totop{position:fixed;bottom:clamp(14px,3vw,26px);right:clamp(14px,3vw,26px);z-index:40;
width:46px;height:46px;display:flex;align-items:center;justify-content:center;
border:none;border-radius:999px;background:var(--paper-warm);color:var(--text-primary);
box-shadow:0 1px 1px rgba(43,43,43,.12),0 8px 20px rgba(43,43,43,.2);
font-family:var(--font-hebrew);font-size:1.25rem;line-height:1;cursor:pointer;
opacity:0;transform:translateY(12px);pointer-events:none;
transition:opacity .45s var(--ease-drift),transform .45s var(--ease-drift)}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{opacity:1;transform:translateY(-2px)}
/* חיצי מעבר בין הכרטיסים. אותה שפה של כפתור החזרה לראש העמוד, כדי שלא
   ייווצר עוד סוג של כפתור. בעברית התוכן מתחיל מימין, ולכן החץ השמאלי
   מקדם קדימה והימני חוזר אחורה. */
.harr{position:absolute;top:50%;transform:translateY(-50%);z-index:12;
width:46px;height:46px;display:flex;align-items:center;justify-content:center;
/* הפרק כולו על נייר חם, וגם הכרטיסים. חץ בצבע הנייר היה נבלע בהם, ולכן
   הוא הפוך: עיגול כהה על נייר, ולא נייר על נייר. */
border:none;border-radius:999px;background:var(--text-primary);color:var(--bg-canvas);
box-shadow:0 1px 1px rgba(43,43,43,.12),0 8px 20px rgba(43,43,43,.2);
font-family:var(--font-hebrew);font-size:1.2rem;line-height:1;cursor:pointer;
transition:opacity .3s var(--ease-drift),transform .3s var(--ease-drift)}
.hprev{right:clamp(10px,2vw,22px)}
.hnext{left:clamp(10px,2vw,22px)}
.harr:hover{transform:translateY(-50%) scale(1.08)}
/* בקצה הפס אין לאן להתקדם. משאירים אותו במקומו ומעמעמים, כדי שהשני לא יקפוץ. */
.harr[disabled]{opacity:.32;cursor:default;pointer-events:none}
/* שהות לפני שהפרק הסגול עולה. הפרקים דביקים בגובה מסך אחד בדיוק, ולכן
   הווילון הבא מתחיל לכסות את המסך הזה מיד — והפתק, שיושב בתחתיתו, הוא
   הראשון להיחתך. המרווח הזה משאיר את הפרק נעוץ וללא תנועה, כך שיש רגע
   שקט שבו הפתק גלוי במלואו ואפשר להקיש עליו. */
.dwell{height:45vh;height:45svh}
.tail{height:0}
/* ── המחברת ── */
.nb{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;display:none;overflow:auto;background:#D9D0C1;background-image:radial-gradient(120% 90% at 50% 0,rgba(255,255,255,.35),transparent 60%);padding:clamp(16px,3.4vw,44px) clamp(10px,3vw,40px) clamp(40px,6vw,70px)}
.nb.open{display:block}
.nb-in{position:relative;max-width:880px;margin:0 auto;padding:clamp(54px,7vw,86px) clamp(30px,6vw,72px) clamp(60px,8vw,90px) clamp(24px,5vw,64px);background-color:var(--paper-warm);background-image:repeating-linear-gradient(transparent 0 33px,rgba(43,43,43,.05) 33px 34px);box-shadow:0 2px 0 rgba(255,255,255,.55) inset,0 26px 60px rgba(43,43,43,.25);transform-origin:right center;animation:nbin .62s var(--ease-drift)}
.nb-in::before{content:"";position:absolute;top:0;bottom:0;right:clamp(30px,5vw,64px);width:1px;background:rgba(178,59,46,.32)}
.nb-in::after{content:"";position:absolute;top:0;bottom:0;right:clamp(9px,1.8vw,22px);width:11px;background:radial-gradient(circle at 50% 50%,#D9D0C1 5px,rgba(43,43,43,.12) 5.6px,transparent 6.4px) 0 30px/11px 92px repeat-y}
/* הפרספקטיבה יושבת בתוך ה-transform ולא כתכונה על .nb, כי perspective על
   ההורה הופך אותו למסגרת ההתייחסות של position:fixed — וכפתור "חזרה" היה
   נגלל עם התוכן במקום להישאר במסך. */
@keyframes nbin{from{opacity:0;transform:perspective(1800px) rotateY(-11deg) translateX(46px)}}
.nb-close{position:fixed;top:clamp(12px,2.4vw,26px);left:clamp(12px,2.4vw,26px);z-index:5;display:inline-flex;align-items:center;gap:9px;border:none;background:var(--bg-canvas);box-shadow:0 1px 1px rgba(43,43,43,.12),0 8px 20px rgba(43,43,43,.16);font-family:var(--font-hebrew);font-weight:700;font-size:.95rem;color:var(--text-primary);cursor:pointer;padding:10px 20px 10px 16px;border-radius:999px;transition:transform .3s var(--ease-drift),box-shadow .3s var(--ease-drift)}
.nb-close .ar{font-size:1.15rem;line-height:1;transition:transform .3s var(--ease-drift)}
.nb-close:hover{opacity:1;transform:translateY(-1px);box-shadow:0 2px 2px rgba(43,43,43,.12),0 12px 26px rgba(43,43,43,.2)}
.nb-close:hover .ar{transform:translateX(-4px)}
.nb h3{font-family:var(--font-hebrew);font-weight:900;font-size:clamp(1.7rem,4.5vw,2.6rem);line-height:1.2;margin:0 0 6px}
.nb .ph{margin:0 0 34px}
.bio{max-width:37rem}
.bio p{margin:0 0 18px;line-height:1.9;color:var(--text-primary);font-size:1.05rem}
.bio .hl{font-family:var(--font-hebrew);font-weight:900;font-size:1.7rem;background:linear-gradient(transparent 62%,var(--accent-primary) 62%);padding:0 6px}
.ticket{display:inline-flex;align-items:center;gap:12px;background:#F4F1EA;box-shadow:var(--shadow-paper);padding:12px 30px 12px 22px;transform:rotate(-2deg);margin:4px 0 10px;font-family:var(--font-hebrew);position:relative}
.ticket::before{content:"";position:absolute;right:10px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:999px;background:var(--paper-warm);box-shadow:inset 0 0 0 1.5px rgba(43,43,43,.35)}
.ticket b{font-weight:900;font-size:1.35rem}
.ticket .hrt{color:#b23b2e;font-size:1.25rem}
.ticket small{color:var(--ink-soft);font-size:.85rem}
.polas{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(16px,2.4vw,26px)}
.pola{margin:0;background:none;padding:0;box-shadow:none;transform:none;position:relative;height:min(70vh,540px);height:min(70svh,540px)}
.pola:nth-child(even){transform:none}
.pola iframe{display:block;width:100%;height:100%;border:0;background:#fff;box-shadow:0 1px 1px rgba(43,43,43,.1),0 10px 24px rgba(43,43,43,.13)}
/* פתק ההמתנה מונח מעל ההטמעה ולא במקומה. אסור להסתיר את ה-iframe עצמו:
   iframe מוסתר לעולם אינו נכנס לתצוגה, ולכן הדפדפן לא מתחיל לטעון אותו
   ואירוע ה-load לא מגיע לעולם. */
.emb{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:20px;background:var(--paper-warm);box-shadow:0 1px 1px rgba(43,43,43,.1),0 10px 24px rgba(43,43,43,.13)}
.emb a{font-family:var(--font-hebrew);font-weight:700;font-size:.95rem;color:var(--text-primary);border-bottom:1.5px solid rgba(43,43,43,.4);padding-bottom:2px}
.embl{font-family:var(--font-accent);font-size:1.2rem;color:var(--ink-faint);animation:embp 1.7s var(--ease-drift) infinite}
@keyframes embp{0%,100%{opacity:.45}50%{opacity:1}}
.pola iframe{animation:embin .5s var(--ease-drift)}
@keyframes embin{from{opacity:0}}
.pola .slot{width:100%;aspect-ratio:4/5;position:relative}
.pola figcaption{text-align:center;font-family:var(--font-accent);font-size:16px;color:var(--ink-soft);margin-top:8px}
/* הועבר לכאן מתוך style מוטבע ב-index.html, בלי שינוי בערכים — כדי
   שאפשר יהיה לגבור עליו במסכים נמוכים (ראו בהמשך). */
.cthread{display:block;width:min(25vw,124px);margin:26px auto 0;transform:rotate(-2.5deg)}

/* ── מסלולי עבודה ──
   הפתק שפותח אותם יושב במסך "מכנה משותף אחד". הוא בנוי על אותו נייר של
   הפתקים בפרק הסגול, אבל כמחלקה נפרדת — הפתקים שם מכוילים למיקום בלוח
   ואין סיבה שכיול אחד יגרור את השני. */
.qnote{display:block;margin:clamp(16px,2.4vw,24px) auto 0;border:none;background:none;padding:0;
cursor:pointer;font:inherit;width:min(45vw,198px);transform:rotate(-2deg);
filter:drop-shadow(0 8px 16px rgba(43,43,43,.16));
transition:transform .45s var(--ease-drift),filter .45s var(--ease-drift)}
/* ‎.ch.on .txt>* מאפס transform ומנצח את .qnote בסגוליות, ולכן הפתק ישב
   ישר במנוחה וההטיה הופיעה רק ב-hover. במסך מגע ההקשה הראשונה מפעילה
   hover: הפתק קופץ ומסתובב, וההקשה נבלעת — משם "צריך ללחוץ פעמיים".
   כאן ההטיה מוגדרת במנוחה, ב-hover נשארת רק ההרמה, וההרמה בכלל מוגבלת
   למכשירים עם עכבר. */
/* הפתק נכנס בהתפוגגות בלבד, בלי להחליק 24px כמו שכניו: הוא היעד להקשה,
   ומטרה שזזה בזמן שנוגעים בה היא מטרה שמחטיאים. */
.txt>.qnote,.ch.on .txt>.qnote{transform:rotate(-2deg)}
.qnote:focus-visible{filter:drop-shadow(0 16px 26px rgba(43,43,43,.24))}
/* משוב מיידי לאצבע. :active נדלק כבר במגע, לפני שהמחברת נפתחת, ולכן
   ברור שההקשה נקלטה גם אם העמוד עוד לא צויר. */
.ch.on .txt>.qnote:active{transform:rotate(-2deg) scale(.96)}
.qnote:active{filter:drop-shadow(0 3px 8px rgba(43,43,43,.22));transition-duration:.08s}
@media (hover:hover){
.ch.on .txt>.qnote:hover{transform:rotate(-2deg) translateY(-4px)}
.qnote:hover{filter:drop-shadow(0 16px 26px rgba(43,43,43,.24))}
}
/* sheet-2 הוא הקרוב ביותר לריבוע מבין שלושת הדפים, ולכן מתיחה קלה לרוחב
   כמעט לא ניכרת בשורות ובניקובים. דף לאורך היה מתעוות כאן בבירור. */
.qsheet{display:flex;align-items:center;justify-content:center;
aspect-ratio:1.28;padding:11% 9%;
background-image:url("images/notes/sheet-2.webp");background-size:100% 100%;background-repeat:no-repeat}
/* דפדפנים בלי aspect-ratio (ספארי לפני 15) — בלעדיו לתיבות אין גובה.
   שאילתת התמיכה מבודדת את הגיבוי כך שלא יתנגש בריפוד שאחריו. */
@supports not (aspect-ratio:1){
.qsheet{min-height:132px}
.pola .slot{height:0;padding-top:125%}
}
.qtx{font-family:var(--font-accent);font-size:clamp(1.12rem,2.9vw,1.45rem);line-height:1.32;
color:var(--text-primary);text-wrap:balance}

.tracks{border-top:1px solid var(--line);margin-top:clamp(16px,2.4vw,24px)}
.trk{display:flex;gap:clamp(14px,2.6vw,30px);align-items:flex-start;
padding:clamp(20px,3.2vw,34px) 0;border-bottom:1px solid var(--line)}
.trk>img{flex:0 0 auto;width:min(34%,164px);height:auto;transform:rotate(-1.5deg)}
.trk:nth-child(even)>img{transform:rotate(2deg)}
.tin{flex:1;min-width:0;text-align:right}
.tin h4{font-family:var(--font-hebrew);font-weight:900;font-size:clamp(1.15rem,2.8vw,1.65rem);
line-height:1.2;margin:0 0 7px;color:var(--text-primary)}
/* השורה בכתב היד. בהדמיה היא סגולה, אבל הסגול היחיד בפלטה
   (--accent-secondary) נותן ניגודיות 2.1:1 על הנייר — לא קריא. לכן אותו
   טיפול שכבר נהוג באתר לכתב יד: --ink-soft, כמו החתימות והכיתובים. */
.tsub{font-family:var(--font-accent);font-size:clamp(1.05rem,2.4vw,1.4rem);line-height:1.3;
color:var(--ink-soft);margin:0 0 clamp(8px,1.2vw,12px)}
.trk p:not(.tsub){margin:0 0 clamp(10px,1.4vw,14px);line-height:1.75;color:var(--text-primary)}
/* הפתק הסוגר הוא הקריאה לפעולה היחידה בעמוד — לחיצה עליו פותחת את הטופס. */
.tfoot{position:relative;display:block;width:fit-content;margin:clamp(24px,3.6vw,38px) auto 0;
padding:clamp(14px,2vw,20px) clamp(22px,3vw,34px);text-align:center;border:none;cursor:pointer;
background:var(--bg-canvas);box-shadow:0 1px 1px rgba(43,43,43,.1),0 10px 22px rgba(43,43,43,.13);
transform:rotate(-1deg);font-family:var(--font-hebrew);font-size:clamp(.95rem,2vw,1.1rem);line-height:1.6;
color:var(--text-primary);transition:transform .4s var(--ease-drift),box-shadow .4s var(--ease-drift)}
.tfoot:hover{transform:rotate(-1deg) translateY(-3px);box-shadow:0 1px 1px rgba(43,43,43,.1),0 16px 28px rgba(43,43,43,.18)}
.tfoot:focus-visible{transform:rotate(-1deg) translateY(-3px);box-shadow:0 1px 1px rgba(43,43,43,.1),0 16px 28px rgba(43,43,43,.18)}
.thrt{position:absolute;top:8px;right:10px;color:var(--accent-secondary);font-size:.9rem}
.tsmi{font-size:1.05em}

.quotes{display:grid;gap:clamp(20px,3vw,30px)}
.qt{background:var(--bg-canvas);border:none;border-radius:2px;padding:clamp(26px,4vw,38px);box-shadow:0 1px 1px rgba(43,43,43,.1),0 12px 26px rgba(43,43,43,.12);transform:rotate(-.5deg)}
.qt:nth-child(even){transform:rotate(.6deg);background:#FCF8F1}
.qt p{margin:0 0 14px;line-height:1.85;font-size:1.02rem;color:var(--text-primary)}
.qt p:last-of-type{margin-bottom:0}
/* שם הממליצה — בראש ההמלצה, לא בסופה */
.qt .sig{display:block;margin:0 0 12px;font-family:var(--font-accent);font-size:1.2rem;color:var(--ink-soft)}
.cmts{display:grid;gap:clamp(22px,3.4vw,34px);max-width:640px;margin:0 auto}
.cmshot{position:relative;background:#fff;padding:9px;box-shadow:0 1px 1px rgba(43,43,43,.1),0 12px 24px rgba(43,43,43,.14);transform:rotate(-.9deg)}
.cmshot:nth-child(even){transform:rotate(1.1deg);margin-right:clamp(0px,4vw,44px);margin-inline-start:clamp(0px,4vw,44px)}
.cmshot:nth-child(3n){transform:rotate(.4deg);margin-left:clamp(0px,3vw,32px);margin-inline-end:clamp(0px,3vw,32px)}
.cmshot::before{content:"";position:absolute;top:-10px;right:22px;width:78px;height:22px;background:linear-gradient(180deg,rgba(232,220,197,.88),rgba(216,201,173,.84));box-shadow:0 1px 3px rgba(43,43,43,.16);transform:rotate(-2.5deg)}
.cmshot img{display:block;width:100%;height:auto}
.nb-in.plain{background-image:none}
.nbform{max-width:32rem}
.ff{margin:0 0 20px}
.ff label{display:block;font-family:var(--font-hebrew);font-weight:700;font-size:.95rem;line-height:20px;margin:0 0 6px}
.ff input,.ff textarea{width:100%;box-sizing:border-box;background:transparent;border:none;border-bottom:1.5px solid rgba(43,43,43,.55);font-family:var(--font-body);font-size:1rem;line-height:22px;height:36px;color:var(--text-primary);padding:0 0 12px;margin:0;outline:none;resize:none;display:block}
.ff textarea{height:80px;padding-top:2px}
.ff input:focus,.ff textarea:focus{border-bottom-color:var(--accent-secondary)}
.nbsend{background:var(--text-primary);color:var(--bg-canvas);font-size:1.05rem;padding:14px 44px}
.thanks{text-align:center;font-family:var(--font-hebrew);font-weight:800;font-size:1.6rem;line-height:1.5;padding:30px 0}
@media (max-width:760px){
.chin{grid-template-columns:1fr;padding:6vh var(--page-pad);padding:6svh var(--page-pad)}
/* מסך הפתיחה חוזר לגובה מלא: כשהוא נמוך מהמסך נשארת מתחתיו רצועה ריקה
   כבר מהפיקסל הראשון. את הגלילה המתה מקצרים ב-script.js — הקומפוזיציה
   מתחילה להיאסף עוד לפני שהפרק ננעל. הפרק עצמו ארוך יותר כדי שהתנועה
   תהיה איטית ומכוונת. */
.assembly{height:260vh}.hwrap{height:320vh}
.pfig2{width:min(62vw,300px)}
.hcard{width:82vw}.hcard.intro{width:78vw}.qcard{height:min(52vh,440px);height:min(52svh,440px)}
/* בנייד הפס נצמד כך שכרטיס עומד במרכז, והרווח שבין הכרטיסים — עם החץ —
   נחתך בדיוק בקצה המסך: את החץ ראו רק בזמן התנועה. השוליים השליליים
   מקטינים את המקום שהחץ תופס כמעט לאפס, כך שהוא יושב בתוך הרצועה
   שנשארת על המסך וחופף מעט את שולי הכרטיסים — כמו הסלוטייפ והאטבים
   שכבר חוצים קצוות בעיצוב. z-index מעלה אותו מעל שני השכנים.
   הוא גם מורם מעל קו כפתור הדפדוף העגול, שיושב באותו קצה מסך.
   top ולא transform — ה-rotate של כל חץ הוא style מקומי על האלמנט,
   ו-transform מכאן היה נדרס על ידו. */
.jarr{width:40px;position:relative;top:-11vh;margin-right:-28px;margin-left:-28px;z-index:2}
.face h3{font-size:1.42rem}.face .fh{width:64px;height:64px;font-size:1.8rem}
.face.fr h3{font-size:clamp(1.5rem,6.4vw,1.95rem)}
.nb{padding-top:80px}
.nb-in{padding-right:62px;padding-left:22px}
.nb-in::before{right:34px}
.nb-in::after{right:10px}
.nb-close{top:22px;left:14px}
.ideco{display:none}.contact .cdeco{display:none}
.objf{min-height:300px}
.btn2{padding:9px 24px;font-size:.9rem}
.purple .chin{padding-top:4vh;padding-top:4svh;padding-bottom:4vh;padding-bottom:4svh}

.purple .txt h2{font-size:3.2rem}
.plede{font-size:1.9rem}
.vlist li{font-size:1.15rem;line-height:1.45}
.krow{font-size:3rem}
.snote{width:28%}
.board{height:clamp(260px,40vh,340px);height:clamp(260px,40svh,340px)}
.st1{--x:75%;--y:15%}.st2{--x:79%;--y:29%}.st3{--x:68%;--y:43%}.st4{--x:86%;--y:2%}
.sn1{--x:14%;--y:30%}.sn2{--x:16%;--y:92%}.sn3{--x:80%;--y:88%}
.snote .pp{--pt:16%;--pb:9%;min-height:calc(clamp(80px,25vw,124px) / var(--ar))}
.snote .tx{font-size:.7rem;line-height:1.34}
.snote .op{font-size:.86rem;margin-top:7px}
.tapy{width:29px;height:29px;font-size:.85rem;top:-8px;right:-8px}
.sn3 .tapy{left:-8px}
.snote .tp{width:44px;height:18px}.snote .clip{width:28px;top:-13px}
.stub{padding:7px 15px 7px 12px;gap:7px}.stub b{font-size:.9rem;padding-right:11px;padding-inline-start:11px}.stub small{font-size:.64rem}
/* מסלולים בנייד: בעמודה צרה שלצד התמונה הפסקאות יוצאות ארוכות וצרות —
   ארבע מילים בשורה, עם שטח מת מתחת לתמונה. לכן התמונה צפה והטקסט עוטף
   אותה וממשיך לרוחב מלא מתחתיה. (בעברית התמונה משמאל, והרווח מימינה.) */
.trk{display:block}
.trk>img{float:left;width:40%;margin-right:clamp(12px,3.4vw,18px);margin-inline-start:clamp(12px,3.4vw,18px);margin-bottom:10px}
.trk::after{content:"";display:block;clear:both}
.contact .chin{padding-bottom:150px}
.cfoot{flex-direction:column;gap:11px;padding:16px var(--page-pad)}
.cfrule{width:64px;height:1px}
.ch{min-height:100vh;min-height:100lvh}.hpin{height:100vh;height:100lvh}
/* הפרק האחרון נדבק (sticky) רק בפיקסל האחרון של הגלילה, ולכן הסגול שמאחוריו
   נשאר מציץ מלמעלה — במיוחד כששורת הכתובת בנייד מתקפלת. הזנב נותן לו מרחק
   גלילה להידבק בו. */
.dwell{height:75vh;height:75lvh}
.tail{height:14vh;height:14lvh}
}
/* ── תוספות מימוש: טופס חי, מצבי שגיאה, נגישות ── */
.ff input:invalid:not(:placeholder-shown){border-bottom-color:#b23b2e}
.fstatus{margin:16px 0 0;font-family:var(--font-hebrew);font-weight:600;font-size:.95rem;line-height:1.5;min-height:1.4em}
.fstatus.err{color:#b23b2e}
.nbsend[disabled]{opacity:.55;cursor:progress}
/* הסתרה חזותית בלי להזיז אלמנטים אל מחוץ למסך: מיקום שלילי ב-RTL יוצר
   גלישה אופקית, והדפדפן בנייד מקטין את כל העמוד כדי להכיל אותה. */
.hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cmts-empty{font-family:var(--font-hebrew);font-weight:600;font-size:1rem;line-height:1.7;color:var(--ink-soft);text-align:center;padding:26px 0}
:focus-visible{outline:2.5px solid var(--accent-secondary);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
.face:not(.bk) .fh{animation:none}
.nb-in{animation:none}
.embl{animation:none;opacity:.8}
.tapy{animation:none}
.pola iframe{animation:none}
}
/* החלקה אופקית על הכרטיסים מטופלת ב-script.js; pan-y מוסר את המחווה
   האופקית מהדפדפן ומשאיר לו את הגלילה האנכית ואת הזום. */
.hpin{touch-action:pan-y pinch-zoom}

/* מסך "מכנה משותף אחד" על מסך רחב אך נמוך — מחשב נייד בגובה 640–800.
   שם הגובה הוא המשאב הנדיר, ולא הרוחב, וכל המידות בעמוד נגזרות מ-vw.
   התוצאה הייתה גלישה מהמסך: הפתק החדש הוסיף כ-166px לעמוד שכבר היה
   צפוף (ב-1024x640 הוא גלש עוד לפני שנוסף). כאן מכווצים לפי גובה.
   מסכי נייד מכוילים בנפרד ולכן הכלל הזה לא נוגע בהם. */
@media (min-width:761px) and (max-height:820px){
.clean .chin{padding-top:5vh;padding-top:5svh;padding-bottom:5vh;padding-bottom:5svh}
.clean h2{font-size:clamp(1.9rem,3.7vw,2.6rem);margin-bottom:14px}
.clean .big{font-size:clamp(1.15rem,2.3vw,1.5rem)}
.cthread{width:min(15vw,82px);margin-top:14px}
.qnote{width:min(21vw,140px);margin-top:14px}
}
/* רצועת ביניים: גובה 821–940 (למשל 1440x900). כאן אין צורך לגעת
   בטיפוגרפיה — מספיק לצמצם את הפתק ואת הרווחים סביבו. */
@media (min-width:761px) and (min-height:821px) and (max-height:940px){
.cthread{width:min(19vw,104px);margin-top:20px}
.qnote{width:min(24vw,156px);margin-top:18px}
}
/* מכשירים נמוכים (360x640 ודומיו). אותו היגיון, בצד הנייד. */
@media (max-width:760px) and (max-height:700px){
.cthread{width:min(21vw,92px);margin-top:18px}
.qnote{width:min(36vw,150px);margin-top:16px}
/* גב הכרטיס בגובה קבוע עם overflow:hidden. התשובה הארוכה ביותר (קמפיינים,
   פסקה + הסתייגות) נחתכה כאן בכמה פיקסלים, ולכן הטקסט נדחס מעט. */
.face.bk .bp{font-size:.92rem;line-height:1.6}
.face.bk .bp.fine{font-size:.8rem;line-height:1.5;margin-top:8px}
}

/* ── סמסונג אינטרנט במצב "אתרים כהים" (html.si-dark, ראו script.js) ──
   הפילטר מבהיר את הדיו אבל משאיר את ההילה הבהירה של הכיתובים — טקסט
   בהיר בתוך הילה בהירה, בלתי קריא. בלי ההילה נשאר טקסט בהיר על הרקע
   שהפילטר החשיך, וזה קריא. בדפדפנים אחרים הכללים לא חלים כלל. */
.si-dark .cap p,.si-dark .cap .cs{-webkit-text-stroke:0}
/* פתק ההסבר: מופיע פעם אחת, נסגר בכפתור. יושב מתחת למחברת (z-60). */
.sitoast{position:fixed;bottom:14px;right:14px;left:14px;z-index:55;
display:flex;gap:10px;align-items:flex-start;max-width:520px;margin:0 auto;
background:var(--paper-warm);color:var(--text-primary);
box-shadow:0 10px 28px rgba(43,43,43,.28);padding:14px 16px;
font-family:var(--font-hebrew);font-size:.92rem;line-height:1.55}
.sitoast p{margin:0}
.sitoast button{border:none;background:none;padding:2px 6px;cursor:pointer;
font-size:1rem;color:var(--ink-soft);flex:0 0 auto;font-family:inherit}
/* גרסת השאלה: שתי תשובות כטקסט מודגש עם קו מקווקו — שפת הקישורים של
   האתר, בלי כפתורים מצועצעים */
.sitoast .sians{display:flex;gap:18px;margin-top:10px}
.sitoast .sians button{padding:0;font-weight:700;font-size:.95rem;
color:var(--text-primary);text-decoration:underline;
text-decoration-style:dotted;text-underline-offset:3px}
.sitoast.siask{flex-direction:column;gap:0}