/* ==========================================================================
   THE SITE'S LOGO + MENU — shared by every page (her call, 4 Oct 2026)
   --------------------------------------------------------------------------
   Built on homepage.html (Figma 3571:465 header, 3655:474 menu) and moved
   here whole so the three pages carry exactly the same thing. Self-contained:
   its own unit (--nu: the 1920 frame, never below half), its own colours,
   its own button. Markup: <header class="tnav"> + <div class="tmenu">.
   ========================================================================== */
/* Degolan: the site's English wordmark face (js/site-degolan.js on the other pages) */
@font-face {
  font-family: "Degolan";
  src: url("../assets/fonts/Degolan.woff2") format("woff2"),
       url("../assets/fonts/Degolan.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Motive";
  src: url("../assets/fonts/Motive-Medium.woff2") format("woff2"),
       url("../assets/fonts/Motive-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
:root {
  --nu: max(0.5px, 100vw / 1920);   /* grows past 1920 with the pages (5 Oct) */
  --tn-ink: #0D0914;
  --tn-white: #F7F7F7;
  --tn-lilac: #9F93FF;
  --tn-purple: #695EBE;
}

/* ---- the header: two things, fixed while the page scrolls -------------- */
.tnav { position: relative; z-index: 450; }
.tnav__logo,
.tnav__menu {
  position: fixed;
  z-index: 450;
  color: var(--tn-white);
  transition: color 0.35s ease;
}
.tnav__logo.is-dark,
.tnav__menu.is-dark { color: var(--tn-ink); }      /* over a light ground */
.tnav__logo {
  left: calc(71.5 * var(--nu));
  translate: -50% 0;
  top: calc((39 - 2.9) * var(--nu));                  /* ink correction, Motive */
  font-family: "Motive", "Cooperative", sans-serif;
  font-weight: 500;
  font-size: calc(58.135 * var(--nu));
  line-height: 0.96;
  text-decoration: none;
}
.tnav__menu {
  right: calc((1920 - 1819 - 49) * var(--nu));
  top: calc(48 * var(--nu));
  width: calc(49 * var(--nu));
  height: calc(49 * var(--nu));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.tnav__menu svg { display: block; width: 100%; height: 100%; }

/* ---- the sheet (Figma 3655:474) ----------------------------------------
   Drops from the top with a soft overshoot, leaves fast; fits the window
   (unit = the smaller of --nu and height / 993); five words drop in letter
   by letter, hover dims the rest and replays the word. */
.tmenu {
  --mu: min(var(--nu), calc(100vh / 993));
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--tn-purple);
  color: var(--tn-white);
  overflow: hidden;
  translate: 0 -100%;
  box-shadow: 0 -40vh 0 var(--tn-purple);
  visibility: hidden;
  transition: translate 0.38s cubic-bezier(0.6, 0, 0.9, 0.45), visibility 0s linear 0.38s;
  direction: rtl;
  text-align: right;
  font-family: "Discovery Fs", "Assistant", sans-serif;
  font-weight: 240;
}
.tmenu[hidden] { display: block; }
.tmenu.is-open {
  translate: 0 0;
  visibility: visible;
  transition: translate 1.05s cubic-bezier(0.3, 1.32, 0.5, 1), visibility 0s;
}
.tmenu__sheet { --s: var(--mu); position: relative; height: 100%; }
.tmenu__sheet > * { position: absolute; margin: 0; }
.tmenu__sheet::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(112 * var(--s));
  height: 1px;
  background: rgba(247, 247, 247, 0.5);
}
.tmenu__logo { left: calc(77 * var(--s)); top: calc(40 * var(--s)); width: calc(106 * var(--s)); height: calc(37 * var(--s)); color: var(--tn-white); }
.tmenu__t {
  position: absolute; left: 0; top: calc(-1.94 * var(--s)); width: calc(21 * var(--s));
  text-align: center; font-family: "Motive", "Cooperative", sans-serif; font-weight: 500;
  font-size: calc(38.973 * var(--s)); line-height: 0.96;
}
.tmenu__sivia { position: absolute; left: calc(22.184 * var(--s)); top: calc(0.853 * var(--s)); width: calc(83.816 * var(--s)); height: calc(29.036 * var(--s)); overflow: visible; }

/* the pill: the home page's button recipe — an ink fill that is masked away
   in a circle opening from where the pointer came in; words and outline stay white */
@property --tn-fill { syntax: "<percentage>"; initial-value: 0%; inherits: false; }
.tmenu__cta {
  right: calc((1920 - 1755) * var(--s));
  top: calc(34 * var(--s));
  width: calc(225 * var(--s));
  height: calc(56 * var(--s));
  display: flex;
  direction: ltr;
  align-items: center;
  justify-content: center;
  gap: calc(19.453 * var(--s));
  border-radius: calc(100 * var(--s));
  border: 1px solid transparent;
  color: #fff;
  font-size: calc(20 * var(--s));
  line-height: 1.591;
  white-space: nowrap;
  text-decoration: none;
  isolation: isolate;
  --mx: 50%; --my: 50%;
  transition: border-color 0.5s var(--ease-soft, ease);
}
.tmenu__cta::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  background: var(--tn-ink);
  --tn-fill: 0%;
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #0000 var(--tn-fill), #000 calc(var(--tn-fill) + 0.5%));
          mask-image: radial-gradient(circle at var(--mx) var(--my), #0000 var(--tn-fill), #000 calc(var(--tn-fill) + 0.5%));
  transition: --tn-fill 0.5s var(--ease-soft, ease);
}
.tmenu__cta:hover::before, .tmenu__cta:focus-visible::before { --tn-fill: 105%; }
.tmenu__cta:hover, .tmenu__cta:focus-visible { border-color: #fff; }
.tmenu__cta span { direction: rtl; }
.tmenu__arrow { display: block; flex: none; width: calc(56.5 * var(--s)); height: calc(11.046 * var(--s)); margin-inline: calc(-0.75 * var(--s)); transition: transform 0.35s var(--ease-out, ease); }
.tmenu__cta:hover .tmenu__arrow { transform: translateX(calc(-6 * var(--s))); }

.tmenu__close {
  right: calc((1920 - 1853) * var(--s)); top: calc(42 * var(--s));
  width: calc(40 * var(--s)); height: calc(40 * var(--s)); padding: calc(9.166 * var(--s));
  border: 0; background: none; color: var(--tn-white); cursor: pointer;
  transition: rotate 0.5s var(--ease-out, ease);
}
.tmenu__close svg { display: block; width: 100%; height: 100%; }
.tmenu__close:hover, .tmenu__close:focus-visible { rotate: 90deg; }

.tmenu__grid {
  left: 0; right: 0;
  top: calc(50% + (177 - 496.5) * var(--s));
  display: flex; flex-direction: column; align-items: center;
  gap: calc(22.4 * var(--s));
}
.tmenu__link {
  display: block;
  font-family: "Cooperative", "Archivo", "Arial Narrow", sans-serif;
  font-weight: 400;
  font-size: calc(120 * var(--s));
  line-height: 0.98;
  white-space: nowrap;
  color: var(--tn-white);
  text-decoration: none;
  transition: opacity 0.5s var(--ease-soft, ease);
}
.tmenu__link span { display: block; }
.tmenu .drop { display: block; overflow: hidden; }
.tmenu .drop i { display: inline-block; font-style: normal; will-change: transform; }
.tmenu__link .drop i { transform: translateY(-1em); transition: transform 1.1s cubic-bezier(0.76, 0, 0.24, 1); }
.tmenu.is-shown .tmenu__link .drop i { transform: none; }
.tmenu.is-shown .tmenu__link.is-replay .drop i { transition: none; transform: translateY(-1em); }
.tmenu__link.is-slow .drop i { transition-duration: 0.8s; }
.tmenu__grid.is-hovering .tmenu__link:not(.is-hot) { opacity: 0.2; }

.tmenu__copy {
  right: calc((1920 - 1846) * var(--s)); width: calc(230 * var(--s));
  bottom: calc((993 - 919 - 20.8) * var(--s));
  text-align: center; font-size: calc(16 * var(--s)); line-height: 1.3; white-space: nowrap;
}
.tmenu__icons { left: calc(78 * var(--s)); bottom: calc((993 - 919 - 23.667) * var(--s)); display: flex; gap: calc(26 * var(--s)); }
.tmenu__icons a { display: block; }
.tmenu__icons img { display: block; width: calc(23.667 * var(--s)); height: calc(23.667 * var(--s)); }

html.tmenu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .tmenu, .tmenu__link .drop i, .tnav__logo, .tnav__menu { transition: none; }
  .tmenu__link .drop i { transform: none; }
}

/* ---- the home page's heading effect on the other pages (js/site-titles.js) ---- */
.is-dropped .drop {
  display: block;
  overflow: hidden;
  /* room for ascenders, the niqqud and Lia's tails, without moving the line */
  padding: 0.12em 0 0.18em;
  margin: -0.12em 0 -0.18em;
}
.is-dropped .drop i { display: inline-block; font-style: normal; will-change: transform; }
.is-dropped.is-settled .drop i { will-change: auto; }
.is-dropped .warp-text { opacity: 0; transition: opacity 0.6s ease; }
.is-dropped.is-settled .warp-text { opacity: 1; }
.is-dropped.is-warped .drop { transition: opacity 0.6s ease; }
.is-dropped.is-warped.is-settled .drop { opacity: 0; }

/* the menu window's logo: her PNG (5 Oct 2026), 107 x 39 */
.tmenu__img { display: block; width: calc(107 * var(--s)); height: auto; max-width: none; }

/* THE SCROLLBAR (her call, 5 Oct): thin, in her colours — every page that
   loads this file. Purple thumb on the ink, lilac under the pointer. */
html { scrollbar-width: thin; scrollbar-color: #695EBE #0D0914; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0D0914; }
::-webkit-scrollbar-thumb { background: #695EBE; border-radius: 8px; border: 2px solid #0D0914; }
::-webkit-scrollbar-thumb:hover { background: #9F93FF; }

/* the phone (her note, 5 Oct 2026): the logo and the menu button a little
   bigger — on a phone --nu bottoms out at 0.5, which drew them at 29 / 24.5 */
@media (max-width: 899px) {
  .tnav__logo { left: 36px; top: 17px; font-size: 36px; }
  .tnav__menu { right: 22px; top: 21px; width: 31px; height: 31px; }
}
@media (max-width: 899px) {
  /* the letters' tops on Android (her Samsung, 5 Oct): room above and below
     every heading line and every letter, so what the type draws past its box
     is painted and shown; the letters start that much higher (js/site-titles.js LIFT) */
  html[data-titles-phone] .is-dropped .drop { padding: 0.3em 0; margin: -0.3em 0; }   /* index only: mentoring.html as she signed it off */
  html[data-titles-phone] .is-dropped .drop i { padding-block: 0.3em; margin-block: -0.3em; }
}

/* "צור קשר" in the menu: the phone only (her note, 5 Oct) — it takes the
   place of the button there */
.tmenu__link--contact { display: none; }

/* THE MENU WINDOW ON THE PHONE (her notes, 5 Oct 2026) — every page:
   the logo and the X bigger; no button (צור קשר is a link under ליווי
   למעצבים instead); the icons bigger and centred; no copyright line */
@media (max-width: 899px) {
  .tmenu__logo { left: 24px; top: 24px; width: auto; height: auto; }
  .tmenu__img { width: 104px; }
  .tmenu__close { right: 16px; top: 18px; width: 52px; height: 52px; padding: 12px; }
  .tmenu__sheet::after { top: 92px; }
  .tmenu__cta { display: none; }
  .tmenu__link--contact { display: block; }
  .tmenu__copy { display: none; }
  .tmenu__icons {
    left: 0;
    right: 0;
    bottom: calc(36px + env(safe-area-inset-bottom, 0px));
    justify-content: center;
    gap: 34px;
  }
  .tmenu__icons img { width: 30px; height: 30px; }
}
@media (max-width: 899px) {
  /* the six words centred between the line under the logo and the icons,
     and smaller on a short phone so they never reach the icons */
  .tmenu__grid { top: calc(50% + 13px); translate: 0 -50%; gap: 11px; }
  .tmenu__link { font-size: min(60px, 6.6svh); }
}
@media (max-width: 899px) {
  /* a step back (her note, 5 Oct: "too big"): between the old and the last */
  .tmenu__logo { left: 22px; top: 26px; }
  .tmenu__img { width: 80px; }
  .tmenu__close { right: 18px; top: 22px; width: 40px; height: 40px; padding: 10px; }
  .tmenu__sheet::after { top: 84px; }
  .tmenu__icons { gap: 28px; }
  .tmenu__icons img { width: 24px; height: 24px; }
}
@media (max-width: 899px) {
  /* a gradient wordmark kept WHOLE on the phone (js/site-titles.js
     .is-whole — her Samsung cut the split letters): uncovered top to bottom */
  .is-whole {
    clip-path: inset(-30% -30% 100% -30%);
    transition: clip-path 1.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .is-whole.is-shown, .is-whole.is-settled { clip-path: inset(-30% -30% -30% -30%); }
}
@media (max-width: 899px) {
  /* ONCE AND FOR ALL (her Samsung, 5 Oct, third note): no clip-path — on her
     phone the uncovering never showed them. A plain rise + fade instead, and
     room above and below every whole wordmark: a gradient is painted only
     inside the box, the box is shorter than the letters (line 0.83–0.96), and
     Android sets the type higher than Windows — so the tops went unpainted.
     The padding is taken back by margins: nothing moves. */
  .is-whole {
    clip-path: none !important;
    padding-block: 0.25em;
    margin-block: -0.25em;
    opacity: 0;
    transform: translateY(0.12em);
    transition: opacity 1s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .is-whole.is-shown, .is-whole.is-settled { opacity: 1; transform: none; }
}
@media (max-width: 899px) {
  /* her call (5 Oct, fourth note): the big gradient wordmarks on a phone are
     STILL — always there, no movement (js/site-titles.js remaps their gradient
     onto the type, the room above and below stays) */
  .is-whole { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* her second phone (6 Oct): the browser's forced dark mode darkened the light
   bands. The page draws its own darks and lights: never re-colour it
   (+ <meta name="color-scheme" content="only light"> on every page) */
:root { color-scheme: only light; }
@media (max-width: 899px) {
  /* THE MOVEMENT BACK (her call, 6 Oct — the vanishing was the resize bug,
     now fixed, not the animation): a whole wordmark rises in and fades up as
     it comes on screen (.is-shown from an IntersectionObserver; a hero from
     .is-settled). Not the letter-by-letter drop: that is what broke on her Samsung. */
  .is-whole.is-whole:not(.is-shown):not(.is-settled) { opacity: 0 !important; transform: translateY(0.15em) !important; }
  .is-whole.is-whole { transition: opacity 1s ease, transform 1.3s cubic-bezier(0.22, 1, 0.36, 1) !important; }
}

/* THE NEW LOGO (her call, 7 Oct 2026, Figma 3575:1230 + 3648:432): the t and
   a lilac drop on its foot — 13.77 x 13.65 at (77, 70) beside the 58.135 t
   whose box starts at (56, 39 - 2.9) — square corner down-left. In em, so it
   follows the logo's size on every screen. Shared: every page's header. */
.tnav__logo::after {
  content: "";
  position: absolute;
  left: 0.3612em;
  top: 0.5831em;
  width: 0.2369em;
  height: 0.2347em;
  border-radius: 50% 50% 50% 0;
  background: #9F93FF;
  pointer-events: none;
}

/* BIGGER TAP AREAS (QA audit, 7 Oct 2026): the menu button measured 31x31 and
   the logo 19x35 on a phone, under the 44x44 minimum. An invisible ring
   around each takes the tap; nothing drawn moves. (The logo's ::after is
   its purple drop, so the ring is its ::before.) */
.tnav__menu::before,
.tnav__logo::before {
  content: "";
  position: absolute;
  inset: -10px;
}
.tnav__logo::before { inset: -6px -14px; }