/* shared by every page of the dasha site */
:root {
  --bg: #F6F1E8;
  --ink: #2C2B27;
  --accent: #FA3539;
  --marker: rgba(250, 53, 57, 0.32);
  --line: rgba(44, 43, 39, 0.18);

  --nav-h: 76px;
  --gutter: clamp(16px, 3vw, 40px);
  /* the logo's width plus the gap after it in the nav: text lines up with "עבודות" on the right */
  --indent: calc(17px * 800 / 239 + clamp(28px, 5vw, 72px));

  /* hero word; the contact heading is twice this */
  --hero-size: clamp(56px, 9.5vw, 150px);

  /* work frames */
  --work-full: 600px;
  --work-min: 250px;
  --work-gap: 25px;
  --peek: clamp(140px, 28vh, 260px);   /* how much of the first work shows under the hero */
}
@media (max-width: 720px) {
  :root { --nav-h: 64px; --work-full: 440px; --work-min: 160px; --indent: calc(15px * 800 / 239 + 18px); }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans Hebrew", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
/* selected text: accent highlight, text in the page colour */
::selection { background: var(--accent); color: var(--bg); }
img { display: block; max-width: 100%; }

/* ---------- highlighter note ---------- */
.marker {
  display: inline;
  padding: 0.05em 0.3em;
  background:
    linear-gradient(100deg, transparent 0 0.6%, var(--marker) 1.2% 98.4%, transparent 99.2%) 0 55% / 100% 78% no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- sticky nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__logo img { height: 17px; width: auto; }
.nav__links {
  display: flex;
  gap: clamp(16px, 3vw, 44px);
  margin: 0; padding: 0; list-style: none;
  font-weight: 500;
}
.nav__links a, .nav__cta { position: relative; transition: color .2s; }
.nav__links a:hover { color: var(--accent); }
.nav__end {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
}
.nav__cta {
  margin-inline-start: auto;
  font-weight: 900;
}
.nav__end .nav__cta { margin: 0; }

/* language switch: EN | עב before "דברו איתי"; the current one at full opacity, the other at 60% and red on hover */
.nav__lang { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; }
.nav__lang a { opacity: .6; transition: color .2s, opacity .2s; }
.nav__lang a:hover { color: var(--accent); opacity: 1; }
.nav__lang-sep { width: 1px; height: .95em; background: currentColor; opacity: .35; }
.nav__cta:hover { color: var(--accent); }

@media (max-width: 720px) {
  .nav { gap: 18px; }
  .nav__logo img { height: 15px; }
  .nav__links { gap: 14px; font-size: 14px; }
  .nav__cta { font-size: 14px; }
  .nav__end { gap: 14px; }
  .nav__lang { font-size: 13px; gap: 6px; }
}
@media (max-width: 460px) {
  .nav__links > li:nth-child(3) { display: none; }
}

/* ---------- contact ---------- */
.contact { padding: clamp(80px, 13vh, 180px) var(--gutter) 0; }   /* the dark footer starts right under the line */
.contact__head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;
  color: var(--accent);
}
.contact__title {
  margin: 0;
  font-size: min(calc(var(--hero-size) * 16 / 15), 16vw);
  line-height: .78;
  font-weight: 900;
  letter-spacing: -0.03em;
}
.contact__email {
  font-weight: 800;
  font-size: clamp(13px, 1.1vw, 16px);
  text-align: left;
  direction: ltr;
  padding-bottom: .15em;
  transition: color .2s;
}
.contact__email:hover { color: var(--ink); }
.contact__title a { transition: color .25s; }
.contact__title a:hover { color: var(--ink); }
.contact__rule { border: 0; border-top: 2px solid var(--accent); margin: 4px calc(-1 * var(--gutter)) 0; }  /* bleeds past the gutter to both screen edges */
.footer {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 60px var(--gutter) 28px; font-size: 13px; opacity: .7;
}

/* ---------- footer: right under the line, on the page background; hold the cup to pour Stav a coffee (coffee.js) ---------- */
.coffee-foot { background: var(--bg); color: var(--ink); }
.coffee-foot .footer { opacity: 1; color: rgba(44, 43, 39, .7); padding-top: 101px; padding-bottom: 90px; }
.coffee-foot .footer a { transition: color .2s; }
.coffee-foot .footer a:hover { color: var(--accent); }
.coffee {
  display: flex; align-items: flex-end; justify-content: flex-end; gap: clamp(16px, 2.4vw, 32px);
  padding: clamp(110px, 16vh, 150px) var(--gutter) 8px;
  color: var(--ink);
}
.coffee__cup {
  all: unset;
  flex: none;
  width: 84px;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.coffee__cup svg { display: block; width: 100%; height: auto; overflow: visible; }
.coffee__cup { position: relative; }
/* the moka pot hangs above the cup and tips over to pour (added by coffee.js).
   It turns around its spout tip (57,12 in its 60x84 box), which sits right on top of the stream.
   The pot leans over the text side, so it never runs off the screen edge: mirrored on the Hebrew pages. */
.coffee__moka {
  position: absolute;
  width: 56px;
  left: calc(42px - 57 * 56px / 60);
  top: calc(-46 * 84px / 80 - 12 * 56px / 60);
  transform-origin: calc(57 * 56px / 60) calc(12 * 56px / 60);
  opacity: 0;
  transform: translateY(8px);
  transition: transform .45s cubic-bezier(.65,0,.35,1), opacity .25s;
  pointer-events: none;
}
.coffee__moka svg { width: 100%; height: auto; }
.coffee__moka path { fill: var(--bg); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: miter; }
.coffee__moka .coffee__moka-handle { fill: none; stroke-width: 4; }
.coffee__cup:hover .coffee__moka, .coffee__cup:focus-visible .coffee__moka { opacity: 1; transform: rotate(8deg); }
.coffee.is-pouring .coffee__moka { opacity: 1; transform: rotate(52deg); }
.coffee.is-full .coffee__moka { opacity: 0; transform: none; }
[dir="rtl"] .coffee__moka { left: auto; right: calc(42px - 57 * 56px / 60); transform-origin: calc(3 * 56px / 60) calc(12 * 56px / 60); }
[dir="rtl"] .coffee__moka svg { transform: scaleX(-1); }
[dir="rtl"] .coffee__cup:hover .coffee__moka, [dir="rtl"] .coffee__cup:focus-visible .coffee__moka { transform: rotate(-8deg); }
[dir="rtl"] .coffee.is-pouring .coffee__moka { transform: rotate(-52deg); }
[dir="rtl"] .coffee.is-full .coffee__moka { transform: none; }
.coffee__cup:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.coffee__stream { stroke: var(--ink); stroke-width: 3; transform-box: fill-box; transform-origin: top; transform: scaleY(0); transition: transform .15s; }
.coffee.is-pouring .coffee__stream { transform: scaleY(1); }
.coffee__steam path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: square; opacity: 0; }
.coffee.is-full .coffee__steam path { animation: steam 1.6s ease-out infinite; }
.coffee.is-full .coffee__steam path:nth-child(2) { animation-delay: .35s; }
.coffee.is-full .coffee__steam path:nth-child(3) { animation-delay: .7s; }
@keyframes steam {
  0%   { opacity: 0; transform: translateY(6px); }
  30%  { opacity: .8; }
  100% { opacity: 0; transform: translateY(-14px); }
}
.coffee__text { padding-bottom: 4px; }
.coffee__ask { margin: 0; font-weight: 900; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.2; }
.coffee__count { margin: 6px 0 0; font-size: 14px; min-height: 1.5em; }
.coffee__count b { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .coffee.is-full .coffee__steam path { animation: none; opacity: .6; }
}


.nav__links a[aria-current="page"], .nav__cta[aria-current="page"] { color: var(--accent); }

/* ---------- works dropdown (opens on hover or keyboard focus) ---------- */
.nav__works { position: relative; }
.works-menu {
  position: absolute;
  top: 100%;
  inset-inline-start: -22px;
  min-width: 290px;
  margin: 0; padding: 26px 0 0;          /* the top padding bridges the gap under the link */
  list-style: none;
  font-weight: 500;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility 0s .18s;
}
.works-menu::before {                    /* the panel itself, below the bridge */
  content: "";
  position: absolute; inset: 26px 0 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  z-index: -1;
}
.works-menu li a { display: block; padding: 10px 22px; white-space: nowrap; }
.works-menu li:first-child a { padding-top: 16px; }
.works-menu li:last-child > * { padding-bottom: 16px; }
/* works whose pages aren't ready yet: faded, not a link, with a red "בקרוב" */
.works-menu .is-soon span { display: flex; align-items: baseline; gap: 10px; padding: 10px 22px; white-space: nowrap; color: rgba(44, 43, 39, .35); cursor: default; }
.works-menu .is-soon small { font-size: 12px; font-weight: 700; color: var(--accent); }
.works-menu li:not(.is-soon) + .is-soon { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 6px; }
.nav__works:hover .works-menu,
.nav__works:focus-within .works-menu,
.nav__works.is-open .works-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .18s, transform .18s, visibility 0s;
}
.nav__works:hover > a, .nav__works:focus-within > a, .nav__works.is-open > a { color: var(--accent); }
@media (max-width: 720px) {
  .works-menu { min-width: 0; inset-inline-start: -16px; padding-top: 20px; }
  .works-menu::before { top: 20px; }
  .works-menu li a, .works-menu .is-soon span { padding: 9px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .works-menu { transform: none; transition: none; }
}

/* English pages (en/, dir="ltr"): the email sits at the right end */
[dir="ltr"] .contact__email { text-align: right; }

/* a few key words in longer paragraphs, so a skimmer still gets the idea */
main p strong { font-weight: 800; }