/* =========================================================
   BASE — איפוס, טיפוגרפיה, יסודות מובייל ונגישות
   נכתב מובייל־פירסט: הבסיס הוא המסך הקטן, min-width מרחיב.
   ========================================================= */

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

html {
  scroll-behavior: smooth;
  /* חייב להתאים לגובה הכותרת הדביקה, אחרת עוגנים נחתכים מתחתיה */
  scroll-padding-block-start: calc(var(--header-h) + var(--s-4));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-weight: var(--w-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  /* clip ולא hidden — לא יוצר הקשר גלילה חדש ולא שובר position:sticky */
  overflow-x: clip;
  min-block-size: 100svh;
  -webkit-font-smoothing: antialiased;
  /* מבטל את ריבוע ההדגשה הכחול של אנדרואיד; המשוב מגיע מ-:active */
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t), color var(--t);
}

img, svg, video { display: block; max-inline-size: 100%; block-size: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-underline-offset: .2em; }

h1, h2, h3, h4 {
  font-weight: var(--w-display);
  line-height: var(--lh-tight);
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }

p { text-wrap: pretty; overflow-wrap: break-word; }

::selection { background: var(--ink); color: var(--bg); }

/* =========================================================
   נגישות — יסודות
   ========================================================= */

.skip-link {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 50%;
  translate: -50% -140%;
  z-index: 999;
  background: var(--ink);
  color: var(--bg);
  font-weight: var(--w-medium);
  font-size: var(--fs-sm);
  padding: var(--s-3) var(--s-5);
  border-radius: 0 0 var(--r-md) var(--r-md);
  text-decoration: none;
  transition: translate var(--t-fast) var(--ease);
}
.skip-link:focus-visible { translate: -50% 0; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   פריסה
   ========================================================= */

.section {
  padding-block: var(--section-y);
  padding-inline: var(--pad-x);
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

/* סקשן הפוך — הרגע הדרמטי היחיד באתר, ועדיין מונוכרום.
   מחליף את שני הקטבים ומחשב מחדש את שאר הסקאלה מהם. */
.section--invert {
  --ink: var(--bg-0);
  --bg: var(--ink-0);
  --muted:       color-mix(in srgb, var(--ink) 62%, var(--bg));
  --line:        color-mix(in srgb, var(--ink) 22%, var(--bg));
  --line-strong: color-mix(in srgb, var(--ink) 42%, var(--bg));
  --surface:     color-mix(in srgb, var(--ink) 8%, var(--bg));
  --accent: var(--ink);
  --on-accent: var(--bg);

  background: var(--bg);
  color: var(--ink);
}

.wrap { max-inline-size: var(--maxw); margin-inline: auto; inline-size: 100%; }
.wrap--narrow { max-inline-size: 760px; }

/* פריטי גריד/פלקס לא מתכווצים מתחת לתוכן שלהם כברירת מחדל.
   זה מקור מספר אחת לגלישה אופקית במובייל. */
.grid > *, .flex > * { min-inline-size: 0; }

/* =========================================================
   כותרות סקשן
   ========================================================= */

.label {
  display: block;
  font-size: var(--fs-label);
  font-weight: var(--w-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: var(--s-3);
}

.section-head { margin-block-end: var(--s-6); max-inline-size: var(--measure); }
.section-head h2 { margin-block-end: var(--s-3); }
.section-lead { font-size: var(--fs-lead); color: var(--muted); max-inline-size: 60ch; }

/* קו שיער — המפריד היחיד באתר */
.rule { block-size: 1px; background: var(--line); border: 0; }

/* =========================================================
   חשיפה בגלילה — עדינה בכוונה
   ========================================================= */

[data-reveal] {
  opacity: 0;
  translate: 0 12px;
  transition:
    opacity var(--t-slow) var(--ease),
    translate var(--t-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; translate: 0 0; }

/* =========================================================
   תנועה מופחתת — העדפת מערכת + מתג ידני
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; translate: none; }
}

html[data-motion='off'] { scroll-behavior: auto; }
html[data-motion='off'] *,
html[data-motion='off'] *::before,
html[data-motion='off'] *::after {
  animation: none !important;
  transition: none !important;
}
html[data-motion='off'] [data-reveal] { opacity: 1; translate: none; }

/* =========================================================
   נעילת גלילה כשתפריט או חלונית פתוחים
   ========================================================= */
html.is-locked, html.is-locked body { overflow: hidden; }

/* =========================================================
   fallback ללא JavaScript
   ========================================================= */
.noscript-fallback {
  max-inline-size: 60ch;
  margin-inline: auto;
  padding: var(--s-8) var(--pad-x);
  text-align: center;
}
.noscript-fallback h1 { font-size: var(--fs-h2); margin-block-end: var(--s-4); }
.noscript-fallback p { margin-block-end: var(--s-4); color: var(--muted); }
.noscript-fallback a { font-weight: var(--w-medium); }
.noscript-fallback code {
  font-family: ui-monospace, monospace;
  font-size: .9em;
  background: var(--surface);
  padding: .1em .4em;
  border-radius: var(--r-sm);
}