/* ==========================================================================
   SAKANA — base: reset, typography, buttons, links, motion primitives.
   RTL-first: logical properties only.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable; /* no layout jump when dialogs/drawers lock scrolling */
  overflow-anchor: none;
  touch-action: manipulation; /* no double-tap-zoom heuristics: quick successive taps all register (iOS) */    /* header compaction must not nudge scroll; keeps scroll restoration exact (Safari never anchors either) */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--fs-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
em { font-style: normal; color: var(--accent); }
s { text-decoration-thickness: 1px; }

::selection { background: var(--accent); color: var(--cream); }
:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 4px; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip {
  position: absolute; inset-inline-start: 8px; inset-block-start: -80px; z-index: 100;
  background: var(--ink); color: var(--cream); padding: 10px 16px;
}
.skip:focus { inset-block-start: 8px; }

.wrap { padding-inline: var(--g); max-inline-size: var(--max); margin-inline: auto; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.latin { font-family: var(--f-latin); font-style: italic; letter-spacing: 0.02em; }
/* Icons drawn for RTL (back/next arrows) point the other way on English pages. */
[dir="ltr"] .icon--dir { scale: -1 1; }
.kicker { font-size: var(--fs-xs); letter-spacing: 0.08em; color: var(--soft); }
.kicker .latin { font-size: 16px; color: var(--accent); margin-inline-end: 4px; }
/* English kickers: small, spaced capitals — the editorial convention in Latin type. */
:lang(en) .kicker { text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; }
:lang(en) .kicker .latin { text-transform: none; letter-spacing: 0.02em; }

.display, .h1, .h2, .h3 { font-family: var(--f-serif); font-weight: 300; letter-spacing: -0.01em; }
.h1 { font-size: var(--fs-h1); line-height: 1.04; }
.h2 { font-size: var(--fs-h2); line-height: 1.08; }
.h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 400; }
.mega { font-family: var(--f-serif); font-weight: 300; font-size: var(--fs-mega); line-height: 0.92; letter-spacing: -0.02em; }
.lede { font-size: var(--fs-lg); color: var(--soft); max-inline-size: 42ch; }

.prose { max-inline-size: 64ch; }
.prose > * + * { margin-block-start: 1em; }
.prose h2 { font-family: var(--f-serif); font-weight: 400; font-size: 28px; line-height: 1.25; margin-block-start: 2em; }
.prose h3 { font-family: var(--f-serif); font-weight: 400; font-size: 21px; margin-block-start: 1.6em; }
.prose ul { list-style: disc; padding-inline-start: 1.2em; }
.prose a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line); }
@media (hover: hover) { .prose a:hover { color: var(--accent); text-decoration-color: currentColor; } }

/* --------------------------------------------------------------------------
   Placeholder content — deliberately visible so it is never mistaken for real
   copy. Search the codebase for `ph-` to find every placeholder.
   -------------------------------------------------------------------------- */

.ph {
  color: var(--soft);
  text-decoration: underline dotted var(--accent);
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.ph-block {
  position: relative;
  border-inline-start: 2px solid var(--accent);
  padding-inline-start: 18px;
  color: var(--soft);
}
.ph-block::before {
  content: "טקסט זמני";
  display: block;
  font-family: var(--f-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  color: var(--accent);
  margin-block-end: 6px;
}
.ph-block[data-label]::before { content: attr(data-label); }

/* --------------------------------------------------------------------------
   Buttons & links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-block-size: 52px;
  padding: 14px 30px;
  background: var(--ink); color: var(--cream);
  border: 1px solid var(--ink); border-radius: 0;
  font-family: var(--f-sans); font-weight: 600; font-size: var(--fs-sm); letter-spacing: 0.03em;
  text-align: center;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
@media (hover: hover) { .btn:hover { background: var(--accent); border-color: var(--accent); } }
.btn--ghost { background: transparent; color: var(--ink); }
@media (hover: hover) { .btn--ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); } }
.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
@media (hover: hover) { .btn--light:hover { background: var(--accent); border-color: var(--accent); color: var(--cream); } }
.btn--block { display: flex; inline-size: 100%; }
.btn:active:not([disabled]) { opacity: 0.85; } /* touch feedback (hover styles are mouse-only) */
.btn[disabled], .btn[aria-disabled="true"] {
  background: transparent; color: var(--soft); border-color: var(--line); cursor: not-allowed;
}

.text-link {
  font-weight: 600; font-size: var(--fs-sm);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px;
  text-decoration-color: var(--line);
  transition: text-decoration-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
@media (hover: hover) { .text-link:hover { color: var(--accent); text-decoration-color: var(--accent); } }
button.text-link { background: none; border: 0; padding: 0; min-block-size: 44px; }

.icon-btn {
  display: inline-grid; place-items: center;
  min-inline-size: 44px; min-block-size: 44px;
  background: none; border: 0; padding: 0;
}

/* --------------------------------------------------------------------------
   Images (placeholder registry hydrates img[data-ph])
   -------------------------------------------------------------------------- */

img[data-ph] { opacity: 0; transition: opacity 1s var(--ease), transform 1.6s var(--ease); background: var(--paper-2); }
img[data-ph].is-loaded { opacity: 1; }
.frame { position: relative; overflow: hidden; background: var(--paper-2); }
.frame > img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   Reveal on scroll (only once JS is running)
   -------------------------------------------------------------------------- */

.js [data-reveal]:not([data-reveal="img"]) {
  opacity: 0; transform: translateY(22px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  transition-delay: calc(var(--d, 0) * 100ms);
}
.js [data-reveal].is-in:not([data-reveal="img"]) { opacity: 1; transform: none; }
.js [data-reveal="img"] { overflow: hidden; }
.js [data-reveal="img"] img { transform: scale(1.1); }
.js [data-reveal="img"].is-in img { transform: scale(1); transition: opacity 1.2s var(--ease), transform 2.4s var(--ease); }

/* Cross-page transitions (progressive: browsers without support just navigate) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.28s var(--ease) both vt-out; }
::view-transition-new(root) { animation: 0.45s var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .js [data-reveal], .js [data-reveal] img { opacity: 1 !important; transform: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* Shown until JS renders a page that is built client-side (e.g. product page) */
.page-loading { min-block-size: 60vh; display: grid; place-items: center; color: var(--soft); font-size: var(--fs-sm); }