/* The house faces, carried over from mikdash-scroll. Basalt is a static
   family shipped as three separate cuts (Tall / Regular / Light), so weight
   is chosen by family, not by font-weight - the weight declarations that
   remain in sections.css are inert and harmless. */
@font-face {
  font-family: "Basalt Tall";
  src: url("../assets/fonts/basalt-tall.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Basalt Regular";
  src: url("../assets/fonts/basalt-regular.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Basalt Light";
  src: url("../assets/fonts/basalt-light.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

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

/* NOTE - the deliberate break from mikdash-scroll/css/base.css.
   That file ships `html, body { height:100%; overflow:hidden }` because the
   temple page is exactly one viewport and never scrolls. Carrying it over
   here would silently kill the whole hero: an ancestor with overflow hidden
   (or auto, or scroll) makes ITSELF the scroll container for its
   descendants, and since it is not the element being scrolled,
   `position: sticky` inside it never sticks. No error, no warning - the
   stage just scrolls past. `clip` does the overflow job without creating a
   scroll container, which is exactly why it is used here and `hidden` is
   not. */
html, body {
  margin: 0;
  padding: 0;
  height: auto;
  overflow: visible;
  background: var(--cream);
  color: var(--ink);
}
body { overflow-x: clip; }
html { scroll-behavior: auto; }   /* Lenis owns smoothing; see js/scroll.js */

html[lang="he"] { direction: rtl; }
html[lang="en"] { direction: ltr; }

body {
  font-family: var(--f-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, canvas, svg, video { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--paprika); outline-offset: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Numerals, timings and Latin names inside Hebrew text. Without the isolate
   a bidi run reorders "3-5 ימים"; without tabular-nums a scrubbed counter
   jitters horizontally as digit widths change.
   This goes on a SPAN inside the box, never on the box: direction flips an
   element's own inline axis too, so putting it on .counter made
   inset-inline-end resolve to the physical right in Hebrew. */
.num, .qty {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

/* A run of pure digits needs the isolate, but NOT direction:ltr. Direction on
   a block element also resets its text-align, which threw the step numeral to
   the far edge of an otherwise right-aligned column. Digits are weak-LTR and
   order correctly inside an RTL block on their own. */
.step-n {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

/* ---- reduced motion ------------------------------------------------------
   Zeroing animation-duration and transition-duration - which is all that
   mikdash does - has NO effect on a scrubbed GSAP timeline, because a
   scrubbed timeline has no duration to zero. Left at that, a visitor who
   asked for less motion would still be handed the full ~950vh scroll.
   The real fallback is three levels: js/scroll.js builds no timeline at all
   under this query, the layout collapses out of the pin (css/sections.css),
   and chrome.js switches to an IntersectionObserver. This block only covers
   what is genuinely a CSS transition. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}